/* ============================================================================
   PORTFOLIO ARTHUR CATTER
   Feuille unique, en sections. Les valeurs modifiables sont toutes en haut.
   Direction artistique : voir CLAUDE.md à la racine du projet.

   Le site tient sur un seul écran, sans défilement. Le panneau de droite a
   trois états (DETAILS, PROJECT, CONTACT) ; le folio s'ouvre au centre du
   même écran et se feuillette par pli à plat.
   ============================================================================ */

/* ---------------------------------------------------------------- 1. VALEURS */

:root{
  /* Accueil — monochrome strict, aucune couleur */
  --noir:#111111;
  --blanc:#FFFFFF;
  --b62:#A5A5A5;              /* blanc 62 % : texte courant, filets */
  --b38:#6B6B6B;              /* blanc 38 % : données mono, micro-typo */

  /* Folio */
  --accent:#ECF0E8;           /* couleur d'accent unique, folio seulement */

  /* Emplacements de photo en attente — à remplacer par de vraies images */
  --ph-1:#DEDEDE;
  --ph-2:#CFCFCF;
  --ph-3:#BEBEBE;
  --ph-4:#A9A9A9;
  --ph-n:#2A2A2A;

  --sans:'Archivo','Helvetica Neue',Arial,sans-serif;
  --serif-text:'Source Serif 4',Georgia,serif;
  --serif-disp:'Playfair Display',Didot,Georgia,serif;
  --mono:'Courier Prime','Courier New',monospace;

  /* Accueil — géométrie relevée sur la maquette */
  --acc-marge:14vw;           /* marge gauche et droite, identiques */
  --acc-couv-h:84vh;          /* hauteur de la couverture */
  --acc-decalage:12px;        /* décalage de l'aplat du bouton */
  --acc-ecart:5.6vw;          /* écart entre la couverture et le panneau */

  /* Aplat du bouton d'ouverture.
     ATTENTION — cette valeur est la SEULE couleur de l'accueil, et elle rompt
     la règle du monochrome strict. Elle vient de la maquette du 14 août 2026.
     Mettre #FFFFFF ici rend l'accueil entièrement monochrome, sans rien
     casser d'autre. Voir brief/journal.md. */
  --bouton-aplat:#ECF0E8;

  /* Feuilletage — une page qui tourne autour de la reliure */
  --pli-duree:760ms;
  --pli-courbe:cubic-bezier(.38,.02,.28,1);
  --tranche:clamp(2px,.26vw,5px);   /* épaisseur du papier sur la tranche */
}

/* ------------------------------------------------------------------ 2. RESET */

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}   /* un seul écran, aucun défilement */
body{
  background:var(--noir);
  color:var(--blanc);
  font-family:var(--serif-text);
  -webkit-font-smoothing:antialiased;
}
img{display:block;width:100%;height:100%;object-fit:cover}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

/* ------------------------------------------------- 3. PRIMITIVES TYPOGRAPHIQUES */

.kicker  {font:500 clamp(10px,.94vw,18px)/1 var(--sans);text-transform:uppercase;letter-spacing:.28em}
.legende {font:400 clamp(9px,.63vw,12px)/1.4 var(--sans);text-transform:uppercase;letter-spacing:.14em}
.corps   {font:400 clamp(14px,1.02vw,19px)/1.5 var(--serif-text);text-align:justify;hyphens:auto;max-width:46ch}
.nom     {font:400 clamp(26px,2.29vw,44px)/1.1 var(--serif-disp)}
.tiret   {font:400 clamp(20px,1.6vw,30px)/1 var(--serif-text)}
.mono    {font:400 clamp(9px,.63vw,12px)/1.6 var(--mono);letter-spacing:.02em}

/* --------------------------------------------------------- 4. GESTES SIGNATURE */

/* Titre éclaté — chaque ligne est un flex à deux mots poussés aux deux bords.
   Ne jamais remplacer par text-align:justify, voir CLAUDE.md. */
.titre-eclate{
  font:600 clamp(38px,4.4vw,84px)/1.05 var(--sans);
  text-transform:uppercase;letter-spacing:.02em;
  width:min(100%,8.2em);
}
.titre-eclate .l{display:flex;justify-content:space-between;white-space:nowrap}
.titre-eclate .ini{margin-right:.34em}

/* Barre d'initiale */
.barre-ini{
  display:inline-block;vertical-align:-.06em;
  width:clamp(7px,.73vw,14px);height:.72em;
  background:currentColor;margin-right:.22em;
}

/* Bâtonnet plein + filet prolongateur */
.batonnet{display:block;position:relative;height:7px;background:currentColor;width:60%;margin-bottom:14px}
.batonnet::after{content:"";position:absolute;left:100%;top:50%;width:66.66%;height:.5px;background:currentColor}

/* Crédits verticaux */
.credits-v{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font:400 10px/1.6 var(--sans);text-transform:uppercase;letter-spacing:.16em;
  white-space:pre-line;
}

/* Nom serif suivi d'un filet qui dépasse */
.nom-filet{position:relative;padding-bottom:14px;margin-bottom:18px}
.nom-filet::after{content:"";position:absolute;left:-6%;right:22%;bottom:0;height:.5px;background:currentColor}

/* Emplacement de photo */
.ph{position:relative;background:var(--ph-2);overflow:hidden}
.ph--l{background:var(--ph-1)}
.ph--d{background:var(--ph-4)}
.ph--n{background:var(--ph-n)}
.ph>.tag{
  position:absolute;left:8px;bottom:6px;
  font:400 8px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:rgba(17,17,17,.34);
}
.ph--n>.tag{color:rgba(255,255,255,.32)}

/* La vraie image, quand le fichier existe : elle recouvre l'emplacement gris et
   son étiquette disparaît. Chaque emplacement porte déjà le nom de fichier qui
   lui revient — il suffit de déposer l'image dans assets/img/. Si le fichier
   est absent ou mal nommé, l'image se retire d'elle-même et le gris reste.
   La liste complète des noms est dans LISEZ-MOI.md. Aucun code à toucher. */
.ph>img{position:absolute;inset:0;z-index:2}
.ph:has(img)>.tag{display:none}

/* ------------------------------------------------------------- 5. NAVIGATION */

.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;
  padding:26px var(--acc-marge);
  mix-blend-mode:difference;color:#fff;
}
.nav a{color:inherit;text-decoration:none}
.nav .n-g{justify-self:start}
.nav .n-c{justify-self:center;font:400 clamp(11px,1.04vw,20px)/1 var(--serif-disp);text-transform:uppercase;letter-spacing:.34em}
.nav .n-d{justify-self:end;display:flex;align-items:center;gap:.9em}
.nav .curseur{display:inline-block;width:3px;height:1.25em;background:currentColor}

/* --------------------------------------------------------------- 6. ACCUEIL */

.accueil{
  height:100vh;background:var(--noir);
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(24px,var(--acc-ecart),var(--acc-ecart));
  padding:0 var(--acc-marge);
}

/* --- La couverture ------------------------------------------------------- */
/* Ratio du folio imprimé : 215 × 280. Le même que .spread--couv, et les deux
   changent toujours ensemble — le mouvement d'ouverture met la page à
   l'échelle par la largeur, un ratio différent ferait sauter la hauteur. */

.couv{
  position:relative;flex:none;
  height:var(--acc-couv-h);aspect-ratio:215/280;
  background:#F4F4F2;color:var(--noir);
  cursor:pointer;outline:none;
  container-type:inline-size;
}
.couv:focus-visible{outline:2px solid var(--blanc);outline-offset:6px}

/* La vraie couverture, quand le fichier existe. Elle recouvre le placeholder.
   Voir index.html : elle se retire seule si le fichier est absent. */
.couv-img{position:absolute;inset:0;z-index:5}

.couv-tete{position:absolute;top:5.4cqw;left:5.4cqw;right:5.4cqw;display:flex;justify-content:space-between;align-items:baseline}
.couv-tete span{font:400 2.1cqw/1 var(--sans);text-transform:uppercase;letter-spacing:.14em}
.couv-tete .d{position:relative;padding-left:12cqw}
.couv-tete .d::before{content:"";position:absolute;left:0;top:.34em;width:10cqw;height:.9cqw;background:var(--noir)}

/* PORTFOLIO à la verticale */
.couv-mot{
  position:absolute;left:2.6cqw;bottom:4cqw;
  writing-mode:vertical-rl;transform:rotate(180deg);
  font:700 20cqw/.86 var(--sans);letter-spacing:-.02em;
}
.couv-onglet{
  position:absolute;left:26.5cqw;bottom:26cqw;
  writing-mode:vertical-rl;transform:rotate(180deg);
  background:var(--noir);color:#F4F4F2;
  font:600 2.1cqw/1 var(--sans);letter-spacing:.1em;
  padding:2.4cqw .7cqw;
}
.couv-filet{position:absolute;left:27.3cqw;bottom:40cqw;width:.7cqw;height:24cqw;background:var(--noir)}
.couv-sous{
  position:absolute;left:26.2cqw;bottom:4cqw;
  writing-mode:vertical-rl;transform:rotate(180deg);
  background:var(--noir);color:#F4F4F2;
  font:600 2.2cqw/1 var(--sans);padding:1.6cqw .6cqw;
}

/* Bloc de données + code-barres */
.couv-data{position:absolute;right:5.4cqw;top:29cqw;width:52cqw;text-align:right}
.couv-data .adr{font:400 2.4cqw/1.4 var(--mono)}
.couv-data .dat{display:flex;justify-content:space-between;font:400 2.1cqw/1.4 var(--mono);margin-top:2.6cqw}
.couv-data svg{width:100%;height:9cqw;margin-top:1.4cqw;display:block}
.couv-data .num{display:flex;justify-content:space-between;font:400 2cqw/1 var(--mono);margin-top:.6cqw}

/* Planche de croquis, avec son aplat noir décalé */
.couv-planche{position:absolute;right:5.4cqw;bottom:5.4cqw;width:52cqw;aspect-ratio:1/1.32}
.couv-planche::before{content:"";position:absolute;left:-4cqw;top:-2.4cqw;width:100%;height:100%;background:var(--noir)}
.couv-planche .ph{position:absolute;inset:0}

/* --- Le panneau — la seule zone variable du site ------------------------- */
/* Trois états empilés au même endroit : DETAILS (défaut), PROJECT, CONTACT.
   La navigation passe de l'un à l'autre par simple effacement, sans
   glissement ni recouvrement. */

.panneau{
  position:relative;flex:1;min-width:0;
  height:var(--acc-couv-h);
  transition:opacity .3s;
}

.p-etat{
  position:absolute;inset:0;
  padding-right:34px;                 /* place pour les crédits verticaux */
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;
  transition:opacity .26s ease,visibility 0s .26s;
}
.p-etat.actif{opacity:1;visibility:visible;transition:opacity .26s ease}

.det-tete{
  display:flex;justify-content:space-between;align-items:baseline;
  padding-bottom:12px;border-bottom:.5px solid var(--b62);
  flex:none;
}
.det-tete .d{color:var(--b38)}

/* --- L'état DETAILS ------------------------------------------------------ */
/* Géométrie relevée sur la maquette Claude Design du 14 août 2026, panneau de
   816 × 1218 dans un écran de 2600 × 1462. Les valeurs sont exprimées en
   proportions du panneau, pour tenir à toute taille d'écran.

   Il n'y a volontairement ni en-tête ni titre : le haut du panneau est un
   simple filet, suivi d'un grand vide. C'est le vide qui porte le regard
   jusqu'au bouton. */

.p-filet{display:block;height:.5px;background:var(--blanc);flex:none}
.p-vide{height:26.3%;flex:none}          /* 320 px sur 1218 */

/* La ligne d'action : le carré à gauche, le filet et la référence à droite */
.p-action{display:flex;align-items:center;gap:5.9%;flex:none}   /* 48 px sur 816 */
.p-action-d{flex:1;min-width:0;display:flex;flex-direction:column;gap:clamp(8px,.7vw,18px)}
.p-label{display:flex;align-items:center;gap:clamp(14px,1.23vw,32px)}
.p-label i{flex:1;height:.5px;background:var(--blanc)}
.p-ref{align-self:flex-end;color:var(--b38)}

.panneau .batonnet{margin-top:2.6rem;background:var(--blanc)}
.panneau .batonnet::after{background:var(--b62)}
.panneau .corps{color:var(--b62)}
.panneau .donnees{margin-top:1.7rem;color:var(--b38)}
.panneau .nom{color:var(--blanc)}
.panneau .nom-filet::after{background:var(--b62)}
.panneau .tiret{margin-top:2.2rem;color:var(--b62)}

/* Listes des états PROJECT et CONTACT */
.p-liste{margin-top:auto}
.ligne{display:flex;justify-content:space-between;gap:14px;padding:11px 0;color:var(--b62)}
.ligne span:last-child{color:var(--b38)}

.panneau .credits-v{
  position:absolute;right:0;bottom:0;color:var(--b38);
}

/* Quand le folio est ouvert, le panneau s'efface — la couverture est cachée
   par folio.js au même moment. */
.accueil.folio-ouvert .panneau{opacity:0;pointer-events:none}

/* --- Le bouton ----------------------------------------------------------- */
/* Un carré, pas un bandeau. 322 px sur un panneau de 816, soit 39,5 % de sa
   largeur. Trois états, uniquement par décalage de l'aplat : repos −12 px,
   survol 0, pressé +12 px. Rien d'autre ne change — ni ombre, ni
   agrandissement, ni couleur. */

.bouton-ouvrir{
  position:relative;display:block;flex:none;
  width:39.5%;aspect-ratio:1/1;height:auto;
}
.bouton-ouvrir::before{               /* le carré de contour */
  content:"";position:absolute;inset:0;border:.5px solid var(--blanc);
}
.bouton-ouvrir .aplat{
  position:absolute;inset:0;
  background:var(--bouton-aplat);color:var(--noir);
  display:flex;align-items:flex-end;padding:7.45%;   /* 24 px sur 322 */
  font:500 clamp(10px,.94vw,18px)/1.3 var(--sans);
  text-transform:uppercase;letter-spacing:.28em;
  transform:translate(calc(-1 * var(--acc-decalage)),calc(-1 * var(--acc-decalage)));
  transition:transform 160ms cubic-bezier(.2,0,0,1);
}
.bouton-ouvrir:hover .aplat,
.bouton-ouvrir:focus-visible .aplat{transform:translate(0,0)}
.bouton-ouvrir:active .aplat{transform:translate(var(--acc-decalage),var(--acc-decalage))}

@media (prefers-reduced-motion:reduce){
  .bouton-ouvrir .aplat{transition:none}
  .p-etat{transition:none}
}

/* ------------------------------------------------------------------ 7. FOLIO */
/* Superposé à l'écran, fond transparent : le noir et la navigation restent
   visibles. La pile centre les doubles pages ; une seule est visible à la
   fois, le feuilletage se fait par pli à plat (voir folio.js). */

.folio{position:fixed;inset:0;z-index:50;display:none}
.folio.on{display:block}
.folio.fondu{opacity:0;transition:opacity .3s ease}

.scene{position:absolute;inset:0;display:grid;place-items:center;padding:96px 5vw 84px}

/* Format du folio imprimé : double page 430 × 280, page 215 × 280.
   Les trois ratios (.couv, .spread--couv, .pile) changent toujours ensemble. */
.pile{
  --pile-l:min(86vw,calc((100vh - 200px) * 430 / 280));
  position:relative;
  width:var(--pile-l);
  aspect-ratio:430/280;
  /* La profondeur du feuilletage. Proportionnelle à la largeur de la pile,
     sinon l'effet est violent sur petit écran et inexistant sur grand.
     Plus la valeur est petite, plus la perspective est forte — et plus la
     feuille déborde en haut et en bas quand elle passe près de l'œil.
     À 3,4 le volume se voit encore franchement — la feuille ne perd que 5 %
     de largeur projetée par rapport à 2,6 — et elle passe sous le texte de
     la navigation au lieu de le traverser. */
  perspective:calc(var(--pile-l) * 3.4);
  perspective-origin:50% 50%;
}

.spread{
  background:var(--blanc);color:var(--noir);
  container-type:size;
  outline:.5px solid rgba(17,17,17,.18);
}
.pile>.spread{position:absolute;inset:0;visibility:hidden}
.pile>.spread.vis{visibility:visible}
.spread--dark{background:var(--noir);color:var(--blanc)}

/* La couverture. Le bloc occupe toute la double page comme les autres — c'est
   sa moitié gauche qui est vide, puisqu'un magazine fermé ne montre rien à
   gauche de sa reliure. La page elle-même est .couv-page, sur la moitié
   droite. Grâce à ça, l'ouverture n'est pas un cas particulier : c'est le
   premier tour de page, avec un recto (la couverture) et un verso (la page 2). */
.spread--couv{background:transparent;outline:none}
.couv-page{
  position:absolute;right:0;top:0;bottom:0;width:50%;
  background:#F4F4F2;color:var(--noir);
  container-type:inline-size;
  outline:.5px solid rgba(17,17,17,.18);
  will-change:transform;
}

/* Double page DÉJÀ MAQUETTÉE dans Illustrator : l'image occupe toute la double
   page, il n'y a aucune mise en page codée dessous. Export : 430 × 280 mm,
   soit 3386 × 2205 px. Déposer le fichier dans assets/img/, il se met en place
   seul ; s'il manque, l'emplacement gris reste avec son étiquette. */
.spread--maquette{background:var(--ph-1)}
.spread--maquette>img{position:absolute;inset:0;z-index:3}
.spread--maquette>.tag{
  position:absolute;left:1.4cqw;bottom:1.4cqh;z-index:4;
  font:400 .62cqw/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:rgba(17,17,17,.34);
}
.spread--maquette:has(img)>.tag{display:none}

/* --- Le tour de page en volume -------------------------------------------- */
/* La feuille tourne autour de la reliure, comme une vraie page. Elle a un
   recto, un verso, une tranche, et elle porte ombre sur la page dessous.
   Perspective et ombre sont normalement interdites par la direction
   artistique : elles sont levées ici, et ici seulement, à la demande du
   client — voir brief/journal.md.

   Sous la feuille, deux moitiés restent à plat : celle de gauche et celle de
   droite, découpées au clip-path. La feuille passe de l'une à l'autre. */

.spread.clip-g{clip-path:inset(0 50% 0 0)}   /* ne garde que la moitié gauche */
.spread.clip-d{clip-path:inset(0 0 0 50%)}   /* ne garde que la moitié droite */

.feuille{
  position:absolute;top:0;bottom:0;left:50%;width:50%;
  transform-origin:left center;        /* la reliure, au centre de la pile */
  transform-style:preserve-3d;
  z-index:12;will-change:transform;
}

/* Les deux faces. Chacune contient une double page entière au double de sa
   largeur, décalée pour n'en montrer que la moitié utile : à droite pour le
   recto, à gauche pour le verso. */
.face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden}
.face--ar{transform:rotateY(180deg)}
.face>.spread{position:absolute;top:0;bottom:0;width:200%;height:100%;visibility:visible}
.face--av>.spread{right:0}
.face--ar>.spread{left:0}

/* Le voile : le papier s'assombrit en se mettant de chant, et se rallume à
   plat. C'est ce qui donne son poids au mouvement. */
.voile{position:absolute;inset:0;background:var(--noir);opacity:0;pointer-events:none;z-index:6}

/* La tranche : l'épaisseur du papier, dressée perpendiculairement au bord
   libre. Invisible quand la page est à plat, elle apparaît d'elle-même quand
   la feuille se met de chant — c'est exactement ce que fait une vraie page. */
.tranche{
  position:absolute;top:0;bottom:0;right:0;
  width:var(--tranche);
  transform-origin:right center;
  transform:rotateY(90deg);
  background:linear-gradient(to bottom,#c4c4bf,#f4f4f0 18%,#e6e6e1 74%,#bdbdb8);
  z-index:5;
}
/* Le liseré clair sur le bord libre, vu de face : la lumière qui accroche la
   tranche. Côté opposé à la reliure sur chaque face. */
.face::after{
  content:"";position:absolute;top:0;bottom:0;z-index:4;pointer-events:none;
  width:calc(var(--tranche) * 2.4);
}
.face--av::after{right:0;background:linear-gradient(to left,rgba(255,255,255,.9),rgba(255,255,255,0))}
.face--ar::after{left:0;background:linear-gradient(to right,rgba(255,255,255,.9),rgba(255,255,255,0))}

/* L'ombre portée sur les pages restées à plat. À droite elle s'efface pendant
   que la feuille se lève ; à gauche elle se forme pendant qu'elle descend. */
.ombre-portee{position:absolute;top:0;bottom:0;pointer-events:none;z-index:11}
.ombre-portee--d{left:50%;right:0;background:linear-gradient(to right,rgba(17,17,17,.46),rgba(17,17,17,.08) 54%,rgba(17,17,17,0))}
.ombre-portee--g{left:0;right:50%;background:linear-gradient(to left,rgba(17,17,17,.46),rgba(17,17,17,.08) 54%,rgba(17,17,17,0))}

@keyframes pli-feuille{from{transform:rotateY(0deg)}to{transform:rotateY(-180deg)}}
@keyframes pli-voile-av{0%{opacity:0}52%{opacity:.44}100%{opacity:.44}}
@keyframes pli-voile-ar{0%{opacity:.48}48%{opacity:.42}100%{opacity:0}}
@keyframes pli-ombre-d{0%{opacity:.95}100%{opacity:0}}
@keyframes pli-ombre-g{0%{opacity:0}100%{opacity:.95}}

/* --- Le compteur ---------------------------------------------------------- */
/* Seul repère à l'écran. Pas de barre d'outils : Échap ou un clic hors de la
   page referment le folio. */

.folio .compte{
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
  color:var(--b38);letter-spacing:.2em;
  opacity:0;transition:opacity .4s ease .15s;
}
.folio.lit .compte{opacity:1}

/* --- Typographie interne aux doubles pages : en cqw, jamais en px --------- */

.spread .pli{position:absolute;left:50%;top:0;bottom:0;width:.5px;background:rgba(17,17,17,.13);z-index:9;pointer-events:none}
.spread--dark .pli{background:rgba(255,255,255,.16)}
.spread .pg{position:absolute;top:0;bottom:0;width:50%}
.spread .pg--l{left:0}
.spread .pg--r{right:0}
.spread .fol{position:absolute;bottom:2.4cqh;font:400 .62cqw/1 var(--sans);letter-spacing:.08em}
.spread .fol--l{left:3.2cqw}
.spread .fol--r{right:3.2cqw}

.s-kicker  {font:500 .82cqw/1 var(--sans);text-transform:uppercase;letter-spacing:.28em}
.s-micro   {font:400 .52cqw/1.5 var(--sans);text-transform:uppercase;letter-spacing:.18em}
.s-legende {font:400 .62cqw/1.4 var(--sans);text-transform:uppercase;letter-spacing:.14em}
.s-corps   {font:400 .84cqw/1.55 var(--serif-text);text-align:justify;hyphens:auto;max-width:46ch}
.s-nom     {font:400 2.1cqw/1.08 var(--serif-disp)}
.s-exergue {font:500 1.25cqw/1.3 var(--sans);text-transform:uppercase;letter-spacing:.16em}
.s-tiret   {font:400 1.7cqw/1 var(--serif-text)}
.s-titre   {font:600 5cqw/1.04 var(--sans);text-transform:uppercase;letter-spacing:.02em;width:min(100%,8.2em)}
.s-titre .l{display:flex;justify-content:space-between;white-space:nowrap}
.s-barre   {display:inline-block;width:.82cqw;height:.72em;background:var(--accent);vertical-align:-.06em;margin-right:.22em}
.s-batonnet{position:relative;height:.42cqw;background:currentColor;width:60%;margin-bottom:1.4cqh}
.s-batonnet::after{content:"";position:absolute;left:100%;top:50%;width:66%;height:.5px;background:currentColor}
.s-credits {writing-mode:vertical-rl;transform:rotate(180deg);font:400 .52cqw/1.6 var(--sans);text-transform:uppercase;letter-spacing:.18em;white-space:pre-line}

.pad{padding:5cqh 3.25cqw}
.pg--l.pad{padding-right:2.2cqw}
.pg--r.pad{padding-left:2.2cqw}
.stack{display:flex;flex-direction:column;height:100%}
.push{margin-top:auto}
.bleed{position:absolute;inset:0}
.s-liste .l2{display:flex;justify-content:space-between;gap:1.4cqw;padding:1.45cqh 0}
.s-liste .l2 span:last-child{opacity:.55}
.s-bande{display:grid;grid-template-columns:repeat(5,1fr)}
.s-bande .ph{aspect-ratio:1/1.15}
.s-bandeau{background:var(--accent);color:var(--noir);display:flex;justify-content:space-between;align-items:center;padding:1.6cqh 3.25cqw}
.s-bandeau .mono-m{position:relative;font:500 .82cqw/1 var(--sans);letter-spacing:.2em;padding-right:1.6cqw}
.s-bandeau .mono-m::after{content:"";position:absolute;right:0;top:-.35cqh;width:1px;height:1.6cqh;background:var(--noir);transform:rotate(22deg)}
.s-bandeau .infos{text-align:right}
.s-bandeau .infos .n{font:400 .8cqw/1.2 var(--sans);text-transform:uppercase;letter-spacing:.18em}
.s-bandeau .infos .t{font:500 italic .95cqw/1.25 var(--serif-disp)}
.s-aplat{position:relative}
.s-aplat::before{content:"";position:absolute;left:-1.5cqw;bottom:-1.5cqh;width:72%;height:56%;background:var(--accent);z-index:0}
.s-aplat>*{position:relative;z-index:1}
.s-nom-filet{position:relative;padding-bottom:1.2cqh;margin-bottom:1.6cqh}
.s-nom-filet::after{content:"";position:absolute;left:-8%;right:24%;bottom:0;height:.5px;background:currentColor}
.s-carre{aspect-ratio:1/1;position:relative;margin:0 auto}
.s-carre::after{content:"";position:absolute;inset:.7cqw;border:.5px solid rgba(255,255,255,.85)}

/* ------------------------------------------------------------- 8. RESPONSIVE */

@media (max-width:1100px){
  :root{--acc-marge:8vw}
}
@media (max-width:820px){
  :root{--acc-marge:24px;--acc-couv-h:56vh}
  /* L'accueil empilé dépasse la hauteur d'écran : il faut lui rendre le
     défilement ET la hauteur libre. Garder height:100% ici bloquerait le
     document à la taille de l'écran alors que le contenu est plus haut —
     selon le navigateur, ça défile ou ça coupe. */
  html,body{height:auto;overflow:auto}
  .accueil{height:auto;min-height:100vh;flex-direction:column;justify-content:center;gap:42px;padding-block:110px 60px}
  .panneau{height:auto;width:100%;min-height:60vh}
  .p-etat{position:relative;inset:auto;padding-right:0}
  .p-etat:not(.actif){display:none}
  .panneau .credits-v{display:none}
  /* Le panneau n'a plus de hauteur définie : le vide se mesure sur l'écran,
     et le carré ne peut plus se dimensionner en pourcentage sans devenir
     minuscule. */
  .p-vide{height:clamp(20px,7vh,56px)}
  /* Côte à côte, le filet et la référence n'auraient plus que 140 px : on les
     passe sous le carré, où ils retrouvent toute la largeur. */
  .p-action{flex-direction:column;align-items:stretch;gap:20px}
  .p-action-d{width:100%}
  .bouton-ouvrir{width:min(52%,220px)}
  .nav{padding:18px 24px}
  .nav .n-c{display:none}
  .scene{padding:76px 3vw 66px}
  .pile{width:94vw}
}