/* =============================================================
   memoire.css — frise mémorielle castelnau-escrime.fr
   Sobre, mobile-first, sans framework, sans CDN.
   ============================================================= */


/* -------------------------------------------------------------
   Polices locales — sous-ensemble latin, format woff2.
   Source : Google Fonts (EB Garamond v32), subset "latin"
   couvrant U+0000-00FF (français complet). Le poids 600 utilisé
   par les titres est synthétisé par le navigateur (faux-bold) à
   partir du regular, faute de fichier semibold local.
     - assets/fonts/eb-garamond-regular.woff2
     - assets/fonts/eb-garamond-italic.woff2
   ------------------------------------------------------------- */

@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/eb-garamond-regular.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/eb-garamond-italic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}


/* -------------------------------------------------------------
   Variables — palette et tokens d'espace
   ------------------------------------------------------------- */

:root {
  --bg: #0f0a0a;
  --bordeaux: #6b0f1a;
  --or: #d4af6f;
  --texte: #f4ecd8;
  --texte-faible: #a8a094;
  --bordure: rgba(212, 175, 111, 0.15);

  --bg-eclat: #1a1212;
  --or-clair: #e8c890;

  --serif: "EB Garamond", Georgia, "Times New Roman", serif;

  --largeur-contenu: 720px;
  --gouttiere: clamp(1.25rem, 4vw, 2.5rem);

  --espace-section: clamp(4rem, 12vh, 8rem);
  --espace-paragraphe: 1.25rem;

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


/* -------------------------------------------------------------
   Base
   ------------------------------------------------------------- */

html {
  font-size: 100%;
}

body {
  background-color: var(--bg);
  color: var(--texte);
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.7;
  font-weight: 400;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  /* clip plutôt que hidden : ne crée pas de scroll container,
     ce qui casserait position: sticky sur l'escrimeur. */
  overflow-x: clip;
}

::selection {
  background-color: var(--bordeaux);
  color: var(--texte);
}


/* -------------------------------------------------------------
   Skip link (accessibilité)
   ------------------------------------------------------------- */

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  padding: 0.75rem 1.25rem;
  background-color: var(--bordeaux);
  color: var(--texte);
  border: 1px solid var(--or);
  z-index: 1000;
  transition: top 200ms ease;
}

.skip-link:focus {
  top: 1rem;
}


/* -------------------------------------------------------------
   Focus visible — partout
   ------------------------------------------------------------- */

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


/* -------------------------------------------------------------
   Mise en page — main et sections
   <main> contient la piste + l'escrimeur + les jalons. Position
   relative pour ancrer la piste (absolue) et la sticky-track de
   l'escrimeur.
   ------------------------------------------------------------- */

main {
  position: relative;
  padding: 0 var(--gouttiere);
}


/* -------------------------------------------------------------
   Piste d'escrime verticale
   - Étirée sur toute la hauteur de <main>
   - Deux rails latéraux (pseudo-éléments)
   - Marques réglementaires placées à des % narratifs
   - Léger halo en bas pour adoucir la sortie de la piste
   ------------------------------------------------------------- */

.piste {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(60px, 8vw, 96px);
  z-index: 0;
  pointer-events: none;
  /* Tile décoratif : fin tiret central répété, donne le rythme */
  background-image: url("../svg/piste.svg");
  background-repeat: repeat-y;
  background-position: center top;
  background-size: 100% clamp(40px, 6vh, 80px);
  /* Masque qui adoucit le haut et le bas de la piste pour éviter
     une césure trop nette avec le reste de la page. La piste court
     désormais quasi jusqu'en bas (le site se termine sur l'ombre
     puis l'invitation à contribuer — pas de transition EPIC). */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 4%,
    #000 94%,
    transparent 100%
  );
          mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 4%,
    #000 94%,
    transparent 100%
  );
}

/* Rails latéraux */
.piste::before,
.piste::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: var(--or);
  opacity: 0.45;
}

.piste::before { left: 0; }
.piste::after  { right: 0; }

/* Marques transversales (médiane, gardes, lignes des 2m) */
.piste__marque {
  position: absolute;
  top: var(--piste-marque-y, 50%);
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--or);
  opacity: 0.45;
}

.piste__marque--limite {
  height: 2px;
  opacity: 0.7;
}

.piste__marque--garde {
  opacity: 0.3;
}

.piste__marque--mediane {
  height: 2px;
  opacity: 0.6;
}

/* Halo discret en bas de page — léger souffle d'or qui adoucit la
   sortie de la piste. Plus sobre depuis le retrait de la transition
   EPIC : le site se termine désormais sur une note retenue. */
.piste__halo {
  position: absolute;
  top: 92%;
  bottom: -6vh;
  left: -150%;
  right: -150%;
  background: radial-gradient(
    ellipse at top center,
    rgba(212, 175, 111, 0.08) 0%,
    rgba(212, 175, 111, 0.025) 40%,
    transparent 75%
  );
  pointer-events: none;
}


/* -------------------------------------------------------------
   Escrimeur — sticky à mi-écran, descend visuellement la piste
   - Conteneur sticky de hauteur 0 (ne pousse pas le contenu)
   - SVG positionné absolu et centré sur l'ancre sticky
   - Couleur teintée via currentColor
   - Direction : scale composé via --escrimeur-flip, transitionné
     pour un retournement fluide au passage des jalons.
   - Salut : keyframe courte (rotate) déclenchée à l'arrivée d'un
     jalon, indépendante de la direction.
   ------------------------------------------------------------- */

.escrimeur {
  /* Conteneur full-width 0px de haut : ne pousse pas le contenu,
     mais offre une référence horizontale fiable pour left:50%.
     --frame-size : taille de la pose courante (carrée). */
  position: sticky;
  top: 50vh;
  height: 0;
  width: 100%;
  margin: 0;
  z-index: 2;
  pointer-events: none;
  --frame-size: clamp(72px, 8vw, 112px);
}

/* Stage = boîte carrée qui contient les 6 SVG de pose empilés
   en absolu. Une seule pose est visible à la fois, sélectionnée
   par l'attribut data-frame du wrapper. */
.escrimeur__stage {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--frame-size);
  height: var(--frame-size);
  translate: -50% -50%;
  scale: var(--escrimeur-flip, 1) 1;
  transform-origin: center;
  transition: scale 400ms cubic-bezier(0.4, 0, 0.2, 1);
  filter: drop-shadow(0 0 12px rgba(232, 200, 144, 0.3));
}

/* Chaque pose occupe le stage entier ; cachée par défaut, rendue
   visible via le sélecteur d'attribut ci-dessous. */
.escrimeur__pose {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  /* Pixel art : pas d'antialiasing, pas d'interpolation. */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Affiche la pose dont data-frame correspond à celui du wrapper.
   La bascule entre poses est instantanée (display: block) — c'est
   la logique sprite : on saute d'une frame à la suivante, pas de
   morph entre poses. */
.escrimeur[data-frame="0"] .escrimeur__pose[data-frame="0"],
.escrimeur[data-frame="1"] .escrimeur__pose[data-frame="1"],
.escrimeur[data-frame="2"] .escrimeur__pose[data-frame="2"],
.escrimeur[data-frame="3"] .escrimeur__pose[data-frame="3"],
.escrimeur[data-frame="4"] .escrimeur__pose[data-frame="4"],
.escrimeur[data-frame="5"] .escrimeur__pose[data-frame="5"] {
  display: block;
}

/* Recoloriage des poses à la palette du site. Les classes CSS
   sont posées sur les <rect> des SVG (.tenue, .chaussures, .lame,
   .grille, .ombre, .impact). On surcharge ici pour caler les
   couleurs sur les variables du thème. */
.escrimeur__pose .tenue      { fill: var(--texte); }
.escrimeur__pose .chaussures { fill: var(--bordeaux); }
.escrimeur__pose .lame       { fill: var(--or); }
.escrimeur__pose .grille     { fill: #1a1212; opacity: 0.7; }
.escrimeur__pose .ombre      { fill: var(--texte-faible); }
.escrimeur__pose .impact     { fill: var(--or-clair); }

/* Direction « regarde à gauche » — appliqué quand le texte du
   jalon actif se trouve à gauche de la piste (jalons pairs en
   desktop). Le flip vit sur le stage : les frames internes ne
   bougent pas, c'est la fenêtre qui pivote en miroir. */
.escrimeur--regarde-gauche .escrimeur__stage {
  --escrimeur-flip: -1;
}

/* Section ombre — assombrit le halo et atténue le sprite pour
   marquer la rupture sans changer de pose forcément. */
.escrimeur--ombre .escrimeur__stage {
  filter: drop-shadow(0 0 10px rgba(107, 15, 26, 0.55));
  opacity: 0.85;
}

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


/* -------------------------------------------------------------
   Jalons — bloc de contenu, au-dessus de la piste
   ------------------------------------------------------------- */

.jalon {
  position: relative;
  max-width: var(--largeur-contenu);
  margin: 0 auto;
  padding: var(--espace-section) 0;
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 1;
}


/* -------------------------------------------------------------
   Header de jalon
   ------------------------------------------------------------- */

.jalon__header {
  margin-bottom: 2.5rem;
}

.jalon__date {
  font-style: italic;
  color: var(--or);
  font-size: 1rem;
  letter-spacing: 0.04em;
  margin-bottom: 0.75rem;
}

.jalon__date sup,
.jalon__titre sup {
  font-size: 0.6em;
  vertical-align: super;
  line-height: 1;
}

.jalon__titre {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.85rem, 5vw, 2.85rem);
  line-height: 1.2;
  color: var(--texte);
  letter-spacing: -0.01em;
}

.jalon__sous-titre {
  margin-top: 0.75rem;
  font-style: italic;
  color: var(--texte-faible);
  font-size: 1.15rem;
}


/* -------------------------------------------------------------
   Corps de jalon
   ------------------------------------------------------------- */

.jalon__corps p {
  margin-bottom: var(--espace-paragraphe);
}

.jalon__corps p:last-child {
  margin-bottom: 0;
}

.jalon__corps h2 {
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--or);
  letter-spacing: 0.02em;
}

.jalon__corps h2:first-child {
  margin-top: 0;
}

.jalon__corps h3 {
  margin-top: 1.75rem;
  margin-bottom: 0.6rem;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--or-clair);
  font-style: italic;
}

.jalon__corps strong {
  font-weight: 600;
  color: var(--or-clair);
}

.jalon__placeholder {
  color: var(--texte-faible);
  font-size: 0.95rem;
  padding-left: 1rem;
  border-left: 1px solid var(--bordure);
}

.jalon__source {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--bordure);
  font-size: 0.9rem;
  color: var(--texte-faible);
}

.jalon__source strong {
  color: var(--or);
  font-weight: 600;
}

.jalon__murmure {
  margin-top: 2rem;
  font-size: 0.95rem;
  color: var(--texte-faible);
  text-align: center;
}

/* Murmure de fin — sœur de <main> (pas dedans), pour que le sticky
   .escrimeur s'arrête juste au-dessus de cette ligne. Visuellement
   identique à .jalon__murmure mais avec son propre conteneur centré. */
.frise-fin {
  max-width: var(--largeur-contenu);
  margin: 0 auto;
  padding: 2rem var(--gouttiere) 3rem;
  font-size: 0.95rem;
  color: var(--texte-faible);
  text-align: center;
}

/* Avertissement liminaire — petit bloc bordé or, posé en intro
   du jalon 0 pour annoncer la posture du site dès le premier
   regard (et pas seulement en pied de page). */
.jalon__avertissement {
  margin: 0 0 2rem;
  padding: 0.85rem 1.15rem;
  border-left: 2px solid var(--or);
  background-color: rgba(212, 175, 111, 0.05);
  font-size: 0.95rem;
  line-height: 1.6;
}

.jalon__avertissement p {
  margin: 0;
  color: var(--texte-faible);
}


/* -------------------------------------------------------------
   Liens
   ------------------------------------------------------------- */

a {
  color: var(--or);
  text-decoration: underline;
  text-decoration-color: var(--bordure);
  text-underline-offset: 0.2em;
  transition: color var(--transition), text-decoration-color var(--transition);
}

a:hover {
  color: var(--or-clair);
  text-decoration-color: var(--or);
}


/* -------------------------------------------------------------
   Bouton discret
   ------------------------------------------------------------- */

.bouton-discret {
  display: inline-block;
  padding: 0.85rem 1.75rem;
  border: 1px solid var(--or);
  color: var(--or);
  text-decoration: none;
  font-style: italic;
  letter-spacing: 0.02em;
  transition: background-color var(--transition),
              color var(--transition),
              border-color var(--transition);
}

.bouton-discret:hover,
.bouton-discret:focus {
  background-color: var(--bordeaux);
  color: var(--texte);
  border-color: var(--bordeaux);
}

.jalon__cta {
  margin-top: 2.5rem;
}


/* -------------------------------------------------------------
   Variantes de jalons
   ------------------------------------------------------------- */

/* Accueil — typo plus généreuse */
.jalon--accueil .jalon__titre {
  font-size: clamp(2.25rem, 6vw, 3.5rem);
}

/* Ombre — sobre, plus serré, moins lumineux */
.jalon--ombre {
  color: var(--texte-faible);
}

.jalon--ombre .jalon__titre {
  color: var(--texte-faible);
  font-weight: 400;
  font-style: italic;
}

.jalon--ombre .jalon__corps strong {
  color: var(--texte);
}

/* Contribuer */
.jalon--contribuer .jalon__titre {
  color: var(--or);
}


/* -------------------------------------------------------------
   Formulaire de contribution
   - Sobre, large, espacements généreux, cohérent avec la frise.
   - Inputs : fond légèrement plus clair que --bg, bordure or pâle
     subtile, focus visible bordeaux.
   - Bouton : fond bordeaux, texte ivoire, transition douce au hover,
     légère élévation au focus.
   - Honeypot : invisible mais accessible aux bots (pas display:none).
   ------------------------------------------------------------- */

.formulaire {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

/* Honeypot — sorti du flux visuel mais détectable par les bots */
.formulaire__honeypot {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.formulaire__champ {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.formulaire__champ label {
  font-size: 1rem;
  color: var(--texte);
  letter-spacing: 0.01em;
}

.formulaire__optionnel {
  margin-left: 0.4em;
  font-style: italic;
  color: var(--texte-faible);
  font-size: 0.9em;
}

.formulaire__requis {
  color: var(--or);
  margin-left: 0.15em;
}

.formulaire input[type="text"],
.formulaire input[type="email"],
.formulaire textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background-color: var(--bg-eclat);
  color: var(--texte);
  border: 1px solid var(--bordure);
  border-radius: 2px;
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.5;
  transition: border-color var(--transition),
              background-color var(--transition),
              box-shadow var(--transition);
}

.formulaire input[type="text"]:hover,
.formulaire input[type="email"]:hover,
.formulaire textarea:hover {
  border-color: rgba(212, 175, 111, 0.35);
}

.formulaire input[type="text"]:focus,
.formulaire input[type="email"]:focus,
.formulaire textarea:focus {
  outline: none;
  border-color: var(--bordeaux);
  box-shadow: 0 0 0 1px var(--bordeaux);
  background-color: var(--bg);
}

.formulaire textarea {
  resize: vertical;
  min-height: 9rem;
}

.formulaire input::placeholder,
.formulaire textarea::placeholder {
  color: var(--texte-faible);
  opacity: 0.55;
  font-style: italic;
}

.formulaire input[type="file"] {
  font-family: var(--serif);
  font-size: 0.95rem;
  color: var(--texte-faible);
  padding: 0.5rem 0;
}

.formulaire input[type="file"]::file-selector-button {
  font-family: var(--serif);
  font-size: 0.95rem;
  color: var(--or);
  background-color: transparent;
  border: 1px solid var(--bordure);
  padding: 0.5rem 1rem;
  margin-right: 1rem;
  cursor: pointer;
  transition: background-color var(--transition),
              border-color var(--transition),
              color var(--transition);
}

.formulaire input[type="file"]::file-selector-button:hover,
.formulaire input[type="file"]::file-selector-button:focus {
  background-color: var(--bordeaux);
  border-color: var(--bordeaux);
  color: var(--texte);
}

/* Champ consent — checkbox alignée avec son libellé */
.formulaire__champ--consent {
  margin-top: 0.25rem;
}

.formulaire__consent {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--texte-faible);
  cursor: pointer;
}

.formulaire__consent input[type="checkbox"] {
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.2rem;
  accent-color: var(--bordeaux);
  cursor: pointer;
}

.formulaire__consent span {
  flex: 1;
}

/* Bloc bouton + feedback */
.formulaire__actions {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}

.bouton-bordeaux {
  display: inline-block;
  padding: 0.95rem 2rem;
  background-color: var(--bordeaux);
  color: var(--texte);
  border: 1px solid var(--bordeaux);
  border-radius: 2px;
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color var(--transition),
              transform var(--transition),
              box-shadow var(--transition),
              opacity var(--transition);
}

.bouton-bordeaux:hover:not(:disabled) {
  background-color: #7d1421;
  border-color: #7d1421;
}

.bouton-bordeaux:focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 3px;
  box-shadow: 0 4px 14px rgba(107, 15, 26, 0.35);
}

.bouton-bordeaux:disabled {
  opacity: 0.55;
  cursor: progress;
}

/* Feedback (succès / erreur) */
.formulaire__feedback {
  font-size: 0.95rem;
  font-style: italic;
  color: var(--texte-faible);
  min-height: 1.4em;
  margin: 0;
}

.formulaire__feedback--erreur {
  color: #e8a89a;
}

.formulaire__feedback--succes {
  color: var(--or-clair);
}

/* Compteur de caractères du textarea — discret, sous le champ.
   Bascule en bordeaux clair quand on s'approche de la limite,
   et plus marqué quand on la dépasse (rejet par le back). */
.formulaire__compteur {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--texte-faible);
  text-align: right;
  letter-spacing: 0.02em;
}

.formulaire__compteur--proche {
  color: var(--or);
}

.formulaire__compteur--depasse {
  color: #e8a89a;
  font-style: normal;
  font-weight: 600;
}

/* États de validation visibles — appliqués via JS au blur ou submit */
.formulaire input[aria-invalid="true"],
.formulaire textarea[aria-invalid="true"] {
  border-color: #e8a89a;
  box-shadow: 0 0 0 1px #e8a89a;
}

.formulaire__erreur-champ {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  color: #e8a89a;
  font-style: italic;
}

/* Bloc <noscript> — affiché uniquement si JS désactivé. Discret,
   bordé bordeaux pour signaler une dégradation contrôlée. */
.formulaire__noscript {
  margin: 1.5rem 0 0;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--bordeaux);
  background-color: rgba(107, 15, 26, 0.08);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--texte-faible);
}

.formulaire__noscript strong {
  color: var(--texte);
  font-weight: 600;
}

/* RGPD sous le formulaire */
.formulaire__rgpd {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--bordure);
  font-size: 0.85rem;
  font-style: italic;
  color: var(--texte-faible);
  line-height: 1.6;
}

.formulaire__rgpd a {
  color: var(--or);
}


/* -------------------------------------------------------------
   Indicateur de progression
   - Colonne de points fixée à droite, centrée verticalement.
   - Un point par jalon. Le point actif est rempli (bordeaux).
   - Caché en mobile (la piste occupe déjà la zone droite).
   - Caché aussi avec prefers-reduced-motion ? Non — il reste utile,
     mais sans transition.
   ------------------------------------------------------------- */

.progression {
  position: fixed;
  top: 50%;
  right: clamp(0.75rem, 1.5vw, 1.5rem);
  transform: translateY(-50%);
  z-index: 5;
  pointer-events: none;
}

.progression ol {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.progression a {
  display: block;
  width: 28px;
  height: 28px;
  padding: 9px;
  text-decoration: none;
  pointer-events: auto;
  border-radius: 50%;
  transition: background-color var(--transition);
}

.progression a span {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid var(--or);
  background-color: transparent;
  opacity: 0.5;
  transition:
    background-color var(--transition),
    transform var(--transition),
    opacity var(--transition),
    border-color var(--transition);
}

.progression a:hover span,
.progression a:focus-visible span {
  opacity: 1;
  border-color: var(--or-clair);
  transform: scale(1.15);
}

.progression a:focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 2px;
}

.progression li.is-active a span {
  background-color: var(--bordeaux);
  border-color: var(--or);
  opacity: 1;
  transform: scale(1.2);
  box-shadow: 0 0 8px rgba(212, 175, 111, 0.45);
}

.progression li.is-passed a span {
  background-color: rgba(107, 15, 26, 0.45);
  opacity: 0.85;
}

@media (max-width: 1023px) {
  .progression {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .progression a span,
  .progression li.is-active a span {
    transition: none;
    transform: none;
  }
}


/* -------------------------------------------------------------
   Pied de page
   ------------------------------------------------------------- */

.pied {
  max-width: var(--largeur-contenu);
  margin: 0 auto;
  padding: 4rem var(--gouttiere) 3rem;
  border-top: 1px solid var(--bordure);
  font-size: 0.85rem;
  color: var(--texte-faible);
  text-align: center;
}

.pied__avertissement {
  margin-bottom: 1.5rem;
  font-style: italic;
  line-height: 1.6;
}

.pied__avertissement a {
  color: var(--or);
}

.pied__signature {
  letter-spacing: 0.05em;
}


/* -------------------------------------------------------------
   Page contribuer (standalone)
   - Pas de piste ni d'escrimeur : un jalon « page » centré.
   - Lien de retour discret au-dessus du titre.
   ------------------------------------------------------------- */

.page-contribuer main {
  padding: clamp(2rem, 6vh, 4rem) var(--gouttiere) 0;
}

.jalon--page {
  max-width: var(--largeur-contenu);
  margin: 0 auto;
  min-height: auto;
}

.jalon__retour {
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}

.jalon__retour-lien {
  font-style: italic;
  color: var(--texte-faible);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color var(--transition);
}

.jalon__retour-lien:hover,
.jalon__retour-lien:focus {
  color: var(--or);
}


/* -------------------------------------------------------------
   Page merci
   ------------------------------------------------------------- */

.page-merci {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

.page-merci main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jalon--merci {
  text-align: center;
  min-height: auto;
  padding: 4rem 0;
}

.jalon--merci .jalon__titre {
  font-size: clamp(2.5rem, 7vw, 4rem);
  color: var(--or);
}

.merci__retour {
  margin-top: 3rem;
}


/* -------------------------------------------------------------
   Animations d'entrée — désactivables via prefers-reduced-motion
   ------------------------------------------------------------- */

.jalon {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--transition),
              transform var(--transition);
  will-change: opacity, transform;
}

.jalon.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Sans JS : tous les jalons restent visibles d'office */
.no-js .jalon {
  opacity: 1;
  transform: none;
}

/* prefers-reduced-motion : aucune animation, tout visible */
@media (prefers-reduced-motion: reduce) {
  .jalon {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .jalon::before {
    transition: none;
    transform: none;
    opacity: 0;
  }

  .escrimeur__stage {
    transition: none;
    animation: none;
  }
}


/* -------------------------------------------------------------
   Responsive — mobile first, ajustements desktop
   ------------------------------------------------------------- */

@media (min-width: 720px) {
  body {
    font-size: 1.15rem;
  }

  .jalon {
    padding: var(--espace-section) 1rem;
  }
}

/* -------------------------------------------------------------
   Desktop — la piste se rétrécit, les jalons alternent
   gauche/droite, un fin trait or les relie au personnage
   (qui est au centre, sur la piste).
   ------------------------------------------------------------- */

@media (min-width: 1024px) {
  :root {
    --espace-section: clamp(6rem, 16vh, 10rem);
    --piste-largeur: 96px;
    --jalon-decalage: calc(var(--piste-largeur) / 2 + 2.5rem);
  }

  .piste {
    width: var(--piste-largeur);
  }

  .jalon {
    max-width: 460px;
    margin: 0;
  }

  /* Jalons pairs (0, 2, 4, 6, 8) → côté gauche de la piste */
  .jalon[data-jalon="0"],
  .jalon[data-jalon="2"],
  .jalon[data-jalon="4"],
  .jalon[data-jalon="6"],
  .jalon[data-jalon="8"] {
    margin-right: calc(50% + var(--jalon-decalage));
    margin-left: auto;
    text-align: left;
  }

  /* Jalons impairs (1, 3, 5, 7) → côté droit de la piste */
  .jalon[data-jalon="1"],
  .jalon[data-jalon="3"],
  .jalon[data-jalon="5"],
  .jalon[data-jalon="7"] {
    margin-left: calc(50% + var(--jalon-decalage));
    margin-right: auto;
    text-align: left;
  }

  /* Le jalon Contribuer (9) se recentre (lien vers la page formulaire) */
  .jalon--contribuer,
  .jalon--page {
    margin: 0 auto !important;
    max-width: var(--largeur-contenu);
    text-align: left;
  }

  /* Trait de connexion entre le jalon et la piste/personnage,
     animé d'un scaleX(0) → scaleX(1) à l'entrée. */
  .jalon::before {
    content: "";
    position: absolute;
    top: 4.25rem;
    height: 1px;
    width: 2.25rem;
    background-color: var(--or);
    opacity: 0;
    transform: scaleX(0);
    transition:
      opacity 600ms cubic-bezier(0.4, 0, 0.2, 1),
      transform 800ms cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
  }

  .jalon[data-jalon="0"]::before,
  .jalon[data-jalon="2"]::before,
  .jalon[data-jalon="4"]::before,
  .jalon[data-jalon="6"]::before,
  .jalon[data-jalon="8"]::before {
    left: 100%;
    transform-origin: left center;
  }

  .jalon[data-jalon="1"]::before,
  .jalon[data-jalon="3"]::before,
  .jalon[data-jalon="5"]::before,
  .jalon[data-jalon="7"]::before {
    right: 100%;
    transform-origin: right center;
  }

  /* Pas de trait pour Contribuer (recentré) ni pour Accueil (entrée discrète) */
  .jalon--accueil::before,
  .jalon--contribuer::before,
  .jalon--page::before {
    content: none;
  }

  .jalon.is-visible::before {
    opacity: 0.55;
    transform: scaleX(1);
  }

  /* Animation d'entrée — translation latérale en plus de translateY,
     depuis le côté opposé à la piste. Les jalons ancrés à gauche
     (2, 4, 6, 8) entrent depuis la gauche ; ceux ancrés à droite
     (1, 3, 5, 7) entrent depuis la droite. Accueil (0) et
     Contribuer (9) restent en entrée discrète (translateY seul) :
     le premier est liminaire, le second recentré. */
  .jalon[data-jalon="2"],
  .jalon[data-jalon="4"],
  .jalon[data-jalon="6"],
  .jalon[data-jalon="8"] {
    transform: translate(-48px, 20px);
  }

  .jalon[data-jalon="1"],
  .jalon[data-jalon="3"],
  .jalon[data-jalon="5"],
  .jalon[data-jalon="7"] {
    transform: translate(48px, 20px);
  }

  .jalon[data-jalon="1"].is-visible,
  .jalon[data-jalon="2"].is-visible,
  .jalon[data-jalon="3"].is-visible,
  .jalon[data-jalon="4"].is-visible,
  .jalon[data-jalon="5"].is-visible,
  .jalon[data-jalon="6"].is-visible,
  .jalon[data-jalon="7"].is-visible,
  .jalon[data-jalon="8"].is-visible {
    transform: translate(0, 0);
  }
}

/* -------------------------------------------------------------
   Mobile — la piste se colle à droite de l'écran et l'escrimeur
   s'y tient. Le texte des jalons occupe la zone à gauche.
   Séparation claire texte/piste : plus de superposition avec
   l'escrimeur transparent derrière le texte.
   ------------------------------------------------------------- */

@media (max-width: 1023px) {
  :root {
    /* Piste plus étroite et plus discrète qu'avant : ~12-16 % de la
       largeur d'écran, bornée en pixels. Le but est de coller la
       piste au bord droit sans aspirer un quart de la largeur. */
    --piste-mobile-largeur: clamp(44px, 13vw, 88px);
    /* Respiration minimale entre le texte et la piste — tout l'espace
       gagné est rendu au contenu textuel à gauche. */
    --piste-mobile-marge: clamp(0.25rem, 1.2vw, 0.6rem);
  }

  /* Piste collée à droite, fine */
  .piste {
    left: auto;
    right: 0;
    transform: none;
    width: var(--piste-mobile-largeur);
  }

  /* Escrimeur (stage) posé sur la piste (côté droit), pleine
     opacité. Direction : tourné vers la gauche pour regarder le
     texte (la classe escrimeur--regarde-gauche n'est gérée par
     le JS qu'en desktop ; on impose ici le flip en CSS). */
  .escrimeur__stage {
    left: auto;
    right: calc(var(--piste-mobile-largeur) / 2 - 0.4rem);
    translate: 50% -50%;
    --escrimeur-flip: -1;
    opacity: 1;
  }

  /* Jalons : alignés à gauche, occupant le maximum d'espace possible,
     avec un padding-right juste suffisant pour ne pas passer sous
     la piste. Scopé via :has(.piste) — n'affecte pas les pages
     standalone (contribuer.html, merci.html, mentions.html). */
  main:has(.piste) .jalon {
    max-width: none;
    margin: 0;
    width: 100%;
    padding-right: calc(var(--piste-mobile-largeur) + var(--piste-mobile-marge));
    text-align: left;
  }
}