/* Parti pris assumé : un seul ton, clair, comme le site de référence.
   Pas de thème sombre — toutes les couleurs sont donc posées explicitement,
   y compris le fond, pour que la page tienne quel que soit le navigateur. */
:root{
  --fond:#FFFFFF;
  --encre:#3F3F3D;          /* jamais de noir pur dans le texte */
  --encre-forte:#232322;
  --gris:#9B9B98;
  --filet:#E6E5E2;
  --cadre:#1A1A18;          /* le filet noir autour des images */
  --creux:#F2F1EE;
  --f:"Jost","Futura","Century Gothic",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fond);color:var(--encre);
  font-family:var(--f);font-weight:300;font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
:focus-visible{outline:1px solid var(--encre);outline-offset:4px}

.page{display:grid;grid-template-columns:17rem minmax(0,1fr);
  gap:0 3rem;max-width:120rem;margin:0 auto;padding:2.6rem 2.5rem 2rem}

.colonne{position:sticky;top:2.6rem;align-self:start}
.marque{display:block;font-size:1.72rem;font-weight:400;letter-spacing:-.005em;
  line-height:1.15;color:var(--encre-forte);margin-bottom:2.6rem}
.groupe{font-size:.86rem;color:var(--gris);margin:0 0 .5rem;font-weight:300}
.bloc{margin:0 0 1.9rem}
.bloc > summary{font-size:.86rem;color:var(--gris);font-weight:300;
  cursor:pointer;list-style:none;display:flex;align-items:center;gap:.5rem;
  margin:0 0 .5rem;transition:color .15s}
.bloc > summary::-webkit-details-marker{display:none}
.bloc > summary:hover{color:var(--encre)}
.bloc > summary::before{content:"›";display:inline-block;font-size:1rem;line-height:1;
  transform:rotate(90deg);transform-origin:center;transition:transform .18s ease}
.bloc:not([open]) > summary::before{transform:rotate(0deg)}
.bloc ul{margin:0}
.hors-groupe{margin:0;font-size:.94rem}
.hors-groupe a{transition:color .15s}
.hors-groupe a:hover{color:var(--encre-forte)}
.colonne ul{list-style:none;margin:0 0 2.2rem;padding:0}
.colonne li{margin:0 0 .28rem}
.colonne li a{font-size:.94rem;position:relative;transition:color .15s}
.colonne li a:hover{color:var(--encre-forte)}
.colonne li a[aria-current]{color:var(--encre-forte)}
.colonne li a[aria-current]::before{content:"›";position:absolute;left:-.8rem;color:var(--gris)}

.entete{display:grid;grid-template-columns:5rem minmax(0,1fr);gap:0 1.2rem;
  align-items:baseline;margin-bottom:.4rem}
.annee{font-size:.94rem;color:var(--gris)}
.titre{font-size:.94rem;font-weight:400;color:var(--encre-forte);margin:0}
.recit{margin:.2rem 0 0 6.2rem;max-width:66ch;font-size:.97rem;line-height:1.62}
.mention{margin:1rem 0 0 6.2rem;font-size:.84rem;color:var(--gris)}

/* ---- le carrousel : une photographie à la fois ---- */
.lecture{margin:1.2rem 0 0}
.numero{font-size:.84rem;color:var(--gris);margin:0 0 .5rem;font-variant-numeric:tabular-nums}
.scene{display:flex;justify-content:center;align-items:flex-start}
.scene figure{margin:0;display:none}
.scene figure.courante{display:block}
/* Le cadre porte le filet et reçoit sa taille du script, calculée sur la place
   réellement libre. L'image le remplit à 100 % : le rapport vient donc du cadre,
   qui est lui-même calculé depuis les dimensions d'origine — impossible de
   déformer. Sans JavaScript, on retombe sur un dimensionnement CSS classique. */
/* Le cadre ne reçoit QUE sa largeur ; sa hauteur est celle de l'image, déduite
   par le navigateur du rapport du fichier. Aucun arrondi ne peut donc créer de
   liseré entre le filet et la photographie. */
.scene figure.courante{display:block;box-sizing:content-box;
  border:4px solid var(--cadre);background:var(--cadre);max-width:100%;line-height:0}
.scene img{display:block;width:100%;height:auto;
  opacity:0;transition:opacity .35s ease}
.scene img.chargee{opacity:1}
.sans-js .scene figure{box-sizing:content-box;border:4px solid var(--cadre)}
.sans-js .scene img{width:auto;height:auto;max-width:min(100%, 92rem);
  max-height:calc(100vh - 19.6rem);opacity:1}

.tourne{display:flex;justify-content:space-between;align-items:center;
  margin:1.2rem 0 0;gap:1rem}
.tourne button{background:none;border:0;padding:.4rem 0;cursor:pointer;color:var(--encre);
  font:inherit;font-size:.78rem;font-weight:300;letter-spacing:.24em;text-transform:uppercase;
  line-height:1.35;text-align:left;display:flex;align-items:center;gap:.9rem}
.tourne button:last-child{text-align:right;flex-direction:row-reverse}
.tourne button:hover{color:var(--encre-forte)}
.tourne button[disabled]{opacity:.25;cursor:default}
.tourne .chevron{font-size:1.9rem;line-height:1;font-weight:200;color:var(--gris)}

/* sans JavaScript, on retombe sur un simple défilement */
.sans-js .scene figure{display:block;margin-bottom:2.4rem}
.sans-js .tourne{display:none}

/* ---- accueil et index de rubrique ---- */
.accueil-image{display:block;margin-top:.6rem}
.accueil-image img{box-sizing:content-box;border:4px solid var(--cadre);
  width:auto;height:auto;max-width:min(100%, 92rem);max-height:calc(100vh - 14rem);
  object-fit:contain}
.series{list-style:none;margin:2.4rem 0 0;padding:0;align-items:start;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:2.4rem 1.6rem}
.serie a{display:flex;flex-direction:column;gap:.55rem}
.serie .cadre{background:var(--creux);border:4px solid var(--cadre);box-sizing:content-box}
.serie .cadre img{width:100%;height:auto;display:block;transition:opacity .3s}
.serie a:hover .cadre img{opacity:.82}
.serie .nom{font-size:1.02rem;color:var(--encre-forte)}
.serie .meta{font-size:.84rem;color:var(--gris)}

.pied{margin:2rem 0 0 6.2rem;font-size:.84rem;color:var(--gris);
  display:flex;flex-wrap:wrap;gap:.2rem 1.4rem}
.pied a{border-bottom:1px solid var(--filet)}
.pied a:hover{color:var(--encre)}

@media (max-width:900px){
  .page{grid-template-columns:minmax(0,1fr);gap:2rem;padding:2rem 1.2rem 3rem}
  .colonne{position:static}
  .marque{margin-bottom:1.6rem}
  .colonne ul{margin-bottom:1.4rem}
  .entete{grid-template-columns:minmax(0,1fr);gap:0}
  .recit,.mention,.pied{margin-left:0}
  .scene img{max-height:none}
  .tourne button{font-size:.7rem;letter-spacing:.18em}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.001ms !important}}