/*==============================================================================
//
//  Theme "epure / magazine" - complement pour les articles de blog (blog2.php)
//
//  S'ajoute a theme-magazine.css (charge avant). Ne contient que ce qui est
//  propre a un article : la colonne de lecture et la hierarchie des titres
//  internes.
//
//==============================================================================*/

/*---------- Le texte de l'article ---------------------------------------------
   Corps legerement augmente et interligne aere, comme le ferait un magazine
   pour un texte suivi.                                                      */
.cf-article {
	margin: 2rem 0 3rem;
	font-size: 1.08rem;
	line-height: 1.75;
	/*---------- Encadre : l'article est ainsi clairement identifie comme le
	  corps de la page, distinct des blocs qui l'entourent (boutons, derniers
	  articles, commentaires).                                              */
	background-color: #FFFFFF;
	border: 1px solid var(--cf-line);
	border-radius: var(--cf-radius);
	padding: 1.8rem 2rem;
}
.cf-article p { margin-bottom: 1.15rem; }
[data-bs-theme="dark"] .cf-article { background-color: #242320; }
@media (max-width: 575px) { .cf-article { padding: 1.1rem 1.2rem; } }

/*---------- Largeur : pleine largeur, comme le reste du site --------------------
   J'avais d'abord plafonne les articles en prose a une colonne de lecture
   (78 caracteres). Choix ecarte : jh prefere que le texte occupe toute la
   zone disponible, par coherence avec le chapo de l'accueil.
   Si les lignes devenaient penibles a lire sur un tres grand ecran, la
   solution serait un plafond genereux (110ch) plutot qu'un retour a 78.    */

/*---------- Titres internes a l'article ---------------------------------------
   Les articles utilisent des <h2> comme intertitres : ils doivent rester
   nettement sous le <h1> du hero, tout en restant reperables.              */
.cf-article h2 {
	font-size: 1.5rem;
	font-weight: 600;
	margin: 2.2rem 0 .8rem;
}
.cf-article h3 { font-size: 1.2rem; font-weight: 600; margin: 1.8rem 0 .6rem; }

/*---------- Grilles image + texte dans l'article -------------------------------
   nl2br() transforme les sauts de ligne du texte en <br>, y compris entre les
   colonnes d'une .row. Or une .row est un conteneur flex : ces <br> y
   deviennent des elements a part entiere. Comme les colonnes occupent deja
   100 % de la ligne, le moindre element supplementaire fait passer la seconde
   colonne en dessous de la premiere, au lieu d'etre a sa droite.
   On les neutralise : ils n'ont aucune utilite a cet endroit.               */
.cf-article .row > br { display: none; }
/*---------- Largeur des colonnes image / texte ---------------------------------
   Les photos d'article font 350 px de large. Avec la grille d'origine, la
   colonne "col-md-2" n'en faisait que 245 (la page etant plafonnee a 1560 et
   le cadre prenant du rembourrage) : les images etaient donc reduites, et
   moins nettes. On laisse la colonne image prendre la largeur naturelle de
   la photo, et la colonne de texte occuper tout le reste.
   Uniquement a partir de 768 px : en dessous, Bootstrap empile les colonnes
   et chacune doit rester pleine largeur.                                    */
@media (min-width: 768px) {
	.cf-article .row > [class*="col-md-2"] {
		flex: 0 0 auto;
		width: auto;
		max-width: 40%;
	}
	.cf-article .row > [class*="col-md-10"] {
		flex: 1 1 0;
		width: auto;
		max-width: none;
	}
}

/*---------- Interligne dans les colonnes de texte ------------------------------
   Les paragraphes y sont separes par des <br><br> issus de nl2br() : leur
   hauteur vaut l'interligne. Avec 1.75, adapte a un texte suivi, les blancs
   deviennent enormes a cote d'une image. On resserre pour ces colonnes.   */
.cf-article .row [class*="col"] { line-height: 1.5; }

/*---------- Images inserees dans le texte -------------------------------------*/
.cf-article img {
	max-width: 100%;
	height: auto;
	border-radius: var(--cf-radius);
	margin: .5rem 0 1rem;
}

/*---------- Citations, listes ---------------------------------------------------*/
.cf-article blockquote {
	border-left: 3px solid var(--cf-accent);
	padding-left: 1.1rem;
	margin: 1.6rem 0;
	color: var(--cf-muted);
	font-style: italic;
}
.cf-article ul, .cf-article ol { margin-bottom: 1.15rem; }
.cf-article li { margin-bottom: .35rem; }

/*---------- Vignettes du bloc "derniers articles" -------------------------------
   La source est la photo de l'article ramenee a 300 px (voir blog2.php) :
   affichee en 150, elle est donc reduite exactement de moitie, ce qui la
   garde nette, y compris sur les ecrans haute densite.
   Format impose en 3:2, comme les photos d'origine, pour une colonne reguliere. */
#derniers .row img,
#traine .row img {
	width: 150px;
	height: 100px;
	object-fit: cover;
}
@media (max-width: 575px) {
	#derniers .row img,
	#traine .row img { width: 110px; height: 73px; }
}

/*---------- Ancre : ne pas atterrir sous la barre collante ----------------------*/
#article, #derniers { scroll-margin-top: 4.5rem; }
@media (max-width: 767px) { #article, #derniers { scroll-margin-top: 3.8rem; } }

/*---------- Mobile ---------------------------------------------------------------*/
@media (max-width: 575px) { .cf-article { font-size: 1.02rem; margin-top: 1.4rem; } }