/* ===== Variables (adapte au besoin) ===== */
:root{
--color-primary: #0f70b7;
--color-secondary: #000;
--color-bg: #fff;
--menu-color: #fff;
--menu-active: var(--color-primary);
/* Hauteurs cibles (pour le calcul du hero) */
--thumbs-h: 104px;
--ticker-gap: 8px;
--stack-gap: clamp(10px, 2.5vh, 22px);
}
@media (min-width: 576px){ :root{ --thumbs-h: 112px; } }
@media (min-width: 992px){ :root{ --thumbs-h: 124px; } }
/* ===== Header wrapper (fixed + transition) ===== */
.wv-header{
position: absolute; top: 0; left: 0; right: 0; z-index: 1030;
background: transparent;
transition: background .25s ease, box-shadow .25s ease, padding .2s;
padding: 1rem .75rem .5rem;
transition: all .3s ease;
}
.wv-header.is-sticky{
position: fixed;
top: 0;
background: var(--color-secondary);
box-shadow: 0 0 10px rgba(0,0,0,.2);
}
/* ===== Logo ===== */
.wv-header .ed-logo img{ width: auto; height: 220px; display: block; }
@media (max-width: 575.98px){ .wv-header .ed-logo img{ height: 200px; } }
/* ===== Menu ===== */
.ed-menu{ margin: 2rem 0 1rem; padding: 0; }
.ed-menu .menu-level-0{
list-style: none; margin: 0; padding: 0;
display: flex; gap: 1.25rem; align-items: center; justify-content: center;
text-transform: uppercase;
}
.ed-menu a{
color: var(--menu-color); text-decoration: none;
font-weight: 400; font-size: 1rem; padding: 1rem .25rem;
position: relative; display: inline-block;
}
.ed-menu a::after{
content:""; position:absolute; left:0; right:0; bottom:.5rem;
height:3px; background: transparent; transition: background .15s ease;
}
.ed-menu a:hover::after{ background: var(--menu-active); }
.ed-menu a.active{ color: var(--menu-active); }
.wv-header.is-sticky .ed-menu a{ color: #fff; }
.wv-header.is-sticky .ed-menu a.active{ color: var(--menu-active); }
/* ===== Mobile trigger ===== */
.ed-mobile{ display:flex; align-items:center; gap: 1rem; margin-left: auto; }
.menu-trigger{
background: transparent; color:#fff; border:none; padding:0 0 10px; cursor:pointer; font-size:.95rem;
}
.wv-header.is-sticky .menu-trigger{ color:#fff; }
/* Icônes tel/pin */
.ed-icon{ width:28px; height:28px; display:inline-block; background: var(--color-primary); border-radius:50%; position:relative; }
.ed-icon.phone::before,
.ed-icon.pin::before{
content:""; position:absolute; inset:0; margin:auto; width:16px; height:16px; mask-size:contain; mask-repeat:no-repeat; mask-position:center; background:#000;
}
.ed-icon.phone::before{ mask-image:url('data:image/svg+xml;utf8,'); }
.ed-icon.pin::before{ mask-image:url('data:image/svg+xml;utf8,'); }
/* ===== Menu mobile (slide-in) ===== */
@media (max-width: 991.98px){
.ed-menu{
position: fixed; inset: 0 0 0 auto; width: 78%;
background: var(--color-secondary); padding: 2rem; transform: translateX(100%);
transition: transform .3s ease; box-shadow:-8px 0 24px rgba(0,0,0,.35);
display: block; margin: 0;
}
.ed-menu.open{ transform: translateX(0); }
.ed-menu .menu-level-0{ flex-direction: column; gap: .25rem; align-items:flex-start; }
.ed-menu a{ color:#fff; font-size: 1rem; padding: .75rem 0; }
.ed-menu a::after{ bottom: 0; }
}
/* ===== HERO ===== */
.hero-une{ position: relative; padding: 0; margin: 0; }
.hero-une .container, .hero-une .container-fluid{ padding-left:0; padding-right:0; }
#hero-swiper{ position: relative; border-radius: 0 !important; }
.hero-slide{
position: relative;
min-height: var(--hero-h, 65vh); /* hauteur dynamique (calculée en JS) */
color:#fff; background:#000;
}
.hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.9; }
.hero-grad{
position:absolute; inset:0;
background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.75) 100%);
}
.hero-content{
position:absolute; left:0; right:0; bottom:0;
padding: clamp(14px, 3.5vw, 32px);
}
.hero-meta{
display:flex; gap:.5rem; align-items:center; opacity:.9; margin-bottom:.35rem; flex-wrap:wrap;
}
.hero-meta .badge{ background:rgba(255,255,255,.2); backdrop-filter:blur(3px); }
.hero-title{ margin-top:50px; color:#fff; font-size:clamp(1.25rem, 2.2vw, 2rem); font-weight:700; margin:0 0 .5rem; line-height:1.15; }
.hero-cta .btn{ border-radius: 0 !important; }
.hero-nav{ position:absolute; right:12px; top: calc(var(--header-stack-h, 0px) + var(--stack-gap)); z-index: 1000; pointer-events:auto;}
#hero-pagination{ position:absolute; left:0; right:0; bottom:8px; z-index:10; }
/* ===== Thumbs ===== */
#hero-thumbs{ padding-bottom:.25rem; }
#hero-thumbs .swiper-wrapper{ align-items: stretch; }
#hero-thumbs .swiper-slide{ height: var(--thumbs-h); }
.thumb-slide{ height: 100%; border-radius:.6rem; overflow:hidden; position:relative; cursor:pointer; }
.thumb-slide img{ width:100%; height:100%; object-fit:cover; transform:scale(1.02); }
.thumb-caption{
position:absolute; inset:auto 0 0 0; padding:.35rem .5rem; font-size:.8rem; color:#fff;
background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.65) 100%);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.swiper-slide-thumb-active .thumb-caption{ background:rgba(13,110,253,.7); }
/* ===== Ticker ===== */
:root{
/* Durée d’un cycle complet du défilement (plus grand = plus lent) */
--ticker-speed: 120s; /* ex: 60s = ~2x plus lent que 30s */
}
.breaking-ticker{
/* 1) espace apparent et responsive entre le menu (header) et le ticker */
margin-top: clamp(10px, 2.5vh, 22px);
/* 2) fond sombre semi-transparent + texte blanc */
background: rgba(255,255,255,.50);
color: #fff;
/* petite ligne de séparation très discrète */
border-bottom: 1px solid rgba(255,255,255,.12);
/* hauteur verticale compacte mais lisible */
padding: .45rem 0;
}
.breaking-ticker .badge{
/* badge discret sur fond sombre */
background: rgba(255,255,255,.18);
color:#fff;
border: 1px solid rgba(255,255,255,.26);
border-radius:.5rem;
}
.ticker-viewport{
position:relative;
overflow:hidden;
height:28px;
}
.ticker-track{
white-space:nowrap;
will-change:transform;
display:inline-block;
/* 3) VITESSE DU DÉFILEMENT ICI (utilise la variable ci-dessus) */
animation: ticker-scroll var(--ticker-speed) linear infinite;
}
.ticker-track:hover{
animation-play-state: paused; /* pause au survol */
}
.ticker-item{
display:inline-flex;
align-items:center;
gap:.5rem;
margin-right:1.25rem;
}
.ticker-item a{
/* textes blancs pour contraste élevé */
color:#fff;
text-decoration:none;
}
.ticker-item a:hover{
text-decoration:underline;
opacity:.9;
}
.ticker-dot{
width:6px; height:6px; border-radius:50%;
background:#fff; opacity:.6; display:inline-block; margin-right:.25rem;
}
/* animation inchangée (inévitable pour la boucle fluide) */
@keyframes ticker-scroll{
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ===== Cartes & sliders secondaires ===== */
.news-card{
border:0; border-radius:1rem; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,.08);
background:#fff; height:100%; transition:transform .15s ease, box-shadow .15s ease;
}
.news-card:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.12); }
.news-img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.news-body{ padding:.9rem 1rem; }
.news-title{ font-size:.98rem; line-height:1.2; margin:0 0 .35rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.news-meta{ font-size:.8rem; color:#6c757d; }
.swiper{ padding-bottom: 36px; } /* place pour la pagination */
.swiper-controls .btn{ border-radius:.6rem; }
.hero-slide{ min-height: var(--hero-h, 60vh) !important; }
/* (optionnel) si tu utilises aussi .news-card ailleurs, on durcit légèrement son ombre pour l’harmonie */
.news-card{
box-shadow: 0 10px 24px rgba(0,0,0,.12);
}
.news-card:hover{
box-shadow: 0 16px 36px rgba(0,0,0,.16);
}
/* ===== Icônes header compact ===== */
.ed-icons{
display:flex; align-items:center; gap:.5rem; margin-left:auto;
}
.ed-icon{
width:32px; height:32px; display:inline-block;
background: var(--color-primary);
border-radius:50%; position:relative;
transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.ed-icon::before{
content:""; position:absolute; inset:0; margin:auto; width:18px; height:18px;
mask-size:contain; mask-repeat:no-repeat; mask-position:center;
background:#fff; /* pictogramme blanc */
}
.ed-icon:hover{ transform: translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.25); }
/* Pictos (Bootstrap-like via mask SVG) */
.ed-icon.home::before{
/* house-fill */
mask-image:url('data:image/svg+xml;utf8,');
}
.ed-icon.phone::before{
/* telephone-fill */
mask-image:url('data:image/svg+xml;utf8,');
}
.ed-icon.pin::before{
/* geo-alt-fill */
mask-image:url('data:image/svg+xml;utf8,');
}
/* visibilité: on veut les icônes partout, donc pas de d-none en mobile */
@media (max-width: 575.98px){
.ed-icons{ gap:.4rem; }
.ed-icon{ width:30px; height:30px; }
}
/* si header sticky, on garde la même lisibilité */
.wv-header.is-sticky .ed-icon{ background: var(--color-primary); }
/* ===== Bloc Publicités & Annonces (sidebar bas) ===== */
.widget-pro {
border: 1px solid rgba(0,0,0,.06);
border-radius: 1rem;
background: #fff;
box-shadow: 0 8px 20px rgba(0,0,0,.06);
overflow: hidden;
}
.widget-pro .nav-pills {
background: linear-gradient(180deg, rgba(15,112,183,.08), rgba(15,112,183,.02));
padding: .5rem;
gap: .35rem;
}
.widget-pro .nav-pills .nav-link {
border-radius: .6rem;
font-weight: 600;
letter-spacing: .2px;
}
.widget-pro .nav-pills .nav-link.active {
background: var(--color-primary);
}
.widget-pro .tab-content {
padding: .75rem .75rem 1rem;
}
/* Cartes pubs (bannières & carrés) */
.ad-card {
position: relative;
border-radius: .8rem;
overflow: hidden;
border: 1px solid rgba(0,0,0,.06);
background: #fff;
transition: transform .15s ease, box-shadow .15s ease;
}
.ad-card:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(0,0,0,.12); }
.ad-card img { display: block; width: 100%; height: auto; }
.ad-card .ad-meta {
position: absolute; left: .5rem; top: .5rem;
background: rgba(0,0,0,.65); color:#fff; font-size:.75rem;
padding:.15rem .4rem; border-radius:.35rem;
}
/* Liste d’annonces (mini-cards) */
.annonce-item {
display: flex; gap: .65rem; align-items: center;
border: 1px solid rgba(0,0,0,.06);
border-radius: .8rem; padding: .5rem; background: #fff;
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.annonce-item:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(0,0,0,.08); border-color: rgba(15,112,183,.25); }
.annonce-thumb {
width: 84px; height: 64px; border-radius: .6rem; overflow: hidden; flex: 0 0 84px;
background: #f2f2f2; display: grid; place-items: center;
}
.annonce-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.annonce-body { min-width: 0; }
.annonce-title {
font-size: .95rem; font-weight: 700; margin: 0 0 .15rem; line-height: 1.2;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.annonce-meta {
font-size: .8rem; color: #6c757d; display: flex; gap: .5rem; flex-wrap: wrap;
}
.annonce-price { font-weight: 700; color: #0f70b7; }
.badge-soft {
background: rgba(15,112,183,.1); color: #0f70b7;
border: 1px solid rgba(15,112,183,.2);
padding: .15rem .45rem; border-radius: .5rem; font-size: .72rem; font-weight: 600;
}
/* Grille compacte */
#ads-list { display: grid; gap: .65rem; }
#annonces-list { display: grid; gap: .55rem; }
/* CTA bas */
.widget-pro .panel-footer {
margin-top: .65rem; padding-top: .65rem;
border-top: 1px dashed rgba(0,0,0,.12);
display: flex; justify-content: space-between; align-items: center; gap: .5rem;
}
/* ===== HERO & THUMBS: cadrage depuis le haut ===== */
.hero-img{
object-fit: cover !important;
object-position: top center !important; /* aligne le point focal en haut */
}
/* Miniatures sous le hero */
#hero-thumbs .thumb-slide img{
object-fit: cover !important;
object-position: top center !important; /* évite de couper les visages */
transform: scale(1.02); /* on garde ton léger zoom existant */
}
/* (optionnel) si tu veux aussi imposer le cadrage top sur les cartes slider secondaires */
.news-img{
object-fit: cover !important;
object-position: top center !important;
}
/* ===== SIDEBAR: “Dernières nouvelles” uniformisées ===== */
/* Mise en page propre et stable */
.recent-posts-widget .post-item{
display: flex;
align-items: center;
gap: .65rem;
margin-bottom: .65rem; /* petit rythme vertical */
}
/* On impose une **même dimension** (3:2) à toutes les images */
.recent-posts-widget .post-item img{
width: 96px; /* largeur fixe */
height: 64px; /* hauteur fixe = 3:2 */
flex: 0 0 96px; /* réserve l’espace, évite les sauts */
border-radius: .5rem; /* coins doux */
object-fit: cover; /* recadrage propre */
object-position: top center; /* part toujours du haut */
background: #f1f3f5; /* fond neutre si image lente à charger */
}
/* Petites finitions de texte pour 2 lignes max et une date nette */
.recent-posts-widget .post-item h4{
font-size: .92rem;
line-height: 1.2;
margin: 0 0 .15rem 0;
display: -webkit-box;
-webkit-line-clamp: 2; /* max 2 lignes */
-webkit-box-orient: vertical;
overflow: hidden;
}
.recent-posts-widget .post-item time{
display: inline-block;
font-size: .8rem;
color: #6c757d;
}
/* ===========================
MITALA NEWS — Thème orange/blanc/noir
Override de la home pour s’aligner sur blog-details
=========================== */
:root {
/* Couleurs de base */
--background-color: #ffffff;
--surface-color: #ffffff;
--default-color: #222222;
--heading-color: #0f0f0f;
--accent-color: #ff9900;
--contrast-color: #ffffff;
/* Navigation */
--nav-color: #ffffff;
--nav-hover-color: #ff9900;
--nav-mobile-background-color: #000;
--nav-dropdown-background-color: #ffffff;
--nav-dropdown-color: #111111;
--nav-dropdown-hover-color: #ff9900;
/* Pour les morceaux déjà en place dans la home */
--color-primary: #ff9900; /* remplace ton bleu */
--color-secondary: #000000; /* header sticky / fond sombre */
--color-bg: #ffffff;
--menu-color: #ffffff;
--menu-active: #ff9900;
}
/* ===== Header (même logique que blog-details) ===== */
.wv-header,
.header {
background:#464343;
}
.wv-header.is-sticky,
.header.scrolled {
background: #000;
box-shadow: 0 4px 26px rgba(0,0,0,.25);
}
/* Icônes du header */
.ed-icons .ed-icon,
.wv-header.is-sticky .ed-icon {
background: #ff9900;
}
/* ===== Ticker flash ===== */
.breaking-ticker{
background: rgba(0,0,0,.25);
border-bottom: 1px solid rgba(255,153,0,.25);
}
.breaking-ticker .badge{
background: rgba(255,153,0,.95);
border: 1px solid rgba(0,0,0,.12);
color: #000;
}
.breaking-ticker .ticker-item a{
color:#fff;
}
/* ===== Hero nav (flèches) ===== */
.hero-nav .btn{
background:#000;
border:1px solid rgba(255,153,0,.45);
color:#fff;
}
.hero-nav .btn:hover{
background:#ff9900;
color:#000;
}
/* ===== Pagination Swiper du hero ===== */
#hero-pagination .swiper-pagination-bullet{
background: rgba(181, 111, 5, 0.25);
opacity: 1;
}
#hero-pagination .swiper-pagination-bullet-active{
background: #ff9900;
opacity: 1;
transform: scale(1.05)
}
/* ====== Boutons généraux ====== */
.btn,
.btn-primary,
.search-widget form button,
.pagination .page-link {
background: #ff9900;
border-color: #ff9900;
color: #fff;
}
.btn:hover,
.btn-primary:hover,
.search-widget form button:hover {
background: #e78100;
border-color: #e78100;
}
/* ====== Cards actu (colonne principale) ====== */
#posts-grid article {
background:#f7f5f2 !important;
border: 1px solid rgba(255,153,0,.08);
box-shadow: 0 10px 28px rgba(0,0,0,.04) !important;
}
#posts-grid article h2.title a{
color:#0f0f0f;
}
#posts-grid article .meta-top i{
color:#ff9900;
}
/* ====== Pagination bas de liste ====== */
.pagination .page-link{
color:#fff;
}
.pagination .page-item.disabled .page-link{
background:#fff;
color:#999;
border-color: rgba(0,0,0,.08);
}
/* ====== Sidebar / widgets ====== */
.widgets-container {
margin-top: 30px !important;
}
.widgets-container,
.widget-item,
.widget-pro {
background:#ffffff;
border:1px solid rgba(0,0,0,.03);
box-shadow:0 10px 28px rgba(0,0,0,.04);
}
.widget-title{
border-left:4px solid #ff9900;
padding-left:.5rem;
}
.search-widget form{
border:1px solid rgba(255,153,0,.45);
}
.recent-posts-widget .post-item time{
color:rgba(0,0,0,.45);
}
/* ====== Bloc pubs/annonces (tabs) ====== */
.widget-pro .nav-pills .nav-link.active{
background:#ff9900;
}
.badge-soft{
background: rgba(255,153,0,.1);
color:#ff9900;
border:1px solid rgba(255,153,0,.25);
}
/* ====== News cards sliders ("International") ====== */
.news-card{
border:1px solid rgba(255,153,0,.10);
}
.news-card:hover{
box-shadow:0 10px 26px rgba(255,153,0,.15);
}
/* ====== Scroll Top ====== */
#scroll-top,
.scroll-top {
background: #ff9900 !important;
}
#scroll-top:hover,
.scroll-top:hover {
background: #e78100 !important;
}
/* ====== Footer ====== */
.footer.dark-background,
.footer {
background:#000;
color:#fff;
}
.footer a:hover{
color:#ff9900;
}
/* ====== Petits badges / métas (même ton qu'article) ====== */
.badge,
.hero-meta .badge{
background: rgba(255,153,0,.12);
color:#ff9900;
border:1px solid rgba(255,153,0,.28);
}
/* ===== Boutons header MITALA ===== */
/* état normal (en haut de page) */
.ed-icons .ed-icon {
background: #ff9900; /* rond orange */
}
.ed-icons .ed-icon::before {
background: #fff; /* picto blanc */
}
/* état sticky (après scroll) */
.wv-header.is-sticky .ed-icons .ed-icon {
background: #ff9900; /* on garde le même orange */
}
.wv-header.is-sticky .ed-icons .ed-icon::before {
background: #000; /* picto noir */
}
/* optionnel : petit hover */
.ed-icons .ed-icon:hover {
box-shadow: 0 6px 16px rgba(0,0,0,.25);
transform: translateY(-1px);
}
/* === 1. Flèches du hero (navigation slider) === */
.hero-nav .btn {
background: rgba(255, 255, 255, .3); /* blanc avec transparence */
backdrop-filter: blur(1px); /* petit flou joli si dispo */
border: 1px solid rgba(255, 255, 255, .45);
color: #000; /* icône noire lisible */
box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.hero-nav .btn:hover {
background: #ff9900; /* survol = charte */
border-color: #ff9900;
color: #000;
}
/* === 2. Badges de catégorie (PLUS DE BLEU) === */
/* badges Bootstrap qui arrivent du JS: .text-bg-primary, .bg-primary, etc. */
.hero-content .badge,
.badge.text-bg-primary,
.badge.bg-primary {
background: rgba(255, 255, 255, .3) !important; /* orange MITALA */
color: rgba(255, 255, 255) !important; /* texte lisible */
border: 1px solid rgba(0,0,0,.05);
}
/* si tu as d’autres badges dans la méta du hero */
.hero-meta .badge {
background: rgba(255,153,0,.12);
color: #ff9900;
border: 1px solid rgba(255,153,0,.25);
}
/* ===== Bouton retour en haut (MITALA) ===== */
#scroll-top,
.scroll-top {
position: fixed;
right: 16px;
bottom: 18px;
width: 44px;
height: 44px;
background: #ff9900;
color: #000;
border-radius: .85rem;
box-shadow: 0 10px 28px rgba(0,0,0,.25);
z-index: 9999;
opacity: 0;
visibility: hidden;
transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
font-size: 1.55rem;
}
#scroll-top.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
#scroll-top:hover {
background: #e78100;
}
#scroll-top i {
line-height: 1;
}
@media (max-width: 575.98px){
#scroll-top {
right: 10px;
bottom: 12px;
}
}
/* ====== CARDS ARTICLES — version flottante finale ====== */
#posts-grid article.blog-article-card {
background: #fff !important;
border: 0.3px solid rgba(0,0,0,.1) !important;
border-radius: 0.5rem; /* tu ne veux pas d’arrondi */
overflow: hidden;
/* ombre sombre, proche, bien visible */
box-shadow:
0 14px 22px -10px rgba(0,0,0,.65),
10px 0 8px -10px rgba(0,0,0,.6), /* côté droit */
-10px 0 8px -10px rgba(0,0,0,.6),
0 3px 8px rgba(0,0,0,.35) !important;
transition: transform .14s ease-out,
box-shadow .14s ease-out;
}
@media (hover:hover) {
#posts-grid article.blog-article-card:hover {
transform: translateY(-3px);
box-shadow:
0 18px 30px -12px rgba(0,0,0,.72),
0 5px 12px rgba(0,0,0,.38) !important;
}
}
/* ==== Header de section façon MITALA (biseau + ligne) ==== */
.mitala-section-head{
--ms-height: 46px;
--ms-left-bg: #6b6b6b; /* gris gauche */
--ms-line: #ff9900; /* orange MITALA */
display: flex;
align-items: flex-end; /* ✅ on aligne tout en bas */
gap: 0;
width: 100%;
min-height: var(--ms-height);
margin: 1.3rem 0 .8rem;
}
/* bloc gauche (gris) + texte */
.mitala-section-head .ms-label{
background: var(--ms-left-bg);
color: #fff;
padding: .45rem 1.25rem .45rem 1.1rem;
font-weight: 600;
letter-spacing: .2px;
text-transform: uppercase;
line-height: 1.1;
height: var(--ms-height);
display: flex;
align-items: center;
position: relative;
z-index: 2;
font-size: .88rem;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
width: 40%;
}
/* petit biseau orange (parallélogramme penché à gauche) */
.mitala-section-head .ms-label::after{
content: "";
position: absolute;
right: -20px; /* ajuste pour bien mordre sur le bloc gris */
top: 0;
width: 36px; /* largeur avant déformation */
height: 100%;
background: #ff9900;
z-index: 1;
transform: skewX(16deg); /* les 2 côtés deviennent parallèles */
transform-origin: left top; /* la déformation part du bloc gris */
pointer-events: none;
}
/* ligne orange qui part à droite (en bas) */
.mitala-section-head .ms-line{
flex: 1 1 auto;
height: 5px;
background: var(--ms-line);
border-radius: 0 999px 999px 0;
align-self: flex-end; /* ✅ colle en bas */
margin-left: -29px; /* ✅ passe sous le biseau */
}
/* variante sombre pour un fond noir */
.dark-background .mitala-section-head .ms-label{
background: rgba(107,107,107,.8);
}
.dark-background .mitala-section-head .ms-line{
background: #ff9900;
}
/* responsive : un tout petit peu plus bas en mobile */
@media (max-width: 575.98px){
.mitala-section-head{
--ms-height: 40px;
}
.mitala-section-head .ms-label{
font-size: .78rem;
padding-right: .9rem;
}
.mitala-section-head .ms-line{
height: 4px;
margin-left: -25px; /* on réduit un peu le recouvrement en mobile */
}
}
/* ===== Badge visiteurs uniques (MITALA) ===== */
.mitala-visits-pill {
position: fixed;
left: 16px;
bottom: 18px;
z-index: 9999;
display: inline-flex;
align-items: center;
gap: .35rem;
padding: .35rem .75rem;
font-size: .78rem;
line-height: 1;
background: rgba(0, 0, 0, .82);
color: #fff;
border-radius: .85rem;
box-shadow: 0 8px 22px rgba(0,0,0,.45);
backdrop-filter: blur(4px);
}
.mitala-visits-pill i {
font-size: .95rem;
}
.mitala-visits-pill .mv-label {
opacity: .85;
text-transform: uppercase;
letter-spacing: .04em;
}
.mitala-visits-pill .mv-value {
font-weight: 700;
}
/* Ajustement mobile (un peu plus haut pour éviter le clavier/éléments) */
@media (max-width: 575.98px) {
.mitala-visits-pill {
left: 10px;
bottom: 58px; /* laisse de la place au scroll-top à droite */
}
}
/* ===== Sidebar Search — Premium ===== */
#sidebar-search form{
display:flex;
align-items:center;
gap:.5rem;
padding:.45rem .55rem;
border-radius:.85rem;
background:#fff;
border:1px solid rgba(0,0,0,.10);
box-shadow:0 10px 24px rgba(0,0,0,.05);
}
#sidebarSearchInput{
border:0 !important;
outline:0 !important;
width:100%;
font-size:.95rem;
}
#sidebar-search form:focus-within{
border-color: rgba(255,153,0,.55);
box-shadow:0 14px 34px rgba(255,153,0,.12);
}
#sidebar-search button{
border:0;
width:42px;
height:38px;
border-radius:.75rem;
display:grid;
place-items:center;
}
#sidebar-search .filter-chip{
display:inline-flex;
align-items:center;
gap:.4rem;
padding:.22rem .55rem;
border-radius:999px;
font-size:.78rem;
border:1px solid rgba(255,153,0,.25);
background: rgba(255,153,0,.10);
color:#111;
}
#sidebar-search .filter-chip button{
border:0;
background:transparent;
padding:0;
line-height:1;
}
.inst-branding {
width: 100%;
position: relative;
margin-top:18%;
}
.branding-slide {
position: relative;
height: 320px;
background: #000;
}
.branding-media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.branding-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,.7));
}
.branding-content {
position: absolute;
bottom: 20px;
left: 20px;
color: #fff;
}
.branding-logo {
height: 60px;
margin-bottom: 10px;
}
/* =========================
COVER TYPE FACEBOOK
========================= */
.inst-branding {
width: 100%;
position: relative;
overflow: hidden;
}
/* ratio 1280:426 ≈ 3:1 */
.inst-branding {
width: 100%;
aspect-ratio: 1280 / 426;
position: relative;
overflow: hidden;
}
#inst-branding-swiper,
#inst-branding-swiper .swiper-wrapper,
.branding-slide {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.branding-media {
width: 100%;
height: 100%;
object-fit: content;
object-position: center;
}
/* overlay */
.branding-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,.3), rgba(0,0,0,.7));
display:none;
}
/* contenu */
.branding-content {
position: absolute;
bottom: 20px;
left: 20px;
color: #fff;
z-index: 2;
}
.branding-logo {
height: 60px;
margin-bottom: 10px;
}
/* =========================
INST DETAIL HEADER OVERRIDE
========================= */
:root{
--inst-header-grad-light:
linear-gradient(135deg,
rgba(204, 0, 0, 0.22) 0%,
rgba(0, 102, 255, 0.18) 45%,
rgba(255, 204, 0, 0.20) 100%);
--inst-header-grad-dark:
linear-gradient(135deg,
rgba(120, 0, 0, 0.58) 0%,
rgba(0, 55, 140, 0.52) 45%,
rgba(170, 120, 0, 0.44) 100%);
}
.wv-header{
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1030;
background: var(--inst-header-grad-light) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 8px 24px rgba(0,0,0,.10);
border-bottom: 1px solid rgba(255,255,255,.18);
transition: background .28s ease, box-shadow .28s ease, padding .2s ease, backdrop-filter .28s ease;
padding: 1rem .75rem .55rem;
}
.wv-header.is-sticky{
background: var(--inst-header-grad-dark) !important;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow: 0 10px 28px rgba(0,0,0,.20);
border-bottom: 1px solid rgba(255,255,255,.10);
}
.wv-header .ed-logo img{
width: auto !important;
height: 248px !important;
display: block;
transition: height .2s ease, transform .2s ease;
}
.wv-header.is-sticky .ed-logo img{
height: 228px !important;
}
@media (max-width: 575.98px){
.wv-header .ed-logo img{
height: 220px !important;
}
.wv-header.is-sticky .ed-logo img{
height: 200px !important;
}
}
.inst-header-block{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:.6rem;
}
.inst-header-logo{
height:55px;
object-fit:contain;
}
.inst-header-title{
margin:0;
font-size:1.2rem;
font-weight:600;
line-height:1.2;
}
.inst-header-title span{
font-size:1rem;
font-weight:500;
color:#666;
}
.article-inline-figure{
margin: 1.4rem 0;
}
.article-inline-figure img{
width: 100%;
height: auto;
border-radius: .75rem;
display: block;
}
.article-inline-figure figcaption{
font-size: .86rem;
color: #666;
border-left: 4px solid #ff9900;
padding: .45rem .75rem;
margin-top: .45rem;
background: rgba(255,153,0,.08);
border-radius: 0 .45rem .45rem 0;
}