/*
Theme Name: Kablog 2026
Description: Thème enfant de Twenty Twenty-Five pour kablog.fr (maquette validée le 08/11/2026) : lecture confortable, mode sombre, navigation par rubriques.
Author: KAG
Template: twentytwentyfive
Version: 1.0.7
Requires at least: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: kablog2026
*/

/* ---- Mode sombre : automatique (réglage du système) ou forcé par le bouton (data-theme sur <html>) ---- */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]), :root:not([data-theme="light"]) body {
		--wp--preset--color--base: #121118;
		--wp--preset--color--contrast: #ecebf2;
		--wp--preset--color--accent-1: #8fa7ff;
		--wp--preset--color--accent-2: #1f2440;
		--wp--preset--color--accent-4: #a3a1ad;
		--wp--preset--color--accent-5: #1b1a23;
		--wp--preset--color--accent-6: #2c2a36;
		color-scheme: dark;
	}
}
:root[data-theme="dark"], :root[data-theme="dark"] body {
	--wp--preset--color--base: #121118;
	--wp--preset--color--contrast: #ecebf2;
	--wp--preset--color--accent-1: #8fa7ff;
	--wp--preset--color--accent-2: #1f2440;
	--wp--preset--color--accent-4: #a3a1ad;
	--wp--preset--color--accent-5: #1b1a23;
	--wp--preset--color--accent-6: #2c2a36;
	color-scheme: dark;
}

a { text-underline-offset: .18em; }
:where(.wp-block-post-content, .kb-hero) a { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--wp--preset--color--accent-1); outline-offset: 2px; }

/* ---- En-tête ---- */
.kb-header { position: sticky; top: 0; z-index: 20; background: var(--wp--preset--color--base); border-bottom: 1px solid var(--wp--preset--color--accent-6); }
.kb-header__in { min-height: 64px; gap: 20px; }
.kb-brand { display: flex; align-items: center; gap: 10px; color: var(--wp--preset--color--contrast); text-decoration: none; font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em; }
.kb-brand i { font-style: normal; width: 34px; height: 34px; border-radius: 9px; background: #222; color: #fff; display: grid; place-items: center; font-size: 1.05rem; box-shadow: 0 0 0 1px var(--wp--preset--color--accent-6); }
.kb-brand span { color: var(--wp--preset--color--accent-1); }
.kb-header__nav { gap: 14px; }
.kb-nav { font-size: .95rem; font-weight: 600; gap: 22px; }
.kb-nav a { text-decoration: none; }
.kb-nav .wp-block-navigation__submenu-container { border-radius: 12px; border: 1px solid var(--wp--preset--color--accent-6) !important; padding: 8px 0; min-width: 240px !important; background: var(--wp--preset--color--accent-5) !important; }
.kb-nav .wp-block-navigation__submenu-container a { padding: 8px 16px !important; }
.kb-search .wp-block-search__button, .kb-theme-toggle {
	width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--wp--preset--color--accent-6); background: transparent;
	color: var(--wp--preset--color--contrast); display: grid; place-items: center; padding: 0; cursor: pointer; flex: none;
}
/* Bouton ☰ : WordPress ne l'affiche que sous 600 px ; on ne règle que son apparence. */
.kb-nav .wp-block-navigation__responsive-container-open { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--wp--preset--color--accent-6); align-items: center; justify-content: center; }
.kb-nav .wp-block-navigation__container { flex-wrap: nowrap; }
.kb-header__nav { flex: 1 1 auto; justify-content: flex-end; }
.kb-list .wp-block-post-title a, .kb-card .wp-block-post-title a, .kb-card__t a { color: var(--wp--preset--color--contrast); }
.kb-card .wp-block-post-featured-image { margin: 0; }
.kb-card .wp-block-post-featured-image img { border-radius: 0; }
.kb-theme-toggle svg { width: 20px; height: 20px; }
.kb-search .wp-block-search__inside-wrapper { border: 0; padding: 0; }
.kb-search .wp-block-search__input { border-radius: 999px; border: 1px solid var(--wp--preset--color--accent-6); padding: 8px 16px; background: var(--wp--preset--color--accent-5); color: var(--wp--preset--color--contrast); }

/* ---- Titres de section ---- */
.kb-sec { font-size: .8rem !important; letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--accent-4); font-weight: 800; margin-top: 3rem !important; }

/* ---- Accueil ---- */
.kb-hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); letter-spacing: -.03em; line-height: 1.08; }
.kb-hero p { color: var(--wp--preset--color--accent-4); font-size: 1.15rem; max-width: 620px; }
ul.kb-pills { list-style: none; padding: 0; margin: 1.4rem 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
ul.kb-pills li { margin: 0; }
ul.kb-pills a { display: inline-block; background: var(--wp--preset--color--accent-2); color: var(--wp--preset--color--accent-1); padding: 8px 16px; border-radius: 999px; font-size: .9rem; font-weight: 700; text-decoration: none; }
ul.kb-pills a:hover { text-decoration: underline; }

/* ---- Cartes (à la une, articles liés, archives) ---- */
.kb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .kb-grid { grid-template-columns: 1fr; } }
.kb-card { background: var(--wp--preset--color--accent-5); border: 1px solid var(--wp--preset--color--accent-6); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; }

.kb-card__b { padding: 16px 18px 20px; }
.kb-card__cat { font-size: .78rem; font-weight: 800; color: var(--wp--preset--color--accent-1); text-transform: uppercase; letter-spacing: .08em; }
.kb-card__t { font-size: 1.15rem; line-height: 1.3; margin: 6px 0 8px; font-weight: 800; letter-spacing: -.01em; }
.kb-card__x { color: var(--wp--preset--color--accent-4); font-size: .95rem; margin: 0; }
.kb-card:hover .kb-card__t { text-decoration: underline; }

/* ---- Liste des derniers articles ---- */
.kb-list .wp-block-post-template { border-top: 1px solid var(--wp--preset--color--accent-6); }
.kb-list .wp-block-post { border-bottom: 1px solid var(--wp--preset--color--accent-6); margin: 0 !important; padding: 14px 0; }
.kb-list .wp-block-post-date { color: var(--wp--preset--color--accent-4); font-size: .85rem; min-width: 96px; font-variant-numeric: tabular-nums; }
.kb-list .wp-block-post-title { font-size: 1.05rem; font-weight: 600; letter-spacing: 0; line-height: 1.4; margin: 0; }
.kb-list .wp-block-post-title a { text-decoration: none; }
.kb-list .wp-block-post-title a:hover { text-decoration: underline; }

/* ---- Article ---- */
.kb-cat a { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; text-decoration: none; color: var(--wp--preset--color--accent-1); }
.kb-meta { color: var(--wp--preset--color--accent-4); font-size: .95rem; }
.wp-block-post-content p, .wp-block-post-content li { text-align: left !important; }
.wp-block-post-content img { border-radius: 10px; height: auto; }
.wp-block-post-featured-image img { border-radius: 14px; }
.kb-toc { border: 1px solid var(--wp--preset--color--accent-6); border-radius: 12px; padding: 14px 18px; font-size: .95rem; }
.kb-toc strong { display: block; margin-bottom: 6px; }
.kb-toc ol { margin: 0; padding-left: 1.2em; }
.kb-author { display: flex; gap: 16px; align-items: center; border: 1px solid var(--wp--preset--color--accent-6); background: var(--wp--preset--color--accent-5); border-radius: 14px; padding: 18px; }
.kb-author__a { width: 56px; height: 56px; border-radius: 50%; background: #222; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 1.1rem; flex: none; }
.kb-author p { margin: 0; }
.kb-author small { color: var(--wp--preset--color--accent-4); font-size: .95rem; }
.wp-block-post-terms.kb-tags a { display: inline-block; font-size: .85rem; border: 1px solid var(--wp--preset--color--accent-6); border-radius: 999px; padding: 4px 12px; margin: 0 6px 6px 0; text-decoration: none; }

/* ---- Pied de page ---- */
.kb-footer { border-top: 1px solid var(--wp--preset--color--accent-6); color: var(--wp--preset--color--accent-4); font-size: .9rem; }
.kb-footer a { color: var(--wp--preset--color--accent-4); }

/* ---- Images à la une : ne jamais rogner un logo ni agrandir une petite image (1.0.2) ---- */
.kb-media { aspect-ratio: 16 / 9; background: var(--wp--preset--color--accent-6); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.kb-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kb-media.is-contain, .wp-block-post-featured-image.is-contain { background: #f3f2ee; padding: 18px; }
.kb-media.is-contain img { width: auto !important; height: auto !important; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.kb-card .kb-media + .kb-card__b, .kb-card .wp-block-post-featured-image { margin: 0; }
.wp-block-post-featured-image.is-contain { display: flex; align-items: center; justify-content: center; }
.wp-block-post-featured-image.is-contain a { display: contents; }
.wp-block-post-featured-image.is-contain img { width: auto !important; height: auto !important; max-width: 100%; max-height: 100%; object-fit: contain !important; border-radius: 6px; }
/* Couverture d'article : petite image affichée à sa taille, centrée */
.wp-block-post-featured-image.is-small { text-align: center; background: transparent; padding: 0; }
.wp-block-post-featured-image.is-small img { width: auto !important; max-width: 100%; height: auto !important; margin: 0 auto; display: inline-block; }

/* Cartes des rubriques : cadre 16/9 constant, même pour un petit logo (1.0.3) */
.kb-card .wp-block-post-featured-image { aspect-ratio: 16 / 9; overflow: hidden; }
.kb-card .wp-block-post-featured-image:not(.is-contain) img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Corrections issues des tests exploratoires (1.0.5) ---- */
/* Recherche sur mobile : le champ s'ouvre sous l'en-tête au lieu de recouvrir les boutons */
@media (max-width: 600px) {
	.kb-header__nav { position: static; }
	.kb-header { position: sticky; }
	.kb-search:not(.wp-block-search__searchfield-hidden) .wp-block-search__input {
		position: absolute; top: 64px; left: 16px; right: 16px; width: auto !important; z-index: 30;
		box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
	}
}
/* Vieux contenus : blocs à largeur fixe (anciens lecteurs SlideShare…) et iframes ne débordent plus */
.wp-block-post-content [style*="width"], .wp-block-post-content iframe, .wp-block-post-content embed, .wp-block-post-content object { max-width: 100% !important; }
.wp-block-post-content iframe { border: 0; }
/* Formulaires (Contact Form 7, recherche) */
.wpcf7 label { display: block; font-weight: 600; font-size: 1rem; }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="url"], .wpcf7 textarea {
	display: block; width: 100%; max-width: 640px; margin-top: 6px; padding: 12px 14px; font: inherit; font-size: 1rem;
	color: var(--wp--preset--color--contrast); background: var(--wp--preset--color--accent-5);
	border: 1px solid var(--wp--preset--color--accent-6); border-radius: 10px;
}
.wpcf7 textarea { min-height: 180px; }
.wpcf7 input[type="submit"], .comment-form input[type="submit"] {
	appearance: none; border: 0; border-radius: 999px; padding: 12px 26px; font: inherit; font-weight: 700; font-size: 1rem;
	background: var(--wp--preset--color--accent-1); color: #fff; cursor: pointer;
}
:root[data-theme="dark"] .wpcf7 input[type="submit"] { color: #121118; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wpcf7 input[type="submit"] { color: #121118; } }
.wpcf7 input[type="submit"]:hover { filter: brightness(1.1); }
.wpcf7-spinner { margin-left: 12px; }
.kb-search-page { max-width: 640px; margin: 20px 0 8px; }
.kb-search-page .wp-block-search__input { border-radius: 999px; padding: 10px 18px; border: 1px solid var(--wp--preset--color--accent-6); background: var(--wp--preset--color--accent-5); color: var(--wp--preset--color--contrast); }
.kb-search-page .wp-block-search__button { border-radius: 999px; padding: 10px 22px; background: var(--wp--preset--color--accent-1); color: #fff; border: 0; }
.kb-soundcloud { border: 0; border-radius: 10px; }

/* ---- 1.0.6 : contraste du menu Rubriques (sous-menu et menu mobile), séparateur des rubriques ---- */
.kb-nav .wp-block-navigation__submenu-container,
.kb-nav .wp-block-navigation__submenu-container a,
.kb-nav .wp-block-navigation-item__content { color: var(--wp--preset--color--contrast) !important; }
.kb-nav .wp-block-navigation__submenu-container { background: var(--wp--preset--color--accent-5) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, .14); }
.kb-nav .wp-block-navigation__submenu-container a:hover,
.kb-nav .wp-block-navigation__submenu-container a:focus-visible { background: var(--wp--preset--color--accent-2); color: var(--wp--preset--color--accent-1) !important; }
.kb-nav .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--accent-1) !important; }
/* Menu mobile ouvert : fond et texte du thème (clair comme sombre) */
.kb-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--base) !important; color: var(--wp--preset--color--contrast) !important; }
.kb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { background: transparent !important; box-shadow: none; border: 0 !important; }
.kb-nav .wp-block-navigation__responsive-container-close, .kb-nav .wp-block-navigation__responsive-container-open { color: var(--wp--preset--color--contrast); }
/* Rubriques d'un article : espace autour du séparateur « · » */
.wp-block-post-terms__separator { margin: 0 .45em; }