/**
 * La porte d'entrée unique, /connexion/.
 *
 * Charte reprise de `parent-vitrine.css` : mêmes couleurs, mêmes rayons. Un
 * parent qui se connecte puis atterrit dans son espace ne doit pas avoir
 * l'impression de changer de site entre les deux écrans.
 *
 * 🔴 v2.0.177.0, ET CE COMMENTAIRE ÉTAIT DEVENU FAUX.
 *
 * La phrase ci-dessus était vraie le 2026-08-06 et ne l'était plus le
 * 2026-08-19 : `parent-vitrine.css` est passé en NASApunk Light le matin même,
 * sur décision de Patrice, pendant que cette feuille-ci gardait l'ancienne
 * palette, crème #f6f1e8 plus navy #26385f plus corail #c8213a.
 *
 * La porte d'entrée était donc devenue le DERNIER écran à porter la palette
 * que l'on venait justement de retirer partout ailleurs. Un parent changeait
 * de monde en franchissant sa propre porte.
 *
 * Les VALEURS sont alignées sur `parent-vitrine.css`. Les NOMS ne bougent pas :
 * 229 lignes s'y réfèrent, et un renommage n'aurait rien apporté.
 *
 * ⚠️ Les jetons sont redéclarés ici, pas importés : cette page se rend HORS
 * du thème et ne peut compter sur aucune feuille chargée ailleurs. C'est le
 * prix de l'immunité à BuddyBoss, et il est petit.
 *
 * @since 2.0.153.0
 */

.aca-cx {
	--ep-navy: #314B7A;
	--ep-navy-deep: #1B2A47;
	--ep-coral: #C32136;
	--parent-accent: #FFB612;
	--parent-accent-deep: #855B00;
	--parent-accent-soft: #FFF4CF;
	--parent-accent-rgb: 255, 182, 18;
	/* Aliases transitoires : cette feuille partage encore les noms historiques
	   avec la coquille parent, sans recolorer la vue enfant. */
	--ep-gold: var(--parent-accent);
	--ep-gold-ink: var(--parent-accent-deep);
	/* Le turquoise sort de la charte NASApunk : il devient le navy. */
	--ep-turquoise: #314B7A;
	--ep-cream: #F4F5F7;
	--ep-paper: #FFFFFF;
	--ep-ink: #1B2A47;
	--ep-muted: rgba(27, 42, 71, 0.65);
	--ep-line: rgba(27, 42, 71, 0.14);
	--ep-navy-rgb: 27, 42, 71;
	--ep-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
	/* Un filet d'un pixel, jamais une ombre décalée : NASApunk est à plat. */
	--ep-shadow: 0 0 0 1px rgba(27, 42, 71, 0.08);

	margin: 0;
	padding: 0;
	background:
		radial-gradient(circle at 8% 4%, rgba(255, 182, 18, .18), transparent 26rem),
		radial-gradient(circle at 95% 92%, rgba(49, 75, 122, .16), transparent 30rem),
		var(--ep-cream);
	color: var(--ep-ink);
	font-family: var(--ep-sans);
	min-height: 100vh;
}

.cx-page {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(20px, 4vw, 52px);
	box-sizing: border-box;
}

.cx-shell {
	position: relative;
	width: min(560px, 100%);
	overflow: hidden;
	border: 1px solid rgba(27, 42, 71, .12);
	border-radius: 26px;
	background: var(--ep-paper);
	box-shadow: 0 28px 80px rgba(27, 42, 71, .16);
}
.cx-topline {
	padding: 26px 30px 24px;
	border-bottom: 1px solid var(--ep-line);
	background: linear-gradient(135deg, #fff9e8, #fff 68%);
}

.cx-marque {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: var(--ep-navy-deep);
	font-weight: 800;
	letter-spacing: -.01em;
}
.cx-logo {
	display: grid;
	place-items: center;
	width: 66px;
	height: 66px;
	border: 1px solid rgba(27, 42, 71, .12);
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 8px 20px rgba(27, 42, 71, .1);
}
.cx-logo img { width: 46px; height: 46px; display: block; }
.cx-marque > span:last-child { font-size: 1.18rem; }

.cx-quote {
	margin: 20px 0 0;
	padding-left: 18px;
	border-left: 3px solid var(--parent-accent);
}
.cx-quote p {
	margin: 0;
	color: var(--ep-navy-deep);
	font-size: .95rem;
	font-weight: 690;
	line-height: 1.42;
}
.cx-quote cite {
	display: block;
	margin-top: 6px;
	color: var(--ep-navy);
	font-size: .78rem;
	font-weight: 760;
	font-style: normal;
}

.cx-carte {
	background: var(--ep-paper);
	padding: 30px 36px 34px;
	box-sizing: border-box;
}
.cx-carte h1 {
	margin: 0 0 24px;
	font-size: clamp(1.55rem, 4vw, 1.9rem);
	letter-spacing: -.035em;
	line-height: 1.12;
	color: var(--ep-navy-deep);
}

/* ── L'écran du choix ─────────────────────────────────────────────────────── */

.cx-choix { display: grid; gap: 14px; }
@media (min-width: 560px) { .cx-choix { grid-template-columns: 1fr 1fr; } }

.cx-porte {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 22px 18px;
	border: 2px solid var(--ep-line);
	border-radius: 14px;
	background: #fff;
	text-decoration: none;
	color: inherit;
	transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.cx-porte:hover,
.cx-porte:focus-visible {
	border-color: var(--ep-navy);
	transform: translate(-2px, -2px);
	box-shadow: 5px 5px 0 rgba(var(--ep-navy-rgb), .12);
}
.cx-porte-icone { font-size: 1.7rem; line-height: 1; }
.cx-porte strong { font-size: 1.05rem; color: var(--ep-navy-deep); }
.cx-porte small { color: var(--ep-muted); line-height: 1.35; }
.cx-porte--parent:hover { border-color: var(--ep-navy); }
.cx-porte--enfant:hover { border-color: var(--ep-turquoise); }

/* L'écran enfant porte SA propre identité (fond sombre, épées), déjà approuvée
   et déjà vue par des enfants. On ne la redessine pas : on retire seulement
   notre cadre pour cette étape, sinon deux designs s'encadrent l'un l'autre. */
.cx-carte--enfant {
	max-width: 620px;
	background: none;
	border: 0;
	box-shadow: none;
	padding: 0;
}
.cx-carte--enfant > h1,
.cx-carte--enfant > .cx-retour { margin-left: 4px; }

.cx-retour {
	display: inline-block;
	margin: 0 0 12px;
	color: var(--ep-muted);
	text-decoration: none;
	font-size: .92rem;
}
.cx-retour:hover { color: var(--ep-navy); }

.cx-pied {
	margin: 20px 0 0;
	text-align: center;
	color: var(--ep-muted);
	font-size: .94rem;
}
.cx-pied a { color: var(--ep-coral); font-weight: 700; }

/* ── Les formulaires greffés ──────────────────────────────────────────────── */
/* Les raccourcis parent et enfant apportent leur propre habillage. On ne le  */
/* réécrit pas : on retire seulement ce qui suppose une page à eux (cadre,    */
/* fond, largeur), pour qu'ils s'assoient proprement dans notre carte.        */

.cx-greffe .pp-root,
.cx-greffe .pp-card,
.cx-greffe .acl-root {
	max-width: none;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}

/* Notre enveloppe porte déjà le titre et le logo : le héros du raccourci ferait
   un deuxième titre juste en dessous du nôtre, et la carte de citation
   allongeait l'écran sans rien apporter à quelqu'un qui veut juste entrer. */
.cx-greffe .pp-hero,
.cx-greffe .pp-hero-bg,
.cx-greffe .pp-quote-card { display: none; }

.cx-greffe input[type="email"],
.cx-greffe input[type="password"],
.cx-greffe input[type="text"] {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	min-height: 50px;
	border: 1px solid rgba(27, 42, 71, .22);
	border-radius: 13px;
	font-size: 1rem;
	font-family: inherit;
	background: #fff;
}
.cx-greffe input:focus {
	outline: none;
	border-color: var(--ep-navy);
	box-shadow: 0 0 0 4px rgba(var(--parent-accent-rgb), .22);
}
.cx-greffe button[type="submit"],
.cx-greffe .pp-btn {
	width: 100%;
	padding: 13px 18px;
	border: 0;
	min-height: 50px;
	border-radius: 13px;
	background: var(--parent-accent);
	color: var(--ep-navy-deep);
	font-weight: 800;
	font-size: 1rem;
	font-family: inherit;
	cursor: pointer;
}
.cx-greffe button[type="submit"]:hover,
.cx-greffe .pp-btn:hover { background: #f0aa00; }

@media (prefers-reduced-motion: reduce) {
	.cx-porte { transition: none; }
	.cx-porte:hover, .cx-porte:focus-visible { transform: none; }
}


.cx-greffe .pp-forgot {
	font-size: .88rem;
	color: var(--ep-muted);
	line-height: 1.4;
}
.cx-greffe .pp-form { margin: 0; }
.cx-greffe label,
.cx-greffe .pp-label { display: block; margin: 0 0 7px; font-weight: 750; color: var(--ep-navy-deep); }
.cx-greffe .pp-field-help {
	margin: -3px 0 8px;
	color: var(--ep-muted);
	font-size: .79rem;
	line-height: 1.4;
}
.cx-greffe .pp-input + .pp-label,
.cx-greffe .pp-password-field + .pp-btn { margin-top: 18px; }

.cx-greffe .pp-password-field { position: relative; }
.cx-greffe .pp-password-field .pp-input { padding-right: 88px; }
.cx-greffe .pp-password-toggle {
	position: absolute;
	right: 7px;
	top: 50%;
	width: auto;
	min-height: 36px;
	padding: 0 10px;
	transform: translateY(-50%);
	border: 0;
	border-radius: 9px;
	background: transparent;
	color: var(--ep-navy);
	font: inherit;
	font-size: .78rem;
	font-weight: 800;
	cursor: pointer;
}
.cx-greffe .pp-password-toggle:hover { background: var(--ep-cream); }
.cx-greffe .pp-password-toggle:focus-visible {
	outline: 2px solid var(--ep-navy);
	outline-offset: 1px;
}

.cx-greffe .pp-signup {
	display: grid;
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--ep-line);
	text-align: center;
}
.cx-greffe .pp-signup-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 18px;
	border: 2px solid var(--ep-navy);
	border-radius: 13px;
	background: #fff;
	color: var(--ep-navy-deep);
	font-weight: 850;
	text-decoration: none;
	transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.cx-greffe a.pp-signup-cta:hover,
.cx-greffe a.pp-signup-cta:focus-visible {
	background: var(--parent-accent-soft);
	box-shadow: 4px 4px 0 var(--ep-navy);
	transform: translate(-2px, -2px);
}
.cx-greffe .pp-signup-cta.est-ferme {
	border-style: dashed;
	color: var(--ep-muted);
	background: var(--ep-cream);
}

/* Le mot pour l'enfant qui suit un vieux lien : il doit se distinguer de la
   consigne normale, sinon il passe pour une instruction qui le concerne. */
.cx-sous--enfant {
	background: rgba(70, 184, 176, .12);
	border-left: 3px solid var(--ep-turquoise);
	padding: 10px 14px;
	border-radius: 8px;
	color: var(--ep-ink);
}

/* ══════════════════════════════════════════════════
   LA PORTE, D'APRÈS LE MODÈLE ENVOYÉ PAR PATRICE (v2.0.177.0)
   Le 2026-08-19 : « je voudrais qu'il ressemble à ça, garde un peu les
   couleurs et le style, mais avec ce code-là ».

   ✅ Ce qu'on prend au modèle : le carré d'icône en tête, les icônes DANS les
   champs, le séparateur pointillé, les trois marques en carrés, les coins
   très arrondis, le bouton pleine largeur.

   ⛔ Ce qu'on ne prend PAS, et pourquoi :
     · le dégradé bleu ciel et le bouton en dégradé gris : NASApunk Light est
       à plat, c'est la charte tranchée par Patrice le matin même;
     · les logos servis par `svgrepo.com` : une image d'un autre site prévient
       ce site qu'une famille ouvre sa session, et elle ne s'afficherait pas
       de toute façon. Les trois marques sont écrites en SVG dans le PHP;
     · « Make a new doc to bring your words, data and teams together » : du
       remplissage de logiciel d'entreprise, qui ne veut rien dire ici;
     · le `alert("Sign in successful")` du modèle : une fausse connexion.
       La vraie serrure reste `[aca_parent_login]`, intacte.
   ══════════════════════════════════════════════════ */

/* Le carré d'icône en tête de carte. */
.cx-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 0 auto 18px;
	border-radius: 18px;
	border: 1px solid var(--ep-line);
	background: var(--ep-paper);
	color: var(--ep-navy);
}

/* Les icônes DANS les champs, comme le modèle. Elles sont posées en fond :
   le gabarit des champs appartient à la serrure, et on n'y touche pas.
 *
 * 🪤 ET C'EST ÉCRIT SUR L'IDENTIFIANT, PAS SUR LA CLASSE, POUR UNE RAISON
 * MESURÉE. Premier jet écrit sur `.aca-cx .pp-input` : les enveloppes se
 * répétaient en mosaïque sur toute la largeur du champ, vu à l'écran. La
 * serrure `[aca_parent_login]` imprime sa PROPRE feuille en ligne, plus bas
 * dans la page que celle-ci, avec un `background:` RACCOURCI qui remet la
 * répétition, la position et la taille à zéro. Mesure : `padding-left` rendait
 * 14px au lieu de 38, donc la règle ne s'appliquait pas du tout.
 * Un identifiant l'emporte sur n'importe quel nombre de classes, quel que soit
 * l'ordre des feuilles. Tout ce qui doit tenir vit donc ici. */
#pp-identifier,
#pp-password {
	border-radius: 12px;
	padding-left: 38px;
	background-repeat: no-repeat;
	background-position: 13px 50%;
	background-size: 16px 16px;
}
#pp-identifier {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2363708A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E");
}
#pp-password {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2363708A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}
.aca-cx .pp-btn-primary { border-radius: 12px; }

/* ── Les trois marques ─────────────────────────────────────────────── */
.cx-social {
	display: flex;
	flex-direction: column;
	margin-top: 18px;
}
.cx-social-ou {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 12px;
	color: var(--ep-muted);
	font-size: .78rem;
}
.cx-social-ou::before,
.cx-social-ou::after {
	content: "";
	flex: 1;
	/* Pointillé, comme le modèle. */
	border-top: 1px dashed var(--ep-line);
}
.cx-social-rangee {
	display: flex;
	gap: 10px;
}
.cx-social-btn {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	/* 48 px de haut : le seuil de confort tactile, bien au-dessus des 24 px
	   exigés par le niveau AA. Trois carrés serrés se ratent au doigt. */
	min-height: 48px;
	border: 1px solid var(--ep-line);
	border-radius: 12px;
	background: var(--ep-paper);
	color: var(--ep-navy-deep);
	text-decoration: none;
	transition: border-color .12s ease, background .12s ease;
}
.cx-social-btn:hover,
.cx-social-btn:focus-visible {
	border-color: var(--ep-navy);
	background: var(--ep-cream);
}
.cx-social-btn:focus-visible {
	outline: 2px solid var(--ep-navy);
	outline-offset: 2px;
}
.cx-social-marque {
	display: flex;
	align-items: center;
}
.cx-social-nom { font-size: .82rem; font-weight: 760; }

@media (prefers-reduced-motion: reduce) {
	.cx-social-btn,
	.cx-greffe .pp-signup-cta { transition: none; }
	.cx-greffe a.pp-signup-cta:hover,
	.cx-greffe a.pp-signup-cta:focus-visible { transform: none; }
}

/* Un fournisseur pas encore branché : présent, montré, mais il ne fait pas
   semblant d'être une porte. Sans `href`, il sort aussi du parcours au clavier,
   donc personne ne le sélectionne pour rien. */
.cx-social-btn.est-a-venir {
	opacity: .45;
	cursor: default;
	background: var(--ep-cream);
}
.cx-social-btn.est-a-venir:hover {
	border-color: var(--ep-line);
	background: var(--ep-cream);
}

@media (max-width: 820px) {
	.cx-page { align-items: flex-start; padding: 16px; }
	.cx-shell { border-radius: 24px; }
}

@media (max-width: 520px) {
	.cx-page { padding: 0; }
	.cx-shell { min-height: 100vh; border: 0; border-radius: 0; box-shadow: none; }
	.cx-topline { padding: 22px; }
	.cx-logo { width: 54px; height: 54px; border-radius: 16px; }
	.cx-logo img { width: 38px; height: 38px; }
	.cx-marque > span:last-child { font-size: 1.1rem; }
	.cx-quote { margin-top: 18px; padding-left: 14px; }
	.cx-quote p { font-size: .84rem; }
	.cx-carte { padding: 26px 20px 34px; }
	.cx-carte h1 { margin-bottom: 22px; font-size: 1.55rem; }
	.cx-social-rangee { gap: 8px; }
	.cx-social-btn { gap: 6px; padding: 0 8px; }
	.cx-social-nom { font-size: .74rem; }
}