/* Maison MaNa — poésie végétale
   Palette tirée du logo : vert sauge, crème de l'étiquette, liseré pêche, bleu poudré des feuillages. */
:root {
  --sauge: #6c9675;
  --sauge-600: #557c5f;
  --sauge-800: #34503d;
  --sauge-900: #23362a;
  --creme: #fcf4de;
  --creme-2: #f5e8c9;
  --papier: #fffaee;
  --peche: #facba6;
  --peche-600: #eba77b;
  --rose: #e59c88;
  --poudre: #b3ccd1;
  --poudre-600: #7c9fa8;
  --encre: #3b2f28;
  --encre-2: #6a5c50;
  --ligne: rgba(59, 47, 40, .14);

  --f-titre: 'Marcellus', 'Times New Roman', serif;
  --f-marque: 'Marcellus SC', 'Marcellus', serif;
  --f-script: 'Corinthia', cursive;
  --f-texte: 'Figtree', system-ui, sans-serif;

  --r: 10px;
  --gout: clamp(16px, 4vw, 56px);
  --max: 1320px;
  --ease: cubic-bezier(.22, .8, .2, 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(--creme); color: var(--encre);
  font: 400 16px/1.6 var(--f-texte);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--sauge-800); outline-offset: 3px; border-radius: 4px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
::selection { background: var(--peche); color: var(--encre); }

h1, h2, h3, h4 { font-family: var(--f-titre); font-weight: 400; line-height: 1.08; margin: 0; letter-spacing: -.005em; }
.t-xxl { font-size: clamp(2.5rem, 5.4vw, 4.6rem); line-height: 1; }
.t-xl { font-size: clamp(2rem, 3.8vw, 3.3rem); }
.t-l { font-size: clamp(1.6rem, 2.6vw, 2.35rem); }
.t-m { font-size: clamp(1.3rem, 1.8vw, 1.6rem); }
.script { font-family: var(--f-script); font-weight: 400; line-height: 1; }
.lead { font-size: clamp(1rem, 1.2vw, 1.12rem); color: var(--encre-2); max-width: 56ch; }
p { margin: 0 0 1em; }
.muted { color: var(--encre-2); }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gout); }
.section { padding: clamp(64px, 8vw, 112px) 0; position: relative; }

/* ---------- Boutons ---------- */
.btn {
  --bg: var(--sauge-900); --fg: var(--creme);
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 50px; padding: 0 1.6em; border-radius: var(--r);
  background: var(--bg); color: var(--fg); border: 1px solid var(--bg);
  text-decoration: none; font-weight: 500; font-size: .98rem; letter-spacing: .01em;
  position: relative; overflow: hidden; isolation: isolate;
  transition: color .35s var(--ease), border-color .35s var(--ease);
}
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: var(--peche);
  transform: translateY(101%); transition: transform .45s var(--ease); border-radius: inherit;
}
.btn:hover::before { transform: none; }
.btn:hover { color: var(--encre); border-color: var(--peche); }
.btn--clair { --bg: var(--creme); --fg: var(--encre); }
.btn--ligne { --bg: transparent; --fg: var(--encre); border-color: currentColor; }
.btn--ligne.on-sauge { --fg: var(--creme); }
.btn--plein { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.lien {
  text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding-bottom: 2px; transition: background-size .4s var(--ease); font-weight: 500;
}
.lien:hover { background-size: 0 1px; background-position: 100% 100%; }

/* ---------- L'étiquette (cartouche du logo) ---------- */
.etiquette {
  background: var(--creme); border-radius: 12px; position: relative;
  box-shadow: 0 0 0 5px var(--creme), 0 0 0 7px var(--peche), 0 0 0 11px var(--creme), 0 0 0 12px var(--peche-600);
}
.etiquette--fine { box-shadow: 0 0 0 4px var(--papier), 0 0 0 5px var(--peche); background: var(--papier); }
.marque { font-family: var(--f-marque); letter-spacing: .02em; }

/* ---------- En-tête ---------- */
.entete { position: sticky; top: 0; z-index: 60; background: rgba(252, 244, 222, .96); backdrop-filter: blur(10px); transition: transform .4s var(--ease), box-shadow .3s; }
.entete.is-solide { box-shadow: 0 1px 0 var(--ligne); }
.entete.is-solide .bandeau { display: none; }
.entete.is-cache { transform: translateY(-100%); }
.entete__in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; max-width: var(--max); margin: 0 auto; padding: 0 var(--gout); height: 76px; transition: height .3s var(--ease); }
.entete.is-solide .entete__in { height: 66px; }
/* Logo : le cartouche du vrai logo, découpé dans l'image d'origine */
.logo {
  --h: 48px; justify-self: start; display: block; height: var(--h); width: calc(var(--h) * 330 / 146);
  background: url(../img/logo.webp) no-repeat; background-size: calc(var(--h) * 644 / 146) auto;
  background-position: calc(var(--h) * -154 / 146) calc(var(--h) * -53 / 146); border-radius: calc(var(--h) * .09);
  transition: transform .3s var(--ease);
}
.logo:hover { transform: scale(1.03); }
.entete.is-solide .logo { --h: 42px; }
.nav { display: flex; gap: 2px; justify-content: center; }
.nav a { text-decoration: none; padding: 10px 13px; border-radius: 8px; font-size: .93rem; font-weight: 500; color: var(--encre); position: relative; white-space: nowrap; }
.nav a::after {
  content: ''; position: absolute; left: 13px; right: 13px; bottom: 6px; height: 1.5px; background: var(--peche-600);
  transform: scaleX(0); transform-origin: right; transition: transform .3s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.entete__actions { justify-self: end; display: flex; align-items: center; gap: 4px; }
.panier-btn { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 10px; border-radius: 8px; color: var(--encre); }
.panier-btn svg { width: 24px; height: 24px; }
.panier-btn .compte {
  min-width: 22px; height: 22px; border-radius: 11px; background: var(--peche); color: var(--encre);
  font-size: .78rem; font-weight: 700; display: inline-grid; place-items: center; padding: 0 6px;
}
.panier-btn .compte:empty { display: none; }
.burger { display: none; border: 0; background: none; width: 48px; height: 48px; position: relative; color: inherit; }
.burger span { position: absolute; left: 12px; right: 12px; height: 1.5px; background: currentColor; transition: transform .3s var(--ease), top .3s var(--ease); }
.burger span:nth-child(1) { top: 19px; } .burger span:nth-child(2) { top: 28px; }
body.menu-ouvert .burger span:nth-child(1) { top: 24px; transform: rotate(45deg); }
body.menu-ouvert .burger span:nth-child(2) { top: 24px; transform: rotate(-45deg); }
.menu-mobile {
  position: fixed; inset: 0; z-index: 55; background: var(--sauge); color: var(--creme);
  display: flex; flex-direction: column; justify-content: center; padding: 100px var(--gout) 40px; gap: 6px;
  clip-path: circle(0% at calc(100% - 40px) 40px); transition: clip-path .5s var(--ease); visibility: hidden;
}
body.menu-ouvert .menu-mobile { clip-path: circle(150% at calc(100% - 40px) 40px); visibility: visible; }
.menu-mobile a { font: 400 clamp(1.9rem, 7vw, 2.6rem)/1.2 var(--f-titre); text-decoration: none; }
.menu-mobile .script { font-size: 2rem; color: var(--peche); margin-top: 24px; }
@media (max-width: 1080px) {
  .nav { display: none; }
  .burger { display: block; }
  .entete__in { grid-template-columns: 1fr auto; }
}

/* ---------- Bandeau ---------- */
.bandeau { background: var(--sauge-900); color: var(--creme); font-size: .85rem; text-align: center; padding: 8px 16px; }
.bandeau a { color: var(--peche); }

/* ---------- Héros accueil : un panneau encadré comme l'étiquette du logo ---------- */
.heros { padding: 14px var(--gout) 0; }
.heros__cadre {
  position: relative; max-width: 1400px; margin: 0 auto; height: min(74svh, 680px); min-height: 520px; overflow: hidden;
  background: var(--sauge); border-radius: 22px; display: grid; place-items: center;
}
.heros__cadre::after, .page-tete--sauge::after, .insta-bande::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 4;
  box-shadow: inset 0 0 0 6px var(--sauge), inset 0 0 0 7px rgba(250, 203, 166, .85), inset 0 0 0 11px var(--sauge), inset 0 0 0 12px rgba(252, 244, 222, .4); }
.heros__bord { position: absolute; height: 62%; aspect-ratio: 150 / 236; background: url(../img/logo.webp) no-repeat; background-size: auto 100%; pointer-events: none; }
.heros__bord--g { left: 0; top: 0; translate: -18% -14%; background-position: left center; -webkit-mask-image: linear-gradient(to right, #000 62%, transparent 98%); mask-image: linear-gradient(to right, #000 62%, transparent 98%); }
.heros__bord--d { right: 0; bottom: 0; translate: 18% 14%; background-position: right center; -webkit-mask-image: linear-gradient(to left, #000 62%, transparent 98%); mask-image: linear-gradient(to left, #000 62%, transparent 98%); }
.heros__photos { position: absolute; inset: 0; }
.heros__photo { position: absolute; width: clamp(96px, 10vw, 150px); aspect-ratio: 4 / 5; will-change: transform; }
.heros__photo-in { position: absolute; inset: 0; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 4px var(--creme), 0 18px 34px -18px rgba(20, 35, 25, .6); }
.heros__photo img { width: 100%; height: 100%; object-fit: cover; }
.heros__photo:nth-child(1) { left: 15%; top: 12%; rotate: -5deg; }
.heros__photo:nth-child(2) { left: 19%; bottom: 14%; rotate: 4deg; }
.heros__photo:nth-child(3) { right: 15%; top: 11%; rotate: 5deg; }
.heros__photo:nth-child(4) { right: 18%; bottom: 13%; rotate: -4deg; }
.heros__centre { position: relative; z-index: 3; display: grid; justify-items: center; gap: 22px; text-align: center; padding: 0 20px; }
.heros__logo { width: min(520px, 62vw); height: auto; }
.heros__ligne { color: var(--creme); max-width: 44ch; margin: 0; font-size: 1.02rem; }
.heros__boutons { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
@media (max-width: 900px) {
  .heros__photo:nth-child(1) { left: 4%; top: 6%; } .heros__photo:nth-child(3) { right: 4%; top: 6%; }
  .heros__photo:nth-child(2), .heros__photo:nth-child(4) { display: none; }
}
@media (max-width: 640px) {
  .heros { padding: 10px 10px 0; }
  .heros__cadre { height: auto; min-height: 0; padding: 130px 0 40px; }
  .heros__photo { width: 84px; }
  .heros__logo { width: 92vw; }
  .heros__bord { display: none; }
}

/* ---------- Bande défilante ---------- */
.defilant { overflow: hidden; padding: 20px 0; margin-top: 14px; border-block: 1px solid var(--ligne); background: var(--creme); }
.defilant__piste { display: flex; width: max-content; gap: 0; will-change: transform; }
.defilant__item { display: flex; align-items: center; gap: 28px; padding-right: 28px; font: 400 clamp(1.4rem, 2.6vw, 2.2rem)/1 var(--f-titre); white-space: nowrap; }
.defilant__item .script { font-size: 1.25em; color: var(--sauge-600); }
.fleuron { width: .7em; height: .7em; color: var(--peche-600); flex: none; }

/* ---------- Occasions (liste + image qui suit) ---------- */
.occasions { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(30px, 6vw, 90px); align-items: start; }
.occasions__liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ligne); }
.occasions__liste a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px; text-decoration: none;
  padding: 15px 4px; border-bottom: 1px solid var(--ligne); position: relative;
}
.occasions__liste strong { font: 400 clamp(1.4rem, 2.4vw, 2.1rem)/1.1 var(--f-titre); transition: transform .5s var(--ease), color .3s; }
.occasions__liste span { color: var(--encre-2); font-size: .92rem; white-space: nowrap; }
.occasions__liste a:hover strong { transform: translateX(18px); color: var(--sauge-800); }
.suiveur {
  position: fixed; left: 0; top: 0; width: 260px; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; z-index: 40;
  pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.6); box-shadow: 0 30px 60px -30px rgba(30, 40, 30, .5);
}
.suiveur img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .occasions { grid-template-columns: 1fr; } .suiveur { display: none; } }

/* ---------- Carte produit ---------- */
.carte { text-decoration: none; display: block; position: relative; }
.carte__img { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; background: var(--creme-2); }
.carte__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease), opacity .6s; }
.carte__img img + img { position: absolute; inset: 0; opacity: 0; }
.carte:hover .carte__img img { transform: scale(1.05); }
.carte:hover .carte__img img + img { opacity: 1; }
.carte__badge {
  position: absolute; left: 12px; top: 12px; z-index: 2; background: var(--creme); color: var(--encre);
  font-size: .78rem; font-weight: 600; padding: 5px 10px; border-radius: 6px; box-shadow: 0 0 0 2px var(--creme), 0 0 0 3px var(--peche);
}
.carte__pied { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 2px 0; }
.carte__pied h3 { font-size: 1.35rem; }
.carte__prix { white-space: nowrap; color: var(--encre-2); font-size: .95rem; }
.carte__cat { font-size: .85rem; color: var(--sauge-600); margin-top: 2px; }

/* ---------- Galerie horizontale épinglée ---------- */
.horizontal { position: relative; overflow: hidden; background: var(--sauge); color: var(--creme); }
.horizontal__tete { display: flex; justify-content: space-between; align-items: end; gap: 30px; padding-top: clamp(70px, 9vw, 120px); }
.horizontal__tete .lead { color: rgba(252, 244, 222, .82); }
.horizontal__piste { display: flex; gap: clamp(18px, 2.4vw, 34px); padding: 50px var(--gout) clamp(70px, 9vw, 120px); width: max-content; will-change: transform; }
.horizontal .carte { width: clamp(250px, 26vw, 360px); color: var(--creme); }
.horizontal .carte__prix, .horizontal .carte__cat { color: rgba(252, 244, 222, .75); }
.horizontal__fin { width: clamp(250px, 26vw, 360px); display: grid; place-items: center; border: 1px dashed rgba(252, 244, 222, .45); border-radius: var(--r); text-align: center; padding: 30px; aspect-ratio: 4 / 5; }
.horizontal__fin .script { font-size: 3rem; color: var(--peche); }
@media (max-width: 760px) {
  .horizontal__piste { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 60px; }
  .horizontal .carte, .horizontal__fin { scroll-snap-align: start; flex: none; width: 72vw; }
  .horizontal__tete { flex-direction: column; align-items: flex-start; }
}

/* ---------- Duo / À propos ---------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 100px); align-items: center; }
.duo__images { position: relative; aspect-ratio: 1 / 1.05; }
.duo__images figure { position: absolute; margin: 0; border-radius: var(--r); overflow: hidden; }
.duo__images figure img { width: 100%; height: 100%; object-fit: cover; }
.duo__images figure:nth-child(1) { inset: 0 22% 14% 0; }
.duo__images figure:nth-child(2) { width: 46%; aspect-ratio: 3 / 4; right: 0; bottom: 0; box-shadow: 0 0 0 10px var(--creme); }
.signature { font: 400 clamp(2.6rem, 4vw, 3.6rem)/1 var(--f-script); color: var(--sauge-800); margin-top: 12px; }
.citation { font: 400 clamp(1.3rem, 2vw, 1.7rem)/1.4 var(--f-titre); border-left: 2px solid var(--peche); padding-left: 22px; margin: 30px 0; }
@media (max-width: 860px) { .duo { grid-template-columns: 1fr; } }

/* ---------- Ateliers : billets ---------- */
.ateliers__tete { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: end; margin-bottom: 50px; }
.billets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.billet {
  display: grid; grid-template-columns: 92px 1fr; gap: 18px; align-items: start; padding: 22px; border-radius: 12px;
  background: var(--papier); box-shadow: 0 0 0 1px var(--ligne); position: relative; transition: transform .5s var(--ease), box-shadow .4s;
}
.billet:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: 0 0 0 4px var(--papier), 0 0 0 5px var(--peche), 0 20px 40px -26px rgba(40, 50, 40, .4); }
.billet__date { text-align: center; border-right: 1px dashed var(--peche-600); padding-right: 16px; }
.billet__date b { display: block; font: 400 3rem/1 var(--f-titre); color: var(--sauge-800); }
.billet__date span { font-size: .88rem; color: var(--encre-2); }
.billet h3 { font-size: 1.3rem; margin-bottom: 8px; }
.billet p { margin: 0; font-size: .92rem; color: var(--encre-2); }
.billet__prix { margin-top: 10px !important; color: var(--encre) !important; font-weight: 600; }
@media (max-width: 1000px) { .billets { grid-template-columns: 1fr 1fr; } .ateliers__tete { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .billets { grid-template-columns: 1fr; } }

/* ---------- Mariage (image qui s'ouvre) ---------- */
.ouverture { position: relative; height: 92svh; overflow: hidden; display: grid; place-items: center; background: var(--creme); }
.ouverture__cadre { position: absolute; inset: 0; clip-path: inset(22% 34% 22% 34% round 14px); will-change: clip-path; }
.ouverture__cadre img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.25); }
.ouverture__cadre::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(20, 34, 25, .62), rgba(20, 34, 25, .3) 70%); }
.ouverture__texte { position: relative; z-index: 2; color: var(--creme); text-align: center; padding: 0 var(--gout); max-width: 900px; }
.ouverture__texte .script { font-size: clamp(2.2rem, 3.6vw, 3.2rem); color: var(--peche); }
.ouverture__texte p { margin: 18px auto 30px; max-width: 52ch; color: rgba(252, 244, 222, .9); }

/* ---------- Livraison & horaires ---------- */
.infos { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(30px, 6vw, 90px); }
.zones { list-style: none; margin: 26px 0 0; padding: 0; }
.zones li { display: grid; grid-template-columns: 1fr auto; gap: 4px 20px; padding: 18px 0; border-bottom: 1px solid var(--ligne); }
.zones b { font-weight: 600; }
.zones small { color: var(--encre-2); grid-column: 1; }
.zones em { font-style: normal; grid-row: 1 / span 2; grid-column: 2; align-self: center; font: 400 1.4rem var(--f-titre); }
.horaires { background: var(--sauge); color: var(--creme); border-radius: 14px; padding: clamp(26px, 4vw, 44px); }
.horaires h3 { font-size: 2rem; margin-bottom: 18px; }
.horaires table { width: 100%; border-collapse: collapse; }
.horaires td { padding: 9px 0; border-bottom: 1px solid rgba(252, 244, 222, .2); font-size: .98rem; }
.horaires td:last-child { text-align: right; }
.horaires tr.aujourdhui td { color: var(--peche); font-weight: 600; }
.horaires .etat { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: .92rem; }
.horaires .etat i { width: 8px; height: 8px; border-radius: 50%; background: var(--peche); }
@media (max-width: 860px) { .infos { grid-template-columns: 1fr; } }

/* ---------- Instagram ---------- */
.insta { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.insta a { aspect-ratio: 1; border-radius: 8px; overflow: hidden; display: block; position: relative; }
.insta img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.insta a:hover img { transform: scale(1.07); }
@media (max-width: 760px) { .insta { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Pied ---------- */
.pied { background: var(--sauge); color: var(--creme); padding: clamp(56px, 7vw, 90px) 0 30px; position: relative; overflow: hidden; }
.pied__appel { display: flex; justify-content: space-between; align-items: end; gap: 30px; flex-wrap: wrap; padding-bottom: 44px; border-bottom: 1px solid rgba(252, 244, 222, .3); }
.pied__appel h2 { max-width: 14ch; }
.pied__grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; padding: 50px 0; }
.pied__grille h4 { font: 600 .95rem var(--f-texte); color: var(--sauge-900); margin-bottom: 14px; }
.pied__grille ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pied__grille a { text-decoration: none; opacity: .85; }
.pied__grille a:hover { opacity: 1; text-decoration: underline; }
.pied__logo { width: min(300px, 100%); height: auto; display: block; }
.pied__bas { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: .82rem; opacity: .7; padding-top: 24px; border-top: 1px solid rgba(252, 244, 222, .16); }
.pied__bas a { text-decoration: none; }
@media (max-width: 860px) { .pied__grille { grid-template-columns: 1fr 1fr; } }

/* ---------- En-tête de page intérieure ---------- */
.page-tete { padding: 56px 0; position: relative; overflow: hidden; margin: 14px var(--gout) 0; border-radius: 22px; }
.page-tete--sauge { background: var(--sauge); color: var(--creme); }
.page-tete--sauge .lead { color: rgba(252, 244, 222, .85); }
.fil { font-size: .85rem; color: var(--encre-2); margin-bottom: 22px; display: flex; gap: 8px; flex-wrap: wrap; }
.fil a { text-decoration: none; }
.fil a:hover { text-decoration: underline; }
.page-tete--sauge .fil { color: rgba(252, 244, 222, .75); }
.page-tete__fleurs { position: absolute; right: 0; top: 50%; height: 120%; aspect-ratio: 150 / 236; translate: 12% -50%; background: url(../img/logo.webp) right center / auto 100% no-repeat; pointer-events: none; -webkit-mask-image: linear-gradient(to left, #000 60%, transparent 98%); mask-image: linear-gradient(to left, #000 60%, transparent 98%); }
.page-tete .wrap { position: relative; z-index: 1; }
@media (max-width: 640px) { .page-tete { margin: 10px 10px 0; padding: 40px 0; } .page-tete__fleurs { opacity: .5; } }

/* ---------- Boutique ---------- */
.filtres { position: sticky; top: 66px; z-index: 20; background: var(--creme); border-bottom: 1px solid var(--ligne); transition: top .4s var(--ease); }
body:has(.entete.is-cache) .filtres { top: 0; }
.filtres__in { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.filtres__cats { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.filtres__cat { border: 0; background: none; padding: 10px 12px; font-size: .93rem; font-weight: 500; color: var(--encre-2); white-space: nowrap; position: relative; border-radius: 8px; }
.filtres__cat::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 1.5px; background: var(--peche-600); transform: scaleX(0); transform-origin: right; transition: transform .3s var(--ease); }
.filtres__cat:hover { color: var(--encre); }
.filtres__cat:hover::after, .filtres__cat[aria-pressed="true"]::after { transform: scaleX(1); transform-origin: left; }
.filtres__cat[aria-pressed="true"] { color: var(--sauge-900); font-weight: 600; }
.filtres__choix { display: flex; gap: 8px; flex: none; }
.filtres select { appearance: none; border: 1px solid var(--ligne); background: var(--papier) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%233b2f28' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 12px center / 11px; border-radius: 8px; padding: 0 34px 0 14px; min-height: 42px; font-size: .9rem; cursor: pointer; }
@media (max-width: 860px) {
  .filtres__in { flex-direction: column; align-items: stretch; gap: 0; padding-block: 6px 10px; }
  .filtres__cats { margin-left: -12px; }
  .filtres__choix select { flex: 1; min-width: 0; }
}
.puce {
  border: 1px solid var(--ligne); background: var(--papier); border-radius: 8px; padding: 9px 15px; white-space: nowrap;
  font-size: .92rem; font-weight: 500; transition: background .3s, color .3s, border-color .3s; min-height: 42px;
}
.puce:hover { border-color: var(--sauge); }
.puce[aria-pressed="true"] { background: var(--sauge-900); color: var(--creme); border-color: var(--sauge-900); }
.grille-produits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 46px 28px; padding: 50px 0 120px; }
.grille-produits .vide { grid-column: 1 / -1; text-align: center; padding: 60px 0; }
@media (max-width: 980px) { .grille-produits { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .grille-produits { grid-template-columns: 1fr 1fr; gap: 30px 14px; } .carte__pied { flex-direction: column; gap: 2px; } .carte__pied h3 { font-size: 1.1rem; } }

/* ---------- Fiche produit ---------- */
.fiche { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(30px, 5vw, 72px); padding: 40px 0 90px; align-items: start; }
.fiche__galerie { position: sticky; top: 100px; }
.fiche__principale { aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; position: relative; background: var(--creme-2); }
.fiche__principale img { width: 100%; height: 100%; object-fit: cover; }
.fiche__vignettes { display: flex; gap: 10px; margin-top: 12px; }
.fiche__vignettes button { width: 84px; aspect-ratio: 1; border-radius: 8px; overflow: hidden; border: 0; padding: 0; opacity: .55; transition: opacity .3s; box-shadow: 0 0 0 1px var(--ligne); }
.fiche__vignettes button[aria-pressed="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--creme), 0 0 0 3px var(--sauge-800); }
.fiche__vignettes img { width: 100%; height: 100%; object-fit: cover; }
.fiche h1 { font-size: clamp(2rem, 3.4vw, 3rem); margin: 8px 0 16px; }
.fiche__cat { color: var(--sauge-600); font-weight: 500; }
.bloc { padding: 24px 0; border-top: 1px solid var(--ligne); }
.bloc__titre { font-weight: 600; font-size: .95rem; margin-bottom: 12px; display: flex; justify-content: space-between; }
.bloc__titre small { font-weight: 400; color: var(--encre-2); }
.compo { display: flex; flex-wrap: wrap; gap: 8px; }
.compo span { border: 1px solid var(--ligne); border-radius: 6px; padding: 5px 11px; font-size: .88rem; background: var(--papier); }
.tailles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.taille {
  border: 1px solid var(--ligne); border-radius: 10px; padding: 14px 10px; background: var(--papier); text-align: center; position: relative;
  transition: border-color .3s, background .3s, color .3s;
}
.taille b { display: block; font-weight: 600; }
.taille span { color: var(--encre-2); font-size: .92rem; }
.taille svg { width: 30px; height: 30px; margin: 0 auto 6px; color: var(--sauge-600); display: block; }
.taille[aria-checked="true"] { background: var(--sauge-900); color: var(--creme); border-color: var(--sauge-900); }
.taille[aria-checked="true"] span, .taille[aria-checked="true"] svg { color: var(--peche); }
.carte-message { display: block; }
.champ textarea, .champ input, .champ select {
  width: 100%; border: 1px solid var(--ligne); border-radius: 10px; background: var(--papier); padding: 13px 14px; min-height: 50px;
  transition: border-color .3s, box-shadow .3s; font-size: 1rem;
}
.champ textarea { resize: vertical; min-height: 130px; }
.champ input:focus, .champ textarea:focus, .champ select:focus { outline: none; border-color: var(--sauge); box-shadow: 0 0 0 3px rgba(108, 150, 117, .22); }
.champ label { display: block; font-weight: 500; font-size: .92rem; margin-bottom: 6px; }
.champ small { display: block; color: var(--encre-2); font-size: .82rem; margin-top: 6px; }
.champ .erreur { color: #a1412c; }
.apercu-carte {
  background: var(--papier); border-radius: 10px; padding: 22px 20px; position: relative; min-height: 150px;
  box-shadow: 0 0 0 4px var(--papier), 0 0 0 5px var(--peche), 0 16px 30px -22px rgba(40, 40, 30, .5);
  transform: rotate(1.6deg); display: flex; flex-direction: column; justify-content: center; text-align: center;
}
.apercu-carte p { font: 400 1.9rem/1.05 var(--f-script); margin: 0; color: var(--encre); word-break: break-word; }
.apercu-carte p.vide { color: rgba(59, 47, 40, .35); }
.apercu-carte small { font-family: var(--f-marque); font-size: .72rem; letter-spacing: .04em; color: var(--encre-2); margin-top: 12px; }
.achat { display: flex; align-items: center; gap: 18px; padding-top: 24px; border-top: 1px solid var(--ligne); }
.achat__prix { font: 400 2.2rem/1 var(--f-titre); min-width: 4ch; }
.qte { display: inline-flex; align-items: center; border: 1px solid var(--ligne); border-radius: 10px; height: 50px; background: var(--papier); }
.qte button { width: 42px; height: 100%; border: 0; background: none; font-size: 1.2rem; }
.qte output { min-width: 26px; text-align: center; font-weight: 600; }
.rassurance { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; font-size: .9rem; color: var(--encre-2); }
.rassurance div { display: flex; gap: 10px; align-items: flex-start; }
.rassurance svg { width: 20px; height: 20px; color: var(--sauge-600); flex: none; margin-top: 2px; }
@media (max-width: 900px) {
  .fiche { grid-template-columns: 1fr; padding-top: 24px; }
  .fiche__galerie { position: static; }
  .carte-message { grid-template-columns: 1fr; }
  .achat { flex-wrap: wrap; }
  .achat .btn { flex: 1 1 100%; }
}

/* ---------- Tiroir panier ---------- */
.voile { position: fixed; inset: 0; background: rgba(35, 54, 42, .45); z-index: 80; opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
.tiroir {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100%); background: var(--creme); z-index: 81;
  transform: translateX(105%); transition: transform .6s var(--ease); display: flex; flex-direction: column;
  box-shadow: -30px 0 60px -40px rgba(30, 40, 30, .6);
}
body.panier-ouvert .voile { opacity: 1; visibility: visible; }
body.panier-ouvert .tiroir { transform: none; }
.tiroir__tete { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid var(--ligne); }
.tiroir__tete h2 { font-size: 1.8rem; }
.fermer { width: 44px; height: 44px; border: 0; background: none; border-radius: 8px; display: grid; place-items: center; }
.fermer svg { width: 22px; height: 22px; }
.fermer:hover { background: var(--creme-2); }
.tiroir__corps { flex: 1; overflow-y: auto; padding: 8px 24px; overscroll-behavior: contain; }
.ligne-panier { display: grid; grid-template-columns: 74px 1fr auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--ligne); }
.ligne-panier img { width: 74px; height: 90px; object-fit: cover; border-radius: 8px; }
.ligne-panier h3 { font: 600 1rem var(--f-texte); }
.ligne-panier small { display: block; color: var(--encre-2); font-size: .84rem; }
.ligne-panier .msg { color: var(--sauge-800); margin-top: 4px; font-style: italic; }
.ligne-panier .actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.ligne-panier .qte { height: 36px; }
.ligne-panier .qte button { width: 32px; }
.retirer { border: 0; background: none; font-size: .82rem; color: var(--encre-2); text-decoration: underline; padding: 6px; }
.tiroir__pied { padding: 18px 24px 24px; border-top: 1px solid var(--ligne); background: var(--papier); }
.mode { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.mode button { border: 1px solid var(--ligne); border-radius: 10px; background: var(--creme); padding: 12px 10px; display: flex; gap: 8px; align-items: center; justify-content: center; font-weight: 500; font-size: .92rem; min-height: 48px; }
.mode button svg { width: 20px; height: 20px; }
.mode button[aria-pressed="true"] { background: var(--sauge-900); color: var(--creme); border-color: var(--sauge-900); }
.cp-ligne { display: flex; gap: 8px; margin-bottom: 6px; }
.cp-ligne input { flex: 1; }
.cp-info { font-size: .86rem; min-height: 1.4em; margin: 4px 0 10px; color: var(--encre-2); }
.cp-info.ok { color: var(--sauge-800); }
.cp-info.ko { color: #a1412c; }
.totaux { display: grid; gap: 4px; margin: 10px 0 16px; font-size: .95rem; }
.totaux div { display: flex; justify-content: space-between; }
.totaux .total { font: 400 1.5rem var(--f-titre); padding-top: 8px; border-top: 1px solid var(--ligne); margin-top: 6px; }
.panier-vide { text-align: center; padding: 70px 10px; }
.panier-vide .script { font-size: 3rem; color: var(--sauge-600); }

/* ---------- Commande ---------- */
.commande { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(30px, 5vw, 70px); padding: 40px 0 100px; align-items: start; }
.commande > * { min-width: 0; } /* sinon la rangée des jours élargit la page sur téléphone */
.etapes { display: flex; gap: 10px; list-style: none; padding: 0; margin: 0 0 30px; counter-reset: e; flex-wrap: wrap; }
.etapes li { counter-increment: e; display: flex; align-items: center; gap: 10px; font-size: .92rem; color: var(--encre-2); }
.etapes li::before { content: counter(e); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--ligne); font-weight: 600; }
.etapes li.on { color: var(--encre); font-weight: 600; }
.etapes li.on::before { background: var(--sauge-900); color: var(--creme); border-color: var(--sauge-900); }
.etapes li.fait::before { background: var(--peche); border-color: var(--peche); }
.etapes li + li::after { content: none; }
.panneau { background: var(--papier); border-radius: 14px; padding: clamp(22px, 3vw, 36px); box-shadow: 0 0 0 1px var(--ligne); }
.panneau h2 { font-size: 1.9rem; margin-bottom: 6px; }
.panneau + .panneau { margin-top: 18px; }
.jours { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: thin; }
.jour { flex: none; width: 78px; border: 1px solid var(--ligne); border-radius: 10px; background: var(--creme); padding: 10px 6px; text-align: center; }
.jour small { display: block; font-size: .78rem; color: var(--encre-2); text-transform: lowercase; }
.jour b { display: block; font: 400 1.7rem/1.1 var(--f-titre); }
.jour[aria-pressed="true"] { background: var(--sauge-900); color: var(--creme); border-color: var(--sauge-900); }
.jour[aria-pressed="true"] small { color: var(--peche); }
.jour[disabled] { opacity: .35; text-decoration: line-through; cursor: not-allowed; }
.creneaux { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.creneaux .puce { min-height: 46px; }
.grille-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grille-champs .large { grid-column: 1 / -1; }
@media (max-width: 640px) { .grille-champs { grid-template-columns: 1fr; } }
.recap { position: sticky; top: 100px; }
.recap .ligne-panier { grid-template-columns: 60px 1fr auto; }
.recap .ligne-panier img { width: 60px; height: 72px; }
.nav-etapes { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.confirmation { text-align: center; padding: 80px 0 110px; max-width: 680px; margin: 0 auto; }
.confirmation .script { font-size: clamp(3rem, 7vw, 5rem); color: var(--sauge-800); }
.confirmation .etiquette { display: inline-block; padding: 22px 36px; margin: 26px 0; }
@media (max-width: 900px) { .commande { grid-template-columns: 1fr; } .recap { position: static; order: -1; } }

/* ---------- Mariages ---------- */
.heros-mariage { position: relative; height: min(78svh, 720px); min-height: 520px; margin: 14px var(--gout) 0; border-radius: 22px; overflow: hidden; color: var(--creme); display: flex; align-items: flex-end; }
.heros-mariage__img { position: absolute; inset: -10% 0 0; }
.heros-mariage__img img { width: 100%; height: 100%; object-fit: cover; }
.heros-mariage::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 30, 22, .25) 0%, rgba(20, 30, 22, .1) 40%, rgba(20, 30, 22, .7) 100%); }
.heros-mariage .wrap { position: relative; z-index: 2; padding-bottom: clamp(40px, 8vh, 90px); width: 100%; }
.heros-mariage .script { font-size: clamp(2.4rem, 4vw, 3.4rem); color: var(--peche); display: block; }
.prestations { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.presta { position: relative; }
.presta figure { margin: 0 0 16px; aspect-ratio: 3 / 4; border-radius: var(--r); overflow: hidden; }
.presta figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.presta:hover figure img { transform: scale(1.05); }
.presta h3 { font-size: 1.5rem; margin-bottom: 6px; }
.presta p { font-size: .95rem; color: var(--encre-2); }
@media (max-width: 960px) { .prestations { grid-template-columns: 1fr 1fr; } }
.deroule { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: d; border-top: 1px solid rgba(252, 244, 222, .25); }
.deroule li { counter-increment: d; padding: 28px 24px 10px 0; position: relative; }
.deroule li::before { content: counter(d, decimal-leading-zero); font: 400 2.6rem/1 var(--f-titre); color: var(--peche); display: block; margin-bottom: 14px; }
.deroule li::after { content: ''; position: absolute; top: -4px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--peche); }
.deroule h3 { font-size: 1.45rem; margin-bottom: 8px; }
.deroule p { color: rgba(252, 244, 222, .8); font-size: .95rem; }
@media (max-width: 860px) { .deroule { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .deroule { grid-template-columns: 1fr; } }
.mosaique { columns: 3 260px; column-gap: 14px; }
.mosaique figure { margin: 0 0 14px; break-inside: avoid; border-radius: var(--r); overflow: hidden; }
.mosaique img { width: 100%; }
.formulaire { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(30px, 6vw, 90px); align-items: start; }
@media (max-width: 900px) { .formulaire { grid-template-columns: 1fr; } }
.envoye { display: none; text-align: center; padding: 40px 10px; }
.envoye .script { font-size: 3.4rem; color: var(--sauge-800); }
.is-envoye .envoye { display: block; }
.is-envoye form { display: none; }

/* ---------- Valeurs (à propos) ---------- */
.valeurs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--ligne); }
.valeur { padding: 34px 30px 10px 0; }
.valeur + .valeur { padding-left: 30px; border-left: 1px solid var(--ligne); }
.valeur svg { width: 44px; height: 44px; color: var(--sauge-600); margin-bottom: 16px; }
.valeur h3 { font-size: 1.6rem; margin-bottom: 10px; }
.valeur p { color: var(--encre-2); }
@media (max-width: 860px) { .valeurs { grid-template-columns: 1fr; } .valeur + .valeur { padding-left: 0; border-left: 0; border-top: 1px solid var(--ligne); } }

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(30px, 6vw, 90px); align-items: start; }
.coord { display: grid; gap: 22px; }
.coord a { text-decoration: none; }
.coord__l { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.coord__l svg { width: 44px; height: 44px; padding: 11px; border-radius: 10px; background: var(--sauge); color: var(--creme); }
.coord__l b { display: block; font-weight: 600; }
.carte-plan { border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 10; box-shadow: 0 0 0 1px var(--ligne); background: var(--creme-2); }
.carte-plan iframe { width: 100%; height: 100%; border: 0; filter: saturate(.7) sepia(.15); }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }

/* ---------- Curseur ---------- */
.curseur {
  position: fixed; left: 0; top: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--sauge-900); z-index: 200;
  pointer-events: none; transform: translate(-50%, -50%); display: grid; place-items: center; color: var(--creme);
  font-size: .78rem; font-weight: 600; transition: width .35s var(--ease), height .35s var(--ease), background .3s; mix-blend-mode: normal;
}
.curseur span { opacity: 0; transition: opacity .2s; }
.curseur.is-voir { width: 84px; height: 84px; background: var(--peche); color: var(--encre); }
.curseur.is-voir span { opacity: 1; }
.curseur.is-lien { width: 44px; height: 44px; background: rgba(108, 150, 117, .25); }
@media (hover: none), (pointer: coarse) { .curseur { display: none; } }

/* ---------- Intro & transitions ---------- */
.intro { position: fixed; inset: 0; z-index: 300; background: var(--sauge); display: grid; place-items: center; }
.intro__etiquette { padding: 26px 50px 20px; text-align: center; }
.intro__etiquette b { display: block; font: 400 clamp(2rem, 5vw, 3.6rem)/1 var(--f-marque); letter-spacing: .02em; }
.intro__etiquette i { display: block; font: 400 clamp(1.8rem, 3.6vw, 2.6rem)/1.1 var(--f-script); font-style: normal; }
.transition { position: fixed; inset: 0; z-index: 290; background: var(--creme); pointer-events: none; display: none; place-items: center; }
.js-motion .transition { display: grid; transform: translateY(100%); }
.transition .script { font-size: 3rem; color: var(--creme); }
html.sans-intro .intro { display: none; }

/* Révélations : état initial seulement si JS + mouvement autorisé */
.js-motion [data-revele] { opacity: 0; }
.ligne-mask { overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .js-motion [data-revele] { opacity: 1; }
}

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 120; transform: translate(-50%, calc(100% + 60px)); visibility: hidden; background: var(--sauge-900); color: var(--creme);
  padding: 14px 20px; border-radius: 10px; display: flex; gap: 14px; align-items: center; transition: transform .5s var(--ease); font-size: .95rem;
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .5); max-width: calc(100% - 32px);
}
.toast.on { transform: translate(-50%, 0); visibility: visible; }
.toast button { background: var(--peche); color: var(--encre); border: 0; border-radius: 8px; padding: 8px 12px; font-weight: 600; }

/* ---------- Ateliers ---------- */
.ateliers-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.atelier { background: var(--papier); border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1px var(--ligne); display: flex; flex-direction: column; transition: transform .35s var(--ease), box-shadow .35s; }
.atelier:hover { transform: translateY(-4px); box-shadow: 0 0 0 4px var(--papier), 0 0 0 5px var(--peche), 0 22px 40px -28px rgba(40, 50, 40, .45); }
.atelier__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--creme-2); }
.atelier__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.atelier:hover .atelier__img img { transform: scale(1.05); }
.atelier__date { position: absolute; left: 14px; top: 14px; background: var(--creme); border-radius: 10px; padding: 8px 12px 6px; text-align: center; line-height: 1.1; box-shadow: 0 0 0 3px var(--creme), 0 0 0 4px var(--peche); }
.atelier__date b { display: block; font: 400 1.8rem/1 var(--f-titre); color: var(--sauge-800); }
.atelier__date small { font-size: .75rem; color: var(--encre-2); }
.atelier__corps { padding: 20px 20px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.atelier__corps h3 { font-size: 1.3rem; }
.atelier__corps p { margin: 0; font-size: .93rem; color: var(--encre-2); }
.atelier__infos { display: flex; flex-direction: column; gap: 2px; color: var(--encre) !important; font-weight: 500; }
.atelier__pied { margin-top: auto; padding-top: 12px; display: flex; justify-content: space-between; align-items: center; gap: 10px; border-top: 1px dashed var(--peche-600); }
.atelier__places { font-size: .85rem; color: var(--sauge-800); font-weight: 600; }
.atelier__places.complet { color: #a1412c; }
.btn--petit { min-height: 40px; padding: 0 16px; font-size: .9rem; }
@media (max-width: 1000px) { .ateliers-grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .ateliers-grille { grid-template-columns: 1fr; } }

/* ---------- Avis Google ---------- */
.avis__tete { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 34px; }
.avis__note { display: flex; align-items: center; gap: 14px; }
.avis__note b { font: 400 3rem/1 var(--f-titre); }
.etoiles { display: inline-flex; gap: 2px; color: #e3a35f; }
.etoiles svg { width: 18px; height: 18px; }
.avis__liste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.avis-carte { background: var(--papier); border-radius: 14px; padding: 22px; box-shadow: 0 0 0 1px var(--ligne); display: flex; flex-direction: column; gap: 12px; margin: 0; }
.avis-carte p { margin: 0; font-size: .95rem; line-height: 1.6; }
.avis-carte footer { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: .85rem; color: var(--encre-2); }
.avis-carte footer b { color: var(--encre); font-weight: 600; }
@media (max-width: 1000px) { .avis__liste { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .avis__liste { grid-template-columns: 1fr; } }

/* ---------- Bandeau Instagram aux couleurs de la maison ---------- */
.insta-bande { position: relative; background: var(--sauge); color: var(--creme); border-radius: 22px; margin: 0 var(--gout); padding: clamp(40px, 5vw, 64px) 0; }
.insta-bande .lead { color: rgba(252, 244, 222, .85); }
.insta-bande .insta a { box-shadow: 0 0 0 3px var(--creme); }
.btn--peche { --bg: var(--peche); --fg: var(--encre); }
.btn--peche::before { background: var(--creme); }
@media (max-width: 640px) { .insta-bande { margin: 0 10px; } }

/* ---------- Réservation d'atelier ---------- */
.modale { border: 0; border-radius: 16px; padding: 0; width: min(520px, 94vw); background: var(--creme); color: var(--encre); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .5); }
.modale::backdrop { background: rgba(35, 54, 42, .5); }
.modale__tete { display: flex; justify-content: space-between; align-items: start; gap: 12px; padding: 22px 24px 0; }
.modale__tete h2 { font-size: 1.6rem; }
.modale form, .modale .envoye { padding: 18px 24px 24px; }