/* Bee Lagree — le site est la machine.
   Un Microformer en 3D derrière tout le site ; le contenu glisse par-dessus.
   Couleurs relevées sur le logo et le site actuel. */
:root {
  --paper: #FBF6F1;
  --stage: #F2E7DD;         /* fond de la scène 3D, le jour */
  --cream: #F4E8DE;
  --sand: #EAD8CA;
  --taupe: #A4887A;
  --brown: #835241;
  --ink: #2B1F19;
  --ink-soft: #5E4A3F;
  --red: #BB5137;
  --line: #3A2A22;
  --night: #1E1612;

  --serif: "DM Serif Display", Georgia, serif;
  --sans: "Jost", system-ui, sans-serif;
  --gutter: clamp(16px, 5vw, 56px);
  --max: 1240px;
  --tempo: 4s;
  --glass: color-mix(in srgb, var(--paper) 80%, transparent);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
  margin: 0;
  background: var(--stage);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.04; margin: 0; letter-spacing: -0.012em; }
h3 { font-size: 1.4rem; }
p { margin: 0 0 1em; }
strong { font-weight: 500; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: 8px 14px; border-radius: 999px; z-index: 100; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* ——— La scène 3D ——— */
.scene {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100lvh;
  opacity: 0; transition: opacity 1.4s ease;
  touch-action: pan-y;
}
.scene.is-ready { opacity: 1; }
.no-3d .scene { display: none; }
/* Un voile doux côté texte, pour que la 3D ne gêne jamais la lecture */
.scrim { display: none; } /* téléphone : chaque section a sa propre fenêtre 3D, le texte ne passe jamais dessus */
@media (min-width: 880px) {
  .scrim { display: block; position: fixed; inset: 0; z-index: 0; pointer-events: none; transition: opacity 1s; background: linear-gradient(90deg, color-mix(in srgb, var(--stage) 88%, transparent) 0%, color-mix(in srgb, var(--stage) 62%, transparent) 34%, transparent 56%); }
}
.is-night .scrim { opacity: 0; }
main, .end { position: relative; z-index: 1; }

.hotspots { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.hotspots span {
  position: absolute; left: 0; top: 0; opacity: 0;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  margin: -14px 0 0 -14px; padding: 4px 12px 4px 4px; border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  font-size: .8rem; font-weight: 500; color: var(--ink);
  box-shadow: 0 8px 24px -12px rgba(43,31,25,.4);
  will-change: transform, opacity;
}
.hotspots b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--red); color: var(--paper); font-size: .78rem; }
@media (max-width: 879px) { .hotspots span { font-size: .72rem; padding-right: 10px; } }

/* ——— Boutons ——— */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px; border-radius: 999px;
  background: var(--ink); color: var(--paper);
  font: 500 0.95rem/1 var(--sans); letter-spacing: 0.02em; text-decoration: none;
  border: 1.5px solid var(--ink);
  transition: transform .4s cubic-bezier(.2,.7,.2,1), background .3s;
}
.btn:hover { transform: translateY(-2px); }
.btn--small { min-height: 38px; padding: 0 16px; font-size: 0.85rem; }
.btn--ghost { background: var(--glass); color: var(--ink); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn--light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--ghost-light { background: transparent; color: var(--paper); border-color: rgba(251,246,241,.5); }

/* ——— En-tête + rail ——— */
.top {
  position: sticky; top: 0; z-index: 50;
  padding-bottom: 12px; /* l'air sous la barre-ressort, DANS l'en-tête */
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1);
  transition: background .8s, color .8s;
}
.top__bar { display: flex; align-items: center; gap: 12px; max-width: var(--max); margin: 0 auto; padding: 12px var(--gutter) 16px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--taupe); text-decoration: none; margin-right: auto; }
.brand svg { fill: currentColor; }
.brand__bee { height: 30px; width: auto; }
.brand__word { height: 17px; width: auto; }
.chrono { margin: 0; font-size: 0.8rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.chrono__label { text-transform: uppercase; font-size: .68rem; letter-spacing: .14em; margin-right: 4px; }
.chrono__time { font-weight: 500; color: var(--ink); }
.rail { position: relative; height: 14px; margin: 0 var(--gutter); }
@media (min-width: 1352px) { .rail { max-width: calc(var(--max) - 2 * 56px); margin: 0 auto; } }
.rail::before { content: ""; position: absolute; left: 14px; right: 14px; top: 6px; height: 2px; background: var(--sand); }
.rail__front, .rail__back { position: absolute; top: 1px; width: 12px; height: 12px; border-radius: 3px; background: var(--line); }
.rail__front { left: 0; }
.rail__back { right: 0; }
.rail__spring {
  position: absolute; left: 12px; top: 2px; height: 10px; width: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' preserveAspectRatio='none'%3E%3Cpath d='M0 5 L2.5 1 L7.5 9 L10 5' fill='none' stroke='%23BB5137' stroke-width='1.4' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") left center / calc(100% / 22) 100% repeat-x;
}
.rail__carriage { position: absolute; top: 0; left: 12px; width: 34px; height: 14px; border-radius: 4px; background: var(--taupe); box-shadow: inset 7px 0 0 -4px var(--paper), inset -7px 0 0 -4px var(--paper); }

/* La salle s'éteint dans la section Studio */
.is-night .top { background: color-mix(in srgb, var(--night) 70%, transparent); }
.is-night .chrono, .is-night .chrono__time { color: #F1DCCF; }
.is-night .rail::before { background: rgba(241,220,207,.18); }
.is-night .rail__front, .is-night .rail__back { background: #F1DCCF; }
.is-night .top .btn--small { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* ——— Repères de séance ——— */
.rep {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 16px; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft);
}
.rep span {
  font-variant-numeric: tabular-nums; letter-spacing: .04em; font-weight: 500; color: var(--red);
  padding: 3px 8px; border: 1px solid currentColor; border-radius: 999px; background: var(--glass);
}

/* ——— Hero : la machine en haut, le texte en bas (téléphone) ; à gauche (ordinateur) ——— */
.hero {
  position: relative;
  min-height: calc(100svh - 72px);
  display: flex; flex-direction: column; justify-content: flex-end; gap: 18px;
  max-width: var(--max); margin: 0 auto; padding: 32px var(--gutter) 28px;
  pointer-events: none;
}
.hero a, .hero button { pointer-events: auto; }
.hero h1 { font-size: clamp(2.3rem, 10.5vw, 5.4rem); max-width: 11ch; text-shadow: 0 0 40px var(--stage); }
.lede { font-size: 1.02rem; color: var(--ink-soft); max-width: 36ch; margin: 14px 0 0; }
.lede em { font-style: normal; color: var(--brown); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 10px; }
.scroll-hint { display: none; }
.hold { display: flex; align-items: center; gap: 16px; }
.hold__btn {
  position: relative; flex: none; width: 80px; height: 80px; border-radius: 50%;
  border: 0; background: var(--ink); color: var(--paper); cursor: pointer;
  font: 400 1.18rem/1 var(--serif);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: none;
  box-shadow: 0 18px 40px -16px rgba(43,31,25,.6);
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
  --p: 0;
}
.hold__btn::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--ink);
  animation: invite 2.8s cubic-bezier(.2,.7,.2,1) infinite;
}
.hold__btn.is-holding::after { animation: none; opacity: 0; }
@keyframes invite { from { transform: scale(1); opacity: .5; } to { transform: scale(1.7); opacity: 0; } }
.hold__btn.is-holding { transform: scale(.92); }
.hold__ring {
  position: absolute; inset: -7px; border-radius: 50%;
  background: conic-gradient(var(--red) calc(var(--p) * 1turn), color-mix(in srgb, var(--sand) 70%, transparent) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
}
.hold__label { position: relative; }
.hold__count { margin: 0; font: 400 2.4rem/1 var(--serif); font-variant-numeric: tabular-nums; }
.hold__count small { font: 400 .9rem var(--sans); margin-left: 3px; color: var(--ink-soft); }
.hold__status { font-size: .9rem; line-height: 1.4; color: var(--ink-soft); max-width: 26ch; min-height: 2.8em; margin: 4px 0 0; }

@media (min-width: 880px) {
  .hero { justify-content: center; padding-top: clamp(40px, 8vh, 88px); padding-bottom: 72px; gap: clamp(18px, 3vh, 26px); }
  /* le titre suit aussi la HAUTEUR de l'écran, pour ne jamais buter contre l'en-tête */
  .hero h1 { font-size: clamp(2.8rem, min(6vw, 8.6vh), 5.4rem); }
  .hero__text, .hold, .hero__cta { max-width: 520px; }
  .hold__btn { width: 100px; height: 100px; font-size: 1.35rem; }
  .scroll-hint { display: block; position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); margin: 0; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
}

/* ——— Les temps de la séance : la scène d'abord, le contenu ensuite ——— */
.beat { position: relative; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) 18svh; }
.beat__title { min-height: 78svh; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 28px; }
.beat h2 { font-size: clamp(2.2rem, 9vw, 4.6rem); max-width: 14ch; text-shadow: 0 0 40px var(--stage); }
.panel {
  position: relative;
  padding: clamp(22px, 5vw, 40px);
  border-radius: 28px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 40px 90px -50px rgba(43,31,25,.45);
}
.panel > p { max-width: 58ch; }
@media (min-width: 880px) {
  .beat { display: grid; grid-template-columns: minmax(0, 560px) 1fr; }
  .beat > * { grid-column: 1; }
  .beat__title { min-height: 70svh; }
}

.beat--dark h2, .beat--dark .rep { color: #F6E4D8; text-shadow: none; }
.beat--dark .rep span { color: #F0A58F; background: rgba(30,22,18,.5); }
.beat--dark .panel { background: color-mix(in srgb, var(--night) 72%, transparent); border-color: rgba(255,255,255,.08); color: var(--paper); }

/* Méthode : le tempo, compté */
.tempo { margin: 26px 0 0; padding: 22px; border-radius: 20px; background: color-mix(in srgb, var(--cream) 80%, transparent); }
.tempo__word { font: italic 400 clamp(2.2rem, 8vw, 3.2rem)/1 var(--serif); color: var(--brown); margin-bottom: 18px; }
.tempo__bar { height: 6px; border-radius: 6px; background: var(--sand); overflow: hidden; }
.tempo__bar span { display: block; height: 100%; width: 100%; background: var(--red); transform-origin: left; animation: tempo calc(var(--tempo) * 2) cubic-bezier(.45,0,.55,1) infinite; }
@keyframes tempo { 0% { transform: scaleX(0); } 50% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.tempo__count { display: flex; justify-content: space-between; list-style: none; padding: 0; margin: 10px 0 0; font-variant-numeric: tabular-nums; color: var(--ink-soft); font-size: .9rem; }
.reps { list-style: none; padding: 0; margin: 26px 0 0; border-top: 1px solid var(--sand); }
.reps li { padding: 14px 0; border-bottom: 1px solid var(--sand); }

/* Machine : la légende */
.legend { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 14px; }
.legend li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; color: var(--ink-soft); }
.legend b { width: 26px; height: 26px; border-radius: 50%; background: var(--red); color: var(--paper); display: grid; place-items: center; font-weight: 500; font-size: .85rem; margin-top: 1px; }
.legend strong { color: var(--ink); }

/* Studio */
.points { list-style: none; padding: 0; margin: 0; display: grid; gap: 24px; }
.points h3 { margin-bottom: 6px; color: #F1DCCF; }
.points p { color: rgba(251,246,241,.8); margin: 0; }
.why { margin-top: 32px; padding-top: 26px; border-top: 1px solid rgba(251,246,241,.16); }
.why h3 { font-style: italic; margin-bottom: 10px; color: #F1DCCF; }
.why p { color: rgba(251,246,241,.8); margin: 0; }

/* Tarifs */
.tarifs__sub { margin: 0 0 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.tarifs__sub:not(:first-child) { margin-top: 36px; }
.soon { font: 500 .72rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--brown); padding: 6px 10px; border-radius: 999px; background: var(--cream); }
.note { font-size: .92rem; color: var(--ink-soft); margin: 12px 0 16px; max-width: 60ch; }
.plans { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.plan {
  position: relative; display: grid; align-content: start; gap: 4px; padding: 14px 14px 16px; border-radius: 18px;
  background: color-mix(in srgb, var(--cream) 85%, transparent); border: 1.5px solid transparent; cursor: pointer;
  transition: border-color .3s, background .3s, transform .4s cubic-bezier(.2,.7,.2,1);
}
.plan:hover { transform: translateY(-2px); }
.plan input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.plan:has(input:checked) { border-color: var(--ink); background: var(--paper); }
.plan:has(input:focus-visible) { outline: 2px solid var(--red); outline-offset: 3px; }
.plan__springs { display: flex; gap: 5px; height: 14px; margin-bottom: 6px; }
.plan__springs i { width: 22px; height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12'%3E%3Cpath d='M0 6h2l2-5 3 10 3-10 3 10 3-10 3 10 1-5h2' fill='none' stroke='%23BB5137' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.plan__name { font: 400 clamp(1.2rem, 5vw, 1.45rem)/1.1 var(--serif); }
.plan__what { font-size: .86rem; line-height: 1.35; color: var(--ink-soft); }
.plan__price { font: 400 1.3rem/1 var(--serif); margin-top: 8px; }
.plan__price small { font: 400 .8rem var(--sans); color: var(--ink-soft); margin-left: 2px; }
.packs { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--sand); }
.packs li { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 16px; padding: 14px 0; border-bottom: 1px solid var(--sand); }
.packs__qty { font-size: 1.05rem; }
.packs__price { font: 400 1.5rem/1 var(--serif); }
.packs__unit { grid-column: 1; font-size: .86rem; color: var(--ink-soft); }

/* FAQ */
.faq details { border-top: 1px solid var(--sand); }
.faq details:last-of-type { border-bottom: 1px solid var(--sand); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 40px 18px 0; position: relative; font: 400 1.22rem/1.25 var(--serif); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 4px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  background: linear-gradient(var(--ink), var(--ink)) center / 100% 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 1.5px 100% no-repeat;
  transition: transform .4s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--ink-soft); max-width: 62ch; padding-bottom: 10px; margin: 0; }

/* Fin de séance */
.end__stage { max-width: var(--max); margin: 0 auto; min-height: 70svh; padding: 0 var(--gutter) 28px; display: flex; flex-direction: column; justify-content: flex-end; }
.end__stage h2 { font-size: clamp(2.4rem, 10vw, 5rem); text-shadow: 0 0 40px var(--stage); }
.end__inner { background: var(--brown); color: var(--paper); border-radius: 32px 32px 0 0; padding: clamp(36px, 7vw, 72px) var(--gutter) 36px; }
.end__inner > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
.end__cta { display: flex; flex-wrap: wrap; gap: 10px; }
.end__grid { display: grid; gap: 28px; margin-top: 44px; }
@media (min-width: 880px) { .end__grid { grid-template-columns: repeat(3, 1fr); } }
.end h3 { font-size: 1.2rem; margin-bottom: 10px; color: #F6DCCB; }
.end__inner p { color: rgba(251,246,241,.85); }
.end__nav { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(251,246,241,.2); font-size: .92rem; }
.end__nav a { text-decoration: none; color: rgba(251,246,241,.85); }
.end__nav a:hover { color: var(--paper); text-decoration: underline; }
.end__legal { margin-top: 24px; font-size: .8rem; }
.end__inner .end__legal { color: rgba(251,246,241,.6); }

/* Sans 3D (vieux navigateur) : le site reste complet, posé sur le fond crème */
.no-3d .beat__title, .no-3d .end__stage { min-height: 0; padding-top: 72px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ——— Téléphone : la machine dans une fenêtre fixe en haut, le contenu défile dessous ———
   Sur petit écran, une 3D en fond derrière le texte crée forcément chevauchements ou trous.
   Ici elle ne quitte jamais l'écran et le texte ne passe jamais dessus ; la caméra change de plan à chaque section. */
@media (max-width: 879px) {
  :root { --head: 76px; --stage: clamp(230px, 38svh, 360px); }
  .scene {
    inset: auto 0 auto 0; top: var(--head); height: var(--stage); z-index: 40;
    border-radius: 0 0 26px 26px;
    box-shadow: 0 18px 40px -24px rgba(43,31,25,.45);
  }
  .hotspots { inset: auto 0 auto 0; top: var(--head); height: var(--stage); z-index: 41; overflow: hidden; }
  /* sur petit écran, juste le numéro : la légende est dans le texte juste en dessous */
  .hotspots span { font-size: 0; gap: 0; padding: 3px; }
  main { padding-top: var(--stage); }

  .hero { min-height: 0; justify-content: flex-start; padding: 26px var(--gutter) 40px; pointer-events: auto; gap: 18px; }
  .hero h1 { font-size: clamp(2.1rem, 9.6vw, 3rem); max-width: none; text-shadow: none; }

  .beat { padding-bottom: 28px; }
  .beat__title { min-height: 0; padding: 56px 0 22px; }
  .beat h2 { font-size: clamp(2rem, 8.6vw, 2.8rem); text-shadow: none; }
  .beat--dark { background: var(--night); padding-bottom: 36px; }
  .beat--dark .panel { background: rgba(255,255,255,.04); }

  .end__stage { min-height: 0; padding-top: 56px; }
  .end__stage h2 { font-size: clamp(2.2rem, 9.6vw, 3rem); text-shadow: none; }
}