/*
Theme Name: VTh Reseau
Theme URI: https://pod-admin.fibo.bot
Author: Vikings Technologies
Description: Theme commun aux blogs du reseau VTh. Thema bloc (FSE) Gutenberg, palette Vikings orange / anthracite / blanc, mise en forme de blog technique.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.1
License: Proprietary
Text Domain: vth-reseau
Tags: blog, block-theme, full-site-editing
*/

/* Le design system vit dans theme.json. Ici uniquement ce que theme.json
   ne sait pas exprimer. */

/* Titre du site : le point orange caracteristique */
.site-titre a { text-decoration: none; }
.site-titre a::after { content: "."; color: var(--wp--preset--color--orange); }

/* Liens de contenu : soulignement discret qui s epaissit au survol */
.wp-block-post-content a { text-underline-offset: 3px; text-decoration-thickness: 1px; }
.wp-block-post-content a:hover { text-decoration-thickness: 2px; }

/* Cartes d articles dans les listes */
.carte-article { border: 1px solid var(--wp--preset--color--bordure); border-radius: 10px; overflow: hidden; background: #fff; transition: border-color .15s ease, transform .15s ease; }
.carte-article:hover { border-color: var(--wp--preset--color--orange); transform: translateY(-2px); }
.carte-article .wp-block-post-featured-image img { aspect-ratio: 16/9; object-fit: cover; width: 100%; }

/* Meta (date, categorie, auteur) */
.article-meta { color: var(--wp--preset--color--gris); font-size: var(--wp--preset--font-size--petit); }
.article-meta a { color: inherit; text-decoration: none; }
.article-meta a:hover { color: var(--wp--preset--color--orange-sombre); }

/* Termes de taxonomie facon etiquette */
.wp-block-post-terms a { display: inline-block; background: var(--wp--preset--color--gris-clair); color: var(--wp--preset--color--gris-fonce);
  padding: .2rem .7rem; border-radius: 999px; font-size: .8125rem; text-decoration: none; margin-right: .35rem; }
.wp-block-post-terms a:hover { background: var(--wp--preset--color--orange); color: var(--wp--preset--color--anthracite); }

/* Code inline */
.wp-block-post-content code:not(.wp-block-code code) { background: var(--wp--preset--color--gris-clair); padding: .1rem .4rem; border-radius: 4px;
  font-family: var(--wp--preset--font-family--mono); font-size: .9em; }

/* Tableaux lisibles */
.wp-block-table table { border-collapse: collapse; width: 100%; }
.wp-block-table th { background: var(--wp--preset--color--anthracite); color: #fff; text-align: left; }
.wp-block-table th, .wp-block-table td { border: 1px solid var(--wp--preset--color--bordure); padding: .6rem .8rem; }
.wp-block-table tbody tr:nth-child(even) { background: #FAFAFA; }

/* Accessibilite : focus visible au clavier */
a:focus-visible, button:focus-visible, input:focus-visible, .wp-block-button__link:focus-visible {
  outline: 3px solid var(--wp--preset--color--orange); outline-offset: 2px; }

/* Impression : on retire le superflu */
@media print { .wp-block-template-part, .bloc-cta { display: none !important; } }

/* Titres d articles : anthracite au repos, orange au survol.
   Sans cette regle ils heritent de la couleur de lien et deviennent criards. */
.wp-block-post-title a { color: var(--wp--preset--color--anthracite); text-decoration: none; }
.wp-block-post-title a:hover { color: var(--wp--preset--color--orange-sombre); }

/* Le titre du site ne doit pas non plus virer a l orange */
.wp-block-site-title a { color: var(--wp--preset--color--anthracite); text-decoration: none; }
.wp-block-site-title a:hover { color: var(--wp--preset--color--orange-sombre); }

/* Navigation : liens sobres */
.wp-block-navigation a { color: var(--wp--preset--color--gris-fonce); text-decoration: none; }
.wp-block-navigation a:hover { color: var(--wp--preset--color--orange-sombre); }

/* --------------------------------------------------------------- Auteur */

.vth-auteur {
	display: flex;
	gap: var(--wp--preset--spacing--30, 1.5rem);
	align-items: flex-start;
	margin: var(--wp--preset--spacing--50, 2.5rem) 0;
	padding: var(--wp--preset--spacing--30, 1.5rem);
	border: 1px solid var(--wp--preset--color--bordure, #DDDDDD);
	border-left: 3px solid var(--wp--preset--color--orange, #FF9600);
	border-radius: 10px;
	background: var(--wp--preset--color--gris-clair, #F1F1F1);
}

.vth-auteur__photo {
	flex: 0 0 auto;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
}

.vth-auteur__photo--monogramme {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--orange, #FF9600);
	color: var(--wp--preset--color--anthracite, #202020);
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.vth-auteur__texte {
	min-width: 0;
}

.vth-auteur__role {
	margin: 0;
	font-size: var(--wp--preset--font-size--petit, 0.85rem);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--gris, #6B6B6B);
}

.vth-auteur__nom {
	margin: 0.2em 0 0.4em;
	font-size: var(--wp--preset--font-size--moyen, 1.25rem);
	font-weight: 700;
}

.vth-auteur__nom a {
	color: var(--wp--preset--color--anthracite, #202020);
	text-decoration: none;
}

.vth-auteur__nom a:hover,
.vth-auteur__nom a:focus {
	color: var(--wp--preset--color--orange-sombre, #CC7800);
	text-decoration: underline;
}

.vth-auteur__bio {
	margin: 0;
	color: var(--wp--preset--color--gris-fonce, #3A3A3A);
}

@media (max-width: 600px) {
	.vth-auteur {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
}

/* L illustration d article occupe la moitie de la colonne de lecture, sans
   jamais deborder sur les petits ecrans. */
.wp-block-post-featured-image {
	max-width: 100%;
}

/* ------------------------------------------------------- Reseau de sites */

.vth-reseau__titre {
	margin: 0 0 var(--wp--preset--spacing--30, 1.5rem);
	font-size: var(--wp--preset--font-size--petit, 0.85rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--gris, #6B6B6B);
}

.vth-reseau__liste {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--30, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vth-reseau__carte {
	padding: var(--wp--preset--spacing--30, 1.5rem);
	border: 1px solid var(--wp--preset--color--bordure, #DDDDDD);
	border-top: 3px solid var(--wp--preset--color--orange, #FF9600);
	border-radius: 10px;
	background: var(--wp--preset--color--blanc, #FFFFFF);
}

.vth-reseau__site {
	margin: 0 0 0.4em;
	font-size: var(--wp--preset--font-size--petit, 0.85rem);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--orange-sombre, #CC7800);
}

.vth-reseau__lien {
	margin: 0 0 0.5em;
	font-weight: 700;
	line-height: 1.3;
}

.vth-reseau__lien a {
	color: var(--wp--preset--color--anthracite, #202020);
	text-decoration: none;
}

.vth-reseau__lien a:hover,
.vth-reseau__lien a:focus {
	color: var(--wp--preset--color--orange-sombre, #CC7800);
	text-decoration: underline;
}

.vth-reseau__extrait {
	margin: 0;
	font-size: var(--wp--preset--font-size--petit, 0.85rem);
	color: var(--wp--preset--color--gris-fonce, #3A3A3A);
}

.vth-reseau__sites {
	margin: var(--wp--preset--spacing--30, 1.5rem) 0 0;
	font-size: var(--wp--preset--font-size--petit, 0.85rem);
	color: var(--wp--preset--color--gris, #6B6B6B);
}

.vth-reseau__sites a {
	color: var(--wp--preset--color--gris-fonce, #3A3A3A);
}

@media (max-width: 900px) {
	.vth-reseau__liste {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------- Accueil */

.vth-une {
	align-items: flex-start;
}

.vth-une .wp-block-post-title {
	line-height: 1.15;
	overflow-wrap: break-word;
	hyphens: manual;
}

.vth-une .wp-block-post-title a {
	color: var(--wp--preset--color--anthracite, #202020);
	text-decoration: none;
}

.vth-une .wp-block-post-title a:hover,
.vth-une .wp-block-post-title a:focus {
	color: var(--wp--preset--color--orange-sombre, #CC7800);
}

.vth-une__rubrique a {
	display: inline-block;
	padding: 0.25em 0.8em;
	border-radius: 999px;
	background: var(--wp--preset--color--gris-clair, #F1F1F1);
	color: var(--wp--preset--color--gris-fonce, #3A3A3A);
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.vth-une__rubrique a:hover,
.vth-une__rubrique a:focus {
	background: var(--wp--preset--color--orange, #FF9600);
	color: var(--wp--preset--color--anthracite, #202020);
}

.vth-une__meta {
	gap: 0.9em;
	margin-top: var(--wp--preset--spacing--20, 0.8rem);
	color: var(--wp--preset--color--gris, #6B6B6B);
}

.vth-une__meta > * {
	margin: 0;
}

.vth-titre-colonne {
	margin: 0 0 var(--wp--preset--spacing--30, 1.5rem);
	padding-bottom: 0.6em;
	border-bottom: 2px solid var(--wp--preset--color--orange, #FF9600);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--gris, #6B6B6B);
}

.vth-breves {
	display: grid;
	gap: var(--wp--preset--spacing--30, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vth-breve {
	gap: 1rem;
	align-items: flex-start;
}

.vth-breve .wp-block-post-featured-image {
	flex: 0 0 92px;
	margin: 0;
}

.vth-breve .wp-block-post-featured-image img {
	width: 92px;
	height: 69px;
	object-fit: cover;
	border-radius: 8px;
}

.vth-breve .wp-block-post-title {
	margin: 0 0 0.3em;
	line-height: 1.3;
}

.vth-breve .wp-block-post-title a {
	color: var(--wp--preset--color--anthracite, #202020);
	text-decoration: none;
}

.vth-breve .wp-block-post-title a:hover,
.vth-breve .wp-block-post-title a:focus {
	color: var(--wp--preset--color--orange-sombre, #CC7800);
}

.vth-breve .wp-block-post-date {
	margin: 0;
	color: var(--wp--preset--color--gris, #6B6B6B);
}

@media (max-width: 781px) {
	.vth-une {
		gap: var(--wp--preset--spacing--50, 2.5rem);
	}
	.vth-titre-colonne {
		margin-top: var(--wp--preset--spacing--40, 2rem);
	}
}

/* La une est volontairement plus compacte que la grille : elle doit donner
   envie de cliquer, pas occuper tout l ecran. */

.vth-une .wp-block-post-title {
	font-size: 1.5rem;
	line-height: 1.2;
}

.vth-une .wp-block-post-featured-image {
	max-width: 100%;
}

.vth-une .wp-block-post-featured-image img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

.vth-une .wp-block-post-excerpt {
	max-width: 100%;
}

/* --------------------------------------------------------- Lire l article */

.vth-lire {
	margin: 0.9em 0 0;
}

.vth-lire .wp-block-read-more,
a.vth-lire {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	font-size: var(--wp--preset--font-size--petit, 0.875rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--orange-sombre, #CC7800);
	text-decoration: none;
	border-bottom: 2px solid transparent;
}

.vth-lire::after,
a.vth-lire::after {
	content: "\2192";
	transition: transform 0.15s ease;
}

.vth-lire:hover,
a.vth-lire:hover,
.vth-lire:focus,
a.vth-lire:focus {
	color: var(--wp--preset--color--anthracite, #202020);
	border-bottom-color: var(--wp--preset--color--orange, #FF9600);
}

.vth-lire:hover::after,
a.vth-lire:hover::after {
	transform: translateX(3px);
}

/* Dans la une, le lien prend l allure d un bouton plein. */
.vth-une a.vth-lire {
	padding: 0.6em 1.3em;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--orange, #FF9600);
	color: var(--wp--preset--color--anthracite, #202020);
}

.vth-une a.vth-lire:hover,
.vth-une a.vth-lire:focus {
	background: var(--wp--preset--color--orange-sombre, #CC7800);
	color: var(--wp--preset--color--blanc, #FFFFFF);
}

/* ------------------------------------------------------- Logo et en-tete */

.site-logo {
	margin: 0;
}

.site-logo img {
	display: block;
	height: auto;
}

/* Quand un logo est defini, il remplace le titre textuel plutot que de s y
   ajouter. */
.a-logo .site-titre .wp-block-site-title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Le sigle seul ne dit rien : le slogan doit rester lisible sous le titre. */
.site-slogan {
	margin: 0.2em 0 0;
	color: var(--wp--preset--color--gris-fonce, #3A3A3A);
	font-size: 1.05rem;
	font-weight: 500;
	line-height: 1.25;
}

@media (max-width: 600px) {
	.site-slogan {
		display: none;
	}
}

/* Le titre et le slogan s empilent ; le bouton reste seul a droite de la
   barre d en-tete. */
/* Specificite volontairement doublee : la mise en page generee par
   WordPress pour ce groupe impose sinon son propre espacement. */
.wp-block-group.site-titre {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.15rem;
}

/* L interlignage general du theme est genereux ; dans l en-tete il eloigne
   le slogan du nom du site. On le resserre, avec une specificite doublee pour
   passer devant les classes de taille generees par WordPress. */
.site-titre .wp-block-site-title {
	line-height: 1.15;
}

.site-titre .site-slogan.site-slogan {
	font-size: 1rem;
	line-height: 1.25;
}

/* WordPress impose la couleur de texte des boutons par une classe de preset
   en !important : c est la seule facon de la surcharger proprement. La valeur
   est calculee cote PHP pour rester lisible quelle que soit la couleur du site. */
.cta-entete .wp-block-button__link,
.vth-une a.vth-lire {
	color: var(--vth-sur-accent, #202020) !important;
}

/* ---------------------------------------------------- Menu des expertises */

.vth-expertises {
	position: relative;
}

.vth-expertises__bloc {
	position: relative;
}

.vth-expertises__declencheur {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.45em 0.2em;
	cursor: pointer;
	list-style: none;
	font-weight: 500;
	color: var(--wp--preset--color--anthracite, #202020);
}

.vth-expertises__declencheur::-webkit-details-marker {
	display: none;
}

.vth-expertises__declencheur::after {
	content: "\25BE";
	font-size: 0.8em;
	color: var(--wp--preset--color--gris, #6B6B6B);
}

.vth-expertises__bloc[open] .vth-expertises__declencheur {
	color: var(--wp--preset--color--orange-sombre, #CC7800);
}

.vth-expertises__liste {
	position: absolute;
	z-index: 20;
	top: calc(100% + 6px);
	left: 0;
	min-width: 260px;
	margin: 0;
	padding: 0.4rem 0;
	list-style: none;
	background: var(--wp--preset--color--blanc, #FFFFFF);
	border: 1px solid var(--wp--preset--color--bordure, #DDDDDD);
	border-top: 3px solid var(--wp--preset--color--orange, #FF9600);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(32, 32, 32, 0.1);
}

.vth-expertises__liste a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.5em 1rem;
	color: var(--wp--preset--color--gris-fonce, #3A3A3A);
	text-decoration: none;
}

.vth-expertises__liste a:hover,
.vth-expertises__liste a:focus {
	background: var(--wp--preset--color--gris-clair, #F1F1F1);
	color: var(--wp--preset--color--anthracite, #202020);
}

.vth-expertises__compte {
	margin-inline-start: 0.35em;
	font-size: var(--wp--preset--font-size--petit, 0.875rem);
	color: var(--wp--preset--color--gris, #6B6B6B);
}

@media (max-width: 900px) {
	.vth-expertises {
		display: none;
	}
}

/* Le titre absorbe l espace libre : le menu et le bouton se regroupent a
   droite au lieu d etre repartis sur toute la largeur. */
.wp-block-group.site-titre {
	margin-right: auto;
}

.vth-copyright {
	margin: 0;
	font-size: var(--wp--preset--font-size--petit, 0.875rem);
}

/* Chaines techniques longues (vecteurs CVSS, identifiants, adresses brutes) :
   sans ceci elles debordent horizontalement sous 400 px. */
.wp-block-post-content p,
.wp-block-post-content li,
.wp-block-post-content td,
.wp-block-post-content th,
.wp-block-post-content dd {
	overflow-wrap: break-word;
}

.wp-block-post-content .wp-block-table {
	overflow-x: auto;
}