/* ===== v5 : thèmes clair / sombre (html[data-theme]) + en-tête verre + effets 3D. Chargé après site.css. ===== */
:root{--teal:#19e0cf;--blue:#5b8cff;--blue-dark:#3f6fe8;--text:#aab6d3;--ink:#f2f5ff;--bg:#050816;--soft:#080d22;--black:#03050f;
 --line:rgba(255,255,255,.09);--glass:rgba(255,255,255,.045);--grad:linear-gradient(135deg,#3358d8,#08867d);
 --kick:#19e0cf;--a1:#19e0cf;--a2:#5b8cff;--muted:#8e9bbd;--ph:#8190b3;
 --top:#040612;--hdr:rgba(5,8,22,.55);--pill:rgba(255,255,255,.07);--pill-line:rgba(255,255,255,.14);--pill-on:rgba(255,255,255,.16);--pill-hover:rgba(255,255,255,.09);--panel:rgba(10,15,38,.97);
 --navink:#dfe6ff;--heroink:#fff;--herosub:#b9c4e2;--logo:brightness(0) invert(1);--hover:rgba(91,140,255,.16);
 --shadow:0 20px 50px rgba(0,0,0,.35);--shadow-h:0 24px 64px rgba(25,224,207,.12),0 0 0 1px rgba(91,140,255,.4);--shadow-img:0 30px 70px rgba(0,0,0,.5),0 0 60px rgba(91,140,255,.18);
 --h1:rgba(91,140,255,.2);--h2:rgba(25,224,207,.12);--gl:rgba(255,255,255,.28);--dot:rgba(255,255,255,.25);
 --harrow-bg:rgba(255,255,255,.08);--harrow-ink:#fff;--chip-bg:rgba(91,140,255,.15);--chip-ink:#a9c1ff;--gear:#0b1330;
 --skills:linear-gradient(135deg,#0a2a6b,#08665f);--in:rgba(255,255,255,.06);--in-f:rgba(255,255,255,.1)}
html[data-theme="light"]{color-scheme:light;--teal:#009e92;--blue:#0036bf;--blue-dark:#002a96;--text:#3a4660;--ink:#0b1530;--bg:#f4f8fc;--soft:#e9f0f8;--black:#06192f;
 --line:rgba(10,30,70,.1);--glass:rgba(255,255,255,.75);
 --kick:#05524c;--a1:#00857b;--a2:#0036bf;--muted:#4a5568;--ph:#7a8599;
 --top:#fff;--hdr:rgba(244,248,252,.72);--pill:rgba(255,255,255,.6);--pill-line:rgba(10,30,70,.1);--pill-on:#fff;--pill-hover:rgba(255,255,255,.8);--panel:rgba(255,255,255,.97);
 --navink:#14213d;--heroink:#14213d;--herosub:#2c3a55;--logo:none;--hover:#e8eefc;
 --shadow:0 14px 40px rgba(40,70,110,.12);--shadow-h:0 22px 54px rgba(0,54,191,.2),0 0 0 1px rgba(0,54,191,.2);--shadow-img:0 24px 60px rgba(40,70,110,.25);
 --h1:rgba(0,54,191,.1);--h2:rgba(0,204,187,.14);--gl:rgba(0,54,191,.35);--dot:rgba(0,54,191,.3);
 --harrow-bg:rgba(255,255,255,.85);--harrow-ink:#0036bf;--chip-bg:#e8eefc;--chip-ink:#0036bf;
 --skills:linear-gradient(135deg,#0a3fbf,#007f75);--in:#f5f6f8;--in-f:#fff}
html{color-scheme:dark}
html[data-theme="light"]{color-scheme:light}
body{background:var(--bg);overflow-x:clip} /* clip (pas hidden) : garde le menu collant, évite le défilement horizontal des éléments pas encore révélés */
::placeholder{color:var(--ph)}
.kick,.hero .kick,.news .kick{color:var(--kick)}

/* barre du haut */
.topbar{background:var(--top);border-bottom:1px solid var(--line)}
.soc a{color:var(--blue)}
.lang{border-color:var(--line)}
.lang a{color:var(--ink)}.lang a:hover{background:var(--hover)}
.lang a[aria-current="true"]{background:var(--grad);color:#fff}

/* en-tête : logo | pilule de navigation en verre | thème + contact + menu (comme la maquette Nival) */
header.nav{background:var(--hdr);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);box-shadow:0 1px 0 var(--line)}
header.nav.stuck{box-shadow:0 12px 30px rgba(0,0,0,.18)}
header.nav .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.logo{justify-self:start}
.logo img{filter:var(--logo)}
#nav>ul{gap:2px;padding:3px;border:1px solid var(--pill-line);border-radius:22px;background:var(--pill);box-shadow:inset 0 0 12px rgba(255,255,255,.12),0 0 12px rgba(255,255,255,.06)}
#nav a.m{height:34px;padding:0 13px;border:0;border-radius:18px;color:var(--navink);transition:background .2s,color .2s}
#nav a.m:hover{background:var(--pill-hover);color:var(--navink)}
#nav a.m[aria-current="page"]{background:var(--pill-on);color:var(--navink);box-shadow:0 2px 12px rgba(26,48,78,.08)}
.nav-cta{display:none}
.hact{grid-column:3;justify-self:end;display:flex;align-items:center;gap:10px}
.theme{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--ink);background:var(--pill);border:1px solid var(--pill-line);transition:background .2s}
.theme:hover{background:var(--pill-hover)}
.theme .i{width:20px;height:20px}
.theme .t-moon,html[data-theme="light"] .theme .t-sun{display:none}
html[data-theme="light"] .theme .t-moon{display:block}
.join{display:inline-flex;align-items:center;gap:10px;height:46px;padding:2px 18px 2px 2px;border-radius:25px;background:var(--pill);border:1px solid var(--pill-line);box-shadow:inset 0 0 10px rgba(255,255,255,.12);transition:background .2s}
.join:hover{background:var(--pill-hover)}
.join-icon{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--pill-on);color:var(--ink)}
.join-icon .i{width:22px;height:22px}
.join-label{font:600 13px Poppins,sans-serif;color:var(--navink);white-space:nowrap}
.sub{background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow)}
.sub a:hover,.sub a[aria-current="page"]{background:var(--hover);color:var(--teal)}
/* hamburger -> croix */
.burger{position:relative;background:var(--pill);border:1px solid var(--pill-line);border-radius:50%;color:var(--ink)}
.burger i{position:absolute;left:12px;right:12px;height:2px;border-radius:2px;background:currentColor;transition:transform .25s,opacity .25s}
.burger i:nth-child(1){top:14px}.burger i:nth-child(2){top:21px}.burger i:nth-child(3){top:28px}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(38deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-38deg)}
/* moyen écran : le bouton contact ne garde que l'icône, pour que la pilule reste centrée */
@media(min-width:1101px) and (max-width:1300px){.join{padding:2px}.join-label{display:none}}
/* petit écran / téléphone : la pilule devient un panneau déroulant en verre */
@media(max-width:1100px){
 header.nav .wrap{grid-template-columns:1fr auto;position:relative}
 .hact{grid-column:2}
 .hact .join{display:none}
 .burger{display:block}
 #nav{position:absolute;left:auto;right:0;top:calc(100% + 8px);width:min(380px,100%);display:none;padding:12px;border:1px solid var(--pill-line);border-radius:26px;background:var(--panel);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:var(--shadow)}
 #nav.open{display:block}
 #nav>ul{flex-direction:column;align-items:stretch;gap:4px;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
 #nav a.m{width:100%;height:54px;padding:0 18px;justify-content:space-between;font-size:14px;border-radius:18px}
 .nav-cta{display:block;margin-top:6px}
 .nav-cta .btn{width:100%;min-height:56px}
 .sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:none;padding:0 0 0 14px;min-width:0;display:none}
 #nav li.open>.sub{display:block}
}

/* boutons : pilule + dégradé (blanc sur #08867d = contraste 4.6) */
.btn{border-radius:999px}
.btn.primary{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 10px 30px rgba(51,88,216,.35)}
.btn.primary:hover{background:var(--grad);border-color:transparent;filter:brightness(1.15);transform:translateY(-2px);box-shadow:0 14px 36px rgba(25,224,207,.28)}
.btn.ghost{border-color:var(--gl);color:var(--ink)}
.btn.ghost:hover{background:var(--grad);border-color:transparent;color:#fff}
.btn.ghost.light:hover{background:#fff;color:#08867d}
.cta-band .btn.primary{background:#fff;color:#08867d;box-shadow:none}
.totop{background:var(--grad)}

/* titres et textes */
.consult h2,.services h2,.about h2,.prose h2{color:var(--ink)}
.consult h2 b{color:var(--blue)}
.meta,.crumbs{color:var(--muted)}
.crumbs a{color:var(--kick)}

/* cartes */
.card,.sc,.post-card,.office,.job,.abox,.contact form{background:var(--glass);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}
.card:hover,.sc:hover,.post-card:hover,.job:hover{box-shadow:var(--shadow-h)}
.abox.blue{background:var(--grad);border-color:transparent}
.abox li a:hover{background:var(--hover);color:var(--teal)}
.abox li a[aria-current="page"]{background:var(--grad);color:#fff}
.chip{background:var(--chip-bg);color:var(--chip-ink)}
.office .ic{background:var(--chip-bg)}
.artnav,.copy{border-color:var(--line)}
.gear img{background:var(--gear);border-color:#0b1330}
.about figure img{border-radius:18px;box-shadow:var(--shadow-img)}
.skills .box{background:var(--skills);border:1px solid var(--line)}
.fields input,.fields textarea{background:var(--in);border-color:var(--line);color:var(--ink);border-radius:12px}
.fields input:focus,.fields textarea:focus{background:var(--in-f);border-color:var(--blue)}
.coord{background:var(--grad)}
footer{background:var(--black);border-top:1px solid var(--line)}

/* hero : toujours sombre (les visuels le sont), quel que soit le thème : on fixe ses variables ici */
.hero{--heroink:#fff;--herosub:#c3cfe8;--kick:#19e0cf;--teal:#19e0cf;--a1:#19e0cf;--a2:#6f9bff;--blue:#6f9bff;--ink:#f2f5ff;--gl:rgba(25,224,207,.7);--dot:rgba(255,255,255,.3);--harrow-bg:rgba(255,255,255,.1);--harrow-ink:#fff;
 min-height:680px;background:radial-gradient(60% 90% at 78% 40%,rgba(30,110,255,.25),transparent 70%),linear-gradient(112deg,#020a1c 0%,#03153a 55%,#020d26 100%)}
.hero::after{display:none}
.hslide.on{min-height:680px}
/* visuel de chaque diapositive, fondu dans le fond par un masque ; --mx/--my (3d.js) l'inclinent vers la souris */
.hart{position:absolute;top:0;right:0;bottom:0;width:55%;z-index:0;opacity:0;transition:opacity .9s;
 -webkit-mask-image:radial-gradient(ellipse 60% 85% at 64% 50%,#000 52%,transparent 100%);mask-image:radial-gradient(ellipse 60% 85% at 64% 50%,#000 52%,transparent 100%)}
.hslide.on .hart{opacity:1}
.hart img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 0;
 transform:perspective(1100px) rotateY(calc(var(--mx,0)*4deg)) rotateX(calc(var(--my,0)*-3deg)) scale(1.04);transition:transform .25s ease-out}
.hbtns{display:flex;flex-wrap:wrap;gap:14px}
.hero .btn.primary{background:#19e0cf;color:#03162b;box-shadow:0 0 30px rgba(25,224,207,.35)}
.hero .btn.primary:hover{background:#19e0cf;filter:brightness(1.12);box-shadow:0 0 40px rgba(25,224,207,.5)}
.hfeat{list-style:none;display:flex;margin-top:40px}
.hfeat li+li{border-left:1px solid rgba(255,255,255,.18)}
.hfeat a{display:flex;flex-direction:column;align-items:center;gap:8px;min-height:44px;padding:2px 20px;text-align:center;font:500 12.5px/1.3 Poppins,sans-serif;color:#d6e2ff;transition:transform .2s,color .2s}
.hfeat a:hover{transform:translateY(-3px);color:#fff}
.hfeat .i{width:30px;height:30px;color:#19e0cf}
@media(max-width:1000px){
 .hero{padding:0} /* annule le padding de l'ancien hero dans site.css */
 .hero,.hslide.on{min-height:760px}
 /* une colonne : le visuel passe en fond assombri derrière le texte */
 .hero .hart img{max-height:none;margin:0}
 .hart::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,10,28,.2),rgba(2,10,28,.7))}
 .hart{width:100%;-webkit-mask-image:radial-gradient(ellipse 100% 100% at 70% 40%,#000 30%,transparent 100%);mask-image:radial-gradient(ellipse 100% 100% at 70% 40%,#000 30%,transparent 100%)}
 .hslide.on .hart{opacity:.45}
 .hart img{object-position:70% 0}
 .hfeat{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 0}
 .hfeat li+li{border-left:0}
 .hfeat a{padding:2px 8px}
}
.hero h1,.hero h2.ht,.pbanner h1{color:var(--heroink)}
.hero h1 em,.hero h2.ht em{color:var(--a1)}
.hero em .hw>span,.hero em .hch{background:linear-gradient(90deg,var(--a1),var(--a2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero p.sub2{color:var(--herosub)}
.harrow{background:var(--harrow-bg);color:var(--harrow-ink);border:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.harrow:hover{background:var(--grad);color:#fff}
.hdots{bottom:24px}
.hdots button i{background:var(--dot)}
.hdots button.on i{background:var(--a1)}
.pbanner{background:radial-gradient(50% 120% at 85% 50%,var(--h1),transparent 70%),var(--soft);border-bottom:1px solid var(--line)}
.pbanner .orb{display:none}
.cta-band{position:relative;overflow:hidden}
.pbanner .wrap,.cta-band .wrap{position:relative;z-index:1}
.fx3d{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}

/* 3D : apparition en bascule + cartes inclinables avec reflet */
.js .reveal{transform:perspective(900px) translateY(34px) rotateX(14deg);transform-origin:50% 100%}
@media(max-width:1000px){.js .reveal.left,.js .reveal.right{transform:perspective(900px) translateY(34px) rotateX(14deg)}} /* une colonne : pas de décalage horizontal (sinon le téléphone dézoome la page) */
.js .reveal.t3d{transition:transform .18s ease-out,opacity .7s,box-shadow .25s;transition-delay:0s}
.js .reveal.t3d:not(:hover){transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .7s,box-shadow .25s}
.t3d{position:relative;transform-style:preserve-3d;will-change:transform}
.t3d::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.16),transparent 55%)}
.t3d:hover::after{opacity:1}
.t3d.sc img,.t3d.tm .gear,.t3d h3{transform:translateZ(36px)}
a.card.t3d img{transform:translateZ(44px)}
a.card.t3d:hover img{transform:translateZ(50px) scale(1.12) rotate(-3deg)}

@media(prefers-reduced-motion:reduce){
 .js .reveal{transform:none}
}