/* ---------------------------------------------------------------------------
   AIomatique - socle global
   Les polices sont declarees dans theme.json et servies depuis assets/fonts/.
   Le contenu de chaque page porte son propre reset prefixe : ce fichier ne
   traite que le document, la navigation clavier et les garde-fous d'animation.
   --------------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	background-color: var(--wp--preset--color--fond-nuit, #080b0f);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

:root {
	/* L'ancien constructeur inserait au-dessus de chaque page une section vide
	   de 20 px. Elle n'a aucune intention de mise en page, mais la retirer
	   remonte tout le site de 20 px. Conservee pour un rendu identique.
	   Passer a 0 pour recuperer ces 20 px. */
	--aio-decalage-entete: 20px;
}

body {
	margin: 0;
	min-height: 100vh;
	background-color: var(--wp--preset--color--fond-nuit, #080b0f);
	color: var(--wp--preset--color--texte-clair, #e7edf3);
	font-family: var(--wp--preset--font-family--courante, "Kumbh Sans", sans-serif);
	font-size: 1rem;
	line-height: 1.75;
	letter-spacing: 0.5px;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

main {
	padding-block-start: var(--aio-decalage-entete);
}

/* ---------------------------------------------------------------------------
   Titrage du site
   Syne, comme sur les pages refondues. Les pages encore issues de l'ancien
   constructeur repassent en Plus Jakarta Sans via pages/_kit.css.
   --------------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--wp--preset--font-family--titrage, Syne), sans-serif;
	color: var(--wp--preset--color--texte-clair, #e7edf3);
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------------------
   Navigation clavier
   Le focus doit rester visible partout, y compris sur les fonds sombres.
   --------------------------------------------------------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--action, #34d399);
	outline-offset: 2px;
	border-radius: 3px;
}

/* Le focus visible ne doit jamais etre masque par l'entete fixe. */
:target,
:focus-visible {
	scroll-margin-block-start: 5.5rem;
}

.skip-link {
	position: absolute;
	inset-block-start: 0.5rem;
	inset-inline-start: 0.5rem;
	z-index: 100000;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--fond-ardoise, #1e2a36);
	color: var(--wp--preset--color--texte-clair, #e7edf3);
	border-radius: 8px;
	font-weight: 700;
	text-decoration: none;
	transform: translateY(-200%);
	transition: transform 150ms ease;
}

.skip-link:focus {
	transform: translateY(0);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------------------
   Mouvement
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------------------------------------------------------------------------
   Cibles tactiles
   Les liens de listes du pied de page et des menus descendaient sous 44 px.
   --------------------------------------------------------------------------- */

@media (pointer: coarse), (max-width: 640px) {
	:where(nav) a {
		min-block-size: 44px;
		display: inline-flex;
		align-items: center;
	}
}

/* ---------------------------------------------------------------------------
   Lien d'evitement

   WordPress injecte le lien lui-meme et le cache hors ecran. Sa mise en forme
   par defaut est celle de l'administration : ces regles le rhabillent aux
   couleurs du site sans en ajouter un second.
   ------------------------------------------------------------------------ */

.wp-site-blocks .skip-link,
#wp-skip-link {
	position: absolute;
	inset-block-start: 8px;
	inset-inline-start: 8px;
	z-index: 999;
	padding: 12px 18px;
	border-radius: 8px;
	background: var(--wp--preset--color--texte-clair, #e7edf3);
	color: var(--wp--preset--color--fond-nuit, #080b0f);
	font-weight: 600;
	text-decoration: none;
	transform: translateY(-200%);
	transition: transform .18s cubic-bezier(.16, 1, .3, 1);
}

#wp-skip-link:focus,
.wp-site-blocks .skip-link:focus {
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	#wp-skip-link { transition: none; }
}

/* ---------------------------------------------------------------------------
   Repli du formulaire

   Affiche quand FluentForm est absent. Il reprend la palette de la refonte
   pour ne pas trancher avec la page qui l'accueille.
   ------------------------------------------------------------------------ */

.aio-form-repli {
	padding: clamp(22px, 3vw, 30px);
	border: 1px solid rgba(52, 211, 153, 0.28);
	border-radius: 12px;
	background: rgba(52, 211, 153, 0.06);
	color: var(--wp--preset--color--texte-clair, #e7edf3);
}

.aio-form-repli-t {
	margin-block-end: 8px;
	font-weight: 600;
}

.aio-form-repli ul {
	margin-block-start: 14px;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
}

.aio-form-repli a {
	color: #34d399;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
}

.aio-form-repli a:hover {
	text-decoration: underline;
}