/* Just Cook - NR Partners 29/09/2026
   Étape 1 : copie fidèle de la maquette validée (mesures relevées sur la maquette à 1899 px de large). */
:root{
  --jc-red:#c33332;        /* boutons, catégorie active, onglet actif */
  --jc-red-dark:#b12121;   /* bandeau promotionnel */
  --jc-light:#f2f3f8;      /* colonne catégories, blocs du panier */
  --jc-line:#e5e5e5;
  --jc-ink:#111;
  --jc-text:#555;
  --jc-muted:#999;
  --jc-green:#4c8a2b;
  --jc-footer:#282c35;
  --jc-footer-line:#53565d;
  --f-title:"PT Sans","Trebuchet MS",Arial,sans-serif;
  --f-ui:"Montserrat","Segoe UI",Arial,sans-serif;
  --f-text:"Open Sans","Segoe UI",Arial,sans-serif;
  --f-promo:Arial,"Helvetica Neue",Helvetica,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body.jc{margin:0;background:#fff;color:var(--jc-text);font:14px/1.6 var(--f-text);-webkit-font-smoothing:antialiased}
.jc img{max-width:100%;display:block}
.jc a{color:inherit;text-decoration:none}
:where(.jc) :where(h1,h2,h3,p,ul){margin:0;padding:0}
:where(.jc) ul{list-style:none}
.jc [hidden]{display:none!important}
.jc button{font:inherit;cursor:pointer}
.jc :focus-visible{outline:2px solid var(--jc-red);outline-offset:2px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.jc-wrap{width:100%;max-width:1170px;margin:0 auto;padding-inline:15px}
.jc-ico{display:block;flex:none}

/* ---------- Haut de page : mosaïque ---------- */
.jc-hero{position:relative;aspect-ratio:1899/969;min-height:520px;background:#222 var(--jc-hero) center/cover no-repeat;display:grid;place-items:center;overflow:hidden}
.jc-logo{position:absolute;top:10px;left:18px;display:grid;justify-items:center;color:#fff;line-height:1}
.jc-logo-mark{font:700 64px/1 var(--f-title);letter-spacing:-4px;border:5px solid #fff;border-radius:0 44px 44px 0;padding:4px 18px 2px 10px}
.jc-logo-name{font:500 15px/1 var(--f-ui);letter-spacing:2px;margin-top:8px}
.jc-logo-sub{font:500 7px/1 var(--f-ui);letter-spacing:1px;align-self:end;justify-self:end;margin-top:2px}
.jc-burger{position:absolute;top:32%;left:30px;width:30px;height:30px;border:0;border-radius:2px;background:var(--jc-red);color:#fff;display:grid;place-items:center;padding:0}
.jc-burger .jc-ico{width:20px;height:20px}
.jc-nav{position:absolute;top:calc(32% + 36px);left:30px;background:#fff;border-radius:2px;box-shadow:0 6px 20px rgba(0,0,0,.2);display:grid;min-width:190px;z-index:5}
.jc-nav[hidden]{display:none}
.jc-nav a{font:700 12px/1 var(--f-ui);text-transform:uppercase;letter-spacing:.5px;color:#333;padding:14px 16px;border-bottom:1px solid var(--jc-line)}
.jc-nav a:hover{color:var(--jc-red)}
.jc-top-right{position:absolute;top:42px;right:10px;display:flex;align-items:center;gap:22px}
.jc-login{font:700 12px/1 var(--f-ui);text-transform:uppercase;color:var(--jc-red)!important;opacity:.85}
.jc-btn{display:inline-flex;align-items:center;justify-content:center;font:700 13px/1 var(--f-ui);text-transform:uppercase;border-radius:2px;transition:filter .15s}
.jc-btn:hover{filter:brightness(1.08)}
.jc-btn-red{background:var(--jc-red);color:#fff!important;height:36px;padding:0 16px}
.jc-hero-text{text-align:center;color:#fff;padding:0 20px;margin-top:6%}
.jc-hero-text h1{font:700 clamp(24px,2.55vw,50px)/1.33 var(--f-title);text-transform:uppercase;letter-spacing:.5px;text-shadow:0 2px 6px rgba(0,0,0,.35)}
.jc-hero-text p{font:400 clamp(15px,1.05vw,20px)/1.2 var(--f-title);letter-spacing:.4px;margin-top:-4px;text-shadow:0 1px 4px rgba(0,0,0,.4)}
.jc-hero-icons{display:flex;justify-content:center;gap:46px;margin-top:clamp(40px,5.5vw,104px)!important}
.jc-hero-icons li{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff}
.jc-hero-icons .jc-ico{width:22px;height:22px}
.i-bleu{background:rgba(52,136,189,.78)}
.i-orange{background:rgba(234,92,54,.82)}
.i-vert{background:rgba(141,198,24,.9)}

/* ---------- Bandeau rouge ---------- */
.jc-promo{background:var(--jc-red-dark);color:#fff;padding:32px 0 34px}
.jc-promo-in{display:flex;align-items:center;justify-content:space-between;gap:30px}
.jc-promo h2{font:700 30px/40px var(--f-promo);text-transform:uppercase;max-width:760px}
.jc-promo p{font:400 14px/1.4 var(--f-promo);margin-top:4px}
.jc-btn-white{background:#fff;color:var(--jc-red-dark)!important;font:700 16px/1 var(--f-promo);height:44px;padding:0 24px;flex:none;box-shadow:0 1px 2px rgba(0,0,0,.15)}

/* ---------- Carte : 3 colonnes ---------- */
.jc-shop{display:grid;grid-template-columns:165px minmax(0,1fr) 263px;gap:29px;align-items:start;padding-top:73px;padding-bottom:80px}
.jc-cats{background:var(--jc-light);min-height:100%}
.jc-cats a{display:grid;justify-items:center;gap:8px;text-align:center;padding:21px 12px;border-bottom:1px solid #e3e5ec;font:700 12.5px/1.3 var(--f-ui);text-transform:uppercase;color:#333}
.jc-cats a .jc-ico{width:26px;height:26px;color:#333}
.jc-cats a.is-active{background:var(--jc-red);color:#fff}
.jc-cats a.is-active .jc-ico{color:#fff}
.jc-cats a:not(.is-active):hover{color:var(--jc-red)}

.jc-tabs{display:flex;gap:46px;border-bottom:1px solid var(--jc-line);padding-bottom:12px!important}
.jc-tabs li{display:grid;justify-items:center;gap:6px;font:700 12px/1 var(--f-ui);text-transform:uppercase;color:#a0a0a0;letter-spacing:.2px}
.jc-tabs li .jc-ico{width:26px;height:24px;color:#a0a0a0}
.jc-tabs li.is-active,.jc-tabs li.is-active .jc-ico{color:var(--jc-red)}
.jc-search{display:block;margin-top:9px;box-shadow:0 6px 6px -6px rgba(0,0,0,.15)}
.jc-search input{width:100%;height:42px;border:1px solid var(--jc-line);border-radius:2px;padding:0 10px;font:600 12px/1 var(--f-text);letter-spacing:1px;color:#333;background:#fff}
.jc-search input::placeholder{color:#777}
.jc-cat{padding-top:36px}
.jc-cat h2{font:400 22px/1.2 var(--f-title);color:var(--jc-red);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px;letter-spacing:.3px}
.jc-cat-desc{font:400 13px/1.3 var(--f-text);color:#444;margin-top:6px!important}
.jc-dishes{margin-top:20px!important}
.jc-dish{display:grid;grid-template-columns:64px minmax(0,1fr) auto 24px;gap:14px 14px;align-items:center;padding:18px 0;border-bottom:1px solid var(--jc-line)}
.jc-dish img{width:64px;height:64px;border-radius:50%;object-fit:cover}
.jc-dish h3{font:700 14px/1.2 var(--f-ui);letter-spacing:.6px;color:var(--jc-ink);display:flex;align-items:center;gap:6px}
.jc-badge{width:14px;height:14px;border-radius:50%;background:var(--jc-red);color:#fff;display:inline-grid;place-items:center}
.jc-badge .jc-ico{width:10px;height:10px;stroke-width:2.4}
.jc-dish p{font:400 11.5px/1.45 var(--f-text);color:var(--jc-muted);margin-top:4px!important}
.jc-price{font:400 13px/1 var(--f-text);color:#333;white-space:nowrap;padding-left:10px}
.jc-add{width:22px;height:22px;border:1.5px solid var(--jc-red);border-radius:50%;background:#fff;color:var(--jc-red);display:grid;place-items:center;padding:0;margin-left:20px}
.jc-add .jc-ico{width:14px;height:14px;stroke-width:1.6}
.jc-add:hover{background:var(--jc-red);color:#fff}
.jc-dish[hidden]{display:none}

/* ---------- Votre commande ---------- */
.jc-cart{border:1px solid var(--jc-line);background:#fff;position:sticky;top:20px}
.jc-cart-head{display:flex;align-items:center;gap:14px;background:var(--jc-light);padding:14px 20px 12px}
.jc-cart-head .jc-ico{width:22px;height:22px;color:#111}
.jc-cart-head h2{font:800 16px/1.2 var(--f-ui);text-transform:uppercase;color:#111;letter-spacing:.3px;max-width:130px}
.jc-cart-red{font:400 12px/24px var(--f-text);color:var(--jc-red);padding:10px 20px 10px}
.jc-cart-grey{background:var(--jc-light);font:400 11.5px/16px var(--f-text);color:var(--jc-muted);padding:14px 20px}
.jc-cart-mode{display:grid;grid-template-columns:1fr 1fr;padding:22px 20px 16px;border-bottom:1px solid var(--jc-line)}
.jc-cart-mode label{display:grid;grid-template-columns:auto auto;justify-content:center;column-gap:8px;align-items:center;cursor:pointer}
.jc-cart-mode input{margin:0;accent-color:var(--jc-red);width:11px;height:11px}
.jc-cart-mode span{font:700 12px/1 var(--f-ui);color:#222}
.jc-cart-mode small{grid-column:1/-1;text-align:center;font:400 10px/1 var(--f-ui);color:var(--jc-muted);margin-top:8px}
.jc-cart-items{padding:14px 20px;border-bottom:1px solid var(--jc-line)}
.jc-cart-empty{font:600 13px/24px var(--f-text);color:var(--jc-green);text-align:center}
.jc-cart-items ul li{display:flex;justify-content:space-between;gap:8px;font:600 12px/1.4 var(--f-text);color:#333;padding:6px 0;border-bottom:1px dashed var(--jc-line)}
.jc-cart-items ul li button{border:0;background:none;color:var(--jc-red);padding:0 0 0 6px;font-weight:700}
.jc-cart-total{display:flex;justify-content:space-between;font:700 13px/1 var(--f-ui);color:#111;padding-top:12px}
.jc-cart-pay{display:grid;grid-template-columns:1fr 1fr;padding:14px 20px 12px}
.jc-cart-pay label{display:grid;justify-items:center;gap:8px;cursor:pointer;font:700 14px/1 var(--f-text);color:#222}
.jc-cart-pay input{margin:0 2px 0 0;accent-color:#1a73e8;vertical-align:-1px}
.jc-pay-ico{width:49px;height:49px;border-radius:50%;background:#e8eaf0;display:grid;place-items:center;color:#9aa0ab}
.jc-pay-ico .jc-ico{width:22px;height:22px}
.jc-cart-date{display:flex;margin:4px 15px 15px;border:1px solid var(--jc-line)}
.jc-cart-date input{flex:1;min-width:0;border:0;height:38px;padding:0 15px;font:400 11px/1 var(--f-text);color:#666}
.jc-cart-date span{width:40px;display:grid;place-items:center;background:#e8eaf0;color:#333}
.jc-cart-date span .jc-ico{width:14px;height:14px}
.jc-confirm{width:calc(100% + 2px);margin:0 -1px -1px;height:45px;border:0;background:var(--jc-red);color:#fff;font:700 12.5px/1 var(--f-ui);text-transform:uppercase;letter-spacing:1px}
.jc-confirm:hover{filter:brightness(1.08)}

/* ---------- Pied de page ---------- */
.jc-footer{background:var(--jc-footer);color:#e1e1e1;padding-top:72px}
.jc-footer-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;padding-bottom:78px}
.jc-footer h2{font:700 15px/1 var(--f-ui);color:#b9bcc3;letter-spacing:.6px;margin-bottom:36px!important}
.jc-footer p{font:400 14px/24px var(--f-text);color:#e6e6e6;max-width:350px}
.jc-social{display:flex;gap:5px;margin-top:32px!important}
.jc-social li{width:35px;height:35px;display:grid;place-items:center;color:#fff}
.jc-social .jc-ico{width:18px;height:18px}
.s-fb{background:#3b548a}.s-tw{background:#00acee}.s-g{background:#b53a2b}.s-sh{background:#eb4923}
.jc-contact{display:grid;gap:10px}
.jc-contact li{display:flex;align-items:center;gap:13px;font:400 14px/24px var(--f-text);color:#e6e6e6}
.jc-contact span{width:40px;height:40px;border-radius:50%;background:var(--jc-red);display:grid;place-items:center;color:#fff;flex:none}
.jc-contact span .jc-ico{width:18px;height:18px}
.jc-footer-bottom{border-top:1px solid var(--jc-footer-line);padding-block:34px 36px;font:400 12px/1 var(--f-text);text-transform:uppercase;letter-spacing:1px;color:#d5d5d5;max-width:1140px}

/* ---------- Tablette et mobile ---------- */
@media (max-width:1100px){
  .jc-shop{grid-template-columns:150px minmax(0,1fr);}
  .jc-cart{grid-column:1/-1;position:static}
  .jc-tabs{gap:24px}
}
@media (max-width:760px){
  .jc-hero{aspect-ratio:auto;min-height:560px;background-image:var(--jc-hero-m)}
  .jc-logo{transform:scale(.8);transform-origin:top left}
  .jc-login{display:none}
  .jc-br{display:none}
  .jc-burger{top:120px;left:18px}
  .jc-nav{top:156px;left:18px}
  .jc-promo-in{flex-direction:column;align-items:flex-start}
  .jc-promo h2{font-size:22px;line-height:30px}
  .jc-shop{grid-template-columns:minmax(0,1fr);padding-top:40px}
  .jc-cats ul{display:flex;overflow-x:auto}
  .jc-cats li{flex:none}
  .jc-cats a{border-bottom:0;border-right:1px solid #e3e5ec;padding:14px 16px;height:100%}
  .jc-tabs{overflow-x:auto;gap:22px}
  .jc-tabs li{flex:none}
  .jc-dish{grid-template-columns:56px minmax(0,1fr) auto;row-gap:6px}
  .jc-dish img{width:56px;height:56px}
  .jc-add{grid-column:3;margin-left:0;justify-self:end}
  .jc-price{grid-column:3;grid-row:1;padding-left:0}
  .jc-footer-cols{grid-template-columns:1fr;gap:10px;padding-bottom:40px}
  .jc-footer h2{margin:26px 0 20px!important}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}