/* Happy Green Lunch : styles communs (charte LUNCH 2026, proposition 1 « Le marché du matin »).
   Couleurs : Bleu Lunch, Vert nuit, Vert Green ; textes en Charbon ; fonds blanc et Crème papier. */
:root{
  --charbon:#30363A; --nuit:#223128; --nuit-2:#2f4437; --vert:#64714F; --feuille:#8C976E; --feuillefonce:#5B684E;
  --bleu:#62B0C0; --bleu-voile:#E6F2F4; --creme:#F6F4EE; --filet:#C9D0D5; --gris-texte:#4c5458; --gris-doux:#646c71;
  --ligne:#ecebe6; --rouge-alerte:#a3352b; --vert-ok:#3f6b3a;
  --rayon:18px; --ombre:0 18px 40px -24px rgba(34,49,40,.35);
  --ombre-1:0 1px 2px rgba(34,49,40,.04),0 4px 16px rgba(34,49,40,.06); --ombre-2:0 2px 6px rgba(34,49,40,.05),0 18px 40px rgba(34,49,40,.12);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
/* scroll-padding : un élément qui prend le focus (Tab) ou une ancre ne s'arrête jamais sous l'en-tête
   collé ni sous la barre du panier (site.js publie sa hauteur dans --barre-panier, 0 sans barre). */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:100px;scroll-padding-bottom:var(--barre-panier,0px)}
body{margin:0;font-family:Figtree,Arial,sans-serif;color:var(--charbon);background:#fff;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--bleu);outline-offset:2px;border-radius:6px}
.evitement{position:absolute;left:-9999px;top:0;background:var(--nuit);color:#fff;padding:10px 16px;z-index:100}
.evitement:focus{left:12px;top:12px}
/* Numéro à ne jamais couper en fin de ligne (IDE « CHE-225.372.542 ») */
.insecable{white-space:nowrap}
/* Numéro de téléphone jamais coupé (« 021 » en fin de ligne), sur toutes les pages */
a[href^="tel:"]{white-space:nowrap}
/* Texte réservé aux lecteurs d'écran */
.visuellement-cache,.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Gouttière des côtés ; viewport-fit=cover : jamais de texte sous l'encoche d'un téléphone couché */
.wrap{--gouttiere:28px;max-width:1240px;margin:0 auto;padding:0 max(var(--gouttiere),env(safe-area-inset-right)) 0 max(var(--gouttiere),env(safe-area-inset-left))}
.label{display:inline-block;font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--vert)}
h1,h2,h3{margin:0;line-height:1.08;color:var(--charbon);text-wrap:balance}
h2{font-size:clamp(30px,4vw,48px);font-weight:800;letter-spacing:-.01em}
.accroche{font-weight:300;font-size:clamp(19px,1.6vw,23px);line-height:1.45;color:var(--charbon)}
.discret{color:var(--gris-doux);font-size:15px}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:999px;padding:15px 26px;font:600 16px/1.1 Figtree,Arial,sans-serif;text-decoration:none;cursor:pointer;transition:transform .15s ease,background .15s ease,box-shadow .15s ease;text-align:center}
.btn:hover{transform:translateY(-1px)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none}
.btn-plein{background:var(--nuit);color:#fff}
.btn-plein:hover{background:var(--nuit-2)}
.btn-trait{background:transparent;color:var(--nuit);box-shadow:inset 0 0 0 1.5px var(--nuit)}
.btn-bleu{background:var(--bleu);color:var(--nuit)}
.btn-ajout{background:var(--bleu-voile);color:var(--nuit);padding:11px 18px;font-size:15px}
.btn-ajout:hover{background:var(--bleu)}
.btn-ajout.is-added{background:var(--nuit);color:#fff}
.btn-petit{padding:9px 14px;font-size:14px}
.lien{background:none;border:0;padding:0;color:var(--nuit);text-decoration:underline;text-decoration-color:var(--bleu);text-decoration-thickness:2px;text-underline-offset:4px;cursor:pointer;font-weight:600}

/* Bandeau du délai de commande (style de la maquette B, texte de Cyril inchangé) */
.bandeau{background:var(--bleu);color:var(--nuit);font-size:15px;font-weight:500}
.bandeau .wrap{display:flex;justify-content:center;align-items:center;gap:6px 36px;min-height:44px;padding-top:6px;padding-bottom:6px;flex-wrap:wrap;text-align:center}
.bandeau-ligne{display:inline-flex;align-items:center;gap:8px}
.bandeau .ic{width:18px;height:18px;flex:none}
.bandeau strong{font-weight:700}
.bandeau .chrono{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;background:var(--nuit);color:#fff;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;vertical-align:middle}

/* En-tête (maquette B) : logo, navigation centrée en pastilles, boutons ronds blancs */
.entete-site{position:sticky;top:0;z-index:30;background:rgba(246,244,238,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.entete{display:flex;align-items:center;gap:24px;height:80px}
.entete .logo{display:block;flex:0 0 auto}
.entete .logo img{height:50px;width:auto}
nav.menu{display:flex;align-items:center;gap:2px;margin-inline:auto}
nav.menu a{padding:10px 16px;border-radius:999px;font-size:16px;font-weight:500;color:var(--charbon);text-decoration:none;white-space:nowrap;transition:background .2s,color .2s}
nav.menu a:hover{background:rgba(34,49,40,.06);color:var(--nuit)}
nav.menu a[aria-current="page"]{background:#fff;color:var(--nuit);font-weight:600;box-shadow:var(--ombre-1)}
.entete-actions{display:flex;align-items:center;gap:12px;flex:none}
.entete-site .panier,.entete-site .burger{position:relative;display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:#fff;box-shadow:var(--ombre-1);color:var(--nuit);text-decoration:none;cursor:pointer;flex:none;transition:box-shadow .2s}
.entete-site .panier:hover,.entete-site .burger:hover{box-shadow:var(--ombre-2)}
.entete-site .panier svg,.entete-site .burger svg{width:22px;height:22px}
.panier [data-panier-nombre]{position:absolute;top:-5px;right:-5px;min-width:24px;height:24px;padding:0 6px;border-radius:12px;background:var(--bleu);color:var(--nuit);border:2px solid var(--creme);font-size:14px;font-weight:700;display:grid;place-items:center;line-height:1;font-variant-numeric:tabular-nums}
.entete-site .burger{display:none}
.entete-cta{height:48px;padding:0 24px;font-weight:700}
.entete-cta:hover{transform:none}
/* Menu du téléphone et de la tablette : pastilles posées par-dessus la page, sous l'en-tête */
.menu-mobile{display:none}

/* Sections */
section{padding:96px 0}
.creme{background:var(--creme)}
.tete{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:44px;flex-wrap:wrap}
.tete p{max-width:520px;margin:12px 0 0}
.titre-page{background:var(--creme);padding:64px 0 56px}
.titre-page h1{font-size:clamp(38px,4.6vw,60px);font-weight:800;letter-spacing:-.02em;margin:14px 0 14px}
.titre-page p{max-width:720px;margin:0}

/* Accueil */
.hero{background:var(--creme);overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.02fr 1fr;gap:56px;align-items:center;padding-top:72px;padding-bottom:88px}
.hero h1{font-size:clamp(42px,5.4vw,72px);font-weight:800;letter-spacing:-.02em;margin:18px 0 22px}
.hero h1 em{font-style:normal;color:var(--vert)}
.hero .actions{display:flex;gap:14px;flex-wrap:wrap;margin:34px 0 30px}
.garanties{display:flex;gap:22px;flex-wrap:wrap;font-size:15px;color:var(--gris-texte)}
.garanties span{display:flex;align-items:center;gap:8px}
.garanties span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--bleu)}
.mosaique{position:relative;display:grid;grid-template-columns:1.15fr .85fr;grid-template-rows:240px 240px;gap:16px}
.mosaique figure{margin:0;border-radius:var(--rayon);overflow:hidden;box-shadow:var(--ombre)}
.mosaique img{width:100%;height:100%;object-fit:cover}
.mosaique .grand{grid-row:span 2}
.saison{position:absolute;left:-34px;bottom:-26px;background:#fff;border-radius:16px;padding:18px 20px;box-shadow:var(--ombre);max-width:290px}
.saison .label{color:var(--vert);font-size:12px}
.saison strong{display:block;font-size:19px;margin:4px 0 10px}
.puces{display:flex;flex-wrap:wrap;gap:6px}
.puces span{background:var(--creme);border-radius:999px;padding:5px 11px;font-size:14px}
.engagements{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.engagement{background:#fff;border-radius:var(--rayon);overflow:hidden;border:1px solid var(--ligne)}
.engagement img{height:220px;width:100%;object-fit:cover}
.engagement div{padding:22px 22px 26px}
.engagement h3{font-size:22px;font-weight:700;margin-bottom:8px}
.engagement p{margin:0;font-size:16px;color:var(--gris-texte)}

/* Menu du jour en fiches */
.jours{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.jour{background:#fff;border-radius:var(--rayon);padding:22px 20px 20px;display:flex;flex-direction:column;border:1px solid var(--ligne)}
.jour .date{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--filet);padding-bottom:12px;margin-bottom:14px;gap:8px}
.jour .date b{font-size:20px}
.jour .date span{font-size:14px;color:var(--gris-doux)}
.jour dl{margin:0 0 18px;flex:1}
.jour dt{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--vert);margin-top:10px}
.jour dd{margin:2px 0 0;font-size:15.5px}
.jour dd.plat{font-weight:700;font-size:17px;line-height:1.3}
.jour .pied-jour{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.jour .prix{font-weight:700}
.jour.ferme{background:transparent;border-style:dashed;color:var(--gris-doux)}
.note-menu{display:flex;gap:30px;flex-wrap:wrap;margin-top:26px;font-size:15px;color:var(--gris-texte)}

/* Fiches produit */
.produits{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.produit{border-radius:var(--rayon);overflow:hidden;background:#fff;border:1px solid var(--ligne);display:flex;flex-direction:column}
.produit .visuel{aspect-ratio:900/640;background:var(--creme);display:grid;place-items:center}
.produit .visuel img{width:100%;height:100%;object-fit:cover}
.produit .visuel.sans-photo img{width:42%;height:auto;object-fit:contain;opacity:.55}
.produit .corps{padding:20px;display:flex;flex-direction:column;gap:6px;flex:1}
.produit h3{font-size:19px;font-weight:700;line-height:1.25}
.produit p{margin:0;font-size:15px;color:#5a6266;flex:1}
.produit .pied-produit{display:flex;justify-content:space-between;align-items:center;margin-top:12px;gap:8px}
.produit .prix{font-weight:700;font-size:18px}
.tag{align-self:flex-start;font-size:12px;font-weight:600;color:var(--feuillefonce);background:#eef0e8;border-radius:999px;padding:4px 10px}
.toute-carte{background:var(--nuit);color:#fff;border-radius:var(--rayon);padding:30px;display:flex;flex-direction:column;justify-content:space-between}
.toute-carte h3{color:#fff;font-size:28px;font-weight:800}
.toute-carte ul{list-style:none;padding:0;margin:18px 0;display:grid;gap:8px;color:#cfd8d1}
.toute-carte .btn{align-self:flex-start}

/* Producteurs */
.producteurs{position:relative;color:#fff;padding:0}
.producteurs .fond{position:absolute;inset:0}
.producteurs .fond img{width:100%;height:100%;object-fit:cover}
.producteurs .fond::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(34,49,40,.92) 0%,rgba(34,49,40,.78) 45%,rgba(34,49,40,.15) 100%)}
.producteurs .wrap{position:relative;padding-top:104px;padding-bottom:104px}
.producteurs h2{color:#fff;max-width:560px}
.producteurs .label{color:var(--bleu)}
.liste-prod{display:grid;grid-template-columns:repeat(2,minmax(0,260px));gap:14px 40px;margin-top:36px;list-style:none;padding:0}
.liste-prod li{border-top:1px solid rgba(255,255,255,.25);padding-top:12px}
.liste-prod b{display:block;font-size:18px}
.liste-prod span{font-size:14px;color:#c9d3cc}

/* Étapes */
.etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:e}
.etape{background:var(--creme);border-radius:var(--rayon);padding:30px}
.etape::before{counter-increment:e;content:counter(e);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--bleu);color:var(--nuit);font-weight:800;font-size:19px;margin-bottom:18px}
.etape h3{font-size:22px;font-weight:700;margin-bottom:8px}
.etape p{margin:0;color:var(--gris-texte)}
.paiements{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.paiements span{background:#fff;border:1px solid var(--filet);border-radius:8px;padding:6px 10px;font-size:13px;font-weight:700;letter-spacing:.02em}

/* Entreprises */
.entreprises .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.entreprises .photo{border-radius:var(--rayon);height:460px;width:100%;object-fit:cover}
.entreprises ul{padding-left:20px;margin:22px 0 30px}
.entreprises li{margin:8px 0}
.calcul{margin-top:28px;background:var(--bleu-voile);border-radius:16px;padding:20px 22px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.calcul label{font-weight:600}
.calcul output{font-weight:800;font-size:20px}

/* Formulaires */
.champ{display:flex;flex-direction:column;gap:6px}
.champ label,.champ .etiquette{font-weight:600;font-size:15px}
.champ small{color:var(--gris-doux);font-size:13px}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password],select,textarea{width:100%;font-size:16px;padding:12px 14px;border-radius:12px;border:1.5px solid var(--filet);background:#fff;color:var(--charbon)}
input:focus,select:focus,textarea:focus{border-color:var(--bleu);outline:none;box-shadow:0 0 0 3px rgba(98,176,192,.25)}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:3px solid var(--nuit);outline-offset:2px;box-shadow:none}
textarea{min-height:96px;resize:vertical}
.case{display:flex;gap:12px;align-items:flex-start;font-size:15px}
.case input{width:20px;height:20px;margin-top:2px;accent-color:var(--nuit);flex:none}
.alerte{border-radius:14px;padding:14px 18px;font-size:15px;margin:0 0 18px}
.alerte ul{margin:6px 0 0;padding-left:18px}
.alerte-erreur{background:#fbecea;color:var(--rouge-alerte);border:1px solid #efc6c1}
.alerte-info{background:var(--bleu-voile);color:var(--nuit);border:1px solid #c9e3e8}
.alerte-ok{background:#edf3ea;color:var(--vert-ok);border:1px solid #cfe0c9}
.vide{text-align:center;padding:60px 20px;background:var(--creme);border-radius:var(--rayon)}
.vide p{margin:10px 0 22px;color:var(--gris-texte)}

/* Texte long (pages légales) */
.texte-long{max-width:780px}
.texte-long h2{font-size:26px;margin:40px 0 12px}
.texte-long h3{font-size:19px;margin:24px 0 8px}
.texte-long p,.texte-long li{color:var(--gris-texte)}
.texte-long a{color:var(--nuit)}

/* Pied de page */
.pied{background:var(--nuit);color:#cfd8d1;padding:72px 0 30px;font-size:15px}
.pied .grille{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px}
.pied .logo-pied{height:92px;width:auto;margin-bottom:12px}
.pied h2{color:#fff;font-size:14px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 14px;font-weight:700}
.pied a{text-decoration:none}
.pied a:hover{color:#fff;text-decoration:underline}
.pied .bas{border-top:1px solid rgba(255,255,255,.14);margin-top:48px;padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px}
.pied .motif{display:flex;justify-content:center;padding:44px 0 0}
.pied .motif img{height:44px;width:auto;opacity:.95}
.pied .pied-signature{display:flex;justify-content:center;align-items:center;padding-top:44px}
.pied .motif-feuilles{height:44px;width:auto;opacity:.95}
.pied .drapeau-ch{display:inline-block;width:14px;height:14px;vertical-align:-2px;margin-right:2px}

/* Barre du panier, en bas de l'écran sur téléphone (site.js publie sa hauteur dans --barre-panier) */
.barre-panier{display:none}
body{padding-bottom:var(--barre-panier,0px)}

/* Notification (au-dessus de la barre du panier quand elle est là) */
.hgl-toast{position:fixed;left:50%;bottom:calc(28px + var(--barre-panier,0px));transform:translate(-50%,30px);opacity:0;background:var(--nuit);color:#fff;padding:13px 20px;border-radius:24px;width:max-content;font-weight:500;transition:.25s ease;z-index:60;max-width:calc(100vw - 32px);text-align:center;pointer-events:none}
.hgl-toast.is-on{opacity:1;transform:translate(-50%,0)}
.hgl-toast.is-on:empty{opacity:0}
.hgl-toast a{color:var(--bleu);pointer-events:auto}

@media (max-width:1240px){
  nav.menu a{padding:10px 12px;font-size:15.5px}
  .entete{gap:16px}
}
@media (max-width:1023px){
  nav.menu{display:none}
  .entete-site .burger{display:grid}
  .entete-actions{margin-left:auto}
  /* Téléphone couché : le menu tient entre l'en-tête et le bas de l'écran et défile seul
     (site.js ajuste max-height à la place réelle) ; la barre du panier se cache le temps du menu. */
  .menu-mobile{display:flex;flex-direction:column;gap:2px;position:absolute;left:0;right:0;top:100%;z-index:44;padding:8px max(28px,env(safe-area-inset-right)) 20px max(28px,env(safe-area-inset-left));background:var(--creme);box-shadow:0 20px 30px rgba(34,49,40,.10);max-height:calc(100dvh - 80px);overflow-y:auto;overscroll-behavior:contain}
  .menu-mobile a:not(.btn){display:flex;align-items:center;justify-content:space-between;flex:none;height:56px;padding:0 18px;border-radius:16px;font-size:18px;font-weight:600;color:var(--nuit);text-decoration:none}
  .menu-mobile a:not(.btn) svg{width:20px;height:20px;flex:none}
  .menu-mobile a[aria-current="page"]{background:#fff;box-shadow:var(--ombre-1)}
  .menu-mobile .btn{flex:none;height:52px;margin-top:10px;font-weight:700}
  body.menu-ouvert .barre-panier{display:none!important}
  .hero .wrap,.entreprises .wrap{grid-template-columns:1fr}
  .engagements,.produits{grid-template-columns:repeat(2,1fr)}
  .jours{grid-template-columns:repeat(2,1fr)}
  .saison{left:12px}
  .pied .grille{grid-template-columns:1fr 1fr}
}
/* Téléphone (maquette B) : en-tête de 64 px, logo de 40 px, boutons ronds de 44 px, « Commander »
   rangé dans le menu */
@media (max-width:719px){
  .entete{height:64px;gap:10px}
  .entete .logo img{height:40px}
  .entete-cta{display:none}
  .entete-actions{gap:8px}
  .entete-site .panier,.entete-site .burger{width:44px;height:44px}
  .menu-mobile{max-height:calc(100dvh - 64px)}
}
@media (max-width:640px){
  .wrap{--gouttiere:16px}
  body{font-size:16px}
  html{scroll-padding-top:76px}
  .menu-mobile{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
  .hero .wrap{padding-top:40px;padding-bottom:70px}
  .mosaique{grid-template-rows:180px 180px}
  .saison{position:relative;left:0;bottom:0;margin-top:16px;grid-column:span 2;max-width:none}
  section{padding:64px 0}
  .titre-page{padding:44px 0 40px}
  .engagements,.produits,.jours,.etapes,.liste-prod{grid-template-columns:1fr}
  .entreprises .photo{height:280px}
  .pied .grille{grid-template-columns:1fr}
  /* Une ligne pour la prochaine livraison, une pour l'heure limite. Quand la largeur manque
     (moins de 410 px environ), le temps qui reste passe seul en dessous, jamais un mot isolé. */
  .bandeau .wrap{--gouttiere:12px;gap:2px 12px;padding-top:7px;padding-bottom:7px;font-size:13.5px;line-height:1.45}
  .bandeau-ligne{display:inline;gap:0}
  .bandeau .ic{display:none}
  .bandeau .chrono{height:22px;padding:0 8px;font-size:13px}
}
/* Petits téléphones (375 et 360 px) : le bandeau tient toujours sur deux lignes */
@media (max-width:389px){
  .bandeau .wrap{--gouttiere:10px;font-size:12.5px}
  .bandeau .chrono{padding:0 7px;font-size:12.5px}
  .pied{line-height:1.9}
}
@media (max-width:760px){
  .barre-panier{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:14px;background:#fff;border-top:1px solid var(--ligne);box-shadow:0 -12px 28px -20px rgba(34,49,40,.5);padding:10px max(16px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
  .barre-panier-resume{margin:0;min-width:0;display:flex;flex-direction:column;line-height:1.25}
  .barre-panier-nombre{font-size:14px;font-weight:600;color:var(--gris-texte)}
  .barre-panier-total{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 6px}
  .barre-panier-total b{font-size:19px;font-weight:800;color:var(--nuit);font-variant-numeric:tabular-nums;white-space:nowrap}
  .barre-panier-total b:empty{display:none}
  .barre-panier-total small{font-size:13px;color:var(--gris-texte)}
  .barre-panier-bouton{flex:none;min-height:48px;padding:12px 22px}
  .hgl-toast{bottom:calc(16px + var(--barre-panier,0px))}
  /* Cibles tactiles de 44 px au moins */
  .btn-ajout,.btn-petit{min-height:44px}
  .lien{display:inline-block;padding:11px 0}
}
@media print{.barre-panier,.hgl-toast{display:none!important}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}