/*==============================================================================
//
//  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.
//
//==============================================================================*/

/*---------- Photo du hero : geree par theme-magazine.css ------------------------
   La regle .jumbotron ... img:not([srcset]) empeche desormais tout
   agrandissement des images qui n'ont pas de version plus grande.       */

/*---------- 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; }

/*---------- Saisie des heures de la page 74 --------------------------------------
   Dans un input-group Bootstrap, un champ recoit flex:1 1 auto : les deux
   listes deroulantes et le bouton se partageaient donc toute la largeur
   disponible, d'ou des champs demesures pour saisir "10" et "30".
   On leur rend leur largeur naturelle.                                     */
.cf-page .input-group > .cf-champ-heure,
.cf-page .input-group > input[type="submit"] {
	flex: 0 0 auto;
	width: auto;
}
.cf-page .input-group > .cf-champ-heure {
	min-width: 8rem;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	text-align: center;
}
/*  Sur petit ecran, le libelle et les champs doivent pouvoir passer a la ligne
    plutot que de deborder.                                                 */
@media (max-width: 767px) {
	.cf-page .input-group { flex-wrap: wrap; }
	.cf-page .input-group > .input-group-text { flex: 1 0 100%; }
}

/*---------- Diagramme de Gantt de la page 74 (« A quelle heure ? ») --------------
   Il etait construit avec des <table> bordees et des couleurs en dur. Il
   devient une barre continue, sur le modele de celle des pages recettes, et
   reprend sa palette : vert preparation, bleu repos, orange braise cuisson. */
.cf-gantt {
	display: flex;
	width: 100%;
	height: 40px;
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 1.2rem;
}
.cf-gantt-seg {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .8rem;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	cursor: help;
	/*  Un segment de 5 minutes sur 4 heures ne fait que 2 % : sans minimum il
	    serait invisible et son infobulle inatteignable.                    */
	min-width: 26px;
	transition: filter .15s ease;
}
.cf-gantt-seg:hover { filter: brightness(1.08); }
.cf-seg-p { background-color: #90EE90; color: #1C1B19; }   /* preparation */
.cf-seg-r { background-color: #2196F3; color: #FFFFFF; }   /* repos       */
.cf-seg-c { background-color: #E8590C; color: #FFFFFF; }   /* cuisson     */
.cf-seg-h { background-color: #FFD700; color: #1C1B19; }   /* attente     */

/*---------- Heures de debut et de fin, de part et d'autre de la barre ----------*/
.cf-gantt-heures {
	display: flex;
	justify-content: space-between;
	margin: 1.2rem 0 .4rem;
}
.cf-gantt-h {
	background-color: var(--cf-soft);
	border: 1px solid var(--cf-line);
	border-radius: 999px;
	padding: .2rem .8rem;
	font-size: .88rem;
	font-weight: 600;
	color: var(--cf-ink);
}

/*---------- Legende : memes couleurs que les segments -------------------------*/
.cf-gantt-cle {
	display: inline-block;
	border-radius: 999px;
	padding: .2rem .8rem;
	margin-right: .4rem;
	font-size: .85rem;
	font-weight: 600;
}

@media (max-width: 575px) {
	.cf-gantt { height: 34px; }
	.cf-gantt-seg { font-size: .72rem; min-width: 20px; }
}

/*---------- 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; } }