/* ESOP SAVALOU – styles communs du site public.
   Couleurs : vert #0B6B2F, bordeaux #8E1F2B, or #F6C531, crème #FBF7EE, encre #1F1C17.
   Polices : Barlow Condensed (titres), Source Sans 3 (texte). */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#FBF7EE;color:#1F1C17;font-family:'Source Sans 3',system-ui,sans-serif;font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:#0B6B2F}a:hover{color:#8E1F2B}
img{max-width:100%}
button,input,select,textarea{font:inherit}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid #F6C531;outline-offset:2px}
.site{width:100%;background:#FBF7EE;overflow-x:clip}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:#0B6B2F;color:#fff;padding:10px 14px;border-radius:8px}
.skip:focus{left:8px}
[data-zoom]{cursor:zoom-in}
.lightbox{position:fixed;inset:0;z-index:50;background:rgba(20,18,14,.9);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:72px 24px 32px}
.lightbox[hidden]{display:none}
.lightbox img{display:block;max-width:min(1100px,100%);max-height:78vh;object-fit:contain;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lightbox p{margin:0;max-width:900px;text-align:center;color:#F3EEE2;font-size:17px}
.lightbox-close{position:absolute;top:16px;right:16px;width:48px;height:48px;border-radius:999px;border:0;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
[data-city-panel][hidden]{display:none!important}
@media (max-width:700px){
  h1{font-size:40px!important;line-height:1.04!important}
  h2{font-size:32px!important;line-height:1.06!important}
  header nav{flex-wrap:nowrap!important;overflow-x:auto;width:100%;gap:4px 18px!important;padding-bottom:6px}
  header nav a{white-space:nowrap;flex-shrink:0}
  .pr{flex-wrap:wrap;gap:10px 12px!important}
  .pr>img{width:56px!important;height:70px!important}
  .pr>span:nth-of-type(1){flex:1 1 160px!important}
  .pr>span:nth-of-type(2){margin-left:auto}
  dl.legal{grid-template-columns:1fr!important;gap:2px 0!important}
  dl.legal dd{margin-bottom:10px!important;overflow-wrap:anywhere}
}
/* Points de vente : villes et repères de la carte */
.city-chip{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;font-size:16px;font-weight:700;text-decoration:none;background:#FFFFFF;color:#1F1C17;border:1.5px solid #CFC6B3}
.city-chip:hover{color:#0B6B2F;border-color:#0B6B2F}
.city-chip[aria-selected="true"]{background:#0B6B2F;color:#FFFFFF;border-color:#0B6B2F}
.map-marker{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:6px;text-decoration:none;z-index:2}
.map-marker.to-left{flex-direction:row-reverse}
.map-marker .pin{width:32px;height:32px;border-radius:999px;background:#0B6B2F;color:#FFFFFF;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;border:3px solid #FFFFFF;box-shadow:0 4px 12px rgba(31,28,23,.35);flex-shrink:0;transition:transform .15s}
.map-marker .lbl{background:#FFFFFF;color:#1F1C17;font-weight:700;font-size:14px;padding:3px 9px;border-radius:8px;box-shadow:0 2px 8px rgba(31,28,23,.18);white-space:nowrap}
.map-marker:hover .pin{transform:scale(1.1)}
.map-marker.is-on{z-index:3}
.map-marker.is-on .pin{width:40px;height:40px;font-size:17px;background:#8E1F2B}
.map-marker.is-on .lbl{background:#8E1F2B;color:#FFFFFF}
/* Commander : choix du mode de réception */
.opt{min-height:46px;padding:0 16px;border-radius:10px;font-size:16px;font-weight:700;cursor:pointer;background:#FFFFFF;color:#1F1C17;border:1.5px solid #CFC6B3}
.opt[aria-checked="true"]{background:#0B6B2F;color:#FFFFFF;border-color:#0B6B2F}
.qty{min-width:44px;text-align:center;font-size:20px;font-weight:800;color:#8C8472}
.qty.has{color:#0B6B2F}
.send-btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;width:100%;border:0;background:#0B6B2F;color:#FFFFFF;font-weight:700;font-size:18px;border-radius:12px;cursor:pointer}
.send-btn:disabled{background:#E2DACA;color:#5B554A;cursor:not-allowed}
.opt-radio{position:relative;display:inline-flex}
.opt-radio input{position:absolute;opacity:0;width:1px;height:1px}
.opt-radio .opt{display:inline-flex;align-items:center}
.opt-radio input:checked+.opt{background:#0B6B2F;color:#FFFFFF;border-color:#0B6B2F}
.opt-radio input:focus-visible+.opt{outline:3px solid #F6C531;outline-offset:2px}
.addr{display:none}
form:has(input[name="mode"][value="livraison"]:checked) .addr{display:flex}
input.qty::-webkit-outer-spin-button,input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
@media (max-width:860px){aside[aria-label="Récapitulatif de la commande"]{position:static!important}}
@media (max-width:600px){
  .pcard{grid-template-columns:110px minmax(0,1fr)!important;align-items:start!important}
  .pcard>span{padding:18px!important}
  .pcard>span>span:first-child{font-size:28px!important}
  .map-marker .pin{width:26px;height:26px;font-size:13px;border-width:2px}
  .map-marker.is-on .pin{width:32px;height:32px;font-size:15px}
  .map-marker .lbl{display:none}
  .map-marker.is-on .lbl{display:inline-block;font-size:13px}
}
@media (max-width:600px){
  section div[style*="border-radius: 26px; padding: 48px"]{padding:28px 22px!important}
}
/* Préchargeur (loader) affiché au chargement de chaque page */
.loader{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:#FBF7EE;animation:loaderAuto .5s ease 6s forwards}
.loader-box{display:flex;flex-direction:column;align-items:center;gap:18px}
.loader-logo{width:72px;height:83px;object-fit:contain;animation:loaderPulse 1.4s ease-in-out infinite}
.loader-bar{position:relative;width:168px;height:4px;border-radius:999px;background:#E8E0CF;overflow:hidden}
.loader-bar span{position:absolute;top:0;left:0;width:42%;height:100%;border-radius:999px;background:linear-gradient(90deg,#0B6B2F,#F6C531);animation:loaderSlide 1.1s ease-in-out infinite}
.loader-text{margin:0;font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;font-size:14px;color:#0B6B2F}
.loader.is-done{opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s linear .45s}
@keyframes loaderPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.08);opacity:.82}}
@keyframes loaderSlide{0%{left:-45%}100%{left:105%}}
@keyframes loaderAuto{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){
  .loader-logo,.loader-bar span{animation:none}
  .loader-bar span{left:0;width:100%}
  .loader{animation:loaderAuto .3s ease 1.5s forwards}
}
/* Menu burger — masqué sur grand écran, visible sur petit écran */
.nav-toggle{display:none;align-items:center;justify-content:center;width:46px;height:46px;padding:0;border:1.5px solid #CFC6B3;border-radius:10px;background:#FFFFFF;color:#0B6B2F;cursor:pointer}
.nav-toggle .ico-close{display:none}
.nav-toggle[aria-expanded="true"] .ico-open{display:none}
.nav-toggle[aria-expanded="true"] .ico-close{display:inline}
@media (max-width:700px){
  .nav-toggle{display:inline-flex}
  /* Avec JS : le menu devient un panneau déroulant vertical */
  html.js header nav{flex-basis:100%;width:100%;flex-direction:column;align-items:stretch;overflow:visible;gap:0;margin-top:8px;padding:4px 0 2px;border-top:1px solid #E8E0CF;display:none!important}
  html.js header nav.is-open{display:flex!important}
  html.js header nav a{white-space:normal;padding:14px 2px!important;border-bottom:1px solid #F0E9D8!important;border-radius:0}
  html.js header nav a[aria-current="page"]{box-shadow:inset 3px 0 0 #0B6B2F;padding-left:12px!important}
  html.js header nav a:last-child{margin:12px 0 4px;text-align:center;border-bottom:0!important;padding:13px 22px!important}
}