:root {
  --olive-dark: #44543A;
  --olive: #5C6E4C;
  --sage: #8CA079;
  --sage-line: #C7CFB7;
  --cream: #FBF7EF;
  --cream-card: #F3EEE2;
  --tan: #E8DCC5;
  --text-dark: #34362E;
  --text-muted: #807A68;
  --white: #FFFFFF;
  --danger: #B5654A;
  --danger-light: #F3E1D9;
}

* { box-sizing: border-box; }

/* ---------- Icônes : traits plus fins et arrondis, un style plus travaillé ---------- */
/* Cible précisément les icônes (motif stroke="currentColor" fill="none"), sans toucher
   aux illustrations qui utilisent des couleurs fixes. Un seul changement ici affine
   l'apparence de toutes les icônes du site d'un coup. */
svg[stroke="currentColor"] {
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Icônes inline : remplacent les émojis système dans le texte
   courant (notes, pièces jointes, avertissements...) par une icône dessinée
   cohérente avec le reste du site. ---------- */
.icon-inline {
  width: 15px;
  height: 15px;
  vertical-align: -2.5px;
  margin-right: 4px;
  flex-shrink: 0;
}
.icon-inline-lg {
  width: 18px;
  height: 18px;
  vertical-align: -4px;
  margin-right: 6px;
  flex-shrink: 0;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--text-dark);
  font-family: 'Nunito', Helvetica, sans-serif;
  font-size: 15px;
}

.site-header {
  background: linear-gradient(135deg, var(--tan) 0%, var(--sage) 100%);
  border-bottom: 2px solid var(--olive);
  padding: 10px 28px 0;
  position: sticky; top: 0; z-index: 100;
}

.mobile-menu-toggle, .mobile-only-label { display: none; }
.site-footer {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px;
  padding: 18px 16px 110px; font-family: 'Nunito', Helvetica, sans-serif; font-size: 12.5px;
}
.site-footer a { color: var(--text-muted); text-decoration: underline; }
.site-footer a:hover { color: var(--olive-dark); }
@media print { .site-footer { display: none !important; } }
.flash-zone { padding: 14px 28px 0; }

.header-collapse-toggle {
  position: absolute; bottom: 4px; right: 14px; z-index: 101;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border: none; border-radius: 50%;
  background: rgba(255,255,255,0.6);
  color: var(--olive-dark);
  cursor: pointer;
  transition: background 0.15s, transform 0.2s;
}
.header-collapse-toggle:hover { background: rgba(255,255,255,0.9); }
.header-collapse-toggle svg { width: 15px; height: 15px; }
.site-header.header-collapsed .header-collapse-toggle svg { transform: rotate(180deg); }

/* Bandeau réduit : on masque logo/recherche/icônes utilitaires pour gagner de la
   hauteur, mais le bandeau de modules reste là — juste ses icônes, sans le texte —
   pour continuer à naviguer vite. */
.site-header.header-collapsed .header-top-row { display: none; }
.site-header.header-collapsed .module-nav { padding-top: 6px; padding-bottom: 8px; }
.site-header.header-collapsed .module-nav-trigger .module-nav-label,
.site-header.header-collapsed .module-nav-dashboard .module-nav-label { display: none; }
.site-header.header-collapsed .module-nav-trigger, .site-header.header-collapsed .module-nav-dashboard {
  padding: 8px 12px; font-size: 20px;
}

.header-top-row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 16px;
  padding-bottom: 10px;
}

.brand-compact {
  display: flex; align-items: center; gap: 10px;
  color: var(--olive-dark);
  flex-shrink: 0;
}
.brand-icon-link {
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; color: var(--olive-dark);
  padding: 6px; border-radius: 10px;
  transition: background 0.15s;
}
.brand-icon-link:hover { background: rgba(255,255,255,0.5); }
.brand-icon-link.active { background: rgba(255,255,255,0.7); }
.brand-sprig { width: 24px; height: 24px; color: var(--olive-dark); flex-shrink: 0; }
.brand-compact-title {
  font-family: 'Italianno', cursive; font-weight: 400;
  font-size: 33px; line-height: 1;
  white-space: nowrap;
}
.beta-badge {
  font-family: 'Nunito', Helvetica, sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--olive-dark);
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(68,84,58,0.25);
  border-radius: 20px;
  padding: 2px 8px;
  vertical-align: middle;
  margin-left: 2px;
}

.top-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--white);
  border: 1.5px solid var(--olive);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  border-radius: 20px;
  padding: 8px 16px;
  width: 100%; max-width: 460px; margin: 0 auto;
  color: var(--text-muted);
}
.top-search svg { width: 17px; height: 17px; flex-shrink: 0; }
.top-search input {
  border: none; outline: none; background: none; flex: 1;
  font-family: 'Nunito', Helvetica, sans-serif; font-size: 14px; color: var(--text-dark);
}

.header-utility-icons { display: flex; gap: 8px; align-items: center; justify-self: end; flex-shrink: 0; }
.top-icon-link {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 11px;
  border-radius: 10px;
  background: rgba(255,255,255,0.55);
  color: var(--olive-dark);
  text-decoration: none;
  font-family: 'Nunito', sans-serif; font-size: 10px; font-weight: 600;
  transition: background 0.15s, transform 0.1s;
}
.top-icon-link svg { width: 17px; height: 17px; stroke-width: 2.2; }
.top-icon-link:hover { background: rgba(255,255,255,0.85); transform: translateY(-1px); }
.top-icon-link.active { background: var(--white); box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
.top-icon-settings { padding: 9px 10px; margin-left: 4px; }

/* ---------- Bandeau des modules (remplace l'ancien menu latéral) ---------- */
.module-nav {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 5px;
  padding: 6px 0 10px;
}
.module-nav-dashboard:hover { background: rgba(255,255,255,0.8); }
.module-nav-dashboard.active { background: var(--white); box-shadow: 0 2px 6px rgba(0,0,0,0.1); }

.module-nav-item { position: relative; }
.module-nav-trigger {
  display: flex; align-items: center; gap: 5px;
  padding: 7px 14px;
  border: none; border-radius: 9px;
  background: rgba(255,255,255,0.5);
  color: var(--olive-dark);
  cursor: pointer;
  font-family: 'Nunito', Helvetica, sans-serif; font-weight: 700; font-size: 13.5px;
  transition: background 0.15s;
}
.module-nav-trigger:hover { background: rgba(255,255,255,0.8); }
.module-nav-item.open .module-nav-trigger { background: var(--white); box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
.module-nav-icon { width: 16px; height: 16px; flex-shrink: 0; }

.module-dropdown {
  position: absolute; top: calc(100% + 6px); left: 0;
  background: var(--white);
  border: 1.5px solid var(--sage-line);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 8px;
  min-width: 240px;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.module-nav-item.open .module-dropdown { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.module-nav-item:last-child .module-dropdown,
.module-nav-item:nth-last-child(2) .module-dropdown { left: auto; right: 0; }

.dropdown-link {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-dark);
  font-family: 'Nunito', Helvetica, sans-serif; font-weight: 600; font-size: 14.5px;
  white-space: nowrap;
  transition: background 0.12s ease, padding-left 0.12s ease;
}
.dropdown-link svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--olive); stroke-width: 2; }
.dropdown-link:hover { background: var(--cream-card); padding-left: 18px; }
.dropdown-link.active { background: var(--tan); color: var(--olive-dark); font-weight: 600; }
.dropdown-link.active svg { color: var(--olive-dark); }

.main { padding: 22px 40px; max-width: 100%; }
.repas-table { table-layout: fixed; width: 100%; }
.repas-table td { width: 14.28%; }

h1 { font-size: 25px; color: var(--olive-dark); margin: 0 0 5px; }

/* ---------- Signature de marque : la brindille revient devant chaque titre de
   page, pour créer une identité visuelle reconnaissable et récurrente sur tout
   le site. Exclue des 4 pages qui ont déjà leur propre émoji en début de titre
   (via .h1-icone-propre), pour ne jamais doubler. ---------- */
h1:not(.h1-icone-propre)::before {
  content: "";
  display: inline-block;
  width: 20px; height: 20px;
  margin-right: 6px;
  vertical-align: -3px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6E4C' stroke-width='1.6'%3E%3Cpath d='M12 22V8M12 8c0-3-2-5-6-5 0 4 2 6 6 6zM12 8c0-3 2-5 6-5 0 4-2 6-6 6z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}
h2 { font-size: 20px; color: var(--olive-dark); margin: 0 0 16px; }
.page-sub { color: var(--text-muted); margin: 0 0 22px; font-style: italic; }

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
}

/* ---------- Cartes en pleine largeur : pour les fiches avec beaucoup d'informations
   (Animaux, Voiture...) où une grille à colonnes étroites fait tout se replier en
   hauteur au lieu de laisser le contenu s'étaler naturellement. ---------- */
.cards-list { display: flex; flex-direction: column; gap: 10px; }

.card {
  background: var(--cream-card);
  border: 1px solid var(--sage-line);
  border-radius: 10px;
  padding: 13px 15px;
  margin-bottom: 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(68,84,58,0.1); border-color: var(--sage); }

/* ---------- Paramètres : navigation par thème sur le côté, comme les réglages
   d'un téléphone, plutôt qu'une seule longue page à faire défiler. ---------- */
.parametres-layout { display: flex; gap: 24px; align-items: flex-start; }
.parametres-nav {
  display: flex; flex-direction: column; gap: 4px;
  flex-shrink: 0; width: 210px;
  position: sticky; top: 80px;
}
.parametres-nav-item {
  display: block; text-align: left;
  padding: 10px 14px;
  border: none; border-radius: 8px;
  background: none;
  color: var(--text-dark);
  font-family: 'Nunito', Helvetica, sans-serif; font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
.parametres-nav-item:hover { background: var(--cream-card); }
.parametres-nav-item.active { background: var(--tan); color: var(--olive-dark); }
.parametres-content { flex: 1; min-width: 0; }
.parametres-formblock { display: none; }
.parametres-formblock[data-tabs~="profil"] { display: block; }
.parametres-panel { display: none; }
.parametres-panel.active { display: block; }
@media (max-width: 800px) {
  .parametres-layout { flex-direction: column; align-items: stretch; }
  .parametres-nav { width: 100%; flex-direction: row; flex-wrap: wrap; position: static; }
}

/* ---------- Ligne compacte : pour les modules où on peut accumuler beaucoup d'entrées
   (garde-robe entière, etc.) — une grille de grandes cases deviendrait vite ingérable. ---------- */
.list-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px;
  border: 1px solid var(--sage-line);
  border-radius: 8px;
  background: var(--cream-card);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.list-row:hover { border-color: var(--sage); background: var(--white); }
.list-row-icon {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 7px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--white); border: 1px solid var(--sage-line);
  color: var(--olive);
}
.list-row-icon img { width: 100%; height: 100%; object-fit: cover; }
.list-row-icon svg { width: 19px; height: 19px; }
.list-row-main { flex: 1; min-width: 0; }
.list-row-title { font-weight: 700; font-size: 13.5px; color: var(--olive-dark); }
.list-row-meta { font-family: 'Nunito', Helvetica, sans-serif; font-size: 11.5px; color: var(--text-muted); }

.card-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.card-title { font-size: 16px; font-weight: bold; color: var(--olive-dark); margin: 0 0 3px; }
.card-meta { color: var(--text-muted); font-size: 12.5px; margin: 1px 0; line-height: 1.4; }
.card-actions { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }

.badge {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: bold;
  font-family: 'Nunito', Helvetica, sans-serif;
}
.badge-ok { background: var(--sage-line); color: var(--olive-dark); }
.badge-soon { background: var(--tan); color: var(--olive-dark); }
.badge-danger { background: var(--danger-light); color: var(--danger); }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px;
  border-radius: 24px;
  border: none;
  font-family: 'Nunito', Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s;
}
.btn:hover { opacity: 0.88; }
.btn-primary { background: var(--olive-dark); color: var(--cream); }
.btn-secondary { background: var(--white); color: var(--olive-dark); border: 1.5px solid var(--sage-line); }
.btn-danger { background: var(--white); color: var(--danger); border: 1.5px solid var(--danger-light); }
.btn-sm { padding: 7px 14px; font-size: 12.5px; }

.top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; }

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}
.empty-state svg { width: 56px; height: 56px; margin-bottom: 16px; opacity: 0.5; }

form.form-card {
  background: var(--white);
  border: 1px solid var(--sage-line);
  border-radius: 12px;
  padding: 24px;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-family: 'Nunito', Helvetica, sans-serif;
  font-size: 12.5px;
  font-weight: bold;
  color: var(--olive-dark);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.field input[type=text], .field input[type=number], .field input[type=date], .field textarea, .field input[type=file],
.field input[type=password], .field input[type=email], .field input[type=time], .field input[type=tel] {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--sage-line);
  border-radius: 8px;
  font-family: 'Nunito', Helvetica, sans-serif;
  font-size: 14.5px;
  background: var(--cream);
  color: var(--text-dark);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field input[type=text]:focus, .field input[type=number]:focus, .field input[type=date]:focus, .field textarea:focus,
.field input[type=password]:focus, .field input[type=email]:focus, .field input[type=time]:focus, .field input[type=tel]:focus {
  outline: none;
  border-color: var(--olive);
  box-shadow: 0 0 0 3px rgba(92,110,76,0.15);
}
.field textarea { min-height: 80px; resize: vertical; }
.field-row { display: flex; gap: 16px; }
.field-row .field { flex: 1; }
.form-actions { display: flex; gap: 10px; margin-top: 28px; }

.dashboard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 26px; }
.stat-card {
  background: var(--white);
  border: 1px solid var(--sage-line);
  border-top: 4px solid var(--sage);
  border-radius: 12px;
  padding: 15px;
  text-align: center;
  transition: transform 0.15s, box-shadow 0.15s;
  color: inherit;
}
.stat-card:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,0,0,0.1); }
.stat-number { font-size: 34px; font-weight: bold; color: var(--olive-dark); }
.stat-label { font-family: 'Nunito', Helvetica, sans-serif; font-size: 12.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }

/* ---------- Petit graphique budget (carte du haut) ---------- */
.stat-card-chart { text-align: left; }
.stat-card-chart .stat-label { text-align: center; }
.stat-card-chart .stat-label strong { font-size: 20px; text-transform: none; letter-spacing: normal; display: block; margin-top: 2px; font-family: 'Nunito', Helvetica, sans-serif; }
.budget-sparkline { width: 100%; height: 62px; margin-top: 4px; }
.budget-sparkline-label { font-family: 'Nunito', Helvetica, sans-serif; font-size: 7px; fill: var(--text-muted); }

/* ---------- Frise verticale des événements à venir ---------- */
.timeline { position: relative; padding-left: 6px; }
.timeline-item { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 0 10px 22px; }
.timeline-item:not(:last-child)::before {
  content: ''; position: absolute; left: 5px; top: 22px; bottom: -10px; width: 2px; background: var(--sage-line);
}
.timeline-dot {
  position: absolute; left: 0; top: 14px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--olive); border: 2px solid var(--white); box-shadow: 0 0 0 2px var(--sage);
}
.timeline-content { flex: 1; display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: inherit; }
.timeline-date { font-family: 'Nunito', Helvetica, sans-serif; font-size: 11.5px; color: var(--olive); font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; }
.timeline-title { font-family: 'Nunito', Helvetica, sans-serif; font-size: 14.5px; color: var(--text-dark); font-weight: 600; }

/* ---------- Dashboard 2 colonnes ---------- */
.dashboard-columns { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; align-items: start; }
.dashboard-side-card {
  background: var(--white);
  border: 1px solid var(--sage-line);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 18px;
}
.dashboard-side-card h3 {
  margin: 0 0 12px; font-size: 15px; color: var(--olive-dark);
  display: flex; align-items: center; justify-content: space-between;
}
.dashboard-side-card h3 a { font-size: 11.5px; font-family: 'Nunito', Helvetica, sans-serif; color: var(--sage); text-decoration: none; }
.mini-list-item {
  font-family: 'Nunito', Helvetica, sans-serif; font-size: 13px;
  padding: 7px 0; border-bottom: 1px solid var(--cream);
  display: flex; justify-content: space-between; gap: 8px;
}
.mini-list-item:last-child { border-bottom: none; }
@media (max-width: 900px) {
  .dashboard-columns { grid-template-columns: 1fr; }
}

.alert-list { display: flex; flex-direction: column; gap: 10px; }
.alert-item {
  display: flex; align-items: center; gap: 14px;
  background: var(--white);
  border-left: 4px solid var(--danger);
  border-radius: 8px;
  padding: 14px 18px;
}
.alert-item.soon { border-left-color: var(--tan); }
.alert-item .alert-text { flex: 1; font-family: 'Nunito', Helvetica, sans-serif; font-size: 14px; }
.alert-item .alert-date { font-size: 12.5px; color: var(--text-muted); font-family: 'Nunito', Helvetica, sans-serif; }

.file-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--olive);
  font-family: 'Nunito', Helvetica, sans-serif;
  font-size: 13px;
  text-decoration: none;
  margin-top: 8px;
}
.file-link:hover { text-decoration: underline; }

@media (max-width: 800px) {
  /* Sur mobile, le bandeau des modules passe à la ligne : tous les groupes
     restent visibles d'un coup, sans avoir besoin de défiler pour les voir. */
  /* Téléphone : barre fine toujours visible (logo + titre + bouton menu) ; recherche,
     raccourcis et catégories vivent dans un panneau qui s'ouvre au toucher, au lieu de
     occuper près de la moitié de l'écran en permanence. */
  .site-header { padding: 8px 14px; }
  .header-collapse-toggle { display: none; }
  .mobile-menu-toggle {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 8px; right: 12px; z-index: 102;
    width: 44px; height: 44px; border: none; border-radius: 12px;
    background: rgba(255,255,255,0.65); color: var(--olive-dark); cursor: pointer;
  }
  .mobile-menu-toggle svg { width: 22px; height: 22px; }
  .mobile-menu-toggle .icon-close { display: none; }
  .site-header.menu-open .mobile-menu-toggle .icon-menu { display: none; }
  .site-header.menu-open .mobile-menu-toggle .icon-close { display: block; }

  .header-top-row, .site-header.header-collapsed .header-top-row { display: block; padding-bottom: 0; }
  .header-top-row .brand-compact { justify-self: start; min-height: 44px; padding-right: 54px; gap: 6px; }
  .brand-compact-title { font-size: 25px; }
  .beta-badge { font-size: 9px; padding: 1px 6px; }

  .top-search, .header-utility-icons, .module-nav { display: none; }
  .site-header.menu-open {
    max-height: 100vh; max-height: 100dvh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 20px;
  }
  .site-header.menu-open .top-search { display: flex; max-width: none; margin: 10px 0 12px; }
  .top-search input { font-size: 16px; } /* évite le zoom automatique sur iPhone */
  .site-header.menu-open .header-utility-icons {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%;
  }
  .header-utility-icons .top-icon-link { padding: 10px 4px; font-size: 11px; text-align: center; }
  .header-utility-icons .top-icon-settings { margin-left: 0; padding: 10px 4px; }
  .mobile-only-label { display: inline; }
  .site-header.menu-open .module-nav {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0; margin-top: 14px;
  }
  .module-nav-trigger, .module-nav-dashboard,
  .site-header.header-collapsed .module-nav-trigger, .site-header.header-collapsed .module-nav-dashboard {
    width: 100%; justify-content: flex-start; padding: 12px; font-size: 13.5px;
  }
  .site-header.header-collapsed .module-nav-trigger .module-nav-label,
  .site-header.header-collapsed .module-nav-dashboard .module-nav-label { display: inline; }
  .module-nav-item.open { grid-column: 1 / -1; }
  body.menu-lock { overflow: hidden; }
  body.menu-lock #pensebete-btn { display: none; }
  .flash-zone { padding: 12px 16px 0; }

  /* Le menu déroulant flottant (position absolue par rapport au petit bouton
     déclencheur) débordait sur les catégories voisines sur mobile, faute de
     place. Sur petit écran, il pousse plutôt le contenu vers le bas, en
     flux normal, pleine largeur — plus de chevauchement possible. */
  .module-nav-item { position: static; }
  .module-dropdown {
    position: static;
    display: none;
    width: 100%;
    min-width: 0;
    box-shadow: none;
    border: 1px solid var(--sage-line);
    margin-top: 6px;
    opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  }
  .module-nav-item.open .module-dropdown { display: block; }
  .dropdown-link { white-space: normal; }

  /* Grilles de fiches : une seule colonne, pour ne jamais chevaucher */
  .cards-grid { grid-template-columns: 1fr; }
  .dashboard-grid { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
  .dashboard-grid .stat-card-chart { grid-column: 1 / -1; }
  .dashboard-grid .stat-card { padding: 14px 10px; }
  .stat-number { font-size: 28px; }
  .stat-label { font-size: 11px; }
  .dashboard-columns { grid-template-columns: 1fr; }
  .field-row { flex-direction: column; }

  /* Tableau Repas et calendrier : on assume le défilement horizontal
     plutôt que d'écraser illisiblement 7 colonnes sur un petit écran. */
  .repas-table { display: block; overflow-x: auto; white-space: nowrap; }
  .repas-table tr { display: table-row; }
  .repas-table th, .repas-table td { min-width: 150px; white-space: normal; }
  .cal-grid { overflow-x: auto; }

  /* Cartes et lignes : on empile au lieu de chevaucher quand ça manque de place */
  .card-row { flex-direction: column; }
  .card-actions { width: 100%; }
  .card-actions form, .card-actions a, .card-actions button { flex: 1; }
  .event-row { flex-wrap: wrap; }
  .top-bar { flex-direction: column; align-items: flex-start; gap: 12px; }
  .top-bar > div:last-child, .top-bar form { width: 100%; }

  /* Sur mobile, on laisse un peu plus d'air horizontalement */
  .main { padding: 20px 16px 96px; }
}

.repas-daylabel { display: none; }

/* Petits écrans (téléphones, hors tablettes et impression) : les semaines de 7 colonnes
   s'empilent jour après jour au lieu de faire défiler la page latéralement. */
@media (max-width: 640px) {
  .repas-semaine, .repas-semaine tbody, .repas-semaine tr, .repas-semaine td { display: block; width: 100%; }
  .repas-semaine { overflow-x: visible; white-space: normal; }
  .repas-semaine tr:first-child { display: none; }
  .repas-semaine td { min-width: 0; margin-bottom: 12px; }
  .repas-daylabel { display: block; font-weight: 800; font-size: 16px; color: var(--olive-dark); margin-bottom: 6px; }
  .semaine-grid { grid-template-columns: 1fr !important; }
  .semaine-nav { flex-direction: column; align-items: stretch !important; gap: 8px; text-align: center; }
}

/* ---------- Calendrier ---------- */
.cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.cal-nav { display: flex; gap: 10px; align-items: center; }
.cal-nav a { color: var(--olive-dark); text-decoration: none; font-size: 20px; padding: 4px 10px; border-radius: 8px; }
.cal-nav a:hover { background: var(--cream-card); }
.cal-title { font-size: 22px; font-weight: bold; color: var(--olive-dark); min-width: 220px; text-align: center; }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-dow { text-align: center; font-family: 'Nunito', Helvetica, sans-serif; font-size: 11.5px; font-weight: bold; color: var(--text-muted); text-transform: uppercase; padding-bottom: 6px; }
.cal-cell {
  background: var(--white);
  border: 1px solid var(--sage-line);
  border-radius: 10px;
  min-height: 96px;
  padding: 8px;
  text-decoration: none;
  color: var(--text-dark);
  display: block;
  transition: box-shadow 0.15s;
}
.cal-cell:hover { box-shadow: 0 0 0 2px var(--sage); }
.cal-cell.other-month { background: var(--cream); opacity: 0.5; }
.cal-cell.today { border: 2px solid var(--olive-dark); }
.cal-daynum { font-weight: bold; font-size: 13.5px; color: var(--olive-dark); }
.cal-event {
  font-family: 'Nunito', Helvetica, sans-serif;
  font-size: 11px;
  background: var(--tan);
  color: var(--olive-dark);
  border-radius: 4px;
  padding: 2px 5px;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-event.sage { background: var(--sage-line); }
.cal-event-more { font-family: 'Nunito', Helvetica, sans-serif; font-size: 10.5px; color: var(--text-muted); margin-top: 2px; }

@media (max-width: 640px) {
  .cal-header { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
  .cal-header .cal-title { grid-column: 1 / -1; order: -1; min-width: 0; font-size: 19px; }
  .cal-header .cal-nav:last-child { justify-self: end; }
  .cal-nav a { font-size: 14px; padding: 6px 8px; }
}

.day-back { color: var(--olive); text-decoration: none; font-family: 'Nunito', Helvetica, sans-serif; font-size: 13.5px; }

.event-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--white);
  border: 1px solid var(--sage-line);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 10px;
}
.event-time {
  font-family: 'Nunito', Helvetica, sans-serif; font-weight: bold; color: var(--olive-dark);
  min-width: 55px;
}
.event-body { flex: 1; }
.event-title { font-weight: bold; }
.event-desc { font-size: 13px; color: var(--text-muted); }

/* ---------- Pense-bête flottant ---------- */
#pensebete-btn {
  position: fixed; right: 24px; bottom: 24px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--olive-dark);
  color: var(--cream);
  border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  z-index: 1000;
}
#pensebete-btn svg { width: 26px; height: 26px; }

#pensebete-panel {
  position: fixed; right: 24px; bottom: 92px;
  width: 320px; max-height: 460px;
  background: var(--cream);
  border: 1px solid var(--sage-line);
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.22);
  padding: 18px;
  display: none;
  flex-direction: column;
  z-index: 1000;
}
#pensebete-panel.open { display: flex; }
#pensebete-panel h3 {
  margin: 0 0 12px; font-size: 16px; color: var(--olive-dark);
  display: flex; align-items: center; gap: 8px;
}
#pensebete-form { display: flex; gap: 8px; margin-bottom: 12px; }
#pensebete-input {
  flex: 1; padding: 9px 12px; border-radius: 8px; border: 1.5px solid var(--sage-line);
  font-family: 'Nunito', Helvetica, sans-serif; font-size: 13.5px; background: var(--white);
}
#pensebete-form button {
  background: var(--olive-dark); color: var(--cream); border: none; border-radius: 8px;
  padding: 0 14px; font-weight: bold; cursor: pointer;
}
#pensebete-list { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.pensebete-item {
  background: var(--tan);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13.5px;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 8px;
}
.pensebete-item .txt { flex: 1; word-break: break-word; }
.pensebete-item button {
  background: none; border: none; color: var(--olive-dark); cursor: pointer;
  font-size: 15px; opacity: 0.6; line-height: 1;
}
.pensebete-item button:hover { opacity: 1; }
.pensebete-empty { color: var(--text-muted); font-size: 13px; font-style: italic; text-align: center; padding: 12px 0; }

/* ---------- Courses ---------- */
.courses-list { display: flex; flex-direction: column; gap: 8px; max-width: 560px; }
.course-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--white);
  border: 1px solid var(--sage-line);
  border-radius: 10px;
  padding: 12px 16px;
}
.course-item.bought { opacity: 0.55; }
.course-item.bought .course-label { text-decoration: line-through; }
.course-checkbox {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--olive-dark);
  background: none; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: var(--olive-dark);
  transition: background 0.15s ease, transform 0.1s ease;
}
.course-checkbox:hover { transform: scale(1.08); }
.course-label { flex: 1; font-family: 'Nunito', Helvetica, sans-serif; font-size: 14.5px; }
.add-inline-form { display: flex; gap: 10px; max-width: 560px; margin-bottom: 24px; }
.add-inline-form input {
  flex: 1; padding: 11px 14px; border-radius: 8px; border: 1.5px solid var(--sage-line);
  font-family: 'Nunito', Helvetica, sans-serif; font-size: 14.5px; background: var(--white);
}
@media (max-width: 640px) {
  .add-inline-form { flex-wrap: wrap; }
  .add-inline-form input { flex: 1 1 100%; min-width: 0; }
  .add-inline-form .btn { width: 100%; justify-content: center; }
}

/* ---------- Repas de la semaine ---------- */
.repas-table { width: 100%; border-collapse: separate; border-spacing: 8px; }
.repas-table th {
  font-family: 'Nunito', Helvetica, sans-serif; font-size: 12px; color: var(--olive-dark);
  text-transform: uppercase; letter-spacing: 0.5px; padding-bottom: 4px;
}
.repas-table td { vertical-align: top; }
.repas-moment-label {
  font-family: 'Nunito', Helvetica, sans-serif; font-size: 11px; color: var(--text-muted);
  text-transform: uppercase; margin-bottom: 4px; display: block;
}
.repas-table textarea {
  width: 100%; min-height: 64px; padding: 8px 10px;
  border: 1.5px solid var(--sage-line); border-radius: 8px;
  background: var(--white); font-family: 'Nunito', Helvetica, sans-serif; font-size: 13px;
  resize: vertical;
}
.repas-daycol { background: var(--cream-card); border-radius: 12px; padding: 10px; }
.repas-daycol.today-col { border: 2px solid var(--olive-dark); }

/* ---------- Badge pense-bête ---------- */
.pensebete-badge {
  position: absolute;
  top: -4px; right: -4px;
  background: var(--danger);
  color: white;
  font-family: 'Nunito', Helvetica, sans-serif;
  font-size: 11px;
  font-weight: bold;
  min-width: 20px; height: 20px;
  border-radius: 10px;
  align-items: center; justify-content: center;
  padding: 0 5px;
  border: 2px solid var(--cream);
}
#pensebete-btn { position: fixed; }

/* ---------- Suggestions (courses) ---------- */
.suggestions-box {
  background: var(--cream-card);
  border: 1px dashed var(--sage-line);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 18px;
  max-width: 560px;
}
.suggestions-box h4 {
  margin: 0 0 10px; font-size: 13px; color: var(--olive-dark);
  font-family: 'Nunito', Helvetica, sans-serif; text-transform: uppercase; letter-spacing: 0.5px;
}
.suggestion-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--white);
  border: 1px solid var(--sage-line);
  border-radius: 16px;
  padding: 5px 12px 5px 12px;
  font-family: 'Nunito', Helvetica, sans-serif; font-size: 13px;
  margin: 0 6px 6px 0;
  cursor: pointer;
}
.suggestion-chip:hover { background: var(--tan); }
.suggestion-chip button { background: none; border: none; cursor: pointer; color: var(--olive-dark); font-weight: bold; }

/* ---------- Impression : en-tête de marque, masqué à l'écran ---------- */
.print-header { display: none; }

@media print {
  .sidebar, .top-header, #pensebete-btn, #pensebete-panel, .btn, .add-inline-form, .suggestions-box,
  .course-item form, .top-bar a, .cal-nav, .ingredient-input, .page-sub a { display: none !important; }
  .layout { display: block; }
  .main { padding: 20px 30px; max-width: 100%; }
  body { background: white; }

  .print-header {
    display: flex; align-items: center; gap: 14px;
    border-bottom: 3px solid var(--olive-dark);
    padding-bottom: 14px; margin-bottom: 24px;
  }
  .print-header-icon {
    width: 30px; height: 30px; padding: 6px;
    border-radius: 50%;
    border: 2px solid var(--olive-dark); color: var(--olive-dark);
    flex-shrink: 0;
  }
  .print-header-title { font-family: Georgia, serif; font-weight: bold; font-size: 19px; color: var(--olive-dark); }
  .print-header-date { font-family: Helvetica, sans-serif; font-size: 11px; color: var(--text-muted); }

  h1 { font-size: 22px; }
  .course-item { border: none; border-bottom: 1px solid #ddd; border-radius: 0; padding: 8px 4px; }
  .course-item.bought .course-label { text-decoration: line-through; color: #999; }
  .course-checkbox { border-color: #999; }
  .repas-table textarea {
    border: none; background: transparent; resize: none;
    font-family: Georgia, serif; font-size: 13px; color: var(--text-dark);
  }
  .repas-daycol { background: var(--cream-card); border: 1px solid var(--sage-line); }
  .cal-header { border-bottom: 2px solid var(--olive-dark); padding-bottom: 10px; }
}
.print-btn-row { margin-bottom: 20px; }