/*
  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;
  --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;
  }
}

/*
  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;
  --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;
  }
}
/* 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;
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 var(--font-body);padding-block:32px}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
h1,h2,h3{font-family:var(--font-display);text-wrap:balance;margin:0}
a{color:var(--accent)}

header.top{display:flex;align-items:center;gap:16px;margin-bottom:26px;flex-wrap:wrap}
.emblem{width:56px;height:56px;flex-shrink:0}
header.top .titles{flex:1}
header.top .titles h1{font-size:26px;font-weight:600;color:var(--ink)}
header.top .titles p{margin:2px 0 0;color:var(--ink-soft);font-size:13.5px;letter-spacing:.02em}
header.top .credit{font-size:12px;color:var(--ink-soft);white-space:nowrap}
header.top .credit strong{color:var(--accent);font-weight:700}

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

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:22px}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 18px}
.stat .num{font-family:var(--font-display);font-size:30px;font-weight:600;line-height:1.1}
.stat .num.warn{color:var(--warn)}
.stat .lbl{color:var(--ink-soft);font-size:13px;margin-top:4px}

.mois-grille{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:8px}
@media (max-width:620px){.mois-grille{grid-template-columns:repeat(3,1fr)}}
.mois-case{border:1px solid var(--border);border-radius:10px;padding:10px 8px;text-align:center;background:var(--surface)}
.mois-case .nom{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft)}
.mois-case .n{font-family:var(--font-display);font-size:20px;font-weight:600;margin-top:2px}
.mois-case.charge{background:var(--warn-weak);border-color:var(--warn)}
.mois-case.charge .n{color:var(--warn)}

.badge-type{display:inline-flex;align-items:center;gap:5px;background:var(--gold);color:var(--gold-ink);border-radius:999px;padding:3px 10px 3px 8px;font-size:12px;font-weight:600;white-space:nowrap}

/* 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:3px 10px;font-size:11.5px;font-weight:600;white-space:nowrap;margin-left:6px}

/* 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. */
.btn-fb{display:inline-flex;align-items:center;gap:6px;margin-top:10px;background:#1877f2;color:#fff;border:none;border-radius:999px;padding:6px 13px 6px 11px;font:600 12.5px var(--font-body);cursor:pointer;text-decoration:none}
.btn-fb:hover{background:#0f5fc9}
.btn-fb svg{width:14px;height:14px;flex-shrink:0}

.mois-titre{font-size:15px;font-weight:600;color:var(--accent);margin:22px 0 10px}
.mois-titre:first-of-type{margin-top:0}
.evenement-ligne{display:flex;gap:14px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--border)}
.evenement-ligne:first-child{border-top:none}
.evt-date{width:64px;flex-shrink:0;text-align:center}
.evt-date .jour{font-family:var(--font-display);font-size:22px;font-weight:600;line-height:1}
.evt-date .jsem{font-size:11px;color:var(--ink-soft);text-transform:uppercase}
.evt-corps{flex:1;min-width:0}
.evt-nom{font-weight:600;font-size:15px}
.evt-meta{color:var(--ink-soft);font-size:13px;margin-top:2px}
.evt-horaire{font-variant-numeric:tabular-nums}
.evt-collision{display:flex;gap:6px;align-items:flex-start;background:var(--warn-weak);color:var(--warn);border-radius:8px;padding:7px 10px;font-size:13px;margin-top:8px}
.evt-actions{display:flex;gap:6px;flex-shrink:0}

.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}
label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-bottom:5px;text-transform:uppercase;letter-spacing:.03em}
input,select,textarea{width:100%;padding:9px 11px;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--ink);font:14px var(--font-body)}
textarea{resize:vertical;min-height:64px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)}

/* 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}
.heure-minute span{color:var(--ink-soft);font-size:13px}

.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:12px 14px;margin:16px 0;font-size:13.5px}
.alerte-collision.show{display:flex}
.alerte-ok{display:none;gap:10px;align-items:flex-start;background:var(--accent-weak);border:1px solid var(--border);color:var(--ink-soft);border-radius:10px;padding:12px 14px;margin:16px 0;font-size:13.5px}
.alerte-ok.show{display:flex}
.alerte-collision svg,.alerte-ok svg{width:18px;height:18px;flex-shrink:0;margin-top:1px}

button{cursor:pointer;font:600 13.5px var(--font-body);border-radius:8px;padding:9px 16px;border:1px solid var(--border);background:var(--surface);color:var(--ink)}
button.primary{background:var(--accent);color:var(--bg);border-color:var(--accent)}
:root:not([data-theme="light"]) button.primary{color:var(--gold-ink)}
@media (prefers-color-scheme: dark){button.primary{color:var(--gold-ink)}}
button.secondary{background:none}
button.secondary:hover{background:var(--accent-weak)}
button.danger{background:none;border-color:var(--warn);color:var(--warn)}
button.danger:hover{background:var(--warn-weak)}
.bar{display:flex;gap:8px;flex-wrap:wrap}

.mes-evenements .ligne{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--border)}
.mes-evenements .ligne:first-child{border-top:none}

.filtres{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.filtre-chip{background:var(--surface);border:1px solid var(--border);color:var(--ink-soft);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:600;cursor:pointer}
.filtre-chip.active{background:var(--accent);border-color:var(--accent);color:var(--bg)}
@media (prefers-color-scheme:dark){.filtre-chip.active{color:var(--gold-ink)}}

.evt-carte{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 18px;margin-bottom:12px;display:flex;gap:16px;align-items:flex-start}
.evt-carte .evt-date{background:var(--accent-weak);border-radius:10px;padding:8px 4px;width:60px}
.evt-carte .evt-corps p{margin:6px 0 0;color:var(--ink-soft);font-size:13.5px}
/* Carte menant à la page de détail de l'événement (voir index.js) — le
   bouton Facebook à l'intérieur reste cliquable indépendamment (garde-fou
   côté JS sur la cible du clic), donc pas de curseur pointer dessus. */
.evt-carte-cliquable{cursor:pointer}
.evt-carte-cliquable:hover{border-color:var(--accent)}
.evt-carte-cliquable:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.evt-carte-cliquable .btn-fb{cursor:pointer}
.evt-affiche-grande{display:block;max-width:100%;border-radius:12px;margin-top:14px;border:1px solid var(--border)}

.publique-header{margin-bottom:22px}
.publique-header p{color:var(--ink-soft);margin-top:6px}

.vue-toggle{display:flex;gap:8px;margin-bottom:20px}

.cal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.cal-header h3{font-size:17px}
.cal-nav{display:flex;gap:8px}
.cal-nav button{background:var(--surface);border:1px solid var(--border);color:var(--ink);border-radius:8px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;padding:0}
.cal-nav button:hover{border-color:var(--accent)}
.cal-nav button svg{width:16px;height:16px}
.cal-grille{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-entete{text-align:center;font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-soft);padding-bottom:6px}
.cal-jour{position:relative;aspect-ratio:1;border:1px solid var(--border);border-radius:8px;background:var(--surface);display:flex;align-items:center;justify-content:center;cursor:pointer;font:14px var(--font-body);color:var(--ink);padding:0}
.cal-jour:hover{border-color:var(--accent)}
.cal-jour.avec-evt{font-weight:700}
.cal-jour.selectionne{background:var(--accent);color:var(--bg);border-color:var(--accent)}
@media (prefers-color-scheme:dark){.cal-jour.selectionne{color:var(--gold-ink)}}
.cal-point{position:absolute;bottom:4px;width:12px;height:12px;border-radius:50%;background:var(--warn)}
.cal-jour.selectionne .cal-point{background:var(--bg)}
@media (prefers-color-scheme:dark){.cal-jour.selectionne .cal-point{background:var(--gold-ink)}}
.cal-detail{margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}
.cal-detail h4{font-family:var(--font-body);font-size:12.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-soft);font-weight:600;margin:0 0 10px}

/* ---- Bandeau token (admin) ---- */
#token-bar{display:none;gap:8px;flex-wrap:wrap;margin-bottom:20px}
#token-bar input{flex:1;min-width:200px}

/* ---- 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)}

/* ---- Commerces ---- */
.badge-statut.ferme{background:var(--warn-weak);color:var(--warn)}
.commerce-adresse{display:flex;align-items:center;gap:5px}
.commerce-adresse svg{width:14px;height:14px;flex-shrink:0;color:var(--ink-soft)}

/* 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}

/* ---- Affiche/menu joint à un événement ---- */
.evt-affiche{width:56px;height:56px;border-radius:10px;flex-shrink:0;border:1px solid var(--border);background:var(--accent-weak);display:flex;align-items:center;justify-content:center;color:var(--ink-soft);overflow:hidden}
.evt-affiche img{width:100%;height:100%;object-fit:cover}
.upload-zone{border:1px dashed var(--border);border-radius:10px;padding:14px;text-align:center;color:var(--ink-soft);font-size:13px;background:var(--bg)}
.upload-apercu{width:64px;height:64px;object-fit:cover;border-radius:8px;border:1px solid var(--border);margin-top:8px}

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