@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;900&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;700&display=swap');

:root{
  --navy: #0B1D3A;
  --sky: #4FA8E0;
  --cloud: #F7FAFC;
  --flag: #F97316;          /* orange de la marque (repris du logo) */
  --on-flag: #0B1D3A;       /* texte posé sur l'orange : le navy garde 6:1 de contraste,
                               là où du blanc sur cet orange tomberait à 2.8:1 */
  --sand: #D9C7A3;
  --ocean: #1B7A72;
  --muted: rgba(247,250,252,0.6);
  --glass-bg: rgba(255,255,255,0.06);
  --glass-bg-strong: rgba(255,255,255,0.1);
  --glass-border: rgba(255,255,255,0.14);
  --ease-out-expo: cubic-bezier(0.16,1,0.3,1);
  --font-display: 'Archivo', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  background: var(--navy);
  color: var(--cloud);
  font-family: var(--font-body);
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
video{ max-width:100%; display:block; }

/* ---------- CIEL INFINI ---------- */
/* Le ciel frémit : quatre images au dégradé et à la palette identiques, seul le placement
   des pixels tramés diffère (≈10 % des pixels d'une image à l'autre). Le défilement à
   `steps(1)` produit une coupe nette — un fondu lisserait justement ce qu'on veut voir. */
:root{
  --ciel-degrade: linear-gradient(to bottom, #071633 0%, #123B6B 35%, #4FA8E0 75%, #BFE3F7 100%);
}
.sky{
  position: fixed;
  inset: -6vh -6vw;
  z-index:0;
  /* position de depart a 0 % : le module 1 la fait glisser jusqu'a 100 % au fil du scroll.
     L'image est volontairement bien plus haute que large — c'est son depassement sous le
     cadre en `cover` qui donne la course, et rien d'autre. */
  background: url('images/ciel-1.png') center 0% / cover no-repeat, var(--ciel-degrade);
  will-change: background-position;
  animation: ciel-fremit 1.2s steps(1, end) infinite;   /* 6 images -> 200 ms chacune */
}
@keyframes ciel-fremit{
  0%      { background-image: url('images/ciel-1.png'), var(--ciel-degrade); }
  16.66%  { background-image: url('images/ciel-2.png'), var(--ciel-degrade); }
  33.33%  { background-image: url('images/ciel-3.png'), var(--ciel-degrade); }
  50%     { background-image: url('images/ciel-4.png'), var(--ciel-degrade); }
  66.66%  { background-image: url('images/ciel-5.png'), var(--ciel-degrade); }
  83.33%  { background-image: url('images/ciel-6.png'), var(--ciel-degrade); }
}

/* Un seul dégradé pour les deux vignettes : celle du site et celle du jeu. Les définir
   séparément, c'était la garantie qu'elles finissent par diverger — or c'est justement leur
   égalité qui rend le passage au jeu invisible. */
:root{
  --vignette: radial-gradient(ellipse at 50% 40%, transparent 35%, rgba(2,8,23,0.45) 100%);
}
.vignette{
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--vignette);
}
/* Le jeu couvre le site (z-index 150), donc la vignette du site ne l'atteint pas : sans
   celle-ci, le bas de l'écran serait nettement plus clair dans le jeu que sur l'accueil
   (66 unités de bleu mesurées). Pas de z-index : l'ordre du DOM la place au-dessus du
   canvas et sous le HUD. */
/* Opacité pilotée par le jeu : elle vaut 0 tant que le ciel du site est visible au travers
   (il apporte déjà la sienne), et monte à 1 quand le ciel calculé le recouvre. */
.game-vignette{
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: var(--vignette);
}

/* ---------- NUAGES DE FOND ---------- */
.clouds-field{
  /* fixed (et non absolute) : les nuages vivent dans un cycle de la taille de la fenêtre et
     bouclent à l'infini, au lieu d'être posés une fois pour toutes sur la hauteur du document. */
  position: fixed;
  inset: 0;
  z-index: 2; /* derrière le duo (6) et le contenu (10) */
  overflow: hidden;
  pointer-events: none;
}
/* Nuages de premier plan : au-dessus du duo (6) mais sous le contenu (10+), donc ils passent
   devant les personnages sans jamais masquer les textes. */
.clouds-field--front{ z-index: 7; }
.cloud-sprite{
  position: absolute;
  display: block;
  max-width: none;
}
.cloud-sprite img{ display: block; width: 100%; height: auto; max-width: none; }
/* Voile de la couleur du ciel, découpé à la silhouette du nuage par un masque : c'est ce qui
   fond les nuages lointains dans l'air au lieu de les noircir. Sa teinte est celle du ciel
   à mi-hauteur, pour rester juste en haut comme en bas de page. */
.cloud-voile{
  position: absolute;
  inset: 0;
  background: #2F86DC;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events: none;
}

/* ---------- UNITÉS ---------- */
/* Rescapé du bloc altimètre supprimé : le HUD du jeu s'en sert toujours (« m », « s »). */
.unit{
  font-size: 13px;
  opacity: 0.55;
  margin-left: 3px;
}

/* ---------- HEADER ---------- */
.topbar{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 50;
  display:flex;
  justify-content:center;
  padding: 18px 20px 0;
}
.topbar-inner{
  position: relative;
  width:100%;
  max-width: 1120px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 24px;
  padding: 10px 10px 10px 22px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 100px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
.topbar-logo{
  position: absolute;
  left: 50%;
  top: 50%;
  height: 45px;
  width: auto;
}
nav{ display:flex; gap:28px; }
nav a{
  color: var(--cloud);
  text-decoration:none;
  font-size:14px;
  font-weight:500;
  opacity:0.65;
  transition: opacity .2s var(--ease-out-expo);
}
nav a:hover{ opacity:1; }
.cta-small{
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-strong);
  color: var(--cloud);
  text-decoration:none;
  padding: 9px 20px;
  border-radius: 100px;
  font-size: 13px;
  font-weight:600;
  transition: background .2s var(--ease-out-expo), border-color .2s var(--ease-out-expo);
}
.cta-small:hover{ background: var(--cloud); color: var(--navy); border-color: var(--cloud); }

.topbar-right{
  display:flex;
  align-items:center;
  gap: 16px;
}
.icon-link{
  display:flex;
  align-items:center;
  justify-content:center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--cloud);
  opacity: 0.75;
  transition: opacity .2s var(--ease-out-expo), background .2s var(--ease-out-expo);
}
.icon-link:hover{ opacity: 1; background: var(--glass-bg-strong); }

/* Le logo du header est centré en absolu (left:50%) : la nav vit dans la moitié gauche et n'a
   pas de garde-fou contre lui. À quatre entrées et sous ~1150px, « Tarifs » passait sous le
   logo et devenait invisible. On sacrifie l'entrée la moins utile tant que la place manque. */
@media (max-width: 1150px){
  nav a:nth-child(3){ display:none; }
}

@media (max-width: 700px){
  nav{ display:none; }
  .icon-link{ display:none; }
  .topbar{ padding: 14px 14px 0; }
  .topbar-inner{ padding: 8px 8px 8px 18px; justify-content: flex-end; }
  /* Le logo est centré en absolu et « Demander une date » est bien plus large que l'ancien
     « Réserver » : les deux se chevauchaient. Sur mobile on garde le bouton, qui est
     l'élément utile — la marque est déjà en grand dans le hero juste en dessous. */
  .topbar-logo{ display:none; }
}

/* ---------- HERO ---------- */
.hero{
  position: relative;
  z-index: 10;
  height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-text{
  position:absolute;
  left: 50%;
  top: 9%;
  transform: translateX(-50%);
  z-index: 11;
  width: 100%;
  max-width: 640px;
  padding: 0 24px;
  text-align: center;
}
.hero h1{ line-height: 0; }
.hero-logo{
  width: min(92%, 620px);
  margin: 0 auto;
  filter: drop-shadow(0 4px 40px rgba(0,0,0,0.35));
}

.duo-stage{
  position: fixed;
  inset: 0;
  z-index: 6;   /* laisse la place au calque de nuages de premier plan (7), juste au-dessus */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  pointer-events: none;
  will-change: transform;
}

/* Le duo (corps + sac) se trouve à ~78% de la hauteur du plan (le reste au-dessus est du vide
   transparent) : on remonte le cadre de ce ratio pour centrer le duo à l'écran plutôt que le
   plan entier — le haut du cadre peut sortir de l'écran, c'est voulu. */
.hero-figure{
  position: relative;
  height: min(115vh, 1077px);
  margin-top: calc(50vh - 0.782 * min(115vh, 1077px));
  /* Cet étage ne porte plus que l'inclinaison pilotée au scroll (JS, module 3bis). Le
     balancement d'attente est descendu sur le canvas : deux animations de `transform` sur
     le même élément s'écrasent, et l'animation CSS aurait toujours gagné contre GSAP. */
  transform-origin: 50% 30%;
  will-change: transform;
}
.hero-figure canvas{
  height: 100%;
  width: auto;
  max-width: none;
  filter: url(#wind-flutter) drop-shadow(0 30px 60px rgba(0,0,0,0.4));
  animation: idle-sway 6s ease-in-out infinite;
  transform-origin: 50% 30%;
  will-change: transform, filter;
}
.duo-source{
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Flottement d'attente : uniquement vertical, sans rotation. Les keyframes démarraient à
   rotate(-1.2deg), donc le personnage était déjà penché à l'instant du chargement, et il
   oscillait ensuite entre -1,2° et +1,4°. La seule inclinaison du duo doit venir de sa
   dérive au scroll (module 3bis), qui vaut exactement 0° en haut de page. */
@keyframes idle-sway{
  0%,100%{ transform: translateY(0px); }
  50%{ transform: translateY(-10px); }
}

.scroll-hint{
  position:absolute;
  bottom: 36px;
  left:50%;
  transform:translateX(-50%);
  z-index: 12;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  font-family: var(--font-mono);
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
  opacity:0.7;
}
.scroll-line{
  width:1px; height:40px;
  background: linear-gradient(to bottom, var(--cloud), transparent);
  animation: scroll-pulse 1.8s ease-in-out infinite;
}
@keyframes scroll-pulse{
  0%{ transform: scaleY(0.3); opacity:0.3; }
  50%{ transform: scaleY(1); opacity:1; }
  100%{ transform: scaleY(0.3); opacity:0.3; }
}

/* Le duo est centré à 50vh et occupe une large bande verticale : sur une fenêtre basse, le
   bloc logo + accroche descend dans le personnage. On réduit les deux plutôt que de déplacer
   l'accroche ailleurs — elle doit rester collée sous le logo. */
@media (max-height: 720px){
  .hero-text{ top: 5%; }
  .hero-logo{ width: min(78%, 470px); }
  /* « fais défiler » passait sous les boutons faute de place */
  .scroll-hint{ display: none; }
}
@media (max-height: 560px){
  .hero-text{ top: 3%; }
  .hero-logo{ width: min(62%, 380px); }
}

@media (max-width: 700px){
  .hero-text{ top:13%; }
  .hero-figure{
    height: min(76.5vh, 685px);
    margin-top: calc(50vh - 0.782 * min(76.5vh, 685px));
  }
}

/* ---------- PANELS D'INFO ---------- */
.panel{
  position: relative;
  z-index: 10;
  /* Le contenu est devenu bien plus court (colonnes étroites, typo resserrée) : à 90vh de
     hauteur minimale plus 24vh de padding, chaque section réservait plus d'un écran et demi
     et laissait des écrans entiers de vide. On laisse la hauteur suivre le contenu et c'est
     le padding qui donne le rythme. */
  min-height: 58vh;
  display:flex;
  align-items:center;
  padding: 10vh 8%;
}
/* Alternance : un panneau sur deux est poussé contre le bord droit. On ne déplace que le
   bloc — le texte reste ferré à gauche à l'intérieur, un paragraphe en drapeau à droite se
   lit mal. Seuls les titres et les intros courtes basculent (voir .panel--right .panel-lead). */
.panel--right{ justify-content: flex-end; }
.panel--right .panel-inner{ margin-left: auto; }
.panel--right .panel-lead{ text-align: right; }
.panel--right .panel-lead .panel-tag{ margin-left: auto; }

.panel-inner{
  max-width: 470px;
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .6s var(--ease-out-expo), transform .6s var(--ease-out-expo);
}
.panel-inner.visible{
  opacity: 1;
  transform: translateY(0);
}

.panel-tag{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  /* verre sombre et non clair : à 6% de blanc sur un nuage blanc, la pastille et son texte
     disparaissaient complètement. */
  color: rgba(247,250,252,0.9);
  background: rgba(11,29,58,0.55);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 7px 16px;
  border-radius: 100px;
  margin-bottom: 30px;
}
.panel-tag::before{
  content:'';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--flag);
  flex-shrink: 0;
}

.panel h2{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(21px, 2.4vw, 31px);
  line-height: 1.22;
  letter-spacing: -0.01em;
  margin-bottom: 24px;
  text-wrap: balance;
}
.panel p{
  font-size: 15px;
  line-height: 1.68;
}

/* ---------- CONTENEUR DE CONTENU ----------
   Vocabulaire moderne assumé (verre dépoli, coins arrondis) : c'est le contraste avec le pixel
   art du logo, des boutons du hero et de la carte qui fait l'identité du site.
   Un seul écart par rapport à la version d'origine : le fond est nettement plus opaque. À 0.06
   d'opacité, les textes passaient par-dessus le duo et les nuages sans rester lisibles. */
.slab{
  /* Plus de panneau : le contenu est posé directement sur le ciel, qui reste visible partout.
     La lisibilité n'est donc plus portée par une surface mais par le texte lui-même — voir
     --halo plus bas. On ne garde ici que le rythme vertical. */
  padding: 0;
}
/* Pas d'ombre portée sur les textes : c'est le placement qui porte la lisibilité — les
   colonnes sont étroites et poussées vers les bords, le duo et les gros nuages passent dans
   le couloir central resté libre. */

.panel--wide .panel-inner{
  /* volontairement plus étroit que la place disponible : c'est cette marge de manœuvre qui
     rend le décalage gauche/droite visible. Un bloc qui remplit toute la largeur ne peut
     pas être « poussé » d'un côté. */
  max-width: 680px;
  /* .panel est en flex : sans width, l'inner se rétracte à la largeur de son contenu et les
     sections sans bloc large (FAQ, images) tombaient à ~575px au lieu d'occuper la colonne. */
  width: 100%;
}
.panel--wide{ padding: 10vh 5%; }
/* L'altimètre est en position fixed à droite (28px du bord, ~150px de large) et n'est affiché
   qu'au-delà de 860px. Les anciens panneaux plafonnaient à 560px et ne l'atteignaient jamais ;
   les panneaux larges, si. On lui réserve sa colonne au lieu de passer dessous. */

.panel-lead{ margin-bottom: 4px; }
.panel--right .section-lede{ text-align: right; margin-left: auto; }
/* La carte et le portrait : on inverse aussi l'ordre des colonnes pour que le visuel reste
   du côté du bord, et le texte vers le centre. */
.panel--right .map-block{ grid-template-columns: minmax(240px, 340px) 1fr; }
.panel--right .map-block .map-text{ order: 2; }
.panel--right .map-block .map-figure{ order: 1; }

.section-lede{
  font-size: 15px;
  line-height: 1.65;
  max-width: 56ch;
  margin-bottom: 34px;
}

/* ---------- 3400 m : LES TROIS SCENARIOS ---------- */
.scenarios{ list-style: none; display: grid; gap: 16px; margin: 36px 0 34px; }
.scenarios li{
  /* posés sur le slab, ces blocs ajoutaient une deuxième couche sombre : on les réduit à un
     liseré et un voile, le ciel filtré du slab suffit comme fond. */
  background: rgba(11,29,58,0.5);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.scenario-label{
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--flag);
}
.scenarios p{ font-size: 14px; line-height: 1.6; opacity: 0.92; }

/* ---------- SECTION « TU ME DIS OÙ TU ES » ----------
   Agrandie de 30 % par rapport aux autres sections : c'est elle qui porte le principe, elle
   mérite plus de présence. On reprend chaque taille explicitement plutôt qu'un `zoom` global :
   le facteur reste lisible dans la feuille de style, et rien ne dérape sur les rayons de
   bordure ou les filtres, que `zoom` mettrait aussi à l'échelle. */
/* ---------- SECTION « TU ME DIS OÙ TU ES » ----------
   Seule la LARGEUR change : la typographie reste celle des autres sections, aux mêmes
   proportions. Largeur exprimée en part de fenêtre et non en pixels — c'est le seul moyen que
   le bloc dépasse le milieu quelle que soit la taille de l'écran. Bord gauche à 4 %, largeur
   51 % : le bord droit tombe donc à 55 %, un peu au-delà du centre. Le plafond en pixels borne
   la longueur de ligne sur les très grands écrans. */
#concept{ padding-left: 4%; }
#concept .panel-inner{ width: 51vw; max-width: 820px; }

.promise{
  border-left: 3px solid var(--flag);
  background: rgba(120,45,8,0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 0 18px 18px 0;
  padding: 20px 24px;
  font-size: 16px;
  line-height: 1.6;
}
.promise strong{ color: var(--flag); }

/* ---------- 2800 m : LA CARTE ---------- */
.map-block{
  display: grid;
  grid-template-columns: 1fr minmax(240px, 380px);
  gap: 60px;
  align-items: center;
}
.map-text h2{ margin-bottom: 16px; }
.map-text p{ font-size: 15px; line-height: 1.68; max-width: 44ch; }
.map-legend{
  list-style: none;
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.5px;
}
.map-legend li{ display: flex; align-items: center; gap: 10px; }
.legend-dot, .legend-note{ width: 10px; height: 10px; flex-shrink: 0; }
.legend-dot{ background: var(--flag); }
.legend-note{ background: rgba(120,190,140,0.55); }

/* La carte reste franchement 8-bit : c'est le seul endroit du contenu où le pixel dit quelque
   chose — des points de saut posés sur un territoire, comme une carte de jeu. */
.fr-map{
  width: 100%;
  height: auto;
  display: block;
  shape-rendering: crispEdges;   /* pas de lissage : les blocs doivent rester nets */
  filter: drop-shadow(0 8px 24px rgba(2,8,23,0.4));
}
/* Les verts sont portes par des <g fill> dans le SVG lui-meme : cinq nuances reparties
   par un bruit coherent, pour que la carte ne soit pas un aplat. */
.pin-halo{ fill: rgba(249,115,22,0.28); }
.pin-dot{ fill: var(--flag); }
@media (prefers-reduced-motion: no-preference){
  .pin-halo{ animation: pin-pulse 2.4s steps(2, end) infinite; }
  .pin[data-city="Bordeaux"] .pin-halo{ animation-delay: .8s; }
  .pin[data-city="Marseille"] .pin-halo{ animation-delay: 1.6s; }
}
@keyframes pin-pulse{
  0%, 100%{ opacity: 0.25; }
  50%{ opacity: 0.85; }
}

/* ---------- 2000 m : QUI JE SUIS ---------- */
.about-block{
  display: grid;
  /* photo resserrée, texte à côté, puis les engagements sur toute la largeur en dessous */
  grid-template-columns: minmax(150px, 225px) 1fr;
  gap: 34px 38px;
  align-items: start;
}
.about-engagements{ grid-column: 1 / -1; }
.about-photo{ margin: 0; }
.about-photo img{
  width: 100%;
  height: auto;
  border-radius: 22px;
  box-shadow: 0 18px 44px rgba(2,8,23,0.45);
}

.about-text h2{ margin-bottom: 16px; }
.about-text > p{ font-size: 15px; line-height: 1.7; max-width: 52ch; }
/* Le titre vit maintenant dans .about-engagements, sorti de .about-text pour occuper toute
   la largeur : les deux sélecteurs sont listés pour que la règle suive le déplacement. */
.about-text h3,
.about-engagements h3{
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--flag);
  margin: 0 0 20px;
}
.check-list{
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 32px;
}
.check-list li{
  position: relative;
  padding-left: 28px;
  font-size: 14px;
  line-height: 1.6;
}
/* coche tracée avec deux bords d'une boîte pivotée : un seul pseudo-élément suffit */
.check-list li::before{
  content: '';
  position: absolute;
  left: 4px;
  top: 6px;
  width: 6px;
  height: 11px;
  border-right: 2px solid var(--flag);
  border-bottom: 2px solid var(--flag);
  transform: rotate(40deg);
}

/* ---------- 1500 m : EN IMAGES ---------- */
.media-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  /* `dense` : les tuiles verticales occupent deux rangees, et sans ce placement le moteur
     laisserait des cases vides derriere elles au lieu d'y glisser les tuiles suivantes. */
  grid-auto-flow: row dense;
  grid-auto-rows: 190px;
  gap: 16px;
  margin-top: 34px;
}
.media-shot{
  position: relative;
  margin: 0;
  padding: 0;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(4,14,32,0.6);
  border: 1px solid var(--glass-border);
  cursor: pointer;
  display: block;
  width: 100%;
}
.media-shot--tall{ grid-row: span 2; }
.media-shot:focus-visible{ outline: 2px solid var(--flag); outline-offset: 3px; }
.media-shot img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--ease-out-expo);
}
.media-shot:hover img{ transform: scale(1.05); }

/* ---------- LIGHTBOX PHOTOS ---------- */
.photo-lightbox-inner{
  width: min(100%, 1100px);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
}
.photo-lightbox-inner img{
  grid-column: 2;
  /* width:auto et non 100% : a 100 %, la boite gardait la largeur du conteneur et le fond
     apparaissait de part et d'autre d'une photo verticale. En laissant la largeur suivre
     l'image, la boite epouse exactement ses proportions — plus aucune bande. */
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 82vh;
  margin: 0 auto;
  display: block;
  border-radius: 14px;
}
.photo-nav{
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cloud);
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  transition: background .2s var(--ease-out-expo);
}
.photo-nav:hover{ background: var(--cloud); color: var(--navy); }
.photo-nav:focus-visible{ outline: 2px solid var(--flag); outline-offset: 3px; }
.photo-nav--prev{ grid-column: 1; }
.photo-nav--next{ grid-column: 3; }
.photo-compteur{
  grid-column: 2;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1.5px;
  color: var(--cloud);
  opacity: 0.7;
}
@media (max-width: 700px){
  /* Sur mobile les fleches passent par-dessus l'image : les garder sur les cotes reduirait
     l'image a une bande etroite. */
  .photo-lightbox-inner{ grid-template-columns: 1fr; gap: 10px; }
  .photo-lightbox-inner img{ grid-column: 1; }
  .photo-compteur{ grid-column: 1; }
  .photo-nav{ position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
  .photo-nav--prev{ left: 4px; }
  .photo-nav--next{ right: 4px; }
}


/* ---------- 900 m : TARIFS ---------- */
.pricing{ display:flex; gap:20px; margin-top: 4px; flex-wrap: wrap; }
.price-card{
  position: relative;
  background: rgba(11,29,58,0.5);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  padding: 32px 28px;
  flex: 1 1 210px;
  transition: border-color .25s var(--ease-out-expo), transform .25s var(--ease-out-expo);
}
.price-card:hover{ border-color: rgba(255,255,255,0.3); transform: translateY(-4px); }
.price-card.featured{
  background: rgba(249,115,22,0.12);
  border-color: rgba(249,115,22,0.55);
}
.price-card h3{
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: 0.84;
  margin-bottom: 12px;
}
.price-card .price{
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 700;
  color: var(--cloud);
  margin-bottom: 10px;
  line-height: 1;
}
.price-from{
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.78;
  margin-bottom: 5px;
}
.price-card .price-desc{ font-size: 13px; opacity: 0.86; line-height: 1.6; }

.custom-offer{
  margin-top: 26px;
  padding: 30px 32px;
  background: rgba(11,29,58,0.5);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  border-radius: 22px;
}
.custom-offer h3{
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--flag);
  margin-bottom: 10px;
}
.custom-offer p{ font-size: 14px; line-height: 1.65; opacity: 0.92; max-width: 60ch; }

/* ---------- 600 m : AVIS ---------- */
.reviews{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 34px;
}
.review{
  background: rgba(11,29,58,0.5);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.review p{ font-size: 14px; line-height: 1.65; opacity: 0.94; }
.review cite{
  font-family: var(--font-mono);
  font-size: 11px;
  font-style: normal;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--flag);
  margin-top: auto;
}

/* ---------- 300 m : FAQ ---------- */
.faq{ margin-top: 34px; display: flex; flex-direction: column; gap: 12px; }
.faq details{
  background: rgba(11,29,58,0.5);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  transition: border-color .25s var(--ease-out-expo);
}
.faq details[open]{ border-color: rgba(255,255,255,0.28); }
.faq summary{
  cursor: pointer;
  list-style: none;
  padding: 18px 52px 18px 22px;
  position: relative;
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.45;
  border-radius: 16px;
}
.faq summary::-webkit-details-marker{ display: none; }
.faq summary::after{
  content: '';
  position: absolute;
  right: 24px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--flag);
  border-bottom: 2px solid var(--flag);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .25s var(--ease-out-expo);
}
.faq details[open] summary::after{ transform: translateY(-20%) rotate(-135deg); }
.faq summary:focus-visible{ outline: 2px solid var(--flag); outline-offset: 2px; }
.faq details p{
  padding: 0 52px 24px 22px;
  font-size: 14px;
  line-height: 1.68;
  opacity: 0.92;
}

/* ---------- 0 m : FORMULAIRE ---------- */
.request-form{ display: flex; flex-direction: column; gap: 26px; }
.field-row{ display: flex; gap: 18px; flex-wrap: wrap; }
.field{ display: flex; flex-direction: column; gap: 7px; flex: 1 1 220px; min-width: 0; }
.field--narrow{ flex: 0 1 170px; }
/* .field est taillé pour vivre dans .field-row, un flex en ligne où flex-basis fixe la
   LARGEUR. Enfant direct du formulaire — qui est un flex en COLONNE — ce même flex-basis
   devient une hauteur plancher : la case vidéo et le champ message occupaient 220 px de
   haut au lieu de leur taille réelle, d'où les grands vides. */
.request-form > .field{ flex: 0 0 auto; }
.request-form label,
.request-form legend{
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  opacity: 0.86;
}
.req{ color: var(--flag); margin-left: 4px; }
.field-hint{ font-size: 12px; line-height: 1.5; opacity: 0.8; }   /* 0.68 tombait à 3,96:1 sur nuage clair */

.request-form input[type="text"],
.request-form input[type="email"],
.request-form input[type="tel"],
.request-form input[type="number"],
.request-form select,
.request-form textarea{
  width: 100%;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--cloud);
  background: rgba(4,14,32,0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 14px;
  padding: 15px 17px;
  transition: border-color .2s var(--ease-out-expo), box-shadow .2s var(--ease-out-expo);
  -webkit-appearance: none;
  appearance: none;
}
.request-form textarea{ resize: vertical; min-height: 100px; }
.request-form select{
  /* la flèche native disparaît avec appearance:none : on la redessine en chevron CSS */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--cloud) 50%),
    linear-gradient(135deg, var(--cloud) 50%, transparent 50%);
  background-position: calc(100% - 22px) 21px, calc(100% - 16px) 21px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
.request-form select option{ background: #0B1D3A; color: var(--cloud); }
.request-form :is(input, select, textarea):focus{
  outline: none;
  border-color: var(--flag);
  box-shadow: 0 0 0 3px rgba(249,115,22,0.25);
}
.request-form :is(input, textarea)::placeholder{ color: rgba(247,250,252,0.34); }
/* champ signalé invalide seulement après une tentative d'envoi, pas pendant la frappe */
.request-form.was-submitted :is(input, select, textarea):invalid{ border-color: #F0553D; }

.field-group{ border: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.radio-row{ display: flex; gap: 10px; flex-wrap: wrap; }
.radio, .checkbox{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13.5px;
  letter-spacing: 0;
  text-transform: none;
  opacity: 1;
  font-weight: 400;
  padding: 10px 16px;
  background: rgba(4,14,32,0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 100px;
  transition: border-color .2s var(--ease-out-expo), background .2s var(--ease-out-expo);
}
.radio:hover, .checkbox:hover{ border-color: rgba(255,255,255,0.3); }
.radio input, .checkbox input{
  -webkit-appearance: none;
  appearance: none;
  width: 15px; height: 15px;
  margin: 0;
  flex-shrink: 0;
  background: transparent;
  border: 2px solid rgba(247,250,252,0.5);
  border-radius: 50%;
}
.checkbox input{ border-radius: 5px; }
.radio input:checked, .checkbox input:checked{
  background: var(--flag);
  border-color: var(--flag);
  box-shadow: inset 0 0 0 3px #0B1D3A;
}
.radio:has(input:checked), .checkbox:has(input:checked){
  border-color: var(--flag);
  background: rgba(249,115,22,0.12);
}
.radio input:focus-visible, .checkbox input:focus-visible{ outline: 2px solid var(--flag); outline-offset: 3px; }

.form-actions{
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.form-note{ font-size: 13px; line-height: 1.55; opacity: 0.86; flex: 1 1 240px; }
.form-status{ font-family: var(--font-mono); font-size: 13px; line-height: 1.6; padding: 0; }
.form-status:not(:empty){
  padding: 15px 18px;
  border-radius: 14px;
  background: rgba(249,115,22,0.14);
  border: 1px solid rgba(249,115,22,0.5);
}
.form-status[data-state="error"]:not(:empty){
  background: rgba(240,85,61,0.14);
  border-color: rgba(240,85,61,0.55);
}

/* ---------- RESPONSIVE DES NOUVELLES SECTIONS ---------- */
@media (max-width: 860px){
  .map-block, .about-block{ grid-template-columns: 1fr; gap: 30px; }
  .check-list{ grid-template-columns: 1fr; }
  .map-figure{ max-width: 320px; margin: 0 auto; }
  .about-photo{ max-width: 300px; }
  .panel{ padding-top: 7vh; padding-bottom: 7vh; }
  .panel--wide{ padding: 0 5%; }
}
@media (max-width: 560px){
  .field--narrow{ flex: 1 1 140px; }
  .scenarios li{ padding: 16px 18px; }
}

/* ---------- BOUTONS HERO ---------- */
.hero-actions{
  position: absolute;
  /* left/right:0 plutôt que left:50% + translateX : en absolu, `left:50%` réduit la largeur
     disponible de moitié, ce qui forçait les deux boutons à passer sur deux lignes en mobile
     (et le second venait alors chevaucher le « fais défiler »). */
  left: 0;
  right: 0;
  top: 76%;
  z-index: 12;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 20px;
}
/* Boutons "8-bit" : aucun arrondi, coins taillés en escalier, ombre portée dure (sans flou)
   et enfoncement au clic — le vocabulaire des boutons de jeux rétro, cohérent avec le logo
   pixel art. */
.btn{
  --px: 4px;                 /* taille du "pixel" : coins, biseaux et ombre s'y accrochent */
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 14px 24px;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;   /* .btn sert aussi bien à un <button> qu'à un <a> (« Découvrir ») */
  /* Coins en escalier : on retire un carré de --px à chaque angle. */
  clip-path: polygon(
    0 var(--px), var(--px) var(--px), var(--px) 0,
    calc(100% - var(--px)) 0, calc(100% - var(--px)) var(--px), 100% var(--px),
    100% calc(100% - var(--px)), calc(100% - var(--px)) calc(100% - var(--px)), calc(100% - var(--px)) 100%,
    var(--px) 100%, var(--px) calc(100% - var(--px)), 0 calc(100% - var(--px))
  );
  /* drop-shadow et non box-shadow : une box-shadow serait rognée par le clip-path, alors que
     le filtre s'applique après découpe et épouse donc les coins en escalier. */
  filter: drop-shadow(var(--px) var(--px) 0 rgba(4,14,32,0.55));
  /* steps() : la transition avance par crans, pas en glissé — plus proche du rendu rétro. */
  transition: transform .08s steps(2, end), filter .08s steps(2, end);
}
/* Survol puis clic : le bouton s'enfonce et son ombre se réduit d'autant. */
.btn:hover{
  transform: translate(1px, 1px);
  filter: drop-shadow(calc(var(--px) - 1px) calc(var(--px) - 1px) 0 rgba(4,14,32,0.55));
}
.btn:active{
  transform: translate(var(--px), var(--px));
  filter: drop-shadow(0 0 0 rgba(4,14,32,0.55));
}
/* L'outline étant rognée par le clip-path, le focus clavier est marqué par un liseré interne. */
.btn:focus-visible{
  outline: none;
  box-shadow: inset 0 0 0 var(--px) var(--cloud);
}
.btn svg{ flex-shrink: 0; }

.btn--ghost{
  background: rgba(11,29,58,0.72);
  color: var(--cloud);
  /* Bordure "pixel" dessinée en inset : suit la découpe en escalier, contrairement à un border. */
  box-shadow: inset 0 0 0 var(--px) rgba(247,250,252,0.92);
}
.btn--ghost:hover{ background: rgba(11,29,58,0.85); }

.btn--primary{
  background: var(--flag);
  color: var(--on-flag);
  /* Biseau haut clair / bas sombre : le relief typique des boutons 8-bit. */
  box-shadow: inset 0 var(--px) 0 rgba(255,255,255,0.4),
              inset 0 calc(var(--px) * -1) 0 rgba(0,0,0,0.22);
}
.btn--primary:hover{ background: #FF8A2B; }

@media (max-width: 700px){
  .hero-actions{ top: 78%; gap: 10px; }
  .btn{ --px: 3px; font-size: 12px; padding: 12px 18px; letter-spacing: 0.5px; }
}

/* ---------- LIGHTBOX VIDÉO ---------- */
.lightbox{
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.lightbox[hidden]{ display: none; }
.lightbox-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(2,8,23,0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.lightbox-inner{
  position: relative;
  width: min(100%, 960px);
}
.lightbox-inner video{
  width: 100%;
  max-height: 82vh;
  border-radius: 16px;
  background: #000;
  box-shadow: 0 24px 80px rgba(0,0,0,0.55);
}
.lightbox-close{
  position: absolute;
  top: -46px;
  right: 0;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-strong);
  color: var(--cloud);
  cursor: pointer;
  transition: background .2s var(--ease-out-expo);
}
.lightbox-close:hover{ background: var(--cloud); color: var(--navy); }

/* ---------- JEU ---------- */
.game{
  position: fixed;
  inset: 0;
  z-index: 150;
  display: none;
  overflow: hidden;
  /* Fond transparent : on laisse voir le ciel du site (.sky), qui reste en place pendant la
     transition. C'est donc littéralement le même fond, sans raccord ni saut visuel. */
  background: transparent;
}
.game.is-active{ display: block; }
#gameCanvas{ display: block; width: 100%; height: 100%; }

.game-hud{
  position: absolute;
  top: 20px;
  left: 20px;
  display: flex;
  flex-wrap: wrap;              /* le HUD s'est étoffé (temps, vies, bonus) : il passe à la ligne */
  align-items: flex-start;
  gap: 12px;
  /* On réserve la place du bouton Quitter, à droite, pour ne jamais le chevaucher. */
  max-width: calc(100% - 130px);
  font-family: var(--font-mono);
}
.game-stat{
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 14px;
  padding: 10px 16px;
  min-width: 92px;
}
/* Vies : 3 coeurs pixel, ceux perdus restent en place mais éteints. */
.game-lives{
  display: flex;
  gap: 6px;
  align-self: flex-start;
  padding: 8px 12px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 3px 3px 0 rgba(4,14,32,0.45);
}
.game-lives .heart{
  width: 21px;
  height: 14px;
  fill: #FF4D5E;
  transition: opacity .15s steps(2, end), fill .15s steps(2, end);
}
.game-lives .heart.is-lost{ fill: #FFFFFF; opacity: 0.22; }

/* Badge du multiplicateur : n'apparaît que pendant les 10 s de bonus. */
/* Compte à rebours vers la prochaine vie : discret, sous les cœurs. C'est la seule ressource
   du jeu depuis qu'il est sans fin, le joueur doit pouvoir anticiper. */
.game-next-life{
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--cloud);
  opacity: 0.55;
  margin-top: -4px;
}

/* Annonce plein cadre du gain de vie : au centre, brève, en marches d'escalier comme le
   reste du vocabulaire 8-bit du jeu. */
.game-life-gain{
  position: absolute;
  left: 50%;
  top: 34%;
  z-index: 6;
  transform: translate(-50%, -50%);
  font-family: var(--font-mono);
  font-size: clamp(20px, 4vw, 34px);
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--flag);
  text-shadow: 3px 3px 0 rgba(4,14,32,0.7);
  pointer-events: none;
}
.game-life-gain.is-on{ animation: life-gain 1.6s steps(6, end) forwards; }
@keyframes life-gain{
  0%   { opacity: 0; transform: translate(-50%, -35%) scale(0.7); }
  18%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  70%  { opacity: 1; transform: translate(-50%, -58%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -68%) scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .game-life-gain.is-on{ animation: none; opacity: 1; }
}

.game-mult{
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--on-flag);
  background: var(--flag);
  padding: 7px 12px;
  border-radius: 0;
  box-shadow: 3px 3px 0 rgba(4,14,32,0.55);
  animation: mult-pulse 0.7s steps(2, end) infinite;
}
@keyframes mult-pulse{ 0%,100%{ filter: brightness(1); } 50%{ filter: brightness(1.25); } }
.game-stat-label{
  display: block;
  font-size: 10px;
  letter-spacing: 2px;
  opacity: 0.55;
  font-weight: 700;
  text-transform: uppercase;
}
.game-stat-value{
  display: block;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}

.game-quit{
  position: absolute;
  top: 20px;
  right: 20px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--cloud);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 100px;
  padding: 9px 20px;
  cursor: pointer;
  transition: background .2s var(--ease-out-expo);
}
.game-quit:hover{ background: var(--cloud); color: var(--navy); }

.game-hint{
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cloud);
  opacity: 0.7;
  transition: opacity .4s var(--ease-out-expo);
  pointer-events: none;
  text-align: center;
}
.game-hint.is-hidden{ opacity: 0; }

.game-over{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* « safe center » : un conteneur flex centré rogne le haut du contenu quand celui-ci
     dépasse — le titre et le score deviendraient inatteignables au défilement. */
  justify-content: center;
  justify-content: safe center;
  overflow-y: auto;
  padding: 32px 20px;
  gap: 8px;
  text-align: center;
  background: rgba(2,8,23,0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.game-over[hidden]{ display: none; }
.game-over h2{
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(34px, 6vw, 60px);
}
.game-over p{
  font-family: var(--font-mono);
  font-size: 17px;
  opacity: 0.85;
  margin-bottom: 22px;
}
/* ---------- CLASSEMENT DU JEU ---------- */
/* Tout ce bloc reste dans le vocabulaire 8-bit du jeu : angles vifs, ombres dures,
   pas d'arrondi — contrairement au reste du site, qui lui est en verre dépoli. */
.score-form{
  width: min(100%, 460px);
  margin: 22px auto 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
.score-form-intro{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: 0.6;
  text-align: center;
}
.score-form-row{ display: flex; gap: 12px; flex-wrap: wrap; }
.score-field{ flex: 1 1 170px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.score-field span{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  opacity: 0.7;
}
.score-field input{
  width: 100%;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--cloud);
  background: rgba(4,14,32,0.75);
  border: 0;
  border-radius: 0;
  box-shadow: inset 0 0 0 2px rgba(247,250,252,0.35);
  padding: 11px 13px;
}
.score-field input:focus{ outline: none; box-shadow: inset 0 0 0 3px var(--flag); }
.score-form.was-submitted .score-field input:invalid{ box-shadow: inset 0 0 0 2px #F0553D; }

.score-consent{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px;
  line-height: 1.45;
  opacity: 0.78;
  cursor: pointer;
}
.score-consent input{
  -webkit-appearance: none;
  appearance: none;
  width: 15px; height: 15px;
  flex-shrink: 0;
  margin: 1px 0 0;
  background: transparent;
  box-shadow: inset 0 0 0 2px rgba(247,250,252,0.55);
}
.score-consent input:checked{ background: var(--flag); box-shadow: inset 0 0 0 2px var(--flag); }
.score-consent input:focus-visible{ outline: 2px solid var(--flag); outline-offset: 3px; }
.score-form.was-submitted .score-consent input:invalid{ box-shadow: inset 0 0 0 2px #F0553D; }

.score-form-actions{ display: flex; flex-direction: column; align-items: center; gap: 10px; }
.score-status{
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  min-height: 1em;
}
.score-status[data-state="ok"]{ color: #7BD88F; }
.score-status[data-state="error"]{ color: #FF8E7A; }

/* ---------- Les deux tableaux ---------- */
/* Les deux classements sont affichés ensemble : rien à choisir, on voit d'un coup où on se
   situe sur le mois et sur l'ensemble. */
.board{
  width: min(100%, 620px);
  /* la marge basse dégage les boutons d'action, qui collaient à la dernière ligne du tableau */
  margin: 26px auto 28px;
  text-align: left;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.board-title{
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--flag);
  margin-bottom: 8px;
}

.board-panel{ margin-top: 0; }
.board-list{ list-style: none; display: flex; flex-direction: column; gap: 2px; }
.board-list li{
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 10px;
  align-items: baseline;
  padding: 8px 12px;
  background: rgba(4,14,32,0.5);
  font-size: 14px;
}
/* Le joueur qui vient d'entrer son score se repère d'un coup d'œil dans le tableau. */
.board-list li.is-me{ background: rgba(249,115,22,0.22); box-shadow: inset 0 0 0 2px var(--flag); }
.board-rang{
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
}
.board-list li:nth-child(1) .board-rang{ color: var(--flag); opacity: 1; }
.board-nom{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-score{
  font-family: var(--font-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.board-vide{
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  opacity: 0.5;
  padding: 14px 12px;
  text-align: center;
}

@media (max-width: 700px){
  .score-form, .board{ width: 100%; }
  .board{ grid-template-columns: 1fr; gap: 14px; }
  .board-list li{ font-size: 13px; padding: 7px 10px; }
}

.game-over-actions{ display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

@media (max-width: 700px){
  .game-hud{ top: 14px; left: 14px; gap: 8px; max-width: calc(100% - 112px); }
  .game-stat{ padding: 6px 10px; min-width: 60px; }
  .game-stat-value{ font-size: 16px; }
  .game-stat-label{ font-size: 8px; letter-spacing: 1px; }
  .game-lives{ padding: 6px 10px; gap: 4px; }
  .game-lives .heart{ width: 17px; height: 11px; }
  .game-mult{ font-size: 11px; padding: 6px 10px; }
  .game-next-life{ font-size: 10px; }
  .game-quit{ top: 14px; right: 14px; padding: 8px 14px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce){
  .hero-figure canvas, .scroll-line, .sky{ animation: none !important; }
  .panel-inner{ transition: none; }
  .btn:hover{ transform: none; }
}

/* ---------- PAGE DE CONFIRMATION ----------
   Page autonome (merci.html), atteinte apres l'envoi du formulaire. Elle reprend le ciel et
   le vocabulaire du site, mais sans rien d'anime : on y arrive, on lit, on repart. */
.page-merci{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8vh 6vw;
}
.merci{
  position: relative;
  z-index: 10;
  max-width: 560px;
  text-align: center;
}
.merci h1{
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(34px, 6vw, 58px);
  line-height: 1.05;
  margin: 18px 0 22px;
}
.merci p{
  font-size: 17px;
  line-height: 1.65;
  margin-bottom: 14px;
}
.merci-note{
  font-size: 15px;
  opacity: 0.75;
}
.merci .panel-tag{ margin-bottom: 0; }
.merci-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 32px;
}