/* =============================================================
   Kosher Marrakech — feuille de style
   Clair, chaleureux, aere. Creme, sable, terre cuite et or.
   ============================================================= */

:root {
  --creme: #faf6ef;
  --creme-2: #f3ece0;
  --sable: #e9dfcd;
  --sable-2: #ded1ba;
  --ligne: #e3d8c6;

  --brun: #4b3a2b;
  --brun-2: #3f3124;
  --encre: #2f2720;
  --texte: #5f544a;
  --texte-doux: #8b7e71;

  --or: #b3813a;
  --or-clair: #cfa261;
  --or-pale: #f0e2c9;
  --terre: #a55f3c;

  --serif: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;

  --max: 1280px;
  --pad: clamp(1.25rem, 5vw, 4rem);
  --r: 3px;
  --t: 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  --ombre: 0 30px 70px -40px rgba(75, 58, 43, 0.5);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--texte);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.75;
  font-weight: 300;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.1;
  margin: 0;
  color: var(--encre);
}

p {
  margin: 0 0 1.1rem;
}

::selection {
  background: var(--or-pale);
  color: var(--encre);
}

/* ---------- utilitaires ---------- */

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

.wrap.large {
  max-width: 1560px;
}

.surtitre {
  display: block;
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--or);
  font-weight: 400;
  margin: 0 0 1.2rem;
}

.filet {
  width: 58px;
  height: 1px;
  background: var(--or);
  border: 0;
  margin: 1.5rem 0;
}

.doux {
  color: var(--texte-doux);
}

.centre {
  text-align: center;
}

/* ---------- boutons ---------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 1.1rem 2.4rem;
  border: 1px solid var(--or);
  background: var(--or);
  color: #fff;
  cursor: pointer;
  border-radius: 999px;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--t), border-color var(--t), transform var(--t);
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--brun);
  transform: translateY(101%);
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.btn:hover::before {
  transform: translateY(0);
}

.btn:hover {
  border-color: var(--brun);
}

.btn:active {
  transform: scale(0.97);
}

.btn.vide {
  background: transparent;
  color: var(--encre);
  border-color: var(--sable-2);
}

.btn.vide::before {
  background: var(--or);
}

.btn.vide:hover {
  color: #fff;
  border-color: var(--or);
}

.btn.clair {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
  backdrop-filter: blur(6px);
}

.btn.clair::before {
  background: #fff;
}

.btn.clair:hover {
  color: var(--encre);
  border-color: #fff;
}

/* ---------- entete ---------- */

.entete {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  background: transparent;
  transform: translateY(0);
  transition: background var(--t), box-shadow var(--t), transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.entete.figee {
  background: rgba(250, 246, 239, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 var(--ligne);
}

.entete.cachee {
  transform: translateY(-100%);
}

.entete .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 86px;
}

.marque {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--serif);
  font-size: 1.6rem;
  letter-spacing: 0.05em;
  line-height: 1;
  color: #fff;
  transition: color var(--t);
}

.entete.figee .marque {
  color: var(--encre);
}

.marque em {
  font-style: italic;
  color: var(--or-clair);
  transition: color var(--t);
}

.entete.figee .marque em {
  color: var(--or);
}

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

.nav a {
  position: relative;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
  padding: 0.35rem 0;
  transition: color var(--t);
}

.entete.figee .nav a {
  color: var(--texte);
}

.nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0;
  background: var(--or-clair);
  transition: width var(--t);
}

.entete.figee .nav a::after {
  background: var(--or);
}

.nav a:hover,
.nav a.actif {
  color: #fff;
}

.entete.figee .nav a:hover,
.entete.figee .nav a.actif {
  color: var(--encre);
}

.nav a:hover::after,
.nav a.actif::after {
  width: 100%;
}

.burger {
  display: none;
  width: 44px;
  height: 44px;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  cursor: pointer;
  position: relative;
}

.entete.figee .burger {
  border-color: var(--sable-2);
}

.burger span {
  position: absolute;
  left: 12px;
  right: 12px;
  height: 1px;
  background: #fff;
  transition: transform var(--t), opacity var(--t), background var(--t);
}

.entete.figee .burger span {
  background: var(--encre);
}

.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 26px; }

.burger.ouvert span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger.ouvert span:nth-child(2) { opacity: 0; }
.burger.ouvert span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: 160px 0 clamp(3.5rem, 8vw, 6rem);
  overflow: hidden;
  color: #fff;
}

.hero .fond,
.banniere .fond,
.bande-image .fond {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero .fond img,
.banniere .fond img,
.bande-image .fond img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero .fond img {
  transform: scale(1.08);
}

.hero .voile {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(52, 40, 29, 0.5) 0%, rgba(52, 40, 29, 0.22) 34%, rgba(52, 40, 29, 0.88) 100%),
    linear-gradient(90deg, rgba(52, 40, 29, 0.82) 0%, rgba(52, 40, 29, 0.3) 46%, transparent 72%);
}

.hero .wrap {
  position: relative;
  z-index: 2;
}

.hero-grille {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: end;
}

.hero h1 {
  color: #fff;
  font-size: clamp(2.9rem, 7.4vw, 6.4rem);
  line-height: 1;
  margin: 0 0 1.5rem;
  text-shadow: 0 2px 30px rgba(47, 39, 32, 0.35);
}

.hero h1 span,
.hero h1 em {
  display: block;
}

.hero h1 em {
  font-style: italic;
  color: var(--or-clair);
  margin-left: clamp(0px, 4vw, 78px);
}

.hero .surtitre,
.banniere .surtitre,
.bande-image .surtitre {
  color: var(--or-clair);
}

.hero .chapeau {
  font-size: clamp(1rem, 1.7vw, 1.15rem);
  color: rgba(255, 255, 255, 0.9);
  max-width: 46ch;
  margin-bottom: 2.4rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.supervision {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 0.5rem 1.2rem;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 1.6rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(6px);
}

.supervision .pastille {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--or-clair);
}

.hero-carte {
  background: rgba(250, 246, 239, 0.95);
  backdrop-filter: blur(14px);
  border-radius: var(--r);
  padding: 2rem 2rem 1.5rem;
  box-shadow: var(--ombre);
  color: var(--texte);
}

.hero-carte h4 {
  font-family: var(--sans);
  font-size: 0.66rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 1.1rem;
}

.hero-carte ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hero-carte li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.72rem 0;
  border-bottom: 1px solid var(--ligne);
  font-size: 0.88rem;
}

.hero-carte li:last-child {
  border-bottom: 0;
}

.hero-carte li b {
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 400;
  color: var(--encre);
}

.hero-bas {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.3rem;
  z-index: 3;
  pointer-events: none;
}

.hero-bas .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.67rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.souris {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.souris i {
  display: block;
  width: 48px;
  height: 1px;
  background: rgba(255, 255, 255, 0.7);
  transform-origin: left;
  animation: fil 2.4s ease-in-out infinite;
}

@keyframes fil {
  0%, 100% { transform: scaleX(0.25); opacity: 0.45; }
  50%      { transform: scaleX(1); opacity: 1; }
}

/* ---------- banniere des pages internes ---------- */

.banniere {
  position: relative;
  min-height: clamp(400px, 58vh, 640px);
  display: flex;
  align-items: flex-end;
  padding: 175px 0 clamp(2.5rem, 6vw, 4.5rem);
  overflow: hidden;
  color: #fff;
}

.banniere .voile {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(52, 40, 29, 0.52), rgba(52, 40, 29, 0.25) 42%, rgba(52, 40, 29, 0.88)),
    linear-gradient(90deg, rgba(52, 40, 29, 0.78), rgba(52, 40, 29, 0.28) 48%, transparent 74%);
}

.banniere .wrap {
  position: relative;
  z-index: 2;
}

.banniere h1 {
  color: #fff;
  font-size: clamp(2.5rem, 6.6vw, 5rem);
}

.banniere p {
  color: rgba(255, 255, 255, 0.9);
  max-width: 58ch;
  margin-top: 1.2rem;
}

.fil {
  font-size: 0.67rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 1.4rem;
}

.fil a:hover {
  color: var(--or-clair);
}

.puces-infos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 2rem;
}

.puces-infos span {
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  padding: 0.5rem 1.15rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(6px);
}

/* ---------- sections ---------- */

.section {
  padding: clamp(4.5rem, 10vw, 9rem) 0;
  position: relative;
}

.section.sable {
  background: var(--creme-2);
}

.section.serre {
  padding-top: clamp(3rem, 6vw, 5rem);
}

.section-tete {
  max-width: 640px;
  margin-bottom: clamp(2.6rem, 6vw, 4.5rem);
}

.section-tete.centre {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-tete h2 {
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  margin-bottom: 1.1rem;
}

.section-tete p {
  margin: 0;
}

/* ---------- presentation asymetrique ---------- */

.duo {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: center;
}

.duo .visuel {
  position: relative;
}

.duo .visuel > img {
  width: 100%;
  height: clamp(340px, 52vw, 620px);
  object-fit: cover;
  border-radius: var(--r);
}

.duo .vignette {
  position: absolute;
  right: -7%;
  bottom: -8%;
  width: 46%;
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--ombre);
  border: 9px solid var(--creme);
}

.duo .vignette img {
  width: 100%;
  height: clamp(150px, 20vw, 240px);
  object-fit: cover;
}

.duo .texte h2 {
  font-size: clamp(2rem, 4.4vw, 3.3rem);
  margin-bottom: 1.2rem;
}

.signature {
  display: block;
  margin-top: 1.6rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.45rem;
  color: var(--or);
}

/* ---------- chiffres ---------- */

.chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.5rem 2rem;
  margin-top: 2.6rem;
  padding-top: 2.2rem;
  border-top: 1px solid var(--ligne);
}

.chiffre .valeur {
  display: block;
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  line-height: 1;
  color: var(--or);
}

.chiffre .etiquette {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.67rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--texte-doux);
}

/* ---------- etablissements en blocs alternes ---------- */

.maisons {
  display: flex;
  flex-direction: column;
  gap: clamp(4rem, 9vw, 8.5rem);
}

.maison {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(1.8rem, 5vw, 4.5rem);
  align-items: center;
}

.maison:nth-child(even) .visuel { order: 2; }
.maison:nth-child(even) .texte  { order: 1; }
.maison:nth-child(odd) .texte   { padding-top: clamp(0px, 4vw, 64px); }
.maison:nth-child(even) .texte  { padding-bottom: clamp(0px, 4vw, 64px); }

.maison .visuel {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
}

.maison .visuel img {
  width: 100%;
  height: clamp(300px, 44vw, 560px);
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.maison:hover .visuel img {
  transform: scale(1.055);
}

.maison .genre {
  font-size: 0.67rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 0.9rem;
}

.maison h3 {
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  margin-bottom: 1rem;
}

.maison p {
  max-width: 46ch;
}

.maison .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.4rem 0 1.9rem;
}

.maison .meta span {
  border: 1px solid var(--ligne);
  border-radius: 999px;
  padding: 0.4rem 0.95rem;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--texte-doux);
  background: #fff;
}

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--encre);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--or);
  transition: gap var(--t), color var(--t);
}

.lien-fleche:hover {
  gap: 1.2rem;
  color: var(--or);
}

/* ---------- galerie mosaique ---------- */

.mosaique {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(130px, 15vw, 215px);
  gap: clamp(0.6rem, 1.2vw, 1rem);
}

.mosaique figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r);
  position: relative;
}

.mosaique img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mosaique figure:hover img {
  transform: scale(1.07);
}

.mosaique .m1 { grid-column: span 2; grid-row: span 2; }
.mosaique .m3 { grid-column: span 1; grid-row: span 2; }
.mosaique .m5 { grid-column: span 2; grid-row: span 1; }

/* ---------- bandeau defilant ---------- */

.ruban {
  overflow: hidden;
  background: var(--sable);
  padding: 1.1rem 0;
}

.ruban .piste-ruban {
  display: flex;
  width: max-content;
  animation: defile 38s linear infinite;
}

.ruban:hover .piste-ruban {
  animation-play-state: paused;
}

@keyframes defile {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.ruban span {
  display: inline-flex;
  align-items: center;
  gap: 2.2rem;
  padding-right: 2.2rem;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.4vw, 1.8rem);
  color: var(--brun);
  white-space: nowrap;
}

.ruban span b {
  color: var(--or);
  font-weight: 400;
  font-size: 0.72em;
}

/* ---------- bande image pleine largeur ---------- */

.bande-image {
  position: relative;
  padding: clamp(5rem, 12vw, 9rem) 0;
  overflow: hidden;
  color: #fff;
}

.bande-image .voile {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(63, 49, 36, 0.9), rgba(63, 49, 36, 0.4) 72%);
}

.bande-image .wrap {
  position: relative;
  z-index: 2;
}

.bande-image h2 {
  color: #fff;
  font-size: clamp(2rem, 5vw, 3.4rem);
  margin-bottom: 1.2rem;
}

.bande-image p {
  color: rgba(255, 255, 255, 0.9);
}

.bloc-livraison {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

/* ---------- tarifs ---------- */

.tarifs {
  background: var(--creme);
  border-radius: var(--r);
  padding: 0.8rem 1.8rem;
  box-shadow: var(--ombre);
}

.tarifs .ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px dashed var(--ligne);
  transition: padding-left var(--t);
}

.tarifs .ligne:last-child {
  border-bottom: 0;
}

.tarifs .ligne:hover {
  padding-left: 0.6rem;
}

.tarifs .km {
  color: var(--texte);
  font-size: 0.92rem;
}

.tarifs .prix {
  display: inline-block;
  font-family: var(--serif);
  font-size: 1.35rem;
  color: var(--or);
  white-space: nowrap;
  transition: transform var(--t);
}

.tarifs .ligne:hover .prix {
  transform: scale(1.07);
}

/* ---------- listes d'infos ---------- */

.infos-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.infos-liste li {
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--ligne);
}

.bande-image .infos-liste li {
  border-bottom-color: rgba(255, 255, 255, 0.2);
}

.infos-liste li:last-child {
  border-bottom: 0;
}

.infos-liste strong {
  display: block;
  font-weight: 400;
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--encre);
  margin-bottom: 0.2rem;
}

.bande-image .infos-liste strong {
  color: #fff;
}

.infos-liste span {
  font-size: 0.92rem;
  opacity: 0.9;
}

/* ---------- atouts ---------- */

.grille-atouts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(1.8rem, 4vw, 3.4rem);
}

.atout {
  padding-top: 1.4rem;
  border-top: 1px solid var(--or);
}

.atout .num {
  display: block;
  font-size: 0.67rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 0.9rem;
}

.atout h3 {
  font-size: 1.6rem;
  margin-bottom: 0.6rem;
  transition: color var(--t);
}

.atout:hover h3 {
  color: var(--or);
}

.atout p {
  margin: 0;
  font-size: 0.94rem;
}

/* ---------- citation ---------- */

.citation {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}

.citation blockquote {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3.6vw, 2.5rem);
  line-height: 1.32;
  color: var(--encre);
}

.citation .source {
  display: block;
  margin-top: 1.6rem;
  font-size: 0.69rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--or);
}

/* ---------- carte / menu ---------- */

.menu-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(250, 246, 239, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ligne);
}

.menu-nav .piste {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.9rem 0;
  scrollbar-width: none;
}

.menu-nav .piste::-webkit-scrollbar {
  display: none;
}

.menu-nav button {
  flex: 0 0 auto;
  background: #fff;
  border: 1px solid var(--ligne);
  border-radius: 999px;
  color: var(--texte);
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.6rem 1.25rem;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--t), border-color var(--t), background var(--t);
}

.menu-nav button:hover {
  border-color: var(--or);
  color: var(--encre);
}

.menu-nav button.actif {
  background: var(--or);
  border-color: var(--or);
  color: #fff;
}

.groupe {
  padding: clamp(3.5rem, 8vw, 6.5rem) 0 0;
}

.titre-groupe {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2.8rem;
}

.titre-groupe h2 {
  font-size: clamp(2rem, 5vw, 3.2rem);
  white-space: nowrap;
}

.titre-groupe .trait {
  flex: 1;
  height: 1px;
  background: var(--ligne);
  transform: scaleX(0);
  transform-origin: left;
}

.titre-groupe.vu .trait {
  animation: trace 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s forwards;
}

@keyframes trace {
  to { transform: scaleX(1); }
}

.rubrique {
  margin-bottom: 3.6rem;
}

.rubrique h3 {
  position: relative;
  display: inline-block;
  font-size: 1.7rem;
  color: var(--or);
  margin-bottom: 0.4rem;
  padding-bottom: 0.3rem;
}

.rubrique h3::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, var(--or), transparent);
  transform: scaleX(0);
  transform-origin: left;
}

.rubrique.vu h3::after {
  animation: trace 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s forwards;
}

.rubrique .note {
  color: var(--texte-doux);
  font-size: 0.88rem;
  font-style: italic;
  margin-bottom: 1.5rem;
}

.plats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 0 3.5rem;
}

.plat {
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--ligne);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color var(--t), padding-left var(--t);
}

.rubrique.vu .plat {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i, 0) * 55ms);
}

.plat:hover {
  border-color: var(--or);
  padding-left: 0.6rem;
}

.plat .haut {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
}

.plat .nom {
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--encre);
  transition: color var(--t);
}

.plat:hover .nom {
  color: var(--or);
}

.plat .pointille {
  flex: 1;
  border-bottom: 1px dotted var(--sable-2);
  transform: translateY(-4px);
  min-width: 18px;
}

.plat .prix {
  font-family: var(--serif);
  font-size: 1.22rem;
  color: var(--or);
  white-space: nowrap;
}

.plat .prix.vide {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texte-doux);
}

.plat .desc {
  color: var(--texte-doux);
  font-size: 0.88rem;
  line-height: 1.55;
  margin: 0.3rem 0 0;
  max-width: 52ch;
}

/* ---------- FAQ ---------- */

.faq {
  max-width: 880px;
}

.question {
  border-bottom: 1px solid var(--ligne);
}

.question > button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background: none;
  border: 0;
  color: var(--encre);
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  text-align: left;
  padding: 1.7rem 0;
  cursor: pointer;
  transition: color var(--t);
}

.question > button:hover {
  color: var(--or);
}

.question .signe {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  position: relative;
}

.question .signe::before,
.question .signe::after {
  content: '';
  position: absolute;
  background: var(--or);
  transition: transform var(--t), opacity var(--t);
}

.question .signe::before {
  left: 0;
  right: 0;
  top: 10px;
  height: 1px;
}

.question .signe::after {
  top: 0;
  bottom: 0;
  left: 10px;
  width: 1px;
}

.question.ouverte .signe::after {
  transform: scaleY(0);
  opacity: 0;
}

.question .reponse {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--t);
}

.question .reponse p {
  padding: 0 0 1.8rem;
  margin: 0;
  max-width: 64ch;
}

/* ---------- contact ---------- */

.grille-contacts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.4rem;
}

.fiche {
  position: relative;
  background: #fff;
  border: 1px solid var(--ligne);
  border-radius: var(--r);
  padding: 2.2rem 2rem;
  overflow: hidden;
  transition: transform var(--t), box-shadow var(--t);
}

.fiche:hover {
  transform: translateY(-6px);
  box-shadow: var(--ombre);
}

.fiche::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--or);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.fiche:hover::after {
  transform: scaleX(1);
}

.fiche h3 {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 1.2rem;
}

.fiche address {
  font-style: normal;
  font-size: 0.94rem;
  margin-bottom: 1rem;
}

.fiche a.tel {
  font-family: var(--serif);
  font-size: 1.4rem;
  color: var(--encre);
  transition: color var(--t);
}

.fiche a.tel:hover {
  color: var(--or);
}

.fiche .insta {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.69rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texte-doux);
  border-bottom: 1px solid var(--ligne);
  padding-bottom: 2px;
  transition: color var(--t), border-color var(--t);
}

.fiche .insta:hover {
  color: var(--or);
  border-color: var(--or);
}

.formulaire {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.3rem;
  max-width: 780px;
}

.champ {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.champ.large {
  grid-column: 1 / -1;
}

.champ label {
  font-size: 0.67rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--texte-doux);
}

.champ input,
.champ textarea {
  background: #fff;
  border: 1px solid var(--ligne);
  border-radius: var(--r);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 0.96rem;
  font-weight: 300;
  padding: 0.95rem 1.05rem;
  transition: border-color var(--t), box-shadow var(--t);
}

.champ textarea {
  min-height: 155px;
  resize: vertical;
}

.champ input:focus,
.champ textarea:focus {
  outline: none;
  border-color: var(--or);
  box-shadow: 0 0 0 3px var(--or-pale);
}

.message-envoi {
  grid-column: 1 / -1;
  color: var(--or);
  font-size: 0.9rem;
  min-height: 1.4rem;
}

/* ---------- traiteur ---------- */

.appel {
  background: #fff;
  border: 1px solid var(--ligne);
  border-radius: var(--r);
  padding: clamp(2.4rem, 6vw, 4.5rem);
  text-align: center;
  box-shadow: var(--ombre);
}

.appel .numero {
  display: inline-block;
  font-family: var(--serif);
  font-size: clamp(2rem, 6vw, 3.4rem);
  color: var(--or);
  margin: 0.5rem 0 1.4rem;
  transition: color var(--t);
}

.appel .numero:hover {
  color: var(--terre);
}

.prestations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.6rem;
  margin-top: 3rem;
  text-align: left;
}

.prestation {
  border-top: 1px solid var(--or);
  padding-top: 1.2rem;
  transition: transform var(--t);
}

.prestation:hover {
  transform: translateX(6px);
}

.prestation h4 {
  font-size: 1.35rem;
  margin-bottom: 0.4rem;
}

.prestation p {
  color: var(--texte-doux);
  font-size: 0.9rem;
  margin: 0;
}

/* ---------- bande d'appel ---------- */

.bande {
  padding: clamp(3.5rem, 8vw, 6rem) 0;
  background: var(--creme-2);
  text-align: center;
}

.bande h2 {
  font-size: clamp(1.9rem, 4.6vw, 3rem);
  margin-bottom: 1.6rem;
}

.bande .btn {
  margin: 0.3rem;
}

/* ---------- separateur ---------- */

.arabesque {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  padding: 0.5rem 0;
  color: var(--or);
}

.arabesque i {
  display: block;
  height: 1px;
  width: min(180px, 24vw);
  background: linear-gradient(90deg, transparent, var(--or));
}

.arabesque i:last-child {
  background: linear-gradient(90deg, var(--or), transparent);
}

.arabesque svg {
  width: 26px;
  height: 26px;
  animation: tourne 26s linear infinite;
}

@keyframes tourne {
  to { transform: rotate(360deg); }
}

/* ---------- pied de page ---------- */

.pied {
  background: var(--brun);
  color: rgba(255, 255, 255, 0.78);
  padding: clamp(3.5rem, 8vw, 6rem) 0 2rem;
}

.pied-grille {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
}

.pied .marque {
  color: #fff;
}

.pied .marque em {
  color: var(--or-clair);
}

.pied h4 {
  font-family: var(--sans);
  font-size: 0.67rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--or-clair);
  margin-bottom: 1.3rem;
}

.pied p {
  font-size: 0.92rem;
  max-width: 42ch;
  color: rgba(255, 255, 255, 0.7);
}

.pied ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pied li {
  margin-bottom: 0.7rem;
  font-size: 0.92rem;
}

.pied li a {
  transition: color var(--t);
}

.pied li a:hover {
  color: var(--or-clair);
}

.pied .tarif-pied {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: rgba(255, 255, 255, 0.66);
}

.pied-bas {
  margin-top: 3rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.6);
}

.pied-bas .maj {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.67rem;
}

/* ---------- ecran de chargement ---------- */

.chargeur {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  background: var(--creme);
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.chargeur.parti {
  opacity: 0;
  visibility: hidden;
}

.chargeur-marque {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  letter-spacing: 0.05em;
  color: var(--encre);
}

.chargeur-marque em {
  font-style: italic;
  color: var(--or);
}

.chargeur-barre {
  width: 190px;
  height: 1px;
  background: var(--ligne);
  overflow: hidden;
}

.chargeur-barre span {
  display: block;
  height: 100%;
  width: 40%;
  background: linear-gradient(90deg, transparent, var(--or), transparent);
  animation: defile-barre 1.1s ease-in-out infinite;
}

@keyframes defile-barre {
  from { transform: translateX(-100%); }
  to   { transform: translateX(350%); }
}

/* ---------- progression et retour en haut ---------- */

.progression {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  z-index: 90;
  background: linear-gradient(90deg, var(--or), var(--or-clair));
  transition: width 0.12s linear;
}

.remonter {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 80;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid var(--ligne);
  background: #fff;
  color: var(--or);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  box-shadow: var(--ombre);
  transition: opacity var(--t), visibility var(--t), transform var(--t), border-color var(--t);
}

.remonter.visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.remonter:hover {
  border-color: var(--or);
  transform: translateY(-4px);
}

.remonter::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 53%;
  width: 9px;
  height: 9px;
  border-left: 1px solid currentColor;
  border-top: 1px solid currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}

/* ---------- apparitions ---------- */

.reveal,
.reveal-l,
.reveal-zoom {
  opacity: 0;
}

.reveal {
  transform: translateY(28px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.reveal-l {
  transform: translateX(-36px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.reveal-zoom {
  transform: scale(0.96);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.reveal.vu,
.reveal-l.vu,
.reveal-zoom.vu {
  opacity: 1;
  transform: none;
}

.devoile img {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.2s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.devoile.vu img {
  clip-path: inset(0 0 0 0);
}

/* ---------- entree du hero ---------- */

.hero-carte {
  opacity: 0;
}

body.pret .hero-carte {
  animation: monte 1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.75s both;
}

@keyframes monte {
  from { opacity: 0; transform: translateY(34px); }
  to   { opacity: 1; transform: none; }
}

.hero h1 span,
.hero h1 em,
.hero .surtitre,
.hero .supervision,
.hero .chapeau,
.hero .hero-actions {
  opacity: 0;
}

body.pret .hero .supervision { animation: monte 0.9s ease 0.05s both; }
body.pret .hero .surtitre    { animation: monte 0.9s ease 0.14s both; }
body.pret .hero h1 span,
body.pret .hero h1 em        { animation: monte 1s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
body.pret .hero h1 > *:nth-child(1) { animation-delay: 0.24s; }
body.pret .hero h1 > *:nth-child(2) { animation-delay: 0.38s; }
body.pret .hero h1 > *:nth-child(3) { animation-delay: 0.52s; }
body.pret .hero .chapeau      { animation: monte 0.9s ease 0.66s both; }
body.pret .hero .hero-actions { animation: monte 0.9s ease 0.78s both; }

body.pret .hero .fond img,
body.pret .banniere .fond img {
  animation: zoom-fond 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes zoom-fond {
  from { transform: scale(1.16); }
  to   { transform: scale(1.06); }
}

/* ---------- responsive ---------- */

@media (max-width: 1000px) {
  .hero-grille,
  .duo,
  .maison,
  .bloc-livraison,
  .pied-grille {
    grid-template-columns: 1fr;
  }

  .maison:nth-child(even) .visuel,
  .maison:nth-child(even) .texte {
    order: initial;
  }

  .maison:nth-child(odd) .texte,
  .maison:nth-child(even) .texte {
    padding: 0;
  }

  .duo .vignette {
    right: 0;
    bottom: -6%;
    width: 40%;
  }

  .plats {
    grid-template-columns: 1fr;
  }

  .mosaique {
    grid-template-columns: repeat(2, 1fr);
  }

  .mosaique .m1 { grid-column: span 2; grid-row: span 2; }
  .mosaique .m3 { grid-row: span 1; }
  .mosaique .m5 { grid-column: span 2; }
}

/* Seuil du menu deroulant releve de 780 a 1050 px : la barre compte huit
   entrees depuis l'ajout de « Fidelite », elle debordait des 820 px. */
@media (max-width: 1050px) {
  .burger {
    display: block;
  }

  .nav {
    position: fixed;
    inset: 86px 0 auto 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--creme);
    border-bottom: 1px solid var(--ligne);
    padding: 0 var(--pad);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--t);
    box-shadow: var(--ombre);
  }

  .nav.ouverte {
    max-height: 75vh;
  }

  .nav a,
  .entete:not(.figee) .nav a {
    width: 100%;
    padding: 1.15rem 0;
    border-bottom: 1px solid var(--ligne);
    font-size: 0.8rem;
    color: var(--texte);
  }

  .nav a::after {
    display: none;
  }

  .formulaire {
    grid-template-columns: 1fr;
  }

  .hero-bas .wrap {
    justify-content: center;
  }

  .souris {
    display: none;
  }
}

@media (max-width: 480px) {
  .hero-actions .btn,
  .bande .btn {
    width: 100%;
    justify-content: center;
  }

  .duo .vignette {
    display: none;
  }
}

/* ---------- mouvement reduit ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal,
  .reveal-l,
  .reveal-zoom,
  .hero-carte,
  .hero h1 span,
  .hero h1 em,
  .hero .surtitre,
  .hero .supervision,
  .hero .chapeau,
  .hero .hero-actions,
  .plat {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }

  .devoile img {
    clip-path: none;
  }

  .ruban .piste-ruban,
  .arabesque svg,
  .souris i,
  .hero .fond img,
  .banniere .fond img {
    animation: none !important;
  }
}

/* =============================================================
   COMMANDE PAR WHATSAPP
   Le client compose sa commande depuis la carte, elle part sur
   le WhatsApp du restaurant. Un panier par etablissement.
   ============================================================= */

/* ---- bouton + sur chaque plat ---- */
.plat .ajout {
  flex: none;
  margin-left: 0.9rem;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--ligne);
  background: transparent;
  color: var(--brun);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t), color var(--t), border-color var(--t), transform var(--t);
}

.plat .ajout:hover,
.plat .ajout:focus-visible {
  background: var(--brun);
  border-color: var(--brun);
  color: var(--creme);
}

@keyframes ajoutFait {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}

.plat .ajout.fait { animation: ajoutFait 0.42s cubic-bezier(0.22, 0.61, 0.36, 1); }

/* ---- bouton flottant ---- */
.panier__bouton {
  position: fixed;
  right: clamp(1rem, 3vw, 2.2rem);
  bottom: clamp(1rem, 3vw, 2.2rem);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.95rem 1.35rem;
  border: 0;
  border-radius: 999px;
  background: var(--brun);
  color: var(--creme);
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 22px 46px -22px rgba(47, 39, 32, 0.75);
  transform: translateY(18px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 0.5s var(--t), background var(--t);
}

/* Visible des l'arrivee sur la carte : c'est lui qui annonce qu'on peut
   commander en ligne. Il se remplit ensuite au fil des ajouts. */
.panier .panier__bouton {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}

.panier--plein .panier__bouton {
  background: var(--or);
  color: var(--encre);
}

.panier--plein .panier__bouton:hover { background: var(--brun); color: var(--creme); }

.panier__bouton:hover { background: var(--encre); }

.panier__compte {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--or);
  color: var(--encre);
  font-size: 0.7rem;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@keyframes pastilleBat {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.4); }
  100% { transform: scale(1); }
}

.panier__compte.bat { animation: pastilleBat 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); }

/* ---- voile et tiroir ---- */
.panier__voile {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(47, 39, 32, 0.5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.38s var(--t);
}

.panier--ouvert .panier__voile { opacity: 1; }

.panier__tiroir {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 96;
  width: min(430px, 100vw);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--creme);
  box-shadow: -30px 0 70px -40px rgba(47, 39, 32, 0.7);
  transform: translateX(100%);
  transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.panier--ouvert .panier__tiroir { transform: none; }

.panier__tete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.6rem 1.5rem 1.2rem;
  border-bottom: 1px solid var(--ligne);
}

.panier__surtitre {
  display: block;
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 0.5rem;
}

.panier__tete h2 { font-size: 1.7rem; margin: 0; }

.panier__x {
  border: 0;
  background: none;
  color: var(--texte);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.2rem;
  transition: color var(--t);
}

.panier__x:hover { color: var(--brun); }

.panier__corps {
  flex: 1;
  overflow-y: auto;
  padding: 0.6rem 1.5rem;
}

.panier__vide {
  color: var(--texte-doux);
  font-size: 0.9rem;
  padding: 2.2rem 0;
}

.panier__ligne {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--ligne);
}

.panier__nom {
  font-family: var(--serif);
  font-size: 1.02rem;
  color: var(--brun);
  line-height: 1.3;
}

.panier__nom span {
  display: block;
  font-family: var(--sans);
  font-size: 0.72rem;
  color: var(--texte-doux);
  margin-top: 0.2rem;
}

.panier__qte {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.panier__qte button {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--ligne);
  background: transparent;
  color: var(--brun);
  cursor: pointer;
  line-height: 1;
  transition: background var(--t), color var(--t);
}

.panier__qte button:hover { background: var(--brun); color: var(--creme); border-color: var(--brun); }

.panier__qte span {
  min-width: 18px;
  text-align: center;
  font-family: var(--sans);
  font-size: 0.85rem;
}

.panier__sous {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--brun);
  white-space: nowrap;
}

.panier__pied {
  padding: 1.2rem 1.5rem 1.5rem;
  border-top: 1px solid var(--ligne);
  background: var(--creme-2);
}

.panier__champ span {
  display: block;
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--texte-doux);
  margin-bottom: 0.45rem;
}

.panier__champ textarea {
  width: 100%;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--ligne);
  border-radius: var(--r);
  background: var(--creme);
  font-family: var(--sans);
  font-size: 0.86rem;
  color: var(--brun);
  resize: vertical;
}

.panier__champ textarea:focus {
  outline: none;
  border-color: var(--or);
}

.panier__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 1rem 0 0.9rem;
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--texte-doux);
}

.panier__total strong {
  font-family: var(--serif);
  font-size: 1.5rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--brun);
}

.panier__envoi { width: 100%; justify-content: center; }

.panier__envoi[disabled] {
  opacity: 0.45;
  pointer-events: none;
}

.panier__vider {
  display: block;
  width: 100%;
  margin-top: 0.7rem;
  border: 0;
  background: none;
  color: var(--texte-doux);
  font-family: var(--sans);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0.5rem;
  transition: color var(--t);
}

.panier__vider:hover { color: var(--terre); }

.panier__note {
  margin: 0.9rem 0 0;
  font-size: 0.72rem;
  line-height: 1.55;
  color: var(--texte-doux);
}

.panier__note strong { color: var(--brun); }

@media (max-width: 520px) {
  .panier__bouton { left: clamp(1rem, 4vw, 2rem); right: clamp(1rem, 4vw, 2rem); justify-content: center; }
  .panier__tiroir { width: 100vw; }
}

@media (prefers-reduced-motion: reduce) {
  .panier__bouton, .panier__tiroir, .panier__voile { transition: none; }
  .plat .ajout.fait, .panier__compte.bat { animation: none; }
}

/* ---- liens WhatsApp directs (accueil et fiches contact) ---- */
.actions-maison {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  flex-wrap: wrap;
}

.lien-wa {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--texte);
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--ligne);
  border-radius: 999px;
  transition: background var(--t), color var(--t), border-color var(--t);
}

.lien-wa:hover {
  background: var(--brun);
  border-color: var(--brun);
  color: var(--creme);
}

.fiche .lien-wa {
  margin: 0.7rem 0.6rem 0 0;
}

/* ---- appel a la commande, en haut de chaque carte ---- */
.banniere-actions {
  display: flex;
  align-items: center;
  gap: 1.3rem;
  flex-wrap: wrap;
  margin-top: 1.8rem;
}

.panier-appel {
  background: #25d366;
  border-color: #25d366;
  color: #08331a;
}

.panier-appel::before { background: #fff; }

.panier-appel:hover {
  color: #08331a;
  border-color: #fff;
}

.panier-appel__compte {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: #08331a;
  color: #fff;
  font-size: 0.7rem;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.panier-appel__aide {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.82);
  max-width: 30ch;
  line-height: 1.5;
}

.panier-appel__aide b { color: #fff; font-weight: 400; }

@media (max-width: 620px) {
  .banniere-actions { gap: 0.9rem; }
  .panier-appel { width: 100%; justify-content: center; }
  .panier-appel__aide { max-width: none; }
}

/* La pastille de comptage disparait quand la commande est vide : `hidden`
   seul ne suffit pas face a un `display:inline-flex`. */
.panier__compte[hidden],
.panier-appel__compte[hidden] { display: none !important; }

/* Sur telephone le bouton flottant occupe toute la largeur : on degage la
   hauteur qu'il recouvre en bas de page. */
@media (max-width: 520px) {
  body:has(.panier) { padding-bottom: 92px; }
}

/* =============================================================
   AVIS
   ============================================================= */
.avis { background: var(--creme-2); }

.avis__grille {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 1.8vw, 1.8rem);
}

@media (max-width: 1000px) { .avis__grille { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .avis__grille { grid-template-columns: 1fr; } }

.avis__carte {
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 2.4vw, 2.2rem);
  background: var(--creme);
  border: 1px solid var(--ligne);
  border-radius: var(--r);
  transition: transform var(--t), box-shadow var(--t);
}

.avis__carte:hover {
  transform: translateY(-6px);
  box-shadow: var(--ombre);
}

.avis__carte h3 {
  font-size: 1.35rem;
  margin-bottom: 1rem;
}

.avis__etoiles {
  display: inline-flex;
  gap: 0.18rem;
  font-size: 0.95rem;
  color: var(--sable-2);
  margin-bottom: 0.7rem;
}

.avis__etoiles .pleine { color: var(--or); }

.avis__note {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin: 0 0 0.3rem;
  font-family: var(--serif);
  color: var(--brun);
}

.avis__note strong { font-size: 2.4rem; font-weight: 400; line-height: 1; }
.avis__note span { font-size: 0.95rem; color: var(--texte-doux); }

.avis__source,
.avis__vierge {
  margin: 0;
  font-size: 0.82rem;
  color: var(--texte-doux);
  line-height: 1.6;
}

.avis__vierge { margin-bottom: 0.4rem; }

.avis__lien {
  margin-top: auto;
  padding-top: 1.4rem;
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--or);
  transition: color var(--t);
}

.avis__lien:hover { color: var(--brun); }

.avis__releve {
  margin: clamp(1.6rem, 3vw, 2.4rem) 0 0;
  font-size: 0.74rem;
  color: var(--texte-doux);
}

/* =============================================================
   POPUP D'AVIS
   ============================================================= */
.popavis {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  pointer-events: none;
}

.popavis__voile {
  position: absolute;
  inset: 0;
  background: rgba(47, 39, 32, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.42s var(--t);
}

.popavis__boite {
  position: relative;
  width: min(430px, 100%);
  padding: clamp(2rem, 4vw, 2.8rem);
  text-align: center;
  background: var(--creme);
  border-radius: var(--r);
  box-shadow: 0 50px 100px -50px rgba(47, 39, 32, 0.8);
  opacity: 0;
  transform: translateY(22px) scale(0.98);
  transition: opacity 0.45s var(--t), transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.popavis--ouvert { pointer-events: auto; }
.popavis--ouvert .popavis__voile { opacity: 1; }
.popavis--ouvert .popavis__boite { opacity: 1; transform: none; }

.popavis__x {
  position: absolute;
  top: 0.7rem;
  right: 0.9rem;
  border: 0;
  background: none;
  color: var(--texte-doux);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: color var(--t);
}

.popavis__x:hover { color: var(--brun); }

.popavis__surtitre {
  display: block;
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 0.8rem;
}

.popavis__boite h2 { font-size: clamp(1.5rem, 3vw, 1.9rem); margin-bottom: 0.9rem; }

.popavis__boite .avis__etoiles { justify-content: center; margin-bottom: 1rem; }

.popavis__boite p {
  font-size: 0.9rem;
  color: var(--texte);
  margin-bottom: 1.6rem;
}

.popavis__go { width: 100%; justify-content: center; }

.popavis__tard {
  display: block;
  width: 100%;
  margin-top: 0.8rem;
  border: 0;
  background: none;
  color: var(--texte-doux);
  font-family: var(--sans);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0.5rem;
  transition: color var(--t);
}

.popavis__tard:hover { color: var(--brun); }

@media (prefers-reduced-motion: reduce) {
  .popavis__voile, .popavis__boite { transition: none; }
}

/* =============================================================
   CARTE DE FIDELITE
   ============================================================= */
.fidelite { background: var(--creme); }

.fid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

@media (max-width: 900px) {
  .fid { grid-template-columns: 1fr; gap: 2.6rem; }
}

/* ---- la carte ---- */
.fid__carte {
  position: relative;
  width: min(430px, 100%);
  aspect-ratio: 1.6 / 1;
  padding: clamp(1.4rem, 2.6vw, 2rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  border-radius: 14px;
  color: var(--or-pale);
  background: linear-gradient(148deg, #3a2d21 0%, var(--encre) 44%, #17120d 100%);
  box-shadow: 0 44px 80px -40px rgba(47, 39, 32, 0.85);
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.fid__carte:hover { transform: translateY(-8px) rotate(-0.6deg); }

.fid__lueur {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 84% 6%, rgba(207, 162, 97, 0.28) 0%, rgba(207, 162, 97, 0) 58%),
    radial-gradient(80% 70% at 4% 100%, rgba(179, 129, 58, 0.22) 0%, rgba(179, 129, 58, 0) 62%);
}

.fid__haut,
.fid__bas { position: relative; z-index: 1; }

.fid__haut {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.fid__marque {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: #fff;
}

.fid__marque em { font-style: italic; color: var(--or-clair); }

.fid__type {
  font-family: var(--sans);
  font-size: 0.56rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(240, 226, 201, 0.72);
  text-align: right;
  max-width: 8ch;
  line-height: 1.5;
}

.fid__nom {
  display: block;
  font-family: var(--serif);
  font-size: 1.5rem;
  color: #fff;
  margin-bottom: 0.9rem;
  min-height: 1.6em;
}

.fid__ligne {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(240, 226, 201, 0.2);
}

.fid__ligne span { display: block; }
.fid__ligne .fid__droite { text-align: right; }

.fid__ligne i {
  display: block;
  font-style: normal;
  font-family: var(--sans);
  font-size: 0.56rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(240, 226, 201, 0.6);
  margin-bottom: 0.25rem;
}

.fid__ligne b {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--or-clair);
}

/* ---- le programme ---- */
.fid__texte h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); margin-bottom: 1.1rem; }

.fid__paliers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 2rem 0 1.6rem;
}

@media (max-width: 520px) { .fid__paliers { grid-template-columns: 1fr; gap: 0.6rem; } }

.fid__palier {
  padding: 1.1rem 1rem;
  background: var(--creme-2);
  border: 1px solid var(--ligne);
  border-radius: var(--r);
}

.fid__palier strong {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.35rem;
  color: var(--brun);
  margin-bottom: 0.2rem;
}

.fid__palier span {
  font-size: 0.74rem;
  color: var(--texte-doux);
  line-height: 1.5;
}

.fid__avantages {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
}

.fid__avantages li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.6rem;
  font-size: 0.9rem;
  color: var(--texte);
}

.fid__avantages li::before {
  content: '\2726';
  position: absolute;
  left: 0;
  top: 0.05em;
  color: var(--or);
  font-size: 0.72rem;
}

/* ---- inscription ---- */
.fid__champs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

@media (max-width: 620px) { .fid__champs { grid-template-columns: 1fr; } }

.fid__champs label span {
  display: block;
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--texte-doux);
  margin-bottom: 0.45rem;
}

.fid__champs input {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--ligne);
  border-radius: var(--r);
  background: var(--creme-2);
  font-family: var(--sans);
  font-size: 0.92rem;
  color: var(--brun);
}

.fid__champs input:focus { outline: none; border-color: var(--or); }

.fid__message {
  margin: 0.9rem 0 0;
  font-size: 0.82rem;
  min-height: 1.2em;
}

.fid__message.erreur { color: var(--terre); }
.fid__message.succes { color: var(--brun); }

.fid__mention {
  margin: 0.6rem 0 0;
  font-size: 0.74rem;
  color: var(--texte-doux);
  line-height: 1.6;
}

/* =============================================================
   COUCHE D'ANIMATION
   Surcouche de main.js : titres composes mot a mot, filets qui
   se tracent, derive des photographies, inclinaison des cartes,
   fondu entre les pages.
   ============================================================= */

/* ---- titres composes mot a mot ---- */
.mot {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.mot > span {
  display: inline-block;
  transform: translateY(105%);
  opacity: 0;
  transition:
    transform 0.95s cubic-bezier(0.16, 0.84, 0.32, 1),
    opacity 0.7s ease;
  transition-delay: calc(var(--m, 0) * 62ms);
}

.mots-vus .mot > span {
  transform: none;
  opacity: 1;
}

/* ---- filet qui se trace sous le surtitre ---- */
.surtitre--filet {
  position: relative;
  padding-bottom: 0.85rem;
}

.surtitre--filet::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 58px;
  background: currentColor;
  opacity: 0.5;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1.1s cubic-bezier(0.16, 0.84, 0.32, 1) 0.15s;
}

.surtitre--filet.trace::after { transform: scaleX(1); }

.centre .surtitre--filet::after,
.section-tete.centre .surtitre--filet::after {
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  transform-origin: 50% 50%;
}

.centre .surtitre--filet.trace::after,
.section-tete.centre .surtitre--filet.trace::after {
  transform: translateX(-50%) scaleX(1);
}

/* ---- derive lente de la photographie du hero ---- */
@keyframes derivePhoto {
  0%   { transform: scale(1.08) translate3d(0, 0, 0); }
  50%  { transform: scale(1.14) translate3d(-1.2%, -1%, 0); }
  100% { transform: scale(1.08) translate3d(0, 0, 0); }
}

.hero .fond img.derive {
  animation: derivePhoto 26s ease-in-out infinite;
  will-change: transform;
}

/* ---- inclinaison des cartes ---- */
.incline {
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.55s var(--t);
}

.incline:hover { box-shadow: 0 46px 90px -46px rgba(47, 39, 32, 0.55); }

/* ---- boutons attires par le curseur ---- */
.btn,
.lien-wa,
.panier__bouton {
  transition-property: color, border-color, background, transform, translate, box-shadow;
  transition-duration: 0.4s;
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---- cascade dans les listes ---- */
.cascade {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: calc(var(--c, 0) * 85ms);
}

.cascade--vue .cascade {
  opacity: 1;
  transform: none;
}

/* ---- fondu entre les pages ---- */
body.entre {
  opacity: 0;
  transition: opacity 0.55s ease;
}

body.entre--fait { opacity: 1; }

body.sort {
  opacity: 0;
  transition: opacity 0.32s ease;
}

@media (prefers-reduced-motion: reduce) {
  .mot > span { transform: none; opacity: 1; transition: none; }
  .surtitre--filet::after { transform: scaleX(1); transition: none; }
  .hero .fond img.derive { animation: none; }
  .incline, .btn, .lien-wa, .panier__bouton { transition: none; }
  .cascade { opacity: 1; transform: none; transition: none; }
  body.entre, body.sort { opacity: 1; transition: none; }
}

/* Les enveloppes de mots restent en ligne, meme dans les titres ou le site
   met ses `span` en bloc — sinon chaque mot part a la ligne. */
.hero h1 .mot,
.banniere h1 .mot,
h1 .mot, h2 .mot,
.mot > span {
  display: inline-block !important;
}

/* =============================================================
   HERO VIDEO
   -------------------------------------------------------------
   Deux videos verticales, jamais cote a cote : un grand panneau
   qui porte la salle de Wasabi, et une vignette d'Al Dente qui
   vient mordre son angle bas gauche, plus basse et devant. La
   hierarchie se lit d'un coup d'oeil : le titre, puis la grande
   video, puis la petite, puis l'encart.
   ============================================================= */

.hero--video .hero-grille {
  /* La colonne des videos passe devant celle du texte : c'est elle qui
     bridait la taille des panneaux, pas leur max-width. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
}

.hero--video .hero-mots { max-width: 42rem; }

.hero--video .hero-carte {
  margin-top: clamp(1.6rem, 3vw, 2.6rem);
  max-width: 27rem;
}

/* La photographie de fond s'efface quand les videos tournent : elle n'est
   la que pour tenir le cadre au chargement. */
.hero--video .fond img {
  transition: opacity 1.4s ease;
}

.hero--video.videos-pretes .fond img { opacity: 0.3; }

/* ---- la scene ---- */
.hero-scene {
  position: relative;
  justify-self: end;
  width: 100%;
  /* Agrandie : le grand panneau atteint ~400 px de large, soit encore moins
     que les 576 px natifs du fichier — l'image reste nette. */
  max-width: 46rem;
  /* Chaque video a son propre cadre : deux colonnes, jamais l'une sur
     l'autre. L'asymetrie vient des largeurs et des hauteurs differentes,
     et du decalage vertical — pas d'un recouvrement. */
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
  gap: clamp(0.6rem, 1.2vw, 1.1rem);
  align-items: stretch;
}

.hero-video {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
  background: #1a1410;
  box-shadow: 0 50px 90px -40px rgba(20, 14, 10, 0.9);
  opacity: 0;
  transform: translateY(34px) scale(0.97);
  transition: opacity 1.1s ease, transform 1.2s cubic-bezier(0.16, 0.84, 0.32, 1);
}

.hero-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Le grand panneau : deuxieme colonne, pleine hauteur, il domine. */
/* `grid-row: 1` sur les deux : sans cela le placement automatique refuse
   de revenir en arriere et pose la vignette sur une deuxieme ligne, sous
   le grand panneau au lieu d'a cote. */
.hero-video--majeur {
  grid-column: 2;
  grid-row: 1;
  /* 4/5 plutot que 9/16 : a hauteur egale le cadre est bien plus large,
     et le recadrage coupe le pan de mur vide du haut. */
  aspect-ratio: 4 / 5;
}

/* Cadrage : au centre exact on tombait sur le mur. On descend le point de
   mire sur la bande utile — les alcoves eclairees et les tables dressees. */
.hero-video--majeur video { object-position: center 58%; }

/* La vignette : premiere colonne, plus courte, calee en bas — c'est ce
   decrochage qui donne l'asymetrie. */
.hero-video--mineur video { object-position: center 62%; }

.hero-video--mineur {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  aspect-ratio: 4 / 5;
  margin-bottom: clamp(1.2rem, 3.5vw, 3rem);
  border-radius: 14px;
  box-shadow: 0 40px 70px -32px rgba(20, 14, 10, 0.95);
}

body.pret .hero-video { opacity: 1; transform: none; }
body.pret .hero-video--majeur { transition-delay: 0.5s; }
body.pret .hero-video--mineur { transition-delay: 0.78s; }

/* ---- etiquette de chaque video ---- */
.hero-video figcaption {
  position: absolute;
  left: 0.9rem;
  bottom: 0.9rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 0.85rem;
  border-radius: 999px;
  background: rgba(20, 14, 10, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--sans);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.94);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.hero-video figcaption .pastille {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--or-clair);
  box-shadow: 0 0 0 0 rgba(207, 162, 97, 0.75);
  animation: batPastille 2.6s ease-out infinite;
}

@keyframes batPastille {
  0%   { box-shadow: 0 0 0 0 rgba(207, 162, 97, 0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(207, 162, 97, 0); }
  100% { box-shadow: 0 0 0 0 rgba(207, 162, 97, 0); }
}

/* Un voile chaud sur le bas de chaque video : l'etiquette se lit toujours,
   quelle que soit l'image. */
.hero-video::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  pointer-events: none;
  background: linear-gradient(to top, rgba(20, 14, 10, 0.72), rgba(20, 14, 10, 0));
}

/* ---- tablette : la scene passe sous le texte, toujours decalee ---- */
@media (max-width: 880px) {
  .hero--video .hero-grille { grid-template-columns: 1fr; }
  .hero-scene {
    justify-self: start;
    max-width: 30rem;
    margin-top: 2rem;
  }
  .hero-video--mineur { margin-bottom: clamp(0.8rem, 2.5vw, 1.8rem); }
  .hero--video .hero-carte { max-width: none; }
}

/* ---- telephone : une seule video, plein cadre derriere le texte ----
   Deux panneaux ne tiennent pas sur 390 px sans devenir des timbres, et
   deux flux video sur un reseau mobile, c'est une facture pour rien. */
@media (max-width: 700px) {
  .hero-scene {
    position: absolute;
    inset: 0;
    display: block;
    max-width: none;
    margin: 0;
    z-index: 0;
  }
  .hero-video--majeur {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    width: 100%;
    height: 100%;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    transform: none;
  }
  /* La video passe derriere le texte, pas devant : dans la meme pile, un
     `z-index:0` battait le `auto` du bloc de texte. */
  .hero--video .hero-mots { position: relative; z-index: 2; }
  .hero-scene { z-index: 0; }

  /* `.hero .wrap` est en position:relative : la scene se calait dessus et
     laissait decouverte la bande de 160 px du rembourrage haut du hero.
     On rend ce conteneur statique pour que la video reparte du bord. */
  .hero--video > .wrap { position: static; }

  /* Le voile du hero est un frere de `.wrap`, il ne peut pas couvrir une
     video posee dedans : on le rejoue sur la video elle-meme. */
  .hero-video--majeur::after {
    height: 100%;
    background: linear-gradient(180deg,
                rgba(20, 14, 10, 0.74) 0%,
                rgba(20, 14, 10, 0.42) 38%,
                rgba(20, 14, 10, 0.9) 100%);
  }

  .hero-video--mineur { display: none; }
  .hero--video.videos-pretes .fond img { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-video { opacity: 1; transform: none; transition: none; }
  .hero-video figcaption .pastille { animation: none; }
}

/* ---- l'encart passe en bandeau compact sous les boutons ----
   Empile sous le titre, la carte verticale d'origine faisait deborder le
   hero : le bas etait coupe. En bandeau de quatre colonnes, elle tient. */
@media (min-width: 701px) {
  .hero--video .hero-carte {
    background: rgba(250, 246, 239, 0.1);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    padding: 1.1rem 1.4rem;
    max-width: none;
    color: #fff;
  }

  .hero--video .hero-carte h4 { display: none; }

  .hero--video .hero-carte ul {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .hero--video .hero-carte li {
    display: block;
    padding: 0 1rem;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.16);
  }

  .hero--video .hero-carte li:first-child { border-left: 0; padding-left: 0; }

  .hero--video .hero-carte li span {
    display: block;
    font-family: var(--sans);
    font-size: 0.56rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0.35rem;
  }

  .hero--video .hero-carte li b {
    display: block;
    font-family: var(--serif);
    font-weight: 400;
    font-size: 1.02rem;
    line-height: 1.25;
    color: #fff;
  }
}

/* La scene ne depasse jamais la hauteur disponible. */
.hero-scene { max-height: calc(100svh - 210px); }

@media (max-width: 880px) { .hero-scene { max-height: 40svh; } }
@media (max-width: 700px)  { .hero-scene { max-height: none; } }

/* ---- telephone : l'encart en deux colonnes compactes ----
   La carte verticale d'origine prenait la moitie de l'ecran sous les
   boutons. En 2 x 2, elle tient dans le pli. */
@media (max-width: 700px) {
  .hero--video .hero-carte {
    background: rgba(20, 14, 10, 0.42);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    padding: 1.1rem 1.2rem;
    color: #fff;
  }

  .hero--video .hero-carte h4 { color: var(--or-clair); margin-bottom: 0.9rem; }

  .hero--video .hero-carte ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem 1.2rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .hero--video .hero-carte li {
    display: block;
    padding: 0;
    border: 0;
  }

  .hero--video .hero-carte li span {
    display: block;
    font-family: var(--sans);
    font-size: 0.54rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
    margin-bottom: 0.25rem;
  }

  .hero--video .hero-carte li b {
    display: block;
    font-family: var(--serif);
    font-weight: 400;
    font-size: 0.98rem;
    line-height: 1.3;
    color: #fff;
  }
}

/* Un voile un peu plus dense : le texte doit rester lisible quelle que
   soit l'image qui passe. */
.banniere:has(.fond video) .voile {
  background: linear-gradient(180deg,
              rgba(47, 39, 32, 0.62) 0%,
              rgba(47, 39, 32, 0.44) 40%,
              rgba(47, 39, 32, 0.78) 100%);
}

/* =============================================================
   BANNIERES D'ETABLISSEMENT — la video tient le fond
   -------------------------------------------------------------
   Les films fournis font 576 x 1024. C'est exactement le format
   d'un telephone : en fond de banniere sur mobile, l'image est
   parfaitement nette.

   Sur grand ecran, l'etirer sur 1440 px l'agrandirait deux fois et
   demie. On ne l'agrandit donc jamais au-dela de sa taille reelle :
   la video tient toute la hauteur a droite, et un decor floute,
   tire de la meme image, occupe les cotes.
   ============================================================= */

.banniere--video .fond {
  overflow: hidden;
}

/* Le decor : jamais regarde de pres, le flou masque l'agrandissement. */
/* Ni la parallaxe ni le zoom d'ouverture ne touchent au decor : le
   deplacer decouvrirait ses bords, que le flou ne couvre plus. */
body.pret .banniere--video .fond__flou {
  animation: none;
  transform: scale(1.18);
}

.banniere--video .fond__flou {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(30px) saturate(0.85) brightness(0.75);
  transform: scale(1.18);
}

/* La video, a sa taille reelle au maximum : 576 px, jamais plus. */
.banniere--video .fond__net {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: clamp(320px, 44vw, 576px);
  object-fit: cover;
  object-position: center 60%;
  display: block;
}

body:has(#carte[data-carte="wasabi"]) .banniere--video .fond__net {
  object-position: center 66%;
}

body:has(#carte[data-carte="al-dente"]) .banniere--video .fond__net {
  object-position: center 56%;
}

/* Le voile s'ouvre a droite pour ne pas ternir la video, et se densifie
   a gauche ou se lit le texte. */
.banniere--video .voile {
  background:
    linear-gradient(180deg, rgba(52, 40, 29, 0.5), rgba(52, 40, 29, 0.15) 45%, rgba(52, 40, 29, 0.85)),
    linear-gradient(90deg, rgba(52, 40, 29, 0.88) 0%, rgba(52, 40, 29, 0.45) 42%, rgba(52, 40, 29, 0.12) 70%);
}

/* Telephone : la video est verticale comme l'ecran, elle prend tout le
   cadre et reste nette. Le decor floute ne se voit plus. */
@media (max-width: 900px) {
  .banniere--video .fond__net {
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .banniere--video .voile {
    background:
      linear-gradient(180deg, rgba(52, 40, 29, 0.55), rgba(52, 40, 29, 0.3) 40%, rgba(52, 40, 29, 0.9));
  }
}

@media (prefers-reduced-motion: reduce) {
  .banniere--video .fond__net {
    animation: none !important;
    transform: none;
  }
}

/* =============================================================
   COMMANDE PAYEE EN LIGNE
   -------------------------------------------------------------
   Champs du tunnel de paiement dans le tiroir du panier, et recu
   affiche au retour de la banque.
   ============================================================= */

.panier__paiement {
  display: grid;
  gap: 0.85rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--ligne);
}

.panier__paiement .panier__champ input,
.panier__paiement .panier__champ select {
  width: 100%;
  background: #fff;
  border: 1px solid var(--ligne);
  border-radius: var(--r);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 0.94rem;
  font-weight: 300;
  padding: 0.72rem 0.85rem;
  transition: border-color var(--t), box-shadow var(--t);
}

.panier__paiement .panier__champ input:focus,
.panier__paiement .panier__champ select:focus {
  outline: none;
  border-color: var(--or);
  box-shadow: 0 0 0 3px var(--or-pale);
}

.panier__detail {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.3rem 1rem;
  margin-bottom: 0.5rem;
  font-size: 0.86rem;
  color: var(--texte-doux);
}

.panier__detail span:nth-child(even) {
  text-align: right;
}

.panier__erreur {
  margin: 0 0 0.8rem;
  padding: 0.7rem 0.9rem;
  border-radius: var(--r);
  background: #fbeeea;
  border: 1px solid #e6c3b7;
  color: #8f3b22;
  font-size: 0.88rem;
}

/* ---------- recu de paiement ---------- */

.recu {
  max-width: 620px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--ligne);
  border-radius: var(--r);
  padding: clamp(1.8rem, 5vw, 3rem);
  box-shadow: var(--ombre);
}

.recu__tete {
  margin-bottom: 1.8rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--ligne);
}

.recu__tete h2 {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  margin-bottom: 0.4rem;
}

.recu__lignes {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
}

.recu__lignes li {
  padding: 0.6rem 0;
  border-bottom: 1px dashed var(--ligne);
  font-size: 0.95rem;
}

.recu__lignes li:last-child {
  border-bottom: 0;
}

.recu__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--ligne);
}

.recu__total strong {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.7rem;
  color: var(--or);
}

.recu__suite {
  margin: 1.4rem 0 0;
  color: var(--texte-doux);
  font-size: 0.92rem;
}

.recu__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.8rem;
}

.recu--erreur h2 {
  color: var(--terre);
}

.banniere--paiement {
  min-height: clamp(320px, 40vh, 440px);
}

/* Numero d'appel affiche dans le panier tant que le paiement en ligne
   n'est pas ouvert. */
.panier__tel {
  color: var(--or);
  border-bottom: 1px solid currentColor;
  white-space: nowrap;
  transition: color var(--t);
}

.panier__tel:hover {
  color: var(--or-clair);
}

.panier__envoi:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}