/* =========================================================
   My3o — maquette refonte v2 « la preuve vivante » (6 juillet 2026)
   Squelette C (démonstration vivante) + peau B (verre clinique discipliné)
   + serif d'accent. Signature : iris/3O bleu, pupille = langage d'état.
   Source discours : docs/messaging-model.md (v3.5).
   ========================================================= */

:root {
  /* palette green-led */
  --green-deep: #3D5128;   /* olive : boutons, titres italiques */
  --green-dark: #26331A;   /* section sombre signature (constat) */
  --green-darker:#1C2712;
  --green:      #5BA642;   /* vie, validation, coches */
  --green-lume: #A8DC85;   /* vert lumineux : chiffres sur fond sombre */
  --green-soft: #E9EFDC;
  --green-mist: #F0F3E6;
  --cream:      #F5F4EC;
  --white:      #FDFDFB;
  --navy:       #0B1F4E;
  --navy-deep:  #071536;
  --gold:       #E8C547;   /* premium, rare */
  --ember:      #E0552D;   /* braise : très rare, jamais en aplat */
  /* iris : la signature bleue, point focal sur le vert */
  --iris-blue:  #1B6FF6;
  --iris-soft:  #7FB1F9;
  --iris-deep:  #0E3C8F;

  --ink:      #1C2433;
  --ink-soft: #54607A;
  --line:     rgba(11, 31, 78, 0.10);

  /* typo C actée DÉFAUT le 7/07 (choix Romain sur rendu) puis GRAVÉE dans les tokens au retrait
     du widget de maquette (7/07 soir) : Source Serif 4 (le serif d'Otomo) + Instrument Sans */
  --serif: "Source Serif 4", Georgia, serif;
  --sans:  "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --grad-cta: linear-gradient(105deg, #3D5128 0%, #5BA642 100%);
  --ease-signature: cubic-bezier(0.22, 1, 0.36, 1);

  --wrap: 1140px;
  --pad: clamp(1.25rem, 5vw, 2.5rem);
  --radius: 20px;
  --radius-lg: 28px;
  --shadow-card: 0 24px 50px -30px rgba(46, 61, 30, 0.35);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 5.5rem; overflow-anchor: none; }
body {
  margin: 0; font-family: var(--sans); color: var(--ink); background: var(--cream);
  line-height: 1.65; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* le marquee animé sert d'ancre à Chrome et fait dériver le scroll : on coupe l'anchoring */
  overflow-anchor: none;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; line-height: 1.12; font-weight: 600; }
p { margin: 0 0 1rem; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.wrap--narrow { max-width: 860px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- typographie ---------- */
/* échelle héroïque : métriques ex-typo C portées en base au retrait du widget (7/07 soir) */
h1 { font-family: var(--serif); font-size: clamp(2.9rem, 6vw, 5.2rem); letter-spacing: -0.03em; line-height: 1.04; color: var(--navy); }
h2 { font-family: var(--serif); font-size: clamp(2.1rem, 4.2vw, 3.3rem); letter-spacing: -0.024em; color: var(--navy); margin-bottom: 1.2rem; text-wrap: balance; }
h3 { font-size: 1.18rem; }
/* signature typographique : 1er temps navy droit, 2e temps olive italique */
h1 em, h2 em { font-style: italic; color: var(--green-deep); }

.lead { font-size: 1.14rem; color: var(--ink-soft); max-width: 58ch; margin-bottom: 2.2rem; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--green-deep); margin: 0 0 1.1rem;
}
/* fil rouge iris : chaque section porte la pupille signature */
.eyebrow::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 36% 32%, var(--iris-soft) 0%, var(--iris-blue) 60%, var(--iris-deep) 100%);
  box-shadow: 0 0 0 3px rgba(27, 111, 246, 0.12);
}
.eyebrow--dark { color: var(--green-lume); }

/* alpha ≥ 0.9 + 0.8rem : contraste AA (les sources sont de la preuve, pas de la déco) */
/* sources : plus petites et plus discrètes que le texte courant (Romain 7/07) */
.source { display: block; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.05em; text-transform: none; font-style: italic; color: var(--ink-soft); opacity: 0.62; margin-top: 0.5rem; }

.stat-mark { color: var(--green-deep); font-weight: 700; }


/* ---------- boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 0.98rem;
  padding: 0.9rem 1.7rem; border-radius: 999px; cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform .25s var(--ease-signature), box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.btn--primary {
  background: var(--grad-cta); color: #fff; background-clip: padding-box;
  box-shadow: 0 14px 32px -12px rgba(61, 81, 40, 0.65);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -12px rgba(61, 81, 40, 0.7); }
.btn--lg { padding: 1.05rem 2.2rem; font-size: 1.04rem; }
.btn--ghost { color: var(--green-deep); border-color: rgba(61, 81, 40, 0.4); background: rgba(255,255,255,0.5); }
.btn--ghost:hover { border-color: var(--green-deep); background: var(--white); }
button.btn--primary { border: 0; }

/* ---------- verre (chirurgical : nav, compagnon, blocs signature) ---------- */
.glass {
  background: rgba(253, 253, 251, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 24px 54px -28px rgba(46, 61, 30, 0.5);
}

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(245, 244, 236, 0.82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav__in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 0.75rem; }
.logo { display: inline-flex; align-items: baseline; font-family: var(--serif); font-weight: 700; font-size: 1.45rem; color: var(--navy); letter-spacing: 0.01em; }
.logo__o { display: inline-flex; align-self: center; width: 1.05em; margin-left: 0.06em; }
.logo .iris { --iris-size: 24px; width: 24px; }
.nav__links { display: flex; align-items: center; gap: 1.6rem; }
.nav__links a { color: var(--ink-soft); font-size: 0.92rem; font-weight: 500; position: relative; transition: color .2s ease; }
.nav__links a:hover { color: var(--navy); }
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -4px; height: 1.5px; width: 100%;
  background: var(--green-deep); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease-signature);
}
.nav__links a:hover::after { transform: scaleX(1); }
.nav__cta { padding: 0.6rem 1.25rem; font-size: 0.88rem; }

/* =========================================================
   IRIS — la signature. Pupille qui suit le curseur + langage d'état.
   ========================================================= */
.iris {
  position: relative; display: block; width: var(--iris-size, 100%); aspect-ratio: 1; border-radius: 50%; flex: none;
  background:
    repeating-conic-gradient(rgba(255,255,255,0.22) 0deg 2.4deg, transparent 2.4deg 7deg),
    radial-gradient(circle at 44% 40%, var(--iris-soft) 0%, var(--iris-blue) 52%, var(--iris-deep) 92%);
  box-shadow:
    inset 0 0 0 calc(0.035 * var(--iris-size, 300px)) rgba(253, 253, 251, 0.92),
    inset 0 0 calc(0.12 * var(--iris-size, 300px)) rgba(7, 21, 54, 0.35),
    0 18px 44px -16px rgba(11, 31, 78, 0.4);
}
.iris::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: repeating-conic-gradient(rgba(11,31,78,0.18) 0deg 1.6deg, transparent 1.6deg 6deg);
  -webkit-mask: radial-gradient(circle, transparent 92%, #000 93%);
  mask: radial-gradient(circle, transparent 92%, #000 93%);
}
/* anneau limbique */
.iris::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  box-shadow: inset 0 0 calc(0.07 * var(--iris-size, 300px)) rgba(7, 21, 54, 0.45);
}
.iris__pupil {
  position: absolute; left: 50%; top: 50%; width: 34%; height: 34%;
  margin: -17% 0 0 -17%; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #24407e 0%, var(--navy-deep) 65%);
  translate: var(--px, 0px) var(--py, 0px);
  transition: translate .18s ease-out, scale .4s var(--ease-signature);
}
.iris__pupil::after {
  content: ""; position: absolute; left: 22%; top: 16%; width: 22%; height: 22%;
  border-radius: 50%; background: #fff; opacity: 0.92;
}
/* dilatation quand un CTA primaire est survolé (l'œil réagit à l'intention) */
.iris.is-cta .iris__pupil { scale: 1.32; }
/* état « l'agent travaille » : pupille dilatée + halo vert qui respire */
.iris.is-working .iris__pupil { scale: 1.3; }
.iris.is-working { animation: irisGlow 1.6s ease-in-out infinite; }
@keyframes irisGlow {
  0%, 100% { outline: 4px solid rgba(91, 166, 66, 0.0); outline-offset: 2px; }
  50% { outline: 4px solid rgba(91, 166, 66, 0.45); outline-offset: 4px; }
}
/* tactile : la pupille dérive doucement toute seule */
@media (hover: none) and (prefers-reduced-motion: no-preference) {
  .iris__pupil { animation: irisIdle 8s ease-in-out infinite; }
}
@keyframes irisIdle {
  0%, 100% { translate: 0px 0px; }
  22% { translate: 4px -3px; }
  48% { translate: -4px 3px; }
  72% { translate: 3px 4px; }
}
.iris--state { --iris-size: 44px; width: 44px; }
.iris--badge { --iris-size: 30px; width: 30px; margin-bottom: 1rem; }
.iris--big { --iris-size: 120px; width: 120px; }
/* états de pupille : la signature est un langage, pas un clone répété */
.iris--open .iris__pupil { scale: 1.35; }
.iris--mid .iris__pupil { scale: 1.15; }

/* =========================================================
   HERO — la démo vivante
   ========================================================= */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  /* resserré (Romain 7/07) : la proof-line doit tenir dans le premier écran */
  padding: clamp(1.8rem, 3.5vh, 2.8rem) 0 clamp(2.8rem, 6vh, 4.6rem);
  background:
    radial-gradient(55% 50% at 75% 12%, rgba(232, 197, 71, 0.20), transparent 70%),
    linear-gradient(180deg, #F7F3E2 0%, #F3F1E2 55%, #EDEFD9 100%);
}
.hero__hills { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero__hills::before {
  content: ""; position: absolute; left: -20%; right: -20%; bottom: -46vw; height: 60vw;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: linear-gradient(180deg, #A7C68B 0%, #7FA85F 60%);
  opacity: 0.55;
}
.hero__hills::after {
  content: ""; position: absolute; left: -30%; right: 30%; bottom: -52vw; height: 62vw;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: linear-gradient(180deg, #87AB66 0%, #5E7F43 70%);
  opacity: 0.6;
}
/* parallax léger des collines au scroll : CSS natif, zéro JS */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero__hills::before { animation: hillDrift linear both; animation-timeline: scroll(); animation-range: 0vh 120vh; }
    .hero__hills::after { animation: hillDrift2 linear both; animation-timeline: scroll(); animation-range: 0vh 120vh; }
  }
}
@keyframes hillDrift { to { transform: translateY(-3vw); } }
@keyframes hillDrift2 { to { transform: translateY(-1.8vw); } }

.hero__grid {
  display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(2rem, 5vw, 4rem);
  align-items: center; min-height: min(68svh, 620px);
}
.hero__title { margin: 0 0 1.2rem; }
.hero__title .focus-line { display: block; text-wrap: balance; }
/* mise au point du titre (flou -> net) */
html.js .focus-line { opacity: 0; filter: blur(14px); transform: translateY(8px); }
.focus-line { transition: opacity 1s ease, filter 1s ease, transform 1s ease; }
html.js .focus-line.is-in { opacity: 1; filter: blur(0); transform: none; }
html.js .hero__title .focus-line:nth-child(2) { transition-delay: .25s; }

.hero__sub { font-size: clamp(1.02rem, 1.8vw, 1.16rem); color: var(--ink-soft); max-width: 46ch; margin-bottom: 1.1rem; }
/* min-height 2 lignes : le mot rotatif peut passer de 1 à 2 lignes, on fige la hauteur
   pour que la page ne « respire » pas sous le lecteur (sinon le scroll saute) */
.hero__audience { font-size: 1.02rem; color: var(--ink); margin-bottom: 1.6rem; min-height: calc(1.65em * 2); }
.rotator {
  display: inline-block; font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 1.12em;
  color: var(--green-deep); border-bottom: 2px solid rgba(91, 166, 66, 0.5);
  transition: opacity .3s ease, transform .3s ease;
}
.rotator.is-out { opacity: 0; transform: translateY(6px); }
.hero__actions { margin-bottom: 1rem; }
.proof-line { margin: 0; font-size: 0.84rem; font-weight: 600; color: var(--green-deep); opacity: 0.92; max-width: 46ch; }
.proof-line::before { content: "✓ "; color: var(--green); font-weight: 700; }

/* la carte compagnon (verre signature) sur scène sombre : le verre devient VISIBLE
   (prescription revue adverse : « one frosted panel against a vivid gradient ») */
.hero__demo { position: relative; }
.hero__scene {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 32px; padding: clamp(1.4rem, 2.5vw, 2.2rem);
  background: radial-gradient(120% 120% at 70% 15%, #3D5128 0%, #26331A 75%);
  box-shadow: 0 40px 80px -40px rgba(28, 39, 18, 0.8);
}
/* couche footage humain (Artlist) derrière la carte : la vidéo remplit la scène,
   l'overlay vert profond garde le verre lisible (GO Romain S60) */
.hero__footage { position: absolute; inset: 0; z-index: -1; }
.hero__footage-video { width: 100%; height: 100%; object-fit: cover; }
.hero__footage::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(61, 81, 40, 0.45) 0%, rgba(38, 51, 26, 0.72) 60%, rgba(28, 39, 18, 0.85) 100%);
}
.companion { border-radius: var(--radius-lg); padding: 1.4rem 1.4rem 1.5rem; }
.hero__scene .glass {
  background: rgba(253, 253, 251, 0.88);
  border-color: rgba(255, 255, 255, 0.95);
}
.hero__scene .demo-note { color: rgba(245, 244, 236, 0.75); }
.companion__clock { margin-left: auto; font-size: 0.74rem; font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.msg__time { font-style: normal; font-weight: 600; letter-spacing: 0.02em; text-transform: none; opacity: 0.75; margin-left: 0.35rem; }
.notif__time { font-style: normal; font-size: 0.74rem; font-weight: 500; color: var(--ink-soft); }
.companion__head {
  display: flex; align-items: center; gap: 0.85rem;
  padding-bottom: 1rem; margin-bottom: 1.1rem;
  border-bottom: 1px solid rgba(11, 31, 78, 0.08);
}
.companion__id { display: flex; flex-direction: column; line-height: 1.3; }
.companion__id strong { font-size: 0.98rem; color: var(--navy); }
.companion__status { font-size: 0.78rem; font-weight: 600; color: var(--green-deep); }
.companion__status::before { content: "● "; color: var(--green); font-size: 0.6rem; vertical-align: 1px; }
.companion__thread { display: grid; gap: 0.9rem; }
.msg { max-width: 92%; border-radius: 16px; padding: 0.9rem 1.05rem 0.8rem; }
/* convention messagerie (Romain 13/07) : les messages du praticien à DROITE, le compagnon à gauche */
.msg--pro { background: var(--white); border: 1px solid var(--line); justify-self: end; border-bottom-right-radius: 6px; }
.msg--bot { background: var(--green-soft); justify-self: start; border-bottom-left-radius: 6px; }
.msg__who { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); opacity: 0.8; margin-bottom: 0.45rem; }
.msg__text { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--ink); }
.msg--pro .msg__text { font-style: italic; }
.msg--pro .msg__text::first-line { line-height: 1.5; }

/* bulle note vocale */
.voice { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.55rem; }
.voice__dot { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--green-deep); position: relative; }
.voice__dot::after {
  content: ""; position: absolute; left: 50%; top: 50%; translate: -38% -50%;
  border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent #fff;
}
.voice__wave { display: flex; align-items: center; gap: 2.5px; height: 22px; }
.voice__wave i { width: 3px; border-radius: 2px; background: var(--green-deep); height: 30%; }
.voice__wave i:nth-child(3n) { background: var(--green); }
.voice__time { font-size: 0.76rem; font-weight: 600; color: var(--ink-soft); }

/* notification de livraison */
.notif {
  justify-self: center; display: inline-flex; align-items: center; gap: 0.55rem;
  background: var(--white); border: 1px solid rgba(91, 166, 66, 0.35);
  border-radius: 999px; padding: 0.55rem 1.1rem;
  font-size: 0.88rem; font-weight: 600; color: var(--green-deep);
  box-shadow: 0 14px 30px -18px rgba(46, 61, 30, 0.55);
}
.notif__check {
  flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--green); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 0.68rem; font-weight: 700;
}
.demo-note { margin: 0.9rem 0 0; text-align: center; font-size: 0.78rem; color: var(--ink-soft); opacity: 0.8; }

/* apparition séquencée de la conversation */
html.js .convo-step { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease-signature), transform .6s var(--ease-signature); }
html.js .convo-step.is-shown { opacity: 1; transform: none; }

/* =========================================================
   SECTIONS
   ========================================================= */
.section { padding: clamp(4.5rem, 9vw, 8.5rem) 0; }
.section--mist { background: linear-gradient(180deg, var(--cream) 0%, #EFF2E3 100%); }

/* ---------- 1bis. bandeau marque : 3O expliqué, apparition unique ---------- */
.marque { padding: clamp(1.5rem, 3vw, 2.2rem) 0; background: var(--white); border-block: 1px solid var(--line); }
.marque__in { display: flex; align-items: baseline; justify-content: space-between; gap: 1.2rem 2.5rem; flex-wrap: wrap; }
.marque__line {
  display: inline-flex; align-items: baseline; gap: 0.6rem; margin: 0;
  font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem, 2.1vw, 1.4rem);
  color: var(--navy); letter-spacing: -0.01em;
}
.marque__line::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%; flex: none; align-self: center;
  background: radial-gradient(circle at 36% 32%, var(--iris-soft) 0%, var(--iris-blue) 60%, var(--iris-deep) 100%);
  box-shadow: 0 0 0 3px rgba(27, 111, 246, 0.12);
}

/* bande MÉDIA (7/07 soir) : le footage Artlist (soignant + petite fille, lampe) EST la preuve
   d'origine — pleine largeur, texte posé sur un dégradé vert profond, lisible sans cacher l'image */
.marque--media {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(4.5rem, 10vw, 8rem) 0; border-block: 0;
}
.marque__video {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
}
.marque--media::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(28, 39, 18, 0.86) 0%, rgba(28, 39, 18, 0.55) 48%, rgba(28, 39, 18, 0.18) 100%);
}
.marque--media .marque__in { flex-direction: column; align-items: flex-start; gap: 0.9rem; }
.marque--media .marque__line { color: #F5F4EC; font-size: clamp(1.5rem, 2.9vw, 2.1rem); }
.marque--media .marque__line em { color: var(--green-lume); }
.marque--media .marque__3o, .marque--media .marque__pair { color: rgba(245, 244, 236, 0.85); }
.marque--media .marque__pair::before { color: var(--green-lume); }
.marque__line em { font-style: italic; color: var(--green-deep); }
.marque__3o { margin: 0; font-size: 0.88rem; color: var(--ink-soft); max-width: 56ch; }

/* ---------- 2. constat : LA section sombre signature ---------- */
.constat {
  background: var(--green-dark);
  background-image:
    radial-gradient(70% 60% at 85% 0%, rgba(91, 166, 66, 0.22), transparent 70%),
    radial-gradient(50% 45% at 8% 100%, rgba(27, 111, 246, 0.10), transparent 70%);
  color: rgba(245, 244, 236, 0.88);
}
.constat__title { color: var(--cream); font-family: var(--serif); font-size: clamp(2.1rem, 4.4vw, 3.4rem); letter-spacing: -0.018em; margin-bottom: clamp(2.2rem, 5vw, 3.5rem); text-wrap: balance; }
.constat__title em { font-style: italic; color: var(--green-lume); }
.constat__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); max-width: 940px; }
.constat__side { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--green-lume); margin-bottom: 0.9rem; }
.constat__col p { font-size: 1.04rem; line-height: 1.7; }
.constat .stat-mark { color: var(--green-lume); }
.constat .source { color: rgba(245, 244, 236, 0.55); }
/* rail de preuves façon Felix Health : les chiffres praticien deviennent les héros */
.constat__pills { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 1.1rem 0 1.3rem; }
.constat__pills li {
  display: flex; flex-direction: column; align-items: center; gap: 0.1rem;
  padding: 0.9rem 1.4rem; border-radius: 18px;
  background: rgba(245, 244, 236, 0.06);
  border: 1px solid rgba(168, 220, 133, 0.3);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.constat__pills strong { font-family: var(--serif); font-weight: 600; font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1; color: var(--green-lume); font-variant-numeric: tabular-nums; }
.constat__pills span { font-size: 0.78rem; color: rgba(245, 244, 236, 0.85); }
/* clôture en STYLE CITATION (retours Romain 6-7/07) : étirée, centrée, guillemets
   décoratifs verts, respiration au-dessus — elle doit ressortir comme une pull-quote */
.constat__close {
  position: relative;
  margin: clamp(2.8rem, 6vw, 4.2rem) auto 0; max-width: 72ch; text-align: center;
  font-family: var(--serif); font-style: italic; font-size: clamp(1.35rem, 2.6vw, 1.95rem);
  color: var(--cream); line-height: 1.5; text-wrap: balance;
  padding-top: clamp(1.4rem, 3vw, 2rem);
}
.constat__close::before {
  content: ""; position: absolute; top: 0; left: 50%; translate: -50% 0;
  width: 54px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--green-lume), transparent);
}
.constat__close::first-letter { margin-left: 0; }

/* ---------- cartes génériques ---------- */
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }

/* bento réponse : la grande carte MONTRE, elle n'affirme pas (prescription revue adverse) */
.bento { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: auto auto; gap: 1.3rem; }
.bento__main { grid-row: 1 / 3; display: flex; flex-direction: column; }
.minidemo { margin-top: auto; padding-top: 1.4rem; display: grid; gap: 0.7rem; }
.minidemo__bubble { border-radius: 16px; padding: 0.9rem 1.1rem; font-size: 0.94rem; line-height: 1.55; max-width: 88%; }
/* convention messagerie (Romain 13/07) : praticien à droite, compagnon à gauche */
.minidemo__bubble--pro { background: var(--green-mist); justify-self: end; border-bottom-right-radius: 4px; font-style: italic; color: var(--ink); }
.minidemo__bubble--bot { background: var(--green-soft); justify-self: start; border-bottom-left-radius: 4px; color: var(--ink); }
.minidemo__bubble--bot em { font-style: italic; color: var(--green-deep); }
.minidash { display: flex; align-items: flex-end; gap: 1.1rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.minidash__stat { display: flex; flex-direction: column; }
.minidash__stat strong { font-family: var(--serif); font-size: 1.6rem; font-weight: 600; color: var(--green-deep); line-height: 1; }
.minidash__stat span { font-size: 0.72rem; color: var(--ink-soft); }

/* moment iris architectural : un seul, grand, à moitié hors cadre (leçon Beige Clinique).
   Il vit dans le VIDE à droite du lead, jamais sur les cartes. */
.section--reponse { position: relative; overflow: hidden; }
.section--reponse .wrap { position: relative; z-index: 1; }
.iris--arch {
  --iris-size: 230px; width: 230px;
  position: absolute; right: -100px; top: 8rem;
  opacity: 0.92; pointer-events: none; z-index: 0;
}
.cards4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.3rem; max-width: 940px; }
.card {
  padding: 1.8rem 1.7rem; border-radius: var(--radius); background: var(--white);
  border: 1px solid var(--line); box-shadow: var(--shadow-card);
}
.card h3 { font-family: var(--serif); font-size: 1.3rem; color: var(--navy); margin-bottom: 0.6rem; }
.card p { margin: 0; font-size: 0.95rem; color: var(--ink-soft); }
@media (hover: hover) {
  .card.tilt { transition: transform .35s var(--ease-signature), box-shadow .35s ease; }
  .card.tilt:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -32px rgba(46, 61, 30, 0.5); }
}
.roadmap { margin: 2rem 0 0; font-size: 0.9rem; color: var(--ink-soft); opacity: 0.85; }

/* ---------- 4. moteur contenu : bloc bascule médias ---------- */
.medias { border-radius: var(--radius-lg); padding: clamp(1.6rem, 3.5vw, 2.5rem); max-width: 860px; }
.medias__title { font-family: var(--serif); font-size: 1.5rem; color: var(--navy); margin-bottom: 1.2rem; }
.medias__list { display: grid; gap: 1rem; margin-bottom: 1.2rem; }
.medias__list li { position: relative; padding-left: 1.7rem; font-size: 0.98rem; color: var(--ink); }
.medias__list li::before {
  content: ""; position: absolute; left: 0; top: 0.42em; width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, var(--iris-soft) 0%, var(--iris-blue) 60%, var(--iris-deep) 100%);
}
.medias__list .source { display: inline; margin-left: 0.4rem; }
.medias__close { margin: 0; font-family: var(--serif); font-style: italic; font-size: 1.18rem; color: var(--green-deep); }

/* ---------- 5. marquee + bandeau ---------- */
.strip { padding: 0 0 clamp(3.5rem, 7vw, 5.5rem); background: linear-gradient(180deg, #EFF2E3 0%, var(--cream) 100%); }
.marquee { overflow: hidden; border-block: 1px solid var(--line); background: var(--white); }
.marquee__track {
  display: flex; align-items: center; gap: 2.2rem; width: max-content;
  padding: 1.05rem 2.2rem 1.05rem 0; animation: marquee 36s linear infinite;
}
.marquee__track span { font-family: var(--serif); font-style: italic; font-size: 1.08rem; color: var(--green-deep); white-space: nowrap; }
.marquee__track .dot { width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 36% 32%, var(--iris-soft) 0%, var(--iris-blue) 60%, var(--iris-deep) 100%); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (hover: hover) { .marquee:hover .marquee__track { animation-play-state: paused; } }

/* marge haute alignée sur le rythme des sections (retour Romain 7/07 : respirer après le marquee) */
.bandeau { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); margin-top: clamp(4.5rem, 9vw, 8.5rem); max-width: 940px; }
.bandeau__num { display: block; font-family: var(--serif); font-weight: 600; font-size: clamp(3rem, 6vw, 4.4rem); line-height: 1; color: var(--green-deep); margin-bottom: 0.5rem; }
.bandeau__item p { margin: 0; font-size: 0.98rem; color: var(--ink-soft); max-width: 36ch; }

/* ---------- 6. boucle patient ---------- */
.vocal { border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.2rem); max-width: 780px; margin-bottom: 1.6rem; }
.vocal__player { display: flex; gap: 1.1rem; align-items: flex-start; }
.vocal__body { flex: 1; }
.vocal__body strong { display: block; font-size: 1.02rem; color: var(--navy); margin-bottom: 0.3rem; }
.vocal__ext { margin: 1.2rem 0 0; padding-top: 1.1rem; border-top: 1px solid rgba(11, 31, 78, 0.08); font-size: 0.92rem; color: var(--ink-soft); }
.compliance {
  max-width: 780px; padding: 1.5rem 1.7rem; border-radius: var(--radius);
  background: var(--green-mist); border-left: 4px solid var(--green);
}
.compliance h3 { font-family: var(--serif); font-size: 1.25rem; color: var(--navy); margin-bottom: 0.6rem; }
.compliance p { margin: 0; font-size: 0.95rem; color: var(--ink); line-height: 1.65; }

/* ---------- 7. parcours 01/02/03 ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 1.6rem); }
.step {
  position: relative; padding: 2.1rem 1.7rem 1.9rem; border-radius: var(--radius);
  background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-card);
}
.step__num { display: block; font-family: var(--serif); font-size: 2rem; font-weight: 600; color: var(--green); margin-bottom: 0.7rem; }
.step h3 { font-family: var(--serif); font-size: 1.4rem; color: var(--navy); margin-bottom: 0.7rem; }
.step p { color: var(--ink-soft); margin: 0; font-size: 0.96rem; }

/* ---------- 8. offre ---------- */
.lead--3o { font-family: var(--serif); font-style: italic; font-size: 1.16rem; color: var(--green-deep); }
.offre__grid { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(1.4rem, 3vw, 2.2rem); align-items: start; }
.socle { border-radius: var(--radius-lg); padding: clamp(1.8rem, 3.5vw, 2.6rem); }
.socle__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.socle__head h3 { font-family: var(--serif); font-size: 1.9rem; color: var(--navy); }
.badge--launch {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff; background: var(--ember); padding: 0.35rem 0.85rem; border-radius: 999px;
  box-shadow: 0 8px 20px -10px rgba(224, 85, 45, 0.7);
}
.socle__intro { font-size: 0.98rem; color: var(--ink-soft); margin-bottom: 1.1rem; }
.socle__list { display: grid; gap: 0.6rem; margin-bottom: 1.6rem; }
.socle__list li { position: relative; padding-left: 1.85rem; font-size: 0.96rem; color: var(--ink); }
.socle__list li::before {
  content: "✓"; position: absolute; left: 0; top: 0.08em;
  width: 19px; height: 19px; border-radius: 50%; background: var(--green); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 0.62rem; font-weight: 700;
}
.socle__prices { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; padding-top: 1.4rem; border-top: 1px solid rgba(11, 31, 78, 0.1); }
.price__label { display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.35rem; }
.price__num { display: block; font-family: var(--serif); font-weight: 600; font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.05; color: var(--navy); font-variant-numeric: tabular-nums; }
.price__num s { font-size: 0.6em; color: var(--ink-soft); font-weight: 500; }
.price__per { font-family: var(--sans); font-size: 0.42em; font-weight: 600; color: var(--ink-soft); }
.price__note { display: block; font-size: 0.8rem; color: var(--ink-soft); margin-top: 0.5rem; line-height: 1.5; }

.extensions { padding: clamp(1.6rem, 3vw, 2.2rem); border-radius: var(--radius-lg); background: var(--green-mist); border: 1px solid rgba(91, 166, 66, 0.22); }
.extensions h3 { font-family: var(--serif); font-size: 1.55rem; color: var(--navy); margin-bottom: 0.4rem; }
.extensions__intro { font-size: 0.88rem; color: var(--ink-soft); margin-bottom: 1.2rem; }
.extensions__list li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0.85rem 0; border-bottom: 1px solid rgba(11, 31, 78, 0.08);
  font-size: 0.94rem; color: var(--ink);
}
.extensions__list li:last-child { border-bottom: 0; }
.extensions__list small { display: block; font-size: 0.76rem; color: var(--ink-soft); font-weight: 400; }
.extensions__list strong { color: var(--green-deep); white-space: nowrap; text-align: right; font-weight: 700; }
.extensions__list strong small { white-space: normal; }
.extensions__audit { font-size: 0.86rem; color: var(--ink); margin: 1.2rem 0 0; font-weight: 600; }
/* le site du cabinet : la cash machine — carte dédiée, accent OR (usage unique dans l'offre),
   one-shot explicite + mini-CTA (7/07) */
.sitecard {
  display: flex; align-items: center; justify-content: space-between; gap: clamp(1.2rem, 3vw, 2.5rem);
  margin-top: clamp(1.4rem, 3vw, 2.2rem); padding: clamp(1.4rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2.4rem);
  border-radius: var(--radius-lg); background: var(--white);
  border: 1px solid rgba(232, 197, 71, 0.55); border-left: 5px solid var(--gold);
  box-shadow: 0 24px 54px -32px rgba(46, 61, 30, 0.45);
}
.sitecard__body h3 { font-family: var(--serif); font-size: 1.5rem; color: var(--navy); margin-bottom: 0.45rem; }
.sitecard__body p { margin: 0; font-size: 0.96rem; color: var(--ink-soft); max-width: 52ch; }
.sitecard__cta { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; flex: none; }
.sitecard__price { font-family: var(--serif); font-weight: 600; font-size: 1.7rem; color: var(--navy); white-space: nowrap; }
@media (max-width: 760px) {
  .sitecard { flex-direction: column; align-items: flex-start; }
  .sitecard__cta { flex-direction: row; align-items: center; }
}

/* réseaux/groupes : au niveau de l'offre ENTIÈRE (sortie de la boîte extensions, 6/07 soir) */
.offre__groupes {
  max-width: 760px; margin: clamp(1.6rem, 3vw, 2.2rem) auto 0; text-align: center;
  font-size: 0.98rem; color: var(--ink);
  padding: 1rem 1.4rem; border-radius: 999px;
  background: var(--white); border: 1px solid var(--line);
}
.ht-note { margin: 1rem 0 0; font-size: 0.78rem; color: var(--ink-soft); opacity: 0.8; text-align: center; }

/* l'Empreinte : clôture signature */
.empreinte {
  display: flex; align-items: center; gap: clamp(1.4rem, 3vw, 2.2rem);
  max-width: 860px; margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  padding: clamp(1.6rem, 3vw, 2.4rem); border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--green-soft) 0%, #DCE7C8 100%);
  border: 1px solid rgba(91, 166, 66, 0.25);
}
.empreinte p { margin: 0; font-family: var(--serif); font-size: clamp(1.08rem, 2vw, 1.3rem); line-height: 1.55; color: var(--navy); }
.empreinte em { font-style: italic; color: var(--green-deep); }

/* ---------- 9. confiance ---------- */
.jamais { max-width: 940px; margin-top: 2rem; padding: 1.6rem 1.8rem; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--navy); }
.jamais h3 { font-family: var(--serif); font-size: 1.25rem; color: var(--navy); margin-bottom: 0.5rem; }
.jamais p { margin: 0; font-size: 0.98rem; color: var(--ink); }

/* ---------- 10. qui ---------- */
.qui__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.qui__photo {
  position: sticky; top: 6.5rem;
  aspect-ratio: 4 / 5; border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--green-soft) 0%, #DCE7C8 60%, #CBDDB4 100%);
  border: 1px solid rgba(91, 166, 66, 0.25);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem;
}
.qui__quote { border-left: 3px solid var(--green); padding-left: 1.4rem; margin: 1.4rem 0; }
.qui__quote p { font-size: 1.04rem; color: var(--ink); line-height: 1.75; }
.qui__sign { font-size: 0.95rem; color: var(--ink-soft); }
.qui__sign strong { color: var(--navy); }

/* ---------- 11. FAQ ---------- */
.faq { display: grid; gap: 0.8rem; }
.faq details {
  border-radius: 16px; background: var(--white); border: 1px solid var(--line);
  overflow: hidden; box-shadow: 0 14px 34px -28px rgba(46, 61, 30, 0.4);
  transition: box-shadow .25s ease;
}
.faq details[open] { box-shadow: var(--shadow-card); }
.faq summary {
  list-style: none; cursor: pointer; padding: 1.15rem 1.4rem;
  font-family: var(--serif); font-weight: 600; font-size: 1.06rem; color: var(--navy);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--green-soft); color: var(--green-deep);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 1.15rem; font-weight: 500; line-height: 1;
  transition: transform .25s ease, background .25s ease, color .25s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); background: var(--green); color: #fff; }
.faq details p { margin: 0; padding: 0 1.4rem 1.25rem; color: var(--ink-soft); font-size: 0.95rem; }

/* ---------- 12. contact ---------- */
.contact { background: linear-gradient(180deg, #EFF2E3 0%, var(--cream) 100%); }
.form { border-radius: var(--radius-lg); padding: clamp(1.6rem, 3vw, 2.4rem); display: grid; gap: 1.1rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--navy); }
.form input, .form textarea {
  width: 100%; margin-top: 0.4rem; font-family: var(--sans); font-size: 16px; color: var(--ink);
  padding: 0.85rem 1rem; border: 1.5px solid rgba(11, 31, 78, 0.14); border-radius: 14px; background: var(--white);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.form input:focus, .form textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px rgba(91, 166, 66, 0.22); }
.form textarea { resize: vertical; }
.form label.form__optin { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.85rem; font-weight: 500; color: var(--ink-soft); cursor: pointer; }
.form label.form__optin input { width: auto; margin-top: 0.15rem; padding: 0; accent-color: var(--green); }
.form .btn { justify-self: start; }
.form__rgpd { margin: 0; font-size: 0.78rem; color: var(--ink-soft); opacity: 0.85; }
.contact__alt { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.6rem; font-size: 0.95rem; color: var(--ink-soft); }

/* ---------- footer ---------- */
.footer { background: var(--green-darker); color: rgba(245, 244, 236, 0.75); padding: clamp(3rem, 6vw, 4.5rem) 0 2rem; }
.footer__motto { font-family: var(--serif); font-size: clamp(1.7rem, 3.4vw, 2.6rem); color: var(--cream); margin-bottom: 2.2rem; letter-spacing: -0.015em; }
.footer__motto em { font-style: italic; color: var(--green-lume); }
.footer__row { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; border-top: 1px solid rgba(245, 244, 236, 0.14); padding-top: 1.6rem; }
.logo--footer { color: var(--cream); font-size: 1.2rem; }
.footer__links { display: flex; gap: 1.4rem; }
.footer__links a { font-size: 0.85rem; color: rgba(245, 244, 236, 0.7); transition: color .2s ease; }
.footer__links a:hover { color: var(--cream); }
.footer__copy { margin: 0; font-size: 0.82rem; opacity: 0.6; }

/* ---------- pastille bot iris (bas de page) : doit se LIRE comme un assistant ---------- */
.irisbot {
  position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 55;
  display: flex; align-items: center; gap: 0.6rem;
  border-radius: 999px; cursor: pointer; padding: 8px 8px;
  background: rgba(253, 253, 251, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 18px 40px -14px rgba(11, 31, 78, 0.5);
  transition: transform .3s var(--ease-signature), box-shadow .3s ease;
}
.irisbot__bubble {
  font-size: 0.86rem; font-weight: 600; color: var(--navy);
  padding-left: 0.75rem; white-space: nowrap;
}
.irisbot .iris { --iris-size: 44px; width: 44px; }
.irisbot:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -16px rgba(11, 31, 78, 0.6); }
/* queue de bulle : l'affordance conversation */
.irisbot::after {
  content: ""; position: absolute; right: 20px; bottom: -7px;
  width: 14px; height: 14px; background: rgba(253, 253, 251, 0.85);
  border-right: 1px solid rgba(255, 255, 255, 0.95); border-bottom: 1px solid rgba(255, 255, 255, 0.95);
  transform: rotate(45deg); border-radius: 0 0 4px 0;
}

/* ---------- reveals « mise au point » (flou -> net) ---------- */
html.js .reveal { opacity: 0; transform: translateY(16px); filter: blur(7px); }
.reveal { transition: opacity .8s ease, transform .8s var(--ease-signature), filter .8s ease; }
html.js .reveal.is-in { opacity: 1; transform: none; filter: blur(0); }

/* ---------- focus clavier ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--green); outline-offset: 3px;
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  html.js .reveal, html.js .focus-line, html.js .convo-step { opacity: 1 !important; filter: none !important; transform: none !important; }
  .marquee__track { width: auto; flex-wrap: wrap; padding-inline: var(--pad); }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; min-height: 0; gap: 2.5rem; }
  .hero__demo { max-width: 560px; }
  .cards3 { grid-template-columns: 1fr 1fr; }
  .bento { grid-template-columns: 1fr; grid-template-rows: none; }
  .bento__main { grid-row: auto; }
  .iris--arch { display: none; }
  .steps { grid-template-columns: 1fr; max-width: 620px; }
  .offre__grid { grid-template-columns: 1fr; }
  .qui__grid { grid-template-columns: 1fr; }
  .qui__photo { position: static; max-width: 380px; }
  .nav__links { display: none; }
}
@media (max-width: 760px) {
  .constat__cols { grid-template-columns: 1fr; }
  .cards3, .cards4 { grid-template-columns: 1fr; }
  .bandeau { grid-template-columns: 1fr; }
  .socle__prices { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .empreinte { flex-direction: column; text-align: center; }
  .empreinte .iris--big { margin-inline: auto; }
  .nav__cta { display: none; }
}
@media (max-width: 520px) {
  .msg { max-width: 100%; }
  .hero { padding-top: 2rem; }
  .hero__actions .btn { width: 100%; }
  .irisbot { right: 1rem; bottom: 1rem; }
  .irisbot__bubble { display: none; }
  .constat__pills { gap: 0.6rem; }
  .constat__pills li { padding: 0.7rem 1rem; }
}

/* ===================== PASSE FIL CONDUCTEUR (7/07/2026) ===================== */
/* Transitions de sections. Passe design 7/07 (retours Romain) : le connecteur est un FIL vertical
   (hairline verte), littéralement le fil que la marque promet de retendre — plus de flèche. */
.fil {
  margin: 2.4rem auto 0; max-width: 60ch; text-align: center;
  font-size: 1.04rem; color: var(--ink-soft); line-height: 1.55;
}
.fil em { font-family: var(--serif); font-style: italic; color: var(--green-deep); }
.fil::after {
  content: ""; display: block; width: 1px; height: 46px; margin: 0.9rem auto 0;
  background: linear-gradient(180deg, var(--green) 0%, transparent 100%);
}
/* pont « deux services » : intro de la zone contenus→automatisations, collé au bloc (Romain 7/07).
   Le fil ARRIVE dans cette ligne (::before descendant) puis le contenu suit sans flèche. */
.fil--pont { margin: 0 auto 3rem; }
.fil--pont::before {
  content: ""; display: block; width: 1px; height: 46px; margin: 0 auto 0.9rem;
  background: linear-gradient(180deg, transparent 0%, var(--green) 100%);
}
.fil--pont::after { content: none; }

/* Rythme vertical de la ZONE ENCHAÎNÉE (Ce qu'on fait → contenus → automatisations → offre) :
   resserré, elle se lit comme UN raisonnement ; le manifeste et le Qui gardent la respiration large. */
#reponse, #contenus, #boucle { padding-block: clamp(3.2rem, 6vw, 5.2rem); }
/* automatisations → offre : respiration élargie (Romain 7/07 soir v4) */
#offre { padding-top: clamp(4.4rem, 8.5vw, 7rem); }
/* bandeau 84/77 rapproché du marquee (Romain 7/07 soir : cohérence visuelle du bloc) */
.strip .bandeau { margin-top: clamp(1.8rem, 3.5vw, 2.8rem); }

/* (classe .iris--braise supprimée 7/07 soir v4 : le badge validation est revenu au bleu ;
   la braise ne vit plus QUE dans la chauffe souris de l'iris architectural, js irisHeat) */

/* iris architectural : BLEU d'origine, il CHAUFFE à l'APPROCHE de la souris, proportionnellement
   (Romain 7/07 soir v2 — le scroll-driven le laissait chaud en permanence ; la proximité curseur
   est pilotée par js/main.js, fonction irisHeat, « volcan / verre en fusion ») */
.iris--arch { transition: filter 0.25s ease-out; will-change: filter; }

/* Greffe pair au bandeau marque (superlatif RV réservé au Qui) */
.marque__pair { margin: 0; font-size: 0.88rem; color: var(--ink-soft); }
.marque__pair::before { content: "— "; color: var(--green); }

/* Parcours 01/02/03 absorbé dans la Réponse */
.steps--inline { margin: 2.6rem 0 2.8rem; }

/* Cadre téléphone du compagnon — RESTYLÉ 7/07 (retour Romain : bezel sombre « moche »)
   Référence = les téléphones de l'éventail v1 : contour navy fin, corps clair, écran crème */
.phone {
  position: relative; margin-inline: auto;
  /* proportions RÉELLES de téléphone (Romain 7/07 soir : le cadre était trop large/trop court) */
  width: min(100%, 322px); aspect-ratio: 10 / 19.2;
  overflow: hidden;
  display: flex; flex-direction: column;
  border-radius: 44px; padding: 9px;
  background: #FDFDFB;
  border: 3px solid var(--navy);
  box-shadow: 0 30px 70px -32px rgba(7, 21, 54, 0.55);
}
.phone::before { /* îlot capteurs, navy comme le contour v1 */
  content: ""; position: absolute; top: 19px; left: 50%; transform: translateX(-50%);
  width: 78px; height: 19px; border-radius: 11px; background: var(--navy); z-index: 2;
}
/* pas de bouton latéral : les téléphones v1 sont des silhouettes épurées */
.phone .companion { border-radius: 35px; padding: 2.4rem 1rem 1rem; flex: 1; display: flex; flex-direction: column; min-height: 0; }
.phone .companion__thread { flex: 1; align-content: start; gap: 0.7rem; }
.phone .companion__head { padding-bottom: 0.8rem; margin-bottom: 0.9rem; }
.phone .msg { padding: 0.75rem 0.9rem 0.7rem; }
.phone .msg__text { font-size: 0.85rem; line-height: 1.45; }
/* scène verte retirée (Romain 7/07 soir) : le téléphone flotte sur le fond du hero */
.hero__scene--bare {
  background: none; box-shadow: none; border-radius: 0; overflow: visible;
  padding: 0 0 0.4rem;
}
.hero__scene--bare .glass { background: rgba(253, 253, 251, 0.96); border-color: rgba(11, 31, 78, 0.06); }
.hero__scene--bare .demo-note { color: var(--ink-soft); }
.hero__scene--bare .phone { box-shadow: 0 36px 80px -34px rgba(7, 21, 54, 0.45), 0 12px 30px -18px rgba(46, 61, 30, 0.3); }

/* calibrage hero (Romain 7/07, ajusté « mieux mis en avant, sans casser le reste ») :
   titre borné pour que CTA + proof-line tiennent au premier écran, mais remonté d'un cran ;
   sous-titre densifié (encre pleine, corps +) pour porter la promesse */
.hero__title { font-size: clamp(2.5rem, 4.55vw, 3.8rem); line-height: 1.06; margin-bottom: 1.1rem; }
.hero .hero__sub { font-size: clamp(1.08rem, 1.9vw, 1.24rem); color: var(--ink); max-width: 44ch; }
.hero__audience { margin-bottom: 1.2rem; }

/* Animation au scroll du téléphone (progressive enhancement, à valider sur rendu) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .phone {
      animation: phone-settle linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 45%;
    }
    @keyframes phone-settle {
      from { transform: translateY(22px) rotate(1.4deg); }
      to   { transform: translateY(0) rotate(0); }
    }
  }
}
@media (max-width: 760px) {
  .phone { max-width: 100%; border-radius: 38px; }
  .phone .companion { border-radius: 28px; }
}

/* =========================================================
   PASSE PREMIUM MONDIAL (12/07/2026) — codes des meilleurs sites
   2025-2026 (Linear/Stripe/Vercel/Awwwards) adaptés à NOS codes.
   Sources : recherche duo Perplexity × Exa du 12/07, valeurs de
   synthèse (les sites primés ne publient pas leur CSS source).
   Règles adoptées : 2 courbes max dans tout le système · animer
   transform+opacity seulement · sortie plus rapide que l'entrée ·
   stagger 80 ms · thumb zone mobile · safe-area iOS.
   ========================================================= */

:root {
  /* courbe secondaire : hover/press (la signature reste --ease-signature) */
  --ease-quick: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- micro-détails « cher » ---------- */
::selection { background: rgba(91, 166, 66, 0.28); color: var(--ink); }
.constat ::selection, .footer ::selection { background: rgba(168, 220, 133, 0.4); color: var(--green-darker); }
p, li { text-wrap: pretty; }

/* presse tactile : l'appui répond en 60 ms (plus vite que le relâchement = physique réelle) */
.btn:active { transform: translateY(1px) scale(0.985); transition-duration: .06s; box-shadow: 0 8px 18px -10px rgba(61, 81, 40, 0.55); }
.faq summary:active { opacity: 0.75; transition: opacity .06s ease; }
.irisbot:active { transform: translateY(0) scale(0.97); transition-duration: .06s; }

/* ---------- nav : état scrollé + fil de progression ---------- */
.nav { transition: box-shadow .3s ease, background .3s ease; }
.nav.is-scrolled {
  background: rgba(245, 244, 236, 0.92);
  box-shadow: 0 12px 32px -22px rgba(11, 31, 78, 0.35);
}
/* fil de lecture : la hairline verte de la marque, pilotée par le scroll (CSS natif, zéro JS) */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .nav::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
      background: linear-gradient(90deg, var(--green-deep), var(--green) 70%, var(--green-lume));
      transform-origin: left; transform: scaleX(0);
      animation: navProgress linear both; animation-timeline: scroll();
    }
    @keyframes navProgress { to { transform: scaleX(1); } }
  }
}

/* ---------- reveals : stagger 80 ms (piloté par js, --reveal-delay par fratrie) ---------- */
html.js .reveal { transition-delay: var(--reveal-delay, 0s); }
html.js .reveal.is-in { transition-delay: var(--reveal-delay, 0s); }

/* ---------- FAQ : ouverture animée (navigateurs 2025+, dégradation propre ailleurs) ---------- */
@supports (interpolate-size: allow-keywords) {
  /* scopé à la FAQ (revue adverse : posé sur :root, toute future transition vers auto
     ailleurs sur le site aurait hérité du comportement) */
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content {
    block-size: 0; overflow: clip; opacity: 0;
    transition: block-size .38s var(--ease-signature), opacity .3s ease, content-visibility .38s allow-discrete;
  }
  .faq details[open]::details-content { block-size: auto; opacity: 1; }
}

/* ---------- grain organique : hero + section sombre (opacité ≤ 0.05, soft-light) ---------- */
.hero::after, .constat::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  opacity: 0.045; mix-blend-mode: soft-light;
}
.constat { position: relative; }
.constat > .wrap { position: relative; z-index: 1; }
.hero .wrap { position: relative; z-index: 1; }
/* mobile : le hero est déjà animé en continu (collines scroll-driven) — le blend grain
   y est coupé pour préserver les 60 fps bas de gamme (revue adverse 12/07) ;
   le grain du constat reste (section statique, coût faible) */
@media (max-width: 980px) { .hero::after { content: none; } }

/* ---------- barre CTA mobile : thumb zone (cachée desktop) ---------- */
.ctabar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 58;
  display: none; padding: 0.65rem var(--pad) calc(0.65rem + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(245, 244, 236, 0.75) 0%, rgba(245, 244, 236, 0.95) 100%);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
  transform: translateY(110%); opacity: 0;
  transition: transform .34s var(--ease-signature), opacity .28s ease;
}
.ctabar.is-shown { transform: none; opacity: 1; }
.ctabar__btn { width: 100%; min-height: 50px; font-size: 1rem; }
@media (max-width: 760px) {
  .ctabar { display: block; }
  /* la pastille iris remonte au-dessus de la barre quand elle est visible */
  body:has(.ctabar.is-shown) .irisbot { bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px)); }
  /* respiration basse : le contenu ne finit jamais sous la barre */
  .footer { padding-bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- mobile : rythme + finitions (audit 12/07) ---------- */
@media (max-width: 760px) {
  /* gaps de grilles resserrés (12-20px mobile, codes 2025) */
  .cards3, .cards4, .steps { gap: 0.9rem; }
  .bento { gap: 0.9rem; }
  /* respiration entre h2 et contenu maintenue, sections légèrement resserrées */
  .section { padding: clamp(3.8rem, 14vw, 5.5rem) 0; }
  #reponse, #contenus, #boucle { padding-block: clamp(2.8rem, 10vw, 4rem); }
  /* la clôture citation respire moins large sur petit écran */
  .constat__close { font-size: 1.22rem; }
  /* cartes : padding équilibré petit écran */
  .card, .step { padding: 1.5rem 1.35rem; }
  /* le lead ne colle jamais au CTA */
  .lead { margin-bottom: 1.8rem; }
}
@media (max-width: 520px) {
  /* titre hero : interligne légèrement plus aéré en 2 lignes courtes */
  .hero__title { font-size: clamp(2.15rem, 9.5vw, 2.5rem); line-height: 1.08; }
  .hero__sub { font-size: 1.04rem; }
  /* tap targets ≥ 44px partout */
  .nav__logo { padding: 0.4rem 0.2rem; margin: -0.4rem -0.2rem; }
  .footer__links a { padding: 0.6rem 0.2rem; }
  .contact__alt .btn { width: 100%; }
}

/* reduced motion : couvert par le bloc générique existant (l.716, * !important
   sur animation/transition) — bloc local redondant retiré (revue adverse 12/07) */

/* ---------- itération 2 (22h50) : détails « cher » supplémentaires ---------- */
/* marquee : fondu latéral (les mots naissent et meurent en douceur, jamais coupés net) */
.marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
/* nav mobile : on garde DEUX ancres utiles (L'offre + FAQ) au lieu de tout cacher —
   les meilleurs sites mobiles gardent une nav minimale, le CTA vit dans la barre basse */
@media (max-width: 980px) {
  .nav__links { display: flex; gap: 1.1rem; }
  .nav__links a { display: none; }
  .nav__links a[href="#offre"], .nav__links a[href="#faq"] {
    display: inline-block; font-size: 0.88rem; padding: 0.5rem 0.1rem;
  }
}

/* ---------- itération 3 (22h52) : vitesse perçue mobile + premier écran hero ---------- */
/* mobile : distances courtes = durées courtes (règle « vitesse constante », codes 2025).
   Le flou signature reste, mais la révélation est ~35 % plus vive qu'au desktop */
@media (max-width: 760px) {
  html.js .reveal { transform: translateY(12px); }
  .reveal { transition-duration: .55s, .55s, .55s; }
  .focus-line { transition-duration: .7s, .7s, .7s; }
}
/* hero mobile : l'eyebrow 3 lignes mangeait le premier écran — plus compact, 2 lignes max */
@media (max-width: 520px) {
  .hero .eyebrow { font-size: 0.68rem; letter-spacing: 0.16em; margin-bottom: 0.9rem; }
  .hero__sub { margin-bottom: 0.9rem; }
  .hero__audience { margin-bottom: 1rem; min-height: 0; }
  .hero { padding-top: 1.6rem; }
}

/* =========================================================
   CASCADE TIER 0 (13/07/2026) — retours Romain « Last site my3o »
   ========================================================= */

/* ---------- aperçu app : micro central vert, organique (spec Romain 13/07) ---------- */
.minidash--app { align-items: center; justify-content: space-between; gap: 0.9rem; }
.minidash__stat--right { text-align: right; align-items: flex-end; }
.minidash__stat--right span { max-width: 12ch; }
.micbtn {
  position: relative; flex: none; width: 72px; height: 72px; border-radius: 50%;
  border: 0; padding: 0; cursor: default; pointer-events: none; overflow: hidden;
  color: #fff; isolation: isolate;
  background:
    radial-gradient(circle at 36% 30%, #8FCB6C 0%, #5BA642 46%, #3D5128 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.35),
    inset 0 -10px 18px rgba(28, 39, 18, 0.35),
    0 14px 30px -12px rgba(61, 81, 40, 0.65),
    0 0 0 6px rgba(91, 166, 66, 0.14);
  animation: micBreathe 4.8s var(--ease-signature) infinite;
}
/* grain organique du bouton : même bruit fractal que le hero, en overlay doux */
.micbtn__grain {
  position: absolute; inset: -20%; z-index: 1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 120px 120px;
  opacity: 0.22; mix-blend-mode: soft-light;
  animation: micGrain 9s linear infinite;
}
/* reflet type pupille (écho de l'iris signature) */
.micbtn::after {
  content: ""; position: absolute; left: 20%; top: 14%; width: 18%; height: 18%;
  border-radius: 50%; background: #fff; opacity: 0.55; filter: blur(1px); z-index: 2;
}
.micbtn__icon { position: relative; z-index: 2; width: 30px; height: 30px; margin: auto; }
@keyframes micBreathe {
  0%, 100% { transform: scale(1); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35), inset 0 -10px 18px rgba(28,39,18,0.35), 0 14px 30px -12px rgba(61,81,40,0.65), 0 0 0 5px rgba(91,166,66,0.12); }
  50% { transform: scale(1.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.45), inset 0 -10px 18px rgba(28,39,18,0.3), 0 16px 34px -12px rgba(61,81,40,0.7), 0 0 0 11px rgba(91,166,66,0.07); }
}
@keyframes micGrain {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-3%, 2%); }
  50% { transform: translate(2%, -3%); }
  75% { transform: translate(-2%, -2%); }
  100% { transform: translate(0, 0); }
}
.minidash__label {
  display: block; margin-top: 0.7rem;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft); opacity: 0.65;
}

/* ---------- statut « ouverture encadrée » ---------- */
.pill--statut {
  display: inline-flex; align-items: center;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em;
  padding: 0.22rem 0.65rem; border-radius: 999px;
  background: var(--green-mist); color: var(--green-deep);
  border: 1px solid rgba(91, 166, 66, 0.35);
}
.ext-statut { font-style: italic; color: var(--green-deep); font-weight: 600; }
/* canon de clôture de la boucle (liste d'attente) */
.boucle__statut {
  max-width: 780px; margin: 0 0 1.6rem;
  font-family: var(--serif); font-style: italic;
  font-size: 1.12rem; line-height: 1.6; color: var(--navy);
}
.boucle__statut a { color: var(--green-deep); border-bottom: 2px solid rgba(91, 166, 66, 0.5); transition: border-color .2s ease; }
.boucle__statut a:hover { border-color: var(--green-deep); }

/* ---------- photos réelles du Qui (13/07) ---------- */
.qui__photo--real {
  aspect-ratio: auto; background: none; border: 0;
  display: block; padding-bottom: 3.2rem;
}
.qui__img { border-radius: var(--radius-lg); height: auto; }
.qui__img--main {
  width: 100%; box-shadow: 0 30px 64px -30px rgba(46, 61, 30, 0.55);
  border: 1px solid rgba(91, 166, 66, 0.2);
}
.qui__img--second {
  position: absolute; right: -1.2rem; bottom: 0; width: 46%;
  border-radius: 18px; transform: rotate(3deg);
  border: 4px solid var(--cream);
  box-shadow: 0 22px 44px -22px rgba(7, 21, 54, 0.5);
}
.qui__photo--real { position: sticky; }
@media (max-width: 980px) {
  /* relative (pas static) : la photo secondaire absolue doit rester ancrée à SON cadre */
  .qui__photo--real { position: relative; top: 0; }
  .qui__img--second { right: -0.4rem; }
}

/* ---------- formulaire : note patient ---------- */
.form__note { margin: -0.5rem 0 0; font-size: 0.78rem; font-weight: 600; color: var(--ink-soft); }
.form__note::before { content: "→ "; color: var(--green-deep); }

/* ===================== ASSISTANT MY3O (widget « Une question ? », câblé 19/07/2026) ===================== */
.assistant {
  position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 60;
  width: min(380px, calc(100vw - 2rem));
  height: min(560px, calc(100dvh - 2rem));
  display: flex; flex-direction: column;
  background: rgba(253, 253, 251, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 70px -24px rgba(11, 31, 78, 0.55);
  overflow: hidden;
}
.assistant[hidden] { display: none; }
.assistant__head { display: flex; align-items: center; gap: 0.7rem; padding: 0.9rem 1rem; border-bottom: 1px solid var(--line); flex: none; }
.assistant__head .iris { --iris-size: 38px; width: 38px; flex: none; }
.assistant__id { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.assistant__id strong { font-size: 0.95rem; color: var(--navy); }
.assistant__id span { font-size: 0.72rem; color: var(--ink-soft); }
.assistant__close { border: 0; background: none; cursor: pointer; margin-left: auto; font-size: 1.5rem; line-height: 1; color: var(--ink-soft); padding: 0.15rem 0.45rem; border-radius: 8px; }
.assistant__close:hover { color: var(--navy); }
.assistant__log { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.6rem; }
.assistant__msg { max-width: 85%; padding: 0.6rem 0.85rem; border-radius: 14px; font-size: 0.9rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: break-word; }
.assistant__msg--bot { background: var(--green-soft); color: var(--ink); border-bottom-left-radius: 4px; align-self: flex-start; }
.assistant__msg--user { background: var(--navy); color: var(--white); border-bottom-right-radius: 4px; align-self: flex-end; }
.assistant__msg--wait span { display: inline-block; width: 6px; height: 6px; margin-right: 3px; border-radius: 50%; background: var(--green-deep); opacity: 0.4; animation: assistant-dot 1.2s infinite; }
.assistant__msg--wait span:nth-child(2) { animation-delay: 0.2s; }
.assistant__msg--wait span:nth-child(3) { animation-delay: 0.4s; }
@keyframes assistant-dot { 0%, 60%, 100% { opacity: 0.35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.assistant__chips { display: flex; flex-wrap: wrap; gap: 0.45rem; padding: 0 1rem 0.6rem; flex: none; }
.assistant__chips[hidden] { display: none; }
.assistant__chips button { border: 1px solid var(--line); background: var(--white); color: var(--green-deep); font-family: var(--sans); font-size: 0.8rem; font-weight: 600; padding: 0.4rem 0.75rem; border-radius: 999px; cursor: pointer; transition: border-color .2s ease; }
.assistant__chips button:hover { border-color: var(--green); }
.assistant__bar { display: flex; gap: 0.5rem; padding: 0.7rem 1rem 0.4rem; border-top: 1px solid var(--line); flex: none; }
.assistant__bar input { flex: 1; border: 1px solid var(--line); border-radius: 999px; padding: 0.55rem 1rem; font-family: var(--sans); font-size: 0.9rem; background: var(--white); color: var(--ink); min-width: 0; }
/* iOS zoome sur tout champ < 16px au focus : 16px obligatoire sur écran tactile (22/07) */
@media (pointer: coarse) { .assistant__bar input { font-size: 16px; } }
.assistant__send { border: 0; cursor: pointer; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--grad-cta); color: var(--white); font-size: 1.05rem; transition: transform .2s var(--ease-signature); }
.assistant__send:hover:not(:disabled) { transform: translateY(-2px); }
.assistant__send:disabled { opacity: 0.5; cursor: default; }
.assistant__foot { padding: 0.3rem 1rem 0.8rem; font-size: 0.7rem; color: var(--ink-soft); display: flex; flex-direction: column; gap: 0.1rem; flex: none; }
.assistant__foot nav a { color: var(--green-deep); font-weight: 600; }
.assistant__foot nav a:hover { text-decoration: underline; }
html.assistant-open .irisbot { opacity: 0; pointer-events: none; }
@media (max-width: 640px) {
  .assistant { right: 0.5rem; left: 0.5rem; bottom: 0.5rem; width: auto; height: min(78dvh, 560px); }
}

/* verrou rendu : palette conçue en clair, jamais inversée par un dark mode forcé */
:root { color-scheme: light only; }