:root{
    --paper:#F4F3EE; --paper-card:#FBFAF6; --ink:#23231F; --ink-soft:#6B6A5F;
    --pine:#1F3D2B; --pine-2:#2E5238; --leaf:#3E6B4A; --line:#E3DFD2;
    --tomato:#C8472E; --tomato-press:#A93820; --chip:#EDEAE0;
    --shadow:0 1px 2px rgba(35,35,31,.06),0 8px 24px rgba(35,35,31,.05);
    --serif:Georgia,"Times New Roman",serif;
    --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  }
  *{box-sizing:border-box}
  html,body{margin:0}
  body{
    background:var(--paper); color:var(--ink); font-family:var(--sans);
    -webkit-font-smoothing:antialiased; line-height:1.45;
    padding-bottom:calc(72px + env(safe-area-inset-bottom));
  }
  .wrap{max-width:560px;margin:0 auto;padding:0 16px}

  header.top{
    background:var(--pine); color:#EFEDE3;
    padding:calc(14px + env(safe-area-inset-top)) 0 14px;
    border-bottom:3px solid var(--tomato);
  }
  .top .wrap{display:flex;flex-direction:column;gap:12px}
  .brand{display:flex;align-items:baseline;gap:8px}
  .brand h1{font-family:var(--serif);font-weight:400;font-size:22px;margin:0;letter-spacing:.2px}
  .brand .sub{font-size:12px;color:#A9BBA6;letter-spacing:.08em;text-transform:uppercase}
  .convives{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .stepper{display:flex;align-items:center;gap:0;background:rgba(255,255,255,.08);border-radius:999px;padding:2px}
  .stepper button{width:30px;height:30px;border:0;background:transparent;color:#EFEDE3;font-size:18px;border-radius:999px;cursor:pointer}
  .stepper button:active{background:rgba(255,255,255,.15)}
  .stepper .val{min-width:64px;text-align:center;font-size:13px}
  .stepper .val b{font-size:15px}
  .toggle{display:inline-flex;align-items:center;gap:7px;font-size:13px;cursor:pointer;user-select:none}
  .toggle input{display:none}
  .toggle .box{width:34px;height:20px;border-radius:999px;background:rgba(255,255,255,.18);position:relative;transition:.18s}
  .toggle .box::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#EFEDE3;transition:.18s}
  .toggle input:checked + .box{background:var(--tomato)}
  .toggle input:checked + .box::after{transform:translateX(14px)}
  .total-pers{font-size:12px;color:#A9BBA6;width:100%}

  nav.tabs{position:fixed;bottom:0;left:0;right:0;background:var(--paper-card);border-top:1px solid var(--line);
    display:flex;z-index:30;padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -4px 16px rgba(35,35,31,.04)}
  nav.tabs button{flex:1;border:0;background:transparent;padding:11px 4px 9px;cursor:pointer;color:var(--ink-soft);
    font-size:11px;display:flex;flex-direction:column;align-items:center;gap:3px;font-family:var(--sans);position:relative}
  nav.tabs .ic{font-size:20px;line-height:1}
  nav.tabs .nav-ic{width:24px;height:24px;object-fit:contain;display:block;margin:-1px auto 1px;border-radius:5px}
  nav.tabs button.on{color:var(--pine)}
  nav.tabs button.on .ic{transform:translateY(-1px)}
  nav.tabs .badge{position:absolute;top:6px;left:50%;transform:translateX(6px);background:var(--tomato);color:#fff;border-radius:999px;
    min-width:16px;height:16px;font-size:10px;display:flex;align-items:center;justify-content:center;padding:0 4px;font-weight:600}

  .view{display:none;padding-top:18px}
  .view.on{display:block}
  .sec-title{font-family:var(--serif);font-size:18px;margin:0 0 2px}
  .sec-note{font-size:13px;color:var(--ink-soft);margin:0 0 14px}

  .seasons{display:flex;gap:6px;overflow-x:auto;padding:2px 0 12px;-webkit-overflow-scrolling:touch}
  .seasons::-webkit-scrollbar{display:none}
  .chip{white-space:nowrap;border:1px solid var(--line);background:var(--paper-card);color:var(--ink-soft);
    padding:6px 13px;border-radius:999px;font-size:13px;cursor:pointer;flex:0 0 auto}
  .chip.on{background:var(--pine);color:#EFEDE3;border-color:var(--pine)}

  .grid{display:grid;gap:12px}
  .card{background:var(--paper-card);border:1px solid var(--line);border-radius:14px;padding:14px;box-shadow:var(--shadow);position:relative}
  .card h3{font-family:var(--serif);font-weight:400;font-size:17px;margin:0 0 4px;padding-right:40px}
  .meta{display:flex;gap:12px;font-size:12px;color:var(--ink-soft);flex-wrap:wrap}
  .meta span{display:inline-flex;align-items:center;gap:4px}
  .tagrow{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
  .cardfoot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px}
  .price{font-size:14px;font-weight:600;color:var(--pine)}
  .price i{font-style:normal;font-weight:400;font-size:11px;color:var(--ink-soft)}
  .tag{font-size:11px;background:var(--chip);color:var(--leaf);padding:2px 8px;border-radius:6px}
  .add{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);
    background:var(--paper);color:var(--leaf);font-size:20px;cursor:pointer;line-height:1}
  .card.picked{border-color:var(--leaf);background:#F2F6F0}
  .card.picked .add{background:var(--tomato);border-color:var(--tomato);color:#fff}

  .conseil{background:#F2F6F0;border:1px solid #DCE7D8;border-radius:14px;padding:14px;margin-bottom:14px}
  .conseil .lead{display:flex;gap:10px;align-items:flex-start}
  .conseil .ic{font-size:20px;line-height:1.3}
  .conseil h3{font-family:var(--serif);font-weight:400;font-size:16px;margin:0 0 3px;color:var(--pine)}
  .conseil p{margin:0;font-size:13px;color:var(--ink-soft)}
  .conseil .eq{font-size:12px;color:var(--leaf);margin-top:6px;font-weight:600}
  .conseil button.gen{margin-top:12px;width:100%;border:0;background:var(--pine);color:#EFEDE3;
    padding:11px;border-radius:10px;font-size:14px;cursor:pointer;font-family:var(--sans)}
  .conseil button.gen:active{background:var(--pine-2)}
  .conseil .repas-row{display:flex;align-items:center;justify-content:space-between;margin-top:13px;font-size:14px;color:var(--ink)}
  .stepper-l{display:flex;align-items:center;background:#fff;border:1px solid var(--line);border-radius:999px;padding:2px}
  .stepper-l button{width:32px;height:32px;border:0;background:transparent;color:var(--pine);font-size:18px;border-radius:999px;cursor:pointer}
  .stepper-l button:active{background:var(--chip)}
  .stepper-l .val{min-width:30px;text-align:center;font-size:15px;font-weight:600}

  .weekbar{background:var(--paper-card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:16px;box-shadow:var(--shadow)}
  .weekbar .hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
  .weekbar .hd .lab{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
  .weekbar .hd .clr{font-size:12px;color:var(--tomato);background:none;border:0;cursor:pointer}
  .ardoises{display:flex;gap:8px;flex-wrap:wrap}
  .ardoise{background:var(--pine);color:#EFEDE3;font-size:12px;padding:6px 10px;border-radius:8px;display:flex;align-items:center;gap:8px}
  .ardoise b{font-weight:600}
  .ardoise button{background:none;border:0;color:#A9BBA6;cursor:pointer;font-size:14px;padding:0;line-height:1}
  .empty{color:var(--ink-soft);font-size:13px;font-style:italic}

  .rayon{margin-bottom:18px}
  .rayon h4{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--leaf);margin:0 0 8px;
    border-bottom:1px solid var(--line);padding-bottom:6px}
  .rayon-ic{width:22px;height:22px;object-fit:contain;vertical-align:-5px;margin-right:7px;border-radius:5px}

  .weekinfo{display:flex;flex-direction:column;gap:1px}
  .wknav{display:flex;align-items:center;gap:8px}
  .wknav button{width:26px;height:26px;border-radius:8px;border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;font-size:13px;line-height:1;cursor:pointer}
  .wknav button:active{background:rgba(255,255,255,.15)}
  .weekinfo .wk{font-weight:700;color:#fff}
  .planactions{display:flex;gap:10px;margin:2px 0 14px}
  .planactions button{flex:1;border:0;border-radius:12px;padding:13px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit}
  .planactions .gen{background:var(--pine);color:#fff}
  .planactions .clr{background:var(--paper-card);color:var(--ink-soft);border:1px solid var(--line)}
  .check-ia{width:100%;border:1px solid var(--leaf);background:#fff;color:var(--leaf);border-radius:12px;padding:12px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;margin-bottom:12px}
  .check-ia:disabled{opacity:.6;cursor:default}
  .ia-verdict{background:var(--paper-card);border:1px solid var(--line);border-left:4px solid var(--leaf);border-radius:12px;padding:14px;margin-bottom:14px;font-size:14px;line-height:1.5;white-space:pre-wrap}
  .ia-verdict.err{border-left-color:var(--tomato);color:var(--ink)}
  .manque-ia{background:#FBF2EC;border:1px solid #EAD9C8;border-left:4px solid var(--tomato);border-radius:10px;padding:10px 12px;margin-bottom:12px;font-size:13px;line-height:1.5}
  .manque-ia p{margin:0}
  .manque-ia p+p{margin-top:6px}
  .manque-ia .sugg{color:var(--ink-soft)}
  .manque-ia .sugg.muted{font-style:italic}
  .reglages{display:flex;flex-direction:column;gap:14px}
  .reglages label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;color:var(--ink)}
  .reglages label small{font-weight:400;color:var(--ink-soft)}
  .reglages input{padding:11px;border:1px solid var(--line);border-radius:10px;font-size:14px;font-family:inherit;background:var(--paper-card)}
  .reg-help{font-size:13px;color:var(--ink-soft);margin:0}
  .reg-bloc{background:var(--paper-card);border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px}
  .reg-bloc strong{font-size:14px}
  .reg-profil{margin:0;font-size:14px;color:var(--ink-soft)}
  .reg-btn{align-self:flex-start;border:1px solid var(--leaf);background:#fff;color:var(--leaf);border-radius:10px;padding:9px 14px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit}
  .reg-btn:disabled{opacity:.5;cursor:default}
  .personne-row{display:flex;gap:8px;align-items:center}
  .personne-row .personne-nom{flex:1 1 auto;min-width:0;padding:9px 10px;border:1px solid var(--line);border-radius:9px;font-size:14px;font-family:inherit;background:#fff;color:var(--ink)}
  .personne-row .personne-type{flex:0 0 auto;padding:9px 8px;border:1px solid var(--line);border-radius:9px;font-size:13px;font-family:inherit;background:#fff;color:var(--ink)}
  .personne-row .personne-suppr{flex:0 0 auto;border:0;background:none;color:var(--ink-soft);font-size:16px;cursor:pointer;padding:4px 6px}
  .personne-row .personne-suppr:disabled{opacity:.35;cursor:default}
  .role-enfant #personnes-list input,.role-enfant #personnes-list select,.role-enfant #personnes-list button{pointer-events:none;opacity:.6}
  /* Scanner une recette */
  .scan-capture{display:flex;gap:10px;margin:14px 0;flex-wrap:wrap}
  .scan-photo-slot{flex:1 1 160px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:2px dashed var(--line);border-radius:14px;padding:18px 10px;text-align:center;cursor:pointer;background:var(--paper-card);min-height:120px}
  .scan-photo-slot:has(.scan-preview[style*="block"]){border-style:solid;border-color:var(--leaf)}
  .scan-photo-slot input{display:none}
  .scan-photo-label{font-size:13px;font-weight:600;color:var(--ink-soft)}
  .scan-preview{max-width:100%;max-height:120px;border-radius:8px;object-fit:cover}
  #scan-ajouter-file{width:100%;text-align:center;justify-content:center;margin-bottom:14px}
  #scan-queue{display:flex;flex-direction:column;gap:10px}
  .scan-item{background:var(--paper-card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:14px;display:flex;flex-direction:column;gap:8px}
  .scan-item.err{border-left:4px solid var(--tomato)}
  .scan-item.ok{border-left:4px solid var(--leaf)}
  .scan-item .muted{color:var(--ink-soft);font-weight:400;font-size:13px}
  .scan-edit{width:100%;box-sizing:border-box;font-family:ui-monospace,monospace;font-size:12px;padding:8px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
  .scan-actions{display:flex;gap:8px;flex-wrap:wrap}
  .scan-alerte{background:#FBF2EC;border:1px solid #EAD9C8;border-left:4px solid var(--tomato);border-radius:10px;padding:10px 12px;font-size:13px;line-height:1.5;color:var(--ink)}
  /* Avis sur plats servis */
  .avis-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
  .avis-q{font-size:13px;color:var(--ink-soft)}
  .avis-btns{display:flex;gap:4px}
  .avis-btns .avis-btn{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--paper);font-size:18px;line-height:1;cursor:pointer}
  .avis-btns .avis-btn.on{border-color:var(--leaf);background:#EAF3EC}
  .avis-autres{display:flex;flex-wrap:wrap;gap:6px;font-size:12px;color:var(--ink-soft)}
  .avis-tag{background:var(--chip);border-radius:20px;padding:2px 8px}
  /* Overlay sélecteur de profil */
  .overlay{position:fixed;inset:0;background:rgba(31,61,43,.55);display:flex;align-items:center;justify-content:center;z-index:50;padding:20px}
  .overlay-card{background:var(--paper);border-radius:18px;padding:22px;width:100%;max-width:360px;box-shadow:0 18px 50px rgba(0,0,0,.25)}
  .overlay-card h3{margin:0 0 14px;font-family:var(--serif);color:var(--pine)}
  .profil-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .profil-btn{padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--paper-card);font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;color:var(--ink)}
  .profil-btn:active{background:#EAF3EC}
  #pin-zone{margin-top:14px}
  .pin-q{margin:0 0 6px;font-size:14px;font-weight:600}
  #pin-input{width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;font-size:18px;letter-spacing:4px;text-align:center;font-family:inherit}
  .pin-err{color:var(--tomato);font-size:13px;margin:8px 0 0}
  .pin-actions{display:flex;gap:8px;margin-top:12px}
  .pin-actions button{flex:1;padding:11px;border-radius:10px;border:0;background:var(--pine);color:#fff;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit}
  .pin-actions .ghost{background:var(--paper-card);color:var(--ink-soft);border:1px solid var(--line)}
  .overlay-note{font-size:12px;color:var(--ink-soft);margin:14px 0 0;line-height:1.4}
  /* Mode enfant : masquer/inactiver les contrôles parents */
  .role-enfant .parent-only{display:none !important}
  .role-enfant .att .chip,.role-enfant select.k-meal,.role-enfant .k-trait,.role-enfant .slot-on input{pointer-events:none;opacity:.6}
  .day{background:var(--paper-card);border:1px solid var(--line);border-radius:16px;padding:12px 14px;margin-bottom:12px;box-shadow:var(--shadow)}
  .day-hd{font-weight:700;color:var(--pine);font-size:15px;margin-bottom:6px}
  .day-hd .dt{color:var(--ink-soft);font-weight:500;font-size:13px;margin-left:6px}
  .slot{border-top:1px dashed var(--line);padding:11px 0 4px}
  .slot:first-of-type{border-top:0}
  .slot.off{opacity:.65}
  .slot-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
  .slot-on{display:flex;align-items:center;gap:7px;cursor:pointer;font-size:14px}
  .slot-on input{width:18px;height:18px;accent-color:var(--pine)}
  .slot .muted{color:var(--ink-soft);font-size:13px;font-style:italic}
  .slot .cv{font-size:12px;color:var(--ink-soft);white-space:nowrap}
  .cuit-badge{color:var(--leaf);font-weight:700;margin-left:4px}
  .att{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:9px 0}
  .att-step{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-soft)}
  .att-step button{width:27px;height:27px;border-radius:8px;border:1px solid var(--line);background:var(--paper);font-size:17px;line-height:1;cursor:pointer}
  .att .chip{border:1px solid var(--line);background:var(--paper);color:var(--ink-soft);border-radius:999px;padding:6px 12px;font-size:12px;cursor:pointer;font-family:inherit}
  .att .chip.on{background:var(--leaf);color:#fff;border-color:var(--leaf)}
  .meal{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:4px}
  .meal select,.meal .k-trait{flex:1 1 100%;min-width:0;padding:11px;border:1px solid var(--line);border-radius:10px;background:var(--paper);font-size:14px;font-family:inherit;color:var(--ink)}
  .cookmeta{color:var(--ink-soft);font-size:13px;margin:0 0 12px}
  .cook-head small{font-weight:500;color:var(--ink-soft);font-size:12px}
  .cuit-btn{margin-top:14px;width:100%;border:0;border-radius:12px;padding:13px;background:var(--pine);color:#fff;font-weight:600;font-size:14px;cursor:pointer;font-family:inherit}
  .item{display:flex;align-items:center;gap:11px;padding:8px 2px;cursor:pointer}
  .item .ck{width:21px;height:21px;border:1.5px solid var(--line);border-radius:6px;flex:0 0 auto;display:flex;
    align-items:center;justify-content:center;color:#fff;font-size:13px;background:var(--paper-card)}
  .item.done .ck{background:var(--leaf);border-color:var(--leaf)}
  .item .nm{flex:1;font-size:15px}
  .item .qt{font-size:13px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
  .item.done .nm{text-decoration:line-through;color:var(--ink-soft)}
  .listmeta{font-size:12px;color:var(--ink-soft);margin:-6px 0 16px}
  .courses-lock{margin-bottom:14px}
  .courses-lock.on{background:#FBF2EC;border:1px solid #EAD9C8;border-left:4px solid var(--tomato);border-radius:12px;
    padding:12px 14px;display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:13px;color:var(--ink)}
  .courses-lock.on .reg-btn{margin:0}
  .courses-lock.off .reg-btn{width:100%;text-align:center;border-color:var(--leaf);background:#fff}
  .additem{display:flex;flex-wrap:wrap;gap:8px;background:var(--paper-card);border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:18px;box-shadow:var(--shadow)}
  .additem input,.additem select{font-family:var(--sans);font-size:14px;border:1px solid var(--line);border-radius:9px;padding:9px 10px;background:#fff;color:var(--ink)}
  .additem .nom{flex:1 1 100%}
  .additem .qte{flex:1 1 80px;min-width:0}
  .additem select{flex:2 1 140px}
  .additem button{flex:0 0 auto;border:0;background:var(--tomato);color:#fff;border-radius:9px;padding:9px 18px;font-size:14px;cursor:pointer;font-family:var(--sans)}
  .additem button:active{background:var(--tomato-press)}
  .item .rm-x{margin-left:8px;background:none;border:0;color:var(--ink-soft);font-size:15px;cursor:pointer;padding:2px 4px;line-height:1}
  .item .perso{font-size:10px;background:var(--chip);color:var(--leaf);border-radius:5px;padding:1px 6px;margin-left:7px;vertical-align:middle;text-transform:uppercase;letter-spacing:.04em}

  .cook-meal{background:var(--paper-card);border:1px solid var(--line);border-radius:14px;margin-bottom:14px;overflow:hidden;box-shadow:var(--shadow)}
  .cook-head{padding:13px 15px;background:var(--pine);color:#EFEDE3;display:flex;justify-content:space-between;align-items:center;cursor:pointer}
  .cook-head h3{font-family:var(--serif);font-weight:400;font-size:16px;margin:0}
  .cook-head .chev{transition:.2s}
  .cook-meal.open .chev{transform:rotate(180deg)}
  .cook-body{display:none;padding:14px 15px}
  .cook-meal.open .cook-body{display:block}
  .ing-mini{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--leaf);margin:0 0 7px}
  .ing-list{font-size:14px;color:var(--ink);margin:0 0 16px;padding-left:18px}
  .ing-list li{margin-bottom:3px}
  .ing-list li.fond{color:var(--ink-soft)}
  .sz{font-size:11px;padding:1px 7px;border-radius:6px}
  .sz-ok{background:#E3EFDD;color:#3E6B4A}
  .sz-mid{background:#F3EEDB;color:#8A7A33}
  .sz-off{background:#EFE3DF;color:#A95A45}
  .sz-year{background:var(--chip);color:var(--ink-soft)}
  .comp-switch{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink);background:var(--paper-card);
    border:1px solid var(--line);border-radius:12px;padding:11px 13px;margin-bottom:14px;cursor:pointer;user-select:none}
  .comp-switch em{color:var(--ink-soft);font-size:12px}
  .comp-switch input{display:none}
  .comp-switch .box{flex:0 0 auto;width:38px;height:22px;border-radius:999px;background:var(--line);position:relative;transition:.18s}
  .comp-switch .box::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.18s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
  .comp-switch input:checked + .box{background:var(--leaf)}
  .comp-switch input:checked + .box::after{transform:translateX(16px)}
  .comp-tip{margin:5px 0 0;font-size:12.5px;color:var(--leaf);background:#F2F6F0;border-left:3px solid var(--leaf);
    border-radius:0 8px 8px 0;padding:6px 10px;line-height:1.4}
  .comp-tip b{font-weight:700}
  .step{display:flex;gap:12px;margin-bottom:13px;align-items:flex-start}
  .step .n{flex:0 0 24px;height:24px;border-radius:50%;background:var(--chip);color:var(--leaf);font-size:13px;
    display:flex;align-items:center;justify-content:center;font-weight:600}
  .step p{margin:1px 0 0;font-size:14px}

  .foot{font-size:11px;color:var(--ink-soft);text-align:center;padding:22px 0 8px;line-height:1.6}
  .shared-note{font-size:11.5px;color:var(--leaf);background:#F2F6F0;border:1px solid #DCE7D8;border-radius:10px;
    padding:9px 12px;margin-bottom:16px;display:flex;gap:8px;align-items:flex-start}
.recette-meta{display:flex;align-items:center;gap:.5rem;margin-top:.45rem;flex-wrap:wrap}
.chrono{display:inline-flex;align-items:center;gap:.3rem}
.chrono-pics{display:inline-flex;align-items:center;gap:.1rem;line-height:0}
.chrono-ico{color:#cfd8cf}
.chrono-ico.on{color:#C8472E}
.chrono-txt{font-size:.78rem;color:#5b6b5b;font-style:italic}

/* Infobulle photo (recette scannée) dans l'onglet Semaine : au survol (souris)
   ou au tap (tablette, via la classe .open bascule par JS) on affiche la photo. */
.foto-tip{position:relative;display:inline-flex;align-items:center;font-size:.9rem;cursor:pointer;line-height:1}
.foto-tip .foto-pop{display:none;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  z-index:30;border-radius:10px;overflow:hidden;border:2px solid var(--paper-card);box-shadow:var(--shadow)}
.foto-tip .foto-pop img{display:block;width:140px;height:140px;object-fit:cover}
.foto-tip:hover .foto-pop,.foto-tip.open .foto-pop{display:block}

/* Photo de la recette scannée affichée dans l'onglet En cuisine */
.cook-photo{width:100%;max-height:240px;object-fit:cover;border-radius:12px;margin-bottom:.7rem;display:block}

/* ---------------- Paysage / grands écrans (tablette) ----------------
   Par défaut tout est pensé pour un téléphone en portrait (colonne unique,
   560px de large). Au-delà, on élargit la zone de contenu puis, à partir
   d'une largeur suffisante, on passe les listes en grille multi-colonnes
   pour exploiter l'espace disponible. */
@media (min-width:700px){
  .wrap{max-width:920px}
  .top .wrap{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 20px}
  .total-pers{width:auto}
}
@media (min-width:900px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
  #planner{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px;align-items:start}
  #planner .day{margin-bottom:0}
  #shopping{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2px 28px;align-items:start}
  #shopping > p.empty{grid-column:1/-1}
  #cook{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px;align-items:start}
  #cook .cook-meal{margin-bottom:0}
  #cook > p{grid-column:1/-1}
}