/* ecs-custom.css — surcharges eCS pour template Energia           */
/* Version v4 — 2026-04-19                                         */
/* --- Conteneur navbar-brand : élargi pour accueillir le logo ---- */
.header .navbar-brand {
  max-width: none;
}

/* --- Neutralisation des classes logo natives du template -------- */
/* Le site eCS n'utilise pas de variantes dark/light/mobile du logo */
.header .navbar-brand .logo-dark,
.header .navbar-brand .logo-light,
.header .navbar-brand .logo-mobile {
  display: none !important;
}

/* --- Logo eCS : PNG unique 600×120 redimensionné par viewport --- */
.navbar-brand .logo-ecs {
  display: inline-block;
  width: 360px;
  height: 72px;
  max-width: 100%;
}

/* Mobile : logo réduit de moitié (180×36) */
@media (max-width: 991.98px) {
  .navbar-brand .logo-ecs {
    width: 240px;
    height: 48px;
  }
}

/* --- Alignement vertical du logo en mobile --------------------- */
/* Neutralise le line-height: 80px hérité du template Energia qui */
/* décale le logo vers le haut par rapport au drapeau et burger   */
@media (max-width: 991.98px) {
  .header .navbar .navbar-brand {
    display: flex;
    align-items: center;
    line-height: normal;
  }
}

/* --- Petit mobile (<640px) : logo réduit pour éviter chevauchement */
@media (max-width: 639.98px) {
  .navbar-brand .logo-ecs {
    width: 180px;
    height: 36px;
  }
}

/* --- Bouton "Se connecter" : avatar circulaire + texte --------- */
.btn--login-ecs {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.btn--login-ecs .login-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
.btn--login-ecs .login-avatar .fa-user {
  color: #ffffff;
  font-size: 24px;
  line-height: 1;
}

/* --- Icônes du slider : PNG custom à 60x60 ---------------------- */
.slide .slide-list .icon img {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

/* === Slider v2 : corrections visuelles ============================ */
/* Fond noir 40% sur le bloc contenu (remplace l'overlay global) */
.slider .slide .slide-content {
  background-color: rgba(0, 0, 0, 0.4);
  padding: 40px;
  border-radius: 8px;
}
/* Icône au-dessus du titre dans le panel droit */
.slider-panel .panel-icon-ecs {
  display: block;
  width: 60px;
  height: 60px;
  object-fit: contain;
  margin-bottom: 15px;
}
/* Icônes slide-list : hauteur fixe, largeur auto pour respecter le
   ratio natif de chaque PNG (toutes 128x128 — height/width uniformes) */
.slide .slide-list .icon img {
  height: 60px;
  width: auto;
  max-width: 90px;
  object-fit: contain;
}

/* --- Slider masqué en mobile (viewport < 992px) ------------------ */
/* Le slider n'apporte pas de valeur sur petit écran. La section est
   entièrement masquée, le visiteur passe directement du header à la
   section suivante. Les images restent téléchargées par le navigateur
   mais l'espace visuel est supprimé. */
@media (max-width: 991.98px) {
  .slider.slider-1,
  section#hero {
    display: none;
  }
}

/* Section About v2 : corrections image et compteur */
/* Image About : background-size: contain pour voir l'integralite */
.about .about-img-holder {
  background-size: contain !important;
  background-repeat: no-repeat;
  background-position: center;
}

/* Compteur : centrage vertical dans l'image (reste colle a gauche) */
.about .about-img .counter {
  top: 50%;
  transform: translateY(-50%);
}

/* Section About v3 : polish compteur                              */
/* "Mois" apres le chiffre : taille 0.5em, alignement baseline */
.about .counter .counter-unit {
  margin-left: 8px;
}

/* Reduction du padding horizontal de la zone compteur a 16px */
.about .about-img .counter {
  padding-left: 5px !important;
  padding-right: 5px !important;
  text-align: center;
  align-items: center;
}

/* Icone custom (PNG) dans le compteur About */
.about .counter .counter-icon img {
  width: 64px;
  height: auto;
  display: inline-block;
  filter: brightness(0) invert(1);
}

/* Section CLEM : cartes carousel a hauteur identique              */
#clem .owl-carousel .owl-stage {
  display: flex;
  align-items: stretch;
}
#clem .owl-carousel .owl-item {
  display: flex;
  height: auto;
}
#clem .owl-carousel .owl-item > div {
  display: flex;
  width: 100%;
}
#clem .feature-panel-holder {
  display: flex;
  width: 100%;
  height: 100%;
}
#clem .feature-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
#clem .feature-panel .feature-content {
  flex: 1;
}

/* Section CLEM : position flèches prev/next carousel              */
/* Desktop : flèches hors du conteneur (surcharge left/right: 50px natifs) */
#clem .carousel-navs .owl-prev {
  left: -50px;
}
#clem .carousel-navs .owl-next {
  right: -50px;
}

/* Mobile : positionnement absolu (non défini par le template en <992px)
   + flèches proches des bords (1 fiche visible) */
@media (max-width: 991.98px) {
  #clem .carousel-navs .owl-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    left: 0;
    pointer-events: none;
  }
  #clem .carousel-navs .owl-prev,
  #clem .carousel-navs .owl-next {
    pointer-events: auto;
  }
  #clem .carousel-navs .owl-prev {
    left: 10px;
  }
  #clem .carousel-navs .owl-next {
    right: 10px;
  }
}

/* Dots : annule le positionnement absolu du template (qui superpose les
   points sur les fiches) — on revient à flux normal avec marge */
#clem .carousel-navs .owl-dots {
  position: relative !important;
  bottom: auto !important;
  margin-top: 20px;
  text-align: center;
}

/* Section CLEM : bloc bas (contact + image rfid_hall)             */
#clem .clem-bottom {
  margin-top: 60px;
}
#clem .clem-contact-text {
  color: #ffffff;
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 12px;
}
#clem .clem-contact-phone {
  font-size: 22px;
  font-weight: 600;
  color: #32c36c;
  margin: 0;
}
#clem .clem-contact-phone i {
  margin-right: 8px;
  font-size: 18px;
}
#clem .clem-contact-image {
  width: 100%;
  height: auto;
  border-radius: 16px;
  display: block;
}
@media (max-width: 991.98px) {
  #clem .clem-bottom {
    margin-top: 40px;
  }
  #clem .clem-contact-image {
    margin-top: 24px;
  }
}

/* Image rfid_hall : debordement vers le bas (effet "a cheval") */
#clem .clem-contact-image {
  margin-bottom: -100px;
  position: relative;
  z-index: 2;
}

/* Mobile : pas de debordement */
@media (max-width: 991.98px) {
  #clem .clem-contact-image {
    margin-bottom: 0;
  }
}

/* Section CLEM : degrade overlay + alignement texte droite        */
/* Overlay en degrade : transparent en haut, #253745 opaque en bas
   Surcharge la regle template .bg-overlay-dark:before */
#clem.bg-overlay-dark:before,
.features.features-1#clem.bg-overlay-dark:before {
  background: linear-gradient(
    to bottom,
    rgba(37, 55, 69, 0) 0%,
    rgba(37, 55, 69, 0.4) 40%,
    rgba(37, 55, 69, 0.9) 80%,
    rgba(37, 55, 69, 1) 100%
  );
  background-color: transparent;
}

/* Texte gauche aligne a droite pour rapprocher de l'image */
#clem .clem-contact-text,
#clem .clem-contact-phone {
  text-align: right;
}

/* Section CLEM : finitions (padding, fonds heading)               */
/* Padding droit 64px sur colonne gauche du bloc bas */
#clem .clem-bottom > div:first-child {
  padding-right: 64px;
}
@media (max-width: 991.98px) {
  #clem .clem-bottom > div:first-child {
    padding-right: 15px;
  }
}

/* Fond noir 40% sur les 2 blocs du heading */
#clem .clem-heading-title-bg,
#clem .clem-heading-desc-bg {
  padding: 20px 25px;
  border-radius: 4px;
}
#clem .clem-heading-title-bg {
  background-color: rgba(0, 0, 0, 0.2);
}
#clem .clem-heading-desc-bg {
  background-color: rgba(0, 0, 0, 0.4);
}
#clem .clem-heading-row1 {
  margin-bottom: 20px;
}

@media (max-width: 991.98px) {
  #clem .clem-heading-title-bg,
  #clem .clem-heading-desc-bg {
    padding: 15px 20px;
  }
}

/* Section CLEM : icones PNG des fiches du carousel                */
#clem .feature-icon img {
  width: 64px;
  height: 64px;
  display: inline-block;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(62%) sepia(58%) saturate(498%) hue-rotate(94deg) brightness(92%) contrast(89%);
}

/* =============================================================== */
/* Glossaire eCS : soulignement des acronymes + tooltip detache    */
/* =============================================================== */

abbr.ecs-abbr {
  text-decoration: underline dotted #32c36c;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  cursor: help;
  border-bottom: none;
}

.ecs-tooltip {
  position: absolute;
  z-index: 99999;
  max-width: 280px;
  padding: 10px 14px;
  background-color: #253745;
  color: #ffffff;
  font-size: 13px;
  line-height: 1.5;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.ecs-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}

.ecs-tooltip.above::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #253745;
}

.ecs-tooltip.below::after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: #253745;
}

@media (max-width: 991.98px) {
  .ecs-tooltip {
    pointer-events: auto;
  }
}

/* Style du terme d'acronyme dans le tooltip */
.ecs-tooltip-term {
  color: #32c36c;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* =============================================================== */
/* Section Services : icones PNG + heading text-left               */
/* =============================================================== */

#services .heading.text-left {
  text-align: left;
}

#services .heading.text-left .heading-subtitle {
  margin-left: 0;
}

/* Icones PNG noir -> vert #32c36c (meme filtre que #clem) */
#services .service-icon img {
  width: 64px;
  height: 64px;
  display: inline-block;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(62%) sepia(58%) saturate(498%) hue-rotate(94deg) brightness(92%) contrast(89%);
}

/* Cartes services : hauteur identique */
#services .owl-carousel .owl-stage {
  display: flex;
  align-items: stretch;
}

#services .owl-carousel .owl-item {
  display: flex;
  height: auto;
}

#services .owl-carousel .owl-item > div {
  display: flex;
  width: 100%;
}

#services .service-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

#services .service-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Fleches navs hors conteneur */
#services .carousel-navs .owl-prev {
  left: -50px;
}
#services .carousel-navs .owl-next {
  right: -50px;
}

@media (max-width: 991.98px) {
  #services .owl-carousel .owl-stage {
    display: block;
  }
  #services .owl-carousel .owl-item {
    display: block;
    height: auto;
  }
  #services .owl-carousel .owl-item > div {
    display: block;
    width: auto;
  }
  #services .service-panel {
    display: block;
    height: auto;
  }
  #services .service-content {
    display: block;
  }
  #services .carousel-navs .owl-prev {
    left: 10px;
  }
  #services .carousel-navs .owl-next {
    right: 10px;
  }
}

/* =============================================================== */
/* Section Services : espacement entre carousel et more-services   */
/* =============================================================== */

#services .more-services {
  margin-top: 30px;
}

@media (max-width: 991.98px) {
  #services .more-services {
    margin-top: 20px;
  }
}

/* =============================================================== */
/* Section Services : fleches mobile centrees verticalement        */
/* (alignement sur le comportement de #clem)                       */
/* =============================================================== */

@media (max-width: 991.98px) {
  #services .carousel-navs .owl-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    width: 100%;
    pointer-events: none;
  }

  #services .carousel-navs .owl-prev,
  #services .carousel-navs .owl-next {
    pointer-events: auto;
  }
}

/* =============================================================== */
/* Section Expertise : layout + carousel                           */
/* =============================================================== */

#expertise .heading.text-left {
  text-align: left;
}

#expertise .heading.text-left .heading-subtitle {
  margin-left: 0;
}

#expertise .heading .heading-desc {
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.7;
  color: #525252;
}

#expertise .owl-carousel .owl-stage {
  display: flex;
  align-items: stretch;
}

#expertise .owl-carousel .owl-item {
  display: flex;
  height: auto;
}

#expertise .owl-carousel .owl-item > div {
  display: flex;
  width: 100%;
}

#expertise .project-panel {
  display: flex;
  width: 100%;
  height: 100%;
}

#expertise .project-panel-holder {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

#expertise .project-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

#expertise .project-desc {
  flex: 1;
}

#expertise .project-more {
  margin-top: 20px;
}

#expertise .project-desc .advantages-list {
  margin-top: 16px;
  padding-left: 0;
  list-style: none;
}

#expertise .project-desc .advantages-list li {
  display: block;
  text-transform: none;
  position: relative;
  padding-left: 35px;
  margin-bottom: 4px;
  line-height: 1.4;
}

#expertise .project-desc .advantages-list li::before {
  position: absolute;
  left: 0;
  top: 0.25em;
  transform: none;
  margin-right: 0;
}



#expertise .carousel-navs .owl-prev {
  left: -50px;
}
#expertise .carousel-navs .owl-next {
  right: -50px;
}

@media (max-width: 991.98px) {
  #expertise .owl-carousel .owl-stage {
    display: block;
  }
  #expertise .owl-carousel .owl-item {
    display: block;
    height: auto;
  }
  #expertise .owl-carousel .owl-item > div {
    display: block;
    width: auto;
  }
  #expertise .project-panel {
    display: block;
    height: auto;
  }
  #expertise .project-panel-holder {
    display: block;
  }
  #expertise .project-content {
    display: block;
  }
  #expertise .carousel-navs .owl-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    width: 100%;
    pointer-events: none;
  }
  #expertise .carousel-navs .owl-prev,
  #expertise .carousel-navs .owl-next {
    pointer-events: auto;
  }
  #expertise .carousel-navs .owl-prev {
    left: 10px;
  }
  #expertise .carousel-navs .owl-next {
    right: 10px;
  }
}

/* =============================================================== */
/* Section Expertise B1 : fond + overlay + heading noir            */
/* =============================================================== */

/* Overlay degrade identique CLEM : transparent haut -> #253745 bas */
#expertise.bg-overlay-dark:before,
.projects.projects-modern#expertise.bg-overlay-dark:before {
  background: linear-gradient(
    to bottom,
    rgba(37, 55, 69, 0) 0%,
    rgba(37, 55, 69, 0.4) 40%,
    rgba(37, 55, 69, 0.9) 80%,
    rgba(37, 55, 69, 1) 100%
  );
  background-color: transparent;
}

/* Titre heading : fond noir 20% + texte blanc */
#expertise .heading-title.clem-heading-title-bg {
  background-color: rgba(0, 0, 0, 0.2);
  padding: 20px 25px;
  border-radius: 4px;
  color: #ffffff;
  display: inline-block;
  width: auto;
}

/* Description heading : fond noir 20% + texte blanc */
#expertise .heading-desc.clem-heading-desc-bg {
  background-color: rgba(0, 0, 0, 0.2);
  padding: 20px 25px;
  border-radius: 4px;
  color: #ffffff;
  margin-top: 20px;
  display: inline-block;
  width: auto;
}

/* Abbr dans heading-desc : texte blanc */
#expertise .heading-desc.clem-heading-desc-bg abbr.ecs-abbr {
  color: #ffffff;
}

/* Mobile : blocs heading pleine largeur */
@media (max-width: 991.98px) {
  #expertise .heading-title.clem-heading-title-bg,
  #expertise .heading-desc.clem-heading-desc-bg {
    display: block;
    width: 100%;
    padding: 15px 20px;
  }
}

/* =============================================================== */
/* Section Expertise : image de fond ancree en bas                 */
/* =============================================================== */

#expertise .bg-section img {
  object-position: bottom;
}

/* =============================================================== */
/* Section clients-1 : masquee (a reactiver plus tard)             */
/* =============================================================== */

#clients-1 {
  display: none;
}

/* =========================================================
   Section Contact — ajouts eCS (contact-v1 — 2026-04-21)
   ========================================================= */

/* Groupement Civilité + Prénom en une seule cellule */
.ecs-contact-form .ecs-inline-group {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.ecs-contact-form .ecs-civilite {
  flex: 0 0 90px;
  min-width: 80px;
  padding: 0 10px;
}
.ecs-contact-form .ecs-inline-group input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
}

/* Astérisque champ obligatoire */
.ecs-contact-form .form-label .required {
  color: #e53935;
  margin-left: 2px;
  font-weight: 600;
}

/* Hauteur uniforme du champ téléphone intl-tel-input */
.ecs-contact-form .iti {
  width: 100%;
  display: block;
}
.ecs-contact-form .iti input[type="tel"] {
  width: 100%;
}

/* Ajustement textarea Observations */
.ecs-contact-form textarea.form-control {
  min-height: 110px;
  resize: vertical;
}

/* =========================================================
   Fin ajouts Contact v1
   ========================================================= */

/* =========================================================
   Section Contact — correctifs v2 (2026-04-21)
   Isolation : tous les sélecteurs préfixés #contact
   ========================================================= */

/* Neutraliser text-transform capitalize hérité du template Energia */
#contact,
#contact .heading-subtitle,
#contact .heading-title,
#contact .heading-desc,
#contact .advantages-list-2 li,
#contact .form-label,
#contact .form-control,
#contact .card-heading,
#contact .card-desc,
#contact .contact-quote p,
#contact option,
#contact input::placeholder,
#contact textarea::placeholder {
  text-transform: none;
}

/* Bullets .advantages-list-2 section Contact */
#contact .advantages-list-2 {
  padding: 0;
  margin: 0;
}
#contact .advantages-list-2 li {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 4px;
  line-height: 1.4;
  font-weight: 400;
}
#contact .advantages-list-2 li::before {
  content: "\f00c";
  font-family: "Font Awesome 5 Free", "FontAwesome";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 22px;
  height: 22px;
  line-height: 22px;
  border-radius: 50%;
  background-color: #253745;
  color: #ffffff;
  text-align: center;
  font-size: 11px;
}

#contact .advantages-list-holder {
  margin-bottom: 30px;
}

/* =========================================================
   Fin correctifs Contact v2
   ========================================================= */

/* =========================================================
   Section Contact — correctifs v3 (2026-04-21)
   Surcharge couleur soulignement abbr sur fond vert
   ========================================================= */

#contact abbr.ecs-abbr {
  text-decoration: underline dotted lavender;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  border-bottom: none;
}

#contact abbr.ecs-abbr:hover,
#contact abbr.ecs-abbr:focus {
  text-decoration-color: #ffffff;
  text-decoration-style: solid;
}

/* =========================================================
   Fin correctifs Contact v3
   ========================================================= */

/* =========================================================
   Footer — version eCS v1 (2026-04-21)
   Structure 3 zones : liens légaux | copyright | vide
   ========================================================= */

.ecs-footer-bottom {
  padding: 18px 0;
}

.ecs-footer-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}

/* Zone gauche : liens légaux */
.ecs-footer-legal {
  justify-self: start;
  font-size: 13px;
}
.ecs-footer-legal a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease;
  opacity: 0.85;
}
.ecs-footer-legal a:hover,
.ecs-footer-legal a:focus {
  color: #32c36c;
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ecs-footer-legal .ecs-footer-sep {
  margin: 0 6px;
  opacity: 0.6;
}

/* Zone centre : copyright */
.ecs-footer-copyright {
  justify-self: center;
  text-align: center;
  font-size: 13px;
  opacity: 0.9;
}

/* Zone droite : réservée */
.ecs-footer-right {
  justify-self: end;
}

/* Responsive : sous 768px on empile en vertical centré */
@media (max-width: 767.98px) {
  .ecs-footer-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    text-align: center;
  }
  .ecs-footer-legal,
  .ecs-footer-copyright,
  .ecs-footer-right {
    justify-self: center;
  }
  .ecs-footer-right {
    display: none;
  }
}

/* =========================================================
   Fin footer v1
   ========================================================= */

/* =========================================================
   Footer — v2 (2026-04-21)
   Ajout zone gauche email+horaires + copyright en gras vert
   Conserve la grille 3 zones définie en v1
   ========================================================= */

/* Zone gauche v2 : email + horaires (reprend esprit header .top-contact) */
.ecs-footer-info {
  justify-self: start;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 13px;
}
.ecs-footer-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  opacity: 0.9;
}
.ecs-footer-item i {
  color: #32c36c;
  font-size: 16px;
  line-height: 1;
}
.ecs-footer-item a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
.ecs-footer-item a:hover,
.ecs-footer-item a:focus {
  color: #32c36c;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Copyright centre : marque en gras vert Energia */
.ecs-footer-copyright .ecs-brand-accent {
  color: #32c36c;
  font-weight: 700;
}

/* Responsive v2 : sous 768px, empilé vertical centré */
@media (max-width: 767.98px) {
  .ecs-footer-info {
    justify-self: center;
    justify-content: center;
    gap: 10px 20px;
  }
  .ecs-footer-legal {
    justify-self: center;
  }
}

/* =========================================================
   Fin footer v2
   ========================================================= */

/* =========================================================
   Footer — correctifs v3 (2026-04-21)
   Fix positionnement des 3 zones : gauche / centre / droite
   ========================================================= */

/* Force la grille à occuper toute la largeur de sa colonne Bootstrap */
.ecs-footer-bottom .ecs-footer-grid {
  width: 100%;
  grid-template-columns: 1fr auto 1fr;
}

/* Zone gauche : email + horaires → justifiés à gauche */
.ecs-footer-bottom .ecs-footer-info {
  justify-self: start !important;
}

/* Zone centre : copyright → centré */
.ecs-footer-bottom .ecs-footer-copyright {
  justify-self: center !important;
}

/* Zone droite : liens juridiques → justifiés à droite
   (surcharge la règle v1 qui avait justify-self: start) */
.ecs-footer-bottom .ecs-footer-legal {
  justify-self: end !important;
}

/* Neutralise tout padding parent qui pourrait rétrécir la grille */
.ecs-footer-bottom .row > .col-12 {
  width: 100%;
}

/* Responsive : sous 768px, on empile en vertical centré */
@media (max-width: 767.98px) {
  .ecs-footer-bottom .ecs-footer-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    text-align: center;
  }
  .ecs-footer-bottom .ecs-footer-info,
  .ecs-footer-bottom .ecs-footer-copyright,
  .ecs-footer-bottom .ecs-footer-legal {
    justify-self: center !important;
  }
}

/* =========================================================
   Fin correctifs footer v3
   ========================================================= */

/* =========================================================
   Back-to-top — version eCS v13 (2026-04-23)
   Forme : carré aux coins arrondis (12px)
   Taille : 56×56 desktop / 44×44 mobile
   Fond : #7c619f (violet) / hover #6a5188
   Icône : blanche (Font Awesome fa-caret-up via .ecs-caret)
   Déclenché par la classe .ecs-visible (ajoutée par ecs-backtotop.js)
   ========================================================= */
#back-to-top {
  width: 56px !important;
  height: 56px !important;
  border-radius: 12px !important;
  right: 30px !important;
  bottom: 30px;
  background-color: #7c619f !important;
  background-image: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    visibility 0.25s ease,
    background-color 0.25s ease,
    box-shadow 0.25s ease;
  cursor: pointer;
}

#back-to-top.ecs-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  z-index: 99999;
}

#back-to-top.ecs-visible:hover,
#back-to-top.ecs-visible:focus {
  background-color: #6a5188 !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
  transform: translateY(-2px);
}

#back-to-top .ecs-caret {
  color: #ffffff !important;
  font-size: 24px;
  line-height: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media (max-width: 767.98px) {
  #back-to-top {
    width: 44px !important;
    height: 44px !important;
    right: 20px !important;
    bottom: 20px;
  }
  #back-to-top .ecs-caret {
    font-size: 20px;
  }
}
/* =========================================================
   Fin back-to-top v13
   ========================================================= */

/* ========================================================================
   ECS-CARET-FA-GLYPH-FIX (session 22/04/2026)
   Assurance : force explicitement le glyphe Font Awesome fa-caret-up.
   Protège contre toute règle en amont qui réinitialiserait le content
   du ::before (observé quand l'élément était display:none, maintenant
   corrigé, mais on garde cette règle comme garde-fou).
   ======================================================================== */

#back-to-top .ecs-caret::before {
  content: "\f0d8" !important;
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
}

/* ========================================================================
   SCROLLSPY-ACTIVE-STATE (session 22/04/2026)
   Bootstrap 5 ScrollSpy pose .active sur le <a.nav-link>, pas sur le <li>.
   Le template Energia cible li.active > a dans ses propres règles.
   On utilise :has() pour propager l'état actif du <a> vers le <li>,
   ce qui réactive tous les styles natifs du template (vert + barre).
   Support :has() : Chrome 105+, Safari 15.4+, Firefox 121+
   ======================================================================== */

.header .navbar .navbar-nav > li.nav-item:has(> a.nav-link.active) > a {
  color: #32c36c !important;
}

.header .navbar .navbar-nav > li.nav-item:has(> a.nav-link.active) > a::before,
.header .navbar .navbar-nav > li.nav-item:has(> a.nav-link.active) > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #32c36c;
}

.header .navbar .navbar-nav > li.nav-item:has(> a.nav-link.active) > a::before {
  top: -2px;
}

.header .navbar .navbar-nav > li.nav-item:has(> a.nav-link.active) > a::after {
  bottom: -2px;
}

/* ========================================================================
   MENU-HOVER-UNIFORM (session 22/04/2026)
   Le template Energia ne câble le hover animé que sur li#contact. On
   généralise ce comportement à tous les items du menu principal pour une
   expérience uniforme : texte vert + barre horizontale animée au survol.
   -----------------------------------------------------------------------
   Reproduit le pattern des règles natives style.css:2884-2899 (li#contact).
   ======================================================================== */

/* hover — couleur du texte (tous breakpoints) */
.header .navbar .navbar-nav > li.nav-item > a.nav-link:hover {
  color: #32c36c !important;
}

/* hover — barre horizontale animée (desktop uniquement) */
@media screen and (min-width: 992px) {
  /* position: relative déjà posé par le template (style.css:2837),
     redéclaré ici en défense pour les nav-link qui en auraient besoin */
  .header .navbar .navbar-nav > li.nav-item > a.nav-link {
    position: relative;
  }

  .header .navbar .navbar-nav > li.nav-item > a.nav-link:hover::before {
    -webkit-transform       : scale3d(1, 1, 1);
    transform               : scale3d(1, 1, 1);
    -webkit-transform-origin: 0 50%;
    -ms-transform-origin    : 0 50%;
    transform-origin        : 0 50%;
    background-color        : #32c36c;
  }
}

/* ========================================================================
   SCROLLSPY-ANCHOR-OFFSET (session 22/04/2026)
   Header fixed = 150px. scroll-margin-top empêche le haut de la section
   de se glisser sous le header au clic sur une ancre, et aligne le seuil
   de détection ScrollSpy avec la valeur data-bs-offset="160".
   160px = 150px header + 10px marge visuelle.
   ======================================================================== */

#hero,
#about,
#clem,
#services,
#expertise,
#contact {
  scroll-margin-top: 160px;
}

/* ========================================================================
   LEGAL-PAGES-STYLING (session 22/04/2026)
   Styles dédiés aux pages mentions-legales.html et politique-
   confidentialite.html. Header simplifié, bannière 1920×360 avec titre
   superposé décalé à droite du logo UE+cadenas.
   ======================================================================== */

/* --- Header simplifié : logo + bouton retour --- */
.legal-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 80px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
}

.legal-header .logo img {
  height: 50px;
  width: auto;
}

.legal-header .btn-back {
  background-color: #32c36c;
  color: #ffffff !important;
  padding: 10px 24px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 500;
  transition: background-color 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.legal-header .btn-back:hover {
  background-color: #28a85b;
}

.legal-header .btn-back i {
  font-size: 0.85em;
}

/* --- Bannière avec titre superposé --- */
.legal-banner {
  position: relative;
  width: 100%;
  height: 360px;
  margin-top: 80px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
}

.legal-banner--rgpd {
  background-image: url('../images/rgpd/rgpd_banner.png');
}

.legal-banner--mentions {
  background-image: url('../images/rgpd/mention_legale_banner.png');
}

.legal-banner h1 {
  color: #ffffff;
  font-size: 3rem;
  font-weight: 700;
  margin: 0;
  padding-left: 340px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
  line-height: 1.2;
}

@media (max-width: 991px) {
  .legal-banner { height: 240px; }
  .legal-banner h1 { font-size: 2rem; padding-left: 220px; }
}

@media (max-width: 576px) {
  .legal-banner { height: 180px; }
  .legal-banner h1 { font-size: 1.4rem; padding-left: 140px; }
}

/* --- Contenu textuel --- */
.legal-content {
  max-width: 920px;
  margin: 0 auto;
  padding: 60px 20px 80px;
  color: #2d3e50;
  line-height: 1.7;
}

.legal-content h2 {
  color: #2d3e50;
  font-size: 1.6rem;
  font-weight: 600;
  margin-top: 2.2rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #32c36c;
}

.legal-content h2:first-of-type { margin-top: 0; }

.legal-content h3 {
  color: #2d3e50;
  font-size: 1.2rem;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.8rem;
}

.legal-content p { margin-bottom: 1rem; }

.legal-content ul {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

.legal-content li { margin-bottom: 0.4rem; }

.legal-content strong { color: #1a2733; }

.legal-content a {
  color: #32c36c;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.legal-content a:hover { border-bottom-color: #32c36c; }

.legal-content .last-update {
  font-style: italic;
  color: #6c757d;
  margin-bottom: 2rem;
}

/* --- Tableaux --- */
.legal-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1.5rem;
  font-size: 0.95rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.legal-content table th {
  background: #f4f7f9;
  color: #2d3e50;
  font-weight: 600;
  text-align: left;
  padding: 10px 14px;
  border: 1px solid #dee4e8;
}

.legal-content table td {
  padding: 10px 14px;
  border: 1px solid #dee4e8;
  vertical-align: top;
}

.legal-content table tr:nth-child(even) td { background: #fafbfc; }

/* ========================================================================
   LEGAL-PAGES-FOOTER (session 22/04/2026)
   Footer simplifié commun aux pages légales. Cross-link entre les deux
   pages + retour accueil + coordonnées basiques.
   ======================================================================== */

.legal-footer {
  background: #2d3e50;
  color: #c5ced6;
  padding: 40px 20px 30px;
  margin-top: 60px;
}

.legal-footer__inner {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.legal-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.legal-footer__brand strong {
  color: #ffffff;
  font-size: 1.05rem;
}

.legal-footer__brand span { font-size: 0.9rem; }

.legal-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
}

.legal-footer__links a {
  color: #c5ced6;
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legal-footer__links a:hover { color: #32c36c; }

.legal-footer__copyright {
  width: 100%;
  max-width: 1140px;
  margin: 24px auto 0;
  padding-top: 20px;
  border-top: 1px solid #3f5266;
  font-size: 0.85rem;
  color: #8d9aa8;
  text-align: center;
}

@media (max-width: 576px) {
  .legal-footer__inner { flex-direction: column; text-align: center; }
  .legal-footer__links { justify-content: center; }
}

.legal-content table tr:nth-child(even) td { background: #fafbfc; }

/* ========================================================================
   HERO-OVERFLOW-FIX → CAROUSEL-OVERFLOW-EXTENDED (session 22/04/2026)
   style.css:5500 pose overflow: visible sur .owl-stage-outer (global).
   Le .owl-stage calculé en JS (items + clones × largeur slide) peut
   atteindre plusieurs milliers de pixels et déborde jusqu'au <body>,
   ce qui désaligne le bouton back-to-top (position:fixed) hors viewport.
   Fix étendu aux 4 carousels Owl de la page.
   ======================================================================== */

body {
  overflow-x: hidden;
}

/* =========================================================
   SECTIONS-PADDING-BOTTOM-COMPACT (2026-04-23)
   Réduction de l'espace entre sections pour un rendu visuel
   plus compact. Exclut #clem (padding 0 requis pour image à
   cheval) et #contact (pas de section en dessous).
   ========================================================= */
#about,
#services,
#expertise {
  padding-bottom: 32px !important;
}

@media (max-width: 991.98px) {
  #about,
  #services,
  #expertise {
    padding-bottom: 24px !important;
  }
}
/* =========================================================
   Fin SECTIONS-PADDING-BOTTOM-COMPACT
   ========================================================= */

/* =========================================================
   EXPERTISE-GRADIENT-BACKGROUND (2026-04-23)
   Remplace l'overlay pseudo-élément existant par un dégradé
   direct sur la section. De #253745 en haut → #e8ecef en bas.
   Libère le visuel pour le carousel des 3 images projets.
   ========================================================= */
#expertise {
  background: linear-gradient(to bottom, #253745 0%, #e8ecef 100%) !important;
}

/* Neutralise le pseudo-élément overlay existant (plus nécessaire) */
#expertise.bg-overlay-dark:before,
#expertise.bg-overlay:before {
  background: none !important;
  display: none !important;
}
/* =========================================================
   Fin EXPERTISE-GRADIENT-BACKGROUND
   ========================================================= */

/* =========================================================
   EXPERTISE-3COL-HEADING (2026-04-23)
   Heading restructuré en 3 colonnes côte à côte en desktop.
   En desktop, la desc est en col adjacente du titre (plus
   en-dessous), donc on neutralise le margin-top: 20px qui
   était prévu pour l'empilement.
   ========================================================= */
@media (min-width: 992px) {
  #expertise .heading-desc.clem-heading-desc-bg {
    margin-top: 0;
  }
}
/* =========================================================
   Fin EXPERTISE-3COL-HEADING
   ========================================================= */

/* =========================================================
   EXPERTISE-COMPACT-SPACING (2026-04-23)
   Compactage des 3 espaces verticaux du heading Expertise :
   - padding-top section : 130px → 32px (desktop) / 24px (mobile)
   - marge subtitle → titre : plus resserrée
   - marge heading → carousel : réduite
   ========================================================= */
#expertise {
  padding-top: 32px !important;
}

#expertise .heading {
  margin-bottom: 32px;
}

#expertise .heading-subtitle.heading-subtitle-bg {
  margin-bottom: 16px;
}

@media (max-width: 991.98px) {
  #expertise {
    padding-top: 24px !important;
  }
  #expertise .heading {
    margin-bottom: 24px;
  }
}
/* =========================================================
   Fin EXPERTISE-COMPACT-SPACING
   ========================================================= */

/* =========================================================
   EXPERTISE-TITLE-NOBG-DESC-NARROW (2026-04-23)
   - Retire le fond transparent noir sur le titre H2
   - Resserre la largeur du paragraphe (col droite) en desktop
   ========================================================= */
#expertise .heading-title.clem-heading-title-bg {
  background: transparent !important;
  padding: 0 !important;
}

@media (min-width: 992px) {
  #expertise .heading-desc.clem-heading-desc-bg {
    max-width: 420px;
    margin-left: 0;
    margin-right: auto;
  }
}
/* =========================================================
   Fin EXPERTISE-TITLE-NOBG-DESC-NARROW
   ========================================================= */

/* ===== START-BLOCK: LOGIN-DISABLED ===== */
/* Bouton "Se connecter" désactivé tant que myec2s.fr/login n est pas up.
   À retirer complètement quand l ERP sera en ligne. */
.btn--login-ecs,
.btn--login-ecs:hover,
.btn--login-ecs:focus,
.btn--login-ecs:active {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.55;
    filter: grayscale(0.3);
    user-select: none;
}
/* ===== END-BLOCK: LOGIN-DISABLED ===== */