/* ==================================================================
   Carvis — www.carvis.fr
   Généré par sources/assembler_css.py. Ne pas modifier ce fichier à la main.

   Jusqu'à « Propre à Carvis », les règles sont celles de la page Trustee,
   recopiées telles quelles (mêmes classes, mêmes valeurs). Les écarts sont
   tous en fin de fichier.
   ================================================================== */

/* ------------------------------------------------------------------
   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', 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 à Carvis
   Tout ce qui s'écarte de la feuille Trustee, ou s'y ajoute. Les blocs
   au-dessus ne se retouchent pas : on les surcharge ici.
   ================================================================== */

/* Police : Inter hébergée sur le site, sous un nom à part. Le widget iClosed
   (page /contact) charge son propre « Inter », qui prendrait le pas. */
:root { --font: 'Inter Carvis', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }

/* ------------------------------ Barre ------------------------------ */

.marque { display: inline-flex; align-items: center; gap: 9px; font-size: 21px; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); }
.marque svg { width: 24px; height: 28px; flex: none; }
.nav__links a[aria-current="page"] { color: var(--ink); }

/* Sous 860px, Trustee masque les liens sans les remplacer. Ici un menu
   déroulant, sans JavaScript. */
.menu { display: none; position: relative; }
.menu summary {
  list-style: none; cursor: pointer;
  height: 40px; padding: 0 14px; border-radius: 10px;
  display: inline-flex; align-items: center;
  border: 1px solid var(--line); font-size: 14px; font-weight: 500; background: var(--paper);
}
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { background: var(--tint); }
.menu__liste {
  position: absolute; right: 0; top: 48px; z-index: 60;
  min-width: 220px; padding: 8px;
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-card);
}
.menu__liste a { padding: 10px 12px; border-radius: 8px; font-size: 15px; color: var(--ink-2); }
.menu__liste a:hover { background: var(--tint); color: var(--ink); }
@media (max-width: 860px) {
  .menu { display: block; }
}
@media (max-width: 420px) {
  .nav__actions .btn--sm { display: none; }
}

/* ------------------------------ Cadres ------------------------------ */

/* Chez Trustee, la fenêtre de l'outil sort du cadre par le bas et ses coins
   inférieurs sont coupés droit. Ici chaque écran tient en entier dans sa
   toile, marge tout autour, quatre coins arrondis. Le cadre prend la hauteur
   de l'écran. */
.frame--hero, .frame--feature, .frame--steps, .frame--tab { height: auto; aspect-ratio: auto; }
.frame .frame__window, .frame .frame__window--hero, .frame .frame__window--tab {
  position: relative; top: auto; left: auto; transform: none;
  width: 86%; margin: 64px auto; border-radius: 14px;
}
.frame--tab .frame__window--tab { margin: 56px auto; width: 88%; }
@media (max-width: 720px) {
  .frame--hero, .frame--feature, .frame--steps, .frame--tab { height: auto; aspect-ratio: auto; }
  .frame .frame__window, .frame .frame__window--hero, .frame .frame__window--tab,
  .frame--tab .frame__window--tab {
    left: auto; transform: none; top: auto;
    width: 90%; margin: 24px auto; border-radius: 10px;
  }
}

/* Écrans de téléphone sur la toile, posés comme la fenêtre : même ombre,
   coins de téléphone, marge tout autour. */
.telephones {
  position: relative; z-index: 1;
  display: flex; justify-content: center; align-items: flex-start; gap: 3%;
  padding: 56px 0;
}
.telephones img {
  width: 22%; height: auto; border-radius: 28px;
  box-shadow: var(--shadow-window); background: #fff;
}
@media (max-width: 720px) {
  .telephones { padding: 24px 0; }
  .telephones img { width: 29%; border-radius: 14px; }
}

/* Une image seule posée sur la toile (maquette du site d'origine). */
.frame__carte {
  position: relative; z-index: 1;
  display: block; width: min(42%, 400px); margin: 56px auto;
  border-radius: 14px; box-shadow: var(--shadow-window);
}
@media (max-width: 720px) { .frame__carte { width: 80%; margin: 24px auto; border-radius: 10px; } }

.legende { margin-top: 14px; font-size: 14px; color: var(--muted); }
.legende b { color: var(--ink); font-weight: 500; }

/* ------------------------------ Blocs ------------------------------ */

/* Les étapes de Trustee, sur trois colonnes. */
.steps--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px) { .steps--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps--3 { grid-template-columns: 1fr; } }
.steps + .steps { margin-top: 36px; }
.frame + .steps { margin-top: 40px; }
.steps a.steps__lien { display: flex; flex-direction: column; gap: 8px; }
.steps a.steps__lien h3 { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.steps a.steps__lien:hover h3 { text-decoration-color: var(--ink); }

.section__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.section--serree { padding-top: 0; }
.eyebrow--tete { margin-bottom: 18px; }

/* Intégration ServiceBox : l'image du site d'origine, à côté du texte. */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.duo img { width: 100%; border-radius: var(--radius-xl); }
@media (max-width: 860px) { .duo { grid-template-columns: 1fr; gap: 32px; } }

/* Avant / avec Carvis : deux listes côte à côte, filets de Trustee. */
.comparatif { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.comparatif > div { border: 1px solid var(--line); border-radius: 22px; padding: 28px; }
.comparatif > div:last-child { background: var(--ink); color: #fff; border-color: var(--ink); }
.comparatif h3 { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 14px; }
.comparatif li { padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; color: var(--muted); }
.comparatif > div:last-child li { border-top-color: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .8); }
.comparatif li strong { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.comparatif > div:last-child li strong { color: #fff; }
@media (max-width: 720px) { .comparatif { grid-template-columns: 1fr; } }

/* Tarifs : une seule formule. */
.plans--seul { grid-template-columns: minmax(0, 440px); }
.plan__remise { font-size: 15px; color: var(--muted); }
.plan__list-titre { padding: 18px 20px 0; font-size: 13px; font-weight: 500; color: var(--muted); }
.plan__body .btn { align-self: stretch; }
@media (max-width: 960px) { .plans--seul { margin-inline: 0; } }

/* Citation mise en avant (page paiement en ligne). */
.citation { font-size: clamp(20px, 2.2vw, 26px); line-height: 1.4; letter-spacing: -0.015em; font-weight: 500; max-width: 46ch; text-wrap: pretty; }
.citation p + p { margin-top: 14px; }

.note { margin-top: 28px; font-size: 13.5px; color: var(--faint); max-width: 72ch; text-wrap: pretty; }

/* L'entreprise (page À propos) : trois photos, une grande et deux empilées. */
.photos {
  display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px;
  height: clamp(320px, 46vw, 560px); margin-top: 56px;
}
.photos img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-l); }
.photos img:first-child { grid-row: 1 / 3; border-radius: var(--radius-xl); }
@media (max-width: 720px) {
  .photos { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; height: auto; }
  .photos img { aspect-ratio: 4 / 3; height: auto; }
  .photos img:first-child { grid-row: auto; grid-column: 1 / 3; }
}

/* ------------------------------ Blog ------------------------------ */

.articles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 24px; }
@media (max-width: 960px) { .articles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .articles { grid-template-columns: 1fr; } }
.carte { display: flex; flex-direction: column; gap: 10px; }
.carte__image { aspect-ratio: 3 / 2; width: 100%; object-fit: cover; border-radius: var(--radius-l); margin-bottom: 8px; background: var(--tint); }
.carte__cat { font-size: 13px; font-weight: 500; color: var(--faint); }
.carte h3 { font-size: 19px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.25; text-wrap: balance; }
.carte p { font-size: 15px; color: var(--muted); text-wrap: pretty;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.carte:hover h3 { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.carte__image { transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.carte:hover .carte__image { transform: scale(1.01); }

/* L'article à la une, en tête de /blog. */
.une { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; padding-bottom: 56px; margin-bottom: 56px; border-bottom: 1px solid var(--line); }
.une .carte__image { aspect-ratio: 4 / 3; margin: 0; border-radius: var(--radius-xl); }
.une h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; text-wrap: balance; }
.une p { font-size: 17px; color: var(--muted); margin-top: 14px; }
.une .carte__cat { display: block; margin-bottom: 12px; }
.une__temps { display: block; margin-top: 18px; font-size: 14px; color: var(--faint); }
.une:hover h2 { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
@media (max-width: 860px) { .une { grid-template-columns: 1fr; gap: 24px; } }

.plus { margin-top: 44px; }

/* Un article : en-tête, couverture, corps. */
.article { padding: 56px 0 96px; }
.article__retour { font-size: 14px; color: var(--muted); }
.article__retour:hover { color: var(--ink); }
.article__tete { max-width: 680px; margin: 28px auto 0; }
.article__meta { display: flex; gap: 14px; font-size: 13px; font-weight: 500; color: var(--faint); margin-bottom: 18px; }
.article__titre { font-size: clamp(34px, 4.4vw, 52px); line-height: 1.06; letter-spacing: -0.035em; font-weight: 500; text-wrap: balance; }
.article__chapo { margin-top: 20px; }
.article__couverture { max-width: 680px; margin: 40px auto 0; aspect-ratio: 680 / 400; width: 100%; object-fit: cover; border-radius: var(--radius-xl); }
.prose { max-width: 680px; margin: 48px auto 0; font-size: 17px; line-height: 1.65; color: var(--ink-2); }
.prose > * + * { margin-top: 18px; }
.prose h2 { margin-top: 48px; font-size: 28px; line-height: 1.15; letter-spacing: -0.025em; font-weight: 500; color: var(--ink); text-wrap: balance; }
.prose h3 { margin-top: 32px; font-size: 20px; line-height: 1.3; letter-spacing: -0.015em; font-weight: 500; color: var(--ink); }
.prose strong { font-weight: 600; color: var(--ink); }
.prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); color: var(--ink); }
.prose a:hover { text-decoration-color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 8px; }
.prose li::marker { color: var(--faint); }
@media (max-width: 720px) {
  .article { padding: 36px 0 72px; }
  .prose { font-size: 16.5px; margin-top: 36px; }
  .prose h2 { font-size: 24px; margin-top: 40px; }
  .article__couverture { border-radius: 20px; margin-top: 28px; }
}

/* ------------------------------ Contact ------------------------------ */

.agenda { margin-top: 44px; min-height: 620px; border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden; background: var(--paper); }
.agenda .iclosed-widget { width: 100%; height: 620px; }

/* ------------------------------ Pied ------------------------------ */

.footer__brand .marque { margin-bottom: 12px; font-size: 19px; }
.footer__brand .btn { margin-top: 18px; }
.footer__cols { display: flex; gap: 56px; justify-self: end; }
.footer__col { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--ink-2); }
.footer__col h2 { font-size: 13px; font-weight: 500; color: var(--faint); margin-bottom: 4px; }
.footer__col a:hover { color: var(--ink); }
.footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.footer__legal a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.footer__legal a:hover { color: var(--ink); }
@media (max-width: 720px) {
  .footer__cols { justify-self: start; gap: 40px; }
}

/* ------------------------------ 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__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; }
}

/* Contact : l'agenda iClosed ne se charge qu'au clic (assets/site.js). */
.agenda { display: flex; align-items: center; justify-content: center; }
.agenda.is-charge { display: block; }
.agenda__accueil { padding: 48px 32px; max-width: 520px; text-align: center; }
.agenda__accueil .section__actions { justify-content: center; }
.agenda__titre { font-size: 20px; font-weight: 500; letter-spacing: -0.015em; }
.agenda__texte { margin-top: 10px; font-size: 15px; color: var(--muted); text-wrap: pretty; }
button.btn { cursor: pointer; }
.agenda:not(.is-charge) { min-height: 0; }
.agenda.is-charge { border: 0; border-radius: 0; }