/* gilet-securite-personnalise.com (29/09/2026), design conçu avec UI/UX Pro Max.
   Direction : le nuancier. Page blanche, grille suisse à 12 colonnes, typographie exagérée (Bricolage Grotesque pour les
   titres, Instrument Sans pour le texte et les chiffres), aucun décor. La seule couleur vient des gilets : la variable
   --teinte suit la couleur choisie dans le nuancier et teinte la scène, les repères et les accents de la page.
   Boutons noirs en pilule, filets fins, rayons généreux sur les seules surfaces qui portent un gilet. */

:root {
  --blanc: #ffffff;
  --encre: #0e1116;
  --gris: #555b68;
  --gris-clair: #8a909b;
  --filet: #e5e7eb;
  --surface: #f4f5f7;
  --teinte: #d9f20f;
  --champ: color-mix(in srgb, var(--teinte) 28%, #ffffff);

  --titre: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --texte: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;

  --largeur: 1280px;
  --gouttiere: clamp(20px, 4vw, 56px);
  --entete: 72px;
  --doux: cubic-bezier(.22, 1, .36, 1);
  --vite: 200ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--entete) + 12px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--blanc); color: var(--encre); font-family: var(--texte); font-size: 1.0625rem; line-height: 1.6; font-variant-numeric: tabular-nums; -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; font-optical-sizing: auto; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--encre); outline-offset: 3px; border-radius: 6px; }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.evitement { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--encre); color: #fff; padding: 10px 14px; border-radius: 999px; }
.evitement:focus { top: 12px; }

/* ---------- En-tête ---------- */
.entete { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, #fff 90%, transparent); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--filet); }
.entete-dedans { max-width: var(--largeur); margin: 0 auto; height: var(--entete); padding: 0 var(--gouttiere); display: flex; align-items: center; gap: 32px; }
.marque { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.marque-signe { width: 34px; height: 34px; flex: none; }
.marque-texte { font-family: var(--titre); font-weight: 700; font-size: 1.125rem; letter-spacing: -.01em; }
.marque-texte em { font-style: normal; font-weight: 400; color: var(--gris); }
.menu { display: flex; gap: 26px; }
.menu a { font-weight: 500; font-size: .9375rem; text-decoration: none; padding: 6px 0; background: linear-gradient(var(--encre), var(--encre)) 0 100% / 0 1.5px no-repeat; transition: background-size var(--vite) var(--doux); }
.menu a:hover { background-size: 100% 1.5px; }

/* ---------- Boutons ---------- */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; font-weight: 600; font-size: 1rem; text-decoration: none; cursor: pointer; border: 1.5px solid var(--encre); transition: background-color var(--vite), color var(--vite), transform var(--vite) var(--doux); }
.bouton:active { transform: scale(.98); }
.bouton-noir { background: var(--encre); color: #fff; }
.bouton-noir:hover { background: #262b34; }
.bouton-contour { background: transparent; color: var(--encre); }
.bouton-contour:hover { background: var(--encre); color: #fff; }
.bouton:disabled { opacity: .55; cursor: wait; }
.entete-bouton { min-height: 42px; padding: 0 18px; font-size: .9375rem; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Ouverture ---------- */
.ouverture { max-width: var(--largeur); margin: 0 auto; padding: clamp(40px, 6vw, 88px) var(--gouttiere) clamp(56px, 7vw, 104px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 40px); align-items: center; }
.ouverture-texte { grid-column: 1 / 8; display: grid; gap: 26px; }
.ouverture-scene { grid-column: 8 / 13; margin: 0; }
.surtitre { display: flex; align-items: center; gap: 10px; font-size: .875rem; font-weight: 500; color: var(--gris); }
.pastille-teinte { width: 11px; height: 11px; border-radius: 50%; background: var(--teinte); box-shadow: 0 0 0 1px #0e111622; transition: background-color .5s var(--doux); }
.titre-geant { font-weight: 800; font-size: clamp(2.7rem, 6vw, 5.6rem); line-height: .95; letter-spacing: -.035em; max-width: 14ch; }
.reponse { font-size: 1.1875rem; line-height: 1.55; max-width: 56ch; color: #1d222b; }
.essentiel { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--filet); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.essentiel li { display: grid; gap: 2px; }
.essentiel li > span { font-size: .8125rem; color: var(--gris); }
.essentiel strong { font-family: var(--titre); font-weight: 650; font-size: 1.0625rem; letter-spacing: -.01em; }
.ouverture-scene { position: relative; width: 100%; aspect-ratio: 4 / 5; border-radius: 32px; background: var(--champ); display: grid; place-items: center; overflow: hidden; transition: background-color .6s var(--doux); }
.scene-gilet { width: 78%; }
.scene-gilet .gilet { width: 100%; height: auto; filter: drop-shadow(0 24px 30px #0e111626); }
.scene-legende { position: absolute; left: 22px; right: 22px; bottom: 20px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.scene-nom { font-family: var(--titre); font-weight: 700; font-size: 1.25rem; letter-spacing: -.01em; }
.scene-statut { font-size: .8125rem; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: #ffffffcc; }
.scene-statut.est-certifie::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #1f9d55; margin-right: 7px; vertical-align: 1px; }

/* ---------- Blocs éditoriaux (grille 4 + 8) ---------- */
.bloc, .nuancier { max-width: var(--largeur); margin: 0 auto; padding: clamp(64px, 8vw, 112px) var(--gouttiere); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px clamp(20px, 3vw, 40px); border-top: 1px solid var(--filet); }
.bloc-tete { grid-column: 1 / 5; align-self: start; position: sticky; top: calc(var(--entete) + 28px); display: grid; gap: 14px; }
.bloc-corps { grid-column: 5 / 13; display: grid; gap: 18px; min-width: 0; }
.index { display: flex; align-items: center; gap: 10px; font-size: .8125rem; font-weight: 600; color: var(--gris); letter-spacing: .04em; }
.index::before { content: ''; width: 22px; height: 3px; border-radius: 3px; background: var(--teinte); box-shadow: 0 0 0 .5px #0e111620; transition: background-color .5s var(--doux); }
h2 { font-weight: 700; font-size: clamp(1.9rem, 3.2vw, 2.9rem); line-height: 1.02; letter-spacing: -.028em; }
h3 { font-weight: 650; font-size: 1.3125rem; line-height: 1.2; letter-spacing: -.015em; margin-top: 18px; }
.bloc-corps p { max-width: 66ch; }
.intro { font-size: 1.1875rem; color: #1d222b; max-width: 58ch; }
.legende { font-size: .875rem; color: var(--gris); }
.liste { list-style: none; margin: 0; padding: 0; display: grid; }
.liste li { padding: 14px 0; border-top: 1px solid var(--filet); max-width: 70ch; }
.liste li:last-child { border-bottom: 1px solid var(--filet); }

/* ---------- Nuancier ---------- */
.echantillons { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 10px; margin-top: 12px; padding-top: 14px; }
.echantillon { display: grid; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; transition: transform .35s var(--doux); }
.echantillon-tissu { display: block; height: 136px; border-radius: 12px; background: var(--c); box-shadow: inset 0 0 0 1px #0e111614; position: relative; overflow: hidden; }
.echantillon.certifie .echantillon-tissu::after { content: ''; position: absolute; left: 0; right: 0; top: 58%; height: 18px; background: repeating-linear-gradient(125deg, #cfd3d8 0 3px, #b6bbc2 3px 5px); box-shadow: 0 30px 0 #c5c9ce; }
.echantillon-nom { font-weight: 600; font-size: .8125rem; line-height: 1.2; min-height: 2.4em; }
.echantillon-statut { font-size: .6875rem; color: var(--gris); }
.echantillon:hover { transform: translateY(-4px); }
.echantillon[aria-checked="true"] { transform: translateY(-12px); }
.echantillon[aria-checked="true"] .echantillon-tissu { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--encre), 0 14px 24px #0e111626; }
.signification { margin-top: 8px; font-size: 1.0625rem; padding: 14px 18px; border-radius: 14px; background: var(--champ); max-width: 70ch; transition: background-color .6s var(--doux); }

/* ---------- Tableaux ---------- */
.tableau-defile { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 6px; }
.tableau { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .9875rem; }
.tableau caption { text-align: left; font-size: .8125rem; color: var(--gris); padding-bottom: 10px; }
.tableau thead th { text-align: left; font-weight: 600; font-size: .8125rem; color: var(--gris); padding: 0 16px 10px 0; border-bottom: 1.5px solid var(--encre); }
.tableau tbody th, .tableau tbody td { text-align: left; vertical-align: top; padding: 13px 16px 13px 0; border-bottom: 1px solid var(--filet); }
.tableau tbody th { font-weight: 600; white-space: nowrap; }
.tableau.chiffres td { font-variant-numeric: tabular-nums; }
.tableau.chiffres thead th:not(:first-child) { color: var(--encre); font-family: var(--titre); font-size: 1.0625rem; }
.puce { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--c); margin-right: 10px; vertical-align: -1px; box-shadow: inset 0 0 0 1px #0e111620; }

/* ---------- Atelier (parcours) ---------- */
.atelier { background: var(--surface); border-top: 1px solid var(--filet); }
.atelier-tete, .atelier-grille { max-width: var(--largeur); margin: 0 auto; padding-inline: var(--gouttiere); }
.atelier-tete { padding-top: clamp(64px, 8vw, 112px); display: grid; gap: 14px; max-width: calc(var(--largeur)); }
.atelier-tete .intro { margin-top: 4px; }
.atelier-grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 40px); padding-top: 40px; padding-bottom: clamp(64px, 8vw, 112px); }
.apercu { grid-column: 1 / 6; align-self: start; position: sticky; top: calc(var(--entete) + 20px); display: grid; gap: 16px; }
.apercu-scene { border-radius: 28px; background: var(--champ); padding: 26px 22px 18px; display: grid; gap: 12px; transition: background-color .6s var(--doux); }
.apercu-gilet { display: grid; place-items: center; aspect-ratio: 400 / 480; max-height: min(52vh, 500px); margin-inline: auto; width: 100%; }
.apercu-gilet .gilet { width: 100%; height: auto; max-height: min(52vh, 500px); filter: drop-shadow(0 20px 26px #0e111622); }
.bascule { justify-self: center; display: inline-flex; padding: 4px; border-radius: 999px; background: #ffffffb0; }
.bascule button { border: 0; background: transparent; padding: 8px 18px; min-height: 38px; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: .875rem; }
.bascule button[aria-pressed="true"] { background: var(--encre); color: #fff; }
.recap { background: #fff; border-radius: 22px; padding: 20px 22px; display: grid; gap: 4px; }
.recap-modele { font-family: var(--titre); font-weight: 650; font-size: 1.0625rem; }
.recap-modele span { display: block; font-family: var(--texte); font-weight: 400; font-size: .875rem; color: var(--gris); }
.recap-prix { font-family: var(--titre); font-weight: 800; font-size: 2.2rem; letter-spacing: -.03em; line-height: 1.1; margin-top: 8px; }
.recap-ligne { font-size: .9375rem; }
.recap-ligne.discret { min-height: 1.5em; }
.discret { color: var(--gris); font-size: .875rem; }
.recap-bouton { margin-top: 12px; }
.mention { font-size: .8125rem; color: var(--gris); }

.etapes { grid-column: 6 / 13; list-style: none; margin: 0; padding: 0; display: grid; }
.etape { padding: 28px 0 32px; border-top: 1px solid #dfe2e7; }
.etape:first-child { border-top: 0; padding-top: 0; }
.etape fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 14px; }
.etape legend { padding: 0; margin-bottom: 4px; display: flex; align-items: center; gap: 12px; font-family: var(--titre); font-weight: 650; font-size: 1.4rem; letter-spacing: -.015em; }
.num { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--encre); color: #fff; font-family: var(--texte); font-size: .875rem; font-weight: 600; flex: none; }
.aide { color: var(--gris); max-width: 62ch; }
.aide.petite { font-size: .9375rem; }
.norme-ligne { font-size: .9375rem; padding: 10px 14px; border-radius: 12px; background: #fff; max-width: 64ch; }
.norme-ligne:empty { display: none; }
.lien-bouton, .lien-discret, .bouton-lien { background: none; border: 0; padding: 0; cursor: pointer; font-size: .9375rem; color: var(--gris); text-decoration: underline; text-underline-offset: 3px; }
.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 18px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px #dfe2e7; cursor: pointer; font-weight: 500; transition: box-shadow var(--vite), background-color var(--vite), color var(--vite); }
.choix.petit span { min-height: 40px; padding: 0 15px; font-size: .9375rem; }
.choix span:hover { box-shadow: inset 0 0 0 1.5px var(--encre); }
.choix input:checked + span { background: var(--encre); color: #fff; box-shadow: none; }
.choix input:focus-visible + span, .teinte input:focus-visible + span, .encre input:focus-visible + span, .modele input:focus-visible ~ .modele-dessin { outline: 3px solid var(--encre); outline-offset: 3px; }
.modeles { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; }
.modele { display: grid; gap: 4px; cursor: pointer; }
.modele-dessin { display: block; padding: 14px 12px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow var(--vite), transform var(--vite) var(--doux); }
.modele:hover .modele-dessin { transform: translateY(-3px); }
.modele input:checked ~ .modele-dessin { box-shadow: inset 0 0 0 2px var(--encre); }
.modele-dessin .gilet { width: 100%; height: auto; }
.modele-nom { font-weight: 600; font-size: .9375rem; line-height: 1.25; }
.modele-info { font-size: .75rem; color: var(--gris); line-height: 1.35; }
.couleurs { display: grid; gap: 16px; }
.couleurs-groupe { display: grid; gap: 8px; }
.groupe-nom { font-size: .8125rem; font-weight: 600; color: var(--gris); }
.teintes { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.teinte { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: .9375rem; }
.teinte-pastille { width: 32px; height: 32px; border-radius: 50%; background: var(--teinte); box-shadow: inset 0 0 0 1px #0e111626; flex: none; }
.teinte input:checked + .teinte-pastille { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--encre); }
#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: .3; }
.groupe { display: grid; gap: 8px; margin-bottom: 6px; }
.zone-reglage { display: grid; gap: 12px; padding: 18px; border-radius: 18px; background: #fff; }
.zone-reglage + .zone-reglage { margin-top: 10px; }
.zone-titre { font-family: var(--titre); font-weight: 650; font-size: 1.125rem; }
.zone-titre span { font-family: var(--texte); font-weight: 500; font-size: .8125rem; color: var(--gris); margin-left: 6px; }
.zone-max { font-size: .8125rem; color: var(--gris); }
.depot { display: grid; gap: 4px; padding: 18px; border-radius: 14px; border: 1.5px dashed #c9cdd4; cursor: pointer; background: var(--surface); transition: border-color var(--vite), background-color var(--vite); }
.depot:hover, .depot.survol { border-color: var(--encre); background: var(--champ); }
.depot-fichier { font-weight: 600; }
.depot-fichier::before { content: '✓ '; }
.depot-aide { font-size: .9375rem; }
.depot-erreur { font-size: .875rem; color: #b3261e; font-weight: 600; }
.case { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; min-height: 32px; }
.case input { width: 20px; height: 20px; accent-color: var(--encre); }
.champ { display: grid; gap: 6px; }
.champ > span { font-size: .875rem; font-weight: 500; }
.champ input, .champ select, .champ textarea { width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 12px; border: 1.5px solid #dfe2e7; background: #fff; font-size: 1rem; transition: border-color var(--vite); }
.champ textarea { resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--encre); }
.encres-ligne { display: grid; gap: 8px; }
.encres-titre { font-size: .875rem; font-weight: 500; }
.encres { display: flex; flex-wrap: wrap; gap: 10px; }
.encre { position: relative; cursor: pointer; }
.encre span:not(.visuellement-cache) { display: block; width: 32px; height: 32px; border-radius: 50%; background: var(--encre); box-shadow: inset 0 0 0 1px #0e111626; }
.encre input:checked + span { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0e1116; }
.tailles { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px 14px; }
.taille { display: grid; gap: 4px; }
.taille span { font-size: .875rem; font-weight: 600; }
.taille input { width: 100%; min-height: 48px; padding: 8px 12px; border-radius: 12px; border: 1.5px solid #dfe2e7; background: #fff; font-size: 1.0625rem; }
.taille input:focus { outline: none; border-color: var(--encre); }
.total { font-family: var(--titre); font-weight: 650; font-size: 1.125rem; }
.alerte { font-size: .9375rem; padding: 10px 14px; border-radius: 12px; background: #fff1e8; }
.depliant summary { cursor: pointer; font-size: .9375rem; color: var(--gris); text-decoration: underline; text-underline-offset: 3px; width: fit-content; }
.depliant[open] summary { margin-bottom: 10px; }
.depliant textarea { width: 100%; padding: 12px; border-radius: 12px; border: 1.5px solid #dfe2e7; background: #fff; }
.prix-grand { font-family: var(--titre); font-weight: 800; font-size: clamp(2.2rem, 4vw, 3.2rem); letter-spacing: -.03em; line-height: 1; }
.prix-ligne { font-size: 1rem; }
button.prix-ligne.accent { justify-self: start; border: 0; cursor: pointer; font: inherit; font-weight: 600; padding: 8px 14px; border-radius: 999px; background: var(--champ); color: var(--encre); box-shadow: inset 0 0 0 1.5px var(--encre); }
button.prix-ligne.accent::after { content: ' →'; }
.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 #dfe2e7; font-weight: 400; }
.detail td { text-align: right; white-space: nowrap; }
.formulaire { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.formulaire .large { grid-column: 1 / -1; }
.formulaire-etat { padding: 12px 16px; border-radius: 12px; background: #fff; box-shadow: inset 3px 0 0 #1f9d55; }
.formulaire-etat.erreur { box-shadow: inset 3px 0 0 #b3261e; }
.piege { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Usages, frise, FAQ ---------- */
.usages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.usages > div { padding: 18px 0; border-top: 1px solid var(--filet); }
.usages h3 { margin-top: 0; margin-bottom: 6px; font-size: 1.1875rem; }
.frise { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: frise; }
.frise li { counter-increment: frise; display: grid; gap: 6px; padding-top: 16px; border-top: 3px solid var(--encre); }
.frise li::before { content: counter(frise); font-family: var(--titre); font-weight: 800; font-size: 2.4rem; line-height: 1; letter-spacing: -.03em; }
.frise strong { font-family: var(--titre); font-weight: 650; font-size: 1.0625rem; }
.frise li > span { color: var(--gris); font-size: .9375rem; }
.faq { gap: 0; }
.faq details { border-top: 1px solid var(--filet); }
.faq details:last-child { border-bottom: 1px solid var(--filet); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { margin: 0; font-size: 1.1875rem; }
.faq summary::after { content: ''; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--surface) linear-gradient(var(--encre), var(--encre)) center / 12px 2px no-repeat; box-shadow: none; transition: transform var(--vite) var(--doux); }
.faq summary::before { content: none; }
.faq details:not([open]) summary::after { background-image: linear-gradient(var(--encre), var(--encre)), linear-gradient(var(--encre), var(--encre)); background-size: 12px 2px, 2px 12px; background-position: center, center; background-repeat: no-repeat; }
.faq details p { padding: 0 0 22px; max-width: 70ch; }

/* ---------- Appel final ---------- */
.final { text-align: center; padding: clamp(72px, 10vw, 140px) var(--gouttiere) 0; border-top: 1px solid var(--filet); display: grid; justify-items: center; gap: 18px; overflow: hidden; }
.final h2 { font-size: clamp(2.4rem, 6vw, 5rem); font-weight: 800; letter-spacing: -.035em; max-width: 16ch; }
.final p { font-size: 1.125rem; color: var(--gris); max-width: 50ch; }
.final-ruban { display: grid; grid-template-columns: repeat(11, 1fr); width: 100vw; height: 72px; margin-top: clamp(48px, 7vw, 88px); margin-inline: calc(50% - 50vw); justify-self: stretch; }
.final-ruban span { background: var(--c); }

/* ---------- Pied de page ---------- */
.pied { border-top: 1px solid var(--filet); }
.pied-dedans { max-width: var(--largeur); margin: 0 auto; padding: 28px var(--gouttiere) 40px; display: grid; gap: 8px; font-size: .9375rem; color: var(--gris); }
.pied strong { color: var(--encre); }
.pied a { text-underline-offset: 3px; }

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

/* ---------- Animations (Motion, dans nuancier.js) ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- Adaptations ---------- */
@media (max-width: 1100px) {
  .menu { display: none; }
  .echantillons { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 22px; }
}
@media (max-width: 960px) {
  .ouverture-texte, .ouverture-scene, .bloc-tete, .bloc-corps { grid-column: 1 / -1; }
  .ouverture-scene { max-width: 520px; width: 100%; justify-self: center; margin-top: 36px; }
  .bloc-tete { position: static; }
  .apercu, .etapes { grid-column: 1 / -1; }
  .apercu { position: static; margin-bottom: 32px; }
  .recap, .mention { display: none; }
  .essentiel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .frise { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
  .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: #fff; border-top: 1px solid var(--filet); box-shadow: 0 -10px 30px #0e111614; padding: 10px var(--gouttiere) calc(10px + env(safe-area-inset-bottom, 0px)); }
  .barre-mobile > div { min-width: 0; }
  .barre-prix { font-family: var(--titre); font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; white-space: nowrap; }
  .barre-total { font-size: .8125rem; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .barre-mobile .bouton { min-height: 44px; padding: 0 18px; white-space: nowrap; flex: none; }
  body { padding-bottom: 76px; }
}
@media (max-width: 620px) {
  .entete-bouton { display: none; }
  .echantillons { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; padding: 16px 2px 8px; margin-inline: calc(var(--gouttiere) * -1); padding-inline: var(--gouttiere); }
  .echantillon { flex: 0 0 78px; scroll-snap-align: start; }
  .usages, .formulaire { grid-template-columns: minmax(0, 1fr); }
  .frise { grid-template-columns: minmax(0, 1fr); }
  .scene-legende { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ---------- Pages légales et 404 ---------- */
.legal { max-width: 820px; margin: 0 auto; padding: clamp(40px, 7vw, 88px) var(--gouttiere) 72px; }
.legal h1 { font-weight: 800; font-size: clamp(2.4rem, 5vw, 3.8rem); letter-spacing: -.035em; line-height: .98; }
.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-size: .8125rem; color: var(--gris); }
.legal section { padding-top: 34px; }
.legal h2 { font-size: 1.5rem; padding-top: 18px; border-top: 1px solid var(--filet); 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; 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(--filet); }
.legal-fiche dt { font-size: .8125rem; font-weight: 600; color: var(--gris); padding-top: 2px; }
.legal-fiche dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .legal-fiche > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* Bouton WhatsApp flottant (dispositif commun aux sites d'ECOMB2B, z-index 60 sous les panneaux) */
.wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 60; width: 56px; height: 56px; border-radius: 50%; background: #25d366; display: grid; place-items: center; box-shadow: 0 10px 24px #0e111633; transition: transform var(--vite) var(--doux); }
.wa-float:hover { transform: scale(1.06); }
.wa-float svg { width: 30px; height: 30px; }
@media (max-width: 960px) { .wa-float { bottom: 92px; right: 16px; width: 52px; height: 52px; } }