/* ==========================================================================
   RénoConseil — Feuille de style principale
   Sommaire
   01. Reset et base            08. Comment ça marche
   02. Utilitaires et layout    09. Conseils / ressources
   03. Boutons et liens         10. Pourquoi RénoConseil
   04. Header et navigation     11. FAQ
   05. Hero et formulaire       12. CTA final
   06. Réassurance / piliers    13. Footer
   07. Solutions et aides       14. Pages légales, animations, impression
   ========================================================================== */

/* ==========================================================================
   01. Reset et base
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  /* Les ancres ne passent pas sous le header collant */
  scroll-padding-top: calc(var(--header-h) + var(--s-3));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--c-page);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  /* Chiffres de largeur constante : les prix, codes postaux et numéros
     ne « dansent » pas d'une ligne à l'autre. */
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-title);
  color: var(--c-primary);
  margin: 0 0 var(--s-2);
  letter-spacing: -.015em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); font-weight: 700; line-height: var(--lh-h1); letter-spacing: -.03em; }
h2 { font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-h2); letter-spacing: -.025em; }
h3 { font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-h3); }
h4 { font-size: var(--fs-h4); font-weight: 600; line-height: 1.35; }

p { margin: 0 0 var(--s-2); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--c-primary); text-decoration-thickness: 1px; text-underline-offset: .18em; }

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

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

strong { font-weight: 600; }

/* Un focus visible, dessiné — jamais supprimé. */
:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 3px;
  border-radius: 3px;
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--c-accent); color: var(--c-primary); }

/* Lien d'évitement pour la navigation au clavier */
.skip-link {
  position: absolute;
  left: var(--s-2);
  top: -100px;
  z-index: 999;
  padding: var(--s-1) var(--s-3);
  background: var(--c-primary);
  color: var(--c-white);
  border-radius: var(--r-btn);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--t-fast);
}
.skip-link:focus { top: var(--s-2); }

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

/* ==========================================================================
   02. Utilitaires et layout
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Les sections « claires » reprennent le fond de page ; seules les bandes
   teintées ou sombres posent un aplat. */
.section { padding-block: var(--s-section); }
.section--tight  { padding-block: calc(var(--s-section) * .7); }

/* Bande minérale. Même mécanisme que la section Aides : sur ce fond plus
   soutenu, le bleu ardoise nominal tomberait à 4,29:1. La redéfinition du
   jeton bascule toute la section sur la variante conforme (4,7:1). */
.section--mineral {
  background: var(--c-mineral-deep);
  --c-secondary: var(--c-secondary-tint);
}

/* Bande sombre — ancre visuelle à mi-page. Le CTA final et le pied de page
   posaient le seul aplat foncé, tout en bas : la page n'avait aucun point
   d'appui avant. Les jetons sont redéfinis pour la section entière plutôt
   que couleur par couleur. */
.section--deep {
  background: var(--c-primary);
  color: var(--c-white);
  --c-secondary: var(--c-accent);
  --c-border: rgba(255, 255, 255, .18);
  --c-border-strong: rgba(255, 255, 255, .28);
}
.section--deep h2,
.section--deep h3 { color: var(--c-white); }
.section--deep .section-head p { color: var(--c-accent-bright); }
.section--deep .eyebrow { color: var(--c-accent); }
.section--deep .eyebrow::before { background: var(--c-accent); opacity: .6; }
/* Le focus dessiné en bleu profond disparaîtrait sur ce fond. */
.section--deep :focus-visible { outline-color: var(--c-white); }

/* En-tête de section : surtitre, titre, chapô — rythme constant partout */
.section-head { max-width: 720px; margin-bottom: clamp(2.5rem, 1.8rem + 2.8vw, 3.5rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p {
  color: var(--c-secondary);
  font-size: var(--fs-lead);
  line-height: 1.55;
  margin-top: var(--s-3);
  max-width: 58ch;
}
.section-head--center p { margin-inline: auto; }

/* Surtitre : petites capitales espacées, précédées d'un filet.
   Signature graphique du site — remplace les badges colorés. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-title);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-secondary);
  margin: 0 0 var(--s-3);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--c-accent);
  flex: none;
}
.section-head--center .eyebrow { justify-content: center; }

.lead { font-size: var(--fs-lead); color: var(--c-secondary); }
.text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }
.muted { color: var(--c-secondary); }

/* Grilles réutilisables */
.grid { display: grid; gap: var(--s-3); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--steps { gap: clamp(1.5rem, .6rem + 3vw, 3rem); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Carte de base */
.card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}

/* ==========================================================================
   03. Boutons et liens
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  min-height: 48px;              /* zone tactile confortable */
  padding: 14px 22px;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  font-family: var(--font-title);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast),
              border-color var(--t-fast), box-shadow var(--t-fast),
              transform var(--t-fast);
}
/* Le bouton s'enfonce sous le doigt. Sans ce retour, le clic reste sans
   réponse tant que la page suivante n'est pas là. */
.btn:active { transform: scale(.98); }

.btn--primary {
  background: var(--c-primary);
  color: var(--c-white);
  box-shadow: var(--sh-xs);
}
.btn--primary:hover { background: var(--c-primary-hover); box-shadow: var(--sh-sm); }
.btn--primary:active { background: var(--c-primary-press); box-shadow: none; }

.btn--secondary {
  background: var(--c-white);
  color: var(--c-primary);
  border-color: var(--c-primary);
}
.btn--secondary:hover { background: var(--c-accent-softer); }

/* Bouton clair, posé sur le bleu profond */
.btn--light { background: var(--c-white); color: var(--c-primary); }
.btn--light:hover { background: var(--c-accent-soft); }

.btn--block { width: 100%; }
.btn--lg { min-height: 54px; padding: 16px 28px; font-size: var(--fs-body); }

/* Lien tertiaire : « En savoir plus → ». La flèche avance au survol. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  font-family: var(--font-title);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-primary);
  text-decoration: none;
}
.link-arrow::after {
  content: "→";
  transition: transform var(--t-fast);
}
.link-arrow:hover { text-decoration: underline; }
.link-arrow:hover::after { transform: translateX(3px); }

/* ==========================================================================
   04. Header et navigation
   ========================================================================== */

.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--c-white);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
/* Classe posée par le script après quelques pixels de défilement */
.header.is-scrolled {
  border-bottom-color: var(--c-border);
  box-shadow: var(--sh-xs);
}

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

.header__logo { display: flex; align-items: center; flex: none; }
.header__logo img { height: 40px; width: auto; }

.nav { display: flex; align-items: center; gap: clamp(.5rem, .1rem + 1.4vw, 1.75rem); }

.nav__link {
  position: relative;
  padding: var(--s-1) 2px;
  font-family: var(--font-title);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-secondary);
  text-decoration: none;
  transition: color var(--t-fast);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--c-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base);
}
.nav__link:hover { color: var(--c-primary); }
.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); }
/* La section courante n'est pas signalée que par la couleur : le filet
   sous le lien porte la même information. */
.nav__link.is-active { color: var(--c-primary); font-weight: 600; }

.header__cta { flex: none; }

/* Bouton burger */
.burger {
  display: none;
  width: 46px; height: 46px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--c-border);
  border-radius: var(--r-btn);
  cursor: pointer;
  color: var(--c-primary);
}
.burger:hover { background: var(--c-mineral); }
.burger__box { position: relative; width: 20px; height: 14px; }
.burger__line {
  position: absolute;
  left: 0;
  width: 100%; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--t-base), opacity var(--t-fast);
}
.burger__line:nth-child(1) { top: 0; }
.burger__line:nth-child(2) { top: 6px; }
.burger__line:nth-child(3) { top: 12px; }
.burger[aria-expanded="true"] .burger__line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__line:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Panneau mobile */
.drawer {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: var(--z-drawer);
  background: var(--c-white);
  padding: var(--s-3) var(--gutter) var(--s-5);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base);
}
.drawer.is-open { opacity: 1; visibility: visible; transform: none; }
.drawer__link {
  display: block;
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--c-border);
  font-family: var(--font-title);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--c-primary);
  text-decoration: none;
}
.drawer .btn { margin-top: var(--s-3); }
body.no-scroll { overflow: hidden; }

/* ==========================================================================
   05. Hero et formulaire
   ========================================================================== */

.hero {
  position: relative;
  background: var(--c-white);
  padding-block: clamp(2rem, 1.4rem + 2.4vw, 2.75rem);
  overflow: hidden;
}

/* La photographie occupe le flanc droit sur toute la hauteur du Hero.
   Un dégradé la ramène progressivement vers le texte, qui reste ainsi
   parfaitement lisible sans cartouche ni voile opaque.

   Le fondu s'arrêtait auparavant à 52 % : il effaçait la moitié gauche de
   l'image, et il ne restait de la photographie que deux bandes étroites de
   part et d'autre de la carte. Le texte s'arrête en réalité à 4 % de la
   largeur de l'image — le dégradé n'a donc à protéger que cette marge. */
.hero__photo {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 58%;
  z-index: 0;
  /* La photographie se terminait sur une coupe horizontale nette, en plein
     milieu du blanc. Elle se dissout maintenant dans le fond de page. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 76%, transparent 99%);
          mask-image: linear-gradient(180deg, #000 0%, #000 76%, transparent 99%);
}
.hero__photo picture, .hero__photo img { width: 100%; height: 100%; }
.hero__photo img { object-fit: cover; object-position: center 42%; }
.hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* Fondu latéral, resserré sur la zone réellement occupée par le texte */
    linear-gradient(90deg,
              var(--c-page) 0%,
              rgba(251, 252, 253, .92) 5%,
              rgba(251, 252, 253, .55) 15%,
              rgba(251, 252, 253, .12) 30%,
              rgba(251, 252, 253, 0) 44%),
    /* Voile bleu très léger : rattache la photographie à la charte et calme
       les verts de la pelouse, qui tiraient l'œil hors du titre. */
    linear-gradient(200deg, rgba(23, 59, 87, .10), rgba(23, 59, 87, 0) 55%);
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: clamp(1.5rem, .5rem + 3.5vw, 3.5rem);
  align-items: center;
  /* Le Hero se cale sur la hauteur d'écran restante, sans jamais l'excéder :
     le titre, la preuve et le formulaire tiennent ensemble au premier coup
     d'œil. Le plancher garde la composition tenable sur écran bas. */
  min-height: clamp(540px, calc(100vh - var(--header-h) - 6rem), 660px);
}

.hero__content { max-width: 620px; }
/* Deux lignes, jamais trois : « Les bons choix / pour mieux rénover. » La
   mesure doit laisser passer la seconde ligne entière, sinon l'équilibrage
   automatique casse le titre en trois. */
.hero__title { max-width: 11em; margin-bottom: var(--s-3); }
.hero__text {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--c-secondary);
  max-width: 44ch;
  margin-bottom: var(--s-4);
}

/* Réassurance du Hero : coches discrètes, jamais des badges criards.
   Le filet supérieur les détache du paragraphe : sans lui, la liste se lisait
   comme une quatrième ligne de texte. */
.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-border);
  max-width: 34em;
  font-family: var(--font-title);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-secondary);
}
.hero__proof li { display: flex; align-items: center; gap: .55em; }
.hero__proof svg {
  width: 17px; height: 17px;
  color: var(--c-primary);
  flex: none;
}

/* Carte formulaire flottante. Posée sur la photographie, elle demande une
   ombre à deux couches : sans le contact court, elle semble collée à l'image. */
.form-card {
  background: var(--c-white);
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: var(--r-form);
  box-shadow: var(--sh-xl);
  padding: clamp(1.375rem, 1.05rem + 1.1vw, 1.75rem);
}
.hero__form { position: relative; z-index: 2; }

.form-card__title { font-size: 1.375rem; margin-bottom: 4px; }
.form-card__sub {
  font-size: var(--fs-sm);
  color: var(--c-secondary);
  margin-bottom: var(--s-3);
}

.field { margin-bottom: 12px; }

/* Téléphone et code postal partagent une ligne : la carte reste dans la
   hauteur d'écran sans qu'aucun champ ne devienne étroit. */
.field-row {
  display: grid;
  grid-template-columns: 1fr 108px;
  gap: var(--s-1);
}
.field-row .field { margin-bottom: 12px; }
.field__label {
  display: block;
  font-family: var(--font-title);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-primary);
  letter-spacing: .01em;
  margin-bottom: 6px;
}

.input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  background: var(--c-white);
  color: var(--c-ink);
  border: 1px solid var(--c-field-border);
  border-radius: var(--r-field);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.input::placeholder { color: var(--c-field-hint); }
.input:focus {
  outline: none;
  border-color: var(--c-secondary);
  box-shadow: var(--sh-focus);
}
.input[aria-invalid="true"] { border-color: var(--c-error); }

/* Choix par cartes : moins de friction qu'un menu déroulant */
.choice { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-1); }
.choice--full { grid-template-columns: 1fr; }

.choice__item { position: relative; }
.choice__item input {
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  margin: 0;
  cursor: pointer;
}
.choice__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  min-height: 44px;
  padding: 9px 10px;
  background: var(--c-white);
  border: 1px solid var(--c-field-border);
  border-radius: var(--r-field);
  font-family: var(--font-title);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--c-primary);
  text-align: center;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.choice__item:hover .choice__label { border-color: var(--c-accent); background: var(--c-accent-softer); }
.choice__item input:checked + .choice__label {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--c-white);
  font-weight: 600;
}
/* L'état sélectionné ne repose pas que sur la couleur : une coche l'accompagne */
.choice__item input:checked + .choice__label::before { content: "✓"; font-size: .85em; }
.choice__item input:focus-visible + .choice__label {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

.field__error {
  display: none;
  align-items: center;
  gap: .4em;
  margin-top: 6px;
  font-size: var(--fs-xs);
  color: var(--c-error);
}
.field__error.is-visible { display: flex; }
.field__error::before { content: "!"; font-weight: 700; }

.form-card .btn { margin-top: 6px; }

.form-note {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--c-secondary);
  text-align: center;
}

/* État de succès */
.form-success { display: none; text-align: center; padding: var(--s-2) 0; }
.form-success.is-visible { display: block; }
.form-success__icon {
  width: 56px; height: 56px;
  margin: 0 auto var(--s-2);
  display: grid;
  place-items: center;
  background: var(--c-accent-soft);
  border-radius: 50%;
  color: var(--c-primary);
}
.form-success__icon svg { width: 26px; height: 26px; }
.form-success h3 { margin-bottom: var(--s-1); }
.form-success p { color: var(--c-secondary); font-size: var(--fs-sm); }

.form-card.is-sent .form-card__head,
.form-card.is-sent form { display: none; }

/* Message d'erreur global (panne réseau) */
.form-alert {
  display: none;
  gap: .5em;
  margin-bottom: var(--s-2);
  padding: 10px 12px;
  background: #FCF2F1;
  border: 1px solid rgba(179, 38, 30, .25);
  border-radius: var(--r-field);
  font-size: var(--fs-xs);
  color: var(--c-error);
}
.form-alert.is-visible { display: flex; }

/* ==========================================================================
   06. Réassurance / piliers
   ========================================================================== */

.reassurance { border-bottom: 1px solid var(--c-border); }

/* Quatre piliers séparés par des filets plutôt que par du vide : la bande se
   lit comme un bandeau construit, et non comme quatre icônes en suspension. */
.reassurance__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.pillar { padding-inline: var(--s-4); }
.pillar:first-child { padding-left: 0; }
.pillar:last-child { padding-right: 0; }
.pillar + .pillar { border-left: 1px solid var(--c-border); }

.pillar__icon {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  margin-bottom: var(--s-3);
  background: var(--c-accent-soft);
  border-radius: 10px;
  color: var(--c-primary);
}
.pillar__icon svg { width: 22px; height: 22px; }
.pillar h3 { font-size: var(--fs-h4); margin-bottom: 6px; }
.pillar p { font-size: var(--fs-sm); color: var(--c-secondary); }

/* ==========================================================================
   07. Solutions et aides
   ========================================================================== */

/* --- 01/02/03 : Comprendre / Comparer / Décider -------------------------
   Trois colonnes séparées par un filet haut, sans encadré. La page comptait
   quatre grilles de cartes blanches identiques d'affilée ; celle-ci n'a pas
   d'image à porter et rien à élever — le filet et le chiffre suffisent, et
   la répétition se casse. */
.step-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: var(--s-3);
  border-top: 2px solid var(--c-primary);
}
/* Trois filets de même poids : c'est le système qui se lit, pas l'exception. */
.step-card__num {
  font-family: var(--font-title);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--ls-eyebrow);
  color: var(--c-secondary);
  margin-bottom: var(--s-3);
  font-variant-numeric: tabular-nums;
}
.step-card h3 { margin-bottom: var(--s-2); }
.step-card p { color: var(--c-secondary); font-size: var(--fs-sm); flex: 1 0 auto; margin-bottom: var(--s-3); }

/* --- Cartes Solutions ---------------------------------------------------- */
.solution-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.solution-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--c-border-strong); }
.solution-card__media { position: relative; overflow: hidden; background: var(--c-mineral); }
.solution-card__media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.solution-card:hover .solution-card__media img { transform: scale(1.04); }
.solution-card__body { display: flex; flex-direction: column; flex: 1; padding: var(--s-3); }
.solution-card h3 { margin-bottom: var(--s-1); }
.solution-card p { font-size: var(--fs-sm); color: var(--c-secondary); flex: 1 0 auto; margin-bottom: var(--s-3); }

/* --- Section Aides ------------------------------------------------------- */
/* Sur ce fond teinté, le texte secondaire bascule sur sa variante
   conforme : la redéfinition du jeton suffit pour toute la section. */
.aides {
  background: var(--c-accent-band);
  --c-secondary: var(--c-secondary-tint);
}
.aides__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.aide-card {
  padding: var(--s-4) var(--s-3);
  background: var(--c-white);
  border: 1px solid rgba(23, 59, 87, .08);
  border-radius: var(--r-card);
}
/* Pastille pleine plutôt que contour : sur une bande entièrement pâle, ces
   trois aplats bleus sont le seul point d'appui pour l'œil. */
.aide-card__icon {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  margin-bottom: var(--s-3);
  background: var(--c-primary);
  border-radius: 10px;
  color: var(--c-white);
}
.aide-card__icon svg { width: 21px; height: 21px; }
.aide-card h3 { font-size: var(--fs-h4); margin-bottom: 6px; }
.aide-card p { font-size: var(--fs-sm); color: var(--c-secondary); }

.aides__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid rgba(23, 59, 87, .1);
}
.aides__footer p { font-size: var(--fs-sm); color: var(--c-secondary); max-width: 60ch; }

/* ==========================================================================
   08. Comment ça marche
   ========================================================================== */

.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }

.timeline__step { position: relative; padding-top: var(--s-5); }
/* La ligne de progression, dessinée en fond de chaque étape. Un filet d'un
   pixel disparaissait sur le bleu profond : il est doublé et s'éteint vers
   la droite, ce qui donne au parcours un sens de lecture. */
.timeline__step::before {
  content: "";
  position: absolute;
  top: 20px; left: 0; right: calc(var(--s-4) * -1);
  height: 2px;
  background: linear-gradient(90deg, var(--c-border-strong), var(--c-border));
}
.timeline__step:last-child::before {
  right: 0;
  background: linear-gradient(90deg, var(--c-border-strong), transparent);
}
.timeline__step::after {
  content: "";
  position: absolute;
  top: 14px; left: 0;
  width: 14px; height: 14px;
  background: var(--c-white);
  border: 3px solid var(--c-accent);
  border-radius: 50%;
}
.timeline__step:first-child::after { border-color: var(--c-primary); }

/* Sur fond sombre, la pastille se creuse au lieu de se poser : le disque
   reprend la couleur du fond, l'anneau reste en bleu clair. La première,
   pleine, marque le point de départ. */
.section--deep .timeline__step::after {
  background: var(--c-primary);
  border-color: var(--c-accent);
}
.section--deep .timeline__step:first-child::after {
  background: var(--c-accent-bright);
  border-color: var(--c-accent-bright);
  box-shadow: 0 0 0 5px rgba(182, 206, 219, .18);
}

.timeline__num {
  font-family: var(--font-title);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  color: var(--c-secondary);
  margin-bottom: var(--s-1);
}
.section--deep .timeline__num { color: var(--c-accent-bright); }
.timeline__step h3 { font-size: var(--fs-h3); margin-bottom: var(--s-1); }
.timeline__step p { font-size: var(--fs-sm); color: var(--c-secondary); }

/* ==========================================================================
   09. Conseils / ressources
   ========================================================================== */

.article-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.article-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--c-border-strong); }
.article-card__media { overflow: hidden; }
.article-card__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.article-card:hover .article-card__media img { transform: scale(1.04); }
.article-card__body { display: flex; flex-direction: column; flex: 1; padding: var(--s-3); }

.article-card__meta {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  margin-bottom: var(--s-2);
  font-size: var(--fs-xs);
  color: var(--c-secondary);
}
.tag {
  display: inline-block;
  padding: 3px 10px;
  background: var(--c-accent-soft);
  border-radius: var(--r-pill);
  font-family: var(--font-title);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--c-primary);
}
.article-card h3 { font-size: 1.1875rem; margin-bottom: var(--s-3); flex: 1 0 auto; }

/* ==========================================================================
   10. Pourquoi RénoConseil
   ========================================================================== */

.why__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
}
.why__media { border-radius: var(--r-card); overflow: hidden; box-shadow: var(--sh-sm); }
.why__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

.why__list { margin: var(--s-4) 0; display: grid; gap: var(--s-3); }
.why__item { display: flex; gap: var(--s-2); }
.why__item svg { width: 22px; height: 22px; color: var(--c-accent); flex: none; margin-top: 2px; }
.why__item h3 { font-size: var(--fs-h4); margin-bottom: 4px; }
.why__item p { font-size: var(--fs-sm); color: var(--c-secondary); }

/* ==========================================================================
   11. FAQ
   ========================================================================== */

/* Un seul objet, divisé par des filets — et non sept cartes flottantes.
   Sept encadrés arrondis empilés se lisaient comme sept éléments sans lien ;
   la liste unique dit ce qu'elle est : une suite de questions. */
.faq {
  max-width: 820px;
  margin-inline: auto;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  overflow: hidden;
}
.faq__item { transition: background var(--t-fast); }
.faq__item + .faq__item { border-top: 1px solid var(--c-border); }
.faq__item:has(.faq__question[aria-expanded="true"]) { background: var(--c-accent-softer); }

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  width: 100%;
  min-height: 64px;
  padding: var(--s-3);
  background: none;
  border: 0;
  font-family: var(--font-title);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--c-primary);
  text-align: left;
  cursor: pointer;
}
.faq__question:hover { color: var(--c-primary-hover); }
.faq__item:hover { background: var(--c-accent-softer); }

.faq__icon {
  position: relative;
  width: 20px; height: 20px;
  flex: none;
  color: var(--c-secondary);
  transition: color var(--t-fast);
}
.faq__question[aria-expanded="true"] .faq__icon { color: var(--c-primary); }
.faq__icon::before, .faq__icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 13px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform var(--t-base), opacity var(--t-base);
}
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__question[aria-expanded="true"] .faq__icon::after { transform: translate(-50%, -50%) rotate(0); opacity: 0; }

/* Ouverture animée sans mesurer la hauteur en JS */
.faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-base);
}
.faq__answer.is-open { grid-template-rows: 1fr; }
.faq__answer > div { overflow: hidden; }
.faq__answer p {
  padding: 0 var(--s-3) var(--s-3);
  font-size: var(--fs-sm);
  color: var(--c-secondary);
  max-width: 70ch;
}

/* ==========================================================================
   12. CTA final
   ========================================================================== */

.cta-final {
  background: var(--c-primary);
  color: var(--c-white);
  text-align: center;
}
.cta-final h2 { color: var(--c-white); }
.cta-final p {
  color: var(--c-accent-bright);
  font-size: var(--fs-lead);
  max-width: 50ch;
  margin: var(--s-3) auto var(--s-5);
}
/* ==========================================================================
   13. Footer
   ========================================================================== */

.footer {
  background: var(--c-primary);
  color: var(--c-accent);
  padding-block: var(--s-6) var(--s-3);
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--s-4);
  padding-bottom: var(--s-5);
}
.footer__logo img { height: 42px; width: auto; margin-bottom: var(--s-2); }
.footer__baseline {
  font-family: var(--font-title);
  font-size: var(--fs-sm);
  color: var(--c-accent-bright);
  max-width: 30ch;
}

.footer h3 {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-white);
  margin-bottom: var(--s-2);
}
.footer__list li { margin-bottom: 10px; }
.footer__list a {
  font-size: var(--fs-sm);
  color: var(--c-accent-bright);
  text-decoration: none;
  transition: color var(--t-fast);
}
.footer__list a:hover { color: var(--c-white); text-decoration: underline; }

.footer__socials { display: flex; gap: var(--s-1); margin-top: var(--s-3); }
.footer__socials a {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--r-field);
  color: var(--c-white);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.footer__socials a:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .4); }
.footer__socials svg { width: 18px; height: 18px; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding-top: var(--s-3);
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, .65);
}

/* --- Barre d'appel mobile ------------------------------------------------ */
/* Apparaît une fois le Hero dépassé : le trafic social arrive sur mobile et
   ne remonte pas spontanément au formulaire. */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-bar);
  display: none;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--c-border);
  transform: translateY(110%);
  transition: transform var(--t-base);
}
.sticky-cta.is-visible { transform: none; }

/* ==========================================================================
   14. Pages légales, animations, impression
   ========================================================================== */

.legal { padding-block: var(--s-6) var(--s-7); }
.legal__inner { max-width: 760px; margin-inline: auto; }
.legal h1 { margin-bottom: var(--s-2); }
.legal__updated { font-size: var(--fs-xs); color: var(--c-secondary); margin-bottom: var(--s-5); }
.legal h2 { font-size: 1.5rem; margin-top: var(--s-5); margin-bottom: var(--s-2); }
.legal h3 { font-size: 1.125rem; margin-top: var(--s-3); }
.legal p, .legal li { color: var(--c-ink); }
.legal ul { margin: 0 0 var(--s-2) var(--s-3); }
.legal li { list-style: disc; margin-bottom: var(--s-1); padding-left: 4px; }
.legal a { color: var(--c-primary); }
.legal table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--s-2) 0 var(--s-3);
  font-size: var(--fs-sm);
}
.legal th, .legal td {
  padding: 10px 12px;
  border: 1px solid var(--c-border);
  text-align: left;
  vertical-align: top;
}
.legal th { background: var(--c-mineral); font-family: var(--font-title); font-weight: 600; color: var(--c-primary); }

/* Page de remerciement */
.thanks { display: grid; place-items: center; min-height: 70vh; text-align: center; }
.thanks__icon {
  width: 72px; height: 72px;
  display: grid;
  place-items: center;
  margin: 0 auto var(--s-3);
  background: var(--c-accent-soft);
  border-radius: 50%;
  color: var(--c-primary);
}
.thanks__icon svg { width: 34px; height: 34px; }

/* --- Apparition au défilement -------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 500ms var(--ease-out), transform var(--t-slow);
}
.reveal.is-in { opacity: 1; transform: none; }
/* Léger décalage en cascade dans une même grille */
.reveal[data-delay="1"] { transition-delay: 80ms; }
.reveal[data-delay="2"] { transition-delay: 160ms; }
.reveal[data-delay="3"] { transition-delay: 240ms; }

/* ==========================================================================
   Responsive
   ========================================================================== */

/* --- Laptop : 992 → 1199 px --------------------------------------------- */
@media (max-width: 1199px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 350px); min-height: 520px; }
  .hero__photo { width: 54%; }
  .hero__content { max-width: 460px; }
}

/* --- Tablette : 768 → 991 px -------------------------------------------- */
@media (max-width: 991px) {
  :root { --header-h: 68px; }

  .nav, .header__cta { display: none; }
  .burger { display: flex; }

  /* La photo quitte le fond pour se replacer dans le flux, entre le texte
     et le formulaire : c'est l'ordre de lecture attendu sur petit écran. */
  .hero {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    padding-inline: var(--gutter);
  }
  .hero > .container, .hero__grid { display: contents; }

  .hero__content { order: 1; max-width: none; }
  .hero__photo   { order: 2; position: static; width: 100%; }
  .hero__form    { order: 3; }

  .hero__title { max-width: 14ch; }
  .hero__text { max-width: none; margin-bottom: var(--s-3); }
  .hero__proof { max-width: none; }
  .hero__photo picture { display: block; }
  .hero__photo img {
    aspect-ratio: 16 / 9;
    height: auto;
    border-radius: var(--r-card);
  }
  /* Remise à plat des deux fondus : dans le flux, la photographie est une
     image à part entière, pas un fond à estomper. */
  .hero__photo::after { display: none; }
  .hero__photo {
    -webkit-mask-image: none;
            mask-image: none;
  }

  .grid--4, .reassurance__grid, .timeline { grid-template-columns: repeat(2, 1fr); }
  .grid--3, .aides__grid { grid-template-columns: repeat(2, 1fr); }

  /* Sur deux colonnes, les filets verticaux ne tomberaient plus juste :
     la bande revient à un espacement simple. */
  .reassurance__grid { gap: var(--s-4) var(--s-3); }
  .pillar { padding-inline: 0; }
  .pillar + .pillar { border-left: 0; }

  .timeline__step:nth-child(2)::before { right: 0; }

  .why__grid { grid-template-columns: 1fr; }
  .why__media { max-width: 520px; }
  .why__media img { aspect-ratio: 3 / 2; }

  .footer__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-4) var(--s-3); }

  .sticky-cta { display: block; }
}

/* --- Mobile : < 768 px ---------------------------------------------------- */
@media (max-width: 767px) {
  .grid--3, .grid--4, .aides__grid, .timeline { grid-template-columns: 1fr; }

  .reassurance__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-4) var(--s-3); }

  /* Empilées, les trois étapes n'ont plus besoin d'un filet chacune : seule
     la première porte le trait fort, les suivantes un simple séparateur. */
  .grid--steps { gap: var(--s-4); }
  .step-card__num { margin-bottom: var(--s-2); }

  /* Timeline verticale */
  .timeline__step { padding: 0 0 var(--s-4) var(--s-4); }
  .timeline__step::before {
    top: 8px; bottom: -8px; left: 7px; right: auto;
    width: 1px; height: auto;
  }
  .timeline__step:last-child::before { display: none; }
  .timeline__step::after { top: 4px; left: 0; }
  .timeline__step:last-child { padding-bottom: 0; }

  .aides__footer { flex-direction: column; align-items: flex-start; }
  .aides__footer .btn { width: 100%; }

  .cta-final .btn, .hero .btn { width: 100%; }

  .footer__grid { grid-template-columns: 1fr; gap: var(--s-4); }
  .footer__bottom { flex-direction: column; align-items: flex-start; }

  .section-head { margin-bottom: var(--s-4); }
}

@media (max-width: 400px) {
  .choice { grid-template-columns: 1fr; }
  .reassurance__grid { grid-template-columns: 1fr; }
}

/* --- Préférences d'accessibilité ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media (prefers-contrast: more) {
  :root { --c-border: rgba(23, 59, 87, .3); --c-secondary: #3F5B70; }
}

@media print {
  .header, .drawer, .sticky-cta, .cta-final, .hero__visual, .footer__socials { display: none !important; }
  body { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; }
}