/* Mon ASL — interface. Encre #1E2019, vert graphique #2F8A4C,
   vert texte #256C3B (le vert graphique ne passe pas AA sur blanc). */

/* Philosopher, la police du groupe, servie depuis ce domaine et jamais
   depuis Google Fonts — règle commune, aucune requête vers un tiers. Les
   fichiers viennent de @fontsource, comme sur le site vitrine : le visiteur
   qui clique « Créer mon compte » retrouve ici les mêmes titres. */
@font-face {
  font-family: "Philosopher";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/polices/philosopher-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Philosopher";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/polices/philosopher-latin-700-normal.woff2") format("woff2");
}

:root {
  --fond: #faf9f5;
  --surface: #ffffff;
  --encre: #1e2019;
  --encre-douce: #566050;
  --ligne: #e3e0d6;
  --vert: #2f8a4c;
  --vert-texte: #256c3b;
  --vert-pale: #e9f2ea;
  --alerte: #a8502a;
  --alerte-pale: #f4e4da;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: system-ui, "Segoe UI", sans-serif;
  line-height: 1.55;
}
/* Règle du groupe : les blocs de texte sont justifiés, sur tous les sites. */
p, li, dd, blockquote { text-align: justify; }
/* Exceptions locales — libellés courts qui s'étaleraient en blancs. */
.message-succes, .avertissement, .fil, .erreur, .rgpd, .essai, .aide, .exigences li { text-align: left; }
h1, h2 { font-family: "Philosopher", Georgia, serif; line-height: 1.2; }
h1 { font-size: 1.7rem; margin: 0 0 1rem; }
h2 { font-size: 1.2rem; margin: 1.8rem 0 0.6rem; }
a { color: var(--vert-texte); }
main { max-width: 52rem; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
.pied { max-width: 52rem; margin: 0 auto; padding: 0 1.25rem 2rem; font-size: 0.85rem; opacity: 0.8; }
.pied p { text-align: left; }

.entete {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 52rem; margin: 0 auto; padding: 0.8rem 1.25rem;
  border-bottom: 1px solid var(--ligne);
}
.marque { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; color: var(--encre); font-weight: 700; font-size: 1.15rem; font-family: "Philosopher", Georgia, serif; }
.asl-courante { text-align: center; text-decoration: none; color: var(--encre); line-height: 1.25; }
.asl-courante strong { font-family: "Philosopher", Georgia, serif; }
.asl-courante span { display: block; color: var(--encre-douce); font-size: 0.82rem; }
.entete nav { display: flex; align-items: center; gap: 1rem; }
.entete nav a { text-decoration: none; }
button.lien { background: none; border: none; color: var(--vert-texte); font: inherit; cursor: pointer; padding: 0; text-decoration: underline; }

.message-succes { background: var(--vert-pale); border: 1px solid var(--vert); border-radius: 6px; padding: 0.6rem 0.9rem; }
.avertissement { background: var(--alerte-pale); border: 1px dashed var(--alerte); border-radius: 6px; padding: 0.6rem 0.9rem; }

form.fiche { max-width: 28rem; display: grid; gap: 0.9rem; }
/* La fiche en carte : un formulaire posé sur une surface, pas un couloir. */
form.fiche.carte, .carte-fiche {
  max-width: 36rem;
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-left: 4px solid var(--vert);
  border-radius: 10px;
  padding: 1.4rem 1.6rem;
}
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
@media (max-width: 34rem) { .duo { grid-template-columns: 1fr; } }
form.fiche label { display: grid; gap: 0.25rem; font-weight: 600; font-size: 0.92rem; }
form.fiche input, form.fiche select, form.fiche textarea {
  font: inherit; padding: 0.5rem 0.7rem;
  border: 1px solid var(--ligne); border-radius: 6px;
  background: var(--surface); color: var(--encre); width: 100%;
}
form.fiche .erreur { color: var(--alerte); font-size: 0.85rem; font-weight: 400; }
/* La mention légale sous un formulaire : lisible, jamais dominante. */
form.fiche .rgpd { font-size: 0.85rem; color: var(--encre-douce, inherit); opacity: 0.85; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--vert-texte); outline-offset: 2px;
}
.bouton {
  display: inline-block; background: var(--vert); color: #fff;
  font-weight: 700; border: none; border-radius: 6px;
  padding: 0.6rem 1.2rem; font-size: 0.98rem; cursor: pointer; text-decoration: none;
}
.bouton:hover { background: var(--vert-texte); }
.bouton.discret { background: transparent; color: var(--vert-texte); border: 1px solid var(--vert); }

table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; background: var(--surface); }
th, td { border: 1px solid var(--ligne); padding: 0.5rem 0.75rem; text-align: left; }
th { background: var(--vert-pale); }
.actions-page { display: flex; gap: 0.8rem; align-items: center; margin: 1rem 0; flex-wrap: wrap; }

.cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.9rem; }
.carte {
  background: var(--surface); border: 1px solid var(--ligne); border-radius: 8px;
  padding: 1rem 1.1rem; text-decoration: none; color: var(--encre); display: block;
}
.carte:hover { border-color: var(--vert); }
.carte .nom { font-weight: 700; font-family: "Philosopher", Georgia, serif; font-size: 1.05rem; }
.carte .detail { color: var(--encre-douce); font-size: 0.9rem; }
.stats { display: flex; gap: 1.6rem; flex-wrap: wrap; margin: 0.8rem 0 0.4rem; }
.stats .stat b { font-size: 1.4rem; display: block; font-variant-numeric: tabular-nums; }
.stats .stat span { color: var(--encre-douce); font-size: 0.88rem; }
.fil { color: var(--encre-douce); font-size: 0.9rem; margin-bottom: 0.4rem; }
.fil a { color: var(--encre-douce); }

/* Le second bandeau : les fonctions de l'ASL courante, sous l'en-tête.
   Défilement horizontal sur petit écran plutôt que repli : tout reste visible. */
.bandeau-fonctions { background: #1f4a2c; }
.bandeau-int { max-width: 52rem; margin: 0 auto; padding: 0.55rem 1.25rem; }
/* La grille des boutons : autant par ligne, séparés par un filet clair.
   Les 1px de gap laissent voir le fond du cadre, qui dessine la délimitation. */
.bandeau-grille {
  display: grid;
  grid-template-columns: repeat(var(--colonnes, 5), minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  overflow: hidden;
}
.bandeau-grille a {
  display: block; text-align: center;
  text-decoration: none; color: #e4ede4; font-size: 0.92rem;
  padding: 0.42rem 0.4rem;
  background: #2a5639;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.bandeau-grille a:hover { background: #3a7350; color: #ffffff; }
.bandeau-grille a[aria-current="page"] {
  background: #ffffff; color: #1f4a2c; font-weight: 700;
}
@media (max-width: 40rem) {
  .bandeau-grille { display: flex; overflow-x: auto; scrollbar-width: none; }
  .bandeau-grille::-webkit-scrollbar { display: none; }
  .bandeau-grille a { flex: none; padding: 0.42rem 0.8rem; }
}

/* Un tableau plus large que l'ecran defile dans son cadre, sans casser la page. */
.table-defilante { overflow-x: auto; }

/* Variante large de la fiche : les champs remplissent la colonne, bords
   gauche et droit alignés sur le texte courant. */
form.fiche.fiche-large { max-width: none; }

/* Une carte annoncee mais pas encore construite : visible, pas cliquable. */
.carte.bientot { border-style: dashed; opacity: 0.65; cursor: default; }
.carte.bientot:hover { border-color: var(--ligne); }

/* ─────────────────────────────────────────────────────────────────────────
   Les pages d'accueil : inscription, connexion, mot de passe oublié.
   Deux colonnes — la promesse à gauche, le formulaire à droite. Le visiteur
   arrive du site vitrine, où on lui a promis quelque chose ; la colonne
   sombre le lui répète pendant qu'il saisit, au lieu de le laisser seul
   devant cinq champs. En dessous de 62rem, tout s'empile : la promesse
   d'abord, courte, puis le formulaire.
   ───────────────────────────────────────────────────────────────────────── */

.accueil { background: var(--fond); }
.accueil-grille { min-height: 100vh; display: grid; grid-template-columns: 1fr; }
@media (min-width: 62rem) {
  .accueil-grille { grid-template-columns: 1fr 1fr; }
}

/* La colonne de gauche */
.accueil-promesse {
  position: relative;
  overflow: hidden;
  background: #173d26;
  color: #e6f0e7;
  padding: 2.5rem 2rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  justify-content: center;
}
@media (min-width: 62rem) {
  .accueil-promesse { padding: 3.5rem clamp(2rem, 5vw, 4.5rem); }
}
/* Le symbole en très grand, à peine visible : la même respiration que le
   bloc « Le guide » du site vitrine. Décoratif, donc hors du flux et
   inaccessible aux lecteurs d'écran. */
.accueil-promesse::after {
  content: "";
  position: absolute; right: -6rem; bottom: -8rem;
  width: 26rem; height: 26rem;
  background: url("/logo-symbole.svg") no-repeat center / contain;
  opacity: 0.055;
  pointer-events: none;
}
.accueil-promesse > * { position: relative; z-index: 1; }

.accueil-promesse .marque {
  display: inline-flex; align-items: center; gap: 0.55rem;
  color: inherit; text-decoration: none;
  font-family: "Philosopher", Georgia, serif; font-size: 1.25rem; font-weight: 700;
  margin-bottom: 0.5rem;
}
.accueil-promesse .marque img { filter: brightness(0) invert(1); opacity: 0.9; }

.accueil-promesse .etiquette {
  margin: 0; text-align: left;
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #8fd0a4;
}
.accueil-promesse h1 {
  margin: 0; color: #fff;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.08;
  text-wrap: balance;
}
.accueil-promesse .chapeau {
  margin: 0; max-width: 46ch; text-align: left;
  font-size: 1.02rem; color: #cfe3d4;
  /* La salutation remplace ce texte à la saisie du prénom : sans hauteur
     minimale, toute la colonne sauterait d'une ligne à chaque frappe. */
  min-height: 4.4em;
}
.accueil-promesse .jusqua {
  margin: 0; text-align: left;
  font-size: 0.95rem; color: #cfe3d4;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding-top: 1.1rem;
}
.accueil-promesse .jusqua strong { color: #fff; }
.accueil-promesse .jusqua a { color: #8fd0a4; }

/* Les trois étapes : numérotées parce qu'elles s'enchaînent pour de bon —
   on ne saisit pas de lots avant d'avoir une ASL. */
.accueil-promesse .etapes {
  list-style: none; counter-reset: etape;
  margin: 0.2rem 0 0; padding: 0;
  display: grid; gap: 1rem;
}
.accueil-promesse .etapes li {
  counter-increment: etape;
  position: relative; padding-left: 2.6rem; text-align: left;
}
.accueil-promesse .etapes li::before {
  content: counter(etape);
  position: absolute; left: 0; top: 0;
  width: 1.85rem; height: 1.85rem; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #8fd0a4; font-weight: 700; font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  display: grid; place-items: center;
}
.accueil-promesse .etapes h2 {
  margin: 0 0 0.1rem; color: #fff; font-size: 1.02rem; line-height: 1.3;
}
.accueil-promesse .etapes p {
  margin: 0; text-align: left;
  font-size: 0.92rem; color: #bdd6c4;
}

/* La colonne de droite : le formulaire, centré, jamais plus large que
   nécessaire. Elle écrase le `main` commun, qui est fait pour des pages
   de travail et non pour un formulaire de cinq champs. */
.accueil .accueil-forme {
  max-width: none; margin: 0;
  padding: 2.5rem 1.5rem 3rem;
  display: flex; flex-direction: column; justify-content: center;
  gap: 0.2rem;
}
@media (min-width: 62rem) {
  .accueil .accueil-forme { padding: 3.5rem clamp(2rem, 4vw, 4rem); }
}
.accueil-forme h1 { margin: 0 0 0.15rem; font-size: 1.85rem; }
.accueil-forme .sous-titre {
  margin: 0 0 1.4rem; text-align: left;
  color: var(--encre-douce); font-size: 0.98rem;
}
.accueil-forme form.fiche { max-width: 30rem; width: 100%; }
.accueil-forme form.fiche p { text-align: left; font-size: 0.92rem; }
.accueil-forme .mentions {
  margin: 2rem 0 0; text-align: left;
  font-size: 0.82rem; color: var(--encre-douce);
}

/* Le mot d'aide sous un champ : il explique, il n'alarme pas. */
.aide { font-weight: 400; font-size: 0.82rem; color: var(--encre-douce); }
.aide-ok { color: var(--vert-texte); }
.aide-attention { color: var(--alerte); }

.bouton-grand { padding: 0.75rem 1.4rem; font-size: 1.04rem; width: 100%; }
@media (min-width: 34rem) { .bouton-grand { width: auto; } }

/* L'entrée en scène : la promesse se pose ligne par ligne pendant que le
   formulaire arrive. Une seule fois, au chargement — rien ne bouge ensuite,
   et rien ne bouge du tout pour qui a demandé moins d'animations. */
@media (prefers-reduced-motion: no-preference) {
  .accueil-promesse > *,
  .accueil-forme > * {
    animation: accueil-monte 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
  }
  .accueil-promesse > *:nth-child(1) { animation-delay: 0.02s; }
  .accueil-promesse > *:nth-child(2) { animation-delay: 0.08s; }
  .accueil-promesse > *:nth-child(3) { animation-delay: 0.14s; }
  .accueil-promesse > *:nth-child(4) { animation-delay: 0.20s; }
  .accueil-promesse > *:nth-child(5) { animation-delay: 0.26s; }
  .accueil-forme > *:nth-child(1) { animation-delay: 0.10s; }
  .accueil-forme > *:nth-child(2) { animation-delay: 0.16s; }
  .accueil-forme > *:nth-child(3) { animation-delay: 0.22s; }
  @keyframes accueil-monte {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
}

/* L'essai gratuit sur la fiche de l'ASL : une bonne nouvelle, donc le vert
   pâle et non le ton d'avertissement — elle n'appelle aucune action. */
.essai {
  background: var(--vert-pale); border: 1px solid var(--vert);
  border-radius: 6px; padding: 0.6rem 0.9rem; text-align: left;
}

/* Les exigences du mot de passe, cochées à la frappe. Le vert n'est pas seul
   à porter l'information : la puce change de forme aussi — huit pour cent des
   hommes ne distinguent pas le vert du gris. */
.exigences {
  list-style: none; margin: -0.4rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.15rem 1.1rem;
  font-size: 0.82rem; color: var(--encre-douce);
}
.exigences li { text-align: left; position: relative; padding-left: 1.1rem; }
.exigences li::before {
  content: "○"; position: absolute; left: 0;
}
.exigences li.faite { color: var(--vert-texte); }
.exigences li.faite::before { content: "●"; }

/* ─────────────────────────────────────────────────────────────────────────
   Le premier écran, quand on n'a pas encore d'association. Il ne disait
   qu'une chose : « Vous n'administrez encore aucune ASL. » — un constat de
   vide, sans sortie indiquée. C'est pourtant l'écran qui décide si le
   président continue ou referme l'onglet.
   ───────────────────────────────────────────────────────────────────────── */
.bienvenue { max-width: 44rem; }
.bienvenue .etiquette {
  margin: 0 0 .3rem; text-align: left;
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--vert-texte);
}
.bienvenue h1 { font-size: 2rem; margin: 0 0 .5rem; }
.bienvenue .chapeau { margin: 0 0 1.6rem; font-size: 1.05rem; color: var(--encre-douce); }

/* Le parcours en quatre temps. Numéroté parce que l'ordre est réel : on ne
   saisit pas de lots avant d'avoir une ASL, ni d'appel avant des lots. La
   première étape est déjà cochée — on entre dans un parcours commencé, pas
   devant une page blanche. */
.parcours { list-style: none; counter-reset: p; padding: 0; margin: 0 0 1.8rem; display: grid; gap: .9rem; }
.parcours li { counter-increment: p; position: relative; padding-left: 2.9rem; text-align: left; }
.parcours li::before {
  content: counter(p);
  position: absolute; left: 0; top: .1rem;
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  border: 1px solid var(--ligne); background: var(--surface);
  color: var(--encre-douce); font-weight: 700; font-size: .88rem;
  font-variant-numeric: tabular-nums;
  display: grid; place-items: center;
}
/* Le pas franchi porte une coche, et non un numéro : la couleur seule ne
   suffit jamais à dire un état. */
.parcours li.fait::before { content: "\2713"; background: var(--vert); border-color: var(--vert); color: #fff; }
.parcours li.fait h2, .parcours li.fait p { color: var(--encre-douce); }
.parcours h2 { margin: 0 0 .1rem; font-size: 1.05rem; }
.parcours p { margin: 0; text-align: left; color: var(--encre-douce); font-size: .95rem; }

.bienvenue .rassurance { margin-top: 1.4rem; font-size: .92rem; color: var(--encre-douce); }

/* ─────────────────────────────────────────────────────────────────────────
   La création d'une association, en trois colonnes.

   Règle du groupe : le clic et le défilement se comptent, la page ne descend
   jamais. Elle descendait pourtant, non parce qu'il y a trop de champs, mais
   parce que la colonne de travail commune est bornée à 52 rem — une largeur
   faite pour lire, pas pour saisir. Sur cette page on prend l'écran, et les
   quatorze champs tiennent au-dessus de la ligne de flottaison.

   L'ordre des colonnes dit la priorité : l'obligatoire à gauche, le
   facultatif au milieu, le contexte à droite. Ce qui n'est pas obligatoire
   ne s'interpose jamais entre le nom de l'ASL et le bouton.
   ───────────────────────────────────────────────────────────────────────── */
main:has(.creation) { max-width: 78rem; }

.creation {
  display: grid; gap: 1.1rem 1.6rem; align-items: start;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 60rem) {
  .creation { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .creation-tete, .creation-pied { grid-column: 1 / -1; }
}
@media (min-width: 82rem) {
  .creation { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .85fr); }
}
.creation-tete h1 { margin: 0 0 .2rem; }
.creation-tete .chapeau { margin: 0; color: var(--encre-douce); max-width: 80ch; }
.creation .colonne { display: grid; gap: 1.1rem; align-content: start; }

/* Chaque bloc est une carte : on voit du premier coup d'œil combien il y a
   d'étapes, au lieu d'une colonne de champs sans fin. */
.creation .bloc {
  border: 1px solid var(--ligne); border-radius: 10px;
  background: var(--surface); padding: 1rem 1.2rem 1.2rem;
  margin: 0; display: grid; gap: .8rem;
}
.creation .bloc legend {
  font-family: "Philosopher", Georgia, serif; font-size: 1.12rem; font-weight: 700;
  padding: 0 .4rem; margin-left: -.4rem;
}
.creation .bloc-intro { margin: -.25rem 0 0; }
.creation label { display: grid; gap: 0.25rem; font-weight: 600; font-size: 0.92rem; }
.creation input, .creation select {
  font: inherit; padding: 0.5rem 0.7rem;
  border: 1px solid var(--ligne); border-radius: 6px;
  background: var(--surface); color: var(--encre); width: 100%;
}
.creation .erreur { color: var(--alerte); font-size: 0.85rem; font-weight: 400; }
.creation .duo { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; align-items: end; }
@media (max-width: 30rem) { .creation .duo { grid-template-columns: 1fr; } }

.facultatif {
  font-weight: 400; font-size: .78rem; color: var(--encre-douce);
  border: 1px solid var(--ligne); border-radius: 99px; padding: .05rem .45rem;
  margin-left: .3rem; vertical-align: 1px; white-space: nowrap;
}

.creation-aparte { background: var(--vert-pale); border-radius: 10px; padding: 1.1rem 1.3rem 1.2rem; }
.creation-aparte h2 { margin: 0 0 .5rem; font-size: 1.05rem; }
.creation-aparte .suite { list-style: none; padding: 0; margin: 0 0 .8rem; display: grid; gap: .65rem; }
.creation-aparte .suite li { font-size: .92rem; }
.creation-aparte .aide { display: block; }

/* Le bouton est sous les colonnes, sur toute la largeur : il ferme la page
   au lieu d'attendre en bas d'une seule colonne. */
.creation-pied { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .4rem; }

/* Dans une paire de champs, les cadres s'alignent par le bas : sans cela un
   libellé qui passe sur deux lignes — « Téléphone » suivi de son étiquette
   « facultatif » — décale son champ par rapport à son voisin. */
form.fiche .duo { align-items: end; }

/* Le bouton d'une action irréversible : il ne doit pas ressembler aux autres.
   La couleur seule ne suffirait pas — le libellé dit « définitivement ». */
.bouton-danger { background: var(--alerte); }
.bouton-danger:hover { background: #8a4022; }
.lien-danger { color: var(--alerte); font-size: 0.9rem; }

/* ─────────────────────────────────────────────────────────────────────────
   L'écran d'abonnement : l'état à gauche, les coordonnées au milieu, la
   résolution d'assemblée à droite. Trois colonnes pour que la page ne
   descende pas — un président doit voir d'un coup où il en est, ce que ça
   coûtera, et ce qu'il a à faire voter.
   ───────────────────────────────────────────────────────────────────────── */
main:has(.abo) { max-width: 78rem; }
.abo { display: grid; gap: 1.2rem 1.6rem; align-items: start; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 60rem) { .abo { grid-template-columns: minmax(0, .8fr) minmax(0, 1.15fr); } }
@media (min-width: 82rem) { .abo { grid-template-columns: minmax(0, .75fr) minmax(0, 1.1fr) minmax(0, .95fr); } }
.abo .colonne { display: grid; gap: .5rem; align-content: start; }
.abo h2 { margin: .2rem 0 .2rem; font-size: 1.08rem; }
.abo .etiquette { margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--vert-texte); text-align: left; }

.abo-etat { background: var(--vert-pale); border-radius: 10px; padding: 1.1rem 1.3rem 1.2rem; }
/* Le nombre de jours restants en très grand : c'est la seule information que
   le président cherche en ouvrant cette page. */
.abo-etat .grand-chiffre { margin: .1rem 0 0; font-family: "Philosopher", Georgia, serif; font-size: 2.6rem; line-height: 1; font-variant-numeric: tabular-nums; }
.abo-etat .sous { margin: .15rem 0 0; text-align: left; font-size: .95rem; }
.abo-etat hr { border: none; border-top: 1px solid var(--ligne); margin: 1rem 0 .6rem; }
.abo-etat .montant-annuel { margin: 0; text-align: left; font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.abo-resolution { background: var(--surface); border: 1px solid var(--ligne); border-radius: 10px; padding: 1.1rem 1.3rem 1.2rem; }
.abo-resolution blockquote {
  margin: .7rem 0; padding: .8rem 1rem;
  background: var(--fond); border-left: 4px solid var(--vert); border-radius: 0 8px 8px 0;
  font-size: .92rem;
}
.abo-resolution blockquote p { margin: 0 0 .6rem; }
.abo-resolution blockquote p:last-child { margin-bottom: 0; }

/* Le règlement en ligne (2 septembre 2026). Le bloc d'attente n'est pas un
   avertissement : un virement en route est une bonne nouvelle, simplement
   lente. Il prend donc le ton neutre de la surface, un filet à gauche pour se
   distinguer de l'état au-dessus, et surtout pas le ton d'alerte — le
   président qui vient de payer n'a rien fait de mal. */
.attente-reglement {
  margin: .9rem 0 0;
  padding: .7rem .9rem;
  background: var(--surface);
  border-left: 4px solid var(--vert);
  border-radius: 0 8px 8px 0;
}
.attente-reglement .etiquette { margin: 0; }
.attente-reglement .sous { margin: .1rem 0 0; }
.attente-reglement .aide { margin: .35rem 0 0; }

.regler { margin: 1rem 0 0; }
.regler .aide { margin: .45rem 0 0; }
.regler-epreuve { margin: .6rem 0 0; }
.regler-epreuve .bouton { font-size: .9rem; padding: .4rem .8rem; }

/* Les deux offres, côte à côte quand la place le permet et l'une sous l'autre
   sinon. Elles ne s'opposent pas visuellement : ce n'est pas un comparatif à
   deux colonnes avec un « recommandé » clignotant, c'est un choix entre deux
   périmètres, et le président sait lequel le concerne. */
.offres { display: grid; gap: .9rem; margin: .3rem 0 .2rem; }
@media (min-width: 62rem) { .offres { grid-template-columns: 1fr 1fr; } }
.offre {
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: 8px;
  padding: .7rem .9rem .85rem;
  display: flex; flex-direction: column;
}
.offre .etiquette { margin: 0; }
.offre .montant-annuel { margin: .1rem 0 .2rem; font-size: 1.2rem; }
.offre .aide { margin: 0 0 .6rem; flex: 1; }
.offre .regler { margin: 0; }
.offre .bouton-grand { font-size: .97rem; padding: .5rem 1rem; }

/* Un bouton désactivé doit se voir désactivé. Le 2 septembre 2026, le bouton
   de règlement l'était faute de coordonnées de facturation, et rien ne le
   montrait : Laurent a cliqué sur un bouton d'apparence normale, et rien ne
   s'est passé. Les boutons de cette page ne sont plus désactivés — le serveur
   explique ce qui manque —, mais la règle vaut pour tous ceux qui viendront. */
.bouton[disabled], .bouton:disabled {
  opacity: .45;
  cursor: not-allowed;
  filter: grayscale(1);
}