/*==============================================================================
//
//  Theme "epure / magazine" - complement pour la liste des recettes (liste2.php)
//
//  S'ajoute a theme-magazine.css (charge avant). Ne contient que ce qui est
//  propre a cette page : le bandeau de commandes collant, les lignes de la
//  liste, le mur d'images et les titres de categorie.
//
//==============================================================================*/

/*---------- Bandeau de commandes collant ---------------------------------------
   Bascule liste/images, tri et recherche instantanee y sont regroupes, et il
   reste en haut de l'ecran pendant le defilement : sur une liste de plus de
   1500 recettes, devoir remonter pour filtrer etait le principal irritant.
   Le fond doit etre opaque, sinon la liste transparait dessous.           */
.cf-barre-liste {
	position: sticky;
	top: 0;
	z-index: 1020;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem .75rem;
	background-color: var(--cf-bg);
	border-bottom: 1px solid var(--cf-line);
	padding: .7rem 0;
	margin-bottom: 1.2rem;
}
.cf-recherche {
	max-width: 460px;
	margin-bottom: 0 !important;
}
/* ecrans bas (mobile en paysage) : un bandeau collant mangerait l'ecran */
@media (max-height: 500px) { .cf-barre-liste { position: static; } }

/*---------- Nombre de recettes, dans le titre -----------------------------------
   Mis en avant comme la quantite d'ingredients sur les pages recettes.     */
h1 .cf-compteur {
	color: var(--cf-accent);
	font-weight: 700;
}

/*---------- Titres de categorie ------------------------------------------------
   Ils utilisaient l'alerte bleue de Bootstrap : on les ramene au vocabulaire
   du theme, en titres de section soulignes.                               */
.alert-primary {
	background-color: transparent !important;
	border: 0 !important;
	border-bottom: 2px solid var(--cf-ink) !important;
	border-radius: 0 !important;
	color: var(--cf-ink) !important;
	padding-left: 0 !important;
	font-family: 'Lora', Georgia, serif;
	font-size: 1.1rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
	margin-top: 2.2rem;
}
.alert-primary a { color: var(--cf-ink); text-decoration: none; }
.alert-primary a:hover { color: var(--cf-accent); }

/*---------- Lignes de la liste, en mode texte -----------------------------------
   Les vignettes restent en 150 px : c'est leur taille native, les agrandir
   les rendrait floues, et passer par miniature.php couterait un
   redimensionnement par recette, soit plus de 1500 sur cette page.        */
[id="tableau-principal"] .row.border {
	border-color: var(--cf-line) !important;
	border-radius: var(--cf-radius);
	margin-bottom: .45rem;
	transition: background-color .15s ease;
}
[id="tableau-principal"] .row.border:hover { background-color: var(--cf-soft); }
[id="tableau-principal"] .row.border h5 { font-size: 1.05rem; margin-bottom: .2rem; }
[id="tableau-principal"] .row.border img { border-radius: 8px; }

/*---------- Mur d'images --------------------------------------------------------
   La hauteur etait exprimee en 10vw, donc dependante de la fenetre et non de
   la vignette : les cartes changeaient de proportion d'un ecran a l'autre.
   Hauteur fixe et cadrage centre, pour une grille reguliere.              */
[id="tableau-principal"] .card-img-top {
	width: 100%;
	height: 170px;
	object-fit: cover;
}
[id="tableau-principal"] .card {
	border: 1px solid var(--cf-line);
	border-radius: var(--cf-radius);
	overflow: hidden;
	transition: transform .15s ease;
}
[id="tableau-principal"] .card:hover { transform: translateY(-2px); }
[id="tableau-principal"] .card-body { padding: .6rem .5rem; }
[id="tableau-principal"] .card-text { font-size: .88rem; line-height: 1.3; }
@media (max-width: 575px) { [id="tableau-principal"] .card-img-top { height: 130px; } }

/*---------- Carrousel d'illustration --------------------------------------------*/
#carrousel_recettes_liste img { border-radius: var(--cf-radius); }

/*---------- Mode sombre -----------------------------------------------------------*/
[data-bs-theme="dark"] [id="tableau-principal"] .row.border:hover { background-color: #2A2825; }