/* ════════════════════════════════════════════════════
   Portfolio Annaëlle Champiau — shared.css v8
   Direction artistique : Cozy Warm Neo-Brut (light) / DeFi Cyberpunk (dark)
   Light : crème chaude · pêche pâle · Baloo 2 / Quicksand · bordures épaisses
   Dark  : OLED noir · Neon Mint · Violet électrique · Cyan · Grid circuit
════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800&family=Exo+2:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Baloo+2:wght@400;500;600;700;800&family=Quicksand:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ── Curseurs personnalisés par thème ── */
:root {
  /* Dark — Cyber : flèche HUD neon mint + viseur */
  --cursor: url('../images/cyber_cursor_32.png') 1 1, auto;
}
[data-theme="light"] {
  /* Light — Cozy : flèche crème néo-brut + étoile sparkle */
  --cursor: url('../images/cozy_cursor_32.png') 1 1, auto;
}

/* ── Tokens DARK — DeFi Cyberpunk ── */
:root {
  --bg:          #060612;   /* OLED noir absolu, légèrement violet */
  --bg-2:        #09091A;
  --bg-3:        #0D0D22;
  --surface:     #0B0B1C;
  --border:      rgba(0,255,159,.06);
  --border-h:    rgba(0,255,159,.4);
  --text:        #C8D8F8;   /* blanc bleuté — lisible sur noir */
  --text-soft:   #6A7A9D;
  --text-muted:  #28304A;
  --accent:      #00FF9F;   /* neon mint — DeFi green */
  --accent-dim:  rgba(0,255,159,.07);
  --accent-h:    #00E890;
  --violet:      #BF5FFF;   /* violet électrique */
  --teal:        #00D4FF;   /* cyan électrique */
  --gold:        #FFD454;   /* DeFi gold */
  --red:         #FF3370;   /* neon rose-rouge */
  --green:       #00FF9F;
  --nav-bg:      rgba(6,6,18,.97);
  --shadow-sm:   0 1px 3px rgba(0,0,0,.95), 0 0 0 1px rgba(0,255,159,.04);
  --shadow-md:   0 4px 20px rgba(0,0,0,.98), 0 0 30px rgba(0,255,159,.05);
  --shadow-lg:   0 8px 48px #000,            0 0 60px rgba(0,255,159,.07);
  --radius:      6px;       /* cyberpunk = angles nets */
  --radius-sm:   4px;
  --ease:        cubic-bezier(.4,0,.2,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur:         .22s;
  --font-display:'Orbitron', 'JetBrains Mono', monospace;  /* HUD / DeFi */
  --font-body:   'Exo 2', 'Sora', sans-serif;              /* lisible tech */
  --font-mono:   'JetBrains Mono', monospace;
}

/* ── Tokens LIGHT — Cozy Warm Neo-Brut ── */
[data-theme="light"] {
  --font-display:'Baloo 2', sans-serif;   /* chaud, arrondi, cozy */
  --font-body:   'Quicksand', sans-serif; /* aérien, doux, lisible */
  --font-mono:   'JetBrains Mono', monospace;
  --radius:      18px;
  --radius-sm:   10px;
  --bg:          #FDF8F4;   /* crème ivoire très doux */
  --bg-2:        #F7F0E8;   /* crème légèrement plus foncée */
  --bg-3:        #EEE5D8;   /* beige sable doux */
  --surface:     #FFFFFF;
  --border:      #2A2240;   /* aubergine foncé — néo-brut */
  --border-h:    #F7A68A;   /* pêche pâle au hover */
  --text:        #2A2240;   /* aubergine profond — chaud */
  --text-soft:   #4A3F60;   /* mauve-gris */
  --text-muted:  #8C84A0;   /* lavande douce */
  --accent:      #F7A68A;   /* pêche pâle — chaleureux */
  --accent-dim:  rgba(247,166,138,.13);
  --accent-h:    #EE8A6A;   /* pêche foncé hover */
  --violet:      #A98FD8;   /* lilas doux */
  --teal:        #5BC8C0;   /* menthe/turquoise douce */
  --gold:        #F0B860;   /* caramel doux */
  --red:         #E86070;   /* corail chaud */
  --nav-bg:      #FFFFFF;
  --shadow-sm:   3px 3px 0 #2A2240;
  --shadow-md:   4px 4px 0 #2A2240;
  --shadow-lg:   5px 5px 0 #2A2240;
}

@media(prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; } }
*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; font-size:16px; }

body{
  background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-weight:400; line-height:1.7;
  transition:background .4s,color .4s;
  overflow-x:hidden;
  cursor:var(--cursor);
}

/* Grain subtil */
body::before{
  content:''; position:fixed; inset:0; z-index:1; pointer-events:none;
  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.035'/%3E%3C/svg%3E");
  opacity:.5;
}

/* Skip link */
.skip{ position:fixed;top:-44px;left:1rem;z-index:9999;background:var(--accent);color:#000;padding:.45rem 1rem;border-radius:4px;font-family:var(--font-mono);font-size:.72rem;text-decoration:none;transition:top .2s; }
.skip:focus{ top:1rem; }

/* ════════════════════════════
   NAV
════════════════════════════ */
.site-nav{
  position:fixed; inset-inline:0; top:0; z-index:200;
  background:var(--nav-bg);
  backdrop-filter:blur(20px) saturate(140%);
  border-bottom:1px solid var(--border);
  transition:background .4s,border-color .3s;
}
.nav-inner{
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:.8rem 2rem; gap:1rem;
}
.nav-brand{
  font-family:var(--font-display); font-weight:700; font-size:1.2rem;
  color:var(--text); text-decoration:none; letter-spacing:-.01em;
  white-space:nowrap; flex-shrink:0; transition:color .2s;
}
.nav-brand:hover{ color:var(--accent); }
.nav-brand em{ font-style:italic; font-weight:400; color:var(--accent); }

.nav-menu{ display:flex; align-items:center; gap:.1rem; list-style:none; }
.nav-item{ position:relative; }
.nav-link{
  font-family:var(--font-body); font-size:.78rem; font-weight:500;
  color:var(--text-soft); text-decoration:none; letter-spacing:.02em;
  padding:.4rem .75rem; border-radius:var(--radius-sm);
  transition:color var(--dur),background var(--dur);
  display:block; white-space:nowrap;
}
.nav-link:hover,.nav-link.active{ color:var(--accent); background:var(--accent-dim); }
.nav-link--accent{ color:var(--accent)!important; border:1px solid var(--border-h); border-radius:var(--radius-sm); padding:.35rem .85rem!important; }
.nav-link.active{ font-weight:600; }

.nav-dropdown{ position:relative; }
.nav-dropdown>.nav-link::after{ content:' ▾'; font-size:.6rem; opacity:.5; }
.dropdown-menu{
  position:absolute; top:calc(100% + 8px); left:50%;
  transform:translateX(-50%) translateY(-6px);
  min-width:200px;
  background:var(--bg-3); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-lg);
  padding:.5rem;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s,transform .2s,visibility .2s;
  z-index:300;
}
.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu{
  opacity:1; visibility:visible; pointer-events:all;
  transform:translateX(-50%) translateY(0);
}
.dropdown-menu a{
  display:flex; align-items:center; gap:.6rem;
  font-size:.78rem; color:var(--text-soft);
  padding:.55rem .9rem; border-radius:var(--radius-sm);
  text-decoration:none; transition:color var(--dur),background var(--dur);
}
.dropdown-menu a::before{ content:''; width:4px; height:4px; border-radius:50%; background:var(--accent); opacity:0; transition:opacity .2s; flex-shrink:0; }
.dropdown-menu a:hover{ color:var(--accent); background:var(--accent-dim); }
.dropdown-menu a:hover::before{ opacity:1; }

.nav-right{ display:flex; align-items:center; gap:.75rem; flex-shrink:0; }

/* ── Theme Switch (uiverse.io/JustCode14/red-dingo-61) ── */
.switch{font-size:13px;position:relative;display:inline-block;width:4em;height:2.2em;border-radius:30px;box-shadow:0 0 10px rgba(0,0,0,.1);flex-shrink:0;}
.switch input{opacity:0;width:0;height:0;}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#2a2a2a;transition:.4s;border-radius:30px;overflow:hidden;}
.slider:before{position:absolute;content:"";height:1.2em;width:1.2em;border-radius:20px;left:.5em;bottom:.5em;transition:.4s;transition-timing-function:cubic-bezier(.81,-.04,.38,1.5);box-shadow:inset 8px -4px 0px 0px #fff;}
.switch input:checked+.slider{background-color:#00a6ff;}
.switch input:checked+.slider:before{transform:translateX(1.8em);box-shadow:inset 15px -4px 0px 15px #ffcf48;}
.star{background-color:#fff;border-radius:50%;position:absolute;width:5px;transition:all .4s;height:5px;}
.star_1{left:2.5em;top:.5em;}
.star_2{left:2.2em;top:1.2em;}
.star_3{left:3em;top:.9em;}
.switch input:checked~.slider .star{opacity:0;}
.cloud{width:3.5em;position:absolute;bottom:-1.4em;left:-1.1em;opacity:0;transition:all .4s;}
.switch input:checked~.slider .cloud{opacity:1;}

.nav-toggle{
  display:none; flex-direction:column; gap:4px;
  background:none; border:none; cursor:pointer; padding:.4rem;
}
.nav-toggle span{ width:20px; height:1.5px; background:var(--text); border-radius:2px; display:block; transition:transform .22s,opacity .22s; }
.nav-toggle.open span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

@media(max-width:1100px){
  .nav-toggle{ display:flex; }
  .nav-menu{ display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; background:var(--nav-bg); border-bottom:1px solid var(--border); padding:.8rem 1.5rem 1rem; backdrop-filter:blur(20px); }
  .nav-menu.open{ display:flex; }
  .nav-link{ font-size:.88rem; padding:.7rem .8rem; }
  .dropdown-menu{ position:static; transform:none; opacity:1; visibility:visible; pointer-events:all; box-shadow:none; border:none; padding:.2rem 0 .2rem 1rem; background:transparent; }
}

/* ════════════════════════════
   PAGE HERO
════════════════════════════ */
.page-hero{
  padding-top:85px; background:var(--bg);
  border-bottom:1px solid var(--border);
  position:relative; overflow:hidden;
}
.page-hero::after{
  content:''; position:absolute; top:-30%; right:-8%;
  width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle,rgba(0,255,159,.06) 0%,rgba(0,212,255,.02) 40%,transparent 65%);
  pointer-events:none;
}
.page-hero-inner{
  max-width:1200px; margin:0 auto; padding:3.5rem 2rem 3rem;
  position:relative; z-index:1;
}
.page-breadcrumb{
  font-family:var(--font-mono); font-size:.6rem;
  color:var(--text-muted); letter-spacing:.12em; text-transform:uppercase;
  margin-bottom:.85rem; display:flex; align-items:center; gap:.5rem;
}
.page-breadcrumb a{ color:var(--text-muted); text-decoration:none; transition:color .2s; }
.page-breadcrumb a:hover{ color:var(--accent); }
.page-title{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(2.2rem,5.5vw,3.8rem);
  letter-spacing:-.02em; line-height:1.05; color:var(--text);
  margin-bottom:.65rem;
}
.page-title em{ font-style:italic; font-weight:400; color:var(--accent); }
.page-subtitle{ font-size:1rem; color:var(--text-soft); max-width:580px; line-height:1.85; }

/* ════════════════════════════
   LAYOUT
════════════════════════════ */
.container{ max-width:1200px; margin:0 auto; padding:0 2rem; }
.section{ padding:80px 0 64px; }
.section--alt{ background:var(--bg-2); }

.section-label{
  font-family:var(--font-mono); font-size:.58rem;
  color:var(--accent); letter-spacing:.28em; text-transform:uppercase;
  margin-bottom:.65rem; display:flex; align-items:center; gap:.65rem;
}
.section-label::before{ content:''; width:22px; height:1px; background:var(--accent); flex-shrink:0; }
.section-heading{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.7rem,3.5vw,2.6rem);
  letter-spacing:-.02em; color:var(--text); margin-bottom:.6rem; line-height:1.1;
}
.section-heading em{ font-style:italic; font-weight:400; color:var(--accent); }
.section-sub{ font-size:.95rem; color:var(--text-soft); max-width:520px; line-height:1.85; }

/* Reveal */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .65s var(--ease),transform .65s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.d1{transition-delay:.07s}.d2{transition-delay:.14s}.d3{transition-delay:.21s}.d4{transition-delay:.28s}

/* Card */
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:1.6rem;
  box-shadow:var(--shadow-sm);
  transition:border-color var(--dur),box-shadow var(--dur),transform var(--dur),background .4s;
}
.card:hover{ border-color:var(--border-h); box-shadow:var(--shadow-md); }
.card--lift:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }

/* Tags */
.tag{
  font-family:var(--font-mono); font-size:.56rem;
  padding:.22rem .7rem; border-radius:99px; display:inline-block;
  text-transform:uppercase; letter-spacing:.08em;
}
.tag-blue   { background:rgba(96,165,250,.1);   border:1px solid rgba(96,165,250,.2);   color:#60a5fa; }
.tag-violet { background:rgba(167,139,250,.1);  border:1px solid rgba(167,139,250,.2);  color:#a78bfa; }
.tag-green  { background:rgba(52,211,153,.1);   border:1px solid rgba(52,211,153,.25);  color:#34d399; }
.tag-teal   { background:rgba(45,212,191,.1);   border:1px solid rgba(45,212,191,.25);  color:#2dd4bf; }
.tag-gold   { background:rgba(251,191,36,.1);   border:1px solid rgba(251,191,36,.25);  color:#fbbf24; }
.tag-red    { background:rgba(248,113,113,.1);  border:1px solid rgba(248,113,113,.2);  color:#f87171; }
.tag-gray   { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);  color:var(--text-soft); }
[data-theme="light"] .tag-blue   { background:rgba(14,165,233,.08);  border-color:rgba(14,165,233,.22);  color:#0284c7; }
[data-theme="light"] .tag-violet { background:rgba(109,40,217,.08);  border-color:rgba(109,40,217,.22);  color:#6d28d9; }
[data-theme="light"] .tag-green  { background:rgba(8,145,178,.08);   border-color:rgba(8,145,178,.22);   color:#0891b2; }
[data-theme="light"] .tag-teal   { background:rgba(6,182,212,.08);   border-color:rgba(6,182,212,.22);   color:#0891b2; }
[data-theme="light"] .tag-gold   { background:rgba(180,83,9,.08);    border-color:rgba(180,83,9,.22);    color:#b45309; }
[data-theme="light"] .tag-red    { background:rgba(220,38,38,.08);   border-color:rgba(220,38,38,.22);   color:#dc2626; }
[data-theme="light"] .tag-gray   { background:rgba(11,28,53,.04);    border-color:rgba(11,28,53,.12);    color:var(--text-muted); }

/* Buttons */
.btn{
  font-family:var(--font-mono); font-size:.65rem;
  letter-spacing:.16em; text-transform:uppercase;
  padding:.75rem 1.7rem; border-radius:var(--radius-sm);
  text-decoration:none; cursor:pointer; border:none;
  display:inline-flex; align-items:center; gap:.6rem;
  transition:transform var(--dur),box-shadow var(--dur),background var(--dur),color var(--dur),border-color var(--dur);
}
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.btn-primary{ background:var(--accent); color:#000; font-weight:700; box-shadow:0 0 20px rgba(0,255,159,.25); }
.btn-primary:hover{ background:var(--accent-h); transform:translateY(-2px); box-shadow:0 0 36px rgba(0,255,159,.45); }
.btn-outline{ background:transparent; color:var(--text-soft); border:1px solid var(--border); }
.btn-outline:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }
.btn-sm{ font-size:.58rem; padding:.45rem 1rem; }

/* Divider */
.hr{ height:1px; background:linear-gradient(90deg,transparent,var(--border),transparent); margin:0; }

/* ════════════════════════════
   FOOTER
════════════════════════════ */
.site-footer{
  border-top:1px solid var(--border);
  padding:1.5rem 2rem;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.8rem;
  background:var(--bg-2); font-size:.72rem; color:var(--text-muted);
  transition:background .4s;
}
.site-footer a{ color:var(--accent); text-decoration:none; }
.site-footer a:hover{ text-decoration:underline; }
.footer-links{ display:flex; gap:1.4rem; }

/* ════════════════════════════
   PROJET / STAGE / ATELIER — détail partagé
════════════════════════════ */
.project-header{ display:flex; align-items:flex-start; gap:2rem; margin-bottom:2.8rem; flex-wrap:wrap; }
.project-logo{
  width:80px; height:80px; border-radius:var(--radius); flex-shrink:0;
  background:var(--bg-3); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--accent);
}
.project-meta{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:.8rem; }
.project-desc-intro{ font-size:.95rem; color:var(--text-soft); line-height:1.9; max-width:640px; }

.project-section{ margin-bottom:2.8rem; }
.project-section-title{
  font-family:var(--font-mono); font-size:.58rem; color:var(--text-muted);
  letter-spacing:.22em; text-transform:uppercase;
  margin-bottom:1.1rem; display:flex; align-items:center; gap:.7rem;
}
.project-section-title::after{ content:''; flex:1; height:1px; background:var(--border); }

.context-block{ font-size:.9rem; color:var(--text-soft); line-height:1.9; }
.context-block p{ margin-bottom:1.1rem; }
.context-block p:last-child{ margin-bottom:0; }

.tools-grid{ display:flex; flex-wrap:wrap; gap:.8rem; }
.tool-chip{
  display:flex; align-items:center; gap:.6rem;
  padding:.5rem 1rem; border-radius:var(--radius-sm);
  background:var(--bg-3); border:1px solid var(--border);
  font-size:.8rem; color:var(--text-soft);
  transition:border-color var(--dur),color var(--dur);
}
.tool-chip:hover{ border-color:var(--accent); color:var(--accent); }

.feat-list{ list-style:none; }
.feat-list li{
  padding:.65rem 0; border-bottom:1px solid var(--border);
  display:flex; gap:.85rem; align-items:flex-start;
  font-size:.88rem; color:var(--text-soft); line-height:1.75;
}
.feat-list li:last-child{ border-bottom:none; }
.feat-icon{ color:var(--accent); flex-shrink:0; margin-top:.15rem; }

.code-block{
  background:var(--bg); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:1.2rem 1.4rem;
  font-family:var(--font-mono); font-size:.72rem;
  color:var(--text-soft); line-height:1.8; overflow-x:auto;
  margin:.8rem 0; position:relative;
}
.code-block::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(var(--violet),var(--accent));
  border-radius:var(--radius-sm) 0 0 var(--radius-sm);
}
.code-block .kw { color:var(--violet); }
.code-block .fn { color:var(--accent); }
.code-block .str{ color:var(--gold); }
.code-block .cm { color:var(--text-muted); font-style:italic; }

.screenshots-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
@media(max-width:560px){ .screenshots-grid{ grid-template-columns:1fr; } }
.screenshot-placeholder{
  aspect-ratio:16/9; border-radius:var(--radius);
  background:var(--bg-3); border:1px dashed var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:.75rem; color:var(--text-muted); font-family:var(--font-mono); text-align:center; padding:1rem;
}

/* ── Compétences pills grid ── */
.comp-pills-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; }
@media(max-width:560px){ .comp-pills-grid{ grid-template-columns:1fr; } }
.comp-pill{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:.75rem 1rem; display:flex; align-items:center; gap:.75rem; transition:border-color var(--dur); }
.comp-pill:hover{ border-color:var(--border-h); }
.comp-pill-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.comp-pill-code{ font-family:var(--font-mono); font-size:.6rem; color:var(--accent); flex-shrink:0; }
.comp-pill-label{ font-size:.78rem; color:var(--text-soft); }

/* Result boxes */
.result-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:1.5rem; }
@media(max-width:800px){ .result-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px){ .result-grid{ grid-template-columns:1fr; } }
.result-box{ padding:1.3rem; text-align:center; border-left:2px solid var(--accent); }
.result-num{ font-family:var(--font-display); font-size:1.8rem; font-weight:700; color:var(--accent); }
.result-label{ font-size:.74rem; color:var(--text-soft); margin-top:.2rem; }

/* Sibling nav */
.sibling-nav{
  display:flex; justify-content:space-between; align-items:center;
  padding:1rem 1.75rem; background:var(--bg-2); border-top:1px solid var(--border);
  font-size:.78rem;
}
.sibling-link{
  display:flex; align-items:center; gap:.5rem;
  color:var(--text-soft); text-decoration:none;
  font-family:var(--font-mono); font-size:.65rem;
  letter-spacing:.1em; text-transform:uppercase; transition:color .2s;
}
.sibling-link:hover{ color:var(--accent); }
.sibling-label{ font-size:.7rem; color:var(--text-muted); font-family:var(--font-body); margin-bottom:.15rem; }
.sibling-title{ font-weight:600; color:var(--text); }

/* ════════════════════════════
   COMPÉTENCES
════════════════════════════ */
.comp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
@media(max-width:900px){ .comp-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .comp-grid{ grid-template-columns:1fr; } }

.comp-card{ padding:1.5rem; }
.comp-num{
  font-family:var(--font-mono); font-size:.6rem; font-weight:500;
  color:var(--accent); letter-spacing:.14em;
  margin-bottom:.75rem; display:flex; align-items:center; gap:.6rem;
}
.comp-num::before{ content:''; flex:1; max-width:28px; height:1px; background:var(--accent); }
.comp-title{ font-family:var(--font-display); font-size:1.05rem; font-weight:700; color:var(--text); margin-bottom:.35rem; line-height:1.2; }
.comp-sub{ font-size:.75rem; color:var(--accent); font-family:var(--font-mono); letter-spacing:.06em; margin-bottom:.8rem; opacity:.8; }
.comp-list{ list-style:none; }
.comp-list li{
  font-size:.82rem; color:var(--text-soft); line-height:1.65;
  padding:.3rem 0; border-bottom:1px solid var(--border);
  display:flex; gap:.6rem; align-items:flex-start;
}
.comp-list li:last-child{ border-bottom:none; }
.comp-list li::before{ content:'·'; color:var(--accent); font-size:1.2rem; flex-shrink:0; margin-top:-.05rem; }

.comp-source{ display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.8rem; }
.source-pill{ font-family:var(--font-mono); font-size:.52rem; padding:.18rem .6rem; border-radius:99px; letter-spacing:.07em; text-transform:uppercase; }
.sp-stage   { background:rgba(96,165,250,.1);  border:1px solid rgba(96,165,250,.2);  color:#60a5fa; }
.sp-atelier { background:rgba(167,139,250,.1); border:1px solid rgba(167,139,250,.2); color:#a78bfa; }
.sp-perso   { background:rgba(52,211,153,.1);  border:1px solid rgba(52,211,153,.2);  color:#34d399; }

.cat-header{ padding:1.8rem 0 .6rem; display:flex; align-items:center; gap:1rem; margin-bottom:1.5rem; }
.cat-num{ font-family:var(--font-display); font-size:3.2rem; font-weight:700; color:var(--border-h); line-height:1; flex-shrink:0; letter-spacing:-.04em; }
.cat-title{ font-family:var(--font-display); font-size:1.45rem; font-weight:700; color:var(--text); }
.cat-desc{ font-size:.84rem; color:var(--text-soft); margin-top:.2rem; }
.cat-line{ flex:1; height:1px; background:var(--border); min-width:20px; }

.legend{ display:flex; flex-wrap:wrap; gap:.7rem; margin-bottom:2rem; }
.legend-item{ display:flex; align-items:center; gap:.5rem; font-size:.78rem; color:var(--text-soft); }
.legend-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.dot-stages   { background:#60a5fa; }
.dot-ateliers { background:#a78bfa; }
.dot-transv   { background:#34d399; }

/* ════════════════════════════
   CV
════════════════════════════ */
.skill-bar-item{ margin-bottom:1rem; }
.skill-bar-top{ display:flex; justify-content:space-between; margin-bottom:.4rem; }
.skill-bar-name{ font-size:.85rem; color:var(--text); font-weight:500; }
.skill-bar-pct{ font-family:var(--font-mono); font-size:.62rem; color:var(--accent); }
.skill-track{ height:2px; background:var(--bg-3); border-radius:99px; overflow:hidden; }
.skill-fill{ height:100%; width:0%; border-radius:99px; background:linear-gradient(90deg,var(--teal),var(--accent)); transition:width 1.2s var(--ease); }

.cv-layout{ display:grid; grid-template-columns:250px 1fr; gap:3rem; }
@media(max-width:780px){ .cv-layout{ grid-template-columns:1fr; } }

.cv-avatar{
  width:110px; height:110px; border-radius:50%;
  background:linear-gradient(135deg,var(--teal),var(--accent));
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1.5rem; box-shadow:0 0 40px rgba(0,255,159,.15);
  position:relative;
}
.cv-avatar::after{
  content:''; position:absolute; inset:-4px; border-radius:50%;
  border:1.5px solid transparent; border-top-color:var(--accent);
  animation:cv-ring 6s linear infinite;
}
@keyframes cv-ring{ to{transform:rotate(360deg)} }

.cv-name{ font-family:var(--font-display); font-weight:700; font-size:1.7rem; letter-spacing:-.02em; color:var(--text); line-height:1.05; margin-bottom:.3rem; }
.cv-title-line{ font-size:.8rem; color:var(--accent); font-family:var(--font-mono); letter-spacing:.09em; margin-bottom:1.8rem; }
.cv-block{ margin-bottom:2rem; }
.cv-block-label{ font-family:var(--font-mono); font-size:.56rem; color:var(--text-muted); letter-spacing:.25em; text-transform:uppercase; margin-bottom:.75rem; padding-bottom:.5rem; border-bottom:1px solid var(--border); }
.cv-contact-item{ display:flex; align-items:center; gap:.75rem; font-size:.82rem; color:var(--text-soft); padding:.4rem 0; border-bottom:1px solid var(--border); }
.cv-contact-item:last-child{ border-bottom:none; }
.cv-contact-item a{ color:var(--accent); text-decoration:none; }
.cv-contact-item a:hover{ text-decoration:underline; }

.timeline-section{ margin-bottom:2.8rem; }
.timeline-section-title{ font-family:var(--font-mono); font-size:.58rem; color:var(--accent); letter-spacing:.22em; text-transform:uppercase; margin-bottom:1.4rem; display:flex; align-items:center; gap:.7rem; }
.timeline-section-title::after{ content:''; flex:1; height:1px; background:var(--border); }
.timeline-item{ position:relative; padding-left:2rem; margin-bottom:2rem; }
.timeline-item::before{ content:''; position:absolute; left:0; top:.5rem; width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px rgba(52,211,153,.5); }
.timeline-item::after{ content:''; position:absolute; left:3.5px; top:1.2rem; bottom:-1.5rem; width:1px; background:linear-gradient(var(--border),transparent); }
.timeline-item:last-child::after{ display:none; }
.tl-date{ font-family:var(--font-mono); font-size:.6rem; color:var(--text-muted); letter-spacing:.1em; margin-bottom:.25rem; }
.tl-title{ font-family:var(--font-display); font-weight:700; font-size:1rem; color:var(--text); margin-bottom:.2rem; }
.tl-place{ font-size:.82rem; color:var(--text-soft); font-style:italic; margin-bottom:.55rem; }
.tl-desc{ font-size:.82rem; color:var(--text-soft); line-height:1.7; }
.tl-desc li{ margin-left:1.2rem; margin-bottom:.18rem; }

/* ════════════════════════════
   VEILLE
════════════════════════════ */
.veille-intro-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-bottom:2.5rem; }
@media(max-width:660px){ .veille-intro-grid{ grid-template-columns:1fr; } }
.veille-stat{ padding:1.4rem; text-align:center; }
.veille-stat-num{ font-family:var(--font-display); font-size:2.4rem; font-weight:700; color:var(--accent); line-height:1; }
.veille-stat-label{ font-size:.78rem; color:var(--text-soft); margin-top:.4rem; }

.pros-cons{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
@media(max-width:560px){ .pros-cons{ grid-template-columns:1fr; } }
.pros-block{ background:rgba(52,211,153,.04); border:1px solid rgba(52,211,153,.14); border-radius:var(--radius); padding:1.4rem; }
.cons-block{ background:rgba(248,113,113,.04); border:1px solid rgba(248,113,113,.14); border-radius:var(--radius); padding:1.4rem; }
.pros-title,.cons-title{ font-family:var(--font-mono); font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; margin-bottom:.9rem; }
.pros-title{ color:var(--accent); }
.cons-title{ color:var(--red); }
.pros-list,.cons-list{ list-style:none; font-size:.83rem; color:var(--text-soft); line-height:1.75; }
.pros-list li,.cons-list li{ padding:.25rem 0; display:flex; gap:.65rem; }
.pros-list li::before{ content:'✓'; color:var(--accent); flex-shrink:0; }
.cons-list li::before{ content:'✗'; color:var(--red); flex-shrink:0; }

/* ════════════════════════════
   CONTACT
════════════════════════════ */
.contact-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:3.5rem; align-items:start; }
@media(max-width:700px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-info-title{ font-family:var(--font-display); font-size:1.6rem; font-weight:700; letter-spacing:-.02em; color:var(--text); margin-bottom:.85rem; line-height:1.15; }
.contact-info-desc{ font-size:.92rem; color:var(--text-soft); line-height:1.9; margin-bottom:2rem; }
.contact-item{
  display:flex; align-items:center; gap:.85rem;
  padding:.7rem 1rem; border:1px solid var(--border); border-radius:var(--radius-sm);
  font-size:.82rem; color:var(--text-soft); text-decoration:none;
  margin-bottom:.55rem; background:var(--surface);
  transition:border-color var(--dur),color var(--dur),background var(--dur),transform var(--dur);
}
.contact-item:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-dim); transform:translateX(4px); }

.form-label{ font-family:var(--font-mono); font-size:.55rem; color:var(--text-muted); letter-spacing:.18em; text-transform:uppercase; display:block; margin-bottom:.45rem; }
.form-input,.form-textarea{
  width:100%; background:var(--bg-3); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:.75rem 1rem;
  color:var(--text); font-family:var(--font-body); font-size:.9rem;
  outline:none; resize:none;
  transition:border-color var(--dur),box-shadow var(--dur),background .4s,color .4s;
}
.form-input:focus,.form-textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(52,211,153,.1); background:var(--surface); }
.form-textarea{ min-height:100px; }
.form-row{ margin-bottom:1.1rem; }
.form-error{ font-family:var(--font-mono); font-size:.55rem; color:var(--red); margin-top:.3rem; display:none; }
.form-row.has-error .form-input,.form-row.has-error .form-textarea{ border-color:var(--red); }
.form-row.has-error .form-error{ display:block; }
.btn-submit{
  width:100%; padding:.85rem; font-family:var(--font-mono); font-size:.68rem;
  letter-spacing:.18em; text-transform:uppercase; font-weight:700;
  background:var(--accent); color:#000; border:none; border-radius:var(--radius-sm);
  cursor:pointer; box-shadow:0 0 20px rgba(0,255,159,.22);
  transition:opacity .2s,transform .2s,box-shadow .2s;
}
.btn-submit:hover{ opacity:.9; transform:translateY(-2px); box-shadow:0 0 36px rgba(0,255,159,.45); }
.btn-submit:disabled{ opacity:.4; cursor:not-allowed; transform:none; }


/* ════════════════════════════════════════════════════
   THÈME LIGHT — Claymorphism Neo-Brut (LearnHub style) — Overrides composants
════════════════════════════════════════════════════ */

/* Typographie light : Baloo 2 chaud + Quicksand aérien */
[data-theme="light"] body{ line-height:1.85; background:var(--bg); }
[data-theme="light"] body::before{ display:none; }
[data-theme="light"] body::after{ display:none; }
/* Baloo 2 a ses propres arrondi — pas de letter-spacing négatif */
[data-theme="light"] .hero-title{ letter-spacing:-.01em; line-height:1.0; font-weight:800; }
[data-theme="light"] .section-heading{ letter-spacing:0; font-weight:800; }
[data-theme="light"] .page-title{ letter-spacing:-.01em; font-weight:800; }
[data-theme="light"] .contact-info-title{ letter-spacing:-.01em; font-weight:800; }
[data-theme="light"] .cv-name{ letter-spacing:-.01em; font-weight:800; }
[data-theme="light"] .cat-num{ letter-spacing:-.02em; }

/* ── Navbar flottante centrée (style LearnHub) ── */
[data-theme="light"] .site-nav{
  top:12px;
  left:0;
  right:0;
  inset-inline:0;
  transform:none;
  width:calc(100% - 64px);
  max-width:1220px;
  margin:0 auto;
  border-radius:var(--radius);
  border:2.5px solid var(--border);
  border-bottom:2.5px solid var(--border);
  box-shadow:var(--shadow-sm);
  backdrop-filter:none;
}
[data-theme="light"] .site-nav::after{ display:none; }
[data-theme="light"] .hero{ padding-top:100px; }
[data-theme="light"] .page-hero{ padding-top:100px; }

/* ── Cards neo-brut (épaisse bordure + ombre décalée) ── */
[data-theme="light"] .card{
  border:2.5px solid var(--border);
  box-shadow:var(--shadow-sm);
}
[data-theme="light"] .card:hover{
  border-color:var(--border);
  box-shadow:var(--shadow-md);
}
[data-theme="light"] .card--lift:hover{
  transform:translate(-2px,-2px);
  box-shadow:var(--shadow-lg);
}
[data-theme="light"] .card::after{ display:none; }

/* ── Project cards ── */
[data-theme="light"] .pcard{
  border:2.5px solid var(--border);
  box-shadow:var(--shadow-sm);
}
[data-theme="light"] .pcard:hover{
  border-color:var(--border);
  transform:translate(-2px,-2px);
  box-shadow:var(--shadow-lg);
}
[data-theme="light"] .pcard::after{ display:none; }

/* ── Boutons neo-brut (pill + thick border + offset shadow) ── */
[data-theme="light"] .btn{
  font-family:var(--font-display); font-size:.88rem;
  letter-spacing:0; text-transform:none; font-weight:700;
  border-radius:99px; padding:.7rem 1.7rem;
}
[data-theme="light"] .btn-primary{
  background:var(--accent); color:#fff;
  border:2.5px solid var(--border);
  box-shadow:var(--shadow-sm);
}
[data-theme="light"] .btn-primary:hover{
  background:var(--accent-h);
  transform:translate(-2px,-2px);
  box-shadow:var(--shadow-md);
}
[data-theme="light"] .btn-outline{
  background:#F7E9DF; color:var(--text);
  border:2.5px solid var(--border);
  box-shadow:var(--shadow-sm);
}
[data-theme="light"] .btn-outline:hover{
  background:#F5D5C4;
  transform:translate(-2px,-2px);
  box-shadow:var(--shadow-md);
  color:var(--text); border-color:var(--border);
}
[data-theme="light"] .btn-submit{
  background:var(--accent); color:#fff; font-weight:700;
  border:2.5px solid var(--border);
  box-shadow:var(--shadow-sm); border-radius:var(--radius-sm);
  font-family:var(--font-display); font-size:.9rem;
  letter-spacing:0; text-transform:none;
}
[data-theme="light"] .btn-submit:hover{
  background:var(--accent-h);
  transform:translate(-2px,-2px);
  box-shadow:var(--shadow-md);
}

/* ── Tags cozy warm (pill pastel + dark border) ── */
[data-theme="light"] .tag{
  font-family:var(--font-display); font-size:.72rem;
  font-weight:700; letter-spacing:.01em; text-transform:none;
  border-width:2px; border-color:var(--border);
  border-radius:99px;
}
/* Palette pastel chaude — tons pêche/lavande/sable */
[data-theme="light"] .tag-blue   { background:#E0EBFF; color:#1E3A8A; border-color:var(--border); }
[data-theme="light"] .tag-violet { background:#EDE8FF; color:#4C1D95; border-color:var(--border); }
[data-theme="light"] .tag-green  { background:#E0F7F0; color:#065F46; border-color:var(--border); }
[data-theme="light"] .tag-teal   { background:#D8F4F2; color:#0E6E68; border-color:var(--border); }
[data-theme="light"] .tag-gold   { background:#FEF0D6; color:#7A4E0A; border-color:var(--border); }
[data-theme="light"] .tag-red    { background:#FFE8E4; color:#8B1A2C; border-color:var(--border); }
[data-theme="light"] .tag-gray   { background:#F3EEE8; color:#4A3F60; border-color:var(--border); }

/* ── Brand nav light ── */
[data-theme="light"] .nav-brand{ color:var(--text); font-weight:800; }
[data-theme="light"] .nav-brand em{ color:var(--accent); }
[data-theme="light"] .nav-brand:hover{ color:var(--accent); }
[data-theme="light"] .nav-link--accent{
  background:var(--accent); color:#fff; border:2px solid var(--border);
  box-shadow:2px 2px 0 var(--border);
}
[data-theme="light"] .nav-link--accent:hover{ background:var(--accent-h); color:#fff; }

/* ── Hero décorations light — subtil polka dot crème ── */
[data-theme="light"] .hero{
  background:var(--bg);
}
[data-theme="light"] .hero::before{
  background:radial-gradient(circle,rgba(247,166,138,.06) 0%,transparent 60%);
}
[data-theme="light"] .hero::after{
  background:radial-gradient(circle,rgba(56,189,248,.05) 0%,transparent 65%);
}
[data-theme="light"] .hero-dotgrid{
  background-image:radial-gradient(rgba(26,26,46,.07) 1px,transparent 1px);
  mask-image:radial-gradient(ellipse 70% 70% at 80% 50%,black 0%,transparent 100%);
}

/* ── Hero card neo-brut ── */
[data-theme="light"] .hero-card{
  border:2.5px solid var(--border);
  box-shadow:var(--shadow-md);
}
[data-theme="light"] .hero-card::before{ background:var(--accent); height:3px; }
[data-theme="light"] .hero-avail{
  background:rgba(247,166,138,.10); border:2px solid var(--border);
  border-radius:var(--radius-sm);
}
[data-theme="light"] .avail-dot{ background:var(--accent); box-shadow:0 0 8px rgba(247,166,138,.5); }

/* ── Section labels light ── */
[data-theme="light"] .section-label{ color:var(--accent); }
[data-theme="light"] .section-label::before{ background:var(--accent); }

/* ── Highlights bar light ── */
[data-theme="light"] .highlights{
  border-top:2px solid var(--border); border-bottom:2px solid var(--border);
}

/* ── Code blocks light ── */
[data-theme="light"] .code-block{
  background:#F8F5F0; border:2px solid var(--border);
  color:var(--text); box-shadow:var(--shadow-sm);
}
[data-theme="light"] .code-block::before{ background:linear-gradient(var(--accent),var(--teal)); }
[data-theme="light"] .code-block .kw { color:#5B21B6; }
[data-theme="light"] .code-block .fn { color:#C2410C; }
[data-theme="light"] .code-block .str{ color:#92400E; }
[data-theme="light"] .code-block .cm { color:var(--text-muted); }

/* ── Tool chips light ── */
[data-theme="light"] .tool-chip{
  border:2px solid var(--border); background:var(--surface);
  box-shadow:2px 2px 0 var(--border);
}
[data-theme="light"] .tool-chip:hover{
  border-color:var(--accent-h); color:var(--accent);
  transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--border);
}

/* ── Formulaire light ── */
[data-theme="light"] .form-input,
[data-theme="light"] .form-textarea{
  border:2px solid var(--border); background:var(--surface);
}
[data-theme="light"] .form-input:focus,
[data-theme="light"] .form-textarea:focus{
  border-color:var(--accent); box-shadow:3px 3px 0 var(--accent); background:var(--surface);
}

/* ── Timeline light ── */
[data-theme="light"] .timeline-item::before{
  background:var(--accent); box-shadow:0 0 8px rgba(247,166,138,.4); border:2px solid var(--border);
}

/* ── CV avatar light ── */
[data-theme="light"] .cv-avatar{
  background:linear-gradient(135deg,var(--teal),var(--accent));
  box-shadow:var(--shadow-md);
  border:2.5px solid var(--border);
}
[data-theme="light"] .cv-avatar::after{ border-top-color:var(--accent); }

/* ── Contact light ── */
[data-theme="light"] .contact-item{
  border:2px solid var(--border); box-shadow:2px 2px 0 var(--border);
}
[data-theme="light"] .contact-item:hover{
  border-color:var(--accent-h); color:var(--accent);
  background:rgba(247,166,138,.08); transform:translate(-2px,-2px);
  box-shadow:4px 4px 0 var(--border);
}

/* ── Source pills light — palette cozy ── */
[data-theme="light"] .sp-stage  { background:#E0EBFF; border-color:var(--border); color:#1E3A8A; }
[data-theme="light"] .sp-atelier{ background:#EDE8FF; border-color:var(--border); color:#4C1D95; }
[data-theme="light"] .sp-perso  { background:#FFE8E0; border-color:var(--border); color:#7A2E1A; }

/* ── Dot legend light — tons cozy ── */
[data-theme="light"] .dot-stages  { background:#5B9CF6; }
[data-theme="light"] .dot-ateliers{ background:#A98FD8; }
[data-theme="light"] .dot-transv  { background:#F7A68A; }

/* ── Pros/Cons block light ── */
[data-theme="light"] .pros-block{
  background:rgba(91,200,192,.06); border:2px solid var(--border);
}
[data-theme="light"] .cons-block{
  background:rgba(232,96,112,.06); border:2px solid var(--border);
}

/* ── Result boxes light ── */
[data-theme="light"] .result-box{ border-left:3px solid var(--accent); }

/* ── Skill bars light ── */
[data-theme="light"] .skill-track{ background:var(--bg-3); border:1px solid var(--border); border-radius:99px; }
[data-theme="light"] .skill-fill{ background:linear-gradient(90deg,#C4607A,#F7A68A); }

/* ════════════════════════════════════════════════════
   THÈME DARK — DeFi Cyberpunk — Overrides composants
════════════════════════════════════════════════════ */

/* Texture dark : scanlines néon mint + grid circuit */
html:not([data-theme="light"]) body::before{
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(0,255,159,.008) 0px, rgba(0,255,159,.008) 1px,
      transparent 1px, transparent 4px
    ),
    linear-gradient(rgba(0,255,159,.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,159,.012) 1px, transparent 1px);
  background-size: auto, 60px 60px, 60px 60px;
  opacity:1;
}

/* Ligne neon bas de nav */
html:not([data-theme="light"]) .site-nav::after{
  content:''; position:absolute; bottom:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,255,159,.6),rgba(0,212,255,.4),transparent);
  pointer-events:none;
}
html:not([data-theme="light"]) .site-nav{
  border-bottom-color:rgba(0,255,159,.08);
}

/* Cards — surface sombre avec neon border hover */
html:not([data-theme="light"]) .card{
  background:rgba(11,11,28,.75);
  border-color:rgba(0,255,159,.07);
  backdrop-filter:blur(16px) saturate(120%);
}
html:not([data-theme="light"]) .card:hover{
  border-color:rgba(0,255,159,.32);
  box-shadow:
    0 0 0 1px rgba(0,255,159,.12),
    0 8px 40px rgba(0,0,0,.95),
    0 0 40px rgba(0,255,159,.06),
    0 0 80px rgba(191,95,255,.04);
  transform:translateY(-3px);
}

/* Barre neon top card au hover */
html:not([data-theme="light"]) .card::after{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),var(--teal),var(--violet),transparent);
  opacity:0; transition:opacity .3s; pointer-events:none;
}
html:not([data-theme="light"]) .card:hover::after{ opacity:1; }

/* Boutons neon dark */
html:not([data-theme="light"]) .btn-primary{
  background:var(--accent); color:#000; font-weight:700; border:none;
  box-shadow:0 0 18px rgba(0,255,159,.35), 0 0 40px rgba(0,255,159,.15);
  letter-spacing:.18em;
}
html:not([data-theme="light"]) .btn-primary:hover{
  background:var(--accent-h);
  box-shadow:0 0 30px rgba(0,255,159,.55), 0 0 70px rgba(0,255,159,.2);
  transform:translateY(-2px);
}
html:not([data-theme="light"]) .btn-outline{
  border-color:rgba(0,255,159,.22); color:var(--text-soft);
}
html:not([data-theme="light"]) .btn-outline:hover{
  border-color:var(--accent); color:var(--accent);
  background:var(--accent-dim);
  box-shadow:0 0 18px rgba(0,255,159,.15), inset 0 0 20px rgba(0,255,159,.04);
}
html:not([data-theme="light"]) .btn-submit{
  background:var(--accent); color:#000; font-weight:700; border:none;
  box-shadow:0 0 18px rgba(0,255,159,.3);
  letter-spacing:.14em;
}
html:not([data-theme="light"]) .btn-submit:hover{
  box-shadow:0 0 35px rgba(0,255,159,.5);
  background:var(--accent-h);
}

/* Em / accent — neon glow text */
html:not([data-theme="light"]) .section-heading em,
html:not([data-theme="light"]) .page-title em{
  color:var(--accent);
  text-shadow:0 0 14px rgba(0,255,159,.55), 0 0 30px rgba(0,255,159,.2);
}
html:not([data-theme="light"]) .hero-title .l2{
  text-shadow:0 0 18px rgba(0,255,159,.55), 0 0 40px rgba(0,255,159,.2);
}
html:not([data-theme="light"]) .result-num,
html:not([data-theme="light"]) .hs-num,
html:not([data-theme="light"]) .veille-stat-num{
  color:var(--accent);
  text-shadow:0 0 12px rgba(0,255,159,.5), 0 0 28px rgba(0,255,159,.18);
}

/* Tags dark neon */
html:not([data-theme="light"]) .tag{ border-radius:3px; }
html:not([data-theme="light"]) .tag-blue  { background:rgba(0,212,255,.07);  border-color:rgba(0,212,255,.2);   color:#00D4FF; }
html:not([data-theme="light"]) .tag-violet{ background:rgba(191,95,255,.08); border-color:rgba(191,95,255,.22); color:#BF5FFF; }
html:not([data-theme="light"]) .tag-green { background:rgba(0,255,159,.07);  border-color:rgba(0,255,159,.2);   color:#00FF9F; }
html:not([data-theme="light"]) .tag-teal  { background:rgba(0,212,255,.07);  border-color:rgba(0,212,255,.2);   color:#00D4FF; }
html:not([data-theme="light"]) .tag-gold  { background:rgba(255,212,84,.07); border-color:rgba(255,212,84,.2);  color:#FFD454; }
html:not([data-theme="light"]) .tag-red   { background:rgba(255,51,112,.07); border-color:rgba(255,51,112,.2);  color:#FF3370; }
html:not([data-theme="light"]) .tag-gray  { background:rgba(0,255,159,.04);  border-color:rgba(0,255,159,.1);   color:var(--text-soft); }

/* Code blocks dark neon */
html:not([data-theme="light"]) .code-block{
  background:#04040E; border-color:rgba(0,255,159,.1); color:#8EFFD4;
  box-shadow:inset 0 0 20px rgba(0,255,159,.02);
}
html:not([data-theme="light"]) .code-block::before{
  background:linear-gradient(var(--violet),var(--accent));
}
html:not([data-theme="light"]) .code-block .kw { color:var(--violet); text-shadow:0 0 8px rgba(191,95,255,.4); }
html:not([data-theme="light"]) .code-block .fn { color:var(--accent); text-shadow:0 0 8px rgba(0,255,159,.35); }
html:not([data-theme="light"]) .code-block .str{ color:var(--gold); }
html:not([data-theme="light"]) .code-block .cm { color:var(--text-muted); font-style:italic; }

/* Forms dark neon */
html:not([data-theme="light"]) .form-input,
html:not([data-theme="light"]) .form-textarea{
  background:#04040E; border-color:rgba(0,255,159,.1);
  color:var(--text); caret-color:var(--accent);
}
html:not([data-theme="light"]) .form-input:focus,
html:not([data-theme="light"]) .form-textarea:focus{
  border-color:rgba(0,255,159,.45);
  box-shadow:0 0 0 3px rgba(0,255,159,.08), 0 0 20px rgba(0,255,159,.06);
}

/* Skill bars neon */
html:not([data-theme="light"]) .skill-fill{
  background:linear-gradient(90deg,var(--teal),var(--accent));
  box-shadow:0 0 8px rgba(0,255,159,.45);
}
html:not([data-theme="light"]) .skill-track{ background:rgba(0,255,159,.06); }

/* Timeline dark */
html:not([data-theme="light"]) .timeline-item::before{
  background:var(--accent); box-shadow:0 0 10px rgba(0,255,159,.55), 0 0 20px rgba(0,255,159,.2);
}

/* CV avatar dark neon */
html:not([data-theme="light"]) .cv-avatar{
  background:linear-gradient(135deg,var(--teal),var(--accent));
  box-shadow:0 0 40px rgba(0,255,159,.2), 0 0 80px rgba(0,212,255,.08);
  overflow:visible;
}
html:not([data-theme="light"]) .cv-avatar::after{ border-top-color:var(--accent); }
html:not([data-theme="light"]) .cv-avatar::before{
  content:''; position:absolute; inset:-12px; border-radius:50%;
  border:1px solid transparent; border-right-color:rgba(0,212,255,.35);
  animation:orbit-rev 18s linear infinite; pointer-events:none;
}

/* Dropdown dark */
html:not([data-theme="light"]) .dropdown-menu{
  background:#0A0A1C; border-color:rgba(0,255,159,.1);
  backdrop-filter:blur(20px);
  box-shadow:0 8px 32px rgba(0,0,0,.95), 0 0 30px rgba(0,255,159,.04);
}
html:not([data-theme="light"]) .dropdown-menu a:hover{
  color:var(--accent); background:var(--accent-dim);
}

/* Hero avail dark */
html:not([data-theme="light"]) .hero-avail{
  background:rgba(0,255,159,.05); border-color:rgba(0,255,159,.18);
}
html:not([data-theme="light"]) .avail-dot{
  background:var(--accent); box-shadow:0 0 8px var(--accent), 0 0 16px rgba(0,255,159,.35);
}

/* Pros block dark */
html:not([data-theme="light"]) .pros-block{
  background:rgba(0,255,159,.03); border-color:rgba(0,255,159,.14);
}

/* Contact hover dark */
html:not([data-theme="light"]) .contact-item:hover{
  border-color:rgba(0,255,159,.32); color:var(--accent);
  background:var(--accent-dim);
  box-shadow:0 0 20px rgba(0,255,159,.08), inset 0 0 20px rgba(0,255,159,.03);
}

/* Source pills dark */
html:not([data-theme="light"]) .sp-stage  { background:rgba(0,212,255,.07);  border-color:rgba(0,212,255,.18);  color:var(--teal); }
html:not([data-theme="light"]) .sp-atelier{ background:rgba(191,95,255,.07); border-color:rgba(191,95,255,.18); color:var(--violet); }
html:not([data-theme="light"]) .sp-perso  { background:rgba(0,255,159,.07);  border-color:rgba(0,255,159,.18);  color:var(--accent); }

/* Dot legend dark */
html:not([data-theme="light"]) .dot-stages  { background:var(--teal);   box-shadow:0 0 6px var(--teal); }
html:not([data-theme="light"]) .dot-ateliers{ background:var(--violet); box-shadow:0 0 6px var(--violet); }
html:not([data-theme="light"]) .dot-transv  { background:var(--accent); box-shadow:0 0 6px var(--accent); }

/* Nav brand neon */
html:not([data-theme="light"]) .nav-brand{
  color:var(--text);
}
html:not([data-theme="light"]) .nav-brand em{
  color:var(--accent);
  text-shadow:0 0 12px rgba(0,255,159,.5);
}
html:not([data-theme="light"]) .nav-brand:hover{
  color:var(--accent);
  text-shadow:0 0 10px rgba(0,255,159,.4);
}

/* Section label dark neon */
html:not([data-theme="light"]) .section-label{
  color:var(--accent);
}
html:not([data-theme="light"]) .section-label::before{
  background:var(--accent);
  box-shadow:0 0 6px rgba(0,255,159,.6);
}

/* Project section title dark */
html:not([data-theme="light"]) .project-section-title{
  color:var(--accent);
}
html:not([data-theme="light"]) .project-section-title::after{
  background:linear-gradient(90deg,rgba(0,255,159,.3),transparent);
}

/* Sibling nav dark */
html:not([data-theme="light"]) .sibling-nav{
  border-top-color:rgba(0,255,159,.08);
}

/* Infra / img-card neon hover */
html:not([data-theme="light"]) .img-card{
  border-color:rgba(0,255,159,.07);
}
html:not([data-theme="light"]) .img-card:hover{
  border-color:rgba(0,255,159,.3);
  box-shadow:0 0 20px rgba(0,255,159,.06);
}

/* Carousel dark */
html:not([data-theme="light"]) .carousel{
  border-color:rgba(0,255,159,.1);
  box-shadow:0 0 30px rgba(0,0,0,.95), 0 0 20px rgba(0,255,159,.04);
}
html:not([data-theme="light"]) .carousel-btn{
  background:rgba(11,11,28,.9); border-color:rgba(0,255,159,.15);
}
html:not([data-theme="light"]) .carousel-btn:hover{
  background:var(--accent-dim); border-color:rgba(0,255,159,.4);
  box-shadow:0 0 12px rgba(0,255,159,.2);
}
html:not([data-theme="light"]) .carousel-dot.active{
  background:var(--accent); box-shadow:0 0 6px rgba(0,255,159,.6);
}

/* Lightbox dark neon */
html:not([data-theme="light"]) .lb-backdrop{
  background:rgba(3,3,12,.88);
}
html:not([data-theme="light"]) .lb-close,
html:not([data-theme="light"]) .lb-nav{
  background:rgba(11,11,28,.85);
  border-color:rgba(0,255,159,.2);
  color:var(--accent);
}
html:not([data-theme="light"]) .lb-close:hover,
html:not([data-theme="light"]) .lb-nav:hover{
  background:var(--accent-dim);
  box-shadow:0 0 14px rgba(0,255,159,.3);
}

/* ════════════════════════════════════════════════════
   KEYFRAMES & ANIMATIONS
════════════════════════════════════════════════════ */

/* ── Keyframes partagés ── */
@keyframes blink-cursor {
  0%,49%{ opacity:1; } 50%,100%{ opacity:0; }
}
@keyframes float-hero {
  0%,100%{ transform:translateY(0) scale(1); }
  50%    { transform:translateY(-20px) scale(1.04); }
}
@keyframes ambient-drift {
  0%,100%{ transform:translate(0,0)    scale(1); }
  33%    { transform:translate(-40px,30px) scale(1.1); }
  66%    { transform:translate(30px,-20px) scale(.95); }
}
@keyframes orbit { to{ transform:rotate(360deg); } }
@keyframes orbit-rev { to{ transform:rotate(-360deg); } }
@keyframes cv-ring { to{ transform:rotate(360deg); } }
@keyframes shimmer-card {
  0%  { transform:translateX(-130%) skewX(-14deg); }
  100%{ transform:translateX(240%)  skewX(-14deg); }
}
@keyframes nav-link-slide {
  from{ transform:scaleX(0); }
  to  { transform:scaleX(1); }
}
@keyframes pulse-ring-neon {
  0%  { box-shadow:0 0 0 0 rgba(0,255,159,.55); }
  70% { box-shadow:0 0 0 8px rgba(0,255,159,0); }
  100%{ box-shadow:0 0 0 0 rgba(0,255,159,0); }
}
@keyframes pulse-ring-cyan {
  0%  { box-shadow:0 0 0 0 rgba(0,212,255,.55); }
  70% { box-shadow:0 0 0 8px rgba(0,212,255,0); }
  100%{ box-shadow:0 0 0 0 rgba(0,212,255,0); }
}
@keyframes neon-glow-pulse {
  0%,100%{ text-shadow:0 0 10px rgba(0,255,159,.45),  0 0 22px rgba(0,255,159,.15); }
  50%    { text-shadow:0 0 18px rgba(0,255,159,.7),   0 0 40px rgba(0,255,159,.28), 0 0 70px rgba(0,212,255,.1); }
}
/* Glitch cyberpunk — rare, sur le logo nav */
@keyframes glitch-subtle {
  0%,91%,100%{ text-shadow:none; transform:none; clip-path:none; }
  92%{ transform:translate(-2px, 0) skewX(-2deg); text-shadow:2px 0 rgba(0,255,159,.8), -2px 0 rgba(255,51,112,.7); }
  93%{ transform:translate( 2px, 0) skewX(2deg);  text-shadow:-2px 0 rgba(0,212,255,.8), 2px 0 rgba(191,95,255,.7); }
  94%{ transform:none; text-shadow:none; }
}
/* Flicker terminal très léger */
@keyframes flicker-light {
  0%,95%,97%,100%{ opacity:1; }
  96%{ opacity:.85; }
}
/* Typing line dans les section-labels */
@keyframes label-line-in {
  from{ width:0; opacity:0; }
  to  { width:22px; opacity:1; }
}
/* Boot scan line (dark mode) */
@keyframes boot-scan {
  0%  { top:-1px; opacity:0; }
  3%  { opacity:.8; }
  97% { opacity:.8; }
  100%{ top:100vh; opacity:0; }
}

/* ── Animations globales (les deux thèmes) ── */

/* Orbe héro flottant */
.page-hero::after{ animation:float-hero 9s ease-in-out infinite; }

/* Section labels : trait animé */
.section-label::before{ animation:label-line-in .5s var(--ease) both; }

/* Curseur terminal clignotant sur les labels */
.section-label::after{
  content:'_'; font-family:var(--font-mono); font-size:.65rem;
  color:var(--accent); margin-left:.15em;
  animation:blink-cursor 1.1s step-end infinite;
}

/* Shimmer sur les cartes au hover */
.card{ position:relative; overflow:hidden; }
.card::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.05) 50%,transparent 62%);
  transform:translateX(-130%) skewX(-14deg);
}
.card:hover::before{ animation:shimmer-card .6s ease forwards; }

/* Nav link : underline slide-in actif */
.nav-link{ position:relative; }
.nav-link.active::after{
  content:''; position:absolute; bottom:2px; left:.75rem; right:.75rem;
  height:1.5px; background:var(--accent); border-radius:99px;
  animation:nav-link-slide .25s var(--ease) both;
  transform-origin:left center;
}

/* ── Animations dark mode uniquement ── */

/* Orbe ambiant DeFi — neon mint + violet flottant */
html:not([data-theme="light"]) body::after{
  content:''; position:fixed; top:-15%; right:-8%; z-index:0; pointer-events:none;
  width:900px; height:900px; border-radius:50%;
  background:radial-gradient(circle,rgba(0,255,159,.05) 0%,rgba(0,212,255,.025) 40%,rgba(191,95,255,.02) 65%,transparent 80%);
  animation:ambient-drift 14s ease-in-out infinite;
}

/* Glitch logo nav — cyberpunk, rare */
html:not([data-theme="light"]) .nav-brand{
  animation:glitch-subtle 16s ease-in-out infinite;
}

/* Neon pulse sur hero title */
html:not([data-theme="light"]) .hero-title .l2{
  animation:neon-glow-pulse 4s ease-in-out infinite;
}

/* Flicker labels */
html:not([data-theme="light"]) .section-label{
  animation:flicker-light 12s ease-in-out infinite;
}

/* Pulsation dots timeline dark — neon mint */
html:not([data-theme="light"]) .timeline-item::before{
  animation:pulse-ring-neon 3s ease-out infinite;
}

/* Shimmer carte dark : teinté neon mint */
html:not([data-theme="light"]) .card::before{
  background:linear-gradient(105deg,transparent 38%,rgba(0,255,159,.04) 50%,transparent 62%);
}

/* Pulsation dots timeline light */
[data-theme="light"] .timeline-item::before{
  animation:pulse-ring-neon 3s ease-out infinite;
}

/* Avail dot */
.avail-dot{ animation:flicker-light 3s ease-in-out infinite; }

/* ════════════════════════════════════════════════════
   THÈME CLAIR — Animations cosy & warm
════════════════════════════════════════════════════ */

/* ── Keyframes cosy exclusifs ── */

/* Dégradé glissant sur les textes & boutons */
@keyframes gradient-shift {
  0%,100%{ background-position:0% 50%; }
  50%    { background-position:100% 50%; }
}

/* Respiration douce — éléments ambiants */
@keyframes breathe {
  0%,100%{ transform:scale(1);   opacity:.85; }
  50%    { transform:scale(1.04); opacity:1; }
}

/* Flottement carte — légèreté naturelle */
@keyframes float-card-light {
  0%,100%{ transform:translateY(0)   rotate(0deg); }
  33%    { transform:translateY(-5px) rotate(.15deg); }
  66%    { transform:translateY(-3px) rotate(-.1deg); }
}

/* Lueur chaude pulsée — candle glow */
@keyframes warm-glow {
  0%,100%{ box-shadow:0 0 0 0 rgba(232,121,90,.0),  0 4px 16px rgba(22,17,13,.08); }
  50%    { box-shadow:0 0 0 5px rgba(232,121,90,.12), 0 8px 32px rgba(232,121,90,.14); }
}

/* Entrée depuis la gauche */
@keyframes appear-left {
  from{ opacity:0; transform:translateX(-14px); }
  to  { opacity:1; transform:none; }
}

/* Pulse sauge — dot disponibilité */
@keyframes pulse-sage {
  0%,100%{ box-shadow:0 0 0 0 rgba(247,166,138,.0); }
  50%    { box-shadow:0 0 0 7px rgba(247,166,138,.28); }
}

/* Shimmer chaud — reflet lumière naturelle sur cards */
@keyframes shimmer-warm {
  0%  { transform:translateX(-100%) skewX(-12deg); }
  100%{ transform:translateX(220%)  skewX(-12deg); }
}

/* Underline organique — grandit de gauche à droite */
@keyframes ink-grow {
  from{ transform:scaleX(0); transform-origin:left; }
  to  { transform:scaleX(1); transform-origin:left; }
}

/* Oscillation lente — décoration section labels */
@keyframes sway {
  0%,100%{ transform:rotate(0deg); }
  25%    { transform:rotate(.8deg); }
  75%    { transform:rotate(-.8deg); }
}

/* Border glow clair */
@keyframes border-glow-light {
  0%,100%{ box-shadow:0 0 0 0 rgba(232,121,90,.0),  0 1px 3px rgba(22,17,13,.07); }
  50%    { box-shadow:0 0 0 4px rgba(232,121,90,.13), 0 4px 18px rgba(232,121,90,.10); }
}


/* ── Titre hero : dégradé sauge › mauve › sarcelle animé ── */
[data-theme="light"] .hero-title .l2,
[data-theme="light"] .page-title em,
[data-theme="light"] .section-heading em{
  background:linear-gradient(135deg,#E8795A 0%,#C4607A 40%,#F0A060 80%,#E8795A 100%);
  background-size:200% 200%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:gradient-shift 6s ease-in-out infinite;
}

/* ── Cards : shimmer chaud au hover + flottement ── */
[data-theme="light"] .card{
  overflow:hidden;
  transition:border-color var(--dur) var(--ease),
             box-shadow .35s var(--ease),
             transform .35s var(--ease);
}
[data-theme="light"] .card::after{
  content:''; position:absolute;
  top:0; left:0; width:45%; height:100%;
  background:linear-gradient(105deg,transparent 40%,rgba(255,248,236,.55) 50%,transparent 60%);
  pointer-events:none; opacity:0;
  transition:opacity .3s;
}
[data-theme="light"] .card:hover{
  border-color:rgba(232,121,90,.32);
  box-shadow:0 8px 36px rgba(232,121,90,.13), 0 2px 8px rgba(22,17,13,.08);
  transform:translateY(-3px);
}
[data-theme="light"] .card:hover::after{
  opacity:1;
  animation:shimmer-warm .7s ease forwards;
}

[data-theme="light"] .card--lift:hover{
  animation:float-card-light 4s ease-in-out infinite;
  box-shadow:0 14px 44px rgba(232,121,90,.15), 0 2px 10px rgba(22,17,13,.08);
}
[data-theme="light"] .pcard:hover{
  border-color:rgba(232,121,90,.32);
}

/* ── Section labels : badge animé + lueur latente ── */
[data-theme="light"] .section-label{
  animation:appear-left .55s var(--ease) both;
  background:linear-gradient(90deg,rgba(232,121,90,.12),rgba(232,121,90,.04),transparent);
  padding-left:.7rem; border-left:3px solid var(--accent);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  letter-spacing:.06em;
}

/* ── Liens nav : warm underline slide ── */
[data-theme="light"] .nav-link{
  position:relative; transition:color .2s,background .2s;
}
[data-theme="light"] .nav-link:hover,
[data-theme="light"] .nav-link.active{
  color:var(--accent); background:rgba(232,121,90,.08);
}
[data-theme="light"] .nav-link.active::after{
  background:linear-gradient(90deg,var(--accent),var(--teal));
}

/* ── Bouton primaire : dégradé sauge-mauve animé ── */
[data-theme="light"] .btn-primary{
  background:linear-gradient(135deg,#E8795A 0%,#C4607A 50%,#E8795A 100%);
  background-size:200% 200%;
  animation:gradient-shift 5s ease-in-out infinite;
  color:#fff; border:none; font-weight:600;
  box-shadow:0 2px 14px rgba(232,121,90,.28),
             0 0 0 1px rgba(232,121,90,.12);
  transition:box-shadow .3s,transform .3s;
}
[data-theme="light"] .btn-primary:hover{
  box-shadow:0 6px 28px rgba(232,121,90,.42),
             0 0 0 2px rgba(232,121,90,.18);
  transform:translateY(-2px);
}

/* ── Avail dot : candle pulse ── */
[data-theme="light"] .avail-dot{
  background:var(--accent);
  box-shadow:0 0 6px rgba(232,121,90,.55);
  animation:pulse-sage 2.5s ease-in-out infinite;
}

/* ── Stat numbers : sauge › sarcelle ── */
[data-theme="light"] .hs-num,
[data-theme="light"] .result-num,
[data-theme="light"] .veille-stat-num{
  background:linear-gradient(135deg,#E8795A,#C4607A);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ── Timeline light : trait dégradé ── */
[data-theme="light"] .timeline-item::after{
  background:linear-gradient(var(--accent),rgba(247,166,138,.4),transparent);
  opacity:.35;
}

/* ── Skill bars : dégradé sauge › sarcelle ── */
[data-theme="light"] .skill-fill{
  background:linear-gradient(90deg,#C4607A,#E8795A);
}

/* ── Links : underline organique au hover ── */
[data-theme="light"] a:not(.btn):not(.nav-link):not(.card){
  position:relative; text-decoration:none; color:var(--accent);
}
[data-theme="light"] a:not(.btn):not(.nav-link):not(.card)::after{
  content:''; position:absolute; left:0; bottom:-1px;
  width:100%; height:1.5px;
  background:var(--accent); opacity:.55;
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
[data-theme="light"] a:not(.btn):not(.nav-link):not(.card):hover::after{
  transform:scaleX(1);
}

/* ── Orbe ambiante footer ── */
[data-theme="light"] .site-footer::before{
  content:''; position:absolute; bottom:-50%; left:-8%;
  width:540px; height:540px; border-radius:50%;
  background:radial-gradient(circle,rgba(138,106,170,.09) 0%,transparent 65%);
  pointer-events:none; z-index:0;
  animation:ambient-drift 18s ease-in-out infinite reverse;
}

/* ── Stats card hero : respiration douce (élément isolé) ── */
[data-theme="light"] .hero-stats-card{
  animation:breathe 8s ease-in-out infinite;
}

/* ── Cards : warm glow au repos (très subtil) ── */
[data-theme="light"] .card{
  box-shadow:var(--shadow-sm);
  transition:border-color .3s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}

/* ════════════════════════════════════════════════════
   CURSEUR PERSONNALISÉ — light & dark
════════════════════════════════════════════════════ */
*{ cursor:var(--cursor)!important; }
/* Exceptions : zoom-in conservé sur les images et la lightbox */
[data-lb-src],
.img-zoomable,
.carousel-slide img,
.img-card img{ cursor:url('../images/cyber_cursor_32.png') 1 1, zoom-in !important; }
[data-theme="light"] [data-lb-src],
[data-theme="light"] .img-zoomable,
[data-theme="light"] .carousel-slide img,
[data-theme="light"] .img-card img{ cursor:url('../images/cozy_cursor_32.png') 1 1, zoom-in !important; }
.lb-backdrop{ cursor:var(--cursor)!important; }

/* ════════════════════════════════════════════════════
   CAROUSEL & LIGHTBOX — communs à toutes les pages
════════════════════════════════════════════════════ */

/* ── Image zoomable standalone ── */
.img-zoomable{ width:100%; display:block; cursor:zoom-in; transition:opacity .2s; }
.img-zoomable:hover{ opacity:.88; }

/* ── Carousel ── */
.carousel{ position:relative; border-radius:var(--radius); border:1px solid var(--border); box-shadow:var(--shadow-sm); overflow:hidden; background:var(--surface); user-select:none; }
.carousel-viewport{ overflow:hidden; }
.carousel-track{ display:flex; transition:transform .35s cubic-bezier(.4,0,.2,1); }
.carousel-slide{ flex:0 0 100%; }
.carousel-slide img{ width:100%; display:block; cursor:zoom-in; transition:opacity .2s; }
.carousel-slide img:hover{ opacity:.88; }
.carousel-caption{ padding:.55rem 3.5rem .55rem .9rem; background:var(--bg-2); border-top:1px solid var(--border); font-size:.74rem; color:var(--text-soft); line-height:1.5; min-height:2.4rem; }
.carousel-btn{ position:absolute; top:50%; transform:translateY(-50%); width:32px; height:32px; background:var(--surface); border:1px solid var(--border); border-radius:50%; box-shadow:var(--shadow-sm); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:1rem; color:var(--text); transition:background .15s,border-color .15s; z-index:2; line-height:1; padding:0; }
.carousel-btn:hover{ background:var(--bg-2); border-color:var(--border-h); }
.carousel-prev{ left:.6rem; }
.carousel-next{ right:.6rem; }
.carousel-dots{ display:flex; justify-content:center; gap:.4rem; padding:.5rem 0 .4rem; background:var(--bg-2); border-top:1px solid var(--border); }
.carousel-dot{ width:7px; height:7px; border-radius:50%; background:var(--border); border:none; padding:0; cursor:pointer; transition:background .2s,transform .2s; }
.carousel-dot.active{ background:var(--accent); transform:scale(1.25); }
.carousel-counter{ position:absolute; bottom:2.5rem; right:.75rem; font-size:.68rem; color:var(--text-muted); background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:.15rem .55rem; pointer-events:none; z-index:2; }

/* ── Galerie images ── */
.img-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.2rem; }
.img-gallery-2{ grid-template-columns:repeat(2,1fr); }
@media(max-width:700px){ .img-gallery{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:450px){ .img-gallery,.img-gallery-2{ grid-template-columns:1fr; } }
.img-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:border-color var(--dur),transform var(--dur); }
.img-card:hover{ border-color:var(--border-h); transform:translateY(-2px); }
.img-card img{ width:100%; height:160px; object-fit:cover; display:block; background:var(--bg-3); cursor:zoom-in; }
.img-card img.contain{ object-fit:contain; padding:.5rem; }
.img-card-caption{ padding:.7rem 1rem; }
.img-card-title{ font-family:var(--font-mono); font-size:.68rem; font-weight:600; color:var(--text); margin-bottom:.2rem; }
.img-card-desc{ font-size:.72rem; color:var(--text-muted); line-height:1.5; }

/* ── Lightbox ── */
.lightbox{ position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; visibility:hidden; opacity:0; transition:opacity .25s,visibility .25s; }
.lightbox.open{ visibility:visible; opacity:1; }
.lb-backdrop{ position:absolute; inset:0; background:rgba(15,15,20,.82); backdrop-filter:blur(4px); cursor:zoom-out; }
.lb-content{ position:relative; z-index:1; max-width:90vw; max-height:90vh; display:flex; flex-direction:column; align-items:center; gap:.6rem; }
.lb-img-wrap{ border-radius:var(--radius); overflow:hidden; box-shadow:0 16px 64px rgba(0,0,0,.4); max-height:80vh; display:flex; align-items:center; }
.lb-img-wrap img{ max-width:88vw; max-height:78vh; object-fit:contain; display:block; border-radius:var(--radius); transition:opacity .2s; }
.lb-caption-bar{ font-size:.8rem; color:rgba(255,255,255,.7); text-align:center; max-width:600px; line-height:1.5; }
.lb-caption-bar code{ color:rgba(255,255,255,.9); }
.lb-close{ position:fixed; top:1.2rem; right:1.4rem; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); color:#fff; font-size:1.2rem; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s; }
.lb-close:hover{ background:rgba(255,255,255,.22); }
.lb-nav{ position:fixed; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); color:#fff; font-size:1.4rem; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s; }
.lb-nav:hover{ background:rgba(255,255,255,.22); }
.lb-nav.lb-prev{ left:1.2rem; }
.lb-nav.lb-next{ right:1.2rem; }
.lb-nav[hidden]{ display:none; }
.lb-counter{ position:fixed; bottom:1.4rem; left:50%; transform:translateX(-50%); font-size:.75rem; color:rgba(255,255,255,.55); }

/* ════════════════════════════════════════════════════
   RESPONSIVE COMPLÉMENTAIRE — Tablette & Mobile
════════════════════════════════════════════════════ */

/* ── Menu mobile light — arrondi cohérent + ombre ── */
@media(max-width:1100px){
  [data-theme="light"] .nav-menu.open{
    border-radius:0 0 var(--radius) var(--radius);
    border:2.5px solid var(--border);
    border-top:none;
    box-shadow:4px 4px 0 var(--border);
    margin-top:-2px;
  }
}

/* ── Tablette (≤ 1100px) — nav + espacement ── */
@media(max-width:1100px){
  [data-theme="light"] .site-nav{ width:calc(100% - 48px); }
}

/* ── Tablette (≤ 900px) ── */
@media(max-width:900px){
  .section{ padding:56px 0 44px; }
  .highlights-inner{ gap:1.5rem; }
  .page-hero-inner{ padding:2.8rem 2rem 2.2rem; }
  [data-theme="light"] .hero{ padding-top:88px; }
  [data-theme="light"] .page-hero{ padding-top:88px; }
  .comp-pills-grid{ grid-template-columns:1fr 1fr; }
  .screenshots-grid{ grid-template-columns:1fr 1fr; }
}

/* ── Mobile (≤ 640px) ── */
@media(max-width:640px){
  .section{ padding:44px 0 36px; }
  .container{ padding:0 1.25rem; }
  .page-hero-inner{ padding:2.2rem 1.25rem 1.8rem; }
  .nav-inner{ padding:.7rem 1.25rem; }
  .highlights-inner{ gap:1rem; justify-content:flex-start; }
  .site-footer{
    flex-direction:column; align-items:center;
    text-align:center; padding:1.2rem 1.25rem;
  }
  .footer-links{ justify-content:center; }
  [data-theme="light"] .site-nav{ width:calc(100% - 32px); top:8px; }
  [data-theme="light"] .hero{ padding-top:80px; }
  [data-theme="light"] .page-hero{ padding-top:80px; }
  .cards-grid{ grid-template-columns:1fr!important; }
}

/* ── Petit mobile (≤ 480px) ── */
@media(max-width:480px){
  .container{ padding:0 1rem; }
  .page-hero-inner{ padding:2rem 1rem 1.5rem; }
  .nav-inner{ padding:.65rem 1rem; }
  [data-theme="light"] .site-nav{ width:calc(100% - 20px); top:6px; }
  .hero-desc{ font-size:.9rem; }
  .hero-title .l3{ font-size:clamp(1.1rem,4.5vw,1.6rem); }
  .sibling-nav{ flex-direction:column; gap:.6rem; align-items:flex-start; padding:1rem 1.25rem; }
  .cat-num{ font-size:2.2rem; }
  .section-sub{ font-size:.88rem; }
  .veille-intro-grid{ grid-template-columns:1fr; }
}

/* ── Ultra-petit mobile (≤ 360px) ── */
@media(max-width:360px){
  [data-theme="light"] .site-nav{ width:calc(100% - 16px); }
  .nav-inner{ padding:.6rem .85rem; }
  .hero-ctas{ flex-direction:column; }
  .hero-ctas .btn{ width:100%; justify-content:center; }
}


/* ════════════════════════════════════════════════════
   HACKER BACKGROUND — Dark mode uniquement
   Grille de points néon + vignette + scan line CRT
════════════════════════════════════════════════════ */

/* Grille de points cyan très subtile + vignette de profondeur */
html:not([data-theme="light"]) body {
  background-image:
    radial-gradient(ellipse at 50% 40%, transparent 52%, rgba(0,0,0,.45) 100%),
    radial-gradient(circle, rgba(34,211,238,.055) 1px, transparent 1px);
  background-size: 100% 100%, 44px 44px;
  background-position: 0 0, 22px 22px;
  background-attachment: fixed, fixed;
}

/* Scan line CRT animée — bande lumineuse défilant lentement */
html:not([data-theme="light"])::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(34,211,238,.025) 47%,
    rgba(34,211,238,.055) 50%,
    rgba(34,211,238,.025) 53%,
    transparent 100%
  );
  background-size: 100% 320px;
  background-repeat: no-repeat;
  animation: hacker-scan 16s linear infinite;
}

@keyframes hacker-scan {
  0%   { background-position: 0 -320px; }
  100% { background-position: 0 calc(100vh + 320px); }
}

/* ════════════════════════════════════════════════════
   GLITCH TITRES — Dark mode uniquement
   Aberration chromatique + skew — rare et ponctuel
════════════════════════════════════════════════════ */

/* Keyframe principal : normal 91% du temps, glitch ~2% */
@keyframes title-glitch {
  /* ── Normal (silence) ── */
  0%, 75%, 100% {
    text-shadow: none;
    transform: none;
    opacity: 1;
  }
  /* ── Burst 1 : aberration chromatique cyan / rose ── */
  76% {
    text-shadow:
      -5px 0 rgba(236,72,153,.85),
       5px 0 rgba(34,211,238,.85);
    transform: translate(-3px, 1px) skewX(-4deg);
    opacity: .92;
  }
  /* ── Burst 2 : inversion ── */
  77% {
    text-shadow:
       5px 0 rgba(236,72,153,.7),
      -5px 0 rgba(34,211,238,.7);
    transform: translate(3px, -1px) skewX(3deg);
    opacity: .95;
  }
  /* ── Flash off (coupure brève) ── */
  78% {
    text-shadow: none;
    transform: none;
    opacity: .5;
  }
  /* ── Burst 3 : micro-secousse finale ── */
  79% {
    text-shadow:
       3px 0 rgba(34,211,238,.65),
      -2px 0 rgba(236,72,153,.55);
    transform: translate(2px, 0) scaleX(1.01);
    opacity: 1;
  }
  /* ── Retour net ── */
  80% {
    text-shadow: none;
    transform: none;
    opacity: 1;
  }
}

/* Variante douce pour h2-h6 */
@keyframes title-glitch-soft {
  0%, 78%, 100% {
    text-shadow: none;
    transform: none;
    opacity: 1;
  }
  79% {
    text-shadow:
      -3px 0 rgba(236,72,153,.7),
       3px 0 rgba(34,211,238,.7);
    transform: translate(-2px, 0) skewX(-2.5deg);
  }
  80% {
    text-shadow:
       3px 0 rgba(236,72,153,.55),
      -3px 0 rgba(34,211,238,.55);
    transform: translate(2px, 0);
  }
  81% {
    text-shadow: none;
    transform: none;
    opacity: .65;
  }
  82% {
    text-shadow: none;
    transform: none;
    opacity: 1;
  }
}

/* ── Application — dark mode uniquement, cycles décalés ──
   Cycle court pour visibilité, glitch à 88-92% (~10% du cycle)  */

html:not([data-theme="light"]) h1,
html:not([data-theme="light"]) .page-title {
  animation: title-glitch 8s linear infinite;
  animation-delay: 0s;
}
html:not([data-theme="light"]) h2,
html:not([data-theme="light"]) .section-heading,
html:not([data-theme="light"]) .project-section-title {
  animation: title-glitch-soft 9s linear infinite;
  animation-delay: 2s;
}
html:not([data-theme="light"]) h3,
html:not([data-theme="light"]) h4 {
  animation: title-glitch-soft 11s linear infinite;
  animation-delay: 4s;
}
html:not([data-theme="light"]) h5,
html:not([data-theme="light"]) h6,
html:not([data-theme="light"]) .page-subtitle {
  animation: title-glitch-soft 13s linear infinite;
  animation-delay: 6s;
}