@font-face { font-family:"Munika"; src:url("../fonts/munika/munika-regular.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Munika"; src:url("../fonts/munika/munika-semibold.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face { font-family:"Munika"; src:url("../fonts/munika/munika-bold.woff2") format("woff2"); font-weight:800; font-display:swap; }

:root {
    --cyan:   #22D3EE;
    --teal:   #2DD4BF;
    --bg:     #07070F;
    --fg:     rgba(236,238,255,.92);
    --muted:  rgba(236,238,255,.44);
    --line:   rgba(34,211,238,.18);
    --card:   rgba(255,255,255,.04);
    --ease:   cubic-bezier(.2,.8,.2,1);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; background:var(--bg); }
body {
    color:var(--fg);
    font-family:Inter,"Munika",ui-sans-serif,system-ui,sans-serif;
    background: radial-gradient(ellipse 80% 40% at 50% 0%, rgba(34,211,238,.07),transparent),
                radial-gradient(ellipse 60% 30% at 80% 80%, rgba(45,212,191,.05),transparent),
                var(--bg);
    overflow-x:hidden;
    min-width:320px;
}
a { color:inherit; text-decoration:none; }
h1,h2,h3 { font-family:"Munika",Inter,system-ui,sans-serif; }

/* ── Fixed layers ────────────────────────────────── */
.noise,.cursor-glow,.experience-stage,.scene-vignette { position:fixed; inset:0; pointer-events:none; }
.noise { z-index:60; opacity:.04; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E"); }
.cursor-glow { z-index:1; width:480px; height:480px; inset:auto; border-radius:50%; background:rgba(34,211,238,.07); filter:blur(80px); transform:translate(-50%,-50%); }
.experience-stage { z-index:0; background:radial-gradient(circle at 50% 48%,rgba(34,211,238,.05),transparent 28rem),linear-gradient(180deg,rgba(7,7,15,.22),rgba(7,7,15,.1)); }
#experience-canvas { width:100%; height:100%; display:block; }
.scene-vignette { z-index:2;
  background: linear-gradient(90deg,rgba(7,7,15,.90) 0%,rgba(7,7,15,.45) 16%,transparent 30%,transparent 70%,rgba(7,7,15,.45) 84%,rgba(7,7,15,.90) 100%),
              radial-gradient(circle at 50% 46%,transparent 0 30%,rgba(7,7,15,.30) 70%); }
main { position:relative; z-index:5; }

/* ── Header ──────────────────────────────────────── */
.hud-header {
    position:fixed; left:50%; top:12px; z-index:80;
    width:min(1140px,calc(100% - 28px)); min-height:54px;
    transform:translateX(-50%);
    display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0 12px;
    border:1px solid rgba(34,211,238,.12); border-radius:16px;
    background:rgba(7,7,15,.72); backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
    box-shadow:0 1px 0 rgba(34,211,238,.08) inset,0 12px 40px rgba(0,0,0,.45);
}
.monogram { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; color:var(--teal); font-weight:900; font-size:.78rem; background:linear-gradient(135deg,rgba(34,211,238,.14),rgba(45,212,191,.08)); border:1px solid rgba(34,211,238,.16); }
.hud-header nav { display:flex; gap:.18rem; }
.hud-header nav a { min-width:42px; padding:.58rem .7rem; border-radius:11px; color:var(--muted); font-size:.68rem; font-weight:800; letter-spacing:.04em; transition:color .3s var(--ease),background .3s var(--ease); }
.hud-header nav a:hover,.hud-header nav a.is-active { color:var(--cyan); background:rgba(34,211,238,.1); }

/* ── Eyebrow ──────────────────────────────────────── */
.eyebrow { display:inline-flex; align-items:center; gap:.55rem; margin-bottom:.9rem; color:var(--cyan); font-size:.68rem; font-weight:900; letter-spacing:.17em; text-transform:uppercase; }
.eyebrow::before { content:""; width:1.35rem; height:2px; border-radius:99px; background:linear-gradient(90deg,var(--cyan),var(--teal)); }

/* ════════════════════════════════════════════════════
   SECTION 1 — HERO
   ══════════════════════════════════════════════════ */
.hero-section {
    position:relative; display:grid;
    grid-template-columns:1fr 1fr;
    min-height:100svh; overflow:hidden;
}
.hero-content-side {
    display:flex; flex-direction:column; justify-content:center;
    padding:clamp(5rem,10vw,8rem) clamp(2rem,4vw,5rem) clamp(3rem,6vw,5rem) clamp(2rem,6vw,7rem);
    position:relative; z-index:2;
}
.hero-eyebrow { display:inline-flex; align-items:center; gap:.6rem; color:var(--cyan); font-size:.72rem; font-weight:900; letter-spacing:.2em; text-transform:uppercase; margin-bottom:2rem; }
.eyebrow-dot { width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan); animation:pulse-dot 2s ease-in-out infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.7)} }

.hero-title { font-size:clamp(3.5rem,7vw,7.5rem); line-height:.88; font-weight:900; letter-spacing:-.02em; margin-bottom:1.6rem; position:relative; overflow:hidden; }
.title-word { display:inline-block; }
/* Dynamic Light Sweep */
.hero-title::after { content:""; position:absolute; inset:0; background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.13) 50%,transparent 62%); transform:translateX(-120%); animation:lightSweep 4s 1.8s ease-in-out infinite; pointer-events:none; }
@keyframes lightSweep { 0%,100%{transform:translateX(-120%)} 40%,60%{transform:translateX(120%)} }

.hero-job { color:rgba(236,238,255,.80); font-size:clamp(.95rem,1.3vw,1.15rem); line-height:1.75; margin-bottom:2rem; }
.hero-contacts {
    display:grid; grid-template-columns:1fr 1fr; gap:.5rem;
    margin-bottom:2.5rem; max-width:400px;
}
.hc-btn {
    display:flex; align-items:center; gap:.65rem;
    padding:.7rem .9rem; border-radius:12px;
    background:rgba(14,20,34,.72);
    border:1px solid rgba(34,211,238,.13);
    color:var(--fg); text-decoration:none;
    transition:all .28s var(--ease);
    position:relative; overflow:hidden;
}
.hc-btn::before {
    content:''; position:absolute; inset:0;
    background:linear-gradient(135deg,rgba(34,211,238,.08) 0%,rgba(45,212,191,.04) 100%);
    opacity:0; transition:opacity .28s;
}
.hc-btn:hover {
    border-color:rgba(34,211,238,.38); color:var(--cyan);
    transform:translateY(-2px);
    box-shadow:0 6px 24px rgba(34,211,238,.14),0 0 0 1px rgba(34,211,238,.18);
}
.hc-btn:hover::before { opacity:1; }
.hc-btn:nth-child(1){animation:btnFloat 3.2s ease-in-out infinite}
.hc-btn:nth-child(2){animation:btnFloat 3.2s ease-in-out infinite .4s}
.hc-btn:nth-child(3){animation:btnFloat 3.2s ease-in-out infinite .8s}
.hc-btn:nth-child(4){animation:btnFloat 3.2s ease-in-out infinite 1.2s}
@keyframes btnFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.hc-btn:hover .hc-icon { background:rgba(34,211,238,.16); color:var(--cyan); }
.hc-icon {
    flex-shrink:0; width:30px; height:30px;
    display:flex; align-items:center; justify-content:center;
    border-radius:8px; background:rgba(34,211,238,.07);
    color:rgba(34,211,238,.8);
    transition:all .28s var(--ease);
}
.hc-info { display:flex; flex-direction:column; min-width:0; }
.hc-label {
    font-size:.55rem; font-weight:900; letter-spacing:.12em;
    text-transform:uppercase; color:var(--muted);
    line-height:1; margin-bottom:.18rem;
}
.hc-value {
    font-size:.74rem; font-weight:700; line-height:1.3;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    color:inherit;
}
.hero-scroll-cue { display:inline-flex; align-items:center; gap:.7rem; color:var(--muted); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; transition:color .25s; margin-top:auto; padding-top:2rem; }
.hero-scroll-cue:hover { color:var(--cyan); }
.scroll-wheel { width:22px; height:36px; border:1.5px solid rgba(34,211,238,.35); border-radius:99px; display:flex; justify-content:center; padding-top:5px; }
.scroll-dot { width:4px; height:8px; border-radius:99px; background:var(--cyan); animation:scrollDown 2s ease-in-out infinite; }
@keyframes scrollDown { 0%,100%{transform:translateY(0);opacity:1} 80%{transform:translateY(12px);opacity:0} }

/* Photo side */
/* ── Hero photo — portrait vertical ultra premium ───────────────────── */
.hero-photo-side {
    display:flex; align-items:center; justify-content:center;
    position:relative; z-index:2;
}
.hero-photo-wrap {
    position:relative;
    width:clamp(220px,24vw,320px);
    height:clamp(360px,66vh,520px);
    border-radius:20px; flex-shrink:0; margin-left:0.5cm;
}
/* Halo ambiant — gradient pur sans filter:blur (évite les conflits WebGL) */
.depth-back {
    position:absolute; inset:-30px;
    background:radial-gradient(ellipse 90% 85%,rgba(34,211,238,.18) 0%,rgba(45,212,191,.07) 45%,transparent 70%);
    border-radius:40px; z-index:0; pointer-events:none;
    animation:photoGlow 4s ease-in-out infinite;
}
/* Photo remplit le cadre */
.hero-photo-img {
    position:absolute; inset:0; width:100%; height:100%;
    border-radius:20px; object-fit:cover; object-position:center top;
    z-index:2; will-change:transform;
}
/* Fondu bas — portrait émerge du fond */
.photo-glow {
    position:absolute; bottom:0; left:0; right:0; height:30%;
    border-radius:0 0 20px 20px; z-index:3; pointer-events:none;
    background:linear-gradient(to bottom,transparent,rgba(7,7,15,.80));
}
/* Reflet verre haut-gauche */
.glass-panel {
    position:absolute; inset:0; border-radius:20px; z-index:4; pointer-events:none;
    background:linear-gradient(145deg,rgba(255,255,255,.09) 0%,transparent 42%);
}
/* Pas de rotation */
.sweep-line { display:none; }
/* Cadre lumineux pulsant */
.hero-photo-wrap::before {
    content:''; position:absolute; inset:-1px; border-radius:21px;
    background:none; pointer-events:none; z-index:5;
    box-shadow:
        inset 0 0 0 1px rgba(34,211,238,.24),
        inset 0 1px 0 rgba(255,255,255,.12),
        0 0 0 1px rgba(34,211,238,.10),
        0 -6px 32px rgba(34,211,238,.22),
        0 0 70px rgba(34,211,238,.08);
    animation:framePulse 3.5s ease-in-out infinite;
}
/* Ligne néon en haut du cadre */
.hero-photo-wrap::after {
    content:''; position:absolute; top:-1px; left:18%; right:18%; height:2px;
    background:linear-gradient(90deg,transparent,var(--cyan),var(--teal),var(--cyan),transparent);
    border-radius:99px; z-index:6; pointer-events:none;
    box-shadow:0 0 14px var(--cyan),0 0 28px rgba(34,211,238,.38);
    animation:topLineGlow 3.5s ease-in-out infinite;
}
@keyframes framePulse {
    0%,100%{box-shadow:inset 0 0 0 1px rgba(34,211,238,.18),inset 0 1px 0 rgba(255,255,255,.09),0 0 0 1px rgba(34,211,238,.07),0 -4px 22px rgba(34,211,238,.14),0 0 50px rgba(34,211,238,.05)}
    50%{box-shadow:inset 0 0 0 1px rgba(34,211,238,.38),inset 0 1px 0 rgba(255,255,255,.16),0 0 0 1px rgba(34,211,238,.14),0 -8px 42px rgba(34,211,238,.30),0 0 90px rgba(34,211,238,.12)}
}
@keyframes topLineGlow {
    0%,100%{opacity:.5;box-shadow:0 0 10px var(--cyan),0 0 18px rgba(34,211,238,.28)}
    50%{opacity:1;box-shadow:0 0 22px var(--cyan),0 0 48px rgba(34,211,238,.52)}
}
@keyframes photoGlow {
    0%,100%{opacity:.45} 50%{opacity:.9}
}

/* ════════════════════════════════════════════════════
   SECTION 2 — PROFIL
   ══════════════════════════════════════════════════ */
.profil-section { min-height:420vh; }
.profil-sticky { position:sticky; top:0; height:100svh; display:flex; align-items:center; overflow:hidden; }
.profil-inner {
    width:min(800px,90vw); margin:0 auto;
    padding:clamp(4rem,8vw,7rem) clamp(1.5rem,4vw,3rem);
    position:relative;
}
.profil-inner .eyebrow { margin-bottom:2.5rem; }
.profil-paras { display:grid; }
.profil-para {
    grid-area:1/1; color:var(--fg); font-size:clamp(1.2rem,2.2vw,1.75rem);
    line-height:1.7; opacity:0; transform:translateY(40px);
    transition:none;
}
.profil-para .hl { color:var(--cyan); font-weight:700; }
.profil-progress-bar { position:absolute; bottom:2.5rem; left:clamp(1.5rem,4vw,3rem); right:clamp(1.5rem,4vw,3rem); height:1px; background:rgba(34,211,238,.15); }
.profil-progress-fill { height:100%; width:0%; background:var(--cyan); transition:none; box-shadow:0 0 8px var(--cyan); }

/* ════════════════════════════════════════════════════
   SECTION 3 — EXPÉRIENCES
   ══════════════════════════════════════════════════ */
.exp-section { position:relative; }
.exp-sticky { position:relative; width:100%; height:100svh; overflow:hidden; display:flex; flex-direction:column; }
.exp-sidebar {
    position:absolute; left:0; top:0; bottom:0; z-index:10;
    width:160px;
    display:flex; flex-direction:column; justify-content:center; gap:1.4rem;
    padding:2.5rem 1.4rem;
    background:linear-gradient(90deg,rgba(7,7,15,.96) 72%,transparent 100%);
}
.exp-sidebar-label { color:var(--muted); font-size:.6rem; font-weight:900; letter-spacing:.16em; text-transform:uppercase; line-height:1.6; }
.exp-timeline-nav { display:flex; align-items:stretch; gap:.85rem; flex:1; min-height:0; }
.exp-vtrack { width:1px; flex-shrink:0; background:rgba(34,211,238,.18); position:relative; }
.exp-vfill { position:absolute; top:0; left:0; right:0; height:0%; background:var(--cyan); box-shadow:0 0 8px var(--cyan); }
.exp-years { display:flex; flex-direction:column; justify-content:space-between; flex:1; }
.exp-year { color:var(--muted); font-size:.72rem; font-weight:900; letter-spacing:.06em; cursor:default; transition:color .25s,transform .25s; }
.exp-year.is-active { color:var(--cyan); transform:translateX(5px); }
.exp-scroll-hint { color:var(--muted); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; }
.exp-track { flex:1; display:flex; will-change:transform; }
.exp-panel { width:100vw; height:100%; flex-shrink:0; display:flex; align-items:center; overflow:hidden; }
.exp-panel-inner {
    padding:clamp(2rem,4vw,4rem) clamp(2.5rem,7vw,8rem);
    padding-left:180px;
    max-width:900px;
}
.exp-meta { display:flex; align-items:baseline; gap:1.5rem; margin-bottom:1.2rem; }
.exp-num { font-size:clamp(3rem,8vw,6rem); font-weight:900; line-height:1; color:rgba(34,211,238,.12); font-family:"Munika",sans-serif; }
.exp-period { color:var(--cyan); font-size:.8rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.exp-company { color:var(--teal); font-size:.92rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; margin-bottom:.6rem; }
.exp-title { font-size:clamp(2.2rem,4.5vw,4.5rem); line-height:.95; font-weight:900; margin-bottom:1.2rem; }
.exp-desc { color:rgba(236,238,255,.82); font-size:clamp(.9rem,1.1vw,1.05rem); line-height:1.7; margin-bottom:1.5rem; max-width:580px; }
.exp-list { list-style:none; display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:.45rem .5rem; margin-bottom:1.5rem; }
.exp-list li { color:rgba(236,238,255,.78); font-size:.84rem; line-height:1.5; padding-left:1rem; position:relative; }
.exp-list li::before { content:"→"; position:absolute; left:0; color:var(--cyan); font-size:.7rem; top:.05em; }
.exp-tags { display:flex; flex-wrap:wrap; gap:.4rem; }
.exp-tags span { border:1px solid rgba(34,211,238,.2); border-radius:999px; padding:.32rem .65rem; color:rgba(236,238,255,.82); background:rgba(34,211,238,.06); font-size:.72rem; font-weight:700; }

/* ════════════════════════════════════════════════════
   SECTION 4 — FORMATION (conserve le layout existant)
   ══════════════════════════════════════════════════ */
.story-section {
    position:relative; min-height:100svh;
    display:grid;
    grid-template-columns:minmax(1rem,1fr) minmax(260px,420px) minmax(32vw,1.05fr) minmax(260px,420px) minmax(1rem,1fr);
    align-items:center; gap:clamp(1rem,3vw,2rem);
    padding:clamp(5.6rem,8vw,7rem) 0 clamp(3rem,6vw,4rem);
    isolation:isolate;
}
.story-section::after { content:""; position:absolute; left:50%; top:11vh; bottom:11vh; width:1px; opacity:.22; background:linear-gradient(transparent,var(--line),transparent); }
.split-register { align-items:start; padding-top:clamp(7rem,10vw,9rem); }
.register-column.left { grid-column:2/3; }
.register-column.right { grid-column:4/5; text-align:right; }
.register-column h2 { color:var(--fg); font-size:clamp(2.35rem,4.6vw,4.9rem); line-height:.98; font-weight:900; letter-spacing:-.015em; }
.line-item { padding:1.05rem 0; border-top:1px solid rgba(34,211,238,.12); }
.line-item span { color:var(--cyan); font-size:.75rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.line-item h3 { margin-top:.35rem; color:var(--fg); font-size:clamp(1.05rem,1.7vw,1.45rem); line-height:1.15; }
.line-item p { display:block; margin-top:.35rem; color:rgba(236,238,255,.80); line-height:1.55; }
.line-item small { display:block; margin-top:.35rem; color:rgba(236,238,255,.75); font-size:.78rem; line-height:1.5; }

/* ════════════════════════════════════════════════════
   SECTION 5+6 — COMPÉTENCES
   ══════════════════════════════════════════════════ */
.skills-stage { align-items:start; padding-top:clamp(7rem,10vw,9rem); }
.skills-left { grid-column:2/3; position:relative; z-index:4; }
.skills-right { grid-column:4/5; position:relative; z-index:4; }
.skills-left h2 { color:var(--fg); font-size:clamp(2.35rem,4.6vw,4.9rem); line-height:.98; font-weight:900; }
.skill-line { padding:1rem 0; border-top:1px solid rgba(34,211,238,.12); }
.skill-line h3 { color:var(--teal); font-size:clamp(1.05rem,1.8vw,1.5rem); }
.skill-line p { margin-top:.5rem; color:rgba(236,238,255,.80); line-height:1.7; }

/* ════════════════════════════════════════════════════
   SECTION 7 — CONTACT
   ══════════════════════════════════════════════════ */
.contact-stage { min-height:76svh; }
.contact-left { grid-column:2/3; position:relative; z-index:4; }
.contact-links-block { display:flex; flex-direction:column; gap:.6rem; margin-top:2rem; }
.contact-agenda { grid-column:3/5; padding-right:clamp(1.5rem,4vw,3rem); position:relative; z-index:4; }
.contact-left h2 { color:var(--fg); font-size:clamp(2.35rem,4.6vw,4.9rem); line-height:.98; font-weight:900; }
.mag-link { transition:color .25s var(--ease); }
.mag-link:first-child { color:var(--teal); font-weight:900; }
.mag-link:hover { color:var(--cyan); }

/* ── Reduced motion ──────────────────────────────── */
@media(prefers-reduced-motion:reduce) {
    *,*::before,*::after { animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
    .hero-title::after,.sweep-line { display:none; }
}

/* ── Tablet ──────────────────────────────────────── */
@media(max-width:1020px) {
    .hero-section { grid-template-columns:1fr; min-height:100svh; }
    .hero-photo-side { position:relative; z-index:2; justify-content:center; }
    .hero-contacts { grid-template-columns:1fr; max-width:100%; }
    .hero-photo-wrap { width:140px; height:210px; }
    .hero-content-side { padding:6rem 1.5rem 3rem; position:relative; z-index:2; }
    .hero-title { font-size:clamp(3rem,12vw,5.5rem); }
    .story-section {
        grid-template-columns:1rem minmax(0,1fr) 1rem;
        align-items:start; min-height:auto;
        padding-top:6.5rem; padding-bottom:4rem;
    }
    .story-section::after { left:auto; right:1rem; }
    .register-column.left,.register-column.right,.skills-left,.skills-right,.contact-left,.contact-right {
        grid-column:2/3; text-align:left; justify-items:start;
    }
    .exp-topbar { padding:.8rem 1rem; gap:.8rem; }
    .exp-panel-inner { padding:2rem 1.5rem; }
    .exp-num { font-size:clamp(2rem,10vw,4rem); }
    .exp-title { font-size:clamp(1.8rem,6vw,3rem); }
    .exp-list { grid-template-columns:1fr; }
}

/* ── Mobile ──────────────────────────────────────── */
@media(max-width:680px) {
    .hud-header { width:calc(100% - 18px); min-height:52px; padding:0 9px; }
    .hud-header nav { max-width:calc(100vw - 76px); overflow-x:auto; scrollbar-width:none; }
    .hud-header nav::-webkit-scrollbar { display:none; }
    .hud-header nav a { min-width:auto; padding:.52rem .55rem; font-size:.62rem; }
    .scene-vignette { background:linear-gradient(90deg,rgba(7,7,15,.88),transparent 38%,transparent 62%,rgba(7,7,15,.88)),linear-gradient(180deg,rgba(7,7,15,.35),transparent 22%,transparent 70%,rgba(7,7,15,.45)); }
    .profil-para { font-size:clamp(1rem,4.5vw,1.4rem); }
    .exp-sidebar { display:none; }
    .exp-panel-inner { padding-left:clamp(1.5rem,6vw,3rem); }
}

/* Filtre sombre global — améliore le contraste partout */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 3;
    background: rgba(5, 5, 12, 0.58);
    pointer-events: none;
}

/* ── Widget planificateur visio ────────────────────────────── */
.visio-card {
    background:rgba(8,12,26,.88);
    border:1px solid rgba(34,211,238,.15);
    border-radius:20px; padding:1.6rem;
    color:var(--fg);
}
.visio-card-header {
    display:flex; align-items:center; gap:.85rem;
    padding-bottom:1.2rem; margin-bottom:1.2rem;
    border-bottom:1px solid rgba(34,211,238,.1);
}
.visio-card-icon {
    width:38px; height:38px; border-radius:10px; flex-shrink:0;
    background:linear-gradient(135deg,rgba(34,211,238,.18),rgba(45,212,191,.1));
    border:1px solid rgba(34,211,238,.2);
    display:flex; align-items:center; justify-content:center;
    color:var(--cyan);
}
.visio-card-title { font-size:.92rem; font-weight:800; letter-spacing:.01em; }
.visio-card-sub   { font-size:.72rem; color:var(--muted); margin-top:.15rem; }

/* Navigation semaine */
.visio-week-nav {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:1rem;
}
.visio-week-btn {
    width:30px; height:30px; border-radius:8px; border:none; cursor:pointer;
    background:rgba(255,255,255,.06); color:var(--muted);
    display:flex; align-items:center; justify-content:center;
    transition:all .2s;
}
.visio-week-btn:hover:not(:disabled) { background:rgba(34,211,238,.12); color:var(--cyan); }
.visio-week-btn:disabled { opacity:.28; cursor:not-allowed; }
.visio-week-label { font-size:.78rem; font-weight:700; color:rgba(236,238,255,.75); }

/* Grille des jours */
.visio-days {
    display:grid; grid-template-columns:repeat(6,1fr); gap:.4rem;
    margin-bottom:1.1rem;
}
.visio-day-btn {
    display:flex; flex-direction:column; align-items:center;
    padding:.55rem .2rem; border-radius:10px; border:none; cursor:pointer;
    background:rgba(255,255,255,.05); color:rgba(236,238,255,.7);
    transition:all .2s;
}
.visio-day-btn:hover:not(:disabled):not(.is-active) { background:rgba(34,211,238,.08); color:var(--fg); }
.visio-day-btn.is-active { background:linear-gradient(135deg,#06b6d4,#0891b2); color:#fff; box-shadow:0 4px 14px rgba(6,182,212,.32); }
.visio-day-btn.is-past { opacity:.28; cursor:not-allowed; }
.visio-day-name { font-size:.6rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; opacity:.7; margin-bottom:.2rem; }
.visio-day-num  { font-size:.95rem; font-weight:900; }

/* Label section */
.visio-section-label {
    font-size:.6rem; font-weight:900; letter-spacing:.14em;
    text-transform:uppercase; color:var(--muted); margin-bottom:.6rem;
}

/* Grille créneaux */
.visio-slots-grid {
    display:grid; grid-template-columns:repeat(4,1fr); gap:.4rem;
    margin-bottom:.8rem;
}
.visio-slot-btn {
    padding:.55rem .3rem; border-radius:10px; border:1px solid rgba(255,255,255,.1);
    background:rgba(255,255,255,.05); color:rgba(236,238,255,.75);
    font-size:.8rem; font-weight:700; cursor:pointer; transition:all .2s;
}
.visio-slot-btn:hover:not(.is-active) { border-color:rgba(34,211,238,.3); color:var(--cyan); }
.visio-slot-btn.is-active { background:linear-gradient(135deg,#06b6d4,#0891b2); border-color:transparent; color:#fff; box-shadow:0 4px 12px rgba(6,182,212,.28); }

/* Hints */
.visio-hint { text-align:center; padding:1.4rem .5rem; color:var(--muted); font-size:.8rem; }

/* Bouton suivant */
.visio-next-btn {
    width:100%; padding:.75rem; border-radius:12px; border:none; cursor:pointer;
    background:linear-gradient(135deg,#06b6d4,#0891b2);
    color:#fff; font-size:.84rem; font-weight:800;
    box-shadow:0 4px 14px rgba(6,182,212,.32);
    transition:all .25s; margin-top:.4rem;
}
.visio-next-btn:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(6,182,212,.42); }

/* Étape 2 */
.visio-recap {
    display:flex; align-items:center; gap:.75rem;
    padding:.75rem 1rem; border-radius:12px; margin-bottom:1rem;
    background:rgba(34,211,238,.07); border:1px solid rgba(34,211,238,.18);
    color:var(--cyan);
}
.visio-recap-date { font-size:.82rem; font-weight:800; color:var(--fg); }
.visio-recap-sub  { font-size:.72rem; color:var(--muted); margin-top:.1rem; }

/* Plateformes */
.visio-platforms {
    display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; margin-bottom:1rem;
}
.visio-platform-btn {
    padding:.5rem .3rem; border-radius:8px; border:1px solid rgba(255,255,255,.1);
    background:rgba(255,255,255,.05); color:rgba(236,238,255,.7);
    font-size:.74rem; font-weight:700; cursor:pointer; transition:all .2s;
}
.visio-platform-btn.is-active { background:linear-gradient(135deg,#06b6d4,#0891b2); border-color:transparent; color:#fff; }
.visio-platform-btn:hover:not(.is-active) { border-color:rgba(34,211,238,.28); color:var(--fg); }

/* Formulaire */
.visio-form { display:flex; flex-direction:column; gap:.5rem; margin-bottom:1rem; }
.visio-form input {
    width:100%; padding:.7rem 1rem; border-radius:10px;
    border:1px solid rgba(255,255,255,.1);
    background:rgba(255,255,255,.05); color:var(--fg);
    font-size:.84rem; font-family:inherit; outline:none;
    transition:border-color .2s;
}
.visio-form input::placeholder { color:var(--muted); }
.visio-form input:focus { border-color:rgba(34,211,238,.4); }

/* Actions */
.visio-actions { display:flex; gap:.6rem; }
.visio-back-btn {
    padding:.7rem 1.1rem; border-radius:10px; border:none; cursor:pointer;
    background:rgba(255,255,255,.07); color:rgba(236,238,255,.65);
    font-size:.82rem; font-weight:700; transition:all .2s;
}
.visio-back-btn:hover { background:rgba(255,255,255,.12); color:var(--fg); }
.visio-confirm-btn {
    flex:1; padding:.7rem; border-radius:10px; border:none; cursor:pointer;
    background:linear-gradient(135deg,#06b6d4,#0891b2); color:#fff;
    font-size:.84rem; font-weight:800;
    display:flex; align-items:center; justify-content:center; gap:.45rem;
    box-shadow:0 4px 14px rgba(6,182,212,.3); transition:all .25s;
}
.visio-confirm-btn:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 6px 20px rgba(6,182,212,.42); }
.visio-confirm-btn:disabled { opacity:.5; cursor:not-allowed; }

/* Confirmation */
.visio-done-wrap { text-align:center; padding:1.8rem .5rem; }
.visio-done-icon {
    width:56px; height:56px; border-radius:16px; margin:0 auto 1rem;
    background:linear-gradient(135deg,#10b981,#059669);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 24px rgba(16,185,129,.32); color:#fff;
}
.visio-done-title { font-size:1.1rem; font-weight:900; margin-bottom:.5rem; }
.visio-done-sub   { font-size:.82rem; color:var(--muted); line-height:1.6; }

/* Mobile */
@media (max-width:900px) {
    /* Grille mobile = 1rem · 1fr · 1rem (3 colonnes)
       contact-left ET contact-agenda doivent tous deux tenir dans col 2/3
       et s'empiler verticalement (grid-row explicite) */
    .contact-left   { grid-column:2/3; grid-row:1; }
    .contact-agenda { grid-column:2/3; grid-row:2; margin-top:2rem; padding-right:0; }
    .contact-stage  { row-gap:0; }
}
@media (max-width:680px) {
    .contact-left   { grid-column:2/3; grid-row:1; }
    .contact-agenda { grid-column:2/3; grid-row:2; }
    .visio-days         { grid-template-columns:repeat(3,1fr); }
    .visio-slots-grid   { grid-template-columns:repeat(3,1fr); }
    .visio-platforms    { grid-template-columns:repeat(2,1fr); }
    .hero-contacts.contact-btns { max-width:100%; }
}

/* ── Bouton télécharger CV — design fin ultra-premium ────────── */
.cv-dl-btn {
    grid-column:1/-1;
    display:flex; align-items:center; justify-content:center; gap:.65rem;
    padding:.62rem 1.2rem; border-radius:10px; text-decoration:none;
    position:relative; overflow:hidden; margin-top:.3rem;
    background:transparent;
    border:1px solid rgba(34,211,238,.28);
    color:var(--cyan);
    font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    transition:color .3s,border-color .3s,box-shadow .3s,transform .3s;
}
/* Fond gradient animé en dessous du texte */
.cv-dl-btn::before {
    content:''; position:absolute; inset:0;
    background:linear-gradient(110deg,rgba(34,211,238,.0) 0%,rgba(34,211,238,.08) 50%,rgba(45,212,191,.0) 100%);
    background-size:200% 100%;
    animation:cvGradientShift 3s ease-in-out infinite;
    transition:opacity .3s;
}
/* Reflet lumineux qui traverse */
.cv-dl-btn::after {
    content:''; position:absolute;
    top:0; left:-80%; width:40%; height:100%;
    background:linear-gradient(90deg,transparent,rgba(34,211,238,.18),transparent);
    transform:skewX(-18deg);
    animation:cvSweep 4s ease-in-out infinite 1s;
}
.cv-dl-btn:hover {
    color:#fff; border-color:rgba(34,211,238,.7);
    transform:translateY(-2px);
    box-shadow:0 0 0 1px rgba(34,211,238,.2),0 4px 20px rgba(34,211,238,.22);
}
.cv-dl-btn:hover::before { opacity:2; }
.cv-dl-icon {
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; color:inherit;
    animation:cvBounce 2.4s ease-in-out infinite;
}
.cv-dl-text { font-size:.76rem; font-weight:700; letter-spacing:.1em; }
.cv-dl-badge {
    font-size:.56rem; font-weight:800; letter-spacing:.12em;
    border:1px solid rgba(34,211,238,.35); padding:.15rem .38rem;
    border-radius:4px; opacity:.75; margin-left:.1rem;
}
@keyframes cvGradientShift {
    0%,100%{background-position:0% 50%} 50%{background-position:100% 50%}
}
@keyframes cvSweep {
    0%{left:-80%} 40%,100%{left:120%}
}
@keyframes cvBounce {
    0%,100%{transform:translateY(0)} 50%{transform:translateY(2px)}
}