/* ==========================================================================
   Prokraft Rénovation — charte de marque
   --------------------------------------------------------------------------
   Surcharge additive du thème Rakar, chargée APRÈS style.css.
   Ne jamais éditer style.css : ce fichier survit aux mises à jour du thème.
   À déposer dans /assets/css/ (avec /assets/img/prokraft/ pour les pictos).

   Palette relevée sur la carte de visite du client :
     anthracite      #231F20   (bandeau, titres, pied de page)
     cuivre          #9C6431   (couleur d'action — 4,9:1 avec du blanc)
     cuivre clair    #C98D52   (accents sur fond sombre — 5,7:1 sur anthracite)
     crème           #F7F1EA   (fonds doux)
   ========================================================================== */

:root {
  --theme-color: #9C6431;
  --gr-color2: #B87A42;
  --title-color: #231F20;
  --smoke-color: #F7F1EA;
  --smoke-color2: #F3EBE2;

  --brand-dark: #231F20;
  --brand-dark-2: #2E2A2B;
  --brand-copper: #9C6431;
  --brand-copper-dark: #7E4F25;
  --brand-copper-light: #C98D52;
  --brand-cream: #F7F1EA;
}

body,
body.bg-white {
  background-color: var(--white-color);
}

::selection {
  background-color: var(--brand-copper);
  color: var(--white-color);
}

/* ==========================================================================
   1. SUR-TITRES
   ========================================================================== */

.sub-title,
.sub-title2 {
  color: var(--brand-copper);
}

/* sur fond sombre ou photo, le cuivre foncé manque de contraste */
.hero-style6 .sub-title2,
.service-area .sub-title2,
.choose-area .sub-title2,
[data-bg-src] .sub-title2 {
  color: var(--brand-copper-light);
}

/* ==========================================================================
   2. BOUTONS
   --------------------------------------------------------------------------
   Le thème ne change pas background-color au survol : il fait glisser une
   couche ::before/::after. C'est cette couche qu'on recolore.
   ========================================================================== */

.th-btn:before,
.th-btn:after {
  background-color: var(--brand-dark);
}

.th-btn:hover,
.th-btn.active {
  color: var(--white-color);
}

/* style2 / style3 : contour clair sur photo, couche de survol blanche →
   le texte doit devenir sombre au survol. */
.th-btn.style2:hover:before,
.th-btn.style2:hover:after,
.th-btn.style3:hover:before,
.th-btn.style3:hover:after {
  background-color: var(--white-color);
}

.th-btn.style2:hover,
.th-btn.style3:hover {
  color: var(--brand-dark);
  border-color: var(--white-color);
}

/* pied de page anthracite : un bouton cuivre y reste lisible, survol clair */
.footer-wrapper .th-btn:before,
.footer-wrapper .th-btn:after {
  background-color: var(--white-color);
}

.footer-wrapper .th-btn:hover {
  color: var(--brand-dark);
}

/* bouton d'envoi pendant la soumission du formulaire */
.th-btn[disabled] {
  opacity: .75;
  cursor: progress;
}

/* ==========================================================================
   3. LIENS ET NAVIGATION
   ========================================================================== */

main a:not(.th-btn):hover,
.page-content a:not(.th-btn):hover,
.widget a:not(.th-btn):hover {
  color: var(--brand-copper);
}

.main-menu > ul > li > a:hover,
.main-menu > ul > li.active > a {
  color: var(--brand-copper);
}

/* zones sombres : on éclaircit au survol au lieu de foncer */
.footer-wrapper a:not(.th-btn):hover,
.header-top a:not(.th-btn):hover,
.breadcumb-menu li a:not(.th-btn):hover,
.hero-style6 a:not(.th-btn):hover,
.project-item .box-title a:hover {
  color: var(--brand-copper-light);
}

/* ==========================================================================
   4. EN-TÊTE
   ========================================================================== */

.header-top {
  background-color: var(--brand-dark);
}

.header-links i {
  color: var(--brand-copper-light);
}

/* logo du client quasi carré : on fixe la hauteur, la largeur suit */
.header-layout5 .header-logo img,
.th-menu-wrapper .mobile-logo img {
  height: 50px;
  width: auto;
}

.header-layout1 .header-logo img {
  height: 58px;
  width: auto;
  max-width: none;
}

@media (max-width: 991px) {
  .header-layout1 .header-logo img {
    height: 46px;
  }
}

/* triangles décoratifs du thème, prévus pour un fond gris : inutiles ici */
.header-layout1 .menu-area:before,
.header-layout1 .menu-area:after {
  display: none;
}

/* ==========================================================================
   5. HERO
   --------------------------------------------------------------------------
   autoHeight est désactivé dans le template (la page sautait à chaque
   diapositive). Chaque slide occupe donc toute la hauteur du conteneur.
   ========================================================================== */

.hero-6 .swiper-wrapper {
  align-items: stretch;
}

.hero-6 .swiper-slide {
  height: auto;
}

.hero-6 .hero-inner {
  height: 100%;
}

/* les titres des slides 2 et 3 sont des <h2> : même rendu que le <h1> */
.hero-style6 h2.hero-title {
  margin-top: 0;
}

/* ==========================================================================
   6. BLOC « ANS D'EXPÉRIENCE » ET LISTES
   ========================================================================== */

.img-box7 .year-box {
  background: var(--brand-cream);
}

.img-box7 .year-box .box-number {
  color: var(--brand-copper);
}

.checklist li::before,
.checklist ul li::before {
  color: var(--brand-copper);
}

/* ==========================================================================
   7. CARTES PRESTATION (icônes Font Awesome à la place des SVG du thème)
   ========================================================================== */

.service-item {
  height: 100%;
}

.service-item .box-icon {
  background: var(--brand-cream);
  border-color: var(--white-color);
}

.service-item:hover .box-icon {
  background: #EEDCC8;
}

.service-item .box-icon i {
  color: var(--brand-copper);
  font-size: 34px;
  line-height: 72px;
  display: inline-block;
  transition: 0.4s ease-in-out;
}

.service-item:hover .box-icon i {
  transform: rotateY(180deg);
}

.icon-btn {
  background-color: var(--brand-copper);
  border-color: var(--brand-copper);
  color: var(--white-color);
}

/* ==========================================================================
   8. PRESTATIONS EN DÉTAIL (accordéon)
   ========================================================================== */

/* fond bleuté du thème (#EFF1F8) → crème de la charte */
.accordion-card.style2 {
  background: var(--brand-cream);
}

.accordion-button:not(.collapsed),
.accordion-card.style2 .accordion-button:not(.collapsed) {
  color: var(--brand-copper);
}

/* le contenu est du HTML éditable (paragraphe + liste) */
.accordion-body .faq-text p:last-child,
.accordion-body .faq-text ul:last-child {
  margin-bottom: 0;
}

.accordion-body .faq-text ul {
  padding-left: 1.2em;
  margin-top: 10px;
}

.accordion-body .faq-text li {
  margin-bottom: 4px;
}

.accordion-body .faq-text li::marker {
  color: var(--brand-copper);
}

/* ==========================================================================
   9. FORMULAIRE
   ========================================================================== */

.form-control:focus,
.form-select:focus {
  border-color: var(--brand-copper);
  box-shadow: 0 0 0 .2rem rgba(156, 100, 49, .15);
}

.contact-form-success.alert-success {
  background-color: #E8F5EC;
  border-color: #27AE60;
  color: #1B6B3A;
}

.contact-form-error.alert-danger {
  background-color: #FBEAEA;
  border-color: #C0392B;
  color: #962D22;
}

/* ==========================================================================
   10. PIED DE PAGE
   ========================================================================== */

.footer-layout6 {
  background-color: var(--brand-dark);
}

/* le thème réserve 232 px au-dessus du bandeau contact pour la section blog
   de la démo, absente ici : il ne restait qu'un grand aplat vide. */
.footer-layout6 .footer-contact-area {
  margin-top: 60px;
}

.footer-layout6 .footer-contact-area .footer-contact-wrap {
  background-color: var(--brand-copper);
  gap: 24px;
}

.footer-contact .box-text {
  overflow-wrap: anywhere;
}

.footer-layout6 .footer-logo img {
  height: 76px;
  width: auto;
}

.footer-widget.widget_nav_menu a,
.footer-wrapper .footer-links a,
.footer-wrapper .copyright-text a,
.footer-wrapper .th-widget-schedule a {
  color: var(--white-color);
}

.footer-widget.widget_nav_menu a:hover,
.footer-widget.widget_nav_menu a:hover:before,
.footer-wrapper .footer-links a:hover,
.footer-wrapper .copyright-text a:hover,
.footer-wrapper .th-widget-schedule a:hover {
  color: var(--brand-copper-light);
}

.footer-wrapper .th-widget-schedule .schedule-info {
  border-bottom: none;
  margin-bottom: 8px;
  padding-bottom: 0;
  font-weight: 600;
  color: var(--white-color);
}

.footer-wrapper .th-widget-schedule .schedule-info i {
  color: var(--brand-copper-light);
}

.footer-wrapper .th-social a:hover {
  background-color: var(--brand-copper);
  border-color: var(--brand-copper);
  color: var(--white-color);
}

/* zones tactiles d'au moins 24 px dans les listes de liens */
.footer-widget.widget_nav_menu a {
  padding-top: 3px;
  padding-bottom: 3px;
  margin-bottom: 10px;
}

.footer-widget.widget_nav_menu a:before {
  top: 5px;
}

/* ==========================================================================
   11. DIVERS
   ========================================================================== */

.scroll-top .progress-circle path {
  stroke: var(--brand-copper);
}

main {
  display: block;
}