/* =========================================================================
   Stoÿkh — utilitaires
   Ce que theme.json ne peut pas exprimer. Rien d'autre ne va ici :
   toute couleur, taille de police ou espacement doit venir de theme.json.

   Rayons : 24 px grandes tuiles · 20 px cartes · 12 px champs · pastille
   pour les boutons, filtres et étiquettes. Le rayon croît avec la surface.
   ========================================================================= */

:root {
	--sk-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 3 H6 L12 11 H7 Z'/%3E%3Cpath d='M23 3 H18 L12 11 H17 Z'/%3E%3C/svg%3E");
}

/* --- Étiquettes en monospace : durées, mesures, rubriques ---------------- */
.sk-etiquette {
	font-family: var(--wp--preset--font-family--mesure);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--orange-action);
	line-height: 1.4;
}
.sk-etiquette--sourde { color: var(--wp--preset--color--gris-meta); font-weight: 500; }
.sk-etiquette--sombre { color: var(--wp--preset--color--orange-signal); }
.sk-etiquette--large  { letter-spacing: 0.2em; }

/* Étiquette en pastille pleine, pour « À la une » */
.sk-pastille {
	display: inline-block;
	background: var(--wp--preset--color--orange-signal);
	color: var(--wp--preset--color--encre);
	border-radius: var(--wp--custom--rayon--pastille);
	padding: 0.3rem 0.8rem;
	font-family: var(--wp--preset--font-family--mesure);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.sk-pastille--labo {
	background: rgba(255, 102, 0, 0.16);
	color: var(--wp--preset--color--orange-signal);
}

/* Pastille de pilier (catégorie, icône + libellé) — [stoykh_pastille],
   utilisée par functions.php sur les cartes d'articles et l'en-tête d'article */
.sk-pilier {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--wp--preset--color--orange-voile);
	border-radius: var(--wp--custom--rayon--pastille);
	padding: 7px 13px;
	color: var(--wp--preset--color--orange-action);
}
.sk-pilier--sombre {
	background: var(--wp--preset--color--encre);
	color: var(--wp--preset--color--orange-signal);
}
.sk-pilier__icone { display: flex; flex-shrink: 0; }
.sk-pilier span:last-child {
	font-family: var(--wp--preset--font-family--mesure);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: inherit;
}

.sk-meta {
	font-family: var(--wp--preset--font-family--mesure);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--gris-meta);
}

/* --- Puce chevron (les deux bras du Ÿ) ---------------------------------- */
.sk-liste { list-style: none; padding-left: 0; }
.sk-liste li { position: relative; padding-left: 1.75rem; margin-bottom: 0.9rem; line-height: 1.7; }
.sk-liste li::before {
	content: "";
	position: absolute; left: 0; top: 0.62em;
	width: 14px; height: 14px;
	background-color: var(--wp--preset--color--orange-signal);
	-webkit-mask: var(--sk-chevron) center / contain no-repeat;
	mask: var(--sk-chevron) center / contain no-repeat;
}

/* --- accueil-acces.php : même principe de grille que .sk-une plus haut
   (étudié sur lokan.fr). Les 3 petites tuiles de droite sont du texte : on
   les prend comme référence de hauteur (align-self:start, elles restent à
   leur hauteur naturelle, la plus compacte possible). « Le feuilleton » à
   gauche s'étire pour l'égaler (stretch par défaut) — sa photo en fond
   absorbe toujours l'espace supplémentaire sans laisser de vide, comme
   n'importe quelle image. Avant ce changement, les deux colonnes se
   tiraient mutuellement vers le haut (chacune pouvait être la plus haute
   des deux), d'où un bloc plus grand que nécessaire. */
.sk-acces { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.sk-acces > .wp-block-column:last-child { align-self: start; }

/* Espace entre les 3 tuiles : gap fixe (pas justify-content:space-between,
   qui grandirait avec la hauteur disponible) — chaque tuile grandit elle-
   même pour occuper l'espace restant (flex:1), l'écart reste constant. */
.sk-tuiles-pile {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
}
.sk-tuiles-pile .sk-tuile { flex: 1; }
/* --- accueil-une.php : grille CSS, même principe que lokan.fr (bloc
   hero2-grid, étudié sur demande). Un flex classique ne peut pas résoudre
   ce cas : étirer le texte crée un vide (rien pour le combler), et ne pas
   étirer laisse les deux colonnes à des hauteurs différentes. La solution
   de Lokan — et donc la nôtre — distingue les deux colonnes :
     - à gauche, la tuile garde sa hauteur naturelle (align-self:start) et
       sert de référence pour la hauteur de toute la ligne de grille ;
     - à droite, la colonne s'étire pour l'égaler, et dans chacune de ses
       deux tuiles c'est la PHOTO qui absorbe l'espace disponible (flex,
       sans ratio fixe) — jamais le texte. Une photo peut toujours remplir
       n'importe quelle hauteur sans laisser de vide ; un bloc de texte non.
   Stoÿkh garde son habillage actuel (photo puis bandeau de texte en
   dessous) — seul le principe de répartition de la hauteur vient de Lokan,
   pas le texte en surimpression sur la photo. */
.sk-une { display: grid !important; grid-template-columns: 2fr 1fr; align-items: stretch; }
.sk-une > .wp-block-column:first-child { align-self: start; }

.sk-une > .wp-block-column:last-child { display: flex; flex-direction: column; gap: 0.875rem; }
.sk-une > .wp-block-column:last-child > .wp-block-query {
	flex: 1 1 0;
	min-height: 0;
	display: flex;
}
.sk-une > .wp-block-column:last-child .wp-block-post-template,
.sk-une > .wp-block-column:last-child .wp-block-post-template > li,
.sk-une > .wp-block-column:last-child .sk-tuile {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0;
}
.sk-une > .wp-block-column:last-child .wp-block-post-featured-image {
	flex: 1;
	min-height: 0;
}
.sk-une > .wp-block-column:last-child .wp-block-post-featured-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	aspect-ratio: auto !important;
}

/* --- Tuiles de l'accueil ------------------------------------------------- */
.sk-tuile {
	position: relative;
	border-radius: var(--wp--custom--rayon--l);
	overflow: hidden;
	height: 100%;
	margin: 0;
}
/* Lien invisible superposé à toute la tuile, pour que l'ensemble soit
   cliquable/tactile — pas seulement le titre ou l'image. aria-hidden +
   tabindex -1 : c'est un raccourci de clic/tap, le vrai lien accessible
   (titre, bouton…) reste ailleurs dans la tuile pour le clavier et les
   lecteurs d'écran, qui ignorent donc celui-ci. z-index sous le bouton de
   « Le feuilleton » (qui garde son propre survol) mais au-dessus du reste. */
.sk-tuile__lien-plein {
	position: absolute;
	inset: 0;
	z-index: 3;
}
/* Même effet pour les tuiles de boucle (accueil-une.php, accueil-
   articles.php, grille-resultats-recherche.php) : pas de lien plein-tuile
   statique possible ici, get_permalink() dans un bloc wp:html ne peut pas
   fonctionner (le fichier de composition s'exécute une seule fois, avant
   même que la boucle ne tourne — l'URL obtenue était donc toujours la
   même, gelée au moment du chargement de la composition, pas celle de
   l'article affiché). On étire plutôt le lien du titre — lui est bien
   dynamique, recalculé par WordPress à chaque article de la boucle. */
.sk-tuile .wp-block-post-title a {
	position: static;
}
.sk-tuile .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
}
.sk-tuile--xl { border-radius: var(--wp--custom--rayon--xl); }
.sk-tuile--cadre {
	background: var(--wp--preset--color--papier);
	border: 1px solid var(--wp--preset--color--bordure);
}
.sk-tuile--sable { background: var(--wp--preset--color--sable); border: 1px solid var(--wp--preset--color--bordure); }
.sk-tuile--encre { background: var(--wp--preset--color--encre); }
.sk-tuile--encre :is(h1,h2,h3,h4,h5,h6), .sk-tuile--encre a { color: var(--wp--preset--color--papier); }
.sk-tuile--encre a:hover { color: var(--wp--preset--color--orange-signal); }
.sk-tuile--voile { background: var(--wp--preset--color--orange-voile); }
.sk-tuile--signal { background: var(--wp--preset--color--orange-signal); }
.sk-tuile img, .sk-tuile .wp-block-post-featured-image img { border-radius: 0; }

/* « Le feuilleton » (accueil-acces.php) : photo plein cadre avec voile
   dégradé et texte en surimpression, même principe que les tuiles de lokan.fr
   (étudiées sur demande) — image absolue, dégradé sombre vers le bas en
   ::after, texte ancré en bas via justify-content:flex-end sur la tuile. */
.sk-tuile--feuilleton { position: relative; background: var(--wp--preset--color--encre); }
.sk-tuile--feuilleton .sk-tuile-feuilleton__image {
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: 0;
}
.sk-tuile--feuilleton .sk-tuile-feuilleton__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sk-tuile--feuilleton::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--preset--gradient--voile-sombre);
	z-index: 1;
	pointer-events: none;
}
.sk-tuile--feuilleton .sk-tuile__corps {
	position: relative;
	z-index: 2;
	/* Réserve la place du bouton (ancré en position absolue, voir plus bas)
	   pour que le texte ne passe jamais dessous. */
	margin-bottom: var(--wp--preset--spacing--60);
}
.sk-tuile--feuilleton h2 { text-shadow: 0 2px 10px rgba(20, 19, 18, 0.35); }
/* Bouton « Suivre la saison » ancré en bas à droite de la tuile. Position
   absolue plutôt que flex : la hauteur de la tuile dépend de la colonne de
   droite (voir plus haut), donc variable — seule une ancre absolue donne
   une marge constante, quelle que soit cette hauteur ou la largeur
   d'écran. z-index au-dessus du lien plein-tuile (voir plus bas), pour
   garder son propre survol/focus distinct. */
.sk-tuile-feuilleton__bouton {
	position: absolute;
	right: var(--wp--preset--spacing--50);
	bottom: var(--wp--preset--spacing--50);
	z-index: 4;
	margin: 0;
}
.sk-bouton__fleche { margin-left: 0.5rem; vertical-align: -2px; }

/* En dessous de ~780px, le bouton « Suivre la saison » perd son texte et
   devient une simple pastille-flèche, comme sk-fleche sur les 3 tuiles
   d'accès juste à côté — cohérent, et prend moins de place sur la photo.
   min-height:32px nécessaire : la règle générale .wp-block-button__link
   (plus bas dans ce même fichier, section « Mobile ») impose min-height:
   48px à tous les boutons sous 781px, ce qui étirait la pastille en
   ovale (32px de large, 48px de haut). */
@media (max-width: 781px) {
	.sk-tuile-feuilleton__bouton .wp-block-button__link {
		width: 32px;
		height: 32px;
		min-height: 32px;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.sk-tuile-feuilleton__bouton .sk-bouton__texte {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.sk-tuile-feuilleton__bouton .sk-bouton__fleche { margin-left: 0; }
}

/* Icône des petites tuiles d'accès (accueil-acces.php) */
.sk-tuile__icone {
	display: flex;
	flex-shrink: 0;
	color: var(--wp--preset--color--orange-signal);
}

/* Survol : la zone de texte grandit légèrement, la tuile ne bouge jamais.
   transform ne participe pas à la mise en page par définition — aucun
   risque de faire bouger la tuile elle-même ou ses voisines, contrairement
   à une marge ou un padding. overflow:hidden sur .sk-tuile absorbe le léger
   débordement visuel. */
.sk-tuile__corps {
	padding: 1.25rem;
	transition: transform 0.25s ease;
}
.sk-tuile:hover .sk-tuile__corps { transform: scale(1.035); }

/* Pastille-flèche des tuiles de navigation */
.sk-fleche {
	width: 44px; height: 44px;
	border-radius: var(--wp--custom--rayon--pastille);
	display: inline-flex; align-items: center; justify-content: center;
	flex-shrink: 0;
	background: var(--wp--preset--color--orange-signal);
	color: var(--wp--preset--color--encre);
}
.sk-fleche--clair {
	background: var(--wp--preset--color--papier);
	border: 1px solid var(--wp--preset--color--bordure);
}
.sk-fleche--s { width: 32px; height: 32px; }

/* --- Filtres de catégorie ------------------------------------------------ */
.sk-filtres { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; padding: 0; margin: 0; }
.sk-filtres a {
	display: inline-flex; align-items: center; gap: 0.4rem;
	border: 1px solid var(--wp--preset--color--bordure);
	background: var(--wp--preset--color--papier);
	border-radius: var(--wp--custom--rayon--pastille);
	padding: 0.4rem 0.9rem;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	color: var(--wp--preset--color--encre);
	text-decoration: none;
	min-height: 34px;
}
.sk-filtres a:hover { border-color: var(--wp--preset--color--encre); color: var(--wp--preset--color--encre); }
.sk-filtres a:focus { outline: none; }
.sk-filtres .sk-filtre--actif a,
.sk-filtres a[aria-current="page"] {
	background: var(--wp--preset--color--encre);
	border-color: var(--wp--preset--color--encre);
	color: var(--wp--preset--color--papier);
	font-weight: 700;
}
@media (max-width: 781px) {
	.sk-filtres { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.sk-filtres::-webkit-scrollbar { display: none; }
	.sk-filtres li { flex-shrink: 0; }
}

/* --- Carte du Labo (fond encre) ----------------------------------------- */
.sk-carte-labo {
	background: var(--wp--preset--color--encre);
	border-radius: var(--wp--custom--rayon--l);
	padding: var(--wp--preset--spacing--40);
	height: 100%;
	display: flex; flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}
.sk-carte-labo :is(h1,h2,h3,h4,h5,h6), .sk-carte-labo a { color: var(--wp--preset--color--papier); }
.sk-carte-labo a:hover { color: var(--wp--preset--color--orange-signal); }

/* --- Fiche technique : durée / coût / verdict ---------------------------- */
.sk-fiche {
	background: var(--wp--preset--color--encre);
	border-radius: var(--wp--custom--rayon--l);
	padding: 1.75rem 2rem;
	display: flex; flex-wrap: wrap;
	gap: 1.5rem 2.5rem;
	justify-content: space-between; align-items: center;
}
.sk-fiche__item { display: flex; flex-direction: column; gap: 0.3rem; }
.sk-fiche__cle {
	font-family: var(--wp--preset--font-family--mesure);
	font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--wp--preset--color--gris-sourd);
}
.sk-fiche__valeur {
	font-family: var(--wp--preset--font-family--mesure);
	font-size: 1.625rem; font-weight: 700; line-height: 1.1;
	color: var(--wp--preset--color--papier);
}
.sk-fiche__valeur--verdict { color: var(--wp--preset--color--orange-signal); }

/* --- Statistique de protocole (bloc « Ce que ça a changé »), protocole-stats.php --- */
.sk-stat {
	background: var(--wp--preset--color--sable);
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: var(--wp--custom--rayon--l);
	padding: var(--wp--preset--spacing--20);
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}
.sk-stat__valeur {
	font-family: var(--wp--preset--font-family--mesure);
	font-size: 2rem;
	font-weight: 700;
	color: var(--wp--preset--color--orange-action);
	line-height: 1;
	margin: 0;
}
.sk-stat__legende {
	font-size: var(--wp--preset--font-size--s);
	line-height: 1.5;
	color: var(--wp--preset--color--encre-douce);
	margin: 0;
}

/* --- Encadré « Ce qui a raté » : la signature éditoriale ------------------ */
.sk-rate {
	border-left: 3px solid var(--wp--preset--color--orange-signal);
	border-radius: 0 var(--wp--custom--rayon--m) var(--wp--custom--rayon--m) 0;
	background: var(--wp--preset--color--sable);
	padding: 1.5rem 1.75rem;
	display: flex; flex-direction: column; gap: 0.7rem;
}
.sk-rate p { margin: 0; }

/* --- Articles / protocoles liés (bas d'article), [stoykh_articles_lies] --- */
.sk-suite { display: flex; flex-direction: column; gap: 1.125rem; }
.sk-suite__titre {
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--encre);
	margin: 0;
}
.sk-suite__grille {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.125rem;
}
.sk-suite__carte {
	background: var(--wp--preset--color--papier);
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: var(--wp--custom--rayon--l);
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	text-decoration: none !important;
}
.sk-suite__carte-titre {
	font-family: var(--wp--preset--font-family--titre);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.28;
	color: var(--wp--preset--color--encre);
	margin: 0;
}
.sk-suite__carte-extrait {
	font-size: var(--wp--preset--font-size--s);
	line-height: 1.5;
	color: var(--wp--preset--color--encre-douce);
	margin: 0;
}
.sk-suite__grille--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 600px) {
	.sk-suite__grille { grid-template-columns: 1fr; }
}

/* --- Sceau « Protocole » ------------------------------------------------- */
.sk-sceau {
	width: 68px; height: 68px;
	border: 2px solid var(--wp--preset--color--orange-signal);
	border-radius: 50%;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 2px; flex-shrink: 0;
}
.sk-sceau__texte {
	font-family: var(--wp--preset--font-family--mesure);
	font-size: 0.375rem; font-weight: 700; letter-spacing: 0.14em;
	text-transform: uppercase; color: var(--wp--preset--color--orange-action);
}

/* --- Bouton secondaire (contour encre) ---------------------------------- */
.sk-bouton-secondaire .wp-block-button__link {
	background: transparent !important;
	color: var(--wp--preset--color--encre) !important;
	box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--encre);
}
.sk-bouton-secondaire .wp-block-button__link:hover {
	background: var(--wp--preset--color--encre) !important;
	color: var(--wp--preset--color--papier) !important;
}

/* --- Formulaire Kit (newsletter), bloc-newsletter.php et page /newsletter/ -
   Kit injecte son propre widget en JS (classes « formkit-* »), avec des
   styles inline et une feuille embarquée : on surcharge en !important, seul
   moyen fiable de reprendre le dessus. Kit regroupe champ + bouton sur une
   ligne via un attribut min-width qu'il mesure lui-même en JS (peu fiable
   à ce niveau de largeur) : on l'ignore et on impose notre propre seuil. */
.sk-newsletter-kit .formkit-fields {
	align-items: center;
}
.sk-newsletter-kit .formkit-input,
.sk-newsletter-kit .formkit-submit {
	height: 3.375rem !important;
	box-sizing: border-box !important;
}
.sk-newsletter-kit .formkit-input {
	background: var(--wp--preset--color--papier) !important;
	border: 1px solid var(--wp--preset--color--bordure) !important;
	border-radius: var(--wp--custom--rayon--m) !important;
	padding: 0 1.125rem !important;
	font-family: var(--wp--preset--font-family--titre) !important;
	font-size: var(--wp--preset--font-size--m) !important;
	color: var(--wp--preset--color--encre) !important;
	box-shadow: none !important;
}
.sk-newsletter-kit .formkit-input:focus {
	border-color: var(--wp--preset--color--orange-signal) !important;
}
.sk-newsletter-kit .formkit-submit {
	background: var(--wp--preset--color--orange-signal) !important;
	border-radius: var(--wp--custom--rayon--pastille) !important;
	box-shadow: none !important;
	cursor: pointer;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 1.5rem !important;
}
.sk-newsletter-kit .formkit-submit > span {
	padding: 0 !important;
	color: var(--wp--preset--color--encre) !important;
	font-family: var(--wp--preset--font-family--titre) !important;
	font-weight: 700 !important;
	font-size: var(--wp--preset--font-size--m) !important;
	letter-spacing: -0.01em;
}
.sk-newsletter-kit .formkit-submit:hover {
	background: #E65C00 !important;
}
.sk-newsletter-kit .formkit-alert {
	font-size: var(--wp--preset--font-size--s) !important;
	margin-top: 0.5rem !important;
}
@media (min-width: 480px) {
	.sk-newsletter-kit .formkit-fields {
		flex-wrap: nowrap !important;
	}
	.sk-newsletter-kit .formkit-field {
		flex: 1 1 auto !important;
		margin: 0 0.625rem 0 0 !important;
	}
	.sk-newsletter-kit .formkit-submit {
		flex: 0 0 auto !important;
		margin: 0 !important;
	}
}

/* --- En-tête : « La lettre » comme item de menu mis en valeur, plutôt
   qu'un bouton séparé. Ciblé par href plutôt que par une classe posée sur
   le lien lui-même (impossible à faire depuis les fichiers du thème — le
   contenu du menu vit dans le menu de navigation géré depuis l'admin). */
.sk-nav-principale a[href$="/newsletter/"] {
	background: var(--wp--preset--color--orange-signal) !important;
	color: var(--wp--preset--color--encre) !important;
	border-radius: var(--wp--custom--rayon--pastille);
	padding: 0.7rem 1.375rem !important;
	font-weight: 700 !important;
}
.sk-nav-principale a[href$="/newsletter/"]:hover {
	background: #E65C00 !important;
	color: var(--wp--preset--color--encre) !important;
}
/* Le menu ouvre avec le focus clavier posé sur le premier lien (bon pour
   l'accessibilité en général), ce qui déclenche le contour orange global
   du thème (theme.json, éléments > lien > :focus) et donne l'impression
   d'une « page courante » encadrée. Retiré spécifiquement ici, sur
   demande — ailleurs sur le site, le contour reste actif. */
.sk-nav-principale a:focus { outline: none; }

/* --- En-tête : champ de recherche en pastille, style repris de lokan.fr
   (icône à gauche, champ simple en pilule, sans bordure). WordPress place
   le bouton après le champ dans le HTML (bon pour l'accessibilité au
   clavier/lecteur d'écran — on ne touche pas à cet ordre), donc on le
   repositionne visuellement à gauche par CSS (order) plutôt que de le
   supprimer. --------------------------------------------------------- */
.sk-recherche .wp-block-search__inside-wrapper {
	display: flex;
	align-items: center;
	border: none;
	background: var(--wp--preset--color--sable);
	border-radius: var(--wp--custom--rayon--pastille);
	padding: 0.2rem 0.9rem 0.2rem 0.2rem;
	min-height: 44px;
}
.sk-recherche .wp-block-search__input {
	order: 1;
	border: 0;
	background: transparent;
	font-size: var(--wp--preset--font-size--s);
	min-width: 0;
	margin-left: 0.5rem;
}
.sk-recherche .wp-block-search__input:focus { outline: none; }
.sk-recherche .wp-block-search__input::placeholder { color: var(--wp--preset--color--gris-sourd); }
/* Masque le bouton natif d'effacement (la petite croix) des champs
   type="search" — inutile ici, on garde juste le champ et la loupe. */
.sk-recherche .wp-block-search__input::-webkit-search-cancel-button,
.sk-recherche .wp-block-search__input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}
.sk-recherche .wp-block-search__button {
	order: 0;
	background: transparent !important;
	color: var(--wp--preset--color--gris-sourd) !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	width: 30px;
	height: 30px;
	min-width: 30px;
	margin-left: 0.6rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--wp--custom--rayon--pastille);
}

/* --- Popup de recherche (en dessous de 785px, à la place du champ complet)
   Le bloc Navigation natif de WordPress bascule nativement à 600px
   (wp-includes/blocks/navigation/style.min.css). On force son seuil à 785px
   juste après (voir plus bas, "Menu : recale le seuil natif") pour que le
   menu et la recherche basculent en mode compact au même moment.
   --------------------------------------------------------------------- */
.sk-recherche-icone {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border: none;
	background: none;
	color: var(--wp--preset--color--gris-sourd);
	cursor: pointer;
}
.sk-recherche-icone:hover {
	color: var(--wp--preset--color--encre);
}
.sk-recherche-modal {
	border: none;
	border-radius: var(--wp--custom--rayon--l);
	padding: 1.5rem;
	width: min(90vw, 480px);
	box-shadow: 0 12px 40px rgba(20, 19, 18, 0.18);
}
.sk-recherche-modal::backdrop { background: rgba(20, 19, 18, 0.5); }
.sk-recherche-modal__form {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: var(--wp--custom--rayon--pastille);
	padding: 0.75rem 1.25rem;
	color: var(--wp--preset--color--gris-sourd);
}
.sk-recherche-modal__form svg { flex-shrink: 0; }
.sk-recherche-modal__form input {
	flex: 1;
	border: none;
	outline: none;
	background: transparent;
	font-family: var(--wp--preset--font-family--titre);
	font-size: var(--wp--preset--font-size--m);
	color: var(--wp--preset--color--encre);
}
@media (max-width: 785px) {
	/* Scopé à l'en-tête : le champ sk-recherche réutilisé en pleine largeur
	   sur la page de résultats de recherche (search.html) n'a pas d'icône
	   de repli, il doit rester visible à toutes les tailles. */
	.sk-entete-actions .sk-recherche { display: none; }
	.sk-recherche-icone { display: flex; }
}

/* Menu : recale le seuil natif (600px) du bloc Navigation sur 785px, celui
   de la recherche et du reste du site, pour qu'ils basculent ensemble.
   Scopé à la media query : au-dessus de 785px, aucune règle à nous ne doit
   forcer l'affichage du bouton hamburger, pour laisser WordPress le masquer
   nativement (sa propre media query est à 600px). */
@media (max-width: 785px) {
	.sk-nav-principale .wp-block-navigation__responsive-container-open {
		display: flex !important;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		background: none;
		color: var(--wp--preset--color--gris-sourd);
	}
	.sk-nav-principale .wp-block-navigation__responsive-container-open:hover {
		color: var(--wp--preset--color--encre);
	}
	.sk-nav-principale .wp-block-navigation__responsive-container-open svg {
		width: 18px;
		height: 18px;
	}
	.sk-nav-principale .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
		position: fixed !important;
	}
}

/* En-tête : logo centré, icônes à droite, quand le menu et la recherche
   sont minifiés. Grille à 3 colonnes plutôt qu'un flex + marge auto : plus
   fiable, l'identité est posée au centre et les actions dans la dernière
   colonne, sans dépendre de l'ordre ou du nombre d'éléments restants.
   !important nécessaire : la classe générée par le moteur de layout des
   blocs (.is-layout-flex, deux classes) est plus spécifique que .sk-entete
   seule et impose display:flex sans media query. */
@media (max-width: 785px) {
	.sk-entete {
		display: grid !important;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
	}
	.sk-entete-identite {
		grid-column: 2;
		justify-self: center;
	}
	.sk-entete-actions {
		grid-column: 3;
		justify-self: end;
	}
}
.sk-recherche .wp-block-search__button svg { width: 15px; height: 15px; }
.sk-recherche .wp-block-search__button:hover {
	background: var(--wp--preset--color--bordure) !important;
	color: var(--wp--preset--color--encre) !important;
}

/* --- Zone de lecture ----------------------------------------------------- */
.sk-lecture > * { max-width: 68ch; }

/* --- Accessibilité ------------------------------------------------------- */
.sk-saut-lien {
	position: absolute; left: -9999px;
	background: var(--wp--preset--color--orange-signal);
	color: var(--wp--preset--color--encre);
	padding: 0.75rem 1.25rem; font-weight: 700; z-index: 100;
	border-radius: var(--wp--custom--rayon--m);
}
.sk-saut-lien:focus { left: 1rem; top: 1rem; }

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

/* --- Mobile -------------------------------------------------------------- */
@media (max-width: 781px) {
	.sk-fiche { gap: 1.25rem 2rem; }
	.sk-fiche__valeur { font-size: 1.375rem; }
	.wp-block-button__link { min-height: 48px; display: flex; align-items: center; justify-content: center; }

	/* Bloc « À la une » : la grille 2 colonnes n'a aucun sens sous ~780px de
	   large — empile « À la une » puis les 2 tuiles de droite, chacune à sa
	   hauteur naturelle. Le mécanisme desktop (la photo de droite s'étire
	   pour égaler la hauteur de « À la une ») n'a plus de raison d'être une
	   fois empilé : chaque tuile retrouve une photo à ratio fixe, normale —
	   les titres et extraits suivent déjà l'échelle fluide de theme.json
	   (clamp min/max), pas besoin de les retoucher ici. */
	.sk-une {
		display: flex !important;
		flex-direction: column;
		gap: 1.25rem;
	}
	.sk-une > .wp-block-column:first-child,
	.sk-une > .wp-block-column:last-child {
		width: 100%;
	}
	.sk-une > .wp-block-column:last-child {
		flex-direction: column;
		gap: 1rem;
	}
	.sk-une > .wp-block-column:last-child > .wp-block-query {
		flex: none;
	}
	.sk-une > .wp-block-column:last-child .wp-block-post-featured-image {
		flex: none;
		aspect-ratio: 16 / 9;
	}
	.sk-une > .wp-block-column:last-child .wp-block-post-featured-image img {
		height: auto !important;
		aspect-ratio: 16 / 9 !important;
	}
}