/* ============================================================
   Stefan Petit — Portfolio
   Feuille de style unique. Aucune dépendance.
   Sommaire :
   1. Réglages & variables      6. Compétences
   2. Base & typographie        7. Approche (épinglée)
   3. Couches fixes             8. Réalisations
   4. Navigation                9. Parcours / Contact
   5. Hero / Manifeste / Profil 10. Modale & responsive
   ============================================================ */

/* ── 1. Réglages ─────────────────────────────────────────── */
:root{
  --bg:#15171b;
  --bg-2:#191c21;
  --panel:#1e2127;
  --panel-2:#23262c;
  --line:rgba(255,255,255,.10);
  --line-soft:rgba(255,255,255,.06);
  --txt:#eceded;
  --muted:#8b9099;
  --dim:#5d626b;
  --accent:#f2c14e;
  --accent-2:#ff8f45;
  /* San Francisco, la police système d'Apple. Elle ne se distribue pas comme
     fonte web : on la demande via la pile système. -apple-system choisit
     tout seul entre SF Pro Text et SF Pro Display selon la taille. */
  --police:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",
           "Inter","Segoe UI",Roboto,system-ui,sans-serif;
  --radius:18px;
  --ease:cubic-bezier(.16,1,.3,1);
  --pad:clamp(20px,5vw,80px);
  --maxw:1440px;
  --nav-h:76px;
}

*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scrollbar-gutter:stable;
  scroll-behavior:auto;
}
body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:var(--police);
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.6;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:left}
::selection{background:var(--accent);color:#111}

/* ── 2. Typographie ──────────────────────────────────────── */
.h2{
  font-family:var(--police);
  font-weight:700;
  font-size:clamp(2rem,5.2vw,4.4rem);
  line-height:.98;
  letter-spacing:-.03em;
  margin:0 0 clamp(28px,4vw,54px);
}
.muted{color:var(--dim)}
.section-tag{
  font-family:var(--police);
  font-size:.7rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
  display:flex;align-items:center;gap:14px;
  margin:0 0 clamp(20px,3vw,34px);
}
.section-tag span:first-child{color:var(--accent)}
.sub-head{
  font-family:var(--police);
  font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted);font-weight:600;
  margin:clamp(70px,9vw,120px) 0 26px;
  padding-bottom:14px;border-bottom:1px solid var(--line-soft);
}
main>section{
  position:relative;
  padding:clamp(90px,12vw,180px) var(--pad);
  max-width:var(--maxw);
  margin-inline:auto;
}
.skip{
  position:fixed;top:-100px;left:16px;z-index:200;
  background:var(--accent);color:#111;padding:10px 18px;border-radius:8px;
}
.skip:focus{top:16px}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px}

/* ── 3. Couches fixes ────────────────────────────────────── */
.grain{
  /* Le débord ne sert qu'à cacher les bords pendant le tremblement, qui ne
     dépasse pas 6 % de la taille de la couche. À -150 %, cette couche faisait
     seize fois la surface de l'écran, et son mode de fusion obligeait le
     navigateur à recomposer tout ça à chaque image : le défilement s'effondrait
     sur les machines modestes. À -10 %, l'effet est identique. */
  position:fixed;inset:-10%;z-index:60;pointer-events:none;
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}   20%{transform:translate(-6%,4%)}
  40%{transform:translate(4%,-5%)} 60%{transform:translate(-3%,-3%)}
  80%{transform:translate(5%,3%)}  100%{transform:translate(0,0)}
}
.glow{
  position:fixed;top:0;left:0;width:46vw;height:46vw;z-index:1;pointer-events:none;
  margin:-23vw 0 0 -23vw;border-radius:50%;
  background:radial-gradient(circle,rgba(242,193,78,.16),rgba(255,143,69,.07) 42%,transparent 66%);
  filter:blur(28px);opacity:0;transition:opacity .8s ease;
  will-change:transform;
}
.glow.on{opacity:1}

/* Posé par le JavaScript quand la machine ne tient pas la cadence pendant le
   défilement. On sacrifie le grain, qui est la couche vraiment coûteuse.
   La lueur qui suit la souris reste : elle fait partie de ce qu'on voit du
   site, on lui retire seulement son flou, qui n'était qu'un adoucissement —
   le dégradé est déjà doux par construction. */
html.leger .grain{display:none}
html.leger .glow{filter:none}



/* conteneur de défilement — natif par défaut, lissé si le JS est actif */
html.smooth #smooth-wrapper{position:fixed;inset:0;overflow:hidden;z-index:2}
html.smooth #smooth-content{will-change:transform}
html.is-locked{overflow:hidden}
/* à l'ouverture d'une fenêtre, la page recule d'un cran : c'est ce mouvement
   qui donne la sensation du dossier qui s'ouvre sur iPhone */
html.smooth #smooth-wrapper{transition:transform .9s var(--ease)}
html.smooth.fenetre #smooth-wrapper{transform:scale(.972)}

/* ── 3 bis. Écran d'entrée ───────────────────────────────── */
div.intro{display:none}
html.js .intro{display:block;position:fixed;inset:0;z-index:55}
/* le fond, avec le même halo que la bannière : c'est lui qui s'efface,
   pas le conteneur — sinon la tête s'effacerait avec lui */
html.js .intro::before{
  content:"";position:absolute;inset:0;
  background-color:var(--bg);
  background-image:
    radial-gradient(120% 90% at 78% 8%,rgba(242,193,78,.10),transparent 55%),
    radial-gradient(90% 70% at 8% 92%,rgba(120,140,255,.07),transparent 60%);
  transition:opacity .65s ease;
}
.intro.sortie{pointer-events:none}
.intro.sortie::before{opacity:0}

.intro-avatar{
  position:fixed;left:0;top:0;z-index:2;
  transform-origin:0 0;will-change:transform;
  width:clamp(170px,26vw,320px);
}
.intro-avatar img{
  width:100%;height:auto;display:block;
  filter:drop-shadow(0 38px 60px rgba(0,0,0,.6));
  opacity:0;transform:scale(.94);
  transition:opacity 1.15s ease,transform 1.45s var(--ease);
}
.intro.pret .intro-avatar img{opacity:1;transform:none}

.intro-body{
  position:fixed;left:0;right:0;top:62%;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:0 var(--pad);text-align:center;
  opacity:0;transform:translateY(18px);
  transition:opacity 1.05s ease .3s,transform 1.15s var(--ease) .3s;
}
.intro.pret .intro-body{opacity:1;transform:none}
.intro.sortie .intro-body{opacity:0;transform:translateY(-10px);transition:opacity .4s ease,transform .5s ease}
.intro-name{
  margin:0;font-size:clamp(1.4rem,2.6vw,2rem);font-weight:600;letter-spacing:-.03em;
}
.intro-role{
  margin:0 0 22px;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted);font-weight:600;
}
.intro-btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:16px 34px;border-radius:100px;
  background:var(--accent);color:#141414;font-size:.95rem;font-weight:600;
  transition:box-shadow .5s ease,background .4s ease;
  will-change:transform;
}
.intro-btn:hover{box-shadow:0 18px 40px -14px rgba(242,193,78,.7)}
.intro-btn span{transition:transform .5s var(--ease)}
.intro-btn:hover span{transform:translateX(5px)}

/* pendant l'écran d'entrée, le portrait de la bannière attend son tour */
html.js .intro{touch-action:none;overscroll-behavior:contain}
html.entree .hero-avatar{opacity:0}
html.entree .hero-avatar img{animation:none}

/* ── 4. Navigation — barre façon Dynamic Island ──────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:90;height:var(--nav-h);
  transition:background .65s ease;
  background:linear-gradient(to bottom,rgba(21,23,27,.82),rgba(21,23,27,0));
}
.nav.solid{background:linear-gradient(to bottom,rgba(21,23,27,.94),rgba(21,23,27,.55) 60%,rgba(21,23,27,0))}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;gap:20px;height:100%;
  max-width:var(--maxw);margin-inline:auto;padding:0 var(--pad);
}

/* le logo remplace le nom */
.nav-brand{display:flex;align-items:center;flex:0 0 auto;line-height:0}
.nav-logo{
  /* le blanc du site, pas celui du fichier de marque : #E7F5FD tire vers le
     bleu et détonnait à côté d'un texte neutre et d'un accent chaud */
  height:24px;width:auto;display:block;fill:var(--txt);opacity:.92;
  transition:opacity .45s ease,transform .7s var(--ease);
}
.nav-brand:hover .nav-logo{opacity:1;transform:scale(1.06)}

/* la pastille centrale */
.island{
  display:flex;align-items:center;gap:0;
  height:38px;padding:0 15px;border-radius:100px;
  /* surface pleine, dans le même gris que les cartes du site */
  background:var(--panel);
  border:1px solid var(--line-soft);
  box-shadow:
    0 16px 38px -16px rgba(0,0,0,.85),
    inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;white-space:nowrap;
}
.island-num{
  flex:0 0 auto;font-family:var(--police);font-size:.66rem;font-variant-numeric:tabular-nums;
  letter-spacing:.1em;color:var(--accent);
}
.island-ring{
  flex:0 0 auto;width:19px;height:19px;border-radius:50%;
  background:conic-gradient(var(--accent) calc(var(--p,0) * 1turn),rgba(255,255,255,.26) 0);
  -webkit-mask:radial-gradient(circle,transparent 5.5px,#000 6px);
  mask:radial-gradient(circle,transparent 5.5px,#000 6px);
}
.nav-links{display:flex;gap:26px;font-size:.86rem;color:var(--muted)}
.nav-links a{position:relative;padding:6px 0;white-space:nowrap;transition:color .4s}
/* le trait ne marque plus que la section en cours : au survol, c'est le
   roulement des lettres qui répond */
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--accent);
  transition:width .5s var(--ease);
}
.nav-links a.active{color:var(--txt)}
.nav-links a.active::after{width:100%}

/* le masque : sa hauteur est celle d'une ligne de texte, rien ne dépasse */
.roul{position:relative;display:block;overflow:hidden}
.roul-haut,.roul-bas{display:block}
.roul-bas{position:absolute;inset:0;color:var(--accent)}
.roul .l{display:inline-block;transition:transform .5s var(--ease)}
.roul-bas .l{transform:translateY(105%)}
@media (hover:hover){
  .nav-links a:hover .roul-haut .l{transform:translateY(-105%)}
  .nav-links a:hover .roul-bas .l{transform:translateY(0)}
}


.nav-cta{
  display:flex;align-items:center;gap:9px;flex:0 0 auto;font-size:.8rem;
  border:1px solid var(--line);border-radius:100px;padding:9px 18px;
  transition:border-color .4s,background .4s;
}
.nav-cta:hover,
.nav-cta.active{border-color:var(--accent);background:rgba(242,193,78,.07)}
.dot{width:6px;height:6px;border-radius:50%;background:#5dd39e;box-shadow:0 0 0 0 rgba(93,211,158,.55);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(93,211,158,0)}100%{box-shadow:0 0 0 0 rgba(93,211,158,0)}}

/* voile posé derrière le menu déroulant, sur téléphone. Pas de flou :
   c'est cher à l'affichage et invisible sous un noir à moitié opaque. */
.menu-voile{
  position:fixed;inset:0;z-index:80;
  background:rgba(8,9,12,.55);
  opacity:0;transition:opacity .34s ease;
}
.menu-voile.on{opacity:1}

.burger{display:none;width:40px;height:40px;position:relative;flex:0 0 auto}
.burger span{position:absolute;left:9px;width:22px;height:1.5px;background:var(--txt);transition:transform .5s var(--ease),opacity .4s}
.burger span:nth-child(1){top:17px}
.burger span:nth-child(2){top:23px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

/* ── L'île : centrée, et son animation d'ouverture ────────── */
@media (min-width:821px){
  .island{
    position:absolute;left:50%;top:50%;
    transform:translate(-50%,-50%);
    /* ressort façon Dynamic Island : léger dépassement puis calage */
    transition:
      width .75s cubic-bezier(.34,1.44,.48,1),
      height .6s cubic-bezier(.34,1.44,.48,1),
      padding .6s cubic-bezier(.34,1.44,.48,1),
      background .5s ease,border-color .5s ease;
  }
  .island.open{height:46px;padding:0 19px}
  /* les liens se replient sur eux-mêmes plutôt que de rester en place :
     sans ça, ils poussaient l'anneau hors du cadre, qui le découpait */
  .island .nav-links{
    max-width:0;margin:0 12px;overflow:hidden;
    opacity:0;transform:scale(.9);filter:blur(4px);pointer-events:none;
    transition:
      max-width .75s cubic-bezier(.34,1.44,.48,1),
      margin .75s cubic-bezier(.34,1.44,.48,1),
      opacity .25s ease,
      transform .6s cubic-bezier(.34,1.44,.48,1),
      filter .35s ease;
  }
  .island.open .nav-links{
    max-width:var(--wliens,900px);margin:0 18px;
    opacity:1;transform:none;filter:none;pointer-events:auto;
    transition-delay:0s,0s,.1s,.1s,.1s;
  }
}

/* ── 5. Hero ─────────────────────────────────────────────── */
.hero{
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding-top:calc(var(--nav-h) + 40px)!important;
  padding-bottom:90px!important;
  overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(120% 90% at 78% 8%,rgba(242,193,78,.10),transparent 55%),
    radial-gradient(90% 70% at 8% 92%,rgba(120,140,255,.07),transparent 60%);
}
.eyebrow{
  display:flex;align-items:center;gap:14px;margin:0 0 clamp(18px,3vw,30px);
  font-family:var(--police);font-size:.72rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--muted);
}
.eyebrow i{width:38px;height:1px;background:var(--line);display:block}
.hero-name{display:flex;align-items:center;gap:clamp(4px,1vw,18px)}
.hero-avatar{
  flex:0 0 auto;width:clamp(84px,13vw,200px);
  pointer-events:none;will-change:transform;
}
.hero-avatar img{
  width:100%;height:auto;display:block;
  filter:drop-shadow(0 28px 46px rgba(0,0,0,.62));
  animation:flotte 6.5s ease-in-out infinite;
}
.hero-title{
  min-width:0;
  font-family:var(--police);
  font-weight:700;
  font-size:clamp(3.2rem,12vw,10.6rem);
  line-height:.88;letter-spacing:-.035em;
  margin:0;text-transform:uppercase;
}
.hero-title .mot{display:inline-block;white-space:nowrap}
.hero-title .ch{display:inline-block;will-change:transform}
.hero-title .sp{width:.28em}
.hero-bottom{
  display:flex;flex-wrap:wrap;gap:clamp(24px,5vw,80px);align-items:flex-end;
  margin-top:clamp(30px,5vw,60px);border-top:1px solid var(--line-soft);padding-top:28px;
}
.hero-lead{margin:0;max-width:32ch;font-size:clamp(1.05rem,1.6vw,1.4rem);line-height:1.45;color:#cbcdd2}
.hero-lead em{font-style:normal;color:var(--accent)}
.hero-meta{margin-left:auto;font-family:var(--police);font-size:.72rem;color:var(--muted);letter-spacing:.04em}
.hero-meta li{padding:3px 0}
.hero-scroll{
  position:absolute;left:var(--pad);bottom:38px;
  display:flex;align-items:center;gap:12px;
  font-family:var(--police);font-size:.64rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--dim);
}
.hero-scroll i{width:52px;height:1px;background:var(--line);position:relative;overflow:hidden;display:block}
.hero-scroll i::after{content:"";position:absolute;inset:0;background:var(--accent);animation:sweep 2.2s var(--ease) infinite}
@keyframes sweep{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
/* Manifeste */
.manifesto{max-width:1180px}
.manifesto-text{
  font-family:var(--police);font-weight:500;
  font-size:clamp(1.35rem,3.6vw,3rem);line-height:1.22;letter-spacing:-.025em;margin:0;
}
.manifesto-text .w{
  display:inline-block;color:rgba(236,237,237,.16);
  transition:color .6s ease,transform .6s var(--ease);
}
.manifesto-text .w.lit{color:var(--txt)}

/* Profil */
.about-grid{display:grid;grid-template-columns:minmax(240px,.72fr) 1.4fr;gap:clamp(30px,5vw,90px);align-items:start}
.portrait{margin:0;will-change:transform}
.portrait-media{
  position:relative;aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);background:linear-gradient(160deg,var(--panel-2),var(--panel));
  display:grid;place-items:center;
}
.portrait-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35) contrast(1.05)}
.portrait-media.is-cutout{
  background:
    radial-gradient(120% 85% at 50% 12%,rgba(242,193,78,.17),transparent 62%),
    linear-gradient(165deg,var(--panel-2),var(--panel));
}
.portrait-media.is-cutout img{
  object-fit:contain;object-position:50% 100%;filter:none;padding:9% 7% 0;
}
.portrait-fallback{
  display:none;font-family:var(--police);font-size:4rem;font-weight:700;
  color:rgba(255,255,255,.10);letter-spacing:-.04em;
}
.portrait-media.is-empty .portrait-fallback{display:block}
.portrait-media.is-empty::after{
  content:"images/portrait.jpg";position:absolute;bottom:14px;left:0;right:0;text-align:center;
  font-family:var(--police);font-size:.6rem;color:var(--dim);letter-spacing:.1em;
}
.portrait figcaption{
  margin-top:14px;font-family:var(--police);font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
}
.about-text p{margin:0 0 20px;max-width:62ch;color:#b9bcc2;font-size:1.02rem}
.about-text p:first-child{color:#dcdde0;font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.5}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr));gap:1px;margin:44px 0 0;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:14px;overflow:hidden}
.facts div{background:var(--bg);padding:18px 20px}
.facts dt{font-family:var(--police);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.facts dd{margin:0;font-size:.94rem}

/* ── 6. Compétences ──────────────────────────────────────── */
.section-head{margin-bottom:clamp(34px,5vw,60px)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:14px}
.tile{position:relative}
.tile-face{
  position:relative;display:flex;flex-direction:column;width:100%;min-height:250px;
  padding:24px;border:1px solid var(--line-soft);border-radius:var(--radius);
  background:linear-gradient(165deg,var(--panel) 0%,rgba(30,33,39,.45) 100%);
  overflow:hidden;isolation:isolate;
  transition:border-color .6s var(--ease),transform .7s var(--ease),background .6s;
}
.tile-face::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(242,193,78,.13),transparent 62%);
  transition:opacity .5s ease;
}
.tile-face:hover{border-color:rgba(242,193,78,.4);transform:translateY(-5px)}
.tile-face:hover::before{opacity:1}
.tile-num{font-family:var(--police);font-size:.64rem;color:var(--accent);letter-spacing:.16em}
.tile-icon{
  position:absolute;top:20px;right:20px;width:58px;height:58px;border-radius:14px;
  opacity:.92;transition:transform .7s var(--ease),opacity .5s ease;
}
.tile-face:hover .tile-icon{transform:scale(1.09) rotate(-4deg);opacity:1}
.tile-title{
  display:block;margin-top:auto;font-family:var(--police);
  font-size:clamp(1.3rem,2vw,1.7rem);font-weight:600;letter-spacing:-.03em;line-height:1.05;
}
.tile-role{display:block;margin-top:9px;font-size:.85rem;color:var(--muted);line-height:1.4}
.tile-cta{
  display:inline-flex;align-items:center;gap:8px;margin-top:20px;
  font-family:var(--police);font-size:.63rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  transition:color .4s,gap .4s var(--ease);
}
.tile-cta::after{content:"→"}
.tile-face:hover .tile-cta{color:var(--accent);gap:13px}

.rows{border-top:1px solid var(--line-soft)}
.row-face{
  display:flex;align-items:center;gap:20px;width:100%;padding:24px 6px;
  border-bottom:1px solid var(--line-soft);transition:padding .6s var(--ease),color .4s;
}
.row-face:hover{padding-left:20px}
.row-title{font-family:var(--police);font-size:clamp(1.15rem,2.4vw,1.8rem);font-weight:600;letter-spacing:-.025em}
.row-hint{margin-left:auto;font-size:.83rem;color:var(--muted);text-align:right}
.row-plus{position:relative;width:16px;height:16px;flex:0 0 16px;transition:transform .65s var(--ease)}
.row-plus::before,.row-plus::after{content:"";position:absolute;background:var(--muted);transition:background .4s}
.row-plus::before{left:0;top:7.5px;width:16px;height:1px}
.row-plus::after{top:0;left:7.5px;width:1px;height:16px}
.row-face:hover .row-plus{transform:rotate(90deg)}
.row-face:hover .row-plus::before,.row-face:hover .row-plus::after{background:var(--accent)}

/* ── 7. Approche (épinglée) ──────────────────────────────── */
.pin{height:auto;padding:0!important;max-width:none!important}
@media (min-width:821px){html.js .pin{height:360vh}}
.pin-inner{
  height:100svh;display:flex;flex-direction:column;justify-content:center;gap:34px;
  padding:calc(var(--nav-h) + 20px) 0 60px;overflow:hidden;will-change:transform;
}
.pin-head{padding:0 var(--pad);max-width:var(--maxw);margin-inline:auto;width:100%}
.pin-head .h2{margin-bottom:0}
.pin-track{display:flex;gap:20px;padding:0 var(--pad);width:max-content;will-change:transform}
.step{
  width:min(420px,80vw);flex:0 0 auto;padding:34px 30px;
  border:1px solid var(--line-soft);border-radius:var(--radius);
  background:linear-gradient(165deg,var(--panel),rgba(30,33,39,.35));
  display:flex;flex-direction:column;
}
.step-num{font-family:var(--police);font-size:.66rem;letter-spacing:.18em;color:var(--accent)}
.step h3{font-family:var(--police);font-size:1.55rem;font-weight:600;letter-spacing:-.03em;margin:16px 0 14px}
.step p{margin:0;color:#b0b4bb;font-size:.96rem}
.step-out{
  margin-top:auto;padding-top:22px;font-family:var(--police);
  font-size:.63rem;letter-spacing:.1em;color:var(--dim);line-height:1.6;
}
.step-end{background:linear-gradient(165deg,rgba(242,193,78,.14),rgba(30,33,39,.45));border-color:rgba(242,193,78,.3);justify-content:center}
.btn{
  align-self:flex-start;margin-top:26px;padding:14px 28px;border-radius:100px;
  background:var(--accent);color:#141414;font-weight:600;font-size:.92rem;
  transition:transform .5s var(--ease),box-shadow .5s;
}
.btn:hover{transform:translateY(-3px);box-shadow:0 14px 34px -12px rgba(242,193,78,.6)}
.pin-bar{height:1px;background:var(--line-soft);margin:0 var(--pad)}
.pin-bar span{display:block;height:1px;width:0;background:var(--accent)}

/* ── 8. Réalisations ─────────────────────────────────────── */
.works{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:20px}
.work-card{position:relative}
.work-face{
  display:block;width:100%;border:1px solid var(--line-soft);border-radius:var(--radius);
  overflow:hidden;background:var(--panel);
  transition:border-color .6s var(--ease),transform .7s var(--ease);
}
.work-face:hover{border-color:rgba(242,193,78,.4);transform:translateY(-6px)}
.work-media{
  position:relative;display:grid;place-items:center;aspect-ratio:16/10;overflow:hidden;
  background:linear-gradient(140deg,#252931,#1b1e23);
}
.work-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.45s var(--ease),filter .8s}
.work-face:hover .work-media img{transform:scale(1.045)}
.work-fallback{
  display:none;font-family:var(--police);font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);
}
.work-media.is-empty{background:repeating-linear-gradient(45deg,#1d2026,#1d2026 12px,#212530 12px,#212530 24px)}
.work-media.is-empty .work-fallback{display:block}
.work-body{display:flex;flex-direction:column;padding:26px 26px 30px;border-top:1px solid var(--line-soft)}
.work-index{font-family:var(--police);font-size:.63rem;letter-spacing:.2em;color:var(--accent);text-transform:uppercase}
.work-title{font-family:var(--police);font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:600;letter-spacing:-.035em;margin-top:12px}
.work-meta{font-size:.86rem;color:var(--muted);margin-top:8px}
.work-cta{
  margin-top:20px;font-family:var(--police);font-size:.63rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);display:inline-flex;gap:8px;transition:color .4s,gap .4s var(--ease);
}
.work-cta::after{content:"→"}
.work-face:hover .work-cta{color:var(--accent);gap:13px}

/* ── 8 bis. Page Réalisations ────────────────────────────── */
.cas-hero{padding-top:calc(var(--nav-h) + clamp(60px,9vw,120px))!important}
.eyebrow a{color:var(--muted);transition:color .4s}
.eyebrow a:hover{color:var(--accent)}
.cas-titre{
  font-size:clamp(2.6rem,9vw,7rem);font-weight:700;
  line-height:.92;letter-spacing:-.04em;margin:0 0 clamp(30px,5vw,54px);
  text-transform:uppercase;
}
.cas-titre .mot{display:inline-block;white-space:nowrap}
.cas-titre .ch{display:inline-block;will-change:transform}
.cas-titre .sp{width:.28em}
.cas-intro{
  display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(28px,5vw,70px);
  align-items:start;border-top:1px solid var(--line-soft);padding-top:32px;
}
.cas-chapeau{margin:0;color:#c2c5cb;font-size:clamp(1rem,1.6vw,1.2rem);line-height:1.55;max-width:56ch}
.cas-repere{display:flex;flex-direction:column;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:14px;overflow:hidden}
.cas-repere li{background:var(--bg);padding:14px 18px;display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.cas-repere span{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);font-weight:600}
.cas-repere strong{font-weight:600;font-size:.94rem}

.cas{border-top:1px solid var(--line-soft)}
.cas-tete{margin-bottom:clamp(28px,4vw,44px)}
.cas-num{font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-weight:600}
.cas-nom{
  font-size:clamp(1.9rem,5vw,3.6rem);font-weight:700;letter-spacing:-.04em;
  line-height:1;margin:14px 0 24px;
}
.cas-meta{display:flex;flex-wrap:wrap;gap:12px}
.cas-meta li{
  display:flex;flex-direction:column;gap:5px;
  padding:12px 18px;border:1px solid var(--line-soft);border-radius:12px;
  background:linear-gradient(165deg,var(--panel),rgba(30,33,39,.35));
  font-size:.9rem;
}
.cas-meta span{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);font-weight:600}

.cas-media{
  margin:0 0 clamp(30px,5vw,52px);position:relative;
  border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line-soft);display:grid;place-items:center;
  background:linear-gradient(140deg,#252931,#1b1e23);
}
.cas-media img{width:100%;height:auto;display:block}
.cas-media.is-empty{aspect-ratio:16/10}
.cas-vide{
  display:none;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);font-weight:600;text-align:center;padding:0 20px;
}
.cas-media.is-empty,.cas-vignette.is-empty{
  background:repeating-linear-gradient(45deg,#1d2026,#1d2026 12px,#212530 12px,#212530 24px);
}
.cas-media.is-empty .cas-vide,.cas-vignette.is-empty .cas-vide{display:block}

.cas-grille{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
  gap:clamp(24px,4vw,44px);margin-bottom:clamp(34px,5vw,56px);
}
.cas h3{
  font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
  font-weight:600;margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--line-soft);
}
.cas-grille p{margin:0;color:#b6b9bf;font-size:.95rem;line-height:1.6}
.cas-detail{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:clamp(24px,4vw,44px);margin-bottom:clamp(34px,5vw,56px);
}
.cas-liste li{position:relative;padding:0 0 12px 20px;color:#b6b9bf;font-size:.94rem;line-height:1.55}
.cas-liste li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:1px;background:var(--accent)}
.cas-resultat{
  padding:26px 28px;border-radius:var(--radius);
  border:1px solid rgba(242,193,78,.22);
  background:linear-gradient(165deg,rgba(242,193,78,.09),rgba(30,33,39,.4));
  margin-bottom:clamp(30px,4vw,48px);
}
.cas-resultat h3{border-bottom-color:rgba(242,193,78,.2)}
.cas-resultat p{margin:0;color:#cdd0d5;font-size:1rem;line-height:1.6;max-width:70ch}

.cas-outils{margin-bottom:clamp(30px,4vw,48px)}
.cas-outils ul{display:flex;flex-wrap:wrap;gap:10px}
.cas-outil{
  display:flex;align-items:center;gap:11px;padding:9px 16px 9px 9px;
  border:1px solid var(--line-soft);border-radius:100px;background:var(--panel);
}
.cas-outil img{width:30px;height:30px;border-radius:8px}
.cas-outil span{font-size:.86rem;font-weight:500}
.cas-outil-texte{padding:9px 18px}

.cas-galerie{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:16px;margin-bottom:clamp(26px,4vw,40px)}
.cas-vignette{
  margin:0;position:relative;border-radius:14px;overflow:hidden;
  border:1px solid var(--line-soft);background:linear-gradient(140deg,#252931,#1b1e23);
  display:grid;place-items:center;
}
.cas-vignette.is-empty{aspect-ratio:4/3}
.cas-vignette img{width:100%;height:auto;display:block;grid-area:1/1}
.cas-vignette figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:10px 14px;
  background:linear-gradient(to top,rgba(10,11,13,.9),transparent);
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;
}
.cas-mobiles{margin-bottom:clamp(30px,4vw,48px)}
/* les écrans de téléphone défilent sur un rail : hauteur commune, largeur
   libre, pour ne recadrer aucune capture */
.cas-rail{
  display:flex;gap:14px;overflow-x:auto;padding-bottom:14px;
  scroll-snap-type:x proximity;overscroll-behavior-x:contain;
}
.cas-rail figure{margin:0;flex:0 0 auto;scroll-snap-align:start}
.cas-rail img{
  height:clamp(320px,42vw,460px);width:auto;display:block;
  border-radius:16px;border:1px solid var(--line-soft);
  background:var(--panel);
}
.cas-rail figcaption{
  margin-top:10px;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);font-weight:600;
}
.cas-lien{margin:0}
.cas-lien a{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--accent);font-weight:500;
  border-bottom:1px solid rgba(242,193,78,.4);padding-bottom:3px;
}

.cas-appel{border-top:1px solid var(--line-soft);text-align:left}
.cas-actions{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-top:34px}
.cas-actions .btn{margin-top:0}
.lien-simple{color:var(--muted);font-size:.92rem;font-weight:500;transition:color .4s}
.lien-simple:hover{color:var(--accent)}

/* le renvoi vers la page, depuis l'accueil */
.work-plus{margin:clamp(26px,4vw,40px) 0 0;display:flex;justify-content:flex-start}
.work-plus a{
  display:inline-flex;align-items:center;gap:12px;
  padding:14px 26px;border:1px solid var(--line);border-radius:100px;
  font-size:.92rem;font-weight:500;
  transition:border-color .45s,background .45s,gap .45s var(--ease);
}
.work-plus a:hover{border-color:var(--accent);background:rgba(242,193,78,.07);gap:18px}

@media (max-width:820px){
  .cas-intro{grid-template-columns:1fr}
  .cas-meta li{flex:1 1 138px}
}

/* ── 9. Parcours & contact ───────────────────────────────── */
.cartes-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(292px,100%),1fr));gap:16px}
.carte-info{
  display:flex;flex-direction:column;padding:32px 28px;
  border:1px solid var(--line-soft);border-radius:var(--radius);
  background:linear-gradient(165deg,var(--panel),rgba(30,33,39,.35));
}
.carte-num{font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.carte-info h3{font-size:clamp(1.3rem,2vw,1.7rem);font-weight:600;letter-spacing:-.03em;margin:14px 0 12px}
.carte-lead{margin:0 0 24px;color:#c2c5cb;font-size:.98rem;line-height:1.5}
.carte-info ul{margin:0 0 24px}
.carte-info li{position:relative;padding:0 0 11px 20px;color:#a9adb4;font-size:.92rem;line-height:1.5}
.carte-info li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:1px;background:var(--accent)}
.carte-pied{
  margin-top:auto;padding-top:20px;border-top:1px solid var(--line-soft);
  font-size:.72rem;letter-spacing:.08em;color:var(--dim);
}
.contact-lead{margin:0 0 clamp(28px,4vw,44px);max-width:46ch;color:#c2c5cb;font-size:clamp(1rem,1.5vw,1.15rem);line-height:1.5}

.contact{text-align:left;border-top:1px solid var(--line-soft)}
.contact-head{display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,5vw,70px)}
.contact-avatar{
  width:clamp(110px,15vw,200px);height:auto;flex:0 0 auto;
  filter:drop-shadow(0 26px 44px rgba(0,0,0,.55));
  animation:flotte 6s ease-in-out infinite;
}
.contact-title{
  font-family:var(--police);font-weight:700;
  font-size:clamp(2.4rem,9vw,7.5rem);line-height:.9;letter-spacing:-.045em;margin:0 0 clamp(30px,5vw,60px);
}
.mail{
  display:inline-block;position:relative;
  font-family:var(--police);font-size:clamp(1.1rem,3.4vw,2.6rem);
  letter-spacing:-.03em;padding-bottom:10px;will-change:transform;
}
.mail::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--line);transition:background .5s}
.mail span{position:relative;display:inline-block;transition:color .45s}
.mail:hover span{color:var(--accent)}
.mail:hover::after{background:var(--accent)}
.contact-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:1px;margin-top:clamp(48px,7vw,90px);background:var(--line-soft);border:1px solid var(--line-soft);border-radius:14px;overflow:hidden}
.contact-list li{background:var(--bg);padding:20px 22px;display:flex;flex-direction:column;gap:7px}
.contact-list span{font-family:var(--police);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.contact-list a{font-size:.96rem;transition:color .4s}
.contact-list a:hover{color:var(--accent)}
.contact-list a[aria-disabled]{pointer-events:none;color:var(--txt)}

.foot{
  display:flex;flex-wrap:wrap;gap:18px;align-items:center;
  padding:36px var(--pad);max-width:var(--maxw);margin-inline:auto;
  border-top:1px solid var(--line-soft);
  font-family:var(--police);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);
}
.foot p{margin:0}
.foot a{margin-left:auto;transition:color .4s}
.foot a:hover{color:var(--accent)}

/* ── 10. Modale (agrandissement) ─────────────────────────── */
#modal-layer{position:fixed;inset:0;z-index:110;pointer-events:none;overflow:hidden}
#modal-layer.open{pointer-events:auto}
.modal-backdrop{
  position:absolute;inset:0;background:rgba(8,9,12,.56);
  -webkit-backdrop-filter:blur(26px) saturate(150%);
  backdrop-filter:blur(26px) saturate(150%);
  opacity:0;transition:opacity .62s ease;
}
.modal-backdrop.on{opacity:1}
.modal-card{
  position:absolute;overflow:hidden;border-radius:var(--radius);
  background:
    linear-gradient(152deg,rgba(255,255,255,.13),rgba(255,255,255,.02) 40%,rgba(255,255,255,.05)),
    rgba(26,29,36,.82);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  backdrop-filter:blur(30px) saturate(180%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    0 50px 110px -30px rgba(0,0,0,.9),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(255,255,255,.05);
  display:flex;flex-direction:column;
  /* elle arrive un peu trop grande et se pose, avec un léger dépassement :
     le geste des alertes iOS */
  opacity:0;transform:scale(1.16);
  transition:opacity .55s ease,transform .9s cubic-bezier(.2,.9,.28,1.06);
}
.modal-card.ready{opacity:1;transform:none}
/* le retrait reste plus vif que l'arrivée : c'est ce rapport qui donne
   son caractère au geste, pas la durée elle-même */
.modal-card.sortie{
  opacity:0;transform:scale(.94);
  transition:opacity .44s ease,transform .54s cubic-bezier(.4,0,.9,.5);
}
.modal-scroll{position:relative;z-index:1;overflow-y:auto;overscroll-behavior:contain;height:100%;padding:clamp(26px,4vw,50px)}
.modal-head{display:flex;align-items:flex-start;gap:24px;padding-bottom:26px;border-bottom:1px solid var(--line-soft)}
.modal-icon{width:72px;height:72px;border-radius:17px;flex:0 0 auto}
.modal-eyebrow{font-family:var(--police);font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.modal-title{font-family:var(--police);font-size:clamp(1.9rem,4.4vw,3.2rem);font-weight:600;letter-spacing:-.04em;line-height:1;margin:12px 0 0}
.modal-sub{margin:12px 0 0;color:var(--muted);font-size:.98rem}
.modal-close{
  position:relative;flex:0 0 auto;margin-left:auto;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;transition:background .4s,border-color .4s,transform .65s var(--ease);
}
.modal-close::before,.modal-close::after{content:"";position:absolute;width:15px;height:1px;background:var(--txt)}
.modal-close::before{transform:rotate(45deg)}
.modal-close::after{transform:rotate(-45deg)}
.modal-close:hover{background:var(--accent);border-color:var(--accent);transform:rotate(90deg)}
.modal-close:hover::before,.modal-close:hover::after{background:#111}
.modal-body .lead{
  font-family:var(--police);font-size:clamp(1.1rem,2vw,1.6rem);
  line-height:1.3;letter-spacing:-.025em;color:var(--txt);margin:30px 0 34px;max-width:44ch;
}
.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:clamp(24px,4vw,50px)}
.detail-grid h4{
  font-family:var(--police);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);font-weight:600;margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid var(--line-soft);
}
.detail-grid ul li{position:relative;padding:0 0 12px 20px;color:#b6b9bf;font-size:.95rem}
.detail-grid ul li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:1px;background:var(--accent)}
.detail-grid p{margin:0;color:#b6b9bf;font-size:.95rem}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:36px}
.tags li{
  padding:7px 15px;border:1px solid var(--line-soft);border-radius:100px;
  font-family:var(--police);font-size:.63rem;letter-spacing:.1em;color:var(--muted);
}
.detail-link{margin:30px 0 0}
.detail-link a{color:var(--accent);border-bottom:1px solid rgba(242,193,78,.4);padding-bottom:2px}

/* ── Micro-typographie ───────────────────────────────────── */
/* Ces libellés étaient dessinés pour une chasse fixe : en SF Pro,
   ils demandent un peu plus de corps pour ne pas paraître grêles. */
.section-tag,.sub-head,.eyebrow,.hero-meta,.hero-scroll,.tile-num,.tile-cta,
.island-num,.step-num,.step-out,.work-index,.work-cta,.work-fallback,
.facts dt,.contact-list span,.foot,.tags li,.modal-eyebrow,.detail-grid h4,
.carte-num,.carte-pied,
.portrait figcaption{font-weight:600}
.nav-links a,.nav-cta,.facts dd,.contact-list a,.detail-link a{font-weight:500}

/* ── Révélations au défilement ───────────────────────────── */
html.js [data-reveal]{opacity:0;transform:translateY(34px);transition:opacity 1.15s var(--ease),transform 1.3s var(--ease)}
html.js [data-reveal].in{opacity:1;transform:none}

/* ── Responsive ──────────────────────────────────────────── */
@media (min-width:821px) and (max-width:1180px){
  .nav-links{gap:17px;font-size:.79rem}
  .island.open .nav-links{margin:0 13px}
}
@media (max-width:1024px){
  .about-grid{grid-template-columns:1fr}
  .portrait{position:static;max-width:380px}
}
@media (max-width:820px){
  :root{--nav-h:64px}
  .island{display:contents}
  .island-num,.island-ring{display:none}
  /* Un panneau posé sous la barre, pas un bandeau collé aux bords : même
     gris, même arrondi et même ombre que les cartes du site. Il se déploie
     depuis le bouton, en haut à droite. */
  .nav-links{
    position:fixed;top:calc(var(--nav-h) + 6px);left:12px;right:12px;
    flex-direction:column;gap:4px;
    padding:8px;border-radius:22px;
    background:var(--panel);
    border:1px solid var(--line-soft);
    box-shadow:
      0 26px 60px -22px rgba(0,0,0,.9),
      inset 0 1px 0 rgba(255,255,255,.06);
    transform-origin:100% 0;
    opacity:0;transform:translateY(-10px) scale(.96);pointer-events:none;
    transition:opacity .26s ease,transform .46s cubic-bezier(.2,.9,.28,1.06);
    margin:0;max-width:none;
  }
  .nav-links.open{opacity:1;transform:none;pointer-events:auto}

  .nav-links a{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:15px 16px;border-radius:15px;border:0;
    font-size:1.05rem;font-weight:500;color:var(--txt);
    opacity:0;transform:translateY(-6px);
    transition:opacity .26s ease,transform .38s var(--ease),background .3s ease;
  }
  /* les entrées arrivent l'une après l'autre, pas toutes d'un bloc */
  .nav-links.open a{opacity:1;transform:none}
  .nav-links.open a:nth-child(1){transition-delay:.05s,.05s,0s}
  .nav-links.open a:nth-child(2){transition-delay:.10s,.10s,0s}
  .nav-links.open a:nth-child(3){transition-delay:.15s,.15s,0s}
  .nav-links.open a:nth-child(4){transition-delay:.20s,.20s,0s}
  .nav-links a:active{background:rgba(255,255,255,.07)}

  /* La page en cours : un fond discret et une pastille dorée à droite.
     Le trait du bureau ferait ici une barre sur toute la largeur de la
     ligne, juste au-dessus du séparateur — d'où l'effet brouillon. */
  .nav-links a::after{
    content:"";position:static;
    width:7px;height:7px;min-width:7px;border-radius:50%;
    background:transparent;transition:background .3s ease;
  }
  .nav-links a.active{background:rgba(242,193,78,.10);color:var(--txt)}
  .nav-links a.active::after{width:7px;background:var(--accent)}
  .nav-cta{display:none}
  .burger{display:block}
  /* sur téléphone, le titre se cale sur la largeur de l'écran plutôt que
     sur un plancher en rem, et la bannière cesse de laisser un grand vide
     sous le texte : le contenu descend, la section suivante s'annonce */
  .hero{min-height:82svh;justify-content:flex-end;padding-bottom:clamp(54px,9vh,88px)!important}
  .hero-title{font-size:clamp(2.9rem,15vw,4.4rem)}
  .hero-avatar{width:clamp(76px,20vw,110px)}
  .hero-bottom{flex-direction:column;align-items:flex-start;gap:22px}
  .hero-meta{margin-left:0}
  .hero-scroll{display:none}
  .tiles{grid-template-columns:1fr 1fr}
  .tile-face{min-height:200px;padding:20px}
  .tile-icon{width:46px;height:46px;top:16px;right:16px;border-radius:11px}
  .contact-head{flex-direction:column;align-items:flex-start;gap:26px}
  .contact-avatar{align-self:center}
  .row-face{flex-wrap:wrap;gap:8px;padding:20px 0}
  .row-hint{margin-left:0;width:100%;text-align:left;order:3}
  .row-plus{margin-left:auto}
  .pin{height:auto}
  .pin-inner{height:auto;transform:none!important;padding:clamp(90px,12vw,140px) 0}
  .pin-track{flex-direction:column;width:auto;transform:none!important;gap:14px}
  .step{width:auto}
  .pin-bar{display:none}
  .facts div{padding:15px 16px}
  .foot a{margin-left:0;width:100%}
}
@media (max-width:520px){
  .tiles{grid-template-columns:1fr;gap:12px}
  .tile-face{min-height:0}
  .tile-title{margin-top:14px}
  .modal-scroll{padding:24px 20px}
  .modal-head{gap:14px}
}
@media (hover:none){
  .glow{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.05ms!important}
  html.js [data-reveal]{opacity:1;transform:none}
  .manifesto-text .w{color:var(--txt)}
  .grain{display:none}
}