/* =====================================================================
   SRF — Header, overlay menu & footer (child theme Hello Elementor)
   Variante A : hamburger « menu » à gauche · logo centré · slogan à droite.
   Couleurs marque : jaune #FCC33D · bleu foncé #2A4B9A · bleu clair #93D5F6.
   La top bar (#srf-topbar) est gérée par le mu-plugin srf-automation.php.
   ===================================================================== */

:root {
	/* Marque (alignées sur le kit Elementor) */
	--srf-jaune: #FCC33D;
	--srf-bleu: #2A4B9A;
	--srf-bleu-fonce: #1E3670;
	--srf-bleu-clair: #93D5F6;
	/* Neutres (Encre + Gris ligne alignés sur la palette) */
	--srf-blanc: #fff;
	--srf-texte: #15233D;
	--srf-texte-doux: #15233D;
	--srf-bordure: #E2E8F2;
	--srf-placeholder: #666;
	--srf-ombre: rgba(0,0,0,.18);
}

/* ---------- Header ---------- */
.srf-header {
	background: var(--srf-blanc);
	border-bottom: 1px solid var(--srf-bordure);
}
.srf-header-inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 4px 28px;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 20px;
}

/* Hamburger (gauche) — bleu sur fond blanc, jamais de fond coloré */
.srf-header .srf-burger {
	justify-self: start;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
	padding: 6px;
	cursor: pointer;
}
.srf-header .srf-burger:hover,
.srf-header .srf-burger:focus {
	background: transparent !important;
	box-shadow: none !important;
	opacity: .8;
}
.srf-burger-lines { display: flex; flex-direction: column; gap: 5px; }
.srf-burger-lines span {
	display: block;
	width: 38px;
	height: 5px;
	border-radius: 2px;
	background: var(--srf-bleu);
}
.srf-burger-label {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .05em;
	color: var(--srf-bleu);
	text-transform: lowercase;
}

/* Logo (centre) */
.srf-logo { justify-self: center; display: inline-flex; line-height: 0; }
.srf-logo img { height: 140px; width: auto; display: block; }

/* Slogan (droite) */
.srf-slogan { justify-self: end; line-height: 0; }
.srf-slogan img { height: 46px; width: auto; display: block; }

/* ---------- Overlay plein écran ---------- */
.srf-overlay {
	position: fixed;
	inset: 0;
	z-index: 10000;
	background: var(--srf-blanc);
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow-y: auto;
	animation: srf-fade .18s ease-out;
}
.srf-overlay[hidden] { display: none; }
@keyframes srf-fade { from { opacity: 0; } to { opacity: 1; } }

/* Barre du haut : logo + croix */
.srf-overlay-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid var(--srf-bordure);
	padding: 16px clamp(20px, 5vw, 64px);
}
.srf-overlay-logo img { height: 90px; width: auto; display: block; }

/* Croix : fond bleu, X blanc */
.srf-overlay .srf-overlay-close {
	background: var(--srf-bleu) !important;
	color: var(--srf-blanc) !important;
	border: 0 !important;
	box-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	display: inline-flex;
	align-items: baseline;
	justify-content: center;
	font-size: 32px;
	line-height: 1;
	cursor: pointer;
}
.srf-overlay .srf-overlay-close:hover { filter: brightness(1.12); }

/* Colonnes (rubriques) — remontées en haut, resserrées sur une ligne */
.srf-overlay-nav {
	flex: 1;
	display: flex;
	align-items: flex-start;
	padding: 26px clamp(20px, 5vw, 64px) 40px;
}
.srf-ov-cols {
	width: 100%;
	max-width: 1500px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 30px 40px;
}
/* Colonne longue (« Comprendre les maladies respiratoires », 8 entrées ou +) :
   largeur double pour aérer et que les libellés longs tiennent sur une ligne.
   La classe --wide est posée côté PHP (srf_render_overlay_columns). */
.srf-ov-col { min-width: 0; }
.srf-ov-col--wide { grid-column: span 2; }
.srf-ov-h {
	display: block;
	font-size: 17px;
	font-weight: 700;
	color: var(--srf-bleu);
	margin: 0 0 12px;
	text-decoration: none;
}
a.srf-ov-h:hover { text-decoration: underline; }
.srf-ov-sub { list-style: none; margin: 0; padding: 0; }
.srf-ov-sub li { margin: 0 0 9px; }
.srf-ov-sub a {
	font-size: 15px;
	color: var(--srf-texte-doux);
	text-decoration: none;
}
.srf-ov-sub a:hover { color: var(--srf-bleu); text-decoration: underline; }

/* Bande basse : fond jaune, icônes + Contact en noir et bien plus gros */
.srf-overlay-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	background: var(--srf-jaune);
	padding: 22px clamp(20px, 5vw, 64px);
}
.srf-overlay-socials { display: flex; align-items: center; gap: 26px; }
.srf-overlay-socials a { color: var(--srf-texte); line-height: 0; }
.srf-overlay-socials a:hover { opacity: .6; }
.srf-overlay-socials svg { width: 34px; height: 34px; }
.srf-overlay-contact {
	font-size: 22px;
	font-weight: 700;
	color: var(--srf-texte);
	text-decoration: none;
}
.srf-overlay-contact:hover { text-decoration: underline; }

/* Verrou de scroll quand l'overlay est ouvert */
body.srf-no-scroll { overflow: hidden; }

/* ---------- Footer (jaune, texte noir) ---------- */
.srf-footer {
	background: var(--srf-jaune);
	color: var(--srf-texte);
}
.srf-footer-inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 34px 28px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	text-align: center;
}
.srf-footer-socials { display: flex; gap: 18px; }
.srf-footer-socials a { color: var(--srf-texte); line-height: 0; }
.srf-footer-socials a:hover { opacity: .7; }

.srf-footer-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 22px;
}
.srf-footer-menu a {
	color: var(--srf-texte);
	text-decoration: none;
	font-size: 15px;
	font-weight: 600;
}
.srf-footer-menu a:hover { text-decoration: underline; }

.srf-footer-credits { font-size: 13px; color: var(--srf-texte); line-height: 1.7; }
.srf-footer-credits a { color: var(--srf-texte); text-decoration: underline; }
.srf-footer-made { display: block; opacity: .85; }

.srf-backtotop {
	font-size: 13px;
	font-weight: 600;
	color: var(--srf-texte);
	text-decoration: none;
}
.srf-backtotop:hover { text-decoration: underline; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
	.srf-ov-cols { grid-template-columns: repeat(3, 1fr); justify-content: start; gap: 26px 20px; }
	.srf-ov-col--wide { grid-column: auto; } /* pas de colonne double sous 1100px */
}
@media (max-width: 900px) {
	.srf-slogan { display: none; } /* logo reste centré, menu à gauche */
	.srf-logo img { height: 90px; }
}
@media (max-width: 600px) {
	.srf-header-inner { padding: 4px 16px; }
	.srf-logo img { height: 90px; }
	.srf-burger-lines span { width: 24px; }
	.srf-ov-cols { grid-template-columns: repeat(2, 1fr); justify-content: start; gap: 22px 16px; }
}

/* ---------- Top bar : loupe + recherche déroulante (HTML émis par le mu-plugin) ---------- */
.srf-search-toggle {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	color: var(--srf-texte) !important;
	display: inline-flex;
	align-items: center;
	padding: 4px;
	line-height: 0;
}
.srf-search-toggle:hover,
.srf-search-toggle:focus { background: transparent !important; box-shadow: none !important; opacity: .7; }
/* Champ de recherche ASP : on retire le fond bleu, texte noir sur fond blanc */
.srf-search-pop .asp_main_container,
.srf-search-pop .asp_w,
.srf-search-pop .probox,
.srf-search-pop .proinput { background: transparent !important; }
.srf-search-pop .proinput input,
.srf-search-pop input.orig,
.srf-search-pop input[type="search"] { background: var(--srf-blanc) !important; color: var(--srf-texte) !important; }
.srf-search-pop input::placeholder { color: var(--srf-placeholder) !important; opacity: 1 !important; }
/* Bouton loupe d'ASP : petit repère bleu, icône blanche */
.srf-search-pop .promagnifier { background: var(--srf-bleu) !important; }
.srf-search-pop {
	position: absolute;
	top: 100%;
	right: 24px;
	margin-top: 6px;
	background: var(--srf-blanc);
	padding: 14px;
	border-radius: 10px;
	box-shadow: 0 10px 34px var(--srf-ombre);
	z-index: 9998;
	width: min(380px, 92vw);
}
.srf-search-pop[hidden] { display: none; }
@media (max-width: 600px) { .srf-search-pop { right: 10px; } }

/* ---------- Bloc « rubriques » accueil (façon Apple) — shortcode [srf_rubriques] ---------- */
.srf-rubriques { background: transparent; padding: 64px 24px 72px; font-family: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.srf-rubriques-inner { max-width: 1200px; margin: 0 auto; }
.srf-rub-title {
	font-size: clamp(28px, 4vw, 44px); font-weight: 800; line-height: 1.1;
	letter-spacing: -.02em; color: var(--srf-bleu); margin: 0 0 64px;
	text-align: center;
}
.srf-rub-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.srf-rub-card {
	background: var(--srf-blanc); border: 1px solid rgba(20,35,61,.06);
	border-radius: 24px; padding: 32px 28px 28px;
	display: flex; flex-direction: column;
	box-shadow: 0 8px 30px rgba(20,35,61,.05);
	transition: transform .25s ease, box-shadow .25s ease;
}
.srf-rub-card:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(20,35,61,.12); }
.srf-rub-ic { width: 62px; height: 62px; margin-bottom: 22px; color: var(--srf-bleu); }
.srf-rub-ic img, .srf-rub-ic svg { width: 100%; height: 100%; object-fit: contain; display: block; }
.srf-rub-card h3 {
	font-size: 21px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em;
	color: var(--srf-encre); margin: 0 0 12px;
}
.srf-rub-card p { font-size: 15.5px; font-weight: 400; line-height: 1.6; color: #54637A; margin: 0 0 24px; }
.srf-rub-more {
	margin-top: auto; font-size: 15px; font-weight: 700; color: var(--srf-bleu);
	text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
	transition: gap .2s ease, color .2s ease;
}
.srf-rub-more span { transition: transform .2s ease; }
.srf-rub-card:hover .srf-rub-more { color: var(--srf-bleu-fonce); }
.srf-rub-card:hover .srf-rub-more span { transform: translateX(3px); }
@media (max-width: 980px) { .srf-rub-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .srf-rubriques { padding: 48px 18px 56px; } .srf-rub-grid { grid-template-columns: 1fr; } }

/* Le bloc s'adapte à son conteneur Elementor : neutralisation de l'arrondi et de
   l'ombre du wrapper qui contient [srf_rubriques], + passage en pleine largeur.
   Le FOND est laissé libre : il se règle depuis la section Elementor.
   Scopé via :has() → n'affecte que ce bloc, pas les autres sections. */
.elementor-section:has(.srf-rubriques),
.elementor-column:has(.srf-rubriques),
.elementor-widget-wrap:has(.srf-rubriques) {
	border-radius: 0 !important;
	box-shadow: none !important;
}
.elementor-section:has(.srf-rubriques) > .elementor-container { max-width: 100% !important; }


/* =====================================================================
   FORCE TYPOGRAPHIE — Raleway partout (filet de sécurité global)
   ---------------------------------------------------------------------
   Certains éléments retombent sur la police système (system-ui / sans-serif) :
   titres/textes Elementor sans typo explicite, widgets de plugins tiers
   (The Events Calendar, The Plus Addons, popups login/panier), composants
   maison. On force Raleway sur TOUT le texte.

   Les polices d'ICÔNES sont explicitement épargnées via :not(...) : Font
   Awesome (i, .fa*, [class*=" fa-"]), icônes Elementor ([class*="eicon-"])
   et dashicons. Sans cette protection, forcer Raleway sur une icône
   remplacerait son glyphe par la lettre correspondante (icônes cassées).
   ===================================================================== */
body :not(i):not(svg):not(use):not(path):not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not(.fad):not([class*="eicon-"]):not([class*="dashicons"]):not([class^="fa-"]):not([class*=" fa-"]) {
	font-family: "Raleway", sans-serif !important;
}

/* Réassertion explicite sur les composants maison (lisibilité / robustesse). */
.srf-evt-showcase, .srf-evt-showcase *,
.srf-evt-single-wrap, .srf-evt-single-wrap *,
.srf-rubriques, .srf-rubriques * {
	font-family: "Raleway", sans-serif !important;
}