/* ============================================================
   BATCH COOKING FAMILY — feuille de style unique

   Direction (retours de Mathilde, octobre 2026) : l'aubergine foncée
   du logo domine toute la page, les textes sont beige clair. Deux
   accents seulement, pour donner du relief à quelques phrases :
   l'orange vif et le bleu pâle. Le logo, en grand, ouvre la page.
   Fraunces douce pour les titres, Jost pour le texte, Caveat pour
   quelques annotations. Le ticket et le bon de commande restent
   « papier » (écru), comme des objets posés sur la table.
   ============================================================ */

/* ---------- Polices servies avec le site (voir outils/polices.sh) ---------- */
@font-face {
  font-family: 'Jost'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('../fonts/jost-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('../fonts/jost-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('../fonts/fraunces-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces'; font-style: italic; font-weight: 400 800; font-display: swap;
  src: url('../fonts/fraunces-italique-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Caveat'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/caveat-latin.woff2') format('woff2');
}

:root {
  /* Fonds : l'aubergine du logo domine, en deux profondeurs pour rythmer */
  --fond: #44020c;          /* fond exact du logo */
  --fond-profond: #33010a;
  /* Textes : beige clair (demande de Mathilde) */
  --texte-clair: #f3e6d4;   /* 13,5:1 sur --fond */
  --titre-clair: #fbf3e8;   /* lettrage du logo */
  --doux: #d6c0aa;          /* texte secondaire, 9:1 */
  --filet: #f3e6d42b;
  /* Accents, pour donner du relief à quelques phrases seulement */
  --orange: #ff5a36;        /* orange vif, 5,4:1 sur --fond */
  --bleu: #a8c1de;          /* bleu pâle, 9:1 sur --fond */
  /* Éléments « papier » : ticket, bon de commande */
  --papier: #fbf3e8;
  --encre: #44020c;
  --encre-douce: #6b3a3f;   /* 8:1 sur --papier */

  --titres: 'Fraunces', Georgia, serif;
  --texte: 'Jost', 'Futura', 'Avenir Next', system-ui, sans-serif;
  --main: 'Caveat', 'Segoe Print', cursive;

  --gouttiere: clamp(1.1rem, 4.5vw, 3rem);
  --large: 76rem;
  --hauteur-entete: 6.6rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--hauteur-entete); -webkit-text-size-adjust: 100%; background: var(--fond); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte-clair);
  font-family: var(--texte);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'kern';
}
img { display: block; max-width: 100%; height: auto; }
svg { display: block; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
strong { font-weight: 600; color: var(--titre-clair); }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--bleu); outline-offset: 3px; }

h1, h2, h3 { margin: 0; font-family: var(--titres); font-weight: 700; line-height: 1.02; letter-spacing: -.015em; text-wrap: balance; color: var(--titre-clair); }
h2 { font-size: clamp(2.2rem, 5vw, 3.8rem); }
h2 em { color: var(--orange); }

.evitement { position: absolute; left: -999px; top: 0; z-index: 100; padding: .75rem 1rem; background: var(--papier); color: var(--encre); }
.evitement:focus { left: 1rem; top: 1rem; }

/* Annotations manuscrites, en bleu pâle */
.note { font-family: var(--main); font-weight: 600; font-size: 1.45rem; line-height: 1.1; color: var(--bleu); }

/* ---------- Boutons et liens ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.1rem; padding: .75rem 1.6rem;
  border: 0; border-radius: .35rem;
  background: var(--orange); color: var(--encre);
  font: inherit; font-size: 1rem; font-weight: 600; letter-spacing: .01em;
  text-decoration: none; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s;
}
.bouton:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 0 var(--bleu); }
.lien-fleche { display: inline-flex; align-items: center; gap: .6rem; font-weight: 500; text-decoration: none; color: var(--titre-clair); }
.lien-fleche svg { width: 2.4rem; height: 1rem; transition: transform .2s; color: var(--bleu); }
.lien-fleche:hover svg { transform: translateX(4px); }
.lien-fleche:hover { text-decoration: underline; }

/* ---------- En-tête ---------- */
.entete { position: sticky; top: 0; z-index: 50; background: var(--fond); transition: box-shadow .2s; }
.entete.defile-page { box-shadow: 0 1px 0 var(--filet); }
.bandeau { margin: 0; padding: .45rem var(--gouttiere); background: var(--fond-profond); color: var(--doux); font-size: .85rem; text-align: center; }
.bandeau a { text-decoration: none; }
.bandeau strong { color: var(--orange); text-decoration: underline; text-underline-offset: .2em; }
.entete-barre {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  max-width: calc(var(--large) + 2 * var(--gouttiere)); margin: 0 auto;
  padding: .45rem var(--gouttiere);
}
.entete-logo img { width: 4rem; }
.nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.2rem); font-size: .98rem; color: var(--titre-clair); }
.nav a { text-decoration: none; }
.nav a:hover { text-decoration: underline; text-decoration-color: var(--orange); }
.nav-reserver { padding: .55rem 1.1rem; border-radius: .35rem; background: var(--orange); color: var(--encre); font-weight: 600; }
.nav a.nav-reserver:hover { text-decoration: none; background: var(--titre-clair); }
.burger { display: none; }
.entete-reserver { display: none; }

@media (max-width: 919px) {
  :root { --hauteur-entete: 5.2rem; }
  .bandeau { padding: .3rem var(--gouttiere); font-size: .78rem; }
  .entete-barre { padding: .3rem var(--gouttiere); gap: .6rem; }
  .entete-logo { margin-right: auto; }
  .entete-logo img { width: 3.1rem; }
  .entete-reserver {
    display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 1rem;
    border-radius: .35rem; background: var(--orange); color: var(--encre);
    font-size: .92rem; font-weight: 600; text-decoration: none;
  }
  .burger {
    display: grid; place-content: center; gap: 7px;
    width: 2.9rem; height: 2.9rem; padding: 0; border: 0; background: none; cursor: pointer;
  }
  .burger span { display: block; width: 1.6rem; height: 2px; background: var(--titre-clair); transition: transform .2s; }
  .burger[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
  .burger[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    padding: .25rem var(--gouttiere) 1.6rem;
    background: var(--fond); box-shadow: 0 14px 20px -16px #000;
    font-family: var(--titres); font-size: 1.6rem; font-weight: 600;
  }
  .nav.ouvert { display: flex; }
  .nav a { padding: .6rem 0; border-bottom: 1px solid var(--filet); }
  .nav-reserver { margin-top: 1.1rem; padding: .8rem 1rem; text-align: center; font-family: var(--texte); font-size: 1.05rem; border: 0; }
}

/* ---------- Accueil ----------
   Le logo, en grand, porte l'accueil ; la devise de Mathilde en dessous.
   Le H1 (« Batch cooking à domicile à Nancy », pour le référencement) et
   la phrase « Je cuisine chez vous… » sont en petites capitales espacées. */
.hero {
  display: grid; gap: 2.5rem 4.5rem; align-items: center;
  max-width: calc(var(--large) + 2 * var(--gouttiere)); margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) var(--gouttiere) clamp(4rem, 8vw, 6rem);
}
@media (min-width: 920px) { .hero { grid-template-columns: 1fr 1fr; } }
.hero-logo { width: clamp(14rem, 28vw, 20rem); margin-bottom: 1.2rem; }
.hero-devise {
  margin: 0 0 2.2rem; font-family: var(--titres); font-style: italic; font-weight: 500;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1.25; color: var(--orange);
}
.hero-titre { font-family: var(--texte); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; line-height: 1.5; font-size: .92rem; margin-bottom: 1.4rem; }
.hero-titre span { display: block; }
.hero-phrase { color: var(--bleu); }
.hero-intro { max-width: 31rem; font-size: 1.15rem; color: var(--texte-clair); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.8rem; margin: 2rem 0 2.4rem; }
.hero-prix {
  display: inline-grid; grid-template-columns: auto auto; align-items: end; gap: 0 .9rem;
  margin: 0; padding-top: 1.1rem; border-top: 1px solid var(--filet);
}
.hero-prix .main { grid-column: 1 / -1; font-size: 1.35rem; color: var(--doux); }
.hero-prix strong { font-family: var(--titres); font-size: 3.2rem; font-weight: 700; line-height: .9; color: var(--orange); }
.hero-prix span:last-child { font-size: .9rem; line-height: 1.35; color: var(--doux); }

.hero-visuel { position: relative; margin: 0; max-width: 38rem; justify-self: center; width: 100%; }
.hero-visuel img { width: 100%; aspect-ratio: 4 / 5.2; object-fit: cover; object-position: center 35%; border-radius: 50vw 50vw .4rem .4rem; }
.note-hero {
  position: absolute; left: -6.5rem; top: 16%;
  width: 7rem; text-align: center; transform: rotate(-6deg);
}
.note-hero svg { width: 4.5rem; height: 3rem; margin: .4rem 0 0 2.6rem; transform: rotate(-10deg); }
@media (max-width: 1180px) { .note-hero { display: none; } }

/* Le tampon est posé à cheval sur le coin bas GAUCHE de la photo : les
   mains qui épluchent, en bas à droite, restent visibles. Sur ordinateur
   il mord sur l'espace entre les deux colonnes, sans toucher le texte ;
   sur mobile il déborde sur la première des deux petites photos. */
.tampon {
  position: absolute; left: -3.4rem; bottom: -1.8rem;
  display: grid; place-items: center;
  width: 10.5rem; height: 10.5rem; border-radius: 50%;
  background: var(--orange); color: var(--encre); text-decoration: none;
  box-shadow: 0 0 0 .35rem var(--fond);
}
.tampon svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tampon text { fill: currentColor; font-family: var(--texte); font-size: 15.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.tampon span { font-family: var(--titres); font-size: 2.45rem; font-weight: 800; letter-spacing: -.03em; }

.hero-duo { display: none; }

@media (max-width: 919px) {
  .hero-duo { order: 5; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; width: 100%; margin-bottom: 2.2rem; }
  .hero-duo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: .35rem; }
  .hero { gap: 0; padding-top: 1.8rem; padding-bottom: 3.5rem; justify-items: center; text-align: center; }
  .hero-texte { display: contents; }
  .hero-logo { order: 1; width: min(16rem, 70vw); margin-bottom: .9rem; }
  .hero-devise { order: 2; margin-bottom: 1.6rem; }
  .hero-titre { order: 3; font-size: .78rem; margin-bottom: 1.6rem; }
  .hero-visuel { order: 4; margin-bottom: .6rem; z-index: 1; }
  .hero-visuel img { aspect-ratio: 1 / 1.1; }
  .hero-intro { order: 6; font-size: 1.05rem; }
  .hero-actions { order: 7; margin: 1.2rem 0 2rem; justify-content: center; }
  .hero-prix { order: 8; text-align: left; }
  .tampon { left: .6rem; bottom: -2.2rem; width: 6.3rem; height: 6.3rem; }
  .tampon span { font-size: 1.45rem; }
}

/* ---------- Défilé de plats ---------- */
.defile { overflow: hidden; background: var(--fond-profond); color: var(--titre-clair); padding: .6rem 0; border-block: 1px solid var(--filet); }
.defile-piste { display: flex; width: max-content; animation: defile 70s linear infinite; }
.defile p { margin: 0; padding-right: 1.4rem; white-space: nowrap; font-family: var(--titres); font-style: italic; font-size: clamp(1rem, 1.5vw, 1.2rem); font-weight: 500; }
.defile i { font-style: normal; font-size: .7em; margin: 0 .8rem; color: var(--orange); vertical-align: .15em; }
@keyframes defile { to { transform: translateX(-50%); } }

/* ---------- Le principe ---------- */
.concept { max-width: calc(var(--large) + 2 * var(--gouttiere)); margin: 0 auto; padding: clamp(4.5rem, 10vw, 8rem) var(--gouttiere); }
.concept-chapeau {
  max-width: 58rem; margin-bottom: clamp(3.5rem, 8vw, 6rem);
  font-family: var(--titres); font-size: clamp(1.7rem, 3.6vw, 2.75rem); font-weight: 500; line-height: 1.2; letter-spacing: -.01em;
  color: var(--titre-clair);
}
.concept-chapeau em { font-weight: 700; color: var(--orange); }
.concept-corps { display: grid; gap: 3rem clamp(3rem, 7vw, 6rem); align-items: start; }
@media (min-width: 920px) { .concept-corps { grid-template-columns: 1fr 1fr; } }
.concept-photos { position: relative; padding: 0 12% 18% 0; }
.concept-photos img:first-child { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 50vw 50vw .4rem .4rem; }
.concept-photos img:last-child {
  position: absolute; right: 0; bottom: 0; width: 46%;
  aspect-ratio: 3 / 4; object-fit: cover; border-radius: .4rem;
  border: .45rem solid var(--fond);
}
.concept-texte { padding-top: 1rem; }
.concept-texte h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin-bottom: 1.6rem; }
.concept-texte p { max-width: 34rem; }

/* ---------- Tarifs : la carte ---------- */
.tarifs { background: var(--fond-profond); padding: clamp(4.5rem, 10vw, 7.5rem) var(--gouttiere); }
.tarifs > * { max-width: var(--large); margin-inline: auto; }
.tarifs-tete { text-align: center; margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.tarifs-tete h2 { font-style: italic; font-size: clamp(3rem, 8vw, 5.5rem); font-weight: 600; }
.tarifs-tete h2::before, .tarifs-tete h2::after { content: '✦'; font-style: normal; font-size: .25em; vertical-align: .9em; margin: 0 .6em; color: var(--orange); }
.tarifs-tete p { max-width: 32rem; margin: 1rem auto 0; color: var(--doux); }

.tarifs-grille { display: grid; gap: 3rem clamp(3rem, 6vw, 5rem); align-items: start; }
@media (min-width: 960px) { .tarifs-grille { grid-template-columns: 1.35fr 1fr; } }

.carte { list-style: none; margin: 0; padding: 0; }
.carte-ligne { border-bottom: 1px solid var(--filet); }
.carte-ligne:first-child { border-top: 1px solid var(--filet); }
.carte-ligne button {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .2rem .9rem; width: 100%;
  padding: 1.35rem .2rem; border: 0; background: none; color: var(--titre-clair); font: inherit; text-align: left; cursor: pointer;
}
.carte-nom { font-family: var(--titres); font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 600; line-height: 1.1; }
.carte-plats { font-size: .82rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--bleu); }
.carte-points { flex: 1; min-width: 1.5rem; border-bottom: 2px dotted #f3e6d455; transform: translateY(-.35em); }
.carte-prix { font-family: var(--titres); font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 700; white-space: nowrap; color: var(--orange); }
.carte-prix s { margin-right: .4rem; font-family: var(--texte); font-size: .95rem; font-weight: 400; color: var(--doux); text-decoration-thickness: 1px; }
.carte-ligne button:hover .carte-nom { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; text-decoration-color: var(--orange); }
.carte-ligne.choisie { background: #f3e6d40f; }
.carte-ligne.choisie .carte-nom::after { content: ' ✓'; font-size: .7em; color: var(--orange); }
.note-pp { margin: -.7rem 0 1.1rem .2rem; font-size: 1.35rem; }
@media (max-width: 559px) {
  .carte-points { display: none; }
  .carte-nom { flex-basis: 100%; }
  .carte-prix { margin-left: auto; }
}

.ticket {
  position: relative; padding: 1.8rem 1.7rem 2.2rem;
  background: var(--papier); color: var(--encre); transform: rotate(1.2deg);
  box-shadow: 0 14px 30px -18px #000;
  font-size: .97rem;
  /* bord bas dentelé, comme un ticket de caisse */
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 20px 10px repeat-x;
          mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 20px 10px repeat-x;
}
.ticket strong { color: var(--encre); }
.ticket-titre { margin-bottom: 1.1rem; font-family: var(--main); font-size: 1.7rem; line-height: 1; }
.ticket dl { margin: 0 0 1.4rem; font-variant-numeric: tabular-nums; }
.ticket dl div { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px dashed #44020c55; }
.ticket dt { color: var(--encre-douce); }
.ticket dd { margin: 0; white-space: nowrap; }
.ticket .ticket-total { border-bottom: 0; padding-top: .8rem; font-weight: 600; font-size: 1.1rem; }
.ticket .ticket-total dt { color: inherit; }
.ticket-texte { margin: 0; font-size: .93rem; color: var(--encre-douce); }

.tarifs-pied { display: grid; gap: .2rem 3rem; margin-top: 3rem; color: var(--doux); font-size: .97rem; }
@media (min-width: 760px) { .tarifs-pied { grid-template-columns: 1fr 1fr; } }

.coupon {
  position: relative; margin-top: 2.5rem; padding: 1.6rem 1.8rem 1.4rem;
  border: 2px dashed #f3e6d466; border-radius: .3rem;
  display: grid; gap: .3rem 2rem; align-items: baseline;
}
@media (min-width: 760px) { .coupon { grid-template-columns: auto 1fr; } }
.coupon::before { content: '✂'; position: absolute; top: -.85rem; left: 1.4rem; padding: 0 .4rem; background: var(--fond-profond); color: var(--bleu); font-size: 1.1rem; line-height: 1.4; }
.coupon-titre { margin: 0; font-family: var(--titres); font-style: italic; font-size: 1.9rem; font-weight: 600; line-height: 1; color: var(--orange); }
.coupon p:last-child { margin: 0; }

/* ---------- Le carnet de recettes ---------- */
.recettes { padding: clamp(4.5rem, 10vw, 7.5rem) var(--gouttiere); }
.recettes > * { max-width: var(--large); margin-inline: auto; }
.recettes-tete { display: grid; gap: 1.2rem 4rem; align-items: end; margin-bottom: 2.6rem; }
@media (min-width: 920px) { .recettes-tete { grid-template-columns: 1fr 1fr; } }
.recettes-tete p { margin: 0; color: var(--doux); max-width: 32rem; }

.onglets { display: flex; gap: .3rem 1.8rem; flex-wrap: wrap; margin-bottom: 2.8rem; padding-bottom: .9rem; border-bottom: 1px solid var(--filet); }
.onglets button {
  padding: .2rem 0; border: 0; background: none; color: var(--doux);
  font: inherit; font-size: .98rem; cursor: pointer;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .45em; text-decoration-thickness: 2px;
}
.onglets button:hover { color: var(--titre-clair); }
.onglets button[aria-selected="true"] { color: var(--titre-clair); text-decoration-color: var(--orange); font-weight: 500; }

.catalogue { columns: 1; column-gap: 4rem; }
@media (min-width: 820px) { .catalogue { columns: 2; } }
.categorie { break-inside: avoid-column; margin-bottom: 3rem; }
.categorie[hidden] { display: none; }
.categorie h3 { margin-bottom: .7rem; font-style: italic; font-weight: 600; font-size: 1.9rem; color: var(--bleu); }
.categorie ul { list-style: none; margin: 0; padding: 0; }
.recette {
  position: relative; display: block; width: 100%;
  padding: .5rem 0 .5rem 2.1rem; border: 0; background: none; color: var(--texte-clair);
  font: inherit; font-size: 1.02rem; line-height: 1.45; text-align: left; cursor: pointer;
}
.recette::before {
  content: ''; position: absolute; left: 0; top: .72rem;
  width: 1.05rem; height: 1.05rem; border: 1.5px solid #f3e6d4aa; border-radius: .15rem;
  transition: background-color .15s, border-color .15s;
}
.recette:hover::before { border-color: var(--orange); }
.recette[aria-pressed="true"] { color: var(--titre-clair); }
.recette[aria-pressed="true"]::before { background: var(--orange); border-color: var(--orange); }
.recette[aria-pressed="true"]::after {
  content: ''; position: absolute; left: .33rem; top: .85rem;
  width: .38rem; height: .65rem; border: solid var(--encre); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.deplier { display: none; }
@media (max-width: 819px) {
  .onglets { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gouttiere)); padding-inline: var(--gouttiere); gap: 1.4rem; }
  .onglets::-webkit-scrollbar { display: none; }
  .onglets button { flex: none; white-space: nowrap; }
  .categorie { margin-bottom: 2.4rem; }
  .categorie.replie li:nth-child(n+7):not(:has([aria-pressed="true"])) { display: none; }
  .deplier {
    display: inline-block; margin-top: .6rem; padding: .5rem 0; border: 0; background: none;
    color: var(--orange); font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer;
    text-decoration: underline; text-underline-offset: .3em;
  }
  .recettes-tete { margin-bottom: 1.8rem; }
  .onglets { margin-bottom: 2rem; }
}
.no-js .recette { padding-left: 0; cursor: default; }
.no-js .recette::before, .no-js .sans-js-masque { display: none; }
.recettes-note { margin-top: .5rem; padding-top: 1.6rem; border-top: 1px solid var(--filet); color: var(--doux); max-width: 44rem; }

/* ---------- En images : collage ---------- */
.images { padding: 0 var(--gouttiere); }
.collage {
  position: relative; display: grid; gap: .8rem;
  grid-template-columns: repeat(2, 1fr);
  max-width: var(--large); margin: 0 auto;
}
.collage figure { margin: 0; }
.collage img { width: 100%; height: 100%; object-fit: cover; border-radius: .35rem; }
@media (max-width: 919px) {
  .collage .c1, .collage .c5 { grid-column: span 2; }
  .collage .c1 img, .collage .c5 img { aspect-ratio: 4 / 3; }
  .collage .c2 img, .collage .c3 img, .collage .c4 img, .collage .c6 img { aspect-ratio: 3 / 4; }
  .collage .c5 { order: 2; }
  .note-collage { order: 3; }
}
@media (min-width: 920px) {
  .collage { grid-template-columns: repeat(12, 1fr); grid-auto-rows: 4.2rem; gap: 1rem; }
  .c1 { grid-column: 1 / 6;  grid-row: 1 / 9; }
  .c2 { grid-column: 6 / 9;  grid-row: 1 / 6; }
  .c3 { grid-column: 9 / 13; grid-row: 1 / 7; }
  .c4 { grid-column: 6 / 9;  grid-row: 6 / 13; }
  .c5 { grid-column: 1 / 6;  grid-row: 9 / 13; }
  .c6 { grid-column: 9 / 13; grid-row: 7 / 13; }
}
.note-collage { grid-column: 1 / -1; margin: .6rem 0 0; font-size: 1.8rem; text-align: right; transform: rotate(-2deg); }

/* ---------- Une séance ---------- */
.seance-fond { background: var(--fond-profond); margin-top: clamp(4.5rem, 10vw, 7.5rem); }
.seance {
  display: grid; gap: 3rem clamp(3rem, 7vw, 6rem); align-items: center;
  max-width: calc(var(--large) + 2 * var(--gouttiere)); margin: 0 auto;
  padding: clamp(4.5rem, 10vw, 7.5rem) var(--gouttiere);
}
@media (min-width: 920px) { .seance { grid-template-columns: 1.2fr .8fr; } }
.seance h2 { margin-bottom: 2.2rem; }
.etapes { counter-reset: e; list-style: none; margin: 0; padding: 0; }
.etapes li { counter-increment: e; position: relative; padding: 0 0 1.4rem 3.6rem; font-size: 1.08rem; }
.etapes li::before {
  content: counter(e); position: absolute; left: 0; top: -.35rem;
  font-family: var(--titres); font-style: italic; font-weight: 600; font-size: 2.3rem; line-height: 1; color: var(--orange);
}
.etapes span { font-weight: 600; color: var(--titre-clair); }
.seance-visuel { margin: 0; max-width: 26rem; justify-self: center; }
@media (max-width: 919px) { .seance-visuel { max-width: 16rem; } .seance h2 { margin-bottom: 1.6rem; } }
.seance-visuel img { border-radius: .35rem; transform: rotate(-2deg); box-shadow: 0 16px 30px -20px #000; }
.seance-visuel figcaption { margin-top: 1.4rem; text-align: center; }

/* ---------- Mathilde ---------- */
.mathilde {
  display: grid; gap: 3rem clamp(3rem, 7vw, 6rem); align-items: center;
  max-width: calc(var(--large) + 2 * var(--gouttiere)); margin: 0 auto;
  padding: clamp(4.5rem, 10vw, 7.5rem) var(--gouttiere);
}
@media (min-width: 920px) { .mathilde { grid-template-columns: 1fr 1fr; } }
.mathilde-photos { position: relative; padding: 0 0 22% 0; }
.mathilde-photos img { border-radius: .35rem; object-fit: cover; aspect-ratio: 3 / 4; }
.mathilde-photos img:first-child { width: 70%; transform: rotate(-2.5deg); }
.mathilde-photos img:last-child {
  position: absolute; right: 0; bottom: 0; width: 50%;
  transform: rotate(3deg); border: .45rem solid var(--fond);
}
.mathilde h2 { margin-bottom: 1.6rem; }
.mathilde-texte p { max-width: 34rem; }
.signature { margin-top: 1.4rem; font-family: var(--main); font-size: 3rem; line-height: 1; transform: rotate(-4deg); transform-origin: left; color: var(--bleu); }

/* ---------- Zone ---------- */
.zone { background: var(--fond-profond); padding: clamp(3.5rem, 8vw, 5.5rem) var(--gouttiere); }
.zone > * { max-width: var(--large); margin-inline: auto; }
.zone h2 { font-size: 1rem; font-family: var(--texte); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1rem; color: var(--bleu); }
.zone-liste { margin-bottom: 0; font-family: var(--titres); font-size: clamp(1.45rem, 3vw, 2.2rem); font-weight: 500; line-height: 1.3; color: var(--titre-clair); }
.zone-liste em { color: var(--doux); font-weight: 400; }

/* ---------- Réserver : bon de commande ---------- */
.reserver { padding: clamp(4.5rem, 10vw, 7.5rem) var(--gouttiere); }
.reserver-tete { max-width: 46rem; margin: 0 auto 2.8rem; }
.reserver-tete h2 { margin-bottom: 1.1rem; }
.reserver-tete p { color: var(--doux); margin: 0; }
.bon {
  max-width: 46rem; margin: 0 auto;
  padding: clamp(1.6rem, 4vw, 2.8rem);
  background: var(--papier); color: var(--encre); border-radius: .3rem;
  box-shadow: 0 30px 50px -30px #000;
}
.bon strong { color: var(--encre); }
.bon a { color: var(--encre); }
.bon-titre { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.6rem; font-family: var(--main); font-size: 2rem; line-height: 1; }
.bon-titre::after { content: ''; flex: 1; border-bottom: 2px dashed #44020c55; }
.bon-ligne { margin: 0 0 1.6rem; padding: 0; border: 0; min-width: 0; }
.bon-ligne legend, .legende {
  padding: 0; margin-bottom: .7rem; font-size: .8rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--encre-douce);
}
.cases { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; }
.cases label { position: relative; display: inline-flex; cursor: pointer; }
.cases input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cases span { position: relative; padding-left: 1.8rem; font-weight: 500; line-height: 1.35; }
.cases small { display: block; font-size: .85rem; font-weight: 400; color: var(--encre-douce); }
.cases span::before {
  content: ''; position: absolute; left: 0; top: .2rem; width: 1.1rem; height: 1.1rem;
  border: 1.5px solid var(--encre); border-radius: .15rem;
}
.cases input:checked + span::before { background: var(--encre); box-shadow: inset 0 0 0 3px var(--papier); }
.cases input:focus-visible + span { outline: 2px solid var(--encre); outline-offset: 4px; }
.cases-courtes span { font-size: 1.15rem; }

.selection-compte { margin-left: .4rem; letter-spacing: 0; text-transform: none; }
.selection-liste { list-style: none; margin: 0; padding: 0; }
.selection-liste li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .4rem 0; border-bottom: 1px dotted #44020c55; }
.selection-liste button { padding: 0 .3rem; border: 0; background: none; color: var(--encre-douce); font: inherit; font-size: .88rem; text-decoration: underline; cursor: pointer; }
.selection-liste button:hover { color: var(--encre); }
.selection-vide { margin: 0; color: var(--encre-douce); }
.selection-alerte { margin: .7rem 0 0; font-weight: 500; }
.no-js .selection { display: none; }

.champs { display: grid; gap: 1.1rem 1.6rem; margin-top: .4rem; }
@media (min-width: 640px) { .champs { grid-template-columns: 1fr 1fr; } .champ-large { grid-column: 1 / -1; } }
.champ { display: grid; gap: .1rem; }
.champ > span { font-size: .8rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--encre-douce); }
.champ input, .champ textarea {
  width: 100%; padding: .45rem 0; border: 0; border-bottom: 1.5px solid #44020c66; border-radius: 0;
  background: transparent; color: var(--encre); font: inherit; font-size: 1.05rem;
}
.champ input::placeholder, .champ textarea::placeholder { color: #6b3a3f99; font-style: italic; }
.champ input:focus, .champ textarea:focus { outline: none; border-bottom-color: var(--encre); border-bottom-width: 2px; }
.champ textarea { resize: vertical; }
.bon-envoi { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 2.2rem; }
.bon .bouton { background: var(--encre); color: var(--papier); }
.bon .bouton:hover { box-shadow: 4px 4px 0 0 var(--orange); }
.demande-canal { margin: 0; font-size: .92rem; color: var(--encre-douce); max-width: 22rem; }

/* ---------- Questions ---------- */
.faq-fond { background: var(--fond-profond); }
.faq {
  display: grid; gap: 2rem clamp(3rem, 7vw, 6rem); align-items: start;
  max-width: calc(var(--large) + 2 * var(--gouttiere)); margin: 0 auto;
  padding: clamp(4.5rem, 10vw, 7.5rem) var(--gouttiere);
}
@media (min-width: 920px) { .faq { grid-template-columns: .8fr 1.2fr; } .faq h2 { position: sticky; top: calc(var(--hauteur-entete) + 1rem); } }
.faq-liste details { border-bottom: 1px solid var(--filet); }
.faq-liste details:first-child { border-top: 1px solid var(--filet); }
.faq-liste summary {
  position: relative; padding: 1.2rem 2.5rem 1.2rem 0; list-style: none; cursor: pointer;
  font-family: var(--titres); font-size: 1.3rem; font-weight: 600; line-height: 1.25; color: var(--titre-clair);
}
.faq-liste summary::-webkit-details-marker { display: none; }
.faq-liste summary::after { content: '+'; position: absolute; right: .2rem; top: 1.05rem; font-family: var(--texte); font-size: 1.6rem; font-weight: 300; line-height: 1; transition: transform .2s; color: var(--orange); }
.faq-liste details[open] summary::after { transform: rotate(45deg); }
.faq-liste details p { padding-bottom: 1.3rem; margin: 0; color: var(--doux); max-width: 40rem; }
.faq-liste a { color: var(--bleu); }

/* ---------- Pied de page ---------- */
.pied { background: var(--fond); color: var(--titre-clair); padding: clamp(3.5rem, 7vw, 5rem) var(--gouttiere) 2rem; }
.pied > * { max-width: var(--large); margin-inline: auto; }
.pied-haut { display: grid; gap: 2rem 4rem; align-items: center; padding-bottom: 2.5rem; border-bottom: 1px solid var(--filet); }
@media (min-width: 760px) { .pied-haut { grid-template-columns: auto 1fr; } }
.pied-logo { width: 10rem; }
.pied-phrase { font-family: var(--titres); font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 500; line-height: 1.2; max-width: 30rem; }
.pied-texte p:not(.pied-phrase) { margin: 0 0 .3rem; color: var(--doux); }
.pied a { color: var(--titre-clair); }
.mentions { padding: 1.3rem 0; border-bottom: 1px solid var(--filet); }
.mentions summary { cursor: pointer; font-size: .95rem; }
.mentions-texte { padding-top: 1rem; color: var(--doux); font-size: .9rem; }
.mentions-texte h3 { margin: 1.2rem 0 .3rem; font-family: var(--texte); font-size: .95rem; font-weight: 600; color: var(--titre-clair); letter-spacing: 0; }
.a-completer { background: #fbf3e826; padding: 0 .3em; border-radius: .2em; }
.pied-bas { margin: 1.5rem auto 0; font-size: .85rem; color: var(--doux); }

/* ---------- Bouton flottant : la sélection en cours ---------- */
.flottant {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 40;
  display: inline-flex; align-items: center; gap: .8rem;
  padding: .85rem 1.2rem; border-radius: .35rem;
  background: var(--orange); color: var(--encre); text-decoration: none; font-weight: 600;
  box-shadow: 0 12px 30px -10px #000;
}
.flottant svg { width: 2rem; height: .9rem; }
.flottant[hidden] { display: none; }

/* ---------- Mobile : version allégée ----------
   Sur téléphone, on garde l'essentiel : une photo par idée, une catégorie
   de recettes à la fois, des marges plus serrées. Les images masquées ici
   sont en chargement différé : elles ne sont jamais téléchargées. */
@media (max-width: 759px) {
  .concept, .tarifs, .recettes, .seance, .mathilde, .reserver, .faq { padding-top: 3.4rem; padding-bottom: 3.4rem; }
  .seance-fond { margin-top: 3.4rem; }
  .zone { padding-top: 2.6rem; padding-bottom: 2.6rem; }

  .concept-chapeau { margin-bottom: 2.4rem; font-size: 1.55rem; }
  .concept-photos { padding: 0; }
  .concept-photos img:first-child { aspect-ratio: 4 / 4.4; }
  .concept-photos img:last-child { display: none; }
  .concept-corps { gap: 2rem; }

  .tarifs-tete { margin-bottom: 1.8rem; }
  .carte-ligne button { padding: 1rem .1rem; }
  .ticket { padding: 1.4rem 1.3rem 1.8rem; }
  .ticket-texte { display: none; }
  .tarifs-grille { gap: 2rem; }
  .tarifs-pied { margin-top: 2rem; }

  .collage .c4, .collage .c5, .collage .c6 { display: none; }

  .seance-visuel { display: none; }
  .seance h2 { margin-bottom: 1.4rem; }
  .etapes li { padding-bottom: 1rem; }

  .mathilde { gap: 2rem; }
  .mathilde-photos { padding: 0; }
  .mathilde-photos img:first-child { width: 100%; aspect-ratio: 4 / 3; transform: none; object-position: center 30%; }
  .mathilde-photos img:last-child { display: none; }

  .reserver-tete { margin-bottom: 1.8rem; }
  .pied-logo { width: 7rem; }
}

/* ---------- Écran d'ouverture : le fouet dans le saladier ----------
   Affiché seulement si le script de l'en-tête a posé html.ouverture.
   Filet de sécurité : même si main.js ne se charge pas, l'écran
   s'efface tout seul au bout de 3,5 s. */
.ouverture-ecran { display: none; }
html.ouverture { overflow: hidden; }
html.ouverture .ouverture-ecran {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-content: center; justify-items: center; gap: .6rem;
  background: var(--fond); color: var(--titre-clair);
  animation: ouverture-secours .5s ease 3.5s forwards;
}
html.ouverture-fin .ouverture-ecran { opacity: 0; visibility: hidden; transition: opacity .55s ease, visibility 0s .55s; }
.ouverture-ecran p { margin: 0; font-family: var(--main); font-size: 1.7rem; line-height: 1; color: var(--bleu); }
.fouet-scene { width: 12rem; height: auto; overflow: visible; }
.fouet-scene path, .fouet-scene circle { fill: none; stroke: currentColor; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.fouet-scene .saladier { fill: var(--fond); stroke-width: 5; }
.fouet-scene .pate { stroke: var(--orange); stroke-width: 3.5; animation: pate .32s ease-in-out infinite alternate; }
.fouet { transform-box: view-box; transform-origin: 100px 118px; animation: fouetter .32s ease-in-out infinite alternate; }
.eclats circle { fill: var(--orange); stroke: none; opacity: 0; transform-box: fill-box; transform-origin: center; animation: eclat .64s ease-out infinite; }
.eclats circle:nth-child(2) { animation-delay: .16s; }
.eclats circle:nth-child(3) { animation-delay: .32s; }
.eclats circle:nth-child(4) { animation-delay: .48s; }
.eclats circle:nth-child(5) { animation-delay: .24s; }
@keyframes fouetter { from { transform: translateX(-9px) rotate(-17deg); } to { transform: translateX(9px) rotate(17deg); } }
@keyframes pate { from { transform: translateY(0); } to { transform: translateY(-3px); } }
@keyframes eclat { 0% { opacity: 0; transform: translateY(10px) scale(.4); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-16px) scale(1); } }
@keyframes ouverture-secours { to { opacity: 0; visibility: hidden; } }

/* ---------- Apparitions ---------- */
.anim { opacity: 0; transform: translateY(16px); transition: opacity .8s ease, transform .8s ease; }
.anim.visible { opacity: 1; transform: none; }