:root{
  --primary: #22397A; /* bleu corporate */
  --primary-2: #0a3d8f;
  --dark: #0b1220;
  --muted: #6b7280;
}

body{
  font-family: Helvetica, Arial, sans-serif;
}

.brand-mark{
  width: 14px; height: 14px;
  border-radius: 4px;
  background: var(--primary);
  display:inline-block;
}

.navbar .nav-link{
  padding-top: 0;
  padding-bottom: 0;
  line-height: 108px; /* aligne verticalement */
  font-weight: 700;
  text-transform: uppercase;
  font-size: .85rem;
}
.navbar{
  min-height: 108px;
  padding-top: 0;
  padding-bottom: 0;
}

.navbar .container{
  min-height: 108px;
  display: flex;
  align-items: center;
}
.navbar .btn{
  border-radius: 0 !important; /* pas d’arrondi */
  padding: 12px 22px;
}
.navbar .nav-link.active{ color: var(--primary); }
.btn-primary{ background: var(--primary); border-color: var(--primary); }
.btn-primary:hover{ background: var(--primary-2); border-color: var(--primary-2); }

/* HERO */
.hero{
  position: relative;
  background-image: url("../img/hero.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  min-height: calc(80vh - 108px);
    max-height: 720px;
}

.hero-row{
  min-height: calc(100vh - 108px);
  max-height: 720px;
}

/* overlay bleu comme la maquette */
.hero-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(11,42,91,.65), rgba(11,42,91,.15));
}
.hero .container{
  position: relative;
  z-index: 2;
}
.min-vh-50{ min-height: 50vh; }
.hero-lead{ max-width: 52ch; opacity: .95; }

/* ABOUT COLLAGE */
.image-collage{ position: relative; }
.collage-main{ width: 100%; }
.collage-float{
  position:absolute;
  width: 44%;
  right: 6%;
  bottom: -10%;
  border: 6px solid #fff;
}

/* STATS MAQUETTE (overlap + alternance) */
.stats-maquette{
  position: relative;
  margin-top: -100px;        /* <-- fait "monter" sur la section au-dessus */
  padding-bottom: 40px;
  z-index: 5;
}

.stats-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.stats-box{
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
}

/* alternance comme ta capture */
.stats-box.is-light{
  background: #ffffff;
  color: var(--primary);
}
.stats-box.is-dark{
  background: var(--primary);
  color: #ffffff;
}

/* icones SVG */
.stats-ico{
  width: 56px;
  height: 56px;
  object-fit: contain;
}

/* typographies */
.stats-number{
  font-weight: 900;
  letter-spacing: .5px;
  font-size: 52px;
  line-height: 1;
  text-transform: uppercase;
}
.stats-sub{
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .8px;
  text-transform: uppercase;
  opacity: .95;
}

/* responsive */
@media (max-width: 991px){
  .stats-maquette{ margin-top: -30px; }
  .stats-grid{ grid-template-columns: repeat(2, 1fr); }
  .stats-box{ min-height: 200px; }
  .stats-number{ font-size: 38px; }
  .stats-ico{ width: 46px; height: 46px; }
}

//* EXPERTISES - hover overlay comme maquette */
.expertise-section{
  background: #ffffff;
}

.expertise-card{
  position: relative;
  display: block;
  height: 450px;              /* format vertical comme tes captures */
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 14px 40px rgba(0,0,0,.08);
}

/* image full */
.expertise-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.01);
  transition: transform .35s ease;
}

/* overlay contenu (caché au départ) */
.expertise-hover{
  position: absolute;
  inset: 18px;                          /* marge interne comme maquette */
  background: rgba(255,255,255,.80);    /* blanc translucide */
  padding: 28px 22px 22px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease;
}

/* titre */
.expertise-title{
  margin: 0 0 14px;
  color: var(--primary);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .7px;
  line-height: 1.05;
  font-size: 20px;
}

/* texte */
.expertise-text{
  margin: 0 0 22px;
  color: #2b2b2b;
  font-size: 17px;
  line-height: 1.35;
}

/* bouton maquette */
.expertise-btn{
  display: inline-block;
  background: var(--primary);
  color: #fff;
  font-weight: 900;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: 18px 34px;
  border-radius: 0;
}

/* HOVER */
.expertise-card:hover .expertise-hover{
  opacity: 1;
  transform: translateY(0);
}

.expertise-card:hover .expertise-img{
  transform: scale(1.06);
}

/* responsive */
@media (max-width: 991px){
  .expertise-card{ height: 460px; }
  .expertise-title{ font-size: 28px; }
  .expertise-text{ font-size: 15px; }
}

/* VALUES */
.value-card{
  border: 1px solid #e8eef7;
  border-radius: 18px;
  padding: 22px;
}
.value-icon{
  width: 42px; height: 42px;
  border-radius: 12px;
  background: rgba(11,42,91,.10);
  display:flex; align-items:center; justify-content:center;
  color: var(--primary);
  font-size: 20px;
  margin-bottom: 12px;
}

/* FOOTER maquette */
.footer2{
  background: var(--primary); /* bleu charte */
  color: #fff;
    margin-top: 30px;
}

/* Titres + tiret blanc */
.footer2-title{
  position: relative;
  font-weight: 900;
  font-size: 22px;
  margin: 0 0 26px;
}

.footer2-title::after{
  content:"";
  position: absolute;
  left: 0;
  bottom: -14px;
  width: 36px;
  height: 4px;
  background: #fff;
  opacity: .95;
}

/* Liens */
.footer2-links{
  margin: 0;
  padding: 0;
}

.footer2-links li{
  margin: 0 0 14px;
}

.footer2-links a{
  color: rgba(255,255,255,.92);
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
}

.footer2-links a:hover{
  color: #fff;
  text-decoration: underline;
}

/* Certification logo */
.footer2-certif{
  margin-top: 22px;
}

.footer2-certif img{
  max-width: 190px;
  height: auto;
  display: block;
}

/* Contacts */
.footer2-contacts{
  margin: 0;
  padding: 0;
}

.footer2-contacts li{
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px;
  color: rgba(255,255,255,.92);
  font-size: 18px;
}

.footer2-ico{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
}

.footer2-ico i{
  color: #fff;
  font-size: 16px;
}

/* Bouton footer */
.footer2-cta{
  display: inline-block;
  margin-top: 10px;
  background: #fff;
  color: var(--primary);
  text-decoration: none;
  font-weight: 900;
  text-transform: none;
  padding: 12px 16px;
  border-radius: 0;
  letter-spacing: .2px;
}

/* Social */
.footer2-social{
  margin-bottom: 18px;
}

.footer2-social a{
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
}

.footer2-social a i{
  font-size: 20px;
}


/* Logo blanc à droite */
.footer2-logo img{
  max-width: 240px;
  height: auto;
  display: block;
  margin-top: 20px;
}

/* Responsive */
@media (max-width: 991px){
  .footer2{ padding: 50px 0; }
  .footer2-title{ font-size: 20px; }
  .footer2-links a, .footer2-contacts li{ font-size: 16px; }
}

/* BOUTONS HERO (sans arrondi + look maquette) */
.btn-hero-primary,
.btn-hero-secondary{
  border-radius: 0 !important;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 14px 22px;
}

/* 1er bouton: blanc avec texte bleu */
.btn-hero-primary{
  color: var(--primary);
  border: 2px solid #fff;
}
.btn-hero-primary:hover{
  color: var(--primary);
  opacity: .92;
}

/* 2e bouton: transparent avec bord blanc */
.btn-hero-secondary{
  border-width: 2px;
}

/* Logo */
.brand-logo{
  height: 54px;      /* ajuste selon ton logo */
  width: auto;
}

/* Couleur items menu */
.navbar .nav-link{
  color: var(--primary) !important;
  font-weight: 800;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: .3px;
}

/* Icône home */
.nav-home{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 108px;
}
.nav-home-icon{
  height: 34px;  /* ajuste */
  width: auto;
}

/* Bouton CONTACT (bleu, sans arrondi) */
/* BTN CONTACT - garder bleu + texte blanc quand page active */
.btn-contact,
.btn-contact:hover,
.btn-contact:focus,
.btn-contact:focus-visible,
.btn-contact:active,
.btn-contact.active,
.active > .btn-contact,
.nav-link.btn-contact.active,
.active > .nav-link.btn-contact {
    background: #213a72 !important;
    color: #fff !important;
    border-color: #213a72 !important;
    opacity: .92; /* optionnel */
}

/* Si Bootstrap ajoute un focus ring / shadow */
.btn-contact:focus,
.btn-contact:focus-visible {
    box-shadow: none !important;
    outline: none !important;
}

/* SECTION CERTIFICATIONS (ajustée) */
.certif-section{
    background: #D9D9D966;
    padding-bottom: 12rem !important;
}

/* Mobile: supprimer le padding-bottom */
@media (max-width: 991px){
    .certif-section{
        padding-bottom: 4em !important;
    }
}

/* Image plus petite (ne prend pas toute la hauteur) */
.certif-image-wrap{
  max-width: 520px;     /* réduit la taille */
  margin: 0 auto;       /* centre dans la colonne */
}
.certif-image-wrap img{
  width: 100%;
  height: auto;
  display: block;
}

/* Titre plus petit + bleu charte */
.certif-title{
  color: var(--primary);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .4px;
  line-height: 1.1;
  font-size: 38px;      /* réduit (avant 54) */
  margin-bottom: 14px;
}

/* Ligne décorative (même, un peu plus fine) */
.certif-line{
  width: 130px;
  height: 5px;
  background: #8b8b8b;
  margin: 8px 0 18px;
}

.certif-text{
  font-size: 16px;
  line-height: 1.65;
  color: #2d2d2d;
  max-width: 62ch;
}

@media (max-width: 991px){
  .certif-image-wrap{ max-width: 100%; }
  .certif-title{ font-size: 28px; }
  .certif-line{ width: 110px; height: 4px; }
  .certif-text{ font-size: 15px; }
}

/* VALEURS - style maquette (icônes déjà dans un cercle) */
.values-section{
  background: #ffffff;
}

.values-head{
  margin-bottom: 18px;
}

.values-title{
  color: var(--primary);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .6px;
  line-height: 1.05;
  font-size: 38px;
  margin: 0;
}

.values-line{
  width: 120px;
  height: 5px;
  background: #8b8b8b;
  margin: 14px auto 0;
}

/* cartes : BLANC comme la maquette */
.value-box{
  background: #ffffff;
  padding: 26px 26px 26px;
  text-align: center;
}

/* wrapper icône (pas de cercle CSS) */
.value-icon-wrap{
  margin: 0 auto 14px;
}

/* l’icône prend directement la taille du cercle intégré au SVG */
.value-icon-svg{
  width: 92px;    /* taille cercle */
  height: 92px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* titre */
.value-box-title{
  margin: 0 0 12px;
  color: var(--primary);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: 18px;
}

/* texte (centré/lecture comme maquette) */
.value-box-text{
  margin: 0;
  color: #2d2d2d;
  font-size: 14.5px;
  line-height: 1.75;
  text-align: left; /* comme ta maquette */
}

.value-box.is-gray{
  background: #F0F0F0;
}

/* responsive */
@media (max-width: 991px){
  .values-title{ font-size: 28px; }
  .value-box{ padding: 22px 20px; }
  .value-icon-svg{ width: 82px; height: 82px; }
}

/* SECTION RÉFÉRENCES (maquette) */
.refs-section{
  background: #efefef;
  padding: 70px 0 70px;
}

/* titre */
.refs-head{ margin-bottom: 28px; }
.refs-title{
  color: var(--primary);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .6px;
  font-size: 34px;
  margin: 0;
}
.refs-line{
  width: 120px;
  height: 5px;
  background: #8b8b8b;
  margin: 14px auto 0;
}

/* bloc slider */
.refs-slider-wrap{
  position: relative;
  padding-bottom: 46px; /* place pour les flèches */
}

.refs-carousel .carousel-inner{
  background: transparent;
}

/* projet : image + panneau bleu */
.refs-project{
  display: grid;
  grid-template-columns: 2.2fr 1fr;
  min-height: 360px;
  background: #fff;
  overflow: hidden;
}

.refs-project-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

/* panneau bleu droite */
.refs-project-panel{
  background: #273a73; /* bleu panneau */
  color: #fff;
  padding: 46px 40px;
  display:flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
}

.refs-project-name{
  margin: 0;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: 22px;
}

.refs-project-desc{
  margin: 0;
  opacity: .95;
  font-size: 14px;
  line-height: 1.5;
}

.refs-project-meta{
  margin: 6px 0 0;
  font-size: 13px;
  opacity: .95;
}

/* bouton blanc */
.refs-project-btn{
  margin-top: 24px;
  display: inline-block;
  width: fit-content;
  background: #fff;
  color: var(--primary);
  text-decoration: none;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 14px 18px;
  border-radius: 0;
}

/* flèches rondes en bas à droite */
.refs-controls{
  position: absolute;
  right: 10px;
  bottom: 0;
  display: flex;
  gap: 10px;
}

.refs-arrow{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 2px solid var(--primary);
  background: transparent;
  color: var(--primary);
  font-size: 24px;
  line-height: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: background .2s ease, color .2s ease;
}
.refs-arrow:hover{
  background: var(--primary);
  color: #fff;
}

/* CLIENTS */
.clients-wrap{
  margin-top: 50px;
}

.clients-carousel .carousel-indicators{
  position: static;
  margin: 18px 0 0;
  justify-content: center;
  gap: 8px;
}

.clients-carousel .carousel-indicators [data-bs-target]{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #cfcfcf;
  border: 0;
  opacity: 1;
}

.clients-carousel .carousel-indicators .active{
  background: #777;
}


.clients-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.client-card{
  background: #fff;
  height: 160px;               /* plus haut comme ta capture */
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid #eee;
}

.client-card img{
  max-height: 100%;
  max-width: 70%;
  object-fit: contain;
  display:block;
}

/* points */
.clients-dots{
  display:flex;
  justify-content:center;
  gap: 6px;
  margin-top: 22px;
  margin-bottom: 8px;
}
.clients-dots .dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #cfcfcf;
}
.clients-dots .dot.active{
  background: #777;
}

.clients-title{
  margin-top: 26px;
  color: var(--primary);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: 16px;
}

/* responsive */
@media (max-width: 991px){
  .clients-grid{
    grid-template-columns: repeat(2, 1fr);
  }
  .client-card{ height: 140px; }
  .client-card img{ max-height: 100px; }
}

/* PROJETS - structure image + panneau bleu */
.refs-project{
  display: grid;
  grid-template-columns: 2.2fr 1fr;
  min-height: 420px;
  background: #fff;
  overflow: hidden;
}

.refs-project-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* panneau bleu (layout flex pour bouton en bas) */
.refs-project-panel{
  background: #273a73;
  color: #fff;
  padding: 52px 44px 40px;
  display: flex;
  flex-direction: column;
  min-height: 420px; /* même hauteur que bloc */
}

.refs-panel-content{
  flex: 1; /* pousse le footer en bas */
}

.refs-panel-footer{
  margin-top: 20px;
}

/* titre comme maquette */
.refs-project-name{
  margin: 0;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .6px;
  font-size: 34px;
  line-height: 1.05;
}

/* tiret blanc sous le titre */
.refs-project-dash{
  width: 70px;
  height: 6px;
  background: #fff;
  margin: 16px 0 22px;
}

/* texte */
.refs-project-desc{
  margin: 0 0 18px;
  font-size: 18px;
  line-height: 1.5;
  opacity: .95;
}

.refs-project-meta{
  margin: 0;
  font-size: 18px;
  opacity: .95;
}
.refs-project-meta strong{
  font-weight: 900;
}

/* bouton blanc en bas */
.refs-project-btn{
  display: inline-block;
  background: #fff;
  color: var(--primary);
  text-decoration: none;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 16px 22px;
  border-radius: 0;
}

/* Flèches rondes en bas à droite */
.refs-carousel{
  position: relative;
}

.refs-arrow{
  position: absolute;
  right: 18px;
  bottom: -62px;   /* en dessous du bloc, comme maquette */
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 3px solid var(--primary);
  background: transparent;
  color: var(--primary);
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  z-index: 5;
  transition: background .2s ease, color .2s ease;
}

.refs-arrow-prev{ right: 84px; } /* bouton gauche */
.refs-arrow-next{ right: 18px; } /* bouton droite */

.refs-arrow:hover{
  background: var(--primary);
  color: #fff;
}

/* responsive */
@media (max-width: 991px){
  .refs-project{
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .refs-project-panel{
    min-height: auto;
    padding: 28px 22px 22px;
  }
  .refs-project-name{ font-size: 26px; }
  .refs-project-desc, .refs-project-meta{ font-size: 16px; }

  .refs-arrow{
    bottom: -56px;
    width: 52px;
    height: 52px;
  }
  .refs-arrow-prev{ right: 78px; }
}


/* CTA split */
.cta-split{
  background: #ffffff;
}

/* Bloc bleu avec image de fond */
.cta-box{
  position: relative;
  min-height: 362px;
  border: 2px solid #ffffff;
  box-shadow: 0 10px 30px rgba(0,0,0,.0.8);

  /* 2 backgrounds : PNG au-dessus + bleu en dessous */
  background:
    url("../img/cta/cta-bg.png") center / cover no-repeat,
    var(--primary);
}

/* overlay bleu pour bien lire le texte */
.cta-box::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(11,42,91,0); /* bleu charte */
}

/* cadre intérieur blanc */
.cta-box-inner{
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 42px 34px;
  margin: 10px;                 /* crée la double bordure */
}

/* coin décoratif en haut à droite (blanc) */
.cta-box-inner::after{
  content:"";
  position:absolute;
  top: 10px;
  right: 10px;
  width: 190px;
  height: 70px;
  border-top: 6px solid #fff;
  border-right: 6px solid #fff;
  opacity: .95;
}

/* Titre */
.cta-title{
  margin: 0;
  color: #fff;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .6px;
  line-height: 1.05;
  font-size: 34px;
}

/* petite ligne sous titre */
.cta-line{
  width: 70px;
  height: 6px;
  background: #fff;
  margin: 14px 0 18px;
}

/* texte */
.cta-text{
  margin: 0 0 22px;
  color: rgba(255,255,255,.92);
  font-size: 14.5px;
  line-height: 1.6;
  max-width: 56ch;
}

/* boutons */
.cta-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.cta-btn{
  display: inline-block;
  text-decoration: none;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 12px 18px;
  border-radius: 0;
  font-size: 13px;
}

/* bouton blanc */
.cta-btn-light{
  background: #fff;
  color: var(--primary);
  border: 2px solid #fff;
}

/* bouton outline */
.cta-btn-outline{
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,.6);
}
.cta-btn-outline:hover{
  border-color: #fff;
}

/* Image droite */
.cta-photo{
  background: #fff;
}
.cta-photo img{
  width: 100%;
  height: 425px;          /* aligné avec bloc bleu */
  object-fit: cover;
  display: block;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

/* responsive */
@media (max-width: 991px){
  .cta-box{ min-height: 380px; }
  .cta-photo img{ height: 320px; }
  .cta-title{ font-size: 28px; }
  .cta-box-inner{ padding: 32px 22px; }
  .cta-box-inner::after{ width: 150px; height: 60px; }
}

/* ===== PAGE HERO (sub-header) ===== */
.page-hero{
    position: relative;
    min-height: 220px;            /* ajuste si besoin */
    display: flex;
    align-items: flex-end;
    padding: 120px 0 120px;
    background-image: var(--page-hero-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.page-hero-overlay{
    position: absolute;
    inset: 0;
    background: rgba(11,42,91,.55); /* overlay bleu */
}

.page-hero-inner{
    position: relative;
    z-index: 1;
}

.page-hero-title{
    color: #fff;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: .6px;
    margin: 0 0 10px;
    font-size: 32px;
    line-height: 1.1;
    text-align: center;
}

.page-hero-breadcrumb .breadcrumb{
    justify-content: center;
}

.page-hero-breadcrumb .breadcrumb-item,
.page-hero-breadcrumb .breadcrumb-item a{
    color: rgba(255,255,255,.85);
    text-decoration: none;
    font-weight: 600;
}

.page-hero-breadcrumb .breadcrumb-item a:hover{
    color: #fff;
    text-decoration: underline;
}

.page-hero-breadcrumb .breadcrumb-item.active{
    color: #fff;
    font-weight: 800;
}

.page-hero-breadcrumb .breadcrumb-item+.breadcrumb-item::before{
    color: rgba(255,255,255,.65);
}

/* ===== NAV : tiret actif (comme maquette) ===== */
.navbar .nav-item{
    position: relative;
}

/* L'indicateur pour item actif (li.nav-item > a.nav-link.active) */
.navbar .nav-item:has(> .nav-link.active)::after,
.navbar .nav-item:has(> .nav-link.show)::after{
    content:"";
    position:absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;               /* collé en bas de la navbar */
    width: 26px;
    height: 6px;
    background: var(--primary);
}

/* CONTACT (btn) actif */
.navbar .nav-item:has(> .btn-contact.active)::after{
    content:"";
    position:absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 26px;
    height: 6px;
    background: var(--primary);
}

/* Optionnel : si tu veux que le dropdown "Qui sommes nous" soit indiqué
   quand une page enfant est active (tu as déjà 'active' sur le toggle) */
.navbar .dropdown > .nav-link.active{
    color: var(--primary) !important;
}

/* Mobile: on masque (dans le burger menu) */
@media (max-width: 991px){
    .navbar .nav-item:has(> .nav-link.active)::after,
    .navbar .nav-item:has(> .nav-link.show)::after,
    .navbar .nav-item:has(> .btn-contact.active)::after{
        display:none;
    }
}


/* ===== SECTION HISTOIRE / MISSION / VISION ===== */
.history-section{
    background: #ffffff;
}

/* titre + ligne */
.history-title{
    color: var(--primary);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .6px;
    line-height: 1.1;
    font-size: 28px;   /* ajuste si tu veux plus grand/petit */
    margin: 0;
}

.history-line{
    width: 140px;
    height: 6px;
    background: #8b8b8b;
    margin: 16px 0 18px;
}

.history-text{
    color: #2d2d2d;
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
    max-width: 70ch;
}

/* collage gauche */
.history-collage{
    position: relative;
    min-height: 520px;
}

.history-img{
    display:block;
    width: 100%;
    height: auto;
}

/* grande image */
.history-img-1{
    max-width: 520px;
}

/* image superposée */
.history-img-2{
    position: absolute;
    right: -10px;
    top: 150px;
    width: 360px;
    border: 6px solid #fff; /* petit liseré blanc comme maquette */
}

/* cartes mission/vision */
.mv-card{
    background: #efefef;
    padding: 26px 22px 22px;
    height: 100%;
}

.mv-card-light{
    background: #f3f3f3;
}

.mv-icon{
    display:flex;
    justify-content:center;
    margin-bottom: 14px;
}

.mv-icon img{
    width: 64px;     /* icône SVG */
    height: 64px;
    object-fit: contain;
}

.mv-title{
    margin: 0 0 12px;
    text-align: center;
    color: var(--primary);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: 18px;
}

.mv-text{
    margin: 0;
    color: var(--primary);
    font-size: 14.5px;
    line-height: 1.7;
}

/* responsive */
@media (max-width: 991px){
    .history-collage{
        min-height: auto;
    }
    .history-img-2{
        position: static;
        width: 100%;
        margin-top: 14px;
        border: 0;
    }
}


/* ===== HISTOIRE (maquette : décalage 1/3 haut, 2/4 bas) ===== */
.history-section{
    padding: 80px 0 90px;
}

.history--gray{ background: #D9D9D966; padding-bottom: 230px; }
.history--white{ background: #ffffff; padding-bottom: 230px; }

/* titre + ligne */
.history-head{ margin-bottom: 60px; }

.history-line-h{
    width: 120px;
    height: 5px;
    background: #8b8b8b;
    margin: 14px auto 0;
}

/* grille */
.history-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 70px;
    align-items: start;
}

/* item */
.history-item{
    position: relative;
    padding-right: 38px; /* place pour la barre à droite */
}

/* décalage comme la maquette */
.history-item:nth-child(even){
    transform: translateY(140px);  /* <-- ajuste 120/160 selon ton rendu */
}

/* année */
.history-year{
    color: var(--primary);
    font-weight: 900;
    font-size: 84px;
    line-height: 1;
    letter-spacing: .5px;
    margin: 0 0 26px;
}

/* barre (or + bleu) */
.history-bar{
    position: absolute;
    top: 66px;         /* aligne avec le haut du bloc année */
    right: 10px;
    width: 18px;
}
.history-bar .bar-gold{
    display: block;
    width: 18px;
    height: 120px;
    background: #CDA24A; /* or */
}
.history-bar .bar-blue{
    display: block;
    width: 4px;
    height: 230px;
    background: var(--primary);
    margin: 0 auto;
    border-radius: 2px;
}

/* sous-titre */
.history-subtitle{
    margin: 0 0 12px;
    color: var(--primary);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .4px;
    font-size: 20px;
    line-height: 1.1;
}


/* responsive */
@media (max-width: 1199px){
    .history-grid{ gap: 40px; }
    .history-year{ font-size: 70px; }
}
@media (max-width: 991px){
    .history-grid{ grid-template-columns: repeat(2, 1fr); }
    .history-item:nth-child(even){ transform: translateY(110px); }
}
@media (max-width: 575px){
    .history-grid{ grid-template-columns: 1fr; }
    .history-item:nth-child(even){ transform: none; }
    .history-year{ font-size: 64px; }
}

/* BANDEAU TEXTE (maquette) */
.certif-banner{
    background: #ffffff;
    padding: 34px 0;
}

.certif-banner-box{
    background: var(--primary);   /* ton bleu charte */
    color: #fff;
    text-align: center;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.35;
    padding: 20px 26px;
    max-width: 1080px;            /* largeur bandeau */
    margin: 0 auto;               /* centré */
}

/* responsive */
@media (max-width: 991px){
    .certif-banner-box{
        font-size: 16px;
        padding: 18px 18px;
    }
}

/* ===== NOS VALEURS (maquette) ===== */
.our-values{
    background: #ffffff;
    padding-top: 20px;
}

.our-values-head{ margin-bottom: 70px; }

.our-values-title{
    color: var(--primary);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .6px;
    font-size: 38px;
    margin: 0;
}

.our-values-line{
    width: 120px;
    height: 5px;
    background: #8b8b8b;
    margin: 14px auto 0;
}

/* cartes */
.our-values-card{
    background: #efefef;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px 18px 26px;
    text-align: center;
}

/* icône (SVG déjà dans un cercle) */
.our-values-icon{
    width: 120px;   /* ajuste si besoin */
    height: 120px;
    object-fit: contain;
    display: block;
    margin: -120px auto 18px; /* fait sortir l’icône au-dessus du bloc */
}

/* texte */
.our-values-label{
    color: var(--primary);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .4px;
    line-height: 1.15;
    font-size: 22px;
}

.our-values-label > div{ margin: 6px 0; }

.our-values-ar{
    font-weight: 900;
    text-transform: none;
    letter-spacing: 0;
}

/* responsive */
@media (max-width: 991px){
    .our-values-title{ font-size: 28px; }
    .our-values-card{ min-height: 240px; }
    .our-values-icon{
        width: 110px;
        height: 110px;
        margin-top: -38px;
    }
    .our-values-label{ font-size: 20px; }
}

/* ===== ANCRAGE LOCAL (MAP) ===== */
.map-section{
    background: #D9D9D966; /* fond gris comme maquette */
    padding: 70px 0;
}

.map-head{
    max-width: 980px;
    margin: 0 auto 28px;
}

.map-title{
    color: var(--primary);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .6px;
    line-height: 1.05;
    font-size: 34px;
    margin: 0;
}

.map-line{
    width: 120px;
    height: 5px;
    background: #8b8b8b;
    margin: 14px auto 18px;
}

.map-desc{
    margin: 0 auto;
    max-width: 92ch;
    color: #2d2d2d;
    font-size: 14.5px;
    line-height: 1.7;
}

.map-figure{
    margin: 28px auto 0;
    max-width: 980px;         /* ajuste selon ta maquette */
    padding: 18px;
}

.map-figure img{
    width: 100%;
    height: auto;
    display: block;
}

/* responsive */
@media (max-width: 991px){
    .map-section{ padding: 50px 0; }
    .map-title{ font-size: 26px; }
    .map-figure{ padding: 12px; }
}

/* ===== EXCELLENCE / SMI ===== */
.iso-smi-section{
    background: #ffffff;
    padding: 70px 0;
}

.iso-smi-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;                 /* petit espace entre les 2 blocs */
    align-items: stretch;
}

.iso-smi-box{
    background: var(--primary); /* bleu thème */
    color: #fff;
    padding: 46px 38px;
    min-height: 520px;
}

.iso-smi-title{
    margin: 0 0 14px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .6px;
    line-height: 1.05;
    font-size: 34px;
}

.iso-smi-line{
    width: 130px;
    height: 5px;
    background: #8b8b8b; /* gris comme maquette */
    margin: 0 0 22px;
}

.iso-smi-p{
    margin: 0 0 16px;
    font-size: 15.5px;
    line-height: 1.65;
    color: rgba(255,255,255,.92);
}

.iso-smi-p strong{
    color: #fff;
    font-weight: 900;
}

.iso-smi-list .iso-smi-p{
    margin-bottom: 18px;
}

/* bloc image */
.iso-smi-media{
    background: #fff;
    overflow: hidden;
    min-height: 520px;
}

.iso-smi-media img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* responsive */
@media (max-width: 991px){
    .iso-smi-grid{
        grid-template-columns: 1fr;
    }
    .iso-smi-box,
    .iso-smi-media{
        min-height: auto;
    }
    .iso-smi-box{ padding: 34px 22px; }
    .iso-smi-title{ font-size: 26px; }
    .iso-smi-media img{ height: 320px; }
}

/* ===== EXPERTISE SPLIT ===== */
.expertise-split{
    background: #ffffff;
    padding: 80px 0;
}

.expertise-grid{
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 60px;
    align-items: center;
}

/* IMAGE */
.expertise-media{
    position: relative;
}

.expertise-media img{
    width: 100%;
    height: 620px;
    object-fit: cover;
    display: block;
}

/* TEXTE */
.expertise-content{
    max-width: 620px;
}

.expertise-title{
    margin: 0 0 16px;
    color: var(--primary);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .6px;
    line-height: 1.15;
    font-size: 20px;
}

.expertise-line{
    width: 140px;
    height: 5px;
    background: #8b8b8b;
    margin-bottom: 22px;
}

.expertise-text{
    margin: 0 0 18px;
    color: #2d2d2d;
    font-size: 16px;
    line-height: 1.65;
}

/* RESPONSIVE */
@media (max-width: 991px){
    .expertise-grid{
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .expertise-media img{
        height: 360px;
    }

    .expertise-title{
        font-size: 24px;
    }

    .expertise-content{
        max-width: 100%;
    }
}

/* ===== SERVICE SPLIT (maquette bloc bleu + image) ===== */
.service-split{
    padding: 80px 0;
}

.service-split--gray{
    background: #D9D9D966; /* gris de ta maquette */
}

.service-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;             /* petit espace comme la maquette */
    align-items: stretch;
}

/* Bloc bleu gauche */
.service-panel{
    background: var(--primary);
    color: #fff;
    padding: 44px 38px;
}

.service-title{
    margin: 0 0 14px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .6px;
    line-height: 1.15;
    font-size: 30px;
}

.service-line{
    width: 140px;
    height: 5px;
    background: #8b8b8b;
    margin: 10px 0 22px;
    opacity: .9;
}

.service-lead{
    margin: 0 0 18px;
    color: rgba(255,255,255,.92);
    font-size: 16px;
    line-height: 1.6;
}

/* Liste */
.service-list{
    margin: 0;
    padding-left: 18px;
}

.service-list li{
    margin: 0 0 14px;
    color: rgba(255,255,255,.92);
    font-size: 15.5px;
    line-height: 1.55;
}

.service-list strong{
    color: #fff;
    font-weight: 900;
}

/* Image droite */
.service-media{
    background: #fff;
    overflow: hidden;
}

.service-media img{
    width: 100%;
    height: 100%;
    min-height: 520px;     /* hauteur proche maquette */
    object-fit: cover;
    display: block;
}

/* Responsive */
@media (max-width: 991px){
    .service-grid{
        grid-template-columns: 1fr;
    }
    .service-panel{
        padding: 34px 22px;
    }
    .service-title{
        font-size: 24px;
    }
    .service-media img{
        min-height: 320px;
    }
}

/* ===== SERVICE SPLIT (cadre + bordure bleue) ===== */
.service-split--white{
    background: #fff;
    padding: 80px 0;
}

/* cadre extérieur (bordure bleue comme maquette) */
.service-frame{
    border: 3px solid #2b63d6;          /* bleu contour */
    padding: 12px;                       /* marge intérieure */
}

/* grille image + bloc */
.service-grid--energy{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: stretch;
}

/* image gauche grande */
.service-media--big{
    background: #fff;
    overflow: hidden;
}

.service-media--big img{
    width: 100%;
    height: 100%;
    min-height: 520px;
    object-fit: cover;
    display: block;
}

/* bloc bleu droite */
.service-panel--energy{
    background: var(--primary);
    color: #fff;
    padding: 34px 34px 18px;
    display: flex;
    flex-direction: column;
}

.service-panel--energy .service-title{
    font-size: 28px;
    line-height: 1.15;
    margin-bottom: 12px;
}

.service-panel--energy .service-line{
    width: 140px;
    height: 5px;
    background: #8b8b8b;
    margin: 8px 0 18px;
}

.service-panel--energy .service-lead{
    font-size: 15.5px;
    line-height: 1.6;
    color: rgba(255,255,255,.92);
    margin-bottom: 18px;
}

/* liste bullets */
.service-list--bullets{
    margin: 0 0 18px;
    padding-left: 18px;
}

.service-list--bullets li{
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.55;
    color: rgba(255,255,255,.92);
}

.service-list--bullets strong{
    color: #fff;
    font-weight: 900;
}

/* logos bas */
.service-logos{
    margin-top: auto;                    /* colle en bas du bloc */
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding-top: 10px;
}

.service-logos img{
    height: 52px;                        /* taille proche maquette */
    width: auto;
    background: #fff;                    /* fond blanc sous logo */
    padding: 6px 8px;
    display: block;
}

/* responsive */
@media (max-width: 991px){
    .service-grid--energy{
        grid-template-columns: 1fr;
    }
    .service-media--big img{
        min-height: 320px;
    }
    .service-panel--energy{
        padding: 26px 18px 16px;
    }
    .service-panel--energy .service-title{
        font-size: 22px;
    }
    .service-logos img{
        height: 26px;
    }
}

/* ===== COURANTS FAIBLES (fond blanc) ===== */
.cf-split--white{
    background: #fff;
    padding: 80px 0;
}

.cf-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: stretch;
}

/* bloc texte gris clair */
.cf-panel{
    background: #f1f1f1;   /* gris clair maquette */
    padding: 34px 32px;
}

.cf-title{
    margin: 0 0 10px;
    color: var(--primary);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .6px;
    line-height: 1.12;
    font-size: 28px;
}

.cf-line{
    width: 120px;
    height: 5px;
    background: #8b8b8b;
    margin: 14px 0 18px;
}

.cf-lead{
    margin: 0 0 18px;
    color: #2d2d2d;
    font-size: 15.5px;
    line-height: 1.65;
    max-width: 72ch;
}

/* liste */
.cf-list{
    margin: 0;
    padding-left: 18px;
}

.cf-list li{
    margin: 0 0 18px;
    color: #2d2d2d;
    font-size: 15.5px;
    line-height: 1.55;
}

.cf-list strong{
    font-weight: 900;
}

/* image droite */
.cf-media{
    overflow: hidden;
    background: #fff;
}

.cf-media img{
    width: 100%;
    height: 100%;
    min-height: 520px;
    object-fit: cover;
    display: block;
}

/* responsive */
@media (max-width: 991px){
    .cf-grid{
        grid-template-columns: 1fr;
    }
    .cf-media img{
        min-height: 320px;
    }
    .cf-title{
        font-size: 22px;
    }
    .cf-panel{
        padding: 26px 18px;
    }
}
/* ===== SERVICES SPLIT (fond gris) ===== */
.svc-split--gray{
    background: #D9D9D966; /* ton gris maquette */
    padding: 80px 0;
}

.svc-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;              /* petit gap comme maquette */
    align-items: stretch;
}

/* image */
.svc-media{
    background: #fff;
    overflow: hidden;
}

.svc-media img{
    width: 100%;
    height: 100%;
    min-height: 520px;
    object-fit: cover;
    display: block;
}

/* panneau bleu */
.svc-panel--blue{
    background: var(--primary);
    padding: 34px 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* typo */
.svc-title{
    margin: 0 0 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .6px;
    line-height: 1.12;
    font-size: 26px;
}
.svc-title--white{ color: #fff; }

.svc-line{
    width: 120px;
    height: 5px;
    margin: 14px 0 18px;
}
.svc-line--gray{ background: rgba(255,255,255,.45); } /* ligne grisée sur bleu */

.svc-lead{
    margin: 0 0 18px;
    font-size: 15.5px;
    line-height: 1.65;
    max-width: 72ch;
}
.svc-lead--white{ color: rgba(255,255,255,.92); }

/* bullets */
.svc-list{
    margin: 0;
    padding-left: 18px;
}
.svc-list li{
    margin: 0 0 18px;
    font-size: 15.5px;
    line-height: 1.55;
}
.svc-list--white li{ color: rgba(255,255,255,.92); }
.svc-list strong{ font-weight: 900; color: #fff; }

/* responsive */
@media (max-width: 991px){
    .svc-grid{ grid-template-columns: 1fr; }
    .svc-media img{ min-height: 320px; }
    .svc-title{ font-size: 22px; }
    .svc-panel--blue{ padding: 26px 18px; }
}

/* ===== SECTION CADREE (fond blanc) ===== */
.svc-frame-section--white{
    background: #ffffff;
    padding: 80px 0;
}

/* cadre bleu autour du bloc complet */
.svc-frame{
    border: 4px solid var(--primary);
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    overflow: hidden;   /* coupe l'image proprement */
    background: #fff;
}

/* panneau gauche bleu */
.svc-frame-panel{
    background: var(--primary);
    color: #fff;
    padding: 34px 34px 28px;
}

/* titre */
.svc-frame-title{
    margin: 0 0 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .6px;
    line-height: 1.12;
    font-size: 28px;
}

/* petite ligne grise sous titre (comme maquette) */
.svc-frame-line{
    width: 120px;
    height: 5px;
    background: rgba(255,255,255,.45);
    margin: 14px 0 20px;
}

/* liste avec puces */
.svc-frame-list{
    margin: 0;
    padding-left: 18px;
}
.svc-frame-list li{
    margin: 0 0 18px;
    font-size: 15.5px;
    line-height: 1.55;
    color: rgba(255,255,255,.92);
}
.svc-frame-list strong{
    font-weight: 900;
    color: #fff;
}

/* image droite */
.svc-frame-media{
    background: #fff;
}
.svc-frame-media img{
    width: 100%;
    height: 100%;
    min-height: 520px;
    object-fit: cover;
    display: block;
}

/* responsive */
@media (max-width: 991px){
    .svc-frame{
        grid-template-columns: 1fr;
    }
    .svc-frame-media img{
        min-height: 320px;
    }
    .svc-frame-title{
        font-size: 22px;
    }
    .svc-frame-panel{
        padding: 26px 18px 18px;
    }
}

/* ============================= */
/* SECTEURS D’ACTIVITÉ – INTRO   */
/* ============================= */

.sector-intro{
    padding: 90px 0;
    background: #ffffff;
}

/* Image gauche */
.sector-image img{
    width: 100%;
    height: auto;
    display: block;
}

/* Titre */
.sector-title{
    color: var(--primary);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .6px;
    font-size: 34px;
    line-height: 1.15;
    margin: 0 0 16px;
}

/* Trait sous le titre */
.sector-line{
    width: 120px;
    height: 5px;
    background: #8b8b8b;
    margin-bottom: 22px;
}

/* Texte */
.sector-text{
    color: #2d2d2d;
    font-size: 16px;
    line-height: 1.7;
    max-width: 72ch;
}

/* Responsive */
@media (max-width: 991px){
    .sector-intro{
        padding: 60px 0;
    }

    .sector-title{
        font-size: 26px;
    }

    .sector-line{
        width: 90px;
        height: 4px;
    }

    .sector-text{
        font-size: 15px;
    }
}

/* =============================== */
/* SECTEUR - BLOC (INDUSTRIE)      */
/* =============================== */

.sector-block{
    padding: 70px 0;
}

.sector-block--gray{
    background: #D9D9D966; /* ton gris maquette */
}

/* Head */
.sector-block-title{
    color: var(--primary);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .6px;
    margin: 0;
    font-size: 34px;
}

.sector-block-line{
    width: 120px;
    height: 5px;
    background: #8b8b8b;
    margin: 14px auto 18px;
}

.sector-block-intro{
    margin: 0 auto;
    max-width: 1100px;
    color: var(--primary);
    font-size: 16px;
    line-height: 1.55;
}

/* Bandeau solutions clés */
.sector-keybar{
    margin-top: 32px;
    display: grid;
    grid-template-columns: 420px 1fr;
    align-items: stretch;
    background: #f2f2f2;
}

.sector-keybar-label{
    background: var(--primary);
    color: #fff;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: 18px 18px;
    font-size: 18px;
    display: flex;
    align-items: center;
}

.sector-keybar-text{
    color: var(--primary);
    font-size: 16px;
    line-height: 1.35;
    padding: 18px 18px;
    display: flex;
    align-items: center;
    background: #ffffff;
}

/* Responsive */
@media (max-width: 991px){
    .sector-keybar{
        grid-template-columns: 1fr;
    }
    .sector-keybar-label{
        font-size: 16px;
        justify-content: center;
        text-align: center;
    }
    .sector-block-title{ font-size: 26px; }
    .sector-block-line{ width: 90px; height: 4px; }
}

/* =============================== */
/* DOMAINES D'INTERVENTION         */
/* =============================== */

.domains-section{
    background: #D9D9D966; /* fond gris */
    padding: 30px 0;
}

.domains-title{
    color: var(--primary);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .6px;
    margin: 0 0 34px;
    font-size: 20px;
    padding-bottom: 20px;
}

/* Layout global : gauche + grande image */
.domains-layout{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: stretch;
}

/* Colonne gauche = 2 rangées */
.domains-left{
    display: grid;
    grid-template-rows: auto auto;
    gap: 18px;
}

.domains-row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Bloc bleu */
.domain-card{
    background: var(--primary);
    color: #fff;
    padding: 26px 22px;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.domain-ico img{
    width: 54px;
    height: 54px;
    object-fit: contain;
    display: block;
    margin-bottom: 14px;
}

.domain-h{
    margin: 0 0 10px;
    font-weight: 900;
    font-size: 20px;
    line-height: 1.15;
}

.domain-p{
    margin: 0;
    font-size: 15px;
    line-height: 1.45;
    opacity: .95;
}

/* Grille logos (2 colonnes) */
.logos-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
}

.logos-col{
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

.logo-cell{
    background: #fff;
    border: 1px solid #e6e6e6;
    height: 86px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-cell img{
    max-width: 70%;
    max-height: 70%;
    object-fit: contain;
    display: block;
}

/* Image droite */
.domains-right{
    background: #fff;
    border: 1px solid #e6e6e6;
    overflow: hidden;
}

.domains-right img{
    width: 100%;
    height: 100%;
    min-height: 540px;
    object-fit: cover;
    display: block;
}

/* Responsive */
@media (max-width: 991px){
    .domains-layout{
        grid-template-columns: 1fr;
    }
    .domains-row{
        grid-template-columns: 1fr;
    }
    .domains-right img{
        min-height: 320px;
    }
    .domain-card{
        min-height: auto;
    }
}

/* ===== SECTION MOSAÏQUE (VERSION 2x2) ===== */
.sector-mosaic{
    background: #D9D9D966;
}

/* image gauche */
.sector-photo{
    height: 100%;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    overflow: hidden;
}
.sector-photo img{
    width: 100%;
    height: 100%;
    min-height: 520px;           /* ajuste si tu veux + bas */
    object-fit: cover;
    display: block;
}

/* ===== GRILLE PRINCIPALE : 2 colonnes / 2 lignes ===== */
.sector-grid-2{
    height: 100%;
    min-height: 520px;           /* doit matcher l’image gauche */
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;                   /* espace plus petit */
}

/* ===== BLOCS BLEUS (carrés) ===== */
.sector-blue{
    background: var(--primary);
    color: #fff;
    padding: 22px 20px;          /* compact */
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.sector-blue-ico{
    width: 44px;
    height: 44px;
    object-fit: contain;
    margin-bottom: 14px;
}
.sector-blue-title{
    margin: 0 0 12px;
    font-weight: 900;
    color: #fff;
    font-size: 22px;
    line-height: 1.15;
}
.sector-blue-text{
    margin: 0;
    color: rgba(255,255,255,.9);
    font-size: 15px;
    line-height: 1.55;
}

/* ===== CONTENEURS LOGOS ===== */
.sector-logos-2{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;                  /* espace plus petit */
}

.sector-logos-4{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;                  /* espace plus petit */
}

/* ===== CARTES LOGOS ===== */
.sector-logo{
    background: #fff;
    box-shadow: 0 8px 18px rgba(0,0,0,.12);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;              /* plus compact */
}
.sector-logo img{
    max-width: 78%;
    max-height: 70%;
    object-fit: contain;
    display: block;
}

/* ===== Responsive ===== */
@media (max-width: 991px){
    .sector-photo img{ min-height: 340px; }

    .sector-grid-2{
        min-height: auto;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .sector-logos-2{
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }
}

/* layout 2 colonnes propre (remplace ton ancien layout si besoin) */
.sector-layout{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: stretch;
}

/* très important pour éviter les débordements en grid */
.sector-left,
.sector-right{
    min-width: 0;
}

/* image gauche */
.sector-photo{
    height: 100%;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    overflow: hidden;
}
.sector-photo img{
    width: 100%;
    height: 100%;
    min-height: 520px;      /* ajuste si tu veux + bas */
    object-fit: cover;
    display: block;
}

/* grille droite (ton style) */
.sector-grid-2{
    height: 100%;
    min-height: 520px;      /* doit matcher l'image gauche */
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
}

/* responsive */
@media (max-width: 991px){
    .sector-layout{
        grid-template-columns: 1fr;
    }
    .sector-photo img{
        min-height: 320px;
    }
    .sector-grid-2{
        min-height: auto;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
    .sector-logos-2{
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }
}

/* CTA bouton (fond gris) */
.sector-cta{
    background: #D9D9D966;
    padding: 34px 0 50px;
    display: flex;
    justify-content: center;
}

.sector-cta-btn{
    background: var(--primary);
    color: #fff;
    text-decoration: none;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: 14px 22px;
    border-radius: 0;
    display: inline-block;
}

.sector-cta-btn:hover{
    opacity: .92;
    color: #fff;
}

/* ===== Bande "secteur" (titre + barre + encart solutions) ===== */
.sector-band{
    padding: 70px 0 60px;
}

.sector-band--white{
    background: #fff;
}

.sector-band-title{
    color: var(--primary);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .6px;
    font-size: 28px;
    margin: 0;
}

.sector-band-line{
    width: 140px;
    height: 5px;
    background: #8b8b8b;
    margin: 14px auto 18px;
}

.sector-band-desc{
    max-width: 95ch;
    margin: 0 auto 46px;
    color: var(--primary);
    font-size: 15px;
    line-height: 1.6;
    font-weight: 500;
}

/* bloc solutions */
.sector-band-row{
    display: grid;
    grid-template-columns: 420px 1fr;
    align-items: stretch;
}

.sector-band-left{
    background: var(--primary);
    color: #fff;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: 22px 26px;
    font-size: 18px;
    line-height: 1.2;
    display: flex;
    align-items: center;
}

.sector-band-right{
    background: #eeeeee;
    color: var(--primary);
    padding: 22px 26px;
    font-size: 15px;
    line-height: 1.45;
    display: flex;
    align-items: center;
}

/* responsive */
@media (max-width: 991px){
    .sector-band-row{
        grid-template-columns: 1fr;
    }
    .sector-band-left,
    .sector-band-right{
        font-size: 15px;
    }
}

/* Variante fond blanc (mêmes styles que ta section domains-section) */
.domains-section--white{
    background: #fff;
    padding: 30px 0;
}

/* (Optionnel) si tu veux des bordures un peu + propres sur fond blanc */
.domains-section--white .logo-cell,
.domains-section--white .domains-right{
    border-color: #eaeaea;
}
/* ===== MOSAÏQUE INFRA (fond blanc) ===== */
.infra-mosaic{
    padding: 40px 0;
}
.infra-mosaic--white{
    background: #fff;
}

/* titre */
.infra-title{
    color: var(--primary);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .6px;
    margin: 0 0 26px;
    font-size: 20px;
}

/* layout global */
.infra-layout{
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 26px;
    align-items: stretch;
}

/* colonne gauche */
.infra-left{
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 12px; /* petit espace entre les 2 lignes */
}

/* une ligne */
.infra-row{
    display: grid;
    grid-template-columns: 1fr 1fr; /* moitié / moitié */
    gap: 12px; /* petit espace entre bloc et logos */
    align-items: stretch;
}

/* bloc bleu */
.infra-card{
    background: var(--primary);
    color: #fff;
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 220px; /* réduit la hauteur */
}

.infra-ico img{
    width: 54px;
    height: 54px;
    object-fit: contain;
    display: block;
    margin-bottom: 12px;
}

.infra-h{
    margin: 0 0 10px;
    font-weight: 900;
    font-size: 20px;
    line-height: 1.15;
}

.infra-p{
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    opacity: .95;
}

/* logos empilés (2) */
.infra-logos-2{
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 10px; /* petit espace entre les 2 logos */
}

/* carte logo */
.infra-logo{
    background: #fff;
    border: 1px solid #e6e6e6;
    box-shadow: 0 10px 25px rgba(0,0,0,.10);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    min-height: 80px;
}

.infra-logo img{
    max-width: 78%;
    max-height: 70%;
    object-fit: contain;
    display: block;
}

/* image droite */
.infra-right{
    background: #fff;
    border: 1px solid #e6e6e6;
    overflow: hidden;
}

.infra-right img{
    width: 100%;
    height: 100%;
    min-height: 470px;
    object-fit: cover;
    display: block;
}

/* responsive */
@media (max-width: 991px){
    .infra-layout{
        grid-template-columns: 1fr;
    }
    .infra-row{
        grid-template-columns: 1fr;
    }
    .infra-right img{
        min-height: 320px;
    }
}

/* ===== INFRA MOSAÏQUE (fond blanc) ===== */
.infra-mosaic{
    padding: 0px 0 56px;
    background: #fff;
}

/* layout global : image gauche + mosaïque droite */
.infra-mosaic-layout{
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 26px;
    align-items: stretch;
}

/* image gauche */
.infra-mosaic-photo{
    background: #fff;
    border: 1px solid #e6e6e6;
    overflow: hidden;
    height: 100%;
}
.infra-mosaic-photo img{
    width: 100%;
    height: 100%;
    min-height: 520px;
    object-fit: cover;
    display: block;
}

/* grille droite (2 lignes) */
.infra-mosaic-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 12px; /* espace petit comme ta maquette */
    height: 100%;
}

/* blocs génériques */
.infra-box{
    min-height: 250px;
}

/* blocs bleus */
.infra-box--blue{
    background: var(--primary);
    color: #fff;
    padding: 22px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.infra-box-ico{
    width: 54px;
    height: 54px;
    object-fit: contain;
    display: block;
    margin-bottom: 12px;
}

.infra-box-title{
    margin: 0 0 10px;
    font-weight: 900;
    font-size: 20px;
    line-height: 1.15;
}

.infra-box-text{
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    opacity: .95;
}

/* zones logos */
.infra-box--logos{
    background: transparent;
}

/* grille logos top (2x2 + 1 large) */
.infra-logos-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    height: 100%;
}

/* une carte logo */
.infra-logo{
    background: #fff;
    border: 1px solid #e6e6e6;
    box-shadow: 0 10px 25px rgba(0,0,0,.10);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    min-height: 80px;
}
.infra-logo img{
    max-width: 80%;
    max-height: 70%;
    object-fit: contain;
    display: block;
}

/* logo large (Attijariwafa) prend 2 colonnes */
.infra-logo--wide{
    grid-column: 1 / -1;
}

/* bas gauche : 2 logos empilés */
.infra-logos-col{
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
    height: 100%;
}

/* CTA */
.infra-mosaic-cta{
    margin-top: 26px;
}

.infra-mosaic-btn{
    display: inline-block;
    background: var(--primary);
    color: #fff;
    text-decoration: none;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: 14px 22px;
    border-radius: 0;
}
.infra-mosaic-btn:hover{
    opacity: .92;
}

/* responsive */
@media (max-width: 991px){
    .infra-mosaic-layout{
        grid-template-columns: 1fr;
    }

    .infra-mosaic-photo img{
        min-height: 320px;
    }

    .infra-mosaic-grid{
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .infra-box{
        min-height: auto;
    }
}
/* ===== STRIP SECTEUR (Énergie / Industrie / Infrastructure...) ===== */
.sector-strip{
    padding: 44px 0 44px;
}
.sector-strip--gray{
    background: #D9D9D966; /* fond gris maquette */
}

/* head */
.sector-strip-title{
    color: var(--primary);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .6px;
    margin: 0;
    font-size: 34px;
}

.sector-strip-line{
    width: 120px;
    height: 5px;
    background: #8b8b8b;
    margin: 14px auto 18px;
}

.sector-strip-lead{
    margin: 0 auto 34px;
    max-width: 980px;
    color: var(--primary);
    font-size: 16px;
    line-height: 1.55;
}

/* bande */
.sector-strip-bar{
    display: grid;
    grid-template-columns: 420px 1fr; /* largeur bloc bleu */
    align-items: stretch;
    background: #efefef;
}

.sector-strip-label{
    background: var(--primary);
    color: #fff;
    padding: 16px 18px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .4px;
    font-size: 18px;
    line-height: 1.15;
    display: flex;
    align-items: center;
}

.sector-strip-text{
    padding: 16px 18px;
    color: var(--primary);
    font-size: 16px;
    line-height: 1.35;
    display: flex;
    align-items: center;
    background: #ffffff;
}

/* responsive */
@media (max-width: 991px){
    .sector-strip-title{ font-size: 26px; }
    .sector-strip-bar{
        grid-template-columns: 1fr;
    }
    .sector-strip-label{
        justify-content: center;
        text-align: center;
    }
}

/* ===== SECTION ÉNERGIE MOSAÏQUE (fond gris) ===== */
.energy-mosaic{
    background: #D9D9D966;
    padding: 40px 0 46px;
}

.energy-title{
    color: var(--primary);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .6px;
    margin: 0 0 26px;
    font-size: 20px;
}

/* ✅ Grille principale (comme ta capture) :
   - 4 colonnes : 2 petites à gauche + 2 pour la grande image à droite
   - 3 lignes
*/
.energy-grid{
    display: grid;
    gap: 14px; /* petit espace comme la maquette */
    grid-template-columns: 310px 310px 1fr 1fr;
    grid-template-rows: 220px 220px 220px;
    align-items: stretch;
}

/* ===== Placement des blocs (sans grid-area, plus clair) ===== */
.energy-blue--1{ grid-column: 1 / 2; grid-row: 1; }
.energy-logo--siemens{ grid-column: 2 / 3; grid-row: 1; }

/* grande image à droite sur 2 colonnes + 2 lignes */
.energy-photo--main{ grid-column: 3 / 5; grid-row: 1 / 3; }

.energy-logos-col{ grid-column: 1 / 2; grid-row: 2; }
.energy-blue--2{ grid-column: 2 / 3; grid-row: 2; }

/* ✅ DERNIÈRE LIGNE : image bas sur toute la largeur du "bloc gauche" (col1+col2) */
.energy-photo--substation{ grid-column: 1 / 3; grid-row: 3; }

/* bloc bleu bas au milieu */
.energy-blue--3{ grid-column: 3 / 4; grid-row: 3; }

/* 2 logos à droite */
.energy-logos-2{ grid-column: 4 / 5; grid-row: 3; }

/* ===== Blocs bleus ===== */
.energy-blue{
    background: var(--primary);
    color: #fff;
    padding: 18px 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.energy-blue-ico{
    width: 44px;
    height: 44px;
    object-fit: contain;
    margin-bottom: 12px;
}

.energy-blue-title{
    margin: 0 0 10px;
    font-weight: 900;
    font-size: 18px;
    line-height: 1.15;
}

.energy-blue-text{
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255,255,255,.92);
}

/* ===== Logos ===== */
.energy-logo{
    background: #fff;
    border: 1px solid #e6e6e6;
    box-shadow: 0 8px 18px rgba(0,0,0,.08);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    overflow: hidden;
}

.energy-logo img{
    max-width: 78%;
    max-height: 70%;
    object-fit: contain;
    display: block;
}

/* colonne logos (3 empilés) */
.energy-logos-col{
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    gap: 10px;
}

/* logos droite (2 empilés) */
.energy-logos-2{
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    gap: 10px;
}

/* ===== Images ===== */
.energy-photo{
    background: #fff;
    border: 1px solid #e6e6e6;
    box-shadow: 0 8px 18px rgba(0,0,0,.08);
    overflow: hidden; /* évite que ça “sorte” */
}

.energy-photo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ✅ optionnel : si tu veux que l’image bas soit un peu plus "cinéma" */
.energy-photo--substation img{
    object-position: center;
}

/* ===== CTA ===== */
.energy-cta{
    margin-top: 26px;
    text-align: center;
}
.energy-btn{
    display: inline-block;
    background: var(--primary);
    color: #fff;
    text-decoration: none;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: 12px 18px;
    border-radius: 0;
    font-size: 12px;
}
.energy-btn:hover{ opacity: .92; }

/* ===== Responsive ===== */
@media (max-width: 991px){
    .energy-grid{
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    /* on remet tout en pile */
    .energy-blue--1,
    .energy-logo--siemens,
    .energy-photo--main,
    .energy-logos-col,
    .energy-blue--2,
    .energy-photo--substation,
    .energy-blue--3,
    .energy-logos-2{
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
    }

    .energy-photo--main{ min-height: 320px; }
    .energy-photo--substation{ min-height: 220px; }
}

/* ===== SECTION CONFIANCE (fond blanc) ===== */
.trust-section--white{
    background: #fff;
    padding: 54px 0 44px;
}

.trust-title{
    color: var(--primary);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .6px;
    margin: 0;
    font-size: 22px;
    line-height: 1.25;
    max-width: 1050px;
    margin-left: auto;
    margin-right: auto;
}

.trust-line{
    width: 150px;
    height: 6px;
    background: #8b8b8b;
    margin: 16px auto 0;
}

.trust-text{
    margin: 22px auto 0;
    max-width: 980px;
    color: #2d2d2d;
    font-size: 14.5px;
    line-height: 1.7;
}

/* Responsive */
@media (max-width: 991px){
    .trust-section--white{ padding: 44px 0 34px; }
    .trust-title{ font-size: 18px; }
    .trust-line{ width: 120px; height: 5px; }
    .trust-text{ font-size: 14px; }
}

/* ===== PROJETS + FILTRE ===== */
.projects--white{
    background:#fff;
    padding: 34px 0 46px;
}

/* filtre */
.projects-filter{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-bottom: 18px;
}

.filter-btn{
    background: #fff;
    border: 1px solid rgba(34,57,122,.55);
    color: var(--primary);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .3px;
    padding: 10px 18px;
    border-radius: 0;
    font-size: 13px;
    cursor: pointer;
    line-height: 1;
}

.filter-btn.is-active{
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* grille 3 colonnes */
.projects-grid{
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(3, 1fr);
}

/* card */
.project-card{
    position: relative;
    overflow: hidden;
    display: block;
    text-decoration: none;
    background: #fff;
    width: 100%;
    height: 400px;
}

.project-card > img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;       /* ✅ cover */
    display: block;          /* ✅ supprime les gaps inline */
}

/* overlay bleu en bas */
.project-overlay{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(34,57,122,.85);
    padding: 14px 14px;
}

@media (max-width: 991px){
    .project-card{
        height: 230px;
    }
}

.project-title{
    color: #fff;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .4px;
    font-size: 13px;
    line-height: 1.25;
}

/* hover léger */
.project-card:hover img{
    transform: scale(1.02);
    transition: transform .25s ease;
}

/* hide */
.project-card.is-hidden{ display:none; }

/* responsive */
@media (max-width: 991px){
    .projects-grid{ grid-template-columns: repeat(2, 1fr); }
    .project-card img{ height: 250px; }
}

@media (max-width: 575px){
    .projects-grid{ grid-template-columns: 1fr; }
    .project-card img{ height: 240px; }
}

/* ===== SECTION REJOINDRE ===== */
.join-section{
    background:#fff;
    padding: 48px 0;
}

.join-layout{
    display:grid;
    grid-template-columns: 520px 1fr;
    gap: 60px;
    align-items: start;
}

/* image gauche */
.join-left{
    display:flex;
    justify-content:center;
}

.join-img{
    width: 100%;
    max-width: 520px;
    height: auto;
    display:block;
    object-fit: cover;
}

/* contenu droite */
.join-title{
    margin: 0 0 12px;
    color: var(--primary);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .4px;
    line-height: 1.12;
    font-size: 26px;
}

.join-line{
    width: 130px;
    height: 4px;
    background: #9b9b9b;
    margin: 0 0 18px;
}

.join-text{
    margin: 0;
    color: #2b2b2b;
    font-size: 15px;
    line-height: 1.65;
    max-width: 640px;
}

/* responsive */
@media (max-width: 991px){
    .join-layout{
        grid-template-columns: 1fr;
        gap: 26px;
    }
    .join-title{ font-size: 22px; }
    .join-img{ max-width: 680px; }
}

.join-right{
    margin-top:60px;
}

/* ==========================================
   POURQUOI NOUS REJOINDRE (FIX FINAL)
   - Corrige le conflit avec .join-img (max-width:520)
   - Images = full width / full height sans vide
========================================== */

.join-section{

    padding: 50px 0;
}

.join-section .join-title{
    color: var(--primary);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .6px;
    margin: 0 0 28px;
    font-size: 20px;
}

/* grille */
.join-section .join-grid{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
    align-items: stretch;
}

/* évite shrink */
.join-section .join-grid > *{ min-width: 0; }

/* cards */
.join-section .join-card{
    box-shadow: 0 10px 26px rgba(0,0,0,.08);
    padding: 26px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 240px;
}

.join-section .join-card--blue{
    background: var(--primary);
    color: #fff;
}

.join-section .join-card--white{
    background: #fff;
    color: #111;
}

.join-section .join-h{
    margin: 0 0 12px;
    font-weight: 900;
    font-size: 16px;
    line-height: 1.2;
}

.join-section .join-p{
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    opacity: .95;
}

.join-section .join-h--dark{ color: var(--primary); }
.join-section .join-p--dark{ color:#222; opacity: 1; }

/* media */
.join-section .join-media{
    background: #fff;
    box-shadow: 0 10px 26px rgba(0,0,0,.08);
    overflow: hidden;
    width: 100%;
}

/* ✅ IMPORTANT : neutralise l'ancien .join-img global */
.join-section .join-grid .join-img{
    max-width: none !important;
    height: 100%;
    width: 100%;
    display: block;
    position: relative;
    min-height: 240px;
}

/* ✅ image = full cover */
.join-section .join-grid .join-img img{
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}

/* placements desktop */
.join-section .join-1{ grid-column: 1 / span 2; }
.join-section .join-airport{ grid-column: 3 / span 2; }
.join-section .join-2{ grid-column: 5 / span 2; }

.join-section .join-3{ grid-column: 1 / span 3; }
.join-section .join-industry{ grid-column: 4 / span 3; }

.join-section .join-teamwork{ grid-column: 1 / span 3; }
.join-section .join-4{ grid-column: 4 / span 3; }

/* hauteur un peu plus grande pour 2e et 3e images */
.join-section .join-industry,
.join-section .join-teamwork{
    min-height: 260px;
}

/* responsive */
@media (max-width: 991px){
    .join-section .join-grid{
        grid-template-columns: 1fr;
    }

    .join-section .join-1,
    .join-section .join-airport,
    .join-section .join-2,
    .join-section .join-3,
    .join-section .join-industry,
    .join-section .join-teamwork,
    .join-section .join-4{
        grid-column: 1 / -1;
    }

    .join-section .join-grid .join-img{
        min-height: 220px;
    }

    .join-section .join-card{
        min-height: auto;
    }
}

/* ===== CTA CARRIÈRE (fond blanc) ===== */
.career-cta{
    background: #fff;          /* ✅ fond blanc */
    padding: 54px 0 64px;
}

.career-cta .container{
    max-width: 1180px;
}

/* bandeau bleu */
.career-cta__bar{
    background: var(--primary);
    color: #fff;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: .6px;
    text-align: center;
    padding: 16px 18px;
    font-size: 22px;

    /* laisse une marge à gauche/droite (pas full width) */
    max-width: 1100px;
    margin: 0 auto 26px;
}

/* texte */
.career-cta__text{
    max-width: 780px;
    margin: 0 auto 26px;
    text-align: center;
    color: var(--primary);
    font-size: 14.5px;
    line-height: 1.7;
}

/* chevrons (double flèche vers le bas) */
.career-cta__chevrons{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 6px 0 22px;
}

.career-cta__chevrons span{
    width: 18px;
    height: 18px;
    border-right: 5px solid var(--primary);
    border-bottom: 5px solid var(--primary);
    transform: rotate(45deg);
    display: block;
}

/* bouton */
.career-cta__actions{
    text-align: center;
}

.career-cta__btn{
    display: inline-block;
    background: var(--primary);
    color: #fff;
    text-decoration: none;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: 12px 18px;
    border-radius: 0;
    font-size: 12px;
}

.career-cta__btn:hover{
    opacity: .92;
    color: #fff;
}

/* responsive */
@media (max-width: 991px){
    .career-cta__bar{
        font-size: 18px;
        max-width: 100%;
    }
    .career-cta__text{
        padding: 0 12px;
    }
}

/* ===== CONTACT SPLIT (comme maquette) ===== */
.contact-split{
    background:#fff;
    padding: 60px 0 80px;
}

.contact-head{
    margin-bottom: 36px;
}

.contact-title{
    color: var(--primary);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .6px;
    font-size: 22px;
    margin: 0 0 14px;
}

.contact-line{
    width: 140px;
    height: 5px;
    background: #8b8b8b;
    margin: 0 auto;
}

/* grille principale */
.contact-grid{
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 0;
    box-shadow: 0 10px 26px rgba(0,0,0,.08);
}

/* LEFT */
.contact-left{
    background: var(--primary);
    color:#fff;
    padding: 34px 30px;
}

.contact-left-inner{ width: 100%; }

.contact-ico-top{
    width: 70px;
    height: 50px;
    margin: 0 0 22px;
    position: relative;
}
.contact-ico-top span{
    position:absolute;
    border: 2px solid #d7a741; /* doré */
    border-radius: 6px;
    width: 40px; height: 26px;
    left: 0; top: 18px;
}
.contact-ico-top span:last-child{
    width: 40px; height: 26px;
    left: 18px; top: 0;
}

/* blocs */
.contact-block{ margin-bottom: 26px; }

.contact-place{
    margin: 0 0 10px;
    font-weight: 900;
    font-size: 18px;
    letter-spacing: .2px;
}

.contact-list{
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 8px;
    font-size: 13.5px;
    line-height: 1.4;
    opacity: .98;
}

.contact-list .ci{
    display:inline-block;
    width: 18px;
    margin-right: 8px;
    color: #d7a741; /* doré */
}

/* social */
.contact-social{
    margin-top: 22px;
    display:flex;
    align-items:center;
    gap: 10px;
    font-weight: 900;
    letter-spacing: .2px;
}
.contact-ln{
    width: 28px;
    height: 28px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border: 1px solid rgba(255,255,255,.75);
    color:#fff;
    text-decoration:none;
    font-weight: 900;
    border-radius: 3px;
}

/* RIGHT */
.contact-right{
    background: #f2f2f2;
    padding: 34px 34px;
}

.contact-form-title{
    margin: 0 0 18px;
    color: #7b7b7b;
    font-weight: 800;
    font-size: 20px;
}

.contact-form{
    display: grid;
    gap: 14px;
}

.contact-row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.contact-input,
.contact-textarea{
    width: 100%;
    border: 1px solid #7f7f7f;
    background: #f6f6f6;
    padding: 12px 12px;
    font-size: 14px;
    outline: none;
    border-radius: 0;
}

.contact-textarea{
    min-height: 240px;
    resize: vertical;
}

.contact-check{
    display:flex;
    gap: 8px;
    align-items:flex-start;
    font-size: 11px;
    color: #666;
    margin-top: 6px;
}
.contact-check a{ color: #666; text-decoration: underline; }

.contact-note{
    margin: 0;
    font-size: 10.5px;
    color: #777;
    line-height: 1.45;
}

.contact-btn{
    width: fit-content;
    background: var(--primary);
    color: #fff;
    border: 0;
    padding: 10px 18px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .4px;
    border-radius: 0;
}

/* responsive */
@media (max-width: 991px){
    .contact-grid{
        grid-template-columns: 1fr;
    }
    .contact-row{
        grid-template-columns: 1fr;
    }
    .contact-right{ padding: 26px 18px; }
    .contact-left{ padding: 26px 18px; }
}

/* ===== ACTUALITÉS / NEWS PAGE ===== */
.news-page{
    background:#fff;
    padding: 70px 0 70px;
}

/* head */
.news-head{ margin-bottom: 26px; }

.news-title{
    color: var(--primary);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .6px;
    font-size: 22px;
    line-height: 1.25;
    margin: 0;
}

.news-line{
    width: 140px;
    height: 5px;
    background: #8b8b8b;
    margin: 14px auto 0;
}

/* filter */
.news-filter{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin: 22px 0 34px;
}

.news-filter-btn{
    background: #fff;
    border: 1px solid rgba(34,57,122,.55);
    color: var(--primary);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .3px;
    padding: 10px 18px;
    border-radius: 0;
    font-size: 12px;
    cursor: pointer;
    line-height: 1;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.news-filter-btn.is-active{
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* list */
.news-list{
    display: grid;
    gap: 18px;
    max-width: 1180px;
    margin: 0 auto;
}

/* ✅ ITEM: image collée au bloc texte */
.news-item{
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 0;                       /* ✅ COLLE */
    align-items: stretch;

    background: #fff;
    box-shadow: 0 10px 26px rgba(0,0,0,.08); /* ✅ shadow unique */
    overflow: hidden;              /* ✅ coupe propre */
}

/* évite shrink en grid */
.news-item > *{ min-width: 0; }

/* media */
.news-media{
    display:block;
    background:#fff;
    height: 100%;                 /* ✅ prend toute la hauteur de l'item */
}

.news-media img{
    width: 100%;
    height: 100%;
    object-fit: cover;            /* ✅ couvre tout */
    display:block;
}

/* card */
.news-card{
    padding: 26px 26px 22px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    background:#fff;

    border-left: 1px solid #f0f0f0; /* ✅ trait léger (comme la maquette) */
    min-height: 220px;
}

/* tag */
.news-tag{
    display: inline-flex;
    width: fit-content;
    padding: 7px 12px;
    font-weight: 900;
    letter-spacing: .4px;
    text-transform: uppercase;
    font-size: 12px;
    margin-bottom: 14px;
}

.news-tag--gold{
    background: #CDA24A;
    color: #fff;
}

/* title */
.news-h{
    margin: 0 0 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .3px;
    font-size: 13px;
    line-height: 1.35;
    color: var(--primary);
}

.news-h a{
    color: var(--primary);
    text-decoration: none;
}

.news-h span{
    font-weight: 700;
    color: var(--primary);
    opacity: .92;
}

/* date */
.news-date{
    font-size: 11px;
    color: #9a9a9a;
    text-transform: uppercase;
    letter-spacing: .3px;
    margin-bottom: 14px;
}

/* button */
.news-btn{
    display: inline-block;
    width: fit-content;
    background: var(--primary);
    color: #fff;
    text-decoration: none;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .3px;
    padding: 10px 14px;
    border-radius: 0;
    font-size: 11px;
}

.news-btn:hover{ opacity: .92; color:#fff; }

/* hide (filter) */
.news-item.is-hidden{ display:none; }

/* responsive */
@media (max-width: 991px){
    .news-item{
        grid-template-columns: 1fr;
    }
    .news-card{
        border-left: 0;
        border-top: 1px solid #f0f0f0;
    }
    .news-media{
        min-height: 220px;
    }
}

/* =========================
   MOBILE OFFCANVAS MENU
========================= */
.em-offcanvas{
    background: var(--primary);
    color: #fff;
    width: 320px;
}

.em-offcanvas .offcanvas-header{
    border-bottom: 1px solid rgba(255,255,255,.14);
}

/* Liens offcanvas */
.em-offcanvas .nav-link{
    color: rgba(255,255,255,.92) !important;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .3px;
    padding: 14px 0;
    line-height: 1.2; /* ✅ évite ton line-height 108px */
}

/* Active / hover */
.em-offcanvas .nav-link:hover,
.em-offcanvas .nav-link.active{
    color: #fff !important;
    opacity: .95;
}

/* Bouton pseudo-toggle (pour le dropdown mobile) */
.em-offcanvas-toggle{
    background: transparent;
    border: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Sous-menu */
.em-offcanvas-sub{
    padding-left: 10px;
    border-left: 2px solid rgba(255,255,255,.18);
}
.em-offcanvas-sub .nav-link{
    text-transform: none;
    font-weight: 700;
    letter-spacing: .15px;
    padding: 10px 0;
    opacity: .95;
}

/* Bouton contact dans offcanvas */
.em-offcanvas-contact{
    background: #fff !important;
    color: var(--primary) !important;
    border: 2px solid #fff !important;
    border-radius: 0 !important;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .3px;
    padding: 14px 18px;
}
.em-offcanvas-contact:hover{ opacity: .92; }


/* Front news index: images même taille */
.news-list .news-item .news-media{
    display: block;
    width: 100%;
    height: 260px;          /* ✅ ajuste (220/240/280...) */
    overflow: hidden;
}

.news-list .news-item .news-media img{
    width: 100%;
    height: 100%;
    object-fit: cover;      /* ✅ garde le ratio + crop */
    object-position: center;
    display: block;
}

/* Responsive */
@media (max-width: 991px){
    .news-list .news-item .news-media{ height: 220px; }
}
@media (max-width: 575px){
    .news-list .news-item .news-media{ height: 200px; }
}

@media (min-width: 992px) {

    /* le plus important : empêcher le retour à la ligne */
    .navbar-expand-lg .navbar-nav{
        flex-direction: row;
        flex-wrap: nowrap !important;
        align-items: center;
        justify-content: center;  /* ou flex-end si tu veux à droite */
        gap: 28px;                /* espace propre entre liens */
        width: auto !important;   /* évite width:100% qui casse souvent */
    }

    /* évite qu’un item prenne toute la ligne */
    .navbar-expand-lg .navbar-nav .nav-item{
        flex: 0 0 auto;
        width: auto !important;
    }

    /* empêche “NOS RÉFÉRENCES” de se couper */
    .navbar-expand-lg .navbar-nav .nav-link{
        white-space: nowrap;
    }

    /* si ta .navbar-collapse a des styles qui étirent */
    .navbar-expand-lg .navbar-collapse{
        flex-grow: 0;
    }
}


.expertise-card{
    position: relative;
    display: block;
    height: 450px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 14px 40px rgba(0,0,0,.08);
}

/* image full */
.expertise-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.01);
    transition: transform .35s ease;
}

/* ✅ Bandeau visible au départ (dégradé + titre) */
.expertise-base{
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 26px 22px;
    background: linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,0) 70%);
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none; /* ne bloque pas le click */
}

.expertise-base-title{
    margin: 0;
    color: #fff;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .7px;
    line-height: 1.05;
    font-size: 22px;
    text-shadow: 0 6px 18px rgba(0,0,0,.35);
}

/* overlay contenu (caché au départ) */
.expertise-hover{
    position: absolute;
    inset: 18px;
    background: rgba(255,255,255,.80);
    padding: 28px 22px 22px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .25s ease, transform .25s ease;
}

/* titre hover */
.expertise-title{
    margin: 0 0 14px;
    color: var(--primary);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .7px;
    line-height: 1.05;
    font-size: 20px;
}

.expertise-text{
    margin: 0 0 22px;
    color: #2b2b2b;
    font-size: 17px;
    line-height: 1.35;
}

.expertise-btn{
    display: inline-block;
    background: var(--primary);
    color: #fff;
    font-weight: 900;
    letter-spacing: .6px;
    text-transform: uppercase;
    padding: 18px 34px;
    border-radius: 0;
}

/* ✅ Hover : afficher panneau blanc + cacher bandeau titre */
.expertise-card:hover .expertise-hover{
    opacity: 1;
    transform: translateY(0);
}

.expertise-card:hover .expertise-base{
    opacity: 0;
    transform: translateY(10px);
}

.expertise-card:hover .expertise-img{
    transform: scale(1.06);
}

/* responsive */
@media (max-width: 991px){
    .expertise-card{ height: 460px; }
    .expertise-base-title{ font-size: 20px; }
    .expertise-title{ font-size: 24px; }
    .expertise-text{ font-size: 15px; }
}

.contact-ico-top img{
    width: 44px;
    height: 44px;
    display: block;
}

.refs-project-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 18px 34px;
    min-width: 320px;             /* ajuste si besoin */
    text-decoration: none;
    font-weight: 900;
    letter-spacing: .8px;
    text-transform: uppercase;

    background: #ffffff;          /* état normal (image 1) */
    color: var(--primary);        /* texte bleu */
    border: 2px solid #ffffff;    /* invisible (même couleur que fond) */
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

/* HOVER (image 2) */
.refs-project-btn:hover{
    background: var(--primary);   /* fond bleu */
    color: #ffffff;               /* texte blanc */
    border-color: #ffffff;        /* contour blanc */
}

.footer2-cta{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;
    font-weight: 900;
    letter-spacing: .8px;
    text-transform: uppercase;

    background: #ffffff;          /* normal */
    color: var(--primary);        /* texte bleu */
    border: 2px solid #ffffff;    /* invisible */
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.footer2-cta:hover{
    background: var(--primary);   /* hover = bleu */
    color: #ffffff;               /* texte blanc */
    border-color: #ffffff;        /* contour blanc */
}

/* barre bas du footer */
.footer2-bottom{
    margin-top: 30px;                 /* espace entre footer et barre */
    padding: 18px 0;
    background: var(--primary);       /* même bleu que ton footer */
    border-top: 1px solid rgba(255,255,255,.18);
}

/* texte copyright */
.footer2-copyright{
    text-align: center;
    color: #ffffff;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
    font-size: 14px;
}

/* optionnel: sur mobile */
@media (max-width: 991px){
    .footer2-bottom{ padding: 14px 0; }
    .footer2-copyright{ font-size: 13px; }
}

/* PAGE ACTU - SHOW */
.news-show { padding: 60px 0; }

.news-show-card{
    max-width: 980px;
    margin: 0 auto;
}

.news-show-cover{
    margin: 0 auto 22px;
    overflow: hidden;
}

.news-show-cover img{
    width: 100%;
    height: auto;
    display: block;
}

/* IMPORTANT: images dans le contenu (éditeur) */
.news-show-content img,
.news-show-content figure img{
    max-width: 100%;
    height: auto !important;
    display: block;
}

/* Évite les débordements (tables, longs contenus) */
.news-show-content{
    max-width: 880px;
    margin: 0 auto;
    color: #25304b;
    line-height: 1.8;
    font-size: 15px;
    overflow-wrap: anywhere;
}

.news-show-content table{
    width: 100%;
    max-width: 100%;
    display: block;
    overflow-x: auto;
}

/* Gallery: par défaut (desktop) */
.news-gallery-img{
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}


@media (max-width: 767px){
    .news-show{ padding: 30px 0; }

    .news-show-card{
        max-width: 100%;
        padding: 0 12px;
    }

    .news-show-title{
        font-size: 22px;
        line-height: 1.2;
    }

    .news-gallery-img{
        height: auto;
        object-fit: contain;
        background: #fff;
    }
}

.history-one{
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    overflow: hidden;
}

.history-one img{
    width: 100%;
    height: auto;
    display: block;
}


@media (max-width: 991px){
    .history-one{
        aspect-ratio: 4 / 3;
    }
    .history-one img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}