/* ==========================================================================
   Voltis Habitat — feuille de style principale
   Direction « artisan pro et rassurant »
   Vert profond + accent terracotta repris du logo, neutres chauds,
   typo Archivo / Inter.
   Sommaire :
     01. Polices
     02. Tokens
     03. Reset et base
     04. Typographie
     05. Mise en page (container, sections)
     06. Éléments d'interface (boutons, chips, listes)
     07. En-tête et navigation
     08. Bandeau France Rénov'
     09. Hero accueil
     10. Hero pages internes
     11. Cartes et grilles de contenu
     12. Blocs éditoriaux
     13. FAQ
     14. Page contact
     15. Ballon thermodynamique
     16. Formulaire
     17. Pages légales
     18. Pied de page
     19. Éléments flottants (cookies, WhatsApp)
     20. Animations
     21. Responsive
   ========================================================================== */

/* 01. Polices ============================================================= */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 02. Tokens ============================================================== */

:root {
  /* Vert de marque, repris du logo Voltis Habitat */
  --brand-900: #04331c;
  --brand-800: #075a2f;
  --brand-700: #017238;
  --brand-600: #018a46;
  --brand-100: #d6ede0;
  --brand-50: #eef7f1;

  /* Accent terracotta, repris du mot « habitat » du logo */
  --accent-700: #9e3d18;
  --accent-600: #b8491d;
  --accent-500: #d75e30;
  --accent-100: #fadcd0;
  --accent-50: #fdf4ef;

  /* Neutres chauds */
  --paper: #ffffff;
  --sand: #f6f4f0;
  --sand-2: #eceae3;
  --line: #e0ded5;
  --line-strong: #ccc9be;
  --line-dark: rgba(255, 255, 255, 0.16);

  /* Texte */
  --ink: #14261b;
  --ink-2: #4c6154;
  --ink-3: #61756a;
  --ink-invert: #ffffff;
  --ink-invert-2: rgba(255, 255, 255, 0.74);

  /* Sémantique */
  --success: #14684a;
  --danger: #a3231f;
  --focus: var(--accent-500);

  /* Typo */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Arial, sans-serif;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.1875rem;
  --text-xl: clamp(1.25rem, 1.16rem + 0.4vw, 1.4375rem);
  --text-h3: clamp(1.1875rem, 1.11rem + 0.36vw, 1.375rem);
  --text-h2: clamp(1.75rem, 1.32rem + 1.85vw, 2.625rem);
  --text-h1: clamp(2.125rem, 1.62rem + 2.2vw, 3.125rem);

  /* Espacement */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 56px;
  --space-9: 72px;
  --space-10: 96px;

  /* Rayons */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Ombres — discrètes, la structure passe par les filets */
  --shadow-sm: 0 1px 2px rgba(4, 51, 28, 0.06);
  --shadow-md: 0 6px 20px rgba(4, 51, 28, 0.07);
  --shadow-lg: 0 18px 44px rgba(4, 51, 28, 0.1);

  /* Grille */
  --container: min(1160px, calc(100vw - 40px));
  --header-height: 76px;
  --section-gap: clamp(56px, 5vw, 88px);
}

/* 03. Reset et base ======================================================= */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

body.menu-open {
  overflow: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

p,
li {
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

li {
  margin-bottom: 0;
}

p:last-child {
  margin-bottom: 0;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--space-7) 0;
}

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

::selection {
  background: var(--brand-700);
  color: #fff;
}

.sr-only,
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 04. Typographie ========================================================= */

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0 0 var(--space-4);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Grands titres : lignes équilibrées. Petits titres en colonne étroite :
   remplissage glouton, qui garde les groupes de mots ensemble
   (« Pompe à chaleur / air/eau » plutôt que « Pompe à / chaleur air/eau »). */
h1,
h2 {
  text-wrap: balance;
}

h3,
h4 {
  text-wrap: pretty;
}

h1 {
  font-size: var(--text-h1);
  line-height: 1.06;
  letter-spacing: -0.03em;
}

h2 {
  font-size: var(--text-h2);
  line-height: 1.12;
}

h3 {
  font-size: var(--text-h3);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-2);
}

h4 {
  font-size: var(--text-lg);
  line-height: 1.3;
}

strong {
  font-weight: 650;
}

small {
  font-size: var(--text-sm);
}

/* Lien de contenu : soulignement discret plutôt qu'une couleur criarde */
.legal-content a,
.form-legal-note a,
.info-card p a {
  color: var(--accent-600);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.legal-content a:hover,
.form-legal-note a:hover,
.info-card p a:hover {
  color: var(--accent-700);
}

/* Les valeurs de contact restent en bleu de marque, sans soulignement */
.contact-info-card__value--address {
  color: var(--ink-2);
}

/* Surtitre */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-600);
  margin-bottom: var(--space-3);
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--accent-500);
  flex: none;
}

.eyebrow--with-icon::before {
  display: none;
}

.eyebrow__icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  color: var(--accent-500);
}

.eyebrow__icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* Badge de panneau */
.panel-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 5px 14px;
  margin-bottom: var(--space-4);
}

.offer-chip {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-600);
  background: var(--accent-50);
  border: 1px solid var(--accent-100);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  margin-bottom: var(--space-3);
}

.chip {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink-2);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
}

/* Titre de section
   Les titres occupent toute la largeur disponible : la mesure de lecture ne
   s'applique qu'au texte courant, sinon l'unité ch (calculée sur la taille du
   conteneur) enferme les titres et casse les expressions en plein milieu. */
.section-heading {
  margin-bottom: var(--space-7);
}

.section-heading h2 {
  margin-bottom: var(--space-4);
}

.section-heading > p {
  font-size: var(--text-lg);
  color: var(--ink-2);
  max-width: 78ch;
  margin-bottom: 0;
}

.section-heading--wide > p {
  max-width: none;
}

/* Classes héritées : conservées pour ne pas casser le balisage existant */
.section-heading--natural,
.text-flow-natural,
.text-flow-copy {
  text-wrap: pretty;
}

/* 05. Mise en page ======================================================== */

.container {
  width: var(--container);
  margin-inline: auto;
}

main {
  display: block;
}

.section {
  padding: var(--section-gap) 0;
  scroll-margin-top: calc(var(--header-height) + 16px);
}

.section--tight {
  padding: clamp(40px, 4vw, 64px) 0;
}

/* Alternance de fonds : c'est elle qui crée le rythme, pas les ombres */
.section--sand {
  background: var(--sand);
  border-block: 1px solid var(--line);
}

.section--dark {
  background: var(--brand-900);
  color: var(--ink-invert);
}

.section--dark h2,
.section--dark h3 {
  color: var(--ink-invert);
}

.section--dark .section-heading p {
  color: var(--ink-invert-2);
}

.section--dark .eyebrow {
  color: #f0ab8b;
}

.section--dark .eyebrow::before {
  background: #f0ab8b;
}

.two-column {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}

/* 06. Éléments d'interface =============================================== */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  padding: 14px 26px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: background-color 0.18s ease, border-color 0.18s ease,
    color 0.18s ease, transform 0.18s ease;
  text-align: center;
}

.button--primary {
  background: var(--brand-700);
  border-color: var(--brand-700);
  color: #fff;
}

.button--primary:hover {
  background: var(--brand-800);
  border-color: var(--brand-800);
}

.button--primary:active {
  transform: translateY(1px);
}

.button--ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink);
}

.button--ghost:hover {
  border-color: var(--accent-500);
  color: var(--accent-700);
  background: var(--accent-50);
}

.button--small {
  padding: 10px 18px;
  font-size: var(--text-sm);
}

.button__icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex: none;
}

.button__icon svg {
  width: 100%;
  height: 100%;
}

/* Lien fléché : remplace les faux boutons dans les cartes */
.official-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--brand-700);
  border-bottom: 1px solid var(--brand-100);
  padding-bottom: 2px;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.official-link::after {
  content: "→";
  transition: transform 0.18s ease;
}

.official-link:hover {
  color: var(--accent-600);
  border-color: var(--accent-500);
}

.official-link:hover::after {
  transform: translateX(3px);
}

/* Listes */
.bullet-list,
.summary-list,
.split-list,
.legal-summary-list,
.hero-task-grid,
.site-footer__summary {
  display: grid;
  gap: var(--space-3);
}

.bullet-list li,
.summary-list li,
.split-list li,
.legal-summary-list li {
  position: relative;
  padding-left: 28px;
  color: var(--ink-2);
}

.bullet-list li::before,
.summary-list li::before,
.split-list li::before,
.legal-summary-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid var(--accent-500);
}

/* 07. En-tête et navigation ============================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.2s ease;
}

.site-header.is-scrolled,
body.is-scrolled .site-header {
  box-shadow: var(--shadow-md);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-height);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  flex: none;
}

.brand__mark {
  display: inline-flex;
  width: 44px;
  height: 44px;
  flex: none;
}

.brand__logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand__copy {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.brand__title-row {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.brand__title-row strong {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.brand__context {
  font-size: var(--text-xs);
  color: var(--ink-3);
}

.brand__copy small {
  font-size: var(--text-xs);
  color: var(--ink-3);
}

/* Dans l'en-tête, la signature est l'élément le plus large : un corps
   légèrement réduit suffit à libérer la place du numéro d'appel. Le pied de
   page conserve le corps normal. */
.site-header .brand__copy small {
  font-size: 0.75rem;
}


.site-header__panel {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(0px, 0.3vw, 8px);
}

/* Corps et gouttières fluides : entre le passage au menu burger et les très
   grands écrans, la navigation se resserre progressivement au lieu de casser
   ses libellés sur plusieurs lignes. */
.site-nav__link {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(0.8125rem, 0.68rem + 0.18vw, 0.875rem);
  font-weight: 550;
  color: var(--ink-2);
  padding: 10px clamp(6px, 0.4vw, 8px);
  border-radius: var(--radius-xs);
  white-space: nowrap;
  transition: color 0.18s ease;
}

.site-nav__link::after {
  content: "";
  position: absolute;
  left: clamp(6px, 0.4vw, 8px);
  right: clamp(6px, 0.4vw, 8px);
  bottom: 2px;
  height: 2px;
  background: var(--accent-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.18s ease;
}

.site-nav__link:hover {
  color: var(--ink);
}

.site-nav__link:hover::after,
.site-nav__link.is-active::after {
  transform: scaleX(1);
}

.site-nav__link.is-active {
  color: var(--ink);
  font-weight: 650;
}

.site-header__cta.is-active {
  background: var(--brand-800);
  border-color: var(--brand-800);
}

/* Bloc d'appel de l'en-tête. Placé dans la barre et non dans le panneau de
   navigation : il reste ainsi visible quand le menu mobile est replié.
   La marge automatique le pousse contre le panneau, sans modifier la
   répartition existante entre la marque et la navigation. */
.site-header__call {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
  padding: 6px 14px 6px 6px;
  flex: none;
  border: 1px solid var(--brand-100);
  border-radius: var(--radius-pill);
  background: var(--brand-50);
  transition: background-color 0.18s ease, border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.site-header__call:hover {
  background: var(--brand-100);
  border-color: var(--brand-600);
}

.site-header__call:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.site-header__call-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  background: var(--brand-600);
  color: #fff;
}

.site-header__call-icon svg {
  width: 15px;
  height: 15px;
}

.site-header__call-copy {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.site-header__call-label {
  font-size: var(--text-xs);
  color: var(--ink-3);
}

.site-header__call-number {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--brand-800);
  white-space: nowrap;
}

.nav-toggle {
  display: none;
  flex: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.nav-toggle span:not(.sr-only) {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle[aria-expanded="true"] span:not(.sr-only):nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:not(.sr-only):nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:not(.sr-only):nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* 08. Bandeau France Rénov' ============================================== */

/* Encart de service public : obligation issue de la loi du 30 juin 2025 sur la
   fraude aux aides publiques. Il doit être immédiatement visible et lisible,
   d'où un bandeau pleine largeur placé juste sous l'en-tête. */
.site-notice {
  width: 100%;
  max-width: none;
  padding: clamp(20px, 2.2vw, 32px) 0;
  background: var(--sand);
  border-block: 1px solid var(--line);
}

.public-service-banner {
  display: block;
  width: var(--container);
  margin-inline: auto;
  border-radius: var(--radius-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.public-service-banner:hover {
  box-shadow: var(--shadow-md);
}

.public-service-banner__image {
  width: min(100%, 820px);
  height: auto;
  margin-inline: auto;
  border-radius: var(--radius-sm);
}

/* 09. Hero accueil ======================================================= */

.hero {
  padding: clamp(48px, 5vw, 80px) 0 clamp(40px, 4vw, 64px);
  background: linear-gradient(180deg, var(--paper) 0%, var(--sand) 100%);
  border-bottom: 1px solid var(--line);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
}

.hero__copy h1 {
  margin-bottom: var(--space-5);
}

.hero__headline-line {
  display: block;
}

.hero__headline-line--break {
  color: var(--ink-2);
  font-weight: 600;
}

.hero__copy > p {
  font-size: var(--text-lg);
  color: var(--ink-2);
  margin-bottom: var(--space-6);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

/* Un seul bouton porte l'action : les suivants deviennent secondaires */
.hero__actions .button--ghost ~ .button--ghost {
  border-color: transparent;
  background: transparent;
  padding-inline: 8px;
  color: var(--brand-700);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.hero__actions .button--ghost ~ .button--ghost:hover {
  color: var(--accent-700);
  background: transparent;
}

.hero__note,
.page-hero__note {
  font-size: var(--text-sm);
  color: var(--ink-3);
  padding-left: var(--space-4);
  border-left: 2px solid var(--line-strong);
  margin-bottom: var(--space-5);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.hero__panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero__panel .visual-stage {
  width: 100%;
}

.visual-stage {
  display: grid;
  gap: var(--space-4);
}

.hero-visual-card,
.page-visual-card {
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: var(--shadow-md);
}

.hero-visual-card img,
.page-visual-card img {
  width: 100%;
  height: auto;
}

.mini-offer {
  background: var(--brand-900);
  color: var(--ink-invert);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.mini-offer h3 {
  color: var(--ink-invert);
}

.mini-offer p {
  color: var(--ink-invert-2);
  margin-bottom: var(--space-5);
}

.mini-offer .offer-chip {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--line-dark);
  color: #f4c3ac;
}

.mini-offer .button--primary {
  background: var(--accent-500);
  border-color: var(--accent-500);
  width: 100%;
}

.mini-offer .button--primary:hover {
  background: var(--accent-600);
  border-color: var(--accent-600);
}

/* Bandeau récapitulatif sous le hero */
.hero__supplement {
  grid-column: 1 / -1;
  margin-top: var(--space-6);
}

.hero-summary-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(28px, 3vw, 52px);
  align-items: start;
  padding: var(--space-7);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.hero-summary-card__stats {
  display: grid;
  gap: var(--space-5);
}

.hero-stat {
  padding-left: var(--space-4);
  border-left: 3px solid var(--accent-500);
}

.hero-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-600);
  margin-bottom: 2px;
}

.hero-stat h3 {
  font-size: var(--text-lg);
  margin-bottom: 2px;
}

.hero-stat p {
  font-size: var(--text-sm);
  color: var(--ink-2);
}

.hero-summary-card__heading {
  margin-bottom: var(--space-5);
}

.hero-summary-card__heading h3 {
  font-size: var(--text-xl);
  margin-bottom: 0;
}

.hero-task-grid {
  gap: 0;
}

.hero-task-grid li {
  padding: var(--space-3) 0 var(--space-3) 30px;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: var(--text-sm);
  position: relative;
}

.hero-task-grid li:last-child {
  border-bottom: 1px solid var(--line);
}

.hero-task-grid li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 1.35em;
  width: 10px;
  height: 2px;
  background: var(--accent-500);
}

/* 10. Hero pages internes =============================================== */

.page-hero {
  padding: clamp(44px, 4.5vw, 72px) 0 clamp(40px, 4vw, 64px);
  background: linear-gradient(180deg, var(--paper) 0%, var(--sand) 100%);
  border-bottom: 1px solid var(--line);
}

.page-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
}

.page-hero__copy h1 {
  margin-bottom: var(--space-4);
}

.page-hero__copy > p {
  font-size: var(--text-lg);
  color: var(--ink-2);
  margin-bottom: var(--space-6);
}

.page-hero__panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.page-hero__panel .page-visual-card {
  width: 100%;
}

.page-hero__supplement {
  grid-column: 1 / -1;
  margin-top: var(--space-4);
}

.page-hero__offer {
  grid-column: 1 / -1;
}

.offer-card {
  padding: var(--space-6);
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent-500);
  border-radius: var(--radius-md);
}

.offer-card h3 {
  margin-bottom: var(--space-4);
}

/* Variante avec illustration : le texte garde sa mesure de lecture,
   le visuel occupe l'espace resté vide à droite. */
.offer-card--with-visual {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
}

/* Hauteur plafonnée : une illustration presque carrée étirerait la carte
   bien au-delà de la hauteur du texte placé à côté. */
.offer-card__visual img {
  width: 100%;
  height: auto;
  max-height: 300px;
  object-fit: contain;
  margin-inline: auto;
}

@media (max-width: 860px) {
  .offer-card--with-visual {
    grid-template-columns: minmax(0, 1fr);
  }

  .offer-card__visual img {
    max-width: 420px;
    margin-inline: auto;
  }
}

/* Bandeau de réassurance : qualifications et assurances vérifiables.
   Placé juste sous le hero, c'est la première preuve que voit le visiteur. */
.trust-strip {
  padding: var(--space-6) 0;
  background: var(--brand-900);
  color: var(--ink-invert);
}

.trust-strip__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: var(--space-5);
  align-items: center;
}

.trust-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.trust-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: var(--radius-sm);
  background: rgba(240, 171, 139, 0.14);
  color: #f0ab8b;
}

.trust-item__icon svg {
  width: 19px;
  height: 19px;
}

.trust-item strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--ink-invert);
}

.trust-item span:last-child {
  font-size: var(--text-sm);
  color: var(--ink-invert-2);
}

.trust-strip__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  color: #f0ab8b;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(240, 171, 139, 0.4);
  transition: color 0.18s ease, border-color 0.18s ease;
}

.trust-strip__link::after {
  content: "→";
  transition: transform 0.18s ease;
}

.trust-strip__link:hover {
  color: #f6d0bd;
  border-color: #f6d0bd;
}

.trust-strip__link:hover::after {
  transform: translateX(3px);
}

@media (max-width: 1080px) {
  .trust-strip__grid {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  }

  .trust-strip__link {
    grid-column: 1 / -1;
  }
}

/* 11. Cartes et grilles de contenu ====================================== */

.cards-grid,
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-5);
}

.card {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  transition: border-color 0.18s ease, box-shadow 0.18s ease,
    transform 0.18s ease;
}

.card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card p {
  color: var(--ink-2);
  font-size: var(--text-sm);
}

/* Le lien se cale en bas : les cartes restent alignées même sans lien */
.card p:has(.official-link) {
  margin-top: auto;
  padding-top: var(--space-4);
  margin-bottom: 0;
}

.section--sand .card,
.section--sand .info-card,
.section--sand .checklist-card {
  background: var(--paper);
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-4);
}

.info-card {
  padding: var(--space-5);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.info-card h3 {
  font-size: var(--text-base);
  margin-bottom: var(--space-1);
}

.info-card p {
  font-size: var(--text-sm);
  color: var(--ink-2);
}

/* Étapes */
.timeline-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--paper);
}

.timeline-card {
  padding: var(--space-6) var(--space-5);
  border-right: 1px solid var(--line);
}

.timeline-card:last-child {
  border-right: 0;
}

.timeline-card > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand-700);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  margin-bottom: var(--space-4);
}

.timeline-card h3 {
  font-size: var(--text-base);
}

.timeline-card p {
  font-size: var(--text-sm);
  color: var(--ink-2);
}

/* Checklists */
.checklist-grid,
.matrix-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.checklist-card {
  padding: var(--space-6);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.checklist-card ul {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.checklist-card li {
  position: relative;
  padding-left: 28px;
  font-size: var(--text-sm);
  color: var(--ink-2);
}

.checklist-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-xs);
  background: var(--accent-50);
  border: 1px solid var(--accent-100);
}

.checklist-card li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 0.66em;
  width: 6px;
  height: 3px;
  border-left: 2px solid var(--accent-600);
  border-bottom: 2px solid var(--accent-600);
  transform: rotate(-45deg);
}

/* Liens utiles */
.quick-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.quick-links-grid--trio {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.quick-link-card {
  display: block;
  padding: var(--space-5);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.quick-link-card:hover {
  border-color: var(--accent-500);
  box-shadow: var(--shadow-md);
}

/* Surtitre : uniquement le premier span, pour ne pas capturer la valeur */
.quick-link-card > span:first-child {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-600);
  margin-bottom: var(--space-2);
}

/* Coordonnée affichée en clair dans la carte */
.quick-link-card__value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--brand-700);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere;
}

.quick-link-card:hover .quick-link-card__value {
  color: var(--accent-700);
}

.quick-link-card strong {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 650;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-2);
}

.quick-link-card strong::after {
  content: "→";
  color: var(--accent-500);
  font-weight: 400;
  transition: transform 0.18s ease;
}

.quick-link-card:hover strong::after {
  transform: translateX(3px);
}

.quick-link-card p {
  font-size: var(--text-sm);
  color: var(--ink-2);
  margin-bottom: 0;
}

/* Pièce justificative affichée en clair (certificat, attestation) */
.certificate-figure {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
  margin: var(--space-7) 0 0;
  padding: var(--space-6);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.certificate-figure img {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

.certificate-figure figcaption h3 {
  margin-bottom: var(--space-3);
}

.certificate-figure figcaption p {
  color: var(--ink-2);
  font-size: var(--text-sm);
}

/* Tableau de données hors pages légales */
.data-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-5);
  font-size: var(--text-sm);
}

.data-table caption {
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-600);
  padding-bottom: var(--space-3);
}

.data-table th,
.data-table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.data-table thead th {
  font-family: var(--font-display);
  font-weight: 650;
  color: var(--ink);
  border-bottom-color: var(--line-strong);
}

.data-table td:last-child,
.data-table th:last-child {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.data-table td {
  color: var(--ink-2);
}

.data-table__note {
  display: block;
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--ink-3);
  white-space: normal;
}

.table-scroll {
  overflow-x: auto;
}

.table-note {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--ink-3);
  max-width: 90ch;
}

@media (max-width: 720px) {
  .certificate-figure {
    grid-template-columns: minmax(0, 1fr);
  }

  .certificate-figure img {
    max-width: 340px;
  }
}

/* 12. Blocs éditoriaux ================================================== */

.proof-banner {
  padding: var(--space-6);
  background: var(--brand-900);
  color: var(--ink-invert);
  border-radius: var(--radius-lg);
}

.proof-banner h3 {
  color: var(--ink-invert);
  font-size: var(--text-xl);
  margin-bottom: var(--space-4);
}

.proof-banner p {
  color: var(--ink-invert-2);
  font-size: var(--text-sm);
  margin-bottom: var(--space-5);
}

.proof-banner .bullet-list li {
  color: var(--ink-invert-2);
  font-size: var(--text-sm);
}

.proof-banner .bullet-list li::before {
  border-color: #f0ab8b;
}

.two-column--proof {
  align-items: center;
}

.floating-panel {
  padding: var(--space-6);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.floating-panel--media {
  padding: 0;
  overflow: hidden;
}

.floating-panel--media img {
  width: 100%;
  border-bottom: 1px solid var(--line);
  background: var(--sand);
}

.floating-panel--media > div {
  padding: var(--space-6);
}

.split-list li {
  font-size: var(--text-sm);
}

/* Encadré de mise au point */
.official-note {
  padding: var(--space-6);
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.official-note h3 {
  margin-bottom: var(--space-3);
}

.official-note p {
  color: var(--ink-2);
  margin-bottom: 0;
}

.official-note .bullet-list {
  margin-top: var(--space-4);
}

.official-note .bullet-list li {
  font-size: var(--text-sm);
}

.matrix-grid .official-note {
  background: var(--paper);
}

/* 13. FAQ =============================================================== */

.faq-grid {
  border-top: 1px solid var(--line);
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-5) 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  transition: color 0.18s ease;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "";
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background-image: linear-gradient(var(--accent-600), var(--accent-600)),
    linear-gradient(var(--accent-600), var(--accent-600));
  background-size: 10px 2px, 2px 10px;
  background-position: center, center;
  background-repeat: no-repeat;
  transition: transform 0.22s ease, border-color 0.18s ease;
}

.faq-item summary:hover {
  color: var(--accent-700);
}

.faq-item[open] summary::after {
  transform: rotate(135deg);
  border-color: var(--accent-500);
}

.faq-item[open] summary {
  padding-bottom: var(--space-3);
}

.faq-item p {
  max-width: 78ch;
  padding-bottom: var(--space-5);
  color: var(--ink-2);
  margin-bottom: 0;
}

/* 14. Page contact ====================================================== */

.contact-summary-list {
  display: grid;
  gap: var(--space-3);
}

.contact-summary-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--ink-2);
}

.contact-summary-list__icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 2px;
  color: var(--accent-500);
}

.contact-summary-list__icon svg {
  width: 100%;
  height: 100%;
}

.page-hero__panel--contact {
  width: 100%;
  gap: var(--space-4);
}

.contact-panel__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-4);
}

.contact-panel__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--radius-sm);
  background: var(--accent-50);
  border: 1px solid var(--accent-100);
  color: var(--accent-600);
}

.contact-panel__icon svg {
  width: 20px;
  height: 20px;
}

.contact-panel__copy h3 {
  margin-bottom: 0;
  font-size: var(--text-base);
}

.contact-panel__copy p {
  font-size: var(--text-sm);
  color: var(--ink-2);
  margin-bottom: 0;
}

.contact-panel__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.contact-panel__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: var(--text-xs);
  font-weight: 550;
  color: var(--ink-2);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}

.contact-panel__chip svg {
  width: 14px;
  height: 14px;
  color: var(--accent-500);
}

.contact-info-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.contact-info-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.contact-info-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.contact-info-card__head h3 {
  margin-bottom: 0;
  font-size: var(--text-base);
}

.contact-info-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: var(--radius-sm);
  background: var(--brand-50);
  color: var(--brand-700);
}

.contact-info-card__icon svg {
  width: 17px;
  height: 17px;
}

.contact-info-card__stack {
  display: grid;
  gap: var(--space-3);
}

.contact-info-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.contact-info-card__copy {
  display: flex;
  flex-direction: column;
}

.contact-info-card__label {
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.contact-info-card__value {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--ink);
  overflow-wrap: anywhere;
}

a.contact-info-card__value:hover {
  color: var(--accent-700);
}

.contact-info-card__value--email {
  font-size: var(--text-base);
}

.contact-info-card__value--address {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--ink-2);
  line-height: 1.5;
}

.contact-info-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  color: var(--ink-3);
  margin-bottom: 0;
}

.contact-info-card__meta-icon {
  display: inline-flex;
  width: 15px;
  height: 15px;
  color: var(--success);
}

.contact-info-card__meta-icon svg {
  width: 100%;
  height: 100%;
}

.contact-info-card__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--brand-700);
  background: var(--brand-50);
  border-radius: var(--radius-sm);
  transition: background-color 0.18s ease, color 0.18s ease;
}

.contact-info-card__action svg {
  width: 15px;
  height: 15px;
}

.contact-info-card__action:hover {
  background: var(--brand-700);
  color: #fff;
}

.contact-info-card__action--wide {
  margin-top: auto;
  width: 100%;
}

/* 15. Ballon thermodynamique ============================================ */

.two-column--balloon-system {
  align-items: start;
}

.balloon-system-heading h2 br {
  display: none;
}

.balloon-system-list {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.balloon-system-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--ink-2);
}

.balloon-system-list__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: none;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--accent-50);
  color: var(--accent-600);
}

.balloon-system-list__icon svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.balloon-system-panel {
  padding: var(--space-6);
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.balloon-system-panel > h3 {
  margin-bottom: var(--space-4);
}

.balloon-system-panel__topics {
  display: grid;
  gap: var(--space-3);
}

.balloon-system-panel__topic {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--ink-2);
}

.balloon-system-panel__topic-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--brand-600);
}

.balloon-system-panel__topic-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.balloon-system-panel__visual {
  margin-top: var(--space-5);
  padding: var(--space-4);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

/* 16. Formulaire ======================================================== */

.lead-form-card {
  padding: clamp(28px, 3.5vw, 48px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  scroll-margin-top: calc(var(--header-height) + 24px);
}

.lead-form-card__intro {
  margin-bottom: var(--space-7);
}

.lead-form-card__intro .section-heading {
  margin-bottom: 0;
}

.lead-form-card__intro--with-summary {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}

.lead-form-card__summary {
  padding: var(--space-5);
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.lead-form-card__summary-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.lead-form-card__summary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: var(--radius-sm);
  background: var(--accent-50);
  border: 1px solid var(--accent-100);
  color: var(--accent-600);
}

.lead-form-card__summary-icon svg {
  width: 17px;
  height: 17px;
}

.lead-form-card__summary-label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-600);
  margin-bottom: 2px;
}

.lead-form-card__summary-copy h3 {
  font-size: var(--text-base);
  margin-bottom: var(--space-2);
}

.lead-form-card__summary-copy p {
  font-size: var(--text-sm);
  color: var(--ink-2);
  margin-bottom: 0;
}

.lead-form-card__summary-list {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.lead-form-card__summary-list li {
  position: relative;
  padding-left: 20px;
  font-size: var(--text-sm);
  color: var(--ink-2);
}

.lead-form-card__summary-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 2px;
  background: var(--accent-500);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-field > span:first-child {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
}

.form-field--full {
  margin-top: var(--space-4);
}

.form-control-wrap {
  position: relative;
  display: block;
}

.form-control-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  width: 18px;
  height: 18px;
  color: var(--ink-3);
  pointer-events: none;
}

.form-control-wrap--textarea .form-control-icon {
  top: 16px;
  transform: none;
}

.form-control-icon svg {
  width: 100%;
  height: 100%;
}

.form-control-wrap input,
.form-control-wrap select,
.form-control-wrap textarea {
  width: 100%;
  padding: 12px 14px 12px 42px;
  font-size: var(--text-base);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  appearance: none;
}

.form-control-wrap textarea {
  min-height: 132px;
  resize: vertical;
  line-height: 1.6;
}

.form-control-wrap--select select {
  padding-right: 40px;
  cursor: pointer;
}

.form-control-wrap input::placeholder,
.form-control-wrap textarea::placeholder {
  color: var(--ink-3);
}

.form-control-wrap input:focus,
.form-control-wrap select:focus,
.form-control-wrap textarea:focus {
  outline: none;
  border-color: var(--accent-500);
  box-shadow: 0 0 0 3px var(--accent-100);
}

.form-control-wrap select:invalid {
  color: var(--ink-3);
}

.form-control-chevron {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  width: 16px;
  height: 16px;
  color: var(--ink-3);
  pointer-events: none;
}

.form-control-chevron svg {
  width: 100%;
  height: 100%;
}

/* Champs pièges anti-robot : hors écran plutôt que display:none, que certains
   robots savent reconnaître et ignorer. */
.form-trap {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Consentement */
.consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding: var(--space-4);
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--ink-2);
  cursor: pointer;
}

.consent input[type="checkbox"] {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  accent-color: var(--brand-700);
}

/* Mentions : repliées par défaut pour ne pas casser le tunnel */
.form-legal-note {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--ink-3);
  max-height: 4.8em;
  overflow: hidden;
  position: relative;
  transition: max-height 0.3s ease;
}

.form-legal-note::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2.4em;
  background: linear-gradient(rgba(255, 255, 255, 0), var(--paper));
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.form-legal-note.is-expanded {
  max-height: 60em;
}

.form-legal-note.is-expanded::after {
  opacity: 0;
}

.form-legal-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--space-2);
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--brand-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.form-legal-toggle:hover {
  color: var(--accent-700);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}

.form-actions .button {
  padding: 16px 32px;
  font-size: var(--text-lg);
}

.form-status {
  font-size: var(--text-sm);
  font-weight: 550;
  color: var(--ink-2);
  margin-bottom: 0;
}

.form-status[data-state="success"] {
  color: var(--success);
}

.form-status[data-state="error"] {
  color: var(--danger);
}

/* 17. Pages légales ===================================================== */

/* Bloc de lecture centré : la marge résiduelle est symétrique, donc lisible
   comme une mise en page voulue et non comme un texte tronqué. */
.legal-content {
  max-width: 84ch;
  margin-inline: auto;
}

.legal-content h2 {
  font-size: var(--text-xl);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}

.legal-content > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.legal-content h3 {
  margin-top: var(--space-6);
}

.legal-content p,
.legal-content li {
  color: var(--ink-2);
}

.legal-content ul,
.legal-content ol {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
}

.legal-content ul li {
  position: relative;
  padding-left: 22px;
}

.legal-content ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-500);
}

.legal-content ol {
  counter-reset: legal;
}

.legal-content ol li {
  counter-increment: legal;
  position: relative;
  padding-left: 28px;
}

.legal-content ol li::before {
  content: counter(legal) ".";
  position: absolute;
  left: 0;
  font-family: var(--font-display);
  font-weight: 650;
  color: var(--accent-600);
}

.legal-content table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-4) 0;
  font-size: var(--text-sm);
}

.legal-content th,
.legal-content td {
  padding: var(--space-3);
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.legal-content th {
  background: var(--sand);
  font-family: var(--font-display);
  font-weight: 650;
}

/* Ratio libre : les visuels légaux sont recadrés en amont, inutile de les
   rogner une seconde fois au rendu. */
.page-hero--legal .page-visual-card img {
  width: 100%;
}

/* Bloc d'identité des mentions légales : le nom commercial domine, la raison
   sociale reste lisible en dessous, en capitales et en petit corps. */
.legal-identity {
  margin: 0 0 var(--space-6);
  padding: var(--space-5) var(--space-6);
  border-left: 4px solid var(--brand-600);
  background: var(--brand-50);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.legal-identity__brand {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.15;
  color: var(--brand-800);
}

.legal-identity__entity {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* 18. Pied de page ====================================================== */

.site-footer {
  background: var(--brand-900);
  color: var(--ink-invert-2);
  padding: var(--space-9) 0 var(--space-6);
  margin-top: var(--section-gap);
}

.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(32px, 4vw, 64px);
  padding-bottom: var(--space-7);
  border-bottom: 1px solid var(--line-dark);
}

.brand--footer .brand__title-row strong,
.brand--footer .brand__context,
.brand--footer .brand__copy small {
  color: var(--ink-invert);
}

.brand--footer .brand__context,
.brand--footer .brand__copy small {
  color: var(--ink-invert-2);
}

.site-footer__summary {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.site-footer__summary li {
  position: relative;
  padding-left: 20px;
  font-size: var(--text-sm);
  color: var(--ink-invert-2);
}

.site-footer__summary li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 8px;
  height: 2px;
  background: #f0ab8b;
}

.site-footer__section-title {
  margin-bottom: var(--space-4);
}

.site-footer__section-title h3 {
  font-size: var(--text-xs);
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f0ab8b;
  margin-bottom: 0;
}

/* Icônes décoratives et filets d'accent : retirés */
.site-footer__section-icon,
.site-footer__section-accent,
.site-footer__copyright-icon {
  display: none;
}

.site-footer__list {
  display: grid;
  gap: var(--space-1);
}

.site-footer__list--links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  color: var(--ink-invert-2);
  transition: color 0.18s ease;
}

.site-footer__list--links a:hover {
  color: var(--ink-invert);
}

.site-footer__chevron {
  display: inline-flex;
  width: 14px;
  height: 14px;
  flex: none;
  color: #f0ab8b;
  transition: transform 0.18s ease;
}

.site-footer__chevron svg {
  width: 100%;
  height: 100%;
}

.site-footer__list--links a:hover .site-footer__chevron {
  transform: translateX(3px);
}

.site-footer__list--contact {
  gap: var(--space-3);
}

.site-footer__list--contact li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
}

.site-footer__contact-icon {
  display: inline-flex;
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 3px;
  color: #f0ab8b;
}

.site-footer__contact-icon svg {
  width: 100%;
  height: 100%;
}

.site-footer__list--contact a:hover {
  color: var(--ink-invert);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer__contact-block small {
  display: block;
  margin-top: 4px;
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.55);
}

.site-footer__policies {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--line-dark);
}

.site-footer__policies .site-footer__section-title {
  margin-bottom: 0;
}

.site-footer__policy-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}

.site-footer__policy-list a {
  font-size: var(--text-sm);
  color: var(--ink-invert-2);
  transition: color 0.18s ease;
}

.site-footer__policy-list a:hover {
  color: var(--ink-invert);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-5);
}

.site-footer__copyright,
.site-footer__signature {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 0;
}

.site-footer__signature a {
  color: var(--ink-invert-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 19. Éléments flottants ================================================ */

.cookie-banner {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  width: min(880px, calc(100vw - 32px));
  padding: var(--space-4) var(--space-5);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
  color: var(--ink-2);
}

.cookie-banner p {
  flex: 1 1 340px;
  margin-bottom: 0;
}

.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-left: auto;
}

.floating-whatsapp {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px 18px;
  background: var(--success);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
  transition: transform 0.18s ease;
}

.floating-whatsapp:hover {
  transform: translateY(-2px);
}

.floating-whatsapp__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  font-size: var(--text-xs);
  font-weight: 700;
}

/* 20. Animations ======================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* 21. Responsive ======================================================== */

/* Avec le bloc d'appel dans la barre, la navigation horizontale ne tient
   plus sous 1180 px : le menu burger prend le relais à partir de ce palier,
   le numéro restant visible dans la barre. */
@media (max-width: 1180px) {
  .nav-toggle {
    display: flex;
  }

  .site-header__panel {
    position: fixed;
    inset: var(--header-height) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    padding: var(--space-5);
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  }

  .site-header__panel.is-open {
    transform: none;
    opacity: 1;
    visibility: visible;
  }

  .site-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .site-nav__link {
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--line);
    font-size: var(--text-base);
  }

  .site-nav__link::after {
    left: 0;
    right: auto;
    width: 24px;
    bottom: 12px;
  }

  .site-header__cta {
    margin-top: var(--space-3);
  }

  /* Le menu passe en burger : le bloc d'appel se resserre pour cohabiter
     avec la marque et le bouton, sans jamais masquer le numéro. */
  .site-header__call {
    margin-left: auto;
    margin-right: var(--space-3);
    padding: 5px 12px 5px 5px;
    gap: var(--space-2);
  }

  .site-header__call-label {
    display: none;
  }

  .site-header__call-icon {
    width: 30px;
    height: 30px;
  }
}

@media (max-width: 1080px) {
  .hero__grid,
  .page-hero__grid,
  .two-column,
  .hero-summary-card,
  .lead-form-card__intro--with-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero__panel,
  .page-hero__panel {
    max-width: 640px;
  }

  .site-footer__top {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }

  .timeline-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

  .timeline-card {
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 860px) {
  :root {
    --header-height: 68px;
  }

  .public-service-banner__image {
    width: 100%;
  }

  .hero__actions {
    gap: var(--space-3);
  }
}

@media (max-width: 640px) {
  :root {
    --container: calc(100vw - 32px);
    --section-gap: 48px;
  }

  body {
    font-size: 1rem;
  }

  .hero,
  .page-hero {
    padding-top: var(--space-7);
  }

  .hero-summary-card,
  .lead-form-card,
  .proof-banner,
  .balloon-system-panel,
  .offer-card,
  .official-note,
  .card,
  .checklist-card {
    padding: var(--space-5);
  }

  .hero__actions .button {
    width: 100%;
  }

  .faq-item summary {
    font-size: var(--text-base);
    gap: var(--space-3);
  }

  .form-actions .button {
    width: 100%;
    font-size: var(--text-base);
  }

  .contact-info-card__row {
    align-items: flex-start;
    flex-direction: column;
  }

  .cookie-banner {
    left: 16px;
    right: 16px;
    transform: none;
    width: auto;
  }

  .cookie-banner__actions {
    width: 100%;
  }

  .cookie-banner__actions .button {
    flex: 1 1 auto;
  }

  .floating-whatsapp {
    right: 16px;
    bottom: 84px;
  }

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Sur mobile seulement, la signature cède la place au numéro. Le pied de
     page, lui, la conserve. */
  .site-header .brand__copy small {
    display: none;
  }

  .site-header__inner {
    gap: var(--space-3);
  }

  .site-header__call-number {
    font-size: 1rem;
  }
}

/* Sur les écrans les plus étroits, le nom reste affiché entre le logo et le
   numéro, mais empilé sur deux lignes. Chaque élément de la barre se resserre
   d'un cran pour que les trois cohabitent sans se chevaucher. */
@media (max-width: 540px) {
  .site-header__inner {
    gap: var(--space-2);
  }

  .site-header .brand {
    gap: var(--space-2);
  }

  .site-header .brand__mark {
    width: 38px;
    height: 38px;
  }

  .site-header .brand__name {
    display: flex;
    flex-direction: column;
    font-size: 0.875rem;
    line-height: 1.05;
    letter-spacing: 0;
  }

  .site-header__call {
    margin-right: var(--space-2);
    padding: 4px 10px 4px 4px;
  }

  .site-header__call-icon {
    width: 28px;
    height: 28px;
  }

  .site-header__call-number {
    font-size: 0.9375rem;
  }
}

/* Dernier cran, pour les téléphones les plus étroits. */
@media (max-width: 380px) {
  .site-header .brand__mark {
    width: 34px;
    height: 34px;
  }

  .site-header .brand__name {
    font-size: 0.8125rem;
  }

  .site-header__call {
    gap: 6px;
    padding: 4px 6px 4px 4px;
  }

  .site-header__call-icon {
    width: 24px;
    height: 24px;
  }

  .site-header__call-number {
    font-size: 0.8125rem;
  }

  .nav-toggle {
    width: 40px;
    height: 40px;
    padding: 0 9px;
  }
}

@media print {
  .site-header,
  .site-footer,
  .cookie-banner,
  .floating-whatsapp,
  .lead-form-card {
    display: none !important;
  }
}