/* ============================================================
   Pominy — feuille de styles
   Sortie de index.html le 04/09/2026. Contenu inchangé.
   Si tu modifies ce fichier, pense à incrémenter CACHE_VERSION
   dans sw.js, sinon les visiteurs garderont l'ancien style.
   ============================================================ */

  :root{
    --bg:#faf8f3; --card:#ffffff; --ink:#22271f; --ink-dim:#6b7263; --line:#e7e3d6;
    --sauge:#5d7d56; --sauge-dark:#47603f; --sauge-light:#e8efe3;
    --safran:#e2952f; --safran-dark:#c17c1f; --corail:#c2495a;
    --radius:16px;
    --lin:url('/img/ui/texture-lin.webp');
  }
  *{box-sizing:border-box;}
  body{margin:0; background-color:var(--bg); background-image:url('/img/ui/fond-body.jpg'); background-repeat:repeat; color:var(--ink); font-family:'Work Sans', sans-serif; -webkit-font-smoothing:antialiased; padding-bottom:60px;}
  h1,h2,h3,.brand,.cta,.step-label{font-family:'Fredoka', sans-serif;}
  .wrap{max-width:760px; margin:0 auto; padding:0 18px;}
  a{color:inherit;}

  /* Header : la texture toile/lin du logo est étendue à toute la largeur.
     La tuile est construite par symétrie miroir : elle se répète sans raccord visible.
     background-size suit la hauteur du logo, pour que le grain du header soit exactement
     à la même échelle que celui contenu dans l'image — sinon le logo se détache. */
  nav{
    position:sticky; top:0; z-index:20;
    background-color:#d5c8b7;
    background-image:var(--lin);
    background-repeat:repeat;
    background-size:80px 80px;
    border-bottom:1px solid rgba(90,74,60,0.28);
    box-shadow:0 2px 10px rgba(34,39,31,0.10);
    transition:background-size .22s ease;
  }
  nav.compact{background-size:64px 64px;}
  /* Logo centré sur toute la largeur de l'écran, icônes repoussées au bord droit */
  .nav-inner{max-width:none; width:100%; margin:0; padding:6px 22px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; column-gap:10px;}
  .brand{grid-column:2; grid-row:1; justify-self:center; cursor:pointer; display:flex; align-items:center; justify-content:center;}
  /* Hauteur FIXE : le header est en position sticky, donc toute variation de sa
     hauteur repousse le contenu et fait « sauter » la ligne de séparation.
     L'effet de compactage passe donc par une mise à l'échelle, qui ne consomme
     aucune place dans la mise en page. */
  .brand{height:100px;}
  .brand img{
    height:100px; width:auto; max-width:100%;
    object-fit:contain;      /* jamais rogné, quelle que soit la largeur disponible */
    display:block;
    transform-origin:center center;
    transition:transform .22s ease;
  }
  .nav-icons{grid-column:3; grid-row:1; justify-self:end; display:flex; gap:9px;}
  .hamburger-btn{grid-column:3; grid-row:1; justify-self:end; display:none;}
  /* Au défilement, le header se compacte — sans descendre sous le seuil où
     le mot « Pominy » cesse d'être lisible. */
  nav.compact .brand img{transform:scale(0.8);}
  @media (max-width:680px){
    nav{background-size:64px 64px;}
    nav.compact{background-size:51px 51px;}
    .nav-inner{padding:5px 12px;}
    .brand{height:80px;}
    .brand img{height:80px;}
    nav.compact .brand img{transform:scale(0.8);}
  }

  /* Icônes du header : nouveau design avec halo lumineux permanent.
     Le halo est fait de plusieurs box-shadow superposées plutôt que d'un pseudo-élément :
     une ombre externe se peint toujours derrière le contenu, l'emoji reste donc net. */
  .nav-icon-btn{
    position:relative; border:1.5px solid rgba(79,107,74,0.22);
    background:linear-gradient(145deg, #ffffff 0%, #f4f1e8 100%);
    border-radius:999px; width:42px; height:42px; display:flex; align-items:center; justify-content:center;
    cursor:pointer; font-size:1.15rem; line-height:1;
    box-shadow:
      0 0 0 4px rgba(226,149,47,0.12),
      0 0 12px 2px rgba(226,149,47,0.30),
      0 0 24px 6px rgba(226,149,47,0.16),
      0 2px 6px rgba(34,39,31,0.10);
    transition:box-shadow .22s ease, transform .18s ease, border-color .22s ease, background .22s ease;
  }
  @media (min-width: 681px){
    .hamburger-btn{display:none !important;}
    .nav-icons{display:flex !important; position:static; padding:0; background:none; border:none;}
    .nav-icon-btn:hover, .nav-icon-btn:focus-visible{
      transform:translateY(-2px); border-color:var(--safran);
      background:linear-gradient(145deg, #fffdf8 0%, #fbead2 100%);
      box-shadow:
        0 0 0 5px rgba(226,149,47,0.22),
        0 0 18px 4px rgba(226,149,47,0.60),
        0 0 34px 10px rgba(226,149,47,0.30),
        0 6px 16px rgba(34,39,31,0.16);
    }
    .nav-icon-btn:active{transform:translateY(0);}
  }
  @media (max-width: 680px){
    .hamburger-btn{display:flex;}
    /* --- menu mobile : liste lisible plutôt que boutons ronds empilés --- */
    .nav-icons{display:none; position:absolute; top:calc(100% + 10px); right:14px; left:14px;
      flex-direction:column; gap:0; background:var(--card); border:1px solid var(--line);
      border-radius:18px; padding:6px; box-shadow:0 14px 40px rgba(34,39,31,0.22); z-index:40;
      overflow:hidden;}
    .nav-icons.open{display:flex; animation:menuOuvre .16s ease;}
    @keyframes menuOuvre{from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:none;}}
    /* Les halos orange, pensés pour des icônes rondes isolées, deviennent illisibles
       une fois les boutons empilés en liste : on les supprime ici. */
    .nav-icons .nav-icon-btn{width:100%; height:auto; border:none; border-radius:12px;
      justify-content:flex-start; gap:14px; padding:14px 14px; font-size:1.35rem;
      background:none; box-shadow:none; transform:none;}
    .nav-icons .nav-icon-btn + .nav-icon-btn{border-top:1px solid var(--line);
      border-radius:0;}
    .nav-icons .nav-icon-btn:hover, .nav-icons .nav-icon-btn:focus-visible,
    .nav-icons .nav-icon-btn:active{background:var(--sauge-light); box-shadow:none;
      transform:none; border-color:var(--line);}
    /* Dans le menu, le libellé n'est plus une infobulle flottante mais du texte
       en ligne. Le sélecteur couvre AUSSI l'état :hover, sinon la règle générale
       réapplique translateX(-50%) et le texte glisse hors du cadre. */
    .nav-icons .nav-icon-btn[data-tooltip]::after,
    .nav-icons .nav-icon-btn[data-tooltip]:hover::after,
    .nav-icons .nav-icon-btn[data-tooltip]:focus-visible::after{
      content:attr(data-tooltip); position:static;
      transform:none !important; background:none; color:var(--ink); font-family:'Fredoka'; font-weight:600;
      font-size:0.95rem; padding:0; white-space:normal; opacity:1; pointer-events:none;
      box-shadow:none; flex:1; text-align:left; transition:none;}
    /* seul repère au survol : le fond vert et le libellé en gras */
    .nav-icons .nav-icon-btn:hover[data-tooltip]::after{font-weight:700;}
    /* chevron discret pour signaler que la ligne ouvre quelque chose */
    .nav-icons .nav-icon-btn::before{content:'›'; order:3; color:var(--ink-dim);
      font-size:1.1rem; margin-left:auto; opacity:.5;}
    .nav-icons .nav-icon-btn .badge{position:static; order:2; margin-left:auto;}
    .hamburger-btn{width:42px; height:42px;}
  }
  #scroll-top-btn{position:fixed; bottom:24px; right:20px; width:46px; height:46px; border-radius:999px; border:none; background:var(--safran); color:#fff; font-size:1.3rem; font-weight:700; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,0.2); display:none; align-items:center; justify-content:center; z-index:80; transition:opacity 0.2s ease;}
  #scroll-top-btn:hover{background:var(--safran-dark);}
  #scroll-top-btn.visible{display:flex;}
  /* --- feuilletage des photos depuis le catalogue ---
     Remplace la galerie : la vignette du catalogue ouvre la visionneuse, qui
     parcourt toute la sélection à la flèche ou au doigt. */
  .cata-grille .ag-tuile .vis{cursor:zoom-in;}
  .cata-zoom{position:absolute; right:8px; bottom:8px; z-index:3;
    padding:5px 10px; border-radius:999px; background:rgba(20,22,18,0.66);
    color:#fff; font-size:0.72rem; font-weight:600; letter-spacing:0.01em;
    opacity:0; transition:opacity .15s ease; pointer-events:none;}
  .cata-grille .ag-tuile:hover .cata-zoom{opacity:1;}
  /* Sur un écran tactile il n'y a pas de survol : l'indice reste visible. */
  @media(hover:none){ .cata-zoom{opacity:1;} }
  .nav-icon-btn .badge{position:absolute; top:-4px; right:-4px; background:var(--corail); color:white; font-size:0.65rem; font-weight:700; border-radius:999px; min-width:16px; height:16px; display:flex; align-items:center; justify-content:center; padding:0 3px;}
  .nav-icon-btn[data-tooltip]::after{content:attr(data-tooltip); position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(-4px); background:var(--ink); color:#fff; font-size:0.7rem; font-weight:600; padding:5px 10px; border-radius:6px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity 0.15s ease, transform 0.15s ease; z-index:60;}
  .nav-icon-btn[data-tooltip]:hover::after{opacity:1; transform:translateX(-50%) translateY(0);}

  .home-hero{text-align:center; padding:60px 0 28px; position:relative;}
  .hero-mark{width:56px; height:56px; margin:0 auto 18px; color:var(--sauge); display:block;}
  .hero-tagline{
    display:inline-block; font-size:0.78rem; font-weight:700; letter-spacing:0.6px; text-transform:uppercase;
    color:var(--safran-dark); background:#fbead2; padding:6px 14px; border-radius:999px; margin-bottom:18px;
  }
  .home-hero h1{font-size:clamp(1.9rem,7vw,2.6rem); font-weight:700; margin:0 0 10px; line-height:1.15;}
  .home-hero p{color:var(--ink-dim); font-size:1rem; max-width:420px; margin:0 auto;}
  .mode-grid{display:grid; grid-template-columns:1fr; gap:16px; margin-top:32px;}
  @media(min-width:600px){.mode-grid{grid-template-columns:1fr 1fr;}}
  /* À trois cartes sur deux colonnes, la dernière est centrée. */
  @media(min-width:600px) and (max-width:899px){
    .mode-grid > :last-child{grid-column:1 / -1; max-width:calc(50% - 8px); justify-self:center;}}
  /* quatre modes : 2x2 sur écran moyen, une seule ligne au-delà — jamais une
     carte esseulée sur une deuxième rangée */
  /* Trois façons de décider : une, deux, puis trois colonnes. Aucune rangée
     incomplète possible. */
  @media(min-width:900px){.mode-grid{grid-template-columns:repeat(3,1fr);}}
  /* Cartes des 3 modes : tout centré, et badge aligné en bas quelle que soit
     la longueur du texte (sinon les pastilles flottent à des hauteurs différentes) */
  /* Les quatre cartes gardent la même hauteur quel que soit le nombre de colonnes.
     align-items:stretch n'égalise que DANS une rangée ; grid-auto-rows:1fr aligne
     aussi les rangées entre elles, indispensable en 2 colonnes et en 1 colonne. */
  .mode-grid{align-items:stretch; grid-auto-rows:1fr;}
  .mode-card{display:flex; flex-direction:column;}
  .mode-card p{flex:1;}
  .mode-card{
    background:var(--card); border:1.5px solid var(--line); border-radius:20px;
    padding:30px 22px 26px; cursor:pointer;
    transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
    text-align:center; box-shadow:0 2px 10px rgba(34,39,31,0.04);
    display:flex; flex-direction:column; align-items:center; height:100%; box-sizing:border-box;
  }
  .mode-card:hover{transform:translateY(-3px); border-color:var(--sauge); box-shadow:0 12px 24px rgba(79,107,74,0.14);}
  .mode-card .icon{font-size:2.4rem; margin:0 0 12px; display:block; line-height:1;}
  .mode-card h2{font-size:1.25rem; margin:0 0 8px; font-weight:600;}
  .mode-card p{color:var(--ink-dim); font-size:0.9rem; margin:0 0 18px; line-height:1.5; max-width:26ch;}
  .mode-card .duration{display:inline-block; font-size:0.78rem; font-weight:600; color:var(--sauge-dark); background:var(--sauge-light); padding:5px 12px; border-radius:999px; margin-top:auto;}
  .mode-card.express .duration{color:var(--safran-dark); background:#fbead2;}
  .mode-card.baby .duration{color:#a86bab; background:#f3e6f5;}
  .mode-card.antigaspi .duration{color:#3f7a52; background:#e2f0e6;}

  .baby-disclaimer{background:#fff4e0; border:1px solid #f0d9a8; border-radius:14px; padding:14px 16px; font-size:0.85rem; line-height:1.5; color:#6b5424; margin:14px 0 22px;}
  .baby-disclaimer.small{font-size:0.78rem; padding:10px 14px; margin:10px 0 18px;}
  /* Étapes bébé : toujours empilées les unes sous les autres, dans l'ordre chronologique */
  .baby-stage-grid{display:flex; flex-direction:column; gap:12px; max-width:620px; margin:0 auto;}
  @media(min-width:600px){.baby-stage-grid{grid-template-columns:none;}}
  .baby-stage-card{display:flex; align-items:center; gap:16px;}
  .baby-stage-num{flex-shrink:0; width:38px; height:38px; border-radius:999px; background:var(--sauge-light); color:var(--sauge-dark); font-family:'Fredoka',sans-serif; font-weight:600; font-size:1rem; display:flex; align-items:center; justify-content:center;}
  .baby-stage-card .stage-text{flex:1; min-width:0;}
  .baby-stage-card .stage-arrow{color:var(--ink-dim); font-size:1.3rem; flex-shrink:0;}
  .baby-stage-card:not(.soon):hover .baby-stage-num{background:var(--sauge); color:#fff;}
  .baby-tabs{display:flex; gap:8px; flex-wrap:wrap; margin:16px 0 18px;}
  .baby-tab{background:var(--card); border:1.5px solid var(--line); border-radius:999px; padding:8px 16px; font-size:0.85rem; font-weight:600; cursor:pointer; color:var(--ink-dim); transition:all .12s ease;}
  .baby-tab.active{background:var(--sauge); border-color:var(--sauge); color:white;}
  .baby-tab:not(.active):hover{border-color:var(--sauge);}
  .baby-stage-card{background:var(--card); border:1.5px solid var(--line); border-radius:16px; padding:20px; cursor:pointer; transition:transform .12s ease, border-color .12s ease;}
  .baby-stage-card:not(.soon):hover{transform:translateY(-2px); border-color:var(--sauge);}
  .baby-stage-card h3{margin:0 0 4px; font-size:1.05rem;}
  .baby-stage-card p{margin:0; color:var(--ink-dim); font-size:0.85rem;}
  .baby-stage-card.soon{opacity:0.5; cursor:not-allowed;}
  .soon-badge{display:inline-block; margin-top:8px; font-size:0.72rem; font-weight:600; background:var(--line); padding:3px 9px; border-radius:999px;}
  .detail-back-link{background:none; border:none; color:var(--sauge-dark); font-weight:600; cursor:pointer; font-size:0.9rem; padding:0;}

  .wizard{max-width:700px; margin:20px auto 0;}
  .progress-dots{display:flex; gap:6px; justify-content:center; margin-bottom:28px;}
  .progress-dots span{width:8px; height:8px; border-radius:999px; background:var(--line);}
  .progress-dots span.done{background:var(--sauge);}
  .progress-dots span.current{background:var(--safran);}
  .step-label{text-align:center; font-size:1.35rem; font-weight:600; margin-bottom:22px;}
  .step-sub{text-align:center; font-size:0.85rem; color:var(--ink-dim); margin:-14px 0 22px;}
  .step-chips{display:flex; flex-wrap:wrap; gap:10px; justify-content:center;}
  .step-chip{padding:13px 20px; border-radius:14px; border:1.5px solid var(--line); background:var(--card); font-size:0.95rem; font-weight:600; cursor:pointer; transition:all .12s ease;}
  .step-chip:hover{border-color:var(--sauge);}
  .step-chip.picked{background:var(--sauge); border-color:var(--sauge); color:white;}
  .stepper-row{display:flex; align-items:center; justify-content:center; gap:22px; margin-top:10px;}
  .stepper-btn{width:48px; height:48px; border-radius:999px; border:1.5px solid var(--line); background:var(--card); font-size:1.4rem; font-weight:700; cursor:pointer; color:var(--sauge-dark);}
  .stepper-val{font-size:2rem; font-weight:700; font-family:'Fredoka'; min-width:50px; text-align:center;}
  .wizard-back{display:block; margin:26px auto 0; background:none; border:none; color:var(--ink-dim); text-decoration:underline; cursor:pointer; font-size:0.85rem;}
  .wizard-continue{display:block; margin:26px auto 0;}

  .section-title{font-size:1.3rem; font-weight:700; margin:28px 0 14px;}
  .results-grid{display:grid; grid-template-columns:1fr; gap:14px; min-width:0;}
  .results-group{margin-bottom:28px; min-width:0;}
  .results-groups-row{min-width:0;}
  @media (min-width: 1100px){
    .wrap{max-width:1200px;}
    .results-groups-row{display:flex; gap:24px; align-items:flex-start; justify-content:center; flex-wrap:wrap;}
    .results-groups-row .results-group{flex:0 1 260px; max-width:260px; min-width:0; margin-bottom:0;}
    .results-groups-row .group-desktop-list{height:740px; overflow-y:auto; padding-right:6px;}
    .results-groups-row .group-desktop-list::-webkit-scrollbar{width:5px;}
    .results-groups-row .group-desktop-list::-webkit-scrollbar-thumb{background:var(--line); border-radius:99px;}
    .results-groups-row .group-desktop-list::-webkit-scrollbar-track{background:transparent;}
  }
  .results-group-title{font-size:1.05rem; font-weight:700; color:#fff; background:var(--safran); margin:0 0 14px; padding:10px 16px; border-radius:10px; display:flex; align-items:center; gap:8px;}
  .results-group-title .count{font-weight:500; color:rgba(255,255,255,0.85); font-size:0.85rem;}
  .compact-list{display:flex; flex-direction:column;}
  .compact-row{display:flex; align-items:center; gap:12px; padding:11px 4px; border-bottom:1px solid var(--line); cursor:pointer;}
  .compact-row:last-child{border-bottom:none;}
  .compact-thumb{width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0; position:relative; overflow:hidden;}
  .compact-thumb img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0;}
  .compact-thumb .visual-emoji-fallback{display:none;}
  .compact-thumb:not(.has-photo) .visual-emoji-fallback{display:flex; align-items:center; justify-content:center; width:100%; height:100%;}
  .compact-info{flex:1; min-width:0;}
  .compact-info .name{font-size:0.92rem; font-weight:600; margin:0 0 2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .compact-meta{font-size:0.74rem; color:var(--ink-dim); display:flex; gap:8px;}
  .compact-chevron{color:var(--ink-dim); font-size:1.1rem; flex-shrink:0;}
  .group-desktop-list{display:none;}
  .carousel-wrap{position:relative;}
  .group-mobile-carousel{display:flex; gap:11px; overflow-x:auto; padding:2px 2px 10px; min-width:0;}
  .carousel-wrap.has-more::after{content:'›'; position:absolute; top:0; right:0; bottom:10px; width:34px; display:flex; align-items:center; justify-content:flex-end; padding-right:2px; font-size:1.3rem; font-weight:700; color:var(--ink-dim); background:linear-gradient(to right, transparent, var(--bg) 75%); pointer-events:none;}
  @media (min-width:1100px){ .carousel-wrap.has-more::after{display:none;} }
  .group-mobile-carousel::-webkit-scrollbar{height:4px;}
  .group-mobile-carousel::-webkit-scrollbar-thumb{background:var(--line); border-radius:99px;}
  .mini-card{flex:0 0 118px; scroll-snap-align:start; background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; cursor:pointer;}
  .mini-thumb{height:78px; display:flex; align-items:center; justify-content:center; font-size:1.7rem; position:relative; overflow:hidden;}
  .mini-thumb img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0;}
  .mini-thumb .visual-emoji-fallback{display:none;}
  .mini-thumb:not(.has-photo) .visual-emoji-fallback{display:flex; align-items:center; justify-content:center; width:100%; height:100%;}
  .mini-body{padding:8px 9px 10px;}
  .mini-body .name{font-size:0.75rem; font-weight:600; margin:0 0 4px; line-height:1.25; height:2.4em; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
  .mini-meta{font-size:0.66rem; color:var(--ink-dim); display:flex; gap:5px; flex-wrap:wrap;}
  @media (min-width: 1100px){
    .group-mobile-carousel{display:none;}
    .group-desktop-list{display:flex; flex-direction:column;}
  }
  @media(min-width:600px){.results-grid.grid3{grid-template-columns:1fr 1fr 1fr;}}
  .recipe-card{background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease; display:flex; flex-direction:column; box-shadow:0 2px 8px rgba(34,39,31,0.03);}
  .recipe-card:hover{transform:translateY(-3px); box-shadow:0 10px 20px rgba(34,39,31,0.09);}
  .recipe-visual{height:100px; display:flex; align-items:center; justify-content:center; font-size:2.4rem; position:relative; overflow:hidden;}
  .recipe-visual img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0; object-position:center 40%;}
  .visual-emoji-fallback{display:flex; align-items:center; justify-content:center; width:100%; height:100%;}
  /* La photo n'apparaît qu'une fois chargée : sans ça, l'emoji serait masqué
     puis réapparaîtrait après l'erreur 404, provoquant un saut visible. */
  .recipe-visual img, .compact-thumb img, .mini-thumb img{opacity:0; transition:opacity .18s ease;}
  .recipe-visual.has-photo img, .compact-thumb.has-photo img, .mini-thumb.has-photo img{opacity:1;}
  .recipe-visual.has-photo .visual-emoji-fallback{display:none;}
  .recipe-body{padding:13px 15px 15px;}
  .recipe-body h3{margin:0 0 6px; font-size:1rem; font-weight:600;}
  .recipe-meta{display:flex; flex-wrap:wrap; gap:7px; font-size:0.76rem; color:var(--ink-dim); margin-bottom:7px;}
  .recipe-desc{font-size:0.82rem; color:var(--ink-dim); line-height:1.4; margin:0 0 9px;}
/* Chapeau de la fiche : la phrase de technique, jusqu'ici visible seulement
   sur la vignette de suggestion. */
/* La phrase de technique se lit comme une citation : guillemets, italique,
   pas de filet de couleur qui la transformerait en encadré d'avertissement. */
.detail-chapo{margin:16px 20px 0; padding:14px 18px; background:#fdf6ea;
  border-radius:12px;}
.detail-chapo p{margin:0; font-size:0.95rem; line-height:1.6; color:var(--ink);
  font-style:italic;}
.detail-chapo p::before{content:'« ';}
.detail-chapo p::after{content:' »';}
  .recipe-cta{display:inline-block; font-size:0.82rem; font-weight:700; color:var(--sauge-dark); border:1.5px solid var(--sauge); border-radius:999px; padding:6px 13px;}
  .gradient-1{background:linear-gradient(135deg,#f3ead0,#e8efe3);}
  .gradient-2{background:linear-gradient(135deg,#fbe4d8,#f3ead0);}
  .gradient-3{background:linear-gradient(135deg,#e3ecf5,#e8efe3);}
  .gradient-4{background:linear-gradient(135deg,#f6dde0,#fbead2);}

  .service-group{margin-bottom:26px;}
  .service-group-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
  .service-group-head h3{font-size:1.05rem; margin:0; display:flex; align-items:center; gap:8px;}
  .service-group-head .count{font-size:0.75rem; color:var(--ink-dim); font-weight:500;}
  /* Bouton « Je change ! » — relance les suggestions d'un seul type de plat */
  .mini-reroll{display:inline-flex; align-items:center; gap:7px; background:linear-gradient(135deg, var(--safran) 0%, var(--safran-dark) 100%); border:none; border-radius:999px; padding:9px 16px; font-family:'Fredoka',sans-serif; font-size:0.85rem; font-weight:600; cursor:pointer; color:#fff; box-shadow:0 3px 10px rgba(226,149,47,0.35); transition:transform .12s ease, box-shadow .12s ease, filter .12s ease; white-space:nowrap;}
  .mini-reroll .dice{font-size:1rem; display:inline-block; transition:transform .35s ease;}
  .mini-reroll:hover{transform:translateY(-2px); box-shadow:0 6px 18px rgba(226,149,47,0.5); filter:brightness(1.05);}
  .mini-reroll:hover .dice{transform:rotate(180deg);}
  .mini-reroll:active{transform:translateY(0); box-shadow:0 2px 8px rgba(226,149,47,0.4);}
  @media (max-width:680px){
    .mini-reroll{padding:7px 13px; font-size:0.8rem;}
  }
  /* Résultats Express : cartes sur ordinateur, liste compacte sur mobile */
  .express-cards{display:none;}
  .express-list{display:block;}
  @media (min-width:681px){
    .express-cards{display:grid;}
    .express-list{display:none;}
  }
  .service-empty{font-size:0.82rem; color:var(--ink-dim); font-style:italic; padding:8px 0;}

  .again-row{text-align:center; margin-top:22px;}
  .cta-btn{background:var(--safran); color:#2b1c05; border:none; border-radius:999px; padding:14px 26px; font-size:1rem; font-weight:700; cursor:pointer; font-family:'Fredoka'; box-shadow:0 5px 0 var(--safran-dark);}
  .cta-btn:active{transform:translateY(3px); box-shadow:0 2px 0 var(--safran-dark);}
  .cta-btn.ghost{background:var(--card); color:var(--sauge-dark); border:1.5px solid var(--sauge); box-shadow:none;}
  .cta-btn.small{padding:10px 18px; font-size:0.88rem; box-shadow:0 4px 0 var(--safran-dark);}

  .filters-card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:8px 18px; margin-bottom:18px; box-shadow:0 2px 10px rgba(34,39,31,0.03);}
  .filters-card details{border-bottom:1px solid var(--line); padding:12px 0;}
  .filters-card details:last-child{border-bottom:none;}
  .filters-card summary{font-weight:600; cursor:pointer; font-size:0.95rem; list-style:none; display:flex; justify-content:space-between; align-items:center;}
  .filters-card summary::-webkit-details-marker{display:none;}
  .filters-card summary::after{content:'+'; color:var(--sauge); font-size:1.2rem; font-weight:400;}
  .filters-card details[open] summary::after{content:'–';}
  .filter-chips{display:flex; flex-wrap:wrap; gap:7px; margin-top:12px;}
  /* ============ mode personnalisé : essentiels + critères repliés ============ */
  .filters-card{background:none !important; border:none !important; box-shadow:none !important;
    padding:0 !important;}
  .filtres-essentiels{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:4px;}
  .filtres-essentiels > details{margin:0; background:#fff; border:1px solid var(--line);
    border-radius:16px; padding:14px 16px; box-shadow:0 2px 8px rgba(34,39,31,.05);}
  /* Planning, Type de plat et Cuisine occupent toute la largeur : leurs contenus
     ont des hauteurs très différentes et les mettre côte à côte laissait un vide
     visible sous le bloc le plus court. Seuls Personnes et Temps, de taille
     comparable, restent appariés. */
  .filtres-essentiels > details[data-key="cuisine"],
  .filtres-essentiels > details[data-key="service"]{grid-column:1 / -1;}
  .filtres-essentiels > details.bloc-large{grid-column:1 / -1;}
  details.essentiel > summary{pointer-events:none; font-family:'Fredoka'; font-weight:600;
    font-size:0.86rem; margin:0 0 10px; color:var(--ink); list-style:none;}
  details.essentiel > summary::-webkit-details-marker{display:none;}
  details.essentiel > summary::marker{content:'';}
  details.essentiel > summary::after{display:none;}

  /* --- composer un menu : sélection de plusieurs recettes par catégorie --- */
  .menu-pick{position:absolute; top:8px; right:8px; z-index:5; width:30px; height:30px;
    border-radius:50%; border:2px solid #fff; background:rgba(20,22,18,.45); color:#fff;
    font-size:0.95rem; line-height:1; cursor:pointer; display:flex; align-items:center;
    justify-content:center; backdrop-filter:blur(3px); padding:0;}
  .menu-pick:hover{background:rgba(20,22,18,.7);}
  .menu-pick.on{background:var(--sauge); border-color:var(--sauge);}
  .mini-card{position:relative;}
  .mini-card .menu-pick{position:absolute; top:6px; right:6px; z-index:5;}
  .compact-row .menu-pick{position:static; margin-left:8px; flex-shrink:0;
    border-color:var(--line); background:var(--bg); color:var(--ink-dim); backdrop-filter:none;}
  .compact-row .menu-pick.on, .mini-card .menu-pick.on{background:var(--sauge);
    border-color:var(--sauge); color:#fff;}
  #menu-barre{position:fixed; left:50%; transform:translateX(-50%) translateY(120%); bottom:18px;
    z-index:90; background:var(--ink); color:#fff; border-radius:999px; padding:10px 12px 10px 20px;
    display:flex; align-items:center; gap:14px; box-shadow:0 10px 34px rgba(0,0,0,.3);
    transition:transform .22s ease; max-width:calc(100vw - 24px);}
  #menu-barre.visible{transform:translateX(-50%) translateY(0);}
  #menu-barre .mb-txt{font-family:'Fredoka'; font-weight:600; font-size:0.88rem; white-space:nowrap;}
  #menu-barre .mb-detail{display:block; font-weight:400; font-size:0.74rem; opacity:.7;}
  #menu-barre button{background:rgba(255,255,255,.14); color:#fff; border:none; border-radius:999px;
    padding:9px 14px; font-size:0.82rem; font-weight:600; cursor:pointer; white-space:nowrap;}
  #menu-barre button:hover{background:rgba(255,255,255,.28);}
  #menu-barre .mb-vider{background:none; padding:9px 6px; opacity:.65;}
  @media(max-width:560px){
    #menu-barre{left:12px; right:12px; transform:translateY(120%); max-width:none;
      border-radius:18px; padding:12px 14px; flex-wrap:wrap; justify-content:space-between;}
    #menu-barre.visible{transform:translateY(0);}
  }
  /* ============ LES BASIQUES ============ */
  .mode-card.basiques .icon{color:var(--safran-dark);}
  .bq-familles{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:0 0 20px;}
  .bq-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px;}
  .bq-card{background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden;
    cursor:pointer; box-shadow:0 2px 10px rgba(34,39,31,.06); transition:transform .15s ease, box-shadow .15s ease;}
  .bq-card:hover{transform:translateY(-3px); box-shadow:0 10px 24px rgba(34,39,31,.14);}
  .bq-visuel{position:relative; height:0; padding-top:62%; background:var(--sauge-light);}
  .bq-visuel img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1;}
  .bq-visuel .bq-emoji{position:absolute; inset:0; display:flex; align-items:center;
    justify-content:center; font-size:2.6rem; z-index:0;}
  .bq-corps{padding:12px 14px 14px;}
  .bq-corps b{display:block; font-family:'Fredoka'; font-size:1rem; margin-bottom:3px;}
  .bq-corps .bq-meta{font-size:0.78rem; color:var(--ink-dim);}
  .bq-corps .bq-desc{font-size:0.82rem; color:var(--ink-dim); margin:7px 0 0; line-height:1.45;}
  .bq-rendement{display:inline-block; margin-top:9px; background:#fbead2; color:var(--safran-dark);
    font-size:0.75rem; font-weight:600; padding:3px 9px; border-radius:7px;}
  .bq-quantite{background:#fff; border:1px solid var(--line); border-radius:14px;
    padding:13px 15px; margin:0 0 14px;}
  .bq-quantite .bq-q-head{display:flex; align-items:baseline; gap:9px; margin-bottom:7px;}
  .bq-quantite .bq-q-head .lbl{font-size:0.85rem; font-weight:600;}
  .bq-quantite .bq-q-head .val{font-family:'Fredoka'; font-weight:700; font-size:1.05rem; color:var(--sauge-dark);}
  .bq-quantite input[type=range]{display:block; width:100%; accent-color:var(--sauge); margin:0;}
  .bq-quantite .bq-q-note{font-size:0.76rem; color:var(--ink-dim); margin:6px 0 0;}
  .bq-origine{display:flex; align-items:center; gap:9px; background:#fbead2; border-radius:12px;
    padding:11px 14px; margin:0 0 14px; font-size:0.85rem; color:var(--safran-dark);}
  .bq-conservation{background:var(--sauge-light); border-radius:12px; padding:12px 14px;
    font-size:0.86rem; color:var(--sauge-dark); margin:0 0 14px;}
  .bq-astuce{background:#fbead2; border-radius:12px; padding:12px 14px; font-size:0.86rem;
    color:var(--safran-dark); margin:0 0 14px;}
  .bq-utilise{display:flex; flex-wrap:wrap; gap:7px; margin:4px 0 0;}
  .bq-utilise button{background:var(--bg); border:1.5px solid var(--line); border-radius:999px;
    padding:7px 13px; font-size:0.82rem; font-weight:500; cursor:pointer; color:var(--ink);}
  .bq-utilise button:hover{border-color:var(--sauge); color:var(--sauge-dark);}
  /* lien vers un basique depuis une étape de recette */
  /* mot du lexique : soulignement pointillé discret, pour ne pas concurrencer
     visuellement les liens vers Les Basiques qui mènent à une vraie recette */
  /* Bleu-sarcelle : assez soutenu pour se détacher du texte sur fond blanc, assez
     sourd pour ne pas rivaliser avec les liens verts vers Les Basiques. */
  .mot-lexique{border:none; background:none; padding:0; font:inherit; font-weight:600;
    color:#2a7f8c; cursor:help; border-bottom:1px dotted #2a7f8c; text-underline-offset:2px;}
  .mot-lexique:focus-visible{outline:2px solid #2a7f8c; outline-offset:2px;}
  .mot-lexique:hover{color:#155e69; border-bottom-style:solid;}
  #bulle-lexique{position:fixed; z-index:10000; max-width:330px; background:var(--ink);
    color:#fff; border-radius:14px; padding:14px 16px; box-shadow:0 12px 34px rgba(0,0,0,.34);
    display:none; font-size:0.86rem; line-height:1.5;}
  #bulle-lexique.open{display:block;}
  #bulle-lexique .bl-mot{font-family:'Fredoka'; font-weight:700; font-size:1rem; margin:0 0 5px;}
  #bulle-lexique .bl-def{margin:0 0 9px;}
  #bulle-lexique .bl-geste{margin:0; padding-top:9px; border-top:1px solid rgba(255,255,255,.18);
    color:rgba(255,255,255,.82);}
  #bulle-lexique .bl-geste b{color:#fff; font-weight:600;}
  #bulle-lexique .bl-close{position:absolute; top:6px; right:8px; background:none; border:none;
    color:rgba(255,255,255,.6); font-size:1rem; cursor:pointer; padding:2px 4px;}
  /* --- page du lexique --- */
  .lx-cat{margin:26px 0 10px; font-family:'Fredoka'; font-weight:700; font-size:1.05rem;
    display:flex; align-items:center; gap:9px;}
  .lx-cat::after{content:''; flex:1; height:1px; background:var(--line);}
  .lx-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:12px;}
  .lx-item{background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 16px;}
  .lx-item b{display:block; font-family:'Fredoka'; font-size:0.98rem; margin-bottom:4px;}
  .lx-item .lx-def{font-size:0.86rem; line-height:1.5; margin:0;}
  .lx-item .lx-geste{font-size:0.82rem; line-height:1.5; margin:9px 0 0; padding-top:9px;
    border-top:1px dashed var(--line); color:var(--ink-dim);}
  .lien-basique{font-weight:700; color:var(--sauge-dark); text-decoration:underline;
    text-underline-offset:2px; text-decoration-thickness:2px; cursor:pointer; background:none;
    border:none; padding:0; font-size:inherit; font-family:inherit;}
  .lien-basique:hover{color:var(--safran-dark);}
  .bq-encart{display:flex; align-items:center; gap:10px; background:var(--sauge-light);
    border-radius:12px; padding:10px 14px; margin:0 0 14px; font-size:0.85rem; color:var(--sauge-dark);}
  .bq-encart button{margin-left:auto; background:var(--sauge); color:#fff; border:none;
    border-radius:999px; padding:7px 14px; font-size:0.8rem; font-weight:600; cursor:pointer; white-space:nowrap;}
  .filtre-inactif{opacity:.7;}
  .filtre-inactif summary{color:var(--ink-dim);}
  .filtre-note-inactif{margin:0; font-size:0.84rem; color:var(--ink-dim); line-height:1.45;}
  .filtre-alerte{background:#fbead2; border:1px solid var(--safran); border-radius:12px;
    padding:11px 15px; margin:12px 0 0; font-size:0.86rem; color:var(--safran-dark);}
  .raz-row{display:flex; justify-content:flex-end; margin:10px 0 0;}
  .btn-raz{display:inline-flex; align-items:center; gap:7px; background:none; border:1.5px solid var(--line);
    border-radius:999px; padding:8px 15px; font-size:0.82rem; font-weight:600; color:var(--ink-dim);
    cursor:pointer; transition:border-color .15s ease, color .15s ease;}
  .btn-raz:hover{border-color:var(--corail); color:var(--corail);}
  .plus-criteres{display:flex; align-items:center; gap:9px; width:100%; margin:14px 0 10px;
    background:#fff; border:1.5px dashed var(--line); border-radius:16px; padding:15px 16px;
    font-family:'Fredoka'; font-weight:600; font-size:0.9rem; color:var(--ink); cursor:pointer;
    transition:border-color .15s ease, color .15s ease;}
  .plus-criteres:hover{border-color:var(--sauge); color:var(--sauge-dark);}
  .plus-criteres .pc-txt{flex:1; text-align:left;}
  .plus-criteres .pc-cnt{background:var(--safran); color:#fff; font-size:0.72rem; font-weight:700;
    padding:3px 9px; border-radius:999px;}
  .plus-criteres .pc-fl{color:var(--ink-dim); font-size:0.85rem;}

  /* Critères avancés : accordéon en deux colonnes. Un seul ouvert à la fois, et
     chaque ligne repliée résume ses choix — sans ça, tout déplier reconstituait
     la longue liste d'avant. */
  .filtres-avances{display:none;}
  .filtres-avances.open{display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:start;}
  .filtres-avances > details{margin:0; background:#fff; border:1px solid var(--line);
    border-radius:14px; overflow:hidden; transition:box-shadow .15s ease;}
  /* Le filtre ouvert reste dans SA colonne : passer en pleine largeur déplaçait
     brutalement tous les blocs suivants à chaque ouverture. La carte grandit sur
     place, sa voisine ne bouge pas. */
  .filtres-avances > details[open]{border-color:var(--sauge);
    box-shadow:0 0 0 2px rgba(79,107,74,.10);}
  .filtres-avances > details[open] > *:not(summary){animation:filtreOuvre .18s ease;}
  @keyframes filtreOuvre{from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:none;}}
  .filtres-avances > details > summary{display:flex; align-items:center; gap:9px;
    padding:12px 14px; font-family:'Fredoka'; font-weight:600; font-size:0.83rem; cursor:pointer;
    list-style:none; margin:0;}
  .filtres-avances > details > summary::-webkit-details-marker{display:none;}
  .filtres-avances > details > summary::marker{content:'';}
  .filtres-avances > details > summary::after{content:'⌄'; margin-left:auto; color:var(--ink-dim);
    font-size:0.8rem; flex-shrink:0;}
  .filtres-avances > details[open] > summary::after{content:'⌃';}
  .filtres-avances > details > summary > *{margin:0;}
  .filtres-avances > details > *:not(summary){padding:0 14px 14px;}
  .resume-filtre{margin-left:auto; display:flex; gap:4px; flex-wrap:wrap; justify-content:flex-end;
    max-width:62%;}
  .resume-filtre .rp{background:var(--sauge-light); color:var(--sauge-dark); font-size:0.68rem;
    font-weight:600; padding:3px 8px; border-radius:999px; white-space:nowrap;}
  .resume-filtre .rp.vide{background:none; color:var(--ink-dim); font-weight:400; padding:3px 0;}
  .filtres-avances > details[open] > summary .resume-filtre{display:none;}

  @media(max-width:620px){
    .filtres-essentiels{grid-template-columns:1fr;}
    .filtres-avances.open{grid-template-columns:1fr;}
    .resume-filtre{max-width:52%;}
  }
  .filter-chip{padding:7px 13px; border-radius:999px; border:1.5px solid var(--line); background:var(--bg); font-size:0.82rem; font-weight:500; cursor:pointer;}
  .filter-chip.on{background:var(--sauge); border-color:var(--sauge); color:white;}
  .cuisine-regions{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px;}
  .cuisine-region{position:relative;}
  .cuisine-region-btn{display:inline-flex; align-items:center; gap:6px; border-color:var(--safran); color:var(--safran-dark); background:#fdf1e0;}
  .cuisine-region-btn.on{background:var(--safran); border-color:var(--safran); color:#fff;}
  .cuisine-region-btn .region-caret{font-size:0.65rem; opacity:0.75;}
  .cuisine-region-submenu{position:absolute; top:calc(100% + 6px); left:0; z-index:40; min-width:210px; background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:0 10px 28px rgba(34,39,31,0.16); padding:6px; display:flex; flex-direction:column; gap:1px;}
  .cuisine-dropdown-item{display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px; border:none; background:transparent; font-size:0.83rem; font-weight:500; text-align:left; width:100%; cursor:pointer; color:var(--ink);}
  .cuisine-dropdown-item:hover{background:var(--bg);}
  .cuisine-dropdown-item.on{background:var(--sauge-light); color:var(--sauge-dark); font-weight:700;}
  .cuisine-dropdown-item .check{width:14px; flex-shrink:0; font-size:0.75rem; color:var(--sauge-dark);}
  .filter-note{font-size:0.75rem; color:var(--ink-dim); margin:8px 0 0;}
  .filter-text-input{width:100%; padding:10px 12px; border-radius:10px; border:1.5px solid var(--line); font-size:0.88rem; font-family:'Work Sans'; margin-top:10px;}
  .planning-badge{display:inline-block; background:var(--safran); color:#2b1c05; font-size:0.7rem; font-weight:700; border-radius:999px; padding:2px 9px; margin-left:6px;}

  .suggest-row{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;}
  .suggest-bubble{background:var(--sauge-light); color:var(--sauge-dark); border:none; border-radius:999px; padding:6px 12px; font-size:0.8rem; font-weight:600; cursor:pointer;}
  .chips-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px;}
  .ing-chip{display:flex; align-items:center; gap:6px; background:var(--sauge); color:white; border-radius:999px; padding:5px 6px 5px 13px; font-size:0.8rem; font-weight:600;}
  .ing-chip select{border:none; background:#ffffff; color:var(--sauge-dark); border-radius:999px; font-size:0.72rem; font-weight:700; padding:3px 6px;}
  .ing-chip.exclude{background:var(--corail);}
  .ing-chip .x{background:none; border:none; color:white; cursor:pointer; font-size:0.9rem; padding:0 3px;}

  .results-toolbar{display:flex; justify-content:space-between; align-items:center; margin:6px 0 14px; flex-wrap:wrap; gap:8px;}
  .results-toolbar select{padding:8px 12px; border-radius:10px; border:1.5px solid var(--line); background:var(--card); font-size:0.85rem; font-family:'Work Sans'; font-weight:600;}
  .results-count{font-size:0.85rem; color:var(--ink-dim);}

  .plan-zone{margin-top:6px;}
  .plan-entry{background:var(--card); border:1px solid var(--line); border-radius:14px; margin-bottom:10px; overflow:hidden;}
  .plan-entry-main{display:flex; align-items:center; gap:12px; padding:12px 14px;}
  .plan-days-tag{font-family:'Fredoka'; font-weight:700; font-size:0.72rem; color:var(--safran-dark); background:#fbead2; padding:4px 9px; border-radius:8px; flex-shrink:0; min-width:64px; text-align:center;}
  .plan-emoji{font-size:1.4rem; flex-shrink:0;}
  /* --- batch cooking : peu de recettes, chacune mise en avant avec sa photo --- */
  .batch-intro{display:flex; align-items:center; gap:10px; background:var(--sauge-light);
    border-radius:12px; padding:11px 14px; margin-bottom:14px; font-size:0.86rem;
    color:var(--sauge-dark);}
  .batch-intro b{font-family:'Fredoka';}
  .plan-entry.batch{border:1px solid var(--line); border-radius:18px; margin-bottom:16px;
    box-shadow:0 3px 14px rgba(34,39,31,.07);}
  .plan-entry.batch .batch-visuel{position:relative; height:150px; background:var(--sauge-light);}
  .plan-entry.batch .batch-visuel img{position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; display:block; z-index:1;}
  .plan-entry.batch .batch-emoji{position:absolute; inset:0; display:flex; align-items:center;
    justify-content:center; font-size:3rem; z-index:0;}
  .plan-entry.batch .batch-repas{position:absolute; top:10px; left:10px; z-index:2;
    background:rgba(20,22,18,.72); color:#fff; font-family:'Fredoka'; font-weight:700;
    font-size:0.78rem; padding:5px 11px; border-radius:999px; backdrop-filter:blur(3px);}
  .plan-entry.batch .batch-corps{padding:13px 15px;}
  .plan-entry.batch .batch-corps b{display:block; font-family:'Fredoka'; font-size:1.02rem;}
  .plan-entry.batch .batch-meta{font-size:0.8rem; color:var(--ink-dim); margin-top:2px;}
  .plan-entry.batch .batch-quantite{display:inline-block; margin-top:8px; background:#fbead2;
    color:var(--safran-dark); font-size:0.78rem; font-weight:600; padding:4px 10px; border-radius:8px;}
  .plan-entry.batch .plan-icons{margin-left:auto;}
  .plan-entry.batch .batch-bas{display:flex; align-items:center; gap:10px; margin-top:10px;}
  @media(min-width:760px){
    .batch-grille{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px;}
    .plan-entry.batch{margin-bottom:0;}
  }
  /* --- planning groupé par jour (quand plusieurs moments de repas sont cochés) --- */
  .plan-day{margin-bottom:16px;}
  .plan-day-head{font-family:'Fredoka'; font-weight:700; font-size:0.9rem; color:var(--ink);
    display:flex; align-items:center; gap:9px; margin:0 0 8px;}
  .plan-day-head::after{content:''; flex:1; height:1px; background:var(--ligne);}
  .plan-moment-tag{font-family:'Fredoka'; font-weight:700; font-size:0.72rem; color:var(--sauge);
    background:#e8efe4; padding:4px 9px; border-radius:8px; flex-shrink:0; min-width:64px; text-align:center;}
  /* --- option "optimiser mes courses" --- */
  .opt-toggle{display:flex; align-items:flex-start; gap:10px; margin:14px 0 2px; cursor:pointer; max-width:460px;}
  .opt-toggle input{margin-top:3px; width:17px; height:17px; accent-color:var(--sauge); flex-shrink:0;}
  .opt-toggle b{display:block; font-size:0.88rem;}
  .opt-toggle small{display:block; font-size:0.78rem; color:var(--ink-dim); line-height:1.35; margin-top:2px;}
  .plan-body{flex:1; min-width:0; cursor:pointer;}
  .plan-body b{display:block; font-size:0.95rem;}
  .plan-body span{font-size:0.76rem; color:var(--ink-dim);}
  .plan-icons{display:flex; gap:6px; flex-shrink:0;}
  .plan-icon-btn{width:32px; height:32px; border-radius:8px; border:none; background:var(--bg); cursor:pointer; font-size:0.95rem;}
  .plan-ing-panel{display:none; padding:0 14px 14px; border-top:1px dashed var(--line);}
  .plan-ing-panel.open{display:block;}
  .plan-ing-panel ul{list-style:none; padding:10px 0 0; margin:0; font-size:0.84rem;}
  .plan-ing-panel li{display:flex; justify-content:space-between; padding:4px 0; color:var(--ink-dim);}
  .plan-ing-panel li .qty{font-weight:700; color:var(--ink);}
  .plan-actions-row{display:flex; gap:10px; justify-content:center; margin-top:16px; flex-wrap:wrap;}
  .shopping-list{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px 18px; margin-top:14px; display:none;}
  .shopping-list.open{display:block;}
  .shopping-list h3{margin:0 0 10px; font-size:1rem;}
  .shopping-list ul{list-style:none; padding:0; margin:0; columns:2; column-gap:20px;}
  .shopping-list li{padding:3px 0; break-inside:avoid; font-size:0.85rem; display:flex; justify-content:space-between; gap:8px; align-items:center;}
  .shopping-list li label{display:flex; align-items:center; gap:8px; cursor:pointer; flex:1; min-width:0;}
  .shopping-list li input[type=checkbox]{accent-color:var(--sauge); width:16px; height:16px; flex-shrink:0;}
  .shopping-list li.checked span:not(.qty){text-decoration:line-through; opacity:0.45;}
  .shopping-list li.checked .qty{opacity:0.45;}
  .shopping-list li .qty{font-weight:700; white-space:nowrap;}
  /* --- recettes d'origine sous chaque ingredient (les 2 listes) --- */
  .shopping-list li{flex-direction:column; align-items:stretch; gap:2px;}
  .shopping-list li .shop-row{display:flex; justify-content:space-between; gap:8px; align-items:center;}
  .shopping-list li label{flex:1; min-width:0;}
  .shop-src{display:flex; flex-wrap:wrap; gap:4px 6px; padding-left:24px; margin-top:1px;}
  .shop-src-link{background:none; border:none; padding:0; font:inherit; font-size:0.72rem;
    color:var(--sauge); cursor:pointer; text-decoration:underline; text-underline-offset:2px;
    text-align:left; line-height:1.3;}
  .shop-src-link:hover{opacity:0.75;}
  .shop-src-txt{font-size:0.72rem; color:var(--ink-dim); line-height:1.3;}
  .shop-src-sep{font-size:0.72rem; color:var(--ink-dim); opacity:0.6;}
  li.checked .shop-src{opacity:0.45;}
  @media print{ .shop-src-link{color:#000; text-decoration:none;} }

  .detail-back{display:flex; align-items:center; gap:6px; background:none; border:none; color:var(--ink-dim); cursor:pointer; font-size:0.9rem; margin:16px 0; font-weight:600;}
  .detail-hero{border-radius:20px; padding:0; text-align:center; margin-bottom:18px; position:relative; overflow:hidden;}
  .detail-hero.drawer-hero{border-radius:0;}
  .hero-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; object-position:center 40%;}
  /* --- agrandissement de la photo au clic --- */
  /* tout le bandeau est cliquable : le titre et les badges sont posés par-dessus
     la photo et intercepteraient le clic s'il n'était posé que sur l'image */
  .detail-hero.has-photo{cursor:zoom-in;}
  .photo-zoom-hint{position:absolute; right:12px; bottom:12px; z-index:3;
    background:rgba(0,0,0,0.45); color:#fff; border-radius:999px; padding:6px 11px;
    font-size:0.75rem; font-weight:600; backdrop-filter:blur(4px); pointer-events:none;
    display:none; align-items:center; gap:5px;}
  .detail-hero.has-photo .photo-zoom-hint{display:inline-flex;}
  #photo-zoom{position:fixed; inset:0; z-index:9999; background:rgba(15,14,12,0.94);
    display:none; align-items:center; justify-content:center; padding:24px; cursor:zoom-out;}
  #photo-zoom.open{display:flex;}
  #photo-zoom img{max-width:100%; max-height:100%; border-radius:12px; object-fit:contain;
    box-shadow:0 18px 60px rgba(0,0,0,0.5);}
  #photo-zoom .pz-close{position:absolute; top:16px; right:18px; background:rgba(255,255,255,0.15);
    color:#fff; border:none; width:40px; height:40px; border-radius:50%; font-size:1.2rem;
    cursor:pointer; line-height:1;}
  #photo-zoom .pz-close:hover{background:rgba(255,255,255,0.3);}
  /* repli quand la recette n'a pas encore de photo : on garde la navigation
     au lieu d'afficher une image cassée */
  #photo-zoom .pz-fallback{display:none; flex-direction:column; align-items:center; gap:10px;
    color:rgba(255,255,255,0.65);}
  #photo-zoom .pz-fallback span{font-size:5rem; line-height:1;}
  #photo-zoom .pz-fallback p{margin:0; font-size:0.9rem;}
  #photo-zoom.pz-sans-photo .pz-fallback{display:flex;}
  #photo-zoom.pz-sans-photo #pz-img{display:none;}
  #photo-zoom .pz-bas{position:absolute; bottom:18px; left:0; right:0; text-align:center;
    padding:0 70px; display:flex; flex-direction:column; align-items:center; gap:3px;}
  #photo-zoom .pz-legende-btn{background:none; border:none; color:#fff; font-family:'Fredoka';
    font-weight:700; font-size:1.05rem; cursor:pointer; padding:7px 16px; border-radius:999px;
    text-shadow:0 2px 8px rgba(0,0,0,0.6); transition:background .15s ease;}
  #photo-zoom .pz-legende-btn:hover, #photo-zoom .pz-legende-btn:focus-visible{
    background:rgba(255,255,255,0.16); outline:none;}
  #photo-zoom .pz-legende-btn::after{content:' →'; opacity:0.7; font-weight:400;}
  #photo-zoom .pz-legende-btn.pz-inerte{cursor:default;}
  #photo-zoom .pz-legende-btn.pz-inerte::after{content:'';}
  #photo-zoom .pz-legende-btn.pz-inerte:hover{background:none;}
  #photo-zoom .pz-position{color:rgba(255,255,255,0.6); font-size:0.78rem;}
  #photo-zoom .pz-nav{position:absolute; top:50%; transform:translateY(-50%);
    background:rgba(255,255,255,0.12); color:#fff; border:none; width:46px; height:64px;
    border-radius:12px; font-size:2rem; line-height:1; cursor:pointer; display:none;
    align-items:center; justify-content:center; backdrop-filter:blur(3px);}
  #photo-zoom.pz-navigable .pz-nav{display:flex;}
  #photo-zoom .pz-nav:hover{background:rgba(255,255,255,0.28);}
  #photo-zoom .pz-prev{left:14px;} #photo-zoom .pz-next{right:14px;}
  @media(max-width:560px){
    #photo-zoom .pz-nav{width:38px; height:54px; font-size:1.6rem;}
    #photo-zoom .pz-bas{padding:0 56px;}
  }
  @media print{ #photo-zoom, .photo-zoom-hint{display:none !important;} }
  .hero-overlay{position:absolute; inset:0; background:linear-gradient(rgba(20,20,15,0.15),rgba(20,20,15,0.6)); z-index:1;}
  .hero-content{position:relative; z-index:2; padding:36px 24px;}
  .drawer-hero .hero-content{padding-top:48px;}
  .detail-hero.has-photo{color:white;}
  .detail-hero.has-photo h1{color:white; text-shadow:0 2px 8px rgba(0,0,0,0.35);}
  .detail-hero.has-photo .detail-badges span{background:rgba(255,255,255,0.9);}
  .detail-hero .emoji{font-size:3.4rem; display:block; margin-bottom:8px;}
  .detail-hero h1{margin:0 0 10px; font-size:1.7rem;}
  .detail-badges{display:flex; flex-wrap:wrap; gap:8px; justify-content:center;}
  .detail-badges span{background:rgba(255,255,255,0.7); padding:5px 12px; border-radius:999px; font-size:0.82rem; font-weight:600; color:var(--ink);}
  .detail-actions-row{display:flex; gap:10px; justify-content:center; margin-top:16px; flex-wrap:wrap;}
  .icon-action{display:flex; align-items:center; gap:6px; background:var(--card); border:1.5px solid var(--line); border-radius:999px; padding:9px 15px; font-size:0.85rem; font-weight:600; cursor:pointer;}
  .icon-action.active{background:var(--corail); border-color:var(--corail); color:white;}
  .icon-action.up.active{background:var(--sauge); border-color:var(--sauge); color:white;}
  .icon-action.down.active{background:var(--ink-dim); border-color:var(--ink-dim); color:white;}

  .detail-section{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px 20px; margin-bottom:14px;}
  .detail-section h3{margin:0 0 12px; font-size:1.05rem;}
  /* --- badges nutritionnels --- */
  .badges-row{display:flex; flex-wrap:wrap; gap:8px;}
  .nutri-badge{display:inline-flex; align-items:center; gap:6px; padding:7px 13px;
    border-radius:999px; font-size:0.84rem; font-weight:600; line-height:1.2;
    background:var(--sauge-light); color:var(--sauge-dark); border:1px solid transparent;}
  .nutri-badge .ico{font-size:0.95rem;}
  .nutri-badge.piquant{background:#fdeae6; color:#b03a22;}
  .nutri-badge.calorique{background:#fbead2; color:var(--safran-dark);}
  .nutri-badge.leger,
  .nutri-badge.healthy{background:#e8efe4; color:var(--sauge-dark);}
  .nutri-badge.vegan{background:#e4f0e6; color:#2f6b3c;}
  .nutri-badge.proteines{background:#eae6f7; color:#514191;}
  .nutri-badge.fibres{background:#f3eede; color:#7a6428;}
  .badges-legende{margin:12px 0 0; font-size:0.78rem; color:var(--ink-dim); line-height:1.45;}
  .badges-legende li{margin-bottom:3px;}
  .badges-detail{margin-top:10px;}
  .badges-detail summary{cursor:pointer; font-size:0.82rem; color:var(--ink-dim); font-weight:600;}
  /* Sections d'ingrédients par composante (blinis, béchamel, pâte, vinaigrette...) */
  .ing-group-head{
    font-family:'Fredoka',sans-serif; font-size:0.92rem; font-weight:600; color:var(--sauge-dark);
    background:var(--sauge-light); border-left:3px solid var(--sauge);
    padding:8px 12px; border-radius:0 8px 8px 0; margin:16px 0 6px;
  }
  .ing-group-head:first-child{margin-top:6px;}
  .ing-tag{
    display:inline-block; font-size:0.66rem; font-weight:700; text-transform:uppercase; letter-spacing:0.3px;
    color:var(--safran-dark); background:#fbead2; border:1px solid #f0d9a8;
    padding:2px 7px 2px 16px; border-radius:999px; margin-left:6px; vertical-align:middle; white-space:nowrap;
    cursor:pointer; position:relative; font-family:inherit; transition:background .12s ease, color .12s ease;
  }
  .ing-tag::before{content:'▸'; position:absolute; left:6px; top:50%; transform:translateY(-50%); font-size:0.7rem; transition:transform .16s ease;}
  .ing-tag:hover{background:#f7dcb4;}
  .ing-tag.on{background:var(--safran); border-color:var(--safran-dark); color:#fff;}
  .ing-tag.on::before{transform:translateY(-50%) rotate(90deg);}
  /* Recette maison du composant, dépliée sous l'ingrédient */
  .sous-recette-panel{display:none; margin:8px 0 4px 30px; padding:12px 14px; background:#fffaf1; border:1px solid #f0d9a8; border-left:3px solid var(--safran); border-radius:0 10px 10px 0;}
  .sous-recette-panel.open{display:block;}
  .sous-recette-panel .sr-titre{font-family:'Fredoka',sans-serif; font-size:0.95rem; font-weight:600; color:var(--safran-dark); margin:0 0 8px;}
  .sous-recette-panel .sr-rendement{font-family:'Work Sans',sans-serif; font-size:0.75rem; font-weight:400; color:var(--ink-dim);}
  .sous-recette-panel .sr-label{font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; color:var(--ink-dim); margin:10px 0 4px;}
  .sous-recette-panel ul.sr-ing{margin:0; padding-left:18px; font-size:0.82rem; line-height:1.5;}
  .sous-recette-panel ol.sr-etapes{margin:0; padding-left:18px; font-size:0.82rem; line-height:1.55;}
  .sous-recette-panel ol.sr-etapes li{margin-bottom:5px;}
  .sous-recette-panel .sr-note{font-size:0.78rem; line-height:1.5; color:#6b5424; background:#fff4e0; border-radius:8px; padding:8px 10px; margin:10px 0 0;}
  .ingredient-list{list-style:none; padding:0; margin:0;}
  .ingredient-list li{padding:8px 0; border-bottom:1px dashed var(--line);}
  .ingredient-list li.checked .iname, .ingredient-list li.checked .qty{text-decoration:line-through; opacity:0.45;}
  .ing-check{display:flex; align-items:center; flex-shrink:0;}
  .ing-check input{accent-color:var(--sauge); width:17px; height:17px; cursor:pointer;}
  .ingredient-list li:last-child{border-bottom:none;}
  .ing-row{display:flex; justify-content:space-between; align-items:center; gap:10px;}
  .ing-row .qty{font-weight:700; color:var(--sauge-dark); flex-shrink:0;}
  .ing-row .iname{flex:1;}
  /* Icône « ajuster » : image dans un rond blanc, sans bordure, même gabarit
     que l'ancien bouton pour ne rien décaler dans la liste d'ingrédients. */
  .adjust-btn{width:26px; height:26px; border:none; border-radius:999px; flex-shrink:0;
    background:#fff url('/img/ui/ajuster.webp') center/84% no-repeat; cursor:pointer;
    font-size:0; padding:0; transition:transform .12s ease;}
  .adjust-btn:hover{transform:rotate(-30deg);}
  .adjust-panel{display:none; margin-top:8px; padding:10px 12px; background:var(--bg); border-radius:10px;}
  .adjust-panel.open{display:block;}
  .adjust-panel p{margin:0 0 8px; font-size:0.78rem; color:var(--ink-dim);}
  .adjust-panel .suggest-row{margin-top:0;}
  .servings-box{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; background:var(--sauge-light); border-radius:10px; padding:10px 14px;}
  .servings-box .lbl{font-weight:600; font-size:0.88rem;}
  .servings-box input[type=range]{width:120px; accent-color:var(--sauge);}
  /* --- curseur libre de durée du planning (1 à 7 jours) --- */
  .duree-slider{margin:2px 0 0; max-width:300px;}
  .duree-slider-head{display:flex; align-items:baseline; gap:8px; margin-bottom:6px;}
  .duree-slider-head .lbl{font-size:0.85rem; font-weight:600;}
  .duree-slider-head .val{font-size:1rem; font-weight:800; color:var(--sauge);}
  .duree-slider input[type=range]{display:block; width:100%; accent-color:var(--sauge); margin:0;}
  .duree-ticks{display:flex; justify-content:space-between; margin-top:1px;
    font-size:0.68rem; color:var(--ink-dim); user-select:none;}
  .duree-ticks span{width:1ch; text-align:center;}
  .servings-box .sval{font-weight:700; font-family:'Fredoka'; color:var(--sauge-dark); min-width:26px; text-align:center;}
  /* Étapes groupées par phase — la numérotation reste continue d'une phase à l'autre */
  
  .steps-list.part{counter-reset:none;}
  
  
  .steps-list{margin:0; padding:0; list-style:none; counter-reset:step;}
  .steps-list li{counter-increment:step; padding:10px 0 10px 42px; position:relative; font-size:0.92rem; line-height:1.5; border-bottom:1px dashed var(--line);}
  .steps-list li:last-child{border-bottom:none;}
  .steps-list li::before{content:counter(step); position:absolute; left:0; top:8px; width:28px; height:28px; border-radius:999px; background:var(--sauge); color:white; font-weight:700; font-size:0.85rem; display:flex; align-items:center; justify-content:center;}
  .materiel-chips{display:flex; flex-wrap:wrap; gap:8px;}
  .equip-affilie-list{display:flex; flex-direction:column; gap:8px;}
  .equip-affilie-item{display:flex; align-items:center; gap:10px; padding:10px 14px; background:#fdf1e0; border:1px solid #f0dcb8; border-radius:10px; text-decoration:none; color:var(--ink); font-weight:600; font-size:0.9rem; transition:background 0.15s ease;}
  .equip-affilie-item:hover{background:#fbe6c8;}
  .equip-affilie-item .equip-icon{font-size:1.2rem;}
  .equip-affilie-item .equip-arrow{margin-left:auto; color:var(--safran-dark); font-size:0.85rem;}
  .equip-affilie-note{font-size:0.72rem; color:var(--ink-dim); margin-top:8px; font-style:italic;}
  .materiel-chips span{background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:6px 12px; font-size:0.82rem;}
  .nutri-note{color:var(--ink-dim); font-size:0.85rem; font-style:italic;}
  .share-row{display:flex; flex-wrap:wrap; gap:8px;}
  .share-btn{flex:1; min-width:110px; text-align:center; padding:11px; border-radius:12px; border:none; font-size:0.85rem; font-weight:700; cursor:pointer; text-decoration:none; color:white;}
  .share-btn.wa{background:#25d366;}
  .share-btn.sms{background:#5a6b7a;}
  .share-btn.copy{background:var(--sauge);}

  .overlay{position:fixed; inset:0; background:rgba(34,39,31,0.5); z-index:50; display:none; align-items:flex-end; justify-content:center;}
  .overlay.open{display:flex;}
  body.overlay-lock{overflow:hidden; position:fixed; width:100%;}
  .panel{background:var(--bg); width:100%; max-width:760px; max-height:82vh; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; border-radius:20px 20px 0 0; padding:22px 20px calc(30px + env(safe-area-inset-bottom));}

  .overlay.side{align-items:stretch; justify-content:flex-end;}
  .overlay.center{align-items:center; padding:20px;}
  .overlay.center .panel{border-radius:20px; max-width:480px; max-height:min(640px,86vh);}
  .overlay.center#baby-disclaimer-overlay .panel{max-width:460px;}
  /* --- pop-up de bienvenue, première visite --- */
  .overlay.center#bienvenue-overlay .panel{max-width:440px; position:relative; padding-top:26px;}
  #bienvenue-overlay .bv-skip{position:absolute; top:14px; right:18px; background:none; border:none;
    color:var(--ink-dim); font-size:0.82rem; cursor:pointer; text-decoration:underline; padding:4px;}
  #bienvenue-overlay .bv-ic{font-size:2.6rem; text-align:center; display:block; margin:4px 0 10px;}
  #bienvenue-overlay h2{font-family:'Fredoka'; font-size:1.25rem; margin:0 0 8px; text-align:center;}
  #bienvenue-overlay .bv-txt{font-size:0.9rem; line-height:1.55; color:var(--ink-dim);
    margin:0 0 14px; text-align:center;}
  #bienvenue-overlay .bv-liste{background:var(--sauge-light); border-radius:12px; padding:12px 14px; margin:0 0 16px;}
  #bienvenue-overlay .bv-liste div{display:flex; gap:9px; align-items:flex-start; font-size:0.85rem;
    line-height:1.45; margin-bottom:8px;}
  #bienvenue-overlay .bv-liste div:last-child{margin-bottom:0;}
  #bienvenue-overlay .bv-liste .e{font-size:1rem; flex-shrink:0;}
  #bienvenue-overlay .bv-points{display:flex; justify-content:center; gap:7px; margin:0 0 14px;}
  #bienvenue-overlay .bv-points i{width:7px; height:7px; border-radius:50%; background:var(--line);
    transition:width .2s ease, background .2s ease;}
  #bienvenue-overlay .bv-points i.on{background:var(--sauge); width:20px; border-radius:99px;}
  #bienvenue-overlay .bv-nav{display:flex; gap:9px;}
  #bienvenue-overlay .bv-nav button{flex:1; border-radius:99px; padding:12px; font-family:'Fredoka';
    font-weight:600; font-size:0.9rem; cursor:pointer; border:none;}
  #bienvenue-overlay .bv-prev{flex:0 0 34%; background:none; border:1.5px solid var(--line); color:var(--ink);}
  #bienvenue-overlay .bv-next{background:var(--sauge); color:#fff;}
  #bienvenue-overlay .bv-note{font-size:0.78rem; color:var(--ink-dim); margin:14px 0 0; text-align:center;}
  #bienvenue-overlay .bv-slide{display:none;}

  #bienvenue-overlay /* Hauteur stable d'une diapo à l'autre : sans elle, la fenêtre sautait à chaque
     passage, les diapos n'ayant pas le même nombre de lignes. */
  .bv-slide.on{display:flex; flex-direction:column; justify-content:center;
    min-height:360px; animation:bvEntre .22s ease;}
  @media(max-width:520px){.bv-slide.on{min-height:430px;}}
  @keyframes bvEntre{from{opacity:0; transform:translateX(8px);} to{opacity:1; transform:none;}}
  .overlay.center#search-overlay .panel{max-width:480px;}
  .search-sep{display:flex; align-items:center; gap:8px; margin:14px 0 4px; padding:0 8px;
    font-size:0.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
    color:var(--ink-dim);}
  .search-sep::after{content:''; flex:1; height:1px; background:var(--line);}
  .search-sep span{background:var(--sauge-light); color:var(--sauge-dark); font-size:0.72rem;
    padding:2px 8px; border-radius:999px; text-transform:none; letter-spacing:0;}
  .search-plus{display:block; width:100%; margin:8px 0 0; background:none; border:1.5px solid var(--line);
    border-radius:999px; padding:10px; font-size:0.84rem; font-weight:600; color:var(--sauge-dark);
    cursor:pointer;}
  .search-plus:hover{border-color:var(--sauge);}
  .search-result-item{display:flex; align-items:center; gap:10px; padding:10px 8px; border-radius:8px; cursor:pointer; text-align:left;}
  .search-result-item:hover{background:var(--bg);}
  .search-result-item .emoji{font-size:1.3rem;}
  .search-result-item .name{font-weight:600; color:var(--ink);}
  .search-result-item .name mark{background:var(--safran); color:#fff; border-radius:3px; padding:0 1px; font-weight:700;}
  .search-result-item .cuisine{font-size:0.8rem; color:var(--ink-dim);}
  .drawer-panel{
    max-width:640px; max-height:100vh; height:100%; border-radius:0;
    padding:0 0 calc(20px + env(safe-area-inset-bottom)); position:relative;
    transform:translateX(30px); opacity:0; transition:transform .22s ease, opacity .22s ease;
  }
  .overlay.side.open .drawer-panel{transform:translateX(0); opacity:1;}
  .drawer-close{
    position:sticky; top:14px; left:calc(100% - 50px); z-index:5;
    width:36px; height:36px; border-radius:999px; border:none; background:rgba(255,255,255,0.85);
    box-shadow:0 2px 8px rgba(0,0,0,0.15); font-size:1.1rem; cursor:pointer; color:var(--ink);
    display:flex; align-items:center; justify-content:center; margin-bottom:-36px;
  }
  @media(max-width:680px){ .drawer-panel{max-width:100%;} }
  .panel-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;}
  .panel-head h2{margin:0; font-size:1.2rem;}
  .panel-close{background:none; border:none; font-size:1.3rem; cursor:pointer; color:var(--ink-dim);}
  .empty-note{color:var(--ink-dim); font-size:0.9rem; text-align:center; padding:24px 0;}
  .history-item, .fav-item{display:flex; align-items:center; gap:12px; padding:10px 6px; border-bottom:1px solid var(--line); cursor:pointer;}
  /* --- retirer un favori --- */
  .fav-item .txt{flex:1; min-width:0;}
  .fav-remove{position:relative; flex-shrink:0; background:none; border:none; cursor:pointer;
    width:32px; height:32px; border-radius:9px; font-size:1rem; line-height:1;
    color:var(--ink-dim); display:flex; align-items:center; justify-content:center;
    transition:background .15s ease, color .15s ease;}
  .fav-remove:hover, .fav-remove:focus-visible{background:#fdeae6; color:var(--corail); outline:none;}
  .fav-remove::after{content:'Retirer'; position:absolute; bottom:calc(100% + 6px); right:0;
    background:var(--ink); color:#fff; font-size:0.7rem; font-weight:600; padding:4px 9px;
    border-radius:6px; white-space:nowrap; opacity:0; pointer-events:none;
    transform:translateY(-3px); transition:opacity .15s ease, transform .15s ease; z-index:5;}
  .fav-remove:hover::after, .fav-remove:focus-visible::after{opacity:1; transform:translateY(0);}
  .shopping-panel-ul{list-style:none; padding:0; margin:0;}
  .shopping-panel-ul li{display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px dashed var(--line);}
  .shopping-panel-ul li label{display:flex; align-items:center; gap:8px; cursor:pointer; flex:1; min-width:0;}
  .shopping-panel-ul li input[type=checkbox]{accent-color:var(--sauge); width:16px; height:16px; flex-shrink:0;}
  .shopping-panel-ul li.checked span:not(.qty){text-decoration:line-through; opacity:0.45;}
  .shopping-panel-ul li .qty{font-weight:700; white-space:nowrap; font-size:0.85rem;}
  .shopping-panel-ul li .mini-btn.del{background:none; border:none; color:var(--ink-dim); cursor:pointer; font-size:0.9rem; padding:2px 4px;}
  .shopping-panel-ul li{flex-direction:column; align-items:stretch; gap:2px;}
  .shopping-panel-ul li .shop-row{display:flex; align-items:center; gap:10px;}
  .shopping-panel-ul li .shop-row label{flex:1; min-width:0;}
  .history-item .em, .fav-item .em{font-size:1.6rem;}
  .history-item .txt b, .fav-item .txt b{display:block; font-size:0.92rem;}
  .history-item .txt span, .fav-item .txt span{font-size:0.75rem; color:var(--ink-dim);}

  /* ===== Footer complet ===== */
  footer#site-footer{margin-top:64px; background:#f1eee3; border-top:1px solid var(--line); color:var(--ink); font-size:0.85rem;}
  .footer-inner{max-width:1000px; margin:0 auto; padding:34px 20px 10px; display:grid; grid-template-columns:1fr; gap:26px;}
  @media(min-width:640px){.footer-inner{grid-template-columns:1fr 1fr;}}
  @media(min-width:900px){.footer-inner{grid-template-columns:1.6fr 1fr 1fr 1fr; gap:30px;}}
  .footer-logo{font-family:'Fredoka',sans-serif; font-size:1.35rem; font-weight:600; color:var(--sauge-dark); margin:0;}
  .footer-baseline{font-family:'Fredoka',sans-serif; font-size:0.95rem; color:var(--safran-dark); margin:2px 0 10px;}
  .footer-pitch{color:var(--ink-dim); font-size:0.82rem; line-height:1.55; margin:0; max-width:320px;}
  .footer-col h4{font-family:'Fredoka',sans-serif; font-size:0.9rem; font-weight:600; margin:0 0 10px; color:var(--ink);}
  .footer-col ul{list-style:none; padding:0; margin:0;}
  .footer-col li{margin-bottom:7px;}
  .footer-col a{color:var(--ink-dim); text-decoration:none; font-size:0.82rem; transition:color .12s ease;}
  .footer-col a:hover{color:var(--sauge-dark); text-decoration:underline;}
  .footer-legal-note{max-width:1000px; margin:14px auto 0; padding:12px 20px; font-size:0.75rem; line-height:1.5; color:#6b5424; background:#fff4e0; border:1px solid #f0d9a8; border-radius:10px; width:calc(100% - 40px); box-sizing:border-box;}
  .footer-bottom{max-width:1000px; margin:0 auto; padding:18px 20px 26px; border-top:1px solid var(--line); margin-top:18px; text-align:center; color:#8d8a7e; font-size:0.75rem; display:flex; flex-wrap:wrap; gap:8px; justify-content:center;}
  .footer-sep{opacity:0.5;}
  .static-page{font-size:0.88rem; line-height:1.6; color:var(--ink);}
  .static-page h3{font-family:'Fredoka',sans-serif; font-size:1rem; margin:18px 0 6px; color:var(--sauge-dark);}
  .static-page h3:first-child{margin-top:4px;}
  .static-page p{margin:0 0 10px;}
  .static-page ul{margin:0 0 10px; padding-left:20px;}
  .static-page li{margin-bottom:5px;}
  .static-page a{color:var(--sauge-dark); font-weight:600;}
  .static-page .todo{background:#fff4e0; border:1px dashed #e0b56a; border-radius:8px; padding:10px 12px; font-size:0.8rem; color:#6b5424; margin:0 0 12px;}
  .static-page .plan-link{display:block; padding:9px 0; border-bottom:1px dashed var(--line); cursor:pointer; font-weight:600; color:var(--sauge-dark);}
  .empty-msg{text-align:center; color:var(--ink-dim); padding:30px 0;}
  .empty-msg.top{padding:4px 0 16px; font-size:0.9rem;}

  @media print{
    nav, .filters-card, .plan-actions-row, #share-panel, footer, .again-row, .home-hero, .mode-grid,
    #add-plan-shopping-btn, .opt-toggle{display:none !important;}
    body{background:white; color:black;}
    .plan-entry, .shopping-list{background:white; border:1px solid #ccc; box-shadow:none;}
    .plan-ing-panel{display:block !important;}
    .plan-icons{display:none;}
    .shopping-list{display:block !important;}
    .shopping-list li.checked{display:none !important;}
  }

  .account-form{display:flex; flex-direction:column; gap:12px;}
  .account-form label{font-size:0.82rem; font-weight:600; margin-bottom:4px; display:block;}
  .account-form input{width:100%; padding:11px 13px; border-radius:10px; border:1.5px solid var(--line); font-size:0.92rem; font-family:'Work Sans';}
  .account-disclaimer{font-size:0.76rem; color:var(--ink-dim); background:var(--sauge-light); border-radius:10px; padding:10px 12px; line-height:1.4;}
  .account-hello{display:flex; align-items:center; gap:12px; margin-bottom:18px;}
  .account-avatar{width:48px; height:48px; border-radius:999px; background:var(--sauge); color:white; display:flex; align-items:center; justify-content:center; font-family:'Fredoka'; font-weight:700; font-size:1.3rem;}
  .account-section{background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin-bottom:10px; display:flex; justify-content:space-between; align-items:center; cursor:pointer;}
  .account-section b{display:block; font-size:0.92rem;}
  .account-section span{font-size:0.76rem; color:var(--ink-dim);}
  .account-section.placeholder{cursor:default; opacity:0.7;}
  .logout-btn{margin-top:10px; background:none; border:1px solid var(--line); border-radius:999px; padding:9px 16px; font-size:0.82rem; color:var(--corail); cursor:pointer; font-weight:600;}

/* ============ ANTI-GASPI : « qu'est-ce qu'il te reste ? » ============ */
.ag-intro{text-align:center; max-width:620px; margin:0 auto 22px; color:var(--ink-dim);
  font-size:0.92rem; line-height:1.55;}
.ag-panneau{background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:20px; max-width:720px; margin:0 auto 26px; box-shadow:0 6px 18px rgba(60,50,35,0.05);}
.ag-champ{position:relative;}
.ag-champ input{width:100%; padding:14px 16px; border:1.5px solid var(--line); border-radius:14px;
  font-family:inherit; font-size:1rem; background:var(--bg); color:var(--ink);}
.ag-champ input:focus{outline:none; border-color:var(--sauge); background:#fff;}
.ag-suggest{display:flex; flex-wrap:wrap; gap:7px; margin-top:9px;}
.ag-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;}
.ag-chip{display:inline-flex; align-items:center; gap:7px; background:var(--sauge-light);
  color:var(--sauge-dark); border:1px solid transparent; border-radius:999px;
  padding:7px 8px 7px 14px; font-size:0.88rem; font-weight:600;}
.ag-chip button{background:rgba(0,0,0,0.08); border:0; border-radius:50%; width:20px; height:20px;
  line-height:1; cursor:pointer; color:inherit; font-size:0.8rem; display:grid; place-items:center;}
.ag-chip button:hover{background:rgba(0,0,0,0.18);}
.ag-courants{margin-top:18px; padding-top:16px; border-top:1px dashed var(--line);}
.ag-courants .lbl{display:block; font-size:0.78rem; font-weight:700; letter-spacing:0.04em;
  text-transform:uppercase; color:var(--ink-dim); margin-bottom:10px;}
.ag-courants .row{display:flex; flex-wrap:wrap; gap:7px;}
.ag-reste{background:#fff; border:1px solid var(--line); border-radius:999px; padding:7px 13px;
  font-family:inherit; font-size:0.86rem; cursor:pointer; color:var(--ink); transition:all .15s;}
.ag-reste:hover{border-color:var(--sauge); background:var(--sauge-light);}
.ag-reste.on{background:var(--sauge); border-color:var(--sauge); color:#fff;}
.ag-options{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between;
  margin-top:16px; padding-top:14px; border-top:1px dashed var(--line);}
.ag-bascule{display:flex; background:var(--bg); border-radius:999px; padding:3px; gap:2px;}
.ag-bascule button{background:transparent; border:0; border-radius:999px; padding:7px 14px;
  font-family:inherit; font-size:0.84rem; font-weight:600; color:var(--ink-dim); cursor:pointer;}
.ag-bascule button.on{background:#fff; color:var(--sauge-dark); box-shadow:0 1px 4px rgba(0,0,0,0.1);}
.ag-vider{background:none; border:0; color:var(--ink-dim); font-family:inherit;
  font-size:0.84rem; cursor:pointer; text-decoration:underline;}
.ag-compteur{text-align:center; font-size:0.9rem; color:var(--ink-dim); margin:0 0 16px;}
.ag-compteur b{color:var(--sauge-dark);}
.ag-vide{text-align:center; padding:34px 20px; color:var(--ink-dim); max-width:520px; margin:0 auto;}
.ag-vide .emo{font-size:2.6rem; display:block; margin-bottom:12px;}
.ag-match{display:inline-block; font-size:0.72rem; font-weight:700; color:var(--sauge-dark);
  background:var(--sauge-light); border-radius:999px; padding:3px 9px; margin-bottom:8px;}
.ag-fiches{max-width:720px; margin:0 auto 24px;}
.ag-fiches .lbl{display:block; font-size:0.78rem; font-weight:700; letter-spacing:0.04em;
  text-transform:uppercase; color:var(--ink-dim); margin-bottom:9px; text-align:center;}
.ag-fiches .row{display:flex; flex-wrap:wrap; gap:10px; justify-content:center;}
.ag-fiche{display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  background:#fdf6ea; border:1.5px solid #f0dcb8; border-radius:14px; padding:11px 15px;
  color:var(--safran-dark); font-weight:600; font-size:0.9rem; transition:all .15s ease;}
.ag-fiche:hover{background:#fbead2; border-color:var(--safran);
  transform:translateY(-2px); box-shadow:0 6px 14px rgba(193,124,31,.16);}
.ag-fiche .e{font-size:1.3rem;}
.ag-fiche .fl{font-size:1.05rem; opacity:.7;}
@media(max-width:600px){.ag-panneau{padding:16px;} .ag-options{flex-direction:column; align-items:stretch;}}

/* Résultats anti-gaspi : des vignettes compactes plutôt que les grandes cartes
   de suggestion. À dix ou vingt recettes, les grandes cartes noient l'écran. */
.ag-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:13px;}
.ag-tuile{background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden;
  cursor:pointer; box-shadow:0 2px 10px rgba(34,39,31,.06);
  transition:transform .15s ease, box-shadow .15s ease; display:flex; flex-direction:column;}
.ag-tuile:hover{transform:translateY(-3px); box-shadow:0 10px 24px rgba(34,39,31,.14);}
.ag-tuile .vis{position:relative; height:0; padding-top:60%; background:var(--sauge-light);}
.ag-tuile .vis img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1;}
.ag-tuile .vis .emo{position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; font-size:2.2rem; z-index:0;}
.ag-tuile .vis .ag-match{position:absolute; left:8px; top:8px; z-index:2; margin:0;
  background:rgba(255,255,255,.92); box-shadow:0 1px 4px rgba(0,0,0,.12);}
.ag-tuile .corps{padding:10px 12px 12px; display:flex; flex-direction:column; flex:1;}
.ag-tuile .nom{font-family:'Fredoka'; font-size:0.94rem; line-height:1.25; margin:0 0 6px;}
.ag-tuile .meta{font-size:0.76rem; color:var(--ink-dim); margin-top:auto;
  display:flex; gap:9px; flex-wrap:wrap;}
@media(max-width:480px){.ag-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px;}
  .ag-tuile .nom{font-size:0.86rem;}}

/* Onglets de la vue Anti-gaspi. Une seule couleur — la sauge — et la
   hiérarchie vient du remplissage, pas de la teinte. */
.ag-onglets{display:flex; gap:5px; overflow-x:auto; padding:2px 2px 14px;
  scrollbar-width:none; -ms-overflow-style:none}
.ag-onglets::-webkit-scrollbar{display:none}
/* Sept onglets doivent tenir sur une ligne : rembourrage et taille réduits,
   et la rangée peut se resserrer si l'écran est juste. */
.ag-onglet{flex:0 1 auto; display:inline-flex; align-items:center; gap:5px; font-family:inherit;
  font-size:.8rem; font-weight:600; color:var(--ink-dim); background:#fff;
  border:1.5px solid var(--line); border-radius:999px; padding:7px 11px; cursor:pointer;
  transition:all .15s ease; white-space:nowrap; min-width:0}
.ag-onglet:hover{border-color:var(--sauge); color:var(--sauge-dark); background:var(--sauge-light)}
.ag-onglet .cpt{font-weight:600; font-size:.7rem; padding:1px 6px; color:var(--ink-dim);
  background:var(--bg); border-radius:999px; padding:1px 8px; transition:all .15s ease}
.ag-onglet.on{background:var(--sauge); border-color:var(--sauge); color:#fff}
.ag-onglet.on .cpt{background:rgba(255,255,255,.24); color:#fff}
.ag-onglet.vide{opacity:.42; cursor:default}
.ag-onglet.vide:hover{border-color:var(--line); color:var(--ink-dim); background:#fff}
.ag-vue{display:none}
/* Neuf vignettes visibles, le reste à l'ascenseur : le panneau ne s'allonge
   jamais, quel que soit le nombre de recettes dans la catégorie. */
/* Douze vignettes visibles — trois rangées de quatre — puis l'ascenseur.
   overflow-y:scroll plutôt que auto : la barre reste visible en permanence,
   sinon personne ne devine qu'il y a autre chose en dessous. */
.ag-vue.on{display:block; animation:agFondu .2s ease; max-height:548px; overflow-y:scroll;
  padding:2px 10px 4px 4px; scrollbar-width:auto; scrollbar-color:var(--sauge) var(--sauge-light)}
.ag-vue.on::-webkit-scrollbar{width:12px}
.ag-vue.on::-webkit-scrollbar-thumb{background:var(--sauge); border-radius:999px;
  border:3px solid var(--bg)}
.ag-vue.on::-webkit-scrollbar-track{background:var(--sauge-light); border-radius:999px}
@media(max-width:600px){.ag-vue.on{max-height:500px}}

/* Téléphone : les sept onglets s'écrasaient les uns sur les autres. On les
   remplace par une liste déroulante native, plus lisible et plus facile à
   viser du pouce. Et les vignettes passent à deux colonnes fixes. */
.ag-choix{display:none; width:100%; font-family:inherit; font-size:.92rem; font-weight:600;
  color:var(--sauge-dark); background:#fff; border:1.5px solid var(--sauge);
  border-radius:14px; padding:12px 14px; margin:0 0 14px; appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--sauge) 50%),
    linear-gradient(135deg,var(--sauge) 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%, calc(100% - 13px) 50%;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat}
@media(max-width:640px){
  .ag-onglets{display:none}
  .ag-choix{display:block}
  .ag-grid{grid-template-columns:1fr 1fr; gap:10px}
  .ag-vue.on{max-height:none; overflow:visible; padding:0}
}
@keyframes agFondu{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none}}

/* « J'ai des restes » — placé après les étapes, au moment où l'on se demande
   quoi faire de ce qui reste sur le plan de travail. L'utilisateur coche
   lui-même : deviner à sa place se trompait une fois sur deux. */
.restes-bloc{background:var(--sauge-light); border-radius:var(--radius); padding:16px 18px;}
.restes-tete{display:flex; align-items:center; gap:10px; font-family:'Fredoka',sans-serif;
  font-size:1.05rem; color:var(--sauge-dark);}
.restes-tete .ic{font-size:1.6rem; line-height:1;}
.restes-note{margin:4px 0 12px; font-size:.84rem; color:var(--ink-dim);}
.restes-puces{display:flex; flex-wrap:wrap; gap:7px;}
.reste-puce{font-family:inherit; font-size:.84rem; font-weight:600; cursor:pointer;
  background:#fff; color:var(--ink-dim); border:1.5px solid var(--line);
  border-radius:999px; padding:7px 13px; transition:all .14s ease;}
.reste-puce:hover{border-color:var(--sauge); color:var(--sauge-dark);}
.reste-puce.on{background:var(--sauge); border-color:var(--sauge); color:#fff;}
.reste-puce.on::before{content:'✓ '; font-weight:700;}
.restes-pied{display:flex; justify-content:flex-end; margin-top:14px;}
.restes-go{display:inline-flex; align-items:center; gap:9px; font-family:inherit;
  font-size:.92rem; font-weight:700; cursor:pointer; border:0; border-radius:999px;
  padding:11px 20px; background:var(--sauge); color:#fff; transition:all .16s ease;}
.restes-go:hover:not(:disabled){background:var(--sauge-dark); transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(79,107,74,.2);}
.restes-go:disabled{background:#fff; color:var(--ink-dim); cursor:default;
  box-shadow:none; transform:none;}
.restes-go .cpt{background:rgba(255,255,255,.26); border-radius:999px; padding:1px 8px;
  font-size:.78rem;}
.restes-go:disabled .cpt{display:none;}
.restes-go .fl{font-size:1.05rem;}
@media(max-width:480px){.restes-bloc{padding:14px;} .restes-pied{justify-content:stretch;}
  .restes-go{width:100%; justify-content:center;}}

/* Mention sanitaire obligatoire sur les recettes alcoolisées (loi Évin).
   Discrète mais toujours présente : elle ne se désactive pas. */
.mention-alcool{margin:0; padding:11px 14px; background:#fdf6ea;
  border-left:3px solid var(--safran); border-radius:0 10px 10px 0;
  font-size:.78rem; line-height:1.5; color:var(--ink-dim); font-style:italic;}
.badge-18{background:#fdf1e0; color:var(--safran-dark); font-weight:700;}
.pastille-alcool{display:inline-block; margin-left:6px; padding:1px 6px; border-radius:999px;
  background:#fdf1e0; color:var(--safran-dark); font-size:.68rem; font-weight:700;}

/* Accueil en deux zones : décider, puis parcourir. L'intitulé sépare les deux
   natures, que les cartes mélangeaient jusqu'ici sans qu'on sache pourquoi. */
.home-section{font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-dim); margin:30px 0 12px; text-align:center;}
.mode-grid + .home-section{margin-top:38px;}
.cata-grid{display:grid; grid-template-columns:1fr; gap:10px;}
@media(min-width:520px){.cata-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:860px){.cata-grid{grid-template-columns:repeat(4,1fr);}}
.cata-tuile{display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; text-align:center; text-decoration:none; color:var(--ink); cursor:pointer;
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px 12px;
  transition:all .16s ease;}
.cata-tuile:hover{border-color:var(--sauge); background:var(--sauge-light);
  transform:translateY(-2px); box-shadow:0 8px 18px rgba(34,39,31,.08);}
.cata-tuile .ic{font-size:1.8rem; line-height:1;}
.cata-tuile .nom{font-family:'Fredoka',sans-serif; font-size:.95rem;}
.cata-tuile .cpt{font-size:.76rem; color:var(--ink-dim);}
/* Annoncée mais pas encore ouverte : visible, sans laisser croire qu'on peut cliquer. */
.cata-tuile.bientot{cursor:default; opacity:.55; border-style:dashed;}
.cata-tuile.bientot:hover{border-color:var(--line); background:#fff;
  transform:none; box-shadow:none;}
@media(max-width:519px){.cata-tuile{flex-direction:row; gap:12px; justify-content:flex-start;
  text-align:left; padding:13px 16px;}
  .cata-tuile .ic{font-size:1.5rem;}
  .cata-tuile .cpt{margin-left:auto;}}

/* ============ CATALOGUE ============
   Colonne de types à gauche sur grand écran, rangée de pastilles qui défilent
   sur téléphone. Un seul balisage, deux présentations : c'est le CSS qui
   bascule, pas le code. */
.cata-intro{text-align:center; max-width:640px; margin:0 auto 22px; color:var(--ink-dim);
  font-size:.9rem; line-height:1.55;}
.cata-layout{display:grid; grid-template-columns:1fr; gap:18px;}
@media(min-width:860px){.cata-layout{grid-template-columns:212px 1fr; gap:24px; align-items:start;}}

.cata-aside-titre{display:none; font-size:.76rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-dim); margin:0 0 9px;}
@media(min-width:860px){
  .cata-aside{position:sticky; top:82px;}
  .cata-aside-titre{display:block;}
}
.cata-types{display:flex; gap:6px; overflow-x:auto; padding:2px 2px 10px;
  scrollbar-width:none; -ms-overflow-style:none;}
.cata-types::-webkit-scrollbar{display:none;}
@media(min-width:860px){.cata-types{flex-direction:column; overflow:visible; padding:0;}}

.cata-type{flex:none; display:flex; align-items:center; gap:9px; font-family:inherit;
  font-size:.86rem; font-weight:600; color:var(--ink-dim); cursor:pointer;
  background:#fff; border:1.5px solid var(--line); border-radius:999px;
  padding:8px 13px; white-space:nowrap; transition:all .15s ease;}
.cata-type:hover{border-color:var(--sauge); color:var(--sauge-dark); background:var(--sauge-light);}
.cata-type.on{background:var(--sauge); border-color:var(--sauge); color:#fff;}
.cata-type .lbl{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cata-type .n{flex:none; font-size:.74rem; font-weight:600; background:var(--bg);
  color:var(--ink-dim); border-radius:999px; padding:2px 8px; min-width:26px;
  text-align:center; line-height:1.25;}
.cata-type.on .n{background:rgba(255,255,255,.24); color:#fff;}
@media(min-width:860px){
  .cata-type{width:100%; justify-content:space-between; border-radius:11px; padding:10px 13px;}
}

.cata-barre{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-bottom:11px; margin-bottom:14px; border-bottom:1px solid var(--line);}
.cata-nb{font-size:.88rem; color:var(--ink-dim);}
.cata-nb b{color:var(--sauge-dark);}
.cata-tri{display:flex; align-items:center; gap:7px; font-size:.84rem; color:var(--ink-dim);}
.cata-tri select{font-family:inherit; font-size:.84rem; font-weight:600; color:var(--sauge-dark);
  background:#fff; border:1.5px solid var(--line); border-radius:999px; padding:7px 12px;
  cursor:pointer;}
.cata-plus{display:flex; justify-content:center; margin-top:22px;}
.cata-plus button{font-family:inherit; font-size:.9rem; font-weight:700; cursor:pointer;
  background:#fff; color:var(--sauge-dark); border:1.5px solid var(--sauge);
  border-radius:999px; padding:12px 24px; transition:all .15s ease;}
.cata-plus button:hover{background:var(--sauge); color:#fff; transform:translateY(-2px);}

/* ============ BANDEAU D'ACCUEIL ============ */
.bandeau{position:relative; height:270px; margin:16px 0 6px; overflow:hidden;
  border-radius:20px;
  background:#3a4433;}
@media(min-width:760px){.bandeau{height:360px; border-radius:24px; margin:22px 0 6px;}}
.bn-bande{position:absolute; inset:0; display:flex; gap:6px; width:200%;
  animation:bnGlisse 78s linear infinite;}
.bn-case{flex:1; overflow:hidden; border-radius:8px;}
.bn-case img{width:100%; height:100%; object-fit:cover; display:block;}
.bn-voile{position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(35,44,30,.42), rgba(35,44,30,.7));}
.bn-texte{position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:0 22px; color:#fff;}
/* Assombrissement doux, centré derrière le logo et le titre : eux ressortent,
   les photos des bords gardent leur lumière. */
/* Plus d'assombrissement local : il dessinait une ellipse visible autour du
   logo. Le voile général du bandeau et l'ombre portée du titre suffisent. */
.bn-texte::before{content:none;}

.bn-texte h1{font-family:'Fredoka',sans-serif; font-size:clamp(1.8rem,6vw,2.7rem);
  margin:0; line-height:1.1; text-shadow:0 2px 10px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.45);}
.bn-texte p{margin:9px 0 0; font-size:.95rem; opacity:.92;}
@keyframes bnGlisse{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* Apparition en cascade des cartes, indépendante du fond. */
.mode-grid > *{animation:homeMonte .65s ease both;}
.mode-grid > :nth-child(1){animation-delay:.05s}
.mode-grid > :nth-child(2){animation-delay:.16s}
.mode-grid > :nth-child(3){animation-delay:.27s}
.cata-grid > *{animation:homeMonte .65s ease both; animation-delay:.36s;}
@keyframes homeMonte{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}

/* Réglage système « réduire les animations » : tout s'immobilise. Certaines
   personnes ont de vrais troubles déclenchés par le mouvement à l'écran. */
@media(prefers-reduced-motion:reduce){
  .bn-bande{animation:none;}
  .mode-grid > *, .cata-grid > *{animation:none;}
}

/* Les cartes de l'accueil montent en cascade au chargement. */
@keyframes pomCascade{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
.mode-grid > *{animation:pomCascade .6s ease both;}
.mode-grid > :nth-child(1){animation-delay:.06s;}
.mode-grid > :nth-child(2){animation-delay:.18s;}
.mode-grid > :nth-child(3){animation-delay:.3s;}
.cata-grid > *{animation:pomCascade .6s ease both; animation-delay:.42s;}

/* Réglage système « réduire les animations » : tout s'immobilise. Le mal des
   transports et les troubles vestibulaires ne sont pas une hypothèse d'école. */
@media(prefers-reduced-motion:reduce){
  .bn-bande{animation:none;}
  .mode-grid > *, .cata-grid > *{animation:none;}
}

/* ============ ACCUEIL : BOUTON MENU ET MOSAÏQUE ============ */

/* La barre du haut ne s'affiche plus qu'à l'ouverture du menu. On la garde
   dans la page plutôt que de la reconstruire : ses gestionnaires sont déjà
   posés, et les recréer serait une source d'erreurs pour rien. */
/* Le panneau s'aligne sur le centre du bouton (48 px de large, à 18 px du bord :
   son centre est donc à 42 px). */
nav{position:fixed; top:72px; right:42px; left:auto; width:auto; z-index:55;
  transform-origin:top center; translate:50% 0;
  background:var(--sauge); border:0; border-radius:22px;
  box-shadow:0 18px 40px rgba(40,50,35,.34); padding:7px;
  opacity:0; visibility:hidden; transform:translateY(-10px) scale(.96);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;}
body.menu-ouvert nav{opacity:1; visibility:visible; transform:none;}
/* Pas d'infobulle dans le menu : elle sortait sur le côté et passait
   par-dessus le bandeau. */
nav .nav-icon-btn::before, nav .nav-icon-btn::after{display:none !important; content:none !important;}
nav .nav-inner{display:block; padding:0; max-width:none;}
nav .brand, nav .hamburger-btn, nav #mobile-menu-btn{display:none !important;}
/* Ouverture verticale : la place gagnée sert à nommer chaque fonction,
   ce qu'une rangée d'icônes ne permettait pas. */
nav .nav-icons{display:flex; flex-direction:column; gap:3px;}
nav .nav-icon-btn{display:grid; place-items:center; width:50px; height:46px;
  border-radius:15px; background:transparent; border:0; position:relative;
  color:#fff; transition:background .14s ease, transform .14s ease;}
/* Tracés vectoriels : ils prennent la couleur du bouton, donc blanc sur le
   sauge, et restent nets quelle que soit la taille — ce que l'emoji ne fait pas. */
nav .nav-icon-btn .ic{width:23px; height:23px; display:block;}
nav .nav-icon-btn:hover{background:rgba(255,255,255,.2); transform:scale(1.06);}
nav .nav-icon-btn:active{transform:scale(.96);}
/* Les pastilles de compteur passent en safran : lisibles sur le sauge. */
nav .nav-icon-btn .badge{background:var(--safran); color:#fff; border:2px solid var(--sauge);}
@media(max-width:480px){nav{left:auto; right:12px; min-width:0;}}

.menu-flottant{position:fixed; top:16px; right:18px; z-index:60; display:grid;
  place-items:center; width:48px; height:48px; cursor:pointer;
  background:rgba(255,255,255,.92); border:1px solid var(--line); border-radius:50%;
  box-shadow:0 6px 18px rgba(40,50,35,.16); backdrop-filter:blur(6px);
  transition:background .15s ease, transform .15s ease;}
.menu-flottant:active{transform:scale(.94);}
.menu-flottant:hover{background:#fff;}
.menu-flottant .bars{display:flex; flex-direction:column; gap:3px;}
.menu-flottant .bars i{display:block; width:16px; height:2px; background:var(--sauge-dark);
  border-radius:2px; transition:transform .18s ease, opacity .18s ease;}
body.menu-ouvert .menu-flottant{background:var(--sauge); border-color:var(--sauge);}
body.menu-ouvert .menu-flottant .bars i{background:#fff;}
body.menu-ouvert .menu-flottant .bars i:nth-child(1){transform:translateY(5px) rotate(45deg);}
body.menu-ouvert .menu-flottant .bars i:nth-child(2){opacity:0;}
body.menu-ouvert .menu-flottant .bars i:nth-child(3){transform:translateY(-5px) rotate(-45deg);}

/* Le logo passe dans le bandeau, à la place de la barre. */
/* Le logo néon est presque deux fois plus haut que le précédent à largeur
   égale : on le dimensionne par la HAUTEUR pour qu'il occupe la même place
   dans le bandeau, quel que soit son rapport. */
/* Le mot POMINY n'occupe que le tiers bas du logo : trop petit, il devient
   illisible. On dimensionne généreusement, et le bandeau s'agrandit d'autant. */
/* Transparence classique, sans mode de fusion : iOS applique mal « screen »
   dans une pile animée — il laissait le rectangle noir visible et interrompait
   le défilement des photos. */
.bn-logo{height:clamp(120px,24vw,180px); width:auto; max-width:94%; margin:0 0 2px;}
@media(max-width:600px){.bn-logo{height:clamp(96px,30vw,132px);}}

/* Mosaïque asymétrique : la taille porte la hiérarchie. */
.bento{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:108px; gap:12px;
  margin-top:20px;}
.bt{border-radius:18px; overflow:hidden; position:relative; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;}
.bt:hover{transform:translateY(-3px); box-shadow:0 14px 30px rgba(40,50,35,.18);}
.bt .fond{position:absolute; inset:0; background-size:cover; background-position:center;}
/* Les photos de la tuile Express se relaient en glissant depuis la droite. */
.bt-express .fond{opacity:0; transform:translateX(100%);
  transition:transform .7s cubic-bezier(.4,0,.2,1), opacity .7s ease;}
.bt-express .fond.on{opacity:1; transform:none;}
.bt-express .fond.sort{opacity:0; transform:translateX(-24%);}
.bt .ombre{position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(28,36,24,.18), rgba(28,36,24,.8));}
.bt .txt{position:absolute; left:16px; right:16px; bottom:14px; color:#fff; display:block;}
.bt .txt.centre{text-align:center; left:8px; right:8px;}
.bt .sur{display:block; font-size:.78rem; opacity:.85;}
.bt .gros{display:block; font-family:'Fredoka',sans-serif; font-size:1.22rem; margin-top:2px;}
.bt .sous{display:block; font-size:.78rem; opacity:.85; margin-top:3px;}
.bt-express{grid-column:span 2; grid-row:span 2;}
.bt-perso{grid-column:span 1; background:var(--sauge); color:#fff;
  display:flex; flex-direction:column; justify-content:center; padding:16px 20px;}
.bt-perso .gros{font-size:1.14rem;}
.bt-plein{display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; text-align:center; padding:10px; color:#fff;}
.bt-plein .e{font-size:1.6rem; line-height:1;}
.bt-plein .n{font-size:.84rem; font-weight:700;}
.bt-gaspi{background:var(--safran);}
.bt-cata .gros{font-size:1rem;}
.bt-blanc{background:#fff; border:1px solid var(--line); color:var(--ink);}
.bt-saison{grid-column:span 2; background:#fff; border:1px dashed var(--line);
  display:flex; align-items:center; justify-content:center; gap:10px;
  color:var(--ink-dim); cursor:default; font-size:.88rem;}
.bt-saison:hover{transform:none; box-shadow:none;}
.bt-saison .e{font-size:1.4rem;}
@media(max-width:820px){
  .bento{grid-template-columns:repeat(2,1fr); grid-auto-rows:98px;}
  .bt-express{grid-column:span 2; grid-row:span 2;}
  .bt-perso, .bt-saison{grid-column:span 2;}
}
@media(prefers-reduced-motion:reduce){
  .bt:hover{transform:none;}
  .bt-express .fond{transition:none;}
}

/* Retour : même bouton rond que sur les pages de conseils, pour qu'un seul
   geste serve partout. Placé en haut des vues plutôt qu'en pied de page,
   là où on le cherche quand on veut revenir. */
.retour-rond{display:inline-flex; align-items:center; gap:10px; font-family:inherit;
  font-size:.88rem; font-weight:600; color:var(--ink-dim); background:none; border:0;
  cursor:pointer; padding:0; margin:0 0 16px; transition:color .15s ease;}
.retour-rond .rond{width:38px; height:38px; border-radius:50%; background:#fff;
  border:1px solid var(--line); display:grid; place-items:center; font-size:1.05rem;
  color:var(--sauge-dark); flex:none; transition:all .15s ease;}
.retour-rond:hover{color:var(--sauge-dark);}
.retour-rond:hover .rond{border-color:var(--sauge); background:var(--sauge-light);
  transform:translateX(-2px);}

/* Catalogue : mêmes vignettes que l'anti-gaspi, quatre par rangée. */
.cata-grille{display:grid; grid-template-columns:repeat(4,1fr); gap:13px;}
@media(max-width:1000px){.cata-grille{grid-template-columns:repeat(3,1fr);}}
@media(max-width:700px){.cata-grille{grid-template-columns:repeat(2,1fr); gap:10px;}}

/* Défilé de la tuile Express : glissement lent, presque une fondue. */
.bt-express .fond{transition:transform 1.6s cubic-bezier(.33,0,.2,1), opacity 1.6s ease;}

/* ============ MODE EXPRESS : MISE EN PAGE ============ */

/* Le questionnaire tient en peu de lignes : sans hauteur minimale, le pied de
   page remontait au milieu de l'écran. On réserve la hauteur de la fenêtre
   moins l'en-tête, sans jamais l'imposer sur petit écran où l'espace est rare. */
.wizard{min-height:auto; max-width:1180px; margin:0 auto;}
@media(min-height:620px) and (min-width:600px){
  .wizard{min-height:calc(100vh - 210px); display:flex; flex-direction:column;}
}

/* Barre haute du questionnaire : le retour à l'accueil à gauche, face au
   bouton Menu qui occupe la droite. */
/* La barre du haut s'aligne sur la scène : le bouton était centré dans une
   colonne étroite alors que le contenu, lui, occupe toute la largeur. */
.wiz-barre{display:flex; align-items:center; gap:0; min-height:48px;
  margin:0 auto 6px; width:100%; max-width:1180px; position:relative; z-index:6;
  padding-right:clamp(300px, 31vw, 500px); padding-left:clamp(24px, 5vw, 90px);}
@media(max-width:860px){.wiz-barre{padding-right:0;}}
.wiz-barre .retour-rond{margin:0;}

/* « Question précédente » : centré, et détaché des réponses. */
/* Aligné sur la marge gauche du texte, pas centré dans la page. */
.wiz-prec{display:flex; margin:36px 0 0 clamp(24px, 5vw, 90px);}
@media(max-width:860px){.wiz-prec{margin:26px auto 0;}}

/* Le bouton Menu passait devant les fiches et les panneaux : il s'efface dès
   qu'un voile est ouvert, et revient à la fermeture. */
body.overlay-lock .menu-flottant{opacity:0; visibility:hidden; pointer-events:none;}

/* Le pied de page remontait sur les écrans peu remplis : on réserve la hauteur
   de la fenêtre, sur les écrans qui en ont assez pour que ce soit sans risque. */
@media(min-height:620px) and (min-width:600px){
  #app{min-height:calc(100vh - 120px);}
}

/* ============ CORRECTIFS MOBILES ============ */

/* L'ancienne barre avait, sous 900 px, un menu déroulant en position absolue
   calé sur la largeur de l'écran. Ces règles subsistaient et projetaient le
   nouveau panneau hors cadre. On les neutralise entièrement. */
body nav .nav-icons{position:static !important; top:auto !important; left:auto !important;
  right:auto !important; bottom:auto !important; width:auto !important;
  padding:0 !important; margin:0 !important; background:none !important;
  border:none !important; box-shadow:none !important; border-radius:0 !important;
  display:flex !important; flex-direction:column !important; gap:3px !important;}
body nav .nav-icons .nav-icon-btn{width:50px !important; height:46px !important;
  border:none !important; border-radius:15px !important; justify-content:center !important;
  padding:0 !important; font-size:0 !important;}
body nav .nav-icons .nav-icon-btn::before,
body nav .nav-icons .nav-icon-btn::after{content:none !important; display:none !important;}
body nav .nav-icons .nav-icon-btn .badge{position:absolute !important; top:5px; right:6px;
  margin:0 !important; order:0 !important;}
body nav .nav-icons .nav-icon-btn .ic{width:23px !important; height:23px !important;}

/* Bandeau : douze vignettes réparties sur deux fois la largeur donnaient des
   bandes de 30 px sur téléphone. On fixe leur largeur, la bande s'allonge
   d'elle-même — le défilement continu reste exact puisqu'il y a toujours
   exactement deux exemplaires de la série. */
.bn-bande{width:max-content !important;}
.bn-case{flex:0 0 200px !important;}
@media(max-width:700px){.bn-case{flex:0 0 132px !important;}}
@media(max-width:420px){.bn-case{flex:0 0 108px !important;}}

/* Sur téléphone, le bouton du menu descend en bas à droite : il ne masque plus
   le bandeau, il est à portée du pouce, et le panneau s'ouvre vers le haut,
   ancré au bord droit — plus de découpe possible. */
@media(max-width:820px){
  .menu-flottant{top:auto; bottom:18px; right:16px;
    box-shadow:0 8px 22px rgba(40,50,35,.26);}
  nav{top:auto !important; bottom:78px !important; right:16px !important;
    left:auto !important; translate:none !important; transform-origin:bottom right;}
  body:not(.menu-ouvert) nav{transform:translateY(10px) scale(.96);}
}

/* La bande du bandeau : hauteur explicite et rendu accéléré, sinon l'animation
   se fige sur certains téléphones et le fond vert apparaît seul. */
.bn-bande{height:100%; will-change:transform; backface-visibility:hidden;}
.bn-case{height:100%;}
.bn-case img{width:100%; height:100%; object-fit:cover; display:block;}

/* Les angles du bandeau sautaient d'arrondis à droits : la bande animée est
   promue en calque distinct par le navigateur, et le découpage du parent ne
   lui est alors plus appliqué. Forcer le parent dans son propre calque règle
   le problème, sur Safari comme sur Chrome. */
.bandeau{transform:translateZ(0); isolation:isolate;
  -webkit-mask-image:-webkit-radial-gradient(#fff, #000);}

/* Tuile des Basiques : quatre photos superposées, balayées au survol. Le temps
   de glissement est celui de la tuile Express, pour que les deux mouvements de
   l'accueil aient la même signature. */
.bt-basiques .fond{opacity:0; transform:translateX(100%);
  transition:transform 1.6s cubic-bezier(.4,0,.2,1), opacity 1.6s ease;}
.bt-basiques .fond.on{opacity:1; transform:none;}
.bt-basiques .fond.sort{opacity:0; transform:translateX(-24%);}
.bt-basiques .ombre{background:linear-gradient(180deg, rgba(28,36,24,.25), rgba(28,36,24,.78));}
.bt-basiques .gros{font-size:1.02rem;}
@media(prefers-reduced-motion:reduce){.bt-basiques .fond{transition:none;}}

/* ============ COMPOSITION DU REPAS ============ */

/* Le fil du repas : sans lui on ne sait pas combien d'étapes restent, et un
   parcours en quatre écrans sans repère décourage. */
/* Fil du repas en pastilles reliées. Le service en cours est plus grand et
   cerclé de sauge : on le repère avant même de lire. */
.menu-fil{display:flex; align-items:flex-start; justify-content:center;
  margin:6px 0 24px;}
.menu-fil .mf{display:flex; flex-direction:column; align-items:center; gap:6px; flex:none;}
.menu-fil .pastille{width:52px; height:52px; border-radius:50%; display:grid;
  place-items:center; font-size:1.35rem; background:#fff;
  border:1px dashed var(--line); opacity:.5; transition:all .2s ease;}
.menu-fil .lbl{font-size:.76rem; color:var(--ink-dim); white-space:nowrap;}
.menu-fil .mf.fait .pastille{background:var(--sauge); border:0; color:#fff;
  opacity:1; font-size:1.25rem;}
.menu-fil .mf.fait .lbl{color:var(--sauge-dark); font-weight:600;}
.menu-fil .mf.encours .pastille{width:66px; height:66px; font-size:1.65rem; opacity:1;
  border:3px solid var(--sauge); box-shadow:0 6px 16px rgba(93,125,86,.25);}
.menu-fil .mf.encours .lbl{font-size:.86rem; color:var(--ink); font-weight:700;}
.menu-fil .mf.cliquable{cursor:pointer;}
.menu-fil .mf.cliquable:hover .pastille{background:var(--sauge-dark);}
.menu-fil .mf-trait{width:44px; height:2px; background:var(--line); flex:none;
  margin:25px 5px 0;}
.menu-fil .mf-trait.fait{background:var(--sauge);}
@media(max-width:600px){
  .menu-fil .pastille{width:42px; height:42px; font-size:1.1rem;}
  .menu-fil .mf.encours .pastille{width:54px; height:54px; font-size:1.35rem;}
  .menu-fil .mf-trait{width:18px; margin-top:20px;}
  .menu-fil .lbl{font-size:.66rem;}
}

.menu-note{text-align:center; max-width:620px; margin:0 auto 16px;
  font-size:.88rem; color:var(--ink-dim); line-height:1.55;}
.menu-lien{background:none; border:0; padding:0; font-family:inherit;
  font-size:.86rem; font-weight:600; color:var(--sauge-dark); cursor:pointer;
  text-decoration:underline; text-underline-offset:3px;}
.menu-lien:hover{color:var(--safran-dark);}

/* Mosaïque : la proposition principale en grand, deux alternatives à côté.
   On propose au lieu de lister — c'est la promesse du mode Express. */
.menu-mosaique{display:grid; grid-template-columns:1.6fr 1fr; gap:12px;}
.menu-cote{display:flex; flex-direction:column; gap:12px;}
@media(max-width:700px){
  .menu-mosaique{grid-template-columns:1fr;}
  .menu-cote{flex-direction:row;}
  .menu-cote > *{flex:1;}
}

.menu-carte{position:relative; border-radius:18px; overflow:hidden; min-height:150px;
  transition:transform .18s ease, box-shadow .18s ease;}
.menu-carte.grand{min-height:320px;}
@media(max-width:700px){.menu-carte.grand{min-height:230px;} .menu-carte{min-height:170px;}}
.menu-carte:hover{transform:translateY(-2px); box-shadow:0 12px 26px rgba(40,50,35,.18);}
.menu-carte.pris{box-shadow:0 0 0 3px var(--sauge), 0 12px 26px rgba(40,50,35,.2);}
.menu-carte .fond{position:absolute; inset:0; background-size:cover; background-position:center;}
.menu-carte .ombre{position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(28,36,24,.12), rgba(28,36,24,.84));}
.menu-carte .txt{position:absolute; left:14px; right:14px; bottom:13px; color:#fff; display:block;}
.menu-carte .nom{display:block; font-family:'Fredoka',sans-serif; font-size:1rem; line-height:1.25;}
.menu-carte.grand .nom{font-size:1.32rem;}
.menu-carte .meta{display:block; font-size:.78rem; opacity:.88; margin-top:3px;}
.menu-carte .actes{display:flex; gap:7px; margin-top:10px;}
.menu-etiq{position:absolute; top:11px; left:12px; font-size:.7rem; font-weight:700;
  background:rgba(255,255,255,.92); color:var(--ink); border-radius:999px; padding:4px 11px;}
/* Même allure que les réponses du questionnaire : fond blanc, liseré sauge. */
.menu-prendre{font-family:inherit; font-size:.88rem; font-weight:700; cursor:pointer;
  border:2px solid var(--sauge); border-radius:999px; padding:10px 22px;
  background:#fff; color:var(--sauge-dark); transition:all .15s ease;}
.menu-prendre:hover{background:var(--sauge); color:#fff; transform:translateY(-1px);}
.menu-carte.pris .menu-prendre{background:var(--sauge); color:#fff;}
.menu-voir{font-family:inherit; font-size:.8rem; cursor:pointer; color:#fff;
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.4);
  border-radius:999px; padding:8px 14px;}
.menu-voir:hover{background:rgba(255,255,255,.3);}

/* Ces deux actions étaient de simples liens soulignés : personne ne les
   voyait. Ce sont maintenant de vrais boutons. */
.menu-sauter{display:flex; gap:10px; justify-content:center; margin:20px 0 104px;
  flex-wrap:wrap;}
.menu-secondaire{font-family:inherit; font-size:.88rem; font-weight:600; cursor:pointer;
  background:#fff; color:var(--ink); border:1.5px solid var(--line);
  border-radius:999px; padding:11px 20px; transition:all .15s ease;}
.menu-secondaire:hover{border-color:var(--sauge); color:var(--sauge-dark);
  background:var(--sauge-light);}

/* Le plateau : il rappelle ce qui est choisi et porte le bouton pour avancer.
   Fixé en bas, il reste à portée sans qu'on ait à remonter. */
/* Plateau : les vignettes au centre, les deux boutons à mi-chemin entre elles
   et les bords. Aux extrémités, ils paraissaient sans rapport avec le reste. */
.menu-plateau{position:fixed; left:0; right:0; bottom:0; z-index:40;
  background:#fff; border-top:1px solid var(--line); padding:10px 16px;
  box-shadow:0 -6px 20px rgba(40,50,35,.1);}
.mp-inner{max-width:820px; margin:0 auto; display:flex; align-items:center;
  justify-content:space-between; gap:14px;}
.mp-centre{display:flex; flex-direction:column; align-items:center; gap:4px;}
.mp-go.retour{background:#fff; color:var(--sauge-dark); border:1.5px solid var(--line);}
.mp-go.retour:hover{border-color:var(--sauge); background:var(--sauge-light);
  transform:translateY(-2px);}
.mp-go[hidden]{visibility:hidden; display:inline-flex;}
.mp-cases{display:flex; gap:6px;}
.mp-case{width:38px; height:38px; border-radius:10px; background-size:cover;
  background-position:center; background-color:var(--sauge-light); flex:none;}
.mp-case.vide{border:1px dashed var(--line); background:none; display:grid;
  place-items:center; color:var(--line); font-size:1rem;}
.mp-info{font-size:.74rem; color:var(--ink-dim); line-height:1.35; text-align:center;}
.mp-go{display:inline-flex; align-items:center; gap:8px;
  font-family:inherit; font-size:.9rem; font-weight:700; cursor:pointer; border:0;
  border-radius:999px; padding:12px 20px; background:var(--sauge); color:#fff;
  transition:all .16s ease;}
.mp-go:hover:not(:disabled){background:var(--sauge-dark); transform:translateY(-2px);}
.mp-go:disabled{background:var(--bg); color:var(--ink-dim); cursor:default;}
@media(max-width:700px){
  .mp-inner{gap:8px;}
  .mp-case{width:30px; height:30px;}
  .mp-info{display:none;}
  .mp-go{padding:10px 13px; font-size:.78rem;}
  .mp-go.retour span:not(.fl){display:none;}   /* la flèche suffit */
}

/* Récapitulatif : présenté comme un menu de restaurant, pas comme une liste. */
.menu-recap{max-width:620px; margin:0 auto;}
.mr-tete{text-align:center; margin-bottom:18px;}
.mr-sur{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim);}
.mr-tete h2{font-family:'Fredoka',sans-serif; font-size:1.5rem; margin:5px 0 0; color:var(--ink);}
.mr-sous{font-size:.84rem; color:var(--ink-dim); margin-top:5px;}
.mr-liste{background:#fff; border:1px solid var(--line); border-radius:16px; padding:4px 16px;}
.mr-ligne{display:flex; align-items:center; gap:13px; padding:12px 0; cursor:pointer;
  border-bottom:1px solid var(--bg);}
.mr-ligne:last-child{border-bottom:0;}
.mr-ligne:hover .mr-nom{color:var(--sauge-dark);}
.mr-vis{width:46px; height:46px; border-radius:11px; background-size:cover;
  background-position:center; background-color:var(--sauge-light); flex:none;}
.mr-txt{flex:1; min-width:0;}
.mr-serv{display:block; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-dim);}
.mr-nom{display:block; font-size:.96rem; color:var(--ink); transition:color .15s ease;}
.mr-temps{font-size:.78rem; color:var(--ink-dim); flex:none;}
.mr-actes{display:flex; gap:9px; flex-wrap:wrap; justify-content:center; margin-top:20px;}
.mr-btn{font-family:inherit; font-size:.88rem; font-weight:600; cursor:pointer;
  background:#fff; color:var(--ink); border:1px solid var(--line);
  border-radius:999px; padding:12px 20px; transition:all .15s ease;}
.mr-btn:hover{border-color:var(--sauge); color:var(--sauge-dark);}
.mr-btn.principal{background:var(--safran); border-color:var(--safran); color:#fff;
  font-weight:700;}
.mr-btn.principal:hover{background:var(--safran-dark); border-color:var(--safran-dark); color:#fff;}

/* ============ QUESTIONS DE L'EXPRESS ============
   La phrase à gauche, une colonne de photos à droite qui défile lentement.
   La scène sort de la colonne de contenu et occupe la hauteur disponible :
   c'est ce qui remplit l'écran d'ordinateur sans charger la mise en page. */
/* Le questionnaire devient le repère de la colonne d'images : celle-ci est
   ancrée dessus, du tout premier pixel au dernier. En la laissant dans la
   grille, elle s'arrêtait à la hauteur du texte et laissait un vide au-dessus
   du bouton « Question précédente ». */
.wizard{position:relative;}
/* Aucun transform ici : un ancêtre transformé transforme un position:fixed en
   position:absolute, et c'est ce qui bridait la hauteur de la colonne. On
   centre donc à la marge, pas au déplacement. */
.xp-scene{position:static; width:100%; margin:0;
  min-height:calc(100vh - 210px);
  display:flex; align-items:center;}

.xp-texte{flex:1; min-width:0;
  display:flex; flex-direction:column; align-items:flex-start;
  justify-content:center; text-align:left;
  /* La marge de droite réserve la place de la colonne, plus l'écart entre
     les deux. Le décalage de gauche recentre le texte. */
  padding:40px calc(clamp(260px, 26vw, 400px) + clamp(36px, 5vw, 96px)) 40px clamp(24px, 5vw, 90px);}

/* Ancrée sur le conteneur de l'application : il commence sous l'en-tête et
   s'arrête au pied de page, donc la colonne fait exactement la hauteur du
   contenu. En position fixe elle passait devant le pied de page au défilement ;
   en position absolue dans un bloc transformé, elle se bridait à ce bloc. */
#app{position:relative;}
.xp-colonne{position:absolute; top:0; z-index:5;
  right:clamp(0px, 0.6vw, 14px);
  width:clamp(260px, 26vw, 400px);
  overflow:hidden; background:#3a4433;
  border-radius:0;
  /* Ombre dirigée vers la gauche seulement : diffuse dans toutes les
     directions, elle formait un halo flou aux angles. */
  box-shadow:-18px 0 30px -18px rgba(40,50,35,.22);}
/* La bande fait sa propre hauteur, les vignettes gardent un format portrait.
   Avec une hauteur en pourcentage, elles s'étiraient en bandeaux horizontaux
   dès que la colonne était haute. */
.xp-defile{position:absolute; top:0; left:0; right:0; display:flex;
  flex-direction:column; gap:10px; padding:10px;
  animation:xpGlisse 70s linear infinite; will-change:transform;}
.xp-case{flex:none; width:100%; aspect-ratio:16/9; border-radius:14px;
  background-size:cover; background-position:center;
  background-color:var(--sauge-light);}
@keyframes xpGlisse{from{transform:translateY(0)} to{transform:translateY(-50%)}}
/* Fondu vers le lin sur le bord gauche : la colonne ne coupe pas net. */
/* Ce voile gardait des angles arrondis alors que la colonne est devenue
   carrée : c'est lui qui dessinait le flou dans les coins. */
.xp-fondu{position:absolute; inset:0; pointer-events:none; border-radius:0;
  background:linear-gradient(90deg, rgba(250,248,243,.55) 0%, rgba(250,248,243,0) 22%);}

.xp-barres{display:flex; gap:7px; margin-bottom:clamp(20px,3vh,34px);}
.xp-barres i{display:block; width:clamp(30px,2.6vw,46px); height:5px; border-radius:999px;
  background:var(--line); transition:background .3s ease;}
.xp-barres i.on{background:var(--sauge);}

.xp-phrase{font-family:'Fredoka',sans-serif; font-size:clamp(1.7rem, 3.6vw, 3.3rem);
  line-height:1.32; color:var(--ink); max-width:17ch;}
.xp-jeton{display:inline-block; background:var(--sauge); color:#fff;
  border-radius:16px; padding:2px 0.42em;
  animation:xpPop .5s cubic-bezier(.2,1.4,.4,1) both;}
@keyframes xpPop{
  0%{opacity:0; transform:scale(.75);}
  60%{transform:scale(1.06);}
  100%{opacity:1; transform:scale(1);}
}
.xp-attente{color:var(--ink-dim); animation:xpClign 1.7s ease-in-out infinite;}
@keyframes xpClign{0%,100%{opacity:.3} 50%{opacity:1}}

.xp-texte .step-sub{margin-top:10px; font-size:.86rem; color:var(--ink-dim);}
.xp-texte .step-chips{margin-top:clamp(22px, 3vh, 38px); gap:11px; justify-content:flex-start;}
.xp-texte .step-chip{font-size:clamp(.95rem, 1.15vw, 1.2rem);
  padding:clamp(12px,1.4vw,17px) clamp(20px,2.2vw,32px);}
.xp-texte .stepper-row{margin-top:24px; justify-content:flex-start;}
.xp-texte .wizard-continue{margin-top:26px !important; margin-left:0 !important;}

/* Téléphone : plus de colonne d'images, tout se centre. */
@media(max-width:860px){
  .xp-scene{width:100%; margin-left:0; transform:none;
    min-height:0; display:block;}
  .xp-colonne{display:none;}
  .xp-texte{grid-column:1; grid-row:1;}
  .xp-texte{padding:16px 2px !important; align-items:center; text-align:center;}
  .xp-colonne{display:none !important;}
  .xp-phrase{font-size:1.32rem; max-width:none;}
  .xp-texte .step-chips{flex-direction:column; width:100%; max-width:330px;
    margin-inline:auto; justify-content:center;}
  .xp-texte .step-chip{width:100%; font-size:.95rem; padding:13px 18px;}
  .xp-texte .stepper-row{justify-content:center;}
  .xp-texte .wizard-continue{margin-inline:auto !important;}
}
@media(prefers-reduced-motion:reduce){
  .xp-defile{animation:none;}
  .xp-jeton, .xp-attente{animation:none;}
}

/* ============ CORRECTIFS MOBILES DU PARCOURS ============ */
@media(max-width:700px){
  /* Les deux alternatives côte à côte laissaient trop peu de place :
     « Voir la recette » sortait de la carte. Elles passent l'une sous l'autre. */
  .menu-cote{flex-direction:column;}
  .menu-carte{min-height:190px;}
  .menu-carte .actes{flex-wrap:wrap;}
  .menu-prendre, .menu-voir{font-size:.84rem; padding:10px 18px;}
}
@media(max-width:860px){
  /* La barre du haut n'a plus de colonne à contourner : on lui rend ses bords. */
  .wiz-barre{padding-left:0 !important; padding-right:0 !important;}
}

/* ============ SUR MESURE — barre de critères ============
   Un bouton par critère, chacun ouvrant son panneau. La barre se colle en haut
   de l'écran ; sur téléphone elle s'efface au défilement vers le bas et revient
   dès qu'on remonte, pour rendre la hauteur d'écran aux photos. */
.sm-barre{position:sticky; top:0; z-index:40; margin:0 -18px 18px;
  background:#fff; border-bottom:1px solid var(--line);
  box-shadow:0 4px 18px rgba(34,39,31,.07);
  transition:transform .26s ease;}
.sm-barre.cachee{transform:translateY(-100%);}
/* Sur ordinateur la barre reste toujours en place : l'écran est assez haut. */
@media(min-width:701px){ .sm-barre.cachee{transform:none;} }

.sm-barre-in{display:flex; align-items:center; gap:9px; flex-wrap:wrap; padding:11px 18px;}
.sm-retour{display:inline-flex; align-items:center; gap:8px; flex-shrink:0;
  border:none; background:transparent; cursor:pointer; padding:0;
  font-family:inherit; font-size:0.84rem; font-weight:600; color:var(--sauge-dark);}
.sm-retour .rond{width:32px; height:32px; border-radius:999px; background:var(--sauge-light);
  display:grid; place-items:center; font-size:0.95rem;}
.sm-titre{font-family:'Fredoka',sans-serif; font-size:1.02rem; font-weight:600; margin-right:2px;}
.sm-crits{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}

.sm-crit{display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 15px;
  border-radius:999px; border:1.5px solid var(--line); background:#fff; color:var(--ink);
  font-family:inherit; font-size:0.85rem; font-weight:600; white-space:nowrap; cursor:pointer;
  transition:background .12s ease, border-color .12s ease, color .12s ease;}
.sm-crit:hover{border-color:var(--sauge);}
.sm-crit .fl{font-size:0.62rem; opacity:.65;}
.sm-crit.on{background:var(--sauge); border-color:var(--sauge); color:#fff;}
.sm-crit.on .fl{opacity:.9;}
.sm-crit.ouvert{border-color:var(--sauge-dark); box-shadow:0 0 0 3px var(--sauge-light);}
.sm-autres{border-style:dashed; color:var(--ink-dim);}
.sm-autres.ouvert{color:var(--ink);}
.sm-cnt{background:var(--safran); color:#2b1c05; border-radius:999px;
  padding:1px 8px; font-size:0.74rem; font-weight:700;}
.sm-raz{margin-left:auto; flex-shrink:0; border:none; background:transparent; cursor:pointer;
  font-family:inherit; font-size:0.8rem; font-weight:600; color:var(--ink-dim); padding:8px 4px;}
.sm-raz:hover{color:var(--ink);}

/* Les panneaux se posent SOUS la barre, en recouvrement des résultats : on ne
   pousse jamais le contenu vers le bas, la lecture ne saute pas. */
.sm-pops{position:relative;}
.sm-pop{display:none; position:absolute; left:18px; right:18px; top:8px; z-index:45;
  background:#fff; border:1px solid var(--line); border-radius:18px; padding:16px 20px 20px;
  box-shadow:0 20px 44px rgba(34,39,31,.20); max-height:min(70vh,560px); overflow-y:auto;}
.sm-pop.on{display:block;}
.sm-pop.large{left:18px; right:18px;}
.sm-pop > h3{margin:0 0 12px; font-family:'Fredoka',sans-serif; font-size:1rem; font-weight:600;}
.sm-pop .filter-note{margin-top:10px;}
/* Dans le tiroir, les dix critères restent des blocs dépliables, un seul ouvert
   à la fois, empilés sur une colonne : le tiroir est étroit. */
.sm-tiroir .filtres-avances{display:block;}
.sm-tiroir .filtres-avances > details{margin-bottom:8px;}

.sm-corps{padding-bottom:40px;}

@media(max-width:700px){
  .sm-barre{margin:0 -18px 14px;}
  .sm-barre-in{padding:9px 14px; gap:8px; flex-wrap:nowrap; overflow-x:auto;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;}
  .sm-barre-in::-webkit-scrollbar{display:none;}
  .sm-titre{display:none;}
  .sm-retour .lbl{display:none;}
  .sm-crits{flex-wrap:nowrap;}
  .sm-raz{margin-left:0;}
  .sm-pop{left:10px; right:10px; padding:14px 16px 18px; max-height:72vh;}
}

/* ============ SUR MESURE — LES RÉSULTATS ============ */
.sm-toolbar{display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  flex-wrap:wrap; margin:0 0 14px;}
.sm-count{font-family:'Fredoka',sans-serif; font-size:1.15rem; font-weight:600;}
.sm-tri{display:inline-flex; align-items:center; gap:8px; font-size:0.82rem; color:var(--ink-dim); font-weight:600;}
.sm-tri select{height:38px; padding:0 10px; border-radius:999px; border:1.5px solid var(--line);
  background:#fff; font-family:inherit; font-size:0.83rem; color:var(--ink);}

/* Fil de navigation.
   Par défaut — et dès que l'écran manque de marge — c'est une ligne collante
   au-dessus des résultats, qui ne décale rien.
   Quand la fenêtre laisse assez de place à gauche du contenu, il devient une
   colonne d'icônes posée DANS cette marge : les résultats gardent exactement
   la largeur qu'ils avaient, et le fil reste visible de haut en bas. */
.sm-fil{position:sticky; top:62px; z-index:12; display:flex; align-items:center; gap:8px;
  overflow-x:auto; padding:9px 0; margin-bottom:14px;
  background:var(--bg); border-bottom:1px solid var(--line); scrollbar-width:none;}
.sm-fil::-webkit-scrollbar{display:none;}
.sm-fil .lbl{display:none;}
.sm-ancre{flex:0 0 auto; display:flex; align-items:center; gap:7px; height:36px; padding:0 13px;
  border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--ink);
  font-size:0.8rem; font-weight:600; text-decoration:none; white-space:nowrap;}
.sm-ancre:hover{border-color:var(--sauge);}
.sm-ancre .n{font-size:0.75rem; color:var(--ink-dim);}
.sm-ancre.on{background:var(--sauge-light); border-color:var(--sauge-light); color:var(--sauge-dark);}
.sm-ancre.on .n{color:var(--sauge-dark);}

/* 1340 px : le contenu fait 1200 px de large, il reste donc au moins 70 px de
   marge de chaque côté — assez pour une colonne d'icônes, pas pour des noms.
   Le nom apparaît au survol, en pastille, par-dessus la marge. */
@media(min-width:1340px){
  .sm-fil{position:fixed; left:max(8px, calc(50% - 662px)); top:50%; transform:translateY(-50%);
    z-index:30; width:56px; flex-direction:column; align-items:center; gap:8px;
    overflow:visible; padding:0; margin:0; background:transparent; border:none;}
  .sm-fil .lbl{display:block; font-size:0.62rem; font-weight:700; letter-spacing:.06em;
    text-transform:uppercase; color:var(--ink-dim); text-align:center; margin-bottom:2px;}
  .sm-ancre{position:relative; width:52px; height:52px; padding:0; border-radius:16px;
    flex-direction:column; justify-content:center; gap:1px;
    border:1px solid var(--line); background:#fff; box-shadow:0 2px 8px rgba(34,39,31,.06);}
  .sm-ancre .i{display:block; font-size:1.2rem; line-height:1;}
  .sm-ancre .n{font-size:0.66rem; line-height:1;}
  /* Le nom du service, révélé au survol à droite de l'icône. */
  .sm-ancre .t{position:absolute; left:58px; top:50%; transform:translateY(-50%) translateX(-6px);
    padding:6px 12px; border-radius:999px; background:var(--ink); color:#fff;
    font-size:0.78rem; white-space:nowrap; opacity:0; pointer-events:none;
    transition:opacity .14s ease, transform .14s ease;}
  .sm-ancre:hover .t, .sm-ancre:focus-visible .t{opacity:1; transform:translateY(-50%) translateX(0);}
  .sm-ancre.on{background:var(--sauge); border-color:var(--sauge); color:#fff;}
  .sm-ancre.on .n{color:rgba(255,255,255,.85);}
}

/* ============ SUR MESURE — tiroir « + de critères » ============
   Un panneau latéral plutôt qu'un bloc qui pousse les résultats : ceux-ci
   restent visibles et se réduisent pendant qu'on règle. Sur téléphone, le
   tiroir devient une feuille qui monte du bas. */
.sm-voile{position:fixed; inset:0; z-index:39; background:transparent;
  opacity:0; pointer-events:none; transition:opacity .2s ease;}
.sm-voile.on{opacity:1; pointer-events:auto;}
.sm-tiroir{position:fixed; top:0; right:0; bottom:0; width:372px; max-width:92vw; z-index:59;
  background:#fff; border-left:1px solid var(--line);
  box-shadow:-14px 0 40px rgba(34,39,31,.16);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .24s ease; visibility:hidden;}
.sm-tiroir.on{transform:translateX(0); visibility:visible;}
.sm-tiroir-tete{flex-shrink:0; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:17px 20px 14px; border-bottom:1px solid var(--line);}
.sm-tiroir-tete .t{font-family:'Fredoka',sans-serif; font-size:1.05rem; font-weight:600;}
.sm-tiroir-fermer{width:34px; height:34px; border-radius:999px; border:none;
  background:#f3f1e8; color:var(--ink-dim); font-size:0.95rem; cursor:pointer;}
.sm-tiroir-fermer:hover{background:var(--line); color:var(--ink);}
.sm-tiroir-corps{flex:1; min-height:0; overflow-y:auto; padding:12px 18px 18px;}
.sm-tiroir-pied{flex-shrink:0; display:flex; gap:10px; align-items:center;
  padding:13px 18px calc(16px + env(safe-area-inset-bottom, 0px));
  border-top:1px solid var(--line); background:#fff;}
.sm-tiroir-pied .cta-btn{margin:0;}
.sm-tiroir-pied #sm-tiroir-ok{flex:1;}

@media(max-width:700px){
  /* Le voile s'assombrit : sur un petit écran la feuille couvre presque tout,
     il faut que le fond recule clairement. */
  .sm-voile{background:rgba(34,39,31,.5);}
  .sm-tiroir{top:auto; left:0; right:0; bottom:0; width:auto; max-width:none;
    height:82vh; border-left:none; border-radius:22px 22px 0 0;
    box-shadow:0 -14px 40px rgba(34,39,31,.28);
    transform:translateY(100%);}
  .sm-tiroir.on{transform:translateY(0);}
}

/* ============ SUR MESURE — rangées horizontales ============
   Un service par ligne quand plusieurs sont demandés : on compare les entrées
   entre elles sans faire défiler tous les plats d'abord. */
.sm-rang{display:flex; gap:16px; overflow-x:auto; padding:2px 2px 12px;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;}
.sm-rang > *{flex:0 0 218px; scroll-snap-align:start;}
.sm-rang::-webkit-scrollbar{height:8px;}
.sm-rang::-webkit-scrollbar-track{background:#efece2; border-radius:999px;}
.sm-rang::-webkit-scrollbar-thumb{background:#c2bda9; border-radius:999px;}
.sm-rang{scrollbar-width:thin; scrollbar-color:#c2bda9 #efece2;}
/* Dernière tuile : ouvrir le service en entier plutôt que d'allonger la rangée. */
.sm-tout{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  border:1.5px dashed #c9c3ae; border-radius:16px; background:transparent; cursor:pointer;
  font-family:inherit; color:var(--ink-dim); padding:14px;}
.sm-tout:hover{border-color:var(--sauge); color:var(--sauge-dark); background:var(--sauge-light);}
.sm-tout .n{font-family:'Fredoka',sans-serif; font-size:1.5rem; font-weight:600; color:var(--sauge-dark);}
.sm-tout .l{font-size:0.8rem; font-weight:600; text-align:center; line-height:1.35;}
@media(max-width:520px){
  .sm-rang > *{flex:0 0 168px;}
  .sm-rang{gap:12px;}
  /* Carte plus étroite, donc photo moins haute : la flèche remonte d'autant. */
  .sm-fleche{top:54px;}
}

/* ============ SUR MESURE — tri, flèches, retour, panneau du menu ============ */

/* Tri : menu maison, ancré sous son bouton. Le menu natif du système
   s'ouvrait n'importe où sur la page et n'avait rien à voir avec le reste. */
.sm-tri{position:relative;}
.sm-tri-btn{display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 14px;
  border-radius:999px; border:1.5px solid var(--line); background:#fff; cursor:pointer;
  font-family:inherit; font-size:0.83rem; color:var(--ink);}
.sm-tri-btn:hover{border-color:var(--sauge);}
.sm-tri-btn .k{color:var(--ink-dim); font-weight:600;}
.sm-tri-btn b{font-weight:600;}
.sm-tri-btn .fl{font-size:0.62rem; opacity:.6;}
.sm-tri-menu{display:none; position:absolute; right:0; top:calc(100% + 6px); z-index:46;
  min-width:210px; padding:6px; background:#fff; border:1px solid var(--line);
  border-radius:14px; box-shadow:0 16px 36px rgba(34,39,31,.18);}
.sm-tri-menu.on{display:block;}
.sm-tri-menu button{display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  padding:10px 12px; border:none; border-radius:10px; background:transparent; cursor:pointer;
  font-family:inherit; font-size:0.86rem; color:var(--ink);}
.sm-tri-menu button:hover{background:#f3f1e8;}
.sm-tri-menu button.on{background:var(--sauge-light); color:var(--sauge-dark); font-weight:600;}
.sm-tri-menu button.on::before{content:'✓'; font-size:0.8rem;}
.sm-tri-menu button:not(.on)::before{content:''; width:9px;}

/* Flèches de rangée : elles n'apparaissent que du côté où il reste à voir. */
.sm-rang-wrap{position:relative;}
.sm-rang::-webkit-scrollbar{height:0;}
.sm-rang{scrollbar-width:none;}
.sm-fleche{position:absolute; top:70px; transform:translateY(-50%); z-index:6;
  width:40px; height:40px; border-radius:999px; border:1px solid var(--line);
  background:rgba(255,255,255,.96); color:var(--ink); cursor:pointer;
  font-size:1.35rem; line-height:1; display:none; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(34,39,31,.16); padding:0 0 3px;}
.sm-fleche:hover{background:#fff; border-color:var(--sauge); color:var(--sauge-dark);}
.sm-fleche.g{left:-6px;}
.sm-fleche.d{right:-6px;}
.sm-rang-wrap.peut-g .sm-fleche.g{display:flex;}
.sm-rang-wrap.peut-d .sm-fleche.d{display:flex;}
/* Un léger voilage au bord renforce le message : ça continue par là. */
.sm-rang-wrap.peut-d::after{content:''; position:absolute; right:0; top:0; bottom:14px; width:56px;
  pointer-events:none; background:linear-gradient(to right, rgba(250,248,243,0), var(--bg));}

/* Retour après avoir ouvert un service en entier. */
.sm-retour-filtre{display:inline-flex; align-items:center; height:40px; padding:0 16px;
  margin-bottom:14px; border-radius:999px; border:1.5px solid var(--sauge);
  background:var(--sauge-light); color:var(--sauge-dark); cursor:pointer;
  font-family:inherit; font-size:0.85rem; font-weight:600;}
.sm-retour-filtre:hover{background:var(--sauge); color:#fff;}

/* Panneau « Mon menu » : vérifier à tout moment ce qui a été retenu. */
.mm-voile{position:fixed; inset:0; z-index:70; background:rgba(34,39,31,.5);
  display:flex; align-items:flex-end; justify-content:center; padding:0;}
.mm-panneau{width:min(560px,100%); max-height:82vh; display:flex; flex-direction:column;
  background:#fff; border-radius:22px 22px 0 0; box-shadow:0 -14px 40px rgba(34,39,31,.3);}
.mm-tete{flex-shrink:0; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:17px 20px 14px; border-bottom:1px solid var(--line);}
.mm-tete .t{font-family:'Fredoka',sans-serif; font-size:1.05rem; font-weight:600;}
.mm-fermer{width:34px; height:34px; border-radius:999px; border:none; background:#f3f1e8;
  color:var(--ink-dim); font-size:0.95rem; cursor:pointer;}
.mm-corps{flex:1; min-height:0; overflow-y:auto; padding:8px 20px 14px;}
.mm-groupe h4{margin:14px 0 6px; font-size:0.76rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-dim);}
.mm-ligne{display:flex; align-items:center; gap:12px; padding:9px 0; border-top:1px solid var(--line);}
.mm-ligne .v{flex-shrink:0; width:52px; height:52px; border-radius:12px; cursor:pointer;
  background:var(--sauge-light) center/cover no-repeat;}
.mm-ligne .c{flex:1; min-width:0; cursor:pointer; display:flex; flex-direction:column; gap:3px;}
.mm-ligne .c b{font-size:0.92rem;}
.mm-ligne .c small{font-size:0.76rem; color:var(--ink-dim);}
.mm-retirer{flex-shrink:0; width:32px; height:32px; border-radius:999px; border:1px solid var(--line);
  background:#fff; color:var(--ink-dim); cursor:pointer; font-size:0.85rem;}
.mm-retirer:hover{border-color:var(--corail,#c2495a); color:var(--corail,#c2495a);}
.mm-pied{flex-shrink:0; display:flex; gap:10px; flex-wrap:wrap;
  padding:13px 20px calc(16px + env(safe-area-inset-bottom, 0px));
  border-top:1px solid var(--line);}
.mm-pied .cta-btn{margin:0;}
#mb-txt{cursor:pointer;}
#mb-txt:hover{text-decoration:underline;}
@media(min-width:700px){
  .mm-voile{align-items:center;}
  .mm-panneau{border-radius:22px; max-height:76vh;}
}

/* ============ SUR MESURE — sections, cartes et planning ============ */
.sm-section{margin-bottom:30px; scroll-margin-top:86px;}
.sm-sec-titre{margin:0 0 14px; font-family:'Fredoka',sans-serif; font-size:1.08rem; font-weight:600;}
.sm-sec-titre .n{font-family:'Work Sans',sans-serif; font-size:0.8rem; font-weight:500;
  color:var(--ink-dim); margin-left:4px;}

.sm-grille{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:18px;}
.sm-carte{position:relative; background:#fff; border:1px solid var(--line); border-radius:16px;
  overflow:hidden; display:flex; flex-direction:column; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;}
.sm-carte:hover{transform:translateY(-3px); box-shadow:0 10px 24px rgba(34,39,31,.14);}
.sm-carte .sm-vis{position:relative; height:0; padding-top:62%; background:var(--sauge-light); overflow:hidden;}
.sm-carte .sm-vis img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1;}
.sm-carte .sm-vis .emo{position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; font-size:2.2rem; z-index:0;}
.sm-carte .sm-vis .pastille-alcool{position:absolute; left:8px; top:8px; z-index:2; margin:0;}
.sm-carte-corps{padding:11px 13px 13px; display:flex; flex-direction:column; flex:1;}
.sm-carte .nom{font-family:'Fredoka',sans-serif; font-size:0.95rem; line-height:1.25; margin:0 0 6px;}
.sm-carte .meta{display:flex; gap:10px; flex-wrap:wrap; font-size:0.76rem; color:var(--ink-dim); margin-top:auto;}
/* Le bouton « + » se pose sur la photo, comme sur les autres cartes du site. */
.sm-carte .menu-pick{position:absolute; top:8px; right:8px; z-index:5;}
@media(max-width:520px){
  .sm-grille{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px;}
  .sm-carte .nom{font-size:0.86rem;}
}

/* --- planning : une carte par jour --- */
.sm-semaine{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px;}
.sm-jour{background:#fff; border:1px solid var(--line); border-radius:20px; padding:15px 17px 17px;}
.sm-jour-tete{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:11px;}
.sm-jour-tete .j{font-family:'Fredoka',sans-serif; font-size:1.05rem; font-weight:600;}
.sm-jour-tete .t{font-size:0.76rem; color:var(--ink-dim);}
.sm-jour-vis{display:grid; grid-template-columns:repeat(auto-fit,minmax(56px,1fr)); gap:8px; margin-bottom:11px;}
.sm-jour-vis .v{display:block; height:66px; border-radius:12px; background:var(--sauge-light);
  background-size:cover; background-position:center; cursor:pointer;}
.sm-jour-liste{list-style:none; margin:0; padding:0;}
.sm-jour-liste > li{border-top:1px solid var(--line);}
.sm-jour-liste > li:first-child{border-top:none;}
.sm-jour-liste .l{display:flex; align-items:center; gap:8px; padding:8px 0;}
.sm-jour-liste .mm{flex-shrink:0; font-size:0.68rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.03em; color:var(--ink-dim); min-width:62px;}
.sm-jour-liste .nom{flex:1; min-width:0; text-align:left; border:none; background:none; padding:0;
  font-family:inherit; font-size:0.86rem; font-weight:600; color:var(--ink); cursor:pointer;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sm-jour-liste .acts{display:flex; gap:4px; flex-shrink:0;}
.sm-jour-liste .plan-ing-panel{padding:0 0 10px; border-top:none;}
.sm-jour.recap{background:var(--sauge-light); border-color:#d5e0cd; display:flex;
  flex-direction:column; justify-content:center; gap:12px;}
.sm-recap-titre{font-family:'Fredoka',sans-serif; font-size:1.05rem; font-weight:600;}
.sm-recap-chiffres{font-size:0.86rem; line-height:1.7; color:#3f4a3a;}
.sm-jour.recap .cta-btn{width:100%;}

/* --- batch cooking --- */
.sm-batch-tete{margin-bottom:16px;}
.sm-batch-tete h2{margin:0; font-size:1.2rem;}
.sm-batch-tete p{margin:5px 0 0; font-size:0.85rem; color:var(--ink-dim);}
.sm-batch-grille{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px;}
.sm-batch-carte{background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden;}
.sm-batch-carte .sm-vis{position:relative; height:0; padding-top:56%; background:var(--sauge-light); cursor:pointer; overflow:hidden;}
.sm-batch-carte .sm-vis img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1;}
.sm-batch-carte .sm-vis .emo{position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; font-size:2.4rem; z-index:0;}
.sm-batch-corps{padding:13px 15px 15px;}
.sm-badge{display:inline-block; padding:3px 11px; border-radius:999px;
  font-size:0.74rem; font-weight:700; margin-bottom:7px;}
.sm-batch-corps .nom{margin:0; font-family:'Fredoka',sans-serif; font-size:1rem; cursor:pointer;}
.sm-batch-corps .meta{font-size:0.78rem; color:var(--ink-dim); margin:5px 0 10px;}

.sm-repartition{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px;
  background:#fff; border:1px solid var(--line); border-radius:18px; padding:16px;}
.sm-rep-jour{display:flex; flex-direction:column; gap:7px;}
.sm-rep-jour .j{font-family:'Fredoka',sans-serif; font-size:0.9rem; font-weight:600;}
.sm-rep-jour .c{display:flex; align-items:center; height:36px; padding:0 11px; border-radius:11px;
  font-size:0.76rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* Total du menu en cours, dans le panneau. */
.mm-total{display:flex; gap:18px; flex-wrap:wrap; padding:12px 14px; margin-top:14px;
  border-radius:14px; background:var(--sauge-light); color:#3f4a3a;}
.mm-total div{display:flex; flex-direction:column; gap:2px;}
.mm-total small{font-size:0.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; opacity:.75;}
.mm-total b{font-family:'Fredoka',sans-serif; font-size:1.05rem; font-weight:600;}

/* La tuile anti-gaspi porte une photo ; le fond safran reste visible en secours
   tant que /img/ui/antigaspi.webp n'est pas déposé sur le serveur. */
.bt-gaspi .gros{font-size:1rem;}
.bt-gaspi .ombre{background:linear-gradient(180deg, rgba(28,36,24,.10), rgba(28,36,24,.78));}

/* ============ Retouches accueil et Sur mesure ============ */

/* La tuile anti-gaspi passe sur deux rangées : la photo du frigo, porte
   ouverte, a besoin de hauteur pour être lisible. La tuile « Saison » se
   réduit d'autant, à la largeur de la tuile du catalogue. */
.bt-gaspi{grid-row:span 2;}
.bt-saison{grid-column:span 1;}
@media(max-width:820px){
  /* Deux colonnes seulement : « Saison » reprend toute la largeur. */
  .bt-saison{grid-column:span 2;}
  /* Le bouton « remonter » passe à gauche : à droite il chevauchait le menu
     flottant et son panneau. */
  #scroll-top-btn{left:20px; right:auto;}
}

/* La barre de critères est détachée du haut de page : ses deux angles bas
   s'arrondissent comme les autres blocs. */
.sm-barre{border-radius:0 0 18px 18px;}

/* Les actions du récapitulatif de menu se centrent dans la fenêtre. */
.mm-pied{justify-content:center;}

/* ============ MODE SAISON ============
   La tuile de l'accueil porte en permanence la photo de la saison en cours,
   déduite de la date du jour. Elle fonctionne comme un interrupteur : la
   bordure verte et l'ergot à droite disent si le mode est actif. */
.bt-saison{position:relative; display:flex; align-items:center; gap:10px;
  padding:0 12px; border:2.5px solid transparent; cursor:pointer;
  transition:border-color .16s ease;}
.bt-saison .ombre{background:linear-gradient(90deg, rgba(28,36,24,.80), rgba(28,36,24,.34));}
.bt-saison.on{border-color:var(--sauge);}
.sais-txt{position:relative; z-index:2; flex:1; min-width:0; display:flex;
  flex-direction:column; gap:3px; color:#fff; text-align:left;}
.sais-txt .t{font-family:'Fredoka',sans-serif; font-size:0.95rem; font-weight:600;}
.sais-txt .s{font-size:0.72rem; opacity:.9; line-height:1.25;}
.sais-switch{position:relative; z-index:2; flex-shrink:0; width:46px; height:27px;
  border-radius:999px; background:rgba(255,255,255,.28);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45); transition:background .16s ease;}
.sais-switch i{position:absolute; top:3px; left:3px; width:21px; height:21px;
  border-radius:999px; background:#fff; transition:left .16s ease;}
.bt-saison.on .sais-switch{background:var(--sauge); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55);}
.bt-saison.on .sais-switch i{left:22px;}
@media(max-width:820px){
  .sais-txt .s{font-size:0.76rem;}
}

/* La pastille, à gauche du bouton menu : jamais dessous, le panneau du menu
   s'ouvre vers le bas sur ordinateur. Repliée sur l'emoji, elle se déplie au
   premier appui et coupe le mode saison au second. */
/* Mêmes dimensions et même hauteur que le bouton menu (48 px, à 16 px du haut),
   collée à 8 px de lui : 18 + 48 + 8 = 74 px depuis le bord droit. */
#pastille-saison{position:fixed; top:16px; right:74px; z-index:54; box-sizing:border-box;
  display:inline-flex; align-items:center; gap:0; height:48px; min-width:48px; padding:0;
  border:1.5px solid var(--sauge); border-radius:999px; background:#fff;
  cursor:pointer; font-family:inherit; color:var(--sauge-dark); overflow:hidden;
  --halo:rgba(93,125,86,.40);
  box-shadow:0 0 12px 2px var(--halo), 0 4px 12px rgba(34,39,31,.12);
  animation:halo-saison 3.4s ease-in-out infinite;}
#pastille-saison .e{width:45px; flex-shrink:0; display:grid; place-items:center; font-size:1.2rem;}
/* Un halo à la couleur de la saison, qui respire doucement. */
#pastille-saison[data-saison="ete"]{--halo:rgba(242,178,51,.60);}
#pastille-saison[data-saison="automne"]{--halo:rgba(214,116,40,.52);}
#pastille-saison[data-saison="hiver"]{--halo:rgba(120,172,224,.60);}
#pastille-saison[data-saison="printemps"]{--halo:rgba(232,140,182,.55);}
@keyframes halo-saison{
  0%,100%{box-shadow:0 0 9px 1px var(--halo), 0 4px 12px rgba(34,39,31,.12);}
  50%{box-shadow:0 0 18px 5px var(--halo), 0 4px 12px rgba(34,39,31,.12);}
}
@media(prefers-reduced-motion:reduce){ #pastille-saison{animation:none;} }
#pastille-saison .l{max-width:0; opacity:0; white-space:nowrap; font-size:0.82rem; font-weight:600;
  transition:max-width .2s ease, opacity .2s ease, padding .2s ease; padding:0;}
#pastille-saison.deplie .l{max-width:220px; opacity:1; padding:0 14px 0 2px;}
@media(max-width:820px){
  /* Le panneau du menu s'ouvre vers le haut : la pastille reste à sa gauche. */
  /* Menu à 16 px du bord et 18 px du bas : 16 + 48 + 8 = 72 px. */
  #pastille-saison{top:auto; bottom:18px; right:72px;}
}

.cata-note-saison{margin:-4px 0 14px; padding:10px 14px; border-radius:14px;
  background:var(--sauge-light); color:#3f4a3a; font-size:0.84rem; line-height:1.5;}

/* « + de critères » s'allume quand un critère du tiroir est actif — y compris
   la saison venue de l'accueil, qu'on ne voyait nulle part dans la barre. */
.sm-autres.actif{border-style:solid; border-color:var(--sauge);
  background:var(--sauge-light); color:var(--sauge-dark);}

/* ============ SUR MESURE SUR TÉLÉPHONE ============
   Une seule cible pleine largeur plutôt qu'une rangée de pastilles qui défile :
   le doigt la trouve sans viser, et elle porte le résumé des critères actifs.
   Toute la mécanique s'ouvre ensuite en feuilles montantes. */
.sm-affiner-zone{display:none;}
.sm-compte{display:none;}
.sm-menu-m{display:none;}
.sm-retour-m{display:none;}

@media(max-width:700px){
  /* La rangée de pastilles disparaît au profit du bouton unique. */
  .sm-crits, .sm-autres, .sm-raz{display:none;}
  .sm-barre-in{flex-wrap:nowrap; overflow:visible; padding:10px 14px 0;}
  .sm-titre{display:block; font-size:1rem;}
  .sm-compte{display:inline; margin-left:auto; flex-shrink:0;
    font-family:'Fredoka',sans-serif; font-size:0.9rem; font-weight:600; color:var(--sauge-dark);}

  .sm-affiner-zone{display:block; padding:10px 14px 12px;}
  .sm-affiner{display:flex; align-items:center; gap:11px; width:100%; height:52px;
    padding:0 14px; border-radius:16px; border:1.5px solid var(--line); background:var(--bg);
    cursor:pointer; font-family:inherit; color:var(--sauge-dark);}
  .sm-affiner .r{flex:1; min-width:0; text-align:left; font-size:0.88rem; font-weight:600;
    color:var(--ink-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .sm-affiner .fl{font-size:0.68rem; color:var(--ink-dim);}
  .sm-affiner.actif{border-color:var(--sauge); background:var(--sauge-light);}
  .sm-affiner.actif .r{color:var(--sauge-dark);}

  /* Chaque panneau devient une feuille montante, au-dessus du voile. */
  .sm-pop{position:fixed; left:0; right:0; bottom:0; top:auto; z-index:59;
    max-height:82vh; border-radius:22px 22px 0 0; padding:14px 18px calc(20px + env(safe-area-inset-bottom, 0px));
    box-shadow:0 -14px 40px rgba(34,39,31,.28);}
  .sm-pop > h3{display:flex; align-items:center; gap:8px; margin:0 0 14px; font-size:1.05rem;}
  .sm-menu-m{display:none;}
  .sm-menu-m.on{display:block;}
  .sm-retour-m{display:grid; place-items:center; width:32px; height:32px; flex-shrink:0;
    border:none; border-radius:999px; background:#f3f1e8; color:var(--ink-dim);
    font-size:1.2rem; line-height:1; cursor:pointer; padding:0 2px 3px 0;}

  /* Les lignes de la liste : nom à gauche, valeur à droite. */
  .sm-ligne-crit{display:flex; align-items:center; gap:12px; width:100%; padding:14px 2px;
    border:none; border-top:1px solid var(--line); background:none; cursor:pointer;
    font-family:inherit; text-align:left;}
  .sm-ligne-crit:first-of-type{border-top:none;}
  .sm-ligne-crit .n{flex:1; min-width:0; font-size:0.95rem; font-weight:600; color:var(--ink);}
  .sm-ligne-crit .v{flex-shrink:0; max-width:48%; font-size:0.85rem; color:var(--ink-dim);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .sm-ligne-crit .v.on{color:var(--sauge-dark); font-weight:600;}
  .sm-ligne-crit .c{flex-shrink:0; color:#b6b1a0; font-size:1.05rem;}
  .sm-raz-m{width:100%; margin-top:14px; height:46px; border:1.5px solid var(--line);
    border-radius:999px; background:#fff; cursor:pointer;
    font-family:inherit; font-size:0.88rem; font-weight:600; color:var(--ink-dim);}

  /* Le voile assombrit dès qu'une feuille est ouverte. */
  .sm-voile{background:rgba(34,39,31,.5);}
}



/* Voile sous la barre (z-index 40) : la barre et ses feuilles restent au-dessus.
   Le tiroir, lui, est à 59 et passe au-dessus de tout. */

/* Invitation quand aucun filtre n'est choisi : grande, centrée, dans la police
   du titre de l'accueil, pour qu'on ne croie jamais à une page vide. */
.sm-attente{min-height:58vh; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; padding:30px 18px;}
.sm-attente .t{margin:0; font-family:'Fredoka',sans-serif; font-weight:700;
  font-size:clamp(1.7rem,6vw,2.6rem); line-height:1.15; color:var(--sauge-dark);}

/* L'icône « changer » du planning reprend celle d'« ajuster ». */
.plan-icon-btn.plan-changer{border-radius:999px; background:#fff url('/img/ui/ajuster.webp') center/80% no-repeat;
  font-size:0; transition:transform .12s ease;}
.plan-icon-btn.plan-changer:hover{transform:rotate(-30deg);}

/* Planning à plusieurs services : sous-titre de repas dans la carte-jour, et
   nom du repas dans l'en-tête quand la journée n'en compte qu'un. */
.sm-jour-liste > li.sm-jour-moment{border-top:none; padding:10px 0 2px;
  font-size:0.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--sauge-dark);}
.sm-jour-liste > li.sm-jour-moment + li{border-top:none;}
.sm-jour-tete .jm{font-family:'Work Sans',sans-serif; font-size:0.8rem; font-weight:600; color:var(--ink-dim);}

/* Le fil « Aller à » disparaît sous 1340 px : sur téléphone et tablette, une
   ligne par service suffit, et le fil flottait par-dessus les recettes. Il ne
   reste que la colonne d'icônes dans la marge des grands écrans. */
@media(max-width:1339px){ .sm-fil{display:none !important;} }

/* L'icône du caddie remplace l'emoji. En em, elle prend exactement la taille
   qu'avait l'emoji dans chaque contexte : bouton, titre ou pastille. */
.ic-caddie{display:inline-block; width:1.2em; height:1.2em; vertical-align:-0.24em;
  background:url('/img/ui/caddie.webp') center/contain no-repeat;}

/* Pages statiques (fiches recette, basiques, anti-gaspi) : elles reprennent la
   coquille de index.html, donc un #app VIDE placé avant leur contenu. Sa hauteur
   minimale d'un écran — prévue pour l'application — creusait un grand vide en
   haut de chacune de ces pages. Un #app vide ne réserve plus rien. */
#app:empty{min-height:0;}

/* La barre de critères s'arrête avant la pastille de saison et le bouton menu,
   qui occupent les 136 derniers pixels à droite (halo compris). On ne la
   raccourcit que si la marge naturelle de la page ne suffit pas. */
@media(min-width:821px){
  .sm-barre{margin-right:calc(-18px + max(0px, 136px - max(0px, (100vw - 760px) / 2)));}
}
@media(min-width:1100px){
  .sm-barre{margin-right:calc(-18px + max(0px, 136px - max(0px, (100vw - 1200px) / 2)));}
}

/* ============ MENU DÉPLIANT ============
   Plus de panneau vert : chaque fonction est une icône indépendante, empilée
   sous le bouton menu (au-dessus sur téléphone). Voir « les icônes flottent »
   plus bas pour leur apparence. */
nav{background:transparent; box-shadow:none; border-radius:0; padding:0;}
nav .nav-icons{gap:10px;}
nav .nav-icon-btn{width:48px; height:48px; border-radius:999px;}
nav .nav-icon-btn .badge{border-color:#fff;}

/* Les anciens correctifs imposaient, avec !important, des boutons carrés de
   50 × 46 sans bordure et un écart de 3 px. On les remplace au même niveau de
   priorité, sinon les bulles resteraient des carrés arrondis collés. */
body nav .nav-icons{gap:10px !important;}
body nav .nav-icons .nav-icon-btn{width:48px !important; height:48px !important;
  border-radius:999px !important; border:none !important;}
body nav .nav-icons .nav-icon-btn .badge{top:-3px; right:-3px;}

/* ============ LES ICÔNES ILLUSTRÉES ============
   Une même règle pour toutes : dimensionnées en em, elles prennent la taille
   qu'avait l'emoji remplacé, dans un titre comme dans un bouton. */
.ic-img{display:inline-block; width:1.2em; height:1.2em; vertical-align:-0.24em;
  background:center/contain no-repeat;}
.ic-recherche{background-image:url('/img/ui/recherche.webp');}
.ic-preferences{background-image:url('/img/ui/preferences.webp');}
.ic-favoris{background-image:url('/img/ui/favoris.webp');}
.ic-lexique{background-image:url('/img/ui/lexique.webp');}
.ic-planning{background-image:url('/img/ui/planning.webp');}

/* ============ MENU DÉPLIANT : LES ICÔNES FLOTTENT ============
   Plus aucune bulle : ni fond, ni bordure, ni flou. Chaque illustration flotte
   seule, portée par une ombre douce qui la détache de n'importe quel fond —
   c'est leur relief et leur couleur qui les rendent lisibles. */
body nav .nav-icons .nav-icon-btn,
nav .nav-icon-btn{background-color:transparent !important; border:none !important;
  box-shadow:none !important; -webkit-backdrop-filter:none; backdrop-filter:none;
  background-position:center; background-repeat:no-repeat; background-size:24px;
  filter:drop-shadow(0 4px 7px rgba(34,39,31,.28)) drop-shadow(0 0 1.5px rgba(255,255,255,.7));
  transition:transform .14s ease, filter .14s ease;}
nav .nav-icon-btn:hover{transform:scale(1.12);
  filter:drop-shadow(0 6px 10px rgba(34,39,31,.32)) drop-shadow(0 0 2px rgba(255,255,255,.8));}
/* Les tracés au trait laissent place aux illustrations. */
nav .nav-icon-btn .ic{display:none !important;}
nav #search-nav-btn  {background-image:url('/img/ui/recherche.webp');}
nav #shopping-nav-btn{background-image:url('/img/ui/caddie.webp');}
nav #account-nav-btn {background-image:url('/img/ui/preferences.webp');}
nav #fav-nav-btn     {background-image:url('/img/ui/favoris.webp');}
nav #lex-nav-btn     {background-image:url('/img/ui/lexique.webp');}
nav #plans-nav-btn   {background-image:url('/img/ui/planning.webp');}

/* La pastille de saison s'efface dès qu'une fenêtre s'ouvre (fiche recette,
   liste de courses…), comme le bouton menu : elle passait par-dessus la fiche. */
body.overlay-lock #pastille-saison{opacity:0; visibility:hidden; pointer-events:none;}

/* Message de bienvenue : la précision sur la saison, et le rappel du tuto. */

/* ============ MESSAGE DE BIENVENUE — plein écran (W3) ============
   Ordinateur : une grande fenêtre, l'illustration à gauche, le texte blanc sur
   vert sombre à droite. Téléphone : tout l'écran, l'illustration en fond dans
   la moitié haute, le texte posé dessus en bas, à portée de pouce.
   L'image attendue : /img/ui/bienvenue.webp (la pieuvre Pominy). Tant qu'elle
   n'est pas déposée, un fond vert uni prend sa place, sans trou blanc. */
.overlay.center#bienvenue-overlay .panel.bv-w3{
  max-width:920px; width:100%; height:min(600px, 88vh); max-height:none;
  padding:0; border-radius:28px; overflow:hidden; display:flex;
  background:#2f3a2b; color:#fff; box-shadow:0 24px 60px rgba(0,0,0,.35);}
#bienvenue-overlay .bv-photo{flex:0 0 38%;
  background:#4a5a45 url('/img/ui/bienvenue.webp') center/cover no-repeat;}
#bienvenue-overlay .bv-corps{flex:1; min-width:0; display:flex; flex-direction:column;
  padding:28px 34px 26px; overflow-y:auto;}

/* Barre d'étapes façon « stories », et « Passer » en face. */
#bienvenue-overlay .bv-haut{display:flex; align-items:center; gap:18px; margin-bottom:8px;}
#bienvenue-overlay .bv-points{flex:1; display:flex; gap:6px; margin:0; justify-content:stretch;}
#bienvenue-overlay .bv-points i{flex:1; width:auto; height:4px; border-radius:9px; background:rgba(255,255,255,.3);}
#bienvenue-overlay .bv-points i.on{background:#fff; width:auto;}
#bienvenue-overlay .bv-skip{position:static; background:none; border:none; cursor:pointer;
  font-family:inherit; font-size:0.85rem; font-weight:600; color:rgba(255,255,255,.8); padding:6px 0;}

#bienvenue-overlay .bv-slide{display:none;}
#bienvenue-overlay .bv-slide.on{display:flex; flex-direction:column; justify-content:center;
  flex:1; min-height:0;}

/* Le mot partagé : « Bienvenue sur » et « Terminé la charge mentale, »
   aboutissent tous deux à POMINY, écrit une seule fois sur deux lignes ; la
   seconde phrase repart en dessous : « vous accompagne. » */
#bienvenue-overlay .bv-mot{display:grid; grid-template-columns:auto auto; grid-template-rows:auto auto auto;
  column-gap:12px; align-items:center; justify-content:start; margin:10px 0 22px;
  font-family:'Work Sans',sans-serif; font-weight:400; text-align:left;}
#bienvenue-overlay .bv-mot .a{grid-column:1; grid-row:1; align-self:end; text-align:right;
  font-family:'Fredoka',sans-serif; font-weight:600; font-size:1.6rem; line-height:1.1;}
#bienvenue-overlay .bv-mot .b{grid-column:1; grid-row:2; align-self:start; text-align:right;
  padding-top:4px; font-size:0.95rem; opacity:.9;}
#bienvenue-overlay .bv-mot .pom{grid-column:2; grid-row:1 / span 2;
  font-family:'Fredoka',sans-serif; font-weight:700; font-size:3.6rem; line-height:.9;
  letter-spacing:.02em; color:#fff; text-shadow:0 2px 0 #c96f2a, 0 6px 18px rgba(0,0,0,.35);}
#bienvenue-overlay .bv-mot .c{grid-column:2; grid-row:3; text-align:center; padding-top:6px;
  font-size:0.95rem; opacity:.9;}

#bienvenue-overlay .bv-titre{font-family:'Fredoka',sans-serif; font-weight:600; font-size:1.7rem;
  margin:6px 0 16px; text-align:left; color:#fff;}

/* Les lignes de fonctions : pastille translucide, texte blanc. */
#bienvenue-overlay .bv-liste{background:none; border-radius:0; padding:0; margin:0;}
#bienvenue-overlay .bv-liste div{display:flex; align-items:center; gap:14px; margin:0 0 12px;
  font-size:0.92rem; line-height:1.4; color:#fff;}
#bienvenue-overlay .bv-liste .e{width:46px; height:46px; flex-shrink:0; border-radius:999px;
  background:rgba(255,255,255,.14); display:grid; place-items:center; font-size:1.35rem;}
#bienvenue-overlay .bv-liste a{color:#f3c48a;}
#bienvenue-overlay .bv-precis{display:block; margin-top:2px; font-size:0.86em; color:rgba(255,255,255,.7);}

/* Bas de fenêtre : le rappel du tuto à gauche, les boutons à droite. */
#bienvenue-overlay .bv-bas{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-top:14px;}
#bienvenue-overlay .bv-note{margin:0; text-align:left; font-size:0.8rem; line-height:1.5; color:rgba(255,255,255,.72);}
#bienvenue-overlay .bv-tuto{font-weight:600; color:#fff;}
#bienvenue-overlay .bv-nav{display:flex; gap:10px; flex-shrink:0;}
#bienvenue-overlay .bv-nav button{flex:none; border-radius:999px; padding:13px 22px; font-family:'Fredoka',sans-serif;
  font-size:0.98rem; font-weight:600; cursor:pointer;}
#bienvenue-overlay .bv-prev{background:none; border:1.5px solid rgba(255,255,255,.35); color:#fff;}
#bienvenue-overlay .bv-next{background:#e2952f; color:#2b1c05; border:none;}

/* ---- Téléphone : tout l'écran ---- */
@media(max-width:700px){
  .overlay.center#bienvenue-overlay{padding:0;}
  .overlay.center#bienvenue-overlay .panel.bv-w3{max-width:none; width:100%; height:100%;
    border-radius:0; position:relative; display:block;}
  #bienvenue-overlay .bv-photo{position:absolute; inset:0; bottom:auto; height:58%;}
  /* Le dégradé fait passer l'image au vert sombre sous le texte. */
  #bienvenue-overlay .bv-photo::after{content:''; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(47,58,43,0) 35%, #2f3a2b 100%);}
  #bienvenue-overlay .bv-corps{position:relative; height:100%; box-sizing:border-box;
    padding:calc(16px + env(safe-area-inset-top, 0px)) 20px calc(20px + env(safe-area-inset-bottom, 0px));}
  #bienvenue-overlay .bv-slide.on{justify-content:flex-end;}
  #bienvenue-overlay .bv-mot{margin:0 0 18px;}
  #bienvenue-overlay .bv-mot .a{font-size:1.35rem;}
  #bienvenue-overlay .bv-mot .b{font-size:0.86rem;}
  #bienvenue-overlay .bv-mot .pom{font-size:2.9rem;}
  #bienvenue-overlay .bv-mot .c{font-size:0.86rem;}
  #bienvenue-overlay .bv-titre{font-size:1.45rem;}
  #bienvenue-overlay .bv-liste div{font-size:0.86rem; gap:12px; margin-bottom:11px;}
  #bienvenue-overlay .bv-liste .e{width:42px; height:42px; font-size:1.2rem;}
  /* En bas : les boutons pleine largeur, le rappel du tuto en dessous. */
  #bienvenue-overlay .bv-bas{flex-direction:column-reverse; align-items:stretch; gap:12px;}
  #bienvenue-overlay .bv-nav button{flex:1; padding:15px;}
  #bienvenue-overlay .bv-note{text-align:center;}
}
@media(max-width:700px) and (max-height:700px){
  #bienvenue-overlay .bv-photo{height:44%;}
}
#bienvenue-overlay .bv-points i.fait{background:rgba(255,255,255,.85);}

/* Photo de bienvenue pivotée sur les téléphones où le bandeau photo devient
   plus large que haut (iPhone SE et petits écrans). La scène est vue du
   dessus : la pivoter ne change pas son sens, et toute la table reste visible
   au lieu d'être coupée en haut et en bas. Le bandeau fait 58 % de la hauteur
   (44 % sous 700 px de haut) : il est « paysage » dès que largeur/hauteur de
   l'écran dépasse 0,58 (ou 0,44). */
@media(max-width:700px) and (min-aspect-ratio:58/100){
  #bienvenue-overlay .bv-photo{background-image:url('/img/ui/bienvenue-paysage.webp');}
}
@media(max-width:700px) and (max-height:700px) and (min-aspect-ratio:44/100){
  #bienvenue-overlay .bv-photo{background-image:url('/img/ui/bienvenue-paysage.webp');}
}
.ic-antigaspi{background-image:url('/img/ui/antigaspi-ic.webp');}
.ic-surmesure{background-image:url('/img/ui/surmesure.webp');}
.ic-express{background-image:url('/img/ui/express.webp');}

/* Icônes des titres d'écran (Anti-gaspi, Lexique) : à la taille du texte,
   l'illustration était trop petite pour se lire. */
.section-title .ic-titre{width:1.9em; height:1.9em; vertical-align:-0.58em; margin-right:4px;}

/* Menu dépliant resserré : icônes plus petites, moins d'écart entre elles. */
body nav .nav-icons{gap:2px !important;}
body nav .nav-icons .nav-icon-btn{width:40px !important; height:40px !important;}

/* ============ BIENVENUE : fond clair en dégradé ============
   Le vert sombre éteignait les icônes. Le panneau de texte part du blanc à
   gauche et va vers le vert sauge à droite ; le texte passe donc en sombre.
   Le vert d'arrivée reste assez clair pour que le texte y garde un bon
   contraste. */
.overlay.center#bienvenue-overlay .panel.bv-w3{background:#fff; color:var(--ink);}
#bienvenue-overlay .bv-corps{background:linear-gradient(90deg, #ffffff 0%, #eef3eb 45%, #a9c2a3 100%); color:var(--ink);}
#bienvenue-overlay .bv-points i{background:rgba(34,39,31,.14);}
#bienvenue-overlay .bv-points i.on,
#bienvenue-overlay .bv-points i.fait{background:var(--sauge-dark);}
#bienvenue-overlay .bv-skip{color:var(--ink-dim);}
#bienvenue-overlay .bv-mot .a{color:var(--ink);}
#bienvenue-overlay .bv-mot .b,
#bienvenue-overlay .bv-mot .c{color:var(--ink); opacity:.78;}
#bienvenue-overlay .bv-mot .pom{color:var(--sauge-dark);
  text-shadow:0 2px 0 #e2952f, 0 6px 16px rgba(34,39,31,.18);}
#bienvenue-overlay .bv-titre{color:var(--ink);}
#bienvenue-overlay .bv-liste div{color:var(--ink);}
/* Pastilles vert très pâle : l'icône Sur mesure, blanche, s'y détache. */
#bienvenue-overlay .bv-liste .e{background:rgba(93,125,86,.16);}
#bienvenue-overlay .bv-liste a{color:var(--sauge-dark);}
#bienvenue-overlay .bv-precis{color:var(--ink-dim);}
#bienvenue-overlay .bv-note{color:var(--ink-dim);}
#bienvenue-overlay .bv-tuto{color:var(--sauge-dark);}
#bienvenue-overlay .bv-prev{border-color:rgba(34,39,31,.25); color:var(--ink);}
@media(max-width:700px){
  /* Téléphone : le texte est sous la photo, le dégradé devient vertical — la
     photo se fond dans le blanc, qui glisse vers le vert sauge en bas. */
  #bienvenue-overlay .bv-corps{background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 30%, #ffffff 52%, #eef3eb 72%, #a9c2a3 100%);}
  #bienvenue-overlay .bv-photo::after{background:linear-gradient(180deg, rgba(255,255,255,0) 40%, #ffffff 100%);}
}
/* « Passer » est en haut à droite, sur le vert : il reste en couleur pleine
   (le gris secondaire n'y offrait qu'un contraste de 2,6:1). */
#bienvenue-overlay .bv-skip{color:var(--ink);}
#bienvenue-overlay .bv-precis{color:var(--ink); opacity:.7;}

/* ============ NOUVELLES ICÔNES : glossaire et planning ============
   Nouveaux noms de fichiers plutôt qu'un écrasement : aucun navigateur ne
   pourra resservir l'ancienne image depuis son cache. */
.ic-lexique{background-image:url('/img/ui/glossaire.webp');}
.ic-planning{background-image:url('/img/ui/planning-v2.webp');}
nav #lex-nav-btn  {background-image:url('/img/ui/glossaire.webp');}
nav #plans-nav-btn{background-image:url('/img/ui/planning-v2.webp');}

/* ============ BIENVENUE : les icônes flottent ============
   Plus de pastille ronde derrière les icônes : elles flottent, comme dans le
   menu, un peu plus grandes pour compenser. */
#bienvenue-overlay .bv-liste .e{background:none !important; width:46px; height:46px; font-size:1.9rem;
  filter:drop-shadow(0 3px 5px rgba(34,39,31,.18));}
@media(max-width:700px){ #bienvenue-overlay .bv-liste .e{width:42px; height:42px; font-size:1.7rem;} }

/* ============ MENU DÉPLIANT : le nom au survol ============
   D'anciennes règles de bulles (placées sous l'icône, centrées, ou mises en
   ligne dans une liste) s'appliquent encore à ces boutons avec des left:50%,
   des transform et des position:static en priorité absolue. Mélangées à la
   nouvelle position, elles écrasaient l'étiquette en un rond noir et faisaient
   partir le texte hors de l'écran. On fixe donc TOUTES les propriétés de
   placement, en priorité absolue, pour qu'aucune ancienne règle ne s'en mêle. */
@media(hover:hover){
  body nav .nav-icons .nav-icon-btn[data-tooltip]{position:relative !important; overflow:visible !important;}
  body nav .nav-icons .nav-icon-btn[data-tooltip]:hover::after,
  body nav .nav-icons .nav-icon-btn[data-tooltip]:focus-visible::after{
    content:attr(data-tooltip) !important; display:block !important;
    position:absolute !important; top:50% !important; bottom:auto !important;
    left:auto !important; right:calc(100% + 12px) !important;
    transform:translateY(-50%) !important;
    width:auto !important; height:auto !important; min-width:0 !important; max-width:none !important;
    margin:0 !important; flex:none !important; opacity:1 !important; order:0 !important;
    padding:7px 13px !important; border-radius:999px !important;
    background:#22271f !important; color:#fff !important;
    font-family:'Work Sans',sans-serif !important; font-size:0.8rem !important; font-weight:600 !important;
    line-height:1.2 !important; letter-spacing:0 !important; text-align:left !important;
    white-space:nowrap !important; pointer-events:none !important; z-index:70 !important;
    box-shadow:0 6px 16px rgba(34,39,31,.22) !important; transition:none !important;}
  nav .nav-icon-btn:hover{transform:scale(1.06);}
}


/* Téléphone : la zone principale réserve elle aussi la hauteur de l'écran.
   La règle d'origine ne s'appliquait qu'à partir de 600 px de large ; sur
   téléphone, un écran peu rempli (première question d'Express, par exemple)
   laissait remonter le pied de page jusqu'au milieu. Les pages statiques,
   dont la zone principale est vide, restent exemptées par #app:empty. */
@media(max-width:599px){
  #app{min-height:calc(100vh - 70px);}
  @supports(height:100svh){ #app{min-height:calc(100svh - 70px);} }
}
#app:empty{min-height:0 !important;}

/* ============ E1 : boutons en haut quand le bas est occupé ============
   Téléphone uniquement (sur ordinateur ils sont déjà en haut à droite). Le
   menu et la pastille rejoignent la ligne du bouton « Accueil » ; le panneau
   du menu s'ouvre alors vers le bas, et non plus vers le haut. */
@media(max-width:820px){
  /* Sur téléphone, les deux boutons sont un peu plus petits : 42 px. */
  .menu-flottant{width:42px !important; height:42px !important;}
  #pastille-saison{height:42px !important; min-width:42px !important; right:66px !important;}
  #pastille-saison .e{width:39px; font-size:1.05rem;}

  /* En haut : centrés sur la ligne du bouton « Accueil ». */
  body.boutons-en-haut .menu-flottant{top:calc(6px + env(safe-area-inset-top, 0px)) !important;
    bottom:auto !important; right:16px !important;}
  body.boutons-en-haut #pastille-saison{top:calc(6px + env(safe-area-inset-top, 0px)) !important;
    bottom:auto !important; right:66px !important;}
  body.boutons-en-haut nav{top:calc(58px + env(safe-area-inset-top, 0px)) !important;
    bottom:auto !important; transform-origin:top right !important;}
  body.boutons-en-haut:not(.menu-ouvert) nav{transform:translateY(-10px) scale(.96) !important;}

  /* Le contenu descend un peu : le fil d'étapes (Apéritif, Entrée, Plat,
     Dessert) passait sous les deux boutons et le halo de la pastille. */
  body.boutons-en-haut #app .menu-fil{margin-top:22px;}
  /* Sur mesure : la ligne du haut de la barre porte le compteur à droite ; on
     lui laisse la place des deux boutons. */
  body.boutons-en-haut .sm-barre-in{padding-right:120px;}
}

/* ============ CATALOGUE : le panier rapporté du jeu ============ */
.cata-panier{background:var(--sauge-light); border:1px solid #d5e0cd; border-radius:18px;
  padding:14px 16px; margin:0 0 16px;}
.cata-panier-tete{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.cata-panier-tete .t{font-family:'Fredoka',sans-serif; font-weight:600; font-size:1rem; color:#2f4029;}
#cata-panier-vider{border:none; background:none; cursor:pointer; font-family:inherit;
  font-size:0.82rem; font-weight:600; color:var(--ink-dim); text-decoration:underline;}
.cata-panier-liste{display:flex; flex-wrap:wrap; gap:7px; margin-top:10px;}
.cata-ing{display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 12px;
  border-radius:999px; border:1px solid var(--sauge); background:#fff; color:var(--sauge-dark);
  font-family:inherit; font-size:0.83rem; font-weight:600; cursor:pointer;}
.cata-ing:hover{background:var(--sauge); color:#fff;}
.cata-panier-note{margin:10px 0 0; font-size:0.82rem; color:#3f4a3a;}
.cata-tri-fixe{font-size:0.82rem; font-weight:600; color:var(--ink-dim);}

/* ============ TUILE DU JEU ============
   Sur ordinateur, « Sur mesure » se réduit à une colonne et le jeu prend la
   case libérée, en haut à droite : les six autres tuiles ne bougent pas.
   Sur téléphone, la tuile se glisse dans le vide à côté des Tout-Petits, et
   « Sur mesure » reprend toute la largeur : la grille reste celle d'avant. */
/* Dégradé horizontal : vert sauge à gauche, derrière le texte, et blanc crème
   à droite, là où se trouve la pieuvre. Le vert reste assez foncé sur la moitié
   gauche pour que le texte blanc tienne la lecture. */
/* Halo clair depuis le coin de la pieuvre, en haut à droite. Le crème occupe
   la plus grande part de la tuile ; le vert se replie sur le coin inférieur
   gauche, là où se lit le texte — et y reste assez foncé pour le blanc. */
.bt-jeu{grid-column:4; grid-row:1; text-decoration:none;
  background:radial-gradient(145% 135% at 100% 0%,
    #fffdf7 0%, #f6f8f1 32%, #dfe8d8 50%, #8fa987 64%, var(--sauge) 78%, var(--sauge-dark) 100%);
  color:#fff; display:flex; align-items:flex-end; overflow:hidden;}
/* Sur le fond clair de droite, la pieuvre a besoin d'être plus présente qu'à
   22 % : elle disparaissait. */
/* Sur le crème, la pieuvre peut vivre en pleine couleur. */
.bt-jeu .jeu-deco{position:absolute; right:-4px; top:-8px; font-size:4.8rem; opacity:.9;
  transform:rotate(-12deg); pointer-events:none;}
.bt-jeu .txt{position:relative; z-index:2; display:flex; flex-direction:column; gap:2px;
  text-shadow:0 1px 6px rgba(34,39,31,.35);}
.bt-jeu .gros{font-family:'Fredoka',sans-serif; font-weight:600; font-size:0.98rem; line-height:1.15;}
.bt-jeu .sous{font-size:0.72rem; opacity:.85;}
.bt-jeu:hover .jeu-deco{opacity:.34; transform:rotate(-6deg) scale(1.06);}
.bt-jeu .jeu-deco{transition:opacity .18s ease, transform .18s ease;}
@media(max-width:820px){
  /* La tuile reprend sa place automatique : le trou à côté des Tout-Petits. */
  .bt-jeu{grid-column:auto; grid-row:auto;}
  .bt-jeu .gros{font-size:0.88rem;}
  .bt-jeu .jeu-deco{font-size:3.8rem;}
}

/* Aucune recette ne correspond : on le dit, et on propose des sorties — c'est
   l'utilisateur qui choisit de relâcher un critère, jamais l'application. */
.menu-vide{background:#fff; border:1px solid var(--line); border-radius:20px;
  padding:26px 22px; text-align:center; margin:10px 0 18px;}
.menu-vide .t{margin:0 0 8px; font-family:'Fredoka',sans-serif; font-weight:600; font-size:1.2rem;}
.menu-vide .s{margin:0 auto; max-width:46ch; font-size:0.9rem; line-height:1.55; color:var(--ink-dim);}
.menu-vide .s2{margin:18px 0 10px; font-size:0.86rem; font-weight:600; color:var(--ink);}
.menu-pistes{display:flex; flex-wrap:wrap; gap:9px; justify-content:center;}
.menu-piste{display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 18px;
  border-radius:999px; border:1.5px solid var(--sauge); background:var(--sauge-light);
  color:var(--sauge-dark); font-family:inherit; font-size:0.88rem; font-weight:600; cursor:pointer;}
.menu-piste:hover{background:var(--sauge); color:#fff;}
.menu-piste b{font-family:'Fredoka',sans-serif;}

/* ============ ANTI-GASPI : la colonne (A2) ============
   Ordinateur : les ingrédients restent en colonne à gauche, les recettes à
   droite — on voit la liste se réorganiser pendant qu'on ajoute un reste.
   Téléphone : la colonne devient une feuille en bas d'écran, repliée sur une
   poignée « Mes ingrédients », qu'on déplie d'un appui. */
.ag-layout{display:grid; grid-template-columns:304px minmax(0,1fr); gap:22px; align-items:start;}
.ag-layout .ag-panneau{max-width:none; margin:0; position:sticky; top:18px; padding:16px;}
.ag-layout .ag-main{min-width:0;}
.ag-poignee{display:none;}
.ag-panneau .ag-courants .row{max-height:none;}

@media(max-width:980px) and (min-width:821px){
  .ag-layout{grid-template-columns:270px minmax(0,1fr); gap:16px;}
}

@media(max-width:820px){
  .ag-layout{display:block;}
  /* La feuille : repliée, on ne voit que la poignée et les ingrédients choisis. */
  .ag-layout .ag-panneau{position:fixed; left:0; right:0; bottom:0; top:auto; z-index:56;
    margin:0; padding:0; border:none; border-top:1px solid var(--line);
    border-radius:22px 22px 0 0; box-shadow:0 -10px 30px rgba(34,39,31,.16);
    max-height:82vh; display:flex; flex-direction:column; background:#fff;}
  .ag-poignee{display:flex; align-items:center; gap:10px; width:100%; flex-shrink:0;
    border:none; background:none; cursor:pointer; padding:14px 16px 12px;
    font-family:inherit; text-align:left;}
  .ag-poignee .t{font-family:'Fredoka',sans-serif; font-weight:600; font-size:0.98rem;}
  .ag-poignee .n{min-width:24px; height:24px; padding:0 7px; border-radius:999px;
    background:var(--sauge); color:#fff; font-size:0.78rem; font-weight:700;
    display:grid; place-items:center;}
  .ag-poignee .c{margin-left:auto; color:var(--ink-dim); transition:transform .2s ease;}
  .ag-poignee .t{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  /* Tant que rien n'a été ajouté, la feuille tressaute pour se faire remarquer :
     c'est la seule chose à faire sur cet écran, encore faut-il le voir. Dès
     qu'un ingrédient est choisi, l'animation s'arrête définitivement. */
  .ag-panneau:has(.ag-poignee.appel){animation:agAppel 2.6s ease-in-out infinite;}
  .ag-panneau.ouvert{animation:none !important;}
  @keyframes agAppel{
    0%, 72%, 100%{transform:translateY(0);}
    80%{transform:translateY(-8px);}
    88%{transform:translateY(-3px);}
  }
  @media(prefers-reduced-motion:reduce){ .ag-panneau{animation:none !important;} }
  /* Bouton de sortie : on referme quand on a fini, jamais avant. */
  .ag-fini{display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
    height:46px; margin:14px 0 4px; border:0; border-radius:999px; cursor:pointer;
    background:var(--sauge); color:#fff; font-family:'Fredoka',sans-serif;
    font-weight:600; font-size:0.9rem;}
  .ag-panneau.ouvert .ag-poignee .c{transform:rotate(180deg);}
  /* Repliée, seule la ligne des ingrédients dépasse ; dépliée, tout le panneau. */
  .ag-panneau-corps{overflow-y:auto; padding:0 16px calc(16px + env(safe-area-inset-bottom, 0px));
    max-height:0; opacity:0; transition:max-height .24s ease, opacity .18s ease;}
  .ag-panneau.ouvert .ag-panneau-corps{max-height:70vh; opacity:1;}
  /* Repliée, la poignée suffit : elle nomme déjà les ingrédients. Les afficher
     une seconde fois en pastilles juste en dessous faisait doublon et coûtait
     une ligne entière sur un écran où chaque ligne compte. */
  .ag-panneau .ag-chips{display:flex; flex-wrap:wrap; gap:7px;}
  .ag-panneau:not(.ouvert) .ag-panneau-corps{max-height:0; opacity:0; overflow:hidden; padding-bottom:0;}
  /* De la place sous les recettes pour ne pas passer derrière la feuille. */
  .ag-main{padding-bottom:104px;}
}

/* Grilles de vignettes : chaque colonne peut se réduire autant qu'il faut.
   Avec « 1fr », une colonne ne descend jamais sous la largeur minimale de son
   contenu — un seul élément un peu large suffit alors à faire déborder toute
   la grille, et sur téléphone on se retrouve avec une vignette géante et le
   reste hors de l'écran. « minmax(0,1fr) » rend ce débordement impossible. */
.cata-grille{grid-template-columns:repeat(4,minmax(0,1fr));}
@media(max-width:1000px){ .cata-grille{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media(max-width:700px){ .cata-grille{grid-template-columns:repeat(2,minmax(0,1fr));} }
.cata-grille > *{min-width:0;}
.ag-tuile{min-width:0;}
.ag-tuile .nom{overflow-wrap:anywhere;}
.ag-tuile .meta{flex-wrap:wrap;}

/* ============ Le bandeau du panier, remis d'aplomb ============ */
.cata-panier-tete{flex-wrap:wrap; align-items:baseline;}
.cata-panier-tete .t{display:inline-flex; align-items:baseline; gap:8px; white-space:nowrap;}
.cata-panier-tete .n{font-family:'Fredoka',sans-serif; font-weight:600; font-size:0.86rem;
  color:#fff; background:var(--sauge); border-radius:999px; padding:3px 11px; white-space:nowrap;}
.cata-panier-sous{margin:6px 0 0; font-size:0.83rem; color:#3f4a3a; line-height:1.45;}
.cata-panier-pied{display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; margin-top:10px;}
.cata-panier-actions{display:flex; align-items:center; gap:14px; flex-shrink:0;}
.cata-panier-actions a, #cata-panier-vider{font-size:0.82rem; font-weight:600; color:var(--sauge-dark);
  text-decoration:underline; background:none; border:none; cursor:pointer; font-family:inherit; padding:0;}
#cata-panier-vider{color:var(--ink-dim);}
@media(max-width:520px){
  .cata-panier-pied{flex-direction:column; align-items:flex-start; gap:8px;}
}

/* Un élément de grille refuse par défaut de descendre sous la largeur minimale
   de son contenu : sans ces min-width, la colonne principale du catalogue
   impose sa largeur à toute la page, et la grille de vignettes déborde de
   l'écran — c'est ce qui donnait une vignette géante sur téléphone. */
.cata-layout > *, .cata-main, .ag-layout > *, .ag-main{min-width:0;}
.cata-grille, .sm-grille, .sm-flux{max-width:100%;}
.cata-main .cata-barre{flex-wrap:wrap;}

/* Séparateur dans le menu de tri : au-dessous, ce ne sont plus des tris mais
   deux filtres, qui se décochent d'un second appui. */
.sm-tri-sep{display:block; margin:6px 12px 4px; padding-top:8px; border-top:1px solid var(--line);
  font-size:0.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-dim);}

/* ============ VERSIONS D'UNE RECETTE ============
   Trois pastilles rondes sous le titre, chacune montrant le schéma de son
   moule : un grand cercle, six moyens, vingt-quatre petits. Le dessin se
   calcule, donc il vaut pour n'importe quelle famille de recettes. */
.d-versions{padding:14px 20px 6px; text-align:center;}
.d-versions-titre{margin:0 0 10px; font-size:0.74rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-dim);}
.d-versions-liste{display:flex; gap:22px; justify-content:center;}
.d-version{display:flex; flex-direction:column; align-items:center; gap:5px; width:76px;
  border:none; background:none; padding:0; cursor:pointer; font-family:inherit; color:var(--ink-dim);}
.d-version .rond{width:54px; height:54px; border-radius:999px; background:#f4f1e8;
  box-shadow:inset 0 0 0 1px var(--line); display:grid; place-items:center;
  color:var(--sauge); transition:box-shadow .16s ease, background .16s ease;}
.d-version .rond svg{width:38px; height:38px; display:block;}
.d-version .nom{font-family:'Fredoka',sans-serif; font-weight:600; font-size:0.8rem; line-height:1.15;}
.d-version .rend{font-size:0.7rem; color:var(--ink-dim);}
.d-version:hover .rond{background:var(--sauge-light);}
.d-version.on{color:var(--ink); cursor:default;}
.d-version.on .rond{background:var(--sauge-light);
  box-shadow:0 0 0 3px var(--sauge), 0 4px 12px rgba(34,39,31,.14); color:var(--sauge-dark);}
.d-version:focus-visible .rond{outline:3px solid var(--safran); outline-offset:3px;}
@media(max-width:520px){
  .d-versions{padding:12px 16px 4px;}
  .d-versions-liste{gap:14px;}
  .d-version{width:auto; flex:0 1 96px;}
  .d-version .rond{width:50px; height:50px;}
  .d-version .rond svg{width:34px; height:34px;}
  .d-version .nom{font-size:0.76rem;}
}

/* « aussi en plat » : posée en haut à droite de la photo, à l'opposé du badge
   du panier, qui occupe le coin gauche. Fond blanc translucide pour rester
   lisible quelle que soit la photo. */
.sm-vis .sm-aussi{position:absolute; left:8px; top:8px; right:auto; z-index:3; max-width:calc(100% - 62px);
  overflow:hidden; text-overflow:ellipsis;
  background:rgba(255,255,255,.94); color:var(--sauge-dark);
  font-family:'Work Sans',sans-serif; font-size:0.66rem; font-weight:700;
  padding:4px 9px; border-radius:999px; white-space:nowrap; pointer-events:none;
  box-shadow:0 2px 6px rgba(34,39,31,.16);}

@media(max-width:520px){
  .sm-vis .sm-aussi{font-size:0.62rem; padding:3px 8px; left:6px; top:6px; max-width:calc(100% - 56px);}
}

/* Cartes de résultats plus basses sur téléphone : la photo était haute, le nom
   sur deux lignes et la durée et le prix l'un sous l'autre, ce qui faisait
   perdre beaucoup de hauteur pour trois informations. */
@media(max-width:700px){
  .sm-carte .sm-vis{padding-top:56%;}
  .sm-carte-corps{padding:8px 11px 10px;}
  .sm-carte .nom{font-size:0.86rem; line-height:1.2; margin:0 0 4px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
  /* La durée et le prix tiennent sur une seule ligne. */
  .sm-carte .meta{flex-wrap:nowrap; gap:9px; font-size:0.72rem; white-space:nowrap;}
  .sm-carte .meta span{overflow:hidden; text-overflow:ellipsis;}
  .sm-rang{gap:12px; padding-bottom:8px;}
}

/* Alcool dans une recette : mention sobre pour l'alcool cuit, plus marquée
   quand il ne l'est pas — un tiramisu à l'amaretto en contient autant qu'un
   verre. L'alternative sans alcool suit dans les deux cas. */
.d-alcool{margin:0 20px 4px; padding:12px 14px; border-radius:14px;
  background:var(--sauge-light); border:1px solid #d5e0cd;}
.d-alcool.fort{background:#fdf1e0; border-color:#f0d8b0;}
.d-alcool .t{margin:0; font-family:'Fredoka',sans-serif; font-weight:600; font-size:0.92rem;}
.d-alcool.fort .t{color:var(--safran-dark);}
.d-alcool-alt{margin:6px 0 0; font-size:0.85rem; line-height:1.5; color:var(--ink-dim);}
@media(max-width:520px){ .d-alcool{margin:0 16px 4px;} }

/* ============ MINUTEUR ============
   Plusieurs minuteurs peuvent tourner ensemble : chacun a sa carte, sa jauge et
   son étiquette d'étape. La pastille du menu montre celui qui sonnera le
   premier, et le nombre s'il y en a d'autres derrière. */
nav #timer-nav-btn .ic{display:block !important;}   /* un ancien correctif masquait toutes les icônes dessinées */
nav #timer-nav-btn{background-image:none;}
.mn-badge{position:absolute; right:-10px; top:-6px; background:var(--safran); color:#2b1c05;
  font-family:'Fredoka',sans-serif; font-weight:700; font-size:0.62rem; padding:2px 6px;
  border-radius:999px; box-shadow:0 2px 6px rgba(34,39,31,.22); pointer-events:none;}
.mn-badge.plusieurs::after{content:attr(data-nb); margin-left:4px; padding-left:4px;
  border-left:1px solid rgba(43,28,5,.35); font-size:0.9em;}
nav .nav-icon-btn.mn-actif{color:var(--safran-dark);}

.panel-minuteur{max-width:460px;}
.mn-liste{display:flex; flex-direction:column; gap:10px;}
.mn-carte{border:1px solid var(--line); border-radius:16px; padding:12px 14px; background:#fff;}
.mn-carte.court{border-color:var(--sauge); background:var(--sauge-light);}
.mn-carte.pause{opacity:.82;}
.mn-carte.fini{border-color:var(--safran); background:#fdf1e0;}
.mn-carte-tete{display:flex; align-items:center; gap:9px;}
.mn-num{font-family:'Fredoka',sans-serif; font-weight:600; font-size:0.84rem;}
.mn-lab{font-size:0.76rem; color:var(--ink-dim); background:#fff; border:1px solid var(--line);
  border-radius:999px; padding:2px 9px;}
.mn-x{margin-left:auto; border:none; background:none; cursor:pointer; color:var(--ink-dim);
  font-size:0.9rem; padding:2px 4px;}
.mn-x:hover{color:var(--tomate);}
.mn-chiffres{font-family:'Fredoka',sans-serif; font-weight:700; font-size:2.4rem; line-height:1.1;
  letter-spacing:.02em; text-align:center; margin:4px 0 6px;}
.mn-jauge{height:5px; border-radius:999px; background:rgba(34,39,31,.1); overflow:hidden;}
.mn-jauge i{display:block; height:100%; background:var(--sauge); transition:width .3s linear;}
.mn-carte.fini .mn-jauge i{background:var(--safran);}
.mn-carte-actions{display:flex; gap:8px; justify-content:center; margin-top:10px;}
.mn-btn{height:40px; padding:0 18px; border-radius:999px; border:none; cursor:pointer;
  background:var(--safran); color:#2b1c05; font-family:'Fredoka',sans-serif; font-weight:600; font-size:0.9rem;}
.mn-btn.gris{background:#fff; border:1.5px solid var(--line); color:var(--ink-dim);}
.mn-vide{margin:4px 0 0; text-align:center; font-size:0.86rem; color:var(--ink-dim);}
.mn-fini-bandeau{margin:0 0 10px; padding:10px; border-radius:12px; background:#fdf1e0;
  color:var(--safran-dark); font-family:'Fredoka',sans-serif; font-weight:600; text-align:center;}

.mn-nouveau{margin-top:16px; padding-top:14px; border-top:1px solid var(--line);}
.mn-nouveau .t, .mn-depuis .t{margin:0 0 8px; font-size:0.72rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-dim);}
.mn-presets{display:flex; flex-wrap:wrap; gap:7px;}
.mn-preset{height:38px; padding:0 14px; border-radius:999px; background:#f4f1e8;
  border:1px solid var(--line); font-family:inherit; font-size:0.82rem; font-weight:600;
  color:var(--ink-dim); cursor:pointer;}
.mn-preset:hover:not(:disabled){background:var(--sauge-light); border-color:var(--sauge); color:var(--sauge-dark);}
.mn-preset:disabled, .mn-etape:disabled{opacity:.45; cursor:not-allowed;}
.mn-ecran{display:flex; align-items:center; gap:12px; margin-top:16px; padding-top:14px;
  border-top:1px solid var(--line); font-size:0.88rem;}
.mn-ecran span{flex:1;}
.mn-ecran small{display:block; font-size:0.76rem; color:var(--ink-dim);}
.mn-ecran input{width:22px; height:22px; accent-color:var(--sauge);}
.mn-note{margin:10px 0 0; font-size:0.8rem; color:var(--ink-dim); line-height:1.45;}
.mn-depuis{margin-top:16px; padding-top:14px; border-top:1px solid var(--line);}
.mn-etape{display:flex; align-items:center; gap:10px; width:100%; margin-bottom:7px;
  padding:9px 11px; border-radius:12px; border:1px solid var(--line); background:#fff;
  font-family:inherit; font-size:0.82rem; text-align:left; cursor:pointer;}
.mn-etape:hover:not(:disabled){border-color:var(--sauge); background:var(--sauge-light);}
.mn-etape .n{flex:none; width:22px; height:22px; border-radius:999px; background:var(--sauge-light);
  color:var(--sauge-dark); font-weight:700; font-size:0.72rem; display:grid; place-items:center;}
.mn-etape .tx{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-dim);}
.mn-etape .d{flex:none; font-family:'Fredoka',sans-serif; font-weight:600; color:var(--sauge-dark);}

/* Le minuteur n'est plus une pastille ajoutée en bout de phrase : c'est la
   durée elle-même, soulignée, qu'on touche pour la lancer. */
.etape-mn{display:inline; padding:1px 2px; margin:0 -2px; border:none; border-radius:5px;
  background:none; color:inherit; font:inherit; cursor:pointer;
  border-bottom:2px solid var(--sauge); box-shadow:inset 0 -2px 0 rgba(93,125,86,.14);
  transition:background .14s ease, color .14s ease;}
.etape-mn::before{content:'⏱'; font-size:0.78em; margin-right:4px; opacity:.75;}
.etape-mn:hover{background:var(--sauge-light); color:var(--sauge-dark);}
.etape-mn.lance{background:var(--sauge); color:#fff; border-bottom-color:var(--sauge-dark);}
.etape-mn:hover{background:var(--sauge-light); border-color:var(--sauge);}
.etape-mn.lance{background:var(--safran); color:#2b1c05; border-color:var(--safran);}
@media(max-width:520px){ .mn-chiffres{font-size:2.1rem;} }

/* ============ ACCÈS AU MINUTEUR DEPUIS LA FICHE ============
   Téléphone : une bande dans le flux, entre les ingrédients et les étapes.
   Ordinateur : une languette verticale à l'extérieur de la fiche, à gauche.
   Ni l'une ni l'autre ne recouvre le texte. */
.mn-barre{margin:4px 20px 18px;}
.mn-barre-btn{display:flex; align-items:center; gap:10px; width:100%; padding:11px 14px;
  border:1px solid var(--line); border-radius:14px; background:#fff; cursor:pointer;
  font-family:inherit; text-align:left; color:var(--ink);}
.mn-barre-btn .ico{font-size:1.05rem;}
.mn-barre-btn .lbl{font-family:'Fredoka',sans-serif; font-weight:600; font-size:0.92rem;}
.mn-barre-btn .chiffre{font-family:'Fredoka',sans-serif; font-weight:700; font-size:1.05rem; color:var(--sauge-dark);}
.mn-barre-btn .note{font-size:0.74rem; color:var(--ink-dim);}
.mn-barre-btn .fl{margin-left:auto; color:var(--ink-dim);}
.mn-barre.court .mn-barre-btn{border-color:var(--sauge); background:var(--sauge-light);}
.mn-barre.sonne .mn-barre-btn{border-color:var(--safran); background:#fdf1e0;}
.mn-barre.sonne .chiffre{color:var(--safran-dark);}

/* Position calée sur la fiche : elle occupe au plus 640 px à droite, donc la
   languette se pose à 640 px du bord droit, ou contre le bord gauche si la
   fenêtre est plus étroite. Aucun calcul, donc aucun saut à l'ouverture. */
.mn-lat{position:fixed; top:50%; transform:translateY(-50%); width:36px; z-index:57;
  right:min(640px, 100vw); left:auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  padding:16px 0; border:none; border-radius:14px 0 0 14px; cursor:pointer;
  background:#fffdf7; color:var(--sauge-dark); box-shadow:-3px 0 16px rgba(34,39,31,.16);
  border:1px solid var(--line); border-right:none;
  font-family:inherit; transition:background .16s ease, color .16s ease;}
.mn-lat:hover{background:#fff; color:var(--sauge);}
.mn-lat[hidden]{display:none;}
.mn-lat .ico{font-size:0.95rem;}
/* les lettres se lisent de haut en bas, droites, une par ligne */
.mn-lat .mot{writing-mode:vertical-rl; text-orientation:upright; letter-spacing:.14em;
  font-family:'Fredoka',sans-serif; font-weight:600; font-size:0.8rem;}
.mn-lat .chiffre{writing-mode:vertical-rl; text-orientation:upright; letter-spacing:.08em;
  font-family:'Fredoka',sans-serif; font-weight:700; font-size:0.86rem; color:var(--safran);}
.mn-lat.court{border-color:var(--sauge);}
/* Elle sonne : la languette bat entre l'orange et le blanc. Un signal qu'on
   attrape du coin de l'œil, sans texte à lire de travers. */
.mn-lat.sonne{animation:mnBat 1s steps(1, end) infinite; border-color:var(--safran);}
@keyframes mnBat{
  0%, 49%{background:var(--safran); color:#2b1c05;}
  50%, 100%{background:#fff; color:var(--safran-dark);}
}
@media(max-width:820px){ .mn-lat{display:none !important;} }
@media(min-width:821px){ .mn-barre{display:none;} }

/* ============ CHOIX DE LA SONNERIE ============ */
.mn-sonneries{margin-top:14px; padding-top:12px; border-top:1px solid var(--line);}
.mn-sonneries .t{margin:0 0 8px; font-size:0.72rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-dim);}
.mn-sonneries .aide{font-weight:400; letter-spacing:0; text-transform:none; opacity:.85;}
.mn-son-liste{display:flex; flex-wrap:wrap; gap:7px;}
.mn-son{display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 12px;
  border-radius:999px; border:1px solid var(--line); background:#fff; cursor:pointer;
  font-family:inherit; font-size:0.78rem; color:var(--ink-dim);}
.mn-son:hover{border-color:var(--sauge); background:var(--sauge-light);}
.mn-son.on{border-color:var(--sauge); background:var(--sauge-light); color:var(--sauge-dark); font-weight:700;}
.mn-son .e{font-size:0.95rem;}
.mn-stop{margin-left:10px; height:28px; padding:0 12px; border-radius:999px; border:none;
  background:var(--ink); color:#fff; font-family:inherit; font-size:0.74rem; font-weight:600; cursor:pointer;}


/* ============ LE MINUTEUR OUVERT DEPUIS UNE FICHE ============
   Il se déplie dans le prolongement de la languette, contre le bord gauche de
   la recette, au lieu de s'afficher au centre — donc derrière elle. */
#timer-overlay{z-index:62;}
/* Pas de voile et aucun clic capturé en dehors du panneau : la recette reste
   lisible et défilante tant qu'on n'a pas fermé le minuteur soi-même. */
#timer-overlay.depuis-fiche{justify-content:flex-end; align-items:center; padding:0;
  background:none; pointer-events:none;}
#timer-overlay.depuis-fiche .panel{pointer-events:auto;}
#timer-overlay.depuis-fiche .panel-minuteur{
  /* aligné sur le menu de partage : à gauche des pastilles, pas collé à la fiche */
  margin-right:calc(min(640px, 100vw) + 72px);
  max-height:88vh; width:400px; max-width:calc(100vw - 40px);
  border-radius:18px;                 /* il flotte à côté de la fiche : arrondi partout */
  box-shadow:-14px 0 44px rgba(34,39,31,.28);
  animation:mnDeplie .2s ease;}
@keyframes mnDeplie{ from{opacity:0; transform:translateX(26px);} }
@media(max-width:820px){
  /* Le panneau s'arrête au-dessus de la barre du rail, comme les autres menus :
     il la recouvrait, alors qu'elle doit rester atteignable. */
  #timer-overlay.depuis-fiche{justify-content:center; align-items:flex-end; padding:0;}
  #timer-overlay.depuis-fiche .panel-minuteur{margin:0 0 calc(60px + env(safe-area-inset-bottom, 0px));
    width:100%; max-width:none; max-height:calc(100vh - 140px);
    border-radius:20px 20px 0 0; box-shadow:0 -10px 30px rgba(34,39,31,.22);}
}


/* ============ LE PANNEAU DU MINUTEUR ============
   Une ligne par minuteur, comme un réveil : commande à gauche, temps, origine,
   trait de progression. La création se fait dans un bandeau sombre, seul point
   de contraste de l'écran. */
.panel-minuteur{background:var(--bg); padding:0 0 18px;}
.panel-minuteur .panel-head{position:sticky; top:0; z-index:2; margin:0; padding:16px 20px 10px;
  background:linear-gradient(var(--bg) 74%, rgba(250,248,243,0));}
.panel-minuteur .panel-head h2{font-size:1.05rem;}
#timer-body{padding:0 20px;}

.mn-liste{display:block;}
.mn-ligne{display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid #eee7d8;}
.mn-ligne .cmd{flex:none; width:38px; height:38px; border-radius:999px; cursor:pointer;
  background:#f4f1e8; border:1px solid var(--line); font-size:0.9rem; color:var(--ink-dim);}
.mn-ligne.court .cmd{background:var(--sauge-light); border-color:var(--sauge); color:var(--sauge-dark);}
.mn-ligne.fini .cmd{background:#fdf1e0; border-color:var(--safran); color:var(--safran-dark);}
.mn-ligne .corps{flex:1; min-width:0;}
.mn-ligne .mn-chiffres{display:block; font-family:'Fredoka',sans-serif; font-weight:700;
  font-size:1.4rem; line-height:1.1; font-variant-numeric:tabular-nums; letter-spacing:-.01em;}
.mn-ligne.fini .mn-chiffres{color:var(--safran-dark);}
.mn-ligne .lab{display:block; font-size:0.7rem; color:#9aa08f; margin-top:1px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.mn-ligne .jauge{display:block; height:3px; border-radius:999px; background:#eee7d8; margin-top:7px; overflow:hidden;}
.mn-ligne .jauge i{display:block; height:100%; background:var(--sauge); transition:width .3s linear;}
.mn-ligne.pause .jauge i{background:#c9cbbe;}
.mn-ligne.fini .jauge i{background:var(--safran);}
.mn-ligne .x{flex:none; border:none; background:none; cursor:pointer; color:#b9bdae; font-size:0.85rem; padding:4px;}
.mn-ligne .x:hover{color:var(--tomate);}
.mn-vide{padding:20px 0 6px; text-align:center; font-size:0.86rem; color:#9aa08f;}
.mn-fini-bandeau{margin:0 0 12px; padding:12px; border-radius:16px; background:#fdf1e0;
  color:var(--safran-dark); font-family:'Fredoka',sans-serif; font-weight:600; text-align:center; font-size:0.95rem;}
.mn-stop{margin-left:10px; height:28px; padding:0 12px; border-radius:999px; border:none;
  background:var(--ink); color:#fff; font-family:inherit; font-size:0.74rem; font-weight:600; cursor:pointer;}

/* le bandeau de création */
.mn-nouveau{margin-top:16px;}
.mn-nouveau .t{margin:0 0 8px; font-size:0.68rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:#9aa08f;}
.mn-saisie{display:flex; align-items:center; gap:4px; background:#fff;
  border:1px solid var(--line); border-radius:16px; padding:8px 12px;}
.mn-saisie .sep{font-family:'Fredoka',sans-serif; font-weight:700; font-size:1.2rem;
  color:#c9cbbe; margin:0 2px;}
.mn-saisie .champ{display:inline-flex; flex-direction:column; align-items:center;}
.mn-saisie input{width:44px; border:none; background:none; color:var(--ink); text-align:center;
  font-family:'Fredoka',sans-serif; font-weight:700; font-size:1.5rem; line-height:1.1;
  padding:0; font-variant-numeric:tabular-nums;}
.mn-saisie input:focus{outline:none; color:var(--sauge-dark);}
/* Flèches maison : deux chevrons fins, visibles sans être encombrants. */
.mn-saisie .fl{width:28px; height:16px; border:none; background:none; cursor:pointer;
  color:#c2c6b6; font-size:0.78rem; line-height:1; padding:0; transition:color .14s ease;}
.mn-saisie .fl:hover:not(:disabled){color:var(--sauge);}
.mn-saisie .fl:disabled{opacity:.4; cursor:not-allowed;}
.mn-saisie .mn-btn{margin-left:auto; height:36px; padding:0 20px; border-radius:999px; border:none;
  cursor:pointer; background:var(--safran); color:#2b1c05; font-family:'Fredoka',sans-serif;
  font-weight:600; font-size:0.86rem;}
.mn-presets{display:flex; flex-wrap:wrap; gap:6px; margin-top:9px;}
.mn-preset{height:32px; padding:0 12px; border-radius:11px; background:#fff;
  border:1px solid var(--line); font-family:inherit; font-size:0.78rem; font-weight:600;
  color:var(--ink-dim); cursor:pointer;}
.mn-preset:hover:not(:disabled){border-color:var(--sauge); background:var(--sauge-light); color:var(--sauge-dark);}
.mn-preset:disabled, .mn-etape:disabled{opacity:.45; cursor:not-allowed;}

/* écran allumé, sonneries, étapes */
.mn-ecran{display:flex; align-items:center; gap:12px; margin-top:18px; padding:13px 14px;
  background:#fff; border:1px solid var(--line); border-radius:16px; font-size:0.84rem;}
.mn-ecran span{flex:1;}
.mn-ecran small{display:block; font-size:0.72rem; color:#9aa08f;}
.mn-ecran input{width:20px; height:20px; accent-color:var(--sauge);}
.mn-note{margin:10px 0 0; font-size:0.78rem; color:#9aa08f; line-height:1.45;}
.mn-sonneries, .mn-depuis{margin-top:18px;}
.mn-sonneries .t, .mn-depuis .t{margin:0 0 8px; font-size:0.68rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:#9aa08f;}
.mn-sonneries .aide{font-weight:400; letter-spacing:0; text-transform:none;}
.mn-son-liste{display:flex; flex-wrap:wrap; gap:6px;}
.mn-son{display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px;
  border-radius:11px; border:1px solid var(--line); background:#fff; cursor:pointer;
  font-family:inherit; font-size:0.76rem; color:var(--ink-dim);}
.mn-son:hover{border-color:var(--sauge); background:var(--sauge-light);}
.mn-son.on{border-color:var(--sauge); background:var(--sauge-light); color:var(--sauge-dark); font-weight:700;}
.mn-etape{display:flex; align-items:center; gap:10px; width:100%; margin-bottom:6px;
  padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:#fff;
  font-family:inherit; font-size:0.78rem; text-align:left; cursor:pointer;}
.mn-etape:hover:not(:disabled){border-color:var(--sauge); background:var(--sauge-light);}
.mn-etape .n{flex:none; width:20px; height:20px; border-radius:999px; background:var(--sauge-light);
  color:var(--sauge-dark); font-weight:700; font-size:0.66rem; display:grid; place-items:center;}
.mn-etape .tx{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#9aa08f;}
.mn-etape .d{flex:none; font-family:'Fredoka',sans-serif; font-weight:600; color:var(--sauge-dark);}

/* ============ PASTILLE VOLANTE DU MINUTEUR ============
   Coin haut gauche sur ordinateur, bas gauche sur téléphone. Au repos elle ne
   montre que son réveil ; le détail vient au survol, l'appui ouvre le panneau.
   Elle s'efface derrière les fiches recette, où la languette prend le relais. */
.mn-volante{position:fixed; left:18px; top:calc(18px + env(safe-area-inset-top, 0px)); z-index:58;}
.mn-volante[hidden]{display:none;}
.mn-volante-btn{position:relative; display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; padding:0; border:none; border-radius:999px; cursor:pointer;
  background:var(--ink); color:#fff; box-shadow:0 8px 24px rgba(34,39,31,.32);
  font-family:'Work Sans',sans-serif; transition:transform .15s ease;}
.mn-volante-btn:hover{transform:scale(1.04);}
.mn-volante-btn .ic{font-size:1.25rem; display:block; animation:mnTressaille 60s linear infinite;}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.mn-volante-btn .nb{position:absolute; right:-4px; top:-4px; background:var(--safran); color:#2b1c05;
  font-family:'Fredoka',sans-serif; font-size:0.62rem; font-weight:700; min-width:18px;
  padding:1px 5px; border-radius:999px;}
.mn-volante.sonne .mn-volante-btn{background:var(--safran); color:#2b1c05;
  animation:mnPulse 1.1s ease-in-out infinite;}
@keyframes mnPulse{50%{transform:scale(1.06);}}
/* un tressaillement d'une demi-seconde, une fois par minute */
@keyframes mnTressaille{
  0%, 97%, 100%{transform:rotate(0);}
  97.6%{transform:rotate(-14deg);} 98.2%{transform:rotate(12deg);}
  98.8%{transform:rotate(-8deg);}  99.4%{transform:rotate(5deg);}
}
.mn-volante-detail{position:absolute; left:0; top:calc(100% + 8px); width:250px;
  background:#fff; border-radius:16px; box-shadow:0 14px 40px rgba(34,39,31,.24);
  padding:10px 14px 12px; opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;}
@media(hover:hover){ .mn-volante:hover .mn-volante-detail{opacity:1; visibility:visible; transform:none;} }
.mn-v-ligne{display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid var(--line);}
.mn-v-ligne:last-of-type{border-bottom:none;}
.mn-v-ligne .e{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:0.74rem; color:var(--ink-dim);}
.mn-v-ligne .mn-chiffres{font-family:'Fredoka',sans-serif; font-weight:700; font-size:1rem;}
.mn-v-ligne.pause{opacity:.6;}
.mn-v-ligne.fini .mn-chiffres{color:var(--safran-dark);}
.mn-v-note{margin:8px 0 0; font-size:0.68rem; color:var(--ink-dim);}
body.overlay-lock .mn-volante{opacity:0; pointer-events:none;}
@media(max-width:820px){
  .mn-volante{left:14px; top:auto; bottom:calc(18px + env(safe-area-inset-bottom, 0px));}
  .mn-volante-detail{top:auto; bottom:calc(100% + 8px); transform:translateY(6px);}
  .mn-volante-btn{width:44px; height:44px;}
}

/* ============ EN-TÊTE DE FICHE : PHOTO NUE + CARTE ============
   La photo ne porte plus que son titre, la loupe et la croix. Tout le reste
   descend dans une carte blanche qui mord de 24 px sur le bas de l'image —
   jamais sur le titre, jamais sur la description qui suit. */
/* La photo est en position absolue dans sa boîte : sans hauteur déclarée, la
   boîte se réduisait à zéro et l'image disparaissait complètement. */
#detail-panel-body .detail-hero{margin-bottom:0; border-radius:0; height:240px;}
@media(max-width:820px){ #detail-panel-body .detail-hero{height:190px;} }
#detail-panel-body .hero-titre{position:absolute; left:0; right:0; top:50%; transform:translateY(-60%); z-index:3;
  margin:0; padding:0 56px; text-align:center; color:#fff; font-family:'Fredoka',sans-serif;
  font-weight:600; font-size:clamp(1.15rem, 4.4vw, 1.5rem); line-height:1.2;
  text-shadow:0 2px 16px rgba(0,0,0,.5);}
.hero-rond{position:absolute; top:12px; z-index:4; width:34px; height:34px; border:none;
  border-radius:999px; cursor:pointer; display:grid; place-items:center;
  background:rgba(255,255,255,.92); color:var(--ink); box-shadow:0 2px 10px rgba(0,0,0,.18);}
.hero-rond.gauche{left:12px;}
.hero-rond svg{width:17px; height:17px;}

.fiche-carte{position:relative; z-index:3; margin:-24px 16px 0; padding:15px 16px 14px;
  background:#fff; border:1px solid var(--line); border-radius:20px;
  box-shadow:0 8px 26px rgba(34,39,31,.10); text-align:center;}
.fc-meta{display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px;
  font-size:0.8rem; color:var(--ink-dim);}
.fc-meta .badge-18{background:#fdf1e0; color:var(--safran-dark); border-radius:999px;
  padding:1px 9px; font-weight:700;}
.fc-trait{height:1px; background:#f0ebdd; margin:13px 0;}
.fc-avis{display:flex; gap:8px;}
.fc-btn{position:relative; flex:1; display:inline-flex; align-items:center; justify-content:center;
  gap:7px; height:38px; padding:0 12px; border-radius:999px; cursor:pointer;
  background:var(--bg); border:1px solid var(--line); font-family:inherit;
  font-size:0.8rem; font-weight:600; color:var(--ink-dim);}
.fc-btn .emo{font-size:0.95rem;}
.fc-btn .ic-img{width:17px; height:17px; background-size:contain; background-repeat:no-repeat;}
.fc-btn:hover{border-color:var(--sauge); background:var(--sauge-light); color:var(--sauge-dark);}
.fc-btn.active{border-color:var(--sauge); background:var(--sauge-light); color:var(--sauge-dark);}
.fc-btn.down.active{border-color:var(--tomate); background:#fdeceb; color:var(--tomate);}
/* Bulle maison, pas l'infobulle du navigateur : elle apparaît tout de suite et
   suit la charte. */
.fc-btn::after{content:attr(data-bulle); position:absolute; bottom:calc(100% + 8px); left:50%;
  transform:translateX(-50%) translateY(4px); white-space:nowrap; background:var(--ink);
  color:#fff; font-size:0.7rem; font-weight:600; padding:5px 10px; border-radius:8px;
  opacity:0; pointer-events:none; transition:opacity .14s ease, transform .14s ease;}
@media(hover:hover){ .fc-btn:hover::after{opacity:1; transform:translateX(-50%);} }
#detail-panel-body .detail-chapo{margin-top:16px;}

/* Sur téléphone, les trois boutons d'avis se réduisent à leurs icônes. */
@media(max-width:820px){
  .fiche-carte{margin:-24px 12px 0;}
  .fc-btn .mot{display:none;}
  .fc-btn{flex:1; height:40px;}
  .fc-btn .emo{font-size:1.15rem;}
  .fc-btn .ic-img{width:20px; height:20px;}
}

/* ============ RAIL DE LA FICHE : MINUTEUR ET PARTAGE ============ */
.fiche-rail{position:fixed; left:auto; right:min(640px, 100vw); top:50%;
  transform:translateY(-50%); z-index:57;}
.fiche-rail[hidden]{display:none;}
.rail-pastilles{display:flex; flex-direction:column; gap:11px; margin-right:14px;}
/* Un vert plus clair et plus doux que le sauge foncé des titres. */
.rail-ic{position:relative; width:44px; height:44px; border-radius:999px; cursor:pointer;
  display:grid; place-items:center; background:#fff; border:1px solid var(--line);
  color:#86a87c; box-shadow:0 4px 16px rgba(34,39,31,.16);
  transition:background .14s ease, color .14s ease, transform .14s ease;}
.rail-ic:hover{color:var(--sauge);}
.rail-ic:hover{transform:scale(1.05);}
.rail-ic.on{background:var(--sauge); border-color:var(--sauge); color:#fff;}
.rail-ic.on:hover{color:#fff;}
.rail-ic.mn.court{border-color:var(--sauge);}
.rail-ic .ic-img{width:28px; height:28px; background-size:contain; background-repeat:no-repeat;
  background-position:center;}
.rail-ic.on .ic-img{filter:brightness(0) invert(1);}
.rail-ic .rail-tps{position:absolute; top:-7px; right:-12px; background:var(--ink); color:#fff;
  font-family:'Fredoka',sans-serif; font-weight:700; font-size:0.6rem; padding:2px 6px;
  border-radius:999px; letter-spacing:.02em;}
/* Le minuteur a sonné : la pastille bat jusqu'à ce qu'on la coupe. */
.rail-ic.mn.sonne{animation:railBat 1s steps(1, end) infinite; border-color:var(--safran);}
@keyframes railBat{
  0%, 49%{background:var(--safran); color:#2b1c05;}
  50%, 100%{background:#fff; color:var(--safran-dark);}
}
.rail-menu{position:absolute; right:72px; top:50%; transform:translateY(-50%); width:184px;
  background:#fff; border:1px solid var(--line); border-radius:18px; padding:8px;
  box-shadow:0 14px 40px rgba(34,39,31,.2); animation:railOuvre .16s ease;}
@keyframes railOuvre{ from{opacity:0; transform:translateY(-50%) translateX(8px);} }
.rail-menu .t{margin:2px 0 6px; padding:0 10px; font-size:0.66rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:#9aa08f;}
.rail-lien{display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px;
  border:none; border-radius:12px; background:none; cursor:pointer; color:var(--ink);
  font-family:inherit; font-size:0.8rem; text-align:left; text-decoration:none;}
.rail-lien:hover{background:var(--sauge-light); color:var(--sauge-dark);}
.rail-lien.fait{color:var(--sauge-dark); font-weight:700;}

@media(max-width:820px){
  .fiche-rail{left:0; right:0; top:auto; bottom:0; transform:none; background:#fff;
    border-top:1px solid var(--line); padding:8px 0 calc(8px + env(safe-area-inset-bottom, 0px));
    box-shadow:0 -6px 20px rgba(34,39,31,.08);}
  .rail-pastilles{flex-direction:row; justify-content:center; gap:28px; margin:0;}
  .rail-ic{box-shadow:none; background:var(--bg);}
  .rail-menu{position:fixed; right:0; left:0; bottom:60px; top:auto; transform:none; width:auto;
    border-radius:20px 20px 0 0; padding:12px 14px calc(14px + env(safe-area-inset-bottom, 0px));
    animation:railMonte .18s ease;}
  @keyframes railMonte{ from{opacity:0; transform:translateY(14px);} }
  .rail-lien{padding:12px 10px; font-size:0.86rem; border-bottom:1px solid #f3eee1;}
  .rail-lien:last-child{border-bottom:none;}
  #detail-panel-body{padding-bottom:72px;}
}

/* Le fond s'efface derrière la fiche : voile léger plutôt qu'un décor chargé. */
#detail-overlay{background:rgba(34,39,31,.46); backdrop-filter:blur(2px);}

/* ---- le menu des restes ---- */
.rail-menu.gaspi{width:290px; padding:14px;}
.rg-tete{display:flex; align-items:flex-start; gap:10px; margin-bottom:12px;}
.rg-tete .ic-img{flex:none; width:26px; height:26px; background-size:contain;
  background-repeat:no-repeat; background-position:center; margin-top:1px;}
.rg-tete b{display:block; font-family:'Fredoka',sans-serif; font-weight:600; font-size:0.94rem;}
.rg-tete small{display:block; margin-top:2px; font-size:0.74rem; color:var(--ink-dim); line-height:1.4;}
.rg-puces{display:flex; flex-wrap:wrap; gap:6px; max-height:210px; overflow-y:auto; padding-bottom:2px;}
.rg-puces .reste-puce{font-size:0.78rem; padding:6px 11px; border-width:1px;}
.rg-go{display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  margin-top:13px; height:42px; border:0; border-radius:999px; cursor:pointer;
  background:var(--sauge); color:#fff; font-family:'Fredoka',sans-serif; font-weight:600;
  font-size:0.86rem; transition:background .15s ease;}
.rg-go:hover:not(:disabled){background:var(--sauge-dark);}
.rg-go:disabled{background:#eceadf; color:#a9ae9d; cursor:default;}
.rg-go .fl{font-size:1rem;}
@media(max-width:820px){
  .rail-menu.gaspi{width:auto;}
  .rg-puces{max-height:34vh;}
}


/* Bulles des pastilles : maison, pas l'infobulle du navigateur. À gauche de la
   pastille sur ordinateur, au-dessus dans la barre basse du téléphone. */
.rail-ic::after{content:attr(data-bulle); position:absolute; right:calc(100% + 10px); top:50%;
  transform:translateY(-50%) translateX(4px); white-space:nowrap; background:var(--ink);
  color:#fff; font-size:0.7rem; font-weight:600; padding:5px 10px; border-radius:8px;
  opacity:0; pointer-events:none; transition:opacity .14s ease, transform .14s ease; z-index:3;}
@media(hover:hover){ .rail-ic:hover::after{opacity:1; transform:translateY(-50%);} }
@media(max-width:820px){
  .rail-ic::after{right:auto; left:50%; top:auto; bottom:calc(100% + 8px);
    transform:translateX(-50%) translateY(4px);}
  @media(hover:hover){ .rail-ic:hover::after{transform:translateX(-50%);} }
}

/* ============ SIGNALER UN PROBLÈME ============ */
.rail-menu.signal{width:300px; padding:15px;}
.sg-titre{margin:0 0 3px; font-family:'Fredoka',sans-serif; font-weight:600; font-size:0.95rem;}
.sg-note{margin:0 0 11px; font-size:0.72rem; color:var(--ink-dim); line-height:1.45;}
.sg-choix{display:flex; flex-direction:column; gap:5px; margin-bottom:11px;}
.sg-ligne{display:flex; align-items:center; gap:9px; width:100%; padding:9px 11px;
  border:1px solid var(--line); border-radius:12px; background:#fff; cursor:pointer;
  font-family:inherit; font-size:0.78rem; text-align:left; color:var(--ink);}
.sg-ligne:hover{border-color:var(--sauge); background:var(--sauge-light);}
.sg-ligne.on{border-color:var(--sauge); background:var(--sauge-light); color:var(--sauge-dark); font-weight:600;}
.sg-ligne .e{font-size:0.95rem;}
.sg-pied{display:flex; align-items:center; justify-content:space-between; gap:8px; margin:6px 2px 0;}
.sg-avert{font-weight:600; font-size:0.68rem; padding:3px 10px; border-radius:999px;
  background:#fdf1e0; color:var(--safran-dark); line-height:1.35;}
.sg-avert[hidden]{display:none;}
.sg-zone.alerte{border-color:var(--safran); background:#fffcf6;}
.sg-cpt{font-size:0.66rem; color:#9aa08f;}
.sg-ligne .court{display:none;}
.sg-zone, .sg-mail{width:100%; box-sizing:border-box; border:1px solid var(--line);
  border-radius:12px; background:#fff; padding:9px 11px; font-family:inherit;
  font-size:0.78rem; color:var(--ink); resize:vertical;}
.sg-zone:focus, .sg-mail:focus{outline:none; border-color:var(--sauge);}
.sg-mail{margin-top:6px; height:38px; resize:none;}
.sg-piege{position:absolute; left:-9999px; width:1px; height:1px; opacity:0;}
.sg-envoi{display:flex; align-items:center; justify-content:center; width:100%; height:42px;
  margin-top:11px; border:0; border-radius:999px; cursor:pointer; background:var(--sauge);
  color:#fff; font-family:'Fredoka',sans-serif; font-weight:600; font-size:0.84rem;
  transition:background .15s ease;}
.sg-envoi:hover:not(:disabled){background:var(--sauge-dark);}
.sg-envoi:disabled{background:#eceadf; color:#a9ae9d; cursor:default;}
.sg-erreur{margin:9px 0 0; font-size:0.74rem; color:var(--tomate); line-height:1.4;}
/* le remerciement remplace le formulaire, la pop-up reste ouverte */
.sg-merci{text-align:center; padding:8px 4px 4px;}
.sg-merci .rond{display:grid; place-items:center; width:46px; height:46px; margin:0 auto 10px;
  border-radius:999px; background:var(--sauge-light); color:var(--sauge-dark); font-size:1.35rem;}
.sg-merci .t{margin:0 0 5px; font-family:'Fredoka',sans-serif; font-weight:600; font-size:1rem;}
.sg-merci .x{margin:0 0 14px; font-size:0.76rem; color:var(--ink-dim); line-height:1.5;}
/* Sur téléphone, les six choix deviennent des puces sur deux rangées : la liste
   verticale remplissait l'écran avant même d'arriver au champ de saisie. */
@media(max-width:820px){
  .rail-menu.signal{width:auto;}
  .sg-choix{flex-direction:row; flex-wrap:wrap; gap:6px;}
  .sg-ligne{width:auto; flex:0 0 auto; gap:6px; height:34px; padding:0 12px;
    border-radius:999px; font-size:0.76rem;}
  .sg-ligne .long{display:none;}
  .sg-ligne .court{display:inline;}
}
/* Le bouton de sortie n'existe que sur téléphone : sur ordinateur, le panneau
   n'est jamais replié. */
@media(min-width:821px){ .ag-fini{display:none;} }

/* ============ FILTRES EN MENU DÉROULANT (téléphone) ============
   Sur ordinateur, les pastilles tiennent et montrent tout : on les garde.
   Sur téléphone, elles défilaient horizontalement — on ne voyait ni ce qui
   existait, ni où l'on en était. Le menu dit les deux d'un coup. */
.filtre-menu{display:none;}
@media(max-width:820px){
  .cata-types, .ag-onglets{display:none !important;}   /* remplacés par le menu */
  .filtre-menu{display:block; position:relative; margin:0 0 14px;}
  .fm-tete{display:flex; align-items:center; gap:9px; width:100%; height:46px;
    padding:0 16px; border:1px solid var(--sauge); border-radius:999px; cursor:pointer;
    background:var(--sauge); color:#fff; font-family:'Fredoka',sans-serif;
    font-weight:600; font-size:0.95rem;}
  .fm-tete .v{flex:1; text-align:left;}
  .fm-tete .n{opacity:.85; font-size:0.84rem;}
  .fm-tete .fl{font-size:0.8rem; transition:transform .18s ease;}
  .filtre-menu.ouvert .fm-tete .fl{transform:rotate(180deg);}
  .fm-liste{position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:40;
    background:#fff; border:1px solid var(--line); border-radius:16px; padding:6px;
    box-shadow:0 14px 36px rgba(34,39,31,.18); max-height:62vh; overflow-y:auto;
    animation:fmOuvre .16s ease;}
  @keyframes fmOuvre{ from{opacity:0; transform:translateY(-6px);} }
  .fm-ligne{display:flex; align-items:center; justify-content:space-between; gap:10px;
    width:100%; padding:11px 12px; border:none; border-radius:12px; background:none;
    cursor:pointer; font-family:inherit; font-size:0.88rem; color:var(--ink); text-align:left;}
  .fm-ligne .n{color:#9aa08f; font-size:0.8rem;}
  .fm-ligne:hover{background:var(--bg);}
  .fm-ligne.on{background:var(--sauge-light); color:var(--sauge-dark); font-weight:700;}
  .fm-ligne.on .n{color:var(--sauge-dark);}
}

/* ============ ANTI-GASPI : L'AMPOULE DE CONSERVATION ============
   Sur ordinateur, la rangée de boutons « Nos conseils sur… » reste affichée.
   Sur téléphone, elle disparaît au profit d'une ampoule posée à droite du menu
   des moments : trois boutons empilés coûtaient un tiers de l'écran. */
.ag-rangee-filtres{display:contents;}
.ag-ampoule, .ag-ampoule-menu{display:none;}
@media(max-width:820px){
  .ag-fiches{display:none;}
  .ag-intro.efface{display:none;}          /* l'accroche a servi, elle s'efface */
  .ag-rangee-filtres{display:flex; align-items:center; gap:8px; position:relative; margin-bottom:14px;}
  .ag-rangee-filtres .filtre-menu{flex:1; margin:0;}
  .ag-ampoule{display:grid; place-items:center; flex:none; width:46px; height:46px;
    border-radius:999px; cursor:pointer; background:#fdf1e0; border:1px solid #f0dcb8;
    font-size:1.1rem; position:relative;}
  .ag-ampoule.on{background:var(--safran); border-color:var(--safran);}
  .ag-ampoule::after{content:attr(data-bulle); position:absolute; right:calc(100% + 8px); top:50%;
    transform:translateY(-50%) translateX(4px); white-space:nowrap; background:var(--ink);
    color:#fff; font-size:0.7rem; font-weight:600; padding:5px 10px; border-radius:8px;
    opacity:0; pointer-events:none; transition:opacity .14s ease, transform .14s ease; z-index:5;}
  @media(hover:hover){ .ag-ampoule:hover::after{opacity:1; transform:translateY(-50%);} }
  .ag-ampoule-menu{display:block; position:absolute; right:0; top:calc(100% + 8px); z-index:42;
    width:min(300px, calc(100vw - 30px)); background:#fff; border:1px solid var(--line);
    border-radius:16px; padding:10px; box-shadow:0 14px 36px rgba(34,39,31,.18);}
  .ag-ampoule-menu[hidden]{display:none;}
  .ag-ampoule-menu .t{margin:2px 0 8px; padding:0 4px; font-size:0.7rem; font-weight:700;
    letter-spacing:.05em; text-transform:uppercase; color:#9aa08f; line-height:1.4;}
  .ag-ampoule-lien{display:flex; align-items:center; gap:10px; padding:10px; border-radius:12px;
    text-decoration:none; color:var(--ink); font-size:0.86rem;}
  .ag-ampoule-lien:hover{background:#fdf1e0; color:var(--safran-dark);}
  .ag-ampoule-lien .fl{margin-left:auto; color:var(--safran);}
}


/* Pages de conseils (anti-gaspi) : deux recettes par rangée sur téléphone.
   La règle est ici plutôt que dans le générateur pour s'appliquer aussi aux
   pages déjà déposées, sans attendre une régénération. */
@media(max-width:820px){
  #seo-contenu .ag-grille{grid-template-columns:1fr 1fr !important; gap:10px !important;}
}


/* ============ PARTAGE EN PASTILLES ============
   Pastilles rondes, icône seule. Le nom apparaît dans une bulle maison (pas
   l'infobulle du navigateur) : au survol sur ordinateur, à l'appui sur
   téléphone. Les mêmes pour la fiche, la liste de courses et le planning. */
.rail-partage{position:relative;}
.rail-partage .rail-ic.on::after{opacity:0 !important;}
.rail-fan{position:absolute; right:calc(100% + 12px); top:50%; transform:translateY(-50%);
  display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; width:max-content;
  max-width:calc(100vw - min(640px, 100vw) - 96px); animation:railFan .16s ease;}
@keyframes railFan{ from{opacity:0; transform:translateY(-50%) translateX(8px);} }
.partage-pastilles{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;}
.rail-fp{position:relative; flex:none; width:38px; height:38px; padding:0; border-radius:999px;
  display:grid; place-items:center; background:#fff; border:1px solid var(--line); color:var(--sauge);
  font:inherit; cursor:pointer; text-decoration:none; -webkit-touch-callout:none;
  box-shadow:0 4px 14px rgba(34,39,31,.14); transition:transform .14s ease, color .14s ease;}
.partage-pastilles .rail-fp{box-shadow:none;}
.rail-fp:hover{transform:scale(1.06); color:var(--sauge-dark);}
.rail-fp.fait{color:var(--sauge-dark); border-color:var(--sauge);}
.rail-fp::after{content:attr(data-bulle); position:absolute; bottom:calc(100% + 8px); left:50%;
  transform:translateX(-50%) translateY(4px); white-space:nowrap; background:var(--ink); color:#fff;
  font-size:0.7rem; font-weight:600; padding:5px 10px; border-radius:8px; opacity:0;
  pointer-events:none; transition:opacity .14s ease, transform .14s ease; z-index:3;}
@media(hover:hover){ .rail-fp:hover::after{opacity:1; transform:translateX(-50%);} }
.rail-fp:focus-visible::after, .rail-fp.fait::after, .rail-fp.montre::after{opacity:1; transform:translateX(-50%);}
@media(max-width:820px){
  /* Une seule rangée de 7 : la taille suit la largeur de l'écran, jusqu'à 320 px. */
  .rail-fan{position:fixed; left:0; right:0; bottom:60px; top:auto; transform:none; width:auto; max-width:none;
    flex-wrap:nowrap; justify-content:center; padding:12px 10px; background:#fff;
    border-top:1px solid var(--line); border-radius:20px 20px 0 0;
    box-shadow:0 -10px 30px rgba(34,39,31,.12); animation:railMonte .18s ease;}
  .rail-fp{width:min(44px, calc((100vw - 68px) / 7)); height:min(44px, calc((100vw - 68px) / 7)); box-shadow:none;}
  .rail-fp:hover{transform:none;}
  .rail-fp svg{width:20px; height:20px;}
  /* Aux deux bouts de la rangée, la bulle s'aligne sur le bord pour ne pas sortir de l'écran. */
  .rail-fp:first-child::after{left:0; transform:translateY(4px);}
  .rail-fp:last-child::after{left:auto; right:0; transform:translateY(4px);}
  .rail-fp.fait:first-child::after, .rail-fp.montre:first-child::after,
  .rail-fp.fait:last-child::after, .rail-fp.montre:last-child::after{transform:none;}
}

/* Recettes reliées à un basique : les 5 premières, puis « + N autres ». */
.bq-utilise .bq-en-plus{display:none;}
.bq-utilise.ouvert .bq-en-plus{display:inline-block;}
.bq-utilise .bq-plus{background:#fff; border:1.5px dashed var(--sauge); color:var(--sauge-dark); font-weight:600;}
.bq-utilise .bq-plus:hover{background:var(--sauge-light);}

/* Mini-recette qui renvoie à une fiche des Basiques (bouchées → pâte feuilletée). */
.sr-basique{margin:0 0 8px; font-size:0.8rem; color:var(--ink-dim);}
.sr-lien{background:none; border:none; padding:0; font:inherit; font-weight:600; color:var(--sauge-dark);
  text-decoration:underline; text-underline-offset:2px; cursor:pointer;}