/* =========================================================================
   Refuge de Taveyanne — modernisation du CONTENU des pages.
   L'essentiel est limité à #main-content (l'en-tête Theme Builder / slider et
   le pied de page ne sont pas retouchés par la modernisation du contenu).
   Exception : la SECTION 11 (en bas) regroupe quelques réglages liens /
   en-tête / pied de page migrés depuis le Customizer (Apparence ▸ Personnaliser).
   ========================================================================= */

:root {
	--tav-accent: #e8722b;
	--tav-accent-dark: #c85d1e;
	--tav-green: #2f6d4f;
	--tav-ink: #20272e;
	--tav-muted: #6b7280;
	--tav-line: #e8e3da;
	--tav-soft: #faf8f4;
	--tav-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
		Helvetica, Arial, sans-serif;
}

/* ---- 1. POLICE UNIQUE (contenu seulement) -------------------------------- */
#main-content,
#main-content h1,
#main-content h2,
#main-content h3,
#main-content h4,
#main-content h5,
#main-content h6,
#main-content p,
#main-content a,
#main-content li,
#main-content span,
#main-content strong,
#main-content em,
#main-content blockquote,
#main-content div,
#main-content td,
#main-content th,
#main-content label,
#main-content .et_pb_text,
#main-content .et_pb_button {
	font-family: var(--tav-font) !important;
}

/* NB : on ne force PAS de couleur globale sur #main-content — cela casserait
   les titres clairs posés sur fond foncé (ex. module audio brun de /news).
   La couleur du texte est définie plus bas, limitée à .et_pb_text. */

/* ---- 2. TITRES DES PAGES (h1 à h4) --------------------------------------
   Échelle de titres « SF & Rc 25.05.26 » migrée depuis le Customizer
   (Apparence ▸ Personnaliser ▸ CSS additionnel) : tailles fixes, poids plus
   léger, titres centrés.
   NB : préfixe #page-container (2 ID) + !important pour battre les règles
   #et-boc de Divi — c'est précisément ce qui manquait à la version 1-ID du
   Customizer, qui se faisait écraser par modern.css et par Divi. */
#page-container #main-content h1 {
	font-size: 45px !important;
	font-weight: 500 !important;
	margin-top: 10px;
	margin-bottom: 25px;
	text-align: center;
}
#page-container #main-content h2 {
	font-size: 35px !important;
	font-weight: 500 !important;
	margin-top: 5px;
	margin-bottom: 20px;
	text-align: center;
}
#page-container #main-content h3 {
	font-size: 30px !important;
	font-weight: 300 !important;
	margin-top: 5px;
	margin-bottom: 15px;
	text-align: center;
}
#page-container #main-content h4 {
	font-size: 25px !important;
	font-weight: 300 !important;
	margin-top: 5px;
	margin-bottom: 10px;
	text-align: center;
}
/* Couleur des titres uniquement DANS les modules texte (fond clair). Les
   titres dans d'autres modules (audio, etc.) gardent la couleur de Divi. */
#page-container #main-content .et_pb_text h1,
#page-container #main-content .et_pb_text h2,
#page-container #main-content .et_pb_text h3,
#page-container #main-content .et_pb_text h4 {
	color: var(--tav-ink);
}
/* h5/h6 servent souvent de texte courant sur ce site : on les aligne sur le
   corps (le design de titres ne va que jusqu'à h4). */
#page-container #main-content h5,
#page-container #main-content h6 {
	font-size: 1.0625rem !important;
	font-weight: 400 !important;
	line-height: 1.75 !important;
	letter-spacing: 0 !important;
}
/* Mobile (téléphone, ≤767px) : on réduit les titres. L'échelle fixe ci-dessus
   (45/35/30/25), pensée pour le grand écran, est trop imposante en colonne
   étroite — « Bienvenue au Refuge de Taveyanne » ou « Refuge de Taveyanne 2026 »
   débordaient sur 2-3 lignes et écrasaient le corps de texte (17px, inchangé).
   Tablette et desktop conservent l'échelle complète. Même spécificité que §2
   (2 ID + !important) : c'est l'ordre source — cette règle vient après — qui
   l'emporte une fois la media query active. */
@media only screen and (max-width: 767px) {
	#page-container #main-content h1 {
		font-size: 32px !important;
	}
	#page-container #main-content h2 {
		font-size: 26px !important;
	}
	#page-container #main-content h3 {
		font-size: 23px !important;
	}
	#page-container #main-content h4 {
		font-size: 20px !important;
	}
}

/* ---- 3. TEXTE COURANT — UNE SEULE TAILLE --------------------------------- */
#page-container #main-content .et_pb_text,
#page-container #main-content .et_pb_text p,
#page-container #main-content .et_pb_text li,
#page-container #main-content .et_pb_blurb_description,
#page-container #main-content .et_pb_blurb_description p {
	font-size: 1.0625rem !important; /* 17px partout */
	line-height: 1.75 !important;
	font-weight: 400 !important;
	color: #44505a;
}
/* Les <span> et liens reprennent la taille de leur parent : cela annule les
   « font-size: large/small » inline tout en respectant la taille des titres. */
#main-content .et_pb_text span,
#main-content .et_pb_text a,
#main-content .et_pb_text font {
	font-size: inherit !important;
	line-height: inherit !important;
}
#main-content .et_pb_text strong,
#main-content .et_pb_text b {
	font-weight: 700 !important;
	color: var(--tav-ink);
}
#main-content .et_pb_text ul {
	padding-left: 1.1rem;
}
#main-content .et_pb_text ul li {
	margin-bottom: 0.4rem;
}

/* ---- 4. LIENS ------------------------------------------------------------ */
#main-content .et_pb_text a,
#main-content .et_pb_post_content a {
	color: var(--tav-accent-dark);
	text-decoration: none;
	font-weight: 600;
	border-bottom: 1.5px solid rgba(232, 114, 43, 0.35);
	transition: color 0.18s ease, border-color 0.18s ease;
}
#main-content .et_pb_text a:hover,
#main-content .et_pb_post_content a:hover {
	color: var(--tav-accent);
	border-bottom-color: var(--tav-accent);
}

/* ---- 5. BOUTONS ---------------------------------------------------------- */
#main-content .et_pb_button {
	border-radius: 999px !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	padding: 0.7em 1.6em !important;
	transition: transform 0.18s ease, box-shadow 0.18s ease,
		background-color 0.18s ease !important;
}
#main-content .et_pb_button:hover {
	transform: translateY(-2px);
}

/* ---- 6. IMAGES ----------------------------------------------------------- */
#main-content .et_pb_image img,
#main-content .et_pb_blurb_content img {
	border-radius: 14px;
}
/* Suppression des bordures « moches » autour des images (et_pb_with_border :
   un filet brun de 1px était dessiné autour de l'image). */
#main-content .et_pb_image,
#main-content .et_pb_image .et_pb_image_wrap {
	border: 0 !important;
}
#main-content .et_pb_image .et_pb_image_wrap {
	border-radius: 14px;
	overflow: hidden;
	display: block;
}
/* On rétablit une opacité pleine (certaines images importées étaient ternies). */
#main-content .et_pb_image .et_pb_image_wrap,
#main-content .et_pb_image img {
	opacity: 1 !important;
	filter: none !important;
}

/* ---- 6b. ANIMATIONS D'ENTRÉE DIVI ---------------------------------------- */
/* Plusieurs modules (galerie, logos des liens, images) utilisent une animation
   d'apparition qui démarre à opacity:0 et reste parfois bloquée invisible.
   On garantit la visibilité immédiate du contenu (rendu plus net et moderne). */
#main-content [class*='et_pb_animation_'],
#main-content .et_pb_gallery_item,
#main-content .et-waypoint {
	opacity: 1 !important;
	animation: none !important;
}

/* ---- 6c. ANTI-SCINTILLEMENT DES IMAGES SUR ÉCRAN ÉTROIT (Critical CSS) ----
   Symptôme : sur écran ≤980px (téléphone, fenêtre réduite ou zoom navigateur),
   une image de contenu apparaît collée à GAUCHE pendant ~0,5 s, puis saute au
   centre. Visible sur l'accueil, /liens, /rando, /contact…
   Cause : l'option « Critical CSS » de Divi (Performances) ne met PAS, dans le
   CSS critique en-ligne, la règle qui centre les images quand les colonnes
   passent en pile (≤980px) ; cette règle est reléguée dans la feuille différée
   « …-deferred-….min.css », chargée APRÈS le premier rendu (preload + onload).
   Tant qu'elle n'est pas arrivée, le module image — un bloc — se cale à gauche,
   puis se centre d'un coup quand la feuille différée s'applique.
   NB : au-dessus de 980px ces images sont alignées à gauche de toute façon
   (aucun saut → rien à corriger sur grand écran), d'où la limite @media.
   On réaffirme donc tout de suite, dans cette feuille bloquante du <head>, le
   centrage ≤980px de Divi : le premier rendu est déjà centré, plus aucun saut.
   (La feuille différée est régénérée par Divi et l'option vit en base — non
   déployée —, on ne peut donc pas corriger « à la source » : d'où ce filet CSS.)
   Règle générale (et non par module) : robuste si le contenu change, et fidèle
   au comportement mobile de Divi (les images se centrent en pile). */
@media only screen and (max-width: 980px) {
	#main-content .et_pb_image {
		text-align: center;
		margin-left: auto;
		margin-right: auto;
	}
}

/* ---- 7. GALERIE PHOTOS (page Photos) ------------------------------------- */
#main-content .et_pb_gallery_item,
#main-content .et_pb_gallery_image {
	border: 0 !important;
}
#main-content .et_pb_gallery_image {
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 8px 22px rgba(32, 39, 46, 0.12);
}
#main-content .et_pb_gallery_image img {
	border-radius: 0;
	transition: transform 0.4s ease;
	display: block;
	width: 100%;
}
#main-content .et_pb_gallery_item:hover .et_pb_gallery_image img {
	transform: scale(1.06);
}
#main-content .et_pb_gallery_item {
	margin-bottom: 2.2% !important;
}

/* ---- 8. ENCADRÉS / CARTES ------------------------------------------------ */
/* Modules texte dotés d'une bordure (ex. encadré « OUVERTURE 2026 ») :
   rendu carte moderne. */
#main-content .et_pb_text[style*='border'],
#main-content .et_pb_text.tav-card {
	border-radius: 16px;
}

/* ---- 9. SPÉCIFIQUE PAGES ------------------------------------------------- */

/* Presse (196) : suppression du fond vert pâle (filet de sécurité, en plus
   du nettoyage du contenu). */
body.page-id-196 #main-content .et_pb_section,
body.page-id-196 #main-content .et_pb_row,
body.page-id-196 #main-content .et_pb_column {
	background-color: transparent !important;
}
/* Liste de presse plus lisible. */
body.page-id-196 #main-content .et_pb_text p {
	font-size: 1.12rem;
	color: var(--tav-ink);
}

/* === Les mets (99) === */
/* Chaque colonne « menu » (titre H2, sans image ni fond) devient une carte. */
body.page-id-99 #main-content .et_pb_row .et_pb_column:has(h2):not(:has(img)):not([style*='background']) {
	background: #fff;
	border: 1px solid var(--tav-line);
	border-radius: 18px;
	padding: 1.9rem 2rem 1.6rem !important;
	box-shadow: 0 14px 34px rgba(32, 39, 46, 0.07);
	margin-bottom: 1.6rem;
}
/* Titre de carte centré, avec petit trait d'accent. */
body.page-id-99 #main-content .et_pb_column:has(h2):not([style*='background']) h2 {
	text-align: center !important;
	margin-bottom: 1.2rem;
}
body.page-id-99 #main-content .et_pb_column:has(h2):not([style*='background']) h2::after {
	content: '';
	display: block;
	width: 44px;
	height: 3px;
	border-radius: 3px;
	background: var(--tav-accent);
	margin: 0.7rem auto 0;
}
/* Listes de plats : puces personnalisées propres (au lieu des disques). */
body.page-id-99 #main-content .et_pb_text ul {
	list-style: none !important;
	padding-left: 0 !important;
	text-align: left;
}
body.page-id-99 #main-content .et_pb_text ul li {
	position: relative;
	padding-left: 1.5rem;
	margin-bottom: 0.55rem;
}
body.page-id-99 #main-content .et_pb_text ul li::before {
	content: '';
	position: absolute;
	left: 0.15rem;
	top: 0.62em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--tav-accent);
}
/* Puces littérales restantes (Nos spécialités) en orange. */
body.page-id-99 #main-content .tav-bullet {
	color: var(--tav-accent) !important;
	font-weight: 700;
	margin-right: 0.15rem;
}
/* Cartes côte à côte de même hauteur : on passe les rangées « menu » (celles
   qui contiennent une liste) en flex avec étirement vertical. */
body.page-id-99 #main-content .et_pb_row:has(ul) {
	display: flex !important;
	flex-wrap: wrap;
	align-items: stretch;
}
body.page-id-99 #main-content .et_pb_row:has(ul) > .et_pb_column {
	display: flex;
	flex-direction: column;
}
/* Texte « produits frais » : plus de fond (le bloc beige/vert est retiré).
   Les cartes ci-dessus ont leur fond blanc sur la COLONNE, pas sur .et_pb_text,
   donc cette règle ne les affecte pas. Robuste même si le contenu prod garde
   l'ancien background_color. */
body.page-id-99 #main-content .et_pb_text {
	background-color: transparent !important;
}

/* Accueil (36) : encadré ouverture + titres de blurb. */
body.page-id-36 #main-content .et_pb_blurb h4,
body.page-id-36 #main-content .et_pb_blurb .et_pb_module_header {
	font-size: 1.5rem;
	font-weight: 700;
}

/* Accueil (36) — bloc « Label Fait Maison ».
   Le logo « Fait Maison » est un <img style="float:left"> placé À L'INTÉRIEUR du
   premier <h2>. Combiné aux titres centrés (§2), cela désaligne tout sur
   tablette / grand écran (colonne large) : le logo flotte seul à gauche, les
   titres se centrent dans l'espace restant et le paragraphe s'enroule de façon
   irrégulière autour du logo. En colonne étroite (téléphone, ≤767px) le rendu
   reste correct — on n'y touche pas. À partir de 768px : logo recentré
   au-dessus du titre, titres + texte centrés (cohérent avec l'encadré
   « OUVERTURE » juste au-dessus et avec le reste du site). */
@media only screen and (min-width: 768px) {
	body.page-id-36 #main-content .et_pb_text img[src*='LabelFaitMaison_Logo'] {
		float: none !important;
		display: block;
		margin: 0 auto 0.9rem !important;
	}
	body.page-id-36
		#main-content
		.et_pb_text:has(img[src*='LabelFaitMaison_Logo'])
		p {
		text-align: center;
		max-width: 760px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* ---- 10. ESPACEMENTS (resserrage léger, contenu uniquement) -------------- */
#main-content .et_pb_text {
	color: var(--tav-ink);
}
/* éléments « fantômes » (paragraphes/titres ne contenant qu'un espace) */
#main-content .et_pb_text p:empty,
#main-content .et_pb_text h2:empty,
#main-content .et_pb_text h3:empty {
	display: none;
}

/* ---- 11. LIENS GLOBAUX + EN-TÊTE / PIED DE PAGE -------------------------
   Réglages migrés depuis le Customizer (Apparence ▸ Personnaliser ▸ CSS
   additionnel). Hors #main-content : aucun conflit avec la modernisation du
   contenu ci-dessus. Dans le contenu, les liens orange de §4 gardent la
   priorité grâce à leur spécificité (1 ID), supérieure au « a » global. */

/* Liens « plats » par défaut (menus, pied de page, etc.) : pas de
   soulignement, souligné au survol seulement. */
a,
a:link,
a:focus,
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

/* En-tête supérieur : infos de contact alignées à droite. */
#top-header #et-info {
	float: right;
	text-align: right;
}
#top-header #et-info-phone {
	margin-right: 0;
	margin-left: 0;
}
#top-header #et-info-email {
	margin-left: 13px;
}

/* Slider (hero) de l'en-tête Theme Builder : le module Divi lui impose un
   padding-top fixe de 250px (+ un padding-bottom par défaut de 16%) à toutes
   les tailles, ce qui rend le hero trop haut sur mobile. Plutôt que des
   paliers, on fait varier la hauteur LINÉAIREMENT avec la largeur du viewport
   entre 400px et 980px : compact à 400px (20px) puis montée régulière jusqu'aux
   valeurs « bureau » à 980px (250px en haut ; 157px ≈ 16% en bas), si bien
   qu'il n'y a aucun saut à la jonction avec le bureau (≥980px, Divi reprend la
   main). En dessous de 400px, clamp() bloque au minimum de 20px. Interpolation :
   v = v400 + (100vw − 400px) × (v980 − v400) / (980 − 400). Le préfixe
   #page-container (1 ID) passe devant la règle Divi
   « .et_pb_slider_fullwidth_off.et_pb_fullwidth_slider_0_tb_header
   .et_pb_slide_description » (3 classes) sans recourir à !important. NB :
   le slider n'est PAS dans #main-header (la barre de navigation, injectée
   au-dessus) mais dans la mise en page d'en-tête .et-l--header. */
@media only screen and (max-width: 980px) {
	#page-container
		.et_pb_fullwidth_slider_0_tb_header
		.et_pb_slide_description {
		/* 400px→20px … 980px→250px (pente 230/580) */
		padding-top: clamp(20px, calc(20px + (100vw - 400px) * 230 / 580), 250px);
		/* 400px→20px … 980px→157px ≈ 16% (pente 137/580) */
		padding-bottom: clamp(
			20px,
			calc(20px + (100vw - 400px) * 137 / 580),
			157px
		);
	}
}

/* Pied de page : nettoyage des flottants + listes de widgets sans puce ni
   retrait. */
#main-footer {
	clear: both;
}
#main-footer .footer-widget li {
	padding-left: 0;
}
#main-footer .footer-widget li::before {
	display: none;
}
/* Liens de navigation du pied de page : souligné au survol seulement. */
#main-footer .textwidget .et-footer-nav a,
#main-footer .et-footer-nav a {
	text-decoration: none;
}
#main-footer .textwidget .et-footer-nav a:hover,
#main-footer .et-footer-nav a:hover {
	text-decoration: underline;
}