/* =====================================================================
   ROSMAWEB — Feuille de style principale
   Thème : futuriste, bleu électrique / chrome, mode nuit & jour
   ===================================================================== */

/* ---------- POLICES (auto-hébergées : aucune requête externe, RGPD-safe) ---------- */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/inter-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;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('../fonts/spacegrotesk-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('../fonts/spacegrotesk-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;}

/* ---------- JETONS DE DESIGN ---------- */
:root{
  --blue:#1B6BFF;
  --blue-bright:#3B8CFF;
  --blue-deep:#0A3FCC;
  --cyan:#22D3EE;
  --violet:#7C5CFF;
  --chrome:#DCE6F5;

  --bg:#05070E;
  --bg-2:#080C18;
  --bg-3:#0B1122;
  --surface:rgba(255,255,255,.035);
  --surface-2:rgba(255,255,255,.06);
  --border:rgba(120,170,255,.14);
  --border-strong:rgba(120,170,255,.28);
  --text:#E9EFFC;
  --text-2:#B8C6E0;
  --muted:#7E8DAB;

  --glow:0 0 0 1px rgba(59,140,255,.18), 0 18px 60px -18px rgba(27,107,255,.55);
  --glow-soft:0 20px 70px -30px rgba(27,107,255,.7);
  --ring:0 0 0 3px rgba(59,140,255,.35);

  --grad-blue:linear-gradient(135deg,var(--blue-bright),var(--blue) 45%,var(--blue-deep));
  --grad-text:linear-gradient(100deg,#FFFFFF 0%,#BBD4FF 40%,var(--blue-bright) 75%,var(--cyan) 100%);

  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-display:'Space Grotesk','Inter',-apple-system,BlinkMacSystemFont,sans-serif;

  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:34px;
  --nav-h:76px;
  --maxw:1220px;
  --ease:cubic-bezier(.22,1,.36,1);
}

[data-theme="light"]{
  --bg:#F4F7FD;
  --bg-2:#FFFFFF;
  --bg-3:#EAF0FB;
  --surface:rgba(10,30,80,.035);
  --surface-2:rgba(10,30,80,.06);
  --border:rgba(10,40,100,.12);
  --border-strong:rgba(27,107,255,.35);
  --text:#080D1C;
  --text-2:#33415C;
  --muted:#5D6B87;
  --chrome:#1B2740;
  --glow:0 0 0 1px rgba(27,107,255,.14), 0 18px 50px -22px rgba(27,107,255,.4);
  --glow-soft:0 20px 60px -32px rgba(27,107,255,.45);
  --grad-text:linear-gradient(100deg,#0A1330 0%,#1B4BCC 45%,var(--blue) 75%,#0E9CBF 100%);
}

/* ---------- BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font);font-size:16.5px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;transition:background .5s var(--ease),color .5s var(--ease);
}
body.no-scroll{overflow:hidden}
img{max-width:100%;display:block;height:auto}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:6px}
::selection{background:var(--blue);color:#fff}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.08;letter-spacing:-.028em;margin:0}
p{margin:0}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:24px}
.section{position:relative;padding:clamp(72px,9vw,132px) 0}
.center{text-align:center}


/* ---------- FOND GLOBAL ---------- */
#particles{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.85}
[data-theme="light"] #particles{opacity:.55}
.bg-aura{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg-aura::before,.bg-aura::after{
  content:"";position:absolute;border-radius:50%;filter:blur(120px);opacity:.5;
}
.bg-aura::before{width:52vw;height:52vw;top:-14vw;left:-10vw;background:radial-gradient(circle,rgba(27,107,255,.55),transparent 68%)}
.bg-aura::after{width:46vw;height:46vw;bottom:-16vw;right:-12vw;background:radial-gradient(circle,rgba(34,211,238,.32),transparent 68%)}
[data-theme="light"] .bg-aura::before{opacity:.35}
[data-theme="light"] .bg-aura::after{opacity:.28}
.grid-floor{
  position:fixed;left:0;right:0;bottom:0;height:38vh;z-index:0;pointer-events:none;opacity:.22;
  background-image:linear-gradient(rgba(59,140,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(59,140,255,.5) 1px,transparent 1px);
  background-size:60px 60px;
  transform:perspective(340px) rotateX(66deg);
  transform-origin:bottom center;
  mask-image:linear-gradient(to top,#000,transparent 82%);
  -webkit-mask-image:linear-gradient(to top,#000,transparent 82%);
  animation:floorScroll 9s linear infinite;
}
@keyframes floorScroll{to{background-position:0 60px,0 0}}
[data-theme="light"] .grid-floor{opacity:.13}
main,header,footer{position:relative;z-index:2}


/* ---------- CADRAGE DU MONOGRAMME ----------
   Le logo fourni contient le monogramme (anneau + RW) EN HAUT et le mot
   « RosmaWeb » en bas. Cette classe recadre uniquement le monogramme,
   par calcul CSS : aucune image supplémentaire n'est nécessaire.
   Pour ajuster : --mark-zoom (taille) et --mark-y (hauteur du centre). */
/* ---------- LE MONOGRAMME ----------
   assets/img/logo-mark.webp est le logo deja detoure : fond transparent,
   monogramme centre, mot « RosmaWeb » ecarte. Il a ete fabrique a partir du
   fichier d'origine par propagation depuis les bords — ce qui est noir ET
   relie au bord est du fond, ce qui est sombre mais enferme dans le logo
   (anneau en ombre, corps du telephone, fenetre de code) est conserve.
   Resultat : aucun filtre a l'affichage, donc texture intacte et zero cout. */
.logo-mark{
  display:block;position:relative;
}
.logo-mark::before{
  content:"";position:absolute;inset:0;
  background:url('../img/logo-mark.webp') center / contain no-repeat;
}

/* ---------- PRÉLOADER ---------- */
#preloader{
  position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  background:var(--bg);transition:opacity .7s var(--ease),visibility .7s;
}
#preloader.done{opacity:0;visibility:hidden}
.pre-inner{display:grid;justify-items:center;gap:22px}
.pre-logo{width:112px;height:112px;animation:preSpin 2.4s var(--ease) infinite}
@keyframes preSpin{0%{transform:rotateY(0) scale(1)}50%{transform:rotateY(180deg) scale(1.06)}100%{transform:rotateY(360deg) scale(1)}}
.pre-bar{width:180px;height:2px;background:var(--surface-2);border-radius:2px;overflow:hidden}
.pre-bar i{display:block;height:100%;width:40%;background:var(--grad-blue);border-radius:2px;animation:preBar 1.1s var(--ease) infinite}
@keyframes preBar{0%{transform:translateX(-110%)}100%{transform:translateX(360%)}}
.pre-text{font-family:var(--font-display);font-size:11px;letter-spacing:.42em;text-transform:uppercase;color:var(--muted)}

/* ---------- NAVIGATION ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:500;
  display:flex;align-items:center;
  transition:height .35s var(--ease),background .35s var(--ease),border-color .35s var(--ease),backdrop-filter .35s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  height:64px;background:color-mix(in srgb,var(--bg) 78%,transparent);
  backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom-color:var(--border);
}
.nav .wrap{display:flex;align-items:center;gap:20px;width:100%}
.brand{display:flex;align-items:center;gap:11px;margin-right:auto;flex-shrink:0}
.brand .logo-mark{width:42px;height:42px;flex-shrink:0;transition:transform .6s var(--ease)}
.brand:hover .logo-mark{transform:rotateY(180deg)}
.brand b{font-family:var(--font-display);font-size:19px;font-weight:600;letter-spacing:-.02em}
.brand b span{background:var(--grad-blue);-webkit-background-clip:text;background-clip:text;color:transparent}

.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{
  position:relative;padding:9px 14px;border-radius:99px;font-size:14.5px;font-weight:500;
  color:var(--text-2);transition:color .25s,background .25s;
}
.nav-links a::after{
  content:"";position:absolute;left:14px;right:14px;bottom:4px;height:1.5px;border-radius:2px;
  background:var(--grad-blue);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);
}
.nav-links a:hover{color:var(--text)}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-links a.active{color:var(--text)}

.nav-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}

/* Interrupteur jour / nuit */
.theme-toggle{
  position:relative;width:56px;height:30px;border-radius:99px;flex-shrink:0;
  background:var(--surface-2);border:1px solid var(--border);
  transition:background .3s,border-color .3s;
}
.theme-toggle .knob{
  position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;
  background:var(--grad-blue);box-shadow:0 0 14px rgba(59,140,255,.7);
  transition:transform .45s var(--ease);
  display:grid;place-items:center;
}
[data-theme="light"] .theme-toggle .knob{transform:translateX(26px)}
.theme-toggle svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round}
.theme-toggle .i-sun{display:none}
[data-theme="light"] .theme-toggle .i-sun{display:block}
[data-theme="light"] .theme-toggle .i-moon{display:none}

/* Bouton */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 24px;border-radius:99px;font-weight:600;font-size:14.5px;letter-spacing:.005em;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s,color .3s,border-color .3s;
  white-space:nowrap;position:relative;overflow:hidden;
}
.btn svg{width:16px;height:16px;flex-shrink:0}
.btn-primary{background:var(--grad-blue);color:#fff;box-shadow:0 10px 30px -12px rgba(27,107,255,.9)}
.btn-primary::before{
  content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.42) 50%,transparent 75%);
  transform:translateX(-120%);transition:transform .75s var(--ease);
}
.btn-primary:hover::before{transform:translateX(120%)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 44px -14px rgba(27,107,255,1)}
.btn-ghost{background:var(--surface);border:1px solid var(--border-strong);color:var(--text)}
.btn-ghost:hover{background:var(--surface-2);transform:translateY(-2px);border-color:var(--blue-bright)}
.btn-lg{padding:16px 30px;font-size:15.5px}

.burger{display:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--border);background:var(--surface);
  flex-direction:column;align-items:center;justify-content:center}
.burger span{display:block;width:18px;height:1.8px;background:var(--text);border-radius:2px;transition:transform .35s var(--ease),opacity .25s}
.burger span+span{margin-top:5px}
.burger.open span:nth-child(1){transform:translateY(6.8px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)}

/* ---------- ÉTIQUETTE / TITRES DE SECTION ---------- */
.tag{
  display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border-radius:99px;
  background:var(--surface);border:1px solid var(--border);
  font-family:var(--font-display);font-size:11.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--text-2);
}
.tag i{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.7)}}

.sec-head{max-width:720px;margin-bottom:clamp(40px,5vw,64px)}
.sec-head.center{margin-inline:auto}
.sec-head h2{font-size:clamp(31px,4.6vw,54px);margin:20px 0 16px}
.sec-head p{color:var(--muted);font-size:17px;line-height:1.7}
.grad{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding-top:calc(var(--nav-h) + 40px);padding-bottom:60px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,70px);align-items:center;width:100%}

.hero h1{font-size:clamp(40px,6.6vw,80px);margin:24px 0 22px}
.hero h1 .line{display:block;overflow:hidden}
.hero h1 .line>span{display:block;animation:riseIn 1s var(--ease) both}
.hero h1 .line:nth-child(2)>span{animation-delay:.1s}
.hero h1 .line:nth-child(3)>span{animation-delay:.2s}
@keyframes riseIn{from{transform:translateY(102%)}to{transform:translateY(0)}}
.hero-sub{color:var(--text-2);font-size:clamp(16px,1.7vw,19px);max-width:520px;line-height:1.72;animation:fadeUp 1s var(--ease) .35s both}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;animation:fadeUp 1s var(--ease) .48s both}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
/* deux pastilles cote a cote en tete du hero : disponibilite et lieu */
.tags-hero{display:flex;flex-wrap:wrap;gap:10px;animation:fadeUp .9s var(--ease) .1s both}
.tag-lieu{text-transform:none;letter-spacing:.02em;font-size:12.5px;color:var(--text-2)}
.tag-lieu svg{width:14px;height:14px;color:var(--blue-bright);flex-shrink:0}

.hero-stats{display:flex;gap:36px;margin-top:52px;flex-wrap:wrap;animation:fadeUp 1s var(--ease) .62s both}
.hero-stats div{display:grid;gap:2px}
.hero-stats b{font-family:var(--font-display);font-size:30px;font-weight:600;letter-spacing:-.03em;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-stats small{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}

/* --- Logo 3D qui tourne sur lui-même --- */
.logo-stage{position:relative;display:grid;place-items:center;perspective:1400px;min-height:min(60vh,520px)}
.logo-orbit{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.logo-orbit i{
  position:absolute;border-radius:50%;border:1px solid var(--border-strong);
}
.logo-orbit i:nth-child(1){width:82%;height:82%;animation:spinZ 26s linear infinite;
  border-style:dashed;border-color:rgba(59,140,255,.28)}
.logo-orbit i:nth-child(2){width:98%;height:98%;animation:spinZ 40s linear reverse infinite;
  border-color:rgba(34,211,238,.16)}
.logo-orbit i:nth-child(3){width:66%;height:66%;
  border-color:transparent;border-top-color:var(--blue-bright);border-right-color:var(--cyan);
  animation:spinZ 12s linear infinite;filter:drop-shadow(0 0 10px rgba(59,140,255,.7))}
@keyframes spinZ{to{transform:rotate(360deg)}}

.logo-3d{
  position:relative;width:min(78%,430px);aspect-ratio:1;transform-style:preserve-3d;
  animation:coinSpin 22s linear infinite;will-change:transform;
}
.logo-3d.paused{animation-play-state:paused}
/* --- Les deux faces du logo ---
   Le logo est une image plate qui tourne sur elle-meme. Deux copies :
   l'une de face, l'autre retournee a 180°. Grace a backface-visibility,
   une seule est visible a la fois — le logo se lit donc correctement des
   deux cotes, sans jamais apparaitre en miroir. */
.logo-3d .face{
  position:absolute;inset:0;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.logo-3d .face.back{transform:rotateY(180deg)}
.logo-halo{
  position:absolute;width:70%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(27,107,255,.55),transparent 66%);
  filter:blur(46px);animation:halo 5s ease-in-out infinite;
}
/* Rotation lente, reguliere et sans fin sur l'axe vertical. */
@keyframes coinSpin{
  from{transform:rotateY(0deg)}
  to  {transform:rotateY(360deg)}
}
@keyframes halo{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.18);opacity:1}}
.logo-caption{
  position:absolute;bottom:6px;font-family:var(--font-display);font-size:10.5px;
  letter-spacing:.36em;text-transform:uppercase;color:var(--muted);
}

.scroll-hint{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  display:grid;justify-items:center;gap:9px;color:var(--muted);
  font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;
  animation:fadeUp 1s var(--ease) 1s both;
}
.scroll-hint b{display:block;width:1px;height:38px;background:linear-gradient(var(--blue-bright),transparent);animation:hint 2.2s ease-in-out infinite}
@keyframes hint{0%,100%{transform:scaleY(.4);opacity:.4;transform-origin:top}50%{transform:scaleY(1);opacity:1;transform-origin:top}}

/* ---------- SÉPARATEUR CIRCUIT ----------
   Un trace facon circuit imprime, ou circulent des impulsions lumineuses.
   Purement decoratif : aucun texte, il laisse respirer apres le hero. */
.circuit{
  border-block:1px solid var(--border);
  background:color-mix(in srgb,var(--bg-2) 70%,transparent);
  overflow:hidden;
}
.circuit svg{display:block;width:100%;height:84px}
.circuit .trace{fill:none;stroke:var(--border-strong);stroke-width:1.2}
.circuit .flux{
  fill:none;stroke:var(--blue-bright);stroke-width:1.8;stroke-linecap:round;
  stroke-dasharray:26 340;
  filter:drop-shadow(0 0 5px rgba(59,140,255,.9));
  animation:flux 5s linear infinite;
}
.circuit .flux.b{stroke:var(--cyan);animation-duration:6.5s;animation-delay:-2s}
.circuit .flux.c{animation-duration:8s;animation-delay:-4s}
@keyframes flux{from{stroke-dashoffset:366}to{stroke-dashoffset:0}}
.circuit .node{fill:var(--blue-bright);animation:pulse 3s ease-in-out infinite}
@media (max-width:700px){
  .circuit svg{height:56px}
}

/* ---------- BANDEAU DÉFILANT ---------- */
.marquee{
  border-block:1px solid var(--border);background:color-mix(in srgb,var(--bg-2) 70%,transparent);
  overflow:hidden;padding:17px 0;backdrop-filter:blur(8px);
}
.marquee-track{display:flex;gap:52px;width:max-content;animation:marq 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.marquee span{
  display:inline-flex;align-items:center;gap:52px;
  font-family:var(--font-display);font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);white-space:nowrap;
}
.marquee span::after{content:"◆";color:var(--blue-bright);font-size:9px}

/* =====================================================================
   CARTES GÉNÉRIQUES
   ===================================================================== */
.card{
  position:relative;padding:30px;border-radius:var(--r-lg);
  background:linear-gradient(160deg,var(--surface),transparent 65%),var(--bg-2);
  border:1px solid var(--border);overflow:hidden;
  transition:transform .5s var(--ease),border-color .4s,box-shadow .5s var(--ease);
}
.card::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .45s;pointer-events:none;
  background:radial-gradient(560px circle at var(--mx,50%) var(--my,50%),rgba(59,140,255,.14),transparent 42%);
}
.card:hover{transform:translateY(-6px);border-color:var(--border-strong);box-shadow:var(--glow-soft)}
.card:hover::before{opacity:1}

/* Services */
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:20px}
.service .ico{
  width:52px;height:52px;border-radius:15px;display:grid;place-items:center;margin-bottom:22px;
  background:var(--grad-blue);box-shadow:0 12px 30px -12px rgba(27,107,255,.9);
  transition:transform .5s var(--ease);
}
.service:hover .ico{transform:rotate(-8deg) scale(1.08)}
.service .ico svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.service h3{font-size:20.5px;margin-bottom:11px}
.service p{color:var(--muted);font-size:15px;line-height:1.68}
.service ul{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px}
.service li{position:relative;padding-left:20px;font-size:14px;color:var(--text-2)}
.service li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:2px;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
.service .num{
  position:absolute;top:20px;right:26px;font-family:var(--font-display);font-size:52px;font-weight:700;
  color:transparent;-webkit-text-stroke:1px var(--border-strong);opacity:.5;line-height:1;
}

/* =====================================================================
   PORTFOLIO
   ===================================================================== */
.filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:34px}
.filters button{
  padding:9px 19px;border-radius:99px;font-size:13.5px;font-weight:500;
  background:var(--surface);border:1px solid var(--border);color:var(--muted);
  transition:all .3s var(--ease);
}
.filters button:hover{color:var(--text);border-color:var(--border-strong)}
.filters button.active{background:var(--grad-blue);color:#fff;border-color:transparent;box-shadow:0 8px 24px -10px rgba(27,107,255,.9)}

.work-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:20px}
.work{
  position:relative;border-radius:var(--r-lg);overflow:hidden;cursor:pointer;
  border:1px solid var(--border);background:var(--bg-2);
  transition:transform .55s var(--ease),border-color .4s,box-shadow .55s var(--ease),opacity .4s;
}
.work:hover{transform:translateY(-7px);border-color:var(--border-strong);box-shadow:var(--glow-soft)}
.work.hide{display:none}
.work-visual{
  position:relative;aspect-ratio:16/11;overflow:hidden;
  background:linear-gradient(150deg,var(--bg-3),var(--bg-2));
  display:grid;place-items:center;
}
.work-visual img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.work:hover .work-visual img{transform:scale(1.06)}
.work-visual .ph{
  position:absolute;inset:0;display:grid;place-items:center;
  background-image:linear-gradient(rgba(59,140,255,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(59,140,255,.14) 1px,transparent 1px);
  background-size:34px 34px;
}
.work-visual .ph span{
  font-family:var(--font-display);font-size:44px;font-weight:700;letter-spacing:-.04em;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.9;
}
.work-visual::after{
  content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(5,7,14,.88),transparent 55%);
}
[data-theme="light"] .work-visual::after{background:linear-gradient(to top,rgba(255,255,255,.9),transparent 55%)}
.work-body{position:relative;padding:20px 22px 24px}
.work-body .meta{display:flex;align-items:center;gap:10px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-bright);margin-bottom:9px}
.work-body .meta em{font-style:normal;color:var(--muted)}
.work-body h3{font-size:20px;margin-bottom:8px}
.work-body p{color:var(--muted);font-size:14.5px;line-height:1.6}
.work-open{
  position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;background:rgba(5,7,14,.6);border:1px solid var(--border-strong);
  backdrop-filter:blur(8px);opacity:0;transform:scale(.8) rotate(-40deg);transition:all .45s var(--ease);z-index:2;
}
.work:hover .work-open{opacity:1;transform:none}
.work-open svg{width:15px;height:15px;stroke:var(--text);fill:none;stroke-width:2;stroke-linecap:round}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:15px}
.chip{padding:5px 11px;border-radius:99px;font-size:11.5px;background:var(--surface-2);border:1px solid var(--border);color:var(--text-2)}
.work-empty{padding:50px;text-align:center;color:var(--muted);grid-column:1/-1;border:1px dashed var(--border);border-radius:var(--r-lg)}

/* Fenêtre projet */
.modal{
  position:fixed;inset:0;z-index:900;display:grid;place-items:center;padding:24px;
  background:rgba(3,5,11,.82);backdrop-filter:blur(14px);
  opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s;
}
.modal.open{opacity:1;visibility:visible}
.modal-box{
  position:relative;width:min(720px,100%);max-height:86vh;overflow-y:auto;border-radius:var(--r-xl);
  background:var(--bg-2);border:1px solid var(--border-strong);box-shadow:var(--glow);
  transform:translateY(26px) scale(.97);transition:transform .5s var(--ease);
}
.modal.open .modal-box{transform:none}
.modal-hero{height:190px;position:relative;display:grid;place-items:center;
  background-image:linear-gradient(rgba(59,140,255,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(59,140,255,.14) 1px,transparent 1px);
  background-size:34px 34px}
.modal-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.modal-hero span{font-family:var(--font-display);font-size:46px;font-weight:700;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.modal-body{padding:30px 34px 34px}
.modal-body .meta{display:flex;align-items:center;gap:10px;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue-bright);margin-bottom:4px}
.modal-body .meta em{font-style:normal;color:var(--muted)}
.modal-body h3{font-size:29px;margin:10px 0 14px}
.modal-body p{color:var(--text-2);line-height:1.75}
.modal-close{
  position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;z-index:3;
  display:grid;place-items:center;background:rgba(5,7,14,.7);border:1px solid var(--border-strong);backdrop-filter:blur(8px);
  transition:transform .35s var(--ease),background .3s;
}
.modal-close:hover{transform:rotate(90deg);background:var(--blue)}
.modal-close svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round}

/* =====================================================================
   PROCESSUS
   ===================================================================== */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;position:relative}
.step{position:relative;padding:28px 24px;border-radius:var(--r-lg);background:var(--bg-2);border:1px solid var(--border);transition:all .45s var(--ease)}
.step:hover{border-color:var(--border-strong);transform:translateY(-5px);box-shadow:var(--glow-soft)}
.step b{
  display:grid;place-items:center;width:44px;height:44px;border-radius:13px;margin-bottom:18px;
  font-family:var(--font-display);font-size:15px;background:var(--surface-2);border:1px solid var(--border-strong);color:var(--blue-bright);
}
.step h3{font-size:18.5px;margin-bottom:9px}
.step p{color:var(--muted);font-size:14.5px;line-height:1.65}
.step::after{
  content:"";position:absolute;top:48px;right:-13px;width:10px;height:1px;background:var(--border-strong);
}
.step:last-child::after{display:none}

/* =====================================================================
   FONDATEUR
   ===================================================================== */
.founder{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,5vw,64px);align-items:center}
.founder-photo{position:relative;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:4/5;
  border:1px solid var(--border-strong);background:linear-gradient(150deg,var(--bg-3),var(--bg-2));box-shadow:var(--glow)}
.founder-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 14%}
.founder-photo .ph{
  position:absolute;inset:0;display:grid;place-items:center;gap:12px;justify-items:center;color:var(--muted);
  background-image:linear-gradient(rgba(59,140,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(59,140,255,.13) 1px,transparent 1px);
  background-size:38px 38px;text-align:center;padding:22px;font-size:13px;
}
.founder-photo .ph svg{width:44px;height:44px;stroke:var(--blue-bright);fill:none;stroke-width:1.4}
.founder-photo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(27,107,255,.22),transparent 55%);
}
.founder-badge{
  position:absolute;left:16px;bottom:16px;right:16px;padding:14px 18px;border-radius:var(--r-md);z-index:2;
  background:linear-gradient(to top,rgba(4,6,13,.92),rgba(4,6,13,.72));
  backdrop-filter:blur(14px);border:1px solid var(--border-strong);
}
[data-theme="light"] .founder-badge{background:rgba(255,255,255,.78)}
.founder-badge b{display:block;font-family:var(--font-display);font-size:17px}
.founder-badge small{color:var(--blue-bright);font-size:12px;letter-spacing:.13em;text-transform:uppercase}
.founder h2{font-size:clamp(28px,4vw,46px);margin:18px 0 20px}
.founder p{color:var(--text-2);line-height:1.78;margin-bottom:16px}
.founder .quote{
  margin-top:26px;padding:20px 24px;border-left:2px solid var(--blue-bright);border-radius:0 var(--r-md) var(--r-md) 0;
  background:var(--surface);font-family:var(--font-display);font-size:17px;color:var(--text);line-height:1.6;
}
.founder-skills{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}

/* =====================================================================
   TARIFS
   ===================================================================== */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:20px;align-items:start}
.plan{position:relative;padding:34px 30px;border-radius:var(--r-lg);background:var(--bg-2);border:1px solid var(--border);transition:all .5s var(--ease)}
.plan:hover{transform:translateY(-6px);border-color:var(--border-strong);box-shadow:var(--glow-soft)}
.plan.best{border-color:var(--blue);box-shadow:var(--glow);background:linear-gradient(165deg,rgba(27,107,255,.1),transparent 55%),var(--bg-2)}
.plan .best-tag{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);padding:5px 15px;border-radius:99px;
  background:var(--grad-blue);color:#fff;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
}
.plan h3{font-size:20px;margin-bottom:6px}
.plan .price{font-family:var(--font-display);font-size:40px;font-weight:600;letter-spacing:-.03em;margin:16px 0 4px}
.plan .price small{font-size:14px;font-weight:400;color:var(--muted);letter-spacing:0}
.plan>p{color:var(--muted);font-size:14.5px}
.plan ul{list-style:none;margin:24px 0;padding:0;display:grid;gap:11px}
.plan li{display:flex;gap:11px;font-size:14.5px;color:var(--text-2);line-height:1.5}
.plan li svg{width:17px;height:17px;flex-shrink:0;margin-top:2px;stroke:var(--cyan);fill:none;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.plan .btn{width:100%}

/* =====================================================================
   FAQ
   ===================================================================== */
.faq{display:grid;gap:12px;max-width:840px;margin-inline:auto}
.faq-item{border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg-2);overflow:hidden;transition:border-color .35s}
.faq-item.open{border-color:var(--border-strong)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 24px;text-align:left;font-family:var(--font-display);font-size:16.5px;font-weight:500}
.faq-q i{flex-shrink:0;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--border-strong);position:relative;transition:transform .4s var(--ease),background .3s}
.faq-q i::before,.faq-q i::after{content:"";position:absolute;background:var(--blue-bright);border-radius:2px}
.faq-q i::before{width:11px;height:1.6px}
.faq-q i::after{width:1.6px;height:11px;transition:transform .4s var(--ease)}
.faq-item.open .faq-q i{transform:rotate(180deg);background:var(--surface-2)}
.faq-item.open .faq-q i::after{transform:scaleY(0)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.faq-a p{padding:0 24px 22px;color:var(--muted);line-height:1.72;font-size:15px}

/* =====================================================================
   CONTACT
   ===================================================================== */
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,4vw,54px);align-items:start}
.contact-info{display:grid;gap:14px;align-content:start}
.info-card{display:flex;gap:15px;align-items:center;padding:19px 21px;border-radius:var(--r-md);background:var(--bg-2);border:1px solid var(--border);transition:all .4s var(--ease)}
.info-card:hover{border-color:var(--border-strong);transform:translateX(4px)}
.info-card .ico{width:42px;height:42px;border-radius:12px;flex-shrink:0;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--border-strong)}
.info-card .ico svg{width:19px;height:19px;stroke:var(--blue-bright);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.info-card small{display:block;font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.info-card b{font-weight:500;font-size:15px;word-break:break-word}

.socials{display:flex;gap:10px;margin-top:6px}
.social{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:var(--bg-2);border:1px solid var(--border);
  color:var(--text-2);
  transition:all .4s var(--ease);
}
.social svg{width:22px;height:22px;stroke-linecap:round;stroke-linejoin:round}
.social:hover{transform:translateY(-4px) rotate(-6deg);border-color:transparent;background:var(--grad-blue);box-shadow:0 12px 28px -10px rgba(27,107,255,.9)}
.social:hover{color:#fff}

.form-card{padding:clamp(24px,3.4vw,38px);border-radius:var(--r-xl);background:var(--bg-2);border:1px solid var(--border);box-shadow:var(--glow)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{position:relative;margin-bottom:16px}
.field label{display:block;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.field label .req{color:var(--blue-bright)}
.field input,.field textarea,.field select{
  width:100%;padding:14px 16px;border-radius:var(--r-sm);font:inherit;font-size:15px;
  background:var(--surface);border:1px solid var(--border);color:var(--text);
  transition:border-color .3s,background .3s,box-shadow .3s;
}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237E8DAB' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:44px;cursor:pointer}
.field textarea{resize:vertical;min-height:130px;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:var(--muted);opacity:.65}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--blue);background:var(--surface-2);box-shadow:0 0 0 3px rgba(27,107,255,.16)}
.field.error input,.field.error textarea,.field.error select{border-color:#FF5C7A;box-shadow:0 0 0 3px rgba(255,92,122,.14)}
.field .msg{display:none;margin-top:7px;font-size:12.5px;color:#FF7A92}
.field.error .msg{display:block}
/* Piège à robots — invisible pour les humains */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;opacity:0}

.consent{display:flex;gap:11px;align-items:flex-start;margin:6px 0 20px;font-size:13px;color:var(--muted);line-height:1.55}
.consent input{width:18px;height:18px;flex-shrink:0;margin-top:2px;accent-color:var(--blue);cursor:pointer}
.consent a{color:var(--blue-bright);text-decoration:underline;text-underline-offset:2px}
.form-note{margin-top:16px;font-size:12.5px;color:var(--muted);display:flex;gap:8px;align-items:center}
.form-note svg{width:14px;height:14px;stroke:var(--cyan);fill:none;stroke-width:2;flex-shrink:0}
.btn.loading{pointer-events:none;opacity:.75}
.btn .spin{display:none;width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spinner .7s linear infinite}
.btn.loading .spin{display:block}
.btn.loading .lbl,.btn.loading svg{display:none}
@keyframes spinner{to{transform:rotate(360deg)}}

.form-done{display:none;text-align:center;padding:26px 8px}
.form-done.show{display:block;animation:fadeUp .6s var(--ease)}
.form-done .ok{width:66px;height:66px;border-radius:50%;margin:0 auto 20px;display:grid;place-items:center;background:var(--grad-blue);box-shadow:0 0 44px rgba(27,107,255,.75)}
.form-done .ok svg{width:30px;height:30px;stroke:#fff;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.form-done h3{font-size:24px;margin-bottom:10px}
.form-done p{color:var(--muted)}

/* =====================================================================
   PIED DE PAGE
   ===================================================================== */
.footer{border-top:1px solid var(--border);background:color-mix(in srgb,var(--bg-2) 65%,transparent);margin-top:40px}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:40px;padding:60px 0 44px}
.footer .brand{margin-bottom:16px}
.footer-about p{color:var(--muted);font-size:14.5px;line-height:1.7;max-width:300px}
.footer h4{font-family:var(--font-display);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--text);margin-bottom:18px}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.footer ul a{color:var(--muted);font-size:14.5px;transition:color .25s,padding-left .25s}
.footer ul a:hover{color:var(--blue-bright);padding-left:5px}
.footer-bottom{
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;
  padding:22px 0 78px;border-top:1px solid var(--border);font-size:13px;color:var(--muted);
}
.footer-bottom a:hover{color:var(--blue-bright)}
.footer-legal{display:flex;flex-wrap:wrap;gap:18px}

.to-top{
  position:fixed;right:22px;bottom:22px;z-index:400;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;background:var(--grad-blue);color:#fff;
  box-shadow:0 12px 30px -10px rgba(27,107,255,.95);
  opacity:0;visibility:hidden;transform:translateY(14px);transition:all .45s var(--ease);
}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{transform:translateY(-4px)}
.to-top svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- BANNIÈRE CTA ---------- */
.cta-band{
  position:relative;overflow:hidden;border-radius:var(--r-xl);padding:clamp(38px,5.5vw,68px);text-align:center;
  border:1px solid var(--border-strong);
  background:linear-gradient(150deg,rgba(27,107,255,.2),rgba(34,211,238,.07) 55%,transparent),var(--bg-2);
  box-shadow:var(--glow);
}
.cta-band::before{
  content:"";position:absolute;inset:0;opacity:.35;
  background-image:linear-gradient(rgba(59,140,255,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(59,140,255,.2) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(circle at 50% 50%,#000,transparent 72%);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000,transparent 72%);
}
.cta-band>*{position:relative}
.cta-band h2{font-size:clamp(28px,4.4vw,48px);margin:18px 0 16px}
.cta-band p{color:var(--text-2);max-width:520px;margin:0 auto 30px;line-height:1.7}

/* ---------- PAGES LÉGALES ---------- */
.legal-page{padding-top:calc(var(--nav-h) + 56px)}
.legal-content{max-width:800px;margin-inline:auto}
.legal-content h1{font-size:clamp(32px,5vw,50px);margin-bottom:12px}
.legal-content .updated{color:var(--muted);font-size:13.5px;margin-bottom:44px}
.legal-content h2{font-size:22px;margin:42px 0 14px;padding-top:20px;border-top:1px solid var(--border)}
.legal-content h3{font-size:17px;margin:26px 0 10px;color:var(--blue-bright)}
.legal-content p,.legal-content li{color:var(--text-2);line-height:1.8;font-size:15.5px}
.legal-content p{margin-bottom:14px}
.legal-content ul{padding-left:22px;margin-bottom:16px;display:grid;gap:8px}
.legal-content a{color:var(--blue-bright);text-decoration:underline;text-underline-offset:3px}
.legal-content .box{padding:20px 24px;border-radius:var(--r-md);background:var(--bg-2);border:1px solid var(--border);margin-bottom:16px}
.legal-content .todo{color:#FFB84D;font-style:italic}

/* ---------- ANIMATIONS AU DÉFILEMENT ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.09s}
.reveal[data-d="2"]{transition-delay:.18s}
.reveal[data-d="3"]{transition-delay:.27s}
.reveal[data-d="4"]{transition-delay:.36s}
.reveal[data-d="5"]{transition-delay:.45s}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1080px){
  .footer-top{grid-template-columns:1fr 1fr;gap:34px}
}
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .logo-stage{order:-1;min-height:330px}
  .logo-3d{width:min(76%,300px)}
  .logo-caption{display:none}   /* trop long sur petit ecran, il passait sur deux lignes */
  .hero{min-height:auto;padding-top:calc(var(--nav-h) + 52px);padding-bottom:80px}
  .scroll-hint{display:none}
  .founder,.contact-grid{grid-template-columns:1fr}
  .founder-photo{max-width:380px}
  .step::after{display:none}
}
@media (max-width:800px){
  .nav-links{
    position:fixed;top:64px;left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;
    padding:18px 24px 26px;background:var(--bg-2);border-bottom:1px solid var(--border);
    backdrop-filter:blur(20px);
    transform:translateY(-130%);opacity:0;visibility:hidden;transition:all .45s var(--ease);
  }
  .nav-links.open{transform:none;opacity:1;visibility:visible}
  .nav-links a{padding:14px 6px;font-size:16px;border-bottom:1px solid var(--border)}
  .nav-links a::after{display:none}
  .burger{display:flex}
  .nav .btn-desktop{display:none}
  .nav.scrolled,.nav{height:64px;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(16px);border-bottom-color:var(--border)}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding-inline:18px}
  .form-row{grid-template-columns:1fr}
  .hero-stats{gap:24px}
  .hero-stats b{font-size:25px}
  .footer-top{grid-template-columns:1fr;gap:30px}
  .modal{padding:12px}
  .modal-body{padding:24px 22px 28px}
  .card,.plan{padding:24px 22px}
}

/* ---------- ACCESSIBILITÉ : mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  #particles{display:none}
}

/* ---------- IMPRESSION ---------- */
@media print{
  .nav,#particles,.bg-aura,.grid-floor,.to-top,#preloader,.marquee,.scroll-hint{display:none!important}
  body{background:#fff;color:#000}
}