/*
 * La Cuisine magique — feuille de style unique
 *
 * Cette feuille consolide, dans l'ordre exact de cascade de l'ancienne version :
 *   1. styles.css (styles de base et composants)
 *   2. responsive-layout.css (architecture responsive canonique)
 *   3. layout.generated.css (ajustements issus de l'éditeur)
 *
 * L'ordre est volontaire afin de conserver le rendu existant.
 */

/* ========================================================================== */
/* 1. STYLES DE BASE ET COMPOSANTS                                             */
/* ========================================================================== */
:root{
  font-family:Georgia,"Times New Roman",ui-serif,serif;
  color:#4a2a18;
  background:#4b2317;
  --cream:#fff5d9;
  --paper:#ffefc8;
  --paper-2:#f8dba2;
  --wood:#8f4a24;
  --wood-dark:#4d2417;
  --green:#55793b;
  --green-dark:#355626;
  --gold:#e2a21b;
  --orange:#df7810;
  --line:#b7672d;
  --shadow:0 14px 30px rgba(48,20,10,.34);
  --soft-shadow:0 7px 16px rgba(69,32,12,.22)
}
*{box-sizing:border-box}
html{min-height:100%;background:#4b2317}
body{margin:0;min-height:100vh;background:
  radial-gradient(circle at 50% -10%,rgba(255,190,100,.28),transparent 34%),
  linear-gradient(135deg,#7d3c20,#4b2317 65%,#30150f);background-attachment:fixed}
button,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:4px solid #ffe073;outline-offset:3px}
.screen{display:none;min-height:100vh}.screen.active{display:flex}.hidden{display:none!important}

/* Accueil et lobby */
.home-screen,.lobby-screen{align-items:center;justify-content:center;padding:24px;background:
  linear-gradient(rgba(53,22,12,.52),rgba(53,22,12,.72)),
  url("./assets/kitchen-scene.svg") center/cover fixed}
.card,.panel,.recipe-card{background:linear-gradient(180deg,#fff7df,#ffe8b7);border:3px solid var(--line);border-radius:24px;box-shadow:var(--shadow)}
.hero{width:min(760px,96vw);padding:38px;text-align:center;backdrop-filter:blur(3px)}
.logo{font-size:72px;filter:drop-shadow(0 6px 5px #4b1f1250)}.logo.small{font-size:58px}
.eyebrow{margin:0 0 8px;color:#6a7c33;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.hero h1,.lobby-card h2{margin:0;color:#713a1f;text-shadow:0 2px #fff;font-size:clamp(38px,6vw,66px);line-height:.95}
.hero>p:not(.eyebrow),.lobby-card>p{font:600 20px/1.45 ui-rounded,"Segoe UI",sans-serif}
.hero label{display:block;max-width:430px;margin:26px auto 12px;text-align:left;font:800 19px ui-rounded,"Segoe UI",sans-serif}
.hero input,.join input{width:100%;padding:16px 18px;border:3px solid #b7773d;border-radius:14px;background:#fffaf0;font-size:22px;color:#3f261a}
.mode-choice{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0}
.mode{padding:18px;border:3px solid #c08a55;border-radius:18px;background:#fff8e7;color:#50311f;box-shadow:0 5px 0 #8a522f;transition:.16s}
.mode strong,.mode span{display:block}.mode strong{font-size:22px}.mode span{margin-top:6px;font-family:ui-rounded,"Segoe UI",sans-serif}.mode.active{border-color:#4e7c38;background:#eaf4d8;transform:translateY(-2px);box-shadow:0 7px 0 #3f642e}
.primary,.secondary,#joinRoom{border:0;border-radius:14px;padding:16px 26px;font-weight:900;font-size:20px;box-shadow:0 5px 0 #63391e}.primary{background:linear-gradient(#72a44d,#4d7c33);color:#fff}.secondary,#joinRoom{background:#e9b64b;color:#4c301b}.home-actions{margin:18px}.join{display:grid;grid-template-columns:1fr auto;gap:10px;max-width:430px;margin:auto}.join input{text-transform:uppercase;text-align:center;letter-spacing:.2em}.quiet-link{display:inline-block;margin-top:24px;color:#5a321f;font-weight:800}.error{color:#a52020;font-weight:800;min-height:1.5em}.lobby-card{padding:34px;width:min(620px,95vw);text-align:center}.players{display:grid;gap:10px;margin:25px 0}.player-row,.score-row{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;background:#fffaf0;border:2px solid #d39b4b;border-radius:14px;font:700 18px ui-rounded,"Segoe UI",sans-serif}

/* Plateau principal */
.game-screen{position:relative;display:none;grid-template-columns:minmax(330px,31vw) minmax(0,1fr) 104px;gap:16px;padding:18px;min-height:100vh;background:#5a2b1b;overflow-x:hidden}
.game-screen.active{display:grid}
.desktop-scene{position:relative;min-height:calc(100vh - 36px);border-radius:24px;overflow:hidden;background:
  linear-gradient(180deg,rgba(40,17,10,.12),rgba(40,17,10,.2)),
  url("./assets/kitchen-scene.svg") center/cover;box-shadow:inset 0 0 0 3px rgba(255,220,165,.2),var(--shadow)}
.title-plaque{position:absolute;left:7%;right:7%;top:4%;display:flex;align-items:center;justify-content:center;gap:14px;padding:24px 16px;border:4px solid #3f1e14;border-radius:48% 48% 20px 20px;background:linear-gradient(#8e4b25,#5b2d1b);box-shadow:0 12px 0 #35170e,0 18px 30px #0005;color:#fff7d5;text-align:center;text-shadow:0 4px #2e150e}
.title-plaque>span{font-size:54px}.title-plaque strong{font-size:clamp(33px,3.2vw,56px);line-height:.9}.title-plaque em{color:#ffd36b;font-style:normal}
.scene-statuses{position:absolute;top:31%;left:4%;right:4%;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.wood-chip{padding:10px 15px;border:3px solid #3e1d12;border-radius:999px;background:linear-gradient(#a86431,#74381f);color:#fff6d5;font:900 15px ui-rounded,"Segoe UI",sans-serif;box-shadow:0 5px 0 #30140d}
.scene-home{position:absolute;bottom:4%;left:5%;padding:12px 18px;border:3px solid #6b351e;border-radius:12px;background:#fff2c9;color:#4d2718;text-decoration:none;font:900 16px ui-rounded,"Segoe UI",sans-serif;box-shadow:0 5px 0 #4a2316}
.game-workspace{min-width:0}.game-header{display:none}.game-layout{display:grid;grid-template-columns:minmax(225px,260px) minmax(460px,1fr) minmax(230px,275px);gap:14px;width:100%}
.panel{padding:18px;border-radius:20px;box-shadow:var(--soft-shadow);min-width:0}.panel-heading{display:flex;gap:10px;align-items:flex-start}.panel-heading.compact{margin-top:8px}.panel-heading h2{margin:0;font-size:22px;line-height:1.05}.panel-icon{font-size:28px}.instruction{margin:6px 0 14px;font:500 16px ui-rounded,"Segoe UI",sans-serif;color:#6b4a36}
.market-panel{align-self:start;min-height:calc(100vh - 36px)}.market{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.ingredient{min-height:104px;padding:7px;border:3px solid #d08b43;border-radius:15px;background:linear-gradient(#fffdf4,#fff1cf);font-size:45px;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:.15s;box-shadow:0 4px 0 #b6672e;color:#3c2518}.ingredient span{font:900 13px/1.05 ui-rounded,"Segoe UI",sans-serif}.ingredient:hover,.ingredient.selected{transform:translateY(-3px);border-color:#638847;box-shadow:0 7px 0 #466333,0 10px 16px #0002}.ingredient:disabled{filter:grayscale(.65);opacity:.58;transform:none;box-shadow:0 3px 0 #9c724d}.market-refresh{width:100%;margin-top:18px;padding:15px 10px;border:0;border-radius:15px;background:linear-gradient(#f5c454,#e3a327);color:#552d19;font-weight:900;font-size:19px;line-height:1.15;box-shadow:0 6px 0 #743916}.market-refresh span,.market-refresh small{display:block}.market-refresh small{margin-top:5px;font:800 13px ui-rounded,"Segoe UI",sans-serif}.market-refresh:disabled{filter:grayscale(.75);opacity:.55;cursor:not-allowed}
.recipes-zone{min-width:0}.turn-banner{background:linear-gradient(#7f9e43,#537431);border:3px solid #355323;border-radius:17px;padding:14px;text-align:center;color:#fffbe5;font-size:24px;font-weight:900;box-shadow:0 6px 0 #2b461d,var(--soft-shadow);margin-bottom:14px;text-shadow:0 2px #29431c}.turn-banner.mine{background:linear-gradient(#839f44,#567534)}.recipes{display:grid;grid-template-columns:1fr;gap:14px}.recipe-card{position:relative;display:grid;grid-template-columns:minmax(120px,30%) 1fr;grid-template-rows:auto auto auto;align-items:center;min-height:230px;padding:20px;text-align:left;border-color:#bb6b32;box-shadow:0 7px 0 #6e351d,var(--soft-shadow);transition:.16s}.recipe-card:hover{transform:translateY(-2px)}.recipe-card.disabled{opacity:.55}.recipe-owner{grid-column:1/-1;font:900 13px ui-rounded,"Segoe UI",sans-serif;color:#7c4d2d}.recipe-icon{grid-row:2/4;font-size:92px;text-align:center;filter:drop-shadow(0 7px 4px #6c3b1b30)}.recipe-card h3{grid-column:2;margin:4px 0 12px;font-size:28px;text-align:center}.slots{grid-column:2;display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.slot{width:72px;height:82px;border:3px dashed #d69c4f;border-radius:13px;background:#fffaf0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:36px}.slot.filled{border-style:solid;border-color:#6f914c;background:#eff7de}.slot small{font:900 10px ui-rounded,"Segoe UI",sans-serif}.reward{grid-column:2;margin-top:14px;text-align:center;font-weight:900;color:#b77d00;font-size:20px}
.side-panel{align-self:start;min-height:calc(100vh - 36px)}.score-row{font-size:16px;padding:12px}.score-row.active{outline:4px solid #e5aa2d}.score-row.me{background:#edf5dc}.side-divider{height:2px;margin:18px 0;background:linear-gradient(90deg,transparent,#c88c4c,transparent)}.bonuses{display:grid;gap:9px;margin-bottom:18px}.bonuses>p{font:500 16px/1.45 ui-rounded,"Segoe UI",sans-serif;color:#604735}.bonus{padding:12px;border:2px solid #c1803e;border-radius:13px;background:#fff9e8;text-align:left}.bonus:disabled{opacity:.5}.bonus strong{display:block}.bonus small{display:block;margin-top:4px;font-family:ui-rounded,"Segoe UI",sans-serif}.pass-button{width:100%;padding:17px 16px;border:0;border-radius:15px;background:linear-gradient(#ee8c15,#d66f05);color:#fff7df;font-weight:900;font-size:20px;box-shadow:0 6px 0 #7d390d;display:flex;align-items:center;justify-content:center;gap:12px}.pass-button span{font-size:34px;line-height:.5}.pass-button:disabled{filter:grayscale(.7);opacity:.55}
.message{margin:14px auto 0;max-width:1000px;padding:13px 18px;background:#fff1c7;border:3px solid #88502b;border-radius:16px;text-align:center;font:800 18px ui-rounded,"Segoe UI",sans-serif}.event-banner{margin-bottom:14px;padding:14px 20px;background:#6a438c;color:white;border:3px solid #43275e;border-radius:16px;text-align:center;font:900 19px ui-rounded,"Segoe UI",sans-serif;box-shadow:0 6px 0 #321b49,var(--shadow)}
.open-sign{align-self:start;margin-top:14px;padding:18px 8px;border:3px solid #7b3b20;border-radius:14px;background:#fff0c5;text-align:center;font-weight:900;font-size:18px;line-height:1.3;box-shadow:0 8px 0 #522718,var(--shadow);transform:rotate(1deg)}.open-sign span{display:block;margin-top:8px;color:#a54c25;font-size:28px}
.mobile-tabs,.mobile-recipe-nav{display:none}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(31,14,8,.78);display:flex;align-items:center;justify-content:center;padding:24px;z-index:50;backdrop-filter:blur(5px)}.modal-card{width:min(620px,96vw);max-height:90vh;overflow:auto;background:linear-gradient(#fff6dc,#ffe5aa);border:5px solid #92512b;border-radius:28px;padding:30px;text-align:center;box-shadow:0 25px 80px #0008}.modal-icon{font-size:72px}.modal-card h2{font-size:36px;margin:8px}.modal-card p{font:600 20px/1.4 ui-rounded,"Segoe UI",sans-serif}.end-scores{display:grid;gap:9px;margin:22px 0 8px;text-align:left}.end-score-row{display:flex;justify-content:space-between;gap:18px;padding:13px 15px;border:2px solid #c99b62;border-radius:13px;background:#fff8e7;font:700 17px ui-rounded,"Segoe UI",sans-serif}.end-score-row.me{border-color:#58823f;background:#eaf4d8}.modal-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:18px}.link-button{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}.modal-actions .primary,.modal-actions .secondary{margin-top:0}

/* Tablettes */
@media(max-width:1320px){
  .game-screen{grid-template-columns:250px minmax(0,1fr);padding:12px}.open-sign{display:none}.desktop-scene{min-height:calc(100vh - 24px)}.title-plaque{top:5%;left:5%;right:5%;padding:18px 10px}.title-plaque>span{font-size:36px}.title-plaque strong{font-size:34px}.scene-statuses{top:27%}.game-layout{grid-template-columns:220px minmax(400px,1fr)}.side-panel{grid-column:1/-1;min-height:auto;display:grid;grid-template-columns:1fr 1fr 220px;gap:14px;align-items:start}.side-panel>.panel-heading:first-child{grid-column:1}.side-panel #scoreboard{grid-column:1}.side-divider{display:none}.side-panel .panel-heading.compact{grid-column:2;grid-row:1}.side-panel #bonuses{grid-column:2;grid-row:2}.side-panel #passTurn{grid-column:3;grid-row:1/3;align-self:center}.market-panel{min-height:auto}
}

/* Téléphone et petite tablette */
@media(max-width:820px){
  body{background:#4b2317}.game-screen{display:none;grid-template-columns:1fr;padding:0;background:linear-gradient(#5b2b1b,#35170f)}.game-screen.active{display:block}.desktop-scene,.open-sign{display:none}.game-workspace{min-height:100vh;padding-bottom:calc(90px + env(safe-area-inset-bottom))}.game-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;background:linear-gradient(#6f361f,#482116);border-radius:0;box-shadow:0 5px 15px #0005;color:#fff8da}.brand{display:flex;align-items:center;gap:7px;font-size:17px}.brand span{font-size:26px}.header-statuses{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none}.header-statuses::-webkit-scrollbar{display:none}.status-pill{flex:none;padding:7px 9px;border-radius:999px;background:#8a4c2d;font:800 12px ui-rounded,"Segoe UI",sans-serif}.home-button{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 10px;border:2px solid #f5cf81;border-radius:10px;color:#4a2517;background:#fff0c5;font:900 12px ui-rounded,"Segoe UI",sans-serif;text-decoration:none}
  .mobile-tabs{position:fixed;z-index:30;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(3,1fr);padding:8px 8px calc(8px + env(safe-area-inset-bottom));background:rgba(55,25,16,.97);box-shadow:0 -6px 20px #0006}.mobile-tab{min-height:58px;border:0;border-radius:13px;background:transparent;color:#fbe7bc;font-size:23px}.mobile-tab span{display:block;font:800 11px ui-rounded,"Segoe UI",sans-serif}.mobile-tab.active{background:#e9ad37;color:#4a2417;box-shadow:inset 0 -4px #99511f}
  .event-banner{margin:10px 10px 0}.game-layout{display:block;margin:0;padding:10px}.mobile-panel{display:none!important}.mobile-panel.active{display:block!important}.panel,.recipes-zone{min-height:auto}.market-panel,.side-panel{min-height:auto}.panel{padding:15px;border-radius:18px}.panel-heading h2{font-size:20px}.market{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.ingredient{min-height:92px;font-size:39px}.ingredient span{font-size:12px}.market-refresh{font-size:18px}.turn-banner{font-size:20px;margin-bottom:10px}.mobile-recipe-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin:0 0 10px}.mobile-recipe-nav button{width:48px;height:44px;border:0;border-radius:13px;background:#e7ad39;color:#4d2718;font-size:34px;font-weight:900;box-shadow:0 4px 0 #7a3a1e}.mobile-recipe-nav span{font:900 14px ui-rounded,"Segoe UI",sans-serif;color:#fff0c7}.recipes{display:block}.recipe-card{display:grid;grid-template-columns:100px 1fr;min-height:245px;padding:16px}.recipe-card.mobile-hidden{display:none}.recipe-icon{font-size:70px}.recipe-card h3{font-size:24px}.slots{gap:7px}.slot{width:65px;height:76px;font-size:32px}.reward{font-size:18px}.side-panel{display:block}.message{margin:0 10px 10px;font-size:15px}.score-row{font-size:16px}.pass-button{margin-top:12px}.home-screen,.lobby-screen{padding:12px}.hero,.lobby-card{padding:22px}.mode-choice{grid-template-columns:1fr}.hero h1{font-size:44px}.hero>p:not(.eyebrow){font-size:17px}.join{grid-template-columns:1fr}.join button{width:100%}.modal{padding:10px}.modal-card{padding:22px}.end-score-row{align-items:flex-start;flex-direction:column;gap:5px}.modal-actions{display:grid}.modal-actions>*{width:100%}
}

@media(max-width:420px){
  .brand strong{display:none}.market{grid-template-columns:repeat(2,1fr)}.ingredient{min-height:98px}.recipe-card{grid-template-columns:1fr;text-align:center}.recipe-icon{grid-row:auto}.recipe-card h3,.slots,.reward{grid-column:1}.recipe-icon{font-size:62px}.slot{width:62px;height:72px}.title-plaque{display:none}
}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* === Intégration du pack graphique illustré === */
.home-screen,.lobby-screen{
  background:
    linear-gradient(rgba(46,22,10,.2),rgba(46,22,10,.38)),
    url("./assets/backgrounds/01_desktop_background.png") center/cover fixed;
}
.desktop-scene{
  background:
    linear-gradient(180deg,rgba(40,17,10,.05),rgba(40,17,10,.16)),
    url("./assets/backgrounds/01_desktop_background.png") center/cover no-repeat;
}
.game-screen{
  height:100dvh;
  min-height:0;
  overflow:hidden;
}
.game-workspace{min-height:0;height:calc(100dvh - 36px);overflow:hidden}
.game-layout{min-height:0;overflow:hidden}
.recipes-zone{min-height:0;overflow:auto}

.title-plaque{
  background:url("./assets/ui/game-logo.webp") center/contain no-repeat;
  border:0;box-shadow:none;color:transparent;text-shadow:none;
  min-height:150px;padding:0;
}
.title-plaque>*{visibility:hidden}
.turn-banner{background:url("./assets/ui/turn-banner.webp") center/100% 100% no-repeat;border:0;box-shadow:none}
.market-panel{background:url("./assets/ui/ingredient-panel.webp") center/100% 100% no-repeat;border:0}
.side-panel{background:url("./assets/ui/player-panel.webp") center/100% 100% no-repeat;border:0}
.recipe-card{background:url("./assets/ui/recipe-card.webp") center/100% 100% no-repeat;border:0}
.modal-card{background:url("./assets/ui/modal-panel.webp") center/100% 100% no-repeat;border:0}
.status-pill,.wood-chip{background:url("./assets/ui/mode-pill.webp") center/100% 100% no-repeat;border:0;box-shadow:none}
.primary{background:url("./assets/ui/primary-button.webp") center/100% 100% no-repeat;color:#fff;border:0;box-shadow:none}
.secondary,.pass-button,#joinRoom{background:url("./assets/ui/secondary-button.webp") center/100% 100% no-repeat;border:0;box-shadow:none}
.home-button,.scene-home{background:url("./assets/ui/home-button.webp") center/100% 100% no-repeat;border:0;box-shadow:none;color:#fff}
.market-refresh{background:url("./assets/ui/back-button.webp") center/100% 100% no-repeat;border:0;box-shadow:none}
.open-sign{background:none;border:0;box-shadow:none;padding:0;display:flex;align-items:flex-end}
.open-sign img{width:100%;height:auto;max-height:48vh;object-fit:contain;filter:drop-shadow(0 12px 12px rgba(40,16,8,.35))}

.ingredient-picture{width:78px;height:78px;display:block;object-fit:contain;margin:0 auto 4px;filter:drop-shadow(0 4px 4px rgba(73,34,13,.22))}
.recipe-picture{width:120px;height:100px;display:block;object-fit:contain;margin:auto;filter:drop-shadow(0 5px 5px rgba(73,34,13,.25))}
.slot-picture{width:48px;height:48px;display:block;object-fit:contain;margin:auto}
.bonus-picture{width:58px;height:58px;object-fit:contain;flex:0 0 auto}
.event-picture{width:62px;height:62px;object-fit:contain;flex:0 0 auto}
.fallback-icon{display:inline-grid;place-items:center;font-size:2.4rem}
.bonus{display:flex;align-items:center;gap:10px;text-align:left}
.bonus span{display:grid;gap:3px}.bonus strong,.bonus small{display:block}
.event-banner{display:flex;align-items:center;justify-content:center;gap:12px}
.event-banner span{display:grid;text-align:left}.event-banner strong,.event-banner small{display:block}
.recipe-icon{font-size:0}
.slot>div{font-size:0}

.scene-decor{position:absolute;pointer-events:none;object-fit:contain;filter:drop-shadow(0 10px 9px rgba(55,24,9,.28));z-index:1}
.decor-window{width:48%;right:5%;top:20%}
.decor-shelf{width:50%;left:3%;bottom:4%}
.decor-basket{width:30%;right:7%;bottom:5%}
.decor-herbs{width:20%;left:8%;top:43%}
.title-plaque,.scene-statuses,.scene-home{position:relative;z-index:2}

@media(max-width:760px){
  body{overflow:auto}
  .home-screen,.lobby-screen,.game-screen{
    background:
      linear-gradient(rgba(46,22,10,.12),rgba(46,22,10,.28)),
      url("./assets/backgrounds/02_mobile_background.png") top center/cover fixed;
  }
  .game-screen{height:auto;min-height:100dvh;overflow:auto}
  .game-workspace{height:auto;min-height:100dvh;overflow:visible}
  .game-layout{overflow:visible}
  .recipes-zone{overflow:visible}
  .ingredient-picture{width:68px;height:68px}
  .recipe-picture{width:150px;height:120px}
  .open-sign,.desktop-scene{display:none!important}
}

/* === Correctif géométrie PC : panneaux CSS responsives, sans étirement des assets UI === */
@media (min-width: 821px) {
  html,
  body {
    height: 100%;
    overflow: hidden;
  }

  .game-screen {
    height: 100dvh;
    min-height: 0;
    grid-template-columns: clamp(250px, 24vw, 360px) minmax(0, 1fr) clamp(76px, 6vw, 104px);
    gap: clamp(10px, 1vw, 16px);
    padding: clamp(10px, 1.2vw, 18px);
    overflow: hidden;
  }

  .desktop-scene,
  .game-workspace {
    height: calc(100dvh - 2 * clamp(10px, 1.2vw, 18px));
    min-height: 0;
  }

  .game-workspace {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
  }

  .event-banner {
    margin: 0 0 10px;
  }

  .game-layout {
    min-height: 0;
    height: 100%;
    grid-template-columns:
      minmax(190px, 230px)
      minmax(360px, 1fr)
      minmax(210px, 260px);
    gap: clamp(10px, 1vw, 14px);
    align-items: stretch;
    overflow: hidden;
  }

  .market-panel,
  .side-panel,
  .recipes-zone {
    min-height: 0;
    height: 100%;
  }

  .market-panel,
  .side-panel {
    align-self: stretch;
    overflow: hidden;
  }

  .market-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .market {
    min-height: 0;
    overflow-y: auto;
    align-content: start;
    padding: 2px 4px 8px 2px;
  }

  .recipes-zone {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
  }

  .recipes {
    min-height: 0;
    overflow-y: auto;
    align-content: start;
    padding: 2px 6px 8px 2px;
  }

  .side-panel {
    display: grid;
    grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
  }

  .bonuses {
    min-height: 0;
    overflow-y: auto;
    align-content: start;
    padding-right: 4px;
  }

  .message {
    margin-top: 10px;
    padding: 10px 14px;
    font-size: 16px;
  }

  /* Les illustrations UI gardent leur rôle décoratif sans être étirées. */
  .market-panel,
  .side-panel,
  .recipe-card,
  .turn-banner,
  .modal-card,
  .status-pill,
  .wood-chip,
  .secondary,
  .pass-button,
  .home-button,
  .scene-home,
  .market-refresh {
    background-image: none !important;
  }

  .market-panel,
  .side-panel {
    background:
      linear-gradient(180deg, rgba(255, 249, 229, .97), rgba(255, 231, 184, .96));
    border: 3px solid var(--line);
    border-radius: 20px;
    box-shadow: var(--soft-shadow);
  }

  .recipe-card {
    background:
      linear-gradient(180deg, rgba(255, 249, 229, .98), rgba(255, 232, 183, .98));
    border: 3px solid #bb6b32;
    border-radius: 20px;
    box-shadow: 0 7px 0 #6e351d, var(--soft-shadow);
  }

  .turn-banner {
    background: linear-gradient(#7f9e43, #537431);
    border: 3px solid #355323;
    box-shadow: 0 6px 0 #2b461d, var(--soft-shadow);
  }

  .status-pill,
  .wood-chip {
    background: linear-gradient(#a86431, #74381f);
    border: 3px solid #3e1d12;
    box-shadow: 0 5px 0 #30140d;
  }

  .secondary,
  #joinRoom {
    background: linear-gradient(#f1c35c, #dc9e2f);
    box-shadow: 0 5px 0 #865019;
  }

  .pass-button,
  .market-refresh {
    background: linear-gradient(#ee8c15, #d66f05);
    box-shadow: 0 6px 0 #7d390d;
  }

  .home-button,
  .scene-home {
    background: #fff0c5;
    border: 3px solid #6b351e;
    color: #4d2718;
    box-shadow: 0 5px 0 #4a2316;
  }

  .modal-card {
    background: linear-gradient(#fff6dc, #ffe5aa);
    border: 5px solid #92512b;
    box-shadow: 0 25px 80px #0008;
  }

  .ingredient-picture {
    width: clamp(58px, 4.4vw, 76px);
    height: clamp(58px, 4.4vw, 76px);
  }

  .recipe-picture {
    width: clamp(100px, 8vw, 132px);
    height: clamp(86px, 7vw, 108px);
  }
}

/* Ordinateurs étroits : on masque seulement la scène décorative, sans changer la structure du jeu. */
@media (min-width: 821px) and (max-width: 1180px) {
  .game-screen {
    grid-template-columns: minmax(0, 1fr);
  }

  .desktop-scene,
  .open-sign {
    display: none;
  }

  .game-workspace {
    height: calc(100dvh - 24px);
  }

  .game-layout {
    grid-template-columns:
      minmax(185px, 220px)
      minmax(340px, 1fr)
      minmax(200px, 240px);
  }
}


/* ========================================================================== */
/* 2. ARCHITECTURE RESPONSIVE CANONIQUE                                       */
/* ========================================================================== */
/*
 * Architecture responsive de La Cuisine magique.
 *
 * Ce fichier définit uniquement la structure des trois layouts :
 *   - téléphone : 0 à 767 px ;
 *   - tablette  : 768 à 1199 px ;
 *   - PC        : 1200 px et plus.
 *
 * Il est chargé après styles.css et avant layout.generated.css.
 * layout.generated.css reste entièrement généré par l'éditeur.
 */

/* État commun : les composants mobiles sont inactifs hors téléphone. */
.mobile-tabs,
.mobile-recipe-nav {
  display: none;
}

/* ========================================================================== */
/* PC : scène décorative + plateau à trois colonnes + enseigne               */
/* ========================================================================== */
@media (min-width: 1200px) {
  html,
  body {
    height: 100%;
    overflow: hidden;
  }

  .game-screen.active {
    display: grid;
  }

  .game-screen {
    height: 100dvh;
    min-height: 0;
    grid-template-columns:
      clamp(250px, 24vw, 360px)
      minmax(0, 1fr)
      clamp(76px, 6vw, 104px);
    gap: clamp(10px, 1vw, 16px);
    padding: clamp(10px, 1.2vw, 18px);
    overflow: hidden;
  }

  .desktop-scene,
  .open-sign {
    display: flex;
  }

  .desktop-scene {
    display: block;
    height: calc(100dvh - 2 * clamp(10px, 1.2vw, 18px));
    min-height: 0;
  }

  .game-workspace {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: calc(100dvh - 2 * clamp(10px, 1.2vw, 18px));
    min-height: 0;
    overflow: hidden;
  }

  .game-header,
  .mobile-tabs,
  .mobile-recipe-nav {
    display: none;
  }

  .game-layout {
    display: grid;
    grid-template-columns:
      minmax(190px, 230px)
      minmax(360px, 1fr)
      minmax(210px, 260px);
    grid-template-areas: "market recipes side";
    gap: clamp(10px, 1vw, 14px);
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    align-items: stretch;
  }

  .market-panel {
    grid-area: market;
  }

  .recipes-zone {
    grid-area: recipes;
  }

  .side-panel {
    grid-area: side;
  }

  .mobile-panel,
  .mobile-panel.active {
    display: block !important;
  }

  .market-panel,
  .side-panel,
  .recipes-zone {
    height: 100%;
    min-height: 0;
  }
}

/* ========================================================================== */
/* Tablette : en-tête compact, marché + recettes, joueurs en pleine largeur   */
/* ========================================================================== */
@media (min-width: 768px) and (max-width: 1199px) {
  html,
  body {
    min-height: 100%;
    overflow: auto;
  }

  .game-screen.active {
    display: block;
  }

  .game-screen {
    height: auto;
    min-height: 100dvh;
    padding: 12px;
    overflow: visible;
    background: linear-gradient(#5b2b1b, #35170f);
  }

  .desktop-scene,
  .open-sign {
    display: none !important;
  }

  .game-workspace {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    width: 100%;
    height: auto;
    min-height: calc(100dvh - 24px);
    overflow: visible;
  }

  .game-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
    padding: 10px 14px;
    border-radius: 16px;
    background: linear-gradient(#6f361f, #482116);
    box-shadow: 0 5px 15px #0005;
    color: #fff8da;
  }

  .brand,
  .header-statuses {
    display: flex;
    align-items: center;
  }

  .brand {
    gap: 8px;
    font-size: 18px;
  }

  .brand span {
    font-size: 28px;
  }

  .header-statuses {
    gap: 7px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .header-statuses::-webkit-scrollbar {
    display: none;
  }

  .status-pill {
    flex: none;
    padding: 8px 11px;
    border-radius: 999px;
    font: 800 13px ui-rounded, "Segoe UI", sans-serif;
  }

  .home-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 10px;
    text-decoration: none;
    font: 900 13px ui-rounded, "Segoe UI", sans-serif;
  }

  .mobile-tabs,
  .mobile-recipe-nav {
    display: none;
  }

  .event-banner {
    margin: 0 0 12px;
  }

  .game-layout {
    display: grid;
    grid-template-columns: minmax(220px, 32%) minmax(0, 1fr);
    grid-template-areas:
      "market recipes"
      "side side";
    gap: 12px;
    width: 100%;
    height: auto;
    min-height: 0;
    overflow: visible;
    align-items: start;
  }

  .market-panel {
    grid-area: market;
  }

  .recipes-zone {
    grid-area: recipes;
  }

  .side-panel {
    grid-area: side;
  }

  .mobile-panel,
  .mobile-panel.active {
    display: block !important;
  }

  .market-panel,
  .recipes-zone,
  .side-panel {
    width: auto;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .side-panel {
    display: grid !important;
    grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) minmax(180px, 230px);
    grid-template-rows: auto auto;
    gap: 10px 16px;
    align-items: start;
  }

  .side-panel > .panel-heading:first-child {
    grid-column: 1;
    grid-row: 1;
  }

  .side-panel #scoreboard {
    grid-column: 1;
    grid-row: 2;
  }

  .side-panel .side-divider {
    display: none;
  }

  .side-panel .panel-heading.compact {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
  }

  .side-panel #bonuses {
    grid-column: 2;
    grid-row: 2;
    min-height: 0;
    margin-bottom: 0;
  }

  .side-panel #passTurn {
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
  }

  .recipes {
    overflow: visible;
  }

  .recipe-card.mobile-hidden {
    display: grid;
  }
}

/* Tablette étroite/portrait : le panneau joueurs revient sur deux niveaux. */
@media (min-width: 768px) and (max-width: 899px) {
  .game-layout {
    grid-template-columns: minmax(205px, 36%) minmax(0, 1fr);
  }

  .side-panel {
    grid-template-columns: 1fr 1fr;
  }

  .side-panel #passTurn {
    grid-column: 1 / -1;
    grid-row: 3;
    width: min(360px, 100%);
    justify-self: center;
  }
}

/* ========================================================================== */
/* Téléphone : un seul panneau visible, piloté par les onglets inférieurs     */
/* ========================================================================== */
@media (max-width: 767px) {
  html,
  body {
    min-height: 100%;
    overflow: auto;
  }

  body {
    background: #4b2317;
  }

  .game-screen.active {
    display: block;
  }

  .game-screen {
    height: auto;
    min-height: 100dvh;
    grid-template-columns: 1fr;
    padding: 0;
    overflow: visible;
    background: linear-gradient(#5b2b1b, #35170f);
  }

  .desktop-scene,
  .open-sign {
    display: none !important;
  }

  .game-workspace {
    display: block;
    height: auto;
    min-height: 100dvh;
    padding-bottom: calc(90px + env(safe-area-inset-bottom));
    overflow: visible;
  }

  .game-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 0;
    background: linear-gradient(#6f361f, #482116);
    box-shadow: 0 5px 15px #0005;
    color: #fff8da;
  }

  .brand,
  .header-statuses {
    display: flex;
    align-items: center;
  }

  .brand {
    gap: 7px;
    font-size: 17px;
  }

  .brand span {
    font-size: 26px;
  }

  .header-statuses {
    gap: 5px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .header-statuses::-webkit-scrollbar {
    display: none;
  }

  .status-pill {
    flex: none;
    padding: 7px 9px;
    border-radius: 999px;
    font: 800 12px ui-rounded, "Segoe UI", sans-serif;
  }

  .home-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 10px;
    border-radius: 10px;
    text-decoration: none;
    font: 900 12px ui-rounded, "Segoe UI", sans-serif;
  }

  .mobile-tabs {
    position: fixed;
    z-index: 30;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    background: rgba(55, 25, 16, .97);
    box-shadow: 0 -6px 20px #0006;
  }

  .mobile-tab {
    min-height: 58px;
    border: 0;
    border-radius: 13px;
    background: transparent;
    color: #fbe7bc;
    font-size: 23px;
  }

  .mobile-tab span {
    display: block;
    font: 800 11px ui-rounded, "Segoe UI", sans-serif;
  }

  .mobile-tab.active {
    background: #e9ad37;
    color: #4a2417;
    box-shadow: inset 0 -4px #99511f;
  }

  .event-banner {
    margin: 10px 10px 0;
  }

  .game-layout {
    display: block;
    width: auto;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 10px;
    overflow: visible;
  }

  .mobile-panel {
    display: none !important;
  }

  .mobile-panel.active {
    display: block !important;
  }

  .market-panel,
  .recipes-zone,
  .side-panel {
    width: auto;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .mobile-recipe-nav {
    display: flex;
  }

  .recipes {
    display: block;
    overflow: visible;
  }

  .recipe-card.mobile-hidden {
    display: none;
  }
}


/* ========================================================================== */
/* 3. AJUSTEMENTS ISSUS DE WEB LAYOUT STUDIO                                  */
/* ========================================================================== */
/*
 * Généré automatiquement par Web Layout Studio V8 pour Mon projet web.
 * Contient la base CSS générée précédemment et les modifications ajoutées dans la session/projet V8.
 * Ne pas modifier manuellement si ce fichier est régénéré par l'éditeur.
 */

/* PC */
@media (min-width: 1200px) {
  .scene-home {
    transform: translate(-5px, 32px);
    display: grid;
    width: 257px;
    height: 55px;
    position: absolute;
    left: 12.86%;
    top: 88.21%;
    margin: 0;
  }

  .scene-decor.decor-shelf {
    position: absolute;
    left: 36.39%;
    top: 82.59%;
    margin: 0;
    display: none;
  }

  .scene-decor.decor-basket {
    position: absolute;
    left: 64.65%;
    top: 70.38%;
    margin: 0;
    display: none;
  }

  .scene-decor.decor-herbs {
    position: absolute;
    left: 11.64%;
    top: 74.00%;
    margin: 0;
    display: none;
  }

  .scene-decor.decor-window {
    position: absolute;
    left: 49.31%;
    top: 27.17%;
    margin: 0;
    margin-left: -60px;
    margin-top: -104px;
    display: none;
  }

  .title-plaque {
    position: absolute;
    left: 369.91%;
    top: 45.05%;
    margin: 0;
    width: 199px;
    height: 108px;
    z-index: 70;
  }

  .scene-statuses {
    position: absolute;
    left: 32.76%;
    top: 45.61%;
    margin: 0;
    width: 169px;
    height: 158px;
    margin-left: -73px;
    margin-top: -319px;
  }

  .panel.market-panel.mobile-panel.active {
    background-color: #fff0c5;
  }

  #refreshMarket {
    background-color: #ffbe6f;
  }

  .recipe-card {
    background-color: #fffbe5;
  }

  .panel.side-panel.mobile-panel {
    background-color: #fff0c5;
  }

  #passTurn {
    color: #000000;
    background-color: #ffa348;
  }

  #turnBanner {
    background-color: #33d17a;
  }

  .desktop-scene {
    background-position: center,
      0% 0%;
    width: 371px;
    height: 864px;
  }

  #modeLabelDesktop {
    background-color: #b5835a;
  }

  .wood-chip {
    background-color: #b5835a;
  }

  #goalDesktop {
    background-color: #b5835a;
  }

  main > section:nth-of-type(3) > aside > img {
    display: none;
  }
}

/* Téléphone */
@media (max-width: 767px) {
  .ingredient {
    width: 115px;
    height: 56px;
    z-index: 10;
  }

  #market {
    width: 249px;
    height: 419px;
    margin-left: 50px;
    margin-top: 18px;
  }

  .panel-heading {
    width: 272px;
    height: 63px;
    margin-left: 23px;
    margin-top: 2px;
  }

  #refreshMarket {
    width: 188px;
    height: 55px;
    margin-left: 79px;
    margin-top: 12px;
  }

  .header-statuses {
    margin-left: -71px;
    margin-top: -5px;
    width: 291px;
    height: 31px;
    display: flex;
  }

  main > section:nth-of-type(3) > div:nth-of-type(2) > header > div:nth-of-type(1) > span {
    display: none;
  }

  .home-button {
    color: #000000;
  }

  .reward {
    margin-left: -1px;
    margin-top: 21px;
  }

  .recipe-card {
    width: 370px;
    height: 295px;
  }

  #passTurn {
    background-color: rgba(0,0,0,0);
  }

  .score-row.active.me {
    width: 311px;
    height: 50px;
    margin-left: 14px;
    margin-top: 1px;
  }

  #bonuses {
    margin-left: 19px;
    margin-top: -44px;
    width: 305px;
    height: 67px;
  }
}

/* === Consolidation V8 === */

/* Téléphone */
@media (max-width: 767px) {
  .header-statuses {
    transform: translate(31px, 3px);
  }
}

/* === Modifications ajoutées par Web Layout Studio V8 === */

/* Téléphone */
@media (max-width: 767px) {
  .panel-heading {
    transform: translate(8px, 19px);
  }

  .instruction {
    transform: translate(-11px, -13px);
    width: 160px;
    height: 73px;
    z-index: 30;
    display: none;
  }

  main > section:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > aside:nth-of-type(1) > button > span {
    width: 289px;
    height: 45px;
    transform: translate(-64px, 5px);
  }

  main > section:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > aside:nth-of-type(1) > button > small {
    transform: translate(-8px, -24px);
    width: 168px;
    height: 25px;
  }

  .panel.market-panel.mobile-panel.active {
    width: 370px;
    height: 655px;
  }

  #modeLabel {
    transform: translate(-7px, 1px);
  }

  .status-pill {
    transform: translate(-13px, 2px);
  }

  #goalBox {
    transform: translate(-15px, 0px);
    width: 124px;
    height: 29px;
  }

  .header-statuses {
    width: 307px;
    height: 31px;
  }

  #passTurn {
    color: #c01c28;
  }
}