/* Palimpseste — feuille de style
   Mise en page : deux tranches verticales (lues de bas en haut, comme un dos de livre)
   encadrent une entrée photo puis une grille de 12 colonnes de tirages.
   Trois styles de texte seulement :
   .d  titre       — Instrument Serif italique, très grand
   .t  texte       — EB Garamond, 18 px, interligne serré
   .i  sous-titre  — Azeret Mono capitales, 9,5 px (style par défaut du site) */

/* zoom du site : toutes les tailles en px sont multipliées par --z (125 % sur ordinateur, comme un zoom du navigateur),
   sauf la taille maximale des grands titres (264 px) et le curseur ; sur téléphone, le site reste à 100 % */
:root{--z:1.25}
@media (max-width:760px){:root{--z:1}}
:root{
  --paper:#E8E6DF;
  --paper-2:#DAD7CD;
  --ink:#151413;
  --ink-2:#5E5A52;
  --rule:#BFBAAE;
  --signal:#E0311A;
  --f-display:"Instrument Serif","Bodoni 72",Georgia,serif;
  --f-text:"EB Garamond",Garamond,Georgia,serif;
  --f-mono:"Azeret Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --t-size:calc(20.5px * var(--z));
  --rail:calc(58px * var(--z));
  --gap:clamp(calc(12px * var(--z)),2vw,calc(32px * var(--z)));
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{background:var(--paper)}
body{
  margin:0;background:var(--paper);color:var(--ink);
  padding-left:max(calc(16px * var(--z)), env(safe-area-inset-left,0px));
  padding-right:max(calc(16px * var(--z)), env(safe-area-inset-right,0px));
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit}
img,video{max-width:100%}
:focus-visible{outline:1px solid var(--signal);outline-offset:calc(3px * var(--z))}
::selection{background:var(--signal);color:var(--paper)}

/* ——— les trois styles ——— */
body,.i{font-family:var(--f-mono);font-size:calc(11px * var(--z));line-height:1.5;letter-spacing:.12em;text-transform:uppercase;font-weight:400}
.d{font-family:var(--f-display);font-style:italic;font-weight:400;font-synthesis:none;
  font-size:clamp(calc(80px * var(--z)),16.5vw,264px);line-height:.86;letter-spacing:-.025em;text-transform:none;text-wrap:balance;margin:0}
.t{text-wrap:pretty;hyphens:manual;font-family:var(--f-text);font-style:normal;font-weight:400;font-size:var(--t-size);line-height:1.26;letter-spacing:0;text-transform:none}
.mute{color:var(--ink-2)}
.count{font-variant-numeric:tabular-nums}
.todo{color:var(--signal)}

/* ——— tranches ——— */
.rail{
  position:fixed;top:0;bottom:0;z-index:30;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding-block:calc(calc(22px * var(--z)) + env(safe-area-inset-top,0px)) calc(calc(22px * var(--z)) + env(safe-area-inset-bottom,0px));
  background:var(--paper);
}
.rail-l{left:0;width:calc(var(--rail) + env(safe-area-inset-left,0px));padding-left:env(safe-area-inset-left,0px);border-right:1px solid var(--rule)}
.rail-r{right:0;width:calc(var(--rail) + env(safe-area-inset-right,0px));padding-right:env(safe-area-inset-right,0px);border-left:1px solid var(--rule)}
.v{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap}
.rail nav{display:flex;flex-direction:column;align-items:center;gap:calc(26px * var(--z))}
.rail a:hover,.rail a[aria-current="page"]{color:var(--signal)}
/* zones de clic agrandies, invisibles : les liens du menu, du pied de page et le bouton du son */

main{margin-inline:var(--rail);padding-inline:clamp(calc(8px * var(--z)),3.2vw,calc(52px * var(--z)));padding-block:calc(36px * var(--z)) calc(calc(11px * var(--z)) + env(safe-area-inset-bottom,0px))}

/* ——— tirage : traits de coupe ——— */
.crop{--pad:calc(14px * var(--z));--c:var(--ink);position:relative;display:block;padding:var(--pad)}
.crop img,.crop video{position:relative;z-index:1;display:block;width:100%;height:auto;background:var(--paper-2)}
/* --ext allonge les traits vers l'extérieur, --cmt les épaissit (animables) */
@property --ext{syntax:'<length>';inherits:true;initial-value:0px}
@property --cmt{syntax:'<length>';inherits:true;initial-value:1px}
.crop{--ext:0px;--cmt:1px;transition:--ext .3s var(--ease),--cmt .2s var(--ease)}
.cm{--o:calc(var(--pad) + var(--ext) - var(--cmt));position:absolute;z-index:2;width:calc(var(--pad) + var(--ext));height:calc(var(--pad) + var(--ext));pointer-events:none;background-repeat:no-repeat;
  background-image:linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c));
  background-size:calc(var(--pad) - calc(4px * var(--z)) + var(--ext)) var(--cmt),var(--cmt) calc(var(--pad) - calc(4px * var(--z)) + var(--ext))}
.cm.tl{top:calc(-1 * var(--ext));left:calc(-1 * var(--ext));background-position:0 var(--o),var(--o) 0}
.cm.tr{top:calc(-1 * var(--ext));right:calc(-1 * var(--ext));background-position:right 0 top var(--o),0 0}
.cm.bl{bottom:calc(-1 * var(--ext));left:calc(-1 * var(--ext));background-position:0 0,var(--o) 100%}
.cm.br{bottom:calc(-1 * var(--ext));right:calc(-1 * var(--ext));background-position:right 0 top 0,0 100%}


/* ——— survol : traits de coupe et nom du projet passent au rouge ———
   seule l'image réagit : la marge des traits de coupe n'est pas cliquable */
.hov{display:block;pointer-events:none}
.hov img,.hov video,.hov.row{pointer-events:auto}
#hero-img{cursor:pointer}
.hov:focus-visible{outline:none}
.hov:hover .crop,.hov:focus-visible .crop{--c:var(--signal)}

/* survol : l'image recule de la même distance pour toutes (10 px à chaque bout de son grand côté, calculé
   dans site.js → --rs), les traits s'épaississent et des mires de repérage apparaissent au milieu de chaque bord */
.hov .crop img,.hov .crop video{transition:transform .35s var(--ease)}
.hov:hover .crop img,.hov:focus-visible .crop img,.hov:hover .crop video{transform:scale(var(--rs,.96))}
.hov:hover .crop,.hov:focus-visible .crop{--cmt:calc(2px * var(--z))}
.mi{display:block;position:absolute;z-index:2;width:calc(12px * var(--z));height:calc(12px * var(--z));opacity:0;transform:scale(.3) rotate(-45deg);pointer-events:none;transition:opacity .18s linear,transform .3s var(--ease);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='3.4' fill='none' stroke='%23E0311A' stroke-width='1'/%3E%3Cpath d='M6 0v12M0 6h12' stroke='%23E0311A' stroke-width='1'/%3E%3C/svg%3E") center / contain no-repeat}
.mi.t{top:1px;left:calc(50% - calc(6px * var(--z)))}
.mi.b{bottom:1px;left:calc(50% - calc(6px * var(--z)))}
.mi.l{left:1px;top:calc(50% - calc(6px * var(--z)))}
.mi.r{right:1px;top:calc(50% - calc(6px * var(--z)))}
.hov:hover .mi,.hov:focus-visible .mi{opacity:1;transform:none}

/* ——— entrée photo ——— */
/* l'accueil remplit exactement la fenêtre : barre en haut, photo, « Palimpseste » en bas sur toute la largeur */
.hero{display:flex;flex-direction:column;height:calc(100vh - calc(36px * var(--z)));height:calc(100svh - calc(36px * var(--z)));margin-bottom:clamp(calc(56px * var(--z)),8vw,calc(120px * var(--z)))}
.stage{position:relative;flex:1 1 0;min-height:0;display:flex;align-items:flex-end;outline-offset:calc(6px * var(--z))}
.stage .crop{max-width:100%}
.stage .crop img{width:auto;max-width:100%;max-height:var(--hero-h,60vh);transition:none}
.hero-title{position:relative;z-index:4;flex:none;margin:-.48em 0 0;padding-bottom:.14em;white-space:nowrap;text-wrap:nowrap;color:var(--paper);mix-blend-mode:difference;pointer-events:none}
.hero-title span{display:inline-block}
.hero-bar{flex:none;display:grid;grid-template-columns:1fr auto auto;gap:calc(24px * var(--z));align-items:baseline;margin-bottom:calc(14px * var(--z));padding-bottom:calc(8px * var(--z));border-bottom:1px solid var(--rule)}
.hero-bar .ctl{display:flex;gap:calc(18px * var(--z))}
.hero-bar button:hover{color:var(--signal)}

/* ——— index : liste typographique, aperçu au survol ——— */
.ix-list{margin:0;padding:0;list-style:none;border-bottom:1px solid var(--rule)}
.row{display:grid;grid-template-columns:4em minmax(0,1fr) 14em 5em;gap:calc(16px * var(--z));align-items:baseline;padding-block:calc(14px * var(--z)) calc(12px * var(--z));border-top:1px solid var(--rule)}
.row-t{font-family:var(--f-display);font-style:italic;font-weight:400;font-size:clamp(calc(42px * var(--z)),5.5vw,calc(92px * var(--z)));line-height:.95;letter-spacing:-.02em;text-transform:none}
.hov:hover .row-t,.hov:focus-visible .row-t{color:var(--signal)}
.row-img{display:none}
#ix-prev{position:fixed;left:0;top:0;z-index:55;width:calc(clamp(calc(180px * var(--z)),19vw,calc(290px * var(--z))) * var(--k,1));pointer-events:none;--c:var(--signal)}
#ix-prev img{display:block;width:100%;height:auto}

/* ——— projet ——— */
.p-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:calc(36px * var(--z));margin-bottom:clamp(calc(48px * var(--z)),7vw,calc(96px * var(--z)))}
.p-num{grid-column:1 / -1;margin:0}
.p-head .d{grid-column:1 / -1}
.meta{margin:0;display:grid;align-content:start}
.meta div{display:grid;grid-template-columns:10em 1fr;gap:calc(8px * var(--z));border-top:1px solid var(--rule);padding-block:calc(6px * var(--z))}
.meta dd{margin:0}
.p-head .meta{grid-column:1 / span 4}
.p-text{grid-column:7 / -1;max-width:44ch}
.p-text p{margin:0 0 .8em}

/* grille : cases égales, chaque vue entière, posée en bas de sa case */
/* les cases d'une rangée sont alignées par le bas : une image sur 2 cases (un peu plus haute, l'espace entre colonnes compris) ne dépasse plus */
.gr-list{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:calc(30px * var(--z)) var(--gap);align-items:end;margin:0;padding:0;list-style:none}
.gr-list .hov{display:block;width:100%}
.cell{display:flex;align-items:flex-end;aspect-ratio:var(--cell,1);container-type:size}
.cell .crop{width:min(100cqw, calc((100cqh - 2 * var(--pad)) * var(--ar) + 2 * var(--pad)))}
.edge{display:block;padding-inline:calc(14px * var(--z));color:var(--ink-2);font-variant-numeric:tabular-nums}
.gr-list .hov:hover .edge{color:var(--signal)}
.play{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);padding:calc(5px * var(--z)) calc(9px * var(--z));background:var(--paper);color:var(--ink);white-space:nowrap;pointer-events:none}

.p-nav{display:flex;justify-content:space-between;gap:calc(16px * var(--z));margin-top:calc(44px * var(--z));padding-top:calc(8px * var(--z));border-top:1px solid var(--rule)}
/* chaque lien ne prend que la largeur de son texte (sa zone cliquable est réglée avec les autres, plus bas) */
.p-nav a{display:grid;gap:calc(2px * var(--z));flex:0 1 auto;max-width:48%}
.p-nav a:last-child{justify-items:end}
.p-nav a:last-child{text-align:right}
.p-nav a:hover .t{color:var(--signal)}

/* ——— à propos ——— */
.about{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:calc(48px * var(--z))}
.about .d{grid-column:1 / -1}
.bio{grid-column:1 / span 6;min-width:0}
.bio p{margin:0 0 .8em;max-width:62ch}
.about aside{grid-column:8 / span 5;min-width:0;display:grid;gap:calc(36px * var(--z));align-content:start}
.about h2{margin:0 0 calc(6px * var(--z));padding-bottom:calc(6px * var(--z));border-bottom:1px solid var(--rule);font:inherit}
.about ul{margin:0;padding:0;list-style:none}
.about li{display:grid;grid-template-columns:1fr auto;gap:calc(16px * var(--z));align-items:baseline;padding-block:calc(6px * var(--z))}
.about li > :last-child{font-variant-numeric:tabular-nums}
.about a:hover,.about button:hover{color:var(--signal)}

/* ——— mentions légales ——— */
.legal{display:grid;gap:calc(48px * var(--z))}
.legal .meta{max-width:calc(900px * var(--z))}
.legal .meta div{grid-template-columns:minmax(8em,1fr) 4fr;align-items:baseline;padding-block:calc(8px * var(--z))}
.legal .meta dd.t{max-width:62ch}

footer{display:flex;justify-content:space-between;gap:calc(16px * var(--z));flex-wrap:wrap;margin-top:clamp(calc(72px * var(--z)),10vw,calc(140px * var(--z)));padding-top:calc(8px * var(--z));border-top:1px solid var(--rule)}
.foot-link:hover{color:var(--signal)}

/* ——— agrandissement ——— */
/* la barre du bas ne bouge pas : l'image se centre dans la zone au-dessus, quelle que soit sa forme */
#lb{position:fixed;inset:0;z-index:60;background:var(--paper);display:grid;grid-template-rows:minmax(0,1fr) auto;justify-items:center;align-items:center;gap:calc(14px * var(--z));
  padding:calc(calc(24px * var(--z)) + env(safe-area-inset-top,0px)) max(calc(16px * var(--z)), env(safe-area-inset-right,0px)) calc(calc(24px * var(--z)) + env(safe-area-inset-bottom,0px)) max(calc(16px * var(--z)), env(safe-area-inset-left,0px))}
#lb .crop{max-width:100%}
#lb .crop img,#lb .crop video{width:auto;max-width:min(calc(1400px * var(--z)),calc(100vw - calc(64px * var(--z))));max-height:calc(100vh - calc(150px * var(--z)));transition:none}
#lb .crop video{background:var(--ink)}
.lb-bar{display:flex;gap:calc(20px * var(--z));align-items:baseline;flex-wrap:wrap;justify-content:center}
.lb-bar button:hover{color:var(--signal)}

/* ——— curseur : disque d'inversion organique (site.js) ——— */
#disc{--c0:14px;--phi:1.618034;position:fixed;left:0;top:0;z-index:101;pointer-events:none;display:none;will-change:transform;mix-blend-mode:difference}
#disc .forme{position:absolute;left:0;top:0;display:block;width:var(--c0);height:var(--c0);border-radius:999px;background:#fff;will-change:transform,width,height;
  transition:width .5s cubic-bezier(.34,1.56,.64,1),height .5s cubic-bezier(.34,1.56,.64,1),border-radius .45s cubic-bezier(.22,1,.36,1)}
/* tailles en suite d'or : 14 → 14·φ² → 14·φ³ */
#disc.hot .forme{width:calc(var(--c0) * var(--phi) * var(--phi));height:calc(var(--c0) * var(--phi) * var(--phi))}
/* sur les grands titres (gomme), il grossit franchement */
#disc.titre .forme{width:calc(var(--c0) * var(--phi) * var(--phi) * var(--phi));height:calc(var(--c0) * var(--phi) * var(--phi) * var(--phi))}
html.fine #disc.on{display:block}
html.fine, html.fine *{cursor:none !important}

#grain{position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.55;mix-blend-mode:multiply}

@media (prefers-reduced-motion:reduce){#disc,.crop,.crop::after,.mi,.crop img{transition:none !important}}

/* ——— téléphone ——— */
@media (max-width:950px){
  :root{--t-size:calc(18px * var(--z))}
  .rail{position:relative;flex-direction:row;width:auto;height:auto;border:0;padding:calc(14px * var(--z)) 0}
  .rail-l{border-bottom:1px solid var(--rule);padding-left:0}
  .rail-r{position:fixed;top:auto;bottom:0;left:0;right:0;width:auto;border-top:1px solid var(--rule);
    padding:calc(12px * var(--z)) max(calc(16px * var(--z)), env(safe-area-inset-right,0px)) calc(calc(12px * var(--z)) + env(safe-area-inset-bottom,0px)) max(calc(16px * var(--z)), env(safe-area-inset-left,0px))}
  .v{writing-mode:horizontal-tb;transform:none}
  .rail nav{flex-direction:row;gap:calc(20px * var(--z))}
  main{margin-inline:0;padding-inline:0;padding-block:calc(28px * var(--z)) calc(90px * var(--z))}
  .hero{height:auto}
  .stage{flex:none}
  .stage .crop img{max-height:62vh}
  .hero-bar{grid-template-columns:1fr auto}
  .hero-bar .ctl{grid-column:1 / -1}
  .row{grid-template-columns:2.6em minmax(0,1fr);row-gap:calc(4px * var(--z))}
  .row > .mute{grid-column:2}
  .row-img{display:block;grid-column:2;width:62%;margin-top:calc(6px * var(--z))}
  .p-head .meta,.p-text,.bio,.about aside{grid-column:1 / -1}
  .legal .meta div{grid-template-columns:1fr}
  .pl{display:none}
}

/* ——— textes modifiables (mode « Mise en page ») ——— */
[data-champ]{outline:1px dashed var(--rule);outline-offset:calc(4px * var(--z));min-width:3em;cursor:text}
[data-champ]:focus{outline:1px solid var(--signal)}
[data-champ]:empty::before{content:attr(data-ph);color:var(--ink-2)}
.t-edit{white-space:pre-wrap;min-height:4.5em}

/* ——— mode « Mise en page » (visible seulement sur ton ordinateur) ——— */
/* panneau Mise en page : en haut à droite, contre le rail, pour ne pas cacher le contenu */
#mep{position:fixed;z-index:70;right:calc(var(--rail) + calc(14px * var(--z)) + env(safe-area-inset-right,0px));top:calc(calc(14px * var(--z)) + env(safe-area-inset-top,0px));
  display:grid;gap:calc(8px * var(--z));justify-items:end;max-width:min(calc(400px * var(--z)),calc(100vw - calc(32px * var(--z))))}
#mep-toggle,#mep-panel button{padding:calc(5px * var(--z)) calc(9px * var(--z));border:1px solid var(--ink);background:var(--paper)}
#mep-toggle[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
#mep-panel{display:grid;gap:calc(10px * var(--z));padding:calc(12px * var(--z));background:var(--paper);border:1px solid var(--ink);max-height:calc(100vh - calc(80px * var(--z)));overflow:auto}
#mep-panel p{margin:0}
.mep-help{font-size:calc(15px * var(--z));color:var(--ink-2)}
.mep-tools{display:grid;gap:calc(6px * var(--z))}
.mep-sel{padding-bottom:calc(6px * var(--z));border-bottom:1px solid var(--rule)}
.mep-row{display:grid;grid-template-columns:7.5em auto auto 1fr;gap:calc(6px * var(--z));align-items:center;white-space:nowrap}
.mep-row.mep-all{display:flex;flex-wrap:wrap;gap:calc(6px * var(--z));padding-top:calc(4px * var(--z))}
.mep-row button{min-width:calc(34px * var(--z));text-align:center}
.mep-v{text-align:right;color:var(--ink-2);font-variant-numeric:tabular-nums}
.mep-actions{display:flex;gap:calc(6px * var(--z))}
#mep-save{background:var(--ink) !important;color:var(--paper)}
#mep-panel button:hover{border-color:var(--signal);color:var(--signal)}
#mep-save:hover{color:var(--paper);background:var(--signal) !important}
.mep-status{color:var(--signal);min-height:1.5em}
.mep-sons summary{cursor:pointer;padding-bottom:calc(6px * var(--z));border-bottom:1px solid var(--rule)}
.mep-sons[open] summary{margin-bottom:calc(6px * var(--z))}
#mep-sons-l{display:grid;gap:calc(5px * var(--z))}
.mep-son{display:grid;grid-template-columns:1fr calc(96px * var(--z)) 3.6em calc(24px * var(--z));gap:calc(8px * var(--z));align-items:center;white-space:nowrap}
.mep-son.gen{padding-bottom:calc(5px * var(--z));margin-bottom:calc(2px * var(--z));border-bottom:1px solid var(--rule)}
.mep-son input{width:100%;accent-color:var(--ink);margin:0}
.mep-son button{padding:calc(2px * var(--z)) 0 !important;min-width:0;font-size:calc(8px * var(--z))}
#mep-out{width:100%;height:calc(120px * var(--z));font:calc(11px * var(--z))/1.4 var(--f-mono);text-transform:none;letter-spacing:0}
html.mep .item{outline:1px dashed transparent;outline-offset:calc(2px * var(--z))}
html.mep .item:hover{outline-color:var(--rule)}
html.mep .item.mep-on{outline:1px solid var(--signal)}
html.mep .gr-list .f{position:relative;cursor:grab}
html.mep .mep-drag{opacity:.35}
html.mep .mep-over .crop{--c:var(--signal);outline:1px solid var(--signal)}
.mep-cov{position:absolute;z-index:4;left:calc(16px * var(--z));bottom:calc(30px * var(--z));padding:calc(3px * var(--z)) calc(7px * var(--z));font-size:calc(8.5px * var(--z));background:var(--paper);color:var(--ink);border:1px solid var(--ink)}
.mep-cov:hover{color:var(--signal);border-color:var(--signal)}
.mep-big{position:absolute;z-index:4;left:calc(96px * var(--z));bottom:calc(30px * var(--z));padding:calc(3px * var(--z)) calc(7px * var(--z));font-size:calc(8.5px * var(--z));background:var(--paper);color:var(--ink);border:1px solid var(--ink)}
.mep-big:hover{color:var(--signal);border-color:var(--signal)}
.mep-big.is{background:var(--ink) !important;color:var(--paper)}
.mep-cov.is{background:var(--signal) !important;color:var(--paper);border-color:var(--signal) !important}
@media (max-width:950px){#mep{display:none}}

/* ——— À propos : photo de profil (a-propos/portrait.jpg) ———
   mise en forme « Superposé » */
.portrait{margin:0;min-width:0}
.portrait .crop img{width:100%;height:auto}
.portrait figcaption{display:flex;justify-content:space-between;gap:calc(16px * var(--z));margin-top:calc(6px * var(--z));padding-inline:var(--pad,calc(14px * var(--z)))}
.about-nom .nl{display:block;width:max-content;white-space:nowrap}
html.sans-portrait .portrait{display:none !important}

/* Superposé : la photo commence sous la fin du nom (--nom-w, mesurée dans site.js), et le nom passe dessus en différence, comme l'accueil */
.about-nom{grid-row:1;position:relative;z-index:3;align-self:center;color:var(--paper);mix-blend-mode:difference;pointer-events:none}
.portrait{--pw:clamp(calc(300px * var(--z)),36%,calc(600px * var(--z)));grid-row:1;grid-column:1 / -1;align-self:start;width:var(--pw);margin-left:min(calc(var(--nom-w,calc(640px * var(--z))) * .7),calc(100% - var(--pw)))}

@media (max-width:950px){
  .portrait{grid-row:auto;width:auto;margin:0}
  .about-nom{color:inherit;mix-blend-mode:normal}
}
.mep-choice{display:flex;flex-wrap:wrap;gap:calc(6px * var(--z))}
.mep-choice button.is{background:var(--ink) !important;color:var(--paper)}
.mep-desc{font-size:calc(15px * var(--z));color:var(--ink-2);max-width:30ch}

/* ═══════════ effets (assets/effets.js) ═══════════ */

/* rien ne doit faire déborder la page sur les côtés (sur téléphone, cela dézoome tout le site) */
main{overflow-x:clip}

/* ——— titres : le curseur gomme les lettres qu'il touche (effets.js) ——— */
.ep-m{display:inline-block;white-space:nowrap}
.ep{display:inline-block;transition:opacity .6s var(--ease),filter .6s var(--ease)}
.ep.pres{transition-duration:.15s}

/* ——— défilement vidéo : glisser le curseur sur la vignette fait avancer la vidéo ——— */
.crop .scrub{position:absolute;z-index:1;left:var(--pad);top:var(--pad);width:calc(100% - 2 * var(--pad));height:calc(100% - 2 * var(--pad));object-fit:cover;opacity:0;pointer-events:auto}
.crop .scrub.on{opacity:1}
.sc-bar{position:absolute;z-index:3;left:var(--pad);bottom:calc(var(--pad) - 1px);height:calc(2px * var(--z));width:0;background:var(--signal);opacity:0;pointer-events:none}
.f.scrubbing .sc-bar{opacity:1}
.f.scrubbing .play{opacity:0}

/* ——— reflet : sur téléphone, un reflet glisse sur les images quand on penche l'écran ——— */
.rf{display:none}
html.tilt .rf{display:block;position:absolute;z-index:2;inset:var(--pad);pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(115deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.32) 50%,rgba(255,255,255,0) 62%) no-repeat;
  background-size:300% 300%;background-position:calc(50% - var(--gx,0) * 48%) calc(50% - var(--gy,0) * 48%)}
#tilt-btn:hover{color:var(--signal)}

/* ——— colophon ——— */
.col-intro{max-width:46ch;margin:0}
.col-intro p{margin:0 0 .8em}.col-intro p:last-child{margin-bottom:0}
.col-nuancier{display:flex;flex-wrap:wrap;gap:calc(8px * var(--z)) calc(28px * var(--z))}
.col-nuancier > span{display:inline-flex;align-items:baseline;gap:calc(8px * var(--z))}
.col-nuancier i{display:inline-block;width:.8em;height:.8em;border:1px solid var(--rule);transform:translateY(.08em)}

@media (prefers-reduced-motion:reduce){
  .ep{transition:none}
}
@media (max-width:950px){
  .rail-r > .mute{display:none}
}

/* ——— Mise en page : textes de l'À propos et du Colophon modifiables ——— */
html.mep .mep-ed{outline:1px dashed var(--rule);outline-offset:calc(8px * var(--z));cursor:text}
html.mep .mep-ed:focus,html.mep .mep-ed:focus-within{outline:1px solid var(--signal)}
html.mep .mep-ed li,html.mep .mep-ed.meta > div{position:relative}
.mep-x{position:absolute;left:-30px;top:50%;transform:translateY(-50%);width:calc(20px * var(--z));height:calc(20px * var(--z));padding:0;font:calc(12px * var(--z))/calc(18px * var(--z)) var(--f-mono);text-align:center;border:1px solid var(--ink);background:var(--paper);color:var(--ink);cursor:pointer}
.mep-x:hover{color:var(--signal);border-color:var(--signal)}
.mep-add{display:block;justify-self:start;width:auto;margin-top:calc(10px * var(--z));padding:calc(4px * var(--z)) calc(9px * var(--z));border:1px solid var(--ink);background:var(--paper);color:var(--ink);cursor:pointer}
.mep-add:hover{color:var(--signal);border-color:var(--signal)}

/* ——— protection des images : ni glisser, ni sélection, ni menu d'enregistrement à l'appui long (iPhone) ——— */
img,video{-webkit-user-drag:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#droits{position:fixed;z-index:90;left:0;top:0;padding:calc(3px * var(--z)) calc(7px * var(--z));background:var(--ink);color:var(--paper);font-size:calc(9px * var(--z));white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .2s linear}
#droits.on{opacity:1}

/* ——— appel au contact en bas de chaque projet ——— */
/* une phrase au corps du texte, dans la même colonne que le texte du projet */
.p-contact{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);margin:clamp(calc(64px * var(--z)),8vw,calc(120px * var(--z))) 0 clamp(calc(40px * var(--z)),5vw,calc(72px * var(--z)));padding-top:calc(18px * var(--z));border-top:1px solid var(--rule)}
.p-contact p{grid-column:7 / -1;max-width:44ch;margin:0}
.p-contact a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
.p-contact a:hover{color:var(--signal)}
@media (max-width:950px){.p-contact p{grid-column:1 / -1}}

/* ——— bouton du son, dans le pied de page (sons.js) ——— */
.son{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.son:hover{color:var(--signal)}
.son[aria-pressed="false"]{color:var(--ink-2)}

/* ——— zones cliquables : la même pour tous les textes qui se cliquent ———
   une marge invisible autour du texte (--hit-y au-dessus et en dessous, --hit-x sur les côtés) :
   menus des tranches, Précédent / Suivant, pied de page, barre de l'accueil et du plein écran, adresse e-mail.
   Dans les listes serrées (contacts de l'À propos), toute la ligne se clique. */
:root{--hit-y:calc(20px * var(--z));--hit-x:calc(16px * var(--z))}
.rail a,footer a,footer button,.p-nav a,.hero-bar button,.lb-bar button,.p-contact a{position:relative}
.rail a::after,footer a::after,footer button::after,.p-nav a::after,.hero-bar button::after,.lb-bar button::after,.p-contact a::after{
  content:"";position:absolute;inset:calc(-1 * var(--hit-y)) calc(-1 * var(--hit-x))}
/* tranches : le texte est vertical, la marge suit le sens de lecture */
@media (min-width:951px){.rail .v::after{inset:calc(-1 * var(--hit-x)) calc(-1 * var(--hit-y))}}
/* liens serrés côte à côte : la zone s'arrête au milieu de l'espace qui les sépare, pour qu'aucun ne vole le clic du voisin */
.hero-bar .ctl button::after{left:calc(-9px * var(--z));right:calc(-9px * var(--z))}
.lb-bar button::after{left:calc(-10px * var(--z));right:calc(-10px * var(--z))}
@media (min-width:951px){.rail nav .v::after{top:calc(-13px * var(--z));bottom:calc(-13px * var(--z))}}
@media (max-width:950px){.rail nav a::after{left:calc(-10px * var(--z));right:calc(-10px * var(--z))}}
/* À propos : toute la ligne de contact se clique (y compris « Instagram ↗ »), « Copier » garde sa propre zone */
.about li{position:relative}
.about li:has(> a){padding-block:calc(10px * var(--z))}
.about li > a{position:static}
.about li > a::after{content:"";position:absolute;inset:0 calc(-1 * var(--hit-x))}
.about li > a:hover ~ span{color:var(--signal)}
.about #copy{position:relative;z-index:1}
.about #copy::after{content:"";position:absolute;inset:calc(-15px * var(--z)) calc(-1 * var(--hit-x))}