/* ==========================================================================
   Luc Truntzler, formateur et consultant IA a Toulouse
   Charte : sombre editorial. Bleu structurel, orange reserve au CTA et au compteur.
   Voir docs/04-CHARTE-GRAPHIQUE.md
   ========================================================================== */

/* --------------------------------------------------------------- Polices */
/* Archivo instancie en largeur « expanded » (wdth 125 fige), graisses 600 a 800.
   Ne jamais declarer font-stretch : l'axe de largeur a ete retire du fichier. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('../fonts/archivo-expanded-600-800.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/inter-400-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------- Variables */
:root {
  /* Fonds */
  --fond:          #12161C;
  --fond-eleve:    #1A2029;
  --fond-clair:    #F5F6F8;

  /* Textes */
  --texte:         #EDEFF2;
  --texte-doux:    #99A1AC;
  --texte-sombre:  #12161C;

  /* Accents. Le bleu clair est celui qui passe le contraste AA en texte
     courant sur fond eleve (5,15:1). Le bleu vif reste pour la structure. */
  --bleu:          #2E7FF0;
  --bleu-clair:    #4A90F5;
  --bleu-sourd:    #1B4E96;
  --orange:        #FF7A18;
  --orange-sombre: #D65E06;

  /* Utilitaires */
  --bordure:       rgba(237, 239, 242, .12);
  --bordure-forte: rgba(237, 239, 242, .22);
  --ombre:         0 18px 48px rgba(0, 0, 0, .45);

  /* Typographie fluide */
  /* Bornes calculees sur les largeurs reelles en Archivo Expanded 800 :
     en haut, 4,5rem est le maximum ou « FORMATEUR ET » (743 px) et
     « IA À TOULOUSE » (725 px) tiennent dans les 760 px de la colonne de texte ;
     en bas, 1,75rem garantit que « CONSULTANT », le mot le plus long et
     insecable, tienne encore sur un ecran de 320 px. */
  --t-hero:    clamp(1.75rem, 8.2vw, 4.5rem);
  --t-section: clamp(1.85rem, 4.4vw, 3.15rem);
  --t-titre:   clamp(1.2rem, 2.4vw, 1.55rem);
  --t-texte:   clamp(1rem, 1.1vw, 1.0625rem);
  --t-petit:   .875rem;

  /* Espacements */
  --e-1: 4px;  --e-2: 8px;   --e-3: 12px;  --e-4: 16px;  --e-5: 24px;
  --e-6: 32px; --e-7: 48px;  --e-8: 64px;  --e-9: 96px;  --e-10: 128px;

  --largeur:   1200px;
  --lecture:   68ch;
  /* Rythme vertical entre sections. Reduit en v1.1 : a 160 px, l'espace cumule
     entre deux sections atteignait 320 px, soit un tiers de l'ecran, ce qui
     donnait des trous perceptibles apres les sections courtes. */
  --rythme:    clamp(64px, 7.6vw, 108px);

  --duree-rapide: 180ms;
  --duree:        280ms;
  --duree-lente:  600ms;
  --courbe:       cubic-bezier(.22, 1, .36, 1);
}

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

html {
  scroll-behavior: smooth;
  /* Compense la hauteur du bandeau fixe quand on suit une ancre */
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

/* Alias d'ancre, invisible et sans effet sur la mise en page.
   display:block est indispensable : un span vide laisse en flux entre deux
   sections fabriquerait une boite anonyme portant une ligne, donc quelques
   pixels de hauteur parasites. */
.ancre-alias {
  display: block;
  height: 0;
  margin: 0;
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--t-texte);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 var(--e-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--bleu-clair); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--texte); }

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

::selection { background: var(--bleu); color: #fff; }

/* Lien d'evitement */
.saut {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--orange);
  color: var(--texte-sombre);
  padding: var(--e-3) var(--e-5);
  font-weight: 600;
  border-radius: 0 0 4px 0;
}
.saut:focus { left: 0; }

/* --------------------------------------------------------------- Liseres */
.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--e-5);
}
/* Sur les tres petits ecrans, chaque pixel compte pour la tenue du titre. */
@media (max-width: 400px) { .conteneur { padding-inline: var(--e-4); } }
@media (min-width: 768px) { .conteneur { padding-inline: var(--e-7); } }

.section { padding-block: var(--rythme); }
.section--serre { padding-block: calc(var(--rythme) * .6); }

.section-titre {
  font-size: var(--t-section);
  margin-bottom: var(--e-5);
}
.section-intro {
  max-width: var(--lecture);
  color: var(--texte-doux);
  font-size: 1.0625rem;
  margin-bottom: var(--e-8);
}
.section-intro strong { color: var(--texte); font-weight: 600; }
.section-intro--collee { margin-bottom: 0; }

.surtitre {
  font-family: 'Inter', sans-serif;
  font-size: var(--t-petit);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bleu-clair);
  margin-bottom: var(--e-3);
  display: block;
}

/* --------------------------------------------------------------- Boutons */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: 52px;
  padding: var(--e-3) var(--e-6);
  border: 0;
  border-radius: 4px;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duree-rapide) ease-out,
              transform var(--duree-rapide) ease-out,
              box-shadow var(--duree-rapide) ease-out;
}

/* Regle d'or de la charte : l'orange est reserve au bouton de contact
   et au chiffre du compteur. Texte en anthracite, jamais en blanc. */
.bouton--principal {
  background: var(--orange);
  color: var(--texte-sombre);
  box-shadow: 0 4px 16px rgba(255, 122, 24, .22);
}
.bouton--principal:hover,
.bouton--principal:focus-visible {
  background: var(--orange-sombre);
  color: var(--texte-sombre);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(255, 122, 24, .3);
}

.bouton--secondaire {
  background: transparent;
  color: var(--texte);
  border: 1px solid var(--bordure-forte);
}
.bouton--secondaire:hover,
.bouton--secondaire:focus-visible {
  background: var(--bleu);
  border-color: var(--bleu);
  color: #fff;
}

.bouton--compact { min-height: 44px; padding: var(--e-2) var(--e-5); font-size: .9375rem; }
.bouton--pleine-largeur { width: 100%; }

/* --------------------------------------------------------------- Bandeau */
.bandeau {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  transition: background var(--duree) ease-out,
              border-color var(--duree) ease-out,
              backdrop-filter var(--duree) ease-out;
  border-bottom: 1px solid transparent;
}
.bandeau.est-pose {
  background: rgba(18, 22, 28, .88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--bordure);
}
.bandeau__interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
  min-height: 72px;
}
.bandeau__marque {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--texte);
  text-decoration: none;
  white-space: nowrap;
}
.bandeau__marque:hover { color: var(--texte); }
.bandeau__nav { display: none; gap: var(--e-6); }
@media (min-width: 1024px) { .bandeau__nav { display: flex; } }
.bandeau__nav a {
  color: var(--texte-doux);
  text-decoration: none;
  font-size: .9375rem;
  font-weight: 500;
  transition: color var(--duree-rapide) ease-out;
}
.bandeau__nav a:hover { color: var(--texte); }

/* ------------------------------------------------------------------ Hero */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-block: 104px var(--e-9);
  overflow: hidden;
}
.hero__fond {
  position: absolute;
  inset: 0;
  z-index: 0;
}
/* Le <picture> doit porter la hauteur, sinon le height:100% de l'<img>
   n'a aucun conteneur de reference et l'image ne s'affiche pas. */
.hero__fond picture,
.respiration__fond picture { display: block; width: 100%; height: 100%; }

.hero__fond img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Recadrage mobile : le visage est dans le tiers gauche du cadrage 9:16,
     on le ramene vers le centre plutot que de le laisser coller au bord. */
  object-position: 40% center;
}
@media (min-width: 900px) {
  .hero__fond img { object-position: center center; }
}
/* Voile : sert uniquement la lisibilite du texte, l'original est en 7008 px */
/* Voile mobile : le texte occupe presque toute la hauteur, la photo ne peut
   respirer que dans la bande situee entre le titre et l'accroche. On y allege
   le voile, et on assombrit franchement le haut (bandeau fixe et logo du
   congres) comme le bas (accroche, labels, bouton). */
.hero__voile {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(18, 22, 28, .93) 0%,
      rgba(18, 22, 28, .74) 12%,
      rgba(18, 22, 28, .20) 36%,
      rgba(18, 22, 28, .58) 54%,
      rgba(18, 22, 28, .88) 74%,
      rgba(18, 22, 28, .97) 100%);
}
@media (min-width: 900px) {
  /* Deux zones : le texte tient dans la moitie gauche, Luc et le lettrage blanc
     occupent la droite. Le voile est opaque sous le texte puis s'efface vite,
     sinon il ecrase les seules zones claires de la photo. */
  .hero__voile {
    background:
      linear-gradient(90deg,
        rgba(18, 22, 28, .96) 0%,
        rgba(18, 22, 28, .93) 34%,
        rgba(18, 22, 28, .55) 52%,
        rgba(18, 22, 28, .12) 72%,
        rgba(18, 22, 28, 0) 100%),
      /* Le haut est fortement assombri : il porte le bandeau fixe, et il masque
         le logo du congres present en haut a droite de la photo d'origine. */
      linear-gradient(180deg,
        rgba(18, 22, 28, .92) 0%,
        rgba(18, 22, 28, .55) 11%,
        rgba(18, 22, 28, 0) 26%,
        rgba(18, 22, 28, 0) 74%,
        rgba(18, 22, 28, .45) 100%);
  }
}
.hero__contenu { position: relative; z-index: 2; width: 100%; }
/* On contraint les enfants, pas le conteneur : reduire le max-width du
   conteneur le recentrerait (il porte margin-inline:auto). */
@media (min-width: 900px)  { .hero__contenu > * { max-width: 700px; } }
@media (min-width: 1240px) { .hero__contenu > * { max-width: 760px; } }

.hero__titre {
  font-size: var(--t-hero);
  margin-bottom: var(--e-5);
  /* Sans cela, l'equilibrage isole des lignes d'un seul mot (« ET ») */
  text-wrap: normal;
}
.hero__titre .accent { color: var(--bleu); display: block; }
.hero__accroche {
  font-size: clamp(1.0625rem, 1.8vw, 1.3125rem);
  color: var(--texte);
  max-width: 46ch;
  margin-bottom: var(--e-6);
  font-weight: 400;
}
.hero__accroche strong { font-weight: 600; }

.labels {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-3);
  list-style: none;
  margin: 0 0 var(--e-7);
  padding: 0;
}
.labels li {
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texte);
  border: 1px solid var(--bordure-forte);
  border-radius: 999px;
  padding: 6px var(--e-4);
  background: rgba(18, 22, 28, .5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--e-4); align-items: center; }
.hero__mention { font-size: var(--t-petit); color: var(--texte-doux); }

/* -------------------------------------------------------------- Compteur */
.compteur {
  border-block: 1px solid var(--bordure);
  background: linear-gradient(180deg, rgba(46, 127, 240, .05), transparent);
}
.compteur__grille {
  display: grid;
  gap: var(--e-6);
  align-items: center;
}
@media (min-width: 860px) {
  .compteur__grille { grid-template-columns: auto 1fr; gap: var(--e-9); }
}
.compteur__chiffre {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: clamp(3.75rem, 11vw, 8rem);
  line-height: .9;
  letter-spacing: -.03em;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
.compteur__libelle {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  line-height: 1.15;
  margin-bottom: var(--e-3);
}
.compteur__mention {
  font-size: var(--t-petit);
  color: var(--texte-doux);
  max-width: 52ch;
  margin: 0;
}

/* -------------------------------------------------------------- Missions */
.missions {
  display: grid;
  gap: var(--e-5);
}
@media (min-width: 900px) { .missions { grid-template-columns: repeat(3, 1fr); } }

.mission {
  background: var(--fond-eleve);
  border: 1px solid var(--bordure);
  border-top: 2px solid var(--bleu);
  border-radius: 6px;
  padding: var(--e-6);
  display: flex;
  flex-direction: column;
  transition: transform var(--duree) var(--courbe),
              box-shadow var(--duree) var(--courbe),
              border-color var(--duree) var(--courbe);
}
.mission:hover {
  transform: translateY(-4px);
  box-shadow: var(--ombre);
  border-color: var(--bordure-forte);
  border-top-color: var(--bleu);
}
.mission__numero {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: .875rem;
  letter-spacing: .1em;
  color: var(--bleu-clair);
  margin-bottom: var(--e-3);
}
.mission__titre { font-size: var(--t-titre); margin-bottom: var(--e-4); }
.mission__resume { color: var(--texte-doux); margin-bottom: var(--e-5); flex-grow: 1; }
.mission__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-4);
  font-size: var(--t-petit);
  color: var(--texte-doux);
  margin-bottom: var(--e-5);
  padding-bottom: var(--e-5);
  border-bottom: 1px solid var(--bordure);
}
.mission__meta strong { color: var(--texte); font-weight: 600; }

/* Accordeons : <details> natif, donc fonctionnels sans JavaScript */
.repli { border-top: 1px solid var(--bordure); }
.repli:first-of-type { border-top: 0; }
.repli__resume {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  cursor: pointer;
  list-style: none;
  padding-block: var(--e-4);
  font-weight: 600;
  color: var(--texte);
  min-height: 44px;
}
.repli__resume::-webkit-details-marker { display: none; }
.repli__resume:hover { color: var(--bleu-clair); }
.repli__chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform var(--duree) ease;
  opacity: .6;
}
.repli[open] > .repli__resume .repli__chevron {
  transform: rotate(-135deg) translate(-5px, -5px);
}
.repli__corps { padding-bottom: var(--e-5); color: var(--texte-doux); }
.repli__corps h4 {
  font-size: .8125rem;
  letter-spacing: .1em;
  color: var(--bleu-clair);
  margin: var(--e-5) 0 var(--e-3);
}
.repli__corps h4:first-child { margin-top: 0; }
.repli__corps ul { margin: 0 0 var(--e-4); padding-left: 1.2em; }
.repli__corps li { margin-bottom: var(--e-2); }
.repli__corps li::marker { color: var(--bleu); }

.mission .repli__resume { font-size: .9375rem; }
.mission .repli__corps { font-size: .9375rem; }

.prerequis {
  display: block;
  border-left: 2px solid var(--bleu);
  background: rgba(46, 127, 240, .08);
  padding: var(--e-3) var(--e-4);
  margin-bottom: var(--e-4);
  font-size: .9375rem;
  color: var(--texte);
  border-radius: 0 4px 4px 0;
}

/* --------------------------------------------------------------- Bandeau photo */
.respiration {
  position: relative;
  min-height: clamp(340px, 52vh, 560px);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.respiration__fond { position: absolute; inset: 0; z-index: 0; will-change: transform; }
.respiration__fond img { width: 100%; height: 100%; object-fit: cover; }
/* Voile des bandeaux photo. axe-core n'evalue pas le contraste d'un texte pose
   sur une image : ce voile est notre seule garantie de lisibilite, il doit donc
   rester franc sous la colonne de texte. */
.respiration::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg,
    rgba(18, 22, 28, .96) 0%,
    rgba(18, 22, 28, .90) 34%,
    rgba(18, 22, 28, .52) 58%,
    rgba(18, 22, 28, .22) 100%);
}
.respiration__texte {
  position: relative;
  z-index: 2;
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 3.6vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  max-width: 22ch;
}
.respiration__source {
  position: relative;
  z-index: 2;
  display: block;
  margin-top: var(--e-4);
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--t-petit);
  /* Pas de gris ici : le fond est une photo, le gris doux n'y tient pas. */
  color: var(--texte);
  opacity: .92;
}

/* -------------------------------------------------------------------- Bio */
.bio__grille { display: grid; gap: var(--e-7); }
@media (min-width: 900px) {
  .bio__grille { grid-template-columns: 300px 1fr; gap: var(--e-9); align-items: start; }
}
.bio__portrait {
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--bordure);
  max-width: 300px;
}
.bio__texte { max-width: var(--lecture); }
.bio__texte p { color: var(--texte-doux); }
.bio__texte strong { color: var(--texte); font-weight: 600; }

/* Occupe les deux colonnes de .bio__grille : la colonne du portrait serait
   sinon vide sur toute cette hauteur, ce qui creusait un trou visible. */
.reseau {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--e-5);
  margin-top: var(--e-6);
  padding-top: var(--e-6);
  border-top: 1px solid var(--bordure);
}
@media (min-width: 620px) { .reseau { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .reseau { grid-template-columns: repeat(4, 1fr); gap: var(--e-6); } }
.reseau__bloc h3 {
  font-size: .8125rem;
  letter-spacing: .1em;
  color: var(--bleu-clair);
  margin-bottom: var(--e-2);
}
.reseau__bloc p { font-size: .9375rem; color: var(--texte-doux); margin: 0; }

/* ----------------------------------------------------------------- Livres */
/* La colonne de gauche doit tenir 3 couvertures de 220 px plus 2 gouttieres,
   soit 724 px. Avec 1104 px utiles, cela impose une colonne trophee de 300 px
   et une gouttiere de 64 px, sinon la vitrine passe a la ligne. */
.livres__grille { display: grid; gap: var(--e-7); align-items: start; }
@media (min-width: 900px) { .livres__grille { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--e-8); } }

/* Grille adaptative : 3 couvertures de 220 px sur ordinateur, 2 colonnes
   ajustees sur mobile. En flex avec une largeur fixe, on n'en tenait qu'une
   seule par ligne sous 400 px, ce qui etirait la section a l'infini. */
/* Points de rupture explicites plutot qu'auto-fill : avec
   minmax(140px, 220px), le navigateur calcule le nombre de colonnes sur le
   maximum quand il est defini, et n'en gardait donc qu'une seule sous 500 px. */
.vitrine {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-5);
}
@media (min-width: 700px) {
  .vitrine {
    grid-template-columns: repeat(3, minmax(0, 220px));
    gap: var(--e-6);
    justify-content: start;
  }
}
.livre { width: 100%; max-width: 220px; }

/* Les 3 couvertures partagent desormais exactement la meme proportion (0,765),
   obtenue a la production par un remplissage invisible : bleu pour le Guide,
   noir pour La Creativite, voir tools/build-images.sh. Elles s'affichent donc
   toutes en 220 x 288.
   L'emplacement de hauteur fixe reste utile comme garde-fou si une couverture
   d'une autre proportion etait ajoutee : elle poserait sur la meme ligne de base.
   Aucune rotation : la presentation « en vrac » a ete ecartee par Luc. */
.livre__couverture {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* Hauteur explicite, et non aspect-ratio : ce dernier ne rend pas la hauteur
     définie quand l'image la dépasse, et le max-height:100% de l'image ne
     pouvait alors pas se résoudre. L'emplacement s'étirait pour la couverture
     la plus haute, et les légendes se désalignaient. */
  height: clamp(210px, 60vw, 300px);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.livre__couverture img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  border-radius: 2px;
  /* Un fin liseré clair : sans lui, la couverture noire de « L'IA pour la
     Créativité » se fond dans le fond anthracite. */
  border: 1px solid var(--bordure-forte);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .5);
  transition: transform var(--duree) var(--courbe),
              box-shadow var(--duree) var(--courbe),
              border-color var(--duree) var(--courbe);
}
.livre__couverture:hover img,
.livre__couverture:focus-visible img {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, .6);
  border-color: var(--bleu);
}

.trophee__zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.livre__couverture:hover,
.livre__couverture:focus-visible {
  transform: rotate(0deg) translateY(-6px);
  box-shadow: 0 22px 44px rgba(0, 0, 0, .55);
}
.livre__titre {
  font-family: 'Inter', sans-serif;
  font-size: .9375rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.35;
  margin: var(--e-4) 0 var(--e-1);
}
.livre__meta { font-size: var(--t-petit); color: var(--texte-doux); margin: 0; }
.livre__prix {
  display: inline-block;
  margin-top: var(--e-2);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bleu-clair);
  border: 1px solid var(--bleu-sourd);
  border-radius: 3px;
  padding: 3px var(--e-2);
}

.trophee {
  border: 1px solid var(--bordure);
  border-radius: 6px;
  overflow: hidden;
  background: var(--fond-eleve);
}
.trophee figcaption {
  padding: var(--e-4) var(--e-5);
  font-size: var(--t-petit);
  color: var(--texte-doux);
}
.trophee figcaption strong { color: var(--texte); display: block; margin-bottom: var(--e-1); font-weight: 600; }

/* ---------------------------------------------------------------- Medias */
.medias { display: grid; gap: var(--e-5); }
@media (min-width: 760px) { .medias { grid-template-columns: repeat(2, 1fr); } }
.media {
  display: block;
  background: var(--fond-eleve);
  border: 1px solid var(--bordure);
  border-radius: 6px;
  padding: var(--e-6);
  text-decoration: none;
  color: var(--texte);
  transition: transform var(--duree) var(--courbe),
              border-color var(--duree) var(--courbe),
              box-shadow var(--duree) var(--courbe);
}
.media:hover, .media:focus-visible {
  transform: translateY(-3px);
  border-color: var(--bleu-sourd);
  box-shadow: var(--ombre);
  color: var(--texte);
}
.media__type {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bleu-clair);
  display: block;
  margin-bottom: var(--e-3);
}
.media h3 {
  font-family: 'Inter', sans-serif;
  font-size: 1.0625rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.4;
  margin-bottom: var(--e-2);
}
.media p { font-size: .9375rem; color: var(--texte-doux); margin: 0; }
.media__fleche { display: inline-block; margin-left: var(--e-1); transition: transform var(--duree-rapide) ease-out; }
.media:hover .media__fleche { transform: translate(3px, -3px); }

/* -------------------------------------------------------------------- FAQ */
.faq { max-width: 820px; }
.faq .repli__resume {
  font-family: 'Inter', sans-serif;
  font-size: 1.0625rem;
  padding-block: var(--e-5);
}
.faq .repli__corps { max-width: var(--lecture); }
.faq .repli__corps p { color: var(--texte-doux); }
.faq .repli__corps p:first-child { color: var(--texte); }

/* ------------------------------------------------------------- Formulaire */
.contact {
  background: linear-gradient(180deg, var(--fond-eleve) 0%, var(--fond) 100%);
  border-top: 1px solid var(--bordure);
}
.contact__grille { display: grid; gap: var(--e-7); }
@media (min-width: 900px) { .contact__grille { grid-template-columns: 1fr 1fr; gap: var(--e-9); } }

.engagement {
  display: flex;
  gap: var(--e-4);
  align-items: flex-start;
  border: 1px solid var(--bordure);
  border-radius: 6px;
  padding: var(--e-5);
  margin-top: var(--e-6);
  background: rgba(46, 127, 240, .06);
}
.engagement__puce {
  flex-shrink: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--orange);
  margin-top: 10px;
}
.engagement p { font-size: .9375rem; margin: 0; }
.engagement strong { font-weight: 600; }

.champ { margin-bottom: var(--e-5); }
.champ label {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  margin-bottom: var(--e-2);
  color: var(--texte);
}
.champ .facultatif { font-weight: 400; color: var(--texte-doux); }
.champ input,
.champ textarea {
  width: 100%;
  background: var(--fond);
  border: 1px solid var(--bordure-forte);
  border-radius: 4px;
  color: var(--texte);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  padding: var(--e-3) var(--e-4);
  min-height: 48px;
  transition: border-color var(--duree-rapide) ease-out, background var(--duree-rapide) ease-out;
}
.champ textarea { min-height: 140px; resize: vertical; }
.champ input:hover, .champ textarea:hover { border-color: rgba(237, 239, 242, .35); }
.champ input:focus, .champ textarea:focus {
  outline: none;
  border-color: var(--bleu);
  background: var(--fond-eleve);
  box-shadow: 0 0 0 3px rgba(46, 127, 240, .18);
}
.champ input[aria-invalid="true"], .champ textarea[aria-invalid="true"] {
  border-color: #FF6B6B;
}
.champ__erreur { display: block; font-size: var(--t-petit); color: #FF8A8A; margin-top: var(--e-2); }

.deux-colonnes { display: grid; gap: var(--e-5); }
@media (min-width: 520px) { .deux-colonnes { grid-template-columns: 1fr 1fr; } }
.deux-colonnes .champ { margin-bottom: 0; }
.deux-colonnes--espacee { margin-bottom: var(--e-5); }

/* ⚠️ Aucun attribut style= dans le HTML : la CSP interdit les styles en ligne
   (style-src 'self'), ils seraient bloques en production. Un test le verifie. */

/* Champ piege : invisible pour l'humain, atteignable pour un robot */
.piege {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.rgpd { font-size: .8125rem; color: var(--texte-doux); margin-top: var(--e-4); }
.rgpd a { color: var(--texte-doux); }

.formulaire__retour {
  border-radius: 6px;
  padding: var(--e-5);
  margin-bottom: var(--e-5);
  font-size: .9375rem;
}
.formulaire__retour[data-etat="succes"] {
  background: rgba(46, 127, 240, .12);
  border: 1px solid var(--bleu-sourd);
}
.formulaire__retour[data-etat="erreur"] {
  background: rgba(255, 107, 107, .1);
  border: 1px solid rgba(255, 107, 107, .4);
}
.formulaire__retour p:last-child { margin-bottom: 0; }

.bouton[aria-busy="true"] { opacity: .7; pointer-events: none; }

/* ---------------------------------------------------------------- Lightbox */
/* Ne jamais poser de display sur .lightbox seul : cela ecraserait le
   display:none que le navigateur applique a un <dialog> ferme. */
.lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  padding: var(--e-5);
  background: rgba(6, 8, 11, .94);
  border: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
}
.lightbox::backdrop { background: rgba(6, 8, 11, .94); }
.lightbox img { max-width: min(92vw, 620px); max-height: 86vh; width: auto; border-radius: 4px; }
.lightbox__fermer {
  position: absolute;
  top: var(--e-5);
  right: var(--e-5);
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--bordure-forte);
  background: rgba(18, 22, 28, .8);
  color: var(--texte);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox__fermer:hover { background: var(--bleu); border-color: var(--bleu); color: #fff; }

/* ------------------------------------------------------------------ Pied */
.pied {
  border-top: 1px solid var(--bordure);
  padding-block: var(--e-8) var(--e-6);
  font-size: .9375rem;
  color: var(--texte-doux);
}
.pied__grille { display: grid; gap: var(--e-6); margin-bottom: var(--e-7); }
@media (min-width: 760px) { .pied__grille { grid-template-columns: 2fr 1fr 1fr; gap: var(--e-8); } }
.pied h2, .pied h3 {
  font-size: .8125rem;
  letter-spacing: .1em;
  color: var(--texte);
  margin-bottom: var(--e-3);
}
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: var(--e-2); }
.pied a { color: var(--texte-doux); text-decoration: none; }
.pied a:hover { color: var(--texte); text-decoration: underline; }
.pied__legal {
  border-top: 1px solid var(--bordure);
  padding-top: var(--e-5);
  font-size: .8125rem;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-5);
  justify-content: space-between;
}

/* ------------------------------------------------------- Pages satellites */
.page-titre { padding-block: calc(var(--rythme) * .8) var(--e-7); border-bottom: 1px solid var(--bordure); }
.page-titre h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); max-width: 18ch; margin-bottom: var(--e-5); }
.page-titre .chapo { font-size: 1.125rem; color: var(--texte-doux); max-width: var(--lecture); }

.fil { font-size: var(--t-petit); color: var(--texte-doux); margin-bottom: var(--e-5); }
.fil a { color: var(--texte-doux); }
.fil span { margin-inline: var(--e-2); opacity: .5; }

.prose { max-width: var(--lecture); }
.prose h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); margin: var(--e-9) 0 var(--e-4); }
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-family: 'Inter', sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  margin: var(--e-6) 0 var(--e-3);
}
.prose p, .prose li { color: var(--texte-doux); }
.prose strong { color: var(--texte); font-weight: 600; }
.prose ul, .prose ol { padding-left: 1.3em; margin-bottom: var(--e-5); }
.prose li { margin-bottom: var(--e-2); }
.prose li::marker { color: var(--bleu); }
.prose > p:first-of-type { color: var(--texte); font-size: 1.0625rem; }

.encadre {
  border-left: 3px solid var(--bleu);
  background: var(--fond-eleve);
  padding: var(--e-5) var(--e-6);
  border-radius: 0 6px 6px 0;
  margin-block: var(--e-6);
}
.encadre p:last-child { margin-bottom: 0; }

.rappel-cta {
  border: 1px solid var(--bordure);
  border-radius: 6px;
  background: var(--fond-eleve);
  padding: var(--e-7);
  margin-top: var(--e-9);
  text-align: center;
}
.rappel-cta h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: var(--e-4); }
.rappel-cta p { color: var(--texte-doux); max-width: 52ch; margin-inline: auto; margin-bottom: var(--e-5); }

/* -------------------------------------------------------------- Apparition */
.apparait {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--duree-lente) var(--courbe),
              transform var(--duree-lente) var(--courbe);
}
.apparait.est-visible { opacity: 1; transform: none; }
/* Sans JavaScript, tout reste visible : la classe n'est posee que par main.js */
.sans-js .apparait { opacity: 1; transform: none; }

/* --------------------------------------------------- Mouvement reduit */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .apparait { opacity: 1; transform: none; }
  .respiration__fond { transform: none !important; }
}

/* ------------------------------------------------------------- Impression */
@media print {
  .bandeau, .hero__fond, .hero__voile, .respiration__fond, .contact, .lightbox { display: none !important; }
  body { background: #fff; color: #000; }
  a { color: #000; }
}