/* ==========================================================================
   MaCommune — Design System white-label pour communes
   Les couleurs de marque sont injectées depuis config/commune.config.json
   via des variables CSS (--c-primary, --c-accent, …).
   ========================================================================== */

/* ---------- Polices auto-hébergées ----------
   Servies depuis le serveur de la commune : AUCUNE requête vers Google.
   Charger les polices depuis les serveurs de Google transmettrait l'adresse IP de
   chaque administré à Google LLC (transfert hors UE sans base légale), ce que
   les mentions légales du site excluent explicitement.
   Polices VARIABLES : un seul fichier couvre toutes les graisses (400→800).
   Licence SIL OFL 1.1 pour les deux familles — voir assets/fonts/README.md. */

/* Lexend — titres (--f-heading) */
@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/lexend-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/lexend-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Source Sans 3 — texte courant (--f-body) */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/source-sans-3-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/source-sans-3-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Source Sans 3 italique — bouton « Italique » de l'éditeur d'articles */
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/source-sans-3-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/source-sans-3-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
  /* Marque (surchargées par le config JSON) */
  --c-primary: #1A3C6E;
  --c-primary-dark: #122B50;
  /* 5,45:1 avec le blanc. L'ancienne valeur #C2681E n'était qu'à 3,97:1 :
     TOUS les boutons principaux des pages publiques étaient sous le seuil du
     RGAA (4,5:1 pour du texte normal). L'orange clair reste disponible plus
     bas pour les aplats décoratifs, qui ne portent pas de texte. */
  --c-accent: #A2551A;
  --c-accent-light: #E8965A;

  /* Dérivés */
  --c-primary-soft: color-mix(in srgb, var(--c-primary) 8%, white);
  --c-accent-soft: color-mix(in srgb, var(--c-accent) 12%, white);

  /* Neutres */
  --c-bg: #F6F8FB;
  --c-surface: #FFFFFF;
  --c-surface-2: #EEF2F7;
  --c-text: #17233B;
  --c-text-2: #4A5872;
  /* RGAA 3.2 — était #6D7A93 (4,07:1 sur --c-bg, sous le seuil de 4,5:1).
     Teinte et saturation conservées, seule la luminosité baisse. → 4,50:1 min. */
  --c-text-3: #636F86;
  /* Séparateur décoratif : aucun seuil de contraste exigé (RGAA 3.2 ne vise que
     l'information). Ne PAS l'utiliser pour la bordure d'un composant de saisie. */
  --c-border: #DFE6EF;
  /* Bordure porteuse d'information (champs, cases, limites de composant) : ≥ 3:1. */
  --c-border-strong: #6E8EB7;

  /* Déclinaisons « texte » des couleurs de marque.
     --c-primary / --c-accent sont injectées en style INLINE sur :root par app.js
     (setProperty) : une règle [data-theme="dark"] ne pourrait pas les surcharger.
     Ces variables-ci ne sont jamais injectées, donc le thème sombre les pilote,
     et elles restent DÉRIVÉES de la couleur de la commune (white-label préservé). */
  --c-primary-text: var(--c-primary);
  --c-accent-text: color-mix(in srgb, var(--c-accent) 85%, black);

  /* Sémantiques */
  --c-success: #15803D;
  --c-success-soft: #DCFCE7;
  --c-warning: #B45309;
  --c-warning-soft: #FEF3C7;
  --c-danger: #C2262E;
  --c-danger-soft: #FEE2E2;
  --c-info: #0369A1;
  --c-info-soft: #E0F2FE;

  /* Typo */
  --f-heading: 'Lexend', system-ui, sans-serif;
  --f-body: 'Source Sans 3', system-ui, sans-serif;

  /* Rythme */
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;
  --radius-pill: 999px;
  --shadow-s: 0 1px 2px rgb(16 34 64 / .06), 0 2px 8px rgb(16 34 64 / .05);
  --shadow-m: 0 4px 12px rgb(16 34 64 / .08), 0 12px 32px rgb(16 34 64 / .07);
  --shadow-l: 0 12px 24px rgb(16 34 64 / .10), 0 32px 64px rgb(16 34 64 / .10);
  --container: 1180px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

[data-theme="dark"] {
  --c-bg: #0D1524;
  --c-surface: #16213A;
  --c-surface-2: #1D2A47;
  --c-text: #EAF0FA;
  --c-text-2: #A9B7D0;
  /* RGAA 3.2 — était #7E8CA8 (4,40:1 sur --c-surface-2). */
  --c-text-3: #8492AC;
  --c-border: #2A3A5C;
  --c-border-strong: #5572B1;   /* ≥ 3:1 sur les 3 fonds sombres */
  --c-primary-soft: color-mix(in srgb, var(--c-primary) 32%, #0D1524);
  --c-accent-soft: color-mix(in srgb, var(--c-accent) 24%, #0D1524);
  --c-success-soft: #123A24;
  --c-warning-soft: #3A2A10;
  --c-danger-soft: #3D1518;
  --c-info-soft: #0E2A3D;

  /* RGAA 3.2 — ces 6 variables n'étaient PAS surchargées en thème sombre : elles
     gardaient leur valeur « claire », pensée pour un fond blanc, sur un fond sombre.
     Contrastes mesurés avant correction : primaire 1,46:1 · info 2,50:1 ·
     succès 2,53:1 · danger 2,74:1 · alerte 2,75:1. Toutes échouaient.
     Teinte préservée, luminosité relevée. Toutes ≥ 4,5:1 sur fond ET sur -soft. */
  --c-success: #5DD48D;
  --c-warning: #F0A43A;
  --c-danger:  #F4949A;
  --c-info:    #5EC2F5;
  --c-primary-text: color-mix(in srgb, var(--c-primary) 50%, white);
  --c-accent-text:  color-mix(in srgb, var(--c-accent) 80%, white);
  --shadow-s: 0 1px 2px rgb(0 0 0 / .3);
  --shadow-m: 0 6px 16px rgb(0 0 0 / .35);
  --shadow-l: 0 16px 40px rgb(0 0 0 / .45);
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  transition: background .3s, color .3s;
}
img, svg { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: var(--f-heading); line-height: 1.15; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.22rem; }
p { margin: 0 0 1em; }
a { color: var(--c-primary-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
[data-theme="dark"] a { color: #8FB4E8; }
button { font-family: inherit; cursor: pointer; }
/* Anneau double : le blanc ressort sur les fonds sombres (bandeaux bleus, où
   se trouvent le fil d'Ariane et le menu), le liseré sombre sur les fonds
   clairs. L'indicateur ne dépendait auparavant que de la couleur d'accent, à
   2,76:1 sur les bandeaux — invisible là où l'on navigue au clavier. */
:focus-visible {
  outline: 3px solid #FFFFFF;
  outline-offset: 0;
  box-shadow: 0 0 0 6px #17233B;
  border-radius: 4px;
}
::selection { background: var(--c-accent-soft); }

/* Les conteneurs d'injection ne doivent pas créer de boîte
   (sinon position:sticky du header reste confinée à leur hauteur) */
#chrome-header, #chrome-footer { display: contents; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--c-primary); color: #fff; padding: 10px 18px; border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }

.container { max-width: var(--container); margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); }
.section { padding-block: clamp(48px, 7vw, 88px); }
.section-head { max-width: 640px; margin-bottom: 36px; }
.section-head .kicker { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-heading); font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent-text); margin-bottom: 10px; }
.section-head .kicker::before { content: ""; width: 26px; height: 2.5px; border-radius: 2px; background: var(--c-accent); }
.section-head p { color: var(--c-text-2); font-size: 1.05rem; }
.muted { color: var(--c-text-2); }
.small { font-size: .88rem; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 24px; min-height: 46px;
  border-radius: var(--radius-pill); border: 1.5px solid transparent;
  font-family: var(--f-heading); font-weight: 600; font-size: .95rem;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .18s var(--ease-out), box-shadow .18s, background .18s, color .18s, border-color .18s;
  touch-action: manipulation;
}
.btn:active { transform: scale(.97); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary { background: var(--c-primary); color: #fff; box-shadow: var(--shadow-s); }
.btn-primary:hover { background: var(--c-primary-dark); transform: translateY(-2px); box-shadow: var(--shadow-m); }
.btn-accent { background: var(--c-accent); color: #fff; box-shadow: var(--shadow-s); }
.btn-accent:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: var(--shadow-m); }
.btn-ghost { background: transparent; color: var(--c-primary-text); border-color: color-mix(in srgb, var(--c-primary) 35%, transparent); }
.btn-ghost:hover { background: var(--c-primary-soft); border-color: var(--c-primary); }
[data-theme="dark"] .btn-ghost { color: #BCD3F2; border-color: #3A5384; }
[data-theme="dark"] .btn-ghost:hover { background: var(--c-surface-2); }
/* Fond blanc CODÉ EN DUR : garde la couleur de marque non éclaircie, y compris en
   thème sombre — sinon on obtiendrait du bleu clair sur blanc (RGAA 3.2). */
.btn-light { background: #fff; color: var(--c-primary); box-shadow: var(--shadow-s); }
.btn-light:hover { transform: translateY(-2px); box-shadow: var(--shadow-m); }
.btn-sm { padding: 8px 16px; min-height: 38px; font-size: .87rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- Header ---------- */
.liseret { height: 4px; background: linear-gradient(90deg, #000091 0 33.4%, #F5F5FE 33.4% 66.6%, #E1000F 66.6% 100%); }

.topbar {
  background: linear-gradient(90deg, var(--c-primary-dark), color-mix(in srgb, var(--c-primary-dark) 82%, var(--c-primary)));
  color: #C9D8EE; font-size: .85rem;
}
.topbar .container { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 42px; flex-wrap: wrap; }
.topbar a { color: #EAF1FB; text-decoration: none; padding: 3px 2px; border-bottom: 1px solid transparent; transition: border-color .15s, color .15s; }
.topbar a:hover { color: #fff; border-bottom-color: var(--c-accent-light); }
.topbar .tb-group { display: flex; gap: 10px; align-items: center; }
.topbar .tb-group > * { display: inline-flex; align-items: center; }
.topbar .tb-group > * + * { border-left: 1px solid rgb(255 255 255 / .18); padding-left: 14px; margin-left: 4px; }
.topbar svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 6px; opacity: .8; }

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--c-surface) 86%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--c-border);
  transition: box-shadow .25s;
}
.site-header.scrolled { box-shadow: var(--shadow-m); }
.site-header .container { display: flex; align-items: center; gap: 18px; min-height: 84px; }
.brand { display: flex; align-items: center; gap: 13px; text-decoration: none; color: var(--c-text); flex: none; }
.brand:hover .brand-blason { transform: scale(1.05) rotate(-2deg); }
.brand-blason { width: 52px; height: 52px; flex: none; filter: drop-shadow(0 3px 6px rgb(16 34 64 / .22)); transition: transform .25s var(--ease-out); }
.brand-name { font-family: var(--f-heading); font-weight: 800; font-size: 1.28rem; line-height: 1.15; letter-spacing: -.01em; }
.brand-sub { display: block; font-size: .7rem; font-weight: 600; color: var(--c-accent-text); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; margin-top: 2px; }
@media (max-width: 1240px) { .brand-sub { display: none; } }

/* Le bandeau d'en-tête respire sur toute la largeur (contenu limité à 1400px) */
.topbar .container, .site-header .container { max-width: 1400px; }
.main-nav {
  display: flex; gap: 2px; align-items: center;
  flex: 1 1 auto; min-width: 0; justify-content: center;
}
.header-actions { flex: none; }
.main-nav a {
  position: relative; padding: 10px 12px; border-radius: var(--radius-pill); white-space: nowrap;
  font-family: var(--f-heading); font-size: .9rem; font-weight: 500;
  color: var(--c-text-2); text-decoration: none;
  transition: background .18s, color .18s, transform .18s;
}
.main-nav a::after {
  content: ""; position: absolute; left: 50%; bottom: 3px; translate: -50% 0;
  width: 0; height: 2.5px; border-radius: 2px; background: var(--c-accent);
  transition: width .22s var(--ease-out);
}
.main-nav a:hover { transform: translateY(-1px); }
.main-nav a:hover::after { width: 45%; }
.main-nav a[aria-current="page"]::after { width: 55%; }
@media (max-width: 1360px) { .main-nav a { font-size: .82rem; padding: 8px 8px; } }

/* ---------- Menus déroulants (Réservation, Vie locale) ---------- */
.nav-item { position: relative; display: inline-flex; }
.nav-item > a { display: inline-flex; align-items: center; gap: 4px; }
.nav-item .chevron { width: 13px; height: 13px; opacity: .65; transition: transform .2s var(--ease-out); }
.nav-item:hover .chevron, .nav-item:focus-within .chevron { transform: rotate(180deg); }
.sub-menu {
  position: absolute; top: calc(100% + 6px); left: 50%; translate: -50% 0;
  display: flex; flex-direction: column; gap: 2px; min-width: 230px; padding: 8px;
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-m);
  box-shadow: 0 14px 38px rgba(10, 25, 47, .16);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s var(--ease-out), transform .18s var(--ease-out), visibility .18s;
  z-index: 60;
}
/* Pont invisible entre l'entrée et son menu : pas de fermeture au survol */
.sub-menu::before { content: ""; position: absolute; top: -8px; left: 0; right: 0; height: 8px; }
.nav-item:hover .sub-menu, .nav-item:focus-within .sub-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.main-nav .sub-menu a { display: block; padding: 10px 14px; border-radius: 10px; white-space: nowrap; }
.main-nav .sub-menu a::after { display: none; }
.main-nav .sub-menu a:hover { transform: none; }
.nav-item.is-active > a { color: var(--c-primary-text); font-weight: 600; }

/* ---------- Marchés publics ---------- */
.marche-card .crit-bar { display: flex; height: 9px; border-radius: var(--radius-pill); overflow: hidden; margin-top: 8px; }
.marche-card .crit-bar span { height: 100%; }
.deadline-chip { font-variant-numeric: tabular-nums; }
.pli-rank { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--f-heading); font-weight: 800; font-size: .85rem; background: var(--c-surface-2); color: var(--c-text-2); }
.pli-rank.or { background: #FEF3C7; color: #92400E; }
.seal-note { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--c-info); font-weight: 600; }
.seal-note svg { width: 14px; height: 14px; }
.main-nav a:hover { background: var(--c-surface-2); color: var(--c-text); }
.main-nav a[aria-current="page"] { background: var(--c-primary-soft); color: var(--c-primary-text); font-weight: 600; }
[data-theme="dark"] .main-nav a[aria-current="page"] { color: #BCD3F2; }
.header-actions { display: flex; gap: 10px; align-items: center; }

.header-actions .btn-primary { background: linear-gradient(135deg, var(--c-primary), var(--c-primary-dark)); }
.icon-btn {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid transparent;
  background: var(--c-surface-2); color: var(--c-text-2);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, transform .15s;
}
.icon-btn:hover { background: var(--c-surface-2); transform: translateY(-1px); }
.icon-btn svg { width: 19px; height: 19px; }

.burger { display: none; }
.mobile-nav { display: none; }

@media (max-width: 1140px) {
  .main-nav { display: none; }
  .burger { display: inline-flex; }
  /* Le bouton Connexion vit dans le menu burger sur petit écran */
  .header-actions > .btn { display: none; }
}
@media (max-width: 640px) {
  .topbar .tb-group:last-child { display: none; }
  .site-header .container { gap: 10px; min-height: 72px; }
  .brand-blason { width: 44px; height: 44px; }
  .brand-name { font-size: 1.12rem; }
  .icon-btn { width: 38px; height: 38px; }
}
@media (max-width: 1140px) {
  .mobile-nav.open {
    display: flex; flex-direction: column; gap: 4px;
    position: fixed; inset: 0; top: 0; z-index: 200;
    background: var(--c-surface); padding: 24px; overflow: auto;
  }
  .mobile-nav a { padding: 14px 18px; border-radius: var(--radius-m); font-family: var(--f-heading); font-weight: 600; font-size: 1.1rem; color: var(--c-text); text-decoration: none; }
  .mobile-nav a[aria-current="page"] { background: var(--c-primary-soft); color: var(--c-primary-text); }
  .mobile-nav .close-row { display: flex; justify-content: flex-end; margin-bottom: 12px; }
  /* Groupes du menu mobile (Réservation, Vie locale) : intitulé + entrées indentées */
  .mobile-nav .mnav-group {
    margin: 14px 18px 2px; font-size: .78rem; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--c-text-2); font-family: var(--f-heading);
  }
  .mobile-nav .mnav-sub { display: flex; flex-direction: column; gap: 4px; margin-left: 10px; }
  .mobile-nav .mnav-sub a { font-size: 1.02rem; }
}

/* ---------- Bandeau d'alerte ---------- */
.alert-banner {
  /* Le dégradé finissait sur #E05252, à 3,82:1 avec le blanc : la moitié
     droite du bandeau de CRISE était illisible pour une partie des lecteurs —
     l'endroit du site où c'est le moins acceptable. */
  background: linear-gradient(90deg, var(--c-danger), #A81E25);
  color: #fff; font-size: .92rem;
}
.alert-banner .container { display: flex; align-items: center; gap: 12px; min-height: 44px; padding-block: 6px; }
.alert-banner svg { width: 18px; height: 18px; flex: none; animation: pulse 2s infinite; }
.alert-banner strong { font-family: var(--f-heading); }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(175deg, var(--c-primary-dark) 0%, var(--c-primary) 55%, color-mix(in srgb, var(--c-primary) 72%, #4A7BC0) 100%);
  color: #fff;
}
.hero .container { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; padding-block: clamp(56px, 8vw, 110px); }
.hero h1 { color: #fff; margin-bottom: 18px; }
.hero h1 .accent { color: var(--c-accent-light); }
.hero p.lead { font-size: 1.16rem; color: #D7E3F4; max-width: 34em; }
.hero-badges { display: flex; gap: 10px; flex-wrap: wrap; margin: 22px 0 30px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgb(255 255 255 / .12); border: 1px solid rgb(255 255 255 / .22);
  backdrop-filter: blur(6px);
  padding: 7px 14px; border-radius: var(--radius-pill); font-size: .84rem; font-weight: 500;
}
.hero-badge svg { width: 15px; height: 15px; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-art { position: relative; }
.hero-art svg { width: 100%; height: auto; }
.hero-wave { display: block; margin-top: -2px; }
.hero-wave svg { width: 100%; height: 60px; display: block; }

@media (max-width: 900px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero-art { max-width: 480px; margin-inline: auto; }
}

/* Animations de la scène village */
.cloud { animation: drift 38s linear infinite; }
.cloud.c2 { animation-duration: 55s; animation-delay: -18s; }
.cloud.c3 { animation-duration: 70s; animation-delay: -40s; }
@keyframes drift { from { transform: translateX(-140px); } to { transform: translateX(760px); } }
.flag-anim { transform-origin: left center; animation: flag 4s ease-in-out infinite; }
@keyframes flag { 0%,100% { transform: skewY(0deg) scaleX(1); } 50% { transform: skewY(-3.5deg) scaleX(.97); } }
.sun-glow { animation: sunpulse 6s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes sunpulse { 0%,100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.12); opacity: 1; } }
.bird { animation: fly 16s linear infinite; }
.bird.b2 { animation-delay: -7s; }
@keyframes fly { from { transform: translate(-60px, 12px); } to { transform: translate(720px, -34px); } }
.window-light { animation: twinkle 5s ease-in-out infinite; }
@keyframes twinkle { 0%,100% { opacity: .35; } 50% { opacity: .95; } }

/* ---------- Cartes & grilles ---------- */
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius-l); padding: 26px;
  box-shadow: var(--shadow-s);
  transition: transform .22s var(--ease-out), box-shadow .22s, border-color .22s;
}
a.card { text-decoration: none; color: inherit; display: block; }
.card.hoverable:hover, a.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-m); border-color: color-mix(in srgb, var(--c-primary) 30%, var(--c-border)); }
.card h3 { margin-top: 14px; }
.card h3 svg, .panel h2 svg { width: 20px; height: 20px; vertical-align: -3px; margin-right: 6px; display: inline-block; }
.card .icon-tile {
  width: 52px; height: 52px; border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-primary-soft); color: var(--c-primary-text);
}
[data-theme="dark"] .card .icon-tile { color: #A9C6EE; }
.card .icon-tile svg { width: 26px; height: 26px; }
.card .icon-tile.accent { background: var(--c-accent-soft); color: var(--c-accent-text); }
.card-link { font-family: var(--f-heading); font-weight: 600; font-size: .9rem; color: var(--c-accent-text); display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; }
.card-link svg { width: 15px; height: 15px; transition: transform .2s; }
a.card:hover .card-link svg, .card:hover .card-link svg { transform: translateX(4px); }

/* ---------- Badges & statuts ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: var(--radius-pill);
  font-family: var(--f-heading); font-size: .76rem; font-weight: 600; letter-spacing: .02em;
}
.badge svg { width: 12px; height: 12px; }
.badge-info { background: var(--c-info-soft); color: var(--c-info); }
.badge-success { background: var(--c-success-soft); color: var(--c-success); }
.badge-warning { background: var(--c-warning-soft); color: var(--c-warning); }
.badge-danger { background: var(--c-danger-soft); color: var(--c-danger); }
.badge-neutral { background: var(--c-surface-2); color: var(--c-text-2); }
.badge-accent { background: var(--c-accent-soft); color: var(--c-accent-text); }
[data-theme="dark"] .badge-info { color: #7DC4EF; }
[data-theme="dark"] .badge-success { color: #6EE7A0; }
[data-theme="dark"] .badge-warning { color: #F0B75B; }
[data-theme="dark"] .badge-danger { color: #F08A8A; }
[data-theme="dark"] .badge-accent { color: #EFA76A; }

.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot.live { background: var(--c-danger); animation: pulse 1.6s infinite; }

/* ---------- Actualités ---------- */
.news-card { overflow: hidden; padding: 0; display: flex; flex-direction: column; }
.news-cover { height: 168px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.news-cover .cover-icon { position: relative; z-index: 2; color: rgb(255 255 255 / .85); }
.news-cover .cover-icon svg { width: 64px; height: 64px; }
.news-cover::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, rgb(255 255 255 / .25), transparent 55%); }
.news-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.news-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: .82rem; color: var(--c-text-3); }
.news-body h3 { margin: 0; font-size: 1.12rem; }
.news-body p { color: var(--c-text-2); font-size: .95rem; margin: 0; flex: 1; }
.fb-flag { display: inline-flex; align-items: center; gap: 5px; font-size: .76rem; color: var(--c-info); font-weight: 600; }
.fb-flag svg { width: 13px; height: 13px; }

/* ---------- Signalements ---------- */
.signal-item {
  display: grid; grid-template-columns: 46px 1fr auto; gap: 16px; align-items: start;
  padding: 18px 20px; border-radius: var(--radius-m);
  background: var(--c-surface); border: 1px solid var(--c-border);
  transition: transform .18s var(--ease-out), box-shadow .18s;
}
.signal-item:hover { transform: translateX(4px); box-shadow: var(--shadow-s); }
.signal-ico { width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; }
.signal-ico svg { width: 22px; height: 22px; }
.signal-item h4 { margin: 0 0 3px; font-size: 1rem; }
.signal-item .where { font-size: .84rem; color: var(--c-text-3); display: flex; align-items: center; gap: 5px; }
.signal-item .where svg { width: 13px; height: 13px; }
.signal-list { display: flex; flex-direction: column; gap: 12px; }

.steps { counter-reset: step; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 800px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding: 26px 24px 24px; }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: -18px; left: 22px;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--c-accent); color: #fff;
  font-family: var(--f-heading); font-weight: 700; font-size: 1.05rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-s);
}

/* ---------- Formulaires ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-family: var(--f-heading); font-weight: 600; font-size: .88rem; }
.field label .req { color: var(--c-danger); }
.field .hint { font-size: .8rem; color: var(--c-text-3); }
.field input, .field select, .field textarea {
  font-family: var(--f-body); font-size: 1rem; color: var(--c-text);
  /* RGAA 3.2 — la bordure d'un champ délimite le composant : c'est elle qui dit
     « ici on saisit ». Elle était à --c-border (1,26:1), invisible en basse vision.
     --c-border-strong garantit ≥ 3:1. */
  background: var(--c-surface); border: 1.5px solid var(--c-border-strong);
  border-radius: var(--radius-s); padding: 12px 14px; min-height: 46px;
  transition: border-color .15s, box-shadow .15s;
}
/* RGAA 11.10 — un champ désactivé reste lisible (pas d'information par la seule
   opacité) : on baisse le contraste du cadre, jamais celui du texte sous 4,5:1. */
.field input:disabled, .field select:disabled, .field textarea:disabled {
  background: var(--c-surface-2); color: var(--c-text-2);
  border-color: var(--c-border); cursor: not-allowed;
}
.field textarea { min-height: 110px; resize: vertical; }
/* RGAA 10.7 — le `outline: none` supprimait le seul indicateur de focus fiable ;
   il ne restait qu'un halo à 18 % d'opacité, très en dessous de 3:1.
   On conserve le halo comme décor et on laisse l'outline global s'afficher. */
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--c-primary) 18%, transparent);
}
.field .error-msg { display: none; font-size: .82rem; color: var(--c-danger); }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--c-danger); }
.field.invalid .error-msg { display: block; }

.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.choice {
  position: relative; border: 1.5px solid var(--c-border-strong); border-radius: var(--radius-m);
  padding: 16px 12px; text-align: center; cursor: pointer; background: var(--c-surface);
  transition: border-color .15s, background .15s, transform .15s;
  font-size: .88rem; font-weight: 600; font-family: var(--f-heading);
  display: flex; flex-direction: column; align-items: center; gap: 9px; color: var(--c-text-2);
}
.choice svg { width: 26px; height: 26px; }
.choice:hover { transform: translateY(-2px); border-color: var(--c-primary); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice:has(input:checked) { border-color: var(--c-accent); background: var(--c-accent-soft); color: var(--c-accent-text); }
.choice:has(input:focus-visible) { outline: 3px solid var(--c-accent); outline-offset: 2px; }

/* ---------- Stats / compteurs ---------- */
.stats-band { background: var(--c-primary); color: #fff; border-radius: var(--radius-l); padding: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; box-shadow: var(--shadow-m); position: relative; overflow: hidden; }
.stats-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px circle at 85% 10%, rgb(255 255 255 / .12), transparent 45%); }
@media (max-width: 800px) { .stats-band { grid-template-columns: repeat(2, 1fr); } }
.stat { position: relative; }
.stat .num { font-family: var(--f-heading); font-weight: 800; font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1; }
.stat .num .unit { font-size: .55em; font-weight: 600; color: var(--c-accent-light); }
.stat .lbl { color: #C9D8EE; font-size: .9rem; margin-top: 6px; }

/* ---------- Agenda ---------- */
.event-row { display: flex; gap: 18px; align-items: center; padding: 16px 18px; }
.event-date {
  flex: none; width: 62px; height: 66px; border-radius: var(--radius-m);
  background: var(--c-primary-soft); color: var(--c-primary-text);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--f-heading);
}
[data-theme="dark"] .event-date { color: #A9C6EE; }
.event-date .d { font-size: 1.45rem; font-weight: 800; line-height: 1; }
.event-date .m { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.event-row h4 { margin: 0 0 2px; font-size: 1.02rem; }
.event-row .ev-meta { font-size: .84rem; color: var(--c-text-3); }

/* ---------- Footer ---------- */
.site-footer { background: var(--c-primary-dark); color: #B9C9E2; margin-top: 40px; }
.site-footer a { color: #DCE7F6; }
.footer-main { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 36px; padding-block: 56px 40px; }
@media (max-width: 900px) { .footer-main { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-main { grid-template-columns: 1fr; } }
.site-footer h4 { color: #fff; font-size: .95rem; margin-bottom: 16px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; font-size: .92rem; }
.footer-bottom { border-top: 1px solid rgb(255 255 255 / .12); padding-block: 18px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: .82rem; color: #8FA3C4; }
.footer-brand { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.footer-brand .brand-name { color: #fff; }

/* ---------- Connexion ---------- */
.auth-wrap { min-height: calc(100dvh - 120px); display: grid; place-items: center; padding: 48px 16px; }
.auth-card { width: 100%; max-width: 440px; padding: 36px; }
.demo-accounts { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.demo-account {
  display: flex; align-items: center; gap: 14px; padding: 13px 16px;
  border: 1.5px solid var(--c-border); border-radius: var(--radius-m);
  background: var(--c-surface); cursor: pointer; text-align: left; width: 100%;
  transition: border-color .15s, transform .15s, background .15s;
  font-family: var(--f-body); font-size: .95rem; color: var(--c-text);
}
.demo-account:hover { border-color: var(--c-primary); transform: translateY(-1px); background: var(--c-primary-soft); }
.demo-account .avatar { flex: none; }
.avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-heading); font-weight: 700; font-size: .9rem; color: #fff;
}

/* ---------- Espace élus ---------- */
.elus-layout { display: grid; grid-template-columns: 264px 1fr; min-height: calc(100dvh - 74px); }
@media (max-width: 960px) { .elus-layout { grid-template-columns: 1fr; } }
.elus-sidebar {
  background: var(--c-surface); border-right: 1px solid var(--c-border);
  padding: 22px 14px; display: flex; flex-direction: column; gap: 4px;
  position: sticky; top: 74px; height: calc(100dvh - 74px); overflow: auto;
}
@media (max-width: 960px) {
  .elus-sidebar { position: static; height: auto; flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--c-border); }
}
.side-link {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  border-radius: var(--radius-m); border: 0; background: transparent; width: 100%;
  font-family: var(--f-heading); font-size: .92rem; font-weight: 500; color: var(--c-text-2);
  transition: background .15s, color .15s; text-align: left; white-space: nowrap;
}
.side-link svg { width: 19px; height: 19px; flex: none; }
.side-link:hover { background: var(--c-surface-2); color: var(--c-text); }
.side-link.active { background: var(--c-primary); color: #fff; box-shadow: var(--shadow-s); }
.side-link .count { margin-left: auto; background: var(--c-accent); color: #fff; font-size: .7rem; font-weight: 700; border-radius: var(--radius-pill); padding: 2px 8px; }
.side-sep { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-text-3); padding: 16px 14px 6px; }
@media (max-width: 960px) { .side-sep { display: none; } }

.elus-main { padding: clamp(20px, 3.4vw, 40px); min-width: 0; }
.panel { display: none; animation: panelIn .34s var(--ease-out); }
.panel.active { display: block; }
@keyframes panelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.panel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.panel-head h2 { margin: 0; }
.panel-head .sub { color: var(--c-text-2); margin: 4px 0 0; }

.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 26px; }
@media (max-width: 1100px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
.kpi { padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; }
.kpi .kpi-top { display: flex; justify-content: space-between; align-items: center; }
.kpi .kpi-top svg { width: 20px; height: 20px; color: var(--c-text-3); }
.kpi .kpi-num { font-family: var(--f-heading); font-weight: 800; font-size: 1.9rem; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi .kpi-lbl { font-size: .84rem; color: var(--c-text-2); }
.kpi .trend { font-size: .78rem; font-weight: 600; }
.trend.up { color: var(--c-success); }
.trend.down { color: var(--c-danger); }

.table-wrap { overflow-x: auto; border: 1px solid var(--c-border); border-radius: var(--radius-m); background: var(--c-surface); }
table.data { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 640px; }
table.data th {
  text-align: left; font-family: var(--f-heading); font-size: .78rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-3);
  padding: 13px 18px; border-bottom: 1px solid var(--c-border); background: var(--c-surface-2);
}
table.data td { padding: 13px 18px; border-bottom: 1px solid var(--c-border); vertical-align: middle; }
table.data tr:last-child td { border-bottom: 0; }
table.data tbody tr { transition: background .12s; }
table.data tbody tr:hover { background: var(--c-primary-soft); }
td .doc-name { display: flex; align-items: center; gap: 10px; font-weight: 600; }
table.data .small svg, table.data .lock-note svg { width: 14px; height: 14px; vertical-align: -2px; }
td .doc-name svg { width: 18px; height: 18px; color: var(--c-text-3); flex: none; }

.searchbar { position: relative; flex: 1; max-width: 420px; }
.searchbar input {
  width: 100%; min-height: 46px; padding: 12px 14px 12px 44px;
  border: 1.5px solid var(--c-border-strong); border-radius: var(--radius-pill);
  background: var(--c-surface); font-size: .95rem; color: var(--c-text);
}
.searchbar input:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--c-primary) 18%, transparent); }
.searchbar svg { position: absolute; left: 15px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--c-text-3); pointer-events: none; }

.filter-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  padding: 8px 16px; border-radius: var(--radius-pill); border: 1.5px solid var(--c-border);
  background: var(--c-surface); font-family: var(--f-heading); font-size: .85rem; font-weight: 500;
  color: var(--c-text-2); transition: all .15s;
}
.chip:hover { border-color: var(--c-primary); color: var(--c-primary-text); }
.chip.active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }

/* Budget */
.chart-card { padding: 26px; }
.chart-card h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; font-size: .84rem; color: var(--c-text-2); }
.legend .li { display: inline-flex; align-items: center; gap: 7px; }
.legend .sw { width: 12px; height: 12px; border-radius: 4px; }
.bar-anim { transform: scaleY(0); transform-origin: bottom; transition: transform .9s var(--ease-out); }
.in-view .bar-anim { transform: scaleY(1); }
.donut-seg { transition: stroke-dashoffset 1.1s var(--ease-out); }

/* Messagerie */
.chat-layout { display: grid; grid-template-columns: 300px 1fr; gap: 0; border: 1px solid var(--c-border); border-radius: var(--radius-l); overflow: hidden; background: var(--c-surface); min-height: 540px; }
@media (max-width: 900px) { .chat-layout { grid-template-columns: 1fr; } .chat-list { display: none; } }
.chat-list { border-right: 1px solid var(--c-border); overflow: auto; }
.chat-list-item { display: flex; gap: 12px; padding: 14px 16px; cursor: pointer; border-bottom: 1px solid var(--c-border); transition: background .12s; align-items: center; border-left: 3px solid transparent; }
.chat-list-item:hover { background: var(--c-surface-2); }
.chat-list-item.active { background: var(--c-primary-soft); border-left-color: var(--c-primary); }
.chat-list-item .cli-body { min-width: 0; flex: 1; }
.chat-list-item .cli-name { font-weight: 700; font-size: .92rem; display: flex; justify-content: space-between; gap: 8px; }
.chat-list-item .cli-name time { font-weight: 400; font-size: .74rem; color: var(--c-text-3); }
.chat-list-item .cli-prev { font-size: .84rem; color: var(--c-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-main { display: flex; flex-direction: column; min-width: 0; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--c-border); }
.chat-head .wa-link { margin-left: auto; }
.chat-msgs { flex: 1; overflow: auto; padding: 22px; display: flex; flex-direction: column; gap: 12px; background: var(--c-bg); }
.msg { max-width: 72%; padding: 10px 15px; border-radius: 16px; font-size: .95rem; box-shadow: var(--shadow-s); animation: msgIn .3s var(--ease-out); }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
.msg .who { font-size: .74rem; font-weight: 700; color: var(--c-accent-text); margin-bottom: 2px; font-family: var(--f-heading); }
.msg time { display: block; font-size: .7rem; color: var(--c-text-3); margin-top: 4px; text-align: right; }
.msg.in { background: var(--c-surface); border-bottom-left-radius: 4px; align-self: flex-start; }
.msg.out { background: var(--c-primary); color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
.msg.out time { color: #B9C9E2; }
.msg.wa { border: 1.5px solid #25D366; }
.msg .via-wa { display: inline-flex; align-items: center; gap: 4px; font-size: .68rem; color: #128C4B; font-weight: 700; }
[data-theme="dark"] .msg .via-wa { color: #4AE083; }
.msg .via-wa svg { width: 11px; height: 11px; }
.chat-input { display: flex; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--c-border); }
.chat-input input { flex: 1; min-height: 46px; border: 1.5px solid var(--c-border-strong); border-radius: var(--radius-pill); padding: 10px 18px; font-size: .95rem; background: var(--c-bg); color: var(--c-text); }
.chat-input input:focus { border-color: var(--c-primary); }   /* RGAA 10.7 : outline global conservé */

/* Sondages */
.poll-option { margin-bottom: 12px; }
.poll-option .po-head { display: flex; justify-content: space-between; font-size: .92rem; margin-bottom: 6px; font-weight: 600; }
.poll-bar { height: 12px; border-radius: var(--radius-pill); background: var(--c-surface-2); overflow: hidden; }
.poll-bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--c-primary), color-mix(in srgb, var(--c-primary) 55%, var(--c-accent))); width: 0; transition: width 1s var(--ease-out); }

/* Ordre du jour */
.odj-item { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px dashed var(--c-border); }
.odj-item svg { width: 18px; height: 18px; flex: none; }
.odj-item:last-child { border-bottom: 0; }
.odj-num { flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--c-primary-soft); color: var(--c-primary-text); font-family: var(--f-heading); font-weight: 700; font-size: .9rem; display: flex; align-items: center; justify-content: center; }
[data-theme="dark"] .odj-num { color: #A9C6EE; }

/* Documents commission — droits */
.lock-note { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--c-text-3); }
.lock-note svg { width: 13px; height: 13px; }

/* ---------- Toast ---------- */
.toast-zone { position: fixed; bottom: 22px; right: 22px; z-index: 400; display: flex; flex-direction: column; gap: 10px; }
.toast {
  background: var(--c-text); color: var(--c-bg); padding: 14px 20px; border-radius: var(--radius-m);
  box-shadow: var(--shadow-l); font-size: .93rem; display: flex; align-items: center; gap: 10px;
  animation: toastIn .35s var(--ease-out); max-width: 360px;
}
[data-theme="dark"] .toast { background: #EAF0FA; color: #17233B; }
.toast svg { width: 18px; height: 18px; color: var(--c-success); flex: none; }
@keyframes toastIn { from { opacity: 0; transform: translateY(16px) scale(.95); } to { opacity: 1; transform: none; } }
.toast.hide { opacity: 0; transform: translateY(10px); transition: all .3s; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.visible { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .08s; } .reveal-d2 { transition-delay: .16s; } .reveal-d3 { transition-delay: .24s; } .reveal-d4 { transition-delay: .32s; }

/* ---------- Page hero (pages internes) ---------- */
.page-hero { background: linear-gradient(160deg, var(--c-primary-dark), var(--c-primary)); color: #fff; padding-block: clamp(40px, 6vw, 70px); position: relative; overflow: hidden; }
.page-hero::after { content: ""; position: absolute; right: -80px; top: -80px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, rgb(255 255 255 / .1), transparent 65%); }
.page-hero h1 { color: #fff; margin-bottom: 8px; font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
.page-hero p { color: #CBDAF0; max-width: 620px; margin: 0; }
.breadcrumb { font-size: .82rem; color: #9FB4D4; margin-bottom: 14px; display: flex; gap: 8px; align-items: center; }
.breadcrumb a { color: #C9D8EE; }

/* ---------- Divers ---------- */
.pill-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.empty-state { text-align: center; padding: 48px 24px; color: var(--c-text-3); }
.empty-state svg { width: 48px; height: 48px; margin: 0 auto 14px; opacity: .5; }
hr.sep { border: 0; border-top: 1px solid var(--c-border); margin: 28px 0; }
.tag-annonce { position: absolute; top: 18px; right: 18px; }
.annonce-card { position: relative; }
.annonce-prix { font-family: var(--f-heading); font-weight: 800; font-size: 1.35rem; color: var(--c-accent-text); margin: -6px 0 8px; }
.annonce-prix .small { font-weight: 500; }
.annonce-prix.gratuit { font-size: .92rem; font-weight: 600; color: var(--c-success); }
.annonce-card .who-row { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--c-border); font-size: .86rem; color: var(--c-text-2); }

.install-hint { position: fixed; bottom: 20px; left: 20px; z-index: 300; }

/* ---------- Bannière « voir en tant que » ---------- */
.impersonation-banner { background: linear-gradient(90deg, #5B21B6, #7C3AED); color: #fff; font-size: .92rem; }
.impersonation-banner .container { display: flex; align-items: center; gap: 12px; min-height: 48px; padding-block: 6px; flex-wrap: wrap; }
.impersonation-banner svg { width: 18px; height: 18px; flex: none; }
.impersonation-banner .btn { margin-left: auto; }

/* ---------- Salle des fêtes : calendrier ---------- */
.cal-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .cal-row { grid-template-columns: 1fr; } }
.cal { padding: 20px 22px; }
.cal h4 { text-align: center; margin-bottom: 12px; text-transform: capitalize; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; font-size: .82rem; text-align: center; }
.cal-grid .dow { font-family: var(--f-heading); font-weight: 600; color: var(--c-text-3); font-size: .68rem; text-transform: uppercase; padding-bottom: 4px; }
.cal-grid .day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 8px; color: var(--c-text-2); font-variant-numeric: tabular-nums; }
.cal-grid .day.libre { background: var(--c-surface-2); }
.cal-grid .day.reserve { background: var(--c-danger-soft); color: var(--c-danger); font-weight: 700; }
.cal-grid .day.demande { background: var(--c-warning-soft); color: var(--c-warning); font-weight: 700; }
[data-theme="dark"] .cal-grid .day.reserve { color: #F08A8A; }
[data-theme="dark"] .cal-grid .day.demande { color: #F0B75B; }

/* ---------- Salle des fêtes : estimateur ---------- */
.estimation-total { display: flex; align-items: baseline; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 2px dashed var(--c-border); }
.estimation-total .somme { font-family: var(--f-heading); font-weight: 800; font-size: 2.2rem; color: var(--c-accent-text); font-variant-numeric: tabular-nums; }
.opt-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--c-border); font-size: .95rem; }
.opt-row:last-child { border-bottom: 0; }
.opt-row input[type="checkbox"] { width: 19px; height: 19px; accent-color: var(--c-accent); cursor: pointer; }
.opt-row input[type="number"] { width: 76px; min-height: 36px; padding: 6px 10px; border: 1.5px solid var(--c-border-strong); border-radius: var(--radius-s); background: var(--c-surface); color: var(--c-text); font-size: .92rem; }
.opt-row .prix { margin-left: auto; font-weight: 600; white-space: nowrap; }

/* ---------- État des lieux ---------- */
.edl-table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.edl-table th { text-align: left; font-family: var(--f-heading); font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-3); padding: 10px 12px; border-bottom: 1px solid var(--c-border); }
.edl-table td { padding: 10px 12px; border-bottom: 1px dashed var(--c-border); vertical-align: middle; }
.edl-table tr:last-child td { border-bottom: 0; }
.edl-table input[type="checkbox"] { width: 19px; height: 19px; accent-color: var(--c-success); cursor: pointer; }
.edl-table input[type="checkbox"]:disabled { accent-color: var(--c-text-3); cursor: not-allowed; }
.edl-table .remarque { font-size: .84rem; color: var(--c-warning); }

/* ---------- Interrupteurs (modules) ---------- */
.switch-row { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px dashed var(--c-border); }
.switch-row:last-child { border-bottom: 0; }
.switch-row .sw-txt { flex: 1; }
.switch-row .sw-txt strong { font-family: var(--f-heading); font-size: .95rem; }
.switch-row .sw-txt .small { display: block; color: var(--c-text-3); }
.switch { position: relative; width: 46px; height: 26px; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 2; }
.switch .track { position: absolute; inset: 0; border-radius: var(--radius-pill); background: var(--c-border); transition: background .2s; }
.switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-s); transition: transform .2s var(--ease-out); }
.switch input:checked + .track { background: var(--c-success); }
.switch input:checked + .track::after { transform: translateX(20px); }
.switch input:focus-visible + .track { outline: 3px solid var(--c-accent); outline-offset: 2px; }

/* ---------- Page admin & console ---------- */
.admin-step { max-width: 520px; margin-inline: auto; }
.mail-preview { border: 1.5px dashed var(--c-info); border-radius: var(--radius-m); background: var(--c-info-soft); padding: 18px 20px; margin-block: 16px; }
.mail-preview .mp-head { font-size: .8rem; color: var(--c-text-2); border-bottom: 1px solid color-mix(in srgb, var(--c-info) 25%, transparent); padding-bottom: 8px; margin-bottom: 10px; }
.mail-preview .code { font-family: var(--f-heading); font-weight: 800; font-size: 2rem; letter-spacing: .35em; color: var(--c-info); text-align: center; }
.otp-input { font-family: var(--f-heading); font-size: 1.6rem; letter-spacing: .4em; text-align: center; font-weight: 700; }

.tenant-row { display: grid; grid-template-columns: 42px 1.3fr 1fr .8fr auto; gap: 14px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--c-border); }
.tenant-row:last-child { border-bottom: 0; }
@media (max-width: 800px) { .tenant-row { grid-template-columns: 42px 1fr auto; } .tenant-row .tr-hide { display: none; } }
.tenant-dot { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-family: var(--f-heading); font-weight: 700; color: #fff; }
.version-chip { font-variant-numeric: tabular-nums; }
.maj-anim { animation: majPulse 1s ease; }
@keyframes majPulse { 0% { background: var(--c-warning-soft); } 100% { background: transparent; } }

.impersonation-banner.support { background: linear-gradient(90deg, #92400E, #B45309); }

/* ---------- Organigramme des commissions ---------- */
.org { display: flex; flex-direction: column; align-items: center; }
.org-maire {
  display: flex; align-items: center; gap: 14px;
  border: 2px solid var(--c-accent); border-radius: var(--radius-m);
  padding: 12px 22px; background: var(--c-accent-soft);
}
.org-trunk { width: 2.5px; height: 26px; background: var(--c-border); }
.org-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; width: 100%; }
@media (max-width: 900px) { .org-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .org-grid { grid-template-columns: 1fr; } }
.org-com {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px;
  border: 1.5px solid var(--c-border); border-radius: var(--radius-m);
  background: var(--c-surface); padding: 18px 14px 14px; cursor: pointer;
  font-family: var(--f-body); color: var(--c-text); text-align: center;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.org-com:hover { transform: translateY(-2px); border-color: var(--c-primary); box-shadow: var(--shadow-s); }
.org-com.active { border-color: var(--c-accent); background: var(--c-accent-soft); }
.org-connector { position: absolute; top: -15px; left: 50%; width: 2px; height: 15px; background: var(--c-border); }
@media (max-width: 900px) { .org-connector { display: none; } .org-trunk { display: none; } }

/* ---------- Plan des équipements ---------- */
.panel p > svg, .panel strong > svg, .panel .small > svg { width: 15px; height: 15px; vertical-align: -2px; margin-right: 4px; }
.eq-marker { cursor: pointer; transition: transform .18s var(--ease-out); transform-box: fill-box; }
.eq-marker:hover circle:nth-child(2) { stroke-width: 3.5; }
.eq-marker.selected circle:first-child { opacity: .4; animation: eqPulse 1.8s ease-in-out infinite; }
.eq-marker:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; border-radius: 50%; }
@keyframes eqPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
tr.eq-row-sel { background: var(--c-primary-soft) !important; }

/* ---------- Photos & diaporamas ---------- */
.annonce-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 4px 0 12px; }
.annonce-photos img { width: 100%; height: 78px; object-fit: cover; border-radius: 9px; border: 1px solid var(--c-border); }
.activite-photos { display: flex; gap: 5px; margin-top: 6px; }
.activite-photos img { width: 52px; height: 40px; object-fit: cover; border-radius: 6px; border: 1px solid var(--c-border); }
.diapo { position: relative; border-radius: var(--radius-m); overflow: hidden; margin-bottom: 26px; box-shadow: var(--shadow-m); }
.diapo img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.diapo-btn {
  position: absolute; top: 50%; translate: 0 -50%;
  width: 42px; height: 42px; border-radius: 50%; border: 0;
  background: rgb(10 20 40 / .5); color: #fff; font-size: 1.5rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, transform .15s;
}
.diapo-btn:hover { background: rgb(10 20 40 / .75); transform: translateY(-50%) scale(1.06); translate: 0 0; }
.diapo-btn.prev { left: 12px; } .diapo-btn.next { right: 12px; }
.diapo-dots { position: absolute; bottom: 12px; left: 50%; translate: -50% 0; display: flex; gap: 7px; }
.diapo-dots span { width: 9px; height: 9px; border-radius: 50%; background: rgb(255 255 255 / .5); cursor: pointer; transition: background .15s, transform .15s; }
.diapo-dots span.on { background: #fff; transform: scale(1.25); }

/* ---------- Ruban de démonstration ---------- */
.demo-ribbon {
  position: fixed; top: 26px; right: -44px; z-index: 250;
  transform: rotate(45deg);
  background: linear-gradient(135deg, var(--c-accent), #A3541A);
  color: #fff; text-decoration: none;
  font-family: var(--f-heading); font-size: .72rem; font-weight: 700; letter-spacing: .14em;
  padding: 7px 52px; box-shadow: var(--shadow-m);
}
.demo-ribbon:hover { filter: brightness(1.1); }
@media (max-width: 640px) { .demo-ribbon { top: 14px; right: -52px; padding: 5px 48px; font-size: .62rem; } }
@media print { .demo-ribbon { display: none; } }

/* ---------- Impression ---------- */
@media print {
  .site-header, .site-footer, .topbar, .alert-banner, .btn, .elus-sidebar { display: none !important; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Gestion du contenu (maire) ---------- */
.gestion-grid { display: grid; grid-template-columns: 240px 1fr; gap: 22px; align-items: start; }
@media (max-width: 860px) { .gestion-grid { grid-template-columns: 1fr; } }
.gestion-nav { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 90px; }
@media (max-width: 860px) { .gestion-nav { position: static; flex-direction: row; flex-wrap: wrap; } }
.gestion-tab { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 11px 14px;
  border: 1px solid transparent; border-radius: var(--radius-m); background: transparent; color: var(--c-text-2);
  font-family: var(--f-heading); font-weight: 600; font-size: .92rem; cursor: pointer; transition: background .15s, color .15s; }
.gestion-tab:hover { background: var(--c-surface-2); color: var(--c-text); }
.gestion-tab.actif { background: var(--c-primary-soft); color: var(--c-primary-text); }
[data-theme="dark"] .gestion-tab.actif { color: #BCD3F2; }
.gestion-tab .g-ico { font-size: 1.1rem; }
.gestion-tab .g-badge { margin-left: auto; background: var(--c-surface-2); color: var(--c-text-2);
  font-size: .72rem; font-weight: 700; padding: 1px 8px; border-radius: var(--radius-pill); }
.gestion-tab.actif .g-badge { background: var(--c-primary); color: #fff; }
.gestion-panel .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 620px) { .gestion-panel .form-grid { grid-template-columns: 1fr; } }
.gestion-panel .field textarea { grid-column: 1 / -1; }

/* ---------- Barre du maire ---------- */
.maire-bar { background: linear-gradient(90deg, #7C3AED, #6D28D9); color: #fff; font-size: .9rem; }
.maire-bar .container { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; flex-wrap: wrap; padding-block: 7px; }
.maire-bar .mb-label { display: inline-flex; align-items: center; gap: 8px; }
.maire-bar .mb-label svg { width: 16px; height: 16px; }
.maire-bar .mb-on { background: rgba(255,255,255,.22); padding: 1px 9px; border-radius: 999px; font-weight: 600; }
.maire-bar .mb-off { background: rgba(0,0,0,.22); padding: 1px 9px; border-radius: 999px; font-weight: 600; }
.maire-bar .mb-actions { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.maire-bar .mb-quit { color: #EAD9FF; text-decoration: underline; font-weight: 600; padding: 6px; }
.maire-bar .mb-quit:hover { color: #fff; }

/* ---------- Éditeur d'article ---------- */
.art-cover { min-height: 160px; border: 2px dashed var(--c-border); border-radius: var(--radius-m); background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.art-cover:has([style*="background-image"]), .art-cover[style*="background-image"] { border-style: solid; min-height: 200px; }
.art-toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; border: 1px solid var(--c-border); border-bottom: none; border-radius: var(--radius-m) var(--radius-m) 0 0; background: var(--c-surface-2); }
.art-toolbar button { border: 1px solid transparent; background: transparent; border-radius: 8px; padding: 6px 11px; font-size: .9rem; color: var(--c-text); cursor: pointer; }
.art-toolbar button:hover { background: var(--c-surface); border-color: var(--c-border); }
.art-corps { min-height: 260px; padding: 16px 18px; border: 1px solid var(--c-border); border-radius: 0 0 var(--radius-m) var(--radius-m); background: var(--c-surface); line-height: 1.7; }
.art-corps:focus { border-color: var(--c-primary); }   /* RGAA 10.7 : outline global conservé */
.art-corps img { border-radius: 12px; margin: 12px 0; }
.art-corps h2, .art-corps h3 { margin: .6em 0 .3em; }

/* ---------- Constructeur de budget ---------- */
.bud-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 18px; }
@media (max-width: 720px) { .bud-grid { grid-template-columns: 1fr; } }
.bud-col h3 { font-size: 1rem; margin-bottom: 10px; }
.bud-total { color: var(--c-text-2); font-size: .9rem; }
.bud-bilan { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 20px; }
@media (max-width: 620px) { .bud-bilan { grid-template-columns: repeat(2, 1fr); } }
.bud-kpi { background: var(--c-surface-2); border-radius: var(--radius-m); padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.bud-kpi span { font-size: .78rem; color: var(--c-text-2); text-transform: uppercase; letter-spacing: .04em; }
.bud-kpi strong { font-family: var(--f-heading); font-size: 1.2rem; }

/* ---------- Mode modification (maire) ---------- */
#editModeBtn.edit-actif { background: #7C3AED; color: #fff; }
.edit-pill {
  position: absolute; top: 10px; right: 10px; z-index: 40;
  background: #7C3AED; color: #fff !important; text-decoration: none;
  font-family: var(--f-heading); font-weight: 600; font-size: .82rem;
  padding: 7px 14px; border-radius: var(--radius-pill); box-shadow: var(--shadow-m);
  transition: transform .15s, filter .15s;
}
.edit-pill:hover { transform: translateY(-2px); filter: brightness(1.1); }
.edit-cible { outline: 2px dashed #7C3AED; outline-offset: 6px; border-radius: var(--radius-m); }

/* ---------- Éditeur sur place (fenêtre opaque par-dessus la page) ---------- */
.ed-voile {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(13, 21, 36, .78);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 4vh 16px; overflow-y: auto;
}
.ed-fenetre {
  background: var(--c-surface); border-radius: var(--radius-l);
  width: 100%; max-width: 760px; box-shadow: var(--shadow-l);
  margin-bottom: 4vh;
}
.ed-corps { padding: clamp(20px, 3vw, 32px); }
.ed-tete {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 0 20px; padding-bottom: 16px; border-bottom: 1px solid var(--c-border);
}
.ed-tete h2 {
  margin: 0; font-size: 1.3rem; display: flex; align-items: center; gap: 10px; min-width: 0;
}
/* Sans cette contrainte, un pictogramme de titre s'étire à toute la largeur
   disponible et occupe la moitié de la fenêtre. */
.ed-tete h2 svg { width: 22px; height: 22px; flex: none; color: var(--c-accent); }
.ed-tete .icon-btn { flex: none; }

/* Un champ marqué « pleine largeur » traverse les deux colonnes du formulaire. */
.ed-corps .field.full { grid-column: 1 / -1; }
/* Une bascule dans un formulaire s'aligne sur la hauteur des champs voisins
   au lieu de flotter en bas de sa cellule. */
.ed-corps .form-grid .switch-row {
  align-self: stretch; align-items: center; margin: 0; padding: 12px 14px;
  border: 1px solid var(--c-border); border-radius: var(--radius-s); background: var(--c-surface-2);
}
/* Barre d'actions : séparée du formulaire, boutons à droite. */
.ed-actions {
  display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--c-border);
}
.ed-actions .ed-aide { margin: 0 auto 0 0; font-size: .85rem; color: var(--c-text-3); }
.ed-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--c-border); }
.ed-corps .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 620px) { .ed-corps .form-grid { grid-template-columns: 1fr; } }
.ed-corps .field textarea { grid-column: 1 / -1; }

.edit-mini {
  position: absolute; top: 10px; right: 10px; z-index: 30;
  width: 38px; height: 38px; border-radius: 50%; border: none;
  background: #7C3AED; color: #fff; font-size: 1rem; cursor: pointer;
  box-shadow: var(--shadow-m); transition: transform .15s;
}
.edit-mini:hover { transform: scale(1.1); }

/* ---------- Menu du compte (avatar) — remplace la barre maire ---------- */
.acc-menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 120;
  min-width: 240px; padding: 8px; border-radius: var(--radius-m);
  background: var(--c-surface); border: 1px solid var(--c-border); box-shadow: var(--shadow-l);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s var(--ease-out), transform .16s var(--ease-out), visibility .16s;
}
.acc-menu.ouvert { opacity: 1; visibility: visible; transform: translateY(0); }
.acc-menu .acc-nom { padding: 8px 12px 10px; font-family: var(--f-heading); font-weight: 700; color: var(--c-text); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.acc-menu .acc-role { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: #7C3AED; color: #fff; padding: 2px 8px; border-radius: 999px; }
.acc-menu .acc-etat { padding: 4px 12px 8px; font-size: .82rem; color: var(--c-text-2); }
.acc-menu a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--c-text); text-decoration: none; font-size: .92rem; font-weight: 500; }
.acc-menu a:hover { background: var(--c-surface-2); }
.acc-menu a svg { width: 18px; height: 18px; flex: none; opacity: .7; }
.acc-menu hr { border: none; border-top: 1px solid var(--c-border); margin: 6px 4px; }

/* ---------- Plan de la commune (équipements) ---------- */
.plan-commune {
  position: relative; width: 100%; aspect-ratio: 5 / 3;
  background-size: cover; background-position: center; border-radius: 14px;
  border: 1px solid var(--c-border); overflow: hidden;
}
.plan-commune.vide {
  display: grid; place-items: center; text-align: center;
  background: color-mix(in srgb, var(--c-primary) 5%, var(--c-surface-2));
  border-style: dashed;
}
.plan-vide-txt { color: var(--c-text-2); padding: 24px; }
.plan-vide-txt svg { width: 34px; height: 34px; opacity: .5; margin: 0 auto 6px; }
.eq-pin {
  position: absolute; transform: translate(-50%, -50%);
  width: 30px; height: 30px; border-radius: 50%; border: 2.5px solid #fff;
  color: #fff; font-family: var(--f-heading); font-weight: 800; font-size: .8rem;
  cursor: pointer; box-shadow: 0 2px 8px rgb(0 0 0 / .3); transition: transform .15s;
}
.eq-pin:hover, .eq-pin.selected { transform: translate(-50%, -50%) scale(1.25); z-index: 5; }
.eq-pin.selected { box-shadow: 0 0 0 4px rgb(255 255 255 / .6), 0 2px 10px rgb(0 0 0 / .35); }

/* Montant TTC calculé en direct dans les formulaires budgétaires */
.montant-ttc {
  display: block;
  padding: 11px 14px;
  border: 1px dashed var(--c-border);
  border-radius: 10px;
  background: var(--c-surface-2);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--c-primary);
}

/* Bandeau « lecture seule » affiché quand le module est délégué à une autre commission */
.lecture-seule {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 18px; padding: 12px 16px;
  border: 1px solid var(--c-border); border-left: 4px solid var(--c-text-3);
  border-radius: 10px; background: var(--c-surface-2);
  font-size: .92rem; color: var(--c-text-2);
}
.lecture-seule svg { flex: none; color: var(--c-text-3); }

/* Tableau d'attribution des délégations (maire) */
.deleg-table { width: 100%; border-collapse: collapse; margin-top: 14px; }
.deleg-table th, .deleg-table td { padding: 9px 10px; border-bottom: 1px solid var(--c-border); text-align: center; }
.deleg-table th:first-child, .deleg-table td:first-child { text-align: left; font-weight: 600; }
.deleg-table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--c-text-3); font-weight: 700; }
.deleg-table tbody tr:hover { background: var(--c-surface-2); }

/* Texte réservé aux lecteurs d'écran (légendes de tableaux, libellés RGAA) */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Champ de recherche posé dans un en-tête de carte */
.input-inline {
  min-width: 220px; padding: 8px 12px; font: inherit; font-size: .9rem;
  color: var(--c-text); background: var(--c-surface);
  border: 1px solid var(--c-border-strong); border-radius: 9px;
}
.input-inline:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; border-color: var(--c-accent); }

/* ---- Guide de l'élu (wiki) ---- */
.wiki-fiche { padding: 0; overflow: hidden; }
.wiki-tete {
  display: flex; align-items: flex-start; gap: 14px; width: 100%;
  padding: 18px 20px; background: none; border: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
}
.wiki-tete:hover { background: var(--c-surface-2); }
.wiki-tete:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; }
.wiki-chev { flex: none; color: var(--c-text-3); transition: transform .2s; margin-top: 22px; }
.wiki-fiche.ouverte .wiki-chev { transform: rotate(180deg); }
.wiki-corps { padding: 0 20px 20px; border-top: 1px solid var(--c-border); }
.wiki-corps p { margin: 14px 0 0; font-size: .95rem; line-height: 1.65; color: var(--c-text-2); }
.wiki-corps strong { color: var(--c-text); }
.wiki-refs {
  margin-top: 18px !important; padding: 10px 14px; border-radius: 8px;
  background: var(--c-surface-2); font-size: .86rem !important; color: var(--c-text-3) !important;
}
.wiki-refs svg { width: 15px; height: 15px; vertical-align: -3px; }

/* ---- Photo d'un équipement / d'une aire ---- */
.photo-zone {
  display: flex; align-items: center; gap: 14px; padding: 12px;
  border: 1px dashed var(--c-border-strong); border-radius: var(--radius-s);
  background: var(--c-surface-2);
}
.photo-apercu {
  width: 88px; height: 66px; flex: none; border-radius: 8px; overflow: hidden;
  background: var(--c-bg) center/cover no-repeat;
  display: flex; align-items: center; justify-content: center; color: var(--c-text-3);
  border: 1px solid var(--c-border);
}
.photo-apercu svg { width: 24px; height: 24px; }
.photo-zone .photo-actions { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

/* Vignette de photo dans les listes et fiches */
.vignette {
  width: 100%; aspect-ratio: 16/10; border-radius: 10px; overflow: hidden;
  background: var(--c-surface-2) center/cover no-repeat; margin-bottom: 12px;
  border: 1px solid var(--c-border);
}

/* ---- Sélecteur d'élus / de commissions ---- */
.select-liste { display: grid; gap: 8px; max-height: 340px; overflow-y: auto; padding-right: 4px; }
.select-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; width: 100%;
  border: 1px solid var(--c-border); border-radius: var(--radius-s);
  background: var(--c-surface); text-align: left; font: inherit; color: inherit; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.select-item:hover { border-color: var(--c-accent); background: var(--c-surface-2); }
.select-item:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; }
.select-item.choisi { border-color: var(--c-accent); background: color-mix(in srgb, var(--c-accent) 10%, var(--c-surface)); }
.select-item .si-txt { flex: 1; min-width: 0; }
.select-item .si-txt strong { display: block; font-size: .94rem; }
.select-item .si-coche { flex: none; width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--c-border-strong); display: flex; align-items: center; justify-content: center; }
.select-item.choisi .si-coche { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.select-item .si-coche svg { width: 14px; height: 14px; opacity: 0; }
.select-item.choisi .si-coche svg { opacity: 1; }

/* L'attribut `hidden` doit l'emporter sur les display des classes utilitaires :
   sans cela, un bouton `.btn` (display:inline-flex) reste visible malgré hidden. */
[hidden] { display: none !important; }

/* Tout pictogramme inséré dans une ligne de texte reste à la taille du texte.
   Sans contrainte, un SVG sans width/height s'étire à toute la place offerte. */
.ed-aide svg, .hint svg, .sw-txt svg { width: 15px; height: 15px; vertical-align: -2px; flex: none; }
.ed-aide { display: inline-flex; align-items: center; gap: 6px; }

/* Bouton d'action destructrice — utilisé par les confirmations de suppression */
.btn-danger { background: var(--c-danger); color: #fff; border-color: var(--c-danger); }
.btn-danger:hover { filter: brightness(.92); }
.btn-danger:focus-visible { outline: 2px solid var(--c-danger); outline-offset: 2px; }

/* Deux boutons d'action en tête du budget */
.budget-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.budget-actions .btn { flex: 1 1 260px; justify-content: center; min-height: 52px; font-size: 1rem; }

/* ---- Boutons du budget : vert pâle pour les entrées, rouge pâle pour les sorties ----
   Teintes douces, mais le texte reste à un contraste lisible (≥ 4,5:1) : c'est un
   bouton d'action, pas une pastille décorative. */
.btn-recette {
  background: #E8F5EC;
  border-color: #A8D5B8;
  color: #1B5E32;
}
.btn-recette:hover { background: #D8EEE0; border-color: #7FC29A; }
.btn-recette:focus-visible { outline: 2px solid #15803D; outline-offset: 2px; }

.btn-depense {
  background: #FCECEC;
  border-color: #EBB2B5;
  color: #8E1B22;
}
.btn-depense:hover { background: #F8DEDF; border-color: #DE8F94; }
.btn-depense:focus-visible { outline: 2px solid #C2262E; outline-offset: 2px; }

/* En thème sombre, une teinte pâle deviendrait un aplat éblouissant : on inverse
   le rapport — fond sombre teinté, texte clair. */
[data-theme="dark"] .btn-recette {
  background: #14301F; border-color: #2E6B45; color: #8FE0AF;
}
[data-theme="dark"] .btn-recette:hover { background: #1B3F2A; border-color: #3D8A59; }

[data-theme="dark"] .btn-depense {
  background: #341819; border-color: #7A3236; color: #F3AAAE;
}
[data-theme="dark"] .btn-depense:hover { background: #45201F; border-color: #9A4046; }

/* Historique des retraits — replié par défaut : c'est une pièce de traçabilité,
   pas une information de tous les jours. */
.hist-bloc { margin-top: 20px; border-top: 1px solid var(--c-border); padding-top: 14px; }
.hist-bloc > summary {
  cursor: pointer; font-weight: 600; font-size: .95rem; color: var(--c-text-2);
  display: flex; align-items: center; gap: 8px; list-style: none;
}
.hist-bloc > summary::-webkit-details-marker { display: none; }
.hist-bloc > summary::after { content: "▾"; margin-left: auto; color: var(--c-text-3); transition: transform .15s; }
.hist-bloc[open] > summary::after { transform: rotate(180deg); }
.hist-bloc > summary:hover { color: var(--c-text); }
.hist-bloc > summary:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; border-radius: 4px; }
.hist-bloc > summary svg { width: 17px; height: 17px; flex: none; }
.hist-compte { font-weight: 400; color: var(--c-text-3); }

/* Carte de projet d'investissement sélectionnable */
.proj-carte { transition: border-color .15s, transform .15s; }
.proj-carte:hover { border-color: var(--c-accent); transform: translateY(-1px); }
.proj-carte.actif { border-color: var(--c-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-accent) 22%, transparent); }

/* --- Choix multiple dans une modale (App.saisir, type « multi ») ------------
   Des cases à cocher présentées comme des jetons : lisibles au doigt, et on
   voit d'un coup d'œil ce qui est retenu. Un <select multiple> ne tient aucune
   de ces deux promesses sur mobile. */
.label-lite {
  display: block;
  font-family: var(--f-heading);
  font-size: .82rem;
  font-weight: 600;
  color: var(--c-text-2);
  margin-bottom: 8px;
}
.multi-choix { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-check { cursor: pointer; }
.chip-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip-check span {
  display: inline-block;
  padding: 8px 14px;
  border: 1.5px solid var(--c-border);
  border-radius: 999px;
  font-size: .88rem;
  background: var(--c-surface);
  color: var(--c-text-2);
  transition: background .15s, border-color .15s, color .15s;
}
.chip-check input:checked + span {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
  font-weight: 600;
}
.chip-check input:focus-visible + span { outline: 2px solid var(--c-accent); outline-offset: 2px; }

/* ==========================================================================
   PAGES EN BLOCS (« Notre village »)
   Un seul jeu de règles pour le rendu public ET l'aperçu de l'éditeur : ce que
   le maire voit dans l'aperçu est exactement ce que verront les habitants.
   ========================================================================== */
.bl { margin: 0 0 18px; }
.bl-titre { margin: 26px 0 10px; line-height: 1.3; }
.bl-image { margin: 18px 0; }
.bl-image img { border-radius: 12px; display: block; height: auto; }
.bl-image figcaption { font-size: .88rem; color: var(--c-text-2, #4A5872); margin-top: 6px; }
.bl-t-normale img { max-width: min(100%, 420px); }
.bl-t-large img { max-width: min(100%, 760px); }
.bl-t-pleine img { max-width: 100%; width: 100%; }
.bl-a-centre { text-align: center; } .bl-a-centre img { margin-inline: auto; }
.bl-a-droite { text-align: right; }  .bl-a-droite img { margin-left: auto; }
.bl-a-gauche { text-align: left; }
.bl-galerie { display: grid; grid-template-columns: repeat(var(--bl-cols, 3), 1fr); gap: 10px; }
.bl-galerie img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; }
.bl-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: center; }
.bl-colonnes.bl-inv .bl-col-texte { order: 2; }
.bl-colonnes img { width: 100%; border-radius: 12px; display: block; }
.bl-citation { border-left: 4px solid var(--c-accent, #C2681E); padding: 6px 0 6px 16px; margin: 20px 0; font-style: italic; }
.bl-citation cite { display: block; font-style: normal; font-size: .9rem; color: var(--c-text-2, #4A5872); margin-top: 6px; }
.bl-sep { border: 0; border-top: 1px solid var(--c-border, #d7dee9); margin: 26px 0; }
.bl-infos { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.bl-infos .bl-i { display: flex; gap: 6px; font-size: .94rem; }
.bl-infos .bl-i b { color: var(--c-text-2, #4A5872); }
@media (max-width: 680px) {
  .bl-colonnes { grid-template-columns: 1fr; }
  .bl-colonnes.bl-inv .bl-col-texte { order: 0; }
  .bl-galerie { grid-template-columns: repeat(2, 1fr); }
}

/* --- Cartes de l'éditeur par blocs (espace élus) --- */
.bl-editeur { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.bl-carte { border: 1px solid var(--c-border, #d7dee9); border-radius: 12px; overflow: hidden; background: var(--c-surface, #fff); }
.bl-carte-tete { display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 8px 12px; background: var(--c-surface-2, #f4f6fa); border-bottom: 1px solid var(--c-border, #d7dee9); }
.bl-carte-corps { padding: 12px; }
.bl-carte-corps .art-corps { min-height: 90px; }
.bl-reglage { min-width: 150px; }
.bl-vignettes { display: flex; flex-wrap: wrap; gap: 8px; }
.bl-vign { position: relative; display: inline-block; }
.bl-vign img { width: 84px; height: 64px; object-fit: cover; border-radius: 8px; display: block; }
.bl-vign-x { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%;
  border: 0; background: var(--c-danger, #C0392B); color: #fff; cursor: pointer; line-height: 1; font-size: .75rem; }