/* ============================================================
   PAGE TARIFS — retours porteur du 18/08 : badge « le plus courant »
   retiré, contenu hors cartes à partir de « Ce qui est compris »,
   positionnement B2B marchés publics (10/10/2026) : aucune période offerte, barème sur une
   ligne, grand tableau des fonctionnalités par type d'utilisateur, 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. */
/* Toute la largeur du container Bootstrap (porteur 10/10). */

/* ------------------------------------------------------------------
   Barème SUR UNE LIGNE (porteur, 09/10/2026) : quatre colonnes, une par type de compte,
   séparées d'un filet ; libellé en haut, montant au milieu sur la même ligne de base pour les
   quatre, mention en bas. Tout est grand : la page doit se lire de loin. En dessous de 992 px,
   deux colonnes ; en dessous de 576 px, une colonne par ligne.
   ------------------------------------------------------------------ */
.tarifs-ligne-unique {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 3rem 0 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.tarifs-colonne {
    display: grid;
    grid-template-rows: auto 1fr auto;
    align-items: end;
    gap: .6rem;
    padding: 1.8rem 1.4rem;
    text-align: center;
    border-left: 1px solid var(--line);
}

.tarifs-colonne:first-child { border-left: none; }

.tarifs-colonne__libelle {
    font-family: 'Manrope', 'Nunito', sans-serif;
    font-weight: 700;
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    line-height: 1.25;
    color: var(--ink);
    align-self: start;
}

.tarifs-colonne__prix {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    gap: .2rem;
}

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

/* Tarif d'avant remise, barré, AU-DESSUS du montant réel (professeurs offerts : même montant que
   les élèves, barré). 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-colonne__mention {
    color: var(--ink-soft);
    font-size: clamp(.9rem, 1.3vw, 1rem);
    line-height: 1.3;
}

@media (max-width: 991.98px) {
    .tarifs-ligne-unique { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tarifs-colonne:nth-child(odd) { border-left: none; }
    .tarifs-colonne:nth-child(n+3) { border-top: 1px solid var(--line); }
}

@media (max-width: 575.98px) {
    .tarifs-ligne-unique { grid-template-columns: 1fr; }
    .tarifs-colonne { border-left: none; }
    .tarifs-colonne + .tarifs-colonne { border-top: 1px solid var(--line); }
}

/* ------------------------------------------------------------------
   Note sous le barème (seul texte d'accompagnement : retour porteur du 10/10, moins de bavardage).
   ------------------------------------------------------------------ */
.tarifs-note { color: var(--ink-soft); font-size: 1rem; margin: 1.2rem 0 0; }

/* ------------------------------------------------------------------
   TABLEAUX des fonctionnalités : UN tableau par domaine, chacun avec ses en-têtes de colonnes
   (porteur, 10/10/2026). Coches VERTES, précision (quantité, formats, pays) sous la coche.
   Première colonne figée au défilement horizontal sur petit écran.
   ------------------------------------------------------------------ */
:root { --ok-green: #1E8A4C; }
.tarifs-catalogue { margin-top: 3.5rem; }
.tarifs-domaine { margin-top: 2.6rem; }
@media (min-width: 768px) { .tarifs-domaine { overflow: visible; } }
.tarifs-table { margin: 0; border-collapse: separate; border-spacing: 0; }
.tarifs-table__caption {
    caption-side: top; padding: 0 0 .7rem; color: var(--ink);
    font-family: 'Manrope', 'Nunito', sans-serif; font-weight: 800; font-size: clamp(1.25rem, 2.2vw, 1.6rem); letter-spacing: -.01em;
}
.tarifs-table__caption::before { content: ""; display: inline-block; width: 12px; height: 9px; border-radius: 50%;
    background: var(--gold); transform: rotate(-18deg); margin-right: .7rem; vertical-align: middle; }
.tarifs-table th, .tarifs-table td { border-bottom: 1px solid var(--line); vertical-align: middle; }
.tarifs-table thead th {
    font-family: 'Manrope', 'Nunito', sans-serif; font-weight: 800; font-size: .95rem;
    padding: .7rem .6rem; background: var(--paper); border-top: none; border-bottom: 1px solid var(--line);
    position: sticky; top: var(--header-h); z-index: 2;
}
.tarifs-table .tarifs-table__profil { text-align: center; width: 11rem; }
.tarifs-table .tarifs-table__fonction { font-weight: 600; color: var(--ink); padding: .7rem .9rem .7rem .6rem; line-height: 1.35; }
.tarifs-table tbody th.tarifs-table__fonction { background: var(--paper); }
.tarifs-table__oui, .tarifs-table__non { text-align: center; padding: .55rem .4rem; }
.tarifs-coche { display: inline-flex; width: 24px; height: 24px; border-radius: 50%; background: var(--ok-green); color: #fff;
    align-items: center; justify-content: center; }
.tarifs-coche svg { width: 15px; height: 15px; }
.tarifs-precision { display: block; font-size: .78rem; line-height: 1.25; color: var(--ink-soft); margin-top: .25rem; max-width: 11rem; margin-inline: auto; }
.tarifs-precision--fonction { max-width: none; margin-inline: 0; font-weight: 400; margin-top: .15rem; }
/* Lien « i » vers la page de la documentation de support (nouvel onglet). */
.tarifs-info { display: inline-flex; vertical-align: middle; margin-left: .3rem; color: var(--gold-deep); }
.tarifs-info svg { width: 15px; height: 15px; }
.tarifs-info:hover, .tarifs-info:focus-visible { color: var(--ink); }
.tarifs-table__note { font-size: .85rem; color: var(--ink-soft); line-height: 1.5; margin: .8rem 0 0; max-width: 100ch; }
.tarifs-table__non { color: var(--line); font-size: 1.4rem; line-height: 1; }

@media (max-width: 767.98px) {
    .tarifs-table thead th { position: static; }
    .tarifs-table .tarifs-table__fonction { position: sticky; left: 0; z-index: 1; min-width: 12rem; max-width: 14rem;
        padding-left: .5rem; box-shadow: 4px 0 8px -6px rgba(0,0,0,.25); }
    .tarifs-table thead .tarifs-table__fonction { position: sticky; left: 0; top: auto; z-index: 3; }
    .tarifs-table .tarifs-table__profil { width: 7rem; font-size: .85rem; }
    .tarifs-precision { max-width: 7rem; }
}

/* ------------------------------------------------------------------
   Appels d'offres (porteur 10/10, simplifié) : mise en page du héros — partition en fond, noir et blanc,
   voilée de blanc, filet or — sans les notes animées ; quatre points en ligne, un TRÈS grand bouton noir.
   ------------------------------------------------------------------ */
.tarifs-marches { position: relative; isolation: isolate; padding: 5rem 0; margin-top: 3rem; border-top: 3px solid var(--gold); text-align: center; }
.tarifs-marches::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
    background: url('/assets/images/illustration-connexion-partition.jpg') center / cover no-repeat;
    filter: grayscale(1) contrast(.9); opacity: .5; }
.tarifs-marches::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(255,255,255,.96) 35%, rgba(255,255,255,.75) 70%, rgba(255,255,255,.45) 100%); }
.tarifs-marches h2 { font-family: 'Manrope', 'Nunito', sans-serif; font-weight: 800; font-size: clamp(1.7rem, 3.4vw, 2.6rem);
    letter-spacing: -.02em; line-height: 1.1; color: var(--ink); margin: 0 0 1.6rem; }
.tarifs-marches__points { list-style: none; padding: 0; margin: 0 auto 2.2rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem 2rem; max-width: 70rem; }
.tarifs-marches__points li { display: inline-flex; align-items: center; gap: .55rem; color: var(--ink); font-weight: 600; }
.tarifs-marches__icone { display: inline-flex; width: 34px; height: 34px; border-radius: 50%; background: var(--gold); color: #fff;
    align-items: center; justify-content: center; flex: none; }
.tarifs-marches__icone svg { width: 18px; height: 18px; }
.tarifs-marches__bouton { font-family: 'Manrope', 'Nunito', sans-serif; font-weight: 800; font-size: clamp(1.15rem, 2.4vw, 1.7rem);
    padding: 1.1rem 2.6rem; box-shadow: 0 18px 40px -18px rgba(0,0,0,.6); }
.tarifs-marches__second { margin: 1.2rem 0 0; }
.tarifs-marches__second a { color: var(--ink-soft); }