/* ==================================================================
   hexagone.expert
   Première partie : la feuille de la page Trustee, recopiée telle quelle
   par sources/assembler_css.py. Ne pas la modifier ici.
   Seconde partie : « Propre à Hexagone », depuis sources/css/propre.css.
   ================================================================== */

/* ------------------------------------------------------------------
   Trustee — landing
   Direction : blanc, Inter serré, boutons noirs en pilule, écrans du
   produit posés sur des toiles impressionnistes. Une seule ambiance,
   claire — pas de thème sombre, la page tient sur n'importe quel fond.
   ------------------------------------------------------------------ */

:root {
  --ink: #111111;
  --ink-2: #3d3d3d;
  --muted: #6b6b6b;
  --faint: #8a8a8a;
  --line: #e7e6e2;
  --line-strong: #d6d5d0;
  --paper: #ffffff;
  --tint: #f6f6f4;
  --tint-2: #efefec;
  --brand: #705ff1;
  --brand-pink: #e670c2;
  --ok: #1f9d6c;

  --radius-xl: 28px;
  --radius-l: 18px;
  --radius-m: 12px;
  --radius-pill: 999px;

  --shadow-window: 0 30px 80px -20px rgba(0, 0, 0, .35), 0 12px 30px -12px rgba(0, 0, 0, .25);
  --shadow-card: 0 20px 50px -20px rgba(0, 0, 0, .3), 0 6px 18px -8px rgba(0, 0, 0, .18);

  --container: 1180px;
  --font: 'Inter Hexagone', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

.container { width: min(100% - 40px, var(--container)); margin-inline: auto; }
@media (max-width: 640px) { .container { width: min(100% - 32px, var(--container)); } }

/* ------------------------------ Typo ------------------------------ */

.hero__title {
  font-size: clamp(40px, 5.6vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 500;
  max-width: 22ch;
}

.h2 {
  font-size: clamp(32px, 4.2vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 500;
  text-wrap: balance;
}

.lede {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.5;
  color: var(--muted);
  max-width: 52ch;
  text-wrap: pretty;
}

.hero__lede { max-width: 56ch; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--muted);
}

.eyebrow--onDark { color: rgba(255, 255, 255, .6); }

/* ------------------------------ Boutons ------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 50px;
  padding: 0 22px;
  border-radius: var(--radius-m);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
  border: 1px solid transparent;
}
.btn:active { transform: translateY(1px); }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #2a2a2a; }
.btn--light { background: var(--tint); color: var(--ink); border-color: var(--line); }
.btn--light:hover { background: var(--tint-2); }
.btn--sm { height: 40px; padding: 0 16px; font-size: 14px; border-radius: 10px; }
.btn--block { width: 100%; }
.btn__arrow { transition: transform .15s ease; }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* ------------------------------ Nav ------------------------------ */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.nav.is-scrolled { border-bottom-color: var(--line); }
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px; gap: 24px;
}
.nav__brand img { height: 30px; width: auto; }
.nav__links { display: flex; gap: 28px; font-size: 15px; color: var(--ink-2); }
.nav__links a { padding: 8px 0; transition: color .15s; }
.nav__links a:hover { color: var(--ink); }
.nav__actions { display: flex; align-items: center; gap: 18px; }
.nav__login { font-size: 15px; color: var(--ink-2); }
.nav__login:hover { color: var(--ink); }
@media (max-width: 860px) {
  .nav__links, .nav__login { display: none; }
}

/* ------------------------------ Hero ------------------------------ */

.hero { padding: 72px 0 0; }
.hero .eyebrow { margin-bottom: 22px; }
.hero__lede { margin-top: 24px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero__actions--center { justify-content: center; }

/* Cadre peint : la toile derrière, la fenêtre du produit devant. */
.frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: #6f7f96;
  isolation: isolate;
}
.frame__art {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
  z-index: 0;
  transform: scale(1.02);
}
.frame--hero {
  margin-top: 64px;
  height: clamp(320px, 54vw, 700px);
}
.frame__window {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 86%;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
  box-shadow: var(--shadow-window);
  background: #fff;
  z-index: 1;
}
.frame__window--hero { top: 72px; }
.frame__window img { width: 100%; }

/* ------------------------------ Faits ------------------------------ */

.facts { padding: 56px 0 24px; }
.facts__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 28px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.fact { display: flex; flex-direction: column; gap: 4px; padding-right: 20px; }
.fact + .fact { border-left: 1px solid var(--line); padding-left: 24px; }
.fact__num {
  font-size: 30px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.fact__label { font-size: 14px; color: var(--muted); max-width: 22ch; text-wrap: pretty; }
@media (max-width: 860px) {
  .facts__grid { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .fact + .fact { border-left: 0; padding-left: 0; }
  .fact:nth-child(even) { border-left: 1px solid var(--line); padding-left: 24px; }
}

/* ------------------------------ Sections ------------------------------ */

.section { padding: 112px 0; }
.section--tint { background: var(--tint); }
@media (max-width: 720px) { .section { padding: 72px 0; } }

.section__head {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: end;
  margin-bottom: 44px;
}
@media (max-width: 860px) { .section__head { grid-template-columns: 1fr; gap: 16px; } }

/* Lecture des pièces */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: start; }
.split__lead .lede { margin-top: 20px; }
.points { display: flex; flex-direction: column; gap: 30px; padding-top: 6px; }
.point { display: grid; grid-template-columns: 36px 1fr; gap: 16px; }
.point__icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
}
.point__icon svg { width: 20px; height: 20px; }
.point h3 { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 4px; }
.point p { font-size: 15px; color: var(--muted); max-width: 44ch; text-wrap: pretty; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 36px; } }

/* Cadre de la section lecture : même composition que le hero. */
.frame--feature {
  margin-top: 56px;
  height: clamp(340px, 50vw, 640px);
}
.frame--feature .frame__art { object-position: 50% 45%; }

/* Fonctionnement : quatre étapes en ligne, puis l'écran du CRG en scène. */
.steps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
  margin-top: 8px; padding-top: 28px; border-top: 1px solid var(--line);
}
.steps li { display: flex; flex-direction: column; gap: 8px; }
.steps__num {
  font-size: 13px; font-weight: 500; color: var(--faint);
  font-variant-numeric: tabular-nums; margin-bottom: 6px;
}
.steps h3 { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
.steps p { font-size: 15px; color: var(--muted); text-wrap: pretty; }
@media (max-width: 960px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.frame--steps {
  margin-top: 56px;
  height: clamp(320px, 54vw, 700px);
}
.frame--steps .frame__art { object-position: 50% 30%; }

/* Onglets : une barre, un écran complet. */
.tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  padding: 4px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-bottom: 22px;
}
.tab {
  flex: 1 1 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 46px; padding: 0 18px;
  border: 0; border-radius: 10px;
  background: transparent; color: var(--muted);
  font-size: 15px; font-weight: 500; cursor: pointer;
  transition: background-color .15s, color .15s;
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { background: var(--ink); color: #fff; }
.tab__num { font-size: 12px; font-variant-numeric: tabular-nums; opacity: .6; }
.tab[aria-selected="true"] .tab__num { opacity: .7; }
/* Sur mobile, pas de sélecteur : les onglets se lisent à la suite, chacun
   avec son écran. */
@media (max-width: 720px) {
  .showcase { gap: 44px; }
  .showcase__panel { animation: none; }
  .showcase__text { margin-bottom: 14px; min-height: 0; }
}
.showcase__text {
  font-size: 16px; color: var(--muted); max-width: 70ch; text-wrap: pretty;
  margin-bottom: 22px; min-height: 1.5em;
}
.showcase__text strong { color: var(--ink); font-weight: 500; }
/* Les onglets se lisent à la suite, chacun avec son écran : rien à cliquer. */
.showcase { display: flex; flex-direction: column; gap: 64px; }
.showcase__panel { animation: showcase-in .35s ease both; }
@keyframes showcase-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .showcase__panel { animation: none; } }
.frame--tab {
  height: clamp(300px, 50vw, 620px);
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(230, 112, 194, .30), transparent 70%),
    radial-gradient(60% 55% at 0% 100%, rgba(49, 215, 201, .22), transparent 70%),
    linear-gradient(160deg, #e9e5ff 0%, #f1ecff 55%, #fbe9f5 100%);
}
.frame__window--tab { top: 56px; width: 88%; }

/* Sécurité (panneau sombre) */
.dark {
  background: #141414;
  color: #fff;
  border-radius: var(--radius-xl);
  padding: clamp(36px, 5vw, 72px);
  background-image:
    radial-gradient(60% 50% at 85% 0%, rgba(112, 95, 241, .22), transparent 70%),
    radial-gradient(40% 40% at 10% 100%, rgba(230, 112, 194, .10), transparent 70%);
}
.dark__head { max-width: 880px; margin-bottom: 48px; }
.dark__head .eyebrow { margin-bottom: 18px; }
.h2--onDark { color: #fff; }
.lede--onDark { color: rgba(255, 255, 255, .62); margin-top: 18px; }
.dark__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.dark__grid li {
  padding: 26px 28px 30px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.dark__grid li:nth-child(3n + 2), .dark__grid li:nth-child(3n) { padding-left: 28px; border-left: 1px solid rgba(255, 255, 255, .12); }
.dark__grid h3 { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 8px; }
.dark__grid p { font-size: 15px; color: rgba(255, 255, 255, .62); text-wrap: pretty; }
@media (max-width: 860px) {
  .dark__grid { grid-template-columns: 1fr; }
  .dark__grid li, .dark__grid li:nth-child(3n + 2), .dark__grid li:nth-child(3n) { padding-left: 0; border-left: 0; }
}

/* Tarifs */
.pricing__head {
  display: flex; align-items: end; justify-content: space-between; gap: 32px; flex-wrap: wrap;
  margin-bottom: 40px;
}
.toggle {
  display: inline-flex; padding: 4px; gap: 2px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-pill);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.toggle__btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 18px; border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--muted); font-size: 15px; font-weight: 500; cursor: pointer;
  transition: background-color .15s, color .15s;
}
.toggle__btn.is-active { background: var(--tint-2); color: var(--ink); }
.toggle__badge {
  font-size: 12px; padding: 2px 8px; border-radius: var(--radius-pill);
  border: 1px dashed var(--line-strong); color: var(--muted);
}
.toggle__btn.is-active .toggle__badge { color: var(--ink); border-color: var(--ink); }

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
.plan {
  background: var(--tint-2);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 6px;
  display: flex; flex-direction: column;
}
.plan__top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px 12px;
}
.plan__top h3 { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
.plan__tag {
  font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: var(--radius-pill);
  background: #fff; color: var(--ink);
}
.plan__body {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 20px;
  display: flex; flex-direction: column; gap: 18px;
}
.plan__for { font-size: 15px; color: var(--muted); min-height: 2.9em; text-wrap: pretty; }
.plan__price {
  font-size: 44px; font-weight: 500; letter-spacing: -0.035em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.plan__unit { font-size: 20px; letter-spacing: -0.01em; }
.plan__unit small { font-size: 15px; color: var(--muted); font-weight: 400; margin-left: 2px; }
.plan__price--text { font-size: 34px; letter-spacing: -0.03em; padding: 5px 0; }
.plan__list { padding: 22px 20px 18px; display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; color: var(--ink-2); }
.plan__list li { display: flex; gap: 10px; align-items: baseline; }
.plan__list li::before { content: '✓'; font-size: 12px; color: var(--muted); flex: none; }

.plan--featured { background: var(--ink); border-color: var(--ink); color: #fff; }
.plan--featured .plan__top h3 { color: #fff; }
.plan--featured .plan__body { border-color: #fff; }
.plan--featured .plan__body, .plan--featured .plan__body .plan__price { color: var(--ink); }
.plan--featured .plan__list { color: rgba(255, 255, 255, .85); }
.plan--featured .plan__list li::before { color: rgba(255, 255, 255, .6); }

.pricing__lede { margin-top: 18px; }

/* Curseur du nombre de mesures : un trait, un point noir. */
.slider { display: flex; flex-direction: column; gap: 8px; }
.slider__label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; color: var(--muted); }
.slider__label strong { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.slider__label span:last-child { font-variant-numeric: tabular-nums; }
.slider__input {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 22px; margin: 0; background: transparent; cursor: pointer;
}
.slider__input::-webkit-slider-runnable-track { height: 2px; background: var(--line-strong); border-radius: 2px; }
.slider__input::-moz-range-track { height: 2px; background: var(--line-strong); border-radius: 2px; }
.slider__input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; margin-top: -8px; border-radius: 50%;
  background: var(--ink); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--line-strong), 0 2px 6px rgba(0, 0, 0, .18);
}
.slider__input::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--ink); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--line-strong), 0 2px 6px rgba(0, 0, 0, .18);
}
.slider__input:focus-visible { outline: none; }
.slider__input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--ink); }
.slider__bounds { display: flex; justify-content: space-between; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }

/* Estimateur : le profil, le nombre de mesures, le prix. */
.estim {
  display: grid; grid-template-columns: 1.35fr 1fr; gap: 6px;
  background: var(--tint-2); border: 1px solid var(--line); border-radius: 22px; padding: 6px;
}
.estim__form { padding: 26px 26px 24px; display: flex; flex-direction: column; gap: 14px; }
.estim__label { font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: .01em; }
.toggle--wrap { flex-wrap: wrap; background: transparent; border: 0; box-shadow: none; padding: 0; gap: 6px; }
.toggle--wrap .toggle__btn { background: var(--paper); border: 1px solid var(--line); height: 38px; padding: 0 14px; font-size: 14px; }
.toggle--wrap .toggle__btn.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.estim__slider { margin-top: 10px; }
.estim__slider .slider__input:disabled { opacity: .35; cursor: default; }
.estim__result {
  background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
  padding: 26px; display: flex; flex-direction: column; gap: 12px; justify-content: center;
}
.estim__eyebrow { font-size: 13px; color: var(--muted); }
.estim__price { font-size: 56px; font-weight: 500; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.estim__for { font-size: 15px; color: var(--muted); text-wrap: pretty; }
.estim__result .btn { align-self: flex-start; margin-top: 8px; }
@media (max-width: 860px) { .estim { grid-template-columns: 1fr; } }

.inclus {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 28px;
  margin-top: 28px; font-size: 14.5px; color: var(--ink-2);
}
.inclus li { display: flex; gap: 10px; align-items: baseline; }
.inclus li::before { content: '✓'; font-size: 12px; color: var(--muted); flex: none; }
@media (max-width: 860px) { .inclus { grid-template-columns: 1fr; } }

/* Conditions : trois phrases, pas trois cartes. */
.offers {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 32px;
  margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line);
  font-size: 15px; color: var(--muted); text-wrap: pretty;
}
.offers strong { color: var(--ink); font-weight: 500; }
@media (max-width: 860px) { .offers { grid-template-columns: 1fr; gap: 14px; } }

.pricing__note { margin-top: 22px; font-size: 13.5px; color: var(--faint); max-width: 72ch; text-wrap: pretty; }
@media (max-width: 960px) { .plans { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }

/* FAQ */
.faq { display: grid; grid-template-columns: 1fr 1.6fr; gap: 48px; }
.faq__list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 20px 40px 20px 0; position: relative;
  font-size: 17px; font-weight: 500; letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line);
  display: grid; place-items: center; font-weight: 400; color: var(--muted);
  transition: transform .2s;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 0 22px; color: var(--muted); font-size: 15.5px; max-width: 62ch; text-wrap: pretty; }
@media (max-width: 860px) { .faq { grid-template-columns: 1fr; gap: 24px; } }

/* CTA */
.cta { padding-top: 40px; }
.cta__inner {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px;
  padding: 72px 24px;
  border-top: 1px solid var(--line);
}
.cta__inner .lede { margin-inline: auto; }
.cta__inner .hero__actions { margin-top: 14px; }

/* Orbe */
.orb { display: inline-block; flex: none; border-radius: 50%; }
.orb--xs { width: 18px; height: 18px; }
.orb--md { width: 44px; height: 44px; }
.orb--lg { width: 96px; height: 96px; margin-bottom: 10px; }
.orb canvas { display: block; }

/* Footer */
.footer { border-top: 1px solid var(--line); padding: 40px 0 44px; }
.footer__inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px 40px; align-items: start; }
.footer__brand img { height: 26px; width: auto; margin-bottom: 12px; }
.footer__brand p { font-size: 14px; color: var(--muted); max-width: 36ch; }
.footer__links { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; color: var(--ink-2); justify-self: end; }
.footer__links a:hover { color: var(--ink); }
.footer__legal { grid-column: 1 / -1; font-size: 13px; color: var(--faint); padding-top: 20px; border-top: 1px solid var(--line); }
@media (max-width: 720px) {
  .footer__inner { grid-template-columns: 1fr; }
  .footer__links { justify-self: start; }
}

/* ------------------------------ Mobile ------------------------------
   En fin de fichier : ces règles doivent passer après celles des cadres
   (.frame--feature, .frame--steps, .frame--tab), écrites plus haut. */
@media (max-width: 720px) {
  .hero { padding-top: 48px; }
  .frame { border-radius: 20px; }
  .frame--hero, .frame--feature, .frame--steps, .frame--tab {
    height: auto; aspect-ratio: 4 / 3; margin-top: 36px;
  }
  /* Sur un petit écran, la fenêtre est agrandie et ancrée à gauche : on voit
     la barre latérale et le début du contenu, lisibles, plutôt qu'un écran
     entier réduit à la taille d'un timbre. */
  .frame__window, .frame__window--hero, .frame__window--tab {
    left: 6%; transform: none; width: 150%; top: 28px;
    border-radius: 10px 0 0 0;
  }
  /* Le hero est carré : plus de hauteur pour que la boucle du dépôt soit
     visible en entier. La fenêtre garde le même cadrage que les autres. */
  .frame--hero { aspect-ratio: 1 / 1; }
  /* Sur mobile, le fichier arrive par le haut : la droite de la fenêtre est
     hors cadre, il n'y serait pas visible. */
  .demo__fichier { animation-name: demo-fichier-haut; }
}
@keyframes demo-fichier-haut {
  0% { opacity: 0; transform: translate(-4cqw, -34cqw) rotate(-6deg) scale(1.02); }
  3% { opacity: 1; }
  12.5% { opacity: 1; transform: translate(0, 0) rotate(-3deg) scale(1); }
  14% { opacity: 0; transform: translate(0, .6cqw) rotate(-3deg) scale(.92); }
  100% { opacity: 0; transform: translate(0, .6cqw) rotate(-3deg) scale(.92); }
}

/* ------------------------------ Propre à Hexagone ------------------------------
   Tout ce qui suit s'ajoute à la feuille de Trustee, recopiée plus haut sans
   retouche. Un écart à une règle de Trustee s'écrit ici, jamais là-haut.
   Source : sources/css/propre.css, assemblé par sources/assembler_css.py. */

/* Les ancres passent sous la barre collante (72px). */
[id] { scroll-margin-top: 84px; }

/* La marque : l'icône et le nom en texte. Trustee pose une image du nom. */
.marque {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 19px; font-weight: 600; letter-spacing: -0.03em; color: var(--ink);
}
.marque img, .nav__brand.marque img, .footer__brand .marque img {
  width: 30px; height: 30px; margin: 0; border-radius: 8px;
}

/* Un lien sobre, à la place d'un bouton, dans le corps des sections. */
.lien {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 500; color: var(--ink);
}
.lien:hover { text-decoration: underline; text-underline-offset: 4px; }
.lien:hover .btn__arrow { transform: translateX(3px); }
.split__lead .lien, .rangee__texte .lien, .fondateur__texte .lien { margin-top: 26px; }

/* Écrans entiers : chez Trustee, la fenêtre sort du cadre par le bas et ses
   coins inférieurs sont coupés droit. Ici, l'écran tient en entier dans la
   toile, marge tout autour, quatre coins arrondis. Le cadre prend la hauteur
   de l'écran. Même écart que les études de cas de hexaflow.fr. */
.frame--hero { height: auto; }
.frame .frame__window {
  position: relative; top: auto; left: auto; transform: none;
  width: 86%; margin: 64px auto; border-radius: 14px;
}
@media (max-width: 720px) {
  .frame--hero { height: auto; aspect-ratio: auto; }
  .frame .frame__window { width: 90%; margin: 24px auto; border-radius: 10px; }
}

/* Écran sans fond (logement) : téléphone et fenêtre posés sur la toile. */
.frame__window--nu {
  background: none; box-shadow: none; overflow: visible;
  filter: drop-shadow(0 24px 36px rgba(0, 0, 0, .35));
}
.frame .frame__window--nu { width: 88%; margin: 56px auto; border-radius: 0; }
@media (max-width: 720px) { .frame .frame__window--nu { width: 94%; margin: 20px auto; } }

/* Pourquoi hexagone : dix mots-clés, la liste « compris » de Trustee. */
.inclus--mots { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); }

/* Nos points forts : six blocs, la grille du panneau sombre de Trustee
   (.dark__grid), en clair. */
.atouts { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.atouts li { padding: 28px 28px 32px 0; border-bottom: 1px solid var(--line); }
.atouts li:nth-child(3n + 2), .atouts li:nth-child(3n) { padding-left: 28px; border-left: 1px solid var(--line); }
.atouts .point__icon { margin-bottom: 18px; }
.atouts h3 { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 6px; }
.atouts p { font-size: 15px; color: var(--muted); text-wrap: pretty; }
@media (max-width: 860px) {
  .atouts { grid-template-columns: 1fr; }
  .atouts li, .atouts li:nth-child(3n + 2), .atouts li:nth-child(3n) { padding-left: 0; border-left: 0; }
}

/* Notre approche : les étapes de Trustee, trois points sous chaque titre. */
.coches { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; font-size: 15px; color: var(--muted); }
.coches li { display: flex; gap: 10px; align-items: baseline; text-wrap: pretty; }
.coches li::before { content: '✓'; font-size: 12px; color: var(--faint); flex: none; }

/* Le fondateur en vidéo, sur une toile. */
.fondateur { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.fondateur__texte .lede { margin-top: 18px; }
.frame--video { display: flex; justify-content: center; padding: 56px 0; }
.frame--video .video { z-index: 1; width: min(300px, 62%); box-shadow: var(--shadow-window); }
@media (max-width: 860px) {
  .fondateur { grid-template-columns: 1fr; gap: 32px; }
  .frame--video { padding: 32px 0; }
}

/* Une vidéo Vimeo : la vignette, et le lecteur seulement au clic. Rien
   n'est demandé à Vimeo avant. */
.video {
  position: relative; display: block; width: 100%; aspect-ratio: 9 / 16;
  padding: 0; border: 0; border-radius: var(--radius-l); overflow: hidden;
  background: #111; cursor: pointer;
}
.video img { width: 100%; height: 100%; object-fit: cover; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__lecture {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .92); color: var(--ink); box-shadow: var(--shadow-card);
  transition: transform .15s ease;
}
.video:hover .video__lecture { transform: translate(-50%, -50%) scale(1.06); }
.video__lecture svg { width: 20px; height: 20px; margin-left: 3px; }
.videos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 960px; }
.videos figcaption { margin-top: 12px; font-size: 14px; color: var(--muted); }
@media (max-width: 720px) {
  .videos { grid-template-columns: 1fr; max-width: 300px; gap: 32px; }
}

/* Les trois bénéfices : texte et illustration, en alternance. */
.rangees { display: flex; flex-direction: column; gap: 96px; }
.rangee { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.rangee--inverse .rangee__texte { order: 2; }
.rangee__texte .lede { margin-top: 18px; }
.rangee__image { border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 4 / 3; background: #e6e6fb; }
.rangee__image img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  .rangees { gap: 56px; }
  .rangee { grid-template-columns: 1fr; gap: 28px; }
  .rangee--inverse .rangee__texte { order: 0; }
}

/* Comparaison : un tableau, les filets de Trustee. */
.comparatif { width: 100%; max-width: 880px; border-collapse: collapse; font-size: 15px; }
.comparatif th, .comparatif td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; }
.comparatif thead th { font-size: 13px; font-weight: 500; color: var(--muted); border-bottom-color: var(--line-strong); }
.comparatif th + th, .comparatif td + td { width: 22%; text-align: center; padding-right: 0; }
.comparatif thead img { display: inline-block; height: 26px; width: auto; vertical-align: middle; }
.comparatif thead img.comparatif__hexagone { width: 26px; border-radius: 7px; }
.coche { font-size: 16px; color: var(--ink); }
.coche--pale { color: var(--line-strong); }

/* Tarifs : les plans de Trustee. */
.plan__note { font-size: 13px; color: var(--muted); text-align: center; }
.plan__price small { font-size: 15px; color: var(--muted); font-weight: 400; letter-spacing: 0; }
.plan__par { display: block; margin-top: 8px; font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.besoin {
  display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap;
  margin-top: 18px; padding: 22px 26px;
  border: 1px solid var(--line); border-radius: 22px; background: var(--tint);
}
.besoin p { font-size: 15px; color: var(--muted); }
.besoin strong { display: block; font-size: 17px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }

/* Tarification simple : ce que compte chaque formule, par groupe. */
.grille { display: grid; gap: 36px; margin-top: 48px; }
.grille h3 { font-size: 13px; font-weight: 500; color: var(--muted); padding-bottom: 12px; border-bottom: 1px solid var(--line-strong); }
.grille ul { columns: 2; column-gap: 40px; }
.grille li {
  display: flex; gap: 10px; align-items: baseline; break-inside: avoid;
  padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--ink-2);
}
.grille li::before { content: '✓'; font-size: 12px; color: var(--muted); flex: none; }
@media (max-width: 720px) { .grille ul { columns: 1; } }

/* Avis : les cartes des témoignages, en colonnes. */
.avis { columns: 3; column-gap: 18px; }
.avis figure {
  break-inside: avoid; margin: 0 0 18px; padding: 24px;
  border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--paper);
}
.avis__etoiles { font-size: 13px; letter-spacing: 3px; color: var(--ink); margin-bottom: 12px; }
.avis blockquote { margin: 0; font-size: 15.5px; color: var(--ink-2); text-wrap: pretty; }
.avis figcaption { margin-top: 16px; font-size: 14px; font-weight: 500; }
.avis figcaption span { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: var(--muted); letter-spacing: .02em; }
@media (max-width: 960px) { .avis { columns: 2; } }
@media (max-width: 640px) { .avis { columns: 1; } }

/* Logos des entreprises et des partenaires : gris, à plat. */
.logos { margin-top: 64px; }
.logos__titre { font-size: 13px; font-weight: 500; color: var(--muted); margin-bottom: 22px; }
.logos ul { display: flex; flex-wrap: wrap; align-items: center; gap: 28px 44px; }
.logos img { height: 40px; width: auto; filter: grayscale(1); opacity: .7; mix-blend-mode: multiply; }
@media (max-width: 640px) { .logos ul { gap: 22px 30px; } .logos img { height: 32px; } }

/* L'équipe. */
.equipe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.equipe li { border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden; background: var(--paper); }
.equipe img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.equipe__corps { padding: 18px 20px 20px; }
.equipe h3 { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
.equipe p { margin-top: 4px; font-size: 14.5px; color: var(--muted); text-wrap: pretty; }
.equipe a {
  display: inline-block; margin-top: 12px; font-size: 14px; color: var(--ink-2);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong);
}
@media (max-width: 960px) { .equipe { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .equipe__corps { padding: 14px 14px 16px; } .equipe h3 { font-size: 15.5px; } .equipe p { font-size: 13.5px; } }

/* Dernier appel : celui de Trustee, l'icône à la place de l'orbe. */
.cta__logo { width: 56px; height: 56px; border-radius: 14px; margin-bottom: 6px; }

/* Pied de page : le crédit des toiles. */
.footer__legal { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.footer__legal a:hover { color: var(--ink); }
.footer__credit { margin-left: auto; }
@media (max-width: 720px) { .footer__credit { margin-left: 0; flex-basis: 100%; } }

/* ------------------------------ Pages de contenu ------------------------------
   Glossaire, blog, pages légales, 404 : le héros de Trustee sans écran. */
.hero--texte .eyebrow { margin-bottom: 18px; }
.hero--texte .eyebrow a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.hero--texte .eyebrow a:hover { color: var(--ink); }
.hero__title--article { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.08; max-width: 26ch; text-wrap: balance; }
.section--suite { padding: 64px 0; }
.section--suite + .section--suite { padding-top: 32px; }
@media (max-width: 720px) { .section--suite { padding: 44px 0; } }
.suite__tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 32px; }

/* La liste des termes : trois colonnes, un filet par ligne. */
.termes { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 32px; border-top: 1px solid var(--line); }
.termes li { border-bottom: 1px solid var(--line); }
.termes a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 16px 0; font-size: 15.5px; color: var(--ink-2); transition: color .15s;
}
.termes a::after { content: '→'; color: var(--faint); transition: transform .15s, color .15s; }
.termes a:hover { color: var(--ink); }
.termes a:hover::after { transform: translateX(3px); color: var(--ink); }
@media (max-width: 860px) { .termes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .termes { grid-template-columns: 1fr; } }

/* Le texte d'une définition ou d'un article, avec un encart à droite. */
.lecture { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; align-items: start; }
.encart { position: sticky; top: 96px; }
.encart__lien {
  display: flex; flex-direction: column; gap: 6px; padding: 8px 8px 20px;
  border: 1px solid var(--line); border-radius: 22px; background: var(--tint);
  transition: border-color .15s;
}
.encart__lien:hover { border-color: var(--line-strong); }
.encart__titre { padding: 12px 12px 0; font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
.encart__texte { padding: 0 12px; font-size: 14.5px; color: var(--muted); text-wrap: pretty; }
.encart .lien { padding: 8px 12px 0; }
.frame--encart { display: block; border-radius: 16px; }
.frame--encart .frame__window { display: block; width: 86%; margin: 22px auto; border-radius: 8px; }
.frame--encart .frame__window img { display: block; }
@media (max-width: 960px) {
  .lecture { grid-template-columns: 1fr; gap: 44px; }
  .encart { position: static; max-width: 420px; }
}

/* Le texte riche repris du Framer. */
.prose { max-width: 68ch; font-size: 17px; line-height: 1.65; color: var(--ink-2); text-wrap: pretty; }
.prose > * + * { margin-top: 16px; }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin-top: 44px; font-size: 26px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 500; color: var(--ink); text-wrap: balance; }
.prose h3 { margin-top: 32px; font-size: 19px; line-height: 1.3; letter-spacing: -0.01em; font-weight: 500; color: var(--ink); }
.prose > h2 + *, .prose > h3 + * { margin-top: 10px; }
.prose strong, .prose b { font-weight: 600; color: var(--ink); }
.prose ul, .prose ol { padding-left: 22px; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 6px; }
.prose li::marker { color: var(--faint); }
.prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.prose img { border-radius: var(--radius-m); }
.prose--large { max-width: 78ch; font-size: 16px; }
@media (max-width: 720px) { .prose { font-size: 16px; } .prose h2 { font-size: 22px; } }
.retour { margin-top: 48px; }

/* Le blog : une ligne par article. */
.articles { border-top: 1px solid var(--line); }
.articles li { border-bottom: 1px solid var(--line); }
.articles a { display: grid; grid-template-columns: 1fr auto; gap: 6px 32px; align-items: baseline; padding: 22px 0; }
.articles__titre { font-size: 19px; font-weight: 500; letter-spacing: -0.015em; text-wrap: pretty; }
.articles__meta { font-size: 14px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.articles a:hover .articles__titre { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
@media (max-width: 640px) { .articles a { grid-template-columns: 1fr; } .articles__titre { font-size: 17px; } }

.introuvable { padding-bottom: 112px; }

/* ------------------------------ /logement ------------------------------ */
.hero--centre { text-align: center; }
.hero--centre .hero__title, .hero--centre .hero__lede { margin-inline: auto; }
.hero--centre .hero__actions { justify-content: center; }
.logement__icone { width: 64px; height: 64px; margin: 0 auto 24px; border-radius: 16px; }
.hero__title--logement { font-weight: 400; }
.hero__title--logement b { font-weight: 600; }
.btn__icone { width: 18px; height: 18px; }
.footer--simple .footer__inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 24px; }
.footer--simple p, .footer--simple nav { font-size: 14px; color: var(--muted); }
.footer--simple nav { display: flex; gap: 24px; }
.footer--simple a:hover { color: var(--ink); }

/* ------------------------------ Consentement ------------------------------
   Bandeau de consentement à la mesure d'audience (assets/consentement.js),
   repris de hexaflow.fr. Deux boutons identiques : la CNIL veut qu'on
   refuse aussi facilement qu'on accepte. */
.consentement {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 100;
  width: min(420px, calc(100% - 40px));
  padding: 20px;
  border: 1px solid #e7e6e2;
  border-radius: 14px;
  background: #fff;
  color: #111;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .35), 0 6px 18px -8px rgba(0, 0, 0, .18);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
}
.consentement__texte { margin: 0; color: #3d3d3d; }
.consentement__texte a { color: #111; text-decoration: underline; text-underline-offset: 3px; }
.consentement__choix { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.consentement__bouton {
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: #111;
  color: #fff;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .15s ease;
}
.consentement__bouton:hover { background: #2a2a2a; }
@media (max-width: 560px) {
  .consentement { left: 16px; right: 16px; bottom: 16px; width: auto; }
}

/* FAQ : le chapô sous le titre, le lien de la dernière réponse. */
.faq__lede { margin-top: 18px; }
.faq details a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.hero--centre { padding-bottom: 96px; }
@media (max-width: 720px) { .hero--centre { padding-bottom: 56px; } }
.footer--simple .footer__legal { flex-basis: 100%; }

/* .steps li (Trustee) vise aussi les puces imbriquées : on les remet en ligne. */
.steps .coches li { flex-direction: row; gap: 10px; }
.video img { object-position: 50% 30%; }
/* Les numéros d'étapes (--faint) manquent de contraste sur le fond teinté. */
.section--tint .steps__num { color: var(--muted); }
/* Petits textes gris : --muted plutôt que --faint (contraste AA sur blanc). */
.footer__legal { color: var(--muted); }