/* ==================================================
   CHARI–BAGUIRMI – CSS ADDITIONNEL FINAL PRO (NETTOYÉ)
================================================== */

/* ================= VARIABLES ================= */

:root{
 --main: var(--primary);
 --second: var(--secondary);
 --border: var(--box-border);
 --footer: var(--footer-bg);
 --button: var(--button-bg);
 --textc: var(--text);
 --logo-size: 90px;
}

/* ================= RESET ================= */

*{
 box-sizing:border-box;
 margin:0;
 padding:0;
}

/* ================= FOND GENERAL ================= */

body{
 background:#dfe3e6;
 font-family:Arial,Helvetica,sans-serif;
 color:var(--textc);
 overflow-x:hidden; /* ✅ fusionné ici */
}

/* ================= CADRE GLOBAL ================= */

#site-wrapper{
 max-width:1280px;
 margin:20px auto;
 background:#fff;
 border:20px solid var(--border);
 border-radius:14px;
 box-shadow:0 12px 35px rgba(0,0,0,.25);
 overflow:hidden;
}

/* ================= ESPACES ================= */

header, footer, .hero, section.container{
 padding:15px;
}

/* ================= TITRES ================= */

h1,h2,h3,h4,
.widget h3{
 color:var(--main);
}

/* ================= HEADER ================= */

header{
 background:var(--menu-bg);
 color:var(--menu-text);
 border-bottom:6px solid var(--main);
}

.site-title,
.site-description{
 color:var(--menu-text);
}
/* ================= NAVBAR DESKTOP ================= */

.navbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 20px;
  gap:16px;
}

/* ✅ En arabe : logo à droite, menu à gauche → flex-direction inversé */
html.lang-ar .navbar{
  flex-direction:row-reverse;
}

/* ================= MENU MAX ================= */

.menu ul{
 display:flex;
 gap:25px;
 list-style:none;
 align-items:center;
 /* ✅ En arabe : items du menu de droite à gauche */
}

/* ✅ Menu arabe desktop : ordre inversé */
html.lang-ar .menu .main-menu{
  flex-direction:row-reverse;
}

html.lang-ar .menu ul{
  flex-direction:row-reverse;
}

/* LIENS */
.menu a{
 position:relative;
 color:var(--menu-text);
 text-decoration:none;
 font-weight:600;
 padding:10px 14px;
 border-radius:8px;
 transition:0.3s;
}

/* HOVER */
.menu a:hover{
 background:rgba(255,255,255,.15);
}

/* ACTIVE */
.current-menu-item > a{
 background:rgba(255,255,255,.2);
}

/* SOULIGNEMENT ANIMÉ */
.menu a::after{
 content:"";
 position:absolute;
 left:0;
 bottom:0;
 width:0%;
 height:2px;
 background:#fff;
 transition:0.3s;
}

.menu a:hover::after{
 width:100%;
}

/* ===== DROPDOWN ===== */

.menu li{
 position:relative;
}

/* MENU DEROULANT */
.menu li ul{
 position:absolute;
 top:120%;
 left:0;
 background:#fff;
 min-width:220px;
 border-radius:10px;
 box-shadow:0 10px 25px rgba(0,0,0,.2);
 opacity:0;
 visibility:hidden;
 transform:translateY(10px);
 transition:0.3s;
 z-index:999;
}

/* ✅ Dropdown arabe : s'ouvre depuis la droite */
html.lang-ar .menu li ul{
 left:auto;
 right:0;
}

/* AFFICHAGE */
.menu li:hover ul{
 opacity:1;
 visibility:visible;
 transform:translateY(0);
}

/* LIENS DU DROPDOWN */
.menu li ul a{
 color:#222;
 display:block;
 padding:12px 15px;
 border-radius:0;
}

/* HOVER DROPDOWN */
.menu li ul a:hover{
 background:var(--main);
 color:#fff;
 padding-left:20px;
}

/* ===== FLECHE ▼ ===== */

.menu li.menu-item-has-children > a::before{
 content:"▼";
 font-size:10px;
 margin-left:6px;
}

/* ===== ESPACE ENTRE MENU ET DROPDOWN ===== */
.menu li ul{
 margin-top:5px;
}



/* ================= BOUTONS ================= */

.btn{
 background:var(--button);
 color:#fff;
 padding:8px 14px;
 border-radius:6px;
 text-decoration:none;
 font-size:13px;
}

/* ================= LAYOUT ================= */
/* ✅ Voir définition complète plus bas — doublons supprimés */

.sidebar-left,
.sidebar-right,
.center-content,
section.container{
 background:#fff;
 border-radius:12px;
 padding:15px;
 box-shadow:0 6px 15px rgba(0,0,0,.15);
}

.sidebar-left,
.sidebar-right{
 width:260px;
 position:sticky;
 top:25px;
 display:flex;
 flex-direction:column;
}

.center-content{
 flex:1;
 box-shadow:0 12px 30px rgba(0,0,0,.25);
}

/* ================= WIDGET MASTER ================= */

.widget{
    background:linear-gradient(145deg,#ffffff,#f3f3f3);
    border-radius:14px;
    padding:18px;
    box-shadow:0 6px 20px rgba(0,0,0,0.08);
    margin-bottom:25px;
    position:relative;
    overflow:hidden;
    transition:0.4s;
}

.widget:hover{
    transform:translateY(-6px);
    box-shadow:0 12px 30px rgba(0,0,0,0.15);
}

/* effet ligne animée */
.widget::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:0%;
    height:3px;
    background:var(--primary);
    transition:0.4s;
}

.widget:hover::before{
    width:100%;
}

/* TITRE */
.widget h3{
    font-size:17px;
    font-weight:600;
    margin-bottom:12px;
    color:#222;
    display:flex;
    align-items:center;
    gap:8px;
}

/* TEXTE */
.widget p{
    font-size:14px;
    color:#555;
    line-height:1.7;
}

/* LIENS */
.widget a{
    color:var(--primary);
    text-decoration:none;
    font-weight:500;
}

.widget a:hover{
    color:var(--secondary);
}

/* ================= IMAGE ================= */

.widget img{
    width:100%;
    height:180px;
    object-fit:cover;
    border-radius:10px;
    transition:0.4s;
}

.widget:hover img{
    transform:scale(1.08);
}

/* ================= LIST ================= */
.widget ul li{
    padding:8px 0;
    border-bottom:1px solid #eee;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.widget li a{
    color:#222;
    font-weight:500;
}

/* ===== ACTUALITÉS WIDGET ===== */

.actu-widget{
 display:flex;
 flex-direction:column;
 gap:15px;
}

/* ITEM */
.actu-item{
 display:flex;
 gap:12px;
 align-items:center;
 background:#fff;
 padding:10px;
 border-radius:10px;
 box-shadow:0 3px 10px rgba(0,0,0,0.08);
 transition:0.3s;
}

.actu-item:hover{
 transform:translateX(5px);
}

/* IMAGE */
/* IMAGE CARREE */

.actu-img-box{
 width:70px;
 height:70px;
 min-width:70px;
 overflow:hidden;
 border-radius:10px;
}

.actu-img{
 width:100%;
 height:100%;
 object-fit:cover;
 display:block;
}
.actu-item{
 align-items:flex-start;
}

/* TEXTE */
.actu-content{
 flex:1;
}

/* TITRE */
.actu-title{
 font-size:14px;
 font-weight:600;
 color:#222;
 text-decoration:none;
 display:block;
 margin-bottom:5px;
}

.actu-title:hover{
 color:var(--primary);
}

.actu-item:hover{
 transform:translateX(5px) scale(1.02);
}

/* DATE */
.actu-date{
 font-size:12px;
 color:#777;
}

.actu-excerpt{
 font-size:12px;
 color:#555;
 margin:5px 0;
 line-height:1.4;
}
/* ================= BADGE ================= */

.widget .badge{
    background:var(--secondary);
    color:#fff;
    font-size:11px;
    padding:3px 8px;
    border-radius:20px;
}

/* ================= BOUTON ================= */

.widget .btn{
    display:inline-block;
    margin-top:10px;
    padding:8px 14px;
    border-radius:6px;
    background:var(--primary);
    color:#fff;
    font-size:13px;
}

.widget .btn:hover{
    background:var(--secondary);
}

/* ================= ZONES ================= */

/* GAUCHE */
.sidebar-left .widget{
    border-left:5px solid var(--primary);
}

/* DROITE */
.sidebar-right .widget{
    border-left:5px solid var(--secondary);
}

/* CENTRE */
.home-center .widget{
    background:#fafafa;
}

/* HAUT */
#top .widget{
    background:linear-gradient(90deg,var(--primary),var(--secondary));
    color:#fff;
    text-align:center;
}

#top .widget a{
    color:#fff;
}

/* BAS */
#bottom .widget{
    background:#111;
    color:#ddd;
}

#bottom .widget a{
    color:#aaa;
}
/* ================= FOOTER ================= */

footer{
 background:var(--footer);
 color:#fff;
 border-top:6px solid var(--border);
 text-align:center;
}

/* ================= ACTUALITES FINAL PRO ================= */

.news-row{
 display:flex;
 gap:15px;
 padding:15px;
 margin-bottom:20px;
 background:#fff;
 border-left:6px solid var(--main);
 border-radius:14px;
 box-shadow:0 6px 18px rgba(0,0,0,.12);
 transition:0.3s;
 align-items:center;
}

.news-row:hover{
 transform:translateY(-4px);
 box-shadow:0 12px 30px rgba(0,0,0,.2);
}

/* IMAGE */
.news-thumb{
 width:140px;
 height:100px;
 overflow:hidden;
 border-radius:10px;
 flex-shrink:0;
}

.news-thumb img{
 width:100%;
 height:100%;
 object-fit:cover;
 transition:0.3s;
}

.news-row:hover .news-thumb img{
 transform:scale(1.05);
}

/* CONTENU */
.news-content{
 flex:1;
}

/* TITRE */
.news-title{
 display:block;
 font-size:18px;
 font-weight:600;
 color:var(--main); /* ✅ variable customizer */
 margin-bottom:6px;
 text-decoration:none;
}

.news-title:hover{
 color:var(--secondary);
}

/* DATE (badge style conservé) */
.news-date{
 background:var(--main);
 color:#fff;
 padding:4px 10px;
 border-radius:20px;
 font-size:12px;
 display:inline-block;
 margin-bottom:6px;
}

/* EXTRAIT */
.news-excerpt{
 font-size:14px;
 color:#555;
 line-height:1.5;
 margin:6px 0;
}

/* BOUTON */
.news-btn{
 display:inline-block;
 margin-top:8px;
 padding:6px 12px;
 background:var(--main);
 color:#fff;
 border-radius:20px;
 font-size:13px;
 text-decoration:none;
 transition:0.3s;
}

.news-btn:hover{
 background:var(--secondary);
}


/* ✅ Doublon .news-row.featured supprimé — voir définition complète ci-dessous */

/* ================= ARTICLE VEDETTE ================= */

.news-row.featured{
 flex-direction:column;
 align-items:flex-start;
}

.news-row.featured .news-thumb{
 width:100%;
 height:260px;
}

.news-row.featured .news-title{
 font-size:24px;
 font-weight:700;
}

.news-row.featured .news-excerpt{
 font-size:15px;
}
/* ===== GRID ===== */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

/* ===== ITEM ===== */
.video-item {
  background:#fff;
  padding:10px;
  border-radius:10px;
  box-shadow:0 4px 10px rgba(0,0,0,0.08);
}

/* ===== THUMB ===== */
.video-thumb {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: #000;
}

.video-thumb img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  transition: 0.3s;
}

/* ===== PLAY BUTTON ===== */
.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.6);
  color: #fff;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  pointer-events: none; /* IMPORTANT */
}

/* ===== HOVER EFFECT ===== */
.video-thumb:hover img {
  transform: scale(1.05);
}

/* ===== TITRE ===== */
.video-item h3 {
  margin-top: 8px;
  font-size: 16px;
  color: var(--main); /* ✅ variable customizer */
}

/* ===== FILTER BUTTONS ===== */
.video-filters button {
  margin: 5px;
  padding: 8px 12px;
  background: var(--primary); /* ✅ variable customizer */
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 6px;
  transition: 0.3s;
}

/* ===== MISSION BLOCK ===== */
.mission-block {
  margin-bottom: 40px;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
}

.mission-title {
  font-size: 22px;
  color: var(--main); /* ✅ variable customizer */
  margin-bottom: 10px;
}

.mission-meta {
  margin-bottom: 15px;
}

.mission-date {
  font-size: 14px;
  color: #666;
}

.mission-intro {
  font-size: 14px;
  color: #333;
}

.duration {
  position:absolute;
  bottom:6px;
  right:6px;
  background:rgba(0,0,0,0.8);
  color:#fff;
  font-size:12px;
  padding:3px 6px;
  border-radius:4px;
}

.video-views{
  font-size:13px;
  color:#777;
}

.video-page{
 max-width:900px;
 margin:auto;
 padding:20px;
}

.video-player{
 margin-bottom:20px;
}

.video-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:6px;
}
.video-thumb video{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:none;
}

.video-date{
  font-size:16px;
  color:#999;
  display:block;
  margin-top:4px;
}

.video-download{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border:1px solid var(--primary); /* ✅ variable customizer */
  border-radius:6px;
  color:var(--primary);
  text-decoration:none;
  font-size:14px;
  transition:0.3s;
}


.video-download:hover{
  background:var(--primary); /* ✅ variable customizer */
  color:#fff;
}

.video-meta-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:6px;
  width: 100%;
}

/* ✅ Doublon .video-item display:flex supprimé */

.video-info {
  display: block;
  width: 100%;
}

/* ✅ Doublon .video-meta-row supprimé */

/* ✅ Doublon .mission-block display:block supprimé */
/* ================= LOGO ================= */

.custom-logo,
.site-logo img{
 height:var(--logo-size);
 width:auto;
 max-width:100%;
 object-fit:contain;
 transition:.3s;
}

.custom-logo:hover{
 transform:scale(1.03);
}

@media(max-width:900px){
 :root{ --logo-size:70px; }
}

@media(max-width:500px){
 :root{ --logo-size:55px; }
}

.custom-logo{
 filter:drop-shadow(0 2px 3px rgba(0,0,0,.2));
}

/* ================= SIDEBAR FIX ================= */

.sidebar-left .widget,
.sidebar-right .widget{
 display:block !important;
 width:100%;
}

.sidebar-left img,
.sidebar-right img{
 width:auto;
 height:auto;
 max-width:100%;
}

.sidebar-left *,
.sidebar-right *{
 float:none !important;
}

/* ================= FOOTER WIDGETS ================= */

.footer-widgets{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:25px;
  padding:25px 15px;
  width:100%;
  box-sizing:border-box;
  align-items:start;
}

.footer-widgets .widget{
 background:transparent;
 color:#fff;
}

.footer-widgets h3,
.footer-widgets h4,
.footer-widget h3,
.footer-widget h4{
  color:#fff !important;
  margin-bottom:10px;
  border-bottom:2px solid rgba(255,255,255,.2);
  padding-bottom:6px;
}

.footer-widget p,
.footer-widget li,
.footer-widget a{
  color:#fff !important;
}

/* ================= RESEAUX SOCIAUX ================= */

.footer-social{
 display:flex;
 flex-direction:column;
 gap:5px;
}

.footer-social .social{
 display:flex;
 align-items:center;
 gap:10px;
 padding:4px 12px;
 border-radius:6px;
 background:rgba(255,255,255,.08);
 color:#fff;
 text-decoration:none;
 font-size:14px;
 transition:.3s;
}

.footer-social .social:hover{
 transform:translateX(4px);
}

/* ================= DOCUMENTS ================= */

.doc-item{
 display:flex;
 gap:15px;
 padding:15px;
 background:#fff;
 border-radius:10px;
 box-shadow:0 5px 15px rgba(0,0,0,.1);
}

.doc-icon{font-size:32px;}
.doc-meta{font-size:12px;color:#777;margin-bottom:6px;}

/* ================= GALERIE ================= */

.section-title{
 text-align:center;
 margin:30px 0;
 font-size:26px;
}

.album-filter{
 text-align:center;
 margin-bottom:25px;
}

.album-filter button{
 margin:5px;
 padding:8px 15px;
 border:none;
 background:#eee;
 border-radius:20px;
 cursor:pointer;
 transition:.3s;
}

.album-filter button.active,
.album-filter button:hover{
 background:var(--main);
 color:#fff;
}


.photo{
 position:relative;
 overflow:hidden;
 border-radius:10px;
}

.photo img{
 width:100%;
 height:200px;
 object-fit:cover;
 transition:.3s;
}

.photo:hover img{
 transform:scale(1.05);
}

.caption{
 position:absolute;
 bottom:0;
 width:100%;
 background:rgba(0,0,0,.6);
 color:#fff;
 padding:5px;
 font-size:14px;
 text-align:center;
}

/* ================= SLIDER ================= */

#slider-overlay{
 position:fixed;
 inset:0;
 background:rgba(0,0,0,.95);
 display:none;
 align-items:center;
 justify-content:center;
 z-index:99999;
}

#slider-overlay img{
 max-width:90%;
 max-height:85%;
 border-radius:10px;
}

#slider-overlay .close{
 position:absolute;
 top:20px;
 right:30px;
 font-size:40px;
 color:#fff;
 cursor:pointer;
}

#slider-overlay .prev,
#slider-overlay .next{
 position:absolute;
 top:50%;
 transform:translateY(-50%);
 font-size:50px;
 color:#fff;
 cursor:pointer;
 padding:10px;
}

#slider-overlay .prev{ left:20px; }
#slider-overlay .next{ right:20px; }
/* ===== ALBUMS PRO ===== */

.albums-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:20px;
}

.album-card{
border-radius:12px;
overflow:hidden;
position:relative;
box-shadow:0 8px 20px rgba(0,0,0,.15);
transition:.3s;
}

.album-card:hover{
transform:translateY(-5px);
}

.album-cover{
position:relative;
}

.album-cover img{
width:100%;
height:200px;
object-fit:cover;
}

/* overlay */
.album-overlay{
position:absolute;
bottom:0;
width:100%;
background:rgba(0,0,0,.6);
color:#fff;
padding:10px;
text-align:center;
}

.album-overlay h3{
margin:0;
font-size:16px;
}

.album-overlay span{
font-size:12px;
opacity:.8;
}

.no-img{
height:200px;
display:flex;
align-items:center;
justify-content:center;
background:#eee;
}


.btn-album{
display:inline-block;
margin-top:8px;
padding:5px 10px;
background:#fff;
color:#000;
border-radius:6px;
font-size:12px;
text-decoration:none;
}

.album-slider{
margin-bottom:20px;
position:relative;
}

.album-slider img{
width:100%;
height:300px;
object-fit:cover;
display:none;
border-radius:10px;
}

.album-slider img:first-child{
display:block;
}
.album-card:hover img{
 transform:scale(1.05);
 transition:.3s;
}

.album-title{
 font-size:18px;
 margin-bottom:10px;
}

.album-title .count{
 font-size:14px;
 color:#777;
 margin-left:10px;
}


/* ✅ Doublon .mission-block supprimé — défini plus haut */

/* ✅ Doublon .mission-title supprimé */

.mission-date{
 font-size:14px;
 color:#888;
 margin-bottom:10px;
}

.mission-content{
 margin-bottom:15px;
 line-height:1.6;
}

/* ✅ Doublon .gallery-grid supprimé */

.photo img{
 width:100%;
 height:180px;
 object-fit:cover;
 border-radius:5px;
}

/* ================= Affiche Doc ================= */

.doc-intro{
text-align:center;
margin-bottom:20px;
color:#555;
}

#docSearch{
width:100%;
padding:12px;
margin:20px 0;
border:1px solid #ddd;
border-radius:8px;
}

.doc-filter{
text-align:center;
margin-bottom:20px;
}

.doc-filter button{
padding:8px 15px;
margin:5px;
border:none;
background:#eee;
cursor:pointer;
border-radius:20px;
}

.doc-filter button.active{
background:var(--primary);
color:#fff;
}

.documents-container{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:15px;
}

.doc-item{
display:flex;
gap:15px;
background:#fff;
padding:15px;
border-radius:10px;
box-shadow:0 3px 10px rgba(0,0,0,0.08);
transition:0.3s;
}

.doc-item:hover{
transform:translateY(-3px);
}

.doc-icon{
font-size:30px;
}

.doc-title{
font-weight:bold;
margin-bottom:5px;
}

.doc-meta{
font-size:12px;
color:#777;
margin-bottom:8px;
}

.doc-link,
.doc-download{
display:inline-block;
margin-right:10px;
font-size:14px;
text-decoration:none;
}

.doc-link{color:#0073aa;}
.doc-download{color:var(--primary);} /* ✅ variable customizer */


/* ✅ Doublon .gallery-grid supprimé */

/* ✅ Doublon .photo img supprimé */

/* ✅ Doublon .caption supprimé — voir définition principale */



.photo img{
width:100%;
border-radius:10px;
}

/* ✅ Doublon .caption supprimé */


/*========== Affiche Page Youtube test ========*/
/* ✅ Doublon .video-page supprimé — défini plus haut */

.video-player video,
.video-player iframe{
  width:100%;
  height:500px;
  border-radius:10px;
}

.video-title{
  margin:15px 0;
  font-size:22px;
}

.video-meta-bar{
  display:flex;
  gap:15px;
  align-items:center;
  margin-bottom:15px;
  color:#666;
}

.download-btn{
  margin-left:auto;
  padding:6px 10px;
  border:1px solid var(--primary); /* ✅ variable customizer */
  border-radius:6px;
  text-decoration:none;
}

.video-description{
  background:#f9f9f9;
  padding:15px;
  border-radius:8px;
}

/* SIDEBAR */
.video-sidebar{
  max-width:900px;
  margin:30px auto;
}

.video-side-item{
  display:flex;
  gap:10px;
  margin-bottom:10px;
  text-decoration:none;
  color:#000;
}

.video-side-item img{
  width:120px;
  height:80px;
  object-fit:cover;
}

.back-btn{
  display:inline-block;
  margin-bottom:15px;
  padding:6px 12px;
  background:var(--primary); /* ✅ variable customizer */
  color:#fff;
  text-decoration:none;
  border-radius:6px;
  font-size:14px;
  transition:0.3s;
}

.back-btn:hover{
  background:var(--secondary); /* ✅ variable customizer */
}

.back-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.breadcrumb{
  font-size:13px;
  margin-bottom:15px;
  color:#666;
}

.breadcrumb a{
  text-decoration:none;
  color:var(--main); /* ✅ variable customizer */
}

.breadcrumb a:hover{
  text-decoration:underline;
}

/* CONTENEUR */
.contact-form {
  max-width: 600px;
  margin: 60px auto;
  padding: 30px;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: fadeIn 0.8s ease;
}

/* TITRE */
h2 {
  text-align: center;
  margin-top: 40px;
  color: var(--primary); /* ✅ variable customizer */
}

/* INPUT GROUP */
.input-group {
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  transition: 0.3s;
}

.input-group:focus-within {
  border-color: #0073aa;
  box-shadow: 0 0 8px rgba(0,115,170,0.3);
}

/* ICONES */
.icon {
  padding: 12px;
  background: var(--primary); /* ✅ variable customizer */
  color: #fff;
}

/* INPUTS */
.input-group input,
.input-group textarea {
  border: none;
  padding: 14px;
  width: 100%;
  font-size: 16px;
  outline: none;
}

textarea {
  min-height: 150px;
}

/* BOUTON */
.contact-form button {
  padding: 14px;
  background: var(--primary); /* ✅ variable customizer */
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
}

.contact-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* SUCCESS / ERROR */
.success {
  text-align: center;
  color: green;
  font-weight: bold;
}

.error {
  text-align: center;
  color: red;
  font-weight: bold;
}

/* ANIMATION */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .contact-form {
    margin: 20px;
    padding: 20px;
  }
}

/* CONTENEUR */
.projet-container{
    max-width: 1100px;
    margin: 40px auto;
    padding: 20px;
}

/* TITRE */
.projet-title{
    font-size: 32px;
    color: var(--primary);
    margin-bottom: 15px;
}

/* META */
.projet-meta{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
    background:#f5f5f5;
    padding:10px 15px;
    border-radius:10px;
    margin-bottom:20px;
}

/* TEXTE */
.projet-content{
    line-height:1.7;
    margin-bottom:30px;
}

/* GALERIE GRID */
.gallery-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:15px;
}

/* IMAGES */
.gallery-grid img{
    width:100%;
    height:220px;
    object-fit:cover;
    border-radius:10px;
    transition:0.3s;
}

/* HOVER */
.gallery-grid img:hover{
    transform:scale(1.05);
}

/* BOUTON (si besoin) */
/* ✅ Doublon .btn-projet supprimé — voir définition complète plus bas */
.btn-retour{
    display:inline-block;
    margin-bottom:20px;
    padding:8px 15px;
    background:#eee;
    border-radius:20px;
    text-decoration:none;
    color:#333;
    transition:0.3s;
}

.btn-retour:hover{
    background:var(--primary);
    color:#fff;
}

/* GRID PROJETS */
.projets-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:25px;
    margin:30px 0;
}

/* CARD */
.projet-card{
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 4px 12px rgba(0,0,0,0.08);
    transition:0.3s;
}

.projet-card:hover{
    transform:translateY(-5px);
    box-shadow:0 8px 20px rgba(0,0,0,0.15);
}

/* IMAGE */
.projet-image img{
    width:100%;
    height:200px;
    object-fit:cover;
}

/* CONTENU */
.projet-content{
    padding:15px;
}

.projet-content h3{
    font-size:18px;
    margin-bottom:10px;
}

/* META */
.meta{
    font-size:14px;
    color:#666;
    margin-bottom:15px;
}

/* BOUTON */
.btn-projet{
    display:inline-block;
    padding:8px 15px;
    background:var(--primary);
    color:#fff;
    border-radius:6px;
    text-decoration:none;
    transition:0.3s;
}

.btn-projet:hover{
    background:var(--secondary);
}

.badge{
    background:var(--secondary);
    color:#fff;
    padding:4px 10px;
    font-size:12px;
    border-radius:20px;
    display:inline-block;
    margin-bottom:10px;
}

/* ===== COMMUNIQUÉS ===== */

.communique-list{
 display:flex;
 flex-direction:column;
 gap:20px;
}

/* CARD */
.communique-card{
 display:flex;
 gap:20px;
 background:#fff;
 padding:15px;
 border-radius:12px;
 box-shadow:0 6px 15px rgba(0,0,0,0.1);
 border-left:6px solid var(--main); /* ✅ variable customizer */
 transition:0.3s;
}

.communique-card:hover{
 transform:translateY(-4px);
}

/* IMAGE */
.communique-img img{
 width:180px;
 height:120px;
 object-fit:cover;
 border-radius:10px;
}

/* CONTENU */
.communique-content{
 flex:1;
}

.communique-content h3{
 margin-bottom:8px;
 color:var(--main); /* ✅ variable customizer */
}

/* DATE */
.communique-content .date{
 font-size:12px;
 color:#777;
 display:block;
 margin-bottom:8px;
}

/* SINGLE */
.communique-single{
 max-width:900px;
 margin:auto;
 padding:20px;
}

.communique-single h1{
 margin-bottom:10px;
}

.communique-single .image img{
 width:100%;
 border-radius:10px;
 margin:20px 0;
}
/* ===== WIDGET COMMUNIQUÉS ===== */

.comm-item{
 display:flex;
 gap:10px;
 margin-bottom:12px;
}

.comm-img{
 width:60px;
 height:60px;
 object-fit:cover;
 border-radius:6px;
}

.comm-title{
 font-size:13px;
 font-weight:600;
 color:#222;
 display:block;
}

.comm-date{
 font-size:11px;
 color:#777;
}



/* ===== PAGE ACTUALITÉS PRO ===== */

.posts-list{
 display:flex;
 flex-direction:column;
 gap:25px;
}


/* IMAGE */
.post-image{
 flex:0 0 220px;
}

.post-image img{
 width:100%;
 height:150px;
 object-fit:cover;
 border-radius:10px;
}

/* CONTENU */
.post-content{
 flex:1;
}

/* TITRE */
.post-title{
 font-size:20px;
 font-weight:700;
 margin-bottom:8px;
 color:var(--main);
}

/* DATE */
.post-date{
 font-size:13px;
 color:#777;
 margin-bottom:8px;
 display:block;
}

/* TEXTE */
.post-excerpt{
 font-size:14px;
 color:#444;
 line-height:1.6;
 margin-bottom:10px;
}

/* BOUTON */
.read-more{
 display:inline-block;
 padding:6px 12px;
 background:var(--main);
 color:#fff;
 border-radius:6px;
 text-decoration:none;
 font-size:13px;
 transition:0.3s;
}

.read-more:hover{
 background:var(--secondary);
}




.single-article{
 max-width:900px;
 margin:40px auto;
 background:#fff;
 padding:25px;
 border-radius:12px;
 box-shadow:0 8px 25px rgba(0,0,0,.15);
}

.single-title{
 font-size:28px;
 color:var(--primary);
 margin-bottom:10px;
}

.single-meta{
 font-size:13px;
 color:#777;
 margin-bottom:15px;
}

.single-image img{
 width:100%;
 height:350px;
 object-fit:cover;
 border-radius:10px;
 margin-bottom:20px;
}

.single-content{
 line-height:1.8;
 font-size:15px;
 color:#333;
}

.single-content img{
 width:100%;
 height:auto;
 margin:15px 0;
 border-radius:10px;
}


/* ===== FIX LAYOUT ACTUALITÉS ===== */

/* Empêche le débordement */
.layout{
  align-items:flex-start;
}

/* Centre bien contenu */
.center-content{
  min-width:0; /* ⚠️ IMPORTANT pour flex */
}

/* Empêche l’article de casser la mise en page */
.news-row{
  max-width:100%;
  overflow:hidden;
}

/* Corrige image vedette */
.posts-list .news-row:first-child{
  width:100%;
}

/* Image responsive */
.news-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Empêche débordement texte */
.news-content{
  overflow:hidden;
}

/* ✅ Doublon .layout supprimé */

/* ✅ Doublon .sidebar width supprimé — défini plus haut */

/* ✅ Doublon .center-content supprimé — défini plus haut */

#site-wrapper{
 position:relative;
}


/* ✅ Doublon .badge supprimé — voir définition complète plus bas */

/* ✅ Doublon .news-ticker supprimé — voir définition complète plus bas */



/* ===== FIX DÉBORDEMENT GLOBAL ===== */
/* ✅ Doublon #site-wrapper supprimé — défini plus haut avec toutes ses propriétés */

/* ✅ Doublon body overflow supprimé — ajouté dans la définition body principale */



/* ===== TOAST URGENT MODERNE ===== */

#urgent-toast{
  position: fixed;
  bottom: 20px;
  right: 20px;

  width: 320px;
  background: #fff;
  border-left: 6px solid red;
  border-radius: 12px;

  box-shadow: 0 15px 40px rgba(0,0,0,0.25);
  padding: 15px;

  display: flex;
  justify-content: space-between;
  gap: 10px;

  transform: translateY(100px);
  opacity: 0;

  transition: 0.4s ease;
  z-index: 99999;
}

/* APPARITION */
#urgent-toast.show{
  transform: translateY(0);
  opacity: 1;
}

/* CONTENU */
.toast-content strong{
  color: red;
  font-size: 14px;
}

.toast-content p{
  font-size: 13px;
  margin: 5px 0;
}

.toast-content a{
  font-size: 12px;
  text-decoration: none;
  background: red;
  color: #fff;
  padding: 4px 8px;
  border-radius: 5px;
}

/* BOUTON FERMER */
#toast-close{
  cursor: pointer;
  font-size: 14px;
  color: #666;
}

#toast-close:hover{
  color: red;
}

/* BARRE PROGRESSION */
.toast-progress{
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  width: 100%;
  background: red;
  animation: progress 5s linear forwards;
}

@keyframes progress{
  from{width:100%;}
  to{width:0%;}
}




/* ===== BOUTON RETOUR ===== */

.back-button{
  max-width:1200px;
  margin:15px auto;
}

.back-button a{
  display:inline-flex;
  align-items:center;
  gap:6px;

  background:var(--primary); /* ✅ variable customizer */
  color:#fff;
  padding:8px 14px;

  border-radius:8px;
  text-decoration:none;
  font-size:14px;
  font-weight:500;

  box-shadow:0 5px 15px rgba(0,0,0,0.15);
  transition:0.3s;
}

/* HOVER */
.back-button a:hover{
  background:var(--secondary); /* ✅ variable customizer */
  transform:translateY(-2px);
}

/* VERSION FLOTTANTE (optionnel) */
.back-button.fixed{
  position:fixed;
  top:90px;
  left:20px;
  z-index:9999;
}

/* ===== FOOTER FIX ===== */

footer{
  width:100%;
  overflow:hidden;
}

/* Footer widget colonnes */
.footer-widget{
  min-width:0 !important;
  word-break:break-word;
  display:block !important;
}

.footer-widgets .widget{
  min-width:0;
  word-break:break-word;
  background:transparent;
  color:#fff;
}

/* Corrige les longs textes (adresse) */
.footer-widgets p{
  word-wrap:break-word;
  overflow-wrap:break-word;
}

/* ✅ Doublon .footer-social supprimé — défini plus haut */

/* ===== IMAGES ===== */

img{
  max-width:100%;
  height:auto;
}

/* ===== FIX FLEX ===== */

/* ✅ Doublon min-width supprimé — déjà dans .center-content plus haut */


/* ===== POPUP URGENT FIX ===== */

#urgent-popup{
  position: absolute; /* reste visible mais bien contrôlé */
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  
  width: 90%;
  max-width: 500px;

  background: #fff;
  border-left: 6px solid red;
  border-radius: 10px;
  padding: 15px;

  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  z-index: 9999;

  animation: slideUp 0.4s ease;
}

/* TITRE */
#urgent-popup h3{
  margin-bottom: 5px;
  color: red;
}

/* TEXTE */
#urgent-popup p{
  font-size: 14px;
  margin-bottom: 10px;
}

/* LIEN */
#urgent-popup a{
  display: inline-block;
  padding: 6px 12px;
  background: red;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
}

/* ANIMATION */
@keyframes slideUp{
  from{
    transform: translate(-50%, 100%);
    opacity:0;
  }
  to{
    transform: translate(-50%, 0);
    opacity:1;
  }
}


.video-embed iframe {
  width: 100%;
  height: 450px;
  border-radius: 10px;
}

/* RTL arabe */
html[lang="ar"] body {
  direction: rtl;
  text-align: right;
}

html[lang="ar"] .albums-grid {
  direction: rtl;
}

html[lang="ar"] .album-card {
  text-align: right;
}

html[lang="ar"] .section-title {
  text-align: center;
}




/* ================= BANDEAU INFO ================= */

.news-ticker{
  position: relative;
 background:#10420b;
 color:#fff;
 overflow:hidden;
 padding:8px 15px;
 width: 100%; 
}

.news-ticker:hover .ticker-track{
 animation-play-state:paused;
}

.ticker-item a{
 color:#fff;
 text-decoration:none;
}

.ticker-item {
flex-shrink:0;
}

.badge{
 background:red;
 color:#fff;
 padding:2px 6px;
 border-radius:4px;
 font-size:12px;
 margin-right:6px;
}

.blink{
 animation:blink 1s infinite;
}

@keyframes blink{
 50%{opacity:.4}
}

.ticker-track{
  display:flex;
  gap:60px;
  white-space:nowrap;
  /* ✅ CORRECTION : on sépare les propriétés pour que animation-duration
     inline (géré par PHP/customizer) ne soit pas écrasé par le shorthand */
  animation-name:ticker;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  animation-duration:25s; /* fallback si PHP ne fournit pas de durée */
}

@keyframes ticker{
  from{transform:translateX(100%)}
  to{transform:translateX(-100%)}
}

/* ARABE */
.lang-ar .ticker-track{
  animation-direction: reverse;
}


/* =====================================================
   HERO SLIDER ANIMÉ
===================================================== */

/* =====================================================
   HERO SLIDER — FINAL
===================================================== */
.hero-slider{
  position:relative;
  width:100%;
  height:480px;
  overflow:hidden;
  background:#111;
}

/* Tous les slides superposés, invisibles par défaut */
.hero-slider .slide{
  position:absolute;
  top:0; left:0;
  width:100%;
  height:100%;
  opacity:0;
  transition:opacity 0.7s ease-in-out;
  z-index:1;
}

/* Slide actif — au-dessus et visible */
.hero-slider .slide.active{
  opacity:1;
  z-index:2;
}

/* Image — remplit tout le slide */
.hero-slider .slide img{
  position:absolute;
  top:0; left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

/* Caption par-dessus l'image */
.slide-caption{
  position:absolute;
  bottom:60px;
  left:40px;
  right:40px;
  background:rgba(0,0,0,.55);
  color:#fff;
  padding:18px 24px;
  border-radius:10px;
  z-index:3;
  max-width:600px;
}

[dir="rtl"] .slide-caption{
  left:auto;
  right:40px;
  text-align:right;
}

.slide-caption h2{
  margin:0 0 10px;
  font-size:22px;
  color:#fff;
}

/* Flèches */
.slider-prev,
.slider-next{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(0,0,0,.45);
  color:#fff;
  border:none;
  padding:12px 16px;
  font-size:20px;
  cursor:pointer;
  z-index:10;
  border-radius:50%;
  transition:background .3s;
}
.slider-prev{ left:12px; }
.slider-next{ right:12px; }
.slider-prev:hover,
.slider-next:hover{ background:var(--primary); }

/* Points */
.slider-dots{
  position:absolute;
  bottom:14px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
  z-index:10;
}
.slider-dots .dot{
  width:12px;
  height:12px;
  border-radius:50%;
  background:rgba(255,255,255,.5);
  cursor:pointer;
  transition:background .3s;
}
.slider-dots .dot.active{
  background:#fff;
  transform:scale(1.2);
}

@media(max-width:900px){ .hero-slider{ height:360px; } }
@media(max-width:600px){
  .hero-slider{ height:240px; }
  .slide-caption{ bottom:30px; left:10px; right:10px; padding:10px 12px; }
  .slide-caption h2{ font-size:15px; }
}
@media(max-width:380px){ .hero-slider{ height:180px; } }

/* Caption texte sur le slide */
.slide-caption{
  position:absolute;
  bottom:60px;
  left:40px;
  right:40px;
  background:rgba(0,0,0,.55);
  color:#fff;
  padding:18px 24px;
  border-radius:10px;
  z-index:2;
  max-width:600px;
}

[dir="rtl"] .slide-caption{
  left:auto;
  right:40px;
  text-align:right;
}

.slide-caption h2{
  margin:0 0 10px;
  font-size:22px;
  color:#fff;
}

/* Flèches */
.slider-prev,
.slider-next{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(0,0,0,.45);
  color:#fff;
  border:none;
  padding:12px 16px;
  font-size:20px;
  cursor:pointer;
  z-index:10;
  border-radius:50%;
  transition:background .3s;
}

.slider-prev{ left:12px; }
.slider-next{ right:12px; }
.slider-prev:hover,
.slider-next:hover{ background:var(--primary); }

/* Points indicateurs */
.slider-dots{
  position:absolute;
  bottom:14px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
  z-index:10;
}

.slider-dots .dot{
  width:12px;
  height:12px;
  border-radius:50%;
  background:rgba(255,255,255,.5);
  cursor:pointer;
  transition:background .3s;
}

.slider-dots .dot.active{
  background:#fff;
  transform:scale(1.2);
}

/* =====================================================
   WIDGET DERNIERS PROJETS
===================================================== */

.widget-projets{ margin:30px 0; }

.widget-projets .widget-title{
  font-size:20px;
  color:var(--primary);
  margin-bottom:16px;
  border-bottom:2px solid var(--primary);
  padding-bottom:8px;
}

.projets-widget-grid{
  display:flex;
  flex-direction:column;
  gap:16px;
}

/* ✅ Carte projet : image à gauche + texte à droite */
.projet-widget-card{
  display:flex;
  flex-direction:row;
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 2px 12px rgba(0,0,0,.08);
  transition:transform .3s;
  min-height:140px;
}

.projet-widget-card:hover{ transform:translateY(-3px); }

/* Image à gauche — taille fixe */
.projet-widget-card img{
  width:180px;
  min-width:180px;
  height:160px;
  object-fit:cover;
  flex-shrink:0;
}

/* Texte à droite — flex column */
.projet-widget-info{
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  flex:1;
  min-width:0;
}

/* Titre en haut */
.projet-widget-title{
  display:block;
  font-size:15px;
  font-weight:600;
  color:var(--primary);
  text-decoration:none;
  margin-bottom:auto;
  line-height:1.5;
}

/* Bloc bas — localité + bouton groupés et alignés */
.projet-widget-bottom{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:12px;
}

/* Localité */
.projet-widget-meta{
  font-size:12px;
  color:#666;
  margin:0;
  display:flex;
  align-items:center;
  gap:4px;
}

/* RTL arabe : image à droite + texte à gauche */
[dir="rtl"] .projet-widget-card{
  flex-direction:row-reverse;
}

@media(max-width:600px){
  .projet-widget-card{
    flex-direction:column;
  }
  .projet-widget-card img{
    width:100%;
    min-width:0;
    height:180px;
  }
  [dir="rtl"] .projet-widget-card{
    flex-direction:column;
  }
}

@media(max-width:600px){
  .hero-slider{ height:250px; }
  .slide-caption{ bottom:40px; left:12px; right:12px; font-size:14px; }
  .projets-widget-grid{ grid-template-columns:1fr; }
}

/* =====================================================
   WIDGET MOT DU PRÉSIDENT
===================================================== */

.widget-president{
  background:#fff;
  border-radius:12px;
  padding:16px;
  box-shadow:0 2px 12px rgba(0,0,0,.08);
}

.widget-president-title{
  font-size:16px;
  color:var(--primary);
  border-bottom:2px solid var(--primary);
  padding-bottom:8px;
  margin-bottom:14px;
}

.widget-president-inner{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

[dir="rtl"] .widget-president-inner{
  flex-direction:row-reverse;
}

.widget-president-photo img{
  width:80px;
  height:90px;
  object-fit:cover;
  border-radius:8px;
  flex-shrink:0;
}

.widget-president-body{ flex:1; }

.widget-president-nom{
  font-weight:700;
  font-size:14px;
  color:var(--primary);
  margin:0 0 2px;
}

.widget-president-fonction{
  font-size:12px;
  color:#888;
  margin:0 0 8px;
  font-style:italic;
}

.widget-president-quote{
  font-size:13px;
  line-height:1.6;
  color:#444;
  border-left:3px solid var(--primary);
  padding-left:8px;
  margin:0 0 10px;
}

[dir="rtl"] .widget-president-quote{
  border-left:none;
  border-right:3px solid var(--primary);
  padding-left:0;
  padding-right:8px;
}

/* =====================================================
   RESPONSIVE — MENU HAMBURGER
===================================================== */

.hamburger{
  display:none;
  flex-direction:column;
  justify-content:space-between;
  width:32px;
  height:22px;
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
  z-index:1001;
  flex-shrink:0;
}

.hamburger span{
  display:block;
  width:100%;
  height:3px;
  background:#fff;
  border-radius:3px;
  transition:transform .3s, opacity .3s;
}

.hamburger.active span:nth-child(1){
  transform:translateY(9px) rotate(45deg);
}
.hamburger.active span:nth-child(2){
  opacity:0;
}
.hamburger.active span:nth-child(3){
  transform:translateY(-9px) rotate(-45deg);
}

/* Overlay sombre */
.nav-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.5);
  z-index:999;
}
.nav-overlay.show{
  display:block;
}

/* =====================================================
   RESPONSIVE — MEDIA QUERIES
===================================================== */

/* ----- TABLETTE (max 900px) ----- */
@media(max-width:900px){

  /* Layout 3 colonnes → 1 colonne */
  .layout{
    flex-direction:column !important;
    gap:16px;
  }

  .sidebar-left,
  .sidebar-right{
    width:100% !important;
    min-width:0;
  }

  .center-content{
    width:100%;
    min-width:0;
  }

  /* Colonnes accueil */
  .columns{
    flex-direction:column;
  }

  /* Grille albums */
  .albums-grid{
    grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  }

  /* Hero slider */
  .hero-slider{
    height:320px;
  }

  .slide-caption{
    bottom:40px;
    left:16px;
    right:16px;
  }

  .slide-caption h2{
    font-size:18px;
  }

  /* News row */
  .news-row{
    flex-direction:column;
  }

  .news-thumb{
    width:100% !important;
  }

  /* Trombi conseillers */
  .trombi{
    grid-template-columns:repeat(2, 1fr);
  }

  /* Projets grid */
  .projets-grid{
    grid-template-columns:repeat(2, 1fr);
  }

  /* Widget président */
  .widget-president-inner{
    flex-direction:column;
  }

  .widget-president-photo img{
    width:100%;
    height:200px;
  }

}

/* ----- MOBILE (max 600px) ----- */
@media(max-width:600px){

  /* Navbar hamburger activé */
  .hamburger{
    display:flex;
  }

  /* Menu mobile — panneau latéral */
  .menu{
    position:fixed;
    top:0;
    left:-280px;
    width:280px;
    height:100vh;
    background:var(--menu-bg, #0b5f3c);
    z-index:1000;
    padding:70px 0 20px;
    overflow-y:auto;
    transition:left .3s ease;
    box-shadow:4px 0 20px rgba(0,0,0,.3);
  }

  /* Menu arabe → glisse depuis la droite */
  html.lang-ar .menu{
    left:auto;
    right:-280px;
    transition:right .3s ease;
  }

  .menu.open{
    left:0;
  }

  html.lang-ar .menu.open{
    right:0;
    left:auto;
  }

  /* Liens du menu mobile */
  .menu .main-menu{
    list-style:none;
    padding:0;
    margin:0;
  }

  .menu .main-menu li a{
    display:block;
    padding:14px 24px;
    color:#fff;
    text-decoration:none;
    font-size:15px;
    border-bottom:1px solid rgba(255,255,255,.1);
    transition:background .2s;
  }

  .menu .main-menu li a:hover{
    background:rgba(255,255,255,.1);
  }

  /* Sous-menus mobile */
  .menu .main-menu .sub-menu{
    list-style:none;
    padding:0;
    background:rgba(0,0,0,.15);
  }

  .menu .main-menu .sub-menu li a{
    padding-left:40px;
    font-size:14px;
  }

  html.lang-ar .menu .main-menu .sub-menu li a{
    padding-left:24px;
    padding-right:40px;
  }

  /* Navbar layout mobile */
  .navbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:nowrap;
    padding:8px 12px;
  }

  .site-branding{
    flex:1;
    min-width:0;
  }

  /* Formulaire recherche mobile */
  .search-form input{
    width:120px;
    font-size:13px;
  }

  /* Ticker mobile */
  .news-ticker{
    font-size:12px;
    padding:5px 0;
  }

  /* Hero slider mobile */
  .hero-slider{
    height:220px;
  }

  .slide-caption{
    bottom:30px;
    left:10px;
    right:10px;
    padding:10px 12px;
  }

  .slide-caption h2{
    font-size:15px;
    margin-bottom:6px;
  }

  .slider-prev,
  .slider-next{
    padding:8px 10px;
    font-size:16px;
  }

  /* Layout 1 colonne */
  .layout{
    padding:0 10px;
  }

  /* Section titre */
  .section-title{
    font-size:18px;
  }

  /* Communiqués */
  .communique-card{
    flex-direction:column;
  }

  .communique-img{
    width:100% !important;
  }

  /* Documents */
  .doc-item{
    flex-direction:column;
    gap:8px;
  }

  /* Formulaire contact */
  .contact-form{
    padding:16px;
  }

  .input-group{
    width:100%;
  }

  .input-group input,
  .input-group textarea{
    width:100%;
    box-sizing:border-box;
  }

  /* Toast urgent mobile */
  #urgent-toast{
    width:calc(100% - 20px) !important;
    right:10px !important;
    left:10px !important;
    bottom:10px;
    font-size:13px;
  }

  /* Trombi conseillers */
  .trombi{
    grid-template-columns:1fr;
  }

  /* Projets grid */
  .projets-grid,
  .projets-widget-grid{
    grid-template-columns:1fr;
  }

  /* Galerie */
  .gallery-grid{
    grid-template-columns:repeat(2, 1fr);
  }

  /* Albums */
  .albums-grid{
    grid-template-columns:1fr;
  }

  /* Vidéo grid */
  .video-grid{
    grid-template-columns:1fr;
  }

  /* Mot du président */
  .president-card{
    flex-direction:column;
  }

  .president-photo img{
    width:100%;
    height:200px;
  }

  /* Footer */
  .footer-widgets{
    grid-template-columns:1fr !important;
  }

  /* Pagination */
  .page-numbers{
    padding:6px 10px;
    font-size:13px;
  }

  /* Back button */
  .back-button{
    margin:10px;
  }

  /* Single article */
  .single-article{
    padding:0 12px;
  }

  /* Post navigation */
  .post-navigation{
    flex-direction:column;
    gap:8px;
  }

  /* Video meta bar */
  .video-meta-bar{
    flex-wrap:wrap;
    gap:8px;
  }

  /* Breadcrumb */
  .breadcrumb{
    font-size:12px;
    flex-wrap:wrap;
  }

}

/* ----- TRÈS PETIT MOBILE (max 380px) ----- */
@media(max-width:380px){

  .search-form{
    display:none;
  }

  .hero-slider{
    height:180px;
  }

  .slide-caption{
    display:none;
  }

}

/* =====================================================
   CORRECTIF — SÉLECTEUR DE LANGUE POLYLANG (RTL)
   Le dropdown langue débordait hors du cadre header
===================================================== */

/* Conteneur du switcher langue */
.menu .menu-item-language,
.menu li.lang-item{
  position:relative;
}

/* Dropdown langue — rester dans le cadre */
.menu .menu-item-language ul,
.menu li.lang-item ul,
.menu li.lang-item .sub-menu{
  position:absolute;
  top:100%;
  right:0;        /* ✅ aligné à droite en arabe */
  left:auto;
  min-width:140px;
  background:#fff;
  border-radius:8px;
  box-shadow:0 8px 20px rgba(0,0,0,.2);
  z-index:9999;
  overflow:hidden;
}

/* En français — dropdown langue aligné à droite aussi
   pour ne pas déborder hors écran */
html:not(.lang-ar) .menu li.lang-item .sub-menu,
html:not(.lang-ar) .menu .menu-item-language ul{
  right:0;
  left:auto;
}

/* Liens dans le dropdown langue */
.menu li.lang-item .sub-menu a,
.menu .menu-item-language ul a{
  color:#222 !important;
  padding:10px 14px;
  display:flex;
  align-items:center;
  gap:6px;
  font-size:14px;
  white-space:nowrap;
}

.menu li.lang-item .sub-menu a:hover,
.menu .menu-item-language ul a:hover{
  background:var(--primary);
  color:#fff !important;
}

/* Empêcher le flag de grossir */
.menu li.lang-item img,
.menu .menu-item-language img{
  width:18px !important;
  height:auto;
  vertical-align:middle;
}

/* =====================================================
   CORRECTIF GLOBAL — Dernier item du menu (langue)
   Force le dropdown à ne pas déborder à droite
===================================================== */

/* Tout dernier li du menu principal */
.main-menu > li:last-child > ul,
.main-menu > li:last-child .sub-menu{
  left: auto !important;
  right: 0 !important;
}

/* Avant-dernier aussi (cas où langue est pénultième) */
.main-menu > li:nth-last-child(2) > ul,
.main-menu > li:nth-last-child(2) .sub-menu{
  left: auto !important;
  right: 0 !important;
}

/* Solution radicale — overflow caché sur le header
   pour éviter tout débordement */
header{
  overflow: visible !important;
}

#site-wrapper{
  overflow-x: hidden;
}

/* Le dropdown langue reste dans le viewport */
.main-menu > li > ul{
  max-width: calc(100vw - 20px);
}

/* =====================================================
   CORRECTIF FINAL — Dropdown langue ouvre vers le HAUT
   Pour éviter de sortir du cadre vert du header
===================================================== */

/* Le dropdown du dernier item (langue) s'ouvre vers le haut */
.main-menu > li:last-child > .sub-menu,
.main-menu > li:last-child > ul{
  top: auto !important;
  bottom: 100% !important;
  left: auto !important;
  right: 0 !important;
  margin-bottom: 5px;
  margin-top: 0;
}

/* En arabe : premier item (langue est en premier en RTL) */
html.lang-ar .main-menu > li:first-child > .sub-menu,
html.lang-ar .main-menu > li:first-child > ul{
  top: auto !important;
  bottom: 100% !important;
  right: auto !important;
  left: 0 !important;
  margin-bottom: 5px;
}

/* =====================================================
   CORRECTIF — BOUTONS WIDGET MOT DU PRÉSIDENT ET PROJETS
===================================================== */

/* Bouton "Lire la suite" widget président */
.widget-president .btn-projet,
.widget-president a.btn-projet{
  display:inline-block;
  background:var(--primary);
  color:#fff !important;
  border:2px solid var(--primary);
  padding:8px 16px;
  border-radius:20px;
  text-decoration:none;
  font-size:13px;
  font-weight:600;
  transition:0.3s;
}

.widget-president .btn-projet:hover{
  background:var(--secondary);
  color:#fff !important;
  border-color:var(--secondary);
}

/* Bouton "Voir" widget derniers projets */
.projet-widget-card .btn-projet,
.projets-widget-grid .btn-projet{
  display:inline-block;
  background:var(--primary);
  color:#fff !important;
  border:2px solid var(--primary);
  padding:6px 14px;
  border-radius:20px;
  text-decoration:none;
  font-size:12px;
  font-weight:600;
  transition:0.3s;
  margin-top:8px;
}

.projet-widget-card .btn-projet:hover,
.projets-widget-grid .btn-projet:hover{
  background:var(--secondary);
  border-color:var(--secondary);
  color:#fff !important;
}

/* Image projet manquante — placeholder */
.projet-widget-card img{
  display:block;
  width:100%;
  height:140px;
  object-fit:cover;
  background:#e8f5e9;
}
/* =====================================================
   FOOTER GRID — CORRECTIF FINAL ABSOLU
===================================================== */

footer .footer-widgets,
#site-wrapper footer .footer-widgets,
body footer .footer-widgets{
  display:grid !important;
  grid-template-columns:repeat(4, 1fr) !important;
  grid-auto-flow:column !important;
  gap:25px !important;
  padding:25px 15px !important;
  width:100% !important;
  box-sizing:border-box !important;
}

footer .footer-widgets > div,
footer .footer-widget{
  display:block !important;
  min-width:0 !important;
  width:auto !important;
  float:none !important;
}

@media(max-width:768px){
  footer .footer-widgets,
  #site-wrapper footer .footer-widgets{
    grid-template-columns:repeat(2, 1fr) !important;
  }
}

@media(max-width:480px){
  footer .footer-widgets,
  #site-wrapper footer .footer-widgets{
    grid-template-columns:1fr !important;
  }
}