/* GAT — site public (D-80), feuille unique
 *
 * Vocabulaire repris du theme WordPress « gat », direction 2a (Nocturne,
 * version claire) : barre haute sombre, en-tete a filet efface, corps clair,
 * UNE SEULE bande indigo par page, pied de page sombre. Les rampes neutre et
 * accent viennent telles quelles du systeme, en OKLCH sur une meme echelle de
 * clarte : ne pas les retoucher a la main.
 *
 * ════════════════════════════════════════════════ CLASSES PARTAGEES ══
 * Toutes les pages du site s'appuient sur ces classes. Pas de style en ligne
 * pour une mise en page : une media query ne l'atteint pas (c'est ainsi que
 * le titre d'accueil du theme debordait a 375 px).
 *
 * Mise en page
 *   .gat-section            bloc de page, borne par --bleed (fond pleine
 *                           largeur, contenu centre sur 1440 px max).
 *   .gat-section-alt        variante fond neutre-200.
 *   .gat-section-head       titre h2 + lien a droite (flex, passe a la ligne).
 *   .gat-band.on-dark > .gat-band-in   LA bande indigo, une par page.
 *   .gat-fil                fil d'Ariane, bloc borne lui-meme (a poser
 *                           directement dans <main>, avant la 1re section) :
 *     <nav class="gat-fil" aria-label="Fil d’Ariane"><ol>
 *       <li><a href="/">Accueil</a></li><li aria-current="page">Renault</li>
 *     </ol></nav>
 *   .gat-lede               chapeau sous un h1 (17 px, gris).
 *   .gat-content            texte long (pages de contenu), 74 caracteres.
 *   .gat-actions            rangee de boutons qui passe a la ligne.
 *   .gat-note               petite phrase grise sous des boutons.
 *   .gat-masque-mobile / .gat-seulement-mobile   (seuil 860 px).
 *   .visually-hidden        lu par un lecteur d'ecran, invisible.
 *
 * Boutons
 *   .btn + .btn-primary (contour indigo) | .btn-secondary | .btn-ghost,
 *   .btn-lg, .btn-block. .gat-btn-plein : indigo plein (recherche).
 *   .gat-wa                 LE bouton WhatsApp : vert plein, texte blanc,
 *                           icone Icone::svg('whatsapp'). Variantes
 *                           .gat-wa-sm (ligne de tableau), .gat-wa-bloc.
 *                           Ne JAMAIS l'ecrire sans lien : @if ($lienWa) ...
 *
 * Catalogue
 *   .gat-ref                un Eurocode / une reference : chasse fixe, indigo.
 *   .gat-wordmark           un nom de marque en mot-symbole (capitales, 600).
 *   .gat-grille-tuiles > li > a.gat-tuile   grille de tuiles (ul) ;
 *     dans la tuile : .gat-tuile-visuel (svg), .gat-tuile-nom, .gat-tuile-nb.
 *     .gat-tuile-large (sur le li) : tuile sur deux colonnes (poids lourds) ;
 *     .gat-tuile-accent : fond indigo pale (« toutes les marques ») ;
 *     .gat-tuile-texte : une ligne de texte gris sous le nom.
 *     .gat-grille-courte : sous 560 px, 8 tuiles + la derniere seulement.
 *   .gat-silhouette         svg de carrosserie (partial site.svg.carrosserie).
 *   .gat-positions          selecteur « Quel vitrage ? » (site.svg.positions).
 *   .gat-table-produits     liste de references : table sur ordinateur,
 *                           cartes empilees sur telephone (<= 760 px) :
 *     <table class="gat-table-produits"><thead><tr>
 *       <th scope="col">Référence</th><th scope="col">Désignation</th>
 *       <th scope="col">Vitrage</th><th scope="col">Années</th>
 *       <th scope="col"><span class="visually-hidden">Action</span></th>
 *     </tr></thead><tbody><tr>
 *       <td class="gat-tp-ref"><a class="gat-ref" href="…">7310BGSHA</a></td>
 *       <td class="gat-tp-nom">RENAULT CLIO V…<span class="gat-tp-detail">…</span></td>
 *       <td data-label="Vitrage">Lunette arrière</td>
 *       <td data-label="Années">2019-</td>
 *       <td class="gat-tp-action">…bouton…</td>
 *     </tr></tbody></table>
 *     Sur telephone chaque <td data-label> affiche son libelle devant lui.
 *     Autre forme : <ul class="gat-table-produits"> de lignes
 *     @include('site._ligne-produit') (partiel et feuille de la recherche).
 *   .gat-badge              pastille neutre (equipement sur, teinte…).
 *   .gat-badge-dispo / .gat-badge-commande   « Disponible » / « Sur commande »,
 *                           SEULEMENT d'apres Catalogue::disponibilite().
 *   .gat-photo              cadre clair d'une photo studio GAT (fond gris).
 *
 * Confiance et doute
 *   .gat-doute              encadre d'avertissement (ocre) :
 *     <aside class="gat-doute">{!! Icone::svg('alerte') !!}
 *       <div><strong>…</strong><p>…</p></div></aside>
 *     Le conteneur n'impose ni grille ni couleur de texte : tout autre
 *     contenu y garde sa mise en page, seul le cadre ocre s'applique.
 *   .gat-engagements        les 3 engagements (ul, li > svg coche + span).
 *   .gat-recherche-large    grand formulaire de recherche :
 *     <form class="gat-recherche-large" action="/recherche" role="search">
 *       <label class="visually-hidden" for="…">…</label>
 *       <input id="…" type="search" name="q">
 *       <button class="btn gat-btn-plein" type="submit">{!! Icone::svg('recherche') !!}
 *         <span class="gat-recherche-txt">Rechercher</span></button>
 *     </form>  (+ <p class="gat-recherche-aide"> en dessous ; sous 420 px
 *     le texte du bouton se masque, la loupe reste)
 *
 * Formulaires : .field > label + .input (champ), .seg > label.seg-opt
 *   (choix Oui / Non / Je ne sais pas), .gat-message(-ok|-erreur).
 *
 * Accueil, reutilisables ailleurs : .gat-hero (+ -grille, -carte,
 *   -actions, h1.gat-hero-title), .gat-equipements > li > a.gat-equipement,
 *   ol.gat-etapes (numerotees par compteur), dl.gat-chiffres, .gat-band-grille.
 * Cadre (layout seulement) : .gat-topbar, .gat-header, .gat-nav,
 *   details.gat-menu-mobile, .gat-footer, .gat-barre-mobile (le corps reserve
 *   sa hauteur sous 860 px), .gat-404 (pages d'erreur).
 *
 * Herites du theme, toujours valables : .gat-archive-head, .gat-results-*,
 *   .gat-product*, .gat-eurocode*, .gat-specs, .gat-siblings*, .gat-index-*,
 *   .gat-alphabet, .gat-form-*, .gat-side-card, .gat-steps, .gat-flow,
 *   .gat-cards-2|3|4, .card, .tag, .table, .kicker.
 */

:root {
  /* — rampes — */
  --color-neutral-100: #f3f5fe;
  --color-neutral-200: #e4e7f5;
  --color-neutral-300: #cfd3e5;
  --color-neutral-400: #b2b6ca;
  --color-neutral-500: #9397ab;
  --color-neutral-600: #75798c;
  --color-neutral-700: #595d6c;
  --color-neutral-800: #3f424d;
  --color-neutral-900: #292b31;

  --color-accent-100: #f5f4ff;
  --color-accent-200: #e7e5fe;
  --color-accent-300: #d2cefd;
  --color-accent-400: #b5abfc;
  --color-accent-500: #968ae0;
  --color-accent-600: #796cbf;
  --color-accent-700: #5d5294;
  --color-accent-800: #423a6a;
  --color-accent-900: #2b2741;

  --color-accent: #9184d9;

  /* Fond des bandes de section : indigo sature, une seule par page. */
  --color-section: #262a60;
  --color-section-glow: #353b80;

  /* WhatsApp est L'appel a l'action du site (D-80) : c'est le seul bouton
     plein. Le vert de la marque (#25d366) sous un texte blanc ne fait que 2:1 ;
     ce vert approfondi tient 5,2:1 et reste lisible comme « WhatsApp ». */
  --color-wa: #1d7a5f;
  --color-wa-fonce: #155f49;
  --color-wa-clair: #e3f1ea;

  /* Doute et « sur commande » : un ocre, seule couleur chaude du systeme. */
  --color-attention-100: #fbf3e4;
  --color-attention-600: #a66b12;
  --color-attention-800: #6a4509;

  /* — roles, version claire — */
  --ground:  var(--color-neutral-100);
  --ink:     var(--color-neutral-900);
  --muted:   var(--color-neutral-700);
  --line:    var(--color-neutral-300);
  --line-strong: var(--color-neutral-400);
  --link:    var(--color-accent-700);

  --font-heading: "Inter", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-heading-weight: 500;

  --space-1: 2.8px;
  --space-2: 5.6px;
  --space-3: 8.4px;
  --space-4: 11.2px;
  --space-6: 16.8px;
  --space-8: 22.4px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  --gutter: 44px;
  --wrap: 1440px;

  /* La gouttiere grandit d'elle-meme au-dela de --wrap : max() vaut 44 px sur
     petit ecran et (100% - 1440px) / 2 au-dela, ce qui centre une colonne de
     1440 px. Le fond reste pleine largeur, seul le contenu est borne. */
  --bleed: max(var(--gutter), calc((100% - var(--wrap)) / 2));

  /* Hauteur de la barre d'actions du telephone, reservee en bas du corps. */
  --barre-mobile: 60px;
}

*, *::before, *::after { box-sizing: border-box; }

body.gat {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Les regles de base passent par :where(.gat) : specificite d'un simple
   element. Dans le theme, « .gat h1 » (0,1,1) battait toute classe posee sur
   le titre, et « .gat a » repeignait le texte des boutons-liens. */
:where(.gat) h1, :where(.gat) h2, :where(.gat) h3, :where(.gat) h4, :where(.gat) h5 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-2);
  overflow-wrap: break-word;
  text-wrap: balance;
}
:where(.gat) h1 { font-size: 42px; }
:where(.gat) h2 { font-size: 32px; }
:where(.gat) h3 { font-size: 25px; }
:where(.gat) h4 { font-size: 20px; }
:where(.gat) p  { margin: 0 0 var(--space-3); }
:where(.gat) a  { color: var(--link); text-underline-offset: 3px; }
:where(.gat) img { display: block; max-width: 100%; height: auto; }
:where(.gat) code, .gat .mono { font-family: var(--font-mono); }

/* Les icones de App\Support\Icone sortent sans largeur : sans cette regle un
   svg en ligne prend toute la largeur de son parent. Les dessins du site
   (positions, silhouettes) ont un autre viewBox et ne sont pas touches. */
.gat svg[viewBox="0 0 24 24"] { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent-600); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.gat-wrap { padding-inline: var(--bleed); }

.gat-skip { position: absolute; left: -9999px; background: var(--color-neutral-900); color: var(--color-neutral-100); padding: 12px 18px; z-index: 100; }
.gat-skip:focus { left: 12px; top: 12px; }

/* Le filet qui s'efface aux deux bouts — signature du systeme. La rampe fait
   48px de chaque cote. Les filets libres s'effacent ; les contours de boite et
   les separateurs internes restent pleins. */
.gat-rule-fade {
  background: linear-gradient(to right, transparent,
    var(--line) 48px, var(--line) calc(100% - 48px), transparent)
    no-repeat bottom / 100% 1px;
}

/* ═══════════════════════════════════════════════════════════ composants ══ */

/* — boutons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  cursor: pointer; text-decoration: none; text-align: center;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--ink);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  min-height: 38px;
  border-radius: var(--radius-md);
}
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { color: var(--color-accent-700); border-color: var(--color-accent-600); }
.btn-primary:hover  { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.btn-primary:active { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }
.btn-secondary { border-color: var(--line-strong); color: var(--ink); }
.btn-secondary:hover  { background: color-mix(in srgb, var(--color-neutral-900) 7%, transparent); }
.btn-ghost { color: var(--link); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-block { width: 100%; }
.btn-lg { min-height: 48px; font-size: 15px; padding-inline: var(--space-8); }

/* Indigo plein : reserve a l'envoi d'une recherche, l'action d'identification. */
.gat-btn-plein { background: var(--color-accent-700); border-color: var(--color-accent-700); color: #fff; }
.gat-btn-plein:hover { background: var(--color-accent-800); border-color: var(--color-accent-800); }

/* Sur fond sombre — barre haute, bande indigo, pied de page. */
.on-dark .btn-primary { color: var(--color-accent-200); border-color: var(--color-accent-300); }
.on-dark .btn-secondary { border-color: color-mix(in srgb, var(--color-neutral-100) 35%, transparent); color: var(--color-neutral-100); }
.on-dark .btn-secondary:hover { background: color-mix(in srgb, var(--color-neutral-100) 10%, transparent); }
.on-dark :where(a:not(.btn, .gat-wa)) { color: var(--color-accent-300); }

/* — WhatsApp : LE bouton du site —
 *
 * Le seul bouton plein, pour qu'il se lise comme l'action principale de la
 * page : la vente se conclut sur WhatsApp, avec un message deja rempli. Le
 * theme cantonnait le vert a une icone ; la recherche (D-80) montre que c'est
 * ici l'appel a l'action, et un contour vert ne se distinguait pas du reste. */
.gat-wa {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 10px 20px;
  font-family: var(--font-heading); font-size: 15px; font-weight: 600; line-height: 1.2;
  text-align: center; text-decoration: none; cursor: pointer;
  color: #fff; background: var(--color-wa);
  border: 1px solid var(--color-wa); border-radius: var(--radius-md);
}
.gat .gat-wa { color: #fff; }
.gat-wa:hover { background: var(--color-wa-fonce); border-color: var(--color-wa-fonce); }
/* L'icone suit le texte blanc, quelle que soit la classe qu'une page lui
   donne : un vert sur ce vert disparaitrait (specificite 0,3,1, au-dessus
   des regles d'icone des feuilles de page). */
.gat .gat-wa svg[viewBox="0 0 24 24"] { width: 1.3em; height: 1.3em; color: inherit; }
.gat-wa-sm { min-height: 36px; padding: 6px 12px; font-size: 13px; gap: 6px; }
.gat-wa-bloc { display: flex; width: 100%; }
/* Sur l'indigo, un liseré clair le detache du fond. */
.on-dark .gat-wa { box-shadow: 0 0 0 1px color-mix(in srgb, #fff 22%, transparent); }

/* — rangees d'actions — */
.gat-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: 0; }
.gat-note { font-size: 13px; color: var(--muted); margin: var(--space-3) 0 0; max-width: 62ch; }
.on-dark .gat-note { color: var(--color-neutral-300); }

/* — champs — */
.field > label { display: block; font-size: 12px; margin-bottom: 5px; color: var(--muted); }
.input {
  width: 100%; min-height: 44px; padding: 8px 12px; font: inherit; font-size: 16px;
  color: var(--ink); caret-color: var(--color-accent-600);
  background: #fff;
  border: 1px solid var(--line-strong); border-radius: var(--radius-md);
}
.input:hover { border-color: var(--color-neutral-600); }
.input:focus-visible { border-color: var(--color-accent-600); outline-offset: 0; }
textarea.input { min-height: 110px; resize: vertical; }
.input-mono { font-family: var(--font-mono); letter-spacing: .08em; }

/* — segments (Oui / Non / Je ne sais pas) — */
.seg { display: inline-flex; flex-wrap: wrap; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--radius-md); }
.seg-opt { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 7px 12px; font-size: 14px; cursor: pointer; }
.seg-opt + .seg-opt { border-left: 1px solid var(--line-strong); }
.seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.seg-opt:has(input:checked) { color: var(--color-accent-700); background: var(--color-accent-200); box-shadow: inset 0 0 0 1px var(--color-accent-600); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent-600); outline-offset: -2px; }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-neutral-900) 6%, transparent); }

/* — messages de formulaire — */
.gat-message { padding: 12px 16px; border-radius: var(--radius-md); box-shadow: inset 3px 0 0 var(--color-accent-600), 0 0 0 1px var(--line); background: var(--color-neutral-100); font-size: 14px; }
.gat-message-ok { background: var(--color-wa-clair); box-shadow: inset 3px 0 0 var(--color-wa), 0 0 0 1px color-mix(in srgb, var(--color-wa) 30%, transparent); }
.gat-message-erreur { background: #fbeceb; box-shadow: inset 3px 0 0 #a4392a, 0 0 0 1px color-mix(in srgb, #a4392a 30%, transparent); color: #6e2117; }

/* — etiquettes — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px; letter-spacing: .02em;
  padding: 3px 10px; border-radius: calc(var(--radius-md) * .75);
}
.tag-accent  { background: var(--color-accent-800);  color: var(--color-accent-100); }
.tag-neutral { background: var(--color-neutral-200); color: var(--color-neutral-900); }
.tag-outline { border: 1px solid var(--color-accent-600); color: var(--color-accent-700); }

/* — pastilles —
 * Disponible / Sur commande : jamais une quantite, jamais « en stock ». Elles
 * n'apparaissent que si Catalogue::disponibilite() rend quelque chose, donc
 * jamais tant que l'interrupteur du CRM est eteint. */
.gat-badge {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 12px; font-weight: 500; line-height: 1.5;
  padding: 2px 10px; border-radius: 999px;
  background: var(--color-neutral-200); color: var(--color-neutral-800);
}
.gat-badge-dispo { background: var(--color-wa-clair); color: #1f6a4f; }
.gat-badge-commande { background: var(--color-attention-100); color: var(--color-attention-800); }
.gat-badge-dispo::before, .gat-badge-commande::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none;
}
.gat-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* — reference —
 * Chasse fixe et indigo, comme sur la fiche : c'est elle qui separe deux
 * produits de meme nom. Une reference longue (2763BYPVOW_RW/H/X) se coupe
 * plutot que de deborder a 375 px. */
.gat-ref {
  font-family: var(--font-mono); font-weight: 600; letter-spacing: .02em;
  color: var(--color-accent-700); overflow-wrap: anywhere;
}
a.gat-ref { text-decoration: none; }
a.gat-ref:hover { text-decoration: underline; }

/* — cartes — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-6); border-radius: var(--radius-md);
  background: var(--color-neutral-100); box-shadow: 0 0 0 1px var(--line);
}
.card-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 17px; line-height: 1.2; }
.card-body  { margin: 0; font-size: 13px; color: var(--muted); flex: 1; }

/* — tableau generique — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); padding: var(--space-3) var(--space-2); font-weight: 500;
}
.table td { padding: var(--space-3) var(--space-2); }
.table thead tr { background: linear-gradient(to right, var(--line-strong), var(--line-strong)) no-repeat bottom / 100% 1px; }
.table tbody tr { background: linear-gradient(to right, var(--line), var(--line)) no-repeat bottom / 100% 1px; }
.table .sku { font-family: var(--font-mono); font-weight: 600; color: var(--color-accent-700); }

/* — liste de references : table sur ordinateur, cartes sur telephone —
 * Le tableau d'archive du theme avait cinq colonnes et aucune regle mobile :
 * 576 px de large sur un ecran de 375. Ici, sous 760 px, chaque ligne devient
 * une carte et chaque cellule porte son libelle (data-label). */
.gat-table-produits { width: 100%; border-collapse: collapse; font-size: 14px; }
.gat-table-produits th {
  text-align: left; font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); padding: var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--line-strong);
}
.gat-table-produits td { padding: var(--space-4) var(--space-3); border-bottom: 1px solid var(--line); vertical-align: middle; }
.gat-table-produits tbody tr:hover { background: color-mix(in srgb, var(--color-neutral-900) 4%, transparent); }
.gat-tp-ref { white-space: nowrap; }
.gat-tp-ref .gat-ref { font-size: 14px; }
.gat-tp-nom { font-family: var(--font-heading); font-weight: 500; }
.gat-tp-detail { display: block; font-family: var(--font-body); font-weight: 400; font-size: 12px; color: var(--muted); margin-top: 2px; }
.gat-tp-action { text-align: right; white-space: nowrap; }
.gat-tp-meme-nom { display: inline-block; margin-top: 4px; }

@media (max-width: 760px) {
  .gat-table-produits thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .gat-table-produits, .gat-table-produits tbody { display: block; width: 100%; }
  .gat-table-produits tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--space-4);
    padding: var(--space-4) var(--space-6); margin-bottom: var(--space-3);
    border-radius: var(--radius-md); background: var(--color-neutral-100); box-shadow: 0 0 0 1px var(--line);
  }
  .gat-table-produits tbody tr:hover { background: var(--color-neutral-100); }
  .gat-table-produits td { display: block; padding: 0; border: 0; grid-column: 1 / -1; min-width: 0; font-size: 14px; }
  .gat-table-produits td[data-label]::before {
    content: attr(data-label) " : "; color: var(--muted); font-size: 12px;
  }
  .gat-table-produits td:empty { display: none; }
  .gat-tp-ref { white-space: normal; }
  .gat-tp-ref .gat-ref { font-size: 15px; }
  .gat-table-produits .gat-tp-action { text-align: left; white-space: normal; margin-top: var(--space-2); }
}

/* ═════════════════════════════════════════════════════════════ chrome ══ */

/* — barre haute sombre — */
.gat-topbar {
  background: var(--color-neutral-900); color: var(--color-neutral-400);
  font-size: 12px;
}
.gat-topbar-in { display: flex; align-items: center; gap: var(--space-6); padding: var(--space-2) var(--bleed); min-height: 32px; }
.gat-topbar a { color: inherit; text-decoration: none; }
.gat-topbar a:hover { color: var(--color-neutral-100); }
.gat-topbar-lieu { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.gat-topbar-lieu svg { color: var(--color-accent-400); }
.gat-topbar-right { margin-left: auto; display: flex; align-items: center; gap: var(--space-6); white-space: nowrap; }
.gat-topbar-wa { display: inline-flex; align-items: center; gap: 5px; }
.gat-topbar-wa svg { color: #6fbfa2; }

/* — en-tete clair, filet efface — */
.gat-header { background: var(--ground); position: sticky; top: 0; z-index: 50; }
.gat-header-in {
  display: flex; align-items: center; gap: calc(var(--space-8) * 1.4);
  padding: var(--space-4) var(--bleed);
  background: linear-gradient(to right, transparent,
    var(--line) 48px, var(--line) calc(100% - 48px), transparent)
    no-repeat bottom / 100% 1px;
}
.gat-brand { text-decoration: none; color: inherit; flex: none; display: block; }
.gat-brand img { height: 36px; width: auto; }

.gat-header-search { flex: 1 1 auto; min-width: 0; max-width: 520px; display: flex; gap: var(--space-2); margin: 0; }
.gat-header-search input {
  flex: 1 1 auto; min-width: 0; min-height: 40px; padding: 8px 12px;
  font: inherit; font-size: 15px; color: var(--ink); background: #fff;
  border: 1px solid var(--line-strong); border-radius: var(--radius-md);
}
.gat-header-search input:focus-visible { border-color: var(--color-accent-600); outline-offset: 0; }
.gat-header-search .btn { flex: none; min-height: 40px; }

.gat-nav { display: flex; font-size: 14px; margin-left: auto; }
.gat-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.gat-nav a { color: inherit; text-decoration: none; white-space: nowrap; }
.gat-nav a:hover, .gat-nav a[aria-current] { color: var(--color-accent-700); }
.gat-nav a[aria-current] { text-decoration: underline; text-decoration-color: var(--color-accent-500); text-underline-offset: 6px; }

/* Le menu du telephone : <details>, donc il s'ouvre sans JavaScript. Il
   n'existe qu'au-dessous de 980 px ; au-dessus, la .gat-nav s'affiche. */
.gat-menu-mobile { display: none; }
.gat-menu-mobile > summary {
  list-style: none; display: inline-flex; align-items: center; gap: 6px;
  min-height: 42px; padding: 0 12px; cursor: pointer; user-select: none;
  font-family: var(--font-heading); font-size: 14px; font-weight: 500;
  border: 1px solid var(--line-strong); border-radius: var(--radius-md);
}
.gat-menu-mobile > summary::-webkit-details-marker { display: none; }
.gat-menu-mobile > summary .gat-ico-fermer { display: none; }
.gat-menu-mobile[open] > summary { color: var(--color-accent-700); border-color: var(--color-accent-600); }
.gat-menu-mobile[open] > summary .gat-ico-fermer { display: inline; }
.gat-menu-mobile[open] > summary .gat-ico-menu { display: none; }
.gat-menu-mobile > nav {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 60;
  padding: var(--space-2) var(--bleed) var(--space-6);
  background: var(--ground);
  box-shadow: 0 1px 0 var(--line), 0 18px 36px rgba(41, 43, 49, .16);
}
.gat-menu-mobile ul { list-style: none; margin: 0; padding: 0; }
.gat-menu-mobile li a {
  display: flex; align-items: center; justify-content: space-between; min-height: 50px;
  font-size: 16px; color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.gat-menu-mobile li a[aria-current] { color: var(--color-accent-700); }
.gat-menu-mobile li a svg { color: var(--muted); }

/* — fil d'ariane — */
.gat-fil { padding: var(--space-6) var(--bleed) 0; font-size: 13px; color: var(--muted); }
.gat-fil ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 0; }
.gat-fil li { min-width: 0; overflow-wrap: anywhere; }
.gat-fil li + li::before { content: '›'; margin: 0 .55em; opacity: .6; }
.gat-fil a { color: var(--muted); text-decoration: none; }
.gat-fil a:hover { color: var(--color-accent-700); text-decoration: underline; }
.gat-fil [aria-current] { color: var(--ink); }

/* Ancien nom du theme, garde pour les gabarits portes tels quels. */
.gat-crumbs {
  display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center;
  padding: var(--space-6) var(--bleed); font-size: 13px; color: var(--muted);
}
.gat-crumbs a { text-decoration: none; }
.gat-crumbs .here { color: var(--ink); }

/* — pied de page sombre — */
.gat-footer { background: var(--color-neutral-900); color: var(--color-neutral-400); font-size: 13px; margin-top: calc(var(--space-8) * 2); }
/* Une page qui finit sur sa bande indigo la colle au pied de page : sans cela
   un ruban clair de 45 px separe deux fonds sombres. */
.gat-main:has(> .gat-band:last-child) + .gat-footer { margin-top: 0; }
.gat-footer-in {
  display: flex; justify-content: space-between; gap: calc(var(--space-8) * 1.6);
  flex-wrap: wrap; padding: calc(var(--space-8) * 1.8) var(--bleed) var(--space-8);
}
.gat-footer a { color: var(--color-neutral-300); text-decoration: none; }
.gat-footer a:hover { color: #fff; }
.gat-footer-brand { max-width: 36ch; }
.gat-footer-brand strong { display: block; font-family: var(--font-heading); font-weight: 500; font-size: 17px; color: var(--color-neutral-100); }
.gat-footer-brand p { margin: var(--space-3) 0 0; color: var(--color-neutral-400); }
.gat-footer-marques { font-size: 12px; }
.gat-footer-legal { display: block; margin-top: var(--space-4); font-size: 12px; }
.gat-footer-col { display: grid; gap: var(--space-3); align-content: start; }
.gat-footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.gat-footer-titre { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-neutral-500); margin: 0; }

/* — barre d'actions du telephone —
 * Rechercher · WhatsApp · Agences · Appeler, au pouce, en bas de l'ecran. Elle
 * n'existe que sous 860 px ; le corps reserve sa hauteur (plus la zone sure
 * des iPhone) pour qu'elle ne cache jamais la fin de la page. Sans numero
 * WhatsApp elle compte trois cases, pas une case morte. */
.gat-barre-mobile { display: none; }

/* — bande indigo : une seule par page — */
.gat-band {
  background: radial-gradient(120% 160% at 12% 0%,
    var(--color-section-glow) 0%, var(--color-section) 58%, var(--color-section) 100%);
  color: var(--color-neutral-100);
}
.gat-band h2, .gat-band h3, .gat-band strong { color: var(--color-neutral-100); }
.gat-band p { color: var(--color-neutral-200); }
.gat-band .kicker { color: var(--color-accent-300); }
.gat-band-in { padding: calc(var(--space-8) * 2) var(--bleed); }

.kicker { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent-700); margin: 0 0 var(--space-3); }

/* ═══════════════════════════════════════════════════════════ ecrans ══ */

.gat-main { min-height: 50vh; }
.gat-page { padding: calc(var(--space-8) * 1.8) var(--bleed) calc(var(--space-8) * 2); }
.gat-lede { font-size: 17px; color: var(--muted); max-width: 70ch; text-wrap: pretty; }
.gat-content { max-width: 74ch; }
.gat-content h2 { font-size: 28px; margin-top: calc(var(--space-8) * 1.6); }
.gat-content h3 { font-size: 20px; margin-top: calc(var(--space-8) * 1.2); }
.gat-content ul, .gat-content ol { padding-left: 1.15em; }
.gat-content li { margin-bottom: .45em; color: var(--muted); }
.gat-content p { color: var(--muted); }

.gat-section { padding: calc(var(--space-8) * 2) var(--bleed); }
.gat-section-alt { background: var(--color-neutral-200); }
.gat-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3) var(--space-6); flex-wrap: wrap; margin-bottom: var(--space-6); }
.gat-section-head h2 { margin: 0; font-size: 28px; }
.gat-section-head p { margin: var(--space-2) 0 0; color: var(--muted); max-width: 70ch; }
.gat-cards-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.gat-cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.gat-cards-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }

/* — grand formulaire de recherche — */
.gat-recherche-large { display: flex; gap: var(--space-3); max-width: 640px; margin: 0; }
.gat-recherche-large input[type="search"], .gat-recherche-large input[type="text"] {
  flex: 1 1 auto; min-width: 0; min-height: 54px; padding: 0 16px;
  font: inherit; font-size: 17px; color: var(--ink); background: #fff;
  border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  box-shadow: 0 1px 2px rgba(41, 43, 49, .06);
}
.gat-recherche-large input:focus-visible { border-color: var(--color-accent-600); outline-offset: 0; }
.gat-recherche-large .btn { flex: none; min-height: 54px; padding-inline: 22px; font-size: 16px; }
.gat-recherche-aide { font-size: 13px; color: var(--muted); margin: var(--space-3) 0 0; max-width: 64ch; }
.gat-recherche-aide a.gat-ref { font-weight: 600; }

/* — tuiles : marques, carrosseries, index — */
.gat-grille-tuiles {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: var(--space-3); list-style: none; margin: 0; padding: 0;
}
.gat-grille-tuiles > li { display: flex; min-width: 0; }
.gat-tuile {
  flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-2);
  min-height: 64px; padding: var(--space-4) var(--space-6); border-radius: var(--radius-md);
  background: var(--color-neutral-100); box-shadow: 0 0 0 1px var(--line);
  text-decoration: none; color: var(--ink);
}
.gat-tuile:hover, .gat-tuile:focus-visible { box-shadow: 0 0 0 1px var(--color-accent-600); color: var(--color-accent-700); }
.gat-tuile-nom { font-family: var(--font-heading); font-size: 15px; font-weight: 500; line-height: 1.25; overflow-wrap: anywhere; }
.gat-tuile-nb { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.gat-tuile-texte { font-size: 13px; color: var(--muted); margin: 0; }
.gat-tuile-visuel { display: block; color: var(--color-neutral-700); }
.gat-tuile:hover .gat-tuile-visuel { color: var(--color-accent-700); }
.gat-tuile-large { grid-column: span 2; }
.gat-tuile-accent { background: var(--color-accent-200); box-shadow: 0 0 0 1px var(--color-accent-300); }
.gat-section-alt .gat-tuile:not(.gat-tuile-accent) { background: var(--color-neutral-100); }

/* Les silhouettes de carrosserie : trait courant, vitres teintees. */
.gat-silhouette { display: block; width: 100%; height: auto; max-width: 180px; color: inherit; overflow: visible; }

/* — mot-symbole de marque —
 * Les logos constructeurs sont ecartes (marques deposees, CJUE Audi C-334/22) :
 * le nom porte la marque, capitales, Inter 600, chasse ouverte. Meme
 * traitement partout ou une marque est nommee. */
.gat-wordmark {
  font-family: var(--font-heading);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  /* Les capitales paraissent plus grandes a taille egale : on compense. */
  font-size: .94em;
  color: inherit;
  overflow-wrap: anywhere;
}
.gat-archive-head h1 .gat-wordmark { font-size: 1em; letter-spacing: .02em; }

/* — selecteur « Quel vitrage ? » —
 * Le schema est cliquable a la souris ; la liste a cote porte les memes liens
 * pour le clavier, le lecteur d'ecran et le pouce (une bande de 16 px sur un
 * dessin n'est pas une cible tactile). Survoler l'un allume l'autre. */
.gat-positions { display: grid; grid-template-columns: minmax(120px, 190px) minmax(0, 1fr); gap: var(--space-8); align-items: center; }
.gat-positions-schema { color: var(--color-neutral-700); }
.gat-positions-schema svg { display: block; width: 100%; height: auto; }
.gat-positions-schema a { cursor: pointer; }
.gat-pos-zone { fill: var(--color-accent-200); stroke: var(--color-accent-600); stroke-width: 1.5; transition: fill .12s ease; }
.gat-positions-schema a:hover .gat-pos-zone, .gat-positions-schema a:focus-visible .gat-pos-zone { fill: var(--color-accent-400); }
.gat-pos-zone.is-actif { fill: var(--color-accent-600); }
.gat-positions-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.gat-positions-liste a {
  display: flex; align-items: center; gap: var(--space-4); min-height: 48px;
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-md);
  background: var(--color-neutral-100); box-shadow: 0 0 0 1px var(--line);
  text-decoration: none; color: var(--ink);
}
.gat-positions-liste a:hover { box-shadow: 0 0 0 1px var(--color-accent-600); }
.gat-positions-liste a[aria-current] { box-shadow: 0 0 0 2px var(--color-accent-600); background: var(--color-accent-100); }
.gat-pos-lettre {
  display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 6px;
  font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  background: var(--color-accent-200); color: var(--color-accent-800);
}
.gat-pos-texte { display: grid; min-width: 0; line-height: 1.25; }
.gat-pos-nom { font-family: var(--font-heading); font-weight: 500; font-size: 15px; }
.gat-pos-aide { font-size: 12px; color: var(--muted); }
.gat-positions:has(.gat-positions-liste a[data-pos="A"]:hover) .gat-pos-zone[data-pos="A"],
.gat-positions:has(.gat-positions-liste a[data-pos="B"]:hover) .gat-pos-zone[data-pos="B"],
.gat-positions:has(.gat-positions-liste a[data-pos="L"]:hover) .gat-pos-zone[data-pos="L"],
.gat-positions:has(.gat-positions-liste a[data-pos="R"]:hover) .gat-pos-zone[data-pos="R"],
.gat-positions:has(.gat-positions-liste a[data-pos="custode"]:hover) .gat-pos-zone[data-pos="custode"] { fill: var(--color-accent-400); }
.gat-positions:has(.gat-positions-schema a[data-pos="A"]:hover) .gat-positions-liste a[data-pos="A"],
.gat-positions:has(.gat-positions-schema a[data-pos="B"]:hover) .gat-positions-liste a[data-pos="B"],
.gat-positions:has(.gat-positions-schema a[data-pos="L"]:hover) .gat-positions-liste a[data-pos="L"],
.gat-positions:has(.gat-positions-schema a[data-pos="R"]:hover) .gat-positions-liste a[data-pos="R"],
.gat-positions:has(.gat-positions-schema a[data-pos="custode"]:hover) .gat-positions-liste a[data-pos="custode"] { box-shadow: 0 0 0 1px var(--color-accent-600); }
/* Sans legende, le schema seul : il garde sa propre largeur. */
.gat-positions.sans-legende { grid-template-columns: minmax(0, 220px); }

/* — encadre de doute —
 * L'ocre est la seule couleur chaude : elle ne sert qu'a dire « verifiez ».
 * Le conteneur reste un bloc ordinaire (ni grille, ni couleur de texte) : une
 * page peut y mettre un titre, des questions, une liste, et ne reprendre que
 * le cadre. L'icone et le texte ocre ne visent que le motif documente
 * (svg en premier enfant, puis un div avec strong et p). */
.gat-doute {
  position: relative; min-width: 0;
  padding: var(--space-4) var(--space-6); border-radius: var(--radius-md);
  background: var(--color-attention-100);
  box-shadow: inset 3px 0 0 var(--color-attention-600), 0 0 0 1px color-mix(in srgb, var(--color-attention-600) 28%, transparent);
}
.gat-doute:has(> svg:first-child) { padding-left: 50px; }
.gat-doute > svg[viewBox="0 0 24 24"]:first-child {
  position: absolute; left: 17px; top: calc(var(--space-4) + 1px);
  width: 22px; height: 22px; color: var(--color-attention-600);
}
.gat-doute > div > strong:first-child { display: block; font-family: var(--font-heading); font-weight: 600; color: var(--color-attention-800); }
.gat-doute > div > p { margin: var(--space-1) 0 0; color: var(--color-attention-800); font-size: 14px; }
.gat-doute > div a { color: var(--color-attention-800); font-weight: 500; }

/* — les trois engagements — */
.gat-engagements { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.gat-engagements li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: 14px; line-height: 1.45; }
.gat-engagements svg[viewBox="0 0 24 24"] { width: 20px; height: 20px; margin-top: 0; color: var(--color-wa); }
.on-dark .gat-engagements li { color: var(--color-neutral-100); }
.on-dark .gat-engagements svg[viewBox="0 0 24 24"] { color: #7fd0b2; }

/* — cadre photo —
 * Les photos studio de GAT sont sur fond gris clair (151/255 mesure aux
 * coins) : un cadre sombre ferait une aureole. Le cadre suit l'asset. */
.gat-photo {
  margin: 0; border-radius: var(--radius-md); overflow: hidden;
  background: var(--color-neutral-200); padding: var(--space-3);
  box-shadow: 0 0 0 1px var(--line);
}
.gat-photo img { border-radius: var(--radius-sm); width: 100%; height: auto; }
.gat-figcaption, .gat-photo figcaption { font-size: 11px; color: var(--muted); margin-top: var(--space-2); }

/* ══════════════════════════════════════════════════════════ accueil ══ */

/* Identification d'abord : titre, UNE case de recherche, puis la photo de la
   serigraphie et l'appel. A 375 px le tout tient dans le premier ecran. */
.gat-hero { padding: calc(var(--space-8) * 1.9) var(--bleed) calc(var(--space-8) * 1.8); }
.gat-hero-grille { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: calc(var(--space-8) * 2.4); align-items: start; }
.gat h1.gat-hero-title { font-size: 50px; line-height: 1.04; margin: 0; max-width: 17ch; }
.gat-hero .gat-lede { margin: var(--space-6) 0 0; }
.gat-hero .gat-recherche-large { margin-top: calc(var(--space-8) * 1.2); }
.gat-hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: calc(var(--space-8) * 1.1); }
.gat-hero-carte {
  padding: var(--space-8); border-radius: var(--radius-lg);
  background: var(--color-neutral-100); box-shadow: 0 0 0 1px var(--line), 0 18px 40px rgba(41, 43, 49, .07);
}
.gat-hero-carte h2 { font-size: 22px; margin: 0; }
.gat-hero-carte > p { font-size: 14px; color: var(--muted); margin: var(--space-2) 0 var(--space-6); }

/* Les quatre verifications d'equipement. */
.gat-equipements { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); list-style: none; margin: 0; padding: 0; }
.gat-equipement {
  display: flex; flex-direction: column; gap: var(--space-2); height: 100%;
  padding: var(--space-6); border-radius: var(--radius-md);
  background: var(--color-neutral-100); box-shadow: 0 0 0 1px var(--line);
  text-decoration: none; color: var(--ink);
}
.gat-equipement:hover { box-shadow: 0 0 0 1px var(--color-accent-600); }
.gat-equipement-ico {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px;
  background: var(--color-accent-200); color: var(--color-accent-700);
}
.gat-equipement-ico svg[viewBox="0 0 24 24"] { width: 24px; height: 24px; }
.gat-equipement-titre { font-family: var(--font-heading); font-weight: 500; font-size: 17px; line-height: 1.2; margin-top: var(--space-2); }
.gat-equipement-texte { font-size: 13px; color: var(--muted); margin: 0; flex: 1; }
.gat-equipement-lien { font-size: 13px; color: var(--link); display: inline-flex; align-items: center; gap: 4px; }

/* Les trois etapes : numerotees par le compteur de la liste. */
.gat-etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); counter-reset: etape; }
.gat-etapes li {
  counter-increment: etape; padding-top: var(--space-6);
  background: linear-gradient(to right, var(--color-accent-600), var(--color-accent-600)) no-repeat top left / 28px 2px,
              linear-gradient(to right, var(--line-strong), var(--line-strong)) no-repeat top / 100% 1px;
}
.gat-etapes li::before { content: counter(etape, decimal-leading-zero); display: block; font-family: var(--font-mono); font-size: 13px; color: var(--color-accent-700); }
.gat-etape-titre { display: block; font-family: var(--font-heading); font-weight: 500; font-size: 19px; margin-top: var(--space-2); }
.gat-etapes p { font-size: 14px; color: var(--muted); margin: var(--space-2) 0 0; }

/* Les chiffres de confiance : seulement ceux qui sont vrais et lus en base. */
.gat-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-6); margin: calc(var(--space-8) * 1.8) 0 0; padding: 0; }
.gat-chiffres > div { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; padding: var(--space-6) 0 0; border-top: 1px solid var(--line-strong); }
.gat-chiffres dt { font-size: 13px; color: var(--muted); }
.gat-chiffres dd { margin: 0; order: -1; font-family: var(--font-heading); font-weight: 500; font-size: 30px; line-height: 1.1; letter-spacing: -.01em; }
.gat-chiffres .gat-chiffre-detail { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }

/* La bande indigo de l'accueil : doute, engagements, WhatsApp. */
.gat-band-grille { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: calc(var(--space-8) * 2); align-items: center; }
.gat-band-grille h2 { font-size: 32px; margin: 0; }
.gat-band-grille h2 + p { margin-top: var(--space-4); max-width: 60ch; }
.gat-band-grille .gat-actions { margin-top: var(--space-8); }

/* ═════════════════════════════════════════════ ecrans herites du theme ══ */

/* — 3a : resultats, deux colonnes — */
.gat-results-layout {
  display: grid; grid-template-columns: 250px minmax(0, 1fr);
  gap: calc(var(--space-8) * 1.8);
  padding: 0 var(--bleed) calc(var(--space-8) * 2); align-items: start;
}
.gat-facets { display: grid; gap: var(--space-8); }
.gat-facet-title { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--space-3); }
.gat-facet-list { display: grid; gap: var(--space-2); font-size: 14px; list-style: none; margin: 0; padding: 0; }
.gat-facet-list a { display: flex; justify-content: space-between; gap: var(--space-3); text-decoration: none; color: inherit; }
.gat-facet-list a:hover, .gat-facet-list a[aria-current] { color: var(--color-accent-700); }
.gat-facet-n { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.gat-facet-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.gat-facet-chips a { text-decoration: none; }
.gat-facet-aside { padding: var(--space-6); border-radius: var(--radius-md); background: var(--color-neutral-200); box-shadow: 0 0 0 1px var(--line); }
.gat-facet-aside strong { display: block; font-family: var(--font-heading); font-weight: 500; font-size: 15px; }
.gat-facet-aside p { font-size: 13px; color: var(--muted); margin: var(--space-2) 0 var(--space-4); }

.gat-results-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; }
.gat-results-head h1 { font-size: 32px; margin: 0; }
.gat-results-head p { font-size: 14px; color: var(--muted); margin: var(--space-2) 0 0; max-width: 70ch; }
.gat-results-head strong { color: var(--ink); font-weight: 500; }

.gat-results { margin-top: calc(var(--space-8) * 1.4); border-radius: var(--radius-md); overflow: hidden; }
.gat-result {
  display: grid; grid-template-columns: 170px minmax(0, 1fr) 210px 120px;
  gap: var(--space-6); align-items: center;
  padding: var(--space-4) var(--space-6); text-decoration: none; color: inherit;
  background: linear-gradient(to right, var(--line), var(--line)) no-repeat bottom / 100% 1px;
}
.gat-result:hover { background-color: var(--color-neutral-200); }
.gat-result-sku { font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--color-accent-700); overflow-wrap: anywhere; }
.gat-result-name { display: block; font-family: var(--font-heading); font-weight: 500; font-size: 16px; }
.gat-result-detail { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.gat-result-type { display: flex; align-items: center; gap: var(--space-2); font-size: 14px; }
.gat-result-type svg { color: var(--color-accent-600); }
.gat-result-stock { text-align: right; font-size: 13px; color: var(--muted); }

.gat-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); margin-top: var(--space-8); flex-wrap: wrap; }
.gat-pager .page-numbers { display: inline-block; padding: 7px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); margin-right: 4px; text-decoration: none; color: var(--ink); font-size: 13px; }
.gat-pager .page-numbers.current, .gat-pager .page-numbers:hover { border-color: var(--color-accent-600); color: var(--color-accent-700); }

/* — 3b : fiche produit — */
.gat-product { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: calc(var(--space-8) * 2); padding: 0 var(--bleed) calc(var(--space-8) * 2); align-items: start; }
.gat-product h1 { font-size: 40px; line-height: 1.06; margin: var(--space-4) 0 0; max-width: 24ch; }
.gat-product-ref { display: flex; align-items: baseline; gap: var(--space-4); margin-top: var(--space-4); flex-wrap: wrap; }
.gat-product-ref .code { font-family: var(--font-mono); font-size: 24px; font-weight: 600; letter-spacing: .06em; color: var(--color-accent-700); overflow-wrap: anywhere; }
.gat-product-ref .note { font-size: 14px; color: var(--muted); }
.gat-product-desc { font-size: 15px; color: var(--muted); margin: calc(var(--space-8) * 1.4) 0 0; max-width: 62ch; text-wrap: pretty; }
.gat-product-actions { display: flex; gap: var(--space-3); margin-top: calc(var(--space-8) * 1.4); flex-wrap: wrap; }
.gat-product-note { font-size: 13px; color: var(--muted); margin: var(--space-4) 0 0; }

/* Le decoupage de l'Eurocode : c'est lui qui explique la piece. */
.gat-eurocode { display: grid; gap: 1px; margin-top: calc(var(--space-8) * 1.4); border-radius: var(--radius-md); overflow: hidden; background: var(--line-strong); }
.gat-eurocode-cell { padding: var(--space-4); background: var(--color-neutral-100); min-width: 0; }
.gat-eurocode-cell.is-key { background: var(--color-accent-200); }
.gat-eurocode-k { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.gat-eurocode-v { font-family: var(--font-mono); font-size: 22px; font-weight: 600; letter-spacing: .06em; margin-top: var(--space-1); overflow-wrap: anywhere; }
.gat-eurocode-cell.is-key .gat-eurocode-v { color: var(--color-accent-700); }
.gat-eurocode-d { font-size: 12px; color: var(--muted); margin-top: 2px; }

.gat-specs { border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.gat-specs-head { padding: var(--space-4) var(--space-6); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: var(--color-neutral-200); }
.gat-spec { display: flex; justify-content: space-between; gap: var(--space-6); padding: var(--space-3) var(--space-6); font-size: 14px; background: linear-gradient(to right, var(--line), var(--line)) no-repeat bottom / 100% 1px; }
.gat-spec .k { color: var(--muted); flex: none; }
.gat-spec .v { text-align: right; font-family: var(--font-heading); font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.gat-specs-note { font-size: 12px; color: var(--muted); margin: 0; padding: var(--space-4) var(--space-6); }

.gat-siblings { padding: calc(var(--space-8) * 2) var(--bleed); background: var(--color-neutral-200); }
.gat-siblings-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; }
.gat-siblings-head h2 { margin: 0; font-size: 28px; }
.gat-siblings-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-top: calc(var(--space-8) * 1.2); }
.gat-sibling { text-decoration: none; color: inherit; }
.gat-sibling-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.gat-sibling-top svg { color: var(--color-accent-600); }
.gat-sibling-sku { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--color-accent-700); overflow-wrap: anywhere; }

/* — 3c/3d : archives et index — */
.gat-archive-head { padding: calc(var(--space-8) * 1.8) var(--bleed) calc(var(--space-8) * 1.4); }
.gat-archive-head h1 { font-size: 52px; line-height: 1.04; margin: 0; }
.gat-archive-head p { font-size: 16px; color: var(--muted); margin: var(--space-4) 0 0; max-width: 72ch; text-wrap: pretty; }
.gat-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: calc(var(--space-8) * 1.2); }
.gat-chips a { text-decoration: none; }

.gat-alphabet { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: calc(var(--space-8) * 1.2); }
.gat-alphabet a, .gat-alphabet span {
  display: grid; place-items: center; width: 32px; height: 32px; font-size: 13px;
  text-decoration: none; color: var(--muted); border-radius: var(--radius-sm);
}
.gat-alphabet a:hover { color: var(--color-accent-700); background: color-mix(in srgb, var(--color-accent) 14%, transparent); }
.gat-alphabet span { opacity: .35; }

.gat-index-section { padding: calc(var(--space-8) * 1.8) var(--bleed) calc(var(--space-8) * 2); }
.gat-index-section h2 { margin: 0; font-size: 24px; }
.gat-hr { height: 1px; background: var(--line); border: 0; margin: var(--space-4) 0 var(--space-2); }
.gat-index-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: calc(var(--space-8) * 1.6); }
.gat-index-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) 0; text-decoration: none; color: inherit; font-size: 14px;
  background: linear-gradient(to right, var(--line), var(--line)) no-repeat bottom / 100% 1px;
}
.gat-index-item:hover { color: var(--color-accent-700); }
.gat-index-item .n { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.gat-index-note { font-size: 13px; color: var(--muted); margin: calc(var(--space-8) * 1.4) 0 0; max-width: 80ch; }

/* — 3e/3g : formulaires — */
.gat-form-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: calc(var(--space-8) * 2); align-items: start; }
.gat-form-main { padding: calc(var(--space-8) * 1.4); border-radius: var(--radius-lg); box-shadow: 0 0 0 1px var(--line); }
.gat-form-side { display: grid; gap: var(--space-4); }
.gat-side-card { padding: var(--space-6); border-radius: var(--radius-md); background: var(--color-neutral-200); box-shadow: 0 0 0 1px var(--line); }
.gat-side-card strong { display: block; font-family: var(--font-heading); font-weight: 500; font-size: 16px; }
.gat-side-card p { font-size: 13px; color: var(--muted); margin: var(--space-2) 0 var(--space-4); }
.gat-steps { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
.gat-step { display: flex; gap: var(--space-4); }
.gat-step .n { font-family: var(--font-heading); font-size: 13px; color: var(--color-accent-700); flex: none; width: 18px; }
.gat-step .t { display: block; font-family: var(--font-heading); font-weight: 500; font-size: 15px; }
.gat-step .d { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.gat-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); margin: 0 0 var(--space-6); }
.gat-form-intro { font-size: 15px; color: var(--muted); }
.gat-form-note { font-size: 13px; color: var(--muted); }

/* — 3f : deroule en quatre temps — */
.gat-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-6); }
.gat-flow-step {
  padding-top: var(--space-4);
  background: linear-gradient(to right, var(--color-accent-600), var(--color-accent-600)) no-repeat top left / 28px 2px,
              linear-gradient(to right, var(--line-strong), var(--line-strong)) no-repeat top / 100% 1px;
}
.gat-flow-step .n { font-family: var(--font-heading); font-size: 13px; color: var(--color-accent-700); }
.gat-flow-step .t { font-family: var(--font-heading); font-weight: 500; font-size: 17px; margin-top: var(--space-2); }
.gat-flow-step p { font-size: 13px; color: var(--muted); margin: var(--space-2) 0 0; }

/* — 3h : page introuvable / incident — */
.gat-404 { padding: calc(var(--space-8) * 2.4) var(--bleed) calc(var(--space-8) * 2); }
.gat-404-in { max-width: 760px; }
.gat-404 h1 { font-size: 48px; line-height: 1.05; margin: 0; }
.gat-404 .gat-lede { margin-top: var(--space-6); }
.gat-404 .gat-recherche-large { margin-top: calc(var(--space-8) * 1.4); }
.gat-404-liens { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); list-style: none; margin: calc(var(--space-8) * 1.4) 0 0; padding: 0; font-size: 14px; }

/* — tuiles du theme (ancien nom) — */
.gat-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.gat-tiles a {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4) var(--space-6); border-radius: var(--radius-md);
  background: var(--color-neutral-100); box-shadow: 0 0 0 1px var(--line);
  text-decoration: none; color: inherit;
}
.gat-tiles a:hover { box-shadow: 0 0 0 1px var(--color-accent-600); color: var(--color-accent-700); }
.gat-tile-name { font-family: var(--font-heading); font-size: 14px; font-weight: 500; }
.gat-tile-count { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ════════════════════════════════════════════════════════ responsive ══ */

@media (max-width: 1180px) {
  .gat-results-layout, .gat-product, .gat-form-layout, .gat-hero-grille, .gat-band-grille { grid-template-columns: minmax(0, 1fr); }
  .gat-index-cols, .gat-cards-4, .gat-equipements { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gat-siblings-grid, .gat-flow, .gat-cards-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gat-hero-carte { max-width: 640px; }
}

/* L'en-tete du telephone. Le theme empilait marque, recherche, menu replie
   sur cinq lignes et bouton : 373 px colles en haut d'un ecran de 667. Ici :
   logo et menu sur une ligne, la recherche sur la suivante — environ 110 px —
   et l'en-tete ne colle plus, la barre du bas tient ce role. */
@media (max-width: 980px) {
  .gat-header { position: relative; }
  .gat-header-in {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "marque . menu" "recherche recherche recherche";
    gap: var(--space-3) var(--space-4); padding-block: var(--space-3);
  }
  .gat-brand { grid-area: marque; }
  .gat-brand img { height: 32px; }
  .gat-header-search { grid-area: recherche; max-width: none; }
  .gat-nav { display: none; }
  .gat-menu-mobile { display: block; grid-area: menu; }
  /* L'accueil et la recherche portent deja la grande case : pas de seconde
     case en tete, qui faisait deux champs l'un sous l'autre sur telephone. */
  .gat-accueil .gat-header-in,
  .gat-page-recherche .gat-header-in { grid-template-areas: "marque . menu"; }
  .gat-accueil .gat-header-search,
  .gat-page-recherche .gat-header-search { display: none; }
}

@media (max-width: 860px) {
  :root { --gutter: 20px; }
  body.gat { padding-bottom: calc(var(--barre-mobile) + env(safe-area-inset-bottom, 0px)); }
  .gat-masque-mobile { display: none !important; }

  .gat-topbar-in { gap: var(--space-4); }
  .gat-topbar-wa { display: none; }

  .gat-barre-mobile {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    min-height: var(--barre-mobile); padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--color-neutral-900);
    box-shadow: 0 -1px 0 rgba(255, 255, 255, .06), 0 -8px 24px rgba(41, 43, 49, .18);
  }
  .gat-barre-mobile a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: var(--barre-mobile); padding: 6px 4px;
    font-size: 11px; font-weight: 500; letter-spacing: .01em; text-decoration: none;
    color: var(--color-neutral-200);
  }
  .gat-barre-mobile a + a { box-shadow: -1px 0 0 rgba(255, 255, 255, .07); }
  .gat-barre-mobile a:active { background: rgba(255, 255, 255, .08); }
  .gat-barre-mobile svg[viewBox="0 0 24 24"] { width: 22px; height: 22px; }
  .gat-barre-mobile .gat-barre-wa { background: var(--color-wa); color: #fff; }

  .gat-section, .gat-band-in { padding-block: calc(var(--space-8) * 1.4); }
  .gat-hero { padding-block: var(--space-8) calc(var(--space-8) * 1.4); }
  .gat h1.gat-hero-title { font-size: 32px; line-height: 1.08; }
  .gat-hero .gat-lede { font-size: 15px; margin-top: var(--space-4); }
  .gat-hero .gat-recherche-large { margin-top: var(--space-6); }
  .gat-hero-actions { flex-direction: column; align-items: stretch; margin-top: var(--space-6); }
  .gat-hero-carte { padding: var(--space-6); }
  .gat-section-head h2, .gat-band-grille h2 { font-size: 24px; }
  :where(.gat) h1 { font-size: 32px; }
  :where(.gat) h2 { font-size: 26px; }

  .gat-result { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .gat-result-stock { text-align: left; }
  .gat-index-cols, .gat-siblings-grid, .gat-flow, .gat-form-grid,
  .gat-cards-4, .gat-cards-3, .gat-cards-2, .gat-etapes { grid-template-columns: minmax(0, 1fr); }
  .gat-archive-head h1, .gat-404 h1 { font-size: 32px; }
  .gat-product h1 { font-size: 28px; }
  .gat-product-ref .code { font-size: 20px; }
  .gat-form-main { padding: var(--space-6); }
}

@media (max-width: 560px) {
  .gat-equipements { grid-template-columns: minmax(0, 1fr); }
  .gat-equipement { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: var(--space-2) var(--space-4); padding: var(--space-4); }
  .gat-equipement-ico { width: 40px; height: 40px; }
  .gat-equipement > div { flex: 1; min-width: 0; }
  .gat-equipement-titre { margin-top: 0; font-size: 16px; }
  .gat-positions { grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-4); }
  .gat-pos-aide { display: none; }
  .gat-grille-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gat-tuile { padding: var(--space-3) var(--space-4); }
  .gat-recherche-large input[type="search"], .gat-recherche-large input[type="text"] { min-height: 50px; font-size: 16px; padding: 0 12px; }
  .gat-recherche-large .btn { min-height: 50px; padding-inline: 14px; font-size: 15px; }
  .gat-header-search .gat-header-search-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .gat-header-search .btn { padding-inline: 12px; }
  .gat-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
  .gat-chiffres dd { font-size: 24px; }
  /* Seize marques font huit rangees au pouce : huit suffisent, la derniere
     tuile (« Toutes les marques ») reste. */
  .gat-grille-courte > li:nth-child(n+9):not(:last-child) { display: none; }
}

/* Sous 420 px la loupe suffit : le champ garde la place d'un Eurocode entier. */
@media (max-width: 420px) {
  .gat-recherche-large .gat-recherche-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .gat-recherche-large .btn { padding-inline: 16px; }
  .gat-recherche-large .btn svg[viewBox="0 0 24 24"] { width: 22px; height: 22px; }
}

@media (min-width: 861px) {
  .gat-seulement-mobile { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
  .gat-topbar, .gat-barre-mobile, .gat-menu-mobile, .gat-header-search, .gat-footer { display: none !important; }
  .gat-header { position: static; }
  body.gat { padding-bottom: 0; background: #fff; }
}