/* ============================================================
   PAGE TARIFS — retours porteur du 18/08 : badge « le plus courant »
   retiré, contenu hors cartes à partir de « Ce qui est compris »,
   première année offerte mise en avant, icônes Bootstrap Icons.
   Fichier isolé (déclaré via cssFiles) plutôt que touché dans
   style.css, qui porte du travail non commité du porteur du projet.
   ============================================================ */

/* Largeur de lecture de la page. Remplace un style= en ligne qui traînait dans
   la vue, contraire à la règle « aucun style en ligne » du workspace. */
.tarifs-page { max-width: 940px; }

/* Bandeau « première année offerte » : l'argument commercial principal,
   sorti des cards et mis en évidence par un fond doré et une icône. */
.tarifs-offer {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin: 2.5rem 0;
    padding: 1.75rem 2rem;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--gold-light) 0%, var(--paper) 100%);
    border: 1px solid var(--line);
}

.tarifs-offer__icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--gold);
    color: #fff;
}

.tarifs-offer__icon svg {
    width: 30px;
    height: 30px;
}

.tarifs-offer__kicker {
    font-family: 'Nunito', serif;
    font-style: italic;
    font-weight: 700;
    color: var(--gold-deep);
    font-size: .9rem;
    margin: 0 0 .2rem;
}

.tarifs-offer__title {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    color: var(--ink);
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    margin: 0 0 .5rem;
}

.tarifs-offer__text {
    color: var(--ink-soft);
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    margin: 0;
    max-width: 62ch;
}

@media (max-width: 575.98px) {
    .tarifs-offer {
        flex-direction: column;
        text-align: center;
    }
}

/* Tarif d'avant remise, barré, au-dessus du montant réel (professeurs offerts — barème du
   18/09/2026). Voir EtablissementModel::GRILLE_TARIFAIRE, clé « barre ». */
.tarifs-barre {
    display: block;
    text-decoration: line-through;
    color: var(--ink-soft);
    font-size: 1.05rem;
    line-height: 1.2;
}

/* ------------------------------------------------------------------
   Barème par type de compte (porteur, 19/09) : plus de cards, une LIGNE par type.
   Libellé à gauche, prix à droite, même ligne de base — les quatre montants
   s'alignent verticalement, l'œil les compare d'un coup. Tout est agrandi : la page
   doit se lire de loin.
   ------------------------------------------------------------------ */
.tarifs-bareme {
    margin: 3rem 0 0;
    border-top: 1px solid var(--line);
}

/* Trois colonnes : libellé | montant (aligné à droite) | mention (alignée à gauche). Tous les
   montants finissent donc à la MÊME abscisse et toutes les mentions commencent à la même, même
   quand une ligne n'a pas de mention (professeurs, parents). */
.tarifs-ligne {
    display: grid;
    grid-template-columns: 1fr auto 11rem;
    align-items: baseline;
    gap: 1rem 1rem;
    padding: 1.6rem 0;
    border-bottom: 1px solid var(--line);
}

.tarifs-ligne__libelle {
    font-family: 'Manrope', 'Nunito', sans-serif;
    font-weight: 700;
    font-size: clamp(1.25rem, 2.2vw, 1.75rem);
    line-height: 1.25;
    color: var(--ink);
}

.tarifs-ligne__prix {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: .75rem;
    text-align: right;
}

.tarifs-montant {
    font-family: 'Manrope', 'Nunito', sans-serif;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
    font-size: clamp(2rem, 4vw, 3rem);
    color: var(--forest);
}

/* Tarif d'avant remise, barré, devant le montant réel (professeurs offerts — barème du
   18/09/2026). Voir EtablissementModel::GRILLE_TARIFAIRE, clé « barre ». */
.tarifs-barre {
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    color: var(--ink-soft);
    font-size: clamp(1.1rem, 1.8vw, 1.4rem);
    white-space: nowrap;
}

.tarifs-ligne__mention {
    color: var(--ink-soft);
    font-size: clamp(.95rem, 1.4vw, 1.05rem);
    line-height: 1.3;
}

/* ------------------------------------------------------------------
   Appel à l'action de fin de page — volontairement imposant (porteur, 19/09).
   ------------------------------------------------------------------ */
.tarifs-cta {
    margin-top: 4rem;
    padding: 3.5rem 2rem;
    border-radius: 20px;
    text-align: center;
    background: linear-gradient(135deg, var(--gold-light) 0%, var(--paper) 100%);
    border: 1px solid var(--line);
}

.tarifs-cta__titre {
    font-family: 'Manrope', 'Nunito', sans-serif;
    font-weight: 800;
    font-size: clamp(1.6rem, 3.4vw, 2.5rem);
    line-height: 1.15;
    color: var(--ink);
    margin: 0 0 .6rem;
}

.tarifs-cta__texte {
    color: var(--ink-soft);
    font-size: clamp(1.05rem, 1.8vw, 1.25rem);
    margin: 0 0 2rem;
}

.tarifs-cta__bouton {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    font-weight: 700;
    padding: 1rem 2.75rem;
}

@media (max-width: 575.98px) {
    /* Petit écran : le prix passe sous son libellé, aligné à gauche comme lui. */
    .tarifs-ligne {
        grid-template-columns: 1fr;
        gap: .3rem;
    }

    .tarifs-ligne__prix {
        justify-content: flex-start;
        text-align: left;
    }
}