/* ═══════════════════════════════════════════════════════════
   PAGES INTÉRIEURES — quêtes, études de cas, parcours, contact.
   Réutilise les jetons et composants de style.css (couleurs, .section-tete,
   .arme, .quete-cadre…). N'ajoute ici que les mises en page propres aux
   nouvelles pages du site multi-pages.
   ═══════════════════════════════════════════════════════════ */

/* ─────────────── enveloppe commune ─────────────── */
.page {
  padding-top: clamp(6rem, 12vh, 9rem);
  padding-bottom: clamp(4rem, 10vh, 7rem);
}

.page-tete {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(1.2rem, 5vw, 4rem);
  text-align: center;
}
.page-fil {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .3em;
  font-size: clamp(.65rem, 1.1vw, .78rem);
  color: var(--fer-dim);
  margin-bottom: clamp(1rem, 3vh, 1.8rem);
}
.page-titre {
  font-family: var(--blackletter);
  font-weight: 400;
  line-height: .95;
  color: var(--fer);
  font-size: clamp(2.8rem, 8vw, 6rem);
  margin: 0;
}
.page-chapeau {
  font-family: var(--sans);
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: .04em;
  color: var(--or);
  font-size: clamp(1rem, 2vw, 1.35rem);
  margin: clamp(.8rem, 2vh, 1.2rem) 0 0;
}
.page-texte {
  font-family: var(--sans);
  font-weight: 300;
  color: var(--fer-dim);
  font-size: clamp(.95rem, 1.4vw, 1.1rem);
  line-height: 1.7;
  max-width: 60ch;
  margin: clamp(1rem, 2.5vh, 1.6rem) auto 0;
}
.page-ligne {
  display: block;
  width: 2px;
  height: clamp(2.5rem, 6vh, 4rem);
  margin: clamp(1.6rem, 4vh, 2.6rem) auto 0;
  background: linear-gradient(var(--or), transparent);
}

/* Bouton CV — « états de service » : reprend le bouton biseauté du site
   (.nav-missive) ; ici on ne règle que sa place sous le chapeau. */
.parcours-cv { margin-top: clamp(1.4rem, 3vh, 2rem); }

.page-retour {
  text-align: center;
  margin-top: clamp(3rem, 8vh, 5.5rem);
}
.page-retour a {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .78rem;
  color: var(--fer-dim);
  text-decoration: none;
  border-bottom: 1px solid var(--fer-faible);
  padding-bottom: .3rem;
  transition: color .3s, border-color .3s;
}
.page-retour a:hover { color: var(--or); border-color: var(--or); }

/* ═══════════════ LA TORCHE GLOBALE ═══════════════
   Un voile fixe, au-dessus du décor mais sous le contenu et le bandeau :
   un halo chaud suit le curseur sur toutes les pages (js/torche.js).
   Fondu « screen » = il n'ajoute que de la lumière, jamais d'ombre. */
#torche {
  position: fixed;
  inset: 0;
  z-index: 2;                 /* au-dessus de .filigrane/.grain, sous main (z1)… */
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(
    clamp(240px, 32vw, 520px) circle at var(--tx, -100px) var(--ty, -100px),
    rgb(var(--or-rgb) / .13),
    rgb(230 57 70 / .06) 42%,
    transparent 70%
  );
}
/* le contenu passe au-dessus du halo ; le bandeau, le lecteur et le héraut
   gardent leur propre position:fixed et leur z-index (ne pas les toucher) */
main, .crypte { position: relative; z-index: 3; }

/* En mode clair, « screen » n'éclaircit rien sur un fond déjà clair : on
   passe en « multiply » pour une lueur chaude qui teinte le vélin. */
html[data-theme="clair"] #torche {
  mix-blend-mode: multiply;
  background: radial-gradient(
    clamp(240px, 32vw, 520px) circle at var(--tx, -100px) var(--ty, -100px),
    rgb(255 176 40 / .11),
    rgb(230 57 70 / .05) 42%,
    transparent 70%
  );
}
@media (prefers-reduced-motion: reduce) { #torche { display: none; } }

/* ═══════════════ LE DONJON MONUMENTAL (hero de l'accueil) ═══════════════
   Le nom en plein écran, traversé par le portrait : le prénom (creux) passe
   derrière la niche, le nom (plein) par-dessus. Une torche suit le curseur,
   une estafilade d'épée ouvre la scène. Surclasse la grille de style.css. */
.donjon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 100vh;
  min-height: 100svh;
  /* le bas réserve la place de l'invite « explorer le donjon » :
     les boutons ne peuvent plus la chevaucher */
  padding: calc(var(--h-nav) + .8rem) clamp(1rem, 4vw, 3rem) 7rem;
}

/* l'estafilade : le coup d'épée de l'ouverture (animée par main.js) */
.estafilade {
  position: absolute;
  left: -5%;
  top: 46%;
  z-index: 4;
  width: 110%;
  height: 2px;
  transform-origin: left center;
  transform: rotate(-9deg) scaleX(0);
  background: linear-gradient(90deg, transparent, var(--fer) 30%, var(--or) 60%, transparent);
  box-shadow: 0 0 24px rgb(var(--or-rgb) / .8);
  pointer-events: none;
}

.donjon .donjon-sur { position: relative; z-index: 4; margin-bottom: 0; }

/* ── la scène : sandwich typographique ── */
.donjon-scene {
  --portrait: clamp(180px, 21vw, 300px);   /* largeur du portrait, partagée */
  --ecart: clamp(14px, 1.8vw, 30px);       /* respiration entre mots et photo */
  position: relative;
  z-index: 1;
  width: 100%;
  padding-block: clamp(1.4rem, 3.4vw, 2.8rem);
}
.donjon .donjon-titre {
  font-size: clamp(3.8rem, 10vw, 9.5rem);
  line-height: .82;
}
/* Alignement au cordeau : le prénom FINIT à --ecart du bord gauche de la
   photo, le nom COMMENCE à --ecart de son bord droit — mêmes écarts,
   calculés depuis le centre, quel que soit l'écran. */
.titre-ligne--creux {
  position: relative;
  z-index: 1;
  color: transparent;
  -webkit-text-stroke: 2px rgb(var(--fer-rgb) / .85);
  text-align: right;
  padding-right: calc(50% + var(--portrait) / 2 + var(--ecart));
}
.titre-ligne--plein {
  position: relative;
  z-index: 3;
  margin-top: -.06em;
  text-align: left;
  padding-left: calc(50% + var(--portrait) / 2 + var(--ecart));
  text-shadow: 0 12px 60px rgb(13 26 51 / .9);
}
.titre-ligne--plein .lettre:nth-child(4) { color: var(--sang); }

/* le portrait, pile au centre de la scène — centré par marges automatiques
   (PAS par transform : GSAP écrit ses propres transforms sur [data-intro]) */
.donjon-scene .donjon-portrait {
  position: absolute;
  inset: 0;
  margin: auto;
  z-index: 2;
  justify-self: unset;
  width: var(--portrait);
}
.donjon-scene .donjon-portrait:hover { transform: translateY(-6px); }

/* ── sous la scène ── */
.donjon .donjon-role {
  position: relative;
  z-index: 4;
  border-left: none;
  padding-left: 0;
  text-align: center;
  max-width: 52ch;
  margin: clamp(1.2rem, 3vh, 2rem) auto 0;
}

.donjon-actes {
  position: relative;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .9rem;
  margin-top: clamp(1.6rem, 4vh, 2.4rem);
}
.donjon-cta {
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  text-decoration: none;
  padding: .95em 1.9em;
  background: var(--or);
  color: var(--nuit-3);
  transition: background .25s, color .25s, transform .25s, box-shadow .25s;
}
.donjon-cta:hover { background: var(--fer); transform: translateY(-2px); }
.donjon-cta--creux {
  background: transparent;
  color: var(--fer);
  box-shadow: inset 0 0 0 1px var(--fer-faible);
}
.donjon-cta--creux:hover {
  background: transparent;
  color: var(--or);
  box-shadow: inset 0 0 0 1px var(--or);
}
/* « voir les quêtes » emprunte l'effet du bouton « porter doléance » (biseau,
   filet doré, reflet de lame) tout en gardant sa taille de héros. */
.donjon-cta.nav-missive {
  background: rgb(var(--nuit-rgb) / .25);
  color: var(--or);
}
.donjon-cta.nav-missive:hover {
  background: var(--or);
  color: var(--nuit-3);
  transform: none;
}

.donjon-descendre {
  position: absolute;
  left: 50%;
  bottom: clamp(.9rem, 2.5vh, 1.8rem);
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  color: var(--fer-faible);
  text-decoration: none;
  transition: color .3s;
}
.donjon-descendre:hover { color: var(--or); }
.descendre-mot {
  font-family: var(--sans);
  font-size: .64rem;
  letter-spacing: .32em;
  text-transform: uppercase;
}
.descendre-epee { width: 15px; height: 21px; animation: descendre 2.2s ease-in-out infinite; }
@keyframes descendre {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}
body[data-motion="reduced"] .descendre-epee { animation: none; }

/* la bannière rouge, légèrement de guingois : une étoffe, pas une barre */
.banniere { overflow: hidden; padding-block: .9rem; }
.banniere-parchemin { rotate: -1.3deg; scale: 1.03; }

@media (max-width: 720px) {
  .donjon { padding-bottom: 5.5rem; }
  .donjon .donjon-titre { font-size: clamp(3.6rem, 19vw, 8rem); }
  .donjon-scene { padding-block: clamp(3rem, 16vw, 6rem); }
  /* étroit : sandwich VERTICAL — le nom entier au-dessus, le portrait glissé
     dessous, le nom plein ne chevauche que le haut du cadre (par-devant). */
  .donjon-scene { display: flex; flex-direction: column; align-items: center; padding-block: 1.2rem 0; }
  .donjon-scene .donjon-portrait {
    position: relative;
    inset: auto;
    margin: -7vw auto 0;
    width: min(52vw, 250px);
  }
  .titre-ligne--creux { text-align: center; padding: 0; transform: none; }
  .titre-ligne--plein { text-align: center; padding: 0; transform: none; }
}

/* ─────────────── ACCUEIL : portails ─────────────── */
.portails-grille {
  display: grid;
  grid-template-columns: 1fr;              /* mobile : une colonne */
  gap: clamp(1rem, 2.5vw, 1.8rem);
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(1.2rem, 5vw, 4rem);
}
/* Deux puis quatre colonnes fixes : les 4 portails remplissent toujours la
   rangée. L'ancienne grille auto-fit passait à 5 colonnes en grand écran et
   laissait un emplacement vide à côté des 4 blocs. On ne saute pas par 3 :
   4 ne s'y répartit pas également (3 + 1 esseulé). */
@media (min-width: 600px)  { .portails-grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .portails-grille { grid-template-columns: repeat(4, 1fr); } }
.portail { text-decoration: none; perspective: 900px; }
.portail--large { grid-column: 1 / -1; }
.portail-cadre {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  height: 100%;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background: rgb(var(--nuit-3-rgb) / .5);
  border: 1px solid var(--fer-faible);
  position: relative;
  transform-style: preserve-3d;
  transition: border-color .4s, background .4s, transform .5s var(--ease-acier);
}
.portail:hover .portail-cadre {
  border-color: var(--or);
  background: var(--nuit-2);
}
.portail-icone { width: 46px; height: 46px; color: var(--fer); }
.portail:hover .portail-icone { color: var(--or); }
.portail-titre {
  font-family: var(--blackletter);
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  color: var(--fer);
  line-height: 1;
}
.portail-mot {
  font-family: var(--sans);
  font-weight: 300;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--fer-dim);
  flex: 1;
}
.portail-fleche {
  font-family: var(--sans);
  color: var(--or);
  font-size: 1.4rem;
  align-self: flex-end;
  transition: transform .4s var(--ease-acier);
}
.portail:hover .portail-fleche { transform: translateX(6px); }

/* ─────────────── QUÊTES : vedettes ─────────────── */
.vedettes, .rapides { margin-top: clamp(1rem, 3vh, 2rem); }
.vedettes-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(1.6rem, 4vw, 3rem);
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 clamp(1.2rem, 5vw, 4rem);
}
.vedette-lien {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  perspective: 900px;
}
.vedette-visuel {
  display: block;
  aspect-ratio: 400 / 260;
  overflow: hidden;
  transform-style: preserve-3d;
}
.vedette-defaut, .vedette-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vedette-corps {
  padding: clamp(1.2rem, 2.5vw, 1.8rem) clamp(.2rem, 1vw, .6rem) 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.vedette-type, .rapide-type {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .68rem;
  color: var(--or);
}
.vedette-nom {
  font-family: var(--blackletter);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1;
  color: var(--fer);
}
.vedette-pitch {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--fer-dim);
}
/* Le CTA reprend le bouton « Porter doléance » (.quete-cta : acier évidé,
   filet d'or, reflet de lame). Survoler toute la carte l'allume comme s'il
   était survolé lui-même — l'invite à cliquer porte sur la carte entière. */
.vedette-corps .quete-cta { align-self: flex-start; margin-top: .9rem; }
.vedette-lien:hover .quete-cta {
  color: var(--nuit-3);
  background: var(--or);
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px var(--or), 0 16px 34px -16px rgb(var(--or-rgb) / .75);
}
.vedette-lien:hover .quete-cta::before { opacity: 0; }
.vedette-lien:hover .quete-cta::after { left: 130%; }
.vedette-lien:hover .quete-cta-cire {
  background: radial-gradient(circle at 35% 32%, #f0525e, var(--sang) 60%, #a8232e);
}
.vedette-lien:hover .quete-cta-fleche { transform: translate(2px, -2px); }

/* ─────────────── QUÊTES : projets rapides ─────────────── */
.rapides-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: clamp(1.4rem, 3vw, 2.4rem);
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 clamp(1.2rem, 5vw, 4rem);
}
/* Chaque projet rapide est une carte entièrement cliquable (lien externe).
   Le survol la soulève, réveille le cadre doré et fait rougeoyer l'indice. */
.rapide {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  text-decoration: none;
  color: inherit;
  transition: transform .4s var(--ease-acier);
}
.rapide:hover { transform: translateY(-4px); }
.rapide:hover .quete-cadre {
  --equerre: 40px;
  --equerre-trait: 3px;
  transform: rotate(0deg) translateY(-2px);
  border-color: var(--or);
  outline-color: rgb(var(--or-rgb) / .4);
  outline-offset: 11px;
  box-shadow: 0 40px 70px -22px rgba(0, 0, 0, .72);
}
.rapide-visuel {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.rapide-defaut, .rapide-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rapide-nom {
  font-family: var(--blackletter);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  line-height: 1;
  color: var(--fer);
  transition: color .3s;
}
.rapide:hover .rapide-nom { color: var(--or); }
.rapide-recit {
  font-family: var(--sans);
  font-weight: 300;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--fer-dim);
}
.rapide-cta {
  /* poussé en bas de la carte : quelle que soit la longueur du récit, l'indice
     s'aligne d'une carte à l'autre (les cartes ont la même hauteur, cf. grille). */
  margin-top: auto;
  padding-top: .5rem;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: .45em;
  font-family: var(--sans);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .72rem;
  color: var(--sang);
  transition: color .3s, gap .3s;
}
.rapide:hover .rapide-cta { color: var(--or); gap: .75em; }

/* ─────────────── ÉTUDE DE CAS (Omniscius / MonCapy) ─────────────── */
.page-projet { max-width: 900px; margin: 0 auto; padding-left: clamp(1.2rem, 5vw, 4rem); padding-right: clamp(1.2rem, 5vw, 4rem); }
.fil-ariane {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .68rem;
  color: var(--fer-dim);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}
.fil-ariane a { color: var(--fer-dim); text-decoration: none; transition: color .3s; }
.fil-ariane a:hover { color: var(--or); }
.fil-actuel { color: var(--fer); }

/* Le fil d'Ariane respire sous le titre, et la 1re section ne rajoute pas un
   grand vide sous le trait (le trait « page-ligne » fait déjà la transition). */
.page-tete .fil-ariane { margin-bottom: clamp(.9rem, 2.5vh, 1.4rem); }
.page-tete + section > .section-tete { padding-top: clamp(1.6rem, 4vh, 3rem); }
@media (max-width: 720px) {
  .page-tete .fil-ariane { margin-bottom: 1.1rem; }   /* moins serré sous le titre */
  .page-tete + section { margin-top: 0; }
  .page-tete + section > .section-tete { padding-top: .6rem; }   /* moins de vide sous le trait */
}

.projet-tete { margin: clamp(1.6rem, 4vh, 2.6rem) 0 clamp(2rem, 5vh, 3.5rem); }
.projet-type {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .72rem;
  color: var(--or);
}
.projet-titre {
  font-family: var(--blackletter);
  font-weight: 400;
  font-size: clamp(3rem, 9vw, 6.5rem);
  line-height: .95;
  color: var(--fer);
  margin: .6rem 0 1rem;
}
.projet-baseline {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  line-height: 1.4;
  color: var(--fer);
  max-width: 40ch;
}
.projet-resume {
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(.95rem, 1.4vw, 1.1rem);
  line-height: 1.75;
  color: var(--fer-dim);
  max-width: 62ch;
  margin-top: 1rem;
}

.projet-histoire {
  display: grid;
  gap: clamp(1.6rem, 4vw, 2.6rem);
  margin-bottom: clamp(2.5rem, 6vh, 4.5rem);
}
@media (min-width: 760px) { .projet-histoire { grid-template-columns: repeat(3, 1fr); } }
.histoire-bloc { border-top: 2px solid var(--fer-faible); padding-top: 1.1rem; }
.histoire-titre {
  font-family: var(--sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .8rem;
  color: var(--or);
  margin-bottom: .7rem;
}
.histoire-bloc p {
  font-family: var(--sans);
  font-weight: 300;
  font-size: .95rem;
  line-height: 1.7;
  color: var(--fer-dim);
}

.projet-armes { margin-bottom: clamp(2.5rem, 6vh, 4.5rem); }
.projet-armes .section-titre { font-size: clamp(1.8rem, 4vw, 3rem); }
.armes-jetons {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  padding: 0;
  margin: clamp(1rem, 3vh, 1.8rem) 0 0;
}
.arme-jeton {
  font-family: var(--sans);
  font-weight: 500;
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--fer);
  border: 1px solid var(--fer-faible);
  padding: .5rem 1rem;
  background: rgb(var(--nuit-3-rgb) / .4);
}

.projet-galerie .section-titre { font-size: clamp(1.8rem, 4vw, 3rem); }
.galerie-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(1.2rem, 3vw, 2rem);
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
}
.galerie-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.galerie-defaut, .galerie-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galerie-piece figcaption {
  font-family: var(--sans);
  font-weight: 300;
  font-size: .82rem;
  color: var(--fer-dim);
  margin-top: .6rem;
}

/* ─────────────── PARCOURS : le chemin des bannières ───────────────
   Un sentier pointillé (carte de campagne) part d'un fer de lance et jalonne
   les étapes : à chaque halte, un sceau de cire aux initiales de la maison
   servie, et un gonfanon (bannière à queue d'aronde) pendu à sa tringle. */
.chroniques { max-width: 1040px; margin: 0 auto; padding: 0 clamp(1.2rem, 5vw, 4rem); }
.chroniques-fil {
  --fil: 100%;
  --bord: clamp(1.1rem, 4vw, 1.6rem);        /* place du sentier, à gauche en mobile */
  position: relative;
  margin-top: clamp(2rem, 5vh, 3.5rem);
  /* la marge droite loge les pommeaux de tringle (21px de débord) */
  padding: 1.4rem 1.5rem 0 calc(var(--bord) + clamp(1.6rem, 4vw, 2.6rem));
}
/* le sentier : pointillés de carte au trésor, dévoilés au fil de la lecture */
.chroniques-fil::before {
  content: "";
  position: absolute;
  left: var(--bord);
  top: 0;
  width: 2px;
  height: var(--fil, 100%);
  background: repeating-linear-gradient(
    to bottom,
    rgb(var(--or-rgb) / .75) 0 9px,
    transparent 9px 17px
  );
}
/* le fer de lance planté au départ du chemin */
.chroniques-fil::after {
  content: "";
  position: absolute;
  left: calc(var(--bord) + 1px);
  top: -16px;
  width: 14px;
  height: 19px;
  transform: translateX(-50%);
  background: var(--or);
  clip-path: polygon(50% 0, 100% 100%, 50% 74%, 0 100%);
}
.chronique {
  position: relative;
  padding: 0 0 clamp(2.6rem, 6vh, 4rem);
}
/* ── la légende des couleurs ── */
.chroniques-legende {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .8rem 2rem;
  padding: 0;
  margin: 0 auto clamp(1.2rem, 3vh, 2rem);
  font-family: var(--sans);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fer-dim);
}
.chroniques-legende li { display: flex; align-items: center; gap: .5rem; }
.chroniques-legende li::before {
  content: "";
  width: 13px;
  height: 13px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgb(var(--fer-rgb) / .25);
}
.chroniques-legende li[data-genre="travail"]::before    { background: var(--sang); }
.chroniques-legende li[data-genre="ecole"]::before      { background: var(--or); }
.chroniques-legende li[data-genre="alternance"]::before { background: linear-gradient(90deg, var(--sang) 0 50%, var(--or) 50% 100%); }

/* ── le point de cire sur le sentier : sa couleur dit la nature de l'étape.
     Rouge = travail, or = école, mi-parti rouge/or = alternance
     (data-genre posé par js/parcours.js d'après le champ « Nature »). ── */
.chronique-sceau {
  position: absolute;
  /* le sentier passe à -clamp(...) du bord de l'étape (le padding du fil) */
  left: calc(-1 * clamp(1.6rem, 4vw, 2.6rem) + 1px);
  top: .35rem;
  transform: translateX(-50%) rotate(-8deg);
  width: clamp(30px, 4.4vw, 38px);
  height: clamp(30px, 4.4vw, 38px);
  border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%;   /* cire coulée, jamais ronde */
  background: radial-gradient(circle at 34% 28%, #f0525e, var(--sang) 52%, #a22330 92%);
  box-shadow:
    inset 0 0 0 3px rgb(0 0 0 / .18),
    0 0 0 2px rgb(var(--fer-rgb) / .3),
    0 5px 12px rgb(0 0 0 / .4);
  z-index: 1;
}
.chronique[data-genre="ecole"] .chronique-sceau {
  background: radial-gradient(circle at 34% 28%, #ffd35c, var(--or) 52%, #b07d00 92%);
}
.chronique[data-genre="alternance"] .chronique-sceau {
  background:
    radial-gradient(circle at 34% 28%, rgb(255 255 255 / .3), transparent 55%),
    linear-gradient(90deg, var(--sang) 0 50%, var(--or) 50% 100%);
}
/* ── la bannière et sa tringle ── */
.chronique-banniere { position: relative; max-width: 580px; }
.chronique-tringle {
  position: absolute;
  top: -5px;
  left: -14px;
  right: -14px;
  height: 5px;
  background: linear-gradient(rgb(var(--fer-rgb) / .85), rgb(var(--fer-rgb) / .45));
  border-radius: 3px;
  z-index: 1;
}
.chronique-tringle::before,
.chronique-tringle::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 11px;
  height: 11px;
  transform: translateY(-50%) rotate(45deg);
  background: var(--or);
}
.chronique-tringle::before { left: -7px; }
.chronique-tringle::after  { right: -7px; }
/* ── le parchemin : vélin blanc cassé, encre de noix de galle.
     Il pend de la tringle et se termine par son rouleau (la « fin »). ── */
.chronique-gonfanon {
  position: relative;
  background:
    radial-gradient(120% 55% at 50% 0%, rgb(255 255 255 / .4), transparent 60%),
    var(--grain),
    linear-gradient(var(--parchemin), var(--parchemin-2));
  background-blend-mode: normal, overlay, normal;
  color: var(--encre);
  border: 1px solid rgb(0 0 0 / .25);
  padding: clamp(1.4rem, 3vw, 2.1rem) clamp(1.2rem, 3vw, 1.8rem)
           calc(clamp(1.4rem, 3vw, 2.1rem) + 8px);
  box-shadow: 0 12px 26px rgb(0 0 0 / .38);
  transition: box-shadow .35s;
}
.chronique:hover .chronique-gonfanon { box-shadow: 0 16px 32px rgb(0 0 0 / .5); }
/* le rouleau de fin : le bas du parchemin reste enroulé sur sa baguette */
.chronique-rouleau {
  position: absolute;
  left: -9px;
  right: -9px;
  bottom: -9px;
  height: 18px;
  border-radius: 9px;
  background: linear-gradient(#f6edd2, var(--parchemin) 38%, var(--parchemin-2) 72%, #a8935f);
  box-shadow: 0 5px 12px rgb(0 0 0 / .45), inset 0 -2px 3px rgb(0 0 0 / .28);
  z-index: 1;
}
.chronique-rouleau::before,
.chronique-rouleau::after {
  content: "";                                /* les tranches spiralées du rouleau */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 42%, var(--parchemin), var(--parchemin-2) 55%, #8f7c4e);
  box-shadow: inset 0 0 0 2px rgb(0 0 0 / .22);
}
.chronique-rouleau::before { left: -4px; }
.chronique-rouleau::after  { right: -4px; }
/* légère vie d'étoffe : chaque bannière penche à sa façon */
.chronique:nth-of-type(odd)  .chronique-banniere { rotate: -.5deg; }
.chronique:nth-of-type(even) .chronique-banniere { rotate: .55deg; }

.chronique-periode {
  display: inline-block;
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .7rem;
  font-weight: 600;
  color: var(--encre);
  border: 1px solid rgb(59 42 18 / .4);
  padding: .3em .8em;
  margin-bottom: .7rem;
}
.chronique-poste {
  font-family: var(--blackletter);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  line-height: 1.05;
  color: var(--encre);
  margin: .1rem 0 .45rem;
}
.chronique-maison {
  font-family: var(--sans);
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: .03em;
  color: var(--encre);
  margin-bottom: .15rem;
}
.chronique-maison::before { content: "⚑ "; color: var(--sang); }
.chronique-maison:empty { display: none; }
.chronique-lieu {
  font-family: var(--sans);
  font-weight: 400;
  font-size: .8rem;
  letter-spacing: .05em;
  color: rgb(59 42 18 / .72);
  margin-bottom: .6rem;
}
.chronique-lieu::before { content: "◆ "; color: rgb(59 42 18 / .5); font-size: .65em; vertical-align: 1px; }
.chronique-lieu:empty { display: none; }
.chronique-recit {
  font-family: var(--sans);
  font-weight: 300;
  font-size: .95rem;
  line-height: 1.7;
  color: rgb(59 42 18 / .82);
  max-width: 58ch;
}

/* ── large écran : le sentier au centre, les bannières en quinconce.
     Les côtés (data-cote) et les rangs (grid-row) sont posés par
     js/parcours.js après tri chronologique ; deux campagnes menées de
     front (une alternance : l'école ET l'entreprise) partagent le même
     rang, chacune de son côté du sentier. ── */
@media (min-width: 880px) {
  .chroniques-fil {
    --allee: clamp(5rem, 10vw, 7.5rem);      /* l'allée centrale, où passe le sentier */
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--allee);
    padding-left: 0;
    padding-right: 0;
  }
  .chroniques-fil::before { left: 50%; margin-left: -1px; }
  .chroniques-fil::after  { left: 50%; }
  .chronique { grid-column: 1 / -1; }        /* avant le passage de parcours.js */
  .chronique[data-cote="senestre"] { grid-column: 1; }
  .chronique[data-cote="dextre"]   { grid-column: 2; }
  .chronique-banniere { width: auto; max-width: none; }
  /* le sceau rejoint le sentier, au milieu de l'allée */
  .chronique[data-cote="senestre"] .chronique-sceau { left: calc(100% + var(--allee) / 2); }
  .chronique[data-cote="dextre"]   .chronique-sceau { left: calc(0px - var(--allee) / 2); }
  /* deux sceaux au même rang (alternance) : le second se pose un peu plus bas */
  .chronique[data-paire="2"] .chronique-sceau { top: 4.4rem; }
}

/* ─────────────── APPEL au contact (accueil + études de cas) ─────────────── */
.appel { padding: clamp(3rem, 8vh, 6rem) clamp(1.2rem, 5vw, 4rem); }
.appel-cadre {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  padding: clamp(2rem, 5vw, 3.5rem);
  border: 1px solid var(--fer-faible);
  background: rgb(var(--nuit-3-rgb) / .5);
}
.appel-titre {
  font-family: var(--blackletter);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1;
  color: var(--fer);
}
.appel-sous {
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(.95rem, 1.4vw, 1.1rem);
  line-height: 1.6;
  color: var(--fer-dim);
  max-width: 46ch;
  margin: 1rem auto clamp(1.6rem, 4vh, 2.4rem);
}
.appel-btn {
  position: relative;
  display: inline-block;
  font-family: var(--sans);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .85rem;
  color: var(--nuit);
  background: var(--or);
  padding: .95rem 2.2rem;
  text-decoration: none;
  transition: transform .3s var(--ease-acier), background .3s;
}
.appel-btn:hover { transform: translateY(-2px); background: var(--fer); }
.appel-alt {
  font-family: var(--sans);
  font-weight: 300;
  font-size: .85rem;
  color: var(--fer-dim);
  margin-top: 1.4rem;
}
.appel-alt a { color: var(--or); text-decoration: none; }
.appel-alt a:hover { text-decoration: underline; }

/* ─────────────── Recommandations : carrousel (accueil) ─────────────── */
/* La section réserve elle-même son air en bas : la piste, elle, ne porte plus
   le grand rembourrage hérité de .parchemins (il gonflait la fenêtre). */
.alliances { padding-bottom: clamp(3rem, 8vh, 6rem); }
.recos {
  display: flex;
  align-items: center;
  gap: clamp(.4rem, 1.5vw, 1rem);
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 3rem);
}
.recos-fenetre { flex: 1; overflow: hidden; }
.parchemins.recos-piste {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: clamp(1rem, 2.5vw, 2rem);
  max-width: none;                 /* la piste porte toutes les lettres, sans borne */
  padding: 0;                      /* pas de rembourrage : la fenêtre colle aux cartes */
  will-change: transform;
  transition: transform .55s var(--ease-acier);
}
@media (prefers-reduced-motion: reduce) {
  .parchemins.recos-piste { transition: none; }
}
.parchemins.recos-piste > .parchemin {
  flex: 0 0 clamp(260px, 40vw, 380px);
  margin: 0;
}
.recos-fleche {
  flex: 0 0 auto;
  width: clamp(38px, 5vw, 52px);
  height: clamp(38px, 5vw, 52px);
  border: 1px solid var(--fer-faible);
  background: rgb(var(--nuit-3-rgb) / .5);
  color: var(--fer);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .3s, color .3s, opacity .3s;
}
.recos-fleche:hover:not(:disabled) { border-color: var(--or); color: var(--or); }
.recos-fleche:disabled { opacity: .25; cursor: default; }
@media (max-width: 620px) {
  /* Version responsive : une seule lettre en plein écran, les flèches flottent
     sur les côtés par-dessus ses bords (position absolute, hors du flux). */
  .recos { position: relative; padding-left: 0; padding-right: 0; }
  .recos-fleche { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; }
  .recos-prec { left: .3rem; }
  .recos-suiv { right: .3rem; }
  .parchemins.recos-piste > .parchemin {
    flex: 0 0 100%;
    rotate: 0deg !important;       /* pleine largeur : pas d'inclinaison (bat le style inline posé par main.js) */
    padding-left: 3.3rem;          /* on dégage la place des flèches sur les côtés */
    padding-right: 3.3rem;
  }
}

/* La page contact réutilise .missive / .missive-cadre de style.css.
   On lui redonne simplement de l'air sous l'en-tête. */
.page-contact .missive { padding-top: clamp(1rem, 3vh, 2rem); }

@media (max-width: 620px) {
  .projet-histoire { grid-template-columns: 1fr; }
}

/* ═══════════════ LA CRYPTE (footer), version étoffée ═══════════════
   Trois colonnes — le blason, le plan du donjon, l'appel à l'alliance —
   posées sous un ornement d'épée. Surclasse la version simple de style.css. */
.crypte {
  display: block;
  border-top: none;
  padding: 0 clamp(1.2rem, 5vw, 4rem) 2.2rem;
}
.crypte-ornement {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: clamp(2rem, 5vh, 3rem) 0 clamp(2rem, 4vh, 2.8rem);
}
.crypte-filet { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--fer-faible)); }
.crypte-filet:last-child { background: linear-gradient(90deg, var(--fer-faible), transparent); }
.crypte-epee { width: 58px; height: 23px; flex-shrink: 0; color: rgb(var(--or-rgb) / .75); }

/* Sur PC : trois colonnes — le blason (sceau + devise + lieu), le plan du
   fief, l'appel à l'alliance. Le mobile les simplifie plus bas. */
.crypte-haut {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  max-width: 1200px;
  margin: 0 auto;
}
/* le sceau du pied de page : le logo, blanc la nuit, bleu marine en plein
   jour — un <img> par heure, l'autre masqué (voir js/pied.js). */
.crypte-sceau { display: inline-flex; align-items: center; }
.crypte-sceau-logo { display: none; height: 2.6rem; width: auto; }
.crypte-sceau-logo--nuit { display: block; }
html[data-theme="clair"] .crypte-sceau-logo--nuit  { display: none; }
html[data-theme="clair"] .crypte-sceau-logo--clair { display: block; }
.crypte .crypte-devise {
  font-family: var(--blackletter);
  font-size: 1.08rem;
  color: var(--fer-dim);
  margin: .7rem 0 0;
  max-width: 30ch;
}
.crypte-lieu {
  margin-top: .9rem;
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .08em;
  color: var(--fer-faible);
}
.crypte-titre {
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .24em;
  color: rgb(var(--or-rgb) / .85);
  margin-bottom: 1rem;
}
.crypte-liens {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .5rem;
}
.crypte-liens a {
  color: var(--fer-dim);
  text-decoration: none;
  font-family: var(--sans);
  font-size: .9rem;
  text-transform: capitalize;
  transition: color .25s, padding-left .25s;
}
.crypte-liens a:hover { color: var(--or); padding-left: .4rem; }
.crypte-mot {
  font-family: var(--sans);
  font-weight: 300;
  font-size: .88rem;
  line-height: 1.6;
  color: var(--fer-dim);
  max-width: 30ch;
  margin-bottom: 1.1rem;
}
/* le bouton « porter doléance » du pied reprend exactement l'effet de l'en-tête
   (voir .nav-missive dans css/style.css) : il porte les deux classes. */
.crypte-mail {
  display: block;
  margin-top: 1rem;
  font-family: var(--sans);
  font-size: .86rem;
  color: var(--fer-dim);
  text-decoration: underline;
  text-decoration-color: var(--fer-faible);
  text-underline-offset: 4px;
  transition: color .25s;
}
.crypte-mail:hover { color: var(--or); }

/* Lien CV du pied de page : petit bouton contour, présent sur toutes les pages */
/* Les deux boutons utilitaires de la barre du bas (CV + cookies) : même
   gabarit, en version remplie (fond --nuit sur le fond de crypte --nuit-3). */
.crypte-bas-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
}

.crypte-bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .7rem 2rem;
  max-width: 1200px;
  margin: clamp(2rem, 5vh, 3rem) auto 0;
  padding-top: 1.4rem;
  border-top: 1px solid rgb(var(--fer-rgb) / .08);
}
.crypte .crypte-credit { flex-basis: auto; margin: 0; }
.crypte-cookies,
.crypte-cv {
  font: inherit;
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fer-dim);
  background: var(--nuit);                      /* rempli */
  border: 1px solid rgb(var(--fer-rgb) / .16);
  padding: .55em 1.1em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color .25s, background .25s, border-color .25s;
}
.crypte-cookies:hover,
.crypte-cookies:focus-visible,
.crypte-cv:hover,
.crypte-cv:focus-visible { color: var(--or); border-color: var(--or); background: var(--nuit-2); }

/* Deux enluminures qui referment la crypte : l'une à gauche, l'autre à droite.
   Purement décoratives (aria-hidden), séparées du texte par un large blanc.
   Elles débordent le rembourrage de la crypte pour coller aux vrais bords de
   l'écran, et descendent jusqu'au bas ; leur taille se règle par la HAUTEUR. */
.crypte-images {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin: clamp(3rem, 8vh, 6rem)
          calc(-1 * clamp(1.2rem, 5vw, 4rem))
          -2.2rem;                       /* annule le padding latéral + bas de la crypte */
}
.crypte-image {
  width: auto;                           /* réglées par la hauteur, jamais par la largeur */
  height: clamp(190px, 26vh, 380px);
  opacity: .92;
}

/* ── Sur mobile seulement, le footer se simplifie : une colonne centrée, sans
   le sceau « ld » ni la colonne « Sceller une alliance », liens sur une ligne.
   Le PC garde ses trois colonnes. ── */
@media (max-width: 820px) {
  .crypte-ornement { padding: clamp(1.3rem, 4vh, 2rem) 0 clamp(1.1rem, 3vh, 1.6rem); }

  .crypte-haut { grid-template-columns: 1fr; gap: clamp(1.4rem, 4vw, 2rem); text-align: center; }
  .crypte-sceau { display: none; }              /* on retire le « ld » */
  .crypte-col--alliance { display: none; }      /* on retire l'appel à l'alliance */
  .crypte .crypte-devise {
    font-family: var(--blackletter);
    font-size: clamp(1.1rem, 4.6vw, 1.5rem);
    max-width: none;                            /* la devise court sur toute la largeur */
    margin: 0 auto;
  }
  .crypte-liens {                               /* le plan du fief passe en ligne */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem 1.2rem;
  }
  .crypte-bas { flex-direction: column; align-items: center; text-align: center; margin-top: 1.4rem; gap: .5rem; }
  /* les deux enluminures sont masquées sur téléphone : trop encombrantes */
  .crypte-images { display: none; }
}

/* ═══════════════ LE HÉRAUT DES COOKIES ═══════════════
   Un petit parchemin déroulé au coin de l'écran (js/cookies.js). */
#heraut {
  position: fixed;
  left: clamp(.8rem, 2vw, 1.6rem);
  bottom: clamp(.8rem, 2vw, 1.6rem);
  z-index: 90;
  width: min(400px, calc(100vw - 2 * clamp(.8rem, 2vw, 1.6rem)));
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s, transform .45s var(--ease-acier);
}
#heraut[data-visible="1"] { opacity: 1; transform: none; }
.heraut-rouleau {
  position: relative;
  background:
    radial-gradient(120% 50% at 50% 0%, rgb(255 255 255 / .4), transparent 60%),
    linear-gradient(var(--parchemin), var(--parchemin-2));
  color: var(--encre);
  border: 1px solid rgb(0 0 0 / .28);
  padding: 1.15rem 1.25rem 1.25rem;
  box-shadow: 0 16px 38px rgb(0 0 0 / .5);
}
/* les baguettes enroulées, en haut et en bas du rouleau */
.heraut-rouleau::before,
.heraut-rouleau::after {
  content: "";
  position: absolute;
  left: -7px;
  right: -7px;
  height: 13px;
  border-radius: 7px;
  background: linear-gradient(#f6edd2, var(--parchemin) 40%, var(--parchemin-2) 75%, #a8935f);
  box-shadow: 0 3px 8px rgb(0 0 0 / .4);
}
.heraut-rouleau::before { top: -7px; }
.heraut-rouleau::after  { bottom: -7px; }
.heraut-titre {
  font-family: var(--blackletter);
  font-size: 1.45rem;
  line-height: 1;
  margin: 0 0 .5rem;
}
.heraut-mot {
  font-family: var(--sans);
  font-size: .8rem;
  line-height: 1.6;
  color: rgb(59 42 18 / .85);
  margin: 0 0 .95rem;
}
.heraut-choix { display: flex; flex-wrap: wrap; gap: .55rem; }
.heraut-btn {
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .05em;
  padding: .7em 1.15em;
  cursor: pointer;
  transition: transform .2s, background .25s, color .25s, border-color .25s;
}
.heraut-btn:active { transform: translateY(1px); }
.heraut-btn--pacte {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  background: var(--sang);
  color: #fff;
  border: none;
}
.heraut-btn--pacte:hover { background: #c22835; }
.heraut-cire {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffd35c, var(--or) 60%, #b07d00);
  flex-shrink: 0;
}
.heraut-btn--refus {
  background: transparent;
  border: 1px solid rgb(59 42 18 / .45);
  color: var(--encre);
}
.heraut-btn--refus:hover { border-color: var(--encre); background: rgb(59 42 18 / .07); }

/* sous 900px le lecteur de musique occupe le bas de l'écran : le héraut
   se pose au-dessus de lui plutôt que dessous */
@media (max-width: 900px) {
  #heraut { bottom: calc(clamp(.8rem, 2vw, 1.6rem) + 92px); }
}

@media (prefers-reduced-motion: reduce) {
  #heraut { transition: opacity .3s; transform: none; }
}

/* ═══════════════════════════════════════════════════════════
   OMNISCIUS — la vitrine du jeu de 54 cartes.
   Cartes en vélin, éventail héraldique, univers de la gamme.
   S'appuie sur les jetons de style.css. Chargée partout (head non
   échangé par la navigation) — d'où sa place dans pages.css.
   ═══════════════════════════════════════════════════════════ */

.page-omni { padding-bottom: clamp(4rem, 10vh, 7rem); overflow: hidden; }

/* enveloppe commune des sections */
.page-omni > .fil-ariane,
.omni-chiffres, .omni-pacte, .omni-jeu, .omni-univers, .omni-galerie,
.omni-france, .omni-presse, .omni-role,
.page-omni > .appel, .page-omni > .page-retour {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(1.2rem, 5vw, 4rem);
}
.omni-jeu, .omni-univers, .omni-galerie, .omni-france,
.omni-presse, .omni-role { padding-block: clamp(3rem, 8vh, 5.5rem); }

/* titraille partagée */
.omni-kicker {
  margin: 0 0 .9rem;
  font-family: var(--sans);
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--sang);
}
.omni-h2 {
  font-family: var(--blackletter);
  font-weight: 400;
  line-height: .92;
  color: var(--fer);
  font-size: clamp(2.1rem, 5.2vw, 4rem);
  margin: 0;
}
.omni-sous { margin: 1rem 0 0; max-width: 48ch; color: var(--fer-dim); font-size: clamp(.95rem, 1.2vw, 1.08rem); }
.omni-corps { margin: 1.2rem 0 0; max-width: 56ch; color: var(--fer-dim); font-size: clamp(.98rem, 1.3vw, 1.12rem); line-height: 1.85; }
.omni-tete { margin-bottom: clamp(2rem, 5vh, 3.4rem); }

/* ─────────────── une CARTE en vélin ─────────────── */
.omni-carte {
  --w: clamp(96px, 12vw, 150px);
  width: var(--w);
  aspect-ratio: 5 / 7;
  border-radius: calc(var(--w) * .07);
  background:
    radial-gradient(120% 120% at 30% 12%, rgba(255,255,255,.35), transparent 55%),
    var(--parchemin);
  box-shadow:
    0 22px 44px -16px rgba(0,0,0,.7),
    inset 0 0 0 1px rgba(59,42,18,.5),
    inset 0 0 0 4px var(--parchemin),
    inset 0 0 0 5px rgba(59,42,18,.28);
  color: var(--encre);
  position: relative;
  display: grid;
  place-items: center;
  font-family: var(--blackletter);
  user-select: none;
}
.omni-carte[data-enseigne="coeur"],
.omni-carte[data-enseigne="carreau"] { color: var(--sang); }
.omni-carte[data-enseigne="joker"] { color: #a97b12; }
.omni-carte-pip { font-size: calc(var(--w) * .5); line-height: 1; }
.omni-carte-coin {
  position: absolute;
  top: calc(var(--w) * .08); left: calc(var(--w) * .09);
  font-size: calc(var(--w) * .17);
  line-height: .82;
  text-align: center;
  font-family: var(--sans);
  font-weight: 700;
}
.omni-carte-coin i { display: block; font-style: normal; font-size: calc(var(--w) * .16); }
.omni-carte-coin--bas { top: auto; left: auto; bottom: calc(var(--w) * .08); right: calc(var(--w) * .09); rotate: 180deg; }

/* la carte Joker : liseré doré, petit fou brodé */
.omni-carte--joker {
  box-shadow:
    0 26px 50px -14px rgba(0,0,0,.75),
    inset 0 0 0 1px rgba(169,123,18,.7),
    inset 0 0 0 4px var(--parchemin),
    inset 0 0 0 5px rgba(169,123,18,.5);
}
.omni-joker { display: grid; place-items: center; gap: .3rem; color: #a97b12; }
.omni-joker svg { width: calc(var(--w) * .5); height: auto; fill: currentColor; stroke: currentColor; stroke-width: 0; }
.omni-joker svg path[fill="none"] { fill: none; }
.omni-joker b { font-family: var(--blackletter); font-weight: 400; font-size: calc(var(--w) * .17); letter-spacing: .04em; }

/* le dos de carte (motif) */
.omni-carte--dos {
  background:
    repeating-linear-gradient(45deg, rgb(var(--or-rgb) / .16) 0 6px, transparent 6px 12px),
    repeating-linear-gradient(-45deg, rgb(var(--or-rgb) / .16) 0 6px, transparent 6px 12px),
    var(--nuit-2);
  color: var(--or);
}
.omni-carte--dos .omni-dos-motif {
  width: 58%; aspect-ratio: 1; border: 2px solid rgb(var(--or-rgb) / .6);
  border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--or-rgb) / .5) 0 18%, transparent 20%);
  box-shadow: inset 0 0 0 6px rgb(var(--nuit-3-rgb) / .5);
}
/* Une photo posée sur la carte du pacte : elle occupe toute la carte, sans le
   fond en damier qui débordait en cadre (contour) autour d'elle. */
.omni-carte--dos:has(.omni-carte-toile.a-photo) { background: var(--nuit-2); }
.omni-carte--dos .omni-carte-toile.a-photo {
  inset: 0;
  border-radius: calc(var(--w) * .07);
}

/* ─────────────── HÉROS ─────────────── */
.omni-hero {
  max-width: 1180px;
  margin: clamp(1rem, 3vh, 2rem) auto 0;
  padding: clamp(1rem, 3vh, 2rem) clamp(1.2rem, 5vw, 4rem) clamp(2rem, 5vh, 3.5rem);
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}
.omni-surtitre {
  margin: 0 0 1rem;
  font-family: var(--sans); font-weight: 700; font-size: clamp(.66rem, 1.1vw, .8rem);
  letter-spacing: .28em; text-transform: uppercase; color: var(--or);
}
.omni-titre {
  font-family: var(--blackletter); font-weight: 400; line-height: .86;
  color: var(--fer); margin: 0;
  font-size: clamp(3.4rem, 11vw, 8rem);
  text-shadow: 0 14px 60px rgb(13 26 51 / .8);
}
.omni-baseline { margin: 1.2rem 0 0; max-width: 40ch; color: var(--fer); font-size: clamp(1.05rem, 1.7vw, 1.35rem); font-weight: 300; line-height: 1.5; }
.omni-resume { margin: 1rem 0 0; max-width: 48ch; color: var(--fer-dim); font-size: clamp(.92rem, 1.2vw, 1.02rem); line-height: 1.75; }
.omni-actes { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: clamp(1.6rem, 4vh, 2.4rem); }
.omni-cta {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--sans); font-size: .82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; text-decoration: none;
  padding: .95em 1.8em; background: var(--or); color: var(--nuit-3);
  transition: background .25s, color .25s, transform .25s, box-shadow .25s;
}
.omni-cta:hover { background: var(--fer); transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(0,0,0,.6); }
.omni-cta-fleche { font-size: 1.1em; }
.omni-cta--creux { background: transparent; color: var(--fer); box-shadow: inset 0 0 0 1px var(--fer-faible); }
.omni-cta--creux:hover { background: transparent; color: var(--or); box-shadow: inset 0 0 0 1px var(--or); }

/* l'éventail */
.omni-eventail {
  position: relative;
  height: clamp(300px, 42vh, 480px);
  justify-self: center;
  width: 100%;
}
.omni-eventail .omni-carte {
  --w: clamp(120px, 15vw, 190px);
  position: absolute;
  left: 50%; bottom: 6%;
  margin-left: calc(var(--w) / -2);
  transform-origin: bottom center;
  transition: transform .5s var(--ease-acier);
}
.omni-eventail .omni-carte:nth-child(1) { transform: rotate(-24deg) translateY(10px); z-index: 1; }
.omni-eventail .omni-carte:nth-child(2) { transform: rotate(-12deg) translateY(-6px); z-index: 2; }
.omni-eventail .omni-carte:nth-child(3) { transform: rotate(0deg)   translateY(-22px); z-index: 3; }
.omni-eventail .omni-carte:nth-child(4) { transform: rotate(12deg)  translateY(-6px); z-index: 2; }
.omni-eventail .omni-carte:nth-child(5) { transform: rotate(24deg)  translateY(10px); z-index: 1; }
.omni-eventail:hover .omni-carte:nth-child(1) { transform: rotate(-30deg) translateY(2px); }
.omni-eventail:hover .omni-carte:nth-child(2) { transform: rotate(-15deg) translateY(-12px); }
.omni-eventail:hover .omni-carte:nth-child(3) { transform: rotate(0deg)   translateY(-34px); }
.omni-eventail:hover .omni-carte:nth-child(4) { transform: rotate(15deg)  translateY(-12px); }
.omni-eventail:hover .omni-carte:nth-child(5) { transform: rotate(30deg)  translateY(2px); }

/* cartes en photo (images du vrai jeu, posées depuis le back-office) */
.omni-carte--photo { overflow: hidden; }
.omni-carte-toile {
  position: absolute; inset: calc(var(--w) * .055);
  border-radius: calc(var(--w) * .04);
  overflow: hidden;
}
.omni-carte-toile.a-photo { background: var(--nuit-2); }   /* fond seulement sous une image */
.omni-carte-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ─────────────── CHIFFRES ─────────────── */
.omni-chiffres {
  list-style: none; margin: clamp(1rem,3vh,2rem) auto; padding-block: clamp(1.6rem, 4vh, 2.4rem);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem 1.5rem;
  border-top: 1px solid var(--fer-faible); border-bottom: 1px solid var(--fer-faible);
  text-align: center;
}
.omni-chiffres li { display: flex; flex-direction: column; gap: .3rem; }
.omni-chiffres b { font-family: var(--blackletter); font-weight: 400; font-size: clamp(2rem, 4.5vw, 3.4rem); line-height: 1; color: var(--or); }
.omni-chiffres b i { font-style: normal; font-size: .55em; }
.omni-chiffres span { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--fer-faible); }

/* ─────────────── LE PACTE ─────────────── */
.omni-pacte {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
}
.omni-pacte-carte { display: grid; place-items: center; }
.omni-pacte-carte .omni-carte { --w: clamp(150px, 20vw, 220px); rotate: -5deg; transition: rotate .5s var(--ease-acier); }
.omni-pacte:hover .omni-carte--dos { rotate: 4deg; }

/* ─────────────── LES ENSEIGNES ─────────────── */
.omni-enseignes {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(.8rem, 2vw, 1.6rem);
}
.omni-enseigne {
  border: 1px solid var(--fer-faible);
  background: rgb(var(--nuit-rgb) / .18);
  padding: clamp(1.2rem, 2.5vw, 2rem) clamp(.8rem, 1.5vw, 1.2rem);
  text-align: center;
  transition: transform .4s var(--ease-acier), border-color .4s, background .4s;
}
.omni-enseigne:hover { transform: translateY(-6px); border-color: var(--or); background: var(--nuit-2); }
.omni-enseigne-pip { font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1; color: var(--fer); display: block; }
.omni-enseigne[data-enseigne="coeur"] .omni-enseigne-pip,
.omni-enseigne[data-enseigne="carreau"] .omni-enseigne-pip { color: var(--sang); }
.omni-enseigne[data-enseigne="joker"] .omni-enseigne-pip { color: var(--or); }
.omni-enseigne h3 { font-family: var(--blackletter); font-weight: 400; font-size: clamp(1.1rem, 1.7vw, 1.5rem); margin: .7rem 0 .3rem; color: var(--fer); }
.omni-enseigne p { margin: 0; font-size: .8rem; line-height: 1.55; color: var(--fer-dim); }
.omni-enseigne--joker { border-color: rgb(var(--or-rgb) / .4); background: rgb(var(--or-rgb) / .05); }
/* icône personnalisée (image posée depuis le back-office) : elle éclipse le symbole */
.omni-enseigne-icone { display: none; }
.omni-enseigne-icone.a-photo { display: block; }
.omni-enseigne-img {
  display: block; margin: 0 auto;
  width: clamp(2.2rem, 4.5vw, 3.2rem); height: clamp(2.2rem, 4.5vw, 3.2rem);
  object-fit: contain;
}
.omni-enseigne:has(.omni-enseigne-icone.a-photo) .omni-enseigne-pip { display: none; }

/* ─────────────── L'UNIVERS (produits) ─────────────── */
.omni-produits { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2.5vw, 2rem); }
.omni-produit {
  position: relative;
  border: 1px solid var(--fer-faible);
  background: linear-gradient(180deg, var(--nuit-2), rgb(var(--nuit-rgb) / .2));
  padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1.1rem, 2vw, 1.6rem) clamp(1.6rem, 3vw, 2.2rem);
  transition: transform .45s var(--ease-acier), border-color .45s, box-shadow .45s;
}
.omni-produit:hover { transform: translateY(-8px) rotate(-1deg); border-color: var(--or); box-shadow: 0 24px 46px -22px rgba(0,0,0,.75); }
.omni-produit-icone { display: block; width: clamp(44px, 6vw, 60px); margin-bottom: 1.1rem; color: var(--or); }
.omni-produit-icone svg { width: 100%; height: auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.omni-produit h3 { font-family: var(--blackletter); font-weight: 400; font-size: clamp(1.2rem, 1.8vw, 1.6rem); margin: 0 0 .5rem; color: var(--fer); }
.omni-produit p { margin: 0; font-size: .86rem; line-height: 1.6; color: var(--fer-dim); }

/* ─────────────── FORGÉ EN FRANCE ─────────────── */
.omni-france {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
  border-top: 1px solid var(--fer-faible);
}
.omni-france-blason { color: var(--or); justify-self: center; }
.omni-hexagone { width: clamp(140px, 20vw, 220px); height: auto; }
.omni-hexagone .omni-fdl { fill: currentColor; stroke: none; opacity: .9; }
.omni-fabricants {
  list-style: none; margin: clamp(1.6rem, 4vh, 2.4rem) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 1rem 2.4rem;
}
.omni-fabricants li { display: flex; flex-direction: column; gap: .2rem; border-left: 2px solid var(--or); padding-left: .9rem; }
.omni-fabricants b { font-family: var(--sans); font-weight: 600; font-size: .95rem; color: var(--fer); }
.omni-fabricants span { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fer-faible); }

/* ─────────────── PRESSE ─────────────── */
.omni-presse { text-align: center; border-top: 1px solid var(--fer-faible); }
.omni-medias { display: flex; align-items: center; justify-content: center; gap: clamp(.8rem, 3vw, 1.6rem); margin-top: 1.2rem; flex-wrap: wrap; }
.omni-media { font-family: var(--blackletter); font-weight: 400; font-size: clamp(1.3rem, 2.6vw, 2rem); color: var(--fer-dim); transition: color .3s; text-decoration: none; }
.omni-media:hover { color: var(--or); }
/* le fleuron ✦ entre deux médias, sans élément dédié : survit à l'hydratation */
.omni-media + .omni-media::before {
  content: "\2726"; color: var(--or); font-size: 1rem; vertical-align: middle;
  margin-right: clamp(.8rem, 3vw, 1.6rem);
}

/* ─────────────── MON RÔLE ─────────────── */
.omni-role-grille { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.4rem, 4vw, 3rem); }
.omni-role-bloc { border-top: 2px solid var(--fer-faible); padding-top: 1.1rem; }
.omni-role-bloc h3 { font-family: var(--sans); font-weight: 700; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--or); margin: 0 0 .8rem; }
.omni-role-bloc p { margin: 0; color: var(--fer-dim); line-height: 1.8; font-size: clamp(.95rem, 1.2vw, 1.05rem); }
.omni-role .armes-jetons { margin-top: clamp(1.8rem, 4vh, 2.6rem); }

/* ─────────────── GALERIE : les photos du jeu ───────────────
   Grille souple : une seule image occupe le bandeau, plusieurs se rangent
   côte à côte. Cadre doré, patine, léger zoom au survol. */
.omni-galerie { border-top: 1px solid var(--fer-faible); }
.omni-galerie .omni-tete { text-align: center; }
.omni-galerie .omni-tete .omni-sous { margin-inline: auto; }
.omni-galerie-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
}
/* jusqu'à trois photos, la première s'étale pour ne jamais paraître seule */
.omni-galerie-grille:has(.omni-photo:nth-child(2):last-child) { grid-template-columns: 1fr 1fr; }
.omni-photo { margin: 0; display: flex; flex-direction: column; gap: .7rem; }
.omni-photo-cadre {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
  border: 1px solid rgb(var(--or-rgb) / .35);
  background: var(--nuit-2);
  box-shadow: 0 24px 46px -24px rgba(0,0,0,.75), inset 0 0 0 4px rgb(var(--nuit-3-rgb) / .5);
}
.omni-photo-cadre::after {                 /* fine lueur dorée en surcadre */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgb(var(--or-rgb) / .18);
}
.omni-photo-img, .omni-photo-defaut {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .7s var(--ease-acier);
}
.omni-photo:hover .omni-photo-img { transform: scale(1.05); }
.omni-photo figcaption {
  font-family: var(--sans); font-size: .74rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fer-faible); text-align: center;
}

/* ─────────────── RESPONSIVE ─────────────── */
@media (max-width: 900px) {
  .omni-hero { grid-template-columns: 1fr; }
  .omni-eventail { order: -1; height: clamp(240px, 38vh, 340px); }
  .omni-pacte, .omni-france { grid-template-columns: 1fr; }
  .omni-pacte-carte, .omni-france-blason { justify-self: start; }
  .omni-produits { grid-template-columns: repeat(2, 1fr); }
  .omni-enseignes { grid-template-columns: repeat(3, 1fr); }
  .omni-enseigne--joker { grid-column: span 3; }
}
@media (max-width: 560px) {
  .omni-chiffres { grid-template-columns: repeat(2, 1fr); gap: 1.4rem 1rem; }
  .omni-produits { grid-template-columns: 1fr; }
  .omni-enseignes { grid-template-columns: repeat(2, 1fr); }
  .omni-enseigne--joker { grid-column: span 2; }
  .omni-role-grille { grid-template-columns: 1fr; gap: 1.6rem; }
}

/* mouvement réduit : rien ne surgit, mais l'éventail garde sa forme (CSS) */
body[data-motion="reduced"] [data-omni-fade] { opacity: 1 !important; transform: none !important; }
body[data-motion="reduced"] .omni-hero .omni-carte { opacity: 1 !important; }

/* ═══════════════════════════════════════════════════════════
   MONCAPY — l'échoppe d'affiches.
   Le séchoir de l'imprimeur : les tirages pendent à la corde, tenus
   par des pinces de bois. Bleu ciel et brun capybara en accents,
   empruntés à la marque ; le donjon garde ses fonds.
   ═══════════════════════════════════════════════════════════ */

.page-capy {
  --capy-ciel: #96c3ed;             /* bleu ciel MonCapy */
  --capy-brun: #67220b;             /* brun capybara */
  --capy-bois: #8a5a34;             /* corde et pinces */
  --capy-vert: #6bbf59;             /* le serment vert */
  --capy-accent: var(--capy-ciel);
  padding-bottom: clamp(4rem, 10vh, 7rem);
  overflow: hidden;
}
/* sur le vélin, les tons clairs ne se lisent pas : on les trempe dans l'encre */
html[data-theme="clair"] .page-capy { --capy-accent: #17527f; --capy-vert: #2f6a24; }

/* enveloppe commune des sections */
.page-capy > .fil-ariane,
.capy-registre, .capy-kap, .capy-serment, .capy-galerie, .capy-comptoir,
.page-capy > .appel, .page-capy > .page-retour {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(1.2rem, 5vw, 4rem);
}
.capy-registre, .capy-kap, .capy-serment, .capy-galerie, .capy-comptoir { padding-block: clamp(3rem, 8vh, 5.5rem); }

/* titraille partagée */
.capy-kicker {
  margin: 0 0 .9rem;
  font-family: var(--sans);
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--capy-accent);
}
.capy-kicker--vert { color: var(--capy-vert); }
.capy-h2 {
  font-family: var(--blackletter);
  font-weight: 400;
  line-height: .92;
  color: var(--fer);
  font-size: clamp(2.1rem, 5.2vw, 4rem);
  margin: 0;
}
.capy-sous { margin: 1rem 0 0; max-width: 48ch; color: var(--fer-dim); font-size: clamp(.95rem, 1.2vw, 1.08rem); }
.capy-corps { margin: 1.2rem 0 0; max-width: 56ch; color: var(--fer-dim); font-size: clamp(.98rem, 1.3vw, 1.12rem); line-height: 1.85; }
.capy-tete { margin-bottom: clamp(2rem, 5vh, 3.4rem); }

/* ─────────────── HÉROS : texte et séchoir ─────────────── */
.capy-hero {
  max-width: 1180px;
  margin: clamp(1rem, 3vh, 2rem) auto 0;
  padding: clamp(1rem, 3vh, 2rem) clamp(1.2rem, 5vw, 4rem) clamp(2rem, 5vh, 3.5rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}
.capy-surtitre {
  margin: 0 0 1rem;
  font-family: var(--sans); font-weight: 700; font-size: clamp(.66rem, 1.1vw, .8rem);
  letter-spacing: .28em; text-transform: uppercase; color: var(--capy-accent);
}
.capy-titre {
  font-family: var(--blackletter); font-weight: 400; line-height: .86;
  color: var(--fer); margin: 0;
  font-size: clamp(3.4rem, 11vw, 8rem);
  text-shadow: 0 14px 60px rgb(13 26 51 / .8);
}
.capy-baseline { margin: 1.2rem 0 0; max-width: 40ch; color: var(--fer); font-size: clamp(1.05rem, 1.7vw, 1.35rem); font-weight: 300; line-height: 1.5; }
.capy-resume { margin: 1rem 0 0; max-width: 48ch; color: var(--fer-dim); font-size: clamp(.92rem, 1.2vw, 1.02rem); line-height: 1.75; }
.capy-actes { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: clamp(1.6rem, 4vh, 2.4rem); }
.capy-cta {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--sans); font-size: .82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; text-decoration: none;
  padding: .95em 1.8em; background: var(--capy-ciel); color: #12233f;
  transition: background .25s, color .25s, transform .25s, box-shadow .25s;
}
.capy-cta:hover { background: var(--fer); transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(0,0,0,.6); }
.capy-cta-fleche { font-size: 1.1em; }
.capy-cta--creux { background: transparent; color: var(--fer); box-shadow: inset 0 0 0 1px var(--fer-faible); }
.capy-cta--creux:hover { background: transparent; color: var(--capy-accent); box-shadow: inset 0 0 0 1px var(--capy-accent); }

/* ─────────────── le séchoir ───────────────
   La corde ploie au centre ; chaque feuille suit sa pente (--tomb) et
   pend de travers (--pend). Au survol, on redresse la feuille — elle
   reprend son aplomb, comme sous la main de l'imprimeur. */
.capy-sechoir { position: relative; padding-top: 18px; }
.capy-corde {
  position: absolute; top: 0; left: -4%; width: 108%; height: 34px;
  overflow: visible;
}
.capy-corde path { stroke: var(--capy-bois); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.capy-fils {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(.8rem, 2.4vw, 2rem);
}
.capy-feuille {
  --pend: 0deg;
  --tomb: 0px;
  position: relative;
  width: clamp(104px, 13vw, 172px);
  aspect-ratio: 3 / 4;
  flex: 0 0 auto;
  background: var(--nuit-2);
  box-shadow: 0 22px 44px -16px rgba(0,0,0,.65), 0 2px 6px rgba(0,0,0,.35);
  transform: translateY(var(--tomb)) rotate(var(--pend));
  transform-origin: top center;
  transition: transform .5s var(--ease-acier);
}
/* Le --tomb suit le ploiement de la corde (creuse au centre) : chaque pince
   retombe SUR le fil, jamais dessous. Trop d'écart et l'affiche paraît
   décrochée — d'où des valeurs resserrées, un peu plus basses au milieu. */
.capy-fils .capy-feuille:nth-child(3n+1) { --pend: -3.5deg; --tomb: 5px; }
.capy-fils .capy-feuille:nth-child(3n+2) { --pend: 2.5deg;  --tomb: 11px; }
.capy-fils .capy-feuille:nth-child(3n)   { --pend: -2deg;   --tomb: 7px; }
.capy-feuille:hover { transform: translateY(calc(var(--tomb) - 4px)) rotate(0deg); }
.capy-feuille-toile { position: absolute; inset: 0; overflow: hidden; display: block; }
.capy-feuille-img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* la pince de bois, à cheval sur la corde */
.capy-pince {
  position: absolute;
  top: -10px; left: 50%;
  width: 13px; height: 24px;
  margin-left: -6.5px;
  z-index: 2;
  background: linear-gradient(180deg, #a06a3c, #7c4a24);
  border-radius: 3px 3px 2px 2px;
  box-shadow: inset -2px 0 3px rgba(0,0,0,.28), 0 2px 4px rgba(0,0,0,.4);
}
.capy-pince::after {
  content: "";
  position: absolute;
  left: 50%; top: 10px; bottom: 2px;
  width: 1.6px;
  margin-left: -.8px;
  background: rgba(0,0,0,.32);
}

/* ─────────────── LE REGISTRE ─────────────── */
.capy-registre-blocs { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 4vw, 2.6rem); }
.capy-bloc { border-top: 2px solid color-mix(in srgb, var(--capy-accent) 45%, transparent); padding-top: 1.1rem; }
.capy-bloc h3 {
  font-family: var(--sans); font-weight: 700; font-size: .74rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--capy-accent); margin: 0 0 .8rem;
}
.capy-bloc p { margin: 0; color: var(--fer-dim); line-height: 1.8; font-size: clamp(.95rem, 1.2vw, 1.05rem); }

/* ─────────────── KAP, EN ÉCUSSON ─────────────── */
.capy-kap {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
  border-top: 1px solid var(--fer-faible);
}
.capy-kap-blason { justify-self: center; rotate: -3deg; transition: rotate .5s var(--ease-acier); }
.capy-kap:hover .capy-kap-blason { rotate: 2deg; }
.capy-kap-blason svg {
  width: clamp(170px, 22vw, 250px); height: auto; display: block;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,.5));
}

/* ─────────────── LE SERMENT VERT (un arbre par commande) ─────────────── */
.capy-serment {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
  border-top: 1px solid var(--fer-faible);
}
.capy-serment-blason { justify-self: center; rotate: 3deg; transition: rotate .5s var(--ease-acier); }
.capy-serment:hover .capy-serment-blason { rotate: -2deg; }
.capy-serment-blason svg {
  width: clamp(150px, 19vw, 220px); height: auto; display: block;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,.5));
}

/* Une image posée depuis le back-office remplace le blason dessiné (l'écusson
   Kap ou le pin) : elle occupe la même largeur, coins arrondis, même ombre. */
.capy-blason-img {
  width: clamp(160px, 21vw, 240px); height: auto; display: block;
  border-radius: 8px;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,.5));
}

/* ─────────────── LA COLLECTION ─────────────── */
.capy-galerie { border-top: 1px solid var(--fer-faible); }
.capy-galerie .capy-tete { text-align: center; }
.capy-galerie .capy-tete .capy-sous { margin-inline: auto; }
.capy-galerie-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
}
.capy-affiche { margin: 0; display: flex; flex-direction: column; gap: .7rem; }
.capy-affiche-cadre {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  position: relative;
  border: 1px solid rgb(var(--fer-rgb) / .14);
  background: var(--nuit-2);
  box-shadow: 0 24px 46px -24px rgba(0,0,0,.75);
}
.capy-affiche-img, .capy-affiche-defaut {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .7s var(--ease-acier);
}
.capy-affiche:hover .capy-affiche-img { transform: scale(1.05); }
.capy-affiche figcaption {
  font-family: var(--sans); font-size: .74rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fer-faible); text-align: center;
}

/* ─────────────── LE COMPTOIR ─────────────── */
.capy-comptoir { border-top: 1px solid var(--fer-faible); }
.capy-etals { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2.5vw, 2rem); }
.capy-etal {
  border: 1px solid var(--fer-faible);
  background: linear-gradient(180deg, rgb(150 195 237 / .06), rgb(var(--nuit-rgb) / .2));
  padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1.1rem, 2vw, 1.6rem) clamp(1.6rem, 3vw, 2.2rem);
  transition: transform .45s var(--ease-acier), border-color .45s, box-shadow .45s;
}
.capy-etal:hover { transform: translateY(-8px) rotate(-1deg); border-color: var(--capy-accent); box-shadow: 0 24px 46px -22px rgba(0,0,0,.75); }
.capy-etal-icone { display: block; width: clamp(44px, 6vw, 60px); margin-bottom: 1.1rem; color: var(--capy-accent); }
.capy-etal-icone svg { width: 100%; height: auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.capy-etal h3 { font-family: var(--blackletter); font-weight: 400; font-size: clamp(1.2rem, 1.8vw, 1.6rem); margin: 0 0 .5rem; color: var(--fer); }
.capy-etal p { margin: 0; font-size: .86rem; line-height: 1.6; color: var(--fer-dim); }
.capy-comptoir .armes-jetons { margin-top: clamp(1.8rem, 4vh, 2.6rem); }

/* ─────────────── RESPONSIVE ─────────────── */
@media (max-width: 900px) {
  .capy-hero { grid-template-columns: 1fr; }
  .capy-sechoir { order: -1; }
  .capy-kap, .capy-serment { grid-template-columns: 1fr; }
  .capy-kap-blason, .capy-serment-blason { justify-self: start; }
  .capy-etals { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .capy-registre-blocs { grid-template-columns: 1fr; gap: 1.6rem; }
  .capy-etals { grid-template-columns: 1fr; }
}

/* mouvement réduit : tout est là, rien ne surgit */
body[data-motion="reduced"] [data-capy-fade] { opacity: 1 !important; transform: none !important; }
body[data-motion="reduced"] .capy-feuille { opacity: 1 !important; }