:root{--ivory:#f6f0e5;--paper:#fffdf8;--sand:#e5d8c4;--sage:#78836a;--sage-dark:#58634d;--terracotta:#b86f50;--ink:#40382f;--muted:#82786c;--line:#e9dfd0;--shadow:0 14px 40px rgba(64,56,47,.08)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ivory);color:var(--ink);font-family:'DM Sans',sans-serif}button,input{font:inherit}button{cursor:pointer}.shell{max-width:1320px;margin:auto;padding:0 38px}
.topbar{height:82px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}.brand-mark{width:42px;height:42px;border-radius:14px;background:var(--sage);display:grid;place-items:center;color:white;font:24px 'Playfair Display',serif}.brand-name{font:600 21px 'Playfair Display',serif}.brand-sub{display:block;font-size:9px;letter-spacing:2px;color:var(--sage);font-weight:700;margin-top:3px}.nav{display:flex;gap:28px}.nav a{font-size:13px;text-decoration:none;color:#71675c;font-weight:600}.nav a:hover{color:var(--sage-dark)}.icon-btn{width:40px;height:40px;border:1px solid var(--line);background:var(--paper);border-radius:50%;color:var(--ink)}.menu-btn{display:none}
.hero{padding:34px 0 30px}.hero-card{position:relative;overflow:hidden;min-height:350px;border-radius:28px;background:#6b6251;box-shadow:var(--shadow);display:flex;align-items:center}.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.68)}.hero-card:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(39,34,27,.78),rgba(39,34,27,.35) 55%,rgba(39,34,27,.04))}.hero-content{position:relative;z-index:1;color:white;padding:48px 58px;max-width:610px}.eyebrow,.section-kicker{font-size:10px;letter-spacing:2.5px;text-transform:uppercase;font-weight:700;color:#e6d9c4}.hero h1{font:600 clamp(34px,4.4vw,54px)/1.12 'Playfair Display',serif;margin:14px 0}.hero p{font-size:14px;line-height:1.8;color:#f4ede3;max-width:430px}.primary-btn{border:0;border-radius:999px;background:var(--ivory);color:var(--ink);padding:13px 20px;font-size:12px;font-weight:700}

/* Plat du jour */
.daily-dish{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(260px,.95fr);overflow:hidden;margin:0 0 30px;background:var(--paper);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow)}
.daily-dish-copy{padding:27px 30px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.daily-dish-kicker{font-size:10px;letter-spacing:2.2px;text-transform:uppercase;color:var(--sage);font-weight:700}
.daily-dish-title{font:600 clamp(25px,3vw,34px)/1.15 'Playfair Display',serif;margin:9px 0 10px}
.daily-dish-description{font-size:13px;line-height:1.7;color:var(--muted);margin:0 0 17px}
.daily-dish-meta{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 19px}
.daily-dish-meta span{padding:7px 10px;border-radius:999px;background:#f1eadf;color:#766d62;font-size:10px;font-weight:600}
.daily-dish-button{border:0;border-radius:999px;background:var(--sage);color:white;padding:12px 18px;font-size:11px;font-weight:700}
.daily-dish-button:hover{background:var(--sage-dark)}
.daily-dish-photo-wrap{min-height:255px;background:#e7ddce}
.daily-dish-photo{width:100%;height:100%;min-height:255px;object-fit:cover;display:block}
@media(max-width:760px){.daily-dish{grid-template-columns:1fr}.daily-dish-photo-wrap{order:-1;min-height:190px}.daily-dish-photo{min-height:190px}.daily-dish-copy{padding:22px}}

.main-grid{display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:34px;padding:6px 0 60px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:0 0 18px}.section-kicker{color:var(--sage)}.section-title{font:600 29px 'Playfair Display',serif;margin:5px 0 0}.text-link{border:0;background:none;color:var(--sage-dark);font-size:12px;font-weight:700}.search-wrap{display:flex;gap:10px;margin-bottom:20px}.search-box{height:48px;background:var(--paper);border:1px solid var(--line);border-radius:14px;display:flex;align-items:center;padding:0 15px;flex:1}.search-box input{border:0;outline:0;background:transparent;width:100%;font-size:13px;color:var(--ink)}.filter-btn{border:1px solid var(--line);background:var(--paper);border-radius:14px;padding:0 16px;color:var(--ink);font-size:12px;font-weight:700}.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}.chip{border:1px solid var(--line);background:rgba(255,253,248,.55);color:#766d62;border-radius:999px;padding:8px 14px;font-size:11px;font-weight:600}.chip.selected{background:var(--sage);border-color:var(--sage);color:white}
.recipe-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.recipe-card{background:var(--paper);border:1px solid rgba(229,216,196,.75);border-radius:18px;overflow:hidden;box-shadow:0 5px 18px rgba(64,56,47,.035);transition:.2s;cursor:pointer}.recipe-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.recipe-image-wrap{position:relative;aspect-ratio:1.38;overflow:hidden;background:#e7ddce}.recipe-image{width:100%;height:100%;object-fit:cover;display:block}.favorite{position:absolute;right:12px;top:12px;width:34px;height:34px;border:0;border-radius:50%;background:rgba(255,253,248,.94);color:#8e8173}.favorite[aria-pressed=true]{color:var(--terracotta)}.recipe-info{padding:14px 15px}.category{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--sage);font-weight:700}.recipe-info h3{font:600 18px 'Playfair Display',serif;margin:6px 0 12px}.meta{display:flex;gap:13px;color:var(--muted);font-size:10px}.sidebar{padding-top:2px}.side-card{background:rgba(255,253,248,.72);border:1px solid var(--line);border-radius:19px;padding:20px;margin-bottom:16px}.side-title{font:600 19px 'Playfair Display',serif;margin:0 0 14px}.quick-action{width:100%;display:flex;align-items:center;gap:12px;padding:12px 0;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;color:var(--ink)}.quick-action:last-child{border:0}.quick-icon{width:35px;height:35px;border-radius:12px;background:#e9ecdf;color:var(--sage-dark);display:grid;place-items:center}.quick-action strong{display:block;font-size:12px}.quick-action small,.stat small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.stat{display:flex;justify-content:space-between}.stat strong{font:600 31px 'Playfair Display',serif}.stat-icon{font-size:22px;color:var(--terracotta)}.quote{font:italic 16px/1.55 'Playfair Display',serif;color:#6d6256}.quote-credit{font-size:9px;letter-spacing:1.4px;text-transform:uppercase;color:var(--sage);font-weight:700}.empty{grid-column:1/-1;text-align:center;padding:45px 20px;background:var(--paper);border-radius:18px;color:var(--muted);font-size:13px}.footer{border-top:1px solid var(--line);padding:22px 0 30px;color:var(--muted);font-size:10px;display:flex;justify-content:space-between}.toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,20px);opacity:0;background:var(--ink);color:white;padding:12px 18px;border-radius:999px;font-size:12px;pointer-events:none;transition:.25s;z-index:50}.toast.show{opacity:1;transform:translate(-50%,0)}
.detail-overlay{position:fixed;inset:0;background:rgba(40,34,27,.48);z-index:20;display:none;overflow:auto;padding:28px 16px}.detail-overlay.open{display:block}.detail-panel{max-width:900px;margin:auto;background:var(--ivory);border-radius:24px;overflow:hidden;box-shadow:0 25px 80px rgba(0,0,0,.22)}.detail-top{padding:18px 26px;display:flex;justify-content:space-between;border-bottom:1px solid var(--line)}.back-btn{border:0;background:none;color:var(--sage-dark);font-weight:700;font-size:12px}.detail-body{padding:28px 34px 38px}.detail-image{width:100%;max-height:340px;aspect-ratio:16/7;object-fit:cover;border-radius:18px}.detail-title{font:600 clamp(30px,4vw,42px)/1.15 'Playfair Display',serif;margin:14px 0 8px}.detail-desc{color:var(--muted);font-size:13px;line-height:1.7}.detail-meta{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0 25px}.detail-meta span{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:10px 13px;font-size:11px;color:var(--muted)}.detail-section{margin-top:25px}.detail-section h3{font:600 25px 'Playfair Display',serif;margin:0 0 14px}.portion-control{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--muted)}.portion-control button{width:30px;height:30px;border:1px solid var(--line);background:var(--paper);border-radius:50%}.ingredient-list,.step-list{display:grid;gap:11px}.ingredient-row,.step-row{display:flex;align-items:flex-start;gap:11px;padding:12px;background:var(--paper);border:1px solid var(--line);border-radius:12px;font-size:13px}.ingredient-row input,.step-row input{accent-color:var(--sage);width:17px;height:17px;flex:none}.ingredient-row.done span{text-decoration:line-through;color:#9a9186}.step-number{font:600 24px 'Playfair Display',serif;color:var(--terracotta);min-width:30px}.step-row strong{display:block;font:600 16px 'Playfair Display',serif;margin-bottom:5px}.step-row p{margin:0;color:var(--muted);font-size:12px;line-height:1.65}.detail-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}.secondary-btn{border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:11px 16px;color:var(--ink);font-size:12px;font-weight:700}
@media(max-width:1050px){.main-grid{grid-template-columns:1fr}.sidebar{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.side-card{margin:0}}@media(max-width:760px){.shell{padding:0 18px}.topbar{height:70px}.nav{display:none}.menu-btn{display:inline-block}.hero{padding:20px 0 25px}.hero-card{min-height:370px;align-items:end}.hero-card:after{background:linear-gradient(0deg,rgba(39,34,27,.83),rgba(39,34,27,.08))}.hero-content{padding:28px 24px 30px}.hero h1{font-size:38px}.main-grid{padding-top:2px;gap:26px}.section-title{font-size:26px}.recipe-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.sidebar{grid-template-columns:1fr 1fr}.detail-body{padding:20px 17px 28px}}@media(max-width:480px){.recipe-info{padding:12px}.recipe-info h3{font-size:15px}.meta{flex-wrap:wrap}.sidebar{grid-template-columns:1fr}.hero h1{font-size:34px}.detail-overlay{padding:8px}.detail-panel{border-radius:18px}.detail-image{aspect-ratio:4/3}}


/* Optimisation de l'affichage desktop : plus de contenu visible à 100 % */
@media (min-width: 761px) {
  .hero { padding: 22px 0 20px; }
  .hero-card { min-height: 285px; }
  .hero-content { padding: 34px 46px; max-width: 570px; }
  .hero h1 { font-size: clamp(32px, 3.8vw, 48px); margin: 10px 0; }
  .hero p { line-height: 1.6; margin: 10px 0 16px; }
  .daily-dish { margin-bottom: 22px; }
  .daily-dish-copy { padding: 20px 24px; }
  .daily-dish-title { font-size: clamp(23px, 2.5vw, 30px); margin: 7px 0 8px; }
  .daily-dish-description { line-height: 1.55; margin-bottom: 12px; }
  .daily-dish-meta { margin-bottom: 13px; }
  .daily-dish-photo-wrap,
  .daily-dish-photo { min-height: 210px; }
  .main-grid { padding-top: 2px; }
}


/* Ajustement final du plat du jour : encart compact et photo secondaire */
@media (min-width: 761px) {
  .daily-dish {
    grid-template-columns: minmax(0, 1.8fr) minmax(220px, .95fr);
    align-items: stretch;
  }
  .daily-dish-copy {
    justify-content: flex-start !important;
    align-items: flex-start;
    padding: 26px 30px !important;
  }
  .daily-dish-kicker { margin-bottom: 2px; }
  .daily-dish-title {
    font-size: clamp(23px, 2.2vw, 29px);
    line-height: 1.14;
    margin: 6px 0 8px;
  }
  .daily-dish-description {
    line-height: 1.5;
    margin: 0 0 12px;
  }
  .daily-dish-meta { margin: 0 0 13px; }
  .daily-dish-photo-wrap {
    height: 250px;
    min-height: 0 !important;
    align-self: stretch;
  }
  .daily-dish-photo {
    height: 100%;
    min-height: 0 !important;
    object-fit: cover;
  }
}
@media (max-width: 760px) {
  .daily-dish { grid-template-columns: 1fr; }
  .daily-dish-photo-wrap {
    order: -1;
    height: 185px;
    min-height: 0;
  }
  .daily-dish-photo { height: 185px; min-height: 0; }
  .daily-dish-copy { padding: 20px 22px !important; }
  .daily-dish-title { font-size: 25px; }
}


/* Navigation multi-pages : en-tête fixe et vues indépendantes */
.topbar{position:sticky;top:0;z-index:100;background:var(--ivory);box-shadow:0 5px 18px rgba(64,56,47,.045)}
.page-layout{display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:34px;align-items:start;padding-top:22px}
.page-content{min-width:0}
.page-view[hidden]{display:none!important}
#homePage .hero{padding:0 0 22px}
#homePage .daily-dish{margin-bottom:8px}
.page-heading{margin:4px 0 22px}
.page-intro{margin:8px 0 0;color:var(--muted);font-size:13px;line-height:1.6}
#recipesPage #recettes{min-width:0}
#recipesPage .section-head{margin-top:18px}
.footer{display:grid;grid-template-columns:1fr 1.5fr 1fr;align-items:center;gap:14px;margin-top:34px;text-align:center}
.footer-brand{font:600 16px 'Playfair Display',serif;color:var(--ink)}
.footer-tagline{color:var(--muted)}
.footer-copyright{font-weight:700;color:var(--sage-dark)}
.nav.mobile-open{display:flex;position:absolute;top:70px;left:0;right:0;padding:16px 22px;background:var(--ivory);border-bottom:1px solid var(--line);z-index:101;flex-wrap:wrap;justify-content:center}.nav a[aria-current="page"]{color:var(--sage-dark);text-decoration:underline;text-underline-offset:7px}
@media(max-width:1050px){.page-layout{grid-template-columns:1fr}.sidebar{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.side-card{margin:0}}
@media(max-width:760px){.page-layout{padding-top:16px;gap:22px}.footer{grid-template-columns:1fr;gap:7px;padding:20px 0 28px}.sidebar{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.sidebar{grid-template-columns:1fr}}


/* Corrections de navigation et accueil compact */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(246,240,229,.97);
  backdrop-filter: blur(10px);
}
@media (min-width: 1051px) {
  #appMain .page-layout { padding-top: 12px; gap: 24px; }
  #homePage .hero { padding: 0 0 12px; }
  #homePage .hero-card { min-height: clamp(190px, 27vh, 245px); }
  #homePage .hero-content { padding: 22px 36px; }
  #homePage .hero h1 { font-size: clamp(30px, 3vw, 42px); margin: 8px 0; }
  #homePage .hero p { font-size: 13px; line-height: 1.5; margin: 7px 0 12px; }
  #homePage .daily-dish { margin: 0; }
  #homePage .daily-dish-copy { padding: 15px 22px !important; }
  #homePage .daily-dish-title { font-size: clamp(21px, 2vw, 27px); margin: 5px 0 7px; }
  #homePage .daily-dish-description { font-size: 12px; line-height: 1.45; margin-bottom: 8px; }
  #homePage .daily-dish-meta { margin-bottom: 9px; }
  #homePage .daily-dish-photo-wrap { height: clamp(165px, 22vh, 200px); min-height: 0 !important; }
  #homePage .daily-dish-photo { height: 100%; min-height: 0 !important; }
  .page-layout:has(#homePage:not([hidden])) .sidebar .side-card { padding: 13px 17px; margin-bottom: 9px; }
  .page-layout:has(#homePage:not([hidden])) .sidebar .side-title { margin-bottom: 8px; font-size: 17px; }
  .page-layout:has(#homePage:not([hidden])) .sidebar .quick-action { padding: 7px 0; }
  .page-layout:has(#homePage:not([hidden])) .sidebar .quote { font-size: 14px; line-height: 1.4; margin: 4px 0 8px; }
  #appMain .footer { margin-top: 10px; padding: 11px 0 13px; }
}
@media (min-width: 1051px) and (max-height: 760px) {
  #homePage .hero-card { min-height: 175px; }
  #homePage .hero-content { padding: 16px 28px; }
  #homePage .daily-dish-photo-wrap { height: 150px; }
  #homePage .daily-dish-copy { padding: 11px 18px !important; }
  .page-layout:has(#homePage:not([hidden])) .sidebar .side-card { padding: 9px 14px; margin-bottom: 7px; }
  #appMain .footer { margin-top: 6px; padding: 8px 0; }
}


/* Accueil desktop : panneaux espacés et pied de page ancré en bas de la fenêtre */
@media (min-width: 1051px) and (min-height: 650px) {
  html, body { min-height: 100%; }
  body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  .topbar { flex: 0 0 82px; }
  #appMain {
    flex: 1 0 auto;
    min-height: calc(100vh - 82px);
    display: flex;
    flex-direction: column;
  }
  #appMain .page-layout {
    flex: 1 0 auto;
    min-height: 0;
    align-items: stretch;
    padding-top: 16px;
    padding-bottom: 8px;
  }
  #appMain .page-content { min-height: 0; }
  #homePage {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 28px;
  }
  #homePage .hero {
    flex: 1 1 0;
    min-height: 270px;
    display: flex;
    padding: 0;
  }
  #homePage .hero-card {
    flex: 1 1 auto;
    min-height: 270px;
    height: auto;
  }
  #homePage .daily-dish {
    flex: 1 1 0;
    min-height: 270px;
    margin: 0;
    grid-template-columns: minmax(0, 1.8fr) minmax(280px, .95fr);
  }
  #homePage .daily-dish-copy {
    justify-content: center !important;
    padding: 30px 34px !important;
  }
  #homePage .daily-dish-title {
    font-size: clamp(27px, 2.25vw, 36px);
    margin: 10px 0 12px;
  }
  #homePage .daily-dish-description {
    font-size: 14px;
    line-height: 1.65;
    margin-bottom: 16px;
  }
  #homePage .daily-dish-meta { margin-bottom: 16px; }
  #homePage .daily-dish-photo-wrap {
    height: auto;
    min-height: 270px !important;
  }
  #homePage .daily-dish-photo {
    height: 100%;
    min-height: 270px !important;
  }
  .page-layout:has(#homePage:not([hidden])) .sidebar {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
  }
  .page-layout:has(#homePage:not([hidden])) .sidebar .side-card {
    flex: 0 0 auto;
    margin: 0;
    padding: 20px;
  }
  #appMain .footer {
    flex: 0 0 auto;
    margin-top: auto;
    padding: 16px 0 20px;
  }
}

/* Architecture multi-pages : feuille commune */
html,body{min-height:100%;width:100%}
body{min-height:100vh;display:flex;flex-direction:column}
.shell{width:100%;max-width:1320px;margin-left:auto;margin-right:auto}
.topbar{width:100%;min-height:82px;height:82px;flex:0 0 82px;position:sticky;top:0;z-index:100;background:rgba(246,240,229,.98);backdrop-filter:blur(10px)}
body[data-page="home"] #recipesPage{display:none!important}
body[data-page="recipes"] #homePage{display:none!important}
#appMain{width:100%;max-width:1320px;flex:1 0 auto;display:flex;flex-direction:column;min-height:calc(100vh - 82px)}
#appMain .page-layout{flex:1 0 auto;min-height:0;padding-top:22px;gap:28px}
#appMain .page-content{min-width:0}
#appMain .footer{width:calc(100% - 76px);margin: auto auto 0;padding:18px 0 22px;flex:0 0 auto;display:grid;grid-template-columns:1fr 1.5fr 1fr;align-items:center;gap:14px;text-align:center}
body[data-page="home"] #homePage{display:flex;flex-direction:column;gap:24px;min-height:0}
body[data-page="home"] #homePage .hero{padding:0;flex:1 1 0;min-height:260px;display:flex}
body[data-page="home"] #homePage .hero-card{width:100%;height:100%;min-height:260px}
body[data-page="home"] #homePage .daily-dish{flex:1 1 0;min-height:260px;margin:0;grid-template-columns:minmax(0,1.8fr) minmax(280px,.95fr)}
body[data-page="home"] #homePage .daily-dish-photo-wrap{height:auto;min-height:260px}
body[data-page="home"] #homePage .daily-dish-photo{height:100%;min-height:260px}
body[data-page="home"] .page-layout:has(#homePage:not([hidden])) .sidebar{height:100%;display:flex;flex-direction:column;justify-content:space-between;gap:16px}
body[data-page="home"] .page-layout:has(#homePage:not([hidden])) .sidebar .side-card{margin:0}
body[data-page="recipes"] #appMain .page-layout{align-items:start}
body[data-page="recipes"] #recipesPage{display:block}
@media(min-width:1051px) and (min-height:760px){
 body[data-page="home"] #appMain .page-layout{min-height:calc(100vh - 190px)}
 body[data-page="home"] #homePage .hero{min-height:300px}
 body[data-page="home"] #homePage .hero-card{min-height:300px}
 body[data-page="home"] #homePage .daily-dish{min-height:300px}
 body[data-page="home"] #homePage .daily-dish-photo-wrap,
 body[data-page="home"] #homePage .daily-dish-photo{min-height:300px}
}
@media(max-width:1050px){
 #appMain .page-layout{grid-template-columns:1fr}
 body[data-page="home"] #homePage{gap:18px}
 body[data-page="home"] #homePage .hero{min-height:220px}
 body[data-page="home"] #homePage .daily-dish{min-height:220px}
 #appMain .footer{width:calc(100% - 40px)}
}
@media(max-width:760px){
 .topbar{height:auto;min-height:72px;flex-basis:auto}
 .shell{padding-left:20px;padding-right:20px}
 #appMain .page-layout{padding-top:16px;gap:18px}
 #appMain .footer{grid-template-columns:1fr;gap:8px;padding:18px 0 24px}
 body[data-page="home"] #homePage .hero{min-height:220px}
 body[data-page="home"] #homePage .daily-dish{grid-template-columns:1fr}
 body[data-page="home"] #homePage .daily-dish-photo-wrap{order:-1;height:190px;min-height:190px}
 body[data-page="home"] #homePage .daily-dish-photo{height:190px;min-height:190px}
}


/* ===== Ajustements validés : en-tête, accueil et encart suggestion ===== */
.shell{max-width:1600px;padding-left:28px;padding-right:28px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:28px;min-height:86px;height:86px;flex:0 0 86px}
.brand{flex:0 0 auto;gap:14px}
.brand-mark{width:56px;height:56px;border-radius:16px;flex:0 0 56px}
.brand-name{font-size:26px;line-height:1.08}
.brand-sub{font-size:10px;letter-spacing:2.3px;margin-top:4px}
.nav{margin-left:auto;margin-right:auto;gap:34px}
.nav a{font-size:14px}
.icon-btn{width:46px;height:46px;flex:0 0 46px}
#appMain{max-width:1600px;min-height:calc(100vh - 86px);flex:1 0 auto}
#appMain .page-layout{grid-template-columns:minmax(0,1fr) 300px;gap:28px;padding:16px 28px 0;flex:1 0 auto;min-height:0;align-items:start}
#homePage{display:flex;flex-direction:column;gap:22px;min-height:0}
#homePage .hero{padding:0;min-height:0;flex:0 0 auto}
#homePage .hero-card{min-height:250px;height:250px;width:100%}
#homePage .hero-content{padding:28px 34px;max-width:620px}
#homePage .hero h1{font-size:clamp(34px,3.1vw,46px);line-height:1.08;margin:9px 0}
#homePage .hero p{font-size:14px;line-height:1.55;margin:8px 0 14px}
#homePage .daily-dish{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(260px,.9fr);min-height:245px;height:245px;margin:0;overflow:hidden}
#homePage .daily-dish-copy{min-width:0;min-height:0;padding:18px 26px!important;justify-content:center!important;overflow:hidden}
#homePage .daily-dish-kicker{font-size:10px;line-height:1.35;margin:0 0 4px}
#homePage .daily-dish-title{font-size:clamp(22px,2.1vw,29px);line-height:1.13;margin:5px 0 8px;overflow-wrap:anywhere}
#homePage .daily-dish-description{font-size:12px;line-height:1.45;margin:0 0 10px}
#homePage .daily-dish-meta{gap:7px;margin:0 0 10px}
#homePage .daily-dish-meta span{padding:6px 9px;font-size:10px}
#homePage .daily-dish-button{padding:10px 16px;font-size:11px;flex:0 0 auto}
#homePage .daily-dish-photo-wrap{height:245px;min-height:0!important;overflow:hidden}
#homePage .daily-dish-photo{height:100%;min-height:0!important;object-fit:cover}
#appMain .footer{width:calc(100% - 56px);margin: auto auto 0;padding:16px 0 18px;flex:0 0 auto}
body[data-page="home"] #appMain .page-layout:has(#homePage:not([hidden])) .sidebar{height:100%;display:flex;flex-direction:column;justify-content:space-between;gap:14px}
body[data-page="home"] #appMain .page-layout:has(#homePage:not([hidden])) .sidebar .side-card{margin:0;padding:18px}
@media(min-width:1051px){
 body{min-height:100vh;display:flex;flex-direction:column}
 #appMain{display:flex;flex-direction:column}
 #appMain .page-layout{flex:1 0 auto}
}
@media(max-width:1050px){
 .shell{max-width:100%;padding-left:24px;padding-right:24px}
 #appMain .page-layout{grid-template-columns:minmax(0,1fr);padding:16px 24px 0}
 #homePage .hero-card{height:auto;min-height:250px}
 #homePage .daily-dish{height:auto;min-height:245px}
 #homePage .daily-dish-photo-wrap{height:245px}
 #appMain .footer{width:calc(100% - 48px)}
}
@media(max-width:760px){
 .topbar{height:72px;min-height:72px;flex-basis:72px;padding-left:18px;padding-right:18px}
 .brand-mark{width:44px;height:44px;flex-basis:44px}
 .brand-name{font-size:21px}
 .brand-sub{font-size:8px}
 .nav{gap:18px}
 #appMain{min-height:calc(100vh - 72px)}
 #appMain .page-layout{padding:14px 18px 0;gap:22px}
 #homePage{gap:18px}
 #homePage .hero-card{min-height:300px;height:300px}
 #homePage .hero-content{padding:24px}
 #homePage .daily-dish{grid-template-columns:1fr;height:auto}
 #homePage .daily-dish-photo-wrap{order:-1;height:190px;min-height:190px!important}
 #homePage .daily-dish-photo{height:190px;min-height:190px!important}
 #homePage .daily-dish-copy{padding:20px 22px!important}
 #homePage .daily-dish-title{font-size:25px}
 #appMain .footer{width:calc(100% - 36px);grid-template-columns:1fr;gap:7px;text-align:center;padding:18px 0 22px}
}

/* ===== Ajustements visuels demandés : logo, pied de page et panneau latéral ===== */
@media (min-width: 761px) {
  .topbar {
    min-height: 104px;
    height: 104px;
    flex-basis: 104px;
  }
  .brand { gap: 16px; }
  .brand-mark {
    width: 76px;
    height: 76px;
    flex: 0 0 76px;
    border-radius: 19px;
  }
  /* L'en-tête plus haut est compensé par des panneaux d'accueil légèrement plus compacts. */
  body[data-page="home"] #homePage { gap: 18px; }
  body[data-page="home"] #homePage .hero-card { height: 225px; min-height: 225px; }
  body[data-page="home"] #homePage .daily-dish { height: 220px; min-height: 220px; }
  body[data-page="home"] #homePage .daily-dish-photo-wrap,
  body[data-page="home"] #homePage .daily-dish-photo { height: 220px; min-height: 220px; }
}

/* Même gabarit pour « En un clin d'œil » sur l'accueil et la bibliothèque. */
.sidebar .side-card:first-child {
  min-height: 148px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 22px;
}
.sidebar .side-card:first-child .side-title { margin-bottom: 14px; }
.sidebar .side-card:first-child .stat { align-items: center; }

/* Pied de page : titre à gauche, copyright centré, signature à droite. */
#appMain .footer {
  grid-template-columns: minmax(0, 1fr) minmax(180px, .8fr) minmax(0, 1.5fr);
  align-items: center;
  text-align: initial;
}
#appMain .footer-brand { grid-column: 1; justify-self: start; }
#appMain .footer-copyright { grid-column: 2; justify-self: center; text-align: center; }
#appMain .footer-tagline { grid-column: 3; justify-self: end; text-align: right; }

@media (max-width: 760px) {
  .topbar { min-height: 78px; height: 78px; flex-basis: 78px; }
  .brand-mark { width: 52px; height: 52px; flex-basis: 52px; }
  #appMain .footer { grid-template-columns: 1fr; text-align: center; }
  #appMain .footer-brand,
  #appMain .footer-copyright,
  #appMain .footer-tagline { grid-column: 1; justify-self: center; text-align: center; }
}


/* ===== Correctifs de stabilité visuelle — novembre 2026 ===== */
* { box-sizing: border-box; }

/* En-tête : logo entièrement visible, sans débordement horizontal. */
.topbar {
  width: 100%;
  max-width: 1600px;
  padding-left: clamp(24px, 3.2vw, 52px);
  padding-right: clamp(24px, 3.2vw, 52px);
  overflow: visible;
  min-height: 100px;
  height: 100px;
  flex-basis: 100px;
}
.brand {
  min-width: 0;
  flex-shrink: 0;
  align-items: center;
}
.brand-mark {
  display: block;
  width: 68px;
  height: 68px;
  flex: 0 0 68px;
  max-width: none;
  object-fit: contain;
  border-radius: 17px;
}
.brand-name { line-height: 1.12; }

/* L'accueil ne rogne plus le texte ni le bouton de la suggestion. */
body[data-page="home"] #appMain .page-layout {
  align-items: stretch;
  padding-top: 20px;
  padding-bottom: 0;
}
body[data-page="home"] #homePage {
  min-height: 0;
  gap: 24px;
}
body[data-page="home"] #homePage .hero,
body[data-page="home"] #homePage .hero-card {
  height: auto;
  min-height: 250px;
}
body[data-page="home"] #homePage .hero-card {
  overflow: hidden;
}
body[data-page="home"] #homePage .hero-content {
  padding: 28px 36px;
  max-width: 680px;
}
body[data-page="home"] #homePage .hero h1 {
  font-size: clamp(34px, 3vw, 44px);
  line-height: 1.12;
}
body[data-page="home"] #homePage .daily-dish {
  height: auto;
  min-height: 270px;
  grid-template-columns: minmax(0, 1.65fr) minmax(260px, .9fr);
  overflow: hidden;
}
body[data-page="home"] #homePage .daily-dish-copy {
  min-height: 270px;
  height: auto;
  overflow: visible;
  justify-content: center !important;
  padding: 24px 30px !important;
}
body[data-page="home"] #homePage .daily-dish-title {
  font-size: clamp(24px, 2vw, 30px);
  line-height: 1.18;
  margin: 7px 0 10px;
  overflow-wrap: break-word;
}
body[data-page="home"] #homePage .daily-dish-description {
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 12px;
}
body[data-page="home"] #homePage .daily-dish-meta {
  margin-bottom: 12px;
}
body[data-page="home"] #homePage .daily-dish-button {
  display: inline-flex;
  align-self: flex-start;
  margin-top: 2px;
  white-space: nowrap;
}
body[data-page="home"] #homePage .daily-dish-photo-wrap {
  height: auto;
  min-height: 270px !important;
  overflow: hidden;
}
body[data-page="home"] #homePage .daily-dish-photo {
  width: 100%;
  height: 100%;
  min-height: 270px !important;
  object-fit: cover;
}

/* Pied de page : les trois éléments sont alignés sur une seule ligne.
   L'ordre visuel est : marque à gauche, copyright au centre, signature à droite. */
#appMain .footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 24px;
  row-gap: 8px;
  padding: 16px 0 18px;
  margin-top: auto;
}
#appMain .footer-brand {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  align-self: center;
}
#appMain .footer-copyright {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  align-self: center;
  text-align: center;
  white-space: nowrap;
}
#appMain .footer-tagline {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  text-align: right;
}

/* La barre latérale garde un gabarit cohérent sur les deux pages. */
.sidebar .side-card:first-child {
  min-height: 148px;
  height: auto;
}

/* Écrans plus petits : pas de contenu rogné, défilement naturel. */
@media (max-width: 1050px) {
  .topbar {
    min-height: 92px;
    height: 92px;
    flex-basis: 92px;
    padding-left: 24px;
    padding-right: 24px;
  }
  .brand-mark {
    width: 60px;
    height: 60px;
    flex-basis: 60px;
  }
  body[data-page="home"] #homePage .hero,
  body[data-page="home"] #homePage .hero-card {
    min-height: 240px;
  }
  body[data-page="home"] #homePage .daily-dish {
    min-height: 260px;
  }
  body[data-page="home"] #homePage .daily-dish-copy,
  body[data-page="home"] #homePage .daily-dish-photo-wrap,
  body[data-page="home"] #homePage .daily-dish-photo {
    min-height: 260px !important;
  }
}
@media (max-width: 760px) {
  .topbar {
    min-height: 76px;
    height: auto;
    flex-basis: auto;
    padding: 10px 18px;
  }
  .brand-mark {
    width: 50px;
    height: 50px;
    flex-basis: 50px;
  }
  body[data-page="home"] #homePage .daily-dish {
    grid-template-columns: 1fr;
  }
  body[data-page="home"] #homePage .daily-dish-photo-wrap {
    order: -1;
    height: 190px;
    min-height: 190px !important;
  }
  body[data-page="home"] #homePage .daily-dish-photo {
    height: 190px;
    min-height: 190px !important;
  }
  body[data-page="home"] #homePage .daily-dish-copy {
    min-height: 0;
    padding: 20px 22px !important;
  }
  #appMain .footer {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  #appMain .footer-brand,
  #appMain .footer-copyright,
  #appMain .footer-tagline {
    grid-column: 1;
    grid-row: auto;
    justify-self: center;
    text-align: center;
    white-space: normal;
  }
}


/* Logo indépendant : fichier logo.png partagé par les deux pages. */
.brand-mark {
  display: block;
  width: 76px;
  height: 76px;
  flex: 0 0 76px;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
@media (max-width: 1050px) {
  .brand-mark { width: 66px; height: 66px; flex-basis: 66px; }
}
@media (max-width: 760px) {
  .brand-mark { width: 52px; height: 52px; flex-basis: 52px; }
}


/* ===== Correctif final : accueil sans défilement parasite + panneau latéral uniforme ===== */
@media (min-width: 1051px) {
  html, body {
    min-height: 100%;
  }
  body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
  }
  .topbar {
    flex: 0 0 100px;
    height: 100px;
  }
  #appMain {
    flex: 1 0 auto;
    min-height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
  }
  #appMain > .page-layout {
    flex: 1 0 auto;
    min-height: 0;
    padding-top: 14px;
    padding-bottom: 0;
    gap: 24px;
  }
  body[data-page="home"] #appMain > .page-layout {
    align-items: stretch;
  }
  body[data-page="home"] #homePage {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  body[data-page="home"] #homePage .hero {
    padding: 0;
    margin: 0;
  }
  body[data-page="home"] #homePage .hero-card {
    height: 245px;
    min-height: 245px;
  }
  body[data-page="home"] #homePage .hero-content {
    padding: 24px 36px;
  }
  body[data-page="home"] #homePage .daily-dish {
    height: 250px;
    min-height: 250px;
    grid-template-columns: minmax(0, 1.65fr) minmax(260px, .9fr);
  }
  body[data-page="home"] #homePage .daily-dish-copy,
  body[data-page="home"] #homePage .daily-dish-photo-wrap,
  body[data-page="home"] #homePage .daily-dish-photo {
    height: 250px;
    min-height: 250px !important;
  }
  body[data-page="home"] #homePage .daily-dish-copy {
    padding: 20px 28px !important;
  }
  body[data-page="home"] #homePage .daily-dish-title {
    font-size: clamp(23px, 1.8vw, 28px);
    line-height: 1.16;
    margin: 6px 0 8px;
  }
  body[data-page="home"] #homePage .daily-dish-description {
    font-size: 12.5px;
    line-height: 1.42;
    margin-bottom: 8px;
  }
  body[data-page="home"] #homePage .daily-dish-meta {
    margin-bottom: 8px;
  }
  #appMain > .footer {
    flex: 0 0 auto;
    margin-top: auto;
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

/* La carte « En un clin d'œil » a exactement le même gabarit sur les deux pages. */
.sidebar .side-card:first-child {
  box-sizing: border-box;
  height: 174px;
  min-height: 174px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 22px;
}
.sidebar .side-card:first-child .side-title {
  margin-bottom: 14px;
}
.sidebar .side-card:first-child .stat {
  align-items: center;
}

@media (max-width: 1050px) {
  .sidebar .side-card:first-child {
    height: auto;
    min-height: 174px;
  }
}
@media (max-width: 760px) {
  .sidebar .side-card:first-child {
    min-height: 148px;
    height: auto;
  }
}

/* ============================================================
   CORRECTIF STABLE — accueil sans scroll + sidebar identique
   Commun aux pages index.html et recettes.html.
   ============================================================ */
@media (min-width: 1051px) {
  /* Les trois cartes latérales ont exactement les mêmes dimensions
     et espacements, quelle que soit la page. */
  .sidebar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    padding-top: 0 !important;
    height: auto !important;
  }
  .sidebar > .side-card {
    box-sizing: border-box !important;
    width: 100% !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 20px !important;
  }
  .sidebar > .side-card:nth-child(1) {
    height: 174px !important;
    min-height: 174px !important;
  }
  .sidebar > .side-card:nth-child(2) {
    height: 258px !important;
    min-height: 258px !important;
  }
  .sidebar > .side-card:nth-child(3) {
    height: 118px !important;
    min-height: 118px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
  .sidebar .side-title {
    margin: 0 0 14px !important;
    font-size: 19px !important;
    line-height: 1.25 !important;
  }
  .sidebar .quick-action {
    min-height: 57px !important;
    height: 57px !important;
    padding: 7px 0 !important;
    box-sizing: border-box !important;
  }
  .sidebar .quote {
    margin: 0 0 8px !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
  }
  .sidebar .quote-credit {
    margin: 0 !important;
  }

  /* Hauteur d'écran fixe uniquement sur l'accueil desktop :
     header + contenu + footer tiennent dans la fenêtre. */
  body[data-page="home"] {
    height: 100vh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }
  body[data-page="home"] > .topbar {
    height: 100px !important;
    min-height: 100px !important;
    flex: 0 0 100px !important;
  }
  body[data-page="home"] #appMain {
    height: calc(100vh - 100px) !important;
    min-height: 0 !important;
    flex: 1 1 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  body[data-page="home"] #appMain > .page-layout {
    height: calc(100% - 58px) !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    padding-top: 14px !important;
    padding-bottom: 0 !important;
    gap: 24px !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }
  body[data-page="home"] #appMain .page-content,
  body[data-page="home"] #homePage {
    height: 100% !important;
    min-height: 0 !important;
  }
  body[data-page="home"] #homePage {
    display: grid !important;
    grid-template-rows: minmax(190px, 1fr) minmax(230px, 1fr) !important;
    gap: 18px !important;
  }
  body[data-page="home"] #homePage .hero {
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  body[data-page="home"] #homePage .hero-card {
    height: 100% !important;
    min-height: 0 !important;
  }
  body[data-page="home"] #homePage .hero-content {
    padding: 22px 34px !important;
  }
  body[data-page="home"] #homePage .daily-dish {
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    grid-template-columns: minmax(0, 1.65fr) minmax(260px, .9fr) !important;
  }
  body[data-page="home"] #homePage .daily-dish-copy,
  body[data-page="home"] #homePage .daily-dish-photo-wrap,
  body[data-page="home"] #homePage .daily-dish-photo {
    height: 100% !important;
    min-height: 0 !important;
  }
  body[data-page="home"] #homePage .daily-dish-copy {
    padding: 18px 28px !important;
    overflow: hidden !important;
  }
  body[data-page="home"] #homePage .daily-dish-title {
    font-size: clamp(22px, 1.7vw, 28px) !important;
    line-height: 1.15 !important;
    margin: 6px 0 8px !important;
  }
  body[data-page="home"] #homePage .daily-dish-description {
    font-size: 12px !important;
    line-height: 1.4 !important;
    margin: 0 0 8px !important;
  }
  body[data-page="home"] #homePage .daily-dish-meta {
    margin-bottom: 7px !important;
  }
  body[data-page="home"] #homePage .daily-dish-photo {
    width: 100% !important;
    object-fit: cover !important;
  }
  body[data-page="home"] #appMain > .footer {
    height: 58px !important;
    min-height: 58px !important;
    flex: 0 0 58px !important;
    margin: 0 !important;
    padding: 8px 0 !important;
    overflow: hidden !important;
  }
}

/* Sur tablette et mobile, conserver le défilement naturel et ne rien couper. */
@media (max-width: 1050px) {
  .sidebar { gap: 14px !important; }
  .sidebar > .side-card {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
  }
}


/* CORRECTION CIBLEE — accueil : conserver tous les contenus visibles.
   Les règles des trois panneaux latéraux ne sont volontairement pas modifiées. */
@media (min-width: 1051px) {
  body[data-page="home"] {
    height: 100vh !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  /* Le header garde sa hauteur actuelle ; le contenu prend exactement le reste. */
  body[data-page="home"] > .topbar {
    flex: 0 0 auto !important;
  }

  body[data-page="home"] #appMain {
    height: auto !important;
    min-height: 0 !important;
    flex: 1 1 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  /* Réserver explicitement la place du pied de page au lieu de le superposer. */
  body[data-page="home"] #appMain > .page-layout {
    height: auto !important;
    min-height: 0 !important;
    flex: 1 1 0 !important;
    padding-top: 14px !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
    align-items: stretch !important;
  }

  body[data-page="home"] #appMain > .footer {
    height: 58px !important;
    min-height: 58px !important;
    flex: 0 0 58px !important;
    margin: 0 !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    overflow: visible !important;
  }

  body[data-page="home"] #appMain .page-content,
  body[data-page="home"] #homePage {
    height: 100% !important;
    min-height: 0 !important;
  }

  /* Les deux panneaux principaux se partagent l'espace restant.
     Leurs contenus ne sont plus masqués par le footer. */
  body[data-page="home"] #homePage {
    display: grid !important;
    grid-template-rows: minmax(220px, 1fr) minmax(250px, 1fr) !important;
    gap: 18px !important;
  }

  body[data-page="home"] #homePage .hero {
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body[data-page="home"] #homePage .hero-card {
    height: 100% !important;
    min-height: 0 !important;
  }

  body[data-page="home"] #homePage .hero-content {
    padding: 22px 34px !important;
  }

  body[data-page="home"] #homePage .daily-dish {
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    grid-template-columns: minmax(0, 1.65fr) minmax(260px, .9fr) !important;
  }

  body[data-page="home"] #homePage .daily-dish-copy {
    height: 100% !important;
    min-height: 0 !important;
    padding: 16px 24px !important;
    overflow: visible !important;
    justify-content: center !important;
  }

  body[data-page="home"] #homePage .daily-dish-title {
    font-size: clamp(22px, 1.7vw, 28px) !important;
    line-height: 1.13 !important;
    margin: 5px 0 7px !important;
  }

  body[data-page="home"] #homePage .daily-dish-description {
    font-size: 12px !important;
    line-height: 1.4 !important;
    margin: 0 0 8px !important;
  }

  body[data-page="home"] #homePage .daily-dish-meta {
    margin: 0 0 8px !important;
  }

  body[data-page="home"] #homePage .daily-dish-button {
    flex: 0 0 auto !important;
  }

  body[data-page="home"] #homePage .daily-dish-photo-wrap,
  body[data-page="home"] #homePage .daily-dish-photo {
    height: 100% !important;
    min-height: 0 !important;
  }

  body[data-page="home"] #homePage .daily-dish-photo {
    width: 100% !important;
    object-fit: cover !important;
  }
}


/* ===== Correctif de mise en page accueil — priorité finale ===== */
@media (min-width: 1051px) {
  html,
  body {
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  body[data-page="home"] {
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  body[data-page="home"] > .topbar {
    flex: 0 0 100px !important;
    height: 100px !important;
    min-height: 100px !important;
  }

  body[data-page="home"] > #appMain {
    flex: 1 1 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  body[data-page="home"] > #appMain > .page-layout {
    flex: 1 1 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 14px 28px 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 300px !important;
    align-items: stretch !important;
    gap: 28px !important;
    overflow: visible !important;
  }

  body[data-page="home"] #appMain .page-content {
    height: 100% !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body[data-page="home"] #homePage {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: minmax(0, 0.95fr) minmax(0, 1.05fr) !important;
    gap: 18px !important;
  }

  body[data-page="home"] #homePage .hero {
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body[data-page="home"] #homePage .hero-card {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  body[data-page="home"] #homePage .hero-content {
    padding: 20px 34px !important;
  }

  body[data-page="home"] #homePage .daily-dish {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    grid-template-columns: minmax(0, 1.65fr) minmax(240px, 0.9fr) !important;
  }

  body[data-page="home"] #homePage .daily-dish-copy {
    height: 100% !important;
    min-height: 0 !important;
    padding: 14px 24px !important;
    overflow: visible !important;
    justify-content: center !important;
  }

  body[data-page="home"] #homePage .daily-dish-title {
    font-size: clamp(21px, 1.65vw, 27px) !important;
    line-height: 1.12 !important;
    margin: 5px 0 7px !important;
  }

  body[data-page="home"] #homePage .daily-dish-description {
    font-size: 12px !important;
    line-height: 1.38 !important;
    margin: 0 0 7px !important;
  }

  body[data-page="home"] #homePage .daily-dish-meta {
    margin: 0 0 7px !important;
  }

  body[data-page="home"] #homePage .daily-dish-button {
    flex: 0 0 auto !important;
  }

  body[data-page="home"] #homePage .daily-dish-photo-wrap,
  body[data-page="home"] #homePage .daily-dish-photo {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  body[data-page="home"] #homePage .daily-dish-photo {
    object-fit: cover !important;
  }

  /* Les trois panneaux de droite conservent leurs dimensions validées. */
  body[data-page="home"] #appMain .sidebar {
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    padding: 0 !important;
  }

  body[data-page="home"] #appMain .sidebar > .side-card {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  body[data-page="home"] #appMain .sidebar > .side-card:nth-child(1) {
    height: 174px !important;
    min-height: 174px !important;
  }

  body[data-page="home"] #appMain .sidebar > .side-card:nth-child(2) {
    height: 258px !important;
    min-height: 258px !important;
  }

  body[data-page="home"] #appMain .sidebar > .side-card:nth-child(3) {
    height: 118px !important;
    min-height: 118px !important;
  }

  body[data-page="home"] > #appMain > .footer {
    flex: 0 0 58px !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 8px 0 !important;
    overflow: visible !important;
  }
}

/* Sur les écrans plus petits, le contenu reprend un défilement naturel. */
@media (max-width: 1050px) {
  body[data-page="home"] {
    height: auto !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body[data-page="home"] > #appMain {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body[data-page="home"] > #appMain > .page-layout {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body[data-page="home"] #homePage {
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  body[data-page="home"] #homePage .hero,
  body[data-page="home"] #homePage .daily-dish {
    height: auto !important;
    min-height: 0 !important;
  }

  body[data-page="home"] #homePage .hero-card {
    height: auto !important;
    min-height: 220px !important;
  }

  body[data-page="home"] #homePage .daily-dish-copy {
    height: auto !important;
    min-height: 0 !important;
  }
}


/* Pied de page simplifié selon la demande */
#appMain .footer.footer-simple {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  border-top: 0 !important;
  margin-top: 0 !important;
  padding: 8px 0 12px !important;
  min-height: 42px;
  height: auto;
  flex: 0 0 auto;
}

#appMain .footer.footer-simple .footer-tagline {
  grid-column: auto !important;
  width: 100%;
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}


/* Correction exacte du pied de page : texte à gauche, copyright centré */
#appMain .footer.footer-simple {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: center !important;
  justify-content: stretch !important;
  column-gap: 16px !important;
  row-gap: 0 !important;
  width: calc(100% - 56px) !important;
  height: 58px !important;
  min-height: 58px !important;
  flex: 0 0 58px !important;
  margin: 0 auto !important;
  padding: 8px 0 !important;
  border: 0 !important;
  text-align: initial !important;
  overflow: visible !important;
}

#appMain .footer.footer-simple .footer-tagline {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  align-self: center !important;
  width: auto !important;
  margin: 0 !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  color: var(--muted) !important;
  text-align: left !important;
}

#appMain .footer.footer-simple .footer-copyright {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: center !important;
  align-self: center !important;
  margin: 0 !important;
  white-space: nowrap !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--sage-dark) !important;
  text-align: center !important;
}

@media (max-width: 1050px) {
  #appMain .footer.footer-simple {
    width: calc(100% - 36px) !important;
    height: auto !important;
    min-height: 58px !important;
    flex: 0 0 auto !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 6px !important;
    padding: 12px 0 !important;
  }

  #appMain .footer.footer-simple .footer-tagline,
  #appMain .footer.footer-simple .footer-copyright {
    grid-column: 1 !important;
    grid-row: auto !important;
    justify-self: center !important;
    text-align: center !important;
    white-space: normal !important;
  }
}


/* Ajustement ciblé : réduire légèrement uniquement le troisième encart latéral
   de l'accueil pour dégager la barre des tâches, sans toucher aux deux autres. */
@media (min-width: 1051px) {
  body[data-page="home"] #appMain .sidebar > .side-card:nth-child(3) {
    height: 100px !important;
    min-height: 100px !important;
    max-height: 100px !important;
    padding: 12px 18px !important;
    box-sizing: border-box !important;
  }

  body[data-page="home"] #appMain .sidebar > .side-card:nth-child(3) .quote {
    margin: 0 0 5px !important;
    line-height: 1.25 !important;
  }

  body[data-page="home"] #appMain .sidebar > .side-card:nth-child(3) .quote-credit {
    margin-top: 0 !important;
    line-height: 1.2 !important;
  }
}


/* Pied de page de l'accueil : limité à la colonne principale,
   sans empiéter sous la colonne des trois encarts latéraux. */
@media (min-width: 1051px) {
  body[data-page="home"] #appMain > .footer.footer-simple {
    /* Même largeur et même bord droit que la colonne principale :
       le copyright s'arrête avant la colonne latérale. */
    width: calc(100% - 356px) !important;
    margin: 0 !important;
    align-self: flex-start !important;
    padding: 8px 0 !important;
    height: 58px !important;
    min-height: 58px !important;
    flex: 0 0 58px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    box-sizing: border-box !important;
    border: 0 !important;
  }

  body[data-page="home"] #appMain > .footer.footer-simple .footer-tagline {
    flex: 1 1 auto !important;
    width: auto !important;
    text-align: left !important;
    justify-self: auto !important;
    white-space: nowrap !important;
  }

  body[data-page="home"] #appMain > .footer.footer-simple .footer-copyright {
    flex: 0 0 auto !important;
    text-align: right !important;
    justify-self: auto !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 1050px) {
  body[data-page="home"] #appMain > .footer.footer-simple {
    width: calc(100% - 36px) !important;
    margin: 0 auto !important;
  }
}


/* Page Mes recettes : même hauteur compacte pour le panneau citation
   que sur l'accueil, afin qu'il ne déborde pas en bas de la fenêtre. */
@media (min-width: 1051px) {
  body[data-page="recipes"] #appMain .sidebar > .side-card:nth-child(3) {
    height: 100px !important;
    min-height: 100px !important;
    max-height: 100px !important;
    padding: 12px 18px !important;
    box-sizing: border-box !important;
  }

  body[data-page="recipes"] #appMain .sidebar > .side-card:nth-child(3) .quote {
    margin: 0 0 5px !important;
    line-height: 1.25 !important;
  }

  body[data-page="recipes"] #appMain .sidebar > .side-card:nth-child(3) .quote-credit {
    margin-top: 0 !important;
    line-height: 1.2 !important;
  }
}


/* =========================================================
   RESPONSIVE MOBILE — séparation stricte des blocs
   Ces règles ne s'appliquent qu'aux écrans de 760 px ou moins.
   La mise en page ordinateur (à partir de 761 px) reste inchangée.
   ========================================================= */
@media (max-width: 760px) {
  html, body {
    width: 100%;
    min-width: 0;
    overflow-x: hidden !important;
  }

  body {
    display: block !important;
    height: auto !important;
    min-height: 100vh !important;
    overflow-y: auto !important;
  }

  .topbar {
    position: sticky !important;
    top: 0;
    z-index: 100;
    width: 100%;
    min-height: 92px !important;
    height: auto !important;
    padding: 12px 16px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
  }

  .brand {
    min-width: 0;
    flex: 1 1 auto;
    gap: 9px;
  }

  .brand-mark {
    width: 54px !important;
    height: 54px !important;
    flex: 0 0 54px !important;
  }

  .brand-name {
    font-size: clamp(18px, 5vw, 23px) !important;
    line-height: 1.1;
    white-space: nowrap;
  }

  .brand-sub {
    font-size: 8px;
    letter-spacing: 1.8px;
  }

  .topbar > div {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .topbar .icon-btn {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
  }

  .nav.mobile-open {
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100%;
  }

  #appMain {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    display: block !important;
    overflow: visible !important;
    flex: none !important;
  }

  #appMain > .page-layout {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 16px 16px 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 22px !important;
    overflow: visible !important;
  }

  #appMain .page-content,
  #appMain .page-view,
  #homePage,
  #recipesPage {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  /* Accueil : le texte reste entièrement à l'intérieur de la bannière. */
  #homePage {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
  }

  #homePage .hero {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #homePage .hero-card {
    width: 100% !important;
    height: auto !important;
    min-height: 390px !important;
    display: flex !important;
    align-items: flex-end !important;
    overflow: hidden !important;
    border-radius: 24px !important;
  }

  #homePage .hero-content {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    padding: 26px 22px 28px !important;
    margin: 0 !important;
  }

  #homePage .hero h1 {
    font-size: clamp(30px, 8vw, 36px) !important;
    line-height: 1.08 !important;
    margin: 9px 0 12px !important;
  }

  #homePage .hero p {
    max-width: 100% !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    margin: 8px 0 16px !important;
  }

  #homePage .primary-btn {
    max-width: 100%;
    white-space: normal;
    padding: 13px 18px !important;
    font-size: 13px !important;
  }

  #homePage .daily-dish {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  #homePage .daily-dish-photo-wrap,
  #homePage .daily-dish-photo {
    width: 100% !important;
    height: 190px !important;
    min-height: 190px !important;
  }

  #homePage .daily-dish-copy {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 20px 20px 22px !important;
    overflow: visible !important;
  }

  #homePage .daily-dish-title {
    font-size: 25px !important;
    line-height: 1.15 !important;
  }

  /* Mes recettes : recherche, filtres et cartes restent dans leur colonne. */
  #recipesPage .recipe-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  #recipesPage .search-wrap {
    width: 100%;
    min-width: 0;
  }

  #recipesPage .search-box {
    min-width: 0;
  }

  /* Les trois panneaux latéraux passent sous le contenu, jamais à côté ni dessus. */
  #appMain .sidebar {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    overflow: visible !important;
  }

  #appMain .sidebar > .side-card {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 20px !important;
    box-sizing: border-box !important;
  }

  #appMain .sidebar > .side-card:first-child {
    min-height: 132px !important;
  }

  #appMain .sidebar > .side-card:nth-child(3) {
    min-height: 100px !important;
  }

  #appMain .footer,
  #appMain .footer.footer-simple {
    position: static !important;
    width: calc(100% - 32px) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 18px 16px 0 !important;
    padding: 14px 0 22px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    overflow: visible !important;
    text-align: center !important;
  }

  #appMain .footer-tagline,
  #appMain .footer-copyright,
  #appMain .footer-brand {
    width: 100% !important;
    margin: 0 !important;
    white-space: normal !important;
    text-align: center !important;
  }
}

@media (max-width: 380px) {
  .topbar { padding-left: 12px !important; padding-right: 12px !important; }
  .brand-mark { width: 46px !important; height: 46px !important; flex-basis: 46px !important; }
  .brand-name { font-size: 18px !important; }
  .topbar .icon-btn { width: 38px; height: 38px; flex-basis: 38px; }
  #homePage .hero-card { min-height: 370px !important; }
  #recipesPage .recipe-grid { grid-template-columns: 1fr !important; }
}


/* CORRECTION MOBILE PRIORITAIRE — neutralise les anciennes règles desktop
   plus spécifiques qui forçaient encore une grille à deux colonnes. */
@media screen and (max-width: 760px) {
  body[data-page="home"] #appMain .page-layout,
  body[data-page="recipes"] #appMain .page-layout {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: none !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 22px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body[data-page="home"] #appMain .page-content,
  body[data-page="recipes"] #appMain .page-content {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body[data-page="home"] #appMain #homePage {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 18px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body[data-page="home"] #appMain #homePage .hero,
  body[data-page="home"] #appMain #homePage .hero-card,
  body[data-page="home"] #appMain #homePage .daily-dish {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: none !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  body[data-page="home"] #appMain #homePage .hero-card {
    min-height: 420px !important;
    display: flex !important;
    align-items: flex-end !important;
  }

  body[data-page="home"] #appMain #homePage .hero-content {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    padding: 28px 22px !important;
    box-sizing: border-box !important;
  }

  body[data-page="home"] #appMain #homePage .hero h1 {
    display: block !important;
    font-size: 34px !important;
    line-height: 1.08 !important;
    margin: 10px 0 12px !important;
  }

  body[data-page="home"] #appMain #homePage .hero p {
    display: block !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
    margin: 0 0 16px !important;
  }

  body[data-page="home"] #appMain #homePage .daily-dish {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
  }

  body[data-page="home"] #appMain #homePage .daily-dish-copy {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 22px !important;
    box-sizing: border-box !important;
  }

  body[data-page="home"] #appMain #homePage .daily-dish-photo-wrap {
    position: relative !important;
    width: 100% !important;
    height: 190px !important;
    min-height: 190px !important;
  }

  body[data-page="home"] #appMain .sidebar,
  body[data-page="recipes"] #appMain .sidebar {
    position: relative !important;
    inset: auto !important;
    float: none !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: none !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 14px !important;
    overflow: visible !important;
  }

  body[data-page="home"] #appMain .sidebar > .side-card,
  body[data-page="recipes"] #appMain .sidebar > .side-card {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: none !important;
    margin: 0 !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  body[data-page="home"] #appMain .footer,
  body[data-page="recipes"] #appMain .footer {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    width: calc(100% - 32px) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 18px 16px 0 !important;
    padding: 16px 0 24px !important;
    gap: 8px !important;
    overflow: visible !important;
  }
}


/* En-tête toujours visible : desktop et mobile.
   La hauteur réelle est mesurée par le petit script des deux pages. */
.topbar {
  position: fixed !important;
  top: 0 !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: 100% !important;
  max-width: 1600px !important;
  z-index: 1000 !important;
  flex: none !important;
  box-shadow: 0 5px 18px rgba(64,56,47,.08);
}
#appMain {
  margin-top: var(--topbar-height, 86px) !important;
  min-height: calc(100vh - var(--topbar-height, 86px)) !important;
}
.nav.mobile-open {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1001 !important;
}
@media (max-width: 760px) {
  .topbar {
    max-width: none !important;
    left: 0 !important;
    transform: none !important;
  }
  #appMain {
    min-height: calc(100vh - var(--topbar-height, 100px)) !important;
  }
}


/* Recherche — largeur maîtrisée sur ordinateur et lisibilité sur Android */
@media (min-width: 761px) {
  body[data-page="recipes"] #recipesPage .search-wrap {
    width: 50% !important;
    max-width: 50% !important;
    min-width: 0 !important;
  }
  body[data-page="recipes"] #recipesPage .search-box {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
}

@media (max-width: 760px) {
  body[data-page="recipes"] #recipesPage .search-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 8px !important;
  }
  body[data-page="recipes"] #recipesPage .search-box {
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
  }
  body[data-page="recipes"] #recipesPage .search-box input {
    min-width: 0 !important;
    width: 100% !important;
    font-size: 14px !important;
    text-overflow: ellipsis !important;
  }
  body[data-page="recipes"] #recipesPage .filter-btn {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    padding: 0 13px !important;
  }
}