/* =========================================================
   VARIABLES
   ========================================================= */
:root{
  --cci-primary:#0b3d66;      /* bleu institutionnel */
  --cci-primary-dark:#082b48;
  --cci-accent:#c8952b;       /* or / doré institutionnel */
  --cci-light:#f4f7fa;
  --cci-text:#2b3440;
  --cci-muted:#6b7684;
  --radius:10px;
  --font-heading:'Poppins', sans-serif;
  --font-body:'Open Sans', sans-serif;
}

*{box-sizing:border-box;}
body{
  font-family:var(--font-body);
  color:var(--cci-text);
  background:#fff;
  margin:0;
}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading); font-weight:600; color:var(--cci-primary-dark);}
a{text-decoration:none; color:var(--cci-primary);}
a:hover{color:var(--cci-accent);}
img{max-width:100%; height:auto;}

.container{max-width:1200px;}

/* =========================================================
   TOP BAR
   ========================================================= */
.top-bar{
  background:var(--cci-primary-dark);
  color:#dbe6f0;
  font-size:.85rem;
  padding:6px 0;
}
.top-bar-contacts span{margin-right:22px;}
.top-bar-contacts i{margin-right:6px; color:var(--cci-accent);}
.top-bar-socials a{color:#dbe6f0; margin-left:12px; font-size:.95rem;}
.top-bar-socials a:hover{color:var(--cci-accent);}

/* =========================================================
   HEADER / NAVBAR
   ========================================================= */
.site-header{
  background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  z-index:1030;
}
.site-logo{height:68px; width:auto; margin-right:14px; transition:.2s;}
.logo-mobile{display:none;}
@media (max-width:991px){
  .site-logo{height:58px;}
}
@media (max-width:576px){
  .site-logo{height:48px;}
  .logo-desktop{display:none;}
  .logo-mobile{display:block;}
}
.brand-text{font-family:var(--font-heading); font-weight:700; color:var(--cci-primary-dark); font-size:1.1rem; line-height:1.25; max-width:280px;}
.navbar{padding:14px 0;}
.navbar-nav .nav-link{
  color:var(--cci-text);
  font-weight:600;
  font-size:.95rem;
  padding:10px 16px !important;
  border-radius:6px;
  transition:.2s;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus{color:var(--cci-primary); background:var(--cci-light);}
.dropdown-menu{border:none; box-shadow:0 8px 24px rgba(0,0,0,.12); border-radius:8px; padding:8px;}
.dropdown-item{padding:9px 14px; border-radius:6px; font-weight:500; font-size:.92rem;}
.dropdown-item:hover{background:var(--cci-light); color:var(--cci-primary);}

@media (min-width:992px){
  .dropdown:hover > .dropdown-menu{display:block; margin-top:0;}
}

/* Recherche (header) */
.search-toggle-btn{
  width:40px; height:40px; border-radius:50%; border:1px solid #e3e8ee; background:#fff;
  color:var(--cci-primary); display:inline-flex; align-items:center; justify-content:center;
  font-size:1rem; margin-left:6px; transition:.2s; flex-shrink:0;
}
.search-toggle-btn:hover, .search-toggle-btn.active{background:var(--cci-primary); color:#fff; border-color:var(--cci-primary);}
.site-search-panel{
  max-height:0; overflow:hidden; transition:max-height .3s ease; background:var(--cci-light);
}
.site-search-panel.show{max-height:100px;}
.site-search-panel .container{padding-top:16px; padding-bottom:16px;}
.site-search-form{display:flex; gap:10px; max-width:640px; margin:0 auto;}
.site-search-form input{
  flex:1; border:1px solid #dfe6ec; border-radius:30px; padding:11px 20px; font-size:.95rem;
}
.site-search-form input:focus{outline:none; border-color:var(--cci-primary); box-shadow:0 0 0 .15rem rgba(11,61,102,.12);}
.site-search-form button{
  background:var(--cci-primary); color:#fff; border:none; border-radius:30px; padding:11px 24px; font-weight:600; white-space:nowrap;
}
.site-search-form button:hover{background:var(--cci-primary-dark);}

/* =========================================================
   HERO SLIDER
   ========================================================= */
.hero-slider{position:relative;}
.hero-slider .carousel-item{height:560px; background-size:cover; background-position:center;}
.hero-slider .carousel-item::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,43,72,.35) 0%, rgba(8,43,72,.85) 100%);
}
.hero-caption{
  position:absolute; left:0; right:0; bottom:0;
  z-index:2; color:#fff; padding:40px 0 70px;
}
.hero-caption .badge-date{
  background:var(--cci-accent); color:#fff; font-weight:600;
  padding:5px 14px; border-radius:20px; font-size:.8rem; display:inline-block; margin-bottom:14px;
}
.hero-caption h2{color:#fff; font-size:2.1rem; max-width:800px; margin-bottom:14px;}
.hero-caption p{color:#e7edf3; max-width:650px; font-size:1.02rem;}
.hero-slider .btn-hero{
  background:var(--cci-accent); border:none; color:#fff; font-weight:600;
  padding:10px 26px; border-radius:30px; margin-top:10px; display:inline-block;
}
.hero-slider .btn-hero:hover{background:#fff; color:var(--cci-primary-dark);}
.hero-slider .carousel-indicators{margin-bottom:20px;}
.hero-slider .carousel-control-prev,
.hero-slider .carousel-control-next{width:6%;}
.hero-wave{display:block; width:100%; height:auto; position:relative; margin-top:-2px; line-height:0;}
.hero-wave svg{display:block; width:100%; height:60px;}

@media (max-width:768px){
  .hero-slider .carousel-item{height:440px;}
  .hero-caption h2{font-size:1.4rem;}
  .hero-wave svg{height:32px;}
}

/* =========================================================
   SECTIONS GÉNÉRIQUES
   ========================================================= */
.section{padding:70px 0; position:relative;}
.section-light{background:var(--cci-light); position:relative; overflow:hidden;}
.section-light::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(11,61,102,.07) 1.4px, transparent 1.4px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.15));
  mask-image:linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.15));
}
.section-light > .container{position:relative; z-index:1;}
.section-title{text-align:center; margin-bottom:45px;}
.section-title .eyebrow{
  color:var(--cci-accent); font-weight:700; text-transform:uppercase; font-size:.8rem; letter-spacing:1.5px;
}
.section-title h2{font-size:1.9rem; margin-top:8px;}
.section-title p{color:var(--cci-muted); max-width:620px; margin:10px auto 0;}

/* Cartes (articles, formations, pages) — image cliquable intégrale */
.card-cci{
  display:flex; flex-direction:column; border:none; border-radius:var(--radius); overflow:hidden;
  box-shadow:0 4px 18px rgba(11,61,102,.08); transition:transform .25s, box-shadow .25s; height:100%;
  background:#fff; text-decoration:none; color:inherit;
}
.card-cci:hover{transform:translateY(-6px); box-shadow:0 16px 34px rgba(11,61,102,.16); color:inherit;}
.card-cci .card-img-wrap{position:relative; overflow:hidden;}
.card-cci .card-img-top{width:100%; height:190px; object-fit:cover; display:block; transition:transform .4s;}
.card-cci:hover .card-img-top{transform:scale(1.06);}
.card-cci .card-badge-overlay{
  position:absolute; left:12px; bottom:12px; z-index:2;
  background:rgba(8,43,72,.78); color:#fff; font-size:.72rem; font-weight:700;
  padding:6px 13px; border-radius:20px; display:inline-flex; align-items:center; gap:6px;
  backdrop-filter:blur(2px);
}
.card-cci .card-body{padding:20px 22px 22px; display:flex; flex-direction:column; flex:1;}
.card-cci .card-pill{
  align-self:flex-start; background:#e3f0e8; color:#1c7d43; font-size:.68rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.5px; padding:5px 13px; border-radius:20px; margin-bottom:12px;
}
.card-cci .card-title{
  font-size:1.05rem; font-weight:700; color:var(--cci-titles, var(--cci-primary-dark)); margin:0 0 auto;
  line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.card-cci .card-text{color:var(--cci-muted); font-size:.9rem; margin-top:8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.card-cci .card-cta{
  margin-top:16px; font-weight:700; color:var(--cci-primary); display:inline-flex; align-items:center; gap:6px;
  font-size:.82rem; text-transform:uppercase; letter-spacing:.4px;
}
.card-cci .card-cta i{transition:transform .2s;}
.card-cci:hover .card-cta{color:var(--cci-accent);}
.card-cci:hover .card-cta i{transform:translateX(5px);}
/* ancien champ, conservé pour compatibilité (date sans badge overlay) */
.card-cci .card-date{color:var(--cci-accent); font-size:.8rem; font-weight:700; text-transform:uppercase;}

.service-box{
  text-align:center; padding:34px 22px; border-radius:var(--radius);
  background:#fff; box-shadow:0 4px 18px rgba(11,61,102,.08); height:100%; transition:.25s;
}
.service-box:hover{background:var(--cci-primary); }
.service-box:hover h3,.service-box:hover p{color:#fff;}
.service-box .icon{
  width:70px; height:70px; border-radius:50%; background:var(--cci-light);
  display:flex; align-items:center; justify-content:center; margin:0 auto 18px; font-size:1.7rem; color:var(--cci-primary);
}
.service-box h3{font-size:1.1rem;}
.service-box p{color:var(--cci-muted); font-size:.9rem; margin-bottom:0;}

/* Stats */
.stats-band{background:var(--cci-primary); color:#fff; padding:50px 0; position:relative; overflow:hidden;}
.stats-band::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 15% 20%, rgba(255,255,255,.08), transparent 45%),
             radial-gradient(circle at 85% 80%, rgba(255,255,255,.06), transparent 45%);
}
.stats-band > .container{position:relative; z-index:1;}
.stats-band .stat-num{font-family:var(--font-heading); font-size:2.4rem; font-weight:700; color:var(--cci-accent);}
.stats-band .stat-label{font-size:.9rem; color:#dbe6f0;}

/* Buttons */
.btn-cci{
  background:var(--cci-primary); border:none; color:#fff; font-weight:600;
  padding:11px 28px; border-radius:30px; transition:.2s;
}
.btn-cci:hover{background:var(--cci-primary-dark); color:#fff;}
.btn-outline-cci{
  border:2px solid var(--cci-primary); color:var(--cci-primary); font-weight:600;
  padding:9px 26px; border-radius:30px; background:transparent;
}
.btn-outline-cci:hover{background:var(--cci-primary); color:#fff;}

/* Page header (bannière de page interne) */
.page-banner{
  background:linear-gradient(135deg, var(--cci-primary-dark), var(--cci-primary));
  color:#fff; padding:55px 0; text-align:center; position:relative; overflow:hidden;
}
.page-banner::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.12) 1.4px, transparent 1.4px);
  background-size:20px 20px;
  -webkit-mask-image:radial-gradient(ellipse at center, rgba(0,0,0,.8), transparent 75%);
  mask-image:radial-gradient(ellipse at center, rgba(0,0,0,.8), transparent 75%);
}
.page-banner > .container{position:relative; z-index:1;}
.page-banner h1{color:#fff; margin-bottom:8px;}
.page-banner .breadcrumb{justify-content:center; margin-bottom:0;}
.page-banner .breadcrumb a{color:#cfe0ef;}
.page-banner .breadcrumb .active{color:#fff;}

.page-content{padding:60px 0; font-size:1.02rem; line-height:1.8;}
.page-content img{border-radius:var(--radius); margin:20px 0;}

/* =========================================================
   VARIANTES DE STYLE (module Apparence)
   ========================================================= */
body.header-style-transparent .site-header{
  position:absolute; top:0; left:0; right:0; background:transparent; box-shadow:none;
}
body.header-style-transparent .site-header .nav-link{color:#fff;}
body.header-style-transparent .site-header .brand-text{color:#fff;}
body.footer-style-light .site-footer{background:var(--cci-light); color:var(--cci-text);}
body.footer-style-light .footer-slogan, body.footer-style-light .footer-links a, body.footer-style-light .footer-contact, body.footer-style-light .footer-bottom{color:var(--cci-muted);}
body.footer-style-light .footer-title, body.footer-style-light .footer-heading{color:var(--cci-text);}

/* =========================================================
   NEWSLETTER
   ========================================================= */
.newsletter-band{background:var(--cci-primary); color:#fff; padding:40px 0;}
.newsletter-band h3{color:#fff; font-size:1.3rem;}
.newsletter-band p{color:#dbe6f0;}
.newsletter-form{display:flex; gap:10px; flex-wrap:wrap;}
.newsletter-input{
  flex:1; min-width:220px; padding:12px 16px; border-radius:var(--btn-radius, 30px);
  border:none; font-size:.95rem;
}
.newsletter-submit{
  background:var(--cci-accent); color:#fff; border:none; font-weight:700;
  padding:12px 28px; border-radius:var(--btn-radius, 30px); white-space:nowrap;
}
.newsletter-submit:hover{background:#fff; color:var(--cci-primary-dark);}
.newsletter-honeypot{position:absolute; left:-9999px; width:1px; height:1px; opacity:0;}
.newsletter-alert{
  padding:12px 18px; border-radius:8px; font-weight:600; display:inline-flex; align-items:center; gap:8px;
}
.newsletter-alert-success{background:#dbf3e3; color:#1c7d43;}
.newsletter-alert-error{background:#f4d8d8; color:#a02020;}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{background:var(--cci-primary-dark); color:#cfe0ef; padding:60px 0 20px; margin-top:0;}
.footer-title{color:#fff;}
.footer-slogan{color:#a9c1d6; font-size:.92rem;}
.footer-heading{color:#fff; font-size:1rem; margin-bottom:16px;}
.footer-links{list-style:none; padding:0; margin:0;}
.footer-links li{margin-bottom:8px;}
.footer-links a{color:#cfe0ef; font-size:.92rem;}
.footer-links a:hover{color:var(--cci-accent);}
.footer-contact{list-style:none; padding:0; margin:0; font-size:.9rem;}
.footer-contact li{margin-bottom:10px;}
.footer-contact i{color:var(--cci-accent); width:18px;}
.footer-socials a{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.08);
  color:#fff; margin-right:8px; margin-top:10px;
}
.footer-socials a:hover{background:var(--cci-accent);}
.site-footer hr{border-color:rgba(255,255,255,.1); margin:35px 0 18px;}
.footer-bottom{color:#a9c1d6; font-size:.85rem;}

/* =========================================================
   CATÉGORIES / BADGES ACTUALITÉS
   ========================================================= */
.card-category{
  display:inline-block; background:var(--cci-light); color:var(--cci-primary);
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  padding:4px 12px; border-radius:20px; margin-bottom:10px;
}
.badge-cat{background:rgba(255,255,255,.18); margin-right:8px;}
.btn-read-more{
  color:var(--cci-primary); font-weight:700; font-size:.9rem; display:inline-flex; align-items:center; gap:6px;
}
.btn-read-more:hover{color:var(--cci-accent);}

.category-filters{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:40px;}
.cat-filter{
  padding:8px 20px; border-radius:30px; border:1px solid #dfe6ec; color:var(--cci-text);
  font-weight:600; font-size:.88rem; background:#fff;
}
.cat-filter:hover{border-color:var(--cci-primary); color:var(--cci-primary);}
.cat-filter.active{background:var(--cci-primary); border-color:var(--cci-primary); color:#fff;}

/* Pagination */
.pagination .page-link{color:var(--cci-primary); border-color:#e3e8ee; font-weight:600; padding:9px 15px;}
.pagination .page-item.active .page-link{background:var(--cci-primary); border-color:var(--cci-primary);}
.pagination .page-item.disabled .page-link{color:#b7c1cc;}

/* =========================================================
   ARTICLE : galerie, pièces jointes, partage
   ========================================================= */
.article-meta{display:flex; flex-wrap:wrap; align-items:center; font-size:.92rem;}
.gallery-thumb{width:100%; height:160px; object-fit:cover; border-radius:8px; transition:.2s;}
.gallery-thumb:hover{opacity:.85; transform:scale(1.02);}

.attachment-list{list-style:none; padding:0; margin:0;}
.attachment-list li{margin-bottom:10px;}
.attachment-list a{
  display:flex; align-items:center; gap:12px; padding:12px 16px; background:var(--cci-light);
  border-radius:8px; color:var(--cci-text); font-weight:600;
}
.attachment-list a:hover{background:#e6eef5;}
.attachment-list i{color:var(--cci-primary); font-size:1.3rem; width:24px;}
.attachment-list small{margin-left:auto; color:var(--cci-muted); font-weight:400;}

.share-buttons{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.share-label{font-weight:600; color:var(--cci-muted); font-size:.88rem; margin-right:4px;}
.share-btn{
  width:38px; height:38px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font-size:.95rem;
}
.share-facebook{background:#1877f2;}
.share-twitter{background:#000;}
.share-linkedin{background:#0a66c2;}
.share-whatsapp{background:#25d366;}
.share-email{background:var(--cci-muted);}
.share-btn:hover{opacity:.85; color:#fff;}

.article-tags{display:flex; flex-wrap:wrap; align-items:center; gap:8px;}
.tag-badge{background:var(--cci-light); color:var(--cci-primary); font-size:.8rem; font-weight:600; padding:5px 14px; border-radius:20px;}

.preview-banner{background:#fff3cd; color:#8a6d00; padding:12px 0; font-weight:600; text-align:center; border-bottom:1px solid #f0d68a;}

/* =========================================================
   CONTACT FORM
   ========================================================= */
.contact-form .form-control{border-radius:8px; padding:12px 14px; border:1px solid #dfe6ec;}
.contact-form .form-control:focus{border-color:var(--cci-primary); box-shadow:0 0 0 .2rem rgba(11,61,102,.12);}
.contact-info-box{background:var(--cci-light); border-radius:var(--radius); padding:30px;}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:991px){
  .navbar-nav{padding:15px 0;}
  .navbar-nav .nav-link{padding:10px 4px !important;}
  .dropdown-menu{box-shadow:none; padding-left:10px;}
}