/*
Theme Name:   Krach Test
Theme URI:    https://krachtest.fr
Description:  Thème enfant de Twenty Twenty-Five pour Krach Test, la newsletter éco-finance indépendante. « L'éco à l'épreuve des faits. »
Author:       Krach Test
Template:     twentytwentyfive
Version:      1.0.0
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  krachtest
*/

/* ==========================================================================
   À LIRE AVANT DE MODIFIER
   --------------------------------------------------------------------------
   L'essentiel du design (couleurs, polices, tailles, espacements) est réglé
   dans theme.json : c'est la façon « moderne » de styler un thème à blocs.
   Ce fichier ne contient que ce que theme.json ne sait pas (encore) faire :
   petits détails visuels, styles de blocs personnalisés, états de survol.

   Les couleurs sont appelées par leurs variables CSS générées par WordPress
   à partir de theme.json, par ex. var(--wp--preset--color--hausse).
   Changez une couleur dans theme.json : elle change partout.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Titre de rubrique : petites capitales espacées + trait vert 18 × 3 px
   Style proposé dans l'éditeur sur les blocs Titre et Paragraphe
   (panneau « Styles » > « Rubrique »). Enregistré dans inc/setup.php.
   -------------------------------------------------------------------------- */
.is-style-rubrique {
	display: flex;
	align-items: center;
	gap: 0.6em;
	font-family: var(--wp--preset--font-family--texte);
	font-size: 0.75rem !important; /* !important : l'emporte sur la taille choisie par erreur dans l'éditeur */
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
}

.is-style-rubrique::before {
	content: "";
	flex: none;
	width: 18px;
	height: 3px;
	background: var(--wp--preset--color--hausse);
}

/* Centré : le trait reste collé au texte. */
.is-style-rubrique.has-text-align-center {
	justify-content: center;
}


/* --------------------------------------------------------------------------
   2. Signaux de marché : ▲ hausse / ▼ baisse
   Utilisation dans une édition : composition « Krach Test – Les marchés »,
   ou à la main en ajoutant la classe CSS kt-hausse / kt-baisse à un bloc
   (panneau « Avancé » > « Classe(s) CSS additionnelle(s) »).
   On n'utilise ces couleurs QUE pour du texte, jamais pour des fonds.
   -------------------------------------------------------------------------- */
.kt-hausse,
.kt-hausse strong {
	color: var(--wp--preset--color--hausse-texte);
	font-variant-numeric: tabular-nums;
}

.kt-baisse,
.kt-baisse strong {
	color: var(--wp--preset--color--baisse-texte);
	font-variant-numeric: tabular-nums;
}

/* Tableau « Les marchés » : chiffres alignés, lignes fines. */
.kt-marches table {
	font-variant-numeric: tabular-nums;
	border-collapse: collapse;
	width: 100%;
}

.kt-marches td,
.kt-marches th {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--filet);
	padding: 0.5em 0;
	text-align: left;
}

.kt-marches td:last-child,
.kt-marches th:last-child {
	text-align: right;
}


/* --------------------------------------------------------------------------
   3. Cartes (éditions, épreuves, guides)
   -------------------------------------------------------------------------- */
.kt-carte {
	height: 100%;
	transition: border-color 0.15s ease;
}

.kt-carte:hover,
.kt-carte:focus-within {
	border-color: var(--wp--preset--color--contrast) !important;
}

/* Le titre de la carte est un lien : on retire le soulignement, sauf au focus clavier. */
.kt-carte .wp-block-post-title a {
	text-decoration: none;
}

.kt-carte .wp-block-post-title a:hover {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* Les grilles de cartes : chaque <li> s'étire pour que toutes les cartes aient la même hauteur. */
.wp-block-post-template.is-layout-grid > li {
	display: flex;
	flex-direction: column;
}


/* --------------------------------------------------------------------------
   4. Filtres (verdicts, thèmes de guides) affichés comme des « pastilles »
   On utilise le bloc natif « Termes » (core/categories) avec la classe kt-filtres.
   -------------------------------------------------------------------------- */
.kt-filtres,
.kt-filtres ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kt-filtres a,
.kt-filtre-tous a {
	display: inline-block;
	padding: 0.4rem 0.9rem;
	border: 1px solid var(--wp--preset--color--filet);
	border-radius: 999px;
	color: var(--wp--preset--color--contrast);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}

.kt-filtres a:hover,
.kt-filtre-tous a:hover {
	border-color: var(--wp--preset--color--contrast);
}

.kt-filtre-tous {
	margin: 0;
}

/* Filtre actif (WordPress ajoute la classe current-cat sur le terme affiché ;
   « Tous les guides » est actif sur la page /guides/). */
.post-type-archive-guide .kt-filtre-tous a,
.kt-filtres .current-cat > a {
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}


/* --------------------------------------------------------------------------
   5. Accessibilité : focus clavier bien visible partout
   -------------------------------------------------------------------------- */
:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

/* Texte réservé aux lecteurs d'écran (invisible à l'œil, lu à voix haute). */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* Lien d'évitement « Aller au contenu » (fourni par WordPress) bien lisible. */
.skip-link.screen-reader-text:focus {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* Respect du réglage « réduire les animations » du visiteur. */
@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
		scroll-behavior: auto !important;
	}
}


/* --------------------------------------------------------------------------
   6. Petits réglages d'en-tête et de pied de page
   -------------------------------------------------------------------------- */
.kt-logo {
	display: inline-block;
	line-height: 0;
}

.kt-logo img {
	display: block;
	width: 180px;
	max-width: 100%;
	height: auto;
}

/* La version « texte blanc » n'apparaît qu'avec le style Sombre (styles/sombre.json). */
.kt-logo .kt-logo__sombre {
	display: none;
}

@media (max-width: 600px) {
	.kt-entete .kt-logo img {
		width: 132px;
	}
}

/* Liste de liens du pied de page, sans puces. */
.kt-liens-pied {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
}

.kt-liens-pied a {
	color: inherit;
}

/* Sur petit écran, le bouton « S'inscrire » de l'en-tête reste compact. */
@media (max-width: 600px) {
	.kt-bouton-entete .wp-block-button__link {
		padding: 0.5rem 0.9rem;
		font-size: 0.875rem;
	}
}