/* ============================================================
   Pages de vente : bloc « Essayez gratuitement » inséré sous le titre
   (includes/components/offre-page.php, mqa_offre_bloc_essai()).
   Charte du site : titre centré surligné, carte à bord noir et ombre franche.
   ============================================================ */

.mqa-essai-da { max-width: 860px; margin: 10px auto 50px; padding: 0 20px; text-align: center; box-sizing: border-box; scroll-margin-top: 96px; }
.mqa-essai-da *, .mqa-essai-da *::before, .mqa-essai-da *::after { box-sizing: border-box; }
.mqa-essai-da-titre { font-size: 1.7rem; font-weight: 900; color: #111; margin: 0 0 6px; line-height: 1.25; }
.mqa-essai-da-surligne { background: linear-gradient(transparent 55%, var(--mqa-fiche-accent) 55%); padding: 0 6px; border-radius: 3px; }
.mqa-essai-da-sous { font-size: 1rem; color: #4b5563; margin: 0 0 18px; line-height: 1.6; }
.mqa-essai-da-carte {
    background: #fff; border: 2px solid #000; border-radius: 16px; box-shadow: 8px 8px 0 #000;
    padding: 18px 18px 20px; text-align: left; min-width: 0;
}
.mqa-essai-da-suite { margin: 16px 0 0; font-size: 0.95rem; }
.mqa-essai-da-suite a { color: #111; font-weight: 800; text-decoration: underline; }

/* Onglets */
.mqa-offre-onglets { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
:is(.mqa-essai-da, .mqa-hd-zone) .mqa-offre-onglet {
    font: inherit; font-size: 0.9rem !important; font-weight: 800; padding: 7px 14px !important; min-height: 0 !important; min-width: 0 !important;
    line-height: 1.3; border: 2px solid #000; border-radius: 10px; background: #fff; cursor: pointer; color: #111;
}
:is(.mqa-essai-da, .mqa-hd-zone) .mqa-offre-onglet.is-actif { background: var(--mqa-fiche-accent); box-shadow: 3px 3px 0 #000; }
:is(.mqa-essai-da, .mqa-hd-zone) .mqa-offre-onglet:focus-visible { outline: 3px solid #111; outline-offset: 2px; }

/* Le lecteur s'insère dans la carte : on retire son propre cadre. */
.mqa-offre-lecteur { max-width: none; margin: 0; padding: 0; }
.mqa-offre-lecteur .mqa-player-card { border: 0; box-shadow: none; padding: 4px; }
.mqa-offre-lecteur .mqa-flashcard { min-height: 230px; }
.mqa-offre-panneau { min-width: 0; }

/* Fiche offerte */
.mqa-offre-fiche { min-width: 0; }
.mqa-offre-fiche-entete { display: flex; flex-direction: column; gap: 2px; padding: 4px 4px 10px; border-bottom: 2px dashed #e5e7eb; margin-bottom: 10px; }
.mqa-offre-fiche-entete strong { font-size: 1.05rem; }
.mqa-offre-fiche-entete small { color: #6b7280; font-weight: 600; }
.mqa-offre-fiche-tag { align-self: flex-start; background: var(--mqa-fiche-accent); border: 1.5px solid #000; border-radius: 99px; padding: 1px 10px; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
.mqa-offre-fiche-corps { max-height: 460px; overflow-y: auto; padding: 0 6px 6px 4px; font-size: 0.95rem; }
.mqa-offre-fiche-corps.mqa-fiche-content { display: block; }
.mqa-offre-fiche-corps table { display: block; max-width: 100%; overflow-x: auto; }
.mqa-offre-sommaire { margin-top: 12px; border-top: 2px dashed #e5e7eb; padding-top: 10px; }
.mqa-offre-sommaire-titre { font-weight: 800; margin: 0 0 6px; }
.mqa-offre-sommaire ol { margin: 0; padding-left: 22px; font-size: 0.92rem; line-height: 1.7; color: #111; font-weight: 600; }
.mqa-offre-sommaire ol span { color: #6b7280; font-weight: 600; }

/* Aperçu (base documentaire) */
.mqa-offre-apercu img { width: 100%; height: auto; border: 2px solid #000; border-radius: 10px; display: block; }
.mqa-offre-apercu-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin: 0 0 12px; }
.mqa-offre-apercu-grille div { border: 1.5px solid #000; border-radius: 10px; padding: 10px 12px; font-size: 0.85rem; line-height: 1.45; }
.mqa-offre-apercu-grille strong { display: block; margin-bottom: 4px; }

@media (max-width: 767px) {
    .mqa-essai-da { padding: 0 14px; margin-bottom: 36px; }
    .mqa-essai-da-titre { font-size: 1.4rem !important; }
    .mqa-essai-da-carte { box-shadow: 5px 5px 0 #000; padding: 12px 10px 14px; }
    .mqa-offre-onglets { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
    :is(.mqa-essai-da, .mqa-hd-zone) .mqa-offre-onglet { flex: 0 0 auto; font-size: 0.82rem !important; padding: 6px 11px !important; }
    .mqa-offre-fiche-corps { max-height: 380px; }
}