/* FICHIER GÉNÉRÉ par outils/construire-css.js — ne pas éditer à la main.
   Modifier les modules _*.css du même dossier, puis relancer le script. */

/* ===== Polices auto-hébergées  (_polices.css) ===== */

/* Polices auto-hébergées — Anton, DM Sans, Space Mono (SIL Open Font License 1.1).
   Servies depuis le domaine : aucune adresse IP de visiteur n’est transmise à un tiers,
   et le texte s’affiche sans attendre une connexion vers un serveur externe.
   Les plages Unicode évitent de charger latin-ext quand la page n’en a pas besoin. */
@font-face{font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/anton-400-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:"Anton";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/anton-400-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:"DM Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/dm-400-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:"DM Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/dm-400-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:"Space Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/space-400-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:"Space Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/space-400-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:"Space Mono";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/space-700-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:"Space Mono";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/space-700-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}

/* ===== Jetons, remise à zéro, utilitaires, typographie  (_systeme.css) ===== */

/* ==========================================================================
   Zone Lumière — feuille de styles unique.

   Aucun attribut style= n'est utilisé dans le HTML : l'en-tête de sécurité
   déclare style-src 'self' sans 'unsafe-inline', ce qui ferait disparaître
   silencieusement tout style en ligne une fois le site en production.
   Les variantes de couleur passent donc par des classes .a--*.
   ========================================================================== */

/* --- Jetons ------------------------------------------------------------- */

:root {
  /* Fonds. Le violet nuit est la couleur mère du site. */
  --nuit:      #16002E;
  --nuit-2:    #1E0A3C;
  --nuit-3:    #3B1173;
  --noir:      #0A0A0A;
  --creme:     #F4EFE2;
  --magenta-profond: #7A0050;

  /* Accents. Mesurés sur --nuit : cyan 12,8:1 · rose 6,5:1 · jaune 14,6:1. */
  --cyan:      #00E5FF;
  /* Le rose est la couleur d’action du site. C’est lui qui porte les boutons,
     les pastilles et la seconde ligne des titres — pas le cyan, qui ne sert
     qu’aux surtitres et aux survols. */
  --rose:      #FF3DDB;
  --magenta:   var(--rose);   /* ancien nom, conservé pour les classes .a--magenta */
  --jaune:     #FFDD00;
  --rouge:     #FF1E00;

  /* Textes. --sourdine tient 7,5:1 sur --nuit : atténué sans devenir illisible. */
  --texte:     #F4EFE2;
  --sourdine:  #A79ABF;
  --sur-accent: #16002E;

  --accent:    var(--cyan);

  /* Familles. Anton n'a qu'une graisse : ne jamais lui demander de gras,
     le navigateur le simulerait en épaississant les contours. */
  --display: "Anton", "Arial Narrow", "Haettenschweiler", Impact, sans-serif;
  --corps:   "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:    "Space Mono", ui-monospace, "SFMono-Regular", "Courier New", monospace;

  /* Échelle fluide. La maquette est bâtie en unités de conteneur ; elle est
     transposée ici en vw, qui est l'équivalent responsive à l'échelle page. */
  --t-geant:     clamp(3.25rem, 12.5vw, 10.5rem);
  --t-titre:     clamp(2.4rem, 7.5vw, 6rem);
  --t-sous:      clamp(1.7rem, 4.2vw, 3.1rem);
  --t-carte:     clamp(1.35rem, 2.6vw, 2.05rem);
  --t-lead:      clamp(1.05rem, 1.7vw, 1.4rem);
  --t-corps:     clamp(1rem, 1.05vw, 1.09rem);
  --t-petit:     0.9rem;
  --t-etiquette: clamp(0.66rem, 0.86vw, 0.78rem);

  /* Rythme */
  --gouttiere: clamp(1.15rem, 4vw, 4rem);
  --section:   clamp(4rem, 9vw, 8.5rem);
  --large:     1440px;
  --lisible:   62ch;

  --rayon:      14px;
  --rayon-doux: 22px;
  --pastille:   999px;

  --bordure: 1px solid rgba(244, 239, 226, 0.16);
  --transition: 0.32s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* --- Remise à zéro ------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--nuit);
  color: var(--texte);
  font-family: var(--corps);
  font-size: var(--t-corps);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
}

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

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--magenta); color: var(--nuit); }

/* Repère de focus visible partout. Le décalage l'empêche de se confondre
   avec la bordure de l'élément qu'il entoure. */
:focus-visible {
  outline: 3px solid var(--jaune);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Utilitaires --------------------------------------------------------- */

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

.saut {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -140%);
  z-index: 200;
  padding: 0.85rem 1.5rem;
  background: var(--jaune);
  color: var(--nuit);
  font-family: var(--mono);
  font-size: var(--t-petit);
  border-radius: 0 0 var(--rayon) var(--rayon);
  transition: transform var(--transition);
}
.saut:focus { transform: translate(-50%, 0); }

.enveloppe {
  width: 100%;
  max-width: var(--large);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.section { padding-block: var(--section); }
.section--serree { padding-block: calc(var(--section) * 0.6); }

/* Classes d'accent. Chaque bloc coloré porte l'une d'elles ; le violet nuit
   sert alors de couleur de texte, ce qui garde le contraste au-dessus de 6:1. */
.a--cyan    { --accent: var(--cyan); }
.a--magenta { --accent: var(--magenta); }
.a--jaune   { --accent: var(--jaune); }
.a--rouge   { --accent: var(--rouge); }

/* --- Typographie --------------------------------------------------------- */

.titre-geant,
.titre,
.titre-sous {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

.titre-geant { font-size: var(--t-geant); line-height: 0.84; }
.titre       { font-size: var(--t-titre); line-height: 0.88; }
.titre-sous  { font-size: var(--t-sous);  line-height: 0.95; }

.etiquette {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.etiquette::before {
  content: "";
  width: 0.5em; height: 0.5em;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.5;
  max-width: var(--lisible);
  color: var(--texte);
}

.texte { max-width: var(--lisible); color: var(--sourdine); }
.texte + .texte { margin-top: 1em; }

.numero {
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  letter-spacing: 0.1em;
  color: var(--accent);
}

/* --- Repère de contenu manquant -----------------------------------------
   Volontairement voyant : il doit sauter aux yeux à la relecture, et il ne
   doit plus en rester un seul le jour de la mise en ligne. */

.repere {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.12em 0.6em;
  border: 1px dashed var(--jaune);
  border-radius: var(--pastille);
  background: rgba(255, 221, 0, 0.09);
  color: var(--jaune);
  font-family: var(--mono);
  font-size: 0.78em;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  vertical-align: baseline;
}
.repere__point {
  width: 0.42em; height: 0.42em;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.bandeau-exemple {
  padding: 0.7rem var(--gouttiere);
  background: var(--jaune);
  color: var(--nuit);
  font-size: var(--t-petit);
  line-height: 1.45;
  text-align: center;
}
.bandeau-exemple strong { font-weight: 700; }

.image-absente {
  display: grid;
  place-items: center;
  min-height: 180px;
  padding: 1.5rem;
  border: 1px dashed rgba(255, 221, 0, 0.5);
  border-radius: var(--rayon);
  background: rgba(255, 221, 0, 0.05);
}

/* --- En-tête ------------------------------------------------------------- */

.entete {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(22, 0, 46, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: var(--bordure);
}

.entete__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  max-width: var(--large);
  margin-inline: auto;
  padding: 0.85rem var(--gouttiere);
}

.marque {
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.1vw, 1.7rem);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
  padding-block: 0.3rem;
}
.marque__zone    { color: var(--creme); }
.marque__lumiere { color: var(--cyan); margin-left: 0.18em; }
.marque:hover .marque__lumiere { color: var(--jaune); }

.menu__liste {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 1.9vw, 2.1rem);
}

.menu__lien {
  position: relative;
  display: block;
  padding-block: 0.4rem;
  font-size: var(--t-petit);
  font-weight: 500;
  color: var(--texte);
  transition: color var(--transition);
}
.menu__lien::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.menu__lien:hover { color: var(--jaune); }
.menu__lien:hover::after,
.menu__lien--actif::after { transform: scaleX(1); }
.menu__lien--actif { color: var(--cyan); }

/* Le dernier lien — « Nous rejoindre » — est l'action principale du site. */
.menu__element:last-child .menu__lien {
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--cyan);
  border-radius: var(--pastille);
  color: var(--cyan);
}
.menu__element:last-child .menu__lien::after { display: none; }
.menu__element:last-child .menu__lien:hover {
  background: var(--cyan);
  color: var(--sur-accent);
}

.bascule { display: none; }

/* Sans JavaScript, le menu reste ouvert et utilisable : la version repliée
   n'est activée que si le script a pu poser la classe .js sur <html>. */
@media (max-width: 860px) {
  .js .bascule {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1rem;
    background: none;
    border: 1px solid rgba(244, 239, 226, 0.3);
    border-radius: var(--pastille);
    font-family: var(--mono);
    font-size: var(--t-etiquette);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .bascule__trait {
    position: relative;
    width: 16px; height: 2px;
    background: var(--cyan);
    transition: background var(--transition);
  }
  .bascule__trait::before,
  .bascule__trait::after {
    content: "";
    position: absolute;
    left: 0;
    width: 16px; height: 2px;
    background: var(--cyan);
    transition: transform var(--transition);
  }
  .bascule__trait::before { top: -5px; }
  .bascule__trait::after  { top: 5px; }

  .bascule[aria-expanded="true"] .bascule__trait { background: transparent; }
  .bascule[aria-expanded="true"] .bascule__trait::before { transform: translateY(5px) rotate(45deg); }
  .bascule[aria-expanded="true"] .bascule__trait::after  { transform: translateY(-5px) rotate(-45deg); }

  .js .menu {
    position: absolute;
    top: 100%; left: 0; right: 0;
    display: none;
    padding: 1rem var(--gouttiere) 1.6rem;
    background: var(--nuit-2);
    border-bottom: var(--bordure);
  }
  .js .menu--ouvert { display: block; }

  .menu__liste {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .menu__lien {
    padding-block: 0.95rem;
    font-size: 1.05rem;
    border-bottom: var(--bordure);
  }
  .menu__lien::after { display: none; }
  .menu__element:last-child .menu__lien {
    margin-top: 1rem;
    text-align: center;
    border-bottom: 1px solid var(--cyan);
  }
}

/* --- Boutons ------------------------------------------------------------- */

.bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.95em 1.7em;
  border: 1px solid transparent;
  border-radius: var(--pastille);
  font-family: var(--corps);
  font-size: var(--t-petit);
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform var(--transition), background var(--transition), color var(--transition);
}
.bouton:hover { transform: translateY(-2px); }

.bouton--plein {
  background: var(--accent);
  color: var(--sur-accent);
}
.bouton--plein:hover { background: var(--jaune); color: var(--sur-accent); }

.bouton--vide {
  border-color: rgba(244, 239, 226, 0.35);
  color: var(--texte);
}
.bouton--vide:hover { border-color: var(--jaune); color: var(--jaune); }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
}

/* --- Défilé (bandeau animé) ---------------------------------------------
   Le texte est présent une fois pour les lecteurs d'écran ; la seconde copie,
   masquée à l'assistance, ne sert qu'à fermer la boucle sans saut visible. */

.defile {
  overflow: hidden;
  padding-block: clamp(0.8rem, 1.6vw, 1.4rem);
  background: var(--accent);
  color: var(--sur-accent);
  border-block: 1px solid rgba(22, 0, 46, 0.25);
}

.defile__piste {
  display: flex;
  width: max-content;
  animation: defile 34s linear infinite;
}
.defile--inverse .defile__piste { animation-direction: reverse; }

.defile__texte {
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.5vw, 2rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  white-space: nowrap;
  padding-right: 1.5rem;
}

@keyframes defile { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .defile__piste { animation: none; }
  .defile { overflow-x: auto; }
}

/* --- Grilles ------------------------------------------------------------- */

.grille {
  display: grid;
  gap: clamp(1rem, 2vw, 1.6rem);
}
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.grille--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.grille--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.entete-section {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.entete-section__texte { max-width: 46ch; }
.entete-section .etiquette { margin-bottom: 1rem; }
.entete-section .titre + .texte { margin-top: 1.1rem; }

/* ===== Composants de page  (_composants.css) ===== */

/* --- En-tête : la pilule vitrée -------------------------------------------
   La maquette ne pose pas une barre pleine largeur mais une pilule flottante,
   détachée des bords, qui laisse voir la page défiler derrière elle.
   -------------------------------------------------------------------------- */

.entete {
  position: sticky;
  top: 0;
  z-index: 80;
  padding: clamp(0.55rem, 1vw, 1rem) var(--gouttiere);
}

.entete__barre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  width: 100%;
  max-width: var(--large);
  margin-inline: auto;
  padding: clamp(0.5rem, 0.8vw, 0.75rem) clamp(0.9rem, 1.6vw, 1.5rem);
  border: var(--verre-bord);
  border-radius: var(--pastille);
  background: rgba(22, 0, 46, 0.6);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--verre-ombre);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .entete__barre { background: rgba(22, 0, 46, 0.94); }
}

.marque {
  font-family: var(--display);
  font-size: clamp(1.06rem, 1.7vw, 1.62rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  padding-block: 0.3rem;
}
.marque__zone    { color: var(--jaune); }
.marque__lumiere { color: var(--rose); margin-left: 0.22em; }
.marque:hover .marque__zone    { color: var(--cyan); }
.marque:hover .marque__lumiere { color: var(--jaune); }

.menu__liste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.5rem, 1.1vw, 1.15rem);
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.menu__lien {
  display: block;
  padding: 0.4rem 0.15rem;
  color: var(--texte);
  transition: color var(--transition);
}
.menu__lien:hover      { color: var(--cyan); }
.menu__lien--actif     { color: var(--jaune); }

/* Le dernier lien — « Nous rejoindre » — est l'action principale du site.
   Il est rose plein, et bascule au cyan au survol. */
.menu__element:last-child .menu__lien {
  padding: 0.58rem 1.05rem;
  border-radius: var(--pastille);
  background: var(--rose);
  color: var(--sur-accent);
  font-weight: 700;
}
.menu__element:last-child .menu__lien:hover {
  background: var(--cyan);
  color: var(--sur-accent);
}

.bascule { display: none; }

/* Sans JavaScript, le menu reste ouvert et utilisable : la version repliée
   n'est activée que si le script a pu poser la classe .js sur <html>. */
@media (max-width: 980px) {
  .js .bascule {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.95rem;
    background: none;
    border: 1px solid rgba(244, 239, 226, 0.34);
    border-radius: var(--pastille);
    font-family: var(--mono);
    font-size: var(--t-etiquette);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--texte);
    cursor: pointer;
  }
  .bascule__trait {
    position: relative;
    width: 16px; height: 2px;
    background: var(--rose);
    transition: background var(--transition);
  }
  .bascule__trait::before,
  .bascule__trait::after {
    content: "";
    position: absolute;
    left: 0;
    width: 16px; height: 2px;
    background: var(--rose);
    transition: transform var(--transition);
  }
  .bascule__trait::before { top: -5px; }
  .bascule__trait::after  { top: 5px; }
  .bascule[aria-expanded="true"] .bascule__trait { background: transparent; }
  .bascule[aria-expanded="true"] .bascule__trait::before { transform: translateY(5px) rotate(45deg); }
  .bascule[aria-expanded="true"] .bascule__trait::after  { transform: translateY(-5px) rotate(-45deg); }

  .js .menu {
    flex-basis: 100%;
    display: none;
    padding-top: 0.7rem;
    margin-top: 0.3rem;
    border-top: 1px solid rgba(244, 239, 226, 0.16);
  }
  .js .menu--ouvert { display: block; }

  .menu__liste { flex-direction: column; align-items: stretch; gap: 0; }
  .menu__lien  { padding-block: 0.85rem; font-size: 0.95rem; }
  .menu__element:last-child .menu__lien {
    margin-top: 0.7rem;
    text-align: center;
  }
}

/* --- Boutons ---------------------------------------------------------------
   Le bouton plein est ROSE, pas cyan. Le cyan est réservé au survol : c'est
   ce qui donne au design son basculement de couleur au passage de la souris.
   -------------------------------------------------------------------------- */

.bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.85em 1.6em;
  border: 1px solid transparent;
  border-radius: var(--pastille);
  font-family: var(--display);
  font-size: clamp(0.9rem, 1.3vw, 1.3rem);
  font-weight: 400;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition: transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
}
.bouton:hover { transform: translateY(-2px); }

.bouton--plein {
  background: var(--rose);
  color: var(--sur-accent);
}
.bouton--plein:hover { background: var(--cyan); color: var(--sur-accent); }

/* Le bouton secondaire est vitré, pas simplement bordé. */
.bouton--vide {
  border-color: rgba(244, 239, 226, 0.34);
  background: rgba(244, 239, 226, 0.07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--texte);
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  letter-spacing: 0.06em;
  padding: 0.95em 1.5em;
}
.bouton--vide:hover {
  background: rgba(244, 239, 226, 0.18);
  border-color: var(--cyan);
  color: var(--texte);
}

/* Sur un bloc déjà coloré, le rose disparaîtrait : on inverse en encre. */
.bloc-plein .bouton--plein { background: var(--nuit); color: var(--creme); }
.bloc-plein .bouton--plein:hover { background: var(--noir); color: var(--jaune); }
.bloc-plein .bouton--vide {
  border-color: rgba(22, 0, 46, 0.4);
  background: rgba(22, 0, 46, 0.08);
  color: var(--sur-accent);
}
.bloc-plein .bouton--vide:hover { border-color: var(--nuit); background: rgba(22, 0, 46, 0.16); }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.6rem, 1.4vw, 1.25rem);
  align-items: center;
}

/* Un formulaire qui n'existe que pour porter un bouton — la déconnexion, qui
   doit passer en POST avec jeton. Sans cette règle il introduirait une marge et
   une hauteur de bloc, et le bouton ne s'alignerait plus sur ses voisins. */
.ligne-bouton {
  display: inline-flex;
  margin: 0;
}

/* --- Héros -----------------------------------------------------------------
   Plein cadre, image en duotone, voile sombre par-dessus pour que le titre
   reste lisible quelle que soit la photo.
   -------------------------------------------------------------------------- */

.heros {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  min-height: clamp(30rem, 74vh, 46rem);
  padding-block: clamp(3.5rem, 7vw, 8rem) clamp(1.6rem, 3.4vw, 3.75rem);
}
.heros--page { min-height: clamp(22rem, 52vh, 34rem); }

.heros__fond {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.heros__fond img,
.heros__fond picture { width: 100%; height: 100%; }

/* Le voile : sombre en haut pour la barre de menu, presque opaque en bas
   pour que le texte accroche, transparent au milieu pour laisser voir l'image. */
.heros__voile {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(22, 0, 46, 0.72) 0%,
    rgba(22, 0, 46, 0.34) 34%,
    rgba(22, 0, 46, 0.97) 100%);
}

.heros__corps {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--large);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.heros .titre-geant { color: var(--jaune); }
.heros .pastille    { margin-bottom: clamp(0.9rem, 2vw, 1.6rem); }
.heros .lead        { margin-block: clamp(1rem, 2vw, 1.9rem); max-width: 46ch; }

.heros__scroll {
  position: absolute;
  right: var(--gouttiere);
  bottom: clamp(1.6rem, 3.4vw, 3.75rem);
  z-index: 4;
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.65;
}

/* Les autocollants pivotés, posés sur l'image du héros. */
.heros__collant {
  position: absolute;
  z-index: 20;
  top: 19%; right: 6%;
}
.heros__collant--bas { top: auto; bottom: 22%; right: 22%; }

@media (max-width: 760px) {
  .heros__collant { position: static; display: inline-block; margin-top: 1.2rem; }
  .heros__collant--bas { display: none; }
}

.chiffres {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.5rem, 1.2vw, 0.9rem);
  margin-top: clamp(1.2rem, 2.6vw, 2.1rem);
}
.chiffre {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.5rem 0.95rem;
  border: var(--verre-bord);
  border-radius: var(--pastille);
  background: rgba(244, 239, 226, 0.06);
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte-carte);
}
.chiffre strong { color: var(--jaune); font-weight: 700; }

/* --- Bandeau défilant ------------------------------------------------------
   Fond dégradé du cyan pâle au violet, texte en Anton encre. Le texte est
   présent une fois pour les lecteurs d'écran ; la copie masquée ne sert qu'à
   fermer la boucle sans saut visible.
   -------------------------------------------------------------------------- */

.defile {
  position: relative;
  z-index: 3;
  overflow: hidden;
  padding-block: clamp(0.45rem, 0.7vw, 0.75rem);
  background: var(--bandeau);
  color: var(--nuit);
}

.defile__piste {
  display: flex;
  width: max-content;
  animation: defile 34s linear infinite;
}
.defile--inverse .defile__piste { animation-direction: reverse; }

.defile__texte {
  font-family: var(--display);
  font-size: clamp(1rem, 2vw, 2.1rem);
  text-transform: uppercase;
  letter-spacing: 0.005em;
  white-space: nowrap;
  padding-right: 1.2rem;
}

@keyframes defile { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .defile__piste { animation: none; }
  .defile { overflow-x: auto; }
}

/* --- Grilles ---------------------------------------------------------------- */

.grille { display: grid; gap: clamp(0.85rem, 1.8vw, 1.85rem); }
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.grille--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grille--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.grille--papier { gap: clamp(1.25rem, 2.4vw, 2.75rem); }

.entete-section {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 0.9rem 1.5rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.75rem);
}
.entete-section__texte { max-width: 24ch; }
.entete-section .pastille { margin-bottom: 0.9rem; }
.entete-section__note {
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cyan);
  max-width: 42ch;
}

/* --- Cartes de zone : vitrées, image duotone, badge rose ------------------- */

.zone-carte {
  display: flex;
  flex-direction: column;
  padding: 10px;
  border: var(--verre-bord);
  border-radius: 20px;
  background: var(--verre-fond);
  backdrop-filter: var(--verre-flou);
  -webkit-backdrop-filter: var(--verre-flou);
  transition: border-color var(--transition), transform var(--transition);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .zone-carte { background: rgba(30, 10, 60, 0.72); }
}
.zone-carte:hover { transform: translateY(-4px); border-color: var(--rose); }

.zone-carte__vignette { position: relative; border-radius: 13px; }
.zone-carte__num {
  position: absolute;
  top: 9px; left: 9px;
  z-index: 2;
  padding: 0.1em 0.55em;
  border-radius: var(--pastille);
  background: var(--rose);
  color: var(--sur-accent);
  font-family: var(--display);
  font-size: clamp(0.94rem, 1.5vw, 1.5rem);
  line-height: 1.25;
}
.zone-carte__nom {
  margin: 0.7rem 0.25rem 0.35rem;
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.3vw, 2.5rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--jaune);
}
.zone-carte__texte {
  margin: 0 0.25rem 0.4rem;
  font-size: clamp(0.82rem, 1.02vw, 1rem);
  line-height: 1.5;
  color: var(--texte-carte);
}

/* --- Cartes de spectacle ---------------------------------------------------- */

.spectacle-carte {
  display: flex;
  flex-direction: column;
  padding: 10px;
  border: var(--verre-bord);
  border-radius: 20px;
  background: var(--verre-fond);
  backdrop-filter: var(--verre-flou);
  -webkit-backdrop-filter: var(--verre-flou);
  transition: transform var(--transition), border-color var(--transition);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .spectacle-carte { background: rgba(30, 10, 60, 0.72); }
}
.spectacle-carte:hover { transform: translateY(-4px); border-color: var(--rose); }

.spectacle-carte__vignette { position: relative; border-radius: 13px; }
.spectacle-carte__fanion {
  position: absolute;
  top: 9px; left: 9px;
  z-index: 2;
  padding: 0.28rem 0.7rem;
  border-radius: var(--pastille);
  background: var(--rose);
  color: var(--sur-accent);
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.spectacle-carte__corps {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.7rem 0.25rem 0.4rem;
  flex: 1;
}
.spectacle-carte__annee {
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  letter-spacing: 0.1em;
  color: var(--cyan);
}
.spectacle-carte__titre {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.1vw, 2.1rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--jaune);
}
.spectacle-carte__resume {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--texte-carte);
}
.spectacle-carte__lire {
  margin-top: auto;
  padding-top: 0.55rem;
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rose);
}
.spectacle-carte:hover .spectacle-carte__lire { color: var(--cyan); }

/* --- Lignes de date --------------------------------------------------------- */

.date-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.6rem, 1.4vw, 1.6rem);
  padding: clamp(0.75rem, 1.4vw, 1.35rem);
  border: 1px solid rgba(244, 239, 226, 0.16);
  border-radius: 16px;
  background: rgba(8, 0, 20, 0.5);
}
.date-ligne + .date-ligne { margin-top: clamp(0.5rem, 1vw, 0.85rem); }

.date-ligne__jour {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 3.25rem);
  line-height: 1;
  color: var(--cyan);
  flex: none;
}
.date-ligne__bloc { flex: 1 1 12rem; }
.date-ligne__quand {
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.7vw, 1.75rem);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -0.015em;
}
.date-ligne__ou {
  font-family: var(--mono);
  font-size: clamp(0.7rem, 0.88vw, 0.82rem);
  opacity: 0.7;
}
.date-ligne .bouton { margin-left: auto; }

.attente {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px dashed rgba(244, 239, 226, 0.28);
  border-radius: 16px;
  background: rgba(8, 0, 20, 0.4);
  text-align: center;
  color: var(--texte-carte);
}
.attente__titre {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.2vw, 2rem);
  text-transform: uppercase;
  color: var(--jaune);
  margin-bottom: 0.5rem;
}

/* --- Frise ------------------------------------------------------------------ */

.frise { position: relative; padding-left: clamp(1.5rem, 3vw, 2.6rem); }
.frise::before {
  content: "";
  position: absolute;
  left: 0; top: 0.5rem; bottom: 0.5rem;
  width: 2px;
  background: linear-gradient(to bottom, var(--rose), var(--violet), var(--cyan));
  opacity: 0.65;
}
.frise__etape { position: relative; padding-block: clamp(1rem, 2.2vw, 1.75rem); }
.frise__etape::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(1.5rem, 3vw, 2.6rem) - 5px);
  top: calc(clamp(1rem, 2.2vw, 1.75rem) + 0.55em);
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--accent, var(--rose));
  box-shadow: 0 0 0 4px var(--nuit);
}
.frise__annee {
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--cyan);
}
.frise__titre {
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.3vw, 2.2rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin-block: 0.3rem 0.45rem;
  color: var(--jaune);
}
.frise__titre a:hover { color: var(--rose); }
.frise__texte { color: var(--texte-carte); font-size: 0.9rem; max-width: 58ch; }

/* --- Questions fréquentes ---------------------------------------------------- */

.faq__item { border-bottom: 1px solid rgba(244, 239, 226, 0.16); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: clamp(0.9rem, 2vw, 1.35rem);
  font-family: var(--display);
  font-size: clamp(1rem, 1.8vw, 1.5rem);
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 1.08;
  color: var(--jaune);
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--rose); }
.faq__q::after {
  content: "+";
  flex: none;
  font-family: var(--mono);
  font-size: 1.4rem;
  color: var(--cyan);
  transition: transform var(--transition);
}
.faq__item[open] .faq__q::after { transform: rotate(45deg); }
.faq__r { padding-bottom: clamp(0.9rem, 2vw, 1.35rem); color: var(--texte-carte); max-width: 68ch; }

/* --- Formulaire --------------------------------------------------------------- */

.formulaire { display: grid; gap: clamp(1rem, 2vw, 1.5rem); max-width: 44rem; }

.champ { display: grid; gap: 0.4rem; }
.champ__label {
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
}
.champ__label .obligatoire { color: var(--rose); }

.champ input,
.champ textarea,
.champ select {
  width: 100%;
  padding: 0.8rem 1rem;
  background: rgba(8, 0, 20, 0.5);
  border: 1px solid rgba(244, 239, 226, 0.24);
  border-radius: 13px;
  color: var(--texte);
  transition: border-color var(--transition);
}
.champ input:hover,
.champ textarea:hover { border-color: rgba(244, 239, 226, 0.44); }
.champ input:focus,
.champ textarea:focus { border-color: var(--cyan); }
.champ textarea { min-height: 8rem; resize: vertical; }
.champ__aide { font-size: 0.8rem; color: var(--texte-carte); }

.champ--erreur input,
.champ--erreur textarea { border-color: var(--rouge); }
.champ__erreur {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--rouge);
  font-weight: 700;
}

.cases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 0.55rem;
  border: 0;
  padding: 0;
  margin: 0;
}
.cases__legende {
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
  padding: 0;
  margin-bottom: 0.7rem;
}

.case {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.8rem 0.95rem;
  border: 1px solid rgba(244, 239, 226, 0.24);
  border-radius: 13px;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.case:hover { border-color: var(--rose); }
.case input { width: 1.05rem; height: 1.05rem; margin-top: 0.2rem; accent-color: var(--rose); flex: none; }
.case:has(input:checked) { border-color: var(--rose); background: rgba(255, 61, 219, 0.12); }
.case__nom { font-weight: 700; }
.case__num { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; color: var(--rose); }

/* Piège à robots : rempli uniquement par un automate, jamais par un humain. */
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.message {
  display: flex;
  gap: 0.9rem;
  padding: clamp(0.9rem, 2vw, 1.35rem);
  border-radius: 16px;
  border: 1px solid var(--cyan);
  background: rgba(0, 229, 255, 0.09);
}
.message--souci { border-color: var(--rouge); background: rgba(255, 30, 0, 0.1); }
.message__titre { font-family: var(--display); font-size: 1.2rem; text-transform: uppercase; color: var(--jaune); margin-bottom: 0.2rem; }

/* --- Paliers de soutien ------------------------------------------------------- */

.palier {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: clamp(1.25rem, 2.4vw, 2rem);
  border: var(--verre-bord);
  border-radius: 20px;
  background: var(--verre-fond);
  backdrop-filter: var(--verre-flou);
  -webkit-backdrop-filter: var(--verre-flou);
  transition: transform var(--transition), border-color var(--transition);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .palier { background: rgba(30, 10, 60, 0.72); }
}
.palier:hover { transform: translateY(-4px); border-color: var(--rose); }
.palier__montant {
  font-family: var(--display);
  font-size: clamp(2.2rem, 5vw, 3.75rem);
  line-height: 0.9;
  color: var(--jaune);
}
.palier__montant span { font-family: var(--mono); font-size: 0.28em; letter-spacing: 0.1em; color: var(--rose); }
.palier__texte { color: var(--texte-carte); font-size: 0.9rem; }

.coordonnees {
  display: grid;
  gap: 0.85rem 2rem;
  padding: clamp(1.25rem, 2.6vw, 2.1rem);
  border: var(--verre-bord);
  border-radius: 20px;
  background: rgba(8, 0, 20, 0.5);
}
@media (min-width: 700px) { .coordonnees { grid-template-columns: auto 1fr; } }
.coordonnees dt {
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
}
.coordonnees dd { margin: 0; font-size: var(--t-lead); }

/* --- Blocs pleine couleur ------------------------------------------------------ */

.bloc-plein {
  position: relative;
  z-index: 3;
  background: var(--accent);
  color: var(--sur-accent);
}
.bloc-plein .texte,
.bloc-plein .lead { color: var(--sur-accent); }
.bloc-plein .pastille { background: var(--nuit); color: var(--creme); }
.bloc-plein .repere { border-color: var(--nuit); background: rgba(22, 0, 46, 0.12); color: var(--nuit); }

/* --- Appel final ---------------------------------------------------------------- */

.appel .lead { margin-block: clamp(1rem, 2vw, 1.85rem) clamp(1.25rem, 2.4vw, 2rem); }
.appel__note {
  margin-top: 1.1rem;
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.85;
}

/* --- Pied ------------------------------------------------------------------------ */

.pied {
  position: relative;
  z-index: 3;
  border-top: 1px solid rgba(244, 239, 226, 0.16);
  background: var(--noir);
  padding-inline: var(--gouttiere);
}
.pied__haut {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  max-width: var(--large);
  margin-inline: auto;
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.pied__bloc--marque { grid-column: 1 / -1; }
@media (min-width: 900px) { .pied__bloc--marque { grid-column: auto; } }

.pied__marque {
  font-family: var(--display);
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1;
}
.pied__baseline { margin-top: 0.6rem; color: var(--texte-carte); font-size: 0.9rem; }
.pied__depuis { margin-top: 0.85rem; color: var(--texte-carte); font-size: 0.82rem; max-width: 34ch; }

.pied__titre {
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 1rem;
}
.pied__liste { display: grid; gap: 0.35rem; font-size: 0.9rem; }
.pied__liste a {
  display: inline-block;
  padding-block: 0.28rem;
  color: var(--texte-carte);
  transition: color var(--transition);
}
.pied__liste a:hover { color: var(--jaune); }
.pied__adresse { font-style: normal; color: var(--texte-carte); line-height: 1.6; }
.pied__vide, .pied__repet { font-size: 0.9rem; color: var(--texte-carte); }
.pied__repet { margin-top: 1.15rem; line-height: 1.6; }

.pied__bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--large);
  margin-inline: auto;
  padding-block: 1.4rem;
  border-top: 1px solid rgba(244, 239, 226, 0.16);
  font-size: 0.82rem;
  color: var(--texte-carte);
}
.pied__legal { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }
.pied__legal a { display: inline-block; padding-block: 0.28rem; }
.pied__legal a:hover { color: var(--jaune); }
.pied__note { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; }

/* --- Apparition au défilement ----------------------------------------------------
   Sans JavaScript ou en mouvement réduit, le contenu est visible d'emblée :
   l'animation n'est jamais une condition d'accès à l'information.
   --------------------------------------------------------------------------------- */

.js .reveler {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.js .reveler--vu,
.secours .reveler { opacity: 1; transform: none; }

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

/* --- Contenu rédactionnel (pages légales) ----------------------------------------- */

.prose { max-width: 70ch; }
.prose h2 {
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.3vw, 2.1rem);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-top: clamp(2rem, 4vw, 3rem);
  margin-bottom: 0.75rem;
  color: var(--jaune);
}
.prose h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-top: 1.5rem;
  margin-bottom: 0.35rem;
  color: var(--cyan);
}
.prose p, .prose li { color: var(--texte-carte); }
.prose p + p { margin-top: 0.85rem; }
.prose ul { margin-top: 0.7rem; display: grid; gap: 0.4rem; }
.prose li { padding-left: 1.2rem; position: relative; }
.prose li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--rose);
}
.prose a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--jaune); }
.prose dl { display: grid; gap: 0.5rem; margin-top: 0.8rem; }
.prose dt { font-weight: 700; color: var(--texte); }
.prose dd { margin: 0; color: var(--texte-carte); }

/* --- Journal d'administration ------------------------------------------------
   Un tableau dense, fait pour être balayé du regard plutôt que lu. L'état est
   porté par une pastille en plus du libellé : la couleur seule ne suffit pas.
   -------------------------------------------------------------------------- */

.admin__filtres { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.25rem; }
.jeton-filtre {
  padding: 0.3rem 0.7rem;
  border: 1px solid rgba(244, 239, 226, 0.24);
  border-radius: var(--pastille);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte-carte);
  transition: border-color var(--transition), color var(--transition);
}
.jeton-filtre:hover { border-color: var(--cyan); color: var(--cyan); }
.jeton-filtre--actif { background: var(--rose); border-color: var(--rose); color: var(--sur-accent); }

/* Le tableau déborde sur petit écran : il défile dans son propre cadre, jamais
   la page entière. */
.tableau-cadre { overflow-x: auto; border: var(--verre-bord); border-radius: 16px; background: rgba(8, 0, 20, 0.4); }
.tableau { width: 100%; border-collapse: collapse; font-size: 0.85rem; min-width: 44rem; }
.tableau th {
  text-align: left;
  padding: 0.7rem 0.9rem;
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
  border-bottom: 1px solid rgba(244, 239, 226, 0.16);
  white-space: nowrap;
}
.tableau td { padding: 0.6rem 0.9rem; border-bottom: 1px solid rgba(244, 239, 226, 0.07); vertical-align: top; }
.tableau tr:last-child td { border-bottom: 0; }
.tableau__quand { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tableau__heure { color: var(--texte-carte); }
.tableau__mono { font-family: var(--mono); font-size: 0.76rem; color: var(--texte-carte); word-break: break-all; }
.tableau__detail { color: var(--texte-carte); }

.point { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 0.45rem; vertical-align: middle; }
.point--bien      { background: #00E5A0; }
.point--alerte    { background: var(--rouge); }
.point--attention { background: var(--jaune); }
.point--neutre    { background: var(--sourdine); }

.admin__note { margin-top: 1rem; font-size: 0.82rem; color: var(--texte-carte); max-width: 68ch; }

/* Le retour vers la page dont on édite une liste. Cible de 24 px de haut
   pour rester conforme au critère 2.5.8, comme les liens du pied de page. */
.admin__fil { margin-bottom: 0.75rem; font-size: 0.82rem; }
.admin__fil a { display: inline-block; padding-block: 0.35rem; color: var(--rose); text-decoration: none; }
.admin__fil a:hover { text-decoration: underline; }

/* --- Édition du contenu (Pages Site Web) --------------------------------------
   Une fiche par entrée : le contour et la légende séparent visuellement des
   listes qui feraient sinon un mur de champs indifférenciés.
   -------------------------------------------------------------------------- */

.formulaire--large { max-width: none; }

.fiche {
  border: var(--verre-bord);
  border-radius: 16px;
  background: rgba(8, 0, 20, 0.35);
  padding: 1.1rem 1.25rem 1.25rem;
  margin: 0 0 1rem;
  display: grid;
  gap: 0.9rem;
}
.fiche__aide {
  margin: 0;
  font-size: 0.8rem;
  color: var(--texte-carte);
  max-width: 68ch;
}

.fiche__legende {
  padding: 0.2rem 0.7rem;
  border-radius: var(--pastille);
  background: var(--rose);
  color: var(--sur-accent);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@media (min-width: 900px) {
  .fiche { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fiche__legende { grid-column: 1 / -1; }
  .fiche .champ:has(textarea) { grid-column: 1 / -1; }
  .fiche__aide { grid-column: 1 / -1; }
}

.champ select {
  width: 100%;
  padding: 0.8rem 1rem;
  background: rgba(8, 0, 20, 0.5);
  border: 1px solid rgba(244, 239, 226, 0.24);
  border-radius: 13px;
  color: var(--texte);
}
.champ input[readonly] { opacity: 0.6; cursor: not-allowed; }
.champ input[type="file"] { padding: 0.6rem; }

/* Un bouton qui doit se lire comme un lien dans une phrase : on retire son
   apparence de contrôle sans lui retirer sa nature de bouton, pour que le
   clavier et les lecteurs d'écran le trouvent toujours. */
.lien-bouton {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--rose);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.lien-bouton:hover { color: var(--jaune); }

/* ===== Signatures visuelles de la maquette  (_maquette.css) ===== */

/* ==========================================================================
   Zone Lumière — les signatures visuelles de la maquette.

   Ce fichier réunit ce qui donne son caractère au design et qui manquait à la
   première version : le duotone sur les images, les surfaces vitrées, les
   pastilles roses, les titres bicolores, le papier scotché, les halos.
   ========================================================================== */

/* --- Jetons complémentaires ---------------------------------------------- */

:root {
  /* Couleurs relevées dans la maquette et absentes de la première version. */
  --violet:      #7C3BFF;   /* halo de fond, bloc vitré final */
  --magenta-sombre: #7A0050; /* dégradé du héros, signature des témoignages */
  --cyan-pale:   #9BF3FF;   /* haut du dégradé des bandeaux */
  --cyan-moyen:  #00A8CC;   /* bas du dégradé des bandeaux */
  --encre:       #080014;   /* fond des lignes de date, plus sombre que --nuit */

  /* Le duotone. Toute image du site passe par ce couple : un dégradé de fond,
     et l'image posée dessus en luminosité seule. Le sens alterne d'une carte
     à l'autre pour éviter l'effet catalogue. */
  --duo-a: linear-gradient(150deg, var(--rose), var(--cyan));
  --duo-b: linear-gradient(150deg, var(--cyan), var(--rose));

  /* Les spectacles passés virent au jaune là où la création en cours reste au
     cyan. Le relevé de la maquette est formel : « le passage du cyan au jaune
     signale le basculement dans le passé ». */
  --duo-archive:  linear-gradient(150deg, var(--rose), var(--jaune));
  --duo-archive-b: linear-gradient(150deg, var(--jaune), var(--rose));
  --duo-heros: linear-gradient(155deg, var(--rose) 0%, var(--magenta-sombre) 48%, var(--jaune) 100%);

  /* Le verre. Trois ingrédients indissociables : bordure claire, fond
     translucide, flou d'arrière-plan. */
  --verre-fond:    rgba(244, 239, 226, 0.07);
  --verre-bord:    1px solid rgba(244, 239, 226, 0.22);
  --verre-flou:    blur(12px);
  --verre-ombre:   0 14px 40px rgba(8, 0, 20, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.28);

  /* Le bandeau défilant n'est pas d'un cyan plat : il descend du cyan pâle au
     violet, ce qui lui donne son épaisseur.

     La maquette terminait ce dégradé sur #3B1173. Mesuré : le texte encre du
     bandeau n y tient que 3,29:1 sous ses pixels, et 1,41:1 tout en bas — il
     disparaît en défilant. Le dégradé s achève donc sur --violet #7C3BFF, qui
     appartient déjà à la palette (halos de fond, bloc vitré) et remonte le pire
     ratio sous le texte à 4,79:1 : conforme AA même quand la police tombe à
     16 px sur petit écran. */
  --bandeau: linear-gradient(180deg, var(--cyan-pale) 0%, var(--cyan) 38%, var(--cyan-moyen) 72%, var(--violet) 100%);

  --texte-carte: rgba(244, 239, 226, 0.82);
}

/* Le rose est la couleur d'action du site : pastilles, boutons pleins,
   badges, seconde ligne des titres. Le cyan sert aux surtitres et aux
   survols. Ne pas les intervertir — c'est ce qui rendait la première
   version uniformément cyan. */
.a--rose { --accent: var(--rose); }

/* --- Le duotone -----------------------------------------------------------
   isolation:isolate est indispensable : sans lui, mix-blend-mode remonte
   jusqu'au fond de la page et l'image se mélange avec tout ce qui est
   derrière, au lieu de se mélanger avec son seul dégradé.
   -------------------------------------------------------------------------- */

.duo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--duo-a);
  border-radius: var(--rayon);
}
.duo--inverse { background: var(--duo-b); }
.duo--archive { background: var(--duo-archive); }
.duo--archive.duo--inverse { background: var(--duo-archive-b); }

/* <picture> ne doit rien imposer : c'est un conteneur de sources, la mise en
   page se joue sur l'<img> qu'il contient. */
.duo > picture { display: contents; }

.duo img {
  display: block;
  width: 100%;
  object-fit: cover;
  mix-blend-mode: luminosity;
  filter: grayscale(1) contrast(1.26);
}

.duo--4-3 img { aspect-ratio: 4 / 3; }
.duo--4-5 img { aspect-ratio: 4 / 5; }
.duo--3-4 img { aspect-ratio: 3 / 4; }

/* Variante du héros : le duotone occupe tout le cadre qui le contient. */
.duo--heros {
  position: absolute;
  inset: 0;
  border-radius: 0;
  background: var(--duo-heros);
}
.duo--heros img {
  height: 100%;
  aspect-ratio: auto;
  filter: grayscale(1) contrast(1.3);
}

/* Repli pour les navigateurs sans mix-blend-mode : plutôt qu'une image grise
   posée sur un dégradé invisible, on rend l'image telle quelle. */
@supports not (mix-blend-mode: luminosity) {
  .duo img { mix-blend-mode: normal; filter: none; }
}

/* --- Surfaces vitrées ----------------------------------------------------- */

.verre {
  border: var(--verre-bord);
  background: var(--verre-fond);
  backdrop-filter: var(--verre-flou);
  -webkit-backdrop-filter: var(--verre-flou);
  border-radius: var(--rayon-doux);
}

/* Sans backdrop-filter, un fond à 7 % d'opacité est presque invisible :
   on le densifie pour que la carte reste une carte. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .verre { background: rgba(30, 10, 60, 0.72); }
}

/* --- Halos de fond --------------------------------------------------------
   Quatre disques flous répartis sur la hauteur de la page. Purement
   décoratifs, sous le contenu, et sans interception du pointeur.
   -------------------------------------------------------------------------- */

.halos {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.halos > i {
  position: absolute;
  display: block;
  border-radius: 50%;
  /* Chaque halo dérive à sa propre cadence : des durées volontairement non
     multiples les unes des autres, pour qu ils ne se resynchronisent jamais. */
  animation: flotte 23s ease-in-out infinite;
}
.halos > i:nth-child(2) { animation-duration: 29s; animation-direction: reverse; }
.halos > i:nth-child(3) { animation-duration: 33s; }
.halos > i:nth-child(4) { animation-duration: 27s; animation-direction: reverse; }

@keyframes flotte {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(4%, -5%) scale(1.08); }
  66%      { transform: translate(-4%, 4%) scale(0.95); }
}

@media (prefers-reduced-motion: reduce) {
  .halos > i { animation: none; }
}
.halos > i:nth-child(1) {
  top: -8%; left: -10%; width: 62vw; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(255, 61, 219, 0.5), rgba(255, 61, 219, 0) 62%);
  filter: blur(32px);
}
.halos > i:nth-child(2) {
  top: 26%; right: -14%; width: 58vw; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(0, 229, 255, 0.36), rgba(0, 229, 255, 0) 62%);
  filter: blur(34px);
}
.halos > i:nth-child(3) {
  top: 56%; left: -12%; width: 54vw; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(124, 59, 255, 0.5), rgba(124, 59, 255, 0) 62%);
  filter: blur(32px);
}
.halos > i:nth-child(4) {
  top: 82%; right: -8%; width: 46vw; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(255, 221, 0, 0.22), rgba(255, 221, 0, 0) 62%);
  filter: blur(36px);
}

/* --- Halo de curseur ------------------------------------------------------
   Le seul effet de souris retenu par la maquette : un disque lumineux qui
   suit le pointeur en mode « screen ». Posé par le script, jamais visible
   tant qu'aucune souris n'a bougé — donc invisible au doigt.
   -------------------------------------------------------------------------- */

.halo-curseur {
  position: fixed;
  top: 0; left: 0;
  width: 460px; height: 460px;
  margin: -230px 0 0 -230px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 221, 0, 0.34),
    rgba(255, 61, 219, 0.24) 42%,
    rgba(0, 229, 255, 0) 70%);
  mix-blend-mode: screen;
  z-index: 70;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
  will-change: transform;
}
.halo-curseur--vu { opacity: 1; }

/* Au doigt, un halo qui suit le pointeur n'a pas de sens : il resterait figé
   là où l'on a touché. Et en mouvement réduit, il est simplement supprimé. */
@media (hover: none), (prefers-reduced-motion: reduce) {
  .halo-curseur { display: none; }
}

/* --- Titres bicolores -----------------------------------------------------
   Signature forte de la maquette : le titre commence en jaune et bascule en
   rose sur sa seconde ligne.
   -------------------------------------------------------------------------- */

.titre-geant,
.titre,
.titre-sous { color: var(--jaune); }

.titre b,
.titre-geant b,
.titre-sous b {
  font-weight: inherit;
  color: var(--rose);
}

/* Sur un bloc déjà coloré, le jaune et le rose disparaissent : on repasse en
   encre, qui tient sur les trois accents. */
.bloc-plein .titre,
.bloc-plein .titre-geant,
.bloc-plein .titre-sous { color: var(--sur-accent); }
.bloc-plein .titre b { color: var(--nuit-2); }

/* --- Pastilles et autocollants -------------------------------------------- */

.pastille {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.45em 0.9em;
  border-radius: var(--pastille);
  background: var(--rose);
  color: var(--sur-accent);
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pastille--cyan  { background: var(--cyan); }
.pastille--jaune { background: var(--jaune); }
.pastille--vide {
  background: none;
  border: 1px solid rgba(244, 239, 226, 0.34);
  color: var(--texte);
}
.pastille--vide:hover { border-color: var(--cyan); color: var(--cyan); }

/* L'autocollant : un rectangle pivoté, jamais arrondi, posé par-dessus une
   image ou un bloc. Pas d'ombre portée — la maquette n'en met aucune. */
.autocollant {
  display: inline-block;
  padding: 0.7em 0.8em;
  background: var(--creme);
  color: var(--nuit);
  font-family: var(--display);
  font-size: clamp(0.85rem, 1.5vw, 1.4rem);
  line-height: 1;
  text-transform: uppercase;
  transform: rotate(-9deg);
  /* Ombre dure, sans flou : le papier est posé sur la page, pas suspendu
     au-dessus. La maquette la colore en rose plutôt qu en noir. */
  box-shadow: 6px 6px 0 rgba(255, 61, 219, 0.9);
}
.autocollant--jaune  { background: var(--jaune); }
.autocollant--droite { transform: rotate(7deg); }
.autocollant small {
  display: block;
  margin-top: 0.35em;
  font-family: var(--mono);
  font-size: 0.5em;
  letter-spacing: 0.1em;
}

/* --- Papier scotché (témoignages) ----------------------------------------- */

.papier {
  position: relative;
  padding: clamp(1.15rem, 1.8vw, 1.9rem);
  background: var(--creme);
  color: var(--nuit);
  transform: rotate(-1.4deg);
  box-shadow: 8px 8px 0 rgba(255, 61, 219, 0.9);
}
.papier:nth-child(2n)  { transform: rotate(1.5deg);  box-shadow: 8px 8px 0 rgba(0, 229, 255, 0.9); }
.papier:nth-child(3n)  { transform: rotate(-0.8deg); box-shadow: 8px 8px 0 rgba(255, 221, 0, 0.9); }

/* La bande de scotch : un rectangle jaune translucide qui déborde en haut. */
.papier::before {
  content: "";
  position: absolute;
  top: -11px; left: 24px;
  width: 88px; height: 22px;
  background: rgba(255, 221, 0, 0.75);
  transform: rotate(-4deg);
}
.papier:nth-child(2n)::before { left: auto; right: 28px; transform: rotate(5deg); width: 92px; }
.papier:nth-child(3n)::before { left: 36%; transform: rotate(-2deg); width: 84px; }

.papier__mot {
  font-family: var(--display);
  font-size: clamp(1.15rem, 1.9vw, 1.9rem);
  line-height: 1.06;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  margin-top: 0.4rem;
}
.papier__qui {
  margin-top: 0.9rem;
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--magenta-sombre);
}

/* --- Bloc « fenêtre » ------------------------------------------------------
   Un cadre vitré coiffé d'une barre de titre à trois pastilles rondes, façon
   fenêtre de logiciel. Sert aux dates et au teaser.
   -------------------------------------------------------------------------- */

.fenetre {
  border: 1px solid rgba(244, 239, 226, 0.24);
  border-radius: 24px;
  background: rgba(244, 239, 226, 0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
}
.fenetre__barre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding: clamp(0.6rem, 1vw, 1rem) clamp(0.75rem, 1.4vw, 1.4rem);
  background: linear-gradient(90deg, rgba(255, 61, 219, 0.45), rgba(0, 229, 255, 0.35));
}
.fenetre__point {
  width: 11px; height: 11px;
  border-radius: 50%;
  flex: none;
}
.fenetre__point:nth-of-type(1) { background: var(--rouge); }
.fenetre__point:nth-of-type(2) { background: var(--jaune); }
.fenetre__point:nth-of-type(3) { background: var(--cyan); }
.fenetre__nom {
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.fenetre__marque {
  margin-left: auto;
  padding: 0.3rem 0.65rem;
  border-radius: var(--pastille);
  background: var(--nuit);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.fenetre__corps { padding: clamp(0.9rem, 1.8vw, 1.9rem); }

/* --- Bloc d'appel vitré ---------------------------------------------------- */

.appel-verre {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(0, 229, 255, 0.42);
  background: linear-gradient(150deg,
    rgba(255, 61, 219, 0.26),
    rgba(124, 59, 255, 0.2) 50%,
    rgba(0, 229, 255, 0.22));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: clamp(1.75rem, 4.4vw, 5.6rem) clamp(1.15rem, 2.6vw, 3.4rem);
}

/* --- Autocollants déplaçables ---------------------------------------------
   La maquette les rend saisissables à la souris — l'un d'eux annonce même
   « tu peux me déplacer ↔ ». Le curseur ne change que si le script a pris la
   main : sans JavaScript, rien ne laisse croire qu'on peut les attraper.
   -------------------------------------------------------------------------- */

.js .autocollant[data-glisser] {
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.js .autocollant[data-glisser].saisi { cursor: grabbing; }

/* --- Inclinaison des cartes ------------------------------------------------
   Les cartes s'inclinent vers le pointeur. La transformation est écrite par le
   script ; la remontée au survol gérée en CSS est donc neutralisée sur les
   cartes qu'il a prises en charge, sinon les deux se contrarient.
   -------------------------------------------------------------------------- */

.incline {
  transform-style: preserve-3d;
  will-change: transform;
}
.zone-carte.incline:hover,
.spectacle-carte.incline:hover,
.palier.incline:hover { transform: none; }

/* Retour lent quand le pointeur s'en va, réponse vive quand il arrive :
   le script bascule la classe au bon moment. */
.incline            { transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.32s cubic-bezier(0.2, 0.7, 0.2, 1); }
.incline.incline--suit { transition: transform 0.12s linear, border-color 0.32s cubic-bezier(0.2, 0.7, 0.2, 1); }

@media (prefers-reduced-motion: reduce) {
  .incline, .incline.incline--suit { transition: none; }
}

/* Chaque palier de don porte sa propre couleur d accent : bordure, montant et
   unité. Sans cela les trois cartes seraient identiques. */
.palier.a--cyan    { border-color: var(--cyan); }
.palier.a--magenta { border-color: var(--rose); }
.palier.a--jaune   { border-color: var(--jaune); }
.palier.a--cyan    .palier__montant span { color: var(--cyan); }
.palier.a--magenta .palier__montant span { color: var(--rose); }
.palier.a--jaune   .palier__montant span { color: var(--jaune); }

/* ===== Espace membre  (_membre.css) ===== */

/* ==========================================================================
   Zone Lumière — espace membre et administration.

   Réutilise le système public : verre, pastilles, duotone, titres bicolores.
   Ne définit que ce qui lui est propre.
   ========================================================================== */

/* --- Le lien « Espace membre » du menu ------------------------------------
   La maquette le pose en pastille bordée, juste avant « Nous rejoindre » qui
   est pleine : deux niveaux d'appel, pas deux boutons concurrents.
   -------------------------------------------------------------------------- */

.menu__element:nth-last-child(2) .menu__lien {
  padding: 0.58rem 1.05rem;
  border: 1px solid rgba(244, 239, 226, 0.34);
  border-radius: var(--pastille);
}
.menu__element:nth-last-child(2) .menu__lien:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}

/* --- Écran d'accès --------------------------------------------------------- */

.acces { display: grid; place-items: center; min-height: 62vh; }
.acces__enveloppe { width: 100%; max-width: var(--large); padding-inline: var(--gouttiere); }

.acces__carte {
  width: 100%;
  max-width: 30rem;
  margin-inline: auto;
  padding: clamp(1.5rem, 3.4vw, 2.75rem);
  border-radius: var(--rayon-doux);
}
.acces__carte .titre-sous { margin: 0.7rem 0 1.2rem; }
.acces__carte .formulaire { max-width: none; }

.acces__texte {
  margin-bottom: 1.4rem;
  color: var(--texte-carte);
  font-size: 0.92rem;
  line-height: 1.55;
}

.acces__lien {
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding-block: 0.3rem;
}
.acces__lien:hover { color: var(--jaune); }

.acces__retour {
  margin-top: 1.6rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(244, 239, 226, 0.16);
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.acces__retour a { color: var(--texte-carte); display: inline-block; padding-block: 0.3rem; }
.acces__retour a:hover { color: var(--jaune); }

/* Case à cocher isolée, hors de la grille des zones. */
.case--seule { display: inline-flex; width: auto; }

/* --- Bandeau de bienvenue --------------------------------------------------- */

.salut {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem;
}
.salut .titre { margin-top: 0.6rem; }

/* --- Annonces ---------------------------------------------------------------
   Papier crème, comme les témoignages du site public, mais sans rotation :
   ce sont des informations à lire vite, pas un objet à regarder.
   -------------------------------------------------------------------------- */

.annonces { display: grid; gap: 0.75rem; }

.annonce {
  display: grid;
  gap: 0.3rem;
  padding: clamp(0.9rem, 1.6vw, 1.35rem);
  border-left: 4px solid var(--rose);
  border-radius: 0 13px 13px 0;
  background: rgba(8, 0, 20, 0.5);
}
.annonce:nth-child(2n) { border-left-color: var(--cyan); }
.annonce:nth-child(3n) { border-left-color: var(--jaune); }

.annonce__date {
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texte-carte);
}
.annonce__texte { line-height: 1.55; }

/* --- Répétitions ------------------------------------------------------------- */

.repet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.7rem, 1.4vw, 1.6rem);
  padding: clamp(0.8rem, 1.4vw, 1.35rem);
  border: 1px solid rgba(244, 239, 226, 0.16);
  border-radius: 16px;
  background: rgba(8, 0, 20, 0.5);
  transition: border-color var(--transition);
}
.repet + .repet { margin-top: clamp(0.5rem, 1vw, 0.85rem); }

/* La bordure dit l'état d'un coup d'œil : c'est l'information que le membre
   vient chercher, il ne doit pas avoir à lire le bouton. */
.repet--oui { border-color: var(--cyan); }
.repet--non { border-color: rgba(255, 30, 0, 0.5); }

.repet__jour {
  flex: none;
  font-family: var(--display);
  font-size: clamp(1.6rem, 3vw, 3rem);
  line-height: 1;
  color: var(--cyan);
}
.repet--non .repet__jour { color: var(--sourdine); }

.repet__bloc { flex: 1 1 14rem; }
.repet__quand {
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texte-carte);
}
.repet__quoi {
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.7vw, 1.6rem);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  color: var(--jaune);
  margin-block: 0.15rem;
}
.repet__ou { font-family: var(--mono); font-size: 0.78rem; opacity: 0.7; }

.repet__reponse {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}
.repet__annuler {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte-carte);
}
.repet--oui .bouton--plein { background: var(--cyan); }

/* --- Documents ---------------------------------------------------------------- */

.doc {
  display: grid;
  gap: 0.3rem;
  height: 100%;
  padding: clamp(1.1rem, 2vw, 1.6rem);
  border: var(--verre-bord);
  border-radius: 20px;
  background: var(--verre-fond);
  backdrop-filter: var(--verre-flou);
  -webkit-backdrop-filter: var(--verre-flou);
  transition: transform var(--transition), border-color var(--transition);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .doc { background: rgba(30, 10, 60, 0.72); }
}
.doc:hover { transform: translateY(-4px); border-color: var(--rose); }

.doc__titre {
  font-family: var(--display);
  font-size: clamp(1.1rem, 1.9vw, 1.6rem);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  color: var(--jaune);
}
.doc__note { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.06em; color: var(--texte-carte); }
.doc__action {
  margin-top: auto;
  padding-top: 0.6rem;
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rose);
}
.doc:hover .doc__action { color: var(--cyan); }

/* ===== Administration  (_admin.css) ===== */

/* ==========================================================================
   Zone Lumière — administration.

   Écran de travail du comité, pas une page de site : la densité prime sur
   l'effet. On reprend la palette et les polices, mais ni duotone, ni halos,
   ni papier scotché — rien qui ralentisse la lecture d'un tableau.
   ========================================================================== */

.admin {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: start;
}
@media (min-width: 900px) {
  .admin { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); }
}

/* --- Menu latéral ---------------------------------------------------------- */

.admin__menu {
  padding: clamp(1rem, 2vw, 1.5rem);
  border: var(--verre-bord);
  border-radius: var(--rayon-doux);
  background: rgba(8, 0, 20, 0.5);
}
@media (min-width: 900px) {
  /* Collant seulement sur grand écran : sur téléphone il mangerait la moitié
     de la hauteur utile. */
  .admin__menu { position: sticky; top: 6rem; }
}

.admin__titre {
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 0.9rem;
}
.admin__menu ul { display: grid; gap: 0.15rem; }
.admin__lien {
  display: block;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  font-size: 0.9rem;
  color: var(--texte-carte);
  transition: background var(--transition), color var(--transition);
}
.admin__lien:hover { background: rgba(244, 239, 226, 0.09); color: var(--texte); }
.admin__lien--actif,
.admin__lien--actif:hover { background: var(--rose); color: var(--sur-accent); font-weight: 700; }

.admin__retour {
  margin-top: 1.2rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(244, 239, 226, 0.16);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 2;
}
.admin__retour a { color: var(--texte-carte); }
.admin__retour a:hover { color: var(--jaune); }

/* --- Corps ------------------------------------------------------------------- */

.admin__corps { min-width: 0; }

.admin__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-bottom: 1.5rem;
}
.admin__qui {
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte-carte);
}
.admin__qui strong { color: var(--cyan); }

.admin__bloc {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid rgba(244, 239, 226, 0.16);
}
.admin__bloc .titre-sous { margin-bottom: 0.8rem; }

.admin__barre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.admin__compte {
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte-carte);
}
.admin__compte strong { color: var(--jaune); font-size: 1.15em; }

.admin__aide {
  margin-bottom: 1.2rem;
  padding: 0.85rem 1rem;
  border-left: 3px solid var(--cyan);
  border-radius: 0 10px 10px 0;
  background: rgba(0, 229, 255, 0.07);
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--texte-carte);
}

.admin__action {
  display: inline-block;
  margin: 0.15rem 0.15rem 0 0;
  padding: 0.35rem 0.7rem;
  border: 1px solid rgba(244, 239, 226, 0.28);
  border-radius: var(--pastille);
  background: none;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte-carte);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}
.admin__action:hover { border-color: var(--cyan); color: var(--cyan); }
.admin__action--danger:hover { border-color: var(--rouge); color: #FF7A66; }

/* --- Tableaux -----------------------------------------------------------------
   Le cadre défile horizontalement plutôt que de faire déborder la page :
   un tableau à six colonnes ne tient pas sur un téléphone.
   -------------------------------------------------------------------------- */

.tableau-cadre {
  overflow-x: auto;
  border: var(--verre-bord);
  border-radius: var(--rayon-doux);
  background: rgba(8, 0, 20, 0.5);
}

.tableau {
  width: 100%;
  min-width: 38rem;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.tableau th,
.tableau td {
  padding: 0.75rem 0.9rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(244, 239, 226, 0.12);
}
.tableau thead th {
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan);
  white-space: nowrap;
}
.tableau tbody tr:last-child td { border-bottom: 0; }
.tableau td strong { color: var(--texte); }
.tableau__nombre { text-align: right; font-variant-numeric: tabular-nums; }
.tableau tfoot td { font-weight: 700; border-top: 1px solid rgba(244, 239, 226, 0.24); }

.tableau__note {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--texte-carte);
  word-break: break-word;
}
.tableau__actions { white-space: nowrap; }
.tableau__actions form { display: inline; }
.tableau__inactif td { opacity: 0.55; }
.tableau__edition td { background: rgba(244, 239, 226, 0.05); }

/* --- Étiquettes d'état ---------------------------------------------------------
   Jamais la couleur seule : chaque état porte aussi son mot. Sans cela, un
   daltonien ne distingue pas « payée » de « en attente ».
   -------------------------------------------------------------------------- */

.etat {
  display: inline-block;
  margin-top: 0.2rem;
  padding: 0.15rem 0.6rem;
  border-radius: var(--pastille);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.etat--payee   { background: rgba(0, 229, 255, 0.18);   color: var(--cyan); }
.etat--attente { background: rgba(255, 221, 0, 0.18);   color: var(--jaune); }
.etat--exempt  { background: rgba(244, 239, 226, 0.12); color: var(--texte-carte); }
.etat--inactif { background: rgba(255, 30, 0, 0.16);    color: #FF8B78; }

/* --- Formulaires en ligne --------------------------------------------------------- */

.formulaire--serre { gap: 0.85rem; max-width: none; }

.champs-ligne {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 0.85rem;
}

.champ select {
  width: 100%;
  padding: 0.8rem 1rem;
  background: rgba(8, 0, 20, 0.5);
  border: 1px solid rgba(244, 239, 226, 0.24);
  border-radius: 13px;
  color: var(--texte);
}
.champ select:focus { border-color: var(--cyan); }

.champ textarea[readonly] {
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.5;
  min-height: 6rem;
}
.champ input[type="file"] {
  padding: 0.6rem;
  font-family: var(--mono);
  font-size: 0.8rem;
}

/* --- Indicateurs du tableau de bord ------------------------------------------------ */

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: clamp(0.7rem, 1.4vw, 1.1rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.kpi {
  padding: clamp(1rem, 2vw, 1.4rem);
  border: var(--verre-bord);
  border-radius: var(--rayon-doux);
  background: rgba(8, 0, 20, 0.5);
}
.kpi__valeur {
  font-family: var(--display);
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  line-height: 1;
  color: var(--jaune);
}
.kpi__nom {
  margin-top: 0.35rem;
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texte-carte);
}

/* --- Liste « à faire » ----------------------------------------------------------- */

.afaire { display: grid; gap: 0.5rem; }
.afaire li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--jaune);
  border-radius: 0 10px 10px 0;
  background: rgba(8, 0, 20, 0.5);
  font-size: 0.9rem;
}
.afaire a {
  margin-left: auto;
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.afaire a:hover { color: var(--jaune); }
.afaire--vide { border-left-color: var(--cyan); }

/* --- Sections repliées ------------------------------------------------------------- */

details.replie { margin-top: 1.2rem; }
details.replie > summary {
  cursor: pointer;
  padding: 0.5rem 0;
  font-family: var(--mono);
  font-size: var(--t-etiquette);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cyan);
  list-style: none;
}
details.replie > summary::-webkit-details-marker { display: none; }
details.replie > summary::before { content: "▸ "; }
details.replie[open] > summary::before { content: "▾ "; }
details.replie > summary:hover { color: var(--jaune); }

/* --- Hauteur des cibles dans l'administration ---------------------------------
   Le critère WCAG 2.5.8 demande 24 px de haut. Ces liens sont posés dans du
   texte courant : leur hauteur est celle de la ligne, soit 16 à 18 px. Le
   remplissage vertical les amène à la cible sans rien changer visuellement,
   puisque l'interligne autour absorbe l'écart.
   -------------------------------------------------------------------------- */

.admin__retour a,
.entete-section__note a,
.tableau td a {
    display: inline-block;
    padding-block: 0.25rem;
}