/* ============================================================================
 * login_branding.css — Habillage PQO de la page de connexion Frappe (/login)
 * DIRECTION B — « Split-screen : panneau hero PQO à gauche, formulaire à droite »
 * v2.0.0 — 02/08/2026. Fichier AUTONOME (contient tout A + le panneau hero).
 *
 * Même véhicule et mêmes contraintes que la direction A :
 *   · hook natif `web_include_css` (hooks.py), statique, versionné — ADR-008/016 ;
 *   · tout scopé sous body:has(section.for-login) : web_include_css se charge sur
 *     TOUTES les pages website, le portail Jinja épicerie ne doit pas bouger ;
 *   · !important sur les couleurs (login.bundle.css a 4 classes de spécificité) ;
 *   · Inter auto-hébergée par le socle Frappe → aucun CDN, RGPD OK ;
 *   · ZÉRO image requise : le panneau est 100 % CSS (dégradés + trames + ::after).
 *     Pour y poser le logo/visuel PQO, décommenter le bloc « OPTION VISUEL » §2c
 *     et déposer UN seul fichier local (SVG de préférence) dans public/images/.
 *
 * Mécanique du split (sans toucher au HTML figé) :
 *   · le panneau = pseudo-élément ::before sur le BODY, en position:fixed —
 *     posé sur le body et non sur .for-login pour qu'il survive quand login.js
 *     masque la section (écrans #forgot / #signup / lien e-mail) ;
 *   · la carte est décalée par translateX sur .login-content — robuste quel que
 *     soit le centrage appliqué par le socle. Ne PAS transformer .for-login :
 *     un ancêtre transformé casserait le position:fixed du panneau.
 * ==========================================================================*/

:root {
	--pqo-blue: #144174;
	--pqo-blue-hover: #0d2e52;
	--pqo-blue-deep: #0a2547;
	--pqo-blue-tint: #eaf0f7;
	--pqo-gold: #dea505;
	--pqo-border: #d7d8dc;
	--pqo-ink: #1b2532;
	--pqo-muted: #6b7684;
	--pqo-radius: 12px;
	--pqo-panel-w: 46vw;   /* largeur du panneau hero */
	--pqo-shift: 23vw;     /* = moitié du panneau : recentre la carte à droite */
	--pqo-quote-fs: clamp(26px, 2.9vw, 46px);  /* corps de la citation */
	--pqo-ref-fs: clamp(13px, 1.05vw, 18px);   /* corps de la référence */
	/* Correction optique du logo : le fichier inclut l'épi de blé qui déborde en
	 * haut à droite, donc la boîte de l'image est plus large que le bloc texte
	 * « Pain Quotidien ». Centrée géométriquement, la marque paraît décalée à
	 * gauche. Correction désactivée pour l'instant (centrage géométrique) :
	 * la vraie solution est un fichier logo recadré au plus juste, prévu plus
	 * tard. Passer à ~7px si on veut compenser en attendant. */
	--pqo-logo-nudge: 0px;
}

/* ── 1. Fond du côté formulaire ───────────────────────────────────────────── */
body:has(section.for-login) {
	background: linear-gradient(180deg, #f3f6fa 0%, #fafafa 100%);
	background-attachment: fixed;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
	color: var(--pqo-ink);
}

/* ── 2. LE PANNEAU HERO (CSS pur) ─────────────────────────────────────────── */
/* 2a. Le panneau lui-même : bleu PQO profond + halos.
 * Intention : éviter l'aplat numérique. La profondeur vient de DEUX halos
 * (or tiède en haut-gauche, bleu clair en bas-droite) + une vignette large.
 * NB : une trame diagonale fine (2px/9px) était testée ici — retirée : sur les
 * grands écrans elle moirait (interférence rayures / grille de pixels). Si une
 * texture est souhaitée un jour, la faire à grande échelle (≥ 24px), jamais fine. */
body:has(section.for-login)::before {
	content: "";
	position: fixed;
	top: 0; bottom: 0; left: 0;
	width: var(--pqo-panel-w);
	z-index: 0;
	background:
		radial-gradient(760px 560px at 24% 16%, rgba(222, 165, 5, .22) 0%, rgba(222, 165, 5, 0) 64%),
		radial-gradient(980px 760px at 86% 94%, rgba(58, 122, 196, .40) 0%, rgba(58, 122, 196, 0) 62%),
		radial-gradient(120% 100% at 50% 50%, rgba(6, 24, 46, 0) 42%, rgba(6, 24, 46, .30) 100%),
		linear-gradient(155deg, var(--pqo-blue) 0%, var(--pqo-blue-deep) 100%);
	border-right: 3px solid var(--pqo-gold);
	box-shadow: 18px 0 48px -30px rgba(10, 37, 71, .55);
}

/* 2b. Le texte du hero : posé en ::after du body (aucun HTML ajouté).
 *     Le retour à la ligne vient de white-space:pre-line + \A.
 *
 * ⚠️ i18n (§9 du doc d'optimisation) : un texte dans `content:` n'est PAS
 *    extrait par `bench generate-pot-file` — il échappe au catalogue PO.
 *    Contournement natif : Frappe pose la langue de l'utilisateur sur
 *    <html lang="…">, on décline donc le `content` par :lang(). Ajouter une
 *    règle par langue activée. Le bloc ci-dessous est la valeur par défaut.
 *    Alternative si le nombre de langues grandit : passer au VISUEL SEUL
 *    (§2c, logo local sans texte) — zéro chaîne à traduire, option la plus sûre. */
body:has(section.for-login)::after {
	content: "« Mon œuvre\A est pour le roi ! »";
	position: fixed;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: var(--pqo-panel-w);
	z-index: 1;
	padding: 0 clamp(32px, 5vw, 76px);
	white-space: pre-line;
	text-align: center;
	text-wrap: balance;
	font-size: var(--pqo-quote-fs);
	line-height: 1.18;
	font-weight: 600;
	letter-spacing: -.02em;
	color: #fff;
	text-shadow: 0 2px 20px rgba(6, 24, 46, .35);
	pointer-events: none;
}

/* 2b-ter. La référence, en or, sous la citation.
 * Posée sur <html> car body::before (panneau) et body::after (citation) sont
 * déjà pris. <html> est toujours présent → la référence survit aux écrans
 * #forgot / #signup, comme le panneau.
 * L'offset vertical est exprimé en multiple du corps de la citation : la
 * référence reste solidaire du bloc quelle que soit la taille d'écran.
 * Pas de tiret cadratin : la référence se suffit à elle-même. */
html:has(section.for-login)::after {
	content: "Psaume 45:2";
	position: fixed;
	left: 0;
	top: 50%;
	transform: translateY(calc(-50% + 1.6 * var(--pqo-quote-fs)));
	width: var(--pqo-panel-w);
	z-index: 1;
	padding: 0 clamp(32px, 5vw, 76px);
	text-align: center;
	font-size: var(--pqo-ref-fs);
	font-style: italic;
	font-weight: 500;
	letter-spacing: .04em;
	color: var(--pqo-gold);
	pointer-events: none;
}

/* Déclinaisons par langue (html[lang] est posé par Frappe selon User.language).
 * Adapter la traduction du verset à la version biblique retenue par PQO. */
html:lang(en) body:has(section.for-login)::after {
	content: "“My work\A is for the king!”";
}
html:lang(en):has(section.for-login)::after { content: "Psalm 45:2"; }
html:lang(ar) body:has(section.for-login)::after {
	content: "«عملي\A للملك!»";
}
html:lang(ar):has(section.for-login)::after { content: "مزمور 45:2"; }

/* 2b-bis. RTL — si l'arabe est activé, le panneau bascule à droite.
 * Frappe pose dir="rtl" sur <html> pour les langues RTL (frappe.utils.is_rtl). */
html[dir="rtl"] body:has(section.for-login)::before,
html[dir="rtl"] body:has(section.for-login)::after,
html[dir="rtl"]:has(section.for-login)::after {
	left: auto;
	right: 0;
}
html[dir="rtl"] body:has(section.for-login)::before {
	border-right: none;
	border-left: 3px solid var(--pqo-gold);
	box-shadow: -18px 0 48px -30px rgba(10, 37, 71, .55);
}
html[dir="rtl"] body:has(section.for-login) .login-content {
	transform: translateX(calc(-1 * var(--pqo-shift)));
}

/* 2c. OPTION VISUEL — décommenter pour poser UNE image locale dans le panneau
 *     (logo blanc, photogramme, motif). Un seul fichier, hébergé dans l'app :
 *     apps/<app>/<app>/public/images/pqo-hero.svg → /assets/<app>/images/…
 *
 * body:has(section.for-login)::before {
 *   background-image:
 *     url("/assets/pharmacie/images/pqo-hero.svg"),
 *     radial-gradient(760px 560px at 24% 16%, rgba(222,165,5,.22) 0%, rgba(222,165,5,0) 64%),
 *     radial-gradient(980px 760px at 86% 94%, rgba(58,122,196,.40) 0%, rgba(58,122,196,0) 62%),
 *     linear-gradient(155deg, var(--pqo-blue) 0%, var(--pqo-blue-deep) 100%);
 *   background-repeat: no-repeat;
 *   background-position: center 18%, center, center, center;
 *   background-size: min(300px, 42%) auto, cover, cover, cover;
 * }
 */

/* 2d. Sélecteur de langue natif Frappe : le template login.html rend la navbar
 *     quand `show_language_picker` est vrai. Elle doit rester cliquable AU-DESSUS
 *     du panneau fixe, et son fond ne doit pas trancher sur le bleu. */
body:has(section.for-login) .navbar,
body:has(section.for-login) header .navbar {
	position: relative;
	z-index: 3;
	background: transparent !important;
	border-bottom: 0 !important;
}

/* ── 3. Centrage vertical + décalage de la carte vers la moitié droite ─────
 * Le socle Frappe n'assure PAS le centrage vertical de la carte : elle se cale
 * en haut de page. On centre donc explicitement sur la section elle-même.
 * ⚠️ Le transform reste sur .login-content, jamais sur .for-login : un ancêtre
 *    transformé recréerait un bloc conteneur et casserait le position:fixed
 *    du panneau. Ici .for-login ne reçoit que du flex — sans risque. */
body:has(section.for-login) section.for-login,
body:has(section.for-login) section.for-email-login,
body:has(section.for-login) section.for-forgot,
body:has(section.for-login) section.for-signup,
body:has(section.for-login) section.for-login-with-email-link {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 16px;
	box-sizing: border-box;
}
body:has(section.for-login) .login-content {
	position: relative;
	z-index: 2;
	margin: 0;
	transform: translateX(var(--pqo-shift));
}

/* ── 4. La carte ──────────────────────────────────────────────────────────────
 * En split-screen, la carte est plus « posée » : ombre douce, pas de liseré or
 * (l'or vit déjà dans le panneau) — on évite la redondance d'accent. */
body:has(section.for-login) .page-card {
	background-color: #fff !important;
	border: 1px solid #e4e8ee;
	border-radius: var(--pqo-radius);
	box-shadow:
		0 18px 40px -26px rgba(20, 65, 116, .20),
		0 2px 6px rgba(20, 22, 28, .04);
	padding: 36px 32px 32px;
	max-width: 400px;
}

/* ── 5. En-tête de la carte ───────────────────────────────────────────────────
 * Logo centré, titre + sous-titre centrés dessous. Posé explicitement plutôt
 * que laissé au socle : selon la version de Frappe, .page-card-head est parfois
 * aligné à gauche — on fige le rendu pour ne pas dépendre du socle. */
body:has(section.for-login) .page-card-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 14px;
	margin-bottom: 28px;
}
body:has(section.for-login) .page-card-head-text { text-align: center; width: 100%; }
body:has(section.for-login) .page-card-head img.app-logo {
	max-height: 72px; height: 72px; width: auto; margin: 0 auto; display: block;
	transform: translateX(var(--pqo-logo-nudge));
}
body:has(section.for-login) .page-card-head h4 {
	color: var(--pqo-blue);
	font-size: 22px;
	font-weight: 650;
	letter-spacing: -.015em;
	margin-bottom: 6px;
}
body:has(section.for-login) .page-card-subtitle {
	color: var(--pqo-muted);
	font-size: 13.5px;
	line-height: 1.5;
	text-wrap: pretty;
}

/* ── 6. Champs ────────────────────────────────────────────────────────────── */
body:has(section.for-login) .form-label {
	color: #4a5563; font-size: 12px; font-weight: 550; letter-spacing: .01em; margin-bottom: 7px;
}
body:has(section.for-login) .page-card-body .form-control {
	height: 44px;
	border: 1px solid var(--pqo-border) !important;
	border-radius: 10px !important;
	background: #fcfdfe !important;
	font-size: 14px;
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
body:has(section.for-login) .page-card-body .form-control:hover { border-color: #b9c2ce !important; }
body:has(section.for-login) .page-card-body .form-control:focus {
	background: #fff !important;
	border-color: var(--pqo-blue) !important;
	box-shadow: 0 0 0 3px rgba(20, 65, 116, .13) !important;
	outline: none;
}
body:has(section.for-login) .field-icon { color: #97a1ae; transition: color .15s ease; }
body:has(section.for-login) .form-control:focus ~ .field-icon { color: var(--pqo-blue); }
body:has(section.for-login) .toggle-password { cursor: pointer; }
body:has(section.for-login) .toggle-password:hover { color: var(--pqo-blue); }

/* ── 7. Boutons ───────────────────────────────────────────────────────────── */
body:has(section.for-login) .page-card-actions .btn-login,
body:has(section.for-login) .page-card-actions .btn-ldap-login {
	height: 44px;
	border-radius: 10px !important;
	background: var(--pqo-blue) !important;
	border-color: var(--pqo-blue) !important;
	color: #fff !important;
	font-size: 14px; font-weight: 550; letter-spacing: .01em;
	box-shadow: 0 6px 14px -6px rgba(20, 65, 116, .55);
	transition: background-color .15s ease, box-shadow .15s ease, transform .06s ease;
}
body:has(section.for-login) .page-card-actions .btn-login:hover,
body:has(section.for-login) .page-card-actions .btn-login:focus,
body:has(section.for-login) .page-card-actions .btn-ldap-login:hover,
body:has(section.for-login) .page-card-actions .btn-ldap-login:focus {
	background: var(--pqo-blue-hover) !important; color: #fff !important;
	box-shadow: 0 8px 18px -6px rgba(20, 65, 116, .6);
}
body:has(section.for-login) .page-card-actions .btn-login:active { transform: translateY(1px); }
body:has(section.for-login) .page-card-actions .btn-login:disabled {
	background: var(--pqo-blue) !important; opacity: .5; box-shadow: none;
}
/* ⚠️ .btn-office_365 n'existe qu'en PROD (provider configuré) : absent en dev. */
body:has(section.for-login) .page-card-actions .btn-login-option {
	height: 44px;
	border-radius: 10px !important;
	background: #fff !important;
	border: 1px solid var(--pqo-border) !important;
	color: var(--pqo-ink) !important;
	font-weight: 500;
	transition: border-color .15s ease, background-color .15s ease;
}
body:has(section.for-login) .page-card-actions .btn-login-option:hover {
	background: var(--pqo-blue-tint) !important; border-color: #b3c4d8 !important; color: var(--pqo-blue) !important;
}
/* Séparateur « ou », sans HTML supplémentaire. */
body:has(section.for-login) .page-card-actions .btn-login + .btn-login-option,
body:has(section.for-login) .page-card-actions .btn-login + .social-logins {
	position: relative; margin-top: 26px;
}
body:has(section.for-login) .page-card-actions .btn-login + .btn-login-option::before,
body:has(section.for-login) .page-card-actions .btn-login + .social-logins::before {
	content: "ou"; position: absolute; top: -17px; left: 50%; transform: translateX(-50%);
	padding: 0 10px; background: #fff; font-size: 11px; color: #9aa4b1;
	letter-spacing: .06em; text-transform: uppercase; z-index: 2;
}
body:has(section.for-login) .page-card-actions .btn-login + .btn-login-option::after,
body:has(section.for-login) .page-card-actions .btn-login + .social-logins::after {
	content: ""; position: absolute; top: -11px; left: 0; right: 0; height: 1px;
	background: #e9ecf1; z-index: 1;
}
body:has(section.for-login) .social-login-buttons { display: flex; flex-direction: column; gap: 8px; }

/* ── 8. Liens ─────────────────────────────────────────────────────────────── */
body:has(section.for-login) a { color: var(--pqo-blue); text-decoration: none; }
body:has(section.for-login) a:hover { color: var(--pqo-blue-hover); text-decoration: underline; }
body:has(section.for-login) .forgot-password-message > a,
body:has(section.for-login) .sign-up-message a,
body:has(section.for-login) .resend-link a { color: var(--pqo-blue) !important; font-weight: 500; }
body:has(section.for-login) .sign-up-message { color: var(--pqo-muted); margin-top: 22px; }

/* ── 9. Bandeaux et erreurs de champ ──────────────────────────────────────── */
body:has(section.for-login) .login-error-banner {
	border-radius: 10px; background: #fdf2f2; border: 1px solid #f3d0d0; color: #a8322d;
}
body:has(section.for-login) .login-success-banner {
	border-radius: 10px; background: var(--pqo-blue-tint); border: 1px solid #c6d6e8; color: var(--pqo-blue);
}
body:has(section.for-login) .field-error { color: #a8322d; font-size: 12px; }

/* ── 10. Responsive : sous 1024px le panneau passe en bandeau haut ────────── */
@media (max-width: 1024px) {
	:root { --pqo-panel-w: 100vw; --pqo-shift: 0px; }
	body:has(section.for-login)::before {
		bottom: auto; height: 188px; width: 100%;
		border-right: none; border-bottom: 3px solid var(--pqo-gold);
		box-shadow: 0 14px 34px -26px rgba(10, 37, 71, .5);
	}
	body:has(section.for-login)::after {
		top: 36px; height: auto; transform: none;
		width: 100%;
		text-align: center;
		font-size: clamp(20px, 4.4vw, 30px);
	}
	html:has(section.for-login)::after {
		top: 144px; transform: none; width: 100%; text-align: center;
	}
	body:has(section.for-login) section.for-login,
	body:has(section.for-login) section.for-email-login,
	body:has(section.for-login) section.for-forgot,
	body:has(section.for-login) section.for-signup,
	body:has(section.for-login) section.for-login-with-email-link {
		min-height: 0;
		align-items: flex-start;
		padding-top: 224px;
	}
	body:has(section.for-login) .login-content { transform: none; }
}
@media (max-width: 480px) {
	body:has(section.for-login) .page-card { padding: 28px 22px 24px; border-radius: 14px; }
	body:has(section.for-login) .page-card-head h4 { font-size: 20px; }
}

/* ── 11. Accessibilité ────────────────────────────────────────────────────── */
body:has(section.for-login) a:focus-visible,
body:has(section.for-login) .btn:focus-visible {
	outline: 2px solid var(--pqo-gold); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	body:has(section.for-login) * { transition: none !important; }
}