/* Pages hors session (layout guest : connexion, vérification d'e-mail).
   Elles sont en Tailwind, pas en Bootstrap : mode-sombre.css et texte.css ne
   les connaissent pas. Écrit ici plutôt qu'en classes `dark:` pour ne pas
   dépendre d'un `npm run build`. */

/* Texte noir ou blanc, jamais gris — comme texte.css pour le reste. */
.invite-carte,
.invite-carte label,
.invite-carte .text-gray-600,
.invite-carte .text-gray-700 {
    color: #000;
}

.invite-logo-sombre { display: none; }

/* La bascule du thème, en haut à droite comme dans la barre d'ACPORTAIL. */
.invite-theme {
    position: absolute;
    top: .5rem;
    right: .5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    color: #000;
    cursor: pointer;
}

.invite-theme:hover { background-color: rgba(0, 0, 0, .08); }
.invite-theme:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
.invite-theme-soleil { display: none; }

/* Sur téléphone la page se cale en haut : le logo, large de 300 px, passerait
   sous le bouton. On le descend d'un cran. */
@media (max-width: 639.98px) {
    .invite-fond { padding-top: 3.5rem; }
}

/* ===== Mode sombre ===== */

/* Champs remplis par le navigateur, barres de défilement : sombres aussi. */
html.dark-mode { color-scheme: dark; }

html.dark-mode,
html.dark-mode body,
html.dark-mode .invite-fond {
    background-color: #121212;
    color: #fff;
}

html.dark-mode .invite-theme { color: #fff; }
html.dark-mode .invite-theme:hover { background-color: rgba(255, 255, 255, .12); }
html.dark-mode .invite-theme-lune { display: none; }
html.dark-mode .invite-theme-soleil { display: block; }

html.dark-mode .invite-logo-clair { display: none; }
html.dark-mode .invite-logo-sombre { display: block; }

html.dark-mode .invite-carte {
    background-color: #1e1e1e;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .6);
}

html.dark-mode .invite-carte,
html.dark-mode .invite-carte label,
html.dark-mode .invite-carte .text-gray-600,
html.dark-mode .invite-carte .text-gray-700,
html.dark-mode .invite-carte .text-gray-600:hover {
    color: #fff;
}

html.dark-mode .invite-carte input:not([type="checkbox"]) {
    color: #fff;
    background-color: #333333;
    border-color: #555555;
}

/* Cochée, la case garde son fond indigo (il vient de `currentColor`). */
html.dark-mode .invite-carte input[type="checkbox"]:not(:checked) {
    background-color: #333333;
    border-color: #555555;
}

html.dark-mode .invite-carte input,
html.dark-mode .invite-carte button {
    --tw-ring-offset-color: #1e1e1e;
}

/* Le bouton principal est gris très foncé : sur la carte sombre il
   disparaîtrait. On l'inverse. */
html.dark-mode .invite-carte button.bg-gray-800 {
    background-color: #fff;
    color: #000;
}

html.dark-mode .invite-carte button.bg-gray-800:hover,
html.dark-mode .invite-carte button.bg-gray-800:focus,
html.dark-mode .invite-carte button.bg-gray-800:active {
    background-color: #e5e7eb;
}

/* Le rouge et le vert de Tailwind sont trop sombres sur fond noir. */
html.dark-mode .invite-carte .text-red-600,
html.dark-mode .invite-carte .text-red-600 li { color: #f87171; }
html.dark-mode .invite-carte .text-green-600 { color: #4ade80; }