/* ==========================================================================
   Ajustements de l'en-tête du thème Azent
   Objectif : tout tient sur une seule ligne, et le bouton de devis retrouve
   une taille normale. Rien n'est modifié dans le thème lui-même.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Le menu ne doit plus passer à la ligne
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {

  .header-main,
  .header-2 .header-main,
  .header-1 .header-main {
    flex-wrap: nowrap;
    gap: 18px;
  }

  .header-left {
    display: flex;
    align-items: center;
    gap: 22px;
    flex: 1 1 auto;
    min-width: 0;
  }

  .header-right {
    flex: 0 0 auto;
    gap: 14px;
  }

  /* La liste du menu reste sur une ligne, quitte à resserrer les espaces */
  .main-menu > ul,
  .main-menu ul.menu {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    margin: 0;
  }

  .main-menu > ul > li,
  .main-menu ul.menu > li {
    white-space: nowrap;
  }

  .main-menu > ul > li > a,
  .main-menu ul.menu > li > a {
    padding-inline: 14px;
    font-size: 0.97rem;
  }

  /* Les sous-menus, eux, restent en colonne */
  .main-menu ul li ul.submenu,
  .main-menu ul li ul.sub-menu {
    display: block;
    flex-wrap: wrap;
  }

  .main-menu ul li ul.submenu li,
  .main-menu ul li ul.sub-menu li {
    white-space: normal;
  }

  /* Le logo ne mange pas la place du menu */
  .header-logo img,
  .logo img {
    max-height: 46px;
    width: auto;
  }
}

/* Écrans intermédiaires : on resserre encore */
@media (min-width: 992px) and (max-width: 1320px) {
  .main-menu > ul > li > a,
  .main-menu ul.menu > li > a {
    padding-inline: 9px;
    font-size: 0.92rem;
  }

  .header-logo img,
  .logo img { max-height: 40px; }
}

/* --------------------------------------------------------------------------
   2. Bouton « Devis gratuit » : taille raisonnable
   -------------------------------------------------------------------------- */
.header-right .theme-btn,
.header-button .theme-btn {
  padding: 11px 24px;
  font-size: 0.88rem;
  line-height: 1.2;
  white-space: nowrap;
  border-radius: 999px;
  min-width: 0;
  width: auto;
  height: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.header-right .theme-btn:hover,
.header-button .theme-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -12px rgba(244, 114, 182, 0.75);
}

/* --------------------------------------------------------------------------
   3. Recherche compacte
   -------------------------------------------------------------------------- */
.header-right .search-wrp,
.header-right .search-trigger {
  flex: 0 0 auto;
}

.header-right .search-wrp form,
.header-right .search-wrp input[type="search"],
.header-right .search-wrp input[type="text"] {
  max-width: 190px;
  height: 42px;
  font-size: 0.9rem;
}

@media (min-width: 992px) and (max-width: 1320px) {
  .header-right .search-wrp form,
  .header-right .search-wrp input[type="search"],
  .header-right .search-wrp input[type="text"] {
    max-width: 150px;
  }

  .header-right .theme-btn,
  .header-button .theme-btn {
    padding: 10px 18px;
    font-size: 0.83rem;
  }
}

/* ==========================================================================
   4. La recherche quitte l'en-tête
   Elle n'a de sens que sur le blog : on la retire de la barre du haut et on
   la réinstalle en tête de la page des articles.
   ========================================================================== */
.header-right .search-wrp,
.header-right .search-trigger,
.header-main .search-wrp,
.header-main .search-trigger {
  display: none !important;
}

/* ==========================================================================
   5. MENUS DÉROULANTS
   Panneau sombre, coins arrondis, chaque entrée avec son icône, son titre
   et sa description. Le thème n'affichait qu'une liste de liens.
   ========================================================================== */
@media (min-width: 992px) {

  .main-menu ul li ul.submenu,
  .main-menu ul li ul.sub-menu {
    min-width: 336px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    background: #201e28;
    box-shadow: 0 28px 60px -22px rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(14px);
    overflow: hidden;
    /* On repart de zéro : le thème anime déjà ces panneaux */
    top: calc(100% + 12px);
  }

  /* Un liseré dégradé en haut du panneau */
  .main-menu ul li ul.submenu::before,
  .main-menu ul li ul.sub-menu::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(104deg, #fc9860, #ff7269 46%, #fd4a81);
  }

  .main-menu ul li ul.submenu li,
  .main-menu ul li ul.sub-menu li {
    border: 0 !important;
    margin: 0;
  }

  .main-menu ul li ul.submenu li a,
  .main-menu ul li ul.sub-menu li a {
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    color: inherit !important;
    display: block;
  }
}

/* L'entrée enrichie : icône + textes + flèche */
.dgm-item {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 12px 13px;
  border-radius: 13px;
  position: relative;
  transition: background 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.main-menu ul li ul.submenu li a:hover .dgm-item,
.main-menu ul li ul.sub-menu li a:hover .dgm-item,
.main-menu ul li ul.submenu li.current-menu-item a .dgm-item {
  background: rgba(255, 255, 255, 0.06);
}

.dgm-item__icon {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: rgba(252, 152, 96, 0.12);
  border: 1px solid rgba(252, 152, 96, 0.26);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), background 0.32s, border-color 0.32s;
}

.dgm-item__icon svg {
  width: 19px;
  height: 19px;
  stroke: #fc9860;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.32s;
}

a:hover .dgm-item__icon {
  transform: translateY(-2px) rotate(-7deg);
  background: rgba(253, 74, 129, 0.16);
  border-color: rgba(253, 74, 129, 0.38);
}

a:hover .dgm-item__icon svg { stroke: #fd4a81; }

.dgm-item__txt {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.dgm-item__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #f7f4f2;
  line-height: 1.3;
  letter-spacing: -0.01em;
  transition: color 0.32s;
}

a:hover .dgm-item__title { color: #fc9860; }

.dgm-item__desc {
  font-size: 0.79rem;
  color: #8d858f;
  line-height: 1.42;
}

.dgm-item__go {
  margin-left: auto;
  align-self: center;
  color: #fc9860;
  font-size: 1rem;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1), transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

a:hover .dgm-item__go { opacity: 1; transform: translateX(0); }

/* Menu mobile : le panneau sombre n'a pas lieu d'être, mais on garde
   les icônes et les descriptions. */
@media (max-width: 991px) {
  .dgm-item { padding: 10px 0; }
  .dgm-item__icon { width: 32px; height: 32px; border-radius: 9px; }
  .dgm-item__icon svg { width: 16px; height: 16px; }
  .dgm-item__go { display: none; }
}

/* ==========================================================================
   6. RECHERCHE DE LA PAGE BLOG
   ========================================================================== */
.dg-blogsearch {
  max-width: 1240px;
  margin: 0 auto 34px;
  padding-inline: 24px;
}

.dg-blogsearch__form {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid rgba(42, 40, 51, 0.14);
  border-radius: 999px;
  padding: 7px 7px 7px 20px;
  box-shadow: 0 10px 30px -18px rgba(42, 40, 51, 0.5);
  transition: border-color 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.dg-blogsearch__form:focus-within {
  border-color: #fd547d;
  box-shadow: 0 0 0 4px rgba(253, 84, 125, 0.13);
}

.dg-blogsearch__icon {
  flex: none;
  width: 19px;
  height: 19px;
  stroke: #8d858f;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
}

.dg-blogsearch__form input[type="search"] {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: none;
  font-family: inherit;
  font-size: 1rem;
  color: #2a2833;
  padding: 11px 0;
}

.dg-blogsearch__form input[type="search"]::placeholder { color: #9d959f; }

.dg-blogsearch__form button {
  flex: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: #fff;
  padding: 12px 26px;
  border-radius: 999px;
  background: linear-gradient(104deg, #fc9860, #ff7269 46%, #fd4a81);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.dg-blogsearch__form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -12px rgba(253, 74, 129, 0.7);
}

.dg-blogsearch__count {
  margin: 14px 4px 0;
  font-size: 0.93rem;
  color: #6d656f;
}

.dg-blogsearch__count a { color: #fd547d; font-weight: 600; }

@media (max-width: 600px) {
  .dg-blogsearch__form { padding-left: 16px; }
  .dg-blogsearch__form button { padding: 11px 18px; font-size: 0.84rem; }
}

/* ==========================================================================
   7. PIED DE PAGE SUR MESURE
   Celui du thème contenait encore l'adresse et les services de sa démo :
   il est masqué et remplacé par celui-ci.
   ========================================================================== */
body footer.footer-section,
body .footer-section,
body footer.footer-wrapper,
body .footer-wrapper,
body footer.footer-area {
  display: none !important;
}

.dg-foot {
  background: #17151d;
  color: #a9a2a8;
  font-family: "DM Sans", "Inter", system-ui, sans-serif;
  line-height: 1.65;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
}

/* Liseré dégradé en haut du pied de page */
.dg-foot::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(104deg, #fc9860, #ff7269 46%, #fd4a81);
}

.dg-foot a { text-decoration: none; }

.dg-foot__in {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(48px, 6vw, 78px) 24px clamp(36px, 4vw, 54px);
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

@media (max-width: 900px) {
  .dg-foot__in { grid-template-columns: 1fr; }
}

/* --- Colonne d'identité --- */
.dg-foot__name {
  font-size: 1.4rem;
  font-weight: 700;
  color: #f7f4f2;
  letter-spacing: -0.03em;
  margin-bottom: 14px;
}

.dg-foot__pitch {
  font-size: 0.93rem;
  margin: 0 0 24px;
  max-width: 44ch;
}

.dg-foot__id {
  display: grid;
  gap: 13px;
  margin: 0 0 26px;
}

.dg-foot__id div {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 12px;
  align-items: start;
}

.dg-foot__id dt {
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #7d757e;
  padding-top: 2px;
}

.dg-foot__id dd {
  margin: 0;
  font-size: 0.9rem;
  color: #c9c2c6;
}

.dg-foot__id a { color: #c9c2c6; transition: color 0.3s; }
.dg-foot__id a:hover { color: #fc9860; }

.dg-foot__cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 24px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #17151d;
  background: linear-gradient(104deg, #fc9860, #ff7269 46%, #fd4a81);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.dg-foot__cta span { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.dg-foot__cta:hover {
  color: #17151d;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -14px rgba(253, 74, 129, 0.8);
}
.dg-foot__cta:hover span { transform: translateX(4px); }

/* --- Colonnes de liens --- */
.dg-foot__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: clamp(26px, 3vw, 44px);
}

.dg-foot__col h3 {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #fc9860;
  margin: 0 0 16px;
}

.dg-foot__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.dg-foot__col a {
  font-size: 0.9rem;
  color: #a9a2a8;
  position: relative;
  display: inline-block;
  transition: color 0.3s cubic-bezier(0.22, 1, 0.36, 1), transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.dg-foot__col a::before {
  content: "";
  position: absolute;
  left: -13px;
  top: 50%;
  width: 6px;
  height: 1px;
  background: #fc9860;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  transform: translateX(-4px);
}

.dg-foot__col a:hover {
  color: #f7f4f2;
  transform: translateX(6px);
}

.dg-foot__col a:hover::before { opacity: 1; transform: translateX(0); }

/* --- Ligne du bas --- */
.dg-foot__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: #131118;
}

.dg-foot__bottom-in {
  max-width: 1240px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  font-size: 0.85rem;
  color: #7d757e;
}

.dg-foot__bottom nav { display: flex; gap: 20px; }

.dg-foot__bottom a {
  color: #9d949c;
  transition: color 0.3s;
}

.dg-foot__bottom a:hover { color: #fc9860; }

/* ==========================================================================
   8. ALLÈGEMENT DE L'EN-TÊTE
   Trois zones de couleur disparaissent : la barre d'informations du haut,
   la bannière de titre (qui faisait doublon avec le titre de nos pages),
   et le fond blanc de l'en-tête.
   ========================================================================== */

/* 8.1 — Barre du haut : adresse, e-mail et réseaux sociaux.
   L'information est déjà dans le pied de page et sur la page Contact. */
.header-top,
.header-top-wrapper,
div.header-top {
  display: none !important;
}

/* 8.2 — Bannière de titre du thème.
   Nos pages portent déjà leur titre et leur fil d'Ariane : la garder créait
   deux <h1> et deux fils d'Ariane sur la même page. */
.dg-body .breadcrumb-wrapper {
  display: none !important;
}

/* 8.3 — En-tête sombre, accordé au reste du site */
.header-1,
.header-2,
.header-3,
header.header-1,
header.header-2,
.header-main,
.mega-menu-wrapper {
  background: #17151d !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Liens du menu principal */
.main-menu > ul > li > a,
.main-menu ul.menu > li > a,
.main-menu > ul > li > a:visited {
  color: #e9e3e7 !important;
  transition: color 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.main-menu > ul > li > a:hover,
.main-menu > ul > li.current-menu-item > a,
.main-menu > ul > li.current-menu-ancestor > a,
.main-menu > ul > li.current-menu-parent > a {
  color: #fc9860 !important;
}

/* Flèche des menus déroulants */
.main-menu .dropdown-toggle::after,
.main-menu ul li.has-dropdown > a::after {
  border-top-color: currentColor;
  color: inherit;
}

/* Bouton hamburger du mobile */
.header__hamburger .sidebar__toggle,
.header__hamburger i {
  color: #e9e3e7 !important;
}

/* Le logo passe sur sa version claire (voir le remplacement côté serveur) */
.header-logo img,
.logo img {
  max-height: 42px;
}

/* En-tête fixe au défilement, s'il existe dans le thème */
.sticky-active,
.header-sticky,
.sticky {
  background: rgba(23, 21, 29, 0.94) !important;
  backdrop-filter: blur(12px);
}

/* ==========================================================================
   9. MENU MOBILE — une seule marque d'ouverture
   Le « + » à droite est conservé : c'est lui qui déplie le sous-menu.
   On retire seulement la petite flèche que Bootstrap dessine après le
   libellé, qui faisait doublon.

   ⚠ Ne jamais masquer « .dropdown-toggle » : dans ce thème, c'est la classe
   du lien lui-même, et non celle d'une icône. Seul le ::after est visé.
   ========================================================================== */
@media (max-width: 991px) {

  a.dropdown-toggle::after,
  .dropdown-toggle > .caret,
  .mean-nav a::after,
  .offcanvas__menu a::after,
  .mobile-menu a::after {
    display: none !important;
    content: none !important;
    border: 0 !important;
    margin: 0 !important;
    width: 0 !important;
    height: 0 !important;
  }
}

/* ==========================================================================
   10. LA BANDE BLANCHE AU-DESSUS DE L'EN-TÊTE
   Masquer « .header-top » ne suffisait pas : le conteneur Elementor qui
   l'enveloppe gardait son fond blanc et sa hauteur. On masque donc le
   conteneur entier, et on met le fond sombre sur l'enveloppe du gabarit.
   ========================================================================== */

/* Le conteneur Elementor qui n'abrite que la barre d'informations */
.elementor-element:has(> .elementor-widget-container > .header-top),
.e-con:has(> .elementor-widget-container > .header-top),
.elementor-widget:has(> .elementor-widget-container > .header-top) {
  display: none !important;
}

/* Repli pour les navigateurs sans :has() — on annule au moins l'espace blanc */
.elementor-widget-container > .header-top {
  display: none !important;
}

/* L'enveloppe du gabarit d'en-tête ne doit plus laisser de blanc */
.header-page,
.bzotech-header-page-header,
[class*="bzotech-header-page"],
.elementor-location-header {
  background: #17151d !important;
}

/* Aucun espace résiduel au-dessus du menu */
.header-page > .elementor,
.header-page > .elementor > .e-con,
.elementor-location-header > .elementor {
  margin-block: 0 !important;
}

/* ==========================================================================
   11. LE BLANC AUTOUR DE L'EN-TÊTE
   Le fond de la page est blanc, et le gabarit d'en-tête d'Elementor ajoute
   un espacement vertical au-dessus et en dessous de la barre sombre.
   D'où les deux liserés blancs. On met le fond sombre sur la page et sur
   les conteneurs du gabarit, et on annule leur espacement vertical.
   ========================================================================== */

html,
body {
  background-color: #17151d;
}

/* Le gabarit d'en-tête et ses conteneurs Elementor */
body > .elementor,
body > .elementor > .e-con,
body > .elementor > .e-con > .elementor-widget-container,
.header-page,
.header-page > .elementor,
.header-page > .elementor > .e-con {
  background-color: #17151d !important;
  padding-block: 0 !important;
  margin-block: 0 !important;
}

/* La barre elle-même garde sa hauteur propre */
.header-1,
.header-2,
.header-3 {
  padding-block: 0 !important;
}

/* Les formes décoratives du gabarit débordaient au-dessus du menu */
body > .elementor .layer-shape,
body > .elementor .breadcrumb-shape,
.header-page .layer-shape,
.header-page .breadcrumb-shape {
  display: none !important;
}