/* AEROCAP — feuille accueil : page d'accueil (#index). (structure reprise de L’Abritant V2, 04/11/2026)
   Chargée sur toutes les pages : chaque règle est limitée à l’identifiant de page porté par <body> (Hummingbird : body id = page_name).
   Uniquement des jetons var(--…), aucun !important, même couche @layer que l’original quand on redéclare Hummingbird.

   Gabarit Qarto « Accueil (n° 2) » ; design system V2 : carte B1_Accueil (bureau), M1_TelephoneCatalogue écran 01 (téléphone).
   Deux sortes de règles :
   1. Classes de la carte (b1-*, « classes locales à verser au kit ») et kit pg-* / ab-* : hors couche, comme maquettes.css.
   2. Adaptation de Hummingbird (.page-content--home) : dans @layer ps-pages, la couche d’origine.

   Sommaire : §1 page · §2 héros · §3 sélecteur de besoin · §4 sections du bloc de texte (usages, univers,
   gammes, étapes, pros, FAQ, conseils) · §5 produits · §6 bannière et autres modules · §7 bandeau conseiller ·
   §8 paliers (1 200 / 992 / 768 / 480 px). */


/* §1 Page : pleine largeur, sections empilées sans l’écart de 2,5 rem de Hummingbird. */
@layer ps-pages {
  #index .page-content--home { gap: 0; }
}

#index { --b1-chevauchement: 84px; --b1-section: calc(var(--espace-8) + var(--espace-2)); }

/* Remise à zéro en :where() (spécificité 1,0,0) : en :is(), elle pesait 1,1,1 et écrasait les marges des règles
   « #index .classe » qui suivent (32 px entre le chapô et les preuves du héros, 24 px avant les profils pros,
   8 px avant les usages des univers : tous à 0 jusqu’au 28/10/2026). */
#index :where(.b1-hero, .b1-besoin-cadre, .b1-sec, .b1-conseiller) :where(p, h1, h2, h3, h4, ul, ol, figure) { margin: 0; }
#index :where(.b1-hero, .b1-sec) :where(ul, ol) { padding: 0; list-style: none; }
/* 32 px entre le chapô d’une section et son contenu (24 px jugés trop serrés par Quentin le 28/10/2026). */
#index :is(.b1-sec, .b1-produits) .pg-tete { margin-bottom: var(--espace-8); }
#index :is(.b1-sec, .b1-produits) .titre-1 { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.08; }
/* Tête de section (demande de Quentin du 03/11/2026 : même écart partout, texte moins tôt à la ligne) : 12 px entre
   le titre et son chapô dans toutes les sections (la remise à zéro ci-dessus les mettait à 0, sauf Pros et FAQ) ;
   titre sur toute la largeur de la colonne, équilibré s'il passe sur deux lignes ; chapô jusqu'à 920 px au lieu des
   760 px du kit (« Trois gammes… » tenait en une ligne de 1 012 px, son chapô coupait à 72 caractères). */
#index :is(.b1-sec, .b1-produits) .pg-tete__titre { max-width: none; }
#index :is(.b1-sec, .b1-produits) :is(.pg-tete__titre, .b1-pros, .b1-faq) .titre-1 { text-wrap: balance; }
#index :is(.b1-sec, .b1-produits) :is(.pg-tete__titre, .b1-pros, .b1-faq) .chapo { margin-top: var(--espace-3); max-width: 920px; text-wrap: pretty; }
#index .b1-l44 { display: inline-flex; align-items: center; min-height: var(--cible-min); }
#index .b1-sec .pg-carte-photo__pied .ab-bouton--lien { display: inline-flex; align-items: center; min-height: var(--cible-min); }


/* §2 Héros : photo pleine largeur, dégradé graphite vers la droite, accroche et preuves en toile.
   Diaporama (Qarto Q83) : les diapositives sont empilées dans la même case de grille, le héros prend la hauteur
   de la plus haute (rien ne saute d’une diapositive à l’autre) ; seule la diapositive active est visible (fondu). */
#index .b1-hero { position: relative; overflow: hidden; background: var(--graphite); color: var(--toile); }
#index .b1-hero__diapos { display: grid; }
#index .b1-diapo { grid-area: 1 / 1; position: relative; display: flex; min-height: 520px; }
#index .b1-hero--diapos .b1-diapo { transition: opacity 600ms ease-out, visibility 0s linear 600ms; }
#index .b1-hero--diapos .b1-diapo.est-active { z-index: 1; transition: opacity 600ms ease-out, visibility 0s; }
#index .b1-hero--diapos .b1-diapo:not(.est-active) { visibility: hidden; opacity: 0; }
#index .b1-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#index .b1-diapo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--graphite) 82%, transparent) 0%, color-mix(in srgb, var(--graphite) 70%, transparent) 45%, color-mix(in srgb, var(--graphite) 40%, transparent) 64%, transparent 82%); pointer-events: none; } /* Voile prolongé (RGAA 3.2, audit du 03/11/2026 : preuves à 4,05:1 sur les photos claires à 1 440 px) */
#index .b1-hero__txt { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; padding: calc(var(--espace-12) + var(--espace-2)) 0 calc(var(--b1-chevauchement) + var(--espace-8)); }
/* La description du diaporama (surtitre, chapô, preuves) se range dans la colonne du titre ; le surtitre passe au-dessus. */
#index .b1-hero__desc { display: contents; }
#index .b1-hero .pg-surtitre { order: -1; color: var(--toile); }
#index .b1-hero .titre-affiche { max-width: 620px; margin-bottom: calc(var(--espace-4) + var(--espace-1)); font-size: clamp(40px, 5.4vw, 72px); color: var(--toile); }
#index .b1-hero .chapo { max-width: 36ch; font-size: clamp(18px, 1.5vw, 21px); color: var(--toile); }
#index .b1-preuves { display: grid; gap: var(--espace-3); max-width: 520px; margin-top: var(--espace-8); }
#index .b1-preuves li { display: flex; align-items: flex-start; gap: var(--espace-3); font-size: 16px; line-height: 22px; }
#index .b1-preuves li::before { content: ""; flex: none; width: 14px; height: 8px; margin: var(--espace-1) var(--espace-1) 0; border-left: var(--trait-hauban) solid var(--jaune-hauban); border-bottom: var(--trait-hauban) solid var(--jaune-hauban); transform: rotate(-45deg); }
#index .b1-preuves li:has(svg)::before { display: none; }
#index .b1-preuves svg { flex: none; width: 24px; height: 24px; color: var(--jaune-hauban); }
#index .b1-preuves b, #index .b1-preuves strong { font-weight: 600; }
#index .b1-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-6); margin-top: var(--espace-8); background: none; }
/* Commandes du diaporama : barre graphite pleine (ab-inverse, focus jaune) en bas à gauche, au-dessus du sélecteur ;
   le texte réserve sa hauteur pour ne jamais passer dessous. Cibles de 44 px. */
#index .b1-hero--diapos .b1-hero__txt { padding-bottom: calc(var(--b1-chevauchement) + var(--espace-4) + var(--cible-min) + var(--espace-6)); }
#index .b1-hero__nav { position: absolute; left: 0; right: 0; bottom: calc(var(--b1-chevauchement) + var(--espace-4)); z-index: 2; pointer-events: none; }
#index .b1-nav { display: inline-flex; align-items: center; pointer-events: auto; }
#index .b1-nav__btn, #index .b1-nav__puce { display: inline-flex; align-items: center; justify-content: center; width: var(--cible-min); height: var(--cible-min); padding: 0; border: 0; background: none; color: var(--toile); cursor: pointer; }
#index .b1-nav__btn:hover, #index .b1-nav__puce:hover { background: var(--graphite-doux); }
#index .b1-nav__btn:disabled { color: var(--toile-attenuee); background: none; cursor: default; }
#index .b1-nav__puces { display: flex; }
#index .b1-nav__puce::before { content: ""; width: 14px; height: var(--trait-hauban); background: var(--toile-attenuee); transition: width 200ms ease-out; }
#index .b1-nav__puce[aria-current="true"]::before { width: 24px; background: var(--jaune-hauban); }
/* Icône pause : deux barres pleines (.pg-ico du kit les rendait creuses : fill none, trait seul). */
#index .b1-nav__pause { fill: currentColor; stroke: none; }
#index .b1-hero:not(.est-en-pause) .b1-nav__lecture, #index .b1-hero.est-en-pause .b1-nav__pause { display: none; }
@media (prefers-reduced-motion: reduce) {
  #index .b1-hero--diapos .b1-diapo, #index .b1-hero--diapos .b1-diapo.est-active, #index .b1-nav__puce::before { transition: none; }
}


/* §3 Sélecteur de besoin (module lamselecteur, styles dans pages/selecteur.css) : ici seulement sa position,
   à cheval sur le bas du héros. */
#index .b1-besoin-cadre { position: relative; z-index: 2; margin-top: var(--espace-8); }
#index .b1-hero + .b1-besoin-cadre { margin-top: calc(-1 * var(--b1-chevauchement)); }
/* Sous le chevauchement, le fond de la section suivante court sur toute la largeur : plus de bande crème autour de la carte. */
#index .b1-hero + .b1-besoin-cadre::before { content: ""; position: absolute; z-index: -1; top: var(--b1-chevauchement); bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--fond-section); }


/* §4 Sections écrites dans le bloc de texte personnalisé (classes de la carte B1). */
#index .b1-sec { padding-block: var(--b1-section); }

/* Entrées par usage : quatre cartes blanches, icône, titre, phrase et lien. */

/* Univers et conseils : cartes photo du kit, quatre puis trois par ligne. */
#index .b1-univers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Usages sous chaque univers (« désencombrement » du 28/10/2026, variante A1) : ils remplacent la section « Que voulez-vous
   abriter ? » à 4 cartes. Un usage par ligne, trait oblique de la cote devant chacun (ajouts de Gaëlle du 30/10/2026,
   ligne 83 : sur une ligne, « Club et association » passait seul à la ligne derrière son trait, avec un grand blanc). */
#index .b1-usages-liens { list-style: none; display: grid; margin: var(--espace-2) 0 0; padding: 0; font-size: 14px; line-height: 20px; }
#index .b1-usages-liens li { display: flex; align-items: center; gap: var(--espace-3); }
#index .b1-usages-liens li::before { content: ""; flex: none; width: 10px; height: 2px; background: var(--graphite); transform: rotate(-64deg); }
#index .b1-usages-liens a { display: inline-flex; align-items: center; min-height: 44px; color: var(--graphite); text-decoration: underline; text-underline-offset: 3px; }
#index .b1-univers .pg-carte-photo__img { height: 170px; }
/* Titre et photo cliquables (28/10/2026, demande de Quentin) : le titre est le lien de la carte ; la photo mène au
   même endroit, hors tabulation et masquée aux lecteurs d’écran (pas de doublon). */
#index .b1-univers .pg-carte-photo__img > a { display: block; height: 100%; }
/* Cible de 44 px sans décaler la mise en page (recette du 03/11/2026 : 28 px de haut). */
#index .b1-univ__lien { display: inline-block; padding-block: 8px; margin-block: -8px; color: inherit; text-decoration: none; }
#index .b1-univ__lien:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
#index .b1-univ__lien:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: 3px; }
#index .b1-univers .pg-carte-photo:has(.b1-univ__lien:hover, .pg-carte-photo__img > a:hover) .pg-carte-photo__img img { opacity: .9; }
#index .b1-conseils .pg-carte-photo__img { height: 150px; }
#index .b1-conseils .b1-conseil--sans { border-top: var(--trait-hauban) solid var(--graphite); }
#index :is(.b1-univers, .b1-conseils) .pg-carte-photo__corps { padding: var(--espace-4) var(--espace-6); }
#index :is(.b1-univers, .b1-conseils) .pg-carte-photo__pied { padding: 0 var(--espace-6) var(--espace-4); }

/* Comparateur des gammes : composant partagé .ab-gammes (marque.css § 2), le même que dans les catégories. */

/* Comment ça se passe : chaîne de cotes, comme sur un plan (signe ab-cote). Une ligne graphite continue,
   un trait oblique à l’angle du A au départ de chaque étape et un dernier en bout de rangée ; pas de carte. */
#index .b1-etapes { --b1-cran: linear-gradient(calc(-1 * var(--angle-hauban)), transparent 44%, var(--graphite) 44%, var(--graphite) 56%, transparent 56%); --b1-ligne: linear-gradient(var(--graphite), var(--graphite)); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: var(--espace-8); }
#index .b1-etape { position: relative; display: grid; align-content: start; gap: var(--espace-2); padding: var(--espace-8) var(--espace-6) 0 0; }
#index .b1-etape::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 16px; background: var(--b1-cran) left center / 10px 16px no-repeat, var(--b1-ligne) left center / 100% var(--trait-moyen) no-repeat; }
#index .b1-etape:last-child::before { background: var(--b1-cran) left center / 10px 16px no-repeat, var(--b1-cran) right center / 10px 16px no-repeat, var(--b1-ligne) left center / 100% var(--trait-moyen) no-repeat; }
#index .b1-etape__num { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-technique); font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: .06em; }
#index .b1-etape__num svg { width: 20px; height: 20px; }
#index .b1-etape p { font-size: 15px; line-height: 22px; color: var(--texte-doux); }

/* Pros et collectivités : profils à gauche, parcours devis → Chorus Pro à droite. */
#index .b1-pros { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--espace-12); padding: var(--espace-8) var(--espace-12); background: var(--blanc); border: var(--trait-moyen) solid var(--graphite); border-radius: var(--rayon-m); }
#index .b1-pros__profils { display: grid; gap: var(--espace-3); margin-top: var(--espace-6); }
#index .b1-pros__profils li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--espace-3); font-size: 15px; line-height: 22px; }
#index .b1-pros__profils li:not(:has(svg)) { grid-template-columns: minmax(0, 1fr); }
#index .b1-pros__profils svg { width: 24px; height: 24px; }
#index .b1-pros__profils b, #index .b1-process b { display: block; font-size: 16px; }
#index .b1-pros h3 { margin-bottom: var(--espace-3); }
#index .b1-process { display: grid; counter-reset: b1-pas; }
#index .b1-process li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--espace-4); align-items: start; padding: var(--espace-3) 0; border-bottom: var(--trait-fin) solid var(--trait); font-size: 15px; line-height: 22px; }
#index .b1-process li::before { counter-increment: b1-pas; content: counter(b1-pas); display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: var(--trait-moyen) solid var(--graphite); border-radius: 50%; font-family: var(--font-technique); font-size: 14px; font-weight: 600; }
#index .b1-pros__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-4); margin-top: var(--espace-6); }

/* Questions fréquentes : titre et lien à gauche, plis <details> à droite, chevron dessiné en CSS. */
#index .b1-faq { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: var(--espace-16); }
#index .b1-faq .chapo { margin-bottom: var(--espace-6); }
#index .b1-faq details > summary { list-style: none; cursor: pointer; }
#index .b1-faq details > summary::-webkit-details-marker { display: none; }
#index .b1-faq .pg-faq__q { min-height: var(--cible-min); padding: var(--espace-3) 0; font-size: 16px; }
#index .b1-faq .pg-faq__q::after { content: ""; flex: none; width: 10px; height: 10px; margin-right: var(--espace-2); border-right: var(--trait-moyen) solid currentColor; border-bottom: var(--trait-moyen) solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform .12s ease-out; }
#index .b1-faq details[open] > .pg-faq__q { border-bottom: 0; }
#index .b1-faq details[open] > .pg-faq__q::after { transform: translateY(2px) rotate(-135deg); }
#index .b1-faq .pg-faq__q:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; }


/* §5 Vitrine (lamvitrine) ou Produits phares (et nouveautés, meilleures ventes, promos s’ils restent sur l’accueil). */
#index .b1-produits { padding-block: var(--b1-section); }
#index .b1-produits .module-products { width: min(var(--conteneur), calc(100% - 2 * var(--marge))); margin-inline: auto; }


/* §6 Bannière et autres modules de l’accueil (emplacement des avis clients). */
#index .b1-banniere { padding-block: var(--b1-section); }
#index .b1-banniere__lien { display: block; border-radius: var(--rayon-m); }
#index .b1-banniere__lien:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; }
#index .b1-banniere__img { display: block; width: 100%; height: auto; border-radius: var(--rayon-m); }


/* §7 Bandeau conseiller (sans prénoms, décision 28). */
/* Moins d’espace avant la réassurance du pied (retours de Gaëlle du 28/10/2026, ligne 40). */
#index .b1-conseiller { margin-block: var(--b1-section) 0; }
/* Suivi d’une section (sous le comparateur des gammes) : même respiration qu’entre deux sections, la marge s’ajoute au
   retrait de la section suivante (demande de Quentin du 03/11/2026). */
#index .b1-conseiller:not(:last-child) { margin-bottom: var(--b1-section); }
#index .a2-pied { margin-top: var(--espace-8); }
#index .b1-conseiller__texte { display: grid; gap: var(--espace-3); }
#index .b1-conseiller__texte .corps { max-width: 60ch; }
#index .b1-conseiller .titre-2 { font-size: clamp(26px, 2.4vw, 34px); line-height: 1.18; color: var(--toile); }
#index .b1-conseiller__actions { display: grid; gap: var(--espace-3); justify-items: start; }
#index .b1-conseiller__boutons { flex-wrap: wrap; background: none; }
/* Label Service France Garanti en tête du bandeau (03/11/2026) : colonne de gauche ; boutons sous le texte de 992 à
   1 199 px, sous le label et le texte de 480 à 991 px ; label au-dessus du texte sous 480 px. Fichier officiel en currentColor, donc toile sur graphite. */
#index .b1-conseiller .pg-conseiller { grid-template-columns: auto minmax(0, 1fr) auto; }
#index .b1-conseiller__sfg { color: var(--texte-inverse); }
#index .b1-conseiller__sfg .lab-sfg__label { height: 128px; }
/* À cheval entre deux fonds, comme le sélecteur sur le héros (demande de Quentin du 03/11/2026) : collé à la section des
   gammes (fond de section), dont le fond continue derrière la marge et la moitié haute du bandeau, sur toute la largeur. */
#index .b1-sec.pg-section--alt + .b1-conseiller { position: relative; z-index: 0; }
#index .b1-sec.pg-section--alt + .b1-conseiller::before { content: ""; position: absolute; z-index: -1; top: calc(-1 * var(--b1-section)); height: calc(50% + var(--b1-section)); left: 50%; width: 100vw; transform: translateX(-50%); background: var(--fond-section); }


/* §8 Paliers du design system. */
@media (max-width: 1199.98px) {
  #index .b1-univers, #index .b1-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #index .b1-etape:nth-child(2n)::before { background: var(--b1-cran) left center / 10px 16px no-repeat, var(--b1-cran) right center / 10px 16px no-repeat, var(--b1-ligne) left center / 100% var(--trait-moyen) no-repeat; }
  #index .b1-conseiller .pg-conseiller { grid-template-columns: auto minmax(0, 1fr); }
  #index .b1-conseiller__actions { grid-column: 2; }
}

@media (max-width: 991.98px) {
  #index { --marge: var(--espace-4); }
  #index .b1-pros { grid-template-columns: minmax(0, 1fr); gap: var(--espace-8); padding: var(--espace-8) var(--espace-6); }
  #index .b1-faq { grid-template-columns: minmax(0, 1fr); gap: var(--espace-8); }
  #index .b1-conseiller .pg-conseiller { grid-template-columns: auto minmax(0, 1fr); padding: var(--espace-8) var(--espace-6); }
  #index .b1-conseiller__sfg { align-self: start; }
  #index .b1-conseiller__sfg .lab-sfg__label { height: 112px; }
  #index .b1-conseiller__actions { grid-column: 1 / -1; }
}

/* Tablette et petit ordinateur (768-1 199 px) : la colonne de texte du héros occupe presque toute la largeur ; le voile
   ne s’efface plus vers la droite (RGAA 3.2, audit du 03/11/2026 : 2,6 à 4:1 sur les photos claires à 768 px). */
@media (min-width: 768px) and (max-width: 1199.98px) {
  #index .b1-diapo::after { background: linear-gradient(90deg, color-mix(in srgb, var(--graphite) 82%, transparent) 0%, color-mix(in srgb, var(--graphite) 70%, transparent) 70%, color-mix(in srgb, var(--graphite) 62%, transparent) 100%); }
}
/* Téléphone (carte M1, écran 01) : héros de 480 px au dégradé vertical, sélecteur empilé, tout en une colonne. */
@media (max-width: 767.98px) {
  #index { --b1-chevauchement: var(--espace-12); --b1-section: var(--espace-12); }
  #index .b1-diapo { min-height: 480px; }
  #index .b1-diapo::after { background: linear-gradient(180deg, color-mix(in srgb, var(--graphite) 78%, transparent), color-mix(in srgb, var(--graphite) 60%, transparent) 60%, color-mix(in srgb, var(--graphite) 30%, transparent)); }
  #index .b1-hero__txt { padding-top: var(--espace-8); }
  #index .b1-hero .pg-surtitre { color: var(--jaune-hauban); }
  #index .b1-hero .titre-affiche { font-size: 44px; line-height: 46px; margin-bottom: var(--espace-4); }
  #index .b1-hero .chapo { font-size: 18px; line-height: 28px; }
  #index .b1-hero__actions { display: grid; gap: var(--espace-2); width: 100%; margin-top: var(--espace-6); }
  #index .b1-hero__actions .ab-bouton--principal { width: 100%; white-space: normal; }
  #index .b1-hero__actions .ab-bouton--lien { justify-self: start; }


  #index :is(.b1-sec, .b1-produits) .pg-tete { flex-direction: column; align-items: flex-start; gap: var(--espace-3); }
  #index :is(.b1-sec, .b1-produits) .titre-1 { font-size: 28px; line-height: 34px; }
  #index .b1-univers, #index .b1-etapes { grid-template-columns: minmax(0, 1fr); }
  /* Une colonne : la cote devient verticale (ab-cote--verticale), à gauche des étapes. */
  #index .b1-etapes { --b1-cran: linear-gradient(calc(var(--angle-hauban) - 90deg), transparent 44%, var(--graphite) 44%, var(--graphite) 56%, transparent 56%); row-gap: 0; }
  #index .b1-etape { padding: 0 0 var(--espace-6) var(--espace-8); }
  #index .b1-etape:last-child { padding-bottom: 0; }
  #index .b1-etape::before, #index .b1-etape:nth-child(2n)::before { top: 0; bottom: 0; right: auto; width: 16px; height: auto; background: var(--b1-cran) center top / 16px 10px no-repeat, var(--b1-ligne) center top / var(--trait-moyen) 100% no-repeat; }
  #index .b1-etape:last-child::before { background: var(--b1-cran) center top / 16px 10px no-repeat, var(--b1-cran) center bottom / 16px 10px no-repeat, var(--b1-ligne) center top / var(--trait-moyen) 100% no-repeat; }
  #index .b1-conseiller__boutons .ab-bouton { flex: 1 1 auto; }
}

@media (max-width: 479.98px) {
  #index .b1-pros { padding: var(--espace-6) var(--espace-4); }
  #index .b1-conseiller .pg-conseiller { grid-template-columns: minmax(0, 1fr); padding: var(--espace-6) var(--espace-4); }
  #index .b1-conseiller__sfg { justify-self: start; }
  #index .b1-conseiller__sfg .lab-sfg__label { height: 96px; }
  #index .b1-conseiller__boutons { flex-direction: column; align-items: stretch; width: 100%; }
  #index .b1-faq .pg-faq__r { padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #index .b1-faq .pg-faq__q::after { transition: none; }
}