/* Tondraaga — système graphique de la maquette
   Charte : brun #4D3529, ocre #C87817, blancs et gris neutres uniquement. */
:root {
  --brun: #4D3529;
  --brun-fonce: #3B281F;
  --brun-encre: #24160F;      /* texte sur fond ocre (contraste 5:1) */
  --ocre: #C87817;
  --ocre-texte: #9C5B0E;      /* ocre lisible en petit texte sur blanc */
  --ocre-pale: #F7EBDB;
  --blanc: #FFFFFF;
  --creme: #FBF8F4;           /* blanc cassé */
  --sable: #F2ECE4;
  --gris-900: #2B2724;
  --gris-700: #5E5853;
  --gris-500: #8C857F;
  --gris-300: #DDD6CE;
  --gris-200: #EAE5DF;
  --succes: #2F6B3A;          /* états fonctionnels uniquement */
  --alerte: #A23A1E;
  --rayon: 14px;
  --rayon-s: 9px;
  --ombre: 0 1px 2px rgba(36, 22, 15, .06), 0 6px 18px rgba(36, 22, 15, .06);
  --contenu: 1200px;
  --titre: "Archivo", "Arial Narrow", Arial, sans-serif;
  --texte: "Inter", "Segoe UI", Arial, sans-serif;
  --treillis: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M0 14 14 0l14 14-14 14z' fill='none' stroke='%23C87817' stroke-opacity='.22' stroke-width='1.2'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 16px/1.55 var(--texte); color: var(--gris-900); background: var(--creme); }
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--titre); color: var(--brun); line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; }
h3 { font-size: 1.15rem; font-weight: 700; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--ocre); outline-offset: 2px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cadre { max-width: var(--contenu); margin: 0 auto; padding: 0 16px; }
.section { padding: 56px 0; }
.section-blanche { background: var(--blanc); }
.surtitre { font: 700 .78rem/1 var(--texte); letter-spacing: .12em; text-transform: uppercase; color: var(--ocre-texte); margin-bottom: 12px; }
.intro { color: var(--gris-700); max-width: 640px; }
.muet { color: var(--gris-700); }
.petit { font-size: .875rem; }
.entete-section { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.entete-section h2 { margin: 0; }

.bandeau-demo { background: var(--brun-encre); color: #F2E6D8; font-size: .8rem; text-align: center; padding: 6px 16px; }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: 999px; border: 1.5px solid transparent; font-weight: 600; text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, color .15s; white-space: nowrap; }
.btn-brun { background: var(--brun); color: #fff; }
.btn-brun:hover { background: var(--brun-fonce); }
.btn-ocre { background: var(--ocre); color: var(--brun-encre); }
.btn-ocre:hover { background: #B86D12; }
.btn-contour { border-color: var(--brun); color: var(--brun); background: transparent; }
.btn-contour:hover { background: var(--brun); color: #fff; }
.btn-lien { background: none; border: 0; color: var(--ocre-texte); font-weight: 600; padding: 0; min-height: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.btn-petit { min-height: 38px; padding: 0 16px; font-size: .9rem; }
.btn-bloc { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--gris-200); color: var(--gris-500); border-color: transparent; cursor: not-allowed; }

/* ---------- En-tête ---------- */
.barre-haut { background: var(--brun); color: #F4EADF; font-size: .85rem; }
.barre-haut .cadre { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 40px; flex-wrap: wrap; }
.barre-haut a { color: #F4EADF; text-decoration: none; }
.barre-haut a:hover { text-decoration: underline; }
.barre-haut .liens { display: flex; gap: 18px; }
.choix-pays { display: flex; align-items: center; gap: 8px; }
.choix-pays select { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: 6px; padding: 3px 6px; font-size: .85rem; }
.choix-pays select option { color: var(--gris-900); }

.entete-principal { background: var(--blanc); border-bottom: 1px solid var(--gris-200); position: sticky; top: 0; z-index: 30; }
.entete-principal .cadre { display: flex; align-items: center; gap: 20px; min-height: 76px; }
.logo { display: block; width: 172px; aspect-ratio: 1380 / 340; background: url("../img/logo.webp") no-repeat; background-size: 108.7% auto; background-position: 58.3% 49.1%; flex: none; }
.logo span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.recherche { flex: 1; display: flex; max-width: 460px; }
.recherche input { flex: 1; min-width: 0; height: 44px; border: 1.5px solid var(--gris-300); border-right: 0; border-radius: 999px 0 0 999px; padding: 0 18px; background: var(--creme); }
.recherche input:focus { outline: none; border-color: var(--ocre); }
.recherche button { height: 44px; padding: 0 18px; border: 0; border-radius: 0 999px 999px 0; background: var(--brun); color: #fff; cursor: pointer; }
.actions-entete { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.pastille-panier { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--gris-300); text-decoration: none; font-weight: 600; font-size: .9rem; color: var(--brun); background: var(--blanc); }
.pastille-panier:hover { border-color: var(--brun); }
.pastille-panier b { min-width: 22px; height: 22px; border-radius: 11px; background: var(--brun); color: #fff; font-size: .75rem; display: grid; place-items: center; padding: 0 6px; }
.pastille-panier.courses b { background: var(--ocre); color: var(--brun-encre); }
.icone-bouton { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--gris-300); color: var(--brun); background: var(--blanc); text-decoration: none; cursor: pointer; }
.icone-bouton:hover { border-color: var(--brun); }
.icone-bouton svg, .pastille-panier svg { width: 20px; height: 20px; }

.nav-principale { background: var(--blanc); border-bottom: 1px solid var(--gris-200); }
.nav-principale ul { list-style: none; margin: 0 auto; padding: 0 16px; display: flex; gap: 4px; max-width: var(--contenu); overflow-x: auto; scrollbar-width: none; }
.nav-principale a { display: block; padding: 13px 12px; text-decoration: none; font-weight: 500; font-size: .93rem; color: var(--gris-700); border-bottom: 2.5px solid transparent; white-space: nowrap; }
.nav-principale a:hover { color: var(--brun); }
.nav-principale a[aria-current="page"] { color: var(--brun); border-bottom-color: var(--ocre); font-weight: 600; }
.nav-principale a.mis-en-avant { color: var(--ocre-texte); font-weight: 600; }
.burger { display: none; }

/* ---------- Accueil ---------- */
.heros { background: var(--creme); padding: 56px 0 64px; overflow: hidden; }
.heros .cadre { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.heros p.chapeau { font-size: 1.15rem; color: var(--gris-700); max-width: 34em; margin-bottom: 28px; }
.heros .boutons { display: flex; gap: 12px; flex-wrap: wrap; }
.heros .garanties { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 30px; color: var(--gris-700); font-size: .9rem; }
.heros .garanties span { display: flex; align-items: center; gap: 8px; }
.heros .garanties svg { color: var(--ocre); width: 18px; height: 18px; flex: none; }
.heros-visuel { position: relative; }
.photo-attendue { position: relative; aspect-ratio: 4 / 4.2; border-radius: 22px; background: var(--sable) var(--treillis); display: grid; place-items: start; padding: 22px; color: var(--gris-700); font-size: .85rem; overflow: hidden; }
.photo-attendue::before { content: ""; position: absolute; inset: 18% 14% auto auto; width: 46%; aspect-ratio: 1; border-radius: 50%; background: var(--ocre); opacity: .9; }
.photo-attendue::after { content: ""; position: absolute; left: 12%; bottom: 22%; width: 58%; height: 38%; border-radius: 0 0 50% 50% / 0 0 70% 70%; background: var(--brun); }
.photo-attendue em { position: relative; z-index: 1; background: rgba(255,255,255,.88); padding: 6px 10px; border-radius: 8px; font-style: normal; }
.carte-suivi { position: absolute; right: -8px; bottom: 28px; width: 270px; background: var(--blanc); border-radius: var(--rayon); box-shadow: 0 10px 30px rgba(36,22,15,.16); padding: 16px 18px; font-size: .88rem; }
.carte-suivi .ligne { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; color: var(--gris-700); }
.carte-suivi strong { color: var(--brun); }
.carte-suivi .etapes-mini { display: flex; gap: 4px; margin: 12px 0 8px; }
.carte-suivi .etapes-mini i { flex: 1; height: 5px; border-radius: 3px; background: var(--gris-200); }
.carte-suivi .etapes-mini i.fait { background: var(--ocre); }

.deux-services { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.carte-service { border-radius: 20px; padding: 34px; display: flex; flex-direction: column; gap: 6px; min-height: 300px; text-decoration: none; position: relative; overflow: hidden; }
.carte-service h3 { font-size: 1.6rem; font-weight: 800; }
.carte-service ul { margin: 10px 0 24px; padding: 0; list-style: none; display: grid; gap: 8px; }
.carte-service li { display: flex; gap: 10px; align-items: baseline; }
.carte-service li::before { content: ""; width: 7px; height: 7px; flex: none; transform: translateY(-2px) rotate(45deg); background: var(--ocre); }
.carte-service .btn { align-self: flex-start; margin-top: auto; }
.carte-service.boutique { background: var(--blanc); border: 1px solid var(--gris-200); }
.carte-service.courses { background: var(--brun); color: #F4EADF; }
.carte-service.courses h3 { color: #fff; }
.carte-service.courses .surtitre { color: #E9B56F; }
.carte-service.courses::after { content: ""; position: absolute; right: -40px; top: -40px; width: 220px; height: 220px; background: var(--treillis); opacity: .9; border-radius: 50%; }

.onglets { display: flex; gap: 6px; flex-wrap: wrap; }
.onglets button, .onglets a { border: 1.5px solid var(--gris-300); background: var(--blanc); border-radius: 999px; padding: 8px 16px; cursor: pointer; font-weight: 500; font-size: .9rem; text-decoration: none; color: var(--gris-700); }
.onglets [aria-selected="true"], .onglets [aria-current="page"] { background: var(--brun); color: #fff; border-color: var(--brun); }

.etapes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: etape; }
.etape { background: var(--blanc); border: 1px solid var(--gris-200); border-radius: var(--rayon); padding: 24px; }
.etape::before { counter-increment: etape; content: counter(etape); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ocre-pale); color: var(--ocre-texte); font: 800 1.1rem var(--titre); margin-bottom: 14px; }
.etape p { color: var(--gris-700); font-size: .93rem; margin: 0; }

.atouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 28px; }
.atout svg { width: 30px; height: 30px; color: var(--ocre); margin-bottom: 12px; }
.atout p { color: var(--gris-700); font-size: .93rem; margin: 0; }

.bloc-vendeur { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; background: var(--ocre-pale); border-radius: 22px; padding: 44px; }
.chiffres { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.chiffre { background: var(--blanc); border-radius: var(--rayon); padding: 20px; }
.chiffre strong { display: block; font: 800 1.7rem var(--titre); color: var(--brun); }
.chiffre span { color: var(--gris-700); font-size: .88rem; }

.faq details { background: var(--blanc); border: 1px solid var(--gris-200); border-radius: var(--rayon-s); margin-bottom: 10px; }
.faq summary { cursor: pointer; padding: 16px 20px; font-weight: 600; color: var(--brun); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.3rem; line-height: 1; color: var(--ocre-texte); }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 20px 16px; margin: 0; color: var(--gris-700); }
.assistance { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; }
.contact-carte { background: var(--brun); color: #F4EADF; border-radius: 20px; padding: 32px; }
.contact-carte h3 { color: #fff; }
.contact-carte a { color: #fff; }
.contact-carte .ligne-contact { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.14); }
.contact-carte .ligne-contact:first-of-type { border-top: 0; }
.politiques { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.politiques a { font-size: .85rem; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: 5px 12px; text-decoration: none; }

/* ---------- Cartes produits ---------- */
.grille-produits { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.carte-produit { background: var(--blanc); border: 1px solid var(--gris-200); border-radius: var(--rayon); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .15s, border-color .15s; }
.carte-produit:hover { box-shadow: var(--ombre); border-color: var(--gris-300); }
.carte-produit .corps { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.carte-produit .categorie { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gris-500); font-weight: 600; }
.carte-produit h3 { font: 600 1rem/1.35 var(--texte); color: var(--gris-900); margin: 0; }
.carte-produit h3 a { text-decoration: none; }
.carte-produit h3 a::after { content: ""; position: absolute; inset: 0; }
.carte-produit { position: relative; }
.carte-produit .vendeur { font-size: .85rem; color: var(--gris-700); }
.carte-produit .pied-carte { display: flex; justify-content: space-between; align-items: end; margin-top: auto; padding-top: 10px; gap: 8px; }
.carte-produit .pied-carte .btn { position: relative; z-index: 1; }

.visuel { position: relative; aspect-ratio: 1; background: var(--sable) var(--treillis); display: grid; place-items: center; overflow: hidden; }
.visuel .forme { width: 46%; aspect-ratio: 1; border-radius: 50%; background: var(--teinte, var(--ocre)); opacity: .85; }
.visuel .forme.carre { border-radius: 18%; transform: rotate(45deg); width: 38%; }
.visuel .forme.goutte { border-radius: 50% 50% 50% 8%; }
.visuel .legende { position: absolute; left: 10px; bottom: 10px; font-size: .7rem; background: rgba(255,255,255,.9); color: var(--gris-700); padding: 3px 8px; border-radius: 6px; }
.visuel .badge { position: absolute; left: 10px; top: 10px; }
.favori { position: absolute; right: 10px; top: 10px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); display: grid; place-items: center; cursor: pointer; color: var(--brun); }
.favori svg { width: 18px; height: 18px; }
.favori[aria-pressed="true"] svg { fill: var(--ocre); color: var(--ocre); }

.prix { font: 700 1.05rem var(--texte); color: var(--brun); white-space: nowrap; }
.prix small, .equiv { display: block; font-weight: 500; font-size: .8rem; color: var(--gris-700); }
.badge { white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--ocre-pale); color: var(--ocre-texte); }
.badge.neutre { background: var(--gris-200); color: var(--gris-700); }
.badge.ok { background: #E6F0E7; color: var(--succes); }
.badge.ko { background: #F6E3DD; color: var(--alerte); }
.badge.brun { background: var(--brun); color: #fff; }

/* ---------- Boutique ---------- */
.page-titre { padding: 34px 0 10px; }
.fil { font-size: .85rem; color: var(--gris-700); margin-bottom: 10px; }
.fil a { color: var(--gris-700); }
.mise-en-page-boutique { display: grid; grid-template-columns: 250px 1fr; gap: 32px; padding-bottom: 60px; }
.filtres { align-self: start; position: sticky; top: 96px; background: var(--blanc); border: 1px solid var(--gris-200); border-radius: var(--rayon); padding: 20px; }
.filtres fieldset { border: 0; padding: 0; margin: 0 0 20px; }
.filtres legend { font-weight: 700; color: var(--brun); margin-bottom: 8px; font-size: .95rem; }
.filtres label { display: flex; gap: 10px; align-items: center; padding: 4px 0; font-size: .92rem; cursor: pointer; }
.filtres input[type="checkbox"], .filtres input[type="radio"] { accent-color: var(--brun); width: 17px; height: 17px; }
.filtres input[type="range"] { width: 100%; accent-color: var(--ocre); }
.filtres summary { display: none; }
.barre-resultats { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.champ-select, .champ { height: 44px; border: 1.5px solid var(--gris-300); border-radius: var(--rayon-s); padding: 0 12px; background: var(--blanc); }
textarea.champ { height: auto; padding: 10px 12px; min-height: 84px; resize: vertical; }
.champ:focus, .champ-select:focus { outline: none; border-color: var(--ocre); }
.vide { text-align: center; padding: 50px 20px; background: var(--blanc); border: 1px dashed var(--gris-300); border-radius: var(--rayon); color: var(--gris-700); }

/* ---------- Fiche produit ---------- */
.fiche { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; padding: 10px 0 50px; }
.galerie .visuel { border-radius: 18px; }
.miniatures { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; }
.miniatures .visuel { border-radius: 10px; cursor: pointer; border: 2px solid transparent; }
.miniatures .visuel.actif { border-color: var(--brun); }
.fiche h1 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: 8px; }
.fiche .prix { font-size: 1.7rem; }
.fiche .prix small { font-size: .95rem; }
.ligne-vendeur { display: flex; align-items: center; gap: 10px; margin: 8px 0 18px; font-size: .92rem; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--brun); color: #fff; display: grid; place-items: center; font: 700 .85rem var(--titre); flex: none; }
.variantes { margin: 18px 0; }
.variantes p { font-weight: 600; margin-bottom: 8px; }
.puces { display: flex; gap: 8px; flex-wrap: wrap; }
.puces button { min-width: 48px; height: 40px; padding: 0 14px; border: 1.5px solid var(--gris-300); border-radius: var(--rayon-s); background: var(--blanc); cursor: pointer; }
.puces button[aria-pressed="true"] { border-color: var(--brun); background: var(--brun); color: #fff; }
.puces button:disabled { text-decoration: line-through; color: var(--gris-500); cursor: not-allowed; }
.actions-achat { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 22px 0; }
.quantite { display: inline-flex; align-items: center; border: 1.5px solid var(--gris-300); border-radius: 999px; height: 46px; background: var(--blanc); }
.quantite button { width: 40px; height: 100%; border: 0; background: none; cursor: pointer; font-size: 1.2rem; color: var(--brun); }
.quantite input { width: 40px; text-align: center; border: 0; background: none; font-weight: 600; -moz-appearance: textfield; }
.quantite input::-webkit-inner-spin-button { -webkit-appearance: none; }
.quantite.petite { height: 36px; }
.quantite.petite button { width: 32px; }
.quantite.petite input { width: 30px; }
.encadre { background: var(--blanc); border: 1px solid var(--gris-200); border-radius: var(--rayon); padding: 18px 20px; margin-bottom: 14px; }
.encadre h3 { font-size: 1rem; margin-bottom: 10px; }
.liste-infos { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: .92rem; }
.liste-infos li { display: flex; gap: 10px; align-items: flex-start; }
.liste-infos svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--ocre); }
.liste-infos .indispo svg { color: var(--gris-500); }
.description { max-width: 760px; }

/* ---------- Courses ---------- */
.heros-courses { background: var(--brun); color: #F4EADF; padding: 44px 0; position: relative; overflow: hidden; }
.heros-courses::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 40%; background: var(--treillis); opacity: .8; }
.heros-courses h1 { color: #fff; }
.heros-courses .cadre { position: relative; z-index: 1; }
.heros-courses .intro { color: #E8DACB; }
.fil-courses { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.fil-courses span { font-size: .85rem; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; padding: 6px 12px; }
.fil-courses b { color: #E9B56F; margin-right: 4px; }
.choix-pays-grand { background: var(--blanc); border-radius: 20px; padding: 28px; box-shadow: var(--ombre); margin-top: -30px; position: relative; z-index: 2; }
.choix-pays-grand .options { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.option-pays { display: flex; gap: 14px; align-items: center; border: 2px solid var(--gris-200); border-radius: var(--rayon); padding: 18px; background: var(--blanc); cursor: pointer; text-align: left; }
.option-pays:hover { border-color: var(--ocre); }
.option-pays[aria-pressed="true"] { border-color: var(--brun); background: var(--creme); }
.option-pays .drapeau { font-size: 1.8rem; }
.option-pays strong { display: block; color: var(--brun); }
.option-pays span { color: var(--gris-700); font-size: .88rem; }
.pays-choisi { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--blanc); border-radius: var(--rayon); padding: 14px 20px; box-shadow: var(--ombre); margin-top: -26px; position: relative; z-index: 2; }
.grille-paniers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.carte-panier { background: var(--blanc); border: 1px solid var(--gris-200); border-radius: var(--rayon); padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.carte-panier .entete-carte { display: flex; justify-content: space-between; align-items: start; gap: 8px; }
.carte-panier ul { margin: 4px 0 10px; padding-left: 18px; color: var(--gris-700); font-size: .9rem; }
.carte-panier .actions { display: flex; gap: 8px; margin-top: auto; flex-wrap: wrap; }
.carte-panier.vedette { border: 2px solid var(--ocre); }
.mise-en-page-courses { display: grid; grid-template-columns: 1fr 320px; gap: 30px; align-items: start; padding-bottom: 60px; }
.rayon-titre { display: flex; align-items: center; gap: 12px; margin: 30px 0 14px; }
.rayon-titre h2 { margin: 0; font-size: 1.4rem; }
.liste-courses { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.article-course { background: var(--blanc); border: 1px solid var(--gris-200); border-radius: var(--rayon); overflow: hidden; display: flex; flex-direction: column; }
.article-course .visuel { aspect-ratio: 4 / 3; }
.article-course .corps { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.article-course h3 { font: 600 .95rem/1.3 var(--texte); color: var(--gris-900); margin: 0; }
.article-course .format { font-size: .82rem; color: var(--gris-700); }
.article-course .pied-carte { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; }
.resume-lateral { position: sticky; top: 96px; background: var(--blanc); border: 1px solid var(--gris-200); border-radius: var(--rayon); padding: 20px; }
.resume-lateral h3 { display: flex; justify-content: space-between; }
.resume-lateral ul { list-style: none; margin: 0 0 14px; padding: 0; max-height: 280px; overflow: auto; font-size: .9rem; }
.resume-lateral li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--gris-200); }
.barre-panier-mobile { display: none; }

/* ---------- Panier et validation ---------- */
.mise-en-page-panier { display: grid; grid-template-columns: 1fr 360px; gap: 30px; align-items: start; padding-bottom: 60px; }
.ligne-panier { display: grid; grid-template-columns: 84px 1fr auto; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--gris-200); }
.ligne-panier .visuel { border-radius: 10px; width: 84px; }
.ligne-panier h3 { font: 600 .98rem var(--texte); color: var(--gris-900); margin: 0 0 2px; }
.ligne-panier .outils { display: flex; align-items: center; gap: 14px; margin-top: 8px; flex-wrap: wrap; }
.groupe-vendeur { background: var(--blanc); border: 1px solid var(--gris-200); border-radius: var(--rayon); padding: 6px 20px 4px; margin-bottom: 14px; }
.groupe-vendeur > h3 { font-size: .95rem; padding-top: 14px; margin: 0; display: flex; align-items: center; gap: 8px; }
.recap { background: var(--blanc); border: 1px solid var(--gris-200); border-radius: var(--rayon); padding: 22px; position: sticky; top: 96px; }
.recap dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 9px 12px; font-size: .94rem; }
.recap dt { color: var(--gris-700); }
.recap dd { margin: 0; text-align: right; font-weight: 600; }
.recap .total { border-top: 1.5px solid var(--gris-300); padding-top: 12px; margin-top: 4px; font-size: 1.1rem; color: var(--brun); font-weight: 800; }
.recap .total + dd { border-top: 1.5px solid var(--gris-300); padding-top: 12px; margin-top: 4px; font-size: 1.1rem; color: var(--brun); }
.note { font-size: .84rem; color: var(--gris-700); background: var(--creme); border-radius: var(--rayon-s); padding: 10px 12px; margin: 14px 0; }
.note.attention { background: var(--ocre-pale); color: var(--brun); }
.onglets-panier { display: flex; gap: 0; border-bottom: 1.5px solid var(--gris-300); margin-bottom: 20px; }
.onglets-panier a { padding: 12px 20px; text-decoration: none; font-weight: 600; color: var(--gris-700); border-bottom: 3px solid transparent; margin-bottom: -1.5px; }
.onglets-panier a[aria-current="page"] { color: var(--brun); border-bottom-color: var(--ocre); }

.etapes-commande { display: flex; gap: 0; list-style: none; padding: 0; margin: 0 0 28px; counter-reset: e; }
.etapes-commande li { flex: 1; display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--gris-500); padding: 10px 0; border-bottom: 3px solid var(--gris-200); }
.etapes-commande li::before { counter-increment: e; content: counter(e); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--gris-200); font-weight: 700; flex: none; font-size: .85rem; }
.etapes-commande li.fait { color: var(--gris-700); border-color: var(--ocre); }
.etapes-commande li.fait::before { background: var(--ocre); color: var(--brun-encre); content: "✓"; }
.etapes-commande li.actif { color: var(--brun); font-weight: 700; border-color: var(--brun); }
.etapes-commande li.actif::before { background: var(--brun); color: #fff; }
.panneau { background: var(--blanc); border: 1px solid var(--gris-200); border-radius: var(--rayon); padding: 24px; margin-bottom: 16px; }
.panneau h2 { font-size: 1.3rem; }
.choix-carte { display: grid; gap: 10px; }
.choix-carte label { display: flex; gap: 14px; align-items: flex-start; border: 1.5px solid var(--gris-300); border-radius: var(--rayon-s); padding: 14px 16px; cursor: pointer; background: var(--blanc); }
.choix-carte label:has(input:checked) { border-color: var(--brun); background: var(--creme); }
.choix-carte label.desactive { opacity: .6; cursor: not-allowed; background: var(--creme); }
.choix-carte input { accent-color: var(--brun); width: 18px; height: 18px; margin-top: 3px; flex: none; }
.choix-carte .droite { margin-left: auto; text-align: right; font-weight: 600; white-space: nowrap; }
.formulaire { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.formulaire .large { grid-column: 1 / -1; }
.formulaire label { display: grid; gap: 6px; font-size: .9rem; font-weight: 600; color: var(--gris-900); }
.formulaire label span.aide { font-weight: 400; color: var(--gris-700); font-size: .82rem; }
.formulaire .champ, .formulaire .champ-select { width: 100%; }
.champ-tel { display: flex; }
.champ-tel b { display: grid; place-items: center; padding: 0 12px; border: 1.5px solid var(--gris-300); border-right: 0; border-radius: var(--rayon-s) 0 0 var(--rayon-s); background: var(--creme); font-weight: 600; }
.champ-tel .champ { border-radius: 0 var(--rayon-s) var(--rayon-s) 0; }
.erreur { color: var(--alerte); font-size: .84rem; font-weight: 500; }
.case { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; cursor: pointer; margin: 10px 0; }
.case input { accent-color: var(--brun); width: 18px; height: 18px; flex: none; margin-top: 2px; }
.navigation-etapes { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.bloc-adresse { font-size: .93rem; line-height: 1.6; }
.bloc-adresse strong { color: var(--brun); }
.tableau-recap { width: 100%; border-collapse: collapse; font-size: .93rem; }
.tableau-recap th { text-align: left; font-weight: 600; color: var(--gris-700); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; padding: 8px 0; border-bottom: 1.5px solid var(--gris-300); }
.tableau-recap td { padding: 10px 0; border-bottom: 1px solid var(--gris-200); vertical-align: top; }
.tableau-recap .n { text-align: right; white-space: nowrap; padding-left: 12px; }
.moyens-paiement { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.moyen { border: 1px solid var(--gris-300); border-radius: 6px; padding: 4px 10px; font-size: .8rem; font-weight: 700; color: var(--gris-700); background: var(--blanc); }

/* ---------- Confirmation et suivi ---------- */
.confirmation { max-width: 720px; margin: 40px auto 70px; text-align: center; }
.confirmation .icone-ronde { width: 70px; height: 70px; border-radius: 50%; background: var(--ocre-pale); color: var(--ocre-texte); display: grid; place-items: center; margin: 0 auto 18px; }
.confirmation .icone-ronde svg { width: 34px; height: 34px; }
.suivi { list-style: none; margin: 0; padding: 0; }
.suivi li { position: relative; padding: 0 0 22px 36px; color: var(--gris-500); }
.suivi li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid var(--gris-300); background: var(--blanc); }
.suivi li::after { content: ""; position: absolute; left: 9px; top: 24px; bottom: 2px; width: 2.5px; background: var(--gris-200); }
.suivi li:last-child::after { display: none; }
.suivi li.fait { color: var(--gris-900); }
.suivi li.fait::before { background: var(--ocre); border-color: var(--ocre); }
.suivi li.fait::after { background: var(--ocre); }
.suivi li.actuel { color: var(--brun); font-weight: 700; }
.suivi li.actuel::before { background: var(--brun); border-color: var(--brun); box-shadow: 0 0 0 5px var(--ocre-pale); }
.suivi small { display: block; font-weight: 400; color: var(--gris-700); }

/* ---------- Compte ---------- */
.mise-en-page-compte { display: grid; grid-template-columns: 250px 1fr; gap: 30px; padding: 10px 0 60px; align-items: start; }
.menu-compte { background: var(--blanc); border: 1px solid var(--gris-200); border-radius: var(--rayon); padding: 10px; position: sticky; top: 96px; }
.menu-compte .profil { display: flex; gap: 10px; align-items: center; padding: 10px 10px 14px; border-bottom: 1px solid var(--gris-200); margin-bottom: 6px; }
.menu-compte a { display: flex; justify-content: space-between; padding: 10px 12px; border-radius: 8px; text-decoration: none; color: var(--gris-700); font-weight: 500; font-size: .93rem; }
.menu-compte a:hover { background: var(--creme); color: var(--brun); }
.menu-compte a[aria-current="page"] { background: var(--brun); color: #fff; }
.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 22px; }
.tuile { background: var(--blanc); border: 1px solid var(--gris-200); border-radius: var(--rayon); padding: 18px; text-decoration: none; }
.tuile strong { display: block; font: 800 1.6rem var(--titre); color: var(--brun); }
.tuile span { color: var(--gris-700); font-size: .88rem; }
.liste-commandes { display: grid; gap: 12px; }
.commande-ligne { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: center; background: var(--blanc); border: 1px solid var(--gris-200); border-radius: var(--rayon); padding: 16px 20px; }
.commande-ligne .num { font-weight: 700; color: var(--brun); }
.commande-ligne .meta { color: var(--gris-700); font-size: .88rem; }
.commande-ligne .actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.cartes-beneficiaires { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.carte-beneficiaire { background: var(--blanc); border: 1px solid var(--gris-200); border-radius: var(--rayon); padding: 18px 20px; font-size: .92rem; }
.carte-beneficiaire .haut { display: flex; justify-content: space-between; gap: 8px; align-items: start; margin-bottom: 8px; }
.carte-beneficiaire h3 { margin: 0; font-size: 1.05rem; }
.carte-beneficiaire .actions { display: flex; gap: 14px; margin-top: 12px; }
.interrupteur { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--gris-200); }
.interrupteur input { accent-color: var(--brun); width: 20px; height: 20px; }

/* ---------- Opérations (préparateurs / livreurs) ---------- */
.ops { max-width: 560px; margin: 0 auto; padding: 20px 16px 60px; }
.ops-entete { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.carte-ops { background: var(--blanc); border: 1px solid var(--gris-200); border-radius: var(--rayon); padding: 18px; margin-bottom: 14px; }
.carte-ops .haut { display: flex; justify-content: space-between; gap: 10px; align-items: start; }
.ligne-prep { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--gris-200); align-items: center; }
.ligne-prep .boutons-etat { display: flex; gap: 6px; grid-column: 1 / -1; flex-wrap: wrap; }
.ligne-prep .boutons-etat button { flex: 1; min-height: 40px; border-radius: 8px; border: 1.5px solid var(--gris-300); background: var(--blanc); cursor: pointer; font-size: .85rem; font-weight: 600; }
.ligne-prep .boutons-etat button[aria-pressed="true"].dispo { background: var(--succes); border-color: var(--succes); color: #fff; }
.ligne-prep .boutons-etat button[aria-pressed="true"].indispo { background: var(--alerte); border-color: var(--alerte); color: #fff; }
.ligne-prep .boutons-etat button[aria-pressed="true"].rempl { background: var(--ocre); border-color: var(--ocre); color: var(--brun-encre); }
.actions-ops { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.actions-ops .btn { min-height: 52px; white-space: normal; }

/* ---------- Pied de page ---------- */
#pied { background: var(--brun-encre); color: #CDBBA9; padding: 50px 0 24px; font-size: .9rem; }
#pied .colonnes { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 30px; }
#pied h4 { color: #fff; font: 700 .95rem var(--texte); margin-bottom: 12px; }
#pied ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
#pied a { color: #CDBBA9; text-decoration: none; }
#pied a:hover { color: #fff; text-decoration: underline; }
#pied .marque { font: 800 1.6rem var(--titre); color: #fff; }
#pied .marque span { color: var(--ocre); }
#pied .slogan { font-style: italic; color: #E9B56F; }
#pied .bas { border-top: 1px solid rgba(255,255,255,.12); margin-top: 36px; padding-top: 18px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: .82rem; }

#toast { visibility: hidden; opacity: 0; position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 120%); background: var(--brun); color: #fff; padding: 12px 20px; border-radius: 999px; box-shadow: var(--ombre); font-size: .92rem; transition: transform .25s; z-index: 80; max-width: calc(100% - 32px); }
#toast.visible { transform: translate(-50%, 0); visibility: visible; opacity: 1; }
#toast a { color: #E9B56F; margin-left: 8px; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .heros .cadre, .bloc-vendeur, .assistance, .fiche { grid-template-columns: 1fr; }
  .heros-visuel { max-width: 520px; }
  .etapes { grid-template-columns: 1fr 1fr; }
  .mise-en-page-boutique, .mise-en-page-courses, .mise-en-page-panier, .mise-en-page-compte { grid-template-columns: 1fr; }
  .filtres, .resume-lateral, .recap, .menu-compte { position: static; }
  .filtres summary { display: flex; justify-content: space-between; cursor: pointer; font-weight: 700; color: var(--brun); }
  .filtres details:not([open]) > :not(summary) { display: none; }
  .filtres details[open] summary { margin-bottom: 14px; }
  .resume-lateral { display: none; }
  .barre-panier-mobile { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--blanc); border-top: 1px solid var(--gris-300); padding: 10px 16px; justify-content: space-between; align-items: center; gap: 12px; box-shadow: 0 -6px 20px rgba(36,22,15,.08); }
  .menu-compte { display: flex; overflow-x: auto; padding: 6px; gap: 4px; }
  .menu-compte .profil { display: none; }
  .menu-compte a { white-space: nowrap; }
  #pied .colonnes { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .section { padding: 40px 0; }
  .barre-haut .secondaire, .barre-haut .liens a[href="#/compte"], .actions-entete a[href="#/compte/favoris"] { display: none; }
  .actions-entete { gap: 6px; }
  .icone-bouton, .pastille-panier { height: 40px; }
  .icone-bouton { width: 40px; }
  .logo { width: 124px; }
  .barre-haut .liens { gap: 12px; }
  .choix-pays { font-size: .8rem; }
  .entete-principal .cadre { flex-wrap: wrap; gap: 10px; padding-top: 10px; padding-bottom: 10px; min-height: 0; }

  .recherche { order: 3; flex-basis: 100%; max-width: none; }
  .pastille-panier .libelle { display: none; }
  .pastille-panier { padding: 0 10px; }
  .deux-services, .etapes, .choix-pays-grand .options, .formulaire, .chiffres { grid-template-columns: 1fr; }
  .carte-service { padding: 26px; min-height: 0; }
  .carte-suivi { position: relative; right: auto; bottom: auto; width: auto; margin: -50px 14px 0; }
  .bloc-vendeur { padding: 26px; }
  .etapes-commande li span { display: none; }
  .etapes-commande li { justify-content: center; }
  .ligne-panier { grid-template-columns: 64px 1fr; }
  .ligne-panier .visuel { width: 64px; }
  .ligne-panier > .prix { grid-column: 2; }
  .commande-ligne { grid-template-columns: 1fr; }
  .commande-ligne .actions { justify-content: flex-start; }
  #pied .colonnes { grid-template-columns: 1fr; }
  .grille-produits { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .liste-courses { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .carte-produit .pied-carte { flex-direction: column; align-items: stretch; }
  .article-course .pied-carte { flex-direction: column; align-items: stretch; }
  .panneau { padding: 18px; }
}

@media print {
  .bandeau-demo, #entete, #pied, .ne-pas-imprimer, #toast { display: none !important; }
  body { background: #fff; }
  .carte-ops { border: 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.drapeau-svg { width: 1.35em; height: .9em; border-radius: 2px; vertical-align: -0.1em; box-shadow: 0 0 0 1px rgba(0,0,0,.12); display: inline-block; }
.option-pays .drapeau-svg { width: 42px; height: 28px; }
.recherche button svg { width: 20px; height: 20px; display: block; }
.btn svg, .ligne-contact svg, .note svg { width: 18px; height: 18px; flex: none; }
.note svg { vertical-align: -3px; margin-right: 4px; color: var(--ocre-texte); }