/* ==========================================================================
   JONATHAN PERRIER — SITE CV V3
   Feuille de style consolidée. L’ordre des anciens fichiers est conservé
   afin de préserver exactement la cascade et le rendu de la V2.18.1.
   ========================================================================== */

/* ==========================================================================
   HISTORIQUE : les couches correctives V3.1 à V4.3 ont été consolidées le
   17/07/2026 — doublons supprimés, variables :root fusionnées, et 808 des
   823 !important retirés après vérification automatisée du rendu (19 024
   éléments × 16 états : largeurs 340→1440px, thèmes sombre/clair, vue
   recruteur, menu ouvert, intro, survol/focus). Les 17 !important restants
   sont nécessaires à l'arbitrage de spécificité et ne doivent pas être
   retirés sans re-vérification.
   ========================================================================== */

/* ===== Source consolidée : styles.css ===== */
/* ===================================================================
   Jonathan Perrier — CV rétro professionnel (v2.3)
   Feuille de style principale
   =================================================================== */
:root{
  --bg:#050a08;
  --bg-2:#0a1510;
  --bg-3:#0d1b14;
  --panel:rgba(10,21,16,.6);
  --phosphor:#8bffa8;
  --phosphor-2:#c6ffd5;
  --phosphor-dim:#68b77c; /* consolidé (ex-surcharges V3.1/V3.2) */
  --phosphor-dark:#1e4a2d;
  --cyan:#7dfff0;
  --amber:#ffc85c;
  --pink:#ff7ec6;
  --red:#ff5555;
  --grid:rgba(139,255,168,.06);
  --grid-strong:rgba(139,255,168,.12);
  --shadow-color:rgba(139,255,168,.15);

  /* alias pour illustrations SVG héritées */
  --bg-navy:#050a08;
  --text:#8bffa8;
  --orange:#ffc85c;
  --green:#8bffa8;
  --card:#0d1b14;
  --card-border:#3f8f56;
  --text-muted:#68b77c;

  --font-title:"Press Start 2P", monospace;
  --font-display:"VT323", monospace;
  --font-body:"JetBrains Mono", monospace;

  --container:1200px;

  color-scheme: dark;
}
/* ---------- reset ---------- */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:80px; }

body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(ellipse at center, var(--bg-2) 0%, var(--bg) 60%, #000 100%),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:auto, 32px 32px, 32px 32px;
  background-attachment:fixed;
  color:var(--phosphor);
  font-family:var(--font-body); font-size:13px; line-height:1.55;
  overflow-x:hidden;
  position:relative;
  padding-bottom:52px; /* place pour la barre XP */
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
ul, ol{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
h1,h2,h3,h4,h5{ margin:0; font-weight:400; letter-spacing:1px; }
p{ margin:0; }
.sr-seulement{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.lien-evitement{ position:absolute; left:-999px; top:0; background:var(--amber); color:#000; padding:10px 16px; z-index:200; font-family:var(--font-display); font-size:18px; letter-spacing:1px; }
.lien-evitement:focus{ left:0; }
:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; }
.enveloppe{ max-width:var(--container); margin:0 auto; padding:0 24px; }
/* ---------- CRT effects (globalement, désactivable) ---------- */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:100;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0px, rgba(0,0,0,.28) 1px, transparent 1px, transparent 3px);
  mix-blend-mode:multiply;
}
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:99;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%);
}
html.animations-off body::before,
html.animations-off body::after{ display:none; }
@keyframes clignote{ 0%,50%{opacity:1} 51%,100%{opacity:0} }
@keyframes pulseAmber{ 0%,100%{box-shadow:0 0 0 rgba(255,200,92,.4)} 50%{box-shadow:0 0 10px rgba(255,200,92,.6)} }
@keyframes revealChar{ from{opacity:0} to{opacity:1} }
/* ===================================================================
   HUD TOP (header)
   =================================================================== */
.hud-top{
  position:sticky; top:0; z-index:50;
  background:rgba(5,10,8,.92); backdrop-filter:blur(6px);
  border-bottom:2px solid var(--phosphor-dim);
}
.hud-bar{
  max-width:var(--container); margin:0 auto; padding:10px 24px;
  display:flex; align-items:center; gap:16px;
}
.hud-identite{ display:flex; align-items:center; gap:12px; margin-right:auto; text-decoration:none; }
.hud-badge{
  width:32px; height:32px; background:var(--phosphor); color:#000;
  display:grid; place-items:center; font-family:var(--font-title); font-size:11px;
  box-shadow: 3px 3px 0 var(--shadow-color);
  flex-shrink:0;
}
.hud-identite strong{ font-family:var(--font-display); font-size:22px; letter-spacing:2px; color:var(--phosphor); display:block; }
.hud-identite small{ font-family:var(--font-body); font-size:9px; color:var(--phosphor-dim); text-transform:uppercase; letter-spacing:2px; }
.hud-menu{ display:flex; gap:20px; font-family:var(--font-display); font-size:19px; }
.hud-menu a{ color:var(--phosphor-dim); text-decoration:none; letter-spacing:1px; padding:2px 4px; position:relative; white-space:nowrap; }
.hud-menu a:hover, .hud-menu a.actif{ color:var(--phosphor); text-shadow:0 0 6px rgba(139,255,168,.6); }
.hud-menu a.actif::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--amber); }
.hud-actions{ display:flex; align-items:center; gap:10px; }
.hud-cv{
  border:2px solid var(--amber); color:var(--amber); background:transparent;
  padding:7px 12px; font-family:var(--font-display); font-size:17px; letter-spacing:1px;
  text-decoration:none; box-shadow:3px 3px 0 rgba(255,200,92,.25);
  transition:transform .1s;
  white-space:nowrap;
}
.hud-cv:hover{ background:var(--amber); color:#000; }
.hud-cv:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 rgba(255,200,92,.25); }
.switch-animations{
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-size:10px; color:var(--phosphor-dim);
  letter-spacing:1px; padding:4px 8px; cursor:pointer; border:1px solid rgba(139,255,168,.18); background:rgba(10,21,16,.55);
}
.switch-animations:hover{ color:var(--phosphor); }
.switch-animations .switch-piste{
  display:inline-flex; align-items:center; justify-content:flex-start;
  width:46px; height:16px; border:1px solid var(--phosphor);
  background:var(--phosphor); position:relative; transition:background .15s;
}
.switch-animations[aria-pressed="true"] .switch-piste{
  background:transparent; border-color:var(--phosphor-dim); justify-content:flex-end;
}
.switch-animations .switch-etat{
  background:#000; color:var(--phosphor); padding:0 5px; height:100%;
  display:inline-flex; align-items:center;
  font-family:var(--font-title); font-size:8px; letter-spacing:1px;
}
.switch-animations[aria-pressed="true"] .switch-etat{ color:var(--phosphor-dim); }
.hud-menu-btn{ display:none; border:1px solid var(--phosphor-dim); padding:6px 10px; color:var(--phosphor); font-family:var(--font-title); font-size:10px; }
/* ===================================================================
   TITRES DE SECTION
   =================================================================== */
.section{ padding:60px 0; position:relative; }
.section-tete{ margin-bottom:32px; }
.section-tete .cartouche{
  font-family:var(--font-body); font-size:10px; color:var(--cyan);
  letter-spacing:3px; text-transform:uppercase; margin-bottom:12px;
  display:flex; align-items:center; gap:10px;
}
.section-tete .cartouche::before{
  content:""; width:8px; height:8px; background:var(--cyan);
  animation:clignote 1.1s infinite step-end;
}
.section-tete h2{
  font-family:var(--font-title); font-size:22px; line-height:1.5;
  color:var(--phosphor); text-shadow:0 0 10px rgba(139,255,168,.3);
  margin-bottom:12px;
}
.section-tete h2 em{ font-style:normal; color:var(--amber); text-shadow:0 0 10px rgba(255,200,92,.35); }
.section-tete p{ font-family:var(--font-display); font-size:20px; color:var(--phosphor-dim); max-width:70ch; letter-spacing:.5px; }
/* ---------- animations ---------- */
.apparition{ opacity:0; transform:translateY(8px); transition:opacity .5s ease, transform .5s ease; }
.apparition.visible{ opacity:1; transform:none; }

html.animations-off .apparition{ opacity:1; transform:none; }
html.animations-off *{ animation-duration:0s; animation-iteration-count:1; }
/* ===================================================================
   HERO
   =================================================================== */
.accueil{ padding:70px 0 30px; }
.grille-accueil{ display:grid; grid-template-columns:1.5fr 1fr; gap:40px; align-items:center; }
.cartouche{
  font-family:var(--font-body); font-size:11px; color:var(--cyan);
  letter-spacing:3px; text-transform:uppercase; margin-bottom:16px;
  display:flex; align-items:center; gap:10px;
}
.cartouche::before{
  content:""; width:8px; height:8px; background:var(--cyan);
  animation:clignote 1.1s infinite step-end;
}
.titre-principal{
  font-family:var(--font-title); font-size:clamp(20px,3vw,32px); line-height:1.5;
  color:var(--phosphor); text-shadow:0 0 12px rgba(139,255,168,.35);
  margin-bottom:20px; letter-spacing:1px;
}
.titre-principal em{ font-style:normal; color:var(--amber); text-shadow:0 0 12px rgba(255,200,92,.4); }
.curseur-titre{ display:inline-block; width:12px; height:1em; background:var(--phosphor); vertical-align:-4px; margin-left:6px; animation:clignote 1s infinite step-end; }
.baseline{
  font-family:var(--font-display); font-size:22px; color:var(--phosphor-dim);
  line-height:1.4; max-width:64ch; margin-bottom:32px; letter-spacing:.5px;
}
.baseline::before{ content:"> "; color:var(--phosphor); }
.menu-options{
  display:flex; flex-direction:column; gap:6px; margin-bottom:24px;
  font-family:var(--font-display); font-size:22px;
}
.menu-options a, .menu-options button{
  color:var(--phosphor); text-decoration:none; padding:6px 14px 6px 34px;
  position:relative; letter-spacing:1px; transition:background .15s; display:block;
  text-align:left; width:fit-content;
}
.menu-options a::before, .menu-options button::before{
  content:"▶"; position:absolute; left:12px; color:var(--amber);
  opacity:0; transform:translateX(-6px); transition:.15s;
}
.menu-options a:hover, .menu-options a:focus,
.menu-options button:hover, .menu-options button:focus,
.menu-options .actif{
  background:rgba(139,255,168,.08); outline:none;
}
.menu-options a:hover::before, .menu-options a:focus::before,
.menu-options button:hover::before, .menu-options button:focus::before,
.menu-options .actif::before{ opacity:1; transform:none; }
.menu-options .touche{
  font-family:var(--font-body); font-size:10px; color:var(--phosphor-dim);
  background:rgba(139,255,168,.08); padding:2px 6px; margin-left:12px; letter-spacing:1px;
  border:1px solid rgba(139,255,168,.15);
}
/* ---------- fiche personnage ---------- */
.fiche-perso{
  position:relative; padding:22px;
  border:3px solid var(--phosphor); background:var(--panel);
  box-shadow: 6px 6px 0 var(--shadow-color);
}
.fiche-perso::before{
  content:""; position:absolute; inset:3px; border:1px solid var(--phosphor-dim); pointer-events:none;
}
.fiche-titre{
  font-family:var(--font-title); font-size:10px; color:var(--amber);
  letter-spacing:2px; margin-bottom:14px; text-align:center;
}
.avatar-wrap{ display:flex; justify-content:center; margin-bottom:12px; }
.avatar-wrap svg{ image-rendering:pixelated; width:110px; height:110px; filter:drop-shadow(0 0 8px rgba(139,255,168,.3)); }
.fiche-nom{ font-family:var(--font-display); font-size:26px; color:var(--phosphor); text-align:center; letter-spacing:2px; }
.fiche-classe{ font-family:var(--font-body); font-size:9px; color:var(--phosphor-dim); text-align:center; text-transform:uppercase; letter-spacing:2px; margin-bottom:14px; }
.stat-ligne{
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--font-display); font-size:17px; color:var(--phosphor);
  padding:4px 0; border-bottom:1px dashed rgba(139,255,168,.15);
  letter-spacing:1px;
}
.stat-ligne:last-child{ border-bottom:none; }
.stat-ligne b{ font-weight:normal; color:var(--phosphor-dim); }
.barre-stat{ display:inline-flex; gap:2px; }
.barre-stat span{ width:8px; height:12px; background:var(--phosphor); }
.barre-stat span.vide{ background:rgba(139,255,168,.2); }
/* ---------- HUD repères ---------- */
.reperes-hud{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  margin-top:32px;
}
.repere-carte{
  border:2px solid var(--phosphor-dim); background:rgba(10,21,16,.5);
  padding:14px 16px 12px; position:relative;
}
.repere-carte::before{
  content:"["attr(data-num)"]"; position:absolute; top:-10px; left:10px;
  background:var(--bg); color:var(--amber); padding:0 6px;
  font-family:var(--font-body); font-size:10px; letter-spacing:1px;
}
.repere-carte h4{ font-family:var(--font-display); font-size:18px; color:var(--phosphor); letter-spacing:1px; margin-bottom:2px; }
.repere-carte p{ font-family:var(--font-body); font-size:10px; color:var(--phosphor-dim); letter-spacing:.5px; line-height:1.4; }
/* ===================================================================
   SAVOIR-FAIRE — manuel du personnage
   =================================================================== */
.double-voie{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:32px; }
.voie{
  border:2px solid var(--phosphor-dim); background:var(--panel);
  padding:20px 22px; position:relative;
}
.voie::before{
  content:attr(data-label); position:absolute; top:-11px; left:14px;
  background:var(--bg); padding:0 10px;
  font-family:var(--font-title); font-size:10px; color:var(--amber); letter-spacing:2px;
}
.voie h3{ font-family:var(--font-display); font-size:24px; color:var(--phosphor); letter-spacing:1px; margin-bottom:16px; }
.voie ol{ display:flex; flex-direction:column; gap:8px; }
.voie li{ display:grid; grid-template-columns:26px 1fr; gap:8px; align-items:baseline; }
.voie li span.num{ font-family:var(--font-body); font-size:11px; color:var(--amber); }
.voie li strong{ font-family:var(--font-display); font-size:18px; color:var(--phosphor); letter-spacing:1px; font-weight:normal; display:block; }
.voie li p{ font-size:11px; color:var(--phosphor-dim); grid-column:2; }
.piliers{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.pilier{
  border:1px solid var(--phosphor-dim); background:var(--panel);
  padding:14px 16px; position:relative;
}
.pilier .puce{
  display:inline-block; padding:2px 6px; margin-bottom:6px;
  font-family:var(--font-body); font-size:10px; color:var(--amber);
  border:1px solid rgba(255,200,92,.3); letter-spacing:1px;
}
.pilier h3{ font-family:var(--font-display); font-size:19px; color:var(--phosphor); letter-spacing:1px; margin-bottom:4px; }
.pilier p{ font-size:11px; color:var(--phosphor-dim); }
/* ===================================================================
   STACK — inventaire
   =================================================================== */
.filtres{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.filtres button{
  border:1px solid var(--phosphor-dim); color:var(--phosphor-dim);
  padding:6px 14px; font-family:var(--font-display); font-size:16px; letter-spacing:1px;
}
.filtres button:hover{ color:var(--phosphor); border-color:var(--phosphor); }
.filtres button[aria-selected="true"]{ background:var(--phosphor); color:#000; border-color:var(--phosphor); }
.grille-inventaire{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.item{
  border:1px solid var(--phosphor-dim); background:rgba(10,21,16,.45);
  padding:10px 12px; display:flex; align-items:center; gap:10px;
  font-family:var(--font-body); font-size:12px; color:var(--phosphor);
  position:relative;
}
.item::before{
  content:""; width:8px; height:8px; background:var(--amber); flex-shrink:0;
  box-shadow:0 0 4px var(--amber);
}
.item span{ font-size:9px; color:var(--phosphor-dim); margin-left:auto; letter-spacing:1px; text-transform:uppercase; }
.item[hidden]{ display:none; }
/* ===================================================================
   RÉALISATIONS — missions
   =================================================================== */
.liste-missions{ display:flex; flex-direction:column; gap:18px; }
.mission{
  border:2px solid var(--phosphor); background:var(--panel);
  display:grid; grid-template-columns:1fr 1fr; overflow:hidden; position:relative;
}
.mission::before{
  content:""; position:absolute; inset:3px; border:1px solid var(--phosphor-dim); pointer-events:none;
}
.mission-visuel{ background:#000; padding:16px; display:flex; align-items:center; justify-content:center; position:relative; border-right:1px dashed var(--phosphor-dim); }
.mission-visuel svg{ width:100%; height:auto; }
.mission-visuel svg text{ paint-order:stroke fill; stroke:rgba(5,10,8,.95); stroke-width:3px; stroke-linejoin:round; letter-spacing:.2px; }
.mission-visuel svg .label-optimise{ filter:drop-shadow(0 0 4px rgba(0,0,0,.5)); }
.mission-illus-caption{ position:absolute; left:16px; bottom:10px; font-family:var(--font-body); font-size:9px; color:var(--phosphor-dim); display:flex; gap:10px; flex-wrap:wrap; letter-spacing:1px; }
.mission-illus-caption b{ color:var(--amber); font-weight:400; }
.mission-illus-caption i{ font-style:normal; color:var(--cyan); }
.mission-contenu{ padding:20px 24px; position:relative; }
.mission-en-tete{ display:flex; align-items:center; gap:10px; margin-bottom:8px; flex-wrap:wrap; }
.mission-num{ font-family:var(--font-title); font-size:10px; color:var(--amber); letter-spacing:2px; }
.mission-statut{ font-family:var(--font-body); font-size:9px; color:#000; background:var(--phosphor); padding:2px 8px; letter-spacing:2px; }
.mission-contenu h3{ font-family:var(--font-display); font-size:22px; color:var(--phosphor); letter-spacing:1px; margin-bottom:8px; line-height:1.2; }
.mission-contenu p{ font-size:11.5px; color:var(--phosphor-dim); margin-bottom:14px; line-height:1.6; }
.mission-recompense{
  border-top:1px dashed rgba(139,255,168,.2); padding-top:10px; margin-top:auto;
  font-family:var(--font-body); font-size:10px; color:var(--phosphor-dim); letter-spacing:1px;
}
.mission-recompense b{ color:var(--amber); font-weight:400; text-transform:uppercase; }
.mission-tags{ display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.mission-tags li{
  font-family:var(--font-body); font-size:9.5px; color:var(--phosphor);
  border:1px solid var(--phosphor-dim); padding:2px 7px; letter-spacing:1px;
}
/* incident/résolution toggle */
.incident-toggle{ position:relative; display:inline-block; min-width:170px; height:14px; }
.incident-toggle b{ position:absolute; left:0; top:0; white-space:nowrap; font-weight:400; }
/* ===================================================================
   PARCOURS — carte d'aventure
   =================================================================== */
.carte-parcours{
  border:2px solid var(--phosphor-dim); background:var(--panel);
  padding:20px 24px 16px; margin-bottom:24px; position:relative;
}
.carte-parcours::before{
  content:"CARTE DU PARCOURS"; position:absolute; top:-11px; left:14px;
  background:var(--bg); padding:0 10px;
  font-family:var(--font-title); font-size:10px; color:var(--amber); letter-spacing:2px;
}
.chemin{ display:flex; align-items:center; gap:6px; }
.noeud{ display:flex; flex-direction:column; align-items:center; gap:4px; flex-shrink:0; }
.noeud .point{
  width:22px; height:22px; border:2px solid var(--phosphor); background:var(--bg);
  display:grid; place-items:center;
  font-family:var(--font-title); font-size:8px; color:var(--phosphor);
}
.noeud[data-actuel="true"] .point{ background:var(--phosphor); color:#000; animation:pulseAmber 1.4s infinite; box-shadow:0 0 12px var(--phosphor); }
.noeud .lib{ font-family:var(--font-body); font-size:9px; color:var(--phosphor-dim); letter-spacing:1px; text-align:center; max-width:90px; line-height:1.3; }
.noeud[data-actuel="true"] .lib{ color:var(--amber); }
.lien-chemin{ flex:1; height:2px; background:repeating-linear-gradient(90deg, var(--phosphor-dim) 0 6px, transparent 6px 10px); min-width:20px; }
/* Expériences */
.experiences{ display:flex; flex-direction:column; gap:14px; }
.experience{
  border:2px solid var(--phosphor-dim); background:var(--panel);
  overflow:hidden; position:relative;
}
.resume-experience{
  width:100%; text-align:left; padding:16px 20px;
  display:grid; grid-template-columns:150px 1fr auto; gap:16px; align-items:center;
  border-bottom:2px dashed transparent;
}
.experience[data-ouvert="true"] .resume-experience{ border-bottom-color:rgba(139,255,168,.2); }
.date-exp{ font-family:var(--font-body); font-size:10px; color:var(--phosphor-dim); letter-spacing:1px; }
.date-exp time{ display:block; color:var(--phosphor); font-family:var(--font-display); font-size:18px; letter-spacing:1px; margin-bottom:2px; }
.titre-exp p{ font-family:var(--font-body); font-size:10px; color:var(--amber); letter-spacing:1px; text-transform:uppercase; margin-bottom:2px; }
.titre-exp h3{ font-family:var(--font-display); font-size:22px; color:var(--phosphor); letter-spacing:1px; margin-bottom:4px; line-height:1.2; }
.titre-exp .accroche{ font-family:var(--font-body); font-size:11px; color:var(--phosphor-dim); line-height:1.5; margin-bottom:6px; }
.tags-majeurs{ display:flex; flex-wrap:wrap; gap:5px; }
.tags-majeurs li{ font-family:var(--font-body); font-size:9.5px; color:var(--amber); border:1px solid rgba(255,200,92,.35); padding:2px 7px; letter-spacing:1px; }
.commande-exp{
  font-family:var(--font-display); font-size:16px; color:#000;
  background:var(--amber); padding:6px 14px;
  letter-spacing:2px; white-space:nowrap;
  border:2px solid var(--amber);
  box-shadow:3px 3px 0 rgba(255,200,92,.3);
  animation:appelExplorer 1.4s ease-in-out infinite;
}
.commande-exp::after{ content:" ▼"; }
.experience[data-ouvert="true"] .commande-exp{
  animation:none; background:transparent; color:var(--phosphor); border-color:var(--phosphor-dim); box-shadow:none;
}
.experience[data-ouvert="true"] .commande-exp::after{ content:" ▲"; }
@keyframes appelExplorer{
  0%,100%{ box-shadow:3px 3px 0 rgba(255,200,92,.3); transform:none; }
  50%{ box-shadow:3px 3px 0 rgba(255,200,92,.7), 0 0 14px rgba(255,200,92,.5); transform:translateY(-1px); }
}
.carte-hint{
  text-align:center; margin-top:14px;
  font-family:var(--font-body); font-size:11px; color:var(--phosphor-dim);
  letter-spacing:1px;
}
.carte-hint b{ color:var(--amber); font-weight:400; }
.details-exp{ padding:0 20px 20px; }
.details-exp[hidden]{ display:none; }
.contexte-exp{
  padding:14px 16px; margin:14px 0;
  border:1px dashed var(--phosphor-dim); background:rgba(139,255,168,.03);
  font-size:12px; color:var(--phosphor-dim); line-height:1.6;
}
.contexte-exp strong{ display:block; font-family:var(--font-title); font-size:9px; color:var(--amber); letter-spacing:2px; margin-bottom:6px; }
.groupe-detaille{ display:grid; grid-template-columns:1fr 1fr; gap:12px 22px; margin-bottom:14px; }
.actions-detaillees{ display:flex; flex-direction:column; gap:6px; }
.actions-detaillees li{ display:flex; gap:6px; font-size:11.5px; line-height:1.5; }
.actions-detaillees strong{ color:var(--phosphor); font-family:var(--font-display); font-size:16px; font-weight:normal; letter-spacing:1px; min-width:110px; flex-shrink:0; }
.actions-detaillees strong::after{ content:" :"; margin-right:6px; }
.actions-detaillees span{ color:var(--phosphor-dim); }
.inventaire-exp{
  border:1px dashed var(--phosphor-dim); padding:10px 12px;
  display:flex; flex-wrap:wrap; gap:5px;
}
.inventaire-exp::before{
  content:"INVENTAIRE TECHNIQUE"; width:100%;
  font-family:var(--font-title); font-size:9px; color:var(--amber); letter-spacing:2px; margin-bottom:6px;
}
.inventaire-exp li{ font-family:var(--font-body); font-size:9.5px; color:var(--phosphor); border:1px solid rgba(139,255,168,.25); padding:2px 7px; letter-spacing:.5px; }
.actions-exp{ display:flex; justify-content:space-between; align-items:center; margin-top:12px; }
.actions-exp a{ font-family:var(--font-display); font-size:16px; color:var(--amber); text-decoration:none; letter-spacing:1px; }
.actions-exp a::before{ content:"▶ "; }
/* ===================================================================
   COMPÉTENCES — arbre de talents
   =================================================================== */
.grille-competences{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.bloc-comp{
  border:1px solid var(--phosphor-dim); background:var(--panel);
  padding:16px 18px; position:relative;
}
.bloc-comp[hidden]{ display:none; }
.bloc-comp .origine{
  font-family:var(--font-body); font-size:9px; color:var(--amber); letter-spacing:2px;
  text-transform:uppercase; margin-bottom:6px;
}
.bloc-comp h3{ font-family:var(--font-display); font-size:20px; color:var(--phosphor); letter-spacing:1px; margin-bottom:12px; }
.bloc-comp ul{ display:flex; flex-wrap:wrap; gap:5px; }
.bloc-comp li{ font-family:var(--font-body); font-size:10px; color:var(--phosphor); border:1px solid rgba(139,255,168,.25); padding:2px 7px; }
.bloc-comp.personnel{ border-style:dashed; }
/* ===================================================================
   FORMATIONS — trophées
   =================================================================== */
.trophees{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.trophee{
  border:2px solid var(--amber); background:rgba(255,200,92,.05);
  padding:16px 18px; display:grid; grid-template-columns:44px 1fr; gap:14px; align-items:center;
  position:relative;
}
.trophee::before{
  content:""; position:absolute; inset:3px; border:1px solid rgba(255,200,92,.3); pointer-events:none;
}
.trophee .medaille{
  width:44px; height:44px; background:var(--amber); color:#000;
  display:grid; place-items:center; font-family:var(--font-title); font-size:14px;
  box-shadow:3px 3px 0 rgba(255,200,92,.3);
}
.trophee time{ font-family:var(--font-body); font-size:10px; color:var(--phosphor-dim); letter-spacing:1px; display:block; margin-bottom:2px; }
.trophee h3{ font-family:var(--font-display); font-size:19px; color:var(--phosphor); letter-spacing:1px; margin-bottom:2px; line-height:1.2; }
.trophee p{ font-size:10.5px; color:var(--phosphor-dim); line-height:1.4; }
/* ===================================================================
   CONTACT — terminal
   =================================================================== */
.contact-grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:32px; align-items:start; }
.contact-txt h2{ font-family:var(--font-title); font-size:18px; color:var(--phosphor); line-height:1.5; margin-bottom:12px; }
.contact-txt p{ font-family:var(--font-body); font-size:12px; color:var(--phosphor-dim); margin-bottom:16px; }
.liens-contact{ display:flex; flex-direction:column; gap:8px; }
.liens-contact a{
  border:1px solid var(--phosphor-dim); padding:10px 14px; text-decoration:none;
  color:var(--phosphor); font-family:var(--font-display); font-size:18px; letter-spacing:1px;
  display:flex; justify-content:space-between; align-items:center;
}
.liens-contact a:hover{ border-color:var(--amber); color:var(--amber); }
.liens-contact a::before{ content:"▶ "; color:var(--amber); }
.liens-contact a span{ font-family:var(--font-body); font-size:10px; color:var(--phosphor-dim); }
.terminal-contact{
  border:2px solid var(--phosphor); background:var(--panel); padding:20px 22px;
  position:relative;
}
.terminal-contact::before{
  content:"▮ CONNEXION SÉCURISÉE — ENVOI DE MESSAGE"; position:absolute; top:-11px; left:14px;
  background:var(--bg); padding:0 10px;
  font-family:var(--font-title); font-size:9px; color:var(--amber); letter-spacing:2px;
}
.terminal-contact label{ display:block; margin-bottom:12px; }
.terminal-contact label span{
  display:block; font-family:var(--font-body); font-size:10px; color:var(--phosphor-dim);
  text-transform:uppercase; letter-spacing:1px; margin-bottom:4px;
}
.terminal-contact input, .terminal-contact textarea{
  width:100%; background:rgba(0,0,0,.3); border:1px solid var(--phosphor-dim);
  padding:9px 12px; font-family:var(--font-body); font-size:13px; color:var(--phosphor);
  letter-spacing:.5px;
}
.terminal-contact input:focus, .terminal-contact textarea:focus{ border-color:var(--amber); outline:none; }
.terminal-contact textarea{ resize:vertical; min-height:110px; }
.ligne-champs{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pot-de-miel{ position:absolute; left:-9999px; }
.bouton-envoi{
  background:var(--amber); color:#000; border:none;
  padding:12px 20px; font-family:var(--font-display); font-size:20px; letter-spacing:2px;
  cursor:pointer; box-shadow:3px 3px 0 rgba(255,200,92,.35);
  transition:transform .1s;
}
.bouton-envoi:hover{ background:var(--phosphor); }
.bouton-envoi:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 rgba(255,200,92,.35); }
.msg-formulaire{ font-family:var(--font-body); font-size:11px; margin-top:8px; letter-spacing:1px; min-height:1em; }
.msg-formulaire.succes{ color:var(--phosphor); }
.msg-formulaire.erreur{ color:var(--red); }
/* ===================================================================
   BARRE D'XP (footer)
   =================================================================== */
.barre-xp{
  position:fixed; bottom:0; left:0; right:0; z-index:60;
  background:rgba(5,10,8,.95); backdrop-filter:blur(4px);
  border-top:2px solid var(--phosphor-dim);
  padding:8px 18px; display:flex; align-items:center; gap:12px;
  font-family:var(--font-body); font-size:10px; letter-spacing:1px;
}
.barre-xp .niveau{ color:var(--amber); font-weight:700; }
.barre-xp .gauge{
  flex:1; max-width:640px; height:12px;
  border:1px solid var(--phosphor-dim); background:rgba(139,255,168,.05); position:relative;
}
.barre-xp .gauge span{
  display:block; height:100%; background:var(--phosphor); width:0%;
  box-shadow:0 0 8px var(--phosphor); transition:width .1s linear;
}
.barre-xp .xp-txt{ color:var(--phosphor-dim); }
.barre-xp .pied-mentions{ color:var(--phosphor-dim); }
/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width:1000px){.grille-accueil{ grid-template-columns:1fr; }
.fiche-perso{ max-width:340px; margin:0 auto; }
.double-voie{ grid-template-columns:1fr; }
.piliers{ grid-template-columns:repeat(2,1fr); }
.grille-inventaire{ grid-template-columns:repeat(2,1fr); }
.mission{ grid-template-columns:1fr; }
.mission-visuel{ border-right:none; border-bottom:1px dashed var(--phosphor-dim); }
.grille-competences{ grid-template-columns:repeat(2,1fr); }
.trophees{ grid-template-columns:1fr; }
.contact-grid{ grid-template-columns:1fr; }
.chemin{ overflow-x:auto; padding-bottom:8px; }}
@media (max-width:760px){.hud-menu{ position:fixed; inset:60px 0 auto 0; background:var(--bg); flex-direction:column;
    padding:20px 24px; border-bottom:2px solid var(--phosphor-dim); font-size:22px; gap:14px;
    transform:translateY(-8px); opacity:0; pointer-events:none; transition:.2s; }
.hud-menu[data-ouvert="true"]{ transform:none; opacity:1; pointer-events:auto; }
.hud-menu-btn{ display:block; }
.reperes-hud{ grid-template-columns:repeat(2,1fr); }
.piliers{ grid-template-columns:1fr; }
.grille-inventaire{ grid-template-columns:1fr; }
.resume-experience{ grid-template-columns:1fr; text-align:left; gap:10px; }
.commande-exp{ margin-top:6px; }
.groupe-detaille{ grid-template-columns:1fr; }
.ligne-champs{ grid-template-columns:1fr; }
.titre-principal{ font-size:18px; }
.baseline{ font-size:18px; }
.section{ padding:44px 0; }}
/* ===================================================================
   ILLUSTRATIONS — animations réutilisées telles quelles
   =================================================================== */
.cuivre{stroke:#7a4b2c;stroke-width:2.5;fill:none;opacity:.55;animation:flicker 2.6s infinite}
.fibre{stroke:var(--cyan);stroke-width:2.5;fill:none;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 3.4s ease-in-out infinite}
@keyframes flicker{0%,100%{opacity:.55}45%{opacity:.15}50%{opacity:.55}80%{opacity:.3}}
@keyframes draw{0%{stroke-dashoffset:1}45%{stroke-dashoffset:0}80%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
.pulse{r:3;fill:var(--cyan);opacity:0;animation:pulseshow 3.4s ease-in-out infinite}
@keyframes pulseshow{0%,40%{opacity:0}50%{opacity:1}80%{opacity:1}100%{opacity:0}}
.window-glow-house{opacity:.4;animation:windowglow 3.4s ease-in-out infinite}
@keyframes windowglow{0%,40%{opacity:.4}55%{opacity:1}80%{opacity:1}100%{opacity:.4}}
.halo-travel{opacity:0;animation:halomove 3.4s ease-in-out infinite}
@keyframes halomove{
  0%{transform:translateX(0);opacity:0}5%{opacity:1}
  45%{transform:translateX(252px);opacity:1}80%{transform:translateX(252px);opacity:1}
  90%{opacity:0}100%{transform:translateX(0);opacity:0}
}
.halo-travel-curve{opacity:0;animation:haloarc 3.2s ease-in-out infinite}
@keyframes haloarc{0%{offset-distance:0%;opacity:0}5%{opacity:1}45%{offset-distance:100%;opacity:1}80%{offset-distance:100%;opacity:1}90%{opacity:0}100%{offset-distance:0%;opacity:0}}
.heat-wave{stroke-dasharray:3 3;animation:heatrise 2.2s ease-out infinite;transform-box:fill-box;transform-origin:bottom}
@keyframes heatrise{0%{opacity:0;transform:translateY(0)}40%{opacity:.8}100%{opacity:0;transform:translateY(-16px)}}
.fibre-trunk{stroke:var(--cyan);stroke-width:2.2;fill:none;stroke-dasharray:5 5;animation:marchcyan 1.3s linear infinite}
.liaison-fibre{stroke:var(--cyan);stroke-width:2.6;fill:none;stroke-dasharray:6 6;animation:marchcyan 1.1s linear infinite}
.liaison-sdsl{stroke:#ff7ec6;stroke-width:2;fill:none;stroke-dasharray:2 6;stroke-linecap:round;animation:marchsdsl 1.8s linear infinite}
.liaison-wifi{stroke:var(--cyan);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-dasharray:0.5 8;animation:marchwifi 1.4s linear infinite}
@keyframes marchwifi{to{stroke-dashoffset:-8.5}}
@keyframes marchcyan{to{stroke-dashoffset:-12}}
@keyframes marchsdsl{to{stroke-dashoffset:-16}}
.signal-ok{stroke:var(--phosphor);stroke-width:2.2;fill:none;opacity:.9}
.signal-fault{stroke:var(--phosphor);stroke-width:2.2;fill:none;animation:faultline 4.4s ease-in-out infinite}
@keyframes faultline{0%,38%{stroke:var(--red)}44%,100%{stroke:var(--phosphor)}}
.icon-fault{opacity:0;animation:faulticon 4.4s ease-in-out infinite}
@keyframes faulticon{0%,4%{opacity:0}10%,34%{opacity:1}42%,100%{opacity:0}}
.icon-check{opacity:0;animation:checkicon 4.4s ease-in-out infinite}
@keyframes checkicon{0%,46%{opacity:0}52%,88%{opacity:1}96%,100%{opacity:0}}

/* ===================================================================
   VERSION RETRO-PRO V2 — professionnalisation, densité et responsive
   =================================================================== */
/* Header plus clair et plus robuste sur les largeurs intermédiaires */
.hud-menu{ gap:14px; flex-wrap:nowrap; }
.hud-menu a{ min-height:44px; display:inline-flex; align-items:center; }
.hud-menu-btn{ min-width:72px; min-height:44px; }
.hud-cv{ min-height:44px; display:inline-flex; align-items:center; }
.menu-overlay{ display:none; }
/* Hero : vocabulaire pro, même ambiance rétro */
.grille-accueil{ grid-template-columns:minmax(0,1.55fr) minmax(300px,.85fr); gap:32px; }
.fiche-perso{ max-width:390px; justify-self:end; width:100%; }
.fiche-donnees{
  display:grid; grid-template-columns:minmax(105px,.75fr) 1.25fr;
  gap:0; margin:14px 0 10px; border-top:1px dashed rgba(139,255,168,.22);
}
.fiche-donnees dt,.fiche-donnees dd{
  margin:0; padding:7px 0; border-bottom:1px dashed rgba(139,255,168,.15);
  font-family:var(--font-body); font-size:10px; line-height:1.35;
}
.fiche-donnees dt{ color:var(--phosphor-dim); text-transform:uppercase; letter-spacing:1px; }
.fiche-donnees dd{ color:var(--phosphor); text-align:right; }
.fiche-lien{
  display:block; margin-top:12px; padding:9px 10px; border:1px solid var(--amber);
  color:var(--amber); text-align:center; text-decoration:none; font-family:var(--font-display);
  font-size:18px; letter-spacing:1px;
}
.fiche-lien:hover,.fiche-lien:focus-visible{ background:var(--amber); color:#000; }
.repere-carte{ min-height:96px; transition:transform .15s ease,border-color .15s ease,background .15s ease; }
.repere-carte:hover{ transform:translateY(-3px); border-color:var(--phosphor); background:rgba(10,32,21,.72); }
/* Carte du poste actuel, visible tôt dans la page */
.niveau-actuel{ padding-top:38px; }
.carte-actuelle{
  border:2px solid var(--amber); background:linear-gradient(135deg,rgba(255,200,92,.075),rgba(10,21,16,.78) 52%);
  box-shadow:7px 7px 0 rgba(255,200,92,.13); padding:24px; position:relative;
}
.carte-actuelle::before{ content:""; position:absolute; inset:4px; border:1px solid rgba(255,200,92,.25); pointer-events:none; }
.actuel-entete{ display:flex; justify-content:space-between; align-items:flex-start; gap:24px; margin-bottom:20px; position:relative; z-index:1; }
.actuel-statut{ display:inline-block; color:#000; background:var(--amber); padding:4px 8px; font-family:var(--font-title); font-size:8px; letter-spacing:1px; margin-bottom:10px; }
.actuel-entete h3{ font-family:var(--font-display); color:var(--phosphor); font-size:26px; line-height:1.15; }
.actuel-lien{ border:1px solid var(--phosphor-dim); padding:9px 12px; color:var(--phosphor); text-decoration:none; font-family:var(--font-display); font-size:18px; white-space:nowrap; }
.actuel-lien:hover{ border-color:var(--phosphor); background:rgba(139,255,168,.08); }
.actuel-grille{ display:grid; grid-template-columns:1fr 1fr; gap:16px; position:relative; z-index:1; }
.actuel-colonne{ border:1px solid var(--phosphor-dark); background:rgba(5,10,8,.5); padding:16px; }
.actuel-colonne h4{ font-family:var(--font-display); color:var(--cyan); font-size:21px; margin-bottom:9px; }
.actuel-colonne li{ position:relative; padding:5px 0 5px 18px; color:var(--phosphor-2); font-size:11px; }
.actuel-colonne li::before{ content:"▸"; position:absolute; left:0; color:var(--amber); }
.actuel-tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; position:relative; z-index:1; }
.actuel-tags li{ border:1px solid var(--phosphor-dim); padding:4px 8px; color:var(--phosphor-dim); font-size:10px; }
/* Sections plus denses */
.section{ padding:52px 0; }
.section-tete{ margin-bottom:26px; }
.piliers{ gap:12px; }
.pilier,.voie{ transition:transform .15s ease,border-color .15s ease,background .15s ease; }
.pilier:hover,.voie:hover{ transform:translateY(-2px); border-color:var(--phosphor); background:rgba(12,29,20,.78); }
/* Missions : meilleure lecture et statut plus professionnel */
.mission{ min-height:335px; transition:transform .18s ease,box-shadow .18s ease; }
.mission:hover{ transform:translateY(-3px); box-shadow:8px 8px 0 rgba(139,255,168,.11); }
.mission-contenu{ padding:24px 26px; }
.mission-contenu h3{ text-transform:none; line-height:1.16; }
.mission-contenu > p{ font-size:12px; line-height:1.72; color:var(--phosphor-2); }
.mission-statut{
  color:var(--bg);
  background:var(--phosphor);
  border:1px solid var(--phosphor);
  font-weight:700;
  line-height:1.25;
  white-space:nowrap;
  flex-shrink:0;
  text-shadow:none;
  display:inline-flex; align-items:center; gap:6px;
}
.mission-statut::before{content:"★"; color:var(--bg); font-size:10px; line-height:1;}
.mission-recompense{ line-height:1.55; }
.mission-recompense b{ color:var(--amber); }
/* Parcours : bouton et résumés plus explicites */
.resume-experience{ min-height:142px; }
.titre-exp .accroche{ max-width:78ch; line-height:1.55; }
.commande-exp{ min-width:144px; min-height:44px; display:inline-grid; place-items:center; }
.contexte-exp{ line-height:1.75; }
.contexte-exp strong{ display:block; margin-bottom:8px; color:var(--amber); }
/* Compétences : une seule source d'information, cartes plus équilibrées */
.grille-competences{ align-items:stretch; }
.bloc-comp{ height:100%; transition:transform .15s ease,border-color .15s ease; }
.bloc-comp:hover{ transform:translateY(-2px); border-color:var(--phosphor); }
.bloc-comp ul{ columns:2; column-gap:18px; }
.bloc-comp li{ break-inside:avoid; }
.filtres button{ min-height:44px; }
/* Formations et contact */
.trophee{ transition:transform .15s ease,border-color .15s ease; }
.trophee:hover{ transform:translateY(-2px); border-color:var(--phosphor); }
.terminal-contact input,.terminal-contact textarea,.bouton-envoi{ min-height:44px; }
/* Pied de page */
.switch-animations .switch-etat::before{ content:""; }
@media (max-width:1120px){.hud-bar{ flex-wrap:wrap; }
.hud-menu-btn{ display:block; margin-left:auto; }
.hud-actions{ margin-left:0; }
.hud-menu{
    position:fixed; inset:62px 0 auto 0; z-index:80; background:rgba(5,10,8,.985);
    flex-direction:column; padding:18px 24px 24px; border-bottom:2px solid var(--phosphor-dim);
    font-size:22px; gap:4px; transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:transform .2s ease,opacity .2s ease;
  }
.hud-menu[data-ouvert="true"]{ transform:none; opacity:1; pointer-events:auto; }
.hud-menu a{ padding:8px 10px; border-bottom:1px dashed rgba(139,255,168,.15); }
.menu-overlay{
    display:block; position:fixed; inset:0; z-index:40; background:rgba(0,0,0,.62);
    opacity:0; pointer-events:none; transition:opacity .2s ease;
  }
.menu-overlay[data-ouvert="true"]{ opacity:1; pointer-events:auto; }
.grille-accueil{ grid-template-columns:minmax(0,1fr) minmax(270px,.7fr); }
.hud-identite small{ display:none; }}
@media (max-width:900px){.grille-accueil{ grid-template-columns:1fr; }
.fiche-perso{ justify-self:start; max-width:520px; margin:0; }
.avatar-wrap svg{ width:88px; height:88px; }
.reperes-hud{ grid-template-columns:1fr 1fr; }
.actuel-grille{ grid-template-columns:1fr; }
.mission{ grid-template-columns:1fr; }
.mission-visuel{ min-height:315px; border-right:0; border-bottom:1px dashed var(--phosphor-dim); overflow-x:auto; justify-content:flex-start; }
.mission-visuel svg{ min-width:560px; }
.mission-visuel::after{ content:"← faire glisser le schéma →"; position:sticky; right:8px; top:8px; align-self:flex-start; color:var(--amber); font-family:var(--font-body); font-size:9px; background:rgba(5,10,8,.85); padding:3px 6px; }
.bloc-comp ul{ columns:1; }}
@media (max-width:760px){.enveloppe{ padding-left:16px; padding-right:16px; }
.hud-bar{ padding:8px 16px; gap:10px; }
.hud-identite strong{ font-size:19px; }
.hud-badge{ width:30px; height:30px; }
.hud-cv{ display:none; }
.hud-menu{ inset:54px 0 auto 0; max-height:calc(100vh - 54px); overflow:auto; }
.accueil{ padding:48px 0 20px; }
.titre-principal{ font-size:clamp(17px,5.2vw,22px); line-height:1.55; }
.baseline{ font-size:19px; margin-bottom:24px; }
.menu-options{ font-size:20px; }
.menu-options a{ width:100%; min-height:46px; display:flex; align-items:center; justify-content:space-between; padding-right:10px; }
.fiche-perso{ max-width:none; padding:18px; }
.fiche-donnees{ grid-template-columns:1fr; }
.fiche-donnees dd{ text-align:left; padding-top:0; }
.reperes-hud{ grid-template-columns:1fr; gap:10px; }
.repere-carte{ min-height:auto; }
.section{ padding:38px 0; }
.section-tete h2{ font-size:17px; }
.section-tete p{ font-size:18px; }
.double-voie{ gap:16px; }
.voie{ padding:18px 16px; }
.actuel-entete{ flex-direction:column; gap:14px; }
.actuel-lien{ width:100%; text-align:center; white-space:normal; min-height:44px; }
.carte-actuelle{ padding:18px 14px; }
.mission-contenu{ padding:20px 18px; }
.mission-visuel{ min-height:270px; padding:10px; }
.mission-visuel svg{ min-width:510px; }
.mission-illus-caption{ position:static; padding-top:8px; width:510px; }
.mission-en-tete{ align-items:flex-start; gap:8px; }
.mission-num{ max-width:72%; }
.mission-contenu h3{ font-size:24px; }
.carte-parcours{ padding:16px 12px; }
.chemin{ gap:8px; }
.resume-experience{ grid-template-columns:1fr; min-height:0; padding:16px 14px; }
.tags-majeurs{ gap:5px; }
.tags-majeurs li{ font-size:9px; }
.commande-exp{ width:100%; }
.details-exp{ padding:16px 14px; }
.actions-detaillees li{ grid-template-columns:1fr; gap:2px; }
.actions-detaillees li span{ padding-left:0; }
.inventaire-exp{ gap:5px; }
.filtres{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:8px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; }
.filtres button{ flex:0 0 auto; scroll-snap-align:start; }
.grille-competences{ grid-template-columns:1fr; }
.trophee{ padding:16px 14px; }
.contact-txt h2{ font-size:27px; }}
@media (max-width:380px){.hud-identite strong{ font-size:17px; letter-spacing:1px; }
.hud-menu-btn{ min-width:64px; padding-inline:8px; }
.titre-principal{ font-size:16px; }
.menu-options .touche{ display:none; }
.mission-visuel svg{ min-width:480px; }
.mission-illus-caption{ width:480px; }}
@media (max-height:520px) and (orientation:landscape){.barre-xp{ position:static; }
body{ padding-bottom:0; }
.hud-menu{ max-height:calc(100vh - 54px); }}
body.menu-ouvert{ overflow:hidden; }
/* ===================================================================
   V2.3 — POLISH VISUEL ET PROLOGUE
   =================================================================== */
/* Entête : navigation compacte et stable */
.hud-bar{ min-height:58px; }
.hud-identite{ min-width:210px; }
.hud-menu{ justify-content:center; flex:1; }
.hud-menu a{ line-height:1; }
.hud-cv{ background:rgba(255,200,92,.035); }
.hud-cv:hover{ box-shadow:0 0 18px rgba(255,200,92,.24),3px 3px 0 rgba(255,200,92,.25); }
/* Prologue cinématique */
body.intro-active{ overflow:hidden; }
.intro-ecran[hidden]{ display:none; }
.intro-ecran{
  position:fixed; inset:0; z-index:180; display:grid; place-items:center;
  padding:clamp(12px,3vw,34px); overflow:hidden;
  background:
    radial-gradient(circle at 50% 48%,rgba(15,46,30,.96) 0%,rgba(5,10,8,.992) 56%,#000 100%),
    linear-gradient(rgba(139,255,168,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(139,255,168,.04) 1px,transparent 1px);
  background-size:auto,32px 32px,32px 32px;
  opacity:0; visibility:hidden; pointer-events:none;
}
.intro-ecran[data-state="active"]{
  opacity:1; visibility:visible; pointer-events:auto;
  animation:introScreenIn .48s steps(6,end) both;
}
.intro-ecran[data-state="closing"]{
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .58s ease,visibility .58s ease;
}
.intro-ecran::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(0deg,rgba(0,0,0,.3) 0,rgba(0,0,0,.3) 1px,transparent 1px,transparent 4px),
    radial-gradient(ellipse at center,transparent 48%,rgba(0,0,0,.52) 100%);
  mix-blend-mode:multiply;
}
.intro-ecran::after{
  content:""; position:absolute; left:0; right:0; top:-24%; height:22%; pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(125,255,240,.08),transparent);
  animation:introScan 3.1s linear infinite;
}
.intro-cinema{
  width:min(860px,100%); position:relative; z-index:2;
  border:3px solid var(--phosphor); background:rgba(4,9,7,.97);
  box-shadow:10px 10px 0 rgba(139,255,168,.13),0 0 48px rgba(139,255,168,.08);
  transform-origin:center; overflow:hidden;
}
.intro-ecran[data-state="active"] .intro-cinema{ animation:introConsoleIn .62s cubic-bezier(.2,.85,.2,1) both; }
.intro-cinema::before{ content:""; position:absolute; inset:4px; border:1px solid var(--phosphor-dark); pointer-events:none; z-index:5; }
.intro-cinema-barre{
  min-height:36px; padding:7px 13px; display:flex; justify-content:space-between; align-items:center;
  border-bottom:2px solid var(--phosphor-dim); background:rgba(139,255,168,.055);
  font-family:var(--font-body); font-size:9px; color:var(--phosphor-dim); letter-spacing:2px;
}
.intro-cinema-signal{ display:inline-flex; align-items:center; gap:7px; }
.intro-cinema-signal i{ width:7px; height:7px; background:var(--phosphor); box-shadow:0 0 8px var(--phosphor); animation:introSignal 1.1s steps(2,end) infinite; }
.intro-cinema-corps{ padding:clamp(20px,4vw,38px); }
.intro-console-log{
  min-height:124px; margin-bottom:18px; padding:12px 14px;
  border:1px solid rgba(139,255,168,.18); background:rgba(0,0,0,.26);
  display:flex; flex-direction:column; justify-content:flex-end; gap:5px;
  overflow:hidden;
}
.intro-console-log p{
  color:var(--phosphor-dark); font-size:10px; letter-spacing:.5px;
  opacity:.28; transform:translateX(-6px); transition:opacity .22s ease,color .22s ease,transform .22s ease;
}
.intro-console-log p span{ color:var(--phosphor-dark); margin-right:8px; }
.intro-console-log p.active{ opacity:1; color:var(--phosphor-2); transform:none; }
.intro-console-log p.active span{ color:var(--amber); }
.intro-console-log p.terminee::after{ content:"  ✓"; color:var(--phosphor); text-shadow:0 0 6px rgba(139,255,168,.5); }
.intro-scenes{ position:relative; min-height:220px; display:grid; place-items:center; text-align:center; overflow:hidden; }
.intro-scene{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  opacity:0; transform:translateY(18px) scale(.985); filter:blur(2px); pointer-events:none;
  transition:opacity .48s ease,transform .48s ease,filter .48s ease;
}
.intro-scene.active{ opacity:1; transform:none; filter:none; pointer-events:auto; }
.intro-scene.passee{ opacity:0; transform:translateY(-18px) scale(1.01); filter:blur(2px); }
.intro-kicker{ font-size:9px; color:var(--cyan); letter-spacing:3px; text-transform:uppercase; margin-bottom:12px; }
.intro-scene h2{ font-family:var(--font-title); font-size:clamp(17px,3vw,28px); line-height:1.5; color:var(--phosphor); text-shadow:0 0 15px rgba(139,255,168,.3); }
.intro-systeme{ margin-top:14px; color:var(--phosphor-dim); font-size:10px; letter-spacing:1px; text-transform:uppercase; }
.intro-grand-message{
  max-width:25ch; font-family:var(--font-display); font-size:clamp(32px,6vw,64px); line-height:1.05;
  color:var(--phosphor-2); text-shadow:0 0 18px rgba(139,255,168,.18);
}
.intro-grand-message.intro-accent{ color:var(--amber); text-shadow:0 0 18px rgba(255,200,92,.22); }
.intro-description{ margin-top:18px; max-width:42ch; font-family:var(--font-display); font-size:clamp(21px,3vw,30px); line-height:1.3; color:var(--phosphor); }
.intro-description::before{ content:"> "; color:var(--cyan); }
.intro-scene-final{ gap:12px; }
.intro-ready-badge{ display:inline-block; padding:5px 10px; background:var(--phosphor); color:#000; font-family:var(--font-title); font-size:9px; letter-spacing:1px; box-shadow:3px 3px 0 rgba(139,255,168,.22); }
.intro-scene-final p{ font-family:var(--font-display); font-size:24px; color:var(--phosphor-2); }
.intro-enter{
  min-height:48px; margin-top:6px; border:2px solid var(--amber); color:#000; background:var(--amber);
  padding:10px 18px; font-family:var(--font-display); font-size:21px; letter-spacing:1px;
  box-shadow:4px 4px 0 rgba(255,200,92,.25); opacity:1; transform:none;
}
.intro-enter:hover,.intro-enter:focus-visible{ background:var(--phosphor); border-color:var(--phosphor); box-shadow:4px 4px 0 rgba(139,255,168,.25),0 0 20px rgba(139,255,168,.16); }
.intro-enter[disabled]{ opacity:0; transform:translateY(8px); pointer-events:none; }
.intro-progression{ margin-top:12px; }
.intro-progression-meta{ display:flex; justify-content:space-between; gap:14px; margin-bottom:7px; font-size:9px; color:var(--amber); letter-spacing:1px; }
.intro-progression-meta strong{ color:var(--phosphor); font-weight:400; min-width:42px; text-align:right; }
.intro-barre{ height:16px; border:1px solid var(--phosphor-dim); background:rgba(139,255,168,.045); overflow:hidden; position:relative; }
.intro-barre::after{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent 0 8px,rgba(5,10,8,.42) 8px 10px); pointer-events:none; }
.intro-barre span{ display:block; width:0; height:100%; background:linear-gradient(90deg,var(--phosphor),var(--cyan)); box-shadow:0 0 14px rgba(139,255,168,.5); will-change:width; }
.intro-actions{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:14px; }
.intro-conseil{ color:var(--phosphor-dim); font-size:9px; letter-spacing:1px; text-transform:uppercase; }
.intro-skip{ min-height:42px; border:1px solid var(--amber); color:var(--amber); padding:8px 13px; font-family:var(--font-display); font-size:18px; letter-spacing:1px; }
.intro-skip:hover,.intro-skip:focus-visible{ background:var(--amber); color:#000; box-shadow:0 0 16px rgba(255,200,92,.25); }
@keyframes introScreenIn{ 0%{opacity:0} 18%{opacity:.92} 26%{opacity:.35} 38%,100%{opacity:1} }
@keyframes introConsoleIn{ from{opacity:0;transform:scale(.96) translateY(14px)} to{opacity:1;transform:none} }
@keyframes introScan{ to{ transform:translateY(760%); } }
@keyframes introSignal{ 0%,45%{opacity:.35} 46%,100%{opacity:1} }
/* Missions : schémas et cartes davantage polis */
.mission-visuel{
  background:
    linear-gradient(rgba(139,255,168,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(139,255,168,.025) 1px,transparent 1px),#020504;
  background-size:20px 20px;
}
.mission-visuel::before{ content:""; position:absolute; inset:10px; border:1px solid rgba(139,255,168,.08); pointer-events:none; }
.mission-visuel svg{ position:relative; z-index:1; overflow:visible; }
.mission-visuel svg text{
  paint-order:stroke fill; stroke:rgba(2,5,4,.98); stroke-width:4px; stroke-linejoin:round;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.7));
}
.mission:hover .mission-visuel{ box-shadow:inset 0 0 35px rgba(139,255,168,.035); }
.mission-statut{ box-shadow:2px 2px 0 rgba(139,255,168,.2); }
.mission-statut::before{ animation:missionStar 1.8s steps(2,end) infinite; }
@keyframes missionStar{ 0%,88%,100%{transform:none} 92%{transform:scale(1.35) rotate(10deg)} }
/* Barre de progression : hiérarchie propre */
.barre-xp{
  display:grid; grid-template-columns:auto minmax(140px,1fr) minmax(190px,auto) auto auto auto;
  align-items:center; gap:12px;
}
.barre-xp .gauge{ width:100%; max-width:none; }
.rejouer-intro{
  min-height:28px; padding:3px 8px; border:1px solid rgba(139,255,168,.22);
  color:var(--phosphor-dim); font-family:var(--font-body); font-size:9px; letter-spacing:1px;
}
.rejouer-intro:hover,.rejouer-intro:focus-visible{ color:var(--amber); border-color:var(--amber); }
.switch-animations{ min-height:28px; border-color:rgba(139,255,168,.22); white-space:nowrap; }
/* Micro-interactions plus cohérentes */
.pilier,.voie,.bloc-comp,.trophee,.repere-carte,.carte-actuelle,.experience{
  will-change:transform;
}
@media (hover:hover){.experience:hover{ border-color:var(--phosphor); box-shadow:5px 5px 0 rgba(139,255,168,.08); }
.fiche-perso:hover{ box-shadow:7px 7px 0 rgba(139,255,168,.2),0 0 24px rgba(139,255,168,.04); }}
@media (max-width:1120px){.hud-actions{ order:3; width:100%; justify-content:flex-end; }}
@media (max-width:900px){.intro-console-log{ min-height:112px; }
.intro-scenes{ min-height:205px; }}
@media (max-width:760px){.intro-cinema-corps{ padding:18px 15px 16px; }
.intro-console-log{ min-height:105px; padding:10px; }
.intro-console-log p{ font-size:9px; }
.intro-scenes{ min-height:190px; }
.intro-grand-message{ font-size:clamp(30px,10vw,46px); }
.intro-description{ font-size:22px; }
.intro-actions{ align-items:stretch; flex-direction:column; }
.intro-conseil{ order:2; text-align:center; }
.intro-skip{ width:100%; }}
@media (max-width:420px){.intro-ecran{ padding:7px; }
.intro-cinema-barre{ font-size:8px; }
.intro-console-log{ min-height:96px; gap:3px; }
.intro-console-log p:nth-child(-n/**/+2){ display:none; }
.intro-scenes{ min-height:180px; }
.intro-scene h2{ font-size:15px; }
.intro-grand-message{ font-size:34px; }
.intro-description{ font-size:20px; }
.intro-enter{ width:100%; font-size:19px; }}

html.animations-off .intro-ecran::after,
html.animations-off .intro-cinema-signal i,
html.animations-off .mission-statut::before{ animation:none; }
/* ===== Source consolidée : mobile-polish.css ===== */
/* Mobile polish — base utilisateur V2.4 */
.cv-mobile{display:none}
.fiche-actions{display:grid;grid-template-columns:1fr;gap:8px;margin-top:12px}
.fiche-cv{display:none;text-align:center;text-decoration:none;border:1px solid var(--amber);color:var(--amber);padding:9px 10px;font-family:var(--font-display);font-size:18px;letter-spacing:1px}
.fiche-cv:hover,.fiche-cv:focus-visible{background:var(--amber);color:#000}
.schema-zoom-btn{display:none}
.schema-modal[hidden]{display:none}
.schema-modal{position:fixed;inset:0;z-index:220;background:rgba(0,0,0,.94);padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom));overflow:auto}
.schema-modal-dialog{width:min(1040px,100%);min-height:100%;margin:auto;display:flex;flex-direction:column;justify-content:center}
.schema-modal-head{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--bg);border:1px solid var(--phosphor-dim);padding:10px 12px}
.schema-modal-head h2{font-family:var(--font-display);font-size:22px;color:var(--phosphor)}
.schema-modal-close{min-height:44px;border:1px solid var(--amber);color:var(--amber);padding:7px 10px;font-family:var(--font-display);font-size:18px}
.schema-modal-content{border:1px solid var(--phosphor-dim);border-top:0;background:#000;padding:16px;overflow:auto}
.schema-modal-content svg{display:block;width:100%;height:auto;min-width:680px;max-width:980px;margin:auto}
.schema-modal-content .mission-illus-caption{position:static;width:auto;padding:10px 0 0}
body.schema-modal-open{overflow:hidden}
@media (max-width:760px){html{scroll-padding-top:64px}
/* En-tête mobile : identité + CV + menu sur une seule ligne */
.hud-bar{display:flex;flex-wrap:nowrap;gap:7px;padding:7px 10px}
.hud-identite{min-width:0;flex:1 1 auto;margin-right:0}
.hud-identite>span:last-child{min-width:0}
.hud-identite strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:17px;letter-spacing:.5px}
.hud-identite small{display:none}
.hud-badge{width:28px;height:28px;font-size:9px}
.hud-actions{display:flex;order:2;width:auto;margin:0;flex:0 0 auto}
.hud-menu-btn{order:3;min-width:58px;min-height:40px;padding:5px 7px;font-size:9px}
.hud-cv{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:5px 8px;font-size:15px;box-shadow:2px 2px 0 rgba(255,200,92,.25)}
.cv-desktop{display:none}
.cv-mobile{display:inline}
/* Le profil vient avant le manifeste sur mobile */
.grille-accueil{display:flex;flex-direction:column;gap:20px}
.grille-accueil>.fiche-perso{order:1;margin:0;width:100%;max-width:none}
.grille-accueil>div:first-child{order:2}
.fiche-cv{display:block}
.fiche-actions{grid-template-columns:1fr 1fr}
.fiche-actions a{display:flex;align-items:center;justify-content:center;min-height:44px;font-size:16px}
/* Barre XP mobile rétablie avec commandes essentielles */
/* Carte du parcours : progression verticale lisible, sans défilement horizontal */
.carte-parcours{overflow:visible;padding:18px 16px}
.carte-parcours .chemin{display:flex;flex-direction:column;align-items:stretch;gap:0;overflow:visible;padding:4px 0!important}
.carte-parcours .noeud{display:grid;grid-template-columns:30px 1fr;align-items:center;justify-items:start;gap:10px;width:100%;flex:0 0 auto}
.carte-parcours .noeud .point{grid-column:1;width:28px;height:28px}
.carte-parcours .noeud .lib{grid-column:2;max-width:none;text-align:left;font-size:10px;line-height:1.35}
.carte-parcours .lien-chemin{width:2px;height:24px;min-width:2px;flex:0 0 24px;margin-left:13px;background:repeating-linear-gradient(180deg,var(--phosphor-dim) 0 5px,transparent 5px 9px)}
/* Schémas : aperçu ajusté à l'écran, zoom plein écran sur demande */
.mission-visuel{overflow:hidden;min-height:0;padding:10px;display:flex;flex-direction:column;align-items:stretch}
.mission-visuel::after{display:none}
.mission-visuel svg{display:block;width:100%;min-width:0;max-width:100%;height:auto;margin:0 auto}
.mission-visuel svg text{paint-order:stroke fill;stroke:rgba(5,10,8,.96);stroke-width:3px;stroke-linejoin:round}
.mission-illus-caption{position:static;width:100%;padding:8px 2px 0;font-size:8px;line-height:1.45}
.schema-zoom-btn{display:inline-flex;align-items:center;justify-content:center;align-self:flex-end;min-height:40px;margin-top:9px;border:1px solid var(--cyan);color:var(--cyan);background:rgba(5,10,8,.88);padding:6px 10px;font-family:var(--font-display);font-size:17px;letter-spacing:1px}
/* Conserver une densité proche de l'ordinateur */
.reperes-hud{grid-template-columns:1fr 1fr;gap:9px}
.repere-carte{padding:13px 12px;min-height:105px}}
@media (max-width:390px){.hud-identite strong{font-size:15px}
.hud-badge{display:none}
.fiche-actions{grid-template-columns:1fr}
.reperes-hud{grid-template-columns:1fr}}
/* ===== Source consolidée : v2.6-polish.css ===== */
/* ==============================================================
   V2.6 — Chronologie, iconographie légère et thème clair/CRT
   ============================================================== */
/* Petites illustrations de cartes */
.carte-icone{
  width:42px;height:42px;display:grid;place-items:center;
  border:1px solid rgba(125,255,240,.35);
  background:linear-gradient(135deg,rgba(125,255,240,.12),rgba(139,255,168,.035));
  color:var(--cyan);margin-bottom:10px;position:relative;
  box-shadow:3px 3px 0 rgba(125,255,240,.08);
}
.carte-icone::after{content:"";position:absolute;inset:4px;border:1px dashed rgba(125,255,240,.16);pointer-events:none}
.carte-icone svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.repere-carte .carte-icone{width:34px;height:34px;margin:0 0 9px}
.repere-carte .carte-icone svg{width:19px;height:19px}
.bloc-comp{position:relative;padding-top:18px}
.bloc-comp .carte-icone{margin-bottom:11px}
.bloc-comp.personnel .carte-icone{color:var(--amber);border-color:rgba(255,200,92,.35);background:rgba(255,200,92,.07)}
/* Dates visibles sur la carte du parcours */
.noeud .lib{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:105px}
.noeud .lib strong{font-weight:500;color:inherit;font-family:var(--font-body);font-size:9px;line-height:1.25}
.noeud .lib time{font-family:var(--font-display);font-size:15px;line-height:1;color:var(--phosphor);white-space:nowrap;letter-spacing:.4px}
.noeud[data-actuel="true"] .lib time{color:var(--amber)}
.carte-parcours .chemin{padding-top:5px}
/* Commande de thème dans le HUD inférieur */
.theme-toggle{
  min-height:32px;display:inline-flex;align-items:center;gap:6px;
  border:1px solid rgba(125,255,240,.35);background:rgba(10,21,16,.72);
  color:var(--cyan);padding:4px 8px;font-family:var(--font-body);font-size:9px;
  letter-spacing:.7px;white-space:nowrap;transition:border-color .16s,background .16s,color .16s,transform .16s;
}
.theme-toggle:hover,.theme-toggle:focus-visible{border-color:var(--amber);color:var(--amber);background:rgba(255,200,92,.07)}
.theme-toggle:active{transform:translateY(1px)}
.theme-toggle-icon{font-family:var(--font-display);font-size:17px;line-height:1}
.theme-toggle-state{color:var(--phosphor);font-weight:700}
/* ------------------------ THÈME CLAIR ------------------------ */
html[data-theme="light"]{
  --bg:#eef4f7;
  --bg-2:#f8fbfc;
  --bg-3:#e3edf1;
  --panel:rgba(255,255,255,.88);
  --phosphor:#126f86;
  --phosphor-2:#18323d;
  --phosphor-dim:#3f606d;
  --phosphor-dark:#bdd2da;
  --cyan:#168db2;
  --amber:#d4672c;
  --pink:#a8417a;
  --red:#b42318;
  --grid:rgba(18,111,134,.055);
  --grid-strong:rgba(18,111,134,.1);
  --shadow-color:rgba(31,80,96,.12);
  --bg-navy:#eef4f7;
  --text:#126f86;
  --orange:#d4672c;
  --green:#126f86;
  --card:#fff;
  --card-border:#9bbbc6;
  --text-muted:#3f606d;
  color-scheme:light;
}
html[data-theme="light"] body{
  color:var(--phosphor-2);
  background:
    radial-gradient(circle at 15% 5%,rgba(22,141,178,.10),transparent 30%),
    radial-gradient(circle at 92% 22%,rgba(212,103,44,.08),transparent 28%),
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px),
    var(--bg);
  background-size:auto,auto,32px 32px,32px 32px,auto;
}
html[data-theme="light"] body::before{background:repeating-linear-gradient(0deg,rgba(18,111,134,.025) 0,rgba(18,111,134,.025) 1px,transparent 1px,transparent 4px);mix-blend-mode:multiply}
html[data-theme="light"] body::after{background:radial-gradient(ellipse at center,transparent 70%,rgba(32,73,87,.08) 100%)}
html[data-theme="light"] .hud-top,
html[data-theme="light"] .barre-xp{background:rgba(248,251,252,.94);border-color:#9bbbc6;box-shadow:0 -2px 15px rgba(31,80,96,.07)}
html[data-theme="light"] .hud-menu{background:rgba(248,251,252,.985)}
html[data-theme="light"] .hud-badge{color:#fff;box-shadow:3px 3px 0 rgba(18,111,134,.18)}
html[data-theme="light"] .hud-cv:hover,
html[data-theme="light"] .fiche-cv:hover,
html[data-theme="light"] .fiche-lien:hover,
html[data-theme="light"] .filtres button[aria-selected="true"],
html[data-theme="light"] .bouton-envoi{color:#fff}
html[data-theme="light"] .fiche-perso,
html[data-theme="light"] .repere-carte,
html[data-theme="light"] .voie,
html[data-theme="light"] .pilier,
html[data-theme="light"] .carte-actuelle,
html[data-theme="light"] .mission,
html[data-theme="light"] .carte-parcours,
html[data-theme="light"] .experience,
html[data-theme="light"] .bloc-comp,
html[data-theme="light"] .terminal-contact{
  background:rgba(255,255,255,.88);
  box-shadow:5px 5px 0 rgba(31,80,96,.07);
}
html[data-theme="light"] .mission-visuel,
html[data-theme="light"] .schema-modal-content{background:#eaf2f5}
html[data-theme="light"] .mission-visuel svg text,
html[data-theme="light"] .schema-modal-content svg text{stroke:rgba(238,244,247,.98)}
html[data-theme="light"] .schema-modal{background:rgba(222,233,238,.96)}
html[data-theme="light"] .schema-modal-head{background:#f8fbfc}
html[data-theme="light"] .terminal-contact input,
html[data-theme="light"] .terminal-contact textarea{background:#f7fafb;color:var(--phosphor-2)}
html[data-theme="light"] .mission-statut,
html[data-theme="light"] .actuel-statut{color:#fff}
html[data-theme="light"] .commande-exp{color:#fff}
html[data-theme="light"] .commande-exp::after{color:inherit}
html[data-theme="light"] .noeud .point{background:#f8fbfc}
html[data-theme="light"] .noeud[data-actuel="true"] .point{color:#fff;background:var(--phosphor)}
html[data-theme="light"] .theme-toggle{background:#fff;border-color:#9bbbc6;color:var(--amber)}
html[data-theme="light"] .theme-toggle-state{color:var(--phosphor)}
html[data-theme="light"] .menu-overlay{background:rgba(28,52,62,.35)}
html[data-theme="light"] .schema-zoom-btn{background:rgba(248,251,252,.92)}
/* L'introduction conserve volontairement son ambiance cinématique sombre. */
html[data-theme="light"] .intro-ecran{
  --bg:#050a08;--bg-2:#0a1510;--bg-3:#0d1b14;--panel:rgba(10,21,16,.6);
  --phosphor:#8bffa8;--phosphor-2:#c6ffd5;--phosphor-dim:#3f8f56;--phosphor-dark:#1e4a2d;
  --cyan:#7dfff0;--amber:#ffc85c;--grid:rgba(139,255,168,.06);color:#8bffa8;
}
@media (max-width:760px){.noeud .lib{align-items:flex-start;min-width:0}
.noeud .lib strong{font-size:10px}
.noeud .lib time{font-size:17px}
.carte-icone{width:39px;height:39px;margin-bottom:9px}
.repere-carte .carte-icone{width:31px;height:31px}
/* Barre mobile: niveau + progression + 3 commandes */}
/* ===== Source consolidée : v2.7-polish.css ===== */
/* ==============================================================
   V2.7 — Densité, logos, formations et barre HUD compacte
   ============================================================== */
/* ---------- HUD inférieur : une seule ligne, hauteur réduite ---------- */
body{padding-bottom:42px}
.barre-xp{
  height:40px;
  min-height:40px;
  padding:4px 14px;
  gap:8px;
  flex-wrap:nowrap;
  overflow:hidden;
  white-space:nowrap;
}
.barre-xp .niveau{flex:0 0 auto;font-size:9px}
.barre-xp .gauge{flex:1 1 280px;min-width:70px;max-width:520px;height:9px}
.barre-xp .xp-txt{flex:1 1 270px;min-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px}
.barre-xp .rejouer-intro,
.barre-xp .theme-toggle,
.barre-xp .switch-animations{
  flex:0 0 auto;
  min-height:28px;
  height:28px;
  margin:0;
  padding:3px 7px;
  line-height:1;
  white-space:nowrap;
  align-items:center;
}
.barre-xp .switch-animations{gap:5px}
.barre-xp .switch-animations > span:first-child{line-height:1}
.barre-xp .switch-animations .switch-piste{height:14px;width:40px}
.barre-xp .switch-animations .switch-etat{font-size:7px;padding-inline:4px}
.barre-xp .theme-toggle-icon{font-size:14px}
.barre-xp .theme-toggle-state{font-size:8px}
/* ---------- Logos d'entreprise ---------- */
.resume-experience{
  grid-template-columns:135px 112px minmax(0,1fr) auto;
  grid-template-areas:"date logo titre action";
  gap:14px;
}
.date-exp{grid-area:date}
.logo-entreprise{
  grid-area:logo;
  width:112px;height:66px;
  display:flex;align-items:center;justify-content:center;
  padding:7px 9px;
  border:1px solid rgba(139,255,168,.28);
  background:#fff;
  box-shadow:3px 3px 0 rgba(139,255,168,.08);
  overflow:hidden;
}
.logo-entreprise img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.logo-entreprise.logo-cnd{height:76px;padding:5px}
.logo-entreprise.logo-cnd img{max-width:72px}
.logo-entreprise.logo-ste img{max-width:88px}
.logo-entreprise.logo-protect img{max-width:102px}
.titre-exp{grid-area:titre;min-width:0}
.commande-exp{grid-area:action;align-self:center}
html[data-theme="light"] .logo-entreprise{border-color:#bdd2da;box-shadow:3px 3px 0 rgba(31,80,96,.08)}
/* ---------- Cartes d'entrée : plus compactes et centrées ---------- */
.reperes-hud{gap:11px}
.repere-carte{
  min-height:108px;
  padding:14px 13px 12px;
  text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.repere-entete{display:inline-flex;align-items:center;justify-content:center;gap:9px;margin-bottom:7px}
.repere-carte .carte-icone{margin:0;flex:0 0 auto}
.repere-carte h4{margin:0;line-height:1.1}
.repere-carte p{max-width:29ch;margin-inline:auto;line-height:1.35}
/* ---------- Piliers : identifiant et titre sur la même ligne ---------- */
.piliers{gap:11px}
.pilier{
  min-height:132px;
  padding:13px 14px;
  text-align:center;
  display:flex;flex-direction:column;justify-content:center;
}
.pilier-entete{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:7px;flex-wrap:wrap}
.pilier .puce{margin:0;font-size:8px;padding:2px 5px;white-space:nowrap}
.pilier h3{margin:0;font-size:18px;line-height:1.15}
.pilier p{max-width:36ch;margin-inline:auto;line-height:1.45}
/* ---------- Compétences : icône + catégorie + titre sur une seule tête ---------- */
.grille-competences{gap:12px}
.bloc-comp{padding:14px 16px}
.bloc-comp-tete{display:flex;align-items:center;gap:11px;margin-bottom:11px}
.bloc-comp-tete .carte-icone{margin:0;flex:0 0 auto;width:40px;height:40px}
.bloc-comp-titres{min-width:0}
.bloc-comp .origine{margin:0 0 2px;font-size:8px;line-height:1.15}
.bloc-comp h3{margin:0;font-size:19px;line-height:1.12}
.bloc-comp ul{margin-top:0}
/* ---------- Poste actuel : contraste renforcé en clair ---------- */
html[data-theme="light"] .actuel-statut{
  background:#126f86;
  color:#fff;
  border:1px solid #126f86;
  box-shadow:2px 2px 0 rgba(18,111,134,.20);
  text-shadow:none;
}
html[data-theme="light"] .carte-actuelle{
  background:linear-gradient(135deg,rgba(22,141,178,.08),rgba(255,255,255,.96) 52%);
  border-color:#168db2;
}
/* ---------- Schémas : les libellés restent visuellement au premier plan ---------- */
.mission-visuel svg text,
.schema-modal-content svg text{
  paint-order:stroke fill;
  stroke:rgba(5,10,8,.98);
  stroke-width:3.8px;
  stroke-linejoin:round;
  pointer-events:none;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.45));
}
html[data-theme="light"] .mission-visuel svg text,
html[data-theme="light"] .schema-modal-content svg text{
  stroke:rgba(238,244,247,.99);
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.4));
}
/* ---------- Formations : séparation claire diplômes / certifications ---------- */
.formations-groupes{display:flex;flex-direction:column;gap:30px}
.formation-groupe{
  border:2px solid var(--phosphor-dim);
  background:rgba(10,21,16,.34);
  padding:20px;
  position:relative;
}
.formation-groupe::before{content:"";position:absolute;inset:4px;border:1px solid rgba(139,255,168,.12);pointer-events:none}
.formation-groupe-tete{position:relative;z-index:1;display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;margin-bottom:16px}
.formation-groupe-tete .formation-type{grid-row:1/3;align-self:stretch;display:flex;align-items:center;padding:5px 9px;background:var(--phosphor);color:#000;font-family:var(--font-title);font-size:8px;letter-spacing:1px;writing-mode:vertical-rl;transform:rotate(180deg)}
.formation-certifications .formation-type{background:var(--amber)}
.formation-groupe-tete h3{font-family:var(--font-display);font-size:27px;color:var(--phosphor);line-height:1.1;margin:0 0 4px}
.formation-groupe-tete p{font-size:11px;color:var(--phosphor-dim);max-width:78ch;line-height:1.5}
.formation-grille{display:grid;gap:14px;position:relative;z-index:1}
.formation-grille-diplomes{grid-template-columns:repeat(3,minmax(0,1fr))}
.formation-grille-certifications{grid-template-columns:repeat(2,minmax(0,1fr))}
.formation-carte{
  border:1px solid var(--phosphor-dim);
  background:rgba(5,10,8,.62);
  padding:15px;
  display:grid;
  grid-template-columns:112px minmax(0,1fr);
  gap:14px;
  align-items:start;
  min-height:100%;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.formation-carte:hover{transform:translateY(-2px);border-color:var(--phosphor);box-shadow:5px 5px 0 rgba(139,255,168,.08)}
.formation-logo{
  width:112px;height:82px;
  background:#fff;border:1px solid rgba(139,255,168,.22);
  padding:8px;display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.formation-logo.logo-fond-sombre{background:#17222b}
.formation-logo img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.formation-contenu{min-width:0}
.formation-badge{display:inline-block;margin-bottom:5px;padding:2px 6px;border:1px solid rgba(255,200,92,.5);color:var(--amber);font-size:8px;letter-spacing:1px;font-family:var(--font-body)}
.diplome-card .formation-badge{border-color:rgba(125,255,240,.42);color:var(--cyan)}
.formation-carte time{display:block;color:var(--phosphor-dim);font-size:9px;letter-spacing:1px;margin-bottom:3px}
.formation-carte h4{font-family:var(--font-display);font-size:21px;line-height:1.15;color:var(--phosphor);margin:0 0 6px}
.formation-carte p{font-size:10.5px;line-height:1.48;color:var(--phosphor-dim);margin:0 0 6px}
.formation-carte p strong{color:var(--phosphor-2);font-weight:600}
.formation-carte ul{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px}
.formation-carte li{font-size:8.5px;color:var(--phosphor);padding:2px 5px;border:1px solid rgba(139,255,168,.22)}
html[data-theme="light"] .formation-groupe{background:rgba(255,255,255,.72);border-color:#9bbbc6}
html[data-theme="light"] .formation-groupe::before{border-color:rgba(18,111,134,.10)}
html[data-theme="light"] .formation-carte{background:#fff;border-color:#bdd2da;box-shadow:3px 3px 0 rgba(31,80,96,.06)}
html[data-theme="light"] .formation-carte p strong{color:#18323d}
html[data-theme="light"] .formation-groupe-tete .formation-type{color:#fff}
/* ---------- Responsive ---------- */
@media (max-width:1120px){.formation-grille-diplomes{grid-template-columns:1fr}
.formation-grille-certifications{grid-template-columns:1fr}
.formation-carte{grid-template-columns:125px 1fr}}
@media (max-width:760px){.resume-experience{
    grid-template-columns:84px minmax(0,1fr);
    grid-template-areas:"date date" "logo titre" "action action";
    gap:10px 12px;
  }
.logo-entreprise{width:84px;height:58px;padding:6px}
.logo-entreprise.logo-cnd{height:66px}
.logo-entreprise.logo-cnd img{max-width:56px}
.commande-exp{width:100%}
.repere-carte{min-height:96px}
.repere-entete{gap:7px}
.repere-carte h4{font-size:17px}
.pilier{min-height:auto;padding:12px}
.pilier-entete{gap:6px}
.pilier h3{font-size:17px}
.bloc-comp-tete{gap:9px;margin-bottom:9px}
.bloc-comp-tete .carte-icone{width:36px;height:36px}
.bloc-comp h3{font-size:18px}
.formation-groupe{padding:15px 12px}
.formation-groupe-tete{grid-template-columns:1fr;gap:5px}
.formation-groupe-tete .formation-type{writing-mode:horizontal-tb;transform:none;grid-row:auto;width:max-content;padding:4px 7px}
.formation-groupe-tete h3{font-size:23px}
.formation-carte{grid-template-columns:80px minmax(0,1fr);gap:11px;padding:12px}
.formation-logo{width:80px;height:64px;padding:6px}
.formation-carte h4{font-size:19px}}
@media (max-width:390px){.formation-carte{grid-template-columns:1fr}
.formation-logo{width:100%;height:72px}}
/* ===== Source consolidée : v2.8-polish.css ===== */
/* ==============================================================
   V2.8 — Densité, formations, poste actuel et HUD équilibré
   ============================================================== */
/* 1. Piliers : utiliser toute la largeur disponible */
.pilier{min-height:116px;padding:12px 14px}
.pilier-entete{width:100%;margin-bottom:6px}
.pilier p{max-width:none;width:100%;margin:0;padding-inline:4px;line-height:1.42;text-wrap:balance}
@media (min-width:900px){.piliers{grid-template-columns:repeat(3,minmax(0,1fr))}
.pilier-entete{flex-wrap:nowrap}}
/* 2. Logos des formations : centrage identique aux logos d'entreprise */
.formation-carte{align-items:center}
.formation-logo{align-self:center;justify-self:center;box-shadow:3px 3px 0 rgba(139,255,168,.08)}
.formation-logo img{object-position:center}
html[data-theme="light"] .formation-logo{border-color:#bdd2da;box-shadow:3px 3px 0 rgba(31,80,96,.08)}
/* 3. Groupes de formations : titre directement sur la bordure */
.formations-groupes{gap:34px}
.formation-groupe{padding:24px 20px 20px}
.formation-groupe::after{
  content:attr(data-label);
  position:absolute;left:-12px;top:50%;transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl;
  z-index:3;
  padding:7px 5px;
  border:1px solid rgba(139,255,168,.45);
  background:var(--phosphor);
  color:#000;
  font-family:var(--font-title);
  font-size:8px;
  letter-spacing:1px;
  box-shadow:2px 2px 0 rgba(139,255,168,.12);
}
.formation-certifications::after{background:var(--amber);border-color:rgba(255,200,92,.58)}
html[data-theme="light"] .formation-groupe::after{background:#126f86;color:#fff;border-color:#126f86;box-shadow:2px 2px 0 rgba(18,111,134,.18)}
html[data-theme="light"] .formation-certifications::after{background:#d88725;border-color:#d88725}
/* 4. Poste actuel : blason et identité CND */
.niveau-tete-composee{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:26px;align-items:center}
.niveau-tete-texte{min-width:0}
.niveau-blason{
  width:140px;height:140px;justify-self:end;
  display:flex;align-items:center;justify-content:center;
  padding:10px;border:1px solid rgba(139,255,168,.28);
  background:rgba(5,10,8,.72);
  box-shadow:5px 5px 0 rgba(139,255,168,.08);
}
.niveau-blason img{display:block;width:100%;height:100%;object-fit:contain}
.actuel-identite-cnd{display:grid;grid-template-columns:92px minmax(0,1fr);gap:14px;align-items:center;min-width:0}
.actuel-logo-cnd{
  width:92px;height:68px;display:flex;align-items:center;justify-content:center;
  padding:6px;background:#fff;border:1px solid rgba(139,255,168,.28);
  box-shadow:3px 3px 0 rgba(139,255,168,.08);overflow:hidden
}
.actuel-logo-cnd img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.actuel-identite-texte{min-width:0}
html[data-theme="light"] .niveau-blason{background:#fff;border-color:#bdd2da;box-shadow:5px 5px 0 rgba(31,80,96,.08)}
html[data-theme="light"] .actuel-logo-cnd{border-color:#bdd2da;box-shadow:3px 3px 0 rgba(31,80,96,.08)}
/* 5. HUD inférieur : une ligne, mais mieux répartie */
body{padding-bottom:48px!important}
.barre-xp{
  height:46px;min-height:46px;
  display:grid;
  grid-template-columns:auto minmax(180px,1.6fr) minmax(210px,1fr) auto auto auto;
  align-items:center;
  gap:10px;
  padding:5px 14px;
  overflow:hidden;
}
.barre-xp .niveau{font-size:9px;min-width:52px;text-align:center}
.barre-xp .gauge{width:100%;max-width:none;min-width:0;height:10px}
.barre-xp .xp-txt{min-width:0;max-width:none;font-size:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barre-xp .rejouer-intro,.barre-xp .theme-toggle,.barre-xp .switch-animations{
  height:32px;min-height:32px;padding:4px 9px;
  justify-content:center;border-color:rgba(139,255,168,.28)!important
}
.barre-xp .rejouer-intro{min-width:58px}
.barre-xp .theme-toggle{min-width:92px}
.barre-xp .switch-animations{min-width:118px}
@media (max-width:760px){.niveau-tete-composee{grid-template-columns:1fr 92px;gap:12px;align-items:start}
.niveau-blason{width:88px;height:88px;padding:6px}
.actuel-identite-cnd{grid-template-columns:72px minmax(0,1fr);gap:10px}
.actuel-logo-cnd{width:72px;height:56px;padding:5px}
.formation-groupe{padding:22px 12px 14px;margin-left:7px}
.formation-groupe::after{
    left:12px;top:-11px;transform:none;writing-mode:horizontal-tb;
    padding:5px 8px;font-size:7px
  }
.formation-carte{align-items:center}}
@media (max-width:420px){.niveau-tete-composee{grid-template-columns:1fr}
.niveau-blason{justify-self:start;width:78px;height:78px;margin-top:8px}}
/* ===== Source consolidée : v2.9-polish.css ===== */
/* ==============================================================
   V2.9 — Formations horizontales, blason CND renforcé,
   contraste du thème clair
   ============================================================== */
/* 1. Formations : le logo accompagne l'en-tête, le détail occupe
   ensuite toute la largeur de la carte. */
.formation-carte{
  grid-template-columns:minmax(0,1fr) 118px;
  grid-template-rows:auto auto auto auto auto auto;
  column-gap:16px;
  row-gap:0;
  align-items:center;
  padding:14px 16px;
}
.formation-contenu{display:contents}
.formation-logo{
  grid-column:2;
  grid-row:1 / 5;
  width:118px;
  height:82px;
  align-self:center;
  justify-self:end;
  margin:0;
}
.formation-carte .formation-badge{
  grid-column:1;
  grid-row:1;
  justify-self:start;
  margin:0 0 4px;
}
.formation-carte time{
  grid-column:1;
  grid-row:2;
  margin:0 0 3px;
}
.formation-carte h4{
  grid-column:1;
  grid-row:3;
  margin:0 0 5px;
}
.formation-carte p:first-of-type{
  grid-column:1;
  grid-row:4;
  margin:0;
}
.formation-carte p:nth-of-type(2){
  grid-column:1 / -1;
  grid-row:5;
  margin:9px 0 0;
  max-width:none;
}
.formation-carte ul{
  grid-column:1 / -1;
  grid-row:6;
  margin-top:8px;
}
/* 2. Le blason est plus grand et reste proche du titre au lieu
   d'être repoussé au bord droit du conteneur. */
.niveau-tete-composee{
  grid-template-columns:minmax(0,790px) 184px;
  justify-content:start;
  gap:18px;
  align-items:center;
}
.niveau-blason{
  width:176px;
  height:176px;
  justify-self:start;
  padding:9px;
  margin:0;
}
.niveau-blason img{filter:drop-shadow(0 4px 8px rgba(0,0,0,.24))}
/* 3. Thème clair : cartes du poste actuel plus lumineuses et plus
   contrastées, sans grand aplat gris. */
html[data-theme="light"] .actuel-colonne{
  background:linear-gradient(145deg,#e7f5f9 0%,#f8fcfd 66%,#eef8fa 100%);
  border:1px solid #83b9c8;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.8),3px 3px 0 rgba(20,102,125,.08);
}
html[data-theme="light"] .actuel-colonne h4{
  color:#0b7693;
  text-shadow:none;
}
html[data-theme="light"] .actuel-colonne li{
  color:#234653;
}
html[data-theme="light"] .actuel-colonne li::before{
  color:#d86e26;
}
html[data-theme="light"] .actuel-tags li{
  background:#f4fafc;
  color:#315866;
  border-color:#a9c9d2;
}
html[data-theme="light"] .actuel-identite-texte h3,
html[data-theme="light"] .actuel-entete h3{
  color:#135f75;
}
@media (max-width:1120px){.niveau-tete-composee{
    grid-template-columns:minmax(0,700px) 158px;
    gap:16px;
  }
.niveau-blason{width:152px;height:152px}}
@media (max-width:760px){.formation-carte{
    grid-template-columns:minmax(0,1fr) 86px;
    column-gap:11px;
    padding:12px;
  }
.formation-logo{
    width:86px;
    height:64px;
    padding:6px;
  }
.formation-carte h4{font-size:18px}
.formation-carte p:nth-of-type(2){margin-top:8px}
.niveau-tete-composee{
    grid-template-columns:minmax(0,1fr) 116px;
    gap:10px;
    align-items:start;
  }
.niveau-blason{
    width:112px;
    height:112px;
    justify-self:start;
    padding:6px;
  }}
@media (max-width:480px){.formation-carte{
    grid-template-columns:minmax(0,1fr) 72px;
    column-gap:8px;
  }
.formation-logo{
    width:72px;
    height:58px;
    padding:5px;
  }
.formation-carte .formation-badge{font-size:7px}
.formation-carte time{font-size:8px}
.formation-carte h4{font-size:17px}
.niveau-tete-composee{
    grid-template-columns:1fr;
    gap:10px;
  }
.niveau-blason{
    width:112px;
    height:112px;
    justify-self:start;
    margin-top:2px;
  }}
/* ===== Source consolidée : v2.10-contact.css ===== */
/* ===================================================================
   V2.10 — Épilogue / contact orienté conversion
   =================================================================== */
.contact-final{
  position:relative;
  padding-top:56px;
  padding-bottom:76px;
}
.contact-final::before{
  content:"";
  position:absolute;
  inset:24px 24px 48px;
  pointer-events:none;
  background:
    radial-gradient(circle at 14% 26%,rgba(255,200,92,.08),transparent 30%),
    radial-gradient(circle at 86% 74%,rgba(125,255,240,.07),transparent 31%);
  border:1px solid rgba(139,255,168,.07);
}
.contact-final > *{position:relative;z-index:1}
.contact-final-tete{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);
  column-gap:42px;
  align-items:end;
  margin-bottom:28px;
}
.contact-final-tete .cartouche{grid-column:1/-1}
.contact-final-tete h2{margin-bottom:0}
.contact-final-tete > p:last-child{
  max-width:none;
  padding:14px 16px;
  border-left:3px solid var(--amber);
  background:rgba(255,200,92,.045);
  color:var(--phosphor-2);
  font-family:var(--font-body);
  font-size:11.5px;
  line-height:1.7;
}
.contact-final-grid{
  display:grid;
  grid-template-columns:minmax(320px,.86fr) minmax(480px,1.14fr);
  gap:20px;
  align-items:stretch;
}
.contact-conversion,
.contact-form-final{
  min-width:0;
  height:100%;
}
.contact-conversion{
  display:flex;
  flex-direction:column;
  border:2px solid var(--amber);
  background:
    linear-gradient(145deg,rgba(255,200,92,.075),rgba(10,21,16,.88) 44%),
    var(--panel);
  padding:22px;
  box-shadow:7px 7px 0 rgba(255,200,92,.12);
  position:relative;
}
.contact-conversion::before{
  content:"";
  position:absolute;
  inset:4px;
  border:1px solid rgba(255,200,92,.23);
  pointer-events:none;
}
.contact-status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:max-content;
  max-width:100%;
  padding:4px 8px;
  margin-bottom:20px;
  border:1px solid var(--phosphor-dim);
  color:var(--phosphor);
  background:rgba(5,10,8,.65);
  font-family:var(--font-body);
  font-size:9px;
  letter-spacing:1.4px;
}
.contact-status span{
  width:7px;
  height:7px;
  background:var(--phosphor);
  box-shadow:0 0 8px var(--phosphor);
  animation:contactSignal 1.8s ease-in-out infinite;
}
@keyframes contactSignal{50%{opacity:.35;box-shadow:0 0 2px var(--phosphor)}}
.contact-overline{
  color:var(--amber);
  font-family:var(--font-title);
  font-size:9px;
  letter-spacing:2px;
  margin-bottom:8px;
}
.contact-conversion h3{
  color:var(--phosphor);
  font-family:var(--font-display);
  font-size:30px;
  line-height:1.08;
  letter-spacing:1px;
  margin-bottom:9px;
}
.contact-intro{
  color:var(--phosphor-dim);
  font-size:11.5px;
  line-height:1.7;
  margin-bottom:18px;
}
.cta-cv-principal,
.cta-linkedin{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  min-height:68px;
  padding:11px 14px;
  text-decoration:none;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease;
}
.cta-cv-principal{
  color:#050a08;
  background:var(--amber);
  border:2px solid var(--amber);
  box-shadow:4px 4px 0 rgba(255,200,92,.25);
}
.cta-cv-principal:hover,
.cta-cv-principal:focus-visible{
  transform:translateY(-3px);
  box-shadow:7px 7px 0 rgba(255,200,92,.28),0 0 18px rgba(255,200,92,.22);
}
.cta-linkedin{
  color:var(--phosphor);
  border:1px solid var(--phosphor-dim);
  background:rgba(5,10,8,.52);
}
.cta-linkedin:hover,
.cta-linkedin:focus-visible{
  transform:translateY(-2px);
  border-color:var(--cyan);
  background:rgba(125,255,240,.055);
}
.cta-picto{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid currentColor;
  font-family:var(--font-title);
  font-size:12px;
  line-height:1;
}
.cta-texte{min-width:0;display:flex;flex-direction:column;gap:2px}
.cta-texte strong{
  font-family:var(--font-display);
  font-size:20px;
  font-weight:400;
  line-height:1.1;
  letter-spacing:.8px;
}
.cta-texte small{
  font-family:var(--font-body);
  font-size:9px;
  line-height:1.35;
  opacity:.76;
  letter-spacing:.4px;
}
.cta-fleche{font-family:var(--font-display);font-size:24px;transition:transform .16s ease}
.cta-cv-principal:hover .cta-fleche,
.cta-linkedin:hover .cta-fleche{transform:translateX(4px)}
.contact-separateur{
  display:flex;
  align-items:center;
  gap:10px;
  margin:13px 0;
  color:var(--phosphor-dim);
  font-size:8px;
  letter-spacing:1.3px;
  white-space:nowrap;
}
.contact-separateur::before,
.contact-separateur::after{content:"";height:1px;flex:1;background:rgba(139,255,168,.17)}
.contact-infos{
  display:grid;
  gap:0;
  margin-top:18px;
  border-top:1px dashed rgba(139,255,168,.23);
}
.contact-infos li{
  display:grid;
  grid-template-columns:100px minmax(0,1fr);
  gap:10px;
  padding:9px 0;
  border-bottom:1px dashed rgba(139,255,168,.15);
  line-height:1.4;
}
.contact-infos span{
  color:var(--phosphor-dim);
  font-size:8.5px;
  letter-spacing:1px;
}
.contact-infos strong{
  color:var(--phosphor-2);
  font-size:9.5px;
  font-weight:500;
}
.contact-fin-jeu{
  margin-top:auto;
  padding-top:18px;
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:9px;
  align-items:center;
}
.contact-fin-jeu > span{grid-row:1/3;color:var(--amber);font-size:20px}
.contact-fin-jeu strong{color:var(--amber);font-family:var(--font-title);font-size:8px;letter-spacing:1.5px}
.contact-fin-jeu small{color:var(--phosphor-dim);font-size:9px;margin-top:3px}
.contact-form-final{
  padding:20px 22px 18px;
  display:flex;
  flex-direction:column;
  border-color:var(--phosphor);
  box-shadow:7px 7px 0 rgba(139,255,168,.1);
}
.contact-form-final::before{display:none}
.contact-form-head{
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  gap:13px;
  align-items:center;
  margin-bottom:18px;
  padding-bottom:14px;
  border-bottom:1px dashed rgba(139,255,168,.22);
}
.contact-form-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border:1px solid var(--cyan);
  color:var(--cyan);
  background:rgba(125,255,240,.045);
  font-family:var(--font-display);
  font-size:27px;
}
.contact-form-head p{
  color:var(--amber);
  font-family:var(--font-body);
  font-size:8px;
  letter-spacing:2px;
  margin-bottom:2px;
}
.contact-form-head h3{
  color:var(--phosphor);
  font-family:var(--font-display);
  font-size:25px;
  line-height:1.05;
  margin-bottom:3px;
}
.contact-form-head div > span{color:var(--phosphor-dim);font-size:10px}
.contact-form-final label{margin-bottom:10px}
.contact-form-final label > span{margin-bottom:3px}
.contact-form-final input,
.contact-form-final textarea{
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
.contact-form-final input:hover,
.contact-form-final textarea:hover{border-color:rgba(139,255,168,.68)}
.contact-form-final input:focus,
.contact-form-final textarea:focus{
  box-shadow:0 0 0 2px rgba(255,200,92,.13);
  background:rgba(0,0,0,.48);
}
.contact-form-final textarea{min-height:124px}
.contact-form-actions{
  display:grid;
  grid-template-columns:auto minmax(170px,1fr);
  gap:14px;
  align-items:center;
  margin-top:2px;
}
.contact-form-actions .bouton-envoi{
  min-width:250px;
  min-height:48px;
  padding:10px 18px;
  white-space:nowrap;
}
.contact-form-actions p{
  color:var(--phosphor-dim);
  font-size:8.5px;
  line-height:1.45;
}
.contact-cloture{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:18px;
  margin-top:24px;
  padding:10px 13px;
  border-top:1px solid var(--phosphor-dim);
  border-bottom:1px solid var(--phosphor-dim);
  color:var(--phosphor-dim);
  font-size:8px;
  letter-spacing:1.4px;
}
.contact-cloture strong{
  color:var(--phosphor);
  font-family:var(--font-title);
  font-size:8px;
  letter-spacing:2px;
  text-align:center;
}
.contact-cloture span:last-child{text-align:right}
/* Thème clair */
html[data-theme="light"] .contact-final::before{
  background:
    radial-gradient(circle at 14% 26%,rgba(230,107,53,.09),transparent 30%),
    radial-gradient(circle at 86% 74%,rgba(25,118,163,.085),transparent 31%);
  border-color:rgba(25,118,163,.08);
}
html[data-theme="light"] .contact-final-tete > p:last-child{
  color:#25485a;
  background:#fff8f1;
  border-left-color:#e66b35;
}
html[data-theme="light"] .contact-conversion{
  background:linear-gradient(145deg,#fff7ed,#fff 48%);
  border-color:#e66b35;
  box-shadow:7px 7px 0 rgba(230,107,53,.12);
}
html[data-theme="light"] .contact-conversion::before{border-color:rgba(230,107,53,.2)}
html[data-theme="light"] .contact-status{background:#edf8fb;color:#126f96;border-color:#6bb4d2}
html[data-theme="light"] .contact-status span{background:#1976a3;box-shadow:0 0 6px #1976a3}
html[data-theme="light"] .contact-overline{color:#c85422}
html[data-theme="light"] .contact-conversion h3{color:#102c3b}
html[data-theme="light"] .contact-intro{color:#466574}
html[data-theme="light"] .cta-cv-principal{background:#e66b35;border-color:#e66b35;color:#fff;box-shadow:4px 4px 0 rgba(230,107,53,.18)}
html[data-theme="light"] .cta-linkedin{background:#f1f8fb;color:#126f96;border-color:#8fc5da}
html[data-theme="light"] .contact-separateur{color:#5d7a88}
html[data-theme="light"] .contact-separateur::before,
html[data-theme="light"] .contact-separateur::after{background:#ccdde4}
html[data-theme="light"] .contact-infos{border-top-color:#c7dce5}
html[data-theme="light"] .contact-infos li{border-bottom-color:#d9e6eb}
html[data-theme="light"] .contact-infos span{color:#5e7b88}
html[data-theme="light"] .contact-infos strong{color:#183947}
html[data-theme="light"] .contact-fin-jeu strong,
html[data-theme="light"] .contact-fin-jeu > span{color:#c85422}
html[data-theme="light"] .contact-fin-jeu small{color:#5e7b88}
html[data-theme="light"] .contact-form-final{background:#fff;border-color:#1976a3;box-shadow:7px 7px 0 rgba(25,118,163,.11)}
html[data-theme="light"] .contact-form-head{border-bottom-color:#d2e2e9}
html[data-theme="light"] .contact-form-icon{color:#1976a3;border-color:#62abd0;background:#eff8fc}
html[data-theme="light"] .contact-form-head p{color:#c85422}
html[data-theme="light"] .contact-form-head h3{color:#102c3b}
html[data-theme="light"] .contact-form-head div > span{color:#567684}
html[data-theme="light"] .contact-form-final input,
html[data-theme="light"] .contact-form-final textarea{background:#f8fbfc;color:#173846;border-color:#a9c7d3}
html[data-theme="light"] .contact-form-final input:hover,
html[data-theme="light"] .contact-form-final textarea:hover{border-color:#1976a3}
html[data-theme="light"] .contact-form-final input:focus,
html[data-theme="light"] .contact-form-final textarea:focus{background:#fff;box-shadow:0 0 0 3px rgba(25,118,163,.12)}
html[data-theme="light"] .contact-form-actions p{color:#617e8b}
html[data-theme="light"] .contact-cloture{border-color:#9bbdcb;color:#557684}
html[data-theme="light"] .contact-cloture strong{color:#126f96}
@media(max-width:980px){.contact-final-tete{grid-template-columns:1fr;gap:14px}
.contact-final-tete h2{margin-bottom:0}
.contact-final-grid{grid-template-columns:1fr}
.contact-conversion{min-height:auto}}
@media(max-width:760px){.contact-final{padding-top:42px;padding-bottom:64px}
.contact-final::before{inset:12px 8px 40px}
.contact-final-tete{margin-bottom:20px}
.contact-final-tete > p:last-child{font-size:10.5px;padding:11px 12px}
.contact-conversion,.contact-form-final{padding:18px 14px}
.contact-conversion h3{font-size:27px}
.cta-cv-principal,.cta-linkedin{grid-template-columns:38px minmax(0,1fr) auto;padding:10px;gap:10px}
.cta-picto{width:38px;height:38px}
.cta-texte strong{font-size:18px}
.contact-infos li{grid-template-columns:1fr;gap:2px}
.contact-form-head{grid-template-columns:42px minmax(0,1fr)}
.contact-form-icon{width:42px;height:42px}
.contact-form-head h3{font-size:23px}
.contact-form-actions{grid-template-columns:1fr;gap:8px}
.contact-form-actions .bouton-envoi{width:100%;min-width:0}
.contact-form-actions p{text-align:center}
.contact-cloture{grid-template-columns:1fr;gap:5px;text-align:center}
.contact-cloture span:last-child{text-align:center}}
@media(max-width:390px){.contact-status{font-size:8px;letter-spacing:1px}
.cta-cv-principal,.cta-linkedin{grid-template-columns:34px minmax(0,1fr) auto}
.cta-picto{width:34px;height:34px;font-size:10px}
.cta-texte strong{font-size:16px}
.cta-texte small{font-size:8px}}

html.animations-off .contact-status span{animation:none}
/* ===== Source consolidée : v2.11-polish.css ===== */
/* ==============================================================
   V2.11 — Finition mobile, cartes d'expérience, intro fenêtrée,
   animation du personnage pixel
   ============================================================== */
/* 1. Actions de la fiche : dimensions strictement identiques */
.fiche-actions{align-items:stretch}
.fiche-actions a{
  width:100%;height:100%;min-height:56px;
  display:flex;align-items:center;justify-content:center;
  text-align:center;line-height:1.25;padding:10px 12px;
}
@media (max-width:760px){.fiche-actions{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr}
.fiche-actions a{min-height:72px;font-size:16px}}
@media (max-width:390px){.fiche-actions{grid-template-columns:1fr}
.fiche-actions a{min-height:48px}}
/* 2. Blason CND : reste à côté du titre même sur mobile */
@media (max-width:760px){.niveau-tete-composee{
    grid-template-columns:minmax(0,1fr) 98px;
    gap:10px;align-items:start;justify-content:start
  }
.niveau-blason{
    width:96px;height:96px;justify-self:start;
    margin:4px 0 0;padding:5px
  }
.niveau-tete-texte h2{padding-right:0}}
@media (max-width:480px){.niveau-tete-composee{grid-template-columns:minmax(0,1fr) 82px;gap:8px}
.niveau-blason{width:80px;height:80px;margin-top:2px}
.niveau-tete-texte h2{font-size:clamp(15px,4.7vw,18px);line-height:1.5}
.niveau-tete-texte>p:last-child{grid-column:1/-1}}
/* 3. Les schémas sont lisibles directement : aucun bouton d'agrandissement */
.schema-zoom-btn,.schema-modal{display:none}
/* 4. Cartes d'expérience : logo au niveau du titre, description en pleine largeur */
.resume-experience{
  display:grid;
  grid-template-columns:135px 112px minmax(0,1fr) auto;
  grid-template-rows:auto auto auto auto;
  grid-template-areas:
    "date logo meta action"
    "date logo job action"
    "date desc desc action"
    "date tags tags action";
  align-items:center;column-gap:14px;row-gap:4px
}
.resume-experience .date-exp{grid-area:date;align-self:start;padding-top:4px}
.resume-experience .logo-entreprise{grid-area:logo;align-self:center}
.resume-experience .titre-exp{display:contents}
.resume-experience .titre-exp>p:first-child{grid-area:meta;margin:0;align-self:end}
.resume-experience .titre-exp>h3{grid-area:job;margin:0;align-self:start}
.resume-experience .titre-exp>.accroche{grid-area:desc;margin:7px 0 2px;max-width:none;width:100%}
.resume-experience .titre-exp>.tags-majeurs{grid-area:tags;margin-top:3px}
.resume-experience .commande-exp{grid-area:action;align-self:center}
@media (max-width:760px){.resume-experience{
    grid-template-columns:76px minmax(0,1fr);
    grid-template-rows:auto auto auto auto auto auto;
    grid-template-areas:
      "date date"
      "logo meta"
      "logo job"
      "desc desc"
      "tags tags"
      "action action";
    gap:7px 10px;padding:15px 14px!important
  }
.resume-experience .date-exp{padding:0 0 3px}
.resume-experience .logo-entreprise{
    width:76px;height:62px;padding:5px;justify-self:start
  }
.resume-experience .titre-exp>p:first-child{font-size:9px;line-height:1.35}
.resume-experience .titre-exp>h3{font-size:21px;line-height:1.22}
.resume-experience .titre-exp>.accroche{margin-top:7px;font-size:10.5px;line-height:1.5}
.resume-experience .commande-exp{width:100%;margin-top:7px}}
/* 5. Barre de fenêtre de l'introduction */
.intro-cinema-barre{display:flex;align-items:center;justify-content:space-between;gap:14px}
.intro-window-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.intro-window-right{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.intro-window-controls{display:flex;align-items:center;gap:5px}
.intro-window-control{
  width:26px;height:22px;display:grid;place-items:center;padding:0;
  border:1px solid rgba(139,255,168,.38);background:rgba(0,0,0,.28);
  color:var(--phosphor);font-family:var(--font-body);font-size:13px;line-height:1
}
.intro-window-control:hover,.intro-window-control:focus-visible{background:var(--phosphor);color:#000}
.intro-window-close:hover,.intro-window-close:focus-visible{background:#d64d4d;border-color:#d64d4d;color:#fff}
.intro-ecran[data-window="maximized"] .intro-cinema{width:calc(100vw - 24px);max-width:none;min-height:calc(100vh - 24px);display:flex;flex-direction:column}
.intro-ecran[data-window="maximized"] .intro-cinema-corps{flex:1;display:flex;flex-direction:column}
.intro-ecran[data-window="minimized"]{align-items:end;justify-items:center;padding-bottom:28px;background:rgba(0,0,0,.35)}
.intro-ecran[data-window="minimized"] .intro-cinema{width:min(620px,calc(100vw - 24px));min-height:0}
.intro-ecran[data-window="minimized"] .intro-cinema-corps{display:none}
.intro-ecran[data-window="minimized"] .intro-cinema-barre{border-bottom:0}
.intro-ecran[data-window="minimized"] .intro-window-min{background:var(--amber);color:#000}
@media (max-width:600px){.intro-cinema-signal{display:none}
.intro-window-right{gap:6px}
.intro-window-control{width:28px;height:26px}}
/* 6. Personnage pixel : animation légère de veille */
.avatar-wrap{position:relative;isolation:isolate}
.avatar-wrap::after{
  content:"✦";position:absolute;right:calc(50% - 72px);top:8px;
  color:var(--amber);font-family:var(--font-title);font-size:10px;
  opacity:0;animation:pixelSpark 4.8s steps(1,end) infinite
}
.avatar-wrap svg{animation:pixelIdle 2.2s steps(2,end) infinite;transform-origin:50% 100%}
.avatar-wrap .pixel-eye{transform-box:fill-box;transform-origin:center;animation:pixelBlink 4.6s steps(1,end) infinite}
.avatar-wrap .pixel-arm-right,.avatar-wrap .pixel-hand-right,.avatar-wrap .pixel-tool{
  transform-box:fill-box;transform-origin:20% 10%;animation:pixelWave 3.8s steps(3,end) infinite
}
.avatar-wrap .pixel-leg-left{transform-box:fill-box;animation:pixelStepLeft 2.2s steps(2,end) infinite}
.avatar-wrap .pixel-leg-right{transform-box:fill-box;animation:pixelStepRight 2.2s steps(2,end) infinite}
@keyframes pixelIdle{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes pixelBlink{0%,88%,92%,100%{opacity:1}89%,91%{opacity:0}}
@keyframes pixelWave{0%,72%,100%{transform:rotate(0deg) translate(0,0)}78%{transform:rotate(-18deg) translate(-1px,-1px)}84%{transform:rotate(10deg) translate(0,-1px)}90%{transform:rotate(-12deg) translate(-1px,0)}}
@keyframes pixelStepLeft{0%,100%{transform:translateX(0)}50%{transform:translateX(-1px)}}
@keyframes pixelStepRight{0%,100%{transform:translateX(0)}50%{transform:translateX(1px)}}
@keyframes pixelSpark{0%,70%,100%{opacity:0;transform:scale(.5)}74%,82%{opacity:1;transform:scale(1)}86%{opacity:0;transform:scale(1.35)}}
html.animations-off .avatar-wrap svg,
html.animations-off .avatar-wrap .pixel-eye,
html.animations-off .avatar-wrap .pixel-arm-right,
html.animations-off .avatar-wrap .pixel-hand-right,
html.animations-off .avatar-wrap .pixel-tool,
html.animations-off .avatar-wrap .pixel-leg-left,
html.animations-off .avatar-wrap .pixel-leg-right,
html.animations-off .avatar-wrap::after{animation:none}

/* ===== Source consolidée : v2.12-polish.css ===== */
/* ==============================================================
   V2.12 — Harmonisation mobile, blason, fenêtre Mac et avatar vivant
   ============================================================== */
/* 1. Boutons de la fiche parfaitement alignés, quelle que soit la largeur */
.fiche-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:stretch}
.fiche-actions .fiche-lien,
.fiche-actions .fiche-cv{
  margin:0;width:100%;min-width:0;height:100%;
  min-height:58px;padding:10px 12px;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;
  text-align:center;line-height:1.24;border:1px solid var(--amber);
  box-shadow:none;transform:none
}
@media (max-width:760px){.fiche-actions{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:9px}
.fiche-actions .fiche-lien,.fiche-actions .fiche-cv{min-height:68px;font-size:16px}}
@media (max-width:340px){.fiche-actions{grid-template-columns:1fr}
.fiche-actions .fiche-lien,.fiche-actions .fiche-cv{min-height:48px}}
/* 2. Le blason accompagne le cartouche sur mobile, le titre conserve toute la largeur */
@media (max-width:760px){.niveau-tete-composee{
    display:grid;grid-template-columns:minmax(0,1fr) 88px;
    grid-template-areas:"kicker blason" "titre titre" "description description";
    gap:8px 12px;align-items:start
  }
.niveau-tete-texte>.cartouche{grid-area:kicker;align-self:center;margin:0;min-width:0}
.niveau-tete-texte>h2{grid-area:titre;margin:4px 0 0;padding:0;max-width:none;overflow-wrap:normal;word-break:normal}
.niveau-tete-texte>p:last-child{grid-area:description;margin-top:2px;max-width:68ch}
.niveau-blason{grid-area:blason;width:86px;height:86px;justify-self:end;align-self:start;margin:0;padding:5px}}
@media (max-width:430px){.niveau-tete-composee{grid-template-columns:minmax(0,1fr) 72px;gap:7px 9px}
.niveau-blason{width:70px;height:70px;padding:4px}
.niveau-tete-texte>.cartouche{font-size:9px;line-height:1.45;letter-spacing:2px}
.niveau-tete-texte>h2{font-size:clamp(16px,5vw,20px);line-height:1.5}}
/* 3. Fenêtre d'introduction inspirée de macOS : trois pastilles, seule la rouge ferme */
.intro-cinema-barre{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:12px
}
.intro-window-controls{display:flex;align-items:center;gap:7px}
.intro-window-control{
  width:13px;height:13px;min-width:13px;min-height:13px;
  padding:0;border:0;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.16),0 0 0 1px rgba(255,255,255,.05)
}
.intro-window-close{background:#ff5f57;cursor:pointer}
.intro-window-min{background:#febc2e;pointer-events:none}
.intro-window-max{background:#28c840;pointer-events:none}
.intro-window-close:hover,.intro-window-close:focus-visible{background:#ff3b30!important;box-shadow:0 0 0 3px rgba(255,95,87,.22)!important}
.intro-window-close::after{content:"×";display:grid;place-items:center;width:100%;height:100%;font:700 9px/1 Arial,sans-serif;color:rgba(90,0,0,.72);opacity:0;transition:opacity .12s}
.intro-window-controls:hover .intro-window-close::after,.intro-window-close:focus-visible::after{opacity:1}
.intro-window-title{justify-self:start}
.intro-window-right{justify-self:end}
@media (max-width:600px){.intro-cinema-barre{grid-template-columns:auto minmax(0,1fr)}
.intro-window-title{justify-self:end;text-align:right}}
/* 4. Avatar pixel plus lisible et interactif */
.avatar-wrap{--look-x:0px;--look-y:0px;--avatar-x:0px;--avatar-y:0px;--avatar-tilt:0deg;position:relative;min-height:142px;display:grid;place-items:center;isolation:isolate}
.avatar-wrap::after{display:none}
.avatar-wrap .pixel-avatar{width:136px;height:136px;overflow:visible;image-rendering:pixelated;filter:drop-shadow(0 0 10px rgba(139,255,168,.26));animation:none}
.pixel-avatar-body{transform-box:fill-box;transform-origin:50% 100%;transform:translate(var(--avatar-x),var(--avatar-y)) rotate(var(--avatar-tilt));transition:transform .14s steps(2,end);animation:pixelBodyIdle 2.4s steps(2,end) infinite}
.pixel-pupil{transform-box:fill-box;transform-origin:center;transform:translate(var(--look-x),var(--look-y));transition:transform .08s steps(2,end)}
.pixel-wave-arm{transform-box:fill-box;transform-origin:15% 10%;animation:pixelHello 5.2s steps(1,end) infinite}
.pixel-wave-lines{opacity:0;animation:pixelHelloLines 5.2s steps(1,end) infinite}
.pixel-leg-left{transform-box:fill-box;animation:pixelFootLeft 2.4s steps(2,end) infinite}
.pixel-leg-right{transform-box:fill-box;animation:pixelFootRight 2.4s steps(2,end) infinite}
.avatar-wrap.avatar-engaged .pixel-wave-arm{animation:pixelHelloFast 1.25s steps(1,end) 1}
.avatar-wrap.avatar-engaged .pixel-wave-lines{animation:pixelHelloLinesFast 1.25s steps(1,end) 1}
.avatar-wrap.avatar-scrolling .pixel-avatar-body{animation:pixelScrollBounce .5s steps(2,end) 1}
@keyframes pixelBodyIdle{0%,100%{transform:translate(var(--avatar-x),var(--avatar-y)) rotate(var(--avatar-tilt))}50%{transform:translate(var(--avatar-x),calc(var(--avatar-y) - 2px)) rotate(var(--avatar-tilt))}}
@keyframes pixelHello{0%,58%,100%{transform:rotate(0deg)}64%{transform:rotate(-72deg) translate(-1px,-1px)}70%{transform:rotate(-55deg) translate(-1px,-1px)}76%{transform:rotate(-78deg) translate(-1px,-1px)}82%{transform:rotate(-58deg) translate(-1px,-1px)}88%{transform:rotate(-72deg) translate(-1px,-1px)}94%{transform:rotate(0deg)}}
@keyframes pixelHelloLines{0%,62%,95%,100%{opacity:0}66%,90%{opacity:1}}
@keyframes pixelHelloFast{0%,100%{transform:rotate(0deg)}15%{transform:rotate(-74deg) translate(-1px,-1px)}35%{transform:rotate(-54deg) translate(-1px,-1px)}55%{transform:rotate(-78deg) translate(-1px,-1px)}75%{transform:rotate(-56deg) translate(-1px,-1px)}90%{transform:rotate(-70deg) translate(-1px,-1px)}}
@keyframes pixelHelloLinesFast{0%,10%,95%,100%{opacity:0}20%,85%{opacity:1}}
@keyframes pixelFootLeft{0%,100%{transform:translateX(0)}50%{transform:translateX(-1px)}}
@keyframes pixelFootRight{0%,100%{transform:translateX(0)}50%{transform:translateX(1px)}}
@keyframes pixelScrollBounce{0%,100%{transform:translate(var(--avatar-x),var(--avatar-y)) rotate(var(--avatar-tilt))}50%{transform:translate(var(--avatar-x),calc(var(--avatar-y) - 4px)) rotate(var(--avatar-tilt))}}
html.animations-off .pixel-avatar-body,html.animations-off .pixel-wave-arm,html.animations-off .pixel-wave-lines,html.animations-off .pixel-leg-left,html.animations-off .pixel-leg-right{animation:none;transition:none}

@media (max-width:430px){.avatar-wrap{min-height:126px}
.avatar-wrap .pixel-avatar{width:122px;height:122px}}
/* ===== Source consolidée : v2.13-polish.css ===== */
/* ==============================================================
   V2.13 — Finition intro, avatar réactif, ajustements mobile
   ============================================================== */
/* 1. Commandes de fenêtre à droite, plus proches des usages modernes */
.intro-cinema-barre{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:14px;
}
.intro-window-title{order:1;justify-self:start;min-width:0}
.intro-window-right{order:2;justify-self:end}
.intro-window-controls{order:3;justify-self:end}
@media (max-width:600px){.intro-cinema-barre{grid-template-columns:minmax(0,1fr) auto}
.intro-window-right{display:none}
.intro-window-controls{order:2}
.intro-window-title{justify-self:start;text-align:left}}
/* 2. Boutons de la fiche mobile : harmonisés et plus robustes */
@media (max-width:760px){.fiche-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    align-items:stretch;
  }
.fiche-actions .fiche-lien,
  .fiche-actions .fiche-cv{
    min-height:64px;
    height:100%;
    width:100%;
    margin:0;
    padding:10px 10px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    line-height:1.2;
    box-sizing:border-box;
    overflow:hidden;
  }}
@media (max-width:430px){.fiche-actions{grid-template-columns:1fr}
.fiche-actions .fiche-lien,
  .fiche-actions .fiche-cv{min-height:56px}}
/* 3. Blason CND : en regard du titre sans chevauchement */
@media (max-width:760px){.niveau-tete-composee{
    display:grid;
    grid-template-columns:minmax(0,1fr) 88px;
    grid-template-areas:
      "kicker kicker"
      "titre blason"
      "description description";
    align-items:start;
    gap:8px 10px;
  }
.niveau-tete-texte{display:contents}
.niveau-tete-texte>.cartouche{grid-area:kicker;margin:0}
.niveau-tete-texte>h2{
    grid-area:titre;
    margin:0!important;
    padding:0;
    max-width:none;
    min-width:0;
    font-size:clamp(16px,5vw,22px);
    line-height:1.18;
  }
.niveau-tete-texte>p:last-child{grid-area:description;margin-top:2px;max-width:none}
.niveau-blason{
    grid-area:blason;
    width:82px;
    height:82px;
    margin:0;
    justify-self:end;
    align-self:start;
    padding:4px;
  }}
@media (max-width:430px){.niveau-tete-composee{grid-template-columns:minmax(0,1fr) 72px;gap:7px 8px}
.niveau-blason{width:68px;height:68px}
.niveau-tete-texte>h2{font-size:clamp(15px,4.8vw,18px)!important;line-height:1.14!important}}
/* 4. Avatar plus présent visuellement et plus réactif */
.avatar-wrap{--look-x:0px;--look-y:0px;--avatar-x:0px;--avatar-y:0px;--avatar-tilt:0deg;min-height:156px}
.avatar-wrap .pixel-avatar{width:152px;height:152px;filter:drop-shadow(0 0 12px rgba(139,255,168,.28))}
.pixel-avatar-body{
  transform-box:fill-box;
  transform-origin:50% 100%;
  transform:translate(var(--avatar-x),var(--avatar-y)) rotate(var(--avatar-tilt));
  transition:transform .03s linear;
  animation:pixelBodyIdleFast 1.9s steps(2,end) infinite;
}
.pixel-pupil{
  transform-box:fill-box;
  transform-origin:center;
  transform:translate(var(--look-x),var(--look-y));
  transition:transform .02s linear;
}
.pixel-wave-arm{transform-box:fill-box;transform-origin:15% 60%;animation:pixelWaveHi 4.2s steps(1,end) infinite}
.pixel-wave-lines{opacity:0;animation:pixelWaveGlow 4.2s steps(1,end) infinite}
.pixel-leg-left{animation:pixelFootLeftFast 1.9s steps(2,end) infinite}
.pixel-leg-right{animation:pixelFootRightFast 1.9s steps(2,end) infinite}
.avatar-wrap.avatar-engaged .pixel-wave-arm{animation:pixelWaveBurst .88s steps(1,end) 1}
.avatar-wrap.avatar-engaged .pixel-wave-lines{animation:pixelWaveGlowBurst .88s steps(1,end) 1}
@keyframes pixelBodyIdleFast{0%,100%{transform:translate(var(--avatar-x),var(--avatar-y)) rotate(var(--avatar-tilt))}50%{transform:translate(var(--avatar-x),calc(var(--avatar-y) - 1.6px)) rotate(var(--avatar-tilt))}}
@keyframes pixelWaveHi{0%,48%,100%{transform:rotate(0deg)}54%{transform:rotate(-82deg) translate(-1px,-1px)}61%{transform:rotate(-60deg) translate(-1px,-1px)}68%{transform:rotate(-86deg) translate(-1px,-1px)}75%{transform:rotate(-58deg) translate(-1px,-1px)}82%{transform:rotate(-82deg) translate(-1px,-1px)}90%{transform:rotate(0deg)}}
@keyframes pixelWaveGlow{0%,52%,96%,100%{opacity:0}58%,88%{opacity:1}}
@keyframes pixelWaveBurst{0%,100%{transform:rotate(0deg)}12%{transform:rotate(-88deg) translate(-1px,-1px)}25%{transform:rotate(-62deg) translate(-1px,-1px)}38%{transform:rotate(-92deg) translate(-1px,-1px)}52%{transform:rotate(-56deg) translate(-1px,-1px)}67%{transform:rotate(-88deg) translate(-1px,-1px)}82%{transform:rotate(-60deg) translate(-1px,-1px)}}
@keyframes pixelWaveGlowBurst{0%,8%,100%{opacity:0}18%,84%{opacity:1}}
@keyframes pixelFootLeftFast{0%,100%{transform:translateX(0)}50%{transform:translateX(-1.2px)}}
@keyframes pixelFootRightFast{0%,100%{transform:translateX(0)}50%{transform:translateX(1.2px)}}
@media (max-width:430px){.avatar-wrap{min-height:140px}
.avatar-wrap .pixel-avatar{width:136px;height:136px}}
html.animations-off .pixel-avatar-body,
html.animations-off .pixel-pupil,
html.animations-off .pixel-wave-arm,
html.animations-off .pixel-wave-lines,
html.animations-off .pixel-leg-left,
html.animations-off .pixel-leg-right{animation:none;transition:none}

/* ===== Source consolidée : v2.14-avatar.css ===== */
/* ==============================================================
   V2.14 — Intégration du nouveau personnage pixel art
   ============================================================== */
.avatar-sprite-wrap{
  --sprite-x: 0px;
  --sprite-y: 0px;
  --sprite-tilt: 0deg;
  --sprite-scale: 1;
  position: relative;
  min-height: 172px;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.pixel-sprite-stage{
  width: 172px;
  height: 172px;
  display:grid;
  place-items:center;
  transform: translate(var(--sprite-x), var(--sprite-y)) rotate(var(--sprite-tilt)) scale(var(--sprite-scale));
  transition: transform .035s linear;
  will-change: transform;
}
.pixel-sprite-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: drop-shadow(0 0 14px rgba(139,255,168,.22));
  user-select:none;
  pointer-events:none;
}
.avatar-sprite-wrap.avatar-wave .pixel-sprite-stage{
  filter: drop-shadow(0 0 16px rgba(255,200,92,.16));
}
@media (max-width: 760px){.avatar-sprite-wrap{min-height:156px}
.pixel-sprite-stage{width:154px;height:154px}}
@media (max-width: 430px){.avatar-sprite-wrap{min-height:146px}
.pixel-sprite-stage{width:138px;height:138px}}
/* ===== Source consolidée : v2.16-avatar.css ===== */
/* ==============================================================
   V2.16 — Avatar raster nettoyé et animation plus fluide
   ============================================================== */
.avatar-sprite-wrap{
  --sprite-x: 0px;
  --sprite-y: 0px;
  --sprite-tilt: 0deg;
  --sprite-scale: 1;
  min-height: 178px;
  isolation: isolate;
}
.avatar-sprite-wrap::after{display:none}
.pixel-sprite-stage{
  width: 174px;
  height: 174px;
  display:grid;
  place-items:center;
  transform: translate(var(--sprite-x), var(--sprite-y)) rotate(var(--sprite-tilt)) scale(var(--sprite-scale));
  transition: transform .024s linear;
  will-change: transform;
}
.pixel-sprite-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: drop-shadow(0 0 12px rgba(139,255,168,.24));
  background: transparent;
}
@media (max-width:760px){.avatar-sprite-wrap{min-height:160px}
.pixel-sprite-stage{width:156px;height:156px}}
@media (max-width:430px){.avatar-sprite-wrap{min-height:148px}
.pixel-sprite-stage{width:142px;height:142px}}
html.animations-off .pixel-sprite-stage{transition:none; transform:none}

/* ==========================================================================
   V3.1 — ACCESSIBILITÉ, COMMANDES ET PARCOURS
   ========================================================================== */
/* Contraste renforcé pour les petits textes et informations secondaires. */


/* Barre de commandes : léger relief permanent et signal discret au chargement. */
.barre-xp{
  box-shadow:
    0 -1px 0 rgba(139,255,168,.16),
    0 -8px 24px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(198,255,213,.06);
}
.barre-xp::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(100deg,transparent 0 38%,rgba(139,255,168,.055) 48%,transparent 58%);
  transform:translateX(-120%);
}
.barre-xp.ui-attention::before{
  animation:uiCommandSweep 1.15s ease-out 1 .15s;
}
.barre-xp.ui-attention .switch-animations{
  animation:uiCommandPulse .72s ease-in-out 3 .25s;
}
.barre-xp.ui-attention .switch-animations .switch-piste{
  animation:uiSwitchBlink .72s steps(2,end) 3 .25s;
}
@keyframes uiCommandSweep{
  from{transform:translateX(-120%)}
  to{transform:translateX(120%)}
}
@keyframes uiCommandPulse{
  0%,100%{border-color:rgba(139,255,168,.28);box-shadow:none;transform:none}
  50%{border-color:var(--amber);box-shadow:0 0 12px rgba(255,200,92,.22);transform:translateY(-1px)}
}
@keyframes uiSwitchBlink{
  0%,100%{filter:none}
  50%{filter:brightness(1.45) drop-shadow(0 0 4px rgba(139,255,168,.55))}
}
html.animations-off .barre-xp.ui-attention::before,
html.animations-off .barre-xp.ui-attention .switch-animations,
html.animations-off .barre-xp.ui-attention .switch-animations .switch-piste{
  animation:none;
}
/* Ouverture progressive des fiches d’expérience. */
.details-exp{
  display:block;
  height:0;
  padding:0 20px;
  overflow:hidden;
  opacity:0;
  transform:translateY(-7px);
  transition:
    height .46s cubic-bezier(.22,.75,.18,1),
    opacity .28s ease,
    transform .42s cubic-bezier(.22,.75,.18,1),
    padding .42s cubic-bezier(.22,.75,.18,1);
  will-change:height,opacity,transform;
}
.details-exp[hidden]{display:none}
.details-exp.is-open{
  opacity:1;
  transform:none;
  padding:0 20px 20px;
}
html.animations-off .details-exp{transition:none;transform:none}

/* Commande globale pour une lecture continue du parcours. */
.parcours-commandes{
  margin-top:16px;
  padding-top:14px;
  border-top:1px dashed rgba(139,255,168,.2);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}
.tout-deployer{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:8px 15px;
  border:1px solid var(--amber);
  color:var(--amber);
  background:rgba(255,200,92,.045);
  font-family:var(--font-display);
  font-size:17px;
  letter-spacing:1px;
  box-shadow:3px 3px 0 rgba(255,200,92,.13);
  transition:background .15s ease,color .15s ease,transform .15s ease,box-shadow .15s ease;
}
.tout-deployer:hover,.tout-deployer:focus-visible{
  background:var(--amber);
  color:#050a08;
  transform:translateY(-1px);
  box-shadow:3px 4px 0 rgba(255,200,92,.22);
}
.tout-deployer[aria-expanded="true"] span{transform:rotate(180deg)}
.tout-deployer span{transition:transform .22s ease}
.parcours-commandes p{
  color:var(--phosphor-dim);
  font-size:10px;
  line-height:1.45;
  max-width:46ch;
}
html[data-theme="light"] .tout-deployer{
  border-color:#c85422;
  color:#a64218;
  background:#fff7ed;
  box-shadow:3px 3px 0 rgba(230,107,53,.12);
}
html[data-theme="light"] .tout-deployer:hover,
html[data-theme="light"] .tout-deployer:focus-visible{
  color:#fff;
  background:#c85422;
}
/* Les raccourcis n’ont de sens que sur un appareil avec pointeur précis. */
@media (hover:none), (pointer:coarse){.menu-options .touche{display:none}}
/* Adresse électronique révélée uniquement après une action volontaire. */
.contact-email-action{
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.contact-email-action button{
  padding:5px 8px;
  border:1px solid rgba(125,255,240,.5);
  color:var(--cyan);
  background:rgba(125,255,240,.035);
  font-size:9px;
  line-height:1.35;
  text-align:left;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.contact-email-action button:hover,
.contact-email-action button:focus-visible{
  color:#050a08;
  background:var(--cyan);
  border-color:var(--cyan);
}
.contact-email-action a{
  color:var(--phosphor-2);
  font-size:10px;
  font-weight:600;
  overflow-wrap:anywhere;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
html[data-theme="light"] .contact-email-action button{
  color:#126f96;
  border-color:#6bb4d2;
  background:#edf8fb;
}
html[data-theme="light"] .contact-email-action button:hover,
html[data-theme="light"] .contact-email-action button:focus-visible{
  color:#fff;
  background:#126f96;
}
html[data-theme="light"] .contact-email-action a{color:#153f52}
@media (max-width:760px){.details-exp{padding-inline:14px}
.details-exp.is-open{padding:0 14px 16px}
.parcours-commandes{align-items:stretch;text-align:left}
.tout-deployer{width:100%}
.parcours-commandes p{max-width:none;width:100%}
.contact-email-action{align-items:flex-start;flex-direction:column}}
/* ==========================================================================
   V3.2 — COMMANDES, MODE RECRUTEUR ET CONVERSION
   ========================================================================== */
/* Contrastes secondaires renforcés pour les petits textes. */


/* Les indications clavier sont invisibles par défaut et réservées aux postes
   sans interface tactile, après détection JavaScript. */
.menu-options .touche{display:none}
html.raccourcis-clavier-visibles .menu-options .touche{display:inline-flex}
/* Signal des commandes uniquement après la fermeture de l’introduction. */
.barre-xp.ui-attention .theme-toggle,
.barre-xp.ui-attention .switch-animations{
  animation:uiCommandPulse .72s ease-in-out 3 .25s;
}
.barre-xp.ui-attention .theme-toggle-icon,
.barre-xp.ui-attention .theme-toggle-state,
.barre-xp.ui-attention .switch-animations .switch-piste{
  animation:uiSwitchBlink .72s steps(2,end) 3 .25s;
}
html.animations-off .barre-xp.ui-attention .theme-toggle,
html.animations-off .barre-xp.ui-attention .theme-toggle-icon,
html.animations-off .barre-xp.ui-attention .theme-toggle-state{
  animation:none;
}
/* La phrase d’aide et l’option Tout déployer forment une même ligne. */
.parcours-aide{
  margin-top:15px;
  padding-top:13px;
  border-top:1px dashed rgba(139,255,168,.23);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.parcours-aide .carte-hint{
  margin:0;
  flex:1 1 auto;
  text-align:left;
}
.parcours-aide .parcours-commandes{
  margin:0;
  padding:0;
  border:0;
  flex:0 0 auto;
}
.tout-deployer{
  min-height:36px;
  padding:6px 11px;
  box-shadow:none;
}
.tout-deployer small{
  color:inherit;
  opacity:.72;
  font-family:var(--font-body);
  font-size:7px;
  letter-spacing:1px;
  border-left:1px solid currentColor;
  padding-left:8px;
}
/* Courriel : action de conversion majeure, au même niveau visuel que le PDF. */
.contact-email-principal{
  margin-top:12px;
  padding:12px;
  border:1px solid rgba(125,255,240,.42);
  background:linear-gradient(135deg,rgba(125,255,240,.075),rgba(139,255,168,.025));
  box-shadow:4px 4px 0 rgba(125,255,240,.08);
  position:relative;
  overflow:hidden;
}
.contact-email-principal::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:var(--cyan);
}
.contact-email-kicker{
  margin:0 0 7px;
  color:var(--cyan);
  font-family:var(--font-body);
  font-size:8px;
  letter-spacing:2px;
}
.cta-email-principal{
  width:100%;
  min-height:64px;
  display:grid;
  grid-template-columns:44px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:11px 13px;
  border:1px solid var(--cyan);
  background:rgba(5,10,8,.48);
  color:var(--phosphor-2);
  text-decoration:none;
  text-align:left;
  transition:transform .16s ease,background .16s ease,box-shadow .16s ease,color .16s ease;
}
.cta-email-principal:hover,
.cta-email-principal:focus-visible{
  transform:translateY(-2px);
  background:rgba(125,255,240,.12);
  box-shadow:0 0 18px rgba(125,255,240,.13);
}
.cta-email-principal .cta-picto{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border:1px solid currentColor;
  color:var(--cyan);
  font-family:var(--font-display);
  font-size:24px;
}
.cta-email-principal .cta-texte{display:grid;gap:2px;min-width:0}
.cta-email-principal .cta-texte strong{
  color:var(--phosphor-2);
  font-family:var(--font-display);
  font-size:21px;
  letter-spacing:.6px;
  overflow-wrap:anywhere;
}
.cta-email-principal .cta-texte small{
  color:var(--phosphor-dim);
  font-size:9px;
  line-height:1.4;
}
.cta-email-principal .cta-fleche{color:var(--cyan);font-size:22px}
.contact-email-output:empty{display:none}
.contact-email-output:not(:empty){margin-top:8px}
html[data-theme="light"] .contact-email-principal{
  border-color:#73b7ce;
  background:linear-gradient(135deg,#eef9fc,#fff);
  box-shadow:4px 4px 0 rgba(18,111,150,.09);
}
html[data-theme="light"] .cta-email-principal{
  color:#153f52;
  border-color:#1976a3;
  background:#fff;
}
html[data-theme="light"] .cta-email-principal:hover,
html[data-theme="light"] .cta-email-principal:focus-visible{background:#e9f6fb}
html[data-theme="light"] .cta-email-principal .cta-texte strong{color:#102f40}
html[data-theme="light"] .cta-email-principal .cta-texte small{color:#466674}
html[data-theme="light"] .cta-email-principal .cta-picto,
html[data-theme="light"] .cta-email-principal .cta-fleche{color:#126f96}
/* PDF et mode recruteur toujours accessibles dans la barre fixe. */
.recruiter-toggle{
  height:30px;
  min-height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:4px 8px;
  border:1px solid rgba(255,200,92,.62);
  background:rgba(255,200,92,.06);
  color:var(--amber);
  text-decoration:none;
  font-family:var(--font-body);
  font-size:8px;
  letter-spacing:.7px;
  white-space:nowrap;
}
.recruiter-toggle{
  border-color:rgba(125,255,240,.5);
  color:var(--cyan);
  background:rgba(125,255,240,.045);
}
.recruiter-toggle:hover,.recruiter-toggle:focus-visible,
.recruiter-toggle[aria-pressed="true"]{
  color:#050a08;
  background:var(--cyan);
  border-color:var(--cyan);
}
.recruiter-toggle-state{font-weight:700}
.recruiter-toggle-icon{font-size:13px;line-height:1}
html[data-theme="light"] .recruiter-toggle{color:#126f96;border-color:#74b6cf;background:#eef8fb}
html[data-theme="light"] .recruiter-toggle[aria-pressed="true"]{color:#fff;background:#126f96}
/* Répartition homogène de la barre sur une seule ligne. */
.barre-xp{
  grid-template-columns:auto minmax(80px,1.25fr) minmax(100px,.9fr) auto auto auto auto auto;
  gap:7px;
}
.barre-xp .gauge{max-width:none}
/* Photo sobre, utilisée uniquement par la vue recruteur. */
.recruiter-photo{display:none}
/* --------------------------------------------------------------------------
   MODE RECRUTEUR — vue condensée, sobre et rapide à parcourir
   -------------------------------------------------------------------------- */
html.mode-recruteur{
  color-scheme:light;
  --container:1080px;
}
html.mode-recruteur body{
  padding-bottom:46px;
  background:#f3f6f8;
  color:#203540;
  font-family:Inter,Segoe UI,Arial,sans-serif;
  font-size:12px;
  line-height:1.45;
}
html.mode-recruteur body::before,
html.mode-recruteur body::after{display:none}
html.mode-recruteur .intro-ecran{display:none}
html.mode-recruteur .hud-top,
html.mode-recruteur .barre-xp{
  background:rgba(255,255,255,.97);
  border-color:#9cb7c2;
  box-shadow:0 2px 14px rgba(26,57,70,.09);
}
html.mode-recruteur .hud-menu a[href="#savoir-faire"],
html.mode-recruteur .hud-menu a[href="#missions"]{display:none}
html.mode-recruteur .rejouer-intro,
html.mode-recruteur .theme-toggle,
html.mode-recruteur .switch-animations{display:none}
html.mode-recruteur .barre-xp{
  grid-template-columns:auto minmax(80px,1fr) minmax(100px,.8fr) auto auto;
}
html.mode-recruteur .section{padding:28px 0}
html.mode-recruteur .accueil{padding:42px 0 18px}
html.mode-recruteur .cartouche,
html.mode-recruteur .section-tete .cartouche,
html.mode-recruteur .curseur-titre,
html.mode-recruteur .reperes-hud,
html.mode-recruteur #savoir-faire,
html.mode-recruteur #missions,
html.mode-recruteur .carte-parcours,
html.mode-recruteur .contact-form-final,
html.mode-recruteur .contact-cloture,
html.mode-recruteur .contact-fin-jeu{display:none}
html.mode-recruteur .grille-accueil{
  grid-template-columns:minmax(0,1.5fr) minmax(300px,.7fr);
  gap:24px;
  align-items:start;
}
html.mode-recruteur .titre-principal{
  margin:0 0 12px;
  color:#173946;
  text-shadow:none;
  font-family:Inter,Segoe UI,Arial,sans-serif;
  font-size:clamp(28px,4vw,46px);
  line-height:1.06;
  font-weight:800;
  letter-spacing:-1px;
}
html.mode-recruteur .titre-principal em{color:#c65b2b;text-shadow:none}
html.mode-recruteur .baseline{
  max-width:64ch;
  margin-bottom:12px;
  color:#456370;
  font-family:Inter,Segoe UI,Arial,sans-serif;
  font-size:15px;
}
html.mode-recruteur .baseline::before{display:none}
html.mode-recruteur .menu-options{display:none}
html.mode-recruteur .fiche-perso{
  padding:18px;
  border:1px solid #b7cad2;
  background:#fff;
  box-shadow:0 5px 18px rgba(29,66,80,.08);
}
html.mode-recruteur .avatar-sprite-wrap{display:none}
html.mode-recruteur .recruiter-photo{
  display:block;
  width:92px;
  height:92px;
  margin:0 auto 10px;
  overflow:hidden;
  border-radius:50%;
  border:3px solid #fff;
  box-shadow:0 0 0 1px #9ebbc7,0 4px 12px rgba(24,60,74,.12);
}
html.mode-recruteur .recruiter-photo img{width:100%;height:100%;object-fit:cover}
html.mode-recruteur .fiche-titre{display:none}
html.mode-recruteur .fiche-nom,
html.mode-recruteur .fiche-classe,
html.mode-recruteur .fiche-donnees{font-family:Inter,Segoe UI,Arial,sans-serif}
html.mode-recruteur .fiche-actions{grid-template-columns:1fr}
html.mode-recruteur .fiche-lien{display:none}
html.mode-recruteur .fiche-cv{
  min-height:42px;
  border:0;
  background:#c65b2b;
  color:#fff;
  font-family:Inter,Segoe UI,Arial,sans-serif;
  font-weight:700;
}
html.mode-recruteur .section-tete{margin-bottom:15px}
html.mode-recruteur .section-tete h2{
  margin-bottom:7px;
  color:#173946;
  text-shadow:none;
  font-family:Inter,Segoe UI,Arial,sans-serif;
  font-size:24px;
  line-height:1.15;
  font-weight:800;
}
html.mode-recruteur .section-tete h2 em{color:#c65b2b;text-shadow:none}
html.mode-recruteur .section-tete>p:last-child{
  color:#4b6875;
  font-family:Inter,Segoe UI,Arial,sans-serif;
  font-size:13px;
}
html.mode-recruteur .experiences{display:grid;gap:10px}
html.mode-recruteur .experience{
  border:1px solid #bfd0d7;
  background:#fff;
  box-shadow:none;
}
html.mode-recruteur .resume-experience{
  cursor:default;
  pointer-events:none;
  padding:14px;
  font-family:Inter,Segoe UI,Arial,sans-serif;
}
html.mode-recruteur .commande-exp,
html.mode-recruteur .details-exp{display:none}
html.mode-recruteur .titre-exp h3{font-family:Inter,Segoe UI,Arial,sans-serif;font-weight:750;color:#173946}
html.mode-recruteur .titre-exp>p:first-child,
html.mode-recruteur .date-exp,
html.mode-recruteur .accroche{font-family:Inter,Segoe UI,Arial,sans-serif}
html.mode-recruteur .tags-majeurs{gap:5px}
html.mode-recruteur .tags-majeurs li{border-color:#c4d5db;background:#eef4f6;color:#244b5a}
html.mode-recruteur #competences,
html.mode-recruteur #trophees{padding-top:24px}
html.mode-recruteur .bloc-comp,
html.mode-recruteur .formation-carte,
html.mode-recruteur .formation-groupe{
  box-shadow:none;
  background:#fff;
  border-color:#bed0d8;
}
html.mode-recruteur .contact-final{padding-bottom:25px}
html.mode-recruteur .contact-final-grid{grid-template-columns:1fr}
html.mode-recruteur .contact-conversion{
  max-width:760px;
  width:100%;
  margin:auto;
  background:#fff;
  border-color:#b8cdd5;
  box-shadow:0 5px 18px rgba(29,66,80,.07);
}
html.mode-recruteur .contact-status,
html.mode-recruteur .contact-overline{display:none}
html.mode-recruteur .cta-cv-principal{background:#c65b2b;border-color:#c65b2b;color:#fff}
html.mode-recruteur .contact-email-principal{background:#eef8fb}
html.mode-recruteur .apparition{opacity:1;transform:none;transition:none}
@media (max-width:900px){.parcours-aide{align-items:stretch;flex-direction:column}
.parcours-aide .parcours-commandes{width:100%}
.parcours-aide .tout-deployer{width:100%}
html.mode-recruteur .grille-accueil{grid-template-columns:1fr}
html.mode-recruteur .fiche-perso{max-width:none}}
@media (max-width:760px){.contact-email-principal{padding:9px}
.cta-email-principal{grid-template-columns:36px minmax(0,1fr) auto;min-height:58px;padding:9px;gap:9px}
.cta-email-principal .cta-picto{width:34px;height:34px;font-size:20px}
.cta-email-principal .cta-texte strong{font-size:18px}}
@media (max-width:430px){.tout-deployer small{display:none}}
/* ==========================================================================
   V3.3 — COMMANDES MOBILES ET MINI-TUTORIEL
   ========================================================================== */
/* Le PDF reste volontairement dans le menu supérieur et les CTA du contenu. */
.barre-xp{
  grid-template-columns:auto minmax(80px,1.25fr) minmax(100px,.9fr) auto auto auto auto;
}
.control-button{
  position:relative;
  border-radius:3px;
}
.control-icon{font-size:14px;line-height:1}
.animation-label-short{display:none}
.theme-toggle-label,.animation-label,.control-label{
  font-weight:700;
  letter-spacing:.65px;
}
/* Bouton « Pressé ? » avec une petite horloge animée. */
.recruiter-toggle{
  gap:7px;
  min-width:126px;
  text-align:left;
}
.recruiter-toggle-copy{display:grid;gap:1px;line-height:1.05}
.recruiter-toggle-label{font-size:8px;color:inherit;font-weight:800}
.recruiter-toggle-state{font-size:7px;opacity:.78;font-weight:600}
.recruiter-toggle-icon{
  position:relative;
  width:17px;
  height:17px;
  flex:0 0 17px;
  border:1px solid currentColor;
  border-radius:50%;
}
.recruiter-toggle-icon::before{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:1px;height:5px;
  background:currentColor;
  transform:translate(-50%,-100%);
  transform-origin:50% 100%;
}
.recruiter-toggle-icon i{
  position:absolute;
  left:50%;top:50%;
  width:5px;height:1px;
  background:currentColor;
  transform-origin:0 50%;
}
.recruiter-toggle:hover .recruiter-toggle-icon::before,
.recruiter-toggle:focus-visible .recruiter-toggle-icon::before,
.barre-xp.ui-attention .recruiter-toggle-icon::before{
  animation:recruiterClockHand 1.15s linear 2;
}
@keyframes recruiterClockHand{
  to{transform:translate(-50%,-100%) rotate(360deg)}
}
/* Aide contextuelle qui remonte après la fermeture de l'introduction. */
.controls-coachmark{
  position:fixed;
  z-index:75;
  right:18px;
  bottom:54px;
  width:min(430px,calc(100vw - 36px));
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:12px 13px;
  border:1px solid var(--amber);
  background:rgba(5,10,8,.975);
  color:var(--phosphor);
  box-shadow:0 9px 28px rgba(0,0,0,.48),0 0 18px rgba(255,200,92,.1);
  font-family:var(--font-body);
  opacity:0;
  transform:translateY(14px);
  transition:opacity .24s ease,transform .3s cubic-bezier(.2,.75,.2,1);
}
.controls-coachmark[hidden]{display:none}
.controls-coachmark.is-visible{opacity:1;transform:translateY(0)}
.controls-coachmark-arrow{
  position:absolute;
  right:126px;
  bottom:-13px;
  color:var(--amber);
  font-size:18px;
  filter:drop-shadow(0 2px 0 #050a08);
}
.controls-coachmark-copy{display:grid;gap:3px;min-width:0}
.controls-coachmark-copy strong{color:var(--amber);font-family:var(--font-title);font-size:9px;letter-spacing:1px}
.controls-coachmark-copy span{color:var(--phosphor);font-size:10px;line-height:1.35}
.controls-coachmark-close{
  min-height:30px;
  padding:5px 8px;
  border:1px solid rgba(139,255,168,.45);
  background:rgba(139,255,168,.06);
  color:var(--phosphor);
  font-family:var(--font-title);
  font-size:7px;
  cursor:pointer;
}
.controls-coachmark-close:hover,.controls-coachmark-close:focus-visible{border-color:var(--amber);color:var(--amber)}
html[data-theme="light"] .controls-coachmark{
  background:rgba(248,252,253,.985);
  color:#244b59;
  border-color:#c9782e;
  box-shadow:0 9px 28px rgba(34,65,77,.18);
}
html[data-theme="light"] .controls-coachmark-copy strong,
html[data-theme="light"] .controls-coachmark-arrow{color:#a64d20}
html[data-theme="light"] .controls-coachmark-copy span{color:#365b69}
html.animations-off .controls-coachmark{transition:none}
html.animations-off .recruiter-toggle-icon::before{animation:none}

/* Le tutoriel ne possède plus de bouton : toute la largeur sert au message. */
.controls-coachmark{
  grid-template-columns:minmax(0,1fr);
  padding-right:15px;
}
.controls-coachmark-close{display:none}
/* Ces conteneurs sont transparents sur ordinateur : la disposition existante
   reste inchangée. Ils deviennent de vrais groupes uniquement sur mobile. */
.xp-status,
.theme-toggle-copy,
.animation-toggle-copy{display:contents}
/* ==========================================================================
   V3.9 — BARRE HUD MOBILE : RÉPLIQUE FIDÈLE DE LA VERSION ORDINATEUR
   --------------------------------------------------------------------------
   Bloc final et unique pour la barre en mobile (les patchs V2.x/V3.x ont été
   retirés). Une seule rangée : progression (NIV + jauge + XP %) puis les
   quatre commandes, avec la même construction interne que sur grand écran.
   ========================================================================== */
/* Sécurité : plus aucun texte parasite injecté sur l'icône animations. */
html body .switch-animations > span:first-child::after{content:none}
@media (max-width:760px){html body{padding-bottom:calc(50px + env(safe-area-inset-bottom))!important}
/* --- La barre : une seule rangée flexible, comme sur ordinateur --- */
html body footer.barre-xp{
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    gap:5px;
    height:calc(46px + env(safe-area-inset-bottom));
    min-height:calc(46px + env(safe-area-inset-bottom));
    padding:5px max(6px,env(safe-area-inset-right))
            calc(5px + env(safe-area-inset-bottom))
            max(6px,env(safe-area-inset-left));
    overflow:hidden;
    white-space:nowrap;
  }
/* --- Progression : NIV + jauge, puis XP · % en dessous --- */
html body footer.barre-xp .xp-status{
    display:grid;
    flex:1 1 auto;
    grid-template-columns:auto minmax(24px,1fr);
    grid-template-rows:auto auto;
    align-content:center;
    align-items:center;
    column-gap:6px;
    row-gap:3px;
    min-width:0;
    height:34px;
    padding:0;
  }
html body footer.barre-xp .niveau{
    display:block;
    grid-column:1;grid-row:1;
    font-size:8px;
    line-height:1;
    letter-spacing:.4px;
    white-space:nowrap;
    padding:0;margin:0;
  }
html body footer.barre-xp .gauge{
    display:block;
    grid-column:2;grid-row:1;
    min-width:24px;
    max-width:none;
    width:100%;
    height:8px;
    margin:0;
  }
html body footer.barre-xp .xp-txt{
    display:block;
    grid-column:1 / 3;grid-row:2;
    min-width:0;max-width:none;
    margin:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:6.5px;
    line-height:1;
    letter-spacing:.3px;
    opacity:.92;
    text-align:left;
  }
html body footer.barre-xp .pied-mentions{display:none}
/* --- Base commune des quatre commandes : proportions ordinateur --- */
html body footer.barre-xp .rejouer-intro,
  html body footer.barre-xp .recruiter-toggle,
  html body footer.barre-xp .theme-toggle,
  html body footer.barre-xp .switch-animations{
    display:inline-flex;
    flex:0 0 auto;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    width:auto;
    min-width:0;
    height:34px;
    min-height:34px;
    margin:0;
    padding:3px 7px;
    gap:5px;
    line-height:1;
    text-align:left;
    white-space:nowrap;
    border-radius:3px;
  }
/* INTRO : icône + libellé côte à côte, tous deux centrés verticalement. */
html body footer.barre-xp .rejouer-intro .control-icon{
    display:block;
    align-self:center;
    font-size:15px;line-height:1;flex:0 0 auto;
  }
html body footer.barre-xp .rejouer-intro .control-label{
    display:inline-block;
    align-self:center;
    font-size:7px;line-height:1;
    letter-spacing:.5px;font-weight:700;
  }
/* PRESSÉ ? : horloge + deux lignes empilées, structure ordinateur. */
html body footer.barre-xp .recruiter-toggle-icon{
    display:block;width:15px;height:15px;flex:0 0 15px;
  }
html body footer.barre-xp .recruiter-toggle-copy{
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
    justify-items:start;
    align-content:center;
    gap:1px;
    min-width:0;
    text-align:left;
  }
html body footer.barre-xp .recruiter-toggle-label{
    display:block;align-self:center;
    font-size:7px;line-height:1;font-weight:800;
  }
html body footer.barre-xp .recruiter-toggle-state{
    display:block;align-self:center;
    font-size:6px;line-height:1;opacity:.82;font-weight:600;
  }
/* THÈME : soleil + THÈME/CRT empilés, structure ordinateur. */
html body footer.barre-xp .theme-toggle-icon{
    display:block;align-self:center;
    font-size:15px;line-height:1;flex:0 0 auto;
  }
html body footer.barre-xp .theme-toggle-copy{
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
    justify-items:start;
    align-content:center;
    gap:1px;
    min-width:0;
    text-align:left;
  }
html body footer.barre-xp .theme-toggle-label{
    display:block;align-self:center;
    font-size:7px;line-height:1;letter-spacing:.4px;font-weight:800;
  }
html body footer.barre-xp .theme-toggle-state{
    display:block;align-self:center;
    font-size:6.5px;line-height:1;font-weight:800;opacity:.95;
  }
/* FX : libellé + interrupteur repensé (sans l'icône ◉). */
html body footer.barre-xp .animation-control-icon{display:none}
html body footer.barre-xp .animation-toggle-copy{
    display:inline-flex;
    flex-direction:row;
    align-items:center;
    gap:5px;
    min-width:0;
  }
html body footer.barre-xp .animation-label{
    display:inline-block;align-self:center;
    font-size:7px;line-height:1;
    letter-spacing:.5px;font-weight:800;
  }
html body footer.barre-xp .animation-label-long{display:none}
html body footer.barre-xp .animation-label-short{display:inline}
/* Interrupteur ON/OFF : piste arrondie et pastille coulissante. */
html body footer.barre-xp .switch{
    display:block;
    flex:0 0 auto;
    align-self:center;
    width:37px;
    height:17px;
  }
html body footer.barre-xp .switch-piste{
    display:inline-flex;
    align-items:center;
    justify-content:flex-start;
    box-sizing:border-box;
    width:37px!important;
    height:17px!important;
    padding:2px;
    border:1px solid var(--phosphor);
    border-radius:9px;
    background:rgba(139,255,168,.14);
    box-shadow:inset 0 0 5px rgba(139,255,168,.22);
    transition:background .18s ease,border-color .18s ease,box-shadow .18s ease;
  }
html body footer.barre-xp .switch-etat{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    width:19px;
    height:11px;
    padding:0!important;
    border-radius:6px;
    background:var(--phosphor);
    color:#04140b;
    font-family:var(--font-title);
    font-size:5.5px!important;
    font-weight:800;
    letter-spacing:.4px;
    line-height:1;
    box-shadow:0 0 6px rgba(139,255,168,.55);
    transition:background .18s ease,color .18s ease,box-shadow .18s ease;
  }
html body footer.barre-xp .switch-animations[aria-pressed="true"] .switch-piste{
    justify-content:flex-end;
    border-color:var(--phosphor-dim);
    background:transparent;
    box-shadow:none;
  }
html body footer.barre-xp .switch-animations[aria-pressed="true"] .switch-etat{
    background:transparent;
    border:1px solid var(--phosphor-dim);
    color:var(--phosphor-dim);
    box-shadow:none;
  }
/* Thème clair : pastille foncée, texte blanc. */
html[data-theme="light"] body footer.barre-xp .switch-piste{
    background:rgba(18,111,134,.12);
    box-shadow:inset 0 0 4px rgba(18,111,134,.18);
  }
html[data-theme="light"] body footer.barre-xp .switch-etat{
    color:#fff;
    box-shadow:0 0 5px rgba(18,111,134,.4);
  }
html[data-theme="light"] body footer.barre-xp .switch-animations[aria-pressed="true"] .switch-etat{
    background:transparent;
    color:var(--phosphor-dim);
    box-shadow:none;
  }
html body .controls-coachmark{bottom:58px}}
/* --- Écrans étroits : mêmes éléments, marges légèrement resserrées --- */
@media (max-width:520px){html body footer.barre-xp{gap:4px;padding-inline:4px}
html body footer.barre-xp .rejouer-intro,
  html body footer.barre-xp .recruiter-toggle,
  html body footer.barre-xp .theme-toggle,
  html body footer.barre-xp .switch-animations{padding:3px 5px;gap:4px}
html body footer.barre-xp .gauge{min-width:20px}}
@media (max-width:390px){html body footer.barre-xp{gap:3px;padding-inline:3px}
html body footer.barre-xp .rejouer-intro,
  html body footer.barre-xp .recruiter-toggle,
  html body footer.barre-xp .theme-toggle,
  html body footer.barre-xp .switch-animations{padding:3px 4px;gap:3px}
html body footer.barre-xp .niveau{font-size:7px}
html body footer.barre-xp .xp-txt{font-size:6px}
html body footer.barre-xp .gauge{min-width:14px}
html body footer.barre-xp .switch,
  html body footer.barre-xp .switch-piste{width:33px!important}}
/* Très petits écrans : on préserve la lisibilité en libérant la jauge. */
@media (max-width:340px){html body footer.barre-xp .niveau{display:none}
html body footer.barre-xp .xp-txt{display:none}
html body footer.barre-xp .rejouer-intro .control-label{display:none}
html body footer.barre-xp .rejouer-intro{padding-inline:5px}}
/* ==========================================================================
   V4.0 — CORRECTIFS : VUE RECRUTEUR MOBILE + FICHE PRO EN TABLETTE
   ========================================================================== */
/* 1. Vue recruteur : les commandes INTRO, THÈME et FX disparaissent
      totalement, sur mobile comme sur ordinateur. Seules la progression
      et la commande RETOUR restent visibles. La spécificité renforcée
      l'emporte sur les règles d'affichage du bloc V3.9. */
html.mode-recruteur body footer.barre-xp .rejouer-intro,
html.mode-recruteur body footer.barre-xp .theme-toggle,
html.mode-recruteur body footer.barre-xp .switch-animations{display:none}
/* 2. Tablette (761–900px) : la fiche professionnelle adopte la même
      présentation qu'en mobile — affichée en premier et sur toute la
      largeur, sans espace vide à droite. */
@media (max-width:900px){html body .grille-accueil{
    display:flex;
    flex-direction:column;
    gap:20px!important;
  }
html body .grille-accueil > .fiche-perso{
    order:1;
    margin:0;
    width:100%;
    max-width:none;
    justify-self:auto;
  }
html body .grille-accueil > div:first-child{order:2}}
/* ==========================================================================
   V4.3 — CORRECTIFS : MENU HAUT EN TABLETTE + MANIFESTE PLEINE LARGEUR
   ========================================================================== */
/* 1. Menu du haut (761–1120px) : le menu complet nécessite ~1250px, il ne
      peut donc pas tenir à ces largeurs. MENU et CV.PDF s'affichent côte à
      côte sur une seule ligne, à droite de l'identité. */
@media (min-width:761px) and (max-width:1023.98px){html body .hud-bar{
    flex-wrap:nowrap;
    align-items:center;
    gap:12px;
  }
html body .hud-identite{margin-right:auto}
html body .hud-menu-btn{
    display:block;
    margin:0;
    order:2;
    flex:0 0 auto;
  }
html body .hud-actions{
    order:3;
    margin:0;
    flex:0 0 auto;
    width:auto; /* neutralise le width:100% hérité */
  }
html body .hud-cv{display:inline-flex;align-items:center}}
/* 2. Tablette (≤900px) : le manifeste occupe toute la largeur comme la
      fiche. La grille de base impose align-items:center, ce qui empêche
      les enfants de s'étirer en colonne flex — on rétablit stretch. */
@media (max-width:900px){html body .grille-accueil{align-items:stretch!important}
html body .grille-accueil > div:first-child{
    width:100%;
    max-width:none;
    margin:0;
  }}

/* ==========================================================================
   V4.4 — MENU COMPLET DÈS 1024px
   --------------------------------------------------------------------------
   Entre 1024 et 1380px, la barre affiche le menu de navigation complet en
   version condensée : sous-titre de l'identité masqué, nom et liens en
   police fluide, bouton CV compact (« CV ↓ »). Cette bande corrige aussi un
   débordement préexistant : la version pleine taille du menu (police 19px,
   « ▼ CV.PDF ») ne tient réellement qu'à partir de ~1372px de large.
   Le hamburger ne sert plus qu'en dessous de 1024px.
   ========================================================================== */
@media (min-width:1024px) and (max-width:1379.98px){
  html body .hud-bar{
    flex-wrap:nowrap;
    gap:10px;
    padding:10px 16px;
  }
  html body .hud-menu-btn{display:none}
  /* le menu redevient une rangée statique (annule le tiroir fixe) */
  html body .hud-menu{
    position:static;
    inset:auto;
    display:flex;
    flex:1 1 auto;
    flex-direction:row;
    justify-content:center;
    align-items:center;
    gap:8px;
    transform:none;
    opacity:1;
    pointer-events:auto;
    background:transparent;
    border:none;
    box-shadow:none;
    padding:0;
    max-height:none;
    overflow:visible;
  }
  html body .hud-menu a{
    padding:2px 3px;
    letter-spacing:.4px;
    border-bottom:none;
    min-height:0;
    white-space:nowrap;
  }
  html body .hud-menu a.actif::after{bottom:-2px}
  /* identité condensée */
  html body .hud-identite{margin-right:0;flex:0 0 auto}
  html body .hud-identite small{display:none}
  html body .hud-identite strong{font-size:clamp(18px, 1.76vw, 22px);letter-spacing:1px}
  /* CV compact : on réutilise le libellé mobile */
  html body .hud-actions{width:auto;margin:0;flex:0 0 auto}
  html body .hud-cv{display:inline-flex;align-items:center}
  html body .hud-cv .cv-desktop{display:none}
  html body .hud-cv .cv-mobile{display:inline}
}