/* Tondraaga — v5 « designer » (inspirations VIVA et Martfury), couleurs du logo uniquement :
   brun #4D3529, ocre #C87817, blancs, gris chauds. Chargé en dernier. */
:root {
  --fond-page: #F6F2EC;
  --panneau: #FFFFFF;
  --serif: "DM Serif Display", Georgia, "Times New Roman", serif;
  --ombre-douce: 0 1px 2px rgba(36, 22, 15, .04), 0 10px 30px rgba(36, 22, 15, .06);
  --rayon-l: 22px;
}
body { background: var(--fond-page); }
h1, h2, .titre-heros { font-family: var(--serif); font-weight: 400; letter-spacing: -.005em; }
.infos-produit h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem, 2.6vw, 2.1rem); color: var(--brun); }
.surtitre { letter-spacing: .14em; }

/* ======================= En-tête ======================= */
.annonce, .entete-principal, .nav-principale { display: none !important; }
.hd-top { background: var(--brun); color: #F4EADF; font-size: .8rem; }
.hd-top .cadre { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 38px; }
.hd-promesses { list-style: none; margin: 0; padding: 0; display: flex; gap: 0; }
.hd-promesses li { display: flex; align-items: center; gap: 7px; padding: 0 16px; border-left: 1px solid rgba(255, 255, 255, .2); }
.hd-promesses li:first-child { border-left: 0; padding-left: 0; }
.hd-promesses svg { width: 15px; height: 15px; color: var(--ocre); }
.hd-promesses .drapeau-svg { width: 17px; height: 11px; }
.hd-liens { display: flex; gap: 18px; }
.hd-liens a { display: inline-flex; align-items: center; gap: 6px; color: #F4EADF; text-decoration: none; }
.hd-liens a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.hd-liens svg { width: 14px; height: 14px; color: var(--ocre); }

.hd-main { background: #fff; position: sticky; top: 0; z-index: 40; transition: box-shadow .25s; }
body.defile .hd-main { box-shadow: 0 6px 24px rgba(36, 22, 15, .10); }
.hd-main .cadre { display: flex; align-items: center; gap: 28px; min-height: 84px; }
.hd-logo { flex: none; width: 168px; aspect-ratio: 1380 / 340; background: url("../img/logo.webp") no-repeat; background-size: 108.7% auto; background-position: 58.3% 49.1%; }
.hd-recherche { flex: 1; display: flex; align-items: center; height: 50px; background: #F7F4F0; border: 1.5px solid transparent; border-radius: 999px; padding: 4px 4px 4px 6px; transition: border-color .2s, background .2s, box-shadow .2s; min-width: 0; }
.hd-recherche:focus-within { background: #fff; border-color: var(--ocre); box-shadow: 0 0 0 5px rgba(200, 120, 23, .12); }
.hd-recherche select { border: 0; background: transparent; padding: 0 8px 0 14px; height: 100%; font-size: .85rem; font-weight: 600; color: var(--brun); cursor: pointer; flex: none; }
.hd-recherche select:focus { outline: none; }
.hd-sep { width: 1px; height: 22px; background: var(--gris-300); flex: none; }
.hd-recherche input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0 14px; font-size: .94rem; height: 100%; }
.hd-recherche input:focus { outline: none; }
.hd-recherche button { flex: none; width: 46px; height: 42px; border-radius: 999px; border: 0; background: var(--brun); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .2s, transform .15s; }
.hd-recherche button:hover { background: var(--ocre); color: var(--brun-encre); }
.hd-recherche button svg { width: 19px; height: 19px; }
.hd-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.hd-pays { display: flex; align-items: center; gap: 6px; padding: 6px 4px 6px 10px; border: 1px solid var(--gris-200); border-radius: 999px; margin-right: 8px; }
.hd-pays .drapeau-svg { width: 20px; height: 14px; }
.hd-pays select { border: 0; background: transparent; font-size: .8rem; font-weight: 600; color: var(--brun); max-width: 112px; cursor: pointer; }
.hd-pays select:focus { outline: none; }
.hd-action { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 58px; padding: 4px 6px; text-decoration: none; color: var(--brun); font-size: .72rem; font-weight: 600; border-radius: 12px; transition: background .2s, color .2s; }
.hd-action:hover { background: var(--fond-page); }
.hd-action svg { width: 23px; height: 23px; stroke-width: 1.7; }
.hd-action.courses svg { color: var(--ocre-texte); }
.hd-action .compteur { top: -2px; right: 10px; }

.hd-nav { background: #fff; border-top: 1px solid var(--gris-200); border-bottom: 1px solid var(--gris-200); }
.hd-nav .cadre { display: flex; align-items: center; gap: 22px; min-height: 54px; }
.hd-toutes { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 18px; border: 0; border-radius: 12px; background: var(--brun); color: #fff; font-weight: 600; font-size: .88rem; cursor: pointer; white-space: nowrap; transition: background .2s; }
.hd-toutes:hover, .hd-toutes[aria-expanded="true"] { background: var(--brun-fonce); }
.hd-toutes svg { width: 17px; height: 17px; }
.hd-toutes svg:last-child { width: 13px; height: 13px; transition: transform .2s; }
.hd-toutes[aria-expanded="true"] svg:last-child { transform: rotate(180deg); }
.hd-menu { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; flex: 1; overflow-x: auto; scrollbar-width: none; }
.hd-menu::-webkit-scrollbar { display: none; }
.hd-menu a { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 16px 10px; color: var(--gris-900); text-decoration: none; font-weight: 500; font-size: .9rem; white-space: nowrap; }
.hd-menu a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 8px; height: 2px; border-radius: 2px; background: var(--ocre); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.hd-menu a:hover::after, .hd-menu a[aria-current="page"]::after { transform: scaleX(1); }
.hd-menu a[aria-current="page"] { color: var(--brun); font-weight: 700; }
.hd-menu .hd-offres { color: var(--ocre-texte); font-weight: 700; }
.hd-menu svg { width: 15px; height: 15px; }
.hd-suivi { display: inline-flex; align-items: center; gap: 7px; color: var(--brun); text-decoration: none; font-weight: 600; font-size: .85rem; white-space: nowrap; }
.hd-suivi svg { width: 17px; height: 17px; color: var(--ocre-texte); }
.menu-categories .mega { top: calc(100% + 8px); }

/* ======================= Bannière Martfury ======================= */
.hero-mf { display: grid; grid-template-columns: 250px 1fr 290px; gap: 18px; padding-top: 22px; }
.rayons-mf { background: var(--panneau); border-radius: var(--rayon-l); box-shadow: var(--ombre-douce); padding: 8px 0 10px; overflow: hidden; }
.rayons-titre { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; padding: 12px 18px; font-weight: 700; color: var(--brun); font-size: .92rem; border-bottom: 1px solid var(--gris-200); }
.rayons-titre svg { width: 17px; height: 17px; color: var(--ocre); }
.rayons-mf ul { list-style: none; margin: 0; padding: 0; }
.rayons-mf li a { display: flex; align-items: center; gap: 11px; padding: 7px 16px; text-decoration: none; color: var(--gris-900); font-size: .86rem; transition: background .2s, color .2s, padding .2s; }
.rayons-mf li a img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; }
.rayons-mf li a span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rayons-mf li a > svg { width: 13px; height: 13px; color: var(--gris-300); transition: transform .2s, color .2s; }
.rayons-mf li a:hover { background: var(--fond-page); color: var(--brun); padding-left: 20px; }
.rayons-mf li a:hover > svg { color: var(--ocre); transform: translateX(3px); }
.rayons-mf li.sep { padding: 10px 18px 4px; font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ocre-texte); font-weight: 700; border-top: 1px solid var(--gris-200); margin-top: 6px; }
.rayons-mf .lien-colis span { color: var(--brun); font-weight: 600; }

.hero-mf .carrousel { min-height: 470px; border-radius: var(--rayon-l); box-shadow: var(--ombre-douce); }
.hero-mf .slide-photo { inset: 0 0 0 30%; }
.hero-mf .slide-texte { padding: 46px 0 84px 44px; max-width: 470px; }
.hero-mf .titre-heros { font-size: clamp(2rem, 3.4vw, 3.1rem); line-height: 1.05; color: var(--brun); }
.hero-mf .chapeau { font-size: 1rem; margin-bottom: 22px; color: var(--gris-700); }
.hero-mf .boutons { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-mf .carrousel-nav { left: 44px; bottom: 24px; }

.cotes-mf { display: grid; grid-template-rows: 1fr 1fr; gap: 18px; }
.cote-mf { position: relative; display: block; border-radius: var(--rayon-l); overflow: hidden; text-decoration: none; box-shadow: var(--ombre-douce); min-height: 200px; }
.cote-mf img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.cote-mf:hover img { transform: scale(1.06); }
.cote-mf::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.cote-mf.clair::before { background: linear-gradient(90deg, rgba(247, 235, 219, .97) 0%, rgba(247, 235, 219, .82) 48%, rgba(247, 235, 219, 0) 85%); }
.cote-mf.sombre::before { background: linear-gradient(90deg, rgba(59, 40, 31, .96) 0%, rgba(77, 53, 41, .8) 50%, rgba(77, 53, 41, .05) 90%); }
.cote-texte { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 2px; padding: 22px 22px; max-width: 72%; height: 100%; justify-content: center; }
.cote-texte small { font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: var(--ocre-texte); }
.cote-texte b { font: 400 1.45rem/1.1 var(--serif); color: var(--brun); }
.cote-texte em { font-style: normal; font-weight: 800; color: var(--brun); margin-top: 4px; }
.cote-texte i { font-style: normal; display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: .82rem; font-weight: 700; color: var(--brun); }
.cote-texte i svg { width: 14px; height: 14px; transition: transform .2s; }
.cote-mf:hover .cote-texte i svg { transform: translateX(4px); }
.cote-mf.sombre small { color: #E9B56F; }
.cote-mf.sombre b, .cote-mf.sombre em, .cote-mf.sombre i { color: #fff; }

.promesses-mf { list-style: none; margin: 18px 0 0; padding: 18px 26px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; background: var(--panneau); border-radius: var(--rayon-l); box-shadow: var(--ombre-douce); }
.promesses-mf li { display: flex; align-items: center; gap: 14px; }
.promesses-mf li + li { border-left: 1px solid var(--gris-200); padding-left: 18px; }
.promesses-mf svg { width: 42px; height: 42px; padding: 10px; border-radius: 50%; background: var(--ocre-pale); color: var(--ocre-texte); flex: none; }
.promesses-mf .drapeau-svg { width: 42px; height: 28px; padding: 0; border-radius: 4px; background: none; }
.promesses-mf span { display: flex; flex-direction: column; font-size: .8rem; color: var(--gris-700); }
.promesses-mf b { font-size: .92rem; color: var(--brun); }

/* ======================= Sections en panneaux (VIVA) ======================= */
.section-blanche { background: transparent; }
.bandeau-rail, .quad, .carte-panier, .etape, .temoignage, .panneau { box-shadow: var(--ombre-douce); border-color: transparent; }
.bande-categories { background: var(--panneau); border-radius: var(--rayon-l); box-shadow: var(--ombre-douce); margin-top: 18px; padding: 22px 24px !important; }
.rond-categorie .cercle { box-shadow: 0 0 0 4px var(--fond-page); }
.rond-categorie:hover .cercle { box-shadow: 0 0 0 4px var(--ocre-pale), 0 0 0 6px var(--ocre); }
.entete-section h2, .bandeau-rail h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); color: var(--brun); }
.entete-section h2::after { content: ""; display: block; width: 44px; height: 3px; border-radius: 2px; background: var(--ocre); margin-top: 10px; }
.bandeau-rail .entete-section h2::after { display: none; }

/* Cartes produits raffinées */
.carte-produit { border: 0; border-radius: 20px; padding: 10px; box-shadow: var(--ombre-douce); background: #fff; }
.carte-produit:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(36, 22, 15, .12); }
.carte-produit .carte-media { border-radius: 14px; }
.carte-produit .corps { padding: 12px 6px 4px; }
.carte-produit .categorie { font-size: .66rem; letter-spacing: .1em; color: var(--ocre-texte); }
.carte-produit h3 { font-size: .95rem; font-weight: 600; }
.carte-produit .prix { font-size: 1.08rem; }
.carte-produit .favori { top: 18px; right: 18px; box-shadow: 0 2px 8px rgba(0, 0, 0, .1); }
.carte-produit .pastilles { left: 18px; top: 18px; }
.carte-produit .made-bf.sur-photo { left: 18px; bottom: 18px; }
.badge.promo { background: var(--brun); color: #fff; }
.rond-panier { width: 40px; height: 40px; box-shadow: 0 6px 14px rgba(77, 53, 41, .25); }
.carte-produit .rond-panier:hover { background: var(--ocre); color: var(--brun-encre); }

/* Offres du jour, panier de la semaine, trio */
.offre-semaine { border-radius: var(--rayon-l); background: var(--brun) var(--treillis); }
.offre-texte h2 { font-size: 2rem; }
.banniere { border-radius: var(--rayon-l); box-shadow: var(--ombre-douce); }
.banniere h3 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; }
.b-sable { background: #EFE6DA; }

/* Témoignages et newsletter (VIVA) */
.temoignage { background: #fff; }
.temoignage .avatar { background: var(--brun); color: #fff; }
.temoignage strong::after { content: " ✓"; color: var(--ocre); font-size: .85em; }
.newsletter { border-radius: var(--rayon-l); background: var(--brun) var(--treillis); }
.newsletter h2 { font-size: 2rem; }
.icone-ronde-n { box-shadow: 0 0 0 8px rgba(255, 255, 255, .12); }

/* Reçu de paiement : tampon */
.recu-paiement .recu-corps > div { position: relative; }
.tampon-paye { position: absolute; right: 6mm; bottom: -16mm; transform: rotate(-12deg); border: 2.5px solid #2F6B3A; color: #2F6B3A; border-radius: 3mm; padding: 1.5mm 4mm; text-align: center; display: flex; flex-direction: column; line-height: 1.1; opacity: .85; }
.tampon-paye b { font: 800 20px var(--titre); letter-spacing: .2em; }
.tampon-paye span { font-size: 8.5px; font-weight: 700; letter-spacing: .06em; }

/* ======================= Responsive ======================= */
@media (max-width: 1280px) {
  .hero-mf { grid-template-columns: 1fr 270px; }
  .rayons-mf { display: none; }
  .hd-suivi span { display: none; }
}
@media (max-width: 1100px) {
  .hd-promesses li:nth-child(3) { display: none; }
  .hd-main .cadre { gap: 16px; }
  .hd-action span { display: none; }
  .hd-action { min-width: 44px; }
}
@media (max-width: 1000px) {
  .hero-mf { grid-template-columns: 1fr; }
  .cotes-mf { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .promesses-mf { grid-template-columns: 1fr 1fr; }
  .promesses-mf li + li { border-left: 0; padding-left: 0; }
  .hd-liens a:not(:last-child) { display: none; }
}
@media (max-width: 720px) {
  .hd-top .cadre { justify-content: center; }
  .hd-promesses li:not(:first-child) { display: none; }
  .hd-liens { display: none; }
  .hd-main .cadre { flex-wrap: wrap; gap: 10px; min-height: 0; padding-top: 10px; padding-bottom: 10px; }
  .hd-logo { width: 128px; }
  .hd-actions { margin-left: auto; }
  .hd-pays { display: none; }
  .hd-actions a[href="#/compte"], .hd-actions a[href="#/compte/favoris"] { display: none; }
  .hd-recherche { order: 3; flex-basis: 100%; height: 46px; }
  .hd-recherche select { max-width: 92px; padding-left: 10px; }
  .hd-nav .cadre { gap: 10px; min-height: 50px; }
  .hd-toutes span { display: none; }
  .hd-toutes { padding: 0 12px; }
  .hd-suivi { display: none; }
  .hero-mf { padding-top: 12px; }
  .hero-mf .carrousel { min-height: 0; }
  .hero-mf .slide-photo { inset: auto; }
  .hero-mf .slide-texte { padding: 4px 20px 76px; }
  .hero-mf .carrousel-nav { left: 20px; }
  .cotes-mf { grid-template-columns: 1fr; }
  .cote-mf { min-height: 150px; }
  .promesses-mf { grid-template-columns: 1fr; padding: 16px; }
  .entete-section h2, .bandeau-rail h2 { font-size: 1.6rem; }
}

/* v5.1 — bannière plein cadre avec voile brun, menu, alignements */
.hero-mf .slide-photo { inset: 0; }
.hero-mf .slide-photo::after { background: linear-gradient(90deg, rgba(36, 22, 15, .9) 0%, rgba(59, 40, 31, .72) 42%, rgba(59, 40, 31, .12) 78%, rgba(59, 40, 31, 0) 100%); }
.hero-mf .slide-texte { max-width: 400px; }
.hero-mf .titre-heros { color: #fff; font-size: clamp(2rem, 3.2vw, 2.9rem); }
.hero-mf .surtitre { color: #E9B56F; }
.hero-mf .chapeau { color: #EFE3D6; }
.hero-mf .btn-brun, .hero-mf .btn-blanc { background: #fff; color: var(--brun); border-color: #fff; }
.hero-mf .btn-brun:hover, .hero-mf .btn-blanc:hover { background: var(--ocre-pale); }
.hero-mf .carrousel-nav > button { background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .4); color: #fff; }
.hero-mf .carrousel-nav > button:hover { background: #fff; color: var(--brun); }
.hero-mf .points button { background: rgba(255, 255, 255, .45); }
.hero-mf .points button[aria-current="true"] { background: var(--ocre); }
.bande-categories { max-width: calc(var(--contenu) - 32px); margin-left: auto; margin-right: auto; }
.cote-texte i { flex-wrap: wrap; }
@media (max-width: 1500px) { .hd-suivi { display: none; } }
@media (max-width: 1240px) { .hd-menu a { padding-left: 8px; padding-right: 8px; font-size: .86rem; } }
@media (max-width: 720px) {
  .hero-mf .slide-photo { inset: auto; }
  .hero-mf .slide-photo::after { background: linear-gradient(0deg, rgba(36, 22, 15, .9) 0%, rgba(36, 22, 15, 0) 60%); }
  .hero-mf .slide { background: var(--brun-fonce); }
  .bande-categories { max-width: none; margin-left: 16px; margin-right: 16px; }
}
@media (max-width: 720px) { .hd-recherche select { max-width: none; width: auto; font-size: .8rem; padding: 0 4px 0 10px; } .hd-recherche input { padding: 0 10px; } }