/* ============================================================
   Mon Espace — Patro de Luttre
   Refonte visuelle : identité mouvement de jeunesse, sérieuse
   pour la gestion financière. Système de variables partagé.
   ============================================================ */

:root{
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, ui-sans-serif, system-ui, sans-serif;

  /* Palette Patro */
  --cream: #F4F7F5;
  --cream-deep: #E9F0EC;
  --surface: #FFFFFF;
  --surface-rgb: 255,255,255;

  --green: #0F6B45;
  --green-dark: #084C35;
  --green-bright: #17835A;
  --green-soft: #E1F0E7;

  --gold: #F7C600;
  --gold-dark: #7A6200;
  --gold-soft: #FFF4B8;

  --terracotta: #C97A1E;
  --terracotta-soft: #FBEAD2;
  --terracotta-dark: #7A4B0E;

  --red: #C23B2E;
  --red-soft: #FBE2DF;

  --blue: #2464B4;
  --blue-soft: #E1EDFB;

  --ink: #12372A;
  --muted: #607068;
  --line: #DCE5DF;
  --heading: var(--green-dark);

  /* Teintes de section (badges "Enfants") — 8 tons distincts, adaptés au mode sombre */
  --sec-0: #503080; --sec-0-soft: #e6e0fa;
  --sec-1: #205578; --sec-1-soft: #dceefa;
  --sec-2: #892849; --sec-2-soft: #fce6ed;
  --sec-3: #6c5100; --sec-3-soft: #fff1c6;
  --sec-4: #14615b; --sec-4-soft: #d9f1ef;
  --sec-5: #4e5a19; --sec-5-soft: #e8eccf;
  --sec-6: #8b4315; --sec-6-soft: #fbe5d6;
  --sec-7: #364381; --sec-7-soft: #e3e7ff;

  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --shadow: 0 10px 26px -12px rgba(8, 76, 53, 0.16);
  --shadow-sm: 0 2px 8px -3px rgba(8, 76, 53, 0.10);

  font-family: var(--font);
  color: var(--ink);
  background: var(--cream);
}

*{ box-sizing: border-box; }
html{ min-width: 320px; overflow-x: hidden; scroll-behavior: smooth; }
body{
  margin: 0;
  min-width: 320px;
  padding-bottom: calc(82px + env(safe-area-inset-bottom));
  background:
    radial-gradient(1200px 420px at 50% -120px, rgba(247, 198, 0, 0.12), transparent 60%),
    linear-gradient(180deg, var(--cream-deep) 0, var(--cream) 320px);
  -webkit-text-size-adjust: 100%;
  font-size: 16px;
  line-height: 1.5;
}
a{ color: var(--green); }
h1,h2,h3{ font-family: var(--font); letter-spacing: -0.01em; color: var(--heading); font-weight: 800; }
h1{ font-size: clamp(1.4rem, 4.5vw, 1.75rem); line-height: 1.2; margin: 4px 0 12px; overflow-wrap: anywhere; }
h2{ font-size: 1.08rem; margin: 0 0 10px; }
p, small{ color: var(--muted); line-height: 1.55; }
p{ font-size: 1rem; }

/* Accessibilité : focus clavier toujours visible, respect de la réduction des animations */
a:focus-visible, button:focus-visible, .button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible{
  outline: 3px solid var(--blue); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ------------------------------------------------------------
   Header — compact, pas de gros bouton Déconnexion
   ------------------------------------------------------------ */
header{
  position: relative;
  min-height: 58px;
  background: var(--surface);
  color: var(--heading);
  padding: 10px max(16px, calc((100% - 860px) / 2));
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--line);
}
header b{ font-size: .98rem; letter-spacing: 0.01em; font-weight: 800; color: var(--heading); }
header .header-space{ display: block; font-size: .72rem; font-weight: 700; color: var(--muted); }
header .button{ margin-left: auto; }
.brand-link{ display: flex; align-items: center; text-decoration: none; margin-right: 2px; }
.site-logo{ width: 34px; height: 30px; object-fit: contain; flex: 0 0 auto; }
.profile-link{
  margin-left: auto;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  color: var(--green); text-decoration: none; font-size: 1.15rem;
  background: var(--cream);
  transition: background .15s, border-color .15s;
}
.profile-link:hover{ background: var(--green-soft); border-color: var(--green-soft); }

main{ width: 100%; max-width: 860px; margin: auto; padding: 16px 16px 24px; }
.back-link{
  display: inline-flex; align-items: center; min-height: 40px; margin: 0 0 6px;
  color: var(--green); font-weight: 750; text-decoration: none; font-size: .95rem;
}
footer{
  max-width: 860px; margin: 14px auto 22px; padding: 0 16px;
  text-align: center; color: var(--muted); font-size: .85rem;
}
footer a{ color: var(--green); font-weight: 750; }

/* ------------------------------------------------------------
   Cards
   ------------------------------------------------------------ */
.card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px;
  margin: 10px 0;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s, border-color .15s;
}
.success-card{ text-align: center; padding-top: 24px; }
.success-icon{
  display: grid; place-items: center; width: 50px; height: 50px; margin: 0 auto 10px;
  border-radius: 50%; background: var(--green-soft); color: var(--green);
  font-size: 1.7rem; font-weight: 900;
}

/* ------------------------------------------------------------
   Messages (succès / info / avertissement / erreur)
   ------------------------------------------------------------ */
.error, .msg{
  padding: 12px 15px; border-radius: var(--radius-sm);
  font-weight: 650; font-size: .96rem; line-height: 1.5;
  border: 1px solid transparent; margin: 10px 0;
}
.error, .msg.msg-error{ background: var(--red-soft); color: var(--red); border-color: rgba(194,59,46,.18); }
.msg-success{ background: var(--green-soft); color: var(--green-dark); border-color: rgba(15,107,69,.18); }
.msg-warning{ background: var(--gold-soft); color: var(--gold-dark); border-color: rgba(122,98,0,.18); }
.msg-info{ background: var(--blue-soft); color: var(--blue); border-color: rgba(36,100,180,.18); }

/* Login */
.login-card{
  max-width: 400px;
  margin: clamp(14px, 5vh, 56px) auto 0;
  padding: clamp(22px, 5vw, 32px);
  text-align: center;
  border-top: 4px solid var(--gold);
}
.login-logo{ display: block; width: min(140px, 46vw); height: auto; max-height: 84px; object-fit: contain; margin: 0 auto 10px; }
.eyebrow{
  text-align: center; text-transform: uppercase; letter-spacing: .12em;
  font-size: .76rem; font-weight: 800; color: var(--gold-dark); margin: 4px 0;
}
.login-card h1{ margin: 2px 0 10px; }
.login-card > p{ text-align: center; }
.link-row{ display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-top: 20px; }

/* Choix Famille / Équipe Patro sur la page de connexion */
.login-tabs{ display: flex; gap: 6px; margin: 16px 0 4px; background: var(--cream-deep); border-radius: 999px; padding: 4px; }
.login-tab{
  flex: 1; border: 0; background: transparent; color: var(--muted);
  min-height: 40px; border-radius: 999px; font-weight: 750; font-size: .92rem;
  cursor: pointer; box-shadow: none; padding: 8px 10px;
}
.login-tab[aria-selected="true"]{ background: var(--surface); color: var(--green-dark); box-shadow: var(--shadow-sm); }
.login-panel[hidden]{ display: none; }

/* Étapes (première inscription) */
.steps{ display: flex; gap: 6px; margin: 14px 0 18px; }
.steps span{ flex: 1; height: 6px; border-radius: 99px; background: var(--line); }
.steps span.done, .steps span.current{ background: var(--green); }
.step-label{ text-align: center; color: var(--muted); font-size: .85rem; font-weight: 700; margin-bottom: 6px; }
.step-panel[hidden]{ display: none; }
.step-nav{ display: flex; gap: 10px; margin-top: 18px; }
.step-nav .button{ flex: 1; }

/* Request / success / policy */
.request-card{ max-width: 580px; margin: 8px auto; border-top: 4px solid var(--gold); }
.request-meta{ display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.policy{ max-width: 680px; margin: 8px auto; }
.policy h2{ margin-top: 26px; color: var(--green); }
.policy p{ font-size: 1rem; }
.policy a{ overflow-wrap: anywhere; }

/* ------------------------------------------------------------
   Hero (solde famille)
   ------------------------------------------------------------ */
.hero{
  position: relative;
  overflow: hidden;
  min-height: 160px;
  background: linear-gradient(150deg, var(--green-dark) 0%, var(--green) 55%, var(--green-bright) 100%);
  color: #fff;
  border: 0;
  border-radius: var(--radius-lg);
  padding: 20px 20px 18px;
  margin: 0 0 12px;
  box-shadow: 0 14px 28px -14px rgba(8, 76, 53, .45);
}
.hero-orbit{
  position: absolute;
  width: 180px; height: 180px;
  right: -60px; top: -70px;
  border: 18px dashed rgba(247, 198, 0, .18);
  border-radius: 50%;
}
.hero small{ position: relative; z-index: 1; color: #d8ecdf; font-weight: 650; font-size: .9rem; }
.hero h1{ position: relative; z-index: 1; margin: 4px 0 14px; max-width: calc(100% - 54px); overflow-wrap: anywhere; color: #fff; }
.hero-caption{ position: relative; z-index: 1; margin-top: 2px; color: #d8ecdf; font-size: .85rem; font-weight: 700; letter-spacing: .01em; }
.balance{
  position: relative; z-index: 1;
  font-size: clamp(2rem, 8vw, 2.7rem);
  line-height: 1.1; font-weight: 900;
  color: var(--gold);
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}
.hero .balance{ margin-top: 10px; }
.hero-label{
  position: relative; z-index: 1;
  display: inline-flex; margin-top: 4px;
  padding: 6px 12px; border-radius: 99px;
  background: rgba(255,255,255,.16); color: #fff;
  font-size: .78rem; font-weight: 800;
}
.hero.due .hero-label{ background: var(--terracotta-soft); color: var(--terracotta-dark); }
.hero.settled .hero-label{ background: var(--green-soft); color: var(--green-dark); }
.hero .due-caption{ position: relative; z-index: 1; margin: 10px 0 0; color: #fff; font-size: .82rem; }

/* ------------------------------------------------------------
   Grids & stat tiles
   ------------------------------------------------------------ */
.grid{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.stat{
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 14px;
  box-shadow: var(--shadow-sm);
  font-size: .88rem; font-weight: 700; color: var(--muted);
}
.stat b{ display: block; font-size: clamp(1.15rem, 4vw, 1.4rem); margin-top: 6px; overflow-wrap: anywhere; color: var(--heading); }
.stat.secondary{ background: var(--surface); }
.stat.paid{ background: var(--green-soft); color: var(--green-dark); }
.stat.paid b{ color: var(--green-dark); }
.stat.partial{ background: var(--terracotta-soft); color: var(--terracotta-dark); }
.stat.due{ background: var(--red-soft); color: var(--red); }
.stat.due b{ color: var(--red); }
.stat.info{ background: var(--blue-soft); color: var(--blue); }
.stat.info b{ color: var(--blue); }

.summary-grid{ margin-bottom: 12px; }
.summary-grid .stat{ min-height: 92px; padding: 14px; position: relative; }
.summary-grid .stat span:not(.stat-icon){ display: block; font-size: .82rem; font-weight: 800; color: var(--muted); }
.summary-grid .stat b{ margin-top: 6px; font-size: 1.2rem; }
.stat-icon{
  display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 11px;
  border-radius: 10px; background: var(--green-soft); color: var(--green);
  font-size: 1.05rem; font-weight: 900;
}
.stat.paid .stat-icon{ background: var(--surface); color: var(--green); }

.admin-shortcuts .shortcut{ min-height: 72px; }
.admin-stats .stat{ min-height: 82px; }
.due-text{ color: var(--red); font-weight: 800; }
.credit-tag{ white-space: nowrap; }
.expense-amount{ display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: 0 0 auto; }
.expense-amount small{ font-size: .78rem; white-space: nowrap; }
.expense-amount .income{ color: var(--green); font-weight: 750; }
.balance-line{ margin-bottom: 12px; }

/* ------------------------------------------------------------
   Forms
   ------------------------------------------------------------ */
label{ display: block; font-weight: 750; margin: 14px 0 6px; color: var(--ink); font-size: .95rem; }
label .optional{ font-weight: 550; color: var(--muted); font-size: .82em; }
input, select, textarea{
  display: block; width: 100%; min-height: 48px; padding: 11px 13px;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 16px;
  transition: border-color .15s, box-shadow .15s;
}
textarea{ min-height: 92px; resize: vertical; }
input:focus, select:focus, textarea:focus{
  outline: 3px solid rgba(15, 107, 69, .28);
  border-color: var(--green);
}
input[type=checkbox]{
  display: inline-block; width: 22px; min-height: 22px; margin: 0 8px 0 0;
  vertical-align: -6px; accent-color: var(--green);
}
.field-help{ display: block; margin-top: 5px; color: var(--muted); font-size: .85rem; }
.field-error{ display: block; margin-top: 5px; color: var(--red); font-weight: 650; font-size: .88rem; }

.password-wrap{ position: relative; }
.password-wrap input{ padding-right: 86px; }
.password-toggle{
  position: absolute; right: 5px; top: 5px; min-height: 38px;
  padding: 7px 11px; background: transparent; color: var(--green); font-size: .82rem;
}
.password-toggle:hover{ background: var(--green-soft); color: var(--green); }

.consent{
  display: flex; align-items: flex-start; gap: 10px; padding: 13px;
  background: var(--gold-soft); border-radius: var(--radius-md); margin-top: 14px; font-weight: 650;
}
.consent input{ flex: 0 0 22px; margin-top: 2px; }
.consent-text{ font-size: .9rem; line-height: 1.5; color: var(--ink); }

.admin-form{ max-width: 620px; margin-left: auto; margin-right: auto; }
.admin-form fieldset{ border: 1.5px solid var(--line); border-radius: var(--radius-md); margin: 14px 0; padding: 6px 14px; }
.admin-form fieldset legend{ padding: 0 6px; font-weight: 800; color: var(--heading); }
.admin-form fieldset label{ font-weight: 650; margin: 10px 0; }

.attendance-hint{ margin: 10px 0 0; font-size: .86rem; }
.attendance-toolbar{ display: flex; gap: 8px; margin: 14px 0 6px; }
.attendance-toolbar .button{ flex: 1; }
.attendance-section{ margin: 22px 0 0; }
.attendance-section h2{
  display: flex; align-items: center; gap: 8px;
  font-size: 1.02rem; margin: 0 0 8px; padding-top: 16px; border-top: 1px solid var(--line);
}
.attendance-section:first-child h2{ padding-top: 0; border-top: 0; }
.attendance-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 12px 0; }
.attendance-child{ min-width: 0; }
.attendance-chip{
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; min-height: 52px; padding: 8px 11px;
  background: var(--cream-deep); color: var(--ink);
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  font-weight: 750; font-size: .92rem; text-align: left;
  box-shadow: none; transition: background .12s, border-color .12s, color .12s;
}
.attendance-chip:hover{ background: var(--cream-deep); }
.attendance-chip small{ font-weight: 800; font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.attendance-chip[data-state="unpaid"]{ background: var(--gold-soft); border-color: var(--gold-soft); color: var(--gold-dark); }
.attendance-chip[data-state="unpaid"] small{ color: var(--gold-dark); }
.attendance-chip[data-state="paid"]{ background: var(--green-soft); border-color: var(--green-soft); color: var(--heading); }
.attendance-chip[data-state="paid"] small{ color: var(--green); }
.attendance-chip[data-state="absent"]{ background: var(--surface); color: var(--muted); }
.attendance-chip[data-state="absent"] small{ color: var(--muted); }
.check-list{ display: grid; gap: 5px; margin: 14px 0; }
.check-list label{
  display: flex; align-items: center; min-height: 44px; margin: 0;
  padding: 8px 11px; background: var(--cream-deep); border-radius: var(--radius-sm);
}
.check-list input{ width: 20px; margin-right: 9px; }

/* Filtres — panneau repliable, badge du nombre de filtres actifs */
.filter-bar{ display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; }
.filter-bar input{ flex: 1 1 180px; min-width: 0; }
.filter-bar select{ flex: 0 1 190px; }
.filter-bar button{ flex: 0 0 auto; }
.filters-toggle{
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  cursor: pointer; padding: 12px 0; min-height: 44px; font-weight: 750; color: var(--ink); font-size: .96rem;
  list-style: none;
}
.filters-toggle::-webkit-details-marker{ display: none; }
.filters-toggle .filters-count{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px;
  background: var(--green); color: #fff; font-size: .75rem; font-weight: 800; margin-left: 8px;
}

/* ------------------------------------------------------------
   Buttons — hiérarchie principal / secondaire / attention / destructif
   ------------------------------------------------------------ */
button, .button{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px;
  background: var(--green); color: #fff; border: 0;
  border-radius: 999px; padding: 11px 20px;
  font: inherit; font-size: .96rem; font-weight: 800; text-decoration: none; cursor: pointer;
  transition: transform .15s, background .15s, box-shadow .15s, border-color .15s, opacity .15s;
  touch-action: manipulation;
  box-shadow: 0 3px 10px -4px rgba(8,76,53,.35);
}
button:hover, .button:hover{ background: var(--green-dark); }
button:active, .button:active{ transform: scale(.98); }
button:disabled, .button:disabled, button[aria-busy="true"], .button[aria-busy="true"]{ opacity: .6; cursor: not-allowed; transform: none; }
.form-submit{ width: 100%; margin-top: 18px; }

/* Secondaire — fond blanc, bordure verte, texte vert */
.alt{
  background: var(--surface); color: var(--green);
  border: 1.5px solid var(--green);
  box-shadow: none;
}
.alt:hover{ background: var(--green-soft); color: var(--green-dark); }

/* Attention — orange, action nécessitant une vérification */
.warning{
  background: var(--gold); color: var(--terracotta-dark);
  border: 0; box-shadow: 0 3px 10px -4px rgba(122,98,0,.25);
}
.warning:hover{ background: #e0b700; }

/* Destructif — rouge uniquement (refuser/annuler/archiver), jamais l'action par défaut */
.danger{
  background: var(--surface) !important; color: var(--red) !important;
  border: 1.5px solid var(--red); box-shadow: none;
}
.danger:hover{ background: var(--red-soft) !important; }

.copy-button{
  min-height: 38px; flex: 0 0 auto; padding: 8px 13px; font-size: .8rem;
  background: var(--surface); color: var(--green); border: 1.5px solid var(--line); box-shadow: none;
}
.copy-button:hover{ background: var(--green-soft); border-color: var(--green-soft); }
.logout-button{ width: 100%; margin-top: 12px; }
.section-title .button{ min-height: 42px; padding: 9px 15px; }

/* ------------------------------------------------------------
   Rows & lists
   ------------------------------------------------------------ */
.row{
  display: flex; justify-content: space-between; gap: 14px; align-items: center;
  min-width: 0; border-bottom: 1px solid var(--line); padding: 12px 0;
}
.row:last-child{ border-bottom: 0; }
.row > span{ min-width: 0; overflow-wrap: anywhere; }
.row b{ white-space: nowrap; }

.movements-card h2{ margin-bottom: 4px; }
.movement-row{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.movement-row:last-child{ border-bottom: 0; }
.movement-row span{ display: flex; flex-direction: column; min-width: 0; }
.movement-row b{ overflow-wrap: anywhere; }
.movement-row small{ font-size: .82rem; }
.movement-row strong{ white-space: nowrap; }
.movement-row .income{ color: var(--green); }
.movement-row .expense{ color: var(--red); }

/* États vides — jamais une zone blanche sans explication */
.empty-state{
  margin: 8px 0; color: var(--muted); font-size: .96rem;
  text-align: center; padding: 22px 12px;
}
.empty-state-icon{ font-size: 1.8rem; display: block; margin-bottom: 8px; opacity: .6; }

.children-card{ padding: 16px; }
.children-card .section-title{ margin-bottom: 6px; }
.children-card h2{ margin: 0; }
.count-badge{
  display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px;
  border-radius: 99px; background: var(--gold-soft); color: var(--gold-dark); font-weight: 850;
}
.child-card{
  display: grid; grid-template-columns: 46px minmax(0,1fr);
  gap: 8px 10px; padding: 13px 0; border-bottom: 1px solid var(--line);
}
.child-card:last-child{ border-bottom: 0; }
.child-card .child-info{ align-self: center; }
.child-avatar{
  display: grid; place-items: center; flex: 0 0 46px; width: 46px; height: 46px;
  border-radius: 14px; background: var(--gold-soft); color: var(--gold-dark);
  font-weight: 900; font-size: 1.1rem;
}
.child-info{ display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.child-info b{ overflow-wrap: anywhere; color: var(--ink); }
.child-info small{ font-size: .85rem; }
.child-affiliation{ display: block; color: var(--muted); font-size: .84rem; margin-top: 4px; }
.child-affiliation .status-badge{ margin-left: 3px; padding: 4px 9px; font-size: .72rem; }
.status-badge{
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 11px; border-radius: 99px; font-size: .76rem; font-weight: 850; white-space: nowrap;
}
.status-badge.check{ background: var(--terracotta-soft); color: var(--terracotta-dark); }
.status-badge.check:before{
  content: '!'; display: grid; place-items: center; width: 16px; height: 16px;
  border-radius: 50%; background: var(--terracotta); color: #fff; font-size: .7rem;
}
.status-badge.ok{ background: var(--green-soft); color: var(--green-dark); }
.detail-link{ grid-column: 2; color: var(--green); font-size: .86rem; font-weight: 850; text-decoration: none; }
.detail-link span{ font-size: 1.1rem; }
.text-action{
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
  font-weight: 850; text-decoration: none;
}
.text-action span{ font-size: 1.3rem; line-height: 1; }

.payment-card h2{ margin-bottom: 16px; }
.payment-card dl{ margin: 0; }
.payment-card dl > div{ padding: 11px 0; border-bottom: 1px solid var(--line); }
.payment-card dl > div:last-child{ border-bottom: 0; }
.payment-card dt{ color: var(--muted); font-size: .82rem; font-weight: 750; }
.payment-card dd{ margin: 3px 0 0; color: var(--ink); font-weight: 800; overflow-wrap: anywhere; }
.copy-line{ display: flex !important; align-items: center; justify-content: space-between; gap: 10px; }
.copy-line span{ overflow-wrap: anywhere; }
.payment-note{ margin: 13px 0 0; font-size: .86rem; }

.request-actions{ display: flex; flex-wrap: wrap; gap: 8px; }
.request-actions form{ flex: 1; min-width: 130px; }
.request-actions button{ width: 100%; }
.request-child{ padding: 10px 0; border-top: 1px dashed var(--line); }
.request-declared-list{ list-style: none; margin: 10px 0; padding: 0; }
.request-declared-list li{ padding: 8px 0; border-top: 1px dashed var(--line); font-size: .94rem; }
.request-declared-list li:first-child{ border-top: 0; }
.request-card details{ margin: 10px 0; }
.request-card details summary{ cursor: pointer; padding: 8px 0; font-weight: 700; color: var(--ink); font-size: .92rem; }
.request-card details textarea{ margin-top: 6px; }
.link-child-form{ margin: 8px 0; }

.admin-family h2{ margin-bottom: 4px; }

/* Dense back-office list ("table") used by Familles / Enfants / Impayés */
.admin-table{ padding: 4px 16px; }
.admin-table-row{
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 13px 0; border-bottom: 1px solid var(--line);
}
.admin-table-row:last-child{ border-bottom: 0; }
.admin-table-main{ flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.admin-table-main b{ overflow-wrap: anywhere; color: var(--ink); }
.admin-table-row > b{ white-space: nowrap; color: var(--heading); }
.admin-table-actions{ display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.admin-table-actions .button{ min-height: 42px; padding: 9px 15px; }
.admin-table .empty-state{ padding: 10px 0; }
@media (min-width: 700px){
  .admin-table-row{ padding: 14px 2px; }
}

/* Tableau desktop pour les grandes listes (dégradation gracieuse : cartes sur mobile) */
.data-table{ width: 100%; border-collapse: collapse; font-size: .94rem; }
.data-table th{ text-align: left; padding: 10px 12px; color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; border-bottom: 2px solid var(--line); }
.data-table td{ padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.data-table tr:last-child td{ border-bottom: 0; }
.data-table tr:hover td{ background: var(--cream-deep); }

/* ------------------------------------------------------------
   Badges / tags
   ------------------------------------------------------------ */
.tag{
  display: inline-block; background: var(--green-soft); color: var(--green-dark);
  border-radius: 99px; padding: 5px 12px; font-weight: 750; font-size: .88rem;
}
.tag.neutral{ background: var(--cream-deep); color: var(--muted); }
.muted{ color: var(--muted); }

.section-title{ display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

/* ------------------------------------------------------------
   Navigation inférieure (parents / équipe)
   ------------------------------------------------------------ */
.bottom{
  position: fixed; z-index: 10; bottom: 0; left: 0; right: 0;
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
  background: rgba(var(--surface-rgb), .98);
  border-top: 1px solid var(--line);
  box-shadow: 0 -10px 24px -6px rgba(8,76,53,.12);
  display: flex; justify-content: center; gap: 2px;
}
.bottom a{
  flex: 1; max-width: 150px; color: var(--muted); text-decoration: none;
  text-align: center; font-size: .76rem; font-weight: 750; padding: 7px 3px; border-radius: 12px;
  min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.bottom a:hover, .bottom a:focus-visible{ background: var(--green-soft); color: var(--green-dark); }
.bottom a.active{ background: var(--gold-soft); color: var(--green-dark); font-weight: 850; }
.bottom span{ display: block; color: var(--green); font-size: 1.3rem; line-height: 1.25; }
.bottom a.active span{ color: var(--green-dark); }

.shortcut-grid{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.shortcut{
  min-height: 76px; justify-content: flex-start; text-align: left; line-height: 1.25; font-size: .92rem;
  border-radius: var(--radius-md);
  background: var(--surface); color: var(--heading);
  border: 1.5px solid var(--line); box-shadow: var(--shadow-sm);
}
.shortcut:hover{ background: var(--green-soft); border-color: var(--green-soft); }
.shortcut strong{ display: block; }

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (min-width: 700px){
  body{ padding-bottom: 24px; }
  main{ padding: 28px 24px; }
  .bottom{
    position: static; max-width: 860px; margin: 0 auto 18px;
    border: 0; box-shadow: none; background: transparent;
    justify-content: flex-start; padding: 0 24px; gap: 6px;
  }
  .bottom a{ flex: 0 0 auto; max-width: none; min-height: auto; flex-direction: row; background: var(--surface); border: 1px solid var(--line); padding: 9px 16px; }
  .bottom span{ display: inline; margin-right: 6px; }
  .grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
  .shortcut-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
  .child-card{ grid-template-columns: 46px minmax(0,1fr) auto; align-items: center; }
  .detail-link{ grid-column: auto; }
  .children-card{ padding: 20px 22px; }
  .payment-card dl{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
  .payment-card dl > div{ border: 0; padding: 0; }
  .payment-card .payment-note{ max-width: 560px; }
}

/* ------------------------------------------------------------
   Sidebar admin (back-office) — desktop only, groupée par catégorie
   ------------------------------------------------------------ */
.admin-sidebar{ display: none; }
@media (min-width: 960px){
  header{ position: sticky; top: 0; z-index: 30; }
  .admin-sidebar{
    display: flex; flex-direction: column; gap: 1px;
    position: fixed; top: 59px; left: 0; bottom: 0; width: 218px;
    background: var(--surface); border-right: 1px solid var(--line);
    padding: 14px 10px; overflow-y: auto; z-index: 20;
  }
  .sidebar-group-label{
    padding: 14px 10px 4px; font-size: .7rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .06em; color: var(--muted);
  }
  .sidebar-group-label:first-child{ padding-top: 4px; }
  .sidebar-link{
    display: flex; align-items: center; gap: 9px;
    padding: 10px 10px; border-radius: 10px;
    color: var(--ink); text-decoration: none; font-weight: 700; font-size: .9rem;
  }
  .sidebar-link span{ width: 20px; text-align: center; color: var(--green); font-size: .98rem; }
  .sidebar-link:hover{ background: var(--green-soft); }
  .sidebar-link.active{ background: var(--green-soft); color: var(--green-dark); }
  .sidebar-link.active span{ color: var(--green-dark); }
  .sidebar-logout{ margin-top: auto; color: var(--red); border-top: 1px solid var(--line); padding-top: 12px; border-radius: 0; }
  .sidebar-logout span{ color: var(--red); }
  .sidebar-logout:hover{ background: var(--red-soft); }

  body.has-sidebar main{ width: auto; max-width: 760px; margin: 0 0 0 218px; padding: 28px 30px; }
  body.has-sidebar footer{ margin-left: 218px; }
  body.has-sidebar .bottom{ display: none; }
  body.has-sidebar header .button.alt{ display: none; }
}

@media (max-width: 380px){
  .hero{ padding-left: 19px; padding-right: 19px; }
  .child-card{ gap: 8px 10px; }
  .child-avatar{ flex-basis: 40px; width: 40px; height: 40px; }
  .status-badge{ padding-left: 8px; padding-right: 8px; font-size: .72rem; }
  .summary-grid .stat{ padding-left: 12px; padding-right: 12px; }
}

@media (max-width: 360px){
  main{ padding-left: 14px; padding-right: 14px; }
  .card{ padding: 16px; }
  .bottom a{ font-size: .7rem; }
  .bottom{ gap: 0; }
  .bottom span{ font-size: 1.15rem; }
}

@media (max-width: 520px){
  .filter-bar > *{ width: 100%; flex-basis: 100%; }
  .filter-bar button{ width: 100%; }
  .admin-shortcuts{ grid-template-columns: 1fr 1fr; }
  .admin-shortcuts .shortcut{ font-size: .86rem; padding: 10px; }
}

/* ------------------------------------------------------------
   Mode sombre — même thème Patro, fond sombre.
   Suit la préférence système par défaut ; un bouton dans l'en-tête
   permet de forcer clair/sombre (mémorisé dans ce navigateur).
   ------------------------------------------------------------ */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --cream: #10201A;
    --cream-deep: #0B1712;
    --surface: #1A2B23;
    --surface-rgb: 26,43,35;
    --green: #3FB27D;
    --green-bright: #4FCB90;
    --green-soft: #1B3527;
    --gold: #F7C600;
    --gold-dark: #FFE066;
    --gold-soft: #33290A;
    --terracotta: #E0975A;
    --terracotta-soft: #3A2416;
    --terracotta-dark: #F0BE9C;
    --red: #E5766A;
    --red-soft: #3C1F1B;
    --blue: #6FA6E8;
    --blue-soft: #182A40;
    --ink: #EAF3EE;
    --muted: #96AA9F;
    --line: #294036;
    --heading: #EAF6EE;
    --shadow: 0 10px 30px -10px rgba(0, 0, 0, .55);
    --shadow-sm: 0 4px 14px -4px rgba(0, 0, 0, .4);
    --sec-0: #c9b8f0; --sec-0-soft: #2c2440;
    --sec-1: #8fc4e8; --sec-1-soft: #1b3040;
    --sec-2: #f0a8c0; --sec-2-soft: #3a1f28;
    --sec-3: #f0d878; --sec-3-soft: #3a3010;
    --sec-4: #7fd4cc; --sec-4-soft: #17302e;
    --sec-5: #c8d488; --sec-5-soft: #2c3414;
    --sec-6: #f0a878; --sec-6-soft: #3a2414;
    --sec-7: #a8b4f0; --sec-7-soft: #242a4a;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --cream: #10201A;
  --cream-deep: #0B1712;
  --surface: #1A2B23;
  --surface-rgb: 26,43,35;
  --green: #3FB27D;
  --green-bright: #4FCB90;
  --green-soft: #1B3527;
  --gold: #F7C600;
  --gold-dark: #FFE066;
  --gold-soft: #33290A;
  --terracotta: #E0975A;
  --terracotta-soft: #3A2416;
  --terracotta-dark: #F0BE9C;
  --red: #E5766A;
  --red-soft: #3C1F1B;
  --blue: #6FA6E8;
  --blue-soft: #182A40;
  --ink: #EAF3EE;
  --muted: #96AA9F;
  --line: #294036;
  --heading: #EAF6EE;
  --shadow: 0 10px 30px -10px rgba(0, 0, 0, .55);
  --shadow-sm: 0 4px 14px -4px rgba(0, 0, 0, .4);
  --sec-0: #c9b8f0; --sec-0-soft: #2c2440;
  --sec-1: #8fc4e8; --sec-1-soft: #1b3040;
  --sec-2: #f0a8c0; --sec-2-soft: #3a1f28;
  --sec-3: #f0d878; --sec-3-soft: #3a3010;
  --sec-4: #7fd4cc; --sec-4-soft: #17302e;
  --sec-5: #c8d488; --sec-5-soft: #2c3414;
  --sec-6: #f0a878; --sec-6-soft: #3a2414;
  --sec-7: #a8b4f0; --sec-7-soft: #242a4a;
}

.theme-toggle{
  display: grid; place-items: center;
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border: 1.5px solid var(--line); border-radius: 50%;
  background: var(--cream); color: var(--green);
  font-size: 1.1rem; cursor: pointer; margin-left: auto;
  min-height: 0; padding: 0; box-shadow: none;
}
.theme-toggle:hover{ background: var(--green-soft); border-color: var(--green-soft); }
:root[data-theme="dark"] .theme-toggle .theme-icon-light,
:root:not([data-theme="light"]) .theme-toggle .theme-icon-light{ display: none; }
.theme-toggle .theme-icon-dark{ display: none; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-toggle .theme-icon-dark{ display: inline; }
}
:root[data-theme="dark"] .theme-toggle .theme-icon-dark{ display: inline; }
:root[data-theme="light"] .theme-toggle .theme-icon-light{ display: inline; }
:root[data-theme="light"] .theme-toggle .theme-icon-dark{ display: none; }

/* ------------------------------------------------------------
   Pages d'erreur (403 / 404)
   ------------------------------------------------------------ */
.error-page{ max-width: 460px; margin: clamp(30px,10vh,90px) auto 0; text-align: center; padding: 0 16px; }
.error-page .error-code{ font-size: 3.2rem; font-weight: 900; color: var(--gold-dark); line-height: 1; margin-bottom: 6px; }
.error-page p{ margin: 0 0 20px; }

/* Respecter le masquage des boutons et panneaux du formulaire en étapes. */
[data-wizard] [hidden]{ display: none !important; }