/* =================================================================
   Visit Morocco with Lahcen
   Direction : « la maison ». Une toile blanche, des panneaux ivoire,
   un texte anthracite et de grands titres en serif fin, comme la
   papeterie d'un palace. L'or a deux rôles, jamais plus : en encre
   pour les grands titres, en aplat pour l'action principale. Les
   séparations viennent de filets très fins et de l'alternance blanc /
   ivoire des sections, pas de cartes. Aucun arrondi.
   Aucune ressource externe : les polices sont servies par le site.
   ================================================================= */

/* Polices sous licence SIL OFL 1.1 (voir public/fonts/LICENCE-*.txt).
   Sous-ensemble latin : tout le français, les noms de lieux compris.
   Inter pour le texte ; Newsreader, serif à tailles optiques, pour les titres. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/newsreader.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  /* Surfaces : le blanc, l'ivoire des panneaux, un ivoire plus soutenu pour les encarts */
  --blanc: #ffffff;
  --ivoire: #fbfaf7;
  --ivoire-2: #f3efe6;

  /* Texte et traits */
  --encre: #1d1d1d;
  --gris: #6b6760;
  --filet: rgba(29, 29, 29, .09);
  --filet-fort: rgba(29, 29, 29, .28);
  /* Trait des champs de formulaire : seul repère du champ, il garde un contraste de 3:1. */
  --trait: #8f8a81;

  /* L'or. En encre : les grands titres (24 px et plus) ; --or-texte, plus sombre,
     garde le contraste des petits textes. En aplat : le bouton d'action principal,
     jamais un fond de section ni un décor. */
  --or: #967a1b;
  --or-texte: #7a6213;
  --or-aplat: #bca34f;

  /* Erreurs de formulaire : une teinte fonctionnelle, jamais décorative. */
  --erreur: #b3261e;

  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  --page: 1320px;
  --marge: clamp(1.25rem, 4vw, 3rem);
  --entete: 5.25rem;
  /* Barre blanche au pied de la photo d'accueil. */
  --barre: 5rem;
  --section: clamp(5rem, 9vw, 8.5rem);
  --courbe: cubic-bezier(.19, 1, .22, 1);
}

* { box-sizing: border-box; }

html {
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--sans);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  font-size: 1rem;
  line-height: 1.6;
  /* Le pied de page reste en bas de l'écran, même sur une page courte. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main { flex: 1 0 auto; }
/* L'en-tête est fixe : on lui laisse sa place (sur l'accueil, la photo s'en charge). */
body:not(.page-accueil) main { padding-top: var(--entete); }

/* Titres : serif fin, en minuscules, légèrement resserré. */
h1, h2, h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 330;
  font-optical-sizing: auto;
  line-height: 1.08;
  letter-spacing: -.018em;
  text-wrap: balance;
}
h3 {
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -.01em;
}
p { margin: 0; text-wrap: pretty; }
b, strong { font-weight: 600; color: var(--encre); }
button, input, select, textarea { font-family: var(--sans); }

a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }

[id] { scroll-margin-top: calc(var(--entete) + 1.25rem); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

::selection { background: var(--or-aplat); color: var(--encre); }

:focus-visible {
  outline: 2px solid var(--encre);
  outline-offset: 3px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -999px; top: .75rem; z-index: 100;
  padding: .8rem 1.2rem;
  background: var(--encre); color: var(--blanc);
  font-size: .8rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
}
.skip-link:focus { left: .75rem; }

.enveloppe {
  width: min(100%, var(--page));
  margin-inline: auto;
  padding-inline: var(--marge);
}

/* ---------------------------------------------------------------- */
/* Étoile à huit branches : deux carrés superposés, la marque du site */
/* ---------------------------------------------------------------- */
.etoile {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: var(--taille, 16px);
  height: var(--taille, 16px);
  flex: none;
}
.etoile::before,
.etoile::after {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--epaisseur, 1.5px) solid currentColor;
  background: var(--remplissage, transparent);
}
.etoile::after { transform: rotate(45deg); }

/* Emblème (étoile en double filet et lettre L), dessiné par src/server.js. */
.embleme { display: block; flex: none; color: var(--or); }

/* Nom du site en deux lignes : « Visit Morocco », puis « with Lahcen » très espacé. */
/* Les deux lignes ont exactement la même largeur : l’espacement de « with Lahcen »
   est calculé pour Inter, et sa marge négative retire l’espace laissé après la dernière lettre. */
.marque-texte { display: grid; justify-items: start; gap: .4rem; font-size: 1rem; line-height: 1; }
.marque-nom {
  margin-right: -.08em;
  font-size: 1em;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.marque-sous {
  margin-right: -.62em;
  font-size: .6875em;
  font-weight: 500;
  letter-spacing: .62em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--gris);
}

/* ---------------------------------------------------------------- */
/* Étiquettes : petites capitales espacées                          */
/* ---------------------------------------------------------------- */
.surtitre {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-bottom: 1.5rem;
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--or-texte);
}

/* Lien d'accompagnement : capitales et simple trait dessous. */
.lien-souligne {
  display: inline-block;
  padding-bottom: .4rem;
  border-bottom: 1px solid currentColor;
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--encre);
  transition: color .2s ease;
}
.lien-souligne:hover { color: var(--or-texte); }

/* ---------------------------------------------------------------- */
/* En-tête : blanc, l'emblème au centre, posé sur un filet            */
/* ---------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  height: var(--entete);
  display: flex;
  align-items: center;
  background: var(--blanc);
  border-bottom: 1px solid var(--filet);
  transition: box-shadow .35s ease;
}
/* public/app.js pose .est-defile ; sans JavaScript, public/sans-script.css garde l'ombre. */
.site-header.est-defile {
  box-shadow: 0 1px 0 rgba(29, 29, 29, .06), 0 10px 30px -18px rgba(29, 29, 29, .25);
}
/* Fine barre de lecture sous l'en-tête : elle suit le défilement de la page
   (navigateurs récents ; ailleurs, elle n'apparaît pas). */
@supports (animation-timeline: scroll()) {
  .site-header::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: var(--or-aplat);
    transform-origin: 0 50%;
    animation: progression linear both;
    animation-timeline: scroll(root block);
  }
}
@keyframes progression {
  from { scale: 0 1; }
  to { scale: 1 1; }
}
/* Trois colonnes : le menu à gauche, l'emblème au centre, la langue et le bouton à droite. */
.site-header .enveloppe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1.5rem;
}

.marque {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  text-decoration: none;
  color: var(--encre);
}
.marque .embleme { width: 2.75rem; height: 2.75rem; }

.site-nav {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  display: flex;
  gap: .25rem;
  margin-left: -.8rem;
}
.site-nav a {
  position: relative;
  padding: .6rem .8rem;
  font-size: .8125rem;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--encre);
  transition: color .2s ease;
}
/* Un filet d'or se dessine sous le lien survolé. */
.site-nav a::after {
  content: "";
  position: absolute;
  left: .8rem; right: .8rem; bottom: .3rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .45s var(--courbe);
}
.site-nav a:hover { color: var(--or-texte); }
.site-nav a:hover::after { transform: scaleX(1); }

/* À droite de l'en-tête : le choix de la langue, puis le bouton. */
.entete-droite {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 1rem;
}
/* Choix de la langue : trois codes discrets, la langue affichée en clair et soulignée. */
.langues { display: flex; }
.langues a {
  padding: .55rem .45rem;
  font-size: .8125rem;
  font-weight: 400;
  letter-spacing: .08em;
  line-height: 1;
  text-decoration: none;
  color: var(--gris);
  transition: color .2s ease;
}
.langues a:hover { color: var(--encre); }
.langues a[aria-current="page"] {
  color: var(--encre);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .45em;
}

/* ---------------------------------------------------------------- */
/* Boutons : aplat d'or pour l'action principale, filet sinon        */
/* ---------------------------------------------------------------- */
.bouton,
.bouton-contour {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  min-height: 3.25rem;
  padding: 0 2rem;
  border-radius: 0;
  font-family: var(--sans);
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .1em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
/* Texte anthracite sur l'or : le blanc n'y atteindrait pas un contraste lisible. */
.bouton {
  border: 1px solid var(--or-aplat);
  background: var(--or-aplat);
  color: var(--encre);
}
.bouton:hover { border-color: var(--encre); background: var(--encre); color: var(--blanc); }
.bouton:disabled { cursor: progress; border-color: var(--ivoire-2); background: var(--ivoire-2); color: var(--gris); }

.bouton-contour {
  border: 1px solid var(--filet-fort);
  background: transparent;
  color: var(--encre);
}
.bouton-contour:hover { border-color: var(--encre); background: var(--encre); color: var(--blanc); }

.bouton-entete {
  min-height: 2.75rem;
  padding: 0 1.35rem;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- */
/* Accueil : la photo sous l'en-tête, une barre blanche à son pied   */
/* ---------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100svh;
  min-height: 32rem;
  padding-top: var(--entete);
  overflow: hidden;
  background: var(--ivoire-2);
}
/* Diaporama des photos : la zone de la photo, au-dessus de la barre. Elle ne crée
   pas de plan (pas de z-index) : les photos restent sous la barre, et les
   commandes, qui descendent dans la barre, au-dessus. */
.hero-photos { position: relative; flex: 1 1 auto; min-height: 0; }
.hero-photo {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  opacity: 0;
  /* Chaque photo arrive légèrement agrandie puis recule lentement tant qu'elle
     est affichée (effet « Ken Burns »). La photo qui s'en va ne disparaît
     qu'une fois la suivante posée par-dessus : pas de passage par le vide
     entre deux images, et son retour à l'échelle de départ se fait caché. */
  scale: 1.08;
  transition: opacity 0s linear 1.4s, scale 0s linear 1.4s;
  animation: recul 2.4s var(--courbe) backwards;
}
.hero-photo.est-active {
  z-index: -2;
  opacity: 1;
  scale: 1;
  transition: opacity 1.4s ease, scale 9s cubic-bezier(.25, .6, .3, 1);
}
@keyframes recul {
  from { transform: scale(1.06); }
  to { transform: none; }
}

/* La barre : le nom de ce que propose le site à gauche, les commandes du diaporama
   au centre (elles appartiennent au diaporama, voir .hero .diaporama-controles),
   l'action principale en aplat d'or à droite, sur toute la hauteur. */
.hero-barre {
  position: relative;
  z-index: 1;
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  height: var(--barre);
  background: var(--blanc);
}
.hero-barre-titre {
  align-self: center;
  justify-self: start;
  padding-inline: var(--marge) 1.5rem;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 330;
  letter-spacing: -.01em;
  line-height: 1.2;
  white-space: nowrap;
  animation: apparait 1s ease .1s backwards;
}
.hero-barre-bouton {
  min-height: 100%;
  min-width: clamp(15rem, 22vw, 19rem);
  padding-inline: 2rem;
  border: 0;
}
.hero .diaporama-controles {
  top: 100%;
  bottom: auto;
  left: 50%;
  height: var(--barre);
  gap: 1.25rem;
  transform: translateX(-50%);
  /* Centrées par leur translation : elles apparaissent en fondu seul. */
  animation: fondu 1s ease .3s backwards;
}
.hero .diaporama-points { flex: none; width: clamp(8rem, 14vw, 13rem); }

@keyframes apparait {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- */
/* Sous la photo : le titre en or dans le sceau, et la promesse      */
/* ---------------------------------------------------------------- */
.intro {
  padding-block: clamp(3rem, 6vw, 5.5rem) clamp(4.5rem, 9vw, 8rem);
  /* Sur téléphone, les pointes gauche et droite du sceau dépassent de l'écran. */
  overflow-x: clip;
}
.intro-contenu {
  display: grid;
  justify-items: center;
  text-align: center;
}
/* Le sceau : l'étoile de l'emblème en grand, le titre à la place du L. Tout est
   mesuré en em de la taille du titre : la ligne la plus longue (« written by hand. »,
   6,9 em) tient à l'intérieur des filets intérieurs du carré et du losange, avec une
   marge d'un tiers d'em. Le carré droit fait 70 % du côté du sceau, son filet
   intérieur 61,6 % (voir SEAL dans src/server.js). */
.intro-sceau {
  --cote: 12.8em;
  position: relative;
  display: grid;
  place-items: center;
  width: var(--cote);
  aspect-ratio: 1;
  /* Centré même quand il est plus large que la colonne (téléphone). */
  margin-inline: calc((100% - var(--cote)) / 2);
  font-size: clamp(2rem, 1rem + 4.2vw, 3.3rem);
}
.sceau {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  color: var(--or);
}
.sceau-fond { fill: var(--ivoire); }
.sceau-carre,
.sceau-losange {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.intro h1 {
  position: relative;
  font-size: 1em;
  line-height: 1.02;
  color: var(--or);
}
.intro h1 .ligne {
  display: block;
  overflow: hidden;
  /* Marge interne pour que les accents et la virgule ne soient pas coupés. */
  padding-block: .08em;
  margin-block: -.04em;
}
.intro h1 .ligne > span { display: block; }
.intro-texte {
  max-width: 40rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: 1.9;
}
.intro .lien-souligne { margin-top: 2.25rem; }

/* ---------------------------------------------------------------- */
/* Titres de section                                                 */
/* ---------------------------------------------------------------- */
.section-titre { max-width: 44rem; }
.section-titre h2 { font-size: clamp(2.3rem, 4.4vw, 3.6rem); }
.section-intro {
  max-width: 30rem;
  margin-top: 1.5rem;
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: 1.85;
}
/* Sections larges : le titre à gauche, l'introduction calée en bas à droite. */
.etapes .section-titre,
.suite .section-titre {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  column-gap: 3rem;
  align-items: end;
  max-width: none;
}
.etapes .section-titre .surtitre,
.suite .section-titre .surtitre { grid-column: 1 / -1; }
.etapes .section-intro { margin-top: 0; }

/* ---------------------------------------------------------------- */
/* Choix des étapes : une liste de lignes, la carte à droite         */
/* ---------------------------------------------------------------- */
.etapes { padding-block: var(--section); }
.etapes-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: clamp(2rem, 4.5vw, 4.5rem);
  margin-top: clamp(3rem, 6vw, 4.5rem);
  align-items: start;
}

.liste-etapes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border: 0;
  border-top: 1px solid var(--filet);
  padding: 0;
  margin: 0;
  min-width: 0;
}

/* Une étape : l'étoile, le nom, la région et le résumé, le rang à droite. */
.etape {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 1.1rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--filet);
  cursor: pointer;
}
/* La case reste dans la page (clavier, lecteurs d'écran) mais ne prend aucune place :
   sans taille fixée, elle hériterait de la largeur des champs et déborderait. */
.etape input {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}
.etape:has(input:focus-visible) { outline: 2px solid var(--encre); outline-offset: 4px; }

/* L'étoile sert de case à cocher, alignée sur le nom. L'étoile reste positionnée :
   ses deux carrés (::before, ::after) se calent sur elle. */
.etape .etoile {
  position: relative;
  margin-top: .45rem;
  --taille: 14px;
  color: var(--gris);
  transition: transform .6s var(--courbe), color .3s ease;
}
.etape:hover .etoile,
.etape.est-survole .etoile { color: var(--or); }
.etape:has(input:checked) .etoile {
  --remplissage: var(--or-aplat);
  color: var(--or);
  transform: rotate(45deg);
}

/* Le rang dans le circuit : une étiquette cernée d'or, à droite. */
.etape-marque {
  margin-top: .3rem;
  font-size: .6875rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--or-texte);
}
.etape-marque:not(:empty) {
  padding: .45rem .6rem;
  border: 1px solid var(--or);
}

.etape-corps { display: block; }
.etape-nom {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem .9rem;
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 330;
  letter-spacing: -.01em;
  line-height: 1.1;
}
.etape-region {
  font-family: var(--sans);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--gris);
}
.etape-resume {
  display: block;
  margin-top: .45rem;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--gris);
}
/* Le détail se déplie à la hauteur de son texte : grille 0fr → 1fr. */
.etape-detail {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .5s var(--courbe), opacity .3s ease, margin-top .5s var(--courbe);
}
.etape-detail > span {
  display: block;
  min-height: 0;
  overflow: hidden;
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--encre);
}
.etape-detail > span::before {
  content: "";
  display: block;
  width: 2rem;
  height: 1px;
  margin-bottom: .8rem;
  background: var(--or-aplat);
}
.etape:has(input:checked) .etape-detail {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: .9rem;
}

/* Villes personnalisées : la ligne porte en plus la liste des villes, sous la case. */
.etape.etape-perso {
  display: block;
  padding: 0;
  cursor: default;
}
.etape-perso > label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 1.1rem;
  padding: 1.6rem 0;
  cursor: pointer;
}
.etape-choix {
  display: grid;
  gap: .6rem;
  margin: 0;
  border: 0;
  min-width: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  /* visibility retire aussi la liste de l'ordre de tabulation tant qu'elle est fermée. */
  visibility: hidden;
  padding: 0 0 0 calc(14px + 1.1rem);
  transition: max-height .45s var(--courbe), opacity .3s ease, padding .45s ease, visibility .45s;
}
.etape-perso:has(input:checked) .etape-choix {
  max-height: 24rem;
  opacity: 1;
  visibility: visible;
  padding-bottom: 1.75rem;
}
.etape-choix legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: .8rem;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}
/* Liste des villes : cases à cocher sur plusieurs colonnes, défilante si besoin. */
.villes-grille {
  clear: both;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: .1rem 1rem;
  max-height: 17rem;
  overflow-y: auto;
  padding: .75rem 1rem;
  background: var(--ivoire);
  border: 1px solid var(--filet);
}
.ville-case {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .35rem 0;
  font-size: .9375rem;
  color: var(--encre);
  cursor: pointer;
}
.etape .ville-case input {
  position: static;
  opacity: 1;
  pointer-events: auto;
  appearance: auto;
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  padding: 0;
  accent-color: var(--or);
}

/* La carte : posée sur fond blanc, et qui suit le défilement. */
.carte-colonne {
  position: sticky;
  top: calc(var(--entete) + 1.5rem);
  display: grid;
  gap: 1.25rem;
}
.carte-cadre {
  position: relative;
  padding: clamp(1rem, 2vw, 1.5rem);
  background: var(--blanc);
}
.carte-cadre svg { display: block; width: 100%; height: auto; }

.carte-bilan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.compteur-etapes {
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris);
}
.compteur-etapes b {
  display: inline-block;
  margin-right: .5rem;
  font-family: var(--serif);
  font-size: 3.5rem;
  font-weight: 300;
  line-height: .8;
  letter-spacing: 0;
  color: var(--or);
  font-variant-numeric: tabular-nums;
}

.carte-legende {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--gris);
}
.carte-legende::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  background: var(--or);
  transform: translateY(-.15em) rotate(45deg);
}

/* Éléments de la carte.
   Les tailles sont en unités de l'image (2000 de large) : ×0,4 environ à l'écran.
   L'image (public/maroc-3d.webp) est en relief, sur fond transparent ; les noms
   des villes sont écrits par-dessus, droits, pour rester lisibles. */
.carte-route {
  fill: none;
  stroke: var(--encre);
  stroke-width: 6;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 22 18;
  transition: stroke-dashoffset .6s ease;
}
.carte-pin .zone { fill: transparent; }
/* Pas d'anneau au repos : seul le point de la ville est visible. */
.carte-pin .anneau {
  fill: transparent;
  stroke: transparent;
  stroke-width: 6;
  transition: fill .25s ease, stroke .25s ease, r .25s ease;
}
.carte-pin .point,
.repere-point { fill: var(--blanc); }
.carte-pin .point.est-sur-image { display: none; }
.carte-pin.est-cache { display: none; }
/* Repères toujours nommés (grandes villes, étapes principales) : non cliquables.
   Un nom sans place libre s'efface devant les étapes choisies (public/app.js). */
.carte-reperes { pointer-events: none; }
.repere-nom.est-masque { display: none; }
.carte-pin .nom,
.repere-nom {
  font-family: var(--sans);
  font-size: 30px;
  font-weight: 500;
  fill: var(--encre);
  /* Liseré blanc, comme le fond : le nom reste lisible sur le relief comme s'il croise un tracé. */
  paint-order: stroke;
  stroke: var(--blanc);
  stroke-width: 8px;
  stroke-linejoin: round;
}
.carte-pin.est-choisi .anneau { fill: var(--encre); stroke: var(--blanc); }
.carte-pin .numero {
  font-family: var(--sans);
  font-size: 26px;
  font-weight: 600;
  fill: var(--blanc);
  opacity: 0;
  transition: opacity .2s ease;
}
.carte-pin.est-choisi .numero { opacity: 1; }

/* Carte interactive : un clic sur un point coche l'étape correspondante. */
.est-interactive .carte-pin { cursor: pointer; }
.est-interactive .carte-pin:hover .anneau,
.carte-pin.est-survole .anneau { r: 27; stroke: var(--blanc); }
.est-interactive .carte-pin:hover:not(.est-choisi) .anneau,
.carte-pin.est-survole:not(.est-choisi) .anneau { fill: var(--or-aplat); }

.carte-bulle {
  position: absolute;
  z-index: 2;
  max-width: 16rem;
  margin: 0;
  padding: .8rem 1rem .85rem;
  background: var(--blanc);
  border: 1px solid var(--filet);
  box-shadow: 0 18px 40px -22px rgba(29, 29, 29, .35);
  color: var(--encre);
  font-size: .8125rem;
  line-height: 1.45;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 16px));
}
/* Petite pointe sous la bulle, vers le repère. */
.carte-bulle::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  background: var(--blanc);
  border-right: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
  transform: rotate(45deg);
}
.carte-bulle[hidden] { display: none; }
.carte-bulle .bulle-texte { margin: 0; }
.carte-bulle .bulle-texte[hidden] { display: none; }
.carte-bulle b {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.2rem;
  letter-spacing: -.01em;
}
.carte-bulle .region { margin-left: .35rem; font-size: .625rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.carte-bulle .resume { display: block; margin-top: .3rem; color: var(--gris); }

/* ---------------------------------------------------------------- */
/* Formulaire : des champs soulignés, sur un panneau ivoire          */
/* ---------------------------------------------------------------- */
.coordonnees {
  padding-block: var(--section);
  background: var(--ivoire);
}
.coordonnees-grille {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: start;
}
.coordonnees-cote {
  position: sticky;
  top: calc(var(--entete) + 2rem);
}

/* Trois engagements, rappelés à côté du formulaire. */
.engagements {
  margin: 2.75rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--filet);
}
.engagements li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--filet);
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--gris);
}
.engagements .etoile { --taille: 10px; margin-top: .45rem; color: var(--or); }

.formulaire-carte { min-width: 0; }

.alerte {
  margin-bottom: 2.25rem;
  padding: 1.2rem 1.4rem;
  background: rgba(179, 38, 30, .05);
  border: 1px solid rgba(179, 38, 30, .45);
  color: var(--encre);
  font-size: .9375rem;
}
.alerte h3 {
  margin-bottom: .5rem;
  font-size: 1.4rem;
  color: var(--erreur);
}
.alerte ul { margin: 0; padding-left: 1.15rem; }
.alerte li + li { margin-top: .2rem; }
.alerte a { color: inherit; }

.champs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.25rem 2rem;
}
.champ { display: flex; flex-direction: column; gap: .35rem; }
.champ-large { grid-column: 1 / -1; }
fieldset.champ { margin: 0; padding: 0; border: 0; min-width: 0; }
.champ > label,
.champ > legend {
  padding: 0;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--encre);
}
.champ > legend { margin-bottom: .75rem; }

/* 4x4 ou bus : deux cases rectangulaires, de la hauteur d'un champ. */
.choix-groupe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.choix-case {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: 3.25rem;
  padding: 0 1.1rem;
  border: 1px solid var(--trait);
  font-size: 1rem;
  color: var(--encre);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.choix-case:hover { border-color: var(--gris); }
.choix-case:has(input:checked) { border-color: var(--encre); background: var(--blanc); }
.choix-case:has(input:focus-visible) { outline: 2px solid var(--encre); outline-offset: 2px; }
.choix-case input {
  appearance: auto;
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  accent-color: var(--or);
  cursor: pointer;
}
.choix-case input:focus-visible { outline: none; }

.champs-consigne {
  margin-bottom: 2rem;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris);
}
.champ-aide {
  margin-top: .45rem;
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--gris);
}
.champ-erreur {
  margin-top: .35rem;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--erreur);
}
.champ-erreur::before { content: "⚠ "; }
.liste-etapes > .champ-erreur { display: block; padding: .25rem 0 .5rem; }
[aria-invalid="true"]:not(fieldset) { border-color: var(--erreur); }

/* Accord pour l'utilisation des données */
.accord {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .45rem .9rem;
  align-items: start;
  margin-top: 2.75rem;
  padding-top: 2rem;
  border-top: 1px solid var(--filet);
}
.accord input {
  appearance: auto;
  width: 1.15rem;
  height: 1.15rem;
  min-height: 0;
  margin: .2rem 0 0;
  padding: 0;
  border: 0;
  accent-color: var(--or);
  cursor: pointer;
}
.accord label { font-size: .9375rem; line-height: 1.55; cursor: pointer; }
.accord .champ-aide,
.accord .champ-erreur { grid-column: 2; margin-top: 0; }

.facultatif { font-weight: 400; letter-spacing: .02em; text-transform: none; color: var(--gris); }

input, select, textarea {
  appearance: none;
  width: 100%;
  padding: .7rem 0;
  border: 0;
  border-bottom: 1px solid var(--trait);
  border-radius: 0;
  background: transparent;
  color: var(--encre);
  font-size: 1.0625rem;
  line-height: 1.5;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
/* Même hauteur pour les champs texte, les listes et les cases 4x4 / bus. */
input:not([type="checkbox"]):not([type="radio"]), select { min-height: 3.25rem; }
input:hover, select:hover, textarea:hover { border-color: var(--gris); }
/* Focus : le trait s'épaissit et fonce. */
input:not([type="checkbox"]):not([type="radio"]):focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--encre);
  box-shadow: 0 1px 0 0 var(--encre);
}
/* Remplissage automatique du navigateur : garder le fond du panneau et le texte anthracite. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--encre);
  caret-color: var(--encre);
  box-shadow: 0 0 0 100px var(--ivoire) inset;
}
textarea {
  min-height: 9rem;
  margin-top: .35rem;
  padding: .9rem 1rem;
  border: 1px solid var(--trait);
  background: var(--blanc);
  resize: vertical;
}
textarea:focus-visible { box-shadow: 0 0 0 1px var(--encre); }
select {
  padding-right: 2rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--encre) 50%), linear-gradient(135deg, var(--encre) 50%, transparent 50%);
  background-position: calc(100% - 11px) 55%, calc(100% - 6px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
select option { background: var(--blanc); color: var(--encre); }

.compteur-signes {
  align-self: flex-end;
  font-size: .75rem;
  color: var(--gris);
  font-variant-numeric: tabular-nums;
}

.envoi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2rem;
  margin-top: 2.25rem;
  padding-top: 2rem;
  border-top: 1px solid var(--filet);
}
.envoi p { flex: 1 1 16rem; font-size: .875rem; line-height: 1.6; color: var(--gris); }
.envoi a, .accord a { color: var(--encre); }

.honeypot { display: none !important; }

/* ---------------------------------------------------------------- */
/* Suite du parcours : trois colonnes, de grands chiffres en or      */
/* ---------------------------------------------------------------- */
.suite { padding-block: var(--section); }
.suite-liste {
  list-style: none;
  counter-reset: etape;
  margin: clamp(3rem, 6vw, 4.5rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--filet);
}
.suite-liste li {
  counter-increment: etape;
  padding: 2.5rem clamp(1.25rem, 3vw, 2.5rem) 0 0;
}
.suite-liste li + li {
  padding-left: clamp(1.25rem, 3vw, 2.5rem);
  border-left: 1px solid var(--filet);
}
.suite-liste li::before {
  content: "0" counter(etape);
  display: block;
  margin-bottom: 2rem;
  font-family: var(--serif);
  font-size: clamp(3.75rem, 6.5vw, 5.5rem);
  font-weight: 250;
  line-height: .85;
  letter-spacing: -.02em;
  color: var(--or);
  font-variant-numeric: lining-nums tabular-nums;
}
.suite-liste h3 { margin-bottom: .8rem; }
.suite-liste p { max-width: 24rem; font-size: .9375rem; line-height: 1.75; color: var(--gris); }

/* ---------------------------------------------------------------- */
/* Appel : un panneau ivoire, le titre en or, les affiches en tirages */
/* ---------------------------------------------------------------- */
.appel {
  padding-block: var(--section);
  background: var(--ivoire);
  /* Les affiches en éventail dépassent à droite : sans ça, sur téléphone, la page
     entière devenait plus large que l'écran. */
  overflow-x: clip;
}
.appel-carte {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: center;
}
.appel-texte h2 {
  font-size: clamp(2.4rem, 4.6vw, 3.9rem);
  color: var(--or);
}
.appel-texte p { max-width: 28rem; margin-top: 1.75rem; font-size: 1.0625rem; font-weight: 300; line-height: 1.85; }
.appel-texte .bouton { margin-top: 2.5rem; }

/* Pile d'affiches : chaque affiche entière, avec sa marge, comme un tirage
   posé sur une pile. Celle du dessus est droite ; deux autres dépassent
   derrière, décalées et tournées, un peu fondues dans le panneau. À chaque
   tour, celle du dessus part sur le côté et la suivante avance d'un cran.
   La place de chaque affiche (data-place) est posée par public/app.js ;
   sans JavaScript, seule la première est visible. Les commandes passent
   sous la pile. */
.affiches {
  position: relative;
  justify-self: end;
  /* Place laissée à droite pour les affiches qui dépassent derrière. */
  --debord: clamp(2rem, 5vw, 4rem);
  width: calc(100% - var(--debord));
  max-width: 25rem;
  aspect-ratio: 1414 / 2000;
  margin-right: var(--debord);
  margin-bottom: 4.5rem;
}
.pile {
  position: absolute;
  inset: 0;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.diapo {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  z-index: 1;
  background: var(--ivoire-2);
  box-shadow: 0 40px 60px -34px rgba(29, 29, 29, .5);
  transform-origin: 50% 85%;
  transform: translate(20%, -4%) rotate(11deg) scale(.9);
  transition: transform 1s var(--courbe), opacity .7s ease;
}
/* Un voile ivoire estompe les affiches de derrière : celle du dessus reste la seule nette. */
.diapo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ivoire);
  opacity: .7;
  pointer-events: none;
  transition: opacity .8s ease;
}
.diapo[data-place="0"] {
  z-index: 5;
  opacity: 1;
  cursor: pointer;
  transform: translateX(var(--tire, 0px)) rotate(calc(-1deg + var(--penche, 0deg)));
}
.diapo[data-place="0"]::after { opacity: 0; }
.diapo[data-place="1"] {
  z-index: 4;
  opacity: 1;
  transform: translate(8%, -2.5%) rotate(4deg) scale(.96);
}
.diapo[data-place="1"]::after { opacity: .32; }
.diapo[data-place="2"] {
  z-index: 3;
  opacity: 1;
  transform: translate(15%, -4.5%) rotate(8deg) scale(.92);
}
.diapo[data-place="2"]::after { opacity: .55; }
/* Celle qui vient de partir : elle glisse à gauche en tournant et s'efface
   (c'est aussi de là que revient la précédente). */
.diapo[data-place="-1"] {
  z-index: 6;
  opacity: 0;
  transform: translate(-65%, 7%) rotate(-13deg) scale(.95);
  transition: transform 1s var(--courbe), opacity .55s ease;
}
/* Tirée du doigt ou de la souris, l'affiche du dessus suit sans délai. */
.est-tiree .diapo[data-place="0"] { transition: none; cursor: grabbing; }

/* Au survol, la pile s'évase un peu, comme feuilletée. */
@media (hover: hover) and (pointer: fine) {
  .pile:hover .diapo[data-place="1"] { transform: translate(11%, -3.5%) rotate(6deg) scale(.96); }
  .pile:hover .diapo[data-place="2"] { transform: translate(21%, -6%) rotate(11deg) scale(.92); }
}
.diapo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  pointer-events: none;
}
/* Affiches plus étroites que le cadre : leur titre doit rester visible. */
.cadrage-haut img { object-position: center 8%; }
.cadrage-bas img { object-position: center 96%; }

.diaporama-controles {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: .75rem;
}
.diaporama-controles[hidden] { display: none; }
.affiches .diaporama-controles {
  top: calc(100% + 1.5rem);
  bottom: auto;
  left: 0;
  right: 0;
}
.affiches .diaporama-pause { width: 2.5rem; height: 2.5rem; }

/* Flèches de la pile : même cadre que le bouton pause, la flèche glisse au survol. */
.diaporama-fleche {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--filet-fort);
  background: transparent;
  color: var(--encre);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.diaporama-fleche::before { transition: transform .35s var(--courbe); }
.fleche-precedente::before { content: "←"; }
.fleche-suivante::before { content: "→"; }
.fleche-suivante { margin-left: -.25rem; }
.diaporama-fleche:hover { border-color: var(--encre); background: var(--encre); color: var(--blanc); }
.fleche-precedente:hover::before { transform: translateX(-3px); }
.fleche-suivante:hover::before { transform: translateX(3px); }
.diaporama-pause {
  display: grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--filet-fort);
  background: transparent;
  color: var(--encre);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.diaporama-pause:hover { border-color: var(--encre); background: var(--encre); color: var(--blanc); }
/* Deux barres = pause ; un triangle = lecture. */
.icone-pause {
  width: 8px;
  height: 10px;
  border-left: 2px solid currentColor;
  border-right: 2px solid currentColor;
}
.est-en-pause .icone-pause {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 9px;
  border-color: transparent transparent transparent currentColor;
  margin-left: 2px;
}

/* Une barre par image ; celle en cours se remplit pendant son temps
   d'affichage (--duree, posé par public/app.js d'après data-delai). */
.diaporama-points { flex: 1; display: flex; align-items: center; gap: 4px; }
.diaporama-point {
  position: relative;
  flex: 1;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.diaporama-point::before,
.diaporama-point::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 2px;
  margin-top: -1px;
}
.diaporama-point::before { background: rgba(29, 29, 29, .16); transition: background .3s ease; }
.diaporama-point:hover::before { background: rgba(29, 29, 29, .45); }
.diaporama-point::after {
  background: var(--encre);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.diaporama-point[aria-current="true"]::after { animation: remplit var(--duree, 4s) linear forwards; }
/* En pause, la barre en cours reste pleine. */
.est-en-pause .diaporama-point[aria-current="true"]::after { animation: none; transform: none; }
@keyframes remplit { to { transform: scaleX(1); } }

/* Légende du diaporama d'accueil : numéro et titre de l'œuvre. */
.diaporama-legende {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin: 0;
  font-size: .75rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--encre);
}
.legende-numero { color: var(--gris); font-variant-numeric: tabular-nums; }
.legende-titre[hidden] { display: none; }

/* ---------------------------------------------------------------- */
/* Page de confirmation                                              */
/* ---------------------------------------------------------------- */
.recu { padding-block: clamp(3.5rem, 7vw, 6rem) var(--section); }
.recu-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.recu h1 { font-size: clamp(2.75rem, 6vw, 5rem); max-width: 12ch; color: var(--or); }
.recu-texte {
  max-width: 34rem;
  margin-top: 1.75rem;
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: 1.85;
}
.recu-texte strong { font-weight: 600; }

.recu .etoile {
  --taille: 34px;
  --epaisseur: 1.5px;
  margin-bottom: 2.25rem;
  color: var(--or);
  /* Un seul tour : pas de mouvement permanent à côté du texte. */
  animation: tourne 2.4s var(--courbe) 1;
}
@keyframes tourne {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.recap {
  display: grid;
  max-width: 34rem;
  margin: 2.5rem 0 0;
  border-top: 1px solid var(--filet);
}
.recap div {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: baseline;
  padding-block: 1rem;
  border-bottom: 1px solid var(--filet);
}
.recap dt {
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris);
}
.recap dd { margin: 0; font-weight: 500; text-align: right; }

.retour { margin-top: 2.5rem; }

/* Page « votre e-mail est prêt » */
.sans-coupure { white-space: nowrap; }
.brouillon-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.brouillon-note { margin-top: 1rem; font-size: .9375rem; color: var(--gris); }
.brouillon-note a { color: var(--encre); }

/* Page d'erreur */
.souci { padding-block: clamp(3.5rem, 7vw, 6rem) var(--section); }
.souci h1 { font-size: clamp(2.6rem, 5.4vw, 4.5rem); max-width: 16ch; }
.souci p { margin-top: 1.5rem; max-width: 34rem; font-size: 1.0625rem; font-weight: 300; line-height: 1.85; }

/* Page introuvable (404) : le message et les actions à gauche, l'œuvre à droite,
   légendée comme un cartel (même principe que le diaporama d'accueil). */
.perdu-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.perdu h1 { text-wrap: balance; color: var(--or); }
/* L'étiquette garde sa taille d'étiquette, malgré la règle des paragraphes de .souci. */
.souci .surtitre { margin-top: 0; font-size: .8125rem; font-weight: 500; line-height: 1.2; }
.perdu-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }
.souci .perdu-contact { margin-top: 2rem; font-size: .9375rem; }
.perdu-contact a { color: var(--encre); }
.perdu-oeuvre { margin: 0; }
.perdu-oeuvre img { display: block; width: 100%; height: auto; }
.perdu-oeuvre figcaption { margin-top: .875rem; font-size: .8125rem; color: var(--gris); }

/* Page de vérification anti-robots (Cloudflare Turnstile) */
.verification-form { margin-top: 2.25rem; display: grid; gap: 1.25rem; justify-items: start; }
.verification-form .cf-turnstile { min-height: 65px; }
.souci .verification-etat { margin-top: 0; min-height: 1.5em; font-size: .9375rem; }
.souci .verification-alerte { color: var(--erreur); }
.secret-propose { display: inline-block; max-width: 100%; overflow-wrap: anywhere; padding: .5rem .75rem; background: var(--ivoire-2); color: var(--encre); }
.souci .verification-note { margin-top: 2rem; font-size: .9375rem; }
.verification-note a { color: var(--encre); }

/* ---------------------------------------------------------------- */
/* Bouton WhatsApp flottant, en verre liquide                        */
/* ---------------------------------------------------------------- */
/* Un disque de verre : ce qui passe dessous est flouté et ravivé, un voile blanc
   garde l'icône lisible sur les photos comme sur le blanc, un reflet éclaire le
   haut et un liseré lumineux dessine le bord. Seul élément rond du site : le
   verre liquide tient à sa forme de goutte. */
.whatsapp {
  position: fixed;
  right: max(1.25rem, env(safe-area-inset-right));
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  z-index: 40;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 50%;
  background: linear-gradient(160deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .34) 55%, rgba(255, 255, 255, .5) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(1.8);
  backdrop-filter: blur(16px) saturate(1.8);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .9),
    inset 0 -1px 2px rgba(255, 255, 255, .35),
    inset 0 0 14px rgba(255, 255, 255, .25),
    0 12px 30px -12px rgba(29, 29, 29, .4),
    0 2px 6px rgba(29, 29, 29, .08);
  color: var(--encre);
  transition: background .3s ease, box-shadow .3s ease, transform .35s var(--courbe);
}
/* Reflet : une lueur en haut à gauche, comme la lumière sur une goutte. */
.whatsapp::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(120% 80% at 30% 0%, rgba(255, 255, 255, .75) 0%, rgba(255, 255, 255, 0) 55%);
  pointer-events: none;
}
.whatsapp:hover {
  background: linear-gradient(160deg, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, .5) 55%, rgba(255, 255, 255, .66) 100%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 1),
    inset 0 -1px 2px rgba(255, 255, 255, .45),
    inset 0 0 16px rgba(255, 255, 255, .35),
    0 16px 34px -12px rgba(29, 29, 29, .45),
    0 2px 6px rgba(29, 29, 29, .1);
  transform: translateY(-2px) scale(1.04);
}
/* Moins de transparence demandée (sous Windows, dès que les « effets de transparence »
   sont coupés) : le verre reste, mais son voile s'épaissit. */
@media (prefers-reduced-transparency: reduce) {
  .whatsapp { background: linear-gradient(160deg, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, .6) 55%, rgba(255, 255, 255, .72) 100%); }
}
/* Sans flou d'arrière-plan : un disque blanc presque plein, toujours lisible. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .whatsapp, .whatsapp:hover { background: rgba(255, 255, 255, .94); }
}
/* Accueil : le bouton se pose au-dessus de la barre blanche, sans couvrir son bouton d'or. */
.page-accueil .whatsapp { bottom: calc(max(1.25rem, env(safe-area-inset-bottom)) + var(--barre)); }
.whatsapp svg { display: block; width: 26px; height: 26px; }
@media (max-width: 620px) {
  .whatsapp { width: 52px; height: 52px; }
}
@media print { .whatsapp { display: none; } }

/* ---------------------------------------------------------------- */
/* Écran d'ouverture : l'emblème sur fond blanc, avant le site        */
/* ---------------------------------------------------------------- */
/* Première arrivée sur l'accueil seulement (voir isFirstVisit dans src/server.js).
   Le L apparaît en fondu et ne bouge pas ; l'étoile arrive en tournant d'un
   demi-tour et se pose dans l'axe du logo ; puis l'emblème grandit un peu en
   s'effaçant et l'écran blanc s'ouvre sur le site. 2,4 s en tout, sans JavaScript :
   à la fin, l'écran est caché (visibility) et ne retient plus aucun clic. */
.ouverture {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  background: var(--blanc);
  animation: ouverture-sort .65s ease 1.75s forwards;
}
.ouverture-embleme {
  display: block;
  width: clamp(6.5rem, 12vw, 9rem);
  height: auto;
  overflow: visible;
  color: var(--or);
  animation: ouverture-envol .65s cubic-bezier(.55, 0, .45, 1) 1.75s forwards;
}
.ouverture-lettre { animation: fondu .7s ease .1s backwards; }
.ouverture-etoile {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: ouverture-tourne 1.5s cubic-bezier(.65, 0, .35, 1) .1s backwards;
}
@keyframes ouverture-tourne {
  from { opacity: 0; transform: rotate(-180deg) scale(.82); }
  30% { opacity: 1; }
  to { opacity: 1; transform: none; }
}
@keyframes ouverture-envol {
  to { opacity: 0; transform: scale(1.12); }
}
@keyframes ouverture-sort {
  to { opacity: 0; visibility: hidden; }
}
@media print { .ouverture { display: none; } }

/* ---------------------------------------------------------------- */
/* Pied de page : les liens, l'emblème au centre, la mention sur ivoire */
/* ---------------------------------------------------------------- */
.site-footer {
  padding-top: clamp(4rem, 7vw, 5.5rem);
  background: var(--blanc);
  box-shadow: 0 -2px 6px rgba(0, 0, 0, .05);
  font-size: .9375rem;
  color: var(--gris);
}
.pied-haut {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem clamp(2rem, 5vw, 4rem);
}
.pied-identite { display: grid; gap: .35rem; align-content: start; }
.pied-accroche {
  max-width: 30ch;
  margin-bottom: .85rem;
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 330;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--encre);
}
.site-footer a { color: var(--encre); }
.pied-titre {
  margin-bottom: 1.1rem;
  font-family: var(--sans);
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--encre);
}
.pied-liens { display: grid; gap: .75rem; }
.pied-liens a {
  justify-self: start;
  font-size: .8125rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .2s ease;
}
.pied-liens a:hover { color: var(--or-texte); }
/* L'emblème et le nom du site, centrés, comme une signature. */
.pied-marque {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin: clamp(3rem, 6vw, 4.5rem) 0 0;
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--filet);
  color: var(--encre);
  user-select: none;
}
.pied-marque .embleme { width: 3.5rem; height: 3.5rem; }
.pied-marque .marque-texte { justify-items: center; }
/* Mention en bas de page : une bande ivoire, présente, jamais envahissante. */
.pied-bas {
  padding-block: 1.5rem;
  background: var(--ivoire);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--encre);
}
.pied-bas .enveloppe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}
.pied-bas .langues a { font-size: .75rem; }

/* ---------------------------------------------------------------- */
/* Pages légales                                                     */
/* ---------------------------------------------------------------- */
.legal { padding-block: clamp(3.5rem, 7vw, 6rem) var(--section); }
.legal .enveloppe { max-width: 880px; }
/* Pages légales traduites : le texte français reste celui qui engage. */
.legal-note-traduction { margin-top: 1rem; font-size: .875rem; color: var(--gris); }
.legal h1 { font-size: clamp(2.6rem, 5.4vw, 4.25rem); color: var(--or); }
.legal .enveloppe > .legal-maj {
  margin-top: 1.25rem;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris);
}
.legal .enveloppe > p { margin-top: 1.5rem; font-size: 1.0625rem; line-height: 1.8; }
.legal-sommaire {
  margin-top: 2.5rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
  font-size: .9375rem;
}
.legal-sommaire ol { margin: 0; padding-left: 1.3rem; columns: 2 16rem; column-gap: 2rem; }
.legal-sommaire li { padding-block: .15rem; }
.legal section { margin-top: 3.5rem; line-height: 1.75; }
.legal h2 { font-size: clamp(1.75rem, 3.2vw, 2.4rem); }
.legal section > * + * { margin-top: .9rem; }
.legal section > h2 + * { margin-top: 1.25rem; }
.legal ul { padding-left: 1.2rem; }
.legal li + li { margin-top: .35rem; }
.legal a { color: var(--encre); }
.legal-fiche { display: grid; gap: .6rem; margin: 1rem 0 0; }
.legal-fiche div { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: .25rem 1.25rem; padding-bottom: .6rem; border-bottom: 1px solid var(--filet); }
.legal-fiche dt { font-weight: 600; }
.legal-fiche dd { margin: 0; color: var(--gris); }
.legal-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: .75rem .85rem; border-bottom: 1px solid var(--filet); }
.legal-table th { font-weight: 600; background: var(--ivoire); }
.legal-note { font-size: .875rem; color: var(--gris); }
@media (max-width: 620px) {
  .legal-fiche div { grid-template-columns: 1fr; }
  .legal-table th, .legal-table td { padding: .6rem .5rem; }
}

/* ---------------------------------------------------------------- */
/* Apparition au défilement (posée par public/app.js, jamais sans JS) */
/* ---------------------------------------------------------------- */
.a-reveler {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(6px);
}
.revele {
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity .9s ease, transform 1.1s var(--courbe), filter .9s ease;
}
/* Délai d'échelonnement posé par public/app.js sur les éléments d'une liste. */
.revele { transition-delay: var(--delai, 0s); }

/* Le titre d'accueil : le carré du sceau apparaît, le losange tourne depuis lui
   pour former l'étoile, le fond ivoire s'y pose, puis chaque ligne du titre monte
   depuis sa fenêtre et le texte suit. Tout finit avant 1,8 s : public/app.js retire
   alors .revele et les éléments reprennent leur état normal. */
.intro-contenu.a-reveler { opacity: 1; transform: none; filter: none; }
.intro-contenu.a-reveler .sceau-carre { opacity: 0; transform: scale(.9); }
.intro-contenu.a-reveler .sceau-losange { opacity: 0; transform: rotate(-45deg); }
.intro-contenu.a-reveler .sceau-fond { opacity: 0; }
.intro-contenu.a-reveler .ligne > span { transform: translateY(105%); }
.intro-contenu.a-reveler .intro-texte,
.intro-contenu.a-reveler .lien-souligne { opacity: 0; transform: translateY(16px); }
.intro-contenu.revele .sceau-carre { transition: opacity .8s ease, transform 1.2s var(--courbe); }
.intro-contenu.revele .sceau-losange { transition: opacity .6s ease .1s, transform 1.5s var(--courbe) .1s; }
.intro-contenu.revele .sceau-fond { transition: opacity .9s ease .5s; }
.intro-contenu.revele .ligne > span { transition: transform 1.1s var(--courbe) .3s; }
.intro-contenu.revele .ligne:nth-child(2) > span { transition-delay: .4s; }
.intro-contenu.revele .ligne:nth-child(3) > span { transition-delay: .5s; }
.intro-contenu.revele .intro-texte,
.intro-contenu.revele .lien-souligne { transition: opacity .9s ease .6s, transform 1.1s var(--courbe) .6s; }

/* L'appel : le titre monte, puis le tirage le rejoint. */
.appel-carte.a-reveler { transform: none; filter: none; opacity: 1; }
.appel-carte.a-reveler .appel-texte { opacity: 0; transform: translateY(28px); }
.appel-carte.a-reveler .affiches { opacity: 0; transform: translateY(40px) rotate(1.5deg); }
.appel-carte.revele .appel-texte,
.appel-carte.revele .affiches {
  transition: opacity .9s ease .1s, transform 1.2s var(--courbe) .1s;
}
.appel-carte.revele .affiches { transition-delay: .3s; }

/* ---------------------------------------------------------------- */
/* Transitions liées au défilement et entre les pages                */
/* (navigateurs récents seulement ; ailleurs, rien ne change)        */
/* ---------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  /* En quittant l'accueil, la photo descend plus lentement que la page,
     sous la barre blanche qui reste nette. */
  @supports (animation-timeline: view()) {
    .hero { view-timeline: --accueil block; }
    .hero-photo {
      animation: recul 2.4s var(--courbe) backwards, parallaxe linear both;
      animation-timeline: auto, --accueil;
      animation-range: normal, exit 0% exit 100%;
    }
  }

  /* Changement de page : fondu enchaîné avec un léger glissement,
     l'en-tête reste en place. */
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: entete; }
  ::view-transition-old(root) { animation: page-sort .28s ease both; }
  ::view-transition-new(root) { animation: page-entre .5s var(--courbe) .08s both; }
}
@keyframes parallaxe {
  to { translate: 0 30%; }
}
@keyframes page-sort {
  to { opacity: 0; transform: translateY(-12px); }
}
@keyframes page-entre {
  from { opacity: 0; transform: translateY(18px); }
}

/* ---------------------------------------------------------------- */
/* Adaptations                                                       */
/* ---------------------------------------------------------------- */
/* L'en-tête tient sur une ligne : menu, emblème, langue et bouton. Le menu
   (aussi présent dans le pied de page) n'a toute sa place qu'à partir de 1280 px ;
   le bouton (aussi au pied de la photo d'accueil) disparaît sous 700 px. */
@media (max-width: 1279px) {
  .site-nav { display: none; }
}
@media (max-width: 700px) {
  .bouton-entete { display: none; }
}

/* Barre d'accueil moins large : les commandes du diaporama prennent la place du titre
   (même seuil que le menu : en dessous, titre et commandes se chevaucheraient). */
@media (max-width: 1279px) {
  .hero-barre-titre { visibility: hidden; }
  .hero .diaporama-controles { left: var(--marge); transform: none; }
}

@media (max-width: 980px) {
  .etapes .section-titre,
  .suite .section-titre { grid-template-columns: 1fr; }
  .etapes .section-intro { margin-top: 1.5rem; }

  .etapes-grille { grid-template-columns: 1fr; }
  .carte-colonne { position: static; max-width: 520px; }

  .coordonnees-grille { grid-template-columns: 1fr; }
  .coordonnees-cote { position: static; }

  .perdu-grille { grid-template-columns: 1fr; }
  .engagements { margin-top: 2rem; }

  .suite-liste { grid-template-columns: 1fr; }
  .suite-liste li,
  .suite-liste li + li {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    column-gap: 1.5rem;
    padding: 2rem 0;
    border-left: 0;
    border-bottom: 1px solid var(--filet);
  }
  .suite-liste li::before { grid-row: 1 / span 2; margin-bottom: 0; font-size: 4rem; }

  .appel-carte { grid-template-columns: 1fr; }
  .affiches { justify-self: start; max-width: 22rem; }

  .pied-haut { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pied-identite { grid-column: 1 / -1; }

  .recu-grille { grid-template-columns: 1fr; }
  .recu .carte-cadre { max-width: 460px; }
}

@media (max-width: 620px) {
  :root { --entete: 4.5rem; --barre: 4.25rem; }
  .hero-barre-bouton { min-width: 0; padding-inline: 1.25rem; font-size: .75rem; }
  .hero .diaporama-controles { gap: .9rem; }
  .hero .diaporama-points,
  .hero .legende-titre { display: none; }

  .champs { grid-template-columns: minmax(0, 1fr); }

  /* Téléphone : la carte n'est qu'un aperçu, on coche les étapes dans la liste. */
  .carte-pin { pointer-events: none; }

  .etape { gap: .9rem; padding-block: 1.35rem; }
  .etape-perso > label { gap: .9rem; padding: 1.35rem 0; }
  .etape-nom { font-size: 1.5rem; }
  .etape-marque { font-size: .625rem; }
  .etape-marque:not(:empty) { padding: .35rem .45rem; }
  .etape-choix { padding-left: 0; }

  .envoi .bouton { width: 100%; }
  .appel-texte .bouton { width: 100%; }
  .carte-bilan .bouton-contour { flex: 1; }

  .pied-haut { grid-template-columns: 1fr; }
  .pied-bas .enveloppe { padding-right: 5.5rem; }
}

/* Petit écran : l'emblème et le nom passent à gauche pour laisser sa place
   au choix de la langue, à droite. */
@media (max-width: 520px) {
  .site-header .enveloppe { grid-template-columns: auto minmax(0, 1fr); }
  .marque { grid-column: 1; justify-self: start; gap: .65rem; }
  .marque .embleme { width: 2.4rem; height: 2.4rem; }
  .entete-droite { grid-column: 2; }
  .langues a { padding-inline: .4rem; }
}
@media (max-width: 380px) {
  .marque-texte { font-size: .875rem; }
  .langues a { padding-inline: .3rem; }
}

/* ---------------------------------------------------------------- */
/* Mouvement réduit                                                  */
/* ---------------------------------------------------------------- */
/* « Moins d'animations » ne veut pas dire « aucune » : on garde les fondus
   (opacité, couleurs, flou) et on retire seulement ce qui se déplace,
   grossit, tourne ou se dévoile en glissant, et qui peut gêner. */
@media (prefers-reduced-motion: reduce) {
  /* Accueil : les photos se succèdent en fondu, sans zoom ni parallaxe ;
     la barre et le titre apparaissent en fondu au lieu de monter. */
  .hero-photo,
  .hero-photo.est-active { animation: none; scale: none; }
  .hero-barre-titre { animation-name: fondu; }
  .intro-contenu.a-reveler .ligne > span,
  .intro-contenu.a-reveler .intro-texte,
  .intro-contenu.a-reveler .lien-souligne { transform: none; }
  .intro-contenu.a-reveler .ligne > span { opacity: 0; }
  .intro-contenu.revele .ligne > span { transition: opacity .9s ease; }
  /* Écran d'ouverture : l'étoile garde son demi-tour, court (1,5 s), unique et
     limité au logo, comme un indicateur de chargement ; l'emblème ne grandit
     plus en sortant, l'écran s'efface seulement. */
  .ouverture-embleme { animation: none; }

  /* Le sceau apparaît déjà formé, en fondu, sans que le losange tourne. */
  .intro-contenu.a-reveler .sceau-carre,
  .intro-contenu.a-reveler .sceau-losange { transform: none; }

  /* Apparitions au défilement : fondu et flou, sans glissement. */
  .a-reveler,
  .appel-carte.a-reveler .appel-texte,
  .appel-carte.a-reveler .affiches { transform: none; }

  /* Pile d'affiches : elles restent à leur place et se relaient en fondu,
     sans glisser ni tourner. */
  .diapo,
  .diapo[data-place="-1"] { transition: opacity .7s ease; }
  .diapo[data-place="-1"] { transform: none; }
  .pile:hover .diapo[data-place="1"] { transform: translate(8%, -2.5%) rotate(4deg) scale(.96); }
  .pile:hover .diapo[data-place="2"] { transform: translate(15%, -4.5%) rotate(8deg) scale(.92); }

  /* Rotations : remplacées par un fondu, ou supprimées. */
  .recu .etoile { animation-name: fondu; }
  .etape:has(input:checked) .etoile { transform: none; }
  .whatsapp:hover { transform: none; }

  /* Changement de page : simple fondu enchaîné, sans glissement. */
  @view-transition { navigation: auto; }
}
@keyframes fondu {
  from { opacity: 0; }
}

/* ---------------------------------------------------------------- */
/* Impression : fond blanc, texte noir                               */
/* ---------------------------------------------------------------- */
@media print {
  html, body { background: #fff; color: #000; }
  .site-header, .skip-link, .hero, .appel .affiches, .pied-marque, .etape .etoile { display: none; }
  main { padding-top: 0; }
  body:not(.page-accueil) main { padding-top: 0; }
  .intro, .appel, .coordonnees { background: #fff; }
  .intro h1, .appel-texte h2 { color: #000; }
  .sceau-fond { fill: #fff; }
  .etapes-grille, .recu-grille, .coordonnees-grille, .appel-carte, .suite-liste, .liste-etapes { grid-template-columns: 1fr; }
  .a-reveler,
  .appel-carte.a-reveler .appel-texte,
  .appel-carte.a-reveler .affiches,
  .intro-contenu.a-reveler .ligne > span,
  .intro-contenu.a-reveler .intro-texte,
  .intro-contenu.a-reveler .lien-souligne,
  .intro-contenu.a-reveler .sceau-carre,
  .intro-contenu.a-reveler .sceau-losange,
  .intro-contenu.a-reveler .sceau-fond { opacity: 1; transform: none; filter: none; }
}