/* ============ BASE ============ */
html,body{background:#fff}
:root{--g:#075b3b;--g2:#0b7b4e;--y:#f2c400;--r:#c9282d;--ink:#17201c;--muted:#69746e;--soft:#f2f6f3;--line:#dfe7e2;--dark:#081b14}
*{box-sizing:border-box}
html{scroll-behavior:smooth;height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif;color:var(--ink);line-height:1.55;min-height:100vh;display:flex;flex-direction:column}
main{flex:1 0 auto}
a{text-decoration:none;color:inherit}
button,input{font:inherit}
.container{width:min(1180px,92%);margin:auto}
.topline{height:5px;background:linear-gradient(90deg,var(--g) 0 33%,var(--y) 33% 66%,var(--r) 66%)}
em{font-style:normal;font-size:11px;font-weight:900;letter-spacing:2px;color:var(--r)}
.btn{display:inline-flex;justify-content:center;align-items:center;padding:11px 18px;border-radius:8px;background:var(--g);color:#fff;font-weight:800;border:0;cursor:pointer;margin:10px 7px 0 0}
.outline{background:transparent;border:1px solid #ffffff66}

/* ============ HEADER / NAV ============ */
header{border-bottom:1px solid var(--line);background:#dcebe6}
.head{height:86px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:62px;height:62px;object-fit:contain;border-radius:50%}
.brand span{display:flex;flex-direction:column}
.brand b{font-size:25px;font-style:italic}
.brand small{font-size:12px;color:var(--muted)}
.stats{font-size:13px;color:var(--muted)}
.stats b{color:var(--g)}
#menu{display:none;background:none;border:0;font-size:28px;color:var(--g)}
nav{position:sticky;top:0;z-index:20;background:#2b806b;border-bottom:1px solid var(--line);box-shadow:0 2px 10px #00000008}
.navin{display:flex;align-items:center;min-height:52px;gap:1px;overflow:auto}
.navin a{color:#fff;padding:13px 10px;font-size:13px;font-weight:800;border-bottom:3px solid transparent;white-space:nowrap}
.navin a:hover,.navin a.active{color:#f2c400;border-color:var(--g)}
.navin .shop{color:#0d47a1}
#search{margin-left:auto;border:0;background:var(--soft);width:38px;height:38px;border-radius:50%;font-size:21px;cursor:pointer}

/* ============ FLASH TICKER ============ */
.flash{background:var(--dark);color:#fff}
.flashin{display:flex;align-items:center;min-height:43px;gap:9px}
.flashin strong{background:var(--r);padding:5px 9px;border-radius:4px;font-size:11px}
.flashin #ticker{flex:1;white-space:nowrap;overflow:hidden;font-size:13px}
.flashin button{background:none;border:0;color:#fff;font-size:24px;cursor:pointer}

/* ============ BANDE PUBLICITAIRE ============ */
.adband{background:var(--soft);border:1px dashed var(--line);border-radius:12px;padding:10px 16px;margin:14px 0;overflow:hidden;position:relative;min-height:70px;display:flex;align-items:center;animation:adPulse 2.5s ease-in-out infinite}
@keyframes adPulse{0%,100%{box-shadow:0 0 0 0 rgba(7,91,59,.15)}50%{box-shadow:0 0 0 6px rgba(7,91,59,0)}}
.adband .adslide{position:absolute;left:16px;right:16px;opacity:0;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px;transition:none;animation:none}
.adband .adslide:not(.show){display:none}
.adband .adslide.show{opacity:1;position:relative;left:0;right:0;flex:1;min-width:0}
.adband .adslide b{color:var(--g);font-weight:800}
.adband .adslide a{display:flex;align-items:center;gap:8px;color:inherit;text-decoration:none}
.adband .adslide img{height:50px;width:auto;border-radius:6px;object-fit:contain;transition:transform .3s ease}
.adband:hover .adslide img{transform:scale(1.05)}
.adband .adslide .wa-icon{width:28px;height:28px;flex-shrink:0}
.adband .adslide a.adcall{margin-left:auto;padding:8px 16px;background:#0b5d3b;color:#fff;font-weight:700;border-radius:999px;white-space:nowrap}
.adband .adslide>a:first-child{flex:1;min-width:0}
.adband .adslide span{display:block;min-height:1.4em}
.adband .adslide a.adcall{flex-shrink:0}

/* ============ HERO (À LA UNE) ============ */
.hero{display:grid;grid-template-columns:1.25fr .75fr;gap:20px;padding-top:26px}
.hero-main{min-height:375px;border-radius:18px;padding:0;color:#fff;background:linear-gradient(125deg,#063b28ee,#0b7b4eea),radial-gradient(circle at 80% 15%,#f2c40055,transparent 35%);position:relative;overflow:hidden}
.hero-main:after{content:"";position:absolute;width:500px;height:220px;border:1px solid #ffffff22;border-radius:50%;right:-160px;bottom:-120px;box-shadow:0 0 0 35px #ffffff08,0 0 0 35px #ffffff04}
.hero-main::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,0) 75%);z-index:1;pointer-events:none}
.hero-main > *{position:relative;z-index:2}
.hero-main,.side{transition:transform .25s ease,box-shadow .25s ease}
.hero-main:hover,.side:hover{transform:translateY(-6px);box-shadow:0 12px 28px rgba(0,0,0,.18)}
.hero-main em,.dark em{color:var(--y)}
h1{font-size:clamp(25px,2.5vw,46px);line-height:1.03;letter-spacing:-2px;margin:12px 0 17px}
.hero-main p{font-size:17px;color:#e4eee9;max-width:650px}

.heroslide{display:none;padding:55px;flex-direction:column;justify-content:flex-end;background-size:cover;background-position:center;min-height:375px}
.heroslide.show{display:flex}

.hero-side{display:grid;gap:20px}
.side{min-height:178px;border-radius:16px;padding:23px;color:#fff;display:flex;flex-direction:column;justify-content:end;position:relative;overflow:hidden;background:#154d39}
.side:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 25%,#000b)}
.side>*{position:relative}
.side span,.card span{font-size:10px;letter-spacing:1.4px;font-weight:900;color:var(--y)}
.side h3{font-size:18px;line-height:1.2;margin:7px 0}
.side small{color:#dbe7e1}
.river{background:linear-gradient(135deg,#0c6c49,#0b352a 55%,#9d7a22)}
.market{background:linear-gradient(135deg,#936025,#473022 55%,#075b3b)}

/* ============ SECTIONS GÉNÉRIQUES ============ */
.section{padding:35px 0 15px}
main .section:not(.soft){border-top:2px solid var(--line)}
main .section:last-of-type{border-bottom:2px solid var(--line)}
.sectionhead{display:flex;align-items:end;justify-content:space-between;margin-bottom:22px}
.sectionhead h2{margin:5px 0 0;font-size:30px;line-height:1.1}
.sectionhead>a{color:var(--g);font-weight:800;font-size:13px}
.soft{background:#e6f1f5;margin-top:50px}

.three{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start}
.three article{flex:0 1 360px;box-sizing:border-box;border:1px solid var(--line);border-radius:14px;padding:18px;background:#fff}
.three article:hover{transform:translateY(-6px);box-shadow:0 10px 24px rgba(0,0,0,.10)}
.three article>b{font-size:35px;color:var(--g)}
.three h3{margin:10px 0 4px}
.three p,.list p,.edu p,.shopin p,.newsletter p{font-size:14px;color:var(--muted)}
.three .report-card{flex:0 1 360px}

/* ============ DERNIERS ARTICLES ============ */
.latest{display:grid;gap:10px;margin-top:18px}
.latest article{background:#fff;border:1px solid var(--line);border-radius:13px;padding:12px;display:flex;gap:14px;align-items:center;text-decoration:none;color:inherit;transition:transform .2s ease,box-shadow .2s ease}
.latest article:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.08)}
.latest img{width:72px;height:72px;object-fit:cover;border-radius:10px;flex-shrink:0}
.latest h3{margin:0;font-size:15px;line-height:1.3}
.latest small{color:var(--muted);font-size:12px}
.latest .cat{font-size:10px;font-weight:900;letter-spacing:1px;color:var(--r);display:block;margin-bottom:2px}

/* ============ AUDIO / VIDÉO ============ */
.audio-video-row{display:grid;grid-template-columns:1fr;gap:0}

.audio-list,.video-list{display:grid;grid-template-columns:1fr;gap:20px;margin-top:18px;width:100%}

.audio-card,.video-card{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:16px;padding:16px;background:#fff;display:block}
.audio-card b,.video-card b{display:block;font-size:18px;margin-bottom:6px}
.audio-card span,.audio-card p,.video-card p{margin:0 0 10px;color:var(--muted);font-size:14px}
.audio-card .download{margin-top:10px}

.audio-thumb,.video-thumb{position:relative;overflow:hidden;border-radius:14px;margin-bottom:12px}
.audio-thumb img,.video-thumb video,.audio-card>img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;border-radius:14px}
.audio-hidden{display:none}
.audio-icon{display:none}

.audio-play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;border:none;background:rgba(0,0,0,.55);color:#fff;font-size:16px;cursor:pointer}

.audio-menu,.video-menu{position:absolute;top:8px;right:8px}
.audio-menu-toggle,.video-menu-toggle{width:28px;height:28px;border-radius:50%;border:none;background:rgba(0,0,0,.55);color:#fff;cursor:pointer}
.audio-menu-list,.video-menu-list{display:none;position:absolute;right:0;top:32px;background:#fff;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,.2);min-width:150px;overflow:hidden;z-index:5}
.audio-menu-list a,.audio-menu-list button,.video-menu-list a,.video-menu-list button{display:block;width:100%;text-align:left;padding:8px 12px;background:none;border:none;cursor:pointer;font-size:14px;color:#222;text-decoration:none}
.audio-menu-list a:hover,.audio-menu-list button:hover,.video-menu-list a:hover,.video-menu-list button:hover{background:#f2f2f2}
.audio-menu.open .audio-menu-list,.video-menu.open .video-menu-list{display:block}

video::-webkit-media-controls-overflow-button,
video::-webkit-media-controls-overflow-menu-list,
video::-webkit-media-controls-picture-in-picture-button{display:none !important}

/* ============ CULTURE/SOCIÉTÉ/ÉDU (icônes) ============ */
.edu{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;display:flex;align-items:center;gap:20px}
.edu>b{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--y);font-size:29px}
.edu h3{margin:0}
.edu p{margin:4px 0}
.edu .btn{margin-left:auto}

/* ============ SECTION SOMBRE (BIG-Infos TV) ============ */
.dark{background:var(--dark);color:#fff;padding:0px 0 2px;margin-top:4px}
.dark .split{min-height:0;padding:10px 0;align-items:start}
.dark .split h2{font-size:28px;line-height:1.15;margin:6px 0}
.dark .split p{margin:0 0 10px}
.split{display:grid;grid-template-columns:1.2fr .75fr .75fr;gap:45px;align-items:center}
.dark .video{min-height:150px;border:1px solid #ffffff33;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:16px;background:#154d39;color:#fff;text-align:center;cursor:pointer;transition:transform .25s ease,box-shadow .25s ease}
.dark .video:hover{transform:translateY(-6px);box-shadow:0 12px 28px rgba(0,0,0,.20)}
.video-cta{display:inline-block;margin-top:8px;font-size:15px;font-weight:800}

/* ============ REPORTAGES ============ */
.reports{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:14px}
.reports h3{margin:8px 0 4px;font-size:20px}
.reports p{margin:0;font-size:14px;color:#69746e}
.reports article,.report-card{display:block;color:inherit;text-decoration:none;border:1px solid #d8e4de;border-radius:16px;padding:20px;background:#f7faf9;box-shadow:0 5px 16px rgba(0,0,0,.06);transition:transform .25s ease,box-shadow .25s ease;cursor:pointer}
.reports article:hover,.report-card:hover{transform:translateY(-6px);box-shadow:0 10px 24px rgba(0,0,0,.10)}

/* ============ BIG-SHOP / NEWSLETTER ============ */
.promo-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:14px}
.promo-card{border:1px solid #d8e4de;border-radius:16px;padding:28px;background:#f7faf9;box-shadow:0 5px 16px rgba(0,0,0,.06);transition:transform .25s ease,box-shadow .25s ease}
.promo-card:hover{transform:translateY(-6px);box-shadow:0 10px 24px rgba(0,0,0,.10)}
.promo-card em{color:#c0392b;font-weight:700;font-size:13px;letter-spacing:.5px}
.promo-card h2{margin:8px 0;font-size:22px}

/* ============ FOOTER ============ */
footer{background:var(--dark);color:#fff;margin-top:0;padding:8px 0 2px}
.foot{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:6px;padding:6px 0 2px;align-items:start}
.foot>div{display:flex;flex-direction:column;gap:2px}
.foot b{color:#fff}
.foot a,.foot span,.foot p{font-size:13px;color:#9fb1a8}
.fbrand{display:flex;flex-direction:row;align-items:center;gap:6px;margin-bottom:2px}
.fbrand img{width:36px;height:36px;object-fit:contain}
.fbrand div p{margin:0;line-height:1.2}
.foot .socials{display:flex;flex-direction:column;gap:2px}
.foot .socials a{display:flex;align-items:center;gap:4px;line-height:1.1}
.foot .socials img{width:14px;height:14px;object-fit:contain}
.copy{text-align:center;border-top:1px solid #fff1;padding:1px 0;font-size:12px;color:#74877e;margin-top:1px}

/* ============ MODALE RECHERCHE / TOAST ============ */
#overlay{position:fixed;inset:0;background:#03120df2;z-index:100;display:none;align-items:center;justify-content:center;padding:30px;color:#fff}
#overlay.open{display:flex}
#overlay>div{width:min(700px,100%)}
#overlay h2{font-size:40px}
#overlay input{width:100%;padding:17px;border:0;border-radius:10px;font-size:19px}
#overlay p{color:#9db0a6}
#close{position:absolute;right:24px;top:10px;background:none;border:0;color:#fff;font-size:42px;cursor:pointer}
#toast{position:fixed;right:25px;bottom:25px;background:#071b13;color:#fff;border-left:4px solid var(--y);padding:13px 17px;border-radius:8px;transform:translateY(100px);opacity:0;transition:.25s;z-index:200}
#toast.show{transform:none;opacity:1}

/* ============ RESPONSIVE ============ */
@media(max-width:900px){
.audio-video-row{grid-template-columns:1fr;gap:0}
}
@media(min-width:900px){
.audio-video-row{grid-template-columns:1fr 1fr;gap:40px;align-items:start}
}
@media(min-width:700px){
.latest{grid-template-columns:1fr 1fr;gap:14px 24px}
}
@media(min-width:750px){
.video-card{width:100%}
}

@media(max-width:850px){
.stats{display:none}
#menu{display:block}
.navin{display:none;flex-direction:column;align-items:stretch;padding:8px 0}
.open .navin{display:flex}
.navin a{border:0}
.hero,.grid,.twocol,.split{grid-template-columns:1fr}
.hero-main{padding:38px}
.three,.reports{grid-template-columns:1fr}
.shopin,.newsletter,.promo-grid{flex-direction:column;grid-template-columns:1fr;align-items:flex-start}
.foot{grid-template-columns:1fr 1fr}
}

@media(max-width:650px){
.hero-main{min-height:auto;padding:0}
.heroslide{padding:22px 18px;min-height:280px}
.heroslide h1{font-size:22px;line-height:1.2;margin:8px 0 10px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.heroslide p{display:none}
.heroslide em{font-size:6px}
.heroslide .btn{padding:6px 10px;font-size:10px;margin-top:4px}

footer{margin-top:0;padding:0}
.foot{grid-template-columns:1fr 1fr 1fr;gap:10px 8px;padding:0 0 6px}
.fbrand{grid-column:1/-1;align-items:flex-start;gap:6px;margin-bottom:8px}
.fbrand img{width:32px;height:32px}
.fbrand div p{margin-top:2px;line-height:1.2}
.foot b{font-size:12px}
.foot a,.foot span,.foot p{font-size:10px}
.foot .socials{align-items:flex-end;text-align:right}
.foot .socials a{justify-content:flex-end;gap:3px}
.foot .socials img{width:10px;height:10px}
.copy{grid-column:1/-1;font-size:10px;padding:2px 0;margin-top:0;line-height:1.3}
}

@media(max-width:520px){
.head{height:76px}
.brand img{width:52px;height:52px}
.brand b{font-size:21px}
.brand small{font-size:10px}
}