/* MTNBJ Product & services - styles isolés (préfixe .mtnbj) */
.mtnbj {
    --mtnbj-yellow: #ffcc00;
    --mtnbj-ink: #1d1d1b;
    --mtnbj-line: #e5e5e5;
    --mtnbj-soft: #f6f6f6;
    max-width: 1200px;
    width: 88%;
    margin: 0 auto;
    padding: 24px 0 64px;
    color: var(--mtnbj-ink);
}
.mtnbj *, .mtnbj *::before, .mtnbj *::after { box-sizing: border-box; }

.mtnbj-title { font-size: 32px; line-height: 1.2; margin: 0 0 24px; font-family: 'MTNBrighterSans-Bold', inherit; }
.mtnbj-empty { color: #666; }

/* Titre de section (bloc « MTN Section Heading » du thème) : neutralise sa largeur propre (88% d'un
   contenu WordPress normal) pour qu'il occupe toute la largeur de notre conteneur .mtnbj, déjà à 88%. */
.mtnbj .section-heading .mtn-section { max-width: none; width: 100%; margin: 0 0 16px; }
.mtnbj .section-heading .section-heading { margin-bottom: 0; }

/* Catégories et cartes */
.mtnbj-category { margin-bottom: 40px; }
.mtnbj-category__title { font-size: 20px; line-height: 1.3; margin: 0 0 16px; font-family: 'MTNBrighterSans-Bold', inherit; }
/* 4 cartes par ligne au maximum en desktop, puis 3 / 2 / 1 selon la largeur (mêmes paliers que le thème). */
.mtnbj-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1024px) { .mtnbj-cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 731px)  { .mtnbj-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .mtnbj-cards { grid-template-columns: 1fr; } }
.mtnbj-card {
    position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px;
    aspect-ratio: 1 / 1; padding: 14px; border-radius: 12px; overflow: hidden;
    background: #2a2a2a center / cover no-repeat; color: #fff; text-decoration: none; isolation: isolate;
    transition: transform .2s ease, box-shadow .2s ease;
}
.mtnbj-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, 0) 55%); }
a.mtnbj-card:hover, a.mtnbj-card:focus-visible { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, .25); color: #fff; }
.mtnbj-card__label { font-weight: 700; font-style: italic; font-size: 14px; line-height: 1.25; }
.mtnbj-card__text { display: flex; flex-direction: column; gap: 2px; }
.mtnbj-card__sub { font-size: 12px; font-weight: 400; opacity: .9; }
.mtnbj-card__arrow { flex: none; font-size: 16px; }

/* Fiche produit */
.mtnbj-hero { margin-bottom: 40px; border-radius: 16px; overflow: hidden; background: var(--mtnbj-soft); }
.mtnbj-hero--image { background: #222 center / cover no-repeat; color: #fff; min-height: 320px; display: flex; align-items: flex-end; position: relative; isolation: isolate; }
.mtnbj-hero--image::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(0, 0, 0, .75), rgba(0, 0, 0, .1) 70%); }
.mtnbj-hero__inner { padding: 32px; max-width: 720px; }
.mtnbj-hero .mtnbj-title { margin-bottom: 12px; }
.mtnbj-hero__lead { font-size: 18px; line-height: 1.5; margin: 0 0 20px; }
.mtnbj-button { display: inline-block; padding: 14px 28px; border-radius: 999px; background: var(--mtnbj-yellow); color: var(--mtnbj-ink); font-weight: 700; text-decoration: none; }
.mtnbj-button:hover { filter: brightness(.95); color: var(--mtnbj-ink); }

.mtnbj-section { margin-bottom: 40px; }
.mtnbj-section__title { font-size: 22px; line-height: 1.3; margin: 0 0 16px; font-family: 'MTNBrighterSans-Bold', inherit; }
.mtnbj-richtext { line-height: 1.7; }
.mtnbj-prices { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.mtnbj-price { padding: 20px; border: 1px solid var(--mtnbj-line); border-radius: 12px; background: #fff; }
.mtnbj-price__value { margin: 0 0 8px; }
.mtnbj-price__value span { font-size: 32px; font-weight: 700; font-family: 'MTNBrighterSans-Bold', inherit; }
.mtnbj-price__value sup { font-size: 13px; margin-left: 4px; }
.mtnbj-price__desc { margin: 0; line-height: 1.5; color: #444; }
.mtnbj-table-wrap { overflow-x: auto; }
.mtnbj-table { width: 100%; border-collapse: collapse; }
.mtnbj-table th, .mtnbj-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--mtnbj-line); }
.mtnbj-table thead th { background: var(--mtnbj-yellow); }
.mtnbj-table tbody tr:nth-child(even) { background: var(--mtnbj-soft); }

/* FAQ */
.mtnbj-faq { max-width: 880px; margin: 56px auto; }
.mtnbj-faq__title { text-align: center; font-size: 32px; line-height: 1.2; margin: 0 0 32px; font-family: 'MTNBrighterSans-Bold', inherit; }
.mtnbj-faq__item { border-bottom: 1px solid var(--mtnbj-line); }
.mtnbj-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 12px; cursor: pointer; list-style: none; font-size: 15px; }
.mtnbj-faq__item summary::-webkit-details-marker { display: none; }
.mtnbj-faq__item summary::after {
    content: ""; flex: none; width: 22px; height: 22px; border: 2px solid var(--mtnbj-ink); border-radius: 50%;
    background: no-repeat center / 10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231d1d1b' stroke-width='1.6'/%3E%3C/svg%3E");
    transition: transform .2s ease;
}
.mtnbj-faq__item[open] summary::after { transform: rotate(180deg); }
.mtnbj-faq__answer { padding: 0 12px 20px; line-height: 1.6; }

/* Carte « forfait-card » (composant du thème, réutilisé tel quel sur la page de liste « style Forfait »,
   voir templates/mtnbj-deal-forfait-archive.php). Corrections d'affichage uniquement, sans toucher au
   thème : sélecteurs à deux classes (plus spécifiques que les règles à une classe de forfait-family.css),
   donc prioritaires quel que soit l'ordre de chargement des feuilles de style.
   1) Taille prédéfinie : par défaut la grille du thème (CSS Grid, align-items: stretch) étire chaque
      carte à la hauteur de la plus grande de sa ligne, laissant un grand vide avant le pied jaune quand
      une carte a moins de contenu qu'une voisine. On fixe une hauteur et on borne la liste à l'intérieur.
   2) Lignes de la section « Includes » mises en valeur : séparateurs, plus de air, puce plus visible. */
.mtnbj-catalog .forfait-card { height: 420px; }
.mtnbj-catalog .forfait-card__body { flex: 1 1 auto; display: flex; flex-direction: column; overflow: hidden; }
.mtnbj-catalog .forfait-card__list { flex: 1 1 auto; overflow-y: auto; }
.mtnbj-catalog .forfait-card__list li {
    border-bottom: 1px solid var(--mtnbj-line);
    padding: 9px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--mtnbj-ink);
}
.mtnbj-catalog .forfait-card__list li:last-child { border-bottom: none; }
.mtnbj-catalog .forfait-card__chev {
    width: 16px; height: 16px; padding: 3px; box-sizing: content-box;
    background: #fff6d9; border-radius: 50%; color: #b8860b;
}

/* Page d'un contenu d'aide */
.mtnbj-faqpage .mtnbj-faq { margin-top: 0; }
.mtnbj-faqpage__terms { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.mtnbj-faqpage__terms a, .mtnbj-faqpage__terms span { padding: 4px 12px; border-radius: 999px; background: var(--mtnbj-soft); font-size: 13px; text-decoration: none; color: var(--mtnbj-ink); }
.mtnbj-faqpage__more ul { list-style: none; margin: 0; padding: 0; }
.mtnbj-faqpage__more li { border-bottom: 1px solid var(--mtnbj-line); }
.mtnbj-faqpage__more a { display: block; padding: 12px 0; color: var(--mtnbj-ink); text-decoration: none; }
.mtnbj-faqpage__more a:hover { color: #000; text-decoration: underline; }

/* Fiche avec navigation latérale (voir MTNBJ_PS_DetailNav) : la vue reprend telle quelle la structure
   et les classes CSS (.ots-*) du bloc thème « offer-tabs-sidebar » (parts/blocks/offer-tabs-sidebar/),
   dont la feuille de style est chargée par MTNBJ_PS_DetailNav::enqueue() ; rien à redéfinir ici. */