/* ═══════════════════════════════════════════════════════════════════
   MDG — LES TARIFS
   ───────────────────────────────────────────────────────────────────
   La page place sur la grille ce que systeme.css définit : la tête,
   les familles (la liste qui commande un panneau), les cartes de
   packs, le tableau comparatif. Rien d'autre n'est redéfini ici.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ 1. LA TÊTE ══════════════════════════════════════════════════ */
.tarifs-tete {
  padding-top: calc(var(--e-3) + 34px + var(--e-6));
  padding-bottom: var(--e-6);
}
.tarifs-titre { --l: 12; display: grid; gap: var(--e-4); align-content: start; }
.tarifs-titre .t-1 { margin-top: var(--e-2); }
.tarifs-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-4); }
.tarifs-faits { --l: 12; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gout); align-self: end; }
.tarifs-faits .tuile { min-height: 8rem; }
.tarifs-faits dt { margin-bottom: auto; }
.tarifs-faits dd b { display: block; font-family: var(--f-display); font-weight: 700; font-size: clamp(1.4rem, 2.2vw, 2rem); letter-spacing: -.03em; line-height: 1; }
.tarifs-faits dd span { display: block; margin-top: .4em; color: var(--gris); font-size: .86rem; }
.tarifs-faits .tuile--acide dd span { color: var(--encre); opacity: .75; }
@media (max-width: 599px) {
  .tarifs-faits { grid-template-columns: 1fr; }
  .tarifs-faits .tuile { min-height: 0; grid-template-columns: auto 1fr; align-items: center; gap: var(--e-3); }
  .tarifs-faits dt { margin: 0; min-width: 5.5em; }
}
@media (min-width: 900px) {
  .tarifs-titre { --l: 7; }
  .tarifs-faits { --c: 8; --l: 5; grid-template-columns: 1fr; }
  .tarifs-faits .tuile { min-height: 0; grid-template-columns: auto 1fr; align-items: center; gap: var(--e-4); padding: var(--e-3) var(--e-4); }
  .tarifs-faits dt { margin: 0; min-width: 6em; }
}

/* Le bloc des tarifs sites (systeme.css), colle a la tete. */
.tarifs-vers-sites .vers-sites { margin-top: 0; }

/* ═══ 2. LES FORMULES ═════════════════════════════════════════════ */
.formules { row-gap: var(--e-4); }
.formules .onglets { --l: 12; }
.formules .depuis { font-family: var(--f-display); font-weight: 500; font-size: .74rem; letter-spacing: .04em; color: var(--gris); }
.onglet[aria-selected="true"] .depuis { color: inherit; opacity: .75; }
.formules-corps { --l: 12; display: grid; gap: var(--e-5); }

.packs { display: grid; gap: var(--gout); }
@media (max-width: 899px) { .pack--acide { order: -1; } }
.pack {
  display: grid;
  gap: var(--e-3);
  align-content: start;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--rayon-g);
  background: var(--noir-2);
  box-shadow: inset 0 0 0 1px var(--trait);
  position: relative;
  animation: apparait var(--d-moyen) var(--ease);
}
.pack--acide { background: var(--accent); color: var(--encre); box-shadow: none; --gris: var(--encre); }
.pack--acide .numero { color: var(--encre); opacity: .6; }
.pack-badge { position: absolute; top: var(--e-3); right: var(--e-3); background: var(--encre); color: var(--accent); }
.pack .t-2 { font-weight: 700; }
.pack-pour { color: var(--gris); }
.pack--acide .pack-pour { opacity: .75; }
.pack-prix { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5em 1em; padding-top: var(--e-3); border-top: 1px solid var(--trait); }
.pack--acide .pack-prix { border-color: rgba(16, 18, 6, .18); }
.pack-prix b { font-family: var(--f-display); font-weight: 700; font-size: clamp(2.4rem, 4vw, 3.6rem); letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.pack-prix small { color: var(--gris); font-size: .86rem; }
.pack--acide .pack-prix small { opacity: .75; }
.pack-inclus { display: grid; gap: .5em; padding-bottom: var(--e-3); }
.pack-inclus li { position: relative; padding-left: 1.3em; }
.pack-inclus li::before { content: ''; position: absolute; left: .1em; top: .62em; width: .42em; height: .42em; background: var(--accent); transform: rotate(45deg); }
.pack--acide .pack-inclus li::before { background: var(--encre); }
.pack .bouton { justify-self: start; margin-top: auto; }
.pack--acide .bouton--encre { background: var(--encre); color: var(--accent); }
.extras { font-size: .92rem; }

.compare-intro { font-size: .92rem; margin-top: -.4em; }

/* SUR TELEPHONE, LE TABLEAU N'EST PLUS UN TABLEAU. Trois colonnes dans
   375 px obligeaient a le faire defiler de cote : personne ne le fait,
   et la colonne mise en avant restait hors champ. Chaque ligne devient
   donc un bloc, et chaque valeur porte le nom de sa formule. */
@media (max-width: 699px) {
  .compare table, .compare thead, .compare tbody, .compare tr, .compare th, .compare td { display: block; }
  .compare thead { display: none; }
  .compare tr { padding: var(--e-3) 0; border-bottom: 1px solid var(--trait); }
  .compare tr:last-child { border-bottom: 0; padding-bottom: 0; }
  .compare tbody th { width: auto; padding: 0 0 .5em; color: var(--creme); font-family: var(--f-display); font-weight: 500; }
  .compare tbody td { display: grid; grid-template-columns: 1fr auto; gap: var(--e-3); align-items: baseline; padding: .35em 0; border: 0; }
  .compare tbody td::before {
    content: attr(data-col);
    font-family: var(--f-display);
    font-weight: 500;
    font-size: var(--t-5);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gris);
  }
  .compare tbody td:last-child { background: none; padding: .35em .6em; border-radius: var(--rayon); background: rgba(var(--accent-rgb), .08); }
  .compare tbody td:last-child::before { color: var(--accent); }
}

.compare { display: grid; gap: var(--e-3); padding: clamp(1.2rem, 2.5vw, 2rem); border-radius: var(--rayon-g); background: var(--noir-2); box-shadow: inset 0 0 0 1px var(--trait); overflow-x: auto; }
.compare[hidden] { display: none; }
.compare table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.compare th, .compare td { text-align: left; padding: .8em .6em; border-bottom: 1px solid var(--trait); vertical-align: top; }
.compare thead th { font-family: var(--f-display); font-weight: 500; font-size: var(--t-5); letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.compare thead th.acide { color: var(--accent); }
.compare tbody th { font-weight: 400; color: var(--gris); width: 40%; }
.compare tbody td { font-family: var(--f-display); font-weight: 500; }
.compare tbody td:last-child { color: var(--creme); background: rgba(var(--accent-rgb), .06); }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }

@media (min-width: 900px) {
  .formules .onglets { --l: 3; }
  .formules .onglet { grid-template-columns: 2.6em 1fr auto auto; column-gap: .8em; }
  .formules-corps { --c: 5; --l: 8; }
  .packs { grid-template-columns: 1fr 1fr; }
  .packs--solo { grid-template-columns: 1fr; }
  .packs--solo .pack { grid-template-columns: 1fr 1fr; column-gap: var(--e-6); }
  .packs--solo .pack .t-2, .packs--solo .pack .numero, .packs--solo .pack .pack-pour, .packs--solo .pack .pack-prix { grid-column: 1; }
  .packs--solo .pack .pack-inclus { grid-column: 2; grid-row: 1 / span 4; align-self: center; padding: 0; }
  .packs--solo .pack .bouton { grid-column: 1; }
}

/* ═══ 3. LA PREUVE ════════════════════════════════════════════════ */
#preuve .citation { --l: 12; }
#preuve .citation figcaption { flex-wrap: wrap; }
#preuve .citation figcaption .lien { margin-left: auto; }
.preuve-chiffres { --l: 12; display: grid; gap: var(--e-5); }
.preuve-chiffres .tuile { background: rgba(6, 6, 6, .04); box-shadow: inset 0 0 0 1px var(--trait); }
.preuve-chiffres .tuile b i { color: var(--encre); opacity: .5; }
.logos--court { justify-content: flex-start; gap: var(--e-5); }
@media (min-width: 900px) {
  #preuve .citation { --l: 7; }
  .preuve-chiffres { --c: 9; --l: 4; }
  .preuve-chiffres .chiffres { grid-template-columns: 1fr; }
  .preuve-chiffres .tuile { grid-template-columns: auto 1fr; align-items: baseline; gap: var(--e-3); min-height: 0; padding: var(--e-3) var(--e-4); }
  .preuve-chiffres .tuile b { font-size: 2.4rem; }
  .logos--court { flex-wrap: wrap; overflow: visible; mask-image: none; -webkit-mask-image: none; }
  .logos--court img { height: 30px; }
  .logos--court img.grand { height: 40px; }
}

/* ═══ 4. QUESTIONS ET APPEL ═══════════════════════════════════════ */
#questions .faq { --l: 12; }
#questions .appel { --l: 12; }
@media (min-width: 900px) {
  #questions .faq { --l: 7; }
  #questions .faq .faq-liste { grid-template-columns: 1fr; }
  #questions .appel { --c: 9; --l: 4; grid-template-columns: 1fr; align-self: start; }
}