/* =========================================================
   Design Tokens — Colonel Moutarde
   ========================================================= */
:root{
  --moutarde:#E6A930; --vert-fonce:#126842; --muted:#7C7F85; --text:#1C1C1C;
  --bg:#FFFFFF; --surface:#F7F5F0; --line:#E8E6E0;
  --container:1444px; --radius:12px;
  --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

/* =========================================================
   Base
   ========================================================= */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.6 var(--font-sans);
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
.container{ max-width:var(--container); margin-inline:auto; padding-inline:20px; }
.muted{ color:var(--muted); }
.small{ font-size:13px; }

/* =========================================================
   Header / Navigation
   ========================================================= */
.nav{
  position:sticky; top:0; z-index:10;
  backdrop-filter:saturate(120%) blur(6px);
  background:rgba(255,255,255,.72);
  border-bottom:1px solid var(--line);
}
.nav__wrap{
  display:grid; grid-template-columns:1fr auto auto;
  gap:16px; align-items:center; height:72px;
}
.logo{ display:inline-block; line-height:0; }
.logo img{ height:48px; width:auto; display:block; }

.nav__links{ display:flex; align-items:center; gap:14px; font-weight:600; color:var(--muted); }
.nav__links .slash{ opacity:.35; }
.nav__cta{ display:flex; gap:10px; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 16px; border-radius:var(--radius);
  border:1px solid var(--line); background:#fff; color:#1C1C1C; font-weight:700;
  transition:transform .06s ease, box-shadow .12s ease; cursor:pointer;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 6px 14px rgba(0,0,0,.06); }
.btn--primary{ background:var(--moutarde); border-color:var(--moutarde); color:#fff; }
.btn--ghost{ background:#fff; border-color:var(--line); }

/* Burger (mobile) */
.menuPhone{ display:none; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:6px 8px; background:#fff; border:1px solid var(--line); border-radius:12px; }
.menuPhone span{ display:block; width:22px; height:2px; background:#222; border-radius:2px; }

@media (max-width:640px){
  .nav .container{ padding-left:max(8px, env(safe-area-inset-left)); padding-right:max(12px, env(safe-area-inset-right)); }
  .menuPhone{ display:inline-flex; }
  .nav__wrap{ grid-template-columns:auto 1fr auto; height:auto; padding-block:10px; gap:12px; }
  .nav__links{
    position:absolute; left:0; right:0; top:100%;
    background:#fff; border-bottom:1px solid var(--line); box-shadow:0 8px 22px rgba(0,0,0,.06);
    display:flex; flex-direction:column; gap:10px;
    padding:0 16px; overflow:hidden; max-height:0; transition:max-height .35s ease, padding .35s ease; z-index:20;
  }
  .nav__links.show{ max-height:240px; padding:10px 16px 14px; }
  .nav__links .slash{ display:none; }
  .nav__links a{ padding:8px 2px; font-weight:700; }
}

/* =========================================================
   Page title
   ========================================================= */
.page__head{ padding:22px 0 10px; }
.page__head h1{ margin:0 0 6px; font-size:28px; }

/* =========================================================
   Grille commande
   ========================================================= */
.order-grid{
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:24px; padding:14px 0 40px;
}
@media (max-width:980px){ .order-grid{ grid-template-columns:1fr; } }

.menu-section{ margin:10px 0 18px; }
.menu-title{ margin:0 0 8px; font-weight:800; font-size:20px; }
.menu-section .grid{ margin-top:8px; }

/* =========================================================
   Cartes / Modules génériques
   ========================================================= */
.card{
  padding:16px; border:1px solid var(--line); border-radius:var(--radius);
  background:#fff; box-shadow:0 10px 24px rgba(0,0,0,.06);
}

/* ✅ Labels d’options : corrige le texte “vertical” */
.check{ /* style générique si utilisé ailleurs */ }
.option-box{ display:grid; gap:6px; }
.option-line{
  display:grid;
  grid-template-columns: 24px 1fr;   /* case + texte */
  align-items:flex-start;
  column-gap:10px;
}
.option-line input[type="checkbox"]{ width:18px; height:18px; margin-top:2px; }
.option-line > span{
  min-width:0;               /* nécessaire pour autoriser le shrink */
  white-space:normal;        /* texte normal */
  overflow-wrap:anywhere;    /* coupe les très longs mots si besoin */
  color:var(--text);         /* évite d’hériter d’un vert/titre */
  font-weight:400;
  line-height:1.45;
}
.option-line > span .option-title{ font-weight:800; }

/* blocs spéciaux */
.student-offer{ margin-bottom:14px; }
.xl-option{ margin:14px 0; }
.xl-list{ display:grid; gap:8px; margin-top:6px; }
.xl-line{ display:grid; grid-template-columns: 24px 1fr auto; gap:10px; align-items:center; }
.xl-line input[type="checkbox"]{ width:18px; height:18px; }
.xl-line span{ min-width:0; overflow-wrap:anywhere; }

/* =========================================================
   Cartes produits
   ========================================================= */
.grid{ display:grid; gap:12px; }
.product-card{
  display:grid; grid-template-columns:1fr auto; gap:16px;
  padding:14px; border:1px solid var(--line); border-radius:var(--radius);
  background:#fff; box-shadow:0 4px 14px rgba(0,0,0,0.04);
}
.pc__title{ font-weight:700; }
.pc__price{ margin-top:2px; color:var(--muted); }
.tag{
  display:inline-block; margin-left:6px; padding:2px 6px; font-size:12px; font-weight:700;
  border:1px solid var(--line); border-radius:999px; background:#fffaf0; color:#7a5a12;
}

.pc__qty{ display:flex; align-items:center; gap:8px; }
.pc__qty input[type="number"]{
  width:70px; padding:8px 10px; border:1px solid var(--line); border-radius:10px;
  text-align:center; font-weight:700;
}
.qty-btn{
  width:36px; height:36px; border:1px solid var(--line); border-radius:10px; background:#fff;
  font-size:18px; line-height:1; cursor:pointer;
}
.qty-btn:hover{ background:#FAFAFA; }

/* =========================================================
   Récapitulatif
   ========================================================= */
.recap{ margin-top:18px; }
.recap__title{ margin:0 0 10px; font-size:18px; font-weight:800; }
.recap__body.empty{ color:var(--muted); }
.recap__row{
  display:grid; grid-template-columns:1fr auto; gap:12px; padding:6px 0; align-items:baseline;
  border-bottom:1px dashed var(--line);
}
.recap__row:last-child{ border-bottom:0; }
.recap__row--total{ padding-top:10px; }
.recap__name{ font-weight:600; }
.recap__price{ font-weight:700; }
.recap__sub{ padding:2px 0 6px; }

/* =========================================================
   Sidebar / Formulaire
   ========================================================= */
.sidebar .sticky{ position:sticky; top:92px; }
fieldset{ border:0; padding:0; margin:0 0 16px; }
legend{ font-weight:800; margin-bottom:8px; }
label{ display:grid; gap:6px; margin-top:8px; }
input,select{ padding:12px; border:1px solid var(--line); border-radius:10px; font:inherit; }

/* Messages */
.msg{ margin-top:12px; font-weight:700; }
.ok{ color:#0A7A34; }
.err{ color:#B00020; }

/* =========================================================
   Footer
   ========================================================= */
.footer{ background:var(--surface); border-top:1px solid var(--line); }
.footer__wrap{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 0; }

/* =========================================================
   Overlay succès
   ========================================================= */
.overlay{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.35); }
.overlay.show{ display:flex; }
.overlay-card{ background:#fff; border-radius:16px; padding:24px; width:min(520px, 92vw); text-align:center; box-shadow:0 10px 26px rgba(0,0,0,.2); }
.check{ width:52px; height:52px; margin:0 auto 10px; color:#0A7A34; }
.loader{ margin:10px auto 2px; width:28px; height:28px; border-radius:50%; border:3px solid #eee; border-top-color:#0A7A34; animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Lien "Commander en ligne" — contour orange */
.nav__cta a.active{
  border: 2px solid var(--moutarde);   /* contour orange */
  border-radius: 12px;                  /* même arrondi que le reste */
  padding: 8px 14px;                    /* évite que la bordure “mange” le texte */
}

/* Style "Commander en ligne" comme bouton encadré */
.nav__cta a.active {
  display: inline-block;
  font-weight: 700;
  color: var(--moutarde);              /* texte orange */
  border: 2px solid var(--line);       /* contour gris clair */
  border-radius: 14px;                 /* arrondi comme sur l’image */
  padding: 10px 20px;                  /* espace intérieur */
  background: #fff;                    /* fond blanc */
  transition: background .2s, color .2s, border-color .2s;
}

/* Effet au survol */
.nav__cta a.active:hover {
  background: var(--moutarde);         /* fond orange */
  color: #fff;                         /* texte blanc */
  border-color: var(--moutarde);       /* contour orange */
}

.menu-subtitle{
  margin:14px 0 6px;
  font-weight:800;
  font-size:16px;
  color:var(--vert-fonce);
}
.menu-section .grid{ margin-top:6px; }
.menu-section .grid:empty{ display:none; } /* cache les sous-sections vides */

/* --- Header avec annonce à droite --- */
.head__row{
  display:grid;
  grid-template-columns: 1fr minmax(260px, 360px);
  gap:20px;
  align-items:start;
}
@media (max-width:980px){
  .head__row{ grid-template-columns:1fr; }
}

.head__cta{
  display:grid;
  gap:10px;
  align-self:start;
  background: #fff; /* déjà dans .card */
}
.head__cta-text{ margin:0; }
.head__cta-btn{ justify-self:start; background-color: var(--moutarde);}