:root {
  --pink: #d96b84;
  --pink-dark: #b8506a;
  --pink-light: #fbe8ec;
  --cream: #fdf8f3;
  --ink: #3a2e2c;
  --muted: #8a7a76;
  --border: #ece2da;
  --green: #6f9c76;
  --blue: #4f8fc0;
  --orange: #c98a3d;
  --orange-light: #fbf0e0;
  --purple: #8a6bc9;
  --radius: 14px;
  /* Textes plus grands (version en ligne) : tout le site est en rem,
     changer ces valeurs agrandit/réduit tout d'un coup. */
  font-size: 18px;
}
@media (min-width: 1400px) { :root { font-size: 19px; } }
@media (max-width: 760px) { :root { font-size: 17px; } }
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: var(--cream);
  /* Petits dessins de cuisine (cuillere, fourchette, pomme, fouet, brin
     d'herbe) en blanc tres discret, pour "aerer" le fond de page -- surtout
     visible dans les marges gauche/droite quand l'ecran est plus large que
     le contenu (voir la regle main plus bas, max-width: 1600px). */
  background-image:
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNjAiIGhlaWdodD0iMjYwIiB2aWV3Qm94PSIwIDAgMjYwIDI2MCI+CiAgPGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjIuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBvcGFjaXR5PSIwLjU1Ij4KICAgIDwhLS0gY3VpbGzDqHJlIC0tPgogICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzAsMjUpIHJvdGF0ZSgtOCkiPgogICAgICA8ZWxsaXBzZSBjeD0iMCIgY3k9IjAiIHJ4PSI5IiByeT0iMTMiLz4KICAgICAgPGxpbmUgeDE9IjAiIHkxPSIxMyIgeDI9IjAiIHkyPSI0NiIvPgogICAgPC9nPgogICAgPCEtLSBmb3VyY2hldHRlIC0tPgogICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTUwLDMwKSByb3RhdGUoNikiPgogICAgICA8bGluZSB4MT0iLTgiIHkxPSItMTQiIHgyPSItOCIgeTI9IjIiLz4KICAgICAgPGxpbmUgeDE9IjAiIHkxPSItMTQiIHgyPSIwIiB5Mj0iMiIvPgogICAgICA8bGluZSB4MT0iOCIgeTE9Ii0xNCIgeDI9IjgiIHkyPSIyIi8+CiAgICAgIDxwYXRoIGQ9Ik0gLTgsMiBRIDAsMTAgOCwyIi8+CiAgICAgIDxsaW5lIHgxPSIwIiB5MT0iNiIgeDI9IjAiIHkyPSI0NiIvPgogICAgPC9nPgogICAgPCEtLSBwb21tZSAtLT4KICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYwLDE2MCkiPgogICAgICA8cGF0aCBkPSJNIC0xNCwyIEMgLTE0LC0xMCAtNCwtMTQgMCwtOSBDIDQsLTE0IDE0LC0xMCAxNCwyIEMgMTQsMTUgNCwyMiAwLDIyIEMgLTQsMjIgLTE0LDE1IC0xNCwyIFoiLz4KICAgICAgPGxpbmUgeDE9IjAiIHkxPSItOSIgeDI9IjEiIHkyPSItMTgiLz4KICAgICAgPHBhdGggZD0iTSAxLC0xNyBDIDYsLTIwIDEwLC0xNyA4LC0xMyIvPgogICAgPC9nPgogICAgPCEtLSBmb3VldCAtLT4KICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIwMCwxNDApIHJvdGF0ZSgxMCkiPgogICAgICA8bGluZSB4MT0iMCIgeTE9Ii0zMCIgeDI9IjAiIHkyPSItNCIvPgogICAgICA8cGF0aCBkPSJNIC00LC00IEMgLTEyLDQgLTEyLDIwIC00LDI4Ii8+CiAgICAgIDxwYXRoIGQ9Ik0gLTEuNSwtNCBDIC02LDYgLTYsMjAgLTEuNSwyOCIvPgogICAgICA8cGF0aCBkPSJNIDEuNSwtNCBDIDYsNiA2LDIwIDEuNSwyOCIvPgogICAgICA8cGF0aCBkPSJNIDQsLTQgQyAxMiw0IDEyLDIwIDQsMjgiLz4KICAgIDwvZz4KICAgIDwhLS0gZmV1aWxsZSAvIGhlcmJlIC0tPgogICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTkwLDIyMCkgcm90YXRlKC0yMCkiPgogICAgICA8cGF0aCBkPSJNIDAsMTQgQyAyLDAgMTAsLTggMjAsLTEwIEMgMTQsLTIgMTAsNiAwLDE0IFoiLz4KICAgICAgPGxpbmUgeDE9IjAiIHkxPSIxNCIgeDI9Ii02IiB5Mj0iMjIiLz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPgo="),
    linear-gradient(rgba(253,248,243,0.94), rgba(253,248,243,0.94)),
    url("/assets/bg-scene.jpg");
  /* 3 couches : les petits dessins blancs par-dessus, une teinte crème
     translucide au milieu (le "certain de transparence" demandé), et la
     photo tout en fond -- surtout visible dans les marges gauche/droite
     sur un grand écran, pour ne plus laisser le rose clair tout seul. */
  background-repeat: repeat, no-repeat, no-repeat;
  background-position: 0 0, center, center 30%;
  background-size: 260px 260px, cover, cover;
  /* "scroll" partout (pas "fixed") : un fond fixe se comporte mal en plein
     page sur mobile (Safari iOS l'ignore ou l'affiche mal) et sur une page
     plus haute que l'écran. */
  background-attachment: scroll;
  color: var(--ink);
}
#app { min-height: 100vh; display: flex; flex-direction: column; }

/* Header */
.header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px; background: linear-gradient(135deg, #ffffff, var(--pink-light) 180%);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.2rem; color: var(--pink-dark); }
.nav { display: flex; gap: 4px; }
.nav button {
  background: none; border: none; padding: 8px 16px; border-radius: 999px;
  font-size: 0.95rem; cursor: pointer; color: var(--muted); font-weight: 600;
}
.nav button.active { background: var(--pink-light); color: var(--pink-dark); }
.profile { display: flex; align-items: center; gap: 10px; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; color: white; font-weight: 700; font-size: 0.9rem;
}
.btn {
  background: var(--pink); color: white; border: none; padding: 9px 16px;
  border-radius: 999px; font-weight: 600; cursor: pointer; font-size: 0.9rem;
}
.btn:hover { background: var(--pink-dark); }
.btn.secondary { background: white; color: var(--pink-dark); border: 1px solid var(--pink); }
.btn.ghost { background: none; color: var(--muted); border: 1px solid var(--border); }
.btn.small { padding: 5px 12px; font-size: 0.8rem; }
.btn.danger { background: #c0524a; }
/* Ajouté le 2026-09-22 : sans ce style, un bouton désactivé (ex. "Ajouter
   au calendrier" tant qu'aucune recette n'est sélectionnée) avait
   exactement la même apparence qu'un bouton actif, ce qui rendait
   invisible le fait qu'un clic ne faisait rien. */
.btn:disabled, .btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn:disabled:hover, .btn[disabled]:hover { background: var(--pink); }
.btn.secondary:disabled:hover, .btn.secondary[disabled]:hover { background: white; }

/* Pleine largeur : plus de limite à 1600px. */
main { flex: 1; padding: 28px clamp(16px, 3vw, 48px); max-width: none; margin: 0; width: 100%; }

/* Bandeau "effet peinture" en tête de chaque page (Tableau de bord,
   Recettes, Calendrier, Liste de courses) : une bande à bords irréguliers
   façon coup de pinceau, teintée dans la palette rose/pêche de l'appli,
   avec la photo de fond qui transparaît légèrement dessous et le nom de la
   page en écriture manuscrite par-dessus. */
.page-banner {
  position: relative;
  height: 128px;
  margin: -28px -36px 26px;
  clip-path: polygon(
    0% 20%, 4% 6%, 9% 16%, 15% 2%, 22% 12%, 30% 0%, 38% 10%, 46% 2%, 54% 13%, 62% 3%, 70% 11%, 78% 1%, 86% 9%, 94% 4%, 100% 14%,
    100% 80%, 95% 95%, 88% 85%, 80% 98%, 72% 89%, 64% 99%, 56% 90%, 48% 98%, 40% 91%, 32% 99%, 24% 89%, 16% 98%, 8% 91%, 3% 97%, 0% 86%
  );
  background:
    linear-gradient(120deg, rgba(217,107,132,0.9), rgba(201,138,61,0.72)),
    url('/assets/bg-scene.jpg') center 38%/cover no-repeat;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(184,80,106,0.2);
}
.page-banner h1 {
  font-family: 'Dancing Script', cursive;
  font-size: 3.1rem;
  font-weight: 700;
  color: #fffaf6;
  text-shadow: 0 2px 12px rgba(90,40,50,0.4);
  margin: 0;
  letter-spacing: 0.01em;
}
@media (max-width: 760px) {
  .page-banner { height: 96px; margin: -14px -14px 18px; }
  .page-banner h1 { font-size: 2.2rem; }
}
@media print {
  .page-banner { display: none; }
}

/* Recipes grid */
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.toolbar input[type=text] {
  flex: 1; min-width: 200px; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--border);
  font-size: 0.95rem;
}
.chip {
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: white;
  font-size: 0.82rem; cursor: pointer; color: var(--muted);
}
.chip.active { background: var(--pink); border-color: var(--pink); color: white; }
.chips-row { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.filter-group-label {
  font-size: 0.72rem; font-weight: 700; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.03em; flex-shrink: 0; width: 100px;
}
.filter-group .chips-row { flex: 1; margin-bottom: 0; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; }
.card {
  background: white; border-radius: var(--radius); overflow: hidden; cursor: pointer;
  border: 1px solid var(--border); transition: transform .1s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.06); }
.card .thumb {
  height: 170px; background: var(--pink-light) center/cover no-repeat;
  display: flex; align-items: center; justify-content: center; font-size: 2.2rem;
}
.card .thumb:not([style*="background-image"]) {
  background: linear-gradient(135deg, var(--pink-light), var(--orange-light));
  font-size: 2.8rem;
}
.card .body { padding: 14px 16px; }
.card h3 { margin: 0 0 6px; font-size: 1.05rem; }
.tag-row { display: flex; gap: 5px; flex-wrap: wrap; }
.tag { background: var(--pink-light); color: var(--pink-dark); font-size: 0.72rem; padding: 3px 8px; border-radius: 999px; }
.tag.muted { background: #f1ede8; color: var(--muted); }
.tag.rating { background: #fff3d6; color: #9a6b00; letter-spacing: 1px; }

.empty-state { text-align: center; padding: 60px 20px; color: var(--muted); font-size: 1.05rem; }

/* Modal */
.overlay {
  position: fixed; inset: 0; background: rgba(58,46,44,0.45); display: flex;
  align-items: center; justify-content: center; z-index: 100; padding: 20px;
}
.modal {
  background: white; border-radius: var(--radius); width: 100%; max-width: 640px;
  max-height: 90vh; overflow-y: auto; padding: 26px;
}
.modal.wide { max-width: 820px; }
.modal h2 { margin-top: 0; }
.modal-close { float: right; background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--muted); }
.field { margin-bottom: 14px; }
.field label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 5px; color: var(--muted); }
.field input[type=text], .field input[type=url], .field input[type=number], .field input[type=password],
.field select, .field textarea {
  width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border); font-size: 0.95rem;
  font-family: inherit;
}
.field textarea { min-height: 100px; resize: vertical; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ingredient-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.ingredient-row input[type=text] { flex: 1; }
.ingredient-row select { width: 170px; }
.photo-thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.photo-thumbs .ph { position: relative; width: 70px; height: 70px; border-radius: 8px; overflow: hidden; }
.photo-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.photo-thumbs .rm {
  position: absolute; top: 2px; right: 2px; background: rgba(0,0,0,0.6); color: white;
  border: none; border-radius: 50%; width: 18px; height: 18px; font-size: 11px; cursor: pointer; line-height: 1;
}

/* Recipe detail */
.detail-photos { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 16px; }
.detail-photos img { height: 200px; border-radius: 10px; object-fit: cover; }

/* Repositionnement de la photo principale (modale dédiée) */
.photo-pos-frame {
  width: 100%; height: 260px; border-radius: 14px; background: var(--pink-light) center/cover no-repeat;
  cursor: grab; touch-action: none; user-select: none; border: 1px solid var(--border);
}
.photo-pos-frame.dragging { cursor: grabbing; }
.photo-pos-previews { display: flex; gap: 16px; margin-top: 16px; flex-wrap: wrap; }
.photo-pos-preview-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.photo-pos-preview-label { font-size: 0.72rem; color: var(--muted); font-weight: 600; }
.photo-pos-preview { border-radius: 10px; background: white center/cover no-repeat; border: 1px solid var(--border); }
.photo-pos-preview-card { width: 130px; height: 90px; }
.photo-pos-preview-sugg { width: 90px; height: 60px; }
.photo-pos-preview-today { width: 88px; height: 88px; border-radius: 12px; }
.detail-steps {
  white-space: pre-wrap; line-height: 1.7; background: #f5f1ec; border-radius: var(--radius);
  padding: 16px 18px;
}
.detail-steps strong { color: var(--pink-dark); display: inline-block; margin-top: 10px; }
.detail-steps strong:first-child { margin-top: 0; }
.detail-steps p { margin: 0 0 10px; }
.detail-steps p:last-child { margin-bottom: 0; }
.detail-steps ul { margin: 0 0 10px; padding-left: 20px; }
.detail-steps figure.notion-image { margin: 10px 0; }
.detail-steps figure.notion-image img { max-width: 100%; border-radius: 10px; display: block; }
.detail-steps figure.notion-image figcaption { font-size: 0.8rem; color: var(--muted); margin-top: 4px; }
.detail-ingredients { list-style: none; padding: 0; }
.detail-ingredients li { padding: 6px 0; border-bottom: 1px dashed var(--border); }
.servings-badge {
  display: inline-block; background: var(--orange-light); color: var(--orange);
  font-weight: 700; padding: 5px 12px; border-radius: 999px; font-size: 0.85rem; margin: 0 0 10px;
}

/* Calendar */
.cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.cal-nav { display: flex; align-items: center; gap: 10px; }
.cal-grid { display: grid; grid-template-columns: 110px repeat(7, 1fr); gap: 6px; }
.cal-grid .slot-label, .cal-grid .day-label {
  font-weight: 700; font-size: 0.8rem; color: var(--muted); padding: 6px;
}
.cal-grid .day-label { text-align: center; background: white; border-radius: 8px; padding: 8px 4px; }
.cal-day-weather { margin-top: 4px; font-size: 0.78rem; font-weight: 600; color: var(--pink-dark); }
.menu-gen-day-weather { font-size: 0.75rem; font-weight: 400; color: var(--muted); margin-left: 4px; white-space: nowrap; }
.cal-cell {
  background: white; border: 1px dashed var(--border); border-radius: 10px; min-height: 190px;
  padding: 6px; cursor: pointer; font-size: 0.78rem;
}
.cal-cell:hover { border-color: var(--pink); }
.cal-entry { cursor: grab; touch-action: manipulation; }
.cal-entry.dragging { opacity: 0.35; cursor: grabbing; }
.cal-cell.drop-target { outline: 2px dashed var(--pink-dark); outline-offset: -2px; background: var(--pink-light); }
.cal-drag-ghost {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  transform: translate(-50%, -60%);
  background: white;
  border: 2px solid var(--pink-dark);
  border-radius: 8px;
  padding: 8px 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  max-width: 160px;
  font-size: 0.8rem;
  text-align: center;
}
.cal-drag-ghost-slot { display: block; font-size: 0.65rem; font-weight: 700; color: var(--pink-dark); text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 2px; }
.cal-entry {
  background: var(--pink-light); border-radius: 10px; padding: 0; margin-bottom: 6px;
  display: flex; flex-direction: column; overflow: hidden; position: relative; cursor: default;
}
.cal-entry img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.cal-entry-noimg {
  width: 100%; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--pink-light), var(--orange-light)); color: var(--pink-dark);
}
.cal-entry-noimg .dash-icon svg { width: 2rem; height: 2rem; }
.cal-entry-title {
  display: block; padding: 8px 8px; font-size: 0.85rem; font-weight: 700; text-align: center;
  line-height: 1.25; color: var(--ink);
}
.cal-entry .x, .cal-entry .move {
  position: absolute; top: 5px; background: rgba(255,255,255,0.9); border-radius: 50%;
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border: none;
  cursor: pointer; color: var(--muted); font-size: 1rem; line-height: 1; z-index: 2;
}
.cal-entry .x { right: 5px; }
.cal-entry .move { right: 31px; font-size: 0.85rem; }
.cal-entry .x:hover { background: white; color: #c0524a; }
.cal-entry .move:hover { background: white; color: var(--pink-dark); }
/* Repas généré en priorité pour caser un ingrédient du frigo (voir case
   "Utiliser ce qu'il me reste au frigo", 2026-09-22) : fond plus rosé pour
   le distinguer des autres repas de la carte, à la demande de Quitterie. */
.cal-entry.from-fridge { background: #f3c3ce; }
.cal-entry.from-fridge .cal-entry-title { color: var(--pink-dark); }

/* Boutons d'action (déplacer / supprimer) réutilisés sur "Mon menu
   aujourd'hui" du tableau de bord, sur le même principe que ceux des
   cartes du calendrier ci-dessus mais en ligne plutôt qu'en superposition
   (les cartes du tableau de bord ne sont pas des vignettes photo). */
.dash-today-actions { display: flex; gap: 6px; flex-shrink: 0; }
.icon-btn {
  background: white; border: 1px solid var(--border); border-radius: 50%;
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--muted); font-size: 0.9rem; line-height: 1;
}
.icon-btn:hover { color: var(--pink-dark); border-color: var(--pink); }

.mode-toggle { display: flex; background: white; border: 1px solid var(--border); border-radius: 999px; padding: 3px; }
.mode-toggle button {
  background: none; border: none; padding: 6px 14px; border-radius: 999px; cursor: pointer;
  font-size: 0.85rem; font-weight: 600; color: var(--muted);
}
.mode-toggle button.active { background: var(--pink); color: white; }

.cal-grid-month { grid-template-columns: repeat(7, 1fr); }
.cal-grid-month .day-label { background: none; }
.cal-cell-month { min-height: 210px; position: relative; }
.cal-cell-month.outside { opacity: 0.35; }
.cal-cell-daynum { font-size: 0.78rem; font-weight: 700; color: var(--muted); display: block; margin-bottom: 4px; }

.member-row.selected { border-color: var(--pink); background: var(--pink-light); border-radius: 10px; padding-left: 8px; }
/* Ajouté le 2026-09-22 : les résultats de recherche cliquables (ex. modale
   "Ajouter au calendrier") ressemblaient à du texte simple, sans indice
   visuel qu'ils étaient sélectionnables. */
.member-row.clickable { cursor: pointer; border-radius: 10px; transition: background 0.12s; }
.member-row.clickable:hover { background: var(--pink-light); padding-left: 8px; }

/* Tableau de bord */
.dash-greeting { margin-bottom: 20px; }
.dash-greeting h2 { margin: 0 0 4px; font-size: 1.5rem; }
.dash-date { margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--pink-dark); }
.dash-greeting-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dash-weather-now {
  display: flex; align-items: center; gap: 10px; background: white; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 18px;
}
.dash-weather-icon { font-size: 2rem; line-height: 1; }
.dash-weather-temp { font-size: 1.6rem; font-weight: 700; color: var(--pink-dark); line-height: 1.15; }
.dash-weather-city { font-size: 0.72rem; color: var(--muted); font-weight: 600; letter-spacing: 0.02em; }
.dash-weather-week { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.dash-weather-day {
  background: white; border: 1px solid var(--border); border-radius: 10px; padding: 8px 6px;
  text-align: center; flex: 1; min-width: 56px;
}
.dash-weather-day-name { font-size: 0.66rem; color: var(--muted); font-weight: 700; text-transform: uppercase; }
.dash-weather-day-icon { font-size: 1.25rem; margin: 3px 0; }
.dash-weather-day-temp { font-size: 0.8rem; font-weight: 600; }
.dash-weather-day-temp .max { color: var(--pink-dark); }
.dash-weather-day-temp .min { color: var(--muted); margin-left: 3px; }
.dash-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-bottom: 22px; }
.dash-stat-card {
  background: white; border-radius: var(--radius); border: 1px solid var(--border); padding: 20px 24px;
  display: flex; flex-direction: column; gap: 4px;
}
.dash-stat-label { font-size: 0.75rem; font-weight: 700; color: var(--muted); letter-spacing: 0.03em; }
.dash-stat-value { font-size: 2.4rem; font-weight: 700; color: var(--pink-dark); line-height: 1.2; }
.dash-stat-card .btn { margin-top: 8px; align-self: flex-start; }
.dash-stat-split { display: flex; gap: 22px; margin-top: 2px; }
.dash-stat-split-item { display: flex; flex-direction: column; align-items: flex-start; }
.dash-stat-split-value { font-size: 2rem; font-weight: 700; color: var(--pink-dark); line-height: 1.15; }
.dash-stat-split-label { font-size: 0.72rem; color: var(--muted); font-weight: 600; }
.dash-panel { background: white; border-radius: var(--radius); border: 1px solid var(--border); padding: 22px 26px; margin-bottom: 20px; }
.dash-panel h3 { margin: 0 0 14px; font-size: 1.25rem; }
.dash-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.dash-panel-head h3 { margin: 0; }
.dash-two-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.dash-week-nav { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--muted); }
.dash-week-nav button { background: none; border: none; cursor: pointer; font-size: 1.2rem; color: var(--pink-dark); padding: 2px 6px; }
.dash-today-item { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px dashed var(--border); cursor: pointer; }
.dash-today-item:last-child { border-bottom: none; }
.dash-today-thumb {
  width: 88px; height: 88px; border-radius: 12px; background: var(--pink-light) center/cover no-repeat;
  display: flex; align-items: center; justify-content: center; font-size: 2.1rem; flex-shrink: 0;
}
/* Recette du jour ("Mon menu aujourd'hui") : photo agrandie pour qu'on la
   voie vraiment, le reste de la fiche (créneau, titre, notes) gardant sa
   taille habituelle à côté. */
.dash-today-item-featured { align-items: flex-start; }
.dash-today-thumb-lg { width: 148px; height: 148px; border-radius: 14px; font-size: 2.6rem; }
.dash-today-item h4 { margin: 4px 0 0; font-size: 1.05rem; }
.dash-today-note {
  margin: 6px 0 0; font-size: 0.82rem; color: var(--muted); font-style: italic; line-height: 1.4;
  display: flex; align-items: flex-start; gap: 5px;
}
.dash-today-note .dash-icon { flex-shrink: 0; margin-top: 2px; }
.dash-link { display: inline-block; margin-top: 5px; font-size: 0.8rem; font-weight: 600; color: var(--pink-dark); text-decoration: underline; }
.dash-week-strip { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 4px; align-items: stretch; }
.dash-week-card {
  flex: 1 1 0; min-width: 170px; background: var(--cream); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px; position: relative;
}
.dash-week-day-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dash-week-day { font-size: 0.8rem; font-weight: 700; color: var(--pink-dark); text-align: left; }
.dash-week-add-btn {
  background: var(--pink-light); color: var(--pink-dark); border: none; border-radius: 50%;
  width: 20px; height: 20px; line-height: 1; font-size: 0.95rem; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0;
  transition: background .1s ease;
}
.dash-week-add-btn:hover { background: var(--pink); color: white; }
.dash-week-entries { display: flex; flex-direction: column; gap: 14px; }
.dash-week-entry { display: flex; flex-direction: column; cursor: pointer; border-radius: 8px; padding: 6px; transition: background .1s ease; }
.dash-week-entry:hover { background: var(--pink-light); }
.dash-week-entry-thumb {
  width: 100%; height: 96px; border-radius: 8px; background: white center/cover no-repeat;
  display: flex; align-items: center; justify-content: center; font-size: 1.8rem; margin-bottom: 6px;
}
.dash-week-entry-slot { display: block; font-size: 0.68rem; font-weight: 700; color: var(--pink-dark); text-transform: uppercase; letter-spacing: 0.02em; text-align: center; margin-bottom: 2px; }
.dash-week-entry-title { font-size: 0.8rem; line-height: 1.25; text-align: center; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dash-week-empty { color: var(--muted); font-size: 0.8rem; text-align: center; padding: 16px 0; }
.dash-week-empty .dash-icon { display: block; margin: 0 auto 6px; width: 22px; height: 22px; }
.dash-week-entry { cursor: grab; touch-action: manipulation; }
.dash-week-entry.dragging { opacity: 0.35; cursor: grabbing; }
.dash-week-card.drop-target { outline: 2px dashed var(--pink-dark); outline-offset: -2px; background: var(--pink-light); }
.dash-week-drag-ghost {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  transform: translate(-50%, -60%);
  background: white;
  border: 2px solid var(--pink-dark);
  border-radius: 8px;
  padding: 8px 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  max-width: 160px;
  font-size: 0.8rem;
  text-align: center;
}
.dash-week-drag-ghost .dash-week-entry-slot { display: block; font-size: 0.65rem; font-weight: 700; color: var(--pink-dark); text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 2px; }

/* Idées pour la suite (suggestions de recettes de saison, tableau de bord) */
.dash-suggestions { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--border); }
.dash-suggestions-title { margin: 0 0 10px; font-size: 0.95rem; }
/* 4 cartes de large sur 2 rangées : des colonnes plus étroites permettent
   une photo plus haute (moins "aplatie") sans agrandir toute la zone. */
.dash-suggestions-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.dash-suggestion-card {
  position: relative; background: var(--cream); border: 1px solid var(--border); border-radius: 10px;
  padding: 6px; cursor: pointer; transition: background .1s ease;
}
.dash-suggestion-card:hover { background: var(--pink-light); }
.dash-suggestion-thumb {
  width: 100%; height: 118px; border-radius: 8px; background: white center/cover no-repeat;
  display: flex; align-items: center; justify-content: center; margin-bottom: 6px;
}
.dash-suggestion-thumb .dash-icon svg { width: 1.8rem; height: 1.8rem; color: var(--pink-dark); }
.dash-suggestion-title {
  font-size: 0.74rem; line-height: 1.25; overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.dash-suggestion-add { position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; font-size: 0.85rem; }

/* Icônes SVG du tableau de bord (remplacent les emojis) */
.dash-icon { display: inline-flex; align-items: center; justify-content: center; vertical-align: -0.2em; color: var(--pink-dark); }
.dash-icon svg { width: 1em; height: 1em; }
.dash-greeting h2 .dash-icon { color: var(--pink); }
.dash-stat-label .dash-icon { margin-right: 2px; }
.btn .dash-icon, .btn.secondary .dash-icon { margin-right: 2px; }
.btn.secondary .dash-icon, .btn.ghost .dash-icon { color: var(--pink-dark); }
.btn .dash-icon { color: white; }
.dash-panel h3 .dash-icon { width: 1.05em; height: 1.05em; }
.dash-today-thumb .dash-icon, .dash-week-entry-thumb .dash-icon { color: var(--pink-dark); }
.dash-today-thumb .dash-icon svg, .dash-week-entry-thumb .dash-icon svg { width: 1.6rem; height: 1.6rem; }
.dash-today-thumb-lg .dash-icon svg { width: 2.6rem; height: 2.6rem; }
.dash-link .dash-icon { margin-right: 2px; }
.dash-recent-category {
  margin-left: auto; align-self: flex-start; font-size: 0.72rem; font-weight: 600; color: var(--pink-dark);
  background: var(--pink-light); padding: 3px 9px; border-radius: 20px; white-space: nowrap;
}

@media (max-width: 760px) {
  .dash-two-panels { grid-template-columns: 1fr; }
  .dash-week-strip { flex-wrap: nowrap; }
  .dash-week-card { min-width: 150px; }
}

@media print {
  .dash-week-strip { flex-wrap: wrap; }
  .dash-week-card { min-width: 150px; flex: 1 1 150px; break-inside: avoid; }
}

/* Shopping list */
.shop-range { display: flex; gap: 10px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.shop-group { background: white; border-radius: var(--radius); padding: 16px 18px; margin-bottom: 14px; border: 1px solid var(--border); }
.shop-group h3 { margin: 0 0 10px; color: var(--pink-dark); font-size: 1rem; }
.shop-item { display: flex; align-items: center; gap: 10px; padding: 6px 0; flex-wrap: wrap; }
.shop-item.checked span.txt { text-decoration: line-through; color: var(--muted); }
.shop-item .sources { font-size: 0.72rem; color: var(--muted); }
.shop-item .sources a.source-link { color: var(--pink-dark); text-decoration: underline; }
.shop-item .aisle-fix { margin-left: auto; font-size: 0.72rem; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--border); color: var(--muted); background: white; }
.shop-item .aisle-fix:hover { color: var(--text); border-color: var(--pink-dark); }
.add-item-row { display: flex; gap: 8px; margin-top: 10px; }
.add-item-row input { flex: 1; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); }

/* Settings */
.settings-section { background: white; border-radius: var(--radius); padding: 20px 22px; margin-bottom: 18px; border: 1px solid var(--border); }
.settings-section h3 { margin-top: 0; }
.tag-editor { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.tag-editor .tag { display: flex; align-items: center; gap: 6px; }
.tag-editor .tag button { background: none; border: none; cursor: pointer; color: var(--pink-dark); }
.member-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.member-row:last-child { border-bottom: none; }
.member-row .name { flex: 1; font-weight: 600; }
.help-text { font-size: 0.85rem; color: var(--muted); line-height: 1.5; }
.status-ok { color: var(--green); font-weight: 600; }
.status-error { color: #c0524a; font-weight: 600; }
.status-partial { color: #b8862f; font-weight: 600; }

.center-screen { display: flex; align-items: center; justify-content: center; min-height: 90vh; }
.login-card { background: white; padding: 34px; border-radius: var(--radius); width: 100%; max-width: 380px; text-align: center; }
.member-pick { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
.member-pick button {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px;
  border: 1px solid var(--border); background: white; cursor: pointer; font-size: 0.95rem;
}
.member-pick button:hover { border-color: var(--pink); }

@media (max-width: 760px) {
  .cal-grid { grid-template-columns: 70px repeat(7, minmax(90px,1fr)); overflow-x: auto; }
  .two-col { grid-template-columns: 1fr; }
  main { padding: 14px; }
  .header { padding: 10px 14px; flex-wrap: wrap; gap: 8px; }
  .filter-group { flex-direction: column; align-items: flex-start; gap: 6px; }
  .filter-group-label { width: auto; }
  .dash-suggestions-row { grid-template-columns: repeat(2, 1fr); }
}

/* Impression toujours en mode portrait (fiche recette, calendrier semaine,
   calendrier mois, liste de courses) : les grilles ci-dessous s'appuient
   déjà sur des colonnes flexibles (1fr) qui se réduisent pour tenir sur une
   largeur de page portrait, donc pas besoin du mode paysage. La plupart des
   navigateurs utilisent cette préférence pour pré-sélectionner l'orientation
   dans la fenêtre d'impression (elle reste modifiable manuellement par la
   personne qui imprime, aucune page web ne peut l'imposer complètement). */
@page {
  size: portrait;
  margin: 1.2cm;
}

/* Exception : le calendrier semaine (7 jours + colonne des créneaux) est
   trop large pour rester lisible en portrait, on l'imprime en paysage. Le
   reste (recette, calendrier mois, liste de courses) garde le portrait
   ci-dessus. La classe est posée sur la zone d'impression du calendrier
   uniquement quand la vue "Semaine" est active (voir renderCalendarTab). */
@page cal-week-landscape {
  size: landscape;
  margin: 1cm;
}
.cal-print-landscape {
  page: cal-week-landscape;
}

/* Impression : n'affiche que le contenu utile (fiche recette ou calendrier),
   sans le menu, les boutons ni les autres onglets. */
@media print {
  .header, .toolbar, .chips-row, .no-print { display: none !important; }
  body { background: white; }
  /* Une fiche recette s'affiche dans une fenêtre par-dessus le reste de
     l'appli : à l'impression, on masque tout ce qu'il y a derrière pour
     n'imprimer que la fiche elle-même. */
  body:has(.overlay) #app { display: none; }
  .overlay {
    position: static; background: none; padding: 0; display: block;
  }
  .modal { box-shadow: none; max-width: 100%; max-height: none; overflow: visible; padding: 0; }
  .cal-grid { grid-template-columns: 90px repeat(7, 1fr); }
  .cal-grid-month { grid-template-columns: repeat(7, 1fr); }
  .cal-cell, .cal-cell-month { break-inside: avoid; min-height: 0; }
  .cal-entry img, .cal-entry-noimg { aspect-ratio: 16 / 9; }
}

/* Clic sur un repas du calendrier = ouvre la recette (2026-10-06) */
.cal-entry img, .cal-entry-title { cursor: pointer; }
.cal-entry:hover .cal-entry-title { text-decoration: underline; }


/* ===== Version en ligne (monptitlabo.fr) ===== */
.brand-icon { width: 34px; height: 34px; border-radius: 9px; }
.login-icon { width: 96px; height: 96px; border-radius: 22px; margin-bottom: 8px; box-shadow: 0 6px 20px rgba(217,107,132,0.25); }
.login-card .field { text-align: left; }
.login-card input { font-size: 1rem; }
.form-error { color: #c0524a; min-height: 1.2em; }
.readonly-badge { background: var(--orange-light); color: var(--orange); font-weight: 700; font-size: 0.85rem; padding: 6px 12px; border-radius: 999px; }
.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: var(--ink); color: white; padding: 12px 20px; border-radius: 999px; font-weight: 600;
  z-index: 1000; box-shadow: 0 8px 24px rgba(0,0,0,0.2); max-width: calc(100vw - 32px); text-align: center;
}
/* Mode consultation (invités) : on masque les commandes de modification. */
body.lecture-seule #new-recipe-btn, body.lecture-seule #dash-new-recipe, body.lecture-seule #dash-today-add,
body.lecture-seule #edit-recipe, body.lecture-seule #del-recipe, body.lecture-seule #add-to-cal,
body.lecture-seule #reposition-photo, body.lecture-seule #cal-menu-gen, body.lecture-seule #cal-clear,
body.lecture-seule .cal-entry .move, body.lecture-seule .cal-entry .x,
body.lecture-seule .aisle-fix, body.lecture-seule .add-item-row,
body.lecture-seule #fridge-clear, body.lecture-seule #fridge-add, body.lecture-seule .dash-suggestion-add { display: none !important; }
.header { padding-top: max(14px, env(safe-area-inset-top)); }
/* Menu : jamais sur deux lignes ; défile horizontalement s'il manque de place. */
.header { gap: 16px; }
.brand { white-space: nowrap; flex-shrink: 0; }
.nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; min-width: 0; }
.nav::-webkit-scrollbar { display: none; }
.nav button { white-space: nowrap; flex-shrink: 0; }
.profile { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 1300px) { .nav button { padding: 8px 11px; font-size: 0.88rem; } }
@media (max-width: 760px) {
  .nav { width: 100%; order: 3; }
  .nav button { padding: 8px 12px; }
  .cal-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .cal-header > div { flex-wrap: wrap; }
  .cal-grid { max-width: 100%; }
  #cal-print-zone { max-width: 100%; overflow-x: auto; }
}
/* Boutons : texte sur une seule ligne. */
.btn { white-space: nowrap; }
.cal-header { flex-wrap: wrap; gap: 10px; }
.cal-header > div { flex-wrap: wrap; }