/* ===================================================================
   Layout deux colonnes — partagé entre FAQ et Télécharger
   Grille : colonne intro (28 %, plancher 16 rem) + colonne contenu (1fr).

   Nouveaux usages : .two-col-layout
   Alias rétrocompatibles : .faq-layout, .download-layout
   (les vues existantes n'ont pas besoin d'être modifiées)
   =================================================================== */

.two-col-layout,
.faq-layout,
.download-layout {
    width: 100%;
    max-width: var(--content-max-width);
    display: grid;
    grid-template-columns: minmax(16rem, 28%) 1fr;
    gap: var(--spacing-xl2);
    align-items: start;
}

/* Fond de page dédié aux pages deux colonnes — .page-card est partagé (Contact, MFA, notice…),
   :has() scope l'override sans toucher les autres. */
.page-card:has(> .two-col-layout),
.page-card:has(> .faq-layout),
.page-card:has(> .download-layout) {
    background: var(--color-page-bg-alt);
}

/* Colonne intro (contenu CMS) : Open Sans 16px, gris ardoise */
.two-col-layout__intro,
.faq-layout__intro,
.download-layout__intro {
    font-family: var(--font-family-label); /* Open Sans (variables.css) */
    color: var(--color-text-body);
}

/* Titre de la colonne intro : grand, noir, graisse normale (maquette) — prime sur le h1
   global (typography.css : primaire 32px) et sur .page-card__title. h2 inclus : le CMS
   peut générer un <h2> pour le titre de cellule (FAQ). Règle unique pour les 3 pages
   (ex-doublon faq.css / telecharger.css). */
.two-col-layout__intro h1,
.two-col-layout__intro h2,
.faq-layout__intro h1,
.faq-layout__intro h2,
.download-layout__intro h1 {
    font-size: 3rem; /* 48px (1rem = 16px) */
    font-weight: var(--font-weight-normal);
    color: var(--color-text-dark);
    line-height: 1.2;
    margin: 0 0 var(--spacing-lg);
}

/* Filet séparateur sous le titre de l'intro */
.two-col-layout__divider,
.faq-layout__divider,
.download-layout__divider {
    width: 50%;
    border: none;
    border-top: 0.0625rem solid var(--color-divider); /* 1px */
    margin: var(--spacing-md) 0;
}

/* Carte de contenu : sans ombre, même typographie que l'intro */
.two-col-layout .page-card__body,
.faq-layout .page-card__body,
.download-layout .page-card__body {
    box-shadow: none;
    font-family: var(--font-family-label); /* Open Sans (variables.css) */
    color: var(--color-text-body);
}

/* Liens du contenu CMS : pas de soulignement par défaut, souligné au survol
   (inverse de la règle globale a:not([class]) — typography.css). Spécificité
   (0,2,1) : prime sur la règle globale (0,1,1) quel que soit l'ordre des bundles. */
.two-col-layout .page-card__body a,
.faq-layout .page-card__body a,
.download-layout .page-card__body a {
    text-decoration: none;
}

.two-col-layout .page-card__body a:hover,
.faq-layout .page-card__body a:hover,
.download-layout .page-card__body a:hover {
    text-decoration: underline;
}

/* ===================================================================
   Responsive — tablette (≤ 768 px)
   Passe en colonne unique ; carte pleine largeur sans bord arrondi.
   =================================================================== */
@media (max-width: 48em) {
    .two-col-layout,
    .faq-layout,
    .download-layout {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .two-col-layout__intro,
    .faq-layout__intro,
    .download-layout__intro {
        padding: 0 var(--layout-gutter-x-sm) var(--spacing-lg2);
    }

    .two-col-layout .page-card__body,
    .faq-layout .page-card__body,
    .download-layout .page-card__body {
        border-radius: 0;
        box-shadow: none;
        padding-left: var(--layout-gutter-x-sm);
        padding-right: var(--layout-gutter-x-sm);
    }
}

/* ===================================================================
   Responsive — mobile (≤ 620 px)
   =================================================================== */
@media (max-width: 38.75em) {
    .two-col-layout__intro,
    .faq-layout__intro,
    .download-layout__intro {
        padding-left: var(--layout-gutter-x-sm);
        padding-right: var(--layout-gutter-x-sm);
    }
}