/* =====================================================================
   /aide/ — CENTRE D'AIDE · « LA RÉPONSE D'ABORD »
   ---------------------------------------------------------------------
   Parti pris : sur une page d'aide, le clic est une taxe. Tout ce qui
   peut être lu sans ouvrir quoi que ce soit est lu tout de suite.
     · un champ de filtre DOCKÉ (position:sticky, zéro JS pour tenir en
       haut) qui suit le lecteur pendant toute la zone des questions ;
     · les six questions les plus posées en CARTES, réponse à l'air
       libre, aucun accordéon ;
     · le reste en accordéons compacts, groupés par moment de la vie du
       client — et qui s'OUVRENT tout seuls quand le filtre les retient :
       filtrer, c'est déjà répondre ;
     · une fiche technique des deux supports, en grille, dans le groupe
       « Choisir son support » : des faits, pas une question ;
     · trois guides pas-à-pas sur plan nuit, pins hexagonaux, qui ne
       réécrivent rien : ils renvoient à la page qui fait autorité.

   Plans de couleur, coupes FRANCHES, aucun dégradé de raccord :
     #F5F8FF  plan ciel (en-tête canon + hero + dock)
     #FFFFFF  plan papier (les six cartes, le contact)
     #F6F8FC  plan creux (les accordéons)
     #0E1845  plan nuit (les guides)
   Préfixe exclusif : .ah-  N'écrase aucune règle du site.
   Monochrome bleu strict : pas une seule autre teinte sur la page.
   ===================================================================== */

.ah-wrap{max-width:1080px;margin:0 auto;padding:0 24px}

/* L'en-tête canonique vit dans .kktop : ici, sans le contrat « hauteur
   d'un viewport » du hero de l'accueil. Le plan ciel démarre à la barre
   promo et court sans couture jusqu'au bas des suggestions. */
.ah-top.kktop{display:block;min-height:0;height:auto;background:var(--ku-blue-25)}

/* ---- Vocabulaire typographique -------------------------------------- */
.ah-eyebrow{display:flex;align-items:center;gap:9px;margin:0 0 14px;font-size:13px;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);
  line-height:1.5}
.ah-eyebrow--night{color:var(--ku-blue-300)}
.ah-hex{width:13px;height:13px;flex:none;fill:currentColor}
.ah-h2{margin:0;font-weight:700;font-size:var(--fs-h2);line-height:1.14;
  letter-spacing:-.022em;color:var(--text);text-wrap:balance}
.ah-h2--night{color:#fff}
.ah-h2 .ah-hl{color:var(--brand)}
.ah-h2--night .ah-hl{color:var(--ku-blue-300)}
.ah-lede{margin:14px 0 0;font-size:clamp(16px,1.2vw,17.5px);line-height:1.62;
  color:var(--text-soft);max-width:40em}
.ah-lede--night{color:var(--text-on-dark)}
.ah-lede b{color:var(--text);font-weight:700}
.ah-lede--night b{color:#fff}

/* =====================================================================
   1 · ZONE DES QUESTIONS — c'est elle qui borne le dock collant.
   Le dock ne peut pas déborder de son parent : il se décroche tout seul
   à la fin des accordéons, sans une ligne de JS.
   ===================================================================== */
.ah-zone{position:relative;background:var(--ku-blue-25)}

/* ---- Hero ----------------------------------------------------------- */
.ah-hero{padding:10px 0 26px}
.ah-crumb{display:flex;align-items:center;gap:8px;margin:0 0 26px;font-size:13.5px;
  color:var(--text-muted)}
/* Cible tactile de 44 px sans épaissir la ligne : la marge négative rend
   au fil d'Ariane sa hauteur visuelle. */
.ah-crumb a{color:var(--text-muted);text-decoration:none;display:inline-flex;
  align-items:center;min-height:44px;margin-block:-11px}
.ah-crumb a:hover{color:var(--brand)}
.ah-crumb__sep{width:13px;height:13px;flex:none;fill:none;stroke:var(--ku-blue-200);
  stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ah-crumb__here{color:var(--text);font-weight:600}

.ah-hero__h1{margin:0;font-weight:700;font-size:clamp(36px,5.2vw,60px);line-height:1.04;
  letter-spacing:-.032em;color:var(--text);text-wrap:balance}
.ah-hero__h1 b{color:var(--brand);font-weight:700}
.ah-hero__lede{margin:18px 0 0;font-size:clamp(16.5px,1.35vw,19px);line-height:1.55;
  color:var(--text-soft);max-width:34em}

.ah-sugg{padding:0 0 34px}
.ah-chips{display:none;flex-wrap:wrap;align-items:center;gap:8px;margin:16px 0 0}
.js .ah-chips{display:flex}
.ah-chips__lb{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-muted);margin-right:4px}
.ah-chip{min-height:44px;padding:0 16px;border-radius:99px;border:1px solid var(--ku-blue-100);
  background:var(--surface);color:var(--text-soft);font:inherit;font-size:14.5px;
  font-weight:600;cursor:pointer;display:inline-flex;align-items:center;
  transition:border-color .18s ease,color .18s ease,background .18s ease}
.ah-chip:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
.ah-chip:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.ah-chip.is-on{border-color:var(--brand);background:var(--brand);color:#fff}

.ah-nojs{margin:22px 0 0;padding:14px 18px;border-radius:14px;
  border:1px solid var(--ku-blue-100);background:var(--surface);
  font-size:15px;line-height:1.55;color:var(--text-soft)}

/* ---- Le dock : le champ qui reste ----------------------------------- */
/* Il s'accroche SOUS la pilule de nav, qui se fixe elle aussi au scroll :
   --ah-navh est publiée par la page (hauteur de la pilule + ses 10 px de
   décalage), avec une valeur de repli si le script ne tourne pas.
   Le voile du dock est presque opaque : si le navigateur ne sait pas
   flouter, le titre qui passe derrière ne doit pas transparaître quand
   même. Le flou est un bonus, pas la condition de lisibilité.
   Safari exige encore le préfixe -webkit-. */
.ah-dock{display:none;position:sticky;top:var(--ah-navh,80px);z-index:30;
  padding:14px 0;background:rgba(245,248,255,.94);border-bottom:1px solid transparent}
.js .ah-dock{display:block}
@supports ((backdrop-filter:blur(14px)) or (-webkit-backdrop-filter:blur(14px))){
  .ah-dock{background:rgba(245,248,255,.78);
    -webkit-backdrop-filter:saturate(180%) blur(16px);
    backdrop-filter:saturate(180%) blur(16px)}
}
.ah-dock.is-stuck{border-bottom-color:var(--ku-blue-100)}

.ah-field{display:flex;align-items:center;gap:12px;min-height:64px;padding:0 10px 0 20px;
  border-radius:18px;background:var(--surface);border:1.5px solid var(--ku-blue-100);
  box-shadow:0 10px 26px -18px rgba(14,24,69,.45);
  transition:border-color .18s ease,box-shadow .18s ease}
.ah-field:focus-within{border-color:var(--brand);
  box-shadow:0 0 0 4px rgba(44,75,255,.14),0 10px 26px -18px rgba(14,24,69,.45)}
.ah-field__ic{width:22px;height:22px;flex:none;fill:none;stroke:var(--brand);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ah-field input{flex:1 1 auto;min-width:0;border:0;background:none;outline:none;
  font:inherit;font-size:17px;font-weight:500;color:var(--text);
  padding:16px 0;-webkit-appearance:none;appearance:none}
/* --ku-ink-400 tombait à 3,53:1 sur blanc : sous AA pour du texte. On
   descend d'un cran (4,81:1) et on allège la graisse, pour que le
   placeholder reste lisible sans se faire passer pour une valeur saisie. */
.ah-field input::placeholder{color:#66728E;font-weight:400;opacity:1}
.ah-field input::-webkit-search-decoration,
.ah-field input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.ah-field__n{flex:none;height:34px;padding:0 14px;border-radius:99px;white-space:nowrap;
  background:var(--brand-soft);color:var(--brand);font-size:14px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.ah-field__n b{font-weight:800}
.ah-field__u{margin-left:.32em}
.ah-field__n.is-zero{background:var(--ku-ink-50);color:var(--text-muted)}
.ah-clear{flex:none;width:44px;height:44px;border:0;border-radius:12px;background:none;
  color:var(--text-muted);cursor:pointer;display:none;align-items:center;justify-content:center}
.ah-clear.is-on{display:inline-flex}
.ah-clear:hover{background:var(--ku-ink-50);color:var(--text)}
.ah-clear:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}
.ah-clear svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round}
.ah-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* =====================================================================
   2 · LES SIX — la réponse à l'air libre, plan papier
   ===================================================================== */
.ah-six{background:var(--surface);padding:52px 0 56px;
  border-top:1px solid var(--ku-blue-100)}
.ah-sechead{margin:0 0 30px}
.ah-grid6{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ah-card{display:flex;flex-direction:column;padding:24px 24px 22px;border-radius:20px;
  background:var(--ku-blue-25);border:1px solid var(--ku-blue-100);
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.ah-card:hover{border-color:var(--ku-blue-200);box-shadow:var(--el-16);transform:translateY(-2px)}
.ah-card__q{display:flex;gap:11px;margin:0 0 12px;font-size:17px;font-weight:700;
  line-height:1.32;letter-spacing:-.012em;color:var(--text)}
.ah-card__q .ah-pinmini{margin-top:2px}
.ah-card__a{margin:0;font-size:15.5px;line-height:1.6;color:var(--text-soft)}
.ah-card__a b{color:var(--text);font-weight:700}
.ah-card__a a{color:var(--brand);font-weight:600}
.ah-card__more{margin:14px 0 0;display:inline-flex;align-items:center;gap:7px;
  font-size:14.5px;font-weight:700;color:var(--brand);text-decoration:none;
  min-height:44px;align-self:flex-start}
.ah-card__more:hover{text-decoration:underline}
.ah-card__more svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}
.ah-card__more:hover svg{transform:translateX(3px)}
.ah-pinmini{width:15px;height:15px;flex:none;fill:none;stroke:var(--brand);stroke-width:2;
  stroke-linejoin:round}

/* =====================================================================
   3 · LE RESTE — accordéons compacts groupés, plan creux
   ===================================================================== */
.ah-rest{background:var(--surface-sunken);padding:52px 0 60px;
  border-top:1px solid var(--ku-blue-100)}
/* Gouttière éditoriale : le nom du moment tient la marge gauche, les
   questions occupent une colonne de lecture confortable. Vingt-quatre
   pilules empilées sur 1080 px, ça se lit comme un tableur ; posées à
   droite d'un intitulé, ça se lit comme un sommaire. */
.ah-group{display:grid;grid-template-columns:212px minmax(0,1fr);gap:0 36px;
  padding:0 0 26px;margin:0 0 26px;border-bottom:1px solid var(--ku-blue-100)}
.ah-group:last-of-type{margin-bottom:0;padding-bottom:0;border-bottom:0}
/* L'intitulé se cale sous le dock, lui-même sous la pilule : trois hauteurs
   empilées, toutes publiées par la page. */
.ah-group__head{position:sticky;top:calc(var(--ah-navh,80px) + var(--ah-dockh,92px) + 16px);
  align-self:start;display:flex;flex-direction:column;gap:5px}
/* La colonne de droite est un conteneur, pas une cellule de plus : la fiche
   technique doit pouvoir vivre sous les accordéons sans retomber dans la
   gouttière de gauche. min-width:0 pour que la grille puisse rétrécir. */
.ah-group__body{min-width:0}
.ah-group__t{margin:0;font-size:16px;font-weight:800;letter-spacing:-.01em;
  color:var(--text);line-height:1.3;text-wrap:balance}
.ah-group__rule{width:26px;height:2px;border-radius:2px;background:var(--brand);margin:4px 0 2px}
.ah-group__n{font-size:13px;font-weight:600;color:var(--text-muted);
  font-variant-numeric:tabular-nums}

.ah-acc{display:grid;gap:8px}
.ah-q{background:var(--surface);border:1px solid var(--ku-blue-100);border-radius:14px;
  overflow:hidden}
.ah-q[open]{border-color:var(--ku-blue-200)}
.ah-q summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;
  min-height:56px;padding:14px 20px;font-size:16px;font-weight:650;line-height:1.35;
  color:var(--text);transition:color .16s ease,background .16s ease}
.ah-q summary::-webkit-details-marker{display:none}
.ah-q summary:hover{color:var(--brand);background:var(--brand-soft)}
.ah-q summary:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}
.ah-q__t{flex:1 1 auto;min-width:0}
.ah-q__chev{width:20px;height:20px;flex:none;fill:none;stroke:var(--ku-blue-300);
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .22s ease,stroke .16s ease}
.ah-q[open] .ah-q__chev{transform:rotate(180deg);stroke:var(--brand)}
.ah-q summary:hover .ah-q__chev{stroke:var(--brand)}
.ah-q__a{padding:0 20px 18px;margin:0;font-size:15.5px;line-height:1.62;
  color:var(--text-soft);max-width:62em}
.ah-q__a b{color:var(--text);font-weight:700}
.ah-q__a a{color:var(--brand);font-weight:600}
/* Le lien « pour aller plus loin » vit HORS du paragraphe de réponse :
   c'est ce qui garantit que le JSON-LD ne récupère jamais un libellé de
   navigation à la place d'un mot de réponse. */
.ah-q > .ah-more{display:inline-flex;align-items:center;gap:6px;
  margin:-4px 20px 16px;min-height:44px;font-size:14.5px;font-weight:700;
  color:var(--brand);text-decoration:none}
.ah-q > .ah-more:hover{text-decoration:underline}
.ah-q > .ah-more svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}
.ah-q > .ah-more:hover svg{transform:translateX(3px)}

/* Filtre : ce que le filtre écarte disparaît, il ne se grise pas. */
.is-out{display:none!important}

/* Rien trouvé — on ne fait pas semblant d'avoir une réponse. */
.ah-void{display:none;margin:0;padding:30px 26px;border-radius:20px;background:var(--surface);
  border:1px dashed var(--ku-blue-200);text-align:center}
.ah-void.is-on{display:block}
.ah-void__t{margin:0;font-size:18px;font-weight:700;color:var(--text)}
.ah-void__p{margin:10px 0 0;font-size:15.5px;line-height:1.6;color:var(--text-soft)}
.ah-void__p a{color:var(--brand);font-weight:700}

/* =====================================================================
   4 · FICHE TECHNIQUE — des faits, pas une question.
   Elle vit dans le groupe « Choisir son support », sous ses accordéons.
   Ce n'est PAS une réponse : elle n'entre ni dans le compteur, ni dans le
   JSON-LD. Comme les chapeaux de section, elle s'efface dès qu'un filtre
   est actif — pendant un filtre la page est une liste de résultats.
   Grille à filets d'un pixel : le fond de la grille EST la couleur du
   filet, les cellules le recouvrent. Aucun border par cellule, donc aucun
   filet doublé à la jonction.
   ===================================================================== */
/* Une VRAIE table : deux supports côte à côte, quatre lignes. Deux grilles
   séparées auraient désaligné leurs lignes dès qu'une valeur passe sur deux
   lignes (« PVC rigide, finition mate ») — et une fiche comparative dont les
   lignes ne s'alignent pas ne se compare pas. border-collapse : un seul filet
   par jonction, jamais doublé. */
.ah-spec{margin:20px 0 0}
.ah-spec__t{margin:0 0 10px;font-size:13px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-muted)}
.ah-spec__tw{border:1px solid var(--ku-blue-100);border-radius:14px;overflow:hidden;
  background:var(--surface)}
.ah-spec__table{width:100%;border-collapse:collapse;table-layout:fixed}
.ah-spec__table th,.ah-spec__table td{padding:11px 16px;text-align:left;
  border-top:1px solid var(--ku-blue-100);vertical-align:top;word-break:break-word}
.ah-spec__table thead th{border-top:0;background:var(--ku-blue-25);
  font-size:14.5px;font-weight:700;color:var(--text);line-height:1.3}
.ah-spec__table tbody th{width:28%;font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-muted);line-height:1.45;padding-top:13px}
.ah-spec__table td{font-size:14.5px;font-weight:600;color:var(--text);line-height:1.35}
.ah-spec__note{margin:12px 0 0;font-size:14px;line-height:1.55;color:var(--text-soft)}
.ah-spec__note b{color:var(--text);font-weight:700}

/* =====================================================================
   5 · COUTURE DESSINÉE + LES TROIS GUIDES, plan nuit
   La coupe est franche ; c'est un médaillon hexagonal à cheval sur
   l'arête qui la signe. Jamais de dégradé de raccord.
   ===================================================================== */
.ah-guides{position:relative;background:var(--surface-dark);padding:86px 0 76px;
  color:var(--text-on-dark)}
.ah-seam{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);
  width:54px;height:54px;pointer-events:none}
.ah-seam__hex{fill:var(--surface-dark);stroke:var(--ku-blue-800);stroke-width:1.4;
  stroke-linejoin:round}
.ah-seam__mark{fill:var(--ku-blue-300)}

.ah-guides__head{max-width:44em;margin:0 0 44px}
.ah-guides__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ah-guide{display:flex;flex-direction:column;padding:26px 24px 24px;border-radius:22px;
  background:var(--ku-blue-900);border:1px solid rgba(255,255,255,.09)}
.ah-guide__fig{width:60px;height:60px;margin:0 0 18px;flex:none}
.ah-guide__fig svg{width:100%;height:100%;display:block}
.ah-gl{fill:none;stroke:var(--ku-blue-300);stroke-width:1.8;stroke-linecap:round;
  stroke-linejoin:round}
.ah-gl--soft{stroke:var(--ku-blue-400);stroke-width:1.5;opacity:.7}
.ah-gf{fill:var(--ku-blue-300)}
.ah-guide__t{margin:0;font-size:20px;font-weight:700;letter-spacing:-.014em;color:#fff;
  line-height:1.24}
.ah-guide__s{margin:8px 0 20px;font-size:14.5px;line-height:1.55;color:var(--text-soft-on-dark)}

/* Le rail des pas : les pins hexagonaux et le fil pointillé qui les tient. */
.ah-steps{list-style:none;margin:0 0 24px;padding:0;position:relative}
.ah-steps::before{content:"";position:absolute;left:14px;top:12px;bottom:16px;width:0;
  border-left:1.5px dashed rgba(137,166,255,.34)}
.ah-step{position:relative;display:flex;gap:14px;padding:0 0 16px}
.ah-step:last-child{padding-bottom:0}
.ah-pin{position:relative;flex:none;width:29px;height:29px;display:grid;place-items:center}
.ah-pin svg{position:absolute;inset:0;width:100%;height:100%;fill:var(--surface-dark);
  stroke:var(--ku-blue-400);stroke-width:1.6;stroke-linejoin:round}
.ah-pin b{position:relative;font-size:12.5px;font-weight:800;color:#fff;line-height:1;
  font-variant-numeric:tabular-nums}
.ah-step__x{margin:0;padding-top:5px;font-size:15px;line-height:1.5;
  color:var(--text-on-dark)}
.ah-step__x b{color:#fff;font-weight:700}

/* margin-top:auto — les trois boutons s'alignent quel que soit le nombre de
   lignes des pas au-dessus. Trois cartes, une seule ligne de départ. */
.ah-guide__cta{margin:auto 0 0;display:inline-flex;align-items:center;gap:8px;
  min-height:46px;padding:0 20px;border-radius:99px;background:var(--brand);color:#fff;
  font-size:14.5px;font-weight:700;text-decoration:none;align-self:flex-start;
  transition:background .18s ease,transform .18s ease}
.ah-guide__cta:hover{background:var(--ku-blue-400);transform:translateY(-2px)}
.ah-guide__cta:focus-visible{outline:2px solid #fff;outline-offset:3px}
.ah-guide__cta svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}

/* =====================================================================
   6 · CONTACT — plan papier, coupe franche
   ===================================================================== */
.ah-contact{background:var(--surface);padding:60px 0 68px}
.ah-contact__head{max-width:40em;margin:0 0 32px}
.ah-ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ah-way{display:flex;gap:15px;align-items:flex-start;padding:20px 22px;border-radius:18px;
  background:var(--ku-blue-25);border:1px solid var(--ku-blue-100);text-decoration:none;
  min-height:44px;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.ah-way:hover{border-color:var(--ku-blue-200);box-shadow:var(--el-16);transform:translateY(-2px)}
.ah-way__ic{width:38px;height:38px;flex:none;border-radius:11px;background:var(--brand-soft);
  display:grid;place-items:center}
.ah-way__ic svg{width:19px;height:19px;fill:none;stroke:var(--brand);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.ah-way__ic svg.is-solid{fill:var(--brand);stroke:none}
.ah-way__t{display:block;margin:0;font-size:15.5px;font-weight:700;color:var(--text)}
.ah-way__v{display:block;margin:3px 0 0;font-size:14.5px;color:var(--brand);font-weight:600;
  word-break:break-word}
.ah-way__d{display:block;margin:5px 0 0;font-size:13.5px;line-height:1.5;color:var(--text-muted)}
.ah-note{margin:26px 0 0;padding:18px 22px;border-radius:16px;background:var(--surface-sunken);
  border:1px solid var(--ku-blue-100);font-size:14.5px;line-height:1.6;color:var(--text-soft)}
.ah-note a{color:var(--brand);font-weight:700}

/* =====================================================================
   7 · MOTION — une seule règle, et elle se coupe
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  .ah-card,.ah-way,.ah-guide__cta,.ah-chip,.ah-field,.ah-q summary,
  .ah-q__chev,.ah-card__more svg,.ah-q > .ah-more svg{transition:none!important}
  .ah-card:hover,.ah-way:hover,.ah-guide__cta:hover{transform:none}
}

/* =====================================================================
   8 · RESPONSIVE
   ===================================================================== */
@media (max-width:900px){
  /* La gouttière se couche : l'intitulé repasse au-dessus de sa pile. */
  .ah-group{grid-template-columns:1fr;gap:0}
  .ah-group__head{position:static;flex-direction:row;align-items:center;gap:12px;
    margin:0 0 12px}
  .ah-group__rule{margin:0;width:20px}
  .ah-group__n{margin-left:auto}
}
@media (max-width:960px){
  .ah-grid6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ah-guides__grid{grid-template-columns:1fr}
  .ah-ways{grid-template-columns:1fr}
  .ah-guide{padding:24px 22px}
}
@media (max-width:720px){
  .ah-wrap{padding:0 18px}
  .ah-hero{padding:6px 0 20px}
  .ah-grid6{grid-template-columns:1fr}
  .ah-six,.ah-rest{padding:40px 0 44px}
  .ah-guides{padding:70px 0 60px}
  .ah-contact{padding:46px 0 52px}
  .ah-field{min-height:58px;padding:0 8px 0 16px;border-radius:16px}
  .ah-field input{font-size:16px;padding:14px 0}
  .ah-field__ic{width:20px;height:20px}
  .ah-dock{padding:10px 0}
  .ah-q summary{font-size:15.5px;padding:13px 16px}
  .ah-q__a{padding:0 16px 16px;font-size:15px}
  .ah-q > .ah-more{margin:-4px 16px 14px}
  .ah-sugg{padding:0 0 26px}
  .ah-card{padding:20px 20px 18px}
  .ah-spec__table th,.ah-spec__table td{padding:10px 12px}
  .ah-spec__table tbody th{width:26%}
}
@media (max-width:560px){
  /* Les pastilles passent en rail horizontal : six suggestions sur trois
     rangées mangeaient 140 px de haut avant la première réponse. Le rail
     déborde jusqu'aux bords de l'écran, jamais la page (overflow-x:auto
     sur le rail lui-même). */
  .ah-chips{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-inline:-18px;padding-inline:18px;padding-bottom:2px}
  .ah-chips::-webkit-scrollbar{display:none}
  .ah-chips__lb{display:none}
  .ah-chip{flex:none}
  .ah-sugg .ah-wrap::before{content:"Les mots qu'on tape le plus";display:block;
    font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    color:var(--text-muted)}
  html:not(.js) .ah-sugg .ah-wrap::before{content:none}
  .ah-field__u{display:none}
  .ah-field__n{padding:0 11px}
  /* 320 px : une colonne d'intitulés à largeur fixe coupait « DIMENSIONS » en
     deux. On rend la main au moteur de table — la colonne prend exactement la
     largeur du plus long intitulé, insécable, et les deux supports se
     partagent tout le reste. */
  .ah-spec__table{table-layout:auto}
  .ah-spec__table th,.ah-spec__table td{padding:9px 10px}
  .ah-spec__table tbody th{width:1%;white-space:nowrap;word-break:normal;
    font-size:10.5px;letter-spacing:.06em}
  .ah-spec__table thead th,.ah-spec__table td{font-size:13.5px}
}