/* ==========================================================================
   CONCORDE BTP ÉNERGIE GROUP — surcharges spécifiques au contenu
   (palette officielle du logo, logo image, grille de services 12 domaines,
   galerie de réalisations en photos, étapes de méthodologie, WhatsApp)
   ========================================================================== */

/* --- Palette officielle extraite du logo (marine + or) ---
   Redéfinir ces variables ici met à jour TOUS les boutons, liens, icônes
   et surlignages du site puisque main.css les utilise partout via var(). */
:root {
  --bz-color-theme-primary: #0B3D7A;
  --bz-color-theme-gold: #D4A017;
}

/* --- Le titre du hero débordait sur la photo à droite (aucune largeur
   maximale n'était définie, alors que la photo est en position absolue et
   ne pousse pas le texte). On limite la largeur du bloc de texte pour
   qu'il reste toujours dans la zone libre à gauche de la photo. --- */
.hero-section .hero-content {
  max-width: 640px;
}
@media (max-width: 1700px) {
  .hero-section .hero-content {
    max-width: 540px;
  }
}
@media (max-width: 1200px) {
  .hero-section .hero-content {
    max-width: 460px;
  }
  .hero-content .section-heading .section-title {
    font-size: 42px;
  }
}
@media (max-width: 992px) {
  .hero-section .hero-content {
    max-width: 420px;
  }
}
@media (max-width: 767px) {
  .hero-section .hero-content {
    max-width: 100%;
  }
}

/* --- Écran de chargement : le texte "Concorde BTP" débordait de sa boîte
   (positionnement left/top/transform d'origine) et retombait à gauche au
   lieu d'être centré. On centre via flexbox sur le conteneur plein écran. --- */
#preloader {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
}
#preloader .loading {
  position: relative;
  left: auto;
  top: auto;
  -webkit-transform: none;
          transform: none;
  white-space: nowrap;
  text-align: center;
}

/* --- Logo image (fond blanc plein, comme le fichier fourni) --- */
.site-logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  text-decoration: none;
}
.site-logo img {
  display: block;
  width: auto;
}
.middle-header-inner .header-logo .site-logo img {
  height: 48px;
}
.side-menu-logo .site-logo img {
  height: 44px;
}
.footer-logo .site-logo img {
  height: 58px;
}
/* Le bandeau d'en-tête est en flex + overflow:hidden ; sans cette règle,
   la carte du logo pouvait être compressée par le flex et se retrouver
   coupée sur la droite. On l'empêche de rétrécir. */
.middle-header-inner .header-logo {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
}

/* Le logo a un fond blanc plein : sur les fonds sombres/colorés (bandeau
   bleu de l'en-tête, menu latéral, pied de page), on l'entoure d'une
   petite carte blanche arrondie pour que ça reste propre. */
.middle-header-inner .header-logo .site-logo,
.side-menu-logo .site-logo,
.footer-logo .site-logo {
  background: #ffffff;
  padding: 8px 14px;
  border-radius: 10px;
  -webkit-box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
          box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

/* --- Icônes Font Awesome dans les cartes de service (remplace les images cassées) --- */
.service-item .icon i,
.service-item-4 .icon i {
  font-size: 32px;
  color: var(--bz-color-theme-primary);
}

/* --- Icônes Font Awesome partout ailleurs où le template utilisait des PNG
   (badges "À propos", puces des compteurs, icône de citation) : on n'utilise
   que les fichiers fournis, donc tout le reste passe par Font Awesome. --- */
.about-item .icon {
  background: linear-gradient(93.22deg, rgba(11, 61, 122, 0.16) 2.69%, rgba(255, 255, 255, 0) 79.63%);
}
.about-item .icon i {
  font-size: 34px;
  color: var(--bz-color-theme-primary);
}
.counter-item .icon .icon-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
}
.counter-item .icon .icon-inner i {
  font-size: 30px;
  color: #ffffff;
}
.testi-top .quote i {
  font-size: 30px;
  color: var(--bz-color-theme-gold);
}

/* --- Avatars par initiales pour les témoignages (pas de photos clients fournies) --- */
.avatar-initials {
  height: 80px;
  width: 80px;
  border-radius: 50%;
  background: var(--bz-color-theme-primary);
  color: #ffffff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--bz-ff-heading);
  font-weight: 700;
  font-size: 22px;
}

/* --- Listes à puces dans les cartes de service (domaines d'expertise) --- */
.domain-list {
  list-style: disc;
  padding-left: 18px;
  margin-top: 14px;
  margin-bottom: 0;
  color: var(--bz-color-text-body);
}
.domain-list li {
  margin-bottom: 6px;
  padding-left: 4px;
}

/* --- Tuiles de galerie "Réalisations" : vraies photos + légende --- */
.gallery-tile {
  position: relative;
  height: 100%;
  min-height: 260px;
  border-radius: 15px;
  overflow: hidden;
  display: block;
  transition: transform 0.3s ease-in-out;
}
.gallery-tile:hover {
  transform: translateY(-6px);
}
.gallery-tile img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  transition: transform 0.5s ease-in-out;
}
.gallery-tile:hover img {
  transform: scale(1.06);
}
.gallery-tile .cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 45px 20px 18px;
  background: linear-gradient(to top, rgba(9, 16, 28, 0.92) 0%, rgba(9, 16, 28, 0.55) 55%, transparent 100%);
}
.gallery-tile .cap i {
  color: var(--bz-color-theme-gold);
  margin-right: 8px;
}
.gallery-tile .cap h3 {
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

/* Video tiles inside the gallery (real jobsite videos, opened via venobox) */
.gallery-tile .play-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(9, 16, 28, 0.75);
  border: 2px solid var(--bz-color-theme-gold);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
.gallery-tile:hover .play-badge {
  background-color: var(--bz-color-theme-gold);
  color: #09101c;
  transform: translate(-50%, -50%) scale(1.08);
}

/* Placeholder variant (used only where no photo is available yet) */
.gallery-tile.no-photo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #ffffff;
  padding: 30px 24px;
  background: linear-gradient(135deg, var(--bz-color-theme-primary) 0%, #0a1f3f 100%);
}
.gallery-tile.no-photo i {
  font-size: 38px;
  margin-bottom: 18px;
  color: var(--bz-color-theme-gold);
}
.gallery-tile.no-photo h3 {
  color: #ffffff;
  font-size: 19px;
  font-weight: 600;
  margin: 0;
}

/* --- Étapes de méthodologie en 5 colonnes --- */
@media only screen and (min-width: 992px) {
  .col-lg-2-4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
  }
}
/* Badge numéroté en or, en écho au "C" doré du logo */
.service-process-card .number {
  background-color: var(--bz-color-theme-gold);
  color: #1b2430;
}
.service-process-card:hover .number {
  background-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

/* --- Lien WhatsApp --- */
.whatsapp-link {
  color: #25D366;
  font-weight: 600;
}
.whatsapp-link:hover {
  color: #1ea952;
}

/* --- Footer link arrows: template referenced Font Awesome PRO (not bundled),
   which renders as a missing-glyph box. Point it at the bundled Free font. --- */
.footer-widget .footer-list li a:before {
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
}

/* --- Hero photo: the template's mask shape file is missing/empty, which made
   the hero photo invisible entirely (mask resolves to "nothing visible").
   Disable the broken mask and use a plain rounded photo panel instead. --- */
.hero-section .hero-mask-img {
  -webkit-mask-image: none;
  mask-image: none;
  border-radius: 0 0 0 260px;
}
.hero-section .hero-mask-img .overlay {
  background: rgba(11, 61, 122, 0.45);
}
.hero-section .hero-mask-img .overlay-2 {
  background: rgba(11, 42, 88, 0.25);
}

/* --- Cartes "Nos Partenaires" --- */
.partner-chip {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--bz-color-grey-1);
  border: 1px solid var(--bz-color-border-1);
  border-radius: 12px;
  padding: 22px 24px;
  height: 100%;
  transition: -webkit-transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.partner-chip:hover {
  -webkit-transform: translateY(-4px);
          transform: translateY(-4px);
  -webkit-box-shadow: 0px 8px 24px rgba(20, 27, 36, 0.08);
          box-shadow: 0px 8px 24px rgba(20, 27, 36, 0.08);
}
.partner-chip i {
  font-size: 28px;
  color: var(--bz-color-theme-primary);
  flex: 0 0 auto;
}
.partner-chip h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--bz-color-heading-primary);
}
.partner-chip span {
  font-size: 14px;
  color: var(--bz-color-text-body);
}
.partners-tagline {
  max-width: 720px;
  margin: 0 auto;
  font-style: italic;
  color: var(--bz-color-heading-primary);
  font-weight: 500;
}

/* --- Bouton WhatsApp flottant (coin bas-droit, sur toutes les pages) ---
   Empilé au-dessus du bouton "remonter en haut" existant (bottom:40px), même
   alignement à droite (right:50px) pour rester cohérent avec cette UI. --- */
.whatsapp-float {
  position: fixed;
  right: 50px;
  bottom: 112px;
  height: 60px;
  width: 60px;
  background-color: #25D366;
  color: #ffffff;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  -webkit-box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
          box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  z-index: 998;
  transition: -webkit-transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
}
.whatsapp-float:hover {
  color: #ffffff;
  -webkit-transform: scale(1.08);
          transform: scale(1.08);
}
@media only screen and (max-width: 575px) {
  .whatsapp-float {
    right: 20px;
    bottom: 90px;
    height: 52px;
    width: 52px;
    font-size: 26px;
  }
}

/* --- Formation page accents --- */
.formation-highlight-list li {
  margin-bottom: 10px;
}