:root { --site-max-etroit: 640px; --site-max-normal: 900px; --site-max-large: 1180px; }
* { box-sizing: border-box; }
body.site { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #1d1a2b; background: var(--site-fond_clair); line-height: 1.6; }

/* Trois colonnes plutôt qu'une rangée souple : le menu se cale sur le milieu du bandeau et
   n'y bouge plus, quelle que soit la largeur du logo à gauche ou du bouton à droite. Chaque
   élément nomme sa colonne — sans cela, un site sans menu verrait le bouton glisser au centre. */
.site-entete { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding: 14px 20px; background: #fff; border-bottom: 1px solid rgba(0,0,0,.08); }
.site-marque { grid-column: 1; font-weight: 700; text-decoration: none; color: var(--site-principale); }
.site-marque img { height: 40px; width: auto; display: block; }
.site-menu { grid-column: 2; justify-self: center; display: flex; gap: 14px; flex-wrap: wrap;
  justify-content: center; }
.site-menu a { text-decoration: none; color: #1d1a2b; padding: 6px 12px; border-radius: 999px; }
.site-menu a:hover, .site-menu a:focus { color: var(--site-principale); }

/* Page en cours : graisse, fond légèrement teinté et ombre portée. Trois signes valent mieux
   qu'un — la seule couleur laisserait l'entrée invisible à qui distingue mal les teintes. */
.site-menu a.site-menu-actif { font-weight: 700; color: var(--site-principale);
  background: rgba(0,0,0,.04); box-shadow: 0 1px 3px rgba(0,0,0,.16); }

.site-entete-espace { grid-column: 3; justify-self: end; text-decoration: none;
  padding: 9px 20px; border-radius: 999px; font-weight: 600;
  background: var(--site-principale); color: #fff; white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.site-entete-espace:hover, .site-entete-espace:focus { filter: brightness(1.12); }

/* Sur petit écran, le menu passe sous la ligne du logo et du bouton : le garder au centre
   d'une rangée à trois colonnes le comprimerait jusqu'à l'illisible. */
@media (max-width: 760px) {
  .site-entete { grid-template-columns: 1fr auto; }
  .site-menu { grid-column: 1 / -1; }
}

/* Apparition des blocs au défilement. La classe `site-anim` est posée par le script du
   gabarit, jamais écrite dans le HTML : sans JavaScript, aucun bloc n'est masqué. Le
   mouvement reste court et sans rebond — il accompagne la lecture, il ne la retarde pas. */
.site-anim .site-bloc { opacity: 0; transform: translateY(16px);
  transition: opacity .55s ease-out, transform .55s ease-out; }
.site-anim .site-bloc.site-vu { opacity: 1; transform: none; }

/* Zones animées à l'intérieur d'un bloc : le titre vient de la gauche, la présentation de la
   droite, les tuiles montent en fondu. Le décalage (`--rang`) échelonne les éléments d'une
   même rangée pour qu'ils se posent l'un après l'autre plutôt qu'en bloc. */
.site-anim .site-zone { opacity: 0; transition: opacity .5s ease-out, transform .5s ease-out; }
.site-anim .site-zone-gauche { transform: translateX(-22px); }
.site-anim .site-zone-droite { transform: translateX(22px); }
.site-anim .site-zone-fondu  { transform: translateY(14px); }
.site-anim .site-zone.site-vu { opacity: 1; transform: none; }
.site-anim .site-zone.site-vu .site-tuile,
.site-anim .site-zone.site-vu .site-niveaux li,
.site-anim .site-zone.site-vu .site-sous-groupes li { animation: site-pose .45s ease-out backwards;
  animation-delay: calc(var(--rang, 0) * 80ms); }
@keyframes site-pose { from { opacity: 0; transform: translateY(12px) scale(.96); } }
@media (prefers-reduced-motion: reduce) {
  .site-anim .site-zone { opacity: 1; transform: none; transition: none; }
  .site-anim .site-zone.site-vu .site-tuile,
  .site-anim .site-zone.site-vu .site-niveaux li,
  .site-anim .site-zone.site-vu .site-sous-groupes li { animation: none; }
}
/* Qui a demandé moins d'animations à son système ne doit rien voir bouger — pour certaines
   personnes le mouvement déclenche des nausées ou des migraines, pas un simple agacement. */
@media (prefers-reduced-motion: reduce) {
  .site-anim .site-bloc { opacity: 1; transform: none; transition: none; }
}

.site-bloc { padding: 40px 20px; }
.site-densite-serre { padding: 22px 20px; }
.site-densite-aere  { padding: 68px 20px; }
.site-bloc-corps { margin: 0 auto; max-width: var(--site-max-normal); }
.site-largeur-etroit .site-bloc-corps { max-width: var(--site-max-etroit); }
.site-largeur-large  .site-bloc-corps { max-width: var(--site-max-large); }
.site-align-centre .site-bloc-corps { text-align: center; }

.site-teinte-fond_clair  { background: var(--site-fond_clair); }
.site-teinte-fond_sombre { background: var(--site-fond_sombre); color: #f7f3ec; }
.site-teinte-principale  { background: var(--site-principale); color: #fff; }
.site-teinte-secondaire  { background: var(--site-secondaire); }
.site-teinte-accent      { background: var(--site-accent); }
.site-image-fond { color: #fff; }
.site-image-fond h1, .site-image-fond h2 { color: #fff; }

/* ═══ Relief du texte ═══════════════════════════════════════════════════════════════════
   Choisi bloc par bloc, et séparément pour les titres et pour le corps : un titre en néon sur
   une photo se lit encore, le même relief sur un paragraphe entier ne se lit plus. La classe
   est posée sur le bloc, les règles visent ce qu'il contient — c'est ce qui évite d'aller
   toucher les quinze vues de blocs pour un réglage qui les concerne toutes.

   Le halo et le néon empruntent l'encre en place (`currentColor`) : sur une photo sombre comme
   sur un fond clair, l'effet reste de la famille du texte qu'il entoure, sans qu'on ait à
   choisir une couleur de plus. Un navigateur qui ne sait pas mélanger les couleurs ignore la
   règle entière et rend le texte nu — sans relief, jamais illisible. */
.site-titre-shadow h1, .site-titre-shadow h2, .site-titre-shadow h3,
.site-texte-shadow p, .site-texte-shadow li, .site-texte-shadow blockquote,
.site-texte-shadow dt, .site-texte-shadow dd, .site-texte-shadow figcaption {
  text-shadow: 0 2px 4px rgba(0,0,0,.38), 0 8px 22px rgba(0,0,0,.28); }

.site-titre-glow h1, .site-titre-glow h2, .site-titre-glow h3,
.site-texte-glow p, .site-texte-glow li, .site-texte-glow blockquote,
.site-texte-glow dt, .site-texte-glow dd, .site-texte-glow figcaption {
  text-shadow: 0 0 12px color-mix(in srgb, currentColor 55%, transparent),
    0 0 32px color-mix(in srgb, currentColor 30%, transparent); }

/* Le néon tire son halo de la couleur d'accent du site : c'est ce qui le distingue du halo,
   qui reste dans la teinte du texte. Le premier trait, presque blanc, fait le tube. */
.site-titre-neon h1, .site-titre-neon h2, .site-titre-neon h3,
.site-texte-neon p, .site-texte-neon li, .site-texte-neon blockquote,
.site-texte-neon dt, .site-texte-neon dd, .site-texte-neon figcaption {
  text-shadow: 0 0 2px color-mix(in srgb, currentColor 80%, #fff),
    0 0 10px var(--site-accent), 0 0 26px var(--site-accent), 0 0 54px var(--site-accent); }

/* Un bouton n'est pas du texte courant : il porte déjà son fond pour se détacher. Sans cette
   remise à zéro il hériterait du relief de la ligne qui le contient — le halo se poserait sur
   son libellé et le rendrait flou au lieu de le mettre en avant. */
.site-bouton { text-shadow: none; }

.site-bandeau h1 { font-size: clamp(28px, 6vw, 48px); margin: 0 0 12px; line-height: 1.15; }
.site-accroche { font-size: clamp(16px, 2.6vw, 21px); margin: 0 0 20px; }
.site-boutons { display: flex; gap: 12px; flex-wrap: wrap; margin: 0; }
.site-align-centre .site-boutons { justify-content: center; }
/* La place des boutons du bandeau se choisit bloc par bloc. Écrites après la règle de
   l'alignement du bloc et à égale spécificité, elles l'emportent : un bandeau centré peut
   donc garder son bouton à droite, ce que l'alignement du bloc seul ne permettait pas. */
.site-bandeau .site-boutons--gauche { justify-content: flex-start; }
.site-bandeau .site-boutons--centre { justify-content: center; }
.site-bandeau .site-boutons--droite { justify-content: flex-end; }
.site-bouton { display: inline-block; padding: 12px 22px; border-radius: var(--site-radius);
  background: var(--site-accent); color: #241d3a; text-decoration: none; font-weight: 600; }
.site-bouton:hover, .site-bouton:focus { filter: brightness(1.05); }

.site-texte img { max-width: 100%; height: auto; }
.site-pied { padding: 28px 20px; background: var(--site-fond_sombre); color: rgba(247,243,236,.85); }
.site-pied a { color: var(--site-secondaire); }
.site-pied-liens { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; }

@media (min-width: 700px) { .site-bloc { padding: 56px 32px; } }

.site-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.site-liste li { display: flex; gap: 12px; align-items: flex-start; }
.site-liste-emoji { font-size: 26px; line-height: 1.2; }
.site-liste p { margin: 4px 0 0; }

.site-grille { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .site-grille { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
/* Colonne, pour que le bouton de bas de carte se pose au bas de la carte et non à la suite
   du texte : dans une grille, les cartes ont la hauteur de la plus haute, et des boutons à
   des hauteurs différentes se lisent comme un défaut d'alignement. */
.site-carte { background: #fff; border-radius: var(--site-radius); overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.12); padding-bottom: 14px; color: #1d1a2b;
  display: flex; flex-direction: column; }
/* `>` : l'image de la carte, pas celles que le Markdown du texte peut porter. */
.site-carte > img { width: 100%; height: 160px; object-fit: cover; display: block; flex: none; }
.site-carte h3 { margin: 12px 14px 6px; }
.site-carte p { margin: 0 14px 10px; }
.site-carte .site-texte { margin: 0 14px 10px; }
.site-carte .site-texte p { margin: 0 0 8px; }
.site-carte .site-texte > :last-child { margin-bottom: 0; }
.site-carte .site-texte img { height: auto; }
.site-carte .site-boutons { margin: auto 14px 0; padding-top: 12px; }

.site-appel-corps { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.site-appel-corps h2 { margin: 0; }

/* Aperçu du bloc : la phrase qui prend la place d'un bloc qui ne s'affichera pas.
   Cette règle ne sert que dans le cadre d'aperçu de l'espace membre ; aucune page
   publique ne la rencontre. */
.site-apercu-vide { margin: 0; padding: 32px 20px; text-align: center; font-style: italic;
  color: #6b6580; background: #fff; }

.site-sommaire { padding: 14px 20px; border-bottom: 1px solid rgba(0,0,0,.08); }
.site-sommaire-liens { display: flex; gap: 14px; flex-wrap: wrap; }
.site-sommaire-liens a { color: var(--site-principale); text-decoration: none; font-weight: 600; }
.site-rv { padding: 16px 0; border-bottom: 1px solid rgba(0,0,0,.08); }
.site-rv-quand { font-weight: 600; margin: 4px 0 10px; }
/* L'inscription se joue à côté de l'annonce : le bouton, puis ce qu'il faut en savoir. */
.site-rv-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 12px 0 0; }
.site-rv-places { font-size: 14px; opacity: .8; }
/* Le prix se lit d'un coup d'œil, et le payant se distingue du gratuit sans crier. */
.site-rv-prix { font-weight: 600; }
.site-rv-prix--payant { padding: 2px 10px; border-radius: 999px; background: var(--site-accent);
  color: #241d3a; }
.site-rv-complet { display: inline-block; padding: 6px 14px; border-radius: 999px;
  background: rgba(0,0,0,.08); font-weight: 600; }
.site-rv-mention { font-size: 13px; opacity: .8; margin-top: 10px; }
.site-message { padding: 12px 16px; border-radius: var(--site-radius);
  background: rgba(255,255,255,.85); color: #1d1a2b; font-weight: 600; }

.site-formulaire { display: grid; gap: 8px; max-width: 460px; margin-top: 14px; }
.site-align-centre .site-formulaire { margin-left: auto; margin-right: auto; }
.site-formulaire input[type=email], .site-formulaire input[type=text],
.site-formulaire input[type=tel], .site-formulaire textarea {
  padding: 10px 12px; border: 1px solid rgba(0,0,0,.2); border-radius: var(--site-radius);
  font: inherit; width: 100%; }
.site-consentement { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; }
.site-erreur { color: #a12a2a; margin: 0; font-size: 14px; }

.site-chiffres-grille { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); text-align: center; }
.site-chiffre-nombre { display: block; font-size: clamp(32px, 7vw, 54px); font-weight: 700;
  line-height: 1.1; color: var(--site-principale); }
.site-teinte-principale .site-chiffre-nombre, .site-teinte-fond_sombre .site-chiffre-nombre,
.site-image-fond .site-chiffre-nombre { color: inherit; }
.site-chiffre-libelle { display: block; margin-top: 4px; font-size: 15px; }

.site-citation-figure { margin: 0; }
.site-citation blockquote { margin: 0; border-left: 4px solid var(--site-accent); padding-left: 18px; }
.site-align-centre .site-citation blockquote { border-left: 0; padding-left: 0; }
.site-citation blockquote p { margin: 0; font-size: clamp(19px, 3vw, 26px); line-height: 1.4; }
.site-citation figcaption { margin-top: 12px; font-size: 15px; opacity: .8; padding-left: 22px; }
.site-align-centre .site-citation figcaption { padding-left: 0; }

.site-avancement-piste { height: 14px; border-radius: 999px; background: rgba(0,0,0,.12);
  overflow: hidden; margin-top: 8px; }
.site-avancement-jauge { height: 100%; background: var(--site-principale); border-radius: 999px; }
.site-avancement-valeur { margin: 6px 0 0; font-weight: 700; }
.site-etapes { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.site-etape { display: flex; gap: 10px; align-items: baseline; }
.site-etape-signe { width: 1.2em; flex: none; text-align: center; font-weight: 700; }
.site-etape-libelle { flex: 1; }
/* L'intitulé de l'état est ce qui reste lisible quand la couleur ne dit rien. */
.site-etape-etat { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; opacity: .75; }
.site-etape-fait .site-etape-signe { color: #1c7a44; }
.site-etape-fait .site-etape-libelle { text-decoration: line-through; text-decoration-thickness: 1px; }
.site-etape-en_cours .site-etape-signe { color: var(--site-principale); }
.site-etape-en_cours .site-etape-libelle { font-weight: 600; }
.site-etape-a_venir { opacity: .7; }

.site-galerie-grille { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .site-galerie-grille { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
.site-galerie-vignette { margin: 0; }
.site-galerie-vignette img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  border-radius: var(--site-radius); background: rgba(0,0,0,.06); }
.site-galerie-vignette figcaption { margin-top: 6px; font-size: 14px; opacity: .8; }

.site-portraits { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.site-portrait { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.site-portrait img { width: 120px; height: 120px; object-fit: cover; border-radius: 50%;
  background: rgba(0,0,0,.06); }
.site-portrait-nom { font-weight: 700; margin-top: 6px; }
.site-portrait-fonction { font-size: 14px; opacity: .8; }
.site-fiche-contact .site-boutons { justify-content: center; }

/* ═══ Fiche de groupe ═══════════════════════════════════════════════════════════════════
   Une seule mise en page pour tous les groupes : deux fiches se ressemblent, et la
   comparaison entre elles reste honnête. */
.site-fiche-groupe .site-bloc-corps > * + * { margin-top: 26px; }
.site-fiche-entete { display: flex; gap: 16px; align-items: center; }
.site-fiche-entete h2 { margin: 0; }
/* Largeur minimale et non fixe, et `nowrap` : un totem de plusieurs emoji s'écrit sur une
   ligne — à hauteur contrainte, il se pliait en deux et l'un passait sous l'autre. La pastille
   s'allonge alors en gélule plutôt que de rogner ce qu'on y a mis. */
.site-fiche-totem { display: inline-flex; align-items: center; justify-content: center;
  min-width: 64px; height: 64px; padding: 0 12px; flex: none; white-space: nowrap;
  border-radius: 999px; font-size: 30px; line-height: 1; }
.site-fiche-nature { margin: 2px 0 0; opacity: .8; font-size: 15px; }
/* En italique et non en gras : la coordination est une mention, pas une annonce. */
.site-fiche-coordination { margin: 10px 0 0; font-style: italic; opacity: .9; }

.site-fiche-tuiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.site-tuile { background: rgba(255,255,255,.82); color: #1d1a2b; border-radius: var(--site-radius);
  padding: 14px 10px; text-align: center; display: grid; gap: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,.10); }
.site-tuile-emoji { font-size: 24px; line-height: 1.1; }
.site-tuile-nombre { font-size: 30px; font-weight: 700; line-height: 1.1; }
.site-tuile-libelle { font-size: 13px; opacity: .75; }

.site-fiche-taches h3, .site-fiche-niveaux h3,
.site-fiche-documents h3, .site-fiche-rendez-vous h3 { margin: 0 0 10px; font-size: 18px; }
.site-jauge { display: flex; height: 14px; border-radius: 999px; overflow: hidden;
  background: rgba(0,0,0,.10); }
.site-jauge-part { display: block; height: 100%; transition: width .6s ease-out; }
.site-jauge-terminees { background: #4c9a6a; }
.site-jauge-en-cours  { background: var(--site-accent); }
.site-jauge-a-faire   { background: rgba(0,0,0,.18); }
.site-legende { list-style: none; display: flex; gap: 16px; flex-wrap: wrap; padding: 0; margin: 10px 0 0;
  font-size: 14px; }
.site-legende li { display: flex; gap: 6px; align-items: center; }
.site-pastille { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }

.site-niveaux { list-style: none; padding: 0; margin: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.site-niveaux li { display: flex; gap: 6px; align-items: center; padding: 6px 12px;
  border-radius: 999px; background: rgba(255,255,255,.82); color: #1d1a2b; font-size: 14px; }

.site-sous-groupes { list-style: none; padding: 0; margin: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.site-sous-groupes a, .site-sous-groupes li > span { display: inline-flex; gap: 8px;
  align-items: center; padding: 6px 14px 6px 6px; border-radius: 999px;
  background: rgba(255,255,255,.82); color: #1d1a2b; text-decoration: none; font-weight: 600; }
.site-sous-groupes a:hover, .site-sous-groupes a:focus { filter: brightness(.97); }
/* Sans page pour l'accueillir, le sous-groupe reste nommé mais s'annonce comme non cliquable. */
.site-sous-groupes li > span { opacity: .75; font-weight: 500; }
.site-sous-groupe-totem { display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 28px; padding: 0 6px; white-space: nowrap;
  border-radius: 999px; font-size: 15px; line-height: 1; }

.site-documents { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.site-documents a { display: inline-flex; gap: 8px; align-items: baseline; }
.site-documents a::before { content: "📄"; }
.site-align-centre .site-fiche-entete { justify-content: center; }
.site-align-centre .site-legende, .site-align-centre .site-niveaux,
.site-align-centre .site-documents { justify-content: center; }
.site-bouton-clair { background: rgba(255,255,255,.85); color: #241d3a; }

.site-actu { padding: 20px 0; border-bottom: 1px solid rgba(0,0,0,.08); }
.site-actu img { width: 100%; height: auto; border-radius: var(--site-radius); }
.site-actu h2 { margin: 12px 0 4px; }
.site-actu h2 a { color: inherit; text-decoration: none; }
.site-actu-date { color: rgba(0,0,0,.6); font-size: 14px; margin: 0 0 8px; }
.site-pagination { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; }