/* Acti-V — chantier 1. Mobile d'abord, utilisable au bureau. */
:root {
  --fond: #f7f7f4;
  --carte: #ffffff;
  --texte: #1c2420;
  --texte-doux: #55615a;
  --bordure: #d8ddd9;
  --accent: #14532d;
  --accent-texte: #ffffff;
  --bleu: #2563eb;
  --rouge: #dc2626;
  --vert: #16a34a;
  --orange: #ea8600;
  --rayon-nav: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fond);
  color: var(--texte);
  line-height: 1.45;
  padding-bottom: 4.5rem; /* place pour la navigation basse (mobile) */
}

.app-header {
  background: var(--accent);
  color: var(--accent-texte);
  padding: 0.9rem 1rem 0.7rem;
}
.app-header h1 { margin: 0; font-size: 1.5rem; }
.app-header .sous-titre { margin: 0.1rem 0 0; opacity: 0.85; font-size: 0.9rem; }

/* Navigation : basse sur mobile, en barre sous l'en-tête au bureau. */
.app-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  background: var(--carte);
  border-top: 1px solid var(--bordure);
  z-index: 10;
}
.app-nav button {
  flex: 1;
  appearance: none;
  border: 0;
  background: none;
  padding: 0.7rem 0.2rem calc(0.7rem + env(safe-area-inset-bottom));
  font-size: 0.85rem;
  color: var(--texte-doux);
  cursor: pointer;
}
.app-nav button.actif { color: var(--accent); font-weight: 700; box-shadow: inset 0 2px 0 var(--accent); }

main { max-width: 62rem; margin: 0 auto; padding: 1rem; }
h2 { margin-top: 0.2rem; }

/* Écrans d'attente */
.badge-attente {
  display: inline-block;
  background: #fef3c7;
  border: 1px solid #f59e0b;
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  font-weight: 600;
  font-size: 0.9rem;
}
.section-attente p { max-width: 38rem; }

/* Filtres */
.filtres {
  display: flex; flex-wrap: wrap; gap: 0.7rem;
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-nav);
  padding: 0.8rem;
  margin-bottom: 0.8rem;
}
.filtres label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; font-weight: 600; flex: 1 1 9rem; min-width: 0; }
.filtres select, .filtres input[type="search"] {
  font: inherit; font-weight: 400;
  padding: 0.45rem 0.5rem;
  border: 1px solid var(--bordure);
  border-radius: 6px;
  background: #fff;
  max-width: 100%;
  min-width: 0;
}
.filtres button { align-self: end; font: inherit; padding: 0.45rem 0.8rem; border-radius: 6px; border: 1px solid var(--bordure); background: var(--fond); cursor: pointer; }

/* Cartes recettes */
.liste-recettes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.carte-recette {
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-nav);
  padding: 0.8rem 0.9rem;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font: inherit;
  display: block;
}
.carte-recette:hover, .carte-recette:focus-visible { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px rgba(20, 83, 45, 0.25); }
.carte-recette h3 { margin: 0 0 0.3rem; font-size: 1.05rem; }
.meta { color: var(--texte-doux); font-size: 0.88rem; margin: 0.15rem 0; }
.pastille { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%; margin-right: 0.35rem; vertical-align: baseline; }
.couleur-bleu { background: var(--bleu); }
.couleur-rouge { background: var(--rouge); }
.couleur-vert { background: var(--vert); }
.couleur-orange { background: var(--orange); }
.badge-pref {
  display: inline-block; font-size: 0.78rem; font-weight: 700;
  border-radius: 999px; padding: 0.1rem 0.55rem; margin-right: 0.35rem;
  background: #e0e7ff; color: #3730a3;
}
.badge-pref.exclusion { background: #fee2e2; color: #991b1b; }

/* Détail */
#detail-retour { font: inherit; padding: 0.45rem 0.8rem; border-radius: 6px; border: 1px solid var(--bordure); background: var(--carte); cursor: pointer; margin-bottom: 0.8rem; }
.fiche { background: var(--carte); border: 1px solid var(--bordure); border-radius: var(--rayon-nav); padding: 1rem; }
.fiche h2 { margin-bottom: 0.3rem; }
.fiche h3 { margin: 1.1rem 0 0.4rem; }
.fiche table { border-collapse: collapse; width: 100%; }
.fiche th, .fiche td { text-align: left; padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--bordure); font-size: 0.95rem; vertical-align: top; }
.fiche ol.etapes { padding-left: 1.3rem; }
.fiche ol.etapes li { margin-bottom: 0.45rem; }
.bloc-pref { border: 1px solid var(--bordure); border-radius: var(--rayon-nav); padding: 0.8rem; margin-top: 1.1rem; background: var(--fond); }
.bloc-pref textarea { width: 100%; font: inherit; padding: 0.5rem; border: 1px solid var(--bordure); border-radius: 6px; min-height: 4.2rem; }
.bloc-pref .ligne-case { display: flex; gap: 0.5rem; align-items: center; margin: 0.6rem 0; font-weight: 600; }
.bloc-pref button { font: inherit; padding: 0.45rem 0.9rem; border-radius: 6px; border: 0; background: var(--accent); color: var(--accent-texte); cursor: pointer; }
#pref-statut { font-size: 0.88rem; color: var(--texte-doux); margin-left: 0.5rem; }

/* Écran Semaine (chantier 2) */
.sem-blocage { border: 1px solid var(--rouge); border-left: 6px solid var(--rouge); border-radius: var(--rayon-nav); padding: 0.8rem 1rem; margin: 1rem 0; background: #fdf2f2; }
.sem-blocage h3 { margin-top: 0; color: var(--rouge); }
.sem-bandeau { border: 1px solid var(--bordure); border-left: 6px solid var(--orange); border-radius: var(--rayon-nav); padding: 0.6rem 1rem; margin: 0.8rem 0; background: var(--carte); }
.sem-bandeau h3 { margin: 0.2rem 0 0.4rem; font-size: 1rem; }
.sem-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.6rem 0; }
.sem-actions button, #sem-generer { font: inherit; padding: 0.5rem 0.9rem; border-radius: 6px; border: 1px solid var(--accent); background: var(--carte); color: var(--accent); cursor: pointer; font-weight: 600; }
#sem-generer { background: var(--accent); color: var(--accent-texte); border: 0; }
.sem-score { border: 1px solid var(--bordure); border-radius: var(--rayon-nav); padding: 0.8rem 1rem; margin: 0.8rem 0; background: var(--carte); }
.sem-score h3 { margin-top: 0; }
.score-grille { display: grid; grid-template-columns: 1fr; gap: 0.35rem 1.2rem; margin: 0; }
.score-grille div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dashed var(--bordure); padding-bottom: 0.25rem; }
.score-grille dt { color: var(--texte-doux); }
.score-grille dd { margin: 0; font-weight: 600; text-align: right; }
.sem-echanges { border: 1px solid var(--bordure); border-radius: var(--rayon-nav); padding: 0.8rem 1rem; margin: 0.8rem 0; background: var(--carte); }
.sem-grille { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 0.8rem; }
.sem-jour h3 { margin: 0.2rem 0 0.5rem; }
.sem-case { background: var(--carte); border: 1px solid var(--bordure); border-radius: var(--rayon-nav); padding: 0.6rem 0.8rem; margin-bottom: 0.5rem; }
.sem-case.verrouillee { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.sem-moment { margin: 0; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--texte-doux); }
.sem-titre { margin: 0.15rem 0; font-weight: 700; }
.sem-verrou { font: inherit; font-size: 0.85rem; padding: 0.3rem 0.6rem; border-radius: 6px; border: 1px solid var(--bordure); background: var(--fond); cursor: pointer; }
.badge-lot, .badge-auchoix { display: inline-block; font-size: 0.75rem; font-weight: 600; border-radius: 999px; padding: 0.1rem 0.5rem; margin-left: 0.35rem; background: #eef4ee; color: var(--accent); }
.badge-auchoix { background: #fdf3e3; color: #8a5a00; }
@media (min-width: 720px) {
  .sem-grille { grid-template-columns: 1fr 1fr; }
  .score-grille { grid-template-columns: 1fr 1fr; }
}

/* Ajustement de la semaine (chantier 3) */
.sem-effort { border: 1px solid var(--accent); border-left: 6px solid var(--accent); border-radius: var(--rayon-nav); padding: 0.6rem 1rem; margin: 0.8rem 0; background: #eef4ee; }
.sem-effort h3 { margin: 0.2rem 0 0.4rem; font-size: 1rem; }
.sem-effort p { margin: 0.25rem 0; }
.sem-ecart { color: #991b1b; font-weight: 700; }
.sem-ajustement { border: 1px solid var(--orange); border-left: 6px solid var(--orange); border-radius: var(--rayon-nav); padding: 0.8rem 1rem; margin: 0.8rem 0; background: #fffbf2; }
.sem-ajustement h3 { margin-top: 0; }
.sem-ajustement table { border-collapse: collapse; width: 100%; margin: 0.5rem 0; }
.sem-ajustement th, .sem-ajustement td { text-align: left; padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--bordure); font-size: 0.92rem; }
.sem-ajustement .actions-ajustement { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.sem-ajustement button, .sem-remplacement button, .sem-echanges button {
  font: inherit; font-size: 0.9rem; padding: 0.45rem 0.8rem; border-radius: 6px;
  border: 1px solid var(--accent); background: var(--carte); color: var(--accent); cursor: pointer; font-weight: 600;
}
.sem-remplacement { border: 1px solid var(--bordure); border-radius: var(--rayon-nav); padding: 0.8rem 1rem; margin: 0.8rem 0; background: var(--carte); }
.sem-remplacement h3 { margin-top: 0; }
.sem-prop-liste { list-style: none; margin: 0.5rem 0; padding: 0; display: grid; gap: 0.5rem; }
.sem-prop-liste li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; border: 1px solid var(--bordure); border-radius: 8px; padding: 0.5rem 0.7rem; }
.sem-prop-liste .prop-titre { font-weight: 700; }
.sem-biblio { border: 1px dashed var(--bordure); border-radius: var(--rayon-nav); padding: 0.6rem 1rem; margin: 0.8rem 0; background: var(--carte); }
.sem-biblio summary { font-weight: 700; cursor: pointer; }
.sem-biblio-liste { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.6rem; }
.sem-biblio-chip {
  font: inherit; font-size: 0.85rem; text-align: left;
  border: 1px solid var(--bordure); border-radius: 999px; background: var(--fond);
  padding: 0.35rem 0.7rem; cursor: grab;
}
.sem-biblio-chip:active { cursor: grabbing; }
.sem-case.survol-depot { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(234, 134, 0, 0.35); }
.sem-case[draggable="true"] { cursor: grab; }
.sem-remplacer { font: inherit; font-size: 0.85rem; padding: 0.3rem 0.6rem; border-radius: 6px; border: 1px solid var(--accent); background: var(--carte); color: var(--accent); cursor: pointer; font-weight: 600; margin-left: 0.4rem; }
.badge-ecart { display: inline-block; font-size: 0.75rem; font-weight: 700; border-radius: 999px; padding: 0.1rem 0.5rem; margin-left: 0.35rem; background: #fee2e2; color: #991b1b; }

.app-footer { max-width: 62rem; margin: 0 auto; padding: 0 1rem 1rem; color: var(--texte-doux); font-size: 0.82rem; }

@media (min-width: 720px) {
  body { padding-bottom: 0; }
  .app-nav {
    position: static;
    border-top: 0;
    border-bottom: 1px solid var(--bordure);
    justify-content: center;
  }
  .app-nav button { flex: 0 1 11rem; padding: 0.7rem 0.2rem; }
  .app-nav button.actif { box-shadow: inset 0 -2px 0 var(--accent); }
  .liste-recettes { grid-template-columns: 1fr 1fr; }
}

/* ---- Chantier 4 : Aujourd'hui, Préparation, mode cuisine ---- */
.auj-onglets { display: flex; gap: 0.5rem; margin: 0.8rem 0; }
.auj-onglets button { font: inherit; font-weight: 600; padding: 0.5rem 0.9rem; border-radius: 999px; border: 1px solid var(--bordure); background: var(--carte); cursor: pointer; }
.auj-onglets button.actif { background: var(--accent); color: #fff; border-color: var(--accent); }
.auj-journav { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0.6rem 0; }
.auj-journav > button { font: inherit; font-size: 0.9rem; padding: 0.4rem 0.7rem; border-radius: 6px; border: 1px solid var(--bordure); background: var(--carte); cursor: pointer; }
.auj-jours { display: flex; gap: 0.35rem; flex-wrap: wrap; flex: 1; }
.auj-jour-chip { font: inherit; font-size: 0.85rem; padding: 0.35rem 0.6rem; border-radius: 999px; border: 1px solid var(--bordure); background: var(--fond); cursor: pointer; }
.auj-jour-chip.actif { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 700; }
.auj-repas-liste { display: grid; grid-template-columns: 1fr; gap: 0.8rem; }
.auj-repas { border: 1px solid var(--bordure); border-radius: 8px; padding: 0.7rem 0.9rem; background: var(--carte); }
.auj-titre { font-weight: 700; font-size: 1.05rem; margin: 0.3rem 0; }
.auj-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap; }
.auj-actions button { font: inherit; font-size: 0.9rem; font-weight: 600; padding: 0.45rem 0.8rem; border-radius: 6px; border: 1px solid var(--accent); background: var(--carte); color: var(--accent); cursor: pointer; }
.auj-actions .auj-cuisiner { background: var(--accent); color: #fff; }
.auj-prep-bloc { border: 1px solid var(--bordure); border-radius: 8px; padding: 0.6rem 0.9rem; margin: 0.6rem 0; background: var(--carte); }
.auj-prep-bloc h4 { margin: 0.2rem 0 0.4rem; }
.auj-prep-bloc ul { margin: 0.2rem 0; padding-left: 1.2rem; }
.auj-suivi-bloc { margin: 1.2rem 0; }
.gros-bouton { font: inherit; font-size: 1.05rem; font-weight: 700; padding: 0.8rem 1.4rem; border-radius: 8px; border: 0; background: var(--accent); color: #fff; cursor: pointer; width: 100%; }

.prep-progression { font-weight: 700; }
.prep-bloc { border: 1px solid var(--bordure); border-radius: 8px; padding: 0.6rem 0.9rem; margin: 0.7rem 0; background: var(--carte); }
.prep-bloc h4 { margin: 0.2rem 0 0.5rem; }
.prep-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.prep-item { border-top: 1px dashed var(--bordure); padding-top: 0.6rem; }
.prep-item:first-child { border-top: 0; padding-top: 0; }
.prep-case { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; font-weight: 700; }
.prep-case input { width: 1.4rem; height: 1.4rem; flex: 0 0 auto; }
.prep-item.fait .prep-item-titre { text-decoration: line-through; opacity: 0.65; }
.prep-item .meta { margin: 0.15rem 0 0.15rem 2rem; }
.prep-cuisiner { font: inherit; font-size: 0.88rem; font-weight: 600; margin-left: 2rem; padding: 0.35rem 0.7rem; border-radius: 6px; border: 1px solid var(--accent); background: var(--carte); color: var(--accent); cursor: pointer; }

.cuisine-surcouche { position: fixed; inset: 0; z-index: 60; overflow-y: auto; background: var(--fond); padding: 1rem; }
.cuisine-carte { max-width: 46rem; margin: 0 auto; font-size: 1.22rem; line-height: 1.55; }
.cuisine-entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.cuisine-entete h2 { font-size: 1.7rem; margin: 0.3rem 0; }
.cuisine-fermer { font: inherit; font-size: 1rem; font-weight: 700; padding: 0.55rem 1rem; border-radius: 8px; border: 1px solid var(--bordure); background: var(--carte); cursor: pointer; flex: 0 0 auto; }
.cuisine-meta { color: var(--texte-doux); font-size: 1.02rem; }
.cuisine-carte h3 { font-size: 1.35rem; margin: 1.2rem 0 0.5rem; }
.cuisine-ingredients { margin: 0.3rem 0; padding-left: 1.4rem; }
.cuisine-ingredients li { margin: 0.3rem 0; }
.cuisine-ing-qte { font-weight: 700; }
.cuisine-progres { font-weight: 700; }
.cuisine-etapes { list-style: none; margin: 0.3rem 0; padding: 0; display: grid; gap: 0.6rem; }
.cuisine-etape { border: 1px solid var(--bordure); border-radius: 10px; background: var(--carte); }
.cuisine-etape label { display: flex; gap: 0.9rem; align-items: flex-start; padding: 0.9rem 1rem; cursor: pointer; }
.cuisine-etape input { width: 1.8rem; height: 1.8rem; flex: 0 0 auto; margin-top: 0.25rem; }
.cuisine-etape.fait label span { text-decoration: line-through; opacity: 0.6; }
.cuisine-alerte { border: 2px solid var(--orange); border-radius: 10px; background: #fff7ed; padding: 0.8rem 1.1rem; }
#cuisine-reinit { font: inherit; font-size: 1rem; padding: 0.55rem 1rem; border-radius: 8px; border: 1px solid var(--bordure); background: var(--carte); cursor: pointer; }

@media (min-width: 720px) {
  .auj-repas-liste { grid-template-columns: 1fr 1fr 1fr; }
  .gros-bouton { width: auto; }
}

/* ============ Courses — chantier 5 ============ */
.crs-outils { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 1rem 0; }
.crs-outils button { font: inherit; font-size: 0.92rem; font-weight: 600; padding: 0.45rem 0.8rem; border-radius: 6px; border: 1px solid var(--bordure); background: var(--carte); cursor: pointer; }
.crs-outils .ligne-case { display: flex; gap: 0.5rem; align-items: center; font-weight: 600; }
.crs-total { border: 1px solid var(--bordure); border-left: 4px solid var(--accent); border-radius: 8px; background: var(--carte); padding: 0.7rem 1rem; font-weight: 600; }
.crs-rayon { margin: 1.4rem 0 0.4rem; border-bottom: 2px solid var(--bordure); padding-bottom: 0.25rem; }
.crs-article { border: 1px solid var(--bordure); border-radius: 10px; background: var(--carte); padding: 0.8rem 1rem; margin: 0.6rem 0; }
.crs-article h4 { margin: 0 0 0.5rem; font-size: 1.02rem; }
.crs-article.crs-deja-fait { opacity: 0.62; }
.crs-badge { display: inline-block; font-size: 0.78rem; font-weight: 600; background: #fef3c7; color: #92400e; border-radius: 999px; padding: 0.12rem 0.55rem; margin-left: 0.3rem; vertical-align: middle; }
.crs-ligne-qte { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.35rem 0; }
.crs-ligne-qte .ligne-case { display: flex; gap: 0.45rem; align-items: center; font-weight: 600; }
.crs-ligne-qte input[type="checkbox"] { width: 1.3rem; height: 1.3rem; }
.crs-qte { font: inherit; font-weight: 700; width: 12rem; max-width: 60vw; padding: 0.35rem 0.5rem; border: 1px solid var(--bordure); border-radius: 6px; }
.crs-reinit-qte { font: inherit; font-size: 0.82rem; padding: 0.25rem 0.55rem; border-radius: 6px; border: 1px solid var(--bordure); background: var(--carte); cursor: pointer; }
.crs-provenance { margin: 0.5rem 0; }
.crs-provenance summary { cursor: pointer; font-weight: 600; font-size: 0.92rem; }
.crs-provenance ul { margin: 0.4rem 0 0.2rem; padding-left: 1.3rem; font-size: 0.9rem; }
.crs-prix-ligne { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.5rem 0; }
.crs-prix-ligne input { font: inherit; width: 7rem; padding: 0.35rem 0.5rem; border: 1px solid var(--bordure); border-radius: 6px; }
.crs-bannieres { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; margin: 0.5rem 0 0.1rem; padding: 0; font-size: 0.92rem; }
#crs-impression { display: none; }

@media print {
  body > header, body > nav, body > main, body > footer, #cuisine-surcouche { display: none !important; }
  #crs-impression { display: block; font-family: inherit; }
  #crs-impression pre { white-space: pre-wrap; font: inherit; font-size: 0.95rem; line-height: 1.5; }
}

/* ============ Suivi — chantier 6 ============ */
#section-suivi h5 { margin: 1.1rem 0 0.4rem; font-size: 0.98rem; letter-spacing: 0.02em; }
#section-suivi label[for="sui-notes"] { display: block; margin: 1.1rem 0 0.4rem; font-weight: 700; font-size: 0.98rem; letter-spacing: 0.02em; }
#sui-notes { width: 100%; font: inherit; padding: 0.55rem 0.7rem; border: 1px solid var(--bordure); border-radius: 8px; background: var(--carte); }
.sui-repas { border: 1px solid var(--bordure); border-radius: 10px; background: var(--carte); padding: 0.8rem 1rem; margin: 0.6rem 0; }
.sui-repas .auj-titre { margin: 0.2rem 0; }
.sui-etats { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.55rem; }
.sui-etat { font: inherit; font-size: 1rem; font-weight: 600; min-width: 6.2rem; padding: 0.6rem 0.9rem; border-radius: 8px; border: 1px solid var(--bordure); background: var(--carte); cursor: pointer; }
.sui-etat.actif { background: var(--accent); color: var(--accent-texte); border-color: var(--accent); }
.sui-remplacement { display: block; margin-top: 0.6rem; font-weight: 600; }
.sui-remplacement select { display: block; width: 100%; max-width: 32rem; margin-top: 0.3rem; font: inherit; font-weight: 400; padding: 0.5rem 0.6rem; border: 1px solid var(--bordure); border-radius: 8px; background: var(--carte); }
.sui-echelle { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.sui-echelle-btn { font: inherit; font-size: 1.05rem; font-weight: 700; width: 2.9rem; height: 2.9rem; border-radius: 8px; border: 1px solid var(--bordure); background: var(--carte); cursor: pointer; }
.sui-echelle-btn.actif { background: var(--accent); color: var(--accent-texte); border-color: var(--accent); }
.sui-hebdo { display: grid; gap: 0.35rem; max-width: 32rem; }
.sui-hebdo label, .sui-hebdo > span { font-weight: 700; margin-top: 0.7rem; }
.sui-hebdo input { font: inherit; width: 100%; padding: 0.55rem 0.7rem; border: 1px solid var(--bordure); border-radius: 8px; background: var(--carte); }
.sui-hebdo .meta { margin: 0.15rem 0 0; }
.sui-entrainements-ligne { display: flex; align-items: center; gap: 0.8rem; }
.sui-sur3 { font-weight: 700; font-size: 1.05rem; }
.sui-rappel { border: 1px solid var(--bordure); border-left: 4px solid var(--accent); border-radius: 8px; background: var(--carte); padding: 0.7rem 1rem; margin: 1.2rem 0; max-width: 44rem; }
.sui-rappel p { margin: 0; }
.sui-table-vue { border-collapse: collapse; width: 100%; max-width: 52rem; margin: 0.6rem 0; }
.sui-table-vue th, .sui-table-vue td { border: 1px solid var(--bordure); padding: 0.45rem 0.7rem; text-align: left; }
.sui-table-vue thead th { background: var(--carte); }
.sui-table-vue tr.sui-semaine-choisie td { font-weight: 700; }
.sui-remplacements-liste { padding-left: 1.3rem; }
.sui-remplacements-liste li { margin: 0.5rem 0; }

/* ============ Sauvegarde — chantier 7 ============ */
.sauv-bloc { border: 1px solid var(--bordure); border-left: 4px solid var(--accent); border-radius: 8px; background: var(--carte); padding: 0.8rem 1rem; margin: 1rem 0 1.4rem; max-width: 44rem; }
.sauv-bloc h3 { margin-top: 0; }
.sauv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0.7rem 0; }
.sauv-actions button { font: inherit; font-weight: 600; padding: 0.55rem 0.95rem; border-radius: 6px; border: 1px solid var(--accent); background: var(--carte); color: var(--accent); cursor: pointer; }
#sauv-exporter { background: var(--accent); color: var(--accent-texte); border: 0; }
.sauv-actions label { font-weight: 600; }
#sauv-fichier { font: inherit; max-width: 100%; }
.sauv-confirmation { border: 1px solid var(--orange, #b45309); border-left: 6px solid var(--orange, #b45309); border-radius: 8px; padding: 0.7rem 1rem; margin: 0.8rem 0; background: var(--carte); }
.sauv-confirmation ul { margin: 0.4rem 0; padding-left: 1.3rem; }
.case-sans-recette { opacity: 0.85; border-style: dashed; }

/* ============ Correctif de rendu — chantier 7 ============ */
/* Sélecteurs de semaine sauvegardée (Semaine, Courses, Suivi) : leurs
 * options portent une étiquette longue (date + modèle + état) qui, sans
 * borne, forçait le <select> à ~474 px et faisait déborder l'écran
 * Semaine à 390 px. Le sélecteur épouse désormais la largeur disponible. */
#sem-bloc-semaines label, #crs-bloc-semaines label, #sui-bloc-semaines label { display: block; max-width: 44rem; }
#sem-choix-semaine, #crs-choix-semaine, #sui-choix-semaine { width: 100%; max-width: 100%; min-width: 0; }