/* =====================================================================
   Astreinte Vichy — Direction A · « Braise »
   Crème chaud + rouge profond. Hanken Grotesk + JetBrains Mono.
   Refonte fidèle d'après Claude Design.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* — Surfaces — */
  --bg:        #F7F3EC;   /* crème chaud */
  --surface:   #ffffff;
  --bord:      #ECE5DB;
  --track:     #EFE9E0;   /* fonds segmented / steppers */

  /* — Texte — */
  --texte:    #231D1B;
  --texte-2:  #3f3a36;
  --gris:     #8a817b;
  --gris-2:   #a79c90;    /* labels mono, légendes */
  --gris-3:   #c2b9ac;    /* texte désactivé */

  /* — Rouge (brand / alerte) — */
  --rouge:       #B23A2E;
  --rouge-fonce: #8E2C22;
  --rouge-pale:  #FCF4F2;
  --rouge-bord:  #efc9c2;

  /* — Vert (complet / A1) — */
  --vert:        #2E7A57;
  --vert-fonce:  #236147;
  --vert-pale:   #E4F0EA;
  --vert-a1:     #1E8449;

  /* — Or (partiel / WE-fériés) — */
  --or:        #BC8418;
  --or-fonce:  #9a6b12;
  --or-pale:   #F6ECD7;
  --or-pale2:  #FCF6EC;
  --or-bord:   #e3c98f;

  /* — Bleu (A2 / Équipe 1) — */
  --bleu:       #2980B9;
  --bleu-fonce: #1f5f8f;
  --bleu-pale:  #DCEBF6;
  --bleu-bord:  #9cc4e3;

  /* — Violet (D120 / entraide) — */
  --violet:       #8E44AD;
  --violet-fonce: #6c3483;
  --violet-pale:  #ECE0F2;
  --violet-bord:  #c9a8db;

  /* — Orange (Équipe 3) — */
  --orange:     #e67e22;

  /* — Ombres — */
  --shadow-xs: 0 1px 2px rgba(60,30,20,.06);
  --shadow-sm: 0 1px 3px rgba(60,30,20,.08);
  --shadow-md: 0 8px 22px -16px rgba(60,30,20,.45);
  --shadow-lg: 0 14px 34px -18px rgba(60,30,20,.5);
  --shadow-xl: 0 -16px 40px -12px rgba(0,0,0,.3);

  /* — Géométrie — */
  --rayon:    18px;
  --rayon-sm: 12px;
  --rayon-xs: 9px;

  --font: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* ─── Base ─────────────────────────────────────────────────────────── */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--texte);
  background: var(--bg);
  line-height: 1.5;
  padding-bottom: 92px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.is-login {
  background: var(--bg);
  min-height: 100dvh;
  padding-bottom: 0;
}

#app { max-width: 760px; margin: 0 auto; padding: 16px; }
body:not(.is-login) #app { padding-top: 0; }

h1 { font-size: 1.45rem; margin: .2em 0; font-weight: 800; letter-spacing: -.02em; }
h2 { font-size: 1.1rem; font-weight: 800; letter-spacing: -.01em; margin: .3em 0; }
button { font-family: inherit; cursor: pointer; }
.aide { color: var(--gris); font-size: .82rem; line-height: 1.5; }
code { background: var(--track); padding: 2px 6px; border-radius: 5px; font-size: .85em; font-family: var(--mono); }
.ico { display: inline-flex; vertical-align: middle; line-height: 0; flex-shrink: 0; }
.mono { font-family: var(--mono); }

/* Étiquette section (mono, majuscules, gris) */
.h2-section,
.kicker {
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris-2);
  margin: 22px 4px 10px;
}

/* ═══════════════════════════════════════════════════════════════════
   EN-TÊTE (barre blanche sticky)
   ═══════════════════════════════════════════════════════════════════ */
.entete {
  background: var(--surface);
  padding: 11px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--bord);
  margin: 0 -16px 0;
}

.entete-brand { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; }

.brand-icon {
  width: 38px;
  height: 38px;
  background: var(--rouge);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px -3px rgba(178,58,46,.5);
  flex-shrink: 0;
}

.brand-info { display: flex; flex-direction: column; gap: 2px; line-height: 1; }
.brand-nom  { font-family: var(--mono); font-size: .78rem; font-weight: 800; letter-spacing: .12em; color: var(--texte); }
.brand-sous { font-size: .68rem; color: var(--gris); font-weight: 600; }

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #EDE3D6;
  border: 1px solid #e0d6c6;
  color: var(--rouge-fonce);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  font-weight: 700;
  flex-shrink: 0;
  cursor: pointer;
}

/* Bloc titre de page (sans bandeau de marque, pages hors accueil) */
.page-head {
  padding: 18px 0 12px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.page-head-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.page-titre { min-width: 0; }
.page-titre h1 {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0;
  color: var(--texte);
}
.sous-titre { font-size: .82rem; color: var(--gris); margin: 3px 0 0; font-weight: 500; }

/* ═══════════════════════════════════════════════════════════════════
   ACCUEIL
   ═══════════════════════════════════════════════════════════════════ */
.accueil-greeting { padding: 20px 2px 6px; }
.accueil-bvn-h1 {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 5px;
  line-height: 1.1;
  color: var(--texte);
}
.accueil-bvn-sub { font-size: .9rem; color: var(--gris); margin: 0; font-weight: 500; }
.accueil-bvn-sub strong { color: var(--rouge); font-weight: 700; }

/* Carte héro « Prochaine astreinte » */
.prochaine-card {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: 22px;
  padding: 18px;
  box-shadow: var(--shadow-md);
  margin-top: 16px;
}
.prochaine-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.prochaine-label .kick {
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rouge);
}
.prochaine-date {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.01em;
  margin-top: 10px;
  line-height: 1.1;
  color: var(--texte);
}
.prochaine-detail {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
  font-family: var(--mono);
  font-size: .92rem;
  font-weight: 600;
  color: var(--texte-2);
}
.prochaine-card .gros-bouton-login { margin-top: 16px; }

.badge-a-declarer,
.badge-decl-ok {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 5px 11px;
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
}
.badge-a-declarer { background: var(--or-pale); color: var(--or-fonce); }
.badge-a-declarer::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--or); }
.badge-decl-ok { background: var(--vert-pale); color: var(--vert-fonce); }

/* Bande KPI « Ce mois » */
.home-kpi-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 10px; }
.home-kpi {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: 16px;
  padding: 14px 12px;
}
.home-kpi-val { display: block; font-size: 1.6rem; font-weight: 800; line-height: 1; color: var(--texte); }
.home-kpi-val.accent { color: var(--vert); }
.home-kpi-val.home-kpi-vert { color: var(--vert); }
.home-kpi-lbl { display: block; font-size: .7rem; color: var(--gris); font-weight: 600; line-height: 1.25; margin-top: 5px; }

/* Mini-graphe couverture (accueil) */
.acc-cov-card {
  background: var(--surface); border: 1px solid var(--bord);
  border-radius: 18px; padding: 16px 16px 12px; margin-top: 10px;
  box-shadow: var(--shadow-md);
}
.acc-cov-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.acc-cov-titre { font-weight: 800; font-size: .98rem; color: var(--texte); letter-spacing: -.01em; }
.acc-cov-mois { font-family: var(--mono); font-size: .7rem; font-weight: 700; color: var(--gris-2); text-transform: uppercase; letter-spacing: .04em; }
.acc-cov-bars { display: flex; align-items: flex-end; gap: 10px; height: 74px; margin: 14px 0 4px; }
.acc-cov-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.acc-cov-bar-wrap { width: 100%; max-width: 30px; height: 100%; display: flex; align-items: flex-end; background: var(--track); border-radius: 7px; overflow: hidden; }
.acc-cov-bar { width: 100%; border-radius: 7px; min-height: 6px; }
.acc-cov-bar.ok  { background: var(--vert); }
.acc-cov-bar.par { background: var(--or); }
.acc-cov-bar.nok { background: var(--rouge); }
.acc-cov-day { font-family: var(--mono); font-size: .64rem; font-weight: 700; color: var(--gris-2); }
.acc-cov-alerte {
  width: 100%; display: flex; align-items: center; gap: 8px;
  background: var(--rouge-pale); border: 1px solid var(--rouge-bord);
  border-radius: 12px; padding: 9px 12px; margin-top: 10px;
  font-weight: 700; font-size: .82rem; color: var(--rouge-fonce); text-align: left;
}
.acc-cov-alerte span { flex: 1; }
.acc-cov-alerte.ok { background: var(--vert-pale); border-color: var(--vert); color: var(--vert-fonce); }

/* Cartes de navigation (sections) */
.grille-sections { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }

.carte-section {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 16px;
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.carte-section:active { transform: scale(.985); box-shadow: var(--shadow-xs); }

.cs-ico {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cs-declaration .cs-ico { background: var(--rouge-pale); color: var(--rouge); }
.cs-couverture  .cs-ico { background: var(--vert-pale);  color: var(--vert); }
.cs-stats       .cs-ico { background: var(--bleu-pale);  color: var(--bleu-fonce); }
.cs-admin       .cs-ico { background: var(--violet-pale); color: var(--violet-fonce); }

.cs-titre { display: block; font-size: 1rem; font-weight: 700; letter-spacing: -.01em; color: var(--texte); }
.cs-desc  { display: block; font-size: .8rem; color: var(--gris); margin-top: 2px; font-weight: 500; }
.carte-section > div { flex: 1; min-width: 0; }
.cs-chev { color: var(--gris-2); flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════════
   PAGE DE CONNEXION
   ═══════════════════════════════════════════════════════════════════ */
.login-page {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-height: calc(100dvh - 32px);
  justify-content: center;
}
.login-hero { text-align: center; padding: 40px 0 0; }

/* Sélecteur de mois compact (ligne titre de la déclaration) */
.decl-titre-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 8px 0 0;
  gap: 12px;
}
.decl-titre-row h1 { font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; margin: 0; color: var(--texte); }
.decl-mois-select {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: 11px;
  padding: 9px 12px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--texte);
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
}

.login-logo {
  width: 74px;
  height: 74px;
  border-radius: 22px;
  background: var(--rouge);
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 30px -12px rgba(178,58,46,.7);
}
.login-hero h1 {
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .16em;
  color: var(--texte);
  margin: .75em 0 .15em;
  line-height: 1.2;
}
.login-sous {
  color: var(--gris);
  margin: 0;
  font-size: .875rem;
  font-weight: 600;
}

.login-form {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: 20px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 10px 28px -18px rgba(60,30,20,.5);
}

.champ { display: flex; flex-direction: column; gap: 6px; }
.champ label {
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 700;
  color: var(--gris);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.champ input, .champ select {
  width: 100%;
  padding: 13px 15px;
  border: 1.5px solid var(--bord);
  border-radius: var(--rayon-sm);
  font-size: .95rem;
  font-family: inherit;
  color: var(--texte);
  background: #FBF8F3;
  transition: border-color .15s, box-shadow .15s, background .15s;
  font-weight: 500;
}
.champ input:focus, .champ select:focus {
  border-color: var(--rouge);
  outline: none;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(178,58,46,.1);
}
.champ input.readonly { background: var(--track); color: var(--gris); cursor: default; }

/* Champ avec icône intérieure (login) */
.champ-ico { position: relative; }
.champ-ico .ico {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  display: flex; pointer-events: none;
}
.champ-ico input { padding-left: 42px; }
.champ-ico:focus-within .ico svg { stroke: var(--rouge); }

.gros-bouton-login {
  width: 100%;
  height: 52px;
  background: var(--rouge);
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  box-shadow: 0 8px 18px -8px rgba(178,58,46,.7);
  transition: background .15s, transform .1s;
}
.gros-bouton-login:active { background: var(--rouge-fonce); transform: scale(.98); }

.login-hint { text-align: center; font-size: .78rem; color: var(--gris); margin: 0; }
.login-footnotes { margin-top: 22px; display: flex; flex-direction: column; gap: 5px; }
.login-hint-sec { font-size: .72rem; color: var(--gris-2); }

.login-err {
  color: var(--rouge-fonce);
  background: var(--rouge-pale);
  border: 1px solid var(--rouge-bord);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: .85rem;
  font-weight: 600;
}

.login-page .barre-outils button {
  color: var(--gris);
  border-color: var(--bord);
  background: var(--surface);
}
.login-page .barre-outils button:hover { background: var(--track); }

/* ═══════════════════════════════════════════════════════════════════
   NAVIGATION BASSE
   ═══════════════════════════════════════════════════════════════════ */
.nav-bas {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-top: 1px solid var(--bord);
  z-index: 100;
  padding: 10px 8px 0;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 2px 4px 12px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: .69rem;
  font-weight: 600;
  color: var(--gris-2);
  transition: color .12s;
  line-height: 1;
}
.nav-item.actif { color: var(--rouge); font-weight: 700; }
.nav-ico { line-height: 0; display: block; }

/* ═══════════════════════════════════════════════════════════════════
   CHANGER MOT DE PASSE / CARTES FORMULAIRE
   ═══════════════════════════════════════════════════════════════════ */
.changer-mdp {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow-sm);
}
.lien-actions { text-align: center; margin-top: 12px; }
.lien-changer {
  background: none;
  border: none;
  color: var(--rouge);
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
  padding: 9px 16px;
  border-radius: 10px;
  transition: background .12s;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.lien-changer:hover { background: var(--rouge-pale); }

/* ═══════════════════════════════════════════════════════════════════
   ADMINISTRATION
   ═══════════════════════════════════════════════════════════════════ */
.admin-panel { margin-top: 4px; display: flex; flex-direction: column; gap: 14px; }

.btn-primaire {
  background: var(--rouge);
  color: #fff;
  border: none;
  border-radius: 13px;
  padding: 12px 20px;
  font-size: .92rem;
  font-weight: 700;
  cursor: pointer;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 18px -8px rgba(178,58,46,.6);
  transition: background .15s, transform .1s;
}
.btn-primaire:hover { background: var(--rouge-fonce); }
.btn-primaire:active { transform: scale(.97); }

.tableau-admin {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
  background: var(--surface);
  border-radius: var(--rayon);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--bord);
}
.tableau-admin th, .tableau-admin td {
  padding: 11px 9px;
  border-bottom: 1px solid var(--bg);
  text-align: left;
  vertical-align: middle;
}
.tableau-admin th {
  background: #FBF8F3;
  font-family: var(--mono);
  font-size: .64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--gris-2);
}
.tableau-admin tbody tr:last-child td { border-bottom: none; }
.tableau-admin tbody tr:hover td { background: #FBF8F3; }

.col-actions { white-space: nowrap; }
.btn-sm {
  padding: 6px 10px;
  border: 1px solid var(--bord);
  border-radius: 9px;
  background: var(--surface);
  cursor: pointer;
  font-size: .78rem;
  font-weight: 600;
  margin-right: 4px;
  transition: background .12s;
}
.btn-sm:hover { background: var(--track); }
.btn-sm.danger { border-color: var(--rouge-bord); color: var(--rouge); }
.btn-sm.danger:hover { background: var(--rouge-pale); }

.badge-role {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .01em;
}
.role-pompier      { background: var(--vert-pale);   color: var(--vert-fonce); }
.role-chef_equipe  { background: var(--bleu-pale);   color: var(--bleu-fonce); }
.role-chef_section { background: var(--violet-pale); color: var(--violet-fonce); }
.role-admin_local  { background: var(--rouge-pale);  color: var(--rouge-fonce); }
.role-admin        { background: var(--texte);       color: #F7F3EC; }

.badge-mdp-def {
  background: var(--or-pale);
  color: var(--or-fonce);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: .66rem;
  font-weight: 700;
  border: 1px solid var(--or-bord);
}

.user-form {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.user-form h3 { margin: 0 0 16px; font-size: 1rem; font-weight: 800; }

/* ═══════════════════════════════════════════════════════════════════
   SEGMENTED / CHIPS / FILTRES
   ═══════════════════════════════════════════════════════════════════ */
.segmented {
  display: flex;
  gap: 6px;
  background: var(--track);
  border-radius: var(--rayon-sm);
  padding: 4px;
  margin: 12px 0;
}
.segmented button {
  flex: 1;
  border: none;
  border-radius: var(--rayon-xs);
  padding: 9px 4px;
  background: transparent;
  font-size: .82rem;
  font-weight: 700;
  color: var(--gris);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: color .12s;
}
.segmented button.actif {
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(60,30,20,.1);
  color: var(--texte);
}

.chips { display: flex; gap: 7px; flex-wrap: wrap; margin: 12px 0; }
.chip {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--texte-2);
  transition: all .12s;
  cursor: pointer;
}
.chip:hover { border-color: var(--gris-2); }
.chip.actif {
  background: var(--texte);
  color: #fff;
  border-color: var(--texte);
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════
   SÉLECTEUR DE MOIS / LISTE NOMS
   ═══════════════════════════════════════════════════════════════════ */
.select-mois { margin: 12px 0; }
.periode-picker {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 12px 14px;
  box-shadow: var(--shadow-xs);
}
.periode-toggle { display: flex; gap: 8px; margin-bottom: 8px; }

.select-mois select, .creneau-perso select {
  font-size: .9rem;
  padding: 9px 12px;
  border-radius: var(--rayon-sm);
  border: 1px solid var(--bord);
  background: var(--surface);
  font-family: inherit;
  font-weight: 700;
  color: var(--texte);
  transition: border-color .12s;
}
.select-mois select:focus, .creneau-perso select:focus { outline: none; border-color: var(--rouge); }

.liste-noms { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.carte-nom {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--rayon-sm);
  padding: 16px 12px;
  font-size: .92rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .12s;
  box-shadow: var(--shadow-xs);
  text-align: center;
  color: var(--texte);
}
.carte-nom:hover { border-color: var(--rouge); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.carte-nom:active { background: var(--track); transform: scale(.97); }

/* ═══════════════════════════════════════════════════════════════════
   LISTE « MES ASTREINTES » (rangées jour)
   ═══════════════════════════════════════════════════════════════════ */
.progress-card {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: 16px;
  padding: 14px 16px;
  margin: 14px 0;
}
.progress-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 9px;
}
.progress-tete .pg-main { font-size: .9rem; font-weight: 700; color: var(--texte); }
.progress-tete .pg-main b { font-size: 1.2rem; }
.progress-tete .pg-reste { font-size: .76rem; font-weight: 700; color: var(--or-fonce); }
.progress-bar { height: 9px; border-radius: 6px; background: var(--track); overflow: hidden; }
.progress-fill { height: 100%; background: var(--vert); border-radius: 6px; transition: width .5s cubic-bezier(.4,0,.2,1); }

.jour-liste { display: flex; flex-direction: column; gap: 10px; }
.jour-row {
  display: flex;
  align-items: center;
  gap: 13px;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: 16px;
  padding: 13px 14px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: transform .1s, box-shadow .12s;
}
.jour-row:active { transform: scale(.99); }
.jour-row.prochaine {
  background: var(--rouge-pale);
  border: 1.5px solid var(--rouge);
  box-shadow: 0 8px 18px -14px rgba(178,58,46,.6);
}
.jour-date { width: 44px; text-align: center; flex: none; }
.jour-dow { font-family: var(--mono); font-size: .62rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--gris); }
.jour-row.prochaine .jour-dow { color: var(--rouge); }
.jour-dow.we { color: var(--or); }
.jour-num { font-size: 1.35rem; font-weight: 800; line-height: 1; color: var(--texte); margin-top: 2px; }
.jour-dow.we + .jour-num { color: var(--or); }
.jour-mid { flex: 1; min-width: 0; }
.jour-titre { display: flex; align-items: center; gap: 7px; font-size: .88rem; font-weight: 700; color: var(--texte); flex-wrap: wrap; }
.jour-horaire { font-family: var(--mono); font-size: .78rem; color: var(--gris); margin-top: 3px; font-weight: 500; }
.jour-end { display: flex; align-items: center; gap: 6px; flex: none; }

.tag-prochaine {
  font-family: var(--mono); font-size: .56rem; font-weight: 700; letter-spacing: .1em;
  color: #fff; background: var(--rouge); border-radius: 4px; padding: 2px 6px;
}
.tag-we {
  font-family: var(--mono); font-size: .56rem; font-weight: 700; letter-spacing: .06em;
  color: var(--or-fonce); background: var(--or-pale); border-radius: 4px; padding: 2px 5px;
}
.badge-mod {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: 999px; padding: 5px 10px; font-size: .74rem; font-weight: 700; white-space: nowrap;
}
.badge-mod.a1 { background: var(--vert-pale); color: var(--vert-fonce); }
.badge-mod.a2 { background: var(--bleu-pale); color: var(--bleu-fonce); }
.badge-mod.d120 { background: var(--violet-pale); color: var(--violet-fonce); }
.badge-mod.indispo { background: var(--track); color: var(--gris); }

/* ═══════════════════════════════════════════════════════════════════
   BANNIÈRE INFO / ALERTE
   ═══════════════════════════════════════════════════════════════════ */
.banniere {
  display: flex;
  align-items: center;
  gap: 11px;
  border-radius: 14px;
  padding: 12px 14px;
  margin: 14px 0;
  font-size: .82rem;
  line-height: 1.4;
  font-weight: 600;
}
.banniere svg { flex: none; }
.banniere.alerte { background: var(--rouge-pale); border: 1px solid var(--rouge-bord); color: var(--rouge-fonce); }
.banniere.info   { background: var(--violet-pale); border: 1px solid var(--violet-bord); color: var(--violet-fonce); }
.banniere b { font-weight: 800; }

/* ═══════════════════════════════════════════════════════════════════
   CALENDRIER
   ═══════════════════════════════════════════════════════════════════ */
.cal-scroll { margin: 12px 0; }
.calendrier {
  width: 100%;
  border-collapse: separate;
  border-spacing: 5px;
}
.calendrier thead th {
  text-align: center;
  font-family: var(--mono);
  font-size: .62rem;
  font-weight: 700;
  color: var(--gris-2);
  padding: 2px;
}
.calendrier thead th.we { color: #c89a4a; }
.calendrier tbody td { padding: 0; vertical-align: top; }
.cal-vide { background: transparent; }

.cel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  width: 100%;
  min-height: 52px;
  padding: 6px 2px 5px;
  border-radius: 9px;
  border: 1px solid var(--bord);
  background: var(--surface);
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  line-height: 1.1;
  transition: transform .08s;
  position: relative;
}
.cel:active { transform: scale(.92); }

.cel-num { font-weight: 800; font-size: .82rem; color: var(--gris-3); }
.cel-we .cel-num { color: var(--or); }
.cel-dot      { width: 5px; height: 5px; border-radius: 50%; background: var(--bleu); opacity: .7; }
.cel-dot-vide { width: 5px; height: 5px; }
.cel-mod      { font-family: var(--mono); font-size: .56rem; font-weight: 700; color: #fff; border-radius: 4px; padding: 1px 5px; }
.cel-mod-x    { background: var(--gris-2) !important; }
.cel-nd       { font-size: .62rem; font-weight: 800; color: var(--or-fonce); }
.cel-fermes   { font-family: var(--mono); font-size: .58rem; font-weight: 700; line-height: 1.2; }
.cel-decl     { font-family: var(--mono); font-size: .56rem; color: var(--gris-2); }
.cel-eq-badge { font-family: var(--mono); font-size: .54rem; font-weight: 700; color: #fff; border-radius: 4px; padding: 1px 4px; }

/* État déclaration (perso) */
.cel-propre-nd { background: var(--or-pale2); border: 1.5px solid var(--or-bord); }
.cel-propre-nd .cel-num { color: var(--texte); }
.cel-a1        { background: var(--vert-pale); border: 1.5px solid var(--vert); }
.cel-a1 .cel-num { color: var(--texte); }
.cel-a1 .cel-mod { background: var(--vert-a1); }
.cel-a2        { background: var(--vert-pale); border: 1.5px solid var(--vert); }
.cel-a2 .cel-num { color: var(--texte); }
.cel-a2 .cel-mod { background: var(--bleu); }
.cel-d120      { background: var(--violet-pale); border: 1.5px solid var(--violet-bord); }
.cel-d120 .cel-num { color: var(--texte); }
.cel-d120 .cel-mod { background: var(--violet); }
.cel-indispo   { background: var(--track); border: 1px solid var(--bord); }
.cel-libre     { background: var(--surface); border: 1px solid var(--bord); }

/* État couverture (chefferie) */
.cel-cov-ok      { background: var(--vert-pale); border: 1.5px solid var(--vert); }
.cel-cov-ok .cel-num,
.cel-cov-ok .cel-fermes { color: var(--vert-fonce); }
.cel-cov-partiel { background: var(--or-pale); border: 1.5px solid var(--or); }
.cel-cov-partiel .cel-num,
.cel-cov-partiel .cel-fermes { color: var(--or-fonce); }
.cel-cov-nok     { background: #F6E8E4; border: 1.5px solid var(--rouge); }
.cel-cov-nok .cel-num,
.cel-cov-nok .cel-fermes { color: var(--rouge-fonce); }
.cel-cov-vide    { background: var(--surface); border: 1.5px solid #e8e1d6; }
.cel-cov-vide .cel-num, .cel-cov-vide .cel-fermes { color: var(--gris-3); }
.cel-gris        { background: var(--surface); border: 1px dashed var(--bord); opacity: .5; cursor: default; }
.cel-we-marker::after {
  content: ''; position: absolute; top: 3px; right: 3px;
  width: 5px; height: 5px; border-radius: 50%; background: #e08a1e;
}

@keyframes celFlash {
  0%   { box-shadow: 0 0 0 3px var(--vert), 0 0 0 7px rgba(46,122,87,.22); }
  70%  { box-shadow: 0 0 0 3px var(--vert), 0 0 0 7px rgba(46,122,87,.04); }
  100% { box-shadow: none; }
}
.cel-flash { animation: celFlash 1.4s ease-out; }

.cal-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 13px;
  font-size: .72rem;
  color: var(--texte-2);
  margin: 14px 0 6px;
}
.cleg-item { display: flex; align-items: center; gap: 5px; font-weight: 600; }
.cleg { display: inline-block; width: 11px; height: 11px; border-radius: 3px; border: 1.5px solid currentColor; flex-shrink: 0; }
.cleg.cel-propre-nd  { background: var(--or-pale2); border-color: var(--or-bord); }
.cleg.cel-a2         { background: var(--vert-pale); border-color: var(--vert); }
.cleg.cel-d120       { background: var(--violet-pale); border-color: var(--violet-bord); }
.cleg.cel-indispo    { background: var(--track); border-color: var(--bord); }
.cleg.cel-libre      { background: var(--surface); border-color: var(--bord); }
.cleg.cel-cov-ok     { background: var(--vert-pale); border-color: var(--vert); }
.cleg.cel-cov-partiel{ background: var(--or-pale); border-color: var(--or); }
.cleg.cel-cov-nok    { background: #F6E8E4; border-color: var(--rouge); }
.cleg.cel-cov-vide   { background: var(--surface); border-color: #e8e1d6; }
.cleg-dot { width: 7px; height: 7px; border-radius: 50%; background: #e08a1e; }

/* ─── Vue calendrier déclaration (cellules code couleur) ─────────────── */
.cel-dc-decl     { background: var(--vert-pale);   border: 1.5px solid var(--vert); }
.cel-dc-decl .cel-num { color: var(--texte); }
.cel-dc-adecl    { background: var(--or-pale2);    border: 1.5px solid var(--or-bord); }
.cel-dc-adecl .cel-num { color: var(--texte); }
.cel-dc-entraide { background: var(--violet-pale); border: 1.5px solid var(--violet-bord); }
.cel-dc-entraide .cel-num { color: var(--texte); }
.cel-dc-indispo  { background: var(--track);       border: 1px solid var(--bord); }
.cel-dc-autre    { background: var(--surface);     border: 1px solid var(--bord); }
.cel-dc-autre .cel-num { color: var(--gris-3); }
.cel-dc-renfort  { box-shadow: 0 0 0 2px var(--rouge-bord) inset; }
.cleg.cel-dc-decl     { background: var(--vert-pale);   border-color: var(--vert); }
.cleg.cel-dc-adecl    { background: var(--or-pale2);    border-color: var(--or-bord); }
.cleg.cel-dc-entraide { background: var(--violet-pale); border-color: var(--violet-bord); }
.cleg.cel-dc-autre    { background: var(--surface);     border-color: var(--bord); }

/* ─── Onglet Entraide : bandeau + demandes de renfort ────────────────── */
.entraide-banner {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--rouge-pale); border: 1px solid var(--rouge-bord);
  border-radius: 14px; padding: 12px 14px; margin: 12px 0 4px;
  font-size: .82rem; color: var(--texte-2); line-height: 1.45;
}
.entraide-banner .ico { flex-shrink: 0; margin-top: 1px; }
.entraide-banner b { color: var(--rouge-fonce); }

.renfort-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--bord);
  border-radius: 16px; padding: 11px 14px;
}
.renfort-row.urgent { border-color: var(--rouge-bord); background: var(--rouge-pale); }
.renfort-row.complet { opacity: .68; }
.renfort-tete { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: .92rem; color: var(--texte); }
.renfort-statut { margin-top: 3px; font-size: .78rem; }
.renfort-manque { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--or-fonce); }
.renfort-manque.urgent { color: var(--rouge); }
.renfort-complet { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--vert-fonce); }
.renfort-btn {
  border: 1.5px solid var(--rouge); background: var(--surface); color: var(--rouge);
  font-weight: 700; font-size: .82rem; border-radius: 11px; padding: 8px 14px; white-space: nowrap;
}
.renfort-btn.urgent { background: var(--rouge); color: #fff; box-shadow: 0 6px 14px -8px rgba(178,58,46,.7); }
.renfort-btn.ok { border-color: var(--vert); color: var(--vert-fonce); }
.renfort-btn:active { transform: scale(.96); }

/* Bloc action chef dans le détail jour */
.renfort-action { margin-top: 14px; }
.btn-renfort-demande {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px;
  border: 1.5px solid var(--rouge); background: var(--surface); color: var(--rouge);
  font-weight: 700; font-size: .92rem; border-radius: 13px; padding: 12px 14px;
}
.btn-renfort-demande.actif { border-color: var(--vert); color: var(--vert-fonce); background: var(--vert-pale); }
.btn-renfort-demande:active { transform: scale(.98); }

/* ═══════════════════════════════════════════════════════════════════
   SYNTHÈSE MENSUELLE
   ═══════════════════════════════════════════════════════════════════ */
.synthese {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  margin: 12px 0;
}
.synthese.ok     { background: var(--surface); border: 1px solid var(--bord); }
.synthese.alerte { background: var(--rouge-pale); border: 1px solid var(--rouge-bord); }
.syn-gros { font-size: 1.7rem; font-weight: 800; line-height: 1; }
.synthese.ok .syn-gros     { color: var(--texte); }
.synthese.alerte .syn-gros { color: var(--rouge-fonce); }
.syn-txt { font-size: .82rem; font-weight: 600; line-height: 1.4; }
.synthese.ok .syn-txt     { color: var(--gris); }
.synthese.alerte .syn-txt { color: var(--rouge); }

/* deux tuiles de synthèse côte-à-côte */
.syn-duo { display: flex; gap: 10px; margin: 12px 0; }
.syn-tuile {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: 14px;
  padding: 13px 14px;
}
.syn-tuile.alerte { background: var(--rouge-pale); border-color: var(--rouge-bord); }
.syn-tuile-val { font-size: 1.65rem; font-weight: 800; line-height: 1; color: var(--texte); display: flex; align-items: center; gap: 6px; }
.syn-tuile.alerte .syn-tuile-val { color: var(--rouge-fonce); }
.syn-tuile-val small { font-size: 1rem; color: var(--gris); font-weight: 700; }
.syn-tuile-lbl { font-size: .72rem; font-weight: 600; color: var(--gris); margin-top: 4px; }
.syn-tuile.alerte .syn-tuile-lbl { color: var(--rouge); }

/* ═══════════════════════════════════════════════════════════════════
   MODALS / BOTTOM SHEET
   ═══════════════════════════════════════════════════════════════════ */
#modal-zone:empty { display: none; }

.modal-fond {
  position: fixed;
  inset: 0;
  background: rgba(35,25,20,.42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 200;
  animation: fadeInBg .18s ease;
}
@keyframes fadeInBg { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: #FBF8F3;
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  overflow-y: auto;
  border-radius: 28px 28px 0 0;
  padding: 0 20px 28px;
  box-shadow: var(--shadow-xl);
  animation: slideUpModal .28s cubic-bezier(.32,.72,0,1);
}
@keyframes slideUpModal {
  from { transform: translateY(48px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.modal::before {
  content: '';
  display: block;
  width: 38px;
  height: 4px;
  background: #ddd5c8;
  border-radius: 3px;
  margin: 12px auto 14px;
}
.modal h2 { margin-top: 2px; margin-bottom: 6px; font-size: 1.35rem; letter-spacing: -.02em; }

.modal-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.modal-sous { display: flex; align-items: center; gap: 7px; font-size: .82rem; color: var(--gris); font-weight: 600; margin-top: 2px; }
.modal-close {
  width: 34px; height: 34px; border-radius: 50%; border: none;
  background: var(--track); display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex: none; color: var(--texte-2);
}

.info-we {
  background: var(--surface);
  border-radius: var(--rayon-sm);
  padding: 10px 14px;
  font-size: .85rem;
  border: 1px solid var(--bord);
}

.presents-bloc { margin-top: 14px; font-size: .88rem; }
.pompier-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.pompier-chip {
  background: var(--bleu-pale);
  border: 1px solid var(--bleu-bord);
  color: var(--bleu-fonce);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: .78rem;
  font-weight: 600;
}
.pompier-chip.a1 { background: var(--vert-pale); border-color: #9ccdb3; color: var(--vert-fonce); }
.pompier-chip.aide { background: var(--violet-pale); border-color: var(--violet-bord); color: var(--violet-fonce); }

.decl-item { padding: 9px 0; border-bottom: 1px solid var(--bord); font-size: .85rem; }
.decl-item:last-child { border-bottom: none; }

.fenetre { margin-top: 14px; }
.fen-tete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .88rem;
  font-weight: 700;
  margin-bottom: 6px;
}
.fen-min { font-size: .8rem; font-weight: 600; color: var(--gris); }
.fen-min b { font-size: 1rem; font-family: var(--mono); }
.fenetre.nok .fen-min b { color: var(--rouge); }
.fenetre.ok  .fen-min b { color: var(--vert); }

.barre {
  display: flex;
  height: 22px;
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid var(--bord);
  gap: 1px;
  background: var(--bord);
}
.tick { flex: 1; }
.tick.plein   { background: var(--vert); }
.tick.partiel { background: var(--or); }
.tick.vide    { background: #e9897e; }
.fen-detail { font-family: var(--mono); font-size: .76rem; color: var(--gris); margin-top: 5px; }
.trous { color: var(--rouge); font-weight: 700; }

.bloc-statut { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.gros-bouton {
  padding: 15px 10px;
  border-radius: 14px;
  border: 1.5px solid var(--bord);
  background: var(--surface);
  font-size: .92rem;
  font-weight: 700;
  transition: all .12s;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--texte);
}
.gros-bouton:hover { border-color: var(--gris-2); }
.gros-bouton.dispo.on   { background: var(--vert-pale); border-color: var(--vert); color: var(--vert-fonce); }
.gros-bouton.indispo.on { background: var(--track); border-color: var(--gris-2); color: var(--gris); }

.masque { display: none !important; }

fieldset {
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  margin: 14px 0;
  padding: 14px;
  background: var(--surface);
}
legend { font-weight: 800; padding: 0 8px; font-size: .9rem; }

.presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.preset {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: 999px;
  padding: 9px 13px;
  font-size: .8rem;
  font-weight: 600;
  transition: all .12s;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--texte-2);
}
.preset:hover { border-color: var(--rouge); color: var(--rouge); }
.preset:active { background: var(--rouge); color: #fff; border-color: var(--rouge); transform: scale(.96); }

.creneau-perso { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.creneau-perso label { display: flex; gap: 6px; align-items: center; }
.modalites { display: grid; gap: 8px; margin-top: 12px; }
.mod {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--bord);
  border-radius: var(--rayon-sm);
  font-size: .9rem;
  cursor: pointer;
  transition: border-color .12s;
  background: var(--surface);
}
.mod:hover { border-color: var(--gris-2); }
.mod input { width: 18px; height: 18px; accent-color: var(--rouge); }

.seg-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 11px 0;
  border-bottom: 1px solid var(--bord);
}
.seg-lbl { display: flex; gap: 5px; align-items: center; font-size: .85rem; font-weight: 600; }
.seg-lbl select {
  font-size: .85rem;
  padding: 8px 10px;
  border-radius: 9px;
  border: 1px solid var(--bord);
  background: var(--surface);
  font-weight: 600;
  font-family: inherit;
}
.seg-mod {
  font-size: .82rem;
  padding: 8px 10px;
  border-radius: 9px;
  border: 1px solid var(--bord);
  background: var(--surface);
  flex: 1;
  min-width: 80px;
  font-family: inherit;
}
.seg-del { margin-left: auto; flex-shrink: 0; }
.seg-vide {
  color: var(--gris);
  font-size: .85rem;
  margin: 8px 0;
  text-align: center;
  padding: 18px;
  border: 1.5px dashed var(--bord);
  border-radius: var(--rayon-sm);
}
.btn-ajouter-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 12px;
  padding: 12px;
  border: 1.5px dashed #d8cdbd;
  border-radius: 13px;
  background: transparent;
  color: var(--gris);
  font-size: .86rem;
  font-weight: 700;
  transition: all .12s;
  cursor: pointer;
}
.btn-ajouter-seg:hover { border-color: var(--rouge); color: var(--rouge); background: var(--rouge-pale); }

.modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.modal-actions button {
  flex: 1;
  height: 52px;
  border-radius: 14px;
  font-size: .95rem;
  font-weight: 700;
  border: none;
  transition: all .12s;
}
.modal-actions .annuler { background: transparent; border: 1.5px solid var(--bord); color: var(--rouge); }
.modal-actions .annuler:hover { background: var(--rouge-pale); }
.modal-actions .valider { background: var(--texte); color: #fff; }
.modal-actions .valider:hover { background: #000; }

/* ─── Bottom sheet éditeur de disponibilité (frame 2B) ───────────────── */
.sheet {
  background: #FBF8F3;
  width: 100%;
  max-width: 560px;
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  border-radius: 28px 28px 0 0;
  box-shadow: var(--shadow-xl);
  animation: slideUpModal .28s cubic-bezier(.32,.72,0,1);
  overflow: hidden;
}
.sheet-handle { width: 38px; height: 4px; background: #ddd5c8; border-radius: 3px; margin: 12px auto 6px; flex: none; }
.sheet-tete {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 8px 20px 12px; flex: none;
}
.sheet-titres h2 { margin: 0; font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; }
.sheet-sous { margin: 4px 0 0; font-size: .8rem; color: var(--gris); font-weight: 600; }
.sheet-close {
  width: 34px; height: 34px; border-radius: 50%; border: none; flex: none;
  background: var(--track); display: flex; align-items: center; justify-content: center;
  color: var(--texte-2); cursor: pointer;
}
.sheet-body { overflow-y: auto; padding: 0 20px 8px; flex: 1; }
.sheet-actions {
  flex: none; display: flex; flex-direction: column; gap: 10px;
  padding: 14px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--bord); background: #FBF8F3;
}
.btn-sheet-save {
  width: 100%; height: 54px; border: none; border-radius: 15px;
  background: var(--texte); color: #fff; font-size: 1rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  box-shadow: 0 8px 18px -10px rgba(35,29,27,.8); cursor: pointer;
}
.btn-sheet-save:active { background: #000; transform: scale(.99); }
.btn-sheet-indispo {
  width: 100%; height: 46px; border: 1.5px solid var(--rouge-bord); border-radius: 14px;
  background: transparent; color: var(--rouge); font-size: .9rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
}
.btn-sheet-indispo:active { background: var(--rouge-pale); }

/* Cartes créneau (steppers + pills A1/A2/D120) */
.seg-card {
  background: var(--surface); border: 1px solid var(--bord);
  border-radius: 16px; padding: 12px 14px; margin-bottom: 10px;
}
.seg-card-tete { display: flex; align-items: center; justify-content: space-between; }
.seg-card-type { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: .9rem; color: var(--texte); }
.seg-card .seg-del { width: 30px; height: 30px; border: none; background: var(--track); border-radius: 9px; color: var(--rouge); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.seg-steppers { display: flex; align-items: center; gap: 10px; margin: 12px 0; }
.seg-stepper {
  display: flex; align-items: center; gap: 4px; flex: 1;
  background: var(--bg); border: 1px solid var(--bord); border-radius: 12px; padding: 4px;
}
.seg-stepper button {
  width: 34px; height: 34px; border: none; border-radius: 9px;
  background: var(--surface); box-shadow: var(--shadow-xs); color: var(--texte-2);
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none;
}
.seg-stepper button:active { transform: scale(.92); }
.seg-time { flex: 1; text-align: center; font-family: var(--mono); font-size: 1rem; font-weight: 700; color: var(--texte); letter-spacing: .02em; }
.seg-arrow { display: inline-flex; flex: none; }
.seg-pills { display: flex; gap: 8px; }
.seg-pill {
  flex: 1; padding: 9px 0; border: 1.5px solid var(--bord); border-radius: 11px;
  background: var(--surface); color: var(--gris); font-family: var(--mono);
  font-size: .82rem; font-weight: 700; cursor: pointer; transition: all .12s;
}
.seg-pill.on.a1   { background: var(--vert-a1); border-color: var(--vert-a1); color: #fff; }
.seg-pill.on.a2   { background: var(--bleu);    border-color: var(--bleu);    color: #fff; }
.seg-pill.on.d120 { background: var(--violet);  border-color: var(--violet);  color: #fff; }
.seg-pill:active { transform: scale(.96); }

.seg-info {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 14px;
  background: var(--or-pale2); border: 1px solid var(--or-bord); border-radius: 12px;
  padding: 11px 13px; font-size: .78rem; color: var(--texte-2); line-height: 1.45;
}
.seg-info .ico { flex: none; margin-top: 1px; }

/* ═══════════════════════════════════════════════════════════════════
   STATISTIQUES
   ═══════════════════════════════════════════════════════════════════ */
.kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.kpi-card {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: 16px;
  padding: 14px;
  box-shadow: var(--shadow-xs);
}
.kpi-card.alerte { background: var(--rouge-pale); border-color: var(--rouge-bord); }
.kpi-val { font-size: 1.75rem; font-weight: 800; color: var(--texte); line-height: 1; }
.kpi-card.alerte .kpi-val { color: var(--rouge-fonce); }
.kpi-card.accent .kpi-val { color: var(--violet-fonce); }
.kpi-sur { font-size: 1rem; font-weight: 700; color: var(--gris); }
.kpi-lbl { font-size: .72rem; color: var(--gris); margin-top: 5px; font-weight: 600; }
.kpi-card.alerte .kpi-lbl { color: var(--rouge); }

.soli-bloc {
  background: #F6F0F8;
  border: 1px solid var(--violet-bord);
  border-radius: 16px;
  padding: 14px 16px;
  margin: 16px 0;
}
.soli-titre { font-weight: 800; font-size: .9rem; margin-bottom: 12px; color: var(--violet-fonce); display: flex; align-items: center; gap: 8px; }
.soli-row { display: flex; align-items: center; gap: 11px; margin-bottom: 9px; }
.soli-row:last-child { margin-bottom: 0; }
.soli-nom { font-size: .78rem; font-weight: 700; color: var(--texte); width: 88px; flex: none; }
.soli-nom small { color: var(--gris-2); font-weight: 600; }
.soli-bar { flex: 1; height: 9px; background: #E8DAEF; border-radius: 5px; overflow: hidden; }
.soli-fill { height: 100%; background: var(--violet); border-radius: 5px; transition: width .6s cubic-bezier(.4,0,.2,1); }
.soli-val { font-family: var(--mono); font-size: 1.05rem; font-weight: 700; color: var(--violet-fonce); flex: none; min-width: 46px; }

.tableau-wrap {
  overflow-x: auto;
  margin: 10px 0;
  border-radius: var(--rayon);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--bord);
}
.tableau-stats {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
  background: var(--surface);
}
.tableau-stats th, .tableau-stats td {
  padding: 11px 10px;
  text-align: left;
  border-bottom: 1px solid var(--bg);
  white-space: nowrap;
}
.tableau-stats th {
  background: #FBF8F3;
  font-family: var(--mono);
  font-size: .64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--gris-2);
}
.tableau-stats tbody tr:last-child td { border-bottom: none; }

.nom-cell { display: flex; flex-direction: column; }
.nom-prenom  { font-weight: 700; font-size: .88rem; }
.nom-famille { font-size: .74rem; color: var(--gris); }

.badge-eq-dot { display: inline-block; font-family: var(--mono); font-size: .64rem; font-weight: 700; color: #fff; border-radius: 5px; padding: 2px 6px; }

.bar-cell { height: 5px; background: var(--track); border-radius: 999px; overflow: hidden; margin-bottom: 4px; min-width: 60px; }
.bar-inner { height: 100%; background: var(--rouge); border-radius: 999px; }
.bar-val { font-family: var(--mono); font-size: .82rem; font-weight: 700; }

.eq-cards { display: grid; gap: 9px; }
.eq-card {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-left: 4px solid var(--bord);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.eq-nom { font-weight: 700; font-size: .9rem; color: var(--texte); }
.eq-kpis { display: flex; gap: 16px; text-align: center; }
.eq-kpis > div b { display: block; font-size: 1rem; font-weight: 800; color: var(--texte); }
.eq-kpis > div.aide-col b { color: var(--violet-fonce); }
.eq-kpis small { font-size: .6rem; color: var(--gris-2); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════
   BARRE D'OUTILS
   ═══════════════════════════════════════════════════════════════════ */
.barre-outils { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 12px 0; }
.barre-outils button {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--rayon-sm);
  padding: 9px 14px;
  font-size: .82rem;
  font-weight: 600;
  transition: all .12s;
  box-shadow: var(--shadow-xs);
  color: var(--texte-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.barre-outils button:hover { background: #FBF8F3; border-color: var(--gris-2); }
.barre-outils .danger { color: var(--rouge); border-color: var(--rouge-bord); }
.barre-outils .danger:hover { background: var(--rouge-pale); }

/* ═══════════════════════════════════════════════════════════════════
   PROXY PICKER
   ═══════════════════════════════════════════════════════════════════ */
.proxy-picker {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 12px 16px;
  margin: 12px 0;
  box-shadow: var(--shadow-xs);
}

/* ═══════════════════════════════════════════════════════════════════
   PROFIL POMPIER
   ═══════════════════════════════════════════════════════════════════ */
.profil-decls { max-height: 40vh; overflow-y: auto; margin: 10px 0; }
.profil-cats { width: 100%; border-collapse: collapse; margin: 10px 0 4px; font-size: 0.85em; }
.profil-cats th {
  text-align: left;
  padding: 6px 8px;
  color: var(--gris-2);
  font-weight: 700;
  border-bottom: 2px solid var(--bord);
  font-family: var(--mono);
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.profil-cats td { padding: 7px 8px; border-bottom: 1px solid var(--bg); }
.profil-cats td:nth-child(2) { text-align: right; white-space: nowrap; line-height: 1.6; }
.profil-cats td:nth-child(3) { text-align: right; white-space: nowrap; font-size: .9em; font-family: var(--mono); }
.profil-cats td:nth-child(4) { text-align: right; white-space: nowrap; font-size: .9em; font-family: var(--mono); }
.cat-dispo { font-size: .8em; color: var(--gris); display: block; }
.decl-indispo { opacity: .6; }
.stats-row { cursor: pointer; }
.stats-row:hover td { background: #FBF8F3; }
.stat-danger { color: var(--rouge); font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════
   GANTT chronologie nuit / jour
   ═══════════════════════════════════════════════════════════════════ */
.gantt-toggle { display: flex; gap: 8px; margin: 14px 0 6px; }
.gantt-titre { font-size: .85rem; margin: 16px 0 4px; color: var(--gris); font-weight: 700; }
.gantt {
  margin: 12px 0;
  font-size: .78rem;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: 16px;
  padding: 14px 12px 12px;
}
.g-axis { display: flex; align-items: flex-end; margin-bottom: 8px; }
.g-axis-spacer { width: 66px; min-width: 66px; flex-shrink: 0; }
.g-axis-labels { position: relative; flex: 1; height: 14px; }
.g-lbl { position: absolute; transform: translateX(-50%); color: var(--gris-2); font-family: var(--mono); font-size: .58rem; white-space: nowrap; font-weight: 600; }
.g-row { display: flex; align-items: center; margin-bottom: 6px; }
.g-nom {
  width: 66px; min-width: 66px;
  font-size: .68rem; line-height: 1.1;
  padding-right: 6px; text-align: right;
  overflow: hidden; flex-shrink: 0; font-weight: 600; color: var(--texte-2);
}
.g-nom small { color: var(--gris-2); }
.g-ext-nom { color: var(--violet); }
.g-eq-tag {
  display: inline-block; font-family: var(--mono); font-size: .5rem; font-weight: 700; color: #fff;
  background: var(--violet); border-radius: 3px; padding: 1px 3px; margin-left: 2px; vertical-align: middle;
}
.g-track {
  position: relative; flex: 1; height: 20px;
  background: #F4F0E9; border-radius: 10px; overflow: hidden;
}
.g-bar { position: absolute; top: 3px; height: 14px; border-radius: 999px; }
.g-bar.a1 { background: var(--vert-a1); }
.g-bar.a2 { background: var(--bleu); }
.g-bar.d120 { background: var(--violet); }
.g-ext { opacity: .6; outline: 1.5px dashed var(--violet); outline-offset: -1px; }
.g-counts-track { height: 22px; background: transparent; overflow: visible; }
.g-cnt {
  position: absolute; top: 0; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: .64rem; font-weight: 700; border-radius: 4px; border-left: 2px solid #fff;
  font-family: var(--font);
}
.g-cnt-ok  { background: #D9EEE3; color: var(--vert-fonce); }
.g-cnt-par { background: var(--or-pale); color: var(--or-fonce); }
.g-cnt-nok { background: #FADBD7; color: var(--rouge-fonce); }
.g-cnt-lbl { font-family: var(--mono); font-size: .58rem; color: var(--gris-2); }

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 400px) {
  .kpi-grid { grid-template-columns: 1fr 1fr 1fr 1fr; }
}
@media (min-width: 560px) {
  .modal-fond { align-items: center; }
  .modal { border-radius: 28px; }
  .liste-noms { grid-template-columns: 1fr 1fr 1fr; }
  .eq-cards { grid-template-columns: 1fr; }
}

/* ===== Éditeur de roulement d'astreinte ===== */
.rl-slot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.rl-slot select { flex: 1; min-width: 0; }
.rl-jours { width: 62px !important; min-width: 0 !important; flex: none !important; text-align: center; }

/* ===== Barre de sélection de caserne ===== */
.caserne-bar {
  display: flex;
  gap: 6px;
  padding: 8px 16px 6px;
  background: var(--bg);
  border-bottom: 1px solid var(--bord);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.caserne-bar::-webkit-scrollbar { display: none; }
.caserne-chip {
  flex-shrink: 0;
  padding: 5px 16px;
  border-radius: 20px;
  font-size: .8rem;
  font-weight: 700;
  font-family: var(--mono);
  letter-spacing: .04em;
  cursor: pointer;
  border: 1.5px solid var(--bord);
  background: var(--surface);
  color: var(--gris);
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.caserne-chip.actif {
  background: var(--rouge);
  border-color: var(--rouge);
  color: #fff;
}
.caserne-chip:not(.actif):hover { border-color: var(--rouge); color: var(--rouge); }

/* ===== Sélecteur de caserne (header — conservé pour compatibilité) ===== */
.brand-sous .centre-switch {
  background: transparent;
  border: none;
  color: var(--gris);
  font-size: inherit;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
}
.brand-sous .centre-switch option { color: #1a1a1a; background: #fff; }

/* ===== Barre d'ajout d'affectation ===== */
.aff-add-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
  flex-wrap: wrap;
}
.aff-add-bar select,
.aff-add-bar input[type="text"] { flex: 1; min-width: 0; }

/* ===== Mode connecté (backend) : toast d'erreur réseau + chargement ===== */
.toast-err {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%) translateY(20px);
  max-width: 90%; z-index: 9999;
  background: #B23A2E; color: #fff; font-size: 14px; font-weight: 500;
  padding: 12px 18px; border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.25);
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
}
.toast-err.on { opacity: 1; transform: translateX(-50%) translateY(0); }

.gros-bouton-login.chargement { opacity: .6; pointer-events: none; }
.gros-bouton-login.chargement::after {
  content: ''; width: 15px; height: 15px; margin-left: 4px;
  border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%;
  display: inline-block; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Créneaux personnalisés (Paramètres) ---- */
.cp-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.cp-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--surface); border-radius: 10px; border: 1px solid var(--bord); }
.cp-nom  { font-weight: 600; flex: 1; }
.cp-horaire { font-size: .85em; color: var(--gris-2); min-width: 110px; }
.cp-actions { display: flex; gap: 4px; }
.cp-vide { font-style: italic; color: var(--gris-2); margin: 4px 0; }
.cp-form { background: var(--surface); border: 1px solid var(--bord); border-radius: 12px; padding: 16px; margin-top: 12px; }
.cp-form h4 { margin: 0 0 12px; font-size: 1em; }
.cp-horaires { display: flex; gap: 12px; }
.cp-horaires .champ { flex: 1; }
.btn-add-cp { display: flex; align-items: center; gap: 6px; background: none; border: 1.5px dashed var(--bord); border-radius: 10px; color: var(--gris-2); padding: 8px 14px; cursor: pointer; font-size: .9em; width: 100%; justify-content: center; }
.btn-add-cp:hover { border-color: var(--rouge); color: var(--rouge); }

/* ---- Gestion des centres (Admin système) ---- */
.centres-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.centre-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--surface); border-radius: 10px; border: 1.5px solid var(--bord); }
.centre-item.actif { border-color: var(--rouge); }
.centre-info { display: flex; align-items: center; gap: 8px; }
.centre-nom  { font-weight: 600; }
.centre-code { font-size: .8em; }
.centre-actions { display: flex; gap: 4px; }

/* ===== Page d'aide / FAQ ===== */
.aide-page { padding: 4px 0 56px; }
.faq-section { margin-bottom: 4px; }
.faq-item {
  background: var(--surface); border: 1px solid var(--bord);
  border-radius: 12px; padding: 12px 14px; margin: 6px 0;
}
.faq-q {
  font-weight: 600; font-size: .92rem; color: var(--texte);
  display: flex; align-items: flex-start; gap: 8px;
}
.faq-q-ico { flex-shrink: 0; margin-top: 1px; color: var(--rouge); }
.faq-a {
  font-size: .88rem; color: var(--gris); margin-top: 6px;
  line-height: 1.6; padding-left: 26px;
}
.faq-a b { color: var(--texte); }
.faq-a em { font-style: normal; color: var(--rouge); font-weight: 500; }
.faq-a ol, .faq-a ul { margin: 4px 0; padding-left: 16px; }
.faq-a li { margin-bottom: 2px; }