/* L'accueil porte de l'écosystème (20.10.2026) : le prototype validé par Johann (l'Orbe, v3),
   intégré au site. Une section épinglée de neuf écrans : la scène reste collée en haut pendant
   que le défilement fait avancer le récit (`ecosysteme-accueil.js`). Tout est rangé sous
   `.recit-sphere` : rien ici ne touche au reste de la vitrine. */
.recit-sphere {
  --or: #C29A4B; --or-clair: #E3C88C; --or-sombre: #7A5D22;
  --encre-s: #1B1A17; --encre-douce-s: #4A463F; --accent-s: var(--or-sombre);
  --gouttiere-s: clamp(16px, 4.2vw, 64px);
  position: relative; height: 900vh; background: #F5F3EE; color: var(--encre-s);
}
body[data-clair="0"] .recit-sphere { --encre-s: #F3EEE4; --encre-douce-s: #CFC6B6; --accent-s: var(--or-clair); }
.recit-sphere .scene { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.recit-sphere .fond, .recit-sphere .fond > div { position: absolute; inset: 0; }
.recit-sphere .monde-systeme { position: absolute; inset: 0; }
.recit-sphere .recit article { position: absolute; z-index: 10; opacity: 0; color: var(--encre-s); }
.recit-sphere .recit article[data-temps="0"] { left: var(--gouttiere-s); top: 22vh; width: min(520px, 38vw); opacity: 1; }
.recit-sphere .recit article:not([data-temps="0"]) { right: var(--gouttiere-s); top: 14vh; width: min(390px, 27vw); }
.recit-sphere .mot-cle { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-s); margin-bottom: 18px; display: flex; gap: 10px; align-items: center; }
.recit-sphere .mot-cle i { width: 26px; height: 1px; background: var(--or); display: inline-block; }
.recit-sphere h1 { font-family: "Marcellus", serif; font-weight: 400; font-size: clamp(36px, 4.2vw, 60px); line-height: 1.04; color: var(--encre-s); text-wrap: balance; margin: 0; }
.recit-sphere h1 em { font-style: normal; color: var(--accent-s); display: block; }
.recit-sphere h2 { font-family: "Marcellus", serif; font-weight: 400; font-size: clamp(26px, 2.3vw, 34px); line-height: 1.1; color: var(--encre-s); text-wrap: balance; margin: 0; }
.recit-sphere p { margin: 14px 0 0; font-size: 15px; line-height: 1.6; color: var(--encre-douce-s); max-width: 46ch; text-wrap: pretty; }
.recit-sphere .gestes { margin-top: 22px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.recit-sphere .bouton { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 2px; font-size: 14px; font-weight: 500; text-decoration: none; background: var(--or); color: #17140F; }
body[data-clair="1"] .recit-sphere .bouton { background: #006039; color: #F7F3EA; }
.recit-sphere .lien { font-size: 14px; color: var(--encre-s); border-bottom: 1px solid var(--or); padding-bottom: 3px; text-decoration: none; }
.recit-sphere .metiers { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px; }
.recit-sphere .metiers a { font-size: 13px; padding: 9px 14px; min-height: 36px; border: 1px solid color-mix(in srgb, var(--encre-s) 18%, transparent); border-radius: 40px; color: var(--encre-s); text-decoration: none; }
.recit-sphere .metiers a.lit, .recit-sphere .metiers a:hover { border-color: var(--or); background: color-mix(in srgb, var(--or) 14%, transparent); }
.recit-sphere .recit .annonce-cartouche { margin-bottom: 22px; }
.recit-sphere .choix { margin-top: 22px; display: grid; }
.recit-sphere .choix div { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center; padding: 10px 0; border-top: 1px solid color-mix(in srgb, var(--encre-s) 14%, transparent); }
.recit-sphere .choix div:last-child { border-bottom: 1px solid color-mix(in srgb, var(--encre-s) 14%, transparent); }
.recit-sphere .choix strong { font-family: "Marcellus", serif; font-weight: 400; font-size: 18px; }
.recit-sphere .choix small { display: block; font-size: 12px; color: var(--encre-douce-s); font-family: "Inter", sans-serif; }
.recit-sphere .choix a { font-size: 13px; color: var(--encre-s); min-height: 24px; }
.recit-sphere .choix a.s { color: var(--accent-s); }
.recit-sphere .mention { display: none; }
.recit-sphere .mot { display: inline-block; clip-path: inset(-.2em -.08em -.3em -.08em); }
.recit-sphere .mot > span { display: inline-block; }
/* Sans script : le récit se lit d'un bloc, sans scène épinglée. */
.recit-sphere:not(.vivant) { height: auto; }
.recit-sphere:not(.vivant) .scene { position: relative; height: auto; overflow: visible; }
.recit-sphere:not(.vivant) .recit article { position: relative; opacity: 1; inset: auto; width: auto; max-width: 640px; margin: 0 auto; padding: 48px var(--gouttiere-s); }
@media (orientation: portrait) {
  .recit-sphere .recit article[data-temps="0"] { top: auto; bottom: 6svh; width: auto; right: var(--gouttiere-s); }
  .recit-sphere .recit article:not([data-temps="0"]) { left: var(--gouttiere-s); right: var(--gouttiere-s); width: auto; top: auto; bottom: 5svh; }
  .recit-sphere h1 { font-size: 34px; }
  .recit-sphere h2 { font-size: 26px; }
  .recit-sphere .metiers { margin-top: 16px; }
  .recit-sphere .choix div { padding: 8px 0; } .recit-sphere .choix strong { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .recit-sphere .mot > span { transform: none !important; } }

/* La page Gestion : trois maisons, une grille ancrée aux bords comme le reste de la vitrine. */
.page-gestion { padding: clamp(48px, 8vw, 112px) clamp(16px, 4.2vw, 64px); max-width: 1760px; margin: 0 auto; }
.page-gestion-entete h1 { font-family: "Marcellus", serif; font-weight: 400; font-size: clamp(34px, 4vw, 56px); line-height: 1.06; margin: 14px 0 0; }
.page-gestion-grille { margin-top: clamp(32px, 5vw, 64px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 0; border-top: 1px solid rgba(194,154,75,.45); }
.page-gestion-grille article { padding: 32px clamp(0px, 2vw, 32px) 36px 0; border-bottom: 1px solid rgba(194,154,75,.25); display: flex; flex-direction: column; gap: 8px; }
.page-gestion-grille .pierre { color: #C29A4B; margin-bottom: 8px; }
.page-gestion-grille strong { font-family: "Marcellus", serif; font-weight: 400; font-size: 26px; }
.page-gestion-grille p { margin: 6px 0 12px; line-height: 1.6; max-width: 46ch; }
.page-gestion-grille .lien { margin-top: auto; align-self: flex-start; color: inherit; border-bottom: 1px solid #C29A4B; padding-bottom: 3px; text-decoration: none; min-height: 24px; }
.page-gestion-grille .gamme-etat { margin-top: auto; align-self: flex-start; }

/* ——— Le CTA final, mieux mis en valeur (Johann, 21.10.2026 : « mets juste mieux en valeur le CTA
   final à la fin de la landing »). Ni texte ni adresse ne changent : seul l'habillage.
   « S'abonner » devient un bouton plein dans chaque ligne du choix, « Découvrir » un lien souligné
   d'or ; sous le compte à rebours, « En savoir plus » devient un bouton à filet d'or. ——— */
.recit-sphere .choix a { display: inline-flex; align-items: center; min-height: 36px; }
.recit-sphere .choix a:not(.s) { text-decoration: underline; text-decoration-color: var(--or); text-underline-offset: 5px; }
.recit-sphere .choix a.s {
  padding: 0 14px; border-radius: 2px; font-weight: 500; text-decoration: none;
  background: var(--or); color: #17140F; transition: filter .22s cubic-bezier(.4, 0, .2, 1);
}
body[data-clair="1"] .recit-sphere .choix a.s { background: #006039; color: #F7F3EA; }
.recit-sphere .choix a.s:hover, .recit-sphere .choix a.s:focus-visible { filter: brightness(1.12); }
.recit-sphere .choix div:hover { background: color-mix(in srgb, var(--or) 7%, transparent); }
.recit-sphere ~ .rebours .rebours-lien {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 8px; padding: 0 24px;
  border: 1px solid var(--or); border-radius: 2px; font-size: 14px; letter-spacing: .02em;
  transition: background-color .22s cubic-bezier(.4, 0, .2, 1), color .22s cubic-bezier(.4, 0, .2, 1);
}
.recit-sphere ~ .rebours .rebours-lien:hover, .recit-sphere ~ .rebours .rebours-lien:focus-visible {
  background: var(--or); color: #17140F; text-decoration: none;
}
@media (max-width: 380px) { .recit-sphere .choix a.s { padding: 0 10px; } }
/* Les boutons d'une même colonne s'alignent d'une ligne à l'autre (chaque ligne est sa propre grille). */
@media (min-width: 1200px), (orientation: portrait) and (min-width: 481px) {
  .recit-sphere .choix div { grid-template-columns: minmax(0, 1fr) auto 152px; }
  .recit-sphere .choix a.s { justify-content: center; }
}

/* ——— Téléphone couché et tablette debout (21.10.2026, mesurés temps par temps) ———
   Couché, le moteur pose le récit à côté du système (comme au bureau) : sous 500 px de haut, le texte
   se resserre et part sous la barre (le texte de l'accueil passait 47 px sous la barre à 667 × 375, le
   choix 215 px sous le bord à 844 × 390). Debout, la tablette prend la disposition du téléphone :
   à 768 px, le choix débordait de sa colonne de 207 px. Aucun texte ne change. */
@media (orientation: portrait) {
  .recit-sphere .recit article[data-temps="0"],
  .recit-sphere .recit article:not([data-temps="0"]) { max-width: 560px; }
  .recit-sphere .recit article:not([data-temps="0"]) { margin-inline: auto; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .recit-sphere .recit article[data-temps="0"] { left: var(--gouttiere-s); right: auto; top: 70px; bottom: auto; width: min(460px, 48vw); }
  .recit-sphere .recit article:not([data-temps="0"]) { right: var(--gouttiere-s); left: auto; top: 80px; bottom: auto; width: min(420px, 44vw); }
  .recit-sphere h1 { font-size: 26px; line-height: 1.05; }
  .recit-sphere h2 { font-size: 21px; line-height: 1.1; }
  .recit-sphere .recit p { font-size: 13px; line-height: 1.45; margin-top: 6px; }
  .recit-sphere .mot-cle { margin-bottom: 8px; font-size: 11px; }
  .recit-sphere .recit .annonce-cartouche { margin-bottom: 8px; display: flex; flex-flow: row wrap; align-items: center; gap: 2px 8px; padding: 4px 10px; }
  .recit-sphere .recit .annonce-cartouche > * { font-size: 12px; margin: 0; }
  .recit-sphere .gestes { margin-top: 8px; gap: 8px 16px; }
  .recit-sphere .bouton { min-height: 36px; padding: 0 14px; font-size: 13px; }
  .recit-sphere .metiers { margin-top: 8px; gap: 6px; }
  .recit-sphere .metiers a, .recit-sphere .metiers span { padding: 5px 10px; font-size: 12px; }
  .recit-sphere .choix { margin-top: 6px; }
  .recit-sphere .choix div { padding: 0; gap: 10px; }
  .recit-sphere .choix strong { font-size: 15px; }
  .recit-sphere .recit article[data-temps="8"] { width: min(480px, 54vw); }
  .recit-sphere .choix small { font-size: 12px; }
  .recit-sphere .choix a { min-height: 30px; }
  .recit-sphere .choix a.s { padding: 0 10px; }
  .recit-sphere .choix a { white-space: nowrap; }
}
/* Debout, le rappel flottant de l'Hôtel des ventes couvrait les actions du récit, posé en bas
   (« Voir les abonnements » sous la carte, tablette 768 × 1024, 21.10.2026). Même décision que pour le
   téléphone (marketing.css) : le bandeau et le cartouche portent déjà l'annonce. */
@media (orientation: portrait) { .recit-sphere ~ .annonce-rappel { display: none; } }