/**
 * Modal de connexion AJAX (visiteur non connecté).
 *
 * Overlay centré + panneau carte, tokens --cc-couleur-front-* alignés sur les
 * voisins (.cc-account-menu / .cc-offcanvas). CHARGÉ APRÈS base.css (dépendance
 * d'enqueue cc-base) : c'est ce qui fait gagner la règle anti-flash du déroulant
 * (égalité de spécificité → l'ordre source tranche).
 *
 * @file        css/cc-login-modal.css
 * @package     CC-Origine
 * @since       1.1.2
 * @version     1.1.2
 * @author      Microlibre <contact@microlibre.net>
 * @license     GPL-2.0+ https://www.gnu.org/licenses/gpl-2.0.html
 */

/* --- Overlay --- */
.cc-login-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1002; /* > header 1000, account-menu 1001, off-canvas 999 (cf. base.css) */
	display: none;
	/* Centrage tolérant au clavier mobile : ancrage haut + padding vertical pour
	   que le haut du panneau reste accessible quand le clavier réduit le viewport. */
	align-items: flex-start;
	justify-content: center;
	padding: 8vh 16px;
	background-color: rgba( 0, 0, 0, 0.5 );
	overflow-y: auto;
}

.cc-login-modal.is-open {
	display: flex;
}

body.cc-login-modal-open {
	overflow: hidden;
}

/* --- Panneau --- */
.cc-login-modal__panel {
	position: relative;
	width: 90%;
	max-width: 400px;
	padding: 28px 24px 24px;
	background-color: var(--cc-couleur-front-arriere-plan);
	border: 1px solid var(--cc-couleur-front-bordures);
	border-radius: 8px;
	box-shadow: 0 12px 32px var(--cc-couleur-front-ombre-legere);
}

.cc-login-modal__panel:focus {
	outline: none;
}

/* --- Bouton de fermeture (cible tactile ≥ 44×44) --- */
.cc-login-modal__close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 44px;
	height: 44px;
	padding: 0;
	font-size: 28px;
	line-height: 1;
	color: var(--cc-couleur-front-texte-principal);
	background: none;
	border: none;
	border-radius: 5px;
	cursor: pointer;
}

.cc-login-modal__close:hover,
.cc-login-modal__close:focus {
	color: var(--cc-couleur-front-primaire);
}

/* --- Titre --- */
.cc-login-modal__title {
	margin: 0 0 16px;
	padding-right: 36px; /* laisse la place au bouton de fermeture */
	font-size: 22px;
	color: var(--cc-couleur-front-texte-titres);
}

/* --- Zone d'erreur --- */
.cc-login-form__error {
	margin-bottom: 16px;
	padding: 10px 12px;
	font-weight: 600;
	color: var(--cc-couleur-front-forte-texte);
	background-color: var(--cc-couleur-front-forte);
	border-radius: 5px;
}

/* --- Champs --- */
.cc-login-form__field {
	margin: 0 0 14px;
}

.cc-login-form__field label {
	display: block;
	margin-bottom: 4px;
	font-size: 14px;
	color: var(--cc-couleur-front-texte-corps);
}

.cc-login-form__field input {
	width: 100%;
}

.cc-login-form__remember {
	margin: 0 0 16px;
	font-size: 14px;
}

.cc-login-form__remember label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

/* --- Bouton de soumission (cible tactile ≥ 44px) --- */
.cc-login-form__submit {
	display: block;
	width: 100%;
	min-height: 44px;
	padding: 11px 16px;
	font-size: 16px;
	font-weight: 600;
	color: var(--cc-couleur-front-primaire-texte);
	background-color: var(--cc-couleur-front-primaire);
	border: none;
	border-radius: 5px;
	cursor: pointer;
}

.cc-login-form__submit:hover,
.cc-login-form__submit:focus {
	filter: brightness( 0.95 );
}

.cc-login-form__submit:disabled {
	opacity: 0.6;
	cursor: default;
}

/* --- Lien mot de passe oublié --- */
.cc-login-form__lostpass {
	display: inline-block;
	margin-top: 14px;
	font-size: 14px;
	color: var(--cc-couleur-front-liens);
}

/* --- Anti-flash du déroulant compte (desktop) ---
   Au clic sur .cc-account-toggle, :focus-within peut faire brièvement apparaître
   le déroulant avant que le focus ne parte dans le modal. Le combinateur de frères
   ~ neutralise le menu (toggle et menu sont frères dans .cc-account). Spécificité
   0,3,0 = égale à .cc-account:focus-within .cc-account-menu de base.css → l'ordre
   source tranche, d'où le chargement APRÈS base.css (dépendance cc-base). Scopé
   desktop (seul endroit où le déroulant s'ouvre) et gardé par l'attribut
   data-cc-open-login (présent uniquement pour les déconnectés). */
@media ( min-width: 1200px ) {
	.cc-account-toggle[data-cc-open-login] ~ .cc-account-menu {
		display: none;
	}
}