/* =========================================================================
   MARCIAL — feuille de style du site
   Dérivée de SITE/design-system/tokens.css.
   Interdits du système : ombre portée, coin arrondi, dégradé, gris neutre,
   aplat sur forme organique, couleur sans fonction assignée.
   ========================================================================= */

@font-face{
  font-family:'Sora'; font-style:normal; font-weight:100 800; font-display:swap;
  src:url('/assets/fonts/sora-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Sora'; font-style:normal; font-weight:100 800; font-display:swap;
  src:url('/assets/fonts/sora-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --encre:#22105d; --matiere:#c94539; --signature:#d41a34;
  --encre-90:#3a2a70; --encre-60:#6b5f95; --encre-30:#a79fc0;
  --encre-12:#ddd8e8; --encre-06:#eeebf3;
  --papier:#fbf8f3; --papier-2:#f4eee4;
  --dare:#c94539; --hold:#e1793c; --unguarded:#2c4fb8; --heavy:#c7418c;
  --font:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;

  --t-display:clamp(38px,6vw,78px);
  --t-h1:clamp(30px,4.2vw,52px);
  --t-h2:clamp(24px,3vw,36px);
  --t-h3:20px; --t-body:17px; --t-small:14px; --t-micro:11.5px;

  --filet:1px solid var(--encre-12);
  --filet-fort:2px solid var(--encre);
  --filet-accent:3px solid var(--signature);

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:140px;
  --max:1160px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font); font-size:var(--t-body); line-height:1.62;
  color:var(--encre); background:var(--papier);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,picture,svg{display:block;max-width:100%}
img{height:auto}
a{color:var(--signature);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
h1,h2,h3{letter-spacing:-.02em;line-height:1.08;font-weight:800}
h1{font-size:var(--t-h1)} h2{font-size:var(--t-h2)} h3{font-size:var(--t-h3);font-weight:700}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--signature);outline-offset:3px}

.micro{font-size:var(--t-micro);letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--encre-60)}
.visuellement-cache{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.piege{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.saut{position:absolute;left:-9999px;background:var(--encre);color:var(--papier);padding:var(--s3) var(--s4);z-index:60}
.saut:focus{left:var(--s4);top:var(--s4)}

main{max-width:var(--max);margin:0 auto;padding:var(--s7) var(--s5) var(--s9)}

/* ---------------------------------------------------------------- barre */
.barre{border-bottom:var(--filet-fort);background:var(--papier);position:sticky;top:0;z-index:40}
.barre__dedans{max-width:var(--max);margin:0 auto;padding:var(--s4) var(--s5);
  display:flex;align-items:center;gap:var(--s6)}
.barre__marque img{height:26px;width:auto}
.barre__nav{display:flex;gap:var(--s5);margin-left:auto;flex-wrap:wrap}
.barre__nav a{color:var(--encre);font-size:var(--t-small);font-weight:600;letter-spacing:-.005em;
  padding-bottom:2px;border-bottom:2px solid transparent}
.barre__nav a:hover{text-decoration:none;border-bottom-color:var(--encre-30)}
.barre__nav a[aria-current]{border-bottom-color:var(--signature)}
.barre__langue{font-size:var(--t-micro);letter-spacing:.16em;font-weight:700;color:var(--encre-60);
  border:var(--filet);padding:5px var(--s3)}
.barre__langue:hover{text-decoration:none;border-color:var(--encre);color:var(--encre)}
.barre__bouton{display:none;margin-left:auto;background:none;border:var(--filet-fort);
  padding:6px var(--s4);font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;font-weight:700;cursor:pointer}

/* ------------------------------------------------------------ ouverture */
.ouverture{border-top:var(--filet-fort);padding-top:var(--s5);margin-bottom:var(--s8)}
.ouverture h1{margin-top:var(--s3);max-width:18ch}
.ouverture__intro{max-width:62ch;color:var(--encre-90);margin-top:var(--s5)}
.ouverture__intro p + p{margin-top:var(--s4)}
.ouverture__phrase{font-size:var(--t-h3);color:var(--encre-60);margin-top:var(--s4);max-width:40ch}
.ouverture--serie{border-top:none;border-left:6px solid var(--teinte);padding:var(--s2) 0 var(--s2) var(--s5)}
.ouverture--serie h1{color:var(--teinte)}
.ouverture--404{text-align:left}
.intro-large{max-width:62ch;color:var(--encre-60);margin-top:var(--s4)}

/* ----------------------------------------------------------------- hero */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s8);align-items:start;
  border-top:var(--filet-fort);padding-top:var(--s6);margin-bottom:var(--s9)}
.hero h1{font-size:var(--t-display);margin-top:var(--s4);max-width:14ch}
.hero__phrase{max-width:44ch;color:var(--encre-60);margin-top:var(--s5)}
.hero__actions{display:flex;gap:var(--s3);margin-top:var(--s6);flex-wrap:wrap}
.hero__compte{margin-top:var(--s5);font-size:var(--t-small);color:var(--encre-60);
  border-top:var(--filet);padding-top:var(--s3);display:inline-block}
.hero__image{border:var(--filet)}

/* -------------------------------------------------------------- boutons */
.bouton{display:inline-block;font-size:var(--t-small);font-weight:700;letter-spacing:-.005em;
  padding:var(--s3) var(--s5);border:var(--filet-fort);background:none;color:var(--encre);cursor:pointer}
.bouton:hover{text-decoration:none;background:var(--encre);color:var(--papier)}
.bouton--action{background:var(--signature);border-color:var(--signature);color:#fff}
.bouton--action:hover{background:var(--encre);border-color:var(--encre)}
.bouton--action small{display:block;font-weight:400;font-size:var(--t-micro);opacity:.85;margin-top:2px}
.bouton--discret{border-color:var(--encre-12);color:var(--encre-90)}
.bouton--discret:hover{border-color:var(--encre)}

/* --------------------------------------------------------------- bandes */
.bande__entete{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s5);
  border-bottom:var(--filet-fort);padding-bottom:var(--s3);margin-bottom:var(--s5)}
.bande__entete a{font-size:var(--t-small);font-weight:600}
.bande{margin-bottom:var(--s9)}
.bande__pellicule{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)}
.bande__pellicule picture,.bande__pellicule .reserve{border:var(--filet)}

/* --------------------------------------------------------------- séries */
.series-accueil{margin-bottom:var(--s9)}
.grille-series{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);margin-top:var(--s5)}
.grille-series--grande{grid-template-columns:repeat(2,1fr);gap:var(--s5)}
.carte-serie{display:block;color:var(--encre);border:var(--filet);border-top:4px solid var(--teinte);
  padding:var(--s5);min-height:190px;position:relative}
.carte-serie:hover{text-decoration:none;background:var(--papier-2)}
.carte-serie b{display:block;font-size:22px;font-weight:800;letter-spacing:.04em;color:var(--teinte)}
.carte-serie__phrase{display:block;margin-top:var(--s3);font-size:var(--t-body);max-width:26ch}
.carte-serie__compte{display:block;margin-top:var(--s4);font-size:var(--t-micro);
  letter-spacing:.16em;text-transform:uppercase;color:var(--encre-60)}
.grille-series--grande .carte-serie{min-height:230px}

/* --------------------------------------------------------------- œuvres */
.grille-oeuvres{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5) var(--s4)}
.grille-oeuvres--serree{grid-template-columns:repeat(4,1fr)}
.carte-oeuvre{display:block;color:var(--encre)}
.carte-oeuvre:hover{text-decoration:none}
.carte-oeuvre__texte{display:block;margin-top:var(--s3);border-top:var(--filet);padding-top:var(--s3)}
.carte-oeuvre:hover .carte-oeuvre__texte{border-top-color:var(--encre)}
.carte-oeuvre__texte b{display:block;font-weight:700;letter-spacing:-.01em}
.carte-oeuvre__meta{display:flex;gap:var(--s3);align-items:baseline;margin-top:2px;
  font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--encre-60)}
.carte-oeuvre__meta i{font-style:normal;font-weight:700;color:var(--teinte)}
.carte-oeuvre__meta em{font-style:normal;color:var(--encre-30)}

/* Double lecture : le zoom d'abord, l'œuvre au survol. Un seul effet. */
.double-lecture{display:block;position:relative;border:var(--filet);overflow:hidden;background:var(--papier-2)}
.double-lecture img{width:100%;object-fit:cover}
.double-lecture .dl-oeuvre{position:absolute;inset:0;opacity:0;transition:opacity .18s linear}
.double-lecture .dl-oeuvre img{width:100%;height:100%}
.carte-oeuvre:hover .dl-oeuvre,.carte-oeuvre:focus-visible .dl-oeuvre{opacity:1}
@media(hover:none){.double-lecture .dl-oeuvre{opacity:1}}

/* Réserve : ce qu'on voit tant que le fichier n'existe pas. Dessinée. */
.reserve{border:1px dashed var(--encre-30);background-image:repeating-linear-gradient(-45deg,var(--encre-12) 0 1px,transparent 1px 9px);
  display:flex;align-items:center;justify-content:center;padding:var(--s5);width:100%}
.reserve span{font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;
  color:var(--encre-60);text-align:center;max-width:24ch;line-height:1.6}

/* ---------------------------------------------------------------- œuvre */
.oeuvre{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s8);align-items:start}
.oeuvre__vue{position:sticky;top:96px}
.oeuvre__zooms{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-top:var(--s3)}
.oeuvre__zooms picture{border:var(--filet)}
.oeuvre__texte h1{margin-top:var(--s3)}
.jeton-serie{color:var(--teinte);font-weight:700;letter-spacing:.16em}
.oeuvre__accroche{font-size:var(--t-h3);line-height:1.45;color:var(--encre-90);margin-top:var(--s5);max-width:36ch}
.oeuvre__corps{margin-top:var(--s7);max-width:56ch}
.oeuvre__corps h2{margin-top:var(--s6);margin-bottom:var(--s3);border-top:var(--filet);padding-top:var(--s3)}
.oeuvre__corps h2:first-child{margin-top:0}
.oeuvre__corps p + p{margin-top:var(--s4)}
.oeuvre .bouton--action{margin-top:var(--s6)}
.hors-vente{margin-top:var(--s6);border-left:var(--filet-accent);padding-left:var(--s4)}
.hors-vente b{display:block;font-size:var(--t-small);letter-spacing:.06em;text-transform:uppercase}
.hors-vente span{display:block;font-size:var(--t-small);color:var(--encre-60);margin-top:2px}
.note-triptyque{margin-top:var(--s6);border-top:var(--filet);padding-top:var(--s4);font-size:var(--t-small);color:var(--encre-90);max-width:56ch}
.voisines{margin-top:var(--s9)}

.fiche{margin-top:var(--s7);border-top:var(--filet-fort)}
.fiche div{display:grid;grid-template-columns:150px 1fr;gap:var(--s4);
  border-bottom:var(--filet);padding:var(--s3) 0}
.fiche dt{font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--encre-60);padding-top:3px}
.fiche dd{font-size:var(--t-small)}

/* ------------------------------------------------------------- filtres */
.filtres{display:flex;gap:var(--s4);align-items:flex-end;flex-wrap:wrap;
  border-top:var(--filet-fort);border-bottom:var(--filet);padding:var(--s4) 0;margin-bottom:var(--s6)}
.filtres label{display:flex;flex-direction:column;gap:4px}
.filtres label span{font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--encre-60)}
.filtres select{border:var(--filet);background:var(--papier);padding:7px var(--s3);font-size:var(--t-small);min-width:170px}
.filtres select:hover{border-color:var(--encre)}
.filtres output{margin-left:auto;font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--encre-60)}
.vide{padding:var(--s8) 0;color:var(--encre-60);border-top:var(--filet)}

/* -------------------------------------------------------------- planche */
.planche{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5) var(--s4)}
.planche figure picture,.planche figure .reserve{border:var(--filet)}
.planche figcaption{margin-top:var(--s3);border-top:var(--filet);padding-top:var(--s3);font-size:var(--t-small)}
.planche figcaption b{display:block;font-weight:700}
.planche figcaption span{display:block;color:var(--encre-60);margin-top:2px}
.planche--objets{grid-template-columns:repeat(2,1fr);gap:var(--s6) var(--s5)}
.mention-unique{margin-top:var(--s6);border-top:var(--filet);padding-top:var(--s3);
  font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--encre-60)}

/* -------------------------------------------------------------- journal */
.liste-journal{border-top:var(--filet-fort)}
.entree{display:grid;grid-template-columns:170px 1fr;gap:var(--s5);align-items:baseline;
  color:var(--encre);border-bottom:var(--filet);padding:var(--s5) 0}
.entree:hover{text-decoration:none;background:var(--papier-2)}
.entree time{font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--encre-60)}
.entree b{font-size:var(--t-h3);font-weight:800;letter-spacing:-.015em}
.entree span{display:block;color:var(--encre-60);margin-top:var(--s2);max-width:60ch}
.flux{margin-top:var(--s6);font-size:var(--t-small)}
.article{max-width:66ch}
.article h1{margin-top:var(--s3)}
.article__chapo{font-size:var(--t-h3);color:var(--encre-60);margin-top:var(--s5)}
.article__corps{margin-top:var(--s6)}
.article__corps p + p{margin-top:var(--s4)}
.article picture{border:var(--filet);margin-top:var(--s6)}

/* ---------------------------------------------------------- textes longs */
.texte-long{max-width:64ch}
.texte-long p + p{margin-top:var(--s5)}
.texte-long--legal p + p{margin-top:var(--s4)}
.apropos{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--s8);align-items:start}
.apropos__texte{border-top:var(--filet-fort);padding-top:var(--s5)}
.apropos__texte h1{margin-top:var(--s3);max-width:16ch}
.apropos .texte-long{margin-top:var(--s6)}
.apropos__image{border:var(--filet);position:sticky;top:96px}

/* ------------------------------------------------------------ formulaire */
.formulaire{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);max-width:680px;
  border-top:var(--filet-fort);padding-top:var(--s6);margin-top:var(--s7)}
.formulaire label{display:flex;flex-direction:column;gap:5px}
.formulaire label.plein{grid-column:1 / -1}
.formulaire label span{font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--encre-60)}
.formulaire input,.formulaire textarea{border:var(--filet);background:var(--papier);padding:var(--s3);font-size:var(--t-small)}
.formulaire input:focus,.formulaire textarea:focus{border-color:var(--encre);outline:none}
.formulaire button{justify-self:start;grid-column:1 / -1}

/* ---------------------------------------------------------------- appel */
.appel{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);margin-top:var(--s9)}
.appel__bloc{border:var(--filet);border-top:var(--filet-fort);padding:var(--s6)}
.appel__bloc p{color:var(--encre-60);margin:var(--s3) 0 var(--s5);max-width:40ch}

/* ---------------------------------------------------------------- seuil */
.seuil{position:fixed;inset:0;background:var(--encre);z-index:80;
  display:flex;align-items:center;justify-content:center;padding:var(--s5);overflow:auto}
.seuil[hidden]{display:none}
.seuil__carte{background:var(--papier);border-top:6px solid var(--signature);
  max-width:560px;width:100%;padding:var(--s7) var(--s6) var(--s6)}
.seuil__carte h2{margin-top:var(--s3)}
.seuil__carte p{margin-top:var(--s4);color:var(--encre-90)}
.seuil__actions{display:flex;gap:var(--s3);margin-top:var(--s6);flex-wrap:wrap}
.seuil__rappel{font-size:var(--t-small);color:var(--encre-60);border-top:var(--filet);padding-top:var(--s3);margin-top:var(--s6)}
html[data-seuil-requis="1"]:not([data-seuil-ouvert]) body{overflow:hidden}
html[data-seuil-requis="1"]:not([data-seuil-ouvert]) main{filter:blur(14px);pointer-events:none;user-select:none}

/* --------------------------------------------------------------- racine */
.corps-racine{min-height:100vh;display:flex}
.racine{max-width:var(--max);margin:auto;padding:var(--s8) var(--s5);width:100%}
.racine__logo{max-width:280px}
.racine__formule{margin-top:var(--s5);font-size:var(--t-h3);color:var(--encre-60);max-width:44ch}
.racine__portes{display:grid;grid-template-columns:1fr 1fr;gap:var(--s7);margin-top:var(--s8);
  border-top:var(--filet-fort);padding-top:var(--s6)}
.porte__grille{display:grid;gap:var(--s4);margin-top:var(--s4)}
.porte__entree{display:block;border:var(--filet);border-top:var(--filet-fort);padding:var(--s5);color:var(--encre)}
.porte__entree b{display:block;font-size:26px;font-weight:800;letter-spacing:-.02em}
.porte__entree span{display:block;color:var(--encre-60);margin-top:var(--s2);font-size:var(--t-small)}
.porte__entree--vive:hover{text-decoration:none;background:var(--papier-2);border-top-color:var(--signature)}
.porte__entree--vive em{display:block;font-style:normal;color:var(--signature);font-weight:700;font-size:var(--t-small);margin-top:var(--s4)}
.porte__entree--attente{border-top-color:var(--encre-12)}
.porte__form{display:flex;gap:var(--s2);margin-top:var(--s4);flex-wrap:wrap}
.porte__form input[type=email]{flex:1;min-width:170px;border:var(--filet);background:var(--papier);padding:var(--s3);font-size:var(--t-small)}
.porte__form button{border:var(--filet-fort);background:none;padding:var(--s3) var(--s4);font-size:var(--t-small);font-weight:700;cursor:pointer}
.porte__form button:hover{background:var(--encre);color:var(--papier)}

/* ----------------------------------------------------------------- pied */
.pied{border-top:var(--filet-fort);margin-top:var(--s9)}
.pied__dedans{max-width:var(--max);margin:0 auto;padding:var(--s7) var(--s5);
  display:grid;grid-template-columns:1.2fr .8fr;gap:var(--s7)}
.pied__marque img{height:20px;width:auto}
.pied__marque p{font-size:var(--t-small);color:var(--encre-60);margin-top:var(--s3);max-width:40ch}
.pied__liens{display:flex;flex-direction:column;gap:var(--s2);align-items:flex-start}
.pied__liens a{font-size:var(--t-small);color:var(--encre-90)}

/* ----------------------------------------------------------- adaptation */
@media(max-width:1000px){
  .grille-series{grid-template-columns:repeat(2,1fr)}
  .grille-oeuvres,.planche{grid-template-columns:repeat(2,1fr)}
  .grille-oeuvres--serree{grid-template-columns:repeat(2,1fr)}
  .hero,.oeuvre,.apropos{grid-template-columns:1fr;gap:var(--s6)}
  .oeuvre__vue,.apropos__image{position:static}
  .bande__pellicule{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  main{padding:var(--s6) var(--s4) var(--s8)}
  .barre__dedans{gap:var(--s4);flex-wrap:wrap}
  .barre__bouton{display:block}
  .barre__nav{display:none;order:3;width:100%;flex-direction:column;gap:var(--s3);
    border-top:var(--filet);padding-top:var(--s4);margin-left:0}
  .barre__nav[data-ouvert]{display:flex}
  .barre__langue{margin-left:auto}
  .racine__portes,.appel,.pied__dedans,.formulaire{grid-template-columns:1fr;gap:var(--s5)}
  .planche--objets{grid-template-columns:1fr}
  .entree{grid-template-columns:1fr;gap:var(--s2)}
  .fiche div{grid-template-columns:1fr;gap:2px}
}
@media(max-width:480px){
  .grille-series,.grille-oeuvres,.planche,.grille-oeuvres--serree{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
}

/* La racine est le niveau auteur : lettrage typographique, jamais le logo
   Marcial — THE MALE LINES appartient à Marcial seul. */
.racine__mot{font-size:var(--t-display);font-weight:800;letter-spacing:-.035em;line-height:1}

/* Bloc « Le trait » sur l'accueil : il annonce sans montrer, puisque la page
   est passée derrière le seuil. */
.bande--seuil{border-top:var(--filet-fort);padding-top:var(--s5)}
.bande--seuil .bande__entete{border-bottom:none;padding-bottom:0;margin-bottom:var(--s4)}
.micro--verrou{color:var(--signature)}
.bande__acces{margin-top:var(--s5)}

/* Le trait : chaque détail renvoie à son œuvre. */
.planche--liens{grid-template-columns:repeat(3,1fr)}
.detail{display:block;color:var(--encre)}
.detail:hover{text-decoration:none}
.detail picture,.detail .reserve{border:var(--filet)}
.detail:hover picture{border-color:var(--encre)}
.detail__legende{display:block;margin-top:var(--s3);border-top:var(--filet);padding-top:var(--s3)}
.detail:hover .detail__legende{border-top-color:var(--encre)}
.detail__legende b{display:block;font-weight:700;letter-spacing:-.01em}
.detail__legende span{display:block;font-size:var(--t-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--encre-60);margin-top:2px}

@media(max-width:1000px){.planche--liens{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.planche--liens{grid-template-columns:1fr}}

/* =========================================================================
   SÉRIES — une série se montre par la matière de ses œuvres.
   Une bande pleine largeur, sa couleur en arête, son compte en chiffre.
   ========================================================================= */
.series{border-top:var(--filet-fort)}
.serie{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,46%);gap:var(--s7);align-items:stretch;
  color:var(--encre);border-bottom:var(--filet);padding:var(--s7) 0;position:relative}
.serie::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--teinte)}
.serie:hover{text-decoration:none;background:var(--papier-2)}
.serie__texte{padding-left:var(--s6);max-width:56ch;display:flex;flex-direction:column}
.serie__numero{display:block;font-size:var(--t-micro);letter-spacing:.24em;font-weight:700;color:var(--teinte)}
.serie__nom{display:block;font-size:clamp(34px,4.4vw,60px);font-weight:800;letter-spacing:.01em;
  line-height:1;color:var(--teinte);margin-top:var(--s3)}
.serie__phrase{display:block;font-size:var(--t-h3);margin-top:var(--s4);letter-spacing:-.01em}
.serie__corps{display:block;color:var(--encre-60);margin-top:var(--s4);font-size:var(--t-small);line-height:1.6}
.serie__lien{display:block;margin-top:auto;padding-top:var(--s5);font-size:var(--t-small);
  font-weight:700;color:var(--signature)}
.serie__mosaique{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2);align-content:center}
.serie__mosaique picture,.serie__mosaique .reserve{border:var(--filet)}
.serie:hover .serie__mosaique picture{border-color:var(--teinte)}

/* Sur l'accueil, la même bande en plus serré. */
.series--compact{margin-top:var(--s5)}
.series--compact .serie{padding:var(--s5) 0;gap:var(--s6)}
.series--compact .serie__nom{font-size:clamp(26px,3vw,38px)}
.series--compact .serie__corps{display:none}
.series--compact .serie__phrase{font-size:var(--t-body);margin-top:var(--s2)}
.series--compact .serie__lien{padding-top:var(--s4)}
.series--compact .serie{grid-template-columns:minmax(0,1fr) minmax(260px,38%)}

/* =========================================================================
   GALERIE — l'œuvre, le détail, l'objet encadré, le mur.
   Rien ne défile tout seul : on choisit ce qu'on regarde.
   ========================================================================= */
.galerie__scene{border:var(--filet);background:var(--papier-2)}
.galerie__vue[hidden]{display:none}
.galerie__vue img{width:100%;object-fit:contain;background:var(--papier)}
.galerie__vignettes{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));
  gap:var(--s2);margin-top:var(--s3)}
.vignette{border:var(--filet);background:none;padding:0;cursor:pointer;display:block;text-align:left}
.vignette img{width:100%;aspect-ratio:1/1;object-fit:cover}
.vignette:hover{border-color:var(--encre)}
.vignette[aria-pressed="true"]{outline:2px solid var(--encre);outline-offset:-2px}
.galerie__legende{margin-top:var(--s3);font-size:var(--t-micro);letter-spacing:.18em;
  text-transform:uppercase;font-weight:600;color:var(--signature)}
.galerie__vignettes{margin-top:var(--s3)}

@media(max-width:1000px){
  .serie{grid-template-columns:1fr;gap:var(--s5)}
  .serie__mosaique{grid-template-columns:repeat(3,1fr)}
  .series--compact .serie__mosaique{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:520px){
  .serie__texte{padding-left:var(--s5)}
  .galerie__vignettes{grid-template-columns:repeat(auto-fill,minmax(68px,1fr))}
}