/**
 * Accordéon — composant partagé.
 *
 * Utilisé par la FAQ courte de l'accueil (migration 005) et par la page
 * « Questions fréquentes » (migration 017). Le même composant doit avoir le
 * même aspect aux deux endroits : d'où cette feuille, plutôt qu'un habillage
 * recopié dans chaque page.
 *
 * L'accessibilité de ce widget est corrigée par `assets/js/accordeon-a11y.js`
 * et un filtre PHP : Elementor pose un `aria-selected` interdit sur son
 * `role="button"`.
 *
 * @package Plein_R_Astra_Child
 */

/* La classe est posée par le sélecteur générique ci-dessous plutôt que par le
   balisage : le propriétaire peut ajouter un accordéon n'importe où, il sera
   habillé sans qu'on ait à toucher au CSS. */
.elementor-widget-accordion .elementor-accordion { border: 0; }


.elementor-widget-accordion .elementor-accordion-item {
	border: 0;
	border-bottom: 1px solid var(--bordure);
	background: transparent;
}

/* Le texte du titre n'est PAS dans le `h2` mais dans un `<a>` qu'il contient,
   et cet `<a>` porte sa propre taille — mesuré à 42 px alors que le `h2`
   était bien à 18,75. Il faut donc habiller les deux. */
/* Le titre est une RANGÉE : l'icône et le texte doivent partager la même
   ligne de base. Il était en `display: block`, l'icône flottant 18 px plus
   haut que le texte. */
.elementor-widget-accordion .elementor-tab-title {
	display: flex;
	align-items: center;
	gap: var(--e-1);
}

.elementor-widget-accordion .elementor-accordion-icon {
	display: inline-flex;
	align-items: center;
	width: auto;
	margin: 0;
	flex: 0 0 auto;
}

.elementor-widget-accordion .elementor-accordion-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.elementor-widget-accordion .elementor-accordion-title { flex: 1 1 auto; }

.elementor-widget-accordion .elementor-tab-title,
.elementor-widget-accordion .elementor-accordion-title {
	padding: var(--e-2) 0;
	border: 0;
	background: transparent;
	font-size: var(--t-h5);
	line-height: var(--lh-h4);
	font-weight: 700;
	color: var(--encre);
}

.elementor-widget-accordion .elementor-accordion-title {
	padding: 0;
	text-decoration: none;
}

.elementor-widget-accordion .elementor-tab-title:hover,
.elementor-widget-accordion .elementor-tab-title:hover .elementor-accordion-title { color: var(--accent); }

.elementor-widget-accordion .elementor-tab-content {
	padding: 0 0 var(--e-2);
	border: 0;
	background: transparent;
	color: var(--encre-douce);
}

.elementor-widget-accordion .elementor-tab-content p { max-width: var(--mesure); }

/* La cible de l'accordéon doit rester atteignable au clavier et visible. */
.elementor-widget-accordion .elementor-tab-title:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
}

/* Sur la page « Questions fréquentes », l'accordéon est le contenu principal :
   il prend une largeur de lecture plutôt que toute la page. */
.elementor-element-prfaqsec1 > .elementor-container {
	width: min(100%, 860px);
	margin-inline: auto;
	padding-inline: clamp(16px, 2vw, 24px);
}

.elementor-element-prfaqtxt1 p {
	font-size: var(--t-h5);
	line-height: var(--lh-lead);
	color: var(--encre-douce);
	margin: 0 0 var(--e-3);
	max-width: var(--mesure);
}