/* ===========================================================================
   Aurélie Vega · SAFTI Mirepoix — LP vendeur « Plan de Vente »
   Reprise du template Synergie Team (Eric Rapp) : palette nuit / marine /
   orange, Archivo + Instrument Sans, le filet « plafond », le dock mobile.
   MOBILE FIRST : le CSS de base est le téléphone, les min-width ajoutent.
   =========================================================================== */
:root {
  --nuit: #06464B;           /* SAFTI Pétrole */
  --marine: #0C727A;         /* SAFTI Outre-mer */
  --orange: #EC6525;         /* SAFTI Terracotta */
  --orange-light: #F6B593;   /* surtitres sur marine */
  --orange-cta: #EC6525;     /* le profond est cliquable */
  --orange-cta-hot: #B2391A; /* SAFTI Terre de sienne */
  --orange-day: #B2391A;     /* surtitres sur crème */
  --creme: #F9F5F3;          /* SAFTI Coton */
  --brume: #DACABE;          /* SAFTI Lin */
  --day-ink: #1D1B1B;        /* SAFTI Nuit noire */
  --day-soft: #494343;       /* SAFTI Gris */
  --day-line: #E9DFD6;
  --rule: color-mix(in srgb, var(--brume) 46%, transparent);
  --rule-day: color-mix(in srgb, var(--day-soft) 40%, transparent);
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --text: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --shell: 1140px;
  --gut: clamp(20px, 5vw, 40px);
  --band: clamp(56px, 9vw, 128px);
  --r: 6px;
  --r-media: 10px;
  color-scheme: dark;
}

/* ---------------------------------------------------------------- base --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: var(--nuit); color: var(--creme);
  font-family: var(--text);
  font-size: 1.0625rem;          /* 17 px : la cible a 55-75 ans */
  line-height: 1.6;
  text-wrap: pretty;
  overflow-x: hidden;
  overflow-x: clip;
  padding-bottom: 82px;          /* place du dock mobile */
}
img, video { display: block; max-width: 100%; height: auto; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p, h1, h2, h3, figure, blockquote { margin: 0; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--orange); color: var(--nuit); }
.skip { position: absolute; left: 0; top: 0; transform: translateY(-120%); z-index: 99; background: var(--orange); color: var(--nuit); padding: 12px 18px; font-weight: 700; }
.skip:focus { transform: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* -------------------------------------------------------------- layout --- */
.shell { width: min(100% - (var(--gut) * 2), var(--shell)); margin-inline: auto; }
section { padding-block: var(--band); scroll-margin-top: 20px; }
.night  { background: var(--nuit);   color: var(--creme); }
.marine { background: var(--marine); color: var(--creme); }
.day    { background: var(--creme);  color: var(--day-ink); color-scheme: light; }
.night + .night, .marine + .marine, .day + .day { padding-top: calc(var(--band) * 0.45); }

/* ------------------------------------------------------------- plafond --- */
/* La signature du template : un filet à hauteur constante, rompu là où une preuve passe. */
.ceiling { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; column-gap: 14px; }
.ceiling__rule { height: 2px; margin-top: var(--ceil-y, 1.05em); background: var(--rule); position: relative; }
.day .ceiling__rule { background: var(--rule-day); }
.ceiling__rule--l { transform-origin: left center; }
.ceiling__rule--r { transform-origin: right center; }
.ceiling__rule::after { content: ""; position: absolute; top: -1px; width: 10px; height: 2px; background: var(--orange); }
.ceiling__rule--l::after { right: 0; transform: rotate(-6deg); transform-origin: right center; }
.ceiling__rule--r::after { left: 0; transform: rotate(6deg); transform-origin: left center; }
.ceiling__pierce { grid-column: 2; }
.ceiling--open { --ceil-y: 0; margin-bottom: clamp(28px, 5vw, 48px); }
.ceiling--open .ceiling__gap { grid-column: 2; width: clamp(56px, 12vw, 120px); }
.ceiling--tag { --ceil-y: 0.62em; margin-bottom: 12px; }

/* ---------------------------------------------------------- typographie --- */
.eyebrow {
  font-family: var(--display); font-size: 0.75rem;
  font-variation-settings: "wdth" 62, "wght" 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--orange); margin-bottom: 1em;
}
.day .eyebrow { color: var(--orange-day); }
.marine .eyebrow { color: var(--orange-light); }
.h2 {
  font-family: var(--display);
  font-size: clamp(1.75rem, 1.1rem + 2.9vw, 3rem);
  line-height: 1.06; letter-spacing: -0.015em;
  margin: 0 0 0.5em; font-weight: 600;
  font-variation-settings: "wdth" 110, "wght" 600;
  max-width: 20ch;
}
.lead { max-width: 56ch; color: color-mix(in srgb, var(--creme) 80%, transparent); font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); }
.lead + .lead { margin-top: 1em; }
.lead b, .lead strong { color: var(--creme); font-weight: 600; }
.day .lead { color: var(--day-soft); }
.day .lead b, .day .lead strong { color: var(--day-ink); }
.note { margin-top: 12px; font-size: 0.875rem; color: var(--brume); text-align: center; }
.day .note { color: var(--day-soft); }

/* -------------------------------------------------------------- boutons --- */
.btn {
  --btn-bg: var(--orange-cta);
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 52px;
  background: var(--btn-bg); color: #fff;
  font-family: var(--display); font-variation-settings: "wdth" 100, "wght" 700; font-weight: 700;
  font-size: 1.0625rem; line-height: 1.15; text-decoration: none; text-align: center;
  padding: 0.95em 1.4em; border: 0; border-radius: var(--r); cursor: pointer;
  transition: background-color .18s ease, transform .18s ease;
}
.btn:hover { --btn-bg: var(--orange-cta-hot); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .7; cursor: wait; }
.btn--lg {
  position: relative; overflow: hidden; display: flex; width: 100%;
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.3125rem);
  font-variation-settings: "wdth" 100, "wght" 800; font-weight: 800;
  padding: 1.1em 1.4em; text-wrap: balance;
  box-shadow: 0 12px 34px -14px rgb(236 101 37 / 0.65);
}
.btn--lg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(104deg, transparent 40%, rgb(255 255 255 / .34) 50%, transparent 60%); transform: translateX(-130%); pointer-events: none; }
.btn--block { width: 100%; }

/* ------------------------------------------------------ barre du haut --- */
.trustbar { position: sticky; top: 0; z-index: 40; background: var(--marine); border-bottom: 1px solid color-mix(in srgb, var(--brume) 18%, transparent); transition: transform .28s ease; }
.trustbar[data-hidden] { transform: translateY(-100%); }
.trustbar__row { display: flex; align-items: center; justify-content: center; gap: 16px; padding-block: 11px; }
.trustbar .brand, .trustbar .btn { display: none; }
.pourqui { display: flex; align-items: center; gap: 9px; font-family: var(--display); font-variation-settings: "wdth" 88, "wght" 500; font-size: 0.8125rem; color: color-mix(in srgb, var(--creme) 86%, transparent); white-space: nowrap; }
.pourqui b { font-variation-settings: "wdth" 88, "wght" 700; color: var(--creme); }
.pourqui__pt { position: relative; width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--orange); }
.pourqui__pt::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--orange); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand__mono { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--orange-light); border-radius: var(--r); color: var(--orange-light); font-family: var(--display); font-variation-settings: "wdth" 90, "wght" 700; font-size: 0.875rem; letter-spacing: 0.04em; }
.brand__txt { display: grid; line-height: 1.15; }
.brand__txt b { font-family: var(--display); font-variation-settings: "wdth" 95, "wght" 600; font-size: 1rem; }
.brand__txt small { color: var(--brume); font-size: 0.75rem; }

/* ----------------------------------------------------------------- hero --- */
.hero { padding-top: 26px; padding-bottom: 36px; }
.hero__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-bottom: 0.9em; }
.hero__top .eyebrow { margin: 0; }
.hero__stars { display: flex; align-items: center; gap: 6px; font-family: var(--text); font-weight: 400; font-size: 0.9375rem; letter-spacing: 0; color: var(--creme); white-space: nowrap; }
.g-logo { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #fff; flex: 0 0 auto; }
.g-logo svg { display: block; }
.hero__stars i { font-style: normal; color: #FBBC04; }
.hero__title {
  font-family: var(--display); font-weight: 700;
  font-variation-settings: "wdth" 85, "wght" 700;
  font-size: clamp(2.125rem, 1.2rem + 4.2vw, 4.25rem);
  line-height: 0.98; letter-spacing: -0.03em;
  margin: 0 0 0.4em; max-width: 17ch;
}
.hero__title em { font-style: normal; color: var(--orange); white-space: nowrap; }
.hero__sub { max-width: 52ch; color: color-mix(in srgb, var(--creme) 82%, transparent); font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.3125rem); }
.hero__sub strong { color: var(--creme); font-weight: 600; }
.hero__media { margin-top: 22px; }
.hero__cta { margin-top: 22px; }
.hero__filet { margin-top: 30px; border-top: 1px solid color-mix(in srgb, var(--brume) 18%, transparent); }

/* le portrait d'Aurélie : tirage clair qui perce la nuit */
.portrait { position: relative; border-radius: var(--r-media); overflow: hidden; background: #fff; }
.portrait img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 12%; }
.portrait figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 2px; padding: 44px 16px 14px;
  background: linear-gradient(to top, color-mix(in srgb, var(--nuit) 92%, transparent) 0%, color-mix(in srgb, var(--nuit) 60%, transparent) 55%, transparent 100%);
}
.portrait figcaption b { font-family: var(--display); font-variation-settings: "wdth" 100, "wght" 700; font-weight: 700; font-size: 1.125rem; color: #fff; }
.portrait figcaption span { font-family: var(--display); font-variation-settings: "wdth" 70, "wght" 600; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in srgb, #fff 82%, transparent); }

/* ------------------------------------------------ pièces du plan --- */
.plan { display: grid; gap: 14px; margin-top: 30px; }
.plan__item { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; padding: 18px 16px; border-radius: var(--r-media); background: var(--creme); color: var(--day-ink); box-shadow: 0 14px 30px -18px rgb(0 0 0 / .55); }
.plan__item--now { box-shadow: 0 0 0 3px #D0A880, 0 14px 30px -18px rgb(0 0 0 / .55); }
.plan__n { display: grid; place-items: center; line-height: 1; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: var(--orange); color: #fff; font-family: var(--display); font-weight: 800; font-size: 1rem; }
.plan__item b { display: block; font-family: var(--display); font-variation-settings: "wdth" 105, "wght" 700; font-weight: 700; font-size: 1.125rem; line-height: 1.2; margin-bottom: 6px; color: var(--day-ink); }
.plan__item div > span { display: block; color: var(--day-soft); font-size: 1rem; }
.plan__now { display: inline-block; margin-top: 10px; padding: 3px 10px; border-radius: 999px; background: var(--orange); color: #fff; font-style: normal; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
@media (min-width: 900px) { .plan { grid-template-columns: 1fr 1fr; } }

/* ------------------------------------------------ stratégie 3 mois --- */
.strat { margin-top: 30px; padding: 22px 18px; border-radius: var(--r-media); background: #0C727A; box-shadow: 0 14px 30px -18px rgb(0 0 0 / .55); }
.strat__t { font-family: var(--display); font-variation-settings: "wdth" 100, "wght" 700; font-weight: 700; font-size: clamp(1.25rem, 1rem + 1.1vw, 1.6rem); line-height: 1.1; color: #fff; margin-bottom: 18px; }
.strat__list { position: relative; display: grid; gap: 18px; }
.strat__list::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: color-mix(in srgb, #fff 30%, transparent); }
.strat__list li { position: relative; padding-left: 30px; }
.strat__list li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 3px #0C727A; }
.strat__when { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #F6D2B8; }
.strat__list b { display: block; margin: 2px 0 2px; font-family: var(--display); font-variation-settings: "wdth" 100, "wght" 700; font-weight: 700; font-size: 1.125rem; color: #fff; }
.strat__list li > span:last-child { display: block; color: #fff; font-size: 1rem; }
.strat__note { margin-top: 18px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, #fff 25%, transparent); font-size: .9375rem; color: #fff; }
@media (min-width: 900px) { .strat { padding: 30px; } .strat__list { grid-template-columns: repeat(4, 1fr); gap: 20px; } .strat__list::before { left: 8px; right: 8px; top: 7px; bottom: auto; width: auto; height: 2px; } .strat__list li { padding: 30px 0 0; } }

/* ------------------------------------------------ avis façon Google --- */
.gstack { display: grid; max-width: 560px; margin: 30px auto 0; }
.gcard { position: relative; margin: 0; padding: 16px 16px 18px; background: #fff; border-radius: 14px; box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 12px 30px -14px rgb(16 45 105 / .28); }
.gstack .gcard + .gcard { margin-top: -8px; }
.gstack .gcard:nth-child(1) { margin-right: 22px; z-index: 3; }
.gstack .gcard:nth-child(2) { margin-left: 22px; z-index: 2; }
.gstack .gcard:nth-child(3) { margin-right: 10px; margin-left: 8px; z-index: 1; }
.gcard__head { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.gcard__av { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: #fff; font-weight: 600; font-size: 1rem; }
.gcard__head b { display: block; font-size: .9375rem; color: #202124; line-height: 1.2; }
.gcard__head small { display: block; font-size: .8125rem; color: #70757a; }
.gcard__g { font-family: Arial, sans-serif; font-weight: 700; font-size: 1.125rem; background: conic-gradient(from -45deg, #EA4335 0 25%, #4285F4 0 50%, #34A853 0 75%, #FBBC05 0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gcard__meta { margin: 8px 0 6px; font-size: .8125rem; color: #70757a; }
.gcard__stars { color: #FBBC04; letter-spacing: 1px; margin-right: 6px; font-size: .9375rem; }
.gcard blockquote { margin: 0; font-size: .9375rem; line-height: 1.55; color: #3c4043; }
.gcard mark { color: #202124; background: linear-gradient(transparent 12%, rgb(236 101 37 / .30) 12%, rgb(236 101 37 / .30) 92%, transparent 92%); padding: 0 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.rail .gcard { height: 100%; box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 8px 22px -14px rgb(16 45 105 / .25); }
.gcard__safti { width: 76px; height: auto; }
.rail--3 { padding-top: 4px; padding-bottom: 26px; }
.gwall .src { text-align: center; margin: 16px auto 0; }
@media (min-width: 720px) { .gstack .gcard:nth-child(1) { margin-right: 60px; } .gstack .gcard:nth-child(2) { margin-left: 60px; } .gstack .gcard:nth-child(3) { margin-right: 30px; margin-left: 20px; } .gcard { padding: 20px 22px; } }

/* ------------------------------------------------ la lettre d'Aurélie --- */
.carte { position: relative; max-width: 46rem; margin-inline: auto; padding: 46px 22px 50px; color: var(--day-ink); text-align: center;
  background: var(--creme) url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22220%22%20height%3D%22220%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.85%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22/%3E%3CfeColorMatrix%20values%3D%220%200%200%200%20.35%20%200%200%200%200%20.28%20%200%200%200%200%20.2%20%200%200%200%20.07%200%22/%3E%3C/filter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url%28%23n%29%22/%3E%3C/svg%3E");
  /* feuille déchirée en haut et en bas : un seul masque, donc aucune jointure visible */
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22400%22%20height%3D%2216%22%20viewBox%3D%220%200%20400%2016%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2016%20L0.0%202.6%20L7.1%207.3%20L13.0%203.2%20L20.8%209.1%20L26.8%206.1%20L31.3%201.0%20L36.5%206.9%20L39.9%208.9%20L44.3%203.3%20L47.5%2011.0%20L55.0%209.8%20L61.7%201.3%20L66.7%206.0%20L70.3%2010.5%20L75.6%202.5%20L83.5%202.2%20L92.0%205.5%20L98.3%204.4%20L104.2%202.9%20L107.5%209.7%20L111.9%208.8%20L116.1%2010.7%20L124.5%208.5%20L132.1%206.8%20L139.5%202.2%20L145.3%209.3%20L149.5%2010.2%20L157.8%205.1%20L163.0%205.5%20L168.3%2010.9%20L173.7%201.3%20L177.2%208.2%20L186.2%206.0%20L192.1%206.5%20L199.6%203.2%20L206.3%206.6%20L213.0%202.8%20L217.0%204.5%20L225.6%204.5%20L232.2%204.1%20L235.8%201.7%20L243.7%208.8%20L248.9%207.8%20L256.0%2010.0%20L264.7%205.1%20L273.7%2010.6%20L280.2%209.8%20L286.2%204.8%20L290.6%209.8%20L294.6%201.7%20L302.4%208.7%20L308.3%209.4%20L311.7%203.6%20L316.4%205.2%20L320.4%201.7%20L325.4%2010.0%20L334.3%208.5%20L340.2%203.5%20L349.0%206.3%20L356.3%201.3%20L360.6%209.4%20L368.4%209.8%20L375.0%205.3%20L381.5%209.5%20L386.3%206.3%20L391.0%208.7%20L394.1%207.9%20L400.0%202.6%20L400%2016%20Z%22/%3E%3C/svg%3E") repeat-x top / 400px 16px, linear-gradient(#000, #000) no-repeat center / 100% calc(100% - 30px), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22400%22%20height%3D%2216%22%20viewBox%3D%220%200%20400%2016%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%200%20H400%20V8.2%20L400.0%208.2%20L397.2%2011.1%20L389.0%205.3%20L383.8%206.0%20L379.9%205.0%20L376.6%208.4%20L372.6%207.1%20L369.2%205.6%20L362.4%206.0%20L357.0%208.9%20L349.2%2013.7%20L341.5%2014.0%20L338.2%2011.8%20L331.5%2010.2%20L324.4%2014.5%20L318.0%208.7%20L312.5%205.0%20L307.9%2010.9%20L302.0%207.3%20L297.6%206.8%20L293.7%2014.6%20L285.4%208.6%20L279.9%207.8%20L271.7%2013.2%20L263.4%2010.5%20L257.7%205.8%20L249.5%208.9%20L245.0%206.3%20L237.4%205.6%20L233.7%206.7%20L227.9%205.2%20L220.9%208.9%20L216.2%2013.2%20L207.2%2011.5%20L200.0%205.6%20L193.0%209.7%20L184.4%2013.4%20L178.6%2010.8%20L172.1%2012.0%20L167.2%2013.8%20L160.7%2012.6%20L153.7%205.4%20L147.8%206.5%20L140.3%209.2%20L136.5%2014.8%20L131.8%2012.3%20L123.6%2010.3%20L117.1%207.4%20L109.9%2012.9%20L105.1%209.5%20L98.6%208.1%20L93.0%2011.8%20L88.8%205.6%20L85.4%2010.5%20L80.2%2011.4%20L73.7%206.8%20L65.8%208.1%20L62.1%206.4%20L57.4%2013.6%20L54.1%2014.8%20L48.7%2010.8%20L40.0%2011.3%20L35.7%206.2%20L27.7%209.2%20L24.2%205.7%20L18.6%205.4%20L12.5%205.6%20L7.3%2010.4%20L3.9%2011.5%20L0.0%208.2%20Z%22/%3E%3C/svg%3E") repeat-x bottom / 400px 16px;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22400%22%20height%3D%2216%22%20viewBox%3D%220%200%20400%2016%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2016%20L0.0%202.6%20L7.1%207.3%20L13.0%203.2%20L20.8%209.1%20L26.8%206.1%20L31.3%201.0%20L36.5%206.9%20L39.9%208.9%20L44.3%203.3%20L47.5%2011.0%20L55.0%209.8%20L61.7%201.3%20L66.7%206.0%20L70.3%2010.5%20L75.6%202.5%20L83.5%202.2%20L92.0%205.5%20L98.3%204.4%20L104.2%202.9%20L107.5%209.7%20L111.9%208.8%20L116.1%2010.7%20L124.5%208.5%20L132.1%206.8%20L139.5%202.2%20L145.3%209.3%20L149.5%2010.2%20L157.8%205.1%20L163.0%205.5%20L168.3%2010.9%20L173.7%201.3%20L177.2%208.2%20L186.2%206.0%20L192.1%206.5%20L199.6%203.2%20L206.3%206.6%20L213.0%202.8%20L217.0%204.5%20L225.6%204.5%20L232.2%204.1%20L235.8%201.7%20L243.7%208.8%20L248.9%207.8%20L256.0%2010.0%20L264.7%205.1%20L273.7%2010.6%20L280.2%209.8%20L286.2%204.8%20L290.6%209.8%20L294.6%201.7%20L302.4%208.7%20L308.3%209.4%20L311.7%203.6%20L316.4%205.2%20L320.4%201.7%20L325.4%2010.0%20L334.3%208.5%20L340.2%203.5%20L349.0%206.3%20L356.3%201.3%20L360.6%209.4%20L368.4%209.8%20L375.0%205.3%20L381.5%209.5%20L386.3%206.3%20L391.0%208.7%20L394.1%207.9%20L400.0%202.6%20L400%2016%20Z%22/%3E%3C/svg%3E") repeat-x top / 400px 16px, linear-gradient(#000, #000) no-repeat center / 100% calc(100% - 30px), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22400%22%20height%3D%2216%22%20viewBox%3D%220%200%20400%2016%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%200%20H400%20V8.2%20L400.0%208.2%20L397.2%2011.1%20L389.0%205.3%20L383.8%206.0%20L379.9%205.0%20L376.6%208.4%20L372.6%207.1%20L369.2%205.6%20L362.4%206.0%20L357.0%208.9%20L349.2%2013.7%20L341.5%2014.0%20L338.2%2011.8%20L331.5%2010.2%20L324.4%2014.5%20L318.0%208.7%20L312.5%205.0%20L307.9%2010.9%20L302.0%207.3%20L297.6%206.8%20L293.7%2014.6%20L285.4%208.6%20L279.9%207.8%20L271.7%2013.2%20L263.4%2010.5%20L257.7%205.8%20L249.5%208.9%20L245.0%206.3%20L237.4%205.6%20L233.7%206.7%20L227.9%205.2%20L220.9%208.9%20L216.2%2013.2%20L207.2%2011.5%20L200.0%205.6%20L193.0%209.7%20L184.4%2013.4%20L178.6%2010.8%20L172.1%2012.0%20L167.2%2013.8%20L160.7%2012.6%20L153.7%205.4%20L147.8%206.5%20L140.3%209.2%20L136.5%2014.8%20L131.8%2012.3%20L123.6%2010.3%20L117.1%207.4%20L109.9%2012.9%20L105.1%209.5%20L98.6%208.1%20L93.0%2011.8%20L88.8%205.6%20L85.4%2010.5%20L80.2%2011.4%20L73.7%206.8%20L65.8%208.1%20L62.1%206.4%20L57.4%2013.6%20L54.1%2014.8%20L48.7%2010.8%20L40.0%2011.3%20L35.7%206.2%20L27.7%209.2%20L24.2%205.7%20L18.6%205.4%20L12.5%205.6%20L7.3%2010.4%20L3.9%2011.5%20L0.0%208.2%20Z%22/%3E%3C/svg%3E") repeat-x bottom / 400px 16px; }
.carte p + p { margin-top: 1.45em; }
.carte__ouv, .carte__clos { font-family: var(--display); font-variation-settings: "wdth" 100, "wght" 600; font-weight: 600; font-size: clamp(1.125rem, 1rem + 0.75vw, 1.4375rem); line-height: 1.32; letter-spacing: -0.012em; max-width: 34ch; margin-inline: auto; }
.carte__ouv b { font-variation-settings: "wdth" 100, "wght" 800; }
.carte__p { font-size: clamp(1rem, 0.96rem + 0.35vw, 1.125rem); line-height: 1.62; color: var(--day-soft); max-width: 42ch; margin-inline: auto; }
.carte__pivot { font-family: var(--display); font-variation-settings: "wdth" 108, "wght" 700; font-weight: 700; font-size: clamp(1.375rem, 1rem + 1.9vw, 2.125rem); line-height: 1.1; letter-spacing: -0.022em; max-width: 20ch; margin-inline: auto; }
.carte__pivot em { font-style: normal; color: var(--orange-day); }
.carte__pied { display: flex; align-items: center; justify-content: center; margin-top: 26px; text-align: center; }
.carte__nom { display: block; font-family: "Kaushan Script", cursive; font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.375rem); line-height: 1; color: var(--day-ink); }
.carte__sign small { display: block; margin-top: 4px; font-size: 0.8125rem; color: var(--day-soft); line-height: 1.35; }
.carte__safti { width: 86px; flex: 0 0 auto; }

/* ------------------------------------------------ le Plan de Vente --- */
.gains { display: grid; gap: 28px; margin-top: 32px; }
.gain { position: relative; display: grid; gap: 6px; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--brume) 30%, transparent); }
.gain::before { content: ""; position: absolute; width: 26px; height: 1px; margin-top: -17px; background: var(--orange); }
.gain b { font-family: var(--display); font-variation-settings: "wdth" 110, "wght" 600; font-weight: 600; font-size: clamp(1.1875rem, 1rem + 0.7vw, 1.4rem); line-height: 1.15; }
.gain span { color: color-mix(in srgb, var(--creme) 78%, transparent); font-size: 1rem; max-width: 42ch; }
.filtre { margin-top: 36px; padding: 22px; border: 1px solid color-mix(in srgb, var(--brume) 26%, transparent); border-radius: var(--r-media); max-width: 62ch; }
.filtre h3 { margin: 0 0 0.5em; font-family: var(--display); font-variation-settings: "wdth" 85, "wght" 700; font-weight: 700; font-size: clamp(1.25rem, 1rem + 1.1vw, 1.6rem); line-height: 1.08; letter-spacing: -0.02em; }
.filtre ol { display: grid; gap: 12px; counter-reset: f; }
.filtre li { position: relative; padding-left: 30px; color: color-mix(in srgb, var(--creme) 80%, transparent); font-size: 1rem; }
.filtre li::before { counter-increment: f; content: counter(f); position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--orange-light); color: var(--orange-light); font-family: var(--display); font-size: 0.75rem; font-weight: 700; display: grid; place-items: center; }
.filtre li b { color: var(--creme); font-weight: 600; }
.change__seal { margin-top: 32px; padding-top: 22px; border-top: 1px solid color-mix(in srgb, var(--brume) 22%, transparent); font-family: var(--display); font-variation-settings: "wdth" 100, "wght" 500; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem); max-width: 40ch; }
.act { margin-top: 26px; }

/* -------------------------------------------- carrousels (mobile) --- */
.rail {
  display: flex; gap: 14px; margin-top: 30px;
  margin-inline: calc(-1 * var(--gut)); padding: 0 var(--gut) 8px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut);
  overscroll-behavior-inline: contain; scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > li { flex: 0 0 80%; scroll-snap-align: start; }
.rail__hint { margin-top: 10px; font-family: var(--display); font-variation-settings: "wdth" 80, "wght" 600; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--day-soft); }

/* biens vendus */
.sold__n { font-family: var(--display); font-variation-settings: "wdth" 118, "wght" 700; font-weight: 700; font-size: clamp(1.25rem, 1.1rem + 1vw, 1.625rem); line-height: 1; color: var(--day-ink); white-space: nowrap; }
.sold img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-media); background: #DED4C8; }
.sold__who { margin-top: 12px; font-family: var(--display); font-variation-settings: "wdth" 80, "wght" 600; font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--day-soft); }
.proofs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 34px; background: var(--day-line); border: 1px solid var(--day-line); border-radius: var(--r-media); overflow: hidden; }
.proofs li { background: #fff; padding: 18px 16px; display: grid; align-content: start; gap: 6px; }
.proofs b { display: block; font-family: var(--display); font-variation-settings: "wdth" 110, "wght" 800; font-weight: 800; font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--orange-day); white-space: nowrap; }
.proofs b i { font-style: normal; font-size: .7em; color: #E08A00; vertical-align: .12em; margin-left: 2px; }
.proofs li:last-child { grid-column: 1 / -1; }
.proofs span { font-size: 0.9375rem; line-height: 1.35; color: var(--day-soft); }

/* avis */
.avis { height: 100%; display: flex; flex-direction: column; gap: 14px; padding: 22px; background: #fff; border: 1px solid var(--day-line); border-radius: var(--r-media); }
.avis__stars { color: #E08A00; letter-spacing: 2px; font-size: 0.9375rem; }
.avis blockquote { font-size: 1.0625rem; line-height: 1.5; color: var(--day-ink); }
.avis blockquote mark { background: none; color: var(--orange-day); font-weight: 600; }
.avis footer { margin-top: auto; font-family: var(--display); font-variation-settings: "wdth" 80, "wght" 600; font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--day-soft); }
.avis--key { background: var(--nuit); border-color: var(--nuit); }
.avis--key blockquote { color: var(--creme); }
.avis--key blockquote mark { color: var(--orange-light); }
.avis--key footer { color: var(--brume); }
.src { margin-top: 14px; font-size: 0.8125rem; color: var(--day-soft); max-width: 62ch; }

/* ----------------------------------------------------------- la bande --- */
.band { padding-block: clamp(52px, 8vw, 104px); border-block: 1px solid var(--day-line); }
.band__big { font-family: var(--display); font-variation-settings: "wdth" 125, "wght" 800; font-weight: 800; font-size: clamp(3.5rem, 2rem + 6vw, 6rem); line-height: .9; letter-spacing: -0.04em; color: var(--orange-day); }
.band__q { margin-top: 14px; font-family: var(--display); font-variation-settings: "wdth" 100, "wght" 500; font-size: clamp(1.5rem, 1rem + 2.6vw, 2.625rem); line-height: 1.14; letter-spacing: -0.02em; max-width: 22ch; }
.band__p { margin-top: 16px; color: var(--day-soft); max-width: 52ch; }
.dvf { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 30px; background: var(--day-line); border: 1px solid var(--day-line); border-radius: var(--r-media); overflow: hidden; }
.dvf li { background: #fff; padding: 16px 14px; }
.dvf b { display: block; font-family: var(--display); font-variation-settings: "wdth" 110, "wght" 700; font-weight: 700; font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem); line-height: 1.05; color: var(--day-ink); white-space: nowrap; }
.dvf span { display: block; margin-top: 4px; font-size: 0.875rem; line-height: 1.35; color: var(--day-soft); }
.band__w { margin-top: 16px; font-family: var(--display); font-variation-settings: "wdth" 70, "wght" 600; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--day-soft); line-height: 1.5; }
.communes__t { margin-top: 28px; font-weight: 700; color: var(--day-ink); }
.communes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.communes li { padding: 6px 12px; border: 1px solid var(--day-line); border-radius: 999px; background: #fff; font-size: 0.875rem; color: var(--day-ink); }
.communes li b { color: var(--orange-day); font-weight: 700; }

/* -------------------------------------------------------------- étapes --- */
.steps__list { display: grid; gap: 26px; margin-top: 30px; }
.stepx { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: start; }
.stepx__n { grid-row: span 2; font-family: var(--display); font-variation-settings: "wdth" 125, "wght" 700; font-weight: 700; font-size: clamp(2rem, 1.4rem + 2.4vw, 2.75rem); line-height: .85; color: color-mix(in srgb, var(--day-ink) 22%, transparent); }
.stepx b { font-family: var(--display); font-variation-settings: "wdth" 105, "wght" 600; font-weight: 600; font-size: 1.1875rem; }
.stepx p { color: var(--day-soft); font-size: 1rem; max-width: 46ch; }

/* ---------------------------------------------------- le formulaire --- */
.promises { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 22px; font-family: var(--display); font-variation-settings: "wdth" 80, "wght" 600; font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--day-soft); }
.promises li { display: flex; align-items: center; gap: 8px; }
.promises li::before { content: ""; width: 9px; height: 9px; flex: 0 0 auto; border-left: 2px solid var(--orange); border-bottom: 2px solid var(--orange); transform: rotate(-45deg) translateY(-2px); }
.tunnel { margin-top: 28px; margin-inline: calc(var(--gut) * -0.5); background: #fff; border: 1px solid var(--day-line); border-radius: var(--r-media); padding: 20px 18px 24px; box-shadow: 0 24px 60px -34px rgb(6 70 75 / .3); }
.tunnel__head { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; min-height: 44px; }
.back { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--day-line); background: #fff; color: var(--day-ink); font-size: 1.25rem; cursor: pointer; }
.back[hidden] { visibility: hidden; display: block; }
.bars { flex: 1; display: grid; grid-auto-flow: column; gap: 5px; }
.bars i { height: 5px; border-radius: 3px; background: var(--day-line); transition: background .25s ease; }
.bars i.on { background: var(--orange); }
.step-n { flex: 0 0 auto; font-family: var(--display); font-variation-settings: "wdth" 80, "wght" 600; font-size: 0.8125rem; letter-spacing: 0.08em; color: var(--day-soft); font-variant-numeric: tabular-nums; }
.q { display: none; }
.q.on { display: block; animation: qin .28s ease; }
@keyframes qin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.q h3 { font-family: var(--display); font-variation-settings: "wdth" 100, "wght" 700; font-weight: 700; font-size: clamp(1.4375rem, 1.2rem + 1vw, 1.75rem); line-height: 1.12; letter-spacing: -0.015em; color: var(--day-ink); }
.q .hint { margin: 8px 0 20px; color: var(--day-soft); font-size: 1rem; }
.opts { display: grid; gap: 10px; }
.opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 58px; padding: 14px 18px; text-align: left; background: var(--creme); color: var(--day-ink); border: 1.5px solid var(--day-line); border-radius: var(--r-media); font-size: 1.0625rem; font-weight: 500; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.opt::after { content: ""; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--day-soft) 60%, transparent); background: #fff; }
.opt:hover { border-color: color-mix(in srgb, var(--orange) 55%, var(--day-line)); }
.opt[aria-pressed="true"] { border-color: var(--orange-cta); background: #FDEDE4; }
.opt[aria-pressed="true"]::after { border-color: var(--orange-cta); background: radial-gradient(circle, var(--orange-cta) 45%, #fff 50%); }
.fg { margin-bottom: 16px; }
.fg label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 0.9375rem; color: var(--day-ink); }
.fg input { width: 100%; min-height: 56px; padding: 14px 16px; font-size: 1.0625rem; color: var(--day-ink); background: var(--creme); border: 1.5px solid var(--day-line); border-radius: var(--r-media); }
.fg input:focus { outline: none; border-color: var(--orange-cta); background: #fff; }
.fg input::placeholder { color: color-mix(in srgb, var(--day-soft) 70%, transparent); }
.err { display: none; margin-top: 6px; font-size: 0.875rem; color: #B42318; font-weight: 500; }
.fg.bad input { border-color: #B42318; }
.fg.bad .err, .err.show { display: block; }
#cform-ko:not([hidden]) { display: block; margin-bottom: 14px; }
.consent { display: flex; gap: 12px; align-items: flex-start; margin: 6px 0 4px; font-size: 0.875rem; line-height: 1.45; color: var(--day-soft); }
.consent input { flex: 0 0 auto; width: 24px; height: 24px; margin-top: 1px; accent-color: var(--orange-cta); }
.q .btn { margin-top: 18px; }
.inter { text-align: center; padding: 8px 0 4px; }
.inter__big { font-family: var(--display); font-variation-settings: "wdth" 125, "wght" 800; font-weight: 800; font-size: clamp(3rem, 2rem + 4vw, 4.25rem); line-height: 1; letter-spacing: -0.03em; color: var(--orange-day); margin-bottom: 12px; }
.inter h3 { max-width: 22ch; margin-inline: auto; }
.inter p { margin: 12px auto 0; max-width: 40ch; color: var(--day-soft); }
.inter--next { text-align: left; }
.inter--next .eyebrow { margin: 0 0 8px; max-width: none; color: var(--orange-day); }
.inter--next h3 { max-width: none; margin: 0 0 16px; }
.next-list { display: grid; gap: 10px; margin-bottom: 4px; }
.next-list li { position: relative; padding: 14px 16px 14px 50px; border-radius: var(--r-media); background: var(--creme); border: 1.5px solid var(--day-line); }
.next-list li::before { content: "✓"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%; background: var(--orange); color: #fff; font-size: 0.8125rem; font-weight: 700; display: grid; place-items: center; }
.next-list b { display: block; color: var(--day-ink); font-size: 1.0625rem; line-height: 1.25; }
.next-list span { display: block; color: var(--day-soft); font-size: 0.9375rem; }
.done { text-align: center; padding: 10px 0; }
.done__check { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; background: var(--orange-cta); color: #fff; display: grid; place-items: center; font-size: 1.75rem; font-weight: 700; }
.done p { margin: 12px auto 0; max-width: 40ch; color: var(--day-soft); }
.done .tel { display: inline-flex; margin-top: 16px; min-height: 52px; align-items: center; padding: 0 22px; border-radius: var(--r); border: 1.5px solid var(--day-ink); color: var(--day-ink); font-family: var(--display); font-variation-settings: "wdth" 100, "wght" 700; font-weight: 700; font-size: 1.1875rem; text-decoration: none; }
.sign { margin-top: 28px; font-family: var(--display); font-variation-settings: "wdth" 105, "wght" 600; font-weight: 600; font-size: 1.25rem; }
.sign small { display: block; font-family: var(--text); font-size: 0.8125rem; font-weight: 400; color: var(--day-soft); }

/* ----------------------------------------------------------------- FAQ --- */
.faq__list { margin-top: 26px; border-top: 1px solid var(--day-line); }
.qa { border-bottom: 1px solid var(--day-line); }
.qa summary { list-style: none; cursor: pointer; padding: 20px 36px 20px 0; position: relative; font-family: var(--display); font-variation-settings: "wdth" 100, "wght" 600; font-weight: 600; font-size: 1.0625rem; line-height: 1.3; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 12px; height: 2px; background: var(--orange); }
.qa summary::before { content: ""; position: absolute; right: 9px; top: calc(50% - 5px); width: 2px; height: 12px; background: var(--orange); transition: opacity .18s ease; }
.qa[open] summary::before { opacity: 0; }
.qa p { padding: 0 0 22px; color: var(--day-soft); max-width: 62ch; }
.qa p b { color: var(--day-ink); }

/* -------------------------------------------------------------- pied --- */
.foot { padding-block: 44px; font-size: 0.875rem; color: var(--brume); }
.foot .brand { margin-bottom: 16px; }
.foot__contact { display: grid; gap: 4px; margin: 14px 0 18px; }
.foot__contact a { color: var(--creme); text-decoration: none; font-weight: 600; }
.foot__legal { margin-top: 12px; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--brume) 18%, transparent); color: color-mix(in srgb, var(--brume) 80%, transparent); font-size: 0.75rem; line-height: 1.55; }
.foot__legal p + p { margin-top: 10px; }

/* ----------------------------------------------------------- CTA collant --- */
.dock { position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--nuit) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: 1px solid color-mix(in srgb, var(--brume) 18%, transparent); }
.dock[hidden] { display: none; }

/* =================================================== à partir de la tablette */
@media (min-width: 720px) {
  .rail { display: grid; grid-template-columns: repeat(2, 1fr); width: auto; margin-inline: 0; padding: 0; overflow: visible; gap: 22px; }
  .rail--3 { grid-template-columns: repeat(2, 1fr); }
  .rail > li { flex: none; }
  .rail__hint { display: none; }
  .steps__list { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .dvf { grid-template-columns: repeat(4, 1fr); }
  .carte { padding: 70px 56px 74px; }
  .filtre { padding: 30px; }
  .tunnel { margin-inline: auto; max-width: 620px; padding: 30px 34px 34px; }
  .hero__cta { max-width: 460px; }
  .act { max-width: 460px; }
  .opts--2 { grid-template-columns: 1fr 1fr; }
  .proofs { grid-template-columns: repeat(3, 1fr); }
  .proofs li:last-child { grid-column: auto; }
}

/* =================================================== bureau */
@media (min-width: 900px) {
  body { padding-bottom: 0; font-size: 1.125rem; }
  .dock { display: none; }
  .trustbar__row { justify-content: space-between; padding-block: 12px; }
  .trustbar .brand { display: flex; }
  .trustbar .btn { display: inline-flex; min-height: 44px; font-size: 0.9375rem; padding: 0.7em 1.1em; }
  .gains { grid-template-columns: repeat(2, 1fr); column-gap: 46px; }
  .rail--4 { grid-template-columns: repeat(4, 1fr); }
  .hero { padding-top: 56px; padding-bottom: 56px; }
}
@media (min-width: 1100px) {
  .rail--3 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1000px) {
  .hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); column-gap: 64px; align-content: center;
    grid-template-areas: "top media" "title media" "sub media" "cta media" "filet filet"; }
  .hero__top { grid-area: top; }
  .hero__title { grid-area: title; font-size: clamp(3rem, 1rem + 3.6vw, 4.25rem); }
  .hero__sub { grid-area: sub; }
  .hero__media { grid-area: media; align-self: center; margin-top: 0; max-width: 460px; justify-self: end; width: 100%; }
  .portrait img { aspect-ratio: 4 / 5; }
  .hero__cta { grid-area: cta; }
  .hero__filet { grid-area: filet; }
}

/* ------------------------------------------------------------ mouvement --- */
@media (prefers-reduced-motion: no-preference) {
  .pourqui__pt::after { animation: pulse 2.6s ease-out infinite; }
  @keyframes pulse { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(3.2); opacity: 0; } }
  .btn--lg::after { animation: reflet 5.2s cubic-bezier(.42,0,.24,1) 1.6s infinite; }
  @keyframes reflet { 0% { transform: translateX(-130%); } 42%, 100% { transform: translateX(130%); } }
  .js-anim .ceiling.reveal .ceiling__rule { transform: scaleX(0); transition: transform .32s cubic-bezier(.2,.7,.2,1); }
  .js-anim .ceiling.reveal .ceiling__rule::after { opacity: 0; transition: opacity .12s linear .34s; }
  .js-anim .ceiling.reveal.is-in .ceiling__rule { transform: scaleX(1); }
  .js-anim .ceiling.reveal.is-in .ceiling__rule::after { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .q.on { animation: none; }
}

/* ---- couleurs charte SAFTI ---- */
.day .h2, .day .band__q, .q h3, .carte__nom { color: var(--orange); }
.night .eyebrow, .marine .eyebrow { color: #D0A880; }   /* Sable */
.avis--key blockquote mark { color: #D0A880; }
.gain::before { background: #D0A880; }
/* section Plan de Vente : texte long, l'outre-mer fatiguait la lecture → pétrole.
   La barre du haut et le pied de page gardent l'outre-mer. */
/* derrière la lettre d'Aurélie : la couleur de la barre du haut (outre-mer) */
section[aria-labelledby="carte-t"] { background: var(--marine); }
section.marine { background: var(--nuit); border-top: 1px solid color-mix(in srgb, var(--brume) 16%, transparent); }
section.marine .lead, section.marine .gain span, section.marine .filtre li { color: color-mix(in srgb, var(--creme) 90%, transparent); }
/* carte « Pourquoi une estimation en ligne se trompe » : outre-mer pour ressortir du pétrole */
section.marine .filtre { background: #0C727A; border-color: transparent; box-shadow: 0 14px 30px -18px rgb(0 0 0 / .55); }
section.marine .filtre li { color: #fff; }
section.marine .filtre li::before { border-color: #F6B593; color: #fff; }

/* =========================================================================
   SITE aurelievega.immo — composants propres au site (le reste vient de la LP)
   ========================================================================= */
body { padding-bottom: 76px; }
.btn svg { width: 20px; height: 20px; flex: 0 0 auto; }
.btn--ghost-light { white-space: nowrap; }
@media (min-width: 900px) { body { padding-bottom: 0; } }
a { text-underline-offset: 3px; }
.day a:not(.btn) { color: var(--orange-day); }
.night a:not(.btn), .marine a:not(.btn) { color: #F6B593; }

/* en-tête */
.site-head { position: sticky; top: 0; z-index: 50; background: var(--marine); border-bottom: 1px solid color-mix(in srgb, var(--brume) 18%, transparent); }
.site-head__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 10px; }
.site-head .brand { display: flex; color: var(--creme); }
.site-head .brand__txt small { color: color-mix(in srgb, var(--creme) 75%, transparent); }
.menu-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid color-mix(in srgb, #fff 35%, transparent); border-radius: 999px; background: transparent; color: #fff; font-weight: 600; cursor: pointer; }
.menu-btn i { display: block; width: 16px; height: 2px; background: #fff; box-shadow: 0 -5px 0 #fff, 0 5px 0 #fff; }
.site-nav { display: none; }
.site-nav.open { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--marine); padding: 8px var(--gut) 18px; border-bottom: 1px solid color-mix(in srgb, #fff 18%, transparent); }
.site-nav ul { display: grid; gap: 2px; }
.site-nav a { display: block; padding: 12px 4px; color: #fff; text-decoration: none; font-weight: 600; border-bottom: 1px solid color-mix(in srgb, #fff 12%, transparent); }
.site-nav a[aria-current="page"] { color: #F6D2B8; }
.site-nav .btn { display: flex; align-items: center; justify-content: center; margin-top: 12px; width: 100%; color: #fff; border-bottom: 0; line-height: 1; }
@media (min-width: 1000px) {
  .menu-btn { display: none; }
  .site-nav, .site-nav.open { display: block; position: static; padding: 0; background: none; border: 0; }
  .site-nav ul { display: flex; align-items: center; gap: 22px; }
  .site-nav a { padding: 6px 0; border: 0; font-size: .9375rem; }
  .site-nav .btn { display: inline-flex; margin: 0; width: auto; min-height: 44px; padding: 0 1.1em; font-size: .9375rem; }
}

/* héros des pages intérieures */
.phero { padding-block: 34px 40px; }
.phero .h1 { font-family: var(--display); font-variation-settings: "wdth" 90, "wght" 700; font-weight: 700; font-size: clamp(2rem, 1.2rem + 3.6vw, 3.6rem); line-height: 1.02; letter-spacing: -0.03em; max-width: 20ch; margin-bottom: .45em; }
.phero .h1 em { font-style: normal; color: var(--orange); }
.phero .lead { max-width: 60ch; }
.phero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.phero__cta .btn { flex: 1 1 240px; }
.btn--ghost-light { --btn-bg: transparent; color: #fff; border: 1.5px solid color-mix(in srgb, #fff 45%, transparent); }
.btn--ghost-light:hover { --btn-bg: color-mix(in srgb, #fff 10%, transparent); }
.crumbs { font-size: .8125rem; margin-bottom: 14px; color: color-mix(in srgb, var(--creme) 70%, transparent); }
.crumbs a { color: inherit !important; }

/* accueil : héros avec photo */
.home-hero .hero__title { max-width: 16ch; }

/* citation */
.quote-band { padding-block: 44px; }
.quote-band p { font-family: var(--display); font-variation-settings: "wdth" 100, "wght" 600; font-weight: 600; font-size: clamp(1.375rem, 1rem + 1.8vw, 2.125rem); line-height: 1.2; letter-spacing: -0.015em; max-width: 30ch; color: var(--day-ink); }
.quote-band p em { font-style: normal; color: var(--orange); }

/* cartes services */
.cards { display: grid; gap: 14px; margin-top: 28px; }
.card { display: block; padding: 22px 20px; background: #fff; border: 1px solid var(--day-line); border-radius: var(--r-media); text-decoration: none; color: var(--day-ink) !important; box-shadow: 0 10px 26px -18px rgb(16 45 105 / .25); transition: transform .18s ease, box-shadow .18s ease; }
a.card:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -18px rgb(16 45 105 / .35); }
.card__n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--orange); color: #fff; font-family: var(--display); font-weight: 800; margin-bottom: 12px; line-height: 1; }
.card b { display: block; font-family: var(--display); font-variation-settings: "wdth" 100, "wght" 700; font-weight: 700; font-size: 1.25rem; line-height: 1.15; margin-bottom: 6px; }
.card > span:not(.card__n) { display: block; color: var(--day-soft); font-size: 1rem; }
.card em { display: inline-block; margin-top: 10px; font-style: normal; font-weight: 700; color: var(--orange-day); }
.marine .card, .night .card { background: var(--creme); }
@media (min-width: 720px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } .cards--2 { grid-template-columns: repeat(2, 1fr); } .cards--4 { grid-template-columns: repeat(2, 1fr); } }

/* texte courant */
.prose { max-width: 62ch; }
.prose p + p { margin-top: 1em; }
.prose p { color: var(--day-soft); }
.marine .prose p, .night .prose p { color: color-mix(in srgb, var(--creme) 90%, transparent); }
.ticks { display: grid; gap: 10px; margin-top: 18px; max-width: 62ch; }
.ticks li { position: relative; padding-left: 30px; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 12px; height: 7px; border-left: 2.5px solid var(--orange); border-bottom: 2.5px solid var(--orange); transform: rotate(-45deg); }
.day .ticks li { color: var(--day-ink); }
.marine .ticks li, .night .ticks li { color: #fff; }
.split { display: grid; gap: 26px; align-items: center; }
.split img { width: 100%; border-radius: var(--r-media); object-fit: cover; aspect-ratio: 4 / 5; object-position: 50% 15%; }
@media (min-width: 900px) { .split { grid-template-columns: 1.15fr .85fr; gap: 56px; } .split--rev { grid-template-columns: .85fr 1.15fr; } .split--rev > :first-child { order: 2; } }

/* étapes */
.steps2 { display: grid; gap: 14px; margin-top: 26px; counter-reset: st; }
.steps2 li { position: relative; padding: 18px 16px 18px 64px; background: #fff; border: 1px solid var(--day-line); border-radius: var(--r-media); }
.steps2 li::before { counter-increment: st; content: counter(st); position: absolute; left: 16px; top: 16px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--orange); color: #fff; font-family: var(--display); font-weight: 800; line-height: 1; }
.steps2 b { display: block; color: var(--day-ink); font-size: 1.0625rem; }
.steps2 span { display: block; color: var(--day-soft); font-size: .9375rem; }
@media (min-width: 900px) { .steps2 { grid-template-columns: repeat(2, 1fr); } }

/* encadré filtre (clair) */
.note-box { margin-top: 26px; padding: 20px; border-radius: var(--r-media); background: #FDF1EA; border-left: 4px solid var(--orange); max-width: 62ch; }
.note-box b { display: block; font-family: var(--display); font-weight: 700; font-size: 1.125rem; color: var(--day-ink); margin-bottom: 4px; }
.note-box p { color: var(--day-soft); }

/* chiffres DVF */
.figs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 24px; background: var(--day-line); border: 1px solid var(--day-line); border-radius: var(--r-media); overflow: hidden; max-width: 760px; }
.figs div { background: #fff; padding: 16px 14px; }
.figs b { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem); line-height: 1.05; color: var(--orange-day); white-space: nowrap; }
.figs span { display: block; margin-top: 4px; font-size: .875rem; line-height: 1.35; color: var(--day-soft); }
@media (min-width: 720px) { .figs { grid-template-columns: repeat(4, 1fr); } }

/* formulaire de contact */
.cform { margin-top: 24px; background: #fff; border: 1px solid var(--day-line); border-radius: var(--r-media); padding: 22px 18px; box-shadow: 0 24px 60px -34px rgb(6 70 75 / .3); max-width: 640px; }
.cform .fg select, .cform .fg textarea { width: 100%; min-height: 56px; padding: 14px 16px; font: inherit; font-size: 1.0625rem; color: var(--day-ink); background: var(--creme); border: 1.5px solid var(--day-line); border-radius: var(--r-media); }
.cform .fg textarea { min-height: 130px; resize: vertical; }
.cform .fg select:focus, .cform .fg textarea:focus { outline: none; border-color: var(--orange-cta); background: #fff; }
.cform .btn { margin-top: 14px; width: 100%; }
.cform__ok { text-align: center; padding: 20px 0; }
.cform__ok b { display: block; font-family: var(--display); font-weight: 700; font-size: 1.5rem; color: var(--day-ink); margin: 10px 0 6px; }
.direct { display: grid; gap: 10px; margin-top: 18px; max-width: 640px; }
.direct a { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #fff; border: 1px solid var(--day-line); border-radius: var(--r-media); color: var(--day-ink) !important; text-decoration: none; font-weight: 600; }
.direct a small { display: block; font-weight: 400; color: var(--day-soft); }
.direct svg { width: 22px; height: 22px; color: var(--orange); flex: 0 0 auto; }

/* FAQ groupée */
.faq-group + .faq-group { margin-top: 34px; }
.faq-group h2 { font-family: var(--display); font-weight: 700; font-size: 1.25rem; color: var(--orange-day); margin-bottom: 6px; }

/* bandeau de fin */
.endcta { text-align: left; }
.endcta .h2 { max-width: 22ch; }

/* pied de page du site */
.foot__cols { display: grid; gap: 22px; margin: 22px 0 8px; }
.foot__cols b { display: block; color: #fff; margin-bottom: 6px; }
.foot__cols ul { display: grid; gap: 6px; }
.foot__cols a { color: color-mix(in srgb, var(--creme) 88%, transparent) !important; text-decoration: none; }
.foot__cols a:hover { text-decoration: underline; }
@media (min-width: 720px) { .foot__cols { grid-template-columns: 1.2fr 1fr 1fr; } }

/* dock mobile à deux boutons */
.dock__row { display: flex; gap: 10px; }
.dock__row .btn { flex: 1; min-height: 50px; padding-inline: .8em; font-size: 1rem; }
.dock__row .btn--tel { flex: 0 0 auto; --btn-bg: transparent; border: 1.5px solid color-mix(in srgb, #fff 45%, transparent); }
.dock__row .btn--tel svg { width: 20px; height: 20px; }