/* ============================================================
   PORTFOLIO — Direction de création
   Système graphique sobre. Serif éditorial + monospace.
   ============================================================ */

@font-face{
  font-family:"Red Hat Display";
  src:url("../fonts/RedHatDisplay-Variable.ttf") format("truetype");
  font-weight:300 900;
  font-style:normal;
  font-display:swap;
}

:root{
  --bg:        #f4f2ee;   /* blanc cassé chaud */
  --bg-deep:   #eceae4;
  --ink:       #111110;   /* presque noir */
  --ink-soft:  #6b6960;
  --line:      #d8d5cd;
  --accent:    #111110;

  --serif: "Fraunces", "Times New Roman", serif;
  --mono:  "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
  --display: "Red Hat Display", system-ui, sans-serif;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --slow: 1.1s;

  /* stops du fond noir-dominant (mis à jour par home.js selon la card active) */
  --bg-c1: rgb(60, 58, 54);      /* lueur montant du bas (couleur card assombrie) */
  --bg-c3: rgb(16, 16, 18);      /* noir teinté */
  --black: #060606;
}

*{ margin:0; padding:0; box-sizing:border-box; }

/* Focus clavier visible : anneau lisible sur fond clair comme sombre.
   Visible seulement à la navigation clavier (:focus-visible), pas au clic souris. */
:focus-visible{ outline:2px solid #4c8dff; outline-offset:3px; border-radius:2px; }

html{ scroll-behavior:smooth; }

body{
  background:var(--black);
  color:var(--ink);
  font-family:var(--mono);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow:hidden;
  height:100vh;
}

a{ color:inherit; text-decoration:none; }

::selection{ background:var(--ink); color:var(--bg); }

/* ---------- typographic helpers ---------- */
.mono-label{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed; top:0; left:0; right:0;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:30px 48px;
  z-index:210;                 /* au-dessus du loader : le RG reste visible pendant le chargement */
  color:#fff;
}
.site-header a{ color:#fff; }

/* RG centré */
.brand{
  grid-column:2; justify-self:center;
  font-family:var(--display); font-weight:700;
  font-size:22px; letter-spacing:0.06em;
}
/* lien About à gauche */
.site-header .head-link{
  grid-column:1; justify-self:start;
  font-family:var(--display); font-size:13px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:#fff;
  opacity:.85; transition:opacity .3s var(--ease);
}
.site-header .head-link:hover{ opacity:1; }
/* lien LinkedIn à droite */
.social{ grid-column:3; justify-self:end; display:inline-flex; transition:opacity .3s var(--ease); }
.social:hover{ opacity:.82; }
.social img{ display:block; }

/* ============================================================
   HOMEPAGE — HERO
   ============================================================ */
.hero{
  position:relative;
  height:100vh;
  width:100%;
  overflow:hidden;
  touch-action:none;        /* le geste tactile pilote la galerie (JS), pas le scroll natif */
}

/* intro line */
.hero-intro{
  position:absolute; top:96px; left:0; right:0;
  text-align:center;
  font-family:var(--serif);
  font-weight:340;
  font-size:clamp(15px, 1.5vw, 19px);
  letter-spacing:0.01em;
  color:var(--ink);
  z-index:6;
  padding:0 24px;
  opacity:0;
  transform:translateY(12px);
}
.hero-intro .u{ text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }

/* giant background word */
.hero-word{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  font-family:var(--serif);
  font-weight:340;
  font-size:clamp(90px, 23vw, 420px);
  line-height:.8;
  letter-spacing:-0.02em;
  color:var(--ink);
  white-space:nowrap;
  z-index:1;
  user-select:none;
  pointer-events:none;
  opacity:0;
}

/* reflet de lumière façon verre qui suit le curseur */
.cursor-glow{
  position:fixed; top:0; left:0; width:1100px; height:780px;
  margin:-390px 0 0 -550px;
  background:
    radial-gradient(closest-side at 40% 38%, rgba(255,255,255,.30), rgba(255,255,255,0) 70%),
    radial-gradient(closest-side at 62% 66%, rgba(255,255,255,.14), rgba(255,255,255,0) 74%);
  filter:blur(30px);
  mix-blend-mode:screen;
  pointer-events:none; z-index:6; opacity:0;
  will-change:transform, opacity;
  transition:opacity .5s var(--ease);
}

/* fond atmosphérique : halo de la couleur de la card en haut, profondeur en bas.
   Transparent où le canvas dessine ; révélé au scroll (opacity pilotée par home.js). */
.bg-depth{
  position:fixed; inset:0; z-index:0;
  opacity:0;
  background:
    radial-gradient(135% 98% at 50% 113%, var(--bg-c1) 0%, rgba(0,0,0,0) 66%),
    linear-gradient(180deg, var(--black) 22%, var(--bg-c3) 128%);
  pointer-events:none;
  will-change:opacity;
}

/* three.js canvas sits between word and UI */
#cylinder-canvas{
  position:fixed; inset:0;
  width:100vw; height:100vh;
  z-index:3;
  display:block;
  opacity:0;                 /* révélé au scroll (recouvre l'intro) */
  will-change:opacity, transform;
  touch-action:none;         /* geste tactile capté par le JS de la galerie */
}

/* ---------- INTRO plein écran (gros texte mono) ---------- */
.intro{
  position:fixed; inset:0; z-index:30;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  padding:0 48px 28vh;            /* ferré à gauche (aligné au logo), un peu sous le centre */
  text-align:left;
  pointer-events:none;
  will-change:opacity, transform;
}
.intro-title{
  display:flex; flex-direction:column; align-items:flex-start;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(34px, 4.4vw, 60px);
  line-height:1.16; letter-spacing:-0.01em;
  color:#d3d2d2;
}
.intro-title .line{ display:block; }
.intro-title .t{ display:inline-block; }

/* mots interactifs de l'intro : serif italique + blanc pur (contraste = signal),
   pas de soulignement ni de glow */
.intro-title .hint{
  font-family:var(--serif); font-style:italic; font-weight:340;
  color:#ffffff; cursor:pointer; pointer-events:auto;
}

/* "France" se transforme en "Paris - Tours" au survol (fondu + largeur animée en JS) */
.loc{ position:relative; display:inline-block; white-space:nowrap; }
.loc-a, .loc-b{ transition:opacity .4s var(--ease); }
.loc-b{ position:absolute; left:0; top:0; white-space:nowrap; opacity:0; }
.loc:hover .loc-a, .loc.on .loc-a{ opacity:0; }
.loc:hover .loc-b, .loc.on .loc-b{ opacity:1; }

/* mot tournant : la rotation verticale est clippée */
.intro-title .swap{ display:inline-block; overflow:hidden; vertical-align:bottom; }
.intro-title .swap .s-in{ display:inline-block; will-change:transform; }

/* zoom plein écran vers la page projet */
.zoom-overlay{
  position:fixed; z-index:220; overflow:hidden; border-radius:4px;
  box-shadow:0 40px 100px rgba(0,0,0,.35);
}
.zoom-overlay img{ width:100%; height:100%; object-fit:cover; display:block; }

/* barre au-dessus de la galerie : "My Work" centré + "List view" à droite */
.work-bar{
  position:fixed; left:0; right:0; top:58vh; z-index:7;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  opacity:0; pointer-events:none;
}
.wb-label{
  grid-column:2; text-align:center;
  font-family:var(--display); font-size:18px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:#fff;
}
.list-toggle{
  grid-column:3; justify-self:end;
  display:inline-flex; align-items:center; gap:9px;
  background:none; border:none; cursor:pointer; color:#fff;
  font-family:var(--display); font-size:13px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  opacity:.82; transition:opacity .3s var(--ease);
}
.list-toggle:hover{ opacity:1; }
.list-toggle svg{ display:block; }

/* fin de la spirale : remerciement + contact + footer */
.outro{
  position:fixed; inset:0; z-index:9;
  display:flex; flex-direction:column;
  text-align:center; padding:0;
  opacity:0; pointer-events:none;
  overflow:hidden;
}
.outro-inner{
  flex:1 1 auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:0 40px; position:relative; z-index:1;
}

/* fond shader "aurora" (WebGL) vivant + interactif, sur le tiers bas de la page.
   Le fondu vers le noir (bord en vague) est fait dans le shader, pas en CSS. */
.outro-aurora{
  position:absolute; left:0; right:0; bottom:0;
  width:100%; height:48vh; z-index:0;
  display:block; pointer-events:none;
}

/* footer : ligne qui se dessine + mentions gauche/droite */
.outro-footer{ position:relative; z-index:1; padding:0 40px 38px; }
/* voile sombre sous le footer : garde la ligne et les mentions lisibles sur le dégradé clair */
.outro-footer::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:170px; z-index:-1;
  background:linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0));
  pointer-events:none;
}
.outro-line{
  height:1px; width:100%; background:rgba(255,255,255,.4);
  transform:scaleX(0); transform-origin:left center;
  margin-bottom:22px;
}
.outro-foot-row{
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.72); text-shadow:0 1px 10px rgba(0,0,0,.5);
}
.outro-kicker{
  font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(255,255,255,.55); margin-bottom:26px;
}
.outro-title{
  font-family:var(--display); font-weight:300;
  font-size:clamp(22px, 3vw, 44px); line-height:1.12; letter-spacing:-0.01em; color:rgba(255,255,255,.82);
  margin-bottom:10px;
}
.outro-client{
  font-family:var(--serif); font-style:italic; font-weight:340;
  font-size:clamp(44px, 7vw, 116px); line-height:1; letter-spacing:-0.02em; color:#fff;
  margin:0 auto 44px; min-height:1.1em;
  will-change:transform, opacity;
}
.outro-cta{
  display:inline-block;
  font-family:var(--display); font-size:14px; font-weight:500; letter-spacing:.1em;
  color:#0b0b0b; background:#fff; padding:15px 34px; border-radius:999px;
  transition:transform .4s var(--ease), background .4s var(--ease);
}
.outro-cta:hover{ transform:scale(1.05); background:#f1f0ee; }

/* navigation projets : deux flèches centrées verticalement, sur les côtés */
.nav-arrow{
  position:fixed; top:50%; transform:translateY(-50%);
  width:46px; height:46px; display:grid; place-items:center;
  background:none; border:none; cursor:pointer; color:#fff;
  font-family:var(--display); font-size:34px; line-height:1; font-weight:300;
  opacity:0; pointer-events:none; z-index:8;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.nav-arrow:hover{ transform:translateY(-50%) scale(1.18); }
.nav-arrow.prev{ left:34px; }
.nav-arrow.next{ right:34px; }

/* vue liste plein écran */
.list-view{
  position:fixed; inset:0; z-index:160;
  background:var(--black);
  color:#f1f0ee;
  padding:120px 6vw 60px;
  overflow-y:auto; touch-action:pan-y; -webkit-overflow-scrolling:touch;
  opacity:0; visibility:hidden;
  transition:opacity .5s var(--ease), visibility .5s;
}
.list-view.open{ opacity:1; visibility:visible; }
.list-view-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:40px; }
.list-view-head h2{ font-family:var(--serif); font-weight:340; font-size:clamp(28px,4vw,52px); letter-spacing:-0.02em; color:#fff; }
.list-close{
  font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  cursor:pointer; background:none; border:none; color:#f1f0ee; display:flex; align-items:center; gap:8px;
  opacity:.8; transition:opacity .3s var(--ease);
}
.list-close:hover{ opacity:1; }
.list-rows{ border-top:1px solid rgba(255,255,255,.14); }
.lrow{
  display:grid; grid-template-columns:54px 104px 1fr; gap:24px; align-items:center;
  padding:16px 8px; border-bottom:1px solid rgba(255,255,255,.14);
  cursor:pointer; text-decoration:none; color:inherit;   /* <a> : pas de soulignement ni couleur de lien */
  transition:padding-left .5s var(--ease), background .4s var(--ease);
}
.lrow:focus-visible{ outline-offset:-2px; }   /* anneau à l'intérieur de la ligne pleine largeur */
.lrow:hover{ padding-left:22px; background:rgba(255,255,255,.03); }
.lrow .thumb{
  width:104px; aspect-ratio:16/9; object-fit:cover; border-radius:4px; display:block;
  background:#16161a;
}
.lrow .n{ font-family:var(--mono); font-size:11px; color:rgba(255,255,255,.5); }
.lrow .t{ font-family:var(--serif); font-size:clamp(20px,2.2vw,30px); font-weight:340; color:#f1f0ee; }
/* cadenas : signale un projet protégé dans la vue liste */
.lrow-lock{ display:inline-flex; vertical-align:middle; margin-left:12px; color:rgba(255,255,255,.5); transform:translateY(-2px); transition:color .4s var(--ease); }
.lrow:hover .lrow-lock{ color:rgba(255,255,255,.85); }
.lrow .c{ display:none; }   /* discipline masquée en vue liste */

/* scroll hint */
.scroll-hint{
  position:absolute; right:40px; bottom:54px;
  z-index:7;
  font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-soft);
  opacity:0;
  display:flex; align-items:center; gap:10px;
}
.scroll-hint .bar{ width:1px; height:34px; background:var(--ink-soft); position:relative; overflow:hidden; }
.scroll-hint .bar::after{ content:""; position:absolute; top:-34px; left:0; width:1px; height:34px; background:var(--ink); animation:scrolldrop 2.2s var(--ease) infinite; }
@keyframes scrolldrop{ 0%{transform:translateY(0)} 100%{transform:translateY(68px)} }

/* active project title overlay (centered on cylinder) */
.active-title{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  z-index:5;
  text-align:center;
  pointer-events:none;
  font-family:var(--serif);
  font-style:italic;
  font-weight:340;
  font-size:clamp(40px, 6vw, 96px);
  color:#fff;
  white-space:nowrap;
  opacity:.92;
  text-shadow:0 2px 30px rgba(0,0,0,.35);
}

/* tuile verrouillée : sous-titre + code à 4 chiffres, centrés sous le titre */
.tile-lock{
  position:absolute; left:50%; top:50%; z-index:8;
  transform:translate(-50%, 52px);
  text-align:center;
  opacity:0; pointer-events:none;
  transition:opacity .4s var(--ease);
}
.tile-lock{ cursor:pointer; }
/* voile noir plein écran quand le code est ouvert.
   z-index 4 : au-dessus du canvas (3), sous le titre actif (5) pour que
   "Breitling" reste lisible par-dessus, et sous le gate (8). */
.tile-lock-veil{
  position:fixed; inset:0; z-index:4;
  background:rgba(6,6,6,0);
  transition:background .45s var(--ease);
  pointer-events:none;
}
.tile-lock-veil.on{ background:rgba(6,6,6,.7); }
.tile-lock-sub{
  font-family:var(--display); font-weight:300;
  font-size:clamp(13px,1.2vw,16px); letter-spacing:.02em;
  color:rgba(255,255,255,.85); margin-bottom:16px;
  text-shadow:0 2px 18px rgba(0,0,0,.45);
}
/* le code n'apparaît qu'après un clic sur la carte (classe .open posée par home.js) */
.tile-lock-form{ display:none; }
.tile-lock.open .tile-lock-form{ display:block; }
.tile-lock.open{ cursor:default; }
/* même typographie que le "psst…" : display light, minuscules */
.tile-lock-note{
  font-family:var(--display); font-weight:300;
  font-size:clamp(13px,1.2vw,16px); letter-spacing:.02em; text-transform:lowercase;
  color:rgba(255,255,255,.85); margin-bottom:16px;
  text-shadow:0 2px 18px rgba(0,0,0,.45);
}
.code-inputs{ display:flex; gap:12px; justify-content:center; }
.code-d{
  width:46px; height:54px; text-align:center;
  font-family:var(--serif); font-size:26px; color:#fff;
  background:rgba(10,10,12,.34); border:1px solid rgba(255,255,255,.5);
  border-radius:10px; outline:none;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.code-d:focus{ border-color:#fff; background:rgba(10,10,12,.55); }
.tile-lock-err{
  min-height:16px; margin-top:12px;
  font-family:var(--display); font-size:12px; color:#ff9b9b; letter-spacing:.02em;
}

/* VIEW button floating on active tile */
.view-btn{
  position:absolute; z-index:8;
  display:none;
  align-items:center; justify-content:center;
  padding:10px 22px;
  border-radius:10px;
  background:rgba(20,20,18,.55);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  cursor:pointer;
  transform:translate(-50%,-50%);
  transition:background .4s var(--ease), transform .4s var(--ease);
}
.view-btn:hover{ background:rgba(20,20,18,.85); }

/* ============================================================
   INDEX SECTION (liste projets sous le hero)
   ============================================================ */
.index-section{
  padding:120px 40px 140px;
  border-top:1px solid var(--line);
  background:var(--bg);
  position:relative; z-index:10;
}
.index-head{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:60px;
}
.index-head h2{
  font-family:var(--serif); font-weight:340;
  font-size:clamp(28px,4vw,56px); letter-spacing:-0.02em;
}
.index-list{ border-top:1px solid var(--line); }
.index-row{
  display:grid;
  grid-template-columns: 56px 1fr 1fr auto;
  gap:24px; align-items:center;
  padding:26px 8px;
  border-bottom:1px solid var(--line);
  cursor:pointer;
  transition:padding-left .6s var(--ease), color .4s var(--ease);
  position:relative;
}
.index-row:hover{ padding-left:24px; }
.index-row .n{ font-family:var(--mono); font-size:11px; color:var(--ink-soft); }
.index-row .t{ font-family:var(--serif); font-size:clamp(22px,2.4vw,34px); font-weight:340; letter-spacing:-0.01em; }
.index-row .c{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); }
.index-row .y{ font-family:var(--mono); font-size:12px; color:var(--ink-soft); }
.index-row .go{ opacity:0; transition:opacity .4s var(--ease), transform .5s var(--ease); transform:translateX(-8px); font-size:18px; }
.index-row:hover .go{ opacity:1; transform:translateX(0); }
.index-row .hover-img{
  position:fixed; width:280px; height:158px; border-radius:8px;
  object-fit:cover; pointer-events:none; opacity:0; z-index:60;
  transform:translate(-50%,-50%) scale(.92);
  transition:opacity .4s var(--ease), transform .5s var(--ease);
  box-shadow:0 30px 60px rgba(0,0,0,.25);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  padding:90px 40px 50px;
  background:var(--ink);
  color:var(--bg);
  position:relative; z-index:10;
}
.footer-big{
  font-family:var(--serif); font-weight:340;
  font-size:clamp(40px,8vw,140px); line-height:.95; letter-spacing:-0.02em;
  margin-bottom:60px;
}
.footer-big a{ transition:opacity .4s var(--ease); }
.footer-big a:hover{ opacity:.6; }
.footer-row{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; }
.footer-row .mono-label{ color:rgba(244,242,238,.6); }

/* ============================================================
   BANDEAU file://
   ============================================================ */
.file-warning{
  position:fixed; left:50%; bottom:20px; transform:translateX(-50%);
  z-index:300; max-width:640px; width:calc(100% - 40px);
  background:var(--ink); color:var(--bg);
  font-family:var(--mono); font-size:11px; line-height:1.6; letter-spacing:.02em;
  padding:14px 40px 14px 18px; border-radius:10px;
  box-shadow:0 20px 50px rgba(0,0,0,.3);
}
.file-warning code{ background:rgba(255,255,255,.14); padding:1px 6px; border-radius:4px; }
.file-warning b{ font-weight:500; }
.file-warning .x{ position:absolute; top:10px; right:14px; cursor:pointer; font-size:16px; opacity:.7; }
.file-warning .x:hover{ opacity:1; }

/* ============================================================
   LOADER
   ============================================================ */
.loader{
  position:fixed; inset:0; z-index:200;
  background:var(--black);
  display:grid; place-items:center;
  transition:opacity .8s var(--ease), visibility .8s;
}
.loader.done{ opacity:0; visibility:hidden; }
/* vignettes des projets qui apparaissent en séquence puis glissent en fondu */
.loader-thumbs{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:clamp(10px,1.6vw,18px); max-width:92vw;
}
.loader-thumb{
  width:clamp(42px,6.5vw,84px); aspect-ratio:1/1; border-radius:12px;
  background-size:cover; background-position:center; background-color:#16161a;
  box-shadow:0 14px 34px rgba(0,0,0,.45);
}

/* ============================================================
   MOBILE — galerie en liste (pas de spirale 3D)
   Activé par home.js via la classe body.is-mobile
   ============================================================ */
body.is-mobile{ overflow-x:hidden; overflow-y:auto; height:auto; }
body.is-mobile .hero,
body.is-mobile .intro,
body.is-mobile .work-bar,
body.is-mobile .outro,
body.is-mobile .nav-arrow,
body.is-mobile #cylinder-canvas,
body.is-mobile .cursor-glow,
body.is-mobile .bg-depth{ display:none !important; }

.mobile-home{ display:block; min-height:100vh; background:var(--black); }
.m-intro{ padding:128px 22px 30px; }
.m-intro-title{
  font-family:var(--display); font-weight:400;
  font-size:clamp(30px,8.4vw,46px); line-height:1.2; letter-spacing:-0.01em; color:#fff;
  opacity:0; transform:translateY(16px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.mobile-home.ready .m-intro-title{ opacity:1; transform:none; }
.m-list{ display:flex; flex-direction:column; gap:44px; padding:24px 18px 50px; }
.m-card{
  display:block; color:#fff;
  opacity:0; transform:translateY(26px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.m-card.in{ opacity:1; transform:none; }
.m-card-img{
  position:relative; width:100%; aspect-ratio:16/9; border-radius:8px; overflow:hidden;
  background:#16161a;
}
.m-card-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.m-lock{
  position:absolute; top:12px; left:12px;
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:#fff;
  background:rgba(10,10,12,.55); padding:5px 10px; border-radius:999px;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.m-card-meta{ display:flex; align-items:baseline; gap:12px; margin-top:13px; }
.m-num{ font-family:var(--mono); font-size:11px; color:rgba(255,255,255,.5); }
.m-t{ font-family:var(--serif); font-style:italic; font-weight:340; font-size:clamp(22px,6vw,30px); color:#fff; flex:1; }
.m-c{ display:none; }   /* discipline masquée sur mobile */
.m-footer{ padding:28px 18px 40px; }
.m-foot-line{ height:1px; background:rgba(255,255,255,.18); margin-bottom:18px; }
.m-foot-row{
  display:flex; justify-content:space-between; gap:14px;
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.55);
}
.m-foot-row span:last-child{ text-align:right; }   /* "Made by" ferré à droite */

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:760px){
  .site-header{ padding:18px 20px; }
  .site-header nav{ gap:18px; }

  /* vignettes de chargement empilées verticalement, centrées, +15% sur mobile */
  .loader-thumbs{ flex-direction:column; flex-wrap:nowrap; }
  .loader-thumb{ width:clamp(48px,7.5vw,97px); }

  /* léger dégradé noir -> transparent derrière le header, révélé au scroll */
  .site-header::before{
    content:""; position:absolute; left:0; right:0; top:0; bottom:-34px; z-index:-1;
    background:linear-gradient(to bottom, rgba(0,0,0,.6), rgba(0,0,0,0));
    opacity:0; transition:opacity .4s var(--ease); pointer-events:none;
  }
  .site-header.scrolled::before{ opacity:1; }
  .hero-word{ font-size:30vw; }
  .index-section{ padding:80px 20px 100px; }
  .index-row{ grid-template-columns:40px 1fr auto; }
  .index-row .c{ display:none; }
  .list-view{ padding:90px 20px 50px; }
  .lrow{ grid-template-columns:40px 1fr auto; }
  .lrow .c{ display:none; }
  .list-toggle span{ display:none; }
  .scroll-hint{ display:none; }
  .hero-selector{ bottom:30px; }
}

/* ============================================================
   ACCESSIBILITÉ — prefers-reduced-motion
   Les animations JS sont désactivées dans home.js / case.js /
   aurora.js ; ici on neutralise les transitions et keyframes CSS.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
  }
}