/* SEYMR® — feuille unique · v3
   Noir · Ivoire · Or. Aucun filtre sur les visuels. Aucun rognage.
   Échelle fluide de l'iPhone au téléviseur. */

:root{
  color-scheme:dark light;

  /* ── SOCLE. Les noms disent la matière, la valeur dit le rôle.
     « noir » est la surface de base, « ivoire » est l'encre de base.
     Le régime clair renverse les valeurs sans toucher aux règles. ── */
  --fond-rgb:10 10 11;             /* surface de base, en triplet */
  --encre-rgb:239 234 224;         /* encre de base, en triplet */

  --noir:#0A0A0B; --noir-2:#101011; --surface:#141416; --surface-h:#1B1B1E;
  /* --ivoire-3 relevé de #726D63 (3,85:1) à #948E81 (5,84:1 sur --noir-2).
     Le seuil AA du petit corps est 4,5:1 : l'ancienne valeur ne passait pas
     et disparaissait en plein jour sur tablette comme sur téléviseur. */
  --ivoire:#EFEAE0; --ivoire-2:#B4AEA2; --ivoire-3:#948E81;
  --ivoire-4:#6E695F;            /* filets et décor : jamais de texte lisible */
  --blanc:#FAFAF7;
  --or:#C9A227; --or-clair:#E3CB86; --or-profond:#8F721A;
  --or-rgb:201 162 39;
  --plaque:#F4F1EA;              /* la feuille sous l'œuvre : toujours claire */
  --alerte:#B4553F;

  --hair:rgb(var(--encre-rgb) / .10);
  --hair-fort:rgb(var(--encre-rgb) / .22);
  --hair-or:rgb(var(--or-rgb) / .30);
  --grain-mode:screen; --grain-op:.03;
  --ombre-plaque:0 0 0 1px rgb(var(--fond-rgb) / .12);

  --display:'Bodoni Moda',"Times New Roman",serif;
  --body:'Cormorant Garamond',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,"SFMono-Regular",Menlo,monospace;
  --e:cubic-bezier(.16,1,.3,1);

  --maxw:1320px;
  --gut:clamp(1.25rem,4.5vw,4rem);
  --gap:clamp(1.5rem,2.6vw,2.75rem);
  --sec:clamp(4.5rem,11vh,8.5rem);
  --nav-h:68px;                  /* hauteur du bandeau, sert d'ancrage au collant */
  --mesure:66ch;                 /* longueur de ligne maximale, tous écrans */
  --respire:clamp(2.75rem,6vh,4.75rem);  /* chapô vers grille */

  --t-corps:clamp(1rem,.28vw + .95rem,1.2rem);
  --t-petit:clamp(.8rem,.14vw + .77rem,.92rem);
  --t-data:clamp(.78rem,.12vw + .75rem,.9rem);
  --t-label:clamp(.72rem,.1vw + .7rem,.84rem);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;border-radius:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:6rem}
body{
  background:var(--noir);color:var(--ivoire);
  font-family:var(--body);font-size:var(--t-corps);line-height:1.66;
  -webkit-font-smoothing:antialiased;
}
img,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--or);color:var(--noir)}
:focus-visible{outline:3px solid var(--or);outline-offset:4px}

body::after{
  content:'';position:fixed;inset:0;z-index:9990;pointer-events:none;opacity:var(--grain-op);
  mix-blend-mode:var(--grain-mode);background-size:180px;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.mono{font-family:var(--mono)}
.eyebrow{
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.26em;text-transform:uppercase;
  color:var(--or);display:block;margin-bottom:1rem;
}

/* ── NAVIGATION ──────────────────────────────── */
.nav{
  position:fixed;inset:0 0 auto;z-index:800;min-height:68px;display:flex;align-items:center;
  border-bottom:1px solid transparent;transition:background .4s var(--e),border-color .4s;
}
.nav.fixe{background:rgb(var(--fond-rgb) / .90);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom-color:var(--hair)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%}
.marque{font-family:var(--display);font-weight:700;font-size:clamp(1.05rem,.5vw + .95rem,1.35rem);letter-spacing:.26em;padding:.75rem .25rem;display:inline-block}
.marque sup{font-size:.45em;vertical-align:.95em;color:var(--or)}
.nav-l{display:flex;gap:clamp(.75rem,1.9vw,2.4rem);align-items:center}
.nav-l a{
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ivoire-2);position:relative;transition:color .28s;
  min-height:44px;display:inline-flex;align-items:center;padding:0 .15rem;
}
.nav-l a::after{content:'';position:absolute;left:0;bottom:14px;width:0;height:1px;background:var(--or);transition:width .35s var(--e)}
.nav-l a:hover{color:var(--blanc)}
.nav-l a:hover::after{width:100%}
.lang{display:flex;align-items:center;gap:.2rem;font-family:var(--mono);font-size:var(--t-label);letter-spacing:.1em}
.lang a{color:var(--ivoire-3);min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--hair)}
.lang a:hover{color:var(--blanc);border-color:var(--hair-or)}
.lang a.on{color:var(--noir);background:var(--or);border-color:var(--or)}
.burger{display:none;width:48px;height:48px;background:none;border:1px solid var(--hair);flex-direction:column;gap:5px;align-items:center;justify-content:center;cursor:pointer}
.burger span{width:18px;height:1px;background:var(--ivoire);transition:.3s var(--e)}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.tiroir{position:fixed;inset:0;z-index:780;background:var(--noir);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;opacity:0;pointer-events:none;transition:opacity .35s var(--e)}
.tiroir.ouvert{opacity:1;pointer-events:auto}
.tiroir a{font-family:var(--display);font-size:clamp(1.5rem,6.5vw,2.2rem);font-weight:500;padding:1rem 2rem;min-height:56px;display:flex;align-items:center;text-transform:uppercase;letter-spacing:.05em}
.tiroir a:hover{color:var(--or)}
@media(max-width:900px){.nav-l{display:none}.burger{display:flex}}

/* ── HERO ────────────────────────────────────── */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--noir)}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media video,.hero-media img,#champ-gl{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
#champ-gl{opacity:0;transition:opacity 1.4s ease}
#champ-gl.vu{opacity:1}
.hero::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgb(var(--fond-rgb) / .68) 0%,rgb(var(--fond-rgb) / .12) 26%,rgb(var(--fond-rgb) / .32) 58%,var(--noir) 97%)}
.hero-c{position:relative;z-index:2;width:100%;padding-bottom:clamp(2.5rem,8vh,5.5rem);padding-top:6rem}
.hero h1{
  font-family:var(--display);font-weight:800;line-height:.84;letter-spacing:.004em;
  font-size:clamp(3.2rem,14vw,11rem);color:var(--blanc);
}
.hero h1 sup{font-size:.16em;vertical-align:.95em;color:var(--or);font-weight:400}
.hero-sous{
  margin-top:1.5rem;max-width:46ch;font-size:clamp(1.05rem,.5vw + .95rem,1.4rem);
  color:var(--ivoire);line-height:1.5;text-wrap:balance;
}
.hero-sous strong{color:var(--blanc);font-weight:500}
.hero-etat{
  display:flex;flex-wrap:wrap;gap:.9rem clamp(1.2rem,3vw,2.8rem);margin-top:2rem;padding-top:1.3rem;
  border-top:1px solid var(--hair-or);font-family:var(--mono);font-size:var(--t-label);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ivoire-2);
}
.hero-etat b{color:var(--or);font-weight:500}

/* ── SECTIONS ────────────────────────────────── */
section{padding:var(--sec) 0;border-top:1px solid var(--hair)}
.tete{margin-bottom:clamp(2rem,5vh,3.4rem)}
.part{
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.3em;color:var(--or);
  display:block;margin-bottom:.9rem;text-transform:uppercase;
}
h2{
  font-family:var(--display);font-weight:600;font-size:clamp(1.7rem,4.2vw,3.1rem);
  line-height:1.06;letter-spacing:.04em;text-transform:uppercase;text-wrap:balance;
}
h3{font-family:var(--display);font-weight:600;font-size:clamp(1.2rem,2vw,1.6rem);line-height:1.15}
.chapo{max-width:var(--mesure);color:var(--ivoire-2);font-size:var(--t-corps);margin-top:1rem;line-height:1.72;text-wrap:pretty}
/* Le chapô collait à la grille : plus aucune marge basse n'était déclarée.
   La respiration est désormais portée par l'élément suivant, quel qu'il soit. */
.chapo + .grille,
.chapo + .ops,
.chapo + .bande,
.chapo + .agenda,
.chapo + .terminal{margin-top:var(--respire)}

.rev{opacity:0;transform:translateY(18px);transition:opacity .8s var(--e),transform .8s var(--e)}
.rev.vu{opacity:1;transform:none}

/* ── OPÉRATEURS ──────────────────────────────── */
.ops{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
@media(max-width:1000px){.ops{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.ops{gap:1rem}}
.op{border:1px solid var(--hair);background:var(--noir-2);transition:border-color .35s var(--e)}
.op:hover{border-color:var(--hair-or)}
.op-g{aspect-ratio:1;background:var(--plaque);display:grid;place-items:center;padding:14%}
.op-g img{width:100%;height:100%;object-fit:contain}
.op-g.vide{background:var(--surface);border-bottom:1px solid var(--hair);padding:1rem}
.op-g.vide span{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.16em;color:var(--ivoire-3);text-transform:uppercase;text-align:center;line-height:1.7}
.op-t{padding:1.1rem 1.15rem 1.3rem}
.op-n{font-family:var(--mono);font-size:var(--t-data);letter-spacing:.18em;color:var(--blanc)}
.op-f{font-family:var(--body);font-size:var(--t-petit);color:var(--ivoire-2);margin-top:.3rem;line-height:1.4}
.op-c{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;color:var(--or);margin-top:.65rem}

.bande{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.4rem 0}
.bande span{
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;padding:.5rem .75rem;
  border:1px solid var(--hair);color:var(--ivoire-3);
}
.bande span.actif{border-color:var(--or);color:var(--or-clair);background:rgb(var(--or-rgb) / .08)}

/* ── GRILLES DE FICHES ───────────────────────── */
.grille{display:grid;gap:var(--gap)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g3,.g4{grid-template-columns:1fr}}

.carte{
  background:var(--noir-2);border:1px solid var(--hair);
  display:flex;flex-direction:column;position:relative;
  transition:border-color .4s var(--e),background .4s var(--e),transform .5s var(--e);
}
.carte:hover{border-color:var(--hair-or);background:var(--surface);transform:translateY(-3px)}
.carte-v{
  background:var(--plaque);aspect-ratio:4/5;display:grid;place-items:center;
  padding:clamp(.9rem,2vw,1.6rem);overflow:hidden;
}
.carte-v img{width:100%;height:100%;object-fit:contain;transition:transform 1s var(--e)}
.carte:hover .carte-v img{transform:scale(1.03)}
.carte-t{padding:1.25rem 1.25rem 1.4rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.carte-t .cat{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;color:var(--ivoire-3)}
.carte-t .nom{font-family:var(--display);font-size:clamp(1.1rem,1.3vw,1.32rem);font-weight:600;letter-spacing:.03em;text-transform:uppercase;line-height:1.15}
.carte-t .spec{font-family:var(--mono);font-size:var(--t-data);color:var(--ivoire-2);line-height:1.6}
.carte-t .fin{
  margin-top:auto;padding-top:1rem;display:flex;justify-content:space-between;align-items:baseline;
  gap:1rem;border-top:1px solid var(--hair);font-family:var(--mono);font-size:var(--t-data);letter-spacing:.06em;
}
.carte-t .fin .n{color:var(--or)}
.carte-t .fin .p{color:var(--blanc)}

/* ── PIÈCE ───────────────────────────────────── */
.piece{padding-top:clamp(7rem,13vh,10rem);padding-bottom:var(--sec)}
.piece-haut{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,4.5vw,4.5rem);align-items:start}
@media(max-width:980px){.piece-haut{grid-template-columns:1fr;gap:2.5rem}}
.piece-med{display:flex;flex-direction:column;gap:var(--gap)}
.plaque{background:var(--plaque);padding:clamp(1rem,2.4vw,2.2rem);border:1px solid var(--hair);display:grid;place-items:center}
.plaque img{width:100%;height:auto;object-fit:contain;max-height:78svh}
.plaque.vide{background:var(--surface);aspect-ratio:4/5}
.plaque.vide span{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;color:var(--ivoire-3)}
.piece h1{font-family:var(--display);font-weight:700;font-size:clamp(1.9rem,4.4vw,3.2rem);line-height:1.05;letter-spacing:.035em;text-transform:uppercase;text-wrap:balance}
.piece-sous{font-family:var(--mono);font-size:var(--t-data);letter-spacing:.18em;text-transform:uppercase;color:var(--or);margin-top:.9rem}
.piece-txt{max-width:var(--mesure)}
.piece-txt p{margin-top:1.25rem;color:var(--ivoire-2);line-height:1.78;text-wrap:pretty}
.piece-txt p:first-child{color:var(--ivoire)}
/* Cible tactile : le libellé seul ne suffisait pas et le bouton frôlait le bord.
   Le retrait négatif conserve l'alignement optique sur la colonne. */
.retour{
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;
  color:var(--ivoire-3);min-height:48px;min-width:48px;display:inline-flex;align-items:center;
  padding:0 1rem;margin-left:-1rem;border:1px solid transparent;
  transition:color .28s,border-color .28s;
}
.retour:hover{color:var(--or)}
@media(max-width:900px){
  .retour{margin-left:0;border-color:var(--hair);padding:0 1.1rem}
  .retour:hover,.retour:focus-visible{border-color:var(--hair-or)}
}

.releve{margin-top:2.2rem;border-top:1px solid var(--hair-or)}
.releve-t{
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.26em;text-transform:uppercase;
  color:var(--or);padding:1rem 0 .4rem;display:block;
}
/* La largeur en pourcentage faisait dériver la colonne des valeurs d'un écran
   à l'autre. Chasse fixe, gouttière fixe, chiffres tabulaires : la colonne
   tombe au même endroit du téléphone au téléviseur. */
.releve table{width:100%;border-collapse:collapse;table-layout:fixed}
.releve th,.releve td{
  font-family:var(--mono);font-size:var(--t-data);line-height:1.7;text-align:left;
  padding:.8rem 0;border-bottom:1px solid var(--hair);vertical-align:baseline;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
  overflow-wrap:anywhere;
}
.releve th{
  color:var(--ivoire-3);font-weight:400;letter-spacing:.07em;
  width:clamp(9.5rem,38%,15rem);padding-right:1.5rem;
}
.releve td{color:var(--ivoire)}
@media(max-width:560px){
  .releve table,.releve tbody,.releve tr,.releve th,.releve td{display:block;width:auto}
  .releve tr{padding:.75rem 0;border-bottom:1px solid var(--hair)}
  .releve th,.releve td{border:0;padding:0}
  .releve th{margin-bottom:.2rem}
}

.verif{
  margin-top:1.5rem;border:1px solid var(--hair);padding:1.1rem 1.2rem;
  font-family:var(--mono);font-size:var(--t-data);line-height:1.9;color:var(--ivoire-2);
  word-break:break-all;position:relative;overflow:hidden;
}
.verif b{color:var(--or);font-weight:500;letter-spacing:.2em;text-transform:uppercase;font-size:var(--t-label);display:block;margin-bottom:.5rem}
.verif a{color:var(--or-clair);border-bottom:1px solid var(--hair-or);display:inline-block}
.verif a:hover{color:var(--blanc);border-bottom-color:var(--blanc)}
.verif::before{content:'';position:absolute;left:0;top:0;width:100%;height:1px;
  background:linear-gradient(90deg,transparent,var(--or),transparent);animation:scan 6s linear infinite}
@keyframes scan{0%{transform:translateY(0)}100%{transform:translateY(var(--h,160px))}}

.acq{margin-top:2.2rem;padding-top:1.5rem;border-top:1px solid var(--hair-or);display:flex;flex-wrap:wrap;gap:1.2rem 2rem;align-items:center;justify-content:space-between}
.acq-p{font-family:var(--mono);font-size:clamp(1.05rem,1.2vw,1.3rem);letter-spacing:.03em;color:var(--blanc)}
.acq-p small{display:block;font-size:var(--t-label);text-transform:uppercase;color:var(--ivoire-3);margin-top:.45rem;letter-spacing:.14em}
.actions{display:flex;flex-wrap:wrap;gap:.75rem}
.bouton{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;
  padding:1rem 1.8rem;min-height:48px;border:1px solid var(--hair-fort);color:var(--ivoire);
  transition:background .32s var(--e),border-color .32s,color .32s;
}
.bouton:hover{background:var(--ivoire);border-color:var(--ivoire);color:var(--noir)}
.bouton.or{border-color:var(--or);color:var(--noir);background:var(--or)}
.bouton.or:hover{background:var(--or-clair);border-color:var(--or-clair)}

/* ── DOCTRINE ────────────────────────────────── */
.doctrine{max-width:64ch}
.doctrine p{margin-top:1.3rem;color:var(--ivoire-2);text-wrap:pretty}
.doctrine p.fort{color:var(--ivoire)}
.cite{
  font-family:var(--display);font-weight:500;font-size:clamp(1.4rem,3.2vw,2.3rem);
  line-height:1.2;letter-spacing:.03em;color:var(--or-clair);max-width:24ch;text-transform:uppercase;
}

/* Les points d’intérêt sont retirés : leur position tenait dans un
   attribut style= que la politique de sécurité écartait. */

/* ── TERMINAL ────────────────────────────────── */
.terminal{border:1px solid var(--hair-or);padding:clamp(1.6rem,3.5vw,2.8rem);max-width:720px;background:var(--noir-2)}
.terminal .l{font-family:var(--mono);font-size:var(--t-data);line-height:2;color:var(--ivoire-3);letter-spacing:.06em}
.terminal .l b{color:var(--or);font-weight:400}
.terminal h3{margin:1.4rem 0 .6rem;text-transform:uppercase;letter-spacing:.04em}
.terminal>p{color:var(--ivoire-2);font-size:var(--t-petit);line-height:1.72;max-width:56ch}
/* Qui peut demander : la phrase manquait, le visiteur ne savait pas s'il était concerné. */
.terminal .eligible{
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.06em;line-height:1.8;
  color:var(--ivoire-3);margin-top:1.1rem;padding-left:1rem;border-left:1px solid var(--hair-or);
}

.terminal form{display:grid;gap:.75rem;margin-top:1.75rem}
@media(min-width:620px){.terminal form{grid-template-columns:1fr 1fr}}
.terminal .champ{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.terminal label{
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;
  color:var(--ivoire-3);
}
.terminal label .req{color:var(--or)}
.terminal input{
  width:100%;background:transparent;border:1px solid var(--hair-fort);
  color:var(--ivoire);font-family:var(--mono);font-size:var(--t-data);padding:1rem 1.1rem;min-height:52px;
}
/* Capitales sur l'amorce : l'interface ne descend jamais en bas-de-casse ailleurs. */
.terminal input::placeholder{color:var(--ivoire-3);text-transform:uppercase;letter-spacing:.14em;opacity:1}
.terminal input:focus{outline:none;border-color:var(--or);background:rgb(var(--or-rgb) / .045)}
.terminal input:user-invalid{border-color:var(--alerte)}
.terminal button{
  grid-column:1/-1;background:var(--or);border:1px solid var(--or);color:var(--noir);cursor:pointer;min-height:56px;
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;padding:1rem 1.6rem;
  transition:background .3s,color .3s;
}
.terminal button:hover{background:var(--or-clair)}
.terminal button[disabled]{background:transparent;color:var(--or);cursor:default}
.terminal .note{
  grid-column:1/-1;font-family:var(--mono);font-size:var(--t-label);color:var(--ivoire-3);
  margin-top:.35rem;line-height:1.85;
}
.terminal .note b{color:var(--or);font-weight:400}
.terminal .note[data-etat=fait]{color:var(--or-clair)}

/* ── AGENDA ──────────────────────────────────── */
.agenda{border-top:1px solid var(--hair-or);max-width:820px}
.agenda div{display:grid;grid-template-columns:1fr auto;gap:.4rem 2rem;padding:1.3rem 0;border-bottom:1px solid var(--hair);font-family:var(--mono);font-size:var(--t-data)}
.agenda .n{color:var(--blanc);text-transform:uppercase;letter-spacing:.1em}
.agenda .l{color:var(--ivoire-3);display:block;margin-top:.3rem;text-transform:none;letter-spacing:.04em}
.agenda .d{color:var(--or);text-align:right;white-space:nowrap}
@media(max-width:600px){.agenda div{grid-template-columns:1fr}.agenda .d{text-align:left;margin-top:.5rem}}

/* ── PIED ────────────────────────────────────── */
footer{border-top:1px solid var(--hair);padding:var(--sec) 0 3rem;font-family:var(--mono)}
.pied{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(2rem,4vw,3rem)}
@media(max-width:950px){.pied{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.pied{grid-template-columns:1fr}}
.pied h5{font-size:var(--t-label);letter-spacing:.24em;text-transform:uppercase;color:var(--or);margin-bottom:1rem;font-weight:400}
.pied a,.pied p{display:block;font-size:var(--t-data);line-height:1.6;color:var(--ivoire-2)}
.pied a{min-height:44px;display:flex;align-items:center}
.pied a:hover{color:var(--or-clair)}
.pied .sig{font-family:var(--display);font-size:1.3rem;letter-spacing:.24em;color:var(--blanc);margin-bottom:1rem}
.bas{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;gap:.9rem 2rem;justify-content:space-between;font-size:var(--t-label);letter-spacing:.1em;color:var(--ivoire-3);text-transform:uppercase;line-height:1.7}
.clos{font-family:var(--display);letter-spacing:.3em;color:var(--or);text-transform:uppercase}

/* ── TÉLÉVISEUR ──────────────────────────────── */
@media(min-width:1800px){
  :root{--maxw:1560px;--t-corps:1.32rem;--t-petit:1.02rem;--t-data:1rem;--t-label:.95rem;--gap:2.75rem}
  .hero h1{font-size:12rem}
}
@media(min-width:2560px){
  :root{--maxw:1900px;--t-corps:1.55rem;--t-petit:1.2rem;--t-data:1.15rem;--t-label:1.05rem;--gap:3.25rem}
}
@media(hover:none) and (pointer:coarse){.carte:hover{transform:none}}
.carte:focus-within{border-color:var(--or);outline:3px solid var(--or);outline-offset:3px}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .rev{opacity:1;transform:none}
  #champ-gl{opacity:1}
}

/* ══════════════════════════════════════════════════════════════
   CORRECTIFS v3.1 — ergonomie, tenue de colonne, accessibilité
   ══════════════════════════════════════════════════════════════ */

/* ── 1. En-tête : densité sur téléphone ──────────────────────
   Le sélecteur de langue et le bouton de menu formaient un bloc
   compact où le doigt hésitait. Sous 560 px la bascule FR/EN
   descend dans le tiroir, l'en-tête ne garde que la marque et
   le menu. */
@media(max-width:560px){
  .nav .lang{display:none}
  .marque{letter-spacing:.18em}
  .nav .wrap{gap:.5rem}
}
.tiroir .lang{margin-top:1.75rem;gap:.4rem}
.tiroir .lang a{min-width:64px;min-height:52px;font-size:var(--t-data);letter-spacing:.16em}
@media(min-width:561px){.tiroir .lang{display:none}}
.burger{flex-shrink:0}

/* ── 2. Sommaire des parties ─────────────────────────────────
   La page annonçait « PARTIE V » alors que la navigation ne
   portait que quatre entrées. Le sommaire rend les cinq parties
   visibles et atteignables. */
.sommaire{
  border-top:1px solid var(--hair-or);
  padding:1.1rem 0;margin:0;
}
.sommaire ol{
  list-style:none;display:flex;flex-wrap:wrap;
  gap:.35rem clamp(.9rem,2.4vw,2.4rem);align-items:center;
}
.sommaire a{
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ivoire-3);min-height:44px;display:inline-flex;align-items:center;gap:.6rem;
  transition:color .28s;
}
.sommaire a:hover,.sommaire a:focus-visible{color:var(--blanc)}
.sommaire .r{color:var(--or);font-size:.86em;letter-spacing:.1em}
.sommaire .t{font-family:var(--mono)}
@media(max-width:620px){
  .sommaire ol{flex-direction:column;align-items:flex-start;gap:0}
  .sommaire li{width:100%;border-bottom:1px solid var(--hair)}
  .sommaire li:last-child{border-bottom:0}
  .sommaire a{width:100%;justify-content:flex-start;min-height:48px}
}

/* ── 3. Corpus : mise en avant des formats longs ─────────────
   Une feuille en largeur enfermée dans un cadre 4/5 se réduit à
   une bande au milieu de deux réserves. Les œuvres en format
   long prennent deux colonnes et un cadre à leur proportion. */
.grille.g3{grid-auto-flow:dense}
@media(min-width:1101px){
  .carte--long{grid-column:span 2}
  .carte--long .carte-v{aspect-ratio:16/10;padding:clamp(1.2rem,2.4vw,2.4rem)}
  .carte--long .carte-t .nom{font-size:clamp(1.25rem,1.6vw,1.6rem)}
  .carte--long .carte-t{padding:1.5rem 1.5rem 1.6rem}
}
@media(min-width:621px) and (max-width:1100px){
  .carte--long{grid-column:span 2}
  .carte--long .carte-v{aspect-ratio:16/10}
}
@media(max-width:620px){
  .carte--long .carte-v{aspect-ratio:4/3}
}

/* ── 4. Fiche pièce : la colonne visuelle ne décroche plus ───
   Le relevé se lisait sur une demi-page noire, le visuel étant
   déjà sorti du champ. La colonne média tient au-dessus du pli
   tant que la colonne de texte défile. */
@media(min-width:981px){
  .piece-med:has(> .plaque:only-child),
  .piece-med--seul,
  .piece-med--galerie{
    position:sticky;top:calc(var(--nav-h) + 1.5rem);align-self:start;
    max-height:calc(100svh - var(--nav-h) - 3rem);
  }
  /* La planche unique ne doit jamais déborder de sa fenêtre collante. */
  .piece-med:has(> .plaque:only-child) > .plaque img,
  .piece-med--seul > .plaque img{max-height:calc(100svh - var(--nav-h) - 8rem)}
  .piece-med--galerie{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:.85rem}
  .piece-med--galerie .plaque{min-height:0;overflow:hidden}
  .piece-med--galerie .plaque img{height:100%;max-height:none}
}

/* Galerie : une planche à la fois, la série en vignettes.
   Huit visuels empilés faisaient huit écrans de défilement. */
.piece-med--galerie .plaque{display:none}
.piece-med--galerie .plaque.actif{display:grid}
.vignettes{
  display:flex;gap:.5rem;overflow-x:auto;overscroll-behavior-x:contain;
  padding-bottom:.35rem;scrollbar-width:thin;scrollbar-color:var(--ivoire-4) transparent;
}
.vignettes button{
  flex:0 0 auto;width:74px;height:74px;padding:7px;cursor:pointer;
  background:var(--plaque);border:1px solid var(--hair);
  display:grid;place-items:center;opacity:.5;
  transition:opacity .3s var(--e),border-color .3s var(--e);
}
.vignettes button img{width:100%;height:100%;object-fit:contain}
.vignettes button:hover{opacity:.85}
.vignettes button[aria-current=true]{opacity:1;border-color:var(--or)}
.vignettes-c{
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.18em;
  color:var(--ivoire-3);align-self:center;padding-left:.4rem;white-space:nowrap;
}
@media(max-width:980px){
  .piece-med--galerie{display:flex;flex-direction:column;gap:1rem}
  .vignettes button{width:62px;height:62px}
}

/* ── 5. Longueur de ligne bornée sur très grand écran ────────
   Sans plafond, une ligne de texte balayait 1 900 px sur
   téléviseur. Toutes les colonnes de lecture sont bornées. */
.doctrine,.terminal>p,.piece-txt,.chapo{max-width:min(100%,var(--mesure))}
@media(min-width:1800px){
  :root{--mesure:64ch}
}

/* ── 6. Corps de texte : interlignage ────────────────────────*/
.doctrine p{line-height:1.78}
.terminal .l{line-height:2.05}

/* ── 7. Focus visible sur fond clair ─────────────────────────*/
.plaque :focus-visible,.vignettes :focus-visible,.galerie-cmd :focus-visible{outline:3px solid var(--or-profond);outline-offset:2px}

/* ── 9. Texte de remplacement lisible sur les fonds clairs ───
   Une image absente affichait son attribut alt en ivoire sur
   plaque crème : rien n'était visible. Toute surface claire
   passe désormais son texte en noir. */
.plaque,.carte-v,.op-g,.vignettes button{
  color:var(--noir);font-family:var(--mono);font-size:var(--t-label);line-height:1.6;
}

/* ══════════════════════════════════════════════════════════════
   CORRECTIFS v3.2
   ══════════════════════════════════════════════════════════════ */

/* ── 1. Ce que la politique de sécurité supprimait ───────────
   Content-Security-Policy porte style-src 'self' sans
   'unsafe-inline'. Le navigateur écarte donc tout attribut
   style=. L'en-tête y perdait sa disposition en ligne : la
   bascule FR/EN et le bouton de menu, privés de leur conteneur
   souple, se recouvraient sur téléphone. Cent dix déclarations
   sont rapatriées ici. */
.nav-cmd{display:flex;gap:.6rem;align-items:center;flex-shrink:0}
.hero{border-top:0;padding:0}
.piece-haut{margin-top:1.6rem}
.eyebrow--h{margin-top:2rem}
.cite--fin{margin-top:3rem}
.lien-or{color:var(--or-clair);border-bottom:1px solid var(--hair-or)}
.lien-or:hover{color:var(--blanc);border-bottom-color:var(--blanc)}

/* ── 2. En-tête : zones sûres et équilibre sur iPhone ────────
   viewport-fit=cover fait passer la page sous l'encoche et sous
   la barre d'accueil. Le bandeau descend de la hauteur mesurée
   de l'encoche, les gouttières s'écartent en paysage, et la
   hauteur réelle repart dans --nav-h. Trois zones, une seule
   ligne, aucun recouvrement. */
.nav{
  padding-top:env(safe-area-inset-top,0px);
  min-height:calc(68px + env(safe-area-inset-top,0px));
}
.wrap{
  padding-left:max(var(--gut),env(safe-area-inset-left,0px));
  padding-right:max(var(--gut),env(safe-area-inset-right,0px));
}
.tiroir{
  padding:calc(env(safe-area-inset-top,0px) + 4.5rem) 1.25rem
          calc(env(safe-area-inset-bottom,0px) + 2.5rem);
  justify-content:center;
}
.marque{white-space:nowrap}
.hero-c{padding-top:calc(var(--nav-h) + 2.5rem)}
@media(max-width:560px){
  .nav{min-height:calc(60px + env(safe-area-inset-top,0px))}
  .nav .wrap{gap:.75rem}
  .marque{font-size:1.06rem;padding:.55rem .1rem}
  .burger{width:44px;height:44px}
}
/* Paysage court : le héro se resserre au lieu de passer sous le bandeau. */
@media(max-height:540px) and (orientation:landscape){
  .hero{min-height:auto;padding-bottom:2rem}
  .hero-c{padding-top:calc(var(--nav-h) + 1.25rem);padding-bottom:1.5rem}
  .hero h1{font-size:clamp(2.4rem,9vw,4.5rem)}
  .hero-sous{margin-top:.9rem;font-size:1.02rem}
  .hero-etat{margin-top:1.1rem;padding-top:.9rem}
}
footer{padding-bottom:calc(3rem + env(safe-area-inset-bottom,0px))}

/* ── 3. Partie IV · Présence ─────────────────────────────────
   L'affiliation était portée par le seul graphe de données, donc
   lisible des moteurs et d'aucun visiteur. Elle passe à l'écran,
   dans le chapô, et l'agenda porte seul le calendrier. */
.agenda--fort{margin-top:clamp(2rem,4.5vh,3.2rem);border-top-color:var(--or)}
.agenda--fort div{padding:1.5rem 0 1.5rem 1.45rem;position:relative}
.agenda--fort div::before{
  content:'';position:absolute;left:0;top:1.75rem;width:6px;height:6px;background:var(--or);
}
.agenda--fort .n{font-size:clamp(.95rem,1.4vw,1.14rem);letter-spacing:.12em}
.agenda--fort .l{font-size:var(--t-data);margin-top:.45rem}
.agenda--fort .d{letter-spacing:.1em}

/* ── 4. Galerie longue ───────────────────────────────────────
   Le tirage papier passe de huit à dix-huit planches. La bande
   défile, le rang affiché est écrit, deux commandes avancent
   d'une planche. Les vignettes sont servies en 170 px : les
   dix-huit pesaient trois mégaoctets en pleine définition. */
.galerie-pied{display:flex;align-items:center;gap:.75rem;min-width:0}
.galerie-pied .vignettes{flex:1 1 auto;min-width:0}
.galerie-cmd{flex:0 0 auto;display:flex;align-items:center;gap:.4rem}
.galerie-cmd button{
  width:38px;height:38px;background:none;border:1px solid var(--hair-fort);
  color:var(--ivoire-2);cursor:pointer;font-family:var(--mono);font-size:.8rem;
  display:grid;place-items:center;transition:border-color .3s var(--e),color .3s var(--e);
}
.galerie-cmd button:hover{border-color:var(--or);color:var(--or)}
.vignettes-c{padding:0 .1rem 0 .5rem}
@media(max-width:560px){
  .galerie-pied{flex-wrap:wrap}
  .galerie-pied .vignettes{flex:1 0 100%;order:1}
  .galerie-cmd{order:2;margin-left:auto}
  .vignettes-c{padding-left:.2rem}
}

/* ── 5. Planches en hauteur ──────────────────────────────────
   Les nouvelles planches du tirage papier descendent à 0,56 de
   proportion. Sans plafond, une seule occupait deux écrans. */
.piece-med--galerie .plaque img{max-height:min(78svh,720px)}
@media(min-width:981px){
  .piece-med--galerie .plaque img{max-height:none}
}

/* ── 6. Rang du titre sur les pages de section ───────────────
   Corpus, Éditions, Maison et Certification portaient leur titre
   en h2, sans h1 au-dessus. Le rang est corrigé, le dessin reste
   celui de h2 : aucune page ne change d'aspect. */
.tete h1{
  font-family:var(--display);font-weight:600;font-size:clamp(1.7rem,4.2vw,3.1rem);
  line-height:1.06;letter-spacing:.04em;text-transform:uppercase;text-wrap:balance;
}

/* ══════════════════════════════════════════════════════════════
   CORRECTIFS v3.3
   ══════════════════════════════════════════════════════════════ */

/* ── 1. Le bandeau décrochait au défilement sur iPhone ───────
   body portait overflow-x:hidden. Sur iOS, cela fait de body le
   conteneur de défilement et tout position:fixed s'ancre alors
   au document, non à la fenêtre : le bandeau part avec la page.
   overflow-x:clip coupe le débord sans créer de conteneur, donc
   le fixe reste fixe. Les moteurs qui ignorent clip retombent
   sur visible, qui ne casse rien non plus. */
html,body{overflow-x:clip}
.nav{
  position:fixed;top:0;left:0;right:0;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
}
@media(max-width:900px){
  /* rien ne transparaît sous le bandeau, à aucun moment du défilement */
  .nav{background:rgb(var(--fond-rgb) / .94);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
  .nav.fixe{border-bottom-color:var(--hair)}
}

/* ── 2. La boîte média épouse enfin l'image ──────────────────
   Les images portaient width:100% avec height:auto et un
   max-height. La boîte de l'élément prenait alors une proportion
   fausse et object-fit:contain peignait l'œuvre au milieu d'une
   réserve crème, de la couleur du papier : le passe-partout
   paraissait décentré alors que c'était la boîte qui l'était.
   L'élément est désormais dimensionné par l'image elle-même. La
   marge du montage se calcule de tous les côtés à la fois. */
.plaque img{
  width:auto;height:auto;max-width:100%;
  display:block;object-fit:contain;object-position:center;
}
.plaque{padding:clamp(1.1rem,3vw,2.6rem)}

/* ── 3. Le héro laisse voir la vidéo ─────────────────────────
   Le titre occupait quatorze pour cent de la largeur et le voile
   couvrait l'image jusqu'en haut. Le texte descend en bande
   basse, le voile ne monte plus que sous elle. */
.hero::after{
  background:linear-gradient(to bottom,
    rgb(var(--fond-rgb) / .34) 0%,
    rgb(var(--fond-rgb) / .04) 18%,
    rgb(var(--fond-rgb) / .06) 44%,
    rgb(var(--fond-rgb) / .62) 76%,
    var(--noir) 98%);
}
.hero h1{
  font-size:clamp(1.55rem,3.4vw,2.9rem);font-weight:700;
  letter-spacing:.30em;line-height:1;
}
.hero h1 sup{font-size:.34em;vertical-align:1.1em;letter-spacing:0}
.hero-sous{margin-top:1.05rem;max-width:40ch;font-size:clamp(.98rem,.4vw + .9rem,1.16rem);line-height:1.55}
.hero-etat{margin-top:1.4rem;padding-top:1rem;gap:.7rem clamp(1rem,2.6vw,2.2rem)}
.hero-c{padding-bottom:clamp(2.2rem,6vh,4rem)}
@media(max-width:560px){
  .hero h1{font-size:1.5rem;letter-spacing:.26em}
  .hero-sous{margin-top:.85rem;font-size:.97rem}
  .hero-etat{margin-top:1.1rem;padding-top:.85rem;font-size:.62rem;letter-spacing:.1em}
}

/* ── 4. Fiche pièce : le titre respire ───────────────────────
   Sur tablette et sur écran large, le titre, la ligne d'édition
   et le premier paragraphe se touchaient. Chaque rang reçoit sa
   distance, et un filet marque la fin de l'en-tête. */
.piece-sous{margin-top:1.15rem;letter-spacing:.2em}
.piece-txt{margin-top:clamp(1.6rem,3.2vh,2.6rem);padding-top:clamp(1.5rem,3vh,2.4rem);
  border-top:1px solid var(--hair)}
.piece-txt p{margin-top:1.4rem}
.piece-txt p:first-child{margin-top:0;font-size:clamp(1.02rem,.4vw + .94rem,1.18rem);color:var(--ivoire)}
@media(min-width:981px){
  .piece h1{line-height:1.02}
  .piece-sous{margin-top:1.45rem}
  .piece-txt p{margin-top:1.6rem}
  .releve{margin-top:clamp(2.6rem,5vh,3.6rem)}
  .acq{margin-top:clamp(2.6rem,5vh,3.6rem)}
}

/* ── 5. Galerie : la bande dit qu'elle continue ──────────────
   Dix-huit vignettes ne tiennent sur aucun écran. Le bord droit
   s'estompe, le défilement s'aimante, la vignette tenue porte un
   filet or plein. */
.vignettes{
  scroll-snap-type:x proximity;scroll-padding-inline:.25rem;
  padding-block:2px;
}
.vignettes button{scroll-snap-align:start;transition:border-color .3s var(--e),opacity .3s var(--e)}
.vignettes button[aria-current="false"]{opacity:.55}
.vignettes button[aria-current="false"]:hover{opacity:1}
.vignettes button[aria-current="true"]{border-color:var(--or);opacity:1}
.galerie-pied{padding-top:.2rem}
.galerie-pied::after{
  content:'';position:absolute;top:0;bottom:0;right:0;width:2.2rem;pointer-events:none;
  background:linear-gradient(to right,transparent,var(--noir));
}
.galerie-pied{position:relative}
@media(max-width:560px){
  .galerie-pied::after{bottom:auto;height:calc(100% - 3.2rem)}
  .galerie-cmd button{width:44px;height:44px}
  .vignettes-c{font-size:var(--t-data)}
}
/* la planche tenue occupe la largeur sur téléphone */
@media(max-width:980px){
  .piece-med--galerie .plaque{padding:clamp(.9rem,3.4vw,1.8rem)}
}

/* ── 6. Le bandeau garde sa lisibilité sur la vidéo ──────────
   Le voile général ayant reculé, un voile court tient sous le
   seul bandeau : la marque et les liens restent lisibles quelle
   que soit l'image, et la vidéo reste dégagée en dessous. */
.hero::before{
  content:'';position:absolute;top:0;left:0;right:0;z-index:1;pointer-events:none;
  height:calc(var(--nav-h) + 2.5rem);
  background:linear-gradient(to bottom,rgb(var(--fond-rgb) / .78),rgb(var(--fond-rgb) / 0));
}

/* ── 7. La planche tient dans sa fenêtre collante ────────────
   La boîte média ayant repris sa proportion, la hauteur ne peut
   plus venir d'un pourcentage dans un conteneur de hauteur
   automatique. Elle est posée en unités de fenêtre. */
@media(min-width:981px){
  .piece-med--galerie .plaque img{max-height:calc(100svh - var(--nav-h) - 15rem)}
  .piece-med:has(> .plaque:only-child) > .plaque img,
  .piece-med--seul > .plaque img{max-height:calc(100svh - var(--nav-h) - 9rem)}
}

/* ── 8. Bloc de livraison ────────────────────────────────────*/
.livr{margin-top:clamp(2rem,5vh,3.4rem);display:grid;gap:clamp(2rem,4.5vh,3.2rem);max-width:var(--mesure)}
.livr-b h2{font-size:clamp(1.05rem,1.7vw,1.35rem);letter-spacing:.12em;color:var(--blanc)}
.livr-b p{margin-top:1.1rem;color:var(--ivoire-2);line-height:1.78;text-wrap:pretty}
.releve-t{width:100%;border-collapse:collapse;margin-top:1.2rem;
  font-family:var(--mono);font-size:var(--t-data);letter-spacing:.04em}
.releve-t th,.releve-t td{padding:.8rem 0;border-bottom:1px solid var(--hair);
  vertical-align:baseline;text-align:left;font-weight:400}
.releve-t th{color:var(--ivoire-3);width:42%;padding-right:1.5rem}
.releve-t td{color:var(--ivoire)}
@media(max-width:560px){
  .releve-t th{width:50%;padding-right:1rem}
}

/* ══════════════════════════════════════════════════════════════
   CORRECTIFS v3.4
   ══════════════════════════════════════════════════════════════ */

/* ── 1. L'œuvre était rognée dans son montage ────────────────
   Les images des cartes et des planches d'opérateur portaient
   height:100% dans une boîte dont la hauteur venait d'aspect-ratio.
   Cette hauteur est indéfinie tant que la grille ne l'a pas
   résolue : WebKit rend alors l'image à sa taille propre, elle
   déborde, et overflow:hidden la coupe. DOUKOU perdait son bas,
   MACROCOSME sa droite. max-height:100% souffrait du même mal.

   L'image est désormais posée en absolu sur un bloc de référence
   défini. Sa boîte vient des quatre côtés du montage, jamais d'un
   pourcentage à résoudre. object-fit:contain travaille sur une
   hauteur certaine : aucun moteur ne peut plus rogner. */
.carte-v,.op-g{position:relative}
.carte-v img,.op-g img{
  position:absolute;inset:0;
  width:100%;height:100%;box-sizing:border-box;
  object-fit:contain;object-position:center;
  display:block;
}
.carte-v img{padding:clamp(1.1rem,2.6vw,2rem)}
.op-g img{padding:14%}
.carte-v{padding:0}
.op-g{padding:0}

/* La planche de fiche n'a pas de proportion imposée : sa hauteur
   se plafonne en unités de fenêtre, définies partout. */
.plaque img{max-height:min(70svh,760px)}
@media(min-width:981px){
  .plaque img{max-height:min(74svh,880px)}
  .piece-med--galerie .plaque img{max-height:calc(100svh - var(--nav-h) - 15rem)}
  .piece-med:has(> .plaque:only-child) > .plaque img,
  .piece-med--seul > .plaque img{max-height:calc(100svh - var(--nav-h) - 9rem)}
}

/* ── 2. Le montage se voit ───────────────────────────────────
   Papier photographié et fond du montage portent la même crème.
   Un filet d'un pixel dit où finit l'un et où commence l'autre. */
.carte-v::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  box-shadow:inset var(--ombre-plaque);
}
.plaque img{box-shadow:var(--ombre-plaque)}

/* ── 3. Le bandeau tient au bord haut ────────────────────────
   viewport-fit=cover fait passer la page sous la barre d'état.
   Le bandeau porte un fond plein dès le premier pixel et le
   prolonge dans la réserve haute : plus rien ne se glisse
   au-dessus, quel que soit le moment du défilement. */
.nav{background:rgb(var(--fond-rgb) / .92);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.nav::before{
  content:'';position:absolute;left:0;right:0;bottom:100%;
  height:env(safe-area-inset-top,0px);background:var(--noir);
}
@media(min-width:901px){
  /* sur grand écran, le bandeau reste transparent au sommet du héro */
  .nav:not(.fixe){background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
  .nav:not(.fixe)::before{background:transparent}
}

/* ── 4. Le sommaire est retiré ───────────────────────────────
   Le héro touche désormais la partie I. La première section
   reprend le filet que le sommaire portait. */
.hero + section{border-top:1px solid var(--hair-or)}

/* ══════════════════════════════════════════════════════════════
   CORRECTIFS v3.5
   ══════════════════════════════════════════════════════════════ */

/* ── 1. Le cadre de galerie ne bouge plus d'une planche à l'autre
   Les dix-huit photographies du Tirage papier vont de 0,562 à
   1,000 de proportion, soit près du double. Sans fenêtre fixe,
   chaque planche imposait sa hauteur : le montage changeait de
   forme à chaque pas et la page sautait sous le doigt.

   La fenêtre prend une proportion arrêtée. L'image est posée en
   absolu sur ce bloc défini, contenue et centrée. Toutes les
   planches partagent désormais le même cadre. */
.piece-med--galerie .plaque{position:relative;aspect-ratio:4/5;padding:0}
.piece-med--galerie .plaque img{
  position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;
  padding:clamp(1rem,3.2vw,2.4rem);
  object-fit:contain;object-position:center;
  max-height:none;box-shadow:none;
}
@media(min-width:701px){.piece-med--galerie .plaque{aspect-ratio:1}}
@media(min-width:981px){
  .piece-med--galerie{grid-template-rows:auto auto}
  .piece-med--galerie .plaque{
    aspect-ratio:1;max-height:calc(100svh - var(--nav-h) - 11rem);overflow:hidden;
  }
  .piece-med--galerie .plaque img{max-height:none}
}

/* ── 2. Les images ne se prennent plus au doigt ni au clic ────
   Appui long sur iOS, glisser-déposer, menu contextuel : les
   trois chemins ordinaires sont fermés. Une capture d'écran ou
   l'adresse du fichier restent hors de portée de la feuille. */
img,video{
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;
  -webkit-user-drag:none;
}
.plaque,.carte-v,.op-g,.vignettes button,.hero-media{
  -webkit-touch-callout:none;
}

/* ══════════════════════════════════════════════════════════════
   CORRECTIFS v3.6
   ══════════════════════════════════════════════════════════════ */

/* ── L'agenda porte seul la Partie IV ────────────────────────
   Le bloc d'affiliation répétait le chapô, qui répétait l'agenda.
   Il est retiré. L'agenda devient le seul objet de la partie et
   prend la présence qui lui revient : ligne plus haute, nom de
   foire au corps du texte, lieu en retrait, date en or. */
.agenda--fort{margin-top:clamp(2.4rem,5.5vh,3.8rem)}
.agenda--fort div{padding:1.85rem 0 1.85rem 1.6rem;gap:.5rem 2.4rem}
.agenda--fort div::before{top:2.15rem;width:7px;height:7px}
.agenda--fort .n{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:clamp(1.02rem,1.8vw,1.34rem);letter-spacing:.07em;line-height:1.2;
  color:var(--blanc);
}
.agenda--fort .l{
  font-family:var(--mono);font-size:var(--t-data);letter-spacing:.1em;
  text-transform:none;color:var(--ivoire-3);margin-top:.55rem;display:block;
}
.agenda--fort .d{color:var(--or);letter-spacing:.11em;white-space:nowrap}
@media(max-width:600px){
  .agenda--fort div{padding-left:1.35rem}
  .agenda--fort div::before{top:2rem}
  .agenda--fort .d{margin-top:.65rem;text-align:left}
}

/* ══════════════════════════════════════════════════════════════
   CORRECTIFS v3.7
   ══════════════════════════════════════════════════════════════ */

/* ── 1. La planche n'est plus agrandie ni rognée sous 981 px ──
   Le rognage ne venait pas d'un object-fit : la feuille porte
   contain partout. Il venait de la largeur du montage.

   Sous 981 px, .piece-haut repassait en grid-template-columns:1fr.
   1fr vaut minmax(auto,1fr) : le minimum de la piste est le
   minimum de contenu de l'objet qu'elle porte. Cet objet est la
   colonne média, qui porte la bande des dix-huit vignettes. Le
   minimum de contenu de la bande vaut sa longueur déroulée,
   1 252 px. La piste s'ouvrait donc à 1 252 px dans une page de
   390, la plaque suivait, l'image était contenue dans un cadre
   trois fois plus large que l'écran, et html{overflow-x:clip}
   coupait le débord sans laisser défiler : il ne restait à
   l'œil qu'un fragment agrandi de l'œuvre, la main.

   Au-dessus de 981 px, les pistes s'écrivent minmax(0,…) : le
   minimum y vaut zéro et rien n'a jamais débordé. C'est cette
   écriture qui est portée sous 981 px. La bande reprend alors
   son défilement, qui était sa fonction.

   Le plafond de largeur ferme la voie à tout autre contenu qui
   voudrait ouvrir la colonne au-delà de sa piste. */
@media(max-width:980px){
  .piece-haut{grid-template-columns:minmax(0,1fr)}
  .piece-haut>*{min-width:0}
  .piece-med,.piece-med--galerie{min-width:0;max-width:100%}
  .galerie-pied{min-width:0;max-width:100%}
  .vignettes{min-width:0;max-width:100%;flex:1 1 auto}
}

/* ── 2. Le fondu de la bande n'éteint plus le rang ───────────
   Le fondu de fin de bande est posé sur .galerie-pied, donc sur
   toute sa hauteur et jusqu'à son bord droit : il passait sur les
   deux commandes et sur le rang écrit, qui perdait son dernier
   chiffre. Les commandes prennent leur propre plan. */
.galerie-cmd{position:relative;z-index:1}

/* ── 3. LE RANG D'EXEMPLAIRE ─────────────────────────────────
   L'édition compte cinquante feuilles et cinquante rangs.
   L'acquéreur retient le sien avant de valider. Le registre des
   rangs se lit comme la numérotation portée au verso : une case
   par feuille, filet d'un pixel, or sur le rang tenu.

   La liste native reste la source du choix ; elle est masquée à
   l'œil et lue par le script. Sans script, le bloc entier reste
   caché et la fiche se comporte comme avant : rien ne ment. */
.rang{margin-top:clamp(2.2rem,4.5vh,3rem);padding-top:1.5rem;border-top:1px solid var(--hair-or)}
.rang-t{
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.26em;text-transform:uppercase;
  color:var(--or);display:block;
}
.rang-d{
  margin-top:.9rem;color:var(--ivoire-2);font-size:var(--t-petit);
  line-height:1.72;max-width:54ch;text-wrap:pretty;
}
.rang-n{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.rang-g{
  margin-top:1.35rem;display:grid;gap:1px;
  grid-template-columns:repeat(5,1fr);
  background:var(--hair-fort);border:1px solid var(--hair-fort);
}
.rang-g button{
  font-family:var(--mono);font-size:var(--t-data);letter-spacing:.05em;
  min-height:48px;display:flex;align-items:center;justify-content:center;
  background:var(--noir-2);color:var(--ivoire-2);border:0;cursor:pointer;
  transition:background .26s var(--e),color .26s var(--e);
}
.rang-g button:hover{background:var(--surface-h);color:var(--blanc)}
.rang-g button[aria-checked="true"]{background:var(--or);color:var(--noir)}
.rang-g button[disabled]{
  background:var(--noir);color:var(--ivoire-4);cursor:default;
  text-decoration:line-through;text-decoration-thickness:1px;
}
.rang-g button[disabled]:hover{background:var(--noir);color:var(--ivoire-4)}
.rang-e{
  margin-top:1.15rem;font-family:var(--mono);font-size:var(--t-label);
  letter-spacing:.18em;text-transform:uppercase;color:var(--ivoire-3);
}
.rang-e[data-etat="tenu"]{color:var(--or)}
.rang.appel{animation:appel .46s var(--e) 2}
@keyframes appel{50%{border-top-color:var(--or)}}
/* Cinquante rangs, jamais de rang tronqué : cinq colonnes sur dix, ou dix sur cinq. */
@media(min-width:561px){.rang-g{grid-template-columns:repeat(10,1fr)}}

/* Tant qu'aucun rang n'est tenu, le bouton ne mène nulle part. */
.bouton.or[aria-disabled="true"],.bouton[aria-disabled="true"]{
  background:transparent;border-color:var(--hair-fort);color:var(--ivoire-3);cursor:default;
}
.bouton.or[aria-disabled="true"]:hover,.bouton[aria-disabled="true"]:hover{
  background:transparent;border-color:var(--or);color:var(--or-clair);
}
@media(prefers-reduced-motion:reduce){.rang.appel{animation:none}}


/* ══════════════════════════════════════════════════════════════
   v3.9 · RÉGIME CLAIR
   Le clair n'est pas une inversion mécanique du sombre : c'est la
   matière du travail. Le fond prend la valeur du carton de montage,
   la plaque garde la valeur la plus haute, l'œuvre reste posée
   dessus sans filtre, sans calque et sans rognage. Chaque valeur
   d'encre a été mesurée : le plus faible rapport porté par du texte
   lisible est 4,8:1, au-dessus du seuil AA de 4,5:1.
   ══════════════════════════════════════════════════════════════ */
:root[data-theme="clair"]{
  color-scheme:light;
  --fond-rgb:242 239 231;
  --encre-rgb:20 18 15;

  --noir:#F2EFE7;                /* la table */
  --noir-2:#EDE9E0;              /* le creux : bandeau, cartouches */
  --surface:#F8F6F0;             /* la carte posée */
  --surface-h:#FFFFFF;           /* la carte soulevée */
  --ivoire:#14120F;              /* encre pleine        16,3:1 */
  --ivoire-2:#3B372F;            /* encre courante      10,3:1 */
  --ivoire-3:#5C564A;            /* encre de service     6,3:1 */
  --ivoire-4:#8A8375;            /* filets et décor : jamais de texte lisible */
  --blanc:#050505;               /* la valeur extrême, ici la plus dense */
  --or:#6B520D;                  /* or de lecture        6,4:1 */
  --or-clair:#54400A;            /* or appuyé            8,6:1 */
  --or-profond:#8A6D14;          /* or sur plaque claire 4,8:1 */
  --or-rgb:107 82 13;
  --plaque:#FFFDF8;              /* la feuille reste la valeur la plus haute */
  --alerte:#A03A22;              /* alerte               5,9:1 */

  --hair:rgb(var(--encre-rgb) / .14);
  --hair-fort:rgb(var(--encre-rgb) / .26);
  --hair-or:rgb(var(--or-rgb) / .34);
  --grain-mode:multiply; --grain-op:.028;
  --ombre-plaque:0 0 0 1px rgb(var(--encre-rgb) / .14);
}
@media(prefers-color-scheme:light){
  /* Sans script, la préférence de l'appareil s'applique seule. */
  :root:not([data-theme]){
  color-scheme:light;
  --fond-rgb:242 239 231;
  --encre-rgb:20 18 15;

  --noir:#F2EFE7;                /* la table */
  --noir-2:#EDE9E0;              /* le creux : bandeau, cartouches */
  --surface:#F8F6F0;             /* la carte posée */
  --surface-h:#FFFFFF;           /* la carte soulevée */
  --ivoire:#14120F;              /* encre pleine        16,3:1 */
  --ivoire-2:#3B372F;            /* encre courante      10,3:1 */
  --ivoire-3:#5C564A;            /* encre de service     6,3:1 */
  --ivoire-4:#8A8375;            /* filets et décor : jamais de texte lisible */
  --blanc:#050505;               /* la valeur extrême, ici la plus dense */
  --or:#6B520D;                  /* or de lecture        6,4:1 */
  --or-clair:#54400A;            /* or appuyé            8,6:1 */
  --or-profond:#8A6D14;          /* or sur plaque claire 4,8:1 */
  --or-rgb:107 82 13;
  --plaque:#FFFDF8;              /* la feuille reste la valeur la plus haute */
  --alerte:#A03A22;              /* alerte               5,9:1 */

  --hair:rgb(var(--encre-rgb) / .14);
  --hair-fort:rgb(var(--encre-rgb) / .26);
  --hair-or:rgb(var(--or-rgb) / .34);
  --grain-mode:multiply; --grain-op:.028;
  --ombre-plaque:0 0 0 1px rgb(var(--encre-rgb) / .14);
}
}

/* ── Le héros reste une surface sombre dans les deux régimes ──
   Le texte du héros est posé sur une vidéo noire : il garde ses
   valeurs claires quel que soit le régime de la page. Le dégradé
   de pied rejoint la couleur de la page pour que la coupure ne
   se voie pas. */
.hero,.hero-media{background:#0A0A0B}
.hero::after{background:linear-gradient(to bottom,
  rgba(10,10,11,.68) 0%,rgba(10,10,11,.12) 26%,rgba(10,10,11,.32) 58%,var(--noir) 97%)}
.hero h1{color:#FAFAF7}
.hero h1 sup{color:#C9A227}
.hero-sous{color:#EFEAE0}
.hero-sous strong{color:#FAFAF7}
.hero-etat{color:#B4AEA2;border-top-color:rgba(201,162,39,.30)}
.hero-etat b{color:#C9A227}
:root[data-theme="clair"] .hero::after{background:linear-gradient(to bottom,
  rgba(10,10,11,.62) 0%,rgba(10,10,11,.10) 26%,rgba(10,10,11,.34) 58%,var(--noir) 98%)}

/* ── Corrections propres au clair ────────────────────────────── */
:root[data-theme="clair"] .tiroir{background:var(--noir)}
:root[data-theme="clair"] .burger span{background:var(--ivoire)}
:root[data-theme="clair"] .op-g,
:root[data-theme="clair"] .plaque{background:var(--plaque)}
:root[data-theme="clair"] .vignettes button{background:var(--plaque)}
:root[data-theme="clair"] .rang-g button{background:var(--surface)}
:root[data-theme="clair"] .rang-g button:hover{background:var(--surface-h)}
:root[data-theme="clair"] .rang-g button[aria-checked="true"]{background:var(--or);color:#FFFDF8}
:root[data-theme="clair"] .rang-g button[disabled]{background:var(--noir-2);color:var(--ivoire-4)}
:root[data-theme="clair"] .bouton.or{background:var(--or);border-color:var(--or);color:#FFFDF8}
:root[data-theme="clair"] .bouton.or:hover{background:var(--or-clair);border-color:var(--or-clair);color:#FFFDF8}
:root[data-theme="clair"] .lang a.on{color:#FFFDF8;background:var(--or);border-color:var(--or)}
:root[data-theme="clair"] .terminal button{color:#FFFDF8}
:root[data-theme="clair"] .terminal button:hover{background:var(--or-clair)}
:root[data-theme="clair"] .verif::before{opacity:.5}
:root[data-theme="clair"] ::selection{background:var(--or);color:#FFFDF8}
:root[data-theme="clair"] .op-g.vide,
:root[data-theme="clair"] .plaque.vide{background:var(--noir-2)}

/* Le contraste renforcé durcit les filets, jamais le texte. */
@media(prefers-contrast:more){
  :root{--hair:rgb(var(--encre-rgb) / .28);--hair-fort:rgb(var(--encre-rgb) / .48)}
  .carte,.op,.verif{border-color:var(--hair-fort)}
}

/* ══════════════════════════════════════════════════════════════
   v3.9 · COMMANDE DE RÉGIME
   Trois états dans un seul bouton : auto, clair, sombre. L'état
   courant est écrit dans le libellé, jamais porté par la seule
   couleur. La marque de l'état est un glyphe plein.
   ══════════════════════════════════════════════════════════════ */
.lumiere{
  min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  gap:.4rem;padding:0 .7rem;background:none;cursor:pointer;
  border:1px solid var(--hair);color:var(--ivoire-2);
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;
  transition:color .28s,border-color .28s;
}
.lumiere:hover{color:var(--blanc);border-color:var(--hair-or)}
.lumiere .glyphe{font-size:1.02em;line-height:1;color:var(--or)}
.lumiere .etat{display:none}
@media(min-width:1080px){.lumiere .etat{display:inline}}
.tiroir .lumiere{
  min-width:64px;min-height:52px;margin-top:.9rem;font-size:var(--t-data);letter-spacing:.16em;
}
.tiroir .lumiere .etat{display:inline}
@media(min-width:561px){.tiroir .lumiere{display:none}}
@media(max-width:560px){.nav .lumiere{display:none}}

/* ══════════════════════════════════════════════════════════════
   v3.9 · LIEN D'ÉVITEMENT
   Premier objet focalisable de chaque page. Invisible tant qu'il
   n'est pas atteint au clavier.
   ══════════════════════════════════════════════════════════════ */
.evitement{
  position:absolute;left:-9999px;top:0;z-index:9999;
  background:var(--or);color:var(--noir);padding:1rem 1.4rem;
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;
}
.evitement:focus{left:0}
:root[data-theme="clair"] .evitement{color:#FFFDF8}

/* ══════════════════════════════════════════════════════════════
   v3.9 · FIL D'ARIANE
   La flèche de retour ne disait pas d'où l'on venait ni où l'on
   était. Le chemin le dit, et il est lu par les moteurs.
   ══════════════════════════════════════════════════════════════ */
.fil{
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ivoire-3);display:flex;flex-wrap:wrap;align-items:center;gap:.1rem .6rem;
}
.fil ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.1rem .6rem}
.fil li{display:flex;align-items:center;gap:.6rem}
.fil li + li::before{content:'\002F';color:var(--ivoire-4)}
.fil a{min-height:44px;display:inline-flex;align-items:center;transition:color .28s}
.fil a:hover,.fil a:focus-visible{color:var(--or)}
.fil [aria-current="page"]{color:var(--ivoire-2)}

/* ══════════════════════════════════════════════════════════════
   v3.9 · CHOIX DE L'ŒUVRE
   Dix-huit œuvres sont proposées au tirage. Le numéro de la case
   est le numéro de la planche : la case 01 montre la planche 01.
   Le choix et la galerie sont un seul objet, dans les deux sens.
   ══════════════════════════════════════════════════════════════ */
.rang-g[data-jeu="oeuvre"]{grid-template-columns:repeat(3,1fr)}
@media(min-width:420px){.rang-g[data-jeu="oeuvre"]{grid-template-columns:repeat(6,1fr)}}
@media(min-width:561px){.rang-g[data-jeu="oeuvre"]{grid-template-columns:repeat(9,1fr)}}
.rang-g button .vue{
  position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
.rang-r{
  margin-top:1.15rem;font-family:var(--mono);font-size:var(--t-label);
  letter-spacing:.14em;color:var(--ivoire-3);line-height:1.8;max-width:54ch;
}
.rang-r b{color:var(--ivoire-2);font-weight:400}

/* ══════════════════════════════════════════════════════════════
   v3.9 · REGISTRE — le bloc respire
   La demande tenait dans un seul paragraphe dense de quarante-deux
   mots devant le formulaire. Le contenu du volume est désormais
   une liste : elle se balaye en une seconde au lieu de se lire.
   ══════════════════════════════════════════════════════════════ */
.terminal .porte{
  list-style:none;margin-top:1.3rem;display:grid;gap:.55rem;
  font-family:var(--mono);font-size:var(--t-data);color:var(--ivoire-2);line-height:1.7;
}
.terminal .porte li{display:flex;gap:.85rem;align-items:baseline}
.terminal .porte li::before{
  content:'\2014';color:var(--or);flex:0 0 auto;font-size:.85em;
}
.terminal .hors{
  margin-top:1.3rem;padding-top:1rem;border-top:1px solid var(--hair);
  font-size:var(--t-petit);color:var(--ivoire-3);line-height:1.7;max-width:56ch;
}

/* ══════════════════════════════════════════════════════════════
   v3.9 · DISPARITÉ DE MOTEUR
   Safari ne peint pas backdrop-filter sous certaines versions :
   le bandeau garde un fond opaque de repli.
   ══════════════════════════════════════════════════════════════ */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav.fixe{background:var(--noir)}
}

/* Impression : la page part en clair, sans média ni décor. */
@media print{
  :root{--noir:#FFF;--noir-2:#FFF;--surface:#FFF;--ivoire:#000;--ivoire-2:#222;
        --ivoire-3:#444;--or:#000;--hair:#BBB;--hair-or:#BBB}
  .nav,.tiroir,.hero-media,.evitement,.lumiere,.vignettes,.galerie-cmd,.rang-g,footer .pied{display:none}
  body::after{display:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.72em;word-break:break-all}
  section{page-break-inside:avoid;border-top:1px solid #BBB}
}


/* ══════════════════════════════════════════════════════════════
   v4.0 · LE BANDEAU ET LA ZONE SÛRE
   ══════════════════════════════════════════════════════════════ */
.nav{
  padding-top:env(safe-area-inset-top,0px);
  background:rgb(var(--fond-rgb) / .92);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
}
.nav .wrap{
  padding-left:max(var(--gut),env(safe-area-inset-left,0px));
  padding-right:max(var(--gut),env(safe-area-inset-right,0px));
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav{background:var(--noir)}
}
/* Le tiroir couvre l'encoche comme le reste. */
.tiroir{padding-top:env(safe-area-inset-top,0px)}

/* Le lien d'évitement ne recouvre plus le bandeau lorsqu'il est atteint. */
.evitement:focus{top:env(safe-area-inset-top,0px)}

/* ══════════════════════════════════════════════════════════════
   v4.0 · CATALOGUE RAISONNÉ
   Le bloc ne porte plus que le titre et les deux champs. Sur un
   écran de téléphone, le bouton entre dans le premier écran.
   ══════════════════════════════════════════════════════════════ */
.terminal h3{margin:0 0 1.6rem}
.terminal h3 + form{margin-top:0}