/* =========================================================
   Revisly — page « Tarifs »
   (se charge par-dessus styles.css, la feuille de la landing)
   ========================================================= */

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

.tarifs-hero{position:relative;z-index:1;padding:150px 0 40px;text-align:center}
.tarifs-hero h1{font-size:3.25rem;font-weight:700;letter-spacing:-.025em;line-height:1.1}
.tarifs-hero h1 .accent{color:var(--sky-bold)}
.tarifs-hero .chapeau{
  margin:16px auto 0;max-width:56ch;font-size:1.125rem;color:var(--ink-secondary);
}

/* ---------- bascule mensuel / annuel ---------- */
.bascule-periode{
  margin:30px auto 0;display:inline-flex;align-items:center;gap:4px;padding:4px;
  background:var(--surface-primary);border:1px solid var(--surface-border);border-radius:999px;
  box-shadow:var(--shadow-sm);
}
.bascule-periode button{
  padding:9px 20px;border-radius:999px;font-size:.9375rem;font-weight:500;
  color:var(--ink-secondary);transition:background .18s,color .18s;
}
.bascule-periode button.on{background:var(--sky-bold);color:#fff}
.bascule-periode .eco{
  margin-left:6px;font-size:.6875rem;font-weight:700;padding:2px 7px;border-radius:999px;
  background:var(--highlight);color:#4a3c00;
}
.bascule-periode button.on .eco{background:rgba(255,255,255,.24);color:#fff}

/* ---------- cartes d'offre ---------- */
.offres{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;
  align-items:start;margin-top:44px;
}
.offre{
  background:var(--surface-primary);border:1px solid var(--surface-border);
  border-radius:22px;padding:28px;display:flex;flex-direction:column;
  box-shadow:var(--shadow-sm);
}
.offre.vedette{
  border-color:var(--sky-bold);box-shadow:var(--shadow-lg);
  position:relative;padding-top:34px;
}
.ruban{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--sky-bold);color:#fff;font-size:.75rem;font-weight:700;
  padding:5px 14px;border-radius:999px;white-space:nowrap;
}
.offre h2{font-size:1.25rem;font-weight:700;letter-spacing:-.01em}
.offre .pour{margin-top:6px;font-size:.875rem;color:var(--ink-secondary);min-height:40px}

.prix{margin-top:18px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.prix .montant{font-size:2.75rem;font-weight:700;letter-spacing:-.03em;line-height:1}
.prix .par{font-size:.9375rem;color:var(--ink-secondary)}
.facturation{margin-top:8px;font-size:.8125rem;color:var(--ink-tertiary);min-height:20px}

.offre .cta{margin-top:22px}
.offre .cta .btn{width:100%;font-size:1rem;padding:12px 20px}

.avantages{margin-top:24px;display:flex;flex-direction:column;gap:11px;flex:1}
.avantages li{display:flex;align-items:flex-start;gap:10px;font-size:.9375rem;line-height:1.5}
.avantages svg{width:17px;height:17px;flex:none;margin-top:3px;color:var(--sky-bold)}
.avantages .titre-groupe{
  font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-tertiary);margin-top:4px;
}
/* l'illimité a un filet horaire : on le dit, en petit mais en clair */
.avantages .usage-raisonnable{
  margin-top:6px;font-size:.75rem;line-height:1.45;color:var(--ink-tertiary);
}

/* ---------- bandeau établissement ---------- */
.etablissement{
  margin-top:24px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  background:var(--sky-soft);border:1px solid #cfe6fa;border-radius:20px;padding:26px 28px;
}
.etablissement .txt{flex:1;min-width:260px}
.etablissement h3{font-size:1.125rem;font-weight:700}
.etablissement p{margin-top:6px;font-size:.9375rem;color:var(--ink-secondary)}

/* ---------- comparatif ---------- */
.section-tarifs{position:relative;z-index:1;padding:72px 0 0}
.section-tarifs h2{font-size:2.25rem;font-weight:700;letter-spacing:-.02em;text-align:center}
.section-tarifs .sous{
  margin:12px auto 0;max-width:60ch;text-align:center;
  font-size:.9375rem;color:var(--ink-secondary);
}

.tableau{
  margin-top:32px;overflow-x:auto;
  background:var(--surface-primary);border:1px solid var(--surface-border);
  border-radius:20px;box-shadow:var(--shadow-sm);
}
table{width:100%;border-collapse:collapse;min-width:620px}
thead th{
  padding:18px 20px;text-align:left;font-size:.875rem;font-weight:700;
  border-bottom:1px solid var(--surface-border);
}
thead th.nous{color:var(--sky-bold)}
tbody td{
  padding:15px 20px;font-size:.9375rem;color:var(--ink-secondary);
  border-bottom:1px solid #f0efec;
}
tbody tr:last-child td{border-bottom:0}
tbody td:first-child{color:var(--ink-primary);font-weight:500}
tbody td.nous{color:var(--ink-primary);font-weight:600;background:rgba(30,136,216,.05)}
.oui svg{width:17px;height:17px;color:#3f8a4a}
.non svg{width:17px;height:17px;color:var(--ink-tertiary)}

.source{
  margin-top:14px;font-size:.75rem;line-height:1.6;color:var(--ink-tertiary);text-align:center;
}
.source a{color:var(--sky-bold);text-decoration:underline}

/* ---------- questions ---------- */
.q-tarifs{max-width:760px;margin:36px auto 0}
.q-tarifs .item{border-bottom:1px solid var(--surface-border)}
.q-tarifs .q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:20px 4px;text-align:left;font-size:1rem;font-weight:500;
}
.q-tarifs .q svg{width:16px;height:16px;flex:none;color:var(--ink-tertiary);transition:transform .3s}
.q-tarifs .item.open .q svg{transform:rotate(180deg)}
.q-tarifs .r{max-height:0;overflow:hidden;transition:max-height .35s ease}
.q-tarifs .r p{padding:0 4px 22px;font-size:.9375rem;line-height:1.65;color:var(--ink-secondary)}

@media (prefers-reduced-motion: reduce){
  .bascule-periode button,.q-tarifs .r,.q-tarifs .q svg{transition:none}
}

@media (max-width:1000px){
  .offres{grid-template-columns:1fr;max-width:460px;margin-left:auto;margin-right:auto}
  .offre.vedette{order:-1}
}
@media (max-width:640px){
  .tarifs-hero{padding-top:120px}
  .tarifs-hero h1{font-size:2.25rem}
  .section-tarifs h2{font-size:1.75rem}
  .prix .montant{font-size:2.25rem}
}