/* ==========================================================
   Maxime Patry — feuille de style du site
   Bleu nuit + laiton, sur fond pierre. Serif pour les titres,
   grotesque pour le texte.
   ========================================================== */

/* Polices hébergées sur le site (aucun appel à Google : plus rapide, et
   l'adresse IP des visiteurs n'est transmise à personne). Licence OFL. */
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/hanken-grotesk.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/source-serif-4.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 400 600; font-display: swap; src: url("../fonts/source-serif-4-italique.woff2") format("woff2"); }

:root {
  /* Couleurs */
  --nuit: #13243d;
  --nuit-2: #1c3254;
  --nuit-ligne: rgba(255, 255, 255, 0.14);
  --laiton: #a8823f;
  --laiton-clair: #d2b071;      /* sur fond nuit */
  --laiton-texte: #7d5e26;      /* texte laiton sur fond clair, 5:1 */
  --fond: #fbfaf7;
  --pierre: #efebe4;
  --pierre-2: #e2dbcf;
  --blanc: #ffffff;
  --texte: #1a2332;
  --texte-2: #4a5466;
  --ligne: #d9d2c5;
  --sur-nuit: #e9edf3;
  --sur-nuit-2: #b9c3d2;
  --focus: #7d5e26;

  /* Typographie */
  --serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-xs: 0.8125rem;
  --t-s: 0.9375rem;
  --t-m: 1.0625rem;
  --t-l: 1.25rem;
  --t-xl: clamp(1.5rem, 1.1rem + 1.3vw, 1.875rem);
  --t-2xl: clamp(1.875rem, 1.3rem + 2.4vw, 2.75rem);
  --t-3xl: clamp(2.375rem, 1.4rem + 4.2vw, 4.25rem);

  /* Espacements (base 8) */
  --s1: 0.5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 2rem;
  --s5: 3rem;
  --s6: 4.5rem;
  --s7: clamp(4.5rem, 3rem + 6vw, 8rem);

  --page: 72rem;
  --texte-max: 38rem;
  --gouttiere: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);

  --r-petit: 6px;
  --r-moyen: 12px;
  --r-grand: 20px;

  --ombre: 0 1px 2px rgba(19, 36, 61, 0.06), 0 8px 24px -12px rgba(19, 36, 61, 0.18);

  /* Mouvement */
  --sortie: cubic-bezier(0.22, 1, 0.36, 1);
  --expo: cubic-bezier(0.16, 1, 0.3, 1);
  --duree-court: 180ms;
  --duree-moyen: 420ms;
  --duree-long: 900ms;

  color-scheme: light;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--sans);
  font-size: var(--t-m);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
figure { margin: 0; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
  font-optical-sizing: auto;
}
h1 { font-size: var(--t-3xl); letter-spacing: -0.02em; }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); line-height: 1.2; }

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--nuit); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--laiton-texte); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}
:is(.section-nuit, .heros, .pied, .resume, .rdv-carte, .apercu-calc, .compare-nom, .article-cta, .courbes) :focus-visible { outline-color: var(--laiton-clair); }

strong { font-weight: 600; }

.sauter {
  position: absolute;
  left: var(--s2);
  top: -4rem;
  z-index: 100;
  padding: var(--s1) var(--s2);
  background: var(--nuit);
  color: var(--blanc);
  border-radius: var(--r-petit);
}
.sauter:focus { top: var(--s2); color: var(--blanc); }

main:focus { outline: none; }

.visuellement-cache {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Mise en page ---------- */

.conteneur {
  width: 100%;
  max-width: calc(var(--page) + 2 * var(--gouttiere));
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.section { padding-block: var(--s7); }
.section-pierre { background: var(--pierre); }
.section-nuit { background: var(--nuit); color: var(--sur-nuit); }
.section-nuit h2, .section-nuit h3 { color: var(--blanc); }
.section-nuit a:not(.bouton) { color: var(--laiton-clair); }

.intro { max-width: var(--texte-max); margin-bottom: var(--s5); }
.intro h2 + p, .intro h1 + p { margin-top: var(--s3); }
.chapeau { font-size: var(--t-l); color: var(--texte-2); line-height: 1.55; }
.section-nuit .chapeau { color: var(--sur-nuit-2); }

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

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--r-petit);
  font: 600 var(--t-s)/1.2 var(--sans);
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--duree-court) ease, color var(--duree-court) ease,
              border-color var(--duree-court) ease, transform var(--duree-court) ease;
}
.bouton:active { transform: scale(0.98); }

.bouton-plein { background: var(--nuit); color: var(--blanc); }
.bouton-plein:hover { background: var(--nuit-2); color: var(--blanc); }

.bouton-laiton { background: var(--laiton-clair); color: var(--nuit); }
.bouton-laiton:hover { background: #e0c48d; color: var(--nuit); }

.bouton-contour { border-color: currentColor; color: var(--nuit); background: transparent; }
.bouton-contour:hover { background: var(--nuit); border-color: var(--nuit); color: var(--blanc); }
.section-nuit .bouton-contour, .heros .bouton-contour { color: var(--blanc); border-color: rgba(255,255,255,.45); }
.section-nuit .bouton-contour:hover, .heros .bouton-contour:hover { background: var(--blanc); color: var(--nuit); border-color: var(--blanc); }

.bouton-discret { background: transparent; color: var(--nuit); border-color: var(--ligne); }
.bouton-discret:hover { border-color: var(--nuit); }

.actions { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }

.lien-fleche {
  font-weight: 600;
  color: var(--nuit);
  text-decoration: underline;
  text-decoration-color: var(--laiton);
  text-decoration-thickness: 2px;
}

.lien-bouton {
  background: none; border: 0; padding: 0;
  font: inherit; color: inherit; text-decoration: underline;
  text-underline-offset: 0.2em; cursor: pointer;
}

/* ---------- En-tête ---------- */

.entete {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(251, 250, 247, 0.97);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duree-moyen) ease, box-shadow var(--duree-moyen) ease;
}
.entete.est-defile { border-color: var(--ligne); box-shadow: 0 6px 20px -16px rgba(19,36,61,.35); }

.entete-in {
  display: flex;
  align-items: center;
  gap: var(--s3);
  max-width: calc(var(--page) + 2 * var(--gouttiere));
  margin-inline: auto;
  padding: 0.75rem var(--gouttiere);
  min-height: 4.5rem;
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  color: var(--nuit);
  margin-right: auto;
}
.marque:hover { color: var(--nuit); }
.marque-texte { display: flex; flex-direction: column; line-height: 1.1; }
.marque-nom { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
.marque-titre { font-size: var(--t-xs); color: var(--texte-2); margin-top: 2px; }

.nav-liste { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.25rem; }
.nav-liste a {
  display: inline-flex; align-items: center;
  min-height: 2.75rem; padding: 0 0.75rem;
  font-size: var(--t-s); font-weight: 500;
  color: var(--texte); text-decoration: none;
  border-radius: var(--r-petit);
  position: relative;
}
.nav-liste a::after {
  content: ""; position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0.45rem;
  height: 2px; background: var(--laiton);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--duree-moyen) var(--sortie);
}
.nav-liste a:hover::after, .nav-liste a[aria-current="page"]::after { transform: scaleX(1); }
.nav-liste a[aria-current="page"] { font-weight: 600; }
.nav-tel, .nav-rdv { display: none; }

.menu-bouton {
  display: none;
  align-items: center; gap: 0.5rem;
  min-height: 2.75rem; padding: 0 0.875rem;
  background: transparent; border: 1px solid var(--ligne); border-radius: var(--r-petit);
  font: 600 var(--t-s) var(--sans); color: var(--nuit); cursor: pointer;
}
.menu-icone { display: grid; gap: 5px; width: 18px; }
.menu-icone span { height: 1.5px; background: currentColor; transition: transform var(--duree-moyen) var(--sortie); }
.menu-bouton[aria-expanded="true"] .menu-icone span:first-child { transform: translateY(3.25px) rotate(45deg); }
.menu-bouton[aria-expanded="true"] .menu-icone span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

@media (max-width: 1023px) {
  .menu-bouton { display: inline-flex; }
  .entete-rdv { display: none; }
  .nav-liste {
    position: fixed;
    inset: 4.5rem 0 auto 0;
    flex-direction: column;
    gap: 0;
    padding: var(--s2) var(--gouttiere) var(--s4);
    background: var(--fond);
    border-bottom: 1px solid var(--ligne);
    box-shadow: 0 24px 40px -24px rgba(19,36,61,.35);
    max-height: calc(100dvh - 4.5rem);
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity var(--duree-moyen) var(--sortie), transform var(--duree-moyen) var(--sortie), visibility 0s linear var(--duree-moyen);
  }
  .nav-liste.est-ouvert {
    visibility: visible; opacity: 1; transform: none;
    transition: opacity var(--duree-moyen) var(--sortie), transform var(--duree-moyen) var(--sortie);
  }
  .nav-liste a { min-height: 3.25rem; font-size: var(--t-l); font-family: var(--serif); padding: 0; border-bottom: 1px solid var(--ligne); border-radius: 0; width: 100%; }
  .nav-liste a::after { display: none; }
  .nav-liste a[aria-current="page"] { color: var(--laiton-texte); }
  .nav-rdv { display: block; margin-top: var(--s3); }
  .nav-liste .nav-rdv a { width: 100%; justify-content: center; font-family: var(--sans); font-size: var(--t-m); color: var(--blanc); border: 0; border-radius: var(--r-petit); }
  .nav-tel { display: block; margin-top: var(--s1); }
  .nav-liste .nav-tel a { justify-content: center; }
  .nav-tel a { font-family: var(--sans); font-size: var(--t-m); font-weight: 600; border: 0; }
}
@media (max-width: 420px) {
  .marque-titre { display: none; }
  .menu-libelle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- Héros de l'accueil ---------- */

.heros {
  background: var(--nuit);
  color: var(--sur-nuit);
  overflow: hidden;
  position: relative;
}
.heros-in {
  display: grid;
  gap: var(--s5);
  padding-block: clamp(3rem, 2rem + 5vw, 6.5rem) clamp(3.5rem, 2rem + 5vw, 6rem);
  align-items: center;
}
@media (min-width: 960px) {
  .heros-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: var(--s6); }
}
.heros h1 { color: var(--blanc); max-width: 13ch; }
.heros h1 .h1-suite { color: var(--laiton-clair); font-style: italic; font-weight: 400; display: block; }
.heros .chapeau { color: var(--sur-nuit-2); margin-top: var(--s3); max-width: 34rem; }
.heros .actions { margin-top: var(--s4); }
.heros-note { margin-top: var(--s3); font-size: var(--t-s); color: var(--sur-nuit-2); }

/* Héros vidéo : la maison se dessine puis se fait protéger */
.heros-video {
  display: grid;
  min-height: min(86vh, 860px);
  min-height: min(86svh, 860px);
  isolation: isolate;
}
.heros-media { position: absolute; inset: 0; z-index: -1; background: var(--nuit); }
.heros-film, .heros-fixe, .heros-fixe img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 68% 50%;
}
.heros-fixe { display: none; }
/* Voile bleu nuit : le texte reste lisible sur le ciel clair */
.heros-media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(13, 26, 46, 0.94) 0%, rgba(13, 26, 46, 0.86) 30%, rgba(13, 26, 46, 0.45) 55%, rgba(13, 26, 46, 0) 75%),
    linear-gradient(0deg, rgba(13, 26, 46, 0.55) 0%, rgba(13, 26, 46, 0) 30%);
}
.heros-video .heros-in { grid-template-columns: minmax(0, 1fr); align-items: center; align-self: stretch; }
.heros-texte { max-width: 40rem; }
.heros-video h1 { max-width: 18ch; text-shadow: 0 1px 24px rgba(13, 26, 46, 0.35); }
.heros-video .chapeau { color: #d3dbe6; }

@media (max-width: 899px) {
  /* Sur téléphone : la maison d'abord, bien visible, puis le texte */
  .heros-video { display: block; min-height: 0; }
  .heros-media { position: relative; z-index: 0; height: clamp(300px, 58svh, 540px); }
  .heros-film, .heros-fixe img { object-position: 70% 45%; }
  .heros-media::after { background: linear-gradient(0deg, var(--nuit) 0%, rgba(19, 36, 61, 0.6) 22%, rgba(19, 36, 61, 0) 50%); }
  .heros-video .heros-in { position: relative; z-index: 1; margin-top: -4.5rem; padding-top: 0; padding-bottom: var(--s5); }
}

/* Mouvement réduit ou économie de données : on montre la maison déjà protégée */
@media (prefers-reduced-motion: reduce) {
  .heros-film { display: none; }
  .heros-fixe { display: block; }
}
.heros-video.sans-film .heros-film { display: none; }
.heros-video.sans-film .heros-fixe { display: block; }

/* Section du graphique, sous le héros */
.courbes-bloc { display: grid; gap: var(--s5); align-items: center; }
@media (min-width: 960px) { .courbes-bloc { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s6); } }
.courbes-bloc .intro { margin-bottom: 0; }

/* Le graphique signature */
.courbes {
  background: var(--nuit-2);
  border: 1px solid var(--nuit-ligne);
  border-radius: var(--r-grand);
  padding: clamp(1rem, 0.5rem + 2vw, 1.75rem);
}
.courbes figcaption { font-size: var(--t-xs); color: var(--sur-nuit-2); margin-top: var(--s2); line-height: 1.5; }
.courbes-legende { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); margin: 0 0 var(--s2); padding: 0; list-style: none; font-size: var(--t-s); }
.courbes-legende li { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--sur-nuit); }
.pastille { width: 1.25rem; height: 0; border-top: 3px solid var(--laiton-clair); }
.pastille-banque { border-top: 2px dashed var(--sur-nuit-2); }

.c-grille { stroke: var(--nuit-ligne); stroke-width: 1; }
.c-axe-texte { fill: var(--sur-nuit-2); font: 500 13px var(--sans); }
.c-ecart { fill: url(#hachures); }
.c-nom { fill: none; stroke: var(--laiton-clair); stroke-width: 3.5; stroke-linecap: round; }
.c-banque { fill: none; stroke: var(--sur-nuit); stroke-width: 2.5; stroke-dasharray: 7 6; stroke-linecap: round; }
.c-arret { stroke: var(--sur-nuit); stroke-width: 2.5; }
.c-repere { fill: var(--nuit-2); stroke: var(--sur-nuit); stroke-width: 2.5; }
.c-etiquette { fill: var(--blanc); font: 600 15px var(--sans); }
.c-etiquette-2 { fill: var(--sur-nuit-2); font: 500 13.5px var(--sans); }
.c-etiquette-laiton { fill: var(--laiton-clair); font: 600 15px var(--sans); }
@media (max-width: 599px) {
  .c-axe-texte { font-size: 16px; }
  .c-etiquette, .c-etiquette-laiton { font-size: 18px; }
  .c-etiquette-2 { font-size: 15.5px; }
}

/* Séquence d'ouverture : seulement si l'utilisateur accepte le mouvement */
@media (prefers-reduced-motion: no-preference) {
  .js .anim-titre > * {
    opacity: 0;
    transform: translateY(18px);
    animation: monter var(--duree-long) var(--sortie) forwards;
  }
  .js .anim-titre > :nth-child(2) { animation-delay: 120ms; }
  .js .anim-titre > :nth-child(3) { animation-delay: 240ms; }
  .js .anim-titre > :nth-child(4) { animation-delay: 360ms; }

  .js .courbes { opacity: 0; animation: apparaitre 700ms var(--sortie) 200ms forwards; }
  .js .courbes .c-nom { stroke-dasharray: 1; stroke-dashoffset: 1; animation: tracer 1300ms var(--sortie) 600ms forwards; }
  /* La ligne de la banque est pointillée : on la révèle avec un masque qui glisse */
  .js .courbes .c-masque-rect { transform: scaleX(0); transform-origin: 48px 0; animation: balayer 1700ms cubic-bezier(.45,0,.25,1) 700ms forwards; }
  .js .courbes .c-ecart,
  .js .courbes .c-etape { opacity: 0; animation: apparaitre 700ms ease 2300ms forwards; }
  .js .courbes .c-etape-2 { animation-delay: 2600ms; }
  /* En pause tant que le graphique n'est pas à l'écran (utile sur téléphone) */
  .js .courbes, .js .courbes * { animation-play-state: paused; }
  .js .courbes.joue, .js .courbes.joue * { animation-play-state: running; }
}

@keyframes monter { to { opacity: 1; transform: none; } }
@keyframes apparaitre { to { opacity: 1; } }
@keyframes tracer { to { stroke-dashoffset: 0; } }
@keyframes balayer { to { transform: scaleX(1); } }

/* ---------- Bande de preuves ---------- */

.preuves { border-bottom: 1px solid var(--ligne); background: var(--fond); }
.preuves-liste {
  list-style: none; margin: 0; padding: var(--s3) 0;
  display: grid; gap: var(--s2) var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.preuves-liste li { display: flex; align-items: center; gap: 0.75rem; font-size: var(--t-s); color: var(--texte-2); }
.preuves-liste strong { color: var(--texte); font-weight: 600; }
.preuves-icone { width: 1.5rem; height: 1.5rem; color: var(--laiton); flex: none; }
.etoiles { display: inline-flex; gap: 1px; color: var(--laiton); }
.etoiles svg { width: 0.95rem; height: 0.95rem; }

/* ---------- Ce que ton relevé ne dit pas ---------- */

.deux-colonnes { display: grid; gap: var(--s5); }
@media (min-width: 900px) {
  .deux-colonnes { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--s6); }
  .colle { position: sticky; top: 7rem; align-self: start; }
}

.constats { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.constat {
  position: relative;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--s3);
  padding: var(--s4) 0;
}
.constat::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--ligne); transform-origin: left; }
.constat:last-child { border-bottom: 1px solid var(--ligne); }
.constat-icone { width: 3rem; height: 3rem; border-radius: 50%; background: var(--pierre); display: grid; place-items: center; color: var(--nuit); }
.section-pierre .constat-icone { background: var(--fond); }
.constat-icone svg { width: 1.375rem; height: 1.375rem; }
.constat h3 { font-size: var(--t-l); font-family: var(--serif); font-weight: 600; margin-bottom: var(--s1); }
.constat p { color: var(--texte-2); }
.renvoi { font-size: var(--t-xs); color: var(--texte-2); }

/* ---------- Tableau comparatif ---------- */

.compare {
  display: grid;
  border-radius: var(--r-grand);
  overflow: hidden;
  box-shadow: var(--ombre);
  background: var(--blanc);
}
@media (min-width: 760px) { .compare { grid-template-columns: 1fr 1fr; } }
.compare-col { padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.compare-col h3 { font-size: var(--t-xl); margin-bottom: var(--s1); }
.compare-sous { font-size: var(--t-s); color: var(--texte-2); margin-bottom: var(--s3); }
.compare-banque { background: var(--blanc); }
.compare-nom { background: var(--nuit); color: var(--sur-nuit); }
.compare-nom h3 { color: var(--blanc); }
.compare-nom .compare-sous { color: var(--sur-nuit-2); }
.compare-liste { list-style: none; margin: 0; padding: 0; }
.compare-liste li { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.75rem; padding: 0.875rem 0; border-top: 1px solid var(--ligne); }
.compare-nom .compare-liste li { border-color: var(--nuit-ligne); }
.compare-liste svg { width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; }
.compare-banque svg { color: var(--texte-2); }
.compare-nom svg { color: var(--laiton-clair); }
.compare-terme { display: block; font-size: var(--t-xs); color: var(--texte-2); }
.compare-nom .compare-terme { color: var(--sur-nuit-2); }
.compare-liste strong { font-weight: 600; }
.compare-note { margin-top: var(--s3); font-size: var(--t-s); color: var(--texte-2); max-width: 46rem; }

/* ---------- Deux situations ---------- */

.situations { display: grid; gap: var(--s3); }
@media (min-width: 820px) { .situations { grid-template-columns: 1fr 1fr; } }
.situation {
  display: flex; flex-direction: column;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border: 1px solid var(--ligne);
  border-radius: var(--r-moyen);
  background: var(--fond);
}
.situation h3 { margin-bottom: var(--s2); }
.situation ul { margin: 0 0 var(--s4); padding-left: 1.1rem; color: var(--texte-2); }
.situation li { margin-bottom: 0.5rem; }
.situation li::marker { color: var(--laiton); }
.situation .bouton { margin-top: auto; align-self: flex-start; }

/* ---------- Bloc calculateur (aperçu) ---------- */

.apercu-calc {
  display: grid; gap: var(--s4); align-items: center;
  padding: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  border-radius: var(--r-grand);
  background: var(--nuit);
  color: var(--sur-nuit);
}
@media (min-width: 860px) { .apercu-calc { grid-template-columns: 1.2fr 1fr; } }
.apercu-calc h2 { color: var(--blanc); font-size: var(--t-2xl); margin-bottom: var(--s2); }
.apercu-calc p { color: var(--sur-nuit-2); }
.apercu-calc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.apercu-calc li { display: flex; gap: 0.75rem; align-items: flex-start; }
.apercu-calc li svg { width: 1.25rem; height: 1.25rem; color: var(--laiton-clair); flex: none; margin-top: 0.2rem; }

/* ---------- Portrait / à propos ---------- */

.portrait-bloc { display: grid; gap: var(--s5); align-items: center; }
@media (min-width: 900px) { .portrait-bloc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); } }
.portrait-photo { position: relative; }
.portrait-photo picture, .portrait-photo img { border-radius: var(--r-moyen); }
.portrait-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.portrait-photo-vertical img { aspect-ratio: 4 / 5; object-position: 50% 20%; }
.citation {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--t-xl);
  line-height: 1.35;
  color: var(--nuit);
  font-style: italic;
  font-weight: 400;
  padding-left: var(--s3);
  border-left: 2px solid var(--laiton);
}
.citation footer { margin-top: var(--s2); font: 500 var(--t-s) var(--sans); font-style: normal; color: var(--texte-2); }
.portrait-texte h2 { margin-bottom: var(--s3); }
.portrait-texte p { color: var(--texte-2); max-width: var(--texte-max); }
.portrait-texte .citation { margin-block: var(--s4); }
.titres-pro { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: 0.5rem; font-size: var(--t-s); color: var(--texte-2); }
.titres-pro li { display: flex; gap: 0.625rem; align-items: center; }
.titres-pro svg { width: 1.125rem; height: 1.125rem; color: var(--laiton); flex: none; }

/* ---------- Avis ---------- */

.avis-entete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--s3); margin-bottom: var(--s5); }
.avis-entete .intro { margin-bottom: 0; }
.avis-note { display: flex; align-items: center; gap: 0.75rem; font-size: var(--t-s); color: var(--texte-2); }
.avis-note strong { font-family: var(--serif); font-size: 2.25rem; font-weight: 500; color: var(--nuit); line-height: 1; }
.avis-grille { display: grid; gap: var(--s3); }
@media (min-width: 860px) { .avis-grille { grid-template-columns: repeat(3, 1fr); } }
.avis {
  margin: 0;
  display: flex; flex-direction: column; gap: var(--s3);
  padding: var(--s4);
  background: var(--blanc);
  border-radius: var(--r-moyen);
  box-shadow: var(--ombre);
}
.avis blockquote { margin: 0; font-size: var(--t-m); line-height: 1.6; color: var(--texte); }
.avis figcaption { margin-top: auto; display: flex; justify-content: space-between; align-items: center; font-size: var(--t-s); color: var(--texte-2); }
.avis figcaption strong { color: var(--texte); }
.avis-pied { margin-top: var(--s4); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: center; font-size: var(--t-xs); color: var(--texte-2); }

/* ---------- Étapes (vraie séquence) ---------- */

.etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); counter-reset: etape; }
@media (min-width: 860px) { .etapes { grid-template-columns: repeat(3, 1fr); gap: var(--s5); } }
.etape { counter-increment: etape; position: relative; padding-top: var(--s4); border-top: 1px solid var(--nuit-ligne); }
.section:not(.section-nuit) .etape { border-color: var(--ligne); }
.etape::before {
  content: counter(etape);
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; margin-bottom: var(--s3);
  border: 1px solid var(--laiton-clair); border-radius: 50%;
  font: 500 1.125rem var(--serif); color: var(--laiton-clair);
}
.section:not(.section-nuit) .etape::before { border-color: var(--laiton); color: var(--laiton-texte); }
.etape h3 { font-size: var(--t-l); font-weight: 600; margin-bottom: var(--s1); }
.etape p { color: var(--sur-nuit-2); }
.section:not(.section-nuit) .etape p { color: var(--texte-2); }

/* ---------- Grand appel à l'action ---------- */

.appel-final { text-align: left; }
.appel-final-in { display: grid; gap: var(--s4); align-items: end; }
@media (min-width: 860px) { .appel-final-in { grid-template-columns: 1.4fr 1fr; } }
.appel-final h2 { font-size: var(--t-3xl); max-width: 14ch; }
.appel-final .actions { justify-content: flex-start; }
.appel-coord { margin-top: var(--s3); font-size: var(--t-s); color: var(--sur-nuit-2); }
.appel-coord a { color: var(--blanc); }

/* ---------- En-têtes de pages intérieures ---------- */

.page-entete { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(2rem, 1.5rem + 3vw, 4rem); border-bottom: 1px solid var(--ligne); }
.page-entete h1 { font-size: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem); max-width: 18ch; }
.page-entete .chapeau { margin-top: var(--s3); max-width: 40rem; }
.fil { font-size: var(--t-s); color: var(--texte-2); margin-bottom: var(--s3); }
.fil a { color: var(--texte-2); }

/* ---------- Texte long (articles, légal) ---------- */

.prose { max-width: 42rem; }
.prose h2 { font-size: var(--t-xl); margin: var(--s5) 0 var(--s2); }
.prose h3 { font-size: var(--t-l); font-family: var(--sans); font-weight: 600; margin: var(--s4) 0 var(--s1); letter-spacing: 0; }
.prose p, .prose li { color: var(--texte); line-height: 1.7; }
.prose ul, .prose ol { padding-left: 1.25rem; margin: 0 0 1.25em; }
.prose li { margin-bottom: 0.5rem; }
.prose li::marker { color: var(--laiton); }
.prose blockquote { margin: var(--s4) 0; padding: var(--s3); background: var(--pierre); border-radius: var(--r-moyen); }
.prose .encadre { margin: var(--s4) 0; padding: var(--s3) var(--s4); border-left: 3px solid var(--laiton); background: var(--pierre); border-radius: 0 var(--r-moyen) var(--r-moyen) 0; }
.prose .encadre p:last-child { margin: 0; }
.prose dl { display: grid; gap: 0.25rem 1.5rem; margin: 0 0 1.5em; }
@media (min-width: 640px) { .prose dl { grid-template-columns: 11rem 1fr; } }
.prose dt { font-weight: 600; }
.prose dd { margin: 0 0 0.5rem; color: var(--texte-2); }

.article-meta { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); font-size: var(--t-s); color: var(--texte-2); margin-top: var(--s3); }
.article-cta { margin-top: var(--s6); padding: var(--s4); background: var(--nuit); color: var(--sur-nuit); border-radius: var(--r-moyen); }
.article-cta h2 { color: var(--blanc); font-size: var(--t-xl); margin: 0 0 var(--s2); }
.article-cta p { color: var(--sur-nuit-2); }
.article-cta .actions { margin-top: var(--s3); }

/* ---------- Blogue ---------- */

.billets { display: grid; gap: var(--s3); }
@media (min-width: 860px) { .billets { grid-template-columns: repeat(3, 1fr); } }
.billet {
  position: relative;
  display: flex; flex-direction: column; gap: var(--s2);
  padding: var(--s4);
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--r-moyen);
  transition: border-color var(--duree-court) ease, transform var(--duree-moyen) var(--sortie);
}
.billet:hover { border-color: var(--nuit); }
.billet-sujet { font-size: var(--t-s); color: var(--laiton-texte); font-weight: 600; }
.billet h2 { font-size: var(--t-l); line-height: 1.25; }
.billet h2 a { text-decoration: none; color: var(--nuit); }
.billet h2 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.billet p { color: var(--texte-2); font-size: var(--t-s); }
.billet-temps { margin-top: auto; font-size: var(--t-xs); color: var(--texte-2); }

/* ---------- FAQ ---------- */

.faq-groupe + .faq-groupe { margin-top: var(--s6); }
.faq-groupe > h2 { font-size: var(--t-xl); margin-bottom: var(--s3); }
.faq { border-top: 1px solid var(--ligne); }
.faq details { border-bottom: 1px solid var(--ligne); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s3);
  padding: var(--s3) 0;
  min-height: 3.5rem;
  font-family: var(--serif); font-size: var(--t-l); font-weight: 500; color: var(--nuit);
  cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq-plus { position: relative; width: 1.75rem; height: 1.75rem; flex: none; border: 1px solid var(--ligne); border-radius: 50%; }
.faq-plus::before, .faq-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: var(--nuit); transform: translate(-50%, -50%); transition: transform var(--duree-moyen) var(--sortie); }
.faq-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq details[open] .faq-plus::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-reponse { padding: 0 0 var(--s3); max-width: 44rem; color: var(--texte-2); }
@media (prefers-reduced-motion: no-preference) {
  .faq details[open] .faq-reponse { animation: deplier var(--duree-moyen) var(--sortie); }
}
@keyframes deplier { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- Rendez-vous ---------- */

.rdv-grille { display: grid; gap: var(--s5); align-items: start; }
@media (min-width: 900px) { .rdv-grille { grid-template-columns: 1.1fr 1fr; gap: var(--s6); } }
.rdv-carte {
  padding: clamp(1.75rem, 1rem + 2vw, 2.75rem);
  background: var(--nuit); color: var(--sur-nuit);
  border-radius: var(--r-grand);
}
.rdv-carte h2 { color: var(--blanc); font-size: var(--t-2xl); margin-bottom: var(--s2); }
.rdv-carte p { color: var(--sur-nuit-2); }
.rdv-carte .bouton { width: 100%; margin-top: var(--s4); min-height: 3.5rem; font-size: var(--t-m); }
.rdv-autres { margin-top: var(--s3); font-size: var(--t-s); color: var(--sur-nuit-2); }
.rdv-autres a { color: var(--blanc); }
.rdv-sujets { list-style: none; padding: 0; margin: 0 0 var(--s4); display: grid; gap: var(--s3); }
.rdv-sujets li { display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--s2); }
.rdv-sujets svg { width: 1.5rem; height: 1.5rem; color: var(--laiton); margin-top: 0.2rem; }
.rdv-sujets strong { display: block; font-size: var(--t-m); color: var(--texte); }
.rdv-sujets span { color: var(--texte-2); font-size: var(--t-s); }
.apporter { padding: var(--s4); background: var(--pierre); border-radius: var(--r-moyen); }
.apporter h3 { font-size: var(--t-l); margin-bottom: var(--s2); }
.apporter ul { margin: 0; padding-left: 1.1rem; color: var(--texte-2); }
.apporter li { margin-bottom: 0.4rem; }
.apporter li::marker { color: var(--laiton); }

/* ---------- Calculateur ---------- */

.calc { display: grid; gap: var(--s4); align-items: start; }
@media (min-width: 980px) { .calc { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--s5); } }
.calc-form {
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--r-grand);
}
@media (min-width: 980px) { .calc-form { position: sticky; top: 6.5rem; } }
.champ { display: grid; gap: 0.375rem; align-content: start; margin-bottom: var(--s3); }
.champ label, .champ legend { font-weight: 600; font-size: var(--t-s); color: var(--texte); }
.champ-aide { font-size: var(--t-xs); color: var(--texte-2); }
.champ-saisie { position: relative; display: flex; align-items: center; }
.champ input[type="text"], .champ input[type="number"], .champ select {
  width: 100%;
  min-height: 3rem;
  padding: 0.625rem 0.875rem;
  font: 500 var(--t-m) var(--sans);
  font-variant-numeric: tabular-nums;
  color: var(--texte);
  background: var(--fond);
  border: 1px solid var(--ligne);
  border-radius: var(--r-petit);
  appearance: none;
  transition: border-color var(--duree-court) ease, background-color var(--duree-court) ease;
}
.champ select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2313243D' stroke-width='1.6'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1.1rem;
  padding-right: 2.5rem;
}
.champ input:hover, .champ select:hover { border-color: var(--texte-2); }
.champ input:focus-visible, .champ select:focus-visible { background: var(--blanc); border-color: var(--focus); outline-offset: 1px; }
.champ-unite { position: absolute; right: 0.875rem; color: var(--texte-2); font-size: var(--t-s); pointer-events: none; }
.champ-saisie input { padding-right: 2.75rem; }
.champ[aria-invalid="true"] input, .champ input[aria-invalid="true"] { border-color: #a33a2b; }
.champ-erreur { font-size: var(--t-xs); color: #a33a2b; font-weight: 600; }
.champ-erreur:empty { display: none; }
.champs-2 { display: grid; gap: var(--s2); grid-template-columns: 1fr 1fr; align-items: start; }
.champs-2 .champ label { min-height: 2.6em; display: flex; align-items: flex-end; }
.champs-2 .champ { margin-bottom: var(--s3); }

.calc-resultat { display: grid; gap: var(--s3); }
.resume {
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  background: var(--nuit);
  color: var(--sur-nuit);
  border-radius: var(--r-grand);
}
.resume-titre { font-size: var(--t-s); color: var(--sur-nuit-2); margin-bottom: var(--s1); }
.resume-besoin { margin: 0; font-family: var(--serif); font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem); color: var(--blanc); line-height: 1.05; font-variant-numeric: tabular-nums; }
.resume-sous { margin-top: var(--s1); color: var(--sur-nuit-2); }
.resume-points { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: var(--s2); }
.resume-points li { display: grid; grid-template-columns: 1.25rem 1fr; gap: 0.75rem; padding-top: var(--s2); border-top: 1px solid var(--nuit-ligne); color: var(--sur-nuit); }
.resume-points svg { width: 1.25rem; height: 1.25rem; color: var(--laiton-clair); margin-top: 0.2rem; }
.resume-points strong { color: var(--blanc); font-variant-numeric: tabular-nums; }
.resume .bouton { margin-top: var(--s4); }

.graphe-bloc { padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r-grand); }
.graphe-bloc h2 { font-size: var(--t-l); margin-bottom: var(--s2); }
.graphe-legende { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); list-style: none; margin: 0 0 var(--s2); padding: 0; font-size: var(--t-s); color: var(--texte-2); }
.graphe-legende li { display: inline-flex; align-items: center; gap: 0.5rem; }
.leg-nom { width: 1.25rem; border-top: 3px solid var(--laiton); }
.leg-banque { width: 1.25rem; border-top: 2px dashed var(--nuit); }
.leg-ecart { width: 0.875rem; height: 0.875rem; background: rgba(168, 130, 63, 0.22); border: 1px solid var(--laiton); }
#graphe svg { width: 100%; height: auto; overflow: visible; }
.g-grille { stroke: #ebe6dd; }
.g-axe { fill: var(--texte-2); font: 500 12px var(--sans); font-variant-numeric: tabular-nums; }
.g-nom { fill: none; stroke: var(--laiton); stroke-width: 3; stroke-linejoin: round; }
.g-banque { fill: none; stroke: var(--nuit); stroke-width: 2; stroke-dasharray: 6 5; }
.g-ecart { fill: rgba(168, 130, 63, 0.16); }
.g-repere { stroke: #9a4b3c; stroke-width: 1.5; stroke-dasharray: 3 3; }
.g-repere-texte { fill: #8a3f31; font: 600 12px var(--sans); }
.g-anim { transition: d var(--duree-moyen) var(--sortie); }

.paliers { width: 100%; border-collapse: collapse; font-size: var(--t-s); font-variant-numeric: tabular-nums; margin-top: var(--s3); }
.paliers caption { text-align: left; font-weight: 600; margin-bottom: var(--s1); color: var(--texte); }
.paliers th, .paliers td { text-align: right; padding: 0.625rem 0.5rem; border-bottom: 1px solid var(--ligne); white-space: nowrap; }
@media (max-width: 480px) { .paliers th, .paliers td { padding: 0.5rem 0.25rem; } .paliers { font-size: var(--t-xs); } .graphe-bloc, .calc-form, .resume { border-radius: var(--r-moyen); } }
.paliers th:first-child, .paliers td:first-child { text-align: left; }
.paliers thead th { font-weight: 600; color: var(--texte-2); font-size: var(--t-xs); }
.paliers td.zero { color: #8a3f31; font-weight: 600; }
.tableau-defile { overflow-x: auto; }

.avertissement { font-size: var(--t-xs); color: var(--texte-2); line-height: 1.55; max-width: 52rem; }

/* ---------- Pied de page ---------- */

.pied { background: var(--nuit); color: var(--sur-nuit-2); border-top: 1px solid var(--nuit-ligne); }
.pied-in { max-width: calc(var(--page) + 2 * var(--gouttiere)); margin-inline: auto; padding: var(--s6) var(--gouttiere) var(--s4); }
.pied a { color: var(--sur-nuit); text-decoration: none; }
.pied a:hover { color: var(--laiton-clair); text-decoration: underline; }
.pied-appel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); padding-bottom: var(--s5); border-bottom: 1px solid var(--nuit-ligne); }
.pied-titre { font-family: var(--serif); font-size: var(--t-2xl); color: var(--blanc); line-height: 1.15; max-width: 18ch; margin: 0; }
.pied-grille { display: grid; gap: var(--s4); padding-block: 0 var(--s5); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.pied-h { font: 600 var(--t-s) var(--sans); color: var(--blanc); margin-bottom: var(--s2); letter-spacing: 0; }
.pied-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.625rem; font-size: var(--t-s); }
.pied-liste a { display: inline-block; padding-block: 0.125rem; }
.pied-bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2) var(--s4); padding-top: var(--s3); border-top: 1px solid var(--nuit-ligne); font-size: var(--t-xs); }
.pied-bas p { max-width: 44rem; margin: 0; }
.pied-legal { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); margin: 0; padding: 0; }
.pied-legal .lien-bouton { color: var(--sur-nuit); text-decoration: none; font-size: var(--t-xs); min-height: 1.5rem; }
.pied-legal .lien-bouton:hover { color: var(--laiton-clair); text-decoration: underline; }

/* ---------- Bannière de témoins ---------- */

.temoins {
  position: fixed; z-index: 60;
  left: var(--s2); right: var(--s2); bottom: var(--s2);
  max-width: 34rem;
  padding: var(--s3);
  background: var(--blanc);
  color: var(--texte);
  border: 1px solid var(--ligne);
  border-radius: var(--r-moyen);
  box-shadow: 0 20px 50px -20px rgba(19,36,61,.45);
  font-size: var(--t-s);
}
.temoins[hidden] { display: none; }
.temoins-actions { display: flex; gap: var(--s1); margin-top: var(--s2); }
.temoins-actions .bouton { flex: 1; min-height: 2.75rem; }
@media (prefers-reduced-motion: no-preference) {
  .temoins:not([hidden]) { animation: monter var(--duree-moyen) var(--sortie) both; }
}

/* ---------- Apparition au défilement ----------
   Pas un fondu uniforme : chaque type d'élément a son propre geste.
   - cartes et panneaux : montée très courte avec un léger redressement d'échelle
   - titres : dévoilés derrière un masque, comme une ligne qui se lève
   - photos : le cadre s'ouvre pendant que l'image recule
   - constats : le filet se trace, puis le texte arrive */

@media (prefers-reduced-motion: no-preference) {
  .js [data-revele] {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
    transform-origin: 50% 100%;
    transition: opacity 1s var(--expo), transform 1.2s var(--expo);
    transition-delay: calc(var(--rang, 0) * 90ms);
  }
  .js [data-revele].est-visible { opacity: 1; transform: none; }

  /* Blocs de texte */
  .js :is(.intro, .portrait-texte, .faq-groupe)[data-revele],
  .js h2[data-revele] { opacity: 1; transform: none; }
  .js :is(.intro, .portrait-texte, .faq-groupe)[data-revele] > h2,
  .js h2[data-revele] {
    clip-path: inset(0 0 100% 0);
    transform: translateY(0.4em);
    transition: clip-path 1.15s var(--expo), transform 1.15s var(--expo);
  }
  .js :is(.intro, .portrait-texte, .faq-groupe).est-visible > h2,
  .js h2[data-revele].est-visible { clip-path: inset(0 0 0 0); transform: none; }
  .js :is(.intro, .portrait-texte, .faq-groupe)[data-revele] > :not(h2) {
    opacity: 0;
    transition: opacity 1s var(--expo) 280ms;
  }
  .js :is(.intro, .portrait-texte, .faq-groupe).est-visible > :not(h2) { opacity: 1; }

  /* Photos */
  .js .portrait-photo[data-revele] { opacity: 1; transform: none; }
  .js .portrait-photo[data-revele] picture {
    display: block;
    clip-path: inset(7% 7% 7% 7% round var(--r-moyen));
    transition: clip-path 1.5s var(--expo);
  }
  .js .portrait-photo[data-revele] img { transform: scale(1.1); transition: transform 1.8s var(--expo); }
  .js .portrait-photo.est-visible picture { clip-path: inset(0 0 0 0 round var(--r-moyen)); }
  .js .portrait-photo.est-visible img { transform: none; }

  /* Constats */
  .js .constat[data-revele] { opacity: 1; transform: none; }
  .js .constat[data-revele]::before { transform: scaleX(0); transition: transform 1.3s var(--expo) calc(var(--rang, 0) * 90ms); }
  .js .constat.est-visible::before { transform: scaleX(1); }
  .js .constat[data-revele] > * { opacity: 0; transform: translateY(8px); transition: opacity 0.9s var(--expo) 0.35s, transform 0.9s var(--expo) 0.35s; }
  .js .constat.est-visible > * { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* ---------- Impression ---------- */

@media print {
  .entete, .pied, .temoins, .menu-bouton, .actions, .bouton { display: none !important; }
  .heros, .section-nuit, .resume, .compare-nom { background: none !important; color: #000 !important; }
  body { background: #fff; }
}

/* ==========================================================
   FINITIONS
   Rien de plus à l'écran : de la matière, de la lumière et
   des gestes précis. Tout reste sobre et respecte le réglage
   « réduire les animations ».
   ========================================================== */

:root {
  /* Grain de papier, à peine perceptible : il enlève l'aspect « écran plat » */
  --grain-papier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.1 0 0 0 0 0.15 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  --grain-nuit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");

  /* Ombres en couches : un contour presque invisible, un contact, une diffusion */
  --ombre-fine: 0 0 0 1px rgba(19, 36, 61, 0.06), 0 1px 2px rgba(19, 36, 61, 0.04), 0 12px 32px -16px rgba(19, 36, 61, 0.22);
  --ombre-haute: 0 0 0 1px rgba(19, 36, 61, 0.08), 0 2px 4px rgba(19, 36, 61, 0.05), 0 28px 56px -24px rgba(19, 36, 61, 0.34);
  --reflet: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

::selection { background: rgba(210, 176, 113, 0.38); color: var(--nuit); }

/* ---------- Fonds ---------- */

body { background: var(--grain-papier), var(--fond); }

.section-pierre {
  background:
    var(--grain-papier),
    radial-gradient(120% 90% at 12% 0%, rgba(248, 245, 239, 0.9) 0%, rgba(248, 245, 239, 0) 55%),
    linear-gradient(180deg, #f0ebe3 0%, #ebe5da 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(19, 36, 61, 0.04);
}

/* Bleu nuit : une lumière laiton très lointaine en haut à droite,
   une profondeur plus froide en bas à gauche */
.section-nuit, .pied {
  background:
    var(--grain-nuit),
    radial-gradient(70% 60% at 88% 0%, rgba(210, 176, 113, 0.08), rgba(210, 176, 113, 0) 70%),
    radial-gradient(80% 70% at 0% 100%, rgba(44, 72, 112, 0.55), rgba(44, 72, 112, 0) 70%),
    var(--nuit);
}

.preuves { background: transparent; }
@media (min-width: 1024px) {
  .preuves-liste li + li { padding-left: var(--s4); border-left: 1px solid var(--ligne); }
}

/* ---------- Panneaux bleu nuit : une lueur suit le pointeur ---------- */

@property --lueur { syntax: "<number>"; inherits: false; initial-value: 0; }

:is(.compare-nom, .apercu-calc, .resume, .rdv-carte, .article-cta) { --base: var(--nuit); }
.courbes { --base: var(--nuit-2); }
:is(.compare-nom, .apercu-calc, .resume, .rdv-carte, .article-cta, .courbes) {
  background:
    radial-gradient(520px circle at var(--mx, 70%) var(--my, 0%), rgb(210 176 113 / calc(0.05 + var(--lueur) * 0.08)), rgb(210 176 113 / 0) 65%),
    var(--grain-nuit),
    var(--base);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition: --lueur 0.7s ease;
}
@media (hover: hover) and (pointer: fine) {
  :is(.compare-nom, .apercu-calc, .resume, .rdv-carte, .article-cta, .courbes):hover { --lueur: 1; }
}

/* ---------- Cartes ---------- */

.compare { box-shadow: var(--ombre-haute); }
.compare-banque { background: linear-gradient(180deg, #fff 0%, #fcfbf8 100%); }

.avis {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, #fdfcf9 100%);
  box-shadow: var(--reflet), var(--ombre-fine);
  transition: transform 0.7s var(--expo), box-shadow 0.7s var(--expo);
}
/* Grand guillemet laiton, comme un filigrane */
.avis::before {
  content: "\201C";
  position: absolute;
  top: 0.75rem;
  right: 1.1rem;
  font: 400 5.5rem/0.8 var(--serif);
  color: var(--laiton);
  opacity: 0.14;
  pointer-events: none;
}

.situation, .billet {
  position: relative;
  border: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.7) 100%);
  box-shadow: var(--reflet), var(--ombre-fine);
  transition: transform 0.7s var(--expo), box-shadow 0.7s var(--expo);
}
/* Un filet laiton se déploie en haut de la carte au survol */
.situation::before, .billet::before {
  content: "";
  position: absolute;
  top: 0; left: var(--s4); right: var(--s4);
  height: 2px;
  background: var(--laiton);
  transform: scaleX(0.14);
  transform-origin: left;
  transition: transform 0.9s var(--expo);
}
.billet:hover { border-color: transparent; }

@media (hover: hover) and (pointer: fine) {
  .avis:hover, .situation:hover, .billet:hover { transform: translateY(-3px); box-shadow: var(--reflet), var(--ombre-haute); }
  .situation:hover::before, .billet:hover::before { transform: scaleX(1); }
}
@media (hover: none) {
  .avis:active, .situation:active, .billet:active { transform: scale(0.99); transition-duration: 0.2s; }
}

.graphe-bloc, .calc-form { border-color: transparent; box-shadow: var(--reflet), var(--ombre-fine); }
.apporter { background: var(--grain-papier), linear-gradient(180deg, #f0ebe3, #ebe5da); }

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

.bouton {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.45s var(--expo), border-color 0.45s var(--expo), transform 0.25s var(--expo), box-shadow 0.45s var(--expo);
}
.bouton-plein { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 6px 16px -10px rgba(19, 36, 61, 0.6); }
.bouton-laiton {
  background: linear-gradient(180deg, #dcbd84 0%, #cba763 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 6px 18px -10px rgba(168, 130, 63, 0.7);
}
.bouton-plein:hover { background: var(--nuit); }
.bouton-laiton:hover { background: linear-gradient(180deg, #dcbd84 0%, #cba763 100%); }

/* Reflet qui traverse le bouton une fois, au survol */
.bouton-plein::after, .bouton-laiton::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.28) 48%, rgba(255, 255, 255, 0.05) 56%, transparent 70%);
  transform: translateX(-130%);
  pointer-events: none;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .bouton-plein:hover::after, .bouton-laiton:hover::after { transform: translateX(130%); transition: transform 1s var(--expo); }
}

/* Bouton contour : il se remplit depuis le bas */
.bouton-contour::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--nuit);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform 0.6s var(--expo);
}
.bouton-contour:hover, .section-nuit .bouton-contour:hover, .heros .bouton-contour:hover { background: transparent; }
.bouton-contour:hover::before { transform: scaleY(1); }
.section-nuit .bouton-contour::before, .heros .bouton-contour::before { background: var(--blanc); }

.bouton:active { transform: scale(0.975); }

/* ---------- Liens soulignés : le trait se retire puis se redessine ---------- */

.lien-fleche {
  text-decoration: none;
  padding-bottom: 3px;
  background: linear-gradient(var(--laiton), var(--laiton)) left 100% / 100% 1.5px no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  .lien-fleche:hover { animation: souligner 0.9s var(--expo); }
}
@keyframes souligner {
  0% { background-size: 100% 1.5px; background-position: right 100%; }
  42% { background-size: 0% 1.5px; background-position: right 100%; }
  43% { background-size: 0% 1.5px; background-position: left 100%; }
  100% { background-size: 100% 1.5px; background-position: left 100%; }
}

/* ---------- En-tête ---------- */

.entete {
  transition: transform 0.6s var(--expo), border-color 0.5s ease, box-shadow 0.5s ease, background-color 0.5s ease;
}
@supports (backdrop-filter: blur(1px)) {
  .entete { background: rgba(251, 250, 247, 0.84); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); }
}
/* Il s'efface quand on descend, revient dès qu'on remonte */
.entete.est-cache:not(:focus-within) { transform: translateY(-101%); }

/* ---------- Questions : ouverture en douceur ---------- */

@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq details::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 0.55s var(--expo), content-visibility 0.55s allow-discrete;
  }
  .faq details[open]::details-content { block-size: auto; }
}
.faq summary { transition: color 0.3s ease; }
.faq summary:hover { color: var(--laiton-texte); }
.faq-plus { transition: border-color 0.4s ease, background-color 0.4s ease; }
.faq summary:hover .faq-plus { border-color: var(--laiton); }

/* ---------- Calculateur : les chiffres se posent quand ils changent ---------- */

@media (prefers-reduced-motion: no-preference) {
  .maj { animation: se-poser 0.6s var(--expo); }
}
@keyframes se-poser { from { opacity: 0.25; transform: translateY(0.18em); } }
.resume-besoin { display: inline-block; }

/* ---------- Transition entre les pages ---------- */

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .entete { view-transition-name: entete; }
  ::view-transition-old(root) { animation: 0.28s ease both page-sortie; }
  ::view-transition-new(root) { animation: 0.6s var(--expo) both page-entree; }
}
@keyframes page-sortie { to { opacity: 0; } }
@keyframes page-entree { from { opacity: 0; transform: translateY(10px); } }

/* ---------- Avis : un témoignage en vedette, deux en appui ---------- */

.avis-vedette { display: grid; gap: var(--s5); align-items: center; }
@media (min-width: 900px) { .avis-vedette { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--s6); } }
.avis-principal { position: relative; margin: 0; padding-top: var(--s4); }
.avis-principal::before {
  content: "\201C";
  position: absolute; top: -0.12em; left: -0.06em;
  font: 400 7.5rem/1 var(--serif);
  color: var(--laiton);
  opacity: 0.5;
  pointer-events: none;
}
.avis-principal .etoiles { position: relative; gap: 3px; }
.avis-principal .etoiles svg { width: 1.05rem; height: 1.05rem; }
.avis-principal blockquote {
  margin: var(--s3) 0 0;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.05rem + 1.7vw, 2.3rem);
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--nuit);
  max-width: 26ch;
}
.avis-principal figcaption { margin-top: var(--s4); display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; font-size: var(--t-s); color: var(--texte-2); }
.avis-principal figcaption::before { content: ""; width: 2rem; height: 1px; background: var(--laiton); }
.avis-principal figcaption strong { color: var(--texte); }
.avis-secondaires { display: grid; gap: var(--s3); }
.avis-secondaires .avis { padding: var(--s3) var(--s4); gap: var(--s2); }
.avis-secondaires .avis blockquote { font-size: var(--t-s); line-height: 1.6; color: var(--texte-2); }
.avis-secondaires .avis::before { font-size: 4rem; top: 0.6rem; right: 0.9rem; }

/* ---------- Étapes : une ligne de temps qui relie les trois moments ---------- */

.etape { position: relative; border-top: 0; padding-top: 0; }
.etape::before { position: relative; z-index: 1; background: var(--nuit); }
.etape:not(:last-child)::after {
  content: "";
  position: absolute;
  background: linear-gradient(90deg, rgba(210, 176, 113, 0.6), rgba(210, 176, 113, 0.18));
}
@media (min-width: 860px) {
  .etape:not(:last-child)::after { top: 1.25rem; left: 3.25rem; right: calc(-1 * var(--s5) + 0.75rem); height: 1px; transform-origin: left; }
}
@media (max-width: 859px) {
  .etapes { gap: var(--s4); }
  .etape { padding-left: 3.75rem; min-height: 2.5rem; }
  .etape::before { position: absolute; left: 0; top: 0; margin: 0; }
  .etape h3 { padding-top: 0.35rem; }
  .etape:not(:last-child)::after {
    top: 3.25rem; bottom: calc(-1 * var(--s4) + 0.75rem); left: 1.25rem; width: 1px;
    background: linear-gradient(180deg, rgba(210, 176, 113, 0.6), rgba(210, 176, 113, 0.18));
    transform-origin: top;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .js .etape[data-revele]:not(:last-child)::after { transform: scale(0, 1); transition: transform 1.4s var(--expo) calc(0.45s + var(--rang, 0) * 90ms); }
  .js .etape.est-visible:not(:last-child)::after { transform: none; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 859px) {
  .js .etape[data-revele]:not(:last-child)::after { transform: scale(1, 0); }
}

/* ---------- Rendez-vous : calendrier intégré ---------- */

.rdv-calendrier {
  padding: clamp(1.25rem, 0.75rem + 2vw, 2rem);
  background: linear-gradient(180deg, #fff 0%, #fdfcf9 100%);
  border-radius: var(--r-grand);
  box-shadow: var(--reflet), var(--ombre-haute);
}
.rdv-calendrier-entete { padding: 0 0.25rem var(--s3); border-bottom: 1px solid var(--ligne); margin-bottom: var(--s2); }
.rdv-calendrier-entete h2 { font-size: var(--t-xl); margin-bottom: var(--s1); }
.rdv-calendrier-entete p { color: var(--texte-2); font-size: var(--t-s); }
.rdv-cadre { position: relative; min-height: 640px; }
.rdv-cadre iframe { position: relative; z-index: 1; display: block; width: 100%; height: 820px; border: 0; background: transparent; }
.rdv-chargement { position: absolute; inset: 0; display: grid; place-items: center; color: var(--texte-2); font-size: var(--t-s); }
.rdv-calendrier .rdv-autres { color: var(--texte-2); }
.rdv-calendrier .rdv-autres a { color: var(--nuit); }
@media (max-width: 899px) {
  .rdv-grille { display: flex; flex-direction: column; }
  .rdv-calendrier { order: -1; }
  .rdv-cadre iframe { height: 900px; }
}

/* ==========================================================
   ESTIMÉ (page Calculateur) — moteur dans static/js/estimateur.js
   ========================================================== */

.est-grille { display: grid; gap: var(--s4); align-items: start; }
@media (min-width: 980px) { .est-grille { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); gap: var(--s5); } }

.est-carte { border-radius: var(--r-grand); overflow: hidden; }
.est-form { background: linear-gradient(180deg, #fff 0%, #fdfcf9 100%); box-shadow: var(--reflet), var(--ombre-fine); }
.est-tete { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); padding: var(--s3) clamp(1.25rem, 1rem + 1vw, 1.75rem); border-bottom: 1px solid var(--ligne); }
.est-tete h2 { font-size: var(--t-l); }
.est-tete span { font-size: var(--t-xs); color: var(--texte-2); font-variant-numeric: tabular-nums; }

.est-rangee { display: grid; gap: 0.75rem; padding: var(--s3) clamp(1.25rem, 1rem + 1vw, 1.75rem); border-bottom: 1px solid var(--ligne); }
.est-rangee:last-child { border-bottom: 0; }
.est-q { display: flex; align-items: center; gap: 0.625rem; font-weight: 600; font-size: var(--t-m); color: var(--texte); }
.est-num { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1px solid var(--laiton); color: var(--laiton-texte); font: 500 0.85rem var(--serif); flex: none; }
.est-sous { font-size: var(--t-s); font-weight: 600; color: var(--texte-2); }
.est-aide { font-size: var(--t-xs); color: var(--texte-2); line-height: 1.5; }
.est-aide[hidden] { display: none; }
.est-note { color: var(--laiton-texte); }
.sousbloc { display: grid; gap: 0.5rem; }
.est-rangee > .sousbloc { padding-left: 2.25rem; }
@media (max-width: 600px) { .est-rangee > .sousbloc { padding-left: 0; } }

/* La question du coemprunteur change le produit et le prix : elle se distingue */
.est-cle { position: relative; background: linear-gradient(90deg, rgba(210, 176, 113, 0.12) 0%, rgba(210, 176, 113, 0) 60%); }
.est-cle::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--laiton); }
.est-conjoint { display: grid; gap: var(--s2); padding: var(--s3); border-radius: var(--r-moyen); background: var(--pierre); }
.est-conjoint[hidden] { display: none; }

/* Choix segmentés */
.seg { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.seg button {
  flex: 1 1 0; min-width: 6rem; min-height: 3rem; padding: 0.625rem 0.875rem;
  font: 500 var(--t-s) var(--sans); color: var(--texte);
  background: var(--fond); border: 1px solid var(--ligne); border-radius: var(--r-petit);
  cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none;
  transition: background-color 0.35s var(--expo), border-color 0.35s var(--expo), color 0.35s var(--expo), box-shadow 0.35s var(--expo), transform 0.2s var(--expo);
}
.seg button:hover { border-color: var(--nuit); }
.seg button:active { transform: scale(0.98); }
.seg button[aria-checked="true"] { background: var(--nuit); border-color: var(--nuit); color: var(--blanc); font-weight: 600; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 6px 14px -10px rgba(19, 36, 61, 0.7); }
.seg button small { display: block; font-size: 0.72rem; font-weight: 500; opacity: 0.75; margin-top: 2px; }

.est select, .est-demande input[type="text"], .est-demande input[type="email"], .est-demande input[type="tel"] {
  width: 100%; min-height: 3rem; padding: 0.625rem 0.875rem;
  font: 500 var(--t-m) var(--sans); color: var(--texte);
  background: var(--fond); border: 1px solid var(--ligne); border-radius: var(--r-petit);
}
.est select {
  appearance: none; padding-right: 2.5rem;
  background: var(--fond) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2313243D' stroke-width='1.6'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 0.75rem center / 1.1rem;
}
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; }

/* Montants en grand */
.est-montant { display: flex; align-items: baseline; gap: 0.5rem; padding-bottom: 0.375rem; border-bottom: 2px solid var(--ligne); transition: border-color 0.35s ease; }
.est-montant:focus-within { border-color: var(--laiton); }
.est-montant input { width: 100%; min-width: 0; border: 0; background: transparent; padding: 0.25rem 0; font: 500 clamp(1.9rem, 1.5rem + 1.6vw, 2.4rem)/1.1 var(--serif); color: var(--nuit); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.est-montant input:focus-visible { outline: none; }
.est-duree input { width: 2.6ch; flex: none; }
.est-unite { font-size: var(--t-l); color: var(--texte-2); }

/* Curseurs */
.est input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 2rem; background: transparent; cursor: pointer; }
.est input[type="range"]::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: var(--ligne); }
.est input[type="range"]::-moz-range-track { height: 3px; border-radius: 3px; background: var(--ligne); }
.est input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9.5px; border-radius: 50%; background: var(--nuit); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--laiton), 0 4px 10px -4px rgba(19, 36, 61, 0.6); transition: transform 0.25s var(--expo); }
.est input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--nuit); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--laiton); }
.est input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); }
@media (max-width: 979px) { .est input[type="range"] { height: 2.5rem; } }

/* ---------- Panneau de résultat ---------- */
.est-resultat { color: var(--sur-nuit); box-shadow: var(--ombre-haute); }
@media (min-width: 980px) { .est-resultat { position: sticky; top: 5.5rem; } }
.est-resultat .est-tete { border-color: var(--nuit-ligne); }
.est-resultat .est-tete h2 { color: var(--blanc); }
.est-resultat .est-tete span, .est-resultat .est-aide, .est-resultat .est-sous { color: var(--sur-nuit-2); }
.est-resultat > * { position: relative; }
.est-k { display: block; font-size: var(--t-xs); font-weight: 600; color: var(--laiton-clair); }

.est-exemple { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.875rem clamp(1.25rem, 1rem + 1vw, 1.75rem); background: rgba(210, 176, 113, 0.12); border-bottom: 1px solid var(--nuit-ligne); font-size: var(--t-xs); line-height: 1.5; }
.est-exemple[hidden] { display: none; }
.est-pastille { flex: none; padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--laiton-clair); color: var(--nuit); font-weight: 700; font-size: 0.7rem; }

.est-resume { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; padding: var(--s3) clamp(1.25rem, 1rem + 1vw, 1.75rem); border-bottom: 1px solid var(--nuit-ligne); }
.est-resume .est-k { flex: 0 0 100%; }
.est-v { font: 500 clamp(1.75rem, 1.4rem + 1.3vw, 2.2rem)/1.1 var(--serif); color: var(--blanc); font-variant-numeric: tabular-nums; }
.est-v.consigne { font: 600 var(--t-m) var(--sans); color: var(--sur-nuit-2); }
.est-contexte { font-size: var(--t-s); color: var(--sur-nuit-2); font-variant-numeric: tabular-nums; }

.est-info, .est-alerte { padding: 0.875rem clamp(1.25rem, 1rem + 1vw, 1.75rem); border-bottom: 1px solid var(--nuit-ligne); font-size: var(--t-s); line-height: 1.5; }
.est-info { display: grid; gap: 0.2rem; background: rgba(255, 255, 255, 0.03); }
.est-alerte { background: rgba(210, 176, 113, 0.14); color: #ecd9b2; }
.est-info[hidden], .est-alerte[hidden] { display: none; }

/* Les deux protections */
.opt {
  position: relative;
  display: grid; grid-template-columns: 1.375rem 1fr auto; gap: 0.875rem; align-items: center;
  padding: var(--s3) clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-bottom: 1px solid var(--nuit-ligne);
  cursor: pointer; touch-action: manipulation;
  transition: background-color 0.4s var(--expo);
}
.opt:hover { background: rgba(255, 255, 255, 0.035); }
.opt::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--laiton-clair); transform: scaleY(0); transition: transform 0.6s var(--expo); }
.opt[aria-checked="true"] { background: linear-gradient(90deg, rgba(210, 176, 113, 0.13) 0%, rgba(210, 176, 113, 0) 70%); }
.opt[aria-checked="true"]::before { transform: scaleY(1); }
.dot { position: relative; width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.45); transition: border-color 0.4s ease; }
.dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--laiton-clair); transform: scale(0); transition: transform 0.45s var(--expo); }
.opt[aria-checked="true"] .dot { border-color: var(--laiton-clair); }
.opt[aria-checked="true"] .dot::after { transform: scale(1); }
.opt .corps { display: grid; gap: 0.2rem; min-width: 0; }
.badge { width: fit-content; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.7rem; font-weight: 700; background: var(--laiton-clair); color: var(--nuit); -webkit-user-select: none; user-select: none; }
.badge-discret { background: rgba(255, 255, 255, 0.12); color: var(--sur-nuit); }
.opt .name { font-weight: 600; color: var(--blanc); -webkit-user-select: none; user-select: none; }
.opt .desc { font-size: var(--t-xs); color: var(--sur-nuit-2); line-height: 1.45; }
.price { text-align: right; white-space: nowrap; font: 500 clamp(1.5rem, 1.25rem + 0.9vw, 1.9rem)/1.05 var(--serif); color: var(--sur-nuit-2); font-variant-numeric: tabular-nums; transition: color 0.4s ease; }
.opt[aria-checked="true"] .price { color: var(--laiton-clair); }
.price .valeur { display: block; }
.price small { display: block; margin-top: 0.2rem; font: 500 var(--t-xs) var(--sans); color: var(--sur-nuit-2); }
@media (max-width: 600px) {
  .opt { grid-template-columns: 1.375rem 1fr; grid-template-areas: "dot corps" ". prix"; row-gap: 0.5rem; }
  .opt .dot { grid-area: dot; align-self: start; margin-top: 0.2rem; }
  .opt .corps { grid-area: corps; }
  .opt .price { grid-area: prix; text-align: left; }
}

.est-pourquoi { border-bottom: 1px solid var(--nuit-ligne); }
.est-pourquoi summary { display: flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; padding: 0.75rem clamp(1.25rem, 1rem + 1vw, 1.75rem); cursor: pointer; list-style: none; font-size: var(--t-s); font-weight: 600; color: var(--sur-nuit); }
.est-pourquoi summary::-webkit-details-marker { display: none; }
.est-pourquoi summary::after { content: ""; width: 0.5rem; height: 0.5rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 0.45s var(--expo); }
.est-pourquoi[open] summary::after { transform: rotate(-135deg); }
.est-pourquoi-rep { display: grid; gap: 0.6rem; padding: 0 clamp(1.25rem, 1rem + 1vw, 1.75rem) var(--s3); font-size: var(--t-s); color: var(--sur-nuit-2); }
.est-pourquoi-rep strong { color: var(--blanc); }

.est-comparer { display: grid; gap: 0.75rem; padding: var(--s3) clamp(1.25rem, 1rem + 1vw, 1.75rem); border-bottom: 1px solid var(--nuit-ligne); background: rgba(255, 255, 255, 0.025); }
.est-comparer h3 { font-size: var(--t-l); color: var(--blanc); }
.est-montant-sombre { border-color: rgba(255, 255, 255, 0.22); }
.est-montant-sombre input { color: var(--laiton-clair); font-size: 1.75rem; }
.est-montant-sombre input::placeholder { color: rgba(255, 255, 255, 0.3); }
.est-montant-sombre .est-unite { color: var(--sur-nuit-2); }
.seg-freq { display: grid; grid-template-columns: 1fr 1fr; }
.seg-freq button { min-width: 0; background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.18); color: var(--sur-nuit); line-height: 1.2; }
.seg-freq button:hover { border-color: rgba(255, 255, 255, 0.5); }
.seg-freq button[aria-checked="true"] { background: rgba(210, 176, 113, 0.16); border-color: var(--laiton-clair); color: var(--laiton-clair); box-shadow: none; }

.est-ecart { display: grid; gap: 0.2rem; padding: var(--s2) var(--s3); border-radius: var(--r-moyen); background: linear-gradient(135deg, rgba(210, 176, 113, 0.2), rgba(210, 176, 113, 0.06)); border: 1px solid rgba(210, 176, 113, 0.45); }
.est-ecart[hidden] { display: none; }
.est-ecart-v { font: 500 clamp(1.75rem, 1.4rem + 1.3vw, 2.2rem)/1.1 var(--serif); color: var(--blanc); font-variant-numeric: tabular-nums; }
.est-ecart-d { font-size: var(--t-xs); color: var(--sur-nuit-2); line-height: 1.5; }
.est-ecart.defavorable { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.2); }
.est-ecart.defavorable .est-k { color: var(--sur-nuit-2); }

.est-suite { display: grid; gap: 0.6rem; padding: var(--s3) clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.est-suite .bouton { width: 100%; min-height: 3.25rem; font-size: var(--t-m); }
.est-suite > .est-aide { text-align: center; }
.est-qui, .est-repond { display: flex; align-items: center; gap: 0.875rem; margin-top: 0.25rem; padding: 0.875rem; border-radius: var(--r-moyen); border: 1px solid var(--nuit-ligne); background: rgba(255, 255, 255, 0.03); }
.est-qui img, .est-repond img { width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; object-position: 50% 18%; flex: none; }
.est-qui > span, .est-repond > div { display: grid; gap: 0.1rem; font-size: var(--t-xs); color: var(--sur-nuit-2); }
.est-qui strong, .est-repond strong { color: var(--blanc); font-size: var(--t-s); }
.est-qui a, .est-repond a { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2rem; color: var(--laiton-clair); font-weight: 600; text-decoration: none; }
.est-qui a:hover, .est-repond a:hover { text-decoration: underline; }
.est-qui svg, .est-repond svg { width: 0.9rem; height: 0.9rem; }
.est-qui a[hidden], .est-repond a[hidden] { display: none; }

/* ---------- Couverture dans le temps ---------- */
.couv { display: grid; gap: var(--s4); align-items: start; }
@media (min-width: 980px) { .couv { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--s5); } }
.couv-constats { list-style: none; margin: 0 0 var(--s4); padding: 0; display: grid; gap: var(--s2); }
.couv-constats li { display: grid; grid-template-columns: 1.25rem 1fr; gap: 0.75rem; padding-top: var(--s2); border-top: 1px solid var(--ligne); color: var(--texte-2); }
.couv-constats svg { width: 1.25rem; height: 1.25rem; color: var(--laiton); margin-top: 0.2rem; }
.couv-constats strong { color: var(--nuit); font-variant-numeric: tabular-nums; }
.couv-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.couv-form .champ { margin: 0; }

/* ---------- Demande ---------- */
.est-final { scroll-margin-top: 1rem; }
.est-final-grille { display: grid; gap: var(--s5); align-items: start; }
@media (min-width: 900px) { .est-final-grille { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--s6); } }
.est-rappel { display: grid; gap: 0.35rem; }
.est-rappel-v { font: 500 clamp(2.5rem, 1.8rem + 3vw, 3.75rem)/1.05 var(--serif); color: var(--laiton-clair); font-variant-numeric: tabular-nums; }
.est-rappel-d { color: var(--sur-nuit-2); font-size: var(--t-s); }
.est-rappel-d[hidden] { display: none; }
.est-rappel .est-repond { margin-top: var(--s4); }

.est-demande { padding: clamp(1.5rem, 1rem + 2vw, 2.25rem); border-radius: var(--r-grand); background: linear-gradient(180deg, #fff 0%, #fdfcf9 100%); color: var(--texte); box-shadow: var(--reflet), 0 30px 60px -30px rgba(0, 0, 0, 0.55); }
.est-demande h2 { color: var(--nuit); font-size: var(--t-xl); margin-bottom: var(--s1); }
.cta, .rdv { display: grid; gap: 0.875rem; }
.cta[hidden], .rdv[hidden] { display: none; }
.est-sub { color: var(--texte-2); font-size: var(--t-s); }
.est-demande input:focus-visible { border-color: var(--laiton); outline-offset: 1px; }
.est-demande input.faute { border-color: #a33a2b; box-shadow: 0 0 0 3px rgba(163, 58, 43, 0.15); }
.est-province { display: grid; gap: 0.5rem; }
.consent { display: flex; gap: 0.75rem; align-items: flex-start; font-size: var(--t-xs); color: var(--texte-2); line-height: 1.5; cursor: pointer; }
.consent input { width: 1.375rem; height: 1.375rem; margin-top: 0.05rem; flex: none; accent-color: var(--nuit); }
.consent input.faute { outline: 2px solid #a33a2b; outline-offset: 2px; }
.est-envoi { width: 100%; min-height: 3.5rem; font-size: var(--t-m); }
.est-envoi:disabled { opacity: 0.6; cursor: not-allowed; }
.est-promesse { font-size: var(--t-xs); color: var(--texte-2); }
.est-promesse:empty { display: none; }
.est-msg { padding: 0.75rem 1rem; border-radius: var(--r-petit); background: rgba(210, 176, 113, 0.18); border: 1px solid rgba(168, 130, 63, 0.45); font-size: var(--t-s); font-weight: 600; color: var(--nuit); }
.est-msg[hidden] { display: none; }
.est-msg a { color: var(--nuit); }
.rdv { text-align: left; }
.rdv p { color: var(--texte-2); }
.rdv .bouton { width: 100%; }
.rdv .bouton.secondaire { background: transparent; color: var(--nuit); border: 1px solid var(--ligne); box-shadow: none; min-height: 2.75rem; font-size: var(--t-s); }
.est-cadre { border-radius: var(--r-moyen); overflow: hidden; border: 1px solid var(--ligne); }
.est-cadre[hidden] { display: none; }
.est-cadre iframe { display: block; width: 100%; height: min(78dvh, 760px); border: 0; }

.est-legal { margin-top: var(--s6); padding-top: var(--s3); border-top: 1px solid var(--ligne); display: grid; gap: 0.6rem; max-width: 52rem; font-size: var(--t-xs); color: var(--texte-2); line-height: 1.6; }
.est-sig { font-weight: 600; color: var(--texte); }

/* ---------- Barre collante (téléphone) ---------- */
.barre {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: none; align-items: center; gap: var(--s2);
  padding: 0.75rem var(--gouttiere) calc(0.75rem + env(safe-area-inset-bottom));
  background: var(--grain-nuit), var(--nuit);
  border-top: 1px solid rgba(210, 176, 113, 0.5);
  box-shadow: 0 -12px 30px -14px rgba(19, 36, 61, 0.6);
  transform: translateY(110%);
  transition: transform 0.55s var(--expo);
}
.barre.visible { transform: none; }
@media (max-width: 979px) { .barre { display: flex; } .page-estime .pied { padding-bottom: 5rem; } }
.barre .info { flex: 1; min-width: 0; }
.barre .quoi { font-size: var(--t-xs); color: var(--sur-nuit-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-user-select: none; user-select: none; }
.barre .combien { font: 500 1.35rem/1.15 var(--serif); color: var(--laiton-clair); font-variant-numeric: tabular-nums; }
.barre .combien span { font: 500 var(--t-xs) var(--sans); color: var(--sur-nuit-2); }
.barre .bouton { flex: none; min-height: 2.875rem; padding: 0 1.25rem; }
.est-resultat {
  background:
    var(--grain-nuit),
    radial-gradient(80% 45% at 100% 0%, rgba(210, 176, 113, 0.09), rgba(210, 176, 113, 0) 70%),
    var(--nuit);
}

/* ==========================================================
   FINITIONS, 2e PASSE
   ========================================================== */

/* Typographie : ligatures, crénage, guillemets suspendus */
body { font-feature-settings: "kern", "liga", "calt"; font-kerning: normal; }
blockquote, .citation { hanging-punctuation: first; }

/* ---------- Constats : un trait fin, plus d'icône dans un cercle ---------- */
.constat { grid-template-columns: 2.25rem minmax(0, 1fr); }
.constat-icone, .section-pierre .constat-icone { width: auto; height: auto; background: none; border-radius: 0; display: block; color: var(--laiton); padding-top: 0.2rem; }
.constat-icone svg { width: 1.6rem; height: 1.6rem; stroke-width: 1.25; }

/* ---------- Cartes de situation : pas de trait au repos ---------- */
.situation::before, .billet::before { transform: scaleX(0); }

/* ---------- Photos : un cadre laiton décalé et une légende ---------- */
.portrait-photo { isolation: isolate; }
.portrait-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid rgba(168, 130, 63, 0.55);
  border-radius: var(--r-moyen);
  transform: translate(14px, 14px);
  transition: transform 1.2s var(--expo);
}
@media (hover: hover) { .portrait-photo:hover::before { transform: translate(9px, 9px); } }
@media (prefers-reduced-motion: no-preference) {
  .js .portrait-photo[data-revele]::before { transform: translate(0, 0); opacity: 0; transition: transform 1.6s var(--expo) 0.5s, opacity 1s ease 0.5s; }
  .js .portrait-photo.est-visible::before { transform: translate(14px, 14px); opacity: 1; }
}
.portrait-legende { margin: calc(var(--s2) + 14px) 0 0; font: italic 400 var(--t-s)/1.4 var(--serif); color: var(--texte-2); }

/* Les images arrivent en fondu, jamais d'un coup */
.js img.fondu { opacity: 0; transition: opacity 0.9s ease; }
.js img.fondu.charge { opacity: 1; }

/* ---------- En-têtes des pages intérieures : de la profondeur ---------- */
.page-entete {
  position: relative;
  isolation: isolate;
  border-bottom: 0;
  background:
    radial-gradient(60% 120% at 92% 0%, rgba(210, 176, 113, 0.14), rgba(210, 176, 113, 0) 60%),
    linear-gradient(180deg, rgba(239, 235, 228, 0.55) 0%, rgba(239, 235, 228, 0) 100%);
}
/* Un filet qui s'éteint vers les bords, plutôt qu'une bordure pleine */
.page-entete::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(217, 210, 197, 0) 0%, var(--ligne) 20%, var(--ligne) 80%, rgba(217, 210, 197, 0) 100%);
}
.fil { font-size: var(--t-xs); }
.fil a { text-decoration: none; }
.fil a:hover { color: var(--laiton-texte); text-decoration: underline; }

/* Le grand titre se lève derrière un masque, comme les titres de section */
@media (prefers-reduced-motion: no-preference) {
  .js .anim-titre > h1 {
    opacity: 1;
    clip-path: inset(0 0 100% 0);
    transform: translateY(0.35em);
    animation: titre-leve 1.25s var(--expo) 0.1s forwards;
  }
}
@keyframes titre-leve { to { clip-path: inset(0 0 0 0); transform: none; } }

/* ---------- Menu mobile : les liens arrivent un à un ---------- */
@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
  .nav-liste.est-ouvert > li { animation: menu-entree 0.6s var(--expo) both; }
  .nav-liste.est-ouvert > li:nth-child(2) { animation-delay: 40ms; }
  .nav-liste.est-ouvert > li:nth-child(3) { animation-delay: 80ms; }
  .nav-liste.est-ouvert > li:nth-child(4) { animation-delay: 120ms; }
  .nav-liste.est-ouvert > li:nth-child(5) { animation-delay: 160ms; }
  .nav-liste.est-ouvert > li:nth-child(6) { animation-delay: 220ms; }
  .nav-liste.est-ouvert > li:nth-child(7) { animation-delay: 260ms; }
}
@keyframes menu-entree { from { opacity: 0; transform: translateY(10px); } }

/* ---------- Pied de page : une signature ---------- */
.pied {
  background:
    var(--grain-nuit),
    radial-gradient(60% 80% at 50% 0%, rgba(210, 176, 113, 0.07), rgba(210, 176, 113, 0) 70%),
    #0e1b2f;
}
.pied-signature { display: grid; justify-items: center; gap: 0.5rem; text-align: center; padding-bottom: var(--s5); margin-bottom: var(--s5); position: relative; }
.pied-signature::after { content: ""; position: absolute; bottom: 0; left: 50%; width: min(28rem, 80%); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, rgba(210, 176, 113, 0), rgba(210, 176, 113, 0.5), rgba(210, 176, 113, 0)); }
.pied-nom { margin: 0; font: 400 clamp(2rem, 1.4rem + 2.6vw, 3.25rem)/1 var(--serif); letter-spacing: -0.02em; color: var(--blanc); }
.pied-devise { margin: 0; font: italic 400 var(--t-m) var(--serif); color: var(--sur-nuit-2); }

/* ---------- Articles : un fil de lecture laiton ---------- */
.lecture { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 50; background: var(--laiton); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.portrait-photo::before { bottom: auto; aspect-ratio: 3 / 2; }
.portrait-photo-vertical::before { aspect-ratio: 4 / 5; }

/* ==========================================================
   MOBILE — composé pour le pouce, pas rétréci
   ========================================================== */

a, button, summary, [role="radio"], [role="tab"], label { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* Sélecteur du comparatif : seulement sur téléphone */
.compare-choix { display: none; }
@media (max-width: 759px) {
  .compare-choix {
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
    padding: 4px; margin-bottom: var(--s2);
    background: rgba(19, 36, 61, 0.06); border-radius: 999px;
  }
  .compare-choix button {
    min-height: 2.75rem; border: 0; border-radius: 999px; background: transparent;
    font: 600 var(--t-s) var(--sans); color: var(--texte-2); cursor: pointer;
    transition: background-color 0.4s var(--expo), color 0.4s var(--expo), box-shadow 0.4s var(--expo);
  }
  .compare-choix button[aria-selected="true"] { background: var(--nuit); color: var(--blanc); box-shadow: 0 6px 14px -8px rgba(19, 36, 61, 0.7); }
  .compare[data-vue="nom"] .compare-banque, .compare[data-vue="banque"] .compare-nom { display: none; }
  .compare-col { animation: fondu-court 0.45s var(--expo); }
}
@keyframes fondu-court { from { opacity: 0; transform: translateY(6px); } }

@media (max-width: 759px) {
  /* Rythme vertical resserré */
  .section { padding-block: clamp(3.25rem, 2.5rem + 4vw, 4.5rem); }
  .intro { margin-bottom: var(--s4); }
  .page-entete { padding-block: 2.25rem 2rem; }

  /* Boutons pleine largeur, à portée du pouce */
  .heros .actions, .appel-final .actions, .section-nuit .actions, .apercu-calc .actions, .article-cta .actions { flex-direction: column; align-items: stretch; }
  .heros .actions .bouton, .appel-final .bouton, .section-nuit .actions .bouton, .apercu-calc .bouton, .article-cta .bouton, .situation .bouton { width: 100%; min-height: 3.25rem; }

  /* Avis en vedette : un peu moins grand */
  .avis-principal blockquote { font-size: 1.4rem; }
  .avis-principal::before { font-size: 5.5rem; }
  .avis-entete { margin-bottom: var(--s4); }

  /* Preuves : plus serré */
  .preuves-liste { gap: 0.875rem; padding-block: var(--s3); }

  /* Pied de page : deux colonnes, liens assez hauts pour le doigt */
  .pied-grille { grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s3); }
  .pied-grille > div:last-child { grid-column: 1 / -1; }
  .pied-liste { gap: 0; }
  .pied-liste a { display: flex; align-items: center; min-height: 2.75rem; }
  .pied-liste li:not(:has(a)) { padding-block: 0.4rem; }
  .pied-signature { padding-bottom: var(--s4); margin-bottom: var(--s4); }
  .pied-legal .lien-bouton, .pied-legal a { display: inline-flex; align-items: center; min-height: 2.75rem; }
}

/* Liens soulignés : une zone tactile confortable sans changer leur allure */
.lien-fleche { display: inline-block; padding-block: 0.6rem 0.45rem; background-position: left calc(100% - 0.4rem); }

/* En-tête : « Réserver » reste visible sur téléphone */
@media (max-width: 1023px) {
  .entete-rdv { display: inline-flex; min-height: 2.75rem; padding: 0 1rem; font-size: var(--t-s); }
  .entete-in { gap: 0.625rem; }
  .marque { min-height: 2.75rem; }
}
@media (max-width: 520px) { .rdv-long { display: none; } }
@media (max-width: 359px) { .marque-nom { font-size: 1rem; } }

/* Calculateur : petites étiquettes lisibles et cibles confortables */
@media (max-width: 759px) {
  .badge, .est-pastille { font-size: 0.75rem; }
  .seg button small { font-size: 0.78rem; }
  .est-montant-sombre input { min-height: 2.75rem; }
  .est-qui a { min-height: 2.75rem; }
  .est-duree input { min-height: 2.75rem; }
  .est-tete, .est-rangee, .est-resume, .opt, .est-comparer, .est-suite, .est-pourquoi summary, .est-info, .est-alerte, .est-exemple { padding-left: 1.125rem; padding-right: 1.125rem; }
}
.marque-nom { white-space: nowrap; }
@media (max-width: 520px) {
  .marque-nom { font-size: 1.125rem; }
  .entete-in { padding-inline: 1rem; }
  .menu-bouton { padding: 0 0.75rem; }
}
/* Les colonnes de grille peuvent rétrécir sous la largeur de leur contenu
   (sinon un tableau ou un menu déroulant élargit toute la page sur un petit écran) */
:is(.couv, .est-grille, .deux-colonnes, .portrait-bloc, .rdv-grille, .est-final-grille, .avis-vedette, .situations) > * { min-width: 0; }
@media (max-width: 400px) {
  .couv-form { grid-template-columns: 1fr; }
  .barre { gap: 0.625rem; }
  .barre .bouton { padding: 0 0.875rem; }
}
.pied-grille > * { min-width: 0; }
.pied-liste a, .pied-liste li { overflow-wrap: anywhere; }
@media (max-width: 360px) { .pied-grille { grid-template-columns: 1fr; } }
.lien-fleche { padding-block: 0.75rem 0.55rem; background-position: left calc(100% - 0.5rem); }
/* La photo zoome à l'intérieur de son cadre, jamais au-delà */
.portrait-photo picture { overflow: hidden; border-radius: var(--r-moyen); }
/* Filet de sécurité : aucun défilement horizontal, sans casser l'en-tête collant */
html, body { overflow-x: clip; }
/* Tablettes aussi : liens du pied de page assez hauts pour le doigt */
@media (max-width: 1023px) {
  .pied-liste { gap: 0; }
  .pied-liste a { display: flex; align-items: center; min-height: 2.75rem; }
  .pied-legal .lien-bouton, .pied-legal a { display: inline-flex; align-items: center; min-height: 2.75rem; }
}
.prose .lien-bouton { display: inline; }
@media (max-width: 1023px) {
  .est-qui a, .est-duree input, .est-montant-sombre input { min-height: 2.75rem; }
}
@media (max-width: 759px) {
  .pied-grille { grid-template-columns: 1fr; gap: var(--s4); }
  .pied-grille > div:nth-child(2) .pied-liste { grid-template-columns: 1fr 1fr; column-gap: var(--s3); }
  .pied-liste a, .pied-liste li { overflow-wrap: normal; }
}

/* Articles : « À lire aussi » */
.a-lire { margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--ligne); }
.a-lire h2 { font-size: var(--t-l); margin: 0 0 var(--s2); }
.a-lire ul { list-style: none; padding: 0; margin: 0; }
.a-lire li { margin: 0; border-bottom: 1px solid var(--ligne); }
.a-lire a { display: flex; align-items: center; min-height: 3rem; padding-block: 0.5rem; font-weight: 600; color: var(--nuit); text-decoration: none; transition: color 0.3s ease, padding-left 0.5s var(--expo); }
.a-lire a:hover { color: var(--laiton-texte); padding-left: 0.375rem; }

/* ---------- Au-delà de l'hypothèque ---------- */

.services-grille { display: grid; gap: var(--s3); }
@media (min-width: 640px) { .services-grille { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .services-grille { grid-template-columns: repeat(4, 1fr); } }
.services-grille > * { min-width: 0; }
.service-carte { color: inherit; text-decoration: none; }
.service-carte h3 { font-size: var(--t-l); margin: var(--s3) 0 var(--s1); }
.service-carte p { color: var(--texte-2); margin: 0 0 var(--s3); }
.service-icone { width: 2.25rem; height: 2.25rem; color: var(--laiton); }
.service-plus { margin-top: auto; font-size: var(--t-s); font-weight: 600; color: var(--laiton-texte); }
.service-plus::after { content: "→"; display: inline-block; margin-left: 0.4em; transition: transform 0.6s var(--expo); }
@media (hover: hover) and (pointer: fine) { .service-carte:hover .service-plus::after { transform: translateX(4px); } }
.service-carte:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.services-tout { margin-top: var(--s4); }

/* Petit titre au-dessus d'un h2 */
.sur-titre { font-family: var(--serif); font-style: italic; font-size: var(--t-m); color: var(--laiton-texte); margin: 0 0 var(--s1); }
.section-nuit .sur-titre { color: var(--laiton-clair); }
.prose .lien-fleche + .lien-fleche { margin-left: var(--s3); }

/* ---------- Engagement de confidentialité ---------- */

.engagement {
  margin-top: var(--s4);
  padding: var(--s3) var(--s3) var(--s3) var(--s4);
  border-left: 2px solid var(--laiton);
  background: var(--grain-papier), var(--pierre);
  border-radius: 0 var(--r-moyen) var(--r-moyen) 0;
  font-size: var(--t-s);
  color: var(--texte-2);
}
.engagement-titre { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 var(--s2); font-family: var(--serif); font-size: var(--t-l); color: var(--texte); }
.engagement-titre svg { width: 1.375rem; height: 1.375rem; color: var(--laiton-texte); flex: none; }
.engagement ul { list-style: none; margin: 0 0 var(--s2); padding: 0; display: grid; gap: 0.6rem; }
.engagement strong { color: var(--texte); font-weight: 600; }
.engagement-lien { color: var(--laiton-texte); font-weight: 600; text-underline-offset: 0.2em; display: inline-block; padding-block: 0.6rem; }
.section-nuit .engagement { background: rgba(255, 255, 255, 0.05); border-left-color: var(--laiton-clair); color: var(--sur-nuit-2); }
.section-nuit .engagement-titre, .section-nuit .engagement strong { color: var(--sur-nuit); }
.section-nuit .engagement-titre svg, .section-nuit .engagement-lien { color: var(--laiton-clair); }
/* Dans la carte claire du calculateur, on garde la version claire même sur fond nuit */
.section-nuit .est-demande .engagement { background: var(--grain-papier), var(--pierre); border-left-color: var(--laiton); color: var(--texte-2); }
.section-nuit .est-demande .engagement-titre, .section-nuit .est-demande .engagement strong { color: var(--texte); }
.section-nuit .est-demande .engagement-titre svg, .section-nuit .est-demande .engagement-lien { color: var(--laiton-texte); }

/* ==========================================================================
   SURFACES
   Les sections de couleur ne sont plus des bandes pleine largeur : ce sont
   des plaques posées sur le papier, comme des feuillets d'un dossier.
   ========================================================================== */

.section.section-pierre, .section.section-nuit {
  --marge-plaque: clamp(0.5rem, 0.15rem + 1.1vw, 1.25rem);
  position: relative;
  isolation: isolate;
  overflow: clip;
  margin: var(--marge-plaque);
  border-radius: clamp(18px, 0.8rem + 1vw, 30px);
}

/* Papier : un bord de lumière en haut, une ombre de contact presque nulle */
.section.section-pierre {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 0 0 1px rgba(19, 36, 61, 0.045),
    0 1px 2px rgba(19, 36, 61, 0.03);
}

/* Bleu nuit : une lumière zénithale douce, et un filet laiton sur l'arête
   supérieure. */
.section.section-nuit {
  background:
    var(--grain-nuit),
    radial-gradient(90% 70% at 50% -20%, rgba(70, 102, 148, 0.42), rgba(70, 102, 148, 0) 70%),
    radial-gradient(60% 50% at 92% 4%, rgba(210, 176, 113, 0.09), rgba(210, 176, 113, 0) 70%),
    radial-gradient(70% 60% at 0% 110%, rgba(8, 18, 34, 0.55), rgba(8, 18, 34, 0) 70%),
    var(--nuit);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
    0 40px 80px -48px rgba(19, 36, 61, 0.55);
}
.section.section-nuit::before {
  content: "";
  position: absolute; top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, rgba(210, 176, 113, 0), rgba(210, 176, 113, 0.55) 50%, rgba(210, 176, 113, 0));
  pointer-events: none;
}

/* Les deux plaques qui se suivent respirent ensemble, sans double marge */
.section.section-pierre + .section.section-nuit,
.section.section-nuit + .section.section-pierre,
.section.section-pierre + .section.section-pierre,
.section.section-nuit + .section.section-nuit { margin-top: 0; }

/* La bande des preuves : deux colonnes nettes plutôt qu'un orphelin */
@media (min-width: 640px) and (max-width: 1023px) {
  .preuves-liste { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   CARTES : le contour s'allume là où passe le pointeur
   Plutôt qu'un simple soulèvement, un filet laiton suit la main, comme la
   lumière qui glisse sur le chant d'une carte de visite gaufrée.
   ========================================================================== */

.situation, .billet, .avis { --mx: 50%; --my: 0%; }
.situation::after, .billet::after, .avis::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(280px circle at var(--mx) var(--my), rgba(168, 130, 63, 0.75), rgba(168, 130, 63, 0.12) 45%, rgba(168, 130, 63, 0) 75%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.8s var(--expo);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .situation:hover::after, .billet:hover::after, .avis:hover::after { opacity: 1; }
  .avis:hover, .situation:hover, .billet:hover { transform: translateY(-2px); }
}
.situation:focus-visible::after, .service-carte:focus-visible::after { opacity: 1; }

/* Champs : à la mise au point, un halo laiton se dépose doucement
   au lieu d'un contour qui claque. */
:is(.champ input, .champ select, .est-demande input, .est-montant) {
  transition: border-color 0.5s var(--expo), box-shadow 0.6s var(--expo), background-color 0.5s ease;
}
:is(.champ input, .champ select, .est-demande input):focus-visible,
.est-montant:focus-within {
  box-shadow: 0 0 0 4px rgba(168, 130, 63, 0.16);
}

/* ---------- Grande photo (page Services) ---------- */

.photo-large { margin: 0 0 var(--s2); }
.photo-large picture {
  display: block;
  overflow: hidden;
  border-radius: clamp(14px, 0.6rem + 1vw, 24px);
  background: var(--pierre);
  box-shadow: var(--ombre-fine);
}
.photo-large img { display: block; width: 100%; height: auto; aspect-ratio: 1400 / 934; object-fit: cover; object-position: 45% 50%; }
@media (max-width: 639px) { .photo-large img { aspect-ratio: 4 / 3.4; } }
.photo-large figcaption { margin-top: var(--s2); font-family: var(--serif); font-style: italic; font-size: var(--t-s); color: var(--texte-2); }

/* Le cadre s'ouvre pendant que l'image recule, comme le portrait de l'accueil */
@media (prefers-reduced-motion: no-preference) {
  .js .photo-large[data-revele] { opacity: 1; transform: none; }
  .js .photo-large[data-revele] picture { clip-path: inset(6% 4% 6% 4% round 24px); transition: clip-path 1.6s var(--expo); }
  .js .photo-large[data-revele] img { transform: scale(1.08); transition: transform 2s var(--expo); }
  .js .photo-large[data-revele].est-visible picture { clip-path: inset(0 0 0 0 round 0); }
  .js .photo-large[data-revele].est-visible img { transform: none; }
}

/* ---------- Photo de la page Rendez-vous ---------- */

.photo-rdv { margin: 0 0 var(--s5); max-width: 30rem; }
.photo-rdv picture { display: block; overflow: hidden; border-radius: clamp(14px, 0.6rem + 1vw, 22px); background: var(--pierre); box-shadow: var(--ombre-fine); }
.photo-rdv img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 639px) { .photo-rdv img { aspect-ratio: 1 / 1; object-position: 50% 30%; } }
.photo-rdv figcaption { margin-top: var(--s2); font-family: var(--serif); font-style: italic; font-size: var(--t-s); color: var(--texte-2); }
.marque-titre { white-space: nowrap; }

/* ==========================================================================
   MOBILE : barre d'action, rangées à balayer, réponse au toucher
   ========================================================================== */

/* Barre d'action : verre bleu nuit qui monte quand l'en-tête s'efface */
.barre-action { display: none; }
@media (max-width: 979px) {
  .barre-action {
    display: flex; align-items: center; gap: 0.5rem;
    position: fixed; z-index: 45;
    left: 0.625rem; right: 0.625rem; bottom: calc(0.625rem + env(safe-area-inset-bottom));
    padding: 0.5rem;
    border-radius: 18px;
    background: rgba(19, 36, 61, 0.84);
    -webkit-backdrop-filter: saturate(1.4) blur(16px);
    backdrop-filter: saturate(1.4) blur(16px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.05), 0 18px 40px -14px rgba(8, 18, 34, 0.65);
    transform: translateY(calc(100% + 1.5rem));
    opacity: 0; visibility: hidden;
    transition: transform 0.55s var(--expo), opacity 0.35s ease, visibility 0s linear 0.55s;
  }
  .barre-action.est-visible {
    transform: none; opacity: 1; visibility: visible;
    transition: transform 0.7s var(--expo), opacity 0.3s ease, visibility 0s;
  }
  .barre-action-rdv { flex: 1; min-height: 3rem; border-radius: 12px; }
  .barre-action-tel {
    flex: none; display: grid; place-items: center;
    width: 3rem; height: 3rem; border-radius: 12px;
    color: var(--laiton-clair);
    border: 1px solid rgba(210, 176, 113, 0.35);
    transition: background-color 0.3s ease, transform 0.3s var(--expo);
  }
  .barre-action-tel:active { background: rgba(210, 176, 113, 0.14); transform: scale(0.94); transition-duration: 0.08s; }
  .barre-action-tel svg { width: 1.25rem; height: 1.25rem; }
  .barre-action ~ .pied, .pied:has(~ .barre-action) { padding-bottom: calc(5.75rem + env(safe-area-inset-bottom)); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .barre-action { background: var(--nuit); }
}
@media (prefers-reduced-motion: reduce) {
  .barre-action { transform: none; transition: opacity 0.2s ease, visibility 0s linear 0.2s; }
}

/* Rangées à balayer : la carte suivante dépasse pour inviter le pouce */
@media (max-width: 759px) {
  .services-grille, .avis-secondaires {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 82%;
    gap: 0.875rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gouttiere);
    margin-inline: calc(-1 * var(--gouttiere));
    padding: 0.5rem var(--gouttiere) 1.25rem;
    scrollbar-width: none;
  }
  .services-grille::-webkit-scrollbar, .avis-secondaires::-webkit-scrollbar { display: none; }
  .services-grille > *, .avis-secondaires > * { scroll-snap-align: start; }
  .avis-secondaires:focus-visible { outline-offset: -2px; }
  .js .services-grille > [data-revele], .js .avis-secondaires > [data-revele] { opacity: 1; transform: none; }
}

/* Réponse au toucher : on enfonce légèrement, le laiton s'allume sous le doigt */
@media (hover: none) {
  .bouton:active { transform: scale(0.965); filter: brightness(1.07); transition-duration: 0.08s; }
  .situation:active, .billet:active, .avis:active { transform: scale(0.985); transition-duration: 0.12s; }
  .situation.touche::after, .billet.touche::after, .avis.touche::after { opacity: 1; transition-duration: 0.15s; }
  .situation.touche::before, .billet.touche::before { transform: scaleX(1); }
  .faq summary:active, .nav-liste a:active, .pied-liste a:active, .a-lire a:active { background-color: rgba(168, 130, 63, 0.08); }
  .lien-fleche:active { background-size: 100% 2px; }
}

/* ---------- Articles : en bref, questions, auteur ---------- */

.prose .en-bref {
  margin: 0 0 var(--s5);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-moyen);
  background: var(--grain-papier), var(--pierre);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 0 0 1px rgba(19, 36, 61, 0.05);
}
.prose .en-bref-titre { margin: 0 0 var(--s1); font-family: var(--serif); font-style: italic; color: var(--laiton-texte); }
.prose .en-bref ul { margin: 0; padding-left: 1.1rem; }
.prose .en-bref li { margin-bottom: 0.45rem; }
.prose .en-bref li:last-child { margin-bottom: 0; }

.prose .faq-article { margin: var(--s3) 0 var(--s5); }
.prose .faq-article summary { font-family: var(--sans); font-size: var(--t-m); font-weight: 600; }
.prose .faq-article .faq-reponse p { margin: 0 0 var(--s3); color: var(--texte-2); }

.prose .auteur {
  display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--s3); align-items: start;
  margin: var(--s5) 0; padding: var(--s3) 0;
  border-top: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne);
  font-size: var(--t-s); color: var(--texte-2);
}
.prose .auteur img { width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 0 0 1px var(--ligne); }
.prose .auteur p { margin: 0 0 0.35rem; }
.prose .auteur-nom { font-family: var(--serif); font-size: var(--t-m); color: var(--texte); }
.prose .auteur-date { color: var(--texte-2); font-size: var(--t-xs); }