/* ==========================================================================
   /faq/ — ce que site.css n'a pas : l'index des thèmes (.fq-index), les cartes de thème
   (.fq-theme) et la paire question-réponse (.qa). Le héros (.hero), le fil d'Ariane,
   le surlignage .hl, l'emplacement « à confirmer » (.tbc) et le bandeau de contact
   viennent de site.css. Jetons de site.css uniquement.
   Jaune : pictogrammes noirs sur disque #F5C518 (10,7:1), le repère de la question
   visée (#ancre) et UN aplat, le contact final. Texte des réponses #3A3A3A sur #FFF
   (11,4:1) ; date #595959 sur #F8F7F4 (6,5:1).
   Sous 1 024 px, l'index est une rangée qui défile en elle-même ; dès 1 024 px, une
   barre collante de --fq-bar de haut, dont les ancres tiennent compte (scroll-margin).
   ========================================================================== */
:root{--fq-bar:0px}
@media (min-width:1024px){:root{--fq-bar:4.5rem}}

/* Héros sans photo : il se ferme sur la date --------------------------------- */
.fq-hero .hero__in{padding-bottom:1.75rem}
.fq-date{display:flex;align-items:center;gap:.45rem;margin-top:.9rem;font-size:1rem;color:var(--color-gray)}
.fq-date .ico{width:18px;height:18px}
@media (min-width:768px){.fq-hero .hero__in{padding-bottom:2.5rem}}
@media (min-width:1024px){.fq-hero .hero__in{padding-bottom:clamp(2.5rem,1rem + 2vw,3.5rem)}}

/* Index des thèmes -------------------------------------------------------------
   Puces blanches à pictogramme sur disque jaune. La rangée déborde de la marge
   latérale et défile en elle-même ; un fondu à droite montre qu'il y a une suite. */
.fq-index{background:var(--color-white);border-bottom:1px solid var(--color-hair);position:relative;z-index:5}
.fq-index ul{display:flex;gap:.5rem;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;
  margin-inline:calc(-1 * var(--gutter));padding:.75rem 2.5rem .75rem var(--gutter);scroll-padding-inline:var(--gutter);
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 2.5rem),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 2.5rem),transparent)}
.fq-index ul::-webkit-scrollbar{display:none}
.fq-index li{flex:none;scroll-snap-align:start}
.fq-index a{display:flex;align-items:center;gap:.5rem;min-height:44px;padding:.3rem 1rem .3rem .3rem;border:1px solid rgba(26,26,26,.16);border-radius:999px;
  background:var(--color-white);box-shadow:0 1px 2px rgba(26,26,26,.06);font-family:var(--font-display);font-weight:600;font-size:1rem;line-height:1.2;
  text-decoration:none;white-space:nowrap;transition:border-color var(--duration-fast) var(--ease-out),background-color var(--duration-fast) var(--ease-out)}
.fq-index__pic{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--color-primary);color:var(--color-dark)}
.fq-index__pic .ico{width:17px;height:17px}
.fq-index a[aria-current]{border-color:var(--color-dark);background:var(--color-primary-light);box-shadow:inset 0 0 0 1px var(--color-dark)}
@media (hover:hover){.fq-index a:hover{border-color:var(--color-dark)}}
@media (min-width:1024px){
  .fq-index{position:sticky;top:var(--hd-top,0px);box-shadow:0 10px 18px -16px rgba(26,26,26,.45)}
  .fq-index ul{margin-inline:0;padding:.625rem 0;min-height:var(--fq-bar);align-items:center;justify-content:space-between;
    -webkit-mask-image:none;mask-image:none}
}
@media (min-width:1024px) and (max-width:1179.98px){
  .fq-index ul{gap:.375rem}
  .fq-index a{padding-right:.75rem;font-size:.9375rem}
  .fq-index__pic{width:28px;height:28px}
}

/* Corps : la table à dessin (trame de points) et une carte blanche par thème -------- */
.fq-body{background-color:var(--color-bg);background-image:var(--dots);background-size:var(--dots-size);
  padding-block:clamp(1.25rem,.75rem + 2vw,3rem) var(--section-y)}
.fq-themes{display:grid;gap:clamp(1rem,.75rem + 1vw,1.5rem)}
.fq-theme{display:grid;grid-template-areas:"hd" "list" "more";align-content:start;scroll-margin-top:calc(var(--fq-bar) + 1rem);
  padding:1.25rem 1.125rem .75rem;background:var(--color-white);border:1px solid rgba(26,26,26,.07);border-radius:var(--radius-xl);box-shadow:var(--shadow-card)}
.fq-theme__hd{grid-area:hd;display:flex;align-items:center;gap:.8rem;padding-bottom:.9rem;border-bottom:2px solid var(--color-dark)}
.fq-theme__pic{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--color-primary);color:var(--color-dark);
  box-shadow:0 0 0 4px var(--color-primary-light)}
.fq-theme__pic .ico{width:24px;height:24px}
.fq-theme__title{font-size:clamp(1.375rem,1.1rem + 1.1vw,1.875rem);letter-spacing:-.025em;line-height:1.12}
.fq-theme__list{grid-area:list}

/* Question-réponse : h3 (ancre de la spec) + .qa__a, réponse toujours ouverte.
   La question visée par un lien #ancre se signale par un fond jaune pâle et un filet jaune. */
.qa{padding:1.1rem .75rem 1.15rem;margin-inline:-.75rem}
.qa + .qa{border-top:1px solid var(--color-hair)}
.qa h3{font-size:clamp(1.125rem,1.05rem + .35vw,1.3125rem);font-weight:700;line-height:1.3;letter-spacing:-.01em;scroll-margin-top:calc(var(--fq-bar) + 2rem)}
.qa__a{margin-top:.45rem;color:var(--color-ink-2);max-width:68ch}
.qa__a a{color:var(--color-dark);text-underline-offset:.2em;text-decoration-thickness:1px}
.qa__tel{font-weight:600;white-space:nowrap}
/* « Détail : » : un paragraphe à part, en ligne ; le remplissage vertical des liens porte leur
   zone de clic à 44 px sans écarter les lignes */
.qa__more{margin-top:.5rem}
.qa__more b{font-family:var(--font-display);font-weight:600;color:var(--color-dark)}
.qa__more a{font-weight:500;padding-block:.55rem}
.qa:has(> h3:target){background:var(--color-primary-light);box-shadow:inset 4px 0 0 var(--color-primary);border-radius:var(--radius-lg);border-top-color:transparent}
.qa:has(> h3:target) + .qa{border-top-color:transparent}
/* À confirmer : le contour pointillé de .tbc, en retrait du bord de la carte */
.qa.tbc{margin-block:.5rem;outline-offset:-2px;border-radius:var(--radius-lg);border-top-color:transparent}
.qa.tbc + .qa{border-top-color:transparent}
.qa__a span.tbc{padding:.05rem .3rem;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* Renvoi vers la FAQ d'une page produit : une ligne sur fond blanc cassé */
.fq-theme__more{grid-area:more;display:flex;align-items:flex-start;gap:.6rem;margin:.25rem -.375rem .375rem;padding:.8rem .9rem;border-radius:var(--radius-lg);
  background:var(--color-bg);color:var(--color-ink-2);line-height:1.5}
.fq-theme__more .ico{width:28px;height:28px;padding:6px;margin-top:-.05rem;border-radius:50%;background:var(--color-dark);color:var(--color-white);flex:none}
.fq-theme__more a{color:var(--color-dark);font-weight:500;text-underline-offset:.2em;text-decoration-thickness:1px}

@media (min-width:768px){
  .fq-theme{padding:1.75rem 2rem 1rem}
  .fq-theme__more{margin-inline:0}
}
/* Dès 1 024 px : le titre du thème à gauche, les questions et le renvoi à droite,
   comme .faq-layout des pages produit */
@media (min-width:1024px){
  .fq-theme{grid-template-columns:minmax(0,1fr) minmax(0,2fr);grid-template-rows:auto auto;grid-template-areas:"hd list" "hd more";
    column-gap:clamp(2rem,1rem + 2.5vw,4rem);padding:2rem 2.5rem 1.75rem}
  /* Le titre du thème suit la lecture : collant sous la barre d'index, sur toute la hauteur de la carte */
  .fq-theme__hd{flex-direction:column;align-items:flex-start;gap:1rem;padding:1rem 0 0;border-bottom:0;align-self:start;
    position:sticky;top:calc(var(--hd-top,0px) + var(--fq-bar) + 1.5rem)}
  .fq-theme__more{align-self:start;margin:.75rem 0 0}
  .fq-theme__list{border-top:2px solid var(--color-dark)}
  .qa:first-child{border-top:0}
}