/* Club des utilisateurs greehill Trees — mêmes couleurs que l'espace de l'équipe (admin.css), mode sombre compris. */
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("/assets/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("/assets/fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url("/assets/fonts/inter-latin-700-normal.woff2") format("woff2"); }
:root {
  --bg: #f5f6f3; --surface: #fff; --field: #fff; --ink: #111511; --muted: #5d685f; --line: #e2e6df;
  --green-ink: #4f6354; --tile: rgba(172, 191, 173, .32); --accent: #1f6b45; --accent-ink: #fff;
  --btn: #fff; --btn-ink: #111511; --primary: #000; --primary-ink: #fff;
  --ok: #08795c; --ok-soft: #e3f5ef; --info: #1d5fa8; --info-soft: #e6f0fb; --warn: #9a5800; --warn-soft: #fff1df; --danger: #c23a37; --danger-soft: #fbe9e8;
  --gradient: linear-gradient(110deg, #839788 0%, #e9ddc6 100%); --top-ink: #000;
  --mer: #eef2ee; --terre: #fff; --terre-ligne: #c9d2c7; color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1411; --surface: #171e19; --field: #1d2620; --ink: #e4ebe5; --muted: #98a89c; --line: #2a352d;
    --green-ink: #a9c2ae; --tile: rgba(131, 151, 136, .18); --accent: #6fd3a8; --accent-ink: #0f1411;
    --btn: #1d2620; --btn-ink: #e4ebe5; --primary: #e4ebe5; --primary-ink: #0f1411;
    --ok: #6fd3a8; --ok-soft: #173126; --info: #8fbcf0; --info-soft: #172638; --warn: #f0b265; --warn-soft: #33271a; --danger: #ef8a80; --danger-soft: #3a1d1b;
    --gradient: linear-gradient(110deg, #3b4a40 0%, #5a5447 100%); --top-ink: #eef2ee;
    --mer: #0b0f0c; --terre: #26312a; --terre-ligne: #435246; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1411; --surface: #171e19; --field: #1d2620; --ink: #e4ebe5; --muted: #98a89c; --line: #2a352d;
  --green-ink: #a9c2ae; --tile: rgba(131, 151, 136, .18); --accent: #6fd3a8; --accent-ink: #0f1411;
  --btn: #1d2620; --btn-ink: #e4ebe5; --primary: #e4ebe5; --primary-ink: #0f1411;
  --ok: #6fd3a8; --ok-soft: #173126; --info: #8fbcf0; --info-soft: #172638; --warn: #f0b265; --warn-soft: #33271a; --danger: #ef8a80; --danger-soft: #3a1d1b;
  --gradient: linear-gradient(110deg, #3b4a40 0%, #5a5447 100%); --top-ink: #eef2ee;
  --mer: #0b0f0c; --terre: #26312a; --terre-ligne: #435246; color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 15px/1.55 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; min-height: 100vh; display: flex; flex-direction: column; }
a { color: inherit; }
h1 { font-size: 26px; line-height: 1.25; margin: 0 0 6px; letter-spacing: -.01em; }
h2 { font-size: 18px; margin: 0 0 12px; }
h3 { font-size: 15px; margin: 0 0 8px; }
.muted { color: var(--muted); }
.petit { font-size: 13px; }

/* En-tête */
.haut { background: var(--gradient); color: var(--top-ink); }
.haut-in { max-width: 1180px; margin: 0 auto; padding: 14px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.marque { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.marque .logo svg { height: 26px; width: auto; display: block; }
.marque .logo svg path, .marque .logo svg { fill: currentColor; }
.nom-club { font-size: 14px; border-left: 1px solid currentColor; padding-left: 12px; opacity: .9; }
.menu { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.menu a, .moi a { text-decoration: none; padding: 6px 10px; border-radius: 8px; font-weight: 600; font-size: 14px; }
.menu a:hover, .moi a:hover { background: rgba(255,255,255,.45); }
.menu a[aria-current="page"], .moi a[aria-current="page"] { background: rgba(255,255,255,.7); }
:root[data-theme="dark"] .menu a[aria-current="page"], :root[data-theme="dark"] .menu a:hover { background: rgba(255,255,255,.12); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .menu a[aria-current="page"], :root:not([data-theme="light"]) .menu a:hover { background: rgba(255,255,255,.12); } }
.moi { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.moi form { margin: 0; }
.theme { background: none; border: 0; color: inherit; font-size: 18px; cursor: pointer; padding: 4px 6px; }
.badge-anim { font-size: 13px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.55); font-weight: 600; }
:root[data-theme="dark"] .badge-anim { background: rgba(255,255,255,.12); }
button.lien { background: none; border: 0; padding: 6px 10px; color: inherit; font: inherit; font-weight: 600; cursor: pointer; border-radius: 8px; }
button.lien:hover { background: rgba(255,255,255,.45); }

/* Contenu */
.page { max-width: 1180px; width: 100%; margin: 0 auto; padding: 28px 16px 40px; flex: 1; }
.page.etroite { max-width: 560px; }
.carte-bloc { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.grille { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.entete-page { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 20px; }

/* Chiffres clés */
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 0 0 24px; }
.chiffre { background: var(--tile); border-radius: 14px; padding: 16px; }
.chiffre b { display: block; font-size: 28px; line-height: 1.1; letter-spacing: -.02em; }
.chiffre span { color: var(--green-ink); font-size: 13px; }
.essences { display: flex; height: 12px; border-radius: 999px; overflow: hidden; margin: 8px 0 6px; background: var(--line); }
.essences i { display: block; height: 100%; }
.legende-ess { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--muted); }
.legende-ess span::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; background: var(--c); vertical-align: 0; }

.bientot { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bientot li { display: flex; gap: 10px; align-items: baseline; }
.bientot .pastille { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; background: var(--info-soft); color: var(--info); white-space: nowrap; }

/* Formulaires */
label { display: block; font-weight: 600; font-size: 14px; margin: 0 0 4px; }
input[type=text], input[type=email], input[type=tel], input[type=number], input:not([type]), select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--field); color: var(--ink); font: inherit; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.champ { margin: 0 0 14px; }
.champ .aide { font-size: 13px; color: var(--muted); margin: 4px 0 0; font-weight: 400; }
.case { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; margin: 0 0 10px; }
.case input { margin-top: 4px; }
.ligne-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 14px; }
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 10px; border: 1px solid var(--line); background: var(--btn); color: var(--btn-ink);
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.btn.principal { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.btn.danger { color: var(--danger); border-color: var(--danger); }
.btn.petit { padding: 5px 10px; font-size: 13px; border-radius: 8px; }
.btn:disabled { opacity: .5; cursor: default; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; align-items: center; }
.code { font-size: 28px; letter-spacing: 8px; text-align: center; font-variant-numeric: tabular-nums; }

.msg { padding: 10px 14px; border-radius: 10px; margin: 0 0 16px; }
.msg.ok { background: var(--ok-soft); color: var(--ok); }
.msg.err { background: var(--danger-soft); color: var(--danger); }
.msg.info { background: var(--info-soft); color: var(--info); }

/* Tableaux (animation) */
.tableau { width: 100%; border-collapse: collapse; font-size: 14px; }
.tableau th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; padding: 8px; border-bottom: 1px solid var(--line); }
.tableau td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tableau tr.inactif td { opacity: .5; }
.defile { overflow-x: auto; }
.etat { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.etat.ok { background: var(--ok-soft); color: var(--ok); }
.etat.attente { background: var(--warn-soft); color: var(--warn); }
.etat.off { background: var(--line); color: var(--muted); }
details.edition > summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 13px; }
details.edition[open] { background: var(--bg); border-radius: 10px; padding: 12px; margin-top: 6px; }
.onglets { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 18px; }
.onglets a { padding: 6px 14px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 14px; border: 1px solid var(--line); background: var(--surface); }
.onglets a[aria-current="page"] { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }

/* Annuaire */
.annuaire-outils { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
.annuaire-outils input { flex: 1 1 240px; }
.annuaire-outils select { flex: 0 1 240px; }
.fiches { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.fiche { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.fiche .qui { font-weight: 700; }
.fiche .ou { color: var(--green-ink); font-size: 13px; }
.fiche .contact { font-size: 13px; margin-top: 8px; word-break: break-word; }
.fiche .contact a { color: var(--accent); }
.vide { color: var(--muted); padding: 24px; text-align: center; }

/* Carte */
.carte-france { height: 560px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--mer); }
.carte-france.leaflet-container { background: var(--mer); font: inherit; }
.leaflet-tooltip.club-bulle { font: 600 13px Inter, system-ui, sans-serif; border-radius: 8px; }
.club-point { background: var(--accent); border: 2px solid var(--surface); border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.club-point.partenaire { background: var(--info); }

/* Fenêtre d'une organisation */
.zoom { position: fixed; inset: 0; background: rgba(10, 15, 12, .45); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 2000; }
.zoom[hidden] { display: none; }
.zoom-boite { background: var(--surface); border-radius: 16px; width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 22px; position: relative; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.zoom-fermer { position: absolute; top: 10px; right: 10px; background: none; border: 0; font-size: 24px; cursor: pointer; color: var(--muted); line-height: 1; padding: 6px; }
.zoom-tete { display: flex; gap: 16px; align-items: center; margin: 0 0 16px; padding-right: 30px; }
.zoom-tete img { width: 72px; height: 72px; object-fit: contain; border-radius: 12px; background: #fff; padding: 6px; border: 1px solid var(--line); }
.zoom-tete .sans-logo { width: 72px; height: 72px; border-radius: 12px; background: var(--tile); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 24px; color: var(--green-ink); }
.zoom-tete h2 { margin: 0; }
.zoom .chiffres { margin: 0 0 16px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.zoom .chiffre b { font-size: 22px; }
.zoom ul.membres { margin: 0; padding-left: 18px; }

/* Pied de page */
.bas { border-top: 1px solid var(--line); background: var(--surface); }
.bas-in { max-width: 1180px; margin: 0 auto; padding: 18px 16px 24px; font-size: 13px; color: var(--muted); }
.bas .support { background: var(--warn-soft); color: var(--ink); border-radius: 10px; padding: 12px 14px; margin: 0 0 12px; }
.bas .support strong { color: var(--warn); }
.bas .liens a { color: var(--muted); }

.charte h2 { margin-top: 24px; }
.charte li { margin: 0 0 6px; }

@media (max-width: 720px) {
  .nom-club { display: none; }
  .carte-france { height: 420px; }
  h1 { font-size: 22px; }
}

/* ===== Pages « arbre » (accueil, connexion, invitation) : comme les pages d'accueil greehill (/admin/login.php) ===== */
/* Toujours en clair, l'arbre dans le nuage à droite, cadres en verre dépoli. */
body.arbre {
  --bg: #fff; --surface: rgba(255,255,255,.55); --field: rgba(255,255,255,.8); --ink: #000; --muted: #4d574f; --line: #dfe4dc;
  --green-ink: #4f6354; --tile: rgba(255,255,255,.45); --accent: #1f6b45; --accent-ink: #fff;
  --btn: rgba(255,255,255,.7); --btn-ink: #000; --primary: #000; --primary-ink: #fff;
  --ok: #08795c; --ok-soft: #e3f5ef; --info: #1d5fa8; --info-soft: #e6f0fb; --warn: #9a5800; --warn-soft: #fff1df; --danger: #c23a37; --danger-soft: #fbe9e8;
  --verre: rgba(255,255,255,.55); --verre-bord: rgba(255,255,255,.85); --ombre: 0 10px 40px rgba(0,0,0,.12);
  --gradient: linear-gradient(110deg, #839788 0%, #e9ddc6 100%);
  color-scheme: light; color: var(--ink);
  background: linear-gradient(90deg, #fff 0, rgba(255,255,255,.88) 18%, rgba(255,255,255,.55) 30%, rgba(255,255,255,0) 42%),
              #fff url("/assets/home/arbre-nuage.webp") 100% 45% / auto 108% no-repeat fixed;
}
body.arbre .haut { background: rgba(255,255,255,.45); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  border-bottom: 1px solid rgba(255,255,255,.8); color: #000; position: sticky; top: 0; z-index: 1000; }
body.arbre .menu a:hover, body.arbre .moi a:hover, body.arbre button.lien:hover { background: rgba(255,255,255,.7); }
body.arbre .menu a[aria-current="page"] { background: var(--gradient); }
body.arbre .badge-anim { background: rgba(255,255,255,.7); }
body.arbre .carte-bloc, body.arbre .fiche { background: var(--verre); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid var(--verre-bord); box-shadow: var(--ombre); }
body.arbre .btn.principal { background: var(--gradient); color: #000; border-color: transparent; }
body.arbre .msg { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
body.arbre .bas { background: linear-gradient(90deg, rgba(255,255,255,.95), rgba(255,255,255,.6)); border-top: 0; }
body.arbre .bas .support { background: rgba(255,241,223,.85); }

/* Accueil : grand titre à gauche, chiffres posés dans les racines de l'arbre (comme l'accueil de l'équipe) */
.hero { min-height: calc(100vh - 150px); display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding: 12px 0 24px; }
.hero-col { width: min(470px, 100%); }
.surtitre { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--green-ink); margin: 18px 0 0; }
.hero h1 { font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.1; font-weight: 600; letter-spacing: -.04em; margin: 12px 0 12px; }
.hero .lead { color: var(--muted); margin: 0 0 18px; font-size: .98rem; text-shadow: 0 0 6px #fff, 0 0 12px #fff; }
.hero .actions .btn { padding: 11px 18px; }
.stats { align-self: flex-end; width: min(780px, 100%); background: rgba(255,255,255,.5); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.9); border-radius: 16px; box-shadow: var(--ombre); padding: 16px 22px 14px; }
.stats .t { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--green-ink); margin-bottom: 8px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.stats .t span { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); }
.stats .g { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr; }
.stats .g > div { padding: 0 14px; border-left: 1px solid rgba(20,60,40,.12); }
.stats .g > div:first-child { padding-left: 0; border-left: 0; }
.stats b { display: block; font-size: clamp(1.5rem, 2.4vw, 2.2rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.05; font-variant-numeric: tabular-nums;
  background: linear-gradient(110deg, #4f6354, #839788); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stats small { display: block; font-size: .8rem; color: var(--muted); line-height: 1.3; margin-top: 4px; }
.stats .ess { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(20,60,40,.12); }
.ess-t { font-size: .8rem; font-weight: 700; margin-bottom: 7px; }
.ess .bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: #eef0ec; box-shadow: inset 0 0 0 1px rgba(20,60,40,.08); }
.ess .bar span { display: block; height: 100%; }
.ess ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px 14px; font-size: .76rem; color: var(--muted); }
.ess li { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.ess li i { width: 9px; height: 9px; border-radius: 3px; flex: none; box-shadow: inset 0 0 0 1px rgba(20,60,40,.12); }
.ess li em { font-style: normal; margin-left: auto; font-variant-numeric: tabular-nums; color: #000; }
.accueil-blocs { margin-top: 8px; }
body.arbre .page.etroite-arbre { max-width: 1180px; }
body.arbre .col-arbre { width: min(440px, 100%); padding-top: 4vh; }
body.arbre .col-arbre h1 { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 600; letter-spacing: -.04em; line-height: 1.1; margin: 0 0 10px; }
body.arbre .col-large { width: min(820px, 100%); }

@media (max-width: 900px) {
  body.arbre { background: #fff url("/assets/home/arbre-nuage.webp") 50% 0 / 150% auto no-repeat scroll; }
  body.arbre .haut { position: static; }
  .hero { min-height: 0; padding-top: min(78vw, 440px); }
  body.arbre .col-arbre { padding-top: min(78vw, 440px); }
  .stats .g { grid-template-columns: 1fr 1fr; row-gap: 14px; }
  .stats .g > div { padding: 0 0 0 12px; } .stats .g > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .ess ul { grid-template-columns: repeat(2, 1fr); }
}
/* Même cadrage que l'accueil de l'équipe : contenu calé à gauche, l'arbre libre à droite */
@media (min-width: 901px) {
  body.arbre .haut-in, body.arbre .page, body.arbre .bas-in { max-width: none; padding-left: clamp(20px, 6vw, 96px); padding-right: clamp(20px, 6vw, 96px); }
  body.arbre .hero-col { width: min(420px, 100%); }
  body.arbre .accueil-blocs { max-width: 1180px; margin-left: auto; }
}

/* Pages des membres (annuaire, profil, charte) dans le style « arbre » */
body.arbre { --mer: rgba(238,242,238,.75); --terre: #fff; --terre-ligne: #c9d2c7; }
body.arbre .entete-page h1 { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 600; letter-spacing: -.04em; line-height: 1.1; }
body.arbre .entete-page .muted { text-shadow: 0 0 6px #fff, 0 0 12px #fff; }
body.arbre .carte-france { border: 1px solid var(--verre-bord); box-shadow: var(--ombre); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
body.arbre .zoom { background: rgba(40, 52, 44, .25); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
body.arbre .zoom-boite { background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); border: 1px solid var(--verre-bord); }
body.arbre .zoom .chiffre, body.arbre .chiffre { background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.9); }
body.arbre .zoom .chiffre b { background: linear-gradient(110deg, #4f6354, #839788); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.arbre .club-point { background: #4f6354; border-color: #fff; }
body.arbre .club-point.partenaire { background: #b39a6b; }
body.arbre input:not([type=checkbox]):not([type=radio]):not([type=file]), body.arbre select, body.arbre textarea { background: rgba(255,255,255,.8); }
body.arbre input:focus, body.arbre select:focus, body.arbre textarea:focus { outline-color: #4f6354; }
body.arbre .fiche .contact a, body.arbre details.edition > summary { color: #1f4f33; }
body.arbre .annuaire-outils input, body.arbre .annuaire-outils select { box-shadow: var(--ombre); border-color: var(--verre-bord); }
body.arbre .bientot .pastille { background: rgba(255,255,255,.75); color: #4f6354; border: 1px solid rgba(79,99,84,.25); }
/* Écrans moyens : le menu passe sur sa propre ligne, sous le logo (au lieu de s'empiler en colonne) */
@media (max-width: 1100px) {
  .menu { order: 3; flex-basis: 100%; }
  .menu a { white-space: nowrap; }
  .moi { margin-left: auto; }
}

/* Pied de page compact sur les pages des membres : le rappel « pas le support » sur une ligne */
body.arbre .bas-in { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding-top: 10px; padding-bottom: 12px; }
body.arbre .bas .support { margin: 0; padding: 7px 12px; flex: 1 1 520px; }
body.arbre .bas .liens { margin: 0; }

/* Accueil : tout sur un écran, sans défiler. À gauche titre, accès et programme ; en bas à droite les chiffres dans les racines. */
.programme { padding: 14px 18px; margin-top: 18px; }
.programme h2 { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--green-ink); margin: 0 0 8px; }
.programme ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: .86rem; line-height: 1.35; }
.programme li { display: flex; gap: 10px; align-items: baseline; }
.programme .pastille { flex: none; min-width: 74px; text-align: center; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.75); color: #4f6354; border: 1px solid rgba(79,99,84,.25); }
.programme li:first-child .pastille { background: var(--gradient); border-color: transparent; color: #000; }
body.accueil-ecran .hero .msg { margin: 0 0 12px; }
@media (min-width: 901px) {
  body.accueil-ecran .page { display: flex; padding-top: 18px; padding-bottom: 18px; }
  body.accueil-ecran .hero { flex: 1; min-height: 0; padding: 0; display: grid; grid-template-columns: minmax(340px, 430px) 1fr; align-items: end; gap: 24px 40px; }
  body.accueil-ecran .hero-col { width: auto; align-self: start; }
  body.accueil-ecran .surtitre { margin-top: 0; }
  body.accueil-ecran .hero h1 { margin: 8px 0 8px; }
  body.accueil-ecran .hero .lead { margin-bottom: 14px; }
  body.accueil-ecran .stats { align-self: end; justify-self: end; width: min(760px, 100%); }
}
@media (min-width: 901px) and (max-width: 1250px) {
  body.accueil-ecran .stats .g { grid-template-columns: 1fr 1fr; row-gap: 12px; }
  body.accueil-ecran .stats .g > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  body.accueil-ecran .ess ul { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 901px) and (max-height: 760px) {
  body.accueil-ecran .hero h1 { font-size: 2.2rem; }
  body.accueil-ecran .programme ul { gap: 4px; }
  body.accueil-ecran .stats { padding: 12px 18px 10px; }
  body.accueil-ecran .stats .ess { margin-top: 10px; padding-top: 8px; }
}
/* Téléphone : l'arbre en bandeau réduit, le contenu tout de suite dessous */
@media (max-width: 900px) {
  body.accueil-ecran { background: #fff url("/assets/home/arbre-nuage.webp") 50% 0 / 110% auto no-repeat scroll; }
  body.accueil-ecran .hero { padding-top: 34vw; gap: 18px; }
}

/* Annuaire : à gauche les organisations et les membres, à droite la carte (moitié de l'écran, fixe au défilement) */
.annuaire-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.annuaire-gauche { display: grid; gap: 24px; min-width: 0; }
.annuaire-gauche h2 { margin-bottom: 10px; }
.annuaire-droite { position: sticky; top: 84px; }
.annuaire-droite .carte-france { height: calc(100vh - 190px); min-height: 380px; max-height: 760px; }
.orgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.org { display: flex; gap: 12px; align-items: center; text-align: left; font: inherit; color: inherit; cursor: pointer; padding: 10px 12px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line); }
body.arbre .org { background: var(--verre); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); border-color: var(--verre-bord); box-shadow: var(--ombre); }
.org:hover { outline: 2px solid #839788; }
.org img, .org .sans-logo { width: 40px; height: 40px; border-radius: 9px; flex: none; object-fit: contain; background: #fff; }
.org .sans-logo { display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: #4f6354; background: rgba(172,191,173,.35); }
.org strong { display: block; line-height: 1.25; }
.org small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.3; margin-top: 2px; }
.annuaire-gauche .fiches { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
@media (max-width: 900px) {
  .annuaire-grille { grid-template-columns: 1fr; }
  .annuaire-droite { position: static; order: -1; }
  .annuaire-droite .carte-france { height: 380px; }
}
/* Téléphone, pages intérieures : l'arbre voilé de blanc, pour que les titres restent lisibles */
@media (max-width: 900px) {
  body.arbre:not(.accueil-ecran) { background: linear-gradient(rgba(255,255,255,.78), rgba(255,255,255,.78)), #fff url("/assets/home/arbre-nuage.webp") 50% 0 / 150% auto no-repeat scroll; }
}

/* Animation : interrupteur des e-mails aux membres */
.envois { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 16px; border-radius: 12px; margin: 0 0 18px; font-size: 14px; }
.envois span { flex: 1 1 420px; }
.envois.suspendus { background: var(--info-soft); color: var(--ink); border: 1px solid var(--info); }
.envois.actifs { background: var(--ok-soft); color: var(--ink); border: 1px solid var(--ok); }
.envois input { padding: 6px 10px; }

/* Agenda : liste des événements à gauche, détail à droite */
.evts { display: grid; gap: 10px; }
.evt { display: flex; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 12px; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--line); }
body.arbre .evt { background: var(--verre); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); border-color: var(--verre-bord); box-shadow: var(--ombre); }
.evt:hover { outline: 2px solid #839788; }
.evt.choisi { outline: 2px solid #4f6354; }
.evt.annule strong { text-decoration: line-through; }
.evts.passes .evt { opacity: .75; }
.date { flex: none; width: 56px; text-align: center; border-radius: 10px; padding: 6px 0 5px; background: var(--gradient); color: #000; font-size: 12px; font-weight: 600; line-height: 1.1; text-transform: lowercase; }
.date b { display: block; font-size: 22px; letter-spacing: -.03em; }
.date small { display: block; font-size: 10px; font-weight: 400; opacity: .75; }
.date.grande { width: 72px; padding: 8px 0 7px; font-size: 14px; }
.date.grande b { font-size: 30px; }
.quoi { flex: 1; min-width: 0; }
.quoi strong { display: block; line-height: 1.25; }
.quoi small, .type { display: block; font-size: 12.5px; color: var(--muted); }
.type { text-transform: uppercase; letter-spacing: .05em; font-size: 11px; font-weight: 700; color: var(--green-ink); }
.evt-tete { display: flex; gap: 16px; align-items: center; margin-bottom: 14px; }
.evt-tete h2 { margin: 2px 0 2px; font-size: 22px; letter-spacing: -.02em; line-height: 1.2; }
.evt-tete .quand { margin: 0; color: var(--muted); }
.evt-infos { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0 0 14px; font-size: 14px; }
.evt-infos dt { font-weight: 700; color: var(--green-ink); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; padding-top: 2px; }
.evt-infos dd { margin: 0; }
.evt-texte { font-size: 14.5px; line-height: 1.6; padding: 12px 0; border-top: 1px solid rgba(20,60,40,.12); }
.evt-action { border-top: 1px solid rgba(20,60,40,.12); padding-top: 14px; }
.evt-action form { margin: 0; }
.statut-insc { font-weight: 700; margin: 0 0 10px; }
.statut-insc.ok { color: var(--ok); }
.statut-insc.attente { color: var(--warn); }
.agenda .annuaire-droite { top: 84px; }
.agenda .evt-detail { max-height: calc(100vh - 120px); overflow: auto; }
@media (max-width: 900px) { .agenda .evt-detail { max-height: none; } }
.programme li:first-child .pastille, .programme .pastille.date-p { background: var(--gradient); border-color: transparent; color: #000; text-transform: none; }
.programme a { color: inherit; }
/* Menu des pages « arbre » : plus fort que les règles du mode sombre (toujours en clair ici) */
body.arbre .haut .menu a:hover, body.arbre .haut .moi a:hover { background: rgba(255,255,255,.7); }
body.arbre .haut .menu a[aria-current="page"], body.arbre .haut .moi a[aria-current="page"] { background: var(--gradient); }

/* ===== Raccord avec greehill.com (site international) ===== */
/* Dégradé de marque à 273°, boutons à coins bas plats, pied de page en dégradé, verre sauge sur les éléments forts */
body.arbre { --gradient: linear-gradient(273deg, #e9ddc6 6.12%, #839788 123.67%); --verre-sauge: rgba(131,151,136,.5); }
body.arbre .btn { border-radius: 10px 10px 0 0; padding: 10px 24px; }
body.arbre .btn.petit { padding: 5px 12px; border-radius: 8px 8px 0 0; }
body.arbre .btn.principal { font-weight: 700; }
body.arbre .bas { background: linear-gradient(273deg, #e9ddc6 6.12%, #839788 123.67%); color: #000; }
body.arbre .bas .liens, body.arbre .bas .liens a { color: #000; }
body.arbre .bas .support { background: rgba(255,255,255,.55); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
body.arbre .date { background: var(--verre-sauge); color: #fff; -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
body.arbre .date small { opacity: .9; }
body.arbre .carte-bloc, body.arbre .stats, body.arbre .evt, body.arbre .org, body.arbre .fiche { border-radius: 16px; }
/* Fenêtre d'une organisation : petite carte zoomée sur son contour */
.zoom-carte { height: 190px; border-radius: 12px; overflow: hidden; margin: 0 0 16px; background: var(--mer); border: 1px solid var(--line); }
.zoom-carte.leaflet-container { background: var(--mer); }
/* Rencontres mixtes : choix sur place / en ligne */
fieldset.modes { border: 0; padding: 0; margin: 0 0 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
fieldset.modes legend { font-weight: 600; font-size: 14px; margin-bottom: 6px; padding: 0; }
.mode { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.6); cursor: pointer; font-weight: 400; margin: 0; }
.mode:has(input:checked) { outline: 2px solid #4f6354; background: #fff; }
.mode input { margin-top: 3px; }
.mode strong { display: block; }
.mode small { display: block; color: var(--muted); font-size: 12.5px; }
@media (max-width: 480px) { fieldset.modes { grid-template-columns: 1fr; } }

/* ===== Icônes (traits fins, couleur du texte) ===== */
.ico { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.18em; }
.menu a, .moi a, button.lien, .btn, .bas .liens a, .onglets a { display: inline-flex; align-items: center; gap: 7px; }
.menu a .ico { opacity: .85; }
.theme .ico { width: 18px; height: 18px; }
.btn .ico { width: 1.05em; height: 1.05em; }
.btn.icone { padding: 7px; border-radius: 9px; }
body.arbre .btn.icone { border-radius: 9px 9px 0 0; }
/* « Modifier », « Ajouter… » : des boutons, plus des liens */
details.edition > summary, details.ajout > summary { list-style: none; cursor: pointer; display: inline-flex; }
details.edition > summary::-webkit-details-marker, details.ajout > summary::-webkit-details-marker { display: none; }
details.edition > summary { align-items: center; gap: 6px; padding: 5px 11px; border-radius: 8px; border: 1px solid var(--line); background: var(--btn); color: var(--btn-ink); font-size: 13px; font-weight: 600; }
details.edition > summary:hover { border-color: var(--green-ink); }
details.edition[open] > summary { background: var(--tile); }
@media (max-width: 720px) { .lib-court { display: none; } }

/* Animation : organisations dépliables */
.org-liste { display: grid; }
.org-tete, .org-ligne > summary { display: grid; grid-template-columns: minmax(200px, 2.2fr) .8fr 1.1fr 1.6fr 1fr .9fr 28px; gap: 12px; align-items: center; padding: 10px 8px; }
.org-tete { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line); }
.org-tete::after { content: ""; }
.org-ligne { border-bottom: 1px solid var(--line); }
.org-ligne > summary { list-style: none; cursor: pointer; font-size: 14px; }
.org-ligne > summary::-webkit-details-marker { display: none; }
.org-ligne > summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); justify-self: center; transition: transform .15s; }
.org-ligne[open] > summary::after { transform: rotate(45deg); }
.org-ligne > summary:hover { background: var(--tile); border-radius: 10px; }
.org-ligne[open] > summary { background: var(--tile); border-radius: 10px 10px 0 0; }
.org-ligne.inactif > summary { opacity: .55; }
.org-nom { display: flex; align-items: center; gap: 10px; min-width: 0; }
.org-nom img { width: 28px; height: 28px; object-fit: contain; border-radius: 6px; background: #fff; flex: none; }
.org-detail { padding: 14px 8px 18px; border-left: 3px solid var(--tile); margin: 0 0 6px 8px; }
details.ajout { margin-top: 12px; }
details.ajout[open] { background: var(--bg); border-radius: 12px; padding: 12px; }
details.ajout[open] > summary { margin-bottom: 10px; }
.relire { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 0 0 10px; }
.relire span { flex: 1 1 380px; }
.source { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--info-soft); color: var(--info); }
.source.pipedrive { background: var(--ok-soft); color: var(--ok); }
@media (max-width: 900px) {
  .org-tete { display: none; }
  .org-ligne > summary { grid-template-columns: 1fr auto; }
  .org-ligne > summary > span:not(.org-nom) { display: none; }
  .org-ligne > summary > span:nth-child(5) { display: block; font-size: 13px; color: var(--muted); }
}
.lien-ico { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 600; color: var(--green-ink); }
.lien-ico:hover { text-decoration: underline; text-underline-offset: 3px; }
summary.titre-ico { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.zoom-fermer { line-height: 0; }
.menu { flex: 1 1 auto; }
.menu a { white-space: nowrap; }

/* ===== Animation (back-office) : même charte que le club, mais reconnaissable ===== */
/* arbre voilé (tableaux lisibles), bandeau « Espace animateurs » en verre sauge comme sur greehill.com */
body.arbre.backoffice { background: linear-gradient(rgba(255,255,255,.8), rgba(255,255,255,.8)),
  linear-gradient(90deg, #fff 0, rgba(255,255,255,.88) 18%, rgba(255,255,255,.55) 30%, rgba(255,255,255,0) 42%),
  #fff url("/assets/home/arbre-nuage.webp") 100% 45% / auto 108% no-repeat fixed; }
.bandeau-bo { background: rgba(131,151,136,.78); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); color: #fff; position: sticky; top: 63px; z-index: 999; }
.bandeau-bo-in { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 8px clamp(16px, 6vw, 96px); font-size: 14px; }
.bandeau-bo-in > span { flex: 1 1 320px; }
.bandeau-bo .ico { width: 20px; height: 20px; }
body.arbre .bandeau-bo .btn { background: rgba(255,255,255,.92); color: #000; border-color: transparent; }
body.arbre.backoffice .haut .menu a[aria-current="page"] { background: rgba(131,151,136,.78); color: #fff; }
body.arbre.backoffice .carte-bloc, body.arbre.backoffice .envois { background: rgba(255,255,255,.88); }
body.arbre.backoffice .envois.suspendus { background: rgba(230,240,251,.92); }
body.arbre.backoffice .envois.actifs { background: rgba(227,245,239,.92); }
body.arbre.backoffice .onglets a { background: rgba(255,255,255,.85); }
body.arbre.backoffice .onglets a[aria-current="page"] { background: rgba(131,151,136,.85); color: #fff; border-color: transparent; }
body.arbre.backoffice details.ajout[open], body.arbre.backoffice details.edition[open] { background: rgba(244,246,243,.95); }
@media (max-width: 900px) {
  .bandeau-bo { position: static; }
  body.arbre.backoffice { background: linear-gradient(rgba(255,255,255,.85), rgba(255,255,255,.85)), #fff url("/assets/home/arbre-nuage.webp") 50% 0 / 150% auto no-repeat scroll; }
}

/* ===== Boutons réduits à leur icône : libellé au survol ===== */
.icone { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.btn.icone, summary .icone, details.edition > summary.icone { padding: 7px; gap: 0; }
.btn.petit.icone { padding: 6px; }
.moi .icone { padding: 7px; border-radius: 9px; }
.icone[data-tip]:hover::after, .icone[data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: rgba(30, 42, 34, .94); color: #fff; font: 600 12px/1.3 Inter, system-ui, sans-serif; letter-spacing: 0; text-transform: none;
  white-space: nowrap; padding: 5px 9px; border-radius: 7px; pointer-events: none; z-index: 3000; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.moi .icone[data-tip]:hover::after, .moi .icone[data-tip]:focus-visible::after { left: auto; right: 0; transform: none; }
.badge-anim.icone { padding: 6px; }
.org-detail td:last-child { white-space: nowrap; }
.org-detail td:last-child > form, .org-detail td:last-child > details { display: inline-block; vertical-align: top; margin: 0 4px 0 0 !important; }
.org-detail td:last-child > details[open] { display: block; margin-top: 6px !important; white-space: normal; }
.defile { overflow: visible; }
@media (max-width: 900px) { .defile { overflow-x: auto; } }
/* Sous les membres : « ajouter » et « fiche » côte à côte tant qu'ils sont fermés */
.org-detail > details:not([open]) { display: inline-block; margin: 12px 6px 0 0 !important; vertical-align: top; }
.org-detail > details[open] { display: block; }
/* Carte : la Suisse s'efface vers l'est, seule la Suisse romande reste nette (dégradés définis par annuaire.js) */
.leaflet-container path.fond-suisse { fill: url(#fondu-suisse-f); stroke: url(#fondu-suisse-l); }

/* ===== Champs de formulaire : arrondis, doux, verre (toutes les pages du club) ===== */
body.arbre label { font-size: 12.5px; font-weight: 600; color: var(--green-ink); letter-spacing: .01em; margin-bottom: 6px; }
body.arbre input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]), body.arbre select, body.arbre textarea {
  width: 100%; min-height: 46px; padding: 11px 15px; border-radius: 14px; font: 400 15px/1.35 Inter, system-ui, sans-serif; color: #111511;
  background: rgba(255,255,255,.88); border: 1px solid rgba(79,99,84,.16);
  box-shadow: 0 1px 2px rgba(20,40,28,.04), inset 0 1px 0 rgba(255,255,255,.9);
  transition: border-color .15s, box-shadow .15s, background .15s; -webkit-appearance: none; appearance: none; }
body.arbre input:hover:not([type=checkbox]):not([type=radio]):not([type=file]), body.arbre select:hover, body.arbre textarea:hover { border-color: rgba(79,99,84,.32); }
body.arbre input:focus, body.arbre select:focus, body.arbre textarea:focus { outline: none; background: #fff; border-color: #839788; box-shadow: 0 0 0 4px rgba(131,151,136,.22); }
body.arbre input::placeholder, body.arbre textarea::placeholder { color: #9aa59c; }
body.arbre textarea { min-height: 96px; resize: vertical; }
body.arbre select { padding-right: 42px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f6354' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; }
body.arbre input[type=date], body.arbre input[type=time] { font-variant-numeric: tabular-nums; cursor: text; }
body.arbre input[type=date]::-webkit-calendar-picker-indicator, body.arbre input[type=time]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; filter: sepia(1) hue-rotate(70deg) saturate(.6); }
body.arbre input[type=file] { font: inherit; font-size: 13.5px; }
body.arbre input[type=file]::file-selector-button { font: 600 13px Inter, system-ui, sans-serif; border: 1px solid rgba(79,99,84,.2); background: rgba(255,255,255,.9); border-radius: 10px 10px 0 0; padding: 8px 14px; margin-right: 12px; cursor: pointer; }
body.arbre input:disabled { opacity: .55; }
body.arbre .champ { margin-bottom: 16px; }
body.arbre .ligne-champs { gap: 0 16px; }

/* Cases à cocher → interrupteurs sauge */
body.arbre .case { align-items: center; gap: 12px; font-size: 14px; color: #111511; font-weight: 400; margin: 0 0 12px; letter-spacing: 0; }
body.arbre .case input[type=checkbox] { -webkit-appearance: none; appearance: none; flex: none; width: 40px; height: 23px; margin: 0; border-radius: 999px; cursor: pointer;
  background: rgba(79,99,84,.2); position: relative; transition: background .18s; box-shadow: inset 0 1px 2px rgba(0,0,0,.08); }
body.arbre .case input[type=checkbox]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .18s; }
body.arbre .case input[type=checkbox]:checked { background: #839788; }
body.arbre .case input[type=checkbox]:checked::after { transform: translateX(17px); }
body.arbre .case input[type=checkbox]:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(131,151,136,.3); }
/* cases des listes (cocher des personnes) : rondes et sauge, pas en interrupteur */
body.arbre .tableau input[type=checkbox] { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 7px; border: 1.5px solid rgba(79,99,84,.4); background: #fff; cursor: pointer; position: relative; vertical-align: middle; }
body.arbre .tableau input[type=checkbox]:checked { background: #839788; border-color: #839788; }
body.arbre .tableau input[type=checkbox]:checked::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* Formulaires en blocs titrés (événement…) */
.blocs-form { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; align-items: start; }
.bloc-form { border: 0; margin: 0; padding: 16px 18px 6px; border-radius: 16px; background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.9); }
.bloc-form legend { float: left; width: 100%; display: flex; align-items: center; gap: 8px; padding: 0; margin: 0 0 14px;
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #4f6354; }
.bloc-form legend + * { clear: both; }
.bloc-form .ico { width: 17px; height: 17px; }
.colonne-form { display: grid; gap: 16px; align-content: start; }
.form-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 16px; }
@media (max-width: 980px) { .blocs-form { grid-template-columns: 1fr; } }
.bloc-form { background: rgba(244,246,243,.85); border-color: rgba(79,99,84,.08); }
body.arbre.backoffice .carte-bloc .bloc-form input:not([type=checkbox]), body.arbre.backoffice .carte-bloc .bloc-form select, body.arbre.backoffice .carte-bloc .bloc-form textarea { background-color: #fff; }

/* ===== Passe « moderne » : avatars, contacts, charte, profil, journal, agenda admin, état des e-mails ===== */
.avatar { flex: none; width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font: 700 13px/1 Inter, system-ui, sans-serif; letter-spacing: .02em; color: #fff; background: linear-gradient(135deg, #839788, #4f6354); box-shadow: 0 2px 6px rgba(79,99,84,.25); }
.avatar.carre { border-radius: 8px; width: 28px; height: 28px; font-size: 11px; }
.avatar.grand { width: 64px; height: 64px; font-size: 22px; }
.personne { display: flex; align-items: center; gap: 12px; }
.personne .avatar { width: 34px; height: 34px; font-size: 12px; }

/* Annuaire : fiches avec pastille et boutons de contact */
.fiche { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.fiche-txt { min-width: 0; }
.fiche .contact { display: flex; gap: 6px; margin: 0; }
.fiche .qui { font-weight: 700; }

/* Charte : quatre cartes */
.charte { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.charte-carte { background: var(--verre, rgba(255,255,255,.6)); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.9); border-radius: 18px; padding: 20px 22px; box-shadow: 0 10px 40px rgba(0,0,0,.08); }
.charte-carte h2 { display: flex; align-items: center; gap: 12px; font-size: 17px; margin: 0 0 14px !important; }
.charte-ico { width: 38px; height: 38px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: rgba(131,151,136,.18); color: #4f6354; flex: none; }
.charte-ico .ico { width: 20px; height: 20px; }
.charte-carte.attention .charte-ico { background: rgba(240,178,101,.22); color: #9a5800; }
.charte-carte ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14.5px; line-height: 1.55; }
.charte-carte li { padding-left: 22px; position: relative; }
.charte-carte li::before { content: ""; position: absolute; left: 4px; top: .6em; width: 8px; height: 8px; border-radius: 50%; background: #839788; }
.charte-carte dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; font-size: 14px; line-height: 1.5; }
.charte-carte dt { font-weight: 700; color: #4f6354; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; padding-top: 2px; }
.charte-carte dd { margin: 0; }
.invitation .charte { margin-top: 18px; }
.invitation > h1, .invitation > p { text-shadow: 0 0 6px #fff, 0 0 12px #fff; }

/* Profil */
.profil-tete { justify-content: flex-start; align-items: center; gap: 18px; }
.titre-bloc { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.titre-bloc .ico { color: #4f6354; }

/* Journal : fil chronologique par jour */
.journal-jour { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: #4f6354; margin: 18px 0 8px; }
.journal-jour:first-child { margin-top: 0; }
.journal-ligne { display: grid; grid-template-columns: 46px 34px 1fr; gap: 10px; align-items: start; padding: 8px 0; border-bottom: 1px solid rgba(79,99,84,.08); }
.journal-heure { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; padding-top: 7px; }
.journal-ico { width: 30px; height: 30px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgba(131,151,136,.16); color: #4f6354; }
.journal-ico .ico { width: 16px; height: 16px; }
.journal-ico.retenu, .journal-ico.depart { background: rgba(240,178,101,.22); color: #9a5800; }
.journal-txt { font-size: 14px; line-height: 1.45; padding-top: 4px; }

/* Agenda (animation) : cartes datées avec compteurs */
.evts-admin .evt { grid-template-columns: auto 1fr auto auto; display: grid; }
.compteurs { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.compteur { position: relative; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: rgba(131,151,136,.16); color: #4f6354; font-variant-numeric: tabular-nums; }
.compteur.attente { background: rgba(240,178,101,.22); color: #9a5800; }
.compteur .ico { width: 15px; height: 15px; }
.compteur[data-tip]:hover::after { content: attr(data-tip); position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: rgba(30,42,34,.94); color: #fff;
  font: 600 12px/1.3 Inter, system-ui, sans-serif; white-space: nowrap; padding: 5px 9px; border-radius: 7px; pointer-events: none; z-index: 3000; }

/* État des e-mails aux membres */
.etat-envois { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 18px; padding: 14px 16px; border-radius: 18px;
  background: rgba(255,255,255,.88); border: 1px solid rgba(255,255,255,.95); box-shadow: 0 10px 40px rgba(0,0,0,.06); }
.etat-ico { width: 42px; height: 42px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; flex: none; background: rgba(131,151,136,.18); color: #4f6354; }
.etat-ico .ico { width: 21px; height: 21px; }
.etat-txt { flex: 1 1 360px; font-size: 14.5px; line-height: 1.45; }
.puce-etat { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; vertical-align: 1px; }
.puce-etat i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.etat-envois.suspendus .puce-etat { background: rgba(29,95,168,.1); color: #1d5fa8; }
.etat-envois.actifs .puce-etat { background: rgba(8,121,92,.12); color: #08795c; }
.etat-envois.actifs .etat-ico { background: rgba(8,121,92,.12); color: #08795c; }
body.arbre .etat-envois .confirm-activer { width: 170px; min-height: 38px; padding: 7px 12px; border-radius: 12px; font-size: 13.5px; }
@media (max-width: 720px) {
  .evts-admin .evt { grid-template-columns: auto 1fr; }
  .evts-admin .compteurs, .evts-admin .evt > .etat { grid-column: 2; justify-content: flex-start; }
  .fiche { grid-template-columns: auto 1fr; }
  .fiche .contact { grid-column: 2; }
}
body.arbre .etat-envois input.confirm-activer { width: 170px !important; flex: none; min-height: 38px; padding: 7px 12px; border-radius: 12px; font-size: 13.5px; }
.etat-envois .btn { flex: none; }
/* Panneau « + » : recherche dans les e-mails Outlook */
.recherche-outlook { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 12px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.7); border: 1px solid rgba(79,99,84,.1); }
.outlook-lib { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: #4f6354; }
body.arbre .recherche-outlook input[name=domaines] { flex: 1 1 220px; width: auto; min-height: 38px; padding: 7px 12px; border-radius: 12px; font-size: 14px; }
.recherche-outlook.indispo { opacity: .75; }
.source.outlook { background: rgba(0,114,198,.1); color: #0a5aa0; }