/* ==========================================================================
CANINOVA — PAGE CONNEXION
Spécifique à page-connexion.php. Tout ce qui est générique vient de
style.css, css/components.css et css/header-footer.css.
Cette page n'affiche ni en-tête ni pied de page : elle occupe toute la
hauteur de la fenêtre, en deux panneaux (marque / formulaire).
========================================================================== */
/* ==========================================================================
OSSATURE DEUX PANNEAUX
========================================================================== */
.cn-connexion {
display: grid;
grid-template-columns: 1fr;
min-height: 100vh;
min-height: 100svh; /* évite la barre d'adresse mobile */
}
@media (min-width: 900px) {
.cn-connexion {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
}
/* ==========================================================================
PANNEAU DE MARQUE
Le fond et le contexte sombre viennent de .cn-bg-teal + .cn-dark : ici on
ne gère que la répartition verticale logo / accroche / mention.
========================================================================== */
.cn-connexion__brand {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 40px;
padding: 44px;
}
/* L'accroche reste sur trois lignes environ, comme dans la maquette. */
.cn-connexion__title {
max-width: 20ch;
}
/* ==========================================================================
PANNEAU FORMULAIRE
========================================================================== */
.cn-connexion__form-col {
display: flex;
align-items: center;
justify-content: center;
padding: 44px var(--cn-gutter);
background: var(--cn-cream);
}
.cn-connexion__card {
width: 100%;
max-width: 380px;
}
.cn-connexion__tabs {
margin-bottom: 26px;
}
.cn-connexion__heading {
margin-bottom: 20px;
}
/* Contrat JS : c'est la classe .is-active — posée par js/functions.js et par
js/cn-ui.js — qui rend un panneau visible. Sans cette règle, les deux
panneaux s'afficheraient l'un sous l'autre. */
.cn-connexion .ep-auth-panel {
display: none;
}
.cn-connexion .ep-auth-panel.is-active {
display: block;
}
/* Lien discret sous le formulaire (« Mot de passe oublié ? »). */
.cn-connexion__link {
font-size: var(--cn-t-card);
color: var(--cn-text-3);
}
.cn-connexion__link:hover {
color: var(--cn-terracotta);
}
.cn-connexion__legal a {
text-decoration: underline;
text-underline-offset: 2px;
}
/* ==========================================================================
FORMULAIRE DE CONNEXION NATIF (wp_login_form)
WordPress génère ce markup : le template ne peut ni ajouter de classe ni
changer la structure (cf. audit page-connexion.json / jsContract — « la
nouvelle CSS doit les cibler explicitement »). On rebranche donc les
sélecteurs WordPress sur les tokens du design system. C'est le seul endroit
du thème où l'on redéclare l'apparence d'un champ sans passer par
.cn-label / .cn-input.
========================================================================== */
.cn-connexion #loginform {
display: flex;
flex-direction: column;
gap: 16px;
}
.cn-connexion #loginform p {
margin: 0;
}
/* Équivalent de .cn-label */
.cn-connexion #loginform label {
display: block;
font-size: 0.81rem;
font-weight: 600;
color: var(--cn-text);
margin-bottom: 6px;
}
/* Équivalent de .cn-input */
.cn-connexion #user_login,
.cn-connexion #user_pass {
width: 100%;
font-family: var(--cn-font-body);
font-size: var(--cn-t-sm);
color: var(--cn-text);
background: var(--cn-white);
border: 1px solid var(--cn-border-3);
border-radius: 11px;
padding: 13px 14px;
transition: border-color var(--cn-ease), box-shadow var(--cn-ease);
}
.cn-connexion #user_login:focus,
.cn-connexion #user_pass:focus {
outline: none;
border-color: var(--cn-teal);
box-shadow: 0 0 0 3px var(--cn-teal-soft);
}
/* Ligne « Se souvenir de moi » : le label enveloppe la case, il ne peut donc
pas recevoir la graduation de libellé ci-dessus. */
.cn-connexion #loginform .login-remember label {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 0;
font-size: var(--cn-t-meta);
font-weight: 400;
color: var(--cn-text-3);
cursor: pointer;
}
/* accent-color recolore la case native : pas de case redessinée à maintenir. */
.cn-connexion #rememberme {
width: 16px;
height: 16px;
flex-shrink: 0;
accent-color: var(--cn-teal);
cursor: pointer;
}
/* Équivalent de .cn-btn--primary + .cn-btn--block, sur un
que le template ne peut pas classer. */
.cn-connexion #wp-submit {
display: block;
width: 100%;
font-family: var(--cn-font-body);
font-size: var(--cn-t-sm);
font-weight: 600;
line-height: 1.2;
text-align: center;
color: var(--cn-white);
background: var(--cn-terracotta);
border: 1px solid transparent;
border-radius: var(--cn-r-md);
box-shadow: var(--cn-shadow-cta);
padding: 14px 24px;
cursor: pointer;
transition: background-color var(--cn-ease), transform var(--cn-ease);
}
.cn-connexion #wp-submit:hover {
background: var(--cn-terracotta-dark);
}
.cn-connexion #wp-submit:active {
transform: translateY(1px);
}
/* ==========================================================================
FORMULAIRE D'INSCRIPTION (AJAX)
Les champs utilisent .cn-field / .cn-label / .cn-input ; seuls le honeypot
et la classe d'état des messages sont propres à cette page.
========================================================================== */
/* Honeypot anti-spam : hors écran plutôt que display:none, pour rester
soumis avec le formulaire tout en étant inaccessible aux humains.
Le conteneur porte aria-hidden et le champ tabindex="-1". */
.cn-connexion .ep-register-honeypot {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
/* Le message de succès vit hors du