/*
Theme Name: Tchad Vision
Theme URI: https://tchadvision.com
Template: videopro
Author: Tchad Vision
Author URI: https://tchadvision.com
Description: Theme enfant de VideoPro pour tchadvision.com. Toute personnalisation va ici, pour survivre aux mises a jour du theme parent.
Version: 1.0.0
Text Domain: videopro-child
*/

/* ==================================================================
   Le CSS du parent est charge par functions.php, pas par @import.
   Ce fichier ne contient que les ajouts propres a Tchad Vision.

   Note de specificite : VideoPro injecte custom.css.php en <style>
   inline, donc APRES cette feuille. Les regles ci-dessous partent
   de .home ou .cactus-listing-config pour passer devant sans
   recourir a !important.
   ================================================================== */


/* ------------------------------------------------------------------
   1. Accueil : ce qui precedait l'information
   ------------------------------------------------------------------
   L'en-tete d'archive n'affichait sur la page d'accueil qu'un fil
   d'Ariane reduit a "Accueil", c'est-a-dire un lien vers la page ou
   le lecteur se trouve deja. VideoPro le code en dur (show_on_home = 1
   dans inc/template-tags.php), sans reglage pour l'eteindre.
   Il reste rendu sur les categories et les articles, ou il sert.
   ------------------------------------------------------------------ */

.home .archive-header {
	display: none;
}


/* ------------------------------------------------------------------
   2. La une
   ------------------------------------------------------------------
   Premier article de la premiere page d'accueil (classe posee par
   html/loop/content.php). Un quotidien annonce sa nouvelle principale ;
   la liste egalitaire de VideoPro ne le permettait pas.
   ------------------------------------------------------------------ */

.home .cactus-listing-config .cactus-post-item.tv-une {
	width: 100%;
	margin-bottom: 40px;
	padding-bottom: 32px;
	border-bottom: 1px solid #e5e5e5;
}

/* Le titre porte la hierarchie : 22px sur telephone contre 14px pour les
   articles suivants. Les paliers sont explicites et non calcules en vw :
   des la tablette le titre vit dans une colonne de 42%, une taille indexee
   sur la largeur du viewport y produirait des titres de cinq lignes. */
.home .cactus-listing-config .cactus-post-item.tv-une > .entry-content .cactus-post-title {
	font-size: 22px;
	line-height: 1.22;
	margin-top: 16px;
	margin-bottom: 10px;
}

.home .cactus-listing-config .cactus-post-item.tv-une > .entry-content .excerpt {
	font-size: 16px;
	line-height: 1.55;
}

/* L'image de une occupe toute la largeur qu'on lui donne. */
.home .cactus-listing-config .cactus-post-item.tv-une > .entry-content .picture img {
	width: 100%;
	height: auto;
}

/* A partir de la tablette, la une passe en deux colonnes : l'image ne
   doit pas repousser le titre sous la ligne de flottaison. */
@media (min-width: 768px) {
	.home .cactus-listing-config .cactus-post-item.tv-une > .entry-content {
		display: flex;
		align-items: flex-start;
		gap: 28px;
	}

	.home .cactus-listing-config .cactus-post-item.tv-une > .entry-content .picture {
		flex: 0 0 52%;
		margin-bottom: 0;
	}

	.home .cactus-listing-config .cactus-post-item.tv-une > .entry-content .content {
		flex: 1 1 auto;
		min-width: 0;
	}

	/* Le titre repart du haut de l'image, sans le decalage herite de la
	   mise en page verticale. */
	.home .cactus-listing-config .cactus-post-item.tv-une > .entry-content .cactus-post-title {
		font-size: 24px;
		margin-top: 0;
	}
}

@media (min-width: 1024px) {
	.home .cactus-listing-config .cactus-post-item.tv-une > .entry-content .picture {
		flex: 0 0 56%;
	}

	.home .cactus-listing-config .cactus-post-item.tv-une > .entry-content .cactus-post-title {
		font-size: 30px;
	}
}


/* ------------------------------------------------------------------
   3. Lecture d'un article
   ------------------------------------------------------------------
   Le corps heritait du 14 px du <body> en gris #666, sur des articles
   de 800 a 900 mots. C'est une taille d'interface, pas une taille de
   lecture. Le plancher de lecture sur le web est 16 px.

   Sur la mesure de ligne : la plage confortable est 45 a 75 caracteres.
   Elle est hors d'atteinte sur un ecran de 375 px des qu'on passe a
   16 px, quel que soit le reglage. On tranche donc en faveur de la
   lisibilite du caractere sur telephone, et on plafonne la mesure sur
   grand ecran, ou les deux sont conciliables.
   ------------------------------------------------------------------ */

.single-post-content .body-content {
	font-size: 16px;
	line-height: 1.7;
	color: #24262b;
}

.single-post-content .body-content p {
	margin: 0 0 1.2em;
	color: inherit;
}

/* Les intertitres de l'article se distinguaient a peine du corps. */
.single-post-content .body-content h2,
.single-post-content .body-content h3,
.single-post-content .body-content h4 {
	color: #14161a;
	line-height: 1.3;
	margin: 1.8em 0 0.6em;
}

.single-post-content .body-content h2 { font-size: 21px; }
.single-post-content .body-content h3 { font-size: 18px; }

.single-post-content .body-content ul,
.single-post-content .body-content ol {
	margin: 0 0 1.2em 1.2em;
}

.single-post-content .body-content li {
	margin-bottom: 0.45em;
}

/* Le fil d'Ariane rejouait le titre complet de l'article, ici sur trois
   lignes et 92 px de haut, juste avant une image de 660 px : le titre
   lui-meme passait sous la ligne de flottaison. On garde le chemin,
   on coupe la redite. */
.single .cactus-breadcrumb li.current {
	display: none;
}

/* Une photo d'illustration ne doit pas occuper tout l'ecran. Le theme sert
   l'image d'origine en taille full : une photo carree de 871 px faisait
   901 px de haut sur un ecran de 720. On plafonne la hauteur affichee
   sans toucher au fichier servi. */
.single-post-content .style-post img,
.single-post-content .style-post .featured-img img {
	max-height: 58vh;
	width: auto;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	display: block;
}

@media (min-width: 768px) {
	.single-post-content .body-content {
		font-size: 17px;
	}

	/* Au-dela, la ligne devient trop longue pour que l'oeil retrouve
	   le debut de la suivante. */
	.single-post-content .body-content > p,
	.single-post-content .body-content > ul,
	.single-post-content .body-content > ol,
	.single-post-content .body-content > h2,
	.single-post-content .body-content > h3 {
		max-width: 68ch;
	}

	.single-post-content .body-content h2 { font-size: 24px; }
	.single-post-content .body-content h3 { font-size: 20px; }
}


/* ------------------------------------------------------------------
   4. "A lire aussi"
   ------------------------------------------------------------------
   Bloc pose par mu-plugins/tv-lecture-article.php. Le site mesure
   1,03 page par visite : arrive ici, le lecteur n'avait qu'un
   PREV/NEXT chronologique. C'est le seul endroit de la page ou on lui
   propose une suite au moment ou il vient de finir sa lecture.
   ------------------------------------------------------------------ */

.tv-suite-lecture {
	margin: 40px 0 8px;
	padding-top: 24px;
	border-top: 2px solid #14161a;
}

.tv-suite-lecture__titre {
	font-size: 15px;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #14161a;
	margin: 0 0 18px;
}

.tv-suite-lecture__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 18px;
}

.tv-suite-lecture__lien {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	text-decoration: none;
	color: inherit;
}

.tv-suite-lecture__image {
	flex: 0 0 108px;
	line-height: 0;
}

.tv-suite-lecture__image img {
	width: 100%;
	height: auto;
	display: block;
}

.tv-suite-lecture__texte {
	flex: 1 1 auto;
	min-width: 0;
}

.tv-suite-lecture__intitule {
	display: block;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: #14161a;
}

.tv-suite-lecture__lien:hover .tv-suite-lecture__intitule,
.tv-suite-lecture__lien:focus-visible .tv-suite-lecture__intitule {
	text-decoration: underline;
}

.tv-suite-lecture__lien:focus-visible {
	outline: 2px solid #14161a;
	outline-offset: 3px;
}

.tv-suite-lecture__date {
	display: block;
	margin-top: 5px;
	font-size: 13px;
	color: #5c6169;
}

@media (min-width: 768px) {
	.tv-suite-lecture__liste {
		grid-template-columns: 1fr 1fr;
		gap: 22px 28px;
	}

	.tv-suite-lecture__titre {
		font-size: 16px;
	}
}


/* ------------------------------------------------------------------
   5. Colonne laterale
   ------------------------------------------------------------------
   Le widget Archives deroulait 1 341 px de liens vers des archives
   mensuelles, sous l'article, sur telephone. Personne ne navigue un
   site d'actualite par mois de publication. On le laisse en place
   pour ne rien supprimer de la configuration d'Ali, mais on lui donne
   une hauteur tenable et un defilement propre.
   ------------------------------------------------------------------ */

.cactus-sidebar .widget_block .wp-block-archives,
.cactus-sidebar .widget_archive ul {
	max-height: 260px;
	overflow-y: auto;
	padding-right: 8px;
}


/* ------------------------------------------------------------------
   6. Ordre de lecture d'un article
   ------------------------------------------------------------------
   Le theme place la photo avant le titre. Un lecteur qui arrive de
   Google voyait donc 335 px d'illustration, et devait faire defiler
   pour savoir s'il etait au bon endroit : le <h1> commencait a 507 px.
   L'ordre de la presse est titre, signature, photo, texte.
   Reordonne en flex plutot qu'en modifiant single.php, pour ne pas
   avoir a maintenir une copie du template a chaque mise a jour.
   Resultat mesure : le titre passe de 507 px a 142 px.
   ------------------------------------------------------------------ */

.single-post-content article.cactus-single-content {
	display: flex;
	flex-direction: column;
}

/* Tout ce qui n'est pas nomme ci-dessous garde sa place, apres. */
.single-post-content article.cactus-single-content > * {
	order: 5;
}

.single-post-content article.cactus-single-content > .cactus-breadcrumb { order: 1; }
.single-post-content article.cactus-single-content > .single-title     { order: 2; }
.single-post-content article.cactus-single-content > .post-metadata    { order: 3; }
.single-post-content article.cactus-single-content > .style-post       { order: 4; }
