/* Les Li-Cœurs d'Art : nouveau site (maquette).
   Jetons repris de l'habillage de Léa (agent DaleVoz conseillere-liqueurs, concept « L'atelier du liquoriste »). */
:root {
  --framboise: #8b1e2f;
  --framboise-fonce: #6a1322;
  --framboise-clair: #f2c9cf;
  --papier: #f3eadb;
  --papier-2: #e8dac4;
  --papier-lea: #dccdbb;
  --entete-lea: #d9c3ac;
  --kraft: #cfae84;
  --kraft-fonce: #b8915f;
  --encre: #1d140b;
  --sepia: #3e2c1d;
  --nuit: #2e1217;
  --nuit-2: #3c1a20;
  --or: #d9b77a;
  --vert: #3f6b2e;
  --ombre: 0 18px 40px -22px rgba(46, 18, 23, .55);
  --f-titre: "Cormorant Garamond", Georgia, serif;
  --f-main: "Homemade Apple", "Segoe Script", cursive;
  --gouttiere: 16px;
  --largeur: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--papier);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .25  0 0 0 0 .15  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  color: var(--sepia);
  font-family: var(--f-titre);
  font-size: 1.22rem;
  font-weight: 500;
  line-height: 1.55;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--framboise); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--framboise-fonce); }
h1, h2, h3 { font-family: var(--f-titre); color: var(--encre); font-weight: 600; line-height: 1.08; margin: 0 0 .5em; letter-spacing: -.005em; }
h1 { font-size: clamp(2.35rem, 7.5vw, 4.4rem); }
h2 { font-size: clamp(1.95rem, 5vw, 3rem); }
h3 { font-size: 1.55rem; }
p { margin: 0 0 1em; }
.conteneur { width: 100%; max-width: var(--largeur); margin: 0 auto; padding: 0 var(--gouttiere); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.surtitre { font-family: var(--f-titre); font-size: .9rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--framboise); margin-bottom: .7rem; display: inline-flex; align-items: center; gap: .6rem; }
.surtitre::before { content: ""; width: 26px; height: 1px; background: currentColor; }
.manuscrit { font-family: var(--f-main); font-weight: 400; color: var(--framboise); line-height: 1.6; }
.chapo { font-size: 1.32rem; color: var(--sepia); max-width: 38em; }

/* ---------- En-tête ---------- */
.entete { position: sticky; top: 0; z-index: 40; background: rgba(243, 234, 219, .94); backdrop-filter: blur(6px); border-bottom: 1px solid rgba(139, 30, 47, .18); }
.entete::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: rgba(139, 30, 47, .18); }
.entete .conteneur { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 1rem; }
.marque { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--encre); }
.marque img { width: 38px; height: 38px; object-fit: contain; }
.marque b { font-size: 1.42rem; font-weight: 600; letter-spacing: .01em; white-space: nowrap; }
.marque small { display: block; font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--framboise); margin-top: -2px; }
.nav { display: none; gap: 1.6rem; align-items: center; }
.nav a { color: var(--encre); text-decoration: none; font-size: 1.12rem; font-weight: 600; position: relative; padding: .3rem 0; }
.nav a[aria-current="page"], .nav a:hover { color: var(--framboise); }
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--framboise); border-radius: 2px; }
.burger { width: 46px; height: 46px; border: 1px solid rgba(139, 30, 47, .4); background: transparent; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--framboise); }
.burger span, .burger span::before, .burger span::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative; content: ""; }
.burger span::before { position: absolute; top: -6px; }
.burger span::after { position: absolute; top: 6px; }
.menu-mobile { position: fixed; inset: 0; z-index: 60; background: var(--nuit); color: #fff; display: none; flex-direction: column; padding: 22px var(--gouttiere) 32px; overflow-y: auto; }
.menu-mobile.ouvert { display: flex; }
.menu-mobile .fermer { align-self: flex-end; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.45); background: transparent; color: #fff; font-size: 1.6rem; cursor: pointer; }
.menu-mobile nav { display: flex; flex-direction: column; margin-top: 1.5rem; }
.menu-mobile nav a { color: #fff; text-decoration: none; font-size: 2.1rem; font-weight: 600; padding: .55rem 0; border-bottom: 1px solid rgba(255,255,255,.14); }
.menu-mobile nav a[aria-current="page"] { color: var(--or); }
.menu-mobile .bas { margin-top: auto; padding-top: 2rem; display: grid; gap: .8rem; }
.menu-mobile p { color: #f1e6da; font-size: 1.05rem; margin: 0; }
@media (min-width: 960px) {
  .nav { display: flex; }
  .burger { display: none; }
  .entete .conteneur { min-height: 76px; }
}

/* ---------- Boutons étiquettes ---------- */
.btn {
  --fond: var(--kraft); --texte: var(--encre);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 52px; padding: .65rem 1.5rem .65rem 2.6rem;
  background: var(--fond); color: var(--texte);
  font-family: var(--f-titre); font-size: 1.18rem; font-weight: 700; letter-spacing: .01em; text-decoration: none;
  border: 0; cursor: pointer;
  clip-path: polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
  box-shadow: inset 0 0 0 1px rgba(29, 20, 11, .12);
  transition: transform .18s ease, background-color .18s ease;
}
.btn::before { /* œillet */
  content: ""; position: absolute; left: 13px; top: 50%; width: 13px; height: 13px; margin-top: -6.5px; border-radius: 50%;
  background: radial-gradient(circle, var(--papier) 0 34%, #a07a3a 36% 62%, #6e5226 64% 100%);
}
.btn:hover { transform: translateY(-1px); color: var(--texte); }
.btn--framboise { --fond: var(--framboise); --texte: #fff; }
.btn--framboise:hover { background: var(--framboise-fonce); }
.btn--kraft:hover { background: var(--kraft-fonce); }
.btn--clair { --fond: #fbf6ec; --texte: var(--encre); }
.btn--plein { width: 100%; }
.btn svg { width: 20px; height: 20px; flex: none; }
.boutons { display: flex; flex-wrap: wrap; gap: .75rem; }
.lien-fleche { font-weight: 700; text-decoration: none; display: inline-flex; gap: .4rem; align-items: center; font-size: 1.15rem; }
.lien-fleche::after { content: "→"; transition: transform .2s; }
.lien-fleche:hover::after { transform: translateX(3px); }

/* ---------- Étiquette (papier à bord frangé et double filet, reprise du widget) ---------- */
.etiquette {
  border: 26px solid transparent;
  border-image: url("../img/etiquette.webp") 62 fill / 26px / 0 stretch;
  padding: 10px 12px;
  color: var(--sepia);
  filter: drop-shadow(0 10px 16px rgba(46, 18, 23, .16));
}
@media (min-width: 720px) { .etiquette { border-width: 34px; border-image-width: 34px; padding: 14px 20px; } }

/* ---------- Héros ---------- */
.heros { position: relative; background: var(--nuit); color: #fff; overflow: hidden; }
.heros__image { position: relative; height: 44vh; min-height: 260px; max-height: 420px; }
.heros__image img { width: 100%; height: 100%; object-fit: cover; object-position: 78% 50%; }
.heros__image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(46,18,23,0) 55%, var(--nuit) 100%); }
.heros__texte { position: relative; padding: 0 var(--gouttiere) 30px; margin-top: -54px; z-index: 2; }
.heros h1 { color: #fff; font-weight: 600; margin-bottom: .35em; font-size: clamp(2.1rem, 8.6vw, 4.6rem); }
.heros h1 em { font-style: italic; color: var(--framboise-clair); font-weight: 500; }
.heros p { color: #f4ebe0; font-size: 1.2rem; max-width: 34em; margin-bottom: 1.2rem; }
.heros .surtitre { color: var(--or); }
.heros__cachet { position: absolute; width: 74px; right: 14px; top: -40px; transform: rotate(-10deg); filter: drop-shadow(0 6px 10px rgba(0,0,0,.4)); }
@media (min-width: 900px) {
  .heros { min-height: min(86vh, 760px); display: flex; align-items: center; }
  .heros__image { position: absolute; inset: 0; height: auto; max-height: none; }
  .heros__image img { object-position: 70% 50%; }
  .heros__image::after { background: linear-gradient(90deg, rgba(46,18,23,.92) 0%, rgba(46,18,23,.74) 34%, rgba(46,18,23,0) 62%); }
  .heros__texte { margin: 0 auto; width: 100%; max-width: var(--largeur); padding: 90px var(--gouttiere); }
  .heros__texte > div { max-width: 600px; position: relative; }
  .heros__cachet { right: auto; left: -104px; top: -14px; width: 84px; }
}
@media (min-width: 900px) and (max-height: 760px) { .heros__texte { padding: 40px var(--gouttiere); } .heros h1 { font-size: 3.6rem; } }

/* ---------- Sections ---------- */
.section { padding: 64px 0; position: relative; }
.section--papier2 { background: rgba(220, 205, 187, .45); }
.section--nuit { background: var(--nuit); color: #f4ebe0; }
.section--nuit h2, .section--nuit h3 { color: #fff; }
.section--nuit .surtitre { color: var(--or); }
.section--nuit .chapo { color: #f1e6da; }
.entete-section { margin-bottom: 2rem; max-width: 760px; }
@media (min-width: 900px) { .section { padding: 96px 0; } }

/* Les trois secrets */
.secrets { display: grid; gap: 1.6rem; }
.secret { display: grid; gap: .2rem; }
.secret figure { margin: 0; position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 3px; box-shadow: var(--ombre); }
.secret figure img { width: 100%; height: 100%; object-fit: cover; }
.secret .num { font-family: var(--f-titre); font-style: italic; font-weight: 600; color: var(--framboise); font-size: 1.6rem; margin-top: .9rem; line-height: 1; }
.secret h3 { margin-bottom: .3em; }
.secret p { margin: 0; }
@media (min-width: 820px) { .secrets { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.2rem; } }

/* Éventail des liqueurs (défilement horizontal) */
.eventail { display: grid; grid-auto-flow: column; grid-auto-columns: 62%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px var(--gouttiere) 22px; margin: 0 calc(var(--gouttiere) * -1); scrollbar-width: thin; scrollbar-color: var(--framboise) transparent; }
.eventail > * { scroll-snap-align: start; min-width: 0; }
@media (min-width: 640px) { .eventail { grid-auto-columns: 34%; } }
@media (min-width: 1000px) { .eventail { grid-auto-columns: calc((100% - 4 * 18px) / 5.2); gap: 18px; } }

/* Carte produit */
.carte { position: relative; display: flex; flex-direction: column; text-decoration: none; color: inherit; background: #fbf6ec; border-radius: 4px; box-shadow: 0 1px 0 rgba(29,20,11,.06), var(--ombre); overflow: hidden; transition: transform .25s ease; min-width: 0; }
.carte:hover { transform: translateY(-4px); color: inherit; }
.carte__image { aspect-ratio: 2 / 3; background: #efe4d2; overflow: hidden; }
.carte__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.carte:hover .carte__image img { transform: scale(1.03); }
.carte__corps { padding: .85rem .95rem 1rem; display: flex; flex-direction: column; gap: .15rem; flex: 1; border-top: 3px double var(--framboise); }
.carte__nom { font-size: 1.42rem; font-weight: 700; color: var(--encre); line-height: 1.1; }
.carte__sous { font-size: 1.02rem; color: var(--sepia); line-height: 1.3; }
.carte__bas { margin-top: auto; padding-top: .6rem; display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.carte__prix { font-size: 1.2rem; font-weight: 700; color: var(--encre); white-space: nowrap; }
.carte__medaille { position: absolute; top: 10px; left: 10px; background: var(--nuit); color: var(--or); font-size: .8rem; font-weight: 700; letter-spacing: .06em; padding: .2rem .55rem; border-radius: 2px; text-transform: uppercase; }
/* Carte sans photo : une étiquette typographique */
.carte__image--etiquette { display: grid; place-items: center; background: var(--papier-2); padding: 14%; }
.carte__image--etiquette .etiq { width: 100%; text-align: center; padding: 1.4rem .6rem 1.1rem; background: #fbf6ec; box-shadow: inset 0 0 0 4px #fbf6ec, inset 0 0 0 5px var(--framboise), inset 0 0 0 8px #fbf6ec, inset 0 0 0 9px var(--framboise); position: relative; }
.carte__image--etiquette .etiq b { display: block; font-size: 1.5rem; color: var(--encre); line-height: 1.05; }
.carte__image--etiquette .etiq i { display: block; font-family: var(--f-main); font-style: normal; color: var(--framboise); font-size: .78rem; margin-top: .5rem; }
.carte__image--etiquette .etiq img { width: 42px; margin: -2.6rem auto .5rem; }
.carte__image--etiquette .encre { width: 34px; height: 34px; border-radius: 50%; margin: .8rem auto 0; box-shadow: inset 0 -6px 10px rgba(0,0,0,.25); }

/* Pastilles de disponibilité */
.dispo { display: inline-flex; align-items: center; gap: .4rem; font-size: .98rem; font-weight: 700; white-space: nowrap; }
.dispo::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.dispo.ok { color: #2f5d22; }
.dispo.peu { color: #8a4a06; }
.dispo.res { color: var(--framboise); }
.dispo.non { color: var(--sepia); }

/* Histoire */
.histoire { display: grid; gap: 2rem; align-items: center; }
.citation { font-size: 1.45rem; line-height: 1.5; color: var(--encre); font-style: italic; font-weight: 500; margin: 0; }
.citation p { margin-bottom: .6em; }
.signature { display: flex; align-items: center; gap: 1rem; margin-top: 1.4rem; }
.signature .manuscrit { font-size: 1.5rem; }
.signature img { width: 58px; transform: rotate(-8deg); }
.histoire figure { margin: 0; position: relative; }
.histoire figure img { border-radius: 3px; box-shadow: var(--ombre); }
.histoire figure .framboises { position: absolute; width: 38%; left: -6%; bottom: -12%; filter: drop-shadow(0 10px 14px rgba(0,0,0,.25)); }
@media (max-width: 899px) {
  .histoire figure { width: 78%; max-width: 340px; margin: 0 auto 1.4rem; }
  .histoire figure .framboises { left: -14%; bottom: -8%; }
}
@media (min-width: 900px) { .histoire { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 4rem; } }

/* Léa */
.lea { display: grid; gap: 2rem; align-items: center; }
.lea__demo { position: relative; }
.lea__bulle { background: var(--papier-lea); color: var(--encre); padding: 1rem 1.15rem; border-radius: 4px; position: relative; font-size: 1.18rem; box-shadow: var(--ombre); }
.lea__bulle + .lea__bulle { margin-top: .8rem; }
.lea__bulle--visiteur { background: var(--framboise); color: #fff; margin-left: 18%; }
.lea__bulle b { display: block; font-family: var(--f-main); font-weight: 400; color: var(--framboise); font-size: 1rem; margin-bottom: .2rem; }
.lea__questions { display: grid; gap: .7rem; margin-top: 1.4rem; }
.lea__questions .btn { justify-content: flex-start; text-align: left; }
.langues { font-size: 1.05rem; color: #f1e6da; margin-top: 1rem; }
@media (min-width: 900px) { .lea { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4.5rem; } }

/* Dégustation, bandeau image + texte */
.bandeau { display: grid; gap: 0; background: #fbf6ec; box-shadow: var(--ombre); border-radius: 4px; overflow: hidden; }
.bandeau figure { margin: 0; min-height: 240px; }
.bandeau figure img { width: 100%; height: 100%; object-fit: cover; }
.bandeau__texte { padding: 1.6rem 1.3rem 1.8rem; }
.faits { list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid; gap: .45rem; }
.faits li { padding-left: 1.6rem; position: relative; }
.faits li::before { content: ""; position: absolute; left: 0; top: .55em; width: 10px; height: 10px; border-radius: 50%; background: var(--framboise); box-shadow: 0 0 0 3px rgba(139,30,47,.18); }
@media (min-width: 900px) { .bandeau { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } .bandeau__texte { padding: 3rem; } }

/* Distinctions */
.distinctions { display: grid; gap: 1rem; }
.distinction { display: flex; gap: 1rem; align-items: center; }
.medaille { flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; text-align: center; font-size: .82rem; font-weight: 700; line-height: 1.1; color: #3b2a07; background: radial-gradient(circle at 35% 30%, #fbe7a6, #d6a83b 55%, #9c7316); box-shadow: inset 0 0 0 3px rgba(255,255,255,.35), 0 6px 12px -6px rgba(0,0,0,.5); }
@media (min-width: 820px) { .distinctions { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Catalogue ---------- */
.filtres { display: flex; gap: .5rem; overflow-x: auto; padding: 4px var(--gouttiere) 10px; margin: 0 calc(var(--gouttiere) * -1) 1.4rem; scrollbar-width: none; }
.filtres button { flex: none; border: 1px solid rgba(139,30,47,.45); background: #fbf6ec; color: var(--encre); font-family: var(--f-titre); font-size: 1.08rem; font-weight: 700; padding: .45rem 1rem; border-radius: 999px; cursor: pointer; min-height: 44px; }
.filtres button[aria-pressed="true"] { background: var(--framboise); border-color: var(--framboise); color: #fff; }
.grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 720px) { .grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1080px) { .grille { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; } }
@media (max-width: 380px) { .carte__nom { font-size: 1.25rem; } .carte__corps { padding: .7rem .7rem .85rem; } .dispo { font-size: .9rem; white-space: normal; } }

/* ---------- Fiche produit ---------- */
.fiche { display: grid; gap: 1.6rem; padding: 26px 0 64px; }
.fiche__visuel { position: relative; background: #efe4d2; border-radius: 4px; overflow: hidden; box-shadow: var(--ombre); max-height: 74vh; }
.fiche__visuel img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 2 / 3; max-height: 74vh; object-position: 50% 40%; }
@media (max-width: 899px) {
  .fiche__visuel, .fiche__visuel img { max-height: 48vh; }
  .fiche__visuel img { aspect-ratio: auto; height: 48vh; object-position: 50% 12%; }
}
.fiche__visuel--etiquette { aspect-ratio: 4 / 5; display: grid; place-items: center; padding: 12%; }
.fiche__visuel--etiquette .etiq b { font-size: 2.2rem; }
.fiche h1 { font-size: clamp(2.4rem, 7vw, 3.8rem); margin-bottom: .1em; }
.fiche__sous { font-size: 1.3rem; color: var(--sepia); margin-bottom: 1rem; }
.fiche__meta { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: center; margin-bottom: 1.2rem; font-weight: 700; color: var(--encre); }
.fiche__meta .badge { background: var(--nuit); color: var(--or); font-size: .9rem; padding: .2rem .6rem; border-radius: 2px; letter-spacing: .04em; }
.formats { width: 100%; border-collapse: collapse; margin: .4rem 0 1.4rem; font-size: 1.12rem; }
.formats th { text-align: left; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; color: var(--framboise); padding: 0 0 .4rem; font-weight: 700; }
.formats td { padding: .7rem .4rem .7rem 0; border-top: 1px solid rgba(139,30,47,.22); vertical-align: top; color: var(--encre); }
.formats td small { display: block; color: var(--sepia); font-size: .95rem; }
.formats .prix { font-weight: 700; white-space: nowrap; text-align: right; }
.bloc-fiche { margin-top: 1.4rem; }
.bloc-fiche h2 { font-size: 1.45rem; margin-bottom: .4rem; }
.accords { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.accords li { background: #fbf6ec; border: 1px solid rgba(139,30,47,.28); padding: .3rem .8rem; border-radius: 999px; font-size: 1.05rem; color: var(--encre); }
.note-reservation { background: var(--framboise-clair); color: var(--encre); padding: .9rem 1rem; border-left: 4px solid var(--framboise); margin-bottom: 1rem; font-size: 1.12rem; }
.fil { font-size: 1.02rem; margin-bottom: .6rem; }
.fil a { color: var(--sepia); }
@media (min-width: 900px) {
  .fiche { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 4rem; padding: 48px 0 96px; align-items: start; }
  .fiche__visuel { position: sticky; top: 100px; max-height: calc(100vh - 130px); }
  .fiche__visuel img { max-height: calc(100vh - 130px); }
}

/* ---------- Atelier ---------- */
.etapes { display: grid; gap: 2.2rem; }
.etape { display: grid; gap: 1rem; align-items: center; }
.etape figure { margin: 0; }
.etape figure img { border-radius: 3px; box-shadow: var(--ombre); aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
@media (min-width: 900px) {
  .etape { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.5rem; }
  .etape:nth-child(even) figure { order: 2; }
}
.grand-texte { font-size: 1.38rem; color: var(--encre); }
.conseils { display: grid; gap: 1rem; }
@media (min-width: 820px) { .conseils { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Commander / contact ---------- */
.pas { display: grid; gap: 1rem; counter-reset: pas; }
.pas li { list-style: none; position: relative; padding: 1.2rem 1.2rem 1.2rem 4.2rem; background: #fbf6ec; border-radius: 4px; box-shadow: 0 1px 0 rgba(29,20,11,.06); }
.pas li::before { counter-increment: pas; content: counter(pas); position: absolute; left: 1.1rem; top: 1.05rem; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--framboise); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 1.15rem; }
.pas h3 { font-size: 1.35rem; margin-bottom: .2rem; }
.pas p { margin: 0; }
@media (min-width: 900px) { .pas { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; } }
.coordonnees { display: grid; gap: 1.6rem; }
.coordonnees dl { margin: 0; display: grid; gap: .9rem; }
.coordonnees dt { font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; color: var(--framboise); font-weight: 700; }
.coordonnees dd { margin: 0; color: var(--encre); font-size: 1.25rem; }
@media (min-width: 900px) { .coordonnees { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; } }

/* ---------- Pied ---------- */
.pied { background: var(--nuit); color: #f1e6da; padding: 56px 0 28px; position: relative; overflow: hidden; }
.pied a { color: #fff; }
.pied a:hover { color: var(--or); }
.pied__grille { display: grid; gap: 2rem; }
.pied h3 { color: #fff; font-size: 1.3rem; }
.pied ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.pied ul li { min-height: 44px; display: flex; align-items: center; }
.fil a { display: inline-block; padding: .6rem 0; }
.pied .marque { color: #fff; }
.pied .marque small { color: var(--or); }
.pied .marque img { background: #f3eadb; border-radius: 50%; padding: 5px; width: 46px; height: 46px; }
.pied__bas { margin-top: 2.4rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.18); display: grid; gap: .4rem; font-size: 1rem; color: #e9dccd; }
.pied__slogan { font-family: var(--f-main); color: var(--or); font-size: 1.05rem; margin-top: 1rem; }
@media (min-width: 900px) { .pied__grille { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }

/* Bandeau maquette (à retirer à la mise en ligne réelle) */
.maquette { background: var(--encre); color: #f6ecdd; font-size: .98rem; text-align: center; padding: .45rem var(--gouttiere); }
.maquette b { color: var(--or); }

/* ---------- Contrôle d'âge ---------- */
.age { position: fixed; inset: 0; z-index: 100; background: rgba(46, 18, 23, .86); backdrop-filter: blur(4px); display: grid; place-items: center; padding: var(--gouttiere); }
.age[hidden] { display: none; }
.age .etiquette { max-width: 460px; width: 100%; text-align: center; }
.age img.cachet { width: 70px; margin: -6px auto 6px; }
.age h2 { font-size: 2rem; margin-bottom: .3em; }
.age p { color: var(--sepia); }
.age .boutons { justify-content: center; margin-top: 1rem; }
.age .refus { color: var(--encre); font-weight: 700; }

/* Héros mobile : titre et boutons au-dessus du pli (mesuré en 375x660) */
@media (max-width: 899px) {
  .maquette { font-size: .88rem; padding: .3rem var(--gouttiere); }
  .maquette .long { display: none; }
  .heros__image { height: 31vh; min-height: 190px; }
  .heros__texte { margin-top: -38px; padding-bottom: 34px; }
  .heros__texte > div { display: flex; flex-direction: column; }
  .heros__texte .intro { order: 5; margin: 1.2rem 0 0; }
  .heros__cachet { display: none; }
  .heros .surtitre { font-size: .8rem; letter-spacing: .16em; }
  .heros .boutons .btn { flex: 1 1 100%; }
}
@media (max-width: 899px) and (min-width: 560px) { .heros .boutons .btn { flex: 1 1 0; } }

/* Apparition douce */
@media (prefers-reduced-motion: no-preference) {
  .apparait { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
  .apparait.vu { opacity: 1; transform: none; }
}