/* Tarifs : masquage, passerelle e-mail et comparatif.
   ==================================================================
   Les montants sont dans la page — un site statique n'a aucun moyen de
   les en retirer. Le masquage est donc une porte commerciale, pas une
   protection : il échange l'accès aux prix contre une adresse, et c'est
   exactement ce qu'on lui demande de faire.

   Le leurre « ••• € » occupe la même place que le vrai montant : rien ne
   saute quand les tarifs s'ouvrent. */

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

.prix-masque { position: relative; display: inline-block; }
.prix-masque .prix-valeur { display: none; }
.prix-masque .prix-leurre { letter-spacing: 0.06em; opacity: 0.4; }

body.prix-ouverts .prix-masque .prix-valeur {
  display: inline;
  animation: prix-parait 0.5s var(--ease-sortie) both;
}
body.prix-ouverts .prix-masque .prix-leurre { display: none; }

@keyframes prix-parait {
  from { opacity: 0; filter: blur(7px); transform: translateY(-3px); }
  to   { opacity: 1; filter: none; transform: none; }
}

/* --- la porte ------------------------------------------------------- */
.porte-prix {
  --cadre-marge: 0px;
  --cadre-teinte: var(--orange);
  position: relative;
  margin-bottom: var(--sp-7);
  padding: clamp(24px, 3.4vw, 44px);
  background: var(--papier);
  display: grid;
  grid-template-columns: 1fr minmax(280px, 400px);
  gap: clamp(22px, 4vw, 56px);
  align-items: center;
}
.on-sombre .porte-prix { background: var(--nuit-2); }

.porte-prix h2 {
  font-family: var(--font-display);
  font-variation-settings: "wdth" var(--wdth-display), "wght" var(--wght-titre);
  font-size: clamp(1.4rem, 2.5vw, 2.1rem);
  line-height: 1.05;
  letter-spacing: -0.018em;
  max-width: 18ch;
}
.porte-prix > div > p {
  margin-top: var(--sp-4);
  color: var(--texte-doux);
  font-size: var(--fs-small);
  line-height: 1.6;
  max-width: 46ch;
}

.porte-prix form { display: grid; gap: var(--sp-3); }
.porte-prix label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.005em;
  text-transform: none;
  color: var(--texte-doux);
}
.porte-prix input {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--trait-fort);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font: inherit;
  color: var(--texte);
}
.porte-prix input:focus { outline: 2px solid var(--orange); outline-offset: 1px; }
.porte-prix input[aria-invalid="true"] { border-color: var(--orange); }

.porte-erreur { min-height: 1.1em; font-size: var(--fs-small); color: var(--orange-texte); }

.porte-mention {
  font-size: var(--fs-label);
  line-height: 1.55;
  color: var(--texte-doux);
}
.porte-mention a { text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 860px) {
  .porte-prix { grid-template-columns: 1fr; }
}

/* --- comparatif ----------------------------------------------------- */
.comparatif {
  margin-top: var(--sp-8);
  /* Un tableau large ne doit jamais élargir la page : il défile chez lui. */
  overflow-x: auto;
  border: 1px solid var(--trait);
}
.comparatif table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: var(--fs-small);
}
.comparatif th, .comparatif td {
  padding: 13px var(--sp-4);
  text-align: left;
  border-bottom: 1px solid var(--trait);
}
.comparatif thead th {
  position: sticky;
  top: var(--header-h);
  background: var(--bg);
  font-family: var(--font-display);
  font-variation-settings: "wdth" var(--wdth-display), "wght" var(--wght-titre);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--trait-fort);
  white-space: nowrap;
}
.comparatif thead th.est-avant { color: var(--orange-texte); }
.comparatif tbody th {
  font-weight: 500;
  color: var(--texte);
  white-space: nowrap;
}
.comparatif tbody td { color: var(--texte-doux); }
.comparatif tbody tr:hover { background: var(--papier); }
.comparatif tbody tr:last-child th,
.comparatif tbody tr:last-child td { border-bottom: 0; }

.comparatif .icone { width: 14px; height: 14px; display: inline-flex; }
.comparatif .est-oui .icone { color: var(--vert); }
.comparatif .est-non .icone { color: var(--gris-clair); }
.comparatif .est-vide { color: var(--gris-clair); }