/*
  Thème "Ardoise & Ajonc" — identité par défaut de Keriou (gris ardoise des
  toits/du granit, jaune ajonc des chemins bretons). Une commune qui veut ses
  propres couleurs remplace ce bloc par un thème dédié (même mécanisme que
  THEME_CATALOG de Tournamant), sans toucher au reste de l'app.
*/
:root{
  --bg:#f2f1ec;
  --surface:#fbfaf6;
  --border:#ddd9cd;
  --ink:#2c3e46;
  --ink-soft:#556367;
  --accent:#2c3e46;
  --accent-weak:#e4e9ea;
  --warn:#a83e24;
  --warn-weak:#f7e2dc;
  --gold:#e8c34a;
  --gold-ink:#2c3e46;
  --on-accent:#fbfaf6;
  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Inter', -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#1b2528;
    --surface:#212d31;
    --border:#33434a;
    --ink:#eae7de;
    --ink-soft:#9aa8ac;
    --accent:#e8c34a;
    --accent-weak:#283539;
    --warn:#e3a08c;
    --warn-weak:#3a221c;
    --gold:#e8c34a;
    --gold-ink:#1b2528;
    --on-accent:#1b2528;
  }
}

/*
  Thème "Quistinic" — palette et blason repris tels quels du site municipal
  (quistinic.fr : carmin/vert/bleu du blason). Activé au déploiement par la
  variable d'environnement THEME (voir src/theme.js), jamais depuis l'app —
  aucun réglage, aucune route ne le lit ni ne le modifie. --warn ici est un
  bleu assombri (#00699e, pas le #0086cb exact du site) : à cette teinte
  précise le texte reste ≥4.5:1 sur --warn-weak (badges "en attente"/"fermé",
  alerte de collision d'horaires) — voir le mockup validé avec l'utilisateur
  pour le détail des contrastes.
*/
[data-theme="quistinic"]{
  --bg:#f4f5f6;
  --surface:#ffffff;
  --border:#e2e4e6;
  --ink:#33393e;
  --ink-soft:#6b7278;
  --accent:#e30044;
  --accent-weak:#fbdfe7;
  --warn:#00699e;
  --warn-weak:#dcf0f8;
  --gold:#d9e021;
  --gold-ink:#2c3338;
  --on-accent:#ffffff;
  --font-display:'Libre Franklin', Inter, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark){
  [data-theme="quistinic"]{
    --bg:#1c2023;
    --surface:#242a2e;
    --border:#343b40;
    --ink:#eceff1;
    --ink-soft:#a9b0b5;
    --accent:#ff6a90;
    --accent-weak:#3a1e26;
    --warn:#4fc3f7;
    --warn-weak:#16323d;
    --gold:#d9e021;
    --gold-ink:#1c2023;
    --on-accent:#1c2023;
  }
}
/* Blason en médaillon à la place de l'emblème générique (même gabarit
   56x56, voir .emblem) — sur fond blanc : le PNG du blason est transparent
   et illisible sur un fond sombre en mode nuit. */
[data-theme="quistinic"] header.top .emblem{display:none}
[data-theme="quistinic"] header.top::before{
  content:"";
  width:56px;height:56px;flex-shrink:0;
  background:#fff url('/img/quistinic-logo.png') center/72% no-repeat;
  border:1px solid var(--border);
  border-radius:12px;
}

/*
  Couleur par type d'événement (et par catégorie d'annonce) — commune à
  tous les thèmes : c'est une information, pas une identité visuelle. Le
  lien type → t1..t7 vit dans public/js/commun.js (COULEURS_TYPES). Chaque
  couple texte/fond garde un contraste ≥ 4.5:1, en clair comme en sombre.
*/
:root{
  --t1:#c4003a;--t1b:#fde6ed;
  --t2:#8a5a00;--t2b:#f8ecd4;
  --t3:#346e18;--t3b:#e5f1db;
  --t4:#6a3d9a;--t4b:#efe7f8;
  --t5:#a3431a;--t5b:#f9e6dd;
  --t6:#00699e;--t6b:#dcf0f8;
  --t7:#4a5863;--t7b:#e6eaed;
  --t8:#0b665f;--t8b:#d5f0ec;
}
@media (prefers-color-scheme: dark){
  :root{
    --t1:#ff8fae;--t1b:#3d1d27;
    --t2:#f0c070;--t2b:#3a2e17;
    --t3:#9fd67a;--t3b:#1f3318;
    --t4:#c7a6f0;--t4b:#2d2240;
    --t5:#f5a684;--t5b:#3b2319;
    --t6:#6fcdf5;--t6b:#16323d;
    --t7:#b8c4cc;--t7b:#2c3439;
    --t8:#5eead4;--t8b:#12302c;
  }
}
.t1{--c:var(--t1);--cb:var(--t1b)}
.t2{--c:var(--t2);--cb:var(--t2b)}
.t3{--c:var(--t3);--cb:var(--t3b)}
.t4{--c:var(--t4);--cb:var(--t4b)}
.t5{--c:var(--t5);--cb:var(--t5b)}
.t6{--c:var(--t6);--cb:var(--t6b)}
.t7{--c:var(--t7);--cb:var(--t7b)}
.t8{--c:var(--t8);--cb:var(--t8b)}

*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 var(--font-body);padding-block:24px 32px}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
@media (max-width:620px){.wrap{padding:0 16px}body{padding-block:12px 24px}}
h1,h2,h3{font-family:var(--font-display);text-wrap:balance;margin:0}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ic{width:1em;height:1em;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.125em}

header.top{display:flex;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.emblem{width:56px;height:56px;flex-shrink:0}
header.top .titles{flex:1;min-width:0}
header.top .titles h1{font-size:24px;font-weight:700;color:var(--ink)}
header.top .titles p{margin:2px 0 0;color:var(--ink-soft);font-size:14px}
header.top .credit{font-size:12px;color:var(--ink-soft);white-space:nowrap}
header.top .credit strong{color:var(--accent);font-weight:700}
@media (max-width:620px){
  header.top{gap:12px}
  .emblem,[data-theme="quistinic"] header.top::before{width:44px!important;height:44px!important}
  header.top .titles h1{font-size:19px}
  header.top .titles p{display:none}
}

.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px 22px;margin-bottom:20px}
@media (max-width:620px){.card{padding:16px}}
.muted{color:var(--ink-soft)}

/* Badge jaune générique ; avec une classe t1..t7, prend la couleur du type. */
.badge-type{display:inline-flex;align-items:center;gap:6px;background:var(--gold);color:var(--gold-ink);border-radius:999px;padding:3px 10px 3px 8px;font-size:12.5px;font-weight:600;white-space:nowrap}
.badge-type[class*=" t"]{background:var(--cb);color:var(--c)}
.badge-type[class*=" t"]::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}

/* Commune d'origine d'un événement importé (onglet "Aux alentours") —
   délibérément discret (contour, pas une couleur pleine) : ce n'est pas une
   catégorie comme .badge-type, juste une provenance. */
.badge-commune{display:inline-flex;align-items:center;border:1px solid var(--border);color:var(--ink-soft);border-radius:999px;padding:2px 10px;font-size:12px;font-weight:600;white-space:nowrap;margin-left:6px}

/* ---- Formulaires ---- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:620px){.form-grid{grid-template-columns:1fr}}
.form-grid .full{grid-column:1/-1}
/* Libellés en casse normale (plus en MAJUSCULES) : plus lisibles, surtout
   pour un public âgé. */
label,.libelle-champ{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:6px}
label small,.facultatif{font-weight:400;color:var(--ink-soft)}
input,select,textarea{width:100%;min-height:44px;padding:9px 12px;border-radius:10px;border:1px solid var(--border);background:var(--bg);color:var(--ink);font:15px var(--font-body)}
textarea{resize:vertical;min-height:84px}
input[type="file"]{min-height:0;padding:8px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
.aide{font-size:13px;color:var(--ink-soft);margin-top:5px}

/* Heure/minute en deux <select> plutôt qu'un <input type="time"> : ce
   dernier suit la locale du système, pas celle de la page, et peut afficher
   un format 12h AM/PM même avec lang="fr" — vérifié en pratique. Inadapté à
   un public local en Bretagne. */
.heure-minute{display:flex;align-items:center;gap:6px}
.heure-minute select{width:auto;flex:1;min-width:0}
.heure-minute span{color:var(--ink-soft);font-size:14px;font-weight:600}

.alerte-collision{display:none;gap:10px;align-items:flex-start;background:var(--warn-weak);border:1px solid var(--warn);color:var(--warn);border-radius:10px;padding:10px 12px;font-size:14px}
.alerte-collision.show{display:flex}
.alerte-ok{display:none;gap:10px;align-items:flex-start;background:var(--bg);border:1px solid var(--border);color:var(--ink-soft);border-radius:10px;padding:10px 12px;font-size:14px}
.alerte-ok.show{display:flex}
.alerte-collision svg,.alerte-ok svg{width:18px;height:18px;flex-shrink:0;margin-top:1px}
.alerte-ok svg{color:var(--t3)}

/* ---- Boutons ----
   .btn sert aux liens qui ont l'apparence d'un bouton (jamais un <button>
   dans un <a>, HTML invalide). */
button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;cursor:pointer;font:600 14px var(--font-body);border-radius:10px;padding:6px 16px;border:1px solid var(--border);background:var(--surface);color:var(--ink);text-decoration:none}
.btn,.puce{white-space:nowrap}
button:hover,.btn:hover{border-color:var(--ink-soft)}
button.primary,.btn.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
button.primary:hover,.btn.primary:hover{filter:brightness(1.07)}
button.secondary,.btn.secondary{background:none}
button.secondary:hover,.btn.secondary:hover{background:var(--accent-weak)}
button.danger{background:none;border-color:var(--warn);color:var(--warn)}
button.danger:hover{background:var(--warn-weak)}
.btn .ic,button .ic{font-size:17px}
.btn.petit,button.petit{min-height:36px;padding:0 12px;font-size:13.5px}
button.icone{min-height:0;width:36px;height:36px;padding:0;border:0;background:none;color:var(--ink-soft)}
button.icone:hover{background:var(--bg);color:var(--ink)}
.bar{display:flex;gap:8px;flex-wrap:wrap}


/* ---- Navigation par onglets (toutes les pages publiques) ---- */
.onglets{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:20px;overflow-x:auto;scrollbar-width:none}
.onglets a{display:inline-flex;align-items:center;gap:8px;padding:11px 12px 10px;font-weight:600;font-size:15px;color:var(--ink-soft);text-decoration:none;border-bottom:3px solid transparent;margin-bottom:-1px;white-space:nowrap}
.onglets a:hover{color:var(--ink)}
.onglets a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}
.onglets .n{font-size:12px;background:var(--border);color:var(--ink-soft);border-radius:999px;padding:1px 7px}

/* Menu "S'abonner" de l'en-tête (iCal/RSS) — <details> natif, aucune
   dépendance ; fermé au clic extérieur par index.js. */
.menu-abonnement{position:relative}
@media (max-width:620px){.menu-abonnement > .btn .libelle{display:none}.menu-abonnement > .btn{padding:0;width:40px}}

/* Menu d'abonnement iCal (agenda de la commune, "Suivre" un organisateur)
   — voir brancherMenusAbonnement dans js/commun.js. Dans le flux de la
   page par défaut ; flottant sous le bouton de l'en-tête, et en panneau
   en bas de l'écran sur mobile. */
.abo-panneau{margin-top:10px;width:min(380px,100%);background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px;box-shadow:0 18px 40px -18px rgba(0,0,0,.45);display:grid;gap:6px;text-align:left;font-weight:400}
.abo-panneau[hidden]{display:none}
.abo-panneau.flottant{position:absolute;right:0;top:calc(100% + 8px);z-index:20;width:350px;margin:0}
@media (max-width:620px){.abo-panneau.flottant{position:fixed;left:12px;right:12px;bottom:12px;top:auto;width:auto;max-height:85vh;overflow-y:auto;border-radius:18px}}
.abo-titre{display:flex;align-items:center;gap:8px;margin:0;font:800 16px var(--font-display);color:var(--ink)}
.abo-titre .ic{color:var(--accent)}
.abo-texte{margin:0 0 6px;font-size:13.5px;color:var(--ink-soft)}
a.abo-option{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 10px;border-radius:10px;border:1px solid var(--border);background:var(--bg);color:var(--ink);text-decoration:none}
a.abo-option:hover{border-color:var(--ink-soft)}
.abo-option b{display:block;font-size:14px}
.abo-option small{display:block;color:var(--ink-soft);font-size:12.5px}
.abo-option > .ic{color:var(--ink-soft)}
.abo-logo{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font:800 14px var(--font-body);color:#fff}
.abo-logo .ic{font-size:17px}
.abo-autre{margin:6px 0 0;font-size:13px;font-weight:600;color:var(--ink)}
.abo-copie{display:flex;gap:6px}
.abo-copie input{flex:1;min-width:0;min-height:36px;font:12px ui-monospace,Menlo,monospace;color:var(--ink-soft)}
.abo-note{display:flex;gap:6px;align-items:flex-start;margin:6px 0 0;padding-top:10px;border-top:1px solid var(--border);font-size:12.5px;color:var(--ink-soft)}
.abo-note .ic{margin-top:2px}
button.lien-suivre{min-height:0;padding:0;border:0;background:none;color:var(--accent);font-weight:600;font-size:14px;gap:6px;margin-top:6px}
button.lien-suivre:hover{text-decoration:underline;text-underline-offset:3px}

/* ---- Barre d'outils : vue (segment) puis filtres (pastilles) ---- */
.segment{display:inline-flex;background:var(--border);border-radius:11px;padding:3px;gap:2px;margin-bottom:14px;max-width:100%;overflow-x:auto}
.segment button{border:0;background:none;border-radius:9px;min-height:36px;padding:0 14px;font-size:14px;color:var(--ink-soft);white-space:nowrap}
@media (max-width:420px){.segment button{padding:0 10px}}
.segment button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12)}

.filtres{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:18px;scrollbar-width:thin}
.puce{min-height:36px;padding:0 13px;border-radius:999px;font-weight:500;gap:7px;flex-shrink:0}
.puce i{width:9px;height:9px;border-radius:50%;background:var(--c,var(--ink-soft))}
.puce b{font-weight:600;font-size:12px;color:var(--ink-soft)}
.puce[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.puce[aria-pressed="true"] b{color:inherit;opacity:.75}

/* ---- Agenda : mise en page avec colonne latérale ---- */
.mise-en-page{display:grid;gap:24px}
.mise-en-page > *{min-width:0}
.colonne-laterale{display:none}
@media (min-width:860px){
  .mise-en-page{grid-template-columns:minmax(0,1fr) 280px;align-items:start}
  .colonne-laterale{display:grid;gap:14px;position:sticky;top:16px}
  .mise-en-page .accordeon{display:none!important}
}
.colonne-laterale .card{margin:0;padding:16px}
.colonne-laterale h3,.accordeon summary{font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px}
.colonne-laterale h3{margin-bottom:10px}
.colonne-laterale h3 .ic,.accordeon summary .ic{color:var(--accent)}
.colonne-laterale .btn{width:100%}
.accordeon{background:var(--surface);border:1px solid var(--border);border-radius:14px;margin-bottom:16px}
.accordeon summary{list-style:none;padding:12px 14px;cursor:pointer;font-family:var(--font-display)}
.accordeon summary::-webkit-details-marker{display:none}
.accordeon summary small{font:400 13.5px var(--font-body);color:var(--ink-soft)}
.accordeon summary .chevron{margin-left:auto;transition:transform .2s}
.accordeon[open] summary .chevron{transform:rotate(180deg)}
.accordeon .contenu-accordeon{padding:0 14px 14px}

.groupe-titre{display:flex;align-items:baseline;gap:10px;font-size:17px;font-weight:800;margin:24px 0 10px}
.groupe-titre:first-child{margin-top:0}
.groupe-titre span{font:500 13.5px var(--font-body);color:var(--ink-soft)}
.groupe-titre.proche{color:var(--accent)}

/* ---- Carte d'événement ---- */
.carte-evt{display:grid;grid-template-columns:62px minmax(0,1fr) auto;gap:14px;align-items:start;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px;margin-bottom:10px;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.carte-evt:hover{border-color:var(--ink-soft);box-shadow:0 6px 18px -12px rgba(0,0,0,.35)}
.carte-evt.passe{opacity:.6}
.date-bloc{display:grid;justify-items:center;background:var(--bg);border:1px solid var(--border);border-radius:11px;padding:7px 0 8px;line-height:1.05}
.date-bloc .jsem{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--accent)}
.date-bloc .jour{font:800 25px var(--font-display);margin-top:3px}
.date-bloc .mois{font-size:12px;color:var(--ink-soft);margin-top:3px}
.carte-evt h4{font:700 17px/1.25 var(--font-display);margin:7px 0 4px}
.meta{display:flex;flex-wrap:wrap;gap:3px 14px;color:var(--ink-soft);font-size:14px;margin:0}
.meta span{display:inline-flex;align-items:center;gap:5px}
.meta .horaire{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:500}
.carte-evt .resume{margin:8px 0 0;color:var(--ink-soft);font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.carte-evt .droite{display:grid;gap:8px;justify-items:end}
.miniature{width:64px;aspect-ratio:3/4;border-radius:8px;overflow:hidden;border:1px solid var(--border);background:var(--accent-weak)}
.miniature img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:560px){
  .carte-evt{grid-template-columns:54px minmax(0,1fr);gap:12px}
  .carte-evt{position:relative}
  .carte-evt > div:nth-child(2){padding-right:30px}
  .carte-evt .droite{position:absolute;top:8px;right:8px}
  .miniature{display:none}
  .date-bloc .jour{font-size:22px}
}

/* ---- Encart "En ce moment" (événements sur plusieurs jours en cours) ---- */
.colonne-laterale .en-cours{display:grid;gap:5px;padding:12px 0;border-top:1px solid var(--border)}
.colonne-laterale h3 + .en-cours-liste .en-cours:first-child{border-top:0;padding-top:0}
#carte-en-cours h3 .ic{color:var(--t8)}
#carte-en-cours h3 small,.bande-titre span{margin-left:auto;font:500 12.5px var(--font-body);color:var(--ink-soft)}
a.en-cours{text-decoration:none;color:var(--ink)}
a.en-cours:hover b{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.en-cours b{font:700 15px/1.25 var(--font-display)}
.en-cours .lieu-heures{font-size:13px;color:var(--ink-soft)}
.en-cours .jauge{height:5px;border-radius:999px;background:var(--border);overflow:hidden;margin-top:3px}
.en-cours .jauge i{display:block;height:100%;border-radius:999px;background:var(--c)}
.en-cours .reste{font-size:12.5px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.en-cours .reste.fin{color:var(--accent);font-weight:700}
.bande-titre{display:flex;align-items:baseline;gap:8px;font-size:16px;font-weight:800;margin:0 0 8px}
.bande{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;margin-bottom:16px;scroll-snap-type:x mandatory}
.bande .en-cours{flex:0 0 min(78%,260px);scroll-snap-align:start;display:grid;gap:5px;align-content:start;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:12px 14px}
@media (min-width:860px){.bande-en-cours{display:none!important}}
.date-bloc .fleche{font-size:11px;color:var(--ink-soft);line-height:1;margin:2px 0 1px}
.date-bloc .mois-fin{font-size:12px;font-weight:700}
.meta .periode{font-weight:600;color:var(--ink)}

/* ---- Séries et dates annulées ---- */
.repete{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:var(--accent);margin:0 0 4px}
.repete .ic{font-size:14px}
.suite-serie{margin:6px 0 0;font-size:13px;color:var(--ink-soft)}
.suite-serie b{color:var(--ink)}
.badge-annule{display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:3px 8px;border-radius:999px;background:var(--warn-weak);color:var(--warn);margin-right:6px}
.carte-evt.annule h4{text-decoration:line-through;text-decoration-thickness:1.5px;color:var(--ink-soft)}
.carte-evt.annule .date-bloc{opacity:.55}

.bandeau-annule{display:flex;gap:10px;align-items:flex-start;background:var(--warn-weak);color:var(--warn);border-radius:12px;padding:12px 14px;margin-bottom:16px;font-size:15px}
.bandeau-annule .ic{margin-top:3px}
.bandeau-annule b{margin-right:4px}
.detail-grille.annule h2{text-decoration:line-through;text-decoration-thickness:2px;color:var(--ink-soft)}
.faits dd .regle-serie{display:flex;align-items:center;gap:6px;color:var(--accent);font-weight:600;margin-top:4px}
.dates-serie{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.dates-serie a,.dates-serie span{font-size:12.5px;font-weight:600;padding:4px 9px;border-radius:999px;background:var(--bg);border:1px solid var(--border);color:var(--ink);text-decoration:none}
.dates-serie a:hover{border-color:var(--ink-soft)}
.dates-serie a.cette{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.dates-serie a.annulee{text-decoration:line-through;color:var(--ink-soft)}
.dates-serie a.cette.annulee{background:var(--warn-weak);border-color:var(--warn);color:var(--warn)}
.dates-serie span{font-weight:500;color:var(--ink-soft)}

/* ---- Activités régulières (séries hebdomadaires, voir commun.js) ---- */
/* Ligne "Aussi aujourd'hui" sous les événements du jour */
.aussi{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:10px 14px;border:1px dashed var(--border);border-radius:14px;margin-bottom:10px;font-size:14px;color:var(--ink-soft)}
.aussi > .ic{color:var(--accent)}
.aussi-puce{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 11px;border-radius:999px;background:var(--surface);border:1px solid var(--border);color:var(--ink);text-decoration:none;font-weight:600;font-size:13.5px}
.aussi-puce:hover{border-color:var(--ink-soft)}
.aussi-puce i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.aussi-puce time{font-variant-numeric:tabular-nums;color:var(--ink-soft);font-weight:500}
.aussi-puce.annule{text-decoration:line-through;color:var(--ink-soft)}
.aussi .vers{margin-left:auto;min-height:32px;padding:0;border:0;background:none;font-size:13.5px;color:var(--accent);text-decoration:underline;text-underline-offset:3px}
/* Onglet "Chaque semaine" et page d'un organisateur */
.semaine{display:grid;gap:12px}
.jour-sem{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:12px 16px 4px}
.jour-sem.sans-titre{padding-top:4px;margin-bottom:8px}
.jour-sem > h3{display:flex;align-items:baseline;gap:10px;font-size:16px;font-weight:800;margin:0 0 4px}
.jour-sem > h3 small{font:500 13px var(--font-body);color:var(--ink-soft)}
.jour-sem.aujourdhui{border-color:var(--accent)}
.jour-sem.aujourdhui > h3{color:var(--accent)}
.chip-auj{font:700 11px var(--font-body);text-transform:uppercase;letter-spacing:.05em;background:var(--accent);color:var(--on-accent);border-radius:999px;padding:3px 8px;align-self:center}
.act{display:grid;grid-template-columns:118px minmax(0,1fr);gap:4px 14px;padding:11px 0;border-top:1px solid var(--border);text-decoration:none;color:var(--ink)}
.jour-sem > h3 + .act,.jour-sem.sans-titre > .act:first-child{border-top:0}
.act:hover .act-nom{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.act-heure{display:flex;gap:7px;white-space:nowrap;align-items:baseline;font-weight:600;font-size:14.5px;font-variant-numeric:tabular-nums;padding-top:1px}
.act-heure::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c);flex-shrink:0;transform:translateY(-1px)}
.act-heure span{color:var(--ink-soft);font-weight:500}
.act-corps{display:grid;justify-items:start;gap:3px}
.act-nom{font:700 16px/1.25 var(--font-display)}
.act-meta{display:flex;flex-wrap:wrap;gap:2px 12px;font-size:13.5px;color:var(--ink-soft)}
.act-meta span{display:inline-flex;align-items:center;gap:5px}
.act-regle{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:var(--accent)}
.act-annule{display:inline-flex;align-items:center;gap:6px;margin-top:3px;font-size:13px;font-weight:600;color:var(--warn);background:var(--warn-weak);border-radius:8px;padding:3px 9px}
@media (max-width:560px){
  .act{grid-template-columns:1fr}
  .jour-sem{padding-inline:14px}
}
/* Calendrier : case "activités régulières" et détail d'un jour */
.cal-options{display:flex;align-items:center;gap:8px;margin:0 0 12px}
.cal-options input{width:18px;height:18px;min-height:0;margin:0;padding:0;accent-color:var(--accent)}
.cal-options label{margin:0;font-weight:500;cursor:pointer}
.cal-points i.discret{width:5px;height:5px;opacity:.6;align-self:center}
.sous-titre-detail{font:600 12.5px var(--font-body);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);margin:14px 0 2px}
.ligne-activite{display:grid;grid-template-columns:118px minmax(0,1fr);gap:14px;padding:9px 0;border-top:1px solid var(--border);font-size:14px;color:var(--ink);text-decoration:none}
.sous-titre-detail + .ligne-activite{border-top:0}
.ligne-activite .h{white-space:nowrap;font-weight:600;font-variant-numeric:tabular-nums}
.ligne-activite b{font:700 15px var(--font-display)}
.ligne-activite small{display:block;color:var(--ink-soft);font-size:13px}
.ligne-activite:hover b{text-decoration:underline;text-underline-offset:3px}
.ligne-activite.annule b{text-decoration:line-through;color:var(--ink-soft)}

/* ---- Calendrier ---- */
.cal-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.cal-header h3{font-size:18px;font-weight:800}
.cal-nav{display:flex;gap:6px}
.cal-nav button{min-height:36px;padding:0 12px}
.cal-nav button.fleche{width:36px;padding:0}
.cal-grille{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.cal-entete{text-align:center;font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);padding-bottom:4px}
.cal-jour{position:relative;aspect-ratio:1;min-height:0;border:1px solid var(--border);border-radius:9px;background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font:500 14px var(--font-body);color:var(--ink);padding:0}
.cal-jour.passe{color:var(--ink-soft);background:transparent}
.cal-jour.avec-evt{font-weight:700}
.cal-jour.aujourdhui{border:2px solid var(--accent);font-weight:800}
.cal-jour.selectionne{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.cal-points{display:flex;gap:3px;height:7px}
.cal-points i{width:7px;height:7px;border-radius:50%;background:var(--c)}
.cal-points i.creux{background:transparent;box-shadow:inset 0 0 0 1.5px var(--c)}
.cal-detail{margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}
.cal-detail > h4{font-family:var(--font-body);font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);font-weight:600;margin:0 0 10px}

/* ---- Pied de page ---- */
.pied{margin-top:32px;padding-top:14px;border-top:1px solid var(--border);color:var(--ink-soft);font-size:13px;display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between}
.pied strong{color:var(--ink)}

/* ---- Page détail d'un événement ---- */
.fil-retour{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:15px;text-decoration:none;margin-bottom:14px}
.detail-grille{display:grid;gap:24px}
.detail-grille > *{min-width:0}
@media (min-width:820px){.detail-grille.avec-affiche{grid-template-columns:minmax(0,1fr) 300px;align-items:start}.detail-grille:not(.avec-affiche){max-width:720px}}
@media (max-width:819px){.detail-grille .detail-affiche{order:-1}}
.detail-grille h2{font-size:clamp(26px,5vw,38px);font-weight:800;line-height:1.1;letter-spacing:-.01em;margin:10px 0 18px}
.faits{margin:0 0 18px;background:var(--surface);border:1px solid var(--border);border-radius:14px}
.faits > div{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:12px;padding:12px 14px;border-top:1px solid var(--border)}
.faits > div:first-child{border-top:0}
.faits .pastille{width:36px;height:36px;border-radius:10px;background:var(--bg);display:grid;place-items:center;color:var(--accent);grid-row:span 2;font-size:18px}
.faits dt{font-size:13px;color:var(--ink-soft);font-weight:600}
.faits dd{margin:0;font-weight:600}
.faits dd small{display:block;font-weight:400;color:var(--ink-soft);font-size:14px}
.faits dd .abo-panneau{font-size:14px}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.actions .btn{flex:1 1 auto}
@media (max-width:560px){.actions .btn.primary{flex-basis:100%}}
.texte-long{max-width:62ch;white-space:pre-line;margin:0}
.affiche-grande{display:block;width:100%;border-radius:14px;border:1px solid var(--border)}
@media (max-width:819px){.affiche-grande{max-height:340px;object-fit:cover}}
.detail-affiche a{display:block}
.detail-affiche .aide{display:flex;align-items:center;gap:6px}
.partage-ligne{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding-top:16px;margin-top:20px;border-top:1px solid var(--border);font-size:14px;color:var(--ink-soft)}

/* Ouvre la boîte de dialogue native de partage Facebook (sharer.php) — pas
   d'API/token nécessaire, et c'est l'utilisateur qui choisit sa destination
   (son profil, une Page qu'il gère, ou un Groupe dont il est membre) au
   moment du partage, jamais Keriou. Couleur de marque Facebook (#1877F2)
   plutôt que la palette du site, volontairement, pour que le bouton reste
   reconnaissable au premier coup d'œil. Réservé à la page détail : dans les
   listes, une simple icône de partage (voir .carte-evt) suffit. */
.btn-fb{display:inline-flex;align-items:center;gap:7px;background:#1877f2;color:#fff;border:none;border-radius:999px;min-height:36px;padding:0 14px;font:600 13.5px var(--font-body);cursor:pointer;text-decoration:none}
.btn-fb:hover{background:#0f5fc9}
.btn-fb svg{width:15px;height:15px;flex-shrink:0}

/* ---- Page publique d'un organisateur (/organisateurs/<id>-<nom>) ---- */
.fiche-tete{display:grid;gap:8px;padding-bottom:18px;border-bottom:1px solid var(--border);margin-bottom:20px}
.fiche-tete .etiquettes{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.fiche-tete h2{font-size:clamp(26px,5vw,36px);font-weight:800;line-height:1.1;letter-spacing:-.01em}
.resume-fiche{margin:0;max-width:62ch;color:var(--ink-soft);white-space:pre-line}
.fiche-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start;margin-top:6px}
/* Le menu "Suivre" (juste après son bouton dans le HTML, voir commun.js)
   passe sous les deux boutons, qui restent côte à côte. */
.fiche-actions .abo-panneau{order:3;flex-basis:100%;margin-top:2px}
.fiche-grille{display:grid;gap:24px}
.fiche-grille > *{min-width:0}
@media (min-width:860px){.fiche-grille.avec-coordonnees{grid-template-columns:minmax(0,1fr) 300px;align-items:start}}
@media (max-width:859px){.fiche-grille.avec-coordonnees aside{order:-1}}
.fiche-grille aside .faits{margin:0}
.faits dd a{font-weight:600}
a.nom-organisateur{color:inherit;text-decoration:underline;text-decoration-color:var(--border);text-underline-offset:3px}
a.nom-organisateur:hover{text-decoration-color:currentColor}

/* ---- Espace organisateur ---- */
.qui{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:5px 12px 5px 6px;font-size:14px;font-weight:600;max-width:100%}
.qui i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--accent-weak);color:var(--accent);font:800 11px var(--font-body);font-style:normal;flex-shrink:0}
.qui span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:620px){
  header.top .titles{flex-basis:calc(100% - 60px)}
  header.top .qui{margin-left:56px}
  .ligne-evt{gap:10px;padding:10px 8px 10px 12px}
  .ligne-evt .date{min-width:0;font-size:12.5px}
  .ligne-evt .actions-ligne .btn{display:none}
}
.titre-section{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:6px 0 12px}
.titre-section h3{font-size:18px;font-weight:800}
.liste-lignes{background:var(--surface);border:1px solid var(--border);border-radius:14px;margin-bottom:24px}
.ligne-evt{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 14px;border-top:1px solid var(--border)}
.ligne-evt:first-child{border-top:0}
.ligne-evt .date{font:700 13px var(--font-body);font-variant-numeric:tabular-nums;color:var(--ink-soft);min-width:74px}
.ligne-evt .nom{font-weight:600}
.ligne-evt .nom small{display:block;font-weight:400;color:var(--ink-soft);font-size:13.5px}
.ligne-evt .actions-ligne{display:flex;gap:2px}
.ligne-evt.passe{opacity:.6}
.liste-lignes .vide{padding:14px;margin:0}
.formulaire{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:4px 20px 0;margin-bottom:20px}
.formulaire[hidden]{display:none}
.bloc{border:0;margin:0;padding:16px 0 18px;border-top:1px solid var(--border);display:grid;gap:14px;min-width:0}
.bloc:first-of-type{border-top:0}
.bloc legend{float:left;width:100%;font:800 16px var(--font-display);padding:0;margin-bottom:12px}
.bloc legend + *{clear:both}
.bloc legend small{font:400 14px var(--font-body);color:var(--ink-soft)}
.grille-2,.grille-3{display:grid;gap:14px}
@media (min-width:620px){.grille-2{grid-template-columns:1fr 1fr}.grille-3{grid-template-columns:1.3fr 1fr 1fr}}
.choix-types{display:flex;flex-wrap:wrap;gap:8px}
.choix-types label{margin:0;display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 13px;border-radius:999px;border:1px solid var(--border);background:var(--bg);font-weight:500;font-size:14px;cursor:pointer}
.choix-types label i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.choix-types input{position:absolute;opacity:0;width:1px;height:1px;min-height:0;pointer-events:none}
.choix-types label:has(input:checked){border-color:var(--c);background:var(--cb);color:var(--c);font-weight:600}
.choix-types label:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.resume-periode{margin:0;display:flex;gap:10px;align-items:center;background:var(--t8b);color:var(--t8);border-radius:10px;padding:10px 12px;font-size:14px;font-weight:600}
.resume-periode.erreur{background:var(--warn-weak);color:var(--warn)}
.zone-affiche{display:grid;grid-template-columns:84px minmax(0,1fr);gap:14px;align-items:center;border:1.5px dashed var(--border);border-radius:12px;padding:12px;background:var(--bg);cursor:pointer}
.zone-affiche.survol{border-color:var(--accent);background:var(--accent-weak)}
.zone-affiche .apercu{aspect-ratio:3/4;border-radius:8px;overflow:hidden;background:var(--surface);border:1px solid var(--border);display:grid;place-items:center;color:var(--ink-soft);font-size:26px}
.zone-affiche .apercu img{width:100%;height:100%;object-fit:cover;display:block}
.zone-affiche p{margin:0;font-size:14px;overflow-wrap:anywhere}
.zone-affiche p small{display:block;color:var(--ink-soft);font-size:13px}
.zone-affiche input{position:absolute;opacity:0;width:1px;height:1px;min-height:0;pointer-events:none}
.barre-collante{position:sticky;bottom:0;display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(6px);border-top:1px solid var(--border);margin:0 -20px;padding:12px 20px;border-radius:0 0 14px 14px}
@media (max-width:560px){.barre-collante button{flex:1}}
/* ---- Séries dans le formulaire et la liste de l'organisateur ---- */
.choix-regles{display:flex;flex-wrap:wrap;gap:8px}
.choix-regles button{min-height:38px;padding:0 13px;border-radius:999px;border:1px solid var(--border);background:var(--bg);font-weight:500;font-size:14px}
.choix-regles button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-weak);color:var(--accent);font-weight:600}
.dates-serie-ctrl{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:12px 14px;font-size:14px}
.dates-serie-ctrl.erreur{background:var(--warn-weak);border-color:var(--warn);color:var(--warn);font-weight:600}
.dates-serie-ctrl .tete{display:flex;align-items:center;gap:8px;font-weight:700;margin-bottom:8px}
.dates-serie-ctrl .tete .ic{color:var(--t3)}
.puces-dates{display:flex;flex-wrap:wrap;gap:6px}
.puces-dates span{font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;padding:4px 9px;border-radius:999px;background:var(--surface);border:1px solid var(--border)}
.puces-dates span.conflit{border-color:var(--warn);background:var(--warn-weak);color:var(--warn)}
.conflits-serie{display:flex;gap:8px;align-items:flex-start;margin:10px 0 0;color:var(--warn)}
.conflits-serie .ic{margin-top:3px}
.rappel-serie{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--warn-weak);color:var(--warn);border-radius:12px;padding:12px 14px;margin-bottom:12px;font-size:14.5px}
.rappel-serie b{color:var(--ink)}
.rappel-serie span{flex:1 1 260px}
details.serie{border-top:1px solid var(--border)}
details.serie:first-child{border-top:0}
.serie-tete{list-style:none;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 14px;cursor:pointer}
.serie-tete::-webkit-details-marker{display:none}
.serie-tete .ic-serie{width:34px;height:34px;border-radius:9px;background:var(--accent-weak);color:var(--accent);display:grid;place-items:center;font-size:17px}
.serie-tete .nom{font-weight:600}
.serie-tete .nom small{display:block;font-weight:400;color:var(--ink-soft);font-size:13.5px}
.serie-tete .chevron{color:var(--ink-soft);transition:transform .2s}
details.serie[open] .serie-tete .chevron{transform:rotate(180deg)}
.serie-contenu{padding:0 14px 12px 60px;display:grid;gap:10px}
@media (max-width:560px){.serie-contenu{padding-left:14px}}
.serie-contenu .prolonger{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:12px}
.date-serie{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px 0;border-top:1px dashed var(--border)}
.date-serie .d{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.date-serie .jour{font-weight:600;font-variant-numeric:tabular-nums}
.date-serie small{color:var(--ink-soft);font-size:13px}
.date-serie.annulee .jour{text-decoration:line-through;color:var(--ink-soft)}
.message{padding:10px 14px;border-radius:10px;margin-bottom:16px;font-size:14px;background:var(--accent-weak);color:var(--ink)}
.message.erreur{background:var(--warn-weak);color:var(--warn)}
.panneau-onglet[hidden]{display:none}

/* ---- Petites annonces (entraide) ---- */
.badge-statut{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600;white-space:nowrap}
.badge-statut.attente{background:var(--warn-weak);color:var(--warn)}
.intro-ligne{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:16px}
.intro-ligne p{margin:0;color:var(--ink-soft);font-size:14.5px;max-width:52ch}
.form-annonce{background:var(--surface);border:1px solid var(--accent);border-radius:14px;padding:16px 18px;margin-bottom:20px;box-shadow:0 0 0 4px var(--accent-weak)}
.form-annonce[hidden]{display:none}
.form-annonce h3{font-size:17px;font-weight:800;margin-bottom:4px}
.form-annonce > p{margin:0 0 14px;font-size:14px;color:var(--ink-soft)}
.carte-annonce{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 16px;margin-bottom:10px}
.icone-cat{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--cb);color:var(--c);font-size:20px}
.carte-annonce h4{font:700 16.5px var(--font-display);margin:0}
.carte-annonce .quand{font-size:13px;color:var(--ink-soft);margin-top:2px}
.carte-annonce p{margin:6px 0 0;font-size:14.5px;white-space:pre-line}
.carte-annonce .contact{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-weight:600}
.carte-annonce .contact a{display:inline-flex;align-items:center;gap:6px}

/* ---- Commerces ---- */
.recherche{position:relative;display:block;margin-bottom:12px}
.recherche .ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--ink-soft);font-size:17px}
.recherche input{padding-left:40px;background:var(--surface)}
.grille-cartes{display:grid;gap:12px}
@media (min-width:720px){.grille-cartes{grid-template-columns:1fr 1fr}}
.carte-commerce{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:10px}
.carte-commerce.en-conge{background:color-mix(in srgb,var(--surface) 65%,var(--bg))}
.carte-commerce .haut{display:flex;justify-content:space-between;gap:8px 10px;align-items:start;flex-wrap:wrap}
.carte-commerce h4{font:800 17px var(--font-display);margin:6px 0 0}
.carte-commerce > p{margin:0;color:var(--ink-soft);font-size:14px}
.badge-statut.ferme{background:var(--warn-weak);color:var(--warn)}
.infos-cle{display:grid;grid-template-columns:18px minmax(0,1fr);gap:6px 8px;font-size:14px;align-items:start}
.infos-cle .ic{color:var(--ink-soft);margin-top:3px}
.infos-cle span{white-space:pre-line;overflow-wrap:anywhere}
.suivi-annuaire{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;padding-top:10px;border-top:1px dashed var(--border);font-size:14px;color:var(--ink-soft)}
.suivi-annuaire b{color:var(--ink)}
.suivi-annuaire .lien-suivre{margin:0}
.suivi-annuaire .abo-panneau{flex-basis:100%;margin-top:4px}
.carte-commerce .actions-commerce{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:4px}

/* Piège à bots sur le formulaire de dépôt d'annonce (voir routes/public.js
   POST /annonces) : hors-écran plutôt que display:none, qu'un bot un peu
   attentif ignore parfois — jamais montré à un humain, jamais annoncé par
   un label visible. */
.leurre{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---- Infos pratiques (jour de marché, horaires...) ---- */
.info-pratique{padding:9px 0;border-top:1px solid var(--border);font-size:14px}
.info-pratique:first-child{border-top:none;padding-top:0}
.info-pratique .titre{font-weight:600}
.info-pratique .contenu{color:var(--ink-soft);margin-top:1px;white-space:pre-line}


/* ---- Administration (mairie) ---- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
button[disabled]{opacity:.4;cursor:not-allowed}
button.lien-danger{background:none;border-color:transparent;color:var(--warn)}
button.lien-danger:hover{background:var(--warn-weak);border-color:transparent}
.badge-statut.ok{background:var(--t3b);color:var(--t3)}
.badge-statut.neutre{background:var(--t7b);color:var(--t7)}
.onglets .n.alerte{background:var(--accent);color:var(--on-accent)}
.connexion{max-width:560px}
.connexion h3{font-size:18px;margin-bottom:4px}
.connexion .bar input{flex:1;min-width:200px}

.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:20px}
@media (max-width:720px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 16px}
.kpi .v{font:800 28px/1.1 var(--font-display);font-variant-numeric:tabular-nums}
.kpi .l{font-size:13.5px;color:var(--ink-soft);margin-top:2px}
.kpi.alerte{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}
.kpi.alerte .v{color:var(--accent)}
.kpi.info .v{color:var(--warn)}
.grille-accueil{display:grid;gap:20px}
.grille-accueil > *{min-width:0}
@media (min-width:900px){.grille-accueil{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start}}
.grille-accueil .card{margin-bottom:20px}
.titre-carte{font-size:17px;font-weight:800;display:flex;align-items:center;gap:8px;margin-bottom:14px}
.titre-carte .compte{font:600 13.5px var(--font-body);color:var(--ink-soft)}
.lien-carte{margin-left:auto;font:600 13.5px var(--font-body);text-decoration:none}
.a-traiter{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:start;padding:12px 0;border-top:1px solid var(--border)}
.titre-carte + .a-traiter{border-top:0;padding-top:0}
.a-traiter.alerte{--c:var(--warn);--cb:var(--warn-weak)}
.pastille-ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--cb);color:var(--c);font-size:18px}
.a-traiter b{font-weight:600}
.a-traiter p{margin:2px 0 0;color:var(--ink-soft);font-size:14px}
.a-traiter p.texte{color:var(--ink);white-space:pre-line}
.actions-ligne{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:640px){.a-traiter{grid-template-columns:36px minmax(0,1fr)}.a-traiter .actions-ligne{grid-column:2;justify-content:flex-start}}
.rien{display:flex;align-items:center;gap:8px;color:var(--ink-soft);margin:0}
.rien .ic{color:var(--t3);font-size:18px}

.barres{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;align-items:end;height:130px}
.barre{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:4px}
.barre .b{width:100%;max-width:30px;border-radius:5px 5px 2px 2px;background:var(--t7b);border:1px solid var(--border)}
.barre.calme .b{background:var(--t3b);border-color:var(--t3)}
.barre.chargee .b{background:var(--warn-weak);border-color:var(--warn)}
.barre .n{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.barre .m{font-size:11px;color:var(--ink-soft)}
.legende{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:12.5px;color:var(--ink-soft)}
.legende i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px;border:1px solid}
.legende i.calme{background:var(--t3b);border-color:var(--t3)}
.legende i.chargee{background:var(--warn-weak);border-color:var(--warn)}
.mini-liste{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 12px;font-size:14px}
.mini-liste .d{font-size:13px;font-weight:700;color:var(--ink-soft);font-variant-numeric:tabular-nums;padding-top:1px}
.mini-liste b{font-weight:600}

.barre-outils{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px}
.barre-outils .recherche{flex:1 1 240px;max-width:360px;margin:0}
.barre-outils .segment{margin:0}
.barre-outils .segment b{font-size:12px;color:var(--ink-soft)}
.barre-outils select{width:auto;min-height:40px;background:var(--surface)}
.filtre-jour{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-weight:600;margin:0 0 12px}
.tableau-conteneur{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow-x:auto}
.tableau{border-collapse:collapse;width:100%;min-width:760px;font-size:14.5px}
.tableau th{text-align:left;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);padding:10px 12px;border-bottom:1px solid var(--border);white-space:nowrap}
.tableau td{padding:10px 12px;border-top:1px solid var(--border);vertical-align:middle}
.tableau tbody tr:first-child td{border-top:0}
.tableau tbody tr:hover td{background:color-mix(in srgb,var(--bg) 55%,transparent)}
.tableau .num{font-variant-numeric:tabular-nums;white-space:nowrap}
.tableau .nom{font-weight:600}
.tableau td small{display:block;font-weight:400;color:var(--ink-soft);font-size:13px;margin-top:3px}
.tableau small.rappel{color:var(--warn)}
.tableau .barre{text-decoration:line-through;color:var(--ink-soft)}
.tableau td small .repete{margin:0 0 0 6px;font-size:12.5px;vertical-align:middle}
.tableau .vide{text-align:center;color:var(--ink-soft);padding:24px}
.tableau tr.conflit td{background:var(--warn-weak)}
.tableau tr.conflit td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
.drapeau{display:flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:var(--warn);margin-top:4px}
.actions-cellule{white-space:nowrap;text-align:right}
.actions-cellule button{margin-left:2px}
.tableau-pied{padding:10px 12px;border-top:1px solid var(--border);font-size:13px;color:var(--ink-soft)}

.champs{display:grid;gap:12px}
.fond-tiroir{position:fixed;inset:0;z-index:30;background:rgba(20,24,28,.35);display:flex;justify-content:flex-end}
body.tiroir-ouvert{overflow:hidden}
.tiroir{width:min(440px,100%);height:100%;background:var(--surface);border-left:1px solid var(--border);box-shadow:-16px 0 40px -20px rgba(0,0,0,.45);padding:18px 20px 0;overflow-y:auto;display:flex;flex-direction:column}
.tiroir-tete{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
.tiroir-tete h3{font-size:19px;font-weight:800}
.tiroir .champs{flex:1}
.tiroir-pied{position:sticky;bottom:0;display:flex;gap:8px;justify-content:flex-end;background:var(--surface);border-top:1px solid var(--border);margin:16px -20px 0;padding:12px 20px}

.titre-section-admin{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:17px;font-weight:800;margin:0 0 12px}
.titre-section-admin span{font:500 13.5px var(--font-body);color:var(--ink-soft)}
.carte-annonce.moderation{grid-template-columns:44px minmax(0,1fr) auto}
@media (max-width:640px){.carte-annonce.moderation{grid-template-columns:44px minmax(0,1fr)}.carte-annonce.moderation .actions-ligne{grid-column:2;justify-content:flex-start}}

.grille-organisateurs{display:grid;gap:20px}
.grille-organisateurs > *{min-width:0}
/* Ajout en bandeau au-dessus du tableau, qui garde toute la largeur. */
@media (min-width:900px){.ajout-organisateur{grid-template-columns:2fr 1.4fr 1.6fr 1.3fr auto;align-items:end}}
.grille-organisateurs .tableau{min-width:760px}
.grille-organisateurs .card{margin:0}
.type-organisateur{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);border-radius:999px;padding:0 4px 0 10px;background:var(--surface)}
.type-organisateur i{width:8px;height:8px;border-radius:50%;background:var(--c);flex-shrink:0}
.type-organisateur select{border:0;min-height:30px;padding:0 4px;background:transparent;font-size:13.5px;width:auto;box-shadow:none}

.encart-succes{border:1px solid var(--t3);background:var(--t3b);border-radius:12px;padding:12px 14px;margin-top:16px}
.encart-succes b{display:flex;align-items:center;gap:6px;color:var(--t3);font-size:14.5px}
.encart-succes p{margin:4px 0 10px;font-size:14px;color:var(--ink)}
.copie{display:flex;gap:6px}
.copie input{flex:1;min-width:0;min-height:36px;font:12.5px ui-monospace,Menlo,monospace;background:var(--surface)}

.ligne-info{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:10px 0;border-top:1px solid var(--border)}
.ligne-info b{display:block;font-weight:600}
.ligne-info span{color:var(--ink-soft);font-size:14px;white-space:pre-line}
.ligne-info .actions-ligne{flex-wrap:nowrap}
.edition-info{padding:12px;margin:8px 0;background:var(--bg);border:1px solid var(--border);border-radius:12px}
.edition-info input,.edition-info textarea{background:var(--surface)}
.aide-repliable{margin:-4px 0 10px;font-size:14px;color:var(--ink-soft)}
.aide-repliable summary{cursor:pointer;font-weight:600;color:var(--accent)}
.aide-repliable p{margin:6px 0 0}
.ligne-voisin{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--border)}
.ligne-voisin b{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-weight:600}
.ligne-voisin small{display:block;color:var(--ink-soft);font-size:12.5px;overflow-wrap:anywhere}
.interrupteur{position:relative;width:40px;height:24px;min-height:0;padding:0;border-radius:999px;background:var(--border);border:0;flex-shrink:0}
.interrupteur::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.interrupteur[aria-checked="true"]{background:var(--t3)}
.interrupteur[aria-checked="true"]::after{transform:translateX(16px)}
.apercu-entete{background:var(--bg);border:1px dashed var(--border);border-radius:12px;padding:12px 14px;display:grid;gap:2px}
.apercu-entete b{font-family:var(--font-display);font-size:18px}
.apercu-entete span{color:var(--ink-soft);font-size:14px}
.legende-apercu{font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);margin-bottom:4px}

.nuancier{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.nuancier button{width:30px;height:30px;min-height:0;padding:0;border-radius:50%;border:2px solid var(--surface);box-shadow:0 0 0 1px var(--border)}
.nuancier button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--ink)}
.nuancier input[type="color"]{width:36px;min-height:0;height:32px;padding:2px;border-radius:8px;cursor:pointer}
.apercu-module{background:var(--bg);border:1px dashed var(--border);border-radius:12px;padding:12px}
.apercu-module iframe{display:block;width:100%;max-width:320px;border:0;margin:0 auto}
.code-module{font:12.5px/1.5 ui-monospace,Menlo,monospace;min-height:110px;background:var(--bg)}
.toast-zone{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:40;width:min(560px,calc(100% - 32px));pointer-events:none}
.toast{pointer-events:auto;background:var(--ink);color:var(--bg);border-radius:12px;padding:12px 16px;font-size:14.5px;box-shadow:0 12px 32px -12px rgba(0,0,0,.45);overflow-wrap:anywhere}
.toast.erreur{background:var(--warn);color:var(--on-accent)}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}
