/*
Theme Name: Diaporama Atelier
Description: Thème portefolio plein écran pour photographe d'art — diaporama piloté à la molette, au glisser et au clavier. Œuvres gérées via le type de contenu « Œuvres », réglages dans Apparence → Personnaliser.
Author: Camille Aubry
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: diaporama-atelier
Tags: portfolio, photography, full-width-template
*/

/* ============ Fondations ============ */
:root{
  --ink:#0d0b09; --ink-2:#161310;
  --bone:#e9e4da; --bone-dim:#8f887c;
  --line:rgba(233,228,218,.16); --gold:#a58757;
  --pad:6vw; --ease:cubic-bezier(.22,1,.36,1); --dur:1.05s;
}
*{margin:0;padding:0;box-sizing:border-box}
html{height:100%}
body.at-full{height:100%;overflow:hidden;overscroll-behavior:none}
body{
  background:var(--ink);color:var(--bone);
  font:400 14px/1.7 'Archivo',sans-serif;
  -webkit-font-smoothing:antialiased;
}
body.dragging{user-select:none;-webkit-user-select:none}
img{display:block;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
a{color:inherit;text-decoration:none}
button{background:none;border:none;color:inherit;font:inherit;cursor:pointer;padding:0}
ol,ul{list-style:none}
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:#2b2620;border:2px solid var(--ink);border-radius:5px}
body:not(.at-full) #cursor{display:none}

@media (hover:hover) and (pointer:fine){
  body.at-full, body.at-full a, body.at-full button,
  body.at-full .w-media, body.at-full .s-row,
  body.at-full .ov-cell, body.at-full .fs-tick{cursor:none}
}

/* ============ Grain argentique ============ */
#grain{
  position:fixed;inset:-50%;width:200%;height:200%;
  pointer-events:none;z-index:999;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainJitter .9s steps(8) infinite;
}
@keyframes grainJitter{
  0%{transform:translate(0,0)}12.5%{transform:translate(-1.5%,1%)}25%{transform:translate(1%,-1.5%)}
  37.5%{transform:translate(-1%,-1%)}50%{transform:translate(1.5%,1%)}62.5%{transform:translate(-1.5%,1.5%)}
  75%{transform:translate(1%,.5%)}87.5%{transform:translate(.5%,-1%)}100%{transform:translate(0,0)}
}

/* ============ Curseur ============ */
#cursor{
  position:fixed;left:0;top:0;z-index:1002;pointer-events:none;
  width:10px;height:10px;border-radius:50%;
  background:var(--bone);mix-blend-mode:difference;
  display:flex;align-items:center;justify-content:center;
  transition:width .35s var(--ease),height .35s var(--ease);
}
#cursor .c-txt{
  font:500 9px/1 'Archivo';letter-spacing:.18em;text-transform:uppercase;
  opacity:0;transition:opacity .2s;white-space:nowrap;
}
#cursor.link{width:36px;height:36px}
#cursor.view{width:84px;height:84px;mix-blend-mode:normal;background:var(--bone)}
#cursor.view .c-txt{opacity:1;color:var(--ink)}
@media (hover:none),(pointer:coarse){#cursor{display:none}}

/* ============ Préchargeur ============ */
#preloader{
  position:fixed;inset:0;z-index:1001;background:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  transition:transform .95s cubic-bezier(.76,0,.24,1);
}
#preloader.done{transform:translateY(-101%)}
#pre-name{font:500 clamp(38px,7vw,96px)/1 'Cormorant Garamond',serif;display:flex}
.pre-letter{
  display:inline-block;opacity:0;transform:translateY(.5em);
  animation:pletter .7s var(--ease) forwards;
  animation-delay:calc(var(--i)*.045s + .15s);
}
@keyframes pletter{to{opacity:1;transform:none}}
#pre-line{width:0;height:1px;background:var(--gold);animation:pline 1s var(--ease) .5s forwards}
@keyframes pline{to{width:120px}}
#pre-sub{
  font:400 10px/1 'Archivo';letter-spacing:.34em;text-transform:uppercase;color:var(--bone-dim);
  opacity:0;animation:pfade .8s ease .95s forwards;
}
@keyframes pfade{to{opacity:1}}

/* ============ En-tête ============ */
#site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;height:76px;
  display:flex;align-items:center;gap:4vw;padding:0 var(--pad);
  background:linear-gradient(to bottom,rgba(13,11,9,.55),rgba(13,11,9,0));
}
.brand{font:600 19px 'Cormorant Garamond',serif;letter-spacing:.01em}
#site-header nav{margin-left:auto;display:flex;gap:2.6vw}
.nav-l{
  font:500 10px 'Archivo';letter-spacing:.24em;text-transform:uppercase;
  color:var(--bone-dim);position:relative;padding:6px 0;transition:color .3s;
}
.nav-l sup{color:var(--gold);font:italic 500 10px 'Cormorant Garamond',serif;margin-right:6px;letter-spacing:0}
.nav-l::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--bone);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease);
}
.nav-l:hover{color:var(--bone)}
.nav-l:hover::after{transform:scaleX(1)}
.h-right{display:flex;align-items:center;gap:2.4vw}
.clock{font:400 10px 'Archivo';letter-spacing:.18em;text-transform:uppercase;color:var(--bone-dim);white-space:nowrap}

/* ============ Diaporama ============ */
#deck{position:relative;width:100%;height:100%;overflow:hidden}
#track{display:flex;height:100%;width:max-content;will-change:transform;transition:transform var(--dur) var(--ease)}
#deck.no-anim #track,#track.dragging{transition:none!important}
.no-anim .w-par{transition:none!important}
.slide{position:relative;height:100%;width:100vw;flex:0 0 auto;overflow:hidden;background:var(--ink)}

/* --- Média plein cadre + parallaxe + zoom lent --- */
.w-media{position:absolute;inset:0;overflow:hidden;background:var(--ink-2)}
.w-par{
  position:absolute;top:0;bottom:0;left:-11%;width:122%;
  will-change:transform;transition:transform var(--dur) var(--ease);
}
.w-media img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.9) contrast(1.05);
  transform:scale(1.04);transition:transform var(--dur) var(--ease);
}
.slide.active .w-media img{transform:scale(1.09);transition:transform 16s linear}

/* --- Diapositive « œuvre » --- */
.slide--work{touch-action:none}
.slide--work::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none}
.cap-bl::after,.cap-br::after{background:linear-gradient(to top,rgba(13,11,9,.78),rgba(13,11,9,0) 46%)}
.cap-tl::after,.cap-tr::after{background:linear-gradient(to bottom,rgba(13,11,9,.72),rgba(13,11,9,0) 40%)}
.w-cap{position:absolute;z-index:2;bottom:6.5vh;max-width:70vw}
.cap-bl .w-cap{left:var(--pad)}
.cap-br .w-cap{right:var(--pad);text-align:right}
.cap-tl .w-cap,.cap-tr .w-cap{bottom:auto;top:calc(76px + 4vh)}
.cap-tl .w-cap{left:var(--pad)}
.cap-tr .w-cap{right:var(--pad);text-align:right}
.w-cap>*{opacity:0}
.slide.active .w-cap>*{animation:capIn .8s var(--ease) both}
.slide.active .w-cap>*:nth-child(1){animation-delay:.18s}
.slide.active .w-cap>*:nth-child(2){animation-delay:.32s}
.slide.active .w-cap>*:nth-child(3){animation-delay:.46s}
@keyframes capIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.w-num{font:italic 500 15px 'Cormorant Garamond',serif;color:var(--gold)}
.w-title{font:500 clamp(28px,4.4vw,62px)/1.02 'Cormorant Garamond',serif;letter-spacing:-.015em;margin-top:6px}
.w-meta{font:400 10px/1 'Archivo';letter-spacing:.2em;text-transform:uppercase;opacity:.85;margin-top:12px}

/* --- Couverture --- */
.slide--cover{touch-action:pan-y}
.cover-grid{display:grid;grid-template-columns:1.12fr .88fr;height:100%}
.cover-txt{
  position:relative;display:flex;flex-direction:column;min-height:0;
  padding:calc(76px + 5vh) 4vw 7vh var(--pad);
  border-right:1px solid var(--line);
}
.cover-kicker{font:500 10px/1 'Archivo';letter-spacing:.3em;text-transform:uppercase;color:var(--bone-dim)}
.cover-title{font:500 clamp(54px,7.8vw,150px)/0.94 'Cormorant Garamond',serif;letter-spacing:-.02em;margin-top:4.5vh}
.cover-title em{font-style:italic;font-weight:400}
.cover-title .mask{display:block;overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em}
.cover-title .hl{display:block;transform:translateY(114%);transition:transform 1s var(--ease)}
.cover-title .m2{margin-left:12%;white-space:nowrap}
.slide--cover.active .hl{transform:none}
.slide--cover.active .m1 .hl{transition-delay:.08s}
.slide--cover.active .m2 .hl{transition-delay:.2s}
.slide--cover.active .m3 .hl{transition-delay:.32s}
.cover-intro{margin-top:4.5vh;max-width:36ch;font-size:14px;line-height:1.9;opacity:.9}
.cover-hint{margin-top:auto;display:flex;align-items:center;gap:20px;color:var(--bone-dim)}
.ch-line{width:1px;height:58px;background:var(--line);position:relative;overflow:hidden;flex:0 0 auto}
.ch-line::after{
  content:'';position:absolute;left:0;top:-100%;width:100%;height:100%;background:var(--gold);
  animation:hsweep 2.2s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes hsweep{0%{top:-100%}55%{top:0}100%{top:100%}}
.cover-hint p{font:400 9.5px/1.8 'Archivo';letter-spacing:.24em;text-transform:uppercase}
.ch-key{opacity:.7}
.cover-visual{position:relative}
.cover-cap{
  position:absolute;right:0;bottom:2.4vh;padding-right:1.6vw;
  font:400 9.5px/1 'Archivo';letter-spacing:.22em;text-transform:uppercase;
  text-shadow:0 1px 10px rgba(0,0,0,.7);opacity:0;
}
.slide.active .cover-cap{animation:capIn .8s var(--ease) 1.1s both}

/* --- Diapositives de texte --- */
.slide--text{touch-action:pan-y}
.slide-body{
  position:relative;height:100%;overflow-y:auto;overscroll-behavior:contain;
  padding:calc(76px + 4vh) var(--pad) 13vh;
  display:flex;flex-direction:column;min-height:0;
}
.kicker{font:500 10px/1 'Archivo';letter-spacing:.3em;text-transform:uppercase;color:var(--bone-dim)}
.kicker .k-num{color:var(--gold);font:italic 500 16px 'Cormorant Garamond',serif;letter-spacing:0;margin-right:14px}
.t-h{font:500 clamp(38px,5.2vw,74px)/0.98 'Cormorant Garamond',serif;letter-spacing:-.015em;margin-top:2.6vh}
.rv{opacity:0;transform:translateY(22px)}
.slide.active .rv{animation:capIn .85s var(--ease) both;animation-delay:var(--d,0s)}

/* --- Séries --- */
.series-list{margin-top:5vh;max-width:62vw}
.s-row{
  display:grid;grid-template-columns:4em 1fr auto 60px;align-items:baseline;gap:2vw;
  padding:3.1vh 0;border-bottom:1px solid var(--line);
  transition:opacity .4s,padding-left .5s var(--ease);
}
.s-row:first-child{border-top:1px solid var(--line)}
.s-row:focus-visible{outline-offset:-4px}
.s-num{font:italic 500 15px 'Cormorant Garamond',serif;color:var(--gold)}
.s-title{font:500 clamp(26px,3.8vw,54px)/1 'Cormorant Garamond',serif;letter-spacing:-.01em}
.s-meta{font:400 10px 'Archivo';letter-spacing:.22em;text-transform:uppercase;color:var(--bone-dim)}
.s-arrow svg{width:38px;stroke:var(--gold);fill:none;stroke-width:1.2;opacity:0;transform:translateX(-8px);transition:.45s var(--ease)}
.s-row:hover .s-arrow svg,.s-row:focus-visible .s-arrow svg{opacity:1;transform:none}
@media (hover:hover){
  .series-list:hover .s-row{opacity:.3}
  .series-list .s-row:hover,.series-list .s-row:focus-visible{opacity:1;padding-left:1.6vw}
}
.s-preview{
  position:absolute;right:9vw;top:50%;width:clamp(160px,15vw,250px);aspect-ratio:4/5;
  transform:translateY(-50%) rotate(var(--rot,0deg)) scale(.94);
  opacity:0;pointer-events:none;overflow:hidden;background:var(--ink-2);
  transition:opacity .5s ease,transform .6s var(--ease);z-index:3;
}
.s-preview.on{opacity:1;transform:translateY(-50%) rotate(var(--rot,0deg)) scale(1)}
.s-preview img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.05)}
.series-empty{
  margin-top:5vh;max-width:46ch;
  font:italic 400 18px/1.7 'Cormorant Garamond',serif;color:var(--bone-dim);
}

/* --- Atelier --- */
.at-grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:3vw;margin-top:4.5vh}
.at-quote{
  grid-column:1/8;
  font:italic 500 clamp(24px,3vw,44px)/1.28 'Cormorant Garamond',serif;
  letter-spacing:-.01em;max-width:22ch;
}
.at-fig{grid-column:9/13;align-self:start}
.at-frame{height:min(50vh,470px);aspect-ratio:4/5;overflow:hidden;background:var(--ink-2)}
.at-frame img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.05)}
.at-fig figcaption{margin-top:12px;font:400 9.5px/1 'Archivo';letter-spacing:.22em;text-transform:uppercase;color:var(--bone-dim);text-align:right}
.at-text{grid-column:2/8;margin-top:5vh}
.at-text p{font:400 14px/1.9 'Archivo';opacity:.88;max-width:48ch}
.at-text p+p{margin-top:2.6vh}
.at-facts{
  display:flex;flex-wrap:wrap;gap:4vh 6vw;margin-top:auto;padding-top:4vh;
  border-top:1px solid var(--line);
}
.at-facts>div{max-width:300px}
.at-facts dt{font:500 10px 'Archivo';letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.at-facts dd{margin-top:10px;font:400 13px/1.7 'Archivo';color:var(--bone-dim)}

/* --- Contact --- */
.co-h{font:500 clamp(36px,5.4vw,84px)/1.05 'Cormorant Garamond',serif;letter-spacing:-.015em;margin-top:2.6vh}
.co-h em{font-style:italic;font-weight:400}
.co-mail-wrap{margin-top:5vh;display:flex;flex-wrap:wrap;align-items:baseline;gap:3vw}
.co-mail{
  position:relative;display:inline-block;
  font:500 clamp(24px,3.8vw,56px)/1.1 'Cormorant Garamond',serif;
  transition:color .35s;
}
.co-mail::after{
  content:'';position:absolute;left:0;bottom:-6px;height:1px;width:100%;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease);
}
.co-mail:hover{color:var(--gold)}
.co-mail:hover::after{transform:scaleX(1)}
.co-copy{
  font:500 10px 'Archivo';letter-spacing:.26em;text-transform:uppercase;color:var(--bone-dim);
  border-bottom:1px solid var(--line);padding-bottom:5px;transition:color .3s,border-color .3s;
}
.co-copy:hover{color:var(--bone);border-color:var(--bone)}
.co-grid{margin-top:6vh;display:flex;flex-wrap:wrap;gap:4vh 7vw}
.co-label{font:500 10px 'Archivo';letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.co-grid p+p,.co-grid>div>p{margin-top:10px;font:400 13px/1.8 'Archivo';opacity:.85}
.co-grid .co-copy{border-bottom:1px solid var(--line)}
.co-foot{
  margin-top:auto;padding-top:3.5vh;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.5vh 4vw;
}
.co-foot p{font:400 10px 'Archivo';letter-spacing:.2em;text-transform:uppercase;color:var(--bone-dim)}
.f-note{font:italic 400 14px 'Cormorant Garamond',serif;letter-spacing:0;text-transform:none}

/* ============ Réglette pellicule ============ */
#filmstrip{
  position:fixed;right:22px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:7px;z-index:90;mix-blend-mode:difference;
}
.fs-tick{position:relative;width:30px;height:16px;display:flex;align-items:center;justify-content:flex-end}
.fs-line{width:16px;height:1.5px;background:var(--bone-dim);transition:width .35s var(--ease),background .3s}
.fs-diamond{width:6px;height:6px;border:1px solid var(--bone-dim);transform:rotate(45deg);transition:background .3s,border-color .3s}
.fs-tick:hover .fs-line{width:24px;background:var(--bone)}
.fs-tick:hover .fs-diamond{border-color:var(--bone)}
.fs-tick.on .fs-line{width:30px;background:var(--bone)}
.fs-tick.on .fs-diamond{background:var(--bone);border-color:var(--bone)}
@media (hover:hover){
  .fs-tick::after{
    content:attr(data-label);
    position:absolute;right:38px;top:50%;transform:translateY(-50%) translateX(8px);
    font:500 9px/1 'Archivo';letter-spacing:.22em;text-transform:uppercase;color:var(--bone);
    white-space:nowrap;opacity:0;transition:opacity .3s,transform .35s var(--ease);pointer-events:none;
  }
  .fs-tick:hover::after{opacity:1;transform:translateY(-50%) translateX(0)}
}

/* ============ Barre de contrôle ============ */
#ctrl{
  position:fixed;left:50%;bottom:3.8vh;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:9px;z-index:90;
  mix-blend-mode:difference;
}
.ctrl-row{display:flex;align-items:center;gap:16px}
.ctrl-btn{
  width:40px;height:40px;border:1px solid var(--bone);display:grid;place-items:center;
  transition:opacity .3s;
}
.ctrl-btn svg{width:15px;stroke:var(--bone);fill:none;stroke-width:1.4;transition:transform .35s var(--ease)}
#ctrl-next:hover svg{transform:translateX(5px)}
#ctrl-prev:hover svg{transform:translateX(-5px)}
.ctrl-btn.off{opacity:.25;pointer-events:none}
.ctrl-count{font:400 11px 'Archivo';letter-spacing:.24em;text-transform:uppercase;color:var(--bone);min-width:74px;text-align:center}
.ctrl-count .cc-cur{font:italic 500 15px 'Cormorant Garamond',serif;letter-spacing:0}
.ctrl-bar{width:210px;height:1px;background:rgba(233,228,218,.25)}
.ctrl-bar span{display:block;height:100%;background:var(--bone);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease)}
.ctrl-label{
  font:400 9px/1 'Archivo';letter-spacing:.26em;text-transform:uppercase;color:var(--bone);
  opacity:.8;max-width:44vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ============ Tirage contact ============ */
#overview{
  position:fixed;inset:0;z-index:800;background:rgba(13,11,9,.97);
  opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s .45s;
}
#overview.open{opacity:1;visibility:visible;transition:opacity .45s ease}
.ov-in{height:100%;display:flex;flex-direction:column;padding:calc(76px + 1vh) var(--pad) 4vh}
.ov-head{display:flex;align-items:baseline;gap:3vw;opacity:0;transform:translateY(12px);transition:.6s var(--ease)}
#overview.open .ov-head{opacity:1;transform:none;transition-delay:.1s}
.ov-head h2{font:500 clamp(30px,4vw,58px)/1 'Cormorant Garamond',serif;letter-spacing:-.015em}
.ov-head .ov-hint{margin-left:auto;font:400 9.5px/1 'Archivo';letter-spacing:.24em;text-transform:uppercase;color:var(--bone-dim)}
#ov-close{
  width:46px;height:46px;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;align-self:center;
  transition:border-color .3s,transform .4s var(--ease);
}
#ov-close:hover{border-color:var(--bone);transform:rotate(90deg)}
#ov-close svg{width:14px;stroke:var(--bone);fill:none;stroke-width:1.4}
.ov-scroll{flex:1;overflow-y:auto;min-height:0;margin-top:3.5vh}
.ov-strip{position:relative;padding:32px 2px}
.ov-strip::before,.ov-strip::after{
  content:'';position:absolute;left:0;right:0;height:12px;
  background-image:radial-gradient(circle,rgba(233,228,218,.22) 2.5px,transparent 3.2px);
  background-size:22px 12px;background-position:center;background-repeat:repeat-x;
}
.ov-strip::before{top:4px}
.ov-strip::after{bottom:4px}
.ov-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px 20px}
.ov-cell{position:relative;text-align:left;opacity:0;transform:translateY(14px)}
#overview.open .ov-cell{opacity:1;transform:none;transition:opacity .5s ease var(--d),transform .5s var(--ease) var(--d)}
.ov-imgwrap{position:relative;display:block;overflow:hidden;background:var(--ink-2);aspect-ratio:4/5;outline:1px solid transparent;transition:outline-color .3s}
.ov-imgwrap img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.05);transition:transform .6s var(--ease)}
.ov-cell:hover .ov-imgwrap img{transform:scale(1.05)}
.ov-cell:hover .ov-imgwrap{outline-color:var(--bone-dim)}
.ov-cell:focus-visible .ov-imgwrap{outline:1px solid var(--gold);outline-offset:4px}
.ov-mark{position:absolute;inset:-6%;width:112%;height:112%;pointer-events:none;transform:rotate(-2deg)}
.ov-mark path{
  stroke:var(--gold);stroke-width:2.4;fill:none;
  stroke-dasharray:100;stroke-dashoffset:100;
  transition:stroke-dashoffset .9s ease .25s;
}
.ov-cell.marked .ov-mark path{stroke-dashoffset:0}
.ov-cap{display:flex;align-items:baseline;gap:10px;margin-top:9px}
.ov-num{font:italic 500 12px 'Cormorant Garamond',serif;color:var(--gold)}
.ov-name{font:500 15px/1.2 'Cormorant Garamond',serif}
.ov-ser{margin-left:auto;font:400 8.5px/1 'Archivo';letter-spacing:.18em;text-transform:uppercase;color:var(--bone-dim)}
.ov-foot{display:flex;flex-wrap:wrap;align-items:baseline;gap:2vh 3.4vw;margin-top:3.5vh;padding-top:3vh;border-top:1px solid var(--line)}
.ov-link{font:500 10px 'Archivo';letter-spacing:.24em;text-transform:uppercase;color:var(--bone-dim);transition:color .3s}
.ov-link:hover{color:var(--bone)}
.ov-link sup{color:var(--gold);font:italic 500 10px 'Cormorant Garamond',serif;margin-right:6px;letter-spacing:0}
.ov-note{margin-left:auto;font:italic 400 13px 'Cormorant Garamond',serif;color:var(--bone-dim)}
.ov-empty{font:italic 400 18px/1.7 'Cormorant Garamond',serif;color:var(--bone-dim)}

/* ============ Toast ============ */
#toast{
  position:fixed;left:50%;bottom:5vh;z-index:950;
  background:var(--bone);color:var(--ink);
  font:500 10px 'Archivo';letter-spacing:.2em;text-transform:uppercase;
  padding:14px 26px;opacity:0;pointer-events:none;
  transform:translate(-50%,16px);
  transition:opacity .4s,transform .5s var(--ease);
}
#toast::before{
  content:'';display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--gold);margin-right:12px;vertical-align:1px;
}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* ============ Gabarits de repli (pages, 404) ============ */
.fb{min-height:100vh;display:flex;align-items:flex-start;padding:16vh var(--pad) 10vh}
.fb-in{max-width:640px}
.fb-t{font:500 clamp(38px,6vw,72px)/1 'Cormorant Garamond',serif;letter-spacing:-.015em;margin-top:2.6vh}
.fb-body{margin-top:4vh;font:400 14px/1.9 'Archivo';opacity:.88}
.fb-body a{border-bottom:1px solid var(--line);padding-bottom:2px;transition:color .3s,border-color .3s}
.fb-body a:hover{color:var(--gold);border-color:var(--gold)}

/* ============ Mobile ============ */
@media (max-width:860px){ #filmstrip{display:none} }
@media (max-width:760px){
  :root{--pad:6.5vw}
  #site-header{height:64px;gap:3vw}
  #site-header nav{display:none}
  .clock{display:none}
  .cover-grid{display:flex;flex-direction:column}
  .cover-visual{order:-1;height:42%;border-bottom:1px solid var(--line)}
  .cover-txt{border-right:none;padding:3.5vh var(--pad) 11vh;flex:1;min-height:0}
  .cover-title{font-size:clamp(44px,11.5vw,92px);margin-top:2.5vh}
  .cover-title .m2{margin-left:8%}
  .cover-intro{margin-top:2.5vh}
  .cover-cap{bottom:10px;left:12px;right:auto;padding:0}
  .w-cap{max-width:80vw;bottom:10.5vh}
  .cap-tl .w-cap,.cap-tr .w-cap{top:calc(64px + 3vh)}
  .w-title{font-size:clamp(26px,7.4vw,40px)}
  #ctrl{bottom:2.4vh;gap:7px}
  .ctrl-btn{width:34px;height:34px}
  .ctrl-bar{width:130px}
  .ctrl-label{display:none}
  .slide-body{padding:calc(64px + 3vh) var(--pad) 12vh}
  .series-list{max-width:100%}
  .s-row{grid-template-columns:2.6em 1fr;row-gap:8px;padding:2.6vh 0}
  .s-meta{grid-column:2}
  .s-arrow{display:none}
  .s-preview{display:none}
  .at-grid{display:block}
  .at-frame{height:38vh;aspect-ratio:auto;width:100%}
  .at-text{margin-top:4vh}
  .at-facts{flex-direction:column;gap:3vh}
  .co-mail-wrap{flex-direction:column;align-items:flex-start;gap:2.5vh}
  .ov-grid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:14px}
  .ov-ser{display:none}
}

/* ============ Mouvement réduit ============ */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important}
  #grain{animation:none}
  .w-media img{transform:scale(1.04)!important}
}