/* =========================================================
   La Gourmandise — feuille de style unique
   Palette : charbon, crème, rouge de l'identité, braise (fumoir)
   ========================================================= */

:root {
  --noir:          #0b0a09;
  --charbon:       #141211;
  --charbon-2:     #1d1a17;
  --charbon-3:     #2a2622;
  --creme:         #f7f1e6;
  --creme-doux:    #cfc7ba;
  --creme-faible:  #8f877c;
  --rouge:         #d1342c;
  --rouge-vif:     #e8443a;
  --braise:        #f08a2e;
  --or:            #e2b15a;

  --police-titre: "Anton", "Arial Narrow", "Haettenschweiler", Impact, sans-serif;
  --police-texte: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;

  --max: 1180px;
  --marge: clamp(1rem, 4vw, 2.5rem);
  --rayon: 14px;
  --rayon-s: 9px;

  --ombre: 0 18px 50px rgba(0, 0, 0, .45);
  --transition: .25s cubic-bezier(.2, .7, .3, 1);

  --hauteur-entete: 68px;
  --hauteur-barre-mobile: 0px;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hauteur-entete) + 12px);
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;          /* filet de sécurité : aucun défilement horizontal */
}

body {
  margin: 0;
  background: var(--noir);
  color: var(--creme);
  font-family: var(--police-texte);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  padding-bottom: var(--hauteur-barre-mobile);
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--police-titre);
  font-weight: 400;
  line-height: .98;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin: 0 0 .5em;
}

h1 { font-size: clamp(2.6rem, 9vw, 5.4rem); text-wrap: balance; }
h2 { font-size: clamp(2rem, 5.6vw, 3.5rem); text-wrap: balance; }
h3 { font-size: clamp(1.25rem, 2.6vw, 1.6rem); }

p { margin: 0 0 1em; }

:focus-visible {
  outline: 3px solid var(--braise);
  outline-offset: 3px;
  border-radius: 4px;
}

.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--rouge);
  color: #fff;
  padding: .8rem 1.2rem;
  z-index: 200;
  font-weight: 700;
}
.saut-contenu:focus { left: 8px; top: 8px; }

.visuellement-cache {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---------- Contenants ---------- */

.contenant {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--marge);
}

.section { padding: clamp(3.5rem, 9vw, 6.5rem) 0; }
.section--charbon { background: var(--charbon); }
.section--noir    { background: var(--noir); }

.section-entete { max-width: 46rem; margin-bottom: clamp(2rem, 5vw, 3rem); }
.section-entete p { color: var(--creme-doux); font-size: 1.08rem; margin-bottom: 0; }

.surtitre {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--police-texte);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--braise);
  margin-bottom: .9rem;
}
.surtitre::before {
  content: "";
  width: 26px; height: 2px;
  background: linear-gradient(90deg, var(--rouge), var(--braise));
}

/* ---------- Boutons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 52px;
  padding: .85rem 1.6rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--police-texte);
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--transition), background-color var(--transition),
              border-color var(--transition), color var(--transition), box-shadow var(--transition);
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--commander {
  background: var(--rouge);
  color: #fff;
  box-shadow: 0 10px 26px rgba(209, 52, 44, .35);
}
.btn--commander:hover { background: var(--rouge-vif); box-shadow: 0 14px 32px rgba(232, 68, 58, .45); }

.btn--fantome {
  background: rgba(247, 241, 230, .06);
  border-color: rgba(247, 241, 230, .38);
  color: var(--creme);
  backdrop-filter: blur(6px);
}
.btn--fantome:hover { background: rgba(247, 241, 230, .14); border-color: var(--creme); }

.btn--braise {
  background: transparent;
  border-color: var(--braise);
  color: var(--braise);
}
.btn--braise:hover { background: var(--braise); color: var(--noir); }

.btn--petit { min-height: 44px; padding: .6rem 1.1rem; font-size: .82rem; }
.btn--bloc { width: 100%; }

.groupe-btn { display: flex; flex-wrap: wrap; gap: .85rem; }

/* ---------- En-tête ---------- */

.entete {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(11, 10, 9, .82);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid rgba(247, 241, 230, .09);
}

.entete__interieur {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--hauteur-entete);
}

.marque {
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  margin-right: auto;
  flex-shrink: 0;
}
/* Logo officiel détouré (fond transparent) : logo-flamme.webp */
.marque img {
  width: 42px; height: 42px;
  object-fit: contain;
}
.marque__texte { display: flex; flex-direction: column; line-height: 1; }
.marque__nom {
  font-family: var(--police-titre);
  font-size: 1.2rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.marque__sous {
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--creme-faible);
  margin-top: 3px;
}

.nav { display: flex; align-items: center; gap: .35rem; }

.nav a {
  padding: .55rem .8rem;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--creme-doux);
  transition: color var(--transition), background-color var(--transition);
}
.nav a:hover { color: var(--creme); background: rgba(247, 241, 230, .08); }
.nav a[aria-current="page"] { color: var(--creme); }
.nav a[aria-current="page"]::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 3px;
  border-radius: 2px;
  background: var(--rouge);
}

.entete .btn--commander { margin-left: .5rem; }

.hamburger {
  display: none;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  background: rgba(247, 241, 230, .08);
  border: 1px solid rgba(247, 241, 230, .16);
  border-radius: 12px;
  color: var(--creme);
  cursor: pointer;
}
.hamburger span {
  display: block;
  width: 20px; height: 2px;
  background: currentColor;
  position: relative;
  transition: transform var(--transition), background-color var(--transition);
}
.hamburger span::before, .hamburger span::after {
  content: "";
  position: absolute; left: 0;
  width: 20px; height: 2px;
  background: currentColor;
  transition: transform var(--transition), top var(--transition);
}
.hamburger span::before { top: -6px; }
.hamburger span::after  { top: 6px; }
.hamburger[aria-expanded="true"] span { background: transparent; }
.hamburger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.hamburger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* ---------- Bannière message spécial ---------- */

.bandeau {
  background: linear-gradient(90deg, var(--rouge), #9c2119);
  color: #fff;
  text-align: center;
  font-size: .92rem;
  font-weight: 600;
  padding: .6rem var(--marge);
}
.bandeau a { color: #fff; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(540px, 88vh, 860px);
  padding: clamp(3rem, 10vw, 6rem) 0 clamp(3.5rem, 8vw, 5rem);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 58%;
}

.hero__voile {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 80% at 50% 35%, rgba(11, 10, 9, .45) 0%, rgba(11, 10, 9, .70) 62%, rgba(11, 10, 9, .90) 100%),
    linear-gradient(to bottom, rgba(11, 10, 9, .70) 0%, rgba(11, 10, 9, .20) 35%, rgba(11, 10, 9, .85) 100%);
}

.hero__contenu { max-width: 42rem; margin-inline: auto; }

.hero__logo {
  width: clamp(64px, 11vw, 96px);
  height: auto;
  margin: 0 auto clamp(1rem, 3vw, 1.6rem);
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .6));
}

.hero h1 {
  margin-bottom: .35em;
  text-shadow: 0 6px 34px rgba(0, 0, 0, .55);
}

.hero__accroche {
  font-family: var(--police-titre);
  font-size: clamp(1.15rem, 3.4vw, 1.75rem);
  text-transform: none;
  letter-spacing: .01em;
  color: var(--or);
  margin-bottom: .8em;
}

.hero__texte {
  color: rgba(247, 241, 230, .9);
  font-size: clamp(1rem, 2.1vw, 1.15rem);
  max-width: 34rem;
  margin: 0 auto 2rem;
}

.hero .groupe-btn { justify-content: center; }
.hero .btn { min-width: 220px; }

.hero__pied {
  margin-top: clamp(1.8rem, 5vw, 2.8rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 1.4rem;
  font-size: .9rem;
  color: var(--creme-doux);
}
.hero__pied a { text-decoration: none; }
.hero__pied a:hover { color: var(--creme); text-decoration: underline; }

/* état ouvert / fermé */
.pastille {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 700;
}
.pastille::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--creme-faible);
  box-shadow: 0 0 0 4px rgba(143, 135, 124, .18);
}
.pastille--ouvert { color: #7fd48a; }
.pastille--ouvert::before { background: #7fd48a; box-shadow: 0 0 0 4px rgba(127, 212, 138, .18); }
.pastille--ferme { color: #e8877f; }
.pastille--ferme::before { background: #e8877f; box-shadow: 0 0 0 4px rgba(232, 135, 127, .18); }

/* ---------- Bande de rappel (fumé ici) ---------- */

.bande-fumee {
  background:
    linear-gradient(90deg, rgba(209, 52, 44, .16), rgba(240, 138, 46, .12), rgba(209, 52, 44, .16)),
    var(--charbon);
  border-block: 1px solid rgba(240, 138, 46, .25);
  padding: 1.1rem 0;
  overflow: hidden;
}
.bande-fumee__contenu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .6rem 1.6rem;
  font-family: var(--police-titre);
  font-size: clamp(.95rem, 2.4vw, 1.3rem);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--creme);
  text-align: center;
}
.bande-fumee__contenu span { display: inline-flex; align-items: center; gap: .6rem; }
.bande-fumee__contenu span::before {
  content: "";
  width: 7px; height: 7px;
  transform: rotate(45deg);
  background: var(--braise);
}

/* ---------- Cartes incontournables ---------- */

.grille-vedettes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: clamp(1rem, 2.4vw, 1.6rem);
}

.carte {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--charbon-2);
  border: 1px solid rgba(247, 241, 230, .08);
  border-radius: var(--rayon);
  overflow: hidden;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.carte:hover {
  transform: translateY(-4px);
  border-color: rgba(240, 138, 46, .4);
  box-shadow: var(--ombre);
}

.carte__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--charbon-3);
}
.carte__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.carte:hover .carte__media img { transform: scale(1.05); }

/* carte sans photo : traitement typographique « braise » */
.carte__media--type {
  display: grid;
  place-items: center;
  padding: 1.2rem;
  background:
    radial-gradient(90% 120% at 30% 0%, rgba(240, 138, 46, .28), transparent 60%),
    radial-gradient(80% 110% at 90% 100%, rgba(209, 52, 44, .3), transparent 62%),
    var(--charbon-3);
}
.carte__media--type::after {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(247, 241, 230, .06) 1px, transparent 1px);
  background-size: 7px 7px;
  opacity: .5;
}
.carte__motif {
  position: relative;
  margin: 0;
  font-family: var(--police-titre);
  font-size: clamp(1.5rem, 3.8vw, 2.1rem);
  line-height: .96;
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
  color: rgba(247, 241, 230, .95);
  text-shadow: 0 4px 24px rgba(0, 0, 0, .55);
}

/* carte « affiche » : le titre vit dans le visuel, pas en dessous */
.carte--affiche .carte__corps { padding-top: 1.1rem; }

.carte__corps { padding: 1.15rem 1.25rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.carte__corps h3 { margin-bottom: .45rem; }
.carte__corps p {
  color: var(--creme-doux);
  font-size: .95rem;
  margin-bottom: 1rem;
  flex: 1;
}

.carte__prix {
  font-family: var(--police-titre);
  font-size: 1.1rem;
  color: var(--or);
  letter-spacing: .03em;
}

.badge-fume {
  position: absolute;
  top: .8rem; left: .8rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .65rem;
  border-radius: 999px;
  background: rgba(11, 10, 9, .72);
  border: 1px solid rgba(240, 138, 46, .55);
  color: var(--braise);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}

.badge-fume--ligne {
  position: static;
  margin-left: .5rem;
  vertical-align: 2px;
}

/* ---------- Section fumoir ---------- */

.fumoir {
  position: relative;
  background:
    radial-gradient(70% 90% at 12% 0%, rgba(240, 138, 46, .14), transparent 58%),
    radial-gradient(60% 80% at 95% 100%, rgba(209, 52, 44, .16), transparent 60%),
    var(--noir);
  overflow: hidden;
}

.fumoir__grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.8rem, 5vw, 3.5rem);
  align-items: center;
}

.fumoir__image {
  position: relative;
  border-radius: var(--rayon);
  overflow: hidden;
  box-shadow: var(--ombre);
}
.fumoir__image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.fumoir__image::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11, 10, 9, .55), transparent 55%);
}

.fumoir__legende {
  position: absolute;
  left: 1.1rem; bottom: 1.1rem;
  z-index: 2;
  font-family: var(--police-titre);
  font-size: clamp(1.1rem, 3vw, 1.6rem);
  text-transform: uppercase;
  color: var(--creme);
  text-shadow: 0 4px 20px rgba(0, 0, 0, .7);
}

.liste-fumee { list-style: none; margin: 0 0 1.8rem; padding: 0; display: grid; gap: .9rem; }
.liste-fumee li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: .85rem;
  align-items: start;
  color: var(--creme-doux);
}
.liste-fumee strong { color: var(--creme); display: block; font-weight: 700; }
.liste-fumee .puce {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: rgba(240, 138, 46, .14);
  border: 1px solid rgba(240, 138, 46, .35);
  color: var(--braise);
  font-size: .8rem;
  font-weight: 800;
}

/* ---------- Section à emporter ---------- */

.emporter__grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.8rem, 5vw, 3.2rem);
  align-items: stretch;
}
.emporter__grille > * { align-self: center; }
.emporter__grille > .fumoir__image { align-self: stretch; height: 100%; }
.emporter__grille > .fumoir__image img {
  height: 100%;
  min-height: 300px;
  aspect-ratio: auto;
  object-fit: cover;
}

.liste-prix { list-style: none; margin: 0; padding: 0; }
.liste-prix li {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  padding: .85rem 0;
  border-bottom: 1px dashed rgba(247, 241, 230, .14);
}
.liste-prix li:last-child { border-bottom: 0; }
.liste-prix__nom { font-weight: 700; }
.liste-prix__desc { display: block; font-size: .88rem; color: var(--creme-faible); font-weight: 400; }
.liste-prix__trait { flex: 1; border-bottom: 1px dotted rgba(247, 241, 230, .2); transform: translateY(-4px); }
.liste-prix__prix {
  font-family: var(--police-titre);
  font-size: 1.05rem;
  color: var(--or);
  white-space: nowrap;
}

/* ---------- Page menu ---------- */

.menu-nav {
  position: sticky;
  top: var(--hauteur-entete);
  z-index: 50;
  background: rgba(11, 10, 9, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(247, 241, 230, .09);
}
.menu-nav ul {
  display: flex;
  gap: .4rem;
  list-style: none;
  margin: 0;
  padding: .7rem var(--marge);
  overflow-x: auto;
  scrollbar-width: none;
  max-width: var(--max);
  margin-inline: auto;
}
.menu-nav ul::-webkit-scrollbar { display: none; }
.menu-nav a {
  display: block;
  white-space: nowrap;
  padding: .5rem .95rem;
  border-radius: 999px;
  background: rgba(247, 241, 230, .06);
  border: 1px solid rgba(247, 241, 230, .12);
  font-size: .85rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--creme-doux);
  transition: all var(--transition);
}
.menu-nav a:hover, .menu-nav a.actif {
  background: var(--rouge);
  border-color: var(--rouge);
  color: #fff;
}

.categorie { padding-top: clamp(2.5rem, 6vw, 4rem); }
.categorie__entete { margin-bottom: 1.8rem; }
.categorie__entete h2 { margin-bottom: .25em; }
.categorie__entete p { color: var(--creme-doux); margin: 0; }

.grille-produits {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: .4rem clamp(1.5rem, 4vw, 3rem);
}

.produit {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .3rem 1rem;
  align-items: baseline;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(247, 241, 230, .09);
}
.produit__nom {
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0;
  font-family: var(--police-texte);
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.3;
}
.produit__desc {
  grid-column: 1 / -1;
  color: var(--creme-faible);
  font-size: .92rem;
  margin: .2rem 0 0;
  max-width: 44ch;
}
.produit__prix {
  display: flex;
  gap: .55rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  font-family: var(--police-titre);
  font-size: 1.02rem;
  color: var(--or);
  letter-spacing: .02em;
}
.produit__prix .format {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.1;
}
.produit__prix .format small {
  font-family: var(--police-texte);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--creme-faible);
  margin-top: 2px;
}

.notes-categorie {
  margin-top: 1.4rem;
  padding: 1rem 1.2rem;
  border-radius: var(--rayon-s);
  background: rgba(247, 241, 230, .05);
  border: 1px solid rgba(247, 241, 230, .1);
  color: var(--creme-doux);
  font-size: .92rem;
}
.notes-categorie p { margin: 0; }
.notes-categorie p + p { margin-top: .35rem; }

/* ---------- Infos / horaire ---------- */

.grille-infos {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 2.5rem);
}

.bloc-info {
  background: var(--charbon-2);
  border: 1px solid rgba(247, 241, 230, .09);
  border-radius: var(--rayon);
  padding: clamp(1.4rem, 3vw, 2rem);
}
.bloc-info h3 { margin-bottom: 1rem; }

.horaire { list-style: none; margin: 0; padding: 0; }
.horaire li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem 0;
  border-bottom: 1px solid rgba(247, 241, 230, .08);
}
.horaire li:last-child { border-bottom: 0; }
.horaire .jour { color: var(--creme-doux); text-transform: capitalize; }
.horaire .heures { font-weight: 700; white-space: nowrap; }
.horaire li.aujourdhui { color: var(--creme); }
.horaire li.aujourdhui .jour { color: var(--or); font-weight: 700; }
.horaire li.aujourdhui .heures { color: var(--or); }
.horaire .ferme { color: var(--creme-faible); font-weight: 400; }

.etiquette-saison {
  display: inline-block;
  margin-bottom: .9rem;
  padding: .25rem .7rem;
  border-radius: 999px;
  background: rgba(226, 177, 90, .14);
  border: 1px solid rgba(226, 177, 90, .35);
  color: var(--or);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.coord { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .8rem; }
.coord li { display: grid; grid-template-columns: 24px 1fr; gap: .8rem; align-items: start; }
.coord a { text-decoration: none; font-weight: 600; }
.coord a:hover { text-decoration: underline; }
.coord .etiq { display: block; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--creme-faible); }
.coord svg { width: 20px; height: 20px; color: var(--rouge-vif); margin-top: 3px; }

.carte-geo {
  border-radius: var(--rayon);
  overflow: hidden;
  border: 1px solid rgba(247, 241, 230, .12);
  background: var(--charbon-2);
  line-height: 0;
}
.carte-geo iframe { width: 100%; height: 100%; min-height: 340px; border: 0; filter: grayscale(.25) contrast(1.05); }

/* ---------- Appel à commander ---------- */

.appel {
  position: relative;
  text-align: center;
  background:
    linear-gradient(rgba(11, 10, 9, .86), rgba(11, 10, 9, .93)),
    var(--charbon);
  background-size: cover;
  background-position: center;
}
.appel h2 { margin-bottom: .4em; }
.appel p { color: var(--creme-doux); max-width: 38rem; margin: 0 auto 2rem; }
.appel .groupe-btn { justify-content: center; }

/* ---------- Pied de page ---------- */

.pied {
  background: var(--noir);
  border-top: 1px solid rgba(247, 241, 230, .1);
  padding: clamp(2.5rem, 6vw, 4rem) 0 2rem;
  font-size: .95rem;
}
.pied__grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}
.pied h4 {
  font-size: .78rem;
  letter-spacing: .16em;
  color: var(--creme-faible);
  margin-bottom: .9rem;
}
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.pied a { color: var(--creme-doux); text-decoration: none; }
.pied a:hover { color: var(--creme); text-decoration: underline; }
.pied__bas {
  border-top: 1px solid rgba(247, 241, 230, .08);
  padding-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
  color: var(--creme-faible);
  font-size: .85rem;
}

/* ---------- Barre mobile fixe ---------- */

.barre-mobile {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  background: rgba(11, 10, 9, .94);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(247, 241, 230, .12);
  padding-bottom: env(safe-area-inset-bottom);
}
.barre-mobile ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1.25fr;
  list-style: none;
  margin: 0; padding: 0;
}
.barre-mobile a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 58px;
  padding: .45rem .3rem;
  text-decoration: none;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--creme-doux);
}
.barre-mobile svg { width: 19px; height: 19px; }
.barre-mobile li:last-child a { background: var(--rouge); color: #fff; }

/* ---------- Animations discrètes ---------- */

/* ---------- Fumée animée (purement décorative, CSS seulement) ---------- */

.fumee {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.fumee span {
  position: absolute;
  bottom: -30%;
  left: var(--x, 50%);
  width: var(--t, 46%);
  aspect-ratio: 1;
  margin-left: calc(var(--t, 46%) / -2);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(236, 229, 218, .46), rgba(236, 229, 218, .16) 55%, transparent);
  filter: blur(10px);
  opacity: 0;
  animation: fumee-monte var(--d, 9s) linear infinite;
  animation-delay: var(--r, 0s);
}
.fumee span:nth-child(1) { --x: 30%; --t: 42%; --d: 9s;   --r: 0s;    --dx: 12%; }
.fumee span:nth-child(2) { --x: 55%; --t: 50%; --d: 11s;  --r: -3s;   --dx: -10%; }
.fumee span:nth-child(3) { --x: 72%; --t: 38%; --d: 8.5s; --r: -6s;   --dx: 8%; }
.fumee span:nth-child(4) { --x: 42%; --t: 56%; --d: 12s;  --r: -8.5s; --dx: 16%; }
.fumee span:nth-child(5) { --x: 62%; --t: 44%; --d: 10s;  --r: -1.5s; --dx: -14%; }
.fumee span:nth-child(6) { --x: 20%; --t: 40%; --d: 13s;  --r: -5s;   --dx: 10%; }

@keyframes fumee-monte {
  0%   { transform: translate(0, 0) scale(.55); opacity: 0; }
  18%  { opacity: .85; }
  65%  { opacity: .45; }
  100% { transform: translate(var(--dx, 10%), -190%) scale(1.7); opacity: 0; }
}

/* Dans l'accueil : quelques volutes discrètes qui montent derrière le texte */
.fumee--hero { z-index: -1; }
.fumee--hero span {
  width: var(--t); margin-left: calc(var(--t) / -2);
  background: radial-gradient(closest-side, rgba(236, 229, 218, .22), rgba(236, 229, 218, .07) 55%, transparent);
  filter: blur(22px);
  animation-duration: calc(var(--d) * 1.6);
}
.fumee--hero span:nth-child(odd)  { --t: 34vmax; }
.fumee--hero span:nth-child(even) { --t: 26vmax; }

/* Page Fumoir : fond enfumé très léger derrière toute la section */
.fumee--fond { z-index: 0; }
.fumee--fond span {
  background: radial-gradient(closest-side, rgba(236, 229, 218, .09), rgba(236, 229, 218, .03) 55%, transparent);
  filter: blur(26px);
  animation-duration: calc(var(--d) * 2);
}
.fumee--fond span:nth-child(odd)  { --t: 40vmax; }
.fumee--fond span:nth-child(even) { --t: 30vmax; }
.fumoir--page > .contenant { position: relative; z-index: 1; }

/* ---------- À propos ---------- */

.apropos__grille {
  display: grid;
  gap: clamp(1.6rem, 4vw, 3.2rem);
  align-items: center;
}
.apropos__grille + .apropos__grille { margin-top: clamp(2.5rem, 6vw, 4.5rem); }
.apropos__grille p { color: var(--creme-doux); max-width: 36rem; }
.apropos__photo {
  margin: 0;
  border-radius: var(--rayon);
  overflow: hidden;
  box-shadow: var(--ombre);
}
.apropos__photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.apropos__photo--large img { aspect-ratio: 1 / 1; }
.apropos__soustitre {
  font-family: var(--police-titre);
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  text-transform: uppercase;
  line-height: 1.05;
  margin: 0 0 .6em;
}
@media (min-width: 720px) {
  .apropos__grille { grid-template-columns: .85fr 1fr; }
  .apropos__grille--equipe { grid-template-columns: 1fr 1fr; }
  .apropos__photo { max-width: 460px; }
  .apropos__photo--large { max-width: none; }
}

/* ---------- Galerie photo ---------- */

.galerie {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(.5rem, 1.4vw, .9rem);
}
.galerie__item {
  position: relative;
  display: block;
  border-radius: var(--rayon-s);
  overflow: hidden;
  background: var(--charbon-2);
}
.galerie__item img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1), filter .5s ease;
}
.galerie__item:hover img,
.galerie__item:focus-visible img { transform: scale(1.04); filter: brightness(1.06); }
.galerie__item:focus-visible { outline: 3px solid var(--braise); outline-offset: 3px; }

@media (min-width: 720px)  { .galerie { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .galerie { grid-template-columns: repeat(4, 1fr); } }

.visionneuse {
  width: min(92vw, 860px);
  max-height: 92vh;
  padding: 0;
  border: 0;
  border-radius: var(--rayon);
  background: var(--noir);
  color: var(--creme);
  box-shadow: var(--ombre);
  overflow: hidden;
}
.visionneuse::backdrop { background: rgba(5, 5, 4, .88); }
.visionneuse img {
  display: block;
  width: 100%;
  max-height: calc(92vh - 3.2rem);
  object-fit: contain;
  background: #000;
}
.visionneuse__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem .9rem;
  font-size: .92rem;
  color: var(--creme-doux);
}
.visionneuse__barre div { display: flex; gap: .4rem; }
.visionneuse button {
  min-width: 44px; min-height: 40px;
  border: 1px solid var(--charbon-3);
  border-radius: var(--rayon-s);
  background: var(--charbon-2);
  color: var(--creme);
  font-size: 1.1rem;
  cursor: pointer;
}
.visionneuse button:hover { border-color: var(--braise); }

/* ---------- Bannière témoins (Loi 25) ---------- */

.temoins {
  position: fixed;
  left: 50%;
  bottom: calc(var(--hauteur-barre-mobile) + 12px);
  z-index: 60;
  width: min(640px, calc(100% - 24px));
  padding: 1rem 1.1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem 1rem;
  background: var(--charbon-2);
  border: 1px solid var(--charbon-3);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  transform: translate(-50%, calc(100% + 40px));
  opacity: 0;
  visibility: hidden;
  transition: transform .35s cubic-bezier(.2, .7, .3, 1), opacity .35s ease, visibility 0s linear .35s;
}
.temoins.visible {
  transform: translate(-50%, 0);
  opacity: 1;
  visibility: visible;
  transition: transform .35s cubic-bezier(.2, .7, .3, 1), opacity .35s ease;
}
.temoins p { flex: 1 1 280px; margin: 0; font-size: .88rem; color: var(--creme-doux); line-height: 1.45; }
.temoins p strong { display: block; color: var(--creme); margin-bottom: .15rem; }
.temoins__btn { display: flex; gap: .5rem; margin-left: auto; }

.lien-temoins {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.lien-temoins:hover { color: var(--creme); }

/* Le masquage initial n'est appliqué que si JavaScript est actif :
   sans JS, tout le contenu reste visible. */
html.js .anim {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .3, 1);
  will-change: opacity, transform;
}
html.js .anim.vu { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .anim { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .fumee { display: none; }
}

/* ---------- Adaptatif ---------- */

@media (min-width: 720px) {
  .fumoir__grille  { grid-template-columns: 1.05fr 1fr; }
  .emporter__grille { grid-template-columns: 1fr 1.1fr; }
  .grille-infos    { grid-template-columns: 1fr 1fr; }
  .pied__grille    { grid-template-columns: 1.4fr 1fr 1fr; }
}

@media (min-width: 980px) {
  .grille-infos { grid-template-columns: 1fr 1fr 1.2fr; }
}

@media (max-width: 899px) {
  :root { --hauteur-barre-mobile: 58px; }

  .barre-mobile { display: block; }

  .hamburger { display: inline-flex; }

  .entete .nav {
    position: fixed;
    inset: var(--hauteur-entete) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .6rem var(--marge) 1.4rem;
    background: var(--noir);
    box-shadow: 0 24px 40px rgba(0, 0, 0, .55);
    border-bottom: 1px solid rgba(247, 241, 230, .12);
    transform: translateY(-120%);
    transition: transform var(--transition);
    max-height: calc(100vh - var(--hauteur-entete));
    overflow-y: auto;
  }
  .entete .nav[data-ouvert="true"] { transform: translateY(0); }
  .entete .nav a {
    padding: .95rem .4rem;
    font-size: 1.05rem;
    border-radius: 0;
    border-bottom: 1px solid rgba(247, 241, 230, .08);
  }
  .entete .nav a[aria-current="page"]::after { display: none; }
  .entete .nav a[aria-current="page"] { color: var(--rouge-vif); }

  .entete .btn--commander { padding: .7rem 1rem; min-height: 46px; font-size: .8rem; }

  .entete__interieur { gap: .5rem; }
  .marque { gap: .5rem; min-width: 0; }
  .marque img { width: 36px; height: 36px; }
  .marque__nom { font-size: 1.05rem; white-space: nowrap; }
  .marque__sous { display: none; }

  .hero .btn { min-width: min(100%, 300px); width: 100%; }
  .hero .groupe-btn { flex-direction: column; align-items: stretch; }

  .produit__prix { justify-content: flex-start; grid-column: 1 / -1; margin-top: .3rem; }
  .produit { grid-template-columns: 1fr; }
}

@media (max-width: 479px) {
  .entete .btn--commander { padding: .65rem .8rem; font-size: .72rem; letter-spacing: .03em; }
  .marque__nom { font-size: .95rem; }
  .marque img { width: 32px; height: 32px; }
  .hamburger { width: 42px; height: 42px; }
}

@media (min-width: 900px) {
  .barre-mobile { display: none; }
}

@media print {
  .entete, .barre-mobile, .appel, .hero__media, .hero__voile, .temoins { display: none !important; }
  body { background: #fff; color: #000; }
}