/* =====================================================================
   3sept — v2
   Monochrome strict. Aucun accent coloré : les états passent par
   l'inversion, comme un négatif.
   ===================================================================== */

:root{
  --noir:       #0A0A0B;
  --noir-2:     #0F0F11;
  --ligne:      #212125;
  --ligne-vive: #38383E;
  --gris:       #6C6C74;
  --gris-clair: #9C9CA4;
  --blanc:      #EFECE7;

  --display:'Archivo', system-ui, sans-serif;
  --texte:'Inter Tight', system-ui, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;

  --marge: clamp(18px, 4.5vw, 68px);
  --bande: 32px;
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--noir);color:var(--blanc);
  font-family:var(--texte);font-weight:300;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
::selection{background:var(--blanc);color:var(--noir)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--blanc);outline-offset:3px}

.cote{
  font-family:var(--mono);font-size:10px;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gris);
}

/* ---------------------------------------------------------------
   BANDE DE REGISTRE
   --------------------------------------------------------------- */
.bande{
  position:fixed;left:0;top:0;bottom:0;width:var(--bande);
  border-right:1px solid var(--ligne);background:var(--noir);
  display:flex;align-items:center;justify-content:center;
  z-index:60;pointer-events:none;
}
.bande span{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--mono);font-size:9px;letter-spacing:.44em;
  text-transform:uppercase;color:var(--gris);white-space:nowrap;
}

/* ---------------------------------------------------------------
   EN-TÊTE
   --------------------------------------------------------------- */
.tete{
  position:fixed;top:0;left:var(--bande);right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:0 var(--marge);height:58px;
  border-bottom:1px solid var(--ligne);
  background:rgba(10,10,11,.8);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.marque{display:flex;align-items:center;line-height:0}
.marque img{height:19px;width:auto}
.nav{display:flex;align-items:center;gap:24px}
.nav a{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gris-clair);
  padding:4px 0;border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s;
}
.nav a:hover{color:var(--blanc);border-bottom-color:var(--blanc)}
.outils{display:flex;align-items:center;gap:12px}
.langue{display:flex;border:1px solid var(--ligne-vive)}
.langue button{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  padding:5px 8px;color:var(--gris);transition:background .18s,color .18s;
}
.langue button[aria-pressed="true"]{background:var(--blanc);color:var(--noir)}
.bouton-club{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;padding:9px 15px;border:1px solid var(--blanc);
  transition:background .18s,color .18s;
}
.bouton-club:hover{background:var(--blanc);color:var(--noir)}
.burger{display:none;width:24px;height:13px;position:relative}
.burger i{position:absolute;left:0;right:0;height:1px;background:var(--blanc);transition:transform .25s,opacity .2s}
.burger i:nth-child(1){top:0}.burger i:nth-child(2){top:6px}.burger i:nth-child(3){top:12px}
body.menu-ouvert .burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menu-ouvert .burger i:nth-child(2){opacity:0}
body.menu-ouvert .burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------------------------------------------------------------
   CADRE
   --------------------------------------------------------------- */
.page{margin-left:var(--bande)}
.section{
  padding:clamp(64px,8.5vw,116px) var(--marge);
  border-bottom:1px solid var(--ligne);
}
.entete-section{display:flex;align-items:baseline;gap:14px;margin-bottom:clamp(30px,4.4vw,54px)}
.entete-section .num,.entete-section .meta{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--gris);white-space:nowrap;
}
.entete-section .titre{
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--blanc);white-space:nowrap;
}
.entete-section .trait{flex:1;height:1px;background:var(--ligne)}

/* =====================================================================
   ACCUEIL — deux colonnes : manifeste + pièce en avant
   ===================================================================== */
.accueil{
  min-height:100svh;padding:calc(58px + clamp(28px,5vw,60px)) var(--marge) clamp(40px,6vw,72px);
  display:grid;gap:clamp(34px,5vw,68px);align-items:center;
  grid-template-columns:1fr;position:relative;overflow:hidden;
}
@media(min-width:1000px){
  .accueil{grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr)}
}
.accueil::before{
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(var(--ligne) 1px,transparent 1px),
                   linear-gradient(90deg,var(--ligne) 1px,transparent 1px);
  background-size:clamp(64px,8vw,116px) clamp(64px,8vw,116px);
  opacity:.3;
  mask-image:radial-gradient(ellipse 85% 75% at 30% 45%,#000 0,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 85% 75% at 30% 45%,#000 0,transparent 75%);
  pointer-events:none;
}
.accueil > *{position:relative;z-index:2}

.depot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-bottom:clamp(22px,3vw,36px)}
.puce{width:5px;height:5px;background:var(--blanc);border-radius:50%;animation:pouls 3.4s ease-in-out infinite}
@keyframes pouls{0%,100%{opacity:1}50%{opacity:.22}}

.manifeste{
  font-family:var(--display);
  font-variation-settings:'wdth' 108,'wght' 800;
  text-transform:uppercase;letter-spacing:-.028em;line-height:.86;
  font-size:clamp(40px,7.6vw,118px);
}
.manifeste .creux{
  display:block;color:transparent;-webkit-text-stroke:1px var(--ligne-vive);
}
.sous-manifeste{
  margin-top:clamp(18px,2.4vw,28px);
  font-size:clamp(15px,1.8vw,21px);color:var(--gris-clair);
  max-width:34ch;line-height:1.4;
}
.accueil-actions{margin-top:clamp(30px,4vw,46px);display:flex;flex-wrap:wrap;gap:16px}

.cta{
  display:inline-flex;align-items:center;gap:13px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  padding:16px 24px;background:var(--blanc);color:var(--noir);transition:transform .2s;
}
.cta:hover{transform:translateX(4px)}
.cta .fleche{transition:transform .2s}
.cta:hover .fleche{transform:translateX(4px)}

.cta-creux{
  display:inline-flex;align-items:center;gap:13px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  padding:16px 24px;border:1px solid var(--ligne-vive);
  transition:border-color .2s,background .2s;
}
.cta-creux:hover{border-color:var(--blanc);background:var(--noir-2)}

/* --- la pièce en avant, dans le premier écran --- */
.avant{border:1px solid var(--ligne-vive);padding:18px;background:var(--noir)}
.avant .bandeau{display:flex;justify-content:space-between;gap:10px;margin-bottom:14px}
.avant .planche{
  aspect-ratio:4/5;border:1px solid var(--ligne);position:relative;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:var(--noir-2);
}
.avant .planche img{width:100%;height:100%;object-fit:cover}
.avant .planche .reserve{
  font-family:var(--mono);font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gris);text-align:center;padding:14px;
}
.avant .planche i{position:absolute;width:10px;height:10px;border:1px solid var(--ligne-vive)}
.avant .planche i:nth-of-type(1){top:8px;left:8px;border-right:0;border-bottom:0}
.avant .planche i:nth-of-type(2){top:8px;right:8px;border-left:0;border-bottom:0}
.avant .planche i:nth-of-type(3){bottom:8px;left:8px;border-right:0;border-top:0}
.avant .planche i:nth-of-type(4){bottom:8px;right:8px;border-left:0;border-top:0}
.avant h2{
  font-family:var(--display);font-variation-settings:'wdth' 106,'wght' 700;
  text-transform:uppercase;font-size:19px;line-height:1.04;margin:16px 0 8px;
}
.avant .note{font-size:13px;color:var(--gris-clair)}
.avant .jauge{height:1px;background:var(--ligne);margin:16px 0 9px;position:relative}
.avant .jauge span{position:absolute;left:0;top:0;height:100%;background:var(--blanc);width:0;transition:width 1.4s cubic-bezier(.4,0,.2,1)}
.avant .pied{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:16px}
.avant .prix{
  font-family:var(--display);font-variation-settings:'wdth' 118,'wght' 700;
  font-size:26px;font-variant-numeric:tabular-nums;line-height:1;
}
.avant .prix small{display:block;margin-top:6px}
.avant .prendre{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  padding:13px 18px;background:var(--blanc);color:var(--noir);transition:opacity .18s;
}
.avant .prendre:hover{opacity:.85}

/* --- le sceau : l'ovale utilisé comme tampon de dépôt ---
   En flux normal, sous les boutons : en positionnement absolu il
   passait par-dessus la carte de la pièce et rendait le bouton
   Réserver inutilisable. --------------------------------------- */
.sceau{
  position:relative;z-index:2;
  margin-top:clamp(30px,4vw,46px);
  display:flex;align-items:center;gap:16px;
  transform:rotate(-1.4deg);transform-origin:left center;
  opacity:.9;pointer-events:none;
}
.sceau img{width:clamp(84px,8vw,116px);height:auto;opacity:.5;flex-shrink:0}
.sceau .mention{
  font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gris);line-height:1.7;
}
@media(max-width:860px){.sceau{margin-top:26px}}

/* =====================================================================
   ÉTAT DU REGISTRE — les compteurs
   ===================================================================== */
.etat-registre{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  border-top:1px solid var(--ligne);border-left:1px solid var(--ligne);
  margin-bottom:clamp(26px,3.4vw,42px);
}
.etat-registre .case{
  border-right:1px solid var(--ligne);border-bottom:1px solid var(--ligne);
  padding:22px 20px;
}
.etat-registre .chiffre{
  font-family:var(--display);font-variation-settings:'wdth' 118,'wght' 800;
  font-size:clamp(30px,4.2vw,52px);line-height:1;font-variant-numeric:tabular-nums;
}
.etat-registre .lib{
  margin-top:8px;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gris);
}
.etat-registre .fin{
  margin-top:5px;font-family:var(--mono);font-size:9px;letter-spacing:.12em;
  color:var(--ligne-vive);
}

/* =====================================================================
   LE JOURNAL DU REGISTRE — signature de la page
   ===================================================================== */
.journal{border:1px solid var(--ligne);background:var(--noir-2)}
.journal-tete{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 18px;border-bottom:1px solid var(--ligne);
}
.journal-tete .vivant{display:flex;align-items:center;gap:9px}
.journal-liste{list-style:none;max-height:392px;overflow:hidden;position:relative}
.journal-liste::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:70px;
  background:linear-gradient(transparent,var(--noir-2));pointer-events:none;
}
.ecriture{
  display:grid;grid-template-columns:64px 92px 1fr auto;gap:16px;align-items:baseline;
  padding:13px 18px;border-bottom:1px solid var(--ligne);
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;
  color:var(--gris-clair);white-space:nowrap;
}
.ecriture .no{color:var(--gris);font-variant-numeric:tabular-nums}
.ecriture .date{color:var(--gris);font-variant-numeric:tabular-nums}
.ecriture .objet{
  white-space:normal;color:var(--blanc);font-family:var(--texte);
  font-size:13.5px;letter-spacing:0;
}
.ecriture .type{
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--ligne-vive);padding:3px 8px;color:var(--gris);
}
.ecriture.neuve{animation:ecrire .55s cubic-bezier(.4,0,.2,1)}
.ecriture.neuve .type{background:var(--blanc);color:var(--noir);border-color:var(--blanc)}
@keyframes ecrire{
  from{opacity:0;transform:translateY(-10px);background:rgba(239,236,231,.07)}
  to{opacity:1;transform:none;background:transparent}
}

/* =====================================================================
   PIÈCES
   ===================================================================== */
.avant-propos{max-width:56ch;font-size:15px;color:var(--gris-clair);margin-bottom:clamp(30px,4vw,46px)}
.pieces{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));
  border-top:1px solid var(--ligne);border-left:1px solid var(--ligne);
}
.piece{
  border-right:1px solid var(--ligne);border-bottom:1px solid var(--ligne);
  padding:20px;display:flex;flex-direction:column;transition:background .3s;
}
.piece:hover{background:var(--noir-2)}
.piece .planche{
  aspect-ratio:1;border:1px solid var(--ligne);position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;background:var(--noir);
}
.piece .planche img{width:100%;height:100%;object-fit:cover}
.piece .planche .reserve{
  font-family:var(--mono);font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gris);text-align:center;padding:12px;
}
.piece .planche i{position:absolute;width:9px;height:9px;border:1px solid var(--ligne-vive)}
.piece .planche i:nth-of-type(1){top:7px;left:7px;border-right:0;border-bottom:0}
.piece .planche i:nth-of-type(2){top:7px;right:7px;border-left:0;border-bottom:0}
.piece .planche i:nth-of-type(3){bottom:7px;left:7px;border-right:0;border-top:0}
.piece .planche i:nth-of-type(4){bottom:7px;right:7px;border-left:0;border-top:0}
.piece .ligne-cote{display:flex;justify-content:space-between;gap:10px;padding-bottom:8px;border-bottom:1px solid var(--ligne)}
.piece h3{
  font-family:var(--display);font-variation-settings:'wdth' 106,'wght' 700;
  text-transform:uppercase;font-size:16.5px;line-height:1.05;margin:13px 0 6px;
}
.piece .desc{font-size:13px;color:var(--gris-clair);flex:1}
.piece .jauge{height:1px;background:var(--ligne);margin-top:13px;position:relative}
.piece .jauge span{position:absolute;left:0;top:0;height:100%;background:var(--blanc)}
.piece .pied{margin-top:15px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.piece .prix{font-family:var(--display);font-variation-settings:'wdth' 118,'wght' 700;font-size:20px;font-variant-numeric:tabular-nums;line-height:1}
.piece .prendre{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  padding:9px 13px;border:1px solid var(--ligne-vive);
  transition:background .18s,color .18s,border-color .18s;
}
.piece .prendre:hover{background:var(--blanc);color:var(--noir);border-color:var(--blanc)}
.piece[data-dispo="epuise"]{opacity:.4}
.piece[data-dispo="epuise"] .prendre{pointer-events:none}

.reserve-club{
  display:inline-block;margin-top:11px;
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--blanc);padding:4px 8px;color:var(--blanc);
}

/* =====================================================================
   CHAPITRES
   ===================================================================== */
.chapitres{border-left:1px solid var(--ligne)}
.chapitre{
  display:grid;grid-template-columns:66px 1fr minmax(0,260px);
  gap:clamp(16px,2.6vw,38px);
  padding:clamp(22px,3vw,34px) 0 clamp(22px,3vw,34px) clamp(16px,2.6vw,32px);
  border-bottom:1px solid var(--ligne);position:relative;transition:background .3s;
}
.chapitre:hover{background:var(--noir-2)}
.chapitre::before{
  content:'';position:absolute;left:-4px;top:calc(50% - 3.5px);
  width:7px;height:7px;background:var(--blanc);transform:rotate(45deg);
}
.chapitre[data-etat="avenir"]::before{background:var(--ligne-vive)}
.chapitre .index{
  font-family:var(--display);font-variation-settings:'wdth' 118,'wght' 800;
  font-size:clamp(24px,2.8vw,36px);line-height:1;color:var(--ligne-vive);
  font-variant-numeric:tabular-nums;transition:color .3s;
}
.chapitre:hover .index{color:var(--blanc)}
.chapitre h3{
  font-family:var(--display);font-variation-settings:'wdth' 106,'wght' 700;
  text-transform:uppercase;font-size:clamp(18px,2.2vw,29px);line-height:1.02;letter-spacing:-.01em;
}
.chapitre p{margin-top:10px;font-size:14px;color:var(--gris-clair);max-width:52ch}
.chapitre[data-etat="avenir"] h3{color:var(--gris)}
.chapitre .droite{display:flex;flex-direction:column;gap:11px;align-items:flex-start}
@media(min-width:900px){.chapitre .droite{align-items:flex-end;text-align:right}}
.etat{
  font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  padding:4px 9px;border:1px solid var(--ligne-vive);color:var(--gris-clair);white-space:nowrap;
}
.etat[data-e="encours"]{background:var(--blanc);color:var(--noir);border-color:var(--blanc)}
.vignette{
  width:100%;max-width:260px;aspect-ratio:16/9;border:1px solid var(--ligne);
  background:var(--noir-2);display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
.vignette img{width:100%;height:100%;object-fit:cover}
.vignette .vide{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--gris)}
.vignette::after{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(-45deg,transparent 0 9px,var(--ligne) 9px 10px);
  opacity:.5;pointer-events:none;
}
.vignette.pleine::after{display:none}

/* =====================================================================
   LE 37
   ===================================================================== */
.territoire{display:grid;grid-template-columns:1fr;gap:clamp(30px,4.4vw,58px);align-items:start}
@media(min-width:940px){.territoire{grid-template-columns:1.15fr .85fr}}
.territoire .propos p{font-size:clamp(15px,1.6vw,18px);color:var(--gris-clair);max-width:56ch}
.territoire .propos p + p{margin-top:18px}
.territoire .propos strong{color:var(--blanc);font-weight:500}
.plaque{border:1px solid var(--ligne-vive);padding:clamp(22px,3vw,34px);display:flex;flex-direction:column;gap:20px}
.plaque .numero{
  font-family:var(--display);font-variation-settings:'wdth' 125,'wght' 900;
  font-size:clamp(72px,11vw,142px);line-height:.82;letter-spacing:-.03em;
}
.plaque dl{display:grid;grid-template-columns:auto 1fr;gap:9px 18px;align-items:baseline}
.plaque dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}
.plaque dd{font-size:14px}

/* =====================================================================
   LE CLUB
   ===================================================================== */
.club{display:grid;grid-template-columns:1fr;gap:clamp(30px,4.4vw,54px);align-items:start}
@media(min-width:940px){.club{grid-template-columns:1fr 1fr}}
.club h2{
  font-family:var(--display);font-variation-settings:'wdth' 110,'wght' 800;
  text-transform:uppercase;font-size:clamp(28px,4.2vw,55px);line-height:.94;letter-spacing:-.02em;
}
.club .intro{margin-top:18px;font-size:15px;color:var(--gris-clair);max-width:46ch}
.paliers{list-style:none;margin-top:26px;border-top:1px solid var(--ligne)}
.paliers li{display:grid;grid-template-columns:auto 1fr;gap:15px;padding:14px 0;border-bottom:1px solid var(--ligne);align-items:baseline}
.paliers b{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;color:var(--gris);font-weight:400;white-space:nowrap}
.paliers span{font-size:14px;color:var(--gris-clair)}
.paliers em{font-style:normal;color:var(--blanc);font-weight:500}

.guichet{border:1px solid var(--ligne-vive);padding:clamp(22px,3vw,32px)}
.champ{margin-top:18px}
.champ label{
  display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gris);margin-bottom:8px;
}
.champ input{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--ligne-vive);
  color:var(--blanc);font-family:var(--mono);font-size:15px;letter-spacing:.13em;
  text-transform:uppercase;padding:11px 0;transition:border-color .2s;
}
.champ input::placeholder{color:var(--ligne-vive)}
.champ input:focus{outline:none;border-bottom-color:var(--blanc)}
.valider{
  width:100%;margin-top:26px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;padding:16px;background:var(--blanc);color:var(--noir);transition:opacity .2s;
}
.valider:hover{opacity:.86}
.valider[disabled]{opacity:.45;cursor:not-allowed}
.retour{
  margin-top:14px;min-height:18px;font-family:var(--mono);font-size:10px;
  letter-spacing:.08em;color:var(--gris-clair);line-height:1.5;
}
.retour[data-type="erreur"]{color:var(--blanc)}
.mention-rgpd{margin-top:16px;font-size:11.5px;color:var(--gris);line-height:1.5}

/* =====================================================================
   PIED
   ===================================================================== */
.pied-page{padding:clamp(44px,5.5vw,74px) var(--marge) 28px;display:grid;grid-template-columns:1fr;gap:32px}
@media(min-width:800px){.pied-page{grid-template-columns:1.4fr 1fr 1fr}}
.pied-page h4{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gris);margin-bottom:14px;font-weight:400}
.pied-page ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.pied-page ul a{font-size:14px;color:var(--gris-clair);transition:color .18s}
.pied-page ul a:hover{color:var(--blanc)}
.signature-pied img{width:clamp(190px,26vw,320px);height:auto;opacity:.4}
.mentions{grid-column:1/-1;border-top:1px solid var(--ligne);padding-top:18px;margin-top:12px;display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between}

/* =====================================================================
   SÉQUENCE D'OUVERTURE + RÉVÉLATIONS
   ===================================================================== */
.entrer{opacity:0;transform:translateY(14px);animation:entrer .8s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes entrer{to{opacity:1;transform:none}}
.d1{animation-delay:.05s}.d2{animation-delay:.18s}.d3{animation-delay:.31s}
.d4{animation-delay:.44s}.d5{animation-delay:.6s}

.reveler{opacity:0;transform:translateY(15px);transition:opacity .7s ease,transform .7s ease}
.reveler.vu{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveler,.entrer{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* =====================================================================
   MOBILE
   ===================================================================== */
@media(max-width:860px){
  :root{--bande:0px}
  .bande{display:none}
  .burger{display:block}
  .nav{
    position:fixed;inset:58px 0 auto 0;flex-direction:column;align-items:flex-start;gap:0;
    background:var(--noir);border-bottom:1px solid var(--ligne);
    padding:6px var(--marge) 20px;transform:translateY(-120%);
    transition:transform .34s cubic-bezier(.4,0,.2,1);
  }
  body.menu-ouvert .nav{transform:none}
  .nav a{width:100%;padding:15px 0;border-bottom:1px solid var(--ligne)}
  .nav a:hover{border-bottom-color:var(--ligne)}
  .bouton-club{display:none}
  .accueil{min-height:auto}
  .accueil-actions{flex-direction:column}
  .accueil-actions .cta,.accueil-actions .cta-creux{justify-content:center}
  .ecriture{grid-template-columns:52px 1fr;gap:6px 12px}
  .ecriture .date{grid-column:2}
  .ecriture .objet{grid-column:1/-1}
  .ecriture .type{grid-column:1/-1;justify-self:start}
  .journal-liste{max-height:none}
  .journal-liste::after{display:none}
  .chapitre{grid-template-columns:40px 1fr;gap:14px}
  .chapitre .droite{grid-column:1/-1;flex-direction:row;align-items:center;flex-wrap:wrap}
  .vignette{max-width:none;flex:1;min-width:170px}
}

/* =====================================================================
   AJOUTS PHASE 2
   ===================================================================== */

/* Sélecteur de langue : ce sont maintenant de vrais liens (SEO + sans JS) */
.langue a{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  padding:5px 8px;color:var(--gris);
  transition:background .18s,color .18s;
}
.langue a[aria-current="true"]{background:var(--blanc);color:var(--noir)}
.langue a:hover{color:var(--blanc)}
.langue a[aria-current="true"]:hover{color:var(--noir)}

/* Galerie : jusqu'à 3 vues par pièce */
.galerie{display:flex;gap:6px;margin-bottom:14px}
.galerie .vue{
  flex:1;aspect-ratio:1;padding:0;overflow:hidden;
  border:1px solid var(--ligne);background:var(--noir);
  opacity:.5;transition:opacity .2s,border-color .2s;
}
.galerie .vue img{width:100%;height:100%;object-fit:cover}
.galerie .vue:hover{opacity:.8}
.galerie .vue.active{opacity:1;border-color:var(--blanc)}

/* La planche accueille désormais de vraies images */
.piece .planche img,.avant .planche img{width:100%;height:100%;object-fit:cover}

/* Texte du territoire venant de la base */
.territoire .propos > p:first-child{margin-top:0}


/* =====================================================================
   FOND MÉDIA DE L'ACCUEIL (vidéo ou image, réglé depuis l'admin)
   ===================================================================== */
.fond-media{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;opacity:.38;
  pointer-events:none;
}
/* Voile qui garantit la lisibilité du manifeste par-dessus le média */
.accueil::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg, var(--noir) 0%, rgba(10,10,11,.72) 46%, rgba(10,10,11,.30) 100%),
    linear-gradient(0deg, var(--noir) 0%, transparent 26%);
}
/* Sans média, pas de voile : la trame de fond suffit */
.accueil:not(:has(.fond-media))::after{display:none}

@media(prefers-reduced-motion:reduce){
  video.fond-media{display:none}
}
@media(max-width:860px){
  .fond-media{opacity:.24}
}

/* =====================================================================
   ARTISTES
   ===================================================================== */
.artistes{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  border-top:1px solid var(--ligne);border-left:1px solid var(--ligne);
}
.artiste{
  border-right:1px solid var(--ligne);border-bottom:1px solid var(--ligne);
  padding:20px;transition:background .3s;
}
.artiste:hover{background:var(--noir-2)}
.artiste .portrait{
  aspect-ratio:1;border:1px solid var(--ligne);background:var(--noir);
  overflow:hidden;display:flex;align-items:center;justify-content:center;margin-bottom:15px;
}
.artiste .portrait img{width:100%;height:100%;object-fit:cover}
.artiste .initiales{
  font-family:var(--display);font-variation-settings:'wdth' 118,'wght' 800;
  font-size:36px;color:var(--ligne-vive);letter-spacing:.02em;
}
.artiste h3{
  font-family:var(--display);font-variation-settings:'wdth' 106,'wght' 700;
  text-transform:uppercase;font-size:17px;line-height:1.05;
}
.artiste .phrase{margin-top:7px;font-size:13.5px;color:var(--gris-clair);line-height:1.45}
.artiste .ligne-bas{margin-top:14px;padding-top:11px;border-top:1px solid var(--ligne)}

/* =====================================================================
   ŒUVRES
   ===================================================================== */
.sous-entete{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  margin:clamp(26px,3.4vw,40px) 0 16px;
}
.tag-origine{
  font-family:var(--display);font-variation-settings:'wdth' 106,'wght' 700;
  text-transform:uppercase;font-size:15px;letter-spacing:.01em;
}

.oeuvres{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  border-top:1px solid var(--ligne);border-left:1px solid var(--ligne);
}
.oeuvre{
  border-right:1px solid var(--ligne);border-bottom:1px solid var(--ligne);
  display:flex;flex-direction:column;transition:background .3s;
}
.oeuvre:hover{background:var(--noir-2)}

.jaquette{
  aspect-ratio:1;position:relative;overflow:hidden;background:var(--noir);
  display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--ligne);
}
.jaquette img{width:100%;height:100%;object-fit:cover;transition:opacity .3s}
.jaquette.jouable:hover img{opacity:.55}
.jaquette .sans{
  font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--gris);
}
.jaquette .jouer{
  position:absolute;inset:0;margin:auto;width:52px;height:52px;
  border:1px solid var(--blanc);border-radius:50%;background:rgba(10,10,11,.6);
  color:var(--blanc);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .2s,transform .2s;
}
.jaquette .jouer:hover{background:var(--blanc);color:var(--noir);transform:scale(1.06)}
.jaquette .scelle{
  position:absolute;bottom:10px;left:10px;
  font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--ligne-vive);padding:3px 8px;color:var(--gris-clair);
  background:rgba(10,10,11,.7);
}
/* Le lecteur remplace la jaquette au clic */
.jaquette.lecture{aspect-ratio:16/9}
.jaquette iframe{width:100%;height:100%;border:0;display:block}

.corps-oeuvre{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.oeuvre .ligne-cote{display:flex;justify-content:space-between;gap:10px}
.oeuvre h3{
  font-family:var(--display);font-variation-settings:'wdth' 106,'wght' 700;
  text-transform:uppercase;font-size:16px;line-height:1.06;margin:10px 0 5px;
}
.oeuvre .par{font-size:13px;color:var(--gris-clair)}
.oeuvre .note-oeuvre{margin-top:9px;font-size:12.5px;color:var(--gris);line-height:1.5;font-style:italic}
.oeuvre .manque{margin-top:12px;padding-top:10px;border-top:1px solid var(--ligne);text-transform:none;letter-spacing:.04em}

/* ---------- Pistes ---------- */
.pistes{list-style:none;margin-top:14px;border-top:1px solid var(--ligne)}
.pistes .piste{
  display:grid;grid-template-columns:24px 1fr auto;gap:10px;align-items:center;
  padding:8px 0;border-bottom:1px solid var(--ligne);font-size:13px;
}
.pistes .piste:last-child{border-bottom:0}
.pistes .no{font-family:var(--mono);font-size:10px;color:var(--gris);font-variant-numeric:tabular-nums}
.pistes .titre-piste{color:var(--blanc)}
.pistes .inedit{
  font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
  font-style:normal;border:1px solid var(--ligne-vive);padding:1px 5px;color:var(--gris);margin-left:7px;
}
.pistes .piste.verrou .titre-piste{color:var(--gris)}
.pistes .cadenas{color:var(--ligne-vive);font-size:11px}
.pistes .lire-piste{
  width:26px;height:26px;border:1px solid var(--ligne-vive);background:none;color:var(--blanc);
  cursor:pointer;font-size:11px;line-height:1;transition:background .18s,color .18s,border-color .18s;
}
.pistes .lire-piste:hover{background:var(--blanc);color:var(--noir);border-color:var(--blanc)}
.pistes .lire-piste[aria-pressed="true"]{background:var(--blanc);color:var(--noir);border-color:var(--blanc)}

/* Lecteur audio maison, sous la piste en cours */
.lecteur-audio{grid-column:1/-1;padding:10px 0 4px}
.lecteur-audio audio{width:100%;height:34px;filter:grayscale(1) invert(.92)}

@media(max-width:600px){
  .oeuvres{grid-template-columns:1fr}
  .artistes{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}

/* =====================================================================
   PAGES DE DÉTAIL — artiste et œuvre
   ===================================================================== */
.lien-carte{display:block;color:inherit}
.artiste .lien-carte:hover h3,
.oeuvre .lien-carte:hover h3{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

.fil-ariane{margin-bottom:clamp(20px,3vw,32px)}
.fil-ariane a{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gris);transition:color .18s;
}
.fil-ariane a:hover{color:var(--blanc)}

.detail{padding-top:calc(58px + clamp(24px,4vw,48px))}
.detail-tete{display:grid;grid-template-columns:1fr;gap:clamp(26px,4vw,52px);align-items:start}
@media(min-width:900px){.detail-tete{grid-template-columns:minmax(260px,.85fr) 1.15fr}}

.detail-visuel{
  aspect-ratio:1;border:1px solid var(--ligne);background:var(--noir-2);
  position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;
}
.detail-visuel img{width:100%;height:100%;object-fit:cover;transition:opacity .3s}
.detail-visuel.avec-lecteur:hover img{opacity:.55}
.detail-visuel .sans{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gris)}
.detail-visuel .initiales{
  font-family:var(--display);font-variation-settings:'wdth' 118,'wght' 800;
  font-size:clamp(48px,8vw,86px);color:var(--ligne-vive);
}
.detail-visuel.rond{border-radius:0}
.detail-visuel .jouer{
  position:absolute;inset:0;margin:auto;width:60px;height:60px;
  border:1px solid var(--blanc);border-radius:50%;background:rgba(10,10,11,.62);
  color:var(--blanc);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .2s,transform .2s;
}
.detail-visuel .jouer:hover{background:var(--blanc);color:var(--noir);transform:scale(1.06)}
.detail-visuel .scelle{
  position:absolute;bottom:12px;left:12px;
  font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--ligne-vive);padding:4px 9px;color:var(--gris-clair);background:rgba(10,10,11,.72);
}
.detail-visuel.lecture{aspect-ratio:16/9}
.detail-visuel iframe{width:100%;height:100%;border:0;display:block}

.titre-detail{
  font-family:var(--display);font-variation-settings:'wdth' 108,'wght' 800;
  text-transform:uppercase;font-size:clamp(28px,5vw,58px);line-height:.96;letter-spacing:-.02em;
}
.sous-detail{margin-top:12px;font-size:clamp(15px,1.8vw,19px);color:var(--gris-clair);max-width:46ch}
.par-artistes a{border-bottom:1px solid var(--ligne-vive);transition:border-color .18s;color:var(--blanc)}
.par-artistes a:hover{border-bottom-color:var(--blanc)}

.detail-cotes{display:flex;flex-wrap:wrap;gap:8px 16px;margin-bottom:14px}
.detail-cotes .cote{border:1px solid var(--ligne);padding:4px 9px}

.detail-bio{
  margin-top:22px;padding-top:20px;border-top:1px solid var(--ligne);
  font-size:15px;color:var(--gris-clair);line-height:1.7;max-width:62ch;
}
.note-detail{font-style:italic;color:var(--gris)}

.detail-liens{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.detail-liens a{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--ligne-vive);padding:9px 15px;transition:background .18s,color .18s,border-color .18s;
}
.detail-liens a:hover{background:var(--blanc);color:var(--noir);border-color:var(--blanc)}

.pistes-detail{margin-top:26px}
.pistes-detail .piste{padding:11px 0;font-size:14px}

.appel-club{
  margin-top:24px;padding:16px 18px;border:1px solid var(--ligne-vive);
  font-size:13.5px;color:var(--gris-clair);line-height:1.6;
}
.appel-club a{
  display:inline-block;margin-top:8px;color:var(--blanc);
  border-bottom:1px solid var(--ligne-vive);transition:border-color .18s;
}
.appel-club a:hover{border-bottom-color:var(--blanc)}

/* ---------- Lien panier dans l'en-tête ---------- */
.lien-panier{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border:1px solid var(--ligne-vive);
  transition:border-color .18s,background .18s;
}
.lien-panier:hover{border-color:var(--blanc);background:var(--noir-2)}
.lien-panier .compteur{
  position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;
  background:var(--blanc);color:var(--noir);border-radius:9px;
  font-family:var(--mono);font-size:9.5px;line-height:17px;text-align:center;
  padding:0 4px;font-variant-numeric:tabular-nums;
}
.prendre.ajoute{background:var(--blanc)!important;color:var(--noir)!important;border-color:var(--blanc)!important}

/* =====================================================================
   APPEL AU REGISTRE — après les pièces
   ===================================================================== */
.bandeau-registre{
  border-bottom:1px solid var(--ligne);
  padding:clamp(40px,5.5vw,72px) var(--marge);
  background:var(--noir-2);
}
.bandeau-corps{
  display:grid;grid-template-columns:1fr;gap:clamp(24px,3.4vw,48px);align-items:center;
}
@media(min-width:860px){.bandeau-corps{grid-template-columns:1.4fr .6fr}}

.bandeau-registre h2{
  font-family:var(--display);font-variation-settings:'wdth' 108,'wght' 800;
  text-transform:uppercase;font-size:clamp(23px,3.6vw,42px);line-height:1;
  letter-spacing:-.02em;margin:10px 0 14px;max-width:20ch;
}
.bandeau-registre p{font-size:14.5px;color:var(--gris-clair);line-height:1.65;max-width:58ch}

.bandeau-action{
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
}
@media(min-width:860px){.bandeau-action{align-items:flex-end;text-align:right}}
.numero-libre{
  font-family:var(--display);font-variation-settings:'wdth' 118,'wght' 800;
  font-size:clamp(38px,6vw,64px);line-height:1;font-variant-numeric:tabular-nums;
}
.bandeau-action .cta{margin-top:10px}


/* =====================================================================
   EN-TÊTE MOBILE
   Le logo était rogné : la hauteur fixe de 58px ne laissait pas
   la place au bouton de langue et au menu sur une seule ligne.
   ===================================================================== */
@media(max-width:700px){
  .tete{height:auto;min-height:56px;padding:10px var(--marge)}
  .marque img{height:17px}
  .outils{gap:8px}
  .langue a{padding:5px 9px;font-size:9.5px}
  .bouton-club{padding:8px 12px;font-size:9.5px}
}
@media(max-width:420px){
  .tete{padding:9px 14px}
  .marque img{height:15px}
  .langue{display:none}          /* la langue reste dans le menu */
}

/* =====================================================================
   MOBILE — ZONES DE SÉCURITÉ
   Sur les téléphones à encoche, la barre d'état recouvrait l'en-tête :
   le logo et le menu se retrouvaient sous elle, inaccessibles sans
   faire défiler la page.
   ===================================================================== */
@media(max-width:860px){
  .tete{
    left:0; right:0;
    height:calc(58px + env(safe-area-inset-top));
    padding-top:env(safe-area-inset-top);
    padding-left:max(var(--marge), env(safe-area-inset-left));
    padding-right:max(var(--marge), env(safe-area-inset-right));
  }
  .nav{
    inset:calc(58px + env(safe-area-inset-top)) 0 auto 0;
    padding-left:max(var(--marge), env(safe-area-inset-left));
    padding-right:max(var(--marge), env(safe-area-inset-right));
  }

  /* Le contenu démarre sous l'en-tête, quelle que soit sa hauteur.
     La structure varie d'une page à l'autre : on vise le premier
     bloc utile dans tous les cas de figure. */
  .page > :first-child,
  .page > .section:first-of-type,
  .accueil,
  .detail,
  .legal,
  .contenu-page{ padding-top:calc(58px + env(safe-area-inset-top) + 20px); }

  /* L'accueil occupe tout l'écran : sa hauteur tient compte de la
     barre d'état pour ne pas déborder. */
  .accueil{ min-height:calc(100svh - env(safe-area-inset-top)); }

  /* Les marges latérales respectent les bords arrondis */
  .page{
    margin-left:0;
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);
  }

  /* Le menu ouvert ne doit pas dépasser l'écran */
  body.menu-ouvert .nav{ max-height:calc(100svh - 58px - env(safe-area-inset-top)); overflow-y:auto; }

  /* Rien ne déborde horizontalement */
  html, body{ overflow-x:hidden; max-width:100%; }
}

@media(max-width:520px){
  .tete{ gap:12px; }
  .marque img{ height:16px; }
  .langue a{ padding:5px 7px; font-size:9px; }
  .burger{ margin-left:2px; }
}