/* =====================================================================
   STYLE DE LA PAGE DE CONNEXION - 4appuis.fr
   =====================================================================
   Styles specifiques a cette page uniquement.

   Contexte important : partout ailleurs dans l'application (une fois
   connecte), le sombre est reserve au menu lateral, le contenu principal
   restant sur fond creme clair (variables globales de ressources/variables.css,
   non modifiees ici). Mais cette page de connexion n'a pas de menu : elle
   reprend donc une ambiance sombre/cuivree pour TOUTE la page.

   Palette exacte propre a cette page (prefixe "--connexion-"), definie
   uniquement sur .page-connexion-4appuis pour ne jamais entrer en
   conflit avec les variables globales utilisees par les autres pages.
   ===================================================================== */

.page-connexion-4appuis {
    /* --------- PALETTE EXACTE DE CETTE PAGE --------- */
    --connexion-charbon: #121111;
    --connexion-gris: #343231;
    --connexion-cuivre: #a66236;
    --connexion-peche: #e39e6a;

    /* Teintes de texte (derivees, pour rester lisible sur fond sombre) */
    --connexion-texte-clair: #f5efe8;
    --connexion-texte-attenue: rgba(245, 239, 232, 0.62);
    --connexion-texte-discret: rgba(245, 239, 232, 0.42);

    margin: 0;
    /* min-height: 100vh d'abord en repli (navigateurs sans support de svh),
       puis 100svh ("small viewport height") par-dessus : sur mobile, 100vh
       se base sur la hauteur maximale (barre d'adresse masquee), ce qui
       cree un scroll fantome de quelques dizaines de pixels des que la
       barre d'adresse est affichee. 100svh se base sur la plus petite
       hauteur visible possible, donc jamais plus grand que l'ecran reel. */
    min-height: 100vh;
    min-height: 100svh;
    font-family: var(--police-texte);
    color: var(--connexion-texte-clair);
    position: relative;
    overflow-x: hidden;

    /* Fond : photo reelle (poteaux de rugby / projecteurs de stade la nuit),
       plein ecran. Le degrade Charbon sert de couleur de secours pendant
       le chargement de l'image. */
    background-color: var(--connexion-charbon);
    background-image: url('../ressources/img-poteaux.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* --------- MISE EN PAGE --------- */
.conteneur-connexion-4appuis {
    position: relative;
    z-index: 1;
    /* Meme repli/correctif svh que .page-connexion-4appuis ci-dessus */
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    box-sizing: border-box;
}

/* --------- ENCART DE CONNEXION --------- */
/* Pas de glassmorphism/backdrop-filter (retire : trop complexe a bien
   rendre) : degrade diagonal sombre, plus un contour lumineux blanc,
   intense et resserre pres du bord, pour detacher nettement l'encart
   de la photo de fond. */
.carte-connexion-4appuis {
    position: relative;
    /* overflow:hidden coupe la texture en ::before et le balayage en
       ::after aux coins arrondis */
    overflow: hidden;
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;

    /* Degrade en diagonale : #262626 (haut-gauche) vers #343434 (bas-droite) */
    background: linear-gradient(135deg, #262626 0%, #343434 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    /* Glow blanc : quasi opaque au ras du bord, puis diffusion resserree */
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.55),
        0 0 0 1.5px rgba(255, 255, 255, 0.9),
        0 0 24px rgba(255, 255, 255, 0.55),
        0 0 46px rgba(255, 255, 255, 0.3);

    padding: 2.75rem 2.5rem 2.25rem;
    box-sizing: border-box;

    /* --------- ANIMATION D'OUVERTURE (fondu + zoom) --------- */
    /* Un seul effet simple sur l'encart entier, contenu compris, en
       place (pas d'animation element par element) : part d'une taille
       legerement reduite et transparente, vers sa taille normale et
       pleinement visible. Meme effet sur desktop et mobile ; le fond de
       la page, lui, ne bouge jamais. */
    opacity: 0;
    animation: ouverture-encart-connexion-4appuis 350ms ease-out forwards;
}

@keyframes ouverture-encart-connexion-4appuis {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Texture en diagonale (effet "givre"), isolee dans un pseudo-element
   place STRICTEMENT derriere le contenu (z-index:0), pour ne jamais
   passer devant le logo/les champs/les boutons. Traits rapproches,
   couleur #c9c9c9, opacite tres discrete. */
.carte-connexion-4appuis::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(135deg, rgba(201, 201, 201, 0.055) 0px, rgba(201, 201, 201, 0.055) 1.5px, transparent 1.5px, transparent 10px);
}

/* Tout le contenu reel de l'encart passe au-dessus de la texture */
.carte-connexion-4appuis > * {
    position: relative;
    z-index: 1;
}

/* Respecte les preferences d'accessibilite : pas d'animation si
   l'utilisateur a demande de reduire les animations sur son appareil */
@media (prefers-reduced-motion: reduce) {
    .carte-connexion-4appuis {
        animation: none;
        opacity: 1;
    }
}

/* --------- LOGO --------- */
.logo-connexion-4appuis {
    width: 235px;
    max-width: 72%;
    height: auto;
    /* Un peu plus d'espace avant le separateur */
    margin-bottom: 1.5rem;
}

/* --------- SEPARATEUR ENTRE LE LOGO ET LE TITRE --------- */
.separateur-connexion-4appuis {
    /* Nettement elargi (etait 44px) */
    width: 160px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(245, 239, 232, 0.35), transparent);
    margin-bottom: 1.4rem;
}

/* --------- TITRE ET SOUS-TITRE --------- */
.titre-connexion-4appuis {
    font-family: var(--police-titres);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0;
    color: var(--connexion-texte-clair);
    text-align: center;
}

.sous-titre-connexion-4appuis {
    font-size: 0.92rem;
    color: var(--connexion-texte-attenue);
    margin: 0.5rem 0 2rem;
    text-align: center;
}

/* --------- MESSAGE DE SUCCES (ex. mot de passe defini) --------- */
.message-succes-connexion-4appuis {
    width: 100%;
    background: rgba(127, 191, 122, 0.14);
    border: 1px solid rgba(127, 191, 122, 0.35);
    color: #b6e0af;
    font-size: 0.88rem;
    padding: 0.75rem 1rem;
    border-radius: var(--rayon-champ);
    margin: 0 0 1.5rem;
    box-sizing: border-box;
    text-align: center;
}

/* --------- MESSAGE D'ERREUR (cote serveur, identifiants incorrects) --------- */
.message-erreur-connexion-4appuis {
    width: 100%;
    background: rgba(224, 92, 68, 0.14);
    border: 1px solid rgba(224, 92, 68, 0.35);
    color: #f4b8a8;
    font-size: 0.88rem;
    padding: 0.75rem 1rem;
    border-radius: var(--rayon-champ);
    margin: 0 0 1.5rem;
    box-sizing: border-box;
    text-align: center;
}

/* --------- MESSAGE D'ERREUR (cote client, format email) --------- */
.erreur-champ-connexion-4appuis {
    font-size: 0.78rem;
    color: #f4b8a8;
    margin: 0.1rem 0 0;
}

/* --------- FORMULAIRE --------- */
.formulaire-connexion-4appuis {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

.groupe-champ-connexion-4appuis {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.etiquette-champ-connexion-4appuis {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--connexion-texte-attenue);
}

.champ-connexion-4appuis {
    width: 100%;
    padding: 0.75rem 1rem;
    /* Fond quasi blanc : contraste net avec l'encart sombre */
    background: #fbfaf8;
    border: 1px solid rgba(18, 17, 17, 0.14);
    border-radius: var(--rayon-champ);
    font-family: var(--police-texte);
    font-size: 0.95rem;
    /* Texte fonce, lisible sur fond clair */
    color: #241f1b;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.champ-connexion-4appuis::placeholder {
    color: rgba(36, 31, 27, 0.42);
}

.champ-connexion-4appuis:focus {
    outline: none;
    background: #ffffff;
    /* Bordure cuivre conservee au focus */
    border-color: var(--connexion-cuivre);
    box-shadow: 0 0 0 3px rgba(166, 98, 54, 0.22);
}

/* Le champ mot de passe a un bouton "oeil" a l'interieur, donc espace a droite */
.conteneur-mot-de-passe-connexion-4appuis {
    position: relative;
}

.conteneur-mot-de-passe-connexion-4appuis .champ-connexion-4appuis {
    padding-right: 2.75rem;
}

.bouton-oeil-connexion-4appuis {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Fonce : le champ est maintenant sur fond blanc */
    color: rgba(36, 31, 27, 0.55);
    cursor: pointer;
}

.bouton-oeil-connexion-4appuis:hover {
    color: rgba(36, 31, 27, 0.85);
}

/* Etat actif quand le mot de passe est visible (classe ajoutee en JS) */
.bouton-oeil-connexion-4appuis.mot-de-passe-visible {
    color: var(--connexion-cuivre);
}

/* --------- BOUTON PRINCIPAL : VALIDER --------- */
.bouton-valider-connexion-4appuis {
    position: relative;
    overflow: hidden;
    width: 100%;
    /* Espace au-dessus du bouton, pour le detacher des champs (leger, sans
       toucher aux marges des elements en dessous) */
    margin-top: 0.35rem;
    padding: 0.85rem 1.5rem;
    /* Cuivre en bas a gauche vers Peche en haut a droite */
    background: linear-gradient(to top right, var(--connexion-cuivre) 0%, var(--connexion-peche) 100%);
    color: #ffffff;
    border: none;
    /* Tres arrondi, nettement superieur au rayon des champs texte */
    border-radius: 999px;
    font-family: var(--police-texte);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    /* Aucune ombre externe : rien (surtout pas de cuivre/peche) ne doit
       jamais deborder visuellement des bords exacts du bouton. */
    transition: filter 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

/* Leger ajustement de luminosite/saturation au survol, tres subtil.
   Le halo au survol est un box-shadow INSET (peint a l'interieur du
   bouton, jamais au-dela de ses bords) : convention a suivre pour tous
   les boutons du site, voir CLAUDE.md. */
.bouton-valider-connexion-4appuis:hover {
    filter: brightness(1.05) saturate(1.08);
    box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.22);
}

/* Effet "shine" : un fin balayage lumineux traverse le bouton au survol */
.bouton-valider-connexion-4appuis::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.32) 50%, transparent 100%);
    transform: skewX(-18deg);
    transition: left 0.65s ease;
    pointer-events: none;
}

.bouton-valider-connexion-4appuis:hover::after {
    left: 130%;
}

/* --------- BOUTON SECONDAIRE : DEMANDER LA CREATION D'UN COMPTE --------- */
/* Volontairement plus discret que le bouton VALIDER : contour fin,
   fond quasi transparent, pas de degrade. Rapproche du bouton VALIDER
   pour former un petit groupe visuel coherent. */
.bouton-creation-compte-connexion-4appuis {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 0.6rem;
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: 1px solid rgba(245, 239, 232, 0.22);
    /* Meme famille d'arrondi tres marque que le bouton VALIDER */
    border-radius: 999px;
    color: var(--connexion-texte-attenue);
    font-family: var(--police-texte);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-align: center;
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.bouton-creation-compte-connexion-4appuis:hover {
    border-color: rgba(166, 98, 54, 0.55);
    color: var(--connexion-texte-clair);
    background: rgba(166, 98, 54, 0.1);
}

/* --------- LIEN DISCRET : MOT DE PASSE OUBLIE --------- */
.lien-mot-de-passe-oublie-connexion-4appuis {
    margin-top: 1.1rem;
    font-size: 0.8rem;
    color: var(--connexion-texte-discret);
    text-decoration: none;
    text-align: center;
}

.lien-mot-de-passe-oublie-connexion-4appuis:hover {
    color: var(--connexion-peche);
    text-decoration: underline;
}

/* =====================================================================
   RESPONSIVE MOBILE
   =====================================================================
   Uniquement des surcharges (le rendu desktop/tablette ci-dessus reste
   inchange) :
   - la photo de fond ne s'affichait pas correctement sur mobile, on la
     remplace par le meme degrade + la meme texture en diagonale que
     l'encart, pour une ambiance coherente sans dependre de l'image.
   - l'encart se fond desormais dans la page (meme fond, pas de glow ni
     de bordure/ombre) : plus de "carte" qui se detache, tout ne fait
     qu'un visuellement. Le glow reste reserve au desktop/tablette.
   - le contenu remonte vers le haut de l'ecran (moins d'espace vide
     au-dessus) et les elements du formulaire sont agrandis pour rester
     faciles a toucher/lire sur petit ecran.
   ===================================================================== */
@media (max-width: 768px) {

    .page-connexion-4appuis {
        /* Remplace la photo par le degrade + la texture de l'encart
           (background shorthand : reinitialise aussi position/size/
           repeat/attachment herites de la version desktop) */
        background:
            repeating-linear-gradient(135deg, rgba(201, 201, 201, 0.055) 0px, rgba(201, 201, 201, 0.055) 1.5px, transparent 1.5px, transparent 10px),
            linear-gradient(135deg, #262626 0%, #343434 100%);
    }

    /* Encart centre verticalement (align-items:center, deja la valeur de
       base, mais explicite ici pour la lisibilite de cette section). Le
       conteneur n'a qu'une min-height (jamais de height/max-height ni
       d'overflow:hidden) : si le contenu depasse la hauteur disponible
       (ex. clavier virtuel ouvert), il grandit simplement au-dela et la
       page defile normalement - le centrage ne bloque jamais le scroll
       ni ne coupe le haut/bas du contenu.
       Padding vertical resserre (etait 2.25rem/1.5rem) : marge de securite
       supplementaire pour que le contenu tienne sans scroll sur les petits
       ecrans, en complement du correctif svh ci-dessus. */
    .conteneur-connexion-4appuis {
        align-items: center;
        padding: 1.5rem 1.25rem 1rem;
    }

    /* L'encart n'a plus de fond/bordure/ombre propres : meme degrade et
       meme texture que la page (definis plus haut), donc tout se fond
       visuellement - aucun contour lumineux sur mobile. */
    .carte-connexion-4appuis {
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0 0.25rem;
    }

    /* Supprime la texture propre a l'encart : la page porte deja la
       meme texture juste en dessous, pas besoin de la doubler */
    .carte-connexion-4appuis::before {
        content: none;
    }

    .logo-connexion-4appuis {
        width: 170px;
        margin-bottom: 0.85rem;
    }

    .separateur-connexion-4appuis {
        width: 130px;
        margin-bottom: 0.8rem;
    }

    .titre-connexion-4appuis {
        font-size: 1.6rem;
    }

    .sous-titre-connexion-4appuis {
        font-size: 0.98rem;
        margin: 0.4rem 0 1.2rem;
    }

    .formulaire-connexion-4appuis {
        gap: 1.1rem;
    }

    .etiquette-champ-connexion-4appuis {
        font-size: 0.85rem;
    }

    /* Champs agrandis (texte a 16px minimum pour eviter le zoom
       automatique de Safari iOS au focus d'un champ de saisie) */
    .champ-connexion-4appuis {
        padding: 0.95rem 1.1rem;
        font-size: 1rem;
    }

    .conteneur-mot-de-passe-connexion-4appuis .champ-connexion-4appuis {
        padding-right: 3rem;
    }

    .bouton-valider-connexion-4appuis {
        margin-top: 0.5rem;
        padding: 1rem 1.5rem;
        font-size: 1rem;
    }

    .bouton-creation-compte-connexion-4appuis {
        margin-top: 0.5rem;
        padding: 0.9rem 1.5rem;
        font-size: 0.85rem;
    }

    .lien-mot-de-passe-oublie-connexion-4appuis {
        margin-top: 0.8rem;
        font-size: 0.88rem;
    }
}

/* =====================================================================
   PROGRESSION DESKTOP : 769px -> 2400px+
   =====================================================================
   La taille de l'encart doit rester strictement croissante (ou egale)
   avec la largeur d'ecran, jamais decroissante (une tentative anterieure
   a 320px pour le seul palier 1200-1366px cassait cette regle : plus
   petit que les paliers voisins a 420px, effet retrecissement puis
   re-agrandissement en elargissant la fenetre). Les 4 paliers suivants
   sont donc tous calibres ensemble, avec des tailles strictement
   croissantes : 769-1199px (365px) < 1200-1366px (380px) <
   1367-2399px (420px, taille de base non surchargee, voir plus haut) <
   2400px+ (520px, voir plus bas).

   Le vrai probleme signale sur le palier 15,6" (~1280px de large) n'est
   pas "l'encart est trop grand dans l'absolu" mais que 420px occupe une
   part trop importante d'un ecran a la fois pas tres large ET pas tres
   haut (proportions differentes d'un grand ecran) : d'ou une reduction
   moderee plutot que radicale. Chaque propriete interne (logo, textes,
   champs, boutons) est mise a l'echelle dans la meme proportion que la
   largeur de l'encart, ce qui garantit au passage que le bouton
   "DEMANDER LA CREATION D'UN COMPTE" reste sur une seule ligne (la
   proportion de police par rapport a la largeur disponible ne change
   pas par rapport a la taille de base, qui tient deja bien).
   ===================================================================== */
@media (min-width: 769px) and (max-width: 1199px) {

    .carte-connexion-4appuis {
        max-width: 365px;
        padding: 2.4rem 2.15rem 1.95rem;
    }

    .logo-connexion-4appuis {
        width: 205px;
        margin-bottom: 1.3rem;
    }

    .separateur-connexion-4appuis {
        width: 140px;
        margin-bottom: 1.2rem;
    }

    .titre-connexion-4appuis {
        font-size: 1.3rem;
    }

    .sous-titre-connexion-4appuis {
        font-size: 0.8rem;
        margin: 0.45rem 0 1.75rem;
    }

    .champ-connexion-4appuis {
        padding: 0.65rem 0.85rem;
        font-size: 0.83rem;
    }

    .bouton-valider-connexion-4appuis {
        padding: 0.75rem 1.3rem;
        font-size: 0.8rem;
    }

    .bouton-creation-compte-connexion-4appuis {
        padding: 0.65rem 1.3rem;
        font-size: 0.68rem;
    }
}

@media (min-width: 1200px) and (max-width: 1366px) {

    .carte-connexion-4appuis {
        max-width: 380px;
        padding: 2.5rem 2.25rem 2.05rem;
    }

    .logo-connexion-4appuis {
        width: 213px;
        margin-bottom: 1.35rem;
    }

    .separateur-connexion-4appuis {
        width: 145px;
        margin-bottom: 1.25rem;
    }

    .titre-connexion-4appuis {
        font-size: 1.35rem;
    }

    .sous-titre-connexion-4appuis {
        font-size: 0.83rem;
        margin: 0.45rem 0 1.8rem;
    }

    .champ-connexion-4appuis {
        padding: 0.68rem 0.9rem;
        font-size: 0.86rem;
    }

    .bouton-valider-connexion-4appuis {
        padding: 0.77rem 1.35rem;
        font-size: 0.83rem;
    }

    .bouton-creation-compte-connexion-4appuis {
        padding: 0.68rem 1.35rem;
        font-size: 0.7rem;
    }
}

/* =====================================================================
   RESPONSIVE GRAND ECRAN (27" 4K et plus, a partir de 2400px de large)
   =====================================================================
   Seuil recalibre a partir d'une largeur logique reellement mesuree :
   ecran 27" 4K en 2560x1440 avec mise a l'echelle Windows a 100% =>
   largeur logique 2560px. Seuil fixe a min-width:2400px (et non 2560px
   pile) pour laisser une marge de securite sous la valeur mesuree -
   la largeur logique disponible peut etre legerement inferieure a la
   resolution nominale selon le navigateur (barre de defilement, etc.).
   Sur un tres grand ecran, l'encart en taille "desktop" par defaut
   parait perdu/trop petit au milieu de l'espace disponible : on
   l'agrandit, dans les memes proportions que le reste du site (logo,
   titres, champs, boutons) - ratio d'environ +24% par rapport a la
   taille de base (etait +40% dans une iteration precedente, juge trop
   imposant).
   ===================================================================== */
@media (min-width: 2400px) {

    .carte-connexion-4appuis {
        max-width: 520px;
        padding: 3.4rem 3rem;
    }

    .logo-connexion-4appuis {
        width: 290px;
        margin-bottom: 1.85rem;
    }

    .separateur-connexion-4appuis {
        width: 200px;
        margin-bottom: 1.7rem;
    }

    .titre-connexion-4appuis {
        font-size: 1.85rem;
    }

    .sous-titre-connexion-4appuis {
        font-size: 1.1rem;
        margin: 0.6rem 0 2.5rem;
    }

    .champ-connexion-4appuis {
        padding: 0.9rem 1.25rem;
        font-size: 1.15rem;
    }

    .bouton-valider-connexion-4appuis {
        padding: 1.05rem 1.85rem;
        font-size: 1.1rem;
    }

    .bouton-creation-compte-connexion-4appuis {
        padding: 0.9rem 1.85rem;
        font-size: 0.95rem;
    }
}