/*
Theme Name:   Fr-Eg Theme
Theme URI:    https://www.fr-eghezee.be/
Description:  Thème sur mesure pour Fréquence Eghezée — La radio qui bouge avec vous. Homepage inspirée des grandes radios locales : hero EN DIRECT, nos radios, à suivre, actus, grille, publicité. Couleurs FE (rouge #E51937, bleu #0078D7), police énergique Archivo/Inter, grille fun. Responsive mobile-first.
Author:       Fréquence Eghezée
Version:      2.0.2
Requires PHP: 7.4
License:      GPL-2.0-or-later
Text Domain:  fr-eg-theme
*/

/* ============================================================
   1. VARIABLES & RESET
   ============================================================ */
:root {
	--fe-red: #E51937;
	--fe-red-dark: #B80F29;
	--fe-blue: #0078D7;
	--fe-blue-dark: #005A9E;
	--fe-dark: #0F1724;
	--fe-ink: #1D2939;
	--fe-grey: #64748B;
	--fe-light: #F5F7FA;
	--fe-white: #FFFFFF;
	--radius: 16px;
	--shadow: 0 10px 30px rgba(15, 23, 36, .08);
	--font-head: 'Archivo', system-ui, sans-serif;
	--font-body: 'Inter', system-ui, sans-serif;
	--header-h: 104px;
	--player-h: 110px; /* barre du plugin Fr-Eg Player */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	font-family: var(--font-body);
	color: var(--fe-ink);
	background: var(--fe-white);
	line-height: 1.65;
	/* laisse la place à la barre du player (le plugin gère aussi via !important) */
	padding-bottom: var(--player-h);
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--fe-red); text-decoration: none; }
a:hover { text-decoration: underline; }
ul { list-style: none; }

h1, h2, h3, h4, .fe-h {
	font-family: var(--font-head);
	font-weight: 900;
	line-height: 1.15;
	color: var(--fe-dark);
	letter-spacing: -.02em; text-transform: uppercase;
}
h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.5rem); text-transform: uppercase; }
h3 { font-size: 1.25rem; }

.fe-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.fe-section { padding: 72px 0; }
.fe-section--light { background: var(--fe-light); }
.fe-kicker {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--font-head); font-weight: 700;
	font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
	color: var(--fe-red); margin-bottom: 10px;
}
.fe-kicker::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: var(--fe-red); flex-shrink: 0; }
.fe-lead { color: var(--fe-grey); max-width: 640px; margin-top: 12px; }

/* ============================================================
   2. HEADER
   ============================================================ */
.fe-header {
	position: sticky; top: 0; z-index: 50;
	background: rgba(255, 255, 255, .92);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid rgba(15, 23, 36, .08);
}
.fe-header__inner { display: flex; align-items: center; gap: 28px; height: var(--header-h); }
.fe-logo { display: flex; align-items: center; min-width: 0; }
.fe-logo img { height: 88px; width: auto; }
.fe-nav { margin-left: auto; }
.fe-nav ul { display: flex; gap: 4px; }
.fe-nav a {
	font-family: var(--font-head); font-weight: 600; font-size: .92rem;
	color: var(--fe-ink); padding: 10px 14px; border-radius: 10px;
}
.fe-nav a:hover, .fe-nav .current-menu-item a { background: var(--fe-light); color: var(--fe-red); text-decoration: none; }
.fe-header__live {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--fe-red); color: #fff;
	font-family: var(--font-head); font-weight: 700; font-size: .8rem;
	letter-spacing: .08em; padding: 9px 16px; border-radius: 999px;
}
.fe-header__live .fe-dot { width: 8px; height: 8px; background: #fff; border-radius: 50%; animation: fe-pulse 1.6s infinite; }
@keyframes fe-pulse { 0%,100% { opacity: 1; transform: scale(1);} 50% { opacity: .4; transform: scale(.7);} }
.fe-burger { display: none; margin-left: auto; background: none; border: 0; font-size: 1.6rem; cursor: pointer; color: var(--fe-dark); padding: 8px; }

/* ============================================================
   3. HERO (EN DIRECT)
   ============================================================ */
.fe-hero {
	position: relative; color: #fff; overflow: hidden;
	background: linear-gradient(115deg, var(--fe-red) 0%, var(--fe-red-dark) 45%, #7A0A1C 100%);
	padding: 90px 0 100px;
}
.fe-hero::before {
	content: ""; position: absolute; inset: 0;
	background-image: linear-gradient(rgba(15,23,36,.45), rgba(15,23,36,.55)), url('/wp-content/uploads/2026/11/fe-hero.jpg');
	background-size: cover; background-position: center;
}
.fe-hero__inner { position: relative; }
.fe-hero__badge {
	display: inline-flex; align-items: center; gap: 10px;
	background: #fff; color: var(--fe-red);
	font-family: var(--font-head); font-weight: 800;
	letter-spacing: .12em; font-size: .8rem; text-transform: uppercase;
	padding: 10px 18px; border-radius: 999px; margin-bottom: 22px;
}
.fe-hero__badge .fe-dot { width: 9px; height: 9px; background: var(--fe-red); border-radius: 50%; animation: fe-pulse 1.6s infinite; }
.fe-hero h1 { color: #fff; font-size: clamp(2.2rem, 5.5vw, 3.8rem); max-width: 720px; text-shadow: 0 2px 18px rgba(0,0,0,.25); }
.fe-hero__slogan { font-size: clamp(1.05rem, 2vw, 1.3rem); margin-top: 14px; color: rgba(255,255,255,.92); max-width: 560px; }
.fe-hero__np {
	display: inline-flex; align-items: center; gap: 14px;
	background: rgba(255,255,255,.14); backdrop-filter: blur(8px);
	border: 1px solid rgba(255,255,255,.28);
	border-radius: var(--radius); padding: 18px 26px; margin-top: 34px;
	max-width: 100%;
}
.fe-hero__np img { width: 128px; height: 128px; border-radius: 16px; object-fit: cover; flex-shrink: 0; box-shadow: 0 14px 34px rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.4); }
.fe-hero__np-label { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; opacity: .85; font-weight: 700; font-family: var(--font-head); }
.fe-hero__np-title { font-family: var(--font-head); font-weight: 900; font-size: 1.35rem; text-transform: uppercase; letter-spacing: .01em; }
.fe-hero__freq {
	position: absolute; right: 0; bottom: -26px; text-align: right;
	font-family: var(--font-head); font-weight: 800; font-size: clamp(4rem, 9vw, 7.5rem);
	color: rgba(255,255,255,.13); line-height: 1; pointer-events: none; user-select: none;
}

/* ============================================================
   4. NOS RADIOS
   ============================================================ */
.fe-radios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.fe-radio-card {
	background: #fff; border-radius: var(--radius); overflow: hidden;
	box-shadow: var(--shadow); transition: transform .25s ease, box-shadow .25s ease;
	border-top: 6px solid var(--fe-red); display: flex; flex-direction: column;
}
.fe-radio-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(15,23,36,.14); }
.fe-radio-card--upradio { border-top-color: #7CB342; }
.fe-radio-card--upextra { border-top-color: #F9A825; }
.fe-radio-card__body { padding: 26px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.fe-radio-card img.fe-radio-card__logo { height: 64px; width: auto; object-fit: contain; margin-bottom: 6px; }
.fe-radio-card__freq { font-family: var(--font-head); font-weight: 800; color: var(--fe-red); font-size: 1.05rem; }
.fe-radio-card--upradio .fe-radio-card__freq { color: #5A8B2F; }
.fe-radio-card--upextra .fe-radio-card__freq { color: #C77800; }
.fe-radio-card p { color: var(--fe-grey); font-size: .95rem; flex: 1; }
.fe-radio-card__listen {
	align-self: flex-start; margin-top: 8px;
	font-family: var(--font-head); font-weight: 700; font-size: .85rem;
	color: var(--fe-dark); padding: 10px 18px; border-radius: 999px;
	border: 2px solid var(--fe-dark); min-height: 44px; display: inline-flex; align-items: center;
}
.fe-radio-card__listen:hover { background: var(--fe-dark); color: #fff; text-decoration: none; }

/* ============================================================
   5. À SUIVRE (grille du jour)
   ============================================================ */
.fe-upnext { display: grid; grid-template-columns: 340px 1fr; gap: 40px; align-items: start; }
.fe-upnext__now {
	background: var(--fe-dark); color: #fff; border-radius: var(--radius);
	padding: 30px; position: sticky; top: calc(var(--header-h) + 20px);
}
.fe-upnext__now .fe-kicker { color: #FF7A8E; }
.fe-upnext__now .fe-kicker::before { background: #FF7A8E; }
.fe-upnext__now-title { font-family: var(--font-head); font-weight: 800; font-size: 1.6rem; color: #fff; margin: 6px 0 4px; }
.fe-upnext__now-time { color: rgba(255,255,255,.65); font-size: .9rem; }
.fe-upnext__list { display: flex; flex-direction: column; gap: 12px; }
.fe-upnext__item {
	display: flex; align-items: center; gap: 18px;
	background: #fff; border: 1px solid rgba(15,23,36,.07); border-radius: 12px;
	padding: 14px 20px; transition: border-color .2s, transform .2s;
}
.fe-upnext__item:hover { border-color: var(--fe-red); transform: translateX(4px); }
.fe-upnext__time {
	font-family: var(--font-head); font-weight: 700; color: var(--fe-red);
	min-width: 120px; font-size: .9rem;
}
.fe-upnext__name { font-family: var(--font-head); font-weight: 700; color: var(--fe-dark); }
.fe-upnext__more { margin-top: 20px; }

/* ============================================================
   6. ACTUS
   ============================================================ */
.fe-actus { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.fe-actu {
	background: #fff; border-radius: var(--radius); overflow: hidden;
	box-shadow: var(--shadow); display: flex; flex-direction: column;
	transition: transform .25s ease;
}
.fe-actu:hover { transform: translateY(-5px); }
.fe-actu__thumb { aspect-ratio: 16/9; object-fit: cover; width: 100%; }
.fe-actu__thumb--ph { aspect-ratio: 16/9; background: linear-gradient(135deg, var(--fe-blue), var(--fe-blue-dark)); display: flex; align-items: center; justify-content: center; font-size: 2rem; }
.fe-actu__body { padding: 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.fe-actu__date { font-size: .78rem; color: var(--fe-grey); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.fe-actu__title { font-size: 1.1rem; }
.fe-actu__title a { color: var(--fe-dark); }
.fe-actu__title a:hover { color: var(--fe-red); text-decoration: none; }
.fe-actu p { color: var(--fe-grey); font-size: .92rem; flex: 1; }
.fe-actus__all { margin-top: 28px; text-align: center; }

/* ============================================================
   7. BANDEAUX CTA (DanceFloor / Animateur / Pub)
   ============================================================ */
.fe-split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.fe-split__img { border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; object-fit: cover; }
.fe-checklist { margin: 18px 0; display: flex; flex-direction: column; gap: 8px; }
.fe-checklist li { padding-left: 30px; position: relative; color: var(--fe-grey); }
.fe-checklist li::before { content: "✔"; position: absolute; left: 0; color: var(--fe-red); font-weight: 700; }
.fe-btn {
	display: inline-block; font-family: var(--font-head); font-weight: 700;
	background: var(--fe-red); color: #fff; padding: 14px 30px;
	border-radius: 999px; transition: background .2s, transform .2s;
	min-height: 48px; display: inline-flex; align-items: center;
}
.fe-btn:hover { background: var(--fe-red-dark); color: #fff; text-decoration: none; transform: translateY(-2px); }
.fe-btn--blue { background: var(--fe-blue); }
.fe-btn--blue:hover { background: var(--fe-blue-dark); }
.fe-btn--ghost { background: transparent; color: var(--fe-dark); border: 2px solid var(--fe-dark); }
.fe-btn--ghost:hover { background: var(--fe-dark); color: #fff; }

/* Bandeau publicité pleine largeur */
.fe-band {
	background: linear-gradient(100deg, var(--fe-blue) 0%, var(--fe-blue-dark) 100%);
	color: #fff; padding: 56px 0; text-align: center;
}
.fe-band h2 { color: #fff; }
.fe-band p { color: rgba(255,255,255,.85); max-width: 560px; margin: 12px auto 24px; }

/* ============================================================
   8. PARTENAIRES
   ============================================================ */
.fe-partners { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.fe-partner {
	background: #fff; border: 1px solid rgba(15,23,36,.07); border-radius: 12px;
	padding: 24px 20px; text-align: center; transition: border-color .2s, transform .2s;
}
.fe-partner:hover { border-color: var(--fe-blue); transform: translateY(-4px); }
.fe-partner__name { font-family: var(--font-head); font-weight: 700; color: var(--fe-dark); }
.fe-partner__tag { color: var(--fe-grey); font-size: .82rem; margin: 4px 0 8px; }
.fe-partner a { font-size: .85rem; font-weight: 600; }

/* ============================================================
   9. FOOTER
   ============================================================ */
.fe-footer { background: var(--fe-dark); color: rgba(255,255,255,.75); padding: 56px 0 40px; margin-bottom: 0; }
.fe-footer h4 { color: #fff; font-size: 1rem; margin-bottom: 14px; }
.fe-footer a { color: rgba(255,255,255,.75); }
.fe-footer a:hover { color: #fff; }
.fe-footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; }
.fe-footer ul { display: flex; flex-direction: column; gap: 8px; }
.fe-footer__bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); font-size: .82rem; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ============================================================
   10. PAGES & ARTICLES
   ============================================================ */
.fe-page-title {
	background: linear-gradient(115deg, var(--fe-red) 0%, var(--fe-red-dark) 100%);
	color: #fff; padding: 56px 0;
}
.fe-page-title h1 { color: #fff; }
.fe-page-title .fe-kicker { color: #fff; } .fe-page-title .fe-kicker::before { background: #fff; }
.fe-content { max-width: 800px; margin: 0 auto; padding: 48px 24px 72px; }
.fe-content h2 { margin: 40px 0 14px; }
.fe-content p, .fe-content li { color: #475467; margin-bottom: 12px; }
.fe-content table { width: 100%; border-collapse: collapse; margin: 16px 0 32px; font-size: .93rem; }
.fe-content th { text-align: left; font-family: var(--font-head); font-weight: 700; color: var(--fe-dark); background: var(--fe-light); padding: 12px 14px; }
.fe-content td { padding: 12px 14px; border-bottom: 1px solid rgba(15,23,36,.07); vertical-align: top; }
.fe-content tr:hover td { background: #FFF8F9; }
.fe-content td:first-child { white-space: nowrap; font-weight: 600; color: var(--fe-red); font-family: var(--font-head); }
.fe-content img { border-radius: var(--radius); margin: 12px 0 20px; }

.fe-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* ============================================================
   11. RESPONSIVE — TABLETTE (<= 1024px)
   ============================================================ */
@media (max-width: 1024px) {
	.fe-partners { grid-template-columns: 1fr 1fr; }
	.fe-actus { grid-template-columns: 1fr 1fr; }
	.fe-posts { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   12. RESPONSIVE — MOBILE (<= 900px)
   ============================================================ */
@media (max-width: 900px) {
	:root { --player-h: 170px; } /* barre du player en 2 lignes sur mobile */
	.fe-section { padding: 48px 0; }
	.fe-container { padding: 0 18px; }

	/* Header : menu burger */
	.fe-nav { position: absolute; top: var(--header-h); left: 0; right: 0; background: #fff; border-bottom: 1px solid rgba(15,23,36,.08); display: none; padding: 12px 18px 20px; box-shadow: 0 12px 30px rgba(15,23,36,.08); }
	.fe-nav.is-open { display: block; }
	.fe-nav ul { flex-direction: column; gap: 2px; }
	.fe-nav a { display: block; padding: 14px 16px; font-size: 1rem; }
	.fe-burger { display: block; }
	.fe-header__live { display: none; }

	/* Hero : marges resserrées, badge au-dessus du titre */
	.fe-hero { padding: 64px 0 76px; }
	.fe-hero__badge { margin-bottom: 18px; }
	.fe-hero__np { gap: 14px; padding: 14px 18px; }
	.fe-hero__freq { bottom: -18px; }

	.fe-radios { grid-template-columns: 1fr; }
	.fe-upnext { grid-template-columns: 1fr; }
	.fe-upnext__now { position: static; padding: 24px; }
	.fe-actus { grid-template-columns: 1fr; }
	.fe-posts { grid-template-columns: 1fr; }
	.fe-split { grid-template-columns: 1fr; gap: 28px; }
	.fe-split__img { max-height: 280px; }
	.fe-footer__grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ============================================================
   13. RESPONSIVE — PETITS MOBILES (<= 480px)
   ============================================================ */
@media (max-width: 480px) {
	:root { --header-h: 88px; }
	.fe-section { padding: 40px 0; }
	.fe-container { padding: 0 14px; }
	.fe-logo img { height: 64px; }
	.fe-hero { padding: 52px 0 66px; }
	.fe-hero__np { width: 100%; }
	.fe-hero__np img { width: 96px; height: 96px; }
	.fe-hero__np-title { font-size: .92rem; }
	.fe-upnext__item { flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 16px; }
	.fe-upnext__time { min-width: 0; }
	.fe-radio-card__body { padding: 20px; }
	.fe-radio-card img.fe-radio-card__logo { height: 52px; }
	.fe-partners { grid-template-columns: 1fr; }
	.fe-band { padding: 44px 0; }
	.fe-content { padding: 36px 16px 60px; }
	.fe-content table { font-size: .85rem; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.fe-content td, .fe-content th { padding: 10px 10px; }
	.fe-btn { width: 100%; justify-content: center; }
	.fe-actus__all .fe-btn { width: auto; }
}

/* ============================================================
   14. GRILLE DES PROGRAMMES — version fun
   ============================================================ */
.fe-grille-intro {
	background: linear-gradient(115deg, var(--fe-blue) 0%, var(--fe-blue-dark) 60%, #0A3D63 100%);
	color: #fff; padding: 56px 0 72px; overflow: hidden; position: relative;
}
.fe-grille-intro h1 { color: #fff; font-size: clamp(2rem, 5vw, 3.2rem); }
.fe-grille-intro p { color: rgba(255,255,255,.85); margin-top: 10px; max-width: 560px; }
.fe-grille-days {
	display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px;
}
.fe-grille-day-btn {
	font-family: var(--font-head); font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
	font-size: .88rem; color: #fff; background: rgba(255,255,255,.14);
	border: 2px solid rgba(255,255,255,.35); border-radius: 999px;
	padding: 10px 20px; cursor: pointer; min-height: 44px;
	transition: transform .18s ease, background .18s ease, color .18s ease;
}
.fe-grille-day-btn:hover { transform: translateY(-2px); background: rgba(255,255,255,.25); }
.fe-grille-day-btn.is-active {
	background: var(--fe-red); border-color: var(--fe-red); color: #fff;
	box-shadow: 0 8px 22px rgba(229,25,55,.45);
}
.fe-grille-wrap { max-width: 900px; margin: 0 auto; padding: 48px 24px 80px; }
.fe-grille__day { display: none; }
.fe-grille__day.is-active { display: grid; gap: 14px; animation: fe-grille-in .35s ease; }
@keyframes fe-grille-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.fe-slot {
	display: flex; align-items: center; gap: 16px;
	background: #fff; border-radius: 14px; padding: 16px 20px;
	box-shadow: 0 6px 18px rgba(15,23,36,.07);
	border-left: 6px solid var(--fe-blue);
	transition: transform .18s ease, box-shadow .18s ease;
}
.fe-slot:hover { transform: translateX(6px); box-shadow: 0 10px 26px rgba(15,23,36,.12); }
.fe-slot--live {
	border-left-color: var(--fe-red);
	background: linear-gradient(100deg, #FFF3F5 0%, #fff 55%);
	box-shadow: 0 10px 30px rgba(229,25,55,.18);
}
.fe-slot__emoji { font-size: 1.7rem; flex-shrink: 0; width: 46px; height: 46px; display: grid; place-items: center; background: var(--fe-light); border-radius: 12px; }
.fe-slot--live .fe-slot__emoji { background: #FDE0E5; }
.fe-slot__time {
	font-family: var(--font-head); font-weight: 900; font-size: .95rem; color: var(--fe-blue);
	white-space: nowrap; min-width: 118px;
}
.fe-slot--live .fe-slot__time { color: var(--fe-red); }
.fe-slot__name { font-family: var(--font-head); font-weight: 800; font-size: 1.06rem; color: var(--fe-ink); text-transform: uppercase; letter-spacing: .01em; }
.fe-slot__live-badge {
	margin-left: auto; flex-shrink: 0;
	font-family: var(--font-head); font-weight: 800; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
	color: #fff; background: var(--fe-red); border-radius: 999px; padding: 6px 12px;
	display: inline-flex; align-items: center; gap: 7px;
}
.fe-slot__live-badge .fe-dot { width: 7px; height: 7px; background: #fff; border-radius: 50%; animation: fe-pulse 1.6s infinite; }
@media (max-width: 600px) {
	.fe-slot { flex-wrap: wrap; gap: 10px; padding: 14px 16px; }
	.fe-slot__time { min-width: 0; }
	.fe-slot__live-badge { margin-left: auto; }
	.fe-grille-day-btn { font-size: .8rem; padding: 9px 15px; }
}