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

/* ═══ montée en gamme ═════════════════════════════════════════════════════
   Même passe que sur la LP, la page Plan et la page merci : mêmes couleurs
   SAFTI, on ne joue que sur la lumière, la profondeur et le détail — et on
   retire tout ce qui portait une information dans une pastille pleine.
   Bloc isolé en fin de feuille, annulable d'un seul coup.
   ═══════════════════════════════════════════════════════════════════════ */

/* ---- les sections sombres : de la lumière et du grain, plus un aplat ---- */
.hero, section.night, section.marine, .foot.marine { position: relative; }
.hero > .shell,
section.night > .shell,
section.marine > .shell,
.foot.marine > .shell { position: relative; z-index: 1; }
.hero::before,
section.night::before,
section.marine::before,
.foot.marine::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: .2; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* les hauts de page : la lumière tombe du haut, une braise en bas à gauche */
.home-hero, section.night.phero {
  background:
    radial-gradient(118% 60% at 50% -16%, rgb(12 114 122 / .62), transparent 60%),
    radial-gradient(70% 40% at 106% 6%, rgb(12 114 122 / .34), transparent 62%),
    radial-gradient(92% 50% at -14% 104%, rgb(236 101 37 / .18), transparent 62%),
    var(--nuit);
}
.home-hero::after, section.night.phero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(125% 85% at 50% 45%, transparent 50%, rgb(3 34 37 / .45) 100%);
}
/* l'appel à l'action de fin de page, et les bandes outre-mer */
section.night.endcta { background: radial-gradient(112% 55% at 50% 0%, rgb(12 114 122 / .4), transparent 62%), var(--nuit); }
section.marine { background: radial-gradient(130% 80% at 50% 45%, transparent 44%, rgb(6 70 75 / .5) 100%), var(--marine); }

/* ---- les sections claires : un grain de papier, presque invisible ---- */
.day { position: relative; }
.day > .shell { position: relative; z-index: 1; }
.day::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- les boutons : volume et contact au sol, sans halo coloré ---- */
.btn:not(.btn--ghost):not(.btn--ghost-light):not(.btn--tel) {
  border-radius: 12px;
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--orange) 88%, #fff), var(--orange-cta) 52%, var(--orange-cta-hot));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .28),
    0 2px 5px -2px rgb(0 0 0 / .32),
    0 14px 26px -14px rgb(0 0 0 / .5);
  transition: filter .16s ease, transform .16s ease, box-shadow .16s ease;
}
.btn:not(.btn--ghost):not(.btn--ghost-light):not(.btn--tel):hover {
  filter: brightness(1.05); transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .28), 0 3px 6px -2px rgb(0 0 0 / .32), 0 20px 34px -16px rgb(0 0 0 / .6);
}
.btn:not(.btn--ghost):not(.btn--ghost-light):not(.btn--tel):active { transform: translateY(1px); filter: brightness(.98); }
.btn--lg { box-shadow: inset 0 1px 0 rgb(255 255 255 / .3), 0 3px 7px -2px rgb(0 0 0 / .35), 0 20px 38px -16px rgb(0 0 0 / .6); }

/* ---- le portrait : un tirage posé sur la nuit ---- */
.portrait { box-shadow: 0 2px 6px -2px rgb(0 0 0 / .45), 0 34px 64px -30px rgb(0 0 0 / .85); }

/* ---- moins de gadget : les chiffres redeviennent de la typographie ---- */
.card__n, .plan__n {
  display: block; width: auto; height: auto; min-width: 1.3em;
  background: none; border-radius: 0;
  font-family: var(--display);
  font-variation-settings: "wdth" 116, "wght" 700; font-weight: 700;
  font-size: 1.625rem; line-height: 1; letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--day-ink) 30%, transparent);
}
.card__n { margin-bottom: 10px; }

/* ---- les cartes : elles se décollent de la page ---- */
.card {
  border: 0; border-radius: 12px;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--day-line) 88%, #fff),
    0 1px 2px rgb(6 70 75 / .05),
    0 14px 30px -20px rgb(6 70 75 / .6);
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--orange) 32%, var(--day-line)), 0 2px 4px rgb(6 70 75 / .05), 0 22px 40px -22px rgb(6 70 75 / .7);
}
.gcard { box-shadow: 0 1px 2px rgb(0 0 0 / .07), 0 4px 10px -6px rgb(6 70 75 / .3), 0 22px 44px -22px rgb(6 70 75 / .5); }
.avis { border: 0; border-radius: 14px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--day-line) 88%, #fff), 0 1px 2px rgb(6 70 75 / .05), 0 16px 32px -22px rgb(6 70 75 / .65); }
.proofs { border: 0; box-shadow: inset 0 0 0 1px var(--day-line), 0 16px 32px -24px rgb(6 70 75 / .65); }
.sold img { box-shadow: inset 0 0 0 1px rgb(0 0 0 / .07), 0 14px 28px -18px rgb(6 70 75 / .75); }
/* la photo des pages intérieures restait à plat pendant que tout le reste
   prenait du volume */
.split img { box-shadow: inset 0 0 0 1px rgb(0 0 0 / .07), 0 16px 32px -20px rgb(6 70 75 / .7); }
.communes li { border-color: color-mix(in srgb, var(--day-line) 88%, #fff); box-shadow: 0 1px 2px rgb(6 70 75 / .05); }
.note-box { box-shadow: 0 1px 2px rgb(6 70 75 / .04), 0 14px 30px -22px rgb(6 70 75 / .55); }

/* ---- la lettre d'Aurélie : une vraie feuille, pas un aplat crème ----
   Le masque « papier déchiré » rogne aussi les ombres de boîte : l'ombre
   portée passe par drop-shadow, qui épouse le bord irrégulier, et
   l'éclairage du papier par un calque interne que le masque rogne aussi. */
.carte {
  isolation: isolate;
  filter:
    drop-shadow(0 1px 1px rgb(0 0 0 / .3))
    drop-shadow(0 7px 11px rgb(0 0 0 / .24))
    drop-shadow(0 32px 52px rgb(0 0 0 / .48));
}
.carte::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgb(255 255 255 / .55), rgb(255 255 255 / .12) 18%, transparent 44%),
    linear-gradient(0deg, rgb(88 68 52 / .16), rgb(88 68 52 / .05) 9%, transparent 22%),
    linear-gradient(90deg, rgb(88 68 52 / .11), transparent 7%, transparent 93%, rgb(88 68 52 / .11));
}

/* ---- la FAQ : la question ouverte se signale ---- */
.qa summary { transition: color .16s ease; }
.qa summary:hover, .qa[open] summary { color: var(--orange-day); }

/* ---- l'en-tête et le dock : ils flottent au-dessus du contenu ---- */
.site-head { box-shadow: 0 12px 30px -20px rgb(0 0 0 / .9); }
.dock {
  background: color-mix(in srgb, var(--nuit) 88%, transparent);
  box-shadow: 0 -12px 30px -20px rgb(0 0 0 / .9);
}

/* ═══ le site bouge ═══════════════════════════════════════════════════════
   Deux choses : le menu mobile s'ouvre au lieu d'apparaître d'un coup, et
   les blocs montent en entrant dans l'écran. Uniquement opacité et
   translation, les deux seules propriétés qu'un téléphone anime sans
   repeindre la page. Tout est coupé si le visiteur a demandé moins
   d'animations, et rien ne dépend du JavaScript pour rester lisible.
   ═══════════════════════════════════════════════════════════════════════ */

/* ---- le menu mobile : un panneau qui descend, pas un display: none ---- */
.site-nav {
  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);
  box-shadow: 0 18px 34px -22px rgb(0 0 0 / .9);
  visibility: hidden; opacity: 0; pointer-events: none;
  transform: translateY(-12px);
  transition: opacity .22s ease, transform .3s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .3s;
}
.site-nav.open {
  visibility: visible; opacity: 1; pointer-events: auto; transform: none;
  transition: opacity .2s ease, transform .32s cubic-bezier(.2, .7, .2, 1), visibility 0s;
}
/* les entrées arrivent l'une après l'autre, très court : on sent l'ordre sans attendre */
.site-nav li {
  opacity: 0; transform: translateY(-8px);
  transition: opacity .2s ease, transform .26s cubic-bezier(.2, .7, .2, 1);
}
.site-nav.open li { opacity: 1; transform: none; }
.site-nav.open li:nth-child(1) { transition-delay: .05s; }
.site-nav.open li:nth-child(2) { transition-delay: .09s; }
.site-nav.open li:nth-child(3) { transition-delay: .13s; }
.site-nav.open li:nth-child(4) { transition-delay: .17s; }
.site-nav.open li:nth-child(5) { transition-delay: .21s; }
.site-nav.open li:nth-child(6) { transition-delay: .25s; }

/* le bouton : les trois traits se replient en croix
   (les deux traits du haut et du bas deviennent des pseudo-éléments, ce qui
   permet de les faire pivoter séparément — impossible avec des box-shadow) */
.menu-btn i { position: relative; box-shadow: none; transition: background-color .18s ease .06s; }
.menu-btn i::before, .menu-btn i::after {
  content: ""; position: absolute; left: 0; width: 16px; height: 2px; background: #fff;
  transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
.menu-btn i::before { top: -5px; }
.menu-btn i::after  { top: 5px; }
.menu-btn[aria-expanded="true"] i { background: transparent; transition-delay: 0s; }
.menu-btn[aria-expanded="true"] i::before { transform: translateY(5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] i::after  { transform: translateY(-5px) rotate(-45deg); }

/* ---- les blocs montent en entrant dans l'écran ----
   L'état caché est posé par le CSS dès le chargement, grâce à une ligne de
   script dans le <head> : sans ça, le contenu s'afficherait puis
   disparaîtrait le temps que site.js arrive. */
.js-anim main > section > .shell > *,
.js-anim main > section > .shell > :is(.cards, .gstack, .rail, .ticks, .proofs, .faq__list, .communes, .split, .steps__list, .plan, .dvf) > * {
  opacity: 0; transform: translateY(16px);
}
/* les conteneurs de grille ne bougent pas : ce sont leurs éléments qui montent */
.js-anim main > section > .shell > :is(.cards, .gstack, .rail, .ticks, .proofs, .faq__list, .communes, .split, .steps__list, .plan, .dvf) {
  opacity: 1; transform: none;
}
.js-anim .is-in {
  opacity: 1 !important; transform: none !important;
  transition-property: opacity, transform;
  transition-duration: .5s, .6s;
  transition-timing-function: ease, cubic-bezier(.2, .7, .2, 1);
}
/* le carrousel garde son défilement horizontal : pas de translation dessus */
.js-anim main > section > .shell > .rail > * { transform: translateY(12px); }

@media (prefers-reduced-motion: reduce) {
  .js-anim main > section > .shell > *,
  .js-anim main > section > .shell > :is(.cards, .gstack, .rail, .ticks, .proofs, .faq__list, .communes, .split, .steps__list, .plan, .dvf) > * {
    opacity: 1; transform: none;
  }
  .site-nav, .site-nav.open, .site-nav li, .menu-btn i, .menu-btn i::before, .menu-btn i::after { transition: none; }
}

/* à l'impression, rien ne doit rester derrière le voile */
@media print {
  .js-anim main > section > .shell > *,
  .js-anim main > section > .shell > :is(.cards, .gstack, .rail, .ticks, .proofs, .faq__list, .communes, .split, .steps__list, .plan, .dvf) > * {
    opacity: 1; transform: none;
  }
}

/* sur grand écran la navigation redevient une barre : on annule tout */
@media (min-width: 1000px) {
  .site-nav, .site-nav.open {
    visibility: visible; opacity: 1; pointer-events: auto; transform: none;
    box-shadow: none; transition: none;
  }
  .site-nav li, .site-nav.open li { opacity: 1; transform: none; transition: none; }
}