/* ============================================================
   CPVR - Feuille de style
   Philosophie : sobre, blanc et gris, hiérarchie claire
   ============================================================ */

:root {
    --couleur-principale: #57B0CC;
    --couleur-claire: #E5F4F9;
    --couleur-accent: #54B3D3;

    --texte: #2C2C2C;
    --texte-secondaire: #6B6B6B;
    --bordure: #E5E5E5;
    --fond: #FFFFFF;
    --fond-subtil: #FAFAFA;

    --erreur-texte: #B3261E;
    --erreur-fond: #FBEAE9;
    --succes-texte: #1E6B45;
    --succes-fond: #E9F5EF;
    --avertissement-texte: #7A5B00;

    --rayon: 6px;
    --espace: 20px;
}

* {
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    background-color: var(--fond);
    color: var(--texte);
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

a {
    color: var(--couleur-principale);
}

h1 {
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 24px 0;
}

h2 {
    font-size: 16px;
    font-weight: 600;
    color: var(--texte-secondaire);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 32px 0 12px 0;
}

p {
    margin: 0 0 8px 0;
}

/* ---------- Navigation ---------- */
.nav {
    border-bottom: 1px solid var(--bordure);
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.nav-marque {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-marque img {
    height: 24px;
}

.nav-marque span {
    font-weight: 600;
    color: var(--texte);
    font-size: 14px;
}

.nav-liens {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.nav-liens a {
    color: var(--texte-secondaire);
    text-decoration: none;
    font-size: 14px;
    padding: 5px 10px;
    border-radius: var(--rayon);
}

.nav-liens a.nav-lien-actif {
    color: var(--couleur-principale);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.nav-liens a:hover {
    color: var(--couleur-principale);
}

.nav-utilisateur {
    color: var(--texte-secondaire);
    font-size: 14px;
}

.nav-deconnexion {
    color: var(--texte-secondaire) !important;
    font-size: 13px;
    border-left: 1px solid var(--bordure);
    padding-left: 20px;
}

/* ---------- Conteneur principal ---------- */
main {
    max-width: 640px;
    margin: 0 auto;
    padding: 40px 24px;
}

/* ---------- Messages ---------- */
.message {
    padding: 10px 14px;
    border-radius: var(--rayon);
    font-size: 14px;
    margin-bottom: 20px;
}

.message-succes {
    color: var(--succes-texte);
    background: var(--succes-fond);
}

.message-erreur {
    color: var(--erreur-texte);
    background: var(--erreur-fond);
}

.message-avertissement {
    color: var(--avertissement-texte);
    background: var(--fond-subtil);
}

/* ---------- Formulaires ---------- */
.champ {
    margin-bottom: 16px;
}

.champ label {
    display: block;
    font-size: 13px;
    color: var(--texte-secondaire);
    margin-bottom: 6px;
}

.champ input,
.champ select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    font-size: 14px;
    color: var(--texte);
    background: var(--fond);
}

.champ input:focus,
.champ select:focus {
    outline: none;
    border-color: var(--couleur-principale);
}

/* ---------- Options radio (empilées, zone cliquable généreuse) ---------- */
.options-radio {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.option-radio {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    cursor: pointer;
}

.option-radio input[type="radio"] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin: 0;
    accent-color: var(--couleur-principale);
}

.option-radio span {
    font-size: 14px;
    color: var(--texte);
}

.bouton {
    display: inline-block;
    padding: 10px 18px;
    border-radius: var(--rayon);
    border: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
}

.bouton-principal {
    background: var(--couleur-principale);
    color: white;
    width: 100%;
}

.bouton-secondaire {
    background: var(--fond);
    color: var(--texte);
    border: 1px solid var(--bordure);
}

.bouton-danger {
    background: var(--fond);
    color: var(--erreur-texte);
    border: 1px solid var(--erreur-fond);
}

/* ---------- Carte (formulaire de login, etc.) ---------- */
.carte {
    max-width: 360px;
    margin: 60px auto;
    padding: 32px;
}

.carte h1 {
    text-align: center;
}

/* ---------- Liste de plateaux ---------- */
.plateau {
    padding: 16px 0;
    border-bottom: 1px solid var(--bordure);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.plateau:last-child {
    border-bottom: none;
}

.plateau-details {
    font-size: 14px;
}

.plateau-code {
    font-size: 12px;
    font-weight: 600;
    color: var(--couleur-principale);
    margin-bottom: 2px;
}

.plateau-date {
    font-weight: 500;
    color: var(--texte);
}

.plateau-lieu,
.plateau-niveau,
.plateau-places {
    color: var(--texte-secondaire);
    font-size: 13px;
}

.plateau-complet {
    color: var(--texte-secondaire);
    font-size: 13px;
}

/* ---------- Lignes de liste (admin : membres, lieux, plateaux) ---------- */
.ligne-liste {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--bordure);
    text-decoration: none;
    color: inherit;
    gap: 12px;
}

.ligne-liste-detail {
    min-width: 0;
}

.ligne-liste-titre {
    font-weight: 500;
}

.ligne-liste-sous-titre {
    font-size: 13px;
    color: var(--texte-secondaire);
}

.ligne-liste-valeur {
    font-size: 13px;
    color: var(--texte-secondaire);
    white-space: nowrap;
    text-align: right;
}

/* ---------- Adaptation mobile (iPhone / iPad) ---------- */
@media (max-width: 600px) {
    main {
        padding: 24px 16px;
    }

    .accueil-logo {
        height: 80px;
    }

    .nav {
        padding: 12px 16px;
    }

    .nav-liens {
        gap: 12px;
    }

    .carte {
        margin: 30px auto;
        padding: 24px 20px;
    }

    .ligne-liste {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .ligne-liste-valeur {
        text-align: left;
        white-space: normal;
    }

    .plateau {
        flex-direction: column;
        align-items: flex-start;
    }

    .plateau form,
    .plateau > div:last-child {
        width: 100%;
    }

    .bouton {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .carte-module {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
    }

    .carte-module-action {
        width: 100%;
        justify-content: space-between;
    }

    .bouton-module-actif,
    .bouton-module-inactif {
        flex: 1;
        text-align: center;
    }
}
.bloc-info {
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: 20px;
}

.bloc-info p {
    font-size: 14px;
}

/* ---------- Cartes de module (page d'accueil, réutilisable pour de futurs modules similaires) ---------- */
.module-section {
    /* Couleur d'accent propre à ces cartes — jamais utilisée ailleurs dans le site. */
    --accent-module: #1A2B5C;
    --accent-module-pale: #E6EAF5;
}

.accueil-titre {
    font-size: 28px;
    font-weight: 700;
    color: var(--accent-module);
    margin: 0 0 10px;
    line-height: 1.25;
}

.accueil-logo {
    display: block;
    height: 110px;
    max-width: 100%;
    margin: 0 auto var(--espace);
}

.accueil-soustitre {
    color: var(--texte-secondaire);
    font-size: 15px;
    margin: 0 0 28px;
}

.carte-module-liste {
    background: var(--fond-subtil);
    border-radius: 16px;
    padding: 20px;
}

.carte-module {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--fond);
    border: 1px solid var(--bordure);
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    padding: 24px 28px;
    text-decoration: none;
    color: inherit;
}

.carte-module + .carte-module {
    margin-top: 16px;
}

a.carte-module:hover {
    border-color: var(--accent-module);
}

.carte-module-icone {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--accent-module-pale);
    display: flex;
    align-items: center;
    justify-content: center;
}

.carte-module-icone svg {
    width: 28px;
    height: 28px;
    stroke: var(--accent-module);
}

.carte-module-texte {
    flex: 1;
    min-width: 0;
}

.carte-module-titre {
    display: block;
    font-size: 17px;
    font-weight: 700;
    color: var(--accent-module);
    margin-bottom: 4px;
}

.carte-module-description {
    display: block;
    font-size: 13px;
    color: var(--texte-secondaire);
}

.carte-module-action {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.bouton-module-actif,
.bouton-module-inactif {
    display: inline-block;
    padding: 11px 22px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.bouton-module-actif {
    background: var(--accent-module);
    color: #FFFFFF;
}

.bouton-module-inactif {
    background: #E9E9EE;
    color: var(--texte-secondaire);
}

.carte-module-chevron {
    color: var(--accent-module);
    font-size: 18px;
    line-height: 1;
}

.bloc-info p:first-child {
    color: var(--texte-secondaire);
    font-size: 13px;
    margin-bottom: 4px;
}

/* ---------- Sélecteur de priorité des plateaux (Inscription — Jeu libre) ---------- */
.poignee {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    cursor: grab;
    touch-action: none;
    font-size: 16px;
    color: var(--texte-secondaire);
    border-radius: var(--rayon);
    background: var(--fond-subtil);
}

.carte-plateau-jeu {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--fond);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    padding: 14px 16px;
    margin-bottom: 10px;
    transition: opacity 0.15s ease;
}

.separateur-choix {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--accent-module, #1A2B5C);
    border: 2px dashed rgba(255, 255, 255, 0.55);
    border-radius: var(--rayon);
    padding: 14px 16px;
    margin: 18px 0;
}

.separateur-choix .poignee {
    background: rgba(255, 255, 255, 0.18);
    color: #FFFFFF;
}

.separateur-choix-texte {
    flex: 1;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: 0.3px;
}

/* ---------- Note libre par plateau (Inscription — Jeu libre) ---------- */

/* Mode "clair" (état 1, aperçu, récapitulatifs) : toujours visible, sur sa propre ligne. */
.note-jeu-clair {
    margin-top: 4px;
    font-size: 13px;
    color: var(--texte-secondaire);
}

/* Mode "dépliable" (état 2 — formulaire actif seulement) : sur sa propre ligne, sous la
   ligne condensée, pour garder la liste compacte tout en restant repérable. */
.note-jeu-detail {
    display: block;
    margin-top: 6px;
}

.note-jeu-detail summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--fond-subtil);
    color: var(--couleur-principale);
    border: 1.5px solid var(--couleur-principale);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.note-jeu-detail summary::-webkit-details-marker {
    display: none;
}

.note-jeu-detail[open] summary {
    background: var(--couleur-principale);
    color: #FFFFFF;
}

.note-jeu-contenu {
    margin-top: 6px;
    font-size: 13px;
    color: var(--texte-secondaire);
    background: var(--fond-subtil);
    border-radius: var(--rayon);
    padding: 8px 10px;
}

/* ---------- Pied de page ---------- */
.site-footer {
    border-top: 1px solid var(--bordure);
    padding: 24px 24px;
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--texte-secondaire);
}

.site-footer img {
    height: 40px;
    opacity: 0.8;
}

.site-footer-lien {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
}

.site-footer-lien:hover {
    color: var(--couleur-principale);
}