/* ═══════════════════════════════════════════════════════════════════════
   style.css : Alice et Rabi
   ═══════════════════════════════════════════════════════════════════════

   Direction artistique DEDUITE DES VISUELS FOURNIS, le 2026-09-03,
   conformement a la regle absolue du brief (section 2).

   Ce qui a ete mesure sur les 24 PNG, pixels opaques seulement :

     groupe                clarte    couleur vive dominante
     personnages            57 %     #88D8D0  teinte 174 deg
     scenes de l'univers    40 %     #206080  teinte 200 deg
     scenes pedagogiques    49 %     #184878  teinte 210 deg
     logo                   52 %     #00E0F8  teinte 186 deg

   L'axe cyan-turquoise traverse les quatre groupes : ce n'est donc PAS le
   « bleu IA » impose par reflexe que le brief interdit, c'est la couleur
   reelle de l'univers. La nuance compte.

   Ce qui varie, c'est la saturation : neon a 100 % dans le logo, desaturee
   dans les scenes. C'est le bleu profond des scenes qui porte la structure,
   parce qu'il est credible aupres d'un professionnel de l'audiovisuel, la
   ou le neon tirerait vers le programme jeunesse.

   ⚠️ Les 15 paires de contraste ont ete verifiees au seuil WCAG AA.
   Toute nouvelle couleur doit l'etre aussi : voir docs/04-CHARTE-GRAPHIQUE.md.

   ⚠️ Ne jamais ecrire de tiret cadratin dans ce fichier, commentaires compris.
   ═══════════════════════════════════════════════════════════════════════ */


/* ── Polices ─────────────────────────────────────────────────────────
   Auto-hebergees : la CSP n'autorise que 'self' pour font-src, et rien
   n'est ainsi envoye a Google. */

@font-face {
  font-family: "Outfit";
  /* Police variable : un seul fichier de 32 Ko couvre toutes les graisses. */
  src: url("../fonts/outfit-latin.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-400-600.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}


/* ── Jetons ──────────────────────────────────────────────────────────
   Les valeurs sont deduites des visuels, pas choisies a priori. */

:root {
  /* Fonds clairs, deduits de la pierre du musee et de Paris (#E0D8D0) */
  --creme:        #FAF7F2;
  --creme-alt:    #F0EAE1;

  /* Fonds sombres, deduits du bleu profond des scenes (#206080) assombri */
  --nuit:         #0E1F2B;
  --nuit-doux:    #16303F;

  /* Textes */
  --encre:        #12222C;   /* 15.2:1 sur creme */
  --encre-doux:   #4A5C67;   /*  6.5:1 sur creme */
  --clair:        #F4F8FA;   /* 15.7:1 sur nuit  */
  --clair-doux:   #A9C2CE;   /*  9.0:1 sur nuit  */

  /* Marque */
  --bleu:         #206080;   /* LA couleur, issue des scenes */
  --bleu-fonce:   #1A4E68;   /* pour le texte sur fond clair, 8.4:1 */
  --turquoise:    #88D8D0;   /* la combinaison d'Alice */
  --neon:         #00E0F8;   /* detail lumineux, JAMAIS du texte */
  --terracotta:   #B64F35;   /* contrepoint chaud, assombri pour passer AA */

  /* Roles, pour ne pas ecrire une couleur en dur dans un composant */
  --fond:         var(--creme);
  --fond-alterne: var(--creme-alt);
  --texte:        var(--encre);
  --texte-doux:   var(--encre-doux);
  --trait:        #DFD6C9;
  --accent:       var(--bleu);
  --accent-texte: var(--clair);
  --lien:         var(--bleu-fonce);

  /* Typographie */
  --police-titre: "Outfit", ui-rounded, system-ui, sans-serif;
  --police-texte: "Inter", system-ui, -apple-system, sans-serif;

  /* Echelle fluide : une declaration couvre du mobile au grand ecran */
  --t-hero:  clamp(2.75rem, 8vw, 6rem);
  --t-titre: clamp(1.875rem, 3.8vw, 3rem);
  --t-sous:  clamp(1.15rem, 1.8vw, 1.45rem);
  --t-texte: clamp(1rem, 1.05vw, 1.125rem);

  /* Rythme */
  --pas:       clamp(1rem, 2vw, 1.5rem);
  --section-y: clamp(4.5rem, 9vw, 9rem);
  --largeur:   74rem;
  --arrondi:   16px;   /* echo des formes rondes de l'univers */

  --transition: 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Sections sombres : on redefinit les ROLES, pas les couleurs.
   Les composants a l'interieur n'ont ainsi rien a savoir du contexte. */
.sombre {
  --fond:         var(--nuit);
  --fond-alterne: var(--nuit-doux);
  --texte:        var(--clair);
  --texte-doux:   var(--clair-doux);
  --trait:        #2A4757;
  --lien:         var(--turquoise);
  --accent:       var(--turquoise);
  --accent-texte: var(--encre);

  background: var(--nuit);
  color: var(--clair);
}


/* ── Base ────────────────────────────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
  /* Compense le bandeau fixe : sans cela, une ancre place le titre dessous. */
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font: 400 var(--t-texte)/1.65 var(--police-texte);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--police-titre);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;   /* evite le mot orphelin en fin de titre */
  margin: 0 0 var(--pas);
}

p { margin: 0 0 var(--pas); }

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

/* <picture> est en ligne par defaut : sans cela, un blanc apparait sous
   chaque image, et les grilles se decalent. */
picture { display: contents; }

a { color: var(--lien); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Focus visible et homogene, exige par le brief et par le RGAA.
   currentColor : il reste lisible sur fond clair comme sur fond sombre. */
:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
  border-radius: 4px;
}

.saut {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 0.75rem 1.25rem;
  background: var(--nuit);
  color: var(--clair);
  z-index: 100;
}
.saut:focus { left: 0; }

.conteneur {
  width: min(100% - 2.5rem, var(--largeur));
  margin-inline: auto;
}

.prose { max-width: 62ch; }
.prose p:last-child { margin-bottom: 0; }


/* ── Boutons ─────────────────────────────────────────────────────────── */

.bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;   /* cible tactile confortable, le trafic est surtout mobile */
  padding: 0.8rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 600 1rem/1.2 var(--police-titre);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--transition), background-color var(--transition),
              box-shadow var(--transition);
}

.bouton:hover { transform: translateY(-2px); }
.bouton:active { transform: translateY(0); }

.bouton--principal {
  background: var(--accent);
  color: var(--accent-texte);
  box-shadow: 0 6px 18px -10px rgb(32 96 128 / 0.8);
}
.bouton--principal:hover { box-shadow: 0 10px 24px -10px rgb(32 96 128 / 0.9); }

.bouton--secondaire {
  background: transparent;
  color: var(--texte);
  border-color: var(--trait);
}
.bouton--secondaire:hover { background: color-mix(in srgb, var(--texte) 6%, transparent); }

.bouton--compact { min-height: 42px; padding: 0.5rem 1.2rem; font-size: 0.9375rem; }

.bouton:disabled { opacity: 0.6; cursor: progress; transform: none; }



/* ── Bandeau ─────────────────────────────────────────────────────────── */

.bandeau {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding-block: 0.85rem;
  /* Transparent sur le hero sombre : le texte y est clair. */
  color: var(--clair);
  transition: background-color var(--transition), box-shadow var(--transition),
              color var(--transition);
}

/* Pose au defilement : le fond devient clair, le texte repasse en encre. */
.bandeau--pose {
  background: color-mix(in srgb, var(--creme) 92%, transparent);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--trait);
  color: var(--encre);
}

.bandeau__interieur { display: flex; align-items: center; gap: var(--pas); }

.bandeau__marque {
  font: 700 1.125rem/1 var(--police-titre);
  letter-spacing: -0.02em;
  text-decoration: none;
  margin-right: auto;
  color: inherit;
}

.bandeau__nav { display: flex; gap: 1.4rem; font-size: 0.9375rem; }
.bandeau__nav a { text-decoration: none; color: inherit; }
.bandeau__nav a:hover { text-decoration: underline; }

.bandeau .bouton--principal {
  background: var(--turquoise);
  color: var(--encre);
  box-shadow: none;
}
.bandeau--pose .bouton--principal { background: var(--bleu); color: var(--clair); }

/* Cree par main.js : il n'existe pas sans JavaScript, et la nav reste alors
   depliee plutot qu'inatteignable. */
.bandeau__bascule { display: none; }


/* ── Sections ────────────────────────────────────────────────────────── */

.section {
  padding-block: var(--section-y);
  background: var(--fond);
  color: var(--texte);
}

/* Alternance des fonds clairs, arbitree avec Luc le 2026-09-03 :
   hero sombre, corps clair, avec le duo en ilot sombre au centre. */
.section--lore,
.section--mouvement,
.section--documents { background: var(--creme-alt); }

.section__titre { font-size: var(--t-titre); max-width: 22ch; }

.section__accroche {
  font-size: var(--t-sous);
  color: var(--texte-doux);
  max-width: 46ch;
}

/* Surtitre commun, repris du hero : petites capitales espacees. */
.surtitre {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font: 600 0.8125rem/1.4 var(--police-titre);
  color: var(--texte-doux);
  margin: 0 0 0.5rem;
}


/* ── Deux colonnes ───────────────────────────────────────────────────
   ⚠️ Motif introduit le 2026-09-03 apres la recette de Luc : le texte,
   limite a 62 caracteres pour rester lisible, laissait la moitie droite des
   sections vide sur ordinateur.

   On ne l'a PAS resolu en etirant le texte sur toute la largeur : au-dela de
   75 caracteres environ, l'oeil perd la ligne suivante et la lecture devient
   penible. On occupe donc la place avec un visuel ou avec le titre. */

.colonnes {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 56rem) {
  .colonnes { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  .colonnes--serrees { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
}

.colonnes__texte > :last-child { margin-bottom: 0; }

.colonnes__visuel { display: grid; place-items: center; }

.colonnes__illustration {
  width: 100%;
  max-width: 26rem;
  height: auto;
  filter: drop-shadow(0 22px 36px rgb(14 31 43 / 0.35));
}

/* En-tete de section : titre a gauche, introduction a droite.
   Meme motif, applique la ou une illustration serait de trop. */
.entete {
  display: grid;
  gap: clamp(1rem, 4vw, 3.5rem);
  align-items: start;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 56rem) {
  .entete { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .entete__titre { margin-bottom: 0; }
}

.entete__texte > :last-child { margin-bottom: 0; }


/* ── Hero ────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  /* .sombre pose un fond nuit : il sert de couleur de repli sous l'image,
     visible le temps que celle-ci se charge. */
  min-height: 100svh;   /* svh, pas vh : evite le saut des barres mobiles */
  display: grid;
  place-items: center;
  padding-block: 6rem 2.5rem;
  overflow: hidden;
  isolation: isolate;
}

/* Paris 2100 en fond, assombri pour que le texte clair passe partout. */
.hero__fond {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__fond img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

/* Voile degrade : c'est lui qui garantit le contraste du texte, quelle que
   soit la zone de l'image derriere. Sans lui, le titre deviendrait illisible
   sur les parties claires du ciel. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 90% at 50% 35%, rgb(14 31 43 / 0.55), rgb(14 31 43 / 0.88)),
    linear-gradient(to bottom, rgb(14 31 43 / 0.7), rgb(14 31 43 / 0.55) 40%, var(--nuit));
}

/* ⚠️ PAS de width: 100% ici. Cette declaration ecrasait la largeur de
   .conteneur, qui a la meme specificite mais arrive plus tot dans le fichier :
   le premier ecran s'etendait alors sur toute la fenetre. Sans image le defaut
   ne se voyait pas, le texte etant centre et deja limite ; il a saute aux yeux
   des l'arrivee du lecteur, qui debordait de 256 px de chaque cote.
   Constate le 2026-09-03. */
.hero__interieur { text-align: center; }

.hero__titre {
  font-size: var(--t-hero);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 0.75rem;
  color: var(--clair);
}

.hero__accroche {
  font-size: var(--t-sous);
  color: var(--clair-doux);
  max-width: 32ch;
  margin-inline: auto;
}

.hero__defilement {
  width: 1px;
  height: 3rem;
  margin: 2.5rem auto 0;
  background: linear-gradient(var(--turquoise), transparent);
}

/* Quand le teaser est la, il invite deja a l'action : l'indicateur de
   defilement devient du bruit, et la place qu'il prend manque au lecteur.
   Si :has() n'est pas reconnu, l'indicateur reste, ce qui est sans gravite. */
.hero:has(.teaser) .hero__defilement { display: none; }


/* ── Teaser ──────────────────────────────────────────────────────────── */

.teaser { margin-top: clamp(1.75rem, 4vw, 3rem); }

.teaser__label {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font: 600 0.75rem/1.4 var(--police-titre);
  color: var(--turquoise);
  margin-bottom: 0.75rem;
}

/* ⚠️ Le lecteur est dimensionne pour que TOUT le premier ecran tienne dans la
   fenetre : le brief veut un teaser tres grand ET un hero proche de 100vh, ce
   qui est contradictoire si on ne borne pas la hauteur.
   Les 27rem soustraits couvrent le bandeau, le titre, l'accroche et le libelle.
   Sur mobile, c'est la largeur disponible qui l'emporte. */
.teaser__cadre {
  position: relative;
  max-width: min(100%, calc((100svh - 27rem) * 16 / 9));
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--arrondi);
  overflow: hidden;
  background: var(--nuit-doux);
  box-shadow: 0 30px 70px -30px rgb(0 0 0 / 0.85);
}

.teaser__cadre iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.teaser__lecture {
  position: absolute;
  inset: 0;
  width: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.85rem;
  border: 0;
  padding: 0;
  background: none;
  color: var(--clair);
  cursor: pointer;
  font: 600 1rem var(--police-titre);
}

.teaser__lecture picture,
.teaser__lecture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.teaser__lecture picture { display: block; }

/* Assombrit la vignette pour que le bouton et son libelle restent lisibles.
   ⚠️ Le voile est appuye a dessein : la vignette retenue est l'entree du
   musee, qui porte deja son enseigne en bleu lumineux. Sans cet
   assombrissement, le libelle « Lire le teaser » se perdait dedans. */
.teaser__lecture::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgb(14 31 43 / 0.35), rgb(14 31 43 / 0.6));
  transition: opacity var(--transition);
}
.teaser__lecture:hover::before { opacity: 0.7; }

.teaser__icone {
  position: relative;
  width: clamp(64px, 8vw, 84px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--clair);
  box-shadow: 0 0 0 8px rgb(136 216 208 / 0.25);
  transition: transform var(--transition), box-shadow var(--transition);
}

/* Triangle de lecture dessine en CSS : aucune image a charger. */
.teaser__icone::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  translate: -50% -50%;
  border-style: solid;
  border-width: 13px 0 13px 21px;
  border-color: transparent transparent transparent var(--bleu);
}

.teaser__lecture:hover .teaser__icone {
  transform: scale(1.07);
  box-shadow: 0 0 0 14px rgb(136 216 208 / 0.3);
}

.teaser__texte {
  position: relative;
  text-shadow: 0 2px 12px rgb(14 31 43 / 0.9);
  letter-spacing: 0.02em;
}


/* ── Pitch ───────────────────────────────────────────────────────────── */

/* ⚠️ Marges genereuses et trait epais : Luc jugeait ce bloc trop compact a
   la recette du 2026-09-03. Il respire desormais au lieu de coller au
   paragraphe qui le precede. */
.manifeste {
  font: 600 var(--t-sous)/1.5 var(--police-titre);
  max-width: 38ch;
  margin-block: clamp(2rem, 4vw, 3rem);
  padding: 0.25rem 0 0.25rem 1.75rem;
  border-left: 4px solid var(--turquoise);
}

.chiffres {
  list-style: none;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 clamp(2rem, 4vw, 2.5rem);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.chiffre {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 1rem 1.5rem;
  background: color-mix(in srgb, var(--bleu) 7%, var(--creme));
  border: 1px solid color-mix(in srgb, var(--bleu) 18%, transparent);
  border-radius: var(--arrondi);
}

.chiffre__valeur { font: 700 1.0625rem/1.2 var(--police-titre); color: var(--bleu-fonce); }
.chiffre__libelle { font-size: 0.875rem; color: var(--texte-doux); }


/* ── Lore ────────────────────────────────────────────────────────────── */

.lore__blocs {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-block: clamp(2.5rem, 5vw, 4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.lore__bloc { display: flex; flex-direction: column; gap: 0.35rem; }

.lore__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--arrondi);
  margin-bottom: 0.75rem;
  box-shadow: 0 18px 40px -28px rgb(14 31 43 / 0.7);
}

.lore__etiquette {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font: 600 0.75rem/1.4 var(--police-titre);
  color: var(--bleu-fonce);
  margin: 0;
}

.lore__titre { font-size: 1.3125rem; margin: 0 0 0.35rem; }


/* ── Duo, ilot sombre au centre de la page ───────────────────────────── */

.section--duo {
  /* Le degrade prolonge le fond nuit vers le bleu profond des scenes :
     les personnages detoures s'y detachent comme sur un fond de studio. */
  background:
    radial-gradient(90% 70% at 50% 0%, var(--nuit-doux), transparent 70%),
    var(--nuit);
}

.duo {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2rem);
  margin-block: clamp(2.5rem, 5vw, 4rem);
  align-items: end;
}

@media (min-width: 56rem) {
  /* Alice, la zone de dialogue, RABI. C'est la composition qui fait le duo,
     pas deux cartes juxtaposees : exigence explicite du brief, section 13.
     L'ordre du DOM est identique, donc l'ordre de lecture ne change pas. */
  .duo { grid-template-columns: 1fr minmax(12rem, 0.8fr) 1fr; align-items: end; }
}

/* position relative : sert d'ancre au halo pose en ::before. */
.duo__personnage { text-align: center; position: relative; }

/* Halo turquoise derriere le personnage. Il reprend la lueur des visuels
   (roue de RABI, liseres de la combinaison d'Alice) sans rien recolorer.
   ⚠️ C'est un degrade radial, PAS un second drop-shadow : voir le commentaire
   de .duo__image ci-dessous. */
.duo__personnage::before {
  content: "";
  position: absolute;
  inset: 0 0 30% 0;
  z-index: 0;
  background: radial-gradient(50% 50% at 50% 50%,
              rgb(136 216 208 / 0.18), transparent 70%);
  pointer-events: none;
}

.duo__personnage > * { position: relative; z-index: 1; }

/* ⚠️ RABI ne fait PAS la taille d'Alice : il lui arrive a la taille.
   Mesure faite sur le visuel du duo, ou les deux sont a la meme echelle :
   RABI vaut 0,61 fois la hauteur d'Alice (838 px contre 1371 px).
   Les afficher a hauteur egale deformerait leur relation, alors que le brief
   demande explicitement de preserver les proportions (section 27). */
.duo__image {
  margin-inline: auto;
  max-height: 26rem;
  width: auto;
  object-fit: contain;

  /* ⚠️ UNE SEULE drop-shadow, et c'est un garde-fou, pas une preference.
     Constate le 2026-09-03 : deux drop-shadow ENCHAINEES sur la grande image
     d'Alice (717 x 960 px reels) faisaient rendre WebKit mobile un cadre
     entierement VIDE. L'image se chargeait, occupait sa place, mais n'etait
     jamais peinte. RABI, plus petit, passait, ce qui rendait le defaut
     d'autant plus trompeur. Chaque ombre fonctionne seule, c'est leur
     enchainement qui echoue.
     Le halo turquoise est donc rendu par .duo__personnage::before. */
  filter: drop-shadow(0 20px 34px rgb(0 0 0 / 0.55));
}

/* 26rem x 0,61, arrondi. */
.duo__personnage--rabi .duo__image { max-height: 15.75rem; }

.duo__nom {
  font-size: 1.625rem;
  margin: 1rem 0 0.15rem;
  color: var(--clair);
}

.duo__sous-titre { color: var(--clair-doux); font-size: 0.9375rem; margin-bottom: 0.75rem; }

.duo__citation {
  margin: 0 0 var(--pas);
  font-style: italic;
  color: var(--turquoise);
  font-size: 1.0625rem;
}
.duo__citation p { margin: 0; }

.duo__traits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
  font-size: 0.875rem;
}
.duo__traits li {
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--trait);
  border-radius: 999px;
  color: var(--clair-doux);
}

.duo__dialogue { text-align: center; }

.duo__punchline {
  font: 700 var(--t-sous)/1.35 var(--police-titre);
  max-width: 16ch;
  margin-inline: auto;
  color: var(--clair);
}

/* Le logo de la serie, place ici et non en hero : il montre l'identite sans
   imposer son registre neon a tout le site. Arbitre le 2026-09-03. */
.duo__logo {
  width: 100%;
  max-width: 20rem;
  height: auto;
  margin-inline: auto;
}


/* ── Episodes ────────────────────────────────────────────────────────── */

.episodes {
  list-style: none;
  margin: clamp(2.5rem, 5vw, 4rem) 0;
  padding: 0;
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  /* auto-fit plutot que 3 colonnes figees : 3x2 sur grand ecran, 2 puis 1
     ensuite, sans point de rupture a maintenir. Pas de carrousel, le brief
     le refuse si l'ergonomie n'est pas parfaite. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.episode {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--creme);
  border: 1px solid var(--trait);
  border-radius: var(--arrondi);
  transition: transform var(--transition), box-shadow var(--transition);
}

.episode:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px -28px rgb(14 31 43 / 0.55);
}

.episode__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-bottom: 1px solid var(--trait);
}

.episode__corps { padding: 1.5rem; }
.episode__corps > :last-child { margin-bottom: 0; }

/* ⚠️ AUCUNE carte ne porte d'illustration depuis le 2026-09-03 : Luc ne veut
   pas des scenes en pate a modeler sur le site. Les six cartes portent donc
   toutes ce bandeau, qui affiche leur numero.

   Il est volontairement BAS : quand une seule carte sur deux l'affichait, un
   format 16/9 equilibrait la grille ; maintenant qu'elles l'ont toutes, six
   grands aplats presque vides alourdissaient la section. */
.episode__bandeau {
  display: grid;
  place-items: center;
  min-height: 5.5rem;
  padding: 0.75rem;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--bleu) 16%, var(--creme-alt)),
      color-mix(in srgb, var(--turquoise) 22%, var(--creme-alt)));
  border-bottom: 1px solid var(--trait);
}

.episode__bandeau span {
  font: 700 2.75rem/1 var(--police-titre);
  color: color-mix(in srgb, var(--bleu) 70%, transparent);
  letter-spacing: -0.04em;
}

.episode__numero {
  font: 700 0.8125rem/1 var(--police-titre);
  letter-spacing: 0.14em;
  color: var(--bleu-fonce);
}

.episode__titre { font-size: 1.1875rem; margin: 0.6rem 0 0.6rem; }
.episode__texte { font-size: 0.9375rem; color: var(--texte-doux); margin: 0; }

.suite {
  max-width: 62ch;
  padding: 1.75rem;
  background: color-mix(in srgb, var(--turquoise) 12%, var(--creme));
  border: 1px solid color-mix(in srgb, var(--turquoise) 40%, transparent);
  border-radius: var(--arrondi);
}
.suite__titre { font-size: 1.1875rem; }
.suite p { margin: 0; color: var(--texte-doux); }


/* ── Projet en mouvement ─────────────────────────────────────────────── */

.mouvement__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--arrondi);
  box-shadow: 0 26px 56px -34px rgb(14 31 43 / 0.7);
}

/* Meme remarque de Luc que pour .manifeste : le bloc etait trop serre. */
.mouvement__phase {
  font: 600 var(--t-sous)/1.5 var(--police-titre);
  max-width: 42ch;
  margin-block: clamp(2rem, 4vw, 3rem);
  padding: 0.25rem 0 0.25rem 1.75rem;
  border-left: 4px solid var(--terracotta);
}

.mouvement__liens {
  list-style: none;
  padding: 0;
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  font-size: 0.9375rem;
}


/* ── Porteurs ────────────────────────────────────────────────────────── */

.porteurs {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  align-items: start;
}

.porteur {
  padding: clamp(1.75rem, 3vw, 2.25rem);
  background: var(--creme-alt);
  border: 1px solid var(--trait);
  border-radius: var(--arrondi);
}

/* Carte d'une personne dont la bio n'est pas fournie : sobre, sans avatar
   generique ni texte de remplissage. Brief section 16. */
.porteur--sobre { background: transparent; border-style: dashed; }

.porteur__photo {
  width: 5.5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: var(--pas);
}

.porteur__nom { font-size: 1.4375rem; margin-bottom: 0.25rem; }
.porteur__role { font-size: 0.9375rem; color: var(--bleu-fonce); margin-bottom: var(--pas); font-weight: 600; }
.porteur__bio { font-size: 0.9375rem; }

/* Carte en cours de remplissage : le texte dit ou en est la page, et les
   trois points s'animent comme l'indicateur de saisie d'une messagerie.
   Demande de Luc du 2026-09-13, en remplacement d'une carte qui n'affichait
   que le nom et paraissait inachevee. */
.porteur__attente {
  display: flex;
  align-items: baseline;
  gap: 0.15rem;
  font-size: 0.9375rem;
  font-style: italic;
  color: var(--texte-doux);
  margin: 0;
}

.saisie {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 2px;
  /* Aligne les points sur la ligne de base du texte plutot que sur son milieu. */
  padding-bottom: 2px;
}

.saisie span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.3;
  animation: saisie-point 1.4s ease-in-out infinite;
}

.saisie span:nth-child(2) { animation-delay: 0.2s; }
.saisie span:nth-child(3) { animation-delay: 0.4s; }

@keyframes saisie-point {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30%           { opacity: 1;    transform: translateY(-3px); }
}


/* Le prix et la BD cites dans la bio : une preuve visuelle a un texte qui,
   sinon, ne repose que sur des affirmations. */
.porteur__illustration {
  margin: clamp(1.5rem, 3vw, 2rem) 0 var(--pas);
}
/* La source est un portrait 2:3 : recadre en paysage, il reste une preuve
   visuelle sans prendre toute la hauteur de la carte. Le cadrage vise le
   trophee et la couverture, qui occupent le milieu de l'image. */
.porteur__illustration img {
  width: 100%;
  max-width: 22rem;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: 50% 42%;
  border-radius: var(--arrondi);
  box-shadow: 0 18px 36px -26px rgb(14 31 43 / 0.5);
}
.porteur__illustration figcaption {
  margin-top: 0.6rem;
  font-size: 0.8125rem;
  color: var(--texte-doux);
  max-width: 20rem;
}


/* ── Documents ───────────────────────────────────────────────────────── */

/* Deux cartes sur toute la largeur, et non deux boutons tasses a gauche :
   le corps de la section laissait sinon la moitie droite vide.
   Remarque de Luc, recette du 2026-09-03. */
.documents {
  list-style: none;
  padding: 0;
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.documents li { display: flex; }

.document {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--creme);
  border: 1px solid var(--trait);
  border-radius: var(--arrondi);
  text-decoration: none;
  color: var(--texte);
  transition: transform var(--transition), box-shadow var(--transition);
}

/* Carte active : c'est un lien, elle reagit au survol. */
a.document:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 44px -28px rgb(14 31 43 / 0.5);
}

.document__format {
  align-self: start;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bleu) 12%, transparent);
  color: var(--bleu-fonce);
  font: 600 0.6875rem/1.4 var(--police-titre);
  letter-spacing: 0.1em;
}

.document__titre { font: 700 1.25rem/1.25 var(--police-titre); margin-top: 0.5rem; }
.document__texte { font-size: 0.9375rem; color: var(--texte-doux); }

.document__action {
  margin-top: auto;
  padding-top: 1rem;
  font: 600 0.9375rem/1.2 var(--police-titre);
  color: var(--bleu-fonce);
}

/* Carte dont le PDF n'est pas encore depose. Ce n'est PAS un lien : elle ne
   peut donc pas renvoyer une 404, ce que le brief interdit (section 17).
   Deposer le fichier dans site/docs/ l'active, sans toucher au code. */
.document--attente {
  background: transparent;
  border-style: dashed;
  color: var(--texte-doux);
}
.document--attente .document__titre { color: var(--texte-doux); }
.document--attente .document__format {
  background: transparent;
  border: 1px dashed var(--trait);
  color: var(--texte-doux);
}
.document--attente .document__action { color: var(--texte-doux); font-style: italic; }

.documents__repli {
  color: var(--texte-doux);
  max-width: 52ch;
  margin-top: clamp(1.5rem, 3vw, 2rem);
}


/* ── Formulaire ──────────────────────────────────────────────────────── */

.formulaire {
  max-width: 38rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  display: grid;
  gap: 1.25rem;
}

.champ { display: grid; gap: 0.4rem; }
.champ label { font-weight: 600; font-size: 0.9375rem; }
.champ__note { font-weight: 400; color: var(--texte-doux); }
.requis { color: var(--terracotta); }

.champ input,
.champ select,
.champ textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 0.95rem;
  font: inherit;
  color: var(--encre);
  background: #FFFFFF;
  border: 1px solid var(--trait);
  border-radius: 12px;
}

.champ input:focus,
.champ select:focus,
.champ textarea:focus { border-color: var(--bleu); }

.champ textarea { resize: vertical; min-height: 8.5rem; }

/* Le message texte porte l'information : la couleur ne la porte jamais seule
   (brief section 23). Le trait epaissi ajoute un signal non colore. */
.champ input[aria-invalid="true"],
.champ select[aria-invalid="true"],
.champ textarea[aria-invalid="true"] {
  border-color: #A3231C;
  border-width: 2px;
}

.champ__erreur { margin: 0; font-size: 0.875rem; color: #A3231C; font-weight: 500; }
.champ__erreur:empty { display: none; }

.champ--case { grid-template-columns: auto 1fr; align-items: start; gap: 0.65rem; }
.champ--case input { width: 1.3rem; min-height: 1.3rem; margin-top: 0.2rem; accent-color: var(--bleu); }
.champ--case label { font-weight: 400; }
.champ--case .champ__erreur { grid-column: 1 / -1; }

.formulaire__rgpd { font-size: 0.8125rem; color: var(--texte-doux); margin: 0; }

.formulaire__retour { margin: 0; font-weight: 600; }
.formulaire__retour:empty { display: none; }
.formulaire__retour--succes { color: #1B5E20; }
.formulaire__retour--erreur { color: #A3231C; }

/* Champ piege : hors ecran plutot que display:none, que certains robots
   detectent. aria-hidden et tabindex -1 le retirent du parcours reel. */
.piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* ── Pied de page ────────────────────────────────────────────────────── */

.pied {
  background: var(--nuit);
  color: var(--clair);
  padding-block: clamp(3rem, 5vw, 4.5rem);
}

.pied__interieur { display: grid; gap: 1rem; }
.pied__titre { font: 700 1.375rem/1.2 var(--police-titre); margin: 0; }

.pied__baseline,
.pied__porteurs p,
.pied__legal { margin: 0; font-size: 0.9375rem; color: var(--clair-doux); }

.pied__liens { display: flex; flex-wrap: wrap; gap: 1.5rem; font-size: 0.9375rem; }
.pied__liens a { color: var(--turquoise); }


/* ── Page interieure (mentions legales) ──────────────────────────────── */

.page-texte { padding-block: 9rem var(--section-y); }
.page-texte h1 { font-size: var(--t-titre); }
.page-texte h2 { font-size: 1.4375rem; margin-top: 2.75rem; }
.page-texte ul { padding-left: 1.25rem; }
.page-texte li { margin-bottom: 0.4rem; }


/* ── Apparitions au defilement ───────────────────────────────────────── */

/* L'etat de depart n'est pose QUE si JavaScript est actif : sans lui, la
   classe n'est jamais posee et le contenu s'affiche normalement.

   ⚠️ Cette classe ne doit JAMAIS etre posee sur une section entiere : sur
   WebKit mobile, composer une grande surface retarde le demarrage de la
   transition de plus d'une seconde, et le visiteur voit un bloc vide.
   C'est js/main.js qui pose la classe, et il ecarte tout element plus haut
   que 80 % de la fenetre. Constate le 2026-09-03. */
.a-apparaitre {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 640ms ease, transform 640ms cubic-bezier(0.16, 1, 0.3, 1);
}

.apparu { opacity: 1; transform: none; }


/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 55.99rem) {
  /* Le menu ne se replie que si main.js a pu creer son bouton : sinon la
     navigation reste depliee, donc utilisable. */
  .menu-disponible .bandeau__nav {
    position: absolute;
    inset: 100% 0 auto 0;
    flex-direction: column;
    gap: 0;
    padding: 0.5rem 1.25rem 1.25rem;
    background: var(--creme);
    color: var(--encre);
    box-shadow: 0 16px 32px -22px rgb(14 31 43 / 0.6);
    display: none;
  }

  .menu-disponible .bandeau__nav--ouverte { display: flex; }

  .menu-disponible .bandeau__nav a {
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--trait);
  }

  .menu-disponible .bandeau__bascule {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    color: inherit;
  }

  /* Trois traits, dessines sans image ni SVG. */
  .bandeau__bascule span,
  .bandeau__bascule span::before,
  .bandeau__bascule span::after {
    content: "";
    display: block;
    width: 23px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform var(--transition), opacity var(--transition);
  }
  .bandeau__bascule span { position: relative; }
  .bandeau__bascule span::before { position: absolute; top: -7px; }
  .bandeau__bascule span::after  { position: absolute; top: 7px; }

  .bandeau__bascule[aria-expanded="true"] span { background: transparent; }
  .bandeau__bascule[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
  .bandeau__bascule[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

  /* Le bouton du bandeau disparait sur mobile : le menu porte deja l'ancre
     Contact, et la place manque a cote de la marque. */
  .bandeau__interieur > .bouton { display: none; }

  .duo__image { max-height: 20rem; }
  .duo__personnage--rabi .duo__image { max-height: 12.25rem; }
}


/* ── Mouvement reduit ────────────────────────────────────────────────── */

/* Obligation d'accessibilite, et exigence explicite du brief (section 21).
   Tout est neutralise, y compris le defilement doux. */
@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;
  }

  .a-apparaitre { opacity: 1; transform: none; }
  .bouton:hover, .episode:hover { transform: none; }

  /* Les points de saisie s'immobilisent mais restent visibles : ils gardent
     leur sens (« en cours ») sans le mouvement. */
  .saisie span { animation: none; opacity: 0.55; }
}


/* ── Sans JavaScript ─────────────────────────────────────────────────── */

/* Filet de securite : si main.js ne se charge pas, rien ne doit rester
   invisible. La classe sans-js est retiree par js/avec-js.js. */
.sans-js .a-apparaitre { opacity: 1; transform: none; }


/* ── Impression ──────────────────────────────────────────────────────── */

/* Un producteur imprime parfois la page pour la porter en reunion. */
@media print {
  .bandeau, .hero__defilement, .teaser, .formulaire { display: none; }
  body { background: #fff; color: #000; }
  .hero, .section--duo, .pied { background: #fff !important; color: #000 !important; }
  .hero::before, .hero__fond { display: none; }
  .hero__titre, .duo__nom, .duo__punchline, .pied__titre { color: #000; }
  .section { padding-block: 1.5rem; break-inside: avoid; }
  a::after { content: " (" attr(href) ")"; font-size: 0.75em; }
}