/* login.css — page de connexion.
   Deux panneaux : le blason à gauche sur fond marine, la saisie à droite
   sur papier. Sur mobile, le blason passe en bandeau réduit. */

.cx {
	min-height: 100vh;
	min-height: 100dvh;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	grid-template-areas:
		"scene panneau"
		"identite panneau";
	grid-template-rows: 1fr auto;
}
.cx__scene { grid-area: scene; }
.cx__identite { grid-area: identite; }
.cx__panneau { grid-area: panneau; }

/* --- L'identité de l'établissement : blason et nom ---
   Jamais posée sur les visages, jamais superposée à elle-même. */
.cx__identite {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	padding: var(--e-5) var(--e-5) var(--e-8);
	background: var(--sa-paper);
	position: relative;
	z-index: 2;
}

/* --- Panneau illustré ------------------------------------------------
   Une cour d'établissement en pastel occupe tout le panneau ; le blason
   n'est plus qu'un médaillon posé dessus. Un aplat marine plein écran
   faisait sévère, et le blason agrandi à 340 px écrasait le reste. */

.cx__scene {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--e-5);
	padding: var(--e-10);
	overflow: hidden;
	background: var(--sa-paper);
}

.cx__fond-dessin,
.cx__fond-photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Le voile pastel : il reprend la couleur de l'établissement, assez
   dilué pour que l'illustration reste lisible, assez présent pour que le
   médaillon et le nom se détachent. */
.cx__voile {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.22) 0%,
			rgba(255, 255, 255, 0.46) 70%,
			color-mix(in srgb, var(--sa-paper) 70%, transparent) 100%
		),
		color-mix(in srgb, var(--sa-navy) 18%, transparent);
}

/* --- Le médaillon ----------------------------------------------------
   Une seule variable gouverne tout : le diamètre. Largeur et hauteur sont
   posées explicitement, sans aspect-ratio ni marge en pourcentage — ces
   deux mécanismes se combinaient mal et donnaient une ellipse démesurée.
   L'image est dimensionnée sur la même variable, donc jamais désaccordée
   de son cercle. */

.cx__medaillon {
	--d: 132px;
	position: relative;
	width: var(--d);
	height: var(--d);
	flex: 0 0 var(--d);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 10px 28px rgba(27, 35, 49, 0.16);
	/* Le médaillon chevauche la scène qui le précède. */
	margin-top: calc(var(--d) / -2);
	/* Les deux enfants sont superposés au centre : le blason par-dessus
	   les initiales, qui ne se voient donc que s'il manque. */
	display: grid;
	grid-template: "pile" 1fr / 1fr;
	place-items: center;
	overflow: hidden;
}

.cx__medaillon > * { grid-area: pile; }

.cx__logo {
	/* 78 % du diamètre : le blason respire sans paraître perdu. */
	width: calc(var(--d) * 0.78);
	height: calc(var(--d) * 0.78);
	object-fit: contain;
}

.cx__initiales {
	font-family: var(--police-display);
	font-size: calc(var(--d) * 0.30);
	font-weight: 800;
	color: var(--sa-navy);
	letter-spacing: 0.04em;
	opacity: 0.5;
}

.cx__enseigne {
	margin: 0;
	text-align: center;
}
.cx__enseigne strong {
	display: block;
	font-family: var(--police-display);
	font-size: 1.1rem;
	color: var(--sa-navy);
	letter-spacing: 0.04em;
}
.cx__enseigne span {
	font-size: var(--t-xs);
	color: var(--sa-navy-soft);
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

/* --- La marque, sur le panneau de saisie --- */
.cx__marque {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin-bottom: var(--e-5);
}
.cx__marque-symbole { width: 54px; height: 54px; flex: none; }
.cx__marque-symbole svg { width: 100%; height: 100%; }
@font-face {
	font-family: 'JCF Marque';
	src: url('../fonts/marque.woff2') format('woff2');
	font-weight: 400 700;
	font-display: swap;
}

.cx__marque-nom {
	font-family: 'JCF Marque', var(--police-display);
	font-size: 1.45rem;
	font-weight: 700;
	letter-spacing: -0.005em;
	color: var(--sa-ink);
	line-height: 1.1;
}
.cx__marque-ext { color: #17685C; }
.cx__marque-nom small {
	display: block;
	font-family: var(--police-texte);
	font-size: var(--t-xs);
	font-weight: 600;
	color: var(--sa-navy-soft);
	letter-spacing: 0;
}

/* --- Panneau saisie --- */

.cx__panneau {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--e-12) clamp(var(--e-6), 6vw, var(--e-16));
	background: var(--sa-paper);
}

.cx__boite { width: 100%; max-width: 27rem; }

.cx__eyebrow {
	font-family: var(--police-display);
	font-size: var(--t-s);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sa-navy-soft);
	margin: 0 0 var(--e-6);
	display: flex;
	gap: var(--e-2);
	flex-wrap: wrap;
}

.cx__ville::before { content: "— "; }

.cx__intro {
	color: var(--sa-navy-soft);
	margin: var(--e-4) 0 var(--e-8);
	font-size: var(--t-s);
}

.cx__alerte {
	border-left: 4px solid var(--sa-alerte);
	background: #fff;
	color: var(--sa-alerte);
	padding: var(--e-3) var(--e-4);
	margin: 0 0 var(--e-6);
	font-size: var(--t-s);
}

/* --- Champs --- */

.champ { margin-bottom: var(--e-4); }

.champ__label {
	display: block;
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sa-navy);
	margin-bottom: var(--e-2);
}

.champ__saisie {
	width: 100%;
	padding: var(--e-3) var(--e-4);
	font: inherit;
	color: var(--sa-ink);
	background: #fff;
	border: var(--filet);
	border-radius: var(--rayon);
	transition: border-color var(--transition);
	/* 16px minimum : en dessous, iOS zoome sur la saisie. */
	font-size: max(16px, var(--t-m));
}

.champ__saisie:hover { border-color: var(--sa-navy-soft); }
.champ__saisie:focus { border-color: var(--sa-navy); outline-offset: 1px; }

.cx__bouton {
	width: 100%;
	margin-top: var(--e-4);
	padding: var(--e-3) var(--e-4);
	font-family: var(--police-display);
	font-size: var(--t-l);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
	background: var(--sa-navy);
	border: 2px solid var(--sa-navy);
	border-radius: var(--rayon);
	cursor: pointer;
	transition: background var(--transition), border-color var(--transition);
}

.cx__bouton:hover { background: var(--sa-navy-deep); border-color: var(--sa-navy-deep); }
.cx__bouton:active { transform: translateY(1px); }

.cx__aide {
	margin: var(--e-6) 0 0;
	font-size: var(--t-s);
	color: var(--sa-navy-soft);
}

.cx__pied {
	margin-top: var(--e-12);
	display: flex;
	gap: var(--e-3);
	align-items: center;
	font-size: var(--t-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sa-navy-soft);
}

/* --- Tablette et mobile --- */

@media (max-width: 860px) {
	/* Une seule colonne : le bandeau annonce l'établissement sans
	   repousser le formulaire sous la ligne de flottaison. */
	.cx {
		grid-template-columns: 1fr;
		grid-template-areas: "scene" "identite" "panneau";
		grid-template-rows: auto auto 1fr;
	}

	.cx__scene { min-height: 26vh; max-height: 30vh; padding: 0; }
	.cx__medaillon { --d: 104px; }
	.cx__enseigne strong { font-size: 0.98rem; }
	.cx__marque-symbole { width: 44px; height: 44px; }
	.cx__marque-nom { font-size: 1.15rem; }

	.cx__panneau { padding: var(--e-8) var(--e-6) var(--e-12); }
	.cx__boite { max-width: none; }
	.cx__pied { margin-top: var(--e-8); }
}

/* --- Harmonisation avec le reste du produit (police unique, angles
   arrondis, plume et devise). Le repère visuel doit être le même dès la
   connexion : c'est le premier écran que voient les 400 élèves. --- */
.cx__eyebrow { font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: var(--t-xs); color: var(--sa-navy-soft); }
.cx__boite { border-radius: 18px; }
.cx__champ input, .cx input[type="text"], .cx input[type="password"] { border-radius: 10px; font-size: max(16px, 1rem); }
.cx .btn, .cx button[type="submit"] { border-radius: 999px; font-family: var(--police-texte); font-weight: 700; text-transform: none; letter-spacing: 0; }
.cx__erreur { border-radius: 10px; }

/* --- Variante « photo d'établissement » ------------------------------
   Une photo de groupe est très large : la faire tenir dans un panneau
   vertical n'en montrerait qu'une tranche, et couperait les visages. La
   page passe donc sur une seule colonne, la photo en bandeau. */

.cx--photo {
	grid-template-columns: 1fr;
	grid-template-areas: "scene" "identite" "panneau";
	grid-template-rows: auto auto 1fr;
}

.cx--photo .cx__scene {
	aspect-ratio: 1905 / 500;
	max-height: 38vh;
	min-height: 170px;
	padding: 0;
}

.cx--photo picture,
.cx--photo .cx__fond-photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.cx--photo .cx__fond-photo { object-fit: cover; object-position: center 38%; }

/* Le voile ne sert plus à faire lire du texte sur la photo — il n'y en a
   plus. Il fond simplement le bas de l'image dans le panneau, pour que la
   jonction ne soit pas une ligne nette en travers des visages. */
.cx--photo .cx__voile {
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0) 55%,
		color-mix(in srgb, var(--sa-paper) 55%, transparent) 82%,
		var(--sa-paper) 100%
	);
}

.cx--photo .cx__identite { padding-bottom: var(--e-5); }

.cx--photo .cx__panneau {
	align-items: center;
	padding-top: var(--e-4);
}
.cx--photo .cx__boite { max-width: 27rem; }

@media (max-width: 860px) {
	.cx--photo .cx__scene { max-height: 28vh; }
}