/* Complices : le thème. Direction « La porte close » (Site web/DESIGN.md). Reporté de la maquette de l'accueil le 10 octobre 2026. */

@font-face {
  font-family: 'Atlantis';
  src: url('../polices/Atlantis-the-lost-City.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../polices/Montserrat-variable.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Couleurs de Maryse : dos des cartes et plateau */
  --noir: #050707;
  --brun: #33181b;
  --decor: #5a2d33;
  --n1: #894c54;
  --n2: #b17c83;
  --n3: #e0c2c5;
  --blanc: #fcfefe;
  --nuit-2: #1b0c0e;
  /* Entre n2 et n3 : le rose des petits textes, lisible sur le noir (9,5:1) comme sur le brun (7,7:1) */
  --n2-clair: #d0a8ad;

  --texte: var(--n3);
  --texte-doux: var(--n2-clair);
  --fond: var(--noir);

  --titre: 'Atlantis', 'Montserrat', serif;
  --corps: 'Montserrat', system-ui, sans-serif;

  --t-marque: clamp(4.75rem, 10.5vw, 10rem);
  --t-titre: clamp(2.9rem, 5.2vw, 4.6rem);
  --t-chapeau: clamp(1.15rem, 1.55vw, 1.4rem);
  --t-corps: 1.0625rem;
  --t-petit: 1rem;

  --gouttiere: clamp(1rem, 4vw, 3.5rem);
  --debut-contenu: clamp(4.5rem, 34vw, 31rem);
  --respiration: clamp(5.5rem, 14vh, 10rem);
  --l-carte: clamp(9.5rem, 15vw, 13.5rem);

  --sortie: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scrollbar-color: var(--decor) var(--noir);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--noir);
  color: var(--texte);
  font-family: var(--corps);
  font-size: var(--t-corps);
  line-height: 1.65;
  font-weight: 400;
  caret-color: var(--n2);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--n2); color: var(--noir); }

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

a { color: inherit; text-decoration-color: var(--n1); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: currentColor; }

:focus-visible {
  outline: 2px solid var(--n3);
  outline-offset: 4px;
  border-radius: 4px;
}

.evitement {
  position: absolute;
  left: var(--gouttiere);
  top: -4rem;
  z-index: 50;
  padding: 0.6rem 1rem;
  background: var(--n3);
  color: var(--noir);
  border-radius: 6px;
}
.evitement:focus { top: 1rem; }

.cache {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }

/* ---------- Barre du haut */

.barre {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 30;
  display: flex;
  align-items: baseline;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding: 1.6rem var(--gouttiere);
  transition: translate 0.45s var(--sortie), background-color 0.3s, box-shadow 0.3s;
}
.barre__nom { font-family: var(--titre); font-size: 1.75rem; line-height: 1; color: var(--n3); text-decoration: none; text-shadow: 0 0 0.8rem var(--noir); }
.barre__nom:hover { color: var(--blanc); }
/* en haut de l'accueil, le grand titre porte le nom */
.home .barre:not(.est-posee) .barre__nom { display: none; }
/* hors du haut de la page : la barre se range quand on descend, et revient sur un bandeau noir quand on remonte */
.barre.est-rangee { translate: 0 -110%; pointer-events: none; }
.barre.est-posee { padding-block: 0.95rem; background-color: rgb(5 7 7 / 0.95); box-shadow: 0 1px 0 var(--decor), 0 1.2rem 2rem -1.2rem rgb(0 0 0 / 0.9); }
/* le petit écriteau pend alors sous la barre */
body:has(.barre.est-posee:not(.est-rangee)) .mini:not(.est-range) { translate: 0 var(--barre-h, 3.6rem); }
.barre nav { display: flex; gap: clamp(1rem, 2.4vw, 2rem); font-size: 1rem; font-weight: 500; letter-spacing: 0.01em; }
.barre nav a { text-decoration: none; color: var(--n3); text-shadow: 0 0 0.8rem var(--noir); transition: color 0.3s; }
.barre nav a:hover { color: var(--blanc); text-decoration: underline; text-decoration-color: var(--n2); }

/* ---------- L'écriteau : carton suspendu, troué, recto et verso */

.ecriteau {
  --l: 18rem;
  --h: 31rem;
  --carton: var(--n3);
  --encre: var(--brun);
  --carton-verso: var(--brun);
  --encre-verso: var(--n3);
  --trou: 1.7rem;
  --haut-trou: 2.4rem;
  position: relative;
  width: var(--l);
  height: var(--h);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: center;
  perspective: 1400px;
  transform-origin: 50% var(--haut-trou);
  animation: balance 6.5s ease-in-out infinite alternate;
}
button.ecriteau { cursor: pointer; }
.ecriteau__tourne {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 1s var(--sortie);
}
.ecriteau.est-retourne .ecriteau__tourne { transform: rotateY(180deg); }

.ecriteau__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  padding: calc(var(--haut-trou) + var(--trou)) 1.75rem 2.25rem;
  border-radius: 1.4rem 1.4rem 0.9rem 0.9rem;
  background: var(--carton);
  color: var(--encre);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), inset 0 0 0 1px rgb(255 255 255 / 0.06), 0 2.2rem 3.5rem -1.6rem rgb(0 0 0 / 0.85), 0 0.4rem 0.9rem -0.4rem rgb(0 0 0 / 0.6);
}
.ecriteau__verso {
  transform: rotateY(180deg);
  background: var(--carton-verso);
  color: var(--encre-verso);
}
/* Le trou rond de l'écriteau de porte */
.ecriteau__face::before {
  content: '';
  position: absolute;
  top: var(--haut-trou);
  left: 50%;
  width: var(--trou);
  height: var(--trou);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--fond);
  box-shadow: inset 0 0.2rem 0.35rem rgb(0 0 0 / 0.55);
}
.ecriteau__grand {
  font-family: var(--titre);
  font-size: 3.4rem;
  line-height: 1.02;
}
.ecriteau__petit {
  max-width: 13.5rem;
  font-size: var(--t-petit);
  line-height: 1.5;
  font-weight: 500;
}
.ecriteau__filet {
  width: 2.5rem;
  height: 1px;
  background: currentColor;
  opacity: 0.45;
}

@keyframes balance {
  from { transform: rotate(-1.4deg); }
  to { transform: rotate(1.6deg); }
}
.ecriteau.secoue { animation: secousse 1.4s var(--sortie); }
@keyframes secousse {
  0% { transform: rotate(0deg); }
  18% { transform: rotate(7deg); }
  40% { transform: rotate(-5deg); }
  62% { transform: rotate(3deg); }
  82% { transform: rotate(-1.4deg); }
  100% { transform: rotate(0deg); }
}

/* Le crochet qui porte l'écriteau */
/* Le bas du crochet (y = 89 sur 96) tombe au centre du trou de l'écriteau */
.crochet {
  position: absolute;
  left: 50%;
  height: var(--crochet-h, 6.15rem);
  width: calc(var(--crochet-h, 6.15rem) * 0.4167);
  transform: translateX(-50%);
  overflow: visible;
  z-index: 2;
  pointer-events: none;
}

/* Le petit écriteau de l'infolettre, toujours à portée */
.mini {
  position: fixed;
  top: 0;
  right: clamp(1rem, 3vw, 2.5rem);
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  transform-origin: 50% 0;
  transition: transform 0.6s var(--sortie), translate 0.45s var(--sortie), opacity 0.4s;
}
.mini__ficelle { width: 1.5px; height: 1.6rem; background: var(--n2); }
.mini__carton {
  position: relative;
  padding: 1.85rem 0.95rem 0.8rem;
  border-radius: 0.8rem 0.8rem 0.55rem 0.55rem;
  background: var(--n3);
  color: var(--brun);
  font-family: var(--titre);
  font-size: 1.45rem;
  line-height: 1;
  box-shadow: 0 1rem 1.6rem -0.9rem rgb(0 0 0 / 0.9);
}
.mini__carton::before {
  content: '';
  position: absolute;
  top: 0.6rem;
  left: 50%;
  width: 0.62rem;
  height: 0.62rem;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--noir);
}
.mini:hover { transform: rotate(-4deg); }
.mini.est-range { transform: translateY(-120%); opacity: 0; pointer-events: none; }

/* ---------- Le seuil */

.seuil {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  align-items: center;
  min-height: calc(100svh - 5.5rem);
  padding: 7rem var(--gouttiere) 4rem;
}
.seuil__texte { position: relative; z-index: 1; display: grid; gap: 1.6rem; align-self: end; padding-bottom: 8vh; }
/* Le texte passe sur le plateau : un halo noir le détache sans boîte */
.seuil__texte p { text-shadow: 0 0 1.4rem var(--noir), 0 0 0.35rem var(--noir); }
.titre-marque {
  font-family: var(--titre);
  font-size: var(--t-marque);
  line-height: 0.88;
  color: var(--n3);
  margin-left: -0.04em;
}
.promesse {
  max-width: 31rem;
  font-size: var(--t-chapeau);
  line-height: 1.55;
  color: var(--n3);
}
.mention { max-width: 31rem; font-size: var(--t-corps); font-weight: 500; color: var(--texte-doux); }

.seuil__porte {
  position: relative;
  z-index: 1;
  justify-self: center;
  padding-top: 3.3rem;
}
.seuil__porte .crochet { top: 0; }

/* Le jeu posé sur la table, dans la pénombre, derrière le titre */
.table {
  /* Sous 1240 px, la colonne de l'écriteau se rapproche : le plateau rétrécit (50vw à 840 px) pour ne pas la frôler */
  --plateau-l: min(61vw, 58rem, calc(84vw - 17.85rem));
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  perspective: 1700px;
  perspective-origin: 40% 20%;
  opacity: 0.5;
  /* Sous le texte, le plateau tombe à 40 % de sa lumière : le fond y reste assez sombre pour lire */
  -webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / 0.4) 0 max(37%, var(--gouttiere) + 31rem), #000 max(52%, var(--gouttiere) + 40rem)), linear-gradient(#000 0 74%, transparent 98%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, rgb(0 0 0 / 0.4) 0 max(37%, var(--gouttiere) + 31rem), #000 max(52%, var(--gouttiere) + 40rem)), linear-gradient(#000 0 74%, transparent 98%);
  mask-composite: intersect;
}
.table__plateau {
  position: absolute;
  left: 31%;
  top: 55%;
  width: var(--plateau-l);
  aspect-ratio: 2000 / 1545;
  transform: translate(-50%, -50%) rotateX(52deg) rotateZ(-12deg);
  transform-style: preserve-3d;
}
.table__plateau > * { position: absolute; }
.table__image {
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0.3rem;
  box-shadow: 0 0 0 1px rgb(224 194 197 / 0.14), 0 3rem 5rem -1rem rgb(0 0 0 / 0.9);
}
/* Les paquets sur leurs pioches (positions tirées de plateau.py) : une tranche brune dit l'épaisseur */
.table__paquet, .table__carte {
  width: 12.35%;
  height: auto;
  border-radius: 0.25rem;
  transform: translate(-50%, -50%);
}
.table__paquet { box-shadow: 0 3px 0 var(--brun), 0 0.9rem 1.4rem -0.3rem rgb(0 0 0 / 0.75); }
.table__paquet--chance { left: 74.17%; top: 84.35%; transform: translate(-50%, -50%) rotate(-3deg); }
.table__paquet--obstacle { left: 87.62%; top: 84.35%; transform: translate(-50%, -50%) rotate(2deg); }
.table__carte { left: 61%; top: 81%; transform: translate(-50%, -50%) rotate(-15deg); box-shadow: 0.5rem 0.8rem 1.2rem rgb(0 0 0 / 0.7); }
/* Les deux pions, sur la case Départ */
/* Les mêmes que sur le chemin : un disque clair bordé de noir, un disque brun bordé de clair */
.table__pion {
  width: 2.3%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0.35rem 0.6rem rgb(0 0 0 / 0.65);
}
.table__pion--clair { left: 35.7%; top: 48.2%; background: var(--blanc); border: 2px solid var(--noir); }
.table__pion--sombre { left: 38.3%; top: 50.6%; background: var(--brun); border: 2px solid var(--blanc); }
/* Le dé, le même que le bouton du dé, posé à plat */
.table__de {
  left: 55%;
  top: 87%;
  width: 3.6%;
  height: auto;
  transform: translate(-50%, -50%) rotate(24deg);
  filter: drop-shadow(0 0.35rem 0.5rem rgb(0 0 0 / 0.7));
}

/* ---------- Le parcours */

.parcours { position: relative; }

.chemin {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}
.case { opacity: 0.3; transition: opacity 0.5s ease-out; }
.case.est-parcourue { opacity: 1; }
.pion { transition: none; }

.etape {
  position: relative;
  padding: var(--respiration) var(--gouttiere) var(--respiration) var(--debut-contenu);
  background: var(--fond);
}
.etape > * { position: relative; z-index: 2; }
.etape__titre {
  font-family: var(--titre);
  font-size: var(--t-titre);
  line-height: 1;
  color: var(--n3);
}
.etape__texte { display: grid; gap: 1.1rem; max-width: 36rem; margin-top: 1.6rem; }
.etape__chapeau {
  max-width: 34rem;
  margin-top: 1.4rem;
  font-size: var(--t-chapeau);
  line-height: 1.55;
}
.consigne { margin-top: 2.2rem; font-size: var(--t-petit); font-weight: 500; color: var(--texte-doux); }

.legende {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.2rem;
  margin: 2.4rem 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-petit);
  font-weight: 500;
  color: var(--texte-doux);
}
.legende li { display: flex; align-items: center; gap: 0.75rem; }
.legende svg {
  width: 2.6rem;
  height: 2.6rem;
  padding: 0.35rem;
  border-radius: 0.45rem;
  background: var(--n2);
  flex: none;
}

/* Les ambiances : la lumière monte d'un niveau à l'autre */
.etape--palier-2 { background: linear-gradient(var(--noir), var(--nuit-2)); }
.etape--niveau-2 { --fond: var(--nuit-2); }
.etape--palier-3 { background: linear-gradient(var(--nuit-2), var(--brun)); }
.etape--niveau-3 { --fond: var(--brun); }
.etape--arrivee {
  --fond: var(--n3);
  --texte: var(--brun);
  --texte-doux: var(--decor);
  color: var(--brun);
  background: linear-gradient(var(--brun) 0, var(--n1) 4.5rem, var(--n2) 8.5rem, var(--n3) 12rem, var(--n3));
  padding-top: calc(var(--respiration) * 1.4);
}
.etape--arrivee .etape__titre { color: var(--brun); }
.etape--arrivee :focus-visible { outline-color: var(--brun); }
.etape--arrivee ::selection { background: var(--brun); color: var(--n3); }

/* ---------- Les cartes à retourner */

.donne {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 2.4vw, 2rem);
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
}
.donne li:nth-child(1) { --r: -3deg; --y: 0.8rem; }
.donne li:nth-child(2) { --r: 1.5deg; --y: -0.6rem; }
.donne li:nth-child(3) { --r: 4deg; --y: 1.4rem; }

.carte {
  position: relative;
  display: block;
  width: var(--l-carte);
  aspect-ratio: 600 / 838;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  perspective: 1200px;
  transform: translateY(var(--y, 0)) rotate(var(--r, 0deg));
  transition: transform 0.5s var(--sortie);
}
.carte:hover { transform: translateY(calc(var(--y, 0px) - 0.5rem)) rotate(calc(var(--r, 0deg) * 0.5)); }
.carte__tourne {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.9s var(--sortie);
}
.carte[aria-pressed='true'] .carte__tourne { transform: rotateY(180deg); }
.carte__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 0.55rem;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 0 0 1px rgb(224 194 197 / 0.16), 0 1.6rem 2.4rem -1.3rem rgb(0 0 0 / 0.9), 0 0.3rem 0.6rem -0.3rem rgb(0 0 0 / 0.6);
}
.carte__face img { width: 100%; height: 100%; object-fit: cover; }
.carte__recto { transform: rotateY(180deg); }
.carte--seule { --l-carte: clamp(10.5rem, 17vw, 15rem); --r: -2deg; }

/* ---------- Niveau 3 : la porte close */

.porte {
  position: relative;
  margin-top: 3rem;
  padding-top: 4.5rem;
  max-width: 46rem;
}
.porte .donne { margin-top: 0; }
.porte .carte { cursor: pointer; }
.porte__ecriteau {
  position: absolute;
  z-index: 3;
  top: 0;
  left: calc(var(--l-carte) * 1.05);
}
.porte__ecriteau .crochet { --crochet-h: 5.4rem; top: -3.1rem; }
.porte .ecriteau {
  --l: 13.5rem;
  --h: 19rem;
  --carton: var(--n2);
  --trou: 1.35rem;
  --haut-trou: 1.9rem;
}
.porte .ecriteau__grand { font-size: 2.7rem; }
.porte__message {
  min-height: 1.6em;
  margin-top: 2.6rem;
  font-size: var(--t-petit);
  font-weight: 500;
  color: var(--texte-doux);
}

/* ---------- Arrivée */

.arrivee {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.arrivee__texte { display: grid; gap: 2.6rem; max-width: 34rem; }
.arrivee h3 {
  font-family: var(--titre);
  font-size: 2.2rem;
  line-height: 1;
  margin-bottom: 0.9rem;
}
.boite { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.35rem; }
.boite li { display: flex; gap: 0.9rem; align-items: baseline; }
.boite li::before {
  content: '';
  flex: none;
  width: 0.9rem;
  height: 1px;
  background: var(--decor);
  transform: translateY(-0.3em);
}
.boite__nombre { font-variant-numeric: tabular-nums; font-weight: 600; }

.arrivee__porte { position: relative; padding-top: 3.3rem; }
.arrivee__porte .crochet { top: 0; }
.ecriteau--inscription {
  --l: 21rem;
  --h: 38.25rem;
  --carton: var(--brun);
  --encre: var(--n3);
  --carton-verso: var(--n1);
  --encre-verso: var(--blanc);
  animation-duration: 6s;
}
/* on n'écrit pas sur un carton qui bouge : il s'arrête dès que le champ ou le bouton a le focus */
.ecriteau--inscription:focus-within { animation-play-state: paused; }
.ecriteau--inscription .ecriteau__face { justify-content: flex-start; gap: 1rem; padding-top: calc(var(--haut-trou) + var(--trou) + 1.6rem); }
.ecriteau--inscription .ecriteau__verso { justify-content: center; }
.ecriteau--inscription .ecriteau__grand { font-size: 3.1rem; }
.ecriteau--inscription .ecriteau__petit { max-width: 16rem; font-weight: 500; font-size: var(--t-petit); }
.formulaire { display: grid; gap: 0.7rem; width: 100%; margin-top: 0.6rem; text-align: left; }
.formulaire label { font-size: var(--t-petit); font-weight: 500; }
.formulaire input {
  width: 100%;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--n1);
  border-radius: 0.5rem;
  background: var(--noir);
  color: var(--blanc);
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  caret-color: var(--n3);
  transition: border-color 0.3s;
}
.formulaire input::placeholder { color: var(--n2-clair); opacity: 1; font-weight: 400; }
.formulaire input:hover { border-color: var(--n2); }
.formulaire input:focus-visible { outline: 2px solid var(--n3); outline-offset: 2px; border-color: var(--n3); }
.formulaire input[aria-invalid='true'] { border-color: var(--n3); }
.bouton {
  margin-top: 0.35rem;
  padding: 0.95rem 1.2rem;
  border: 0;
  border-radius: 0.5rem;
  background: var(--n3);
  color: var(--brun);
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s var(--sortie);
}
.bouton:hover { background: var(--blanc); }
.bouton:active { transform: translateY(1px); }
.bouton:disabled { opacity: 0.6; cursor: progress; }
.formulaire__erreur { min-height: 1.4em; font-size: 0.9375rem; font-weight: 500; line-height: 1.45; color: var(--n3); }
.formulaire__note { font-size: 0.9375rem; font-weight: 500; line-height: 1.5; color: var(--n2-clair); text-align: center; }

/* ---------- Pied de page */

.pied {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.5rem 3rem;
  align-items: baseline;
  padding: 3.5rem var(--gouttiere) 4rem;
  background: var(--noir);
  color: var(--texte-doux);
  font-size: var(--t-petit);
  font-weight: 500;
}
.pied__marque { font-family: var(--titre); font-size: 2.2rem; line-height: 1; color: var(--n3); }
.pied nav { display: flex; flex-wrap: wrap; gap: 0.6rem 1.8rem; }
.pied nav a { text-decoration: none; }
.pied nav a:hover { color: var(--n3); }
.pied__bas { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; padding-top: 1.5rem; border-top: 1px solid var(--decor); }

/* ---------- Le dé */

.de {
  position: fixed;
  right: clamp(1rem, 3vw, 2.5rem);
  bottom: clamp(1rem, 3vw, 2.2rem);
  z-index: 40;
  width: 3.6rem;
  height: 3.6rem;
  padding: 0;
  border: 0;
  border-radius: 0.85rem;
  background: var(--n3);
  cursor: pointer;
  box-shadow: 0 1rem 1.8rem -0.8rem rgb(0 0 0 / 0.9);
  transition: transform 0.5s var(--sortie), opacity 0.4s, background 0.3s;
}
.de:hover { background: var(--blanc); transform: rotate(-8deg); }
.de svg { width: 100%; height: 100%; display: block; }
.de circle { fill: var(--brun); }
.de.roule { animation: roule 0.75s var(--sortie); }
@keyframes roule {
  from { transform: rotate(0) scale(1); }
  45% { transform: rotate(400deg) scale(0.86); }
  to { transform: rotate(720deg) scale(1); }
}
.de.est-range { opacity: 0; transform: translateY(1rem); pointer-events: none; }
.etape--arrivee ~ .de, body[data-zone='arrivee'] .de { background: var(--brun); }
body[data-zone='arrivee'] .de circle { fill: var(--n3); }

/* ---------- Téléphone */

@media (max-width: 820px) {
  :root {
    --debut-contenu: 4.4rem;
    --gouttiere: 1.15rem;
    --l-carte: 62vw;
  }
  .barre { gap: 0.85rem; padding-top: 1.3rem; }
  .barre nav { gap: 0.8rem; font-size: 0.9375rem; }
  .barre__nom { font-size: 1.3rem; }
  .seuil {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding-top: 6.5rem;
    min-height: auto;
  }
  .seuil__texte { padding-bottom: 0; }
  .seuil__porte { justify-self: center; }
  .seuil__texte { order: 1; }
  .table {
    --plateau-l: 94vw;
    order: 2;
    position: relative;
    inset: auto;
    height: 15rem;
    margin: -1.5rem calc(var(--gouttiere) * -1) -2rem;
    perspective: 900px;
    -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 82%, transparent);
    mask-image: linear-gradient(transparent, #000 14%, #000 82%, transparent);
  }
  .table__plateau { left: 44%; top: 50%; transform: translate(-50%, -50%) rotateX(50deg) rotateZ(-12deg); }
  .seuil__porte { order: 3; }
  .ecriteau { --l: 15rem; --h: 23rem; }
  .ecriteau__grand { font-size: 2.9rem; }
  .donne {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-right: calc(var(--gouttiere) * -1);
    padding: 1.5rem var(--gouttiere) 2rem 0;
    scrollbar-width: none;
  }
  .donne::-webkit-scrollbar { display: none; }
  .donne li { scroll-snap-align: start; flex: none; }
  /* la carte suivante dépasse davantage, et son bord s'éclaire : sur le noir du niveau 1, un dos noir disparaissait */
  .donne { --l-carte: 58vw; }
  .donne .carte__face { box-shadow: 0 0 0 1px rgb(224 194 197 / 0.34), 0 1.6rem 2.4rem -1.3rem rgb(0 0 0 / 0.9), 0 0.3rem 0.6rem -0.3rem rgb(0 0 0 / 0.6); }
  .carte--seule { --l-carte: 58vw; }
  .porte { padding-top: 0; }
  .porte__ecriteau { position: relative; left: auto; margin: 3.5rem 0 1rem 1rem; }
  .arrivee { grid-template-columns: 1fr; }
  .ecriteau--inscription { --l: min(21rem, calc(100vw - var(--debut-contenu) - var(--gouttiere))); --h: 42.5rem; }
  .arrivee__porte { justify-self: start; }
  .pied { grid-template-columns: 1fr; }
  .mini__carton { font-size: 1.2rem; padding: 1.6rem 0.75rem 0.65rem; }
  .de { width: 3rem; height: 3rem; border-radius: 0.7rem; }
  .mini__ficelle { height: 1rem; }
}

/* ---------- Sans animation */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ecriteau, .ecriteau.secoue { animation: none; }
  .ecriteau__tourne, .carte__tourne, .carte, .mini, .de, .barre { transition: none; }
  .de.roule { animation: none; }
  .case { opacity: 1; transition: none; }
}

/* ---------- Page « Le jeu » : la boîte ouverte (gabarits/le-jeu.php, fiche .impeccable/surfaces/…le-jeu-php.md) */

.compte__nombre { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--n3); }

/* Le haut : le texte à gauche, tout le contenu de la boîte posé sur la table à droite */
.ouverture {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(2.5rem, 5vw, 5.5rem);
  align-items: center;
  min-height: 100svh;
  padding: 7rem var(--gouttiere) 4.5rem;
}
.ouverture__texte { display: grid; gap: 1.9rem; max-width: 31rem; }
/* La queue du j descend loin : place pour elle avant « Pour qui? » */
.ouverture .titre-marque { padding-bottom: 0.2em; }
.ouverture__bloc { display: grid; gap: 0.55rem; }
.ouverture__titre { font-family: var(--titre); font-size: 2rem; line-height: 1; color: var(--n2-clair); }

.objets {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 2.4rem 1rem;
  align-items: end;
  margin: 0;
  padding: 0;
  list-style: none;
}
.objet--plateau { grid-column: 1 / 9; --r: -1.5deg; }
.objet--livret { grid-column: 9 / 13; --r: 3.5deg; padding-left: 0.6rem; }
.objet--chance { grid-column: 1 / 7; }
.objet--obstacle { grid-column: 7 / 9; --r: -3deg; }
.objet--pions { grid-column: 9 / 11; }
.objet--de { grid-column: 11 / 13; }

.objet a {
  display: grid;
  gap: 0.9rem;
  justify-items: start;
  color: var(--texte-doux);
  text-decoration: none;
}
.objet__chose {
  display: block;
  width: 100%;
  rotate: var(--r, 0deg);
  transition: translate 0.5s var(--sortie);
}
.objet__chose img, .plateau-pret__plateau, .livret {
  border-radius: 0.3rem;
  box-shadow: 0 0 0 1px rgb(224 194 197 / 0.14), 0 1.8rem 2.6rem -1.4rem rgb(0 0 0 / 0.9);
}
.objet__compte { font-size: 0.9375rem; font-weight: 500; line-height: 1.4; transition: color 0.3s; }
.objet a:hover .objet__chose, .objet a:focus-visible .objet__chose { translate: 0 -0.55rem; }
.objet a:hover .objet__compte { color: var(--n3); text-decoration: underline; text-decoration-color: var(--n2); }

/* Les paquets : la tranche brune a l'épaisseur du nombre de cartes (22 par niveau, 30 obstacles) */
.paquet {
  position: relative;
  display: block;
  padding-bottom: calc(var(--cartes) * 0.4px);
}
.paquet img { position: relative; z-index: 1; border-radius: 0.35rem; }
.paquet::after {
  content: '';
  position: absolute;
  inset: 1rem 0 0;
  border-radius: 0 0 0.4rem 0.4rem;
  background: linear-gradient(var(--decor), var(--brun) 60%);
  box-shadow: 0 1.4rem 2rem -1.1rem rgb(0 0 0 / 0.9);
}
.objet--chance .objet__chose { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; }
.objet--chance .paquet:nth-child(1) { rotate: -4deg; }
.objet--chance .paquet:nth-child(2) { rotate: 1.5deg; translate: 0 -0.4rem; }
.objet--chance .paquet:nth-child(3) { rotate: 5deg; }

/* Les pions : un disque clair bordé de noir, un disque brun bordé de clair, comme sur l'accueil */
.pion-plat {
  display: block;
  width: var(--pion, 2.4rem);
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 0.35rem 0.6rem rgb(0 0 0 / 0.65);
}
.pion-plat--clair { background: var(--blanc); border: 2px solid var(--noir); box-shadow: 0 0 0 1px rgb(224 194 197 / 0.25), 0 0.35rem 0.6rem rgb(0 0 0 / 0.65); }
.pion-plat--sombre { background: var(--brun); border: 2px solid var(--blanc); }
.objet--pions .objet__chose { display: flex; gap: 0.7rem; padding-bottom: 0.5rem; }
.objet--pions .pion-plat--sombre { translate: 0 0.5rem; }
.de-plat { display: block; width: 3.3rem; height: 3.3rem; rotate: 18deg; filter: drop-shadow(0 0.4rem 0.5rem rgb(0 0 0 / 0.7)); }

/* L'arrivée : le contenu de la boîte se pose sur la table, un objet après l'autre, depuis un léger soulèvement */
@keyframes se-pose {
  from { translate: 0 -1.3rem; scale: 1.04; }
}
.objet { animation: se-pose 1s var(--sortie) backwards; animation-delay: calc(0.12s + var(--i, 0) * 0.09s); }

/* ---------- Les règles : l'objet reste sur la table (à gauche) pendant que sa règle défile */

.regle {
  --fond: var(--noir);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 6vw, 6.5rem);
  align-items: start;
  padding: var(--respiration) var(--gouttiere);
  background: var(--fond);
  color: var(--texte);
}
.regle__objet {
  position: sticky;
  top: clamp(4.5rem, 11vh, 6.5rem);
  display: grid;
  gap: 2rem;
  justify-items: center;
}
/* Le texte s'arrête avant le petit écriteau de l'infolettre, accroché en haut à droite */
.regle__texte { max-width: 35rem; }
.regle__titre {
  font-family: var(--titre);
  font-size: var(--t-titre);
  line-height: 1;
  color: var(--titre-couleur, var(--n3));
}
.regle__chapeau { max-width: 34rem; margin-top: 1.4rem; font-size: var(--t-chapeau); line-height: 1.55; }
.regle__corps { display: grid; gap: 1.1rem; margin-top: 1.2rem; }
.regle__sous-titre {
  margin-top: 3rem;
  font-family: var(--titre);
  font-size: 2.15rem;
  line-height: 1;
  color: var(--titre-couleur, var(--n3));
}
.regle__sous-titre + .regle__corps { margin-top: 0.9rem; }
.regle strong { font-weight: 600; color: var(--blanc); }

/* La lumière monte, comme sur l'accueil */
.regle--cartes { background: linear-gradient(var(--noir), var(--nuit-2) 26rem); }
.regle--obstacle { --fond: var(--nuit-2); background: var(--nuit-2); }
.regle--paliers { background: linear-gradient(var(--nuit-2), var(--brun)); }
/* Fin : la lumière commence à monter dans le bas de la partie, sous le texte, et continue dans les questions */
.regle--fin {
  --fond: var(--brun);
  padding-bottom: calc(var(--respiration) + 6rem);
  background: linear-gradient(var(--brun) calc(100% - 9rem), var(--n1));
}

/* Mise en place : chaque étape porte une face du dé */
.etapes { display: grid; gap: 1.1rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.etapes li { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); gap: 1.1rem; align-items: start; transition: color 0.4s; }
.etapes__de { width: 2.1rem; height: 2.1rem; margin-top: 0.05rem; rotate: -5deg; }
.etapes li:nth-child(even) .etapes__de { rotate: 6deg; }
.etapes.est-suivie li { color: var(--texte-doux); }
.etapes.est-suivie li.est-active { color: var(--blanc); }

.legende--cases { margin-top: 1.2rem; }
.legende__case {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0.3rem;
  border-radius: 0.35rem;
  background: var(--n2);
}
.legende .legende__case svg, .effets .legende__case svg { width: 100%; height: 100%; padding: 0; background: none; border-radius: 0; }

/* Le plateau qui se met en place : paquets sur leurs pioches et pions sur le Départ (positions de plateau.py) */
.plateau-pret { position: relative; width: 100%; aspect-ratio: 2000 / 1545; }
.plateau-pret__plateau { width: 100%; height: 100%; }
.plateau-pret > [data-pose] {
  position: absolute;
  translate: -50% -50%;
  transition: opacity 0.5s, transform 0.7s var(--sortie);
}
.plateau-pret__paquet { width: 12.35%; border-radius: 0.2rem; box-shadow: 0 3px 0 var(--brun), 0 0.7rem 1.1rem -0.3rem rgb(0 0 0 / 0.75); }
.plateau-pret__paquet--chance { left: 74.17%; top: 84.35%; rotate: -3deg; }
.plateau-pret__paquet--obstacle { left: 87.62%; top: 84.35%; rotate: 2deg; }
.plateau-pret__pion { --pion: 3.2%; left: 35.7%; top: 48.2%; }
.plateau-pret__pion--sombre { left: 38.6%; top: 51%; }
.plateau-pret__de { left: 57%; top: 86%; width: 5.5%; rotate: 24deg; filter: drop-shadow(0 0.3rem 0.4rem rgb(0 0 0 / 0.7)); }
.plateau-pret__de svg { display: block; width: 100%; height: auto; }
.plateau-pret.est-suivi > [data-pose]:not(.est-pose) { opacity: 0; transform: translateY(-1rem); }

/* Une rangée de cases du parcours, avec ses pions */
.bande {
  --g: 3px;
  --bord: 5px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  gap: var(--g);
  width: 100%;
  padding: var(--bord);
  border-radius: 0.7rem;
  background: var(--noir);
  box-shadow: 0 0 0 1px rgb(224 194 197 / 0.2), 0 1.6rem 2.4rem -1.4rem rgb(0 0 0 / 0.9);
}
.bande__case {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 4;
  border-radius: 2px;
  background: var(--z);
}
.bande__case[data-zone='1'] { --z: var(--n1); }
.bande__case[data-zone='2'] { --z: var(--n2); }
.bande__case[data-zone='3'] { --z: var(--n3); }
.bande__case:is([data-genre='D'], [data-genre='A']) { --z: var(--blanc); }
.bande__case svg { width: 88%; height: auto; }
/* Départ et Arrivée portent leur nom, comme sur le plateau, sous leur case */
.bande--nommee { margin-bottom: 1.9rem; }
.bande__case:has(.bande__nom) { position: relative; }
.bande__nom {
  position: absolute;
  top: calc(100% + 0.55rem);
  left: 50%;
  translate: -50% 0;
  font-family: var(--titre);
  font-size: 1.2rem;
  line-height: 1;
  white-space: nowrap;
  color: var(--n2-clair);
}
.bande__case[data-genre='A'] .bande__nom { left: auto; right: -0.2rem; translate: none; }
.bande__pion {
  --c: calc((100% - 2 * var(--bord) - (var(--n) - 1) * var(--g)) / var(--n));
  --pion: calc(var(--c) * 0.62);
  position: absolute;
  top: 50%;
  left: calc(var(--bord) + var(--p) * (var(--c) + var(--g)) + var(--c) * 0.19);
  translate: 0 -50%;
  transition: left 0.3s var(--sortie);
}
.bande__pion[data-pion='clair'] { translate: -14% -78%; }
.bande__pion[data-pion='sombre'] { translate: 14% -22%; }
.bande__pion.saute { animation: saute 0.3s var(--sortie); }
@keyframes saute {
  40% { transform: translateY(-55%) scale(1.12); }
}

.essai { display: grid; gap: 1.4rem; width: 100%; }
.essai__commande { display: grid; gap: 0.9rem; justify-items: start; }
.lancer {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.45rem 1.15rem 0.45rem 0.45rem;
  border: 1px solid var(--decor);
  border-radius: 1rem;
  background: none;
  color: var(--n3);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s;
}
.lancer:hover { border-color: var(--n2); color: var(--blanc); }
.lancer__de { width: 2.7rem; height: 2.7rem; transition: rotate 0.5s var(--sortie); }
.lancer:hover .lancer__de { rotate: -8deg; }
.lancer.roule .lancer__de { animation: roule 0.75s var(--sortie); }
.essai__annonce { min-height: 3.3em; max-width: 30rem; font-size: var(--t-petit); font-weight: 500; color: var(--texte-doux); }

/* Ce que fait chaque case : la ligne de la case où le pion s'arrête s'allume */
.effets { display: grid; gap: 0.5rem; margin: 1.5rem 0 0 -0.55rem; padding: 0; list-style: none; }
.effets li {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  padding: 0.5rem 0.9rem 0.5rem 0.55rem;
  border-radius: 0.8rem;
  transition: background-color 0.4s, color 0.4s;
}
.effets li.est-active { background: var(--brun); box-shadow: inset 0 0 0 1px var(--decor); color: var(--blanc); }

/* Les cartes posées à côté de leur règle */
.main-de-cartes {
  --l-carte: min(14vw, 31vh, 14rem);
  display: grid;
  grid-template-columns: repeat(2, var(--l-carte));
  gap: 1.7rem 1.5rem;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.main-de-cartes li:nth-child(1) { --r: -3deg; }
.main-de-cartes li:nth-child(2) { --r: 2deg; --y: 0.9rem; }
.main-de-cartes li:nth-child(3) { --r: 1.5deg; --y: -0.3rem; }
.main-de-cartes li:nth-child(4) { --r: -2.5deg; --y: 0.6rem; }
/* Trois cartes : la troisième se pose au milieu, sous les deux autres */
.main-de-cartes li:nth-child(3):last-child { grid-column: 1 / -1; justify-self: center; }
.regle__objet .consigne { margin-top: 0; }

.niveaux { display: grid; gap: 1rem; margin: 0.4rem 0; padding: 0; list-style: none; }
.niveaux li { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: 1.1rem; align-items: center; }
.niveaux img { border-radius: 0.25rem; box-shadow: 0 0 0 1px rgb(224 194 197 / 0.16), 0 0.8rem 1.2rem -0.6rem rgb(0 0 0 / 0.9); }
.niveaux li:nth-child(1) img { rotate: -4deg; }
.niveaux li:nth-child(2) img { rotate: 2deg; }
.niveaux li:nth-child(3) img { rotate: 5deg; }

/* L'exemple : la ligne d'une carte s'allume quand on retourne cette carte */
.exemple { display: grid; gap: 0.35rem; margin: 0.9rem 0 0 -0.75rem; }
.exemple p { padding: 0.45rem 0.75rem; border-radius: 0.7rem; transition: background-color 0.4s, color 0.4s; }
.exemple p.est-allumee { background: var(--brun); box-shadow: inset 0 0 0 1px var(--decor); color: var(--blanc); }

/* Les paliers : le pion entre dans la couleur suivante, et le paquet du niveau 2 prend la place du niveau 1 */
.essai--palier { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.4rem 1.6rem; }
.essai__pioche { display: grid; gap: 0.7rem; justify-items: center; }
.essai__paquet { position: relative; display: block; width: 5.25rem; aspect-ratio: 600 / 838; perspective: 900px; rotate: -3deg; }
.essai__paquet .carte__face { border-radius: 0.35rem; }
.essai--palier[data-etat='apres'] .carte__tourne { transform: rotateY(180deg); }
.essai__niveau { display: grid; font-size: 0.9375rem; font-weight: 600; color: var(--texte-doux); }
.essai__niveau > span { grid-area: 1 / 1; text-align: center; transition: opacity 0.4s; }
.essai--palier[data-etat='apres'] [data-niveau='1'],
.essai--palier:not([data-etat='apres']) [data-niveau='2'] { opacity: 0; }
.rejouer {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 0.3rem 0;
  border: 0;
  background: none;
  color: var(--texte-doux);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--n1);
  text-underline-offset: 0.22em;
  cursor: pointer;
}
.rejouer:hover { color: var(--n3); text-decoration-color: currentColor; }
.rejouer:disabled { opacity: 0.55; cursor: default; text-decoration-color: transparent; }

/* Fin de la partie : le livret, et l'arrivée au compte exact */
.livret { width: min(100%, 15.5rem); rotate: -3deg; }
.essai--arrivee { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.2rem 1.4rem; }
.essai__de { width: 3rem; height: 3rem; rotate: 14deg; filter: drop-shadow(0 0.4rem 0.5rem rgb(0 0 0 / 0.7)); }
.essai__de.roule { animation: roule 0.75s var(--sortie); }

/* Les questions et l'inscription, sur le rose de l'arrivée */
.regle--arrivee {
  --fond: var(--n3);
  --texte: var(--brun);
  --texte-doux: var(--decor);
  --titre-couleur: var(--brun);
  grid-template-columns: minmax(0, 1fr) auto;
  padding-top: max(11rem, calc(var(--respiration) * 1.4));
  background: linear-gradient(var(--n1) 0, var(--n2) 4.5rem, var(--n3) 9.5rem, var(--n3));
}
.regle--arrivee .regle__texte { max-width: 38rem; }
.question { margin-top: 2.2rem; font-size: 1.125rem; font-weight: 600; line-height: 1.4; }
.question + .regle__corps { margin-top: 0.6rem; }
.regle--arrivee a { text-decoration-color: var(--decor); }
.regle--arrivee :focus-visible { outline-color: var(--brun); }
.regle--arrivee ::selection { background: var(--brun); color: var(--n3); }

/* Entre l'ordinateur et le téléphone, le texte s'arrête avant le petit écriteau, qui reste accroché en haut à droite */
@media (min-width: 821px) and (max-width: 1320px) {
  .regle:not(.regle--arrivee) { padding-right: calc(clamp(1rem, 3vw, 2.5rem) + 8rem); }
}
@media (min-width: 821px) and (max-width: 960px) {
  .ouverture { grid-template-columns: 1fr; min-height: auto; padding-top: 8rem; }
  .ouverture__texte { max-width: 40rem; }
}

@media (max-width: 820px) {
  /* Sur téléphone, le contenu de la boîte se pose juste sous le titre, avant le texte */
  .ouverture { grid-template-columns: 1fr; gap: 1.9rem; min-height: auto; padding-top: 6.5rem; }
  .ouverture__texte { display: contents; }
  .ouverture .titre-marque { order: 1; }
  .table-ouverte { order: 2; margin-bottom: 1.2rem; }
  .ouverture__bloc, .ouverture .mention { order: 3; }
  .ouverture__titre { font-size: 1.75rem; }
  .objets { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.8rem 0.9rem; }
  .objet--plateau { grid-column: 1 / -1; grid-row: 1; }
  .objet--chance { grid-column: 1 / 5; grid-row: 2; }
  .objet--obstacle { grid-column: 5 / 7; grid-row: 2; }
  .objet--livret { grid-column: 1 / 3; grid-row: 3; padding-left: 0; }
  .objet--pions { grid-column: 3 / 5; grid-row: 3; }
  .objet--de { grid-column: 5 / 7; grid-row: 3; }
  .objet--chance .objet__chose { gap: 0.6rem; }
  .de-plat { width: 2.8rem; height: 2.8rem; }
  .objet--pions .pion-plat { --pion: 2rem; }

  .regle { grid-template-columns: 1fr; gap: 2.8rem; }
  .regle__objet { position: static; }
  /* Cartes CHANCE et OBSTACLE : les cartes se posent après la règle, juste avant l'exemple qu'elles allument */
  .regle--cartes { row-gap: 0; }
  .regle--cartes .regle__texte { display: contents; }
  .regle--cartes .regle__objet { order: 1; margin-top: 2.6rem; }
  .regle--cartes :is(.regle__sous-titre--exemple, .exemple) { order: 2; }
  .main-de-cartes { --l-carte: calc((100vw - 2 * var(--gouttiere) - 1.5rem) / 2); gap: 1.5rem; }
  .regle__sous-titre { font-size: 1.9rem; }
  .essai--palier .essai__paquet { width: 4.25rem; }
  .bande { --g: 2px; --bord: 4px; border-radius: 0.55rem; }
  .regle--arrivee { grid-template-columns: 1fr; }
  /* Le surlignage d'une ligne ne touche pas le bord de l'écran */
  .effets, .exemple { margin-left: 0; }
  .livret { width: min(70%, 13rem); }
  /* Sur les pages de lecture, le petit écriteau reste en haut au lieu de suivre et de couvrir le texte */
  body:not(.home) .mini { position: absolute; }
  /* le nom de la barre allonge la ligne : l'écriteau pend plus bas, sous les liens */
  body:not(.home) .mini { right: 0.6rem; }
  body:not(.home) .mini__ficelle { height: 3.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .objet, .lancer.roule .lancer__de, .essai__de.roule, .bande__pion.saute { animation: none; }
  .objet__chose, .bande__pion, .effets li, .etapes li, .exemple p, .essai__niveau > span, .plateau-pret > [data-pose], .lancer__de { transition: none; }
}

/* ---------- Page « L'histoire » : le livret de l'auteur (gabarits/histoire.php, fiche .impeccable/surfaces/…histoire-php.md) */

/* Le haut : le mot du créateur à gauche, son portrait posé de travers à droite ; le chemin commence au bas de l'écran */
.ouverture--histoire {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  min-height: calc(100svh - 5.5rem);
  padding-bottom: 3rem;
}
.mot { display: grid; gap: 1.1rem; max-width: 34rem; }
.mot p { font-size: clamp(1.0625rem, 1.15vw, 1.2rem); line-height: 1.7; }
.mot .ouverture__titre { margin-bottom: 0.2rem; }
.mot .mot__signature {
  justify-self: start;
  margin-top: 0.3rem;
  font-family: var(--titre);
  font-size: 2.7rem;
  line-height: 1.1;
  color: var(--n2-clair);
  rotate: -4deg;
}
.portrait { justify-self: center; width: min(100%, 25rem); margin: 0; }
.portrait__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.9rem;
  rotate: 2.5deg;
  box-shadow: 0 1.6rem 3rem -1.2rem rgb(0 0 0 / 0.9), 0 0.35rem 0.8rem rgb(0 0 0 / 0.5);
}

/* Les étapes : l'année et le titre sur une ligne, le texte dessous, une image ou des cartes à côté */
/* Des textes courts : moins de vide entre deux étapes qu'à l'accueil. Sur ordinateur, la première descend plus loin
   sous le Départ : le chemin y passe d'un côté à l'autre de la marge, et sur moins de 230 px environ son bord intérieur
   se replie en pointe. */
.chapitre { --respiration: clamp(3.75rem, 10vh, 7rem); }
@media (min-width: 821px) {
  .chapitre:first-of-type { padding-top: clamp(11rem, 26vh, 15rem); }
}
.chapitre[data-zone='1'] { --z: var(--n1); }
.chapitre[data-zone='2'] { --z: var(--n2); }
.chapitre[data-zone='3'], .chapitre[data-zone='arrivee'] { --z: var(--n3); }
.chapitre__titre { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.4em; font-size: clamp(2.5rem, 4vw, 3.75rem); }
.chapitre__fin { white-space: nowrap; }
.chapitre__annee { color: var(--n2-clair); }
.etape--arrivee .chapitre__annee { color: var(--decor); }
.chapitre__case {
  display: inline-block;
  vertical-align: -0.05em;
  width: 0.7em;
  height: 0.7em;
  padding: 0.07em;
  margin-left: 0.3em;
  border-radius: 0.12em;
  background: var(--z);
}
.chapitre__texte { display: grid; gap: 1rem; max-width: 34rem; margin-top: 1.4rem; font-size: var(--t-chapeau); line-height: 1.55; }

.chapitre--garni {
  display: grid;
  grid-template-columns: minmax(0, 27rem) minmax(0, 1fr);
  gap: 1.4rem clamp(2.5rem, 5vw, 5.5rem);
  align-items: start;
}
/* Le titre court sur toute la largeur ; le texte et l'image se partagent la ligne dessous */
.chapitre--garni .chapitre__corps { display: contents; }
.chapitre--garni .chapitre__corps > * { position: relative; z-index: 2; }
.chapitre--garni .chapitre__titre { grid-column: 1 / -1; }
.chapitre--garni .chapitre__texte { margin-top: 0; }
.chapitre__image { justify-self: start; width: min(100%, 27rem); margin: 0.4rem 0 0; }
.chapitre__photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  rotate: -2deg;
  box-shadow: 0 1.4rem 2.6rem -1rem rgb(0 0 0 / 0.9), 0 0.3rem 0.6rem rgb(0 0 0 / 0.45);
}
.chapitre--garni:nth-of-type(odd) .chapitre__photo { rotate: 2.5deg; }
.chapitre__image figcaption { max-width: 25rem; margin-top: 1.3rem; font-size: var(--t-petit); font-weight: 500; line-height: 1.5; color: var(--texte-doux); }

/* Les cartes en éventail, tenues comme une main de cartes : la première est de dos, on la retourne */
.eventail { display: flex; justify-self: start; margin: 0; padding: 1.5rem 0 1rem 2.4rem; list-style: none; }
.eventail li { margin-left: -2.4rem; }
.eventail li:nth-child(1) { --r: -9deg; }
.eventail li:nth-child(2) { --r: 0deg; --y: -0.5rem; }
.eventail li:nth-child(3) { --r: 9deg; }
.eventail .carte { --l-carte: clamp(6.5rem, 8.6vw, 9.75rem); transform-origin: 50% 115%; }

@media (min-width: 821px) and (max-width: 1320px) {
  .chapitre:not(.etape--arrivee) { padding-right: calc(clamp(1rem, 3vw, 2.5rem) + 8rem); }
}
@media (min-width: 821px) and (max-width: 960px) {
  .ouverture--histoire { grid-template-columns: 1fr; min-height: auto; }
  .portrait { justify-self: start; width: min(100%, 21rem); }
}
@media (max-width: 1100px) {
  .chapitre--garni { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  /* Sur téléphone : le titre, le portrait, puis le mot */
  .ouverture--histoire { grid-template-columns: 1fr; min-height: auto; }
  .portrait { order: 2; justify-self: start; width: min(17rem, 72vw); margin: 0.4rem 0 1.4rem 0.5rem; }
  .mot { order: 3; }
  .mot .mot__signature { font-size: 2.3rem; }
  .chapitre__image { width: 100%; }
  .chapitre__annee { flex-basis: 100%; }
  .eventail { padding-left: 2.75rem; }
  .eventail li { margin-left: -2rem; }
  .eventail .carte { --l-carte: 6.2rem; }
}

/* ---------- Articles : le livret ouvert (home.php et single.php, fiche .impeccable/surfaces/…home-php.md) */

/* La fin des deux pages : l'écriteau d'inscription dans le rose de l'arrivée */
.fin-rose {
  --texte: var(--brun);
  --texte-doux: var(--decor);
  display: grid;
  justify-items: center;
  padding: 13rem var(--gouttiere) 6rem;
  color: var(--brun);
  background: linear-gradient(var(--avant, var(--nuit-2)) 0, var(--n1) 4.5rem, var(--n2) 8.5rem, var(--n3) 12rem, var(--n3));
}
.fin-rose :focus-visible { outline-color: var(--brun); }

/* Le sommaire : le dernier article en grand, les précédents en lignes reliées au mois par des points */
/* le fond s'éclaire jusqu'à la couleur où commence le rose (--avant) : pas de marche avant l'inscription */
.sommaire__fond { background: linear-gradient(var(--noir) 0, var(--noir) 12rem, var(--nuit-2)); }
.sommaire__haut, .une, .precedents, .sommaire .pages, .sommaire__vide {
  width: min(100%, 74rem);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}
.sommaire__haut { padding-top: 8rem; }
.sommaire__chapeau { max-width: 34rem; margin-top: 1.5rem; font-size: var(--t-chapeau); line-height: 1.55; }
.sommaire__vide { padding-block: 4rem 6rem; font-size: var(--t-chapeau); }

.une {
  display: grid;
  grid-template-columns: minmax(0, 40rem) auto;
  gap: 3rem clamp(3rem, 8vw, 8rem);
  align-items: center;
  margin-top: clamp(3.5rem, 8vh, 5.5rem);
}
.une__titre { font-family: var(--titre); font-size: clamp(2.9rem, 5vw, 4.6rem); line-height: 1; color: var(--n3); }
.une__titre a { text-decoration: none; }
.une__titre a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
.une__chapeau { max-width: 36rem; margin-top: 1.5rem; font-size: var(--t-chapeau); line-height: 1.55; }
.une__pied { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 2.2rem; }
.une__pied .bouton { display: inline-block; margin: 0; text-decoration: none; }
.une__pied time { font-weight: 500; color: var(--texte-doux); }
.une__carte { padding: 1rem 2rem 0 0; }
.une .carte { --l-carte: clamp(11rem, 17vw, 15rem); --r: 4deg; }

.precedents { margin-top: clamp(5rem, 12vh, 8rem); padding-bottom: 2rem; }
.precedents__titre { font-family: var(--titre); font-size: 2.2rem; line-height: 1; color: var(--n2-clair); }
.precedents__liste { margin: 1.6rem 0 0; padding: 0; list-style: none; border-bottom: 1px solid var(--decor); }
.ligne {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.15rem 0;
  border-top: 1px solid var(--decor);
  text-decoration: none;
}
.ligne__titre { font-family: var(--titre); font-size: clamp(1.7rem, 2.4vw, 2.2rem); line-height: 1.15; color: var(--n3); text-wrap: balance; }
.ligne__points { flex: 1; min-width: 2rem; border-bottom: 2px dotted var(--n1); translate: 0 -0.35rem; }
.ligne__date { flex: none; font-weight: 500; color: var(--texte-doux); }
.ligne:hover .ligne__titre { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
.ligne:hover .ligne__points { border-color: var(--n2); }
.sommaire .pages { padding-block: 2rem; }
.sommaire .pages .nav-links { display: flex; gap: 1rem 2rem; flex-wrap: wrap; font-weight: 500; }

/* L'article : une colonne calme, la carte en marge ; la lumière monte du noir au brun pendant la lecture */
.lecture-page { --avant: var(--brun); }
.lecture-fond { background: linear-gradient(var(--noir) 0, var(--noir) 22rem, var(--nuit-2) 55%, var(--brun)); }
.lecture {
  display: grid;
  grid-template-columns: minmax(0, 40rem) minmax(11rem, 1fr);
  gap: 0 clamp(3rem, 8vw, 8rem);
  width: min(100%, 74rem);
  margin-inline: auto;
  padding: 8.5rem var(--gouttiere) 4rem;
}
.lecture > * { grid-column: 1; }
.lecture__titre { font-family: var(--titre); font-size: clamp(3rem, 5.6vw, 5.25rem); line-height: 1; color: var(--n3); }
.lecture__chapeau { margin-top: 1.6rem; font-size: var(--t-chapeau); line-height: 1.55; }
.lecture__meta { margin-top: 1.4rem; font-weight: 500; color: var(--texte-doux); }
.lecture__carte {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: start;
  justify-self: center;
  position: sticky;
  top: 7.5rem;
  padding-top: 1rem;
}
.lecture__carte .carte { --l-carte: clamp(10rem, 15vw, 13.5rem); --r: 4deg; }

.lecture__corps { margin-top: 3.5rem; font-size: 1.1875rem; line-height: 1.75; }
.lecture__corps > * + * { margin-top: 1.25em; }
.lecture__corps h2 {
  margin-top: 2.3em;
  font-family: var(--titre);
  font-size: clamp(2.1rem, 3vw, 2.6rem);
  line-height: 1.05;
  color: var(--n3);
}
.lecture__corps h2 + * { margin-top: 0.8em; }
.lecture__corps blockquote {
  margin: 1.6em 0;
  padding: 0.2em 0 0.2em 1.4rem;
  border-left: 1px solid var(--n1);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--n2-clair);
}
.lecture__corps blockquote p { margin: 0; }
.lecture__corps strong { font-weight: 600; color: var(--blanc); }
.lecture__corps a { text-decoration-color: var(--n2); }
.lecture__signature {
  justify-self: start;
  margin-top: 2.6rem;
  font-family: var(--titre);
  font-size: 2.7rem;
  line-height: 1.1;
  color: var(--n2-clair);
  rotate: -4deg;
}

.voisins {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 1.5rem 3rem;
  width: min(100%, 74rem);
  margin-inline: auto;
  padding: 2rem var(--gouttiere) 1rem;
}
.voisin { display: grid; gap: 0.35rem; max-width: 30rem; text-decoration: none; }
.voisin__sens { font-size: var(--t-petit); font-weight: 500; color: var(--texte-doux); }
.voisin__titre { font-family: var(--titre); font-size: 1.9rem; line-height: 1.1; color: var(--n3); text-wrap: balance; }
.voisin:hover .voisin__titre { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
.voisins__tous { margin-left: auto; font-weight: 500; }

@media (min-width: 821px) and (max-width: 1320px) {
  .sommaire__haut, .une, .precedents, .lecture, .voisins { padding-right: calc(clamp(1rem, 3vw, 2.5rem) + 8rem); }
}
@media (max-width: 960px) {
  .une { grid-template-columns: 1fr; }
  .une__carte { padding: 0; }
}
@media (max-width: 820px) {
  .sommaire__haut { padding-top: 6.5rem; }
  .une .carte { --l-carte: 11rem; }
  .ligne { flex-wrap: wrap; gap: 0.2rem 1rem; }
  .ligne__points { display: none; }
  .ligne__date { flex-basis: 100%; }
  .lecture { grid-template-columns: 1fr; padding-top: 6.5rem; }
  .lecture__carte { grid-column: 1; grid-row: auto; position: static; justify-self: start; margin-top: 2.4rem; padding: 0 0 0 0.6rem; }
  .lecture__carte .carte { --l-carte: 9.5rem; }
  .lecture__corps { margin-top: 2.6rem; font-size: 1.0625rem; line-height: 1.7; }
  .lecture__corps blockquote { font-size: 1.125rem; padding-left: 1.1rem; }
  .lecture__signature { font-size: 2.3rem; }
  .voisins__tous { margin-left: 0; }
  .fin-rose { padding-top: 11rem; }
}