.ivy-faq--repertoire { padding: clamp( 4.5rem, 10vw, 10rem ) max( 1.5rem, calc( ( 100% - 78rem ) / 2 ) ); background: transparent; }
.ivy-faq--repertoire .ivy-faq__header { max-width: 46rem; margin: 0 auto clamp( 3.5rem, 7vw, 6.5rem ); text-align: center; }
.ivy-faq--repertoire .ivy-faq__eyebrow { display: block; margin-bottom: 1rem; color: var( --ivy-eyebrow-color, var( --ivy-color-muted, rgb( 94 91 85 ) ) ); font: var( --ivy-eyebrow-typography, inherit ); font-size: var( --ivy-font-label ); font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.ivy-faq--repertoire .ivy-faq__title { margin: 0; color: var( --ivy-title-color, var( --ivy-color-ink, rgb( 27 30 28 ) ) ); line-height: .96; letter-spacing: -.05em; }
.ivy-faq--repertoire .ivy-faq__text { max-width: 40rem; margin: 1.3rem auto 0; color: var( --ivy-text-color, var( --ivy-color-muted, rgb( 94 91 85 ) ) ); font: var( --ivy-text-typography, inherit ); line-height: 1.65; }
.ivy-faq--repertoire .ivy-faq__cta { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; min-height: 2.75rem; margin-top: 1.8rem; padding: .65rem 1.15rem; border: 1px solid var( --ivy-cta-border-color, rgb( 27 30 28 ) ); border-radius: var( --ivy-radius-action, 999px ); background: var( --ivy-cta-background-color, transparent ); color: var( --ivy-cta-color, var( --ivy-color-ink, rgb( 27 30 28 ) ) ); font: var( --ivy-cta-typography, inherit ); font-weight: 650; line-height: 1.2; text-decoration: none; transition: background-color .2s ease, color .2s ease, transform .2s ease; }
.ivy-faq--repertoire .ivy-faq__cta span { font-size: var( --ivy-font-label ); line-height: 1; transition: transform .2s ease; }
.ivy-faq--repertoire .ivy-faq__cta:focus-visible, .ivy-faq--repertoire .ivy-faq__question:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.ivy-faq--repertoire .ivy-faq__lists { display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: clamp( 2rem, 8vw, 9rem ); }
.ivy-faq--repertoire .ivy-faq__list { min-width: 0; border-top: 1px solid var( --ivy-list-border-color, rgb( 185 183 176 ) ); counter-reset: ivy-faq-index; }
/*
 * TRAITEMENT chevauchement : le numero fantome et la ligne de question
 * PARTAGENT la meme cellule de grille (grid-column/grid-row 1) au lieu
 * d'une colonne separee — c'est un vrai recouvrement de code, pas une mise
 * en page a deux colonnes. Le numero reste dans la zone reservee par le
 * padding-left du bouton : il ne passe jamais SOUS les lettres rendues,
 * seule sa marge gauche vide le recoit (engagement de lisibilite).
 */
.ivy-faq--repertoire .ivy-faq__item { display: grid; grid-template-columns: 1fr; counter-increment: ivy-faq-index; border-bottom: 1px solid var( --ivy-item-border-color, rgb( 185 183 176 ) ); }
/*
 * Espace entre le chiffre et le titre : le chiffre lit le role `step`
 * (32-48px), donc le padding du bouton doit largement le depasser pour
 * laisser respirer le texte — 4.5rem, pas 3.25rem. Demande d'Alex.
 *
 * Le KIT ELEMENTOR peint tout `<button>` natif au survol/focus —
 * `.elementor-kit-<id> button:hover, :focus { background-color:
 * var( --e-global-color-primary ) }`, la regle qui colore les VRAIS
 * boutons `.elementor-button` (PASSATION §3, decision du 25 aout). Un
 * bouton de divulgation n'a jamais ete un CTA, mais sa specificite au
 * survol (0,2,1) bat le `background: transparent` de repos (0,2,0) — d'ou
 * l'aplat a la couleur d'accent du site constate a l'ecran le
 * 22 septembre, invisible dans `getComputedStyle` hors survol et donc
 * hors de portee d'une garde automatisee. Les regles `:hover`/`:focus`
 * juste apres re-affirment le transparent a une specificite (0,3,0) qui
 * gagne quel que soit l'ordre d'enqueue des feuilles.
 *
 * Piege trouve en verifiant : le fond de l'icone au survol lisait
 * `currentColor` en repli, la MEME propriete que les barres du trait —
 * les deux convergent vers le blanc une fois `color` lui-meme bascule au
 * blanc dans la meme regle, et le disque devient plein, sans glyphe
 * visible. Le repli du fond doit etre une couleur FIXE, jamais
 * `currentColor` quand `color` change dans la meme declaration.
 *
 * Trois etats sur LE BOUTON, pas sur l'item — demande d'Alex, 22 septembre :
 * repos (transparent), survol (tramage clair) et actif/ouvert (tramage plus
 * marque + police en gras). `.ivy-faq__item` n'a plus son propre fond : il
 * ne reste que le cadre (bordure basse), et le bouton, qui le couvre en
 * entier, porte desormais tout l'etat visuel. La specificite de chaque
 * regle (0,3,0 pour :hover, 0,4,0 pour .ivy-open) bat deja le kit sans
 * artifice supplementaire — inutile de re-affirmer le transparent a part.
 */
.ivy-faq--repertoire .ivy-faq__item.ivy-open .ivy-faq__question { background: var( --ivy-item_question-open-background-color, rgb( 249 249 247 ) ); color: var( --ivy-item_question-open-color, var( --ivy-color-ink, rgb( 27 30 28 ) ) ); font-weight: 750; }
.ivy-faq--repertoire .ivy-faq__item::before { content: counter( ivy-faq-index, decimal-leading-zero ); grid-column: 1; grid-row: 1; align-self: center; justify-self: start; padding-left: .1rem; color: var( --ivy-item_question-color, var( --ivy-color-ink, rgb( 27 30 28 ) ) ); font: var( --ivy-item_question-typography, inherit ); font-size: var( --ivy-font-step ); font-weight: 400; letter-spacing: -.02em; opacity: .16; pointer-events: none; }
.ivy-faq--repertoire .ivy-faq__question { grid-column: 1; grid-row: 1; display: flex; width: 100%; min-height: 4.25rem; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 0 1.1rem 4.5rem; border: 0; appearance: none; -webkit-appearance: none; background: var( --ivy-item_question-background-color, transparent ); color: var( --ivy-item_question-color, var( --ivy-color-ink, rgb( 27 30 28 ) ) ); font: var( --ivy-item_question-typography, inherit ); font-size: var( --ivy-font-body ); font-weight: 650; line-height: 1.3; text-align: left; white-space: normal; cursor: pointer; touch-action: manipulation; transition: background-color .2s ease, color .2s ease; }
.ivy-faq--repertoire .ivy-faq__question > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.ivy-faq--repertoire .ivy-faq__answer { grid-column: 1; grid-row: 2; display: grid; grid-template-rows: 0fr; overflow: hidden; color: var( --ivy-item_answer-color, var( --ivy-color-muted, rgb( 94 91 85 ) ) ); font: var( --ivy-item_answer-typography, inherit ); opacity: 0; transition: grid-template-rows .22s ease, opacity .18s ease; }
.ivy-faq--repertoire .ivy-faq__answer > div { min-height: 0; overflow: hidden; }
.ivy-faq--repertoire .ivy-faq__answer p { max-width: 38rem; margin: 0; padding: 0 .25rem 1.5rem 4.5rem; line-height: 1.65; }
.ivy-faq--repertoire .ivy-faq__item.ivy-open .ivy-faq__answer { grid-template-rows: 1fr; opacity: 1; }
/*
 * L'icone porte deux barres dessinees en pseudo-elements au lieu d'un
 * glyphe "+" pivote : le geste devient un TRAIT QUI SE DESSINE (la barre
 * verticale se retracte a l'ouverture) plutot qu'une rotation generique.
 * Le glyphe texte reste dans le DOM pour l'affordance non stylee, mais
 * n'est plus rendu visuellement (font-size:0) — aria-hidden le retire deja
 * de l'arbre d'accessibilite.
 */
.ivy-faq--repertoire .ivy-faq__icon { position: relative; display: grid; flex: 0 0 2.25rem; width: 2.25rem; min-height: 2.25rem; place-items: center; border: 1px solid currentColor; border-radius: 50%; color: var( --ivy-item_icon-color, currentColor ); font-size: 0; line-height: 1; transition: background-color .22s ease, color .22s ease; }
.ivy-faq--repertoire .ivy-faq__icon::before, .ivy-faq--repertoire .ivy-faq__icon::after { content: ''; position: absolute; top: 50%; left: 50%; background: currentColor; transition: transform .22s ease; }
.ivy-faq--repertoire .ivy-faq__icon::before { width: .85rem; height: 1px; transform: translate( -50%, -50% ); }
.ivy-faq--repertoire .ivy-faq__icon::after { width: 1px; height: .85rem; transform: translate( -50%, -50% ); }
.ivy-faq--repertoire .ivy-faq__item.ivy-open .ivy-faq__icon::after { transform: translate( -50%, -50% ) scaleY( 0 ); }
@media ( hover: hover ) and ( pointer: fine ) { .ivy-faq--repertoire .ivy-faq__cta:hover { background: var( --ivy-cta-hover-background-color, var( --ivy-color-ink, rgb( 27 30 28 ) ) ); color: var( --ivy-cta-hover-color, var( --ivy-color-surface, rgb( 255 255 255 ) ) ); transform: translateY( -1px ); } .ivy-faq--repertoire .ivy-faq__cta:hover span { transform: translateX( .14rem ); } .ivy-faq--repertoire .ivy-faq__item:not( .ivy-open ) .ivy-faq__question:hover, .ivy-faq--repertoire .ivy-faq__item:not( .ivy-open ) .ivy-faq__question:focus { background: var( --ivy-item_question-hover-background-color, rgb( 250 250 248 ) ); color: var( --ivy-item_question-hover-color, var( --ivy-color-ink, rgb( 27 30 28 ) ) ); } .ivy-faq--repertoire .ivy-faq__question:hover .ivy-faq__icon { background: var( --ivy-item_icon-hover-background-color, var( --ivy-color-ink, rgb( 27 30 28 ) ) ); color: var( --ivy-item_icon-hover-color, var( --ivy-color-surface, rgb( 255 255 255 ) ) ); } .ivy-faq--repertoire .ivy-faq__question:hover .ivy-faq__icon::after { transform: translate( -50%, -50% ) scaleY( 0 ); } }
@media ( max-width: 720px ) { .ivy-faq--repertoire .ivy-faq__header { margin-bottom: 3.5rem; text-align: left; } .ivy-faq--repertoire .ivy-faq__text { margin-inline: 0; } .ivy-faq--repertoire .ivy-faq__lists { grid-template-columns: minmax( 0, 1fr ); gap: 0; } .ivy-faq--repertoire .ivy-faq__list + .ivy-faq__list { border-top: 0; } .ivy-faq--repertoire .ivy-faq__question { padding-left: 2.75rem; } .ivy-faq--repertoire .ivy-faq__answer p { padding-left: 2.75rem; } }
@media ( prefers-reduced-motion: reduce ) { .ivy-faq--repertoire .ivy-faq__cta, .ivy-faq--repertoire .ivy-faq__cta span, .ivy-faq--repertoire .ivy-faq__question, .ivy-faq--repertoire .ivy-faq__icon, .ivy-faq--repertoire .ivy-faq__icon::before, .ivy-faq--repertoire .ivy-faq__icon::after, .ivy-faq--repertoire .ivy-faq__answer { transition: none; } }