/*==============================================================================
//
//  Theme "epure / magazine" - complement pour les pages generiques (page2.php)
//
//  S'ajoute a theme-magazine.css (charge avant). Ne contient que ce qui est
//  propre a ces pages : le corps de texte, ses titres internes et le sommaire
//  automatique.
//
//==============================================================================*/

/*---------- Corps de la page ----------------------------------------------------
   Encadre, comme les articles de blog : il est ainsi clairement identifie au
   milieu des blocs qui l'entourent (traine, commentaires, suivi).       */
.cf-page {
	display: block;
	margin: 1.5rem 0 3rem;
	font-size: 1.08rem;
	line-height: 1.75;
	background-color: #FFFFFF;
	border: 1px solid var(--cf-line);
	border-radius: var(--cf-radius);
	padding: 1.8rem 2rem;
}
.cf-page p { margin-bottom: 1.15rem; }
[data-bs-theme="dark"] .cf-page { background-color: #242320; }
@media (max-width: 575px) { .cf-page { padding: 1.1rem 1.2rem; font-size: 1.02rem; } }

/*---------- Titres internes ------------------------------------------------------
   page.php habille les <h2> et <h3> du texte avec .blue-gradient-h2 et -h3,
   deux aplats bleus definis en dur dans head.php. On les ramene au
   vocabulaire du theme : filet sous le titre plutot que fond colore.
   Les regles de head.php restent en place mais sont neutralisees ici.    */
.cf-page .blue-gradient-h2,
.cf-page .blue-gradient-h3 {
	background-color: transparent !important;
	color: var(--cf-ink) !important;
	padding-left: 0 !important;
	border-radius: 0 !important;
	font-family: 'Lora', Georgia, serif;
	font-weight: 600;
}
.cf-page .blue-gradient-h2 {
	border-bottom: 2px solid var(--cf-ink);
	font-size: 1.35rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	padding-bottom: .35rem;
	margin: 2.4rem 0 1rem;
}
.cf-page .blue-gradient-h3 {
	border-left: 3px solid var(--cf-accent);
	padding-left: .7rem !important;
	font-size: 1.15rem;
	margin: 1.8rem 0 .7rem;
}

/*---------- Sommaire automatique --------------------------------------------------
   Les pages longues proposent une ligne de liens vers leurs <h2>. Elle reste
   accessible pendant le defilement, comme la barre d'ancres des recettes.
   Fond opaque obligatoire, sinon le texte transparait dessous.          */
/*  Le sommaire est concatene au texte : il se trouve donc DANS le cadre blanc.
    Son fond reprend celui du cadre, et les marges negatives lui font couvrir
    tout le rembourrage lateral quand il est colle.                        */
.cf-sommaire {
	position: sticky;
	top: 0;
	z-index: 1020;
	background-color: #FFFFFF;
	border-bottom: 1px solid var(--cf-line);
	padding: .6rem 2rem;
	margin: -1.8rem -2rem 1.4rem;
}
[data-bs-theme="dark"] .cf-sommaire { background-color: #242320; }
@media (max-width: 575px) { .cf-sommaire { padding: .5rem 1.2rem; margin: -1.1rem -1.2rem 1rem; } }
.cf-sommaire .pagination { flex-wrap: wrap; gap: .3rem; }
.cf-sommaire .page-link {
	border: 1px solid var(--cf-line);
	border-radius: 999px !important;
	color: var(--cf-ink);
	font-size: .85rem;
	padding: .25rem .8rem;
}
.cf-sommaire .page-link:hover { background-color: var(--cf-soft); color: var(--cf-accent); }
.cf-sommaire .page-item.disabled .page-link { border: 0; background: none; color: var(--cf-muted); }
/* les ancres ne doivent pas atterrir sous le sommaire collant */
.cf-page [id^="step"] { scroll-margin-top: 4.5rem; }
/* ecrans bas (mobile en paysage) : un sommaire collant mangerait l'ecran */
@media (max-height: 500px) { .cf-sommaire { position: static; } }

/*---------- Images inserees dans le texte ------------------------------------------*/
.cf-page img {
	max-width: 100%;
	height: auto;
	border-radius: var(--cf-radius);
}
/* les <br> entre colonnes d'une grille cassent la mise en page (cf. blog.css) */
.cf-page .row > br { display: none; }
.cf-page .row [class*="col"] { line-height: 1.5; }

/*---------- Vignettes de la traine ---------------------------------------------------*/
#traine .row img {
	width: 150px;
	height: 100px;
	object-fit: cover;
}
@media (max-width: 575px) { #traine .row img { width: 110px; height: 73px; } }