/*
 * Socle visuel commun à tous les composants Tomoe.
 * Tout passe par les jetons du thème (theme.json) : couleurs --wp--preset--color--*,
 * tailles --wp--preset--font-size--*, espacements --wp--preset--spacing--*, et --wp--custom--* (rayons, ombres, mouvement).
 * Chaque valeur a un repli pour rester lisible avec un thème qui ne fournit pas ces jetons.
 * Les styles propres à un composant vont dans composants/<nom>/style.css, jamais ici.
 */

:root {
	--t-base: var(--wp--preset--color--base, #fbf7f0);
	--t-surface: var(--wp--preset--color--surface, #f4ecdf);
	--t-texte: var(--wp--preset--color--contraste, #2a1b14);
	--t-discret: var(--wp--preset--color--discret, #5c4639);
	--t-accent: var(--wp--preset--color--accent, #9b2c2c);
	--t-sur-accent: var(--wp--preset--color--accent-contraste, #fbf7f0);
	--t-accent-2: var(--wp--preset--color--accent-2, #c68a3c);
	--t-sombre: var(--wp--preset--color--sombre, #2a1b14);
	--t-sur-sombre: var(--wp--preset--color--sur-sombre, #f4ecdf);
	--t-police-titres: var(--wp--preset--font-family--titres, Georgia, serif);
	--t-police-texte: var(--wp--preset--font-family--texte, system-ui, sans-serif);
	--t-rayon-bouton: var(--wp--custom--rayon--bouton, 999px);
	--t-rayon-carte: var(--wp--custom--rayon--carte, 14px);
	--t-rayon-image: var(--wp--custom--rayon--image, 18px);
	--t-rayon-champ: var(--wp--custom--rayon--champ, 10px);
	--t-ombre: var(--wp--custom--ombre--douce, 0 8px 24px rgb(0 0 0 / .06));
	--t-ombre-forte: var(--wp--custom--ombre--forte, 0 18px 50px rgb(0 0 0 / .18));
	--t-duree: var(--wp--custom--mouvement--duree, .9s);
	--t-courbe: var(--wp--custom--mouvement--courbe, cubic-bezier(.2, .7, .2, 1));
	--t-largeur: var(--wp--style--global--wide-size, 80rem);
	--t-section: var(--wp--preset--spacing--50, clamp(3.5rem, 8vw, 7.5rem));
	--t-gouttiere: clamp(1rem, 4vw, 2.5rem);
	--t-trait: color-mix(in srgb, currentColor 16%, transparent);
	/* Haut d'un élément collant (sticky) : sous l'en-tête flottant du thème et la barre d'administration */
	--t-haut-collant: calc(var(--tomoe-entete-h, 0px) + var(--wp-admin--admin-bar--height, 0px) + 1.5rem);
}

/* Défilement doux (assets/defilement.js, Lenis) : reprise de lenis.css */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Bandeau de démonstration */
.tomoe-bandeau-demo {
	padding: .5rem 1rem;
	background: #fff3bf;
	color: #3d2f00;
	font: 500 .85rem/1.4 var(--t-police-texte);
	text-align: center;
}
.tomoe-bandeau-demo p { margin: 0; }

/* Structure d'une section : .tomoe-section > .tomoe-cadre */
.tomoe-section { position: relative; padding-block: var(--t-section); }
.tomoe-section.alignfull { padding-inline: var(--t-gouttiere); }
.tomoe-section--serree { padding-block: calc(var(--t-section) * .55); }
.tomoe-cadre { width: 100%; max-width: var(--t-largeur); margin-inline: auto; }
.tomoe-sombre { background: var(--t-sombre); color: var(--t-sur-sombre); }
.tomoe-sombre .tomoe-surtitre { color: var(--t-accent-2); }
.tomoe-surface { background: var(--t-surface); }

/* Surtitre : petite ligne en capitales au-dessus d'un titre */
.tomoe-surtitre {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	margin: 0 0 1.2rem;
	color: var(--t-accent);
	font: 600 var(--wp--preset--font-size--xs, .78rem)/1.3 var(--t-police-texte);
	letter-spacing: .14em;
	text-transform: uppercase;
}
.tomoe-surtitre::before { content: ""; width: 1.6rem; height: 1px; background: currentColor; }

/* Titres : le mot entre *astérisques* devient italique couleur */
.tomoe-titre { margin: 0; font-family: var(--t-police-titres); font-weight: var(--wp--custom--titres--graisse, 400); line-height: var(--wp--custom--titres--interligne, 1.05); letter-spacing: var(--wp--custom--titres--interlettrage, -.015em); text-wrap: balance; }
.tomoe-titre em { color: var(--t-accent); font-style: italic; }
.tomoe-sombre .tomoe-titre em { color: var(--t-accent-2); }
.tomoe-titre--1 { font-size: var(--wp--preset--font-size--xxxl, clamp(2.9rem, 7vw, 5.6rem)); }
.tomoe-titre--2 { font-size: var(--wp--preset--font-size--xxl, clamp(2.3rem, 5vw, 4rem)); }
.tomoe-titre--3 { font-size: var(--wp--preset--font-size--xl, clamp(1.6rem, 3vw, 2.1rem)); }
.tomoe-chapo { max-width: 38rem; margin: 1.4rem 0 0; color: var(--t-discret); font-size: var(--wp--preset--font-size--l, 1.25rem); line-height: 1.55; text-wrap: pretty; }
.tomoe-sombre .tomoe-chapo { color: color-mix(in srgb, var(--t-sur-sombre) 78%, transparent); }
.tomoe-texte { color: var(--t-discret); text-wrap: pretty; }
.tomoe-texte p { margin: 0 0 1em; }
.tomoe-texte p:last-child { margin-bottom: 0; }

/* Boutons : :is(a, button) l'emporte sur le style des liens du thème */
:is(a, button).tomoe-bouton {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	min-height: 48px;
	padding: .8rem 1.5rem;
	border: 1.5px solid var(--t-accent);
	border-radius: var(--t-rayon-bouton);
	background: var(--t-accent);
	color: var(--t-sur-accent);
	font: 600 1rem/1.2 var(--t-police-texte);
	text-decoration: none;
	cursor: pointer;
	transition: transform .25s var(--t-courbe), background-color .2s, color .2s, box-shadow .25s;
}
:is(a, button).tomoe-bouton:hover { transform: translateY(-2px); box-shadow: var(--t-ombre); color: var(--t-sur-accent); }
:is(a, button).tomoe-bouton--contour { background: transparent; color: var(--t-texte); border-color: var(--t-trait); }
:is(a, button).tomoe-bouton--contour:hover { background: var(--t-surface); color: var(--t-texte); }
.tomoe-sombre :is(a, button).tomoe-bouton--contour { color: var(--t-sur-sombre); border-color: color-mix(in srgb, var(--t-sur-sombre) 35%, transparent); }
.tomoe-sombre :is(a, button).tomoe-bouton--contour:hover { background: color-mix(in srgb, var(--t-sur-sombre) 10%, transparent); color: var(--t-sur-sombre); }
:is(a, button).tomoe-bouton--lien { min-height: 0; padding: 0; border: 0; background: none; color: var(--t-accent); box-shadow: none; transform: none; }
.tomoe-bouton .tomoe-icone { width: 1.1em; height: 1.1em; transition: transform .25s var(--t-courbe); }
.tomoe-bouton:hover .tomoe-icone { transform: translateX(3px); }
.tomoe-boutons { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 2rem; }

.tomoe-icone { width: 1.5rem; height: 1.5rem; flex: none; }

/* Images */
.tomoe-media { overflow: hidden; border-radius: var(--t-rayon-image); background: var(--t-surface); }
.tomoe-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tomoe-image-vide {
	display: grid;
	place-items: center;
	width: 100%;
	min-height: 12rem;
	height: 100%;
	border-radius: var(--t-rayon-image);
	background:
		radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--t-accent-2) 22%, transparent), transparent 60%),
		linear-gradient(135deg, var(--t-surface), color-mix(in srgb, var(--t-surface) 70%, var(--t-accent-2)));
	color: var(--t-discret);
	font: 500 var(--wp--preset--font-size--s, .9rem) var(--t-police-texte);
}
.tomoe-image-vide span { padding: .35rem .8rem; border-radius: var(--t-rayon-bouton); background: color-mix(in srgb, var(--t-base) 70%, transparent); }

/* Champs de formulaire communs */
.tomoe-champ { display: grid; gap: .35rem; }
.tomoe-champ label, .tomoe-etiquette { font: 600 var(--wp--preset--font-size--s, .9rem)/1.3 var(--t-police-texte); }
.tomoe-saisie {
	width: 100%;
	min-height: 48px;
	padding: .7rem .9rem;
	border: 1.5px solid var(--t-trait);
	border-radius: var(--t-rayon-champ);
	background: var(--t-base);
	color: inherit;
	font: inherit;
	box-sizing: border-box;
}
.tomoe-saisie:focus { border-color: var(--t-accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-accent) 18%, transparent); }
.tomoe-aide { color: var(--t-discret); font-size: var(--wp--preset--font-size--s, .9rem); }
.tomoe-vide { padding: 1rem; border: 1.5px dashed var(--t-trait); border-radius: var(--t-rayon-carte); color: var(--t-discret); }

/* Focus visible partout */
:where(.tomoe-section, .tomoe-section *) :focus-visible { outline: 2px solid var(--t-accent); outline-offset: 3px; }

/* Animations : état initial seulement si JavaScript tourne (classe posée dans le head) */
.tomoe-js [data-anim]:not(.is-anime) { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
	.tomoe-js [data-anim]:not(.is-anime) { opacity: 1; }
	:is(a, button).tomoe-bouton, .tomoe-bouton .tomoe-icone { transition: none; }
}