/* --- Variables de design "Groovy 70s - Sunburst" --- */
:root {
    /* La palette inspirée de votre 1ère image (chaude, désaturée) */
    --color-red-pink: #d16b6b;      /* Rouge/rose */
    --color-peach: #eda47e;        /* Pêche/orange clair */
    --color-cream: #f4e8c1;        /* Crème */
    --color-teal-light: #8ab4c5;   /* Bleu/vert clair */
    --color-mustard: #dea43e;      /* Jaune moutarde */
    --color-teal-dark: #5a7b7a;    /* Vert/bleu pétrole */

    /* Couleurs neutres pour les éléments UI */
    --color-dark-brown: #4a2c1e;   /* Marron foncé (pour le texte/bordures) */

    /* Couleurs "Disabled" */
    --color-disabled-bg: #888888;
    --color-disabled-text: #bbbbbb;
    --color-disabled-border: #a0a0a0;

    /* Polices */
    --font-header: 'Lobster', cursive;
    --font-action: 'Bebas Neue', cursive;
}



/* --- Le FOND en "Rayons" (Conique) --- */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;

    /* Dégradé conique qui se RÉPÈTE (36 rayons) */
    background: repeating-conic-gradient(
            from 0deg,
            var(--color-red-pink) 0deg 10deg,
            var(--color-peach) 10deg 20deg,
            var(--color-cream) 20deg 30deg,
            var(--color-teal-light) 30deg 40deg,
            var(--color-mustard) 40deg 50deg,
            var(--color-teal-dark) 50deg 60deg
    );

    opacity: 0.9;
    filter: brightness(0.95) saturate(0.9);
}

body {
    /*
      AMÉLIORATION : 'min-height: 100vh' est plus robuste que 'height: 100%'.
      Le body prendra *au moins* 100% de la hauteur de l'écran,
      mais pourra grandir si le contenu est plus long.
    */
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem; /* Ajoute un peu d'air sur les bords sur mobile */
}

main {
    padding: 1.5rem; /* 'rem' est plus flexible que 'px' */
    width: 100%; /* Prendra la largeur dispo */
    max-width: 800px; /* Empêche le conteneur de devenir trop large sur grand écran */
}


.btn {
    /*
      FIX : Le 'cursor: pointer' doit être ici, sur la classe de base.
      S'il est seulement sur le ':hover', il y a un délai ou un bug
      d'affichage (le problème que tu avais !).
    */
    cursor: pointer;

    /*
      AMÉLIORATION : Remplacer 'height: 6vh' qui est imprévisible.
      On utilise 'padding' pour définir la taille par rapport au texte.
      Le bouton s'adaptera à son contenu.
    */
    padding: 0.75em 1.5em; /* Padding vertical (0.75x) et horizontal (1.5x) basé sur la font-size */

    border: 3px RGB(243, 186, 79) solid;
    font-weight: bold;

    /*
      AMÉLIORATION RESPONSIVE (LA PLUS IMPORTANTE) :
      Remplacer 'font-size: 2.25vh' par 'clamp()'.
      clamp(MIN, PRÉFÉRÉ, MAX)
      - La police fera au minimum 1rem (16px).
      - Elle essaiera de faire 2.5vw (s'adapte à la largeur de l'écran).
      - Elle ne dépassera jamais 1.4rem (env. 22px).
      FINI les textes minuscules ou gigantesques !
    */
    font-size: clamp(1rem, 2.5vw, 1.4rem);

    color: RGB(246, 235, 208);
    box-shadow: 4px 4px 0 RGB(110, 61, 99);
    transform: translate(0, 0);
    transition: all 0.1s ease-out;
    background: linear-gradient(90deg, rgba(220, 77, 107, 1) 0%, rgba(247, 178, 87, 1) 100%);

    /* Pour la cohérence visuelle */
    text-align: center;
}

.btn:hover {
    transform: translate(4px, 4px);
    box-shadow: none;
    /* 'cursor: pointer' n'est plus nécessaire ici */
}

/*
  BONUS : Ajoute un état 'active' (pendant le clic)
  pour un meilleur retour utilisateur, surtout sur mobile.
*/
.btn:active {
    transform: translate(4px, 4px);
    box-shadow: none;
}

.btn-rejoindre {
    background: linear-gradient(90deg, rgba(75, 157, 155, 1) 0%, rgba(115, 199, 198, 1) 100%);
}

.container-central {
    /*
      AMÉLIORATION RESPONSIVE :
      Remplacer 'padding: 50px' par 'clamp()' pour qu'il
      s'adapte aux petits écrans.
      - min: 1.5rem (24px)
      - préféré: 5vw
      - max: 3rem (48px)
    */
    padding: clamp(1.5rem, 5vw, 3rem);

    display: flex;
    flex-direction: column;
    align-items: center;
    /* 'rem' est plus fiable que 'vh' pour les espacements */
    gap: 1.5rem;
    background-color: RGB(64, 43, 38);

    /* On rend aussi la bordure et le radius un peu responsifs */
    border-radius: clamp(20px, 4vw, 40px);
    border: clamp(5px, 1.5vw, 10px) double RGB(243, 186, 79);

    color: white;
    width: 100%; /* Prendra toute la largeur de 'main' */
}

h1 {
    color: #fffaee;
    font-weight: bolder;
    /* AMÉLIORATION RESPONSIVE : 'clamp()' pour le titre principal */
    font-size: clamp(2rem, 7vw, 3.5rem); /* min 32px, max 56px */
    margin: 0; /* Le reset de base s'en occupe, mais pour être sûr */
    text-align: center; /* Mieux pour les mobiles */
}

.subtitle {
    padding-top: 0;
    color: RGB(246, 235, 208);
    margin: 0;
    /* AMÉLIORATION RESPONSIVE : 'clamp()' pour le sous-titre */
    font-size: clamp(1rem, 3vw, 1.5rem); /* min 16px, max 24px */
    text-align: center;
}

.container-titre {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem; /* 'rem' > 'vh' */
    padding-bottom: 2rem; /* 'rem' > 'vh' */
}

input {
    /* AMÉLIORATION : Un 'input' de base n'est pas responsive */
    width: 100%; /* Prend toute la largeur de son conteneur */
    max-width: 350px; /* Mais pas trop large sur desktop */
    padding: 0.75rem 1rem; /* Confort de frappe */
    border: 2px RGB(243, 186, 79) solid;
    border-radius: 10px;
    font-size: 1rem; /* Pour la lisibilité */
}

/* ========================================= */
/* STYLES POUR LES BOUTONS RADIO           */
/* ========================================= */

/* Un conteneur pour aligner les options */
.radio-group {
    display: flex;
    flex-direction: column; /* ou 'row' si tu les veux côte à côte */
    gap: 1rem;
    width: 100%;
}

/* Conteneur pour une seule option (input + label) */
.radio-option {
    display: block;
    position: relative;
    /* Le padding-left fait de la place pour notre cercle custom */
    padding-left: 35px;
    cursor: pointer;

    /* On reprend la police et la couleur crème */
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    color: RGB(246, 235, 208);

    /* Empêche le texte de se sélectionner quand on clique */
    user-select: none;
}

/* 1. On cache le bouton radio d'origine */
.radio-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* 2. On crée le CERCLE EXTÉRIEUR (le faux bouton) */
.radio-option .checkmark {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);

    height: 24px;
    width: 24px;

    /* On reprend le fond du conteneur */
    background-color: RGB(64, 43, 38);

    /* On reprend la bordure OR */
    border: 3px solid RGB(243, 186, 79);
    border-radius: 50%;
    transition: all 0.2s ease-out;
}

/* 3. On crée le POINT INTÉRIEUR (qui apparaît au clic) */
.radio-option .checkmark:after {
    content: "";
    position: absolute;
    display: none; /* Caché par défaut */

    /* Centrage du point */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 12px;
    height: 12px;

    border-radius: 50%;

    /* On reprend la couleur SARCELLE du bouton "Rejoindre" */
    background: rgba(75, 157, 155, 1);
}

/* 4. Quand on Coche : on affiche le point intérieur */
.radio-option input[type="radio"]:checked ~ .checkmark:after {
    display: block;
}

/* 5. Au survol : on change la couleur de la bordure (optionnel) */
.radio-option:hover input[type="radio"] ~ .checkmark {
    border-color: #fff; /* Un blanc pour le feedback */
}

/* 6. Accessibilité : On ajoute un "focus" visible */
.radio-option input[type="radio"]:focus ~ .checkmark {
    box-shadow: 0 0 5px RGB(243, 186, 79);
}

/* 2. Style pour les titres H2 et H3 */
h2 {
    font-size: clamp(1.8rem, 5vw, 2.5rem);
    color: RGB(243, 186, 79); /* Or */
    text-align: center;
    font-weight: bold;
}

h3 {
    font-size: clamp(1.3rem, 4vw, 1.8rem);
    color: RGB(246, 235, 208); /* Crème */
    font-weight: bold;
    border-bottom: 2px solid RGB(110, 61, 99); /* Ligne violette */
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    width: 100%;
    text-align: center;
}

/* 3. Style pour le code de la partie (le texte sous H1) */
h1 + br + * { /* Cible l'élément juste après le H1 */
    font-size: 1.2rem;
    font-weight: bold;
    color: RGB(243, 186, 79);
    background: rgba(0,0,0,0.2);
    padding: 0.5rem 1rem;
    border-radius: 10px;
    border: 1px solid RGB(243, 186, 79);
    margin-top: -1rem; /* Le rapproche du titre */
}


/* 4. Limitation de la largeur des blocs (comme le 'main' original) */
.panneau-host,
.panneau,
#btn-lancement {
    width: 100%;
    max-width: 800px; /* Cohérence avec le style 'main' */
}

/* 5. Style des sous-panneaux (Gestion Collection, Equipe) */
.panneau {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

/* 6. Application des styles .btn aux ID et CLASSES spécifiques */

/* Bouton "Ajouter" équipe (#btn-equipe) */
#btn-equipe {
    /* === COPIE DE .btn === */
    cursor: pointer;
    padding: 0.75em 1.5em;
    border: 3px RGB(243, 186, 79) solid;
    font-weight: bold;
    font-size: clamp(1rem, 2.5vw, 1.4rem);
    color: RGB(246, 235, 208);
    box-shadow: 4px 4px 0 RGB(110, 61, 99);
    transform: translate(0, 0);
    transition: all 0.1s ease-out;
    background: linear-gradient(90deg, rgba(220, 77, 107, 1) 0%, rgba(247, 178, 87, 1) 100%);
    border-radius: 8px; /* Ajout d'un radius */

    /* Layout */
    width: 100%;
    max-width: 350px; /* Aligné sur l'input */
}
#btn-equipe:hover {
    transform: translate(4px, 4px);
    box-shadow: none;
}
#btn-equipe:active {
    transform: translate(4px, 4px);
    box-shadow: none;
}

/* Bouton "Lancer Partie" (#btn-lancement) */
#btn-lancement {
    /* === COPIE DE .btn === */
    cursor: pointer;
    padding: 0.75em 1.5em;
    border: 3px RGB(243, 186, 79) solid;
    font-weight: bold;
    font-size: clamp(1.2rem, 4vw, 2rem); /* Plus gros! */
    color: RGB(246, 235, 208);
    box-shadow: 4px 4px 0 RGB(110, 61, 99);
    transform: translate(0, 0);
    transition: all 0.1s ease-out;
    background: linear-gradient(90deg, rgba(220, 77, 107, 1) 0%, rgba(247, 178, 87, 1) 100%);
    border-radius: 8px;
}
#btn-lancement:hover {
    transform: translate(4px, 4px);
    box-shadow: none;
}
#btn-lancement:active {
    transform: translate(4px, 4px);
    box-shadow: none;
}

/* Bouton "Rejoindre" équipe (.btn-rejoindreEquipe) */
.btn-rejoindreEquipe {
    /* === COPIE DE .btn === */
    cursor: pointer;
    padding: 0.5em 1em; /* Plus petit */
    border: 2px RGB(243, 186, 79) solid; /* Bordure plus fine */
    font-weight: bold;
    font-size: clamp(0.9rem, 2vw, 1.1rem); /* Plus petit */
    color: RGB(246, 235, 208);
    box-shadow: 3px 3px 0 RGB(110, 61, 99); /* Ombre plus fine */
    transform: translate(0, 0);
    transition: all 0.1s ease-out;
    border-radius: 8px;

    /* === COPIE DE .btn-rejoindre === */
    background: linear-gradient(90deg, rgba(75, 157, 155, 1) 0%, rgba(115, 199, 198, 1) 100%);

    /* Layout */
    margin-left: auto; /* Le pousse à droite */
    flex-shrink: 0; /* Empêche le bouton de rétrécir */
}
.btn-rejoindreEquipe:hover {
    transform: translate(3px, 3px);
    box-shadow: none;
}
.btn-rejoindreEquipe:active {
    transform: translate(3px, 3px);
    box-shadow: none;
}

/* 7. Style pour <select> (pour matcher <input>) */
select {
    width: 100%;
    max-width: 350px;
    padding: 0.75rem 1rem;
    border: 2px RGB(243, 186, 79) solid;
    border-radius: 10px;
    font-size: 1rem;
    background-color: white;
    color: #333;
    cursor: pointer;
}
.collection-selector {
    width: 100%;
    max-width: 350px; /* Aligné sur l'input */
}

/* 8. Style pour la liste des équipes */
#equipe-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
}

.equipe-item {
    display: flex;
    flex-wrap: wrap; /* Permet au contenu de passer à la ligne */
    align-items: center;
    gap: 1rem;

    background: rgba(0,0,0,0.2);
    padding: 1rem;
    border-radius: 15px;
    border: 2px solid RGB(110, 61, 99); /* Bordure violette */

    /* Nom de l'équipe */
    font-size: 1.6rem;
    font-weight: bold;
    color: #fff;
    flex-grow: 1; /* Prend la place dispo */
}

/* Liste des membres */
.membre-container {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    margin-top: 1rem;
    padding-top: 1rem;
    padding-left: 1.5rem; /* Indentation */
    border-top: 2px dashed RGB(110, 61, 99); /* Séparateur */
}

.membre-container li {
    color: RGB(246, 235, 208);
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.membre-container li::before {
    content: '👤'; /* Petit icône de joueur */
    margin-right: 0.75em;
    opacity: 0.8;
}

/*
  REMARQUE :
  Grâce à 'clamp()', 'rem' et 'flexbox', la media query
  devient presque inutile ! Le design est "fluide".

  On peut la garder pour des changements plus drastiques
  si nécessaire, mais celle d'origine n'est plus adaptée.
*/
@media (max-width: 600px) {
    /* Exemple : si on veut que les boutons prennent toute la largeur sur petit écran */
    .btn {
        width: 100%;
    }

    main {
        padding: 0.5rem; /* Moins de padding sur 'main' sur petit écran */
    }
}