/* ─────────────────────────────────────────────────────────────────────────
   Fire and Blood — la page d'accueil.

   Même parti pris que l'écran de jeu : pierre, parchemin, cire, fer. Rien de
   blanc, rien d'arrondi sans raison, aucune carte flottante. Les tokens sont
   recopiés ici et non importés : la page d'accueil doit s'afficher entière
   même si la feuille du jeu, bien plus lourde, n'est pas encore arrivée.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --pierre:        #12100d;
  --pierre-claire: #1d1a15;
  --parchemin:     #e3d5b3;
  --encre-pale:    #5c4d3c;
  --cuir:          #3a2b1c;
  --cuir-clair:    #55402a;
  --fer:           #7b8189;
  --cire:          #7e1d16;
  --or:            #c39b3e;
  --or-eteint:     #b99545;
  --sur-pierre:      #cbbfa6;
  /* #8a8171 tombait à 3,5:1 sur les cartes des dragons : 4,5:1 au moins pour le petit texte. */
  --sur-pierre-pale: #a59a88;

  --serif-titre: 'Palatino Linotype', Palatino, Georgia, serif;
  --serif-corps: Georgia, 'Times New Roman', serif;

  --gouttiere: clamp(1rem, 4vw, 2.5rem);
  --large: 1180px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--pierre);
  color: var(--sur-pierre);
  font-family: var(--serif-corps);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--or); text-underline-offset: 3px; }
a:hover { color: var(--parchemin); }
img { max-width: 100%; height: auto; display: block; }

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

.hors-ecran {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Le grain de la pierre, sur toute la page. */
.grain {
  position: fixed; inset: 0; z-index: 3;
  width: 100%; height: 100%;
  pointer-events: none; opacity: 0.05; mix-blend-mode: overlay;
}

/* ── La barre ─────────────────────────────────────────────────────────── */

.barre {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0.7rem var(--gouttiere);
  background: rgba(12, 10, 8, 0.82);
  border-bottom: 1px solid rgba(195, 155, 62, 0.22);
  backdrop-filter: blur(8px);
}

.barre__marque { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.barre__marque img { width: 30px; height: 30px; }
.barre__nom {
  font-family: var(--serif-titre);
  font-size: 0.94rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--parchemin);
}

.barre__liens { display: flex; gap: 1.6rem; margin-left: auto; }
.barre__liens a {
  font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sur-pierre-pale); text-decoration: none;
}
.barre__liens a:hover { color: var(--or); }
@media (max-width: 860px) { .barre__liens { display: none; } }

/* ── Les boutons ──────────────────────────────────────────────────────── */

.sceau {
  display: inline-block;
  padding: 0.85rem 2.1rem;
  font-family: var(--serif-titre);
  font-size: 0.92rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--pierre);
  background: linear-gradient(180deg, #d8b054, var(--or-eteint));
  border: 1px solid #e8c66d;
  text-decoration: none;
  cursor: pointer;
  transition: transform 140ms ease, filter 140ms ease;
}
.sceau:hover { filter: brightness(1.12); transform: translateY(-1px); color: var(--pierre); }
.sceau--fer {
  color: var(--parchemin);
  background: linear-gradient(180deg, rgba(58, 43, 28, 0.9), rgba(24, 20, 15, 0.9));
  border-color: var(--cuir-clair);
}
.sceau--fer:hover { color: var(--or); }
.barre .sceau { margin-left: 0; padding: 0.5rem 1.3rem; font-size: 0.78rem; }
@media (prefers-reduced-motion: reduce) { .sceau { transition: none; } .sceau:hover { transform: none; } }

/* ── Le titre ─────────────────────────────────────────────────────────── */

.titre {
  position: relative;
  min-height: min(90svh, 760px);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(3rem, 9vh, 6rem) var(--gouttiere);
  text-align: center;
  overflow: hidden;
}

.titre__fond {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100% !important; object-fit: cover;
  filter: saturate(0.82) contrast(1.05);
}
/* La pierre remonte par le bas : le texte se lit sur du sombre, l'image
   garde son ciel. */
.titre::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(120% 90% at 50% 30%, rgba(12, 10, 8, 0.12), rgba(12, 10, 8, 0.78) 72%),
    linear-gradient(180deg, rgba(12, 10, 8, 0.55) 0%, rgba(12, 10, 8, 0.1) 34%, rgba(18, 16, 13, 0.97) 100%);
}

.titre__dedans { position: relative; z-index: 3; max-width: 760px; }
/* Le blason : plus grand, et vivant. Une braise respire derriere lui et il monte
   d'un cran au chargement. Un trait clair balayait le metal par-dessus ; retire
   le 03/09, le proprietaire le trouvait moche, et sur telephone il posait un
   rectangle plus clair qui cachait l'image de fond. */
.titre__blason {
  position: relative;
  width: clamp(270px, 44vw, 560px);
  margin: 0 auto 1.2rem;
  animation: blason-entre 1100ms cubic-bezier(0.16, 0.9, 0.3, 1) both;
}

.titre__blason::before {
  content: '';
  position: absolute;
  left: 50%; top: 52%;
  width: 118%; aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  /* Deux fois plus discret qu'avant : sur telephone le blason prend 44 pour cent
     de la largeur, et son halo cachait l'image de fond derriere lui. */
  background: radial-gradient(circle, rgba(214, 138, 46, 0.26) 0%, rgba(160, 60, 20, 0.1) 38%, transparent 66%);
  filter: blur(20px);
  animation: braise 5.5s ease-in-out infinite;
  pointer-events: none;
}

.titre__blason img {
  position: relative;
  width: 100%; height: auto;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.75));
  animation: blason-flotte 7s ease-in-out infinite;
}

@keyframes blason-entre {
  from { opacity: 0; transform: translateY(22px) scale(0.94); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes blason-flotte {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
@keyframes braise {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.95); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .titre__blason,
  .titre__blason img,
  .titre__blason::before { animation: none; }
  .titre__blason::after { opacity: 0; }
}

.titre__accroche {
  margin: 0 0 0.6rem;
  font-family: var(--serif-titre);
  font-size: clamp(1.4rem, 1rem + 1.9vw, 2.4rem);
  line-height: 1.18;
  color: var(--parchemin);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.85);
}
.titre__dit {
  margin: 0 auto 1.6rem;
  max-width: 46ch;
  color: var(--sur-pierre);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9);
}
.titre__portes { display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; }
.titre__sans {
  margin: 1.3rem 0 0;
  font-size: 0.84rem; letter-spacing: 0.09em;
  color: var(--sur-pierre-pale);
}

/* ── Les sections ─────────────────────────────────────────────────────── */

.pan { padding: clamp(3rem, 8vw, 5.5rem) var(--gouttiere); }
.pan--sombre { background: #0d0b09; border-block: 1px solid rgba(195, 155, 62, 0.13); }
.pan__dedans { max-width: var(--large); margin: 0 auto; }

.pan__sur {
  margin: 0 0 0.5rem;
  font-size: 0.78rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--or-eteint);
}
.pan__titre {
  margin: 0 0 0.8rem;
  font-family: var(--serif-titre);
  font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.2rem);
  color: var(--parchemin);
  font-weight: 400;
}
.pan__dit { margin: 0 0 2.4rem; max-width: 62ch; color: var(--sur-pierre-pale); }

/* ── L'échelle des rangs ──────────────────────────────────────────────── */

.echelle { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.55rem; }
.echelle li {
  padding: 0.5rem 1rem;
  border: 1px solid var(--cuir);
  background: var(--pierre-claire);
  font-family: var(--serif-titre);
  font-size: 0.94rem;
  color: var(--sur-pierre);
}
.echelle li[data-marche="haut"] { border-color: rgba(195, 155, 62, 0.55); color: var(--or); }
.echelle__fleche { align-self: center; color: var(--encre-pale); }

/* ── Les dragons ──────────────────────────────────────────────────────────
   La rareté se voit avant qu'on lise son nom. Quatre paliers, et à chaque
   palier une couche de plus : le commun n'a que sa pierre et son fer, et il est
   volontairement terne — sans une carte éteinte à côté, une carte allumée ne se
   remarque pas. Le rare gagne un halo bleu, l'épique une couronne de rayons
   pourpres qui tourne, le légendaire la même chose en or, plus vive, avec ses
   coins ciselés et son sceau.

   Une seule teinte pilote tout : « --lueur ». Les deux autres nombres disent
   jusqu'où monte le halo et jusqu'où montent les rayons. Ajouter un palier, ou
   changer une couleur, se fait sur trois lignes.

   La carte elle-même ne porte ni fond ni bordure : ils sont sur le cadre à
   l'intérieur. Sans cela le fond opaque de la carte couvrirait ses propres
   halos, qui sont peints derrière. */

.couvee__dit { margin-bottom: 0; }

.couvee {
  display: grid; gap: 1.6rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none; margin: 0;
  /* Les halos et les rayons débordent des cartes ; la marge intérieure leur
     fait leur place. Le débord ne dépasse jamais la gouttière de la page,
     sinon sur un écran étroit la liste sort de l'écran et toute la page glisse
     sur le côté. « clip » coupe ce qui dépasse encore : le rectangle d'un carré
     qui tourne est plus large que le carré. */
  --debord: min(2.6rem, var(--gouttiere));
  padding: 1.4rem var(--debord);
  margin-inline: calc(-1 * var(--debord));
  overflow-x: clip;
}
/* Jamais une seule colonne : huit cartes l'une sous l'autre font quatre mille
   pixels à faire défiler sur un téléphone, et la rareté ne se compare plus
   puisqu'on n'en voit qu'une à la fois. */
@media (max-width: 980px) { .couvee { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem; } }
@media (max-width: 560px) { .couvee { gap: 0.9rem; } }

.dragon {
  position: relative;
  background: none; border: none;
  --lueur: 128 138 150;
  --halo: 0;
  --rayons: 0;
}
.dragon--rare       { --lueur:  96 168 232; --halo: 0.62; }
.dragon--epique     { --lueur: 178 120 238; --halo: 0.85; --rayons: 0.55; }
.dragon--legendaire { --lueur: 238 184  76; --halo: 1;    --rayons: 1; }

/* Le halo qui respire, derrière la carte. */
.dragon::before {
  content: '';
  position: absolute; inset: -22% -18%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgb(var(--lueur) / 0.66) 0%,
    rgb(var(--lueur) / 0.22) 50%,
    rgb(var(--lueur) / 0) 76%);
  filter: blur(22px);
  opacity: var(--halo);
  animation: respirer 4.6s ease-in-out infinite alternate;
  pointer-events: none;
}

/* Les rayons, qui tournent lentement. Ils n'existent qu'à partir de l'épique :
   c'est ce qui fait qu'un légendaire s'attrape du coin de l'œil. */
.dragon::after {
  content: '';
  position: absolute; inset: -24% -16%;
  z-index: 0;
  background: conic-gradient(
    rgb(var(--lueur) / 0)   0deg, rgb(var(--lueur) / 0.85)   7deg, rgb(var(--lueur) / 0)  20deg,
    rgb(var(--lueur) / 0)  44deg, rgb(var(--lueur) / 0.45)  50deg, rgb(var(--lueur) / 0)  61deg,
    rgb(var(--lueur) / 0)  88deg, rgb(var(--lueur) / 0.85)  96deg, rgb(var(--lueur) / 0) 109deg,
    rgb(var(--lueur) / 0) 133deg, rgb(var(--lueur) / 0.45) 140deg, rgb(var(--lueur) / 0) 152deg,
    rgb(var(--lueur) / 0) 178deg, rgb(var(--lueur) / 0.85) 187deg, rgb(var(--lueur) / 0) 200deg,
    rgb(var(--lueur) / 0) 223deg, rgb(var(--lueur) / 0.45) 230deg, rgb(var(--lueur) / 0) 242deg,
    rgb(var(--lueur) / 0) 268deg, rgb(var(--lueur) / 0.85) 277deg, rgb(var(--lueur) / 0) 290deg,
    rgb(var(--lueur) / 0) 313deg, rgb(var(--lueur) / 0.45) 320deg, rgb(var(--lueur) / 0) 332deg,
    rgb(var(--lueur) / 0) 360deg);
  mask-image: radial-gradient(closest-side, #000 22%, rgba(0, 0, 0, 0.42) 50%, transparent 68%);
  filter: blur(4px);
  opacity: calc(0.44 * var(--rayons));
  animation: tourner 34s linear infinite;
  will-change: transform;
  pointer-events: none;
}
.dragon--commun::after, .dragon--rare::after { content: none; }

.dragon figure {
  position: relative; z-index: 1;
  margin: 0;
  background: var(--pierre-claire);
  border: 1px solid rgb(var(--lueur) / 0.5);
  transition: box-shadow 260ms ease, border-color 260ms ease;
  box-shadow:
    inset 0 1px 0 rgba(240, 224, 184, 0.22),
    inset 0 -3px 0 rgba(0, 0, 0, 0.6),
    inset 0 0 2rem rgb(var(--lueur) / calc(0.26 * var(--halo))),
    0 0 0 1px rgb(var(--lueur) / calc(0.3 * var(--halo))),
    0 0 2.4rem rgb(var(--lueur) / calc(0.5 * var(--halo))),
    0 16px 32px rgba(0, 0, 0, 0.58);
}
.dragon:hover figure, .dragon:focus-within figure {
  border-color: rgb(var(--lueur) / 0.9);
  box-shadow:
    inset 0 1px 0 rgba(246, 232, 198, 0.34),
    inset 0 0 2.6rem rgb(var(--lueur) / calc(0.4 * var(--halo))),
    0 0 0 1px rgb(var(--lueur) / calc(0.55 * var(--halo))),
    0 0 3.6rem rgb(var(--lueur) / calc(0.72 * var(--halo))),
    0 34px 70px rgba(0, 0, 0, 0.72);
}

/* Les coins ciselés de l'épique et du légendaire : un cadre d'un pixel dont le
   masque ne garde que les quatre angles. */
.dragon--epique figure::before,
.dragon--legendaire figure::before {
  content: '';
  position: absolute; inset: 5px; z-index: 2;
  border: 1px solid rgb(var(--lueur) / 0.75);
  pointer-events: none;
  mask-image:
    linear-gradient(#000 0 0), linear-gradient(#000 0 0),
    linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  mask-size: 20px 20px;
  mask-repeat: no-repeat;
  mask-position: top left, top right, bottom left, bottom right;
}

/* Le cadre porte l'image et l'étiquette posée dessus. Un léger portrait plutôt
   qu'un carré : c'est la forme d'une carte qu'on tire. */
.couvee__cadre { display: block; position: relative; }
.couvee img { width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; }
/* Un commun reste terne. C'est la comparaison qui donne sa valeur au reste. */
.dragon--commun img { filter: saturate(0.62) brightness(0.82); }
/* Le haut et le bas s'assombrissent : l'étiquette et le nom se lisent quelle
   que soit l'image dessous. */
.couvee__cadre::after {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(10, 8, 6, 0.42) 0%, rgba(10, 8, 6, 0) 26%, rgba(10, 8, 6, 0) 62%, rgba(10, 8, 6, 0.6) 100%);
  pointer-events: none;
}

.dragon__nom {
  position: relative; z-index: 3;
  padding: 0.62rem 0.75rem;
  border-top: 1px solid rgb(var(--lueur) / 0.42);
  background: linear-gradient(180deg, rgb(var(--lueur) / 0.14), rgba(0, 0, 0, 0) 92%);
  font: 1rem var(--serif-titre);
  color: var(--parchemin);
}
/* La façon de l'obtenir, sous le nom : un œuf trouvé en jeu, ou la boutique.
   Sans elle, un légendaire vendu passait pour un légendaire qu'on trouve. */
.dragon__obtenu {
  display: block; margin-top: 0.2rem;
  font: 0.72rem var(--serif-corps);
  letter-spacing: 0.04em;
  color: var(--sur-pierre-pale);
}
.dragon[data-obtenu="boutique"] .dragon__obtenu { color: rgb(var(--lueur)); }
/* L'étiquette est posée sur l'image, en haut à droite : c'est la première
   chose qu'on lit sur une carte de tirage. */
.dragon__rarete {
  position: absolute; z-index: 3;
  top: 0.55rem; right: 0.55rem;
  padding: 0.2rem 0.5rem;
  font: 0.64rem var(--serif-titre);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgb(var(--lueur));
  border: 1px solid rgb(var(--lueur) / 0.6);
  background: rgba(10, 8, 6, 0.72);
  backdrop-filter: blur(3px);
}
.dragon--commun .dragon__rarete { color: var(--sur-pierre-pale); border-color: rgba(128, 138, 150, 0.5); }
/* Le violet du halo, en lettres de 10 px, restait sous 4,5:1 : l'étiquette prend un ton plus clair. */
.dragon--epique .dragon__rarete { color: #c08cfc; }
.dragon--legendaire .dragon__rarete {
  color: #17110a;
  background: linear-gradient(180deg, #f6dc96, rgb(var(--lueur)));
  border-color: #fbecbe;
  animation: sceau-vif 2.8s ease-in-out infinite alternate;
}

@keyframes respirer {
  from { opacity: calc(var(--halo) * 0.5); transform: scale(0.94); }
  to   { opacity: var(--halo);             transform: scale(1.06); }
}
@keyframes tourner { to { rotate: 1turn; } }
@keyframes sceau-vif {
  from { box-shadow: 0 0 0 rgb(var(--lueur) / 0); }
  to   { box-shadow: 0 0 0.9rem rgb(var(--lueur) / 0.75); }
}

/* Moins de mouvement : les halos restent, ils cessent de bouger. Les effacer
   reviendrait à supprimer la rareté pour une partie des joueurs. */
@media (prefers-reduced-motion: reduce) {
  .dragon::before { animation: none; opacity: var(--halo); }
  .dragon::after  { animation-duration: 300s; }
  .dragon--legendaire .dragon__rarete { animation: none; box-shadow: 0 0 0.7rem rgb(var(--lueur) / 0.6); }
}

/* ── Installation mobile ────────────────────────────────────────────── */
.installation__cartes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 0 0 1.1rem;
}
.installation__carte {
  padding: 1.2rem;
  border: 1px solid var(--cuir);
  background: rgba(22, 18, 13, .72);
}
.installation__numero {
  display: block;
  margin-bottom: .7rem;
  color: var(--or);
  font: .76rem var(--serif-titre);
  letter-spacing: .18em;
}
.installation__carte h3 { margin: 0 0 .5rem; color: var(--parchemin); font: 1.15rem var(--serif-titre); }
.installation__carte p, .installation__note { margin: 0; color: var(--sur-pierre-pale); line-height: 1.55; }
.installation__note { font-size: .88rem; }
@media (max-width: 620px) { .installation__cartes { grid-template-columns: 1fr; } }

/* ── Deux colonnes, texte et image ────────────────────────────────────── */

.duo {
  display: grid; gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) { .duo { grid-template-columns: 1.05fr 1fr; } }
.duo--inverse .duo__image { order: -1; }
@media (max-width: 899px) { .duo--inverse .duo__image { order: 0; } }
.duo__image img { width: 100%; border: 1px solid var(--cuir); filter: saturate(0.8); }
.duo ul { margin: 0 0 1.6rem; padding-left: 1.1rem; }
.duo li { margin-bottom: 0.55rem; }

/* ── L'appel de la fin ────────────────────────────────────────────────── */

.appel { text-align: center; }
.appel .pan__dit { margin-inline: auto; }

/* ── Le pied ──────────────────────────────────────────────────────────── */

.pied {
  padding: 2.4rem var(--gouttiere) 3rem;
  border-top: 1px solid rgba(195, 155, 62, 0.16);
  background: #0a0907;
  font-size: 0.86rem;
  color: var(--sur-pierre-pale);
}
.pied__dedans { max-width: var(--large); margin: 0 auto; display: grid; gap: 1.2rem; }
.pied__liens { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.pied__liens a { text-decoration: none; }
.pied__mention { margin: 0; max-width: 78ch; font-size: 0.8rem; line-height: 1.55; }

/* ── Les braises et les flocons ──────────────────────────────────────────────
   Le dragon est a gauche de l'image de fond, le Marcheur a droite. Des braises
   montent d'un cote, des flocons tombent de l'autre. Rien d'autre.

   Il y a eu des voiles de couleur, des flammes et du givre par-dessus l'image ;
   retires le 03/09 a la demande du proprietaire. Le masque reste : il eteint les
   particules avant le milieu de l'ecran, sinon elles s'arretent net sur une
   ligne droite. */

.element {
  position: absolute;
  top: 0; bottom: 0;
  width: 46%;
  /* Au-dessus du voile sombre du titre, qui vaut 1. Sous lui, les particules
     passaient sous un noir a 78 pour cent et on ne les voyait plus. */
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.element--feu {
  left: 0;
  mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.5) 58%, transparent 100%);
}

.element--glace {
  right: 0;
  mask-image: linear-gradient(270deg, #000 0%, rgba(0, 0, 0, 0.5) 58%, transparent 100%);
}

.grain-feu, .grain-glace {
  position: absolute;
  border-radius: 50%;
  will-change: transform, opacity;
}

.grain-feu {
  bottom: -12px;
  background: radial-gradient(circle, #fff6d8 0%, #ffce74 28%, #ef7418 58%, rgba(239, 116, 24, 0) 78%);
  box-shadow: 0 0 12px 3px rgba(255, 150, 44, 0.7);
  animation: braise-monte linear infinite;
}

.grain-glace {
  top: -12px;
  background: radial-gradient(circle, #ffffff 0%, #ecf8ff 34%, #a8d6f2 60%, rgba(168, 214, 242, 0) 80%);
  box-shadow: 0 0 10px 2px rgba(214, 240, 255, 0.7);
  animation: flocon-tombe linear infinite;
}

@keyframes braise-monte {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 0; }
  10%  { opacity: 1; }
  76%  { opacity: 0.8; }
  100% { transform: translate3d(var(--derive, 30px), calc(-1 * var(--course, 460px)), 0) scale(0.3); opacity: 0; }
}

@keyframes flocon-tombe {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  12%  { opacity: 1; }
  78%  { opacity: 0.65; }
  100% { transform: translate3d(var(--derive, -26px), var(--course, 520px), 0); opacity: 0; }
}

/* Moins de mouvement ne veut pas dire plus rien : les particules restent, elles
   ralentissent. Les effacer etait une faute, un navigateur qui repond « moins de
   mouvement » laissait la page sans rien. */
@media (prefers-reduced-motion: reduce) {
  .grain-feu, .grain-glace { animation-duration: 26s !important; }
}

/* ── Le relief ───────────────────────────────────────────────────────────────
   Les cartes et les images se posent sur un plan : au survol elles s'inclinent
   vers la souris et leur image glisse un peu moins vite que leur cadre, ce qui
   creuse la profondeur. Les angles viennent du script. */

/* La perspective voyage dans la transformation elle-meme, une par carte : le
   point de fuite suit le curseur au lieu d'etre commun a toute la grille. */
.couvee li, .duo__image {
  transform-style: preserve-3d;
  transition: transform 260ms ease, box-shadow 260ms ease;
}

/* Un cadre en relief, sans rien survoler. Une plaque posee sur la page : la
   lumiere prend l'arete du haut et le bord gauche, l'ombre prend le bas et la
   droite, et l'ensemble porte son ombre sur le fond. La premiere version etait
   trop legere, les cartes restaient plates a l'oeil. */
.duo__image {
  box-shadow:
    inset 0 2px 0 rgba(240, 224, 184, 0.3),
    inset 2px 0 0 rgba(240, 224, 184, 0.14),
    inset 0 -3px 0 rgba(0, 0, 0, 0.62),
    inset -2px 0 0 rgba(0, 0, 0, 0.42),
    0 16px 32px rgba(0, 0, 0, 0.58),
    0 3px 6px rgba(0, 0, 0, 0.5);
}

.duo__image:hover {
  box-shadow:
    inset 0 2px 0 rgba(246, 232, 198, 0.44),
    inset 2px 0 0 rgba(246, 232, 198, 0.2),
    inset 0 -3px 0 rgba(0, 0, 0, 0.55),
    0 34px 70px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(195, 155, 62, 0.42);
}

.releve {
  transform:
    perspective(900px)
    rotateX(calc(var(--pencheX, 0) * 1deg))
    rotateY(calc(var(--pencheY, 0) * 1deg))
    translateZ(26px);
}

/* L'entree au defilement. Sans souris il ne se passait rien : sur un telephone
   l'inclinaison n'existe pas, et la page semblait plate. Chaque cadre arrive
   maintenant couche en arriere et se redresse quand il entre dans l'ecran.
   Le script pose « a-surgir » lui-meme : sans lui tout reste visible. */
.a-surgir { opacity: 0; }
.entre { animation: surgir 820ms cubic-bezier(0.16, 0.9, 0.3, 1); }

/* La bascule ne touche PAS a l'opacite. Une animation ne bouge que si le
   navigateur dessine des images ; dans un onglet qu'il croit cache il n'en
   dessine aucune, et un cadre reste bloque sur sa premiere etape. Si cette
   etape est « invisible », l'image ne revient jamais. Elle ne fait donc que
   redresser : au pire le cadre reste penche, jamais efface. */
@keyframes surgir {
  0%   { transform: perspective(900px) rotateX(15deg) translate3d(0, 34px, -60px) scale(0.95); }
  100% { transform: none; }
}

/* Les quinze images derivent en permanence dans leur cadre : un lent va-et-vient
   avec un peu de grossissement. C'est le seul relief qui se voie sans souris,
   donc le seul qui existe sur un telephone. Chaque image part a un moment
   different, sinon les quinze respirent ensemble et ca se voit.

   La derive tient la transformation de l'image. L'inclinaison, elle, tient le
   cadre : les deux ne se marchent pas dessus. */
.couvee img, .duo__image img {
  animation: deriver 26s ease-in-out infinite alternate;
}
.couvee li:nth-child(2n) img { animation-delay: -8s; animation-duration: 31s; }
.couvee li:nth-child(3n) img { animation-delay: -16s; animation-duration: 22s; }
.duo:nth-of-type(2n) .duo__image img { animation-delay: -11s; animation-duration: 29s; }

@keyframes deriver {
  0%   { transform: scale(1.02) translate3d(-1.2%, 0.8%, 0); }
  100% { transform: scale(1.12) translate3d(1.4%, -1%, 0); }
}

.couvee__cadre, .duo__image { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .couvee li, .duo__image,
  .couvee img, .duo__image img { transition: none; }
  .releve { transform: none; }
  .couvee img, .duo__image img { animation-duration: 90s !important; }
  /* En mouvement reduit le cadre ne bascule pas du tout : il est simplement la. */
  .entre { animation: none; }
}

/* Direction 2026 : la page devient une entrée de jeu, pas une brochure. */
:root {
  --nuit-profonde: #080b10;
  --acier-bleu: #9eacb9;
  --or-vif: #d8b45c;
  --braise-vive: #d55b35;
  --ligne-fine: rgba(216, 180, 92, 0.28);
}
body { background: var(--nuit-profonde); color: #d8d4ca; }
.barre {
  position: fixed; z-index: 10; inset: 0 0 auto;
  width: min(100% - 2rem, 1320px); margin: 1rem auto 0;
  padding: .7rem .8rem .7rem 1rem;
  background: rgba(8, 11, 16, .72);
  border: 1px solid rgba(216, 180, 92, .18);
  backdrop-filter: blur(18px) saturate(1.15);
  box-shadow: 0 1rem 4rem rgba(0,0,0,.28);
}
.barre__nom { font-family: var(--serif-titre); letter-spacing: .06em; }
.barre__liens a { letter-spacing: .08em; text-transform: none; color: #aeb5ba; }
.barre__liens a:hover { color: var(--or-vif); }
.sceau { letter-spacing: .1em; border-radius: 2px; box-shadow: 0 8px 20px rgba(0,0,0,.2); }
.titre {
  min-height: min(100svh, 900px);
  justify-content: flex-start; align-items: flex-end;
  padding: clamp(8rem, 16vh, 11rem) max(var(--gouttiere), 6vw) clamp(4rem, 9vh, 7rem);
  text-align: left;
}
.titre__fond { filter: saturate(.98) contrast(1.03) brightness(1.1); transform: scale(1.03); }
.titre__visuel { position: absolute; inset: 0; z-index: 0; display: block; }
.titre__visuel .titre__fond { position: absolute; inset: 0; }
.element, .grain-feu, .grain-glace { display: none !important; }
.titre::after {
  background:
    linear-gradient(90deg, rgba(3, 7, 12, .18) 0%, rgba(3, 7, 12, .06) 42%, rgba(3, 7, 12, 0) 82%),
    linear-gradient(0deg, rgba(3, 7, 12, .16) 0%, rgba(3, 7, 12, .03) 48%, rgba(3, 7, 12, .04) 100%);
}
@media (min-width: 701px) {
  .titre__visuel { top: 4.6rem; bottom: -2.8rem; }
}
.titre::after {
  background: linear-gradient(90deg, rgba(5,8,12,.94) 0%, rgba(5,8,12,.58) 42%, rgba(5,8,12,.06) 78%), linear-gradient(0deg, rgba(5,8,12,.98) 0%, rgba(5,8,12,.08) 55%, rgba(5,8,12,.45) 100%);
}
.titre__dedans { max-width: 670px; }
.titre__blason { width: clamp(150px, 19vw, 260px); margin: 0 0 1.1rem; }
.titre__blason::before { left: 38%; top: 48%; width: 130%; background: radial-gradient(circle, rgba(213,91,53,.34), transparent 68%); }
.titre__kicker { display: inline-flex; margin: 0 0 1.1rem; padding: .45rem .7rem; border-block: 1px solid var(--ligne-fine); color: var(--or-vif); font: .72rem/1.2 var(--serif-corps); letter-spacing: .13em; text-transform: uppercase; }
.titre__accroche { max-width: 10ch; margin-bottom: 1rem; font-size: clamp(2.5rem, 5.5vw, 5.5rem); line-height: .98; text-wrap: balance; }
.titre__dit { max-width: 50ch; margin-left: 0; color: #c0c5c7; font-size: clamp(1.02rem, 1rem + .3vw, 1.25rem); }
.titre__portes { justify-content: flex-start; }
.titre__portes .sceau { min-height: 3.15rem; display: inline-flex; align-items: center; }
.titre__sans { margin-left: 0; color: #abb2b5; letter-spacing: .03em; }
.titre__preuve { display: flex; gap: 1.4rem; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid rgba(216,180,92,.22); }
.titre__preuve span { display: grid; grid-template-columns: auto 1fr; column-gap: .55rem; align-items: baseline; }
.titre__preuve strong { color: var(--braise-vive); font: .78rem/1 var(--serif-titre); }
.titre__preuve small { color: #b7b9b6; font-size: .78rem; }
.pan { padding-block: clamp(5rem, 10vw, 9rem); }
.pan--sombre { background: #0a0e14; border-block-color: rgba(158,172,185,.15); }
.pan__sur { color: var(--braise-vive); letter-spacing: .14em; text-transform: none; }
.pan__titre { font-size: clamp(2rem, 2.4vw, 3.2rem); line-height: 1.05; text-wrap: balance; }
.pan__dit { color: #aeb7bb; }
.duo__image { border: 1px solid rgba(216,180,92,.24); box-shadow: 1rem 1rem 0 rgba(216,180,92,.07); }
@media (max-width: 700px) {
  .barre { width: calc(100% - 1rem); margin-top: .5rem; }
  .barre__nom { font-size: .9rem; }
  .barre .sceau { padding-inline: .8rem; }
  .titre { min-height: 100svh; padding-inline: 1.25rem; padding-bottom: 3rem; }
  .titre__fond { object-position: 62% center; }
  .titre::after { background: linear-gradient(0deg, rgba(5,8,12,.98) 4%, rgba(5,8,12,.56) 62%, rgba(5,8,12,.25) 100%); }
  .titre__blason { width: min(46vw, 210px); }
  .titre__accroche { max-width: 12ch; font-size: clamp(2.25rem, 11vw, 4rem); }
  .titre__dit { font-size: 1rem; }
  .titre__portes { display: grid; grid-template-columns: 1fr; }
  .titre__portes .sceau { justify-content: center; }
  .titre__preuve { gap: .8rem; justify-content: space-between; }
  .titre__preuve span { display: block; }
  .titre__preuve strong { display: block; margin-bottom: .2rem; }
  .titre__preuve small { display: block; max-width: 8ch; }
}

/* Passage 2026 : le hero doit convertir immédiatement, puis expliquer la boucle. */
.titre {
  min-height: 100svh;
  padding-top: clamp(6.5rem, 12vh, 8.5rem);
  padding-bottom: clamp(2.25rem, 5vh, 4rem);
}
.titre__dedans { max-width: 650px; }
.titre__blason { width: clamp(112px, 14vw, 190px); margin-bottom: .75rem; }
.titre__kicker { margin-bottom: .85rem; }
.titre__accroche {
  max-width: 620px;
  margin-bottom: .8rem;
  font-size: clamp(2.65rem, 4.35vw, 4.45rem);
  line-height: .96;
}
.titre__accroche span { display: block; }
.titre__dit { max-width: 46ch; line-height: 1.45; }
.titre__sans { margin-top: .75rem; font-size: .82rem; }
.titre__preuve { margin-top: 1.15rem; padding-top: .75rem; }
.boucle {
  padding: clamp(5rem, 10vw, 8rem) max(var(--gouttiere), 6vw);
  background: #0d1218;
  border-block: 1px solid rgba(216, 180, 92, .18);
}
.boucle__dedans {
  display: grid;
  grid-template-columns: minmax(260px, .82fr) minmax(0, 1.18fr);
  gap: clamp(3rem, 9vw, 9rem);
  width: min(var(--large), 100%);
  margin-inline: auto;
  align-items: start;
}
.boucle__intro { position: sticky; top: 7rem; }
.boucle__intro .pan__titre { max-width: 11ch; }
.boucle__intro .pan__dit { max-width: 40ch; }
.boucle__etapes { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: boucle; }
.boucle__etape {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 1.25rem;
  padding: 1.4rem 0 1.6rem;
  border-top: 1px solid rgba(158, 172, 185, .22);
}
.boucle__etape:last-child { border-bottom: 1px solid rgba(158, 172, 185, .22); }
.boucle__numero { color: var(--or-vif); font: .8rem/1 var(--serif-titre); letter-spacing: .12em; }
.boucle__etape h3 { margin: 0 0 .45rem; color: #ece4d3; font: 1.45rem/1.1 var(--serif-titre); }
.boucle__etape p { max-width: 44ch; margin: 0; color: #aeb7bb; line-height: 1.55; }
@media (max-width: 700px) {
  .titre { padding-top: 6.25rem; padding-bottom: 2.1rem; }
  .titre__blason { width: min(34vw, 150px); margin-bottom: .45rem; }
  .titre__kicker { margin-bottom: .65rem; font-size: .63rem; letter-spacing: .1em; }
  .titre__accroche { max-width: 15ch; font-size: clamp(2.15rem, 9.7vw, 3.2rem); }
  .titre__dit { font-size: .96rem; line-height: 1.38; }
  .titre__sans { font-size: .75rem; }
  .titre__preuve { margin-top: .85rem; }
  .boucle { padding-inline: 1.25rem; }
  .boucle__dedans { display: block; }
  .boucle__intro { position: static; margin-bottom: 2.25rem; }
  .boucle__intro .pan__titre { max-width: 15ch; }
  .boucle__etape { grid-template-columns: 2.5rem 1fr; gap: .8rem; padding-block: 1.2rem; }
  .boucle__etape h3 { font-size: 1.25rem; }
  .boucle__etape p { font-size: .92rem; }
}

/* Dernier réglage du hero : garder l'image lisible, sans voile noir massif. */
.titre__fond {
  filter: saturate(.98) contrast(1.03) brightness(1.14) !important;
}
.titre::after {
  background:
    linear-gradient(90deg, rgba(3, 7, 12, .10) 0%, rgba(3, 7, 12, .035) 42%, transparent 82%),
    linear-gradient(0deg, rgba(3, 7, 12, .10) 0%, rgba(3, 7, 12, .015) 62%, transparent 100%) !important;
}
@media (max-width: 700px) {
  .titre::after {
    background: linear-gradient(0deg, rgba(3, 7, 12, .16) 0%, rgba(3, 7, 12, .035) 70%, transparent 100%) !important;
  }
}

/* Lisibilité ciblée : le décor reste clair, seuls les éléments d'interface gagnent un écrin. */
.barre {
  background: rgba(6, 10, 15, .92) !important;
  border-color: rgba(216, 180, 92, .34);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, .42), 0 0 0 1px rgba(0, 0, 0, .3);
  backdrop-filter: blur(20px) saturate(1.12);
}
.barre__liens a { color: #d5d9d9; text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }
.barre__nom { color: #f0e6cf; text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }
.titre__dedans {
  position: relative;
  isolation: isolate;
  padding: 1rem 1.35rem 1.15rem;
  margin-left: -1.35rem;
  border-left: 2px solid rgba(216, 180, 92, .76);
  background: linear-gradient(90deg, rgba(4, 9, 15, .70) 0%, rgba(4, 9, 15, .48) 58%, rgba(4, 9, 15, .08) 100%);
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .22);
}
.titre__accroche { text-shadow: 0 3px 0 rgba(0, 0, 0, .32), 0 5px 18px rgba(0, 0, 0, .62); }
.titre__dit { color: #f0f1ed; text-shadow: 0 2px 8px rgba(0, 0, 0, .82); }
.titre__sans, .titre__preuve small { color: #e0e3df; text-shadow: 0 1px 5px rgba(0, 0, 0, .85); }
@media (max-width: 700px) {
  .titre__dedans { margin-left: 0; padding-inline: .9rem; border-left-width: 1px; }
  .barre { margin-top: .5rem; }
}

/* Composition finale : une colonne de lecture distincte du décor. */
.barre {
  min-height: 3.65rem;
  padding: .82rem 1.05rem;
  background: rgba(5, 9, 14, .96) !important;
  border-color: rgba(216, 180, 92, .42);
  box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, .5), inset 0 -1px rgba(255, 255, 255, .045);
}
.barre__liens { gap: clamp(1rem, 1.7vw, 1.7rem); }
.barre__liens a { font-size: .84rem; color: #e1e3df; }
.titre__dedans {
  max-width: 590px;
  padding: 1.25rem 1.55rem 1.35rem;
  margin-left: -1.55rem;
  background: linear-gradient(90deg, rgba(3, 8, 14, .90) 0%, rgba(3, 8, 14, .80) 68%, rgba(3, 8, 14, .28) 100%);
  box-shadow: 1.4rem 1.5rem 3rem rgba(0, 0, 0, .28);
}
.titre__kicker { color: #f0c968; }
.titre__accroche { max-width: 11ch; }
@media (max-width: 700px) {
  .barre { min-height: 3.25rem; padding: .68rem .75rem; }
  .titre__dedans {
    max-width: none;
    padding: 1rem .9rem 1.1rem;
    background: rgba(3, 8, 14, .78);
  }
}

/* Le premier écran ne porte qu'une promesse et une action. */
.titre__accroche { max-width: 14ch; }
.titre__dit { max-width: 34ch; }
.titre__portes .sceau { min-width: 16rem; }
@media (max-width: 700px) {
  .titre__accroche { max-width: 12ch; }
  .titre__dit { max-width: 30ch; }
  .titre__portes .sceau { min-width: 0; width: 100%; }
}

/* Le message que le jeu renvoie à l'accueil quand il ne peut pas ouvrir de partie (compte sans partie, compte inconnu). */
.message-du-jeu {
  position: fixed; z-index: 11; left: 50%; top: 5.6rem; transform: translateX(-50%);
  width: min(100% - 2rem, 40rem); margin: 0; padding: .85rem 1.1rem;
  background: rgba(8, 11, 16, .95); border: 1px solid rgba(216, 180, 92, .55);
  color: #f0e6cf; font-size: .95rem; line-height: 1.45;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, .5);
}
.message-du-jeu[hidden] { display: none; }