/* abonnements.css — Page de présentation des offres d'abonnement
 *
 * Hooks data-feature-id prévus pour le sprint modales :
 *   fonds-documentaire, portraits, videos-formation
 *   claudine-acces, claudine-suggestions
 *   annuaire, agenda-evenements, emplois-alertes, marches-alertes
 *   croisements-avances, observatoire-sectoriel
 *   espace-etablissement, export-pedagogique
 */

/* ============================================================
   Mode clair/sombre
   Cette page utilise une échelle de gris "Tailwind" (#111827…#f9fafb)
   qui n'existe nulle part ailleurs dans le projet : elle a donc son
   propre jeu de tokens ci-dessous, sur le pattern habituel (colonne
   claire = valeurs actuelles reproduites à l'identique, donc aucun
   pixel changé en thème clair).
   Pour l'accent, --color-info vaut exactement les mêmes valeurs que
   --color-services / --color-publications : les tokens de rôle
   --text-accent / --accent-border / --surface-highlight s'y substituent
   sans écart en clair.
   Ce qui reste figé dans les 2 thèmes : les pastilles de fonctionnalité
   vert (#d1fae5/#065f46) et ambre (#fef3c7/#92400e), petits couples
   fond pâle + texte foncé auto-cohérents comme les badges du reste du
   site, et le badge pill "Établissement".
   ============================================================ */
:root {
    --abo-card-bg:      var(--surface-page);          /* #fff */
    --abo-title:        #111827;                      /* nom de l'offre */
    --abo-text:         #374151;                      /* libellés de fonctionnalité */
    --abo-text-mid:     #4b5563;                      /* baseline, prix "sur devis" */
    --abo-text-soft:    #6b7280;                      /* période, notes, en-têtes de tableau */
    --abo-label:        #9ca3af;                      /* intitulés de catégorie en capitales */
    --abo-border:       #d1d5db;                      /* bord de carte, bord du CTA ghost */
    --abo-border-hover: #9ca3af;                      /* bord du CTA ghost au survol */
    --abo-line:         var(--color-neutral-e5e7eb);  /* #e5e7eb : filets et separateurs */
    --abo-zebra:        #f9fafb;                      /* fonds de lignes : thead, cat-row, survol ghost */
    --abo-excl-bg:      #f3f4f6;                      /* pastille des fonctionnalites exclues */
    --abo-accent-hover: var(--color-info-hover);      /* survol des elements d'accent */
    /* CTA principal : bleu nuit plein + texte blanc en clair. */
    --abo-cta-bg:       var(--color-info);
    --abo-cta-text:     #fff;
    --abo-cta-hover-bg: var(--color-info-hover);
    --abo-cta-outline-hover-bg:   var(--color-info);
    --abo-cta-outline-hover-text: #fff;
    /* Icones du tableau comparatif */
    --abo-cmp-yes:      #059669;
    --abo-cmp-no:       #d1d5db;
    --abo-cmp-limited:  #d97706;
}
[data-bs-theme="dark"] {
    --abo-title:        var(--bs-white);
    --abo-text:         var(--bs-gray-200);
    --abo-text-mid:     var(--bs-gray-300);
    --abo-text-soft:    var(--bs-gray-400);
    --abo-label:        var(--bs-gray-500);
    --abo-border:       var(--bs-gray-700);
    --abo-border-hover: var(--bs-gray-600);
    --abo-zebra:        var(--bs-gray-800);
    --abo-excl-bg:      var(--bs-gray-700);
    --abo-accent-hover: var(--bs-gray-400);
    /* Le bleu nuit plein se confondrait avec la carte (gris 900) : on inverse,
       comme la pastille d'etape active du depot d'offre - fond = l'accent
       eclairci --accent-border, texte = le bleu nuit. Le survol est ce meme
       bleu eclairci d'un cran, construit de la meme facon. */
    --abo-cta-bg:       var(--accent-border);
    --abo-cta-text:     var(--color-info);
    --abo-cta-hover-bg: #b5b5d8;
    --abo-cta-outline-hover-bg:   var(--bs-gray-700);
    --abo-cta-outline-hover-text: var(--bs-white);
    /* Icones : on remonte d'un cran sur la meme rampe (emerald/amber 400),
       et le "non" repart vers le gris sombre - en clair c'est le signe le plus
       discret du tableau, il doit le rester. */
    --abo-cmp-yes:      #34d399;
    --abo-cmp-no:       var(--bs-gray-600);
    --abo-cmp-limited:  #fbbf24;
}

/* ============================================================
   Section wrapper
   ============================================================ */
.pricing-section {
    padding: 2.5rem 0 3.5rem;
}

/* ============================================================
   Grille responsive : 1 col → 2 col (≥600px) → 4 col (≥1024px)
   ============================================================ */
.pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: start;
}

@media (min-width: 600px) {
    .pricing-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1024px) {
    .pricing-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ============================================================
   Cartes de base
   ============================================================ */
.pricing-card {
    background: var(--abo-card-bg);
    border: 0.5px solid var(--abo-border);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    transition: box-shadow .2s;
}

.pricing-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
}

/* Carte mise en avant — All Inclusive */
.pricing-card--featured {
    border: 2px solid var(--accent-border);
    box-shadow: 0 6px 28px rgba(26, 44, 90, .14);
}

.pricing-card--featured:hover {
    box-shadow: 0 8px 32px rgba(26, 44, 90, .2);
}

/* ============================================================
   Badge bandeau — "Recommandé"
   ============================================================ */
.pricing-card__badge-bar {
    background: var(--abo-cta-bg);
    color: var(--abo-cta-text);
    text-align: center;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 7px 0;
}

/* ============================================================
   Badge pill — "Établissement"
   ============================================================ */
.pricing-card__badge-pill {
    display: inline-block;
    background: var(--color-info-light);
    color: var(--color-info);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    border-radius: 20px;
    padding: 3px 10px;
    margin-bottom: 4px;
}

/* ============================================================
   En-tête de carte : nom, prix, baseline
   ============================================================ */
.pricing-card__header {
    padding: 1.25rem 1.25rem 0;
}

.pricing-card__name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--abo-title);
    margin: 0 0 6px;
    line-height: 1.2;
}

.pricing-card__price-wrap {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin: 6px 0 4px;
    flex-wrap: wrap;
}

.pricing-card__price {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-accent);
    line-height: 1;
}

.pricing-card__price--free {
    font-size: 1.6rem;
}

.pricing-card__price--devis {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--abo-text-mid);
}

.pricing-card__period {
    font-size: 0.77rem;
    color: var(--abo-text-soft);
    line-height: 1;
}

.pricing-card__tagline {
    font-size: 0.84rem;
    color: var(--abo-text-mid);
    margin: 6px 0 0;
    min-height: 2.5em;
    line-height: 1.45;
}

/* ============================================================
   Séparateur
   ============================================================ */
.pricing-card__divider {
    border: none;
    border-top: 1px solid var(--abo-line);
    margin: 1rem 1.25rem 0;
}

/* ============================================================
   Liste de fonctionnalités
   ============================================================ */
.pricing-features {
    padding: 0.75rem 1.25rem 0;
    flex: 1;
}

.pricing-features__category {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--abo-label);
    margin: 1rem 0 0.35rem;
}

.pricing-features__category:first-child {
    margin-top: 0;
}

.pricing-features ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pricing-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 0.82rem;
    padding: 3px 0;
    line-height: 1.35;
    color: var(--abo-text);
}

/* Icône ronde */
.pricing-feature__icon {
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    font-size: 0.6rem;
    font-weight: 900;
    line-height: 1;
}

/* Inclus */
.pricing-feature-item--included .pricing-feature__icon {
    background: #d1fae5;
    color: #065f46;
}

/* Limité */
.pricing-feature-item--limited .pricing-feature__icon {
    background: #fef3c7;
    color: #92400e;
}

.pricing-feature-item--limited .pricing-feature__label em {
    font-style: italic;
    color: var(--abo-text-soft);
    font-size: 0.79rem;
}

/* Note positive (accès prioritaire, etc.) */
.pricing-feature__note {
    font-size: 0.78rem;
    color: var(--abo-text-soft);
}

/* Exclu */
.pricing-feature-item--excluded {
    opacity: 0.35;
}

.pricing-feature-item--excluded .pricing-feature__icon {
    background: var(--abo-excl-bg);
    color: var(--abo-text-soft);
}

/* ============================================================
   CTA
   ============================================================ */
.pricing-card__cta {
    padding: 1.25rem;
    margin-top: auto;
}

.pricing-cta {
    display: block;
    width: 100%;
    text-align: center;
    border-radius: 6px;
    font-size: 0.88rem;
    font-weight: 600;
    padding: 10px 16px;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
    border: 1.5px solid transparent;
    cursor: pointer;
    line-height: 1.4;
}

.pricing-cta--ghost {
    border-color: var(--abo-border);
    color: var(--abo-text-soft);
    background: transparent;
}

.pricing-cta--ghost:hover {
    border-color: var(--abo-border-hover);
    color: var(--abo-text);
    background: var(--abo-zebra);
    text-decoration: none;
}

.pricing-cta--outline {
    border-color: var(--text-accent);
    color: var(--text-accent);
    background: transparent;
}

.pricing-cta--outline:hover {
    /* En sombre --text-accent vaut blanc : le remplissage passe par le gris
       de survol plutot que par le bleu nuit, qui se confondrait avec la carte. */
    background: var(--abo-cta-outline-hover-bg);
    color: var(--abo-cta-outline-hover-text);
    text-decoration: none;
}

.pricing-cta--primary {
    background: var(--abo-cta-bg);
    color: var(--abo-cta-text);
    border-color: var(--abo-cta-bg);
}

.pricing-cta--primary:hover {
    background: var(--abo-cta-hover-bg);
    border-color: var(--abo-cta-hover-bg);
    color: var(--abo-cta-text);
    text-decoration: none;
}

/* ============================================================
   Section tableau comparatif
   ============================================================ */
.pricing-compare-section {
    padding: 0 0 2rem;
}

.pricing-compare-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-accent);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-bottom: 1.25rem;
    transition: color .15s;
}

.pricing-compare-toggle:hover {
    color: var(--abo-accent-hover);
}

.pricing-compare-toggle__icon {
    display: inline-block;
    transition: transform .2s;
    font-style: normal;
    font-size: 0.7rem;
}

.pricing-compare-toggle[aria-expanded="true"] .pricing-compare-toggle__icon {
    transform: rotate(180deg);
}

/* Mobile : caché par défaut */
@media (max-width: 991.98px) {
    .pricing-compare-wrap:not(.is-open) {
        display: none;
    }
}

/* Desktop : toujours visible, bouton masqué */
@media (min-width: 992px) {
    .pricing-compare-toggle {
        display: none;
    }
}

.pricing-compare-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.pricing-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    min-width: 560px;
}

.pricing-compare-table th,
.pricing-compare-table td {
    padding: 8px 12px;
    text-align: center;
    border-bottom: 0.5px solid var(--abo-line);
    vertical-align: middle;
}

.pricing-compare-table th:first-child,
.pricing-compare-table td:first-child {
    text-align: left;
    font-weight: 500;
    color: var(--abo-text);
    min-width: 210px;
}

.pricing-compare-table thead th {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--abo-text-soft);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--abo-zebra);
    border-bottom: 1px solid var(--abo-line);
    padding-top: 10px;
    padding-bottom: 10px;
}

.pricing-compare-table thead th.col-featured {
    color: var(--text-accent);
    background: var(--surface-highlight);
}

/* Lignes de catégorie */
.pricing-compare-table .cat-row td {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--abo-label);
    background: var(--abo-zebra);
    padding-top: 14px;
    padding-bottom: 6px;
}

.pricing-compare-table .cat-row td:first-child {
    color: var(--abo-label);
}

/* Icônes du tableau */
.cmp-icon--included {
    color: var(--abo-cmp-yes);
    font-size: 1rem;
}

.cmp-icon--excluded {
    color: var(--abo-cmp-no);
    font-size: 0.9rem;
}

.cmp-icon--limited {
    color: var(--abo-cmp-limited);
    font-size: 0.75rem;
    font-style: italic;
    display: inline-block;
    white-space: nowrap;
}

/* ============================================================
   Section réassurance
   ============================================================ */
.pricing-reassurance {
    background: var(--surface-highlight);
    border-radius: 10px;
    padding: 1.5rem 2rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem 3rem;
    margin-bottom: 3rem;
}

.pricing-reassurance__item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-accent);
}

.pricing-reassurance__icon {
    font-size: 1.15rem;
    color: var(--text-accent);
    flex-shrink: 0;
}