/* ============================================================
   AGMediaPro · DESIGN SYSTEM COSMIQUE
   Identité : Anaël Fameni · #A71AF7 · Orbitron + Poppins
   Thème spatial : starfield, planètes violettes, glows néon
   Partagé par toutes les pages (accueil, services, réalisations…)
   ============================================================ */
:root{
  --bg:#040309;
  --bg-2:#08060F;
  --surface:#141026;
  --surface-2:#1A1533;
  --card:rgba(24,18,46,.72);
  --violet:#A71AF7;        /* couleur de marque exacte (portfolio) */
  --violet-2:#C05CFF;
  --violet-3:#8B12E0;
  --lavender:#CBB0FF;
  --sun-1:#FF7A45;         /* accent chaud (imagerie coucher de soleil) */
  --sun-2:#FF5E8A;
  --text:#F3EEFC;
  --muted:#A99FC6;
  --line:rgba(179,140,255,.14);
  --line-2:rgba(179,140,255,.24);
  --radius:20px;
  --font-display:"Orbitron",sans-serif;
  --font-body:"Poppins",sans-serif;
  --wa:#25D366;
  --shadow:0 30px 70px -30px rgba(0,0,0,.75);
  --glow:0 0 60px -6px rgba(167,26,247,.6);
}
*{margin:0;padding:0;box-sizing:border-box}
:focus-visible{outline:2px solid var(--violet-2,#C05CFF);outline-offset:3px;border-radius:4px}
html{scroll-behavior:smooth}
html.sans-mouvement{scroll-behavior:auto}
html.sans-mouvement *, html.sans-mouvement *::before, html.sans-mouvement *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.65;font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:6px}
::selection{background:var(--violet);color:#fff}
.wrap{width:min(1520px,95%);margin-inline:auto}

/* Typo */
.eyebrow{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--font-display);font-size:.72rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--violet-2)}
.eyebrow::before{content:"";width:26px;height:2px;background:linear-gradient(90deg,var(--violet),transparent);border-radius:2px}
.eyebrow.c{justify-content:center}
h1,h2,h3,.display{font-family:var(--font-display);font-weight:800;line-height:1.06;letter-spacing:.01em;text-transform:uppercase}
h2{font-size:clamp(1.9rem,4.6vw,3.1rem)}
h3{font-size:1.25rem;letter-spacing:.02em}
p{font-weight:300}
.lead{color:var(--muted);max-width:60ch;font-size:1.06rem;font-weight:300}
strong,b{font-weight:600}
section{padding:clamp(4.5rem,10vw,7rem) 0;position:relative}
.grad{background:linear-gradient(110deg,var(--violet-2),var(--lavender) 50%,var(--sun-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.grad-sun{background:linear-gradient(110deg,var(--sun-1),var(--sun-2));-webkit-background-clip:text;background-clip:text;color:transparent}

/* Reveal */
.reveal{opacity:0;transform:translateY(34px);transition:opacity 1.05s cubic-bezier(.16,1,.3,1),transform 1.05s cubic-bezier(.16,1,.3,1);will-change:opacity,transform}
.reveal.is-in{opacity:1;transform:none}
html.sans-mouvement .reveal{opacity:1;transform:none}

/* ---------- Fond cosmique (starfield canvas + planètes + nébuleuses) ---------- */
#stars{position:fixed;inset:0;z-index:-4;display:block;background:
  radial-gradient(120% 80% at 15% -10%,rgba(167,26,247,.06),transparent 55%),
  radial-gradient(100% 70% at 100% 10%,rgba(255,94,138,.025),transparent 50%),
  #030207}
.cosmos{position:fixed;inset:0;z-index:-3;overflow:hidden;pointer-events:none}
/* Planètes réalistes : surface en rotation lente + ombrage sphérique + atmosphère */
.planet{position:absolute;border-radius:50%;will-change:transform}
.planet::before{content:"";position:absolute;inset:0;border-radius:50%;filter:blur(.4px)}
.planet::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(circle at 29% 25%,rgba(255,255,255,.20),transparent 34%),
    radial-gradient(circle at 32% 30%,transparent 34%,rgba(8,6,15,.34) 66%,rgba(4,2,9,.94) 100%);
  box-shadow:inset 3px 5px 18px rgba(255,255,255,.08)}
.planet .ring{position:absolute;left:50%;top:50%;width:178%;height:178%;border-radius:50%;
  border:1.5px solid rgba(203,176,255,.30);
  box-shadow:0 0 34px rgba(167,26,247,.30),inset 0 0 34px rgba(167,26,247,.22);
  transform:translate(-50%,-50%) rotate(-26deg) scaleY(.24)}
.planet .ring::before{content:"";position:absolute;inset:7%;border-radius:50%;border:6px solid rgba(167,26,247,.10)}

.planet.p1{width:min(37vw,560px);height:min(37vw,560px);top:clamp(-170px,-9vw,-60px);right:clamp(-130px,-7vw,-40px);
  background:radial-gradient(circle at 50% 46%,#8059C0,#4A2E7E 58%,#1D1040 100%);
  box-shadow:0 0 150px -30px rgba(167,26,247,.55);
  animation:drift1 70s ease-in-out infinite}
.planet.p1::before{
  background-image:
    repeating-linear-gradient(171deg,rgba(255,255,255,.055) 0 9%,rgba(18,8,40,.17) 9% 19%,rgba(255,255,255,.035) 19% 31%,rgba(28,10,62,.15) 31% 42%),
    radial-gradient(ellipse 130px 36px at 15% 34%,rgba(224,197,255,.32),transparent 70%),
    radial-gradient(ellipse 95px 28px at 47% 60%,rgba(10,4,26,.38),transparent 72%),
    radial-gradient(ellipse 160px 46px at 79% 30%,rgba(255,158,235,.17),transparent 70%),
    radial-gradient(ellipse 70px 22px at 63% 78%,rgba(224,197,255,.20),transparent 70%);
  background-size:100% 100%,560px 100%,560px 100%,560px 100%,560px 100%;
  background-repeat:no-repeat,repeat-x,repeat-x,repeat-x,repeat-x;
  animation:spinP1 150s linear infinite}
@keyframes spinP1{from{background-position:0 0,0 0,0 0,0 0,0 0}to{background-position:0 0,560px 0,560px 0,560px 0,560px 0}}

.planet.p2{width:min(21vw,320px);height:min(21vw,320px);bottom:9vw;left:clamp(-110px,-6vw,-30px);
  background:radial-gradient(circle at 48% 44%,#A96BE8,#5A3A94 56%,#221244 100%);
  box-shadow:0 0 110px -22px rgba(192,92,255,.5);
  animation:drift2 90s ease-in-out infinite}
.planet.p2::before{
  background-image:
    repeating-linear-gradient(174deg,rgba(255,255,255,.05) 0 12%,rgba(20,8,44,.16) 12% 24%,rgba(255,255,255,.03) 24% 38%),
    radial-gradient(ellipse 80px 26px at 22% 42%,rgba(255,170,220,.24),transparent 70%),
    radial-gradient(ellipse 60px 20px at 68% 64%,rgba(12,4,30,.36),transparent 72%),
    radial-gradient(ellipse 100px 30px at 88% 28%,rgba(216,190,255,.22),transparent 70%);
  background-size:100% 100%,420px 100%,420px 100%,420px 100%;
  background-repeat:no-repeat,repeat-x,repeat-x,repeat-x;
  animation:spinP2 110s linear infinite reverse}
@keyframes spinP2{from{background-position:0 0,0 0,0 0,0 0}to{background-position:0 0,420px 0,420px 0,420px 0}}

.planet.p3{width:min(7vw,96px);height:min(7vw,96px);top:30vh;left:12vw;opacity:.9;
  background:radial-gradient(circle at 44% 40%,#9C8FB8,#4E4468 58%,#1E1930 100%);
  box-shadow:0 0 50px -12px rgba(167,26,247,.35);
  animation:drift2 120s ease-in-out infinite reverse}
.planet.p3::before{
  background-image:
    radial-gradient(circle 9px at 30% 38%,rgba(10,6,20,.4),transparent 72%),
    radial-gradient(circle 6px at 62% 58%,rgba(10,6,20,.35),transparent 72%),
    radial-gradient(circle 12px at 78% 30%,rgba(255,255,255,.10),transparent 72%);
  background-size:220px 100%,220px 100%,220px 100%;
  background-repeat:repeat-x;
  animation:spinP3 80s linear infinite}
@keyframes spinP3{to{background-position:220px 0,220px 0,220px 0}}
.nebula{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.nebula i{position:absolute;border-radius:50%;filter:blur(90px);mix-blend-mode:screen;opacity:.06;will-change:transform}
.nebula .n1{width:44vw;height:44vw;background:radial-gradient(circle,#A71AF7,transparent 68%);top:20%;left:-10%;animation:drift1 46s ease-in-out infinite}
.nebula .n2{width:36vw;height:36vw;background:radial-gradient(circle,#FF5E8A,transparent 70%);bottom:-8%;right:6%;opacity:.09;animation:drift2 60s ease-in-out infinite}

/* ---------- Terre de nuit interactive (hero de l'accueil) ---------- */
.earth-wrap{position:absolute;top:50%;right:-1%;transform:translateY(-50%);width:min(54vw,800px);aspect-ratio:1;z-index:0}
.planet3d{position:absolute;inset:0;width:100%;height:100%;pointer-events:auto;touch-action:pan-y;filter:drop-shadow(0 0 80px rgba(70,120,255,.32));opacity:0;transition:opacity 1.4s cubic-bezier(.22,1,.36,1)}
.planet3d.is-ready{opacity:1}
/* Repli des machines minimales : la vraie Terre de nuit en image fixe, Afrique au centre */
.planet-fallback{position:absolute;inset:11.5%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 38% 34%,transparent 45%,rgba(3,2,7,.55) 78%,rgba(3,2,7,.9) 100%),
    url(earth-night-2k.jpg) 61% 50%/200% 100% no-repeat,#061430;
  box-shadow:inset 0 0 40px rgba(120,60,230,.35),0 0 90px -14px rgba(70,120,255,.4)}
.hud-ring{position:absolute;inset:-3.5%;border-radius:50%;border:1px dashed rgba(120,160,255,.22);pointer-events:none;animation:hudSpin 46s linear infinite}
.hud-ring::before{content:"";position:absolute;top:-4px;left:50%;width:8px;height:8px;border-radius:50%;background:#7aa2ff;box-shadow:0 0 14px #7aa2ff}
@keyframes hudSpin{to{transform:rotate(360deg)}}
.hud-chip{position:absolute;display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:999px;background:rgba(8,10,22,.78);border:1px solid rgba(120,160,255,.28);backdrop-filter:blur(8px);font-family:var(--font-display);font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#BBD0FF;pointer-events:none;white-space:nowrap}
.hud-chip svg{width:14px;height:14px;stroke:#7aa2ff;fill:none}
.hud-chip.top{top:4%;right:14%;animation:hudFloat 6s ease-in-out infinite}
.hud-chip.bot{bottom:7%;left:6%;animation:hudFloat 7s ease-in-out infinite reverse}
.hud-chip.bot i{width:7px;height:7px;border-radius:50%;background:#3DFC8A;box-shadow:0 0 10px #3DFC8A;animation:blinkDot 1.8s ease-in-out infinite}
@keyframes hudFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes blinkDot{0%,100%{opacity:1}50%{opacity:.3}}
@media (max-width:1000px){
  .earth-wrap{width:82vw;top:auto;bottom:-18vw;right:-22vw;transform:none}
  .planet3d{pointer-events:none}
  .hud-chip{display:none}
}
/* 19/09/2026 : sur telephone le hero depasse l'ecran (1 101 px de haut pour 844 a 390 px de
   large), et la Terre accrochee au bas du hero tombait sous la ligne de flottaison, invisible
   au premier ecran. On l'accroche au bas du PREMIER ecran, comme le dessin d'origine le
   supposait (hero = 100svh, Terre a -18vw du bas). */
@media (max-width:1000px) and (orientation:portrait){
  .earth-wrap{bottom:auto;top:calc(100vh - 64vw);top:calc(100svh - 64vw)}
}
html.sans-mouvement .hud-ring, html.sans-mouvement .hud-chip{animation:none}

/* ---------- Échos typographiques (direction artistique du portfolio) ---------- */
.sec-echo{position:absolute;left:50%;top:50%;transform:translate(-50%,-52%);z-index:-1;display:flex;flex-direction:column;align-items:center;gap:.1em;pointer-events:none;user-select:none;width:100%;overflow:hidden}
.sec-echo i{font-family:var(--font-display);font-style:normal;font-weight:900;font-size:clamp(2.6rem,9vw,7rem);line-height:.92;letter-spacing:.04em;text-transform:uppercase;color:transparent;-webkit-text-stroke:1px rgba(167,26,247,.28);white-space:nowrap}
.sec-echo i:nth-child(2){-webkit-text-stroke-color:rgba(167,26,247,.16)}
.sec-echo i:nth-child(3){-webkit-text-stroke-color:rgba(167,26,247,.08)}
@keyframes drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(-5vw,5vh)}}
@keyframes drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(5vw,-5vh)}}
html.sans-mouvement .planet, html.sans-mouvement .planet::before, html.sans-mouvement .nebula i{animation:none}

/* ---------- Préloader ---------- */
.preloader{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1.6rem;transition:opacity .6s ease,visibility .6s}
.preloader.done{opacity:0;visibility:hidden}
.pl-logo{width:76px;height:76px;animation:plFloat 2s ease-in-out infinite}
@keyframes plFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.05)}}
.pl-bar{width:180px;height:3px;border-radius:3px;background:rgba(179,140,255,.16);overflow:hidden}
.pl-bar i{display:block;height:100%;width:40%;border-radius:3px;background:linear-gradient(90deg,var(--violet),var(--violet-2));animation:plLoad 1.1s ease-in-out infinite}
@keyframes plLoad{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
.pl-txt{font-family:var(--font-display);font-weight:700;font-size:.72rem;letter-spacing:.4em;text-transform:uppercase;color:var(--muted)}

/* ---------- Barre progression + spotlight ---------- */
.scroll-prog{position:fixed;top:0;left:0;height:3px;width:0;z-index:150;background:linear-gradient(90deg,var(--violet),var(--sun-2));box-shadow:0 0 12px rgba(167,26,247,.7)}
.spotlight{position:fixed;top:0;left:0;width:540px;height:540px;border-radius:50%;background:radial-gradient(circle,rgba(167,26,247,.13),transparent 60%);pointer-events:none;z-index:-1;opacity:0;transition:opacity .4s;mix-blend-mode:screen}
@media (hover:hover) and (pointer:fine){.spotlight.on{opacity:1}}

/* ---------- Logo ---------- */
.logo-badge{display:inline-flex;align-items:center;justify-content:center;flex:none;border-radius:50%;overflow:hidden;background:#fff}
.logo-badge svg{width:100%;height:100%}
.logo-badge img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- Nav ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:100;padding:.9rem 0;transition:background .3s,box-shadow .3s,border-color .3s;border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(8,6,15,.78);backdrop-filter:blur(16px);border-color:var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:.7rem}
.brand .logo-badge{width:40px;height:40px}
.brand .wm{font-family:var(--font-display);font-weight:800;font-size:1.12rem;letter-spacing:.02em;color:#fff}
.brand .wm span{color:#fff}
.nav-links{display:flex;gap:1.9rem;align-items:center}
.nav-links a{font-size:.82rem;font-weight:500;letter-spacing:.02em;color:var(--text);transition:color .2s;padding:.4rem 0;position:relative;text-transform:uppercase}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1.5px;background:linear-gradient(90deg,var(--violet),var(--violet-2));transition:right .3s}
.nav-links a:hover{color:var(--violet-2)}
.nav-links a:hover::after,.nav-links a.active::after{right:0}
.nav-links a.active{color:var(--violet-2)}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:48px;padding:.8rem 1.7rem;border-radius:999px;font-family:var(--font-display);font-weight:700;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;border:1px solid transparent;transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s cubic-bezier(.16,1,.3,1),background .3s,border-color .3s}
.btn:active{transform:scale(.97)}
.btn-primary{background:linear-gradient(135deg,var(--violet),var(--violet-2));color:#fff;box-shadow:0 10px 34px -12px rgba(167,26,247,.8)}
.btn-primary:hover{box-shadow:0 18px 48px -12px rgba(167,26,247,.95);transform:translateY(-2px)}
/* `background:transparent` explicite, et non par defaut. Sur un `<a>` il ne sert
   a rien, mais `.btn-ghost` habille aussi un vrai `<button>` (« Apercu plein
   ecran », realisations.html L178 et en/realisations.html L173). Le navigateur
   pose alors `buttonface` de lui-meme, mesure le 12/08/2026 a rgb(240,240,240),
   sous un texte a rgb(243,238,252) : rapport de contraste 1,0. Le bouton etait
   un galet gris clair au texte quasi invisible. */
.btn-ghost{background:transparent;border-color:var(--line-2);color:var(--text)}
.btn-ghost:hover{border-color:var(--violet-2);background:rgba(167,26,247,.1)}
.btn-wa{background:var(--wa);color:#04140a;box-shadow:0 10px 34px -12px rgba(37,211,102,.7)}
.btn-wa:hover{box-shadow:0 18px 48px -12px rgba(37,211,102,.9);transform:translateY(-2px)}
.btn-lg{min-height:56px;padding:1rem 2.1rem;font-size:.9rem}
.burger{display:none;background:none;border:0;width:48px;height:48px;align-items:center;justify-content:center}
.burger svg{width:28px;height:28px;stroke:var(--text)}

/* Section head */
.sec-head{max-width:660px}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head h2{margin:.8rem 0 1rem}

/* Cartes génériques */
.card{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--surface);border:1px solid var(--line);transition:transform .6s cubic-bezier(.16,1,.3,1),border-color .4s,box-shadow .6s cubic-bezier(.16,1,.3,1)}
.card:hover{transform:translateY(-8px);border-color:var(--line-2);box-shadow:0 30px 60px -30px rgba(167,26,247,.5)}

/* Chips filtres */
.filters{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;margin:2.6rem 0}
.filter{min-height:44px;padding:.55rem 1.3rem;border-radius:999px;border:1px solid var(--line-2);background:var(--card);color:var(--muted);font-family:var(--font-display);font-weight:600;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;transition:all .2s}
.filter:hover{color:var(--text);border-color:var(--violet-2)}
.filter.active{background:linear-gradient(135deg,var(--violet),var(--violet-2));border-color:transparent;color:#fff}

/* Footer */
.footer{border-top:1px solid var(--line);padding:3.2rem 0 2rem;background:var(--bg-2);position:relative;z-index:1}
.footer-top{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:2.4rem;padding-bottom:2.4rem;border-bottom:1px solid var(--line)}
.footer .brand{margin-bottom:1rem}
.footer-top p{color:var(--muted);font-size:.92rem;max-width:34ch}
.footer h4{font-family:var(--font-display);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--lavender);margin-bottom:1rem}
.footer-links li{margin:.55rem 0}
.footer-links a{color:#C7C0DE;font-size:.92rem;display:inline-block;padding:.35rem 0;min-height:24px}
.footer-links a:hover{color:var(--violet-2)}
.footer-social{display:flex;gap:.7rem;margin-top:1.1rem}
.footer-social a{width:40px;height:40px;border-radius:12px;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;transition:all .2s}
.footer-social a:hover{border-color:var(--violet-2);background:rgba(167,26,247,.12);transform:translateY(-3px)}
.footer-social svg{width:19px;height:19px;stroke:var(--text);fill:none}
.footer-bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:1.6rem;color:var(--muted);font-size:.84rem}

/* WhatsApp float */
.wa-float{position:fixed;right:1.2rem;bottom:1.2rem;z-index:90;display:flex;align-items:center;gap:.5rem;padding:.5rem .95rem .5rem .5rem;border-radius:999px;background:var(--wa);color:#04140a;font-family:var(--font-display);font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.03em;box-shadow:0 12px 32px -10px rgba(37,211,102,.6);transition:transform .2s}
.wa-float:hover{transform:translateY(-3px)}
.wa-float .ic{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;position:relative}
.wa-float .ic svg{width:19px;height:19px;fill:#04140a}
.wa-float .pulse{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.7);animation:pulse 2s ease-out infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.5);opacity:0}}
@media (max-width:560px){.wa-float span{display:none}.wa-float{padding:.6rem}}

/* Menu mobile */
.mobile-menu{position:fixed;inset:0;z-index:200;background:rgba(8,6,15,.98);backdrop-filter:blur(12px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.8rem;opacity:0;pointer-events:none;transition:opacity .3s}
.mobile-menu.open{opacity:1;pointer-events:auto}
.mobile-menu a{font-family:var(--font-display);font-weight:700;font-size:1.5rem;text-transform:uppercase}
.mobile-menu a:hover{color:var(--violet-2)}
.mm-close{position:absolute;top:1.2rem;right:1.2rem;background:none;border:0;width:52px;height:52px}
.mm-close svg{width:30px;height:30px;stroke:var(--text)}

/* Pop-up de bienvenue */
/* ---- Page de bienvenue plein écran : l'univers s'ouvre ---- */
.wpage{position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;background:#040209;clip-path:circle(141% at 50% 55%)}
/* Sortie : le contenu s'éloigne puis un iris s'ouvre sur le site */
.wpage.leave{pointer-events:none;animation:wpIris .95s cubic-bezier(.65,0,.35,1) .38s forwards}
@keyframes wpIris{to{clip-path:circle(0% at 50% 55%)}}
.wpage.leave .wp-x,.wpage.leave .wp-streak,.wpage.leave .wp-flash{opacity:0!important;transition:opacity .3s}
/* Sortie vers la version anglaise : l'écran reste couvert, le contenu s'efface */
.wpage.nav-out{pointer-events:none}
.wpage.nav-out .wp-inner,.wpage.nav-out .wp-x{opacity:0;transform:scale(1.05);transition:opacity .4s ease,transform .4s ease}
/* Apparition douce du site derrière l'iris */
body.site-enter header.nav,body.site-enter .hero{animation:siteEnter 1.15s cubic-bezier(.16,1,.3,1) .3s backwards}
@keyframes siteEnter{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
/* Volets : l'univers s'ouvre en deux */
.wp-shutter{position:absolute;left:0;width:100%;height:50.5%;z-index:3;background:linear-gradient(180deg,#050210,#0a0518);will-change:transform;pointer-events:none}
.wp-shutter.top{top:0;border-bottom:1px solid rgba(194,107,255,.45);box-shadow:0 6px 40px -4px rgba(167,26,247,.45)}
.wp-shutter.bot{bottom:0;border-top:1px solid rgba(194,107,255,.45);box-shadow:0 -6px 40px -4px rgba(167,26,247,.45)}
.wpage.open .wp-shutter.top{animation:wpShutTop .85s cubic-bezier(.7,0,.18,1) .2s forwards}
.wpage.open .wp-shutter.bot{animation:wpShutBot .85s cubic-bezier(.7,0,.18,1) .2s forwards}
@keyframes wpShutTop{to{transform:translateY(-103%)}}
@keyframes wpShutBot{to{transform:translateY(103%)}}
/* Trait de lumière initial */
.wp-streak{position:absolute;left:50%;top:50%;z-index:4;width:min(72vw,900px);height:2px;border-radius:999px;transform:translate(-50%,-50%) scaleX(.02);opacity:0;pointer-events:none;background:linear-gradient(90deg,transparent,#E9D8FF 18%,#fff 50%,#E9D8FF 82%,transparent);box-shadow:0 0 22px 4px rgba(194,107,255,.85),0 0 90px 16px rgba(167,26,247,.5)}
.wpage.open .wp-streak{animation:wpStreak 1.05s cubic-bezier(.16,1,.3,1) forwards}
@keyframes wpStreak{0%{opacity:0;transform:translate(-50%,-50%) scaleX(.02)}14%{opacity:1}42%{opacity:1;transform:translate(-50%,-50%) scaleX(1)}80%{opacity:0;transform:translate(-50%,-50%) scaleX(1.12)}100%{opacity:0;transform:translate(-50%,-50%) scaleX(1.12)}}
/* Flash radial pendant l'ouverture */
.wp-flash{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 50% 50%,rgba(194,107,255,.35),transparent 55%)}
.wpage.open .wp-flash{animation:wpFlash 1.3s ease-out .25s forwards}
@keyframes wpFlash{0%{opacity:0}22%{opacity:1}100%{opacity:0}}
/* Cosmos révélé : dézoom lent */
.wp-bg{position:absolute;inset:0}
.wp-cosmos{position:absolute;inset:0;overflow:hidden;opacity:0;transform:scale(1.14);will-change:transform,opacity}
.wpage.open .wp-cosmos{animation:wpCosmos 1.7s cubic-bezier(.16,1,.3,1) .25s forwards}
@keyframes wpCosmos{to{opacity:1;transform:scale(1)}}
.wp-cosmos::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 120%,rgba(167,26,247,.14),transparent 60%),radial-gradient(ellipse at 50% 50%,transparent 40%,rgba(0,0,0,.55) 100%)}
.wp-star{position:absolute;width:var(--s);height:var(--s);border-radius:50%;background:#E9D8FF;box-shadow:0 0 6px rgba(233,216,255,.85);animation:wpTwinkle var(--tw) ease-in-out var(--td) infinite alternate}
@keyframes wpTwinkle{0%{opacity:.12;transform:scale(.7)}100%{opacity:.95;transform:scale(1.15)}}
.wp-orb{position:absolute;border-radius:50%;filter:blur(110px);opacity:.5;will-change:transform}
.wp-orb.o1{width:44vw;height:44vw;left:-12vw;top:-14vw;background:radial-gradient(circle,#7b2ff7,transparent 70%);animation:wpFloat 14s ease-in-out infinite alternate}
.wp-orb.o2{width:38vw;height:38vw;right:-10vw;bottom:-12vw;background:radial-gradient(circle,#f72fb8,transparent 70%);animation:wpFloat 18s ease-in-out infinite alternate-reverse}
.wp-orb.o3{width:24vw;height:24vw;left:55%;top:8%;background:radial-gradient(circle,#2f7ef7,transparent 70%);opacity:.32;animation:wpFloat 22s ease-in-out infinite alternate}
@keyframes wpFloat{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(6vw,-4vw,0) scale(1.12)}}
.wp-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse at 50% 45%,rgba(0,0,0,.7),transparent 72%)}
.wp-inner{position:relative;text-align:center;max-width:760px;padding:2rem 1.4rem;display:flex;flex-direction:column;align-items:center}
.wp-in{opacity:0;transform:translateY(26px);filter:blur(6px)}
.wpage.open .wp-in{animation:wpIn .9s cubic-bezier(.16,1,.3,1) calc(var(--d)*80ms + .55s) forwards}
@keyframes wpIn{to{opacity:1;transform:none;filter:blur(0)}}
.wp-logo{position:relative;width:92px;height:92px;display:flex;align-items:center;justify-content:center;margin-bottom:1.4rem}
.wp-logo img{width:74px;height:74px;border-radius:50%;object-fit:cover;background:#fff;position:relative;z-index:1}
.wp-ring{position:absolute;inset:0;border-radius:50%;padding:2px;background:conic-gradient(from 0deg,#a71af7,#f72fb8,#2f7ef7,#a71af7);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:wpSpin 6s linear infinite;box-shadow:0 0 44px rgba(167,26,247,.5)}
@keyframes wpSpin{to{transform:rotate(360deg)}}
.wp-eyebrow{font-family:var(--font-display);font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;color:var(--violet-2,#c26bff);margin-bottom:1.1rem}
.wpage.open .wp-eyebrow{animation:wpIn .9s cubic-bezier(.16,1,.3,1) calc(var(--d)*80ms + .55s) forwards,wpTrack 1.1s cubic-bezier(.16,1,.3,1) calc(var(--d)*80ms + .55s) both}
@keyframes wpTrack{from{letter-spacing:.5em}to{letter-spacing:.24em}}
.wp-title{font-family:var(--font-display);text-transform:uppercase;line-height:1.06;font-size:clamp(2rem,6.2vw,3.9rem);margin-bottom:1.2rem;perspective:700px}
.wp-title .wp-w{display:inline-block;opacity:0;transform:translateY(.6em) rotateX(35deg);filter:blur(8px);transform-origin:50% 100%}
.wpage.open .wp-title .wp-w{animation:wpWord .75s cubic-bezier(.16,1,.3,1) calc(var(--i)*70ms + .8s) forwards}
@keyframes wpWord{to{opacity:1;transform:translateY(0) rotateX(0);filter:blur(0)}}
.wp-sub{color:var(--muted);max-width:480px;line-height:1.65;margin-bottom:1.8rem}
.wp-langs{display:flex;gap:.8rem;margin-bottom:1.6rem}
.wp-lang{display:flex;flex-direction:column;align-items:center;gap:.15rem;min-width:118px;padding:.85rem 1.2rem;border-radius:16px;border:1px solid var(--line-2);background:rgba(255,255,255,.04);color:var(--text);cursor:pointer;text-decoration:none;font:inherit;transition:transform .25s cubic-bezier(.34,1.56,.64,1),border-color .25s,box-shadow .25s,background .25s}
.wp-lang b{font-family:var(--font-display);font-size:1rem;letter-spacing:.14em}
.wp-lang span{font-size:.74rem;color:var(--muted)}
.wp-lang:hover{transform:translateY(-3px);border-color:rgba(167,26,247,.65);box-shadow:0 14px 40px -14px rgba(167,26,247,.6);background:rgba(167,26,247,.08)}
.wp-lang:active{transform:scale(.96)}
.wp-lang.active{border-color:rgba(167,26,247,.7);background:linear-gradient(160deg,rgba(167,26,247,.2),rgba(247,47,184,.1));box-shadow:0 0 0 1px rgba(167,26,247,.3),0 14px 40px -16px rgba(167,26,247,.7)}
/* Pop ressort séquencé des pastilles de langue */
.wpage.open .wp-langs .wp-lang{opacity:0;transform:scale(.6);animation:wpPop .6s cubic-bezier(.34,1.56,.64,1) forwards}
.wpage.open .wp-langs .wp-lang:nth-child(1){animation-delay:1.35s}
.wpage.open .wp-langs .wp-lang:nth-child(2){animation-delay:1.5s}
@keyframes wpPop{to{opacity:1;transform:scale(1)}}
.wp-go{display:inline-flex;align-items:center;gap:.6rem;position:relative}
.wpage.open .wp-go{animation:wpIn .9s cubic-bezier(.16,1,.3,1) calc(var(--d)*80ms + .55s) forwards,wpPulse 2.6s ease-in-out 2.2s infinite}
@keyframes wpPulse{0%,100%{box-shadow:0 18px 50px -18px rgba(167,26,247,.75)}50%{box-shadow:0 18px 70px -12px rgba(247,47,184,.85)}}
.wp-go svg{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.wp-go:hover svg{transform:translateX(4px)}
.wp-x{position:absolute;top:1.2rem;right:1.4rem;z-index:2;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,transform .2s}
.wp-x:hover{background:rgba(255,255,255,.14);transform:rotate(90deg)}
.wp-x svg{width:20px;height:20px;stroke:var(--text)}
.wpage.leave .wp-inner{opacity:0;transform:scale(1.08);filter:blur(10px);transition:opacity .45s ease-in,transform .45s ease-in,filter .45s ease-in}
html.sans-mouvement .wp-in, html.sans-mouvement .wp-title .wp-w, html.sans-mouvement .wp-eyebrow, html.sans-mouvement .wp-langs .wp-lang{opacity:1!important;transform:none!important;filter:none!important;animation:none!important}
html.sans-mouvement .wp-orb, html.sans-mouvement .wp-ring, html.sans-mouvement .wp-star{animation:none!important}
html.sans-mouvement .wp-shutter, html.sans-mouvement .wp-streak, html.sans-mouvement .wp-flash{display:none!important}
html.sans-mouvement .wp-cosmos{opacity:1;transform:none;animation:none!important}
html.sans-mouvement .wpage{clip-path:none;opacity:0;transition:opacity .3s}
html.sans-mouvement .wpage.open{opacity:1}
html.sans-mouvement .wpage.leave{opacity:0;animation:none;transition:opacity .3s}
html.sans-mouvement body.site-enter header.nav, html.sans-mouvement body.site-enter .hero{animation:none}
@media (max-width:560px){.wp-langs{width:100%;justify-content:center}.wp-lang{min-width:104px}.wp-logo{width:78px;height:78px}.wp-logo img{width:62px;height:62px}}

/* Lightbox images (galerie réalisations) */
.img-lb{position:fixed;inset:0;z-index:420;background:rgba(3,2,7,.85);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1rem;padding:2rem;opacity:0;pointer-events:none;transition:opacity .35s}
.img-lb.open{opacity:1;pointer-events:auto}
.img-lb img{max-width:min(92vw,1200px);max-height:82vh;border-radius:16px;border:1px solid var(--line-2);box-shadow:0 50px 120px -30px rgba(167,26,247,.5);transform:scale(.88);transition:transform .45s cubic-bezier(.16,1,.3,1);cursor:default}
.img-lb.open img{transform:scale(1)}
.img-lb .img-lb-cap{font-family:var(--font-display);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.img-lb .img-lb-x{position:absolute;top:1.2rem;right:1.4rem;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.07);border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s}
.img-lb .img-lb-x:hover{background:rgba(255,255,255,.16)}
.img-lb .img-lb-x svg{width:20px;height:20px;stroke:var(--text)}
.gal{cursor:zoom-in}

/* Vidéos réalisations */
.video-feature{position:relative;border-radius:24px;overflow:hidden;border:1px solid var(--line-2);background:#0a0715;box-shadow:0 40px 100px -40px rgba(167,26,247,.55)}
.video-feature video{display:block;width:100%;height:auto;background:#000}
.video-badge{max-width:calc(100% - 1.8rem);position:absolute;top:1rem;left:1rem;z-index:2;display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-display);font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:rgba(167,26,247,.85);padding:.45rem 1rem;border-radius:999px;pointer-events:none}
.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:1.6rem}
.video-grid .vg{border-radius:18px;overflow:hidden;border:1px solid var(--line-2);background:#0a0715}
.video-grid .vg video{display:block;width:100%;height:auto;background:#000;aspect-ratio:16/9;object-fit:cover}
.video-grid .vg figcaption{padding:.8rem 1rem;font-family:var(--font-display);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
@media (max-width:820px){.video-grid{grid-template-columns:1fr}}
.video-split{display:grid;grid-template-columns:1fr 1.2fr;gap:2.5rem;align-items:center}
@media (max-width:960px){.video-split{grid-template-columns:1fr}}
/* Vidéo portrait : visible en entier, jamais plus haute que l'écran */
.video-feature.portrait{background:transparent;border:none;box-shadow:none;display:flex;justify-content:center;overflow:visible}
.video-feature.portrait video{width:auto;max-width:100%;max-height:min(66vh,620px);border-radius:22px;border:1px solid var(--line-2);box-shadow:0 40px 100px -40px rgba(167,26,247,.55)}
/* Bouton plein écran sur les vidéos */
.vid-wrap{position:relative;display:block}
.video-feature.portrait .vid-wrap{display:inline-block;max-width:100%}
.vid-fs{max-width:calc(100% - 1.8rem);position:absolute;top:.8rem;right:.8rem;z-index:2;display:inline-flex;align-items:center;gap:.45rem;padding:.55rem .9rem;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(5,3,12,.62);backdrop-filter:blur(8px);color:#fff;font-family:var(--font-display);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background .2s,transform .25s cubic-bezier(.34,1.56,.64,1)}
.vid-fs:hover{background:rgba(167,26,247,.55);transform:translateY(-2px)}
.vid-fs svg{width:14px;height:14px}
/* Lightbox vidéo */
.vid-lb{position:fixed;inset:0;z-index:430;background:rgba(3,2,7,.9);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1rem;padding:2rem;opacity:0;pointer-events:none;transition:opacity .35s}
.vid-lb.open{opacity:1;pointer-events:auto}
.vid-lb video{max-width:min(92vw,1100px);max-height:84vh;border-radius:16px;border:1px solid var(--line-2);box-shadow:0 50px 120px -30px rgba(167,26,247,.5);background:#000;transform:scale(.9);transition:transform .5s cubic-bezier(.16,1,.3,1)}
.vid-lb.open video{transform:scale(1)}
.vid-lb .img-lb-cap{font-family:var(--font-display);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
/* Sélecteur de langue FR|EN */
.lang-switch{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.04)}
/* .78rem, soit 12,48 px, et non .68rem : « FR » et « EN » etaient rendus a
   10,88 px, le plus petit element d'interface de la barre de navigation, alors
   que c'est un commutateur qu'un visiteur anglophone doit reperer du premier
   coup d'oeil. Le `min-width` de 38 px absorbe les deux caracteres plus larges. */
.lang-switch a{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:38px;padding:.34rem .6rem;border-radius:999px;font-family:var(--font-display);font-size:.78rem;letter-spacing:.12em;color:var(--muted);text-decoration:none;transition:color .2s,background .25s}
/* Zone cliquable etendue sans toucher a l'apparence de la capsule · mesure du
   11/08/2026 : 39x29 px, sous le seuil confortable au pouce. */
.lang-switch a::before{content:"";position:absolute;inset:-8px -2px}
.lang-switch a.on{color:#fff;background:linear-gradient(120deg,#a71af7,#f72fb8);box-shadow:0 6px 20px -8px rgba(167,26,247,.8)}
.lang-switch a:not(.on):hover{color:var(--text);background:rgba(255,255,255,.07)}
/* Toggle langue */
.lang-toggle{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:34px;padding:0 .7rem;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.05);font-family:var(--font-display);font-size:.7rem;font-weight:700;letter-spacing:.12em;color:var(--text);transition:background .2s,border-color .2s}
.lang-toggle:hover{background:rgba(167,26,247,.18);border-color:var(--violet-2)}

/* Étoiles / notes */
.stars5{display:flex;gap:.2rem}
.stars5 svg{width:16px;height:16px;fill:var(--sun-1);stroke:none}

/* Responsive commun */
@media (max-width:1000px){.footer-top{grid-template-columns:1fr 1fr}}
@media (max-width:900px){.nav-links{display:none}.burger{display:flex}}
@media (max-width:640px){.footer-top{grid-template-columns:1fr}}

/* Mention discrete sous la grille de demos : les 12 sites sont des marques fictives.
   Volontairement en petit et en retrait · elle informe sans casser l'effet de la demo.
   « En retrait » avait ete pousse trop loin : `opacity:.62` sur `--muted` donnait
   un rapport de contraste mesure a 3,65 pour 11,52 px, sous le seuil. C'est la
   mention qui empeche de faire passer 12 maquettes pour 12 clients : elle doit se
   lire. Opacite a .9, taille a 12,48 px, elle reste secondaire sans etre effacee. */
.folio-note{margin:1.6rem auto 0;max-width:62ch;text-align:center;font-size:.78rem;line-height:1.6;color:var(--muted);opacity:.9}
.folio-note strong{font-weight:600;color:var(--muted)}

/* ============================================================
   Decors techniques
   Une trame de fond, des coins de visee sur les modules, et des
   etiquettes en capitales espacees. Rien d'anime, rien de lourd.
   ============================================================ */
body::before{content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;
  background-image:linear-gradient(rgba(179,140,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(179,140,255,.05) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse 130% 70% at 50% 0%,#000 20%,transparent 78%);
  mask-image:radial-gradient(ellipse 130% 70% at 50% 0%,#000 20%,transparent 78%)}
body::after{content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;opacity:.5;
  background:radial-gradient(1px 1px at 20% 30%,rgba(203,176,255,.35),transparent),
             radial-gradient(1px 1px at 70% 60%,rgba(203,176,255,.25),transparent),
             radial-gradient(1px 1px at 45% 85%,rgba(203,176,255,.3),transparent);
  background-size:340px 340px}

/* Coins de visee sur les modules importants */
.hud{position:relative}
.hud>.hud-c{position:absolute;width:17px;height:17px;border:1px solid var(--violet-2);opacity:.45;pointer-events:none;z-index:2}
.hud>.hud-c.tl{top:10px;left:10px;border-right:0;border-bottom:0;border-radius:5px 0 0 0}
.hud>.hud-c.tr{top:10px;right:10px;border-left:0;border-bottom:0;border-radius:0 5px 0 0}
.hud>.hud-c.bl{bottom:10px;left:10px;border-right:0;border-top:0;border-radius:0 0 0 5px}
.hud>.hud-c.br{bottom:10px;right:10px;border-left:0;border-top:0;border-radius:0 0 5px 0}

/* Etiquette technique discrete */
.tag-tech{position:absolute;top:12px;right:38px;z-index:2;font-family:var(--font-display);font-size:.58rem;
  font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--violet-2);opacity:.55;pointer-events:none}

/* Liseré vivant au survol des grandes cartes */
.porte,.demo,.sim2,.plat,.outils,.aid{--liz:rgba(179,140,255,.24)}
.porte:hover,.demo:hover,.sim2:hover,.plat:hover,.outils:hover,.aid:hover{--liz:rgba(167,26,247,.5)}
.porte,.demo,.sim2,.plat,.outils,.aid{border-color:var(--liz);transition:border-color .5s}

@media (max-width:640px){
  body::before{background-size:52px 52px}
  .hud>.hud-c{width:12px;height:12px;top:7px;left:7px}
  .hud>.hud-c.tr{left:auto;right:7px}
  .hud>.hud-c.bl{top:auto;bottom:7px}
  .hud>.hud-c.br{top:auto;left:auto;bottom:7px;right:7px}
  .tag-tech{display:none}
}