/*==============================================================================
//
//  Theme "epure / magazine" - complement pour le trio produits / lexique /
//  materiel (produits2.php, lexique2.php, materiel2.php)
//
//  S'ajoute a theme-magazine.css (charge avant). Ces trois pages partagent le
//  meme rendu (include/commun-lex-mat-prod2.php) : une grille de cartes en
//  mode index, une fiche detaillee en mode item.
//
//==============================================================================*/

/*---------- Titres de rubrique --------------------------------------------------
   Ils utilisaient .bg-info (aplat cyan de Bootstrap, defini dans
   fonctions_communes.php). On les ramene au vocabulaire du theme.        */
h2.bg-info {
	background-color: transparent !important;
	color: var(--cf-ink) !important;
	padding-left: 0 !important;
	border-bottom: 2px solid var(--cf-ink);
	border-radius: 0 !important;
	font-size: 1.15rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .1em;
	padding-bottom: .4rem;
	margin: 2.4rem 0 1.2rem;
}

/*---------- Grille de cartes ------------------------------------------------------
   Le survol etait fait en JavaScript inline (onmouseover/onmouseout) et les
   dimensions en style="", ce qui les rendait insensibles au theme et
   impossibles a adapter en mode sombre.                                  */
.cf-carte-lien { text-decoration: none; }
.cf-carte {
	border: 1px solid var(--cf-line);
	border-radius: var(--cf-radius);
	overflow: hidden;
	background-color: #FFFFFF;
	transition: transform .15s ease, border-color .15s ease;
}
.cf-carte-lien:hover .cf-carte {
	transform: translateY(-3px);
	border-color: var(--cf-ink);
}
.cf-carte img {
	width: 100%;
	height: 130px;
	/*  contain, et non cover : ces photos sont des objets detoures sur fond
	    clair, les rogner couperait le manche d'un couteau ou le col d'une
	    bouteille.                                                          */
	object-fit: contain;
	background-color: var(--cf-soft);
	padding: 6px;
}
.cf-carte .card-footer {
	background-color: #FFFFFF;
	border: 0;
	border-top: 1px solid var(--cf-line);
	padding: .5rem .4rem;
	text-align: center;
}
.cf-carte .card-footer small {
	display: block;
	color: var(--cf-ink);
	font-weight: 500;
	line-height: 1.25;
	font-size: .85rem;
}
.cf-carte-lien:hover .card-footer small { color: var(--cf-accent); }
@media (max-width: 575px) { .cf-carte img { height: 100px; } }

/*---------- Fiche detaillee d'un item ---------------------------------------------
   Mode "un seul produit / mot / ustensile" : on l'encadre, comme le corps des
   articles de blog et des pages generiques.                              */
.cf-fiche {
	background-color: #FFFFFF;
	border: 1px solid var(--cf-line);
	border-radius: var(--cf-radius);
	padding: 1.4rem 1.6rem;
	margin-inline: 0;
	margin-bottom: 1.5rem;
	line-height: 1.7;
}
.cf-fiche h3 {
	font-size: 1.4rem;
	font-weight: 600;
	margin-bottom: .8rem;
}
.cf-fiche h4 {
	font-size: 1.1rem;
	font-weight: 600;
	margin-top: 1.4rem;
}
/*  Les dimensions sont gerees par theme-magazine.css : sa regle
    .jumbotron ... img:not([srcset]) empeche tout agrandissement des images
    sans version plus grande, ce qui est le cas ici (285 px en general).  */
.cf-fiche img { border-radius: var(--cf-radius); }
/*  La seconde photo du materiel (photo d'action) sort du PHP sans la classe
    align-self-center, contrairement a la premiere : elle se calait donc en
    haut de sa colonne. On centre les deux de la meme facon.              */
.cf-fiche > .col-md-auto { align-self: center; }
/* les <br> entre colonnes d'une grille cassent la mise en page (cf. blog.css) */
.cf-fiche > br { display: none; }
@media (max-width: 575px) { .cf-fiche { padding: 1rem 1.1rem; } }

/*---------- Mode sombre -------------------------------------------------------------*/
[data-bs-theme="dark"] .cf-carte,
[data-bs-theme="dark"] .cf-carte .card-footer,
[data-bs-theme="dark"] .cf-fiche { background-color: #242320; }
[data-bs-theme="dark"] .cf-carte img { background-color: #2A2825; }