@import url("fonts/clash-display.css");
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=DM+Sans:wght@300;400;500;600&display=swap");

/* ══════════════════════════════════════════════════════════════
   accueil.css — étuCook v2 — Mobile-first
   Base = mobile (< 768px)
   768px+ = layout sidebar + main desktop
══════════════════════════════════════════════════════════════ */

/* ══ TOKENS ═══════════════════════════════════════════════════ */
:root {
  --bg:         #faf9f2;
  --surface:    #fff;
  --sand:       #edeade;
  --sand-2:     #f5f2e8;
  --caramel:    #d9a97e;
  --caramel-d:  #c08a5e;
  --caramel-l:  #efd4b8;
  --forest:     #1b4a36;
  --forest-m:   #2d6147;
  --forest-l:   #4a8c68;
  --fp:         rgba(27,74,54,.08);
  --fp2:        rgba(27,74,54,.14);
  --ink:        #1a1a14;
  --ink-2:      #3d3d30;
  --muted:      #8a8a7a;
  --muted-l:    #b8b8a8;
  --white:      #fff;
  --danger:     #c0392b;
  --danger-bg:  rgba(209, 47, 29, 0.07);

  /* Layout mobile */
  --nav-h:      54px;
  --nav-top:    8px;
  --sidebar-w:  260px;
  --page-px:    14px;
  --touch:      44px;

  /* Radii */
  --r-pill: 999px;
  --r-2xl:  24px;
  --r-xl:   18px;
  --r-lg:   14px;
  --r-md:   10px;
  --r-sm:   7px;
  --r-xs:   4px;

  /* Ombres */
  --sh-nav:  0 4px 20px rgba(26,26,20,.09);
  --sh-card: 0 1px 8px  rgba(26,26,20,.07);
  --sh-lift: 0 8px 28px rgba(26,26,20,.12);
  --sh-btn:  0 4px 14px rgba(27,74,54,.22);
  --sh-panel:0 -6px 32px rgba(26,26,20,.14);

  /* Transition */
  --t: .2s cubic-bezier(.4,0,.2,1);
}

/* ══ RESET ════════════════════════════════════════════════════ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

body {
  font-family:'DM Sans',sans-serif;
  background:var(--bg); color:var(--ink);
  min-height:100vh; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(ellipse 80% 40% at 0% 0%,   rgba(217,169,126,.1) 0%, transparent 60%),
    radial-gradient(ellipse 60% 35% at 100% 100%, rgba(27,74,54,.05) 0%, transparent 60%);
}
::-webkit-scrollbar       { width:3px; height:3px; }
::-webkit-scrollbar-thumb { background:var(--caramel-l); border-radius:99px; }


/* ══ NAVBAR ═══════════════════════════════════════════════════ */
.navbar {
  position:fixed; top:var(--nav-top); left:50%;
  transform:translateX(-50%); z-index:900;
  width:min(1180px,97vw); height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 8px 0 4px;
  background:rgba(250,249,242,.95);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.88);
  border-radius:var(--r-pill); box-shadow:var(--sh-nav);
}
.navbar__logo {
  all:unset; cursor:pointer; display:flex; align-items:center;
  -webkit-tap-highlight-color:transparent;
}.navbar__links    { display:flex; align-items:center; gap:2px; position:relative; }

/* Texte nav masqué sauf profil et icône sur mobile */
.nav-btn {
  background:none; border:none; color:var(--ink-2);
  font-family:'DM Sans',sans-serif; font-size:12.5px; font-weight:500;
  padding:7px 9px; border-radius:var(--r-pill); cursor:pointer;
  transition:background var(--t),color var(--t);
  white-space:nowrap; text-decoration:none;
  display:inline-flex; align-items:center;
  min-height:var(--touch);
  -webkit-tap-highlight-color:transparent;
}
.nav-btn:active           { background:var(--fp); color:var(--forest); }
.nav-btn.active           { background:var(--fp); color:var(--forest); font-weight:600; }

/* Recettes + Favoris : masqués sur mobile, visibles desktop */
#btn-recettes, #btn-favoris { display:none; }

.nav-btn--icon {
  width:var(--touch); height:var(--touch); padding:0;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
}
.nav-btn--icon svg { width:17px; height:17px; stroke:var(--ink-2); stroke-width:2; fill:none; }

.nav-btn--profile {
  background:var(--sand); color:var(--forest);
  font-weight:600; padding:8px 14px; margin-left:3px;
  border:2px solid var(--forest-m); border-radius:var(--r-pill);
  font-size:12.5px;
}
.nav-btn--profile:active { background:var(--forest); color:var(--white); }

/* ── Dropdown profil ── */
@keyframes fadeDown {
  from { opacity:0; transform:translateY(-6px) scale(.98); }
  to   { opacity:1; transform:none; }
}
.nav-dropdown {
  display:none; flex-direction:column; gap:5px;
  position:absolute; right:0; top:calc(100% + 8px);
  min-width:200px; background:var(--surface);
  border:1px solid rgba(0,0,0,.08); border-radius:var(--r-lg);
  padding:8px; box-shadow:var(--sh-lift); z-index:1000;
  animation:fadeDown .14s ease;
}
.nav-dropdown.open { display:flex; }
.nav-dropdown__user {
  display:flex; align-items:center; gap:9px;
  padding:9px 10px; background:var(--sand); border-radius:var(--r-sm);
}
.nav-dropdown__user img       { width:28px; height:28px; border-radius:50%; }
.nav-dropdown__user-name      { font-weight:700; font-size:13px; color:var(--ink); }
.nav-dropdown__user-sub       { font-size:11px; color:var(--muted); }
.nav-dropdown__sep            { border:none; border-top:1px solid rgba(0,0,0,.07); }
.nav-dropdown__item {
  display:flex; align-items:center; gap:8px; padding:9px 11px;
  font-family:'DM Sans',sans-serif; font-size:13px; font-weight:600;
  border-radius:var(--r-sm); text-decoration:none; cursor:pointer;
  transition:all var(--t); border:1px solid transparent; background:none; width:100%;
  min-height:var(--touch);
  -webkit-tap-highlight-color:transparent;
}
.nav-dropdown__item--admin {
  color:var(--caramel-d);
  background:var(--caramel-l);
  border:1px solid var(--caramel-d);

}
.sidebar__btn--admin {
  color:var(--caramel-d);
  background:var(--caramel-l);
  border:1px solid var(--caramel-d);
}
.nav-dropdown__item--danger {
  color:var(--danger); background:var(--danger-bg);
  border:1px solid rgba(192,57,43,.15);
}
.nav-dropdown__item svg { width:14px; height:14px; flex-shrink:0; }


/* ══ BARRE DE RECHERCHE ═══════════════════════════════════════ */
.search-panel {
  position:fixed;
  top:calc(var(--nav-top) + var(--nav-h) + 8px);
  left:50%; transform:translateX(-50%) translateY(-6px);
  width:min(1180px,97vw);
  z-index:800; padding:0 8px;
  pointer-events:none; opacity:0;
  transition:opacity .22s ease, transform .25s cubic-bezier(.4,0,.2,1);
}
.search-panel.show {
  pointer-events:auto; opacity:1;
  transform:translateX(-50%) translateY(0);
}
.search-panel__inner {
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  padding:12px 14px;
  background:var(--surface); border:1px solid rgba(0,0,0,.09);
  border-radius:var(--r-xl); box-shadow:var(--sh-lift);
}
.search-panel__input {
  flex:1; min-width:140px; padding:9px 14px;
  font-family:'DM Sans',sans-serif; font-size:16px; /* iOS zoom fix */
  color:var(--ink); background:var(--sand);
  border:1.5px solid rgba(0,0,0,.09); border-radius:var(--r-pill);
  outline:none; transition:border-color var(--t),box-shadow var(--t);
  min-height:var(--touch);
}
.search-panel__input:focus {
  border-color:var(--forest); background:var(--white);
  box-shadow:0 0 0 3px rgba(27,74,54,.08);
}
.search-panel__input::placeholder { color:var(--muted-l); }

.search-filters {
  width:100%; display:none; flex-wrap:wrap; gap:10px;
  padding-top:10px; border-top:1px solid rgba(0,0,0,.06);
}
.search-filter { display:flex; flex-direction:column; gap:3px; }
.search-filter label {
  font-size:9.5px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:1px;
}
.search-filter select {
  padding:7px 26px 7px 10px; font-family:'DM Sans',sans-serif;
  font-size:16px; /* iOS zoom fix */
  background:var(--sand); color:var(--ink);
  border:1.5px solid rgba(0,0,0,.09); border-radius:var(--r-sm);
  outline:none; cursor:pointer; min-width:110px;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238a8a7a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 8px center;
  min-height:var(--touch);
}


/* ══ APP SHELL ════════════════════════════════════════════════
   Mobile : pleine largeur, bottom nav fixe
   Desktop 768px+ : sidebar fixe gauche + main scrollable
════════════════════════════════════════════════════════════════ */
.app-shell {
  display:flex; flex-direction:column; gap:0;
  width:min(1180px,97vw); margin:0 auto;
  /* Espace bas = bottom nav (64px) + safe area */
  padding:calc(var(--nav-h) + var(--nav-top) + 14px) var(--page-px)
          calc(64px + env(safe-area-inset-bottom, 12px));
}

/* ── Sidebar masquée sur mobile (remplacée par bottom nav) ── */
.sidebar { display:none; }


/* ══ BOTTOM NAV — mobile uniquement, partagée (partials/bottom-nav.php) ══
   5 onglets fixes en bas : Recettes · Frigo · + · Courses · Profil
   L'onglet + est contextuel (voir bottom-nav.php + JS de chaque page)
════════════════════════════════════════════════════════════════ */
.bottom-nav {
  display:flex; /* visible sur mobile */
  position:fixed; bottom:0; left:0; right:0; z-index:850;
  height:calc(64px + env(safe-area-inset-bottom, 0px));
  padding-bottom:env(safe-area-inset-bottom, 0px);
  background:rgba(250,249,242,.97);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-top:1px solid rgba(0,0,0,.08);
  box-shadow:0 -4px 20px rgba(26,26,20,.08);
}
.bottom-nav__items {
  display:flex; width:100%; align-items:stretch;
}
.bottom-nav__item {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:3px;
  background:none; border:none; cursor:pointer;
  font-family:'DM Sans',sans-serif; font-size:10px; font-weight:600;
  color:var(--muted); text-decoration:none;
  transition:color var(--t);
  padding:0 4px; min-height:64px;
  -webkit-tap-highlight-color:transparent;
  position:relative;
}
.bottom-nav__item svg {
  width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:2;
  transition:stroke var(--t), transform var(--t);
  flex-shrink:0;
}
.bottom-nav__item span { line-height:1; }

/* État actif */
.bottom-nav__item.active       { color:var(--forest); }
.bottom-nav__item.active svg   { stroke:var(--forest); }
/* Indicateur point */
.bottom-nav__item.active::after {
  content:''; position:absolute; top:8px;
  width:4px; height:4px; border-radius:50%;
  background:var(--forest);
}

/* Bouton + (CTA central) — plus grand, forest */
.bottom-nav__item--add {
  flex:0 0 72px;
}
.bottom-nav__item--add .bottom-nav__fab {
  width:48px; height:48px; border-radius:50%;
  background:var(--forest); border:3px solid var(--bg);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(27,74,54,.35);
  transition:transform var(--t), background var(--t);
  margin-bottom:1px;
}
.bottom-nav__item--add .bottom-nav__fab svg {
  width:22px; height:22px; stroke:var(--white); stroke-width:2.5;
}
.bottom-nav__item--add:active .bottom-nav__fab { transform:scale(.92); background:var(--forest-m); }
.bottom-nav__item--add span { color:var(--ink-2); font-size:9.5px; }


/* ══ TOGGLE VUE — Recettes / Favoris (mobile, remplace l'ancien
   onglet Favoris de la bottom nav) ═══════════════════════════ */
.view-toggle {
  display:flex; gap:6px; padding:4px;
  background:var(--fp); border-radius:var(--r-pill);
  margin-bottom:14px; width:fit-content;
}
.view-toggle__btn {
  display:flex; align-items:center; gap:6px;
  padding:8px 16px; border:none; border-radius:var(--r-pill);
  background:none; color:var(--muted); font-family:'DM Sans',sans-serif;
  font-size:13px; font-weight:600; cursor:pointer;
  transition:background var(--t), color var(--t);
  min-height:var(--touch);
}
.view-toggle__btn.active { background:var(--surface); color:var(--forest); box-shadow:var(--sh-card); }


/* ══ SHEET IMC — bottom sheet modal ══════════════════════════ */
.imc-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(26,26,20,.4); z-index:900;
}
.imc-overlay.open { display:block; }

.imc-sheet {
  position:fixed; bottom:0; left:0; right:0; z-index:910;
  background:var(--surface); border-radius:22px 22px 0 0;
  box-shadow:var(--sh-panel);
  transform:translateY(100%);
  transition:transform .3s cubic-bezier(.32,0,.16,1);
  padding-bottom:env(safe-area-inset-bottom, 16px);
}
.imc-sheet.open { transform:translateY(0); }
/* Tirette */
.imc-sheet::before {
  content:''; display:block;
  width:32px; height:4px; background:var(--muted-l); border-radius:2px;
  margin:10px auto 0; opacity:.7;
}
.imc-sheet__inner {
  padding:14px 20px 20px;
}
.imc-sheet__title {
  font-family:'Playfair Display',serif;
  font-size:1.15rem; font-weight:700; color:var(--ink);
  margin-bottom:16px; text-align:center;
}
/* Réutilise les styles .imc-form existants */
.imc-sheet .imc-form { display:flex; flex-direction:column; gap:10px; }
.imc-sheet .field--row { display:flex; gap:10px; }
.imc-sheet .field--row .field { flex:1; }
.imc-sheet .field { margin-bottom:0; }
.imc-sheet .sidebar__btn--add {
  width:100%; justify-content:center; margin-top:4px;
  display:flex; align-items:center; gap:7px;
  padding:12px; background:var(--white); color:var(--forest);
  border:2px solid var(--forest-m); border-radius:var(--r-pill);
  font-family:'DM Sans',sans-serif; font-size:14px; font-weight:700;
  cursor:pointer; box-shadow:var(--sh-btn);
  -webkit-tap-highlight-color:transparent;
}
.imc-sheet .sidebar__btn--add:active { background:var(--forest); color:var(--white); transform:scale(.98); }
.imc-sheet .imc-result { margin-top:10px; }

/* Compteurs dans nav (invisibles mais gardés pour JS) */
#count-recettes { display:none; }

/* Sidebar__btn — styles de base conservés pour desktop */
.sidebar__btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 12px; background:none; border:none;
  font-family:'DM Sans',sans-serif; font-size:13px; font-weight:500;
  color:var(--ink-2); cursor:pointer;
  transition:background var(--t),color var(--t);
  text-decoration:none; white-space:nowrap;
  border-radius:var(--r-md); width:100%; text-align:left;
  -webkit-tap-highlight-color:transparent;
}
.sidebar__btn svg        { width:16px; height:16px; flex-shrink:0; }
.sidebar__btn.active     { background:var(--fp2); color:var(--forest); font-weight:600; }
.sidebar__btn--add {
  background:var(--white); color:var(--forest);
  font-weight:700; justify-content:center;
  border:2px solid var(--forest-m);
  box-shadow:var(--sh-btn); margin-top:4px;
}
.sidebar__btn--add svg   { stroke:var(--forest); transition:stroke var(--t); }
.sidebar__btn--frigo {
  color:var(--forest); background:var(--fp);
  border:1.5px solid rgba(27,74,54,.18);
}
.sidebar__title { display:none; }


/* ══ ZONE PRINCIPALE ══════════════════════════════════════════ */
.main-area { flex:1 1 0; min-width:0; }

/* ══ EN-TÊTE DE PAGE — cohérent avec frigo/courses/profil/admin ══ */
.recettes-header { margin-bottom:16px; }
.recettes-header__eyebrow {
  font-size:10px; font-weight:700; letter-spacing:2px;
  text-transform:uppercase; color:var(--muted);
}
.recettes-header__title {
  font-family:'Playfair Display',serif;
  font-size:clamp(1.55rem,5.5vw,2.6rem);
  font-weight:700; color:var(--ink); line-height:1.1;
}

.section-header { margin-bottom:14px; }
.section-title {
  font-family:'Playfair Display',serif;
  font-size:clamp(1.35rem,5vw,1.7rem);
  font-weight:700; color:var(--ink); line-height:1.15;
}
.section-count { font-size:12px; color:var(--muted); margin-left:6px; font-family:'DM Sans',sans-serif; }


/* ══ GRILLE RECETTES ══════════════════════════════════════════ */
.recipes-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}

/* ── Card recette ── */
.recipe-card {
  background:var(--surface); border:1px solid rgba(0,0,0,.07);
  border-radius:var(--r-xl); overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:var(--sh-card);
  transition:transform var(--t);
  -webkit-tap-highlight-color:transparent;
  cursor:pointer;
}
.recipe-card:active { transform:scale(.98); }

.recipe-card__img-wrap { position:relative; overflow:hidden; height:120px; }
.recipe-card__img      { width:100%; height:100%; object-fit:cover; display:block; }

/* Badge difficulté */
.recipe-card__badge {
  position:absolute; top:6px; right:6px;
  padding:2px 7px; font-size:9.5px; font-weight:700;
  letter-spacing:.4px; text-transform:uppercase;
  border-radius:var(--r-pill);
  background:rgba(250,249,242,.88); backdrop-filter:blur(8px); color:var(--ink-2);
}
.recipe-card__badge--facile    { background:rgba(45,97,71,.88); color:var(--white); }
.recipe-card__badge--moyen     { background:rgba(192,138,94,.9); color:var(--white); }
.recipe-card__badge--difficile { background:rgba(192,57,43,.88); color:var(--white); }

/* Overlay actions — TOUJOURS VISIBLE sur mobile (pas de hover) */
.recipe-card__overlay {
  position:absolute; bottom:0; left:0; right:0;
  background:linear-gradient(to top, rgba(26,26,20,.72) 0%, transparent 100%);
  display:flex; align-items:flex-end; justify-content:flex-start; gap:5px;
  padding:7px 8px 8px;
  /* Toujours visible sur mobile */
  opacity:1;
}

.recipe-card__body {
  padding:9px 10px 10px; flex:1;
  display:flex; flex-direction:column; gap:5px;
}
.recipe-card__name {
  font-size:12.5px; font-weight:700; color:var(--ink); line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden;
}
.recipe-card__meta { display:flex; gap:6px; flex-wrap:wrap; }
.meta-tag {
  display:inline-flex; align-items:center; gap:3px;
  font-size:10px; color:var(--muted); font-weight:500;
}
.meta-tag svg { width:10px; height:10px; stroke:var(--muted); fill:none; flex-shrink:0; }

/* Boutons dans l'overlay — compacts sur mobile */
.btn-overlay {
  display:inline-flex; align-items:center;
  padding:5px 10px; font-size:11px; font-weight:700;
  border-radius:var(--r-pill); cursor:pointer; border:none;
  transition:transform var(--t); text-decoration:none; white-space:nowrap;
  min-height:32px;
  -webkit-tap-highlight-color:transparent;
}
.btn-overlay:active      { transform:scale(.95); }
/* Nom de classe historique ("white"), couleur volontairement changée
   en vert forêt pour ressortir davantage sur la photo. */
.btn-overlay--white      { background:var(--forest); color:var(--white); }
.btn-overlay--fav,
.btn-overlay--del        { position:relative; justify-content:center; }
.btn-overlay--del        { background:var(--danger); color:var(--white); padding:5px 8px; }

/* Cœur favori — vide (contour) vs plein (couleur), seul signal fiable
   de l'état sans dépendre du toast */
.btn-overlay--fav {
  background:rgba(255,255,255,.16); color:var(--white);
  transition:background-color var(--t), transform .15s ease;
}
.btn-overlay--fav .icon--heart { fill:none; transition:fill .15s ease; }
.btn-overlay--fav.is-favorited {
  background:rgba(255,255,255,.16); color:var(--caramel);
  transform:scale(1.05);
}
.btn-overlay--fav.is-favorited .icon--heart { fill:currentColor; }
/* Zone tactile élargie à 44px sans agrandir le bouton visible
   (évite que les 2-3 boutons de l'overlay ne débordent de la carte) */
.btn-overlay--fav::before,
.btn-overlay--del::before {
  content:''; position:absolute;
  top:50%; left:50%; transform:translate(-50%,-50%);
  width:var(--touch); height:var(--touch);
}

.empty-state {
  grid-column:1 / -1; padding:48px 20px;
  text-align:center; color:var(--muted-l); font-size:14px;
}
.empty-state svg {
  width:44px; height:44px; stroke:var(--muted-l); fill:none;
  display:block; margin:0 auto 12px; stroke-width:1.5;
}


/* ══ PANEL FORMULAIRE — bottom sheet sur mobile ═══════════════ */
.form-overlay {
  position:fixed; inset:0;
  background:rgba(26,26,20,.42);
  z-index:940; opacity:0; pointer-events:none;
  transition:opacity .25s ease;
}
.form-overlay.open { opacity:1; pointer-events:auto; }

.form-panel {
  position:fixed; bottom:0; left:0; right:0;
  width:100%; height:94dvh; max-height:94dvh;
  background:var(--surface);
  border-radius:22px 22px 0 0;
  box-shadow:var(--sh-panel);
  z-index:950; overflow:hidden;
  transform:translateY(100%);
  transition:transform .32s cubic-bezier(.32,0,.16,1);
  display:flex; flex-direction:column;
}
/* Tirette */
.form-panel::before {
  content:''; display:block; flex-shrink:0;
  width:32px; height:4px;
  background:var(--muted-l); border-radius:2px;
  margin:10px auto 0; opacity:.7;
}
.form-panel.open { transform:translateY(0); }

.form-panel__header {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 18px 11px; border-bottom:1px solid rgba(0,0,0,.07);
  flex-shrink:0; background:var(--surface);
}
.form-panel__title {
  font-family:'Playfair Display',serif;
  font-size:1.1rem; font-weight:700; color:var(--ink);
}
.form-panel__close {
  width:var(--touch); height:var(--touch); border-radius:50%;
  background:var(--sand); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; color:var(--muted);
  transition:background var(--t);
  -webkit-tap-highlight-color:transparent;
}
.form-panel__close:active { background:var(--caramel-l); }

.form-panel__body {
  padding:14px 16px 40px; flex:1; min-height:0;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding-bottom:max(40px, env(safe-area-inset-bottom, 20px));
}


/* ══ CHAMPS FORMULAIRE ════════════════════════════════════════ */
.field           { display:flex; flex-direction:column; gap:5px; margin-bottom:13px; }
.field--row      { flex-direction:row; gap:8px; }
.field--row > .field { flex:1; min-width:0; margin-bottom:0; }

.field__label {
  font-size:10px; font-weight:700; letter-spacing:.9px;
  text-transform:uppercase; color:var(--muted);
}
.field__error { display:none; font-size:11px; color:var(--danger); margin-top:2px; }

/* font-size:16px OBLIGATOIRE → empêche zoom iOS */
.field input[type="text"],
.field input[type="number"] {
  padding:9px 12px; font-family:'DM Sans',sans-serif;
  font-size:16px; color:var(--ink);
  background:var(--sand); border:1.5px solid rgba(0,0,0,.09);
  border-radius:var(--r-md); outline:none; width:100%;
  transition:border-color var(--t),box-shadow var(--t);
  min-height:var(--touch);
}
.field input::placeholder { color:var(--muted-l); font-size:14px; }
.field input:focus {
  border-color:var(--forest); background:var(--white);
  box-shadow:0 0 0 3px rgba(27,74,54,.08);
}

.field select {
  padding:9px 28px 9px 12px; font-family:'DM Sans',sans-serif;
  font-size:16px; color:var(--ink);
  background:var(--sand); border:1.5px solid rgba(0,0,0,.09);
  border-radius:var(--r-md); outline:none; width:100%; cursor:pointer;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238a8a7a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center;
  transition:border-color var(--t),box-shadow var(--t);
  min-height:var(--touch);
}
.field select:focus { border-color:var(--forest); box-shadow:0 0 0 3px rgba(27,74,54,.08); outline:none; }

.field textarea {
  padding:9px 12px; font-family:'DM Sans',sans-serif;
  font-size:16px; color:var(--ink);
  background:var(--sand); border:1.5px solid rgba(0,0,0,.09);
  border-radius:var(--r-md); outline:none; width:100%;
  resize:vertical; min-height:80px; line-height:1.55;
  transition:border-color var(--t),box-shadow var(--t);
}
.field textarea::placeholder { color:var(--muted-l); font-size:14px; }
.field textarea:focus {
  border-color:var(--forest); background:var(--white);
  box-shadow:0 0 0 3px rgba(27,74,54,.08);
}

/* IMC form dans sidebar */
.imc-form .field      { margin-bottom:10px; }
.imc-form .field__label { font-size:10px; font-weight:700; letter-spacing:.9px; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:4px; }
.imc-form input {
  padding:8px 11px; font-family:'DM Sans',sans-serif; font-size:16px;
  color:var(--ink); background:var(--sand); border:1.5px solid rgba(0,0,0,.09);
  border-radius:var(--r-sm); outline:none; width:100%;
  transition:border-color var(--t),box-shadow var(--t); min-height:var(--touch);
}
.imc-form input:focus { border-color:var(--forest); box-shadow:0 0 0 3px rgba(27,74,54,.08); }

.imc-result {
  margin-top:10px; padding:9px 12px; font-size:12.5px; font-weight:600;
  color:var(--forest); background:rgba(27,74,54,.07);
  border:1px solid rgba(27,74,54,.12); border-radius:var(--r-sm);
  text-align:center; min-height:14px;
}
.imc-status { font-size:11px; color:var(--muted); margin-top:5px; text-align:center; }

/* Section titre dans le panel */
.form-section-title {
  font-size:9.5px; font-weight:700; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--muted);
  padding:13px 0 8px; border-top:1px solid rgba(0,0,0,.06); margin-bottom:2px;
}
.form-section-title:first-child { border-top:none; padding-top:0; }

/* File inputs */
.file-btn {
  display:inline-flex; align-items:center; gap:5px;
  padding:8px 14px; font-family:'DM Sans',sans-serif;
  font-size:12px; font-weight:600; color:var(--forest);
  background:var(--fp); border:1.5px solid rgba(27,74,54,.2);
  border-radius:var(--r-pill); cursor:pointer; transition:all var(--t);
  min-height:var(--touch); -webkit-tap-highlight-color:transparent;
}
.file-btn:active { background:var(--forest); color:var(--white); }
.file-chosen { font-size:11px; color:var(--muted); font-style:italic; margin-top:3px; display:block; }

/* Dropdown custom */
.select-container      { position:relative; }
.select-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 12px; font-family:'DM Sans',sans-serif; font-size:16px;
  color:var(--ink); background:var(--sand); border:1.5px solid rgba(0,0,0,.09);
  border-radius:var(--r-md); cursor:pointer; user-select:none;
  transition:border-color var(--t); min-height:var(--touch);
}
.arrow        { font-size:9px; color:var(--muted); transition:transform .18s; }
.arrow.open   { transform:rotate(180deg); }
.select-dropdown {
  display:none; position:absolute; bottom:calc(100% + 4px); left:0; right:0;
  background:var(--surface); border:1.5px solid rgba(0,0,0,.08);
  border-radius:var(--r-md); box-shadow:var(--sh-lift);
  padding:4px; z-index:600; max-height:160px; overflow-y:auto;
}

/* Bouton soumettre recette : voir .btn-submit-recipe plus bas */
.select-dropdown label {
  display:flex !important; align-items:center; gap:8px;
  padding:8px 10px; font-size:13.5px; font-family:'DM Sans',sans-serif;
  color:var(--ink); text-transform:none; letter-spacing:0; font-weight:400;
  border-radius:var(--r-xs); cursor:pointer; transition:background var(--t); margin:0;
}
.select-dropdown label:active    { background:var(--fp); }
.select-dropdown input[type="checkbox"] {
  accent-color:var(--forest); width:16px; height:16px; margin:0; flex-shrink:0;
}

/* Bannière pré-remplissage depuis frigo */
.frigo-prefill-banner {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 13px; border-radius:var(--r-md);
  font-size:12.5px; font-weight:600; margin-bottom:14px; gap:10px;
}
.frigo-prefill-banner--frigo {
  background:var(--fp); color:var(--forest);
  border:1px solid rgba(27,74,54,.2);
}
.frigo-prefill-banner--ai {
  background:rgba(217,169,126,.12); color:var(--caramel-d);
  border:1px solid rgba(217,169,126,.3);
}


/* ══ HOVER — vrais pointeurs uniquement ══════════════════════ */
@media (hover:hover) and (pointer:fine) {
  .navbar__logo:hover            { opacity:.84; }
  .nav-btn:hover                 { background:var(--fp); color:var(--forest); }
  .nav-btn--profile:hover        { background:var(--forest); color:var(--white); }
  .nav-btn--icon:hover svg       { stroke:var(--forest); }
  .nav-dropdown__item--danger:hover { background:var(--danger); color:var(--white); }
  .nav-dropdown__item--admin:hover { background:var(--caramel); color:var(--white); }
  .sidebar__btn--admin:hover { background:var(--caramel); color:var(--white); }


  .sidebar__btn:hover            { background:var(--fp); color:var(--forest); }
  .sidebar__btn--add:hover       { background:var(--forest); color:var(--white); transform:translateY(-1px); }
  .sidebar__btn--add:hover svg   { stroke:var(--white); }
  .sidebar__btn--frigo:hover     { background:var(--forest); color:var(--white); }
  .sidebar__btn:active           { transform:none; }

  .recipe-card:hover             { transform:translateY(-3px); box-shadow:var(--sh-lift); }
  .recipe-card:active            { transform:none; }
  .recipe-card__img              { transition:transform .35s ease; }
  .recipe-card:hover .recipe-card__img { transform:scale(1.05); }
  /* Overlay masqué au repos sur desktop, visible au hover */
  .recipe-card__overlay          { opacity:0; transition:opacity var(--t); }
  .recipe-card:hover .recipe-card__overlay { opacity:1; }

  .btn-overlay--white:hover      { background:var(--forest-m); }
  .btn-overlay--fav:hover        { background:rgba(255,255,255,.28); }
  .btn-overlay--del:hover        { background:#a93025; }
  .btn-overlay:active            { transform:none; }

  .file-btn:hover                { background:var(--forest); color:var(--white); }
  .file-btn:active               { background:var(--forest); color:var(--white); }

  .select-dropdown label:hover   { background:var(--fp); }
  .select-dropdown label:active  { background:var(--fp); }

  .form-panel__close:hover       { background:var(--caramel-l); color:var(--ink); }
}


/* ══ TABLETTE — 560px+ ════════════════════════════════════════ */
@media (min-width:560px) {
  :root { --page-px:16px; }

  .recipes-grid { grid-template-columns:repeat(3,1fr); gap:12px; }
  .recipe-card__img-wrap { height:130px; }
}


/* ══ DESKTOP — 768px+ ════════════════════════════════════════
   Sidebar fixe gauche + main scrollable
════════════════════════════════════════════════════════════════ */
@media (min-width:768px) {
  :root {
    --nav-h:   70px;
    --nav-top: 14px;
    --page-px: 12px;
  }

  .navbar { padding:0 12px 0 6px; }.nav-btn { font-size:13.5px; padding:8px 13px; }

  /* Réafficher les boutons nav masqués */
  #btn-recettes, #btn-favoris { display:inline-flex; }

  /* App shell : horizontal */
  .app-shell {
    flex-direction:row; gap:20px; align-items:flex-start;
    padding:calc(var(--nav-h) + var(--nav-top) + 22px) var(--page-px) 50px;
  }

  /* Bottom nav masquée sur desktop (sidebar + toggle du haut suffisent) */
  .bottom-nav   { display:none; }
  .view-toggle  { display:none; }
  .imc-overlay,
  .imc-sheet    { display:none !important; }

  /* Sidebar restaurée */
  .sidebar {
    display:flex; flex:0 0 var(--sidebar-w); flex-direction:column; flex-wrap:nowrap;
    position:sticky; top:calc(var(--nav-h) + var(--nav-top) + 22px);
    gap:10px; overflow-y:auto; padding-bottom:0;
    max-height:calc(100vh - var(--nav-h) - var(--nav-top) - 44px);
  }
  .sidebar__section {
    display:flex; flex-direction:column; align-items:stretch;
    background:var(--surface); border:1px solid rgba(0,0,0,.07);
    border-radius:var(--r-xl); padding:18px; box-shadow:var(--sh-card);
  }
  .sidebar__title {
    display:block; font-family:'Playfair Display',serif;
    font-size:1.05rem; font-weight:700; color:var(--ink); margin-bottom:14px;
  }
  .sidebar__nav { display:flex; flex-direction:column; gap:3px; }
  .sidebar__btn--add { justify-content:center; margin-top:4px; padding:10px; }

  /* Form panel : side panel depuis droite sur desktop */
  .form-panel {
    bottom:auto; left:auto; top:0; right:-100%;
    width:min(520px,100vw); height:100dvh; max-height:none;
    border-radius:0; transform:none;
    transition:right .35s cubic-bezier(.32,0,.16,1);
    box-shadow:-8px 0 40px rgba(26,26,20,.14);
    z-index:960;
  }
  .form-panel::before { display:none; }
  .form-panel.open    { right:0; transform:none; }

  .form-panel__header { padding:22px 26px 18px; }
  .form-panel__title  { font-size:1.4rem; }
  .form-panel__body   { padding:22px 26px 40px; }

  .recipes-grid { grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px; }
  .recipe-card__img-wrap { height:130px; }

  .section-header { margin-bottom:18px; }
  .section-title  { font-size:1.65rem; }

  /* Inputs : taille normale sur desktop */
  .field input[type="text"],
  .field input[type="number"],
  .field select,
  .field textarea,
  .select-header,
  .imc-form input,
  .search-panel__input,
  .search-filter select { font-size:13.5px; min-height:unset; }

  .field input[type="text"],
  .field input[type="number"],
  .field select,
  .field textarea { padding:10px 13px; }
}


/* ══ LARGE DESKTOP — 1024px+ ══════════════════════════════════ */
@media (min-width:1024px) {
  :root { --page-px:14px; }
  .recipes-grid { grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:16px; }
  .recipe-card__img-wrap { height:140px; }
  .section-title { font-size:1.75rem; }
  .recettes-header__title { font-size:2.5rem; }
}

/* ══ BOUTON SUBMIT RECETTE ════════════════════════════════════ */
.btn-submit-recipe {
  width:100%; padding:13px;
  background:var(--forest); color:var(--white);
  border:none; border-radius:var(--r-pill);
  font-family:'DM Sans',sans-serif; font-size:14px; font-weight:700;
  cursor:pointer; transition:background var(--t), transform var(--t);
  box-shadow:var(--sh-btn);
  display:flex; align-items:center; justify-content:center;
  min-height:var(--touch);
  -webkit-tap-highlight-color:transparent;
}
.btn-submit-recipe:hover  { background:var(--forest-m); }
.btn-submit-recipe:active { background:var(--forest-m); transform:scale(.98); }

/* Message erreur formulaire — masqué par défaut, visible seulement si JS l'active */
#general-error-message { display:none !important; }
#general-error-message.visible { display:block !important; }

/* ── Étoiles sur les cards ── */
.meta-tag--stars { align-items: center; gap: 3px; }
.card-stars .star { font-size: .85rem; color: var(--muted-l); }
.card-stars .star--filled { color: var(--caramel); }
.card-stars .star--half   { color: var(--caramel-l); }


/* ══════════════════════════════════════════════════════════════
   BLOC MODÉRATION — Mes recettes en attente / rejetées
══════════════════════════════════════════════════════════════ */
.moderation-block {
  background: var(--surface);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-card);
  margin-bottom: 22px;
  overflow: hidden;
}
 
/* En-tête du bloc */
.moderation-block__header {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 16px;
  background: var(--sand);
  border-bottom: 1px solid rgba(0,0,0,.06);
  font-size: 11px; font-weight: 700;
  letter-spacing: .8px; text-transform: uppercase;
  color: var(--muted);
}
.moderation-block__close {
  margin-left: auto;
  display: flex; align-items: center; justify-content: center;
  min-width: var(--touch); min-height: var(--touch);
  margin-top: -13px; margin-bottom: -13px; margin-right: -16px;
  background: none; border: none; cursor: pointer;
  color: var(--muted); transition: color var(--t);
  -webkit-tap-highlight-color: transparent;
}
.moderation-block__close:hover { color: var(--ink); }
.moderation-block__header svg {
  width: 13px; height: 13px;
  stroke: var(--muted); fill: none; flex-shrink: 0;
}
.moderation-block__count {
  margin-left: auto;
  background: var(--muted-l); color: var(--white);
  font-size: 10px; font-weight: 700;
  padding: 1px 7px; border-radius: var(--r-pill);
}
 
/* Liste */
.moderation-block__list { display: flex; flex-direction: column; }
 
/* Ligne individuelle */
.moderation-row {
  display: flex; align-items: stretch; gap: 0;
  border-bottom: 1px solid rgba(0,0,0,.05);
  transition: background var(--t);
}
.moderation-row:last-child { border-bottom: none; }
 
/* Indicateur coloré gauche */
.moderation-row__indicator {
  width: 4px; flex-shrink: 0;
}
.moderation-row--wait   .moderation-row__indicator { background: #e67e22; }
.moderation-row--reject .moderation-row__indicator { background: var(--danger); }
 
/* Contenu */
.moderation-row__content {
  flex: 1; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 7px;
}
 
/* Ligne du haut : nom + badge */
.moderation-row__top {
  display: flex; align-items: center;
  justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.moderation-row__nom {
  font-size: 13px; font-weight: 600; color: var(--ink);
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
 
/* Badge statut */
.moderation-row__badge {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 700;
  border: 1px solid; white-space: nowrap; flex-shrink: 0;
}
.moderation-row__badge--wait {
  background: rgba(230,126,34,.08);
  color: #e67e22;
  border-color: rgba(230,126,34,.22);
}
.moderation-row__badge--reject {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: rgba(192,57,43,.2);
}
 
/* Motif de rejet */
.moderation-row__motif {
  display: flex; align-items: flex-start; gap: 7px;
  background: var(--danger-bg);
  border: 1px solid rgba(192,57,43,.12);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  font-size: 12px; color: var(--danger); line-height: 1.5;
}
.moderation-row__motif svg {
  width: 13px; height: 13px;
  stroke: var(--danger); fill: none; flex-shrink: 0; margin-top: 1px;
}
 
/* ══════════════════════════════════════════════════════════════
   BANDEAU BROUILLON RECETTE
══════════════════════════════════════════════════════════════ */
#draft-banner {
  background: rgba(217,169,126,.08);
  border: 1.5px solid rgba(217,169,126,.35);
  border-radius: var(--r-lg);
  padding: 12px 14px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
 
#draft-banner svg {
  flex-shrink: 0;
}
 
#draft-banner span {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--caramel-d);
  flex: 1;
  min-width: 160px;
  line-height: 1.4;
}
 
/* Bouton Restaurer */
#draft-restore {
  padding: 7px 15px;
  background: var(--caramel);
  color: var(--white);
  border: none;
  border-radius: var(--r-pill);
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--t), transform var(--t);
  white-space: nowrap;
  flex-shrink: 0;
}
#draft-restore:hover  { background: var(--caramel-d); }
#draft-restore:active { transform: scale(.96); }
 
/* Bouton Ignorer */
#draft-discard {
  padding: 7px 13px;
  background: none;
  color: var(--muted);
  border: 1.5px solid rgba(0,0,0,.1);
  border-radius: var(--r-pill);
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--t), border-color var(--t), background var(--t);
  white-space: nowrap;
  flex-shrink: 0;
}
#draft-discard:hover  { color: var(--danger); border-color: rgba(192,57,43,.25); background: var(--danger-bg); }
#draft-discard:active { transform: scale(.96); }
 
/* Indicateur de sauvegarde */
#draft-indicator {
  font-size: 11px;
  color: var(--muted);
  text-align: right;
  margin-top: 6px;
  transition: opacity .5s ease;
  opacity: 0;
}
 
/* Dark mode */
html.dark #draft-banner {
  background: rgba(217,169,126,.06);
  border-color: rgba(217,169,126,.25);
}
html.dark #draft-discard {
  border-color: rgba(255,255,255,.12);
  color: var(--muted);
}
 
/* Mobile : boutons pleine largeur */
@media (max-width: 480px) {
  #draft-restore,
  #draft-discard {
    flex: 1;
    justify-content: center;
    text-align: center;
  }
}

/* ══════════════════════════════════════════════════════════════
   v2 — Additions accessibilité + variantes navbar admin
══════════════════════════════════════════════════════════════ */

/* ── Skip to content : caché sauf au focus clavier ────────── */
.skip-to-content {
  position: absolute;
  top: -60px; left: 0; z-index: 9999;
  padding: 10px 16px;
  background: var(--forest); color: var(--white);
  font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 700;
  border-radius: 0 0 var(--r-md) 0;
  text-decoration: none;
  transition: top .2s ease;
}
.skip-to-content:focus {
  top: 0;
  outline: 3px solid var(--caramel);
}

/* ── Focus visible partout : ceinture et bretelles a11y ──── */
:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 2px;
}

/* ── Variantes de navbar spécifiques admin ───────────────── */
.nav-btn--admin {
  background: var(--caramel-l);
  color: var(--caramel-d);
  font-weight: 600;
  padding: 8px 14px;
  margin-left: 3px;
  border: 2px solid var(--caramel-d);
  border-radius: var(--r-pill);
  font-size: 12.5px;
  gap: 6px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.nav-btn--danger {
  background: var(--danger-bg);
  color: var(--danger);
  font-weight: 600;
  padding: 8px 14px;
  margin-left: 3px;
  border: 2px solid var(--danger);
  border-radius: var(--r-pill);
  font-size: 12.5px;
  gap: 6px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.nav-btn--admin svg,
.nav-btn--danger svg { width: 14px; height: 14px; flex-shrink: 0; }

@media (hover:hover) and (pointer:fine) {
  .nav-btn--admin:hover  { background: var(--caramel); color: var(--white); }
  .nav-btn--danger:hover { background: var(--danger); color: var(--white); }
}

/* ── Grille de checkboxes en pills (mobile-friendly) ────── */
.checkbox-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.checkbox-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: var(--sand);
  border: 1.5px solid rgba(0,0,0,.08);
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  transition: all var(--t);
  min-height: 36px;
  -webkit-tap-highlight-color: transparent;
}
.checkbox-pill input {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.checkbox-pill:has(input:checked) {
  background: var(--forest);
  color: var(--white);
  border-color: var(--forest);
}
.checkbox-pill:active { transform: scale(.97); }

/* ── Alerte "success" (flash post-inscription) ───────────── */
.auth-alert--success {
  background: rgba(39,174,96,.1);
  border-color: rgba(39,174,96,.3);
  color: #27ae60;
}

/* ── Bottom-nav : améliorations mobile (aria-labels, active) ─ */
.bottom-nav__item:focus-visible {
  outline-offset: -2px;
}