/**
 * Styles globaux du thème kirkit. Les valeurs viennent des jetons (var(--kirkit-*)) : aucune
 * couleur, police ou taille en dur ici (docs/adr/0006).
 */

/*
 * Remise à zéro reprise de kirkibase (assets/css/style.min.css), que le kit ne charge plus
 * (inc/bootstrap.php) : sa règle a:hover { color: inherit } l'emportait au survol sur la couleur de
 * toute classe posée sur un lien (boutons, liens de menu), et a { color: #5409da } sur le jeton link.
 * :where() n'a aucune spécificité : un style posé dans Kirki l'emporte toujours.
 */
:where(*, *::before, *::after) {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

:where(ol, ul) {
	list-style: none;
}

:where(img, picture) {
	display: block;
	max-width: 100%;
}

:where(button, input, select, textarea) {
	font: inherit;
}

:where(body) {
	min-height: 100vh;
	line-height: 1.5;
	/* Pas de text-rendering: optimizeSpeed : Chromium (Linux, Windows) y coupe le crénage, le texte
	   s'élargit et passe à la ligne autrement que l'original (relevé sur le pilote Panoramis). */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/*
 * Vidéo Kirki dans un cadre de hauteur imposée (vidéo plein écran) : la vidéo remplit le cadre
 * (object-fit de l'élément). Cadre à hauteur automatique : sans effet, le format de la vidéo décide.
 */
.kirki-video-element > video {
	height: 100%;
}

/*
 * Préférence « réduire les animations » du visiteur. Le script public de Kirki 6.4.0 n'en tient
 * pas compte : on ramène à presque zéro les animations et transitions CSS qu'il pose (le !important
 * d'une feuille de style l'emporte sur ses styles en ligne). Cela couvre les animations ponctuelles :
 * clic, survol, entrée ou sortie de l'écran, Self reveal, Children reveal, animations de texte.
 * Les effets continus (défilement, souris, Ticker, parallaxes, Item stacking), joués image par
 * image, sont retirés par inc/kirki/class-front-scripts.php.
 */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		animation-delay: 0s !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
		scroll-behavior: auto !important;
	}
}

/*
 * Kirki Ecommerce (docs/adr/0013) : sa feuille utilise des variables --kecom-* qu'elle ne définit
 * pas (valeurs de repli codées en dur). On branche les principales sur les jetons du kit ; les
 * autres gardent leur repli. Sans Kirki Ecommerce, ces variables sont inutilisées.
 */
:root {
	--kecom-font-family: var(--kirkit-font-family-body);
	--kecom-text-primary: var(--kirkit-color-text);
	--kecom-text-secondary: var(--kirkit-color-text-muted);
	--kecom-text-subdued: var(--kirkit-color-text-muted);
	--kecom-text-light: var(--kirkit-color-primary-contrast);
	--kecom-text-emphasis: var(--kirkit-color-primary);
	--kecom-icon-primary: var(--kirkit-color-text);
	--kecom-icon-secondary: var(--kirkit-color-text-muted);
	--kecom-icon-emphasis: var(--kirkit-color-primary);
	--kecom-border-default: var(--kirkit-color-border);
	--kecom-border-secondary: var(--kirkit-color-border);
	--kecom-background-surface: var(--kirkit-color-background);
	--kecom-background-surface-alt: var(--kirkit-color-surface);
	--kecom-background-surface-secondary: var(--kirkit-color-surface);
	--kecom-background-fill-brand: var(--kirkit-color-primary);
}

/*
 * Gabarits rendus par le thème (recherche, archives, page des articles, 404 :
 * template-parts/list.php) : texte et fond depuis les jetons, liste sans puces.
 */
.kirkit-template {
	font-family: var(--kirkit-font-family-body);
	color: var(--kirkit-color-text);
	background-color: var(--kirkit-color-background);
}

.kirkit-template .kirkit-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * Fond, texte et police de la page depuis les jetons, sur tout le site (pages Kirki comprises) :
 * sans eux, le fond reste blanc sous les sections. :where() n'a aucune spécificité : un style posé
 * dans Kirki (Body) l'emporte toujours.
 */
:where(body) {
	font-family: var(--kirkit-font-family-body);
	color: var(--kirkit-color-text);
	background-color: var(--kirkit-color-background);
}

/*
 * Couleur des liens depuis le jeton link, sur tout le site (pages Kirki comprises) ; un style posé
 * dans Kirki (classe) l'emporte toujours, y compris au survol.
 */
a {
	color: var(--kirkit-color-link);
}

/*
 * Contour de focus au clavier (WCAG 2.4.7). Les styles par défaut des champs et boutons de Kirki
 * 6.4.0 contiennent outline:none : sans cette règle, la navigation au clavier ne se voit plus sur
 * les formulaires. :focus-visible ne s'applique qu'au clavier (pas au clic). Couleur : jeton
 * primary, dont le contraste avec le fond est vérifié par wp kirkit audit (3:1).
 */
:focus-visible {
	outline: 2px solid var(--kirkit-color-primary) !important;
	outline-offset: 2px !important;
}

/*
 * Lien d'évitement (inc/class-skip-link.php) : hors de l'écran, il apparaît en haut à gauche quand il
 * reçoit le focus au clavier.
 */
.kirkit-skip-link {
	position: absolute;
	top: var(--kirkit-size-space-s);
	left: var(--kirkit-size-space-s);
	z-index: 100000;
	padding: var(--kirkit-size-space-s) var(--kirkit-size-space-m);
	color: var(--kirkit-color-link);
	background: var(--kirkit-color-background);
	box-shadow: 0 0 0 1px var(--kirkit-color-border);
	transform: translateY(-200%);
}

.kirkit-skip-link:focus {
	transform: none;
}

/*
 * Bandeau de consentement (inc/class-consent.php) : fixé en bas de l'écran, non bloquant, aux
 * classes du kit (kirkit-card, kirkit-stack, kirkit-button). Accepter et refuser ont la même
 * importance visuelle.
 */
.kirkit-consent {
	position: fixed;
	inset: auto var(--kirkit-size-space-m) var(--kirkit-size-space-m);
	z-index: 9999;
	max-width: 40rem;
	margin-inline: auto;
	color: var(--kirkit-color-text);
	box-shadow: 0 0 0 1px var(--kirkit-color-border);
}

.kirkit-consent[hidden],
.kirkit-consent [hidden] {
	display: none;
}

.kirkit-consent fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

.kirkit-consent__choice {
	display: flex;
	gap: var(--kirkit-size-space-s);
	align-items: flex-start;
}

.kirkit-consent__choice > span {
	display: flex;
	flex-direction: column;
}

.kirkit-consent__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kirkit-size-space-s);
}

/* kirkit-button est pensée pour des liens : bordure et police du navigateur retirées des <button>. */
.kirkit-consent button {
	border: 0;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

/* Sélecteur de langue (élément Kirki « Langues », [kirkit_langues]) : liste remise à zéro, en ligne.
   Le reste (couleurs, langue courante [aria-current]) se règle dans Kirki. */
.kirkit-langues__liste {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kirkit-size-space-s);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Liens du sélecteur : couleur et soulignement de l'élément, réglés dans Kirki (classe sur le nav). */
:where(.kirkit-langues__liste a) {
	color: inherit;
	text-decoration: inherit;
}

/* Aperçu au survol d'une liste (inc/kirki/apercu.js) : avant le script, seul le premier élément de
   chaque cible ; ensuite, seul l'élément actif. */
[data-kirkit-apercu]:not([data-kirkit-pret]) > :not(:first-of-type),
[data-kirkit-apercu][data-kirkit-pret] > :not([data-kirkit-actif]) {
	display: none;
}

/* Curseur personnalisé (assets/js/curseur.js) : à l'activation du calque, la bande d'un curseur
 * (data-kirkit-curseur-bande, déplacée selon --kirkit-curseur-rang) se place sans glisser. */
[data-kirkit-curseur-saut] [data-kirkit-curseur-bande] {
	transition: none !important;
}

/* Dépliants (assets/js/depliant.js) : panneau replié à hauteur nulle, déplié à sa hauteur, en
   animant la ligne de grille (pas de hauteur à mesurer). Avant le script, le premier dépliant d'une
   liste data-kirkit-depliant-premier est déjà ouvert. Durée et courbe : variables sur le dépliant. */
[data-kirkit-depliant-panneau] {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--kirkit-depliant-duree, 500ms) var(--kirkit-depliant-courbe, cubic-bezier(.76, 0, .24, 1));
}

[data-kirkit-depliant-panneau] > * {
	min-height: 0;
	overflow: hidden;
}

[data-kirkit-ouvert] [data-kirkit-depliant-panneau],
[data-kirkit-depliant-premier]:not([data-kirkit-depliant-pret]) > :nth-child(1 of :not(style, script, template)) [data-kirkit-depliant-panneau] {
	grid-template-rows: 1fr;
}

/* Premier élément de la liste : le dépliant lui-même, ou un dépliant qu'il contient (instance de
   composant enveloppée par Kirki). */
[data-kirkit-depliant-premier]:not([data-kirkit-depliant-pret]) > :nth-child(1 of :not(style, script, template)),
[data-kirkit-depliant-premier]:not([data-kirkit-depliant-pret]) > :nth-child(1 of :not(style, script, template)) [data-kirkit-depliant] {
	--kirkit-ouvert: 1;
}

/* Apparition en cascade (assets/js/cascade.js) : état de départ avant le script ; affiché tout de
   suite si le visiteur demande de réduire les animations et à l'impression (sans JavaScript :
   noscript du kit). */
[data-kirkit-cascade] {
	--kirkit-vu: 0;
}

@media (prefers-reduced-motion: reduce), print {
	[data-kirkit-cascade] {
		--kirkit-vu: 1 !important;
	}
}