/* ════════════════════════════════════════════════════════════════
   BASE : commun à toutes les pages de la refonte
   Polices, couleurs, navigation, transitions, palette ⌘K, version courte,
   bandeau de mesure d'audience, impression.
   Pas de build : ce fichier est servi tel quel.
   ════════════════════════════════════════════════════════════════ */

/* ═════════ POLICES (auto-hébergées) ═════════
   Les plages latin-ext excluent ı et Œ/œ, déjà présents dans les fichiers latins :
   sans ça, le seul « Œ » de NŒUD faisait télécharger 83 Ko de police en plus. */
@font-face{font-family:"Instrument Serif";src:url("/assets/fonts/instrument-serif-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Serif";src:url("/assets/fonts/instrument-serif-latin-ext.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-0130,U+0132-0151,U+0154-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Serif";src:url("/assets/fonts/instrument-serif-italic-latin.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";src:url("/assets/fonts/inter-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";src:url("/assets/fonts/inter-latin-ext.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0100-0130,U+0132-0151,U+0154-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ═════════ COULEURS : palette d'origine ═════════ */
:root{
  --bg:#f5f3ef; --surface:#ece8e1; --surface-2:#e6e1d8;
  --text:#111; --muted:#555; --soft:#595959;
  --accent:#7a1f1f; --accent-text:#7a1f1f;
  --line:#1111111a; --line-soft:#1111110f;
  --on-accent:#f5f3ef;
  --font-serif:"Instrument Serif","Times New Roman",serif;
  --font-sans:"Inter",system-ui,-apple-system,sans-serif;
  --max:1280px; --gutter:clamp(1.4rem,4vw,3rem);
  --radius:8px; --radius-lg:22px;
  --ease:cubic-bezier(.22,1,.36,1);
  /* ressorts des micro-interactions : courbe classique si linear() n'est pas compris */
  --ressort:var(--ease); --ressort-vif:var(--ease);
  color-scheme:light;
}
/* ressorts calculés (amortissement 0,6 et 0,4) : léger dépassement, puis retour en place */
@supports (transition-timing-function: linear(0, 1)){
  :root{
    --ressort:linear(0,0.038,0.133,0.262,0.405,0.549,0.682,0.798,0.895,0.97,1.026,1.063,1.085,1.094,1.094,1.087,1.076,1.063,1.049,1.036,1.024,1.014,1.006,1,1);
    --ressort-vif:linear(0,0.084,0.289,0.546,0.8,1.01,1.157,1.235,1.253,1.226,1.17,1.104,1.041,0.99,0.956,0.939,0.936,0.945,0.959,0.976,0.992,1.004,1.012,1.016,1);
  }
}
[data-theme=dark]{
  --bg:#1c1c1e; --surface:#242426; --surface-2:#2c2c2e;
  --text:#e5e5ea; --muted:#a8a8ad; --soft:#9a9aa0;
  --accent:#b03a3a; --accent-text:#e07474;   /* 4,6:1 au pire, sur les zones grisées */
  --line:#e5e5ea1f; --line-soft:#e5e5ea0d;
  color-scheme:dark;
}

/* ═════════ SOCLE ═════════ */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-color:var(--line) transparent}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--font-sans);font-size:17px;line-height:1.6;
  overflow-x:hidden;
  transition:background-color .45s ease,color .45s ease;
}
/* grain discret, fixe, sans coût de repaint */
body::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035;
  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='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.serif{font-family:var(--font-serif);font-weight:400;letter-spacing:-.02em;line-height:1}
/* équilibre les titres : plus de mot seul sur la dernière ligne */
h1,h2,h3,h4{text-wrap:balance}
p{text-wrap:pretty}
::selection{background:var(--accent);color:var(--on-accent)}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter);position:relative;z-index:2}
.eyebrow{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--soft)}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--on-accent);padding:.7rem 1.1rem;z-index:100;border-radius:0 0 var(--radius) 0}
.skip:focus{left:0;top:0}

/* ═════════ TRANSITIONS DE PAGE (progressif) ═════════ */
@media (prefers-reduced-motion: no-preference){
  @view-transition{ navigation:auto; }
}
::view-transition-old(root){animation:vt-out .35s ease both}
::view-transition-new(root){animation:vt-in .45s ease both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}
/* le titre et l'image cliqués sur l'accueil glissent jusqu'à la page projet */
::view-transition-group(project-title),
::view-transition-group(project-cover){animation-duration:.6s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
::view-transition-old(project-cover),::view-transition-new(project-cover){height:100%;object-fit:cover}
/* bascule de thème : le nouveau thème se déploie en cercle depuis le clic */
html[data-vt="theme"]::view-transition-old(root),
html[data-vt="theme"]::view-transition-new(root){animation:none;mix-blend-mode:normal}
html[data-vt="theme"]::view-transition-old(root){z-index:1}
html[data-vt="theme"]::view-transition-new(root){z-index:2}

/* ═════════ NAVIGATION ═════════ */
.bar{position:fixed;top:0;left:0;right:0;height:2px;z-index:70;transform-origin:0 50%;background:var(--accent-text);transform:scaleX(0)}
@supports (animation-timeline: scroll()){
  .bar{animation:barGrow linear both;animation-timeline:scroll(root block);animation-duration:auto}
  @keyframes barGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  padding:1rem var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  /* elle revient d'un ressort… */
  transition:translate .6s var(--ressort),opacity .35s ease;
}
/* … et s'efface vite quand on descend : le contenu reprend toute la place (commun.js) */
.nav[data-cache]{translate:0 -115%;opacity:0;pointer-events:none;transition:translate .38s var(--ease),opacity .25s ease}
/* le fond vitré est un calque à part : l'accueil peut le faire apparaître
   seulement quand le grand nom a fini de se ranger dans la barre */
.nav::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
@supports not (backdrop-filter: blur(1px)){ .nav::before{background:var(--bg)} }
.nav a{color:var(--text);text-decoration:none}
.nav__right{display:flex;align-items:center;gap:1.1rem;color:var(--soft)}
.nav__right a{color:var(--soft);transition:color .3s var(--ease)}
.nav__right a:hover{color:var(--accent-text)}
.nav .back{display:inline-flex;align-items:center;gap:.5rem;color:var(--soft);transition:color .3s var(--ease),gap .35s var(--ease)}
.nav .back:hover{color:var(--accent-text);gap:.85rem}
.nav .back,.court{white-space:nowrap}
/* sur petit écran, le lien retour se contente de l'essentiel */
@media(max-width:560px){
  .back__long{display:none}
  .nav{gap:.8rem}
  .nav__right{gap:.6rem}
  .court{letter-spacing:.06em;padding:0 .7rem 0 .55rem}
}
@media(max-width:420px){
  .nav{padding-left:1rem;padding-right:1rem;gap:.6rem}
  .nav__right{gap:.4rem}
  .court{font-size:.6rem;letter-spacing:.04em;padding:0 .6rem 0 .5rem;gap:.4rem}
}

/* ═════════ ME CONTACTER ═════════
   La seule action de la barre : toujours à portée, sauf quand le formulaire est déjà à l'écran. */
.nav .contacter{
  display:inline-flex;align-items:center;gap:.55rem;height:34px;padding:0 1rem 0 .85rem;border-radius:999px;
  background:var(--text);color:var(--bg);text-decoration:none;white-space:nowrap;
  font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  transition:background-color .3s var(--ease),color .3s var(--ease),opacity .3s ease,scale .45s var(--ressort-vif)
}
.nav .contacter:hover{background:var(--accent);color:var(--on-accent)}
.nav .contacter:active{scale:.94}
.contacter svg{flex:none}
.contacter__rabat{transition:d .4s var(--ressort-vif)}
/* au survol, l'enveloppe s'entrouvre */
.contacter:hover .contacter__rabat{d:path("m3.5 7 8.5 3.5 8.5-3.5")}
.nav[data-contact] .contacter{opacity:0;scale:.85;pointer-events:none}
/* sur téléphone, la version simple est imposée : son bouton n'a plus de raison d'être,
   et « Me contacter » retrouve la place d'écrire son nom en entier */
@media (max-width:820px), (hover:none) and (pointer:coarse){ .nav__right .court{display:none} }
/* sur un très petit écran, l'enveloppe seule */
@media(max-width:340px){
  .nav .contacter{width:34px;padding:0;justify-content:center}
  .contacter__txt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
.toggle{background:none;border:1px solid var(--line);border-radius:999px;width:34px;height:34px;display:grid;place-items:center;cursor:pointer;color:var(--text);transition:border-color .3s var(--ease)}
.toggle:hover{border-color:var(--accent-text)}
/* lune en clair (passer au sombre), soleil en sombre : le croissant s'ouvre, les rayons jaillissent */
.astre{overflow:visible}
.astre__disque{transition:r .53s var(--ressort)}
.astre__ombre{transition:cx .53s var(--ressort),cy .53s var(--ressort)}
.astre__rayons{transform-origin:12px 12px;transition:scale .64s var(--ressort-vif),rotate .64s var(--ressort-vif),opacity .25s ease;scale:.4;rotate:-60deg;opacity:0}
[data-theme=dark] .astre__disque{r:4.6px}
[data-theme=dark] .astre__ombre{cx:30px;cy:-6px}
[data-theme=dark] .astre__rayons{scale:1;rotate:0deg;opacity:1}
.toggle:active .astre{scale:.88}
.astre{transition:scale .4s var(--ressort-vif)}

/* Version courte : la même information, sans la mise en scène.
   Pensée pour le recruteur pressé, donc visible, pas cachée dans un raccourci. */
.court{
  display:inline-flex;align-items:center;gap:.5rem;
  background:none;border:1px solid var(--line);border-radius:999px;
  height:34px;padding:0 .8rem 0 .65rem;cursor:pointer;
  font:inherit;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);
  transition:border-color .3s var(--ease),color .3s var(--ease)
}
.court:hover{border-color:var(--accent-text);color:var(--accent-text)}
.court i{width:22px;height:12px;border-radius:999px;border:1px solid currentColor;position:relative;flex:none}
.court i::after{content:"";position:absolute;top:1px;left:1px;width:8px;height:8px;border-radius:50%;background:currentColor;
  transition:translate .53s var(--ressort),scale .3s var(--ressort)}
.court:hover i::after{scale:1.15}
.court[aria-pressed="true"]{color:var(--accent-text);border-color:var(--accent-text)}
.court[aria-pressed="true"] i::after{translate:10px 0}
/* au clic seulement (pas au chargement) : la pastille s'allonge dans sa course, puis reprend sa forme */
.court[data-touche] i::after{animation:etire .45s var(--ease)}
.court[data-touche][aria-pressed="true"] i::after{animation-name:etireBis}
@keyframes etire{30%{scale:1.7 .75}}
@keyframes etireBis{30%{scale:1.7 .75}}

/* ═════════ RÉVÉLATIONS (CSS pur, contenu visible par défaut) ═════════ */
@supports (animation-timeline: view()){
  @media screen and (prefers-reduced-motion: no-preference){
    html:not([data-resume]) [data-rv]{animation:rvIn linear both;animation-timeline:view();animation-range:entry 5% entry 55%;animation-duration:auto}
    @keyframes rvIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
  }
}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
  .bar{display:none}
}

/* ═════════ LIEN VERS LA MÉTHODE ═════════
   Sur mobile, la barre ne montre pas « Méthode » : ce lien est le chemin d'accès. */
.vers-methode{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.3rem;
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text);text-decoration:none;
  border-bottom:1px solid var(--accent-text);padding-bottom:.2rem;transition:color .3s var(--ease),gap .35s var(--ease)}
.vers-methode:hover{color:var(--accent-text);gap:.8rem}

/* ═════════ PIED DE PAGE ═════════ */
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding:2.5rem 0 1.5rem;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.foot a{color:var(--soft);text-decoration:none}
.foot a:hover{color:var(--accent-text)}
.foot__liens{display:flex;flex-wrap:wrap;gap:1.4rem}
/* indice discret, seulement là où un clavier est probable */
.foot__cmd{display:none}
@media (hover:hover) and (pointer:fine){ .foot__cmd{display:inline} }
.foot__cmd kbd{font:inherit;border:1px solid var(--line);border-radius:5px;padding:.1rem .35rem;margin-right:.3rem}

/* ═════════ COPIE DE L'ADRESSE ═════════
   L'action la plus fréquente sur un portfolio. Le retour confirme, il ne décore pas. */
.copie{
  display:inline-flex;align-items:center;gap:.5rem;
  background:none;border:1px solid var(--line);border-radius:999px;
  min-height:44px;padding:.4rem .9rem;         /* cible tactile WCAG 2.2 */
  font:inherit;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--soft);cursor:pointer;vertical-align:middle;margin-left:.6rem;
  transition:border-color .3s var(--ease),color .3s var(--ease)
}
.copie:hover,.copie[data-ok]{border-color:var(--accent-text);color:var(--accent-text)}
.copie svg{flex:none}
.copie__ok{display:none}
.copie[data-ok] .copie__ok{display:inline}
.copie[data-ok] .copie__def{display:none}
/* l'icône de copie cède sa place à une coche qui se trace */
.copie__icones{position:relative;display:grid;width:13px;height:13px;flex:none}
.copie__icones svg{grid-area:1/1;transition:scale .4s var(--ressort-vif),opacity .2s ease}
.copie__coche{scale:.4;opacity:0}
.copie__coche path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .35s var(--ease) .08s}
.copie[data-ok] .copie__feuille{scale:.4;opacity:0}
.copie[data-ok] .copie__coche{scale:1;opacity:1}
.copie[data-ok] .copie__coche path{stroke-dashoffset:0}
.copie[data-ok]{animation:tape .5s var(--ressort-vif)}
@keyframes tape{30%{scale:.94}}

/* ═════════ INFOBULLES ═════════
   Remplacent les bulles grises du navigateur. La première se fait attendre ;
   tant qu'on passe d'un bouton à l'autre, elles se suivent sans délai et glissent. */
.bulle{
  position:fixed;left:0;top:0;z-index:90;pointer-events:none;
  display:flex;align-items:center;gap:.5rem;max-width:min(260px,80vw);
  padding:.42rem .7rem;border-radius:8px;
  background:var(--text);color:var(--bg);
  font-size:.74rem;letter-spacing:.02em;line-height:1.3;text-transform:none;
  opacity:0;scale:.94;filter:blur(4px);transform-origin:50% 0;
  transition:opacity .16s ease,scale .16s ease,filter .16s ease
}
.bulle[data-on]{opacity:1;scale:1;filter:none}
.bulle[data-glisse]{transition:opacity .16s ease,scale .16s ease,filter .16s ease,translate .32s var(--ressort)}
.bulle::before{content:"";position:absolute;top:-4px;left:var(--fleche,50%);width:8px;height:8px;margin-left:-4px;background:inherit;rotate:45deg;border-radius:1px}
.bulle kbd{font:inherit;font-size:.68rem;padding:.05rem .35rem;border-radius:4px;border:1px solid color-mix(in srgb,var(--bg) 35%,transparent);opacity:.8}

/* ═════════ ATTENTE D'IMAGE ═════════
   Le conteneur respire pendant le chargement ; l'image, opaque, le recouvre. Aucun JS. */
.beat__media,.row__thumb,.row__visuel,.gal__grid figure,.about__media,.cover__media{
  background-image:linear-gradient(100deg,var(--surface) 20%,var(--surface-2) 38%,var(--surface) 56%);
  background-size:220% 100%;
  animation:attente 1.6s ease-in-out infinite
}
@keyframes attente{to{background-position:-180% 0}}

/* ═════════ CONFORT DE LECTURE ═════════ */
@media (prefers-contrast: more){
  :root{--muted:#333;--soft:#333;--line:#11111140}
  [data-theme=dark]{--muted:#d8d8dd;--soft:#d8d8dd;--line:#e5e5ea52}
  a,button{text-underline-offset:.2em}
  .row,.entry,.step{border-bottom-width:2px}
}
@media (prefers-reduced-transparency: reduce){
  .nav::before,.cmd,.repere,.cookies{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:var(--bg)!important}
  .lightbox::backdrop,.cmd::backdrop{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}

/* ═════════ PALETTE DE COMMANDES (⌘K) ═════════
   Popover API : le navigateur gère le focus, Échap et le clic extérieur. */
.cmd{
  position:fixed;inset:0;margin:auto;
  width:min(560px,92vw);height:-moz-fit-content;height:fit-content;max-height:70svh;
  border:1px solid var(--line);border-radius:14px;padding:0;overflow:hidden;
  background:var(--bg);color:var(--text);
  box-shadow:0 24px 70px rgb(0 0 0 / .22);
  opacity:0;transform:translateY(-8px) scale(.98);
  transition:opacity .25s ease,transform .3s var(--ease),display .3s allow-discrete,overlay .3s allow-discrete;
}
.cmd:popover-open{opacity:1;transform:none}
@starting-style{ .cmd:popover-open{opacity:0;transform:translateY(-8px) scale(.98)} }
.cmd::backdrop{
  background:color-mix(in srgb, var(--bg) 55%, transparent);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background-color .3s ease,display .3s allow-discrete,overlay .3s allow-discrete;
}
@starting-style{ .cmd:popover-open::backdrop{background:transparent} }
.cmd__field{display:flex;align-items:center;gap:.7rem;padding:.95rem 1.1rem;border-bottom:1px solid var(--line)}
.cmd__field svg{flex:none;color:var(--soft)}
.cmd__input{flex:1;border:0;background:none;outline:none;color:var(--text);font-family:inherit;font-size:1rem}
.cmd__input::placeholder{color:var(--soft)}
.cmd__hint{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);border:1px solid var(--line);border-radius:5px;padding:.2rem .4rem}
.cmd__list{list-style:none;margin:0;padding:.45rem;overflow-y:auto;max-height:calc(70svh - 4rem)}
.cmd__item button,.cmd__item a{
  width:100%;display:flex;align-items:center;gap:.85rem;
  padding:.62rem .7rem;border:0;border-radius:9px;background:none;
  color:var(--text);font:inherit;text-align:left;text-decoration:none;cursor:pointer;
}
.cmd__item.is-active button,.cmd__item.is-active a{background:var(--surface)}
.cmd__ico{flex:none;width:26px;height:26px;border-radius:7px;border:1px solid var(--line);display:grid;place-items:center;font-size:.7rem;color:var(--soft);font-family:var(--font-serif)}
.cmd__label{flex:1}
.cmd__sub{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
.cmd__vide{padding:1.4rem 1.1rem;color:var(--soft);font-size:.92rem}

/* ═════════ VERSION COURTE : récit épinglé → pages classiques ═════════
   L'accueil se désactive seul via html:not([data-resume]) ; ici, les pages projet. */
html[data-resume] .story,
html[data-resume] .pull{height:auto!important}
html[data-resume] .story__stick,
html[data-resume] .pull__card{position:static!important;height:auto!important;overflow:visible!important}
html[data-resume] .story__stick{padding:2rem 0!important;display:block!important}
html[data-resume] .pull__card{padding:3.5rem 1rem!important;border-radius:var(--radius-lg)!important;animation:none!important;transform:none!important}
html[data-resume] .beats{display:block!important}
html[data-resume] .beat{
  grid-area:auto!important;opacity:1!important;transform:none!important;
  animation:none!important;margin-bottom:2.5rem!important;
  grid-template-columns:minmax(0,320px) minmax(0,1fr)!important;
}
html[data-resume] .beat__media{aspect-ratio:var(--ar,4/3)!important}
html[data-resume] .beat__media img{animation:none!important;height:100%!important;transform:none!important}
html[data-resume] .repere{display:none!important}
@media(max-width:820px){ html[data-resume] .beat{grid-template-columns:1fr!important} }

/* ═════════ MESURE D'AUDIENCE ═════════
   Rien ne se charge avant un choix. Refuser est aussi simple qu'accepter. */
.cookies{
  position:fixed;left:var(--gutter);bottom:1.2rem;z-index:80;
  width:min(420px,calc(100vw - 2 * var(--gutter)));
  background:color-mix(in srgb, var(--bg) 90%, transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:1.1rem 1.2rem 1.15rem;box-shadow:0 20px 60px rgb(0 0 0 / .16);
  font-size:.88rem;line-height:1.5;color:var(--muted);
  opacity:0;transform:translateY(12px);
  transition:opacity .4s var(--ease),transform .5s var(--ease),display .5s allow-discrete;
}
.cookies[data-on]{opacity:1;transform:none}
@starting-style{ .cookies[data-on]{opacity:0;transform:translateY(12px)} }
.cookies strong{color:var(--text);font-weight:500}
.cookies a{color:var(--text)}
.cookies__actions{display:flex;gap:.6rem;margin-top:.9rem}
.cookies__actions button{
  flex:1;min-height:44px;border-radius:999px;cursor:pointer;
  font:inherit;font-size:.8rem;letter-spacing:.06em;
  border:1px solid var(--text);background:none;color:var(--text);
  transition:background-color .3s var(--ease),color .3s var(--ease)
}
.cookies__actions button:hover{background:var(--text);color:var(--bg)}
@media(max-width:560px){ .cookies{left:.8rem;right:.8rem;width:auto;bottom:.8rem} }

/* ═════════ IMPRESSION : un document propre ═════════ */
@media print{
  @page{ margin:18mm 16mm; }
  .nav,.bar,.repere,.cmd,.toggle,.court,.cookies,.skip,.peek,.foot__cmd,body::after{display:none!important}
  html,body{background:#fff!important;color:#000!important;font-size:11pt}
  .wrap{max-width:none;padding:0}
  .story,.pull{height:auto!important}
  .story__stick,.pull__card{position:static!important;height:auto!important;overflow:visible!important;padding:0!important}
  .beats{display:block!important}
  .beat{grid-area:auto!important;opacity:1!important;transform:none!important;animation:none!important;
        break-inside:avoid;margin-bottom:12mm!important;grid-template-columns:minmax(0,60mm) minmax(0,1fr)!important}
  .beat__media,.row__thumb,.gal__grid figure,.about__media,.cover__media{animation:none!important;background:none!important}
  [data-rv],.etape{opacity:1!important;transform:none!important;animation:none!important;color:#000!important}
  .pull__card{background:none!important;color:#000!important;border:1px solid #999;padding:8mm!important}
  h1,h2,h3{break-after:avoid}
  img{max-width:100%;break-inside:avoid}
  .gal__grid{grid-template-columns:repeat(2,1fr)!important}
  /* les liens ne sont plus cliquables : on écrit l'adresse */
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555;word-break:break-all}
  .foot,.form__note{color:#555!important}
  #contactForm,.copie,.suite,.lightbox{display:none!important}
}