/* ==========================================================================
   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 sur fond sombre --------------------------------------------------
   Le logo du client est noir et cuivre : posé sur le visuel sombre du hero
   (accueil) et sur le bandeau cuivre du pied de page, il devient illisible —
   le lettrage noir se fond dans le sombre, les parties cuivrées dans le cuivre.
   `brightness(0)` aplatit toutes les couleurs en noir, `invert(1)` les repasse
   en blanc : le logo devient une silhouette blanche, la transparence est
   conservée, et la règle suit automatiquement tout nouveau logo téléversé.

   Seuls ces deux emplacements portent la classe logo-light : le logo du
   bandeau blanc (menu mobile de l'accueil) et celui des pages intérieures
   gardent leurs couleurs d'origine. En position collée, le thème place de
   lui-même un aplat sombre derrière le logo de l'accueil (--title-color) :
   le blanc y reste lisible. */

.header-logo.logo-light img,
.footer-logo.logo-light img {
  filter: brightness(0) invert(1);
}

/* 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.
   ========================================================================== */

/* --- Fond de secours des sections à photo ---------------------------------
   Ces deux sections posent un texte clair sur une photo sombre. Tant que la
   photo n'est pas chargée — chargement différé, réseau lent, image supprimée
   du CMS — le texte se retrouvait sur du blanc : illisible, et signalé par
   l'audit de contraste. On pose l'anthracite de la charte dessous. */
.service-area,
.choose-area {
  background-color: var(--brand-dark);
}

/* Fonds différés : mêmes réglages que [data-bg-src] du thème, pour que
   l'image se pose correctement dès qu'elle est appliquée par le script. */
[data-bg-idle],
[data-bg-defer] {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.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%;
}

/* --- Photos de format homogène --------------------------------------------
   Le thème laisse chaque image à son ratio natif (largeur 100 %, hauteur
   libre). Des photos client de proportions différentes — portrait, carré,
   panoramique — donnaient donc des cartes de hauteurs différentes dans les
   deux carrousels. On impose le format du gabarit d'origine et on recadre au
   centre : plus aucune déformation, et toutes les cartes s'alignent. */

.service-item .box-img img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.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);
}

/* ==========================================================================
   7 bis. CARTES RÉALISATIONS
   ========================================================================== */

.project-item .box-img img {
  display: block;
  width: 100%;
  aspect-ratio: 7 / 5;
  object-fit: cover;
}

/* Les titres tenant sur une ou deux lignes, l'encart blanc n'avait pas la même
   hauteur d'une carte à l'autre. Swiper laisse chaque diapositive à la hauteur
   de son contenu : on les étire d'abord à la plus haute, puis la carte remplit
   la sienne et l'encart absorbe l'espace restant. Les bas de cartes s'alignent. */

.project-slider6 .swiper-wrapper {
  align-items: stretch;
}

.project-slider6 .swiper-slide {
  height: auto;
}

.project-item {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.project-item .box-content {
  flex: 1 1 auto;
}

/* ==========================================================================
   7 ter. PUCES DU CARROUSEL — TAILLE DE LA ZONE TACTILE
   --------------------------------------------------------------------------
   Les puces du thème mesurent 8 × 8 px ; WCAG 2.2 et l'audit target-size en
   demandent 24. On agrandit la boîte cliquable à 24 px et on redessine le
   point de 8 px dans un ::after centré. (Peindre le fond de la puce dans sa
   seule boîte de contenu marchait aussi, mais les rayons réduits donnaient un
   carré aux angles arrondis plutôt qu'un cercle.)

   L'anneau de la puce active est un ::before calé sur la boîte de la puce :
   son inset passe de -5 px à 3 px pour conserver exactement le même diamètre
   qu'avant (18 px avant mise à l'échelle). Le conteneur passe en flex pour
   recentrer les puces désormais plus hautes que sa ligne de 8 px, et sa marge
   haute perd les 16 px gagnés afin de ne pas décaler la section.
   ========================================================================== */

.slider-pagination.style2 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  line-height: normal;
  margin-top: 47px;
  padding-bottom: 12px;
}

/* Le fond passe dans le ::after : il faut le neutraliser aussi sur l'état
   actif, dont la règle du thème est plus spécifique — sans quoi la puce
   active se peint en cuivre sur ses 24 px et devient un gros disque. */
.slider-pagination.style2 .swiper-pagination-bullet,
.slider-pagination.style2 .swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: transparent;
}

/* le point visible */
.slider-pagination.style2 .swiper-pagination-bullet:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background-color: #E4E4E4;
  transition: 0.4s ease-in-out;
}

.slider-pagination.style2 .swiper-pagination-bullet.swiper-pagination-bullet-active:after {
  background-color: var(--theme-color);
}

/* l'anneau de la puce active, recalé sur la nouvelle boîte */
.slider-pagination.style2 .swiper-pagination-bullet:before {
  inset: 3px;
}

/* ==========================================================================
   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);
}

/* Le cuivre de marque donne 4,37:1 sur le crème de la carte, pour 4,5 exigés
   par WCAG AA (il passe en revanche sur blanc). Le titre de la prestation
   ouverte prend donc le cuivre foncé : 5,9:1. */
.accordion-button:not(.collapsed),
.accordion-card.style2 .accordion-button:not(.collapsed) {
  color: var(--brand-copper-dark);
}

/* 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;
}

/* --- Bandeau de contact du pied de page -----------------------------------
   Le thème plafonne ces textes à 205 px : l'adresse e-mail du client en fait
   environ 215, elle passait donc à la ligne — et coupée en plein milieu du
   mot (« …renovatio / n.fr »). On élargit le bloc et on interdit la coupure
   des adresses e-mail et des numéros, qui ne doivent jamais se scinder. */

.footer-contact .box-text {
  max-width: 280px;
  overflow-wrap: normal;
}

.footer-contact .box-text a[href^="mailto:"],
.footer-contact .box-text a[href^="tel:"] {
  white-space: nowrap;
}

.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;
}