/*==============================================================================
//
//  Theme "epure / magazine" - maquette de relooking (recette2.php)
//
//  Surcouche CSS par-dessus Bootstrap 5 : ne modifie aucun HTML.
//  Principes : blanc casse, typo editoriale (Lora + Inter), un seul
//  accent couleur (bleu ardoise), sections en titres soulignes plutot qu'en
//  bandeaux colores, gros visuel central.
//
//  NB maquette : le mode sombre n'est pas adapte dans cette surcouche.
//==============================================================================*/

:root {
	--cf-bg:      #FCFBF8;   /* fond blanc casse            */
	--cf-ink:     #1C1B19;   /* texte principal, quasi noir */
	--cf-muted:   #6B675F;   /* texte secondaire            */
	--cf-line:    #E7E3DB;   /* filets discrets             */
	--cf-soft:    #F4F2EC;   /* fonds de cartouches         */
	--cf-accent:  #3D5A80;   /* bleu ardoise : SEUL accent  */
	--cf-radius:  10px;
}

/*---------- Base : fond, typo, largeur de lecture ---------------------------*/
body {
	background-color: var(--cf-bg) !important;
	color: var(--cf-ink);
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 1.02rem;
	line-height: 1.65;
}
body > .container-fluid {
	max-width: 1560px;
	margin-inline: auto;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: 'Lora', Georgia, serif;
	color: var(--cf-ink);
}
a { color: #0D6EFD; text-decoration: none; }
a:hover { color: #0A58CA; text-decoration: underline; }

/*---------- Bandeau haut + navbar : blanc, filet discret ---------------------*/
.h1 a, h1 a { color: var(--cf-ink) !important; }
.navbar.bg-primary {
	background-color: var(--cf-soft) !important;
	border: 0;
	border-top: 2px solid var(--cf-ink);
	border-bottom: 1px solid var(--cf-line);
	border-radius: 0;
}
.navbar .nav-link,
.navbar .nav-link.text-white,
.navbar .nav-link.active {
	color: var(--cf-ink) !important;
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: .92rem;
}
.navbar .nav-link:hover { color: var(--cf-accent) !important; }
.navbar-toggler { border-color: var(--cf-line); filter: invert(1); }
/* champ et loupe de recherche poses sur la bande douce */
.navbar .form-control { background-color: #FFFFFF; border-color: var(--cf-line); }
.navbar .btn-outline-success.text-white {
	color: var(--cf-muted) !important;
	border-color: var(--cf-line) !important;
	background-color: #FFFFFF !important;
}
.navbar .btn-outline-success.text-white:hover {
	color: #FFFFFF !important;
	background-color: var(--cf-ink) !important;
	border-color: var(--cf-ink) !important;
}

/*---------- Bandeau haut droit : tous les boutons sur une seule ligne --------
   La colonne du titre prend sa largeur naturelle (au lieu de 50%), le reste
   va a la barre de boutons, qui ne se casse plus.                          */
@media (min-width: 992px) {
	header .row > .col:has(.h1),
	header .row > .col:has(h1) { flex: 0 1 auto; width: auto; }
	header .row > .col:has(ul.justify-content-end) { flex: 0 0 100%; width: 100%; }
	ul.nav.justify-content-end { flex-wrap: nowrap; align-items: center; margin-bottom: .7rem; }
	ul.nav.justify-content-end > li { flex: 0 0 auto; }
	ul.nav.justify-content-end .btn {
		padding: .25rem .6rem;
		font-size: .82rem;
		white-space: nowrap;
	}
}
/* alerte cookies : renvoyee sous le bandeau, pleine largeur, couleurs du theme */
header .row > .alert { order: 5; flex: 0 0 100%; margin-top: .5rem; }
.alert-info {
	background-color: var(--cf-soft) !important;
	border-color: var(--cf-line) !important;
	color: var(--cf-ink) !important;
}
/* bouton loupe de la recherche : icone blanche invisible sur fond clair */
.btn-outline-success.text-white { color: var(--cf-muted) !important; border-color: var(--cf-line) !important; }
.btn-outline-success.text-white:hover {
	color: #FFFFFF !important;
	background-color: var(--cf-ink) !important;
	border-color: var(--cf-ink) !important;
}

/*---------- Breadcrumb : discret, petites capitales --------------------------*/
header nav.border {
	border: 0 !important;
	padding-left: 0 !important;
}
.breadcrumb {
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .07em;
}
.breadcrumb a { color: var(--cf-muted); }
.breadcrumb-item.active a { color: var(--cf-ink); }

/*---------- Jumbotron : le plat en vedette, titre centre ---------------------*/
.jumbotron {
	background-color: transparent !important;
	padding-top: 1rem !important;
}
.jumbotron h1 {
	text-align: center;
	font-size: clamp(2.1rem, 4.5vw, 3.4rem);
	font-weight: 600;
	margin-bottom: .5rem;
}
.jumbotron > hr {
	width: 64px;
	margin: .8rem auto 1.4rem;
	border-top: 3px solid var(--cf-accent);
	opacity: 1;
}
/* photo principale : pleine largeur (plafonnee), centree, texte dessous */
.jumbotron .row > .col-md-auto {
	flex: 0 0 100%;
	max-width: 100%;
	text-align: center !important;
}
.jumbotron .row > .col-md-auto img,
.jumbotron .row > .col-md-auto video {
	width: 100%;
	max-width: 600px !important;
	height: auto;
	border-radius: var(--cf-radius);
	margin: 0 auto;
}
.jumbotron .row > .col.align-self-center {
	flex: 0 0 100%;
	max-width: 72ch;
	margin: 1.2rem auto 0;
	background-color: #FFFFFF;
	border: 1px solid var(--cf-line);
	border-radius: var(--cf-radius);
	padding: 1rem 1.4rem;
}

/*---------- Cartouches d'infos (durée, difficulté, coût...) ------------------*/
[style*="f1f3f5" i] { background-color: var(--cf-soft) !important; }
[style*="e2e6ea" i] { background-color: var(--cf-soft) !important; }

/*---------- Sections : plus de bandeaux colores, des titres "magazine" -------*/
.card {
	border: 0;
	background-color: transparent;
	border-radius: 0;
}
.card-header,
.card-header[style] {
	background-color: transparent !important;
	color: var(--cf-ink) !important;
	border-bottom: 2px solid var(--cf-ink);
	border-radius: 0 !important;
	padding-left: 0;
	font-family: 'Lora', Georgia, serif;
	font-size: 1.15rem !important;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .1em;
}
.card-body { padding-left: 0; padding-right: 0; }
/* "Pour <2 Cramiques>, il vous faut :" : le PHP entoure deja la quantite
   d'un <span>, on s'en sert pour la mettre en avant                     */
#ingredients .card-header span {
	background-color: #E3EBF5;
	color: #2E4560;
	font-weight: 700;
	padding: 2px 10px;
	border-radius: 6px;
}
[data-bs-theme="dark"] #ingredients .card-header span {
	background-color: #2E4560;
	color: #E3EBF5;
}
/* titre "La recette pas a pas" (h2 a style inline) */
#etapes > h2 {
	background-color: transparent !important;
	color: var(--cf-ink) !important;
	border-bottom: 2px solid var(--cf-ink);
	border-radius: 0 !important;
	padding-left: 0 !important;
	font-size: 1.15rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .1em;
	padding-bottom: .5rem !important;
}

/*---------- Etapes : numerotation soignee, photos adoucies -------------------*/
#etapes h5 {
	font-family: 'Inter', sans-serif;
	font-size: .82rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--cf-accent);
}
/* la page fait 1560 px : sans plafond, le texte d'une etape ferait des
   lignes de ~140 caracteres, trop longues a suivre en cuisinant        */
#etapes .row > .col.align-self-center { max-width: 85ch; }
#etapes img, #etapes video { border-radius: var(--cf-radius); }
#etapes hr.opacity-25 { border-color: var(--cf-line); opacity: 1; }

/*---------- Boutons : unifies, pilules, noir + accent -------------------------
   NB : les !important sont necessaires car perso.css force les couleurs
   Bootstrap des boutons avec !important (charge avant ce theme).           */
.btn { border-radius: 999px; font-family: 'Inter', sans-serif; }
/* boutons d'action (ex btn-warning jaunes) -> blanc cercle de noir */
.btn-warning, .btn-warning.text-white {
	background-color: #FFFFFF !important;
	border: 1px solid var(--cf-ink) !important;
	color: var(--cf-ink) !important;
}
.btn-warning:hover, .btn-warning:focus,
.btn-warning.text-white:hover, .btn-warning.text-white:focus {
	background-color: var(--cf-ink) !important;
	border-color: var(--cf-ink) !important;
	color: #FFFFFF !important;
}
.btn-warning .fas, .btn-warning .far,
.btn-warning .fas.text-white, .btn-warning .far.text-white { color: inherit !important; }
/* bouton principal "La recette" -> noir plein */
.btn-success {
	background-color: var(--cf-ink) !important;
	border-color: var(--cf-ink) !important;
	color: #FFFFFF !important;
}
.btn-success:hover, .btn-success:focus { background-color: var(--cf-accent) !important; border-color: var(--cf-accent) !important; }
.btn-success .fas { color: inherit !important; }
/* boutons secondaires -> fantomes discrets */
.btn-outline-secondary {
	border-color: var(--cf-line);
	color: var(--cf-muted);
	background-color: #FFFFFF;
}
.btn-outline-secondary:hover { background-color: var(--cf-soft); color: var(--cf-ink); border-color: var(--cf-ink); }
/* boutons bleus bootstrap -> accent */
.btn-primary, .btn-outline-primary.active, .btn-check:checked + .btn-outline-primary {
	background-color: var(--cf-accent) !important;
	border-color: var(--cf-accent) !important;
	color: #fff !important;
}
.btn-primary:hover { background-color: #2E4560 !important; border-color: #2E4560 !important; }
.btn-outline-primary { color: var(--cf-accent); border-color: var(--cf-accent); }
.btn-outline-primary:hover { background-color: var(--cf-accent) !important; border-color: var(--cf-accent) !important; color: #fff !important; }
.btn-secondary { background-color: var(--cf-muted) !important; border-color: var(--cf-muted) !important; }

/*---------- Barre des durees : palette neutre --------------------------------*/
.progress { background-color: var(--cf-soft); }
.progress-bar[style*="90EE90" i] { background-color: #90EE90 !important; color: #1C1B19; }
.progress-bar[style*="2196F3" i] { background-color: #2196F3 !important; }
.progress-bar[style*="F50057" i] { background-color: #E8590C !important; }
div[style*="border-left"][style*="90EE90" i] { border-left-color: #90EE90 !important; }
div[style*="border-left"][style*="2196F3" i] { border-left-color: #2196F3 !important; }
div[style*="border-left"][style*="F50057" i] { border-left-color: #E8590C !important; }

/*---------- Tableaux (dietetique) --------------------------------------------*/
.table-warning { --bs-table-bg: var(--cf-soft); }
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-bg-type: #F9F7F2; }

/*---------- Divers ------------------------------------------------------------*/
.alert-light { background-color: var(--cf-soft); border-color: var(--cf-line); }
.rounded, .img-fluid.rounded { border-radius: var(--cf-radius) !important; }
#button2top { background-color: var(--cf-ink) !important; border-radius: 50% !important; }
#button2top:hover { background-color: var(--cf-accent) !important; }
#button2top .fas { color: #FFFFFF !important; }
/* titres du plan de site en pied de page (couleurs inline verte/orange) */
h5[style*="3A8C65" i], h5[style*="FB8C00" i] { color: var(--cf-ink) !important; }
.badge { border-radius: 4px; }
.form-control, .input-group-text { border-color: var(--cf-line); border-radius: 8px; }
.form-control:focus { border-color: var(--cf-ink); box-shadow: none; }

/*==============================================================================
//  Mode sombre : bascule via data-bs-theme (bouton lune du header).
//  Les regles en variables --cf-* suivent automatiquement ; on ne surcharge
//  ici que les couleurs codees en dur (fonds blancs, texte des boutons).
//==============================================================================*/
[data-bs-theme="dark"] {
	--cf-bg:      #1B1A18;   /* fond charbon chaud           */
	--cf-ink:     #E9E5DD;   /* texte clair                  */
	--cf-muted:   #A9A49A;
	--cf-line:    #3B3934;
	--cf-soft:    #2A2825;
	--cf-accent:  #7FA3CC;   /* ardoise eclairci             */
}
[data-bs-theme="dark"] a { color: #6EA8FE; }
[data-bs-theme="dark"] a:hover { color: #8BB9FE; }
[data-bs-theme="dark"] .navbar.bg-primary {
	background-color: #2A2825 !important;
	border-top-color: var(--cf-ink);
}
[data-bs-theme="dark"] .navbar .form-control { background-color: #1B1A18; }
[data-bs-theme="dark"] .navbar .btn-outline-success.text-white { background-color: #1B1A18 !important; }
[data-bs-theme="dark"] .navbar .btn-outline-success.text-white:hover { color: #1B1A18 !important; }
[data-bs-theme="dark"] .btn-warning,
[data-bs-theme="dark"] .btn-warning.text-white { background-color: #242320 !important; }
[data-bs-theme="dark"] .btn-warning:hover, [data-bs-theme="dark"] .btn-warning:focus,
[data-bs-theme="dark"] .btn-warning.text-white:hover, [data-bs-theme="dark"] .btn-warning.text-white:focus {
	background-color: var(--cf-ink) !important;
	color: #1B1A18 !important;
}
[data-bs-theme="dark"] .btn-success { color: #1B1A18 !important; }
[data-bs-theme="dark"] .btn-success:hover, [data-bs-theme="dark"] .btn-success:focus { color: #1B1A18 !important; }
[data-bs-theme="dark"] .btn-primary,
[data-bs-theme="dark"] .btn-outline-primary:hover,
[data-bs-theme="dark"] .btn-check:checked + .btn-outline-primary { color: #1B1A18 !important; }
[data-bs-theme="dark"] .btn-outline-secondary { background-color: #242320; color: var(--cf-muted) !important; }
[data-bs-theme="dark"] .btn-outline-secondary:hover { color: var(--cf-ink) !important; }
[data-bs-theme="dark"] .btn-secondary { color: #1B1A18 !important; }
[data-bs-theme="dark"] .jumbotron .row > .col.align-self-center { background-color: #242320; }
[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-bg-type: #242320; }
[data-bs-theme="dark"] .progress-bar[style*="90EE90" i] { color: #1B1A18; }
[data-bs-theme="dark"] #button2top .fas { color: #1B1A18 !important; }