/*
 * IndicesPro Child — child-global.css
 *
 * Complète theme.json avec :
 *   1. Mode sombre auto étendu à tout le site (prefers-color-scheme: dark)
 *   2. Tokens IP utilisables côté plugin (alignés sur theme.json)
 *   3. Ajustements fins (selection, scrollbar, focus, transitions)
 *   4. Cohérence de la typographie pour les nombres (tabular-nums)
 *
 * Convention :
 *   - Les variables --wp--preset--* viennent de theme.json (palette/sizes)
 *   - Les variables --ip-* sont aussi définies pour cohérence avec le plugin
 *     (qui utilise déjà --ip-* depuis v0.6.1). Le plugin reste autonome.
 *
 * Architecture mode sombre :
 *   theme.json définit les couleurs en mode clair.
 *   Cette feuille bascule via prefers-color-scheme: dark en surchargeant
 *   les --wp--preset--color--* sur :root. Toutes les utilisations en aval
 *   se mettent à jour automatiquement.
 */

/* ============================================================================
 * 1. Tokens IP (alignés avec theme.json — utilisable par le plugin)
 * ============================================================================ */

:root {
	/* Palette — alignée sur la palette WP du theme.json */
	--ip-bg-primary:   var(--wp--preset--color--base);
	--ip-bg-secondary: var(--wp--preset--color--base-2);
	--ip-bg-tertiary:  var(--wp--preset--color--base-3);

	--ip-text-primary:   var(--wp--preset--color--contrast);
	--ip-text-secondary: var(--wp--preset--color--contrast-2);
	--ip-text-muted:     var(--wp--preset--color--contrast-3);

	--ip-accent:        var(--wp--preset--color--accent);
	--ip-accent-hover:  var(--wp--preset--color--accent-hover);
	--ip-accent-soft:   var(--wp--preset--color--accent-soft);
	--ip-accent-text:   var(--wp--preset--color--accent-text);

	--ip-border-default: var(--wp--preset--color--border);
	--ip-border-strong:  var(--wp--preset--color--border-strong);

	--ip-success: var(--wp--preset--color--success);
	--ip-warning: var(--wp--preset--color--warning);
	--ip-danger:  var(--wp--preset--color--danger);

	/* Focus ring (RGB en dur car CSS ne permet pas rgba(var(--hex), alpha))
	   Bascule en même temps que la palette — voir PALETTES.md */
	--ip-focus-ring:      rgba(41, 69, 143, 0.18);
	--ip-focus-ring-dark: rgba(136, 159, 220, 0.30);

	/* Espacements (alignés sur les spacing presets WP) */
	--ip-space-1: 0.25rem;
	--ip-space-2: 0.5rem;
	--ip-space-3: 0.75rem;
	--ip-space-4: 1rem;
	--ip-space-5: 1.5rem;
	--ip-space-6: 2rem;
	--ip-space-8: 3rem;
	--ip-space-10: 4rem;

	/* Rayons et ombres */
	--ip-radius-sm: 0.25rem;
	--ip-radius:    0.5rem;
	--ip-radius-lg: 0.75rem;

	--ip-shadow-sm: 0 1px 2px rgba(15, 15, 16, 0.04);
	--ip-shadow:    0 1px 3px rgba(15, 15, 16, 0.06), 0 1px 2px rgba(15, 15, 16, 0.04);
	--ip-shadow-lg: 0 4px 6px rgba(15, 15, 16, 0.05), 0 2px 4px rgba(15, 15, 16, 0.04);

	/* Transitions */
	--ip-transition: 150ms ease;
}

/* ============================================================================
 * 2. Mode sombre — bascule automatique pour tout le site
 *
 * 🎨 POINT DE BASCULE PALETTE — MODE SOMBRE
 *    Le mode clair est piloté par theme.json (single source of truth).
 *    Le mode sombre n'est PAS géré par theme.json (limitation WP/FSE),
 *    donc les valeurs sombres sont déclarées ici, dans ce bloc UNIQUEMENT.
 *
 *    Pour basculer la palette, voir PALETTES.md à la racine du child.
 *    Pour ajouter un nouveau preset : modifier ici (mode sombre) ET
 *    theme.json (mode clair) en gardant les mêmes valeurs.
 *
 *    Palette actuelle (v1.1.0) : indigo institutionnel #29458f
 *    Variantes dark mode dérivées par décalage de luminosité.
 * ============================================================================ */

@media (prefers-color-scheme: dark) {
	:root {
		/* Override des couleurs WP pour que tout le thème + Gutenberg suivent */
		--wp--preset--color--base:           #0a0a0b;
		--wp--preset--color--base-2:         #18181b;
		--wp--preset--color--base-3:         #27272a;
		--wp--preset--color--contrast:       #fafafa;
		--wp--preset--color--contrast-2:     #a1a1aa;
		--wp--preset--color--contrast-3:     #71717a;

		/* === Palette d'accent — mode sombre (dérivée de #29458f) === */
		--wp--preset--color--accent:         #889fdc;
		--wp--preset--color--accent-hover:   #afbfe8;
		--wp--preset--color--accent-soft:    #142247;
		--wp--preset--color--accent-text:    #b7c5ea;

		--wp--preset--color--border:         #27272a;
		--wp--preset--color--border-strong:  #3f3f46;

		--wp--preset--color--success:        #22c55e;
		--wp--preset--color--warning:        #eab308;
		--wp--preset--color--danger:         #ef4444;

		/* Ombres adoucies pour fonds sombres */
		--ip-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
		--ip-shadow:    0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
		--ip-shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
	}

	/* Couleur de l'image meta fonctionne, mais on force pour les images
	   d'apparence "white background" courantes dans les contenus existants. */
	body.indicespro-themed img {
		filter: none;
	}

	/* Logo ou images marquées spécifiquement comme dark-invertible */
	body.indicespro-themed img.invert-on-dark {
		filter: invert(1) hue-rotate(180deg);
	}
}

/* ============================================================================
 * 3. Skin globale — appliquée à tout le body
 * ============================================================================ */

body.indicespro-themed {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-feature-settings: "kern", "liga", "calt";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Tabular numbers globaux — important pour les pages indices et les chiffres */
body.indicespro-themed .wp-block-table,
body.indicespro-themed table,
body.indicespro-themed .has-tabular-nums,
body.indicespro-themed .ip-tabular-nums {
	font-variant-numeric: tabular-nums;
}

/* Sélection de texte aux couleurs accent */
body.indicespro-themed ::selection {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

/* Focus visible sur tous les éléments interactifs */
body.indicespro-themed :focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-radius: var(--ip-radius-sm);
}

/* ============================================================================
 * 4. Liens — transitions douces
 * ============================================================================ */

body.indicespro-themed a {
	transition: color var(--ip-transition), background-color var(--ip-transition), border-color var(--ip-transition);
}

/* ============================================================================
 * 5. Boutons — refinement (theme.json donne le style de base)
 * ============================================================================ */

body.indicespro-themed .wp-element-button,
body.indicespro-themed .wp-block-button__link {
	transition: background-color var(--ip-transition), transform var(--ip-transition), box-shadow var(--ip-transition);
	box-shadow: var(--ip-shadow-sm);
}

body.indicespro-themed .wp-element-button:hover,
body.indicespro-themed .wp-block-button__link:hover {
	box-shadow: var(--ip-shadow);
	transform: translateY(-1px);
}

body.indicespro-themed .wp-element-button:active,
body.indicespro-themed .wp-block-button__link:active {
	transform: translateY(0);
	box-shadow: var(--ip-shadow-sm);
}

/* Style "outline" pour boutons secondaires */
body.indicespro-themed .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--accent);
	border: 1px solid var(--wp--preset--color--accent);
}

body.indicespro-themed .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--accent-soft);
	border-color: var(--wp--preset--color--accent-hover);
	color: var(--wp--preset--color--accent-text);
}

/* ============================================================================
 * 6. Inputs et formulaires
 * ============================================================================ */

body.indicespro-themed input[type="text"],
body.indicespro-themed input[type="email"],
body.indicespro-themed input[type="url"],
body.indicespro-themed input[type="password"],
body.indicespro-themed input[type="search"],
body.indicespro-themed input[type="number"],
body.indicespro-themed input[type="tel"],
body.indicespro-themed input[type="date"],
body.indicespro-themed textarea,
body.indicespro-themed select {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--ip-radius);
	padding: 0.5rem 0.75rem;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--md);
	transition: border-color var(--ip-transition), box-shadow var(--ip-transition);
}

body.indicespro-themed input[type="text"]:focus,
body.indicespro-themed input[type="email"]:focus,
body.indicespro-themed input[type="url"]:focus,
body.indicespro-themed input[type="password"]:focus,
body.indicespro-themed input[type="search"]:focus,
body.indicespro-themed input[type="number"]:focus,
body.indicespro-themed input[type="tel"]:focus,
body.indicespro-themed input[type="date"]:focus,
body.indicespro-themed textarea:focus,
body.indicespro-themed select:focus {
	border-color: var(--wp--preset--color--accent);
	outline: none;
	box-shadow: 0 0 0 3px var(--ip-focus-ring);
}

@media (prefers-color-scheme: dark) {
	body.indicespro-themed input[type="text"]:focus,
	body.indicespro-themed input[type="email"]:focus,
	body.indicespro-themed input[type="url"]:focus,
	body.indicespro-themed input[type="password"]:focus,
	body.indicespro-themed input[type="search"]:focus,
	body.indicespro-themed input[type="number"]:focus,
	body.indicespro-themed input[type="tel"]:focus,
	body.indicespro-themed input[type="date"]:focus,
	body.indicespro-themed textarea:focus,
	body.indicespro-themed select:focus {
		box-shadow: 0 0 0 3px var(--ip-focus-ring-dark);
	}
}

/* ============================================================================
 * 7. Tableaux — alignés au look du plugin (history-table)
 * ============================================================================ */

body.indicespro-themed table {
	border-collapse: collapse;
	width: 100%;
	font-variant-numeric: tabular-nums;
}

body.indicespro-themed table th,
body.indicespro-themed table td {
	padding: 0.625rem 0.875rem;
	text-align: left;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

body.indicespro-themed table th {
	font-weight: 600;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--contrast-2);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	background-color: var(--wp--preset--color--base-2);
}

body.indicespro-themed table tbody tr:hover {
	background-color: var(--wp--preset--color--base-2);
}

/* ============================================================================
 * 8. Images responsive et bordures images
 * ============================================================================ */

body.indicespro-themed .wp-block-image img,
body.indicespro-themed .wp-block-cover img {
	border-radius: var(--ip-radius);
}

body.indicespro-themed .wp-block-image figcaption {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--contrast-2);
	text-align: center;
	margin-top: 0.5rem;
}

/* ============================================================================
 * 9. Header et footer — gardent leur structure du parent, on harmonise les couleurs
 * ============================================================================ */

body.indicespro-themed header.wp-block-template-part,
body.indicespro-themed .wp-site-blocks > header {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

body.indicespro-themed footer.wp-block-template-part,
body.indicespro-themed .wp-site-blocks > footer {
	border-top: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--sm);
}

/* Navigation : items en couleur texte, hover en accent */
body.indicespro-themed .wp-block-navigation a,
body.indicespro-themed .wp-block-navigation-item__content {
	color: var(--wp--preset--color--contrast);
	transition: color var(--ip-transition);
}

body.indicespro-themed .wp-block-navigation a:hover,
body.indicespro-themed .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent);
}

/* ============================================================================
 * 10. Scrollbar personnalisée (subtile, mode sombre OK)
 * ============================================================================ */

body.indicespro-themed * {
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--border-strong) transparent;
}

body.indicespro-themed *::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

body.indicespro-themed *::-webkit-scrollbar-track {
	background: transparent;
}

body.indicespro-themed *::-webkit-scrollbar-thumb {
	background-color: var(--wp--preset--color--border-strong);
	border-radius: 4px;
}

body.indicespro-themed *::-webkit-scrollbar-thumb:hover {
	background-color: var(--wp--preset--color--contrast-3);
}

/* ============================================================================
 * 11. Citations et pull-quotes — ajustement marqueur visuel
 * ============================================================================ */

body.indicespro-themed .wp-block-pullquote {
	border-top: 2px solid var(--wp--preset--color--accent);
	border-bottom: 2px solid var(--wp--preset--color--accent);
	padding: 1.5rem 0;
}

/* ============================================================================
 * 12. Code blocks et pre — lisibilité sur fonds clairs et sombres
 * ============================================================================ */

body.indicespro-themed pre,
body.indicespro-themed .wp-block-code,
body.indicespro-themed .wp-block-preformatted {
	background-color: var(--wp--preset--color--base-2);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--ip-radius);
	padding: 1rem;
	overflow-x: auto;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.875rem;
	line-height: 1.5;
}

/* ============================================================================
 * 13. Articles de blog — typo lisible et confortable
 * ============================================================================ */

body.indicespro-themed .wp-block-post-content,
body.indicespro-themed .entry-content {
	line-height: 1.7;
}

body.indicespro-themed .wp-block-post-content p,
body.indicespro-themed .entry-content p {
	margin-bottom: 1.25em;
}

body.indicespro-themed .wp-block-post-title {
	font-weight: 600;
	letter-spacing: -0.025em;
}

body.indicespro-themed .wp-block-post-date,
body.indicespro-themed .wp-block-post-author {
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--sm);
}

/* ============================================================================
 * 14. Cards (apparues quand on liste des posts)
 * ============================================================================ */

body.indicespro-themed .wp-block-post {
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding-bottom: 2rem;
	margin-bottom: 2rem;
}

body.indicespro-themed .wp-block-post:last-child {
	border-bottom: none;
}

/* ============================================================================
 * 15. Page CPT indice — alignement strict titre + content (v1.1.2)
 *
 * Sur les pages indice (FSE / Twenty Twenty-Five), le bloc `core/post-title`
 * affiché par le template `single.html` du thème parent et le contenu
 * IndicesPro injecté via `the_content` doivent partager exactement la même
 * grille de largeur, sinon on a un décalage visible.
 *
 * theme.json définit `contentSize: 1140px`, mais certains thèmes (notamment
 * Twenty Twenty-Five dans son template `single.html`) wrappent le post-title
 * dans un `wp-block-group` avec `is-layout-constrained` qui peut imposer une
 * largeur indépendante. On force ici la cohérence côté CSS pour garantir le
 * résultat quel que soit le markup du thème parent.
 *
 * Scope strict : `body.single-indice` uniquement. Aucun impact sur le blog,
 * les pages, les archives standards.
 * ============================================================================ */

body.single-indice .wp-block-post-title,
body.single-indice .wp-block-post-content {
	max-width: var(--wp--style--global--wide-size, 1140px);
	margin-left: auto;
	margin-right: auto;
}

/* Le contenu IndicesPro injecté via the_content reste à la même largeur
 * que post-title. Le wrapper interne du plugin (.ipv2-page--fse) hérite via
 * sa propre règle dans indice-ui-v2.css. */
body.single-indice .wp-block-post-content > .ipv2-page--fse {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* ============================================================================
 * 16. Notes utilitaires
 * ============================================================================ */

/*
 * Si le plugin IndicesPro Frontend est actif, ses pages CPT (.single-indice,
 * .post-type-archive-indice) ont déjà leur propre CSS détaillé qui surcharge
 * tout ce qui est ici. Ce fichier ne fait que poser le décor pour le reste
 * du site (homepage, blog, pages WP standards).
 *
 * Pour ajuster une couleur ou un espacement de manière globale :
 *   → modifier theme.json (settings.color.palette ou settings.spacing)
 *
 * Pour ajuster un comportement CSS (transition, hover, scrollbar) :
 *   → modifier ce fichier
 *
 * Pour overrider un template HTML (header, footer, single, archive) :
 *   → créer le fichier correspondant dans /templates/ ou /parts/ du child
 *     en suivant la convention FSE de Twenty Twenty-Five.
 */