/*
 * Charte Route du Rhum – Destination Guadeloupe 2026. Les composants
 * n'utilisent que les variables sémantiques (--fond, --encre…), jamais les
 * couleurs de la charte directement. Détail : docs/design-system.md.
 */
:root {
    --rdr-nuit: #16355D;
    --rdr-lagon: #5DBFC0;
    --rdr-soleil: #FCF150;
    --rdr-ciel: #56BCF6;
    --rdr-pervenche: #7894F7;
    --rdr-petrole: #2A646D;
    --rdr-ambre: #F5BE41;

    --fond: var(--rdr-nuit);
    --fond-carte: #1e4373;
    --encre: #F4F7FB;
    --encre-douce: #C9D6E8;
    --accent: var(--rdr-soleil);
    --accent-encre: var(--rdr-nuit);
    --bord: rgba(255, 255, 255, .18);
    --erreur: #FFB4A8;

    --police: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --rayon: 1rem;
    --rayon-petit: .5rem;
    --espace-1: .25rem;
    --espace-2: .5rem;
    --espace-3: .75rem;
    --espace-4: 1rem;
    --espace-6: 1.5rem;
    --espace-8: 2rem;

    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--fond);
    color: var(--encre);
    font-family: var(--police);
    line-height: 1.5;
}

a { color: var(--rdr-lagon); }

/* --- Portail --- */
.page-portail {
    min-height: 100dvh;
    background-color: var(--fond);
    background-size: cover;
    background-position: center;
}

.portail {
    min-height: 100dvh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: var(--espace-6);
    max-width: 64rem;
    margin: 0 auto;
    padding: var(--espace-8) var(--espace-4);
}

.portail__entete { text-align: center; }
.portail__logo { max-width: min(100%, 30rem); height: auto; }
.portail__surtitre { margin: 0; color: var(--rdr-lagon); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.portail__titre { margin: 0; font-size: clamp(1.8rem, 5vw, 3rem); }

.portail__cartes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--espace-6);
    align-content: center;
}

.carte {
    display: grid;
    gap: var(--espace-2);
    padding: var(--espace-4);
    border-radius: var(--rayon);
    background: var(--fond-carte);
    border: 1px solid var(--bord);
    color: var(--encre);
    text-decoration: none;
}
a.carte:hover, a.carte:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.carte__image {
    aspect-ratio: 4 / 3;
    border-radius: var(--rayon-petit);
    background-size: cover;
    background-position: center;
}
.carte__image--jeu { background-color: var(--rdr-lagon); }
.carte__image--atelier { background-color: var(--rdr-pervenche); }
.carte__titre { font-size: 1.6rem; font-weight: 700; }
.carte__texte { color: var(--encre-douce); }
.carte--bientot { opacity: .6; }

.portail__pied { text-align: center; }

/* --- Pages de texte (règlement) --- */
.texte { max-width: 44rem; margin: 0 auto; padding: var(--espace-8) var(--espace-4); }
.texte__alerte { padding: var(--espace-3); border-radius: var(--rayon-petit); background: var(--rdr-ambre); color: var(--rdr-nuit); }