/* ============================================================
   VIGIE — Commémoration de la Bataille de Chesapeake
   Marine nationale · 400 ans

   Charte graphique alignée sur le Système de Design de l'État
   (DSFR) : bleu France #000091, rouge Marianne #E1000F,
   typographie Marianne (Arial en secours), sobriété
   institutionnelle, angles droits, pas d'ornement.

   Référence : « Chesapeake 2026/charte-graphique.html »
   ============================================================ */

/* ---------- 1. Jetons de design ---------- */

:root {
    /* Couleurs de l'État */
    --blue-france: #000091;
    --blue-france-925: #1212FF; /* survol / actif */
    --blue-france-sun-113: #5982E0;
    --blue-france-975: #E3E3FD; /* fond clair bleuté */
    --red-marianne: #E1000F;
    --red-marianne-625: #C9191E;
    --white: #FFFFFF;

    /* Neutres */
    --grey-50: #161616; /* texte principal */
    --grey-100: #1F1F1F;
    --grey-200: #3A3A3A; /* texte secondaire */
    --grey-425: #666666; /* texte tertiaire, libellés */
    --grey-625: #929292;
    --grey-850: #DDDDDD;
    --grey-925: #E5E5E5; /* bordures */
    --grey-950: #EEEEEE;
    --grey-975: #F6F6F6; /* fond très clair */

    /* Signature événementielle — usage restreint */
    --navy-event: #0A1F44;

    /* Couleurs système */
    --success: #18753C;
    --success-975: #B8FEC9;
    --info: #0063CB;
    --warning: #B34000;
    --warning-975: #FEECC2;
    --error: #CE0500;
    --error-975: #FFE9E9;

    --radius-sm: 4px;

    --font-marianne: "Marianne", Arial, "Helvetica Neue", Helvetica, sans-serif;
    --font-spectral: "Spectral", "EB Garamond", Georgia, serif;
    --font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

    /* Alignement de Bootstrap sur la palette de l'État */
    --bs-primary: #000091;
    --bs-primary-rgb: 0, 0, 145;
    --bs-link-color: #000091;
    --bs-link-hover-color: #1212FF;
    --bs-body-font-family: "Marianne", Arial, "Helvetica Neue", Helvetica, sans-serif;
    --bs-body-color: #161616;
    --bs-border-radius: 4px;
}

/* ---------- 2. Base ---------- */

html {
    font-size: 16px;
}

body {
    margin: 0;
    background-color: var(--white);
    color: var(--grey-50);
    font-family: var(--font-marianne);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-marianne);
    color: var(--grey-50);
    margin: 0;
    letter-spacing: -.01em;
    font-weight: 700;
}

h1 {
    font-size: 2.5rem;
    line-height: 1.05;
    font-weight: 800;
}

h2 {
    font-size: 1.75rem;
    line-height: 1.15;
    margin-bottom: .625rem;
}

h3 {
    font-size: 1.25rem;
    line-height: 1.2;
    margin-bottom: .375rem;
}

h4 {
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--grey-200);
}

p {
    margin: 0 0 .75rem;
    color: var(--grey-200);
}

/* Confort de lecture (« measure » ~68 caractères) réservé à la prose de contenu :
   le chapô et les paragraphes directement posés dans une section. Volontairement
   PAS sur le `p` global, sinon la contrainte fuite dans les cartes, bandeaux et
   libellés — ce qui obligeait à la neutraliser au cas par cas. */
.lead,
.page-section > p {
    max-width: 68ch;
}

a {
    color: var(--blue-france);
}

a:hover {
    color: var(--blue-france-925);
}

hr {
    border: none;
    border-top: 1px solid var(--grey-925);
    margin: 2rem 0;
    opacity: 1;
}

.lead {
    font-size: 1.125rem;
    color: var(--grey-100);
    line-height: 1.5;
}

/* Surtitre de section : filet rouge Marianne + libellé bleu France */
.eyebrow {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--blue-france);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: .625rem;
}

    .eyebrow::before {
        content: "";
        width: 24px;
        height: 2px;
        background: var(--red-marianne);
        flex: none;
    }

/* Cible de focus visible — exigence RGAA AA */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--blue-france);
    outline-offset: 2px;
}

/* Lien d'évitement (RGAA) */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--blue-france);
    color: var(--white);
    padding: .625rem 1.125rem;
    text-decoration: none;
    font-weight: 500;
}

    .skip-link:focus {
        left: 0;
        color: var(--white);
    }

/* ---------- 3. En-tête institutionnel ----------
   Reprend la composition du bandeau de defense.gouv.fr/marine :
   bloc-marque de l'État à gauche, puis titre de service et sa
   baseline, alignés sur le conteneur de la page. Pas de filet
   vertical entre les deux : seule l'espace les sépare. */

.gouv-header {
    background: var(--white);
    border-bottom: 1px solid var(--grey-925);
    padding: 1.25rem 0;
}

.gouv-header__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    gap: 2.5rem;
}

.bloc-marque-svg {
    height: 100px;
    width: auto;
    display: block;
    flex: none;
}

.gouv-header__service {
    display: flex;
    flex-direction: column;
}

.service-title {
    font-family: var(--font-marianne);
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 1.2;
    color: var(--grey-50);
    margin: 0;
}

.service-tagline {
    font-size: .875rem;
    color: var(--grey-425);
    margin: .25rem 0 0;
}

/* ---------- 4. Mise en page ---------- */

.body-content {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 2rem;
}

.page-section {
    padding: 3rem 0;
    border-top: 1px solid var(--grey-925);
}

    .page-section:first-child {
        border-top: none;
        padding-top: 2rem;
    }

/* ---------- 5. Hero ---------- */

.hero {
    background: var(--white);
    border: 1px solid var(--grey-925);
    border-top: 4px solid var(--blue-france);
    padding: 3rem;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 2.5rem;
    align-items: center;
    margin-top: 1.5rem;
}

    .hero h1 .accent {
        display: block;
        color: var(--blue-france);
        font-family: var(--font-spectral);
        font-size: 2rem;
        font-weight: 600;
        letter-spacing: -.01em;
        margin-top: .5rem;
    }

    .hero .lead {
        margin-top: 1.125rem;
    }

.hero-meta {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.hero-logo {
    display: grid;
    place-items: center;
}

    .hero-logo img {
        width: 100%;
        max-width: 280px;
        height: auto;
        display: block;
    }

/* Étiquette d'information factuelle (date, lieu, tenue) */
.tag {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-size: .75rem;
    font-weight: 600;
    padding: .25rem .625rem;
    border-radius: 0;
    background: var(--grey-975);
    border: 1px solid var(--grey-925);
    color: var(--grey-100);
}

    .tag svg {
        width: 14px;
        height: 14px;
        stroke: var(--blue-france);
        fill: none;
        stroke-width: 1.8;
        flex: none;
    }

/* ---------- 6. Bandeau d'information officiel ---------- */

.official-banner {
    background: var(--blue-france);
    color: var(--white);
    padding: 1.125rem 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    border-left: 6px solid var(--red-marianne);
    margin: 1.5rem 0;
}

    .official-banner .info-icon {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: rgba(255,255,255,.16);
        display: grid;
        place-items: center;
        font-weight: 700;
        flex: none;
    }

    .official-banner p {
        color: rgba(255,255,255,.92);
        margin: 0;
        font-size: .875rem;
    }

    .official-banner strong {
        color: var(--white);
    }

/* ---------- 7. Cartes ---------- */

.card {
    background: var(--white);
    border: 1px solid var(--grey-925);
    border-radius: 0;
    padding: 1.5rem;
}

    .card.bordered-blue {
        border-top: 3px solid var(--blue-france);
    }

    .card.bordered-red {
        border-top: 3px solid var(--red-marianne);
    }

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

/* ---------- 8. Boutons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .625rem 1.125rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-marianne);
    font-weight: 500;
    font-size: .875rem;
    line-height: 1.4;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background .12s ease;
}

.btn-primary {
    background: var(--blue-france);
    border-color: var(--blue-france);
    color: var(--white);
}

    .btn-primary:hover,
    .btn-primary:focus {
        background: var(--blue-france-925);
        border-color: var(--blue-france-925);
        color: var(--white);
    }

.btn-secondary,
.btn-outline-primary {
    background: var(--white);
    color: var(--blue-france);
    border-color: var(--blue-france);
}

    .btn-secondary:hover,
    .btn-outline-primary:hover,
    .btn-outline-primary:focus {
        background: var(--grey-975);
        color: var(--blue-france);
        border-color: var(--blue-france);
    }

.btn-tertiary,
.btn-outline-secondary {
    background: transparent;
    color: var(--blue-france);
    border-color: var(--grey-425);
}

    .btn-tertiary:hover,
    .btn-outline-secondary:hover {
        background: var(--grey-975);
        color: var(--blue-france);
    }

.btn-danger {
    background: var(--red-marianne);
    border-color: var(--red-marianne);
    color: var(--white);
}

    .btn-danger:hover {
        background: var(--red-marianne-625);
        border-color: var(--red-marianne-625);
        color: var(--white);
    }

.btn-lg {
    padding: .8125rem 1.75rem;
    font-size: 1rem;
}

/* ---------- 9. Formulaires ---------- */

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.field {
    display: flex;
    flex-direction: column;
    gap: .375rem;
}

    .field.field-full {
        grid-column: 1 / -1;
    }

    .field > label,
    .field .form-label {
        font-size: .875rem;
        font-weight: 500;
        color: var(--grey-50);
        margin: 0;
    }

    .field .hint {
        font-size: .75rem;
        color: var(--grey-425);
    }

    .field .required {
        color: var(--red-marianne);
    }

/* Champ DSFR : fond gris clair, souligné épais, sans bordure latérale */
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field .form-control,
.field .form-select {
    padding: .625rem .75rem;
    border: none;
    border-bottom: 2px solid var(--grey-425);
    background: var(--grey-975);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    font-family: inherit;
    font-size: 1rem;
    color: var(--grey-50);
    width: 100%;
    box-shadow: none;
}

    .field input:focus,
    .field select:focus,
    .field .form-control:focus,
    .field .form-select:focus {
        outline: 2px solid var(--blue-france);
        outline-offset: 0;
        border-bottom-color: var(--blue-france);
        background: var(--grey-975);
        color: var(--grey-50);
        box-shadow: none;
    }

    .field input::placeholder {
        color: var(--grey-625);
    }

/* Bloc des accompagnants nominatifs (pleine largeur), replié tant que la réponse
   « accompagné » n'est pas cochée. Chaque accompagnant a sa propre carte. */
.companions {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--grey-925);
}

    .companions > h3 {
        font-family: var(--font-marianne);
        font-size: 1.15rem;
        font-weight: 700;
        margin: 0 0 .5rem;
    }

    .companions .companion-card {
        margin-top: 1rem;
        padding: 1rem 1.25rem 1.25rem;
        background: var(--grey-975);
        border: 1px solid var(--grey-925);
        border-left: 4px solid var(--blue-france);
        border-radius: var(--radius-sm);
    }

    .companions .companion-card__title {
        font-family: var(--font-marianne);
        font-weight: 700;
        font-size: .95rem;
        color: var(--blue-france);
    }

    .companions .companion-fields {
        display: grid;
        grid-template-columns: minmax(110px, .6fr) 1fr 1fr 1.4fr;
        gap: 1rem;
        margin-top: .75rem;
    }

    .companions .official-banner {
        margin-top: 1.5rem;
    }

@media (max-width: 720px) {
    .companions .companion-fields {
        grid-template-columns: 1fr 1fr;
    }
}

    .field input[readonly],
    .field input:disabled {
        color: var(--grey-425);
        border-bottom-style: dotted;
    }

/* Popin de confirmation (récapitulatif avant envoi) — autonome, sans framework. */
.confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 20, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 1000;
}

.confirm-dialog {
    background: var(--white);
    border-radius: var(--radius-sm);
    border-top: 4px solid var(--blue-france);
    max-width: 560px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.5rem 1.75rem;
    box-shadow: 0 12px 48px rgba(0, 0, 20, .35);
}

.confirm-title {
    font-family: var(--font-marianne);
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 .5rem;
}

.confirm-summary {
    margin: 1rem 0 .5rem;
}

    .confirm-summary .cs-row {
        display: flex;
        gap: .75rem;
        padding: .55rem 0;
        border-bottom: 1px solid var(--grey-925);
    }

    .confirm-summary .cs-k {
        flex: 0 0 130px;
        color: var(--grey-425);
        font-size: .82rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .02em;
    }

    .confirm-summary .cs-v {
        font-size: .95rem;
        color: var(--grey-50);
        min-width: 0;
    }

    .confirm-summary .cs-companions {
        margin: .2rem 0 0;
        padding-left: 1.1rem;
    }

        .confirm-summary .cs-companions li {
            margin: .15rem 0;
        }

.confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: .75rem;
    margin-top: 1.25rem;
}

/* Identité non modifiable, affichée pour vérification */
.identity-value {
    display: block;
    padding: .625rem .75rem;
    background: var(--grey-975);
    border-bottom: 2px dotted var(--grey-425);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    font-size: 1rem;
    font-weight: 500;
    color: var(--grey-50);
}

/* Groupe de boutons radio (réponse à l'invitation).
   RepeatLayout="UnorderedList" produit <ul><li><input><label></li></ul>. */
.radio-group ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--grey-925);
}

.radio-group li {
    border-top: 1px solid var(--grey-925);
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.25rem;
}

    .radio-group li:first-child {
        border-top: none;
    }

    .radio-group li:hover {
        background: var(--grey-975);
    }

.radio-group input[type="radio"] {
    margin: 0;
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--blue-france);
    flex: none;
}

.radio-group label {
    font-size: 1rem;
    color: var(--grey-50);
    cursor: pointer;
    margin: 0;
    flex: 1;
}

/* Consentement RGPD : case obligatoire alignée avec son libellé */
.consent {
    margin-top: 1.75rem;
    display: flex;
    align-items: flex-start;
    gap: .625rem;
}

.consent .consent-check input[type="checkbox"],
.consent input[type="checkbox"] {
    margin-top: .2rem;
    width: 1.1rem;
    height: 1.1rem;
    flex: none;
    accent-color: var(--blue-france);
}

.consent .consent-text {
    font-size: .875rem;
    line-height: 1.5;
    color: var(--grey-200);
}

.send-actions {
    margin-top: 1.75rem;
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}

/* Bloc de messages d'erreur de validation */
.alert-danger,
.form-errors {
    background-color: var(--error-975);
    border: 1px solid var(--error);
    border-left: 4px solid var(--red-marianne);
    border-radius: 0;
    color: var(--grey-50);
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
}

    .form-errors p,
    .alert-danger p {
        margin: 0 0 .5rem;
        color: var(--grey-50);
        font-weight: 600;
    }

    .form-errors ul,
    .alert-danger ul {
        margin: 0;
        padding-left: 1.25rem;
    }

    .form-errors li,
    .alert-danger li {
        color: var(--grey-100);
    }

/* ---------- 10. Badges & statuts ---------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .25rem .625rem;
    border-radius: var(--radius-sm);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.4;
}

.badge-vip {
    background: var(--blue-france);
    color: var(--white);
}

.badge-guest {
    background: var(--blue-france-975);
    color: var(--blue-france);
}

.badge-ok {
    background: var(--success-975);
    color: var(--success);
}

.badge-warn {
    background: var(--warning-975);
    color: #716043;
}

.badge-err {
    background: var(--error-975);
    color: var(--error);
}

/* ---------- 11. Liste à puces institutionnelle ---------- */

ul.grid-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem 1.5rem;
    margin: .5rem 0 0;
    padding: 0;
    list-style: none;
}

    ul.grid-list li {
        padding-left: 1.125rem;
        position: relative;
        color: var(--grey-200);
        font-size: .875rem;
    }

        ul.grid-list li::before {
            content: "";
            position: absolute;
            left: 0;
            top: .625rem;
            width: 8px;
            height: 2px;
            background: var(--blue-france);
        }

/* ---------- 12. Bloc QR code (confirmation) ---------- */

.qr-panel {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    flex-wrap: wrap;
    padding: 1.5rem;
    border: 1px solid var(--grey-925);
    border-left: 6px solid var(--blue-france);
    background: var(--white);
    margin-top: 1.5rem;
}

    .qr-panel img {
        display: block;
        border: 6px solid var(--white);
        box-shadow: 0 0 0 1px var(--grey-850);
        flex: none;
    }

.qr-meta .k {
    font-size: .625rem;
    letter-spacing: .12em;
    color: var(--grey-425);
    text-transform: uppercase;
}

.qr-meta .v {
    font-weight: 600;
    color: var(--grey-50);
    font-size: .875rem;
    margin-bottom: .625rem;
}

.wallet-links {
    display: flex;
    gap: .625rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

    .wallet-links a {
        display: inline-block;
        font-family: var(--font-marianne);
        font-size: .8125rem;
        font-weight: 600;
        text-decoration: none;
        padding: .625rem 1.125rem;
        border-radius: var(--radius-sm);
    }

.wallet-apple {
    background-color: #000000;
    color: #FFFFFF;
}

    .wallet-apple:hover {
        color: #FFFFFF;
    }

.wallet-google {
    background-color: #1A73E8;
    color: #FFFFFF;
}

    .wallet-google:hover {
        color: #FFFFFF;
    }

/* ---------- 13. Pied de page ---------- */

.site-footer {
    border-top: 2px solid var(--blue-france);
    margin-top: 3rem;
    padding: 2rem 0 3rem;
}

.site-footer-top {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

    .site-footer-top img {
        height: 90px;
        width: auto;
        display: block;
    }

.site-footer-org {
    font-size: .8125rem;
    color: var(--grey-200);
    line-height: 1.45;
}

    .site-footer-org strong {
        display: block;
        color: var(--grey-50);
        text-transform: uppercase;
        letter-spacing: .02em;
        font-size: .8125rem;
    }

.site-footer-links {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--grey-925);
    font-size: .8125rem;
}

    .site-footer-links a {
        color: var(--grey-200);
        text-decoration: underline;
    }

        .site-footer-links a:hover {
            color: var(--blue-france);
        }

.site-footer-legal {
    margin-top: .75rem;
    font-size: .75rem;
    color: var(--grey-425);
}

/* ---------- 14. Barre d'administration ---------- */

.admin-bar {
    background: var(--grey-975);
    border-bottom: 1px solid var(--grey-925);
    padding: .375rem 1.25rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .75rem;
    font-size: .8125rem;
}

    .admin-bar .who {
        color: var(--grey-425);
    }

/* ---------- 15. Adaptatif ---------- */

@media (max-width: 920px) {
    .hero {
        grid-template-columns: 1fr;
        padding: 2rem 1.5rem;
    }

        .hero-logo {
            order: -1;
            justify-items: start;
        }

            .hero-logo img {
                max-width: 200px;
            }

    h1 {
        font-size: 2rem;
    }

    .hero h1 .accent {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    .grid-2,
    .grid-3,
    .form-grid,
    ul.grid-list {
        grid-template-columns: 1fr;
    }

    .body-content {
        padding: 0 1.25rem;
    }

    .gouv-header__inner {
        padding: 0 1.25rem;
        gap: 1.25rem;
    }

    .bloc-marque-svg {
        height: 76px;
    }

    .service-title {
        font-size: 1.25rem;
    }
}

@media (max-width: 480px) {
    html {
        font-size: 15px;
    }
}

@media print {
    .gouv-header,
    .admin-bar,
    .site-footer-links,
    .wallet-links {
        display: none;
    }

    body {
        background: #fff;
    }
}