/* --------------------------------------------------------------- la charte
   Charte graphique Eau vive, version 1.0, septembre 2026.

   Six couleurs, chacune avec un rôle précis, et un dosage voulu :
   Rosée 50 %, Bleu profond 24 %, Bleu vive 15 %, Écume 8 %, Lumière 3 %.
   Un écran entièrement en Bleu vive n'est pas à la charte.
   ------------------------------------------------------------------------ */
:root {
  --violet-priere: #8e44ad;
  /* Le rose de l’affiche de la formation (#b28a7e, relevé sur le fichier),
     assombri pour qu’un point de 7 px se lise encore sur du blanc. */
  --rose-formation: #a0695a;
  /* Le site est clair : les ascenseurs et les champs natifs doivent
     l être aussi, même chez un visiteur dont le système est en sombre. */
  color-scheme: light;
  /* Les six couleurs, sous leur nom d'origine dans la charte. */
  --bleu-profond: #063b52;
  --bleu-vive: #1585ae;
  --ecume: #7ed1de;
  --lumiere: #e9b44c;
  --rosee: #f3f8f9;
  --ardoise: #24333a;

  /* Les rôles employés dans cette feuille de style. */
  --encre: var(--bleu-profond);
  --encre-douce: #4a6270;        /* 6,0 : 1 sur Rosée — texte secondaire */
  --papier: #fff;
  --fond: var(--rosee);
  --trait: #dce9ed;
  --trait-fort: #bcd4db;
  --marque: var(--bleu-vive);
  /* Le bleu de la marque sert A LA FOIS de fond de bouton et de couleur de
     texte. Sur fond sombre il ne peut pas faire les deux : en fond il doit
     rester celui de la charte, en texte il doit s’eclaircir. D’ou deux
     jetons. En clair, ils valent la meme chose. */
  --marque-texte: var(--bleu-vive);
  --marque-sombre: var(--bleu-profond);
  --marque-pale: #e4f2f5;

  /* La charte ne définit pas de couleur d'état. J'en garde une verte et une
     rouge : un message d'erreur doit se lire comme une erreur avant de se
     lire comme une marque. À confirmer avec l'association. */
  --succes: #0f6e5e;
  --succes-pale: #e6f4f1;
  --alerte: #9c3a22;
  --alerte-pale: #fbeeea;

  /* Deux familles, gratuites sur Google Fonts. Newsreader porte la voix,
     Karla porte l'information. */
  --titre: "Newsreader", Georgia, "Times New Roman", serif;
  --texte: "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.6;
}

.contenu { max-width: 940px; margin: 0 auto; padding: 0 1rem; }
.etroit { max-width: 420px; }
.moyen { max-width: 720px; }

/* -------------------------------------------------- bandeau et navigation */

.bandeau {
  background: var(--papier);
  border-bottom: 1px solid var(--trait);
  padding: 1rem 0;
}
.bandeau .contenu { display: flex; align-items: center; gap: 1rem; }
.marque {
  font-weight: 650;
  color: var(--encre);
  text-decoration: none;
  margin-right: auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bandeau nav { display: flex; align-items: center; gap: .35rem;
               flex: 0 0 auto; }
.bandeau nav a,
.bandeau nav button {
  font-size: .88rem;
  color: var(--encre-douce);
  text-decoration: none;
  padding: .4rem .7rem;
  border-radius: 8px;
  border: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.bandeau nav a:hover,
.bandeau nav button:hover { background: var(--fond); color: var(--encre); }
.bandeau nav form { display: inline; margin: 0; }

/* ------------------------------------------------------------------ titres */

h1 { font-size: 1.9rem; margin: 2rem 0 .5rem; letter-spacing: -.02em; }
h2 { font-size: 1.15rem; margin: 2.5rem 0 1rem; }
h3 { font-size: 1rem; margin: 0 0 .4rem; }
.introduction { color: var(--encre-douce); margin: 0 0 1.5rem; }

/* ------------------------------------------------------------------ le mur */

.onglets { display: flex; gap: .3rem; margin-bottom: 1.5rem; }
.onglets a {
  padding: .5rem 1rem;
  border-radius: 8px;
  text-decoration: none;
  color: var(--encre-douce);
  font-size: .92rem;
}
.onglets a.actif { background: var(--marque-pale); color: var(--marque-texte); }

.mur { display: grid; gap: 1rem; grid-template-columns: 1fr; }

.vignette {
  background: var(--papier);
  border: 1px solid var(--trait);
  border-radius: 12px;
  overflow: visible;
  display: flex;
  flex-direction: column;
}
a.vignette { text-decoration: none; color: inherit; }
a.vignette:hover { border-color: var(--trait-fort); }

.vignette .image {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--marque-pale), #f8fbfd);
  overflow: hidden;
  position: relative;
}
.vignette .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vignette .image .sans-affiche {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.vignette .image .date-bloc {
  background: var(--papier);
  border: 1px solid var(--trait);
  border-radius: 8px;
  padding: .5rem .9rem;
  text-align: center;
}
.vignette .image .jour {
  font-size: 1.7rem;
  font-weight: 650;
  line-height: 1;
  color: var(--encre);
}
.vignette .image .mois {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--encre-douce);
}

.vignette .corps {
  padding: 1rem 1.1rem 1.1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.vignette .quand {
  font-size: .8rem;
  font-weight: 600;
  color: var(--marque-texte);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.vignette h3 { margin: .3rem 0 .2rem; font-size: 1.05rem; }
.vignette .ou { color: var(--encre-douce); font-size: .9rem;
                margin: 0 0 .7rem; }
.vignette .pied {
  margin-top: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
}

.pastille {
  font-size: .73rem;
  padding: .2rem .55rem;
  border-radius: 999px;
  background: var(--marque-pale);
  color: var(--marque-texte);
  white-space: nowrap;
}
.pastille.brouillon { background: #fff4e0; color: #8a5200; }
.pastille.jauge { background: var(--succes-pale); color: var(--succes);
                  font-weight: 500; }
.pastille.complet { background: var(--alerte-pale); color: var(--alerte);
                    font-weight: 500; }

.calendrier-actions {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
}

.bouton-calendrier {
  border: 0;
  font-family: inherit;
  cursor: pointer;
}

.bouton-calendrier:hover {
  background: var(--marque);
  color: var(--papier);
}

.menu-calendrier {
  position: absolute;
  z-index: 1000;
  top: calc(100% + .35rem);
  left: 0;
  min-width: 190px;
  padding: .35rem;
  background: var(--papier);
  border: 1px solid var(--trait-fort);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(6, 59, 82, .12);
}

.menu-calendrier a {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: .55rem .7rem;
  border-radius: 7px;
  color: var(--encre);
  background: var(--papier);
  text-decoration: none;
  font-size: .82rem;
  white-space: nowrap;
}

.menu-calendrier a:hover {
  background: var(--marque-pale);
  color: var(--marque-texte);
}

.menu-calendrier a:hover {
  background: var(--marque-pale);
  color: var(--marque-texte);
}

.vide {
  background: var(--papier);
  border: 1px dashed var(--trait);
  border-radius: 12px;
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--encre-douce);
}
.vide p { margin: 0 0 .5rem; }

/* ---------------------------------------------------------------- la fiche */

.fiche { padding-bottom: 3rem; }

.retour {
  display: inline-block;
  font-size: .88rem;
  color: var(--encre-douce);
  text-decoration: none;
  margin-top: 1.5rem;
}
.retour:hover { color: var(--marque); }

.fiche-affiche {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--trait);
  background: var(--papier);
  margin: 1.5rem 0;
}
.fiche-affiche img { width: 100%; display: block; }
.fiche-affiche .pdf {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--encre-douce);
}

.reperes { display: grid; gap: .75rem; margin: 0 0 1.5rem; padding: 0;
           list-style: none; }
.reperes li { display: flex; gap: .75rem; align-items: flex-start; }
.reperes .etiquette {
  flex: 0 0 6.8rem;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--encre-douce);
  padding-top: .15rem;
}
.reperes .valeur { font-weight: 500; }

.bloc {
  background: var(--papier);
  border: 1px solid var(--trait);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.description { white-space: pre-line; margin: 0; }
.aide { font-size: .87rem; color: var(--encre-douce); margin: 0; }

/* ------------------------------------------------------ pont calendriers */

.autres-calendriers { display: flex; flex-wrap: wrap; gap: .5rem;
                      margin-top: .75rem; }
.autres-calendriers a {
  font-size: .85rem;
  color: var(--encre-douce);
  text-decoration: none;
  border: 1px solid var(--trait-fort);
  border-radius: 8px;
  padding: .35rem .7rem;
  background: var(--papier);
}
.autres-calendriers a:hover { color: var(--marque);
                              border-color: var(--marque); }

.adresse-flux {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .82rem;
  background: var(--fond);
  border: 1px solid var(--trait);
  border-radius: 8px;
  padding: .6rem .7rem;
  word-break: break-all;
  margin: .5rem 0 0;
}

/* ------------------------------------------------------------- formulaires */

.champ { margin-bottom: 1.1rem; }
.champ label {
  display: block;
  font-size: .89rem;
  font-weight: 500;
  margin-bottom: .35rem;
}
.champ .indication {
  font-size: .82rem;
  color: var(--encre-douce);
  font-weight: 400;
  margin-top: .2rem;
}
.champ input[type=text],
.champ input[type=password],
.champ input[type=datetime-local],
.champ input[type=number],
.champ input[type=file],
.champ textarea,
.champ select {
  width: 100%;
  padding: .65rem .75rem;
  border: 1px solid var(--trait-fort);
  border-radius: 8px;
  font-size: .95rem;
  font-family: inherit;
  background: var(--papier);
  color: var(--encre);
}
.champ textarea { min-height: 8rem; resize: vertical; line-height: 1.55; }
.champ input:focus,
.champ textarea:focus {
  outline: 2px solid var(--marque);
  outline-offset: 1px;
  border-color: var(--marque);
}
.champ.case { display: flex; gap: .6rem; align-items: flex-start; }
.champ.case input { margin-top: .3rem; flex: 0 0 auto; }
.champ.case label { font-weight: 400; margin: 0; font-size: .89rem; }

.duo { display: grid; gap: 1.1rem; }

/* Le champ piège doit être invisible mais rester dans le formulaire :
   « display: none » suffirait pour l'œil, mais certains robots ignorent
   les champs cachés de cette façon. On le sort de l'écran à la place. */
.piege { position: absolute; left: -9999px; }

/* ----------------------------------------------------------------- boutons */

.bouton,
button.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .7rem 1.2rem;
  border-radius: 8px;
  border: 1px solid var(--marque);
  background: var(--marque);
  color: #fff;
  text-decoration: none;
  font-size: .95rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
}
.bouton:hover { background: var(--marque-sombre);
                border-color: var(--marque-sombre); }
.bouton.secondaire { background: var(--papier); color: var(--marque-texte); }
.bouton.secondaire:hover { background: var(--marque-pale); }
.bouton.discret {
  background: var(--papier);
  color: var(--encre-douce);
  border-color: var(--trait-fort);
}
.bouton.discret:hover { background: var(--fond); color: var(--encre); }
.bouton.danger {
  background: var(--papier);
  color: var(--alerte);
  border-color: #e9c3bc;
}
.bouton.danger:hover { background: var(--alerte-pale); }
.bouton.large { width: 100%; }
.bouton.petit { padding: .4rem .75rem; font-size: .85rem; }

.rangee-boutons { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---------------------------------------------------------------- messages */

.messages { margin-top: 1rem; }
.message {
  padding: .75rem 1rem;
  border-radius: 8px;
  margin-bottom: .5rem;
  font-size: .92rem;
  border: 1px solid transparent;
}
.message.succes { background: var(--succes-pale); color: var(--succes);
                  border-color: #bfe3d7; }
.message.erreur { background: var(--alerte-pale); color: var(--alerte);
                  border-color: #eec8c1; }
.message.info   { background: var(--marque-pale); color: var(--marque-texte);
                  border-color: #c9dfee; }

/* ---------------------------------------------------------------- tableaux */

.tableau-enveloppe { overflow-x: auto; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
  background: var(--papier);
  border: 1px solid var(--trait);
  border-radius: 12px;
  overflow: hidden;
}
th, td {
  text-align: left;
  padding: .7rem .85rem;
  border-bottom: 1px solid var(--trait);
  vertical-align: middle;
}
th {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--encre-douce);
  background: var(--fond);
  font-weight: 600;
}
tr:last-child td { border-bottom: 0; }
td .titre-ligne { font-weight: 500; }
td .sous-ligne { font-size: .84rem; color: var(--encre-douce); }
.colonne-actions { text-align: right; white-space: nowrap; }

/* -------------------------------------------------------------------- pied */

.gros-code { font-size: 2rem; font-weight: 650; color: var(--encre);
             margin: 0 0 .5rem; }

.pied-page {
  border-top: 1px solid var(--trait);
  background: var(--papier);
  margin-top: 3rem;
  padding: 1.5rem 0;
  font-size: .85rem;
  color: var(--encre-douce);
}
.pied-page a { color: var(--encre-douce); }

/* ------------------------------------------------------------------ écrans */

@media (max-width: 560px) {
  .bandeau nav a,
  .bandeau nav button { font-size: .84rem; padding: .4rem .5rem; }
}

@media (min-width: 620px) {
  .mur { grid-template-columns: repeat(2, 1fr); }
  .duo { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) { .mur { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------- modération et statistiques */

.entete-proposition { display: flex; flex-wrap: wrap; gap: .35rem;
                      margin-bottom: 1rem; }

.brut { margin-bottom: 1.25rem; }
.brut summary {
  cursor: pointer;
  font-size: .85rem;
  color: var(--encre-douce);
  padding: .4rem 0;
}
.brut .description {
  background: var(--fond);
  border: 1px solid var(--trait);
  border-radius: 8px;
  padding: .75rem .9rem;
  font-size: .9rem;
  margin-top: .4rem;
}

.chiffres {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
}
.chiffre {
  background: var(--papier);
  border: 1px solid var(--trait);
  border-radius: 12px;
  padding: 1rem 1.1rem;
}
.chiffre .valeur {
  font-size: 1.6rem;
  font-weight: 650;
  line-height: 1.1;
  color: var(--marque-sombre);
}
.chiffre .quoi {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--encre-douce);
  margin-top: .2rem;
}

@media (min-width: 620px) {
  .chiffres { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  .chiffres { grid-template-columns: repeat(6, 1fr); }
}


/* ------------------------------------------------- la charte : typographie
   Ce bloc est placé en fin de fichier volontairement : il passe après les
   règles précédentes et prend donc le dessus par cascade, sans qu'on ait à
   récrire la feuille de style ligne par ligne.
   ------------------------------------------------------------------------ */

body {
  font-family: var(--texte);
  font-size: 17px;            /* texte courant : Karla 400, 17 px */
  line-height: 1.62;
}

/* La charte n'autorise que les graisses 300 et 400 pour Newsreader :
   « le gras alourdit la page ». */
h1, h2, h3, .marque {
  font-family: var(--titre);
  font-weight: 400;
  letter-spacing: -0.01em;
}
h1 { font-weight: 300; font-size: clamp(1.9rem, 5vw, 3rem); line-height: 1.04; }
h2 { font-size: 1.55rem; line-height: 1.12; color: var(--encre); }
h3 { font-size: 1.3rem; line-height: 1.22; }

.introduction { font-size: 1.1rem; line-height: 1.55; color: var(--encre-douce); }

/* 64 signes par ligne au maximum, comme le fixe la charte. Au-delà, l'œil
   perd la ligne suivante en revenant à la marge. */
main p, main li { max-width: 64ch; }

.marque { font-size: 1.2rem; }
.marque .surtitre {
  display: block;
  font-family: var(--texte);
  font-weight: 600;
  font-size: .66rem;
  letter-spacing: .14em;     /* approche +14 %, réservée au logo */
  text-transform: uppercase;
  color: var(--encre-douce);
}

/* Angles droits. La charte ne tolère d'arrondi que sur les extrémités des
   ondes du logo. */
.carte, .bloc, .tableau-enveloppe, .message, .vide, .encadre,
.bouton, .pastille, .chiffre, .entete-proposition, .brut {
  border-radius: 2px;
}

/* L'or ne va que sur fond sombre : 1,9 : 1 sur blanc, à proscrire même
   pour un titre. */
.pied-page { background: var(--bleu-profond); color: var(--ecume); }
.pied-page a { color: var(--lumiere); }
.pied-page .mention { color: #a9cad5; }

/* Une seule onde par visuel, en séparation — jamais sur du texte. */
.onde-separation {
  display: block;
  width: 100%;
  height: 26px;
  margin: 2rem 0;
  color: var(--ecume);
}

/* ------------------------------------------------- bandeau d'accueil photo
   La charte proscrit les dégradés de fond, les ombres portées et les
   effets de relief. Le voile est donc uni, et porte la couleur de la
   marque plutôt qu'un noir neutre. */

.accueil-photo {
  position: relative;
  min-height: 62vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  margin-bottom: 2.2rem;
}
.accueil-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}
.accueil-photo .voile {
  position: absolute;
  inset: 0;
  background: rgba(6, 59, 82, .72);   /* Bleu profond, à 72 % */
}

.texte-accueil { position: relative; padding: 3.2rem 20px 2.6rem; }

.surtitre-accueil {
  font-family: var(--texte);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ecume);
  margin: 0 0 .9rem;
}

/* Newsreader en graisse 300, la seule autorisée pour un grand titre.
   L'italique du second mot reprend celui du logo « Eau vive ». */
.titre-accueil {
  font-family: var(--titre);
  font-weight: 300;
  font-size: clamp(2.3rem, 8vw, 4rem);
  line-height: .96;
  color: #fff;
  margin: 0;
  max-width: none;
}
.titre-accueil .second { display: block; font-style: italic; }

.phrase-accueil {
  color: var(--ecume);
  margin: 1.1rem 0 0;
  max-width: 42ch;
  font-size: 1.05rem;
}

@media (max-width: 640px) {
  .accueil-photo { min-height: 56vh; }
  .texte-accueil { padding: 2.4rem 20px 2rem; }
}

/* ------------------------------------------------- bloc design : les vues
   La page s'ouvre directement sur les événements. Deux affichages du même
   contenu : la liste, et un calendrier mensuel. Le calendrier ne redéclare
   aucun événement — il lit ceux de la liste.
   ------------------------------------------------------------------------ */

/* L'attribut hidden doit l'emporter : .mur est en display:grid, ce qui
   annulerait le masquage par défaut du navigateur. */
[hidden] { display: none !important; }

.barre-vues {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1.5rem;
}
.barre-vues .onglets { margin-bottom: 0; }

.choix-vue { display: flex; gap: .3rem; }
.choix-vue button {
  font-family: inherit;
  font-size: .92rem;
  padding: .5rem 1rem;
  border: 1px solid var(--trait-fort);
  border-radius: 2px;
  background: var(--papier);
  color: var(--encre-douce);
  cursor: pointer;
}
.choix-vue button:hover { color: var(--encre); }
.choix-vue button.actif {
  background: var(--marque-pale);
  border-color: var(--marque);
  color: var(--marque-texte);
  font-weight: 600;
}

/* Le fond de l'événement occupe toute la vignette ; le bloc de date reste
   lisible par-dessus grâce à son fond blanc. */
.vignette .image { background: var(--bleu-profond); }
.vignette .image img { position: absolute; inset: 0; object-position: center 28%; }

/* ------------------------------------------------------ calendrier mensuel */

.calendrier {
  background: var(--papier);
  border: 1px solid var(--trait);
  border-radius: 2px;
  padding: 1.25rem;
}

.calendrier-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.calendrier-tete h2 {
  margin: 0;
  font-size: 1.35rem;
  text-transform: capitalize;
  text-align: center;
  flex: 1;
}
.fleche {
  font-family: inherit;
  font-size: 1.1rem;
  line-height: 1;
  padding: .45rem .8rem;
  border: 1px solid var(--trait-fort);
  border-radius: 2px;
  background: var(--papier);
  color: var(--encre-douce);
  cursor: pointer;
}
.fleche:hover { color: var(--marque); border-color: var(--marque); }

.calendrier-jours,
.calendrier-grille {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.calendrier-jours {
  margin-bottom: 6px;
  padding: .5rem 0;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--encre);
  text-align: center;
  background: var(--marque-pale);
  border-bottom: 2px solid var(--trait-fort);
  border-radius: 2px;
}

.calendrier-grille .case {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  border: 1px solid var(--trait);
  border-radius: 2px;
  background: var(--papier);
  color: var(--encre-douce);
  font-family: inherit;
  font-size: .95rem;
  padding: 0;
  transition: background .15s, border-color .15s;
}
.calendrier-grille .case.vide-case { border-color: transparent; background: none; }

.calendrier-grille button.case { cursor: pointer; }
.calendrier-grille .case.a-evenement {
  background: var(--marque-pale);
  border-color: var(--marque);
  border-left-width: 4px;
  color: var(--encre);
  font-weight: 700;
}
.calendrier-grille .case.a-evenement:hover { background: var(--ecume); color: var(--bleu-profond); }
.calendrier-grille .case.aujourdhui { border-width: 2px; border-color: var(--encre); }
.calendrier-grille .case.choisi,
.calendrier-grille .case.choisi:hover {
  background: var(--bleu-profond);
  border-color: var(--bleu-profond);
  color: #fff;
}
.case.choisi .points { color: var(--ecume); }

.calendrier-grille .case .points { font-size: .6rem; line-height: 1; letter-spacing: .1em; }

.calendrier-detail { margin-top: 1.25rem; }
.calendrier-liste { list-style: none; margin: 0; padding: 0; }
.calendrier-liste li {
  display: flex;
  flex-direction: column;
  padding: .7rem 0;
  border-bottom: 1px solid var(--trait);
}
.calendrier-liste li:last-child { border-bottom: 0; }
.calendrier-liste .quand {
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--marque-texte);
}
.calendrier-liste strong { font-family: var(--titre); font-weight: 400;
                           font-size: 1.15rem; }
.calendrier-liste .ou { font-size: .9rem; color: var(--encre-douce); }

@media (max-width: 560px) {
  .calendrier { padding: .9rem; }
  .case { font-size: .8rem; }
}

/* Un voile uni sur le fond de chaque vignette : les affiches ont des
   dominantes très différentes, le voile les ramène à la couleur de la
   marque et garde le bloc de date lisible par-dessus. */
.vignette .image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(6, 59, 82, .55);
}
.vignette .image .sans-affiche { z-index: 1; }
/* ---------------------------------------------------- fenêtre modale (Bloc 11)
   N'existait pas encore dans la charte. Angles droits (comme le reste),
   pas d'ombre portée ni de dégradé — cohérent avec la règle déjà en place
   plus haut dans ce fichier. Le fond assombri utilise le Bleu profond de
   la charte plutôt qu'un noir neutre, même logique que .voile. */

.modale-fond {
  position: fixed;
  inset: 0;
  background: rgba(6, 59, 82, .55);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 2.5rem 1rem;
  overflow-y: auto;
  z-index: 50;
}
.modale-fond.ouverte { display: flex; }

.modale {
  background: var(--papier);
  border: 1px solid var(--trait);
  max-width: 560px;
  width: 100%;
  padding: 1.5rem 1.75rem 1.75rem;
  position: relative;
}

.modale-fermer {
  position: absolute;
  top: .75rem;
  right: .75rem;
  width: 32px;
  height: 32px;
  border: 1px solid var(--trait-fort);
  background: var(--papier);
  color: var(--encre-douce);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.modale-fermer:hover { background: var(--fond); color: var(--encre); }

.modale, .modale-fermer { border-radius: 2px; }

@media (max-width: 560px) {
  .modale-fond { padding: 0; align-items: flex-end; }
  .modale { max-width: none; max-height: 92vh; overflow-y: auto; }
}

/* ------------------------------------------------------------------ mobile
   Sous 560px, l'en-tete manque de place : « .marque » etant en nowrap +
   overflow:hidden, le nom du site etait tronque au lieu de passer a la
   ligne. On laisse donc le bandeau se replier en deux rangees. */
@media (max-width: 560px) {
  .bandeau .contenu { flex-wrap: wrap; gap: .55rem 1rem; }
  .marque {
    flex: 1 1 100%;
    margin-right: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .bandeau nav { width: 100%; gap: .1rem; margin-left: -.55rem; }
  .bandeau nav a,
  .bandeau nav button { padding: .4rem .55rem; }
}

/* Cibles tactiles. Au doigt, un lien de 32px de haut se rate souvent ; la
   recommandation WCAG est de 44px. On ne touche qu au petit ecran : sur
   desktop la souris est precise et des boutons hauts alourdiraient la page. */
@media (max-width: 560px) {
  .bandeau nav a,
  .bandeau nav button,
  .onglets a,
  .choix-vue button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .onglets { gap: .5rem; }
  .choix-vue { gap: .5rem; }
}

/* Correctif : .reperes définit display:grid, ce qui l'emportait sur
   l'attribut hidden. Règle générale en toute fin de fichier. */
[hidden] { display: none !important; }

/* Calendrier : version plus expressive */
.calendrier-jours {
  background: var(--bleu-profond);
  color: #fff;
  border-bottom: 0;
}
button.case:hover {
  background: var(--marque);
  border-color: var(--marque);
  color: #fff;
}
.case.a-evenement {
  background: var(--marque-pale);
  border-color: var(--marque);
  border-left-width: 5px;
  color: var(--encre);
}
.case.a-evenement .points { color: #b8812a; }
.case.a-evenement:hover { background: var(--marque); color: #fff; }
.case.a-evenement:hover .points { color: var(--lumiere); }
.case.aujourdhui {
  background: var(--lumiere);
  border-color: var(--lumiere);
  color: var(--bleu-profond);
  font-weight: 700;
}
.case.choisi .points { color: var(--lumiere); }

/* Calendrier : version audacieuse */
.calendrier-jours {
  background: var(--bleu-profond);
  color: var(--lumiere);
  font-weight: 700;
  letter-spacing: .16em;
  padding: .7rem 0;
}
.calendrier-grille .case {
  font-family: var(--titre);
  font-size: 1.25rem;
  background: var(--papier);
  border: 1px solid var(--trait-fort);
}
button.case:hover {
  background: var(--ecume);
  border-color: var(--marque);
  color: var(--bleu-profond);
}

/* Thème sombre */
:root[data-theme="dark"] {
  color-scheme: dark;
  --fond: #0a1b24;
  --papier: #102a36;
  --encre: #eaf4f7;
  --encre-douce: #a9c3cf;
  --trait: #1d3d4b;
  --trait-fort: #2c5568;
  --marque-pale: #12384a;
  /* 5,7 : 1 sur Marque pale, 6,8 : 1 sur Papier — mesure, pas estime. */
  --marque-texte: #5ab9dd;
}
.bouton-theme {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 50;
  padding: .6rem 1rem;
  border: 2px solid var(--lumiere);
  /* 8 px, comme tous les boutons de la page. Il flottait a 2 px, seul de
     son espece dans un coin de l'ecran. */
  border-radius: 8px;
  background: var(--bleu-profond);
  color: #fff;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
}
.bouton-theme:hover { background: var(--lumiere); color: var(--bleu-profond); }

/* Bandeau : version audacieuse */
header.bandeau {
  background: var(--bleu-profond);
  border-bottom: 4px solid var(--lumiere);
}
header.bandeau .marque {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  font-family: var(--titre);
  font-size: 1.7rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
}
header.bandeau .surtitre {
  display: block;
  font-family: var(--texte);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--lumiere);
}
header.bandeau nav a { color: var(--ecume); font-weight: 600; }
header.bandeau nav a:hover { color: var(--lumiere); }
.logo-bandeau { height: 52px; width: auto; }
header.bandeau .nom { display: flex; flex-direction: column; line-height: 1.1; }
header.bandeau .surtitre { margin: .3rem 0 0; }

/* Nouvelles polices */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}
:root {
  --titre: "Fraunces", Georgia, "Times New Roman", serif;
  --texte: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Pied de page : vagues */
.pied-page { position: relative; background: var(--bleu-profond); }
.onde-separation { display: none; }
.vagues {
  position: absolute;
  left: 0;
  right: 0;
  top: -58px;
  height: 60px;
  overflow: hidden;
  pointer-events: none;
}
.vagues .v {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 200%;
  height: 100%;
  animation: houle 30s linear infinite;
}
.vagues .v1 { fill: var(--ecume); opacity: .45; animation-duration: 34s; }
.vagues .v2 { fill: var(--marque); opacity: .7; animation-duration: 24s; animation-direction: reverse; }
.vagues .v3 { fill: var(--bleu-profond); animation-duration: 40s; }
@keyframes houle {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .vagues .v { animation: none; }
}

/* ------------------------------------------------ pop-up d'inscription : design modernisé
   Retour de l'encadreur : bords arrondis, design plus actuel, ligne de
   consentement alignée sur la largeur du bouton. Ce bloc vient APRÈS le
   bloc "fenêtre modale" plus haut et le remplace visuellement (mêmes
   sélecteurs, dernier déclaré = gagnant). Limité à .modale : le reste du
   site garde ses angles droits (charte v1.0). */

.modale-fond {
  background: rgba(6, 59, 82, .6);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.modale {
  max-width: 520px;
  padding: 2rem 2rem 1.75rem;
  border: 0;
  border-radius: 16px;
}

.modale-fond.ouverte .modale { animation: modale-entree .2s ease-out; }
@keyframes modale-entree {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .modale-fond.ouverte .modale { animation: none; }
}

.modale-fermer {
  top: 1rem;
  right: 1rem;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--fond);
  font-size: .95rem;
  transition: background .15s ease;
}
.modale-fermer:hover { background: var(--marque-pale); color: var(--marque-sombre); }

.modale h2 { font-size: 1.7rem; line-height: 1.15; margin: .25rem 2.5rem 1rem 0; }
.modale h3 { font-size: 1.05rem; margin: 0 0 1rem; }
.modale .description { color: var(--encre-douce); margin: 0 0 1.25rem; }

/* Blocs internes : plus de "boîte dans la boîte" */
.modale .bloc {
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0 0 1.25rem;
  background: transparent;
}
.modale #m-calendriers-bloc {
  background: var(--fond);
  border-radius: 12px;
  padding: 1rem 1.1rem;
}
.modale #m-calendriers-bloc h3 { margin-bottom: .6rem; }
.modale .autres-calendriers a { border-radius: 999px; padding: .4rem .9rem; }
.modale .pastille { border-radius: 999px; }

/* Champs */
.modale .champ { margin-bottom: 1rem; }
.modale .champ:not(.case) label { font-size: .9rem; font-weight: 600; margin-bottom: .4rem; }
.modale .champ input[type=text] {
  padding: .8rem .95rem;
  border: 1px solid var(--trait-fort);
  border-radius: 10px;
  font-size: 1rem;
  transition: border-color .15s ease;
}
.modale .champ input[type=text]:focus {
  outline: 3px solid var(--marque-pale);
  outline-offset: 0;
  border-color: var(--marque);
}

/* Ligne de consentement : même largeur que le bouton, texte en face de la case */
.modale .champ.case {
  display: flex;
  align-items: center;
  gap: .8rem;
  width: 100%;
  padding: .85rem 1rem;
  background: var(--fond);
  border: 1px solid var(--trait);
  border-radius: 12px;
}
.modale .champ.case:focus-within { border-color: var(--marque); }
.modale .champ.case input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--marque);
  cursor: pointer;
}
.modale .champ.case label {
  flex: 1;
  margin: 0;
  font-size: .88rem;
  font-weight: 400;
  line-height: 1.4;
  cursor: pointer;
}

/* Messages et bouton */
.modale .messages { margin-top: 0; }
.modale .message { border-radius: 12px; margin-bottom: 1rem; }
.modale .bouton { border-radius: 10px; transition: background .15s ease, border-color .15s ease; }
.modale .bouton.large { padding: .9rem 1.2rem; font-size: 1rem; }

@media (max-width: 560px) {
  .modale { border-radius: 16px 16px 0 0; padding: 1.5rem 1.25rem; }
  .modale h2 { font-size: 1.5rem; }
}

/* Retour encadreur : marge insuffisante entre la section calendrier et le
   paragraphe d'introduction, repositionné en bas de page. */
.introduction { margin-top: 2rem; }

/* Le nom des intervenants, ou la façon de s'inscrire : une ligne discrète
   sous le lieu, dans la même famille que « .ou » pour ne pas créer un
   deuxième niveau de lecture. */
.vignette .avec {
  margin: .15rem 0 0;
  font-size: .9rem;
  color: var(--encre-douce);
}
.vignette .avec a { color: inherit; text-decoration: underline; }

/* Quand un onglet ne contient rien, on le dit. Une liste vide et muette
   ressemble à une page cassée. */
.liste-vide {
  grid-column: 1 / -1;
  margin: 1.5rem 0;
  text-align: center;
  color: var(--encre-douce);
}

/* ---------------------------------------------------------------------------
   Des cartes de même hauteur, et un pied toujours en bas

   Les cartes n'ont pas toutes le même nombre de pastilles : sans rien, leur
   pied flotte à des hauteurs différentes sur une même rangée, et l'œil ne
   trouve plus la ligne des boutons. On pousse donc le pied vers le bas, et
   on laisse la grille étirer les cartes à la hauteur de la plus haute.
--------------------------------------------------------------------------- */
.mur { align-items: stretch; }
.vignette .pied { margin-top: auto; padding-top: .6rem; }

/* Le téléchargement du .ics tenait sur une ligne entière (« Télécharger
   (.ics) ») à côté d'un bouton « + Calendrier » qui dit déjà la même chose.
   Une icône suffit : le texte reste accessible par title et aria-label, donc
   rien n'est perdu pour qui navigue au lecteur d'écran ou survole. */
.pastille-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  text-decoration: none;
}
.pastille-icone svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Le rappel « vous participez en tant que… » : discret, au-dessus du
   formulaire pré-rempli. Il n'ajoute pas un écran, il évite d'en lire un. */
.connu {
  background: var(--marque-pale, #eef6fa);
  border: 1px solid var(--trait, #d8e3e8);
  border-radius: 10px;
  padding: .7rem .9rem;
  margin-bottom: .9rem;
}
.connu p { margin: 0 0 .35rem; font-size: .95rem; }
.lien-discret {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: .85rem;
  color: var(--encre-douce);
  text-decoration: underline;
  cursor: pointer;
}
.lien-discret:hover { color: var(--marque, #1585ae); }

/* Le pied d'une carte tient sur UNE ligne. Il portait jusqu'à quatre éléments
   (thème, jauge, calendrier, participer) et passait à la ligne sur les cartes
   les plus chargées : les boutons « Participer » ne s'alignaient plus d'une
   carte à l'autre, et l'œil ne trouvait plus la ligne d'action.

   Le thème est le seul élément qui peut céder : il se réduit, puis disparaît
   si la place manque vraiment. Le téléchargement et « Participer » ne cèdent
   jamais — ce sont les deux gestes qu'on vient faire. */
.vignette .pied { flex-wrap: nowrap; }

/* Le thème (« Culte », « Louange »…) ne tenait pas sur la ligne sans se
   tronquer en « Louan… », ce qui n'apprend rien. Il disparaît du pied : le
   titre, la photo et la date disent déjà de quoi il s'agit, et la ligne
   d'action reste lisible et alignée d'une carte à l'autre. Il est conservé
   dans data-theme, que la vue calendrier utilise. */
.vignette .pied > .pastille:not(.pastille-icone) { display: none; }
.vignette .pied .pastille-icone,
.vignette .pied .bouton { flex: 0 0 auto; }
.vignette .pied .calendrier-actions { flex: 0 1 auto; min-width: 0; display: flex; gap: .35rem; }

@media (max-width: 420px) {
  .vignette .pied > .pastille:first-child { display: none; }
}

/* L'heure sous le jour et le mois : quand cinq rendez-vous tombent le même
   dimanche, c'est la seule chose qui les distingue dans le cartouche. */
.vignette .date-bloc .heure {
  margin-top: .15rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  opacity: .85;
}

/* ===========================================================================
   À l'affiche

   Une bande de grandes cartes au format des affiches (2/3), avant la liste
   des événements. Les affiches sont faites pour être regardées en entier :
   on leur donne donc de la hauteur, là où les vignettes de la liste les
   recadrent en 16/9 et en perdent le texte.
   =========================================================================== */
/* La section ouvre la page : elle a besoin d'air sous le bandeau, sinon le
   titre vient s'y coller. */
/* De l'air autour des titres : ils se tenaient serrés contre leur sous-titre
   et contre ce qui suit. Rien de spectaculaire, juste de quoi poser le regard
   avant d'entrer dans les cartes. */
.a-laffiche { margin: 2.7rem 0 2.9rem; }

/* Le titre à gauche, l'invitation à déposer ses souvenirs à l'autre bout de la
   même ligne — y compris sur téléphone. Tenir la ligne sous 375 px demande que
   l'étiquette se raccourcisse au lieu de passer dessous : trois mots, puis un,
   puis l'icône seule. Le nom complet reste donné aux lecteurs d'écran dans les
   trois cas, par le titre du lien. */
.a-laffiche-entete {
  display: flex;
  /* Calé sur la LIGNE DU TITRE, pas au milieu du bloc : le sous-titre passe
     sur deux lignes dès le téléphone, et un bouton centré sur l'ensemble
     descendait alors à hauteur du texte gris. */
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1.5rem;
}
.a-laffiche-intro { min-width: 0; }

.bouton-souvenirs {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .5rem;
  padding: .46rem .85rem .46rem .62rem;
  border-radius: 999px;
  /* Un fond presque blanc sur un fond presque blanc : c'est le trait et
     l'ombre portée qui détachent le bouton, pas un aplat de couleur. */
  background: var(--papier, #fff);
  border: 1px solid var(--trait, #dce9ed);
  box-shadow: 0 1px 2px rgba(10, 27, 36, .05), 0 4px 12px -6px rgba(10, 27, 36, .18);
  color: var(--encre, #063b52);
  font-size: .85rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.bouton-souvenirs:hover,
.bouton-souvenirs:focus-visible {
  transform: translateY(-1px);
  border-color: var(--trait-fort, #bcd4db);
  box-shadow: 0 2px 4px rgba(10, 27, 36, .07), 0 10px 20px -8px rgba(10, 27, 36, .25);
}
.bouton-souvenirs:active { transform: translateY(0); }

.ic-souvenirs {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  /* currentColor sert la photo du dessous, laissée en retrait : le dégradé,
     le soleil doré et l'étincelle violette portent la couleur. */
  color: var(--encre, #063b52);
}
.bouton-souvenirs .etiquette { display: inline-flex; }

@media (max-width: 560px) {
  .bouton-souvenirs .mot-long { display: none; }
  .bouton-souvenirs .mot-court { text-transform: capitalize; }
}
@media (max-width: 330px) {
  /* Plus de place pour un mot : l'icône tient seule, le bouton devient rond.
     Mesuré : à 375 px le mot passe encore largement, le seuil est donc bas. */
  .bouton-souvenirs .etiquette { display: none; }
  .bouton-souvenirs { padding: .46rem; }
}

@media (prefers-reduced-motion: reduce) {
  .bouton-souvenirs { transition: none; }
  .bouton-souvenirs:hover,
  .bouton-souvenirs:focus-visible { transform: none; }
}
/* h1 est déclaré en font-weight 300 plus haut, h2 hérite de 400 : « À
   l'affiche » paraissait maigre à côté de « Les événements ». Les deux titres
   de section portent donc le même poids, écrit noir sur blanc.

   La police des titres lie « ffi » en une seule glyphe : dans « affiche », le
   résultat se lit mal et attire l'œil pour de mauvaises raisons. On coupe les
   ligatures sur ces titres — elles n'apportent rien sur deux mots. */
/* LA POLICE DE CES DEUX TITRES. Dans Fraunces, deux « f » accolés se
   chevauchent : « affiche » formait une masse illisible. Ce n'est pas une
   ligature — elles sont coupées plus bas, et l'axe WONK, qui donne à cette
   police ses formes excentriques, n'existe même pas dans le fichier chargé
   (fraunces-latin-wght-normal, poids seul). C'est le dessin des « f » lui-même.
   Desserrer les lettres n'y change presque rien : comparé côte à côte, seul
   un autre dessin sépare vraiment les deux jambages.

   Newsreader est déjà chargée par le site — elle était la police de titre
   avant Fraunces — et rend « affiche » net. On s'en sert pour ces deux
   titres ; le reste du site garde Fraunces. */
.a-laffiche-entete h1,
.titre-evenements {
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  /* 500 : entre le regular, qui paraissait maigre, et le 600, qui chargeait
     trop le haut de page. La police est demandée en plage (voir l'URL des
     polices), donc ce poids existe vraiment — un gras absent serait épaissi
     par le navigateur, ce qui donne des lettres pâteuses. */
  font-weight: 500;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
  letter-spacing: -.01em;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "dlig" 0, "clig" 0;
}
.a-laffiche-entete h1 { margin: 0; }
.a-laffiche-entete p {
  margin: .6rem 0 0;
  color: var(--encre-douce);
  font-size: .95rem;
}

/* Le rail défile à toutes les largeurs : il y a cinq cartes aujourd'hui, et
   la section est faite pour en accueillir d'autres. Le scroll-snap fait qu'on
   s'arrête toujours sur une affiche entière, jamais entre deux. */
.a-laffiche-piste { position: relative; }

.a-laffiche-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(210px, calc(28% - .75rem));
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: .2rem .2rem .6rem;
  /* La barre du navigateur sous les affiches ferait un trait gris en travers
     de la section : on la retire, les flèches et le glissement suffisent. */
  scrollbar-width: none;
}
.a-laffiche-rail::-webkit-scrollbar { display: none; }
.affiche-carte { scroll-snap-align: start; }

/* Les flèches : posées sur les bords, discrètes au repos, franches au survol.
   Elles disparaissent quand il n'y a plus rien de ce côté — une flèche qui ne
   fait rien apprend au visiteur à ne plus cliquer. */
.affiche-fleche {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--trait, #d8e3e8);
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px -8px rgba(10, 27, 36, .5);
  cursor: pointer;
  transition: opacity .2s ease, transform .2s ease, background .2s ease;
}
.affiche-fleche.avant { left: -.6rem; }
.affiche-fleche.apres { right: -.6rem; }
.affiche-fleche svg {
  width: 1.1rem; height: 1.1rem;
  fill: none; stroke: var(--bleu-profond, #0a1b24);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.affiche-fleche:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.affiche-fleche:focus-visible { outline: 3px solid var(--marque, #1585ae); outline-offset: 2px; }
.affiche-fleche[hidden] { display: none; }

@media (max-width: 980px) {
  .a-laffiche-rail { grid-auto-columns: minmax(210px, 46%); }
  /* Sur un écran étroit, on fait défiler du doigt : les flèches prendraient
     la place d'une affiche. */
  .affiche-fleche { display: none; }
}
@media (max-width: 520px) {
  .a-laffiche-rail { grid-auto-columns: minmax(200px, 72%); }
}

/* La carte d'écoute suit le même traitement que celle du document — une
   carte qu'on lit, pas une affiche qu'on regarde — mais dans le rouge de la
   plateforme, pour qu'on sache où le lien mène avant de cliquer. */
.affiche-ecoute > img { opacity: .18; filter: saturate(.2); }
.affiche-ecoute .affiche-voile {
  background: linear-gradient(160deg,
              rgba(204, 0, 0, .92) 0%,
              rgba(90, 10, 14, .96) 70%);
}
.affiche-ecoute .affiche-texte { inset: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.affiche-ecoute .bouton {
  background: #cc0000;
  border-color: #cc0000;
  color: #fff;
}
.affiche-ecoute .bouton:hover { background: #b00000; border-color: #b00000; }

.affiche-carte {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: 18px;
  overflow: hidden;
  background: var(--bleu-profond, #0a1b24);
  box-shadow: 0 1px 2px rgba(10, 27, 36, .06), 0 10px 28px -12px rgba(10, 27, 36, .35);
  transition: transform .25s ease, box-shadow .25s ease;
}
.affiche-carte:hover,
.affiche-carte:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(10, 27, 36, .08), 0 18px 40px -14px rgba(10, 27, 36, .45);
}
/* Les affiches remplissent leur carte. Elles n'ont pas toutes le même format
   (2/3, 4/5, carré) : les afficher en entier laissait des bandes vides et
   trois cartes qui ne se ressemblaient pas. On cadre donc par le haut — c'est
   là que vit le visuel — et le bandeau du bas rend la coupe invisible. */
.affiche-carte > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
/* Le document, lui, est recadré : sa page est un mur de texte dont seul le
   haut sert de fond. */
.affiche-document > img { object-fit: cover; object-position: center top; }

/* Le voile : sans lui, le texte posé sur une affiche claire devient
   illisible, et on ne peut pas savoir à l'avance ce que portera l'affiche
   suivante. */
.affiche-voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
              rgba(8, 22, 30, .92) 0%,
              rgba(8, 22, 30, .78) 22%,
              rgba(8, 22, 30, .18) 48%,
              rgba(8, 22, 30, 0) 68%);
}

.affiche-texte {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1rem 1.05rem 1.1rem;
  color: #fff;
}
.affiche-quand {
  display: inline-block;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .9;
}
.affiche-texte h3 {
  margin: .25rem 0 .2rem;
  font-family: var(--titre);
  font-size: 1.12rem;
  line-height: 1.25;
}
.affiche-texte p {
  margin: 0;
  font-size: .84rem;
  opacity: .88;
  line-height: 1.35;
}
.affiche-texte .bouton { margin-top: .7rem; }

/* Toute la carte est cliquable, mais le bouton reste un vrai bouton : au
   clavier il se trouve, et un lecteur d'écran annonce ce qu'il fait. */
.affiche-lien {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.affiche-lien:focus-visible {
  outline: 3px solid var(--marque, #1585ae);
  outline-offset: -3px;
}

/* Le document n'est pas une affiche : sa première page est un mur de texte.
   On la garde en fond, très en retrait, pour qu'on voie qu'il s'agit d'un
   document — et le titre fait le reste. */
.affiche-document > img { opacity: .18; filter: saturate(.2); }
.affiche-document .affiche-voile {
  background: linear-gradient(160deg,
              rgba(21, 133, 174, .92) 0%,
              rgba(10, 27, 36, .96) 65%);
}
.affiche-document .affiche-texte { inset: 0; display: flex; flex-direction: column; justify-content: flex-end; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* ===========================================================================
   Calendrier : un code couleur par type de rendez-vous

   Les points étaient tous de la même couleur : un dimanche à trois points
   disait « trois choses », sans dire lesquelles. Une couleur par thème, et
   une légende sous la grille, suffisent à lire le mois d'un coup d'œil.

   Les teintes sont choisies pour rester distinctes à 7 px de diamètre et
   lisibles sur fond clair comme sur fond sombre. Un point garde un liseré
   clair pour ne pas disparaître quand la case passe en bleu plein au survol.
   =========================================================================== */
.calendrier-grille .case .points {
  display: flex;
  justify-content: center;
  gap: 3px;
  margin-top: 3px;
  line-height: 1;
}
.pt {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pt, #b8812a);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .55);
}

/* Une couleur par thème. Le nom de la classe vient du thème écrit dans la
   page : ajouter un thème inconnu donne la teinte par défaut, pas une erreur. */
.t-culte        { --pt: #1585ae; }  /* célébration */
/* L'étude biblique porte déjà un liseré doré sur sa carte et dans la grille
   du mois : son point prend le MÊME doré, celui de la charte, pour qu'on lise
   une seule couleur et non deux voisines. La louange reprend en échange
   l'indigo que l'étude portait — les deux thèmes sont simplement permutés. */
.t-etude        { --pt: var(--lumiere, #e9b44c); }  /* étude biblique */
.t-priere       { --pt: var(--violet-priere); }  /* intercession */
.t-repas        { --pt: #1e8e5a; }  /* repas partagé */
.t-louange      { --pt: #6257b5; }  /* soirée de louange */
.t-bapteme      { --pt: #17a2b8; }  /* baptême */
.t-prophetique  { --pt: #a4418f; }  /* week-end prophétique */
.t-mission-a-l-etranger { --pt: #d2691e; }  /* mission à l'étranger */
.t-formation    { --pt: var(--rose-formation); }  /* formation */

.calendrier-legende {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .95rem;
  margin-top: .9rem;
  padding-top: .8rem;
  border-top: 1px solid var(--trait, #d8e3e8);
  font-size: .82rem;
  color: var(--encre-douce);
}
.legende-item { display: inline-flex; align-items: center; gap: .4rem; }

/* « Les événements » introduit la liste et le calendrier : il se place juste
   au-dessus des onglets, pas en tête de page — la page s'ouvre sur ce qui est
   à l'affiche. */
.titre-evenements { margin: 0 0 1.3rem; }

/* Un bandeau court au pied de l'affiche : une clé, pas une fiche. Le dégradé
   ne monte qu'au tiers inférieur — assez pour asseoir le texte et masquer la
   coupe, pas assez pour étouffer l'affiche. */
.affiche-bandeau {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.5rem .9rem .7rem;
  color: #fff;
  background: linear-gradient(to top,
              rgba(8, 22, 30, .9) 0%,
              rgba(8, 22, 30, .55) 55%,
              rgba(8, 22, 30, 0) 100%);
  pointer-events: none;
}
.affiche-bandeau strong {
  display: block;
  font-family: var(--titre);
  font-size: .96rem;
  font-weight: 600;
  line-height: 1.2;
}
.affiche-bandeau span {
  display: block;
  margin-top: .08rem;
  font-size: .74rem;
  opacity: .88;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Le contenu arrivait au ras des vagues du pied de page : la dernière ligne
   semblait tomber dedans. On laisse respirer avant la bascule. */
main > .contenu { padding-bottom: 2.5rem; }
.pied-page { margin-top: 1.5rem; }

/* L'affiche la plus large est rognée de 17 % par la carte. Un cadrage centré
   mange autant à gauche qu'à droite — or son titre est à gauche. On cale à
   gauche : ce qui disparaît est le bord de la bande de photos. */
.affiche-carte > img.cadre-gauche { object-position: left top; }

/* Les deux cartes qui ne sont pas des affiches avaient un grand vide au-dessus
   de leur texte. Une icône dessinée pour chacune dit de quoi il s'agit avant
   même qu'on lise — une feuille pour le document, une note pour l'écoute. */
.affiche-icone {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: .9rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .92;
}
.affiche-document .affiche-texte,
.affiche-ecoute .affiche-texte { justify-content: flex-end; }

/* L'étude biblique revient chaque mardi : un liseré doré sur le bord droit la
   fait repérer d'un coup d'œil dans une liste où les dimanches dominent. On
   reprend le doré du site plutôt qu'une teinte de plus, et on le pose en
   bordure intérieure pour ne pas déformer la carte ni rompre l'alignement
   de la grille. */
.vignette[data-theme="Étude"] {
  box-shadow: inset -4px 0 0 0 var(--lumiere, #e9b44c);
}

/* L'intercession, chaque vendredi, porte son liseré à GAUCHE — l'étude a le
   sien à droite. Deux rendez-vous réguliers, deux bords : on les distingue
   sans lire. */
.vignette[data-theme="Prière"] {
  box-shadow: inset 4px 0 0 0 var(--violet-priere);
}

/* LA FORMATION N'EST PAS UN RENDEZ-VOUS COMME LES AUTRES : elle n'arrive
   qu'une fois, elle dure deux jours, elle se paie. Un liséré sur un bord la
   rangerait avec l'étude et l'intercession, qui reviennent chaque semaine.
   Elle porte donc le seul ENCADRÉ COMPLET de la liste, dans le rose de son
   affiche : on la repère sans lire, et on ne la confond avec rien. */
.vignette[data-theme="Formation"] {
  box-shadow: inset 0 0 0 2px var(--rose-formation);
}
.vignette[data-theme="Formation"] .pastille {
  background: #f6ece8;
  color: var(--rose-formation);
}

/* L'étude biblique revient chaque mardi. Dans la grille du mois, sa case
   portait la même bande bleue que toutes les autres : on la passe au doré du
   site, le même que sur sa carte dans la liste. La bande existe déjà — on en
   change seulement la couleur, donc rien ne bouge dans la grille.

   Le sélecteur est doublé pour passer devant « .calendrier-grille
   .case.a-evenement », qui pose la couleur de bordure pour toutes les cases. */
.calendrier-grille .case.a-evenement.a-etude,
.calendrier-grille .case.a-evenement.a-etude:hover {
  border-left-color: var(--lumiere, #e9b44c);
}
/* Sur une case choisie, le fond devient bleu profond : la couleur doit rester
   visible, sinon la marque disparaît au moment où l'on clique dessus. */
.calendrier-grille .case.choisi.a-etude,
.calendrier-grille .case.choisi.a-etude:hover {
  border-left-color: var(--lumiere, #e9b44c);
}
.calendrier-grille .case.a-evenement.a-priere,
.calendrier-grille .case.a-evenement.a-priere:hover,
.calendrier-grille .case.choisi.a-priere,
.calendrier-grille .case.choisi.a-priere:hover {
  border-left-color: var(--violet-priere);
}

/* La formation n'arrive qu'une fois : sa case porte le rose de son affiche,
   et le seul encadré complet de la grille. Les rendez-vous qui reviennent se
   distinguent par une bande ; celui qui ne revient pas se distingue par le
   fait d'être entouré. */
.calendrier-grille .case.a-evenement.a-formation,
.calendrier-grille .case.a-evenement.a-formation:hover,
.calendrier-grille .case.choisi.a-formation,
.calendrier-grille .case.choisi.a-formation:hover {
  border-left-color: var(--rose-formation);
  box-shadow: inset 0 0 0 1px var(--rose-formation);
}

/* La carte de la prédication porte une affiche, pas un aplat : on la laisse
   se voir, et le bandeau reste assez bas pour ne pas couvrir son titre. Le
   voile est un peu plus présent que sur les autres affiches parce qu'il doit
   porter un bouton, qui a besoin de contraste pour rester cliquable à l'œil. */
/* Cette affiche-ci porte son texte jusqu'en bas (le titre, puis le nom du
   pasteur) : poser le nôtre dessus donnait deux textes l'un sur l'autre, quel
   que soit le réglage du voile. On ne superpose donc pas — l'affiche occupe le
   haut, notre message et le bouton vivent dans une bande à part, en dessous.
   Chacun reste lisible. */
.affiche-video > img { height: 84%; object-position: center top; }
.affiche-video .affiche-voile { display: none; }
.affiche-video .affiche-texte {
  inset: auto 0 0 0;
  height: 16%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .35rem;
  padding: .55rem 1.05rem 1.1rem;
  background: var(--bleu-profond, #0a1b24);
}
.affiche-video .affiche-texte p { font-size: .78rem; margin: 0; line-height: 1.3; }
/* Pas d'align-self ici : le bouton doit s'étirer comme sur les autres
   cartes, sinon la rangée perd sa ligne de boutons. */

/* ===========================================================================
   La barre de vues : deux sélecteurs, une seule ligne

   Elle cassait en deux lignes sur téléphone — « flex-wrap: wrap » le permet,
   et les deux groupes réunis dépassent la largeur d'un écran étroit. Elle ne
   casse plus : les libellés rétrécissent, la barre tient.

   Les deux groupes n'avaient pas le même dessin non plus : les onglets étaient
   arrondis à 8 px, les boutons de vue à 2 px, et seuls les seconds portaient
   une bordure. Ils font maintenant le même objet — un rail clair, et la
   pastille active qui s'en détache en blanc. C'est aussi ce que les gens
   connaissent de leur téléphone, donc ce qu'ils comprennent sans l'apprendre.
   =========================================================================== */
.barre-vues {
  flex-wrap: nowrap;
  gap: .5rem;
  margin-bottom: 1.4rem;
}

.barre-vues .onglets,
.barre-vues .choix-vue {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 2px;
  padding: 3px;
  margin: 0;
  /* Un bleu très pâle, pas l'écume : celle-ci est un cyan saturé, et deux
     rails turquoise au milieu de la page attirent l'œil plus que ce qu'ils
     servent à choisir. */
  background: var(--marque-pale, #e4f2f5);
  border: 1px solid var(--trait, #dce9ed);
  border-radius: 999px;
}

.barre-vues .onglets a,
.barre-vues .choix-vue button {
  /* Hauteur affinée : la barre prenait autant de place qu'une carte pour dire
     quatre mots. */
  padding: .34rem .78rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--encre-douce);
  font-family: inherit;
  font-size: .85rem;
  line-height: 1.35;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.barre-vues .onglets a:hover,
.barre-vues .choix-vue button:hover { color: var(--encre, #0f1524); }

.barre-vues .onglets a.actif,
.barre-vues .choix-vue button.actif {
  background: var(--papier, #fff);
  color: var(--marque-texte);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(10, 27, 36, .1);
}
.barre-vues .onglets a:focus-visible,
.barre-vues .choix-vue button:focus-visible {
  outline: 2px solid var(--marque, #1585ae);
  outline-offset: 1px;
}

/* Sur un écran étroit, les libellés se resserrent plutôt que la barre ne
   casse : quatre mots doivent tenir, même sur le plus petit téléphone. */
@media (max-width: 430px) {
  .barre-vues { gap: .35rem; }
  .barre-vues .onglets a,
  .barre-vues .choix-vue button { padding: .32rem .6rem; font-size: .8rem; }
}
@media (max-width: 350px) {
  .barre-vues .onglets a,
  .barre-vues .choix-vue button { padding: .3rem .5rem; font-size: .76rem; }
}

/* ============================================================ souvenirs.html
   Le mur des souvenirs : le dépôt, puis les photos déposées.
   La page reprend le socle du site ; seuls les blocs qui n'existent nulle
   part ailleurs sont définis ici. */
/* 2,7 rem comme « À l’affiche » sur l’accueil : le titre y etait colle au
   bandeau, et deux pages du meme site ne doivent pas respirer autrement. */
.souvenirs-tete { margin: 2.7rem 0 2rem; }
.souvenirs-tete h1 {
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.4rem);
  letter-spacing: -.01em;
  font-variant-ligatures: none;
  margin: 0 0 .6rem;
}
.souvenirs-tete .chapeau {
  max-width: 50ch;
  margin: 0;
  color: var(--encre-douce, #4a6270);
  font-size: 1.02rem;
  line-height: 1.6;
}
.depot-bloc h2,
.mur-bloc h2 {
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-size: 1.25rem;
  margin: 0 0 1rem;
}

/* ------------------------------------------------------------- le dépôt */
.depot-bloc {
  padding: 1.3rem 1.3rem 1.4rem;
  margin-bottom: 2.6rem;
  background: var(--papier, #fff);
  border: 1px solid var(--trait, #dce9ed);
  border-radius: 16px;
}
.qui-connu {
  margin: 0 0 1rem;
  padding: .55rem .8rem;
  background: var(--marque-pale, #e4f2f5);
  border-radius: 10px;
  font-size: .88rem;
}
.qui-connu a { margin-left: .4rem; }

/* La zone de dépôt est un <label> : cliquer n'importe où dedans ouvre le
   sélecteur de fichier, sans une ligne de JavaScript. */
.zone-depot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  padding: 1.7rem 1rem;
  border: 2px dashed var(--trait-fort, #bcd4db);
  border-radius: 14px;
  background: var(--fond, #f3f8f9);
  color: var(--encre-douce, #4a6270);
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.zone-depot:hover,
.zone-depot.survol { border-color: var(--marque, #1585ae); background: var(--marque-pale, #e4f2f5); }
.zone-depot.rempli { padding: 1rem; }
.zone-depot svg {
  width: 1.9rem; height: 1.9rem;
  fill: none; stroke: var(--marque, #1585ae);
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  margin-bottom: .3rem;
}
.zone-titre { font-weight: 600; color: var(--encre, #063b52); font-size: .95rem; }
.zone-aide { font-size: .82rem; }

.apercu { margin: .9rem 0 0; }
.apercu img,
.apercu video {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  border-radius: 12px;
  background: var(--fond, #f3f8f9);
}
.apercu audio { width: 100%; }
.apercu figcaption {
  margin-top: .4rem;
  color: var(--encre-douce, #4a6270);
  font-size: .8rem;
  overflow-wrap: anywhere;
}

.depot-bloc .champ { margin-top: 1rem; }
.depot-bloc .champ label { display: block; margin-bottom: .3rem; font-size: .88rem; font-weight: 600; }
.depot-bloc .facultatif { font-weight: 400; color: var(--encre-douce, #4a6270); }
.depot-bloc textarea,
.depot-bloc input[type="text"] {
  width: 100%;
  padding: .55rem .7rem;
  border: 1px solid var(--trait-fort, #bcd4db);
  border-radius: 10px;
  background: var(--papier, #fff);
  color: inherit;
  font: inherit;
  font-size: .92rem;
}
.depot-bloc textarea { resize: vertical; }
.depot-bloc #envoyer { margin-top: 1.1rem; }

.mot {
  margin: .7rem 0 0;
  font-size: .87rem;
  color: var(--succes, #0f6e5e);
}
.mot.en-erreur { color: var(--alerte, #9c3a22); }

.regle {
  margin: 1.2rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--trait, #dce9ed);
  color: var(--encre-douce, #4a6270);
  font-size: .84rem;
  line-height: 1.6;
}

/* --------------------------------------------------------------- le mur */
/* « .mur » est DEJA le nom de la liste des evenements (ligne 119), reglee en
   align-items: stretch pour que les cartes d'une meme rangee aient la meme
   hauteur. Nommer ainsi la grille des souvenirs l'ecrasait, et les cartes de
   l'accueil se sont mises a flotter chacune a sa hauteur. Deux grilles, deux
   noms. */
.mur-souvenirs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  align-items: start;
}
.mur-vide { color: var(--encre-douce, #4a6270); font-size: .94rem; }

.souvenir {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--papier, #fff);
  border: 1px solid var(--trait, #dce9ed);
  border-radius: 14px;
}
/* La hauteur est fixe et l'image recadrée : un mur dont chaque carte a sa
   propre hauteur se lit mal, et les hauteurs réelles vont du panorama au
   portrait. La photo entière reste à un clic. */
.souvenir-image {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--fond, #f3f8f9);
}
.souvenir-image { position: relative; }
.souvenir-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Une vidéo n'est pas recadrée : on verrait un visage coupé. Elle tient
   dans le cadre, le reste du cadre reste sombre, comme un lecteur. */
.souvenir-image video {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  background: #0a1b24;
}

/* Un enregistrement n'a rien à montrer : pas de cadre 4/3 vide, juste le
   lecteur sur une bande, avec une note pour dire de quoi il s'agit. */
.souvenir-son {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .9rem;
  background: var(--marque-pale, #e4f2f5);
}
.souvenir-son audio { flex: 1 1 auto; min-width: 0; height: 34px; }
.son-signe { font-size: 1.3rem; line-height: 1; }

/* La durée se pose sur le média, en bas à droite, comme partout ailleurs. */
.souvenir-duree {
  position: absolute;
  right: .5rem;
  bottom: .5rem;
  padding: .1rem .4rem;
  border-radius: 6px;
  background: rgba(8, 22, 30, .72);
  color: #fff;
  font-size: .72rem;
  line-height: 1.5;
  /* Dans la barre d'un enregistrement, la place est comptée : « 8 s » se
     coupait en deux lignes. */
  white-space: nowrap;
  pointer-events: none;
}
.souvenir-son .souvenir-duree {
  position: static;
  background: none;
  color: var(--encre-douce, #4a6270);
}

/* Une vidéo garde le codec du téléphone qui l'a filmée : un iPhone filme en
   HEVC, que tous les navigateurs ne lisent pas. Le lien est donc toujours
   là — mieux vaut un fichier récupérable qu'un cadre noir. */
.souvenir-recup {
  align-self: flex-start;
  margin-top: .45rem;
  font-size: .8rem;
}

.souvenir-corps { display: flex; flex-direction: column; padding: .85rem .9rem 1rem; }
.souvenir-tete { display: flex; align-items: baseline; gap: .5rem; font-size: .9rem; }
.souvenir-tete strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.souvenir-date { margin-left: auto; flex: 0 0 auto; color: var(--encre-douce, #4a6270); font-size: .78rem; }
.souvenir-legende {
  margin: .4rem 0 0;
  color: var(--encre-douce, #4a6270);
  font-size: .88rem;
  line-height: 1.5;
}

.reactions { display: flex; gap: .3rem; margin: .75rem 0 .2rem; }
.reaction {
  display: inline-flex;
  align-items: center;
  gap: .22rem;
  padding: .24rem .5rem;
  border: 1px solid var(--trait, #dce9ed);
  border-radius: 999px;
  background: var(--papier, #fff);
  color: var(--encre-douce, #4a6270);
  font-size: .8rem;
  line-height: 1;
  cursor: pointer;
  transition: background .13s ease, border-color .13s ease;
}
.reaction:hover { background: var(--fond, #f3f8f9); }
/* Sa propre réaction se voit : sans ça, un deuxième clic qui la retire
   ressemble à un bogue. */
.reaction.posee { background: var(--marque-pale, #e4f2f5); border-color: var(--marque, #1585ae); }
.reaction .signe { font-size: .95rem; }
.reaction .compte:empty { display: none; }

.fil { margin-top: .6rem; display: flex; flex-direction: column; gap: .3rem; }
.fil:empty { margin-top: 0; }
.commentaire {
  margin: 0;
  font-size: .86rem;
  line-height: 1.45;
  /* Un mot collé de 300 caractères ne doit pas élargir la carte. */
  overflow-wrap: anywhere;
}
.commentaire strong { color: var(--encre, #063b52); }
.commentaire span { color: var(--encre-douce, #4a6270); }

.ecrire { display: flex; gap: .35rem; margin-top: .7rem; }
.ecrire input {
  flex: 1 1 auto;
  min-width: 0;
  padding: .4rem .6rem;
  border: 1px solid var(--trait, #dce9ed);
  border-radius: 999px;
  background: var(--fond, #f3f8f9);
  color: inherit;
  font: inherit;
  font-size: .84rem;
}
.ecrire input:focus { background: var(--papier, #fff); }
.ecrire .bouton { flex: 0 0 auto; }

#plus { margin: 1.6rem auto 0; display: block; }

/* ------------------------------------------------- la fenêtre « Programme »
   Elle réutilise le dessin de la fenêtre d'inscription ; seuls le programme
   et le déroulé ont besoin d'une mise en forme à eux. */
.modale-programme { max-width: 640px; }

.programme-sessions {
  margin: 0;
  padding-left: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.programme-sessions > li::marker { color: var(--rose-formation); font-weight: 700; }
.programme-sessions > li > strong { display: block; margin-bottom: .2rem; }
.programme-sessions ul {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--encre-douce, #4a6270);
  font-size: .9rem;
  line-height: 1.55;
}

/* Un déroulé est une suite de moments, chacun avec ses heures : une liste de
   définitions dit exactement cela, et un lecteur d'écran l'annonce comme
   telle. */
.programme-horaires { margin: 0; }
.programme-horaires dt {
  margin-top: .85rem;
  font-weight: 600;
  font-size: .92rem;
}
.programme-horaires dt:first-child { margin-top: 0; }
.programme-horaires dd {
  margin: .1rem 0 0 0;
  padding-left: .9rem;
  border-left: 2px solid var(--trait, #dce9ed);
  color: var(--encre-douce, #4a6270);
  font-size: .88rem;
  line-height: 1.5;
}

/* ========================================================= nous-rejoindre.html
   Trois cartes, trois questions que se pose quelqu'un qui n'est jamais venu :
   quand, où, à qui parler. Rien d'autre — une première visite ne se prépare
   pas en lisant une page. */
.rejoindre-tete { margin: 2.7rem 0 2rem; }
.rejoindre-tete h1 {
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.6rem);
  letter-spacing: -.01em;
  margin: 0 0 .7rem;
}
.rejoindre-tete .chapeau {
  max-width: 44ch;
  margin: 0;
  color: var(--encre-douce);
  font-size: 1.05rem;
  line-height: 1.6;
}

.rejoindre-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-bottom: 2.2rem;
}
.rejoindre-carte {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: 1.3rem 1.3rem 1.4rem;
  background: var(--papier);
  border: 1px solid var(--trait);
  border-radius: 16px;
}
.rejoindre-carte h2 {
  font-size: 1.15rem;
  margin: .35rem 0 .15rem;
  color: var(--encre);
}
.rejoindre-carte p { margin: 0; font-size: .95rem; line-height: 1.55; }
.rejoindre-carte .fin {
  margin-top: .3rem;
  color: var(--encre-douce);
  font-size: .87rem;
}
/* Le bouton est poussé en bas : les trois cartes n'ont pas le même nombre de
   lignes, et trois boutons à trois hauteurs se lisent comme un défaut. */
.rejoindre-carte .bouton {
  align-self: flex-start;
  margin-top: auto;
  padding-top: .55rem;
  padding-bottom: .55rem;
  font-size: .9rem;
}

.pastille-ronde {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
}
.pastille-ronde svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.p-quand { background: var(--marque-pale); color: var(--marque-texte); }
.p-ou    { background: #f6ece8; color: var(--rose-formation); }
.p-qui   { background: #e8f3ee; color: var(--succes); }

/* Le plan : un repère, pas une carte interactive à explorer. Il est chargé en
   différé, et le plan complet s'ouvre ailleurs. */
.rejoindre-plan { margin-bottom: 2.5rem; }
.rejoindre-plan img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: cover;
  object-position: center;
  border: 1px solid var(--trait);
  border-radius: 16px;
  background: var(--fond);
}
.plan-note {
  margin: .5rem 0 0;
  color: var(--encre-douce);
  font-size: .82rem;
}

/* Un cartouche qui porte « 09–10 » au lieu de « 09 » : deux fois plus de
   caractères dans la même largeur, donc un corps plus petit. */
.date-bloc.deux-jours .jour {
  font-size: 1.15rem;
  letter-spacing: -.02em;
  white-space: nowrap;
}

/* L'étiquette de thème, au pied de la carte, sur la ligne du bouton : elle y
   prend la place d'une pastille au lieu d'une ligne entière, et la carte
   gagne la hauteur correspondante. Elle reprend la couleur de l'encadré —
   même teinte, même rendez-vous. */
.etiquette-theme {
  padding: .16rem .55rem;
  border-radius: 999px;
  background: var(--rose-formation);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.5;
}

/* ------------------------------------------------- le bouton « Calendrier »
   UNE TROISIÈME COULEUR, prise dans la charte : l'Écume. « Participer » garde
   le Bleu vive, qui est l'action principale ; noter la date est un geste
   secondaire, et une seconde pastille bleue les mettait à égalité. L'Écume
   est dosée à 8 % dans la charte — la surface d'un petit bouton, précisément.
   Le texte est en Bleu profond : 8,2 : 1, mesuré. */
.bouton.calendrier,
button.bouton.calendrier {
  background: var(--ecume);
  border-color: var(--ecume);
  color: var(--bleu-profond);
}
.bouton.calendrier:hover,
button.bouton.calendrier:hover {
  background: #6ac4d4;
  border-color: #6ac4d4;
  color: var(--bleu-profond);
}

/* Le menu se pose SOUS le bouton, sans pousser la carte : une carte qui
   grandit au clic décale toutes ses voisines. */
.bloc-calendrier { position: relative; display: inline-flex; }
.bloc-calendrier .menu-calendrier {
  position: absolute;
  top: calc(100% + .35rem);
  left: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 10.5rem;
  padding: .25rem;
  background: var(--papier);
  border: 1px solid var(--trait-fort);
  border-radius: 10px;
  box-shadow: 0 8px 24px -10px rgba(10, 27, 36, .35);
}
.bloc-calendrier .menu-calendrier[hidden] { display: none; }
.bloc-calendrier .menu-calendrier a {
  padding: .4rem .6rem;
  border-radius: 7px;
  color: var(--encre);
  font-size: .85rem;
  text-decoration: none;
  white-space: nowrap;
}
.bloc-calendrier .menu-calendrier a:hover {
  background: var(--marque-pale);
  color: var(--marque-texte);
}

/* ------------------------------------------------------- le lecteur vidéo
   Une fenêtre qui se pose sur la page, pas un bloc carré à l'ancienne : fond
   voilé et flouté, cadre arrondi, ombre portée, et une arrivée en fondu. */
.video-fond {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  background: rgba(6, 27, 38, .72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .18s ease;
}
.video-fond.ouvert { opacity: 1; }
.video-fond[hidden] { display: none; }

.video-cadre {
  position: relative;
  width: min(100%, 980px);
  transform: translateY(8px) scale(.985);
  transition: transform .22s cubic-bezier(.2, .8, .3, 1);
}
.video-fond.ouvert .video-cadre { transform: none; }

/* 16/9 tenu par le rapport d'aspect : pas de bourrage au pourcentage, et la
   fenêtre ne saute pas pendant que la vidéo charge. */
.video-scene {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 18px;
  background: #000;
  box-shadow: 0 24px 70px -20px rgba(0, 0, 0, .75);
}
.video-scene iframe { width: 100%; height: 100%; border: 0; display: block; }

.video-legende {
  margin: .7rem .2rem 0;
  color: rgba(255, 255, 255, .88);
  font-size: .88rem;
  text-align: center;
}
.video-legende[hidden] { display: none; }

/* Le bouton de fermeture flotte au-dessus du coin, hors du cadre sur grand
   écran, dedans quand la place manque. */
.video-fermer {
  position: absolute;
  top: -2.6rem;
  right: 0;
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  cursor: pointer;
  transition: background .15s ease;
}
.video-fermer:hover { background: rgba(255, 255, 255, .28); }
.video-fermer svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
@media (max-width: 620px) {
  .video-fond { padding: .7rem; }
  .video-fermer { top: -2.4rem; }
  .video-scene { border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .video-fond, .video-cadre { transition: none; }
  .video-cadre { transform: none; }
}