/* ==========================================================================
   Jules Lambour · Portfolio V3
   Feuille de style principale : style Asiimov (skin CS:GO), sombre ou clair
   Sommaire :
     01. Variables & tokens
     02. Reset & base
     03. Utilitaires de layout
     04. Composants atomiques (boutons, tags, titres de section)
     05. Header & navigation
     06. Hero
     07. Section Expertise
     08. Section Projets (filtres + grille)
     09. Modale projet
     10. Section Parcours
     11. Section À propos
     12. Contact & footer
     13. Pages détail projet
     14. Animations au scroll
     15. Responsive
     16. Mode clair
   ========================================================================== */

/* ==========================================================================
   01. Variables & tokens
   ========================================================================== */

:root {
  /* --- Fonds & surfaces --- */
  --bg:            #0c0c0d;
  --bg-alt:        #121214;
  --bg-elev:       #1a1a1d;
  /* Surfaces, bordures et trame : voile de la couleur du texte, qui suit donc
     le mode clair sans être redéfini */
  --surface:       color-mix(in srgb, var(--text) 3%, transparent);
  --surface-hover: color-mix(in srgb, var(--text) 5.5%, transparent);
  --glass:         color-mix(in srgb, var(--bg-elev) 62%, transparent);
  --glass-strong:  color-mix(in srgb, var(--bg) 88%, transparent);

  /* --- Bordures --- */
  --line:          color-mix(in srgb, var(--text) 7%, transparent);
  --line-strong:   color-mix(in srgb, var(--text) 13%, transparent);
  --line-accent:   color-mix(in srgb, var(--accent) 32%, transparent);

  /* --- Texte --- */
  --text:          #e9ebef;
  --text-dim:      #98a0ab;
  --text-mute:     #626a76;

  /* --- Accents (transparences et texte sur accent dérivés via color-mix) --- */
  --accent:        #ff6a00;
  --accent-hi:     #ff9a4a;
  --accent-lo:     #e04f00;
  --accent-soft:   color-mix(in srgb, var(--accent) 10%, transparent);
  --accent-glow:   color-mix(in srgb, var(--accent) 28%, transparent);
  --on-accent:     color-mix(in srgb, var(--accent) 8%, black); /* texte posé sur l'accent */
  --steel:         #f2f2f2; /* blanc Asiimov : 3e couleur des aplats et de la livrée */
  --steel-soft:    color-mix(in srgb, var(--steel) 10%, transparent);
  --success:       #46c98b;
  --warn:          #e8b339;

  /* --- Signature Asiimov (skin CS:GO) --- */
  /* Aplat « livrée » : panneau blanc dont le coin bas-droit est tranché
     d'orange, hors de la zone du texte (-sm pour les petits éléments) */
  --livery-fill:    linear-gradient(135deg, var(--steel) calc(100% - 20px), var(--accent) calc(100% - 20px));
  --livery-fill-sm: linear-gradient(135deg, var(--steel) calc(100% - 12px), var(--accent) calc(100% - 12px));
  /* Bandes diagonales en fond du hero */
  --livery:      linear-gradient(115deg, transparent 0 50%, var(--steel) 50% 66%,
                 var(--accent) 66% 70%, transparent 70%);
  /* Coins biseautés en haut à gauche et en bas à droite */
  --chamfer:     polygon(10px 0, 100% 0, 100% calc(100% - 10px),
                 calc(100% - 10px) 100%, 0 100%, 0 10px);
  --chamfer-sm:  polygon(6px 0, 100% 0, 100% calc(100% - 6px),
                 calc(100% - 6px) 100%, 0 100%, 0 6px);

  /* --- Typographie --- */
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Consolas', ui-monospace, monospace;

  --fs-hero:  clamp(3rem, 11vw, 8.5rem);
  --fs-h2:    clamp(1.9rem, 4.2vw, 3.1rem);
  --fs-h3:    clamp(1.25rem, 2.2vw, 1.6rem);
  --fs-lead:  clamp(1rem, 1.6vw, 1.175rem);

  /* --- Espacements --- */
  --gutter:      clamp(1.25rem, 4vw, 2.5rem);
  --section-y:   clamp(5rem, 11vw, 9rem);
  --maxw:        1240px;
  --maxw-narrow: 820px;

  /* --- Rayons --- */
  /* Angles vifs, dans l'esprit du skin */
  --r-sm: 2px;
  --r-md: 3px;
  --r-lg: 4px;
  --r-xl: 6px;
  --r-pill: 3px;

  /* --- Ombres --- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 12px 32px -12px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 32px 64px -24px rgba(0, 0, 0, 0.75);
  --shadow-accent: 0 16px 40px -18px var(--accent-glow);

  /* --- Transitions --- */
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:    0.18s var(--ease);
  --t-base:    0.32s var(--ease);
  --t-slow:    0.6s var(--ease-out);

  /* --- Divers --- */
  --header-h: 72px;
  --grid-line: color-mix(in srgb, var(--text) 2.8%, transparent);
}

/* ==========================================================================
   02. Reset & base
   ========================================================================== */

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

* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
  /* Un mot trop long se coupe plutôt que de faire déborder sa boîte. */
  overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   Garde-fou anti-débordement.
   Un enfant de flex ou de grid a par défaut min-width: auto : il refuse de
   descendre sous la largeur de son contenu et déborde donc de sa carte.
   On l'autorise explicitement à rétrécir partout où une boîte contient du
   texte de longueur variable.
   -------------------------------------------------------------------------- */
.fact > div,
.contact-link > span,
.contact-primary > span,
.chrono-card__list li > span,
.chrono-card__list li,
.chrono-card__cols li,
.expertise-card__list li,
.modal__points li,
.prose ul li,
.spec-list__row dt,
.spec-list__row dd,
.stat,
.kpi,
.modal__spec { min-width: 0; }

/* Trame technique de fond, très discrète, évoque le papier millimétré */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 100% 70% at 50% 0%, #000 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 100% 70% at 50% 0%, #000 20%, transparent 80%);
}

body.no-scroll { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

button, input, textarea, select {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
}

button { cursor: pointer; }

ul, ol { list-style: none; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

strong { color: var(--text); font-weight: 600; }

::selection { background: var(--accent); color: var(--on-accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Barre de défilement */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--bg-elev), var(--text) 14%);
  border-radius: var(--r-pill);
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--accent-lo); }

/* Lien d'évitement (accessibilité clavier) */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--gutter);
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  border-radius: var(--r-sm);
  transition: top var(--t-fast);
}
.skip-link:focus { top: 1rem; }

/* ==========================================================================
   03. Utilitaires de layout
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: var(--maxw-narrow); }

.section { padding-block: var(--section-y); position: relative; }

.section--alt {
  background: linear-gradient(180deg, transparent, var(--bg-alt) 12%, var(--bg-alt) 88%, transparent);
}

.section-head { margin-bottom: clamp(2.5rem, 6vw, 4rem); }

.section-head--center { text-align: center; }
.section-head--center .section-title { margin-inline: auto; }
.section-head--center .section-lead { margin-inline: auto; }

.section-head--split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
}

/* Petit label technique au-dessus des titres */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}
/* Repère incliné blanc / accent, rappel de la livrée */
.eyebrow::before,
.section-head--center .eyebrow::after {
  content: '';
  width: 22px;
  height: 5px;
  background: linear-gradient(90deg, var(--steel) 0 55%, var(--accent) 55%);
  transform: skewX(-35deg);
}

.section-title {
  font-size: var(--fs-h2);
  max-width: 18ch;
}
.section-title .accent { color: var(--accent); }

.section-lead {
  color: var(--text-dim);
  font-size: var(--fs-lead);
  max-width: 62ch;
  margin-top: 1.25rem;
}

.text-dim { color: var(--text-dim); }
.text-mute { color: var(--text-mute); }
.nowrap { white-space: nowrap; } /* groupe à ne jamais couper (identifiant, adresse) */
.mono {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ==========================================================================
   04. Composants atomiques
   ========================================================================== */

/* --- Effet de verre réutilisable --- */
.glass {
  background: var(--glass);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--line);
}

/* --- Boutons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.95rem 1.75rem;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  /* Pas de nowrap ici : les libellés longs (navigation entre projets) doivent
     pouvoir passer sur deux lignes plutot que deborder sur mobile. */
  text-align: center;
  max-width: 100%;
  transition: transform var(--t-base), box-shadow var(--t-base),
              background var(--t-base), border-color var(--t-base), color var(--t-base);
}
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.btn--primary {
  background: var(--livery-fill);
  color: var(--on-accent);
  clip-path: var(--chamfer);
}
.btn--primary:hover { transform: translateY(-3px); }

.btn--ghost {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  box-shadow: inset 3px 0 0 var(--accent); /* liseré d'accent sur la tranche */
  color: var(--text);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.btn--ghost:hover {
  transform: translateY(-3px);
  border-color: var(--line-accent);
  background: var(--surface-hover);
}

.btn--sm { padding: 0.6rem 1.1rem; font-size: 0.78rem; }
.btn--primary.btn--sm { background: var(--livery-fill-sm); clip-path: var(--chamfer-sm); }

/* --- Lien fléché --- */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  transition: gap var(--t-fast), color var(--t-fast);
}
.link-arrow svg { width: 14px; height: 14px; transition: transform var(--t-fast); }
.link-arrow:hover { gap: 0.85rem; color: var(--accent-hi); }
.link-arrow:hover svg { transform: translateX(2px); }

/* --- Étiquettes techniques --- */
.tag {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  border: 1px solid var(--line-accent);
  color: var(--accent-hi);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  max-width: 100%;
}
.tag--steel {
  background: var(--steel-soft);
  border-color: color-mix(in srgb, var(--steel) 30%, transparent);
  color: var(--steel);
}
.tag--neutral {
  background: var(--surface);
  border-color: var(--line);
  color: var(--text-dim);
}

.tag-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }

/* --- Badge de statut --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.8rem 0.35rem 0.65rem;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 0.63rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.badge--live {
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
  color: var(--warn);
}
.badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: pulse-dot 2.4s var(--ease) infinite;
}
@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(232, 179, 57, 0.6); }
  70%  { box-shadow: 0 0 0 7px rgba(232, 179, 57, 0); }
  100% { box-shadow: 0 0 0 0 rgba(232, 179, 57, 0); }
}

/* --- Carte générique --- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2rem);
  transition: transform var(--t-base), border-color var(--t-base), background var(--t-base);
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  background: var(--surface-hover);
}

/* ==========================================================================
   05. Header & navigation
   ========================================================================== */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: background var(--t-base), border-color var(--t-base), backdrop-filter var(--t-base);
}
.header.is-scrolled {
  background: var(--glass-strong);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom-color: var(--line);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
}

/* --- Logo --- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}
.logo__mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  background: var(--livery-fill-sm);
  color: var(--on-accent);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  clip-path: var(--chamfer-sm);
}
.logo__dot { color: var(--accent); }

/* --- Navigation bureau --- */
.nav { display: flex; align-items: center; gap: 0.35rem; }

.nav__link {
  position: relative;
  padding: 0.5rem 0.85rem;
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color var(--t-fast), background var(--t-fast);
}
.nav__link:hover { color: var(--text); background: var(--surface); }
.nav__link.is-active { color: var(--accent); }
.nav__link.is-active::after {
  content: '';
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.1rem;
  height: 1.5px;
  background: var(--accent);
  border-radius: 2px;
}

.header__actions { display: flex; align-items: center; gap: 0.75rem; }
/* Libellés d'en-tête sur une seule ligne : s'ils manquent de place, c'est le
   seuil du menu burger (section 15) qu'il faut ajuster, pas le retour à la ligne. */
.logo, .nav__link, .header__actions .btn { white-space: nowrap; }

.icon-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
  color: var(--text-dim);
  border: 1px solid transparent;
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.icon-btn:hover {
  color: var(--text);
  background: var(--surface);
  border-color: var(--line);
}
.icon-btn svg { width: 18px; height: 18px; }

/* --- Bouton burger --- */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0 9px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface);
}
.burger span {
  display: block;
  height: 1.5px;
  width: 100%;
  background: var(--text);
  border-radius: 2px;
  transition: transform var(--t-base), opacity var(--t-fast);
}
.burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* --- Menu mobile --- */
.mobile-nav {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 2rem var(--gutter) 3rem;
  background: var(--glass-strong);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border-top: 1px solid var(--line);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base);
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

.mobile-nav__link {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text);
  transition: color var(--t-fast), padding-left var(--t-fast);
}
.mobile-nav__link:hover { color: var(--accent); padding-left: 0.5rem; }
.mobile-nav__link .num {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--accent);
  letter-spacing: 0.1em;
}
.mobile-nav__footer { margin-top: auto; padding-top: 2rem; display: grid; gap: 0.75rem; }

/* ==========================================================================
   06. Hero
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--header-h) + 3rem);
  padding-bottom: 4rem;
  overflow: hidden;
}

/* Livrée Asiimov : bandes diagonales blanc / accent, sous les halos et le texte */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--livery);
  opacity: 0.09;
}

/* Halos lumineux d'ambiance */
.hero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
}
.hero__glow--a {
  width: min(620px, 90vw);
  height: min(620px, 90vw);
  top: -14%;
  left: -12%;
  background: color-mix(in srgb, var(--accent) 11%, transparent);
  animation: float-slow 18s var(--ease) infinite alternate;
}
.hero__glow--b {
  width: min(520px, 80vw);
  height: min(520px, 80vw);
  bottom: -18%;
  right: -10%;
  background: color-mix(in srgb, var(--steel) 9%, transparent);
  animation: float-slow 22s var(--ease) infinite alternate-reverse;
}
@keyframes float-slow {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(40px, -30px, 0) scale(1.12); }
}

.hero__inner { position: relative; z-index: 1; width: 100%; }

.hero__status {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 1.1rem 0.5rem 0.85rem;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 2rem;
  max-width: 100%;
  flex-wrap: wrap;
}
.hero__status .ping {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  flex-shrink: 0;
}
.hero__status .ping::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--success);
  animation: ping 2s var(--ease) infinite;
}
@keyframes ping {
  0%        { transform: scale(1); opacity: 0.7; }
  75%, 100% { transform: scale(2.6); opacity: 0; }
}

.hero__title {
  font-size: var(--fs-hero);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.045em;
  margin-bottom: 1.75rem;
}
.hero__title .line { display: block; }
.hero__title .outline {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--accent);
  paint-order: stroke fill;
}

.hero__role {
  display: grid;
  gap: 0.6rem;
  max-width: 60ch;
  margin-bottom: 2.5rem;
  padding-left: 1.25rem;
  border-left: 2px solid var(--line-accent);
}
.hero__role p { font-size: var(--fs-lead); color: var(--text-dim); }
.hero__role strong { color: var(--text); font-weight: 600; }
.hero__role .org { color: var(--accent); font-weight: 600; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-bottom: 4rem;
}

/* --- Bandeau de chiffres clés --- */
.hero__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.stat {
  background: var(--bg-alt);
  padding: 1.35rem 1.25rem;
  transition: background var(--t-base);
}
.stat:hover { background: var(--bg-elev); }
.stat__value {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1;
}
.stat__value .unit { color: var(--accent); font-size: 0.65em; }
.stat__label {
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.63rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* --- Indicateur de défilement --- */
.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 1.75rem;
  transform: translateX(-50%);
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.scroll-hint__bar {
  width: 1px;
  height: 42px;
  background: linear-gradient(180deg, var(--accent), transparent);
  animation: scroll-bar 2.2s var(--ease) infinite;
}
@keyframes scroll-bar {
  0%, 100% { opacity: 0.25; transform: scaleY(0.55); transform-origin: top; }
  50%      { opacity: 1; transform: scaleY(1); transform-origin: top; }
}

/* ==========================================================================
   07. Section Expertise
   ========================================================================== */

.expertise-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.expertise-card {
  position: relative;
  padding: 2rem 1.75rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--t-base), border-color var(--t-base), background var(--t-base);
}
.expertise-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-slow);
}
.expertise-card:hover {
  transform: translateY(-6px);
  border-color: var(--line-strong);
  background: var(--surface-hover);
}
.expertise-card:hover::before { transform: scaleX(1); }

.expertise-card__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  border: 1px solid var(--line-accent);
  color: var(--accent);
  margin-bottom: 1.5rem;
}
.expertise-card__icon svg { width: 20px; height: 20px; }

.expertise-card h3 { font-size: 1.1rem; margin-bottom: 0.75rem; }
.expertise-card p { font-size: 0.9rem; color: var(--text-dim); line-height: 1.6; }

.expertise-card__list {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0.5rem;
}
.expertise-card__list li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--text-mute);
}
.expertise-card__list li::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 1px;
  background: var(--accent);
  flex-shrink: 0;
  transform: rotate(45deg);
}

/* ==========================================================================
   08. Section Projets : filtres & grille
   ========================================================================== */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
  padding-bottom: 0.25rem;
}

.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 1.15rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--t-fast), border-color var(--t-fast),
              background var(--t-fast), transform var(--t-fast);
}
.filter-btn:hover { color: var(--text); border-color: var(--line-strong); transform: translateY(-2px); }
.filter-btn.is-active {
  background: var(--livery-fill-sm);
  border-color: transparent;
  color: var(--on-accent);
  font-weight: 600;
  clip-path: var(--chamfer);
}
.filter-btn .count {
  font-size: 0.62rem;
  opacity: 0.65;
  font-variant-numeric: tabular-nums;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 1.25rem;
}

/* --- Carte projet --- */
.project {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: left;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--t-base), border-color var(--t-base),
              box-shadow var(--t-base), opacity var(--t-base);
}
.project:hover {
  transform: translateY(-6px);
  border-color: var(--line-accent);
  box-shadow: var(--shadow-md);
}

/* États du filtrage (pilotés par script.js) */
.project.is-hidden { display: none; }
.project.is-filtering { opacity: 0; transform: translateY(10px) scale(0.98); }

.project__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-elev);
}
.project__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out), filter var(--t-base);
  filter: saturate(0.85) brightness(0.9);
}
.project:hover .project__media img { transform: scale(1.06); filter: saturate(1) brightness(1); }

.project__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--bg) 85%, transparent));
  pointer-events: none;
}

/* Vignette technique de substitution (projets sans photo) */
.project__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, transparent), color-mix(in srgb, var(--steel) 6%, transparent)),
    var(--bg-elev);
}
.project__placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--text) 4.5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--text) 4.5%, transparent) 1px, transparent 1px);
  background-size: 26px 26px;
}
.project__placeholder svg {
  position: relative;
  width: 46px;
  height: 46px;
  color: var(--accent);
  opacity: 0.55;
}

.project__cat {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  z-index: 2;
  pointer-events: none;
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-sm);
  background: var(--glass-strong);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-dim);
  max-width: calc(100% - 1.8rem);
}
.project__flag {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  z-index: 2;
  pointer-events: none;
}

.project__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.4rem 1.4rem 1.5rem;
}
.project__title {
  font-size: 1.15rem;
  margin-bottom: 0.6rem;
  transition: color var(--t-fast);
}
.project:hover .project__title { color: var(--accent-hi); }

.project__desc {
  font-size: 0.875rem;
  color: var(--text-dim);
  line-height: 1.6;
  margin-bottom: 1.15rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  line-clamp: 3;
  overflow: hidden;
}

.project__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1.15rem;
  border-top: 1px solid var(--line);
}
.project__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
}
/* Étire la zone cliquable du bouton à toute la carte. */
.project__cta::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
}
.project__cta svg { width: 13px; height: 13px; transition: transform var(--t-fast); }
.project:hover .project__cta svg { transform: translate(2px, -2px); }

/* Le focus clavier tombe sur le bouton : on le rend visible sur toute la carte.
   Sans support de :has(), on garde l'anneau de focus par défaut sur le bouton. */
@supports selector(:has(*)) {
  .project__cta:focus-visible { outline: none; }
  .project:has(.project__cta:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }
}

.projects-empty {
  padding: 4rem 1rem;
  text-align: center;
  color: var(--text-mute);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ==========================================================================
   09. Modale projet
   ========================================================================== */

.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(0.75rem, 4vw, 2.5rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base), visibility var(--t-base);
}
.modal.is-open { opacity: 1; visibility: visible; }

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 5, 7, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal__panel {
  position: relative;
  width: min(860px, 100%);
  max-height: min(88svh, 900px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  transform: translateY(16px) scale(0.985);
  transition: transform var(--t-slow);
}
.modal.is-open .modal__panel { transform: translateY(0) scale(1); }

.modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--glass-strong);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line-strong);
  color: var(--text);
  transition: background var(--t-fast), transform var(--t-fast), color var(--t-fast);
}
.modal__close:hover { background: var(--accent); color: var(--on-accent); transform: rotate(90deg); }
.modal__close svg { width: 16px; height: 16px; }

.modal__media {
  position: relative;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: var(--bg-alt);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}
.modal__media img { width: 100%; height: 100%; object-fit: cover; }
.modal__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, var(--bg-elev));
}

.modal__body { padding: clamp(1.5rem, 4vw, 2.5rem); }

.modal__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.modal__title { font-size: clamp(1.5rem, 4vw, 2.1rem); margin-bottom: 1rem; }

.modal__lead {
  font-size: var(--fs-lead);
  color: var(--text-dim);
  margin-bottom: 1.75rem;
}

.modal__specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  margin: 1.75rem 0;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.modal__spec { background: var(--bg-alt); padding: 1rem 1.1rem; }
.modal__spec dt {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 0.4rem;
}
.modal__spec dd {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text);
  overflow-wrap: break-word;
}

.modal__points { display: grid; gap: 0.75rem; margin: 1.5rem 0; }
.modal__points li {
  display: flex;
  gap: 0.75rem;
  font-size: 0.92rem;
  color: var(--text-dim);
  line-height: 1.6;
}
.modal__points li::before {
  content: '';
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 0.6rem;
  background: var(--accent);
  transform: rotate(45deg);
}

.modal__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

/* ==========================================================================
   10. Section Parcours (chronologie)
   --------------------------------------------------------------------------
   Deux colonnes de part et d'autre d'un axe central : formation à gauche,
   expérience à droite et décalée vers le bas, comme sur la version précédente
   du site. Repasse en pile simple sous 860 px.
   ========================================================================== */

.chrono {
  --chrono-gap: clamp(2rem, 5vw, 4rem);
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--chrono-gap);
}

/* Axe vertical central */
.chrono::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(180deg,
    transparent,
    var(--accent) 6%,
    var(--line-strong) 45%,
    transparent);
}

.chrono__col { display: grid; gap: 1.5rem; align-content: start; }

/* Décalage de la colonne expérience, pour l'alternance visuelle */
.chrono__col--experience { margin-top: clamp(2rem, 9vw, 6.5rem); }

.chrono__head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.chrono__head svg { width: 18px; height: 18px; color: var(--accent); }

/* Colonne formation : intitulé aligné vers l'axe, donc à droite */
.chrono__col--formation .chrono__head {
  flex-direction: row-reverse;
  justify-content: flex-start;
}

/* --- Carte de chronologie --- */
.chrono-card {
  position: relative;
  padding: clamp(1.6rem, 3vw, 2rem) clamp(1.5rem, 3vw, 1.9rem);
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.chrono-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}
.chrono-card--current {
  border-color: var(--line-accent);
  box-shadow: 0 28px 60px -34px var(--accent-glow);
}
.chrono-card--past { opacity: 0.72; }
.chrono-card--past:hover { opacity: 1; }

/* Pastille flottante « Formation actuelle » / « Poste actuel » */
.chrono-card__badge {
  position: absolute;
  top: -0.72rem;
  padding: 0.32rem 0.9rem;
  background: var(--livery-fill-sm);
  color: var(--on-accent);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  clip-path: var(--chamfer-sm);
}
.chrono__col--formation .chrono-card__badge { right: 1.6rem; }
.chrono__col--experience .chrono-card__badge { left: 1.6rem; }

.chrono-card__date {
  display: block;
  margin-bottom: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
}
.chrono-card--past .chrono-card__date { color: var(--text-mute); }

.chrono-card h4 {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  margin-bottom: 0.4rem;
}
.chrono-card__org {
  margin-bottom: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.09em;
  color: var(--text-dim);
}
.chrono-card__org--strong { color: var(--accent-hi); }
.chrono-card > p { font-size: 0.88rem; color: var(--text-dim); line-height: 1.65; }
.chrono-card > p + p { margin-top: 0.6rem; }

.chrono-card__list { display: grid; gap: 0.6rem; margin-top: 0.9rem; }
.chrono-card__list li {
  display: flex;
  gap: 0.65rem;
  font-size: 0.86rem;
  color: var(--text-dim);
  line-height: 1.55;
}
.chrono-card__list li::before {
  content: '';
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  margin-top: 0.55rem;
  background: var(--accent);
  transform: rotate(45deg);
}

/* Liste compacte sur deux colonnes (matières, axes de formation) */
.chrono-card__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.5rem 1.25rem;
  margin-top: 0.9rem;
}
.chrono-card__cols li {
  display: flex;
  gap: 0.55rem;
  font-size: 0.8rem;
  color: var(--text-dim);
  line-height: 1.45;
}
.chrono-card__cols li::before {
  content: '';
  flex-shrink: 0;
  width: 4px;
  height: 4px;
  margin-top: 0.5rem;
  background: var(--accent);
  transform: rotate(45deg);
}

/* Encart secondaire dans une carte (semestre à l'international) */
.chrono-card__sub {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.chrono-card__sub-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--steel);
}
.chrono-card__sub-label svg { width: 13px; height: 13px; }
.chrono-card__sub p { font-size: 0.84rem; color: var(--text-dim); line-height: 1.6; }
.chrono-card__sub strong { color: var(--text); }

/* Traits de liaison entre chaque carte et l'axe central */
@media (min-width: 861px) {
  .chrono { --chrono-half: calc(var(--chrono-gap) / 2); }
  .chrono-card::after {
    content: '';
    position: absolute;
    top: 2.4rem;
    width: var(--chrono-half);
    height: 1px;
    background: var(--line-strong);
  }
  .chrono__col--formation .chrono-card::after { right: calc(-1 * var(--chrono-half)); }
  .chrono__col--experience .chrono-card::after { left: calc(-1 * var(--chrono-half)); }
  .chrono-card--current::after { background: var(--accent); }
}

.parcours-col__title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.parcours-col__title svg { width: 16px; height: 16px; color: var(--accent); }

.timeline {
  position: relative;
  display: grid;
  gap: 1rem;
  padding-left: 1.75rem;
}
.timeline::before {
  content: '';
  position: absolute;
  top: 0.5rem;
  bottom: 0.5rem;
  left: 5px;
  width: 1px;
  background: linear-gradient(180deg, var(--accent), var(--line) 40%, transparent);
}

.tl-item { position: relative; }
.tl-item::before {
  content: '';
  position: absolute;
  top: 1.6rem;
  left: calc(-1.75rem + 1px);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--line-strong);
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.tl-item:hover::before { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.tl-item--current::before { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }

.tl-card {
  padding: 1.5rem 1.6rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--t-base), background var(--t-base), transform var(--t-base);
}
.tl-item:hover .tl-card {
  border-color: var(--line-strong);
  background: var(--surface-hover);
  transform: translateX(4px);
}
.tl-item--current .tl-card { border-color: var(--line-accent); }

.tl-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}
.tl-card__date {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
}
.tl-card h4 { font-size: 1.05rem; margin-bottom: 0.25rem; }
.tl-card__org {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-bottom: 0.75rem;
}
.tl-card p { font-size: 0.88rem; color: var(--text-dim); line-height: 1.6; }
.tl-card ul { display: grid; gap: 0.5rem; margin-top: 0.85rem; }
.tl-card ul li {
  display: flex;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--text-dim);
  line-height: 1.55;
}
.tl-card ul li::before {
  content: '';
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  margin-top: 0.55rem;
  background: var(--accent);
  transform: rotate(45deg);
}

/* ==========================================================================
   11. Section À propos
   ========================================================================== */

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 6vw, 4.5rem);
  align-items: center;
}

.about-portrait { position: relative; }
.about-portrait__frame {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line-strong);
}
.about-portrait__frame img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.05);
}
.about-portrait__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--bg) 60%, transparent));
}
.about-portrait::before {
  content: '';
  position: absolute;
  inset: -14px;
  z-index: -1;
  border-radius: calc(var(--r-xl) + 12px);
  background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--steel) 16%, transparent));
  filter: blur(36px);
}

.about-portrait__chip {
  position: absolute;
  right: -0.85rem;
  bottom: -0.85rem;
  padding: 1rem 1.35rem;
  border-radius: var(--r-md);
  background: var(--glass-strong);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-md);
}
.about-portrait__chip .value {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}
.about-portrait__chip .label {
  margin-top: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.about-text p { color: var(--text-dim); font-size: var(--fs-lead); }
.about-text p + p { margin-top: 1rem; }

.about-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
  gap: 0.85rem;
  margin: 2rem 0;
}
.fact {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 0.95rem 1.05rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.fact:hover { border-color: var(--line-strong); background: var(--surface-hover); }
.fact svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; margin-top: 3px; }
.fact__label {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.fact__value { font-size: 0.88rem; font-weight: 500; color: var(--text); }
.fact > div { flex: 1; }

/* ==========================================================================
   12. Contact & footer
   ========================================================================== */

.contact-panel {
  position: relative;
  padding: clamp(2.25rem, 6vw, 4rem);
  border-radius: var(--r-xl);
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--line-strong);
  overflow: hidden;
}
.contact-panel::before {
  content: '';
  position: absolute;
  width: 460px;
  height: 460px;
  top: -55%;
  right: -12%;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  filter: blur(110px);
  pointer-events: none;
}
.contact-panel__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}

/* --- Contact prioritaire : l'email professionnel --- */
.contact-primary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: clamp(1.4rem, 3vw, 1.75rem);
  margin-bottom: 0.75rem;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 15%, transparent), color-mix(in srgb, var(--accent) 4%, transparent));
  border: 1px solid var(--line-accent);
  transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.contact-primary:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: var(--shadow-accent);
}
.contact-primary__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  background: var(--livery-fill);
  color: var(--on-accent);
  flex-shrink: 0;
  clip-path: var(--chamfer);
}
.contact-primary__icon svg { width: 22px; height: 22px; }
.contact-primary__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.3rem;
}
.contact-primary__value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(0.98rem, 2.1vw, 1.2rem);
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
  word-break: break-word;
}
.contact-primary__hint {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--text-mute);
}
.contact-primary__arrow { margin-left: auto; color: var(--accent); flex-shrink: 0; }
.contact-primary__arrow svg { width: 17px; height: 17px; transition: transform var(--t-fast); }
.contact-primary:hover .contact-primary__arrow svg { transform: translate(3px, -3px); }

/* Mention discrète du téléphone, en retrait des canaux principaux */
.contact-aside {
  margin-top: 1.35rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text-mute);
}
.contact-aside a {
  color: var(--text-dim);
  border-bottom: 1px solid var(--line-strong);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.contact-aside a:hover { color: var(--accent); border-color: var(--accent); }

.contact-links { display: grid; gap: 0.75rem; }

.contact-link {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.15rem 1.35rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: transform var(--t-base), border-color var(--t-base), background var(--t-base);
}
.contact-link:hover {
  transform: translateX(5px);
  border-color: var(--line-accent);
  background: var(--surface-hover);
}
.contact-link__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  border: 1px solid var(--line-accent);
  color: var(--accent);
  flex-shrink: 0;
  transition: background var(--t-base), color var(--t-base);
}
.contact-link:hover .contact-link__icon { background: var(--accent); color: var(--on-accent); }
.contact-link__icon svg { width: 18px; height: 18px; }
.contact-link__label {
  display: block;
  margin-bottom: 0.2rem;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.contact-link__value {
  display: block;
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text);
  word-break: break-word;
}
.contact-link__arrow {
  margin-left: auto;
  color: var(--text-mute);
  transition: color var(--t-fast), transform var(--t-fast);
}
.contact-link__arrow svg { width: 15px; height: 15px; }
.contact-link:hover .contact-link__arrow { color: var(--accent); transform: translateX(3px); }

/* --- Pied de page --- */
.footer {
  border-top: 1px solid var(--line);
  background: var(--bg-alt);
  padding-block: 3.5rem 2.5rem;
}
.footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--line);
}
.footer__brand { max-width: 34ch; }
.footer__brand p { margin-top: 1rem; font-size: 0.88rem; color: var(--text-mute); }

.footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, auto));
  gap: 2.5rem 3.5rem;
}
.footer__col h5 {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 1rem;
}
.footer__col ul { display: grid; gap: 0.6rem; }
.footer__col a {
  font-size: 0.88rem;
  color: var(--text-dim);
  transition: color var(--t-fast), padding-left var(--t-fast);
}
.footer__col a:hover { color: var(--accent); padding-left: 3px; }

.footer__socials { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 1.5rem; }
.social {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text-dim);
  transition: color var(--t-fast), background var(--t-fast),
              border-color var(--t-fast), transform var(--t-fast);
}
.social:hover {
  color: var(--accent);
  border-color: var(--line-accent);
  background: var(--accent-soft);
  transform: translateY(-3px);
}
.social svg { width: 17px; height: 17px; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 2rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--text-mute);
}
/* Pages détail : bouton CV + retour à l'accueil, côte à côte */
.footer__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.footer__note {
  margin-top: 1.25rem;
  max-width: 70ch;
  font-size: 0.68rem;
  line-height: 1.7;
  color: #4a505a;
}
.footer__note strong { color: var(--text-mute); }

/* ==========================================================================
   13. Pages détail projet
   ========================================================================== */

.subpage { padding-top: var(--header-h); }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  padding-block: 1.75rem 0;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.breadcrumb a { transition: color var(--t-fast); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .sep { opacity: 0.4; }
.breadcrumb [aria-current] { color: var(--text-dim); }

.project-hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 5vw, 3.5rem); }
.project-hero__meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.project-hero h1 {
  font-size: clamp(2.25rem, 6.5vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  margin-bottom: 1.5rem;
  max-width: 16ch;
}
.project-hero__lead {
  font-size: clamp(1.02rem, 1.8vw, 1.25rem);
  color: var(--text-dim);
  max-width: 68ch;
}
.project-hero__context {
  margin-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--text-mute);
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.kpi { background: var(--bg-alt); padding: 1.6rem 1.4rem; transition: background var(--t-base); }
.kpi:hover { background: var(--bg-elev); }
.kpi__value {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--accent);
}
.kpi__value--text { font-size: clamp(1.15rem, 2.3vw, 1.5rem); line-height: 1.2; }
.kpi__label {
  margin-top: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text);
}
.kpi__sub { margin-top: 0.25rem; font-size: 0.72rem; color: var(--text-mute); }

.prose { max-width: 72ch; }
.prose h2 { font-size: var(--fs-h3); margin-bottom: 1rem; }
.prose h3 { font-size: 1.05rem; margin: 2rem 0 0.75rem; color: var(--text); }
.prose p { color: var(--text-dim); margin-bottom: 1rem; line-height: 1.75; }
.prose ul { display: grid; gap: 0.7rem; margin: 1.25rem 0; }
.prose ul li { position: relative; padding-left: 1.125rem; color: var(--text-dim); line-height: 1.65; }
/* Puce hors du flux : le texte reste un seul bloc, même quand il commence par du <strong> */
.prose ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62rem;
  width: 6px;
  height: 6px;
  background: var(--accent);
  transform: rotate(45deg);
}

.callout {
  padding: 1.35rem 1.6rem;
  margin: 1.75rem 0;
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--accent-soft);
}
.callout__title {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
.callout p { color: var(--text-dim); font-size: 0.92rem; margin: 0; }

.split-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.spec-list {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.spec-list__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.95rem 1.2rem;
  background: var(--bg-alt);
}
.spec-list__row dt {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.spec-list__row dd {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  text-align: right;
  overflow-wrap: break-word;
}

/* --- Galerie --- */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0.75rem;
}
.gallery__item {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-elev);
}
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85) brightness(0.92);
  transition: transform var(--t-slow), filter var(--t-base);
}
.gallery__item:hover img { transform: scale(1.05); filter: saturate(1) brightness(1); }
.gallery__item--wide { grid-column: span 2; aspect-ratio: 16 / 9; }
/* Variante deux colonnes : galerie courte, vignettes plus grandes */
.gallery--duo { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }

/* --- Navigation inter-projets --- */
.project-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  padding-block: 2.5rem;
  border-top: 1px solid var(--line);
}

/* ==========================================================================
   14. Animations au scroll
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal='left']  { transform: translateX(-28px); }
[data-reveal='right'] { transform: translateX(28px); }
[data-reveal='zoom']  { transform: scale(0.96); }

[data-reveal].is-visible { opacity: 1; transform: none; }

/* Aucune animation si l'utilisateur préfère un mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ==========================================================================
   15. Responsive
   ========================================================================== */

@media (max-width: 1024px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-portrait { max-width: 380px; }
  .contact-panel__inner { grid-template-columns: 1fr; }
  .hero__stats { grid-template-columns: repeat(2, 1fr); }
}

/* En-tête complet (logo, 5 liens, 4 boutons) : ~1 130 px nécessaires. En dessous,
   les liens passent dans le menu burger ; les boutons restent jusqu'à 860 px.
   Seuil repris dans script.js (fermeture du menu au redimensionnement). */
@media (max-width: 1150px) {
  .nav { display: none; }
  .burger { display: flex; }
}

@media (max-width: 860px) {
  :root { --header-h: 64px; }
  .header__actions .icon-btn--desktop { display: none; }
  .header__actions .btn { display: none; }
  .footer__top { flex-direction: column; }

  /* Chronologie : une seule colonne, axe et décalage supprimés */
  .chrono { grid-template-columns: 1fr; gap: 2.5rem; }
  .chrono::before { display: none; }
  .chrono__col--experience { margin-top: 0; }
  .chrono__col--formation .chrono__head { flex-direction: row; justify-content: flex-start; }
  .chrono__col--formation .chrono-card__badge,
  .chrono__col--experience .chrono-card__badge { left: 1.6rem; right: auto; }
}

@media (max-width: 620px) {
  .hero { min-height: auto; padding-top: calc(var(--header-h) + 4rem); padding-bottom: 5rem; }
  .hero__actions .btn { flex: 1 1 100%; }
  .scroll-hint { display: none; }
  .projects-grid { grid-template-columns: 1fr; }
  .gallery__item--wide { grid-column: span 1; aspect-ratio: 4 / 3; }
  .about-portrait__chip { right: 0.75rem; bottom: -0.5rem; }
  .modal__media { aspect-ratio: 16 / 10; }
  .filters {
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .filters::-webkit-scrollbar { display: none; }

  /* Cartes de contact : icône au-dessus du texte, flèche dans le coin. En ligne,
     il ne restait que ~90 px pour l'adresse, coupée en plein mot ; les <wbr> du
     HTML placent désormais la coupure (avant le @, après /in/). */
  .contact-primary, .contact-link { position: relative; flex-direction: column; align-items: flex-start; gap: 0.9rem; }
  .contact-primary__arrow, .contact-link__arrow { position: absolute; top: 1.25rem; right: 1.25rem; margin: 0; }
}

@media print {
  .header, .mobile-nav, .modal, .scroll-hint, .filters { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ==========================================================================
   16. Mode clair
   --------------------------------------------------------------------------
   Le site est sombre par défaut. Le bouton soleil / lune du header pose
   data-mode="clair" sur <html> (module 09 de script.js) : le blanc et le noir
   de la livrée Asiimov s'inversent, fond clair et aplats noirs tranchés
   d'orange. L'orange est assombri pour rester lisible en texte sur fond
   clair. Surfaces, bordures, trame, halos et livrée découlent de ces valeurs.
   ========================================================================== */

:root[data-mode='clair'] {
  --bg:        #f5f5f3;
  --bg-alt:    #ecece9;
  --bg-elev:   #ffffff;

  --text:      #111214;
  --text-dim:  #474b52;
  --text-mute: #6b7078;

  --accent:    #bf4d00;
  --accent-hi: #9c3d00;
  --accent-lo: #e0651a;
  --on-accent: #ffffff;
  --steel:     #141416;
  --warn:      #8a6100;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 12px 32px -12px rgba(0, 0, 0, 0.18);
  --shadow-lg: 0 32px 64px -24px rgba(0, 0, 0, 0.22);
}

/* Bouton du header : icône du mode vers lequel il bascule */
.mode-toggle__moon { display: none; }
:root[data-mode='clair'] .mode-toggle__sun  { display: none; }
:root[data-mode='clair'] .mode-toggle__moon { display: block; }