/* ===========================================================================
   Carrot Studio - feuille de style

   Trois echelles, et rien en dehors.

   Le texte  : les jetons --t-1 a --t-12 pour les tailles fixes, --t-f1 a
               --t-f4 et --t-geant pour celles qui respirent avec la fenetre.
               Aucune taille n'est ecrite en dur dans la feuille.

   Les vides : marges, rembourrages et ecarts de grille se tiennent sur
               2, 4, 6, 8, 10, 12, 16, 20, 24, 28, 32, 40, 48, 56, 64, 80.
               Trois mesures de composition font exception : 96, 120, 180.

   Les coins : --radius-xs a --radius, plus --radius-pilule.

   La palette est declaree une seule fois, dans :root. Elle a ete rechauffee :
   chaque teinte magenta ou violette a tourne de huit a onze degres vers le
   rouge, a clarte constante, donc a contraste constant. Les verts, les ors,
   les cremes et les vrais gris n'ont pas bouge.
   =========================================================================== */

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../polices/outfit-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: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../polices/outfit-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: 'Syne';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../polices/syne-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: 'Syne';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../polices/syne-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;
}

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

[hidden] { display: none !important; }

/* -----------------------------------------------------------------------------
   La palette
   -----------------------------------------------------------------------------
   Le site n'a qu'une tenue, sombre et chaude. Il a longtemps porté ici une
   seconde palette, claire, qu'une classe sur le corps de page recouvrait
   aussitôt : les dix pages étant toutes sombres, personne ne l'a jamais vue.
   Elle est partie, et les valeurs qui servent vraiment sont remontées ici.

   Trois familles suffisent. Le rose de la marque, un violet pour ce qui est
   secondaire, et la gamme d'encres posée sur le fond.
   ----------------------------------------------------------------------------- */
:root {
  /* la marque */
  --c1:           #EA406E;
  --c1-soft:      rgba(234,64,110,0.18);
  --carrot:       #CC3470;
  --carrot-texte: #F44E8B;
  --carrot-soft:  rgba(212,56,117,0.20);
  --carrot-mid:   rgba(212,56,117,0.45);

  /* le violet, un seul, avec ses voiles */
  --violet-voile: rgba(236,92,216,0.18);
  --violet-acc:   #EC5CD8;
  --violet-clair: #F9A5E7;

  /* le fond, les surfaces et les encres */
  --bg:        #170911;
  --carte:     rgba(43,19,31,0.55);
  --creme:     #FFF7F1;
  --ink:       #F7ECE4;
  --ink-mid:   #E1B6CB;
  --ink-light: #B68599;
  --border:    rgba(244,118,174,0.15);


  /* Une seule echelle de texte. Douze pas fixes, du plus petit au plus grand,
     puis cinq pas qui respirent avec la fenetre. La feuille portait onze
     formules clamp() differentes pour cinq roles seulement, et treize tailles
     a la demie de pixel, que rien ne rend a l'ecran. */
  --t-1:  10px;
  --t-2:  11px;
  --t-3:  12px;
  --t-4:  13px;
  --t-5:  14px;
  --t-6:  15px;
  --t-7:  16px;
  --t-8:  17px;
  --t-9:  18px;
  --t-10: 22px;
  --t-11: 24px;
  --t-12: 34px;

  /* Les grandes tailles montaient trop peu. Un titre de section plafonnait a
     36 pixels pour un corps de texte de 15 : deux fois et demie, c'est le
     rapport d'un sous-titre, pas d'un titre. Les cinq pas se decalent d'un
     cran vers le haut, et les regles qui les emploient resserrent leur
     espacement - a cette taille, l'espacement par defaut de Syne fait
     flotter les lettres. */
  --t-f1: clamp(20px, 2.6vw, 30px);
  --t-f2: clamp(22px, 2.8vw, 32px);
  --t-f3: clamp(25px, 3.6vw, 44px);
  --t-f4: clamp(35px, 6.4vw, 72px);
  --t-geant: clamp(88px, 17vw, 180px);

  --sans: 'Syne', 'Segoe UI', system-ui, sans-serif;
  --body: 'Outfit', 'Segoe UI', system-ui, sans-serif;

  /* Les arrondis tiennent en quatre valeurs, plus la pilule. Ils allaient de
     2 à 18 pixels sans raison, et deux blocs voisins ne se répondaient jamais
     tout à fait. */
  --radius-xs:     4px;
  --radius-sm:     8px;
  --radius-md:    12px;
  --radius:       16px;
  --radius-pilule: 999px;

  /* Un seul materiau de panneau pour tout le site. Le fond est a peine plus
     clair que la page, le filet fait un pixel et non un et demi - a un pixel
     et demi un bord se voit, a un pixel il se devine - et le lisere interieur
     donne l'epaisseur d'une carte posee sur la table plutot que d'un cadre
     dessine. */
  --panneau:      rgba(43,19,31,0.60);
  --filet:        rgba(244,118,174,0.14);
  --filet-fort:   rgba(244,118,174,0.30);
  --lisere:       inset 0 1px 0 rgba(255,246,238,0.045);
  --pose:         0 18px 40px -34px rgba(0,0,0,0.9);

  /* La barre etait opaque a quatre-vingt-seize pour cent : le flou pose
     dessus n'avait que quatre pour cent de page a montrer, autant dire rien.
     A quatre-vingts, c'est cinq fois plus, et ce qui defile dessous - une
     photo, un titre rose - se devine derriere le verre. La saturation
     remonte avec, sinon les couleurs qui passent au travers ressortent
     grises.

     Mesure du pire cas, texte compris : les liens de la barre tiennent 5,6
     pour 1 sur une photo claire et 4,7 sur du blanc pur, au-dessus des 4,5
     exiges. En dessous de quatre-vingts pour cent, le blanc passe sous le
     seuil - c'est la que s'arrete l'ouverture. */
  --nav-bg:     rgba(26,11,18,0.80);
  --nav-border: rgba(255,246,238,0.12);
  --nav-shadow: inset 0 1px 0 rgba(255,246,238,0.08), 0 8px 32px rgba(0,0,0,0.35);
  --nav-blur:   blur(28px) saturate(200%);
}

/* Ouvrir les fonds n'est sans danger que parce que le flou remplit le vide
   derriere. Un navigateur qui ne sait pas flouter poserait donc le texte sur
   la page nue. Ceux-la - Firefox d'avant 2022, quelques navigateurs de
   telephone - retrouvent les fonds fermes d'avant. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --nav-bg: rgba(26,11,18,0.97); }
  .carte-genre, .carte-duree   { background: rgba(24,9,16,0.80); }
  .modale-fermer               { background: rgba(24,9,16,0.88); }
  .lecteur-info                { background: rgba(17,7,12,0.88); }
  .lecteur-conseil             { background: rgba(24,9,16,0.95); }
  .lecteur-menu                { background: rgba(24,9,16,0.97); }
}

body::after {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 70% 55% at 15% 25%, rgba(224,57,163,0.18) 0%, transparent 65%),
    radial-gradient(ellipse 55% 50% at 85% 75%, rgba(255,96,64,0.13) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 50% 50%, rgba(214,42,114,0.10) 0%, transparent 70%);
}

html { scroll-behavior: smooth; }

/* Sur une page courte et un grand ecran, sans cela le pied de page remonte
   et laisse une bande de fond nu en dessous de lui. */
body {
  display: flex; flex-direction: column; min-height: 100vh;
  /* Deux halos tres doux, fixes, l'un rose en haut a gauche, l'autre violet
     en haut a droite. Un aplat seul donnait une page plate ; ceux-ci creusent
     l'arriere-plan sans qu'on les remarque. */
  background:
    radial-gradient(1200px 620px at 8% -8%, rgba(244,78,139,0.11), transparent 60%),
    radial-gradient(1000px 540px at 94% 2%, rgba(236,92,216,0.075), transparent 58%),
    var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-7);
  line-height: 1.6;
  overflow-x: hidden;
  transition: background 0.3s, color 0.3s;
}

main { flex: 1 0 auto; }

/* ---------------------------------------------------------------------------
   La barre de défilement
   ---------------------------------------------------------------------------
   Deux écritures pour la même chose. Les propriétés normalisées ne savent
   faire que fin ou large, sans coins ronds, mais Firefox ne connaît qu'elles.
   Les navigateurs qui comprennent les pseudo-éléments WebKit reçoivent la
   version soignée, et on leur remet les propriétés normalisées à leur valeur
   d'origine car elles auraient sinon la priorité et effaceraient tout.
   ---------------------------------------------------------------------------
   La barre de la page se peint depuis l'élément racine, où les variables
   posées sur body n'arrivent jamais : elles vivent donc ici.

   Il y avait deux blocs :root. Le premier posait un pouce prune sombre à
   24 %, hérité de la palette claire disparue - invisible sur le fond actuel -
   et le second l'écrasait aussitôt. Un seul bloc, les seules valeurs qui
   servaient.
   --------------------------------------------------------------------------- */
:root {
  --barre-pouce:        rgba(255,246,238,0.15);
  --barre-pouce-survol: var(--carrot-texte);
  scrollbar-width: thin;
  scrollbar-color: var(--barre-pouce) transparent;
}

@supports selector(::-webkit-scrollbar) {
  :root { scrollbar-width: auto; scrollbar-color: auto; }

  ::-webkit-scrollbar { width: 12px; height: 12px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-corner { background: transparent; }

  /* La bordure transparente et le détourage sur la boîte de remplissage
     laissent respirer le curseur au lieu de le coller aux bords. */
  ::-webkit-scrollbar-thumb {
    background-color: var(--barre-pouce);
    border: 3px solid transparent;
    background-clip: padding-box;
    border-radius: var(--radius-pilule);
  }
  ::-webkit-scrollbar-thumb:hover  { background-color: var(--barre-pouce-survol); }
  ::-webkit-scrollbar-thumb:active { background-color: var(--barre-pouce-survol); }

  /* Dans une boîte, la barre se fait plus discrète que celle de la page. */
  .modale::-webkit-scrollbar,
  .lecteur-menu::-webkit-scrollbar { width: 9px; height: 9px; }
  .modale::-webkit-scrollbar-thumb,
  .lecteur-menu::-webkit-scrollbar-thumb { border-width: 2.5px; }
}

main, nav, section, footer, .hero, .page-entete, .contact-principal,
.fond-modale, .lightbox, .barre-nav-tiroir { position: relative; z-index: 1; }

img { max-width: 100%; }

.cadre-image, .carte-vignette {
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
/* La mosaïque de l'accueil utilise de vrais boutons, il faut donc effacer
   l'habillage que le navigateur leur donne. */
.cadre-image { display: block; overflow: hidden; padding: 0; border: none; background-color: transparent; width: 100%; text-align: left; }

/* Les photos sont enveloppees dans une balise picture, qui propose le WebP
   avant le JPEG. Sans display: contents cette enveloppe formerait une boite
   intermediaire, et les hauteurs en pourcentage des images n'auraient plus
   rien contre quoi se calculer. */
picture { display: contents; }

.cadre-image img, .carte-vignette img { transition: opacity 0.35s ease; }
.cadre-image img.en-attente, .carte-vignette img.en-attente { opacity: 0; }

body.page-entree { animation: pageEntre 0.30s ease; }
body.page-sortie { animation: pageSort 0.17s ease forwards; }
@keyframes pageEntre { from { opacity: 0; } to { opacity: 1; } }
@keyframes pageSort  { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  body, body.page-sortie { animation: none; }
}

/* -----------------------------------------------------------------------------
   À l'impression
   -----------------------------------------------------------------------------
   Les mentions légales sont la page qu'on imprime ou qu'on enregistre en PDF,
   pour la joindre à un dossier. Sans ces règles elle sortait sur fond sombre,
   avec la barre de navigation, les carottes flottantes et des liens dont on ne
   voyait pas l'adresse.
   ----------------------------------------------------------------------------- */
@media print {
  :root {
    --bg: #FFFFFF; --carte: #FFFFFF;
    --ink: #000000; --ink-mid: #1A1A1A; --ink-light: #444444;
    --border: #BBBBBB; --carrot-texte: #000000; --creme: #FFFFFF;
  }
  body { background: #FFFFFF; color: #000000; font-size: 11.5pt; }
  body::after, .fond-carottes, nav, .barre-nav-tiroir, .chronologie,
  .barre-page, .saut-contenu, .fond-modale, .lightbox,
  .pied-reseaux, .hero-actions, .bandeau-appel { display: none !important; }

  main, section { padding: 0 !important; border: none !important; }
  section { page-break-inside: avoid; }
  h1, h2, h3 { page-break-after: avoid; }

  /* Une adresse imprimée ne se clique pas : on écrit où elle mène. */
  .page-texte a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
  .bloc-legal { border: none; padding: 0; margin-bottom: 18pt; }

  footer { border-top: 1pt solid #BBBBBB; padding-top: 8pt; }
  .pied-liens { display: none; }
}

/* -----------------------------------------------------------------------------
   Le catalogue sans JavaScript
   -----------------------------------------------------------------------------
   Cette liste est déposée dans la page à la mise en ligne, et site.js la
   remplace aussitôt par les vraies cartes. Personne ne la voit, sauf ceux qui
   n'exécutent pas de script : les robots d'indexation, et les navigateurs où le
   JavaScript est coupé. Elle mérite quand même d'être lisible.
   ----------------------------------------------------------------------------- */
.catalogue-simple h2 {
  font-family: var(--sans); font-size: var(--t-10); font-weight: 700;
  color: var(--ink); margin: 32px 0 6px;
}
.catalogue-simple > p {
  color: var(--ink-light); font-size: var(--t-6); margin: 0 0 20px;
}
.catalogue-simple ul { list-style: none; padding: 0; margin: 0; }
.catalogue-simple li { padding: 16px 0; border-bottom: 1px solid var(--border); }
.catalogue-simple li a {
  font-family: var(--sans); font-size: var(--t-8); font-weight: 700;
  color: var(--ink); text-decoration: none;
}
.catalogue-simple li a:hover { color: var(--carrot-texte); text-decoration: underline; }
.catalogue-simple li span {
  display: block; margin-top: 4px; font-size: var(--t-4); color: var(--ink-light);
}
.catalogue-simple li p {
  margin: 8px 0 0; font-size: var(--t-6); color: var(--ink-mid); max-width: 62ch;
}

/* -----------------------------------------------------------------------------
   Le fil de chargement
   -----------------------------------------------------------------------------
   Un trait qui court en haut de l'écran d'une page à l'autre. Il part au clic,
   survit au changement de page en reprenant où il en était, et se termine
   quand la nouvelle page est prête à se montrer.

   Il est au-dessus de tout, visionneuse comprise, et surtout au-dessus du
   voile qui masque le corps de page le temps que les polices arrivent : sans
   la ligne de visibilité plus bas, il serait invisible au seul moment où il
   sert à quelque chose.
   ----------------------------------------------------------------------------- */
.barre-page {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  z-index: 1100; pointer-events: none;
  opacity: 0; transition: opacity 0.28s ease;
}
.barre-page.active { opacity: 1; }
html.chargement .barre-page { visibility: visible; }

.barre-page-fil {
  position: relative; height: 100%; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg,
              var(--c1) 0%, var(--carrot-texte) 45%, var(--violet-acc) 100%);
  box-shadow: 0 0 10px rgba(244,78,139,0.70), 0 0 26px rgba(236,92,216,0.45);
  /* Une transition sur la seule transformation : le compositeur s'en charge
     seul, sans repasser par la mise en page, ce qui compte sur une page qui
     est justement en train de tout charger. */
  transition: transform 0.40s cubic-bezier(0.22, 0.9, 0.3, 1);
}

/* La tête du fil, un halo qui bat doucement au bout de la course. */
.barre-page-fil::after {
  content: ''; position: absolute; right: 0; top: 50%;
  width: 110px; height: 14px;
  transform: translate(46%, -50%);
  background: radial-gradient(closest-side,
              rgba(255,246,238,0.90) 0%, rgba(244,78,139,0.55) 40%, transparent 100%);
  animation: filPouls 1.15s ease-in-out infinite;
}
@keyframes filPouls {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  /* La progression reste, elle informe. C'est le battement qui s'arrête. */
  .barre-page-fil::after { animation: none; opacity: 0.8; }
}
a  { color: inherit; }

.ico { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; vertical-align: middle; }
.ico svg { display: block; }
.ico-meta { color: var(--violet-acc); }

.saut-contenu {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--carrot); color: var(--creme); padding: 10px 20px;
  border-radius: 0 0 var(--radius-md) 0; font-family: var(--sans); font-weight: 600;
}
.saut-contenu:focus { left: 0; }

/* L'anneau de focus était rose, donc parfaitement invisible sur les boutons
   roses, un rapport de contraste de 1 pour 1. En crème il se voit partout,
   16,7 sur le fond de page et 4,2 sur un bouton, pour un minimum exigé de 3. */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

.fond-carottes {
  position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
  /* Les carottes deviennent une texture, pas des confettis : elles etaient
     assez visibles pour qu'on les suive du regard au lieu de lire la page. */
  --facteur-op: 0.48;
}

.carotte-flottante {
  position: absolute; opacity: 0;
  animation: monteeCarotte linear infinite;
  transform-origin: center;
}
.carotte-flottante img { width: 100%; height: auto; display: block; }

@keyframes monteeCarotte {
  0%   { transform: translateY(0) rotate(var(--r0)); opacity: 0; }
  8%   { opacity: calc(var(--op) * var(--facteur-op)); }
  92%  { opacity: calc(var(--op) * var(--facteur-op)); }
  100% { transform: translateY(-110vh) rotate(var(--r1)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fond-carottes { display: none; }
  html { scroll-behavior: auto; }
}

nav {
  position: sticky; top: 0; z-index: 200;
  background: var(--nav-bg);
  backdrop-filter: var(--nav-blur);
  -webkit-backdrop-filter: var(--nav-blur);
  border-bottom: 1px solid var(--nav-border);
  box-shadow: var(--nav-shadow);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 48px; height: 64px;
  transition: background 0.35s, border-color 0.35s, box-shadow 0.35s;
}

.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-logo-marque { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.nav-logo-marque img { width: 30px; height: 30px; object-fit: contain; display: block; transform: translateY(-2px); }
.nav-logo-nom { font-family: var(--sans); font-size: var(--t-7); font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }

.nav-droite { display: flex; align-items: center; gap: 6px; }
.nav-liens { display: flex; align-items: center; gap: 4px; }
.nav-liens a {
  font-family: var(--sans); font-size: var(--t-4); font-weight: 500;
  color: rgba(255,246,238,0.60); text-decoration: none;
  padding: 8px 16px; border-radius: var(--radius-pilule); white-space: nowrap;
  transition: background 0.18s, color 0.18s;
}
.nav-liens a:hover  { background: rgba(212,56,117,0.18); color: #FAA3BB; }
.nav-liens a.actif  { background: var(--carrot); color: var(--creme); }

/* Le bouton du menu etait un disque rose plein en haut a droite de chaque
   page : la chose la plus coloree de toute la barre, pour une commande qu'on
   ne regarde pas - on la cherche, on l'appuie, et c'est tout. Or le site a
   deja une commande ronde, dans son pied de page : un cercle, un filet d'un
   pixel, une icone creme, et le rose qui n'arrive qu'au moment ou l'on s'en
   sert. Le bouton devient celle-la, au filet pres - le meme
   rgba(255,246,238,0.18). */
.nav-burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 38px; height: 38px; cursor: pointer; padding: 0 13px;
  background: transparent; border: 1px solid rgba(255,246,238,0.18);
  border-radius: 50%;
  transition: background 0.18s, border-color 0.18s;
}
.nav-burger span {
  display: block; height: 2px; background: var(--ink-mid);
  border-radius: var(--radius-pilule);
  transition: transform 0.25s cubic-bezier(0.22, 0.9, 0.3, 1), opacity 0.16s, background 0.18s;
}

/* Le survol ne vaut que pour une souris. Au doigt, :hover se colle au dernier
   element touche et y reste : le bouton restait allume sur la page suivante,
   comme s'il etait encore selectionne. Le garde est celui qu'emploie deja
   l'infobulle du lecteur, plus bas dans cette feuille. */
@media (hover: hover) and (pointer: fine) {
  .nav-burger:hover { border-color: var(--carrot-mid); }
  .nav-burger:hover span { background: var(--ink); }
}

/* Ouvert, le filet et l'icone passent au rose et un voile a peine visible
   remplit le cercle. C'est le geste des liens de reseaux du pied : ils
   prennent la couleur sans changer de forme. */
.nav-burger.ouvert { background: var(--carrot-soft); border-color: var(--carrot-texte); }
.nav-burger.ouvert span { background: var(--carrot-texte); }

/* Sept pixels : deux barres de deux pixels de haut separees de cinq ont leurs
   centres a sept pixels l'un de l'autre. C'est ce qu'il faut pour que les
   deux traits de la croix se coupent au milieu du cercle. */
.nav-burger.ouvert span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.ouvert span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-burger.ouvert span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.barre-nav-tiroir {
  display: none; position: fixed; top: 64px; left: 0; right: 0; z-index: 199;
  background: var(--nav-bg);
  backdrop-filter: var(--nav-blur); -webkit-backdrop-filter: var(--nav-blur);
  border-bottom: 1px solid var(--nav-border);
  /* Six pixels de cote, et quatorze dans les liens : le texte du menu tombe
     donc a vingt pixels du bord, c'est-a-dire sur la marge de la barre, a
     l'aplomb de la carotte. Il en partait a trente-quatre. */
  flex-direction: column; padding: 10px 6px 14px; gap: 2px;
  box-shadow: 0 18px 44px rgba(0,0,0,0.45);
}
.barre-nav-tiroir.ouvert { display: flex; animation: tiroirEntre 0.22s ease; }
@keyframes tiroirEntre { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* Il y avait deux declarations de couleur a la suite, la seconde effacant la
   premiere sans que personne ne s'en apercoive. Il n'en reste qu'une. */
.barre-nav-tiroir a {
  font-family: var(--sans); font-size: var(--t-6); font-weight: 600;
  color: var(--ink-mid); text-decoration: none;
  padding: 13px 14px; border-radius: var(--radius-md); display: block;
  transition: background 0.15s, color 0.15s;
}
@media (hover: hover) and (pointer: fine) {
  .barre-nav-tiroir a:hover { background: rgba(255,246,238,0.05); color: var(--ink); }
}

/* La page courante etait un aplat rose pleine largeur, le seul objet colore
   d'un menu de trois lignes : on ne voyait plus que lui, et les deux autres
   liens passaient pour desactives. Elle se marque comme une rubrique en
   cours - un trait rose a gauche, un voile, et le mot en rose - ce qui la
   designe sans ecraser ses voisins. */
.barre-nav-tiroir a.actif {
  background: var(--carrot-soft); color: var(--carrot-texte);
  /* L'onglet touche le bord de l'ecran : coin gauche carre, coins droits
     arrondis, et le trait rose bien droit plutot qu'en parenthese. Les six
     pixels de marge qu'on lui enleve a gauche lui sont rendus en
     rembourrage, le texte reste donc aligne sur les autres liens. */
  margin-left: -6px; padding-left: 20px;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  box-shadow: inset 3px 0 0 var(--carrot-texte);
}

/* Des titres plus grands demandent plus d'air autour d'eux, sans quoi ils se
   cognent au bord de leur section. */
section { padding: 80px 48px; border-bottom: 1px solid var(--border); }
section:last-of-type { border-bottom: none; }

.sec-etiquette {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: var(--t-3); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  /* Le surtitre etait rose vif, cinq fois de suite, juste au-dessus d'un
     titre dont un mot est deja rose. Deux accents qui se disputent la meme
     ligne : on en garde un, le trait, et le mot passe au gris clair. */
  color: var(--ink-light); margin-bottom: 14px;
}
.sec-etiquette::before { content: ''; width: 22px; height: 2px; background: var(--carrot-texte); border-radius: var(--radius-pilule); flex-shrink: 0; }
/* Le surtitre etait un mot seul dans le vide en haut de chaque section. Le
   trait qui part de lui et court jusqu'a la marge droite lui donne son role :
   il ouvre la section, il ne flotte plus au-dessus d'elle. C'est la seule
   figure repetee du site, et elle revient sur chaque section de chaque page. */
.sec-etiquette::after {
  content: ''; flex: 1 1 auto; min-width: 20px; height: 1px;
  background: var(--border);
}

.sec-titre {
  font-family: var(--sans); font-size: var(--t-f3);
  font-weight: 800; color: var(--ink); line-height: 1.06;
  letter-spacing: -0.03em; margin-bottom: 12px;
  text-wrap: balance; overflow-wrap: break-word;
}
.sec-titre span { color: var(--carrot-texte); }
.sec-sous-titre { font-size: var(--t-6); color: var(--ink-mid); margin-bottom: 36px; max-width: 62ch; line-height: 1.7; }

.pastille {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1.5px solid var(--border); border-radius: var(--radius-pilule);
  padding: 6px 16px; font-size: var(--t-4); font-weight: 500;
  color: var(--ink-mid); background: var(--carte);
}

.bouton {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--carrot); color: var(--creme); border: none;
  padding: 12px 28px; border-radius: var(--radius-pilule); cursor: pointer;
  font-family: var(--sans); font-size: var(--t-4); font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none;
  box-shadow: 0 12px 26px -14px rgba(212,56,117,0.9);
  transition: background 0.18s, transform 0.15s, box-shadow 0.18s;
}
/* Le survol eclaircissait le fond, et le texte creme y tombait a 3,63 pour 1
   quand il en faut 4,5 : le bouton devenait moins lisible au moment ou on le
   visait. Aucune teinte plus claire que --carrot ne tient le seuil - il n'y a
   qu'un centieme de clarte de marge - le survol descend donc au lieu de
   monter, a 5,17. Le soulevement et l'ombre, eux, n'ont pas change : ce sont
   eux qui disent que le bouton repond. */
.bouton:hover { background: #C22A6A; transform: translateY(-2px); box-shadow: 0 10px 28px -10px rgba(234,64,110,0.55); }

.bouton-fantome {
  display: inline-flex; align-items: center; gap: 8px;
  /* Le bouton second etait rose lui aussi : deux boutons roses cote a cote,
     aucun ne dominait. Il passe au gris clair et ne prend la couleur qu'au
     survol, ce qui rend au premier son role de premier. */
  background: transparent; color: var(--ink-mid);
  border: 1px solid var(--filet-fort);
  padding: 12px 28px; border-radius: var(--radius-pilule); cursor: pointer; text-decoration: none;
  font-family: var(--sans); font-size: var(--t-4); font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  transition: background 0.18s, border-color 0.18s, transform 0.15s;
}
.bouton-fantome:hover { background: var(--carrot-soft); color: var(--creme); border-color: var(--carrot-texte); transform: translateY(-2px); }

.bloc-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--radius-sm);
  background: var(--carrot-soft); color: var(--carrot-texte); flex-shrink: 0;
}

.hero {
  padding: 92px 48px 88px;
  /* Le titre est ce qu'on lit en premier et il a grandi : sa colonne prend
     un peu sur celle des photos, qui n'en a pas besoin. */
  display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 52px; align-items: center;
  border-bottom: 1px solid var(--border);
  position: relative; overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; top: -80px; right: -80px;
  width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle at 60% 40%, rgba(234,64,110,0.07) 0%, rgba(216,58,168,0.07) 50%, transparent 72%);
}

.hero-etiquette {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--carrot-soft); color: var(--carrot-texte);
  font-family: var(--sans); font-size: var(--t-3); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 6px 16px; border-radius: var(--radius-pilule); margin-bottom: 20px;
}
.hero-point { width: 6px; height: 6px; background: var(--carrot); border-radius: 50%; animation: clignote 2s ease-in-out infinite; }
@keyframes clignote { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

.hero-titre {
  font-family: var(--sans); font-size: var(--t-f4);
  font-weight: 800; line-height: 0.98; letter-spacing: -0.04em; color: var(--ink);
  text-wrap: balance; overflow-wrap: break-word;
}
.hero-titre span { color: var(--carrot-texte); }
.hero-texte { margin-top: 24px; font-size: var(--t-8); font-weight: 300; color: var(--ink-mid); line-height: 1.7; max-width: 46ch; }
.hero-pastilles { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 10px; }
.hero-actions   { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }

.hero-visuel { position: relative; }

/* Les gouttieres passent de dix pixels a quatre : a dix, on voyait quatre
   photos separees ; a quatre, une planche. */
.hero-bande {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  gap: 4px; border-radius: var(--radius); overflow: hidden;
  background: var(--filet-fort);
}
.hero-bande .cadre-image { border-radius: 0; }
.hero-bande img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; transition: transform 0.5s ease, opacity 0.35s ease; }
.hero-bande .cadre-image:hover img { transform: scale(1.04); }

/* Deux colonnes empilées plutôt qu'une grille de deux rangées. La grille
   étirait chaque rangée à la hauteur de sa carte la plus longue : « D'où nous
   venons » traînait 121 pixels de vide sous son texte, « Les membres » 107.
   Chaque carte prend maintenant sa hauteur, et les colonnes s'équilibrent
   d'elles-mêmes à une vingtaine de pixels près : la dernière carte de la
   plus courte absorbe cet écart, pour que les deux piles finissent sur la
   même ligne. La disposition visible ne change pas : même carte en haut à
   gauche, même carte en bas à droite. */
.presentation { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.presentation-col { display: flex; flex-direction: column; gap: 20px; }
.presentation-col > :last-child { flex-grow: 1; }
.liste-membres {
  list-style: none; display: flex; flex-wrap: wrap; gap: 6px 32px;
  font-size: var(--t-6); color: var(--ink-mid); line-height: 1.9;
}
.liste-membres li { display: flex; align-items: center; gap: 10px; }
.liste-membres li::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--carrot); flex-shrink: 0;
}
.bloc-texte {
  background: var(--panneau); border: 1px solid var(--filet);
  border-radius: var(--radius); padding: 28px;
  box-shadow: var(--lisere), var(--pose);
}
.bloc-texte.pleine-largeur { grid-column: span 2; }
.bloc-texte-titre { font-family: var(--sans); font-size: var(--t-7); font-weight: 700; color: var(--ink); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.bloc-texte p { font-size: var(--t-6); color: var(--ink-mid); line-height: 1.8; }
.bloc-texte p + p { margin-top: 12px; }

.bande-chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.carte-chiffre {
  background: var(--carte); border: 1.5px solid var(--border); border-radius: var(--radius);
  padding: 28px 24px; text-align: center; transition: border-color 0.2s, transform 0.2s;
}
.carte-chiffre:hover { border-color: var(--carrot-mid); transform: translateY(-3px); }
.chiffre-nombre { font-family: var(--sans); font-size: var(--t-12); font-weight: 800; color: var(--carrot-texte); line-height: 1; }
.chiffre-label  { font-size: var(--t-4); color: var(--ink-light); margin-top: 6px; }

.mosaique { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mosaique .cadre-image { border-radius: var(--radius-sm); }
.mosaique img {
  width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block;
  cursor: zoom-in;
  transition: transform 0.35s ease, filter 0.35s ease, opacity 0.35s ease;
}
.mosaique .cadre-image:hover img { transform: scale(1.03); filter: brightness(1.06); }
.mosaique .cadre-image:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.mosaique .cadre-image:nth-child(1) img { aspect-ratio: 3/2.06; }

.grille-valeurs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.carte-valeur {
  background: var(--panneau); border: 1px solid var(--filet); border-radius: var(--radius);
  box-shadow: var(--lisere), var(--pose);
  padding: 28px; display: flex; gap: 20px; align-items: flex-start;
}
.valeur-ico {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-md);
  background: var(--violet-voile); color: var(--violet-acc); flex-shrink: 0;
}
.valeur-nom   { font-family: var(--sans); font-size: var(--t-7); font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.valeur-texte { font-size: var(--t-5); color: var(--ink-mid); line-height: 1.7; }

/* C'etait un aplat rose borde de rose, plus fort que la banniere d'accueil :
   l'appel criait plus haut que le titre du site. Il redevient un panneau, avec
   une lueur rose posee dessous plutot qu'un fond sature, et le bouton reste la
   seule chose vraiment coloree du bloc. */
.bandeau-appel {
  position: relative; overflow: hidden;
  background: var(--panneau);
  border: 1px solid var(--filet); border-radius: var(--radius);
  box-shadow: var(--lisere), 0 30px 70px -48px rgba(244,78,139,0.75);
  padding: 40px; display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
}
.bandeau-appel::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(620px 280px at 0% 0%, rgba(244,78,139,0.16), transparent 62%);
}
.bandeau-appel > * { position: relative; }
.bandeau-appel h3 { font-family: var(--sans); font-size: var(--t-f2); font-weight: 800; letter-spacing: -0.025em; color: var(--ink); line-height: 1.1; }
.bandeau-appel p  { font-size: var(--t-6); color: var(--ink-mid); margin-top: 8px; max-width: 520px; line-height: 1.7; }

/* Les 32 pixels reserves a droite laissaient passer la frise. Elle ne
   s'affiche plus qu'a partir de 1280 pixels, ou la reserve est de 180 : en
   dessous, ces 32 pixels ne laissent passer rien du tout et volent autant de
   largeur aux vignettes. */
.catalogue { --avancement: 0; }

/* Le catalogue se fermait sur un filet pleine largeur, quarante-huit pixels
   au-dessus de celui du surtitre « Autour des films ». Deux traits qui se
   suivent de si pres n'en valent qu'un, et c'est le second qui dit quelque
   chose : il ouvre une section. Celui-ci part - ce qui regle du meme coup le
   croisement avec la frise, puisqu'il n'y a plus rien a croiser.

   Le rembourrage du haut, lui, revient : chaque famille apportait le sien, de
   <section>, et on le lui a retire pour elargir les vignettes. Quarante-quatre
   pixels, et non les quatre-vingts d'une section ordinaire : le titre suit un
   bandeau deja haut. */
.section-catalogue { padding-top: 44px; border-bottom: none; }

.entete-projets {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 28px; flex-wrap: wrap; gap: 20px;
}
/* Dans une entete a deux colonnes, le sous-titre ne porte plus sa marge
   basse : c'est l'entete qui tient l'espace, et le bouton s'aligne sur le bas
   du texte. */
.entete-projets .sec-sous-titre { margin-bottom: 0; }

.chrono-piste {
  --piste-h: 190px;
  position: relative; width: 24px; height: var(--piste-h);
}

.chrono-ligne, .chrono-fait { position: absolute; right: 11px; width: 2px; }
.chrono-ligne { top: 0; bottom: 0; background: var(--border); border-radius: var(--radius-pilule); }

.chrono-fait {
  top: 0; height: 100%; background: var(--carrot);
  transform: scaleY(var(--avancement)); transform-origin: center top;
}

.chrono-point {
  position: absolute; right: 4px; top: -8px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--carrot);
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 4.5px var(--carrot-mid);
  transform: translate3d(0, calc(var(--avancement) * var(--piste-h)), 0);
  will-change: transform;
}

.chrono-etape {
  position: absolute; right: 0; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  text-decoration: none; text-align: right;
}

.chrono-texte { display: none; line-height: 1.25; }
.chrono-nom {
  display: block; font-family: var(--sans); font-size: var(--t-5); font-weight: 600;
  color: var(--ink); transition: color 0.2s;
}
.chrono-compte {
  display: block; font-size: var(--t-3); color: var(--ink-light); margin-top: 2px;
  transition: color 0.2s;
}

.chrono-puce {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); border: 2px solid var(--border); color: var(--ink-light);
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.chrono-etape:hover .chrono-nom,
.chrono-etape.actif .chrono-nom { color: var(--carrot-texte); }
.chrono-etape.actif .chrono-compte { color: var(--ink-mid); }
.chrono-etape:hover .chrono-puce { border-color: var(--carrot-texte); color: var(--carrot-texte); }
.chrono-etape.franchie .chrono-puce {
  border-color: var(--carrot-texte); background: var(--carrot); color: var(--creme);
}

/* La frise se montre et se cache au fil du defilement, selon que le catalogue
   passe ou non derriere elle. Elle le faisait d'un coup, sans transition : un
   element qui clignote au passage d'une limite se lit comme un bogue, et
   c'est ce qu'on voyait en arrivant en bas de la page. Elle fond maintenant,
   et la visibilite attend la fin du fondu pour basculer - sans le delai, elle
   disparaitrait avant d'avoir fini de s'effacer. */
.chronologie {
  position: fixed; right: 12px; top: 50%; z-index: 40;
  transform: translateY(-50%);
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.chronologie.visible {
  opacity: 1; visibility: visible;
  transition: opacity 0.25s ease, visibility 0s;
}

/* Elle se cachait aussi des que la fiche s'ouvrait. Le voile n'est qu'a demi
   opaque et il floute ce qu'il y a dessous : rien n'oblige a l'effacer, elle
   se floute comme le reste de la page. */
body.fond-verrouille .carotte-flottante { animation-play-state: paused; }

@media (min-width: 1280px) {
  .catalogue { padding-right: 180px; }
  .chronologie { right: 48px; }
  .chrono-piste { --piste-h: 268px; width: 152px; }
  .chrono-texte { display: block; }

}

/* Une famille est une <section> : elle heritait donc du rembourrage pose sur
   toutes les sections du site - 48 pixels de chaque cote sur ordinateur, 20
   sur telephone - a l'interieur d'une section qui les avait deja pris. Et 80
   pixels en haut et en bas, alors qu'elle a deja ses 40 de marge entre
   familles. C'est autant de largeur en moins pour les vignettes : sur un
   telephone de 390 pixels, il n'en restait que 278 pour la carte.

   Elle heritait aussi du filet du bas. Tant qu'elle portait son rembourrage,
   ce filet se tenait loin des cartes ; sans lui, il venait se coller sous la
   derniere rangee - a un pixel du bord bas de la carte de « Dernier Souffle »,
   mesure. Le seul filet voulu entre deux familles est celui de
   « .famille + .famille ». */
.famille { scroll-margin-top: 80px; padding: 0; border-bottom: 0; }

.famille + .famille {
  margin-top: 56px; padding-top: 48px; border-top: 1px solid var(--border);
}
.famille-titre {
  font-family: var(--sans); font-size: var(--t-f1);
  font-weight: 700; letter-spacing: -0.02em;
  color: var(--ink); line-height: 1.12; margin-bottom: 12px;
}
.famille-resume {
  font-size: var(--t-6); color: var(--ink-mid); line-height: 1.7;
  max-width: 680px; margin-bottom: 28px;
  padding-left: 16px; border-left: 2px solid var(--carrot-mid);
}

/* Les colonnes sont en parts egales : la rangee est donc toujours pleine,
   quelle que soit la largeur de la fenetre. Un plafond de 1240 pixels a bien
   ete essaye pour empecher les cartes de grossir sans fin - il laissait 632
   pixels de vide a droite sur un ecran de 1920, un tiers de la page, et les
   cartes se serraient a gauche. C'est le nombre de colonnes qui s'adapte, pas
   la largeur de la grille. */
.grille-projets {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 20px;
}

/* Au-dela de 1700 pixels, trois colonnes donneraient des cartes de 450 et
   plus. Une quatrieme colonne les ramene a 340, et la rangee reste pleine.
   Seulement dans le catalogue : la vitrine de l'accueil ne montre que trois
   films, une quatrieme colonne y laisserait justement la case vide qu'on
   cherche a eviter. */
@media (min-width: 1700px) {
  .section-catalogue .grille-projets { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Chaque carte est enveloppee dans un element de liste, pour qu'un lecteur
   d'ecran annonce le nombre de films et la place de celui qu'il lit. La case
   ne sert qu'a cela : elle se laisse etirer par la grille et laisse le bouton
   occuper toute sa hauteur. */
.grille-projets > .carte-case { display: flex; min-width: 0; }
.grille-projets > .carte-case > .carte-projet { flex: 1 1 auto; }

/* Une famille d'un seul film avait sa propre regle : la carte etait figee a
   430 pixels pour ne pas laisser deux colonnes vides a sa droite. Le remede
   etait pire que le mal - sur un grand ecran, les autres cartes depassaient
   les 430 et « Dernier Souffle », seul de sa famille, se retrouvait le plus
   petit film du catalogue. Une carte est une carte : elle fait la largeur
   d'une colonne, quelle que soit la famille, et deux colonnes vides a droite
   disent simplement qu'il n'y a qu'un film. */

.carte-projet {
  background: var(--panneau); border: 1px solid var(--filet);
  box-shadow: var(--lisere), var(--pose);
  border-radius: var(--radius); overflow: hidden; cursor: pointer;
  text-align: left; padding: 0; font: inherit; color: inherit; width: 100%;
  display: flex; flex-direction: column;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
/* Au survol la carte monte d'un cheveu et son filet s'allume. L'ombre etait
   presque invisible sur un fond sombre : elle porte maintenant la carte. */
.carte-projet:hover {
  transform: translateY(-4px); border-color: var(--filet-fort);
  box-shadow: var(--lisere), 0 26px 48px -28px rgba(0,0,0,0.95);
}

.carte-vignette { position: relative; overflow: hidden; background-color: #1C0C15; }
.carte-vignette img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; transition: transform 0.5s ease, opacity 0.35s ease; }

/* Dates, durees et compteurs en chasse fixe : dans une grille de cartes, des
   chiffres de largeurs differentes font danser les lignes. */
.carte-meta, .carte-duree, .modale-meta-item, .chrono-compte,
.laurier-annee, .diffusion-date { font-variant-numeric: tabular-nums; }
.carte-projet:hover .carte-vignette img { transform: scale(1.05); }
.carte-voile { position: absolute; inset: 0; background: linear-gradient(to top, rgba(35,14,24,0.55) 0%, transparent 58%); }

.carte-lecture {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(0.85);
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,246,238,0.92); color: var(--carrot-texte);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.22s, transform 0.22s;
}
.carte-projet:hover .carte-lecture { opacity: 1; transform: translate(-50%,-50%) scale(1); }

/* Le genre et la durée sont deux étiquettes de même nature, posées sur la même
   image. Le genre était un aplat de rose vif quand la durée se contentait d'un
   fond sombre : l'œil ne voyait plus que lui en parcourant le catalogue. Les
   deux se traitent maintenant pareil. */
.carte-genre {
  position: absolute; top: 12px; left: 12px;
  background: rgba(24,9,16,0.62); color: var(--creme);
  font-family: var(--sans); font-size: var(--t-1); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--radius-pilule);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.carte-duree {
  position: absolute; bottom: 12px; right: 12px;
  background: rgba(24,9,16,0.62); color: var(--creme);
  font-family: var(--sans); font-size: var(--t-2); font-weight: 600;
  padding: 4px 10px; border-radius: var(--radius-sm);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}

.carte-corps { padding: 20px 20px 8px; flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
.carte-titre { font-family: var(--sans); font-size: var(--t-8); font-weight: 700; color: var(--ink); line-height: 1.2; }
.carte-meta  { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.carte-meta span { font-size: var(--t-3); color: var(--ink-light); display: flex; align-items: center; gap: 4px; }
.carte-vues svg { opacity: 0.8; }
.carte-resume {
  font-size: var(--t-4); color: var(--ink-mid); margin-top: 10px; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.carte-pied { padding: 12px 20px 20px; }
.carte-lien { font-family: var(--sans); font-size: var(--t-3); font-weight: 600; color: var(--carrot-texte); display: flex; align-items: center; gap: 6px; }

.carte-commanditaire {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-2); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-light); margin-bottom: 8px;
}
.carte-commanditaire::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--carrot); }

/* Dans une grille où certaines cartes nomment leur commanditaire et d'autres
   non, les titres d'une même rangée ne tombaient pas à la même hauteur. Les
   cartes sans commanditaire gardent donc sa place, une ligne vide de même
   corps et de même marge. Seulement là où il en existe au moins un : la
   famille « Créations », qui n'en a aucun, ne reçoit pas de ligne pour rien. */
.grille-projets:has(.carte-commanditaire) .carte-corps:not(:has(.carte-commanditaire))::before {
  content: '\00a0'; display: block;
  font-size: var(--t-2); font-weight: 600; letter-spacing: 0.08em;
  margin-bottom: 8px;
}

.fond-modale {
  position: fixed; inset: 0; z-index: 800;
  /* Un voile sombre, sans flou. La page floutée derrière la fiche faisait
     une tache trouble sur les côtés, et ce n'était pas beau. La page reste
     à peine visible, nette, au lieu d'être brouillée. C'est la valeur que le
     téléphone utilisait déjà. */
  background: rgba(35,14,24,0.90);
  display: none; align-items: flex-start; justify-content: center;
  padding: 24px 20px;
}
.fond-modale.ouverte { display: flex; animation: voileEntre 0.20s ease; }
.fond-modale.sortie { animation: voileSort 0.16s ease forwards; }

.modale {
  animation: ficheEntre 0.26s cubic-bezier(0.22, 0.9, 0.3, 1);
  width: 100%; max-width: 940px; max-height: 100%; overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg); border-radius: var(--radius); position: relative;
  box-shadow: 0 24px 80px rgba(0,0,0,0.65);
}
.fond-modale.sortie .modale { animation: ficheSort 0.16s ease forwards; }
@keyframes voileEntre { from { opacity: 0; } to { opacity: 1; } }
@keyframes voileSort  { from { opacity: 1; } to { opacity: 0; } }
@keyframes ficheEntre { from { opacity: 0; transform: translateY(14px) scale(0.975); } to { opacity: 1; transform: none; } }
@keyframes ficheSort  { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(10px) scale(0.985); } }

/* La croix suit le défilement de la fiche. Elle ne peut pas être collante
   elle-même sans prendre sa place dans le flux et pousser la vidéo vers le
   bas ; c'est donc ce bloc de hauteur nulle qui se colle en haut de la zone
   défilante, et la croix se pose dessus sans rien déplacer. */
.modale-ancrage {
  position: sticky; top: 0; height: 0; z-index: 30;
}

.modale-fermer {
  position: absolute; top: 14px; right: 14px; z-index: 30;
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  /* Elle flotte maintenant au-dessus du texte autant que de la vidéo. Un fond
     à peine translucide et une ombre portée la détachent de ce qui passe
     dessous, sans quoi une ligne de texte semblait la traverser. */
  background: rgba(24,9,16,0.64); border: 1.5px solid rgba(255,246,238,0.22);
  color: var(--creme); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 12px rgba(12,5,8,0.55);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  transition: background 0.18s, transform 0.18s;
}
.modale-fermer:hover { background: var(--carrot); border-color: var(--carrot-texte); transform: rotate(90deg); }

.modale-contenu { padding: 28px 32px 40px; }
.modale-titre { font-family: var(--sans); font-size: var(--t-f3); font-weight: 800; letter-spacing: -0.03em; color: var(--ink); line-height: 1.06; }

/* La façon dont le film se range : son genre, sa famille, celui qui l'a
   commandé. Une ligne de mots, pas des pastilles de couleur, et sous le titre
   plutôt qu'au-dessus. */
.modale-classement {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px;
  margin-top: 10px;
  font-size: var(--t-4); color: var(--ink-light);
}
.modale-classement .classement-genre { color: var(--ink-mid); font-weight: 500; }
.classement-point { color: var(--ink-light); opacity: 0.55; }

.modale-meta  { display: flex; gap: 20px; flex-wrap: wrap; margin: 10px 0 20px; }
.modale-meta-item { font-size: var(--t-4); color: var(--ink-light); display: flex; align-items: center; gap: 6px; }
.modale-meta-item strong { color: var(--ink); font-weight: 500; }
/* La tête de la fiche : le nom du film, la façon dont il se range, ce qu'on en
   sait, et ce qu'on peut en faire. Une grille plutôt qu'un empilement, pour
   que le bouton monte à hauteur du titre sur grand écran alors qu'il vient
   après les informations dans l'ordre de lecture — c'est celui qui compte sur
   téléphone, où tout se remet en colonne. */
.modale-tete {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "titre      actions"
    "classement classement"
    "meta       meta";
  column-gap: 20px;
}
.modale-tete .modale-titre   { grid-area: titre; }
.modale-tete .modale-classement { grid-area: classement; }
.modale-tete .modale-meta    { grid-area: meta; }
.modale-tete-actions { grid-area: actions; align-self: center; }

/* Le bouton de partage accompagne le titre, sur lequel il agit. Il reste
   discret tant qu'on ne le survole pas, ce n'est pas lui qu'on vient lire. */
.bouton-partage {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: var(--t-4); font-weight: 600;
  padding: 6px 16px; min-height: 30px; border-radius: var(--radius-pilule); cursor: pointer;
  color: var(--ink-mid); background: transparent;
  border: 1.5px solid var(--border);
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.bouton-partage:hover {
  background: var(--carrot-soft); border-color: transparent; color: var(--carrot-texte);
}
.bouton-partage.fait {
  background: var(--carrot-soft); border-color: transparent; color: var(--carrot-texte);
}
.bouton-partage-ico { display: flex; }
.bouton-partage svg { display: block; }

@media (max-width: 600px) {
  /* Sur un écran étroit, tout se remet en colonne dans l'ordre où on le lit :
     le nom du film, son classement, ses informations, puis l'action. */
  .modale-tete { display: block; }
  .modale-tete .modale-meta { margin-bottom: 0; }
  .modale-tete-actions { margin: 16px 0 24px; }
}

.modale-texte { font-size: var(--t-6); line-height: 1.8; color: var(--ink-mid); max-width: 68ch; }
.modale-texte p + p { margin-top: 12px; }

/* Le palmarès prend toute la largeur de la fiche, au-dessus des deux colonnes.
   Un laurier a besoin d'air autour de lui, le serrer dans une colonne étroite
   le rendrait illisible. */
/* Le palmares, les anecdotes et les diffusions sont trois blocs de meme
   nature, chacun avec sa teinte : un or pour le palmares, un rose pour les
   anecdotes, un creme pour les diffusions. Ils ont un temps pris le panneau
   commun du site, gris et sans or ; ce n'etait pas beau, et ils ont
   retrouve leurs couleurs le 27 septembre 2026. L'or n'est dans aucune
   palette du site, mais c'est la couleur d'un palmares. */
.palmares {
  margin-top: 28px; padding: 24px 24px 20px;
  border: 1.5px solid var(--border); border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(235,201,141,0.07) 0%, transparent 62%);
}
.palmares .mini-titre { display: flex; align-items: center; gap: 6px; color: #D9B87C; margin-bottom: 20px; }

.palmares-rangee {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 4px; align-items: start;
}

.laurier {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 10px; padding: 12px 10px 16px; border-radius: var(--radius-sm);
  text-decoration: none; color: inherit;
  transition: background 0.2s ease, transform 0.2s ease;
}
.laurier:hover, .laurier:focus-visible { background: rgba(255,246,238,0.05); transform: translateY(-2px); }
.laurier:focus-visible { outline: 2px solid var(--carrot-texte); outline-offset: 2px; }

/* Le laurier du prix est plus grand que les deux autres. Sans cette boîte de
   hauteur fixe, les légendes ne démarreraient pas toutes à la même ligne. */
.laurier picture { display: flex; height: 104px; align-items: center; justify-content: center; }

.laurier img {
  height: 88px; width: auto; display: block;
  opacity: 0.82; transition: opacity 0.2s ease;
}
.laurier:hover img, .laurier:focus-visible img { opacity: 1; }
.laurier-prix img { height: 100px; opacity: 1; }

.laurier-titre {
  font-family: var(--sans); font-size: var(--t-4); font-weight: 700;
  line-height: 1.3; color: var(--ink); max-width: 200px;
}
/* L'or n'est pas dans la palette du site, mais c'est la couleur de la chose :
   un premier prix est dore, et on s'attend a le voir. Il ne sert qu'ici, sur
   le seul laurier qui l'a merite - le titre de la rubrique, lui, reste gris,
   sans quoi la rubrique entiere se mettrait a briller. */
.laurier-prix .laurier-titre { color: #EBC98D; }
.laurier-festival { font-size: var(--t-3); line-height: 1.4; color: var(--ink-light); max-width: 200px; }

/* Même cadre que le palmarès et les diffusions. Les trois blocs sont de même
   nature, ils se ressemblent, seule la teinte du dégradé les distingue. Le
   texte reste aligné à gauche, une prose centrée se lirait mal. */
.anecdotes {
  margin-top: 28px; padding: 24px 24px 24px;
  border: 1.5px solid var(--border); border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(212,56,117,0.07) 0%, transparent 62%);
}
.anecdotes .mini-titre {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 16px; color: var(--carrot-texte);
}

.anecdote { font-size: var(--t-6); line-height: 1.75; color: var(--ink-mid); }
.anecdote + .anecdote {
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border);
}

/* Meme traitement que le palmares, un cadre discret et des elements centres.
   Ce sont deux blocs de meme nature, ils se ressemblent. */
.diffusions {
  margin-top: 28px; padding: 24px 24px 24px;
  border: 1.5px solid var(--border); border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(255,246,238,0.04) 0%, transparent 62%);
}
.diffusions .mini-titre { display: flex; align-items: center; gap: 6px; margin-bottom: 20px; }

.diffusion { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.diffusion + .diffusion { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border); }
.diffusion-evenement {
  font-family: var(--sans); font-size: var(--t-5); font-weight: 700;
  color: var(--ink); line-height: 1.35; max-width: 460px;
}
.diffusion-quand { font-size: var(--t-3); color: var(--ink-light); }

.diffusion-photos {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 10px; width: 100%; max-width: 520px; margin-bottom: 2px;
}
.photo-diffusion {
  width: 100%; aspect-ratio: 3 / 2; display: block; overflow: hidden;
  border-radius: var(--radius-sm); cursor: zoom-in;
  border: none; padding: 0; background-color: #1C0C15;
  transition: opacity 0.2s, transform 0.2s;
}
.photo-diffusion img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-diffusion:hover { opacity: 0.88; transform: scale(1.01); }

.modale-deux-colonnes { display: grid; grid-template-columns: 1fr 300px; gap: 32px; margin-top: 28px; align-items: start; }
.modale-deux-colonnes.une-colonne { grid-template-columns: 1fr; }
.modale-cote { display: flex; flex-direction: column; gap: 24px; }

.lien-dehors {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: var(--radius-md);
  border: 1.5px solid var(--carrot-mid); background: var(--c1-soft);
  color: var(--ink); text-decoration: none;
  transition: border-color 0.18s, background 0.18s;
}
.lien-dehors + .lien-dehors { margin-top: 10px; }
.lien-dehors:hover { border-color: var(--carrot); background: var(--carrot-soft); }
.lien-dehors-texte { display: block; min-width: 0; line-height: 1.35; }
.lien-dehors-titre {
  display: block; font-family: var(--sans); font-size: var(--t-5); font-weight: 600;
  color: var(--ink);
}
.lien-dehors-auteur { display: block; font-size: var(--t-4); color: var(--ink-mid); margin-top: 2px; }
.lien-dehors-hote {
  display: block; font-size: var(--t-3); color: var(--ink-light); margin-top: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lien-dehors-fleche {
  margin-left: auto; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--carrot); color: var(--creme);
}

.modale-equipe { border-top: 1.5px solid var(--border); padding-top: 20px; }
.mini-titre {
  font-family: var(--sans); font-size: var(--t-2); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-light); margin-bottom: 12px;
}
.ligne-credit { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: var(--t-4); }
.credit-role { color: var(--ink-light); }
.credit-nom  { font-weight: 500; text-align: right; }

.grille-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.photo-projet {
  width: 100%; aspect-ratio: 16/9; display: block; overflow: hidden;
  border-radius: var(--radius-sm); cursor: zoom-in;
  border: none; padding: 0; background-color: #1C0C15;
  transition: opacity 0.2s, transform 0.2s;
}
.photo-projet img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-projet:hover { opacity: 0.88; transform: scale(1.02); }

.lecteur {
  position: relative; width: 100%;
  aspect-ratio: var(--ratio, 16 / 9);
  background: #090406; overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
  font-family: var(--sans);
}
.lecteur video {
  width: 100%; height: 100%; display: block;
  object-fit: contain; background: #090406;
}

/* Les trois écritures du plein écran restent séparées à dessein. Un seul
   sélecteur que le navigateur ne connaît pas annule toute la règle, et c'est
   ce qui laissait les deux coins arrondis du haut visibles en plein écran.
   .plein-ecran est posée par le lecteur lui-même et ne dépend de rien. */
/* En plein écran, la taille est celle que le navigateur donne : 100 % de la
   boîte qu'il vient de créer. On disait 100vw et 100vh, ce qui n'est pas la
   même chose. Sur un écran au format inhabituel, un pliable, une tablette
   avec une barre système, l'unité vh ne tombe pas sur la hauteur réelle et il
   restait une bande le long du bord, par laquelle on voyait la page derrière.
   Le fond passe au noir franc : c'est la couleur d'une salle, et plus rien ne
   peut s'y confondre avec la fiche. */
.lecteur.plein-ecran {
  border-radius: 0;
  aspect-ratio: auto;
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  background: #000;
}
.lecteur:fullscreen {
  border-radius: 0;
  aspect-ratio: auto;
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  background: #000;
}
.lecteur:-webkit-full-screen {
  border-radius: 0;
  aspect-ratio: auto;
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  background: #000;
}
.lecteur.plein-ecran video { background: #000; }
.lecteur:fullscreen video { background: #000; }
.lecteur:-webkit-full-screen video { background: #000; }
.lecteur.plein-ecran .lecteur-affiche img { object-fit: contain; }
.lecteur:fullscreen .lecteur-affiche img { object-fit: contain; }
.lecteur:-webkit-full-screen .lecteur-affiche img { object-fit: contain; }

/* Le fond que le navigateur pose derrière un élément en plein écran est gris
   par défaut. Un liseré clair apparaissait autour de l'image. */
.lecteur::backdrop { background: #000; }
.lecteur::-webkit-backdrop { background: #000; }

/* Les coins arrondis en plein écran. Un ancêtre porteur d'un
   backdrop-filter devient le bloc conteneur de ses descendants, et le
   navigateur ne sort alors pas vraiment le lecteur du flux : il reste
   découpé par la fiche, dont les coins arrondis du haut réapparaissaient.
   Le voile n'a plus de flou, mais l'arrondi de la fiche reste suspendu le
   temps du plein écran, où il ne se voit de toute façon pas : si un flou
   revenait sur le voile, les coins ne reviendraient pas avec lui. Le
   débordement de la fiche n'est pas touché, elle perdrait sa position de
   défilement au retour. */
body.ecran-plein .modale { border-radius: 0; box-shadow: none; }

.lecteur-affiche {
  position: absolute; inset: 0; z-index: 6;
  display: flex; align-items: center; justify-content: center;
  border: none; padding: 0; cursor: pointer;
  /* L'apercu flou est pose en style en ligne par le lecteur. Il tient la
     place avant que l'affiche n'arrive, puis disparait dessous sans qu'on le
     voie partir. background: none aurait remis background-size a auto. */
  background-color: transparent;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.lecteur-affiche img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lecteur-affiche::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(12,5,8,0.55) 0%, rgba(12,5,8,0.12) 45%, rgba(12,5,8,0.30) 100%);
}
.lecteur-gros-play {
  position: absolute; z-index: 2;
  width: 74px; height: 74px; border-radius: 50%;
  background: rgba(255,246,238,0.94); color: var(--carrot-texte);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 40px rgba(0,0,0,0.45);
  transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1), background 0.2s;
}
.lecteur-affiche:hover .lecteur-gros-play { transform: scale(1.1); background: var(--creme); }
.lecteur-affiche.masque { display: none; }

.lecteur-attente {
  position: absolute; top: 50%; left: 50%; z-index: 5;
  width: 46px; height: 46px; margin: -24px 0 0 -24px;
  border: 3px solid rgba(255,246,238,0.22);
  border-top-color: var(--creme); border-radius: 50%;
  animation: rotation 0.85s linear infinite;
  opacity: 0; transition: opacity 0.2s; pointer-events: none;
}
.lecteur.charge .lecteur-attente { opacity: 1; }
@keyframes rotation { to { transform: rotate(360deg); } }

.lecteur-info {
  position: absolute; top: 14px; left: 14px; z-index: 7;
  background: rgba(17,7,12,0.66); color: var(--creme);
  font-size: var(--t-3); font-weight: 600; letter-spacing: 0.02em;
  padding: 8px 12px; border-radius: var(--radius-sm);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  opacity: 0; transform: translateY(-6px);
  transition: opacity 0.25s, transform 0.25s; pointer-events: none;
}
.lecteur-info.visible { opacity: 1; transform: none; }

.lecteur-conseil {
  position: absolute; left: 14px; right: 14px; bottom: 72px; z-index: 10;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: rgba(24,9,16,0.80);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(237,44,215,0.38); border-radius: var(--radius-md);
  padding: 10px 12px; color: rgba(255,246,238,0.90);
  font-family: var(--body); font-size: var(--t-4); line-height: 1.5;
}
.lecteur-conseil [data-role="conseil-texte"] { flex: 1; min-width: 180px; }
.lecteur-conseil button {
  font-family: var(--sans); font-size: var(--t-3); font-weight: 700;
  border: none; border-radius: var(--radius-sm); cursor: pointer; padding: 8px 12px;
  background: var(--violet-acc); color: var(--creme);
  transition: background 0.15s;
}
.lecteur-conseil button:hover { background: #EE66DA; }
.lecteur-conseil [data-role="conseil-fermer"] {
  background: none; color: rgba(255,246,238,0.55); font-size: var(--t-9); padding: 2px 8px;
}
.lecteur-conseil [data-role="conseil-fermer"]:hover { background: rgba(255,246,238,0.12); color: var(--creme); }

.lecteur-barre {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 8;
  padding: 28px 16px 10px;
  background: linear-gradient(to top, rgba(12,5,8,0.88) 0%, rgba(12,5,8,0.55) 55%, transparent 100%);
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.22s, transform 0.22s;
}
.lecteur.actif .lecteur-barre,
.lecteur.en-pause .lecteur-barre { opacity: 1; transform: none; }

/* Le clavier garde la barre ouverte, le doigt non. Avec :focus-within, toucher
   un bouton sur un écran tactile y laissait le focus, et la barre ne repartait
   plus jamais : elle restait posée en travers du film. */
.lecteur:has(:focus-visible) .lecteur-barre { opacity: 1; transform: none; }

.lecteur.avant-lecture .lecteur-barre {
  opacity: 0; transform: translateY(6px); pointer-events: none;
}

.lecteur-progression {
  position: relative; height: 16px; cursor: pointer;
  display: flex; align-items: center; margin-bottom: 2px;
}
.lecteur-rail {
  position: relative; width: 100%; height: 4px; border-radius: var(--radius-pilule);
  background: rgba(255,246,238,0.24); overflow: hidden;
  transition: height 0.15s;
}
.lecteur-progression:hover .lecteur-rail { height: 6px; }
.lecteur-tampon { position: absolute; inset: 0 auto 0 0; width: 0; background: rgba(255,246,238,0.34); }
.lecteur-joue   { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--c1); }

.lecteur-curseur {
  position: absolute; top: 50%; left: 0;
  width: 13px; height: 13px; margin: -6px 0 0 -6px;
  border-radius: 50%; background: var(--creme); box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  opacity: 0; transition: opacity 0.15s; pointer-events: none;
}
.lecteur-progression:hover .lecteur-curseur { opacity: 1; }

.lecteur-infobulle {
  position: absolute; bottom: 22px; transform: translateX(-50%);
  background: rgba(17,7,12,0.9); color: var(--creme);
  font-size: var(--t-2); font-weight: 600; padding: 4px 8px; border-radius: var(--radius-xs);
  opacity: 0; pointer-events: none; transition: opacity 0.15s; white-space: nowrap;
}
/* L'infobulle ne sert qu'à la souris, elle annonce l'instant survolé avant le
   clic. Sur un écran tactile il n'y a pas de survol, et l'état :hover reste
   collé au dernier élément touché. La bulle restait donc affichée après un
   appui sur la barre, vide et calée tout à gauche, sous la forme d'un petit
   carré noir à coins arrondis. Elle est maintenant réservée aux pointeurs
   fins, et de toute façon masquée tant qu'elle n'a pas de texte. */
.lecteur-infobulle:empty { display: none; }

@media (hover: hover) and (pointer: fine) {
  .lecteur-progression:hover .lecteur-infobulle { opacity: 1; }
}

.lecteur-commandes { display: flex; align-items: center; gap: 4px; }
.lecteur-btn {
  width: 38px; height: 38px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: rgba(255,246,238,0.92); border-radius: var(--radius-sm);
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.lecteur-btn:hover { background: rgba(255,246,238,0.16); color: var(--creme); transform: scale(1.06); }

/* Au doigt, les commandes du lecteur descendent a trente-trois points de cote
   sur un telephone, et la barre de progression n'en offre que seize a saisir.
   On elargit la zone sensible sans toucher au dessin : le pseudo-element est
   invisible mais recoit les evenements pour le compte du bouton.
   Rien de tout cela ne s'applique a la souris, qui vise juste. */
@media (pointer: coarse) {
  .lecteur-btn, .lecteur-btn-qualite { position: relative; }
  .lecteur-btn::before, .lecteur-btn-qualite::before {
    content: ''; position: absolute; top: 50%; left: 50%;
    width: 44px; height: 44px; min-width: 100%;
    transform: translate(-50%, -50%);
  }
  /* La barre s'attrape seize points plus haut, du cote de l'image, et deux de
     plus vers le bas seulement : au-dela elle mordrait sur les boutons. */
  .lecteur-progression::before {
    content: ''; position: absolute; left: 0; right: 0; top: -16px; bottom: -2px;
  }
}
.lecteur-btn svg { display: block; }
.lecteur-espace { flex: 1; }

.lecteur-temps {
  font-size: var(--t-3); font-weight: 600; color: rgba(255,246,238,0.86);
  font-variant-numeric: tabular-nums; padding: 0 8px; white-space: nowrap;
}

.lecteur-volume { display: flex; align-items: center; }
.lecteur-glissiere {
  width: 0; opacity: 0; height: 4px; margin: 0;
  accent-color: var(--c1); cursor: pointer;
  transition: width 0.2s, opacity 0.2s, margin 0.2s;
}
.lecteur-volume:hover .lecteur-glissiere,
.lecteur-glissiere:focus-visible { width: 72px; opacity: 1; margin: 0 8px 0 2px; }

.lecteur-qualite { position: relative; }
.lecteur-btn-qualite {
  width: auto; padding: 0 12px; gap: 6px;
  font-family: var(--sans); font-size: var(--t-3); font-weight: 600;
  /* Sans cela « Auto 480p » se coupe en deux lignes dès que la barre est à
     l'étroit, sur un écran de téléphone étroit notamment. */
  white-space: nowrap;
}
.lecteur-menu {
  position: absolute; bottom: 46px; right: 0;
  min-width: 262px; max-width: min(320px, 92vw);
  /* Ces deux boites-ci sont posees sur une video qui joue : leur fond change
     a chaque image, elles sont donc les seules a etre refiltrees en continu.
     C'est pour cela qu'elles restent les plus fermees des neuf - assez pour
     que le texte tienne sur n'importe quelle image, assez ouvertes pour
     qu'on voie le film continuer derriere. */
  background: rgba(24,9,16,0.82);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,246,238,0.14); border-radius: var(--radius-md);
  padding: 6px; box-shadow: 0 16px 48px rgba(0,0,0,0.6);
  display: none; z-index: 12;
  overflow-y: auto; overscroll-behavior: contain;
}
.lecteur-menu.ouvert { display: block; animation: menuEntre 0.16s ease; }
@keyframes menuEntre { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.lecteur-menu-titre {
  font-size: var(--t-1); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,246,238,0.50); padding: 8px 12px 6px;
}
.lecteur-option {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 10px 12px; border: none; background: none; cursor: pointer;
  color: rgba(255,246,238,0.88); font-family: var(--sans); font-size: var(--t-4); font-weight: 500;
  border-radius: var(--radius-sm); text-align: left; transition: background 0.14s;
}
.lecteur-option:hover { background: rgba(255,246,238,0.10); }

.lecteur-option[aria-checked="true"] { color: #FEB6CC; font-weight: 700; }
.lecteur-option-note { font-size: var(--t-2); font-weight: 500; color: rgba(255,246,238,0.50); }

.lecteur-menu-pied {
  border-top: 1px solid rgba(255,246,238,0.10); margin-top: 6px; padding: 10px 12px 6px;
  font-size: var(--t-2); color: rgba(255,246,238,0.50); line-height: 1.5;
}
.lecteur-menu-pied strong { color: rgba(255,246,238,0.72); font-weight: 600; }

.lecteur-option-nom { display: flex; align-items: center; gap: 8px; }

/* Le trait qui met les paliers les plus lourds à part. Il portait autrefois
   un titre, que le menu n'avait pas besoin de nommer. */
.lecteur-menu-separateur {
  margin: 10px 12px 8px;
  border-top: 1px solid rgba(237,44,215,0.24);
}
.lecteur-option.master {
  color: var(--violet-clair); align-items: center; padding: 12px 12px;
  border: 1px solid rgba(237,44,215,0.32);
  background: linear-gradient(100deg, rgba(237,44,215,0.18) 0%, rgba(234,64,110,0.05) 75%);
}
.lecteur-option.master:hover {
  background: linear-gradient(100deg, rgba(237,44,215,0.30) 0%, rgba(234,64,110,0.10) 75%);
  border-color: rgba(237,44,215,0.55);
}
.lecteur-option.master[aria-checked="true"] { border-color: rgba(237,44,215,0.70); }
.lecteur-etoile { color: var(--violet-acc); font-size: var(--t-1); line-height: 1; }

.master-libelle { display: flex; flex-direction: column; gap: 2px; }
.master-nom { font-family: var(--sans); font-size: var(--t-5); font-weight: 700; letter-spacing: 0.02em; }
.master-fiche {
  font-family: var(--body); font-size: var(--t-2); font-weight: 400;
  letter-spacing: 0.03em; color: rgba(255,160,235,0.64);
}
.lecteur-option.master .lecteur-option-note {
  color: rgba(255,160,235,0.74); align-self: center; white-space: nowrap;
}
.lecteur-option-note { white-space: nowrap; }

.lecteur-menu-note {
  padding: 6px 12px 8px; font-family: var(--body);
  font-size: var(--t-2); line-height: 1.5; color: rgba(255,160,235,0.62);
}

.lecteur-erreur {
  position: absolute; inset: 0; z-index: 9;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; text-align: center; padding: 28px;
  background: rgba(12,5,8,0.94); color: rgba(255,246,238,0.86);
}
.lecteur-erreur.visible { display: flex; }
.lecteur-erreur p { font-family: var(--body); font-size: var(--t-5); line-height: 1.6; max-width: 440px; }
.lecteur-erreur code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--t-3); background: rgba(255,246,238,0.10); padding: 2px 6px; border-radius: var(--radius-xs);
}

.lecteur.sans-curseur { cursor: none; }

/* Un fond presque noir, sans flou, pour que la photo soit seule à l'écran.
   Le flou de la page derrière n'était pas beau. On garde quatre pour cent
   de transparence : on devine encore la fiche d'où l'on vient. */
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(13,6,9,0.96);
  display: none; flex-direction: column; align-items: center; justify-content: center;
  padding: 20px;
}
.lightbox.ouverte { display: flex; animation: voileEntre 0.18s ease; }
.lightbox.sortie { animation: voileSort 0.14s ease forwards; }

.lb-entete {
  width: 100%; max-width: min(92vw, 1180px);
  display: grid; grid-template-columns: 44px 1fr 44px; align-items: center;
  margin-bottom: 16px; flex-shrink: 0;
}
.lb-compteur {
  font-family: var(--sans); font-size: var(--t-4); font-weight: 600;
  color: rgba(255,246,238,0.50); letter-spacing: 0.08em; text-align: center;
}
.lb-fermer {
  width: 36px; height: 36px; border-radius: 50%; justify-self: end; cursor: pointer;
  background: rgba(255,246,238,0.08); border: 1.5px solid rgba(255,246,238,0.15);
  color: rgba(255,246,238,0.70);
  display: flex; align-items: center; justify-content: center; transition: background 0.18s;
}
.lb-fermer:hover { background: rgba(255,246,238,0.18); color: var(--creme); }

.lb-cadre { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; overflow: hidden; }
.lb-cadre img { max-width: min(92vw, 1180px); max-height: calc(100vh - 150px); object-fit: contain; border-radius: var(--radius-sm); display: block; }
.lb-cadre img.entre         { animation: lbZoom 0.3s cubic-bezier(0.34,1.28,0.64,1); }
.lb-cadre img.glisse-gauche { animation: lbGauche 0.28s cubic-bezier(0.4,0,0.2,1); }
.lb-cadre img.glisse-droite { animation: lbDroite 0.28s cubic-bezier(0.4,0,0.2,1); }
@keyframes lbZoom   { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes lbGauche { from { transform: translateX(48px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes lbDroite { from { transform: translateX(-48px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Le temps qu'une photo arrive, la precedente reste a l'ecran, attenuee, et
   la roue tourne. La visionneuse ne se vide plus entre deux images : c'est
   ce trou qui donnait l'impression d'un clignotement. Les voisines etant
   chargees d'avance, cet etat ne se voit qu'a la toute premiere ouverture. */
.lb-cadre.attente img { opacity: 0.45; transition: opacity 0.2s ease; }
.lb-cadre.attente::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border: 3px solid rgba(255,246,238,0.22);
  border-top-color: var(--creme); border-radius: 50%;
  animation: rotation 0.85s linear infinite;
  pointer-events: none;
}

.lb-fleche {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer; z-index: 2;
  background: rgba(255,246,238,0.10); border: 1.5px solid rgba(255,246,238,0.18);
  color: var(--creme); display: flex; align-items: center; justify-content: center;
  transition: background 0.18s, transform 0.18s;
}
.lb-fleche:hover { background: rgba(212,56,117,0.6); border-color: var(--carrot-texte); transform: translateY(-50%) scale(1.08); }

.lb-fleche.prec { left:  max(8px, calc(50% - 652px)); }
.lb-fleche.suiv { right: max(8px, calc(50% - 652px)); }
.lb-fleche.cachee { opacity: 0; pointer-events: none; }

.lb-miniatures { display: flex; gap: 8px; margin-top: 16px; flex-shrink: 0; max-width: 92vw; overflow-x: auto; padding-bottom: 4px; }
.lb-miniature {
  width: 58px; height: 42px; object-fit: cover; border-radius: var(--radius-xs); cursor: pointer;
  opacity: 0.45; border: 2px solid transparent; flex-shrink: 0;
  transition: opacity 0.18s, border-color 0.18s, transform 0.18s;
}
.lb-miniature:hover { opacity: 0.78; transform: translateY(-2px); }
.lb-miniature.active { opacity: 1; border-color: var(--carrot-texte); }

.page-entete {
  padding: 80px 48px 80px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, var(--c1-soft) 0%, var(--violet-voile) 60%, var(--bg) 100%);
  position: relative; overflow: hidden; z-index: 1;
}
.page-entete::before {
  content: ''; position: absolute; top: -60px; right: -60px;
  width: 400px; height: 400px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 60% 40%, rgba(234,64,110,0.08) 0%, rgba(216,58,168,0.08) 50%, transparent 70%);
}

.page-entete h1 { font-family: var(--sans); font-size: var(--t-f4); font-weight: 800; line-height: 0.98; letter-spacing: -0.04em; color: var(--ink); margin-bottom: 18px; text-wrap: balance; overflow-wrap: break-word; }
.page-entete h1 span { color: var(--carrot-texte); }
.page-entete-texte { font-size: var(--t-8); font-weight: 300; color: var(--ink-mid); line-height: 1.75; max-width: 620px; }

.contact-principal {
  padding: 64px 48px 80px;
  max-width: 720px; margin: 0 auto;
}

.carte-ecrire {
  background: var(--panneau); border: 1px solid var(--filet);
  border-radius: var(--radius); padding: 40px 40px 32px;
  box-shadow: var(--lisere), var(--pose);
}
.ecrire-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: var(--radius); margin-bottom: 20px;
  background: var(--carrot-soft); color: var(--carrot-texte);
}
.ecrire-titre {
  font-family: var(--sans); font-size: var(--t-f2);
  font-weight: 800; letter-spacing: -0.025em;
  color: var(--ink); line-height: 1.08; margin-bottom: 14px;
}
.ecrire-texte {
  font-size: var(--t-6); color: var(--ink-mid); line-height: 1.75; max-width: 46ch;
}

.ecrire-adresse {
  display: inline-block; margin: 28px 0 24px;
  font-family: var(--sans); font-weight: 700; color: var(--carrot-texte);
  font-size: var(--t-f1); letter-spacing: -0.01em;
  text-decoration: none; overflow-wrap: anywhere;
  border-bottom: 2px solid var(--carrot-mid); padding-bottom: 4px;
  transition: border-color 0.18s, color 0.18s;
}
.ecrire-adresse:hover { border-bottom-color: var(--carrot-texte); color: var(--c1); }

.ecrire-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ecrire-note {
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border);
  font-size: var(--t-4); color: var(--ink-light); line-height: 1.6;
}
.ecrire-note.confirme { color: #5FD08A; font-weight: 500; }

/* La page introuvable. Le grand nombre en fond dit tout de suite ce qui se
   passe, le texte explique, et les deux boutons ramènent quelque part plutôt
   que de laisser la personne dans une impasse. */
.page-perdue {
  /* Le titre est écrit pour deux lignes, comme ceux des autres pages. À 720,
     moins les marges, il restait 624 pixels : « Cette page » en demande 643
     et « does not exist. » 815, d'où quatre lignes et un « pas. » orphelin.
     Le paragraphe garde sa propre limite de lecture, plus bas. */
  position: relative; padding: 96px 48px 120px; max-width: 960px;
}
.perdue-code {
  font-family: var(--sans); font-size: var(--t-geant);
  font-weight: 800; line-height: 0.86; letter-spacing: -0.04em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(212,56,117,0.34);
  margin-bottom: 4px; user-select: none;
}
.page-perdue h1 {
  font-family: var(--sans); font-size: var(--t-f4);
  font-weight: 800; line-height: 1.05; color: var(--ink); margin-bottom: 20px;
}
.page-perdue h1 span { color: var(--carrot-texte); }
.page-perdue .page-entete-texte { max-width: 520px; margin-bottom: 32px; }

@media (max-width: 860px) {
  .page-perdue { padding: 64px 24px 80px; }
}

.page-texte { padding: 64px 48px 88px; max-width: 820px; }

/* Chaque bloc est une <section> : il heritait du rembourrage pose sur toutes
   les sections du site, et son texte partait donc d'une seconde marge, 48
   pixels a droite du titre de la page. Il heritait aussi des 80 pixels de
   haut et de bas, ce qui mettait deux cents pixels entre deux blocs. On lui
   rend sa marge et son pas. Le filet qui les separe, lui, vient bien de la
   regle generale des sections : c'est le meme trait que partout ailleurs, il
   reste. */
.bloc-legal { padding: 0 0 36px; }
.bloc-legal + .bloc-legal { margin-top: 36px; }
/* Un bloc qui commence par une phrase avant sa liste : sans cela les deux se
   touchaient. */
.bloc-legal p + .liste-legale { margin-top: 20px; }
.bloc-legal h2 {
  font-family: var(--sans); font-size: var(--t-f1);
  font-weight: 800; letter-spacing: -0.02em;
  color: var(--ink); line-height: 1.12; margin-bottom: 16px;
  padding-bottom: 10px; border-bottom: 1.5px solid var(--border);
}
.bloc-legal h3 {
  font-family: var(--sans); font-size: var(--t-6); font-weight: 700;
  color: var(--ink); margin: 24px 0 10px;
}
.bloc-legal p { font-size: var(--t-6); color: var(--ink-mid); line-height: 1.8; }
.bloc-legal code {
  font-size: var(--t-5); padding: 2px 6px; border-radius: var(--radius-xs);
  background: rgba(255,246,238,0.08); color: var(--ink);
}
.bloc-legal p + p { margin-top: 12px; }
.bloc-legal a { color: var(--carrot-texte); text-decoration: none; border-bottom: 1px solid var(--carrot-mid); }
.bloc-legal a:hover { border-bottom-color: var(--carrot-texte); }

.liste-legale {
  display: grid; grid-template-columns: 210px 1fr;
  gap: 10px 20px; margin-bottom: 16px;
}
.liste-legale dt {
  font-size: var(--t-3); font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-light); padding-top: 2px;
}
.liste-legale dd { font-size: var(--t-6); color: var(--ink); }
.liste-legale dd a { color: var(--carrot-texte); text-decoration: none; }
.liste-legale dd a:hover { text-decoration: underline; }

.note-legale { font-size: var(--t-4); color: var(--ink-light); line-height: 1.7; }

footer {
  flex-shrink: 0;
  background: #1E0817; color: rgba(255,246,238,0.55);
  padding: 40px 48px 32px;
}
.pied-haut { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.pied-logo { display: flex; align-items: center; gap: 10px; }
.pied-logo-marque { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pied-logo-marque img { width: 28px; height: 28px; object-fit: contain; display: block; transform: translateY(-1.5px); }
.pied-logo-nom { font-family: var(--sans); font-size: var(--t-6); font-weight: 700; color: var(--creme); }
.pied-baseline { font-size: var(--t-4); margin-top: 10px; max-width: 340px; line-height: 1.6; }
/* Un nom de lieu ne se coupe pas à son trait d'union : la colonne de 340
   pixels laissait « Saint- » seul en bout de ligne. */
.insecable { white-space: nowrap; }

.pied-droite { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }
.pied-reseaux { display: flex; gap: 8px; }
.pied-reseaux a {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,246,238,0.18);
  color: rgba(255,246,238,0.60); text-decoration: none;
  transition: border-color 0.18s, color 0.18s;
}
.pied-reseaux a:hover { border-color: var(--carrot-texte); color: var(--carrot-texte); }
.pied-liens {
  display: flex; gap: 2px 20px; flex-wrap: wrap;
  align-items: center; justify-content: flex-end;
  margin-right: -8px;
}
/* Ces liens ne faisaient que vingt et un pixels de haut. Le remplissage les
   amène au minimum de vingt-quatre exigé pour une cible tactile, sans rien
   changer à ce qui se voit. */
.pied-liens a {
  font-size: var(--t-4); color: rgba(255,246,238,0.62); text-decoration: none;
  padding: 6px 8px; transition: color 0.15s;
}
/* Le survol passait le texte a --c1-mid, qui est un rose a trente pour cent
   d'opacite : le lien s'effacait au lieu de s'allumer. */
.pied-liens a:hover { color: var(--carrot-texte); }
.pied-bas {
  margin-top: 32px; padding-top: 20px; border-top: 1px solid rgba(255,246,238,0.10);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: var(--t-3); color: rgba(255,246,238,0.50);
}

@media (prefers-reduced-motion: reduce) {
  .fond-modale.ouverte, .fond-modale.sortie, .modale,
  .fond-modale.sortie .modale, .lightbox.ouverte, .lightbox.sortie { animation: none; }
}
.apparait { opacity: 0; transform: translateY(14px); transition: opacity 0.55s ease, transform 0.55s ease; }
.apparait.vu { opacity: 1; transform: none; }
.d1 { transition-delay: 0.07s; }
.d2 { transition-delay: 0.14s; }
.d3 { transition-delay: 0.21s; }
.d4 { transition-delay: 0.28s; }

@media (prefers-reduced-motion: reduce) {
  .apparait { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 1000px) {
  .modale-deux-colonnes { grid-template-columns: 1fr; gap: 24px; }
  .palmares { padding: 20px 16px 16px; }
  .palmares-rangee { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .laurier picture { height: 88px; }
  .laurier img { height: 74px; }
  .laurier-prix img { height: 84px; }
  .grille-projets { grid-template-columns: repeat(2, 1fr); }
  .mosaique { grid-template-columns: repeat(3, 1fr); }
  .bande-chiffres { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .carte-chiffre { padding: 20px 16px; }
}

@media (max-width: 860px) {
  nav { padding: 0 20px; }
  .nav-liens { display: none; }
  /* Quarante-quatre points de cote : c'est la taille sous laquelle un pouce
     rate sa cible une fois sur trois. Le dessin du bouton ne change pas, seule
     sa zone sensible s'elargit. */
  .nav-burger { display: flex; width: 44px; height: 44px; }

  section { padding: 56px 20px; }
  .section-catalogue { padding-top: 32px; }
  .hero { grid-template-columns: 1fr; padding: 56px 20px 56px; gap: 32px; }
  .hero::before { display: none; }

  .presentation { grid-template-columns: 1fr; }
  /* En une colonne, les deux piles s'effacent et les cartes reprennent
     l'ordre de lecture d'origine. Les enveloppes n'ont aucun rôle, les
     retirer de l'affichage ne retire rien aux lecteurs d'écran. */
  .presentation-col { display: contents; }
  .presentation-col:first-child > :first-child { order: 1; }
  .presentation-col:last-child  > :first-child { order: 2; }
  .presentation-col:first-child > :last-child  { order: 3; }
  .presentation-col:last-child  > :last-child  { order: 4; }
  .bloc-texte.pleine-largeur { grid-column: span 1; }
  .bande-chiffres { grid-template-columns: 1fr; }
  .grille-valeurs { grid-template-columns: 1fr; }
  .mosaique { grid-template-columns: repeat(2, 1fr); }
  .mosaique .cadre-image:nth-child(1) { grid-column: span 2; grid-row: span 1; }
  .mosaique .cadre-image:nth-child(1) img { aspect-ratio: 16/9; }

  .famille + .famille { margin-top: 40px; padding-top: 40px; }

  .modale-contenu { padding: 20px; }
  .page-entete { padding: 48px 20px 48px; }
  .page-texte { padding: 40px 20px 64px; }
  .liste-legale { grid-template-columns: 1fr; gap: 4px 0; }
  .liste-legale dd { margin-bottom: 10px; }
  .contact-principal { padding: 48px 20px 64px; }
  .carte-ecrire { padding: 28px 24px 24px; }

  .lb-fleche.prec { left: 4px; }
  .lb-fleche.suiv { right: 4px; }

  footer { padding: 32px 20px 24px; }
  .pied-haut { flex-direction: column; gap: 24px; }
  .pied-droite { align-items: flex-start; }

}

/* Le catalogue passait a une seule colonne des 860 pixels de large. Un
   telephone couche en fait 731 ou 844 : la carte y montait a 607 pixels de
   large et 500 de haut, pour un ecran de 390 de haut - on ne voyait jamais
   une vignette en entier. La bascule n'a de sens que quand deux cartes ne
   tiennent plus cote a cote : a 620 pixels, deux colonnes font encore 280
   chacune, soit la largeur qu'une carte a deja sur un ecran de 1280. */
@media (max-width: 620px) {
  .grille-projets { grid-template-columns: 1fr; }
}

/* La frise ne porte ses libelles qu'a partir de 1280 pixels. En dessous il ne
   restait que trois pastilles muettes flottant contre le bord droit, et en
   paysage elles se posaient en travers des cartes. Elle ne se montre plus que
   la ou elle dit quelque chose. */
/* Sous 1280 pixels la frise perd ses libelles - il n'y a pas la place - mais
   elle garde ses pastilles et leurs icones : c'est ce qui la rend lisible d'un
   coup d'oeil, et un rail nu ne dit pas la meme chose.

   Vingt-quatre pixels de large contre vingt de marge : c'est ce chevauchement
   sur les vignettes qui l'avait fait supprimer. Le catalogue lui reserve donc
   vingt-six pixels a droite - la meme reserve que sur grand ecran, en plus
   petit. Les pastilles occupent du quatrieme au vingt-huitieme pixel depuis le
   bord, le contenu commence au quarante-sixieme : elles ne touchent plus rien. */
@media (max-width: 1279px) {
  .catalogue { padding-right: 26px; }
  .chronologie { right: 4px; }
}

@media (max-width: 600px) {
  nav { padding: 0 16px; height: 58px; }
  .barre-nav-tiroir { top: 58px; }
  .nav-logo-nom { font-size: var(--t-5); }

  .bandeau-appel { padding: 28px 24px; }

  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .bouton,
  .hero-actions .bouton-fantome { justify-content: center; }

  .carte-chiffre {
    display: flex; align-items: center; gap: 16px;
    text-align: left; padding: 16px 16px;
  }
  .chiffre-nombre { font-size: var(--t-11); min-width: 62px; }
  .chiffre-label { margin-top: 0; }

  .ligne-credit { flex-direction: column; gap: 2px; padding: 10px 0; }
  .credit-nom { text-align: left; }

  .lecteur-temps { padding: 0 4px; font-size: var(--t-2); }
  .lecteur-btn { width: 34px; height: 34px; }
  /* Le bouton de qualité porte lui aussi la classe lecteur-btn, la règle
     ci-dessus lui imposait donc une largeur fixe et son texte débordait
     par-dessus le bouton voisin. */
  .lecteur-btn-qualite { width: auto; padding: 0 8px; }
  .lecteur-volume { display: none; }


  /* ---------------------------------------------------------------------
     La fiche sur téléphone
     ---------------------------------------------------------------------
     Les trois blocs encadrés mangeaient 44 pixels de marge sur les 350 que
     laisse un écran de 390, et le palmarès à lui seul demandait mille pixels
     de défilement pour trois récompenses. Tout se resserre. */
  .modale-contenu { padding: 20px 16px 28px; }
  .modale-meta { gap: 8px 16px; }

  .palmares, .diffusions, .anecdotes { padding: 20px 16px 16px; }
  .palmares { margin-top: 24px; }
  .diffusions, .anecdotes { margin-top: 20px; }
  .palmares .mini-titre, .diffusions .mini-titre { margin-bottom: 12px; }

  /* Chaque récompense devient une ligne : le laurier à gauche, le texte à
     droite. Trois cents pixels de haut deviennent quatre-vingts. */
  .palmares-rangee { grid-template-columns: 1fr; gap: 0; }
  .laurier {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    grid-template-areas: "image titre" "image festival";
    align-items: center; column-gap: 16px; row-gap: 4px;
    text-align: left; padding: 12px 2px;
  }
  .laurier + .laurier { border-top: 1px solid var(--border); }
  /* C'est la largeur qui commande ici, pas la hauteur. En imposant une hauteur
     dans une colonne plus étroite que le laurier, la règle max-width du site
     rabotait la largeur sans toucher à la hauteur : les trois lauriers, qui
     n'ont pas la même largeur, s'en trouvaient écrasés. */
  .laurier picture { grid-area: image; display: block; height: auto; width: 100%; }
  .laurier img, .laurier-prix img { width: 100%; height: auto; opacity: 1; }
  .laurier-titre { grid-area: titre; max-width: none; font-size: var(--t-4); }
  .laurier-festival { grid-area: festival; max-width: none; }
  .laurier:hover, .laurier:focus-visible { transform: none; }

  .diffusion-evenement { max-width: none; }
  .anecdote { font-size: var(--t-5); }
}