/* ============================================================================
   kycimmo — site vitrine, refonte 2026
   ============================================================================

   Feuille DÉDIÉE à la page d'accueil.

   `style.css` reste en place : il habille encore `cgu.html`,
   `mentions-legales.html` et `politique-de-confidentialite.html`. Le remplacer
   aurait cassé trois pages juridiques pour un chantier qui n'en demandait pas.

   Les jetons reprennent la charte de l'application (design_handoff, §Couleurs)
   pour que le site et le produit ne se contredisent pas au premier clic.
   ========================================================================= */

/* Les jetons vivent dans `theme.css`, chargée AVANT celle-ci.
   Les redéclarer ici les écraserait — et comme un `:root` local ne porte pas
   les variantes sombres, la page resterait claire quoi qu'on choisisse. */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

h1, h2, h3 { margin: 0; text-wrap: pretty; }

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding-left: var(--gut);
  padding-right: var(--gut);
}

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-3);
}
.eyebrow--panel { color: var(--text-on-panel-3); }

.titre-section {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.04;
  letter-spacing: -0.015em;
}

.lead {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-2);
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 600;
  border-radius: 9px;
  padding: 13px 20px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}
.btn:hover { text-decoration: none; }

.btn--accent { background: var(--accent); border-color: var(--accent-border); color: var(--accent-text-on); }
.btn--accent:hover { background: var(--accent-hover); color: var(--accent-text-on); }

.btn--clair { background: var(--text-on-panel); color: var(--ink-panel); }
.btn--clair:hover { background: var(--bg-card); color: var(--ink-panel); }

.btn--contour-panel { color: var(--text-on-panel); border-color: var(--line-panel); font-weight: 550; }
.btn--contour-panel:hover { background: var(--ink-panel); color: var(--text-on-panel); }

.btn--contour { color: var(--text); background: var(--bg-card); border-color: var(--line-strong); font-weight: 550; }
.btn--contour:hover { background: var(--bg-band); color: var(--text); }

.btn--sm { font-size: 13.5px; padding: 9px 15px; }

/*
  LE BOUTON QUI DIT D'ABORD CE QUI EST GRATUIT.

  L'appel de l'en-tête menait avec la limite — « Criblage offert sur 3
  opérations » — et un prospect y lit « essai qui s'épuise ». Le registre, lui,
  est gratuit, complet et sans fin : c'est le produit d'entrée, il passe devant.
  Le chiffre reste, en appui, où il se lit comme un bonus et non comme un
  plafond.

  Deux lignes dans une barre de navigation demandent de rendre la main à la
  colonne : `.btn` est un `inline-flex` en ligne par défaut.
*/
.btn--duo {
  flex-direction: column;
  align-items: center;
  gap: 1px;
  line-height: 1.2;
  padding-block: 7px;
}
.btn__principal { font-weight: 650; }
.btn__appui {
  font-size: 11.5px;
  font-weight: 500;
  /* PAS d'opacité ici. À 0.88 le rapport tombait à 4.22:1 sur l'accent, sous
     le seuil de 4.5. La hiérarchie entre les deux lignes se fait par la taille
     et la graisse, qui ne coûtent aucun contraste. */
  color: var(--accent-text-on);
}

/*
  Sous 400 px, la seconde ligne pousse le bouton contre le burger. On garde
  alors la promesse principale seule — elle suffit à cliquer.
*/
@media (max-width: 400px) {
  .btn__appui { display: none; }
}

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

.entete {
  position: sticky;
  top: 0;
  z-index: 20;
  /* Le panneau du menu se positionne par rapport à cette barre. */
  isolation: isolate;
  background: var(--bg-entete);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.entete__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 28px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.marque { display: flex; align-items: center; gap: 9px; color: inherit; }
.marque:hover { text-decoration: none; color: inherit; }
.marque__glyphe {
  width: 24px; height: 24px; border-radius: 7px;
  background: var(--text); color: var(--text-on-panel);
  font-family: var(--serif); font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.marque__nom { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; }

.entete__nav { display: flex; align-items: center; gap: 22px; margin-left: 8px; }
.entete__nav a { font-size: 13.5px; color: var(--text-2); }
.entete__actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.entete__connexion { font-size: 13.5px; font-weight: 550; color: var(--text); padding: 8px 12px; }
.entete__connexion:hover { color: var(--text); }

@media (max-width: 860px) {
  .entete__nav { display: none; }
  .entete__actions { margin-left: auto; }
}

/*
  Sous 480 px, « kycimmo » + « Se connecter » + le bouton dépassaient de
  quelques pixels et l'en-tête passait sur deux lignes. On resserre plutôt que
  de laisser la barre doubler de hauteur au premier écran.
*/
@media (max-width: 480px) {
  .entete__inner { gap: 10px 12px; }
  .entete__connexion { padding: 8px 4px; }
  .entete__actions { gap: 6px; }
  .btn--sm { padding: 9px 12px; }
}

/* --- Panneaux sombres --------------------------------------------------- */

.panneau { background: var(--ink-panel); color: var(--text-on-panel); }
.panneau-carte { background: var(--ink-panel); border-radius: 18px; padding: clamp(26px, 4vw, 48px); }

/* --- Hero --------------------------------------------------------------- */

.hero__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
  padding-top: var(--bloc);
}
.hero__texte { display: flex; flex-direction: column; gap: 26px; padding-bottom: 88px; }
.hero__titre {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 5.4vw, 62px);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.hero__lead { margin: 0; font-size: 17px; line-height: 1.6; color: var(--text-on-panel-2); max-width: 520px; }
.hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding-top: 4px; }
.hero__note { font-size: 13px; color: var(--text-on-panel-3); }
.hero__apercu { padding-bottom: 88px; }

.apercu {
  background: var(--bg-page);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 60px -30px oklch(0.05 0.02 258 / 0.7);
}
.apercu__barre {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px;
  background: var(--bg-band);
  border-bottom: 1px solid var(--line);
}
.apercu__glyphe {
  width: 18px; height: 18px; border-radius: 5px;
  background: var(--text); color: var(--text-on-panel);
  font-family: var(--serif); font-size: 11px;
  display: flex; align-items: center; justify-content: center;
}
.apercu__onglet { font-size: 13px; font-weight: 600; color: var(--text); }
.apercu__tri { margin-left: auto; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.apercu__corps { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.apercu__date { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
/* La maquette dit qu'elle en est une : discret, mais lisible. */
.apercu__exemple { color: var(--text-3); letter-spacing: 0.04em; }
.apercu__accroche { font-family: var(--serif); font-size: 26px; line-height: 1.06; color: var(--text); }

.file { display: flex; flex-direction: column; gap: 8px; }
.file__ligne {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: 10px;
  padding: 11px 13px;
  display: flex; align-items: center; gap: 12px;
}
.file__ligne--crit { border-left-color: var(--risk-crit); }
.file__ligne--high { border-left-color: var(--risk-high); }
.file__ligne--mid { border-left-color: var(--risk-mid); }
.file__score { font-family: var(--mono); font-size: 13px; font-weight: 500; width: 24px; flex: none; }
.file__score--crit { color: var(--risk-crit-text); }
.file__score--high { color: var(--risk-high-text); }
.file__score--mid { color: var(--risk-mid-text); }
.file__corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.file__nom { font-size: 13.5px; font-weight: 600; color: var(--text); }
.file__motif { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file__geste { flex: none; font-size: 11.5px; font-weight: 550; color: var(--text-2); border: 1px solid var(--line-strong); border-radius: 999px; padding: 5px 10px; }

.portefeuille {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 13px;
  display: flex; flex-direction: column; gap: 9px;
}
.portefeuille__tete { display: flex; align-items: baseline; justify-content: space-between; }
.portefeuille__titre { font-size: 13px; font-weight: 600; color: var(--text); }
.portefeuille__compte { font-family: var(--mono); font-size: 10.5px; color: var(--text-3); }
.portefeuille__barre { display: flex; gap: 3px; height: 9px; }
.portefeuille__barre span:first-child { border-radius: 3px 0 0 3px; }
.portefeuille__barre span:last-child { border-radius: 0 3px 3px 0; }
.portefeuille__note { font-size: 12px; color: var(--text-2); }

/* --- Bandeau de chiffres ------------------------------------------------ */

.chiffres { background: var(--bg-band); border-bottom: 1px solid var(--line); }
.chiffres__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 32px;
  padding-top: 40px;
  padding-bottom: 40px;
}
.chiffre { display: flex; flex-direction: column; gap: 6px; }
.chiffre__valeur { font-family: var(--serif); font-size: clamp(36px, 4vw, 46px); line-height: 1; }
.chiffre__libelle { font-size: 14.5px; line-height: 1.45; max-width: 290px; }
.chiffre__source { font-family: var(--mono); font-size: 10.5px; color: var(--text-3); }

/* --- Sections ----------------------------------------------------------- */

.section { padding-top: var(--bloc); }
.section__intro { display: flex; flex-direction: column; gap: 14px; max-width: 720px; }

/* --- Les quatre moments ------------------------------------------------- */

.moment {
  display: grid;
  grid-template-columns: 74px repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 24px 40px;
  padding: 32px 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
/*
  Sous 720 px, la colonne de gauche (74 px) plus une colonne d'au moins 260 px
  ne tiennent plus dans la largeur disponible : la grille débordait de deux
  pixels et la page défilait latéralement. On empile.
*/
@media (max-width: 720px) {
  .moment { grid-template-columns: 1fr; gap: 16px; }
  .moment__etape { padding-top: 0; }
}

.moment__etape { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); padding-top: 5px; }
.moment__corps { display: flex; flex-direction: column; gap: 10px; }
.moment__titre { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.moment__texte { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.moment__article { font-family: var(--mono); font-size: 10.5px; color: var(--text-3); }
.moment__demo {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.moment__demo-titre { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.demo-ligne { display: flex; align-items: center; gap: 11px; border-top: 1px solid var(--line-soft); padding-top: 11px; }
.demo-ligne__puce { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.demo-ligne__libelle { font-size: 13.5px; flex: 1; min-width: 0; }
.demo-ligne__valeur { font-family: var(--mono); font-size: 11px; flex: none; }

.is-low { background: var(--risk-low); }
.is-mid { background: var(--risk-mid); }
.is-high { background: var(--risk-high); }
.is-crit { background: var(--risk-crit); }
.is-accent { background: var(--accent); }
.t-low { color: var(--risk-low-text); }
.t-mid { color: var(--risk-mid-text); }
.t-high { color: var(--risk-high-text); }
.t-crit { color: var(--risk-crit-text); }
.t-neutre { color: var(--text-3); }
.t-accent { color: var(--accent-soft-text); }

/* --- La preuve ---------------------------------------------------------- */

.preuve__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(28px, 4vw, 48px);
  align-items: center;
}
.preuve__texte { display: flex; flex-direction: column; gap: 20px; }
.preuve__titre { font-family: var(--serif); font-weight: 400; font-size: 42px; line-height: 1.05; color: var(--text-on-panel); }
.preuve__lead { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--text-on-panel-2); }
.preuve__points { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.preuve__point { display: flex; align-items: baseline; gap: 12px; border-top: 1px solid var(--line-panel); padding-top: 12px; }
.preuve__cle { font-family: var(--mono); font-size: 11px; color: var(--text-on-panel-3); width: 76px; flex: none; }
.preuve__valeur { font-size: 13.5px; color: var(--text-on-panel-2); }

.chaine {
  background: var(--ink-panel-deep);
  border: 1px solid var(--line-panel);
  border-radius: 14px;
  padding: 22px;
  display: flex; flex-direction: column;
}
.chaine__titre { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-on-panel-3); padding-bottom: 14px; }
.chaine__evt { border-top: 1px solid var(--line-panel); padding: 13px 0; display: flex; flex-direction: column; gap: 5px; }
.chaine__tete { display: flex; align-items: baseline; gap: 10px; }
.chaine__id, .chaine__heure { font-family: var(--mono); font-size: 10.5px; color: var(--text-on-panel-3); flex: none; }
.chaine__nom { font-size: 13.5px; font-weight: 550; color: var(--text-on-panel); flex: 1; }
.chaine__qui { font-size: 12.5px; line-height: 1.4; color: var(--text-on-panel-2); }
.chaine__hash { font-family: var(--mono); font-size: 10px; color: var(--text-on-panel-3); word-break: break-all; }
.chaine__pied { border-top: 1px solid var(--line-panel); padding-top: 13px; display: flex; align-items: center; gap: 9px; }
.chaine__coche {
  width: 14px; height: 14px; border-radius: 999px;
  background: var(--risk-low); color: var(--ink-panel-deep);
  font-size: 9px; display: flex; align-items: center; justify-content: center; flex: none;
}
.chaine__verdict { font-size: 12.5px; color: var(--text-on-panel-2); }

/* --- Cartes génériques -------------------------------------------------- */

.cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 18px;
}
.carte {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px;
  display: flex; flex-direction: column; gap: 10px;
}
.carte__titre { font-size: 16px; font-weight: 600; }
.carte__texte { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-2); }

/* --- Chronologie -------------------------------------------------------- */

.horizon {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
}
.jalon {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 24px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.jalon__annee { font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--text-3); }
.jalon__annee--haut { color: var(--risk-high-text); }
.jalon__annee--crit { color: var(--risk-crit-text); }
.jalon__titre { font-size: 15px; font-weight: 600; }
.jalon__texte { font-size: 13.5px; line-height: 1.5; color: var(--text-2); }

/* --- Tarifs ------------------------------------------------------------- */

.tarifs__tete { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 24px 40px; }
.bascule { flex: none; display: flex; gap: 3px; background: var(--line-soft); border-radius: 9px; padding: 3px; }
.bascule__opt {
  font-size: 13px; font-weight: 400; color: var(--text-2);
  background: transparent; border: 1px solid transparent;
  border-radius: 7px; padding: 8px 14px; cursor: pointer;
  font-family: inherit;
}
.bascule__opt[aria-pressed='true'] { background: var(--bg-card); color: var(--text); font-weight: 600; border-color: var(--line); }

.offres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 18px;
  align-items: stretch;
}
.offre {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px;
  display: flex; flex-direction: column; gap: 18px;
}
.offre--panel { background: var(--ink-panel); border-color: var(--ink-panel); color: var(--text-on-panel); }
.offre__tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.offre__nom { font-size: 16px; font-weight: 600; }
.offre__cible { font-size: 13px; color: var(--text-3); }
.offre--panel .offre__cible { color: var(--text-on-panel-3); }
.offre__fanion {
  flex: none; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-panel); background: var(--bg-subtle);
  border-radius: 999px; padding: 5px 9px;
}
.offre__prix { display: flex; align-items: baseline; gap: 7px; }
.offre__montant { font-family: var(--serif); font-size: 44px; line-height: 1; }
.offre__unite { font-size: 13.5px; color: var(--text-3); }
.offre--panel .offre__unite { color: var(--text-on-panel-2); }
.offre__note { font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.offre--panel .offre__note { color: var(--text-on-panel-3); }
.offre__liste { display: flex; flex-direction: column; gap: 9px; border-top: 1px solid var(--line-soft); padding-top: 16px; margin: 0; padding-left: 0; list-style: none; }
.offre--panel .offre__liste { border-top-color: var(--line-panel); }
.offre__item { display: flex; align-items: baseline; gap: 10px; font-size: 13.5px; line-height: 1.45; color: var(--text); }
.offre--panel .offre__item { color: var(--text-on-panel); }
.offre__item::before {
  content: ''; width: 5px; height: 5px; border-radius: 999px;
  background: var(--text-3); flex: none; transform: translateY(-2px);
}
.offre--panel .offre__item::before { background: var(--accent-border); }
.offre__cta { margin-top: auto; text-align: center; }

.acte {
  background: var(--bg-band);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px;
  display: flex; flex-direction: column; gap: 16px;
}
.acte__tete { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; }
.acte__titre { font-size: 15px; font-weight: 600; }
.acte__note { font-size: 13px; color: var(--text-3); }
.acte__grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.acte__item {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 13px 14px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.acte__libelle { font-size: 13px; line-height: 1.35; }
.acte__prix { font-family: var(--mono); font-size: 12.5px; font-weight: 500; flex: none; }

/* --- Questions ---------------------------------------------------------- */

.questions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
}
.questions__aside { display: flex; flex-direction: column; gap: 14px; }
.question { border-top: 1px solid var(--line); padding: 24px 0; display: flex; flex-direction: column; gap: 10px; }
.question__q { font-size: 17px; font-weight: 600; letter-spacing: -0.005em; }
.question__a { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text-2); }

@media (min-width: 900px) {
  .questions__aside { position: sticky; top: 90px; }
}

/* --- Appel final -------------------------------------------------------- */

.final {
  display: flex; flex-direction: column; align-items: center;
  gap: 22px; text-align: center;
  padding: clamp(36px, 5vw, 64px) clamp(22px, 4vw, 48px);
}
.final__titre { font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 4.2vw, 48px); line-height: 1.04; color: var(--text-on-panel); max-width: 700px; }
.final__lead { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text-on-panel-2); max-width: 560px; }
.final__actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 12px; padding-top: 6px; }

/* --- Pied --------------------------------------------------------------- */

.pied { border-top: 1px solid var(--line); }
.pied__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 32px 40px;
  padding-top: 44px;
  padding-bottom: 44px;
}
.pied__colonne { display: flex; flex-direction: column; gap: 10px; }
.pied__titre { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.pied__colonne a { font-size: 13.5px; color: var(--text-2); }
.pied__pitch { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-3); max-width: 300px; }
.pied__contact { font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.pied__bas {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
  border-top: 1px solid var(--line-soft);
  padding-top: 20px; padding-bottom: 40px;
  font-size: 12.5px; color: var(--text-3);
}
.pied__sep { color: var(--text-on-panel-2); }

/* --- Accessibilité ------------------------------------------------------ */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--bg-card);
  color: var(--text);
  padding: 12px 18px;
  border-radius: 0 0 9px 0;
  z-index: 100;
}
.saut-contenu:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ============================================================
   NAVIGATION MOBILE
   ============================================================

   La barre cachait `.entete__nav` sous 860 px sans rien proposer à la place :
   en dessous de cette largeur, tout le site était sans navigation — seuls
   « Se connecter » et l'essai restaient, et il fallait descendre jusqu'au pied
   de page pour atteindre un lien.

   Le bouton n'apparaît que là où la barre disparaît : sur grand écran les
   liens sont visibles, un burger ne servirait à rien.
   ============================================================ */

.entete__burger {
  display: none;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg-card);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: none;
}

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

.entete__burger-trait {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 160ms ease, opacity 160ms ease;
}

/* Ouvert, les deux traits se croisent : l'état du bouton dit ce qu'il fera. */
.entete__burger[aria-expanded="true"] .entete__burger-trait:first-child {
  transform: translateY(3.25px) rotate(45deg);
}

.entete__burger[aria-expanded="true"] .entete__burger-trait:last-child {
  transform: translateY(-3.25px) rotate(-45deg);
}

/*
  LE PANNEAU EST ACCROCHÉ À LA BARRE, PAS AU HAUT DU DOCUMENT.

  Posé dans le flux après l'en-tête, il s'ouvrait à sa place d'origine : après
  avoir défilé, le menu se dépliait hors de l'écran et poussait le contenu vers
  le bas sans qu'on le voie jamais.

  Il vit maintenant DANS l'en-tête collant, en position absolue juste sous la
  barre. Il suit donc la barre où qu'on soit dans la page.
*/
.menu-mobile {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100dvh - 100%);
  overflow-y: auto;
  border-bottom: 1px solid var(--line);
  background: var(--bg-card);
  box-shadow: 0 12px 24px oklch(0.2 0.015 258 / 12%);
}

.menu-mobile__liens {
  display: flex;
  flex-direction: column;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 6px var(--gut) 14px;
}

.menu-mobile__liens a {
  padding: 13px 0;
  font-size: 15px;
  color: var(--text);
  border-bottom: 1px solid var(--line-soft);
}

.menu-mobile__liens a:last-child {
  border-bottom: none;
  font-weight: 550;
}

@media (max-width: 860px) {
  .entete__burger { display: flex; }
  .menu-mobile:not([hidden]) { display: block; }

  /*
    Le burger tient dans la barre, il ne passe pas à la ligne.

    `.entete__inner` autorise le retour à la ligne pour les liens ; une fois
    ceux-ci masqués, il ne reste que la marque, l'essai et le burger — trois
    éléments qui tiennent sur une ligne, à condition de le dire.
  */
  .entete__inner { flex-wrap: nowrap; }

  /* « Se connecter » est dans le menu : le garder ici serait un doublon qui
     mange la place du burger sur les petits écrans. */
  .entete__connexion { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .entete__burger-trait { transition: none; }
}

/* ==========================================================================
   BANDEAU D'ALERTE RÉGLEMENTAIRE

   Le rouge est réservé à ce bandeau, et à lui seul. Il annonce un ÉVÉNEMENT
   daté et vérifiable — deux décisions de la Commission nationale des
   sanctions — et non un argument commercial : employé pour vendre, il perd
   sa valeur de signal, et le jour où une vraie alerte arrive, plus personne
   ne la voit.

   La pastille pulse lentement et s'arrête pour qui a demandé moins de
   mouvement. Une animation rapide sur un fond rouge se remarque pour de
   mauvaises raisons.
   ========================================================================== */
.bandeau-alerte {
  position: relative;
  background: var(--ink-panel);
  color: var(--text-on-panel);
  border-bottom: 1px solid var(--voile-fort);
}

.bandeau-alerte[hidden] { display: none; }

/*
  PLEINE LARGEUR, ET AUSSI FIN QUE POSSIBLE.

  Le bandeau ne passe PAS par `.shell` : un bandeau d'alerte borné à la
  largeur du contenu se lit comme un encart, pas comme une bande. Il occupe
  donc toute la fenêtre, avec ses propres marges latérales.

  La hauteur descend à 32 px. Un bandeau d'information doit se voir sans
  repousser la page : chaque pixel qu'il prend est pris au titre, qui est ce
  qu'on est venu lire.
*/
.bandeau-alerte__contenu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  /*
    La marge droite laisse la place à la croix, qui est sortie du flux.
    Sans elle, une phrase longue passerait dessous sur les écrans étroits.
  */
  padding: 6px 46px 6px 24px;
  min-height: 32px;
  width: 100%;
  max-width: none;
}

.bandeau-alerte__pastille {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--bg-card);
  animation: bandeau-pulse 2.8s ease-in-out infinite;
}

@keyframes bandeau-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .bandeau-alerte__pastille { animation: none; }
}

.bandeau-alerte__texte {
  margin: 0;
  /*
    PAS DE `flex: 1` : le texte ne doit plus pousser le bouton à l'autre bout.
    Les deux forment un groupe centré, et le texte s'arrête à sa longueur.
  */
  flex: 0 1 auto;
  min-width: 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-on-panel);
  /* Une seule ligne tant que la place le permet : deux lignes doublent la
     hauteur du bandeau, ce qu'on cherche justement à éviter. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bandeau-alerte__texte strong { font-weight: 650; color: var(--text-on-panel); }

/* Le lien est le seul élément clair sur le rouge : c'est l'action. */
.bandeau-alerte__lien {
  flex: none;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-3);
  background: var(--bg-card);
  border-radius: 6px;
  padding: 5px 11px;
  text-decoration: none;
  white-space: nowrap;
}

.bandeau-alerte__lien:hover { background: var(--bg-band); color: var(--text-3); }

.bandeau-alerte__lien:focus-visible {
  outline: 2px solid var(--line-soft);
  outline-offset: 2px;
}

/*
  LA CROIX RESTE À DROITE, ET SORT DU FLUX.

  Laissée dans le flux, elle décentrerait le groupe texte + bouton de sa
  propre largeur. Positionnée, elle ne participe plus au centrage.
*/
.bandeau-alerte__fermer {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border: none;
  background: none;
  color: var(--text-on-panel);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  border-radius: 5px;
  opacity: 0.75;
  padding: 0;
}

.bandeau-alerte__fermer:hover { opacity: 1; background: rgba(255, 255, 255, 0.15); }

.bandeau-alerte__fermer:focus-visible {
  outline: 2px solid var(--line-soft);
  outline-offset: 1px;
  opacity: 1;
}

@media (max-width: 860px) {
  .bandeau-alerte__contenu { padding: 7px 40px 7px 16px; gap: 10px; }
  /*
    Sur mobile on préfère deux lignes à une phrase tronquée : « 210 000 €
    contre un réseau de manda… » ne dit plus rien.
  */
  .bandeau-alerte__texte {
    font-size: 12.5px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .bandeau-alerte__lien { font-size: 12px; padding: 5px 10px; }
}

/* ==========================================================================
   TABLEAU TARIFAIRE — /tarifs.html

   Le tableau défile horizontalement dans son propre cadre plutôt que d'être
   tronqué : quatre colonnes de prix ne tiennent pas sur un téléphone, et une
   page qui défile latéralement dans son ensemble est ingérable au pouce.
   ========================================================================== */
/*
  ⚠️ TROIS JETONS FANTÔMES CORRIGÉS — `--surface-1`, `--trait`, `--text-1`.

  Aucun des trois n'est défini, ni dans theme.css ni ici. Les propriétés qui
  les demandaient étaient donc invalides à l'exécution : le CADRE DU TABLEAU
  DE TARIFS s'affichait sans fond ni bordure, les en-têtes de colonnes sans
  filet, et le fanion « Sans engagement » sans sa pastille. Vérifié au
  navigateur, et vérifié sur https://kyc.immo — le défaut était en ligne.

  Correspondance avec les jetons réels de theme.css :
    --surface-1 → --bg-card    (surface d'une carte)
    --trait     → --line       (filet)
    --text-1    → --text       (encre principale)
*/
.tf-cadre { background: var(--bg-card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-top: 28px; }
.tf-defile { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tf { border-collapse: collapse; width: 100%; min-width: 740px; }
.tf th, .tf td { text-align: center; padding: 12px 14px; vertical-align: middle; }
/*
  LA COLONNE DES INTITULÉS RESTE EN PLACE, SEULES LES VALEURS DÉFILENT.

  Le tableau a un `min-width: 740px` et défile horizontalement dans
  `.tf-defile`. Sans épingle, faire défiler jusqu'à la colonne « Réseau »
  emportait l'intitulé de la ligne hors de l'écran : on lisait « 100 » sans
  savoir de quoi. Sur un comparatif de trente lignes, c'est le tableau entier
  qui devient illisible dès qu'on le fait défiler.

  Le fond est indispensable : sans lui, les valeurs défileraient PAR-DESSOUS
  un intitulé transparent. `inherit` le prend de la ligne, ce qui préserve les
  bandes de rubrique qui ont leur propre teinte.
*/
.tf tbody tr, .tf thead tr { background: var(--bg-card); }
.tf-rub td { background: var(--bg-subtle); }

.tf th:first-child, .tf td:first-child {
  text-align: left;
  width: 36%;
  min-width: 250px;
  color: var(--text-2);
  position: sticky;
  left: 0;
  z-index: 2;
  background: inherit;
}

/*
  ⚠️ LES CELLULES EN `colspan` NE S'ÉPINGLENT PAS.

  Les bandes de rubrique et les lignes de pied n'ont qu'une cellule étalée sur
  toute la largeur. Épinglée à gauche, elle reste sur place pendant que son
  propre texte défile sous elle : la phrase se faisait couper par la gauche.

  Elles n'ont de toute façon rien à figer — elles sont déjà entièrement
  lisibles, quelle que soit la position du défilement.
*/
.tf td[colspan]:first-child, .tf th[colspan]:first-child {
  /*
    ON N'ÉPINGLE PAS LA CELLULE — C'EST SON CONTENU QU'ON ÉPINGLE.

    `position: sticky` ne peut déplacer un élément qu'à l'intérieur de son
    bloc conteneur. Une cellule en colspan occupe toute la largeur du tableau :
    elle n'a aucun jeu, et reste donc collée au tableau qui défile. Mesuré :
    elle partait à -204 px, texte amputé de son début.

    L'enveloppe `.tf-fixe`, elle, a tout le jeu de la cellule.
  */
  position: static;
  width: auto;
  min-width: 0;
}
.tf td[colspan]:first-child::after, .tf th[colspan]:first-child::after { content: none; }

.tf-fixe {
  position: sticky;
  left: 0;
  display: inline-block;
  max-width: 100%;
}

/*
  UN ÉLÉMENT ÉPINGLÉ A BESOIN DE JEU.

  Le pied de la ligne décisive est un paragraphe aussi large que sa cellule :
  jeu nul, donc pas d'épinglage possible — mesuré à -193 px alors que les
  quatre bandes courtes tenaient à 23 px. Le borner à une mesure de lecture
  lui rend ce jeu, et se lit mieux au passage : soixante-dix caractères plutôt
  qu'une ligne pleine largeur.
*/
.tf-decisive__pied .tf-fixe { max-width: 70ch; }
/* Le filet marque la césure entre ce qui est figé et ce qui glisse. */
.tf th:first-child::after, .tf td:first-child::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
  pointer-events: none;
}
.tf thead th { vertical-align: bottom; border-bottom: 1px solid var(--line); padding: 18px 14px 15px; font-weight: 400; }
.tf tbody tr { border-bottom: 1px solid var(--trait-2, rgba(128,128,128,.14)); }
.tf tbody tr:last-child { border-bottom: 0; }

.tf-phare { background: var(--surface-2, rgba(128,128,128,.06)); }
.tf-fanion { display: inline-block; font-family: var(--mono); font-size: 9px; letter-spacing: .09em; text-transform: uppercase; padding: 3px 8px; border-radius: 20px; background: var(--text); color: var(--bg-card); margin-bottom: 8px; }
.tf-offre { display: block; font-size: 19px; color: var(--text); margin-bottom: 3px; }
.tf-cible { display: block; font-size: 11.5px; color: var(--text-3); line-height: 1.35; margin-bottom: 9px; }
.tf-prix { display: block; font-size: 23px; font-weight: 700; letter-spacing: -.02em; color: var(--text); }
.tf-prix small { font-size: 12px; font-weight: 400; color: var(--text-2); letter-spacing: 0; }
.tf-annuel { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 3px; }

/*
  LA SEULE LIGNE QUI VARIE PASSE EN PREMIER, ET SE VOIT.

  Le tableau ouvrait sur cinq lignes identiques dans les quatre colonnes : la
  gratuite en cochait quinze sur dix-neuf, et le lecteur en concluait que payer
  servait à trois broutilles. Le nombre d'opérations criblées est le SEUL
  critère qui distingue les offres — il est donc remonté en tête, et porté par
  le chiffre plutôt que par une coche.
*/
.tf-decisive td { padding-top: 18px; padding-bottom: 18px; border-bottom: 2px solid var(--ink-panel); }
.tf-decisive .tf-val { font-family: var(--serif); font-size: 34px; font-weight: 400; line-height: 1; letter-spacing: -0.01em; }
.tf-decisive .tf-prec { margin-top: 5px; }
.tf-decisive td:first-child { font-weight: 650; color: var(--text); }

/*
  L'UNITÉ COMPTE AUTANT QUE LE CHIFFRE.

  « 3 » seul se compare à « 8 € le dossier » d'un concurrent et perd. « 3
  opérations entières, toutes parties comprises » se compare à ce qu'il faut
  vraiment : une vente entre deux couples fait quatre dossiers ailleurs, une
  seule opération ici. L'unité est posée sous chaque chiffre, pas renvoyée en
  bas de page.
*/
.tf-decisive .tf-unite { display: block; font-size: 12px; font-weight: 600; color: var(--text); margin-top: 6px; }
.tf-decisive .tf-prec { margin-top: 3px; }
.tf-nuance { font-weight: 400; color: var(--text-2); }

/* La note rattachée à la ligne décisive, avant la rupture d'encre. */
.tf-decisive__pied td {
  border-bottom: 2px solid var(--ink-panel);
  padding-top: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-2);
  text-align: left;
}
.tf-decisive__pied strong { color: var(--text); font-weight: 650; }
/* La rupture d'encre passe sous la note, plus sous les chiffres. */
.tf-decisive td { border-bottom: 0; }

.tf-rub__note { font-family: var(--sans); font-size: 10px; letter-spacing: 0; text-transform: none; color: var(--text-3); margin-left: 10px; font-weight: 400; }

.tf-rub td { background: var(--bg-subtle); font-family: var(--mono); font-size: 10px; letter-spacing: .11em; text-transform: uppercase; color: var(--text-3); padding: 10px 14px; font-weight: 700; }
.tf-oui { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--risk-low-wash); color: var(--risk-low-text); font-size: 13px; font-weight: 700; }
.tf-non { color: var(--text-3); font-size: 17px; }
.tf-val { font-weight: 700; font-variant-numeric: tabular-nums; }
.tf-prec, .tf-note { display: block; font-size: 11.5px; color: var(--text-3); font-weight: 400; }
.tf-note { margin-top: 2px; line-height: 1.4; }

/* « Bientôt » : lisible, jamais confondu avec une coche. */

.tf-options { margin-top: 24px; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.tf-option { background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.tf-option h3 { margin: 0 0 4px; font-size: 14px; }
.tf-option p { margin: 0; font-size: 13px; color: var(--text-2); }


/* L'offre sur devis — reprend la carte `.tf-option` sans en être une :
   elle n'est pas dans la grille des options, elle vaut pour elle-même. */
.tf-sur-mesure { margin-top: 28px; background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; }
.tf-sur-mesure__titre { margin: 0 0 6px; font-size: 17px; }
.tf-sur-mesure__cible { margin: 0 0 10px; font-size: 13.5px; color: var(--text-2); line-height: 1.6; max-width: 62ch; }
.tf-sur-mesure__prix { margin: 0 0 8px; font-size: 15px; }
.tf-sur-mesure__note { margin: 0 0 14px; font-size: 12.5px; color: var(--text-3); line-height: 1.6; max-width: 62ch; }
.tf-sur-mesure__action { margin: 0; }

.tf-mentions-cgv { margin-top: 20px; font-size: 12px; color: var(--text-3); line-height: 1.6; max-width: 74ch; }

.tf-pied { margin-top: 24px; font-size: 12.5px; color: var(--text-3); line-height: 1.6; }
.tf-cta { margin-top: 26px; }

@media (max-width: 620px) {
  .tf th, .tf td { padding: 10px 11px; }
}

/* Suite et annonces de la section tarifs de l'accueil. */
.tarifs__suite { margin-top: 22px; font-size: 14px; }
.tarifs__avenir { margin-top: 10px; font-size: 13px; color: var(--text-3); line-height: 1.6; max-width: 68ch; }

/* Terme expliqué au survol et au clavier — le « ? » signale qu'il y a à lire. */
.tf-terme { border-bottom: 1px dotted var(--text-3); cursor: help; }
.tf-terme:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; border-radius: 2px; }
.tf-terme__marque { display: inline-grid; place-items: center; width: 13px; height: 13px; margin-left: 3px; border-radius: 50%; border: 1px solid var(--text-3); color: var(--text-3); font-size: 8.5px; font-weight: 700; vertical-align: 1px; }

/* ==========================================================================
   PAGES JURIDIQUES — CGU, mentions légales, politique de confidentialité
   ==========================================================================
   Elles tournaient sur `assets/css/style.css`, l'ancien design du site :
   sombre en permanence, avec une barre de navigation et un pied de page qui
   ne ressemblaient plus au reste. Elles ont désormais l'en-tête, le pied et
   la palette des autres pages ; il ne manquait que la mise en forme du texte.

   Du texte long se lit : la colonne est bornée à 68 caractères, et les titres
   portent leur hiérarchie par la taille plutôt que par la couleur.
   ========================================================================== */

.legal-page {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(32px, 6vw, 64px) var(--gut) var(--bloc);
}

.legal-page__header { margin-bottom: clamp(28px, 5vw, 48px); }

.legal-page__header h1 {
  font-family: var(--serif);
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.1;
  text-wrap: balance;
  color: var(--text);
  margin: 0 0 12px;
}

.legal-page__header p { color: var(--text-2); font-size: 14px; margin: 0; }

.legal-content {
  max-width: 68ch;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.65;
}

.legal-content h2 {
  font-family: var(--serif);
  font-size: clamp(21px, 3vw, 26px);
  line-height: 1.2;
  color: var(--text);
  margin: 44px 0 14px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

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

.legal-content h3 {
  font-size: 16px;
  font-weight: 650;
  color: var(--text);
  margin: 26px 0 8px;
}

.legal-content p { margin: 0 0 14px; }
.legal-content ul, .legal-content ol { margin: 0 0 16px; padding-left: 22px; }
.legal-content li { margin-bottom: 7px; }
.legal-content strong { color: var(--text); font-weight: 650; }

/*
  LE TABLEAU DES SOUS-TRAITANTS ULTÉRIEURS.

  Quatre colonnes de texte : sur un téléphone, elles ne tiennent pas. Le
  tableau défile dans SON propre conteneur — la page, elle, ne défile jamais
  horizontalement.
*/
.legal-tableau { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 18px; border: 1px solid var(--line); border-radius: 10px; }
.legal-tableau table { border-collapse: collapse; width: 100%; min-width: 620px; font-size: 13.5px; }
.legal-tableau th, .legal-tableau td { text-align: left; padding: 10px 13px; vertical-align: top; line-height: 1.5; border-bottom: 1px solid var(--line-soft, var(--line)); }
.legal-tableau thead th { font-weight: 650; color: var(--text); background: var(--bg-subtle); white-space: nowrap; }
.legal-tableau tbody th { font-weight: 650; color: var(--text); }
.legal-tableau tbody tr:last-child th, .legal-tableau tbody tr:last-child td { border-bottom: 0; }

.legal-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 18px;
  font-size: 14px;
}
.legal-content th, .legal-content td {
  text-align: left;
  padding: 9px 12px;
  border: 1px solid var(--line);
  vertical-align: top;
}
.legal-content th { background: var(--bg-subtle); color: var(--text); font-weight: 650; }

/* Une table de texte peut dépasser sur un téléphone : elle défile dans son
   propre cadre, jamais la page. */
.legal-content .table-wrap { overflow-x: auto; }

/* ==========================================================================
   BASCULE DE THÈME — clair / auto / sombre
   ==========================================================================
   Trois boutons plutôt qu'un interrupteur à deux états : « auto » est la
   valeur par défaut et doit rester atteignable. Un interrupteur binaire
   enferme le lecteur dans un choix explicite dès qu'il y touche une fois.

   `aria-pressed` porte l'état — c'est ce qu'un lecteur d'écran annonce.
   ========================================================================== */

.theme-bascule {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-card);
}

.theme-bascule__btn {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 26px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  font: inherit;
  line-height: 1;
  transition: background 140ms ease, color 140ms ease;
}

.theme-bascule__btn:hover { color: var(--text); background: var(--bg-subtle); }

.theme-bascule__btn[aria-pressed='true'] {
  background: var(--ink-panel);
  color: var(--text-on-panel);
}

.theme-bascule__btn svg { width: 15px; height: 15px; display: block; }

.theme-bascule__legende {
  font-size: 12px;
  color: var(--text-3);
  margin-right: 8px;
}


/* ==========================================================================
   LIENS DANS LE TEXTE COURANT
   ==========================================================================
   `a { text-decoration: none }` vaut pour la navigation et les boutons, où la
   forme dit déjà qu'on peut cliquer. Dans un paragraphe, rien ne le dit : le
   lien ne se distinguait que par sa couleur, à 1,24:1 du texte voisin. Une
   personne qui ne perçoit pas cette nuance ne voyait aucun lien.

   Dix-huit occurrences relevées à l'audit, sur cinq pages.
   ========================================================================== */
:is(p, li, dd, blockquote, .legal-content, .question__a, .carte__texte) a:not(.btn) {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
:is(p, li, dd, blockquote, .legal-content, .question__a, .carte__texte) a:not(.btn):hover {
  text-decoration-thickness: 2px;
}