/* gilet-jaune-personnalise.com (maquette de Claude du 29/09/2026, retenue par Simon).
   Direction : la signalisation routière, épurée. Béton clair, encre asphalte, jaune fluo réservé à ce qui compte
   (le gilet, l'action principale), bandes réfléchissantes en motif de microprismes. Pas de cartes ni de cadres :
   des filets, de l'espace, une typographie de panneau (Archivo étroit), un texte dessiné d'après la police des
   panneaux routiers (Overpass, zéro sans barre, lisible dans les prix) et des données en Overpass Mono. */

:root {
  --beton: #ecede9;
  --beton-clair: #f6f6f3;
  --asphalte: #15171a;
  --graphite: #4d5258;
  --trait: #cfd2cb;
  --trait-fort: #15171a24;
  --fluo: #d9f20f;
  --fluo-fonce: #a7bd00;
  --orange: #ff6a1a;
  --refl: #c7cbcf;
  --refl-motif: #b2b7bd;
  --nuit: #0d0f11;
  --nuit-2: #1b1f24;

  --titre: 'Archivo', 'Arial Narrow', sans-serif;
  --texte: 'Overpass', 'Segoe UI', sans-serif;
  --mono: 'Overpass Mono', ui-monospace, Menlo, monospace;

  --gouttiere: clamp(16px, 4vw, 48px);
  --largeur: 1320px;
  --entete: 64px;
  --rayon: 4px;
  --vite: 180ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--entete) + 16px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--beton); color: var(--asphalte);
  font-family: var(--texte); font-size: 1.0625rem; line-height: 1.6;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--titre); margin: 0; text-wrap: balance; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }

.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.evitement { position: absolute; left: 8px; top: -80px; z-index: 100; background: var(--fluo); color: var(--asphalte); padding: 8px 12px; font-weight: 700; }
.evitement:focus { top: 8px; }
:focus-visible { outline: 3px solid var(--asphalte); outline-offset: 3px; box-shadow: 0 0 0 6px var(--fluo); border-radius: 2px; }

/* ---------- Bandeau et en-tête ---------- */
.bandeau {
  background: var(--asphalte); color: #e6e7e2; text-align: center;
  font-family: var(--mono); font-size: .75rem; letter-spacing: .02em; padding: 7px var(--gouttiere);
}
.bandeau::before { content: ''; display: inline-block; width: 7px; height: 7px; background: var(--fluo); margin-right: 10px; vertical-align: 1px; }

.entete {
  position: sticky; top: 0; z-index: 40; height: var(--entete);
  display: flex; align-items: center; gap: 28px; padding: 0 var(--gouttiere);
  background: color-mix(in srgb, var(--beton) 92%, transparent); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--trait);
}
.marque { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.marque-signe { width: 28px; height: 28px; flex: none; }
.marque-texte { font-family: var(--titre); font-stretch: 72%; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .02em; line-height: 1; }
.marque-texte strong { font-weight: 850; }
.menu { display: flex; gap: 22px; }
.menu a {
  font-family: var(--titre); font-stretch: 80%; font-weight: 600; font-size: .9375rem; text-decoration: none;
  text-transform: uppercase; letter-spacing: .04em; padding: 6px 0; border-bottom: 2px solid transparent;
  transition: border-color var(--vite);
}
.menu a:hover { border-color: var(--asphalte); }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px;
  font-family: var(--titre); font-stretch: 85%; font-weight: 750; font-size: 1rem; letter-spacing: .02em;
  text-decoration: none; border-radius: var(--rayon); border: 2px solid var(--asphalte); cursor: pointer;
  transition: transform var(--vite), background-color var(--vite), color var(--vite);
}
.bouton:active { transform: translateY(1px); }
.bouton-plein { background: var(--fluo); color: var(--asphalte); border-color: var(--fluo); }
.bouton-plein:hover { background: #e6ff2a; }
.bouton-trait { background: transparent; color: var(--asphalte); }
.bouton-trait:hover { background: var(--asphalte); color: var(--beton); }
.bouton-clair { background: transparent; color: #f2f3ee; border-color: #f2f3ee88; }
.bouton-clair:hover { border-color: #fff; }
.entete-bouton { min-height: 40px; padding: 0 16px; font-size: .9375rem; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- L'atelier : ouverture, parcours et aperçu ---------- */
.atelier {
  max-width: var(--largeur); margin: 0 auto; padding: 0 var(--gouttiere);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 44%); column-gap: clamp(32px, 5vw, 80px);
  grid-template-areas: "ouverture apercu" "configurer apercu";
}
.atelier-texte { display: contents; }
.ouverture { grid-area: ouverture; padding: clamp(40px, 7vw, 96px) 0 56px; }
.configurer { grid-area: configurer; padding-bottom: 80px; }
.apercu { grid-area: apercu; align-self: start; position: sticky; top: calc(var(--entete) + 20px); padding-top: 28px; }

.surtitre { display: flex; flex-wrap: wrap; gap: 8px 18px; font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--graphite); margin-bottom: 22px; }
.surtitre span + span::before { content: '/'; margin-right: 18px; color: var(--trait); }
h1 {
  font-weight: 850; font-stretch: 66%; text-transform: uppercase; font-size: clamp(2.7rem, 6.2vw, 5.4rem);
  line-height: .9; letter-spacing: -.005em; max-width: 14ch;
}
.reponse { margin: 28px 0 32px; font-size: 1.1875rem; line-height: 1.55; max-width: 58ch; }

.fiche { width: 100%; max-width: 620px; border-collapse: collapse; margin-bottom: 32px; font-size: 1rem; }
.fiche th, .fiche td { text-align: left; vertical-align: baseline; padding: 11px 0; border-top: 1px solid var(--trait); }
.fiche tr:last-child th, .fiche tr:last-child td { border-bottom: 1px solid var(--trait); }
.fiche th { width: 36%; padding-right: 16px; font-family: var(--mono); font-weight: 400; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--graphite); }
.etiquette {
  display: inline-block; margin-left: 6px; font-family: var(--mono); font-size: .6875rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--graphite); border-bottom: 1px dashed var(--graphite); line-height: 1.3; white-space: nowrap;
}
.etiquette-ligne { margin-top: 14px; font-family: var(--mono); font-size: .75rem; color: var(--graphite); }

/* Entrée de page, une seule fois */
@media (prefers-reduced-motion: no-preference) {
  .ouverture > * { animation: monter .8s cubic-bezier(.2, .8, .2, 1) both; }
  .ouverture > :nth-child(2) { animation-delay: .06s; }
  .ouverture > :nth-child(3) { animation-delay: .14s; }
  .ouverture > :nth-child(4) { animation-delay: .22s; }
  .ouverture > :nth-child(5) { animation-delay: .3s; }
  .apercu-gilet.entree .gilet { animation: monter 1s cubic-bezier(.2, .8, .2, 1) .1s both; }
  .apercu-gilet.entree .pose { animation: poser .7s cubic-bezier(.3, 1.4, .5, 1) .75s both; transform-box: fill-box; transform-origin: center; }
  .apercu-gilet .reflet { animation: balayage 1.9s cubic-bezier(.5, 0, .3, 1) 1s both; }
}
@keyframes monter { from { opacity: 0; transform: translateY(18px); } }
@keyframes poser { from { opacity: 0; transform: scale(1.35); } }
@keyframes balayage { from { transform: translateX(0); } to { transform: translateX(700px); } }

/* ---------- Aperçu ---------- */
.apercu-scene {
  position: relative; border-radius: 2px; overflow: hidden;
  background: radial-gradient(ellipse 70% 60% at 50% 38%, #fbfbf8 0%, #eceee9 55%, #dfe1db 100%);
  padding: 28px 24px 18px; transition: background var(--vite);
}
.est-nuit .apercu-scene { background: radial-gradient(ellipse 60% 55% at 50% 40%, #252a30 0%, var(--nuit) 75%); color: #e8e9e4; }
.apercu-gilet { display: grid; place-items: center; }
.apercu-gilet .gilet { width: 100%; max-height: min(56vh, 540px); height: auto; filter: drop-shadow(0 18px 22px #15171a22); }
.est-nuit .apercu-gilet .gilet { filter: none; }
.bascules { display: flex; justify-content: center; gap: 12px; margin-top: 10px; }
.bascule { display: inline-flex; border: 1.5px solid currentColor; border-radius: var(--rayon); overflow: hidden; }
.bascule button {
  border: 0; background: transparent; padding: 8px 14px; min-height: 40px; cursor: pointer;
  font-family: var(--mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase;
}
.bascule button[aria-pressed="true"] { background: var(--asphalte); color: var(--beton); }
.est-nuit .bascule button[aria-pressed="true"] { background: #e8e9e4; color: var(--nuit); }
.apercu-mention { text-align: center; margin-top: 12px; font-family: var(--mono); font-size: .6875rem; color: var(--graphite); }
.est-nuit .apercu-mention { color: #9ea3a8; }

.recap { padding: 20px 2px 0; display: grid; gap: 4px; }
.recap-modele { font-family: var(--titre); font-weight: 700; font-stretch: 85%; font-size: 1.0625rem; }
.recap-modele span { display: block; font-family: var(--mono); font-weight: 400; font-size: .75rem; color: var(--graphite); letter-spacing: .03em; }
.recap-prix { font-family: var(--titre); font-weight: 850; font-stretch: 75%; font-size: 2.25rem; line-height: 1.1; margin-top: 8px; font-variant-numeric: tabular-nums; }
.recap-ligne { font-size: .9375rem; }
.discret { color: var(--graphite); font-size: .875rem; }
.recap-bouton { margin-top: 14px; width: 100%; }

/* ---------- Le parcours ---------- */
h2 { font-weight: 800; font-stretch: 75%; font-size: clamp(1.9rem, 3.4vw, 2.75rem); line-height: 1.02; letter-spacing: -.005em; }
.configurer h2 { padding-top: 40px; border-top: 3px solid var(--asphalte); }
.chapeau { margin: 14px 0 12px; max-width: 56ch; color: var(--graphite); font-size: 1.125rem; }
.etapes { list-style: none; margin: 0; padding: 0; }
.etape { border-top: 1px solid var(--trait); padding: 30px 0 34px; }
.etape fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 14px; }
.etape legend { padding: 0; margin-bottom: 4px; font-family: var(--titre); font-weight: 750; font-stretch: 85%; font-size: 1.4rem; line-height: 1.2; }
.num { display: inline-block; min-width: 2.2em; font-family: var(--mono); font-weight: 500; font-size: .8125rem; color: var(--graphite); vertical-align: 3px; }
.aide { color: var(--graphite); max-width: 60ch; }
.aide.petite { font-size: .9375rem; }
.lien-discret { font-size: .9375rem; text-decoration-thickness: 1px; text-underline-offset: 3px; color: var(--graphite); }
.norme-ligne { font-family: var(--mono); font-size: .8125rem; line-height: 1.5; padding-left: 14px; border-left: 3px solid var(--fluo-fonce); max-width: 62ch; }

.pastilles { display: flex; flex-wrap: wrap; gap: 8px; }
.choix { position: relative; }
.choix input, .modele input, .teinte input, .encre input { position: absolute; opacity: 0; pointer-events: none; }
.choix span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--rayon);
  border: 1.5px solid var(--trait-fort); background: var(--beton-clair); cursor: pointer; font-size: 1rem;
  transition: background-color var(--vite), border-color var(--vite), color var(--vite);
}
.choix.petit span { min-height: 40px; padding: 0 13px; font-size: .9375rem; }
.choix span:hover { border-color: var(--asphalte); }
.choix input:checked + span { background: var(--asphalte); border-color: var(--asphalte); color: var(--beton); }
.choix input:focus-visible + span, .modele input:focus-visible ~ .modele-dessin, .teinte input:focus-visible + span, .encre input:focus-visible + span { outline: 3px solid var(--asphalte); outline-offset: 3px; box-shadow: 0 0 0 6px var(--fluo); }

.modeles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.modele { display: grid; gap: 4px; cursor: pointer; position: relative; }
.modele-dessin { display: block; padding: 10px 8px 12px; border-bottom: 4px solid transparent; transition: border-color var(--vite), transform var(--vite); }
.modele:hover .modele-dessin { transform: translateY(-2px); }
.modele input:checked ~ .modele-dessin { border-color: var(--asphalte); }
.modele-dessin .gilet { width: 100%; height: auto; }
.modele-nom { font-family: var(--titre); font-weight: 700; font-stretch: 85%; font-size: 1rem; line-height: 1.2; }
.modele-info { font-family: var(--mono); font-size: .6875rem; color: var(--graphite); line-height: 1.4; }
.couleurs { display: grid; gap: 16px; margin-top: 6px; }
.couleurs-groupe { display: grid; gap: 8px; }
.teintes { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.teinte { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: .9375rem; position: relative; }
.teinte-pastille { width: 28px; height: 28px; border-radius: 50%; background: var(--teinte); border: 2px solid var(--beton); box-shadow: 0 0 0 1.5px var(--trait-fort); flex: none; }
.teinte input:checked + .teinte-pastille { box-shadow: 0 0 0 2px var(--asphalte); }
#teintes-identification .teinte-nom { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.teinte.inactive { cursor: not-allowed; }
.teinte.inactive .teinte-pastille { opacity: .38; }
#note-identification { color: var(--asphalte); }

.groupe { display: grid; gap: 8px; margin-bottom: 6px; }
.groupe-nom { font-family: var(--mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--graphite); }
.zone-reglage { display: grid; gap: 12px; padding-top: 18px; margin-top: 6px; border-top: 1px dashed var(--trait-fort); }
.zone-titre { font-family: var(--titre); font-weight: 750; font-stretch: 85%; font-size: 1.125rem; }
.zone-titre span { font-family: var(--mono); font-weight: 400; font-size: .75rem; color: var(--graphite); margin-left: 8px; text-transform: uppercase; letter-spacing: .06em; }
.zone-max { font-family: var(--mono); font-size: .75rem; color: var(--graphite); }
.depot {
  display: grid; gap: 2px; padding: 16px 18px; border: 1.5px dashed #15171a66; border-radius: var(--rayon);
  background: var(--beton-clair); cursor: pointer;
}
.depot-fichier { font-family: var(--mono); font-size: .875rem; font-weight: 500; }
.depot-fichier::before { content: '✓'; margin-right: 8px; color: var(--fluo-fonce); font-weight: 700; }
.depot-aide { font-size: .875rem; color: var(--graphite); }
.case { display: inline-flex; align-items: center; gap: 10px; font-size: 1rem; cursor: pointer; min-height: 32px; }
.case input { width: 20px; height: 20px; accent-color: var(--asphalte); }

.champ { display: grid; gap: 4px; }
.champ > span { font-size: .8125rem; color: var(--graphite); }
.champ input, .champ select, .champ textarea {
  width: 100%; min-height: 46px; padding: 10px 2px; background: transparent; border: 0;
  border-bottom: 1.5px solid var(--asphalte); border-radius: 0; font-size: 1rem;
}
.champ textarea { resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-bottom-color: var(--fluo-fonce); box-shadow: 0 2px 0 var(--fluo-fonce); }
.encres-ligne { display: grid; gap: 8px; }
.encres-titre { font-size: .8125rem; color: var(--graphite); }
.encres { display: flex; gap: 10px; }
.encre { position: relative; cursor: pointer; }
.encre span:not(.visuellement-cache) { display: block; width: 32px; height: 32px; border-radius: 50%; background: var(--encre); border: 2px solid var(--beton); box-shadow: 0 0 0 1.5px var(--trait-fort); }
.encre input:checked + span { box-shadow: 0 0 0 2px var(--asphalte); }

.tailles { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px 18px; }
.taille { display: grid; gap: 4px; }
.taille span { font-family: var(--mono); font-size: .8125rem; font-weight: 500; }
.taille input { width: 100%; min-height: 46px; padding: 8px 10px; border: 1.5px solid var(--trait-fort); border-radius: var(--rayon); background: var(--beton-clair); font-family: var(--mono); font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.total { font-family: var(--titre); font-weight: 750; font-stretch: 85%; font-size: 1.125rem; }
.depliant summary { cursor: pointer; font-size: .9375rem; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; width: fit-content; }
.depliant[open] summary { margin-bottom: 10px; }
.depliant textarea { width: 100%; padding: 10px; border: 1.5px solid var(--trait-fort); border-radius: var(--rayon); background: var(--beton-clair); font-family: var(--mono); font-size: .9375rem; }

.prix-grand { font-family: var(--titre); font-weight: 850; font-stretch: 75%; font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1; font-variant-numeric: tabular-nums; }
.prix-ligne { font-size: 1rem; }
.prix-ligne.accent { justify-self: start; background: var(--fluo); padding: 4px 10px; font-weight: 700; }
.detail { border-collapse: collapse; width: 100%; max-width: 460px; font-size: .9375rem; }
.detail th, .detail td { text-align: left; padding: 7px 0; border-top: 1px solid var(--trait); font-weight: 400; }
.detail td { text-align: right; font-family: var(--mono); font-size: .875rem; white-space: nowrap; }

.formulaire { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
.formulaire .large { grid-column: 1 / -1; }

/* ---------- Bande réfléchissante, séparateur signature ---------- */
.bande-reflechissante {
  height: 22px; margin: 0;
  background: repeating-linear-gradient(125deg, var(--refl) 0 3px, var(--refl-motif) 3px 5px);
  position: relative; overflow: hidden;
}
@media (prefers-reduced-motion: no-preference) {
  .bande-reflechissante::after {
    content: ''; position: absolute; inset: 0; width: 30%;
    background: linear-gradient(90deg, transparent, #ffffffcc, transparent);
    animation: phare 5.5s cubic-bezier(.5, 0, .3, 1) infinite;
  }
}
@keyframes phare { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(420%); } }

/* ---------- Sections de contenu ---------- */
.contenu { max-width: var(--largeur); margin: 0 auto; padding: clamp(56px, 8vw, 104px) var(--gouttiere) 0; }
.contenu + .contenu { border-top: 0; }
.contenu > h2 { max-width: 22ch; margin-bottom: 20px; }
.contenu h3 { font-weight: 750; font-stretch: 85%; font-size: 1.3125rem; line-height: 1.2; margin: 34px 0 10px; }
.intro, .texte-large { max-width: 70ch; font-size: 1.125rem; }
.colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px clamp(32px, 5vw, 72px); }
.colonnes.trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.colonnes p { max-width: 62ch; }
.a-venir { margin-top: 12px; font-family: var(--mono); font-size: .8125rem; color: var(--graphite); }
.legende { margin-top: 10px; font-family: var(--mono); font-size: .75rem; color: var(--graphite); }
.reassurance { margin-top: 26px; max-width: 70ch; font-size: 1rem; padding-left: 14px; border-left: 3px solid var(--asphalte); }

.tableau-defile { overflow-x: auto; margin-top: 30px; -webkit-overflow-scrolling: touch; }
.tableau { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .9875rem; }
.tableau caption { text-align: left; font-family: var(--mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--graphite); padding-bottom: 10px; }
.tableau thead th, .tableau thead td { text-align: left; font-family: var(--mono); font-weight: 400; font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; color: var(--graphite); padding: 0 16px 10px 0; border-bottom: 2px solid var(--asphalte); }
.tableau tbody th, .tableau tbody td { text-align: left; vertical-align: top; padding: 13px 16px 13px 0; border-bottom: 1px solid var(--trait); }
.tableau tbody th { font-family: var(--titre); font-weight: 700; font-stretch: 85%; font-size: 1rem; }
.tableau.chiffres td { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: .9375rem; }
.tableau.chiffres thead th:not(:first-child) { font-family: var(--titre); font-stretch: 80%; font-weight: 800; font-size: 1.125rem; color: var(--asphalte); letter-spacing: 0; text-transform: none; }

/* Classes : barres à l'échelle des surfaces minimales (0,80 m² = 100 %) */
.classes { display: grid; gap: 10px; margin-top: 22px; max-width: 620px; }
.classe { display: grid; grid-template-columns: 46px 1fr; grid-template-rows: auto auto; column-gap: 14px; row-gap: 4px; align-items: center; }
.classe-num { grid-row: 1 / 3; font-family: var(--titre); font-weight: 850; font-stretch: 70%; font-size: 2.6rem; line-height: 1; }
.barre { height: 12px; width: calc(var(--v) / .8 * 100%); border-radius: 1px; }
.barre.fluo, .puce.fluo { background: var(--fluo); }
.barre.refl, .puce.refl { background: repeating-linear-gradient(125deg, var(--refl) 0 3px, var(--refl-motif) 3px 5px); }
.classes-legende { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: .75rem; color: var(--graphite); padding-left: 60px; }
.puce { display: inline-block; width: 18px; height: 10px; }
.puce.refl { margin-left: 12px; }

.schema { display: grid; grid-template-columns: repeat(2, minmax(0, 300px)); gap: 32px; margin-top: 26px; }
.schema figure { margin: 0; }
.schema figcaption { text-align: center; font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--graphite); margin-top: 6px; }

.frise { list-style: none; margin: 30px 0 8px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: frise; }
.frise li { counter-increment: frise; padding: 16px 20px 0 0; border-top: 3px solid var(--asphalte); display: grid; gap: 6px; }
.frise li:nth-child(even) { border-top-color: var(--fluo-fonce); }
.frise li::before { content: counter(frise, decimal-leading-zero); font-family: var(--titre); font-weight: 850; font-stretch: 70%; font-size: 2.2rem; line-height: 1; }
.frise-qui { font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--graphite); }
.frise-quoi { font-size: 1rem; max-width: 26ch; }

.galerie { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px clamp(32px, 5vw, 72px); margin-top: 26px; }
.galerie figure { margin: 0; display: grid; gap: 12px; }
.paire { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 22px 18px; background: radial-gradient(ellipse 80% 70% at 50% 45%, #f8f8f5, #e4e6e1); }
.paire .gilet { width: 100%; height: auto; }
.galerie figcaption { font-size: 1rem; color: var(--graphite); }
.galerie figcaption h3 { margin: 0 0 4px; color: var(--asphalte); }

.faq { margin-top: 18px; max-width: 900px; }
.faq details { border-top: 1px solid var(--trait); }
.faq details:last-child { border-bottom: 1px solid var(--trait); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { margin: 0; font-size: 1.1875rem; }
.faq summary::after { content: ''; flex: none; width: 14px; height: 14px; background: linear-gradient(var(--asphalte), var(--asphalte)) center / 100% 2px no-repeat, linear-gradient(var(--asphalte), var(--asphalte)) center / 2px 100% no-repeat; transition: transform var(--vite); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 22px; max-width: 70ch; }

/* ---------- Appel final, de nuit ---------- */
.final {
  margin-top: clamp(64px, 9vw, 120px); background: radial-gradient(ellipse 50% 70% at 75% 50%, #20252b 0%, var(--nuit) 70%);
  color: #eef0ea; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center;
  gap: 32px; padding: clamp(56px, 7vw, 96px) max(var(--gouttiere), calc((100vw - var(--largeur)) / 2 + var(--gouttiere)));
}
.final h2 { font-stretch: 66%; font-weight: 850; text-transform: uppercase; font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: .92; max-width: 13ch; }
.final p { margin-top: 18px; max-width: 48ch; font-size: 1.125rem; color: #c9ccc6; }
.final .actions { margin-top: 28px; }
.final-gilet .gilet { width: 100%; max-width: 380px; margin: 0 auto; height: auto; }

/* ---------- Pied de page ---------- */
.pied { background: var(--nuit); color: #aeb2b6; padding: 28px var(--gouttiere) 40px; display: grid; gap: 8px; font-size: .9375rem; border-top: 1px solid #ffffff14; }
.pied > * { max-width: var(--largeur); width: 100%; margin: 0 auto; }
.pied strong { color: #eef0ea; }
.pied a { text-underline-offset: 3px; }
.pied-mention { font-family: var(--mono); font-size: .75rem; }

/* ---------- Barre de prix mobile ---------- */
.barre-mobile { display: none; }

/* ---------- Adaptations ---------- */
@media (max-width: 1080px) {
  .menu { display: none; }
  .modeles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .atelier { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ouverture" "apercu" "configurer"; }
  .apercu { position: static; padding-top: 0; margin-bottom: 40px; }
  .recap { display: none; }
  .apercu-gilet .gilet { max-height: 420px; }
  .colonnes, .colonnes.trois { grid-template-columns: minmax(0, 1fr); }
  .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .frise { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
  .final { grid-template-columns: minmax(0, 1fr); }
  .final-gilet { order: -1; }
  .final-gilet .gilet { max-width: 260px; }
  .barre-mobile {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--asphalte); color: #eef0ea;
    padding: 10px var(--gouttiere) calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .barre-prix { font-family: var(--titre); font-weight: 850; font-stretch: 75%; font-size: 1.375rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
  .barre-total { font-size: .8125rem; color: #b9bdb6; }
  .barre-mobile .bouton { min-height: 44px; padding: 0 16px; }
  body { padding-bottom: 76px; }
}
@media (max-width: 560px) {
  .entete-bouton { display: none; }
  .formulaire { grid-template-columns: minmax(0, 1fr); }
  .schema { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .frise { grid-template-columns: minmax(0, 1fr); }
  .paire { padding: 14px 10px; }
  .fiche th { width: 40%; }
}

/* Retouches mobile (29/09/2026) */
@media (max-width: 960px) {
  .barre-mobile > div { min-width: 0; }
  .barre-mobile .bouton { white-space: nowrap; font-size: .9375rem; padding: 0 14px; flex: none; }
  .barre-total { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 560px) {
  .surtitre { flex-direction: column; gap: 2px; }
  .surtitre span + span::before { content: none; }
}

@media (max-width: 560px) { .galerie { grid-template-columns: minmax(0, 1fr); } }

/* Très petits écrans (moins de 380 px) */
@media (max-width: 380px) {
  .bascules { flex-wrap: wrap; gap: 8px; }
  .bascule button { padding: 8px 10px; letter-spacing: .02em; }
  .barre-prix { font-size: 1.125rem; white-space: nowrap; }
  .barre-mobile .bouton { font-size: .875rem; padding: 0 12px; }
  .marque-texte { font-size: 1rem; }
}
.classe { grid-template-columns: 46px minmax(0, 1fr); }
.classes-legende { flex-wrap: wrap; }
@media (max-width: 380px) { .classes-legende { padding-left: 0; } }

/* Parcours interactif (étape 2, 29/09/2026) */
.bouton-lien { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
button.prix-ligne.accent { border: 0; cursor: pointer; font: inherit; font-weight: 700; color: var(--asphalte); text-align: left; }
button.prix-ligne.accent:hover { background: #e6ff2a; }
button.prix-ligne.accent::after { content: ' →'; }
.alerte { font-size: .9375rem; padding: 8px 12px; border-left: 3px solid var(--orange); background: #ff6a1a14; max-width: 60ch; }
.depot.survol { border-color: var(--asphalte); background: #d9f20f33; }
.depot:not(.a-fichier) .depot-aide { font-size: .9375rem; color: var(--asphalte); }
.depot-erreur { font-size: .875rem; color: #b3261e; font-weight: 600; }
.zone-reglage + .zone-reglage { margin-top: 4px; }
.modele-dessin .gilet, .apercu-gilet .gilet { transition: opacity var(--vite); }

/* Formulaire de devis (29/09/2026) */
.piege { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formulaire-etat { font-size: 1rem; padding: 10px 14px; border-left: 3px solid var(--fluo-fonce); background: #d9f20f22; }
.formulaire-etat.erreur { border-left-color: #b3261e; background: #b3261e12; }
.bouton:disabled { opacity: .55; cursor: wait; }

/* Place réservée aux lignes remplies par le script (pas de décalage à l'arrivée des prix) */
.recap-ligne.discret { min-height: 1.5em; }
.apercu-gilet { aspect-ratio: 400 / 480; max-height: min(56vh, 540px); margin-inline: auto; }

/* Pages légales et 404 (29/09/2026) */
.legal { max-width: 820px; margin: 0 auto; padding: clamp(40px, 7vw, 88px) var(--gouttiere) 72px; }
.legal h1 { font-weight: 850; font-stretch: 66%; text-transform: uppercase; font-size: clamp(2.4rem, 5vw, 3.8rem); line-height: .95; }
.legal-chapeau { margin-top: 16px; font-size: 1.1875rem; max-width: 60ch; }
.legal-chapeau .bouton { margin-top: 24px; display: flex; width: fit-content; }
.legal-date { margin-top: 8px; font-family: var(--mono); font-size: .75rem; color: var(--graphite); }
.legal section { padding-top: 34px; }
.legal h2 { font-size: 1.5rem; padding-top: 18px; border-top: 1px solid var(--trait); margin-bottom: 12px; }
.legal p, .legal li { max-width: 70ch; }
.legal p + p, .legal ul, .legal dl { margin-top: 12px; }
.legal ul { padding-left: 1.2em; display: grid; gap: 8px; }
.legal-fiche { display: grid; gap: 0; margin: 12px 0 0; }
.legal-fiche > div { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--trait); }
.legal-fiche dt { font-family: var(--mono); font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; color: var(--graphite); padding-top: 3px; }
.legal-fiche dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .legal-fiche > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }