/* =========================================================
   PORTFOLIO — NAZIM MELLOUK
   Design System v3 — Unified Identity
   Inspiré du carrousel : bleu #2563EB, vert #22C55E, blanc,
   formes organiques, cartes bleues teintées, profondeur légère.
   WCAG 2.2 AA conforme.
   ========================================================= */

/* ─── RESET & BASE ─── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {

  /* ── 1. PALETTE PRIMITIVE ─────────────────────────────── */

  /* Primaire — bleu marque */
  --color-primary:        #2563EB;
  --color-primary-dark:   #1D4ED8;
  --color-primary-darker: #1E3A8A;
  --color-primary-light:  #60A5FA;
  --color-primary-rgb:    37, 99, 235;

  /* Accent — vert vif (max 2 usages décoratifs : stickers process + footer) */
  --color-green:          #22C55E;
  --color-green-dark:     #16A34A;
  --color-green-rgb:      34, 197, 94;

  /* Accent chaud — orange/ambre (bouton CTA disponibilité uniquement) */
  --color-accent:         #F59E0B;
  --color-accent-dark:    #D97706;

  /* États */
  --color-success:        #15803D;
  --color-error:          #B91C1C;
  --color-info:           #0284C7;

  /* ── 2. PALETTE SÉMANTIQUE ────────────────────────────── */

  /* Texte */
  --color-text:           #1E293B;
  --color-text-muted:     #475569;
  --color-text-light:     #64748B;
  --color-text-on-dark:   #ffffff;

  /* Surfaces (mode clair) */
  --color-bg:             #FFFFFF;   /* fond de page */
  --color-bg-alt:         #F4F7FF;   /* surfaces secondaires, tags, champs */
  --color-bg-soft:        #F4F7FF;   /* sections alternées (=bg-alt, alias unifié) */
  --color-bg-raised:      #FFFFFF;   /* cartes et éléments surélevés */
  --color-bg-dark:        #0F172A;   /* section accessibilité */

  /* Bordures */
  --color-border:         rgba(37, 99, 235, 0.10);  /* toutes les cartes */
  --color-border-subtle:  rgba(37, 99, 235, 0.06);  /* séparateurs discrets */
  --color-border-dark:    rgba(255, 255, 255, 0.08); /* bordures sur fond dark */
  --color-border-input:   #DCE7F5;                   /* champs formulaire (valeur fixe) */

  /* Gradient (usage RÉSERVÉ : hero + footer = bookends visuels) */
  --gradient-atmosphere: linear-gradient(135deg, #E0FBF0 0%, #EBF4FF 100%);

  /* ── 3. TYPOGRAPHIE ───────────────────────────────────── */

  --font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Échelle taille */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */

  /* Tokens sémantiques typographie */
  --font-size-h1:      clamp(1.75rem, 7.5vw, 3rem);
  --font-size-h2:      var(--text-4xl);
  --font-size-h3:      var(--text-xl);
  --font-size-eyebrow: var(--text-xs);
  --font-size-body:    var(--text-base);
  --font-size-caption: var(--text-sm);

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-black:    800;

  --line-height-heading: 1.15;
  --line-height-body:    1.7;
  --line-height-relaxed: 1.8;

  --letter-spacing-tighter: -0.03em;
  --letter-spacing-tight:   -0.02em;
  --letter-spacing-normal:   0;
  --letter-spacing-wide:     0.06em;
  --letter-spacing-wider:    0.1em;

  /* ── 4. ESPACEMENTS ───────────────────────────────────── */

  /* Échelle primitive (rem) */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 3.5rem;   /* section padding vertical (réduit de 5rem → 3.5rem) */
  --space-24: 4.5rem;   /* hero padding-bottom */

  /* Tokens sémantiques espacement */
  --section-padding:    var(--space-20);  /* 3.5rem — rythme vertical entre sections */
  --clip-h:             2.5rem; /* hauteur fixe de la coupe diagonale (indépendante du padding) */
  --section-header-gap: var(--space-8);   /* 2rem — espace en-tête → contenu */
  --card-padding:       var(--space-6);   /* 1.5rem — padding interne carte standard */
  --card-gap:           var(--space-6);   /* 1.5rem — gap entre cartes */
  --component-gap:      var(--space-4);   /* 1rem — espacement intra-composant */

  /* ── 5. RAYONS ────────────────────────────────────────── */

  /* Échelle primitive */
  --radius-sm:   0.375rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-full: 9999px;

  /* Tokens sémantiques rayon (= règle unique à appliquer à chaque type) */
  --radius-card:  var(--radius-xl);   /* toutes les cartes → 1rem */
  --radius-btn:   var(--radius-full); /* tous les boutons → pill */
  --radius-icon:  50%;                /* tous les conteneurs d'icônes → cercle parfait */
  --radius-badge: var(--radius-full); /* tous les badges/tags/pills → pill */
  --radius-input: var(--radius-md);   /* champs de formulaire → 0.5rem */

  /* ── 6. OMBRES ────────────────────────────────────────── */

  /* Base neutres (navigation, modals, éléments UI) */
  --shadow-sm: 0 1px 2px rgba(30, 41, 59, 0.04);
  --shadow-md: 0 4px 10px -2px rgba(30, 41, 59, 0.08),
               0 2px 4px -1px rgba(30, 41, 59, 0.04);

  /* Cartes — teintées bleu pour appartenir au même univers graphique */
  --shadow-card:        0 2px 12px rgba(37, 99, 235, 0.06);
  --shadow-card-hover:  0 12px 40px rgba(37, 99, 235, 0.14);

  /* Bouton primaire au hover */
  --shadow-btn-primary: 0 4px 14px rgba(37, 99, 235, 0.35);

  /* Éléments flottants (nav pill, tooltips) */
  --shadow-float: 0 8px 32px rgba(37, 99, 235, 0.10);

  /* ── 7. SYSTÈME DE CARTES ─────────────────────────────── */

  --card-bg:             var(--color-bg-raised);
  --card-border:         1px solid var(--color-border);
  --card-radius:         var(--radius-card);
  --card-shadow:         var(--shadow-card);
  --card-shadow-hover:   var(--shadow-card-hover);
  --card-transform-hover: translateY(-3px);

  /* ── 8. SYSTÈME D'ICÔNES ──────────────────────────────── */

  --icon-container-size:   48px;
  --icon-container-bg:     rgba(37, 99, 235, 0.08);
  --icon-container-color:  var(--color-primary);
  --icon-container-radius: 50%;  /* toujours cercle = cohérence avec brand badges */
  --icon-size-sm:          18px;
  --icon-size-md:          20px;
  --icon-size-lg:          22px;
  --icon-stroke:           1.75;

  /* ── 9. SYSTÈME DE BOUTONS ────────────────────────────── */

  --btn-height:        44px;            /* minimum WCAG (zone de clic tactile) */
  --btn-padding:       0.75rem 1.5rem;
  --btn-padding-sm:    0.5rem 1rem;
  --btn-radius:        var(--radius-btn);
  --btn-font-size:     var(--text-sm);
  --btn-font-weight:   var(--font-weight-semibold);
  --btn-shadow-hover:  var(--shadow-btn-primary);
  --btn-transition:    background-color var(--transition-fast),
                       color var(--transition-fast),
                       border-color var(--transition-fast),
                       transform var(--transition-fast),
                       box-shadow var(--transition-fast);

  /* ── 10. GRILLE ET RYTHME ─────────────────────────────── */

  --grid-gap:    var(--card-gap);   /* 1.5rem — gap par défaut entre cartes */
  --grid-gap-lg: var(--space-8);   /* 2rem — grids nécessitant plus de respiration */

  /* ── 11. TRANSITIONS ──────────────────────────────────── */

  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-card:   transform var(--transition-base),
                       box-shadow var(--transition-base);

  /* ── 12. ÉLÉMENTS FLOTTANTS (a11y toggle, back-to-top, carousel) ── */

  /* Un seul composant visuel pour tous les boutons flottants */
  --float-size:           44px;
  --float-bg:             var(--color-bg);
  --float-color:          var(--color-primary);
  --float-border:         1px solid rgba(37, 99, 235, 0.15);
  --float-radius:         var(--radius-full);
  --float-shadow:         var(--shadow-float);
  --float-hover-bg:       var(--color-primary);
  --float-hover-color:    #ffffff;
  --float-transition:     background-color var(--transition-fast),
                          color var(--transition-fast),
                          box-shadow var(--transition-fast),
                          opacity var(--transition-base),
                          transform var(--transition-base),
                          visibility var(--transition-base);

  /* ── 13. LAYOUT ──────────────────────────────────────── */

  --container-max:    1200px;
  --header-height:    68px;          /* légèrement réduit — header plus aéré */
  --fixed-offset:     var(--header-height);  /* breadcrumb supprimé *

  /* Taille texte dynamique (panneau accessibilité) */
  --user-font-scale: 1;
}

/* ─── MODE SOMBRE (activation manuelle via panneau accessibilité) ─── */
.dark-mode {
  /* Surfaces */
  --color-bg:          #1E293B;
  --color-bg-alt:      #1A2438;
  --color-bg-soft:     #1A2438;
  --color-bg-raised:   #25344A;

  /* Texte */
  --color-text:        #F1F5F9;
  --color-text-muted:  #CBD5E1;
  --color-text-light:  #94A3B8;

  /* Bordures — légèrement claires sur fond sombre */
  --color-border:        rgba(255, 255, 255, 0.10);
  --color-border-subtle: rgba(255, 255, 255, 0.05);
  --color-border-input:  #3C4D66;

  /* Primaire — adapté dark mode */
  --color-primary:        #3B82F6;
  --color-primary-dark:   #93C5FD;   /* clair → texte lisible sur fond sombre */
  --color-primary-light:  #BFDBFE;
  /* --color-primary-darker reste #1E3A8A (navy profond) :
     la stat-card et la availability-card l'utilisent comme fond
     et ont besoin qu'il reste sombre pour que le texte blanc passe */

  /* Float buttons en dark */
  --float-bg:          #25344A;
  --float-color:       #93C5FD;
  --float-border:      1px solid rgba(255, 255, 255, 0.10);

  /* Cartes */
  --card-bg:           var(--color-bg-raised);
  --card-border:       1px solid var(--color-border);
  --card-shadow:       0 2px 12px rgba(0, 0, 0, 0.30);
  --card-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.45);

  /* Icônes */
  --icon-container-bg:    rgba(96, 165, 250, 0.14);
  --icon-container-color: #93C5FD;
}

/* ════════════════════════════════════════════════════════
   DARK MODE — HERO & HEADER (correctifs complets)
   Problème : texte clair sur fond clair = illisible.
   Fix : fond sombre explicite + toutes les couleurs adaptées.
   ════════════════════════════════════════════════════════ */

/* ── Hero : fond sombre explicite ── */
.dark-mode #hero {
  background:
    radial-gradient(700px circle at 80% 25%, rgba(59, 130, 246, 0.12), transparent 60%),
    linear-gradient(135deg, #040E1A 0%, #06121F 100%);
}

/* ── Logo dans le header sur fond sombre ── */
.dark-mode .logo-first {
  color: #FFFFFF;
}
.dark-mode .logo-last {
  color: var(--color-primary-light); /* #93C5FD */
}
.dark-mode .logo-tagline {
  color: rgba(255, 255, 255, 0.50);
}

/* ── Nav pill sur hero sombre ── */
.dark-mode #main-nav {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
}
.dark-mode #nav-links a {
  color: rgba(255, 255, 255, 0.75);
}
.dark-mode #nav-links a[aria-current="true"] {
  background: var(--color-primary);
  color: #ffffff;
}
.dark-mode #nav-links a:hover:not([aria-current="true"]) {
  background: rgba(255, 255, 255, 0.10);
  color: #ffffff;
}

/* ── Titre hero ── */
.dark-mode #hero-heading {
  color: #FFFFFF;
}
.dark-mode .hero-accent {
  color: var(--color-primary-light);
}

/* ── Sous-titre hero ── */
.dark-mode .hero-sub {
  color: rgba(255, 255, 255, 0.72);
}

/* ── Eyebrow pills (Alternance M2, Île-de-France, Septembre 2026) ── */
.dark-mode .hero-eyebrow-item {
  background: rgba(59, 130, 246, 0.18);
  color: #BFDBFE;  /* très clair pour contraste sur fond sombre */
  border-color: rgba(59, 130, 246, 0.30);
}

/* ── Tech tags (React, PHP, Kotlin…) ── */
.dark-mode .hero-tags li {
  background: rgba(59, 130, 246, 0.12);
  color: #BFDBFE;
  border-color: rgba(59, 130, 246, 0.22);
}

/* ── Bouton "Me contacter" (ghost) sur fond sombre ── */
.dark-mode .btn-ghost {
  color: rgba(255, 255, 255, 0.78);
  border-color: rgba(255, 255, 255, 0.28);
}
.dark-mode .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.10);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.50);
}

/* ── Bouton outline sur fond sombre ── */
.dark-mode .btn-outline {
  color: var(--color-primary-light);
  border-color: var(--color-primary-light);
}
.dark-mode .btn-outline:hover {
  background: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
}

/* ── Badge "Disponible" ── */
.dark-mode .hero-badge {
  background: rgba(30, 41, 59, 0.90);
  border-color: rgba(255, 255, 255, 0.14);
  color: #4ADE80;
}

/* ── Sticker nom ── */
/* Sticker has dark background already, stays fine */

/* ── Hamburger icon (mobile nav toggle) ── */
.dark-mode .hamburger,
.dark-mode .hamburger::before,
.dark-mode .hamburger::after {
  background-color: #FFFFFF;
}

/* ── Header scrolled en dark — déjà sombre, vérifier lisibilité ── */
.dark-mode #site-header.scrolled {
  background: rgba(4, 14, 26, 0.95);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* ── TYPE A en dark : atmosphère sombre (about, process, projects-extra, education, contact) ── */
.dark-mode #about,
.dark-mode #process,
.dark-mode #projects-extra,
.dark-mode #education,
.dark-mode #contact {
  background:
    radial-gradient(700px circle at 85% 12%, rgba(59, 130, 246, 0.08), transparent 62%),
    radial-gradient(450px circle at 6% 88%,  rgba(34, 197, 94, 0.05),  transparent 58%),
    linear-gradient(135deg, #061912 0%, #08101E 100%);
}

/* ── TYPE B en dark : bleu-nuit (skills, projects, accessibility, availability) ── */
.dark-mode #skills,
.dark-mode #projects,
.dark-mode #accessibility,
.dark-mode #availability {
  background:
    radial-gradient(550px circle at 15% 20%, rgba(59, 130, 246, 0.06), transparent 60%),
    radial-gradient(380px circle at 90% 80%, rgba(59, 130, 246, 0.04), transparent 55%),
    linear-gradient(160deg, #132035 0%, #0D1828 100%);
}

/* ── Clips TYPE B en dark ── */
.dark-mode #skills::before,
.dark-mode #projects::before,
.dark-mode #accessibility::before,
.dark-mode #availability::before {
  background: #132035 !important;
}
.dark-mode #skills::after,
.dark-mode #projects::after,
.dark-mode #accessibility::after,
.dark-mode #availability::after {
  background: #0D1828 !important;
}

/* ── Clips TYPE A en dark : var(--color-bg) = #1E293B s'adapte automatiquement ──
   (about::after, process::before/after, projects-extra::before/after,
    education::before/after, contact::before/after = var(--color-bg) → OK en dark) */

/* ── Cartes bleues : garder un fond sombre en dark mode ──
   La stat-card et la availability-card utilisent var(--color-primary-darker) dans
   leur dégradé. Sans override explicite, si primary-darker change en dark mode,
   les fonds deviennent trop clairs → texte semi-transparent échoue WCAG. */

.dark-mode .a11y-stat-card {
  background: linear-gradient(145deg, #0D1F5C 0%, #1E3A8A 100%);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.50);
}

.dark-mode .availability-card {
  background: linear-gradient(145deg, #0D1F5C 0%, #1D4ED8 100%);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.40);
}

/* Bouton primaire dans la carte disponibilité en dark :
   fond blanc → texte doit être foncé (non le primary-dark = #93C5FD = trop clair) */
.dark-mode .availability-card .btn-primary {
  color: #1E3A8A; /* navy : 12.4:1 sur blanc ✓ */
}

/* ── TYPE A clips dark : var(--color-bg) = #1E293B → s'adapte automatiquement ──
   Les pseudo-éléments ::before / ::after des sections TYPE A utilisent
   var(--color-bg) comme background. Ce token est défini à #1E293B en dark-mode,
   donc la transition dark est correcte sans règle supplémentaire. */

/* ── Composants qui n'héritent pas des tokens ── */
.dark-mode .skill-group,
.dark-mode .project-card,
.dark-mode .process-card,
.dark-mode .a11y-feature,
.dark-mode .a11y-tools {
  background: var(--color-bg-raised);
  border-color: var(--color-border);
}

.dark-mode .a11y-tools {
  box-shadow: none;
}

.dark-mode .timeline-current .timeline-content {
  background: var(--color-bg-raised);
  border-color: var(--color-border);
}

.dark-mode .timeline-dot {
  background: var(--color-bg-alt);
  border-color: var(--color-border-input);
  box-shadow: 0 0 0 4px var(--color-bg-alt);
}

.dark-mode .timeline-current .timeline-dot {
  background: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15), 0 4px 12px rgba(59, 130, 246, 0.25);
}

.dark-mode .hero-badge {
  background: var(--color-bg-alt);
  border-color: var(--color-border);
  color: var(--color-success);
}

.dark-mode .contact-link {
  color: var(--color-text);
  border-left-color: var(--color-border-input);
}

.dark-mode .contact-link:hover {
  border-left-color: var(--color-primary);
}

.dark-mode .contact-link strong {
  color: var(--color-text);
}

.dark-mode .contact-link span {
  color: var(--color-text-muted);
}

.dark-mode .process-quote {
  background: rgba(255, 255, 255, 0.04);
  border-left-color: var(--color-primary-light);
  color: var(--color-text-muted);
}

.dark-mode .process-num {
  background: var(--color-bg-alt);
  border-color: rgba(59, 130, 246, 0.30);
  color: var(--color-primary-light);
}

.dark-mode .section-eyebrow {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.22);
  color: var(--color-primary-light);
}

.dark-mode .tag-list--compact li,
.dark-mode .tag-list--skills li {
  background: rgba(59, 130, 246, 0.10);
  border-color: var(--color-border);
  color: var(--color-primary-light);
}

.dark-mode #site-header.scrolled {
  background: rgba(15, 23, 42, 0.94);
  border-color: var(--color-border);
}

.dark-mode #main-nav {
  background: rgba(30, 41, 59, 0.60);
  border-color: rgba(255, 255, 255, 0.10);
}

.dark-mode #site-header.scrolled #main-nav {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--color-border);
}

.dark-mode #nav-links a {
  color: var(--color-text-muted);
}

.dark-mode #nav-links a[aria-current="true"] {
  background: var(--color-primary);
  color: #ffffff;
}

.dark-mode #nav-links a:hover:not([aria-current="true"]) {
  background: rgba(59, 130, 246, 0.12);
  color: var(--color-primary-light);
}

/* Mobile nav en dark */
.dark-mode #nav-links {
  background: var(--color-bg-alt);
}

.dark-mode #nav-links li {
  border-bottom-color: var(--color-border);
}

.dark-mode #nav-links a {
  color: var(--color-text);
}

.dark-mode #nav-links a:hover {
  background: rgba(59, 130, 246, 0.08);
}

/* Form en dark */
.dark-mode .form-group label {
  color: var(--color-text);
}

/* A11y panel en dark */
.dark-mode #a11y-options {
  background: var(--color-bg-raised);
  border-color: var(--color-border);
}

.dark-mode .a11y-panel-header {
  background: rgba(255, 255, 255, 0.03);
  border-bottom-color: var(--color-border-subtle);
}

.dark-mode .a11y-panel-close {
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
}

.dark-mode .a11y-btn--size {
  background: var(--color-bg-alt);
  border-color: var(--color-border);
  color: var(--color-text);
}

.dark-mode .a11y-switch {
  background: var(--color-border-input);
}

.dark-mode .a11y-btn-icon {
  background: var(--color-bg-soft);
}

.dark-mode .a11y-size-track {
  background: var(--color-bg-soft);
  border-color: var(--color-border-subtle);
}

.dark-mode .a11y-btn--reset {
  border-color: var(--color-border-input);
  color: var(--color-text-muted);
}

/* Footer encore plus profond en dark */
.dark-mode #site-footer {
  background: #070E1F !important;
}

/* Hero : radial plus marqué en dark pour conserver la profondeur */
.dark-mode #hero::before {
  background: radial-gradient(700px circle at 80% 25%, rgba(59, 130, 246, 0.12), transparent 60%);
}

/* TYPE A clips en dark (var(--color-bg) = #1E293B) — couverture explicite */
.dark-mode #about::before,
.dark-mode #about::after,
.dark-mode #process::before,
.dark-mode #process::after,
.dark-mode #projects-extra::before,
.dark-mode #projects-extra::after,
.dark-mode #education::before,
.dark-mode #education::after,
.dark-mode #contact::before,
.dark-mode #contact::after {
  background: var(--color-bg);
}


/* ─── CONTRASTE ÉLEVÉ ─── */
.high-contrast {
  --color-text:           #000000;
  --color-text-muted:     #0A0A0A;
  --color-text-light:     #111111;
  --color-bg:             #FFFFFF;
  --color-bg-alt:         #FFFFFF;
  --color-bg-soft:        #F0F0F0;
  --color-bg-raised:      #FFFFFF;
  --color-primary:        #003060;
  --color-primary-dark:   #002040;
  --color-primary-darker: #001830;
  --color-border:              rgba(0,0,0,1);
  --color-border-subtle:  rgba(0,0,0,0.50);
  --color-border-input:   #000000;
  --card-border:          2px solid #000000;
  --card-shadow:          none;
  --card-shadow-hover:    0 0 0 3px #003060;
  --float-border:         2px solid #000000;
  --shadow-md:            none;
  --shadow-float:         none;
}

/* Sections en HC : fonds plats (TYPE A = blanc, TYPE B = gris clair) */
.high-contrast #about,
.high-contrast #process,
.high-contrast #projects-extra,
.high-contrast #education,
.high-contrast #contact {
  background: #FFFFFF;
}

.high-contrast #skills,
.high-contrast #projects,
.high-contrast #accessibility,
.high-contrast #availability {
  background: #F0F0F0;
}

/* Clips TYPE A en HC */
.high-contrast #about::before,
.high-contrast #about::after,
.high-contrast #process::before,
.high-contrast #process::after,
.high-contrast #projects-extra::before,
.high-contrast #projects-extra::after,
.high-contrast #education::before,
.high-contrast #education::after,
.high-contrast #contact::before,
.high-contrast #contact::after {
  background: #FFFFFF !important;
}

/* Clips TYPE B en HC */
.high-contrast #skills::before,
.high-contrast #projects::before,
.high-contrast #accessibility::before,
.high-contrast #availability::before {
  background: #F0F0F0 !important;
}

.high-contrast #skills::after,
.high-contrast #projects::after,
.high-contrast #accessibility::after,
.high-contrast #availability::after {
  background: #F0F0F0 !important;
}

/* Hero en HC */
.high-contrast #hero {
  background: #EFF6FF;
}

/* Boutons en HC : toujours bordure noire visible */
.high-contrast .btn-primary {
  background: #003060;
  border-color: #000000;
  color: #FFFFFF;
}

.high-contrast .btn-outline {
  border-color: #000000;
  color: #000000;
}

.high-contrast .btn-outline:hover {
  background: #003060;
  color: #FFFFFF;
}

.high-contrast .btn-ghost {
  border-color: #000000;
  color: #000000;
}

/* Cartes en HC */
.high-contrast .skill-group,
.high-contrast .project-card,
.high-contrast .process-card,
.high-contrast .a11y-feature,
.high-contrast .a11y-tools {
  border: 2px solid #000000 !important;
  box-shadow: none !important;
}

/* Nav en HC */
.high-contrast #main-nav {
  background: #FFFFFF;
  border: 2px solid #000000;
}

.high-contrast #nav-links a[aria-current="true"] {
  background: #003060;
  color: #FFFFFF;
  outline: 2px solid #000000;
}

/* Header scrolled en HC */
.high-contrast #site-header.scrolled {
  background: #FFFFFF;
  border-bottom: 2px solid #000000;
}

/* Stickers en HC : plus marqués */
.high-contrast .sticker {
  outline: 2px solid rgba(255,255,255,0.5);
}

/* Tags en HC */
.high-contrast .tag-list li,
.high-contrast .tag-list--compact li,
.high-contrast .tag-list--skills li {
  border-color: #000000 !important;
  color: #000000 !important;
  background: #FFFFFF !important;
}

/* Inputs en HC */
.high-contrast .form-group input,
.high-contrast .form-group textarea {
  border: 2px solid #000000;
}

/* Timeline en HC */
.high-contrast .timeline-dot {
  border-color: #000000;
}

/* Contact links en HC */
.high-contrast .contact-link {
  border-left-color: #000000;
}

.high-contrast .contact-icon {
  background: #F0F0F0;
  border: 1px solid #000000;
}

/* Footer en HC : fond clair */
.high-contrast #site-footer {
  background: #001830 !important;
}

/* Section eyebrow en HC */
.high-contrast .section-eyebrow {
  background: #F0F0F0;
  border-color: #000000;
  color: #003060;
}

/* Panneau a11y en HC */
.high-contrast #a11y-options {
  border: 2px solid #000000;
}

.high-contrast .a11y-switch {
  background: #888888;
  border: 1px solid #000000;
}

.high-contrast .a11y-btn--toggle[aria-pressed="true"] .a11y-switch {
  background: #003060;
}

/* Dark + HC combinés */
.dark-mode.high-contrast {
  --color-text:       #FFFFFF;
  --color-text-muted: #E8E8E8;
  --color-text-light: #D0D0D0;
  --color-bg:         #000000;
  --color-bg-alt:     #0D0D0D;
  --color-bg-soft:    #111111;
  --color-bg-raised:  #1A1A1A;
  --color-primary:    #7FBFFF;
  --color-border:     rgba(255,255,255,1);
  --card-border:      2px solid #FFFFFF;
}

/* ═══════════════════════════════════════════════════════════
   CLASSES UTILITAIRES — Design System v3
   Composants de base à utiliser dans tout le portfolio.
   ═══════════════════════════════════════════════════════════ */

/* ─── CARTE (composant atomique) ─── */
/* Usage : <div class="card"> en remplacement de toute carte custom */
.card {
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  box-shadow: var(--card-shadow);
  transition: var(--transition-card);
}

.card--hoverable:hover {
  box-shadow: var(--card-shadow-hover);
  transform: var(--card-transform-hover);
}

/* Carte sur fond sombre (section accessibilité) */
.card--dark {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--color-border-dark);
  box-shadow: none;
}

.card--dark:hover {
  background: rgba(255, 255, 255, 0.09);
}

/* ─── CONTENEUR D'ICÔNE (cercle unifié) ─── */
/* Usage : <div class="icon-wrap"> autour de tout SVG d'icône */
.icon-wrap {
  width: var(--icon-container-size);
  height: var(--icon-container-size);
  border-radius: var(--icon-container-radius);
  background: var(--icon-container-bg);
  color: var(--icon-container-color);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon-wrap .icon {
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
}

/* Variante sombre */
.section-dark .icon-wrap {
  background: rgba(var(--color-primary-rgb), 0.22);
  color: var(--color-primary-light);
}

/* ─── GRILLES ─── */
/* Grilles à utiliser pour uniformiser les mises en page */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
}

/* Grille auto-fill — se collapse seule selon la largeur min des cellules */
.grid-auto-md {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--grid-gap);
}

/* ─── FOND DE SECTIONS ─── */
/* Classes explicites (complètent .section-alt) */
.section-soft  { background-color: var(--color-bg-soft); }
.section-white { background-color: var(--color-bg); }
.section-hero  { background: var(--gradient-atmosphere); }  /* hero + footer */

/* ─── EYEBROW / LABEL DE SECTION ─── */
/* Règle unique pour tous les labels de section */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}

.eyebrow::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 2px;
  background: currentColor;
  flex-shrink: 0;
  border-radius: 1px;
}

/* ─── STICKER (décoratif — réservé hero + section process) ─── */
.sticker {
  display: inline-block;
  background: var(--color-primary-darker);
  color: #ffffff;
  font-family: var(--font-display);
  font-weight: var(--font-weight-black);
  font-size: var(--text-base);
  padding: var(--space-2) var(--space-6);
  border-radius: var(--radius-badge);
  transform: rotate(-3deg);
  transform-origin: center;
  line-height: 1.4;
  letter-spacing: -0.01em;
  user-select: none;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(30, 58, 138, 0.25);
}

.sticker--green {
  background: var(--color-green);
  /* #052e16 sur #22C55E = 6.98:1 ✓ (blanc donnait 2.25:1 = échec WCAG) */
  color: #052e16;
  box-shadow: 0 4px 16px rgba(var(--color-green-rgb), 0.30);
  transform: rotate(2deg);
}

.sticker--sm {
  font-size: var(--text-sm);
  padding: var(--space-1) var(--space-4);
}

/* Mode "Souligner les liens" — tous les liens interactifs */
.underline-links a:not(.btn):not(.logo):not(.skip-link):not(.footer-social-link) {
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* Navigation */
.underline-links #nav-links a {
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* Liens contact (icon + texte) */
.underline-links .contact-link strong {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Footer social : ajouter un label souligné visible */
.underline-links .footer-social-link {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 50%;
}

/* Animations réduites */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

[data-animations="false"] *, [data-animations="false"] *::before, [data-animations="false"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

html {
  scroll-behavior: smooth;
  font-size: calc(16px * var(--user-font-scale));
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--transition-base), color var(--transition-base);
  /* Empêche un débordement horizontal causé par le carrousel "plein écran"
     (cf. .carousel) sur certains navigateurs (arrondi des unités vw). */
  overflow-x: hidden;
}

/* ─── UTILITAIRES ─── */
.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;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* Filet de sécurité anti-débordement : aucune image ni média ne doit jamais
   dépasser son conteneur, quelle que soit sa taille intrinsèque. */
img, svg, video, picture {
  max-width: 100%;
}

/* Fond du tiroir de navigation mobile : inerte par défaut (desktop, et
   menu fermé), réactivé uniquement dans la media query mobile. */
#nav-backdrop {
  display: none;
}

section {
  padding: var(--space-20) 0;
}

section[id] {
  scroll-margin-top: calc(var(--fixed-offset) + var(--space-4));
}

/* Section alternée — fond doux, token unifié */
.section-alt {
  background-color: var(--color-bg-soft);
}

.section-header {
  text-align: center;
  margin-bottom: var(--space-8);
}

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-5);
  /* Pill conteneur — esprit sticker, sobre et cohérent */
  background: rgba(var(--color-primary-rgb), 0.06);
  padding: 4px var(--space-4) 4px var(--space-3);
  border-radius: var(--radius-full);
  border: 1px solid rgba(var(--color-primary-rgb), 0.12);
}

/* Tiret coloré dans le pill */
.section-eyebrow::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 2px;
  background: var(--color-primary);
  flex-shrink: 0;
  border-radius: 1px;
  /* opacity supprimé : élément décoratif mais WAVE le scannait */
}

.dark-mode .section-eyebrow {
  background: rgba(var(--color-primary-rgb), 0.12);
  border-color: rgba(var(--color-primary-rgb), 0.20);
}

.section-dark .section-eyebrow {
  color: var(--color-primary-light);
}

.section-dark .section-eyebrow::before {
  background: var(--color-primary-light);
}

h1, h2, h3 {
  overflow-wrap: break-word;
}

h2 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin-bottom: var(--space-4);
  line-height: 1.15;
}

h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin-bottom: var(--space-3);
  line-height: 1.25;
}

p {
  color: var(--color-text-muted);
  line-height: 1.7;
  overflow-wrap: break-word;
}

.section-intro {
  font-size: var(--text-lg);
  max-width: 600px;
  margin: 0 auto;
  color: var(--color-text-muted);
}

/* ─── ICÔNES SVG — trait unifié, token --icon-stroke ─── */
.icon {
  display: inline-block;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke, 1.75);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ─── SKIP LINK ─── */
.skip-link {
  position: absolute;
  top: -999px;
  left: 0;
  z-index: 9999;
  background: var(--color-primary);
  color: #ffffff;
  padding: var(--space-3) var(--space-6);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--radius-md) 0;
}

.skip-link:focus {
  top: 0;
}

/* ─── FOCUS GLOBAL — anneau bleu, cohérent avec la charte ─── */
:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ─── BOUTONS — tokens unifiés ─── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-2);
  padding: var(--btn-padding);
  min-height: var(--btn-height);
  max-width: 100%;
  border-radius: var(--btn-radius);
  font-family: var(--font-body);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: var(--btn-transition);
  white-space: normal;
  overflow-wrap: break-word;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-text-on-dark);
  border-color: var(--color-primary);
}

.btn-primary:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  box-shadow: var(--btn-shadow-hover);
}

.btn-outline {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-outline:hover {
  background-color: var(--color-primary);
  color: var(--color-text-on-dark);
}

.btn-ghost {
  background-color: transparent;
  color: var(--color-text-muted);
  border-color: var(--color-border-input);
}

.btn-ghost:hover {
  background-color: var(--color-bg-soft);
  color: var(--color-text);
}

.btn-sm {
  padding: var(--btn-padding-sm);
  font-size: var(--text-xs);
  min-height: 36px;
}

/* ─── TAGS / PILLS — tokens unifiés ─── */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin-top: var(--space-3);
}

.tag-list-centered {
  justify-content: center;
}

/* Variante compacte pour les cartes de compétences */
.tag-list--skills {
  gap: var(--space-1);
  margin-top: var(--space-3);
}

.tag-list--skills li {
  padding: 2px var(--space-3);
  font-size: 0.7rem;
  font-weight: 500;
  background: rgba(var(--color-primary-rgb), 0.06);
  border-color: rgba(var(--color-primary-rgb), 0.12);
  color: var(--color-primary-dark);
}

.tag-list li {
  background-color: var(--color-bg-soft);
  color: var(--color-primary);
  border: 1px solid var(--color-border);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-badge);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
  transition: background-color var(--transition-fast);
}

.dark-mode .tag-list li {
  background-color: rgba(37, 99, 235, 0.12);
  border-color: var(--color-border);
  color: var(--color-primary-light);
}

/* ─── BADGES ─── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
}

.badge-current {
  background-color: rgba(var(--color-primary-rgb), 0.10);
  color: var(--color-primary);
  border: 1px solid rgba(var(--color-primary-rgb), 0.22);
}

/* ═══════════════════════════════════════════════════
   PANNEAU ACCESSIBILITÉ — Design premium, icônes, toggles
   ═══════════════════════════════════════════════════ */

#a11y-panel {
  position: fixed;
  bottom: var(--space-4);    /* en bas — le back-to-top s'empile au-dessus */
  right: var(--space-4);
  top: auto;
  transform: none;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ─── Bouton flottant (même famille que back-to-top) ─── */
#a11y-toggle {
  width: var(--float-size);
  height: var(--float-size);
  background: var(--float-bg);
  color: var(--float-color);
  border: var(--float-border);
  border-radius: var(--float-radius);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--float-shadow);
  transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

#a11y-toggle:hover,
#a11y-toggle:focus-visible {
  background: var(--float-hover-bg);
  color: var(--float-hover-color);
  box-shadow: var(--shadow-btn-primary);
}

/* ─── Panneau options — s'ouvre vers le haut depuis le bas ─── */
#a11y-options {
  position: absolute;
  right: calc(var(--float-size) + var(--space-3));
  bottom: 0;          /* aligne le bas du panneau sur le bas du toggle */
  top: auto;
  transform: none;
  background: var(--color-bg);
  border: var(--card-border);
  border-radius: var(--radius-xl);
  box-shadow: 0 8px 40px rgba(37, 99, 235, 0.15), 0 2px 8px rgba(15, 23, 42, 0.08);
  width: 252px;
  overflow: hidden;
  max-height: calc(100vh - var(--header-height) - 100px);
  overflow-y: auto;
}

/* ─── En-tête du panneau ─── */
.a11y-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
  background: rgba(37, 99, 235, 0.03);
}

.a11y-panel-title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.a11y-panel-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: var(--color-bg-soft);
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast), color var(--transition-fast);
  flex-shrink: 0;
}

.a11y-panel-close:hover,
.a11y-panel-close:focus-visible {
  background: rgba(37, 99, 235, 0.10);
  color: var(--color-primary);
}

/* ─── Groupes d'options ─── */
.a11y-group {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
}

.a11y-group:last-of-type {
  border-bottom: none;
}

.a11y-group-label {
  display: block;
  /* 0.72rem = 11.5px (était 10.4px → alerté WAVE "very small text") */
  font-size: 0.72rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-light);
  margin-bottom: var(--space-2);
}

/* ─── Contrôle taille de texte ─── */
.a11y-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.a11y-btn--size {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-soft);
  border: var(--card-border);
  border-radius: var(--radius-full);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
  flex-shrink: 0;
}

.a11y-btn--size:hover,
.a11y-btn--size:focus-visible {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

/* Indicateur visuel du niveau de taille */
.a11y-size-track {
  flex: 1;
  height: 4px;
  background: var(--color-bg-soft);
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid var(--color-border-subtle);
}

.a11y-size-indicator {
  height: 100%;
  width: 33%; /* valeur initiale mise à jour par JS */
  background: var(--color-primary);
  border-radius: 2px;
  transition: width var(--transition-base);
}

/* ─── Boutons toggle (contraste, dark, underline, animations) ─── */
.a11y-btn--toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2) 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
}

.a11y-btn--toggle + .a11y-btn--toggle {
  margin-top: 2px;
}

.a11y-btn--toggle:hover,
.a11y-btn--toggle:focus-visible {
  background: rgba(37, 99, 235, 0.05);
  outline: none;
}

.a11y-btn-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.a11y-btn--toggle[aria-pressed="true"] .a11y-btn-icon {
  background: rgba(37, 99, 235, 0.12);
  color: var(--color-primary);
}

.a11y-btn-label {
  flex: 1;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  line-height: 1.3;
}

/* ─── Switch visuel (track + thumb) ─── */
.a11y-switch {
  width: 32px;
  height: 18px;
  border-radius: 9px;
  background: var(--color-border-input);
  position: relative;
  flex-shrink: 0;
  transition: background var(--transition-fast);
}

.a11y-switch-thumb {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  top: 3px;
  left: 3px;
  transition: transform var(--transition-fast);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.20);
}

.a11y-btn--toggle[aria-pressed="true"] .a11y-switch {
  background: var(--color-primary);
}

.a11y-btn--toggle[aria-pressed="true"] .a11y-switch-thumb {
  transform: translateX(14px);
}

/* ─── Bouton Réinitialiser ─── */
.a11y-btn--reset {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: calc(100% - var(--space-8));
  margin: var(--space-3) var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: none;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.a11y-btn--reset:hover,
.a11y-btn--reset:focus-visible {
  background: rgba(185, 28, 28, 0.06);
  color: var(--color-error);
  border-color: rgba(185, 28, 28, 0.25);
}

/* ─── HEADER — transparent sur hero, glass au scroll ─── */
#site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  height: var(--header-height);
  /* État initial : transparent — s'intègre au gradient hero */
  background: transparent;
  border-bottom: none;
  box-shadow: none;
  transition: background var(--transition-base),
              border-color var(--transition-base),
              box-shadow var(--transition-base);
}

/* État scroll (classe ajoutée par JS quand scrollY > 60) */
#site-header.scrolled {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--color-border-subtle);
  box-shadow: 0 1px 32px rgba(37, 99, 235, 0.08);
}

.dark-mode #site-header.scrolled {
  background: rgba(15, 23, 42, 0.92);
  border-color: var(--color-border);
}

.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
  height: 100%;
}

/* Logo à gauche, CV à droite — justifiés aux extrêmes de leurs colonnes */
.header-inner .logo      { justify-self: start; }
.header-inner > .btn     { justify-self: end; }

/* ── Logo ─── */
.logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  text-decoration: none;
  flex-shrink: 0;
}

.logo-name {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
}

/* "Nazim" — couleur du N historique (navy profond) */
.logo-first {
  color: var(--color-primary-darker);
}

/* "Mellouk" — couleur du M historique (bleu primaire) */
.logo-last {
  color: var(--color-primary);
}

.logo-tagline {
  /* 0.72rem = 11.5px (était 9.28px → alerté WAVE "very small text") */
  font-size: 0.72rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  /* Sans opacity : #64748B sur blanc = 5.15:1 ✓ (avec opacity 0.85 = 3.50:1 ← échec) */
  color: var(--color-text-light);
  line-height: 1;
  white-space: nowrap;
  user-select: none;
}

/* ── Navigation pill ─── */
#main-nav {
  display: flex;
  justify-content: center;
  /* Pill glass — s'adapte au fond transparent ou glass du header */
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: var(--radius-full);
  padding: var(--space-1);
  box-shadow: 0 2px 16px rgba(37, 99, 235, 0.06);
  transition: background var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

/* Quand le header est scrolled, le pill adapte sa transparence */
#site-header.scrolled #main-nav {
  background: rgba(37, 99, 235, 0.04);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: var(--card-border);
  box-shadow: none;
}

.dark-mode #main-nav {
  background: rgba(30, 41, 59, 0.55);
  border-color: rgba(255, 255, 255, 0.12);
}

.dark-mode #site-header.scrolled #main-nav {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--color-border);
}

#nav-links {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  width: 100%;
  justify-content: center;
}

#nav-links a {
  display: inline-flex;
  padding: calc(var(--space-2) - 1px) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-decoration: none;
  border-radius: var(--radius-full);
  transition: color var(--transition-fast), background-color var(--transition-fast);
  white-space: nowrap;
}

/* État actif — fond bleu plein + texte blanc */
#nav-links a[aria-current="true"] {
  color: #ffffff;
  background: var(--color-primary);
}

/* Hover sur les liens non actifs */
#nav-links a:hover:not([aria-current="true"]) {
  color: var(--color-primary);
  background: rgba(var(--color-primary-rgb), 0.08);
}

/* Icônes affichées uniquement dans le panneau mobile (cf. media query) */
.nav-icon {
  display: none;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color var(--transition-fast);
}

.nav-toggle:hover,
.nav-toggle:focus-visible {
  background-color: rgba(var(--color-primary-rgb), 0.08);
}

.hamburger,
.hamburger::before,
.hamburger::after {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--color-text);
  border-radius: 2px;
  transition: transform var(--transition-fast), opacity var(--transition-fast), background-color var(--transition-fast);
}

.hamburger {
  position: relative;
}

.hamburger::before,
.hamburger::after {
  content: '';
  position: absolute;
  left: 0;
}

.hamburger::before { transform: translateY(-7px); }
.hamburger::after  { transform: translateY(7px); }

/* Animation hamburger -> croix quand le menu mobile est ouvert */
.nav-toggle[aria-expanded="true"] .hamburger {
  background-color: transparent;
}

.nav-toggle[aria-expanded="true"] .hamburger::before {
  transform: translateY(0) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .hamburger::after {
  transform: translateY(0) rotate(-45deg);
}

/* ─── HERO ─── */
#hero {
  position: relative;
  /* padding-top = header + espace respiration pour que les badges flottants soient visibles */
  padding-top: calc(var(--header-height) + var(--space-12));
  /* padding-bottom = clip-h : la coupe diagonale couvre exactement la zone de padding bas */
  padding-bottom: var(--clip-h);
  min-height: 100vh;
  display: flex;
  /* flex-end : contenu calé en bas → zéro espace vide entre les tags et la diagonale */
  align-items: flex-end;
  overflow: hidden;
  background: var(--gradient-atmosphere);
}

/* Profondeur radiale sur le gradient */
#hero::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 0;
  background: radial-gradient(700px circle at 80% 25%, rgba(var(--color-primary-rgb), 0.08), transparent 60%);
  pointer-events: none;
}

/* Oblique du bas du hero */
#hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--clip-h); /* = section-padding → couvre exactement la zone padding-bottom */
  background: var(--color-bg);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  z-index: 3;
  pointer-events: none;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-16);
  align-items: end;   /* contenu calé en bas = zéro espace vide sous les tags */
  position: relative;
  z-index: 1;
  width: 100%;
}

.hero-eyebrow {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-6);
}

.hero-eyebrow-item {
  display: inline-block;
  background: rgba(var(--color-primary-rgb), 0.1);
  color: var(--color-primary-dark);
  border: 1px solid rgba(var(--color-primary-rgb), 0.2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

#hero-heading {
  font-family: var(--font-display);
  /* Échelle fluide : descend jusqu'à 1.75rem sur les très petits écrans
     (320px) sans jamais dépasser la largeur de l'écran, et remonte
     progressivement jusqu'à 3rem sur desktop. */
  font-size: clamp(1.75rem, 7.5vw, var(--text-5xl));
  font-weight: 800;
  line-height: 1.15;
  color: var(--color-text);
  margin-bottom: var(--space-6);
  letter-spacing: -0.03em;
}

.hero-accent {
  color: var(--color-primary);
  position: relative;
}

.hero-sub {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 520px;
  margin-bottom: var(--space-8);
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
}

.hero-tags li {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-primary-dark);
  background: rgba(var(--color-primary-rgb), 0.08);
  border: 1px solid rgba(var(--color-primary-rgb), 0.18);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}

.hero-avatar-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  position: relative;
}

.hero-avatar-wrapper::before {
  content: '';
  position: absolute;
  width: 115%;
  height: 108%;
  background: rgba(var(--color-primary-rgb), 0.09);
  border-radius: 45% 55% 60% 40% / 50% 45% 55% 50%;
  top: -4%;
  left: -8%;
  z-index: 0;
  pointer-events: none;
}

.hero-avatar {
  width: 300px;
  height: 370px;
  border-radius: var(--radius-2xl);
  object-fit: cover;
  object-position: center top;
  border: none;
  box-shadow: 0 24px 64px rgba(30, 41, 59, 0.22), 0 8px 24px rgba(var(--color-primary-rgb), 0.12);
  display: block;
  position: relative;
  z-index: 1;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-darker) 100%);
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  background: var(--color-bg);
  color: var(--color-success);
  border: 1px solid var(--color-border);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--shadow-md);
}

.badge-dot {
  width: 8px;
  height: 8px;
  /* Sans flex-shrink:0, un flex item garde sa hauteur (height) mais peut
     voir sa largeur (width) réduite par Flexbox quand l'espace manque
     (ex. texte du badge passant sur 2 lignes sur petit écran) : le cercle
     devient alors un ovale. flex-shrink:0 fige sa taille dans les deux
     dimensions. */
  flex-shrink: 0;
  background-color: var(--color-success);
  border-radius: 50%;
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ─── À PROPOS ─── */
.about-layout {
  display: grid;
  grid-template-columns: 1fr 196px;
  gap: var(--space-12);
  align-items: start;
}

/* Titre + texte dans la colonne gauche — plus d'en-tête centré séparé */
.about-content h2 {
  text-align: left;
  margin-bottom: var(--space-6);
}

.about-content .section-eyebrow {
  justify-content: flex-start;
  margin-bottom: var(--space-3);
}

.about-content p {
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--color-text-muted);
}

.about-content p + p {
  margin-top: var(--space-4);
}

/* Stats — liste compacte avec accent de bordure gauche */
/* Note: position:sticky désactivé car clip-path sur la section crée
   un stacking context qui annule sticky pour les descendants */
.about-stats {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.stat-item {
  padding: var(--space-4) var(--space-4);
  border-left: 2px solid var(--color-border-input);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  transition: border-color var(--transition-fast);
}

.stat-item + .stat-item {
  margin-top: var(--space-2);
}

.stat-item:hover {
  border-left-color: var(--color-primary);
}

.stat-item--accent {
  border-left-color: var(--color-primary);
}

.stat-number {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1.1;
  overflow-wrap: break-word;
}

.stat-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 500;
  line-height: 1.4;
}

/* ─── COMPÉTENCES — styles de base (background et clips gérés dans ALTERNANCE STRICTE) ─── */
/* Note : #skills background, padding et clips sont définis plus bas dans le bloc
   "ALTERNANCE STRICTE DES FONDS" qui fait autorité. */

/* ─── COMPÉTENCES ─── */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--card-gap);
}

.skill-group {
  background: var(--color-bg);
  border: var(--card-border);
  border-radius: var(--radius-xl);
  padding: var(--card-padding);          /* space-6 = 1.5rem */
  transition: var(--transition-card);
  display: flex;
  flex-direction: column;
}

.dark-mode .skill-group {
  background: var(--color-bg-alt);
}

.skill-group:hover {
  box-shadow: var(--card-shadow-hover);
  transform: var(--card-transform-hover);
}

/* Conteneur d'icône — légèrement plus compact que le global 48px */
.skill-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--icon-container-bg);
  color: var(--icon-container-color);
  margin-bottom: var(--space-4);
  flex-shrink: 0;
}

.skill-icon .icon {
  width: 20px;
  height: 20px;
}

.skill-group h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

.skill-group > p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
  flex: 1;
}

/* ─── PROJETS PRINCIPAUX (carrousel) ─── */
/* Carrousel full-bleed — les flèches se positionnent aux extrémités de l'écran,
   le contenu (cartes) reste centré dans --container-max. */
.carousel {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* Espace minimal pour que les flèches ne chevauchent pas les cartes */
  --carousel-btn-clearance: calc(var(--space-4) + 44px + var(--space-2));
}

.carousel-track {
  display: flex;
  gap: var(--card-gap);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--space-4);
  -webkit-overflow-scrolling: touch;
  max-width: var(--container-max);
  margin: 0 auto;
  /* Padding réduit : les flèches sont aux bords de l'écran, pas besoin
     de réserver de la place à l'intérieur de la piste. */
  padding: var(--space-2) var(--space-8) var(--space-6) var(--space-4);
  scrollbar-width: none;
}

.carousel-track::-webkit-scrollbar {
  display: none;
}

.carousel-slide {
  flex: 0 0 auto;
  width: min(460px, 80vw);         /* plus large — meilleure exploitation de l'espace */
  scroll-snap-align: start;
}

.carousel-slide .project-card {
  height: 100%;
}

/* ─── FLÈCHES CAROUSEL — centrées sur l'image, famille flottants ─── */
.carousel-btn {
  position: absolute;
  /* Centrées verticalement sur l'image (hauteur = largeur × 9/16) */
  top: calc(min(460px, 80vw) * 9 / 16 / 2 - 22px);
  z-index: 5;
  width: var(--float-size);
  height: var(--float-size);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--float-bg);
  color: var(--float-color);
  border: var(--float-border);
  border-radius: var(--float-radius);
  box-shadow: var(--float-shadow);
  cursor: pointer;
  transition: background-color var(--transition-fast),
              color var(--transition-fast),
              box-shadow var(--transition-fast),
              opacity var(--transition-base);
}

/* :hover réservé aux appareils avec une vraie souris : sur tactile, un tap
   déclenche :hover et le navigateur le garde affiché jusqu'au prochain tap
   ailleurs sur l'écran ("hover collant"), ce qui donnait l'impression
   qu'une flèche restait bloquée en bleu après l'avoir touchée. */
@media (hover: hover) {
  .carousel-btn:hover {
    background: var(--float-hover-bg);
    color: var(--float-hover-color);
    box-shadow: var(--shadow-btn-primary);
  }

  .carousel-btn:disabled:hover {
    background: var(--float-bg);
    color: var(--float-color);
    box-shadow: var(--float-shadow);
  }
}

.carousel-btn:focus-visible {
  background: var(--float-hover-bg);
  color: var(--float-hover-color);
}

.carousel-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Positionnés près des bords de l'écran (le carrousel est en plein-bleed,
   cf. .carousel) plutôt que collées aux cartes : restent accessibles et ne
   chevauchent jamais les boîtes projets, à n'importe quelle largeur. */
.carousel-btn--prev {
  left: calc(var(--space-4) + env(safe-area-inset-left));
}

.carousel-btn--next {
  /* A11y est maintenant en bas — plus de conflit au centre, position symétrique avec --prev */
  right: calc(var(--space-4) + env(safe-area-inset-right));
}

.project-card {
  background: var(--color-bg);
  border: var(--card-border);
  border-radius: var(--radius-2xl);    /* plus arrondi = plus premium */
  overflow: hidden;
  transition: var(--transition-card);
  display: flex;
  flex-direction: column;
  box-shadow: var(--card-shadow);
}

.dark-mode .project-card {
  background: var(--color-bg-alt);
}

.project-card:hover {
  box-shadow: var(--card-shadow-hover);
  transform: var(--card-transform-hover);
  border-color: rgba(var(--color-primary-rgb), 0.25);  /* bordure plus visible au hover */
}

/* Réduire l'espace entre section-header et carousel */
#projects .section-header {
  margin-bottom: var(--space-8);
}

.project-img-wrapper {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-bg-alt) 0%, var(--color-border) 100%);
}

/* Ratio fixe en 16:9 (au lieu d'une hauteur fixe en pixels) : la boîte
   garde toujours les mêmes proportions que les images recommandées
   (1600×900), à n'importe quelle largeur d'écran. Avec object-fit:cover
   et un ratio de boîte identique au ratio de l'image, rien n'est rogné.
   Toutes les cartes (principales et complémentaires) partagent la même
   taille — aucun projet n'est mis en avant visuellement par rapport
   aux autres. */
.project-img-wrapper {
  aspect-ratio: 16 / 9;
}

.project-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}

/* Modificateur pour les visuels en portrait (ex. capture d'écran mobile) :
   on affiche l'image entière sans la rogner, posée sur le fond doux du
   conteneur, plutôt que de la recadrer en paysage et perdre son contenu. */
.project-img-contain {
  object-fit: contain;
  padding: var(--space-3);
}

.project-card:hover .project-img {
  transform: scale(1.03);
}

.project-card:hover .project-img-contain {
  transform: none;
}

.project-badge {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  background: var(--color-success);
  color: #ffffff;
  font-size: var(--text-xs);
  font-weight: 700;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  letter-spacing: 0.05em;
}

/* Badge "Bonus" harmonisé avec la palette bleue — sobre, secondaire */
.project-badge--bonus {
  background: rgba(var(--color-primary-rgb), 0.09);
  color: var(--color-primary-dark);
  border: 1px solid rgba(var(--color-primary-rgb), 0.18);
}

.project-content {
  padding: var(--space-4) var(--space-5);  /* réduit : space-5 = 1.25rem latéral */
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-2);                      /* gap uniforme entre éléments */
}

.project-type {
  /* 0.75rem = 12px (était 10.88px → alerté par WAVE "very small text")  */
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  /* opacity: 0.75 supprimé — ratio blended : 3.26:1 ← échec WCAG AA */
}

.project-content h3 {
  font-size: var(--text-xl);               /* réduit : 1.25rem au lieu de 1.5rem */
  font-weight: 700;
  margin-bottom: 0;
  line-height: 1.25;
}

.project-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
  /* Clamp à 3 lignes — élimine l'espace vide variable entre les cartes */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin-bottom: 0;
}

.project-highlights {
  display: none;                            /* supprimé — info déjà dans type + desc */
}

.project-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: auto;                         /* colle toujours au bas de la carte */
  padding-top: var(--space-3);
}

/* Variante compacte de tag-list dans les cartes projet */
.tag-list--compact {
  gap: var(--space-1);
  margin-top: var(--space-1);
}

.tag-list--compact li {
  padding: 2px var(--space-2);
  font-size: 0.68rem;
  background: rgba(var(--color-primary-rgb), 0.06);
  border-color: rgba(var(--color-primary-rgb), 0.12);
  color: var(--color-primary-dark);
}

/* ─── PROJETS COMPLÉMENTAIRES ─── */

/* En-tête plus discret — section de second rang */
#projects-extra .section-header {
  margin-bottom: var(--space-8);
}

#projects-extra .section-header h2 {
  font-size: var(--text-3xl);
}

/* Grille harmonisée sur --card-gap */
.extra-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--card-gap);
}

/* Images des projets complémentaires affichées en entier, sans recadrage */
.extra-card .project-img-wrapper {
  aspect-ratio: 3 / 2;
  background: var(--color-bg-soft);   /* fond doux visible si l'image ne remplit pas */
}

.extra-card .project-img {
  object-fit: contain;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
}

/* ═══════════════════════════════════════════════════
   ACCESSIBILITÉ — Bento grid (stat + features + tools)
   ═══════════════════════════════════════════════════ */

/* ─── Bento layout ─── */
.a11y-bento {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--card-gap);
  margin-bottom: var(--space-8);
}

/* ─── Cellule accent — stat RGAA ─── */
.a11y-stat-card {
  grid-column: 1;
  grid-row: 1 / 3;              /* occupe toute la hauteur gauche */
  background: linear-gradient(145deg, var(--color-primary-darker) 0%, var(--color-primary) 100%);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(var(--color-primary-rgb), 0.30);
}

/* Cercle décoratif dans la carte stat */
.a11y-stat-card::before {
  content: '';
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  top: -70px;
  right: -70px;
  pointer-events: none;
}

.a11y-stat-card::after {
  content: '';
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  bottom: -30px;
  left: -30px;
  pointer-events: none;
}

.a11y-stat-eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: var(--space-4);
}

.a11y-stat-number {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 6vw, 5.5rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
  letter-spacing: -0.04em;
}

.a11y-stat-denom {
  font-size: 0.42em;
  opacity: 0.55;
  letter-spacing: 0;
}

.a11y-stat-label {
  font-size: var(--text-lg);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.3;
  margin: var(--space-3) 0 var(--space-2);
}

.a11y-stat-sub {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.60);
  margin-bottom: var(--space-6);
}

/* Standards pills dans la carte stat */
.a11y-standards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: auto;
}

.a11y-standards span {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.92);
  padding: 3px var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* ─── Feature cards ─── */
.a11y-feature {
  background: var(--color-bg);
  border: var(--card-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-5);
  box-shadow: var(--card-shadow);
  transition: var(--transition-card);
}

.a11y-feature:hover {
  box-shadow: var(--card-shadow-hover);
  transform: var(--card-transform-hover);
}

.a11y-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--icon-container-bg);
  color: var(--icon-container-color);
  margin-bottom: var(--space-3);
  flex-shrink: 0;
}

.a11y-icon .icon {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
}

.a11y-feature h3 {
  font-size: var(--text-base);
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.a11y-feature p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
}

/* ─── Barre d'outils ─── */
.a11y-tools {
  text-align: center;
  padding: var(--space-6) var(--space-8);
  background: var(--color-bg);
  border: var(--card-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--card-shadow);
}

/* ─── FORMATION — timeline visuelle et élégante ─── */
.timeline {
  --tl-dot: 36px;           /* diamètre du point */
  --tl-gap: 20px;           /* espace entre point et contenu */
  list-style: none;
  position: relative;
  padding-left: calc(var(--tl-dot) + var(--tl-gap));
}

/* Ligne verticale centrée sur les points */
.timeline::before {
  content: '';
  position: absolute;
  left: calc(var(--tl-dot) / 2 - 1px);
  top: calc(var(--tl-dot) / 2);
  bottom: 0;
  width: 2px;
  background: linear-gradient(
    to bottom,
    var(--color-primary) 0%,
    rgba(var(--color-primary-rgb), 0.30) 70%,
    transparent 100%
  );
}

.timeline-item {
  position: relative;
  padding-bottom: var(--space-8);
}

.timeline-item:last-child {
  padding-bottom: 0;
}

/* Point avec icône graduation */
.timeline-dot {
  position: absolute;
  left: calc(-1 * (var(--tl-dot) + var(--tl-gap)));
  top: 0;
  width: var(--tl-dot);
  height: var(--tl-dot);
  border-radius: 50%;
  border: 2px solid var(--color-border-input);
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-light);
  transition: var(--transition-base);
  z-index: 1;
  box-shadow: 0 0 0 4px var(--color-bg-soft); /* fond doux qui "efface" la ligne derrière */
}

.timeline-current .timeline-dot {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #ffffff;
  box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), 0.12),
              0 4px 12px rgba(var(--color-primary-rgb), 0.25);
}

/* Contenu : flat pour les entrées passées, carte pour l'entrée en cours */
.timeline-content {
  padding-top: var(--space-1);
}

.timeline-current .timeline-content {
  background: var(--color-bg);
  border: var(--card-border);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
  padding: var(--space-5) var(--space-5) var(--space-5) var(--space-6);
  box-shadow: var(--card-shadow);
}

.dark-mode .timeline-current .timeline-content {
  background: var(--color-bg-alt);
}

.timeline-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.timeline-date {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.03em;
}

/* Entrées passées — date plus discrète */
.timeline-item:not(.timeline-current) .timeline-date {
  color: var(--color-text-light);
}

.timeline-content h3 {
  font-size: var(--text-base);
  font-weight: 700;
  margin-bottom: var(--space-1);
}

.timeline-item:not(.timeline-current) .timeline-content h3 {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}

.timeline-school {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

/* Compétences en tags compacts (remplacement des puces CV) */
.timeline-content .tag-list--compact {
  margin-top: var(--space-2);
}

/* ─── DISPONIBILITÉ / CTA ─── */
.availability-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, var(--color-primary-darker) 0%, var(--color-primary) 100%);
  border-radius: var(--radius-2xl);
  padding: var(--space-10) var(--space-12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-10);
  box-shadow: 0 12px 48px rgba(var(--color-primary-rgb), 0.30);
}

/* Cercles décoratifs — même famille que hero/footer */
.availability-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.availability-circle {
  position: absolute;
  border-radius: 50%;
}

.availability-circle--lg {
  width: 320px;
  height: 320px;
  background: rgba(255, 255, 255, 0.07);
  top: -120px;
  right: -80px;
}

.availability-circle--sm {
  width: 160px;
  height: 160px;
  background: rgba(34, 197, 94, 0.08); /* touche de vert (couleur green du DS) */
  bottom: -60px;
  left: 15%;
}

/* Badge statut — pulsing dot + label */
.availability-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.24);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.03em;
  margin-bottom: var(--space-4);
}

.availability-badge .badge-dot {
  background: var(--color-green); /* vert = signal positif */
}

.availability-text {
  position: relative;
  z-index: 1;
}

.availability-text h2 {
  color: #ffffff;
  margin-bottom: var(--space-4);
}

.availability-text p {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--text-base);
  margin-bottom: var(--space-2);
}

.availability-text strong {
  color: #ffffff;
}

.availability-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

/* Bouton principal : blanc sur fond bleu — cohérent avec le DS */
.availability-card .btn-primary {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--color-primary-dark);
  font-weight: 700;
}

.availability-card .btn-primary:hover {
  background: rgba(255, 255, 255, 0.90);
  border-color: rgba(255, 255, 255, 0.90);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

/* Boutons outline : blancs sur fond bleu */
.availability-card .btn-outline {
  border-color: rgba(255, 255, 255, 0.50);
  color: #ffffff;
}

.availability-card .btn-outline:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #ffffff;
  color: #ffffff;
}

/* ─── CONTACT ─── */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-12);
  align-items: start;
}

.contact-links {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Liens : épurés, pas de carte — bordure gauche accent + ligne séparatrice */
.contact-link {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-2) var(--space-4) var(--space-4);
  border-left: 2px solid var(--color-border-input);
  text-decoration: none;
  color: var(--color-text);
  transition: border-color var(--transition-fast), transform var(--transition-fast);
  position: relative;
}

.contact-link + .contact-link {
  margin-top: var(--space-1);
}

.contact-link:hover {
  border-left-color: var(--color-primary);
  transform: translateX(3px);
}

/* Icône cercle — même famille que skill-icon, a11y-icon */
.contact-icon {
  width: 40px;
  height: 40px;
  background: var(--icon-container-bg);
  color: var(--icon-container-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.contact-icon .icon {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
}

.contact-link:hover .contact-icon {
  background: rgba(var(--color-primary-rgb), 0.14);
  color: var(--color-primary);
}

.contact-link div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow-wrap: break-word;
}

.contact-link strong {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}

.contact-link span {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ─── FORMULAIRE ─── */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-group label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}

.form-group input,
.form-group textarea {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);   /* bleu teinté, cohérent avec cartes */
  border-radius: var(--radius-lg);          /* 0.75rem au lieu de 0.5rem */
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-bg);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  width: 100%;
}

.dark-mode .form-group input,
.dark-mode .form-group textarea {
  background: var(--color-bg-alt);
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15);
}

.form-group input:invalid:not(:placeholder-shown),
.form-group textarea:invalid:not(:placeholder-shown) {
  border-color: var(--color-primary);
}

.form-error {
  font-size: var(--text-xs);
  color: var(--color-error);
  min-height: 1rem;
}

.form-status {
  font-size: var(--text-sm);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  min-height: 2rem;
}

.form-status.success {
  background: rgba(21, 128, 61, 0.1);
  color: var(--color-success);
  border: 1px solid rgba(21, 128, 61, 0.25);
}

.form-status.error {
  background: rgba(185, 28, 28, 0.1);
  color: var(--color-error);
  border: 1px solid rgba(185, 28, 28, 0.25);
}

/* ─── FOOTER ─── */
#site-footer {
  background: var(--gradient-atmosphere);  /* bookend : même gradient que le hero */
  border-top: 1px solid rgba(var(--color-primary-rgb), 0.08);
  padding: var(--space-12) 0 var(--space-10);
}

.footer-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}

/* Identité : nom + tagline */
.footer-identity {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
}

.footer-name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text);
  line-height: 1;
}

.footer-tagline {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
}

/* Liens sociaux — icônes-cercles cliquables */
.footer-social {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.footer-social-link {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(var(--color-primary-rgb), 0.07);
  border: 1px solid rgba(var(--color-primary-rgb), 0.14);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast),
              border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.footer-social-link:hover {
  background: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-btn-primary);
}

/* Séparateur discret */
.footer-divider {
  width: 40px;
  height: 1px;
  background: rgba(var(--color-primary-rgb), 0.20);
}

.footer-note {
  font-size: var(--text-xs);
  color: var(--color-text-light);
  letter-spacing: 0.02em;
}

/* ─── BOUTON RETOUR EN HAUT ───
   Placé ici, avant la section RESPONSIVE : les media queries qui suivent
   doivent apparaître après cette règle de base dans le fichier pour
   pouvoir la surcharger (à spécificité égale, c'est l'ordre dans le
   fichier qui tranche, peu importe que la condition @media soit remplie
   ou non). C'est cet ordre qui était fautif : la règle de base se
   trouvait après les media queries et regagnait donc la main sur mobile,
   replaçant le bouton exactement sous le bouton accessibilité. */
/* ─── BOUTON RETOUR EN HAUT — famille flottants ─── */
.back-to-top {
  position: fixed;
  right: var(--space-4);
  /* Empilé directement au-dessus du bouton a11y */
  bottom: calc(var(--space-4) + var(--float-size) + var(--space-3));
  z-index: 860;
  width: var(--float-size);
  height: var(--float-size);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--float-bg);
  color: var(--float-color);
  border: var(--float-border);
  border-radius: var(--float-radius);
  box-shadow: var(--float-shadow);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  pointer-events: none;
  transition: var(--float-transition);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.back-to-top:hover,
.back-to-top:focus-visible {
  background: var(--float-hover-bg);
  color: var(--float-hover-color);
  box-shadow: var(--shadow-btn-primary);
  border-color: var(--color-primary);
}

/* ─── RESPONSIVE ─── */

/* Tablette */
@media (max-width: 1024px) {
  .header-inner {
    gap: var(--space-4);
  }

  #nav-links a {
    padding: calc(var(--space-2) - 1px) var(--space-2);
    font-size: var(--text-xs);
  }

  .hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
    align-items: center; /* recentre sur tablette (1 colonne) */
  }

  .hero-visual {
    order: -1;
    display: flex;
    justify-content: center;
  }

  .hero-sub {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-actions {
    justify-content: center;
  }

  .hero-tags {
    justify-content: center;
  }

  /* Skills: garde 2 colonnes sur tablette (déjà en 2x2) */

  /* Process: rangées déjà en 3 colonnes, rien à changer sur tablette */

  /* Brand badges hero : visibles sur tablette/mobile, repositionnés
     autour de la photo (qui passe en haut dans la colonne unique) */
  .hero-brand-badges {
    display: block !important;
  }

  /* Tablette : !important requis car les règles globales viennent après dans le CSS */
  .brand-badge--uxui {
    top: 10% !important;
    left: auto !important;
    right: 8% !important;
  }

  .brand-badge--dev {
    top: 6% !important;
    right: 4% !important;
    left: auto !important;
  }

  .brand-badge--a11y {
    top: 32% !important;
    left: 4% !important;
    right: auto !important;
  }

  /* Icônes légèrement plus petites sur tablette */
  .brand-badge .icon {
    width: 36px !important;
    height: 36px !important;
  }

  /* About: stats en ligne horizontale sur tablette */
  .about-layout {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .about-stats {
    flex-direction: row;
    gap: var(--space-4);
    position: static;
  }

  .stat-item {
    flex: 1;
    border-left: none;
    border-top: 2px solid var(--color-border-input);
    padding: var(--space-3) 0 0;
  }

  .stat-item--accent {
    border-top-color: var(--color-primary);
  }

  .availability-card {
    flex-direction: column;
    text-align: center;
    padding: var(--space-10) var(--space-8);
  }

  .availability-actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* Mobile */
@media (max-width: 768px) {
  :root {
    --space-20: 3rem;
    --space-24: 4rem;
  }

  h2 { font-size: var(--text-3xl); }
  h3 { font-size: var(--text-lg); }

  section[id] {
    scroll-margin-top: calc(var(--header-height) + var(--space-4));
  }

  #hero {
    padding-top: calc(var(--header-height) + var(--space-8));
    /* recentrer sur mobile (une seule colonne) */
    align-items: center;
  }

  .header-inner {
    gap: var(--space-3);
  }

  /* Taille tactile minimale recommandée (44px) pour tous les boutons */
  .btn {
    min-height: 44px;
  }

  /* Sur mobile le header repasse en flex (logo + hamburger + CV) */
  .header-inner {
    display: flex;
    justify-content: space-between;
  }

  .header-inner .logo      { justify-self: unset; }
  .header-inner > .btn     { justify-self: unset; }

  #main-nav {
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    padding: 0;
    box-shadow: none;
  }

  .nav-toggle { display: flex; }

  /* Empêche le contenu de la page de défiler derrière le panneau de
     navigation pendant qu'il est ouvert (classe ajoutée par script.js). */
  body.nav-open {
    overflow: hidden;
  }

  /* Cause réelle du bug "le menu ne couvre pas l'écran" : #site-header a
     un backdrop-filter, et un ancêtre avec backdrop-filter/filter/transform
     redéfinit le bloc de positionnement de ses descendants en
     position:fixed (comme le ferait un position:relative pour de
     l'absolute). #nav-links se positionnait donc par rapport à la boîte
     du header (72px de haut) au lieu de l'écran entier, et s'écrasait en
     une bande quasi nulle. On retire le filtre pendant que le menu est
     ouvert : le header garde un fond opaque, le panneau se positionne
     enfin par rapport au viewport. */
  body.nav-open #site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-color: var(--color-bg);
  }

  /* Fond assombri cliquable derrière le tiroir. display reste constant
     (jamais "none") pour que la transition d'opacité fonctionne ; c'est
     "visibility" + "pointer-events" qui le rendent inerte une fois fermé. */
  #nav-backdrop {
    display: block;
    position: fixed;
    top: var(--header-height);
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(15, 23, 42, 0.4);
    z-index: 898;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--transition-base), visibility var(--transition-base);
  }

  #nav-backdrop.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* Tiroir latéral (et non plus un panneau plein écran) : il ne couvre
     qu'une partie de la largeur, le reste de la page reste visible
     (assombri) derrière, et un clic en dehors referme le menu. */
  #nav-links {
    display: flex;
    position: fixed;
    top: var(--header-height);
    right: 0;
    bottom: 0;
    left: auto;
    width: min(82%, 320px);
    background: var(--color-bg);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    z-index: 899;
    overflow-y: auto;
    padding: var(--space-4);
    box-shadow: -16px 0 32px -8px rgba(15, 23, 42, 0.18);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--transition-base), visibility var(--transition-base);
  }

  #nav-links.open {
    transform: translateX(0);
    visibility: visible;
  }

  #nav-links li {
    border-bottom: 1px solid var(--color-border-light);
  }

  #nav-links li:last-child {
    border-bottom: none;
  }

  #nav-links a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-3);
    width: 100%;
    min-height: 56px;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
  }

  .nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    color: var(--color-text-light);
  }

  #nav-links a:hover {
    background-color: var(--color-bg-alt);
  }

  #nav-links a[aria-current="true"] {
    background-color: rgba(var(--color-primary-rgb), 0.08);
    color: var(--color-primary);
  }

  #nav-links a[aria-current="true"] .nav-icon {
    color: var(--color-primary);
  }

  .skills-grid,
  .extra-grid,
  .contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Bento accessibilité : stat pleine largeur, puis 2 colonnes features */
  .a11y-bento {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }

  .a11y-stat-card {
    grid-column: 1 / 3;  /* pleine largeur sur tablette */
    grid-row: auto;
  }

  /* About mobile: stats en grille 2x2 */
  .about-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  .stat-item {
    border-top: 2px solid var(--color-border-input);
    border-left: none;
    padding: var(--space-3) 0 0;
    margin-top: 0;
  }

  .stat-item + .stat-item {
    margin-top: 0;
  }

  /* Process mobile: empiler les rangées en 1 colonne */
  .process-row {
    grid-template-columns: 1fr;
  }

  .process-row::before {
    display: none; /* pas de ligne horizontale sur mobile */
  }

  .process-connector {
    margin-left: 0;
    align-items: flex-start;
    padding-left: calc(19px); /* aligné avec le centre du cercle numéro */
  }

  /* Bento accessibilité mobile : une colonne */
  .a11y-bento {
    grid-template-columns: 1fr;
  }

  .a11y-stat-card {
    grid-column: auto;
    grid-row: auto;
  }

  /* Photo mobile */
  .hero-avatar {
    width: 220px;
    height: 270px;
  }

  /* Badges mobiles : !important indispensable — les règles globales
     (.brand-badge--*) viennent APRÈS les media queries dans le fichier CSS
     et écrasent sinon les positions mobiles sans priorité. */
  .brand-badge--uxui {
    top: 18% !important;
    right: 4% !important;
    left: auto !important;
  }

  .brand-badge--dev {
    top: 6% !important;
    right: 4% !important;
    left: auto !important;
  }

  .brand-badge--a11y {
    top: 16% !important;   /* gauche de la photo, dans la zone image */
    left: 4% !important;
    right: auto !important;
  }

  /* Icônes plus petites sur petit écran */
  .brand-badge .icon {
    width: 30px !important;
    height: 30px !important;
  }

  .availability-actions {
    flex-direction: column;
  }

  .availability-card {
    padding: var(--space-8);
  }

  /* A11y panel : passe en bas-droite sur mobile */
  #a11y-panel {
    top: auto;
    right: calc(var(--space-4) + env(safe-area-inset-right));
    bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
    transform: none;
  }

  /* Carousel : la flèche droite revient au bord (plus de conflit a11y) */
  .carousel-btn--next {
    right: calc(var(--space-4) + env(safe-area-inset-right));
  }

  /* Panel a11y : s'ouvre vers le haut sur mobile */
  #a11y-options {
    right: 0;
    top: auto;
    bottom: calc(var(--float-size) + var(--space-3));
    transform: none;
    max-height: calc(100vh - var(--header-height) - 80px);
    overflow-y: auto;
  }

  /* Taille tactile minimale pour tous les boutons a11y */
  .a11y-btn--toggle,
  .a11y-btn--size,
  .a11y-btn--reset {
    min-height: 44px;
  }

  /* Back-to-top : empilé au-dessus du bouton a11y */
  .back-to-top {
    right: calc(var(--space-4) + env(safe-area-inset-right));
    left: auto;
    bottom: calc(var(--space-4) + var(--float-size) + var(--space-3) + env(safe-area-inset-bottom));
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 var(--space-4);
  }

  :root {
    --space-20: 2.5rem;
    --space-24: 3rem;
  }

  .section-header {
    margin-bottom: var(--space-8);
  }

  .hero-eyebrow {
    font-size: 0.7rem;
    padding: var(--space-1) var(--space-3);
    white-space: normal;
    text-align: center;
  }

  .hero-avatar {
    width: 180px;
    height: 220px;
  }

  .btn {
    padding: 0.625rem 1.25rem;
  }

  .hero-actions,
  .availability-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .btn,
  .availability-actions .btn {
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════
   DIRECTION ARTISTIQUE v2 — Stickers · Cercles · Identité
   ═══════════════════════════════════════════════════════════ */

/* ─── COMPOSANT STICKER (étiquette inclinée signature) ─── */
.sticker {
  display: inline-block;
  background: var(--color-primary-darker);
  color: #ffffff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-base);
  padding: var(--space-2) var(--space-6);
  border-radius: var(--radius-full);
  transform: rotate(-3deg);
  transform-origin: center;
  line-height: 1.4;
  letter-spacing: -0.01em;
  user-select: none;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(30, 58, 138, 0.25);
}

.sticker--green {
  background: var(--color-green);
  /* #052e16 sur #22C55E = 6.98:1 ✓ (blanc donnait 2.25:1 = échec WCAG) */
  color: #052e16;
  box-shadow: 0 4px 16px rgba(var(--color-green-rgb), 0.30);
  transform: rotate(2deg);
}

.sticker--sm {
  font-size: var(--text-sm);
  padding: var(--space-1) var(--space-4);
}

/* ─── CERCLES DÉCORATIFS DU HERO ─── */
.hero-deco-circles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.hero-deco-circle {
  position: absolute;
  border-radius: 50%;
}

.hero-deco-circle--lg {
  width: 640px;
  height: 640px;
  background: rgba(var(--color-primary-rgb), 0.07);
  top: -200px;
  right: -160px;
}

.hero-deco-circle--md {
  width: 360px;
  height: 360px;
  background: rgba(var(--color-primary-rgb), 0.05);
  top: 15%;
  right: 20%;
}

.hero-deco-circle--accent {
  width: 200px;
  height: 200px;
  background: rgba(var(--color-green-rgb), 0.07);
  top: 20%;
  left: -60px;
}

/* ─── STICKER NOM DANS LE HERO ─── */
.hero-name-sticker {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-5);
  position: relative;
  z-index: 2;
}

/* ─── BADGES IDENTITÉ — icônes éparpillées, sans cadre ─── */
/* Le conteneur couvre toute la surface du hero pour permettre
   le positionnement absolu individuel de chaque icône. */
.hero-brand-badges {
  position: absolute;
  inset: 0;
  display: block;           /* abandonne flex-column */
  z-index: 2;
  pointer-events: none;
}

/* Chaque badge : plus de cercle, plus de fond — juste l'icône flottante */
.brand-badge {
  position: absolute;
  width: auto;
  height: auto;
  border-radius: 0;
  border: none;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Icônes agrandies + ombre portée pour lisibilité sur gradient */
.brand-badge .icon {
  width: 44px;
  height: 44px;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.18));
}

/* ─── Couleurs des icônes ─── */
.brand-badge--uxui { color: var(--color-primary); }
.brand-badge--dev  { color: var(--color-primary-darker); }
.brand-badge--a11y { color: var(--color-green-dark); }

/* ─── Positions individuelles — zone atmosphérique haute (contenu calé en bas) ─── */

/* UX/UI — zone haute, entre les deux colonnes */
.brand-badge--uxui {
  top: 18%;
  left: 50%;
}

/* Dev (terminal) — haut à droite */
.brand-badge--dev {
  top: 8%;
  right: 5%;
}

/* Accessibilité — à gauche de la photo (là où la flèche pointe) */
.brand-badge--a11y {
  top: 38%;
  left: 62%;
}

/* Animation lévitation légère (optionnel — suit prefers-reduced-motion) */
@keyframes float-badge {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

.brand-badge--uxui { animation: float-badge 4.0s ease-in-out infinite; }
.brand-badge--dev  { animation: float-badge 4.8s ease-in-out infinite 0.6s; }
.brand-badge--a11y { animation: float-badge 3.6s ease-in-out infinite 1.2s; }

/* ═══════════════════════════════════════════════════
   SECTION DÉMARCHE — Parcours en 2 rangées connectées
   ═══════════════════════════════════════════════════ */
#process {
  overflow: visible;
}

/* En-tête stickers */
.process-header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  margin-bottom: var(--space-8);
}

/* Conteneur global du flux */
.process-flow {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ─── Rangée de 3 étapes ─── */
.process-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  position: relative;
  list-style: none;
}

/* Ligne en pointillés qui relie les numéros d'une rangée */
.process-row::before {
  content: '';
  position: absolute;
  top: 19px; /* centre vertical du cercle numéro (38px / 2) */
  left: calc(50% / 3);     /* part du centre de la 1ère colonne */
  right: calc(50% / 3);    /* finit au centre de la 3ème colonne */
  height: 1px;
  background: repeating-linear-gradient(
    90deg,
    rgba(var(--color-primary-rgb), 0.22) 0,
    rgba(var(--color-primary-rgb), 0.22) 6px,
    transparent 6px,
    transparent 14px
  );
  z-index: 0;
}

/* ─── Cercle numéro ─── */
.process-num-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-4);
  position: relative;
  z-index: 1;
}

.process-num {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 2px solid rgba(var(--color-primary-rgb), 0.25);
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.process-step:hover .process-num {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* ─── Carte d'étape ─── */
.process-card {
  background: var(--color-bg);
  border: var(--card-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-5) var(--space-6);
  box-shadow: var(--card-shadow);
  transition: var(--transition-card);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.process-step:hover .process-card {
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-3px);
}

.process-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--icon-container-bg);
  color: var(--icon-container-color);
  border-radius: 50%;
  margin-bottom: var(--space-1);
  flex-shrink: 0;
}

.process-icon .icon {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
}

.process-card h3 {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0;
  line-height: 1.3;
}

.process-card > p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
}

/* ─── Connecteur entre les deux rangées ─── */
.process-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Centré sous la 3ème colonne (côté droit) */
  padding: var(--space-2) 0;
  margin-left: calc(66.66% + var(--space-4));
  margin-right: 0;
  width: calc(16.67% - var(--space-3));
}

.process-connector-line {
  width: 1px;
  height: var(--space-6);
  background: repeating-linear-gradient(
    to bottom,
    rgba(var(--color-primary-rgb), 0.22) 0,
    rgba(var(--color-primary-rgb), 0.22) 4px,
    transparent 4px,
    transparent 8px
  );
}

.process-connector-arrow {
  color: rgba(var(--color-primary-rgb), 0.35);
  display: flex;
  align-items: center;
}

/* ─── Citation finale ─── */
.process-quote {
  margin-top: var(--space-10);
  padding: var(--space-5) var(--space-6) var(--space-5) var(--space-6);
  border-left: 3px solid var(--color-primary);
  background: rgba(var(--color-primary-rgb), 0.04);
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
  font-size: var(--text-base);
  font-style: italic;
  color: var(--color-text-muted);
  max-width: 480px;
}

/* ─── Dark mode ─── */
.dark-mode .process-card {
  background: var(--color-bg-alt);
}

.dark-mode .process-num {
  background: var(--color-bg-alt);
}

/* ─── Responsive process — ici, APRÈS la définition globale pour éviter
   les conflits de cascade (le global venait après les media queries) ─── */
@media (max-width: 768px) {
  .process-row {
    grid-template-columns: 1fr;
  }

  .process-row::before {
    display: none;
  }

  .process-connector {
    margin-left: 0;
    align-items: flex-start;
    padding-left: 19px;
  }
}

@media (max-width: 480px) {
  .process-header {
    gap: var(--space-3);
  }
}

/* ─── SECTION DARK (Accessibilité numérique) ─── */
.section-dark {
  background: #0F172A;
  position: relative;
  overflow: hidden;
}

.section-dark::before {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: rgba(var(--color-primary-rgb), 0.06);
  top: -150px;
  right: -120px;
  pointer-events: none;
}

.section-dark::after {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(var(--color-green-rgb), 0.04);
  bottom: -80px;
  left: -60px;
  pointer-events: none;
}

.section-dark .section-eyebrow {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  box-shadow: none;
}

.section-dark h2,
.section-dark h3 {
  color: #ffffff;
}

.section-dark p {
  color: rgba(255, 255, 255, 0.72);
}

.section-dark .section-intro {
  color: rgba(255, 255, 255, 0.65);
}

.section-dark .a11y-grid {
  position: relative;
  z-index: 1;
}

.section-dark .a11y-feature {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}

.section-dark .a11y-feature:hover {
  background: rgba(255, 255, 255, 0.09);
  box-shadow: none;
}

.section-dark .a11y-feature h3 {
  color: #ffffff;
}

.section-dark .a11y-feature p {
  color: rgba(255, 255, 255, 0.68);
}

.section-dark .a11y-icon {
  background: rgba(var(--color-primary-rgb), 0.22);
  color: var(--color-primary-light);
}

.section-dark .a11y-tools {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

.section-dark .tag-list li {
  background: rgba(255, 255, 255, 0.07);
  color: var(--color-primary-light);
  border-color: rgba(255, 255, 255, 0.08);
}

/* Grande stat RGAA mise en avant */
.a11y-big-stat {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: var(--space-10) 0 var(--space-6);
}

.a11y-big-stat-number {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 12vw, 7rem);
  font-weight: 800;
  color: var(--color-primary-light);
  line-height: 1;
  letter-spacing: -0.04em;
}

.a11y-big-stat-label {
  display: block;
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.6);
  margin-top: var(--space-3);
  letter-spacing: 0.02em;
}

/* ─── FOOTER BRANDÉ ─── */
.footer-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border-light);
  flex-wrap: wrap;
}

.footer-brand-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

/* Footer badges — même système que hero (version 56px) */
.footer-brand-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid;
}

.footer-brand-circle .icon {
  width: 22px;
  height: 22px;
}

/* Mêmes variantes de couleur que .brand-badge--* */
.footer-brand-circle--uxui {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: rgba(var(--color-primary-rgb), 0.07);
}

.footer-brand-circle--dev {
  border-color: var(--color-primary-darker);
  color: var(--color-primary-darker);
  background: rgba(30, 58, 138, 0.07);
}

.footer-brand-circle--a11y {
  border-color: var(--color-green);
  color: var(--color-green-dark);
  background: rgba(var(--color-green-rgb), 0.07);
}

.footer-brand-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 500;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════
   AUDIT COHÉRENCE — Harmonisation globale
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   SCHÉMA DE FONDS — Alternance gradient hero / bleu doux
   ═══════════════════════════════════════════════════════════
   Hero (gradient) ← référence
   Sections impaires (1,3,5,7,9) : même gradient que le hero
   Sections paires  (2,4,6,8,10) : #EBF4FF — pervenche du hero, réduit
   Footer : navy profond dérivé du primary-darker
*/

/* ════════════════════════════════════════════════════════════
   ALTERNANCE STRICTE DES FONDS
   A (gradient) : about · process · projects-extra · education · contact
   B (bleu)     : skills · projects · accessibility · availability
   Hauteur de coupe UNIFORME : 56px sur toutes les sections.
   ════════════════════════════════════════════════════════════ */

/* ── TYPE A — Gradient atmosphère (même identité que le Hero) ── */
#about,
#process,
#projects-extra,
#education,
#contact {
  background:
    radial-gradient(700px circle at 85% 12%, rgba(37, 99, 235, 0.055), transparent 62%),
    radial-gradient(450px circle at 6% 88%,  rgba(34, 197, 94, 0.040), transparent 58%),
    linear-gradient(135deg, #E0FBF0 0%, #EBF4FF 100%);
  position: relative;
}

#about > .container,
#process > .container,
#projects-extra > .container,
#education > .container,
#contact > .container {
  position: relative;
  z-index: 2;
}

/* ── About : deux clips (hero::after = ligne 1, about::before = ligne 2 parallèle) ──
   Les deux diagonales se touchent exactement à la jonction hero/about.
   padding = clip-h → la coupe couvre exactement la zone de padding, zéro espace vide. */
#about {
  padding-top:    var(--section-padding);
  padding-bottom: var(--section-padding);
}

/* Ligne 2 : diagonale haute de About (parallèle à hero::after) */
#about::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--clip-h);
  background: var(--color-bg);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  z-index: 1;
  pointer-events: none;
}

/* Diagonale basse de About (transition vers Skills) */
#about::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: var(--clip-h);
  background: var(--color-bg);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  z-index: 1;
  pointer-events: none;
}

/* Process, projects-extra, education, contact : clips haut ET bas */
#process,
#projects-extra,
#education,
#contact {
  padding-top:    var(--section-padding);
  padding-bottom: var(--section-padding);
}

#process::before,
#projects-extra::before,
#education::before,
#contact::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--clip-h);
  background: var(--color-bg);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  z-index: 1;
  pointer-events: none;
}

#process::after,
#projects-extra::after,
#education::after,
#contact::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: var(--clip-h);
  background: var(--color-bg);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  z-index: 1;
  pointer-events: none;
}

/* ── TYPE B — Dégradé bleu sobre (fond alternant avec le gradient) ── */
#skills,
#projects,
#accessibility,
#availability {
  background:
    radial-gradient(550px circle at 15% 20%, rgba(37, 99, 235, 0.04), transparent 60%),
    radial-gradient(380px circle at 90% 80%, rgba(37, 99, 235, 0.03), transparent 55%),
    linear-gradient(160deg, #EBF4FF 0%, #D5E2FF 100%);
  position: relative;
}

#skills > .container,
#projects > .container,
#accessibility > .container,
#availability > .container {
  position: relative;
  z-index: 2;
}

/* Skills, projects, accessibility, availability : clips haut ET bas */
#skills,
#projects,
#accessibility,
#availability {
  padding-top:    var(--section-padding);
  padding-bottom: var(--section-padding);
}

/* Coins haut-gauche : couleur début du gradient bleu */
#skills::before,
#projects::before,
#accessibility::before,
#availability::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--clip-h);
  background: #EBF4FF;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  z-index: 1;
  pointer-events: none;
}

/* Coins bas-droite : couleur fin du gradient bleu */
#skills::after,
#projects::after,
#accessibility::after,
#availability::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: var(--clip-h);
  background: #D5E2FF;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  z-index: 1;
  pointer-events: none;
}

/* ── FOOTER : navy profond ── */
#site-footer {
  background: #0D1B3E !important; /* navy dérivé de primary-darker */
  border-top: none;
  box-shadow: none;
}

#site-footer .footer-name {
  color: rgba(255, 255, 255, 0.92);
}

#site-footer .footer-tagline {
  color: rgba(255, 255, 255, 0.55);
}

#site-footer .footer-social-link {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.75);
}

#site-footer .footer-social-link:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.40);
  box-shadow: none;
}

#site-footer .footer-divider {
  background: rgba(255, 255, 255, 0.14);
}

#site-footer .footer-note {
  color: rgba(255, 255, 255, 0.65); /* 3.26:1 → ~5.5:1 — passe WCAG AA */
}

/* Doublons supprimés — les règles #projects-extra, #availability
   et #site-footer sont définies dans le bloc "SCHÉMA DE FONDS" ci-dessus. */

/* ─── Cohérence des rayons des cartes ───────────────────────
   Toutes les cartes "feature" utilisent radius-xl (1rem),
   les process-cards aussi — uniformisation. */
.process-step-inner {
  border-radius: var(--radius-2xl);    /* aligne avec project-card */
}

/* Pin des process-steps : couleur primaire au lieu de gris */
.process-step-inner::before {
  background: rgba(var(--color-primary-rgb), 0.25);
  box-shadow: 0 2px 6px rgba(var(--color-primary-rgb), 0.15);
}

/* ─── min-height 44px sur tous les boutons (desktop aussi) ── */
.btn {
  min-height: var(--btn-height);
}

/* ─── Cohérence tag-list : border-radius déjà radius-badge ── */
/* Vérification : tag-list li utilise déjà var(--radius-badge) */

/* ─── Focus ring globale : cohérent (déjà primary) ───────── */
/* :focus-visible utilise --color-primary depuis l'audit précédent */

/* ─── section-header : espacement cohérent partout ──────────
   Les sections avec section-header < sous-éléments spécifiques
   (about, skills) ont leurs propres règles — les autres gardent
   margin-bottom: space-12 standard. */

/* ─── Sous-titres H3 dans les features : uniformisation ─────
   process-step H3 vs a11y-feature H3 vs skill-group H3 */
.process-step-inner h3,
.skill-group h3,
.a11y-feature h3 {
  font-size: var(--text-base);
  font-weight: 700;
}

/* ─── Tags de skills / projets : border-radius badge ────────
   Déjà var(--radius-badge) via .tag-list li */

/* ─── Animation de révélation : cible manquante ─────────────
   Les process-step-inner ne sont pas révélés — ajout */

/* ─── Responsive : nav-toggle radius cohérent ───────────────
   burger toggle → déjà radius-md, acceptable */

/* ═══════════════════════════════════════════════════════════
   PASSE FINITION — Cohérence globale
   ═══════════════════════════════════════════════════════════ */

/* ── Hero : alignement responsive des boutons CTA ── */
@media (max-width: 500px) {
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-actions .btn {
    justify-content: center;
  }
}

/* ── About : ajouter une petite note de couleur sur le bloc stats ── */
.about-stats {
  padding: var(--space-4) 0;
}

/* ── Skills : réduire le gap interne des cartes ── */
.skill-group {
  gap: var(--space-3);
}

/* Skills : padding et clips gérés dans le bloc ALTERNANCE STRICTE ci-dessous */

/* ── A11y bento : alignement unifié des icônes ── */
.a11y-icon {
  flex-shrink: 0;
}

/* ── Formulaire : textarea resize vertical uniquement ── */
.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

/* ── Footer : espacement interne harmonisé ── */
#site-footer {
  padding: var(--space-10) 0 var(--space-8);
}

.footer-inner {
  gap: var(--space-5);
}

/* ── Back-to-top et a11y toggle : taille tactile cohérente ── */
#a11y-toggle {
  min-width: var(--float-size);
  min-height: var(--float-size);
}

/* ── Contact : espacement entre les liens réduit ── */
.contact-link + .contact-link {
  margin-top: var(--space-2);
}

/* ── Radius harmonisation : toutes les project-card en radius-2xl ── */
.extra-card {
  border-radius: var(--radius-2xl);
}

/* ── Ombres : harmonisation des hover sur tous les composants ── */
.a11y-feature:hover,
.skill-group:hover {
  border-color: rgba(var(--color-primary-rgb), 0.18);
}

/* ── Transitions : fluidité globale ── */
.section-stickers .sticker {
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.section-stickers .sticker:hover {
  transform: rotate(-1deg) translateY(-2px);
  box-shadow: 0 6px 20px rgba(30, 58, 138, 0.30);
}

.section-stickers .sticker--green:hover {
  transform: rotate(0deg) translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--color-green-rgb), 0.35);
}

/* ── Mobile : contact grid compacte ── */
@media (max-width: 768px) {
  .contact-grid {
    gap: var(--space-8);
  }

  .footer-inner {
    gap: var(--space-4);
  }
}

/* ════════════════════════════════════════════════════════════
   SECTIONS COLLÉES — clip-path natif sur les sections
   Technique : chaque section est découpée en parallélogramme
   via clip-path, et chevauche la précédente de --clip-h px.
   Résultat : UNE seule ligne diagonale entre deux sections,
   zéro triangle parasite, zéro bande blanche.
   ════════════════════════════════════════════════════════════ */

/* 1. Supprimer TOUS les pseudo-éléments de coupe (ancienne technique) */
/* Note: #hero::before (radial gradient overlay) est conservé */
#hero::after,
#about::before,
#about::after,
#skills::before,
#skills::after,
#process::before,
#process::after,
#projects::before,
#projects::after,
#projects-extra::before,
#projects-extra::after,
#accessibility::before,
#accessibility::after,
#education::before,
#education::after,
#availability::before,
#availability::after,
#contact::before,
#contact::after {
  content: none !important;
  display: none !important;
}

/* 2. Supprimer également les paddings supplémentaires de compensation */
#about,
#process,
#projects-extra,
#education,
#contact,
#skills,
#projects,
#accessibility,
#availability {
  padding-top:    var(--section-padding) !important;
  padding-bottom: var(--section-padding) !important;
}

/* 3. Coupes diagonales via clip-path natif sur les sections */

/* Hero : coupe BASSE seulement (premier élément de page) */
#hero {
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--clip-h)), 0 100%);
  /* Pas de margin-top : premier élément */
}

/* Toutes les sections : coupe HAUTE + BASSE + chevauchement avec la section précédente */
#about,
#skills,
#process,
#projects,
#projects-extra,
#accessibility,
#education,
#availability,
#contact {
  position: relative;
  clip-path: polygon(
    0 var(--clip-h),                 /* haut-gauche : décalé vers le bas de clip-h */
    100% 0,                           /* haut-droit  : ras du bord supérieur       */
    100% calc(100% - var(--clip-h)), /* bas-droit   : décalé vers le haut de clip-h */
    0 100%                            /* bas-gauche  : ras du bord inférieur        */
  );
  /* Remonte de clip-h pour chevaucher la section précédente :
     - La zone "transparente" haut-gauche révèle le background de la section précédente
     - La zone "transparente" bas-droit sera révélée par la section suivante
     → Résultat : une seule ligne diagonale nette, zéro triangle blanc */
  margin-top: calc(-1 * var(--clip-h));
}

/* Footer : coupe HAUTE seulement + chevauchement */
#site-footer {
  clip-path: polygon(0 var(--clip-h), 100% 0, 100% 100%, 0 100%) !important;
  margin-top: calc(-1 * var(--clip-h)) !important;
  /* Augmenter le padding pour que le contenu soit sous la coupe */
  padding-top: calc(var(--clip-h) + var(--space-8)) !important;
}

/* 4. Ajuster scroll-margin pour tenir compte du chevauchement */
section[id] {
  scroll-margin-top: calc(var(--fixed-offset) + var(--clip-h) + var(--space-4)) !important;
}

/* 5. S'assurer que le contenu des sections passe bien AU-DESSUS du clip */
/* (le clip est sur la section elle-même, le container est enfant = visible) */
#about > .container,
#skills > .container,
#process > .container,
#projects > .container,
#projects-extra > .container,
#accessibility > .container,
#education > .container,
#availability > .container,
#contact > .container {
  position: relative;
  z-index: auto; /* hérité de la section */
}

/* 6. Pas de clip en mode impression */
@media print {
  #hero, #about, #skills, #process, #projects, #projects-extra,
  #accessibility, #education, #availability, #contact, #site-footer {
    clip-path: none !important;
    margin-top: 0 !important;
  }
}

/* Indicateur PDF visible — sans opacity pour respecter le contraste WCAG */
.pdf-label {
  font-size: 0.75rem;
  font-weight: 500;
}

/* ─── IMPRESSION ─── */
@media print {
  #site-header, .breadcrumb-bar, #a11y-panel, .back-to-top, .nav-toggle, .hero-actions, .project-actions, .availability-actions, .contact-form { display: none; }
  #hero { padding-top: 0; min-height: auto; }
  body { font-size: 11pt; color: #000; background: #fff; }
  a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .project-card, .extra-card, .skill-group { break-inside: avoid; }
}