/* L’Abritant — feuille accueil : page d'accueil (#index).
   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)); }

#index :is(.b1-hero, .b1-besoin, .b1-sec, .b1-conseiller) :is(p, h1, h2, h3, h4, ul, ol, figure) { margin: 0; }
#index :is(.b1-hero, .b1-sec) :is(ul, ol) { padding: 0; list-style: none; }
#index :is(.b1-sec, .b1-produits) .pg-tete { margin-bottom: var(--espace-6); }
#index :is(.b1-sec, .b1-produits) .titre-1 { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.08; }
#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. */
#index .b1-hero { position: relative; display: flex; min-height: 520px; overflow: hidden; background: var(--graphite); color: var(--toile); }
#index .b1-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#index .b1-hero::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) 55%, transparent) 42%, transparent 72%); pointer-events: none; }
#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-6); }
#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; }


/* §3 Sélecteur de besoin : carte blanche à filet jaune qui chevauche 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)); }
#index .b1-besoin { display: grid; grid-template-columns: 1.1fr 1fr 1fr auto; gap: var(--espace-4); align-items: end; padding: var(--espace-6) var(--espace-8); background: var(--blanc); border-top: calc(2 * var(--trait-moyen)) solid var(--jaune-hauban); border-radius: 0 0 var(--rayon-m) var(--rayon-m); box-shadow: var(--ombre-flottante); }
#index .b1-besoin h2 { align-self: center; font-family: var(--font-titre); font-size: 24px; line-height: 28px; font-weight: 700; }
#index .b1-besoin__champ { min-width: 0; }
#index .b1-besoin label { display: block; margin-bottom: var(--espace-2); font-size: 14px; line-height: 20px; font-weight: 600; }
#index .b1-besoin__select { position: relative; display: block; }
#index .b1-besoin__select .pg-select { display: block; width: 100%; min-width: 0; height: var(--controle); padding-right: calc(var(--espace-4) * 2 + 16px); color: var(--texte); font-family: var(--font-texte); font-size: 16px; line-height: 20px; appearance: none; cursor: pointer; }
#index .b1-besoin__select .pg-select:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; }
#index .b1-besoin__select .pg-select:disabled { opacity: .45; cursor: not-allowed; }
#index .b1-besoin__select svg { position: absolute; top: 50%; right: var(--espace-4); width: 16px; height: 16px; transform: translateY(-50%); pointer-events: none; }
#index .b1-besoin .ab-bouton { white-space: normal; text-align: center; }
#index .b1-besoin__res { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--espace-2); font-family: var(--font-technique); font-size: 13px; line-height: 18px; }
#index .b1-besoin__res svg { flex: none; width: 16px; height: 16px; }


/* §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. */
#index .b1-usages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--espace-6); }
#index .b1-usage { display: grid; align-content: start; gap: var(--espace-2); padding: var(--espace-6); background: var(--blanc); border: var(--trait-fin) solid var(--trait); border-radius: var(--rayon-m); }
#index .b1-usage h3 { display: flex; align-items: center; gap: var(--espace-2); }
#index .b1-usage h3 :is(svg, img) { flex: none; width: 24px; height: 24px; color: var(--graphite); }
#index .b1-usage p { font-size: 15px; line-height: 22px; color: var(--texte-doux); }
#index .b1-usage .ab-bouton--lien { justify-self: start; }

/* Univers et conseils : cartes photo du kit, quatre puis trois par ligne. */
#index .b1-univers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#index .b1-univers .pg-carte-photo__img { height: 170px; }
#index .b1-conseils .pg-carte-photo__img { height: 150px; }
#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 : défile seul quand il ne tient pas (la page, jamais). */
#index .b1-defile { overflow-x: auto; }
#index .b1-defile:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; }
#index .b1-compar .pg-compar > div { padding: var(--espace-3) var(--espace-6); }

/* Comment ça se passe : quatre étapes à filet graphite. */
#index .b1-etapes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--espace-6); }
#index .b1-etape { display: grid; align-content: start; gap: var(--espace-2); padding: var(--espace-6); background: var(--blanc); border: var(--trait-fin) solid var(--trait); border-top: var(--trait-hauban) solid var(--graphite); border-radius: var(--rayon-m); }
#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 .chapo { margin-top: var(--espace-3); }
#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: var(--espace-3) 0 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 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). */
#index .b1-conseiller { margin-block: var(--b1-section); }
#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; }
#index .b1-conseiller__actions { display: grid; gap: var(--espace-3); justify-items: start; }
#index .b1-conseiller__boutons { flex-wrap: wrap; background: none; }


/* §8 Paliers du design system. */
@media (max-width: 1199.98px) {
  #index .b1-besoin { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #index .b1-besoin h2 { grid-column: 1 / -1; }
  #index .b1-besoin .ab-bouton { grid-column: 1 / -1; justify-self: start; }
  #index .b1-usages, #index .b1-univers, #index .b1-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@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: minmax(0, 1fr); padding: var(--espace-8) var(--espace-6); }
  #index .b1-compar .pg-compar { min-width: 720px; }
}

/* 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-hero { min-height: 480px; }
  #index .b1-hero::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 .b1-besoin { grid-template-columns: minmax(0, 1fr); padding: var(--espace-6) var(--espace-4); }
  #index .b1-besoin .ab-bouton { justify-self: stretch; width: 100%; }

  #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-usages, #index .b1-univers, #index .b1-etapes { grid-template-columns: minmax(0, 1fr); }
  #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 { padding: var(--espace-6) var(--espace-4); }
  #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; }
}