@charset "UTF-8";
/* =========================================================================
   thibaultguillaume.fr - feuille de style unique
   -------------------------------------------------------------------------
   Remplace Tailwind CDN (~350 Ko de JavaScript compilé dans le navigateur)
   par du CSS natif servi en un seul fichier, mis en cache un an.
   L'identité visuelle est identique : navy #0D1B2A, orange #FF6B35,
   dégradés, effet verre, cartes flottantes, typographie Inter.

   Sommaire
   01. Polices
   02. Jetons de conception (variables)
   03. Réinitialisation & base
   04. Mise en page
   05. Accessibilité
   06. En-tête & navigation
   07. Boutons
   08. Bandeau d'accueil
   09. À propos
   10. Cartes & pastilles
   11. Filtres
   12. Fil d'Ariane
   13. Article & typographie longue
   14. Encarts de contenu
   15. Signature auteur
   16. Quiz
   17. Vidéo
   18. Pied de page
   19. Animations
   20. Impression & préférences système
   22. Quiz : titre et bloc des questions
   23. Cartes entièrement cliquables
   ====================================================================== */

/* -------------------------------------------------------------------------
   01. Polices - auto-hébergées (RGPD : aucune requête vers Google Fonts)
       Déposer les .woff2 dans /assets/fonts/. Si les fichiers sont absents,
       la pile de repli système prend le relais sans casser la mise en page.
   ---------------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/inter-latin-variable.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F,
    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-variable.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC;
}

/* -------------------------------------------------------------------------
   02. Jetons de conception
   ---------------------------------------------------------------------- */
:root {
  /* Couleurs de marque */
  --navy: #0d1b2a;
  --slate-900: #0f172a;
  --slate-800: #1e293b;
  --gray-900: #111827;
  --dark-gray: #1e293b;
  --medium-gray: #64748b;
  --light-gray: #f8fafc;
  --accent: #ff6b35;
  --accent-2: #f7931e;
  --accent-600: #ea580c;

  /* Neutres */
  --white: #fff;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-500: #6b7280;
  --gray-600: #4b5563;

  /* Sémantique */
  --success: #22c55e;
  --danger: #ef4444;
  --info: #60a5fa;

  /* Dégradés */
  --grad-accent: linear-gradient(135deg, var(--accent), var(--accent-2));
  --grad-hero: linear-gradient(135deg, var(--navy) 0%, var(--slate-900) 55%, var(--gray-900) 100%);
  --grad-finance: linear-gradient(135deg, #2563eb 0%, #4338ca 55%, var(--navy) 100%);
  --grad-marketing: linear-gradient(135deg, #9333ea 0%, #7e22ce 55%, #4c1d95 100%);
  --grad-commerce: linear-gradient(135deg, #059669 0%, #15803d 55%, #115e59 100%);
  --grad-informatique: linear-gradient(135deg, #0891b2 0%, #0369a1 55%, var(--navy) 100%);

  /* Typographie */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Échelle fluide : s'adapte sans point de rupture (0 media query pour le texte) */
  --fs-xs: 0.78rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem);
  --fs-xl: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  --fs-2xl: clamp(1.4rem, 1.15rem + 1.1vw, 2rem);
  --fs-3xl: clamp(1.75rem, 1.35rem + 1.8vw, 2.6rem);
  --fs-4xl: clamp(2.1rem, 1.5rem + 2.8vw, 3.4rem);
  --fs-hero: clamp(2.4rem, 1.3rem + 5.2vw, 4.5rem);

  /* Rythme vertical */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* Formes & ombres */
  --r-sm: 0.5rem;
  --r-md: 0.75rem;
  --r-lg: 1rem;
  --r-xl: 1.5rem;
  --r-2xl: 2rem;
  --r-full: 999px;
  --shadow-sm: 0 1px 3px rgb(0 0 0 / 8%);
  --shadow-md: 0 10px 25px -8px rgb(0 0 0 / 15%);
  --shadow-lg: 0 25px 50px -12px rgb(0 0 0 / 25%);
  --shadow-glow: 0 0 22px rgb(255 107 53 / 32%);

  --container: 1200px;
  --measure: 46rem; /* largeur de lecture confortable des articles */
  --measure-pied: 58rem; /* pied d'article : signature + boutons sur une ligne */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --header-h: 5.25rem;

  color-scheme: light;
}

/* -------------------------------------------------------------------------
   03. Réinitialisation & base
   ---------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

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

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.65;
  color: var(--dark-gray);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
picture,
svg,
iframe {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: var(--accent-600);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--accent);
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
  background: none;
}

ul,
ol {
  padding-left: 1.25rem;
}

h1,
h2,
h3,
h4 {
  line-height: 1.2;
  text-wrap: balance;
  font-weight: 800;
}

p {
  text-wrap: pretty;
}

code,
kbd,
samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* Dégradé orange appliqué au texte - signature graphique du site */
.gradient-text {
  background: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--accent); /* repli si background-clip non supporté */
}

/* Effet verre dépoli */
.glass {
  background: rgb(255 255 255 / 10%);
  border: 1px solid rgb(255 255 255 / 20%);
}

@supports (backdrop-filter: blur(10px)) {
  .glass {
    backdrop-filter: blur(10px);
  }
}

/* -------------------------------------------------------------------------
   04. Mise en page
   ---------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}

.section {
  padding-block: var(--sp-8);
}

@media (min-width: 768px) {
  .section {
    padding-block: var(--sp-9);
  }
}

.section--light {
  background: linear-gradient(to bottom, var(--light-gray), var(--white));
}

.section--dark {
  background: var(--grad-hero);
  color: var(--white);
}

.section__head {
  max-width: 42rem;
  margin-inline: auto;
  margin-bottom: var(--sp-7);
  text-align: center;
}

.section__title {
  font-size: var(--fs-3xl);
  font-weight: 800;
  color: var(--dark-gray);
  margin-bottom: var(--sp-4);
}

.section--dark .section__title {
  color: var(--white);
}

.section__lead {
  font-size: var(--fs-lg);
  font-weight: 300;
  color: var(--medium-gray);
}

.section--dark .section__lead {
  color: rgb(255 255 255 / 80%);
}

.measure {
  max-width: var(--measure);
  margin-inline: auto;
}

/* -------------------------------------------------------------------------
   05. Accessibilité
   ---------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  z-index: 200;
  top: var(--sp-2);
  left: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--accent);
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform 0.2s var(--ease);
}

.skip-link:focus {
  transform: translateY(0);
  color: var(--white);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

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

/* -------------------------------------------------------------------------
   06. En-tête & navigation
   ---------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(13 27 42 / 95%);
  border-bottom: 1px solid rgb(255 255 255 / 20%);
  box-shadow: 0 10px 20px -12px rgb(0 0 0 / 45%);
  color: var(--white);
}

@supports (backdrop-filter: blur(12px)) {
  .site-header {
    background: rgb(13 27 42 / 82%);
    backdrop-filter: blur(12px);
  }
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: var(--header-h);
}

.brand {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--white);
  text-decoration: none;
  white-space: nowrap;
}

.brand:hover {
  color: var(--white);
}

.nav {
  display: none;
}

.nav__list {
  display: flex;
  gap: var(--sp-6);
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav__link {
  position: relative;
  display: inline-block;
  padding-block: var(--sp-2);
  color: var(--white);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.3s var(--ease);
}

.nav__link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(to right, var(--accent), #facc15);
  transition: width 0.3s var(--ease);
}

.nav__link:hover,
.nav__link[aria-current="page"] {
  color: var(--accent);
}

.nav__link:hover::after,
.nav__link[aria-current="page"]::after {
  width: 100%;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--r-md);
  color: var(--white);
  transition: background 0.2s var(--ease);
}

.nav-toggle:hover {
  background: rgb(255 255 255 / 18%);
}

.nav-toggle svg {
  width: 1.5rem;
  height: 1.5rem;
}

.nav-toggle__close {
  display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__open {
  display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__close {
  display: block;
}

.nav-mobile {
  padding-bottom: var(--sp-5);
}

.nav-mobile[hidden] {
  display: none;
}

.nav-mobile__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-mobile__link {
  display: block;
  padding: var(--sp-3) var(--sp-2);
  border-radius: var(--r-md);
  color: var(--white);
  font-weight: 500;
  text-decoration: none;
}

.nav-mobile__link:hover,
.nav-mobile__link[aria-current="page"] {
  background: rgb(255 255 255 / 10%);
  color: var(--accent);
}

@media (min-width: 768px) {
  .nav {
    display: block;
  }

  .nav-toggle,
  .nav-mobile {
    display: none !important;
  }
}

/* -------------------------------------------------------------------------
   07. Boutons
   ---------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.9rem 1.9rem;
  border-radius: var(--r-lg);
  font-weight: 600;
  font-size: var(--fs-base);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
    background-color 0.3s var(--ease), color 0.3s var(--ease),
    border-color 0.3s var(--ease);
}

/* Reflet qui balaie le bouton au survol (ancien .btn-modern) */
.btn::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 -100%;
  width: 100%;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 22%), transparent);
  transition: left 0.5s var(--ease);
  pointer-events: none;
}

.btn:hover::before {
  left: 100%;
}

.btn:hover {
  transform: translateY(-2px) scale(1.03);
}

.btn:active {
  transform: translateY(0) scale(0.99);
}

.btn--lg {
  padding: 1.05rem 2.5rem;
  font-size: var(--fs-lg);
  border-radius: var(--r-xl);
}

.btn--sm {
  padding: 0.5rem 1rem;
  font-size: var(--fs-sm);
}

.btn--primary {
  background: var(--grad-accent);
  color: var(--white);
  box-shadow: var(--shadow-md), var(--shadow-glow);
}

.btn--primary:hover {
  color: var(--white);
  box-shadow: var(--shadow-lg), 0 0 32px rgb(255 107 53 / 55%);
}

.btn--glass {
  background: rgb(255 255 255 / 10%);
  border: 1px solid rgb(255 255 255 / 20%);
  color: var(--white);
}

@supports (backdrop-filter: blur(10px)) {
  .btn--glass {
    backdrop-filter: blur(10px);
  }
}

.btn--glass:hover {
  background: rgb(255 255 255 / 22%);
  color: var(--white);
}

.btn--outline {
  border: 2px solid rgb(255 107 53 / 55%);
  color: var(--accent);
  background: transparent;
}

.btn--outline:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}

.btn--neutral {
  background: var(--gray-200);
  color: var(--gray-600);
}

.btn--neutral:hover {
  background: var(--gray-300);
  color: var(--dark-gray);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.btn[disabled]:hover::before {
  left: -100%;
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: center;
}

/* Lien de retour discret avec flèche */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--gray-600);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s var(--ease), gap 0.2s var(--ease);
}

.back-link:hover {
  color: var(--accent);
  gap: var(--sp-3);
}

.back-link svg {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
}

.back-link--light {
  color: rgb(255 255 255 / 80%);
}

.back-link--light:hover {
  color: var(--white);
}

/* -------------------------------------------------------------------------
   08. Bandeau d'accueil
   ---------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(100svh - var(--header-h));
  padding-block: var(--sp-8);
  overflow: hidden;
  background: var(--grad-hero);
  color: var(--white);
  text-align: center;
}

.hero__orbs {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero__orb {
  position: absolute;
  border-radius: var(--r-full);
  animation: float 6s ease-in-out infinite;
}

.hero__orb--1 {
  top: 12%;
  left: 6%;
  width: 5rem;
  height: 5rem;
  background: rgb(255 107 53 / 20%);
}

.hero__orb--2 {
  top: 28%;
  right: 9%;
  width: 4rem;
  height: 4rem;
  background: rgb(59 130 246 / 20%);
  animation-delay: -2s;
}

.hero__orb--3 {
  bottom: 22%;
  left: 12%;
  width: 3rem;
  height: 3rem;
  background: rgb(168 85 247 / 20%);
  animation-delay: -4s;
}

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

.hero__title {
  font-size: var(--fs-hero);
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-5);
}

.hero__pillars {
  font-size: var(--fs-2xl);
  font-weight: 800;
  margin-bottom: var(--sp-5);
}

.hero__lead {
  max-width: 52rem;
  margin: 0 auto var(--sp-7);
  font-size: var(--fs-lg);
  font-weight: 300;
  font-style: italic;
  color: rgb(255 255 255 / 82%);
  line-height: 1.7;
}

.hero__disclaimer {
  font-weight: 600;
  font-style: normal;
}

/* -------------------------------------------------------------------------
   09. À propos
   ---------------------------------------------------------------------- */
.about {
  display: grid;
  gap: var(--sp-6);
  max-width: 72rem;
  margin-inline: auto;
  text-align: center;
}

.about__text > * + * {
  margin-top: var(--sp-4);
}

.about__lead {
  font-size: var(--fs-lg);
  font-weight: 300;
  color: var(--medium-gray);
  line-height: 1.75;
}

.avatar {
  display: block;
  width: min(16rem, 60vw);
  aspect-ratio: 1;
  margin-inline: auto;
  padding: 4px;
  border-radius: var(--r-full);
  background: var(--grad-accent);
}

.avatar img {
  width: 100%;
  height: 100%;
  border-radius: var(--r-full);
  object-fit: cover;
  background: var(--gray-300);
}

.avatar--sm {
  width: 4rem;
  padding: 2px;
  margin-inline: 0;
}

@media (min-width: 1024px) {
  .about {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--sp-7);
    align-items: center;
    text-align: left;
  }

  .avatar {
    margin-inline: 0;
  }
}

/* -------------------------------------------------------------------------
   10. Cartes & pastilles
   ---------------------------------------------------------------------- */
.cards {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--gray-200);
  border-radius: var(--r-xl);
  background: var(--white);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.card:hover,
.card:focus-within {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}

.card__banner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 8.5rem;
  padding: var(--sp-5);
  font-size: 2.75rem;
  color: var(--white);
  background: var(--grad-finance);
}

.card__banner.is-finance {
  background: var(--grad-finance);
}
.card__banner.is-marketing {
  background: var(--grad-marketing);
}
.card__banner.is-commerce {
  background: var(--grad-commerce);
}
.card__banner.is-informatique {
  background: var(--grad-informatique);
}

.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--sp-3);
  padding: var(--sp-5);
}

.card__title {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--dark-gray);
}

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

.card__title a:hover {
  color: var(--accent);
}

.card__subtitle {
  font-size: var(--fs-sm);
  font-weight: 300;
  color: var(--medium-gray);
}

.card__desc {
  color: var(--medium-gray);
  font-size: var(--fs-base);
}

.card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--gray-100);
  font-size: var(--fs-sm);
  color: var(--gray-500);
}

.meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.meta-item svg {
  width: 1rem;
  height: 1rem;
  flex: none;
}

/* Pastille de catégorie */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.45rem 1rem;
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--white);
  background: var(--grad-finance);
}

.badge.is-finance {
  background: var(--grad-finance);
}
.badge.is-marketing {
  background: var(--grad-marketing);
}
.badge.is-commerce {
  background: var(--grad-commerce);
}
.badge.is-informatique {
  background: var(--grad-informatique);
}

.badge--soft {
  background: var(--gray-100);
  color: var(--medium-gray);
}

/* -------------------------------------------------------------------------
   11. Barre d'outils : recherche + filtres
   ---------------------------------------------------------------------- */
.toolbar {
  display: grid;
  gap: var(--sp-4);
  justify-items: center;
  margin-bottom: var(--sp-6);
}

/* Champ de recherche */
.search {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 34rem;
  border: 2px solid var(--gray-200);
  border-radius: var(--r-full);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgb(255 107 53 / 15%);
}

.search__icon {
  display: flex;
  flex: none;
  padding-left: var(--sp-4);
  color: var(--gray-500);
}

.search__icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.search:focus-within .search__icon {
  color: var(--accent);
}

.search__input {
  flex: 1;
  min-width: 0;
  padding: 0.85rem var(--sp-3);
  border: 0;
  background: none;
  font: inherit;
  color: var(--dark-gray);
  border-radius: var(--r-full);
}

.search__input::placeholder {
  color: var(--gray-500);
}

.search__input:focus {
  outline: none;
}

/* La croix native de Safari/Chrome ferait doublon avec notre bouton. */
.search__input::-webkit-search-cancel-button,
.search__input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.search__clear {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  margin-right: var(--sp-3);
  border-radius: var(--r-full);
  color: var(--gray-500);
  background: var(--gray-100);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.search__clear:hover {
  background: var(--accent);
  color: var(--white);
}

.search__clear svg {
  width: 0.85rem;
  height: 0.85rem;
}

.search__submit {
  margin-right: var(--sp-2);
}

/* Compteur de résultats */
.results-count {
  font-size: var(--fs-sm);
  color: var(--medium-gray);
}

.results-count strong {
  color: var(--accent-600);
  font-weight: 700;
}

/* -------------------------------------------------------------------------
   11b. Filtres par catégorie
   ---------------------------------------------------------------------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

.filter {
  display: inline-block;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--r-full);
  background: var(--white);
  color: var(--medium-gray);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  transition: all 0.25s var(--ease);
}

.filter:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.filter[aria-current="true"] {
  background: var(--grad-accent);
  border-color: transparent;
  color: var(--white);
}

.section__cta {
  margin-top: var(--sp-6);
}

.empty-state {
  padding: var(--sp-7) var(--sp-5);
  border: 1px dashed var(--gray-300);
  border-radius: var(--r-xl);
  text-align: center;
  color: var(--medium-gray);
}

.empty-state__icon {
  font-size: 2.5rem;
  line-height: 1;
  margin-bottom: var(--sp-3);
}

.empty-state__title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: var(--sp-2);
}

.empty-state__term {
  font-weight: 700;
  color: var(--accent-600);
  word-break: break-word;
}

.empty-state .btn {
  margin-top: var(--sp-4);
}

/* -------------------------------------------------------------------------
   12. Fil d'Ariane
   ---------------------------------------------------------------------- */
.breadcrumb {
  margin-bottom: var(--sp-5);
  font-size: var(--fs-sm);
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: 0;
  margin: 0;
  list-style: none;
  color: var(--gray-500);
}

.breadcrumb__item + .breadcrumb__item::before {
  content: "›";
  margin-right: var(--sp-2);
  color: var(--gray-300);
}

.breadcrumb a {
  color: var(--medium-gray);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* -------------------------------------------------------------------------
   13. Article & typographie longue
   ---------------------------------------------------------------------- */
.article {
  padding-block: var(--sp-7) var(--sp-8);
  background: var(--white);
}

/* Sommaire - améliore le maillage interne et la lisibilité par les IA */
.toc {
  max-width: var(--measure);
  margin: 0 auto var(--sp-6);
  padding: var(--sp-5);
  border: 1px solid var(--gray-200);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-md);
  background: var(--light-gray);
}

.toc__title {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: var(--sp-3);
}

.toc__list {
  display: grid;
  gap: var(--sp-2);
  padding-left: 1.1rem;
  font-size: var(--fs-sm);
}

.toc a {
  color: var(--medium-gray);
  text-decoration: none;
}

.toc a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* Corps de l'article - remplace le plugin @tailwindcss/typography */
.prose {
  max-width: var(--measure);
  margin-inline: auto;
  font-size: var(--fs-lg);
  line-height: 1.75;
  color: var(--slate-800);
}

.prose > * + * {
  margin-top: var(--sp-4);
}

.prose h2 {
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--dark-gray);
  margin-top: var(--sp-7);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--gray-200);
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

.prose h3 {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--dark-gray);
  margin-top: var(--sp-6);
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

.prose h4 {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--dark-gray);
  margin-top: var(--sp-5);
}

.prose ul,
.prose ol {
  padding-left: 1.4rem;
}

.prose li + li {
  margin-top: var(--sp-2);
}

.prose li::marker {
  color: var(--accent);
}

.prose a {
  color: var(--accent-600);
  text-decoration: underline;
}

.prose strong {
  font-weight: 700;
  color: var(--dark-gray);
}

.prose blockquote {
  padding: var(--sp-4) var(--sp-5);
  border-left: 4px solid var(--accent);
  background: var(--light-gray);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-style: italic;
  color: var(--medium-gray);
}

.prose figure {
  margin-block: var(--sp-5);
}

.prose figcaption {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  font-style: italic;
  color: var(--gray-500);
  text-align: center;
}

.prose img {
  border-radius: var(--r-lg);
}

/* Tableaux comparatifs - très bien compris par les moteurs génératifs */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--gray-200);
  border-radius: var(--r-lg);
}

.prose table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: var(--fs-base);
}

.prose caption {
  padding: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--medium-gray);
  text-align: left;
}

.prose th,
.prose td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  border-bottom: 1px solid var(--gray-200);
}

.prose thead th {
  background: var(--navy);
  color: var(--white);
  font-weight: 600;
  white-space: nowrap;
}

.prose tbody tr:nth-child(even) {
  background: var(--gray-50);
}

.prose tbody tr:last-child td {
  border-bottom: 0;
}

/* Bloc de formule / code */
.formula {
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--gray-100);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.9;
  overflow-x: auto;
}

/* -------------------------------------------------------------------------
   14. Encarts de contenu
   ---------------------------------------------------------------------- */
.fact-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  margin-block: var(--sp-5);
}

.fact-card {
  padding: var(--sp-5);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.fact-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.fact-card__title {
  font-size: var(--fs-lg);
  font-weight: 700;
  margin-bottom: var(--sp-3);
  color: var(--dark-gray);
}

.fact-card dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-2) var(--sp-3);
  margin: 0;
  font-size: var(--fs-base);
}

.fact-card dt {
  font-weight: 700;
  background: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--accent);
}

.fact-card dd {
  margin: 0;
}

.source-link {
  display: inline-block;
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  font-style: italic;
  color: var(--gray-500);
}

.callout {
  padding: var(--sp-5);
  margin-block: var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--gray-100);
  text-align: center;
}

.callout__title {
  font-size: var(--fs-lg);
  font-weight: 700;
  margin-bottom: var(--sp-3);
}

.callout p {
  font-style: italic;
  color: var(--medium-gray);
  max-width: 40rem;
  margin-inline: auto;
}

/* Bloc « réponse courte » : idéal pour les extraits enrichis et les IA */
.answer-box {
  padding: var(--sp-5);
  margin-block: var(--sp-5);
  border: 1px solid rgb(255 107 53 / 30%);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-md);
  background: rgb(255 107 53 / 5%);
}

.answer-box__title {
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-600);
  margin-bottom: var(--sp-2);
}

.answer-box p {
  margin: 0;
  font-weight: 500;
}

.legal-note {
  display: block;
  margin-top: var(--sp-6);
  font-size: var(--fs-sm);
  font-style: italic;
  text-align: center;
  color: var(--medium-gray);
}

/* -------------------------------------------------------------------------
   15. Signature auteur & pied d'article
   ---------------------------------------------------------------------- */
.article__footer {
  max-width: var(--measure);
  margin: var(--sp-8) auto 0;
  padding-top: var(--sp-6);
  border-top: 1px solid var(--gray-200);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  align-items: center;
}

.author {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  text-align: left;
}

.author__name {
  font-weight: 600;
  color: var(--dark-gray);
}

.author__role {
  display: block;
  font-size: var(--fs-sm);
  font-style: italic;
  color: var(--medium-gray);
}

@media (min-width: 768px) {
  .article__footer {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* Bloc « À lire ensuite » */
.related {
  max-width: var(--measure);
  margin: var(--sp-8) auto 0;
}

.related__title {
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--dark-gray);
  margin-bottom: var(--sp-5);
}

/* -------------------------------------------------------------------------
   15b. Bandeau d'en-tete de page
   Utilise par toutes les pages : fil d'Ariane, titre et introduction sur
   le fond bleu du site. Un seul composant, donc un alignement identique
   partout. Tout est aligne a gauche, y compris le fil d'Ariane.
   ---------------------------------------------------------------------- */
.page-hero {
  padding-block: var(--sp-6) var(--sp-8);
  background: var(--grad-hero);
  color: var(--white);
}

.page-hero--compact {
  padding-block: var(--sp-5) var(--sp-6);
}

.page-hero .breadcrumb__list {
  justify-content: flex-start;
  color: rgb(255 255 255 / 55%);
}

.page-hero .breadcrumb a {
  color: rgb(255 255 255 / 78%);
}

.page-hero .breadcrumb a:hover {
  color: var(--accent);
}

.page-hero .breadcrumb__item + .breadcrumb__item::before {
  color: rgb(255 255 255 / 35%);
}

.page-hero .breadcrumb [aria-current="page"] {
  color: rgb(255 255 255 / 90%);
}

.page-hero__badge {
  margin-bottom: var(--sp-4);
}

.page-hero__title {
  font-size: var(--fs-4xl);
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-4);
}

.page-hero__lead {
  max-width: 46rem;
  font-size: var(--fs-lg);
  font-weight: 300;
  color: rgb(255 255 255 / 80%);
  line-height: 1.7;
}

.page-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  margin-top: var(--sp-5);
  font-size: var(--fs-sm);
  color: rgb(255 255 255 / 65%);
}

.page-hero__meta .meta-item svg {
  width: 1rem;
  height: 1rem;
}

/* -------------------------------------------------------------------------
   15b-bis. Bandeau propre a la page CV
   Volontairement distinct de .page-hero : la photo, le nom, le poste, la
   presentation et les etiquettes de disponibilite forment un bloc a part,
   avec sa mise en page en deux colonnes sur grand ecran.
   ---------------------------------------------------------------------- */
.cv-hero {
  padding-block: var(--sp-6) var(--sp-8);
  background: var(--grad-hero);
  color: var(--white);
}

.cv-hero .breadcrumb__list {
  color: rgb(255 255 255 / 55%);
}

.cv-hero .breadcrumb a {
  color: rgb(255 255 255 / 78%);
}

.cv-hero .breadcrumb a:hover {
  color: var(--accent);
}

.cv-hero .breadcrumb__item + .breadcrumb__item::before {
  color: rgb(255 255 255 / 35%);
}

.cv-hero .breadcrumb [aria-current="page"] {
  color: rgb(255 255 255 / 90%);
}

.cv-hero__inner {
  display: grid;
  gap: var(--sp-6);
  justify-items: center;
  text-align: center;
}

.cv-hero__photo {
  width: min(13rem, 50vw);
}

.cv-hero__name {
  font-size: var(--fs-4xl);
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-3);
}

.cv-hero__job {
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--accent);
  margin-bottom: var(--sp-4);
}

.cv-hero__intro {
  max-width: 46rem;
  font-weight: 300;
  color: rgb(255 255 255 / 80%);
  line-height: 1.75;
  margin-bottom: var(--sp-5);
}

.cv-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

.cv-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.45rem 1rem;
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: var(--r-full);
  background: rgb(255 255 255 / 10%);
  font-size: var(--fs-sm);
  font-weight: 600;
}

@media (min-width: 900px) {
  .cv-hero__inner {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--sp-7);
    align-items: center;
    justify-items: start;
    text-align: left;
  }

  .cv-badges {
    justify-content: flex-start;
  }
}

/* Logos des entreprises */
.logos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5) var(--sp-7);
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

.logo {
  display: block;
  transition: transform 0.3s var(--ease), filter 0.3s var(--ease);
  filter: grayscale(100%);
  opacity: 0.75;
}

.logo:hover {
  filter: none;
  opacity: 1;
  transform: scale(1.06);
}

.logo img {
  width: auto;
  max-width: 9rem;
  max-height: 4rem;
  object-fit: contain;
}

/* Frise des expériences */
.timeline {
  position: relative;
  max-width: 52rem;
  margin-inline: auto;
  padding: 0;
  list-style: none;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0.4rem;
  width: 2px;
  background: linear-gradient(to bottom, var(--accent), var(--accent-2), transparent);
}

.timeline__item {
  position: relative;
  padding-left: var(--sp-6);
  padding-bottom: var(--sp-5);
}

.timeline__item::before {
  content: "";
  position: absolute;
  top: 1.6rem;
  left: 0;
  width: 0.9rem;
  height: 0.9rem;
  border: 2px solid var(--white);
  border-radius: var(--r-full);
  background: var(--grad-accent);
  box-shadow: 0 0 0 3px rgb(255 107 53 / 20%);
}

.timeline__card {
  padding: var(--sp-5);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.timeline__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.timeline__top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
}

.timeline__period {
  font-size: var(--fs-sm);
  color: var(--gray-500);
}

.timeline__title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--dark-gray);
}

.timeline__company {
  margin-bottom: var(--sp-3);
  font-weight: 600;
}

.timeline__company a {
  color: var(--accent-600);
  text-decoration: none;
}

.timeline__company a:hover {
  text-decoration: underline;
}

.timeline__tasks {
  display: grid;
  gap: var(--sp-2);
  padding-left: 1.2rem;
  margin: 0;
  color: var(--medium-gray);
  font-size: var(--fs-base);
}

.timeline__tasks li::marker {
  color: var(--accent);
}

/* Compétences & niveaux de langue */
.skill-list {
  display: grid;
  gap: var(--sp-2);
  padding-left: 1.2rem;
  margin: 0;
  color: var(--medium-gray);
}

.skill-list li::marker {
  color: var(--accent);
}

.level + .level {
  margin-top: var(--sp-4);
}

.level__label {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
  font-weight: 600;
  color: var(--dark-gray);
}

.level__value {
  color: var(--accent-600);
}

.level__track {
  height: 0.6rem;
  border-radius: var(--r-full);
  background: var(--gray-200);
  overflow: hidden;
}

.level__bar {
  height: 100%;
  border-radius: var(--r-full);
  background: var(--grad-accent);
}

/* Largeurs des barres - définies en CSS, la politique de sécurité
   interdisant les attributs style en ligne. */
.level__bar--100 { width: 100%; }
.level__bar--90  { width: 90%; }
.level__bar--80  { width: 80%; }
.level__bar--70  { width: 70%; }
.level__bar--60  { width: 60%; }
.level__bar--50  { width: 50%; }
.level__bar--40  { width: 40%; }
.level__bar--30  { width: 30%; }
.level__bar--20  { width: 20%; }
.level__bar--10  { width: 10%; }

/* Cartes sans bandeau (cursus, projets, associatif) */
.card--pad {
  gap: var(--sp-3);
  padding: var(--sp-5);
}

.card__icon {
  font-size: 2rem;
  line-height: 1;
}

.back-link--forward:hover {
  gap: var(--sp-3);
}

.cv-cta {
  text-align: center;
}

.cv-cta .section__title {
  margin-bottom: var(--sp-5);
}

/* -------------------------------------------------------------------------
   15c. Page contact
   ---------------------------------------------------------------------- */
.contact-card {
  max-width: 34rem;
  margin-inline: auto;
  padding: var(--sp-7) var(--sp-5);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-2xl);
  background: var(--white);
  box-shadow: var(--shadow-md);
  text-align: center;
}

.contact-card__icon {
  font-size: 2.5rem;
  line-height: 1;
  margin-bottom: var(--sp-3);
}

.contact-card__label {
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--medium-gray);
  margin-bottom: var(--sp-2);
}

.contact-card__value {
  font-size: var(--fs-xl);
  font-weight: 700;
  margin-bottom: var(--sp-5);
  word-break: break-word;
}

.contact-card__value a {
  color: var(--dark-gray);
  text-decoration: none;
}

.contact-card__value a:hover {
  color: var(--accent);
}

.contact-socials {
  margin-top: var(--sp-8);
  margin-bottom: 0;
}

.contact-socials__title {
  font-size: var(--fs-2xl);
}

.socials--center {
  justify-content: center;
}

/* Double classe volontaire : .social est defini plus bas, dans la section
   du pied de page. A specificite egale, c'est la derniere regle qui gagne,
   et le fond blanc translucide du pied de page rendait ces icones
   invisibles sur la page contact, dont le fond est clair. */
.social.social--lg {
  width: 3.25rem;
  height: 3.25rem;
  background: var(--navy);
  color: var(--white);
}

.social.social--lg:hover {
  background: var(--accent);
  color: var(--white);
}

.social.social--lg svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: currentColor;
}

/* -------------------------------------------------------------------------
   15d. Mentions légales
   ---------------------------------------------------------------------- */
.legal-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--light-gray);
  font-size: var(--fs-base);
}

.legal-list dt {
  font-weight: 700;
  color: var(--dark-gray);
}

.legal-list dd {
  margin: 0;
}

.legal-updated {
  font-size: var(--fs-sm);
  font-style: italic;
  color: var(--medium-gray);
}

/* -------------------------------------------------------------------------
   16. Quiz
   ---------------------------------------------------------------------- */
.quiz-head {
  padding-block: var(--sp-6);
  background: linear-gradient(to right, var(--navy), var(--slate-800));
  color: var(--white);
}

.quiz-head__top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-5);
}

.quiz-head__counter {
  text-align: right;
}

.quiz-head__counter span:first-child {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: rgb(255 255 255 / 60%);
}

.quiz-head__counter strong {
  font-size: var(--fs-xl);
  font-weight: 700;
}

.quiz-head__title {
  font-size: var(--fs-2xl);
  margin-bottom: var(--sp-4);
}

.progress {
  height: 0.75rem;
  border-radius: var(--r-full);
  background: rgb(255 255 255 / 20%);
  overflow: hidden;
}

.progress__bar {
  height: 100%;
  width: 0;
  border-radius: var(--r-full);
  background: var(--grad-accent);
  transition: width 0.4s var(--ease);
}

.quiz-body {
  padding-block: var(--sp-8);
  background: var(--white);
}

.question-card {
  max-width: 52rem;
  margin-inline: auto;
  padding: var(--sp-6);
  border: 1px solid var(--gray-100);
  border-radius: var(--r-2xl);
  background: var(--white);
  box-shadow: var(--shadow-lg);
}

@media (min-width: 768px) {
  .question-card {
    padding: var(--sp-7);
  }
}

.question-card__text {
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--dark-gray);
  line-height: 1.4;
  margin-bottom: var(--sp-6);
}

.answers {
  display: grid;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
  padding: 0;
  border: 0;
}

.answers legend {
  padding: 0;
}

.answer {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  width: 100%;
  padding: var(--sp-4) var(--sp-5);
  border: 2px solid var(--gray-200);
  border-radius: var(--r-lg);
  background: var(--gray-50);
  font-weight: 500;
  color: var(--dark-gray);
  text-align: left;
  transition: all 0.25s var(--ease);
}

.answer:hover {
  background: var(--gray-100);
  border-color: var(--gray-300);
}

.answer__letter {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--gray-300);
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.answer[aria-pressed="true"] {
  border-color: var(--accent);
  background: rgb(255 107 53 / 8%);
  color: var(--accent-600);
}

.answer[aria-pressed="true"] .answer__letter {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--white);
}

.quiz-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  justify-content: space-between;
}

/* Écran de résultats */
.results {
  display: flex;
  align-items: center;
  min-height: calc(100svh - var(--header-h));
  padding-block: var(--sp-8);
  background: var(--grad-hero);
  color: var(--white);
  text-align: center;
}

.results__panel {
  max-width: 52rem;
  margin-inline: auto;
  padding: var(--sp-7) var(--sp-5);
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: var(--r-2xl);
  background: rgb(255 255 255 / 10%);
}

@supports (backdrop-filter: blur(10px)) {
  .results__panel {
    backdrop-filter: blur(10px);
  }
}

.results__icon {
  font-size: 4rem;
  line-height: 1;
  margin-bottom: var(--sp-5);
}

.results__title {
  font-size: var(--fs-3xl);
  margin-bottom: var(--sp-4);
}

.results__score {
  font-size: clamp(3rem, 2rem + 6vw, 5rem);
  font-weight: 900;
  line-height: 1;
  margin-bottom: var(--sp-3);
}

.results__message {
  font-size: var(--fs-lg);
  font-weight: 300;
  color: rgb(255 255 255 / 82%);
  margin-bottom: var(--sp-6);
}

.stats {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  margin-bottom: var(--sp-6);
}

.stat {
  padding: var(--sp-5);
  border-radius: var(--r-xl);
  background: rgb(255 255 255 / 10%);
}

.stat__value {
  font-size: var(--fs-2xl);
  font-weight: 700;
}

.stat__label {
  font-size: var(--fs-sm);
  color: rgb(255 255 255 / 60%);
}

.stat--ok .stat__value {
  color: var(--success);
}
.stat--ko .stat__value {
  color: var(--danger);
}
.stat--time .stat__value {
  color: var(--info);
}

/* Correction détaillée */
.review {
  margin-top: var(--sp-6);
  text-align: left;
}

.review__item {
  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
  border-radius: var(--r-md);
  background: rgb(255 255 255 / 8%);
  border-left: 4px solid var(--success);
}

.review__item.is-wrong {
  border-left-color: var(--danger);
}

.review__question {
  font-weight: 600;
  margin-bottom: var(--sp-2);
}

.review__answer,
.review__explanation {
  font-size: var(--fs-sm);
  color: rgb(255 255 255 / 78%);
}

/* Bascule entre la version interactive et la version statique.
   Le choix est fait par le CSS, avant le premier rendu : aucun
   clignotement, contrairement à une bascule pilotée par JavaScript.

   Sans JavaScript  → version statique visible, interactive masquée.
   Avec JavaScript  → l'inverse, et le quiz démarre immédiatement.
   Si quiz.js échoue → il pose .is-fallback et la statique réapparaît. */
.quiz-app {
  display: none;
}

.js .quiz-app {
  display: block;
}

.js .quiz-static {
  display: none;
}

.js .quiz-static.is-fallback {
  display: block;
}

.js .quiz-app.is-fallback {
  display: none;
}

/* La section statique porte le bandeau : son propre padding haut est retire. */
.quiz-static {
  padding-top: 0;
}

.quiz-static__body {
  padding-top: var(--sp-7);
}

/* Version statique : lisible sans JavaScript et indexable par les robots. */
.quiz-static__list {
  display: grid;
  gap: var(--sp-6);
  padding-left: 1.4rem;
  margin-bottom: var(--sp-6);
}

.quiz-static__question {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: var(--sp-3);
}

.quiz-static__list ul {
  display: grid;
  gap: var(--sp-2);
  color: var(--medium-gray);
}

.quiz-static__list li::marker {
  color: var(--accent);
}

[hidden] {
  display: none !important;
}

/* -------------------------------------------------------------------------
   17. Vidéo
   ---------------------------------------------------------------------- */
.video-page {
  padding-block: var(--sp-7) var(--sp-8);
  background: var(--gray-900);
}

.video-frame {
  max-width: 72rem;
  margin: 0 auto var(--sp-6);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow-lg);
}

.video-frame > div {
  position: relative;
  aspect-ratio: 16 / 9;
}

.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-info {
  max-width: 72rem;
  margin-inline: auto;
  padding: var(--sp-6);
  border-radius: var(--r-xl);
  background: var(--white);
  box-shadow: var(--shadow-lg);
}

.video-info__title {
  font-size: var(--fs-3xl);
  font-weight: 900;
  color: var(--dark-gray);
  margin-block: var(--sp-4) var(--sp-3);
}

/* -------------------------------------------------------------------------
   18. Pied de page
   ---------------------------------------------------------------------- */
.site-footer {
  padding-block: var(--sp-8) var(--sp-6);
  background: #000;
  color: var(--white);
}

.footer-grid {
  display: grid;
  gap: var(--sp-6);
  margin-bottom: var(--sp-7);
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--sp-7);
  }
}

.footer-brand__name {
  font-size: var(--fs-xl);
  font-weight: 700;
  margin-bottom: var(--sp-1);
}

.footer-brand__tagline {
  color: rgb(255 255 255 / 60%);
  margin-bottom: var(--sp-5);
}

.socials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding: 0;
  margin: 0;
  list-style: none;
}

.social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--r-md);
  background: rgb(255 255 255 / 10%);
  color: var(--white);
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}

.social:hover {
  background: var(--accent);
  color: var(--white);
  transform: scale(1.1);
}

.social svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

.footer-col__title {
  font-size: var(--fs-lg);
  font-weight: 600;
  margin-bottom: var(--sp-4);
}

.footer-links {
  display: grid;
  gap: var(--sp-3);
  padding: 0;
  margin: 0;
  list-style: none;
}

.footer-links a {
  color: rgb(255 255 255 / 70%);
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--accent);
}

.name-variants {
  margin-top: var(--sp-6);
  font-size: var(--fs-sm);
  font-style: italic;
  color: rgb(255 255 255 / 55%);
}

.footer-bottom {
  padding-top: var(--sp-5);
  border-top: 1px solid rgb(255 255 255 / 10%);
  text-align: center;
  color: rgb(255 255 255 / 60%);
  font-size: var(--fs-sm);
}

.footer-bottom p + p {
  margin-top: var(--sp-2);
}

/* -------------------------------------------------------------------------
   19. Animations
   ---------------------------------------------------------------------- */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes shimmer {
  from {
    background-position: -200% 0;
  }
  to {
    background-position: 200% 0;
  }
}

.animate-slide-up {
  animation: slideUp 0.8s var(--ease) both;
}

.animate-fade-in {
  animation: fadeIn 0.6s var(--ease) both;
}

/* Révélation au défilement, activée par site.js.
   Sans JavaScript, `.reveal` reste visible : aucun contenu n'est masqué. */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  will-change: opacity, transform;
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* -------------------------------------------------------------------------
   20. Impression & préférences système
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }

  .btn:hover {
    transform: none;
  }
}

@media print {
  .site-header,
  .site-footer,
  .btn,
  .back-link,
  .hero__orbs,
  .toc,
  .skip-link {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
    font-size: 11pt;
  }

  .prose {
    max-width: none;
  }

  .prose a::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    word-break: break-all;
  }
}


/* -------------------------------------------------------------------------
   22. Quiz : titre et bloc des questions

       Section AJOUTÉE. Elle ne modifie aucune règle existante : elle
       n'introduit que des sélecteurs nouveaux et réutilise les jetons de
       conception de la section 02.
   ---------------------------------------------------------------------- */

/* Le titre du quiz interactif est passé de <p> à <h1> : Googlebot exécute
   le JavaScript, et rendait donc une page sans aucun titre de niveau 1.
   Ces trois déclarations lui rendent l'apparence EXACTE du <p> qu'il
   remplace - la règle h1..h4 de la section 03 imposerait sinon une graisse
   800 et une autre interlettre. Aucun changement visible à l'écran. */
h1.quiz-head__title {
  font-weight: 400;
  line-height: 1.65;
  text-wrap: pretty;
}

/* Bloc « Les N questions, leurs réponses et leurs explications ».
   Ouvert par défaut dans le HTML, donc entièrement déplié sans
   JavaScript ; quiz.js le referme au démarrage du quiz interactif. */
.quiz-all__details {
  margin-bottom: var(--sp-6);
}

.quiz-all__summary {
  padding: var(--sp-3) 0;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
}

.quiz-all__summary:hover {
  color: var(--accent-600);
}

/* Le contenu déplié respire, sans coller au libellé. */
.quiz-all__details[open] .quiz-all__summary {
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--gray-200);
}


/* -------------------------------------------------------------------------
   23. Cartes entièrement cliquables

       Section AJOUTÉE. Elle n'introduit que des sélecteurs nouveaux et ne
       modifie aucune règle existante.

       Le problème : seul le titre était cliquable. Sur une carte qui
       ressemble à un bloc cliquable, viser le titre n'est pas intuitif -
       et sur mobile, la cible est petite.

       La solution retenue est le « lien étiré » : le <a> du titre projette
       un calque transparent sur toute la carte. Aucun JavaScript, aucun
       lien dupliqué, aucun changement de balisage.

       Pourquoi pas d'autres approches :
         - envelopper la carte dans un <a> ferait lire l'intégralité du
           texte comme libellé du lien par les lecteurs d'écran ;
         - un onclick en JavaScript casserait le clic milieu, le
           « ouvrir dans un nouvel onglet », et ne fonctionnerait pas sans
           JavaScript ;
         - un second lien sur la carte créerait deux arrêts au clavier pour
           une même destination, et diluerait le signal pour les moteurs.

       Effet de bord assumé : le texte de la carte n'est plus sélectionnable
       à la souris, le calque interceptant le glisser. C'est le prix d'une
       carte cliquable de bout en bout.
   ---------------------------------------------------------------------- */
.card {
  position: relative;
}

/* Le calque cliquable. Il appartient au lien du titre : survoler n'importe
   quel point de la carte revient donc à survoler ce lien, ce qui déclenche
   naturellement le curseur main et la mise en couleur du titre. */
.card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Au clavier, l'anneau de focus n'entourerait que le texte du titre. On le
   porte au niveau de la carte, qui est la vraie cible.
   `:has()` n'est pas connu des navigateurs anciens : ils conservent alors
   l'anneau par défaut sur le titre, qui reste parfaitement utilisable. */
.card:has(a:focus-visible) {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* L'anneau serait sinon dessiné deux fois, sur la carte et sur le titre. */
.card:has(a:focus-visible) .card__title a:focus-visible {
  outline: none;
}

/* -------------------------------------------------------------------------
   24. Vidéo différée dans un article
   25. Pastille de catégorie & pied d'article
   26. Le résumé d'article, en chapô
   27. Illustrations d'article et de quiz
   Le lecteur YouTube n'est chargé qu'au clic : tant que le visiteur n'a rien
   demandé, aucune requête ne part vers un tiers.
   ---------------------------------------------------------------------- */
.article-media {
  margin-block: var(--sp-5);
}

.article-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

.article-media figcaption,
figure.video figcaption {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--gray-500);
  text-align: center;
}

figure.video {
  margin-block: var(--sp-5);
}

figure.video iframe,
.video__facade {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--r-lg);
}

.video__facade {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-5);
  cursor: pointer;
  color: var(--white);
  text-align: center;
  background: var(--gray-900);
  box-shadow: var(--shadow-md);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.video__facade:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.video__play {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: var(--grad-accent);
  box-shadow: var(--shadow-md);
  transition: transform 0.3s var(--ease);
}

/* Le triangle de lecture, dessiné sans image. */
.video__play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform: translate(-35%, -50%);
  border-block: 0.85rem solid transparent;
  border-left: 1.4rem solid var(--white);
}

.video__facade:hover .video__play {
  transform: scale(1.08);
}

.video__texte {
  display: block;
}

.video__titre {
  display: block;
  font-size: var(--fs-lg);
  font-weight: 700;
}

.video__avis {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--gray-300);
}

@media (prefers-reduced-motion: reduce) {
  .video__facade,
  .video__facade:hover,
  .video__facade:hover .video__play {
    transform: none;
    transition: none;
  }
}

/* -------------------------------------------------------------------------
   25. Pastille de catégorie & pied d'article
   ---------------------------------------------------------------------- */

/* --- La pastille de catégorie -------------------------------------------
   Seule la variante colorée est touchée : la version grise (.badge--soft)
   des cartes et du CV reste telle quelle.
   Le dégradé était posé à plat. On lui ajoute la profondeur du reste du
   site : une ombre portée teintée de la couleur de la rubrique, un liseré
   clair qui détache la pastille du fond sombre, et un disque translucide
   derrière l'émoji pour qu'il se lise comme une icône et non comme un
   caractère flottant. */
.badge:not(.badge--soft) {
  --badge-teinte: 37 99 235;
  padding: 0.4rem 1.15rem 0.4rem 0.4rem;
  letter-spacing: 0.005em;
  border: 1px solid rgb(255 255 255 / 18%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 22%),
    0 6px 18px -6px rgb(var(--badge-teinte) / 70%);
}

.badge.is-finance      { --badge-teinte: 37 99 235; }
.badge.is-marketing    { --badge-teinte: 147 51 234; }
.badge.is-commerce     { --badge-teinte: 5 150 105; }
.badge.is-informatique { --badge-teinte: 8 145 178; }

/* L'émoji, posé sur son propre disque. */
.badge:not(.badge--soft) > span[aria-hidden="true"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 50%;
  font-size: 0.92em;
  line-height: 1;
  background: rgb(255 255 255 / 16%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%);
}

/* --- Le pied d'article ---------------------------------------------------
   La largeur de LECTURE reste à --measure : le texte de l'article n'est pas
   touché. Seul le pied s'élargit, pour que la signature et les deux boutons
   tiennent sur une seule ligne au lieu de se replier l'un sous l'autre. */
.article__footer {
  max-width: var(--measure-pied);
}

@media (min-width: 768px) {
  .article__footer {
    align-items: center;
    gap: var(--sp-6);
  }

  /* La signature prend la place disponible, les boutons gardent la leur. */
  .article__footer .author {
    flex: 1 1 auto;
    min-width: 0;
  }

  .article__footer .btn-group {
    flex: 0 0 auto;
    flex-wrap: nowrap;
  }

  .article__footer .btn-group .btn,
  .article__footer .author__name,
  .article__footer .author__role {
    white-space: nowrap;
  }
}

/* -------------------------------------------------------------------------
   26. Le résumé d'article, en chapô
   ---------------------------------------------------------------------- */

/* Le bloc « En résumé » empruntait toute la grammaire de l'avertissement :
   bordure orange sur quatre côtés, fond teinté, barre latérale épaisse et
   titre en capitales orange. Quatre signaux d'alerte pour une simple
   introduction — le lecteur se crispait au lieu de se poser.

   Il devient un chapô, comme en presse écrite : pas d'encadré, un texte
   plus grand et plus aéré que le corps, un libellé discret, et un simple
   filet pour marquer la fin de l'introduction. L'orange reste, réduit à un
   trait de vingt pixels : une ponctuation, plus une alarme. */
.answer-box {
  padding: 0 0 var(--sp-6);
  margin-block: 0 var(--sp-6);
  border: 0;
  border-bottom: 1px solid var(--gray-200);
  border-radius: 0;
  background: none;
}

.answer-box__title {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-500);
}

/* Le seul rappel de couleur : un trait court, avant le libellé. */
.answer-box__title::before {
  content: "";
  flex: 0 0 auto;
  width: 1.25rem;
  height: 3px;
  border-radius: 3px;
  background: var(--grad-accent);
}

.answer-box p {
  font-size: var(--fs-lg);
  font-weight: 400;
  line-height: 1.75;
  color: var(--medium-gray);
}

/* -------------------------------------------------------------------------
   27. Illustrations d'article et de quiz
   ---------------------------------------------------------------------- */

/* --- Sur une carte -------------------------------------------------------
   L'image occupe exactement la place du bandeau dégradé, ni plus ni moins :
   les cartes avec et sans illustration gardent ainsi la même hauteur, et la
   grille reste alignée. Le recadrage se fait par object-fit, jamais par
   déformation. */
.card__banner--image {
  position: relative;
  padding: 0;
  overflow: hidden;
}

.card__banner--image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}