@charset "UTF-8";

/* ==========================================================================
   MaFamille — feuille de style
   Charte « Verger » : fond blanc, une couleur de marque verte reprise du
   logo, cartes à grands arrondis et ombres douces, barre latérale à gauche.
   Structure calquée sur celle de linxia-connect (tableau de bord clair),
   avec le vert du logo à la place du violet.
   Polices système : aucune requête externe, conforme à la CSP stricte.
   ========================================================================== */

/*
 * L'attribut « hidden » doit l'emporter : plusieurs composants posent un
 * display (flex, grid) par leur classe, ce qui sinon les rend visibles alors
 * que le script les avait masqués.
 */
[hidden] { display: none !important; }

/* --------------------------------------------------------------- variables */

:root {
  /* Marque — vert du logo et ses déclinaisons */
  --vert:         #2e7d4f;
  --vert-fonce:   #23603c;
  --vert-clair:   #eaf4ed;
  --vert-bord:    #cfe6d7;

  /* Accents secondaires, pour coder les rubriques et les données */
  --abricot:      #d97b28;
  --abricot-clair:#fdf2e6;
  --bleu:         #b0561f;
  --bleu-clair:   #ecf4f8;
  --prune:        #8d5a8f;

  /* Surfaces */
  --fond:          #f7f9f7;
  --surface:       #ffffff;
  --surface-2:     #f2f6f3;
  --bordure:       #e4ebe6;
  --bordure-forte: #cbd8cf;

  /* Texte — contrastes vérifiés sur --surface */
  --texte:         #16261b;   /* 14.6:1 */
  --texte-doux:    #4d6154;   /* 7.4:1  */
  --texte-tenu:    #6b7d72;   /* 5.1:1  */

  /* Sémantique */
  --succes:        #2e7d4f;
  --succes-fond:   #eaf4ed;
  --erreur:        #a32b22;
  --erreur-fond:   #fbeae8;
  --info:          #b0561f;
  --info-fond:     #ecf4f8;

  /* Rythme typographique */
  --serif:  ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
  --sans:   "Avenir Next", Avenir, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:   ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Espacement */
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1rem;
  --e5: 1.5rem;
  --e6: 2rem;
  --e7: 3rem;
  --e8: 4rem;

  /* Arrondis généreux, comme sur linxia-connect */
  --rayon:    9px;
  --rayon-lg: 16px;
  --rayon-xl: 24px;

  /* Ombres douces et basses, jamais dures */
  --ombre-1: 0 1px 4px rgba(133, 146, 173, .20);
  --ombre-2: 0 2px 10px rgba(133, 146, 173, .22);
  --ombre-3: 0 12px 32px rgba(133, 146, 173, .28);

  --largeur-max: 84rem;
  --largeur-texte: 68ch;
  --largeur-barre: 15rem;

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

  --z-carte:   10;
  --z-barre:   25;
  --z-entete:  30;
  --z-menu:    40;
  --z-modale:  50;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond:          #121714;
    --surface:       #1a211d;
    --surface-2:     #222b26;
    --bordure:       #2e3a33;
    --bordure-forte: #3d4c43;

    --texte:         #e9f0eb;
    --texte-doux:    #b6c6bc;
    --texte-tenu:    #91a698;

    --vert:          #519f6f;
    --vert-fonce:    #8ed0a7;
    --vert-clair:    #1f2f26;
    --vert-bord:     #2f4738;

    --abricot:       #e9a463;
    --abricot-clair: #2e2419;
    --bleu:          #c8783a;
    --bleu-clair:    #1b2831;

    --succes:        #519f6f;
    --succes-fond:   #1f2f26;
    --erreur:        #ef9d92;
    --erreur-fond:   #2f1c1a;
    --info:          #c8783a;
    --info-fond:     #1b2831;

    --ombre-1: 0 1px 4px rgba(0, 0, 0, .35);
    --ombre-2: 0 2px 10px rgba(0, 0, 0, .40);
    --ombre-3: 0 12px 32px rgba(0, 0, 0, .50);
  }
}

/* Choix explicite du thème sombre par le visiteur */
:root[data-theme="dark"] {
    --fond:          #121714;
    --surface:       #1a211d;
    --surface-2:     #222b26;
    --bordure:       #2e3a33;
    --bordure-forte: #3d4c43;

    --texte:         #e9f0eb;
    --texte-doux:    #b6c6bc;
    --texte-tenu:    #91a698;

    --vert:          #519f6f;
    --vert-fonce:    #8ed0a7;
    --vert-clair:    #1f2f26;
    --vert-bord:     #2f4738;

    --abricot:       #e9a463;
    --abricot-clair: #2e2419;
    --bleu:          #c8783a;
    --bleu-clair:    #1b2831;

    --succes:        #519f6f;
    --succes-fond:   #1f2f26;
    --erreur:        #ef9d92;
    --erreur-fond:   #2f1c1a;
    --info:          #c8783a;
    --info-fond:     #1b2831;

    --ombre-1: 0 1px 4px rgba(0, 0, 0, .35);
    --ombre-2: 0 2px 10px rgba(0, 0, 0, .40);
    --ombre-3: 0 12px 32px rgba(0, 0, 0, .50);
  }


/* ------------------------------------------------------------------ socle */

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

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

body {
  margin: 0;
  /* 17px : au-dessus du minimum de 16px sur mobile */
  font: 400 1.0625rem/1.6 var(--sans);
  color: var(--texte);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.25;
  color: var(--texte);
  margin: 0 0 var(--e3);
  text-wrap: balance;
}

h1 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem); }
h2 { font-size: clamp(1.375rem, 1.15rem + 1vw, 1.75rem); }
h3 { font-size: 1.1875rem; }
h4 { font-size: 1.0625rem; }

p { margin: 0 0 var(--e4); max-width: var(--largeur-texte); }

a {
  color: var(--vert-fonce);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--transition);
}

a:hover { color: var(--vert); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) a { color: var(--vert); }
}

/* Choix explicite du thème sombre par le visiteur */
:root[data-theme="dark"] a { color: var(--vert); }


/* Anneau de focus visible partout : jamais outline:none sans remplacement. */
:focus-visible {
  outline: 3px solid var(--vert);
  outline-offset: 2px;
  border-radius: 3px;
}

img { max-width: 100%; height: auto; display: block; }

hr {
  border: 0;
  border-top: 1px solid var(--bordure);
  margin: var(--e6) 0;
}

/* Lien d'évitement pour la navigation au clavier */
.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--vert);
  color: #fff;
  padding: var(--e3) var(--e4);
  z-index: var(--z-modale);
  border-radius: 0 0 var(--rayon) 0;
}

.saut-contenu:focus {
  left: 0;
}

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

/* ------------------------------------------------------------- disposition */

.conteneur {
  width: 100%;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--e4);
}

@media (min-width: 48rem) {
  .conteneur { padding-inline: var(--e5); }
}

.page { padding-block: var(--e5) var(--e8); }

.grille {
  display: grid;
  gap: var(--e5);
}

/* Grille éditoriale asymétrique : contenu principal + colonne latérale */
@media (min-width: 62rem) {
  .grille--editoriale {
    grid-template-columns: minmax(0, 2.2fr) minmax(16rem, 1fr);
    align-items: start;
  }
}

.grille--auto {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}

.grille--trois,
.grille--deux {
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .grille--deux  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.pile > * + * { margin-top: var(--e4); }
.pile-serree > * + * { margin-top: var(--e2); }

.rangee {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e3);
}

.rangee--espacee { justify-content: space-between; }
.rangee--enroulee { row-gap: var(--e2); }
.pousse-droite { margin-left: auto; }
.ml1 { margin-left: var(--e1); }
.ml2 { margin-left: var(--e3); }

/* ------------------------------------------------- en-tête et navigation */

.entete {
  position: sticky;
  top: 0;
  z-index: var(--z-entete);
  background: var(--surface);
  border-bottom: 1px solid var(--bordure);
  box-shadow: var(--ombre-1);
}

.entete__interieur {
  display: flex;
  align-items: center;
  gap: var(--e4);
  padding: var(--e3) var(--e4);
}

@media (min-width: 62rem) {
  .entete__interieur { padding-inline: var(--e5); }
}

/* Le logo et le nom du site */
.marque {
  display: inline-flex;
  align-items: center;
  gap: var(--e3);
  text-decoration: none;
  color: var(--texte);
  white-space: nowrap;
}

.marque__logo { width: 2.5rem; height: auto; flex: none; }

.marque__nom {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.marque__ext { color: var(--vert); }

/* Sur très petit écran le nom reste affiché, simplement réduit. */
@media (max-width: 34rem) {
  .marque__logo { width: 2rem; }
  .marque__nom  { font-size: 1rem; }
  .entete__interieur { gap: var(--e2); padding-inline: var(--e3); }
}

@media (max-width: 26rem) {
  .marque__nom { font-size: 0.875rem; }
  .marque__ext { display: none; }
}

/* Champ de recherche de l'en-tête */
.recherche-entete {
  position: relative;
  flex: 1 1 12rem;
  max-width: 26rem;
}

.recherche-entete__loupe {
  position: absolute;
  left: var(--e3);
  top: 50%;
  transform: translateY(-50%);
  width: 1.05rem;
  height: 1.05rem;
  color: var(--texte-tenu);
  pointer-events: none;
}

.recherche-entete input[type="search"] {
  width: 100%;
  min-height: 2.5rem;
  padding: var(--e2) var(--e3) var(--e2) 2.4rem;
  border: 1px solid var(--bordure);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--texte);
  font: 400 0.9375rem/1.4 var(--sans);
}

.recherche-entete input[type="search"]:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--vert);
  box-shadow: 0 0 0 3px var(--vert-clair);
}

/* Photo tirée au sort, avec la personne et son lien de parenté */
.moment {
  display: none;
  align-items: stretch;
  gap: var(--e3);
  padding: 0;
  overflow: hidden;
  border-radius: var(--rayon-lg);
  background: var(--surface);
  border: 1px solid var(--bordure);
  box-shadow: var(--ombre-1);
  text-decoration: none;
  color: inherit;
  max-width: 26rem;
  /*
   * Hauteur fixe : sans elle, une photo en portrait étirait la barre entière.
   * La marge basse négative laisse la vignette déborder sur les onglets sans
   * allonger l'en-tête ; le plan la fait passer au-dessus d'eux.
   */
  position: relative;
  z-index: 1;
  height: 6.25rem;
  align-self: center;
  margin-block: calc(var(--e2) * -1) calc(var(--e7) * -1);
  transition: box-shadow var(--transition), border-color var(--transition);
}

.moment:hover {
  box-shadow: var(--ombre-2);
  border-color: var(--vert);
  color: inherit;
}

@media (min-width: 68rem) { .moment { display: inline-flex; } }

/* Rectangulaire et large : la photo doit se voir, pas se deviner. */
.moment__image {
  width: 9rem;
  height: 100%;
  object-fit: cover;
  flex: none;
  background: var(--surface-2);
}

.moment__texte {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--e2) var(--e4) var(--e2) 0;
}

.moment__surtitre {
  display: block;
  margin-bottom: 0.15rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vert);
}

.moment__legende {
  display: block;
  font-size: 0.6875rem;
  color: var(--texte-tenu);
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.moment__texte { min-width: 0; line-height: 1.25; }

.moment__nom {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.moment__lien {
  display: block;
  font-size: 0.75rem;
  color: var(--texte-tenu);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ----------------------------------------- messagerie dans la barre */

.messagerie { position: relative; margin-left: auto; }

.messagerie__declencheur {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  color: var(--texte-doux);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.messagerie__declencheur:hover { background: var(--surface-2); color: var(--vert-fonce); }
.messagerie__declencheur svg { width: 1.35rem; height: 1.35rem; }

/* La pastille chevauche l'icône, comme partout ailleurs. */
.messagerie__compteur {
  position: absolute;
  top: 0.15rem;
  right: 0.1rem;
  min-width: 1.05rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: var(--erreur);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.05rem;
  text-align: center;
}

.messagerie__calque {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + var(--e2));
  z-index: var(--z-menu);
  /* Élargi de 22 à 27 rem : les aperçus de conversation tenaient sur trois
     lignes chacun, ce qui rendait la liste illisible d'un coup d'œil. */
  width: 27rem;
  max-width: calc(100vw - 2rem);
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-lg);
  box-shadow: var(--ombre-3);
  overflow: hidden;
}

.messagerie__bascule:checked ~ .messagerie__calque { display: block; }

.messagerie__entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0;
  padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--bordure);
  font-weight: 600;
}

.apercu {
  display: block;
  padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--bordure);
  color: inherit;
  text-decoration: none;
}

.apercu:hover { background: var(--surface-2); color: inherit; }

/* Un fil non lu se distingue par la couleur et le trait, pas seulement le gras. */
.apercu--nouveau {
  border-left: 3px solid var(--vert);
  background: var(--vert-clair);
}

.apercu__qui {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.apercu__texte {
  display: block;
  font-size: 0.8125rem;
  color: var(--texte-doux);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.apercu__date { display: block; margin-top: 2px; font-size: 0.6875rem; color: var(--texte-tenu); }

.messagerie__pied {
  display: block;
  padding: var(--e3);
  color: var(--vert-fonce);
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

.messagerie__pied:hover { background: var(--surface-2); }

/* Le menu du compte perd sa marge automatique : la messagerie la porte. */
.moi { position: relative; margin-left: var(--e2); }

/* ------------------------------------------------ menu de l'utilisateur */

.moi { position: relative; margin-left: auto; }

.moi__declencheur {
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e1) var(--e2) var(--e1) var(--e1);
  border-radius: 999px;
  border: 1px solid var(--bordure);
  background: var(--surface);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

.moi__declencheur:hover { background: var(--surface-2); border-color: var(--bordure-forte); }

.moi__portrait,
.moi__initiales {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  flex: none;
  object-fit: cover;
}

.moi__initiales {
  display: grid;
  place-items: center;
  background: var(--vert-clair);
  color: var(--vert);
  font-size: 0.75rem;
  font-weight: 700;
}

.moi__prenom {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--texte);
  white-space: nowrap;
}

.moi__chevron {
  width: 1rem;
  height: 1rem;
  color: var(--texte-tenu);
  transition: transform var(--transition);
}

.moi__bascule:checked ~ .moi__declencheur .moi__chevron { transform: rotate(180deg); }

@media (max-width: 40rem) {
  .moi__prenom, .moi__chevron { display: none; }
  .moi__declencheur { padding: var(--e1); }
}

/* Le calque, ouvert par la case à cocher — aucun script nécessaire. */
.moi__calque {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + var(--e2));
  z-index: var(--z-menu);
  min-width: 15rem;
  padding: var(--e2);
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-lg);
  box-shadow: var(--ombre-3);
}

.moi__bascule:checked ~ .moi__calque { display: block; }

.moi__entete {
  margin: 0;
  padding: var(--e3);
  border-bottom: 1px solid var(--bordure);
}

.moi__nom {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
}

.moi__mail {
  display: block;
  font-size: 0.8125rem;
  color: var(--texte-tenu);
  overflow: hidden;
  text-overflow: ellipsis;
}

.moi__lien {
  display: block;
  width: 100%;
  padding: var(--e3);
  margin-top: 2px;
  border: 0;
  border-radius: var(--rayon);
  background: none;
  color: var(--texte-doux);
  font: 400 0.9375rem/1.4 var(--sans);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.moi__lien:hover { background: var(--surface-2); color: var(--texte); }

.moi__lien--bouton {
  margin-top: var(--e2);
  border-top: 1px solid var(--bordure);
  border-radius: 0 0 var(--rayon) var(--rayon);
  color: var(--erreur);
}

/* Onglets de premier niveau */
.onglets {
  display: flex;
  gap: var(--e1);
  padding: 0 var(--e4);
  overflow-x: auto;
  scrollbar-width: none;
}

.onglets::-webkit-scrollbar { display: none; }

@media (min-width: 62rem) {
  .onglets { padding-inline: var(--e5); }
}

.onglets__lien {
  padding: var(--e3) var(--e4);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--texte-doux);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}

.onglets__lien:hover { color: var(--texte); }

.onglets__lien[aria-current="page"] {
  color: var(--vert);
  border-bottom-color: var(--vert);
}

/* Bouton hamburger : n'apparaît que quand la barre latérale est repliée */
.entete__hamburger {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: var(--rayon);
  border: 1px solid var(--bordure);
  color: var(--texte-doux);
  cursor: pointer;
}

.entete__hamburger svg { width: 1.25rem; height: 1.25rem; }
.entete__hamburger:hover { background: var(--surface-2); }

@media (min-width: 62rem) { .entete__hamburger { display: none; } }

/* ----------------------------------------------- cadre et barre latérale */

.cadre {
  display: grid;
  grid-template-columns: 1fr;
  max-width: var(--largeur-max);
  margin-inline: auto;
}

@media (min-width: 62rem) {
  .cadre { grid-template-columns: var(--largeur-barre) minmax(0, 1fr); }

  /* Sans barre latérale, le contenu prend toute la largeur. */
  .cadre--large { grid-template-columns: minmax(0, 1fr); }
}

.barre {
  display: none;
  padding: var(--e5) var(--e3);
  border-right: 1px solid var(--bordure);
  background: var(--surface);
}

/* Sur mobile, la barre se déplie sous l'en-tête via la case à cocher. */
.barre-bascule:checked ~ .cadre .barre { display: block; }

@media (min-width: 62rem) {
  .barre {
    display: block;
    position: sticky;
    top: 7.5rem;
    align-self: start;
    max-height: calc(100dvh - 7.5rem);
    overflow-y: auto;
  }
}

.barre__titre {
  margin: 0 0 var(--e3);
  padding-left: var(--e3);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texte-tenu);
}

.barre__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.barre__lien {
  display: block;
  padding: var(--e3);
  border-radius: var(--rayon);
  font-size: 0.9375rem;
  color: var(--texte-doux);
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}

.barre__lien:hover { background: var(--surface-2); color: var(--texte); }

.barre__lien[aria-current="page"] {
  background: var(--vert);
  color: #fff;
  font-weight: 600;
  box-shadow: var(--ombre-1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .barre__lien[aria-current="page"] { color: #10221a; }
}

/* Choix explicite du thème sombre par le visiteur */
:root[data-theme="dark"] .barre__lien[aria-current="page"] { color: #10221a; }


.barre__pied {
  margin-top: var(--e5);
  padding: var(--e3);
  border-top: 1px solid var(--bordure);
}

.barre__moi {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--texte-tenu);
}

.contenu {
  min-width: 0;
  padding: var(--e5) var(--e4) var(--e8);
}

@media (min-width: 62rem) {
  .contenu { padding: var(--e6) var(--e6) var(--e8); }
}

/* ------------------------------------------------------------------ cartes */

.carte {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-xl);
  padding: var(--e5);
  box-shadow: var(--ombre-1);
}

.carte__titre {
  font-size: 1.0625rem;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--texte-tenu);
  margin-bottom: var(--e4);
}

/* ------------------------------------------------- carte « personne » */

.personne {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3);
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  /* La bordure change de couleur, pas la taille : aucun décalage au survol. */
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.personne:hover {
  border-color: var(--vert);
  box-shadow: var(--ombre-2);
  background: var(--surface);
}

.personne__portrait {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-2);
  flex-shrink: 0;
}

.personne__initiales {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--vert-clair);
  color: var(--vert-fonce);
  font-weight: 600;
  font-size: 0.9375rem;
  flex-shrink: 0;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .personne__initiales { background: var(--surface-2); color: var(--vert); }
}

/* Choix explicite du thème sombre par le visiteur */
:root[data-theme="dark"] .personne__initiales { background: var(--surface-2); color: var(--vert); }


.personne__texte { min-width: 0; }

.personne__nom {
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.personne__meta {
  font-size: 0.8125rem;
  color: var(--texte-tenu);
  line-height: 1.4;
}

.personne--compacte { padding: var(--e2); }
.personne--compacte .personne__portrait,
.personne--compacte .personne__initiales { width: 2.25rem; height: 2.25rem; font-size: 0.8125rem; }

/* Repère de sexe, doublé d'un libellé textuel : la couleur n'est jamais
   le seul porteur d'information. */
.personne--f { border-left: 3px solid var(--vert); }
.personne--m { border-left: 3px solid var(--bleu); }

/* --------------------------------------------------------------- arbre */

.arbre {
  overflow-x: auto;
  padding-bottom: var(--e4);
  -webkit-overflow-scrolling: touch;
}

.arbre__niveaux {
  display: flex;
  gap: var(--e5);
  align-items: center;
  min-width: min-content;
}

.arbre__colonne {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: var(--e2);
  min-width: 12.5rem;
}

.arbre__couple {
  display: flex;
  flex-direction: column;
  gap: var(--e1);
  padding-left: var(--e4);
  position: relative;
}

/* Traits de filiation dessinés en CSS, sans images. */
.arbre__couple::before {
  content: "";
  position: absolute;
  left: 0;
  top: 25%;
  bottom: 25%;
  width: 2px;
  background: var(--bordure-forte);
}

.arbre__couple::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: var(--e3);
  height: 2px;
  background: var(--bordure-forte);
  transform: translateX(-100%);
}

.arbre__vide {
  display: grid;
  place-items: center;
  min-height: 3.25rem;
  padding: var(--e2);
  border: 1px dashed var(--bordure-forte);
  border-radius: var(--rayon);
  color: var(--texte-tenu);
  font-size: 0.8125rem;
  font-style: italic;
}

/* Arbre familial : parents au-dessus, fratrie et enfants en dessous */
.foyer {
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-lg);
  padding: var(--e4);
  background: var(--surface-2);
}

.foyer__couple {
  display: grid;
  gap: var(--e3);
  margin-bottom: var(--e4);
}

@media (min-width: 40rem) {
  .foyer__couple { grid-template-columns: 1fr auto 1fr; align-items: center; }
}

.foyer__lien {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  padding: var(--e1) var(--e3);
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--bordure);
  font-size: 0.8125rem;
  color: var(--texte-doux);
  white-space: nowrap;
}

.foyer__enfants {
  padding-top: var(--e4);
  border-top: 1px dashed var(--bordure-forte);
}

/* Descendance : liste imbriquée avec traits de rattachement */
.descendance,
.descendance ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.descendance ul {
  margin-left: var(--e4);
  padding-left: var(--e5);
  border-left: 2px solid var(--bordure);
}

.descendance li { margin-block: var(--e2); position: relative; }

.descendance ul > li::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--e5));
  top: 1.5rem;
  width: var(--e4);
  height: 2px;
  background: var(--bordure);
}

/* -------------------------------------------------------------- galerie */

.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
  gap: var(--e3);
}

.vignette {
  position: relative;
  display: block;
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--bordure);
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.vignette:hover {
  border-color: var(--vert);
  box-shadow: var(--ombre-2);
}

.vignette__image {
  /* Le rapport est réservé avant chargement : pas de saut de mise en page. */
  aspect-ratio: 1;
  width: 100%;
  object-fit: cover;
}

.vignette__legende {
  padding: var(--e2) var(--e3);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--texte-doux);
  background: var(--surface);
}

.photo-pleine {
  max-width: 100%;
  border-radius: var(--rayon-lg);
  border: 1px solid var(--bordure);
  background: var(--surface-2);
}


/* --------------------------------------- identification sur les photos */

/*
 * Les repères sont positionnés en pourcentage : ils suivent l'image quelle
 * que soit sa taille d'affichage. Les variables --x et --y sont posées par
 * le script (la CSP interdit l'attribut « style » dans le HTML).
 */
.marquage {
  position: relative;
  display: inline-block;
  max-width: 100%;
  line-height: 0;
}

.marquage img.photo-pleine {
  display: block;
}

.marquage--actif img.photo-pleine {
  cursor: crosshair;
}

.marqueur {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: 0;
  height: 0;
  line-height: 1;
  text-decoration: none;
  color: inherit;
}

/* Le cadre est centré sur le point cliqué. */
.marqueur__cadre {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4.5rem;
  height: 4.5rem;
  transform: translate(-50%, -50%);
  border: 2px solid rgb(255 255 255 / 0.9);
  border-radius: var(--rayon);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.35), inset 0 0 0 1px rgb(0 0 0 / 0.2);
  opacity: 0.55;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}

.marqueur__nom {
  position: absolute;
  left: 50%;
  top: calc(50% + 2.5rem);
  transform: translateX(-50%);
  padding: 0.15rem 0.5rem;
  max-width: 11rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.8125rem;
  color: #fff;
  background: rgb(0 0 0 / 0.72);
  border-radius: var(--rayon);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.marqueur:hover .marqueur__cadre,
.marqueur:focus-visible .marqueur__cadre,
.marqueur--vu .marqueur__cadre {
  opacity: 1;
  border-color: #fff;
}

.marqueur:hover .marqueur__nom,
.marqueur:focus-visible .marqueur__nom,
.marqueur--vu .marqueur__nom {
  opacity: 1;
}

.marqueur--provisoire .marqueur__cadre {
  opacity: 1;
  border-style: dashed;
}

.est-vise {
  border-radius: var(--rayon-lg);
  box-shadow: 0 0 0 2px var(--vert);
}

.marquage-barre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e3);
  margin-top: var(--e3);
}

.marquage-choix {
  margin-top: var(--e3);
  max-width: 26rem;
}

/* Bouton discret présenté comme un lien (retirer une identification). */
.lien-nu {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--texte-doux);
  text-decoration: underline;
  cursor: pointer;
}

.lien-nu:hover {
  color: var(--vert);
}


/* ------------------------------------------- comparaison de deux fiches */

table.comparaison th[scope="row"] {
  width: 12rem;
  text-align: left;
  font-weight: 600;
  color: var(--texte-doux);
  vertical-align: top;
}

table.comparaison td {
  vertical-align: top;
}

/* Les lignes qui diffèrent sont celles qu'il faut regarder. */
table.comparaison tr.comparaison__differe > td,
table.comparaison tr.comparaison__differe > th {
  background: var(--abricot-clair);
}

.choix-fiche {
  display: flex;
  align-items: flex-start;
  gap: var(--e2);
  cursor: pointer;
}

.choix-fiche input[type="radio"] {
  margin-top: 0.2rem;
  flex: none;
}

.choix-fiche__texte {
  display: flex;
  flex-direction: column;
  gap: var(--e1);
  align-items: flex-start;
}

.choix-fiche__titre {
  font-weight: 600;
}


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

/* Le groupe jour/mois/année sert d'ancrage au calque. */
.champ__inline[data-date] {
  position: relative;

  /*
   * UNE SEULE LIGNE, TOUJOURS. Jour, mois, année et le bouton du calendrier
   * forment une seule date ; sur deux lignes, ils se lisent comme deux champs
   * sans rapport.
   *
   * J'ai tourné deux fois autour du vrai problème. « nowrap » faisait déborder
   * le groupe hors de sa carte dans une colonne étroite ; j'ai alors autorisé
   * l'enroulement, ce qui a réglé le débordement et cassé la ligne unique.
   * Aucun des deux n'était la cause.
   *
   * La cause, ce sont les largeurs minimales : tant que chaque champ refuse de
   * se comprimer, la somme dépasse forcément le cadre et il faut bien que
   * quelque chose cède. En les laissant se réduire — le mois prenant ce qui
   * reste — les quatre tiennent sur une ligne dans 266 pixels comme dans 900.
   */
  flex-wrap: nowrap;
}

/*
 * Le jour et l'année sont bornés par leur contenu : deux et quatre chiffres,
 * qui ne s'abrègent pas. Le mois absorbe la place restante, et c'est lui qui
 * se rogne quand elle manque — « septembre » tronqué reste identifiable, un
 * jour tronqué ne l'est pas.
 */
.champ__inline[data-date] select[id$="_d"] {
  flex: 0 0 3.25rem;
  min-width: 0;
  padding-inline: var(--e2);
}

.champ__inline[data-date] select[id$="_m"] {
  flex: 1 1 4rem;
  min-width: 0;
  /* Sans plafond, le mois avalait toute la largeur restante sur un
     formulaire large : « septembre » dans un champ de sept cents pixels. */
  max-width: 11rem;
  padding-inline: var(--e2);
}

/* La ligne ne s'étale pas non plus : une date reste un petit objet. */
.champ__inline[data-date] { max-width: 26rem; }

.champ__inline[data-date] input[type="number"],
.champ__inline[data-date] input[id$="_y"] {
  flex: 0 0 3.5rem;
  width: 3.5rem;
  min-width: 0;
  padding-inline: var(--e2);
}

.champ__inline[data-date] .date-ouvrir {
  flex: 0 0 2.25rem;
  width: 2.25rem;
  height: 2.25rem;
}

.champ__inline[data-date] select { min-width: 0; flex: 1 1 auto; }



.date-ouvrir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  padding: 0;
  border: 1px solid var(--bordure-forte);
  border-radius: var(--rayon);
  background: var(--surface);
  color: var(--texte-doux);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}

.date-ouvrir svg { width: 1.15rem; height: 1.15rem; }

.date-ouvrir:hover {
  border-color: var(--vert);
  color: var(--vert);
}

.calendrier-calque {
  position: absolute;
  top: calc(100% + var(--e2));
  left: 0;
  z-index: var(--z-menu);
  width: 19rem;
  max-width: calc(100vw - 2rem);
  padding: var(--e3);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-lg);
  background: var(--surface);
  box-shadow: var(--ombre-3);
}

.calendrier-calque__entete {
  display: flex;
  align-items: center;
  gap: var(--e1);
  margin-bottom: var(--e2);
}

.calendrier-calque__fleche,
.calendrier-calque__titre,
.calendrier-calque__action,
.calendrier-calque__case {
  border: 0;
  background: none;
  font: inherit;
  color: var(--texte);
  cursor: pointer;
  border-radius: var(--rayon);
  transition: background var(--transition), color var(--transition);
}

.calendrier-calque__fleche {
  width: 2rem;
  height: 2rem;
  flex: none;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--texte-doux);
}

.calendrier-calque__titre {
  flex: 1;
  padding: var(--e1) var(--e2);
  font-weight: 600;
  text-align: center;
}

.calendrier-calque__fleche:hover,
.calendrier-calque__titre:hover,
.calendrier-calque__case:hover,
.calendrier-calque__action:hover {
  background: var(--vert-clair);
  color: var(--vert-fonce);
}

.calendrier-calque__grille {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.calendrier-calque__grille--large {
  grid-template-columns: repeat(4, 1fr);
  gap: var(--e1);
}

.calendrier-calque__jour-nom {
  padding: var(--e1) 0;
  font-size: 0.6875rem;
  font-weight: 700;
  text-align: center;
  color: var(--texte-tenu);
}

.calendrier-calque__case {
  padding: var(--e2) 0;
  font-size: 0.8125rem;
  text-align: center;
}

.calendrier-calque__case.est-choisi {
  background: var(--vert);
  color: #fff;
  font-weight: 600;
}

.calendrier-calque__vide { visibility: hidden; }

.calendrier-calque__pied {
  display: flex;
  gap: var(--e2);
  margin-top: var(--e2);
  padding-top: var(--e2);
  border-top: 1px solid var(--bordure);
}

.calendrier-calque__action {
  flex: 1;
  padding: var(--e2);
  font-size: 0.8125rem;
  color: var(--texte-doux);
}


/* --------------------------------------------- frise des photos par année */

.graphe--frise {
  margin: 0;
}

/* preserveAspectRatio="none" : la frise s'étire en largeur, pas en hauteur. */
.graphe--frise svg {
  display: block;
  width: 100%;
  height: 8rem;
}

.graphe--frise .grille { stroke: var(--bordure); }
.graphe--frise .axe-texte { fill: var(--texte-tenu); font-size: 11px; }

.frise__barre { fill: var(--vert); }

/* Hors de la période choisie : présent, mais en retrait. */
.frise__barre--hors { fill: var(--bordure-forte); }

/* Rectangle transparent plein-hauteur : la cible du clic. */
.frise__zone {
  fill: transparent;
}

.graphe--frise a:hover .frise__zone {
  fill: var(--vert-clair);
}

.graphe--frise a:hover .frise__barre {
  fill: var(--vert-fonce);
}

.graphe--frise a:focus-visible .frise__zone {
  fill: var(--vert-clair);
  stroke: var(--vert);
}


/* --------------------------------------------- menu « Ajouter » d'une fiche */

.ajout { position: relative; }

.ajout__declencheur {
  gap: var(--e2);
  cursor: pointer;
}

.ajout__declencheur svg { width: 1rem; height: 1rem; }
.ajout__chevron { transition: transform var(--transition); }
.ajout__bascule:checked ~ .ajout__declencheur .ajout__chevron { transform: rotate(180deg); }

.ajout__calque {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + var(--e2));
  z-index: var(--z-menu);
  min-width: 12rem;
  padding: var(--e2);
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-lg);
  box-shadow: var(--ombre-3);
}

.ajout__bascule:checked ~ .ajout__calque { display: block; }

.ajout__lien {
  display: block;
  padding: var(--e3);
  margin-top: 2px;
  border-radius: var(--rayon);
  color: var(--texte-doux);
  font-size: 0.9375rem;
  text-decoration: none;
}

.ajout__lien:hover { background: var(--surface-2); color: var(--texte); }

/* ------------------------------------------------------------ messagerie */

.fils { display: flex; flex-direction: column; gap: var(--e2); }

.fil {
  display: flex;
  align-items: center;
  gap: var(--e4);
  padding: var(--e4);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-lg);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.fil:hover { border-color: var(--vert); box-shadow: var(--ombre-1); color: inherit; }

.fil--nouveau { border-left: 3px solid var(--vert); }

.fil__portraits { display: flex; flex: none; }
.fil__portraits > * + * { margin-left: -0.6rem; }

.fil__portrait {
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--surface);
  background: var(--surface-2);
}

.fil__portrait--initiales {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--texte-doux);
}

.fil__texte { min-width: 0; flex: 1; }

.fil__personnes { display: block; font-weight: 600; }
.fil--nouveau .fil__personnes { color: var(--vert-fonce); }

.fil__sujet { display: block; font-size: 0.875rem; color: var(--texte-doux); }

.fil__extrait {
  display: block;
  font-size: 0.875rem;
  color: var(--texte-tenu);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fil__date {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--e2);
  font-size: 0.75rem;
  color: var(--texte-tenu);
  white-space: nowrap;
}

.fil__pastille,
.moi__pastille {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--vert);
}

.moi__compteur {
  float: right;
  min-width: 1.25rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--vert);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
}

/* Aperçu d'un échange, sur la fiche d'une personne. */
.echange {
  display: block;
  padding: var(--e3);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--surface-2);
  text-decoration: none;
  color: inherit;
}

.echange:hover { border-color: var(--vert); color: inherit; }

.echange__qui {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--vert-fonce);
}

.echange__texte { display: block; font-size: 0.875rem; }

.echange__date {
  display: block;
  margin-top: var(--e1);
  font-size: 0.6875rem;
  color: var(--texte-tenu);
}

/* ---------------------------------------------------------- discussion */

.discussion { display: flex; flex-direction: column; gap: var(--e4); }

.bulle { display: flex; gap: var(--e3); align-items: flex-end; }
.bulle--moi { flex-direction: row-reverse; }

.bulle__portrait {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-2);
}

.bulle__portrait--initiales {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--texte-doux);
}

.bulle__corps {
  max-width: 34rem;
  padding: var(--e3) var(--e4);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-lg);
  background: var(--surface);
}

/* Ses propres messages se distinguent par la couleur, pas seulement le côté. */
.bulle--moi .bulle__corps {
  background: var(--vert-clair);
  border-color: var(--vert-bord);
}

.bulle__nom {
  margin: 0 0 var(--e1);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--vert-fonce);
}

.bulle__texte { margin: 0; }

.bulle__date {
  margin: var(--e1) 0 0;
  font-size: 0.6875rem;
  color: var(--texte-tenu);
}

.bulle--moi .bulle__date { text-align: right; }


/* ------------------------------------------- carte semée de points (Agora) */

.carte-dessin--points .carte__fond {
  fill: var(--surface-2);
  stroke: var(--bordure);
  stroke-width: 0.6;
}

.carte-dessin--vise { cursor: crosshair; }

.carte__halo {
  fill: var(--vert);
  opacity: 0.18;
}

.carte__pastille {
  fill: var(--vert);
  stroke: var(--surface);
  stroke-width: 1.5;
}

.carte__point:hover .carte__halo { opacity: 0.35; }
.carte__point:hover .carte__pastille { fill: var(--vert-fonce); }

.carte__point:focus-visible .carte__pastille {
  stroke: var(--texte);
  stroke-width: 2.5;
}


/* --------------------------------------------- diagnostic des courriels */

.controle {
  display: flex;
  gap: var(--e3);
  align-items: flex-start;
  padding: var(--e3) 0;
  border-bottom: 1px solid var(--bordure);
}

.controle:last-child { border-bottom: 0; }

.controle__icone {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.8125rem;
}

.controle--ok .controle__icone        { background: var(--succes-fond); color: var(--succes); }
.controle--attention .controle__icone { background: var(--abricot-clair); color: var(--abricot); }
.controle--erreur .controle__icone    { background: var(--erreur-fond); color: var(--erreur); }

.controle__detail {
  display: block;
  font-size: 0.875rem;
  color: var(--texte-doux);
  word-break: break-word;
}

/* Le dialogue avec le serveur : lisible tel quel, sans mise en forme. */
.dialogue {
  margin: 0;
  padding: var(--e4);
  border-radius: var(--rayon);
  background: var(--surface-2);
  border: 1px solid var(--bordure);
  font: 0.8125rem/1.6 var(--mono);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.dialogue__envoi   { color: var(--texte-doux); }
.dialogue__reponse { color: var(--vert-fonce); }

/* ------------------------------------------------------- suivi des erreurs */

.erreur { border-left: 3px solid var(--bordure-forte); }
.erreur--active,
.erreur--revenue  { border-left-color: var(--erreur); }
.erreur--corrigee { border-left-color: var(--succes); opacity: 0.75; }

.erreur summary {
  cursor: pointer;
  color: var(--texte-doux);
}

/* ------------------------------------------------- en-tête d'une fiche */

.fiche-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e4);
}

.fiche-entete__identite {
  display: flex;
  align-items: center;
  gap: var(--e4);
  min-width: 0;
}

.fiche-entete__portrait {
  width: 4.5rem;
  height: 4.5rem;
  flex: none;
  /* Arrondi franc plutôt que cercle : la charte du site est aux grands
     rayons, et un portrait carré arrondi recadre moins les visages. */
  border-radius: var(--rayon-lg);
  object-fit: cover;
  background: var(--surface-2);
  box-shadow: var(--ombre-1);
}

.fiche-entete__portrait--initiales {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--texte-doux);
}

.fiche-entete__texte { min-width: 0; }

.fiche-entete__parente {
  margin-top: var(--e1);
  font-size: 0.9375rem;
  color: var(--vert-fonce);
}

/* Les actions s'empilent à droite : modifier au-dessus, le reste en ligne. */
.fiche-entete__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--e2);
  /*
   * « align-items » ne suffisait pas. Sur un nom long, le bloc d'identité
   * occupe toute la largeur et les actions passent à la ligne suivante ; seules
   * sur cette ligne, « justify-content: space-between » les ramenait à gauche,
   * et le bouton Modifier flottait au milieu. La marge automatique les tient à
   * droite quel que soit le retour à la ligne.
   */
  margin-left: auto;
}

.fiche-entete__actions .rangee {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.fiche-entete__actions .bouton svg { width: 1rem; height: 1rem; }

@media (max-width: 48rem) {
  .fiche-entete__actions { align-items: stretch; width: 100%; }
}

/* --------------------------------------------- titre d'une fiche */

.titre-personne {
  display: flex;
  align-items: center;
  gap: var(--e4);
  min-width: 0;
}

.titre-personne__portrait {
  width: 3.5rem;
  height: 3.5rem;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-2);
  border: 2px solid var(--surface);
  box-shadow: var(--ombre-1);
}

.titre-personne__portrait--initiales {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--texte-doux);
}

/* ---------------------------------------------- onglets de filtrage */

.onglets-filtre {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
}

.onglets-filtre__lien {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e2) var(--e4);
  border: 1px solid var(--bordure);
  border-radius: 999px;
  background: var(--surface);
  color: var(--texte-doux);
  font-size: 0.9375rem;
  text-decoration: none;
  transition: border-color var(--transition), color var(--transition);
}

.onglets-filtre__lien:hover { border-color: var(--vert); color: var(--vert-fonce); }

.onglets-filtre__lien.est-actif {
  background: var(--vert);
  border-color: var(--vert);
  color: #fff;
  font-weight: 600;
}

.onglets-filtre__nombre {
  min-width: 1.5rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--texte-doux);
  font-size: 0.8125rem;
  font-weight: 700;
  text-align: center;
}

.onglets-filtre__lien.est-actif .onglets-filtre__nombre {
  background: rgb(255 255 255 / 0.25);
  color: #fff;
}

/* --------------------------------------------------------- émoticônes */

.emoticones { position: relative; margin-top: var(--e2); }

.emoticones__declencheur {
  padding: var(--e1) var(--e3);
  border: 1px solid var(--bordure-forte);
  border-radius: var(--rayon);
  background: var(--surface);
  font-size: 1.125rem;
  line-height: 1.2;
  cursor: pointer;
}

.emoticones__declencheur:hover { border-color: var(--vert); }

.emoticones__choix {
  position: absolute;
  bottom: calc(100% + var(--e2));
  left: 0;
  z-index: var(--z-menu);
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 2px;
  width: max-content;
  max-width: min(24rem, 90vw);
  padding: var(--e2);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-lg);
  background: var(--surface);
  box-shadow: var(--ombre-3);
}

.emoticones__item {
  padding: var(--e1);
  border: 0;
  border-radius: var(--rayon);
  background: none;
  font-size: 1.25rem;
  line-height: 1.2;
  cursor: pointer;
}

.emoticones__item:hover { background: var(--vert-clair); }

@media (max-width: 30rem) {
  .emoticones__choix { grid-template-columns: repeat(6, 1fr); }
}

/* ------------------------------------------------------ boîte à idées */

.idee--faite   { opacity: 0.7; }
.idee--ecartee { opacity: 0.55; }

.idee__corps { display: flex; gap: var(--e4); align-items: flex-start; }
.idee__texte { min-width: 0; flex: 1; }
.idee__soutien { flex: none; }

.idee__vote {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 3.25rem;
  padding: var(--e2);
  border: 1px solid var(--bordure-forte);
  border-radius: var(--rayon);
  background: var(--surface);
  color: var(--texte-doux);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}

.idee__vote:hover { border-color: var(--vert); color: var(--vert-fonce); }

.idee__vote.est-soutenue {
  background: var(--vert-clair);
  border-color: var(--vert);
  color: var(--vert-fonce);
}

.idee__fleche { font-size: 0.75rem; line-height: 1; }
.idee__nombre { font-size: 1.0625rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* La réponse de l'administration se distingue de la proposition. */
.idee__reponse {
  padding: var(--e3);
  border-left: 3px solid var(--vert);
  background: var(--surface-2);
  border-radius: var(--rayon);
  font-size: 0.9375rem;
}

/* --------------------------------------------------- connexion Google */

.separateur {
  display: flex;
  align-items: center;
  gap: var(--e3);
  margin: var(--e5) 0;
  color: var(--texte-tenu);
  font-size: 0.875rem;
}

.separateur::before,
.separateur::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--bordure);
}

/* Le bouton reprend la charte de Google, qui l'impose pour son usage. */
.bouton-tiers,
.bouton-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e3);
  width: 100%;
  min-height: 2.75rem;
  padding: var(--e2) var(--e5);
  border: 1px solid #dadce0;
  border-radius: var(--rayon);
  background: #ffffff;
  color: #3c4043;
  font: 600 0.9375rem/1.4 var(--sans);
  text-decoration: none;
  transition: box-shadow var(--transition), background var(--transition);
}

/*
 * L'écart entre deux boutons de connexion tiers. Il tenait auparavant à un
 * « margin-bottom » posé sur .bouton-tiers seul : le jour où Google est passé
 * devant, la marge s'est retrouvée sous le dernier bouton et les deux se sont
 * collés. La règle porte maintenant sur la succession, quel que soit l'ordre.
 */
.bouton-tiers + .bouton-tiers,
.bouton-tiers + .bouton-google,
.bouton-google + .bouton-tiers,
.bouton-google + .bouton-google {
  margin-top: var(--e3);
}

.bouton-tiers:hover,
.bouton-google:hover {
  background: #f8f9fa;
  box-shadow: var(--ombre-1);
  color: #3c4043;
}

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

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: 2.75rem;
  padding: var(--e2) var(--e5);
  border: 1px solid transparent;
  border-radius: var(--rayon);
  background: var(--vert);
  color: #fff;
  font: 600 0.9375rem/1.2 var(--sans);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.bouton:hover { background: var(--vert-fonce); color: #fff; }

.bouton:disabled,
.bouton[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

.bouton--secondaire {
  background: var(--surface);
  color: var(--texte);
  border-color: var(--bordure-forte);
}

.bouton--secondaire:hover {
  background: var(--surface-2);
  color: var(--texte);
  border-color: var(--vert);
}

.bouton--discret {
  background: transparent;
  color: var(--texte-doux);
  border-color: transparent;
  padding-inline: var(--e3);
}

.bouton--discret:hover { background: var(--surface-2); color: var(--texte); }

.bouton--danger { background: var(--erreur); }
.bouton--danger:hover { background: #7d241a; color: #fff; }

.bouton--petit { min-height: 2.25rem; padding: var(--e1) var(--e3); font-size: 0.8125rem; }

.bouton__icone { width: 1.125rem; height: 1.125rem; flex-shrink: 0; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bouton { color: #1a1510; }
  :root:not([data-theme="light"]) .bouton:hover { color: #1a1510; }
  :root:not([data-theme="light"]) .bouton--secondaire { color: var(--texte); }
  :root:not([data-theme="light"]) .bouton--secondaire:hover { color: var(--texte); }
  :root:not([data-theme="light"]) .bouton--danger { color: #1a1510; }
  :root:not([data-theme="light"]) .bouton--danger:hover { background: #d98577; color: #1a1510; }
}

/* Choix explicite du thème sombre par le visiteur */
:root[data-theme="dark"] .bouton { color: #1a1510; }
  :root[data-theme="dark"] .bouton:hover { color: #1a1510; }
  :root[data-theme="dark"] .bouton--secondaire { color: var(--texte); }
  :root[data-theme="dark"] .bouton--secondaire:hover { color: var(--texte); }
  :root[data-theme="dark"] .bouton--danger { color: #1a1510; }
  :root[data-theme="dark"] .bouton--danger:hover { background: #d98577; color: #1a1510; }


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

.champ { margin-bottom: var(--e4); }

.champ__label {
  display: block;
  margin-bottom: var(--e2);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--texte-doux);
}

.champ__aide {
  display: block;
  margin-top: var(--e1);
  font-size: 0.8125rem;
  color: var(--texte-tenu);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="file"],
select,
textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--e2) var(--e3);
  border: 1px solid var(--bordure-forte);
  border-radius: var(--rayon);
  background: var(--surface);
  color: var(--texte);
  /* 16px minimum : en dessous, iOS zoome au focus. */
  font: 400 1rem/1.5 var(--sans);
  transition: border-color var(--transition), box-shadow var(--transition);
}

textarea { min-height: 8rem; resize: vertical; }

input:hover,
select:hover,
textarea:hover { border-color: var(--vert); }

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--vert);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vert) 25%, transparent);
}

input::placeholder,
textarea::placeholder { color: var(--texte-tenu); opacity: 1; }

select {
  appearance: none;
  padding-right: var(--e6);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236f6558'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--e3) center;
  background-size: 1rem;
}

.champ__inline {
  display: flex;
  gap: var(--e2);
  align-items: center;
  flex-wrap: wrap;
}

/* Jour / mois / année sur une seule ligne, chacun à sa largeur utile.
   Les sélecteurs sont qualifiés par leur type : sinon la règle générique
   « input[...] { width: 100% } », de spécificité supérieure à une simple
   classe, reprend le dessus et l'année occupe toute la largeur. */
.champ__inline select,
.champ__inline input[type="number"],
.champ__inline input[type="text"] {
  width: auto;
  flex: 0 0 auto;
}

.champ__inline select { min-width: 5.5rem; }

/* Le mois porte un libellé long (« septembre ») : il lui faut plus de place. */
.champ__inline select[id$="_m"] { min-width: 8rem; }

.champ__inline input[type="number"] { width: 6rem; }

/* Cases et boutons radio : la zone cliquable englobe le libellé. */
.case {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  padding: var(--e2) 0;
  min-height: 2.75rem;
  cursor: pointer;
}

.case input[type="checkbox"],
.case input[type="radio"] {
  width: 1.25rem;
  height: 1.25rem;
  min-height: 0;
  margin-top: 0.1875rem;
  accent-color: var(--vert);
  flex-shrink: 0;
  cursor: pointer;
}

.case__texte { font-size: 0.9375rem; line-height: 1.5; }

fieldset {
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: var(--e4);
  margin: 0 0 var(--e5);
}

legend {
  padding-inline: var(--e2);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--texte-doux);
}

.formulaire__actions {
  display: flex;
  gap: var(--e3);
  flex-wrap: wrap;
  padding-top: var(--e4);
  border-top: 1px solid var(--bordure);
}

/* --------------------------------------- champ mot de passe avec œil */

.champ-mdp { position: relative; }

/* De la place pour le bouton, sans que le texte passe dessous. */
.champ-mdp input { padding-right: 3rem; }

.champ-mdp__oeil {
  position: absolute;
  top: 0;
  right: 0;
  /* 44×44 : cible tactile réglementaire, alignée sur la hauteur du champ. */
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  color: var(--texte-tenu);
  cursor: pointer;
  border-radius: var(--rayon);
  transition: color var(--transition);
}

.champ-mdp__oeil:hover { color: var(--vert); }

.champ-mdp__oeil svg { width: 1.25rem; height: 1.25rem; }

/* ------------------------------------------- autocomplétion et jetons */

.suggestions-enveloppe { position: relative; }

.suggestions {
  position: absolute;
  z-index: var(--z-menu);
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  margin: 0;
  padding: var(--e1);
  list-style: none;
  max-height: 17rem;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--bordure-forte);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-3);
}

.suggestions li {
  padding: var(--e2) var(--e3);
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  border-radius: var(--rayon);
  font-size: 0.9375rem;
  cursor: pointer;
}

.suggestions li:hover,
.suggestions li[aria-selected="true"] {
  background: var(--surface-2);
  color: var(--vert-fonce);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .suggestions li:hover, :root:not([data-theme="light"]) .suggestions li[aria-selected="true"] { color: var(--vert); }
}

/* Choix explicite du thème sombre par le visiteur */
:root[data-theme="dark"] .suggestions li:hover, :root[data-theme="dark"] .suggestions li[aria-selected="true"] { color: var(--vert); }


.jetons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin-top: var(--e3);
  min-height: 1.5rem;
}

.jeton__retirer {
  border: 0;
  background: none;
  color: inherit;
  font-size: 1.125rem;
  line-height: 1;
  padding: 0 0 0 var(--e1);
  cursor: pointer;
}

.jeton__retirer:hover { color: var(--erreur); }

/* ---------------------------------------------------------------- alertes */

.alerte {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  padding: var(--e3) var(--e4);
  border-radius: var(--rayon);
  border: 1px solid;
  margin-bottom: var(--e4);
  font-size: 0.9375rem;
}

.alerte__icone { width: 1.25rem; height: 1.25rem; flex-shrink: 0; margin-top: 0.125rem; }

.alerte--succes { background: var(--succes-fond); border-color: var(--succes); color: var(--succes); }
.alerte--erreur { background: var(--erreur-fond); border-color: var(--erreur); color: var(--erreur); }
.alerte--info   { background: var(--info-fond);   border-color: var(--info);   color: var(--info); }

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

.tableau-defilant {
  /* Les tableaux larges défilent dans leur cadre, jamais la page entière. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--surface);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

caption {
  padding: var(--e3) var(--e4);
  text-align: left;
  font-size: 0.875rem;
  color: var(--texte-tenu);
}

th {
  text-align: left;
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--texte-tenu);
  background: var(--surface-2);
  padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--bordure);
  white-space: nowrap;
}

td {
  padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--bordure);
  vertical-align: middle;
}

tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--surface-2); }

/* --------------------------------------------------------------- étiquettes */

.etiquette {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  padding: 0.125rem var(--e2);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--surface-2);
  color: var(--texte-doux);
  border: 1px solid var(--bordure);
  white-space: nowrap;
}

.etiquette--terre { background: var(--vert-clair); color: var(--vert-fonce); border-color: var(--vert); }
.etiquette--olive { background: var(--succes-fond); color: var(--succes); border-color: var(--succes); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .etiquette--terre { background: var(--surface-2); color: var(--vert); }
}

/* Choix explicite du thème sombre par le visiteur */
:root[data-theme="dark"] .etiquette--terre { background: var(--surface-2); color: var(--vert); }


/* -------------------------------------------------------------- compteurs */

/* Bandeau d'accueil : un aplat chaleureux qui donne le ton dès l'ouverture. */
.bandeau {
  display: grid;
  gap: var(--e5);
  padding: var(--e5);
  margin-bottom: var(--e6);
  border-radius: var(--rayon-lg);
  border: 1px solid var(--bordure);
  background:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--vert) 16%, transparent), transparent 55%),
    radial-gradient(circle at 88% 78%, color-mix(in srgb, var(--bleu) 18%, transparent), transparent 55%),
    var(--surface);
}

@media (min-width: 56rem) {
  .bandeau {
    /*
     * Trois colonnes : le titre prend ce qui reste, les compteurs et la photo
     * sont dimensionnés par leur contenu. La photo tombait sous le titre parce
     * que la grille n'en comptait que deux — elle passait donc à la ligne
     * suivante, en pleine largeur.
     */
    grid-template-columns: 1fr auto auto;
    align-items: center;
  }

  /* Dans le bandeau, les compteurs restent côte à côte : la colonne de
     droite est étroite et la règle auto-fit les empilerait. */
  .bandeau .compteurs {
    grid-template-columns: repeat(3, minmax(7rem, 1fr));
  }
}

.bandeau__titre { margin: 0 0 var(--e1); }

.bandeau__date {
  margin: 0;
  color: var(--texte-doux);
  font-size: 0.9375rem;
}

.compteurs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
  gap: var(--e3);
}

.compteur {
  display: block;
  padding: var(--e4);
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-left: 4px solid var(--bordure-forte);
  border-radius: var(--rayon-lg);
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition), box-shadow var(--transition);
}

a.compteur:hover {
  box-shadow: var(--ombre-2);
  color: inherit;
}

/* Chaque compteur porte sa propre couleur : c'est ce qui redonne de la vie
   à la page, et le libellé reste le porteur du sens. */
/*
 * Les compteurs puisent dans les mêmes variables que les graphiques : une
 * page où les tuiles de tête et les courbes ne parlent pas la même langue
 * paraît assemblée de bric et de broc. Les valeurs des deux modes suivent
 * automatiquement.
 */
.compteur--personnes { border-left-color: var(--gr-bleu); }
.compteur--photos    { border-left-color: var(--gr-orange); }
.compteur--unions    { border-left-color: var(--gr-violet); }
.compteur--noms      { border-left-color: var(--gr-emeraude); }
.compteur--prenoms   { border-left-color: var(--gr-rouge); }
.compteur--age       { border-left-color: var(--gr-bleu); }

.compteur--personnes .compteur__valeur { color: var(--gr-bleu); }
.compteur--photos    .compteur__valeur { color: var(--gr-orange); }
.compteur--unions    .compteur__valeur { color: var(--gr-violet); }
.compteur--noms      .compteur__valeur { color: var(--gr-emeraude); }
.compteur--prenoms   .compteur__valeur { color: var(--gr-rouge); }
.compteur--age       .compteur__valeur { color: var(--gr-bleu); }


/* Rubriques du bloc « Aujourd'hui » : un liseré coloré par nature
   d'événement, doublé du libellé — la couleur n'est jamais seule porteuse. */
.evt {
  font-size: 0.9375rem;
  margin: var(--e4) 0 var(--e2);
  padding-left: var(--e3);
  border-left: 3px solid var(--bordure-forte);
}

.evt--fete    { border-left-color: #2e7d4f; }
.evt--anniv   { border-left-color: #b0561f; }
.evt--mariage { border-left-color: #d97b28; }
.evt--deces   { border-left-color: var(--bordure-forte); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .evt--fete { border-left-color: #519f6f; }
  :root:not([data-theme="light"]) .evt--anniv { border-left-color: #c8783a; }
  :root:not([data-theme="light"]) .evt--mariage { border-left-color: #e9a463; }
}

/* Choix explicite du thème sombre par le visiteur */
:root[data-theme="dark"] .evt--fete { border-left-color: #519f6f; }
  :root[data-theme="dark"] .evt--anniv { border-left-color: #c8783a; }
  :root[data-theme="dark"] .evt--mariage { border-left-color: #e9a463; }


.carte--jour { border-left: 4px solid var(--vert); }

.compteur__valeur {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
  font-weight: 600;
  line-height: 1.1;
  /*
   * Le vert n'est qu'un défaut, pour un compteur sans teinte propre. Les
   * surcharges de mode qui figuraient ici l'imposaient à tous : plus
   * spécifiques et plus tardives, elles écrasaient la couleur de chaque
   * compteur, si bien que les bordures se coloraient et pas les nombres.
   * Les variables --gr-… savent déjà s'adapter au mode ; il n'y a plus rien
   * à corriger après coup.
   */
  color: var(--vert-fonce);
  font-variant-numeric: tabular-nums;
}


.compteur__libelle {
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--texte-tenu);
}

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

.calendrier { width: 100%; border-collapse: collapse; }

.calendrier th {
  padding: var(--e2) 0;
  text-align: center;
  font-size: 0.75rem;
  background: transparent;
  border: 0;
}

.calendrier td {
  padding: 0;
  border: 1px solid var(--bordure);
  text-align: center;
}

.calendrier__jour {
  display: grid;
  place-items: center;
  /* Cible tactile suffisante même sur la grille dense du calendrier. */
  min-height: 2.75rem;
  width: 100%;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  color: var(--texte);
  text-decoration: none;
  cursor: pointer;
}

.calendrier__jour:hover { background: var(--surface-2); }
.calendrier__jour--hors-mois { color: var(--texte-tenu); opacity: 0.5; }

.calendrier__jour--aujourdhui {
  font-weight: 700;
  box-shadow: inset 0 0 0 2px var(--vert);
}

/* Un jour porteur d'événement est signalé par un point ET par son title. */
.calendrier__jour--evenement { background: var(--vert-clair); color: var(--vert-fonce); font-weight: 600; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .calendrier__jour--evenement { background: var(--surface-2); color: var(--vert); }
}

/* Choix explicite du thème sombre par le visiteur */
:root[data-theme="dark"] .calendrier__jour--evenement { background: var(--surface-2); color: var(--vert); }


.calendrier__point {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  margin-top: 1px;
}

/* --------------------------------------------------------------- forum */

.message {
  padding: var(--e5);
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-lg);
}

.message__entete {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding-bottom: var(--e3);
  margin-bottom: var(--e3);
  border-bottom: 1px solid var(--bordure);
  flex-wrap: wrap;
}

.message__sujet { font-family: var(--serif); font-size: 1.125rem; font-weight: 600; }
.message__corps { color: var(--texte); overflow-wrap: anywhere; }
.message__corps p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------- barres de mesure */

.mesure { display: grid; gap: var(--e2); }

.mesure__ligne {
  display: grid;
  grid-template-columns: minmax(6rem, 10rem) 1fr auto;
  align-items: center;
  gap: var(--e3);
  font-size: 0.875rem;
}

/* La barre est un SVG : sa largeur est une donnée, et la politique de
   sécurité du contenu interdit un style calculé côté serveur. Les attributs
   géométriques SVG ne sont pas du CSS et passent donc sans exception. */
.mesure__piste {
  display: block;
  width: 100%;
  height: 0.625rem;
  overflow: visible;
}

.mesure__piste .fond  { fill: var(--surface-2); }
.mesure__piste .barre { fill: var(--vert); }

.mesure__valeur { font-variant-numeric: tabular-nums; color: var(--texte-tenu); }

.mesure__ligne--active span:first-child { font-weight: 600; }

/* --------------------------------------------------------- graphiques */

.figure {
  margin: 0;
}

.figure__titre {
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: var(--e1);
}

.figure__note {
  font-size: 0.8125rem;
  color: var(--texte-tenu);
  margin: var(--e2) 0 0;
}

.graphe {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  /*
   * Le SVG suit la largeur de son cadre : dans une carte pleine largeur, un
   * repère de 640 × 150 donnait un graphique de trois cents pixels de haut
   * pour douze colonnes. Le plafond le ramène à une proportion lisible ; les
   * graphiques des colonnes étroites, eux, n'atteignent jamais cette limite.
   */
  max-height: 17rem;
}

/*
 * LES TEINTES DES GRAPHIQUES.
 *
 * Cinq couleurs, choisies par scripts/validate_palette.js et non à l'œil.
 * Chacune passe la bande de clarté de son mode, le plancher de chroma et le
 * contraste sur la surface — en clair comme en sombre, où les valeurs sont
 * choisies séparément et non éclaircies mécaniquement.
 *
 * Une distinction qui décide de tout : ces teintes n'identifient pas des
 * séries qu'on compare, elles distinguent des SECTIONS. Deux d'entre elles ne
 * se rencontrent jamais dans un même repère — sauf la pyramide des âges, seul
 * graphique à deux séries. C'est donc cette paire-là, et elle seule, qui a été
 * validée sur tous les critères de séparation : bleu contre orange, ΔE 21 en
 * protanopie, 25 en vision normale, et une légende par-dessus, car l'identité
 * ne se confie jamais à la couleur seule.
 *
 * Le contrôle « toutes paires » échouerait sur bleu/violet — ΔE 2,5 en
 * protanopie. C'est sans conséquence ici : ils sont à trois écrans l'un de
 * l'autre. Le mentionner plutôt que de le taire évite qu'on les rapproche un
 * jour dans un même graphique sans y penser.
 */

:root {
  --gr-bleu:     #2f62a8;
  --gr-orange:   #c25a1e;
  --gr-violet:   #7d4ea3;
  --gr-rouge:    #a4342f;
  --gr-emeraude: #0e7f5c;

  /* La teinte en service, qu'une section peut remplacer. */
  --gr-trait:  var(--gr-bleu);
  --gr-trait-2: var(--gr-orange);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --gr-bleu:     #4d8cc9;
    --gr-orange:   #cd7433;
    --gr-violet:   #a077cc;
    --gr-rouge:    #cc5f5a;
    --gr-emeraude: #3d9e7c;
  }
}

:root[data-theme="dark"] {
  --gr-bleu:     #4d8cc9;
  --gr-orange:   #cd7433;
  --gr-violet:   #a077cc;
  --gr-rouge:    #cc5f5a;
  --gr-emeraude: #3d9e7c;
}

/* Une section choisit sa teinte ; tout ce qu'elle contient suit. */
[data-teinte="bleu"]     { --gr-trait: var(--gr-bleu); }
[data-teinte="orange"]   { --gr-trait: var(--gr-orange); }
[data-teinte="violet"]   { --gr-trait: var(--gr-violet); }
[data-teinte="rouge"]    { --gr-trait: var(--gr-rouge); }
[data-teinte="emeraude"] { --gr-trait: var(--gr-emeraude); }

.graphe .marque    { fill: var(--gr-trait); }
.graphe .marque--f { fill: var(--gr-trait); }
.graphe .marque--h { fill: var(--gr-trait-2); }

/* --------------------------------------------------------- courbe */

.graphe .courbe__aire  { fill: var(--gr-trait); opacity: 0.14; }
.graphe .courbe__trait { fill: none; stroke: var(--gr-trait); stroke-width: 2; stroke-linejoin: round; }

/* Anneau de la couleur du fond : le point reste net là où la courbe passe. */
.graphe .courbe__point { fill: var(--gr-trait); stroke: var(--surface); stroke-width: 2; }

/* ---------------------------------------------------------- jauge */

.jauges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--e5);
}

.jauge__entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e3);
  margin-bottom: var(--e2);
}

.jauge__titre  { font-size: 0.9375rem; font-weight: 600; }
.jauge__valeur { font-size: 1.125rem; font-weight: 700; color: var(--gr-trait); font-variant-numeric: tabular-nums; }

.jauge__piste { display: block; width: 100%; height: 0.5rem; }
.jauge__fond  { fill: var(--surface-2); }
.jauge__part  { fill: var(--gr-trait); }

.jauge__note { margin: var(--e2) 0 0; font-size: 0.8125rem; color: var(--texte-tenu); }

/*
 * Les barres horizontales des palmarès suivent la teinte de leur carte.
 *
 * La règle est restreinte aux cartes qui déclarent une teinte : sans cela
 * elle repeignait aussi la barre d'avancement du formulaire de fiche, qui
 * n'a rien d'un graphique et doit rester verte comme le reste du site.
 */
[data-teinte] .mesure__piste .barre { fill: var(--gr-trait); }

.graphe .grille      { stroke: var(--bordure); stroke-width: 1; }
.graphe .axe-texte   { fill: var(--texte-tenu); font-size: 10px; }
.graphe .val-texte   { fill: var(--texte-doux); font-size: 10px; font-weight: 600; }

.legende {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e4);
  margin-top: var(--e3);
  font-size: 0.8125rem;
  color: var(--texte-doux);
}

.legende__item { display: inline-flex; align-items: center; gap: var(--e2); }

.legende__puce {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 3px;
  flex-shrink: 0;
}

/*
 * Les puces de la légende reprennent les variables des marques : une légende
 * qui ne s'accorde pas au graphique qu'elle explique est pire qu'aucune.
 */
.legende__puce--f { background: var(--gr-trait); }
.legende__puce--h { background: var(--gr-trait-2); }


/* Vue tableau : toute donnée d'un graphique reste accessible en texte. */
.figure details summary {
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--texte-doux);
  margin-top: var(--e3);
}

.figure details[open] summary { margin-bottom: var(--e3); }

/* --------------------------------------------------------------- divers */

.fil-ariane {
  font-size: 0.875rem;
  color: var(--texte-tenu);
  margin-bottom: var(--e4);
}

.fil-ariane a { color: var(--texte-doux); }

.vide {
  padding: var(--e7) var(--e4);
  text-align: center;
  color: var(--texte-tenu);
  border: 1px dashed var(--bordure-forte);
  border-radius: var(--rayon-lg);
}

.vide__titre { font-family: var(--serif); font-size: 1.125rem; color: var(--texte-doux); margin-bottom: var(--e2); }

.pagination {
  display: flex;
  gap: var(--e2);
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--e6);
}

.pagination__lien {
  display: inline-grid;
  place-items: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding-inline: var(--e2);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  color: var(--texte-doux);
  text-decoration: none;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.pagination__lien:hover { background: var(--surface-2); border-color: var(--vert); }

.pagination__lien[aria-current="page"] {
  background: var(--vert);
  border-color: var(--vert);
  color: #fff;
  font-weight: 600;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pagination__lien[aria-current="page"] { color: #1a1510; }
}

/* Choix explicite du thème sombre par le visiteur */
:root[data-theme="dark"] .pagination__lien[aria-current="page"] { color: #1a1510; }


.pied {
  padding-block: var(--e6);
  margin-top: var(--e8);
  border-top: 1px solid var(--bordure);
  font-size: 0.875rem;
  color: var(--texte-tenu);
}

/* Écrans de connexion : mise en page centrée sans navigation */
.ecran-simple {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--e5) var(--e4);
}

.ecran-simple__boite {
  width: 100%;
  max-width: 24rem;
}

.ecran-simple__marque {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e2);
  margin-bottom: var(--e5);
  text-align: center;
}

.ecran-simple__marque svg { width: 3rem; height: 3rem; color: var(--vert); }

/* ------------------------------------------------------------ utilitaires

   Petit jeu de classes destiné à remplacer les attributs style= dans les
   gabarits. La politique de sécurité du contenu (style-src 'self') interdit
   les styles en ligne : sans ces classes, chaque style= serait silencieusement
   ignoré par le navigateur.
   ------------------------------------------------------------------------ */

.m0        { margin: 0; }
.mt0       { margin-top: 0; }
.mt1       { margin-top: var(--e1); }
.mb1       { margin-bottom: var(--e1); }
.mt7       { margin-top: var(--e7); }
.casse-normale { text-transform: none; }
.mb0       { margin-bottom: 0; }
.mt2       { margin-top: var(--e2); }
.mt3       { margin-top: var(--e3); }
.mt4       { margin-top: var(--e4); }
.mt5       { margin-top: var(--e5); }
.mb2       { margin-bottom: var(--e2); }
.mb3       { margin-bottom: var(--e3); }
.mb4       { margin-bottom: var(--e4); }
.mb5       { margin-bottom: var(--e5); }
.mb6       { margin-bottom: var(--e6); }
.mb7       { margin-bottom: var(--e7); }

.tenu      { color: var(--texte-tenu); }
.doux      { color: var(--texte-doux); }
.terre     { color: var(--vert-fonce); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .terre { color: var(--vert); }
}

/* Choix explicite du thème sombre par le visiteur */
:root[data-theme="dark"] .terre { color: var(--vert); }


.t-xxs     { font-size: 0.75rem; }
.t-xs      { font-size: 0.8125rem; }
.t-sm      { font-size: 0.875rem; }
.t-md      { font-size: 0.9375rem; }
.t-lg      { font-size: 1.0625rem; }
.t-xl      { font-size: 1.125rem; }

.serif     { font-family: var(--serif); }
.gras      { font-weight: 600; }
.normal    { font-weight: 400; }
.italique  { font-style: italic; }
.centre    { text-align: center; }
.droite    { text-align: right; }
.nowrap    { white-space: nowrap; }
.chiffres  { font-variant-numeric: tabular-nums; }
.mono      { font-family: var(--mono); }
.sans-deco { text-decoration: none; color: inherit; }

.pleine    { width: 100%; }
/*
 * Qualifiées par type : « input[type="search"] » pèse plus lourd qu'une
 * simple classe dans la cascade, et reprendrait la largeur pleine.
 */
.auto,
input.auto, select.auto, textarea.auto           { width: auto; }
.l-etroit,
input.l-etroit, select.l-etroit                  { width: 7rem; flex: none; }
.l-moyen,
input.l-moyen, select.l-moyen                    { min-width: 12rem; width: auto; flex: 1 1 12rem; }

.liste-nue { list-style: none; margin: 0; padding: 0; }

/* Galerie resserrée des colonnes latérales */
.galerie--mini {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 5.5rem), 1fr));
}

/* Bloc de commande à copier dans un terminal */
.commande {
  display: block;
  overflow-x: auto;
  padding: var(--e3);
  margin: var(--e3) 0;
  background: var(--surface-2);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--texte);
  white-space: pre;
}

/* Bouton de formulaire présenté comme un lien de navigation */
.nav__bouton-lien {
  border: 0;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.separateur      { border-bottom: 1px solid var(--bordure); }
.separateur-haut { border-top: 1px solid var(--bordure); }
.pad-v2          { padding-block: var(--e2); }
.pad-v3          { padding-block: var(--e3); }
.pad5            { padding: var(--e5); }

.encadre-fort {
  border-color: var(--vert);
  border-width: 2px;
}

.pleine-hauteur-carte { grid-column: 1 / -1; }

/* Listes de définitions des fiches */
.defs {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e2) var(--e4);
  margin: 0;
  font-size: 0.9375rem;
}

.defs dt { color: var(--texte-tenu); }
.defs dd { margin: 0; }

/* ------------------------------------------------------ mouvement réduit */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------- impression */

@media print {
  .entete,
  .nav,
  .pied,
  .formulaire__actions,
  .bouton { display: none !important; }

  body { background: #fff; color: #000; font-size: 11pt; }
  .carte, .personne { border: 1px solid #999; box-shadow: none; }
  a { color: #000; text-decoration: underline; }
  .arbre { overflow: visible; }
}

/* --------------------------------------------- chemin par alliance ------ */

.chemin { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }

.chemin__etape { position: relative; }

/* Le libellé de la relation s'intercale entre deux personnes. */
.chemin__relation {
  display: inline-block;
  margin: var(--e2) 0 var(--e2) var(--e5);
  padding: var(--e1) var(--e3);
  border-radius: 999px;
  background: var(--vert-clair);
  border: 1px solid var(--vert-bord);
  color: var(--vert-fonce);
  font-size: 0.8125rem;
  font-weight: 600;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chemin__relation { color: var(--vert); }
}

/* Choix explicite du thème sombre par le visiteur */
:root[data-theme="dark"] .chemin__relation { color: var(--vert); }


/* ------------------------------------------------------------- cartes --- */

.carte-figure { margin: 0; }

/*
 * Le SVG des cartes géographiques porte « carte-dessin » et non « carte » :
 * ce dernier nom désigne déjà le bloc encadré du site, et le SVG héritait
 * donc de son fond, de sa bordure et de son rembourrage.
 */
.carte-dessin {
  display: block;
  width: 100%;
  height: auto;
  /* Les tracés sont fins : on les laisse déborder légèrement du cadre. */
  overflow: visible;
}

/* Rampe séquentielle : une seule teinte, du clair au foncé. La magnitude se
   lit dans la clarté, jamais dans la teinte. */
.carte__zone           { fill: var(--surface-2); stroke: var(--surface); stroke-width: 0.7; }
.carte__zone--n0       { fill: #eaf4ed; }
.carte__zone--n1       { fill: #c7e3d1; }
.carte__zone--n2       { fill: #9bceae; }
.carte__zone--n3       { fill: #66b287; }
.carte__zone--n4       { fill: #3d9463; }
.carte__zone--n5       { fill: #22713f; }

/* Pour la carte des régions, les frontières départementales s'effacent. */
.carte__zone--fondue   { stroke-width: 0.35; stroke: rgba(255,255,255,.45); }

.carte__lien .carte__zone { cursor: pointer; transition: fill 120ms; }
.carte__lien:hover .carte__zone { fill: var(--vert); }
.carte__lien:focus-visible .carte__zone { stroke: var(--texte); stroke-width: 2; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .carte__zone { fill: var(--surface-2); stroke: var(--surface); }
  :root:not([data-theme="light"]) .carte__zone--n0 { fill: #1f3227; }
  :root:not([data-theme="light"]) .carte__zone--n1 { fill: #26492f; }
  :root:not([data-theme="light"]) .carte__zone--n2 { fill: #2f6b41; }
  :root:not([data-theme="light"]) .carte__zone--n3 { fill: #3d8b55; }
  :root:not([data-theme="light"]) .carte__zone--n4 { fill: #55a473; }
  :root:not([data-theme="light"]) .carte__zone--n5 { fill: #77c093; }
  :root:not([data-theme="light"]) .carte__zone--fondue { stroke: rgba(0,0,0,.35); }
}

/* Choix explicite du thème sombre par le visiteur */
:root[data-theme="dark"] .carte__zone { fill: var(--surface-2); stroke: var(--surface); }
  :root[data-theme="dark"] .carte__zone--n0 { fill: #1f3227; }
  :root[data-theme="dark"] .carte__zone--n1 { fill: #26492f; }
  :root[data-theme="dark"] .carte__zone--n2 { fill: #2f6b41; }
  :root[data-theme="dark"] .carte__zone--n3 { fill: #3d8b55; }
  :root[data-theme="dark"] .carte__zone--n4 { fill: #55a473; }
  :root[data-theme="dark"] .carte__zone--n5 { fill: #77c093; }
  :root[data-theme="dark"] .carte__zone--fondue { stroke: rgba(0,0,0,.35); }


.carte__echelle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e3);
  margin-top: var(--e3);
  font-size: 0.75rem;
  color: var(--texte-tenu);
}

.carte__echelle-titre {
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.carte__palier { display: inline-flex; align-items: center; gap: var(--e1); }

.carte__puce {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 3px;
  border: 1px solid var(--bordure);
}

.carte__puce--n0 { background: #eaf4ed; }
.carte__puce--n1 { background: #c7e3d1; }
.carte__puce--n2 { background: #9bceae; }
.carte__puce--n3 { background: #66b287; }
.carte__puce--n4 { background: #3d9463; }
.carte__puce--n5 { background: #22713f; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .carte__puce--n0 { background: #1f3227; }
  :root:not([data-theme="light"]) .carte__puce--n1 { background: #26492f; }
  :root:not([data-theme="light"]) .carte__puce--n2 { background: #2f6b41; }
  :root:not([data-theme="light"]) .carte__puce--n3 { background: #3d8b55; }
  :root:not([data-theme="light"]) .carte__puce--n4 { background: #55a473; }
  :root:not([data-theme="light"]) .carte__puce--n5 { background: #77c093; }
}

/* Choix explicite du thème sombre par le visiteur */
:root[data-theme="dark"] .carte__puce--n0 { background: #1f3227; }
  :root[data-theme="dark"] .carte__puce--n1 { background: #26492f; }
  :root[data-theme="dark"] .carte__puce--n2 { background: #2f6b41; }
  :root[data-theme="dark"] .carte__puce--n3 { background: #3d8b55; }
  :root[data-theme="dark"] .carte__puce--n4 { background: #55a473; }
  :root[data-theme="dark"] .carte__puce--n5 { background: #77c093; }



/* ------------------------------------------------- sélecteur de thème --- */

.theme {
  margin-top: var(--e2);
  padding: var(--e3);
  border-top: 1px solid var(--bordure);
}

.theme__titre {
  display: block;
  margin-bottom: var(--e2);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texte-tenu);
}

.theme__choix {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  padding: 2px;
  background: var(--surface-2);
  border-radius: var(--rayon);
}

.theme__bouton {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--e2) var(--e1);
  border: 0;
  border-radius: calc(var(--rayon) - 2px);
  background: none;
  color: var(--texte-tenu);
  font: 500 0.6875rem/1.2 var(--sans);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.theme__bouton svg { width: 1rem; height: 1rem; }

.theme__bouton:hover { color: var(--texte); }

.theme__bouton[aria-pressed="true"] {
  background: var(--surface);
  color: var(--vert);
  box-shadow: var(--ombre-1);
}

/* ---------------------------------------------------------------------------
 * Formulaire de fiche : sections dépliables.
 *
 * Le marqueur natif de <summary> est retiré au profit d'un chevron placé à
 * droite, qui pivote. Deux règles sont nécessaires et non une : Firefox et
 * Chrome utilisent « list-style », Safari le pseudo-élément WebKit.
 * ------------------------------------------------------------------------ */

.section {
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--surface);
  margin-bottom: var(--e3);
  /*
   * Pas de « overflow: hidden » ici, quoiqu'il arrondirait commodément le
   * fond de l'en-tête au survol : le calendrier des dates se déploie hors du
   * cadre de la section et s'en trouverait décapité. L'arrondi est donc porté
   * par l'en-tête lui-même, juste en dessous.
   */
}

.section[open] {
  border-color: var(--bordure-forte);
}

.section__tete {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3) var(--e4);
  cursor: pointer;
  list-style: none;
  user-select: none;
  border-radius: calc(var(--rayon) - 1px);
}

/* Repliée, la section n'est qu'un en-tête : il porte l'arrondi des quatre
   coins. Dépliée, ses angles du bas rejoignent le corps. */
.section[open] .section__tete {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.section__tete::-webkit-details-marker { display: none; }

.section__tete:hover { background: var(--surface-2); }

.section__tete:focus-visible {
  outline: 2px solid var(--vert);
  outline-offset: -2px;
}

.section__icone {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--vert);
}

.section__texte {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

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

.section__accroche {
  font-size: 0.8125rem;
  color: var(--texte-doux);
}

/*
 * Le compteur. Il reste discret tant que la section est incomplète : un
 * badge rouge sur « 0/3 » transformerait une fiche en devoir non rendu.
 */
.section__compte {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--texte-doux);
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
}

.section__compte--plein {
  color: var(--vert);
  border-color: var(--vert);
}

.section__chevron {
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--texte-doux);
  transition: transform 0.15s ease;
}

.section[open] .section__chevron { transform: rotate(180deg); }

.section__corps {
  padding: 0 var(--e4) var(--e4);
  border-top: 1px solid var(--bordure);
  padding-top: var(--e4);
}

.section__corps .champ:last-child { margin-bottom: 0; }

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

/* ---------------------------------------- barre d'avancement de la fiche */

.avancement {
  padding: var(--e4);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--surface);
}

.avancement__ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e3);
  margin-bottom: var(--e2);
}

.avancement__libelle {
  font-size: 0.875rem;
  color: var(--texte-doux);
}

.avancement__valeur {
  font-size: 1.25rem;
  color: var(--vert);
  font-variant-numeric: tabular-nums;
}

.avancement .mesure__piste { height: 0.5rem; }

.avancement__note { margin: var(--e2) 0 0; }

/* ---------------------------------------------------------------------------
 * Le CTA du bandeau : « Ajouter une personne ».
 *
 * Il vient d'un menu latéral où il ne servait qu'à ceux qui étaient déjà dans
 * « Ma famille ». Créer une fiche est une action, et une action se propose
 * partout.
 * ------------------------------------------------------------------------ */

.cta-entete {
  flex: 0 0 auto;
  white-space: nowrap;
}

/*
 * Le SVG n'a ni largeur ni hauteur propres : dans les boutons du corps de page
 * il hérite d'une taille, mais le bandeau n'a pas cette règle et le
 * pictogramme se réduisait à zéro — un pavé vert sans rien dedans.
 */
.cta-entete svg {
  width: 1.125rem;
  height: 1.125rem;
  flex: 0 0 auto;
}

/*
 * Sous 68rem, le bandeau porte déjà la marque, la recherche, la photo du
 * hasard, la messagerie et le profil. Le libellé s'efface et le bouton se
 * réduit à sa croix — le geste reste, l'encombrement disparaît.
 */
@media (max-width: 68rem) {
  .cta-entete__texte { display: none; }
  .cta-entete { padding-inline: var(--e3); }
}

/* --------------------------------- le choix d'une recherche par lieu */

.choix-lieu {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  padding: var(--e4);
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.choix-lieu:hover,
.choix-lieu:focus-visible {
  border-color: var(--vert);
  transform: translateY(-2px);
}

/*
 * L'illustration est la vraie carte du site, dessinée à vide. Elle est donc
 * un SVG de plein format : la hauteur est bornée ici, et le débordement
 * masqué, sans quoi la carte du monde imposerait sa proportion à la carte.
 */
.choix-lieu__dessin {
  display: block;
  max-height: 9rem;
  overflow: hidden;
  border-radius: var(--rayon);
  background: var(--surface-2);
  padding: var(--e2);
}

.choix-lieu__dessin svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 8.5rem;
}


.choix-lieu__texte {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
}

.choix-lieu__titre {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--texte);
}

.choix-lieu__accroche {
  font-size: 0.9375rem;
  color: var(--texte-doux);
  line-height: 1.5;
}

.choix-lieu__compte {
  font-size: 0.8125rem;
  color: var(--vert);
}

@media (prefers-reduced-motion: reduce) {
  .choix-lieu { transition: none; }
  .choix-lieu:hover { transform: none; }
}

/* Ligne mise en avant dans un tableau (le pays choisi sur la carte du monde). */
.ligne--active { background: var(--vert-clair); }

/* ---------------------------------------------------------------------------
 * Les ancres et le bandeau collant.
 *
 * Le bandeau est en « position: sticky » et mesure environ 120 px. Un lien
 * vers « #photos » amenait donc le titre exactement dessous : on arrivait sur
 * une liste de photos décapitée, sans le nom du lieu — signalé sur
 * /agora?lieu=…#photos, mais le défaut valait pour toutes les ancres du site,
 * #resultats et #detail compris.
 *
 * « scroll-margin-top » ne coûte rien aux éléments qu'on n'atteint jamais par
 * une ancre : le navigateur ne s'en sert qu'au moment de faire défiler
 * jusqu'à eux. La règle peut donc rester large.
 * ------------------------------------------------------------------------ */

[id] {
  /*
   * Une seule valeur, sans exception pour les petits écrans : le bandeau y
   * reste collant et garde la même hauteur. J'avais d'abord réduit la marge
   * sous 48 rem en supposant le contraire — mesure faite, il fait 120 px des
   * deux côtés. Un peu de blanc au-dessus d'une ancre ne gêne personne ;
   * atterrir sous le bandeau, si.
   */
  scroll-margin-top: 8.5rem;
}

/* ---------------------------------------------------------------------------
 * Le bandeau sur un téléphone.
 *
 * À 375 px, ses sept éléments réclamaient 392 px : la page débordait de dix-sept
 * pixels vers la droite, l'avatar était rogné et tout le site défilait
 * latéralement. Mesuré, l'excédent tenait au nom du site — cent vingt pixels
 * à lui seul, à côté du logo qui dit déjà de quel site il s'agit.
 *
 * C'est donc lui qui cède, et rien d'autre : chacun des six éléments restants
 * est un geste (ouvrir le menu, chercher, ajouter, lire ses messages, son
 * profil), et un geste retiré est un geste perdu.
 * ------------------------------------------------------------------------ */

@media (max-width: 40rem) {
  .marque__nom { display: none; }

  /*
   * Les onglets débordent aussi, mais eux défilent — c'est voulu. Un dégradé
   * sur le bord droit le dit : sans lui, « Admin » semble ne pas exister.
   */
  .onglets {
    -webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
    mask-image: linear-gradient(to right, #000 85%, transparent);
  }

  /* Le logo garde sa place de lien vers l'accueil, sans le texte à côté. */
  .marque { gap: 0; }

  .entete__interieur {
    gap: var(--e2);
    padding-inline: var(--e3);
  }
}

/*
 * Filet de sécurité. Le bandeau n'était pas seul en cause : n'importe quel
 * tableau ou titre trop large fait défiler la page entière sur le côté, et le
 * défaut ne se voit qu'au téléphone, là où personne ne teste. Les contenus
 * larges ont leur propre conteneur à défilement ; le corps de page, lui, ne
 * doit jamais bouger horizontalement.
 */
html, body { overflow-x: hidden; }

/* ------------------------------------------ choix du fournisseur de courriels */

.fournisseurs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--e3);
}

.fournisseur {
  display: flex;
  flex-direction: column;
  gap: var(--e1);
  padding: var(--e3) var(--e4);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  cursor: pointer;
}

/*
 * LE BOUTON RADIO RESTE VISIBLE, et ce n'est pas un choix esthétique.
 *
 * Je l'avais masqué, en confiant l'indication du choix à
 * « .fournisseur:has(input:checked) ». Sur un navigateur sans « :has() », il
 * ne restait alors AUCUN signe de ce qui était coché : trois cartes
 * identiques, dont une déjà sélectionnée à l'insu du visiteur. En production,
 * un administrateur a cru choisir Brevo, Mailjet est resté coché, et sa clé
 * Brevo est partie dans MAILJET_API_KEY.
 *
 * Le rond natif est toujours juste, sur tous les navigateurs, sans qu'on ait
 * à le réinventer. La mise en valeur de la carte vient par-dessus, comme
 * agrément — plus jamais comme seule indication.
 */
.fournisseur {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--e3);
}

.fournisseur input {
  flex: 0 0 auto;
  margin-top: 0.15rem;
}

.fournisseur__texte {
  display: flex;
  flex-direction: column;
  gap: var(--e1);
  min-width: 0;
}

.fournisseur:hover { border-color: var(--bordure-forte); }

/*
 * L'agrément passe par le frère du bouton : « input:checked + … » fonctionne
 * partout, là où « :has() » manque encore à l'appel sur les navigateurs un
 * peu anciens.
 */
.fournisseur input:checked + .fournisseur__texte .fournisseur__nom {
  color: var(--vert);
}

.fournisseur:focus-within {
  outline: 2px solid var(--vert);
  outline-offset: 2px;
}

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

.fournisseur__voie {
  font-size: 0.75rem;
  color: var(--texte-tenu);
  font-family: var(--mono);
}

/* ---------------------------------------------------------------------------
 * La boîte à idées, dans le bandeau.
 *
 * Elle voisine la messagerie : ce sont les deux façons de dire quelque chose
 * au reste de la famille, l'une adressée, l'autre ouverte. Elle en reprend
 * donc exactement l'allure — deux icônes côte à côte qui ne se ressemblent pas
 * se liraient comme deux fonctions sans rapport.
 * ------------------------------------------------------------------------ */

.idee-entete {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  color: var(--texte-doux);
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}

.idee-entete:hover { background: var(--surface-2); color: var(--vert-fonce); }
.idee-entete svg { width: 1.35rem; height: 1.35rem; }

/* ------------------------------------------- le menu « Ajouter » du bandeau */

.ajout-entete { position: relative; flex: 0 0 auto; }

.ajout-entete__calque {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + var(--e2));
  z-index: var(--z-menu);
  min-width: 12rem;
  padding: var(--e2);
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-lg);
  box-shadow: var(--ombre-3);
}

.ajout-entete__bascule:checked ~ .ajout-entete__calque { display: block; }

/*
 * Le focus clavier doit se voir sur l'étiquette, qui a pris le rôle du bouton.
 */
.ajout-entete__bascule:focus-visible + .cta-entete {
  outline: 2px solid var(--vert);
  outline-offset: 2px;
}

.ajout-entete__lien {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3);
  border-radius: var(--rayon);
  color: var(--texte);
  text-decoration: none;
  font-size: 0.9375rem;
}

.ajout-entete__lien:hover { background: var(--surface-2); color: var(--vert-fonce); }
.ajout-entete__lien svg { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; color: var(--vert); }

/* Sur un téléphone, le calque s'ancre à droite pour ne pas sortir de l'écran. */
@media (max-width: 40rem) {
  .ajout-entete__calque { left: auto; right: 0; }
}

/* ---------------------------------------------------------------------------
 * La visite guidée du premier passage.
 *
 * Le voile assombrit la page, le halo découpe l'élément dont on parle, la
 * bulle porte le texte. Les trois sont positionnés en JavaScript : la
 * politique de sécurité interdit les styles écrits dans le HTML, mais pas les
 * affectations à element.style — vérifié dans le navigateur avant d'écrire
 * ceci plutôt que supposé.
 * ------------------------------------------------------------------------ */

.visite { position: fixed; inset: 0; z-index: var(--z-modale, 9000); }

/*
 * UN SEUL MÉCANISME D'ASSOMBRISSEMENT, et c'est le halo.
 *
 * Son ombre portée de 9999 px couvre tout l'écran sauf son propre rectangle :
 * elle assombrit et découpe d'un même geste. J'avais d'abord ajouté un voile
 * séparé par-dessus, qu'il fallait masquer quand le halo paraissait — au
 * moyen de « :has() », c'est-à-dire du piège déjà rencontré sur le choix du
 * fournisseur de courriels. Deux mécanismes valaient une couche de trop et
 * une règle qui ne s'applique pas partout ; il n'en reste qu'un.
 *
 * Le cadre entoure l'élément plutôt que de le détourer : connaître la forme
 * exacte de chaque cible serait fragile, un rectangle lumineux désigne aussi
 * bien et ne se trompe jamais de contour.
 */
.visite__halo {
  position: absolute;
  border-radius: var(--rayon-lg);
  border: 2px solid var(--vert);
  box-shadow: 0 0 0 9999px rgb(0 0 0 / 0.55), 0 0 0 4px rgb(46 125 79 / 0.35);
  pointer-events: none;
  transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease;
}

.visite__bulle {
  position: absolute;
  width: min(22rem, calc(100vw - 2rem));
  padding: var(--e5);
  background: var(--surface);
  border-radius: var(--rayon-lg);
  box-shadow: var(--ombre-3);
}

.visite__compteur {
  margin: 0 0 var(--e2);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--texte-tenu);
}

.visite__titre {
  margin: 0 0 var(--e3);
  font-size: 1.125rem;
}

.visite__texte {
  margin: 0 0 var(--e4);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--texte-doux);
}

.visite__actions {
  display: flex;
  align-items: center;
  gap: var(--e2);
}

.visite__espace { flex: 1 1 auto; }

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

/* Sur un téléphone, la bulle occupe le bas de l'écran plutôt que de courir
   après une cible qui tient déjà toute la largeur. */
@media (max-width: 30rem) {
  .visite__bulle { padding: var(--e4); }
}

/* Un bouton qui vit parmi des liens en prend l'apparence. */
.moi__lien--bouton {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
}

/* ------------------------------------------ l'appel à identifier les photos */

.appel-qui {
  display: flex;
  align-items: center;
  gap: var(--e4);
  padding: var(--e4);
  margin-bottom: var(--e5);
  background: var(--vert-clair);
  border: 1px solid var(--vert);
  border-radius: var(--rayon-lg);
  color: inherit;
  text-decoration: none;
}

.appel-qui:hover { box-shadow: var(--ombre-2); }

.appel-qui__dessin { flex: 0 0 auto; width: 4rem; height: 3rem; color: var(--vert-fonce); }

.appel-qui__texte { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--e1); min-width: 0; }
.appel-qui__titre { font-weight: 700; color: var(--vert-fonce); }
.appel-qui__note  { font-size: 0.875rem; color: var(--texte-doux); line-height: 1.45; }

.appel-qui__action {
  flex: 0 0 auto;
  padding: var(--e2) var(--e4);
  border-radius: 999px;
  background: var(--vert);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 40rem) {
  .appel-qui { flex-wrap: wrap; }
  .appel-qui__action { width: 100%; text-align: center; }
}

/* ------------------------------------------------------- « Perdu de vue » */

.perdus { border-color: var(--vert); }

.perdus__dessin {
  display: block;
  width: 6rem;
  height: 4.5rem;
  margin-bottom: var(--e3);
  color: var(--vert);
}

.perdus__titre { margin-bottom: var(--e2); }

.perdus__phrase {
  margin: 0 0 var(--e4);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--texte-doux);
}

.perdus__reste { margin: var(--e3) 0 0; }

/* --------------------------------------------------------- les documents */

.doc {
  display: flex;
  align-items: center;
  gap: var(--e4);
  padding: var(--e3) var(--e4);
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  text-decoration: none;
  color: inherit;
}

.doc:hover { border-color: var(--vert); }

/*
 * L'extension tient lieu de pictogramme. Un dessin par format serait plus
 * joli et moins juste : « PDF » et « TIF » ne se confondent pas, et le
 * visiteur sait déjà ce que chacun veut dire.
 */
.doc__icone {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--rayon);
  background: var(--surface-2);
  color: var(--texte-doux);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.doc__texte { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.doc__titre { font-weight: 600; color: var(--texte); }
.doc__meta  { font-size: 0.8125rem; color: var(--texte-tenu); }

.doc--serre { padding: var(--e2) var(--e3); }
.doc--serre .doc__icone { width: 2.25rem; height: 2.25rem; font-size: 0.625rem; }

/* ------------------------------------ « ne s'est jamais connecté » */

.jamais__dessin {
  display: block;
  width: 4.5rem;
  height: 3rem;
  margin-bottom: var(--e3);
  color: var(--vert);
}

/* ------------------------------------ la photo au hasard, sur l'accueil */

.hasard {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex: 0 1 22rem;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

.hasard:hover { border-color: var(--vert); }

.hasard__image {
  flex: 0 0 8rem;
  width: 8rem;
  height: 100%;
  object-fit: cover;
  background: var(--surface-2);
}

.hasard__texte {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  justify-content: center;
  padding: var(--e3) var(--e4);
  min-width: 0;
}

.hasard__surtitre {
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--vert);
  font-weight: 700;
}

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

.hasard__lien,
.hasard__legende {
  font-size: 0.8125rem;
  color: var(--texte-doux);
  /* Une légende peut être longue : deux lignes, puis on coupe. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hasard__legende { color: var(--texte-tenu); font-style: italic; }

@media (max-width: 48rem) {
  .hasard { flex-basis: 100%; }
}

/* ------------------------------------- l'accueil de la visite guidée */

/*
 * LE VOILE DE L'ÉCRAN D'ACCUEIL, ET POURQUOI IL EST ICI ET NON SUR LA CARTE.
 *
 * Les étapes suivantes obtiennent leur assombrissement par l'ombre portée du
 * halo. L'accueil n'a pas de halo — il ne désigne rien — et se détachait donc
 * sur une page en pleine lumière, ce qui le faisait passer pour un encart
 * parmi d'autres plutôt que pour le début de quelque chose.
 *
 * Mon premier essai posait un pseudo-élément « position: fixed » sur la carte
 * elle-même. Il la recouvrait exactement au lieu de couvrir l'écran : la carte
 * porte un « transform » pour se centrer, et un transform fait qu'un
 * descendant « fixe » se cale sur LUI et non sur la fenêtre. En mode sombre le
 * défaut se remarquait à peine ; en clair, la carte devenait grise.
 *
 * Le voile est donc porté par la racine, qui ne subit aucune transformation.
 * La classe est retirée par le script au moment où la visite commence.
 */
.visite--accueil { background: rgb(0 0 0 / 0.55); }

.visite__accueil {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(30rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding: var(--e6) var(--e5) var(--e5);
  text-align: center;
  background: var(--surface);
  border-radius: var(--rayon-lg);
  box-shadow: var(--ombre-3);
}

/*
 * L'arbre est dessiné, pas photographié : il suit le thème, reste net à toute
 * taille et ne coûte aucun chargement. Ses feuilles portent des visages —
 * c'est de famille qu'il s'agit, pas de botanique.
 */
.visite__arbre {
  display: block;
  width: min(14rem, 60%);
  height: auto;
  margin: 0 auto var(--e4);
  color: var(--vert-fonce);
}

.visite__feuilles circle { fill: var(--vert-clair); stroke: var(--vert); stroke-width: 2; }
.visite__silhouettes path { fill: var(--vert-fonce); }

.visite__surtitre {
  margin: 0 0 var(--e2);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vert);
  font-weight: 700;
}

.visite__bienvenue {
  margin: 0 0 var(--e4);
  font-family: var(--serif);
  font-size: 1.75rem;
  line-height: 1.15;
}

.visite__intro {
  margin: 0 0 var(--e3);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--texte-doux);
}

.visite__accueil .visite__actions { margin-top: var(--e5); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .visite__feuilles circle {
    fill: color-mix(in srgb, var(--vert) 25%, transparent);
  }
}

:root[data-theme="dark"] .visite__feuilles circle {
  fill: color-mix(in srgb, var(--vert) 25%, transparent);
}

/* Les deux actions du bas du calque, détachées des liens de navigation. */
.moi__actions {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  margin-top: var(--e3);
  padding-top: var(--e3);
  border-top: 1px solid var(--bordure);
}

/* ---------------------------------------------- la rangée d'outils */

.rang-outils {
  display: flex;
  align-items: center;
  gap: var(--e4);
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--e4);
}

/*
 * Les onglets prennent la place disponible et défilent seuls si besoin ; le
 * bouton reste collé au bord droit, sous le calque du profil.
 */
.rang-outils .onglets { flex: 1 1 auto; min-width: 0; padding-inline: 0; }
.rang-outils .ajout-entete { flex: 0 0 auto; margin-left: auto; }

/* Le calque de l'ajout s'ouvre vers la gauche : à droite, il sortirait. */
.rang-outils .ajout-entete__calque { left: auto; right: 0; }

@media (min-width: 62rem) {
  .rang-outils { padding-inline: var(--e5); }
}

/* ------------------------------------- aperçu d'un courriel, en admin */

.apercu-mail {
  padding: var(--e4);
  background: var(--surface-2);
  border-radius: var(--rayon);
  font-size: 0.875rem;
}

.apercu-mail__ligne { margin: 0 0 var(--e1); color: var(--texte-doux); }
.apercu-mail__filet { margin: var(--e3) 0; border: 0; border-top: 1px solid var(--bordure); }
.apercu-mail__salut { margin: 0 0 var(--e2); font-weight: 600; }

.apercu-mail__bouton {
  display: inline-block;
  margin: var(--e4) 0 0;
  padding: var(--e2) var(--e4);
  border-radius: var(--rayon);
  background: var(--vert);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
}