/* =========================================================
   Eliot Shabija — feuille de styles partagée
   Une seule source pour toutes les pages (CV, outils, dashboard, lettre).
   Largeur de conteneur pilotée par --maxw (surchargée par page).
   ========================================================= */

/* ---------- Polices (auto-hébergées, RGPD) ----------
   Inter seule, comme sur le CV papier. */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/inter-400.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/inter-500.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/inter-600.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/inter-700.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/inter-800.woff2") format("woff2")}

/* ---------- Tokens — reprennent la palette du CV PDF ---------- */
:root{
  --paper:#FFFFFF;      /* fond de page */
  --side:#ECF2F9;       /* bleu ciel de la colonne latérale du CV : panneaux, survols */
  --ink:#1A1A1A;        /* texte courant */
  --navy:#1F3A5F;       /* nom, titres de section, boutons, filets forts */
  --navy-hover:#172C48;
  --muted:#5C6370;      /* dates, organismes, texte secondaire */
  --rule:#D9DDE3;       /* filets de section */
  --rule-soft:#E3E7ED;  /* séparateurs de lignes */
  --text-soft:#8A919C;  /* placeholders */

  /* Alias de compatibilité (calculateurs, dashboard, lettre, styles inline) */
  --bg:var(--paper); --surface:var(--paper); --sheet:var(--paper); --sunken:var(--side);
  --ink-soft:var(--muted); --mist:var(--muted); --edge:var(--rule); --edge-soft:var(--rule-soft);
  --blue:var(--navy); --blue-deep:var(--navy); --blue-soft:rgba(31,58,95,.07);
  --green:#2F6B4F; --green-text:#2F6B4F; --red:#A3412F;

  --r:6px;              /* boutons, champs, barre de navigation */
  --r-lg:14px;          /* panneaux en verre dépoli (calculateurs, tableau de bord) */
  --glass:rgba(255,255,255,.62);
  --glass-edge:rgba(255,255,255,.78);
  --glass-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 20px 44px -30px rgba(31,58,95,.5);
  --glass-blur:blur(18px) saturate(160%);
  --focus-ring:0 0 0 3px rgba(31,58,95,.18);

  --maxw:1120px; --nav-h:56px;
  /* Largeur de la barre de navigation : fixe et identique sur TOUTES les pages,
     indépendante de la largeur de contenu propre à chaque page (--maxw). */
  --nav-maxw:1120px;
  /* Barre de navigation flottante : décollée du haut et des bords, en verre dépoli. */
  --nav-gap:12px; --nav-space:calc(var(--nav-h) + var(--nav-gap)); --pad:clamp(1.15rem,5vw,2.5rem);
  --nav-over:clamp(6px,1.3vw,16px); /* la barre déborde légèrement du contenu, à gauche et à droite */
  /* Grille unique de l'accueil, comme le CV : colonne de gauche (photo, titres de section)
     puis contenu ; dans le contenu, une colonne de clés (dates, catégories) et le texte. */
  --rail:250px; --side-w:300px; --gutter:clamp(2rem,5vw,3.5rem); --key:8.5rem;
  --font:"Inter",system-ui,-apple-system,sans-serif;
  --font-display:var(--font);
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;font-size:100%;
  scrollbar-gutter:stable} /* même largeur utile sur les pages courtes et longues : la barre ne bouge pas */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font);font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased}
::selection{background:var(--navy);color:#fff}
a{color:inherit;text-decoration:none}
img{max-width:100%}
:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.15rem,5vw,2.5rem)}
section[id]{scroll-margin-top:calc(var(--nav-space) + 12px)}

/* ---------- Accessibilité : skip-link + visually-hidden ---------- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;padding:.6rem 1rem;
  background:var(--navy);color:#fff;font-weight:600}
.skip-link:focus{left:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Nav principale + menu hamburger ---------- */
/* La bande extérieure est transparente et laisse passer les clics ; seule la barre est cliquable.
   La barre a la largeur du contenu (mêmes bords que la colonne latérale et le texte). */
.nav{position:sticky;top:0;z-index:50;padding:var(--nav-gap) calc(var(--pad) - var(--nav-over)) 0;pointer-events:none}
.nav-inner{pointer-events:auto;position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  height:var(--nav-h);max-width:calc(var(--nav-maxw) - 2 * var(--pad) + 2 * var(--nav-over));margin:0 auto;
  padding:0 var(--nav-over) 0 calc(var(--nav-over) + .1rem);
  border-radius:var(--r);border:1px solid rgba(31,58,95,.12);
  background:rgba(255,255,255,.74);-webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);
  box-shadow:0 12px 32px -20px rgba(31,58,95,.45)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.nav-inner{background:rgba(255,255,255,.96)}}
.brand{font-size:1rem;font-weight:700;letter-spacing:-.01em;color:var(--navy)}
.brand .dot{display:none}
.nav-right{display:flex;align-items:center;gap:.5rem}
.menu{display:flex;align-items:center;gap:.9rem}
/* Liens de la barre : pastilles. Survol = teinte marine légère ; page ou section en cours = teinte plus
   marquée + petit trait marine. Même graisse dans tous les états : la barre ne bouge pas quand l'état change. */
.nav-links{display:flex;gap:.2rem;align-items:center}
.nav-links a{position:relative;font-size:.9rem;font-weight:500;color:var(--muted);padding:.45rem .8rem;border-radius:var(--r);
  transition:color .18s,background-color .18s}
.nav-links a::after{content:"";position:absolute;left:50%;bottom:4px;width:14px;height:2px;border-radius:2px;
  background:var(--navy);transform:translateX(-50%) scaleX(0);transition:transform .22s cubic-bezier(.22,1,.36,1)}
.nav-links a:hover{color:var(--navy);background:rgba(31,58,95,.07)}
.nav-links a[aria-current="page"]{color:var(--navy);background:rgba(31,58,95,.11)}
.nav-links a[aria-current="page"]::after{transform:translateX(-50%) scaleX(1)}
@media (prefers-reduced-motion:reduce){.nav-links a,.nav-links a::after{transition:none}}
.lang{font-size:.78rem;font-weight:600;letter-spacing:.06em;color:var(--muted);border:1px solid var(--rule);
  border-radius:var(--r);padding:.3rem .55rem;transition:color .15s,border-color .15s}
.lang:hover{color:var(--navy);border-color:var(--navy)}

.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;
  width:42px;height:38px;padding:0 10px;background:var(--paper);border:1px solid var(--rule);
  border-radius:var(--r);cursor:pointer}
.hamburger span{display:block;height:2px;width:100%;background:var(--navy);
  transition:transform .22s ease,opacity .18s ease}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:760px){
  .hamburger{display:flex}
  .menu{position:absolute;top:calc(100% + 8px);right:0;min-width:230px;
    flex-direction:column;align-items:stretch;gap:.6rem;
    border:1px solid rgba(31,58,95,.12);border-radius:var(--r);
    /* Pas de second verre dépoli imbriqué dans celui de la barre (rendu Chromium défaillant) : fond blanc plein. */
    background:var(--paper);
    box-shadow:0 16px 36px -20px rgba(31,58,95,.5);padding:.8rem;display:none;
    max-height:calc(100vh - var(--nav-space) - 1.4rem);overflow-y:auto}
  .menu.open{display:flex}
  .menu .nav-links{flex-direction:column;gap:0;align-items:stretch}
  .menu .nav-links{gap:.15rem}
  .menu .nav-links a{padding:.7rem .8rem}
  .menu .nav-links a::after{left:auto;right:.8rem;bottom:50%;width:6px;height:6px;border-radius:50%;transform:translateY(50%) scale(0)}
  .menu .nav-links a[aria-current="page"]::after{transform:translateY(50%) scale(1)}
  .menu .lang,.menu .btn{width:100%;justify-content:center}
  .menu .lang{text-align:center;padding:.5rem}
}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--font);
  font-size:.92rem;font-weight:600;padding:0 20px;border-radius:var(--r);
  min-height:44px;cursor:pointer;border:1px solid transparent;
  transition:background .15s,border-color .15s,color .15s}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-hover)}
.btn-ghost{background:var(--paper);color:var(--navy);border-color:var(--rule)}
.btn-ghost:hover{border-color:var(--navy)}
.btn-sm{font-size:.85rem;padding:0 14px;min-height:36px}

/* ---------- Titre de section : petites capitales espacées + filet (comme le CV) ---------- */
.sec-head{display:flex;align-items:center;gap:1rem;margin:0 0 1.3rem}
.sec-head::after{content:"";flex:1;height:1px;background:var(--rule)}
.sec-title{margin:0;font-size:1.3125rem;font-weight:600;line-height:1.25;letter-spacing:-.012em;color:var(--navy)}
.side-label{font-size:.9rem;font-weight:600;color:var(--ink);line-height:1.3;margin:0}
.box h2,.chartbox h2,.tablebox h2{font-size:.78rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--navy);line-height:1.3;margin:0}

/* ---------- En-tête (CV) : colonne latérale + identité ---------- */
.hero{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:var(--gutter);align-items:start;
  padding:clamp(2.2rem,5vw,3.4rem) 0 clamp(2.4rem,5vw,3.4rem)}
/* La colonne latérale vient après le texte dans le HTML (le nom passe en premier sur mobile),
   mais se place à gauche sur grand écran, comme sur le CV. */
.hero-side{grid-column:1;grid-row:1;background:var(--side);padding:1.5rem}
.hero-photo{position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;
  border:1px solid var(--rule);background:var(--paper)}
.hero-photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo-ph{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
  color:var(--muted);font-size:.82rem;font-weight:500}
.hero-photo.is-empty .photo-ph{display:flex}
.hero-side .side-label{margin:1.4rem 0 .35rem}
.quals{list-style:none;margin:0;padding:0}
.quals .qual{display:block;font-size:.9rem;padding:.45rem 0;border-bottom:1px solid var(--rule)}
.quals .qual:last-child{border-bottom:0;padding-bottom:0}
.quals a{color:inherit;word-break:break-word}
.quals a:hover{color:var(--navy);text-decoration:underline;text-underline-offset:3px}

.hero-copy{grid-column:2;min-width:0;padding-top:.4rem}
.hero-id{border-bottom:2px solid var(--navy);padding-bottom:1.1rem}
.name{font-weight:700;font-size:clamp(2.6rem,6vw,4rem);line-height:1;letter-spacing:-.03em;
  margin:0;color:var(--navy)}
.role{font-size:clamp(1.05rem,2.2vw,1.2rem);color:var(--muted);margin:.5rem 0 0}
.tagline{font-weight:600;font-size:clamp(1.2rem,2.6vw,1.5rem);line-height:1.3;letter-spacing:-.015em;
  margin:1.6rem 0 0;color:var(--ink);text-wrap:balance}
.hl{font:inherit;color:inherit}
.lede{max-width:64ch;margin:1rem 0 0;color:var(--ink);line-height:1.65;text-wrap:pretty}
.cta-row{display:flex;flex-wrap:wrap;gap:10px;margin:1.8rem 0 0}
.hero-copy .story{margin-top:2.2rem}

@media (max-width:760px){
  .hero{grid-template-columns:1fr;gap:1.6rem}
  .hero-copy,.hero-side{grid-column:1;grid-row:auto}
  .hero-copy{padding-top:0}
  .hero-side{display:grid;grid-template-columns:120px 1fr;gap:0 1.2rem;align-items:start;padding:1.1rem}
  .side-label{margin-top:0}
  .hero-side .hero-photo{grid-row:span 2}
}

/* ---------- Sections (CV) ---------- */
.section{padding:clamp(1.4rem,3vw,1.9rem) 0}
.cv-main > .section.glass-panel{padding:clamp(1.25rem,3vw,1.9rem) clamp(1.15rem,3vw,2rem);margin-bottom:1.25rem}
.interests{margin:0;color:var(--ink)}

/* ---------- Accueil : mise en page du CV — colonne latérale grise à gauche, contenu à droite ---------- */
.cv{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);column-gap:var(--gutter);
  margin-top:calc(-1 * var(--nav-space))}
.cv-main{grid-column:2;grid-row:1;min-width:0;padding-top:calc(var(--nav-space) + clamp(1.6rem,4vw,2.6rem));
  padding-bottom:clamp(3rem,6vw,4.5rem)}
.wrap.cv{padding-bottom:0}   /* la marge du bas passe dans la colonne de droite : le bleu va jusqu'au bas de la page */
.cv-head{padding:.3rem 0 clamp(1rem,2.5vw,1.6rem)}
.cv-side{grid-column:1;grid-row:1;font-size:.92rem;background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border-left:1px solid var(--glass-edge);border-right:1px solid var(--glass-edge);box-shadow:0 30px 60px -40px rgba(31,58,95,.45)}
.cv-side-in{position:sticky;top:0;height:100vh;height:100dvh;display:flex;flex-direction:column;overflow-y:auto;
  padding:calc(var(--nav-space) + .9rem) 1.4rem 1rem;scrollbar-width:none}
.cv-side-in::-webkit-scrollbar{display:none}
.cv-side .hero-photo{width:100%;aspect-ratio:auto;flex:1 1 0;min-height:8rem;
  max-height:calc((var(--side-w) - 2.8rem) * 1.25);border-radius:var(--r)}
.cv-side .hero-photo img{object-position:50% 22%}
.cv-side .side-block{flex:0 0 auto}
.cv-side .side-cv{margin-top:auto;padding-top:.9rem}
.side-block{margin-top:.9rem}
.cv-side .side-label{margin:0 0 .25rem;font-size:.95rem;font-weight:600;color:var(--navy)}
.side-list{list-style:none;margin:0;padding:0}
.side-list li{padding:.12rem 0;word-break:break-word}
.side-list a{color:inherit}
.side-list a:hover{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
/* Informations : libellé et valeur sur une ligne, comme un petit tableau */
.side-facts{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:.12rem .9rem;align-items:baseline;margin:0}
.side-facts div{display:contents}
.side-facts dt{font-size:.8rem;color:var(--muted)}
.side-facts dd{margin:0;color:var(--ink)}
.cv-side .tags{font-size:.92rem}
.cv-side .tag{padding:.17rem 0;border-bottom-color:var(--rule)}
.cv-side .tag:last-child{border-bottom:0}
/* Langues dans la colonne : en tableau comme sur le CV quand l'écran est assez haut ;
   sur un écran d'ordinateur plus bas, version compacte, pour que la photo reste grande et que tout soit visible. */
.langs-compact{display:none;margin:0;line-height:1.5}
.langs-compact .lvl{color:var(--muted)}
.langs-compact .lg{white-space:nowrap}   /* une langue et son niveau restent sur la même ligne */
@media (min-width:861px) and (max-height:789px){
  .cv-side .langs-table{display:none}
  .cv-side .langs-compact{display:block}
}
/* Bouton « Afficher le numéro » : un lien d'action, pas un gros bouton */
.phone-reveal{font:inherit;font-weight:600;color:var(--navy);background:none;border:0;padding:0;cursor:pointer;
  text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}
.phone-reveal:hover{text-decoration-style:solid}
.phone-link{color:inherit}
.cv-links{display:flex;gap:.5rem}
.cv-links .btn{flex:1 1 0;padding:0 .6rem}
.side-skills{list-style:none;margin:0;padding:0;line-height:1.5}
.side-skills li{position:relative;padding-left:.95rem}
.side-skills li + li{margin-top:.45rem}
.side-skills li::before{content:"–";position:absolute;left:0;color:var(--navy);font-weight:600}
.side-skills strong{font-weight:600}
@media (max-width:860px){
  /* Une colonne : le nom d'abord, puis la colonne latérale, puis les sections. */
  .cv{grid-template-columns:minmax(0,1fr);margin-top:0;padding-top:clamp(1.2rem,4vw,2rem)}
  .wrap.cv{padding-bottom:clamp(3rem,6vw,4.5rem)}
  .cv-main{display:contents}
  .cv-head,.cv-side,.cv-main > .section{grid-column:1;grid-row:auto}
  .cv-head{order:1}
  .cv-side{order:2;margin:0 0 .6rem}
  .cv-side{border-radius:var(--r-lg);border:1px solid var(--glass-edge)}
  .cv-side-in{position:static;height:auto;max-height:none;overflow:visible;padding:1.1rem 1.3rem 1.2rem;display:grid;grid-template-columns:minmax(0,9rem) minmax(0,1fr);gap:1.2rem 1.4rem;align-items:start}
  .cv-main > .section{order:3}
  .cv-side .hero-photo{width:100%;aspect-ratio:4/5;flex:none;min-height:0;max-height:none}
  .cv-side .side-cv{margin-top:0;padding-top:0}
  .side-block{margin-top:0}
  /* Contact à côté de la photo ; Informations et Langues sur toute la largeur. */
  .side-block:nth-of-type(n+3){grid-column:1 / -1}
  .cv-links .btn{min-height:44px}
}
@media (max-width:420px){.cv-side-in{grid-template-columns:minmax(0,7rem) minmax(0,1fr);padding:1rem;column-gap:1rem}}
@media (max-width:380px){.cv-side-in{grid-template-columns:minmax(0,1fr)}.cv-side .hero-photo{width:42%}}
.side-list a[href^="tel:"]{white-space:nowrap}
.sec-card > :first-child{margin-top:0}
.sec-intro{max-width:62ch;color:var(--muted);margin:0 0 1.4rem}
.prose{max-width:66ch}
.prose p{margin:0 0 1rem;color:var(--ink)}
.prose p:last-child{margin-bottom:0}
.prose a,.note a{color:var(--navy);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.note{color:var(--muted);font-size:.94rem;margin-top:1.4rem}
.placeholder{color:var(--ink);font-weight:500;background:#FFF3B0;padding:0 .3em}

/* ---------- Expérience (CV) : employeur et dates à droite, postes le long d'un fil vertical ---------- */
.xp + .xp{margin-top:2rem}
.xp-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.15rem 1.5rem}
.xp-org{margin:0;font-size:1.02rem;font-weight:600;line-height:1.35;color:var(--navy)}
.xp-when{margin:0;font-size:.88rem;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.xp-dur::before{content:"·";margin:0 .45em}
/* Un point par poste : plein pour le plus récent, cerclé pour les précédents (comme le CV). */
.xp-roles{list-style:none;position:relative;margin:.8rem 0 0;padding:0 0 0 1.6rem}
.xp-roles::before{content:"";position:absolute;left:4px;top:.7rem;bottom:.35rem;width:1px;background:var(--rule)}
.xp-role{position:relative}
.xp-role + .xp-role{margin-top:1.05rem}
.xp-role::before{content:"";position:absolute;left:-1.6rem;top:.42rem;width:9px;height:9px;border-radius:50%;
  box-sizing:border-box;border:1.5px solid var(--navy);background:var(--paper)}
.xp-role:first-child::before{background:var(--navy)}
.xp-title{margin:0;font-size:1rem;font-weight:600;line-height:1.4;color:var(--ink)}
.xp-note{margin:.9rem 0 0 1.6rem;font-size:.85rem;font-style:italic;color:var(--muted)}
.job-list{list-style:disc;font-size:.95rem;margin:.35rem 0 0;padding-left:1.1rem;max-width:66ch;color:var(--ink)}
.job-list li{margin:.2rem 0}
.job-list li::marker{color:var(--navy)}

/* ---------- Formation (CV) : intitulé à gauche, date à droite ---------- */
.edu{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:1.5rem;padding:.7rem 0}
.sec-card > .edu:first-child{padding-top:.1rem}
.edu-title{margin:0;font-size:1rem;font-weight:600;line-height:1.4;color:var(--ink)}
.edu-org{margin:.05rem 0 0;font-size:.92rem;color:var(--muted)}
.edu-desc{margin:.35rem 0 0;font-size:.94rem;max-width:62ch;color:var(--ink)}
.edu-date{margin:0;padding-top:.12rem;font-size:.88rem;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.is-goal .edu-date{color:var(--navy);font-weight:600}
.job-files{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}
.attach{display:inline-flex;align-items:center;gap:.45rem;font-size:.82rem;font-weight:500;
  padding:.4rem .7rem;border:1px solid var(--rule);border-radius:var(--r);color:var(--muted)}
.attach:hover{border-color:var(--navy);color:var(--navy)}
.attach svg{flex:none}
.attach-soft{font-size:.85rem;color:var(--muted);font-style:italic}

/* ---------- Compétences : blocs alignés sur deux colonnes, une ligne par élément ---------- */
.skill-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.8rem 2.6rem}
.skill-key{margin:0 0 .3rem;font-size:.95rem;font-weight:600;line-height:1.35;color:var(--ink)}
@media (max-width:560px){.skill-grid{grid-template-columns:minmax(0,1fr);gap:1.6rem}}
/* Listes à filets (compétences, langues) ; langues : niveau à droite, comme le CV */
.tags{list-style:none;margin:0;padding:0;font-size:.94rem;color:var(--ink)}
.tag{padding:.45rem 0;border-bottom:1px solid var(--rule-soft)}
.langs .tag{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.lvl{color:var(--muted);text-align:right}


/* ---------- Projets (CV) : entrées sur deux colonnes, séparées par un filet ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
.card{position:relative;display:flex;flex-direction:column;padding:1.15rem 1.25rem 1.2rem;border-radius:12px;
  background:rgba(255,255,255,.72);border:1px solid rgba(31,58,95,.09);transition:border-color .2s,box-shadow .2s,transform .2s}
.card:has(.card-btn):hover{border-color:rgba(31,58,95,.28);box-shadow:0 14px 30px -22px rgba(31,58,95,.55);transform:translateY(-2px)}
.card-ico{display:none}
.card-title{font-weight:600;font-size:1.05rem;line-height:1.35;margin:0 0 .45rem;color:var(--ink);
  text-wrap:balance;transition:color .2s}
.card-desc{font-size:.94rem;color:var(--ink);margin:0;flex:1;line-height:1.55}
.card-stack{font-size:.86rem;color:var(--muted);margin:.15rem 0 0}
/* Pied de carte à hauteur fixe : boutons et mentions s'alignent d'une carte à l'autre. */
.card-foot{margin-top:1rem;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;min-height:44px}
/* Bouton secondaire du système (.btn .btn-ghost).
   Le ::after étend le lien à toute l'entrée : on clique n'importe où sur le projet. */
.card-btn::after{content:"";position:absolute;inset:0}
.card:has(.card-btn):hover .card-title{color:var(--navy)}
.card:has(.card-btn):hover .card-btn{background:var(--navy-hover)}
.card-btn:active{background:#12233a}
@media (prefers-reduced-motion:reduce){.card,.card-title{transition:none}.card:has(.card-btn):hover{transform:none}}
/* Une seule colonne : rien à aligner, la mention n'a pas besoin de la hauteur d'un bouton. */
@media (max-width:700px){.card-foot:not(:has(.card-btn)){min-height:0}}

/* ---------- Contact (CV) ---------- */
.contact-panel{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3rem);align-items:start}
.contact-lead{margin:0;font-size:clamp(1.2rem,2.6vw,1.4rem);font-weight:600;line-height:1.3;color:var(--ink);max-width:26ch}
.contact-sub{margin:.5rem 0 0;max-width:42ch;color:var(--muted)}
.contact-pitch .contact-rows{margin-top:1.4rem}
/* Formulaire de contact */
.contact-form{display:flex;flex-direction:column;gap:.85rem}
.contact-form .field{display:flex;flex-direction:column;gap:.3rem}
.contact-form label{font-size:.88rem;font-weight:600;color:var(--ink)}
.contact-form .opt{font-weight:400;color:var(--muted)}
.contact-form input:not([type=checkbox]),.contact-form textarea{width:100%;font-family:var(--font);font-size:1rem;color:var(--ink);
  background:rgba(255,255,255,.85);border:1px solid var(--rule);border-radius:var(--r);padding:.62rem .8rem;
  transition:border-color .15s,box-shadow .15s}
.contact-form textarea{resize:vertical;min-height:7.5rem;line-height:1.5}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--navy);box-shadow:var(--focus-ring)}
.contact-form [aria-invalid="true"]{border-color:var(--red);box-shadow:0 0 0 3px rgba(163,65,47,.12)}
.field-error{margin:0;font-size:.82rem;color:var(--red)}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin-top:.2rem}
.form-foot .btn[disabled]{opacity:.6;cursor:progress}
.form-status{margin:0;font-size:.9rem;color:var(--muted)}
.form-status.is-ok{color:var(--green)}
.form-status.is-error{color:var(--red)}
.form-privacy{margin:0;font-size:.8rem;color:var(--muted)}
/* Piège à robots : hors de l'écran (pas display:none, que certains robots repèrent) */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact-rows{display:flex;flex-direction:column}
.contact-row{display:grid;grid-template-columns:auto 1fr;gap:0 .9rem;align-items:center;color:inherit;
  padding:.8rem 0;border-bottom:1px solid var(--rule-soft)}
.contact-row:first-child{padding-top:0}
.contact-ico{color:var(--navy);display:inline-flex;grid-row:span 2}
.contact-row .contact-k{grid-column:2}
.contact-row .contact-v{grid-column:2}
.contact-k{font-size:.85rem;color:var(--muted)}
.contact-v{font-size:clamp(.9rem,3.4vw,1rem);font-weight:600;color:var(--ink);word-break:break-word}
a.contact-row:hover .contact-v{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
@media (max-width:760px){
  .contact-panel{grid-template-columns:1fr}
}
.wrap{padding-bottom:clamp(3rem,6vw,4.5rem)}

/* ---------- Apparition au scroll (discrète) ---------- */
.reveal{opacity:0;transition:opacity .5s ease}
.reveal.in{opacity:1}
/* Filet de sécurité : sans JS, tout le contenu reste visible. app.js retire .no-js. */
html.no-js .reveal{opacity:1}


/* ---------- À propos : en-tête comme l'accueil, puis récit en étapes ---------- */
/* Fil horizontal de l'en-tête : une ligne, un point par étape (année, puis thème). Il sert de sommaire.
   Points pleins pour les étapes passées, cerclé pour « Demain ». */
.story{list-style:none;position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin:0;padding:0}
.story::before{content:"";position:absolute;left:0;right:0;top:4px;height:1px;background:var(--rule)}
.story li{position:relative;min-width:0}
.story a{display:block;padding:1.05rem .7rem 0 0;color:inherit}
.story a::before{content:"";position:absolute;left:0;top:0;width:9px;height:9px;border-radius:50%;
  box-sizing:border-box;border:1.5px solid var(--navy);background:var(--navy);transition:transform .2s}
.story .is-next a::before{background:var(--paper)}
.story-when{display:block;font-size:.88rem;font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums}
.story-what{display:block;margin-top:.1rem;font-size:.84rem;line-height:1.35;color:var(--muted);transition:color .2s}
.story a:hover .story-what,.story a:focus-visible .story-what{color:var(--ink)}
.story a:hover::before,.story a:focus-visible::before{transform:scale(1.3)}
@media (max-width:640px){
  /* Sur petit écran, le fil défile horizontalement plutôt que d'écraser les libellés. */
  .story{grid-template-columns:repeat(6,7rem);overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:.5rem;
    margin-right:calc(-1 * clamp(1.15rem,5vw,2.5rem))}
  .story::before{right:auto;width:42rem}
  .story li{scroll-snap-align:start}
}
@media (prefers-reduced-motion:reduce){.story a::before,.story-what{transition:none}}

/* Chaque étape s'ouvre par un point posé sur un filet horizontal, puis l'année et le titre à gauche. */
/* En-tête de la page À propos : sur toute la largeur, sans panneau latéral */
.about-top{padding:clamp(1.6rem,4vw,2.6rem) 0 clamp(2rem,4.5vw,3rem)}
.about-top .lede{max-width:62ch}
.about-top .story{margin-top:2.2rem}

/* Fil vertical du récit : il relie les étapes ; la partie marine et la flèche descendent avec la lecture.
   Chaque étape s'ouvre par un filet horizontal qui part du fil, avec un point cerclé qui se remplit
   quand on l'atteint. Positions calculées par app.js (initStorySpine). */
.story-body{--spine-x:1.5rem;--spine-pad:3.8rem;position:relative;padding:1.2rem clamp(1.15rem,3vw,2rem) .6rem var(--spine-pad)}
.story-spine{position:absolute;top:0;left:calc(var(--spine-x) - .5px);width:1px;height:0;background:var(--rule)}
.story-fill{position:absolute;top:0;left:-1px;width:3px;height:0;border-radius:3px;background:var(--navy)}
.story-arrow{position:absolute;top:0;left:50%;z-index:2;display:block;color:var(--navy);
  transform:translate(-50%,-15px);will-change:transform;transition:opacity .2s}
.story-arrow.is-idle{opacity:0}   /* tant que la lecture n'a pas commencé, la flèche ne masque pas le premier point */
.chapter{position:relative;display:grid;grid-template-columns:calc(var(--rail) - var(--spine-pad)) minmax(0,1fr);
  column-gap:var(--gutter);padding:clamp(2rem,4vw,2.6rem) 0}
.chapter::after{content:"";position:absolute;top:0;right:0;left:calc(var(--spine-x) - var(--spine-pad));height:1px;background:rgba(31,58,95,.12)}
.chapter::before{content:"";position:absolute;z-index:1;top:-5px;left:calc(var(--spine-x) - var(--spine-pad) - 5px);
  width:10px;height:10px;border-radius:50%;box-sizing:border-box;border:1.5px solid var(--navy);background:var(--paper);
  transition:background .25s}
.chapter.is-passed::before{background:var(--navy)}
@media (max-width:640px){.story-body{--spine-x:.9rem;--spine-pad:2.3rem}}
@media (prefers-reduced-motion:reduce){.chapter::before{transition:none}}
.ch-head{grid-column:1}
.ch-head-in{position:sticky;top:calc(var(--nav-space) + 1.6rem)}
.ch-when{display:block;margin:0 0 .3rem;font-size:.88rem;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.ch-title{margin:0;font-size:1.3125rem;font-weight:600;line-height:1.25;letter-spacing:-.012em;color:var(--navy);text-wrap:balance}
.chapter > .prose{grid-column:2;min-width:0}
.chapter .prose p{text-wrap:pretty}
@media (max-width:900px){
  .chapter{grid-template-columns:minmax(0,1fr)}
  .ch-head,.chapter > .prose{grid-column:1}
  .ch-head-in{position:static;margin-bottom:1rem}
}

/* ---------- Conteneur de tableau défilable ---------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- Bloc « Résultat » des calculateurs ---------- */
.box-result{border-top:2px solid var(--navy)}

/* ---------- États d'erreur des champs (calculateurs) ---------- */
input[aria-invalid="true"]{border-color:var(--red);box-shadow:0 0 0 3px rgba(163,65,47,.12)}
.field-error{display:flex;align-items:center;gap:.35rem;color:var(--red);font-size:.82rem;font-weight:500;margin:.45rem 0 0}

/* ---------- Lightbox (galerie de captures Excel) ---------- */
.shot a{cursor:zoom-in}
.lightbox{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  padding:clamp(1rem,4vw,3rem);background:rgba(20,26,36,.88)}
.lightbox.open{display:flex}
.lightbox img{max-width:100%;max-height:90vh;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.lightbox-close{position:absolute;top:1rem;right:1rem;width:42px;height:42px;border-radius:var(--r);border:none;
  background:rgba(255,255,255,.14);color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .15s}
.lightbox-close:hover{background:rgba(255,255,255,.26)}

/* =========================================================
   Sous-pages : en-tête façon CV (titre marine + filet)
   ========================================================= */
.head,.about-head{border-bottom:2px solid var(--navy);padding-bottom:1.1rem;margin:0 0 clamp(1.6rem,4vw,2.2rem)}
.head h1,.about-head h1{font-size:clamp(1.9rem,5vw,2.6rem);font-weight:700;letter-spacing:-.025em;line-height:1.1;margin:0;color:var(--navy)}
.head p{color:var(--muted);margin:.5rem 0 0;max-width:66ch}
.about-role{color:var(--muted);font-size:1.05rem;margin:.45rem 0 0}
.about-contact{color:var(--muted);font-size:.9rem;margin:.2rem 0 0;word-break:break-word}
.about-head + .prose{font-size:1.02rem}

/* =========================================================
   Calculateurs (outils.html)
   ========================================================= */
.disclaimer{display:flex;gap:.6rem;align-items:flex-start;background:var(--side);
  padding:.9rem 1.1rem;margin:0 0 1.8rem;font-size:.86rem;color:var(--ink)}
.disclaimer svg{flex:none;color:var(--navy);margin-top:2px}

/* Sélecteur de canton : contrôle segmenté à filet, option active en marine */
.canton-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin:0 0 1.4rem}
.canton-lbl{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--navy)}
.seg{display:inline-flex;border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;transition:border-color .15s,box-shadow .15s}
.seg label{display:block;margin:0;position:relative;cursor:pointer}
.seg label + label{border-left:1px solid var(--rule)}
.seg input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.seg span{display:block;padding:.45rem 1.05rem;font-size:.9rem;font-weight:500;color:var(--muted);transition:background .15s,color .15s}
.seg label:hover span{color:var(--ink);background:var(--side)}
.seg input:checked + span{background:var(--navy);color:#fff;font-weight:600}
.seg:has(input:focus-visible){border-color:var(--navy);box-shadow:var(--focus-ring)}
.canton-note{flex:1 1 20rem;margin:0;font-size:.8rem;color:var(--muted);max-width:62ch}

.tabs{display:flex;gap:.2rem;border-bottom:1px solid var(--rule);margin-bottom:1.6rem;
  max-width:100%;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{font-family:var(--font);font-size:.92rem;font-weight:500;color:var(--muted);background:none;border:none;
  border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;white-space:nowrap;flex:0 0 auto;
  padding:.65rem .9rem;transition:color .15s,border-color .15s}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--navy);border-bottom-color:var(--navy);font-weight:600}
.panel{display:none}
.panel.active{display:block}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;align-items:start}
@media (max-width:740px){.grid{grid-template-columns:1fr}}
.box{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);padding:1.4rem}
.box h2{margin:0 0 1.2rem}

.field{margin-bottom:1rem}
.field:last-child{margin-bottom:0}
label{display:block;font-size:.8rem;font-weight:600;color:var(--muted);margin-bottom:.4rem}
.hint{font-weight:400;color:var(--muted)}
input[type=number],select{width:100%;font-family:var(--font);font-size:1rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);padding:.58rem .8rem;transition:border-color .15s,box-shadow .15s}
input[type=number]:focus,select:focus{outline:none;border-color:var(--navy);box-shadow:var(--focus-ring)}
.inline{display:flex;gap:.6rem;flex-wrap:wrap}
.inline > div{flex:1 1 120px}
.check{display:flex;align-items:center;gap:.55rem;font-size:.92rem;font-weight:500;color:var(--ink);cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--navy);cursor:pointer}

details{margin-top:1.1rem;border-top:1px solid var(--rule);padding-top:1rem}
summary{cursor:pointer;font-size:.85rem;font-weight:600;color:var(--navy);list-style:none}
summary::-webkit-details-marker{display:none}
summary::before{content:"\002B  ";font-weight:700}
details[open] summary::before{content:"\2212  "}
.adv{margin-top:1rem}

.res-net{text-align:center;padding:1.1rem 0 1.3rem;border-bottom:1px solid var(--rule);margin-bottom:1.1rem}
.res-net .lbl{font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.res-net .big{font-size:clamp(1.9rem,6vw,2.5rem);font-weight:700;letter-spacing:-.02em;color:var(--navy);margin-top:.25rem;line-height:1;font-variant-numeric:tabular-nums}
.res-net .sub{font-size:.86rem;color:var(--muted);margin-top:.35rem}

#breakdown{width:100%;border-collapse:collapse;font-size:.92rem}
#breakdown td{padding:.5rem 0;border-bottom:1px solid var(--rule-soft)}
#breakdown tr:last-child td{border-bottom:none}
#breakdown td.r{text-align:right;font-variant-numeric:tabular-nums;font-weight:500;white-space:nowrap}
#breakdown td.pct{text-align:right;color:var(--muted);font-size:.82rem;width:64px;font-variant-numeric:tabular-nums}
#breakdown tr.total td{font-weight:700;border-top:2px solid var(--navy);border-bottom:none;padding-top:.7rem}
.swatch{display:inline-block;width:9px;height:9px;margin-right:.5rem;vertical-align:middle}

.barviz{display:flex;height:12px;overflow:hidden;margin:1.2rem 0 .3rem;background:var(--rule-soft)}
.barviz span{display:block;height:100%}

.tva-out{display:grid;grid-template-columns:1fr;gap:0;margin-top:.4rem}
.tva-row{display:flex;justify-content:space-between;align-items:baseline;padding:.75rem 0;border-bottom:1px solid var(--rule-soft)}
.tva-row.hi{border-top:2px solid var(--navy);border-bottom:none;margin-top:.3rem}
.tva-row.hi .v{color:var(--navy)}
.tva-row .k{font-size:.88rem;color:var(--muted);font-weight:500}
.tva-row .v{font-size:1.1rem;font-weight:700;font-variant-numeric:tabular-nums}

.emp-tab{width:100%;border-collapse:collapse;font-size:.92rem;margin-top:1rem}
.emp-tab th,.emp-tab td{padding:.5rem .3rem;border-bottom:1px solid var(--rule-soft)}
.emp-tab th{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600;text-align:right}
.emp-tab th:first-child,.emp-tab td:first-child{text-align:left}
.emp-tab td.r{text-align:right;font-variant-numeric:tabular-nums;font-weight:500}
.emp-tab tr.tot td{font-weight:700;border-top:2px solid var(--navy);border-bottom:none;padding-top:.6rem}

/* =========================================================
   Tableau de bord (dashboard.html)
   ========================================================= */
.demo-note{display:flex;gap:.5rem;align-items:center;margin:0 0 1.4rem;font-size:.85rem;color:var(--muted)}
.demo-note .d{width:6px;height:6px;background:var(--navy);flex:none}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:1.4rem}
.kpi{background:var(--side);padding:1.1rem 1.2rem;border-top:2px solid var(--navy)}
.kpi .k{font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.kpi .v{font-size:clamp(1.3rem,2.6vw,1.5rem);font-weight:700;letter-spacing:-.02em;margin:.35rem 0 .2rem;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink)}
.kpi .d{font-size:.82rem;font-weight:600;display:inline-flex;align-items:center;gap:.3rem}
.up{color:var(--green-text)} .flat{color:var(--muted)}

.charts{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-bottom:1.2rem}
@media (max-width:760px){.charts{grid-template-columns:1fr}}
.chartbox{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);padding:1.3rem}
.chartbox h2{margin:0 0 1rem}
.chartbox.full{grid-column:1/-1}
.canvas-wrap{position:relative;height:280px}
.canvas-wrap.sm{height:240px}

.tablebox{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);padding:1.3rem}
.tablebox h2{margin:0 0 1rem}
table.fin{width:100%;border-collapse:collapse;font-size:.9rem}
table.fin th,table.fin td{padding:.5rem .4rem;border-bottom:1px solid var(--rule-soft);text-align:right;font-variant-numeric:tabular-nums}
table.fin th:first-child,table.fin td:first-child{text-align:left}
table.fin thead th{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600;border-bottom-color:var(--rule)}
table.fin tr.tot td{font-weight:700;border-top:2px solid var(--navy);border-bottom:none;padding-top:.65rem}
.pos{color:var(--green-text)} .neg{color:var(--red)}

.xlsx-intro{max-width:66ch;color:var(--ink);margin:0 0 1.1rem}
code{font-family:ui-monospace,Menlo,monospace;font-size:.86em;background:var(--side);color:var(--ink);padding:.08em .35em;border-radius:2px}
.feats{display:flex;flex-wrap:wrap;gap:.35rem 0;margin:0 0 1.4rem}
.feat{font-size:.86rem;color:var(--muted);padding:0 .9rem;border-left:1px solid var(--rule)}
.feat:first-child{padding-left:0;border-left:none}
.dl{display:inline-flex;align-items:center;gap:.55rem;background:var(--navy);color:#fff;font-weight:600;font-size:.92rem;
  padding:0 20px;border-radius:var(--r);min-height:44px;transition:background .15s;margin-bottom:1.8rem}
.dl:hover{background:var(--navy-hover)}
.shot{margin:0 0 1.8rem}
.shot figcaption{font-size:.85rem;color:var(--muted);font-weight:600;margin-bottom:.5rem}
.shot a{display:block;border:1px solid var(--rule);overflow:hidden}
.shot a:hover{border-color:var(--navy)}
.shot img{display:block;width:100%;height:auto}

/* =========================================================
   Lettre de motivation (format lettre, sur feuille)
   ========================================================= */
.ltr-page{padding:clamp(1.4rem,4vw,2.6rem) clamp(1rem,4vw,1.6rem) 4rem}
.sheet{max-width:var(--maxw);margin:0 auto;padding:clamp(1.6rem,4vw,3rem);
  background:var(--paper);border:1px solid var(--rule)}
.ltr-head{display:flex;justify-content:space-between;gap:1.6rem;flex-wrap:wrap;margin-bottom:2.2rem}
.ltr-sender{min-width:200px}
.ltr-name{font-size:1.4rem;font-weight:700;letter-spacing:-.02em;margin:0;line-height:1.1;color:var(--navy)}
.ltr-role{font-size:.9rem;color:var(--muted);margin:.18rem 0 .6rem}
.ltr-line{margin:.13rem 0;font-size:.9rem;color:var(--muted)}
.ltr-recip{text-align:right;min-width:210px}
.ltr-recip .lbl{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);margin:0 0 .4rem}
.ltr-place{text-align:right;font-size:.9rem;color:var(--muted);margin:0 0 1.9rem}
.ltr-objet{font-size:1rem;margin:0 0 1.7rem}
.ltr-objet strong{font-weight:700}
.ltr-body p{margin:0 0 1.05rem;font-size:1rem;line-height:1.72}
.ltr-body strong{font-weight:600}
.ltr-sign{margin-top:2rem;font-weight:600;color:var(--ink)}
.ltr-sign p{margin:0}
.ph{color:var(--ink);font-weight:500;background:#FFF3B0;padding:0 .3em}
@media (max-width:560px){
  .ltr-recip{text-align:left;min-width:0}
  .ltr-place{text-align:left}
  .ltr-body p{font-size:.98rem}
}

/* =========================================================
   Réactivité fine + accessibilité
   ========================================================= */
@media (max-width:560px){
  .xp-when{white-space:normal}
  .edu{grid-template-columns:minmax(0,1fr)}
  .edu-date{grid-row:1;padding:0 0 .1rem}
  .cta-row .btn{flex:1 1 auto}
  .cards{grid-template-columns:1fr}
}
@media (max-width:400px){
  .hero-side{grid-template-columns:96px 1fr}
  .box{padding:1.15rem}
  .tab{padding:.6rem .7rem;font-size:.86rem}
}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transition:none}
  *{transition-duration:.01ms !important}
}

/* =========================================================
   Impression — CV (index)
   ========================================================= */
@media print{
  .nav,.cta-row,.contact-cta{display:none}
  body{font-size:10.5pt;color:#000}
  .wrap{max-width:none;padding:0}
  .hero{grid-template-columns:150px 1fr;gap:1.4rem;padding:0 0 .6rem}
  .hero-side{padding:.8rem}
  .name{font-size:26pt}
  .section{padding:.6rem 0;break-inside:avoid}
  .card{break-inside:avoid}
  .card-foot{display:none}
  .reveal{opacity:1 !important}
  .placeholder{background:none !important;padding:0}
  a{color:#000;text-decoration:none}
  @page{margin:1.4cm}
}

/* =========================================================
   Impression — Lettre (PDF propre A4)
   ========================================================= */
@media print{
  .ltr-page{padding:0}
  .sheet{border:none;margin:0;max-width:none;padding:0}
  .ltr-body p{font-size:11pt;line-height:1.5;margin-bottom:.7rem}
  .ph{background:none;padding:0}
  @page{size:A4;margin:1.8cm 2cm}
}

/* =========================================================
   Verre dépoli, sur tout le site
   Un fond bleu ciel très doux, avec des halos, donne de la matière
   au flou ; les panneaux deviennent des plaques de verre arrondies.
   ========================================================= */
body{background:
  radial-gradient(56rem 38rem at -8% -6%,rgba(31,58,95,.11),transparent 62%),
  radial-gradient(48rem 34rem at 108% 8%,rgba(110,160,220,.26),transparent 62%),
  radial-gradient(44rem 30rem at 45% 112%,rgba(110,160,220,.18),transparent 62%),
  #F3F7FC;background-attachment:fixed}
:is(.box,.chartbox,.tablebox,.kpi,.glass,.disclaimer){
  background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-edge);border-radius:var(--r-lg);box-shadow:var(--glass-shadow)}
.kpi{border-top:1px solid var(--glass-edge)}
.box-result{border-top:1px solid var(--glass-edge)}
/* Panneau en verre générique : sections de l'accueil, récit, classeur, essai, 404
   (nom distinct de .panel, déjà utilisé par les onglets des calculateurs) */
.glass-panel{padding:clamp(1.25rem,3vw,1.9rem) clamp(1.15rem,3vw,2rem)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :is(.box,.chartbox,.tablebox,.kpi,.glass,.disclaimer){background:rgba(255,255,255,.94)}
}