/* Nature & Sens — fleuriste, place du Marché, Muzillac.
   Palette de la boutique : gris kaki des boiseries, rose pêche des panneaux et de l'enseigne, corail dominant.
   Le noir et le rouge ne servent qu'en touches (texte, coccinelle, coquelicot). */
:root {
  /* Couleurs de la boutique */
  --kaki: #4f5a56;          /* boiseries de la devanture, gris kaki */
  --kaki-fonce: #38413f;
  --kaki-clair: #87918c;
  --beige: #ecd0c5;         /* panneaux et enseigne, rose pêche clair */
  --beige-2: #ddb7aa;
  --fond: #f8efea;          /* fond des pages, rose pêche très clair */
  --carte: #f0e0d8;         /* fond des vignettes */
  --champ: #fdf9f7;         /* champs de formulaire */
  --corail: #e8705a;        /* couleur dominante */
  --corail-fonce: #b44c37;  /* corail lisible sur fond clair */
  --corail-doux: #f6b9a8;   /* corail lisible sur kaki */
  --noir: #1e201c;          /* touches : texte */
  --rouge: #c4232b;         /* touches : coccinelle, coquelicot */
  --texte: #1e201c;
  --texte-2: rgba(30, 32, 28, .74);
  --gris: #6c6a62;
  --sur-kaki: #f6ebe5;
  --sur-kaki-2: rgba(246, 235, 229, .8);
  --tige: #5f7d4f;
  --ligne: rgba(30, 32, 28, .14);
  --ligne-2: rgba(30, 32, 28, .3);
  --ligne-kaki: rgba(246, 235, 229, .22);
  /* Anciens noms, gardés pour les styles propres à chaque page */
  --ivoire: var(--texte);
  --ivoire-2: var(--texte-2);
  --suie: var(--carte);
  --suie-2: var(--beige);
  --rouge-vif: var(--corail-fonce);
  --rouge-sombre: var(--corail-fonce);
  --petale: var(--corail-fonce);
  --encre-2: var(--gris);
  /* Typographie et mise en page */
  --f-titre: 'Bodoni Moda', 'Didot', serif;
  --f-texte: 'Hanken Grotesk', system-ui, sans-serif;
  --wrap: 1240px;
  --gout: clamp(16px, 4vw, 44px);
  --ease: cubic-bezier(.22, .8, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--fond); color: var(--texte); font: 400 1rem/1.6 var(--f-texte); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
::selection { background: var(--corail); color: var(--noir); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--f-titre); font-weight: 400; margin: 0; line-height: 1.05; font-optical-sizing: auto; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--corail-fonce); outline-offset: 3px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gout); }
.muted { color: var(--gris); }
.ligne { padding-bottom: .06em; }

/* ---------- Typographie ---------- */
.t-xxl, .hero__titre, .pied__geant { font-variation-settings: "opsz" 34; }
.t-xxl { font-size: clamp(2.6rem, 6vw, 5.6rem); line-height: .95; letter-spacing: -.02em; }
.t-xl { font-size: clamp(2rem, 3.6vw, 3.3rem); line-height: 1.02; letter-spacing: -.015em; }
.t-l { font-size: clamp(1.6rem, 2.5vw, 2.3rem); line-height: 1.08; letter-spacing: -.01em; }
.script { font-style: italic; font-family: var(--f-titre); font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1; color: var(--corail-fonce); }
.lead { font-size: clamp(1rem, 1.1vw, 1.1rem); line-height: 1.6; color: var(--texte-2); max-width: 58ch; }

/* ---------- Coquelicot (photo détourée) et coccinelle ---------- */
img.coquelicot { width: 60px; height: auto; aspect-ratio: 522 / 544; object-fit: contain; }
.coccinelle { width: 28px; height: 28px; display: inline-block; flex: none; overflow: visible; }
.coccinelle .ailes { transform-origin: 32px 30px; transition: transform .5s var(--ease); }
.coccinelle:hover .ailes, a:hover > .coccinelle .ailes { transform: scaleX(1.06); }

/* ---------- Boutons ---------- */
.btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px;
  border: 1px solid var(--corail); background: var(--corail); color: var(--noir); font: 600 .92rem/1 var(--f-texte); letter-spacing: .01em; text-decoration: none;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); white-space: nowrap; }
.btn:hover, .btn:focus-visible { background: var(--kaki-fonce); border-color: var(--kaki-fonce); color: var(--sur-kaki); }
.btn--rouge, .btn--plein { background: var(--corail); border-color: var(--corail); color: var(--noir); }
.btn--plein { width: 100%; }
.btn--clair { background: var(--beige); border-color: var(--beige); color: var(--noir); }
.btn--ligne { background: transparent; color: currentColor; border-color: currentColor; }
.btn--ligne:hover, .btn--ligne:focus-visible { background: var(--noir); border-color: var(--noir); color: var(--fond); }
.sur-kaki .btn--ligne:hover, .hero .btn--ligne:hover, .pied .btn--ligne:hover, .section--kaki .btn--ligne:hover { background: var(--sur-kaki); border-color: var(--sur-kaki); color: var(--kaki-fonce); }
.btn--petit { min-height: 42px; padding: 0 18px; font-size: .9rem; }
.btn[disabled] { opacity: .4; pointer-events: none; }
.lien { display: inline-flex; gap: 8px; align-items: center; color: var(--corail-fonce); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; font-weight: 600; background: none; padding: 0; font-size: 1rem; }
.lien:hover { color: var(--noir); }
.section--kaki .lien, .sur-kaki .lien { color: var(--corail-doux); }
.section--kaki .lien:hover, .sur-kaki .lien:hover { color: var(--sur-kaki); }

/* ---------- En-tête : toujours visible, sur fond kaki comme les volets ---------- */
/* Collé en haut (sticky) et toujours opaque, kaki foncé comme le haut du héros : les pages commencent sous lui. */
[id] { scroll-margin-top: calc(var(--entete-h, 86px) + 12px); }
.entete { position: sticky; top: 0; z-index: 60; background: var(--kaki-fonce); color: var(--sur-kaki); transition: box-shadow .3s; }
.entete.is-solide { box-shadow: 0 1px 0 var(--ligne-kaki); }
.bandeau { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; background: var(--corail); color: var(--noir); font-size: .86rem; font-weight: 600; padding: 7px var(--gout); text-align: center; }
.bandeau a { text-decoration: none; font-weight: 700; }
@media (max-width: 640px) { .bandeau a { display: none; } .bandeau { font-size: .8rem; } }
.entete__in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; max-width: var(--wrap); margin: 0 auto; padding: 12px var(--gout); }
.logo { position: relative; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; justify-self: start; }
.logo__fleur { width: 36px; height: 36px; object-fit: contain; margin: -4px 0 -4px -4px; }
.logo .coccinelle { position: absolute; width: 15px; height: 15px; left: 22px; top: -4px; transform: rotate(28deg); }
.logo__mot { font: 400 1.28rem/1 var(--f-titre); letter-spacing: -.01em; white-space: nowrap; }
.logo__mot em { font-style: italic; color: var(--corail-doux); }
.nav { display: flex; gap: 28px; justify-content: center; }
.nav a { position: relative; display: block; text-decoration: none; font-size: .94rem; font-weight: 500; padding: 4px 0; transition: color .25s; }
.nav a:hover { color: var(--corail-doux); }
.nav a[aria-current="page"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--corail); }
.entete__actions { display: flex; align-items: center; gap: 10px; justify-self: end; }
.entete__tel { font-size: .86rem; font-weight: 600; text-decoration: none; padding: 8px 12px; border: 1px solid var(--ligne-kaki); transition: border-color .3s, color .3s; }
.entete__tel:hover { border-color: var(--corail); color: var(--corail-doux); }
.panier-btn { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--ligne-kaki); background: transparent; color: var(--sur-kaki); transition: border-color .3s, background .3s, color .3s; }
.panier-btn:hover { border-color: var(--corail); background: var(--corail); color: var(--noir); }
.panier-btn svg { width: 22px; height: 22px; }
.panier-btn .compte:not(:empty) { position: absolute; top: -8px; right: -8px; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 11px; background: var(--corail); color: var(--noir); font-size: .72rem; font-weight: 700; display: grid; place-items: center; }
.burger { display: none; width: 42px; height: 42px; border: 1px solid var(--ligne-kaki); background: transparent; position: relative; }
.burger span { position: absolute; left: 12px; right: 12px; height: 1.5px; background: var(--sur-kaki); transition: transform .35s var(--ease), top .35s var(--ease); }
.burger span:first-child { top: 16px; } .burger span:last-child { top: 24px; }
.menu-ouvert .burger span:first-child { top: 20px; transform: rotate(45deg); }
.menu-ouvert .burger span:last-child { top: 20px; transform: rotate(-45deg); }
.menu-mobile { position: fixed; inset: var(--entete-h, 86px) 0 0; z-index: 55; background: var(--kaki-fonce); color: var(--sur-kaki); display: flex; flex-direction: column; justify-content: space-between; padding: 30px var(--gout) 34px; overflow-y: auto;
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.menu-ouvert .menu-mobile { opacity: 1; visibility: visible; }
.menu-mobile nav { display: grid; gap: 6px; }
.menu-mobile nav a { font: 400 clamp(2rem, 8vw, 3.2rem)/1.15 var(--f-titre); text-decoration: none; }
.menu-mobile__pied { display: grid; gap: 6px; color: var(--sur-kaki-2); }
.menu-mobile__pied a { color: var(--sur-kaki); font-size: 1.3rem; font-weight: 600; text-decoration: none; }
@media (max-width: 1080px) { .entete__tel { display: none; } }
@media (max-width: 960px) { .nav { display: none; } .burger { display: block; } .entete__in { grid-template-columns: 1fr auto; } }
@media (max-width: 420px) { .logo__mot { font-size: 1.18rem; } .entete__in { gap: 10px; } }

/* ---------- Transition de page : un simple fondu ---------- */
.transition { position: fixed; inset: 0; z-index: 300; background: var(--fond); pointer-events: none; visibility: hidden; opacity: 0; }

/* ---------- Haut de page commun : le mur de photos et le coquelicot ---------- */
.hero { position: relative; height: calc(100svh - var(--entete-h, 90px)); min-height: 560px; overflow: hidden; background: var(--kaki-fonce); color: var(--sur-kaki); }
.hero--page { height: auto; min-height: max(calc(74svh - var(--entete-h, 90px)), 480px); display: grid; }
.hero--page .hero__centre { position: relative; inset: auto; padding: 34px var(--gout) 56px; }
.mur { position: absolute; inset: -6vh -2vw; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.mur__col { display: flex; flex-direction: column; gap: 14px; }
.mur__col:nth-child(even) { margin-top: -12vh; }
.mur__tuile { position: relative; display: block; aspect-ratio: 4/5; overflow: hidden; background: var(--kaki); text-decoration: none; color: var(--sur-kaki); flex: none; }
.mur__tuile img { width: 100%; height: 100%; object-fit: cover; opacity: .5; transition: opacity .5s var(--ease); }
.mur__tuile span { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 26px 12px 10px; font-size: .8rem; background: linear-gradient(transparent, rgba(40, 47, 46, .9)); opacity: 0; transition: opacity .4s; }
.mur__tuile span b { font: 400 1.02rem var(--f-titre); }
.mur__tuile span em { font-style: normal; color: var(--corail-doux); white-space: nowrap; }
a.mur__tuile:hover img { opacity: .95; }
a.mur__tuile:hover span { opacity: 1; }
.hero__voile { position: absolute; inset: 0; pointer-events: none; background:
    radial-gradient(ellipse 46% 50% at 50% 52%, rgba(56, 65, 63, .95) 0%, rgba(56, 65, 63, .78) 48%, rgba(56, 65, 63, 0) 100%),
    linear-gradient(180deg, rgba(56, 65, 63, .7) 0%, transparent 24%, transparent 76%, rgba(56, 65, 63, .9) 100%); }
.hero__centre { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; text-align: center; pointer-events: none; padding: 30px var(--gout) 40px; }
.hero__centre > div { pointer-events: auto; max-width: 720px; }
.hero__fleur-zone { position: relative; width: 92px; margin: 0 auto 8px; }
.hero__fleur { width: 92px; height: auto; display: block; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .25)); }
.hero--page .hero__fleur-zone, .hero--page .hero__fleur { width: 74px; }
.hero__fleur-zone .coccinelle { position: absolute; width: 22px; height: 22px; right: -6px; top: 10px; transform: rotate(-24deg); }
.hero .fil { justify-content: center; color: var(--sur-kaki-2); margin-bottom: 14px; }
.hero__lieu { font: italic 400 1.05rem var(--f-titre); color: var(--corail-doux); margin: 0 0 14px; }
.hero__titre { font-size: clamp(3.2rem, 7.4vw, 7rem); line-height: .9; letter-spacing: -.035em; }
.hero--page .hero__titre { font-size: clamp(2.6rem, 6vw, 5.4rem); }
.hero__titre em { font-style: italic; color: var(--corail-doux); }
.hero__ligne { max-width: 50ch; margin: 22px auto 28px; color: var(--sur-kaki-2); }
.hero__boutons { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
@media (max-width: 900px) { .mur { grid-template-columns: repeat(3, 1fr); gap: 10px; } .mur__col:nth-child(n+4) { display: none; } .mur__col { gap: 10px; } }
@media (max-width: 520px) { .hero__voile { background: radial-gradient(ellipse 80% 46% at 50% 52%, rgba(56, 65, 63, .96), rgba(56, 65, 63, .7) 60%, rgba(56, 65, 63, .3)), linear-gradient(180deg, rgba(56, 65, 63, .8), transparent 25%, transparent 75%, rgba(56, 65, 63, .9)); } }
@media (hover: none) { .mur__tuile span { display: none; } }

/* ---------- Sections communes ---------- */
.section { padding: clamp(70px, 8vw, 120px) 0; position: relative; }
.section--beige { background: var(--beige); }
.section--kaki, .sur-kaki { background: var(--kaki); color: var(--sur-kaki); }
.section--kaki .lead, .sur-kaki .lead, .section--kaki .muted, .sur-kaki .muted { color: var(--sur-kaki-2); }
.fil { display: flex; gap: 10px; flex-wrap: wrap; font-size: .9rem; color: var(--gris); margin-bottom: 26px; }
.fil a { text-decoration: none; } .fil a:hover { color: var(--corail-doux); }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.duo__images { display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px; align-items: end; }
.duo__images figure { margin: 0; overflow: hidden; background: var(--carte); }
.duo__images figure:first-child { aspect-ratio: 4/5; }
.duo__images figure:last-child { aspect-ratio: 3/4; margin-bottom: 18%; }
.duo__images img { width: 100%; height: 100%; object-fit: cover; }
.citation { margin: 24px 0 0; padding-left: 20px; border-left: 2px solid var(--corail); font: italic 400 clamp(1.15rem, 1.6vw, 1.4rem)/1.4 var(--f-titre); }
.signature { margin-top: 18px; font: italic 400 1.3rem var(--f-titre); color: var(--corail-fonce); }
@media (max-width: 860px) { .duo { grid-template-columns: 1fr; } }

/* ---------- Rubans de photos ou d'avis qui défilent doucement ---------- */
.ruban { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.ruban__piste { display: flex; gap: 16px; width: max-content; will-change: transform; }
.ruban figure { margin: 0; flex: none; height: clamp(240px, 30vw, 400px); aspect-ratio: 4/5; overflow: hidden; background: var(--carte); }
.ruban figure img { width: 100%; height: 100%; object-fit: cover; }
html.mouvement-reduit .ruban { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }

/* ---------- Avis Google ---------- */
.avis-bande { padding: clamp(60px, 7vw, 100px) 0; background: var(--beige); position: relative; }
.avis__tete { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 30px; }
.avis__tete h2 { display: flex; align-items: center; gap: 12px; }
.avis__note { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.avis__note b { font: 400 2.2rem/1 var(--f-titre); }
.etoiles { display: flex; gap: 2px; color: #d99a1b; }
.etoiles svg { width: 16px; height: 16px; }
.avis-carte { margin: 0; flex: none; width: min(380px, 82vw); padding: 24px; background: var(--fond); border: 1px solid var(--ligne); display: flex; flex-direction: column; gap: 12px; white-space: normal; }
.avis-carte p { margin: 0; color: var(--texte-2); font-size: .97rem; }
.avis-carte footer { margin-top: auto; display: flex; justify-content: space-between; gap: 10px; font-size: .86rem; }
.avis-carte footer span { color: var(--gris); }
.avis-statique { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.avis-statique .avis-carte { width: auto; }

/* ---------- Carte produit ---------- */
.grille-produits { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 36px 18px; padding: 26px 0 clamp(50px, 6vw, 90px); }
.carte { display: block; text-decoration: none; position: relative; }
.carte__img { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--carte); }
.carte__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), opacity .5s; }
.carte__img img + img { opacity: 0; }
.carte:hover .carte__img img { transform: scale(1.03); }
.carte:hover .carte__img img + img { opacity: 1; }
.carte__badge { position: absolute; z-index: 2; top: 14px; left: 14px; background: var(--fond); color: var(--noir); font-size: .76rem; font-weight: 600; padding: 5px 9px; }
.carte__pied { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-top: 16px; }
.carte__pied h3 { font-size: 1.22rem; line-height: 1.15; transition: color .3s; }
.carte:hover .carte__pied h3 { color: var(--corail-fonce); }
.carte__prix { white-space: nowrap; font-weight: 600; font-size: .95rem; }
.carte__cat { color: var(--gris); font-size: .88rem; margin-top: 4px; }
.carte__desc { color: var(--texte-2); font-size: .92rem; margin: 8px 0 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.carte--bouquet .carte__pied { display: block; }
.carte--bouquet .carte__prix { display: block; white-space: normal; font-weight: 500; }
.carte--bouquet .carte__prix small { display: block; color: var(--gris); font-size: .84rem; margin-top: 2px; }
.carte--bouquet .carte__prix b { font-weight: 700; }
.vide { grid-column: 1/-1; text-align: center; padding: 60px 0; }

/* ---------- Faire plaisir : trois rayons ---------- */
.sommaire { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.sommaire a { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border: 1px solid var(--ligne-kaki); text-decoration: none; color: var(--sur-kaki); font-weight: 600; transition: background .3s, color .3s, border-color .3s; }
.sommaire a:hover { background: var(--corail); border-color: var(--corail); color: var(--noir); }
.rayon { padding: clamp(60px, 7vw, 100px) 0; scroll-margin-top: calc(var(--entete-h, 86px) + 10px); }
.rayon + .rayon { border-top: 1px solid var(--ligne); }
.rayon .grille-produits { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.rayon__tete { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 8px; }
.rayon__tete p { margin: 0; max-width: 52ch; color: var(--texte-2); }
.puces { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; }
.puce-f { border: 1px solid var(--ligne-2); background: transparent; padding: 9px 15px; font-weight: 500; font-size: .92rem; transition: background .25s, color .25s, border-color .25s; }
.puce-f:hover { border-color: var(--noir); }
.puce-f[aria-pressed="true"] { background: var(--kaki); border-color: var(--kaki); color: var(--sur-kaki); }
/* Bouquets : filtres à gauche, comme une commande en ligne */
.bouquets { display: grid; grid-template-columns: 220px 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; margin-top: 30px; }
.bouquets__filtres { position: sticky; top: calc(var(--entete-h, 86px) + 20px); max-height: calc(100vh - var(--entete-h, 86px) - 40px); overflow-y: auto; scrollbar-width: thin; display: grid; gap: 22px; align-content: start; }
.bouquets__filtres h3 { font: 600 .92rem var(--f-texte); margin-bottom: 10px; }
.bouquets__filtres ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.bouquets__filtres button { background: none; border: 0; padding: 3px 0; text-align: left; color: var(--texte-2); font-size: .95rem; display: flex; align-items: center; gap: 9px; }
.bouquets__filtres button::before { content: ''; width: 14px; height: 14px; border: 1px solid var(--ligne-2); flex: none; transition: background .2s, border-color .2s; }
.bouquets__filtres button[aria-pressed="true"] { color: var(--noir); font-weight: 600; }
.bouquets__filtres button[aria-pressed="true"]::before { background: var(--corail); border-color: var(--corail); }
.bouquets__filtres button:hover { color: var(--noir); }
.pastille-couleur { width: 12px; height: 12px; border-radius: 50%; display: inline-block; border: 1px solid var(--ligne-2); }
.bouquets__grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 40px 20px; }
.bouquets__info { display: flex; gap: 14px; align-items: flex-start; margin-top: 18px; padding: 16px 18px; background: var(--beige); max-width: 720px; font-size: .95rem; }
.bouquets__info p { margin: 0; }
.bouquets__info .coccinelle { width: 24px; height: 24px; margin-top: 2px; }
@media (max-width: 860px) {
  .bouquets { grid-template-columns: 1fr; }
  .bouquets__filtres { position: static; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

/* ---------- Fiche produit ---------- */
.fiche { display: grid; grid-template-columns: minmax(0, 520px) 1fr; gap: clamp(30px, 5vw, 70px); padding: calc(clamp(120px, 12vw, 160px) - var(--entete-h, 86px)) 0 clamp(70px, 8vw, 110px); align-items: start; }
.fiche__galerie { position: sticky; top: calc(var(--entete-h, 86px) + 14px); }
.fiche__principale { aspect-ratio: 4/5; overflow: hidden; background: var(--carte); }
.fiche__principale img { width: 100%; height: 100%; object-fit: cover; }
.fiche__vignettes { display: flex; gap: 10px; margin-top: 10px; }
.fiche__vignettes button { width: 84px; aspect-ratio: 4/5; padding: 0; border: 1px solid transparent; background: var(--carte); opacity: .6; transition: opacity .3s, border-color .3s; }
.fiche__vignettes button[aria-pressed="true"] { opacity: 1; border-color: var(--corail); }
.fiche__vignettes img { width: 100%; height: 100%; object-fit: cover; }
.fiche__cat { display: inline-block; color: var(--corail-fonce); font-weight: 600; font-size: .92rem; margin-bottom: 12px; }
.fiche__info h1 { font-size: clamp(2.1rem, 3.6vw, 3.2rem); line-height: 1; letter-spacing: -.015em; margin-bottom: 18px; }
.bloc { border-top: 1px solid var(--ligne); padding: 24px 0; }
.bloc__titre { font-weight: 600; margin-bottom: 14px; }
.bloc__titre small { font-weight: 400; color: var(--gris); margin-left: 6px; }
.compo { display: flex; flex-wrap: wrap; gap: 8px; }
.compo span { border: 1px solid var(--ligne-2); padding: 7px 12px; font-size: .9rem; }
.tailles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.taille { display: grid; justify-items: center; gap: 6px; padding: 16px 10px; background: transparent; border: 1px solid var(--ligne-2); color: var(--texte); transition: border-color .3s, background .3s; }
.taille svg { width: 40px; height: 40px; color: var(--gris); }
.taille b { font: 400 1.2rem var(--f-titre); }
.taille span { color: var(--gris); font-size: .92rem; }
.taille:hover { border-color: var(--noir); }
.taille[aria-checked="true"] { border-color: var(--corail); background: rgba(232, 112, 90, .14); }
.taille[aria-checked="true"] svg { color: var(--corail-fonce); }
/* Budget libre (bouquets) */
.budgets { display: flex; gap: 8px; flex-wrap: wrap; }
.budget { min-width: 74px; padding: 12px 14px; border: 1px solid var(--ligne-2); background: transparent; font-weight: 600; transition: background .25s, border-color .25s; }
.budget:hover { border-color: var(--noir); }
.budget[aria-checked="true"] { background: var(--corail); border-color: var(--corail); }
.budget-libre { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.budget-libre label { font-weight: 600; font-size: .92rem; }
.budget-libre .saisie { display: inline-flex; align-items: center; border: 1px solid var(--ligne-2); background: var(--champ); }
.budget-libre input { width: 96px; border: 0; background: transparent; padding: 11px 6px 11px 12px; font-weight: 600; }
.budget-libre input:focus { outline: none; }
.budget-libre .saisie:focus-within { border-color: var(--corail-fonce); }
.budget-libre .saisie span { padding-right: 12px; color: var(--gris); }
.budget-aide { font-size: .88rem; color: var(--gris); margin: 10px 0 0; }
.budget-aide.ko { color: var(--corail-fonce); font-weight: 600; }
.achat { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 26px 0; border-top: 1px solid var(--ligne); }
.achat__prix { font: 400 2rem/1 var(--f-titre); min-width: 4ch; }
.qte { display: inline-flex; align-items: center; border: 1px solid var(--ligne-2); height: 54px; }
.qte button { width: 44px; height: 100%; border: 0; background: none; font-size: 1.2rem; }
.qte button:hover { color: var(--corail-fonce); }
.qte output { min-width: 28px; text-align: center; font-weight: 600; }
.rassurance { display: grid; gap: 10px; color: var(--texte-2); font-size: .95rem; }
.rassurance div { display: flex; gap: 10px; align-items: flex-start; }
.rassurance svg { width: 20px; height: 20px; flex: none; color: var(--corail-fonce); margin-top: 2px; }
@media (max-width: 860px) { .fiche { grid-template-columns: 1fr; } .fiche__galerie { position: static; } }

/* ---------- Champs ---------- */
.champ { display: grid; gap: 7px; }
.champ label { font-size: .9rem; font-weight: 600; }
.champ input, .champ textarea, .champ select { width: 100%; background: var(--champ); border: 1px solid var(--ligne-2); padding: 13px 14px; color: var(--texte); border-radius: 0; transition: border-color .3s; }
.champ textarea { min-height: 130px; resize: vertical; }
.champ input:focus, .champ textarea:focus, .champ select:focus { outline: none; border-color: var(--corail-fonce); }
.champ input[readonly] { opacity: .6; }
.champ small { color: var(--gris); font-size: .84rem; }
.champ .erreur, .erreur { color: var(--corail-fonce); font-size: .86rem; font-weight: 600; }
.requis { color: var(--rouge); font-weight: 700; }
.mention-requis { margin: 0 0 18px; font-size: .86rem; color: var(--texte-2); }
.champ.large { grid-column: 1/-1; }
.grille-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .grille-champs { grid-template-columns: 1fr; } }
input::placeholder, textarea::placeholder { color: rgba(30, 32, 28, .38); }
.champ select { appearance: none; -webkit-appearance: none; background: var(--champ) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e201c' stroke-width='1.6'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px; padding-right: 40px; }

/* ---------- Panier (tiroir) ---------- */
.voile { position: fixed; inset: 0; z-index: 90; background: rgba(40, 47, 46, .55); opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }
.tiroir { position: fixed; top: 0; right: 0; bottom: 0; z-index: 95; width: min(470px, 100vw); background: var(--fond); border-left: 1px solid var(--ligne); display: flex; flex-direction: column; transform: translateX(102%); transition: transform .45s var(--ease); }
.panier-ouvert .voile { opacity: 1; visibility: visible; }
.panier-ouvert .tiroir { transform: none; }
.tiroir__tete { display: flex; justify-content: space-between; align-items: center; padding: 22px 24px; border-bottom: 1px solid var(--ligne); }
.tiroir__tete h2 { font-size: 1.9rem; }
.fermer { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--ligne-2); background: none; transition: border-color .3s, color .3s; }
.fermer:hover { border-color: var(--corail-fonce); color: var(--corail-fonce); }
.fermer svg { width: 20px; height: 20px; }
.tiroir__corps { flex: 1; overflow-y: auto; padding: 8px 24px; overscroll-behavior: contain; }
.tiroir__pied { padding: 20px 24px 24px; border-top: 1px solid var(--ligne); background: var(--beige); }
.ligne-panier { display: grid; grid-template-columns: 74px 1fr auto; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--ligne); align-items: start; }
.ligne-panier img { width: 74px; height: 90px; object-fit: cover; }
.recap .ligne-panier { grid-template-columns: 60px 1fr auto; }
.recap .ligne-panier img { width: 60px; height: 72px; }
.ligne-panier h3 { font-size: 1.2rem; }
.ligne-panier small { display: block; color: var(--gris); font-size: .86rem; }
.ligne-panier small.msg { font-style: italic; margin-top: 4px; }
.ligne-panier .actions { display: flex; gap: 12px; align-items: center; margin-top: 10px; }
.ligne-panier .qte { height: 36px; }
.ligne-panier .qte button { width: 32px; }
.retirer { background: none; border: 0; color: var(--gris); text-decoration: underline; font-size: .86rem; padding: 0; }
.retirer:hover { color: var(--corail-fonce); }
.panier-vide { text-align: center; padding: 50px 0; display: grid; justify-items: center; gap: 8px; }
.panier-vide__fleur { width: 96px; height: auto; }
.mode { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.mode button { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 10px; border: 1px solid var(--ligne-2); background: var(--fond); font-weight: 600; font-size: .92rem; transition: border-color .3s, background .3s; }
.mode button svg { width: 20px; height: 20px; }
.mode button[aria-pressed="true"] { border-color: var(--corail); background: var(--corail); }
.cp-ligne { margin-bottom: 8px; }
.cp-info { font-size: .9rem; color: var(--gris); margin: 6px 0 12px; }
.cp-info.ok { color: var(--kaki-fonce); font-weight: 600; } .cp-info.ko { color: var(--corail-fonce); font-weight: 600; }
.totaux { display: grid; gap: 8px; margin: 10px 0 18px; }
.totaux > div { display: flex; justify-content: space-between; gap: 16px; }
.totaux .total { border-top: 1px solid var(--ligne-2); padding-top: 12px; font: 400 1.6rem var(--f-titre); }

/* ---------- Messages ---------- */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 120; display: flex; gap: 16px; align-items: center; background: var(--kaki-fonce); color: var(--sur-kaki); padding: 14px 18px; font-weight: 500; transform: translate(-50%, calc(100% + 60px)); visibility: hidden; transition: transform .4s var(--ease), visibility .4s; max-width: calc(100vw - 32px); }
.toast.on { transform: translate(-50%, 0); visibility: visible; }
.toast button { background: var(--corail); color: var(--noir); border: 0; padding: 8px 12px; font-weight: 600; white-space: nowrap; }
.ajout { position: fixed; right: 24px; top: 100px; z-index: 120; width: min(370px, calc(100vw - 32px)); background: var(--kaki-fonce); color: var(--sur-kaki); padding: 16px; display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; box-shadow: 0 20px 50px rgba(40, 47, 46, .35); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s; }
.ajout.on { opacity: 1; visibility: visible; transform: none; }
.ajout img { width: 64px; height: 80px; object-fit: cover; display: block; }
.ajout__titre { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--corail-doux); margin: 0 0 4px; }
.ajout__titre .coccinelle { width: 20px; height: 20px; }
.ajout__nom { margin: 0; font-size: .92rem; line-height: 1.35; }
.ajout__actions { grid-column: 1 / -1; display: flex; gap: 8px; }
.ajout__actions .btn { flex: 1; }
.ajout__actions .btn--ligne { color: var(--sur-kaki); }
.ajout__actions .btn--ligne:hover { background: var(--sur-kaki); border-color: var(--sur-kaki); color: var(--kaki-fonce); }
@media (max-width: 640px) { .ajout { right: 16px; } }

/* ---------- Commande ---------- */
.commande { display: grid; grid-template-columns: 1fr 380px; gap: 30px; padding: calc(clamp(130px, 14vw, 170px) - var(--entete-h, 86px)) 0 100px; align-items: start; }
.recap { position: sticky; top: calc(var(--entete-h, 86px) + 14px); }
.panneau { background: var(--beige); border: 1px solid var(--ligne); padding: clamp(20px, 3vw, 32px); margin-bottom: 16px; }
.panneau h2 { font-size: 1.6rem; margin-bottom: 6px; }
.etapes { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0 0 22px; counter-reset: e; }
.etapes li { flex: 1; border-top: 2px solid var(--ligne-2); padding-top: 10px; color: var(--gris); font-size: .92rem; counter-increment: e; }
.etapes li::before { content: counter(e) '. '; }
.etapes li.on { border-color: var(--corail); color: var(--texte); font-weight: 600; }
.etapes li.fait { border-color: var(--kaki); color: var(--texte-2); }
.jours { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.jour { flex: none; width: 66px; display: grid; justify-items: center; gap: 2px; padding: 10px 0; border: 1px solid var(--ligne-2); background: var(--fond); }
.jour b { font: 400 1.6rem/1 var(--f-titre); }
.jour small { font-size: .74rem; color: var(--gris); }
.jour[aria-pressed="true"] { background: var(--corail); border-color: var(--corail); }
.jour[aria-pressed="true"] small { color: var(--noir); }
.jour:disabled { opacity: .3; cursor: not-allowed; }
.creneaux { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.puce { border: 1px solid var(--ligne-2); background: var(--fond); padding: 10px 16px; font-weight: 500; }
.puce[aria-pressed="true"] { background: var(--kaki); color: var(--sur-kaki); border-color: var(--kaki); }
.nav-etapes { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.confirmation { text-align: center; padding: clamp(150px, 18vw, 220px) 0 120px; max-width: 720px; margin: 0 auto; }
.confirmation .panier-vide__fleur { margin: 0 auto 10px; }
.confirmation .lead { margin-left: auto; margin-right: auto; }
.etiquette { display: inline-block; margin: 22px 0; border: 1px solid var(--corail); padding: 10px 18px; }
.marque { font-family: var(--f-titre); }
@media (max-width: 960px) { .commande { grid-template-columns: 1fr; } .recap { position: static; } }

/* ---------- Pied ---------- */
.pied { position: relative; overflow: hidden; background: var(--kaki-fonce); color: var(--sur-kaki); padding-top: clamp(60px, 7vw, 100px); }
.pied__appel { display: flex; justify-content: space-between; align-items: end; gap: 30px; flex-wrap: wrap; padding-bottom: clamp(44px, 6vw, 70px); }
.pied__appel h2 { max-width: 16ch; }
.pied__appel .coccinelle { width: 34px; height: 34px; vertical-align: middle; margin-left: 10px; }
.pied__boutons { display: flex; gap: 12px; flex-wrap: wrap; }
.pied__grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; padding: 40px 0; border-top: 1px solid var(--ligne-kaki); }
.pied h4 { font: 600 .9rem var(--f-texte); color: var(--sur-kaki-2); margin-bottom: 14px; }
.pied ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pied a { text-decoration: none; transition: color .3s; }
.pied a:hover { color: var(--corail-doux); }
.pied__auj { color: var(--corail-doux); }
.pied__geant { display: flex; justify-content: center; font: 400 clamp(3rem, 12vw, 13rem)/.8 var(--f-titre); letter-spacing: -.045em; padding: 30px 0 0; white-space: nowrap; user-select: none; overflow: hidden; color: rgba(246, 235, 229, .9); }
.pied__geant .et { font-style: italic; color: var(--corail); padding: 0 .04em; }
.pied__bas { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 24px; padding-bottom: 28px; color: var(--sur-kaki-2); font-size: .86rem; border-top: 1px solid var(--ligne-kaki); }
.pied__bas span:last-child { display: flex; gap: 20px; }
@media (max-width: 860px) { .pied__grille { grid-template-columns: 1fr 1fr; } }

/* ---------- Horaires & zones ---------- */
.horaires { border: 1px solid var(--ligne); padding: 26px; background: var(--beige); }
.horaires h3 { font-size: 1.4rem; margin-bottom: 12px; }
.horaires table { width: 100%; border-collapse: collapse; }
.horaires td { padding: 9px 0; border-bottom: 1px solid var(--ligne); }
.horaires td:last-child { text-align: right; color: var(--texte-2); }
.horaires tr.aujourdhui td { color: var(--texte); font-weight: 600; }
.horaires tr.aujourdhui td:first-child::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--corail); margin-right: 9px; vertical-align: middle; }

/* ---------- Formulaires (devis, contact) ---------- */
.formulaire { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(30px, 6vw, 90px); align-items: start; }
#boite .envoye { display: none; text-align: center; padding: 30px 0; }
#boite .envoye .coccinelle { width: 40px; height: 40px; margin: 0 auto 10px; display: block; }
#boite.is-envoye form { display: none; }
#boite.is-envoye .envoye { display: block; }
@media (max-width: 860px) { .formulaire { grid-template-columns: 1fr; } }

/* ---------- Petits écrans : deux vignettes par ligne ---------- */
@media (max-width: 600px) {
  .grille-produits, .rayon .grille-produits, .bouquets__grille { grid-template-columns: 1fr 1fr; gap: 26px 12px; }
  .carte__pied { display: block; } .carte__pied h3 { font-size: 1.05rem; } .carte__prix { display: block; margin-top: 4px; font-size: .88rem; }
  .carte__desc { display: none; }
  .bouquets__filtres { max-height: none; overflow: visible; }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}