/*
Theme Name: Nelsat News
Theme URI: https://www.infosducontinent.tg
Author: Infos Du Continent
Description: Thème sur-mesure, moderne et professionnel pour le média panafricain Infos Du Continent. Inspiré des grands sites d'information (style RFI), en bleu. Sans licence, 100% propriétaire.
Version: 1.0.0
Requires at least: 5.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: infosducontinent
*/
/* =========================================================
1. Variables & reset
========================================================= */
:root{
--blue:#0B5AA2; /* couleur d'accent principale */
--blue-dark:#083b6b;
--blue-darker:#062c50;
--blue-light:#1877c9;
--red-live:#d81f2a; /* rappel "direct/live" */
--red:#d10000; /* rouge du logo (accent secondaire) */
--red-dark:#a80000;
--ink:#111418;
--ink-soft:#3a4149;
--muted:#6b7280;
--line:#e6e8eb;
--bg:#ffffff;
--bg-soft:#f5f6f8;
--dark:#141922; /* sections sombres (vidéos, footer) */
--dark-2:#1d2430;
--radius:6px;
--wrap:1200px;
--font-head:"Roboto Condensed","Arial Narrow",system-ui,sans-serif;
--font-body:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
margin:0;font-family:var(--font-body);color:var(--ink);
background:var(--bg);line-height:1.55;font-size:16px;
-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
a:hover{text-decoration:none;}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.18;margin:0 0 .4em;font-weight:700;letter-spacing:.2px;}
p{margin:0 0 1em;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;cursor:pointer;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
/* =========================================================
2. Top bar
========================================================= */
.topbar{background:var(--blue-darker);color:#cdd6e2;font-size:12.5px;}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:34px;}
.topbar .date{text-transform:capitalize;letter-spacing:.3px;}
.topbar .top-links{display:flex;gap:16px;align-items:center;}
.topbar .top-links a:hover{color:#fff;}
/* =========================================================
3. Header / logo / nav
========================================================= */
.site-header{background:#fff;border-bottom:3px solid var(--blue);position:sticky;top:0;z-index:60;}
.header-main{display:flex;align-items:center;gap:24px;min-height:58px;padding:2px 0;}
/* ---- En-tête compact au défilement ----------------------------------------
L'en-tête passe en position fixe et une cale de hauteur constante prend sa
place dans le flux. Sans cette cale, replier les rangées raccourcirait le
document et le texte remonterait brutalement sous les yeux du lecteur.
Le mode fixe n'est activé que si le JavaScript répond (classe posée par
main.js) : sans JS, l'en-tête garde son comportement collant d'origine. */
.idc-fixed-header{scroll-padding-top:calc(var(--idc-h-compact,56px) + 12px);}
.idc-fixed-header .site-header{position:fixed;top:0;left:0;right:0;}
.idc-fixed-header .header-spacer{height:var(--idc-h-full,147px);}
.site-header .topbar,.site-header .header-main,.site-header .nav-geo{
overflow:hidden;transition:max-height .3s ease,opacity .22s ease,padding .3s ease;}
/* Repli : la barre du haut et la barre pays s'effacent partout ; la ligne
logo + publicité ne s'efface que sur ordinateur — sur mobile elle porte le
bouton ☰ et la loupe, qui doivent rester atteignables. */
.idc-fixed-header .site-header.is-compact .topbar,
.idc-fixed-header .site-header.is-compact .nav-geo{
max-height:0;min-height:0;opacity:0;border-bottom-width:0;pointer-events:none;}
@media(min-width:721px){
.idc-fixed-header .site-header.is-compact .header-main{
max-height:0;min-height:0;opacity:0;padding-top:0;padding-bottom:0;pointer-events:none;}
}
/* Marque réduite et loupe, réservées au mode compact.
Scopées sous .nav-primary : la marque est un de cette barre, et
« .nav-primary a » (0,1,1) l'emporterait sur « .nav-brand » (0,1,0),
ce qui la rendrait visible en permanence. */
.nav-primary .nav-brand,.nav-primary .nav-search{display:none;}
.site-header.is-compact .nav-primary .nav-brand{display:inline-flex;align-items:center;flex:0 0 auto;line-height:0;padding:0;}
.site-header.is-compact .nav-primary .nav-search{display:inline-flex;align-items:center;flex:0 0 auto;font-size:17px;}
.nav-brand img{height:30px;width:auto;max-width:130px;object-fit:contain;}
.nav-brand .mark{display:flex;align-items:center;justify-content:center;width:28px;height:28px;
border-radius:50%;background:var(--blue);color:#fff;font-family:var(--font-head);
font-weight:700;font-size:15px;line-height:1;}
@media(max-width:720px){
/* La barre de menu est repliée derrière ☰ sur mobile : ces doublons n'ont pas lieu d'être. */
.site-header.is-compact .nav-primary .nav-brand,
.site-header.is-compact .nav-primary .nav-search{display:none;}
}
/* Emplacement publicitaire de l'en-tête (à droite du logo) */
.header-ad{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;}
.header-ad .ad-label{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:#aeb6c0;margin-bottom:3px;}
.header-ad-inner{display:flex;align-items:center;justify-content:center;max-width:100%;}
.header-ad-inner img,.header-ad-img{max-height:66px;width:auto;max-width:100%;display:block;}
.header-ad-inner :is(ins,iframe){max-width:100%;}
@media(max-width:820px){ .header-ad{display:none;} }
/* Emplacement publicitaire de l'en-tête (à droite du logo) */
.header-ad{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;}
.header-ad .ad-label{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:#aeb6c0;margin-bottom:3px;}
.header-ad-inner{display:flex;align-items:center;justify-content:center;max-width:100%;}
.header-ad-inner img,.header-ad-img{max-height:66px;width:auto;max-width:100%;display:block;}
.header-ad-inner :is(ins,iframe){max-width:100%;}
@media(max-width:820px){ .header-ad{display:none;} }
/* Emplacements publicitaires génériques (colonne, article) */
.ad-slot{margin:0 0 26px;text-align:center;}
.ad-slot .ad-label{display:block;font-size:9px;letter-spacing:1px;text-transform:uppercase;color:#9aa2ac;margin-bottom:6px;}
.ad-slot .ad-inner{display:inline-block;max-width:100%;line-height:0;}
.ad-slot .ad-inner img{max-width:100%;height:auto;margin:0 auto;}
.ad-sidebar{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);padding:12px;}
.ad-sidebar .ad-inner img{border-radius:4px;}
/* Se cale sous l'en-tête replié (auparavant 96 px, sous l'en-tête déplié). */
.ad-sticky{position:sticky;top:calc(var(--idc-h-compact,56px) + 16px);} /* suit le défilement */
.ad-inarticle{margin:30px auto;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.ad-inarticle .ad-inner img{border-radius:4px;}
@media(max-width:960px){ .ad-sticky{position:static;} } /* pas de collant sur mobile */
.logo{display:flex;align-items:center;gap:2px;font-family:var(--font-head);font-weight:700;
font-size:27px;letter-spacing:-.5px;line-height:1;white-space:nowrap;}
.logo .l-infos{color:var(--ink);}
.logo .l-du{color:var(--blue);}
.logo .l-continent{color:var(--ink);}
.logo .mark{display:inline-block;width:34px;height:34px;margin-right:10px;border-radius:50%;
background:var(--blue);color:#fff;font-size:17px;font-weight:700;text-align:center;line-height:34px;}
.custom-logo-link{display:inline-flex;align-items:center;line-height:0;}
.custom-logo{height:58px;width:auto;max-width:220px;object-fit:contain;}
.header-tools{margin-left:auto;display:flex;align-items:center;gap:14px;}
.search-toggle{background:none;border:0;color:var(--ink);font-size:19px;line-height:1;padding:6px;border-radius:50%;}
.search-toggle:hover{background:var(--bg-soft);color:var(--blue);}
/* primary nav (thématique) */
.nav-primary{background:#fff;border-bottom:1px solid var(--line);}
.nav-primary ul{display:flex;flex-wrap:wrap;align-items:center;}
.nav-primary li{position:relative;}
.nav-primary a{display:block;padding:9px 14px;font-family:var(--font-head);font-weight:700;
font-size:15px;text-transform:uppercase;letter-spacing:.4px;color:var(--ink);}
.nav-primary a:hover,.nav-primary .current-menu-item>a{color:var(--blue);}
.nav-primary li+li>a{border-left:0;}
/* secondary nav (pays / géographie) */
.nav-geo{background:var(--bg-soft);border-bottom:1px solid var(--line);}
.nav-geo .wrap{overflow-x:auto;scrollbar-width:none;}
.nav-geo .wrap::-webkit-scrollbar{display:none;}
.nav-geo ul{display:flex;align-items:center;gap:2px;flex-wrap:nowrap;}
.nav-geo li{flex:0 0 auto;}
.nav-geo a{display:block;padding:9px 12px;font-size:13.5px;font-weight:600;color:var(--ink-soft);white-space:nowrap;}
.nav-geo a:hover,.nav-geo .current-menu-item>a{color:var(--blue);}
/* dropdown submenus */
.nav-primary .sub-menu,.nav-geo .sub-menu{position:absolute;top:100%;left:0;min-width:200px;background:#fff;
border:1px solid var(--line);box-shadow:0 12px 30px rgba(0,0,0,.12);z-index:70;display:none;padding:6px 0;}
.nav-primary li:hover>.sub-menu{display:block;}
.nav-primary .sub-menu a{padding:9px 16px;text-transform:none;font-size:14px;font-weight:600;}
/* =========================================================
4. Category badge / kicker
========================================================= */
.badge{display:inline-block;background:var(--red);color:#fff;font-family:var(--font-head);
font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.6px;padding:3px 8px;line-height:1.3;}
.badge.live{background:var(--red-live);}
.badge.soft{background:#fff;color:var(--blue);border:1px solid var(--blue);}
/* =========================================================
5. Cards
========================================================= */
.card{display:block;margin-bottom:22px;}
.card .thumb{position:relative;overflow:hidden;background:var(--bg-soft);aspect-ratio:16/9;}
/* Placeholder de marque (article sans image) */
.thumb-ph{position:absolute;inset:0;width:100%;height:100%;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:8px;text-align:center;padding:12px;
background:linear-gradient(135deg,#0B5AA2 0%,#083b6b 100%);color:#fff;}
.thumb-ph::before{content:"";position:absolute;inset:0;
background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1px);background-size:14px 14px;opacity:.5;}
.thumb-ph .ph-mark{position:relative;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.14);
border:2px solid rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;
font-family:var(--font-head);font-weight:700;font-size:22px;line-height:1;}
.thumb-ph .ph-name{position:relative;font-family:var(--font-head);font-weight:700;font-size:13px;letter-spacing:.5px;text-transform:uppercase;opacity:.95;}
.thumb-ph .ph-cat{position:relative;font-size:11px;letter-spacing:.4px;opacity:.75;text-transform:uppercase;}
.card.row .thumb-ph .ph-name,.card.row .thumb-ph .ph-cat{display:none;}
.card.row .thumb-ph .ph-mark{width:30px;height:30px;font-size:15px;}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.card:hover .thumb img{transform:scale(1.04);}
.card .badge{position:absolute;left:0;bottom:0;}
.card .title{font-family:var(--font-head);font-weight:700;color:var(--ink);margin:9px 0 4px;line-height:1.22;}
.card:hover .title{color:var(--blue);}
.card .meta{font-size:12px;color:var(--muted);}
.card .title{font-size:17px;}
.card.sm .title{font-size:15px;}
.card.sm .thumb{aspect-ratio:16/10;}
/* horizontal card (image left) — la grille est sur le lien interne */
.card.row{margin-bottom:0;border-bottom:1px solid var(--line);}
.card.row:last-child{border-bottom:0;}
.card.row>a{display:grid;grid-template-columns:104px 1fr;gap:13px;align-items:start;padding:13px 0;}
.card.row .thumb{aspect-ratio:1/1;margin:0;border-radius:4px;}
.card.row .title{margin-top:0;font-size:14.5px;line-height:1.3;}
.card.row .meta{margin-top:5px;}
/* text-only list item */
.list-item{padding:11px 0;border-bottom:1px solid var(--line);}
.list-item:last-child{border-bottom:0;}
.list-item .title{font-family:var(--font-head);font-weight:700;font-size:15px;line-height:1.25;color:var(--ink);}
.list-item:hover .title{color:var(--blue);}
.list-item .meta{font-size:11.5px;color:var(--muted);margin-top:3px;}
/* =========================================================
6. Hero (une) + ticker
========================================================= */
.section-hero{padding:26px 0 10px;}
.hero-grid{display:grid;grid-template-columns:1fr 340px;gap:30px;}
.hero-lead .thumb{aspect-ratio:16/9;overflow:hidden;background:var(--bg-soft);position:relative;}
.hero-lead .thumb img{width:100%;height:100%;object-fit:cover;}
.hero-lead .badge{position:relative;margin-bottom:10px;font-size:12px;}
.hero-lead h2{font-size:32px;line-height:1.12;margin:12px 0 8px;}
.hero-lead:hover h2{color:var(--blue);}
.hero-lead .excerpt{color:var(--ink-soft);font-size:16px;max-width:46em;}
.hero-lead .meta{font-size:13px;color:var(--muted);margin-top:8px;}
.hero-sub{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:22px;}
/* ticker "En continu" */
.ticker{border:1px solid var(--line);border-top:3px solid var(--blue);background:#fff;}
.ticker .ticker-head{display:flex;align-items:center;justify-content:space-between;
padding:12px 14px;border-bottom:1px solid var(--line);}
.ticker .ticker-head h3{margin:0;font-size:17px;color:var(--blue);text-transform:uppercase;letter-spacing:.4px;}
.ticker .ticker-head .arrow{color:var(--blue);font-size:18px;}
.ticker ul{padding:2px 14px 6px;}
.ticker li{position:relative;padding:12px 0 12px 62px;border-bottom:1px solid var(--line);}
.ticker li:last-child{border-bottom:0;}
.ticker li .time{position:absolute;left:0;top:12px;font-family:var(--font-head);font-weight:700;
font-size:13px;color:var(--blue);}
.ticker li .time::before{content:"";position:absolute;left:48px;top:2px;width:2px;height:calc(100% + 12px);background:var(--line);}
.ticker li .dot{position:absolute;left:44px;top:4px;width:9px;height:9px;border-radius:50%;
background:var(--blue);border:2px solid #fff;box-shadow:0 0 0 1px var(--blue);z-index:2;}
.ticker li a{font-family:var(--font-head);font-weight:700;font-size:14.5px;line-height:1.25;color:var(--ink);}
.ticker li:hover a{color:var(--blue);}
/* =========================================================
7. Section blocks
========================================================= */
.block{padding:28px 0;border-top:1px solid var(--line);}
.block-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.block-head h2{font-size:23px;margin:0;position:relative;padding-left:14px;}
.block-head h2::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:5px;background:var(--red);}
.block-head .more{font-size:13px;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:.4px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.block-split{display:grid;grid-template-columns:1.25fr 1fr;gap:34px;align-items:start;}
.block-split .lead{margin-bottom:0;}
.block-split .lead .thumb{aspect-ratio:16/9;}
.block-split .lead h3{font-size:22px;line-height:1.2;margin-top:12px;}
.block-split .lead:hover h3{color:var(--blue);}
.block-split .lead .excerpt{margin-top:6px;}
.lead-list{align-self:start;}
/* =========================================================
8. Videos (dark)
========================================================= */
.section-videos{background:var(--dark);color:#fff;padding:44px 0 50px;border-top:6px solid var(--red);margin-top:10px;}
.section-videos .videos-title{margin:0 0 26px;font-size:34px;font-weight:800;letter-spacing:-.5px;}
.section-videos .videos-title a{color:#fff;display:inline-flex;align-items:center;gap:10px;}
.section-videos .videos-title a:hover{color:#ffb3b3;}
.section-videos .videos-title svg{transition:transform .2s ease;}
.section-videos .videos-title a:hover svg{transform:translateX(4px);}
.section-videos .grid-3{gap:28px;}
.section-videos .card .thumb{border-radius:0;}
.section-videos .card .title{color:#fff;font-size:19px;line-height:1.3;margin-top:14px;}
.section-videos .card:hover .title{color:#ffb3b3;}
.section-videos .card .meta{color:#8a95a5;}
.section-videos .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.section-videos .play span{width:52px;height:52px;border-radius:50%;background:rgba(0,0,0,.55);
border:2px solid #fff;color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;}
/* =========================================================
9. Single article
========================================================= */
.single-wrap{display:grid;grid-template-columns:1fr 320px;gap:44px;padding:28px 0 50px;}
.article-header{max-width:760px;margin:0 auto 4px;}
.breadcrumb{font-size:12.5px;color:var(--muted);margin-bottom:14px;}
.breadcrumb a:hover{color:var(--blue);}
.article-header .badge{margin-bottom:12px;}
.entry-title{font-size:38px;line-height:1.13;margin:8px 0 14px;}
.entry-lead{font-size:20px;color:var(--ink-soft);font-weight:400;line-height:1.4;margin-bottom:18px;}
.entry-meta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;font-size:13.5px;color:var(--muted);
border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0;margin-bottom:22px;}
.entry-meta .author{color:var(--ink);font-weight:700;}
.entry-featured{margin:0 0 8px;}
.entry-featured figcaption{font-size:12.5px;color:var(--muted);padding:7px 2px;}
.entry-content{font-size:18px;line-height:1.75;color:#23282d;max-width:760px;margin:0 auto;}
.entry-content p{margin:0 0 1.15em;}
.entry-content h2{font-size:27px;margin:1.4em 0 .5em;}
.entry-content h3{font-size:22px;margin:1.3em 0 .4em;}
.entry-content img{margin:1.2em auto;border-radius:var(--radius);}
.entry-content a{color:var(--blue);text-decoration:underline;text-underline-offset:2px;}
.entry-content blockquote{border-left:4px solid var(--blue);background:var(--bg-soft);
margin:1.4em 0;padding:14px 20px;font-style:italic;color:var(--ink-soft);}
.entry-content figure{margin:1.4em 0;}
.share{display:flex;gap:10px;align-items:center;margin:26px 0;flex-wrap:wrap;}
.share .lbl{font-weight:700;font-family:var(--font-head);font-size:14px;}
.share a{width:38px;height:38px;border-radius:50%;background:var(--blue);color:#fff;display:flex;
align-items:center;justify-content:center;font-size:15px;font-weight:700;}
.share a:hover{background:var(--blue-dark);}
.tags{margin:22px 0;display:flex;flex-wrap:wrap;gap:8px;}
.tags a{font-size:12.5px;background:var(--bg-soft);border:1px solid var(--line);padding:5px 11px;border-radius:20px;color:var(--ink-soft);}
.tags a:hover{border-color:var(--blue);color:var(--blue);}
/* related */
.related{border-top:1px solid var(--line);padding-top:24px;margin-top:30px;}
/* =========================================================
10. Sidebar / widgets
========================================================= */
.sidebar .widget{margin-bottom:30px;}
.widget-title{font-family:var(--font-head);font-size:17px;text-transform:uppercase;letter-spacing:.4px;
color:var(--ink);border-bottom:2px solid var(--blue);padding-bottom:8px;margin-bottom:14px;}
/* =========================================================
11. Archive header
========================================================= */
.page-hero{background:var(--bg-soft);border-bottom:1px solid var(--line);padding:26px 0;margin-bottom:24px;}
.page-hero h1{font-size:30px;margin:0;position:relative;padding-left:16px;}
.page-hero h1::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:6px;background:var(--red);}
.page-hero p{margin:8px 0 0;color:var(--muted);}
.archive-grid{display:grid;grid-template-columns:1fr 320px;gap:44px;padding-bottom:44px;}
.posts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
/* pagination */
.pagination{display:flex;gap:6px;flex-wrap:wrap;margin:30px 0;justify-content:center;}
.pagination .page-numbers{display:inline-flex;min-width:40px;height:40px;align-items:center;justify-content:center;
padding:0 12px;border:1px solid var(--line);font-weight:700;color:var(--ink);border-radius:var(--radius);}
.pagination .page-numbers.current{background:var(--blue);color:#fff;border-color:var(--blue);}
.pagination a.page-numbers:hover{border-color:var(--blue);color:var(--blue);}
/* =========================================================
11b. Page Contact + formulaire
========================================================= */
.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:44px;padding:6px 0 54px;align-items:start;}
.contact-intro{font-size:16px;color:var(--ink-soft);margin-bottom:22px;}
.contact-coords{border-top:1px solid var(--line);}
.contact-coords li{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--line);}
.contact-coords .ci-ico{width:38px;height:38px;flex:0 0 auto;border-radius:50%;background:var(--bg-soft);color:var(--blue);
display:flex;align-items:center;justify-content:center;font-size:17px;}
.contact-coords .ci-l{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);margin-bottom:2px;}
.contact-coords a{font-weight:700;color:var(--ink);}
.contact-coords a:hover{color:var(--blue);}
.contact-form-wrap{background:var(--bg-soft);border:1px solid var(--line);border-radius:8px;padding:26px 26px 30px;}
.contact-form-wrap h2{font-size:22px;margin-bottom:16px;}
.contact-form label{display:block;font-weight:700;font-size:13.5px;color:var(--ink-soft);margin-bottom:14px;}
.contact-form .req{color:var(--red-live);}
.contact-form input,.contact-form textarea{width:100%;margin-top:6px;padding:11px 13px;border:1px solid var(--line);
border-radius:var(--radius);font:inherit;font-weight:400;background:#fff;color:var(--ink);}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(11,90,162,.12);}
.contact-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.contact-form .idc-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.btn-submit{background:var(--blue);color:#fff;border:0;padding:13px 26px;border-radius:var(--radius);
font-family:var(--font-head);font-weight:700;font-size:15px;letter-spacing:.3px;cursor:pointer;}
.btn-submit:hover{background:var(--blue-dark);}
.form-legal{font-size:12px;color:var(--muted);margin:12px 0 0;}
.form-note{padding:13px 16px;border-radius:var(--radius);margin-bottom:18px;font-weight:600;font-size:14.5px;}
.form-note.form-success{background:#e7f5ec;border:1px solid #b7e0c4;color:#1a7a3c;}
.form-note.form-error{background:#fdecec;border:1px solid #f3c2c2;color:#c0392b;}
@media(max-width:820px){ .contact-grid{grid-template-columns:1fr;gap:28px;} .contact-form .form-row{grid-template-columns:1fr;} }
/* =========================================================
12. Footer
========================================================= */
.site-footer{background:var(--dark);color:#aab4c2;margin-top:10px;}
.footer-top{border-top:4px solid var(--blue);padding:40px 0 30px;}
.footer-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px;}
.footer-brand .logo{font-size:24px;margin-bottom:14px;color:#fff;display:inline-block;line-height:0;}
.footer-brand a.logo:has(.footer-logo-img){background:#fff;padding:9px 14px;border-radius:8px;}
.footer-brand .logo .footer-logo-img{max-height:46px;width:auto;max-width:240px;height:auto;}
.footer-brand .logo .l-infos,.footer-brand .logo .l-continent{color:#fff;}
.footer-brand p{font-size:13.5px;line-height:1.6;}
.footer-cols h4{color:#fff;font-size:15px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:14px;}
.footer-cols a{display:block;padding:5px 0;font-size:13.5px;}
.footer-cols a:hover{color:#fff;}
.footer-contact{margin:14px 0 4px;}
.footer-contact li{display:flex;align-items:center;gap:9px;padding:4px 0;font-size:13.5px;}
.footer-contact .fc-ico{color:var(--blue-light);font-size:14px;width:16px;text-align:center;flex:0 0 auto;}
.footer-contact a{color:#c3ccd8;}
.footer-contact a:hover{color:#fff;}
.footer-social{display:flex;gap:10px;margin-top:14px;}
.footer-credit a{color:var(--blue-light);font-weight:700;}
.footer-credit a:hover{color:#fff;text-decoration:underline;}
.footer-social a{width:36px;height:36px;border-radius:50%;background:var(--dark-2);color:#fff;
display:flex;align-items:center;justify-content:center;font-weight:700;}
.footer-social a:hover{background:var(--blue);}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:16px 0;font-size:12.5px;}
.footer-bottom .wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 20px;}
.footer-nav{display:flex;flex-wrap:wrap;gap:6px 18px;}
.footer-nav a{color:#c3ccd8;}
.footer-nav a:hover{color:#fff;}
/* =========================================================
13. Search overlay
========================================================= */
.search-overlay{position:fixed;inset:0;background:rgba(6,44,80,.97);z-index:200;display:none;
align-items:flex-start;justify-content:center;padding-top:16vh;}
.search-overlay.open{display:flex;}
.search-overlay form{width:min(680px,90%);}
.search-overlay input[type=search]{width:100%;font-size:26px;padding:16px 6px;background:transparent;
border:0;border-bottom:2px solid rgba(255,255,255,.5);color:#fff;font-family:var(--font-head);}
.search-overlay input::placeholder{color:rgba(255,255,255,.6);}
.search-overlay .close{position:absolute;top:24px;right:30px;background:none;border:0;color:#fff;font-size:34px;}
.search-overlay .hint{color:rgba(255,255,255,.7);margin-top:14px;font-size:14px;}
/* =========================================================
14. Mobile nav
========================================================= */
.menu-toggle{display:none;background:none;border:0;font-size:24px;color:var(--ink);padding:6px;}
@media(max-width:960px){
.hero-grid{grid-template-columns:1fr;}
.single-wrap,.archive-grid{grid-template-columns:1fr;gap:28px;}
.grid-4{grid-template-columns:repeat(2,1fr);}
.posts-grid{grid-template-columns:repeat(2,1fr);}
.block-split{grid-template-columns:1fr;}
}
@media(max-width:720px){
.menu-toggle{display:block;}
.nav-primary{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 14px 30px rgba(0,0,0,.12);}
.nav-primary.open{display:block;}
.nav-primary ul{flex-direction:column;}
.nav-primary li{width:100%;border-bottom:1px solid var(--line);}
.grid-3,.grid-4,.posts-grid,.hero-sub{grid-template-columns:1fr 1fr;}
.entry-title{font-size:28px;}
.hero-lead h2{font-size:25px;}
.entry-content{font-size:17px;}
.footer-cols{grid-template-columns:1fr 1fr;gap:24px;}
}
@media(max-width:480px){
.grid-3,.grid-4,.posts-grid,.hero-sub{grid-template-columns:1fr;}
.footer-cols{grid-template-columns:1fr;}
.logo{font-size:22px;}
.card.row{grid-template-columns:96px 1fr;}
}
/* =========================================================
15. Direct TV — bouton, surimpression, page /direct/
========================================================= */
/* Pilule du direct */
.live-btn{display:inline-flex;align-items:center;gap:7px;background:var(--ink);color:#fff;
font-family:var(--font-head);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.5px;
padding:7px 13px;border-radius:100px;line-height:1;white-space:nowrap;transition:background .2s ease;}
.live-btn:hover{background:var(--blue);color:#fff;}
.live-btn .live-dot{width:8px;height:8px;border-radius:50%;background:#fff;flex:0 0 auto;}
/* Emplacement dans la barre de menu (ordinateur) : poussé à droite. La barre
étant collante, le bouton reste visible pendant tout le défilement.
Les règles sont scopées sous .nav-primary : le bouton est un dans cette
barre, et « .nav-primary a » (0,1,1) l'emporterait sinon sur « .live-btn » —
c'est ce qui lui imposerait la taille et la couleur des liens du menu. */
.nav-primary .wrap{display:flex;align-items:center;gap:12px;}
.nav-primary .wrap>ul{flex:1 1 auto;min-width:0;}
.nav-primary .live-btn--nav{display:inline-flex;flex:0 0 auto;margin-left:auto;
padding:6px 13px;font-size:12.5px;color:#fff;border-radius:100px;}
.nav-primary .live-btn--nav:hover{color:#fff;}
.live-btn--tools{display:none;} /* doublon réservé au mobile */
/* À l'antenne : rouge, point pulsant */
.live-btn.is-live{background:var(--red);}
.live-btn.is-live:hover{background:var(--red-dark);}
.live-btn.is-live .live-dot{animation:idc-pulse 1.6s ease-in-out infinite;}
@keyframes idc-pulse{
0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(255,255,255,.7);}
50%{opacity:.65;box-shadow:0 0 0 5px rgba(255,255,255,0);}
}
@media(prefers-reduced-motion:reduce){ .live-btn.is-live .live-dot{animation:none;} }
/* Étiquette d'état (surimpression et page dédiée) */
.live-state{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-head);font-weight:700;
font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);}
.live-state .live-dot{width:8px;height:8px;border-radius:50%;background:var(--muted);}
.live-state.is-live{color:var(--red);}
.live-state.is-live .live-dot{background:var(--red);animation:idc-pulse 1.6s ease-in-out infinite;}
@media(prefers-reduced-motion:reduce){ .live-state.is-live .live-dot{animation:none;} }
/* Surimpression */
body.live-open{overflow:hidden;}
.live-modal{position:fixed;inset:0;z-index:300;background:rgba(6,20,36,.92);
display:flex;align-items:center;justify-content:center;padding:20px;}
.live-modal[hidden]{display:none;}
/* La largeur est aussi bornée par la hauteur disponible : sur un écran bas
(portable, paysage mobile), le lecteur 16/9 déborderait et couperait
le titre et le pied de la fenêtre. */
.live-modal-inner{width:min(1080px,100%,calc((100vh - 152px) * 16 / 9));
max-height:100%;background:var(--dark);border-radius:var(--radius);
overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5);}
.live-modal-head{display:flex;align-items:center;gap:14px;padding:14px 18px;background:var(--dark-2);}
.live-modal-head h2{margin:0;flex:1;font-size:17px;color:#fff;line-height:1.2;}
.live-modal-head .live-state{color:rgba(255,255,255,.65);}
.live-modal-head .live-state .live-dot{background:rgba(255,255,255,.65);}
.live-modal-head .live-state.is-live{color:#ff5b64;}
.live-modal-head .live-state.is-live .live-dot{background:#ff5b64;}
.live-close{background:none;border:0;color:#fff;font-size:30px;line-height:1;padding:0 4px;opacity:.8;}
.live-close:hover{opacity:1;}
.live-modal-foot{padding:12px 18px;background:var(--dark-2);font-size:13.5px;}
.live-modal-foot a{color:#7fbcf3;font-weight:600;}
.live-modal-foot a:hover{color:#fff;}
/* Conteneur du lecteur (16/9, sans saut de mise en page) */
.live-frame{position:relative;aspect-ratio:16/9;background:#000;}
.live-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
/* Page /direct/ */
.live-page{padding:26px 0 50px;}
.live-page-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px;}
.live-page-head h1{margin:0;font-size:32px;}
/* Le lecteur est borné pour que l'état, le titre et le bouton de lecture
tiennent dans un écran sans défilement. Le plancher de 560 px évite qu'il
devienne minuscule sur un mobile en paysage. */
.live-player{background:#000;border-radius:var(--radius);overflow:hidden;margin:0 auto;
max-width:min(100%,max(560px,calc((100vh - 260px) * 16 / 9)));}
.live-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.live-play{position:absolute;inset:0;width:100%;height:100%;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:10px;background:rgba(6,20,36,.45);border:0;color:#fff;
transition:background .2s ease;}
.live-play:hover{background:rgba(6,20,36,.25);}
.live-play-ico{display:flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;
background:var(--red);font-size:26px;padding-left:5px;box-shadow:0 10px 30px rgba(0,0,0,.4);}
.live-play-txt{font-family:var(--font-head);font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.6px;}
.live-offline{margin:16px 0 0;padding:14px 16px;background:var(--bg-soft);border-left:3px solid var(--blue);
color:var(--ink-soft);font-size:15px;}
.live-intro{margin-top:24px;}
@media(max-width:720px){
/* La barre de menu se replie derrière le bouton ☰ : le direct bascule
dans les outils d'en-tête pour rester atteignable en un geste. */
.nav-primary .live-btn--nav{display:none;}
.live-btn--tools{display:inline-flex;}
.live-page-head h1{font-size:24px;}
.live-play-ico{width:58px;height:58px;font-size:21px;}
.live-modal{padding:0;align-items:stretch;}
.live-modal-inner{width:100%;align-self:center;border-radius:0;}
}
@media(max-width:480px){
/* Sous 480 px, le bouton se réduit au point rouge pour laisser respirer
l'en-tête. 40 px de côté : cible tactile confortable au pouce. */
.live-btn--tools{padding:0;gap:0;width:40px;height:40px;justify-content:center;}
.live-btn .live-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
.live-btn .live-dot{width:10px;height:10px;}
}
/* =========================================================
Bouton WhatsApp flottant
========================================================= */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:999;width:60px;height:60px;border-radius:50%;
background:#25d366;display:flex;align-items:center;justify-content:center;
box-shadow:0 4px 14px rgba(0,0,0,.25);transition:transform .2s ease,box-shadow .2s ease;}
.wa-float:hover{transform:scale(1.08);box-shadow:0 8px 22px rgba(0,0,0,.3);}
@media (max-width:640px){.wa-float{width:54px;height:54px;right:16px;bottom:16px;}}
@media print{.wa-float{display:none;}}