/* AyetamA Inscription : gabarit commun des pages du plugin (carte, boutons, champs).
 * Mobile d'abord. Chargé uniquement sur les pages qui contiennent un shortcode du plugin.
 * Les couleurs viennent de variables (réglables dans l'administration, filtre « ayi_couleurs »). */
.ayi {
	--ayi-c1: #09284E;
	--ayi-c2: #F9922C;
	--ayi-bord: #e3e7ec;
	--ayi-fond: #f5f7fa;
	--ayi-txt: #1d2733;
	--ayi-txt2: #5b6775;
	--ayi-err: #a11a1a;
	--ayi-err-fond: #fdecec;
	--ayi-ok: #17692e;
	--ayi-ok-fond: #e8f6ec;
	box-sizing: border-box;
	color: var(--ayi-txt);
	font-size: 16px;
	line-height: 1.5;
}
.ayi *, .ayi *::before, .ayi *::after { box-sizing: inherit; }
.ayi [hidden] { display: none !important; }

/* Carte centrée */
.ayi-card {
	max-width: 480px;
	margin: 24px auto;
	background: #fff;
	border: 1px solid var(--ayi-bord);
	border-radius: 14px;
	overflow: hidden;
}
.ayi-entete {
	position: relative;
	overflow: hidden;
	padding: 24px 20px 20px;
	background: var(--ayi-c1);
	color: #fff;
}
.ayi-entete::before, .ayi-entete::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}
.ayi-entete::before { right: -40px; top: -60px; width: 170px; height: 170px; background: var(--ayi-c2); opacity: .92; }
.ayi-entete::after { right: 80px; bottom: -70px; width: 110px; height: 110px; background: #fff; opacity: .1; }
.ayi-marque { position: relative; z-index: 1; display: block; margin-bottom: 4px; font-size: 14px; font-weight: 600; letter-spacing: .02em; opacity: .9; }
.ayi-titre-page { position: relative; z-index: 1; margin: 0; padding-right: 90px; font-size: 22px; line-height: 1.25; font-weight: 700; color: #fff; overflow-wrap: anywhere; }
.ayi-corps { padding: 20px; }

/* Progression */
.ayi-progres { margin: 0 0 20px; }
.ayi-progres-texte { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--ayi-txt2); }
.ayi-barre { height: 6px; border-radius: 3px; background: #e6ebf2; overflow: hidden; }
.ayi-barre > span { display: block; width: 0; height: 100%; border-radius: 3px; background: var(--ayi-c2); transition: width .25s ease; }

/* Étapes et champs */
.ayi-etape { margin: 0 0 24px; }
.ayi-etape-titre { margin: 0 0 8px; font-size: 24px; line-height: 1.25; font-weight: 700; color: var(--ayi-c1); outline: 0; overflow-wrap: anywhere; }
.ayi-intro { margin: 0 0 16px; color: var(--ayi-txt2); }
.ayi-champ { margin: 0 0 18px; min-width: 0; }
.ayi-groupe-champ { margin: 0; padding: 0; border: 0; min-width: 0; }
.ayi-label { display: block; margin: 0 0 6px; padding: 0; font-size: 15px; font-weight: 600; color: var(--ayi-txt); }
.ayi-requis { color: var(--ayi-err); }
.ayi-aide { margin: 0 0 8px; font-size: 14px; color: var(--ayi-txt2); }
.ayi-input {
	display: block;
	width: 100%;
	max-width: 100%;
	min-height: 48px;
	padding: 10px 14px;
	border: 1.5px solid #cfd6de;
	border-radius: 10px;
	background: #fff;
	color: var(--ayi-txt);
	font: inherit;
	font-size: 16px; /* 16 px au minimum : évite le zoom automatique sur iPhone */
	-webkit-appearance: none;
	appearance: none;
}
select.ayi-input {
	padding-right: 40px;
	background-image: linear-gradient(45deg, transparent 50%, var(--ayi-c1) 50%), linear-gradient(135deg, var(--ayi-c1) 50%, transparent 50%);
	background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}
textarea.ayi-input { min-height: 110px; resize: vertical; }
.ayi-input:focus, .ayi-bouton:focus-visible, .ayi-choix input:focus-visible, .ayi-voir:focus-visible, .ayi-card a:focus-visible {
	outline: 3px solid var(--ayi-c2);
	outline-offset: 2px;
}
.ayi-input[aria-invalid="true"] { border-color: var(--ayi-err); }

/* Cases, boutons radio : grandes zones à toucher */
.ayi-choix-liste { display: grid; gap: 8px; }
.ayi-choix {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 48px;
	padding: 8px 12px;
	border: 1.5px solid #cfd6de;
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
	font-weight: 400;
}
.ayi-choix input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--ayi-c1); }
.ayi-choix span { min-width: 0; overflow-wrap: anywhere; }
.ayi-choix--case, .ayi-meme { border: 0; padding-left: 0; padding-right: 0; min-height: 44px; }
.ayi-meme { margin-top: 6px; }

/* Métiers : liste avec recherche */
.ayi-liste { max-height: 280px; overflow-y: auto; padding: 4px; border: 1.5px solid #cfd6de; border-radius: 10px; -webkit-overflow-scrolling: touch; }
.ayi-filtre { margin-bottom: 8px; }
.ayi-groupe { margin: 0 0 4px; }
.ayi-liste .ayi-choix { border: 0; border-radius: 8px; }
.ayi-liste .ayi-choix:hover { background: var(--ayi-fond); }
.ayi-metier-enfant { margin-left: 20px; }
.ayi-metier-parent { font-weight: 600; }
.ayi-autre { margin-top: 12px; }
.ayi-loc-niveau { margin: 0 0 12px; }

/* Mot de passe */
.ayi-champ--motdepasse .ayi-input, .ayi-champ--confirmation_mdp .ayi-input { padding-right: 96px; }
.ayi-saisie { position: relative; }
.ayi-voir {
	position: absolute;
	right: 4px;
	top: 2px;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--ayi-c1);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}
.ayi-force { height: 6px; margin: 8px 0 4px; border-radius: 3px; background: #e6ebf2; overflow: hidden; }
.ayi-force-barre { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--ayi-err); transition: width .2s ease, background .2s ease; }
.ayi-force[data-niveau="2"] .ayi-force-barre { background: var(--ayi-c2); }
.ayi-force[data-niveau="3"] .ayi-force-barre, .ayi-force[data-niveau="4"] .ayi-force-barre { background: var(--ayi-ok); }
.ayi-force-texte { margin: 0 0 6px; min-height: 20px; font-size: 14px; color: var(--ayi-txt2); }

/* Messages */
.ayi-erreur { margin: 6px 0 0; min-height: 0; font-size: 14px; font-weight: 600; color: var(--ayi-err); }
.ayi-erreur:empty { display: none; }
.ayi-notice { margin: 0 0 16px; padding: 12px 14px; border-radius: 10px; font-size: 15px; }
.ayi-notice--err { background: var(--ayi-err-fond); color: var(--ayi-err); }
.ayi-notice--ok { background: var(--ayi-ok-fond); color: var(--ayi-ok); }
.ayi-notice--info { background: var(--ayi-fond); color: var(--ayi-c1); border: 1px solid var(--ayi-bord); }

/* Boutons : 44 px au minimum, rayon 10 px, principal orange à texte bleu marine */
.ayi-nav { display: flex; gap: 12px; margin: 8px 0 0; }
.ayi-bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 10px 22px;
	border: 1.5px solid transparent;
	border-radius: 10px;
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}
.ayi-bouton--principal { flex: 1; background: var(--ayi-c2); color: var(--ayi-c1); border-color: var(--ayi-c2); }
.ayi-bouton--secondaire { background: #fff; color: var(--ayi-c1); border-color: var(--ayi-c1); }
.ayi-bouton:disabled { opacity: .6; cursor: default; }
.ayi-connexion-lien { margin: 20px 0 0; font-size: 15px; text-align: center; color: var(--ayi-txt2); }
.ayi-connexion-lien a { color: var(--ayi-c1); font-weight: 600; }

/* Apparition douce des boutons (supprimée si la personne le demande) */
.ayi-apparait { animation: ayi-apparait .18s ease-out; }
@keyframes ayi-apparait { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.ayi-apparait { animation: none; }
	.ayi-barre > span, .ayi-force-barre { transition: none; }
}

/* Petits écrans (320 px) : rien ne doit déborder */
@media (max-width: 400px) {
	.ayi-card { margin: 12px 8px; border-radius: 12px; }
	.ayi-corps { padding: 16px; }
	.ayi-titre-page { font-size: 20px; padding-right: 70px; }
	.ayi-etape-titre { font-size: 22px; }
}

/* Page « Confirmez votre e-mail » : saisie du code à 6 chiffres */
.ayi-verif .ayi-code { font-size: 28px; font-weight: 700; letter-spacing: .35em; text-align: center; padding-left: calc(14px + .35em); }
.ayi-verif .ayi-code::placeholder { letter-spacing: .35em; font-weight: 400; color: #b5bdc7; }
.ayi-verif .ayi-nav .ayi-bouton { flex: 1; }

/* ==== 0.4.3 : mise en page plein écran, PC et mobile (couleurs et éléments inchangés) ==== */
html:has(.ayi-card) { overflow-x: clip; }
.ayi-corps > form { display: flex; flex-direction: column; }
.ayi-corps > form .ayi-nav { margin-top: auto; }

/* Mobile : la carte occupe toute la largeur et la hauteur de l'écran, boutons en bas, à portée du pouce */
@media (max-width: 767px) {
	.ayi-card {
		width: 100vw;
		max-width: 100vw;
		margin: 0 0 0 calc(50% - 50vw);
		border: 0;
		border-radius: 0;
		min-height: 80vh;
		min-height: 80dvh;
		display: flex;
		flex-direction: column;
	}
	.ayi-entete { padding: 32px 20px 24px; }
	.ayi-titre-page { font-size: 24px; padding-right: 90px; }
	.ayi-corps { flex: 1; display: flex; flex-direction: column; padding: 20px 20px 28px; }
	.ayi-corps > form { flex: 1; }
	.ayi-nav { flex-direction: column-reverse; }
	.ayi-nav .ayi-bouton { width: 100%; }
}

/* PC : bande bleue sur toute la largeur, carte large qui la chevauche */
@media (min-width: 768px) {
	.ayi-card {
		max-width: none;
		margin: 0 0 48px;
		background: transparent;
		border: 0;
		border-radius: 0;
		overflow: visible;
	}
	.ayi-entete {
		width: 100vw;
		margin-left: calc(50% - 50vw);
		padding: 72px calc(50vw - 360px) 100px;
	}
	.ayi-entete::before { right: -60px; top: -110px; width: 360px; height: 360px; }
	.ayi-entete::after { right: 260px; bottom: -120px; width: 220px; height: 220px; }
	.ayi-marque { font-size: 16px; }
	.ayi-titre-page { padding-right: 0; font-size: 40px; line-height: 1.2; }
	.ayi-corps {
		position: relative;
		max-width: 720px;
		margin: -70px auto 0;
		padding: 36px 44px 40px;
		background: #fff;
		border: 1px solid var(--ayi-bord);
		border-radius: 16px;
		box-shadow: 0 12px 40px rgba(9, 40, 78, .12);
	}
	.ayi-etape-titre { font-size: 28px; }
	.ayi-etape { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
	.ayi-etape > :not(.ayi-champ--texte) { grid-column: 1 / -1; }
	.ayi-input, .ayi-bouton { min-height: 52px; }
	.ayi-nav { justify-content: flex-end; margin-top: 16px; }
	.ayi-nav .ayi-bouton--principal { flex: 0 1 auto; min-width: 220px; }
	.ayi-verif .ayi-nav .ayi-bouton { flex: 1; }
}

/* Mon compte : tableau de bord de Réseau affiché directement sous la carte */
.ayi-espace { max-width: 1100px; margin: 0 auto 48px; padding: 0 16px; }


/* Mon compte : bannière (le grand bandeau d'en-tête), photo de profil à gauche, comme sur YouTube */
.ayi-entete--banniere { background-color: var(--ayi-c1); background-size: cover; background-position: center; background-repeat: no-repeat; min-height: 150px; }
.ayi-entete--banniere::before { inset: 0; right: auto; top: 0; width: auto; height: auto; border-radius: 0; background: var(--ayi-c1); opacity: .45; }
.ayi-entete--banniere::after { display: none; }
.ayi-profil { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 20px; }
.ayi-photo-zone { position: relative; flex: none; margin-top: -44px; z-index: 2; }
.ayi-photo { width: 88px; height: 88px; border: 4px solid #fff; border-radius: 50%; background: var(--ayi-c1); color: #fff; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 700; }
.ayi-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ayi-envoi { margin: 0; }
.ayi-fichier { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.ayi-camera { position: absolute; right: -2px; bottom: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; border-radius: 50%; background: var(--ayi-c2); color: var(--ayi-c1); cursor: pointer; }
.ayi-camera:focus-within, .ayi-bouton-banniere:focus-within { outline: 3px solid var(--ayi-c2); outline-offset: 2px; }
.ayi-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ayi-lien { flex: 0 0 100%; margin: -8px 0 12px; padding: 0; border: 0; background: none; color: var(--ayi-c1); font: inherit; font-size: 14px; font-weight: 600; text-decoration: underline; cursor: pointer; min-height: 32px; }
.ayi-envoi--suppr { flex: 0 0 100%; }
.ayi-banniere-actions { position: absolute; right: 12px; top: 12px; z-index: 3; }
.ayi-envoi--banniere { display: flex; gap: 8px; }
.ayi-bouton-banniere { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 0; border-radius: 10px; box-shadow: 0 2px 8px rgba(9, 40, 78, .25); background: #fff; color: var(--ayi-c1); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.ayi-profil-nom { flex: 1; min-width: 0; margin: 4px 0 16px; font-size: 16px; overflow-wrap: anywhere; }
.ayi-profil-nom strong { font-size: 20px; }
@media (min-width: 768px) {
	.ayi-entete--banniere { min-height: 280px; }
	.ayi-photo-zone { margin-top: -64px; }
	.ayi-photo { width: 120px; height: 120px; font-size: 44px; }
	.ayi-banniere-actions { right: 24px; top: 24px; }
	.ayi-profil-nom { margin-top: 8px; }
}

/* ==== 0.4.15 : Mon compte responsive (plus de grand blanc avant le contenu choisi, bouton bannière hors du titre) ==== */
.ayi-camera::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; } /* zone tactile élargie */
.ayi-espace { min-width: 0; overflow-x: clip; }
.ayi-espace img, .ayi-espace video, .ayi-espace iframe, .ayi-espace table { max-width: 100%; }
.ayi-espace img, .ayi-espace video { height: auto; }

/* Petits écrans et tablettes : la carte n'est plus étirée à 80 % de la hauteur de l'écran */
@media (max-width: 767px) {
	.ayi-card.ayi-card--compte { min-height: 0; display: block; }
	.ayi-card--compte .ayi-corps { display: block; flex: none; padding: 20px 20px 8px; }
	.ayi-card--compte .ayi-entete { padding-right: 20px; }
	.ayi-card--compte .ayi-titre-page { padding-right: 64px; }
	.ayi-espace { padding-top: 8px; margin-bottom: 32px; }
	.ayi-profil-nom { margin-bottom: 12px; font-size: 14px; }
	.ayi-profil-nom strong { font-size: 18px; }
	/* Boutons de la bannière : ronds, icône seule, en haut à droite (le texte reste lu par les lecteurs d'écran) */
	.ayi-bouton-banniere { width: 44px; padding: 0; border-radius: 50%; }
	.ayi-bouton-banniere span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.ayi-bouton-banniere--suppr { color: var(--ayi-err); }
}
@media (max-width: 359px) {
	.ayi-profil { gap: 0 14px; }
	.ayi-photo-zone { margin-top: -36px; }
	.ayi-photo { width: 72px; height: 72px; font-size: 28px; }
	.ayi-camera { width: 32px; height: 32px; }
}

/* PC : carte Mon compte moins espacée du contenu choisi */
@media (min-width: 768px) {
	.ayi-card.ayi-card--compte { margin-bottom: 24px; }
	.ayi-card--compte .ayi-corps { padding-bottom: 24px; }
	.ayi-espace { margin-bottom: 64px; }
}

/* ==== 0.4.16 : « Mes informations » (Mon compte) : les réponses de l'inscription, modifiables sur la page ==== */
.ayi-infos { max-width: 720px; margin: 16px auto 24px; padding: 0 16px; }
.ayi-infos-carte { background: #fff; border: 1px solid var(--ayi-bord); border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(9, 40, 78, .04), 0 8px 24px rgba(9, 40, 78, .06); }
.ayi-infos-entete { padding: 20px 20px 16px; border-bottom: 1px solid var(--ayi-bord); border-top: 4px solid var(--ayi-c2); background: var(--ayi-fond); }
.ayi-infos-titre { margin: 0 0 4px; font-size: 22px; line-height: 1.25; font-weight: 700; color: var(--ayi-c1); }
.ayi-infos-intro { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ayi-txt2); }
.ayi-infos-corps { padding: 20px; }

.ayi-section { margin: 0 0 8px; }
.ayi-section + .ayi-section { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--ayi-bord); }
.ayi-section-entete { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.ayi-section-icone { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--ayi-fond); color: var(--ayi-c1); }
.ayi-section-titre { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 700; color: var(--ayi-c1); }
.ayi-section-champs { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 20px; }
.ayi-section-champs > .ayi-champ { min-width: 0; }
.ayi-input:disabled { background: var(--ayi-fond); color: var(--ayi-txt2); cursor: not-allowed; }

.ayi-infos-actions { display: flex; justify-content: flex-end; margin-top: 16px; padding-top: 20px; border-top: 1px solid var(--ayi-bord); }
.ayi-infos-actions .ayi-bouton { width: 100%; }

@media (min-width: 640px) {
	.ayi-infos-entete { padding: 24px 32px 18px; }
	.ayi-infos-corps { padding: 28px 32px 32px; }
	.ayi-section-champs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ayi-section-champs > .ayi-champ--radio,
	.ayi-section-champs > .ayi-champ--cases,
	.ayi-section-champs > .ayi-champ--case,
	.ayi-section-champs > .ayi-champ--metiers,
	.ayi-section-champs > .ayi-champ--localisation,
	.ayi-section-champs > .ayi-champ--texte_long { grid-column: 1 / -1; }
	.ayi-infos-actions .ayi-bouton { width: auto; min-width: 260px; }
}
@media (min-width: 768px) {
	.ayi-infos { margin-top: 0; padding: 0; }
	.ayi-infos-titre { font-size: 24px; }
}
@media (max-width: 359px) {
	.ayi-infos { padding: 0 8px; }
	.ayi-infos-corps { padding: 16px; }
}