/* ============================================================
   CT ConstructTech — Charte graphique personnalisée
   Palette : Blanc #ffffff · Noir #000000 · Rouge #fd0100
   ============================================================ */

/* ----------------------------------------------------------
   1. Variables globales — couleur primaire
   ---------------------------------------------------------- */
:root {
  --tl-color-theme-primary: #fd0100;
  --ct-accent:              #fd0100;
  --ct-accent-hover:        #c80000;
  --ct-transition:          background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

/* ----------------------------------------------------------
   2. THÈME CLAIR (défaut)
   ---------------------------------------------------------- */
:root,
[data-theme="light"] {
  --ct-bg:          #ffffff;
  --ct-bg-alt:      #f2f2f2;
  --ct-bg-dark:     #111111;
  --ct-bg-darker:   #0d0d0d;
  --ct-text:        #111111;
  --ct-text-muted:  #444444;
  --ct-text-faint:  #888888;
  --ct-border:      rgba(0, 0, 0, 0.10);
  --ct-card:        #ffffff;
  --ct-shadow:      0 4px 24px rgba(0, 0, 0, 0.07);
  --tl-color-heading-primary: #111111;
  --tl-color-text-body:       #444444;
}

/* ----------------------------------------------------------
   3. THÈME SOMBRE
   ---------------------------------------------------------- */
[data-theme="dark"] {
  --ct-bg:          #0e0e0e;
  --ct-bg-alt:      #1a1a1a;
  --ct-bg-dark:     #080808;
  --ct-bg-darker:   #050505;
  --ct-text:        #ebebeb;
  --ct-text-muted:  #aaaaaa;
  --ct-text-faint:  #555555;
  --ct-border:      rgba(255, 255, 255, 0.08);
  --ct-card:        #161616;
  --ct-shadow:      0 4px 28px rgba(0, 0, 0, 0.5);
  --tl-color-heading-primary: #ebebeb;
  --tl-color-text-body:       #aaaaaa;
}

/* ----------------------------------------------------------
   4. Transition globale fluide
   ---------------------------------------------------------- */
body,
.service-item, .feature-item, .process-item,
.post-card, .shop-item, .shop-sidebar,
.testi-item, .request-form-wrap, .request-item,
.form-control, .counter-section, .sponsor-section {
  transition: var(--ct-transition);
}

/* ----------------------------------------------------------
   5. Body & fond de page
   ---------------------------------------------------------- */
body {
  background-color: var(--ct-bg);
  color: var(--ct-text);
}

/* ----------------------------------------------------------
   6. Sections "claires" — adaptées aux deux thèmes
   ---------------------------------------------------------- */
.tl-bg-color,
.service-section.tl-bg-color,
.feature-section.tl-bg-color,
.blog-section.tl-bg-color,
.newsletter-section.tl-bg-color,
.team-section.tl-bg-color {
  background-color: var(--ct-bg-alt) !important;
}

.bg-grey {
  background-color: var(--ct-bg-alt) !important;
}

[data-theme="dark"] .bg-white {
  background-color: var(--ct-bg) !important;
}

[data-theme="dark"] .newsletter-section.bg-white {
  background-color: var(--ct-bg-alt) !important;
}

/* ----------------------------------------------------------
   7. Typographie — titres & paragraphes
   ---------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.section-title,
.banner-process-title {
  color: var(--ct-text);
}

p {
  color: var(--ct-text-muted);
}

[data-theme="dark"] .section-title span {
  color: #fd0100;
}

/* ----------------------------------------------------------
   8. Preloader — rouge visible sur fond sombre
   ---------------------------------------------------------- */
.preloader .site-name {
  background-color: #0d0d0d;
}

.preloader .site-name span {
  color: #ffffff;
  letter-spacing: 4px;
  font-size: 32px !important;
}

/* Barres d'animation en rouge */
.preloader .inner-bar {
  background-color: #fd0100 !important;
}

/* Barres conteneurs transparentes */
.preloader .bar {
  background-color: transparent;
}

/* ----------------------------------------------------------
   9. Header — taille & effet blur au scroll
   ---------------------------------------------------------- */

/* Taille des liens de navigation */
.header-menu-wrap ul li a {
  font-size: 20px !important;
  letter-spacing: 0.3px !important;
}

/* Logo plus grand */
.primary-header-inner .header-logo img {
  max-height: 98px !important;
  width: auto !important;
}

/* Bouton "Nous contacter" */
.header-btn-wrap .tl-primary-btn.header-btn {
  font-size: 17px !important;
  padding: 16px 28px !important;
}

/* Téléphone dans le header */
.header-contact .call-text {
  font-size: 13px !important;
}
.header-contact .call-number {
  font-size: 17px !important;
  font-weight: 700 !important;
}

/* Bouton theme toggle */
.theme-toggle {
  height: 52px !important;
  width: 52px !important;
  font-size: 22px !important;
}

.header .primary-header {
  transition: background-color 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease;
}

/* Thème clair : verre dépoli blanc */
[data-theme="light"] .header .primary-header.fixed {
  background-color: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.10);
}

/* Thème sombre : verre dépoli noir */
[data-theme="dark"] .header .primary-header.fixed,
.header .primary-header.fixed {
  background-color: rgba(13, 13, 13, 0.80) !important;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.40);
}

/* ----------------------------------------------------------
   9b. Bouton burger mobile
   ---------------------------------------------------------- */
.mobile-side-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  height: 46px;
  width: 46px;
  padding: 0;
  margin-left: 10px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.mobile-side-menu-toggle:hover {
  background: #fd0100;
  border-color: #fd0100;
}

@media (max-width: 992px) {
  .mobile-side-menu-toggle {
    display: inline-flex;
  }
}

/* Le burger redondant généré par meanmenu dans le panneau est masqué */
.mobile-side-menu .meanmenu-reveal {
  display: none !important;
}

/* Header fixe et lisible sur mobile — le burger reste visible au scroll */
@media (max-width: 992px) {
  .header {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(13, 13, 13, 0.92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.28);
  }

  .header .primary-header .primary-header-inner {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* Logo compact dans la barre fixe */
  .header .header-logo img {
    max-height: 46px !important;
  }

  /* Barre allégée : on masque le bouton "Nous contacter" (Contact reste dans le menu) */
  .header .header-btn-wrap {
    display: none !important;
  }
}

/* ----------------------------------------------------------
   10. Bouton theme toggle
   ---------------------------------------------------------- */
.theme-toggle {
  background: rgba(216, 218, 223, 0.13);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(29px);
  height: 56px;
  width: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 20px;
  flex-shrink: 0;
}

.theme-toggle:hover {
  background-color: #fd0100;
  border-color: #fd0100;
}

.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }

[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ----------------------------------------------------------
   11. Navigation — états actif & hover
   ---------------------------------------------------------- */
.mobile-menu-items ul li.active > a,
.mobile-menu-items ul li > a:hover {
  color: #fd0100;
}

/* ----------------------------------------------------------
   12. Bouton principal
   ---------------------------------------------------------- */
.tl-primary-btn .icon {
  background-color: #fd0100;
}

.tl-primary-btn:before {
  background: #fd0100;
}

.tl-primary-btn:hover {
  border-color: #fd0100;
  color: #ffffff;
}

.tl-primary-btn:hover .icon {
  background-color: var(--ct-accent-hover);
}

/* ----------------------------------------------------------
   13. Sub-heading — point décoratif
   ---------------------------------------------------------- */
.sub-heading:before {
  background-color: #fd0100;
}

/* ----------------------------------------------------------
   14. Titres — accent <span>
   ---------------------------------------------------------- */
.section-title span {
  color: #fd0100;
}

/* ----------------------------------------------------------
   15. Service items
   ---------------------------------------------------------- */
[data-theme="dark"] .service-item {
  background-color: var(--ct-card);
  border-color: var(--ct-border);
}

.service-item:hover {
  border-color: #fd0100;
}

/* ----------------------------------------------------------
   16. Feature items
   ---------------------------------------------------------- */
.feature-item .number {
  color: #fd0100;
}

.feature-item:hover,
.feature-item.active {
  border-color: #fd0100;
}

[data-theme="dark"] .feature-item {
  border-color: var(--ct-border);
}

/* ----------------------------------------------------------
   17. Compteurs
   ---------------------------------------------------------- */
.counter-item .odometer,
.counter-item .icon {
  color: #fd0100;
}

[data-theme="dark"] .counter-section {
  background-color: var(--ct-bg) !important;
}

/* ----------------------------------------------------------
   18. Processus
   ---------------------------------------------------------- */
.process-content .title span {
  color: #fd0100;
}

.process-item .number {
  color: rgba(253, 1, 0, 0.07);
}

[data-theme="dark"] .process-item {
  background-color: transparent;
}

[data-theme="dark"] .process-section {
  background-color: var(--ct-bg) !important;
}

/* ----------------------------------------------------------
   19. Progress bars
   ---------------------------------------------------------- */
.progress-bar {
  background-color: #fd0100 !important;
}

/* ----------------------------------------------------------
   20. Projets / Portfolio
   ---------------------------------------------------------- */
.project-content .title a:hover {
  color: #fd0100;
}

[data-theme="dark"] .project-section-inner {
  background-color: var(--ct-bg-alt) !important;
}

/* ----------------------------------------------------------
   21. Témoignages — fond et textes
   ---------------------------------------------------------- */

/* Fond codé en dur #eee → doit passer en sombre */
[data-theme="dark"] .testimonial-section {
  background-color: var(--ct-bg) !important;
}

/* Textes internes — doivent utiliser la variable correcte */
[data-theme="dark"] .testi-item p,
[data-theme="dark"] .testi-carousel-wrap .testi-top-content .right-content p,
[data-theme="dark"] .testi-carousel-wrap .testi-top-content .left-content .rating-list span,
[data-theme="dark"] .testi-item .testi-author .name {
  color: var(--ct-text) !important;
}

[data-theme="dark"] .testi-item .testi-author .name span {
  color: var(--ct-text-muted) !important;
}

/* Étoiles de notation */
.rating-list ul li i,
.review li i {
  color: #fd0100;
}

[data-theme="dark"] .testi-carousel-wrap,
[data-theme="dark"] .testi-item {
  background-color: transparent;
}

/* ----------------------------------------------------------
   21b. Sections à fond #eee codé en dur — dark mode
   ---------------------------------------------------------- */
[data-theme="dark"] .process-section {
  background-color: var(--ct-bg) !important;
}

[data-theme="dark"] .skill-section {
  background-color: var(--ct-bg-alt) !important;
}

[data-theme="dark"] .skill-section p,
[data-theme="dark"] .skill-section h2,
[data-theme="dark"] .skill-section h3,
[data-theme="dark"] .skill-section h4,
[data-theme="dark"] .skill-section .sub-heading {
  color: var(--ct-text) !important;
}

/* ----------------------------------------------------------
   22. Sponsors
   ---------------------------------------------------------- */
[data-theme="dark"] .sponsor-section {
  background-color: var(--ct-bg-alt) !important;
}

[data-theme="dark"] .sponsor-item img {
  filter: brightness(0) invert(1);
  opacity: 0.45;
}

/* ----------------------------------------------------------
   23. Team
   ---------------------------------------------------------- */
.team-item .arrow a {
  color: #fd0100;
}

.team-item:hover {
  border-color: #fd0100;
}

/* ----------------------------------------------------------
   24. Blog
   ---------------------------------------------------------- */
.post-card .post-thumb .category {
  background-color: #fd0100;
  color: #ffffff;
}

.post-card .post-content .title a:hover {
  color: #fd0100;
}

[data-theme="dark"] .post-card {
  background-color: var(--ct-card);
}

/* ----------------------------------------------------------
   25. Newsletter
   ---------------------------------------------------------- */
.newsletter-form button {
  background-color: #fd0100;
}

.newsletter-form button:hover {
  background-color: var(--ct-accent-hover);
}

/* ----------------------------------------------------------
   26. Contact — formulaire
   ---------------------------------------------------------- */
[data-theme="dark"] .form-control {
  background-color: var(--ct-bg-dark);
  color: var(--ct-text);
  border-color: var(--ct-border);
}

[data-theme="dark"] .form-control::placeholder {
  color: var(--ct-text-faint);
}

[data-theme="dark"] .request-item {
  background-color: var(--ct-card);
  border-color: var(--ct-border);
}

[data-theme="dark"] .request-form-wrap {
  background-color: transparent;
}

/* Carte Google Maps filtrée en dark */
[data-theme="dark"] .map-wrapper iframe {
  filter: grayscale(50%) invert(90%) hue-rotate(180deg);
  opacity: 0.75;
}

/* ----------------------------------------------------------
   27. Formation / Shop
   ---------------------------------------------------------- */
.shop-item .shop-content .price,
.sidebar-item .content .price {
  color: #fd0100;
}

[data-theme="dark"] .shop-item {
  background-color: var(--ct-card);
}

[data-theme="dark"] .shop-sidebar {
  background-color: var(--ct-card);
  border-color: var(--ct-border);
}

[data-theme="dark"] .sidebar-header {
  color: var(--ct-text);
  border-color: var(--ct-border);
}

[data-theme="dark"] .sidebar-list li label,
[data-theme="dark"] .sidebar-list li p {
  color: var(--ct-text-muted);
}

[data-theme="dark"] .shop-grid-left .top-grid-content {
  background-color: var(--ct-card);
  border-color: var(--ct-border);
}

[data-theme="dark"] .nice-select {
  background-color: var(--ct-card);
  border-color: var(--ct-border);
  color: var(--ct-text);
}

[data-theme="dark"] .nice-select .list {
  background-color: var(--ct-card);
}

/* ----------------------------------------------------------
   28. Skill section
   ---------------------------------------------------------- */
[data-theme="dark"] .skill-section {
  background-color: var(--ct-bg-alt) !important;
}

/* ----------------------------------------------------------
   29. Page header (bannières intérieures)
   ---------------------------------------------------------- */
.page-header .overlay {
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.80) 0%,
    rgba(13, 13, 13, 0.50) 100%
  );
}

/* ----------------------------------------------------------
   30. Pagination
   ---------------------------------------------------------- */
.pagination-wrap li a.active,
.pagination-wrap li a:hover {
  background-color: #fd0100;
  border-color: #fd0100;
  color: #ffffff;
}

/* ----------------------------------------------------------
   31. Footer
   ---------------------------------------------------------- */
.footer-list li a:hover,
.footer-address .number:hover,
.footer-address .mail:hover {
  color: #fd0100;
}

.footer-text span {
  -webkit-text-stroke-color: rgba(253, 1, 0, 0.05);
}

/* Icônes sociales du footer (mail + LinkedIn) */
.footer-widget .social-list.footer-social-icons {
  column-gap: 12px;
}
.footer-widget .social-list.footer-social-icons li:not(:last-of-type) {
  margin-right: 0;
  padding-right: 0;
}
.footer-widget .social-list.footer-social-icons li:not(:last-of-type):before {
  display: none;
}
.footer-widget .social-list.footer-social-icons li a {
  height: 42px;
  width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 17px;
  color: #ffffff;
  transition: all 0.3s ease;
}
.footer-widget .social-list.footer-social-icons li a:hover {
  background-color: #fd0100;
  border-color: #fd0100;
  color: #ffffff;
}

.copyright-area {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* ----------------------------------------------------------
   32. Scroll percentage
   ---------------------------------------------------------- */
#scroll-percentage {
  background-color: #fd0100;
}

/* ----------------------------------------------------------
   33. Sidebar (panneau latéral)
   ---------------------------------------------------------- */
.side-menu-social li a:hover {
  background-color: #fd0100;
  border-color: #fd0100;
}

/* ----------------------------------------------------------
   34. Popup search
   ---------------------------------------------------------- */
[data-theme="dark"] #popup-search-box {
  background-color: var(--ct-bg-dark);
}

[data-theme="dark"] #popup-search-box input {
  background-color: transparent;
  color: var(--ct-text);
  border-color: var(--ct-border);
}

/* ----------------------------------------------------------
   35. Slider hero — typographie maîtrisée
   ---------------------------------------------------------- */

/* Titre principal : taille réduite pour laisser respirer */
.slider-section .section-title {
  font-size: 54px !important;
  line-height: 1.12 !important;
  letter-spacing: -0.5px;
  margin-bottom: 20px !important;
}

/* Sous-titre badge au-dessus du titre */
.slider-section .sub-heading {
  font-size: 13px !important;
  margin-bottom: 14px !important;
  opacity: 1 !important;
}

/* Description sous le titre */
.slider-section .antra-desc p {
  font-size: 15px !important;
  line-height: 1.6 !important;
  max-width: 540px;
}

/* Conteneur texte : ne pas dépasser 55% de largeur */
.slider-section .slider-content {
  max-width: 55%;
}

/* Tablette */
@media (max-width: 991px) {
  .slider-section .section-title {
    font-size: 38px !important;
    line-height: 1.15 !important;
  }
  .slider-section .slider-content {
    max-width: 100%;
  }
}

/* Mobile */
@media (max-width: 575px) {
  .slider-section .section-title {
    font-size: 28px !important;
    line-height: 1.2 !important;
    letter-spacing: 0;
  }
  .slider-section .antra-desc p {
    font-size: 14px !important;
  }
}

/* ----------------------------------------------------------
   36. Titres de section — réduction sur mobile
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  .section-heading .section-title,
  .about-content .section-heading .section-title,
  .service-section .section-heading .section-title {
    font-size: 30px !important;
    line-height: 1.18 !important;
  }
}

@media (max-width: 480px) {
  .section-heading .section-title,
  .about-content .section-heading .section-title,
  .service-section .section-heading .section-title {
    font-size: 26px !important;
  }
}

/* ----------------------------------------------------------
   37. ANTI-DÉBORDEMENT HORIZONTAL (mobile)
   Placé ici (fichier CSS statique) pour être fiable, sans
   dépendre du cache des vues Blade.
   ---------------------------------------------------------- */
@media (max-width: 991px) {

  /* Verrou global : aucune barre de défilement horizontale */
  html {
    overflow-x: hidden !important;
  }
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    position: relative;
  }
  #antra-smooth-wrapper,
  #antra-smooth-content {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Panneaux hors écran : masqués tant qu'ils ne sont pas ouverts
     (sinon ils élargissent la page → décalage + swipe possible) */
  .sidebar-area { display: none !important; }
  .open-sidebar .sidebar-area { display: flex !important; }

  .mobile-side-menu { display: none !important; }
  .mobile-side-menu.is-open { display: block !important; }

  /* Textes décoratifs géants (ConstruTech, galerie…) : ne doivent
     jamais élargir la page */
  .footer-text,
  .footer-text span,
  .project-text,
  .project-text span,
  .counter-text,
  .counter-text span,
  .gallary-text,
  .gallary-text span,
  .testi-text,
  .service-text {
    max-width: 100vw !important;
    overflow: hidden !important;
  }
}

/* ----------------------------------------------------------
   38. Footer rééquilibré (3 colonnes : Marque · Navigation · CTA)
   ---------------------------------------------------------- */
.ct-footer-grid {
  align-items: flex-start;
  row-gap: 40px;
}

.ct-footer-brand .footer-logo { margin-bottom: 22px; }

.ct-footer-about {
  color: rgba(255, 255, 255, 0.62) !important;
  max-width: 340px;
  line-height: 1.7;
  margin-bottom: 26px;
}

.ct-footer-title {
  color: #ffffff;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 26px;
  padding-bottom: 14px;
  position: relative;
}
.ct-footer-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 38px;
  height: 2px;
  background: #fd0100;
}

.ct-footer-cta p {
  color: rgba(255, 255, 255, 0.62) !important;
  max-width: 430px;
  line-height: 1.7;
  margin-bottom: 26px;
}

.ct-footer-brand .footer-social-icons { margin-top: 4px; }

/* Empilement propre sur tablette/mobile */
@media (max-width: 991px) {
  .ct-footer-grid { row-gap: 34px; }
  .ct-footer-about,
  .ct-footer-cta p { max-width: 100%; }
}