/*
 * Correctifs ciblés pour les composants Tailwind intégrés au site historique.
 * La feuille d'origine applique `all: revert` dans `.hors-gabarit` : chaque
 * propriété utile du comparateur est donc redéfinie ici, après cette feuille.
 */
.vitrine {
  --ink: #0a203b;
  --navy: #0c2748;
  --wash: #f3fbff;
  --blue: #0a6ba5;
  --blue-d: #0a6ba5;
  --blue-l: #73c7ef;
  --blue-wash: #eaf7ff;
  --blue-pale: #cdeafa;
  --color-ink: #0a203b;
  --color-brand: #0a6ba5;
  --color-brand-700: #0a6ba5;
  --color-brand-50: #eaf7ff;
  --color-navy: #0c2748;
  --color-navy-700: #12345d;
  --color-soft: #f3fbff;
  --color-line: #d7eaf5;
  --color-line-strong: #bcdff1;
  --shadow-float: 0 8px 28px -10px rgba(22, 139, 214, 0.38);
}

.vitrine h1 .hl {
  background-image: linear-gradient(
    transparent 78%,
    rgba(115, 199, 239, 0.62) 78% 98%,
    transparent 98%
  );
}

/* Calculateur TVA de la page d'accueil. */
.vitrine .tool#outil {
  background:
    radial-gradient(circle at 85% 8%, rgba(115, 199, 239, 0.2), transparent 28%),
    #f3fbff;
}

.vitrine .tool#outil .toolgrid {
  align-items: start;
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
  margin: 40px auto 0;
  max-width: 980px;
}

.vitrine .tool#outil .toolcard {
  background: #fff;
  border: 1px solid #cfe5f1;
  border-radius: 22px;
  box-shadow: 0 22px 56px -38px rgba(10, 32, 59, 0.48);
  color: var(--ink);
  min-width: 0;
  padding: 28px;
}

.vitrine .tool#outil .lab {
  color: var(--ink);
  display: block;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
  margin-bottom: 10px;
}

.vitrine .tool#outil .row2 {
  align-items: stretch;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.vitrine .tool#outil input {
  appearance: none;
  background: #fff;
  border: 1px solid #bcd8e7;
  border-radius: 12px;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
  min-height: 48px;
  min-width: 0;
  outline: none;
  padding: 12px 14px;
  width: 100%;
}

.vitrine .tool#outil input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(22, 139, 214, 0.13);
}

.vitrine .tool#outil .opts {
  display: grid;
  gap: 8px;
}

.vitrine .tool#outil .row2 > .opts {
  grid-template-columns: repeat(2, minmax(58px, 1fr));
}

.vitrine .tool#outil .opts button {
  appearance: none;
  background: #fff;
  border: 1px solid #cfe0ea;
  border-radius: 11px;
  color: #526a80;
  cursor: pointer;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.35;
  padding: 11px 13px;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
}

.vitrine .tool#outil .row2 > .opts button {
  align-items: center;
  display: flex;
  font-weight: 850;
  justify-content: center;
  min-width: 64px;
  padding-inline: 12px;
  text-align: center;
}

.vitrine .tool#outil .opts button:hover {
  border-color: #8fcce9;
}

.vitrine .tool#outil .opts button.on,
.vitrine .tool#outil .opts button[aria-checked="true"] {
  background: var(--blue-wash);
  border-color: var(--blue);
  box-shadow: inset 4px 0 0 var(--blue);
  color: var(--ink);
}

.vitrine .tool#outil .row2 > .opts button.on,
.vitrine .tool#outil .row2 > .opts button[aria-checked="true"] {
  background: var(--blue);
  box-shadow: none;
  color: #fff;
}

.vitrine .tool#outil .opts.col button {
  display: grid;
  gap: 4px;
  padding: 13px 15px;
  text-align: left;
  width: 100%;
}

.vitrine .tool#outil .opts.col b {
  color: inherit;
  display: block;
  font-size: 13px;
  font-weight: 850;
}

.vitrine .tool#outil .opts.col small {
  color: #546675;
  display: block;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
}

.vitrine .tool#outil .toolcard.res {
  background:
    radial-gradient(circle at 88% 0, rgba(115, 199, 239, 0.2), transparent 32%),
    var(--ink);
  border-color: #173956;
  color: #fff;
  position: sticky;
  top: 92px;
}

.vitrine .tool#outil .rate {
  color: #fff;
  font-size: clamp(58px, 7vw, 82px);
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 0.95;
}

.vitrine .tool#outil .ptnote {
  color: #a9bed1;
  font-size: 11px;
  line-height: 1.55;
  margin: 14px 0 0;
}

.vitrine .tool#outil .sums {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: grid;
  gap: 0;
  margin-top: 24px;
  padding-top: 10px;
}

.vitrine .tool#outil .sums > div {
  align-items: center;
  color: #c6d6e4;
  display: flex;
  font-size: 13px;
  gap: 18px;
  justify-content: space-between;
  padding: 9px 0;
}

.vitrine .tool#outil .sums b {
  color: #fff;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.vitrine .tool#outil .sums .tot {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 11px;
  margin-top: 7px;
  padding: 13px;
}

.vitrine .tool#outil .sums .tot span,
.vitrine .tool#outil .sums .tot b {
  color: #fff;
  font-weight: 900;
}

.vitrine .tool#outil .toolcard.res .btn {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
  display: flex;
  justify-content: center;
  line-height: 1.3;
  text-align: center;
  width: 100%;
}

@media (max-width: 760px) {
  .vitrine .tool#outil .toolgrid {
    grid-template-columns: 1fr;
  }

  .vitrine .tool#outil .toolcard {
    border-radius: 18px;
    padding: 19px;
  }

  .vitrine .tool#outil .toolcard.res {
    position: static;
  }

  .vitrine .tool#outil .row2 {
    grid-template-columns: minmax(0, 1fr) 136px;
  }

  .vitrine .tool#outil .opts.col button {
    padding: 12px 13px;
  }

  .vitrine .tool#outil .rate {
    font-size: 60px;
  }
}

/*
 * L'accueil conserve son contenu historique utile, mais l'ancien en-tête,
 * l'ancien footer et l'ancien CTA mobile sont remplacés par ceux de la
 * nouvelle vitrine et de ses sous-pages.
 */
main#contenu #root > div > .vitrine:first-child,
main#contenu #root > div > .vitrine:last-child,
.legacy-home-content .sticky {
  display: none !important;
}

main#contenu #root .sticky {
  display: none !important;
}

.legacy-home-content {
  min-height: 0;
}

@media (max-width: 430px) {
  .vitrine .tool#outil .row2 {
    grid-template-columns: 1fr;
  }
}

.vitrine .pricing .hors-gabarit {
  margin-top: 32px;
}

.vitrine .pricing .hors-gabarit > div > div:first-child {
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
}

.vitrine .pricing .hors-gabarit > div > div:first-child > div {
  align-items: center;
  background: #fff;
  border: 1px solid #d7e8f1;
  border-radius: 14px;
  box-shadow: 0 12px 32px -22px rgba(11, 23, 52, 0.52);
  display: inline-flex;
  gap: 4px;
  padding: 4px;
}

.vitrine .pricing .hors-gabarit > div > div:first-child button {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 10px;
  color: #5c6f82;
  cursor: pointer;
  display: inline-flex;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 800;
  gap: 7px;
  line-height: 1;
  padding: 11px 18px;
}

.vitrine .pricing .hors-gabarit > div > div:first-child button:last-child {
  background: #0a6ba5;
  box-shadow: 0 8px 18px -10px rgba(22, 139, 214, 0.8);
  color: #fff;
}

.vitrine .pricing .hors-gabarit > div > div:first-child button span {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  color: inherit;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  padding: 3px 6px;
}

.vitrine .pricing .hors-gabarit > div > div:nth-child(2) {
  overflow-x: auto;
  padding: 2px 2px 12px;
  scrollbar-color: #b9d7e9 #f4faff;
  scrollbar-width: thin;
}

.vitrine .pricing .hors-gabarit > div > div:nth-child(2)::-webkit-scrollbar {
  height: 9px;
}

.vitrine .pricing .hors-gabarit > div > div:nth-child(2)::-webkit-scrollbar-track {
  background: #f4faff;
  border-radius: 999px;
}

.vitrine .pricing .hors-gabarit > div > div:nth-child(2)::-webkit-scrollbar-thumb {
  background: #b9d7e9;
  border-radius: 999px;
}

.vitrine .pricing .hors-gabarit table {
  background: #fff;
  border: 1px solid #d8e7ef;
  border-collapse: separate;
  border-radius: 24px;
  border-spacing: 0;
  box-shadow: 0 24px 60px -42px rgba(11, 23, 52, 0.55);
  color: #0b1734;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  min-width: 900px;
  overflow: hidden;
  table-layout: fixed;
  width: 100%;
}

.vitrine .pricing .hors-gabarit thead th {
  background: #fff;
  border-left: 1px solid #e1ebf1;
  padding: 27px 17px 23px;
  text-align: center;
  vertical-align: bottom;
  width: 22%;
}

.vitrine .pricing .hors-gabarit thead th:first-child {
  background: #f7fafc;
  border-left: 0;
  width: 34%;
}

.vitrine .pricing .hors-gabarit thead th:nth-child(3),
.vitrine .pricing .hors-gabarit tbody tr:not(:has(td[colspan])) td:nth-child(3) {
  background: #eff9ff;
}

.vitrine .pricing .hors-gabarit thead th:nth-child(3) {
  box-shadow: inset 0 4px 0 #168bd6;
}

.vitrine .pricing .hors-gabarit thead th > div {
  display: block;
}

.vitrine .pricing .hors-gabarit thead th > .text-lg {
  color: #0b1734;
  font-size: 21px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 3px;
}

.vitrine .pricing .hors-gabarit thead th > .text-xs {
  color: #546675;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  margin: 0 0 9px;
}

.vitrine .pricing .hors-gabarit thead th > .items-baseline {
  align-items: baseline;
  color: #0b1734;
  display: flex;
  font-size: 17px;
  font-weight: 900;
  gap: 3px;
  justify-content: center;
  line-height: 1.25;
  margin-bottom: 3px;
}

.vitrine .pricing .hors-gabarit thead th > .text-\[12px\] {
  color: #0a6ba5;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.vitrine .pricing .hors-gabarit thead th > .text-\[11px\] {
  color: #546675;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 14px;
}

.vitrine .pricing .hors-gabarit thead th > .uppercase {
  background: #0a6ba5;
  border-radius: 999px;
  color: #fff;
  display: inline-block;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  margin-bottom: 9px;
  padding: 5px 8px;
  text-transform: uppercase;
}

.vitrine .pricing .hors-gabarit thead th > .mt-1\.5 {
  color: #546675;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.35;
  margin-top: 7px;
}

.vitrine .pricing .hors-gabarit thead button {
  align-items: center;
  appearance: none;
  background: #eaf7ff;
  border: 1px solid #b9dced;
  border-radius: 12px;
  color: #0a6ba5;
  cursor: pointer;
  display: inline-flex;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 850;
  justify-content: center;
  line-height: 1.15;
  min-height: 40px;
  padding: 10px 12px;
  text-align: center;
  width: 100%;
}

.vitrine .pricing .hors-gabarit thead th:nth-child(3) button {
  background: #0a6ba5;
  border-color: #0a6ba5;
  box-shadow: 0 10px 22px -13px rgba(22, 139, 214, 0.85);
  color: #fff;
}

.vitrine .pricing .hors-gabarit tbody td {
  border-left: 1px solid #e7eef3;
  border-top: 1px solid #e7eef3;
  color: #31445a;
  font-size: 13px;
  line-height: 1.35;
  padding: 12px 16px;
  text-align: center;
  vertical-align: middle;
}

.vitrine .pricing .hors-gabarit tbody td:first-child {
  background: #fff;
  border-left: 0;
  color: #16263c;
  font-weight: 650;
  text-align: left;
}

.vitrine .pricing .hors-gabarit tbody td[colspan] {
  background: #f5f9fc;
  border-left: 0;
  color: #0b1734;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.09em;
  padding: 17px 17px 9px;
  text-align: left;
  text-transform: uppercase;
}

.vitrine .pricing .hors-gabarit tbody svg {
  color: #2e9e6b;
  display: block;
  height: 19px;
  margin: auto;
  width: 19px;
}

.vitrine .pricing .hors-gabarit > div > p {
  color: #546675;
  font-size: 11px;
  line-height: 1.5;
  margin: 12px auto 0;
  text-align: center;
}

@media (max-width: 760px) {
  .vitrine .pricing .hors-gabarit {
    margin-top: 24px;
  }

  .vitrine .pricing .hors-gabarit > div > div:first-child {
    margin-bottom: 18px;
  }

  .vitrine .pricing .hors-gabarit > div > div:first-child button {
    font-size: 12px;
    padding: 10px 13px;
  }

  .vitrine .pricing .hors-gabarit > div > div:nth-child(2) {
    border: 1px solid #d7e8f1;
    border-radius: 17px;
    margin-inline: 0;
    padding: 0 0 8px;
  }

  .vitrine .pricing .hors-gabarit > div > div:nth-child(2)::before {
    background: #edf8fe;
    border-bottom: 1px solid #d7e8f1;
    color: #0b699f;
    content: "Faites glisser pour comparer les offres →";
    display: block;
    font-size: 11px;
    font-weight: 800;
    left: 0;
    padding: 10px 14px;
    position: sticky;
    width: calc(100vw - 42px);
    z-index: 5;
  }

  .vitrine .pricing .hors-gabarit table {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    min-width: 780px;
  }

  .vitrine .pricing .hors-gabarit thead th {
    padding: 22px 12px 19px;
    width: 170px;
  }

  .vitrine .pricing .hors-gabarit thead th:first-child {
    box-shadow: 8px 0 18px -15px rgba(11, 23, 52, 0.65);
    left: 0;
    min-width: 250px;
    position: sticky;
    width: 250px;
    z-index: 4;
  }

  .vitrine .pricing .hors-gabarit tbody td {
    padding: 11px 12px;
  }

  .vitrine .pricing .hors-gabarit tbody td:first-child {
    box-shadow: 8px 0 18px -15px rgba(11, 23, 52, 0.65);
    left: 0;
    position: sticky;
    z-index: 3;
  }

  .vitrine .pricing .hors-gabarit tbody td[colspan] {
    background: #f5f9fc;
    box-shadow: none;
    position: static;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
 * CONTRASTE — corrigé le 03-08-2026, sur signalement de l'éditrice.
 *
 * Elle a vu à l'œil ce qu'aucun outil ne signalait : « le jeu de contraste fait disparaître
 * l'information ». Mesure faite sur le site en production, texte par texte, avec le fond
 * RÉELLEMENT calculé (les fonds en dégradé sont écartés : on ne corrige pas ce qu'on ne peut
 * pas mesurer). Le résultat n'était pas trois étiquettes isolées, c'était la couleur de marque.
 *
 * ⚠️ LE BLEU #168bd6 ÉCHOUE DANS LES DEUX SENS.
 *     texte blanc posé dessus  → 3,69:1   (tous les boutons : « Essai 14 jours »,
 *                                          « Démarrer l'essai », « Envoyer pour signature »,
 *                                          « Le plus choisi », « -17% »…)
 *     lui-même posé sur blanc  → 3,6:1    (étiquettes « TVA normale 20 % », « Autoliquidation »)
 * Le minimum du RGAA / WCAG AA est de 4,5:1 pour du texte normal. Le premier bouton du site
 * ne le respectait pas.
 *
 * LE REMÈDE NE CHANGE PAS LA MARQUE : #0a6ba5 est DÉJÀ dans la palette (--blue-d). Il donne
 * 4,64:1 avec le blanc, dans les deux sens. On promeut simplement la nuance foncée au rang de
 * couleur d'action, et le bleu clair d'origine reste disponible pour le décoratif.
 *
 * ⚠️ CORRECTION D'UNE ERREUR QUE J'AVAIS FAITE UNE HEURE PLUS TÔT : ma première passe éclaircissait
 * `.combo small`. Ce sélecteur touche aussi des légendes posées sur des cartes BLANCHES, où le
 * gris clair tombait à 1,82:1 — j'avais aggravé ce que je corrigeais. On ne cible plus une
 * classe au jugé : on nomme le fond sur lequel le texte est réellement posé.
 * ═══════════════════════════════════════════════════════════════════════════════════════ */

.vitrine {
  /* Couleur d'action : la nuance foncée de la palette, seule à passer le seuil avec du blanc. */
  --blue: #0a6ba5;
  --color-brand: #0a6ba5;
  /* Le bleu clair d'origine reste pour les halos, traits et fonds décoratifs. */
  --blue-clair-decoratif: #168bd6;
}

/* Les mentions du hero, sur fond marine : 5,83:1 → 9:1. Elles restent secondaires,
   elles redeviennent lisibles. Aucune ne se trouve sur fond clair. */
.vitrine .hero .trust-row {
  color: #b4c1d6;
}

/* Maquette du téléphone : l'heure et la barre d'état étaient en BLANC sur #edf3fd — 1,11:1,
   c'est-à-dire invisible. Douze occurrences. */
.vitrine .ph2 {
  color: #3d4c63;
}

/* Le bleu d'action vaut #0a6ba5 dans TOUTE la feuille : plus besoin d'exception par
 * composant. Une exception par pastille aurait tenu jusqu'à la prochaine pastille. */

/* ═══════════════════════════════════════════════════════════════════════════════════════
 * LES 29 SECTIONS INVISIBLES — corrigé le 03-08-2026, sur insistance de l'éditrice.
 *
 * L'ancien site révélait ses sections au défilement : `.reveal { opacity: 0 }` posé par le
 * CSS, puis un script (IntersectionObserver) ajoutait `.in` quand la section entrait à
 * l'écran. La page d'accueil figée a conservé le HTML et le CSS — MAIS PAS LE SCRIPT.
 * Résultat mesuré sur la page en production : 29 sections sur 29 encore à opacité 0.
 * Tout ce qui suit le hero était invisible. La page paraissait s'évanouir.
 *
 * ⚠️ POURQUOI AUCUN AUDIT NE L'A VU. Le balayage de contraste excluait les éléments
 * d'opacité < 0,1 — pour ne pas mesurer des éléments « pas encore affichés ». Le filtre
 * anti-bruit masquait exactement le défaut. L'éditrice, elle, l'a vu à l'œil, deux fois.
 * Leçon : un élément invisible n'est pas du bruit, c'est un constat.
 *
 * LA RÈGLE : le contenu ne dépend JAMAIS d'un script pour exister. État de base : visible.
 * L'effet d'apparition est conservé là où le navigateur sait le faire SANS script
 * (animation liée au défilement, prise en charge récente) ; ailleurs, et pour qui préfère
 * les interfaces sans mouvement, le contenu est simplement là.
 * ═══════════════════════════════════════════════════════════════════════════════════════ */

.vitrine .reveal {
  opacity: 1;
  transform: none;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .vitrine .reveal {
      animation: reveal-au-defilement 0.6s ease-out both;
      animation-timeline: view();
      animation-range: entry 0% entry 35%;
    }
  }
}

@keyframes reveal-au-defilement {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
 * LA COLLISION « hero-grid » — le voile que l'éditrice signalait depuis sa première capture.
 * Corrigé le 03-08-2026, après trois fausses pistes (couleurs, animation, service worker).
 *
 * DEUX SYSTÈMES, UN MÊME NOM. Dans le NOUVEAU design (globals.css compilé), « .hero-grid »
 * est un DÉCOR : une texture de grille, estompée vers le bas par un masque
 * (mask-image: linear-gradient(#000, transparent 92%)) et insensible aux clics
 * (pointer-events: none). Dans la page d'accueil FIGÉE, « .wrap.hero-grid » est le
 * CONTENEUR DU CONTENU du hero. Les deux feuilles cohabitant sur la même page, le contenu
 * a été traité comme un décor :
 *   – gommé progressivement vers le bas (paragraphe, boutons, mentions, carte blanche) ;
 *   – et SURTOUT : « Démarrer l'essai 14 jours » — le premier bouton du site — NON CLIQUABLE.
 *
 * POURQUOI AUCUNE MESURE NE LE VOYAIT : un masque n'est ni une opacité (elle valait 1),
 * ni un élément par-dessus (il n'y en avait aucun). Et le premier relevé de pile au point
 * du bouton ne listait pas le bouton lui-même — c'était le pointer-events: none qui
 * l'escamotait, indice présent dès la première sonde et compris des heures plus tard.
 * ═══════════════════════════════════════════════════════════════════════════════════════ */
.vitrine .wrap.hero-grid {
  mask-image: none;
  -webkit-mask-image: none;
  background-image: none;
  pointer-events: auto;
}