/* Ruela AI : feuille de style du site ruela.fr (statique, aucune ressource externe). Direction « atelier de nuit ».
   Palette : nuit bleu profond, ambre de la lanterne, vert-de-gris (dôme de Lumi) en accent ; jamais de noir pur.
   Mascotte : Lumi (images/lumi/). Scène d'accueil interchangeable : voir « Scène de l'accueil ».
   Polices locales (OFL, licences dans polices/) : Jost (titres), Inter (texte), Fraunces italique (un mot du titre).
   Aucun style en ligne ni attribut style= (CSP du site) ; seul ruela.js pose des variables (CSSOM). */

@font-face { font-family: 'Jost'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('polices/jost-latin-wght-normal.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 500; font-display: swap; src: url('polices/fraunces-latin-500-italic.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('polices/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('polices/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('polices/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('polices/inter-latin-700-normal.woff2') format('woff2'); }

:root {
  /* nuit */
  --fond: #0A1230;
  --fond-2: #0D1738;
  --fond-3: #070D24;
  --surface: #131E45;
  --surface-2: #1A2753;
  --trait: #263463;
  /* texte */
  --texte: #F6F1E7;
  --texte-2: #C3CAE0;
  --texte-3: #9BA6C7;
  /* lanterne */
  --ambre: #FFB54D;
  --ambre-clair: #FFD68C;
  --laiton: #D6A24A;
  --vdg: #5FCDB2;
  --vdg-fonce: #3B7A6B;
  --corail: #FF8E76;
  /* écran du téléphone (clair) */
  --ecran: #FBF6EE;
  --ecran-2: #F2EADC;
  --encre: #1F2A4D;
  --encre-2: #4A5372;
  /* dégradé à nous : la lumière de la lanterne qui passe au cuivre patiné */
  --degrade: linear-gradient(100deg, #FFBE55 0%, #FFD991 50%, #A9E8D2 100%);
  --titre: 'Jost', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --texte-police: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --accent-police: 'Fraunces', Georgia, 'Times New Roman', serif;
  --gouttiere: 16px;
  color-scheme: dark;
}
@supports (background: linear-gradient(in oklab, red, blue)) {
  :root { --degrade: linear-gradient(100deg in oklab, #FFBE55 0%, #FFD991 50%, #A9E8D2 100%); }
}
@media (min-width: 768px) { :root { --gouttiere: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
/* scroll-padding : ni les ancres ni l'élément qui reçoit le focus au clavier ne passent sous l'en-tête collé (WCAG 2.4.11) */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; background: var(--fond); }
@media (max-width: 859px) { html { scroll-padding-top: 112px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--texte-police);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--texte);
  background: var(--fond);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
h1, h2, h3 { font-family: var(--titre); font-weight: 600; line-height: 1.06; margin: 0; letter-spacing: -0.02em; }
h1 em, h2 em { font-family: var(--accent-police); font-style: italic; font-weight: 500; letter-spacing: -0.01em; color: var(--ambre-clair); }
p { margin: 0; }
a { color: var(--ambre-clair); text-underline-offset: 3px; }
a:hover { color: #FFE6B8; }
:focus-visible { outline: 3px solid var(--ambre-clair); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgba(255, 181, 77, .35); color: #fff; }
svg { flex-shrink: 0; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lien-evitement { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--texte); color: var(--fond); font-weight: 600; text-decoration: none; }
.lien-evitement:focus { top: 12px; }
.conteneur { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--gouttiere); }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: 14px; border: 1px solid transparent;
  font: 600 1rem/1.2 var(--texte-police); text-decoration: none; text-align: center; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, filter .2s ease;
}
.bouton:hover { transform: translateY(-1px); }
.bouton-petit { min-height: 42px; padding: 0 16px; font-size: .95rem; border-radius: 12px; }
.bouton-grand { min-height: 58px; padding: 0 28px; font-size: 1.06rem; border-radius: 16px; }
.bouton-plein, .formulaire button.bouton { width: 100%; }
.bouton-degrade, .formulaire button.bouton {
  color: #0A1230; background: var(--degrade);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 14px 34px -14px rgba(255, 181, 77, .75), 0 0 0 1px rgba(255, 214, 140, .35);
}
.bouton-degrade:hover, .formulaire button.bouton:hover { color: #0A1230; filter: brightness(1.05) saturate(1.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 18px 40px -14px rgba(255, 181, 77, .9), 0 0 0 1px rgba(255, 214, 140, .5); }
.bouton-fleche { transition: transform .2s ease; }
.bouton-degrade:hover .bouton-fleche { transform: translateX(3px); }
.bouton-verre { color: var(--texte); background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.bouton-verre:hover { color: var(--texte); background: rgba(255, 255, 255, .11); border-color: rgba(255, 255, 255, .32); }
.bouton-clair { color: var(--fond); background: var(--texte); }
.bouton-clair:hover { color: var(--fond); background: #fff; }
@media (prefers-reduced-motion: reduce) { .bouton, .bouton-fleche { transition: none; } .bouton:hover { transform: none; } }

.etiquette { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: rgba(95, 205, 178, .16); color: #9FE6D3; border: 1px solid rgba(95, 205, 178, .35); }
.etiquette-bientot { background: rgba(255, 181, 77, .14); color: var(--ambre-clair); border-color: rgba(255, 181, 77, .4); }
.badge-exemple { display: inline-block; padding: 3px 9px; border-radius: 8px; font-size: .72rem; font-weight: 600; color: #FFE3B3; background: rgba(255, 181, 77, .12); border: 1px dashed rgba(255, 181, 77, .5); white-space: nowrap; }

/* ---------- En-tête ---------- */
.entete { position: sticky; top: 0; z-index: 50; background: rgba(10, 18, 48, .72); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid rgba(255, 255, 255, .07); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .entete { background: var(--fond); } }
.entete-ligne { display: flex; align-items: center; gap: 16px; min-height: 68px; flex-wrap: wrap; }
.marque { display: inline-flex; align-items: center; gap: 10px; color: var(--texte); text-decoration: none; margin: 0; }
.marque:hover { color: var(--texte); }
.marque-lanterne { filter: drop-shadow(0 0 10px rgba(255, 181, 77, .55)); }
.marque-nom { font: 600 1.32rem/1 var(--titre); letter-spacing: -0.01em; }
.marque-ai { font-weight: 500; color: var(--ambre-clair); }
.menu { margin-left: auto; }
.menu ul { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.menu a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--texte-2); font-size: .95rem; font-weight: 500; text-decoration: none; }
.menu a:hover { color: var(--texte); background: rgba(255, 255, 255, .06); }
.menu a[aria-current="page"] { color: var(--texte); box-shadow: inset 0 -2px 0 var(--ambre); border-radius: 10px 10px 4px 4px; }
.entete-action { margin-left: 8px; }
@media (max-width: 859px) {
  .entete-ligne { gap: 0 12px; min-height: 0; padding-top: 10px; }
  .entete-action { margin-left: auto; }
  .menu { order: 3; width: 100%; margin: 4px 0 2px; overflow-x: auto; scrollbar-width: none; }
  .menu::-webkit-scrollbar { display: none; }
  .menu ul { gap: 2px; justify-content: space-between; }
  .menu a { min-height: 40px; padding: 0 7px; font-size: .86rem; white-space: nowrap; }
  .menu li:first-child a { padding-left: 0; }
  .menu li:last-child a { padding-right: 0; }
}
@media (min-width: 560px) and (max-width: 859px) { .menu ul { justify-content: flex-start; gap: 10px; } }
@media (max-width: 359px) { .menu a { padding: 0 3px; font-size: .8rem; } }

/* ---------- Accueil ---------- */
.accueil { position: relative; padding: 30px 0 96px; overflow: clip; isolation: isolate; }
.accueil-lumieres {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 46% at 50% 68%, rgba(255, 181, 77, .20), transparent 70%),
    radial-gradient(38% 34% at 12% 18%, rgba(95, 205, 178, .13), transparent 70%),
    radial-gradient(34% 30% at 92% 30%, rgba(38, 52, 99, .55), transparent 70%),
    linear-gradient(180deg, #0A1230 0%, #0C1638 55%, #0A1230 100%);
}
.accueil-texte { position: relative; text-align: center; max-width: 1120px; }
.pastille { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; margin-bottom: 20px; border-radius: 999px; font-size: .88rem; font-weight: 500; color: var(--texte-2); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); }
@media (max-width: 519px) { .pastille-cible { display: none; } }
.pastille-point { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: var(--ambre); box-shadow: 0 0 0 4px rgba(255, 181, 77, .18), 0 0 14px rgba(255, 181, 77, .9); }
.accueil h1 { font-size: clamp(2.4rem, 4.4vw, 3.7rem); line-height: 1.04; letter-spacing: -0.03em; font-weight: 600; text-wrap: balance; }
.accueil h1 em { display: block; padding-right: .06em; font-size: 1.08em; line-height: 1.05; text-shadow: 0 0 38px rgba(255, 181, 77, .45); }
.chapo { max-width: 40rem; margin: 16px auto 0; font-size: clamp(1.05rem, 1.5vw, 1.18rem); line-height: 1.6; color: var(--texte-2); text-wrap: pretty; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 26px; }

/* ---------- Scène de l'accueil : INTERCHANGEABLE ----------
   La page lit seulement images/scene/hero-*.webp ; fond nuit opaque ou transparent, peu importe : les bords sont
   fondus par un masque. Si la composition change, ajuster seulement les variables ci-dessous. */
.scene-zone {
  /* place des 5 cartes de verre (à partir de 1100 px), en % de la scène ; laisser libres les lanternes */
  --verre-1-x: 0%;   --verre-1-y: 14%;   /* 3 posts : en haut à gauche, x depuis la gauche */
  --verre-2-x: 0%;   --verre-2-y: 17%;   /* fiche Google : en haut à droite, x depuis la droite */
  --verre-3-x: 0%;   --verre-3-y: 74%;   /* reel : en bas à droite, x depuis la droite */
  --verre-4-x: 0%;   --verre-4-y: 72%;   /* relu : en bas à gauche, x depuis la gauche */
  --verre-5-y: 1%;                       /* vous publiez : en bas au centre, y depuis le bas */
  --scene-decalage: -72px;               /* la scène remonte sous les boutons (son haut n'est que du ciel) */
  position: relative; z-index: 1; max-width: 1240px; margin-top: var(--scene-decalage);
}
.accueil-texte { z-index: 2; }
.scene { position: relative; margin: 0 auto; max-width: 1180px; }
.scene-vivante { position: relative; }
.scene picture, .scene-image { display: block; width: 100%; height: auto; }
/* quelle que soit la forme de l'image livrée, la scène ne dépasse pas cette hauteur (image entière, centrée) */
.scene-image {
  max-height: 780px; object-fit: contain;
  /* bords fondus dans la nuit, quelle que soit la couleur de fond de l'image */
  -webkit-mask-image: radial-gradient(ellipse 54% 58% at 50% 50%, #000 66%, transparent 100%);
  mask-image: radial-gradient(ellipse 54% 58% at 50% 50%, #000 66%, transparent 100%);
}
@media (max-width: 719px) { .scene-image { max-height: 560px; } }

/* animations douces qui vont avec une image fixe (toutes coupées par « réduire les animations ») */
.scene-vivante {
  animation: flotte-scene 9s ease-in-out infinite;
  transform: translate3d(var(--px, 0px), calc(var(--py, 0px) + var(--sy, 0px)), 0);
  transition: transform .7s cubic-bezier(.2, .7, .3, 1);
}
@keyframes flotte-scene { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.scene-respire {
  position: absolute; left: 50%; top: 54%; width: 62%; height: 60%; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 178, 76, .17), rgba(255, 178, 76, .06) 55%, transparent);
  mix-blend-mode: screen; pointer-events: none; animation: respire 6.5s ease-in-out infinite;
}
@keyframes respire { 0%, 100% { opacity: .4; scale: .95; } 50% { opacity: 1; scale: 1.05; } }
.lucioles { position: absolute; inset: 0; pointer-events: none; }
.lucioles i {
  position: absolute; width: 5px; height: 5px; border-radius: 50%; opacity: 0;
  background: #FFE2A8; box-shadow: 0 0 8px 2px rgba(255, 186, 86, .75); animation: luciole 7s ease-in-out infinite;
}
.lucioles i:nth-child(1) { left: 21%; top: 27%; animation-delay: -1s; }
.lucioles i:nth-child(2) { left: 33%; top: 20%; animation-delay: -3.4s; animation-duration: 8.5s; }
.lucioles i:nth-child(3) { left: 62%; top: 14%; animation-delay: -5.2s; }
.lucioles i:nth-child(4) { left: 79%; top: 30%; animation-delay: -2.2s; animation-duration: 9s; }
.lucioles i:nth-child(5) { left: 86%; top: 50%; animation-delay: -6.1s; }
.lucioles i:nth-child(6) { left: 15%; top: 52%; animation-delay: -4.4s; animation-duration: 8s; }
.lucioles i:nth-child(7) { left: 44%; top: 9%; animation-delay: -0.4s; animation-duration: 10s; }
@keyframes luciole { 0% { opacity: 0; translate: 0 8px; } 30% { opacity: .95; } 70% { opacity: .55; } 100% { opacity: 0; translate: 8px -26px; } }
/* bouton « Mettre en pause les animations » (WCAG 2.2.2) : affiché par ruela.js, jamais si « réduire les animations » */
.pause-animations {
  position: absolute; right: 12px; bottom: 12px; z-index: 3; display: grid; place-items: center;
  width: 42px; height: 42px; padding: 0; border-radius: 50%; cursor: pointer; color: var(--texte);
  background: rgba(14, 23, 56, .78); border: 1px solid rgba(255, 255, 255, .28);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.pause-animations:hover { background: rgba(26, 39, 83, .92); border-color: rgba(255, 255, 255, .45); }
.pause-animations svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pause-animations .icone-lecture { display: none; fill: currentColor; stroke-width: 1.4; }
.pause-animations[aria-pressed="true"] .icone-pause { display: none; }
.pause-animations[aria-pressed="true"] .icone-lecture { display: block; }
.animations-pause .scene-vivante, .animations-pause .scene-respire, .animations-pause .lucioles i { animation-play-state: paused; }
/* sans JavaScript, pas de bouton pause : scène immobile (WCAG 2.2.2) */
html:not(.js) .scene-vivante, html:not(.js) .scene-respire, html:not(.js) .lucioles i { animation: none; }
html:not(.js) .scene-respire { opacity: .7; }
html:not(.js) .lucioles i { opacity: .55; }

/* tant que l'image n'est pas chargée (ou si elle manque) : cadre fixe et remplaçant neutre (sol, halo, une Lumi) */
.js .scene:not(.scene-prete) { aspect-ratio: 16 / 10; }
.js .scene:not(.scene-prete) .scene-vivante { position: absolute; inset: 0; opacity: 0; }
.scene-prete .scene-attente { display: none; }
.scene-attente { position: absolute; inset: 0; overflow: hidden; }
.scene-sol {
  position: absolute; left: 50%; top: 60%; width: 62%; aspect-ratio: 1; translate: -50% -50%;
  transform: scaleY(.52) rotate(45deg); border-radius: 26px;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 48px),
    linear-gradient(135deg, #1E2D5C, #121C42);
  box-shadow: 0 0 0 2px rgba(214, 162, 74, .35), 0 40px 80px rgba(0, 0, 0, .5);
}
.scene-halo { position: absolute; left: 50%; top: 55%; width: 70%; height: 70%; translate: -50% -50%; background: radial-gradient(closest-side, rgba(255, 181, 77, .28), transparent); }
.scene-lumi { position: absolute; left: 50%; top: 14%; width: 20%; translate: -50% 0; filter: drop-shadow(0 0 30px rgba(255, 181, 77, .35)); }

/* Cartes de verre, une par livrable */
.verres { list-style: none; margin: 0; padding: 0; }
.verre {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px 14px 14px; border-radius: 18px;
  /* teinte assez dense pour rester lisible (AA) même devant une partie claire de la scène */
  background: linear-gradient(155deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .03) 60%), rgba(14, 23, 56, .82);
  border: 1px solid rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 24px 48px -22px rgba(0, 0, 0, .75);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .verre { background: #17234C; }
}
.verre-icone {
  display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 13px;
  color: var(--ambre-clair); background: radial-gradient(circle at 30% 25%, rgba(255, 214, 140, .32), rgba(255, 181, 77, .08));
  border: 1px solid rgba(255, 214, 140, .35); box-shadow: 0 0 20px -4px rgba(255, 181, 77, .55);
}
.verre-icone svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.verre-icone svg .plein { fill: currentColor; stroke: none; }
.verre-icone-vdg { color: #A6EBD8; background: radial-gradient(circle at 30% 25%, rgba(95, 205, 178, .34), rgba(95, 205, 178, .08)); border-color: rgba(95, 205, 178, .4); box-shadow: 0 0 20px -4px rgba(95, 205, 178, .6); }
.verre-icone-corail { color: #FFC2B3; background: radial-gradient(circle at 30% 25%, rgba(255, 142, 118, .32), rgba(255, 142, 118, .08)); border-color: rgba(255, 142, 118, .4); box-shadow: 0 0 20px -4px rgba(255, 142, 118, .55); }
.verre-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.verre-texte strong { font: 600 1.04rem/1.25 var(--titre); letter-spacing: -0.005em; color: var(--texte); text-wrap: balance; }
.verre-texte > span { font-size: .84rem; line-height: 1.35; color: var(--texte-2); text-wrap: pretty; }
.insecable { white-space: nowrap; }

/* grand écran : les cartes flottent autour de la scène, dans les coins vides (voir les variables --verre-*) */
@media (min-width: 1100px) {
  .verres {
    position: absolute; inset: 0 var(--gouttiere); z-index: 2; pointer-events: none;
    transform: translate3d(calc(var(--px, 0px) * -1.6), calc(var(--py, 0px) * -1.6), 0);
    transition: transform .7s cubic-bezier(.2, .7, .3, 1);
  }
  /* cartes immobiles (un texte qui flotte se lit mal) : seule la parallaxe à la souris les déplace un peu */
  .verre { position: absolute; width: 264px; pointer-events: auto; }
  .verre-1 { left: var(--verre-1-x); top: var(--verre-1-y); }
  .verre-2 { right: var(--verre-2-x); top: var(--verre-2-y); }
  .verre-3 { right: var(--verre-3-x); top: var(--verre-3-y); }
  .verre-4 { left: var(--verre-4-x); top: var(--verre-4-y); }
  .verre-5 { left: 50%; bottom: var(--verre-5-y); margin-left: -132px; }
  .accueil { padding-bottom: 36px; }
}
@media (min-width: 1280px) { .verre { width: 288px; } .verre-5 { margin-left: -144px; } }
/* écrans d'ordinateur peu hauts (1366 × 768…) : texte un peu plus compact pour voir davantage la scène */
@media (min-width: 1100px) and (max-height: 820px) {
  .accueil { padding-top: 22px; }
  .pastille { margin-bottom: 14px; }
  .accueil h1 { font-size: clamp(2.4rem, 4vw, 3.3rem); }
  .chapo { margin-top: 12px; }
  .actions { margin-top: 20px; }
}
/* tablette : rangée sous la scène */
@media (min-width: 640px) and (max-width: 1099px) {
  .scene-zone { --scene-decalage: -56px; }
  .verres { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: -36px; position: relative; z-index: 2; }
  .verre { width: calc(50% - 6px); max-width: 340px; }
}
/* téléphone : scène bord à bord, puis deux colonnes de cartes, la dernière en entier */
@media (max-width: 639px) {
  .accueil { padding: 24px 0 36px; }
  .pastille { margin-bottom: 14px; font-size: .84rem; }
  .accueil h1 { font-size: clamp(2.1rem, 9.2vw, 2.45rem); }
  .chapo { margin-top: 12px; font-size: 1rem; line-height: 1.55; }
  .actions { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 20px; }
  .actions .bouton-grand { min-height: 52px; }
  .scene-zone { --scene-decalage: -6px; }
  .scene { margin-inline: calc(-1 * var(--gouttiere)); }
  .scene-image { -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 72%, transparent 100%); mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 72%, transparent 100%); }
  .js .scene:not(.scene-prete) { aspect-ratio: 1200 / 1050; }
  .pause-animations { right: 10px; bottom: 26px; width: 44px; height: 44px; }
  .scene-sol { width: 92%; top: 58%; }
  .scene-lumi { width: 30%; }
  .verres { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: -14px; position: relative; z-index: 2; }
  .verre { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
  .verre-5 { grid-column: 1 / -1; flex-direction: row; align-items: center; }
  .verre-texte strong { font-size: .98rem; }
}

/* ---------- Sections ---------- */
.section { position: relative; padding: 104px 0; overflow-x: clip; }
.section-alt { background: var(--fond-2); border-top: 1px solid rgba(255, 255, 255, .05); border-bottom: 1px solid rgba(255, 255, 255, .05); }
@media (max-width: 719px) { .section { padding: 72px 0; } }
.section-tete { max-width: 740px; margin: 0 auto 52px; text-align: center; }
.surtitre { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: .82rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #9FE6D3; }
.surtitre::before { content: ''; width: 18px; height: 2px; border-radius: 2px; background: currentColor; opacity: .8; }
.section h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); text-wrap: balance; }
.section-chapo { margin-top: 18px; font-size: 1.1rem; color: var(--texte-2); text-wrap: pretty; }
.section-tete .section-chapo { margin-left: auto; margin-right: auto; max-width: 620px; }

.produit { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: center; }
@media (min-width: 960px) {
  .produit { grid-template-columns: 1fr 1.05fr; gap: 72px; }
  .produit-inverse .produit-texte { order: 2; }
}
.points { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 14px; }
.points li { position: relative; padding: 16px 18px; border-radius: 16px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .08); color: var(--texte-2); }
.point-nom { display: block; margin-bottom: 2px; font: 600 1.05rem/1.3 var(--titre); color: var(--texte); }
.points-simples li { padding: 12px 16px 12px 46px; }
.points-simples li::before { content: ''; position: absolute; left: 16px; top: 15px; width: 18px; height: 18px; border-radius: 50%; background: rgba(95, 205, 178, .18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 12.5 3.2 3.2L17 9' fill='none' stroke='%23A6EBD8' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.note-demo { margin-top: 22px; font-size: .95rem; color: var(--texte-2); }
.note-demo .etiquette { margin-right: 8px; vertical-align: 1px; }
.note-demo strong { color: var(--texte); }

/* ---------- Téléphone « Votre semaine » ---------- */
.telephone-zone { position: relative; display: flex; flex-direction: column; align-items: center; }
.telephone-halo { position: absolute; left: 50%; top: 45%; width: 520px; height: 520px; max-width: 120%; translate: -50% -50%; background: radial-gradient(closest-side, rgba(255, 181, 77, .22), rgba(95, 205, 178, .08) 60%, transparent); pointer-events: none; }
.telephone {
  position: relative; width: 340px; max-width: 100%; height: 680px; padding: 11px; border-radius: 50px;
  background: linear-gradient(150deg, #27325A, #0B1129 40%, #151D3E);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), inset 0 0 0 2px rgba(255, 255, 255, .06), 0 50px 90px -40px rgba(0, 0, 0, .9);
}
.telephone::before { content: ''; position: absolute; top: 22px; left: 50%; width: 92px; height: 26px; translate: -50% 0; border-radius: 20px; background: #05081A; z-index: 3; }
.telephone-ecran { position: relative; height: 100%; border-radius: 40px; overflow: hidden; display: flex; flex-direction: column; background: var(--ecran); color: var(--encre); font-size: .9rem; line-height: 1.45; }
.app-barre { padding: 54px 18px 12px; background: linear-gradient(180deg, #FFF8EA, var(--ecran)); border-bottom: 1px solid #E8DDCB; }
.app-badge { display: inline-block; margin-bottom: 6px; padding: 2px 8px; border-radius: 6px; font-size: .68rem; font-weight: 600; color: #6E4A0E; background: #FCEBC8; border: 1px dashed #D9A752; }
.app-titre { font: 600 1.45rem/1.1 var(--titre); letter-spacing: -0.01em; color: var(--encre); }
.app-sous-titre { font-size: .82rem; color: var(--encre-2); }
.app-progression { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.app-jauge { flex: 1; height: 6px; border-radius: 6px; background: #E6DCCB; overflow: hidden; }
.app-jauge-plein { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, #E9A23B, #3B9A84); transition: width .3s ease; }
.app-compte { font-size: .78rem; font-weight: 600; color: var(--encre-2); white-space: nowrap; }
.app-defile { flex: 1; overflow-y: auto; padding: 12px 12px 18px; scrollbar-width: thin; scrollbar-color: #CDBFA6 transparent; }
.app-defile:focus-visible { outline: 3px solid #1F2A4D; outline-offset: -3px; }
.app-relu { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 8px 10px; border-radius: 12px; font-size: .78rem; font-weight: 600; color: #22594C; background: #DDEFE8; }
.app-relu svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.app-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.post { padding: 12px; border-radius: 18px; background: #fff; border: 1px solid #EADFCD; box-shadow: 0 6px 16px -10px rgba(31, 42, 77, .35); transition: border-color .2s ease, box-shadow .2s ease; }
.post.approuve { border-color: #7BC2AE; box-shadow: 0 0 0 2px rgba(59, 154, 132, .25), 0 6px 16px -10px rgba(31, 42, 77, .35); }
.post-tete { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.post-jour { font: 600 1rem/1.2 var(--titre); color: var(--encre); }
.post-canal { margin-left: auto; padding: 2px 8px; border-radius: 999px; font-size: .7rem; font-weight: 600; color: #7A4F0E; background: #FCEBC8; }
.post-canal-vdg { color: #22594C; background: #DDEFE8; }
.post-canal-corail { color: #8E3523; background: #FBE1D9; }
.post-visuel { position: relative; overflow: hidden; border-radius: 12px; aspect-ratio: 16 / 10; background: #EADFCD; }
.post-visuel img { width: 100%; height: 100%; object-fit: cover; }
.post-gabarit { position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 6px 10px; border-radius: 9px; font: 600 .86rem/1.2 var(--titre); color: #FFF8EC; background: rgba(31, 42, 77, .82); }
.post-visuel-reel img { object-position: center 35%; }
.post-lecture { position: absolute; left: 50%; top: 45%; width: 44px; height: 44px; translate: -50% -50%; border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: 0 6px 16px rgba(0, 0, 0, .25); }
.post-lecture::after { content: ''; position: absolute; left: 17px; top: 13px; border-left: 14px solid var(--encre); border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.post-ia { position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; border-radius: 6px; font-size: .66rem; font-weight: 600; color: #fff; background: rgba(31, 42, 77, .85); }
.post-texte { margin: 10px 2px; font-size: .84rem; line-height: 1.45; color: #2A3458; }
.post-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.app-bouton {
  min-height: 40px; padding: 0 6px; border-radius: 11px; border: 1px solid #DCCFB9; background: var(--ecran);
  font: 600 .78rem/1.1 var(--texte-police); color: var(--encre); cursor: pointer; transition: background-color .15s ease, border-color .15s ease;
}
.app-bouton:hover { background: var(--ecran-2); }
.app-bouton:focus-visible { outline: 3px solid #9A5F0C; outline-offset: 2px; }
.app-ok[aria-pressed="true"] { color: #fff; background: #2C6E5F; border-color: #2C6E5F; }
.app-ok[aria-pressed="true"]::before { content: '✓ '; }
.app-publier { grid-column: 1 / -1; min-height: 42px; color: #FFF8EC; background: var(--encre); border-color: var(--encre); font-size: .84rem; }
.app-publier:hover { background: #2A3766; }
.app-publier[aria-disabled="true"] { color: #5A6385; background: #ECE4D6; border-color: #DCCFB9; cursor: not-allowed; }
.app-publier.publie { background: #2C6E5F; border-color: #2C6E5F; }
.app-bouton.copie { color: #22594C; background: #DDEFE8; border-color: #9CCFC0; }
.post-changer { margin-top: 10px; padding: 10px; border-radius: 12px; background: #FBEDE7; border: 1px solid #F0CDBF; }
.post-changer label { display: grid; gap: 6px; font-size: .78rem; font-weight: 600; color: #7C3322; }
.post-changer input { min-height: 40px; width: 100%; padding: 0 10px; border-radius: 9px; border: 1px solid #A8705F; background: #fff; font: 400 .85rem var(--texte-police); color: var(--encre); }
.post-changer input:focus-visible { outline: 3px solid #9A5F0C; outline-offset: 1px; }
.post-changer p { margin-top: 6px; font-size: .74rem; color: #7C3322; }
/* message de la démo : en haut, comme une notification, par-dessus le titre ; il ne cache jamais un bouton ni un champ */
.app-message { position: absolute; left: 12px; right: 12px; top: 46px; z-index: 2; display: flex; align-items: center; min-height: 80px; padding: 10px 14px; border-radius: 16px; font-size: .78rem; font-weight: 500; line-height: 1.35; color: #FFF8EC; background: rgba(31, 42, 77, .96); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5); opacity: 0; translate: 0 -8px; transition: opacity .2s ease, translate .2s ease; pointer-events: none; }
.app-message.visible { opacity: 1; translate: 0 0; }
.app-glisser { display: none; }
/* téléphone (écran étroit) : les 5 contenus en carrousel horizontal, le faux téléphone ne retient plus le doigt */
@media (max-width: 719px) {
  .telephone, .telephone-ecran { height: auto; }
  .app-defile { flex: none; overflow: visible; padding: 12px 0 16px; }
  .app-relu { margin: 0 12px 12px; }
  .app-liste {
    display: flex; align-items: flex-start; gap: 10px; padding: 0 12px 8px; overflow-x: auto;
    scroll-snap-type: x mandatory; scroll-padding-inline: 12px; overscroll-behavior-x: contain; scrollbar-width: none;
  }
  .app-liste::-webkit-scrollbar { display: none; }
  .app-liste > .post { flex: 0 0 90%; scroll-snap-align: start; }
  .app-bouton { padding: 0 3px; font-size: .75rem; }
  .app-glisser { display: block; margin-top: 6px; font-size: .74rem; font-weight: 600; color: var(--encre-2); text-align: center; }
}
.telephone-note { position: relative; max-width: 380px; margin-top: 22px; font-size: .86rem; color: var(--texte-3); text-align: center; }
.telephone-note strong { color: var(--texte-2); }

/* ---------- Fenêtres d'interface (fiche, calendrier) ---------- */
.fenetre {
  position: relative; border-radius: 24px; overflow: hidden;
  background: linear-gradient(170deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02) 40%), var(--surface);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 40px 80px -40px rgba(0, 0, 0, .85), 0 0 90px -40px rgba(255, 181, 77, .35);
}
.fenetre-tete { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .025); }
.fenetre-tete > .badge-exemple { margin-left: auto; }
.fenetre-lanterne { filter: drop-shadow(0 0 8px rgba(255, 181, 77, .6)); }
.fenetre-titre { font: 600 1.12rem/1.2 var(--titre); color: var(--texte); }
.fenetre-sous-titre { font-size: .82rem; color: var(--texte-3); }
@media (max-width: 479px) { .fenetre-tete { flex-wrap: wrap; } .fenetre-tete > .badge-exemple { margin-left: 34px; } }

/* Fiche « Ce qui est vrai chez vous » */
.fiche-zone { position: relative; margin: 0; }
.fiche-lignes { margin: 0; padding: 6px 20px 4px; }
.fiche-lignes > div { display: grid; gap: 6px; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.fiche-lignes > div:last-child { border-bottom: 0; }
@media (min-width: 560px) { .fiche-lignes > div { grid-template-columns: 178px 1fr; gap: 14px; align-items: baseline; } }
.fiche-lignes dt { display: flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 600; color: var(--texte-3); }
.fiche-lignes dt svg { fill: none; stroke: var(--ambre-clair); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; translate: 0 2px; }
.fiche-lignes dd { margin: 0; color: var(--texte); font-size: .95rem; }
.puces { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.puces li { padding: 4px 11px; border-radius: 999px; font-size: .84rem; color: var(--texte); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .13); }
.puces-prix li { color: #FFE3B3; background: rgba(255, 181, 77, .1); border-color: rgba(255, 181, 77, .35); font-variant-numeric: tabular-nums; }
.fiche-interdit dt svg { stroke: var(--corail); }
.puces-interdit li { color: #FFCFC3; background: rgba(255, 142, 118, .1); border-color: rgba(255, 142, 118, .4); text-decoration: line-through; text-decoration-color: rgba(255, 142, 118, .8); }
.fenetre-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 20px; border-top: 1px solid rgba(255, 255, 255, .08); background: rgba(0, 0, 0, .12); }
.statut { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 600; }
.statut svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.statut-ok { color: #9FE6D3; }
.faux-bouton { padding: 8px 14px; border-radius: 10px; font-size: .84rem; font-weight: 600; color: var(--texte); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); }
.fiche-zone figcaption { margin-top: 14px; font-size: .88rem; color: var(--texte-3); text-align: center; }
.mascotte { pointer-events: none; filter: drop-shadow(0 0 26px rgba(255, 181, 77, .3)) drop-shadow(0 16px 18px rgba(0, 0, 0, .45)); }
.fiche-app .badge-exemple { margin-top: 6px; }

/* Calendrier du lundi. Lumi (voir « Poses de Lumi ») se tient sur la fenêtre : la marge du haut lui laisse la place,
   sans jamais passer sur le texte d'en-tête (les marges se confondent : seule la plus grande compte). */
.calendrier-zone { position: relative; margin-top: 120px; }
@media (max-width: 1099px) { .calendrier-zone { margin-top: 236px; } }
@media (max-width: 899px) { .calendrier-zone { margin-top: 174px; } }
.legende { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 14px 20px; border-bottom: 1px solid rgba(255, 255, 255, .07); font-size: .84rem; color: var(--texte-2); }
.legende li { display: inline-flex; align-items: center; gap: 8px; }
.pastille-couleur { width: 10px; height: 10px; border-radius: 3px; }
.p-lien { background: var(--texte); }
.p-post { background: var(--ambre); }
.p-google { background: var(--vdg); }
.p-reel { background: var(--corail); }
.p-soir { background: var(--texte-3); }
.semaines { display: grid; gap: 4px; padding: 14px 16px 6px; }
.semaine-cal { display: grid; gap: 8px; }
.semaine-nom { font: 600 .82rem/1.2 var(--texte-police); letter-spacing: .08em; text-transform: uppercase; color: var(--texte-3); padding: 8px 4px 0; }
.jours { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.jour { display: flex; flex-direction: column; gap: 8px; min-height: 128px; padding: 10px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .07); }
.jour-nom { font-size: .78rem; font-weight: 600; color: var(--texte-3); }
.jour-lundi { background: linear-gradient(160deg, rgba(255, 214, 140, .16), rgba(255, 181, 77, .04)); border-color: rgba(255, 214, 140, .35); box-shadow: 0 0 30px -12px rgba(255, 181, 77, .6); }
.jour-lundi .jour-nom { color: var(--ambre-clair); }
.jour-dimanche { background: rgba(7, 13, 36, .5); }
.evt { display: block; padding: 7px 9px; border-radius: 9px; font-size: .8rem; font-weight: 500; line-height: 1.3; color: var(--texte); border-left: 3px solid; background: rgba(255, 255, 255, .05); }
.evt small { display: block; margin-top: 2px; font-size: .72rem; font-weight: 500; color: var(--texte-2); }
.evt-lien { border-color: var(--texte); background: rgba(246, 241, 231, .1); font-weight: 600; }
.evt-post { border-color: var(--ambre); background: rgba(255, 181, 77, .1); }
.evt-google { border-color: var(--vdg); background: rgba(95, 205, 178, .1); }
.evt-reel { border-color: var(--corail); background: rgba(255, 142, 118, .12); }
.evt-vide { border-color: rgba(255, 255, 255, .2); border-left-style: dashed; background: transparent; color: var(--texte-3); font-style: italic; }
.evt-soir { border-color: var(--texte-3); background: rgba(155, 166, 199, .08); color: var(--texte-2); }
.semaine-resume { display: none; }
.calendrier-note { padding: 6px 20px 18px; font-size: .84rem; color: var(--texte-3); }
@media (min-width: 900px) {
  .semaines { padding: 18px 20px 8px; gap: 10px; }
  .semaine-cal { grid-template-columns: 96px 1fr; align-items: stretch; }
  .semaine-nom { padding: 12px 0 0; }
  .jours { grid-template-columns: repeat(7, 1fr); }
}
@media (max-width: 899px) {
  .jour { flex-direction: row; align-items: center; min-height: 0; padding: 8px 10px; }
  .jour-nom { width: 74px; flex-shrink: 0; }
  .evt { flex: 1; }
  /* sur téléphone, la semaine 2 est résumée en une ligne (page plus courte) */
  .semaine-cal + .semaine-cal .jours { display: none; }
  .semaine-resume { display: block; padding: 10px 12px; margin-bottom: 6px; border-radius: 12px; font-size: .86rem; color: var(--texte-2); background: rgba(255, 255, 255, .03); border: 1px dashed rgba(255, 255, 255, .14); }
}

/* ---------- Le principe ---------- */
.etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; position: relative; }
@media (min-width: 960px) {
  .etapes { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .etapes::before { content: ''; position: absolute; left: 12%; right: 12%; top: 31px; height: 2px; background: linear-gradient(90deg, rgba(255, 181, 77, 0), rgba(255, 181, 77, .55) 15%, rgba(95, 205, 178, .55) 85%, rgba(95, 205, 178, 0)); }
}
.etape { position: relative; padding: 0 22px 26px; border-radius: 20px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .08); }
.etape-numero {
  position: relative; display: grid; place-items: center; width: 44px; height: 44px; margin: 10px 0 18px; border-radius: 50%;
  font: 600 1.15rem/1 var(--titre); color: #0A1230; background: var(--degrade);
  box-shadow: 0 0 0 6px var(--fond-2), 0 0 26px rgba(255, 181, 77, .55);
}
.etape h3 { font-size: 1.22rem; line-height: 1.2; margin-bottom: 10px; }
.etape p { color: var(--texte-2); font-size: .98rem; }
.moments { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.moment { padding: 4px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.moment-soir { color: var(--texte-2); background: rgba(155, 166, 199, .12); border: 1px solid rgba(155, 166, 199, .35); }
.moment-matin { color: var(--ambre-clair); background: rgba(255, 181, 77, .12); border: 1px solid rgba(255, 181, 77, .38); }

/* ---------- Vous gardez la main ---------- */
.main-grille { display: grid; gap: 40px; align-items: start; }
@media (min-width: 960px) { .main-grille { grid-template-columns: .85fr 1.15fr; gap: 64px; } .main-cote { position: sticky; top: 110px; } }
.engagements { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 640px) { .engagements { grid-template-columns: 1fr 1fr; } }
.engagement { padding: 22px; border-radius: 20px; background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); border: 1px solid rgba(255, 255, 255, .1); }
.engagement h3 { display: flex; align-items: flex-start; gap: 10px; font-size: 1.12rem; line-height: 1.25; margin-bottom: 8px; }
.engagement h3::before { content: ''; flex-shrink: 0; width: 22px; height: 22px; margin-top: -1px; border-radius: 50%; background: rgba(95, 205, 178, .18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 12.5 3.2 3.2L17 9' fill='none' stroke='%23A6EBD8' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; border: 1px solid rgba(95, 205, 178, .4); }
.engagement p { color: var(--texte-2); font-size: .96rem; }

/* ---------- Tarifs ---------- */
.tarifs { display: flex; flex-direction: column; align-items: center; }
.bascule { display: inline-flex; gap: 4px; padding: 5px; margin: 0 0 34px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 16px; background: rgba(255, 255, 255, .04); }
.bascule label { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: 12px; font-weight: 600; color: var(--texte-2); cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.bascule label small { font-size: .78rem; font-weight: 500; }
.bascule input:checked + label { background: var(--texte); color: var(--fond); }
.bascule input:focus-visible + label { outline: 3px solid var(--ambre-clair); outline-offset: 2px; }
.formules { display: grid; gap: 22px; width: 100%; max-width: 980px; }
@media (min-width: 800px) { .formules { grid-template-columns: repeat(2, 1fr); } }
.formule { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 32px 28px 28px; border-radius: 26px; background: linear-gradient(170deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)), var(--surface); border: 1px solid rgba(255, 255, 255, .12); }
.formule-avant { border-color: transparent; box-shadow: 0 30px 80px -40px rgba(255, 181, 77, .55); }
.formule-avant::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: var(--degrade); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; }
.formule h3, .formule .formule-nom { font-size: 1.7rem; }
.formule-bientot .etiquette { position: absolute; top: 22px; right: 22px; }
.formule-quoi { color: var(--texte-2); }
.prix { color: var(--texte-2); }
.prix strong { font: 600 clamp(2.9rem, 5vw, 3.5rem)/1 var(--titre); color: var(--texte); letter-spacing: -0.03em; margin-right: 6px; }
.prix-detail { font-size: .95rem; color: var(--texte-2); min-height: 1.6em; }
.prix-6 { display: none; }
.tarifs:has(#duree-6:checked) .prix-6 { display: inline; }
.tarifs:has(#duree-6:checked) .prix-mois { display: none; }
.coches { list-style: none; margin: 4px 0 8px; padding: 16px 0 0; border-top: 1px solid rgba(255, 255, 255, .09); display: grid; gap: 10px; flex: 1; align-content: start; }
.coches li { display: flex; gap: 10px; font-size: .98rem; line-height: 1.45; color: var(--texte); }
.coches li::before { content: ''; flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: rgba(95, 205, 178, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 12.5 3.2 3.2L17 9' fill='none' stroke='%23A6EBD8' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.mention-tva { margin-top: 26px; font-size: .92rem; color: var(--texte-2); text-align: center; }
.tarifs-rassurances { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin: 14px 0 0; padding: 0; font-size: .92rem; color: var(--texte-3); }
.tarifs-rassurances li { display: inline-flex; align-items: center; gap: 8px; }
.tarifs-rassurances li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--vdg); flex-shrink: 0; }

/* ---------- Questions ---------- */
.faq-grille { display: grid; gap: 36px; }
@media (min-width: 960px) { .faq-grille { grid-template-columns: .7fr 1.3fr; gap: 64px; } .faq-cote { position: sticky; top: 110px; align-self: start; } }
.faq-contact { margin-top: 20px; color: var(--texte-2); }
.faq-contact strong { color: var(--texte); white-space: nowrap; }
.faq { display: grid; gap: 10px; }
.faq details { border-radius: 18px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .09); transition: background-color .2s ease, border-color .2s ease; }
.faq details[open] { background: rgba(255, 255, 255, .06); border-color: rgba(255, 214, 140, .3); }
.faq summary { position: relative; display: block; padding: 18px 56px 18px 22px; font: 600 1.1rem/1.35 var(--titre); color: var(--texte); cursor: pointer; list-style: none; border-radius: 18px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; position: absolute; right: 20px; top: 50%; width: 22px; height: 22px; translate: 0 -50%; border-radius: 50%; background: rgba(255, 181, 77, .14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' fill='none' stroke='%23FFD68C' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat; transition: rotate .2s ease; }
.faq details[open] summary::after { rotate: 45deg; }
.faq details p { padding: 0 22px 20px; color: var(--texte-2); }
@media (prefers-reduced-motion: reduce) { .faq summary::after, .faq details { transition: none; } }

/* ---------- Être prévenu ---------- */
.section-prevenu { padding-top: 40px; }
.prevenu-carte {
  position: relative; display: grid; gap: 36px; padding: clamp(26px, 5vw, 56px); border-radius: 32px; overflow: hidden;
  background: radial-gradient(70% 90% at 0% 100%, rgba(255, 181, 77, .2), transparent 60%), radial-gradient(60% 80% at 100% 0%, rgba(95, 205, 178, .14), transparent 60%), var(--surface);
  border: 1px solid rgba(255, 255, 255, .12);
}
@media (min-width: 900px) { .prevenu-carte { grid-template-columns: 1fr 1fr; align-items: center; gap: 56px; } }
.prevenu-texte p:not(.surtitre) { margin-top: 14px; color: var(--texte-2); }
.prevenu-texte p strong { color: var(--texte); }
.prevenu-texte .surtitre { margin-top: 0; }
.formulaire { padding: 26px; border-radius: 22px; background: rgba(7, 13, 36, .55); border: 1px solid rgba(255, 255, 255, .1); }
.formulaire fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 16px; min-width: 0; }
.note-bientot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; font-size: .9rem; color: var(--texte-2); }
.champ { display: grid; gap: 6px; font-weight: 600; font-size: .95rem; }
.facultatif { font-weight: 400; color: var(--texte-3); }
.champ input { min-height: 50px; width: 100%; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .42); background: rgba(255, 255, 255, .05); color: var(--texte); font: 400 1rem var(--texte-police); }
.champ input::placeholder { color: var(--texte-3); }
.champ input:focus-visible { outline-offset: 1px; border-color: var(--ambre-clair); }
.champ input[aria-invalid="true"] { border-color: var(--corail); }
.aide { font-weight: 400; font-size: .86rem; color: var(--texte-3); }
.case { display: grid; gap: 6px; font-size: .9rem; color: var(--texte-2); }
.consentement { display: flex; gap: 10px; align-items: flex-start; }
.consentement input { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; accent-color: var(--ambre); }
.lien-politique { font-size: .86rem; }
.nouvel-onglet { color: var(--texte-3); }
.erreur-champ { font-size: .88rem; font-weight: 500; color: #FFC2B3; }
/* piège à robots : hors de l'écran et du clavier (jamais display:none, que certains robots repèrent) */
.pot-de-miel { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.formulaire { position: relative; display: grid; gap: 16px; }
.formulaire .note-bientot { margin-bottom: 2px; }
.note-envoi { font-size: .84rem; color: var(--texte-3); }
.formulaire .bouton:disabled { cursor: not-allowed; opacity: .7; }
.formulaire .bouton:disabled:hover { transform: none; }
/* message après l'envoi : jamais vert tant que l'API n'a pas répondu « ok » */
.message:empty { display: none; }
.message { padding: 12px 14px; border-radius: 12px; font-size: .95rem; line-height: 1.45; color: var(--texte); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .16); }
.message.ok { background: rgba(95, 205, 178, .12); border-color: rgba(95, 205, 178, .5); }
.message.ko { background: rgba(255, 142, 118, .1); border-color: rgba(255, 142, 118, .5); }
.message.info { background: rgba(255, 181, 77, .1); border-color: rgba(255, 181, 77, .45); }
@media (max-width: 599px) { .prevenu-carte { padding: 24px 16px; } .formulaire { padding: 18px 14px; } }

/* ---------- Pied de page ---------- */
.pied { padding: 56px 0 44px; background: var(--fond-3); border-top: 1px solid rgba(255, 255, 255, .07); }
.pied-grille { display: grid; gap: 28px; }
@media (min-width: 800px) { .pied-grille { grid-template-columns: 1fr auto 1.3fr; align-items: start; gap: 40px; } }
.pied-service { margin-top: 10px; color: var(--texte-2); font-size: .95rem; }
.pied-liens { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pied-liens a { color: var(--texte); }
.a-venir { font-size: .85rem; color: var(--texte-3); }
.pied-notes { display: grid; gap: 8px; font-size: .86rem; color: var(--texte-3); }

/* ---------- Apparition au défilement (jamais si « réduire les animations ») ---------- */
.js .revele { opacity: 0; translate: 0 18px; transition: opacity .6s ease, translate .6s ease; }
.js .revele.vu { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
  .js .revele { opacity: 1; translate: none; transition: none; }
  .scene-vivante, .scene-respire, .lucioles i { animation: none !important; }
  .pause-animations { display: none !important; }
  .scene-vivante, .verres { transform: none !important; transition: none !important; }
  .scene-respire { opacity: .7; }
  .lucioles i { opacity: .55; }
  .app-jauge-plein, .app-message, .post, .app-bouton { transition: none; }
}

/* ---------- Pied de page du site (liens et contact) ---------- */
@media (min-width: 800px) { .pied-grille { grid-template-columns: 1.1fr auto auto 1.3fr; } }
.pied-titre { margin-bottom: 10px; font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-3); }
.pied-liens a { text-decoration: none; }
.pied-liens a:hover { text-decoration: underline; }
.pied-contact { font-size: .95rem; line-height: 1.7; color: var(--texte-2); }
.pied-contact strong { color: var(--texte); white-space: nowrap; }

/* ---------- Pages intérieures : en-tête de page (sans scène) ---------- */
.page-tete { position: relative; padding: 64px 0 56px; text-align: center; overflow: clip; isolation: isolate; }
.page-tete::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 70% at 50% 0%, rgba(255, 181, 77, .16), transparent 70%), radial-gradient(30% 50% at 88% 30%, rgba(95, 205, 178, .1), transparent 70%);
}
.page-tete h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height: 1.06; letter-spacing: -0.03em; text-wrap: balance; }
.page-tete .chapo { max-width: 42rem; }
.page-tete .pastille { margin-bottom: 18px; }
.page-tete .actions { margin-top: 24px; }
@media (max-width: 639px) { .page-tete { padding: 40px 0 36px; } .page-tete .actions { flex-direction: column; align-items: stretch; } }
.section-serree { padding-top: 24px; }
.lien-suite { margin-top: 30px; text-align: center; }
.lien-suite a { font-weight: 600; }
.telephone-note .lien-exemple { display: inline-block; margin-top: 8px; font-weight: 600; }

/* ---------- Poses de Lumi (images/lumi/poses/) ----------
   Images opaques, non détourées : leurs bords se fondent dans la couleur de la section qui les reçoit (--fond ;
   --fond-2 pour la fiche ; --surface pour salue-carte, dans la carte « Être prévenu »). Jamais à cheval sur une autre
   couleur peinte SOUS elles (carte, dégradé, lueur d'en-tête) : le bord de l'image se verrait. Une lueur peinte après
   elles (ombre d'une fenêtre, halo du téléphone) passe dessus et ne gêne pas. Chaque image garde une marge de fond
   d'environ 15 % autour de Lumi : les marges négatives la reprennent. */
.pose-telephone { width: 220px; margin: 8px -30px -34px auto; }
.pose-fiche { width: 220px; margin: 8px 0 -34px -30px; }
/* dès 960 px, le texte passe après la fiche (order: 2) : sans ce z-index, la pose serait peinte sur l'ombre de la
   fenêtre et la couperait net (2 niveaux) ; avec, l'ombre passe dessus */
.fiche-zone { z-index: 1; }
@media (max-width: 959px) { .pose-telephone, .pose-fiche { width: 172px; margin: 8px auto -30px; } }
/* debout sur la fenêtre du calendrier : le bas de l'image passe DERRIÈRE la fenêtre (peinte après elle) */
.pose-calendrier { position: absolute; left: -30px; bottom: calc(100% - 30px); width: 205px; }
@media (max-width: 899px) { .pose-calendrier { width: 148px; left: auto; right: -14px; bottom: calc(100% - 22px); } }
.pose-main { width: 330px; max-width: 80%; margin: 8px 0 -36px -30px; }
@media (max-width: 959px) { .pose-main { width: 248px; margin: 8px auto -30px; } }
/* à côté du titre, seulement quand la carte a sa largeur maximale (plus étroite, « de l'ouverture » se couperait) */
.pose-prevenu { float: right; width: 175px; margin: -40px -34px 4px 0; }
@media (max-width: 1199px) { .pose-prevenu { display: none; } }
/* en-tête d'une page intérieure avec Lumi : sans les lueurs (c'est Lumi qui éclaire), fond uni */
.page-tete-lumi::before { content: none; }
.pose-tete { width: 175px; margin: -44px auto 10px; }
@media (max-width: 639px) { .pose-tete { width: 140px; margin-top: -30px; } }

/* ---------- Semaine d'exemple en grand (exemple.html) : la page « Votre semaine » sur un grand écran ---------- */
.app-grande { max-width: 1120px; margin: 0 auto; border-radius: 28px; overflow: clip; background: var(--ecran); color: var(--encre); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 50px 100px -50px rgba(0, 0, 0, .9), 0 0 120px -50px rgba(255, 181, 77, .45); }
.app-grande .app-barre { position: sticky; top: 68px; z-index: 3; display: grid; gap: 4px 24px; padding: 20px 24px 16px; }
@media (min-width: 760px) { .app-grande .app-barre { grid-template-columns: 1fr minmax(240px, 340px); align-items: end; } }
@media (max-width: 859px) { .app-grande .app-barre { top: 100px; } }
.app-grande .app-badge { justify-self: start; }
.app-grande .app-titre { font-size: 1.6rem; }
.app-grande .app-progression { margin-top: 0; }
/* message de la démo : dans la barre collée, sous la jauge ; il ne cache jamais un bouton */
.app-grande .app-message { position: static; grid-column: 1 / -1; min-height: 0; padding: 0; background: none; box-shadow: none; color: #22594C; font-size: .86rem; font-weight: 600; opacity: 1; translate: none; }
.app-grande .app-message:empty { display: none; }
.app-grande .app-relu { margin: 18px 24px 0; justify-self: start; display: inline-flex; }
.app-grande .app-liste { padding: 16px 24px 8px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.app-grande .post { display: flex; flex-direction: column; }
.app-grande .post-visuel { aspect-ratio: 4 / 3; }
.app-grande .post-texte { font-size: .92rem; flex: 1; }
.app-grande .app-bouton { font-size: .84rem; }
.post-source { margin: 0 2px 12px; padding: 8px 10px; border-radius: 10px; font-size: .78rem; line-height: 1.4; color: #4A5372; background: #F6EFE3; border: 1px dashed #D9C7A8; }
.post-source b { color: #22594C; font-weight: 600; }
.app-grande .app-pied { padding: 8px 24px 24px; font-size: .84rem; color: var(--encre-2); }
@media (max-width: 599px) {
  .app-grande { border-radius: 22px; margin-inline: calc(-1 * var(--gouttiere) + 6px); }
  .app-grande .app-barre { padding: 16px 16px 12px; }
  .app-grande .app-relu { margin: 14px 16px 0; }
  .app-grande .app-liste { padding: 12px 12px 8px; grid-template-columns: 1fr; }
  .app-grande .app-pied { padding: 8px 16px 20px; }
}
@media (max-width: 719px) {
  /* le carrousel ne vaut que pour le faux téléphone de l'accueil : ici, les contenus restent les uns sous les autres */
  .app-grande .app-liste { display: grid; overflow: visible; scroll-snap-type: none; }
  .app-grande .app-liste > .post { flex: none; }
}
.encadre { max-width: 760px; margin: 0 auto; padding: 26px 28px; border-radius: 22px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); }
.encadre h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 12px; }
.encadre p + p { margin-top: 12px; }
.encadre p { color: var(--texte-2); }
.encadre .actions { justify-content: flex-start; }
@media (max-width: 639px) { .encadre { padding: 22px 18px; } .encadre .actions { flex-direction: column; align-items: stretch; } }

/* ---------- Tarifs en détail (tarifs.html) ---------- */
.comparatif-zone { max-width: 980px; margin: 0 auto; }
.comparatif { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 22px; overflow: hidden; background: var(--surface); border: 1px solid rgba(255, 255, 255, .12); font-size: .96rem; }
.comparatif caption { padding: 0 0 16px; text-align: left; font: 600 1.4rem/1.2 var(--titre); color: var(--texte); }
.comparatif th, .comparatif td { padding: 14px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.comparatif tbody tr:last-child th, .comparatif tbody tr:last-child td { border-bottom: 0; }
.comparatif thead th { font: 600 1.05rem/1.2 var(--titre); color: var(--texte); background: rgba(255, 255, 255, .04); }
.comparatif tbody th { font-weight: 500; color: var(--texte-2); width: 36%; }
.comparatif td { color: var(--texte); }
.comparatif .oui { display: inline-flex; align-items: center; gap: 8px; }
.comparatif .oui::before { content: ''; flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: rgba(95, 205, 178, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 12.5 3.2 3.2L17 9' fill='none' stroke='%23A6EBD8' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
@media (max-width: 679px) {
  .comparatif, .comparatif tbody, .comparatif tr, .comparatif th, .comparatif td { display: block; width: auto; }
  .comparatif thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .comparatif tbody tr { padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .comparatif tbody tr:last-child { border-bottom: 0; }
  .comparatif tbody th, .comparatif td { padding: 4px 0; border: 0; width: auto; }
  .comparatif tbody th { color: var(--texte); font-weight: 600; }
  .comparatif td::before { content: attr(data-formule) ' : '; color: var(--texte-3); font-weight: 500; }
}
.conditions { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 720px) { .conditions { grid-template-columns: 1fr 1fr; } }
.conditions li { padding: 20px 22px; border-radius: 18px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .09); }
.conditions h3 { font-size: 1.12rem; line-height: 1.25; margin-bottom: 8px; }
.conditions p { color: var(--texte-2); font-size: .96rem; }

/* ---------- Questions en détail (faq.html) ---------- */
.faq-groupe + .faq-groupe { margin-top: 44px; }
.faq-groupe h2 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); margin-bottom: 16px; }
.faq-sommaire { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 6px; }
.faq-sommaire a { color: var(--texte-2); text-decoration: none; }
.faq-sommaire a:hover { color: var(--texte); text-decoration: underline; }
.faq details ul { margin: 0; padding: 0 22px 20px 42px; color: var(--texte-2); }
.faq details ul + p, .faq details p + p { margin-top: -8px; }

/* ---------- Pages simples (mentions légales, confidentialité, 404) ---------- */
.texte-legal { max-width: 760px; margin: 0 auto; }
.texte-legal h1 { margin-bottom: 18px; font-size: clamp(2.1rem, 4.4vw, 3rem); letter-spacing: -0.03em; }
.texte-legal h2 { margin: 40px 0 12px; font-size: clamp(1.35rem, 2.4vw, 1.7rem); }
.texte-legal p, .texte-legal li { color: var(--texte-2); }
.texte-legal p + p { margin-top: 12px; }
.texte-legal ul { margin: 12px 0 0; padding-left: 22px; display: grid; gap: 8px; }
.texte-legal strong { color: var(--texte); }
.texte-legal address { font-style: normal; color: var(--texte-2); line-height: 1.7; }
.texte-legal .maj { margin-top: 40px; font-size: .9rem; color: var(--texte-3); }
.a-completer { padding: 1px 6px; border-radius: 6px; color: #0A1230; background: #FFD68C; font-weight: 600; }
.introuvable { display: grid; justify-items: center; gap: 18px; padding: 72px var(--gouttiere) 96px; text-align: center; }
.introuvable .mascotte { width: 150px; }
.introuvable h1 { font-size: clamp(2rem, 4vw, 2.8rem); }
.introuvable p { max-width: 34rem; color: var(--texte-2); }
.introuvable .actions { margin-top: 6px; }
@media (max-width: 639px) { .introuvable .actions { flex-direction: column; align-items: stretch; width: 100%; } }