/* Leçons futées — Page Formules (/formules), direction A « Nuit étoilée ». Ce qui est propre à cette page ;
   le reste (tokens, boutons, cartes de formules, nav, pied de page) est dans vitrine.css. Valeurs de la maquette. */

.f-tete{padding-top:3rem;padding-bottom:5.5rem;display:flex;flex-direction:column;gap:1.125rem;align-items:center;text-align:center}
.f-tete .pastille{align-self:center}
.f-tete h1{font-size:3.5rem;line-height:1.06;font-weight:700;max-width:50rem}
.f-tete p{font-size:1.25rem;line-height:1.55;color:var(--on-dark-text);max-width:38.75rem}

/* Cartes qui chevauchent l’en-tête */
.f-cartes{position:relative;margin-top:-3rem;padding-bottom:5rem}
.f-cartes .formule:not(.formule-sombre){box-shadow:0 1rem 2.5rem rgba(23,26,51,0.08)}

/* Tableau comparatif */
.f-detail{background:var(--bg-alt)}
.f-detail .wrap{padding-top:5.5rem;padding-bottom:5.5rem;display:flex;flex-direction:column;gap:2.25rem}
.f-detail .entete h2,.f-faq .entete h2{font-size:2.5rem}
.tableau{position:relative;overflow-x:auto;max-width:100%;min-width:0;background:#FFFFFF;border:1.5px solid var(--line);border-radius:1.5rem;padding:0.5rem 1rem}
.tableau:focus-visible{outline:3px solid var(--accent)}
.tableau table{border-collapse:collapse;width:100%;min-width:40rem}
.tableau th,.tableau td{padding:1.125rem 1rem;text-align:left;border-bottom:1px solid var(--line);font-size:1rem;vertical-align:top}
.tableau th{font-family:var(--titres);font-weight:600;font-size:1.125rem}
.tableau thead th:first-child{width:40%;color:var(--muted);font-family:var(--texte);font-size:0.875rem;letter-spacing:0.06em;text-transform:uppercase}
.tableau tbody th{font-family:var(--texte);font-size:1rem;font-weight:400}
.tableau tbody tr:hover{background:var(--bg-alt)}
.tableau .detail{color:var(--muted);font-size:0.875rem}
.tableau .oui{color:var(--success);font-weight:800}
.tableau .non{color:var(--muted)}

/* Questions fréquentes */
.f-faq .wrap{padding-top:6rem;padding-bottom:6rem;display:grid;grid-template-columns:repeat(auto-fit, minmax(min(20rem, 100%), 1fr));gap:3rem;align-items:start}
.f-faq .entete p{font-size:1.0625rem}
.questions{display:flex;flex-direction:column;gap:0.75rem}
.questions details{border:1.5px solid var(--line);border-radius:1.125rem;padding:1.25rem 1.5rem}
.questions summary{font-family:var(--titres);font-weight:600;font-size:1.1875rem;cursor:pointer}
.questions details p{margin:0.75rem 0 0;font-size:1rem;line-height:1.6;color:var(--muted)}

/* Appel final */
.f-appel .wrap{padding-bottom:6rem}
.f-appel .appel{padding:4rem 3rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem}
.f-appel .appel > div{display:flex;flex-direction:column;gap:0.625rem;max-width:40rem}
.f-appel .appel h2{font-size:2.25rem}
.f-appel .appel p{font-size:1.0625rem}

@media (max-width:900px){
  .f-tete h1{font-size:2.5rem}
}
@media (max-width:600px){
  .f-appel .appel{padding:3rem 1.5rem}
}

/* ---------- Ordinateur : les 3 cartes entièrement visibles dès l’arrivée (demande de Jerem) ----------
   En-tête plus compact (marges, titre, paragraphe sur 2 lignes) ; rien ne change sous 900 px. */
@media (min-width:901px){
  .premier-ecran{display:flex;flex-direction:column;min-height:100vh;min-height:100svh}
  .premier-ecran > section{flex:1}
  .f-tete{padding-top:0.5rem;padding-bottom:4rem;gap:0.75rem}
  .f-tete h1{font-size:2.75rem}
  .f-tete p{font-size:1.125rem;max-width:52rem}
}
/* Écran d’ordinateur bas (≤ 700 px de haut, ex. 1366×650) : cartes un peu plus serrées pour tenir en entier. */
@media (min-width:901px) and (max-height:700px){
  .f-cartes .formule{padding:1.25rem 2rem;gap:0.75rem}
  .f-cartes .inclus{gap:0.375rem}
  .f-tete{padding-bottom:3.5rem}
}

/* Formules V3A : prix annuel et équivalent par mois sous le prix mensuel, lien « ou choisir l’année » sous le bouton. */

/* Étape Stripe : phrase sous les cartes (paiement, résiliation) */
.f-note{margin:1.75rem auto 0;max-width:46rem;text-align:center;font-size:0.9375rem;line-height:1.5;color:var(--muted)}