/*
Theme Name:        Taneino Visuals
Theme URI:         https://visuals.taneino.fr
Author:            Antoine Vanderbrecht
Author URI:        https://taneino.fr
Description:       Thème enfant Blocksy pour Taneino Visuals — site photo de la marque ombrelle Taneino. Décline la charte modulaire (filiale photo) sur la stack WordPress + WooCommerce + Envira Gallery.
Template:          blocksy
Version:           0.1.0
Requires at least: 6.0
Tested up to:      6.5
Requires PHP:      7.4
License:           Privé / usage Taneino
Text Domain:       taneino
*/

/* =========================================================================
 * 1. Aliases CSS variables — pont vers le design system theme.json
 *    Permet aux blocs et templates d'utiliser var(--tn-*) plutôt que les
 *    --wp--preset--* verbeux. Si on change un token dans theme.json, tout
 *    se propage automatiquement.
 * ========================================================================= */

:root {
	/* Couleurs */
	--tn-bg:           var(--wp--preset--color--bg);
	--tn-bg-2:         var(--wp--preset--color--bg-2);
	--tn-text:         var(--wp--preset--color--text);
	--tn-text-mute:    var(--wp--preset--color--text-mute);
	--tn-text-faint:   var(--wp--preset--color--text-faint);
	--tn-line:         var(--wp--preset--color--line);
	--tn-line-2:       var(--wp--preset--color--line-2);
	--tn-accent:       var(--wp--preset--color--accent);
	--tn-accent-soft:  var(--wp--preset--color--accent-soft);
	--tn-accent-deep:  var(--wp--preset--color--accent-deep);

	/* Familles typographiques */
	--tn-font-display: var(--wp--preset--font-family--syne);
	--tn-font-body:    var(--wp--preset--font-family--poppins);
	--tn-font-mono:    var(--wp--preset--font-family--mono);

	/* Tailles de titre */
	--tn-size-title-xl: var(--wp--preset--font-size--title-xl);
	--tn-size-title-l:  var(--wp--preset--font-size--title-l);
	--tn-size-title-m:  var(--wp--preset--font-size--title-m);
	--tn-size-title-s:  var(--wp--preset--font-size--title-s);

	/* Breakpoints (utilisés en JS si besoin ; les media queries CSS restent inline) */
	--tn-bp-sm: 640px;
	--tn-bp-md: 900px;
	--tn-bp-lg: 1200px;
}

/* =========================================================================
 * 2. Baseline — ajustements globaux par-dessus theme.json
 * ========================================================================= */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

::selection {
	background: var(--tn-accent);
	color: var(--tn-accent-deep);
}

/* =========================================================================
 * 3. Composant titre — .tn-title et variants de taille
 *    Convention : la balise (h1/h2/h3) est hardcodée par le template du bloc
 *    selon son rôle sémantique. La classe de taille --xl/--l/--m/--s pilote
 *    uniquement le rendu visuel, indépendant du niveau Hn.
 * ========================================================================= */

.tn-title {
	font-family: var(--tn-font-display);
	color: var(--tn-text);
	line-height: 0.95;
	letter-spacing: -0.02em;
	margin: 0;
	font-weight: 700;
}

.tn-title--xl {
	font-size: var(--tn-size-title-xl);
	line-height: 0.92;
	letter-spacing: -0.03em;
	font-weight: 800;
}

.tn-title--l {
	font-size: var(--tn-size-title-l);
	line-height: 0.96;
	letter-spacing: -0.025em;
	font-weight: 700;
}

.tn-title--m {
	font-size: var(--tn-size-title-m);
	line-height: 1.05;
	letter-spacing: -0.015em;
	font-weight: 600;
}

.tn-title--s {
	font-size: var(--tn-size-title-s);
	line-height: 1.2;
	letter-spacing: -0.01em;
	font-weight: 600;
}

/* Italique Syne 400 quand l'éditeur insère <em> dans le titre.
   Convention design system : un cran plus petit que le texte courant
   du titre (ratio fixe en em → s'adapte à toutes les variantes de taille). */
.tn-title em {
	font-style: italic;
	font-weight: 400;
	font-size: 0.85em;
}

/* Surlignage teal pour <mark> dans le titre. */
.tn-title mark,
.tn-rich mark {
	background: var(--tn-accent);
	color: var(--tn-accent-deep);
	padding: 0 0.18em;
	border-radius: 1px;
}

/* =========================================================================
 * 4. Mono kicker — petit label uppercase mono utilisé partout
 * ========================================================================= */

.tn-mono {
	font-family: var(--tn-font-mono);
	font-size: 0.6875rem;        /* 11px */
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--tn-text-faint);
	font-weight: 500;
}

.tn-mono--accent {
	color: var(--tn-accent);
}

.tn-mono--text {
	color: var(--tn-text);
}

/* =========================================================================
 * 5. Texte courant — paragraphes éditoriaux
 * ========================================================================= */

.tn-paragraph {
	font-family: var(--tn-font-body);
	font-size: 0.9375rem;        /* 15px */
	line-height: 1.6;
	color: var(--tn-text-mute);
	max-width: 60ch;
}

.tn-paragraph--bright {
	color: var(--tn-text);
}

/* =========================================================================
 * 6. Accessibilité — focus, motion
 * ========================================================================= */

:focus-visible {
	outline: 2px solid var(--tn-accent);
	outline-offset: 3px;
	border-radius: 2px;
}

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

/* =========================================================================
 * 7. Container utilitaire — wrapper centré max 1280px avec gutters
 *    Les blocs peuvent l'utiliser via .tn-container ou s'en passer
 *    si leur layout est full-bleed.
 * ========================================================================= */

.tn-container {
	width: 100%;
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
}

/* Override Blocksy : ct-container-full embarque un padding-top par défaut
 * (héritage du thème parent) qui crée un vide non désiré au-dessus des
 * sections taneino. Les blocs pilotent eux-mêmes leur respiration interne
 * via .tn-section, donc on neutralise le padding-top du parent. */
.ct-container-full,
.entry-content > .ct-container-full {
	padding-top: 0;
}

/* =========================================================================
 * 9. Template archives catégorie projet (taxonomy-project_category.php)
 *    Layout : 1 carte vedette + grille 2-col de cartes secondaires.
 *    Les cartes elles-mêmes (.tn-gl-card*) viennent du plugin shared.css.
 * ========================================================================= */

.tn-cat-archive {
	display: block;
}

.tn-cat-archive__list {
	max-width: 1280px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.tn-cat-archive__featured { display: block; }

.tn-cat-archive__secondary {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}

.tn-cat-archive__pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	padding-top: 1.5rem;
	border-top: 1px solid var(--tn-line);
	margin-top: 1.5rem;
}

@media (max-width: 768px) {
	.tn-cat-archive__secondary { grid-template-columns: 1fr; }
}

/* =========================================================================
 * 8. Liens et boutons — bases avant les composants tn-button-*
 * ========================================================================= */

a {
	text-decoration: none;
	color: inherit;
	transition: color 160ms ease;
}

a:hover {
	color: var(--tn-accent);
}

/* Reset bouton — toujours utile avec les .tn-button-* à venir. */
.tn-btn-reset {
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
	text-align: inherit;
}