/* ==========================================================================
   nicolasthanh.com v2 — le strict nécessaire.
   Tout ce qui peut vivre dans theme.json y vit. Ne restent ici que la
   navigation verticale gauche, que le système de blocs ne sait pas décrire,
   et les règles héritées du CSS additionnel de Divi.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. La navigation verticale gauche — décision D2, reproduite à l'identique.

   Mesures relevées sur la production le 30/08/2026 (Divi `et_vertical_nav`
   + `et_vertical_fixed`) : colonne fixe de 225 px à gauche, contenu décalé
   d'autant, ombre portée de 7 px, bascule en barre horizontale à 980 px.
   Les mêmes nombres, les mêmes points de rupture.
   -------------------------------------------------------------------------- */

:root {
	--nt-nav-width: 225px;
	--nt-nav-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
}

@media (min-width: 981px) {

	.wp-site-blocks > header.nt-vertical-nav {
		position: fixed;
		top: 0;
		left: 0;
		/* `box-sizing` explicite : sans lui la colonne mesure 305 px (225 + 2×40)
		   et déborde de 80 px sur le contenu. Mesuré au pilote. */
		box-sizing: border-box;
		width: var(--nt-nav-width);
		height: 100%;
		padding: 40px;
		overflow-y: auto;
		overscroll-behavior: contain;
		background-color: var(--wp--preset--color--base);
		box-shadow: var(--nt-nav-shadow);
		z-index: 100;
	}

	/* Le reste de la page vit à droite de la colonne. Divi appliquait
	   `margin-left: 225px` à `#et-main-area` ; le sélecteur change, la
	   valeur non. */
	.wp-site-blocks > :not(header.nt-vertical-nav) {
		margin-left: var(--nt-nav-width);
	}

	/* Le logo faisait 54 px de haut et 28 px de marge basse dans Divi. */
	.nt-vertical-nav .wp-block-site-logo img {
		max-height: 54px;
		width: auto;
		margin-bottom: 28px;
	}

	/* Entrées empilées, une par ligne, sous-menus en volet à droite. */
	.nt-vertical-nav .wp-block-navigation__container {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
	}

	.nt-vertical-nav .wp-block-navigation-item {
		display: block;
		width: 100%;
	}

	.nt-vertical-nav .wp-block-navigation-item__content {
		display: block;
		padding: 10px 0;
		font-weight: 700;
		font-size: 14px;
		color: rgba(0, 0, 0, 0.85);
		text-decoration: none;
	}

	/* `accent-2` et non `accent-1` : le survol est du texte, et #EF4555 sur
	   blanc ne vaut que 3,72:1. Même arbitrage que pour les liens de contenu. */
	.nt-vertical-nav .wp-block-navigation-item__content:hover,
	.nt-vertical-nav .current-menu-item > .wp-block-navigation-item__content {
		color: var(--wp--preset--color--accent-2);
	}

	/* Divi ouvrait les sous-menus à droite de la colonne, bordure gauche
	   de 3 px à l'accent. */
	.nt-vertical-nav .wp-block-navigation__submenu-container {
		top: 0;
		left: 100%;
		min-width: 240px;
		border: 0;
		border-left: 3px solid var(--wp--preset--color--accent-1);
		background-color: var(--wp--preset--color--base);
		box-shadow: var(--nt-nav-shadow);
	}
}

/* Sous 980 px, Divi repassait en barre horizontale avec un bouton. Le bloc
   Navigation le fait déjà : on se contente de rendre l'en-tête normal. */
@media (max-width: 980px) {

	.wp-site-blocks > header.nt-vertical-nav {
		position: static;
		width: auto;
		height: auto;
		padding: 12px 20px;
		box-shadow: var(--nt-nav-shadow);
	}

	/* Divi passait le corps à 18 px sous 980 px. */
	body {
		font-size: 18px;
	}
}

/* --------------------------------------------------------------------------
   2. Le CSS additionnel de Divi (option `custom_css`, post 11383).
   Il n'a aucun autre point de chute après la bascule.
   -------------------------------------------------------------------------- */

/* Légendes centrées, motif éditorial de 5 articles. La classe est écrite à la
   main dans le contenu : elle doit survivre au changement de thème. */
.custom_caption {
	padding: 0 8px;
	text-align: center;
	font-style: italic;
	line-height: 1.3em;
}

/* Les liens du contenu sont soulignés. `theme.json` le pose déjà sur
   `elements.link` ; cette règle couvre les liens écrits en HTML brut
   dans les blocs `core/html`. */
.entry-content a,
.wp-block-post-content a,
.wp-block-html a {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   3. Le pied de page.

   Divi le veut à #222222 ; le thème enfant v1 le forçait à #FAFAF8 en gagnant
   à l'ordre de chargement. Sans cette déclaration explicite, le pied de page
   changerait d'aspect à la bascule (§3.6 du plan).
   -------------------------------------------------------------------------- */

.wp-site-blocks > footer {
	background-color: var(--wp--preset--color--accent-5);
	border-top: 1px solid var(--wp--preset--color--accent-6);
}

.nt-footer-bottom {
	font-size: 14px;
	font-style: italic;
	color: var(--wp--preset--color--accent-4);
}

/* Sous Divi, tous les liens du pied de page étaient rouges et non soulignés —
   les deux colonnes de navigation comme la liste « Just published ». Sans cette
   règle, la navigation du pied sort en gris foncé (couleur propre au bloc
   `core/navigation`) et la liste des articles récents sort soulignée : deux
   écarts visibles avec la capture T0 (`footer.png`). Le survol reprend
   l'accent de survol, comme partout ailleurs. */
.wp-site-blocks > footer a {
	color: var(--wp--preset--color--accent-2);
	text-decoration: none;
}

.wp-site-blocks > footer a:hover,
.wp-site-blocks > footer a:focus-visible {
	color: var(--wp--preset--color--accent-1);
	text-decoration: underline;
}

/* Le bloc `core/navigation` impose `color: inherit` à ses ancres avec une
   spécificité supérieure : sans le nommer, les deux colonnes du pied restent
   grises. La navigation verticale de gauche, elle, garde sa règle à elle. */
.wp-site-blocks > footer .wp-block-navigation .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent-2);
}

.wp-site-blocks > footer .wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-site-blocks > footer .wp-block-navigation .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--accent-1);
	text-decoration: underline;
}

/* …sauf le bouton, qui porte déjà son fond et son texte. */
.wp-site-blocks > footer .wp-block-button__link {
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   4. La barre latérale des articles.

   Neuf articles la portaient en dur dans leur contenu, via `divi/sidebar`,
   masquée en mobile. Elle est désormais dans le gabarit, et elle disparaît
   au même point de rupture.
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {

	.nt-sidebar {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   5. Les cartes d'archive et la ligne méta.

   La ligne méta est volontairement isolée dans son propre `core/group` :
   la refonte v3 (`maquettes/blog-structure-wireframe.html`) y ajoutera un
   statut de projet sans avoir à redécouper le gabarit. Coût aujourd'hui : nul.
   -------------------------------------------------------------------------- */

.nt-card {
	padding: 0 0 20px;
}

.nt-card .wp-block-post-title {
	margin-bottom: 6px;
}

.nt-card-meta,
.nt-post-meta {
	gap: 12px;
	margin-bottom: 12px;
	color: var(--wp--preset--color--accent-4);
	font-size: var(--wp--preset--font-size--small);
}

.nt-card-meta a,
.nt-post-meta a {
	color: inherit;
}

/* --------------------------------------------------------------------------
   6. Le tableau « Key info » des études de cas.

   Reprend le tableau que le layout Divi 11032 dessinait en HTML inline :
   deux colonnes à 50 %, bordures fines. Les huit champs Pods sont rendus par
   `[pods field="…"]` dans `templates/single-case_study.html` — WordPress
   applique `do_shortcode()` à la sortie d'un gabarit de blocs
   (wp-includes/block-template.php, ligne 262), le shortcode y résout donc
   contre le contenu interrogé.
   -------------------------------------------------------------------------- */

.nt-case-study-keyinfo {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 30px;
}

.nt-case-study-keyinfo td {
	width: 50%;
	padding: 8px 12px;
	border: 1px solid var(--wp--preset--color--accent-6);
	vertical-align: top;
}