/*
Theme Name: Kribi Port Vitrine
Author: ALAPA  Ingrid 
Description: Thème institutionnel clair pour présenter le PAK, ses services et actualités.
Version: 0.1.0
Text Domain: kribi-port-vitrine
*/
/* Logo: réduit sans l'étirer */

/* =========================================================
   NAVBAR KCT - TRANSPARENCE + OPACITÉ AU SCROLL + SOUS-MENUS
   ========================================================= */

/* === Variables couleurs KCT === */
:root {
  --menu-bg: rgba(246, 249, 250, 0.884);
  --menu-bg-scrolled: rgba(245, 248, 249, 0.744);
  --menu-link: #0076BF;
  --menu-hover: #CFA64A;

  --notification-bar-height: 0px;
  --navbar-height: 0px;

  --nav-h: calc(var(--notification-bar-height) + var(--navbar-height));
}


body,
html {
  padding-top: 35px !important;
}


/* =========================================================
   FIX: Barre de notification + Navbar
   ========================================================= */

/* Pas de padding-top global (le plugin pousse déjà la page) */
/* === Ajustement du hero sous la navbar === */


/* === Quand on défile (scroll) === */
.navbar-custom.scrolled {
  position: fixed !important;
  background-color: var(--menu-bg-scrolled) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  backdrop-filter: none; /* pas de flou */
}




/* === Logo === */
.navbar.navbar-custom.fixed-top .navbar-brand img.site-logo {
  height: 40px !important;
  width: auto !important;
  max-height: 56px !important;
  display: block;
}
@media (min-width: 992px){ .site-logo { height: 60px; } }
@media (max-width: 575.98px){ .site-logo { height: 44px; } }

/* Réduction de l’espace horizontal entre les items */
.navbar-custom .navbar-nav {
  gap: 0.5rem !important; /* par défaut tu avais gap-4 → remplace par 1rem ou 0.5rem */
}

/* === Liens du menu principal === */
.navbar-custom .navbar-nav > li > a {
  color: var(--menu-link) !important;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
  transition: color .3s ease, transform .2s ease;
}
.navbar-custom .navbar-nav > li > a:hover,
.navbar-custom .navbar-nav > li.current-menu-item > a,
.navbar-custom .navbar-nav > li.current_page_item > a {
  color: var(--menu-hover) !important;
  transform: translateY(-1px);
}

/* Soulignement discret sur la page active */
.navbar-custom .navbar-nav > li.current-menu-item > a::after {
  content: "";
  display: block;
  margin: 2px auto 0;
  width: 50%;
  height: 2px;
  background-color: var(--menu-hover);
  border-radius: 2px;
}

/* === Parents avec sous-menus === */
.navbar-custom .navbar-nav li.menu-item-has-children { position: relative; }
.navbar-custom .menu-item-has-children > a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}
.navbar-custom .menu-item-has-children > a::before{
  content: "›";
  font-size: 50px;
  display: inline-block;
  line-height: 1;
  font-size: .6em;
  color: currentColor;
  transition: transform .2s ease;
}

/* === Sous-menu (desktop) === */
.navbar-custom .navbar-nav .sub-menu{
  display:none;
  position:absolute; left:0; top:100%;
  min-width:220px;
  background: #0777BD; /* fond dropdown plus opaque */
  padding:8px 0;
  box-shadow:0 12px 24px rgba(0,0,0,.2);
  z-index:1100;
}
@media (min-width: 992px){
  .navbar-custom .navbar-nav li.menu-item-has-children:hover > .sub-menu{ display:block; }
}

/* Mobile : sous-menus fermés par défaut, sauf item actif ou .open */
/* Petits écrans AVEC hover (souris/stylet) : ouvrir au survol */
@media (max-width: 991.98px) and (hover: hover) and (pointer: fine) {
  .navbar-custom .navbar-nav .sub-menu {
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 220px;
    display: none;
    background: #0777BD;
    padding: 8px 0;
    box-shadow: 0 12px 24px rgba(0,0,0,.2);
    z-index: 1100;
  }
  .navbar-custom .navbar-nav li.menu-item-has-children:hover > .sub-menu {
    display: block;
  }

  /* On imite le desktop même sous 992px si hover possible */
  .navbar-custom .navbar-nav li.menu-item-has-children { position: relative; }
  .navbar-custom .navbar-nav .sub-menu .sub-menu { left: 100%; top: 0; } /* niveau 2 */
}


/* Liens sous-menu */
.navbar-custom .navbar-nav .sub-menu li{ display:block; }
.navbar-custom .navbar-nav .sub-menu a{
  display:block; padding:10px 14px;
  color:#fff; text-decoration:none; font-weight:600; text-transform:none;
  transition: background .3s, color .3s;
}
.navbar-custom .navbar-nav .sub-menu a:hover{ background:rgba(255,255,255,.06); color:var(--menu-hover); }

/* Bouton burger lisible */
.navbar-custom .navbar-toggler-icon{ filter: invert(1) brightness(1.5); }

/* =======================
   MODALE DE RECHERCHE
   ======================= */
/* ==============================
   🔍 Bouton de recherche stylé
============================== */
.btn-search-trigger {
  background-color: #0777BD;     /* Bleu par défaut */
  color: #ffffff;                /* Icône blanche */
  border: none;
  border-radius: 50%;            /* Bouton rond */
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  transition: all 0.25s ease;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  margin-right: 10px;
  
}

/* Survol et clic (orange) */
.btn-search-trigger:hover,
.btn-search-trigger:focus,
.btn-search-trigger:active {
  background-color: #F8B21D;     /* Orange */
  color: #fff;                   /* Icône blanche */
  transform: scale(1.05);        /* Effet léger */
  box-shadow: 0 0 10px rgba(248, 178, 29, 0.5);
}

/* Ajustement mobile (plus petit) */
@media (max-width: 991.98px) {
  .btn-search-trigger {
    width: 38px;
    height: 38px;
    font-size: 1.1rem;
    margin-left: 16px;
  }
}

/* ==============================
   🎨 Modale de recherche
============================== */
.kpv-search-modal {
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: flex-start;
  padding: 4vh 1.5rem;
  z-index: 2000;
}
.kpv-search-modal.is-open {
  display: flex;
}
.kpv-search-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(5px);
  z-index: 2000;
}
.kpv-search-dialog {
  position: relative;
  z-index: 2100;
  background: rgba(255, 255, 255, 0.97);
  border-radius: 10px;
  padding: 2rem;
  width: 90%;
  max-width: 600px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
.kpv-search-input {
  width: 100%;
  padding: 1rem;
  font-size: 1.2rem;
  border: 2px solid #ccc;
  border-radius: 6px;
  outline: none;
}
.kpv-search-input:focus {
  border-color: #0777BD;
  box-shadow: 0 0 5px rgba(7, 119, 189, 0.4);
}
.kpv-search-close {
  position: absolute;
  right: 2rem;
  top: 2rem;
  border: none;
  background: transparent;
  font-size: 1.3rem;
  color: #333;
  cursor: pointer;
  transition: color 0.25s;
}
.kpv-search-close:hover {
  color: #F8B21D;
}





/* Lorsque l'utilisateur clique sur la notification, la navbar se déplace en haut */
.navbar-custom.moved-to-top {
  top: 0px !important;
  transition: top 0.3s ease !important;  /* Transition fluide lors du mouvement */
}


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

/* =========================================
   HERO : forcer "titre" puis "sous-titre" en 2 lignes
   (même sur écrans très larges)
   ========================================= */

#heroCarousel .carousel-caption.hero-caption.caption-bottom-left{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  max-width: min(980px, 92vw); /* évite que tout s'étale trop */
}

#heroCarousel { position: relative; }
#heroCarousel .carousel-inner,
#heroCarousel .carousel-item{
  
  min-height: 520px;
  overflow: hidden;
}
#heroCarousel .carousel-item > img{
  position:absolute; 
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover; 
  object-position:center; 
  display:block;
}
.hero-caption.caption-bottom-left{
  position:absolute; z-index:2; text-align:left;
  left: clamp(16px, 6vw, 96px);
  right: clamp(16px, 8vw, 120px);
  bottom: max(clamp(18px, 6vw, 80px), var(--safe-bottom));
}
#heroCarousel .carousel-item{ padding-bottom: var(--safe-bottom); }


/* hero = plein écran moins la hauteur réelle du header */

/* l’image remplit le slide proprement */


/* la légende ne colle jamais le bord bas */
.hero-caption.caption-bottom-left{
  position: absolute; z-index: 2; text-align: left;
  left: clamp(16px, 6vw, 96px);
  right: clamp(16px, 8vw, 120px);
  bottom: max(clamp(18px, 6vw, 80px), var(--safe-bottom));
}
#heroCarousel .carousel-item{ padding-bottom: var(--safe-bottom); }


/* Décale tout le document sous le header mesuré */


/* Le hero = plein écran moins la barre (nav + notifications + barre admin) */



/* L’image remplit parfaitement le slide */


/* La caption ne touche plus le bord inférieur */
.hero-caption.caption-bottom-left{
  left: clamp(16px, 6vw, 96px);
  right: clamp(16px, 8vw, 120px);
  bottom: max(clamp(18px, 6vw, 80px), var(--safe-bottom));
}

/* Option sûr : ajoute un “fond invisible” en bas du slide pour éviter le rognage */



/* ==============================
   🧭 Navbar : opacité douce
============================== */
/* ========== HERO — STYLE EXPERT MINIMAL ========== */

/* Vignette douce (assure la lisibilité sans masquer la photo) */
#heroCarousel .carousel-item::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 600px at 12% 80%, rgba(0,0,0,.46), transparent 65%),
    linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(6,16,30,.75) 95%);
  pointer-events:none; z-index:1;
}

/* Position de la caption (garde tes classes) */
.hero-caption.caption-bottom-left{
  position:absolute; z-index:2; text-align:left;
  left: clamp(16px, 6vw, 96px);
  right: clamp(16px, 8vw, 120px);
  bottom: clamp(18px, 6vw, 80px);
}

/* On neutralise "glass" (pas de boîte) */
.hero-caption.glass{
  background: transparent !important;
  backdrop-filter: none !important;
  border: 0 !important; box-shadow: none !important;
  padding: 0 !important;
}

/* Titre : fort, blaeu, avec soulignement dégradé discret */
.hero-title{
  margin: 0 0 .6rem 0;
  font-family: Arial, sans-serif;
  color: #009adc;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1.06;
  text-shadow: 0 4px 10px rgba(0, 0, 0, 0.55);
  font-size: clamp(1.7rem, 6vw, 3.4rem);
  position: relative;
  display: inline-block;
}
.hero-title::after{
  content:"";
  display:block;
  margin-top: .5rem;
  width: clamp(84px, 14vw, 180px);
  height: 4px; border-radius: 3px;
  background:#CC9009;
}

/* Sous-titre : pastille premium (contraste, hiérarchie claire) */
.hero-subtitle{
  font-family: Arial, sans-serif;
  display:inline-block;
  margin: .2rem 0 0;
  padding: .4rem .75rem;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1;
  color: #CC9009;
  text-shadow: 0 4px 10px rgba(0, 0, 0, 0.55);
  font-size: clamp(.88rem, 2.7vw, 1.5rem);
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
}

/* Ajustements responsive */
@media (max-width: 768px){
  .hero-caption.caption-bottom-left{
    left: clamp(12px, 5vw, 24px);
    right: clamp(12px, 5vw, 24px);
    bottom: clamp(14px, 6vw, 32px);
  }
  .hero-title{ font-size: clamp(1rem, 4vw, 2rem); }
  .hero-title::after{ width: clamp(64px, 22vw, 120px); height: 3px; }
  .hero-subtitle{
    padding: .34rem .60rem;
    font-weight: 700;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.55);
    line-height: 1;
  }
}

/* Option (désactive si tu veux statique) : micro-motion subtile à l’arrivée */
@media (prefers-reduced-motion: no-preference){
  .hero-title{ animation: heroFadeUp .45s ease-out .05s both; }
  .hero-subtitle{ animation: heroFadeUp .5s ease-out .12s both; }
  @keyframes heroFadeUp{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)} }
}

/* Contexte pour le ::after et hauteur stable du hero */
#heroCarousel { position: relative; }
#heroCarousel .carousel-inner,
#heroCarousel .carousel-item{
  position: relative;
  min-height: clamp(520px, 85vh, 1000px); /* hauteur fixe et responsive */
  overflow: hidden;
}

/* L’image remplit le slide, sans déformer */
#heroCarousel .carousel-item > img{
  position: absolute;        /* colle l'image au slide */
  inset: 0;                  /* top/right/bottom/left: 0 */
  width: 100%;
  height: 100%;
  object-fit: cover;         /* couvre sans déformation */
  object-position: center;   /* recadrage centré */
  display: block;
}


/* ====== Diapo 4 : overlay gauche + boîte droite ====== */
/* 1) Le carrousel et ses items prennent toute la hauteur de la fenêtre */


/* L'image suit la hauteur plein écran */
#heroCarousel .carousel-item > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 2) L’overlay bleu reste sous la carte blanche */
.hero-overlay-left {
  position: absolute;
  z-index: 1;
}

/* 3) La carte blanche couvre TOUT, au-dessus de tout */
.hero-box-right {
  position: absolute;
  inset: 0;          /* top:0 right:0 bottom:0 left:0 */
  width: 100%;
  height: 100%;
  background: #fffffff0;  /* opaque */
  color: #0b1f36;
   display: flex;                     /* active le centrage flex */
  flex-direction: column;
  justify-content: center;           /* centre verticalement */
  align-items: center;               /* centre horizontalement */
  text-align: center;                /* texte centré */
  box-shadow: none;
  overflow-y: auto; 
  padding: 3rem 6vw;
  overflow-y: auto;  /* scroll interne si contenu long */
  z-index: 3;        /* plus haut que l’overlay et l’image */
  box-shadow: none;
}

/* Titre + contenu (inchangés) */
.hero-rea-title{
  margin: 0 0 1rem 0;
  font-weight: 800;
  text-transform: uppercase;
  color: #0777BD;
  font-size: clamp(1.7rem, 4vw, 5rem);
}
.hero-rea-content{
  font-size: clamp(1rem, 1.9vw, 1.1rem);
  line-height: 1.6;
  max-width: 90ch;
}

/* Optionnel : sur mobile, même logique plein écran */
@media (max-width: 576px){
  #heroCarousel .carousel-item { min-height: 100svh; }
  .hero-overlay-left { display: none; } /* si tu veux la masquer en mobile */
  .hero-box-right { padding: 2rem 1.25rem; }
}

/* ====== Responsive ====== */
@media (max-width: 576px){
  .hero-overlay-left{ width: 36%; }     /* un peu plus visible en mobile */
  .hero-box-right{ max-width: 100vw; }
}


/* Le bouton en overlay en bas à droite */
/* Bouton ACTUALITÉS */
.home-cta{
  display: inline-flex;           /* place le texte et la flèche sur la même ligne */
  align-items: center;            /* aligne verticalement le contenu */
  gap: .6rem;                     /* espace entre texte et flèche */
  padding: .85rem 1.25rem;        /* plus besoin de padding-right extra */
  background: #fff;
     /* comme sur Abidjan Terminal */
  
  color: #f8b21d;
  font-size: 25px;                /* ta taille de texte */
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  text-decoration: none;
  white-space: nowrap;            /* évite le retour à la ligne */

  transition: transform .2s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease;
}

/* La flèche */
.home-cta .arrow{
  font-size: 2.3em;               /* ~ 45px si texte = 25px ; ajuste si besoin */
  line-height: 1;                 /* évite les décalages verticaux */
  transform: translateY(-2%);     /* micro-ajustement (0 à -4% selon police) */
}

/* Hover (option) */
.home-cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  color: #d89a14;
  border-color: #d89a14;
}

/* Mobile : un peu plus compact (option) */
@media (max-width: 576px){
  .home-cta{ font-size: 20px; padding: .7rem 1rem; }
  .home-cta .arrow{ font-size: 1.6em; }
}

/* Ouvert = chevron bas */
@media (min-width: 992px){
  .navbar-custom .menu-item-has-children:hover > a::before{
    content: "\f107";            /* fa-angle-down */
  }
}

/* Mobile: rapprocher des bords */
@media (max-width: 576px){
  .hero-cta{ right: 1rem; bottom: 1rem; padding: .7rem 2.6rem .7rem 1rem; }
}

/* Slide vidéo hero */
.hero-video-slide { position: relative; overflow: hidden; }

.hero-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;     /* comme une image cover */
  object-position: center;
  display: block;
}

/* pour que la slide garde la même hauteur que tes autres items */
#heroCarousel .hero-video-slide{
  min-height: clamp(520px, 85vh, 1000px);
}



/* =========================
   BOUTONS DE DEFILEMENT (KCT DESIGN)
   ========================= */
/* =========================
   HERO CAROUSEL - BOUTONS DE DÉFILEMENT (KCT DESIGN)
   ========================= */

/* Contexte pour les positions absolues */
#heroCarousel {
  position: relative;
  overflow: hidden;
}

/* =========================
   BOUTONS DE DÉFILEMENT
   ========================= */
#heroCarousel .carousel-control-prev,
#heroCarousel .carousel-control-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border-radius: 100%;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0; /* caché par défaut */
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.3s ease, box-shadow 0.3s ease;
  z-index: 999; /* au-dessus de la carte blanche */
}

/* positions desktop */
#heroCarousel .carousel-control-prev { left: 40px; }
#heroCarousel .carousel-control-next { right: 40px; }

/* Affichage au survol */
#heroCarousel:hover .carousel-control-prev,
#heroCarousel:hover .carousel-control-next {
  opacity: 1;
  pointer-events: auto;
}

/* =========================
   ICÔNES SVG BLANCHES (personnalisées)
   ========================= */
#heroCarousel .carousel-control-prev-icon,
#heroCarousel .carousel-control-next-icon {
  background-image: none !important; /* supprime l’icône Bootstrap */
  display: block;
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50% 100%;
  filter: none;
}

/* flèche gauche */
#heroCarousel .carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 19L8 12L15 5'/%3E%3C/svg%3E");
}

/* flèche droite */
#heroCarousel .carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5L16 12L9 19'/%3E%3C/svg%3E");
}

/* =========================
   HOVER ET ANIMATIONS
   ========================= */
#heroCarousel .carousel-control-prev:hover,
#heroCarousel .carousel-control-next:hover {
  transform: translateY(-50%) scale(1.1);
}

/* Animation d’apparition */
@keyframes fadeInSoft {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

#heroCarousel:hover .carousel-control-prev,
#heroCarousel:hover .carousel-control-next {
  animation: fadeInSoft 0.35s ease-out both;
}

/* =========================
   RESPONSIVE DESIGN
   ========================= */
@media (max-width: 768px) {
  #heroCarousel .carousel-control-prev,
  #heroCarousel .carousel-control-next {
    width: 40px;
    height: 40px;
  }
  #heroCarousel .carousel-control-prev { left: 16px; }
  #heroCarousel .carousel-control-next { right: 16px; }
}

/* Sur mobile / tablettes sans hover : toujours visibles */
@media (hover: none) {
  #heroCarousel .carousel-control-prev,
  #heroCarousel .carousel-control-next {
    opacity: 1;
    pointer-events: auto;
  }
}




/* ==== Palette (tu peux ajuster) ==== */
:root{
  --footer-bg: #175d9e;        /* bleu principal */
  --footer-bg-2: #145b93;      /* bande du bas, un peu plus sombre */
  --footer-text: #ffffff;
  --footer-link: #ffffff;
  --footer-link-muted: rgba(255,255,255,.85);
  --brand: #f8b21d;            /* orange */
}

/* Couleurs du thème */
:root{
  --kpv-blue: #39A0DB;    /* Bleu titre */
  --kpv-accent: #39A0DB;  /* Soulignement liens */
  --kpv-text: #1b1e22;
}



/* Section chiffres-clés */

.kpv-chiffre{
  margin: auto;
  height: auto;
  padding: 25px 0 0 0;
}

#chiffres-cles.site-keyfigures {
  background: #EFF5F9;   /* gris clair */
  height: auto;      /* hauteur de la section */
  box-sizing: border-box;
}

/* Conteneur */

/* Section "cartes"*/
/* SECTION : fond gris clair */



/* Grille adaptable : pas besoin de connaître le nombre de cartes */
.kpv-figures-grid {
  display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
  gap: 10px; /* Ajoute un espace entre les cartes */
 
}

/* Carte bleue */
.kf-card {
  width: calc(33.33% - 20px);
  max-width: 100%;
  background: #0777BD;
  height: auto;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;  /* Centre le contenu horizontalement */
  justify-content: space-between; /* pousse le libellé vers le bas */
  box-sizing: border-box; /* empêche les débordements */
  overflow: hidden;       /* empêche le contenu de déborder */
  margin: 8px;
}

/* Chiffre : centré et très grand */
.kf-card h2 {
  align-self: center;     /* centre le chiffre sans toucher au libellé */
  text-align: center;
  font-weight: 800;
  line-height: .85;
  font-size: clamp(40px, 8vw, 140px); /* taille fluide selon la largeur de l'écran */
  color: #fff;
  margin: 0;
}

/* Libellé : texte sous le chiffre */
.kf-card p {
  text-align: left;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .2px;
  font-size: clamp(10px, 2vw, 15px); /* taille fluide */
  color: #fff;
  line-height: 1.42857143;
  font-family: 'Poppins', sans-serif;
  box-sizing: border-box;
  margin: auto;
  padding: auto;
}

/* Breakpoints pour ajuster la présentation en fonction de la taille de l'écran */

/* Pour les petits écrans (tablettes portrait) */
@media (max-width: 768px) {
  .kf-card {
    width: calc(50% - 16px); /* 2 cartes par ligne */
  }
}

/* Pour les très petits écrans (smartphones en portrait) */
@media (max-width: 480px) {
  .kf-card {
    width: calc(100% - 16px); /* 1 carte par ligne */
  }
}

/* =========================================================
   BANDE INTRO — PRÉSENTATION KCT + CTA
   ========================================================= */

.kpv-intro-band{
  background: linear-gradient(90deg, #0777BD 0%, #0A5FA0 100%);
  padding: 48px 16px;
  color: #fff;
}

.kpv-intro-inner{
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

/* Texte */
.kpv-intro-text{
  max-width: 720px;
}

.kpv-intro-text h2{
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800;
  margin-bottom: 12px;
  color: #ffffff;
}

.kpv-intro-text p{
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(255,255,255,.95);
  margin: 0;
}

/* CTA */
.kpv-intro-cta{
  flex-shrink: 0;
}

.kpv-btn-primary{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  background: #F8B21D;
  color: #0B1F36;
  font-size: 1.05rem;
  font-weight: 800;
  text-decoration: none;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.kpv-btn-primary:hover{
  background: #e6a315;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0,0,0,.3);
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 992px){
  .kpv-intro-inner{
    flex-direction: column;
    text-align: center;
  }

  .kpv-intro-text{
    max-width: 100%;
  }
}

@media (max-width: 576px){
  .kpv-intro-band{
    padding: 36px 14px;
  }

  .kpv-btn-primary{
    width: 100%;
    padding: 14px 20px;
  }
}


/* ===========================
   SECTION ACCOSTAGE (design expert)
   =========================== */

.accostage-section {
  position: relative;
  overflow: hidden;
  padding: 40px 0 0 0;
}

/* Vague bleutée décorative */
.accostage-section::before {
  content: "";
  position: absolute;
  left: -8%;
  bottom: -16%;
  width: 140%;
  height: 220px;
  background: radial-gradient(ellipse at 25% 70%, rgba(7,119,189,.14) 0%, rgba(7,119,189,.10) 35%, transparent 70%);
  transform: rotate(-5deg);
  z-index: 0;
}

/* Container aligné */
.accostage-section .d-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

/* Zone de texte gauche */
.accostage-text {
  position: relative;
  flex: 1;
  min-width: 270px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 340px;
  z-index: 1;
  text-align: center;
}

/* ANCRE FIXE EN HAUT GAUCHE */
.accostage-text::after {
  content: "⚓";
  position: absolute;
  top: -35px;        /* remonte l’ancre */
  left: -15px;
  font-size: clamp(12rem, 15vw, 20rem);
  color: rgba(7,119,189,0.07);
  z-index: 0;
  pointer-events: none;
  user-select: none;
  transform: rotate(-8deg);
}

/* TITRE */
.home-cta-a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  color: #0777BD;
  font-weight: 800;
  font-size: 3.6rem;     /* ↑ flèche plus grande = texte plus grand */
  text-decoration: none;
  line-height: 1.1;
  position: relative;
  z-index: 2;
}

.home-cta-a .text-a {
  display: inline-block;
  border-bottom: 5px solid transparent;
  transition: border-color .3s ease;
  white-space: pre-line;
}

/* FLÈCHE */
.home-cta-a .arrow-a {
  font-size: 5rem;          /* AUGMENTÉE */
  transition: transform .25s ease;
}

.home-cta-a:hover .text-a { border-color: #0777BD; }
.home-cta-a:hover .arrow-a { transform: translateX(12px); }

/* IMAGE DROITE */
.accostage-image {
  max-width: 50%;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.accostage-image img {
  width: 100%;
  height: auto;
  border-radius: 6px;
}

/* Séparateur */
.accostage-separator {
  border: none;
  height: 2px;
  background-color: #0777BD !important;
  margin: 40px 0 0 0;
}

/* ===========================
   RESPONSIVE TABLET
   =========================== */
@media (max-width: 992px) {
  .home-cta-a { font-size: 3.3rem; }
  .home-cta-a .arrow-a { font-size: 4.2rem; }
  .accostage-text::after { font-size: clamp(8rem, 18vw, 14rem); }
}

/* ===========================
   RESPONSIVE MOBILE
   =========================== */
@media (max-width: 768px) {
  .accostage-section .d-flex {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .accostage-text {
    min-height: 200px;               /* force un espace pour ancre */
    justify-content: center;
  }

  .home-cta-a {
    flex-direction: row;             /* texte + flèche côte à côte */
    font-size: 2.6rem;
    gap: 1.2rem;
  }

  .home-cta-a .arrow-a {
    font-size: 3.5rem;               /* flèche mobile plus visible */
  }

  .accostage-text::after {
    top: -20px;                      /* ancre reste en haut */
    left: -5px;
    font-size: clamp(7rem, 25vw, 11rem);
  }

  .accostage-image {
    max-width: 100%;
    width: 100%;
    margin-top: 1rem;
  }
}

/* Très petits écrans */
@media (max-width: 420px) {
  .home-cta-a { font-size: 2.2rem; }
  .home-cta-a .arrow-a { font-size: 3rem; }

  .accostage-text::after {
    top: -10px;
    left: -2px;
    font-size: 8rem;
  }
}



/* Espace client */

.espace-client-section {
  background-color: #0777bd14; /* Fond clair */
}

.espace-client-title {
  font-weight: 700;           /* Gras */
  color: #CC9009; 
  font-size: 2.5rem;
}

.espace-client-description {
  font-size: 1.2rem;
  font-weight: 400;
  color: #0777BD;
}

/* Lien cliquable */
.espace-client-link {
  color: #0777BD;             /* Même bleu que le texte */
  text-decoration: underline;  /* Optionnel : souligne le lien */
  cursor: pointer;             /* Curseur cliquable */
  transition: color 0.3s ease;
}

.espace-client-link:hover {
  color: #1B365F;              /* Change légèrement de bleu au survol */
}




/* Titre */
.kpv-partners-title {
  color: #0777BD;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  font-size: 1.7rem;
  display: inline-block;    /* nécessaire pour que ::after se positionne correctement */
  position: relative;       /* nécessaire pour ::after */
}

.kpv-partners-title::after {
  content: "";
  position: absolute;
  bottom: -6px;                /* place la ligne sous le texte */
  left: 0;                  /* commence à gauche du texte */
  height: 3px;              /* épaisseur de la ligne */
  width: 50%;               /* largeur de la ligne = 50% du texte */
  background-color: #cc9109cc; /* couleur orange */
}

/* Section (fond doux optionnel) */
.kpv-partners{ background:#f8fafc; }

.partners-slider {
  overflow: hidden;       /* Masque le débordement */
  width: 100%;
}

/* Grille */

.kpv-partners-grid {
  display: flex;          /* Tous les logos sur une seule ligne */
  gap: 30px;
  animation: scroll-left 25s linear infinite; /* Animation continue */
  list-style: none;
  margin: 0;
  padding: 30px;
}

/* Animation défilement */
@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* défilement vers la gauche */
}


/* Tuile */
.kpv-partners-grid li {
  flex: 0 0 auto;         /* Empêche les logos de se réduire */
  display: flex;
  align-items: center;
  justify-content: center;
}

.kpv-partners-grid li:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(0,0,0,.10);
  border-color:rgba(0,0,0,.12);
}

/* Logo : couleurs respectées (pas de grayscale/opacité) */
.kpv-partners-grid img {
  max-height: 150px;
  width: 150;
  object-fit: contain;
  display: block;
}

/* Effet hover : marche sur <li>, <a> ou l'<img> */
.kpv-partners-grid li:hover img,
.kpv-partners-grid a:hover img,
.kpv-partners-grid img:hover{
  transform:scale(1.04);
}


/* ===== Zone" haute du footer ===== */
.page-footer{
  background: var(--footer-bg);
  color: var(--footer-text);
}
.page-footer .container{
  padding-top: 48px;
  padding-bottom: 48px;
}

/* Grille responsive des colonnes */
.footer-top{
  /* remplace le layout par défaut par une grille propre */
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 28px 32px;              /* (lignes x colonnes) */
  align-items: start;
}

/* Breakpoints responsive (≈ Abidjan) */
@media (max-width: 1199.98px){
  .footer-top{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 991.98px){
  .footer-top{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 767.98px){
  .footer-top{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 575.98px){
  .footer-top{ grid-template-columns: 1fr; }
}

/* Colonnes / listes */
.item-footer ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
.block-title{
  font-size: 0.95rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 0 0 .75rem;
  color: var(--footer-text);
}

/* Lien “Programme d’accostage” utilisé comme titre */
.block5 .block-title a{
  color: var(--footer-text);
  text-decoration: none;
}

:root{
  --kpv-blue:#39A0DB;
}

/* Liens du footer */
.item-footer li a{
  display: inline-block;
  color: var(--footer-link);
  text-decoration: none;
  opacity: .9;
  padding: 6px 0;
  font-size: 0.98rem;
  transition: color .2s ease, opacity .2s ease, transform .2s ease;
}
.item-footer li a:hover{
  color: var(--brand);
  opacity: 1;
  transform: translateX(2px);
}

/* ===== Bande basse (copyright) ===== */
.footer-bottom-content{
  background: var(--footer-bg-2);
  border-top: 1px solid rgba(255,255,255,.25);
}
.footer-bottom-content .bottom-text{
  color: var(--footer-text);
  padding-top: 16px;
  padding-bottom: 16px;
}
.footer-bottom-content a{
  color: var(--footer-link);
  text-decoration: none;
  opacity: .95;
}
.footer-bottom-content a:hover{ color: var(--brand); }

.end-text{
  margin: 0;
  font-size: .95rem;
}
@media (max-width: 991.98px){
  .end-text{ text-align: center; line-height: 1.6; }
}

/* Petites finitions */
footer .fa{ width: 1.1rem; } /* si tu ajoutes des icônes */
a:focus{ outline: 2px dashed rgba(255,255,255,.5); outline-offset: 2px; } /* accessibilité */



.slide1-text-bottom p {
    color: #fff;
    line-height: 22px;
    width: 800px;
}

.search_icon {
    margin-top: 32px !important;
}

.faqAccordion .accTrigger {
    color: #009adc !important;
    font-size: 18px !important;
}

.type-post .entry-header .entry-title {
    font-size: 24px;
    color: #009adc;
    padding: 40px 0 12px 0;
}
.type-post .post-thumbnail {
    height: 400px;
    overflow: hidden;
    margin-bottom: 20px;
}
.type-post .post-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
}
.entry-content {
    padding-bottom: 60px;
}

.entry-meta {
    margin-bottom: 10px;
}
.entry-meta a {
    color: #f8b21d;
}

  

    /* ========= LISTE / GRILLE ========= */
/* ================== GRILLE ================== */
.view-content{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 32px;                     /* espace entre cartes */
  align-items: stretch;
}
.view-content .views-row{ margin: 0; } /* neutralise marges par défaut */

/* Responsive */
@media (max-width: 991.98px){ .view-content{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 575.98px){ .view-content{ grid-template-columns: 1fr; gap: 22px; } }

/* ================== CARTE ================== */
/* ===== 3 colonnes forcées ===== */
/* =========================
   1) GRILLE 3 COLONNES
   ========================= */
.view-content{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 32px;
  align-items: stretch;
}
.view-content > .views-row{ margin:0 !important; float:none !important; width:auto !important; }
.view-content > .views-row > .views-field,
.view-content > .views-row > .views-field > .field-content{ display: contents; }

@media (max-width: 991.98px){ .view-content{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 575.98px){ .view-content{ grid-template-columns: 1fr; gap:22px; } }

/* =========================
   2) CARTE D’ACTUALITÉ
   ========================= */
.Actualite{
  position: relative;
  display: flex; flex-direction: column;
  height: 100%;
  background: #fff;
  border: 2px solid #167ac2;          /* bleu bordure */
  overflow: hidden;
  /* pas d’élévation : on reste “plat” comme sur la réf */
}

/* Image + zoom au survol */
.ActualiteImage{ overflow: hidden; aspect-ratio: 16/9; }
.ActualiteImage img{
  width:100%; height:100%; display:block;
  object-fit: cover; object-position: center;
  transition: transform .45s ease;
}
.Actualite:hover .ActualiteImage img{ transform: scale(1.06); }

/* Contenu */
.ActualiteContent{ padding: 20px 20px 86px; }

/* Date (bleu, gras) */
.ActualiteDate{
  color:#1e88d6;
  font-weight:800;
  font-size:.98rem;
  margin-bottom:.5rem;
}

/* Titre (noir, gras) */
.ActualiteTitle a{
  color:#0d0f12;
  text-decoration:none;
  font-weight:800;
  line-height:1.35;
  font-size:1.25rem;                   /* ≈ visuel capture */
}
.ActualiteTitle a:hover{ color:#1e88d6; }

/* Catégorie (orange) */
.ActualiteCat{
  margin-top:.9rem;
  color:#f8b21d;
  font-weight:800;
}

/* =========================
   3) BOUTON FLÈCHE
   ========================= */
.ActualiteLink{
  position:absolute; right:14px; bottom:14px;
}
.ActualiteLink .moreArrow{ margin:0; }
.ActualiteLink .moreArrow a{
  width:56px; height:56px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#1e88d6;                 /* carré bleu */
  border-radius:4px;
  text-decoration:none;
  box-shadow:0 6px 14px rgba(0,0,0,.16);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

/* remplace l’image par une flèche CSS blanche (comme sur la réf) */
.ActualiteLink .moreArrow a span img{ display:none; }
.ActualiteLink .moreArrow a::before{
  content:"→";
  color:#0f0845; font-size:28px; line-height:1; transform: translateX(1px);
}

/* effet au survol */
.ActualiteLink .moreArrow a:hover {
  background: #CC9009; /* orange vif */
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
}

.ActualiteLink .moreArrow a:hover::before {
  color: #fff; /* garde la flèche blanche */
}

.ActualiteExcerpt {
    margin-top: 10px;
    font-size: 0.95rem;
    color: #333;
    line-height: 1.4;
}

.ActualiteLink .btn-primary {
    background-color: #1e88d6;
    border-color: #1e88d6;
    font-weight: 700;
}

.ActualiteLink .btn-primary:hover {
    background-color: #1565c0;
    border-color: #1565c0;
}

.page-title {
    font-size: 2rem;
    font-weight: 700;
    padding: 60px 0 0 0;
    color: #0777BD;    /* bleu identique au thème */
    margin-bottom: 20px; /* espace avec les cartes */
}

.single-article-inner {
    padding-left: 60px;   /* Espace à gauche */
    padding-right: 60px;  /* Espace à droite */
    box-sizing: border-box; /* S'assure que le padding ne dépasse pas le conteneur */
}

@media (max-width: 768px) {
    .single-article-inner {
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media (max-width: 480px) {
    .single-article-inner {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* Titre de l'article */
.custom-title {
    font-size: 1.5rem;       /* Taille du titre */
    font-weight: 600;        /* Gras */
    color: #0777BD;          /* Bleu */
    padding-top: 100PX;
    padding-left: 60px;   /* Espace à gauche */
    padding-right: 60px;  /* Espace à droite */
    margin-bottom: 10px;
  
    display: inline-block;    /* Pour que la ligne soit juste sous le texte */
}

/* Date de l'article */
.custom-date {
    font-size: 1rem;
    color: #f8b21d;          /* Bleu plus clair */
    font-weight: 700;
    margin-right: 10px;      /* Espace avec la catégorie */
    display: inline-block;
     padding-left: 60px;   /* Espace à gauche */
    padding-right: 60px;  /* Espace à droite */
}





/* ===== Bloc FAQ (container5) ===== */
.container5.container-fluid{
  background: #cc910947;
  text-align: center;
  padding: 90px 16px 110px;          /* espace haut/bas généreux */
}

/* Gros titre bleu, sur 2 lignes */
.container5-title{
  color: #0777BD;                    /* bleu marque */
  font-weight: 100;
  line-height: 1;
  margin: 0 0 18px;
  /* taille responsive ~28 → 48px */
  font-size: clamp(28px, 4.2vw, 48px);
}

/* Sous-titre gris, largeur contenue et centré */
.container5-content{
  max-width: 900px;
  margin: 0 auto 36px;
  color: #6f7c8a;                    /* gris discret */
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.7;
}

/* Si "row" de Bootstrap a été mis sur <p>, on neutralise sa mise en page */
.container5 .row.container5-content{
  display: block;
  margin-left: auto; margin-right: auto;
}

/* Bouton blanc avec ombre douce */
.bouton-faq{
  --btn-blue: #1e88d6;
  display: inline-block;
  background: #fff !important;
  color: var(--btn-blue) !important;
  border: 0 !important;
  border-radius: 12px;
  padding: 16px 42px;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: .02em;
  text-transform: uppercase;         /* si tu veux comme la capture */
  text-decoration: none;
  box-shadow: 0 14px 34px rgba(0,0,0,.08),
              0 2px 6px rgba(0,0,0,.05);
  transition: transform .18s ease, box-shadow .18s ease, color .18s ease;
  cursor: pointer;
}

/* Effet hover subtil */
.bouton-faq:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0,0,0,.12),
              0 4px 10px rgba(0,0,0,.08);
}

/* Focus accessible */
.bouton-faq:focus{
  outline: 3px solid rgba(30,136,214,.35);
  outline-offset: 3px;
}

/* Mobile : resserre un peu les espacements */
@media (max-width: 575.98px){
  .container5.container-fluid{ padding: 72px 16px 88px; }
  .bouton-faq{ font-size: 20px; padding: 14px 34px; }
}

/* ================================
   VIDEO CORPORATE – RESPONSIVE
================================ */

.kpv-video-section{
  padding: 60px 16px;
  background: #ffffff; /* ou #EFF5F9 si tu veux rappeler Chiffres clés */
}

.kpv-video-container{
  max-width: 1200px;
  margin: 0 auto;
}

/* Ratio 16:9 universel */
.kpv-video-ratio{
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(0,0,0,.15);
}

/* Vidéo plein cadre */
.kpv-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}


/* End laptop */




/* =========================================================
   WPFront Notification Bar — CTA IES (VERSION FINALE)
   ========================================================= */

/* 1) Barre : priorité + respiration */
#wpfront-notification-bar{
  z-index: 1100 !important; /* au-dessus navbar */
}

/* Le plugin utilise plusieurs wrappers → flex forcé */
#wpfront-notification-bar .wpfront-notification-bar-content,
#wpfront-notification-bar .wpfront-notification-bar-wrapper,
#wpfront-notification-bar .wpfront-notification-bar-inner,
#wpfront-notification-bar .wpfront-notification-bar-table,
#wpfront-notification-bar > div{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: 12px 20px !important;
}

/* =========================================================
   2) TEXTE — lisible, 2 lignes assurées
   ========================================================= */
#wpfront-notification-bar .wpfront-message,
#wpfront-notification-bar .wpfront-notification-bar-message,
#wpfront-notification-bar .wpfront-notification-message,
#wpfront-notification-bar .wpfront-notification-bar-content p,
#wpfront-notification-bar .wpfront-notification-bar-content span{
  white-space: normal !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  max-width: 560px; /* force retour ligne desktop */

}

/* =========================================================
   3) BOUTON CTA — TAILLE "CHIFFRES CLÉS"
   ========================================================= */
#wpfront-notification-bar a,
#wpfront-notification-bar button,
#wpfront-notification-bar input[type="button"],
#wpfront-notification-bar input[type="submit"]{
  font-weight: 800 !important;
  font-size: clamp(18px, 2vw, 24px) !important; /* 👈 clé ici */
  padding: 16px 32px !important;
  line-height: 1.1;
  border-radius: 10px !important;
  min-height: 56px !important;
  white-space: nowrap !important;
  box-shadow: 0 12px 26px rgba(0,0,0,.18) !important;
  transition: transform .2s ease, box-shadow .2s ease;
}

/* Hover premium */
#wpfront-notification-bar a:hover,
#wpfront-notification-bar button:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(0,0,0,.22) !important;
}

/* =========================================================
   4) RESPONSIVE — mobile maîtrisé
   ========================================================= */
@media (max-width: 768px){
  #wpfront-notification-bar .wpfront-message,
  #wpfront-notification-bar .wpfront-notification-bar-message,
  #wpfront-notification-bar .wpfront-notification-message,
  #wpfront-notification-bar .wpfront-notification-bar-content p,
  #wpfront-notification-bar .wpfront-notification-bar-content span{
    max-width: 70vw;
    font-size: 14px !important;
  }

  #wpfront-notification-bar a,
  #wpfront-notification-bar button{
    font-size: 16px !important;
    padding: 14px 20px !important;
    min-height: 48px !important;
  }
}


/* Navbar */
.navbar-custom {
  position: fixed !important;
  top: var(--notification-bar-height, 0px) !important;
  z-index: 1090;
  background-color: var(--menu-bg) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition:
    background-color .4s ease,
    box-shadow .3s ease,
    top .3s ease;
}

#heroCarousel {
  margin-top: 0 !important;
}

/* =========================================================
   BANDE TITRE AVEC FILIGRANE (SVG repeat)
   conteneurs + portique/grue + ancre
   ========================================================= */


/* =========================================================
   HERO layout (texte gauche / bouton droite)
   ========================================================= */

.kpv-hero{
  padding: 54px 0; /* un peu plus haut que ta bande */
}

/* layout interne */
.kpv-hero__inner{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
}

/* titre XXL comme sur l'image */
.kpv-hero__title{
  margin: 0 0 18px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: .95;
  font-size: clamp(2.3rem, 4.6vw, 5.2rem); /* ajuste si besoin */
}

/* sous-titre plus grand */
.kpv-hero__subtitle{
  margin: 0;
  font-size: clamp(1.1rem, 2vw, 1.9rem);
  opacity: .95;
}

/* bouton */
.kpv-hero__cta{
  display: inline-flex;
  align-items: center;
  gap: 18px;

  background: #f1d98b;
  color: #0b2a4d;
  text-decoration: none;

  padding: 18px 28px;
  border-radius: 0;
  font-weight: 800;
  font-size: 22px;

  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.kpv-hero__cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,.28);
  filter: brightness(1.02);
}

.kpv-hero__icon{
  color: currentColor;
}

/* responsive */
@media (max-width: 820px){
  .kpv-hero__inner{
    flex-direction: column;
    align-items: flex-start;
  }
  .kpv-hero__cta{
    font-size: 18px;
    padding: 14px 20px;
  }
}