/* ==========================================================================
   La graine et le noyau — feuille de styles unique
   Noir et blanc : la voix du site. La couleur : celle des élèves (citation).
   Sections :
     1. Polices auto-hébergées (@font-face)
     2. Variables
     3. Socle et typographie de base
     4. En-tête commun
     5. Pied de page commun
     6. Bandes panoramiques (accueil)
     7. Pages projet — quatre blocs
     8. Cartes de valeurs
     9. Flux horizontal continu (geste unique)
    10. Cadres réservés (images à venir)
    11. Responsive mobile
    12. Préférences de mouvement réduites
   ========================================================================== */

/* ==========================================================================
   1. POLICES AUTO-HÉBERGÉES
   Cormorant : police variable, graisses 300 à 500, romain et italique.
   EB Garamond : 400, romain et italique.
   Sous-ensembles latin et latin-ext (œ, ᵉ, guillemets français).
   ========================================================================== */

@font-face {
  font-family: 'Cormorant';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('../fonts/cormorant-latin.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: 'Cormorant';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('../fonts/cormorant-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Cormorant';
  font-style: italic;
  font-weight: 300 500;
  font-display: swap;
  src: url('../fonts/cormorant-italique-latin.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: 'Cormorant';
  font-style: italic;
  font-weight: 300 500;
  font-display: swap;
  src: url('../fonts/cormorant-italique-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/eb-garamond-latin.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: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/eb-garamond-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/eb-garamond-italique-latin.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: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/eb-garamond-italique-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   2. VARIABLES
   ========================================================================== */

:root {
  /* Couleurs — les seules du site */
  --blanc: #FFFFFF;
  --encre: #1B1B1B;
  --filet: #E6E6E6;
  --gris-legende: #6B6B6B;
  --gris-reserve: #F4F4F4;

  /* Familles */
  --police-titres: 'Cormorant', 'Garamond', serif;
  --police-courante: 'EB Garamond', 'Garamond', serif;

  /* Échelle typographique */
  --taille-nom-site: 2.6rem;
  --taille-titre-bande: 2rem;
  --taille-titre-section: 1.4rem;
  --taille-corps: 1.05rem;
  --taille-legende: 0.9rem;

  /* Espacements */
  --espace-xs: 0.5rem;
  --espace-s: 1rem;
  --espace-m: 2rem;
  --espace-l: 4rem;
  --espace-xl: 6rem;

  /* Mesure du texte courant */
  --mesure-texte: 68ch;

  /* Hauteur des bandes panoramiques */
  --hauteur-bande: 62vh;

  /* Durée du défilement horizontal (geste unique) — 60 s minimum */
  --duree-flux: 120s;
}

/* ==========================================================================
   3. SOCLE ET TYPOGRAPHIE DE BASE
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--police-courante);
  font-weight: 400;
  font-size: var(--taille-corps);
  line-height: 1.6;
}

h1,
h2,
h3 {
  font-family: var(--police-titres);
  font-weight: 400;
  line-height: 1.25;
  margin: 0 0 var(--espace-s);
}

h1 {
  font-size: var(--taille-titre-bande);
}

h2 {
  font-size: var(--taille-titre-section);
}

p {
  margin: 0 0 var(--espace-s);
}

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

a {
  color: inherit;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

figure {
  margin: 0;
}

figcaption {
  font-size: var(--taille-legende);
  color: var(--gris-legende);
  margin-top: var(--espace-xs);
}

/* Focus clavier : filet noir fin, sans couleur */
:focus-visible {
  outline: 1px solid var(--encre);
  outline-offset: 4px;
}

/* Petites capitales espacées (établissement, lieu, mentions) */
.petites-capitales {
  font-family: var(--police-courante);
  font-size: var(--taille-legende);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Colonne de texte : mesure limitée, centrée, marges latérales larges */
.contenu-texte {
  max-width: var(--mesure-texte);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--espace-m);
  padding-right: var(--espace-m);
}

/* Centrage ponctuel (titres de section de l’accueil) */
.centre {
  text-align: center;
}

/* Respiration verticale ample entre sections */
.section {
  padding-top: var(--espace-xl);
  padding-bottom: var(--espace-xl);
}

/* ==========================================================================
   4. EN-TÊTE COMMUN
   ========================================================================== */

.entete {
  text-align: center;
  padding: var(--espace-l) var(--espace-m) var(--espace-m);
}

.entete__nom {
  font-family: var(--police-titres);
  font-size: var(--taille-nom-site);
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
}

.entete__nom a {
  text-decoration: none;
}

.entete__sous-titre {
  font-style: italic;
  color: var(--encre);
  margin: var(--espace-xs) 0 0;
}

/* ==========================================================================
   5. PIED DE PAGE COMMUN
   ========================================================================== */

.pied {
  border-top: 1px solid var(--filet);
  margin-top: var(--espace-xl);
  padding: var(--espace-m);
  text-align: center;
  font-size: var(--taille-legende);
  color: var(--gris-legende);
}

/* ==========================================================================
   6. BANDES PANORAMIQUES (accueil)
   Quatre bandes pleine largeur, même structure : image, établissement et
   lieu en petites capitales, titre en Cormorant, sous-titre en italique.
   ========================================================================== */

.bande {
  position: relative;
  display: block;
  height: var(--hauteur-bande);
  margin-bottom: var(--espace-m);
  text-decoration: none;
}

.bande__visuel {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Textes posés sur l’image : blanc sur voile sombre (contraste AA),
   toujours dans la gamme noir et blanc du site */
.bande__textes {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: var(--espace-m);
  color: var(--blanc);
  background: rgba(27, 27, 27, 0.38);
}

.bande__etablissement {
  display: block;
  margin-bottom: var(--espace-s);
  text-shadow: 0 0 4px rgba(27, 27, 27, 0.9), 0 1px 12px rgba(27, 27, 27, 0.7);
}

.bande__titre {
  font-family: var(--police-titres);
  font-size: var(--taille-titre-bande);
  font-weight: 400;
  line-height: 1.25;
  margin: 0;
  max-width: 28ch;
  text-shadow: 0 0 4px rgba(27, 27, 27, 0.9), 0 1px 12px rgba(27, 27, 27, 0.7);
}

.bande__sous-titre {
  font-style: italic;
  margin: var(--espace-xs) 0 0;
  text-shadow: 0 0 4px rgba(27, 27, 27, 0.9), 0 1px 12px rgba(27, 27, 27, 0.7);
}

/* ==========================================================================
   7. PAGES PROJET — QUATRE BLOCS
   BLOC 1 bandeau d'identification · BLOC 2 le lieu et sa question ·
   BLOC 3 la démarche · BLOC 4 ce que les élèves ont conçu.
   Chaque bloc se réécrit sans toucher aux autres.
   ========================================================================== */

/* BLOC 1 — bandeau d'identification */
.bandeau {
  text-align: center;
  padding: var(--espace-l) var(--espace-m);
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
}

.bandeau__mentions {
  display: block;
  margin-bottom: var(--espace-s);
}

.bandeau__titre {
  font-size: var(--taille-titre-bande);
  margin: 0;
}

.bandeau__sous-titre {
  font-style: italic;
  margin: var(--espace-xs) 0 0;
}

.bandeau__mention-discrete {
  font-size: var(--taille-legende);
  color: var(--gris-legende);
  margin: var(--espace-s) 0 0;
}

/* BLOCS 2, 3, 4 — sections de texte */
.bloc {
  padding-top: var(--espace-l);
  padding-bottom: var(--espace-l);
}

.bloc__titre {
  font-size: var(--taille-titre-section);
  margin-bottom: var(--espace-m);
}

/* Citation d'ouverture d'un bloc (le lieu et sa question) */
.bloc__citation {
  font-family: var(--police-titres);
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 400;
  margin: 0;
}

/* La démarche : observer, imaginer, relier */
.demarche {
  margin: 0;
}

.demarche dt {
  font-family: var(--police-titres);
  font-size: var(--taille-titre-section);
  margin-top: var(--espace-m);
}

.demarche dd {
  margin: var(--espace-xs) 0 0;
}

/* Phrase de clôture en italique */
.cloture {
  font-style: italic;
}

/* Image de détail intercalée entre les blocs */
.detail {
  margin: var(--espace-l) auto;
  max-width: var(--mesure-texte);
  padding-left: var(--espace-m);
  padding-right: var(--espace-m);
}

/* ==========================================================================
   8. CARTES DE VALEURS
   Cartes typographiques sobres : filet gris léger, sans couleur.
   ========================================================================== */

.cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--espace-m);
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 var(--espace-m);
}

.carte {
  border: 1px solid var(--filet);
  padding: var(--espace-m);
  text-align: center;
}

.carte__titre {
  font-family: var(--police-titres);
  font-size: var(--taille-titre-section);
  font-weight: 400;
  margin: 0 0 var(--espace-xs);
}

.carte__sous-titre {
  font-style: italic;
  margin: 0;
}

/* ==========================================================================
   9. FLUX HORIZONTAL CONTINU — LE GESTE UNIQUE
   Défilement lent, de gauche à droite, boucle sans rupture (piste dupliquée),
   suspension au survol. Deux emplacements seulement : l'ouverture de
   l'accueil et les dix titres de la page Jacques-Prévert.
   Structure attendue :
     <div class="flux">
       <div class="flux__piste">
         <ul class="flux__groupe">…</ul>
         <ul class="flux__groupe" aria-hidden="true">…</ul>  (copie)
       </div>
     </div>
   ========================================================================== */

.flux {
  overflow: hidden;
  width: 100%;
}

.flux__piste {
  display: flex;
  width: max-content;
  animation: flux-defilement var(--duree-flux) linear infinite;
}

/* Suspension au survol */
.flux:hover .flux__piste {
  animation-play-state: paused;
}

.flux__groupe {
  display: flex;
  align-items: center;
  gap: var(--espace-m);
  list-style: none;
  margin: 0;
  padding: 0 var(--espace-s);
}

.flux__groupe li {
  flex: none;
}

/* Flux d'images (ouverture de l'accueil) */
.flux--images img {
  height: 18rem;
  width: auto;
}

/* Flux de titres (page Jacques-Prévert) — la couleur vient du HTML,
   citation des élèves, seule exception à la règle noir et blanc */
.flux--titres .flux__groupe li {
  font-family: var(--police-titres);
  font-size: var(--taille-titre-bande);
  white-space: nowrap;
}

/* Défilement de gauche à droite : la piste part de sa moitié gauche
   et revient à zéro ; la copie assure la boucle sans rupture */
@keyframes flux-defilement {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

/* ==========================================================================
   10. CADRES RÉSERVÉS — IMAGES À VENIR
   ========================================================================== */

.image-a-venir {
  background: var(--gris-reserve);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 14rem;
}

.image-a-venir--panorama {
  min-height: var(--hauteur-bande);
}

.image-a-venir__mention {
  font-size: var(--taille-legende);
  color: var(--gris-legende);
  font-style: italic;
}

/* ==========================================================================
   11. RESPONSIVE MOBILE
   ========================================================================== */

@media (max-width: 40rem) {
  :root {
    --taille-nom-site: 2rem;
    --taille-titre-bande: 1.6rem;
    --espace-l: 2.5rem;
    --espace-xl: 3.5rem;
  }

  /* Bandes : la hauteur suit le texte, proportion d’image préservée
     par une hauteur minimale ; l’image couvre l’arrière-plan */
  .bande {
    height: auto;
  }

  .bande__visuel {
    position: absolute;
    inset: 0;
  }

  .bande__textes {
    position: relative;
    inset: auto;
    min-height: 58vw;
    padding: var(--espace-m) var(--espace-s);
  }

  .image-a-venir--panorama {
    min-height: 12rem;
  }

  .flux--images img {
    height: 11rem;
  }

  .contenu-texte,
  .detail {
    padding-left: var(--espace-s);
    padding-right: var(--espace-s);
  }
}

/* ==========================================================================
   12. PRÉFÉRENCES DE MOUVEMENT RÉDUITES
   Arrêt complet du geste : affichage statique en rangée.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .flux__piste {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
  }

  .flux__groupe {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: var(--espace-s);
  }

  /* La copie de la piste disparaît : la rangée statique suffit */
  .flux__groupe[aria-hidden="true"] {
    display: none;
  }
}