/* ============================================================
   SOCLE DE LA REFONTE (24/09/2026), partagé à l'origine par les bancs d'essai
   de la refonte (aujourd'hui disparus, remplacés par la maquette validée).
   Toutes les classes commencent par rf- : rien ne fuit sur le site.

   Le système en cinq règles :
   1. Une police (Inter), trois graisses (400, 600, 700).
   2. Cinq tailles de texte, pas une de plus : petit 14, corps 17,
      intertitre 20, titre de section 28 à 40, titre de page 36 à 60.
      Les grands chiffres suivent la taille du titre de section.
   3. Trois couleurs de texte : encre, gris, bleu profond des liens.
      Le cyan de la marque sert aux données et aux accents, jamais au
      texte courant (2,8:1 sur blanc, illisible pour un paragraphe).
   4. Paragraphes à 60 caractères de large au plus.
   5. Un seul jeu d'arrondis : ce qui se clique est en pilule, ce qui
      contient est à 16 px.
   ============================================================ */

.rf {
  --rf-encre:        #0B1220;
  --rf-gris:         #4B5563;
  --rf-gris-clair:   #64748B;
  --rf-lien:         #0369A1;
  --rf-accent:       #0EA5E9;
  --rf-accent-doux:  #E3F3FB;
  --rf-neutre:       #CBD5E1;
  --rf-ligne:        #E2E8F0;
  --rf-blanc:        #FFFFFF;

  --rf-t-petit:  0.875rem;
  --rf-t-corps:  1.0625rem;
  --rf-t-inter:  1.25rem;
  --rf-t-titre:  clamp(1.75rem, 1.15rem + 1.6vw, 2.5rem);
  --rf-t-page:   clamp(2.25rem, 1.3rem + 3.2vw, 3.75rem);

  --rf-marge-section: clamp(4rem, 2.8rem + 4.5vw, 7.5rem);
  --rf-rayon: 16px;
  --rf-sortie: cubic-bezier(0.16, 1, 0.3, 1);

  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--rf-t-corps);
  line-height: 1.6;
  color: var(--rf-encre);
  font-feature-settings: 'cv11', 'ss01';
}

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

.rf-wrap {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* Titres et texte, les seuls styles de texte de la page */

.rf-h1 {
  font-size: var(--rf-t-page);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
  margin: 0;
}

.rf-h2 {
  font-size: var(--rf-t-titre);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: balance;
  margin: 0 0 16px;
}

.rf-h3 {
  font-size: var(--rf-t-inter);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

.rf-texte {
  max-width: 60ch;
  color: var(--rf-gris);
  margin: 0 0 24px;
  text-wrap: pretty;
}

.rf-texte--discret {
  font-size: var(--rf-t-petit);
  color: var(--rf-gris-clair);
  margin-bottom: 16px;
}

.rf-texte a,
.rf-texte--discret a,
.rf-faq__liste a {
  color: var(--rf-lien);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.rf-surtitre {
  font-size: var(--rf-t-petit);
  font-weight: 600;
  color: var(--rf-lien);
  margin: 0 0 16px;
}

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

/* Boutons : un plein, un lien fléché, rien d'autre */

.rf-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
}

.rf-actions--centre {
  justify-content: center;
}

.rf-btn {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 14px 28px;
  border-radius: 999px;
  background: var(--rf-encre);
  color: var(--rf-blanc);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.25s var(--rf-sortie), background-color 0.25s ease, box-shadow 0.25s ease;
}

.rf-btn:hover {
  background: #1E293B;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -10px rgba(11, 18, 32, 0.45);
}

.rf-btn:active {
  transform: translateY(0) scale(0.98);
}

.rf-btn:focus-visible,
.rf-lien-fleche:focus-visible,
.rf-ville:focus-visible,
.rf-pastille:focus-visible {
  outline: 3px solid var(--rf-accent);
  outline-offset: 3px;
}

.rf-lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--rf-encre);
  text-decoration: none;
}

.rf-lien-fleche::after {
  content: '→';
  transition: transform 0.25s var(--rf-sortie);
}

.rf-lien-fleche:hover::after {
  transform: translateX(4px);
}

/* 1. Haut de page */

.rf-hero {
  padding: 40px 0 var(--rf-marge-section);
}

/* Le titre prend toute la largeur (2 lignes), la réponse chiffrée vient dessous. */
.rf-hero__tete .rf-h1 {
  max-width: 17em;
}

/* Seconde moitié du titre en bleu profond : du relief sans ajouter de taille. */
.rf-h1__suite {
  display: block;
  color: var(--rf-lien);
}

.rf-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
  margin-top: 40px;
}

.rf-ariane {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: var(--rf-t-petit);
  color: var(--rf-gris-clair);
  margin-bottom: 40px;
}

.rf-ariane a {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.rf-ariane a:hover {
  color: var(--rf-encre);
}

/* Une intro posée juste sous le titre garde son souffle (dans la grille du
   haut de page, c'est l'écart de la grille qui le donne). */
.rf-h1 + .rf-intro,
.rf-hero__tete + .rf-wrap > .rf-intro {
  margin-top: 24px;
}

.rf-intro {
  max-width: 40ch;
  font-size: var(--rf-t-inter);
  line-height: 1.5;
  color: var(--rf-gris);
  margin: 0 0 36px;
  text-wrap: pretty;
}

/* La carte des prix : la seule carte du haut, parce qu'elle porte la réponse. */
.rf-prix {
  margin: 0;
  padding: 32px;
  background: var(--rf-blanc);
  border: 1px solid var(--rf-ligne);
  border-radius: var(--rf-rayon);
  box-shadow: 0 1px 2px rgba(11, 18, 32, 0.04), 0 24px 48px -24px rgba(3, 105, 161, 0.22);
}

.rf-prix__titre {
  font-size: var(--rf-t-petit);
  font-weight: 600;
  color: var(--rf-gris-clair);
  margin: 0 0 24px;
}

.rf-barre {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.rf-barre__nom {
  font-size: var(--rf-t-petit);
  font-weight: 600;
  color: var(--rf-gris);
}

.rf-barre__piste {
  display: block;
}

.rf-barre__jauge {
  display: block;
  width: var(--part);
  height: 14px;
  border-radius: 999px;
  background: var(--rf-neutre);
  transform-origin: left center;
}

.rf-barre__jauge--accent {
  background: var(--rf-accent);
}

.rf-barre__valeur {
  min-width: 5.5ch;
  font-size: var(--rf-t-inter);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.rf-prix__ecart {
  margin: 24px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--rf-ligne);
  color: var(--rf-gris);
}

.rf-prix__ecart strong {
  color: var(--rf-encre);
  font-weight: 700;
}

.rf-prix__source {
  margin-top: 8px;
  font-size: var(--rf-t-petit);
  color: var(--rf-gris-clair);
}

/* 2. Repères : trois chiffres séparés par un filet, sans cartes */

.rf-reperes__rangee {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--rf-ligne);
  border-bottom: 1px solid var(--rf-ligne);
  padding-block: 40px;
}

.rf-repere {
  padding-inline: 32px;
}

.rf-repere:first-child {
  padding-left: 0;
}

.rf-repere + .rf-repere {
  border-left: 1px solid var(--rf-ligne);
}

.rf-repere__nombre {
  font-size: var(--rf-t-titre);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin: 0 0 12px;
}

.rf-repere__texte {
  max-width: 26ch;
  color: var(--rf-gris);
  margin: 0;
}

/* Sections */

.rf-section {
  padding-block: var(--rf-marge-section);
}

.rf-section--serre {
  padding-top: 0;
}

.rf-section--teinte {
  background: var(--rf-blanc);
  border-block: 1px solid var(--rf-ligne);
}

.rf-entete {
  margin-bottom: 40px;
}

/* 3. Ce qui change */

.rf-duo {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}

.rf-comparatif {
  width: 100%;
  border-collapse: collapse;
}

.rf-comparatif th,
.rf-comparatif td {
  padding: 16px 12px;
  text-align: left;
  vertical-align: top;
}

.rf-comparatif thead th {
  font-size: var(--rf-t-petit);
  font-weight: 600;
  color: var(--rf-gris-clair);
  padding-top: 0;
}

.rf-comparatif tbody tr + tr {
  border-top: 1px solid var(--rf-ligne);
}

.rf-comparatif tbody th {
  width: 34%;
  padding-left: 0;
  font-weight: 600;
}

.rf-comparatif td {
  color: var(--rf-gris);
}

.rf-comparatif__commun {
  text-align: center;
}

.rf-identique {
  display: block;
  font-size: var(--rf-t-petit);
  font-weight: 600;
  color: var(--rf-lien);
}

.rf-comparatif__fort {
  font-weight: 700;
  color: var(--rf-encre);
}

.rf-comparatif tbody td.rf-comparatif__commun {
  color: var(--rf-encre);
  text-align: center;
}

.rf-heures {
  padding: 32px;
  background: var(--rf-blanc);
  border: 1px solid var(--rf-ligne);
  border-radius: var(--rf-rayon);
}

.rf-heures__liste {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 14px;
}

.rf-heures__ligne {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 14px;
}

.rf-heures__valeur {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.rf-heures__jauge {
  display: block;
  width: var(--part);
  height: 10px;
  border-radius: 999px;
  background: var(--rf-accent);
  transform-origin: left center;
  transition: transform 1s var(--rf-sortie) 0.2s;
}

.rf-heures__part {
  font-size: var(--rf-t-petit);
  color: var(--rf-gris-clair);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* 4. Villes : vignettes, puis pastilles */

.rf-villes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.rf-ville {
  display: grid;
  gap: 4px;
  height: 100%;
  padding: 24px;
  background: var(--rf-blanc);
  border: 1px solid var(--rf-ligne);
  border-radius: var(--rf-rayon);
  color: var(--rf-encre);
  text-decoration: none;
  transition: transform 0.3s var(--rf-sortie), border-color 0.3s ease, box-shadow 0.3s ease;
}

.rf-ville:hover {
  transform: translateY(-3px);
  border-color: var(--rf-accent);
  box-shadow: 0 16px 32px -20px rgba(3, 105, 161, 0.35);
}

.rf-ville__nom {
  font-size: var(--rf-t-inter);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.rf-ville__nb {
  font-size: var(--rf-t-petit);
  color: var(--rf-gris-clair);
  margin-bottom: 16px;
}

.rf-ville__prix {
  margin-top: auto;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.rf-ville__prix small {
  font-size: var(--rf-t-petit);
  font-weight: 400;
  color: var(--rf-gris-clair);
}

.rf-villes__sous-titre {
  margin: 40px 0 12px;
  font-size: var(--rf-t-petit);
  font-weight: 600;
  color: var(--rf-gris-clair);
}

.rf-pastilles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rf-pastille {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--rf-ligne);
  border-radius: 999px;
  font-size: var(--rf-t-petit);
  font-weight: 600;
  color: var(--rf-encre);
  text-decoration: none;
  background: var(--rf-blanc);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.rf-pastille span {
  font-weight: 400;
  color: var(--rf-gris-clair);
}

.rf-pastille:hover {
  border-color: var(--rf-accent);
  background: var(--rf-accent-doux);
}

/* 5. Avant de choisir : deux colonnes, un filet d'accent */

.rf-savoir {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px 64px;
  margin-top: 48px;
}

.rf-savoir__bloc {
  padding-top: 24px;
  border-top: 1px solid var(--rf-ligne);
  position: relative;
}

.rf-savoir__bloc::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 48px;
  height: 2px;
  background: var(--rf-accent);
}

.rf-savoir__bloc .rf-texte {
  margin-bottom: 0;
}

/* 6. Questions */

.rf-faq {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 64px;
}

.rf-faq__liste {
  margin: 0;
  display: grid;
  gap: 32px;
}

.rf-faq__item dt {
  font-size: var(--rf-t-inter);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}

.rf-faq__item dd {
  margin: 0;
  max-width: 60ch;
  color: var(--rf-gris);
}

/* 7. Appel final */

.rf-final {
  padding-bottom: var(--rf-marge-section);
}

.rf-final__boite {
  max-width: 1132px;
  padding: clamp(48px, 6vw, 88px) 24px;
  background: var(--rf-accent-doux);
  border-radius: var(--rf-rayon);
  text-align: center;
}

.rf-final__titre {
  font-size: var(--rf-t-titre);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin: 0 0 12px;
}

.rf-final__texte {
  color: var(--rf-gris);
  margin: 0 0 32px;
}

/* 8. Méthode : en bas, en petit, lisible */

.rf-methode {
  padding: 48px 0 72px;
  border-top: 1px solid var(--rf-ligne);
}

.rf-methode__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 64px;
}

.rf-methode__titre {
  font-size: var(--rf-t-corps);
  font-weight: 600;
  margin: 0;
}

.rf-methode__liste {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
  font-size: var(--rf-t-petit);
  color: var(--rf-gris-clair);
  max-width: 72ch;
}

/* Mouvement : uniquement si le visiteur ne l'a pas refusé */

@media (prefers-reduced-motion: no-preference) {
  .rf-hero__tete > *,
  .rf-hero__texte > * {
    animation: rf-monte 0.8s var(--rf-sortie) backwards;
  }

  .rf-hero__tete > :nth-child(2) { animation-delay: 0.05s; }
  .rf-hero__tete > :nth-child(3) { animation-delay: 0.1s; }
  .rf-hero__texte > :nth-child(1) { animation-delay: 0.18s; }
  .rf-hero__texte > :nth-child(2) { animation-delay: 0.26s; }

  .rf-prix {
    animation: rf-monte 0.9s var(--rf-sortie) 0.22s backwards;
  }

  .rf-barre__jauge {
    animation: rf-jauge 1.1s var(--rf-sortie) 0.45s backwards;
  }

  .rf-reveal {
    transition: opacity 0.7s var(--rf-sortie), transform 0.7s var(--rf-sortie);
  }

  .rf-attente {
    opacity: 0;
    transform: translateY(24px);
  }

  .rf-attente .rf-heures__jauge {
    transform: scaleX(0);
  }

  .rf-villes li:nth-child(4n + 2),
  .rf-savoir__bloc:nth-child(2n) { transition-delay: 0.06s; }
  .rf-villes li:nth-child(4n + 3) { transition-delay: 0.12s; }
  .rf-villes li:nth-child(4n + 4) { transition-delay: 0.18s; }
}

@keyframes rf-monte {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
}

@keyframes rf-jauge {
  from {
    transform: scaleX(0);
  }
}

/* Tablette */

@media (max-width: 960px) {
  .rf-hero__grid,
  .rf-duo,
  .rf-faq,
  .rf-methode__grille {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .rf-villes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Téléphone */

@media (max-width: 640px) {
  .rf-wrap {
    padding-inline: 16px;
  }

  .rf-hero {
    padding-top: 24px;
  }

  .rf-ariane {
    margin-bottom: 28px;
  }

  /* Sur téléphone, la page courante est déjà le titre : le fil s'arrête
     au parent, sans séparateur orphelin. */
  .rf-ariane [aria-current],
  .rf-ariane span[aria-hidden]:nth-last-child(2) {
    display: none;
  }

  .rf-hero__grid {
    margin-top: 24px;
  }

  .rf-intro {
    margin: 20px 0 28px;
  }

  .rf-prix,
  .rf-heures {
    padding: 24px 20px;
  }

  .rf-barre {
    grid-template-columns: 76px minmax(0, 1fr) auto;
    gap: 12px;
  }

  .rf-reperes__rangee {
    grid-template-columns: minmax(0, 1fr);
    padding-block: 8px;
  }

  .rf-repere,
  .rf-repere:first-child {
    padding: 24px 0;
  }

  .rf-repere + .rf-repere {
    border-left: 0;
    border-top: 1px solid var(--rf-ligne);
  }

  .rf-villes {
    gap: 10px;
  }

  .rf-ville {
    padding: 18px 16px;
  }

  .rf-ville__prix small {
    display: block;
  }

  .rf-savoir {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .rf-comparatif th,
  .rf-comparatif td {
    padding: 14px 8px;
  }

  .rf-actions .rf-btn {
    width: 100%;
    justify-content: center;
  }

  .rf-actions {
    justify-content: center;
  }
}

/* ============================================================
   SOCLE COMMUN (portage de la maquette, 24/09/2026) : fond des pages
   bd-body, variables hors .rf pour les barres fixes, grille de cartes, carte d'auto-ecole,
   badges, barre de comparaison, couverture photo (fiche, ville).
   Exclus (et non repris ailleurs) : « Barre de maquette » et « Message
   de la maquette » (la maquette seule les gardait). Les emplacements de
   publicite et leur garde-fou de largeur sont a la charge de l'etape 4
   (assets/style/components/pubs.css). La section « Haut de l'accueil »
   est dans pages/accueil.css, la « Barre d'heures en mots » dans
   pages/guides.css, l'« Habillage commun des pages reprises » a la fin
   de pages/simulateur.css, matching.css, comparateur.css et autoecole.css.
   ============================================================ */
.bd-body {
  background: #F8FAFC;
}

/* Les variables du socle servent aussi hors de <main class="rf"> (barres fixes). */
.bd-body .bd-barre,
.bd-body .bd-comparer {
  --rf-encre: #0B1220;
  --rf-gris: #4B5563;
  --rf-gris-clair: #64748B;
  --rf-lien: #0369A1;
  --rf-ligne: #E2E8F0;
  /* Sans lui, le texte du bouton « Comparer » (.rf-btn) héritait de l'encre
     du corps : encre sur encre, illisible (repéré le 24/09/2026). */
  --rf-blanc: #FFFFFF;
  --rf-accent: #0EA5E9;
  --rf-sortie: cubic-bezier(0.16, 1, 0.3, 1);
  --rf-t-petit: 0.875rem;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* 1. Grille de cartes */

.bd-grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 1024px) {
  .bd-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .bd-grille { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

/* 2. La carte d'auto-école */

.bd-carte {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--rf-blanc);
  border: 1px solid var(--rf-ligne);
  border-radius: var(--rf-rayon);
  overflow: clip;
  transition: transform 0.35s var(--rf-sortie), box-shadow 0.35s var(--rf-sortie), border-color 0.25s ease;
}

.bd-carte:hover {
  transform: translateY(-3px);
  border-color: var(--rf-neutre);
  box-shadow: 0 24px 48px -28px rgba(11, 18, 32, 0.28);
}

.bd-carte:focus-within {
  border-color: var(--rf-lien);
}

.bd-carte__photo {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #EEF2F6;
  overflow: hidden;
}

.bd-carte__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--rf-sortie);
}

.bd-carte:hover .bd-carte__photo img {
  transform: scale(1.04);
}

.bd-carte__sans-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--rf-neutre);
}

.bd-carte__sans-photo svg {
  width: 56px;
  height: 56px;
}

/* Badges posés sur la photo : pilules, 14 px, fond plein pour rester lisibles sur n'importe quelle image. */
.bd-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(11, 18, 32, 0.72);
  backdrop-filter: blur(6px);
  font-size: var(--rf-t-petit);
  font-weight: 600;
  line-height: 1.5;
  color: #fff;
}

.bd-badge svg {
  width: 15px;
  height: 15px;
}

.bd-badge--nouveau {
  background: var(--rf-lien);
}

.bd-badge--flash {
  background: #B45309;
}

.bd-carte__distance {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  font-size: var(--rf-t-petit);
  font-weight: 600;
  color: var(--rf-encre);
}

.bd-carte__corps {
  flex: 1 1 auto;
  padding: 20px 24px 16px;
}

.bd-carte__tete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.bd-carte__nom {
  margin: 0;
  font-size: var(--rf-t-inter);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--rf-encre);
}

/* Toute la carte mène à la fiche : le lien du nom s'étend sur la carte, le bouton Comparer passe au-dessus. */
.bd-carte__nom a {
  color: inherit;
  text-decoration: none;
}

.bd-carte__nom a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.bd-carte__nom a:focus-visible {
  outline: none;
}

.bd-carte__note {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin: 3px 0 0;
  font-size: var(--rf-t-petit);
  font-weight: 600;
  color: var(--rf-encre);
  font-variant-numeric: tabular-nums;
}

.bd-carte__note svg {
  width: 15px;
  height: 15px;
  color: #F59E0B;
}

.bd-carte__note span {
  font-weight: 400;
  color: var(--rf-gris-clair);
}

.bd-carte__lieu {
  margin: 6px 0 0;
  font-size: var(--rf-t-petit);
  color: var(--rf-gris-clair);
}

.bd-carte__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.bd-carte__tags li {
  padding: 3px 12px;
  border-radius: 999px;
  background: #F1F5F9;
  font-size: var(--rf-t-petit);
  font-weight: 600;
  color: var(--rf-gris);
}

.bd-carte__pied {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 12px;
  padding: 16px 24px 20px;
  border-top: 1px solid var(--rf-ligne);
}

/* L'étiquette prend toute la ligne, le montant et les actions se partagent la suivante. */
.bd-carte__prix {
  display: contents;
}

.bd-carte__etiquette {
  grid-column: 1 / -1;
  font-size: var(--rf-t-petit);
  color: var(--rf-gris-clair);
}

.bd-carte__montant {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--rf-t-inter);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--rf-encre);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bd-carte__montant s {
  font-weight: 400;
  color: var(--rf-gris-clair);
}

/* « Sur demande » n'est pas un montant : en petit, et il passe à la ligne
   plutôt que d'être coupé en « Sur de... » à côté des deux boutons. */
.bd-carte__montant--vide {
  font-size: var(--rf-t-petit);
  line-height: 1.3;
  white-space: normal;
  color: var(--rf-gris);
  font-weight: 600;
}

.bd-carte__actions {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.bd-carte__comparer {
  position: relative;
  z-index: 2;
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid var(--rf-ligne);
  border-radius: 999px;
  background: var(--rf-blanc);
  font-family: inherit;
  font-size: var(--rf-t-petit);
  font-weight: 600;
  color: var(--rf-gris);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.bd-carte__comparer:hover {
  border-color: var(--rf-encre);
  color: var(--rf-encre);
}

.bd-carte__comparer[aria-pressed="true"] {
  background: var(--rf-encre);
  border-color: var(--rf-encre);
  color: #fff;
}

.bd-carte__comparer:focus-visible {
  outline: 2px solid var(--rf-lien);
  outline-offset: 2px;
}

.bd-carte__voir {
  font-size: var(--rf-t-petit);
  font-weight: 600;
  color: var(--rf-lien);
  white-space: nowrap;
}

.bd-carte__voir::after {
  content: '\00A0\2192';
  display: inline-block;
  transition: transform 0.25s var(--rf-sortie);
}

.bd-carte:hover .bd-carte__voir::after {
  transform: translateX(3px);
}

@media (max-width: 400px) {
  .bd-carte__actions { gap: 12px; }

  /* Le prix se coupait (« 1 05… ») : la colonne montant (minmax(0,1fr))
     partageait sa ligne avec les actions (largeur fixe, plus large encore
     une fois « Comparer » devenu « Sélectionnée »), ne lui laissant pas assez
     de place (correction du 25/09/2026, vérificateur adversarial de l'étape
     21, point 4). Sous 400 px, le montant passe sur sa propre ligne, pleine
     largeur, comme l'étiquette juste au-dessus ; les actions descendent d'une
     ligne, alignées à droite. Aucun changement au-dessus de ce seuil. */
  .bd-carte__montant {
    grid-column: 1 / -1;
  }

  .bd-carte__actions {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-content: flex-end;
  }
}

/* 4. Barre de comparaison (bas centre) */

.bd-comparer {
  position: fixed;
  left: 50%;
  bottom: 16px;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 8px 8px 20px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--rf-ligne);
  box-shadow: 0 24px 48px -20px rgba(11, 18, 32, 0.35);
  transform: translateX(-50%);
}

.bd-comparer[hidden] {
  display: none;
}

.bd-comparer__texte {
  margin: 0;
  font-size: var(--rf-t-petit);
  color: var(--rf-gris);
  white-space: nowrap;
}

.bd-comparer__texte strong {
  color: var(--rf-encre);
}

.bd-comparer__aller[aria-disabled="true"] {
  opacity: 0.4;
  pointer-events: none;
}

.bd-comparer__vider {
  padding: 8px 12px 8px 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--rf-t-petit);
  font-weight: 600;
  color: var(--rf-gris-clair);
  cursor: pointer;
}

@media (max-width: 640px) {
  .bd-comparer {
    left: 16px;
    right: 16px;
    bottom: 72px;
    justify-content: space-between;
    transform: none;
  }
}

/* En dessous de 480 px, les trois blocs (texte, Comparer, Vider) ne tiennent
   plus sur une seule ligne : « Vider » sortait de la barre, hors écran à 360
   et 390 px, encore hors de la barre à 430 (correction du 25/09/2026,
   vérificateur adversarial de l'étape 21, point 1). Deux lignes : le texte
   seul en haut, « Comparer » (qui prend toute la largeur restante, bouton
   large donc atteignable) et « Vider » en bas. */
@media (max-width: 480px) {
  .bd-comparer {
    flex-wrap: wrap;
    row-gap: 8px;
    padding: 12px 12px 12px 16px;
  }

  .bd-comparer__texte {
    flex: 1 1 100%;
    white-space: normal;
  }

  .bd-comparer__aller {
    flex: 1 1 auto;
    text-align: center;
  }

  .bd-comparer__vider {
    flex: 0 0 auto;
    padding: 8px 4px;
  }
}

/* 6. Couverture photo (fiche, ville) */

.bd-couverture {
  position: relative;
  isolation: isolate;
  min-height: clamp(260px, 38vw, 440px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #0B1220;
}

.bd-couverture__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bd-couverture::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(11, 18, 32, 0) 30%, rgba(11, 18, 32, 0.78) 100%);
}

/* Pleine largeur : sans elle, l'enfant d'un conteneur flex se réduit à son
   contenu et le titre se colle au bord gauche au lieu de suivre la colonne. */
.bd-couverture__contenu {
  width: 100%;
  padding-block: 40px;
  color: #fff;
}

.bd-couverture .rf-h1,
.bd-couverture .rf-surtitre {
  color: #fff;
}

.bd-couverture .rf-surtitre {
  opacity: 0.85;
}

@media (prefers-reduced-motion: no-preference) {
  .bd-couverture__img {
    animation: bd-recul 1.4s var(--rf-sortie) both;
  }
}

@keyframes bd-recul {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

/* ============================================================
   Habillage commun des pages reprises telles quelles (portage de la
   maquette, 24/09/2026, correction du 24/09/2026 suite au verificateur
   adversarial). Simulateur, assistant, comparateur, page pro : leur moteur
   et leur feuille d'origine sont gardes, cette couche leur applique le
   style de la refonte. Ici : uniquement les parties reellement communes
   (jetons, titres, accent des em, etiquettes, boutons generiques), une
   seule fois. Les regles qui perdraient a specificite egale si elles
   restaient ici (le titre du simulateur, le bouton primaire de l'assistant,
   l'accent des em du bandeau du comparateur) restent dupliquees en fin de
   feuille de page, chargees APRES le moteur d'origine de cette page : voir
   assets/style/pages/simulateur.css, matching.css, comparateur.css.
   ============================================================ */
.bd-body .simulateur-page,
.bd-body .matching-page,
.bd-body .compare-page,
.bd-body .ae-landing {
  --bd-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bd-font-mono: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bd-paper: #F8FAFC;
  --bdm-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bdm-font-mono: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bdm-paper: #F8FAFC;
  --ed-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ed-font-mono: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ed-paper: #F8FAFC;
}

/* Titres : Inter gras partout, comme les titres rf-h1 et rf-h2. */
.bd-body main :is(h1, h2) {
  font-weight: 700;
  letter-spacing: -0.03em;
}

/* Les mots en italique degrade deviennent un accent bleu sans italique. Les
   hauts de page en photo (accueil, page pro) gardent leur degrade de marque,
   comme valide par Maikel, mais perdent aussi l'italique. */
/* !important assume : les feuilles d'origine posent l'italique avec des
   selecteurs plus precis que cette couche commune. */
.bd-body main :is(h1, h2, h3) :is(em, .bdm-intro__accent) {
  font-style: normal !important;
  font-weight: inherit;
}

.bd-body main :is(h1, h2, h3) :is(em, .bdm-intro__accent):not(.bd-accueil-hero *):not(.ae-landing__hero-title *) {
  background: none;
  filter: none;
  -webkit-text-fill-color: currentColor;
  color: #0369A1;
}

/* Petites etiquettes (anciennement en capitales espacees, police a chasse fixe). */
.bd-body main [class*="eyebrow"],
.bd-body main .bdm-lkicker,
.bd-body main .bd-hero__eyebrow {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

/* Un seul bouton plein, a l'encre : les boutons en degrade de marque le
   deviennent. bdm-btn--primary (assistant) N'EST PAS ici : sa version
   degradee perd contre .matching-page .bdm-btn--primary a specificite
   egale si elle est posee ici (chargee avant le moteur) ; elle est
   redeclaree en fin de matching.css, apres. */
.bd-body .bd-btn--grad,
.bd-body .bd-btn--primary {
  background: #0B1220;
  color: #FFFFFF;
  box-shadow: none;
}

.bd-body .bd-btn--grad:hover,
.bd-body .bd-btn--primary:hover {
  background: #1E293B;
}