/*
 * style.css — Rémi André · Portfolio
 * ════════════════════════════════════════════════════════════
 * Polices   : Bebas Neue (titres), DM Sans (corps) — Google Fonts
 * Palette   : Variables CSS définies dans :root, section 1
 *             --g2 (dégradé bleu→cyan) = couleur d'accent principale
 *
 * TABLE DES MATIÈRES
 * ──────────────────────────────────────────────────────────
 *  1.  Reset & Variables CSS
 *  2.  Base — body, curseur, scrollbar, images
 *  3.  Navigation desktop + bouton CV
 *  4.  Section Hero (accueil pleine page)
 *  5.  Sections globales & animation Scroll Reveal (.rv)
 *  6.  Section À propos
 *  7.  Section Stack technique (grille + barres de progression)
 *  8.  Section Expériences — Timeline verticale
 *  9.  Section Formations & Certifications
 * 10.  Section Contact (liens + formulaire)
 * 11.  Footer
 * 12.  Navigation mobile — Burger icon + menu overlay
 * 13.  Responsive global @media ≤ 960px
 * 14.  Canvas réseau animé (#net-bg — fond du Hero)
 * 15.  Section Visitor Map (Leaflet)
 * 16.  Section Outils interactifs (Security Audit, analyse réseau)
 * 17.  Widget QR Code
 * 18.  Modale visionneuse diplôme (PDF.js)
 * 19.  Bandeau & Modale Cookies RGPD
 * 20.  Bannière outils (section index)
 * ════════════════════════════════════════════════════════════
 */


/* ── 1. Reset & Variables CSS ─────────────────────────────── */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}

:root{
  /* Palette bleue nuit */
  --navy:   #050d1a;
  --deep:   #080f1e;
  --mid:    #0d2247;
  --blue:   #193870;
  --bright: #2563eb;
  --accent: #38bdf8;
  --glow:   #60a5fa;
  /* Texte */
  --silver: #94a3b8;
  --light:  #e2e8f0;
  --white:  #f8fafc;
  /* Gradients réutilisables */
  --g1: linear-gradient(135deg,#050d1a 0%,#0d2247 55%,#193870 100%);
  --g2: linear-gradient(135deg,#2563eb 0%,#38bdf8 100%);
}


/* ── 2. Base — body, curseur, scrollbar, images ───────────── */

html{scroll-behavior:smooth;}
body{font-family:'DM Sans',sans-serif;background:var(--navy);color:var(--light);overflow-x:hidden;cursor:none;}

/* Grain de bruit en overlay (texture subtile) */
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.3;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");}

/* Curseur personnalisé (point + anneau) */
.cursor,.cursor-ring{position:fixed;border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);}
.cursor{width:10px;height:10px;background:var(--accent);transition:width .3s,height .3s;}
.cursor-ring{width:36px;height:36px;z-index:9998;border:1.5px solid var(--glow);opacity:.42;}

/* Scrollbar fine */
::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-track{background:var(--navy);}
::-webkit-scrollbar-thumb{background:var(--blue);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:var(--bright);}

/* Protection images — pointer-events désactivés sauf #qr-img */
img:not(#qr-img){-webkit-user-drag:none;user-select:none;-webkit-user-select:none;pointer-events:none;}


/* ── 3. Navigation desktop + bouton CV ────────────────────── */

nav{position:fixed;top:0;left:0;right:0;z-index:500;padding:1.2rem 5rem;display:flex;align-items:center;justify-content:space-between;background:rgba(5,13,26,.78);backdrop-filter:blur(22px);border-bottom:1px solid rgba(56,189,248,.07);transition:padding .3s;}
nav.scrolled{padding:.75rem 5rem;}

.nav-logo{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:1.6rem;letter-spacing:.12em;background:var(--g2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-decoration:none;}

.nav-links{display:flex;gap:2.2rem;list-style:none;}
.nav-links a{color:var(--silver);font-size:.83rem;font-weight:500;text-decoration:none;letter-spacing:.06em;text-transform:uppercase;position:relative;transition:color .3s;}
.nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:1px;background:var(--accent);transition:width .3s;}
.nav-links a:hover{color:var(--accent);}
.nav-links a:hover::after{width:100%;}

/* Lien "Contact" dans la nav — encadré */
.nav-cta{padding:.44rem 1.3rem;border:1px solid var(--bright)!important;color:var(--bright)!important;border-radius:5px;}
.nav-cta:hover{background:rgba(37,99,235,.14)!important;}

/* Bouton téléchargement CV (masqué sous 960px) */
.nav-cv{padding:.44rem 1.1rem;background:var(--g2);color:#fff!important;border:none;border-radius:5px;font-family:'DM Sans',sans-serif;font-size:.83rem;font-weight:500;cursor:none;display:inline-flex;align-items:center;gap:.4rem;transition:box-shadow .25s,transform .2s;box-shadow:0 0 16px rgba(37,99,235,.35);letter-spacing:.04em;}
.nav-cv:hover{box-shadow:0 0 28px rgba(37,99,235,.6);transform:translateY(-1px);}
@media(max-width:960px){.nav-cv{display:none;}}


/* ── 4. Section Hero ─────────────────────────────────────── */

#hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:space-between;padding:7rem 4rem 6rem;overflow:hidden;gap:2rem;}

/* Fond radial + animation pulse */
.hero-bg::after{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 65% 55% at 75% 40%,rgba(37,99,235,.2) 0%,transparent 60%),
              radial-gradient(ellipse 38% 38% at 14% 72%,rgba(56,189,248,.1) 0%,transparent 50%);
  animation:pulse 7s ease-in-out infinite alternate;}
@keyframes pulse{0%{opacity:.6}100%{opacity:1}}

/* Grille en fond */
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(56,189,248,.034) 1px,transparent 1px),linear-gradient(90deg,rgba(56,189,248,.034) 1px,transparent 1px);background-size:64px 64px;}

/* Orbes flottants (blur décoratif) */
.orb{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;animation:floatO 9s ease-in-out infinite;}
.o1{width:450px;height:450px;background:rgba(37,99,235,.17);top:-120px;right:-80px;}
.o2{width:280px;height:280px;background:rgba(56,189,248,.11);bottom:80px;left:160px;animation-delay:-4s;}
.o3{width:200px;height:200px;background:rgba(96,165,250,.09);top:38%;right:22%;animation-delay:-7s;}
@keyframes floatO{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-28px) scale(1.04)}}

.hero-content{position:relative;z-index:2;flex:1;min-width:0;max-width:580px;}
.hero-visual{position:relative;z-index:2;width:360px;flex-shrink:0;animation:fR .8s .32s ease both;}

/* Badge "Disponible" */
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.33rem 1rem;border-radius:100px;border:1px solid rgba(56,189,248,.28);background:rgba(56,189,248,.06);font-size:.76rem;color:var(--accent);letter-spacing:.1em;text-transform:uppercase;font-weight:600;margin-bottom:1.4rem;animation:fUp .6s ease both;}
.bdot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:blink 2s ease-in-out infinite;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.22}}

.hero-name{font-family:'Bebas Neue',sans-serif;font-size:clamp(4.5rem,8vw,8rem);font-weight:400;line-height:.92;letter-spacing:.04em;color:var(--white);animation:fUp .6s .1s ease both;}
.hero-name .hl{background:var(--g2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.hero-title{margin-top:1.3rem;font-size:1.05rem;color:var(--silver);font-weight:300;letter-spacing:.02em;animation:fUp .6s .2s ease both;}
.hero-title strong{color:var(--glow);font-weight:500;}
.hero-desc{margin-top:1.3rem;color:var(--silver);font-size:.93rem;line-height:1.78;animation:fUp .6s .28s ease both;}
.hero-desc strong{color:var(--glow);font-weight:500;}

/* Pills certifications */
.hero-certs{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.1rem;animation:fUp .6s .35s ease both;}
.cpill{display:inline-flex;align-items:center;gap:.4rem;padding:.26rem .82rem;border-radius:100px;background:rgba(37,99,235,.15);border:1px solid rgba(37,99,235,.35);font-size:.73rem;color:var(--glow);font-weight:600;}

/* Boutons d'action */
.hero-actions{margin-top:1.5rem;display:flex;gap:1rem;flex-wrap:wrap;animation:fUp .6s .42s ease both;}
.btn-p{padding:.82rem 1.8rem;background:var(--g2);color:#fff;border:none;border-radius:7px;font-family:'DM Sans',sans-serif;font-size:.88rem;font-weight:500;cursor:none;text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;transition:transform .2s,box-shadow .2s;box-shadow:0 0 28px rgba(37,99,235,.36);}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 0 44px rgba(37,99,235,.58);}
.btn-g{padding:.82rem 1.8rem;background:transparent;color:var(--light);border:1px solid rgba(148,163,184,.22);border-radius:7px;font-family:'DM Sans',sans-serif;font-size:.88rem;font-weight:400;cursor:none;text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;transition:border-color .3s,color .3s,transform .2s;}
.btn-g:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);}

/* Compteurs animés (data-count) */
.hero-stats{display:flex;gap:2rem;z-index:2;margin-top:2rem;padding-top:1.8rem;border-top:1px solid rgba(56,189,248,.12);animation:fUp .6s .52s ease both;flex-wrap:wrap;}
.stat{border-left:2px solid rgba(56,189,248,.3);padding-left:1rem;}
.stat-num{font-family:'Bebas Neue',sans-serif;font-size:2.6rem;font-weight:400;letter-spacing:.05em;background:var(--g2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.stat-label{font-size:.72rem;color:var(--silver);letter-spacing:.07em;text-transform:uppercase;}

/* Animations d'entrée */
@keyframes fUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes fR{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}


/* ── 5. Sections globales & Scroll Reveal (.rv) ───────────── */

/* Padding uniforme de toutes les sections */
section{padding:6rem 5rem;position:relative;}

/* En-tête de section : label + titre + barre décorative */
.s-label{display:inline-flex;align-items:center;gap:.6rem;font-size:.73rem;letter-spacing:.17em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:.7rem;}
.s-label::before{content:'';width:26px;height:1px;background:var(--accent);}
.s-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(2.4rem,4vw,3.6rem);font-weight:400;letter-spacing:.05em;color:var(--white);margin-bottom:.6rem;line-height:1;}
.s-title .hl{background:var(--g2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.s-bar{width:44px;height:3px;background:var(--g2);border-radius:2px;margin-bottom:3rem;}

/* Scroll Reveal : les éléments .rv entrent en fondu au scroll
   JS ajoute la classe .on quand l'élément devient visible (IntersectionObserver) */
.rv{opacity:0;transform:translateY(26px);transition:opacity .72s ease,transform .72s ease;}
.rv.on{opacity:1;transform:translateY(0);}

/* Délais d'animation en cascade pour les éléments enfants */
.d1{transition-delay:.12s}
.d2{transition-delay:.22s}
.d3{transition-delay:.32s}


/* ── 6. Section À propos ─────────────────────────────────── */

#about{background:var(--deep);border-top:1px solid rgba(56,189,248,.06);border-bottom:1px solid rgba(56,189,248,.06);}

.about-grid{display:grid;grid-template-columns:1fr 1.65fr;gap:5rem;align-items:start;}
.about-vis{position:relative;}
.about-frame{width:78%;aspect-ratio:1/1;background:linear-gradient(140deg,#0d2247,#193870);border-radius:14px;overflow:hidden;border:1px solid rgba(56,189,248,.14);display:flex;align-items:center;justify-content:center;}
.about-frame img{width:100%;height:100%;object-fit:contain;}

/* Badge "7 ans d'exp." positionné en coin de la photo */
.corner-badge{position:absolute;bottom:-1.2rem;right:-1.2rem;padding:1.3rem 1.6rem;background:var(--mid);border:1px solid rgba(56,189,248,.2);border-radius:12px;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.4);}
.cb-num{font-family:'Bebas Neue',sans-serif;font-size:2.8rem;font-weight:400;letter-spacing:.05em;background:var(--g2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.cb-lbl{font-size:.68rem;color:var(--silver);text-transform:uppercase;letter-spacing:.08em;}

.about-text p{color:var(--silver);line-height:1.82;margin-bottom:1.1rem;font-size:1rem;}
.about-text strong{color:var(--glow);font-weight:500;}

/* Grille d'infos (localisation, disponibilité…) */
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-top:2rem;}
.ii{display:flex;flex-direction:column;gap:.2rem;}
.il{font-size:.7rem;color:var(--silver);text-transform:uppercase;letter-spacing:.1em;}
.iv{font-size:.92rem;color:var(--light);font-weight:500;}


/* ── 7. Section Stack technique ──────────────────────────── */

#skills{background:var(--navy);}

/* Grille de cartes compétences — auto-fill, min 272px */
.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:1.35rem;}

/* Carte compétence */
.sk{background:var(--deep);border:1px solid rgba(56,189,248,.09);border-radius:13px;padding:1.7rem;transition:border-color .3s,transform .3s,box-shadow .3s;position:relative;overflow:hidden;}
.sk::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(37,99,235,.06),transparent);opacity:0;transition:opacity .3s;}
.sk:hover{border-color:rgba(56,189,248,.3);transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.3);}
.sk:hover::before{opacity:1;}

.sk-ico{width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,var(--blue),var(--bright));display:flex;align-items:center;justify-content:center;font-size:1.25rem;margin-bottom:1rem;}
.sk h3{font-family:'Bebas Neue',sans-serif;font-size:1.3rem;font-weight:400;letter-spacing:.06em;color:var(--white);margin-bottom:.8rem;}

/* Tags de technologie (tag normal + tag highlight .h) */
.tags{display:flex;flex-wrap:wrap;gap:.42rem;}
.tag{padding:.22rem .64rem;border-radius:4px;font-size:.74rem;background:rgba(37,99,235,.13);border:1px solid rgba(37,99,235,.23);color:var(--glow);}
.tag.h{background:rgba(56,189,248,.11);border-color:rgba(56,189,248,.24);color:var(--accent);}

/* Barre de progression (animée via JS au scroll — voir data-w dans le HTML) */
.skbw{margin-top:1.1rem;}
.skbr{display:flex;justify-content:space-between;font-size:.74rem;color:var(--silver);margin-bottom:.34rem;}
.skb{height:3px;background:rgba(148,163,184,.1);border-radius:2px;overflow:hidden;}
.skbf{height:100%;background:var(--g2);border-radius:2px;width:0;transition:width 1.3s cubic-bezier(.4,0,.2,1);}

/* Carousel mobile (dots de navigation) — visible sous 600px uniquement */
.skills-dots{display:none;}
.sk-arrow{display:none;}

@media(max-width:600px){
  .skills-dots{display:flex;justify-content:center;gap:.45rem;margin-bottom:1rem;}
  .sd{width:8px;height:8px;border-radius:50%;background:rgba(56,189,248,.2);border:1px solid rgba(56,189,248,.32);transition:background .25s,transform .25s;cursor:pointer;flex-shrink:0;}
  .sd.active{background:rgba(56,189,248,.88);border-color:rgba(56,189,248,.9);transform:scale(1.3);}
  /* overflow-x:hidden bloque le scroll natif — seul le JS contrôle scrollLeft */
  .skills-grid{display:flex;overflow-x:hidden;scrollbar-width:none;gap:.85rem;padding:.2rem 1.2rem 1rem;margin:0 -1.2rem;touch-action:none;}
  .skills-grid::-webkit-scrollbar{display:none;}
  /* Transition CSS sur la carte : scale + glow sur la carte active */
  .sk{flex:0 0 82vw;padding:1.1rem;position:relative;transition:transform .26s cubic-bezier(.4,0,.2,1),box-shadow .26s cubic-bezier(.4,0,.2,1);}
  .sk.sk-active{transform:scale(1.02);box-shadow:0 0 0 1.5px rgba(56,189,248,.45),0 8px 40px rgba(56,189,248,.18);}
  .sk.sk-active::before{opacity:.9;}
  .sk h3{font-size:1.05rem;}
  .tag{font-size:.67rem;padding:.18rem .5rem;}
  .sk-arrow{display:flex;position:absolute;right:.75rem;bottom:.75rem;width:26px;height:26px;border-radius:50%;background:rgba(56,189,248,.1);border:1px solid rgba(56,189,248,.22);align-items:center;justify-content:center;color:rgba(56,189,248,.7);font-size:1.1rem;line-height:1;pointer-events:none;}
  .sk:last-child .sk-arrow{display:none;}
}


/* ── 8. Section Expériences — Timeline verticale ─────────── */

#experience{background:var(--deep);border-top:1px solid rgba(56,189,248,.06);border-bottom:1px solid rgba(56,189,248,.06);}

/* Ligne verticale de la timeline */
.tl{position:relative;padding-left:2.5rem;}
.tl::before{content:'';position:absolute;left:0;top:0;bottom:0;width:1px;background:linear-gradient(to bottom,transparent,rgba(56,189,248,.32),transparent);}

/* Entrée de timeline */
.tli{position:relative;margin-bottom:3.2rem;padding-left:2.2rem;}
.tli::before{content:'';position:absolute;left:-2.62rem;top:.45rem;width:11px;height:11px;border-radius:50%;background:var(--bright);box-shadow:0 0 14px rgba(37,99,235,.7);border:2.5px solid var(--navy);}
.tli.main::before{background:var(--accent);box-shadow:0 0 18px rgba(56,189,248,.8);}

.tl-date{font-size:.75rem;color:var(--accent);letter-spacing:.09em;text-transform:uppercase;font-weight:600;margin-bottom:.5rem;}
.tl-company{font-family:'Bebas Neue',sans-serif;font-size:1.7rem;font-weight:400;letter-spacing:.06em;color:var(--white);margin-bottom:.15rem;}
.tl-role{font-size:.92rem;color:var(--glow);font-weight:500;margin-bottom:1rem;}
.tl-lvl{display:inline-block;margin-left:.55rem;font-size:.72rem;font-weight:400;color:var(--silver);letter-spacing:.04em;font-style:italic;opacity:.85;}

/* Points de mission (liste à puces custom) */
.tl-buls{display:flex;flex-direction:column;gap:.42rem;margin-bottom:1rem;}
.tl-bul{display:flex;align-items:flex-start;gap:.65rem;color:var(--silver);font-size:.89rem;line-height:1.6;}
.tl-bul::before{content:'›';color:var(--accent);font-size:1rem;flex-shrink:0;margin-top:.06rem;}

/* Tags technos de la fiche */
.tl-tags{display:flex;flex-wrap:wrap;gap:.38rem;}
.tl-tag{padding:.19rem .58rem;font-size:.72rem;background:rgba(56,189,248,.07);border:1px solid rgba(56,189,248,.17);border-radius:3px;color:var(--accent);}


/* ── 9. Section Formations & Certifications ──────────────── */

#formations{background:var(--navy);}

/* Sous-titre de sous-section (ex. "Certifications Stormshield") */
.sec-sub{font-family:'Bebas Neue',sans-serif;font-size:1.5rem;font-weight:400;letter-spacing:.07em;color:var(--white);margin:2.5rem 0 1.2rem;}
.sec-sub:first-of-type{margin-top:0;}

/* Grille certifications */
.cert-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:1.3rem;}
.cert{background:var(--deep);border:1px solid rgba(56,189,248,.09);border-radius:13px;padding:1.6rem;transition:all .3s;display:flex;flex-direction:column;gap:.65rem;position:relative;overflow:hidden;}
.cert::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--g2);transform:scaleX(0);transform-origin:left;transition:transform .4s ease;}
.cert:hover{border-color:rgba(56,189,248,.26);transform:translateY(-3px);box-shadow:0 14px 32px rgba(0,0,0,.24);}
.cert:hover::after{transform:scaleX(1);}
.cert.feat{border-color:rgba(37,99,235,.28);}
.cert.feat:hover::after{background:linear-gradient(135deg,#1e3a8a,#0ea5e9);}

.cert-yr{font-size:.73rem;color:var(--accent);letter-spacing:.1em;text-transform:uppercase;font-weight:600;}
.cert-nm{font-family:'Bebas Neue',sans-serif;font-size:1.3rem;font-weight:400;letter-spacing:.05em;color:var(--white);}
.cert-or{font-size:.86rem;color:var(--silver);}

/* Layout logo + contenu côte à côte */
.cert-main-row{display:flex;gap:1rem;align-items:flex-start;}
.cert-badge-side{width:82px;height:auto;flex-shrink:0;border-radius:8px;border:1px solid rgba(56,189,248,.13);box-shadow:0 4px 16px rgba(0,0,0,.35);transition:transform .3s,box-shadow .3s;}
.cert-badge-side:hover{transform:scale(1.06);box-shadow:0 8px 28px rgba(37,99,235,.4);}
.cert-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:.45rem;}
.cert-content .pill{margin-top:.3rem;}
.cert-content .btn-diplome{margin-top:auto;}
@media(max-width:480px){.cert-main-row{flex-direction:column;align-items:flex-start;}.cert-badge-side{width:70px;}}

/* Liste de détails de certification */
.cert-dets{margin-top:.4rem;display:flex;flex-direction:column;gap:.32rem;}
.cert-det{display:flex;align-items:flex-start;gap:.52rem;font-size:.77rem;color:var(--silver);line-height:1.5;}
.cert-det::before{content:'✦';color:var(--bright);font-size:.58rem;flex-shrink:0;margin-top:.22rem;}

/* Pill badge (niveau, statut) */
.pill{display:inline-flex;align-items:center;gap:.38rem;padding:.24rem .78rem;border-radius:100px;width:fit-content;background:rgba(37,99,235,.14);border:1px solid rgba(37,99,235,.28);font-size:.73rem;color:var(--glow);}
.pill.top{background:rgba(56,189,248,.11);border-color:rgba(56,189,248,.28);color:var(--accent);}

/* Grille diplômes (2 colonnes) */
.edu-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem;}
@media(max-width:680px){.edu-grid{grid-template-columns:1fr;}}
.edu{background:var(--deep);border:1px solid rgba(56,189,248,.08);border-radius:13px;padding:1.5rem;display:flex;flex-direction:column;gap:.58rem;transition:all .3s;position:relative;overflow:hidden;}
.edu::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--g2);transform:scaleX(0);transform-origin:left;transition:transform .4s ease;}
.edu:hover{border-color:rgba(56,189,248,.24);transform:translateY(-2px);}
.edu:hover::after{transform:scaleX(1);}
.edu-yr{font-size:.72rem;color:var(--accent);letter-spacing:.1em;text-transform:uppercase;font-weight:600;}
.edu-ti{font-family:'Bebas Neue',sans-serif;font-size:1.2rem;font-weight:400;letter-spacing:.05em;color:var(--white);}
.edu-sc{font-size:.85rem;color:var(--silver);}


/* ── 10. Section Contact ─────────────────────────────────── */

#contact{background:var(--deep);border-top:1px solid rgba(56,189,248,.06);}

.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start;}
.contact-intro{color:var(--silver);line-height:1.8;margin-bottom:2rem;font-size:1rem;}

/* Liens de contact (email, LinkedIn, localisation) */
.clinks{display:flex;flex-direction:column;gap:.88rem;}
.clink{display:flex;align-items:center;gap:1rem;padding:.9rem 1.1rem;border-radius:11px;background:rgba(37,99,235,.06);border:1px solid rgba(37,99,235,.13);text-decoration:none;color:var(--light);transition:all .3s;}
.clink:hover{border-color:var(--accent);background:rgba(56,189,248,.09);transform:translateX(4px);}
.cico{width:40px;height:40px;border-radius:9px;flex-shrink:0;background:linear-gradient(135deg,var(--blue),var(--bright));display:flex;align-items:center;justify-content:center;font-size:1.1rem;}
.ctxt strong{display:block;font-size:.84rem;color:var(--white);}
.ctxt span{font-size:.76rem;color:var(--silver);}

/* Formulaire de contact */
.cform{display:flex;flex-direction:column;gap:1.1rem;}
.fg{display:flex;flex-direction:column;gap:.37rem;}
.fg label{font-size:.75rem;color:var(--silver);letter-spacing:.06em;text-transform:uppercase;}
.fg input,.fg textarea{background:rgba(8,15,30,.85);border:1px solid rgba(56,189,248,.11);border-radius:9px;padding:.82rem 1rem;color:var(--light);font-family:'DM Sans',sans-serif;font-size:.93rem;transition:border-color .3s;outline:none;resize:vertical;}
.fg input:focus,.fg textarea:focus{border-color:rgba(56,189,248,.36);}
.fg textarea{min-height:118px;}


/* ── 11. Footer ──────────────────────────────────────────── */

footer{padding:2rem 5rem;border-top:1px solid rgba(56,189,248,.06);display:flex;align-items:center;justify-content:space-between;background:var(--navy);}
footer p{font-size:.79rem;color:var(--silver);}

.fl{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:1.5rem;letter-spacing:.12em;background:var(--g2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}

.flinks{display:flex;gap:1.5rem;}
.flinks a{font-size:.77rem;color:var(--silver);text-decoration:none;transition:color .3s;}
.flinks a:hover{color:var(--accent);}


/* ── 12. Navigation mobile — Burger icon ─────────────────── */

/* Bouton burger (3 barres → croix via .open) */
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;background:none;border:none;cursor:pointer;padding:4px;z-index:600;position:relative;}
.burger span{display:block;height:2px;width:100%;background:var(--light);border-radius:2px;transition:transform .35s ease, opacity .25s ease, width .3s ease;}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;width:0;}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Menu overlay plein écran (mobile) */
.mob-menu{
  position:fixed;inset:0;z-index:550;
  background:rgba(5,13,26,.97);backdrop-filter:blur(24px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  opacity:0;pointer-events:none;
  transition:opacity .35s ease;
}
.mob-menu.open{opacity:1;pointer-events:all;}
.mob-menu a{
  font-family:'Bebas Neue',sans-serif;font-size:2.8rem;letter-spacing:.1em;
  color:var(--silver);text-decoration:none;
  padding:.6rem 2rem;
  border-bottom:1px solid rgba(56,189,248,.07);width:100%;text-align:center;
  transform:translateY(20px);opacity:0;
  transition:color .25s, transform .4s ease, opacity .4s ease;
}
.mob-menu.open a{transform:translateY(0);opacity:1;}
.mob-menu.open a:nth-child(1){transition-delay:.05s;}
.mob-menu.open a:nth-child(2){transition-delay:.1s;}
.mob-menu.open a:nth-child(3){transition-delay:.15s;}
.mob-menu.open a:nth-child(4){transition-delay:.2s;}
.mob-menu.open a:nth-child(5){transition-delay:.25s;}
.mob-menu.open a:nth-child(6){transition-delay:.3s;}
.mob-menu a:hover{color:var(--accent);background:rgba(56,189,248,.05);}
.mob-menu a.cta{color:var(--accent);border:1px solid rgba(56,189,248,.3);border-radius:8px;margin-top:1rem;width:auto;padding:.7rem 3rem;}


/* ── 13. Responsive global — @media ≤ 960px ─────────────── */

@media(max-width:960px){
  nav{padding:1rem 1.5rem;}
  nav.scrolled{padding:.75rem 1.5rem;}
  section{padding:4rem 1.5rem;}
  #hero{padding:6rem 1.5rem 5rem;}
  .tl{padding-left:1.2rem;}
  .tli{padding-left:.9rem;}
  .tli::before{left:-1.27rem;}
  .tl-company{font-size:1.35rem;}
  .tl-bul{font-size:.83rem;}
  .hero-visual{display:none;}           /* SVG hero masqué sur mobile */
  .hero-content{max-width:100%;}
  .hero-stats{margin-top:2rem;padding-top:1.5rem;}
  .about-grid,.contact-grid{grid-template-columns:1fr;gap:2.5rem;}
  .nav-links{display:none;}             /* Liens nav masqués → burger menu */
  .burger{display:flex;}
  footer{flex-direction:column;gap:.6rem;padding:1.5rem;text-align:center;}
}


/* ── 14. Canvas réseau animé — Fond du Hero ──────────────── */
/* Nœuds + liens + paquets animés — rendu via JS (initNetBg) */

#net-bg{position:absolute;inset:0;z-index:1;pointer-events:none;width:100%;height:100%;}


/* ── 15. Section Visitor Map — Leaflet ───────────────────── */

#visitormap{background:var(--navy);border-top:1px solid rgba(56,189,248,.06);}

.map-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.2rem;}
.map-header h3{font-family:'Bebas Neue',sans-serif;font-size:1.3rem;letter-spacing:.06em;color:var(--white);margin-bottom:.12rem;}
.map-header p{font-size:.77rem;color:var(--silver);}

.map-frame{border-radius:12px;overflow:hidden;border:1px solid rgba(56,189,248,.1);}
#visitor-map{height:360px;background:var(--deep);}
.leaflet-container{background:#020810 !important;}   /* Fond carte sombre */
.map-popup strong{color:var(--white);}

.map-stats{display:flex;gap:2rem;margin-top:1rem;flex-wrap:wrap;}
.mstat strong{display:block;font-family:'Bebas Neue',sans-serif;font-size:1.8rem;letter-spacing:.06em;background:var(--g2);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.mstat span{font-size:.73rem;color:var(--silver);text-transform:uppercase;letter-spacing:.07em;}


/* ── 16. Section Outils interactifs ──────────────────────── */

#tools{background:linear-gradient(180deg,var(--deep) 0%,var(--navy) 100%);border-top:1px solid rgba(56,189,248,.06);border-bottom:1px solid rgba(56,189,248,.06);}
@media(max-width:600px){
  .tool-card{padding:1.2rem;min-width:0;}
  .audit-score{gap:.7rem;padding:.7rem .8rem;}
  .score-num{font-size:2rem;}
  .audit-item{padding:.45rem .7rem;}
  .audit-lbl,.audit-val{font-size:.72rem;}
}

.tool-card{background:var(--deep);border:1px solid rgba(56,189,248,.1);border-radius:14px;padding:1.8rem;display:flex;flex-direction:column;gap:1.2rem;transition:border-color .3s;}
.tool-card:hover{border-color:rgba(56,189,248,.24);}

.tool-header{display:flex;align-items:center;gap:1rem;}
.tool-ico{width:46px;height:46px;border-radius:11px;background:linear-gradient(135deg,var(--blue),var(--bright));display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0;}
.tool-header h3{font-family:'Bebas Neue',sans-serif;font-size:1.3rem;letter-spacing:.06em;color:var(--white);margin-bottom:.15rem;}
.tool-header p{font-size:.77rem;color:var(--silver);}


/* Tableau Security Audit */
.audit-score{display:flex;align-items:center;gap:1rem;padding:.9rem 1.1rem;background:rgba(37,99,235,.1);border:1px solid rgba(37,99,235,.22);border-radius:9px;}
.score-num{font-family:'Bebas Neue',sans-serif;font-size:2.6rem;background:var(--g2);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1;flex-shrink:0;}
.score-desc strong{display:block;font-size:.9rem;color:var(--white);font-weight:500;}
.score-desc span{font-size:.73rem;color:var(--silver);}
.audit-grid{display:flex;flex-direction:column;gap:.5rem;}
.audit-item{display:flex;align-items:center;justify-content:space-between;padding:.52rem .9rem;background:rgba(8,15,30,.7);border-radius:8px;border:1px solid rgba(56,189,248,.07);}
.audit-lbl{font-size:.78rem;color:var(--silver);}
.audit-val{font-size:.77rem;font-weight:600;}
.a-ok{color:#4ade80;}       /* Vert  = OK       */
.a-warn{color:#fbbf24;}     /* Jaune = avertiss. */
.a-info{color:var(--accent);} /* Bleu  = info     */
.a-crit{color:#f87171;}     /* Rouge = critique  */
.audit-section{font-size:.62rem;color:#475569;text-transform:uppercase;letter-spacing:.1em;padding:.55rem .9rem .1rem;margin-top:.25rem;}
.audit-section:first-child{margin-top:0;}


/* ── 17. Widget QR Code ──────────────────────────────────── */

.qr-widget{margin-top:1.8rem;padding:1.4rem 1.6rem;background:var(--deep);border:1px solid rgba(56,189,248,.1);border-radius:13px;display:flex;align-items:center;gap:1.4rem;transition:border-color .3s;}
.qr-widget:hover{border-color:rgba(56,189,248,.24);}
.qr-img-wrap{padding:.7rem;background:#fff;border-radius:8px;flex-shrink:0;}
.qr-img-wrap img{width:110px;height:110px;display:block;}
.qr-info{display:flex;flex-direction:column;gap:.5rem;}
.qr-info strong{font-size:.85rem;color:var(--white);}
.qr-info p{font-size:.77rem;color:var(--silver);line-height:1.6;}
.qr-dl{display:inline-flex;align-items:center;gap:.4rem;padding:.34rem .88rem;border:1px solid rgba(96,165,250,.28);border-radius:6px;font-size:.75rem;color:var(--glow);text-decoration:none;transition:all .3s;width:fit-content;}
.qr-dl:hover{border-color:var(--accent);color:var(--accent);}
@media(max-width:480px){.qr-widget{flex-direction:column;align-items:flex-start;}}


/* ── 18. Modale visionneuse diplôme — PDF.js ─────────────── */
/* Ouverte via viewDiplome(slug, titre) — servie en HMAC token single-use */

#diplome-modal{position:fixed;inset:0;z-index:10500;background:rgba(0,0,0,.88);backdrop-filter:blur(8px);display:none;flex-direction:column;align-items:center;justify-content:center;padding:1rem;cursor:auto;}
#diplome-modal.open{display:flex;}
#diplome-modal *{cursor:auto;}

.dip-box{background:#0b1d3a;border:1px solid rgba(56,189,248,.2);border-radius:14px;width:min(820px,95vw);max-height:90vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.7);}
.dip-bar{display:flex;align-items:center;justify-content:space-between;padding:.7rem 1.1rem;background:rgba(5,13,26,.8);border-bottom:1px solid rgba(56,189,248,.1);flex-shrink:0;}
.dip-title{font-size:.85rem;color:var(--light);font-weight:500;letter-spacing:.03em;}
.dip-nav{display:flex;align-items:center;gap:.6rem;}
.dip-btn{background:rgba(56,189,248,.1);border:1px solid rgba(56,189,248,.2);color:var(--accent);border-radius:6px;padding:.3rem .7rem;font-size:.8rem;cursor:pointer;transition:background .2s;}
.dip-btn:hover{background:rgba(56,189,248,.22);}
.dip-btn:disabled{opacity:.35;cursor:not-allowed;}
.dip-pages{font-size:.78rem;color:var(--silver);min-width:60px;text-align:center;}
.dip-close{background:transparent;border:none;color:var(--silver);font-size:1.3rem;cursor:pointer;padding:.2rem .5rem;border-radius:5px;transition:color .2s;}
.dip-close:hover{color:var(--white);}

.dip-canvas-wrap{overflow-y:auto;flex:1;display:flex;align-items:flex-start;justify-content:center;padding:1rem;background:#050d1a;}
.dip-canvas-wrap canvas{border-radius:4px;box-shadow:0 4px 24px rgba(0,0,0,.5);max-width:100%;height:auto;user-select:none;-webkit-user-drag:none;pointer-events:none;}
.dip-loading{color:var(--silver);font-size:.85rem;padding:3rem;text-align:center;}

/* Bouton "Consulter le certificat" sur les cartes Formations */
.btn-diplome{margin-top:.8rem;padding:.45rem 1rem;background:rgba(56,189,248,.1);border:1px solid rgba(56,189,248,.22);color:var(--accent);border-radius:7px;font-family:'DM Sans',sans-serif;font-size:.78rem;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;transition:background .2s,border-color .2s;width:fit-content;}
.btn-diplome:hover{background:rgba(56,189,248,.2);border-color:rgba(56,189,248,.4);}


/* ── 19. Bandeau Cookies RGPD ────────────────────────────── */
/* Affiché au 1er chargement si aucun consentement en localStorage */

#cookie-banner{position:fixed;bottom:0;left:0;right:0;z-index:9999;background:rgba(5,13,26,.97);border-top:1px solid rgba(56,189,248,.18);backdrop-filter:blur(12px);padding:1.4rem 2rem;transform:translateY(100%);transition:transform .45s cubic-bezier(.4,0,.2,1);box-shadow:0 -8px 40px rgba(0,0,0,.5);}
#cookie-banner.visible{transform:translateY(0);}

.ck-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:2rem;flex-wrap:wrap;}
.ck-text{flex:1;min-width:260px;}
.ck-text strong{display:block;color:var(--white);font-size:.95rem;margin-bottom:.35rem;}
.ck-text p{font-size:.78rem;color:var(--silver);line-height:1.6;margin:0;}
.ck-text a{color:var(--accent);text-decoration:underline;font-size:.76rem;}
.ck-btns{display:flex;gap:.7rem;flex-wrap:wrap;flex-shrink:0;}

/* Boutons du bandeau (accepter / refuser / personnaliser) */
.ck-btn{padding:.55rem 1.2rem;border-radius:7px;font-family:'DM Sans',sans-serif;font-size:.82rem;font-weight:500;cursor:pointer;border:none;transition:all .2s;white-space:nowrap;}
.ck-btn.accept{background:var(--g2);color:#fff;box-shadow:0 0 16px rgba(37,99,235,.4);}
.ck-btn.accept:hover{box-shadow:0 0 28px rgba(37,99,235,.65);transform:translateY(-1px);}
.ck-btn.refuse{background:transparent;color:var(--silver);border:1px solid rgba(148,163,184,.25);}
.ck-btn.refuse:hover{border-color:rgba(148,163,184,.5);color:var(--light);}
.ck-btn.custom{background:rgba(56,189,248,.1);color:var(--accent);border:1px solid rgba(56,189,248,.25);}
.ck-btn.custom:hover{background:rgba(56,189,248,.18);border-color:rgba(56,189,248,.45);}

/* Modale de personnalisation des préférences */
#cookie-modal{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.7);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:1rem;}
#cookie-modal.open{display:flex;}
.ck-modal-box{background:#0b1d3a;border:1px solid rgba(56,189,248,.2);border-radius:14px;padding:2rem;max-width:500px;width:100%;box-shadow:0 24px 60px rgba(0,0,0,.6);}
.ck-modal-box h3{color:var(--white);font-size:1.1rem;margin-bottom:1.2rem;}
.ck-toggle-row{display:flex;justify-content:space-between;align-items:flex-start;padding:.85rem 0;border-bottom:1px solid rgba(56,189,248,.07);gap:1rem;}
.ck-toggle-row:last-of-type{border-bottom:none;}
.ck-toggle-info strong{display:block;font-size:.85rem;color:var(--light);margin-bottom:.2rem;}
.ck-toggle-info span{font-size:.75rem;color:var(--silver);line-height:1.5;}

/* Toggle switch (CSS pur) */
.ck-switch{position:relative;width:40px;height:22px;flex-shrink:0;}
.ck-switch input{opacity:0;width:0;height:0;}
.ck-slider{position:absolute;inset:0;background:rgba(148,163,184,.2);border-radius:22px;cursor:pointer;transition:.3s;}
.ck-slider::before{content:'';position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.3s;}
.ck-switch input:checked+.ck-slider{background:var(--blue);}
.ck-switch input:checked+.ck-slider::before{transform:translateX(18px);}
.ck-switch input:disabled+.ck-slider{opacity:.5;cursor:not-allowed;}

.ck-modal-btns{display:flex;gap:.7rem;margin-top:1.5rem;justify-content:flex-end;}
@media(max-width:600px){.ck-inner{flex-direction:column;gap:1rem;}.ck-btns{width:100%;}.ck-btn{flex:1;text-align:center;}}


/* ── 20. Bannière outils (section index) ────────────────────── */

/* Titre cliquable */
.s-title-link{color:var(--white);-webkit-text-fill-color:var(--white);text-decoration:none;}
.s-title-link:visited{color:var(--white);-webkit-text-fill-color:var(--white);}

/* Bannière principale */
.tools-banner{
  position:relative;display:flex;align-items:center;
  gap:3rem;
  border:1px solid rgba(56,189,248,.16);border-radius:20px;overflow:hidden;
  background:linear-gradient(135deg,rgba(13,34,71,.9) 0%,rgba(8,15,30,.98) 100%);
  padding:3.5rem 4rem;
}
.tools-banner::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 70% 90% at 92% 50%,rgba(37,99,235,.18),transparent),
    radial-gradient(ellipse 40% 60% at 4% 80%,rgba(56,189,248,.09),transparent);
}
.tools-banner::after{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,#2563eb,#38bdf8,#2563eb);
}
.tools-banner-grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(56,189,248,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(56,189,248,.028) 1px,transparent 1px);
  background-size:52px 52px;
}

/* Contenu texte + CTA */
.tools-banner-content{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:flex-start;gap:1.1rem;
  max-width:560px;
}
.tools-banner-sub{
  font-size:.74rem;color:var(--accent);
  letter-spacing:.14em;text-transform:uppercase;
}
.tools-banner-desc{color:var(--silver);font-size:.92rem;line-height:1.75;}

@media(max-width:960px){.tools-banner{flex-direction:column;padding:2.5rem 2rem;gap:2rem;}}
@media(max-width:600px){.tools-banner{padding:2rem 1.5rem;}}

/* ── 21. Lien de navigation actif (page courante) ────────────── */
/* Utilisé sur les sous-pages (outils, veille…) via aria-current="page" */
.nav-links a.nav-active,
.nav-links a[aria-current="page"] {
  color: var(--accent);
  position: relative;
}
.nav-links a.nav-active::after,
.nav-links a[aria-current="page"]::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 1px;
  background: var(--accent);
  border-radius: 1px;
}