/* ==========================================================================
   PEG-4721 — Style partage entre les ecrans d'authentification :
   connexion (#formulaire, module Authentication), "mot de passe oublie"
   et reinitialisation (#bloc_formulaire, Front\Home). Auparavant duplique
   entre authentication.css et home.css — deux sources de verite qui ont
   deja divergees deux fois pendant ce ticket (carte grise vs blanche,
   bouton bleu vs rose...). Une seule source ici ; les ids different par
   page (markup legacy distinct), donc les selecteurs sont groupes par
   variante plutot qu'unifies en une seule classe partagee.
   S'applique a TOUTE taille d'ecran (comme le reste de ces ecrans) : la
   mobile-vs-desktop ne doit differer que sur la mise en page qui deborde
   reellement (largeurs fixes), pas sur les couleurs/styles.
   ========================================================================== */

body:has(#formulaire),
body:has(#bloc_formulaire) {
    font-family: Arial, sans-serif;
    font-size: 10pt;
    color: #1f1f1f;
    background: #f4f5f7;
    /* margin/padding: repris de l'ancienne regle body d'authentication.css.
       Indispensable sur les pages de login standalone (index.phtml), qui ne
       chargent PAS layout.css et donc pas son reset `*{margin:0;padding:0}` :
       sans ca le body garde la marge UA de 8px et le bandeau cookies en 100vw
       (rendu hors Front uniquement) deborde de 8px vers la droite. */
    margin: 0;
    padding: 0;
}

/* Carte */
#formulaire,
#bloc_formulaire {
    box-sizing: border-box;
    /* #bloc_formulaire porte encore une largeur fixe desktop (320px,
       home.css) plus specifique qu'un simple max-width -> width explicite
       ici pour vraiment la remplacer (sinon le bouton "Reinitialiser"
       hérite d'un parent trop etroit et parait rétréci, retour client). */
    width: 100%;
    max-width: 400px;
    margin: 24px auto;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .08);
    padding: 28px 24px;
    font-size: 14px;
    font-weight: normal;
}

/* le <form> lui-meme (#formulaire_demande_mot_passe/#formulaire_nouveau_mot_passe)
   porte aussi un fond gris desktop (home.css) -> neutralise, la carte
   blanche est deja portee par #bloc_formulaire ci-dessus. */
#formulaire_demande_mot_passe,
#formulaire_nouveau_mot_passe {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
}

/* Logo en tete de carte (remplace le bandeau de marque : ces ecrans sont
   volontairement sans le header/tabbar du site, cf home.js pour la famille
   "mot de passe" et le rendu standalone de index.phtml pour la connexion) */
#header_new_mdp {
    text-align: center;
    margin-bottom: 20px;
}
#header_new_mdp img {
    max-width: 160px;
    width: 45%;
    height: auto;
}

/* Labels de champ */
.formulaire_label,
#identifiant {
    display: block;
    margin-bottom: 4px;
    color: #6f6f6f;
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .02em;
}

/* Champs de saisie */
#formulaire #login,
#formulaire #login_usurpe,
#formulaire #password,
#formulaire_demande_mot_passe #email,
#formulaire_nouveau_mot_passe #beneficiaire_password,
#formulaire_nouveau_mot_passe #beneficiaire_comparaison_password {
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 44px;
    padding: 0 12px;
    margin: 6px 0 18px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px; /* evite le zoom auto iOS au focus (< 16px) */
    line-height: 44px;
    color: #2a2f36;
    background: #fafafa;
}
#formulaire #login:focus,
#formulaire #password:focus,
#formulaire_demande_mot_passe #email:focus,
#formulaire_nouveau_mot_passe #beneficiaire_password:focus,
#formulaire_nouveau_mot_passe #beneficiaire_comparaison_password:focus {
    outline: none;
    border-color: #e7017c;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(231, 1, 124, .12);
}

/* Bouton primaire (rose CASCIE), pleine largeur. Meme rendu au repos et au
   survol : le "hover" tactile reste colle apres le tap sur mobile (bug
   connu WebKit/Chrome) -> pas de flash bleu/blanc a la desktop d'origine. */
.bleu_c,
#bouton_envoi_email,
#demande_nouveau_password {
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    width: 100%;
    height: 44px;
    padding: 0 24px;
    border: 0;
    border-radius: 8px;
    background-color: #e7017c;
    color: #fff;
    font-family: 'klavika_bold', Arial, sans-serif;
    font-weight: bold;
    font-size: 15px;
    margin: 0 auto;
    outline: none;
    transition: background-color .15s;
}
/* focus clavier/tap : anneau rose discret plutot que l'anneau bleu par
   defaut du navigateur, qui clashait avec le fond rose (retour client). */
.bleu_c:not([data-id="demandeNouveauMotPasse"]):focus,
#bouton_envoi_email:focus,
#demande_nouveau_password:focus {
    outline: none !important;
    border: 0 !important;
    width: 100% !important;
    height: 44px !important;
    box-shadow: 0 0 0 3px rgba(231, 1, 124, .35);
}
/* !important : home.css porte encore un vieux :hover desktop
   (border:2px solid #3399FF, width:190px, height:25/30px, cf retour
   client "le bouton devient moche" au clic) que ces regles doivent
   gagner dans tous les cas, peu importe l'ordre de chargement des
   fichiers sur chaque page. */
.bleu_c:not([data-id="demandeNouveauMotPasse"]):hover,
#bouton_envoi_email:hover,
#demande_nouveau_password:hover {
    background-color: #c40067 !important;
    border: 0 !important;
    color: #fff !important;
    width: 100% !important;
    height: 44px !important;
    font-family: 'klavika_bold', Arial, sans-serif !important;
    font-size: 15px !important;
    padding: 0 24px !important;
    margin: 0 auto !important;
}

/* Lien secondaire discret ("Mot de passe oublie", "Annuler") */
.bleu_c[data-id="demandeNouveauMotPasse"],
#remember a {
    width: auto;
    background: transparent;
    color: #6f6f6f;
    font-weight: normal;
    font-family: Arial, sans-serif;
    font-size: 13px;
    text-decoration: underline;
    padding: 0;
    height: auto;
    display: inline;
}
.bleu_c[data-id="demandeNouveauMotPasse"]:hover,
#remember a:hover {
    background: transparent;
    color: #e7017c;
}

/* Note secondaire en bas de carte (avertissement blocage / annulation) */
.formulaire_avertissement,
#remember {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #f0f0f0;
    color: #8a8a8a;
    font-weight: normal;
    font-size: 12px;
    line-height: 1.5;
}

#title_h2,
#title_h2_center {
    border-bottom: 0;
    font-size: 16px;
    color: #2a2f36;
    margin-bottom: 20px;
    font-weight: normal;
    text-align: center;
}