/* ===================================================================
   Composant générique : page avec carte blanche centrée
   Bloc    : .page-card  — section plein fond gris (flex: 1 pour occuper la hauteur disponible)
   Éléments: __inner     — conteneur max-width
             __body      — carte blanche (fond, ombre, border-radius, padding)
             __title     — titre H1 en couleur primaire
   Utilisé par : Root/Contact, …
   =================================================================== */

.page-card {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background: var(--color-bg-light);
    padding: var(--spacing-xxl) var(--layout-gutter-x);
}

/* Priorité sur le user-agent : display:flex surcharge sinon [hidden] */
.page-card[hidden] {
    display: none;
}

.page-card__inner {
    width: 100%;
    max-width: 56.5625rem; /* 905px (1rem = 16px) — largeur de carte par défaut (maquette) */
}

.page-card__body {
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-card);
    padding: var(--spacing-md2) var(--spacing-md3);
}

/* Texte d'introduction sous le titre (CardChoice, FillInOccurenceDate, Telecharger…) */
.page-card__lead {
    font-size: var(--font-size-base);
    color: var(--color-overlay-dark); /* #000000B2 (noir 70 %) */
    line-height: var(--line-height-relaxed);
    margin: 0 0 var(--spacing-lg);
}

/* Titre de section (h2) en couleur primaire (ClaimAttachmentsNextStep, LinkedClaimAttachments…) */
.page-card__section-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    margin: 0 0 var(--spacing-sm);
}

/* Règle globale : aucun champ (input/select/textarea, .form-control) ne dépasse la
   moitié de la largeur de la carte, quelle que soit la page utilisant ce layout.
   Contraint .field__control (le wrapper), pas .form-control directement : le chevron
   des select (.field__chevron) est positionné en absolu par rapport à ce wrapper — si
   seul le form-control rétrécissait, le chevron resterait collé au bord du wrapper
   plein, donc visuellement détaché de la boîte réellement rétrécie. */
.page-card__inner .field__control {
    max-width: 50%;

    /* 620px ÷ 16 = 38.75em — même seuil que la bascule mobile de .page-card ci-dessous :
       un champ à 50 % d'un écran déjà étroit devient illisible, il doit remplir la carte. */
    @media (max-width: 38.75em) {
        max-width: 100%;
    }
}

@media (max-width: 38.75em) {
    /* Carte plein écran : la section perd son gutter latéral pour que
       page-card__body puisse aller bord à bord. Le body reprend lui-même
       le gutter pour l'indentation du contenu. */
    .page-card {
        padding: var(--spacing-lg2) 0;
    }

    .page-card__body {
        padding: var(--spacing-lg2) var(--layout-gutter-x-sm);
        border-radius: 0;
        box-shadow: none;
    }
}

/* --- Modificateur : demi-largeur — max-width 50 % desktop, 100 % mobile (SavePersonIdentity) --- */
.page-card--half {
    & .page-card__inner {
        max-width: 50%;
    }

    @media (max-width: 62em) {
        & .page-card__inner {
            max-width: 100%;
        }
    }
}

/* --- Modificateur : max-width 1140px (plus large que le défaut 905px) — ClaimsList --- */
.page-card--wide {
    & .page-card__inner {
        max-width: var(--page-card-max-width-wide);
    }
}

/* --- Modificateur : max-width 64rem (1024px, plus large que le défaut 905px), plein écran
   mobile (MFA ; CardChoice/CardInformation le réduisent à 905px via .page-card--bin-card) --- */
.page-card--narrow {    @media (max-width: 48em) {
        padding: var(--spacing-lg2) var(--layout-gutter-x-sm);
    }

    @media (max-width: 38.75em) {
        padding: 0;
    }

    & .page-card__inner {
        max-width: 64rem;
    }

    & .page-card__body {
        @media (max-width: 38.75em) {
            padding: var(--spacing-lg2) var(--layout-gutter-x-sm);
            border-radius: 0;
            box-shadow: none;
        }
    }

    & .page-card__title {
        margin-bottom: var(--spacing-lg2);

        @media (max-width: 48em) {
            font-size: clamp(2rem, 4vw, 2.8rem);
        }

        @media (max-width: 38.75em) {
            font-size: var(--font-size-xl);
            margin-bottom: var(--spacing-md3);
        }
    }
}