/* ==========================================================================
   Alti — Bibliothèque de composants
   Couverture du catalogue Material 3 (m3.material.io/components), habillée
   avec les jetons ALTI : rouge/orange, Sora/Inter, formes « pilule »,
   surfaces à bordure plutôt qu'à ombre. Comportements : assets/js/composants.js.
   Inventaire et correspondance M3 : alti/docs/composants.md
   ========================================================================== */

:root {
	/* Rôles de couleur (équivalents M3) */
	--alti-primaire: #c9301a;            /* primary */
	--alti-sur-primaire: #fff;           /* on-primary */
	--alti-conteneur: #fff0eb;           /* primary-container */
	--alti-sur-conteneur: #8f2213;       /* on-primary-container — 8,4:1 */
	--alti-surface: #fff;                /* surface */
	--alti-surface-basse: #fafafa;       /* surface-container-low */
	--alti-surface-haute: #f2f2f2;       /* surface-container-high */
	--alti-texte: #1f1f1f;               /* on-surface */
	--alti-texte-2: #6b6b6b;             /* on-surface-variant */
	--alti-contour: #8a8a8a;             /* outline — 3,4:1 sur blanc (contours de contrôles) */
	--alti-contour-doux: #e6e6e6;        /* outline-variant — décoratif */
	--alti-inverse: #1f1f1f;             /* inverse-surface */
	--alti-sur-inverse: #fff;
	--alti-primaire-inverse: #ff8a5c;    /* inverse-primary — 7,1:1 sur #1f1f1f */
	--alti-erreur: #b3261e;
	--alti-succes: #1e7a46;
	--alti-degrade: linear-gradient(90deg, #c9301a 0%, #ff6b35 100%);
	--alti-voile: rgba(31, 31, 31, 0.5); /* scrim */

	/* Élévation (réservée aux éléments flottants) */
	--alti-ombre-1: 0 1px 2px rgba(31, 31, 31, 0.08), 0 2px 8px rgba(31, 31, 31, 0.06);
	--alti-ombre-2: 0 4px 12px rgba(31, 31, 31, 0.1), 0 12px 32px rgba(31, 31, 31, 0.12);

	/* Formes */
	--alti-r-xs: 4px;
	--alti-r-s: 8px;
	--alti-r-m: 16px;
	--alti-r-l: 20px;
	--alti-r-xl: 24px;
	--alti-r-pilule: 999px;

	/* Mouvement */
	--alti-duree: 0.2s;
	--alti-courbe: cubic-bezier(0.2, 0, 0, 1);
}

/* --------------------------------------------------------------------------
   Utilitaires communs
   -------------------------------------------------------------------------- */
.alti-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Couche d'état M3 (survol 8 %, focus/appui 12 %) */
:is(.alti-btn, .alti-btn-icone, .alti-fab, .alti-puce, .alti-liste__lien, .alti-menu__item,
	.alti-onglet, .alti-segmente label, .alti-nav-item, .alti-carte--lien) {
	position: relative;
	isolation: isolate;
}

:is(.alti-btn, .alti-btn-icone, .alti-fab, .alti-puce, .alti-liste__lien, .alti-menu__item,
	.alti-onglet, .alti-segmente label, .alti-nav-item, .alti-carte--lien)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: currentColor;
	opacity: 0;
	transition: opacity var(--alti-duree) var(--alti-courbe);
	pointer-events: none;
}

:is(.alti-btn, .alti-btn-icone, .alti-fab, .alti-puce, .alti-liste__lien, .alti-menu__item,
	.alti-onglet, .alti-segmente label, .alti-nav-item, .alti-carte--lien):hover::before {
	opacity: 0.08;
}

:is(.alti-btn, .alti-btn-icone, .alti-fab, .alti-puce, .alti-liste__lien, .alti-menu__item,
	.alti-onglet, .alti-segmente label, .alti-nav-item, .alti-carte--lien):active::before {
	opacity: 0.12;
}

:is(.alti-btn, .alti-btn-icone, .alti-fab, .alti-puce, .alti-liste__lien, .alti-menu__item,
	.alti-onglet, .alti-nav-item, .alti-carte--lien, .alti-case input, .alti-radio input,
	.alti-interrupteur input, .alti-curseur input):focus-visible,
.alti-segmente input:focus-visible + label {
	outline: 2px solid var(--alti-texte);
	outline-offset: 3px;
}

/* ==========================================================================
   ACTIONS
   ========================================================================== */

/* Boutons — M3 Buttons (filled, tonal, outlined, text, elevated) */
.alti-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 48px;
	padding: 0.75rem 1.75rem;
	border: 0;
	border-radius: var(--alti-r-pilule);
	font-family: var(--wp--preset--font-family--sora);
	font-weight: 700;
	font-size: 0.9375rem;
	line-height: 1.25;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: box-shadow var(--alti-duree) var(--alti-courbe), background var(--alti-duree);
	--alti-ic-taille: 18px;
}

.alti-btn--plein { background: var(--alti-degrade); color: var(--alti-sur-primaire); }
.alti-btn--tonal { background: var(--alti-conteneur); color: var(--alti-sur-conteneur); }
.alti-btn--contour { background: transparent; color: var(--alti-texte); box-shadow: inset 0 0 0 1.5px var(--alti-texte); }
.alti-btn--texte { background: transparent; color: var(--alti-primaire); padding-inline: 0.75rem; }
.alti-btn--eleve { background: var(--alti-surface); color: var(--alti-primaire); box-shadow: var(--alti-ombre-1); }
.alti-btn--eleve:hover { box-shadow: var(--alti-ombre-2); }

.alti-btn--s { min-height: 36px; padding: 0.5rem 1.125rem; font-size: 0.8125rem; --alti-ic-taille: 16px; }
.alti-btn--l { min-height: 56px; padding: 1.125rem 2.25rem; font-size: 1rem; --alti-ic-taille: 20px; }
.alti-btn--bloc { display: flex; width: 100%; }

.alti-btn:is(:disabled, [aria-disabled="true"]) {
	background: rgba(31, 31, 31, 0.12);
	color: rgba(31, 31, 31, 0.38);
	box-shadow: none;
	cursor: not-allowed;
}
.alti-btn--texte:is(:disabled, [aria-disabled="true"]),
.alti-btn--contour:is(:disabled, [aria-disabled="true"]) { background: transparent; }
.alti-btn--contour:is(:disabled, [aria-disabled="true"]) { box-shadow: inset 0 0 0 1.5px rgba(31, 31, 31, 0.12); }
.alti-btn:is(:disabled, [aria-disabled="true"])::before { display: none; }

/* Variantes pour le bloc Bouton de l'éditeur (styles « Tonal », « Texte », « Élevé ») */
.wp-block-button.is-style-tonal .wp-block-button__link { background: var(--alti-conteneur); color: var(--alti-sur-conteneur); }
.wp-block-button.is-style-texte .wp-block-button__link { background: transparent; color: var(--alti-primaire); padding-inline: 0.75rem; text-decoration: underline; text-underline-offset: 0.3em; }
.wp-block-button.is-style-eleve .wp-block-button__link { background: var(--alti-surface); color: var(--alti-primaire); box-shadow: var(--alti-ombre-1); }
.wp-block-button.is-style-eleve .wp-block-button__link:hover { box-shadow: var(--alti-ombre-2); }

/* Groupe de boutons — M3 Button groups */
.alti-groupe-btn { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.alti-groupe-btn--connecte { gap: 2px; flex-wrap: nowrap; max-width: 100%; }
.alti-groupe-btn--connecte > .alti-btn { flex: 1 1 auto; min-width: 0; padding-inline: clamp(0.75rem, 3vw, 1.75rem); overflow: hidden; text-overflow: ellipsis; }
.alti-groupe-btn--connecte > .alti-btn { border-radius: var(--alti-r-s); }
.alti-groupe-btn--connecte > .alti-btn:first-child { border-radius: var(--alti-r-pilule) var(--alti-r-s) var(--alti-r-s) var(--alti-r-pilule); }
.alti-groupe-btn--connecte > .alti-btn:last-child { border-radius: var(--alti-r-s) var(--alti-r-pilule) var(--alti-r-pilule) var(--alti-r-s); }

/* Boutons icône — M3 Icon buttons (standard, filled, tonal, outlined, bascule) */
.alti-btn-icone {
	display: inline-grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--alti-texte-2);
	cursor: pointer;
	--alti-ic-taille: 22px;
}
.alti-btn-icone--plein { background: var(--alti-degrade); color: #fff; }
.alti-btn-icone--tonal { background: var(--alti-conteneur); color: var(--alti-sur-conteneur); }
.alti-btn-icone--contour { box-shadow: inset 0 0 0 1px var(--alti-contour); color: var(--alti-texte); }
.alti-btn-icone--s { width: 40px; height: 40px; --alti-ic-taille: 18px; }
.alti-btn-icone[aria-pressed="true"] { background: var(--alti-primaire); color: #fff; box-shadow: none; }
.alti-btn-icone:disabled { color: rgba(31, 31, 31, 0.38); background: transparent; box-shadow: none; cursor: not-allowed; }

/* Boutons segmentés — M3 Segmented buttons (radios natifs) */
.alti-segmente { display: inline-flex; max-width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; }
.alti-segmente legend { margin-bottom: 0.5rem; font-weight: 600; font-size: 0.8125rem; }
.alti-segmente__options { display: inline-flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
@media (max-width: 600px) { .alti-segmente label { padding: 0 0.875rem; } }
.alti-segmente input { position: absolute; opacity: 0; pointer-events: none; }
.alti-segmente label {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	min-height: 44px;
	padding: 0 1.25rem;
	border: 1px solid var(--alti-contour);
	margin-left: -1px;
	font-family: var(--wp--preset--font-family--sora);
	font-weight: 700;
	font-size: 0.8125rem;
	color: var(--alti-texte);
	cursor: pointer;
	--alti-ic-taille: 16px;
}
.alti-segmente__options label:first-of-type { margin-left: 0; border-radius: var(--alti-r-pilule) 0 0 var(--alti-r-pilule); }
.alti-segmente__options label:last-of-type { border-radius: 0 var(--alti-r-pilule) var(--alti-r-pilule) 0; }
.alti-segmente input:checked + label { background: var(--alti-conteneur); color: var(--alti-sur-conteneur); }
.alti-segmente input:checked + label::after {
	content: "";
	order: -1;
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: var(--alti-svg-check) center / contain no-repeat;
	mask: var(--alti-svg-check) center / contain no-repeat;
}

/* Bouton scindé — M3 Split button */
.alti-btn-scinde { display: inline-flex; gap: 2px; }
.alti-btn-scinde > .alti-btn:first-child { border-radius: var(--alti-r-pilule) var(--alti-r-xs) var(--alti-r-xs) var(--alti-r-pilule); }
.alti-btn-scinde > .alti-btn:last-child { padding-inline: 0.875rem; border-radius: var(--alti-r-xs) var(--alti-r-pilule) var(--alti-r-pilule) var(--alti-r-xs); }
.alti-btn-scinde > .alti-btn:last-child .alti-ic { transition: transform var(--alti-duree) var(--alti-courbe); }
.alti-btn-scinde > [aria-expanded="true"] .alti-ic { transform: rotate(180deg); }

/* FAB et FAB étendu — M3 FAB / Extended FAB */
.alti-fab {
	display: inline-grid;
	place-items: center;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--alti-degrade);
	color: #fff;
	box-shadow: var(--alti-ombre-2);
	cursor: pointer;
	text-decoration: none;
	--alti-ic-taille: 24px;
}
.alti-fab--s { width: 44px; height: 44px; --alti-ic-taille: 20px; }
.alti-fab--l { width: 96px; height: 96px; --alti-ic-taille: 36px; }
.alti-fab--tonal { background: var(--alti-conteneur); color: var(--alti-sur-conteneur); }
.alti-fab--surface { background: var(--alti-surface); color: var(--alti-primaire); }
.alti-fab--etendu {
	display: inline-flex;
	gap: 0.625rem;
	width: auto;
	padding: 0 1.5rem 0 1.25rem;
	border-radius: var(--alti-r-pilule);
	font-family: var(--wp--preset--font-family--sora);
	font-weight: 700;
	font-size: 0.9375rem;
}
/* Position flottante (bas droite, au-dessus de la barre de navigation mobile éventuelle) */
.alti-fab--flottant {
	position: fixed;
	right: max(1rem, env(safe-area-inset-right));
	bottom: max(1rem, env(safe-area-inset-bottom));
	z-index: 90;
}

/* Menu FAB — M3 FAB menu */
.alti-fab-menu { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 0.75rem; }
.alti-fab-menu__liste {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.alti-fab-menu__liste[hidden] { display: none; }
.alti-fab-menu__liste .alti-btn { box-shadow: var(--alti-ombre-1); }
.alti-fab-menu > .alti-fab .alti-ic { transition: transform var(--alti-duree) var(--alti-courbe); }
.alti-fab-menu > .alti-fab[aria-expanded="true"] .alti-ic { transform: rotate(45deg); }

/* ==========================================================================
   COMMUNICATION
   ========================================================================== */

/* Badges — M3 Badges (+ étiquette texte ALTI) */
.alti-avec-badge { position: relative; display: inline-flex; }
.alti-badge {
	display: inline-grid;
	place-items: center;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: var(--alti-r-pilule);
	background: var(--alti-primaire);
	color: #fff;
	font: 700 0.6875rem/1 var(--wp--preset--font-family--inter);
}
.alti-badge--point { min-width: 8px; width: 8px; height: 8px; padding: 0; }
.alti-avec-badge > .alti-badge { position: absolute; top: 6px; right: 6px; transform: translate(40%, -40%); box-shadow: 0 0 0 2px #fff; }
.alti-etiquette {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.25rem 0.75rem;
	border-radius: var(--alti-r-pilule);
	background: var(--alti-conteneur);
	color: var(--alti-sur-conteneur);
	font: 700 0.75rem/1.4 var(--wp--preset--font-family--sora);
	letter-spacing: 0.04em;
	--alti-ic-taille: 14px;
}
.alti-etiquette--neutre { background: var(--alti-surface-haute); color: var(--alti-texte); }
.alti-etiquette--succes { background: #e5f3eb; color: #155a33; }
p.is-style-etiquette { display: inline-block; padding: 0.25rem 0.75rem; border-radius: var(--alti-r-pilule); background: var(--alti-conteneur); color: var(--alti-sur-conteneur); font: 700 0.75rem/1.4 var(--wp--preset--font-family--sora); letter-spacing: 0.04em; }

/* Indicateur de chargement — M3 Loading indicator (forme qui se transforme) */
.alti-chargement {
	display: inline-block;
	width: 48px;
	height: 48px;
	background: var(--alti-degrade);
	animation: alti-morph 1.6s var(--alti-courbe) infinite, alti-tour 3.2s linear infinite;
}
.alti-chargement--conteneur { display: inline-grid; place-items: center; border-radius: 50%; background: var(--alti-conteneur); animation: none; }
.alti-chargement--conteneur::before { content: ""; width: 30px; height: 30px; background: var(--alti-degrade); animation: alti-morph 1.6s var(--alti-courbe) infinite, alti-tour 3.2s linear infinite; }
@keyframes alti-morph {
	0%, 100% { border-radius: 50%; transform: scale(0.85); }
	25% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
	50% { border-radius: 20%; transform: scale(1); }
	75% { border-radius: 70% 30% 50% 50% / 40% 60% 40% 60%; }
}
@keyframes alti-tour { to { rotate: 360deg; } }

/* Indicateurs de progression — M3 Progress indicators (linéaire / circulaire) */
.alti-progression {
	position: relative;
	height: 6px;
	overflow: hidden;
	border-radius: var(--alti-r-pilule);
	background: var(--alti-conteneur);
}
.alti-progression__barre {
	position: absolute;
	inset: 0 auto 0 0;
	width: calc(var(--valeur, 0) * 1%);
	border-radius: inherit;
	background: var(--alti-degrade);
	transition: width 0.4s var(--alti-courbe);
}
.alti-progression--indetermine .alti-progression__barre { width: 40%; animation: alti-glisse 1.4s var(--alti-courbe) infinite; }
@keyframes alti-glisse { from { left: -40%; } to { left: 100%; } }

.alti-progression-cercle {
	--taille: 48px;
	--epaisseur: 5px;
	display: inline-block;
	width: var(--taille);
	height: var(--taille);
	border-radius: 50%;
	background: conic-gradient(var(--alti-primaire) calc(var(--valeur, 0) * 1%), var(--alti-conteneur) 0);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--epaisseur)), #000 calc(100% - var(--epaisseur) + 1px));
	mask: radial-gradient(farthest-side, transparent calc(100% - var(--epaisseur)), #000 calc(100% - var(--epaisseur) + 1px));
}
.alti-progression-cercle--indetermine {
	background: conic-gradient(var(--alti-primaire) 0 28%, var(--alti-conteneur) 0);
	animation: alti-tour 1s linear infinite;
}

/* Snackbar — M3 Snackbar */
.alti-snackbar {
	display: flex;
	align-items: center;
	gap: 1rem;
	max-width: min(560px, calc(100vw - 2rem));
	min-height: 48px;
	box-sizing: border-box;
	padding: 0.75rem 0.75rem 0.75rem 1.25rem;
	border-radius: var(--alti-r-m);
	background: var(--alti-inverse);
	color: var(--alti-sur-inverse);
	box-shadow: var(--alti-ombre-2);
	font-size: 0.875rem;
	line-height: 1.4;
}
.alti-snackbar__texte { flex: 1; }
.alti-snackbar .alti-btn--texte { color: var(--alti-primaire-inverse); min-height: 40px; }
.alti-snackbar .alti-btn-icone { color: var(--alti-sur-inverse); width: 40px; height: 40px; --alti-ic-taille: 18px; }
.alti-snackbar-zone {
	position: fixed;
	left: 50%;
	bottom: max(1rem, env(safe-area-inset-bottom));
	z-index: 100;
	transform: translateX(-50%);
	display: grid;
	gap: 0.5rem;
}
.alti-snackbar-zone .alti-snackbar { animation: alti-monte 0.25s var(--alti-courbe); }
@keyframes alti-monte { from { opacity: 0; transform: translateY(12px); } }

/* Infobulles — M3 Tooltips (simple / riche) */
.alti-infobulle-ancre { position: relative; display: inline-flex; }
.alti-infobulle {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 8px);
	z-index: 50;
	width: max-content;
	max-width: 240px;
	padding: 0.375rem 0.625rem;
	border-radius: var(--alti-r-xs);
	background: var(--alti-inverse);
	color: var(--alti-sur-inverse);
	font-size: 0.75rem;
	line-height: 1.4;
	transform: translateX(-50%);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease 0.3s, visibility 0s linear 0.45s;
	pointer-events: none;
}
.alti-infobulle-ancre:is(:hover, :focus-within) > .alti-infobulle { opacity: 1; visibility: visible; transition-delay: 0.3s, 0s; }
.alti-infobulle--riche {
	max-width: 300px;
	padding: 0.875rem 1rem 0.5rem;
	border-radius: var(--alti-r-m);
	background: var(--alti-surface);
	color: var(--alti-texte-2);
	box-shadow: var(--alti-ombre-2);
	font-size: 0.875rem;
	text-align: left;
	pointer-events: auto;
}
.alti-infobulle--riche strong { display: block; margin-bottom: 0.25rem; color: var(--alti-texte); font-family: var(--wp--preset--font-family--sora); }
.alti-infobulle--riche .alti-btn { margin-left: -0.75rem; }

/* ==========================================================================
   CONTENANTS
   ========================================================================== */

/* Cartes — M3 Cards (elevated, filled, outlined) */
.alti-carte {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: var(--alti-carte-pad, 2rem);
	border-radius: var(--alti-r-l);
	color: var(--alti-texte);
	text-decoration: none;
}
.alti-carte--contour { background: var(--alti-surface); border: 1px solid var(--wp--preset--color--bordure, #f0f0f0); }
.alti-carte--pleine { background: var(--alti-surface-haute); }
.alti-carte--elevee { background: var(--alti-surface); box-shadow: var(--alti-ombre-1); }
.alti-carte--lien { transition: box-shadow var(--alti-duree) var(--alti-courbe), transform var(--alti-duree) var(--alti-courbe); }
.alti-carte--lien:hover { box-shadow: var(--alti-ombre-2); transform: translateY(-2px); }
.alti-carte--lien::before { opacity: 0 !important; }
.alti-carte__media { margin: calc(var(--alti-carte-pad, 2rem) * -1) calc(var(--alti-carte-pad, 2rem) * -1) 0.5rem; border-radius: var(--alti-r-l) var(--alti-r-l) 0 0; overflow: hidden; aspect-ratio: 16 / 9; }
.alti-carte__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.alti-carte__titre { margin: 0; font: 700 1.25rem/1.25 var(--wp--preset--font-family--sora); }
.alti-carte__texte { margin: 0; color: var(--alti-texte-2); font-size: 0.9375rem; }
.alti-carte__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; padding-top: 0.5rem; }
/* Styles de bloc Groupe : « Carte pleine », « Carte élevée » */
.is-style-carte-pleine { background: var(--alti-surface-haute); border-radius: var(--alti-r-l); padding: var(--alti-carte-pad, 2rem); }
.is-style-carte-elevee { background: var(--alti-surface); border-radius: var(--alti-r-l); padding: var(--alti-carte-pad, 2rem); box-shadow: var(--alti-ombre-1); }

/* Carrousel — M3 Carousel (défilement aimanté, navigation par boutons) */
.alti-carrousel { display: grid; gap: 1rem; }
.alti-carrousel__piste {
	display: flex;
	gap: 0.75rem;
	margin: 0;
	padding: 0 0 0.25rem;
	overflow-x: auto;
	list-style: none;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}
.alti-carrousel__piste::-webkit-scrollbar { display: none; }
.alti-carrousel__piste > li {
	position: relative;
	flex: 0 0 min(72%, 320px);
	aspect-ratio: 3 / 4;
	border-radius: var(--alti-r-xl);
	overflow: hidden;
	scroll-snap-align: start;
	background: var(--alti-surface-haute);
}
.alti-carrousel__piste img { width: 100%; height: 100%; object-fit: cover; display: block; }
.alti-carrousel__legende {
	position: absolute;
	inset: auto 0.75rem 0.75rem;
	padding: 0.75rem 1rem;
	border-radius: var(--alti-r-m);
	background: rgba(255, 255, 255, 0.92);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	font-size: 0.875rem;
}
.alti-carrousel__legende strong { display: block; font-family: var(--wp--preset--font-family--sora); }
.alti-carrousel__nav { display: flex; justify-content: flex-end; gap: 0.5rem; }

/* Boîtes de dialogue — M3 Dialogs (élément <dialog> natif) */
.alti-dialogue {
	width: min(560px, calc(100vw - 2rem));
	max-height: calc(100dvh - 2rem);
	box-sizing: border-box;
	padding: 1.5rem;
	border: 0;
	border-radius: var(--alti-r-xl);
	background: var(--alti-surface);
	color: var(--alti-texte);
	box-shadow: var(--alti-ombre-2);
}
.alti-dialogue::backdrop { background: var(--alti-voile); }
.alti-dialogue[open] { animation: alti-apparait 0.25s var(--alti-courbe); }
@keyframes alti-apparait { from { opacity: 0; transform: scale(0.96); } }
.alti-dialogue__icone { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 1rem; border-radius: 50%; background: var(--alti-conteneur); color: var(--alti-primaire); }
.alti-dialogue__titre { margin: 0 0 0.75rem; font: 800 1.5rem/1.25 var(--wp--preset--font-family--sora); }
.alti-dialogue--centre .alti-dialogue__titre { text-align: center; }
.alti-dialogue__corps { color: var(--alti-texte-2); font-size: 0.9375rem; }
.alti-dialogue__corps > * + * { margin-top: 1rem; }
.alti-dialogue__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; margin-top: 1.5rem; }
/* Plein écran sur mobile */
@media (max-width: 600px) {
	.alti-dialogue--plein-ecran { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; border-radius: 0; }
}

/* Feuilles (bas / côté) — M3 Bottom sheets / Side sheets */
.alti-feuille {
	box-sizing: border-box;
	margin: 0;
	padding: 1.5rem;
	border: 0;
	background: var(--alti-surface);
	color: var(--alti-texte);
	box-shadow: var(--alti-ombre-2);
}
.alti-feuille::backdrop { background: var(--alti-voile); }
.alti-feuille--bas {
	inset: auto 0 0;
	width: min(640px, 100vw);
	max-width: 100vw;
	max-height: 85dvh;
	margin-inline: auto;
	padding-top: 0.75rem;
	border-radius: var(--alti-r-xl) var(--alti-r-xl) 0 0;
}
.alti-feuille--bas[open] { animation: alti-monte 0.3s var(--alti-courbe); }
.alti-feuille--bas::before { content: ""; display: block; width: 32px; height: 4px; margin: 0 auto 1rem; border-radius: 2px; background: var(--alti-contour); }
.alti-feuille--cote {
	inset: 0 0 0 auto;
	width: min(400px, 100vw);
	max-width: 100vw;
	height: 100dvh;
	max-height: none;
	border-radius: var(--alti-r-xl) 0 0 var(--alti-r-xl);
}
.alti-feuille--cote[open] { animation: alti-entre-droite 0.3s var(--alti-courbe); }
@keyframes alti-entre-droite { from { transform: translateX(100%); } }
.alti-feuille__entete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.alti-feuille__titre { margin: 0; font: 800 1.375rem/1.25 var(--wp--preset--font-family--sora); }

/* Séparateurs — M3 Dividers */
.alti-separateur { height: 1px; margin: 1rem 0; border: 0; background: var(--wp--preset--color--bordure, #f0f0f0); }
.alti-separateur--insere { margin-left: 4.5rem; }
.alti-separateur--vertical { display: inline-block; width: 1px; height: auto; align-self: stretch; margin: 0 0.5rem; }
.wp-block-separator { border: 0; border-top: 1px solid var(--wp--preset--color--bordure, #f0f0f0); opacity: 1; }
.wp-block-separator.is-style-trait-orange { width: 40px; border-top: 2px solid var(--wp--preset--color--orange, #ff6b35); margin-left: 0; }

/* Listes — M3 Lists (1, 2 ou 3 lignes ; éléments de tête et de fin) */
.alti-liste { margin: 0; padding: 0.5rem 0; list-style: none; background: var(--alti-surface); border-radius: var(--alti-r-l); }
.alti-liste__item, .alti-liste__lien {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: 56px;
	padding: 0.5rem 1.25rem;
	color: var(--alti-texte);
	text-decoration: none;
}
.alti-liste > li + li { border-top: 1px solid var(--wp--preset--color--bordure, #f0f0f0); }
.alti-liste__lien { margin: 0 -1.25rem; }
.alti-liste__tete {
	display: grid;
	place-items: center;
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--alti-conteneur);
	color: var(--alti-primaire);
	overflow: hidden;
	font: 700 0.875rem var(--wp--preset--font-family--sora);
	--alti-ic-taille: 20px;
}
.alti-liste__tete img { width: 100%; height: 100%; object-fit: cover; }
.alti-liste__contenu { flex: 1; min-width: 0; }
.alti-liste__titre { display: block; font-weight: 600; font-size: 1rem; line-height: 1.4; }
.alti-liste__texte { display: block; color: var(--alti-texte-2); font-size: 0.875rem; line-height: 1.45; }
.alti-liste__fin { color: var(--alti-texte-2); font-size: 0.8125rem; --alti-ic-taille: 20px; }
/* Styles de bloc Liste : « Liste cochée » */
ul.is-style-cochee { list-style: none; padding-left: 0; }
ul.is-style-cochee > li { position: relative; padding-left: 2rem; }
ul.is-style-cochee > li + li { margin-top: 0.625rem; }
ul.is-style-cochee > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 20px;
	height: 20px;
	background: var(--wp--preset--color--rouge, #c9301a);
	-webkit-mask: var(--alti-svg-circle-check) center / contain no-repeat;
	mask: var(--alti-svg-circle-check) center / contain no-repeat;
}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */

/* Barre d'application — M3 App bars (barre compacte pour sous-pages / mobile) */
.alti-barre-app {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	min-height: 64px;
	padding: 0 0.5rem;
	background: var(--alti-surface);
	border-bottom: 1px solid var(--wp--preset--color--bordure, #f0f0f0);
}
.alti-barre-app__titre { flex: 1; min-width: 0; margin: 0 0.5rem; font: 800 1.25rem/1.25 var(--wp--preset--font-family--sora); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alti-barre-app--centre .alti-barre-app__titre { text-align: center; }
.alti-barre-app--grande { flex-wrap: wrap; padding-bottom: 1.25rem; }
.alti-barre-app--grande .alti-barre-app__titre { order: 3; flex-basis: 100%; margin: 1rem 0.75rem 0; font-size: 2rem; white-space: normal; }
.alti-barre-app--collante { position: sticky; top: 0; z-index: 80; }

/* Barre de navigation (mobile) — M3 Navigation bar */
.alti-nav-bas {
	display: flex;
	justify-content: space-around;
	gap: 0.25rem;
	padding: 0.75rem 0.5rem max(0.75rem, env(safe-area-inset-bottom));
	background: var(--alti-surface);
	border-top: 1px solid var(--wp--preset--color--bordure, #f0f0f0);
}
.alti-nav-bas--fixe { position: fixed; inset: auto 0 0; z-index: 85; }
.alti-nav-item {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	max-width: 120px;
	padding: 0;
	border-radius: var(--alti-r-m);
	color: var(--alti-texte-2);
	font: 600 0.75rem/1.3 var(--wp--preset--font-family--inter);
	text-decoration: none;
}
.alti-nav-item::before { display: none; }
.alti-nav-item__pastille { display: grid; place-items: center; width: 64px; height: 32px; border-radius: var(--alti-r-pilule); transition: background var(--alti-duree); --alti-ic-taille: 22px; }
.alti-nav-item:hover .alti-nav-item__pastille { background: rgba(31, 31, 31, 0.08); }
.alti-nav-item[aria-current="page"] { color: var(--alti-texte); font-weight: 700; }
.alti-nav-item[aria-current="page"] .alti-nav-item__pastille { background: var(--alti-conteneur); color: var(--alti-sur-conteneur); }

/* Rail de navigation — M3 Navigation rail */
.alti-rail {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	width: 88px;
	padding: 1rem 0;
	background: var(--alti-surface);
	border-right: 1px solid var(--wp--preset--color--bordure, #f0f0f0);
}
.alti-rail .alti-fab { margin-bottom: 1rem; box-shadow: none; }
.alti-rail .alti-nav-item { flex: none; width: 100%; }

/* Tiroir de navigation — M3 Navigation drawer (modal, élément <dialog>) */
.alti-tiroir {
	inset: 0 auto 0 0;
	width: min(320px, 85vw);
	max-width: none;
	height: 100dvh;
	max-height: none;
	box-sizing: border-box;
	margin: 0;
	padding: 1rem 0.75rem;
	border: 0;
	border-radius: 0 var(--alti-r-xl) var(--alti-r-xl) 0;
	background: var(--alti-surface);
}
.alti-tiroir::backdrop { background: var(--alti-voile); }
.alti-tiroir[open] { animation: alti-entre-gauche 0.3s var(--alti-courbe); }
@keyframes alti-entre-gauche { from { transform: translateX(-100%); } }
.alti-tiroir__titre { margin: 0.5rem 1rem 1rem; font: 700 0.8125rem var(--wp--preset--font-family--sora); letter-spacing: 0.08em; text-transform: uppercase; color: var(--alti-texte-2); }
.alti-tiroir ul { margin: 0; padding: 0; list-style: none; }
.alti-tiroir .alti-menu__item { border-radius: var(--alti-r-pilule); min-height: 56px; padding-inline: 1rem; font-weight: 600; }
.alti-tiroir .alti-menu__item[aria-current="page"] { background: var(--alti-conteneur); color: var(--alti-sur-conteneur); }

/* Recherche — M3 Search (+ bloc Recherche de WordPress) */
.alti-recherche {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 0.25rem;
	min-height: 56px;
	padding: 0 0.25rem 0 1.25rem;
	border-radius: var(--alti-r-pilule);
	background: var(--alti-surface-haute);
	color: var(--alti-texte-2);
	--alti-ic-taille: 20px;
}
.alti-recherche:focus-within { background: var(--alti-surface); box-shadow: inset 0 0 0 2px var(--alti-primaire); }
.alti-recherche input {
	flex: 1;
	min-width: 0;
	height: 48px;
	padding: 0 0.5rem;
	border: 0;
	background: transparent;
	color: var(--alti-texte);
	font: inherit;
	font-size: 1rem;
	outline: none;
}
.alti-recherche input::-webkit-search-cancel-button { display: none; }
.alti-recherche input:placeholder-shown ~ [data-alti-effacer] { visibility: hidden; }
.alti-recherche__resultats { margin-top: 0.5rem; border-radius: var(--alti-r-l); box-shadow: var(--alti-ombre-2); }
.wp-block-search .wp-block-search__inside-wrapper { border-radius: var(--alti-r-pilule); background: var(--alti-surface-haute); border: 0; padding: 4px 4px 4px 1.25rem; }
.wp-block-search .wp-block-search__input { border: 0; background: transparent; font: inherit; }
.wp-block-search .wp-block-search__button { margin: 0; border-radius: var(--alti-r-pilule); }

/* Onglets — M3 Tabs (principaux / secondaires) */
.alti-onglets [role="tablist"] {
	display: flex;
	gap: 0.25rem;
	overflow-x: auto;
	border-bottom: 1px solid var(--wp--preset--color--bordure, #f0f0f0);
	scrollbar-width: none;
}
.alti-onglet {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	min-height: 48px;
	padding: 0.75rem 1.25rem;
	border: 0;
	border-radius: var(--alti-r-s) var(--alti-r-s) 0 0;
	background: transparent;
	color: var(--alti-texte-2);
	font: 700 0.875rem/1.25 var(--wp--preset--font-family--sora);
	white-space: nowrap;
	cursor: pointer;
	--alti-ic-taille: 22px;
}
.alti-onglet[aria-selected="true"] { color: var(--alti-primaire); }
.alti-onglet[aria-selected="true"]::after {
	content: "";
	position: absolute;
	left: 1.25rem;
	right: 1.25rem;
	bottom: 0;
	height: 3px;
	border-radius: 3px 3px 0 0;
	background: var(--alti-degrade);
}
.alti-onglets--secondaires .alti-onglet { flex-direction: row; font-family: var(--wp--preset--font-family--inter); font-weight: 600; }
.alti-onglets--secondaires .alti-onglet[aria-selected="true"] { color: var(--alti-texte); }
.alti-onglets--secondaires .alti-onglet[aria-selected="true"]::after { left: 0; right: 0; height: 2px; border-radius: 0; background: var(--alti-primaire); }
.alti-onglets [role="tabpanel"] { padding: 1.5rem 0.25rem; color: var(--alti-texte-2); }
.alti-onglets [role="tabpanel"]:focus-visible { outline: 2px solid var(--alti-texte); outline-offset: 4px; }

/* Barres d'outils — M3 Toolbars (flottante / ancrée) */
.alti-barre-outils {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.5rem;
	border-radius: var(--alti-r-pilule);
	background: var(--alti-surface);
	box-shadow: var(--alti-ombre-2);
}
.alti-barre-outils--sombre { background: var(--alti-inverse); }
.alti-barre-outils--sombre .alti-btn-icone { color: var(--alti-sur-inverse); }
.alti-barre-outils--ancree { display: flex; justify-content: space-around; border-radius: 0; box-shadow: none; border-top: 1px solid var(--wp--preset--color--bordure, #f0f0f0); }
.alti-barre-outils--flottante { position: fixed; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 88; transform: translateX(-50%); }

/* ==========================================================================
   SÉLECTION
   ========================================================================== */

/* Cases à cocher — M3 Checkbox */
.alti-case, .alti-radio, .alti-interrupteur {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 44px;
	color: var(--alti-texte);
	font-size: 0.9375rem;
	cursor: pointer;
}
.alti-case input, .alti-radio input {
	-webkit-appearance: none;
	appearance: none;
	display: grid;
	place-items: center;
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	margin: 0;
	border: 2px solid var(--alti-texte-2);
	background: var(--alti-surface);
	cursor: pointer;
	transition: background var(--alti-duree), border-color var(--alti-duree);
}
.alti-case input { border-radius: var(--alti-r-xs); }
.alti-case input::after {
	content: "";
	width: 14px;
	height: 14px;
	background: #fff;
	-webkit-mask: var(--alti-svg-check) center / contain no-repeat;
	mask: var(--alti-svg-check) center / contain no-repeat;
	transform: scale(0);
	transition: transform var(--alti-duree) var(--alti-courbe);
}
.alti-case input:checked, .alti-case input:indeterminate { border-color: var(--alti-primaire); background: var(--alti-primaire); }
.alti-case input:checked::after { transform: scale(1); }
.alti-case input:indeterminate::after { -webkit-mask-image: var(--alti-svg-minus); mask-image: var(--alti-svg-minus); transform: scale(1); }
.alti-case input[aria-invalid="true"] { border-color: var(--alti-erreur); }

/* Boutons radio — M3 Radio button */
.alti-radio input { border-radius: 50%; }
.alti-radio input::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--alti-primaire); transform: scale(0); transition: transform var(--alti-duree) var(--alti-courbe); }
.alti-radio input:checked { border-color: var(--alti-primaire); }
.alti-radio input:checked::after { transform: scale(1); }
:is(.alti-case, .alti-radio, .alti-interrupteur):has(input:disabled) { color: rgba(31, 31, 31, 0.38); cursor: not-allowed; }
:is(.alti-case, .alti-radio) input:disabled { border-color: rgba(31, 31, 31, 0.38); background: transparent; }
.alti-groupe-choix { display: grid; gap: 0.25rem; margin: 0; padding: 0; border: 0; }
.alti-groupe-choix legend { margin-bottom: 0.25rem; font-weight: 600; font-size: 0.8125rem; }

/* Interrupteurs — M3 Switch */
.alti-interrupteur input {
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	flex: 0 0 52px;
	width: 52px;
	height: 32px;
	margin: 0;
	border: 2px solid var(--alti-texte-2);
	border-radius: var(--alti-r-pilule);
	background: var(--alti-surface-haute);
	cursor: pointer;
	transition: background var(--alti-duree), border-color var(--alti-duree);
}
.alti-interrupteur input::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 6px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--alti-texte-2);
	transform: translateY(-50%);
	transition: all var(--alti-duree) var(--alti-courbe);
}
.alti-interrupteur input:checked { border-color: transparent; background: var(--alti-degrade); }
.alti-interrupteur input:checked::after { left: 24px; width: 24px; height: 24px; background: #fff; }
.alti-interrupteur input:disabled { opacity: 0.38; cursor: not-allowed; }

/* Puces — M3 Chips (assistance, filtre, saisie, suggestion) */
.alti-puces { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.alti-puce {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 36px;
	padding: 0 1rem;
	border: 1px solid var(--alti-contour);
	border-radius: var(--alti-r-pilule);
	background: var(--alti-surface);
	color: var(--alti-texte);
	font: 600 0.8125rem/1.2 var(--wp--preset--font-family--inter);
	text-decoration: none;
	cursor: pointer;
	--alti-ic-taille: 18px;
}
.alti-puce > .alti-ic:first-child { margin-left: -0.25rem; color: var(--alti-primaire); }
.alti-puce[aria-pressed="true"] { border-color: transparent; background: var(--alti-conteneur); color: var(--alti-sur-conteneur); }
.alti-puce[aria-pressed="true"]::after {
	content: "";
	order: -1;
	width: 18px;
	height: 18px;
	margin-left: -0.25rem;
	background: currentColor;
	-webkit-mask: var(--alti-svg-check) center / contain no-repeat;
	mask: var(--alti-svg-check) center / contain no-repeat;
}
.alti-puce--saisie { padding-right: 0.25rem; cursor: default; }
.alti-puce--saisie button {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--alti-texte-2);
	cursor: pointer;
	--alti-ic-taille: 16px;
}
.alti-puce--saisie button:hover { background: rgba(31, 31, 31, 0.08); }
.alti-puce--saisie button:focus-visible { outline: 2px solid var(--alti-texte); outline-offset: 1px; }
.alti-puce__avatar { width: 24px; height: 24px; margin-left: -0.625rem; border-radius: 50%; object-fit: cover; background: var(--alti-conteneur); }
.alti-puce--eleve { border-color: transparent; box-shadow: var(--alti-ombre-1); }

/* Menus — M3 Menus (popover natif, positionné par composants.js) */
.alti-menu {
	min-width: 220px;
	max-width: 320px;
	margin: 0;
	padding: 0.5rem 0;
	border: 0;
	border-radius: var(--alti-r-m);
	background: var(--alti-surface);
	color: var(--alti-texte);
	box-shadow: var(--alti-ombre-2);
}
.alti-menu:popover-open { animation: alti-deroule 0.18s var(--alti-courbe); }
@keyframes alti-deroule { from { opacity: 0; transform: translateY(-6px); } }
.alti-menu__item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	min-height: 48px;
	padding: 0 1rem;
	border: 0;
	background: transparent;
	color: inherit;
	font: 500 0.9375rem/1.3 var(--wp--preset--font-family--inter);
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	--alti-ic-taille: 20px;
}
.alti-menu__item > .alti-ic { color: var(--alti-texte-2); }
.alti-menu__item[aria-checked="true"] { background: var(--alti-conteneur); color: var(--alti-sur-conteneur); }
.alti-menu__item kbd, .alti-menu__item small { margin-left: auto; color: var(--alti-texte-2); font: inherit; font-size: 0.8125rem; }
.alti-menu__item:focus-visible { outline: none; }
.alti-menu__item:focus-visible::before { opacity: 0.12; }
.alti-menu hr { height: 1px; margin: 0.5rem 0; border: 0; background: var(--wp--preset--color--bordure, #f0f0f0); }

/* Curseurs — M3 Sliders (input range natif) */
.alti-curseur { display: grid; gap: 0.5rem; }
.alti-curseur__entete { display: flex; justify-content: space-between; font-weight: 600; font-size: 0.8125rem; }
.alti-curseur output { color: var(--alti-primaire); font-family: var(--wp--preset--font-family--sora); font-weight: 700; }
.alti-curseur input[type="range"] {
	--pct: 50%;
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 32px;
	margin: 0;
	background: transparent;
	cursor: pointer;
}
.alti-curseur input[type="range"]::-webkit-slider-runnable-track {
	height: 8px;
	border-radius: var(--alti-r-pilule);
	background: linear-gradient(90deg, var(--alti-primaire) 0, var(--alti-orange, #ff6b35) var(--pct), var(--alti-conteneur) var(--pct));
}
.alti-curseur input[type="range"]::-moz-range-track { height: 8px; border-radius: var(--alti-r-pilule); background: var(--alti-conteneur); }
.alti-curseur input[type="range"]::-moz-range-progress { height: 8px; border-radius: var(--alti-r-pilule); background: var(--alti-degrade); }
.alti-curseur input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 6px;
	height: 32px;
	margin-top: -12px;
	border-radius: 3px;
	background: var(--alti-primaire);
	box-shadow: 0 0 0 4px #fff;
}
.alti-curseur input[type="range"]::-moz-range-thumb { width: 6px; height: 32px; border: 0; border-radius: 3px; background: var(--alti-primaire); box-shadow: 0 0 0 4px #fff; }
.alti-curseur__bornes { display: flex; justify-content: space-between; color: var(--alti-texte-2); font-size: 0.75rem; }

/* ==========================================================================
   SAISIE — Champs de texte (M3 Text fields), sélecteurs de date et d'heure
   Le style de base (.alti-champ : libellé au-dessus, contour) est dans style.css.
   ========================================================================== */
.alti-champ__saisie { position: relative; display: flex; align-items: center; }
.alti-champ__saisie > .alti-ic { position: absolute; left: 14px; color: var(--alti-texte-2); pointer-events: none; --alti-ic-taille: 18px; }
.alti-champ__saisie > .alti-ic ~ :is(input, select) { padding-left: 2.625rem; }
.alti-champ__saisie > button { position: absolute; right: 4px; }
.alti-champ__saisie > button ~ input, .alti-champ__saisie > input:has(~ button) { padding-right: 3.25rem; }
.alti-champ__aide { display: flex; justify-content: space-between; gap: 1rem; color: var(--alti-texte-2); font-size: 0.8125rem; line-height: 1.4; }
.alti-champ__compteur { margin-left: auto; font-variant-numeric: tabular-nums; }
.alti-champ :is(input, select, textarea):disabled { background: var(--alti-surface-basse); color: rgba(31, 31, 31, 0.38); cursor: not-allowed; }
/* Variante « remplie » (M3 Filled text field) */
.alti-champ--rempli :is(input, select, textarea) {
	border: 0;
	border-bottom: 2px solid var(--alti-texte-2);
	border-radius: var(--alti-r-s) var(--alti-r-s) 0 0;
	background-color: var(--alti-surface-haute);
}
.alti-champ--rempli :is(input, select, textarea):focus { border-bottom-color: var(--alti-primaire); box-shadow: none; background-color: var(--alti-conteneur); }
/* Variante « contour accessible » : bordure 3:1 (recommandée, voir README) */
.alti-champ--contraste :is(input, select, textarea) { border-color: var(--alti-contour); }
/* Date / heure : sélecteurs natifs du navigateur, habillés */
.alti-champ input:is([type="date"], [type="time"], [type="datetime-local"]) { min-height: 46px; font-variant-numeric: tabular-nums; }
.alti-champ input::-webkit-calendar-picker-indicator { opacity: 0; cursor: pointer; }
.alti-champ__saisie--date::after, .alti-champ__saisie--heure::after {
	content: "";
	position: absolute;
	right: 14px;
	width: 18px;
	height: 18px;
	background: var(--alti-texte-2);
	-webkit-mask: var(--alti-svg-calendar) center / contain no-repeat;
	mask: var(--alti-svg-calendar) center / contain no-repeat;
	pointer-events: none;
}
.alti-champ__saisie--heure::after { -webkit-mask-image: var(--alti-svg-clock); mask-image: var(--alti-svg-clock); }
/* Créneaux (sélecteur d'heure par puces, pour la prise de rendez-vous) */
.alti-creneaux { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; border: 0; }
.alti-creneaux input { position: absolute; opacity: 0; }
.alti-creneaux label { display: inline-grid; place-items: center; min-width: 88px; min-height: 44px; box-sizing: border-box; padding: 0 1rem; border: 1px solid var(--alti-contour); border-radius: var(--alti-r-pilule); font: 600 0.875rem var(--wp--preset--font-family--inter); font-variant-numeric: tabular-nums; cursor: pointer; }
.alti-creneaux input:checked + label { border-color: transparent; background: var(--alti-primaire); color: #fff; }
.alti-creneaux input:focus-visible + label { outline: 2px solid var(--alti-texte); outline-offset: 2px; }
.alti-creneaux input:disabled + label { color: rgba(31, 31, 31, 0.38); border-color: rgba(31, 31, 31, 0.12); text-decoration: line-through; cursor: not-allowed; }

/* ==========================================================================
   Page « Bibliothèque de composants »
   ========================================================================== */
.alti-biblio-famille { scroll-margin-top: 1rem; }
.alti-biblio-composant { display: grid; gap: 1rem; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--wp--preset--color--bordure, #f0f0f0); border-radius: var(--alti-r-l); background: #fff; }
.alti-biblio-composant__entete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--wp--preset--color--bordure, #f0f0f0); }
.alti-biblio-composant__entete h3 { margin: 0; font-size: 1.25rem; }
.alti-biblio-composant > * { min-width: 0; }
.alti-biblio-composant code { color: var(--alti-texte-2); font-size: 0.75rem; overflow-wrap: anywhere; }
.alti-biblio-composant__desc { margin: 0; color: var(--alti-texte-2); font-size: 0.875rem; }
.alti-demo { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.alti-demo--colonne { flex-direction: column; align-items: stretch; }
.alti-demo > * { min-width: 0; max-width: 100%; }
.alti-demo--cadre { position: relative; min-height: 220px; padding: 1rem; overflow: hidden; border-radius: var(--alti-r-m); background: var(--alti-surface-basse); }
.alti-demo-sommaire { display: flex; flex-wrap: wrap; gap: 0.5rem; }

@media (prefers-reduced-motion: reduce) {
	.alti-chargement, .alti-chargement--conteneur::before, .alti-progression--indetermine .alti-progression__barre, .alti-progression-cercle--indetermine { animation-duration: 4s; }
	[open], :popover-open, .alti-snackbar-zone .alti-snackbar { animation: none !important; }
	.alti-carrousel__piste { scroll-behavior: auto; }
}