/*
 * AAMV design system: page-specific adjustments, prefixed by the page class (.page-home …).
 * Avoid: prefer a component or a utility from the contract (DESIGN_SYSTEM.md).
 */

/* Style guide (/_styleguide, dev and test only): specimen helpers */
.page-styleguide .sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: var(--a-gutter); }
.page-styleguide .sg-swatch { display: flex; align-items: center; gap: 10px; font-size: var(--a-fs-xs); }
.page-styleguide .sg-swatch__color { width: 40px; height: 40px; flex-shrink: 0; border: var(--a-border) solid var(--a-line); border-radius: 12px; }
.page-styleguide .sg-type > * { margin: 0; }
.page-styleguide .sg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.page-styleguide .sg-row--spaced { margin-bottom: var(--a-gutter); }
.page-styleguide .sg-note { color: var(--a-muted); font-size: var(--a-fs-small); font-weight: 700; }
.page-styleguide .sg-dark { padding: 20px; border-radius: var(--a-radius-card); background: var(--a-sky); }
.page-styleguide .sg-narrow { max-width: 320px; }
.page-styleguide .sg-inline-form { display: flex; align-items: flex-end; gap: 16px; }
.page-styleguide .sg-inline-form > div { flex: 1 1 auto; }
.page-styleguide .sg-table { margin-top: var(--a-gutter); }
.page-styleguide .sg-label { margin: 0; color: var(--a-muted); font-family: var(--a-font-body); font-size: var(--a-fs-small); font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.page-styleguide .sg-sticker-demo { margin-top: 8px; }
.page-styleguide .sg-mt { margin-top: var(--a-gutter); }
.page-styleguide .sg-center { align-items: center; justify-content: center; }
.page-styleguide .sg-box { padding: 20px; border: var(--a-border) dashed var(--a-line-strong); border-radius: var(--a-radius-tile); background: var(--a-card); text-align: center; }
.page-styleguide .sg-bg-ink { background: var(--a-ink); }
.page-styleguide .sg-bg-ink-2 { background: var(--a-ink-2); }
.page-styleguide .sg-bg-muted { background: var(--a-muted); }
.page-styleguide .sg-bg-paper { background: var(--a-paper); }
.page-styleguide .sg-bg-card { background: var(--a-card); }
.page-styleguide .sg-bg-field { background: var(--a-field); }
.page-styleguide .sg-bg-line { background: var(--a-line); }
.page-styleguide .sg-bg-line-strong { background: var(--a-line-strong); }
.page-styleguide .sg-bg-shadow { background: var(--a-shadow); }
.page-styleguide .sg-bg-sand { background: var(--a-sand); }
.page-styleguide .sg-bg-sun { background: var(--a-sun); }
.page-styleguide .sg-bg-sun-soft { background: var(--a-sun-soft); }
.page-styleguide .sg-bg-sun-ink { background: var(--a-sun-ink); }
.page-styleguide .sg-bg-coral { background: var(--a-coral); }
.page-styleguide .sg-bg-coral-soft { background: var(--a-coral-soft); }
.page-styleguide .sg-bg-coral-ink { background: var(--a-coral-ink); }
.page-styleguide .sg-bg-coral-avatar { background: var(--a-coral-avatar); }
.page-styleguide .sg-bg-sky { background: var(--a-sky); }
.page-styleguide .sg-bg-sky-soft { background: var(--a-sky-soft); }
.page-styleguide .sg-bg-sky-ink { background: var(--a-sky-ink); }
.page-styleguide .sg-bg-sky-avatar { background: var(--a-sky-avatar); }
.page-styleguide .sg-bg-leaf { background: var(--a-leaf); }
.page-styleguide .sg-bg-leaf-soft { background: var(--a-leaf-soft); }
.page-styleguide .sg-bg-leaf-ink { background: var(--a-leaf-ink); }
.page-styleguide .sg-bg-leaf-avatar { background: var(--a-leaf-avatar); }
@media (max-width: 767.98px) {
    .page-styleguide .sg-inline-form { flex-direction: column; align-items: stretch; }
}

/*
 * Forms (wave R2, FORMS): authentication and account pages (.page-form: login, register, passwords,
 * registration confirmation, account, consent) and the back office (.page-admin).
 */
/*
 * Column of the form pages: 640px, 880px for the longer forms, aligned left like the title of the band
 * (one axis, CPT-3). In the narrow column, fields side by side are stacked: same width for all.
 */
.page-form .form-narrow { width: 100%; max-width: 640px; }
.page-form .form-narrow--wide { max-width: 880px; }
.page-form .form-narrow:not(.form-narrow--wide) .form-cols { grid-template-columns: minmax(0, 1fr); }
/* Group of fields: 20px between rows (the Bootstrap .mb-3 margins are replaced by the gap) */
.page-form .form-section { display: flex; flex-direction: column; gap: 20px; }
.page-form .form-section > * { margin: 0; }
/* Bootstrap utilities are !important: the rows of the form theme (.mb-3) must be overridden the same way */
.page-form .form-section .mb-3 { margin-bottom: 0 !important; }
/* Dashed rule between groups; --split when the previous group is not a sibling (the login form, then "Create an account") */
.page-form .form-section + .form-section,
.page-form .form-section--split { padding-top: var(--a-gutter); border-top: var(--a-border) dashed var(--a-line); }
.page-form .form-section legend.col-form-label { padding-top: 0; }
/* Fields side by side (desktop), and a column of fields inside one cell (email, then the current password) */
.page-form .form-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px var(--a-gutter); }
.page-form .form-stack { display: flex; flex-direction: column; gap: 20px; }
/* Secondary links under a form, and rows of buttons */
.page-form .form-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: var(--a-fs-small); font-weight: 800; }
.page-form .form-links a { color: var(--a-coral-ink); }
.page-form .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
/* Destructive action as a red link (.btn.btn-link.link-danger): "Supprimer mon compte" (CPT-5, CPT-7) */
.page-form .form-danger-link { align-self: flex-start; padding-inline: 4px; }

/*
 * Registration: choice of the profile in three cards (CPT-1). The radio is visually hidden but stays in the
 * tab order (arrow keys move within the group); its label is the card, in the color of the audience.
 */
.page-register .profile-choice { margin: 0; }
.page-register .profile-choice__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.page-register .profile-card { --tone: var(--a-sky); --tone-soft: var(--a-sky-soft); position: relative; display: flex; }
.page-register .profile-card.is-coral { --tone: var(--a-coral); --tone-soft: var(--a-coral-soft); }
.page-register .profile-card.is-leaf { --tone: var(--a-leaf); --tone-soft: var(--a-leaf-soft); }
.page-register .profile-card__input { position: absolute; top: 50%; left: 50%; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
/* Desktop: three cards side by side, icon above the text, radio mark in the top right corner */
.page-register .profile-card__label {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    min-height: var(--a-h-btn-lg);
    padding: 16px;
    border: var(--a-border) solid var(--a-field-border);
    border-radius: var(--a-radius-tile);
    background: var(--a-card);
    color: var(--a-ink);
    cursor: pointer;
    transition: border-color var(--a-ease), box-shadow var(--a-ease), background-color var(--a-ease);
}
/* Radio mark: an empty ring, filled with the color of the card once chosen */
.page-register .profile-card__label::after {
    content: "";
    position: absolute;
    top: 16px;
    right: 16px;
    width: 22px;
    height: 22px;
    border: var(--a-border) solid var(--a-field-border);
    border-radius: 50%;
    background: var(--a-card);
}
.page-register .profile-card__label:hover { border-color: var(--a-ink); }
.page-register .profile-card__input:checked + .profile-card__label { border-color: var(--a-ink); background: var(--tone-soft); box-shadow: 4px 4px 0 var(--tone); }
.page-register .profile-card__input:checked + .profile-card__label::after { border-color: var(--a-ink); background: radial-gradient(circle, var(--tone) 0 5px, var(--a-card) 6px); }
.page-register .profile-card__input:focus-visible + .profile-card__label { outline: 3px solid var(--a-sun); outline-offset: 2px; }
.page-register .profile-card__input[aria-invalid="true"] + .profile-card__label { border-color: var(--a-coral-ink); }
.page-register .profile-card__body { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.page-register .profile-card__title { font-size: var(--a-fs-field); font-weight: 800; }
.page-register .profile-card__text { color: var(--a-muted); font-size: var(--a-fs-small); font-weight: 600; }
.page-register .profile-choice .invalid-feedback { margin-top: 8px; }

/* Account: e-mail address used to log in, in the narrow password card */
.page-account .account-login strong { overflow-wrap: anywhere; }

/* Back office (.page-admin): see css/Admin/admin.css */

/* Registration, below 992px: one card per line, icon beside the text, radio mark on the right */
@media (max-width: 991.98px) {
    .page-register .profile-choice__cards { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .page-register .profile-card__label { flex-direction: row; align-items: center; padding: 12px 52px 12px 12px; }
    .page-register .profile-card__label::after { top: 50%; transform: translateY(-50%); }
}

@media (max-width: 767.98px) {
    .page-form .form-cols { grid-template-columns: minmax(0, 1fr); }
    .page-form .form-links { flex-direction: column; }
    .page-form .form-actions > .btn, .page-form .form-actions > form { width: 100%; }
    .page-form .form-actions > form > .btn:not(.btn-link) { width: 100%; }
}