/* ─────────────────────────────── tokens ─────────────────────────────── */
:root[data-theme="dark"]{
  --bg:        oklch(0.10 0.025 280);
  --bg-2:      oklch(0.13 0.030 280);
  --bg-3:      oklch(0.17 0.035 280);
  --surface:   oklch(0.18 0.035 280 / .55);
  --surface-2: oklch(0.22 0.040 280 / .55);
  --fg:        oklch(0.97 0.008 90);
  --fg-soft:   oklch(0.80 0.012 90);
  --fg-mute:   oklch(0.58 0.015 90);
  --line:      oklch(1 0 0 / .10);
  --line-2:    oklch(1 0 0 / .20);
  --primary:   oklch(0.62 0.21 280);
  --primary-2: oklch(0.72 0.18 280);
  --primary-deep: oklch(0.48 0.22 280);
  --accent:    oklch(0.78 0.16 60);
  --magenta:   oklch(0.65 0.22 340);
  --green:     oklch(0.70 0.18 145);
  --orange:    oklch(0.72 0.18 50);
  --glow:      oklch(0.62 0.21 280 / .38);
  --glow-warm: oklch(0.78 0.16 60 / .25);
  --shadow-glass: 0 1px 0 oklch(1 0 0 / .08) inset, 0 0 0 1px oklch(1 0 0 / .06) inset, 0 30px 80px -30px oklch(0 0 0 / .7);
  --shadow-card: 0 1px 0 oklch(1 0 0 / .06) inset, 0 -1px 0 oklch(0 0 0 / .35) inset, 0 30px 60px -20px oklch(0 0 0 / .6);
  --grain: .04;
  color-scheme: dark;
}
:root{
  --bg:        oklch(0.985 0.005 280);
  --bg-2:      oklch(0.965 0.006 280);
  --bg-3:      oklch(0.935 0.008 280);
  --surface:   oklch(1 0 0 / .70);
  --surface-2: oklch(1 0 0 / .85);
  --fg:        oklch(0.18 0.012 280);
  --fg-soft:   oklch(0.36 0.013 280);
  --fg-mute:   oklch(0.55 0.014 280);
  --line:      oklch(0 0 0 / .09);
  --line-2:    oklch(0 0 0 / .18);
  --primary:   oklch(0.52 0.22 280);
  --primary-2: oklch(0.62 0.20 280);
  --primary-deep: oklch(0.42 0.22 280);
  --accent:    oklch(0.62 0.17 55);
  --magenta:   oklch(0.55 0.24 340);
  --green:     oklch(0.55 0.18 145);
  --orange:    oklch(0.60 0.20 50);
  --glow:      oklch(0.52 0.22 280 / .22);
  --glow-warm: oklch(0.62 0.17 55 / .15);
  --shadow-glass: 0 1px 0 oklch(1 0 0 / .9) inset, 0 0 0 1px oklch(0 0 0 / .04) inset, 0 30px 80px -30px oklch(0 0 0 / .22);
  --shadow-card: 0 1px 0 oklch(1 0 0 / .8) inset, 0 -1px 0 oklch(0 0 0 / .06) inset, 0 30px 60px -20px oklch(0 0 0 / .15);
  --grain: .025;
  color-scheme: light;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0; padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--fg);
  font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  letter-spacing:-0.011em;
  overflow-x:hidden;
  transition: background .5s ease, color .5s ease;
}
.serif{font-family:"Instrument Serif", serif; font-style:italic; font-weight:400; letter-spacing:-0.01em}
.label{font-family:"JetBrains Mono", ui-monospace, monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-mute); font-weight:500}

/* ─────────────────────────────── ambient bg ─────────────────────────────── */
.bg-stage{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.blob{position:absolute; border-radius:50%; filter: blur(80px) saturate(1.4); opacity:.55; mix-blend-mode: screen}
:root .blob{mix-blend-mode: multiply; opacity:.22}
.blob.b1{width:55vw; height:55vw; background:var(--primary); top:-18vw; left:-15vw; animation: blob1 32s ease-in-out infinite}
.blob.b2{width:50vw; height:50vw; background:var(--primary-deep); top:35vh; right:-18vw; animation: blob2 36s ease-in-out infinite}
.blob.b3{width:42vw; height:42vw; background:var(--magenta); bottom:-10vw; left:25vw; animation: blob3 40s ease-in-out infinite; opacity:.25}
:root .blob.b3{opacity:.10}
@keyframes blob1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(8vw,5vw) scale(1.1)}}
@keyframes blob2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-7vw,6vw) scale(.92)}}
@keyframes blob3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,-5vw) scale(1.08)}}
.bg-grain{
  position:fixed; inset:-50%; pointer-events:none; z-index:1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: var(--grain); mix-blend-mode:overlay;
}
.bg-grid{
  position:fixed; inset:0; pointer-events:none; z-index:1;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: radial-gradient(ellipse 70% 50% at 50% 30%, black, transparent 70%);
  opacity:.35;
}


/* ─────────────────────────────── layout primitives ─────────────────────────────── */
.wrap{max-width: 1440px; margin: 0 auto; padding: 0 32px; position:relative; z-index:2}
@media (max-width:720px){ .wrap{padding:0 20px} }

/* ─────────────────────────────── NAV ─────────────────────────────── */
.nav{position:sticky; top:0; z-index:60; padding-top: 18px}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:10px 12px 10px 14px;
  background: var(--surface);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  border:1px solid var(--line);
  border-radius:999px;
  box-shadow: var(--shadow-glass);
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--fg)}
.brand-mark{
  width:42px; height:42px;
  border-radius:13px;
  display:block;
  object-fit:contain;
  box-shadow: 0 8px 22px -6px var(--glow);
  transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
.brand:hover .brand-mark{ transform: scale(1.04); }
.brand-text{display:flex; flex-direction:column; line-height:1; gap:3px}
.brand-text .name{font-size:18px; font-weight:700; letter-spacing:-0.025em}
.brand-text .name em{font-style:normal; color: var(--primary-2); font-weight:700}
.brand-text .tag{
  font-family:"JetBrains Mono", monospace; font-size:8px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color: oklch(0.98 0 0);
  background: linear-gradient(135deg, var(--primary), var(--primary-deep));
  padding:3px 7px; border-radius:5px;
  display:flex; flex-direction:column; gap:2px;
  box-shadow: 0 4px 10px -3px var(--glow);
}
.brand-text .tag span:last-child{opacity:.85; font-size:7.5px}

.nav-links{display:flex; gap:2px; align-items:center; flex:1; justify-content:center}
@media (max-width: 1100px){ .nav-links{display:none} }
.nav-link{
  color:var(--fg-soft); text-decoration:none; font-size:14px; font-weight:500;
  padding:8px 14px; border-radius:999px; transition: all .25s;
  letter-spacing:-0.005em;
}
.nav-link:hover{color:var(--fg); background: var(--surface-2)}
.nav-link.is-active{color:var(--fg); background: var(--surface-2)}

.nav-actions{display:flex; gap:8px; align-items:center}
.theme-toggle{
  width:40px; height:40px; border-radius:50%;
  background: var(--surface-2); border:1px solid var(--line);
  color:var(--fg); cursor:pointer; display:grid; place-items:center; position:relative;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .25s;
}
.theme-toggle:hover{border-color: var(--line-2); transform: rotate(15deg)}
.theme-toggle svg{width:16px; height:16px; transition: opacity .3s, transform .4s}
.theme-toggle .sun{position:absolute; opacity:0; transform: scale(.6) rotate(-90deg)}
:root .theme-toggle .sun{opacity:1; transform:none}
:root .theme-toggle .moon{opacity:0; transform: scale(.6) rotate(90deg)}

.cta-pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:11px 22px; border-radius:999px;
  font-size:14px; font-weight:600; text-decoration:none;
  background: linear-gradient(180deg, var(--primary-2), var(--primary));
  color: oklch(0.98 0 0);
  border:1px solid oklch(0 0 0 / .15);
  box-shadow:
    0 1px 0 oklch(1 0 0 / .35) inset,
    0 -2px 0 oklch(0 0 0 / .2) inset,
    0 10px 28px -8px var(--glow),
    0 0 0 1px oklch(0 0 0 / .1);
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s;
}
.cta-pill:hover{transform: translateY(-2px); box-shadow: 0 1px 0 oklch(1 0 0 / .35) inset, 0 -2px 0 oklch(0 0 0 / .2) inset, 0 16px 40px -8px var(--glow), 0 0 0 1px oklch(0 0 0 / .1)}

/* ─────────────────────────────── HERO ─────────────────────────────── */
.hero{padding: 70px 0 60px; position:relative}
.hero-meta{display:flex; align-items:center; gap:14px; margin-bottom:32px; flex-wrap:wrap}
.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:7px 14px 7px 10px; border-radius:999px;
  background: var(--surface); border:1px solid var(--line);
  font-size:13px; color:var(--fg-soft);
  backdrop-filter: blur(14px);
}
.pill .pulse{width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow: 0 0 0 0 var(--green); animation: pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 oklch(0.7 0.18 145 / .55)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.crumb{font-family:"JetBrains Mono", monospace; font-size:11px; color:var(--fg-mute); letter-spacing:.12em; text-transform:uppercase}

.headline{
  font-size: clamp(48px, 6.5vw, 112px);
  font-weight:700;
  line-height:.92;
  letter-spacing:-0.04em;
  margin: 0 0 28px;
}
.headline .row{display:block}
.headline .accent{
  background: linear-gradient(180deg, var(--primary-2) 0%, var(--primary-deep) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-family:"Instrument Serif", serif; font-style:italic; font-weight:400;
  letter-spacing:-0.02em;
}

.hero-grid{
  display:grid; grid-template-columns: 1.4fr 1fr; gap:48px;
  margin-top: 48px; align-items:start;
}
@media (max-width: 980px){ .hero-grid{grid-template-columns:1fr} }

.hero-left{display:flex; flex-direction:column; gap:24px}
.hero-lede{font-size: clamp(16px, 1.4vw, 19px); color:var(--fg-soft); max-width: 56ch; line-height: 1.55; margin:0}
.hero-lede strong{color:var(--fg); font-weight:500}
.hero-ctas{display:flex; gap:12px; flex-wrap:wrap; align-items:center}

.btn-primary,
.btn-primary:link,
.btn-primary:visited {
  color: #ffffff !important;
}

.btn-primary{
  position: relative;
  padding: 16px 30px;
  border-radius: 999px;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: 0.005em;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  background: linear-gradient(180deg, var(--primary-2), var(--primary-deep));
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
  border: 1px solid oklch(0 0 0 / .15);
  box-shadow:
    0 1px 0 oklch(1 0 0 / .4) inset,
    0 -3px 0 oklch(0 0 0 / .25) inset,
    0 18px 38px -10px var(--glow),
    0 0 0 1px oklch(0 0 0 / .12),
    0 0 0 6px oklch(0.62 0.20 280 / .08);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .3s;
  animation: btn-pulse 2.8s ease-in-out infinite;
}

/* Halo qui pulse autour du bouton */
@keyframes btn-pulse {
  0%, 100% { box-shadow: 0 1px 0 oklch(1 0 0 / .4) inset, 0 -3px 0 oklch(0 0 0 / .25) inset, 0 18px 38px -10px var(--glow), 0 0 0 1px oklch(0 0 0 / .12), 0 0 0 6px oklch(0.62 0.20 280 / .08); }
  50%      { box-shadow: 0 1px 0 oklch(1 0 0 / .4) inset, 0 -3px 0 oklch(0 0 0 / .25) inset, 0 18px 38px -10px var(--glow), 0 0 0 1px oklch(0 0 0 / .12), 0 0 0 12px oklch(0.62 0.20 280 / 0); }
}

/* Shimmer (reflet brillant qui balaye) */
.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 30%, oklch(1 0 0 / .35) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}

.btn-primary:hover {
  transform: translateY(-3px) scale(1.02);
  animation: none;
  box-shadow:
    0 1px 0 oklch(1 0 0 / .4) inset,
    0 -3px 0 oklch(0 0 0 / .25) inset,
    0 28px 60px -10px var(--glow),
    0 0 0 1px oklch(0 0 0 / .12),
    0 0 0 10px oklch(0.62 0.20 280 / .15);
}

.btn-primary:hover::before { transform: translateX(100%); }

.btn-primary:active { transform: translateY(-1px) scale(1); }

.btn-primary .arrow {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: oklch(0.18 0.04 280);
  color: oklch(0.98 0 0);
  display: grid;
  place-items: center;
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
  box-shadow: 0 0 0 2px oklch(1 0 0 / .15);
}

.btn-primary:hover .arrow {
  transform: translateX(4px) rotate(-45deg) scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary { animation: none; }
  .btn-primary::before { display: none; }
}

.btn-ghost{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 22px; border-radius:999px;
  background: var(--surface); border:1px solid var(--line);
  color:var(--fg); font-size:14px; font-weight:500; text-decoration:none;
  backdrop-filter: blur(20px);
  transition: all .25s;
}
.btn-ghost:hover{border-color:var(--line-2); background:var(--surface-2); transform: translateY(-1px)}

/* ── Hero Stats v2 (icône + valeur + sous-titre) ───────────── */
.hero-stats{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 32px;
}

.stat{
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 18px 16px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  box-shadow:
    0 1px 0 oklch(1 0 0 / .55) inset,
    0 8px 22px -12px oklch(0.62 0.20 280 / .18);
  overflow: hidden;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s;
}

[data-theme="dark"] .stat{
  box-shadow:
    0 1px 0 oklch(1 0 0 / .06) inset,
    0 8px 22px -12px oklch(0 0 0 / .4);
}

.stat:hover{
  transform: translateY(-2px);
  border-color: oklch(0.62 0.20 280 / .35);
  box-shadow:
    0 1px 0 oklch(1 0 0 / .55) inset,
    0 14px 30px -10px var(--glow);
}

/* Halo subtil derrière l'icône, couleur par card */
.stat::before{
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 80% at 0% 0%, var(--stat-accent, var(--glow)), transparent 60%);
  opacity: .18;
  transition: opacity .3s;
}
.stat:hover::before{ opacity: .35; }

/* Couleurs d'accent par stat */
.stat--loc   { --stat-accent: oklch(0.62 0.21 280 / .45); }   /* violet */
.stat--speed { --stat-accent: oklch(0.72 0.18 50 / .50);  }   /* orange */
.stat--free  { --stat-accent: oklch(0.70 0.18 145 / .50); }   /* vert */

/* Icône (carré rounded avec gradient) */
.stat-icon{
  position: relative;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: oklch(0.98 0 0);
  box-shadow: 0 1px 0 oklch(1 0 0 / .35) inset, 0 6px 14px -4px var(--stat-accent);
}
.stat-icon svg{ width: 18px; height: 18px; }

.stat--loc   .stat-icon { background: linear-gradient(135deg, var(--primary-2), var(--primary-deep)); }
.stat--speed .stat-icon { background: linear-gradient(135deg, oklch(0.78 0.16 60), oklch(0.62 0.18 35)); }
.stat--free  .stat-icon { background: linear-gradient(135deg, oklch(0.70 0.18 145), oklch(0.55 0.17 155)); }

/* Pin animé pour la localisation */
.stat-pin{
  position: absolute;
  top: -4px; right: -4px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: oklch(0.70 0.18 145);
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 0 oklch(0.70 0.18 145 / .55);
  animation: stat-pin-pulse 2s ease-in-out infinite;
}
@keyframes stat-pin-pulse{
  0%, 100% { box-shadow: 0 0 0 2px var(--bg), 0 0 0 0 oklch(0.70 0.18 145 / .55); }
  50%      { box-shadow: 0 0 0 2px var(--bg), 0 0 0 6px oklch(0.70 0.18 145 / 0); }
}

/* Effet "flash" sur l'icône éclair (réponse rapide) */
.stat--speed .stat-icon svg{
  animation: stat-bolt 3s ease-in-out infinite;
}
@keyframes stat-bolt{
  0%, 92%, 100% { transform: scale(1); opacity: 1; }
  94%           { transform: scale(1.15); opacity: .85; }
  96%           { transform: scale(0.95); opacity: 1; }
}

/* Body de la card */
.stat-body{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.stat .label{
  margin: 0;
  font-size: 10.5px;
  letter-spacing: 0.14em;
}
.stat-num{
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--fg);
}
.stat-meta{
  font-size: 14.5px;
  font-weight: 500;
  color: var(--fg-mute);
  letter-spacing: 0;
}
.stat-sub{
  font-size: 11.5px;
  color: var(--fg-mute);
  line-height: 1.35;
}

@media (max-width: 720px){
  .hero-stats{ grid-template-columns: 1fr; gap: 10px; }
  .stat-num{ font-size: 20px; }
}

@media (prefers-reduced-motion: reduce){
  .stat-pin, .stat--speed .stat-icon svg { animation: none; }
}

/* hero right — floating glass kpi cards */
.hero-right{position:relative; min-height:420px}
@media (max-width: 980px){ .hero-right{min-height:380px} }
.float-card{
  position:absolute; border-radius:22px;
  background: var(--surface); backdrop-filter: blur(22px) saturate(1.4);
  border:1px solid var(--line);
  padding:22px;
  box-shadow: var(--shadow-glass);
  animation: floaty 6s ease-in-out infinite;
  transform: rotate(var(--r, 0deg));
}
@keyframes floaty{0%,100%{transform: translateY(0) rotate(var(--r,0deg))}50%{transform: translateY(-12px) rotate(var(--r,0deg))}}

.fc-small{
  width: 220px; padding: 18px 20px;
  display:flex; flex-direction:column; gap:10px;
}
.fc-a{top: 50%; right: -16px; --r: 5deg; animation-delay: -2s; border:1px solid oklch(0.7 0.18 145 / .4); box-shadow: var(--shadow-glass), 0 0 60px -10px oklch(0.7 0.18 145 / .3)}
.fc-b{top: 78%; left: -10px; --r: -4deg; animation-delay: -4s; border:1px solid oklch(0.62 0.21 280 / .4); box-shadow: var(--shadow-glass), 0 0 60px -10px var(--glow)}
.fc-small .v{font-size:30px; font-weight:600; letter-spacing:-0.03em; line-height:1; display:flex; align-items:baseline; gap:2px}
.fc-small .v .unit{font-size:.5em; color:var(--fg-mute); font-weight:400; margin-left:4px}
.fc-small .v .accent{color: var(--green)}
.fc-b .v .accent{color: var(--primary-2)}
.fc-small .sub{font-size:12px; color:var(--fg-mute); line-height:1.4}

/* Header avec badge "Diplômé" */
.fc-b-head{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.fc-badge{
  display:inline-flex; align-items:center; gap:4px;
  padding: 3px 9px;
  border-radius: 999px;
  background: oklch(0.70 0.18 145 / .18);
  color: var(--green);
  border: 1px solid oklch(0.70 0.18 145 / .4);
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


/* ─────────────────────────────── marquee ─────────────────────────────── */
.marquee{
  margin: 60px 0 0;
  padding: 18px 0;
  border-block: 1px solid var(--line);
  background: var(--surface); backdrop-filter: blur(20px);
  overflow:hidden;
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.marquee-track{display:flex; gap:64px; animation: marquee 35s linear infinite; width:max-content}
@keyframes marquee{to{transform: translateX(-50%)}}
.marquee-item{font-family:"Instrument Serif", serif; font-style:italic; font-size:26px; color:var(--fg-soft); display:flex; align-items:center; gap:64px; white-space:nowrap}
.marquee-item::after{content:""; width:6px; height:6px; border-radius:50%; background:var(--primary); box-shadow: 0 0 12px var(--glow)}

/* ─────────────────────────────── section heads ─────────────────────────────── */
.section{padding: 120px 0 40px; position:relative}
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:24px;
  margin-bottom:56px; padding-bottom:24px; border-bottom:1px solid var(--line);
}
@media (max-width: 880px){ .section-head{flex-direction:column; align-items:flex-start} }
.section-eyebrow{
  display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px;
  background: oklch(0.62 0.21 280 / .14); border:1px solid oklch(0.62 0.21 280 / .35);
  font-family:"JetBrains Mono", monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  color: var(--primary-2);
  margin-bottom:22px;
}
:root .section-eyebrow{background: oklch(0.52 0.22 280 / .10); color: var(--primary-deep)}
.section-title{
  font-size: clamp(40px, 5.5vw, 80px);
  font-weight:700; letter-spacing:-0.04em; line-height:0.96;
  margin:0; max-width: 22ch;
}
.section-title em{font-family:"Instrument Serif", serif; font-style:italic; font-weight:400; color: var(--fg-soft)}
.section-title em.grad{
  background: linear-gradient(135deg, var(--primary-2), var(--primary-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.section-title::after{
  content:""; display:block; width:60px; height:3px;
  background: var(--primary); margin-top: 14px; border-radius: 2px;
  box-shadow: 0 0 18px var(--glow);
}
.section-meta{font-size:14px; color:var(--fg-soft); max-width:38ch; text-align:right; line-height:1.55}
@media (max-width:880px){ .section-meta{text-align:left} }

/* ─────────────────────────────── METHODE ─────────────────────────────── */
/* ── Méthode (timeline fluide) ───────────────────────────── */
.method-timeline {
  position: relative;
  padding: 40px 0 0;
}

/* La ligne passe par le centre des cercles numérotés */
.method-line {
  position: absolute;
  top: 40px;            /* aligne le centre du SVG sur le centre des cercles (Y=68px) */
  left: 0;
  right: 0;
  width: 100%;
  height: 56px;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

.method-steps {
  position: relative;
  z-index: 1;             /* cercles AU-DESSUS de la ligne */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 0;
}

.method-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ── Cercle numéroté ─────────────────────────────────────── */
.method-num {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--primary-2);
  background:
    radial-gradient(circle at 30% 25%, oklch(1 0 0 / .85), oklch(1 0 0 / .55) 60%),
    var(--surface-2);
  border: 1.5px solid var(--primary-2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 1px 0 oklch(1 0 0 / .8) inset,
    0 8px 20px -8px var(--glow),
    0 0 0 6px oklch(0.62 0.20 280 / .08);
  margin-bottom: 28px;
  transition: all .4s cubic-bezier(.2,.7,.2,1);
}

[data-theme="dark"] .method-num {
  background:
    radial-gradient(circle at 30% 25%, oklch(1 0 0 / .12), oklch(1 0 0 / .03) 60%),
    var(--surface-2);
  box-shadow:
    0 1px 0 oklch(1 0 0 / .12) inset,
    0 8px 20px -8px var(--glow),
    0 0 0 6px oklch(0.62 0.20 280 / .12);
}

.method-step:hover .method-num {
  background:
    radial-gradient(circle at 30% 25%, oklch(1 0 0 / .35), transparent 55%),
    linear-gradient(135deg, var(--primary-2), var(--primary-deep));
  border-color: transparent;
  color: oklch(0.98 0 0);
  box-shadow:
    0 1px 0 oklch(1 0 0 / .35) inset,
    0 14px 30px -8px var(--glow),
    0 0 0 8px oklch(0.62 0.20 280 / .18);
  transform: scale(1.1) translateY(-2px);
}

/* ── Carte icône ─────────────────────────────────────────── */
.method-icon {
  width: 82px;
  height: 82px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  color: var(--primary-2);
  background:
    radial-gradient(ellipse 100% 70% at 50% 0%, oklch(0.62 0.20 280 / .14), transparent 70%),
    var(--surface);
  border: 1px solid var(--line);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 1px 0 oklch(1 0 0 / .6) inset,
    0 10px 24px -10px oklch(0.62 0.20 280 / .25);
  margin-bottom: 22px;
  transition: all .4s cubic-bezier(.2,.7,.2,1);
}

[data-theme="dark"] .method-icon {
  box-shadow:
    0 1px 0 oklch(1 0 0 / .08) inset,
    0 10px 24px -10px oklch(0 0 0 / .5);
}

.method-step:hover .method-icon {
  background:
    radial-gradient(circle at 30% 25%, oklch(1 0 0 / .35), transparent 55%),
    linear-gradient(135deg, var(--primary-2), var(--primary-deep));
  border-color: transparent;
  color: oklch(0.98 0 0);
  box-shadow:
    0 1px 0 oklch(1 0 0 / .35) inset,
    0 16px 32px -8px var(--glow);
  transform: translateY(-4px);
}

.method-icon svg {
  width: 30px;
  height: 30px;
}

/* ── Texte ───────────────────────────────────────────────── */
.method-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  color: var(--fg);
}

.method-desc {
  font-size: 13.5px;
  color: var(--fg-soft);
  line-height: 1.6;
  margin: 0;
  max-width: 28ch;
}

.method-cta {
  display: flex;
  justify-content: center;
  margin-top: 64px;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 980px) {
  .method-steps { grid-template-columns: repeat(2, 1fr); gap: 56px 24px; margin-top: 24px; }
  .method-line { display: none; }
  .method-num { margin-bottom: 20px; }
}

@media (max-width: 560px) {
  .method-steps { grid-template-columns: 1fr; gap: 48px; }
}

/* ─────────────────────────────── COMPETENCES ─────────────────────────────── */
.comp-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px}
@media (max-width:880px){ .comp-grid{grid-template-columns:1fr} }
.comp-card{
  padding:32px; border-radius:24px;
  background: var(--surface); border:1px solid var(--line);
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow-glass);
}
.comp-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  padding:5px 12px; border-radius:999px;
  background: oklch(0.62 0.21 280 / .14); border:1px solid oklch(0.62 0.21 280 / .35);
  font-family:"JetBrains Mono", monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  color: var(--primary-2);
  margin-bottom:18px;
}
:root .comp-eyebrow{background: oklch(0.52 0.22 280 / .10); color: var(--primary-deep)}
.comp-card h3{font-size:22px; font-weight:600; letter-spacing:-0.02em; margin: 0 0 24px; line-height:1.25}
.comp-tags{display:flex; flex-wrap:wrap; gap:10px}
.comp-tag{
  padding:9px 16px; border-radius:999px;
  background: var(--bg-3); border:1px solid var(--line);
  font-size:13.5px; color:var(--fg); font-weight:500;
  transition: all .25s; cursor:default;
}
.comp-tag:hover{background: oklch(0.62 0.21 280 / .12); border-color: var(--primary); transform: translateY(-1px)}

/* ─────────────────────────────── REALISATIONS ─────────────────────────────── */
.proj-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:20px}
@media (max-width:980px){ .proj-grid{grid-template-columns:1fr 1fr} }
@media (max-width:660px){ .proj-grid{grid-template-columns:1fr} }
.proj{
  padding:28px; border-radius:22px; position:relative; overflow:hidden;
  background: var(--surface); border:1px solid var(--line);
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow-glass);
  display:flex; flex-direction:column; gap:18px;
  transition: transform .35s, border-color .25s;
}
.proj:hover{transform: translateY(-4px); border-color: var(--line-2)}
.proj::before{content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(ellipse 100% 60% at 50% 0%, oklch(1 0 0 / .04), transparent 60%)}
.proj-head{display:flex; justify-content:space-between; align-items:center; gap:14px}
.proj-cat{
  padding: 5px 11px; border-radius:6px;
  font-family:"JetBrains Mono",monospace; font-size:10px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  background: oklch(0.62 0.21 280 / .18); color: var(--primary-2); border:1px solid oklch(0.62 0.21 280 / .35);
}
:root .proj-cat{background: oklch(0.52 0.22 280 / .10); color: var(--primary-deep)}
.proj-status{
  padding:5px 11px; border-radius:6px;
  font-family:"JetBrains Mono",monospace; font-size:10px; font-weight:600;
  letter-spacing:.10em; text-transform:capitalize;
}
.proj-status.done{background: oklch(0.70 0.18 145 / .15); color: var(--green); border:1px solid oklch(0.70 0.18 145 / .35)}
.proj-title{font-size:20px; font-weight:600; letter-spacing:-0.02em; margin:0; line-height:1.2}
.proj-desc{font-size:13.5px; color:var(--fg-soft); line-height:1.55; margin:0}

/* ─────────────────────────────── TEMOIGNAGES ─────────────────────────────── */
.testi-empty{
  padding:48px 32px; border-radius:28px;
  background: var(--surface); border: 1px dashed var(--line-2);
  backdrop-filter: blur(20px);
  text-align:center; display:flex; flex-direction:column; align-items:center; gap:18px;
}
.testi-empty p{margin:0; color: var(--fg-soft); font-size:15px}
.testi-empty .btn-primary{display:inline-flex}

.review-form{
  margin-top: 28px; padding: 36px; border-radius:28px;
  background: var(--surface); border:1px solid var(--line);
  backdrop-filter: blur(22px);
  box-shadow: var(--shadow-glass);
  display:none;
}
.review-form.open{display:block}
.stars-row{display:flex; align-items:center; gap:12px; margin-bottom: 24px}
.stars{display:inline-flex; gap:4px}
.star{
  width:32px; height:32px; cursor:pointer; color: var(--bg-3);
  transition: color .2s, transform .2s;
}
.star.on{color: var(--orange)}
.star:hover{transform: scale(1.1)}
.review-row{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media (max-width:560px){ .review-row{grid-template-columns:1fr} }
.review-form label{display:block; font-size:14px; font-weight:600; margin: 0 0 8px}
.review-form input, .review-form textarea{
  width:100%; padding:14px 16px; border-radius:12px;
  background: var(--bg-3); border:1px solid var(--line); color:var(--fg);
  font-family:inherit; font-size:14px; outline:none;
  transition: border-color .2s, background .2s;
}
.review-form textarea{resize:vertical; min-height: 110px; line-height:1.5}
.review-form input:focus, .review-form textarea:focus{border-color: var(--primary); background: var(--bg-2)}
.review-form .form-row{margin-bottom: 18px}

/* ─────────────────────────────── TARIFS ─────────────────────────────── */
.pricing{display:grid; grid-template-columns: repeat(3, 1fr); gap:20px}
@media (max-width:980px){ .pricing{grid-template-columns:1fr} }
.pack{
  padding:36px 32px 32px; border-radius:28px;
  background: var(--surface); border:1px solid var(--line);
  backdrop-filter: blur(22px);
  box-shadow: var(--shadow-glass);
  position:relative; display:flex; flex-direction:column; gap:20px;
  transition: transform .3s, border-color .3s;
}
.pack:hover{transform: translateY(-4px)}
.pack-featured{
  border:1px solid var(--primary);
  background:
    linear-gradient(180deg, oklch(0.62 0.21 280 / .12), transparent 40%),
    var(--surface);
  box-shadow: var(--shadow-glass), 0 30px 80px -20px var(--glow);
}
.pack-badge-top{position:absolute; top: 22px; right: 22px; padding: 4px 10px; border-radius:999px; background: linear-gradient(135deg, var(--primary-2), var(--primary)); color: oklch(0.98 0 0); font-family:"JetBrains Mono",monospace; font-size:9.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; box-shadow: 0 6px 14px -4px var(--glow)}
.pack-name{font-size:14px; color:var(--fg-soft); display:flex; justify-content:space-between; align-items:center}
.pack-tier{font-size:30px; font-weight:700; letter-spacing:-0.025em; line-height:1; margin: 4px 0 0}
.pack-from{font-family:"JetBrains Mono",monospace; font-size:10px; color:var(--fg-mute); letter-spacing:.14em; text-transform:uppercase; display:block; margin-bottom: 8px}
.pack-price{font-size:60px; font-weight:700; letter-spacing:-0.04em; line-height:1; display:flex; align-items:baseline; margin-top: 8px}
.pack-price .cur{font-size:24px; color: var(--fg-mute); margin-right:4px; font-weight:400}
.pack-price .ht{font-family:"JetBrains Mono",monospace; font-size:11px; color: var(--fg-mute); margin-left:10px; letter-spacing:.14em; font-weight:500}
.pack-desc{font-size:13.5px; color:var(--fg-soft); line-height:1.55; padding-bottom:20px; border-bottom:1px solid var(--line); margin:0}
.pack-list{display:flex; flex-direction:column; gap:11px; padding:0; margin:0; list-style:none; flex:1}
.pack-list li{display:flex; gap:10px; font-size:13.5px; color:var(--fg-soft); line-height:1.4}
.pack-list li svg{width:18px; height:18px; flex:none; margin-top:1px}
.pack-list .check{width:20px; height:20px; border-radius:50%; background: oklch(0.70 0.18 145 / .20); display:grid; place-items:center; flex:none; color: var(--green); margin-top:1px}
.pack-list .check svg{width:11px; height:11px; margin-top:0}
.pack-cta{
  display:flex; justify-content:center; align-items:center; gap:10px;
  padding:14px; border-radius:14px; text-decoration:none;
  background: var(--bg-3); border:1px solid var(--line); color: var(--fg);
  font-size:14px; font-weight:600;
  transition: all .25s;
}
.pack-cta:hover{background: var(--bg-2); border-color: var(--line-2)}
.pack-featured .pack-cta{
  background: linear-gradient(180deg, var(--primary-2), var(--primary));
  color: oklch(0.98 0 0); border-color: transparent;
  box-shadow: 0 1px 0 oklch(1 0 0 / .3) inset, 0 8px 22px -6px var(--glow);
}

/* ─────────────────────────────── CONTACT ─────────────────────────────── */
.contact-block{position:relative; border-radius:36px; overflow:hidden; padding:72px 56px; background: transparent}
@media (max-width:720px){ .contact-block{padding: 44px 24px} }
.contact-inner{display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:center}
@media (max-width:980px){ .contact-inner{grid-template-columns:1fr} }
.contact-title{font-size: clamp(40px, 5vw, 68px); font-weight:700; letter-spacing:-0.04em; line-height:.95; margin:0}
.contact-title em{font-family:"Instrument Serif", serif; font-style:italic; font-weight:400; color: var(--primary-2)}
.contact-lede{font-size:15px; color:var(--fg-soft); line-height:1.55; margin: 22px 0 28px; max-width: 46ch}
.contact-buttons{display:flex; flex-direction:column; gap:10px; margin-top: 28px}
.contact-link{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding: 16px 20px; border-radius:14px;
  background: var(--surface); border:1px solid var(--line); color:var(--fg);
  text-decoration:none; transition: all .25s;
}
.contact-link:hover{background: var(--surface-2); border-color: var(--line-2); transform: translateX(4px)}
.contact-link .l{display:flex; gap:12px; align-items:center}
.contact-link svg.icn{width:18px; height:18px; color: var(--primary-2)}
.contact-link .v{font-size:14px; font-weight:500}
.contact-link .arr{color: var(--fg-mute)}

/* Carte blanche solide pour le formulaire */
.contact-form{
  display:flex; flex-direction:column; gap:14px;
  padding:32px;
  border-radius:24px;
  background: #ffffff;
  border: 1px solid oklch(0 0 0 / .08);
  box-shadow: 0 8px 40px oklch(0 0 0 / .10), 0 1px 0 oklch(1 0 0 / .8) inset;
}
:root[data-theme="dark"] .contact-form{
  background: oklch(0.20 0.030 280);
  border-color: oklch(1 0 0 / .10);
  box-shadow: 0 8px 40px oklch(0 0 0 / .4);
}
.field{display:flex; flex-direction:column; gap:6px}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:560px){ .field-row{grid-template-columns:1fr} }
.field label{font-family:"JetBrains Mono", monospace; font-size:11px; color:#6b7280; letter-spacing:.14em; text-transform:uppercase; font-weight:500}
:root[data-theme="dark"] .field label{color: var(--fg-mute)}
.field input, .field textarea, .field select{
  width:100%; padding:14px 16px; border-radius:12px;
  background: #f3f4f6; border:1px solid transparent; color:#111827;
  font-family:inherit; font-size:14px; outline:none;
  transition: border-color .2s, background .2s;
}
:root[data-theme="dark"] .field input,
:root[data-theme="dark"] .field textarea,
:root[data-theme="dark"] .field select{
  background: var(--bg-3); border-color: var(--line); color: var(--fg);
}
.field textarea{resize:vertical; min-height:100px}
.field input:focus, .field textarea:focus, .field select:focus{
  border-color: var(--primary); background: #fff;
  box-shadow: 0 0 0 3px oklch(0.52 0.22 280 / .15);
}
:root[data-theme="dark"] .field input:focus,
:root[data-theme="dark"] .field textarea:focus,
:root[data-theme="dark"] .field select:focus{background: var(--bg-2)}
.form-cta{width:100%; justify-content:center; padding:16px; font-size:15px}
.form-success{display:none; align-items:center; gap:10px; padding:14px 16px; border-radius:12px; background: oklch(0.55 0.14 145 / .15); border:1px solid oklch(0.7 0.18 145 / .4); color: oklch(0.85 0.14 145); font-size:13.5px}
.form-success.show{display:flex}

/* ─────────────────────────────── FOOTER ─────────────────────────────── */
.footer{padding: 80px 0 40px; border-top:1px solid var(--line); margin-top:120px}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:48px; align-items:start}
@media (max-width:720px){ .footer-grid{grid-template-columns:1fr 1fr} }
.footer-brand{display:flex; align-items:center; gap:12px; margin-bottom:18px}
.footer-tag{font-size:14px; color:var(--fg-soft); max-width: 38ch; line-height:1.5; margin: 0 0 22px}
.footer h4{font-family:"JetBrains Mono", monospace; font-size:11px; color:var(--fg-mute); letter-spacing:.14em; text-transform:uppercase; margin:0 0 18px; font-weight:500}
.footer ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
.footer a{color:var(--fg-soft); text-decoration:none; font-size:14px; transition:color .2s}
.footer a:hover{color:var(--fg)}
.footer .socials{display:flex; gap:10px; margin-top:14px}
.footer .socials a{
  width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
  background: var(--surface-2); border:1px solid var(--line);
  transition: all .25s;
}
.footer .socials a:hover{border-color: var(--primary); color: var(--primary-2); transform: translateY(-2px)}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; margin-top:60px; padding-top:24px; border-top:1px solid var(--line); font-family:"JetBrains Mono", monospace; font-size:11px; color:var(--fg-mute); letter-spacing:.12em; flex-wrap:wrap; gap:10px}

/* ─────────────────────────────── reveal ─────────────────────────────── */
.reveal{opacity:0; transform: translateY(22px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}
.reveal-stagger > *{opacity:0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal-stagger.in > *{opacity:1; transform:none}
.reveal-stagger.in > *:nth-child(2){transition-delay:.06s}
.reveal-stagger.in > *:nth-child(3){transition-delay:.12s}
.reveal-stagger.in > *:nth-child(4){transition-delay:.18s}
.reveal-stagger.in > *:nth-child(5){transition-delay:.24s}
.reveal-stagger.in > *:nth-child(6){transition-delay:.30s}


/* ── Theme toggle dark override (post-sed fix) ──────────────── */
:root[data-theme="dark"] .theme-toggle .sun{opacity:0; transform: scale(.6) rotate(-90deg)}
:root[data-theme="dark"] .theme-toggle .moon{opacity:1; transform:none}

/* ── Skip link (a11y, visible only on focus) ────────────────── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 10px 16px;
  background: var(--fg);
  color: var(--bg);
  border-radius: 0 0 8px 0;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ── Scroll progress bar (preserved from existing JS) ───────── */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--primary-2), var(--primary-deep));
  z-index: 200;
  box-shadow: 0 0 10px var(--glow);
  transition: width 0.1s linear;
}

/* ── Hero Hook (splash video + giant title) ──────────────────── */
.hero-hook {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  isolation: isolate;
  margin-top: -86px; /* compensate for sticky nav padding-top:18px + height */
  padding-top: 86px;
}

.hero-splash-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-hook-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, oklch(0 0 0 / .25) 0%, oklch(0 0 0 / .45) 60%, oklch(0 0 0 / .65) 100%),
    radial-gradient(ellipse 80% 60% at 50% 50%, transparent 0%, oklch(0 0 0 / .35) 100%);
}

:root[data-theme="dark"] .hero-hook-overlay {
  background:
    linear-gradient(180deg, oklch(0 0 0 / .35) 0%, oklch(0 0 0 / .55) 60%, oklch(0 0 0 / .80) 100%);
}

.hero-hook-content {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding-top: 40px;
  padding-bottom: 120px;
  text-align: center;
}

.hero-hook-kicker {
  display: inline-flex;
  align-self: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: oklch(1 0 0 / .82);
  padding: 8px 16px;
  border-radius: 999px;
  background: oklch(1 0 0 / .08);
  border: 1px solid oklch(1 0 0 / .18);
  backdrop-filter: blur(10px);
}

.hero-hook-title {
  font-family: "Geist", sans-serif;
  font-weight: 800;
  font-size: clamp(44px, 7.5vw, 124px);
  line-height: 0.92;
  letter-spacing: -0.045em;
  margin: 0;
  text-transform: uppercase;
  max-width: 1280px;
}

.hero-hook-title .line-white,
.hero-hook-title .line-accent {
  display: block;
}

.hero-hook-title .line-white {
  color: oklch(0.99 0 0);
  text-shadow: 0 4px 32px oklch(0 0 0 / .35);
}

.hero-hook-title .line-accent {
  background: linear-gradient(135deg, var(--primary-2), var(--primary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 4px 32px oklch(0.52 0.22 280 / .25);
  margin-top: 18px;
}

.hero-hook-arrow {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: oklch(1 0 0 / .85);
  background: oklch(1 0 0 / .08);
  border: 1px solid oklch(1 0 0 / .25);
  border-radius: 50%;
  backdrop-filter: blur(10px);
  text-decoration: none;
  animation: hero-arrow-bob 2s ease-in-out infinite;
  transition: transform .25s, background .25s, border-color .25s;
}

.hero-hook-arrow:hover {
  background: oklch(1 0 0 / .15);
  border-color: oklch(1 0 0 / .45);
  transform: translateX(-50%) translateY(-2px);
}

@keyframes hero-arrow-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(6px); }
}

@media (max-width: 720px) {
  .hero-hook-content { padding-bottom: 100px; gap: 24px; }
  .hero-hook-kicker { font-size: 10.5px; padding: 6px 12px; letter-spacing: 0.18em; }
  .hero-hook-title .line-accent { margin-top: 12px; }
}

/* nav doit garder son z-index au-dessus du splash */
.nav { z-index: 100; }

/* ── Stars as buttons (override v1 .star which targets SVG) ─── */
.stars .star.star-btn {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  color: var(--bg-3);
  transition: color .2s, transform .2s;
}
.stars .star.star-btn svg {
  width: 28px;
  height: 28px;
  display: block;
}
.stars .star.star-btn.on,
.stars .star.star-btn.active { color: var(--orange); }
.stars .star.star-btn:hover { transform: scale(1.1); }

/* ── Testimonials marquee (continuous loop) ───────────────── */
.testi-marquee {
  position: relative;
  width: 100%;
  margin-top: 32px;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  padding: 12px 0;
}

.testi-marquee-track {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: testi-marquee-scroll 22s linear infinite;
}

@keyframes testi-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.testi-marquee:hover .testi-marquee-track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .testi-marquee-track { animation: none; }
}

/* ── Card (utilisée dans le marquee) ─────────────────────── */
.testi-card {
  position: relative;
  flex: 0 0 420px;
  max-width: 420px;
  padding: 32px 28px 26px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow:
    0 1px 0 oklch(1 0 0 / .6) inset,
    0 12px 32px -12px oklch(0.62 0.20 280 / .18);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform .3s, box-shadow .3s;
}

[data-theme="dark"] .testi-card {
  box-shadow:
    0 1px 0 oklch(1 0 0 / .08) inset,
    0 12px 32px -12px oklch(0 0 0 / .5);
}

.testi-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 1px 0 oklch(1 0 0 / .6) inset,
    0 18px 42px -10px var(--glow);
}

@media (max-width: 720px) {
  .testi-card { flex-basis: 88vw; max-width: 88vw; }
}

/* Card interior elements */
.testi-quote {
  position: absolute;
  top: 18px;
  right: 22px;
  color: var(--primary-2);
  opacity: 0.18;
  pointer-events: none;
}
.testi-quote svg {
  width: 38px;
  height: 38px;
  transform: rotate(180deg);
}

.testi-stars {
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--orange);
}

.testi-text {
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg);
  margin: 0;
  min-height: 4.5em;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.testi-divider {
  height: 1px;
  background: var(--line);
  margin: 4px 0;
}

.testi-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.testi-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--primary-2), var(--primary-deep));
  color: oklch(0.98 0 0);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 14px -4px var(--glow);
  flex-shrink: 0;
}

.testi-meta { display: flex; flex-direction: column; line-height: 1.3; }
.testi-name { font-weight: 600; font-size: 14.5px; color: var(--fg); }
.testi-role { font-size: 12.5px; color: var(--fg-mute); margin-top: 2px; }

/* Empty state auto-toggle */
#testimonials-slider[hidden] { display: none; }


/* ── Marquee logos défilants (apps) ──────────────────────────── */
.logos-marquee {
  margin: 24px 0 0;
  padding: 22px 0;
  border-block: 1px solid var(--line);
  background: var(--surface);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  position: relative;
  z-index: 2;
}

.logos-marquee-track {
  display: flex;
  gap: 14px;
  animation: logos-scroll 45s linear infinite;
  width: max-content;
}

@keyframes logos-scroll {
  to { transform: translateX(-50%); }
}

.logo-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 12px;
  border-radius: 14px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--fg);
  font-weight: 500;
  white-space: nowrap;
  flex: none;
  transition: transform .25s, border-color .25s;
}

.logo-pill:hover {
  transform: translateY(-2px);
  border-color: var(--line-2);
}

.logo-pill img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .logos-marquee-track { animation: none; }
}

/* ── Hero portrait (photo Walid à la place du mockup) ────────── */
.hero-portrait {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin-left: auto;
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--primary-2), var(--primary-deep));
  box-shadow:
    0 1px 0 oklch(1 0 0 / .15) inset,
    0 0 0 1px var(--line-2),
    0 30px 80px -20px var(--glow);
  aspect-ratio: 4 / 5;
  transform: rotate(-1deg);
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}

.hero-portrait:hover {
  transform: rotate(0deg) translateY(-4px);
}

.hero-portrait picture,
.hero-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* Floating cards posées AU-DESSUS de la photo */
.hero-portrait + .fc-small {
  z-index: 2;
}

/* ═══════════════════════════════════════════════════════════
   Self-hosted fonts (RGPD-safe, downloaded from Google Fonts
   under SIL Open Font License 1.1)
   ═══════════════════════════════════════════════════════════ */

/* geist 300 normal - latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(assets/fonts/geist-300-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* geist 300 normal - latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(assets/fonts/geist-300-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* geist 400 normal - latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/geist-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* geist 400 normal - latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/geist-400-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* geist 500 normal - latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/geist-500-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* geist 500 normal - latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/geist-500-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* geist 600 normal - latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/geist-600-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* geist 600 normal - latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/geist-600-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* geist 700 normal - latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/geist-700-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* geist 700 normal - latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/geist-700-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* geist 800 normal - latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/fonts/geist-800-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* geist 800 normal - latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/fonts/geist-800-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* geist 900 normal - latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(assets/fonts/geist-900-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* geist 900 normal - latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(assets/fonts/geist-900-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* instrumentserif 400 italic - latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/instrumentserif-400-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* instrumentserif 400 italic - latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/instrumentserif-400-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* instrumentserif 400 normal - latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/instrumentserif-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* instrumentserif 400 normal - latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/instrumentserif-400-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* jetbrainsmono 400 normal - latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/jetbrainsmono-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* jetbrainsmono 400 normal - latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/jetbrainsmono-400-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* jetbrainsmono 500 normal - latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/jetbrainsmono-500-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* jetbrainsmono 500 normal - latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/jetbrainsmono-500-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ════════════════════════════════════════════════════════════
   RESPONSIVE — Menu mobile + ajustements globaux
   ════════════════════════════════════════════════════════════ */

/* ── Burger button (caché desktop, visible mobile) ────────── */
.nav-burger {
  display: none;
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--line);
  cursor: pointer;
  padding: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  transition: background .2s;
}
.nav-burger:hover { background: var(--bg-3); }
.nav-burger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--fg);
  border-radius: 999px;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), opacity .2s;
}
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Menu mobile (caché desktop) ──────────────────────────── */
.nav-mobile {
  display: none;
  flex-direction: column;
  gap: 4px;
  margin-top: 12px;
  padding: 16px;
  border-radius: 24px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  box-shadow: var(--shadow-glass);
  animation: navMobileSlide .3s cubic-bezier(.2,.7,.2,1);
}
.nav-mobile.open { display: flex; }
@keyframes navMobileSlide {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nav-mobile-link {
  padding: 14px 16px;
  border-radius: 12px;
  color: var(--fg);
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  transition: background .2s, color .2s;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.nav-mobile-link:hover {
  background: var(--bg-3);
  color: var(--primary-2);
}
.nav-mobile-link--cta {
  margin-top: 8px;
  background: linear-gradient(180deg, var(--primary-2), var(--primary-deep));
  color: #ffffff;
  justify-content: center;
  font-weight: 700;
  box-shadow: 0 8px 22px -6px var(--glow);
}
.nav-mobile-link--cta:hover { color: #ffffff; opacity: .92; }

/* ── BREAKPOINT 1100px — Active le burger ─────────────────── */
@media (max-width: 1100px) {
  .nav-burger { display: inline-flex; }
  .nav-links { display: none; }
}

/* ── BREAKPOINT 720px — Adaptations tablette ──────────────── */
@media (max-width: 720px) {
  /* Nav : cache le CTA "Contact" (déjà dans le menu mobile) */
  .nav-inner .cta-pill { display: none; }
  .nav-inner { padding: 8px 12px; }

  /* Hero hook : titre plus compact */
  .hero-hook-title {
    font-size: clamp(36px, 9vw, 64px) !important;
    line-height: 0.95;
  }
  .hero-hook-content { gap: 18px; padding: 100px 16px 80px; }
  .hero-hook-kicker { font-size: 11px; }

  /* Hero sub : empile, photo plus petite */
  .hero-grid { grid-template-columns: 1fr !important; gap: 32px; }
  .headline { font-size: clamp(40px, 9vw, 64px) !important; }
  .hero-right { min-height: 0; }
  .hero-portrait { max-width: 340px; margin: 0 auto; }
  .fc-small { position: relative !important; right: auto !important; left: auto !important; top: auto !important; transform: none !important; width: 100% !important; max-width: 280px; margin: 12px auto; }
  .hero-meta { flex-wrap: wrap; gap: 10px; }
  .crumb { font-size: 10px; }

  /* Hero stats : empile en colonne */
  .hero-stats { grid-template-columns: 1fr; gap: 10px; }

  /* CTAs hero : empile + width 100% */
  .hero-ctas { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-ctas .btn-primary,
  .hero-ctas .btn-ghost { width: 100%; justify-content: center; }

  /* Section heads : empile titre + meta */
  .section-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .section-meta { text-align: left; max-width: 100%; }
  .section-title { font-size: clamp(32px, 8vw, 48px) !important; }

  /* Méthode : ligne cachée + cards en colonne */
  .method-line { display: none; }
  .method-steps { grid-template-columns: 1fr !important; gap: 40px; }
  .method-num { margin-bottom: 16px; }

  /* Réalisations : 1 col */
  .proj-grid { grid-template-columns: 1fr !important; }

  /* Compétences : 1 col */
  .comp-grid { grid-template-columns: 1fr !important; }

  /* Tarifs : 1 col */
  .pricing { grid-template-columns: 1fr !important; gap: 16px; }
  .pack { padding: 28px 24px; }

  /* Contact : 1 col + form padding */
  .contact-block { padding: 36px 20px !important; border-radius: 24px; }
  .contact-inner { grid-template-columns: 1fr !important; gap: 32px; }
  .contact-title { font-size: clamp(32px, 8vw, 48px) !important; }
  .contact-form { padding: 24px 18px !important; }

  /* Footer : empile */
  .footer-grid { grid-template-columns: 1fr !important; gap: 32px; text-align: left; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }

  /* Touch targets : tous les boutons/liens à 44px min */
  button, .btn-primary, .btn-ghost, .nav-link, .contact-link, .pack-cta {
    min-height: 44px;
  }

  /* Inputs : taille tactile */
  input, textarea, select { font-size: 16px !important; } /* évite zoom iOS */
}

/* ── BREAKPOINT 480px — iPhone SE et petits écrans ─────────── */
@media (max-width: 480px) {
  .wrap { padding: 0 16px; }
  .nav-inner { padding: 6px 10px; }
  .brand-text .name { font-size: 15px; }
  .brand-text .tag { font-size: 7px; }
  .brand-mark { width: 38px; height: 38px; }

  .hero-hook-title { font-size: clamp(28px, 11vw, 44px) !important; }
  .hero-hook-kicker { padding: 6px 12px; font-size: 10px; letter-spacing: 0.18em; }

  .headline { font-size: clamp(34px, 11vw, 50px) !important; }
  .hero-lede { font-size: 15px; }

  .stat { padding: 14px 14px 12px; }
  .stat-num { font-size: 18px; }

  .pack-tier { font-size: 24px; }
  .pack-price { font-size: 44px; }

  .contact-title { font-size: clamp(28px, 9vw, 40px) !important; }
}

/* ── BREAKPOINT landscape mobile (low height) ──────────────── */
@media (max-height: 500px) and (orientation: landscape) {
  .hero-hook { min-height: 100vh; }
  .hero-hook-title { font-size: clamp(24px, 5vw, 48px) !important; }
  .hero-hook-content { padding: 80px 20px 60px; }
}