/* =============================================================================
   PORTFOLIO ROBIN — Feuille de style du book
   Direction : galerie sombre. Les œuvres portent la couleur, l'interface non.
   ============================================================================= */

/* Fontes auto-hébergées — aucun appel à Google Fonts (performances et RGPD).
   · Newsreader : sérif de titraille et de citation, fonte VARIABLE, ce qui permet
     d'épaissir légèrement les petits corps. Sur fond noir, un texte clair paraît
     toujours plus maigre qu'il ne l'est : pouvoir régler la graisse au dixième
     près, corps par corps, est exactement ce qu'il faut ici.
     Licence OFL 1.1, voir fonts/Newsreader-OFL.txt.
   · Inter Display : fonte d'interface, reprise de votre dossier 7-SITES/fonts. */
@font-face{
  font-family:"Newsreader";
  src:url("../fonts/Newsreader-Variable-latin.woff2") format("woff2");
  font-weight:200 800;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Newsreader";
  src:url("../fonts/Newsreader-Variable-Italic-latin.woff2") format("woff2");
  font-weight:200 800;font-style:italic;font-display:swap;
}
@font-face{
  font-family:"Inter Display";
  src:url("../fonts/InterDisplay-Regular-latin.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}

:root{
  --noir:      #0a0a0b;
  --noir-2:    #0f0f11;
  --bord:      rgba(255,255,255,.10);
  --bord-fort: rgba(255,255,255,.18);
  --texte:     #ece8e1;
  --texte-2:   #a49e94;
  --texte-3:   #6f6a62;
  --or:        #c2a05e;
  --or-clair:  #e0c48c;

  --or-sourd:  rgba(194,160,94,.30);
  --or-tenu:   rgba(194,160,94,.14);

  --serif: "Newsreader","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:  "Inter Display",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;

  --page: min(1680px, 94vw);
  --lisible: 62ch;
  --rail: 264px;          /* largeur du rail déplié, au survol */
  --rail-repos: 64px;     /* largeur qu'il occupe au repos, traits compris */
  --cart: 344px;
  --cart-gap: 40px;
  --h-max: 88svh;
  --h-max-portrait: 82svh;
  --t: cubic-bezier(.16,.84,.34,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

body{
  margin:0;background:var(--noir);color:var(--texte);
  font-family:var(--sans);font-size:16px;line-height:1.65;
  font-feature-settings:"kern" 1,"liga" 1,"tnum" 1;   /* chiffres alignés */
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
body.is-locked{overflow:hidden}
/* Pendant l'écran d'attente : rien ne défile, rien ne clignote. */
body.is-booting{overflow:hidden}

img{display:block;max-width:100%}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;margin:0;letter-spacing:.005em}
/* Compensation optique : un grand titre clair sur fond noir « grossit » à l'œil,
   on l'affine ; un petit titre s'efface, on l'épaissit. */
.cover h1{font-weight:360}
.chapter-head h2{font-weight:380}
.cartouche h3{font-weight:440}
.toc__title{font-weight:420}
a{color:inherit}
:focus-visible{outline:2px solid var(--or);outline-offset:3px}

/* Vignettage : la lumière tombe au centre, les bords s'éteignent.
   C'est ce qui donne la profondeur d'une salle plutôt que d'un écran. */
body::before{
  content:"";position:fixed;inset:0;z-index:100;pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 38%,transparent 52%,rgba(0,0,0,.58) 100%);
}

/* Grain : évite l'aplat numérique d'un noir pur, imite le mur de galerie. */
body::after{
  content:"";position:fixed;inset:0;z-index:400;pointer-events:none;opacity:.30;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* ============================================================ écran d'attente */
.boot{
  position:fixed;inset:0;z-index:600;background:var(--noir);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .8s var(--t),visibility .8s
}
.boot.is-done{opacity:0;visibility:hidden}
.boot__inner{text-align:center;width:min(320px,72vw)}
.boot__name{
  font-family:var(--serif);font-size:clamp(26px,4vw,38px);margin:0 0 26px;
  letter-spacing:.02em;color:var(--texte);
  animation:bootIn 1.2s var(--t) both
}
@keyframes bootIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.boot__bar{height:1px;background:var(--bord);overflow:hidden}
.boot__bar i{
  display:block;height:100%;width:0;background:var(--or);
  transition:width .5s var(--t)
}
/* Tant que le script n'a pas pris la main (connexion très lente), la barre
   respire d'elle-même : elle ne doit jamais paraître figée. */
.boot__bar:not(.is-js) i{width:26%;animation:bootIdle 1.7s var(--t) infinite}
@keyframes bootIdle{from{transform:translateX(-110%)}to{transform:translateX(400%)}}
.boot__hint{
  margin:18px 0 0;font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--texte-3);min-height:1.2em
}
/* Le contenu n'apparaît qu'une fois l'écran d'attente parti. */
body.is-booting .cover__inner,
body.is-booting .scroll-cue{opacity:0}
.cover__inner,.scroll-cue{transition:opacity 1s var(--t) .1s}

/* ================================================= barre de progression du book */
.progress{
  position:fixed;top:0;left:0;height:2px;z-index:300;width:0;
  background:linear-gradient(90deg,rgba(194,160,94,0),var(--or));transition:width .1s linear
}

/* ================================================================= ouverture */
/* La couverture tient TOUJOURS dans la hauteur de l'écran : deux rangées, le
   contenu centré et l'invitation à défiler posée en bas, dans le flux. Ainsi
   elle ne peut plus être repoussée hors du champ par un portrait un peu haut. */
.cover{
  position:relative;min-height:100svh;
  display:grid;grid-template-rows:1fr auto;row-gap:clamp(20px,4svh,52px);
  padding:clamp(18px,3vw,44px) 0 clamp(22px,3.5svh,40px)
}
.cover__inner{
  width:var(--page);margin-inline:auto;align-self:center;
  display:grid;gap:clamp(30px,5vw,88px);
  grid-template-columns:minmax(0,1fr) minmax(260px,34%);align-items:center
}
.cover__inner:only-child,
.cover__inner:has(.cover__text:only-child){grid-template-columns:minmax(0,1fr)}
.cover__text{max-width:var(--lisible)}

.eyebrow{
  display:flex;align-items:center;gap:14px;
  font-size:10.5px;letter-spacing:.36em;text-transform:uppercase;
  color:var(--or);margin:0 0 min(clamp(14px,2.4vw,26px), 3svh)
}
.eyebrow::before{
  content:"";width:clamp(26px,3vw,46px);height:1px;flex:none;
  background:linear-gradient(90deg,transparent,var(--or))
}

/* Le nom : dégradé très léger du blanc chaud vers l'ivoire éteint —
   l'effet d'une lettre gravée qui capte la lumière par le haut. */
.cover h1{
  font-size:min(clamp(46px,8.6vw,124px), 17svh);line-height:.94;letter-spacing:-.025em;
  margin-bottom:.16em;color:var(--texte);
  background:linear-gradient(177deg,#fdfaf5 18%,#efe8db 58%,#d2cabb 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
@supports not (-webkit-background-clip:text){.cover h1{-webkit-text-fill-color:currentColor}}

.cover__headline{
  font-family:var(--serif);font-style:italic;font-weight:380;
  font-size:min(clamp(17px,2.1vw,26px), 3.6svh);
  color:var(--texte-2);margin:0 0 min(clamp(16px,2.4vw,30px), 3.4svh);line-height:1.4
}
.cover__intro p{color:var(--texte-2);margin:0 0 .9em;
  font-size:min(15.5px, 2.15svh);line-height:1.72}
.cover__intro p:first-child::first-letter{
  font-family:var(--serif);float:left;font-size:3.4em;line-height:.82;
  padding:.06em .12em 0 0;color:var(--or)
}
.cover__meta{
  display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:min(clamp(18px,2.4vw,30px), 3svh);
  padding-top:min(20px, 2.6svh);position:relative;
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--texte-3)
}
.cover__meta::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,var(--or-sourd),rgba(255,255,255,.06) 55%,transparent)
}
.cover__meta a{
  text-decoration:none;border-bottom:1px solid var(--or-tenu);padding-bottom:3px;
  color:var(--texte-2);transition:color .35s var(--t),border-color .35s var(--t)
}
.cover__meta a:hover{color:var(--or-clair);border-color:var(--or)}

/* ---------------------------------------------------------------- le portrait
   Cadre volontairement sobre : un filet clair d'un pixel, une ombre portée
   profonde, un halo neutre. Rien d'autre — c'est le portrait qu'on regarde,
   pas son encadrement. Le filet reste nécessaire : sans lui, une photo sombre
   se fondrait dans le fond de la page. */
.portrait{position:relative;margin:0;display:flex;justify-content:center;
  transform:translateY(var(--shift,0px));will-change:transform}
.portrait::before{
  content:"";position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);
  width:170%;height:135%;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 42%,rgba(255,255,255,.07),transparent 64%)
}
.portrait__mat{
  position:relative;z-index:1;
  border:1px solid rgba(255,255,255,.13);
  box-shadow:
    0 48px 100px -42px rgba(0,0,0,1),
    0 6px 20px -10px rgba(0,0,0,.72)
}
.portrait img{
  display:block;width:auto;max-width:100%;
  max-height:min(58svh,620px);
  filter:saturate(1.03) contrast(1.02);
  clip-path:inset(0 0 100% 0);transform:scale(1.05);transform-origin:50% 40%;
  transition:clip-path 1.5s var(--t) .2s,transform 2.4s var(--t) .2s
}
body:not(.is-booting) .portrait img{clip-path:inset(0 0 0 0);transform:none}

/* Entrée échelonnée du texte de couverture, une fois l'écran d'attente parti. */
@keyframes coverIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
body:not(.is-booting) .cover__text > *{animation:coverIn 1s var(--t) both}
body:not(.is-booting) .cover__text > *:nth-child(1){animation-delay:.10s}
body:not(.is-booting) .cover__text > *:nth-child(2){animation-delay:.20s}
body:not(.is-booting) .cover__text > *:nth-child(3){animation-delay:.32s}
body:not(.is-booting) .cover__text > *:nth-child(4){animation-delay:.44s}
body:not(.is-booting) .cover__text > *:nth-child(5){animation-delay:.56s}

/* ------------------------------------------------------------ invitation à défiler
   Posée dans le flux, elle ne peut plus sortir de l'écran. Cliquable : elle mène
   directement au sommaire. */
.scroll-cue{
  justify-self:center;align-self:end;
  display:inline-flex;flex-direction:column;align-items:center;gap:12px;
  padding:8px 20px 2px;text-decoration:none;color:var(--or-clair);
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  opacity:0;transition:opacity .9s var(--t) .85s,background .35s var(--t)
}
body:not(.is-booting) .scroll-cue{opacity:1}
.scroll-cue.is-hidden{opacity:0;pointer-events:none;transition-delay:0s}
.scroll-cue__label{transition:color .35s var(--t)}
.scroll-cue__ring{
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--or-sourd);background:rgba(194,160,94,.05);
  animation:cueBob 2.6s var(--t) infinite;
  transition:border-color .35s var(--t),background .35s var(--t)
}
.scroll-cue svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.scroll-cue:hover .scroll-cue__ring{border-color:var(--or);background:rgba(194,160,94,.16)}
.scroll-cue:hover .scroll-cue__label{color:#f2e4c8}
@keyframes cueBob{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}

/* Écrans peu hauts (portables 13", fenêtres réduites) : on resserre l'ouverture
   plutôt que de laisser l'invitation à défiler sortir du champ. */
@media (max-height:760px){
  .cover{row-gap:clamp(14px,2.4svh,28px);padding-bottom:18px}
  .cover__intro p:last-child{display:none}     /* on garde le premier paragraphe */
  .scroll-cue{gap:8px;padding-top:0}
  .scroll-cue__ring{width:38px;height:38px}
}
@media (max-height:620px){
  .cover__intro{display:none}
  .cover h1{margin-bottom:.1em}
}

/* ================================================================== sommaire */
.toc{width:var(--page);margin:clamp(70px,14vh,180px) auto;scroll-margin-top:40px}
.section-label{
  display:flex;align-items:center;gap:16px;margin-bottom:clamp(34px,5vw,58px);
  font-size:10.5px;letter-spacing:.36em;text-transform:uppercase;color:var(--texte-3)
}
.section-label::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--or);flex:none
}
.section-label::after{content:"";flex:1;height:1px;background:var(--bord)}
.toc__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--bord)}
.toc__chapter{border-bottom:1px solid var(--bord)}
.toc__chapter > a{
  display:grid;grid-template-columns:78px minmax(0,1fr) auto;gap:clamp(14px,3vw,40px);
  align-items:baseline;padding:clamp(22px,3vw,34px) 6px;text-decoration:none;
  transition:background .5s var(--t),padding-left .4s var(--t)
}
.toc__chapter > a{position:relative}
.toc__chapter > a::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--or);transform:scaleY(0);transform-origin:top;
  transition:transform .5s var(--t)
}
.toc__chapter > a:hover{background:rgba(255,255,255,.028);padding-left:22px}
.toc__chapter > a:hover::before{transform:scaleY(1)}
.toc__num{font-family:var(--serif);font-size:13px;color:var(--or);letter-spacing:.18em}
.toc__title{font-family:var(--serif);font-size:clamp(24px,3.4vw,40px);line-height:1.15}
.toc__title small{
  display:block;font-family:var(--sans);font-size:12.5px;letter-spacing:.06em;
  color:var(--texte-3);margin-top:9px
}
.toc__count{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--texte-3);white-space:nowrap}
.toc__works{
  list-style:none;margin:0;
  padding:0 6px clamp(18px,2.5vw,26px) calc(78px + clamp(14px,3vw,40px));
  display:flex;flex-wrap:wrap;gap:8px 10px
}
.toc__works a{
  display:inline-block;text-decoration:none;font-size:12.5px;color:var(--texte-3);
  padding:6px 13px;border:1px solid var(--bord);border-radius:999px;
  transition:color .35s var(--t),border-color .35s var(--t),background .35s var(--t)
}
.toc__works a:hover{color:var(--texte);border-color:var(--bord-fort);background:rgba(255,255,255,.04)}

/* ------------------------------------------------ place réservée au rail
   Le rail est un calque fixe posé sur le bord gauche : la page doit lui laisser
   sa place, sinon ses traits viennent mordre la première lettre de chaque ligne.
   Mesuré avant correction : à 1280 px de large, la marge valait 38 px et les
   traits de chapitre s'arrêtaient exactement à 38 px — aucun espace.

   La gouttière minimale vaut donc la largeur du rail au repos plus une
   respiration. Elle s'applique des deux côtés : dans une galerie, le contenu
   reste centré, il ne se décale pas pour contourner un élément d'interface.
   Au-delà de 1 800 px la règle ne change plus rien : la marge naturelle
   dépasse déjà cette valeur. */
@media (min-width:1241px){
  :root{
    --page: min(1680px, calc(100vw - 2 * max(3vw, calc(var(--rail-repos) + 32px))));
  }
}

/* ================================================ rail de sommaire (fixe) */
.rail{
  position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:200;
  width:var(--rail-repos);padding:16px 0 16px 16px;opacity:0;pointer-events:none;
  transition:width .5s var(--t),opacity .5s var(--t)
}
.rail.is-on{opacity:1;pointer-events:auto}
.rail::before{
  content:"";position:absolute;inset:0 0 0 -1px;border:1px solid var(--bord);border-left:0;
  border-radius:0 4px 4px 0;background:rgba(10,10,12,.86);backdrop-filter:blur(18px);
  opacity:0;transition:opacity .45s var(--t);pointer-events:none
}
.rail:hover,.rail:focus-within{width:var(--rail)}
.rail:hover::before,.rail:focus-within::before{opacity:1}
.rail__title{
  position:relative;font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--texte-3);margin:0 0 14px;padding-left:2px;white-space:nowrap;
  opacity:0;transition:opacity .35s var(--t)
}
.rail:hover .rail__title,.rail:focus-within .rail__title{opacity:1}
.rail ol{position:relative;list-style:none;margin:0;padding:0}
.rail a{
  display:flex;align-items:center;gap:14px;text-decoration:none;padding:6px 0;
  color:var(--texte-3);font-size:12.5px;line-height:1.3;transition:color .35s var(--t)
}
.rail a span{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:0;transform:translateX(-8px);
  transition:opacity .35s var(--t),transform .35s var(--t)
}
.rail:hover a span,.rail:focus-within a span{opacity:1;transform:none}
.rail i{
  flex:none;display:block;width:14px;height:1px;background:rgba(255,255,255,.22);
  transition:width .4s var(--t),background .4s var(--t)
}
.rail li.is-chapter{margin-top:14px}
.rail li.is-chapter:first-child{margin-top:0}
.rail li.is-chapter a{font-family:var(--serif);font-size:13.5px;color:var(--texte-2)}
.rail li.is-chapter i{width:22px;background:rgba(255,255,255,.38)}
.rail a:hover{color:var(--texte-2)}
.rail a.is-active{color:var(--or-clair)}
.rail a.is-active i{width:30px;background:var(--or)}

/* --------------------------------------------- bouton flottant vers le sommaire
   Présent à toutes les tailles d'écran, il n'apparaît qu'une fois le sommaire
   dépassé et s'efface quand on y revient. */
.fab{
  position:fixed;right:clamp(16px,2.4vw,32px);bottom:clamp(16px,2.4vw,32px);z-index:210;
  display:inline-flex;align-items:center;gap:11px;
  padding:13px 20px 13px 17px;border-radius:999px;text-decoration:none;
  border:1px solid var(--or-sourd);color:var(--or-clair);
  background:rgba(14,14,16,.78);backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  box-shadow:0 20px 44px -20px rgba(0,0,0,.95);
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.96);
  transition:opacity .5s var(--t),transform .5s var(--t),visibility .5s,
             background .35s var(--t),border-color .35s var(--t)
}
.fab.is-on{opacity:1;visibility:visible;transform:none}
.fab:hover{background:rgba(194,160,94,.16);border-color:var(--or);color:#f4e7cc}
.fab svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.fab__arrow{opacity:.55;transition:opacity .35s var(--t)}
.fab:hover .fab__arrow{opacity:1}
@media (max-width:520px){
  .fab span{display:none}
  .fab{padding:14px;border-radius:50%}
}

/* ================================================================= chapitre */
.chapter-head{
  position:relative;
  width:var(--page);margin:clamp(80px,18vh,220px) auto clamp(40px,7vh,90px);
  display:grid;gap:16px;scroll-margin-top:12vh
}
/* Chiffre romain fantôme : une respiration éditoriale, comme un faux-titre. */
.chapter-head::before{
  content:attr(data-num);position:absolute;right:0;top:50%;
  transform:translateY(-54%);pointer-events:none;z-index:-1;
  font-family:var(--serif);font-size:clamp(120px,20vw,300px);line-height:.8;
  letter-spacing:-.04em;color:rgba(255,255,255,.028)
}
.chapter-head__num{
  display:flex;align-items:center;gap:14px;margin:0;
  font-family:var(--sans);font-size:10.5px;letter-spacing:.36em;
  text-transform:uppercase;color:var(--or)
}
.chapter-head__num::before{
  content:"";width:clamp(26px,3vw,46px);height:1px;flex:none;
  background:linear-gradient(90deg,transparent,var(--or))
}
.chapter-head h2{font-size:clamp(34px,6vw,76px);line-height:1.02;letter-spacing:-.02em}
.chapter-head h2 em{font-style:italic;color:var(--texte-2)}
.chapter-head p{max-width:var(--lisible);color:var(--texte-2);margin:6px 0 0;font-size:15.5px;line-height:1.78}
.chapter-head::after{
  content:"";height:1px;margin-top:12px;
  background:linear-gradient(90deg,var(--or),rgba(194,160,94,.10) 32%,transparent 60%)
}

/* =================================================================== œuvre */
.work{position:relative;margin:clamp(60px,12vh,150px) 0;scroll-margin-top:8vh}
.work__stage{position:relative;width:var(--page);margin-inline:auto}
/* Halo : impression d'un éclairage dirigé sur la toile. */
.work__stage::before{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:120%;height:130%;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse at center,rgba(255,255,255,.055),transparent 62%),
    radial-gradient(ellipse at 50% 42%,rgba(194,160,94,.055),transparent 58%)
}
.work__media{position:relative;z-index:1;display:flex;justify-content:center}

.work__frame{
  position:relative;display:block;margin:0;max-width:100%;
  /* Ombre profonde + double filet : la toile se détache du mur. */
  box-shadow:
    0 70px 130px -50px rgba(0,0,0,1),
    0 10px 30px -14px rgba(0,0,0,.75),
    0 0 0 1px rgba(255,255,255,.07),
    0 0 0 9px rgba(255,255,255,.014),
    0 0 0 10px rgba(194,160,94,.10);
  /* Fond de chargement : couleur dominante de l'œuvre puis aperçu flou. */
  background-color:var(--dominant,#141416);
  background-image:var(--lqip,none);
  background-size:cover;background-position:center;
  aspect-ratio:var(--ratio,1.5);
  width:min(100%, calc(var(--h-max) * var(--ratio,1.5)))
}
.work--portrait .work__frame{
  width:min(100%, calc(var(--h-max-portrait) * var(--ratio,.7)));
  margin-right:calc(var(--cart) + var(--cart-gap))
}
/* L'aperçu flou est adouci : il ne doit jamais passer pour l'œuvre. */
.work__frame::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  backdrop-filter:blur(18px) saturate(1.1);
  transition:opacity .7s var(--t)
}
.work__frame.is-loaded::before{opacity:0}

.work__img{
  width:100%;height:auto;display:block;
  opacity:0;transition:opacity .9s var(--t)
}
/* Toute la surface de l'œuvre ouvre la vue plein écran — le bouton reste là
   pour l'indiquer et pour la navigation au clavier. Le cartouche, lui, garde
   un curseur normal : on doit pouvoir y lire et y sélectionner du texte. */
.work__frame{cursor:zoom-in}
.work__frame.is-error{cursor:default}
.cartouche{cursor:auto}
.work__frame.is-loaded .work__img{opacity:1}

/* ------------------------------------------------------ repères de détail
   Le cadre exact d'où provient chaque vue de détail.

   Invisibles au repos : une toile doit d'abord pouvoir être regardée sans que
   rien ne la souligne. Ils se révèlent quand la souris entre dans l'image, et
   sur un appareil tactile — où le survol n'existe pas — le script les montre
   brièvement à l'arrivée de l'œuvre à l'écran.

   Le tracé est volontairement ténu : un filet clair, un voile presque nul, un
   numéro discret. Il désigne, il ne décore pas. */
/* Au-dessus du cartouche : sans cela, un détail situé dans le bas de la toile
   serait recouvert par l'étiquette et deviendrait impossible à atteindre. */
.reperes{position:absolute;inset:0;z-index:4;pointer-events:none}

.repere{
  position:absolute;margin:0;padding:0;
  border:1px solid rgba(255,255,255,.72);
  background:rgba(255,255,255,.05);
  box-shadow:0 0 0 1px rgba(0,0,0,.35), inset 0 0 22px rgba(0,0,0,.28);
  cursor:zoom-in;
  opacity:0;transform:scale(.985);
  /* INVISIBLE VEUT DIRE ABSENT : un repère transparent qui intercepterait
     encore les clics empêcherait d'ouvrir l'œuvre ou de lire le cartouche. */
  pointer-events:none;
  transition:opacity .45s var(--t),transform .45s var(--t),
             border-color .3s var(--t),background-color .3s var(--t);
}
.work__frame.is-reperes .repere{opacity:1;transform:none;pointer-events:auto}

/* Tant que les repères sont montrés, le cartouche s'efface : l'attention est
   sur la toile, et un repère qui le traverse reste lisible. Il revient à pleine
   opacité dès que la souris s'en approche — survoler l'étiquette, c'est vouloir
   la lire, pas explorer la matière. */
.work__frame.is-reperes .cartouche{opacity:.30}
.cartouche{transition:opacity .35s var(--t)}

.repere:hover{
  border-color:var(--or-clair);
  background:rgba(194,160,94,.12);
}

/* Le numéro reprend celui des vues de la visionneuse : « 2 » ici, « vue 2 sur
   3 » là-bas. Placé DANS le cadre, en haut à gauche : posé au-dessus, il
   sortirait de l'œuvre pour un repère collé au bord supérieur. */
.repere__num{
  position:absolute;left:0;top:0;
  display:block;min-width:18px;padding:3px 6px 4px;
  font-family:var(--sans);font-size:10px;letter-spacing:.12em;text-align:center;
  line-height:1;color:var(--noir);background:rgba(236,232,225,.92);
}
.repere:hover .repere__num{background:var(--or-clair)}

@media (prefers-reduced-motion:reduce){
  .repere{transition:opacity .01s}
}

/* ------------------------------------------------- indicateur d'attente
   Masqué par défaut : il n'apparaît QUE si le chargement dure (classe
   .is-waiting posée par le JavaScript après un délai), pour ne pas
   faire clignoter l'interface sur une bonne connexion. */
.work__wait{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:2;display:flex;flex-direction:column;align-items:center;gap:12px;
  opacity:0;visibility:hidden;transition:opacity .4s var(--t),visibility .4s
}
.work__frame.is-waiting .work__wait{opacity:1;visibility:visible}
.work__wait i{
  width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(255,255,255,.18);border-top-color:var(--or);
  animation:spin 1s linear infinite
}
.work__wait b{
  display:block;width:120px;height:1px;background:rgba(255,255,255,.14);position:relative;overflow:hidden
}
.work__wait b::after{
  content:"";position:absolute;inset:0;width:40%;background:var(--or);
  animation:slide 1.4s var(--t) infinite
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes slide{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}}

/* Révélation au défilement */
.reveal{opacity:0;transform:translateY(26px);transition:opacity 1.1s var(--t),transform 1.1s var(--t)}
.reveal.is-in{opacity:1;transform:none}

/* ====================================================== cartouche flottant */
.cartouche{
  position:absolute;z-index:3;left:clamp(-24px,-1.5vw,0px);bottom:clamp(-28px,-2vw,-12px);
  width:min(var(--cart),86%);
  padding:clamp(20px,1.6vw,26px) clamp(20px,1.6vw,26px) clamp(18px,1.4vw,22px);
  background:linear-gradient(165deg,rgba(20,20,23,.84),rgba(11,11,13,.86));
  backdrop-filter:blur(20px) saturate(1.25);-webkit-backdrop-filter:blur(20px) saturate(1.25);
  border:1px solid var(--bord);border-radius:3px;
  box-shadow:0 34px 66px -26px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.05);
  text-align:left
}
/* Filet d'or en tête de cartouche : la signature discrète de l'ensemble. */
.cartouche::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,var(--or),rgba(194,160,94,.18) 42%,transparent 78%)
}
.work--portrait .cartouche{
  left:calc(100% + var(--cart-gap));bottom:0;width:var(--cart);
  background:rgba(14,14,16,.55)
}
.cartouche__head{
  display:flex;align-items:center;gap:12px;margin:0 0 12px;
  font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--texte-3)
}
.cartouche__head b{color:var(--or);font-weight:400}
.cartouche__head span{flex:1;height:1px;background:var(--bord)}
.cartouche h3{font-size:clamp(21px,1.6vw,27px);line-height:1.2;margin-bottom:7px;
  letter-spacing:-.005em}
.cartouche__medium{margin:0;font-size:12.5px;color:var(--texte-3);letter-spacing:.03em}
.skills{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:15px 0 0;padding:0}
.skills li{
  display:flex;align-items:center;gap:7px;
  font-size:11px;letter-spacing:.09em;color:var(--texte-2);
  padding:4px 11px 4px 9px;border:1px solid var(--bord);border-radius:999px;white-space:nowrap;
  transition:border-color .35s var(--t),color .35s var(--t)
}
.skills li::before{
  content:"";width:4px;height:4px;border-radius:50%;background:var(--or);opacity:.75;flex:none
}
.work__frame:hover .skills li{border-color:rgba(194,160,94,.24);color:var(--texte)}
.feedback{
  margin:15px 0 0;padding:14px 0 0;border-top:1px solid var(--bord);
  font-family:var(--serif);font-style:italic;font-weight:420;
  font-size:15px;line-height:1.6;color:var(--texte-2)
}
.feedback p{margin:0}
.feedback cite{
  display:block;margin-top:9px;font-style:normal;font-family:var(--sans);
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--texte-3)
}
.feedback.is-clamped p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.feedback__more{
  margin-top:10px;background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--or)
}

/* ================================================== vignette « plein écran » */
.zoom{
  position:absolute;z-index:4;top:14px;right:14px;
  display:flex;align-items:center;gap:9px;padding:9px 14px 9px 10px;
  background:rgba(12,12,14,.62);backdrop-filter:blur(14px);
  border:1px solid var(--bord);border-radius:999px;color:var(--texte-2);
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;
  opacity:0;transform:translateY(-6px);transition:all .4s var(--t)
}
.work__frame:hover .zoom,.zoom:focus-visible{opacity:1;transform:none}
.zoom:hover{color:var(--texte);border-color:var(--bord-fort);background:rgba(20,20,24,.85)}
.zoom svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.5}
@media (hover:none){.zoom{opacity:1;transform:none}}

/* ============================================================= visionneuse */
.viewer{position:fixed;inset:0;z-index:500;background:#000;display:none;align-items:center;justify-content:center}
.viewer.is-on{display:flex;animation:vfade .45s var(--t)}
@keyframes vfade{from{opacity:0}to{opacity:1}}
/* La scène réserve, sous l'image, la place exacte du pied (mesurée par le
   script) et, sur les côtés, celle des flèches de navigation. L'œuvre est donc
   centrée dans ce qui lui revient, sans jamais être recouverte. */
.viewer__stage{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;
  padding:clamp(20px,4vh,46px) clamp(58px,7vw,116px)
          calc(var(--foot,150px) + clamp(16px,2.6vh,30px))
}
.viewer__img{
  max-width:100%;max-height:100%;width:auto;height:auto;cursor:zoom-in;
  transition:transform .35s var(--t),opacity .5s var(--t);
  transform-origin:center center;user-select:none;-webkit-user-drag:none;opacity:0
}
.viewer.is-ready .viewer__img{opacity:1}
.viewer.is-zoomed .viewer__img{cursor:grab}
.viewer.is-dragging .viewer__img{cursor:grabbing;transition:none}

/* Attente : anneau de progression alimenté par le téléchargement réel. */
.viewer__loading{
  position:absolute;display:flex;flex-direction:column;align-items:center;gap:16px;
  opacity:0;visibility:hidden;transition:opacity .35s var(--t),visibility .35s
}
.viewer.is-loading .viewer__loading{opacity:1;visibility:visible}
.viewer__loading p{
  margin:0;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--texte-3)
}
.ring{width:44px;height:44px;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:1.5}
.ring__track{stroke:rgba(255,255,255,.14)}
.ring__value{
  stroke:var(--or);stroke-linecap:round;
  stroke-dasharray:119.4;stroke-dashoffset:119.4;transition:stroke-dashoffset .25s linear
}
.viewer.is-indeterminate .ring{animation:spin 1.1s linear infinite}
.viewer.is-indeterminate .ring__value{stroke-dashoffset:90}

/* ---------------------------------------------------------- cartouche de la vue
   Le texte ne se pose plus à même l'œuvre : il occupe un panneau de verre, seul
   moyen de rester lisible aussi bien sur un fond noir que sur une toile claire.
   Une seule hiérarchie, celle du book : numéro, titre en sérif, technique en
   petites capitales. */
.viewer__foot{
  position:absolute;left:50%;bottom:clamp(14px,2.4vh,28px);transform:translateX(-50%);
  z-index:3;display:flex;flex-direction:column;align-items:center;gap:14px;
  max-width:min(760px,92vw);pointer-events:none
}
.viewer__foot > *{pointer-events:auto}

/* ------------------------------------------------ plan de situation
   Sans lui, un gros plan sur la matière est un tableau abstrait : on ne sait
   pas de quelle partie de la toile il parle. Posé dans un coin, assez petit
   pour ne pas concurrencer l'œuvre, assez lisible pour se comprendre d'un
   regard. */
.viewer__plan{
  /* En haut à GAUCHE : le bouton de fermeture occupe le coin droit, et la
     flèche « œuvre précédente » est centrée verticalement — ce coin est le seul
     vraiment libre. */
  position:absolute;left:clamp(14px,2.2vw,32px);top:clamp(14px,2.2vw,32px);
  z-index:6;margin:0;width:clamp(96px,11vw,164px);
  padding:6px 6px 0;border-radius:3px;
  background:rgba(10,10,12,.72);backdrop-filter:blur(14px);
  border:1px solid var(--bord);
  animation:planIn .5s var(--t) both;
  pointer-events:none;
}
.viewer__plan[hidden]{display:none}
.viewer__plan-toile{
  position:relative;display:block;line-height:0;
  border-radius:2px;overflow:hidden;   /* rogne le voile du cadre */
}
.viewer__plan img{display:block;width:100%;height:auto;opacity:.55}
.viewer__plan figcaption{
  padding:6px 2px 7px;text-align:center;
  font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--texte-3)
}
/* Le voile démesuré assombrit tout ce qui entoure la zone : le cadre se lit
   sans avoir à superposer quatre rectangles. */
.viewer__plan-cadre{
  position:absolute;
  border:1px solid var(--or-clair);
  box-shadow:0 0 0 9999px rgba(10,10,12,.62);
  pointer-events:none;
}
@keyframes planIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

@media (max-width:640px){
  .viewer__plan{width:82px;left:10px;top:10px}
  .viewer__plan figcaption{display:none}
  .viewer__plan{padding:5px}
}
@media (prefers-reduced-motion:reduce){.viewer__plan{animation:none}}

.viewer__plate{
  position:relative;margin:0;max-width:100%;
  padding:clamp(14px,1.4vw,20px) clamp(20px,2vw,30px) clamp(15px,1.5vw,21px);
  text-align:center;border-radius:3px;
  background:rgba(9,9,11,.74);
  backdrop-filter:blur(20px) saturate(1.2);-webkit-backdrop-filter:blur(20px) saturate(1.2);
  border:1px solid var(--bord);
  box-shadow:0 24px 60px -28px rgba(0,0,0,.9);
  opacity:0;transition:opacity .5s var(--t) .15s
}
.viewer.is-ready .viewer__plate{opacity:1}
.viewer__plate::before{                       /* le filet doré du cartouche */
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--or) 26%,var(--or) 74%,transparent)
}
.viewer__plate figcaption{display:block}

.viewer__index{
  margin:0 0 8px;font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--texte-3);font-variant-numeric:tabular-nums
}
.viewer__index b{color:var(--or);font-weight:400}
.viewer__title{
  font-family:var(--serif);font-weight:420;font-size:clamp(19px,1.7vw,25px);
  line-height:1.25;letter-spacing:.004em;color:var(--texte);margin:0
}
.viewer__meta{
  margin:9px 0 0;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--texte-2);line-height:1.6
}
.viewer__meta:empty{display:none}

/* Les raccourcis clavier : présents quelques secondes, puis effacés. */
.viewer__hint{
  position:absolute;right:clamp(16px,3vw,30px);bottom:clamp(20px,3vh,34px);z-index:3;
  margin:0;max-width:34ch;text-align:right;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--texte-3);
  opacity:0;visibility:hidden;transition:opacity .6s var(--t),visibility .6s
}
.viewer.is-hinting .viewer__hint{opacity:.75;visibility:visible}

.viewer__nav{
  position:absolute;top:0;bottom:0;width:clamp(64px,10vw,120px);border:0;
  background:none;color:var(--texte-3);cursor:pointer;font-size:26px;transition:color .3s;z-index:2
}
.viewer__nav:hover{color:var(--texte)}
.viewer__nav--prev{left:0}
.viewer__nav--next{right:0}
.viewer__close{
  position:absolute;top:16px;right:clamp(16px,3vw,28px);z-index:3;
  background:none;border:1px solid var(--bord);border-radius:999px;color:var(--texte-2);
  width:42px;height:42px;cursor:pointer;font-size:16px;transition:all .3s var(--t)
}
.viewer__close:hover{color:var(--texte);border-color:var(--bord-fort)}

/* ==================================================================== pied */
.foot{
  position:relative;scroll-margin-top:8vh;
  width:var(--page);margin:clamp(90px,16vh,200px) auto 0;
  padding:clamp(40px,6vw,70px) 0 clamp(30px,5vw,54px);
  border-top:1px solid var(--bord);
  display:grid;gap:clamp(34px,5vw,72px);
  grid-template-columns:minmax(0,.8fr) minmax(0,1fr);align-items:start
}
.foot__intro .btn{margin-top:26px}
.foot::before{
  content:"";position:absolute;left:0;top:0;width:min(180px,30%);height:1px;background:var(--or)
}
.foot h2{font-size:clamp(26px,3.6vw,44px);line-height:1.1;margin-bottom:12px}
.foot p{color:var(--texte-2);margin:0;max-width:52ch;font-size:15px}
.foot__mail{margin-top:10px}
.foot__mail a{color:var(--or-clair)}
.btn{
  display:inline-flex;align-items:center;gap:12px;padding:15px 26px;
  border:1px solid var(--or);border-radius:2px;color:var(--or-clair);text-decoration:none;
  font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;
  background:none;cursor:pointer;font-family:inherit;
  transition:background .4s var(--t),color .4s var(--t)
}
.btn:hover{background:var(--or);color:#12100b}
.foot__legal{
  grid-column:1/-1;padding-top:26px;margin-top:10px;border-top:1px solid var(--bord);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--texte-3)
}
.foot__admin{text-decoration:none;color:var(--texte-3);transition:color .3s}
.foot__admin:hover{color:var(--or)}

/* ================================================== book vide / accès privé */
.empty{width:var(--page);margin:18vh auto;color:var(--texte-2)}
.empty a{color:var(--or-clair)}

.gate-body{display:grid;place-items:center;min-height:100svh}
.gate{width:min(420px,90vw);text-align:center}
.gate h1{font-size:clamp(38px,7vw,64px);line-height:1;margin-bottom:22px}
.gate__text{color:var(--texte-2);font-size:15px;margin:0 0 28px}
.gate__form{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.gate__form input{
  flex:1 1 200px;padding:14px 16px;background:rgba(255,255,255,.04);
  border:1px solid var(--bord);border-radius:2px;color:var(--texte);
  font:inherit;font-size:15px
}
.gate__form input:focus{outline:none;border-color:var(--or)}
.gate__error{margin-top:18px;color:#e0a3a3;font-size:13px}

/* ============================================================== responsive */
@media (max-width:1240px){
  .rail{display:none}
  .work--portrait .work__frame{margin-right:0}
  .work--portrait .cartouche{
    left:clamp(-24px,-1.5vw,0px);bottom:clamp(-28px,-2vw,-12px);
    width:min(var(--cart),86%);background:rgba(14,14,16,.80)
  }
}
@media (max-width:1080px){
  /* Sur mobile la couverture s'empile : le portrait se fait plus discret pour
     que le nom, l'accroche et l'invitation à défiler tiennent dans l'écran. */
  .cover__inner{grid-template-columns:1fr;gap:clamp(22px,4svh,40px);justify-items:center}
  .cover__text{max-width:100%}
  .cover h1{font-size:min(clamp(44px,12vw,80px), 13svh)}
  .cover__intro p:last-child{display:none}
  /* Ancrée en bas de fenêtre et disposée sur une ligne : compacte, lisible,
     elle ne recouvre pas le portrait. */
  .scroll-cue{
    position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:120;
    flex-direction:row;align-items:center;gap:12px;
    background:rgba(10,10,12,.80);backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border:1px solid var(--or-sourd);border-radius:999px;
    padding:7px 8px 7px 20px;white-space:nowrap;
    box-shadow:0 16px 36px -18px rgba(0,0,0,.95)
  }
  .scroll-cue__ring{width:32px;height:32px}
  .scroll-cue svg{width:13px;height:13px}
  .cover{padding-bottom:76px}
  .portrait{max-width:min(280px,58vw)}
  .portrait img{max-height:min(30svh,320px)}
  .cover__meta{gap:8px 20px;font-size:10.5px}
  .cartouche,.work--portrait .cartouche{
    position:static;width:100%;margin-top:0;
    border-radius:0 0 3px 3px;border-top:0;background:rgba(14,14,16,.92)
  }
  .work__media{display:block}
  .work__frame,.work--portrait .work__frame{width:100%;aspect-ratio:var(--ratio,1.5)}
  .foot{grid-template-columns:1fr;gap:34px}
}
@media (max-width:640px){
  :root{--page:92vw}
  .toc__chapter > a{grid-template-columns:44px minmax(0,1fr);row-gap:4px}
  .toc__count{grid-column:2}
  .toc__works{padding-left:44px}
  .viewer__nav{width:56px}
  .viewer__hint{display:none}
  .viewer__nav--prev{left:0;bottom:130px}
  .viewer__nav--next{right:0;bottom:130px}
}

/* ============================================================== impression */
@media print{
  body{background:#fff;color:#000}
  body::before,body::after,.rail,.fab,.zoom,.progress,.boot,.viewer,
  .scroll-cue{display:none!important}
  .work__img{opacity:1!important}
  .reveal{opacity:1!important;transform:none!important}
  .work{page-break-inside:avoid}
}

/* Image indisponible (fichier manquant sur le serveur) */
.work__error{
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  margin:0;text-align:center;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--texte-3)
}

/* ==================================================== vues d'une même œuvre
   Rangée de vignettes au-dessus de la barre de la visionneuse : l'œuvre
   entière, puis ses détails. Absente si l'œuvre n'a qu'une seule vue. */
.viewer__views{
  display:flex;gap:8px;padding:8px;border-radius:4px;
  background:rgba(10,10,12,.62);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border:1px solid var(--bord)
}
.viewer__views[hidden]{display:none}   /* sinon la classe l'emporte sur [hidden] */
.viewer__view{
  width:52px;height:52px;padding:0;border:1px solid transparent;border-radius:2px;
  background:none;cursor:pointer;overflow:hidden;opacity:.55;
  transition:opacity .3s var(--t),border-color .3s var(--t)
}
.viewer__view img{width:100%;height:100%;object-fit:cover;display:block}
.viewer__view:hover{opacity:.85}
.viewer__view.is-on{opacity:1;border-color:var(--or)}
@media (max-width:640px){
  /* Sur téléphone les flèches se superposent aux bords de l'œuvre plutôt que
     de lui prendre un tiers de la largeur. */
  .viewer__stage{padding-left:8px;padding-right:8px}
  .viewer__foot{left:10px;right:10px;transform:none;max-width:none;gap:10px}
  .viewer__plate{padding:12px 16px 13px;width:100%}
  .viewer__views{gap:6px;padding:6px}
  .viewer__view{width:42px;height:42px}
  .viewer__title{font-size:17px}
  .viewer__meta{font-size:9.5px;letter-spacing:.16em}
}

/* ============================================================ formulaire de contact
   Sobre et sombre comme le reste : des champs qui ne sont qu'un filet, et qui
   s'éclairent quand on écrit dedans. */
.foot__flash{
  margin:18px 0 0;padding:13px 18px;border-radius:3px;font-size:14px;
  border:1px solid var(--bord)
}
.foot__flash--ok{border-color:rgba(194,160,94,.42);background:rgba(194,160,94,.09);color:var(--or-clair)}
.foot__flash--error{border-color:rgba(190,110,110,.4);background:rgba(190,110,110,.09);color:#e6b3b3}

.contact{max-width:none}
.contact__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.contact__field{display:block;margin-bottom:16px}
.contact__field > span{
  display:block;margin-bottom:7px;
  font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--texte-3)
}
.contact__field > span i{font-style:normal;text-transform:none;letter-spacing:.06em}
.contact input,.contact textarea{
  display:block;width:100%;padding:12px 14px;
  font:inherit;font-size:15px;color:var(--texte);
  background:rgba(255,255,255,.035);
  border:1px solid var(--bord);border-radius:2px;
  transition:border-color .3s var(--t),background .3s var(--t)
}
.contact textarea{resize:vertical;line-height:1.6;min-height:130px}
.contact input:hover,.contact textarea:hover{border-color:var(--bord-fort)}
.contact input:focus,.contact textarea:focus{
  outline:none;border-color:var(--or);background:rgba(255,255,255,.055)
}
.contact input:-webkit-autofill{-webkit-text-fill-color:var(--texte);
  -webkit-box-shadow:0 0 0 40px #141417 inset}

/* Le champ leurre : hors de l'écran, hors du parcours au clavier, hors des
   lecteurs d'écran. Seuls les robots le voient — et le remplissent. */
.contact__trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.contact__actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:6px}
.contact__note{font-size:11.5px;line-height:1.5;color:var(--texte-3);max-width:34ch}

@media (max-width:640px){
  .contact__row{grid-template-columns:1fr;gap:0}
}

/* =============================================================================
   PAGES SIMPLES — /contact, et tout ce qui vit hors du book
   Même galerie, mais une colonne de lecture : rien ne doit concurrencer le
   formulaire.
   ============================================================================= */
.page-simple{
  min-height:100svh;
  display:grid;place-items:center;
  padding:clamp(2rem,7vw,5rem) 1.25rem;
}
.simple{width:100%;max-width:44rem}
.simple__retour{margin:0 0 2.5rem;font-size:.82rem;letter-spacing:.06em}
.simple__retour a{color:var(--texte-3);text-decoration:none;transition:color .25s ease}
.simple__retour a:hover{color:var(--or-clair)}
.simple h1{
  font-family:var(--serif);font-weight:340;
  font-size:clamp(1.9rem,5vw,2.8rem);line-height:1.15;letter-spacing:-.01em;
  margin:0 0 .9rem;
}
.simple__intro{
  margin:0 0 2.8rem;max-width:34rem;
  color:var(--texte-2);font-size:.98rem;line-height:1.8;
}
.simple .contact{max-width:none}

/* Repli sans JavaScript : le lien prend la place du formulaire. */
.contact__replis{margin:1.5rem 0 0;font-size:.95rem}
.contact__replis a{
  display:inline-block;padding:.72rem 1.5rem;border-radius:2px;text-decoration:none;
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--or-sourd);color:var(--or-clair);
}
.contact__replis a:hover{background:rgba(194,160,94,.10);border-color:var(--or)}