/* ══════════════════════════════════════════════════════════
   Artonne Friss'onne 2027 : feuille de style du site public
   ══════════════════════════════════════════════════════════ */

:root {
  --nuit:        #0a0908;
  --nuit-2:      #121010;
  --nuit-3:      #1a1716;
  --pierre:      #6f6a66;
  --os:          #e2ddd4;
  --os-doux:     #a49d94;
  --os-faible:   #948d85;
  --sang:        #9b1b14;
  --sang-vif:    #c62a1b;
  /* Le rouge de marque tombe a 3,4:1 sur la nuit : illisible en petit.
     Celui-ci tient 5,2:1. Le vif reste aux titres, au decor et aux bordures. */
  --sang-texte:  #e35845;
  --sang-sombre: #4a0f0a;
  --rouille:     #7a3b22;

  --gothique: 'Pirata One', 'Times New Roman', serif;
  --titre:    'Oswald', 'Arial Narrow', sans-serif;
  --texte:    'Barlow', system-ui, sans-serif;

  --large: 1340px;
  --etroit: 840px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  margin: 0;
  background: var(--nuit);
  color: var(--os);
  font-family: var(--texte);
  font-size: 17px;
  line-height: 1.7;
  overflow-x: hidden;
}

/* Grain permanent. Vectoriel : il reste net à toutes les définitions d'écran,
   là où une photo de texture agrandie devient floue et tachée. */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 180px;
  mix-blend-mode: overlay;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--sang-texte); text-decoration: none; }
a:hover { color: #e6503f; }

h1, h2, h3 { margin: 0; font-family: var(--titre); font-weight: 600; line-height: 1.1; }

.visuellement-cache {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.saut-contenu {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--sang); color: #fff; padding: 12px 18px;
}
.saut-contenu:focus { left: 12px; top: 12px; }

.enveloppe { width: min(100% - 48px, var(--large)); margin-inline: auto; }
.enveloppe--etroite { width: min(100% - 48px, var(--etroit)); }

/* ─────────── Marque ─────────── */

.marque__nom {
  font-family: var(--gothique);
  font-size: 1.55em; letter-spacing: .5px; color: var(--os);
  line-height: 1;
}
.marque__cri {
  font-family: var(--titre); font-weight: 700; font-style: italic;
  color: var(--sang-vif); text-transform: uppercase;
  letter-spacing: 1px; font-size: 1.02em;
  text-shadow: 0 2px 0 var(--sang-sombre);
}
.marque__an {
  font-family: var(--titre); font-weight: 300;
  color: var(--os-faible); font-size: .86em; letter-spacing: 4px;
}

/* ─────────── En-tête ─────────── */

.entete {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; gap: 22px;
  padding: 14px clamp(16px, 4vw, 40px);
  transition: background .35s, backdrop-filter .35s, border-color .35s;
  border-bottom: 1px solid transparent;
}
.entete.collee {
  background: rgba(10, 9, 8, .93);
  backdrop-filter: blur(8px);
  border-bottom-color: rgba(155, 27, 20, .38);
}
.entete__marque { display: flex; align-items: baseline; gap: 9px; font-size: 19px; }
.entete__nav { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.entete__nav a {
  font-family: var(--titre); text-transform: uppercase;
  letter-spacing: 1.6px; font-size: 16px; font-weight: 500;
  color: var(--os-doux); position: relative; padding: 6px 0;
}
.entete__nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--sang-vif); transition: width .25s;
}
.entete__nav a:hover { color: var(--os); }
.entete__nav a:hover::after { width: 100%; }
/* ─── Le menu déroulant des éditions ─── */

.nav-deroulant { position: relative; }
.nav-deroulant__bouton {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 0; padding: 6px 0;
  font-family: var(--titre); text-transform: uppercase;
  letter-spacing: 1.6px; font-size: 16px; font-weight: 500;
  /* Un <button> n'herite pas de l'interligne : sans cette ligne il vaut
     « normal » quand ses voisins valent 1,7, et le mot tombe un demi-pixel
     plus bas que le reste du menu. */
  line-height: inherit;
  color: var(--os-doux); cursor: pointer;
}
.nav-deroulant__bouton:hover,
.nav-deroulant:hover .nav-deroulant__bouton,
.nav-deroulant:focus-within .nav-deroulant__bouton { color: var(--os); }
.nav-deroulant__fleche {
  width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform .2s;
}
.nav-deroulant:hover .nav-deroulant__fleche,
.nav-deroulant:focus-within .nav-deroulant__fleche { transform: rotate(180deg); }

.nav-deroulant__liste {
  position: absolute; top: 100%; left: -19px; z-index: 30;
  transform: translateY(8px);
  min-width: 210px; margin: 0; padding: 6px 0;
  list-style: none;
  background: rgba(14, 12, 11, .98);
  border: 1px solid var(--bordure, rgba(226,221,212,.14));
  border-top: 2px solid var(--sang);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .8);
  opacity: 0; visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
/* Une zone tampon invisible : le curseur peut descendre sans que le menu file. */
.nav-deroulant__liste::before {
  content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px;
}
.nav-deroulant:hover .nav-deroulant__liste,
.nav-deroulant.ouvert .nav-deroulant__liste,
.nav-deroulant:focus-within .nav-deroulant__liste {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-deroulant__liste a {
  display: block; padding: 11px 18px;
  font-family: var(--titre); text-transform: uppercase;
  letter-spacing: 1.4px; font-size: 16px; color: var(--os-doux);
}
.nav-deroulant__liste a::after { display: none; }
.nav-deroulant__liste a:hover { background: rgba(155, 27, 20, .18); color: var(--sang-texte); }

.entete__nav .nav-appel {
  border: 1px solid var(--sang); color: var(--sang-texte);
  padding: 8px 16px; border-radius: 2px;
}
.entete__nav .nav-appel:hover { background: var(--sang); color: #fff; }
.entete__nav .nav-appel::after { display: none; }

.entete__bouton {
  display: none; margin-left: auto; background: none; border: 0;
  padding: 10px; cursor: pointer;
}
.entete__bouton span {
  display: block; width: 26px; height: 2px; background: var(--os);
  margin: 5px 0; transition: transform .25s, opacity .25s;
}
.entete__bouton[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.entete__bouton[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.entete__bouton[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.menu-mobile {
  position: fixed; inset: 64px 0 auto 0; z-index: 19;
  background: rgba(10, 9, 8, .98);
  border-bottom: 1px solid rgba(155, 27, 20, .4);
  padding: 10px 0 18px;
  display: none; flex-direction: column;
}
.menu-mobile[hidden] { display: none; }
.menu-mobile a {
  font-family: var(--titre); text-transform: uppercase; letter-spacing: 2px;
  color: var(--os-doux); padding: 15px clamp(16px, 5vw, 40px);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.menu-mobile a:last-child { color: var(--sang-texte); border-bottom: 0; }

/* ─────────── Héros ─────────── */

.heros {
  position: relative;
  padding: clamp(120px, 15vh, 170px) 0 clamp(60px, 8vh, 90px);
  overflow: hidden;
}
/* Fond : la texture de pierre du flyer, jamais une photo agrandie.
   une image étirée au-delà de sa définition rend l'écran flou. */
.heros__fond {
  position: absolute; inset: 0;
  background:
    radial-gradient(78% 62% at 78% 46%, rgba(155,27,20,.20), transparent 62%),
    radial-gradient(90% 70% at 12% 4%,  rgba(60,52,48,.30), transparent 60%),
    linear-gradient(168deg, #14100e 0%, #0c0a09 46%, #070605 100%);
}
/* Grain fin par-dessus le dégradé : de la matière, sans le flou d'une photo. */
.heros__fond::after {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 180px;
  opacity: .09; mix-blend-mode: overlay;
}
.heros::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,9,8,.85) 0%, transparent 26%,
              transparent 68%, var(--nuit) 100%);
}

.heros__grille {
  position: relative; z-index: 2;
  display: grid; gap: clamp(34px, 7vw, 120px);
  grid-template-columns: minmax(0, 1fr) minmax(0, .72fr);
  align-items: center;
}

/* Coulures qui descendent derrière le titre */
.coulures { position: absolute; inset: 60px 0 auto 0; height: 52%; pointer-events: none; z-index: 1; opacity: .75; }
.coulures i {
  position: absolute; top: 0; left: var(--x);
  width: 2px; height: var(--h);
  background: linear-gradient(180deg, transparent, var(--sang-sombre) 25%, var(--sang) 100%);
  border-radius: 0 0 2px 2px;
  transform-origin: top;
  animation: couler var(--t) cubic-bezier(.5, 0, .8, .4) var(--d) infinite;
  opacity: 0;
}
.coulures i::after {
  content: ""; position: absolute; bottom: -4px; left: -2px;
  width: 6px; height: 7px; border-radius: 50%; background: var(--sang);
}
@keyframes couler {
  0%   { transform: scaleY(0);   opacity: 0; }
  12%  { opacity: .9; }
  70%  { transform: scaleY(1);   opacity: .85; }
  100% { transform: scaleY(1.5); opacity: 0; }
}

.heros__sur {
  font-family: var(--titre); text-transform: uppercase;
  letter-spacing: 6px; font-size: 16px; color: var(--os-doux);
  margin: 0 0 10px;
}
.heros__titre { margin: 0 0 18px; }
.titre__gothique {
  display: block; font-family: var(--gothique); font-weight: 400;
  font-size: clamp(48px, 8.2vw, 104px); line-height: .96;
  color: #f4f1eb;
  text-shadow: 0 2px 4px rgba(0,0,0,.95), 0 8px 34px rgba(0,0,0,.9);
}
.titre__sang {
  display: block;
  font-family: var(--titre); font-weight: 700; font-style: italic;
  text-transform: uppercase; letter-spacing: 1px;
  font-size: clamp(38px, 7vw, 88px); line-height: 1.06;
  color: var(--sang-vif);
  text-shadow: 0 3px 0 var(--sang-sombre), 0 10px 34px rgba(155,27,20,.45);
}
.titre__annee {
  display: block; font-family: var(--titre); font-weight: 300;
  font-size: clamp(17px, 2.6vw, 26px); letter-spacing: 12px;
  color: var(--os-faible); margin-top: 14px;
}

.heros__accroche {
  font-family: var(--titre); font-weight: 500; text-transform: uppercase;
  letter-spacing: 3px; font-size: clamp(17px, 2.1vw, 22px);
  color: var(--sang-texte); margin: 0 0 14px;
}
.heros__suite { max-width: 42ch; color: var(--os-doux); font-size: 17.5px; margin: 0 0 28px; }
.heros__actions { display: flex; flex-wrap: wrap; gap: 13px; }

.heros__lieu {
  display: flex; align-items: center; gap: 9px;
  margin: 26px 0 0; padding-top: 20px;
  border-top: 1px solid rgba(226,221,212,.12);
  font-family: var(--titre); font-weight: 300; text-transform: uppercase;
  letter-spacing: 2px; font-size: 16px; color: var(--os-faible);
}
.heros__lieu svg { color: var(--sang); width: 19px; height: 19px; }

/* ─── Le visuel du bandeau ─── */

.heros__visuel { display: grid; place-items: center; }

/* Une photo n'est affichée qu'à sa taille réelle, jamais étirée en fond. */
.heros__image { margin: 0; position: relative; width: 100%; }
.heros__image img {
  width: 100%; display: block;
  border: 1px solid rgba(226,221,212,.16);
  box-shadow: 0 26px 70px rgba(0,0,0,.75);
}
.heros__image::after {
  content: ""; position: absolute; left: -1px; right: -1px; bottom: -1px; height: 3px;
  background: linear-gradient(90deg, var(--sang), transparent);
}

/* L'œil : dessiné, donc net à toutes les tailles. */
.oeil { width: min(100%, 470px); height: auto; display: block; overflow: visible; }
/* Le regard est piloté par le script, qui écrit dans le style en ligne.
   Surtout ne pas déclarer « transform » ici : une règle CSS l'emporte sur
   l'attribut transform d'un SVG, et le regard resterait bloqué au centre. */
.oeil__regard {
  transform-origin: 200px 200px;
  transition: transform .3s cubic-bezier(.2, .9, .25, 1.06);
  will-change: transform;
}
/* La pupille se resserre selon la direction du regard, pilotée par le script.
   Pas de transition CSS : le réflexe pupillaire est lissé image par image
   dans le script, avec des vitesses différentes à la fermeture et à
   l'ouverture. Une transition par-dessus écraserait justement cette
   asymétrie, qui est tout l'intérêt. */
.oeil__pupille {
  transform-origin: 200px 200px;
  transition: none;
}

.heros__descendre {
  position: absolute; left: 50%; bottom: 20px; z-index: 3;
  transform: translateX(-50%);
  color: var(--os-faible);
  animation: flotte 2.6s ease-in-out infinite;
}
.ic--descendre { width: 28px; height: 28px; }
@keyframes flotte {
  0%, 100% { transform: translate(-50%, 0); opacity: .5; }
  50%      { transform: translate(-50%, 8px); opacity: 1; }
}

/* ─────────── Boutons ─────────── */

.bouton {
  display: inline-block; position: relative; overflow: hidden;
  font-family: var(--titre); text-transform: uppercase;
  letter-spacing: 2.4px; font-size: 16px; font-weight: 600;
  padding: 15px 30px; border: 1px solid transparent; border-radius: 2px;
  cursor: pointer; transition: color .25s, border-color .25s, transform .18s;
}
.bouton--sang { background: var(--sang); color: #fdf4f2; border-color: var(--sang); }
.bouton--sang::before {
  content: ""; position: absolute; inset: 0; background: var(--sang-vif);
  transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
.bouton--sang:hover { color: #fff; transform: translateY(-2px); }
.bouton--sang:hover::before { transform: scaleX(1); }
.bouton > * , .bouton { position: relative; }
.bouton--sang span, .bouton--sang { z-index: 1; }
.bouton--sang::before { z-index: -1; }

.bouton--fantome {
  border-color: rgba(226, 221, 212, .32); color: var(--os);
  background: rgba(255,255,255,.02);
}
.bouton--fantome:hover { border-color: var(--sang-texte); color: var(--sang-vif); transform: translateY(-2px); }
.bouton--large { width: 100%; padding: 18px; font-size: 17px; }

/* ─────────── Sections ─────────── */

.section { position: relative; padding: clamp(64px, 9vw, 118px) 0; }
.section--pierre::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(80% 70% at 20% 0%, rgba(155,27,20,.09), transparent 62%),
    linear-gradient(180deg, #141110, #0d0b0a);
}
.section--pierre::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 180px;
  opacity: .07; mix-blend-mode: overlay;
}
.section--pierre > * { position: relative; z-index: 1; }
.section--sombre { background: linear-gradient(180deg, var(--nuit-2), var(--nuit)); }

.sur-titre {
  font-family: var(--titre); text-transform: uppercase; letter-spacing: 7px;
  font-size: 16px; color: var(--os-doux); margin: 0 0 4px;
}

/* ─── En-tête de section commun : numéro, titre, sous-titre ─── */

.entete-section { margin-bottom: 36px; max-width: 62ch; }
.entete-section__marque {
  display: block; width: 46px; height: 3px;
  background: var(--sang); margin-bottom: 18px;
}
.entete-section .sur-titre { margin-bottom: 2px; }
.entete-section .sous-titre { margin-bottom: 0; margin-top: 12px; }

.titre-section {
  font-size: clamp(30px, 5.2vw, 54px);
  text-transform: uppercase; letter-spacing: 1px;
  margin: 0; position: relative; display: block;
}
.titre-section--sang {
  color: var(--sang-vif); font-style: italic; font-weight: 700;
  text-shadow: 0 3px 0 var(--sang-sombre);
  /* l'italique déborde à droite : sans cette marge, le dernier E est coupé */
  padding-right: .18em;
}
/* Un trait rouge passe sur le titre à l'arrivée, puis s'efface.
   Pas d'overflow:hidden ici : il rognait les lettres penchées. */
.titre-section[data-decoupe]::before {
  content: ""; position: absolute; left: 0; right: 0; top: 52%; height: 2px;
  background: linear-gradient(90deg, var(--sang-vif), transparent);
  transform: scaleX(0); transform-origin: left; opacity: 0;
  pointer-events: none;
}
.titre-section[data-decoupe].tranche::before { animation: trancher 1.05s ease forwards; }
@keyframes trancher {
  0%   { transform: scaleX(0); opacity: 0; }
  35%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

.sous-titre {
  font-family: var(--titre); font-weight: 300; font-size: clamp(16px, 2.4vw, 21px);
  color: var(--os-doux); margin: 0 0 36px; max-width: 58ch;
}
.sous-titre em { color: var(--sang-texte); font-style: normal; font-weight: 500; }

.texte-riche p { margin: 0 0 18px; color: var(--os-doux); }
.texte-riche p:last-child { margin-bottom: 0; }

.deux-colonnes {
  display: grid; gap: clamp(32px, 6vw, 96px);
  grid-template-columns: 1.1fr .9fr; align-items: center;
}
.deux-colonnes--inverse { grid-template-columns: minmax(0, .78fr) minmax(0, 1fr); }
@media (min-width: 1150px) {
  /* la troisième colonne accueille la saignée */
  /* La colonne de la saignée passe de 168 à 116 px et le texte de .72 à .62 :
     c'est l'affiche qui récupère la place. À 168 px la chaîne pesait plus
     lourd que le sujet même de la section. */
  .deux-colonnes--inverse { grid-template-columns: minmax(0, .62fr) minmax(0, 1fr) 116px; }
}
.affiche__texte { max-width: 48ch; }
.affiche__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

/* ─────────── Le crochet suspendu, à droite de l'affiche ─────────── */

#affiche .enveloppe { align-items: stretch; }
#affiche .affiche, #affiche .affiche__texte { align-self: center; }

/* Pas de découpe : en balançant, la pointe sort de la boîte du SVG. Un SVG
   masque par défaut ce qui dépasse de son viewBox, d'où le crochet qui
   disparaissait derrière le fond en fin de course. */
.crochet {
  position: relative; overflow: visible;
  min-height: 360px;
  display: flex; justify-content: center;
}
.crochet svg {
  width: 100%; height: 100%;
  overflow: visible;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .9));
}

/* Le balancement : lent, jamais tout à fait le même d'un aller à l'autre. */
.crochet__pendule {
  transform-origin: 40px 12px;
  animation: crochet-balance 7.4s cubic-bezier(.44, 0, .56, 1) infinite;
}
@keyframes crochet-balance {
  0%, 100% { transform: rotate(-3.4deg); }
  47%      { transform: rotate(3.1deg); }
}

/* ── Le sang qui coule ──────────────────────────────────────────────
   Il n'a pas voulu de goutte qui se forme et qui tombe : c'est un
   écoulement, et il ne s'interrompt jamais.

   Deux tracés superposés par section. Le sombre porte la matière, le clair
   par-dessus porte le mouvement : sans lui la coulée n'est qu'une trace
   séchée, on ne voit pas que ça coule.

   Tout converge vers `stroke-dashoffset: 0`, jamais l'inverse. Sous
   `prefers-reduced-motion` les animations sont écrasées à leur dernière
   image : le sang doit y être présent, pas effacé. */

.coulee { stroke-dasharray: 100; stroke-dashoffset: 100; }
/* La coulée s'arrête à la pointe : rien ne tombe dans la flaque. */
.coulee--haut { animation: sang-descend 5.6s cubic-bezier(.55, .1, .6, 1) .4s forwards; }
@keyframes sang-descend { to { stroke-dashoffset: 0; } }

/* Le courant : des ondes claires qui filent vers le bas, sans fin. */
.flux { stroke-dasharray: 7 31; stroke-dashoffset: 38; opacity: 0; }
.flux--haut { animation: sang-file 3.1s linear 5.2s infinite, flux-parait .9s ease 5.2s forwards; }
@keyframes sang-file   { to { stroke-dashoffset: 0; } }
@keyframes flux-parait { to { opacity: .5; } }

/* Les coulures qui s'attardent sur les maillons : elles s'allongent puis
   s'arrêtent, chacune à son heure, réglée dans le SVG. */
.coulure {
  stroke-dasharray: 100; stroke-dashoffset: 100; opacity: .8;
  animation: sang-descend 2.6s ease-in var(--retard, 1s) forwards;
}

/* La flaque est dessinée dans le SVG, donc rien à positionner ici. */

/* Elle est alimentée en continu : plus de sursaut d'impact, une respiration. */
.flaque__masse {
  transform-origin: 76px 40px; transform-box: fill-box;
  animation: flaque-masse 9.2s ease-in-out 5.6s infinite;
}
@keyframes flaque-masse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.02, 1.035); }
}
/* Le reflet respire avec elle. */
.flaque__reflet {
  transform-origin: 50% 50%; transform-box: fill-box;
  animation: flaque-reflet 4.6s ease-in-out 5.6s infinite;
}
@keyframes flaque-reflet {
  0%, 100% { transform: scaleX(1);    opacity: .14; }
  50%      { transform: scaleX(1.12); opacity: .22; }
}
/* Plus d'onde : rien ne tombe dedans, elle est seulement là depuis longtemps. */

/* ─────────── Séparateur : la lame ─────────── */

.lame { position: relative; height: 40px; overflow: hidden; }
.lame svg { width: 100%; height: 40px; display: block; }
.lame__trait { stroke: rgba(226,221,212,.10); stroke-width: 1; fill: none; }
.lame__dents {
  stroke: var(--sang); stroke-width: 1.4; fill: none;
  stroke-dasharray: 600; stroke-dashoffset: 600;
  filter: drop-shadow(0 0 4px rgba(198,42,27,.55));
}
.lame.coupe .lame__dents { animation: scier 2.2s cubic-bezier(.6,0,.3,1) forwards; }
@keyframes scier { to { stroke-dashoffset: 0; } }

/* ─────────── Rôles ─────────── */

.grille-roles {
  display: grid; gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: 12px;
}
.role {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  background: linear-gradient(170deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  border: 1px solid rgba(226,221,212,.10);
  padding: 30px 26px 26px;
  transition: border-color .3s, transform .3s, background .3s;
}
.role:hover { border-color: rgba(198,42,27,.55); transform: translateY(-5px); }

/* l'entaille : un trait rouge qui s'ouvre en diagonale au survol */
.role__entaille {
  position: absolute; top: -10%; left: -20%; width: 150%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--sang-vif) 45%, transparent);
  transform: rotate(-22deg) scaleX(0); transform-origin: left center;
  transition: transform .55s cubic-bezier(.5,0,.2,1);
}
.role:hover .role__entaille { transform: rotate(-22deg) scaleX(1); }

.role__icone { color: var(--sang-vif); margin-bottom: 16px; }
.ic { width: 24px; height: 24px; flex-shrink: 0; }
.ic--role { width: 54px; height: 54px; stroke-width: 1.1; }
.role:hover .ic--role { animation: tremble .45s ease; }
@keyframes tremble {
  0%,100% { transform: translate(0,0) rotate(0); }
  25%     { transform: translate(-1.5px,1px) rotate(-2.5deg); }
  75%     { transform: translate(1.5px,-1px) rotate(2.5deg); }
}

.role__nom {
  font-size: 25px; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--os); margin-bottom: 3px;
}
.role__baseline {
  font-family: var(--titre); text-transform: uppercase; letter-spacing: 2px;
  font-size: 16px; color: var(--sang-texte); margin: 0 0 14px;
}
.role__texte { color: var(--os-doux); font-size: 16.5px; margin: 0 0 18px; flex: 1 1 auto; }
.role__lien {
  font-family: var(--titre); text-transform: uppercase; letter-spacing: 2px;
  font-size: 16px; color: var(--os-doux);
  margin-top: auto; padding-top: 4px;   /* aligné en bas, quelle que soit la longueur du texte */
  align-self: flex-start;
}
.role__lien:hover { color: var(--sang-texte); }
.role__lien span { display: inline-block; transition: transform .25s; }
.role__lien:hover span { transform: translateX(5px); }

/* ─────────── Points ─────────── */

.liste-points { list-style: none; padding: 0; margin: 26px 0 30px; }
.liste-points li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 0; border-bottom: 1px solid rgba(226,221,212,.08);
  color: var(--os-doux);
}
.ic--puce { color: var(--sang); width: 18px; height: 18px; margin-top: 4px; }

/* ─────────── Images ─────────── */

.chateau img, .affiche img {
  border: 1px solid rgba(226,221,212,.14);
  filter: grayscale(.25) contrast(1.05);
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.chateau { margin: 0; }
.chateau figcaption, .cliche figcaption {
  font-family: var(--titre); font-weight: 300; font-size: 16px;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--os-faible); margin-top: 12px;
}
.affiche { margin: 0; }
.affiche img { transition: transform .5s, filter .5s; }
.affiche:hover img { transform: scale(1.02); filter: grayscale(0) contrast(1.08); }

.grille-galerie {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.cliche { margin: 0; overflow: hidden; }
.cliche img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  filter: grayscale(.55) contrast(1.1) brightness(.85);
  transition: filter .45s, transform .6s;
}
.cliche:hover img { filter: grayscale(0) contrast(1.05) brightness(1); transform: scale(1.05); }

/* ─────────── Pouls ─────────── */

.section--pouls { overflow: hidden; }
.pouls {
  position: absolute; top: 0; left: 0; right: 0; height: 80px;
  opacity: .5; pointer-events: none;
}
.pouls svg { width: 100%; height: 80px; }
.pouls path {
  fill: none; stroke: var(--sang); stroke-width: 2;
  stroke-dasharray: 2400; stroke-dashoffset: 2400;
  filter: drop-shadow(0 0 5px rgba(198,42,27,.7));
}
.section--pouls.bat .pouls path { animation: battre 3.4s linear infinite; }
@keyframes battre { to { stroke-dashoffset: 0; } }

/* ─────────── Formulaire ─────────── */

.formulaire { margin-top: 8px; }
.champs-deux { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
.champ { margin: 0 0 20px; border: 0; padding: 0; }
.champ label, .champ legend {
  display: block; font-family: var(--titre); text-transform: uppercase;
  letter-spacing: 1.6px; font-size: 16px; color: var(--os-doux);
  margin-bottom: 8px; padding: 0;
}
.obligatoire { color: var(--sang-texte); }
.champ input[type="text"], .champ input[type="email"], .champ input[type="tel"], .champ textarea {
  width: 100%; font: inherit; color: var(--os);
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(226,221,212,.16);
  border-radius: 2px; padding: 13px 15px;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.champ input:focus, .champ textarea:focus {
  outline: none; border-color: var(--sang-vif);
  background: rgba(255,255,255,.055);
  box-shadow: 0 0 0 3px rgba(198,42,27,.16);
}
.champ textarea { resize: vertical; min-height: 120px; }
.champ--faux input, .champ--faux textarea { border-color: var(--sang-vif); }
.champ__erreur {
  display: block; color: #e8695a; font-size: 16px; margin-top: 6px;
}

.cases { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2px; }
.champ label.case, .case {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--texte); font-weight: 400;
  text-transform: none; letter-spacing: 0;
  font-size: 16.5px; color: var(--os-doux); margin: 0;
  border: 1px solid rgba(226,221,212,.16); border-radius: 2px;
  padding: 10px 15px; cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.case:hover { border-color: rgba(198,42,27,.5); color: var(--os); }
.case input { accent-color: var(--sang-vif); width: 17px; height: 17px; margin: 0; cursor: pointer; }
.case:has(input:checked) {
  border-color: var(--sang-vif); color: var(--os);
  background: rgba(155,27,20,.14);
}
.champ--consentement label.case {
  border: 0; padding: 0; align-items: flex-start; font-size: 16.5px; line-height: 1.55;
}
.champ--consentement .case input { margin-top: 3px; }

.pot-de-miel { position: absolute; left: -9999px; }

.message {
  padding: 16px 20px; border-radius: 2px; margin-bottom: 26px;
  border-left: 3px solid;
}
.message--succes { background: rgba(74,160,90,.12); border-color: #4aa05a; color: #b6e6bf; }
.message--erreur { background: rgba(198,42,27,.14); border-color: var(--sang-vif); color: #f0b6ae; }

/* ─────────── Pied ─────────── */

.pied {
  background: #060505; border-top: 1px solid rgba(155,27,20,.3);
  padding: 60px 0 34px; margin-top: 0;
}
.pied__grille { display: grid; gap: 40px; grid-template-columns: 1.1fr .9fr; }
.pied__marque { font-size: 26px; display: flex; align-items: baseline; gap: 9px; margin: 0 0 12px; }
.pied__mentions { color: var(--os-faible); font-size: 16.5px; max-width: 42ch; margin: 0; }
.pied__titre { font-size: 24px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.pied__texte { color: var(--os-doux); margin: 0 0 16px; }
.pied__liens { list-style: none; padding: 0; margin: 0 0 18px; }
.pied__liens li { display: flex; align-items: center; gap: 11px; padding: 6px 0; color: var(--os-doux); }
.pied__liens svg { color: var(--sang); }
.pied__liens a { color: var(--os); }
.pied__liens a:hover { color: var(--sang-texte); }
.pied__reseaux { display: flex; gap: 20px; flex-wrap: wrap; margin: 0; }
.pied__reseaux a {
  font-family: var(--titre); text-transform: uppercase;
  letter-spacing: 2px; font-size: 16px; color: var(--os-doux);
}
.pied__reseaux a:hover { color: var(--sang-texte); }


/* ─────────── La gueule qui croque le curseur ─────────── */

/* Elle ne surgit pas d'un coup : elle remonte du fond, encore floue et
   presque noire, puis prend sa netteté en arrivant. */
.gueule {
  position: fixed; z-index: 60; pointer-events: none;
  width: 300px; height: 300px; margin: -150px 0 0 -150px;
  left: -600px; top: -600px;
  opacity: 0; visibility: hidden;
  transform: scale(.42);
  filter: blur(11px) brightness(.18) saturate(.4);
  transition: opacity .42s ease,
              transform .46s cubic-bezier(.18, .85, .3, 1.18),
              filter .42s ease-out;
}
.gueule svg { width: 100%; height: 100%; display: block; }
.gueule__haut, .gueule__bas {
  transform-origin: 100px 100px;
  transition: transform .34s cubic-bezier(.2, .9, .3, 1.25);
}

.gueule--visible {
  opacity: 1; visibility: visible;
  transform: scale(1.04);
  filter: blur(0) brightness(1) saturate(1) drop-shadow(0 10px 34px rgba(0, 0, 0, .85));
}
.gueule--visible .gueule__haut { transform: translateY(-40px) rotate(-2deg); }
.gueule--visible .gueule__bas  { transform: translateY(40px)  rotate(2deg); }

/* Le claquement : bien plus rapide que l'ouverture. */
.gueule--croque { transform: scale(.9); }
.gueule--croque .gueule__haut,
.gueule--croque .gueule__bas {
  transform: translateY(0) rotate(0);
  transition-duration: .11s;
  transition-timing-function: cubic-bezier(.7, 0, .35, 1);
}

.gueule__sang { fill: var(--sang-vif); opacity: 0; }
.gueule--sang .gueule__sang { animation: gicle .75s ease-out forwards; }
@keyframes gicle {
  0%   { opacity: 0;  transform: scale(.2); }
  22%  { opacity: 1;  transform: scale(1.25); }
  100% { opacity: 0;  transform: scale(2.1) translateY(26px); }
}

/* Une fois mordu, le curseur reste une main ensanglantée. */
body.mordu, body.mordu * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='%23a01a10' stroke='%234a0f0a' stroke-width='1'%3E%3Crect x='8.4' y='4' width='3.4' height='11.5' rx='1.7'/%3E%3Crect x='12.5' y='2.4' width='3.4' height='13' rx='1.7'/%3E%3Crect x='16.6' y='3' width='3.4' height='12.4' rx='1.7'/%3E%3Crect x='20.7' y='5' width='3.4' height='10.4' rx='1.7'/%3E%3Cpath d='M8.6 12.4 5.6 17.6a2.1 2.1 0 0 0 3.6 2.1l2.4-4.1z'/%3E%3Cpath d='M8 13h16v8.4a8 8 0 0 1-16 0z'/%3E%3C/g%3E%3Cg fill='%23c62a1b'%3E%3Ccircle cx='12' cy='28' r='2'/%3E%3Ccircle cx='20.5' cy='30' r='1.4'/%3E%3C/g%3E%3C/svg%3E") 14 3, auto; }

@media (prefers-reduced-motion: reduce) {
  .gueule { display: none; }
}

/* ─────────── Apparition au défilement ─────────── */

/* Le masquage n'est appliqué que si JavaScript tourne : sans lui, ou si le script
   échoue, le contenu reste visible au lieu de disparaître. */
.js .apparait { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.js .apparait.visible { opacity: 1; transform: none; }

/* ─────────── Adaptatif ─────────── */

@media (max-width: 1149px) {
  .crochet { display: none; }
}

@media (max-width: 900px) {
  .entete__nav { display: none; }
  .entete__bouton { display: block; }
  .menu-mobile:not([hidden]) { display: flex; }
  .deux-colonnes, .deux-colonnes--inverse, .pied__grille { grid-template-columns: 1fr; }
  .heros__grille { grid-template-columns: 1fr; }
  .heros__image { max-width: 380px; }
  .oeil { width: min(72%, 300px); }
  .deux-colonnes--inverse .affiche { max-width: 420px; margin-inline: auto; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .champs-deux { grid-template-columns: 1fr; }
  .titre__annee { letter-spacing: 8px; }
  .heros { min-height: auto; padding: 110px 0 70px; }
}

/* ─────────── Confort ─────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .apparait { opacity: 1; transform: none; }
  .coulures { display: none; }
}

/* ─────────── Pages légales ─────────── */

.pied__legal { margin-top: 12px; font-size: 14px; }
.pied__legal a { color: var(--encre-douce, #a49d94); text-decoration: underline; text-underline-offset: 3px; }
.pied__legal a:hover { color: var(--sang-texte, #e2ddd4); }
.pied__legal span { margin: 0 6px; opacity: .5; }

.page-legale { background: var(--nuit, #0a0908); }
.legal { padding: 128px 0 80px; }
.legal__corps { max-width: 78ch; }
.legal__titre {
  font-family: var(--affiche, var(--titre));
  font-size: clamp(34px, 6vw, 58px);
  line-height: 1.05;
  margin: 0 0 34px;
  color: var(--os, #e2ddd4);
}
.legal__corps h2 {
  font-family: var(--titre);
  text-transform: uppercase; letter-spacing: 1.8px;
  font-size: 19px; font-weight: 500;
  color: var(--sang-texte, #d9776a);
  margin: 38px 0 12px;
  padding-top: 18px;
  border-top: 1px solid rgba(226, 221, 212, .12);
}
.legal__corps h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.legal__corps p { margin: 0 0 14px; line-height: 1.75; color: var(--os-doux, #b9b2a8); }
.legal__corps strong { color: var(--os, #e2ddd4); }
.legal__corps a { color: var(--sang-texte, #d9776a); text-decoration: underline; text-underline-offset: 3px; }
.legal__maj { margin-top: 34px; font-size: 14px; opacity: .6; font-style: italic; }
.legal__retour { margin-top: 40px; }

/* Les perles de tension superficielle : elles gonflent sur place quand le
   filet les atteint, chacune à son heure, réglée dans le SVG. Le gonflement
   part de 40 % — une perle qui apparaît à taille réelle « pope » au lieu de
   se former. */
.perle {
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
  animation: perle-gonfle 1.1s cubic-bezier(.2, .8, .3, 1) var(--retard, 1s) forwards;
}
@keyframes perle-gonfle {
  from { opacity: 0; transform: scale(.4); }
  to   { opacity: 1; transform: scale(1); }
}