/* ============================================================================
   L'Éclaireuse : thème + composants de la page.
   Le sol vient de la charte ruche (CHARTE.md du repo eclaireuse-landing) :
   crème, encre brune, ambre miel, vert QDP. La charte NOMME ces couleurs,
   c'est ce qui autorise la palette crème/ambre ici.
   ========================================================================== */

@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Jour : la moitié claire de la page. */
  --sc-canvas:      #FDFBF6;
  --sc-surface:     #FFFFFF;
  --sc-ink:         #3B2F2F;
  --sc-ink-soft:    #6E6155;
  --sc-accent:      #E8A33D;
  --sc-accent-ink:  #2A211C;

  --sc-font-display: "Fraunces", Georgia, serif;
  --sc-font-text:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                     "Helvetica Neue", Arial, sans-serif;

  --sc-shadow-color: 22 20% 12%;
  --sc-r-sm: 8px; --sc-r-md: 12px; --sc-r-lg: 16px;

  /* Teintes maison hors rôles engine */
  --miel-pale:  #F7EDD8;
  --encre-nuit: #2A211C;
  --encre-plus: #221A15;
  --vert-ok:    #34624D;
  --hex: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
}

/* L'ambre à 2.0:1 sur crème ne tient pas un anneau de focus : encre sur les
   fonds clairs, l'ambre reprend le rôle sur les fonds sombres. Même famille,
   deux arrêts. */
:focus-visible { outline-color: var(--sc-ink); }
.sombre :focus-visible, .sombre:focus-visible { outline-color: var(--sc-accent); }

.sc-display { font-weight: 560; }

/* ------------------------------------------------------------------ barre -- */
/* La barre n'existe pas tant que le héro se joue : tout le focus sur
   l'orage. Elle descend une fois le rangement passé. */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sc-4);
  padding: var(--sc-3) var(--sc-gutter);
  background: color-mix(in oklab, #FDFBF6 82%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in oklab, #3B2F2F 8%, transparent);
  transform: translateY(-110%);
  transition: transform var(--sc-d-slow) var(--sc-ease-out);
}
.bar--visible { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .bar { transition: none; } }
.bar__marque {
  display: inline-flex; align-items: center; gap: var(--sc-2);
  text-decoration: none; color: var(--sc-ink); font-weight: 700;
}
.bar__marque svg { color: var(--sc-accent); }
.bar__nav { display: flex; align-items: center; gap: var(--sc-5); font-size: var(--sc-t-sm); }
.bar__nav a { text-decoration: none; }
.bar__nav a:hover { text-decoration: underline; }
.bar__sections { display: flex; gap: var(--sc-5); }
@media (max-width: 760px) { .bar__sections, .bar__connexion { display: none; } }

.bouton {
  display: inline-block;
  background: var(--sc-accent); color: var(--sc-accent-ink) !important;
  font-weight: 600; text-decoration: none !important;
  padding: 0.62em 1.2em; border-radius: var(--sc-r-md);
  box-shadow: var(--sc-e1);
  transition: transform var(--sc-d-fast) var(--sc-ease-out), box-shadow var(--sc-d-fast) var(--sc-ease-out);
}
.bouton:hover { transform: translateY(-1px); box-shadow: var(--sc-e2); }
.bouton:active { transform: translateY(1px) scale(0.98); }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.saut-contenu {
  position: fixed; left: var(--sc-4); top: -100%; z-index: 100;
  background: var(--sc-surface); color: var(--sc-ink);
  padding: var(--sc-2) var(--sc-4); border-radius: var(--sc-r-sm);
}
.saut-contenu:focus-visible { top: var(--sc-4); }

/* ---------------------------------------------------------- héro : l'orage -- */
.hero-stage { overflow: clip; }

.hero-titre {
  position: absolute; inset: 0;
  display: grid; place-content: center; text-align: center;
  gap: var(--sc-4); padding: var(--sc-gutter);
  will-change: transform, opacity;
}
.hero-titre h1 {
  font-size: clamp(3rem, 2rem + 9vw, 9.5rem);
  font-weight: 600; letter-spacing: -0.03em;
  font-variation-settings: "opsz" 144;
}
.hero-tag { color: var(--sc-ink-soft); font-size: var(--sc-t-base); margin: 0 auto; max-width: 34ch; }

/* Le lockup : sweep ambre sous "Éclaireuse", une abeille perchée dessus
   (le même dessin que les autres, ailes battantes comprises). */
.hero-titre .mot { position: relative; display: inline-block; z-index: 0; }
.hero-titre .sweep {
  position: absolute; left: 4%; right: -2%; bottom: 0.04em; height: 0.16em;
  background: var(--sc-accent); border-radius: 999px; z-index: -1;
  opacity: 0.85; rotate: -1deg;
}
.abeille.abeille-perchee {
  right: -0.14em; top: -0.38em; left: auto;
  width: 0.42em; height: 0.42em; transform: rotate(14deg);
}

/* Les abeilles de l'attente : dessin de Robin, couleurs charte. */
.abeille { position: absolute; width: 46px; height: 46px; will-change: transform; }
.abeille-aile  { fill: color-mix(in oklab, #3B2F2F 12%, transparent); }
.abeille-corps { fill: #3B2F2F; }
.abeille-trait { stroke: #3B2F2F; stroke-width: 2; stroke-linecap: round; fill: none; }
.abeille-rayure { fill: var(--sc-accent); }
.abeille--1 { top: 26%; left: 30%; }
.abeille--2 { top: 62%; right: 28%; width: 34px; height: 34px; }
@media (prefers-reduced-motion: no-preference) {
  .abeille--1 { animation: butine 9s ease-in-out infinite alternate; }
  .abeille--2 { animation: butine 7s ease-in-out infinite alternate-reverse; }
  .abeille .abeille-aile { animation: battement 0.18s ease-in-out infinite alternate; transform-origin: 32px 24px; }
}
@keyframes butine {
  0%   { transform: translate(0, 0) rotate(-4deg); }
  35%  { transform: translate(34px, -22px) rotate(5deg); }
  70%  { transform: translate(-18px, 14px) rotate(-7deg); }
  100% { transform: translate(22px, 6px) rotate(3deg); }
}
@keyframes battement { from { transform: scaleY(1); } to { transform: scaleY(0.55); } }

/* Les cartes-réponses. Posées par storm.js, jamais par le layout.
   Z : la scène tout en bas, la boîte, puis les cartes (elles se posent SUR
   le panneau), le pitch au sommet. */
.scene { z-index: 1; }
.orage { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.ruche-boite { z-index: 2; }
.pitch-zone { z-index: 4; }

/* La scène de la phase C : la coworkeuse devant sa boîte mail. */
.scene {
  position: absolute;
  top: 10vh; right: max(var(--sc-gutter), 3vw); bottom: 10vh;
  width: min(48vw, 760px);
  border-radius: var(--sc-r-lg);
  overflow: hidden;
  box-shadow: var(--sc-e3);
  opacity: 0; will-change: opacity, transform; transform: translateY(24px) scale(0.985);
}
/* object-position calé à gauche pour que le laptop (la cible du rangement)
   survive au recadrage cover à toutes les largeurs. storm.js utilise la même
   fraction (0.15) pour projeter l'écran du laptop en coordonnées de page. */
.scene img { width: 100%; height: 100%; object-fit: cover; object-position: 15% 50%; }
@media (max-width: 860px) {
  .scene { top: auto; left: var(--sc-gutter); right: var(--sc-gutter); bottom: 2vh; height: 36vh; width: auto; }
}
.carte-reponse {
  position: absolute; top: 0; left: 0;
  width: min(320px, 78vw);
  background: var(--sc-surface);
  border: 1px solid color-mix(in oklab, #3B2F2F 10%, transparent);
  border-radius: var(--sc-r-lg);
  box-shadow: var(--sc-e2), var(--sc-edge);
  padding: var(--sc-3) var(--sc-4);
  display: grid; grid-template-columns: 44px 1fr auto; column-gap: var(--sc-3);
  align-items: center;
  will-change: transform;
  visibility: hidden; /* storm.js les révèle une par une */
}
/* Le cadre alvéole : un hexagone ambre qui serre la photo. */
.hexcadre {
  display: grid; clip-path: var(--hex);
  background: var(--sc-accent); padding: 3px;
}
.hexcadre img { width: 100%; height: 100%; object-fit: cover; clip-path: var(--hex); }
.carte-reponse .hexcadre { grid-row: span 2; width: 46px; height: 51px; }
.carte-reponse b { font-size: var(--sc-t-sm); line-height: 1.3; }
.carte-reponse time { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); align-self: start; }
.carte-reponse p {
  grid-column: 2 / 4; margin: 0;
  font-size: var(--sc-t-sm); line-height: 1.4; color: var(--sc-ink-soft);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.carte-reponse .societe { color: var(--vert-ok); font-weight: 600; font-size: var(--sc-t-xs); }


.pitch-zone {
  position: absolute;
  top: 50%; left: max(var(--sc-gutter), 4vw);
  transform: translateY(-50%);
  width: min(440px, 36vw);
}
.pitch-fond {
  position: absolute; inset: 0;
  background: color-mix(in oklab, #FDFBF6 96%, transparent);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  border: 1px solid color-mix(in oklab, #3B2F2F 8%, transparent);
  border-radius: var(--sc-r-lg);
  box-shadow: var(--sc-e2);
  opacity: 0;
}
.hero-pitch {
  position: relative;
  padding: var(--sc-6);
  display: grid; gap: var(--sc-4);
}
.hero-pitch h2 { font-size: var(--sc-t-2xl); }
.hero-pitch .sc-body { color: var(--sc-ink-soft); }
.hero-pitch .bouton { justify-self: start; font-size: var(--sc-t-base); padding: 0.7em 1.5em; }
.renvoi { font-size: 0.45em; color: var(--sc-ink-soft); font-weight: 400; }

@media (max-width: 860px) {
  .hero-titre h1 { font-size: clamp(2.6rem, 1.4rem + 11vw, 4.4rem); }
  .pitch-zone {
    top: auto; bottom: 44vh; left: var(--sc-gutter); right: var(--sc-gutter);
    width: auto; transform: none;
  }
  .hero-pitch { padding: var(--sc-4); gap: var(--sc-3); }
  .hero-pitch h2 { font-size: var(--sc-t-xl); }
  .hero-pitch .sc-body { font-size: var(--sc-t-sm); }
  .pitch-plus { display: none; } /* la carte "boîte de réception" le montre déjà */
  .ruche-boite { top: auto; bottom: 2vh; right: var(--sc-gutter); left: var(--sc-gutter); width: auto; height: 38vh; }
  .carte-reponse { width: min(280px, 82vw); padding: var(--sc-2) var(--sc-3); }
}

/* ------------------------------------------------------------- le trajet -- */
/* Respiration entre les actes : un moment où plus rien ne bouge avant que
   l'acte suivant prenne la main. Sans elle, l'animation du rail démarre au
   ras de la section précédente et la reprise est brutale. */
.act-trajet {
  padding-top: var(--sc-6); /* le pin au-dessus a déjà donné l'air */
  padding-bottom: calc(var(--sc-section) + 20vh);
}
.trajet-tete { max-width: 52ch; }
.trajet {
  list-style: none; margin: var(--sc-8) 0 0; padding: 0; position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sc-7);
}
.vol {
  position: absolute; inset: -30px 0 auto; height: 90px; width: 100%;
  pointer-events: none; overflow: visible;
}
.vol path {
  fill: none; stroke: var(--sc-accent); stroke-width: 2.5;
  stroke-dasharray: 7 9; stroke-linecap: round;
}
.trajet-etape { position: relative; padding-top: var(--sc-8); }
.hexnum {
  position: absolute; top: 0; left: 0;
  width: 52px; height: 58px; display: grid; place-content: center;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  clip-path: var(--hex); font-weight: 700; font-family: var(--sc-font-display);
  font-size: var(--sc-t-lg);
}
.trajet-etape h3 { font-family: var(--sc-font-display); font-size: var(--sc-t-xl); font-weight: 560; margin: 0 0 var(--sc-3); letter-spacing: var(--sc-track-snug); }
.trajet-etape p { margin: 0; color: var(--sc-ink-soft); text-wrap: pretty; }
.trajet .abeille { position: absolute; top: -8px; right: 6%; transform: rotate(24deg); }
@media (max-width: 860px) {
  .trajet { grid-template-columns: 1fr; gap: var(--sc-7); }
  .vol { display: none; }
}

/* ---------------------------------------------------------- les voisins -- */
/* Stage opaque : sans lui, le canvas du drift (en route vers l'encre des
   tarifs) transparaît en taupe boueux pendant la couture. */
#voisins [data-sc-stage] { background: var(--miel-pale); }
.rail { display: flex; align-items: stretch; gap: var(--sc-6); padding-inline: var(--sc-gutter); height: 100%; align-items: center; }
.rail > * { flex: 0 0 auto; }
.rail__lead { width: min(420px, 80vw); display: grid; gap: var(--sc-4); align-content: center; }
.rail__lead h2 { font-size: var(--sc-t-3xl); }
.voisin {
  width: min(400px, 78vw);
  background: var(--sc-surface);
  border: 1px solid color-mix(in oklab, #3B2F2F 10%, transparent);
  border-radius: var(--sc-r-lg);
  box-shadow: var(--sc-e1), var(--sc-edge);
  padding: var(--sc-6);
  display: grid; gap: var(--sc-4); align-content: start; align-self: center;
}
.voisin .gain { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-lg); margin: 0; letter-spacing: var(--sc-track-snug); }
.voisin blockquote { margin: 0; color: var(--sc-ink); font-size: var(--sc-t-sm); line-height: 1.55; text-wrap: pretty; }
.voisin figcaption { display: flex; align-items: center; gap: var(--sc-3); }
.voisin .hexcadre { width: 68px; height: 75px; flex: 0 0 auto; }
.voisin figcaption b { display: block; font-size: var(--sc-t-sm); }
.voisin figcaption small { color: var(--sc-ink-soft); }
.rail__fin { width: min(320px, 70vw); display: grid; gap: var(--sc-3); align-content: center; }
.rail__fin p { font-family: var(--sc-font-display); font-size: var(--sc-t-xl); font-weight: 560; margin: 0; letter-spacing: var(--sc-track-snug); }
.rail__fin a { color: var(--sc-ink); }

/* ------------------------------------------------- la nuit : tarifs + faq -- */
.sombre { --sc-ink: #F5EDE0; --sc-ink-soft: #C7B8A6; --sc-surface: #33291F;
  --sc-shadow-color: 22 30% 4%;
  color: var(--sc-ink);
}
/* Fond opaque côté jour : le panneau nuit passe dessus au wipe, le canvas
   du drift ne se voit jamais à la couture (il devient boueux à mi-chemin). */
/* Même respiration avant la bascule jour -> nuit : le wipe des tarifs
   arrive après une bande calme, pas au ras du rail. */
.act-tarifs { padding-block: 16vh 0; background: var(--miel-pale); }
/* Un seul écran : tête, deux cartes, une note. Rien à scroller sur desktop. */
.tarifs-panneau {
  background: var(--encre-nuit);
  min-height: 100vh;
  display: grid; align-content: center;
  padding-block: var(--sc-7);
}
.tarifs-un-ecran { display: grid; gap: var(--sc-6); justify-items: center; text-align: center; }
.tarifs-tete { display: grid; gap: var(--sc-3); max-width: 56ch; }
.tarifs-tete h2 { font-size: var(--sc-t-3xl); }
.tarifs-tete .sc-body { margin-inline: auto; }
.cartes-tarifs {
  display: grid; grid-template-columns: repeat(2, minmax(280px, 400px));
  gap: var(--sc-6); perspective: 1200px; width: 100%; justify-content: center;
}
.carte-tarif {
  position: relative; text-align: left;
  background: var(--sc-surface);
  border: 1px solid color-mix(in oklab, #F5EDE0 10%, transparent);
  border-radius: var(--sc-r-lg);
  box-shadow: var(--sc-e2);
  padding: var(--sc-6);
  display: grid; gap: var(--sc-3); align-content: start;
}
.carte-tarif--reco { border-color: color-mix(in oklab, var(--sc-accent) 55%, transparent); }
.badge-tarif {
  position: absolute; top: calc(-1 * var(--sc-3)); left: var(--sc-6);
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-size: var(--sc-t-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0.3em 0.9em; border-radius: var(--sc-r-sm);
}
.carte-tarif h3 { font-family: var(--sc-font-display); font-size: var(--sc-t-lg); font-weight: 560; margin: 0 0 var(--sc-2); }
.prix { font-size: var(--sc-t-lg); margin: 0; font-variant-numeric: tabular-nums; }
/* Le chiffre qui claque : c'est lui la vedette de la carte. */
.prix-reponse {
  font-family: var(--sc-font-display); font-weight: 600; line-height: 1.05;
  font-size: var(--sc-t-2xl); color: var(--sc-accent); margin: 0;
  font-variant-numeric: tabular-nums;
}
.prix-reponse sup { font-size: 0.4em; }
.prix-detail { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); margin: 0 0 var(--sc-2); }
.carte-tarif .bouton { justify-self: start; }
.engagement { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); margin: 0; }
.ancrage-note { max-width: 72ch; color: var(--sc-ink-soft); font-size: var(--sc-t-xs); margin: 0; text-wrap: pretty; }
.ancrage-note a { color: var(--sc-accent); }
@media (max-width: 860px) {
  .tarifs-panneau { min-height: 0; }
  .cartes-tarifs { grid-template-columns: minmax(260px, 400px); }
}

/* FAQ, compacte : de l'information, pas de l'expérience. */
.act-faq { background: var(--encre-nuit); padding-block: var(--sc-9); }
.faq-grille { display: grid; grid-template-columns: minmax(240px, 4fr) 8fr; gap: var(--sc-8); }
.faq-grille h2 { font-size: var(--sc-t-2xl); }
.faq-liste { display: grid; }
.faq-item { border-bottom: 1px solid color-mix(in oklab, #F5EDE0 12%, transparent); }
.faq-item:first-child { border-top: 1px solid color-mix(in oklab, #F5EDE0 12%, transparent); }
.faq-item summary {
  cursor: pointer; list-style: none; position: relative;
  padding: var(--sc-4) var(--sc-7) var(--sc-4) 0;
  font-weight: 600;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; position: absolute; right: 4px; top: 50%;
  width: 12px; height: 12px; translate: 0 -50%;
  background: currentColor;
  clip-path: polygon(50% 0, 100% 40%, 78% 40%, 78% 100%, 22% 100%, 22% 40%, 0 40%);
  rotate: 180deg;
  transition: rotate var(--sc-d-fast) var(--sc-ease-out);
}
.faq-item[open] summary::after { rotate: 0deg; }
.faq-item p { margin: 0 0 var(--sc-5); color: var(--sc-ink-soft); max-width: 62ch; text-wrap: pretty; }
@media (max-width: 860px) { .faq-grille { grid-template-columns: 1fr; gap: var(--sc-5); } }

/* --------------------------------------------------------------- le pied -- */
.pied {
  background: var(--encre-plus);
  padding: var(--sc-8) var(--sc-gutter) var(--sc-7);
  display: grid; gap: var(--sc-3); justify-items: center;
  font-size: var(--sc-t-xs); color: var(--sc-ink-soft);
}
.pied a { color: var(--sc-ink-soft); }
.pied-note { max-width: 72ch; text-align: center; text-wrap: pretty; }
.pied-liens { display: flex; gap: var(--sc-5); flex-wrap: wrap; justify-content: center; }
.mentions { max-width: 900px; }
.mentions summary { cursor: pointer; text-align: center; font-weight: 600; }
.mentions dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sc-4); margin: var(--sc-4) 0 0; text-align: left; }
.mentions dt { font-weight: 700; margin-bottom: 2px; }
.mentions dd { margin: 0; }