/*
  Westiti Grosse Tête — charte des écrans.

  Même ossature que Westiti Memories : un fond blanc retenu, le crème pour
  les bandes qui parlent de l'objet, le vert-noir pour les moments d'émotion,
  Gabarito pour la structure et Instrument Serif pour les lignes qui touchent.

  Une seule différence : la couleur d'action. Memories empruntait l'orange de
  Strava, parce que tout y partait d'un compte Strava. Ici rien ne dépend de
  Strava, si bien que l'action prend le corail de Westiti, assombri d'un cran
  pour que le texte blanc reste lisible (contraste 4 pour 1).
*/

:root {
  --encre:       #0C1A18;
  --encre-2:     #16302C;
  --papier:      #FBF8F3;
  --papier-2:    #F1EBE1;
  --blanc:       #FFFFFF;
  --corail:      #D9533F;   /* action */
  --corail-fonce:#C8473A;   /* survol */
  --corail-doux: #ED766A;   /* le corail de marque, pour les décors */
  --vert:        #2A736E;
  --vert-pale:   #E4F0EE;
  --vert-clair:  #6FC3BB;
  --gris:        #68756F;
  --gris-clair:  #A9B5B1;
  --trait:       #E6DFD4;
  --trait-sombre: rgba(255, 255, 255, .13);
  --page:        min(1200px, 100% - 48px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--blanc); color: var(--encre);
  font-family: Gabarito, system-ui, -apple-system, sans-serif;
  font-size: 17px; line-height: 1.55; font-synthesis-weight: none;
}

img { max-width: 100%; height: auto; display: block; }
.page { width: var(--page); margin-inline: auto; }
@media (max-width: 640px) { :root { --page: calc(100% - 32px); } }

h1, h2, h3 { margin: 0; letter-spacing: -0.03em; font-weight: 700; }
h1 { font-size: clamp(40px, 5.9vw, 76px); line-height: 1.05; font-weight: 600; }
h2 { font-size: clamp(28px, 4vw, 48px); line-height: 1.1; font-weight: 600; letter-spacing: -0.028em; }
h3 { font-size: 20px; line-height: 1.25; }
p  { margin: 0 0 1.1em; max-width: 62ch; }

.emotion {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(24px, 3.4vw, 40px); line-height: 1.2;
  letter-spacing: -0.01em; max-width: 22ch; font-weight: 400;
}
.emotion i { font-style: italic; }
.doux { color: var(--gris); }
.aide { color: var(--gris); font-size: 14.5px; line-height: 1.5; }

a { color: var(--vert); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--corail); outline-offset: 3px; border-radius: 4px; }

/* -------------------------------------------------------------- actions */

.action {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 30px; border: 0; border-radius: 999px;
  background: var(--corail); color: #fff;
  font: inherit; font-weight: 700; font-size: 17.5px; letter-spacing: -0.005em;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 2px 4px rgba(18,27,25,.14), 0 12px 28px rgba(217,83,63,.26);
  transition: background .14s ease, transform .14s ease;
}
.action:hover { background: var(--corail-fonce); transform: translateY(-1px); }
.action:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

/* Le second bouton, en vert : visible sans disputer la place au premier. */
.secondaire {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 15px 26px; border-radius: 999px;
  color: var(--vert); background: transparent; border: 1.5px solid var(--vert);
  font: inherit; font-size: 16.5px; text-decoration: none; cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.secondaire:hover { background: var(--vert); color: #fff; }
.action + .secondaire { margin-left: 12px; }
@media (max-width: 620px) { .action + .secondaire { margin: 12px 0 0; } }

/* -------------------------------------------------------------- en-tête */

.entete {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.9); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--trait);
}
.entete .page {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 0;
}

/* Le logotype : le mot Westiti de la marque, « Grosse Tête » en vert, et
   le personnage qui brandit sa propre tête. */
.marque { display: block; line-height: 0; }
.marque img { display: block; width: auto; height: 60px; }
@media (max-width: 560px) { .marque img { height: 42px; } }

.entete nav { display: flex; align-items: center; gap: 22px; }
.entete nav > a:not(.action) { color: var(--gris); text-decoration: none; font-size: 15.5px; }
.entete nav > a:not(.action):hover { color: var(--encre); }
.entete .action { padding: 11px 20px; font-size: 15.5px; box-shadow: none; }
.entete .action .court { display: none; }
/* Les liens de menu s'effacent avant que l'en-tête ne déborde : les
   phrases espagnoles et anglaises sont plus longues que les françaises. */
@media (max-width: 1080px) { .entete nav > a:not(.action) { display: none; } }
@media (max-width: 560px) {
  .entete nav { gap: 12px; }
  .entete .action { padding: 10px 16px; }
  .entete .action .long { display: none; }
  .entete .action .court { display: inline; }
}

/* Les quatre drapeaux : de petits ronds, celui de la langue affichée cerclé
   de vert, les autres légèrement atténués jusqu'au survol. */
.langues { display: flex; align-items: center; gap: 7px; }
.langues a {
  position: relative; display: block; width: 26px; height: 26px; border-radius: 50%;
  overflow: hidden; box-shadow: 0 0 0 1px rgba(12,26,24,.14);
  opacity: .72; transition: opacity .14s ease, transform .14s ease, box-shadow .14s ease;
}
.langues a:hover { opacity: 1; transform: translateY(-1px) scale(1.06); }
.langues a.actif { opacity: 1; box-shadow: 0 0 0 2px var(--blanc), 0 0 0 4px var(--vert); }
.langues svg { display: block; width: 100%; height: 100%; }
@media (max-width: 560px) { .langues { gap: 6px; } .langues a { width: 23px; height: 23px; } }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- héros */

.heros { padding: clamp(40px, 6vw, 76px) 0 clamp(50px, 7vw, 92px); }
.heros .page {
  display: grid; gap: clamp(34px, 5vw, 64px); align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 940px) { .heros .page { grid-template-columns: 1.15fr .85fr; } }
.heros .emotion { max-width: none; font-size: clamp(23px, 2.6vw, 33px); }
.promesse { color: var(--corail); margin: 0 0 16px; }

.repere {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px 14px; margin-top: 28px; font-size: 15.5px; color: var(--gris);
}
.repere b {
  font-size: 23px; font-weight: 700; color: var(--encre);
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.repere span::before {
  content: ""; display: inline-block; width: 1px; height: 14px;
  margin-right: 14px; background: var(--trait); vertical-align: -2px;
}

/* ------------------------------------------------- photos à venir

   Le site n'utilise aucune image générée. En attendant les vraies photos
   prises sur les courses, chaque emplacement dit ce qu'il attend, de sorte
   que la mise en page se juge déjà avec ses vraies proportions. */

.photo {
  position: relative; margin: 0; overflow: hidden;
  border-radius: 18px; background: var(--papier-2);
}
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo.a-venir {
  display: grid; place-items: center; text-align: center;
  border: 2px dashed #D8CDBB; padding: 24px;
  color: var(--gris); font-size: 14.5px;
}
.photo.a-venir svg { width: 44px; height: 44px; margin: 0 auto 10px; color: var(--corail-doux); }
.photo.a-venir b { display: block; color: var(--encre); font-size: 15.5px; margin-bottom: 4px; }
.photo.a-venir span { display: block; max-width: 30ch; margin-inline: auto; }
.format-portrait { aspect-ratio: 4 / 5; }
.format-paysage  { aspect-ratio: 3 / 2; }
.format-carre    { aspect-ratio: 1 / 1; }

.heros .photo { max-width: 480px; width: 100%; margin-inline: auto; transform: rotate(1.2deg);
  box-shadow: 0 4px 10px rgba(18,27,25,.08), 0 34px 70px rgba(18,27,25,.14); }

/* ------------------------------------------------------------ confiance */

.confiance { border-block: 1px solid var(--trait); background: var(--papier); }
.confiance .page {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 26px; padding: 26px 0;
}
.confiance b { display: block; font-size: 27px; font-weight: 700; letter-spacing: -0.035em; }
.confiance span { font-size: 14.5px; color: var(--gris); }

/* --------------------------------------------------------------- bandes */

.bande { padding: clamp(56px, 8vw, 104px) 0; }
.bande.serre { padding-block: clamp(42px, 6vw, 72px); }
.papier { background: var(--papier); }
.intro { max-width: 50ch; }
.intro h2 + p { margin-top: 16px; font-size: 18.5px; }

.sombre { background: var(--encre); color: var(--papier); }
.sombre h1, .sombre h2, .sombre h3 { color: var(--papier); }
.sombre p { color: rgba(251,248,243,.8); }
.sombre .emotion { color: #fff; }

.probleme .page { display: grid; gap: clamp(28px, 4vw, 56px); }
@media (min-width: 900px) { .probleme .page { grid-template-columns: 1fr 1fr; align-items: center; } }
.probleme .emotion { max-width: 18ch; }

/* --------------------------------------------------------- les planches */

.planches {
  display: grid; gap: clamp(18px, 2.4vw, 32px); margin-top: 42px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.planches figure { margin: 0; }
.planches figcaption { margin-top: 12px; font-size: 15px; color: var(--gris); max-width: 34ch; }
.planches figcaption b { color: var(--encre); display: block; font-size: 16.5px; }

/* ----------------------------------------------------------- les tailles

   Chaque taille est montrée à l'échelle, tenue par une silhouette d'un
   mètre soixante-quinze : un chiffre en centimètres ne dit rien, une tête
   qui dépasse les épaules dit tout. */

.tailles {
  display: grid; gap: 16px; margin-top: 42px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.taille {
  position: relative; background: var(--blanc); border: 1.5px solid var(--trait);
  border-radius: 20px; padding: 22px 20px 20px;
  display: flex; flex-direction: column; min-width: 0;
}
.taille.conseillee { border-color: var(--vert); box-shadow: 0 0 0 3px var(--vert-pale); }
.taille .badge {
  position: absolute; top: -13px; left: 20px;
  background: var(--vert); color: #fff; font-size: 13px; font-weight: 700;
  padding: 4px 12px; border-radius: 999px;
}
.taille svg.echelle { width: 100%; height: 170px; margin-bottom: 14px; }
.taille .mesure { font-size: 32px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.taille .nom { color: var(--vert); font-weight: 600; margin: 6px 0 8px; }
.taille p { color: var(--gris); font-size: 15px; margin-bottom: 16px; }
.taille .grille-prix { margin-top: auto; }

/* Les trois prix : la ligne du dessus est le prix d'appel, les deux
   suivantes disent combien coûte chaque tête en plus, en vert, parce que
   c'est là que se trouve la bonne affaire. */
.grille-prix { border-top: 1px solid var(--trait); font-variant-numeric: tabular-nums; }
.grille-prix .ligne {
  display: grid; grid-template-columns: 1fr auto; gap: 0 10px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--trait); font-size: 15px;
}
.grille-prix .ligne:last-child { border-bottom: 0; }
.grille-prix span { color: var(--gris); }
.grille-prix b { font-size: 19px; letter-spacing: -0.02em; }
.grille-prix small { grid-column: 1 / -1; color: var(--vert); font-size: 13.5px; font-weight: 600; line-height: 1.35; }

/* Sur un écran moyen, cinq colonnes seraient trop étroites : chaque taille
   devient une ligne, le dessin à gauche et les prix à droite. */
@media (max-width: 1099px) {
  .tailles { grid-template-columns: 1fr; gap: 20px; }
  .taille { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 260px); gap: 0 26px; align-items: center; }
  .taille svg.echelle { grid-row: 1 / span 3; height: 150px; margin: 0; }
  .taille .grille-prix { grid-column: 3; grid-row: 1 / span 3; margin: 0; }
}
@media (max-width: 720px) {
  .taille { grid-template-columns: 110px minmax(0, 1fr); }
  .taille svg.echelle { grid-row: 1 / span 3; height: 120px; }
  .taille .grille-prix { grid-column: 1 / -1; grid-row: auto; margin-top: 14px; }
}

.echelle .supporter { fill: #CFC6B8; }
.echelle .manche { stroke: #A79C8B; stroke-width: 3; stroke-linecap: round; }
.echelle .tete { fill: var(--corail-doux); }
.echelle .visage { fill: rgba(255,255,255,.55); }
.echelle .sol { stroke: var(--trait); stroke-width: 2; }
.echelle text { font: 600 11px Gabarito, sans-serif; fill: var(--gris); }

/* ----------------------------------------------------------- les étapes */

.etapes { counter-reset: etape; margin-top: 42px; display: grid; gap: 2px; padding: 0; list-style: none; }
.etapes > div, .etapes > li {
  counter-increment: etape;
  display: grid; gap: 4px 22px; padding: 26px 0;
  border-top: 1px solid var(--trait); grid-template-columns: 54px 1fr;
}
.etapes > div::before, .etapes > li::before {
  content: counter(etape);
  font-size: 30px; font-weight: 700; letter-spacing: -0.04em;
  color: var(--corail-doux); line-height: 1; grid-row: span 2;
}
.etapes h3 { align-self: center; }
.etapes p { margin: 0; grid-column: 2; }

/* ---------------------------------------------------------------- fiche */

.fiche {
  display: grid; gap: clamp(26px, 3vw, 44px); margin-top: 40px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.fiche > div { border-top: 2px solid var(--encre); padding-top: 16px; }
.fiche b { display: block; font-size: 19px; }
.fiche span { color: var(--gris); font-size: 15.5px; }

/* ----------------------------------------------------------------- prix */

.prix { background: var(--encre); color: var(--papier); border-radius: 22px; }
.prix .dedans { display: grid; gap: clamp(26px, 4vw, 54px); align-items: center; padding: clamp(34px, 5vw, 60px); }
@media (min-width: 860px) { .prix .dedans { grid-template-columns: 1fr auto; } }
.prix h2 { color: #fff; }
.prix p { color: rgba(251,248,243,.82); margin-bottom: 0; }
.montant { font-size: clamp(60px, 9vw, 104px); font-weight: 700; line-height: .9; letter-spacing: -0.05em; }
.montant small { font-size: .32em; font-weight: 700; letter-spacing: -0.02em; }
.prix .action { margin-top: 22px; }

/* ----------------------------------------------------------- la bande */

.bande-verte {
  background: var(--vert); color: #fff; border-radius: 22px;
  padding: clamp(34px, 5vw, 58px);
  display: grid; gap: clamp(24px, 4vw, 48px); align-items: center;
}
@media (min-width: 840px) { .bande-verte { grid-template-columns: 1fr auto; } }
.bande-verte h2 { color: #fff; max-width: 20ch; }
.bande-verte p { color: rgba(255,255,255,.86); margin-bottom: 0; max-width: 54ch; }
.bande-verte .action { background: #fff; color: var(--vert); box-shadow: 0 2px 4px rgba(0,0,0,.12), 0 14px 30px rgba(0,0,0,.18); }
.bande-verte .action:hover { background: var(--papier); }
.etiquette {
  display: inline-block; margin-bottom: 16px; font-size: 13.5px; font-weight: 700;
  background: rgba(255,255,255,.16); border-radius: 999px; padding: 6px 14px;
}

/* ------------------------------------------------------------ fondateur */

.fondateur { display: grid; gap: clamp(26px, 4vw, 48px); align-items: center; }
@media (min-width: 780px) { .fondateur { grid-template-columns: 180px 1fr; } }
.fondateur img { border-radius: 50%; width: 180px; height: 180px; object-fit: cover; }
.fondateur .citation {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(20px, 1.9vw, 23px); line-height: 1.42; max-width: 48ch;
}
.fondateur .citation + .citation { margin-top: 16px; }
.fondateur .qui { font-weight: 700; margin-top: 18px; margin-bottom: 0; }
.fondateur .role { color: var(--gris); font-size: 15px; }

/* ------------------------------------------------------------------ faq */

.faq { margin-top: 36px; border-top: 1px solid var(--trait); }
.faq details { border-bottom: 1px solid var(--trait); }
.faq summary {
  padding: 20px 0; font-weight: 700; font-size: 18px; cursor: pointer;
  list-style: none; display: flex; justify-content: space-between; gap: 20px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--corail); font-size: 24px; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq p { margin: 0 0 20px; }

/* ----------------------------------------------------------------- pied */

.pied { border-top: 1px solid var(--trait); color: var(--gris); font-size: 14.5px; }
.pied .page { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; padding: 30px 0 40px; }
.pied a { color: var(--gris); }
.pied nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }

/* ------------------------------------------------------------ le clic */

.fil {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--corail), var(--vert));
  z-index: 100; transition: width 9s cubic-bezier(.05, .7, .1, 1);
}
.fil.part { width: 92%; }

/* ======================================================================
   Page « Créer ma grosse tête »
   ====================================================================== */

.atelier { padding: clamp(32px, 5vw, 64px) 0 clamp(60px, 8vw, 100px); background: var(--papier); }
.atelier .page { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (min-width: 980px) { .atelier .page { grid-template-columns: minmax(0, 1fr) 420px; } }
.atelier h1 { font-size: clamp(34px, 4.6vw, 54px); }

.etape-form {
  background: var(--blanc); border: 1px solid var(--trait); border-radius: 20px;
  padding: clamp(22px, 3vw, 34px); margin-top: 22px;
}
.etape-form > header { display: flex; gap: 14px; align-items: baseline; margin-bottom: 6px; }
.etape-form > header i {
  font-style: normal; font-weight: 700; color: var(--corail-doux); font-size: 26px;
  letter-spacing: -0.04em; line-height: 1;
}
.etape-form h2 { font-size: 23px; }

label { display: block; font-weight: 600; font-size: 15px; margin: 20px 0 7px; }
input[type=text], input[type=email], textarea, select {
  width: 100%; padding: 13px 15px; font: inherit; font-size: 16px;
  color: var(--encre); background: var(--blanc);
  border: 1.5px solid var(--trait); border-radius: 10px;
}
input:focus, textarea:focus, select:focus {
  outline: 0; border-color: var(--vert); box-shadow: 0 0 0 3px rgba(42,115,110,.16);
}

/* Le dépôt de la photo : une grande zone, parce que c'est le seul geste
   vraiment nécessaire de toute la page. */
.depot {
  display: grid; place-items: center; text-align: center; margin-top: 18px;
  border: 2px dashed #D8CDBB; border-radius: 16px; padding: 34px 20px;
  background: var(--papier); cursor: pointer; transition: border-color .14s, background .14s;
}
.depot:hover, .depot.survol { border-color: var(--vert); background: var(--vert-pale); }
.depot svg { width: 40px; height: 40px; color: var(--vert); margin-bottom: 10px; }
.depot b { display: block; font-size: 17px; }
.depot input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.depot.rempli { padding: 18px 20px; border-style: solid; border-color: var(--vert); background: var(--vert-pale); }

.conseils { display: grid; gap: 14px; margin-top: 18px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.conseils div { font-size: 14.5px; color: var(--gris); }
.conseils b { display: block; color: var(--encre); font-size: 15px; }

.recadrer { margin-top: 18px; display: none; }
.recadrer.visible { display: block; }
.recadrer input[type=range] { width: 100%; accent-color: var(--vert); }

/* Les tailles, en cartes que l'on coche. */
.choix-tailles { display: grid; gap: 10px; margin-top: 16px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.choix-tailles label, .choix-quantites label {
  margin: 0; padding: 14px 14px 12px; border: 1.5px solid var(--trait); border-radius: 14px;
  cursor: pointer; font-weight: 400; position: relative; background: var(--blanc); min-width: 0;
}
.choix-tailles input, .choix-quantites input { position: absolute; opacity: 0; }
.choix-tailles label:has(input:checked), .choix-quantites label:has(input:checked) { border-color: var(--vert); box-shadow: 0 0 0 3px var(--vert-pale); }
.choix-tailles label:has(input:focus-visible), .choix-quantites label:has(input:focus-visible) { outline: 3px solid var(--corail); outline-offset: 2px; }
.choix-tailles .mesure { display: block; font-size: 24px; font-weight: 700; letter-spacing: -0.04em; }
.choix-tailles .nom { display: block; color: var(--vert); font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.choix-tailles .tarif { display: block; margin-top: 8px; color: var(--gris); font-size: 14px; }
@media (max-width: 720px) {
  .choix-tailles { grid-template-columns: 1fr; }
  .choix-tailles label { display: grid; grid-template-columns: 76px 1fr auto; align-items: baseline; gap: 10px; }
  .choix-tailles .tarif { margin: 0; }
}

/* Les quantités : trois cartes, dont les prix suivent la taille choisie. */
.choix-quantites { display: grid; gap: 10px; margin-top: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choix-quantites .combien { display: block; font-size: 20px; font-weight: 700; letter-spacing: -0.03em; }
.choix-quantites .total { display: block; font-size: 17px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.choix-quantites .gain { display: block; margin-top: 6px; color: var(--vert); font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.choix-quantites .badge {
  position: absolute; top: -11px; right: 12px; background: var(--corail); color: #fff;
  font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
}
@media (max-width: 560px) {
  .choix-quantites { grid-template-columns: 1fr; }
}

.accord { display: flex; gap: 12px; align-items: flex-start; margin: 22px 0 0; font-weight: 400; font-size: 15px; cursor: pointer; }
.accord input { width: 19px; height: 19px; accent-color: var(--vert); flex: none; margin-top: 2px; }

/* La colonne d'aperçu reste à l'écran pendant que l'on remplit. */
.apercu-col { position: sticky; top: 96px; }
.apercu-carte {
  background: var(--blanc); border: 1px solid var(--trait); border-radius: 20px; overflow: hidden;
}
.scene { position: relative; background: linear-gradient(#EEF4F3, #F7F3EC 70%); padding: 18px 18px 0; }
.scene canvas { display: block; width: 100%; height: auto; touch-action: none; cursor: grab; }
.scene canvas.vide { cursor: default; }
.scene .legende {
  position: absolute; left: 18px; top: 16px; font-size: 13px; color: var(--gris);
  background: rgba(255,255,255,.8); padding: 4px 10px; border-radius: 999px;
}
.recap { padding: 18px 24px 24px; }
#echelles svg { width: 100%; height: 132px; display: block; }
.recap dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; font-size: 15.5px; }
.recap dt { color: var(--gris); }
.recap dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.recap .total { border-top: 1px solid var(--trait); padding-top: 14px; margin-top: 6px; font-weight: 700; font-size: 19px; }
.recap .total dt { color: var(--encre); }
.recap .action { width: 100%; margin-top: 20px; }
.recap .aide { margin: 12px 0 0; text-align: center; }

.avis {
  background: var(--blanc); border-left: 4px solid var(--vert); border-radius: 10px;
  padding: 16px 18px; font-size: 15.5px;
}
.avis.probleme { border-left-color: var(--corail); }

/* Écrans simples : merci, bientôt. */
.message { padding: clamp(60px, 10vw, 130px) 0; text-align: center; }
.message h1 { font-size: clamp(36px, 5vw, 60px); max-width: 18ch; margin-inline: auto; }
.message p { margin: 20px auto 0; max-width: 52ch; }
.message .action { margin-top: 32px; }

.texte-legal { padding: clamp(40px, 6vw, 80px) 0; }
.texte-legal .page { max-width: 72ch; }
.texte-legal h2 { font-size: 24px; margin-top: 36px; }

.barre-mobile { display: none; }
@media (max-width: 979px) {
  .apercu-col { position: static; order: -1; }
  .apercu-col .recap .action, .apercu-col #manque { display: none; }
  .atelier .page > form { order: 0; }
  body:has(.barre-mobile) { padding-bottom: 86px; }
  .barre-mobile {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(12,26,24,.96); color: var(--papier); backdrop-filter: blur(12px);
  }
  .barre-mobile b { display: block; font-size: 20px; letter-spacing: -0.02em; }
  .barre-mobile .aide { color: var(--gris-clair); font-size: 13.5px; }
  .barre-mobile .action { padding: 13px 22px; font-size: 16px; box-shadow: none; }
}
@media (max-width: 979px) { .apercu-col .recap dl { display: none; } }