/* Fiche produit — /shop/{slug}/ (D-80, ecran 3b)
 *
 * Reprend le vocabulaire de site.css (.gat-eurocode, .gat-specs, .gat-photo,
 * .gat-siblings, .seg) et ne corrige que ce que le theme laissait casser :
 * - les colonnes de l'Eurocode etaient un style inline, hors de portee des
 *   media queries ; elles vivent ici ;
 * - .gat-product passait en une colonne sans reordonner : sur telephone la
 *   photo arrivait apres tous les boutons. Ici les deux enveloppes passent
 *   en display: contents et chaque bloc prend sa place (ordre du brief).
 * Rien ne doit depasser 375 px : les valeurs longues (references, suffixes,
 * designations sans espace) se coupent n'importe ou plutot que de deborder.
 */

/* Les icones d'Icone::svg n'ont ni largeur ni hauteur propres. */
.gat-fiche-ico { width: 18px; height: 18px; flex: none; }

.gat-fiche-vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ─────────────────────────────────────────────── disposition ── */

.gat-fiche {
  display: flex; flex-direction: column; gap: calc(var(--space-8) * 1.2);
  padding: 0 var(--bleed, var(--gutter)) calc(var(--space-8) * 2);
}
.gat-fiche-gauche, .gat-fiche-droite { display: contents; }
.gat-fiche-entete   { order: 1; }
.gat-fiche-visuel   { order: 2; }
.gat-fiche-eurocode { order: 3; }
.gat-fiche-faits    { order: 4; }
.gat-doute          { order: 5; }
.gat-fiche-actions  { order: 6; }
.gat-fiche > * > *  { min-width: 0; }

@media (min-width: 960px) {
  .gat-fiche {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: calc(var(--space-8) * 2); align-items: start;
  }
  .gat-fiche-gauche, .gat-fiche-droite {
    display: flex; flex-direction: column; gap: calc(var(--space-8) * 1.2); min-width: 0;
  }
}

.gat .gat-fiche-h2 {
  display: flex; align-items: center; gap: var(--space-3);
  font-size: 19px; line-height: 1.25; margin: 0 0 var(--space-4);
}
.gat-fiche-note { font-size: 13px; color: var(--muted); margin: var(--space-4) 0 0; }

/* ─────────────────────────────────────────────── en-tete ── */

.gat-fiche-surtitre { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
.gat-fiche-surtitre .kicker { margin: 0; }

/* Un etat, jamais une quantite. Vert desature, comme l'accent WhatsApp. */
.gat-fiche-dispo { display: inline-flex; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; }
.gat-fiche-dispo.is-disponible { background: color-mix(in srgb, #3f8f74 16%, transparent); color: #2b6652; }
.gat-fiche-dispo.is-commande { background: var(--color-neutral-200); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }

/* .gat h1 vaut (0,1,1) : il faut le battre, pas l'egaler. */
.gat h1.gat-fiche-titre { display: grid; gap: var(--space-3); margin: var(--space-4) 0 0; font-size: 36px; line-height: 1.08; }
.gat-fiche-designation { overflow-wrap: anywhere; max-width: 26ch; }
.gat-fiche-ref {
  font-family: var(--font-mono); font-size: 28px; font-weight: 600; letter-spacing: .06em;
  line-height: 1.15; color: var(--color-accent-700); overflow-wrap: anywhere;
  user-select: all; -webkit-user-select: all;
}
.gat-fiche-ref-outils { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-3); font-size: 13px; color: var(--muted); }
.gat-fiche-copier { font-size: 13px; }

/* ─────────────────────────────────────────────── Eurocode ── */

.gat-fiche .gat-eurocode { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
.gat-fiche .gat-eurocode-v { overflow-wrap: anywhere; }

@media (max-width: 520px) {
  /* Trois cellules de 100 px ne tiennent pas un suffixe comme ACMVZ1L :
     une ligne par cellule, valeur a droite. */
  .gat-fiche .gat-eurocode { grid-template-columns: minmax(0, 1fr); }
  .gat-fiche .gat-eurocode-cell {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-4); align-items: center;
  }
  .gat-fiche .gat-eurocode-k { grid-column: 1; }
  .gat-fiche .gat-eurocode-d { grid-column: 1; }
  .gat-fiche .gat-eurocode-v { grid-column: 2; grid-row: 1 / span 2; margin: 0; font-size: 20px; text-align: right; max-width: 55vw; }
}

/* ─────────────────────────────────────────────── visuel ── */

.gat-fiche-visuel { margin: 0; }
.gat-fiche-visuel .gat-photo { display: block; }
.gat-fiche-vignettes { display: flex; flex-wrap: wrap; gap: var(--space-3); list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.gat-fiche-vignettes a { display: block; width: 88px; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-neutral-200); box-shadow: 0 0 0 1px var(--line); }
.gat-fiche-vignettes img { width: 100%; height: auto; }

/* Sans photo : le schema des positions, sur le meme fond que le cadre photo
   pour que la colonne ne change pas de nature d'une fiche a l'autre. */
.gat-fiche-schema {
  padding: var(--space-6); border-radius: var(--radius-md);
  background: var(--color-neutral-200); box-shadow: 0 0 0 1px var(--line);
}
.gat-fiche-schema > svg { display: block; width: 100%; height: auto; max-width: 420px; margin: 0 auto var(--space-4); }
.gat-fiche-schema figcaption { font-size: 13px; color: var(--muted); }
.gat-fiche-schema figcaption strong { color: var(--ink); font-weight: 500; }

/* ─────────────────────────────────────────────── faits ── */

.gat .gat-fiche-faits-titre { margin: 0; font-family: var(--font-body); font-size: 11px; font-weight: 400; letter-spacing: .1em; line-height: 1.4; }
.gat-fiche-faits dl { margin: 0; }
.gat-fiche-faits dt { flex: none; max-width: 45%; }
.gat-fiche-faits dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.gat-fiche-faits .v.mono { font-family: var(--font-mono); font-weight: 600; letter-spacing: .04em; }
.gat-fiche-faits .v a { color: var(--link); text-decoration: none; }
.gat-fiche-faits .v a:hover { text-decoration: underline; }

/* ─────────────────────────────────────────────── doute ── */

.gat-doute {
  padding: var(--space-6) var(--space-8); border-radius: var(--radius-md);
  background: var(--color-neutral-200); box-shadow: inset 3px 0 0 var(--color-accent-600), 0 0 0 1px var(--line);
}
.gat-doute .gat-fiche-h2 .gat-fiche-ico { color: var(--color-accent-700); }
.gat-doute > p { font-size: 14px; color: var(--ink); }
.gat-doute .gat-doute-consigne { margin: var(--space-6) 0 var(--space-3); font-weight: 500; }
.gat-doute-consigne span { display: block; font-weight: 400; font-size: 13px; color: var(--muted); }

.gat-doute-question { margin: 0; padding: var(--space-4) 0; border: 0; border-top: 1px solid var(--line); min-width: 0; }
.gat-doute-question legend { float: left; width: 100%; padding: 0; margin-bottom: var(--space-3); }
.gat-doute-question legend + * { clear: both; }
.gat-doute-question legend strong { display: block; font-weight: 500; font-size: 14px; }
.gat-doute-question legend span { display: block; font-size: 13px; color: var(--muted); }
.gat-doute .seg { background: var(--color-neutral-100); max-width: 100%; flex-wrap: wrap; }
.gat-doute .seg-opt { position: relative; }
/* Le filet seul de .seg se lit mal sur le fond gris de l'encadre. */
.gat-doute .seg-opt:has(input:checked) { background: var(--color-accent-200); font-weight: 500; }
.gat-doute .seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent-600); outline-offset: -2px; }

.gat-doute-liste { margin: 0; padding-left: 1.1em; font-size: 14px; }
.gat-doute-liste li { margin-bottom: var(--space-2); color: var(--muted); }
.gat-doute-liste strong { color: var(--ink); font-weight: 500; }

.gat-doute-lien { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-6); font-size: 14px; }

/* ─────────────────────────────────────────────── actions ── */

.gat-fiche-boutons { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.gat-fiche-boutons .btn { text-align: center; }
.gat-fiche-tel { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; margin-left: var(--space-2); }
.gat-fiche-ico-wa { color: #3f8f74; }

@media (max-width: 560px) {
  .gat-fiche-boutons .btn { flex: 1 1 100%; }
}

.gat-fiche-assurance { margin: var(--space-6) 0 0; font-size: 14px; }
.gat-fiche-engagements { display: grid; gap: var(--space-2); list-style: none; margin: var(--space-4) 0 0; padding: 0; font-size: 13px; color: var(--muted); }
.gat-fiche-engagements li { display: flex; gap: var(--space-3); align-items: flex-start; }
.gat-fiche-engagements .gat-fiche-ico { width: 16px; height: 16px; margin-top: 2px; color: var(--color-accent-700); }

.gat-fiche-recalibrage {
  display: flex; gap: var(--space-3); align-items: flex-start;
  margin: var(--space-6) 0 0; padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-md); background: var(--color-accent-100);
  box-shadow: 0 0 0 1px var(--color-accent-300); font-size: 14px;
}
.gat-fiche-recalibrage .gat-fiche-ico { color: var(--color-accent-700); margin-top: 1px; }

/* ─────────────────────────────────────────────── freres ── */

.gat-fiche-freres .gat-siblings-head h2 { margin: 0; }
.gat-fiche-freres .gat-fiche-note { margin: 0; }
.gat-fiche-freres-groupe { margin-top: calc(var(--space-8) * 1.2); }
.gat .gat-fiche-freres-groupe h3 { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-3); font-size: 17px; margin: 0 0 var(--space-4); }
.gat-fiche-freres-groupe h3 .n { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.gat-fiche-freres-meme { font-family: var(--font-body); font-size: 12px; color: var(--muted); }
.gat-fiche-freres-groupe ul {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: var(--space-3); list-style: none; margin: 0; padding: 0;
}
.gat-fiche-freres-groupe a {
  display: grid; gap: 2px; height: 100%; 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-fiche-freres-groupe a:hover { box-shadow: 0 0 0 1px var(--color-accent-600); }
.gat-fiche-freres-groupe .gat-sibling-sku { overflow-wrap: anywhere; }
.gat-fiche-frere-nom { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.gat-fiche-frere-type { font-size: 12px; color: var(--color-accent-700); }

/* ─────────────────────────────────────────────── bande ── */

.gat-fiche-bande { display: grid; gap: calc(var(--space-8) * 1.2); }
.gat .gat-fiche-bande h2 { font-size: 26px; line-height: 1.15; margin: var(--space-4) 0 var(--space-3); max-width: 30ch; }
.gat-fiche-bande p { margin: 0; max-width: 60ch; }
.gat-fiche-bande-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.gat-fiche-bande-actions .btn { text-align: center; }

@media (min-width: 960px) {
  .gat-fiche-bande { grid-template-columns: 1.4fr 1fr; align-items: center; }
  .gat-fiche-bande-actions { flex-direction: column; }
}

/* ─────────────────────────────────────────────── telephone ── */

@media (max-width: 860px) {
  .gat h1.gat-fiche-titre { font-size: 26px; }
  .gat-fiche-ref { font-size: 22px; }
  .gat .gat-fiche-bande h2 { font-size: 21px; }
  .gat-doute { padding: var(--space-6); }
  .gat-fiche-bande-actions .btn { flex: 1 1 100%; }
}