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

   Palette extraite du logo client :
     bleu marine  #132D6F   (dominant)
     bleu profond #0B2154   (titres, aplats)
     bleu vif     #1E4BA8   (dégradés, survols)
     rouge        #C8252A   (accent uniquement)
     fond         #FFFFFF   (inchangé)
   ========================================================================== */

:root {
  /* --- couleur principale : bleu marine, remplace l'orange du thème --- */
  --theme-color: #132D6F;
  --gr-color2: #1E4BA8;

  /* --- déclinaisons de marque --- */
  --brand-blue-deep: #0B2154;
  --brand-blue: #132D6F;
  --brand-blue-bright: #1E4BA8;
  --brand-blue-soft: #EEF2FA;
  --brand-red: #C8252A;
  --brand-red-dark: #A81D22;
}

/* ==========================================================================
   1. ACCENT ROUGE — réservé aux sur-titres et aux micro-signaux
   ========================================================================== */

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

/* sur fond sombre, le rouge manque de contraste : on éclaircit */
.service-area .sub-title2,
.choose-area .sub-title2,
.testi-area .sub-title,
.testi-area .sub-title2,
[data-bg-src] .sub-title2 {
  color: #FF6B62;
}

/* étoiles d'avis */
.box-review i,
.testi-grid2 .box-review i {
  color: var(--brand-red);
}

/* numéro décoratif des cartes prestation */
.service-card:hover .box-number {
  color: var(--brand-red);
}

/* ==========================================================================
   2. BOUTONS — bleu plein, survol rouge
   --------------------------------------------------------------------------
   IMPORTANT : le thème ne change PAS background-color au survol. Il fait
   glisser une couche ::before (z-index:-1) qui recouvre le fond du bouton.
   C'est donc CETTE couche qu'il faut recolorer, pas background-color.
   ========================================================================== */

/* état par défaut : bleu de marque (hérité de --theme-color) */

/* couche de survol : rouge accent, texte blanc conservé par le thème */
.th-btn:before,
.th-btn:after {
  background-color: var(--brand-red);
}

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

/* --- style2 : bouton contour blanc sur fond sombre (hero, sections image) ---
   Le thème le veut transparent avec bordure blanche ; sa couche de survol est
   BLANCHE. Le texte doit donc devenir SOMBRE au survol, jamais blanc. */
.th-btn.style2:hover:before,
.th-btn.style2:hover:after {
  background-color: var(--white-color);
}

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

/* --- style3 : même logique, couche de survol blanche --- */
.th-btn.style3:hover:before,
.th-btn.style3:hover:after {
  background-color: var(--white-color);
}

.th-btn.style3:hover {
  color: var(--brand-blue);
}

/* --- footer : sur le bleu nuit du pied de page, un bouton bleu de marque se
   fond dans le fond. On le passe en blanc plein, couche de survol rouge. --- */
.footer-wrapper .th-btn {
  background-color: var(--white-color);
  color: var(--brand-blue);
}

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

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

/* bouton d'envoi du formulaire pendant le chargement */
.th-btn[disabled] {
  background-color: var(--brand-blue-bright);
  opacity: .75;
  cursor: progress;
}

/* ==========================================================================
   3. LIENS ET NAVIGATION
   --------------------------------------------------------------------------
   Le survol rouge est réservé aux zones à FOND CLAIR. Sur fond sombre
   (hero, footer, sections image, fil d'Ariane) le texte reste clair.
   ========================================================================== */

a {
  color: var(--brand-blue);
}

/* survol rouge : uniquement dans le corps de page sur fond clair.
   --------------------------------------------------------------------------
   Le :not(.th-btn) n'est pas décoratif. Ces règles visent les liens de TEXTE,
   mais un bouton est aussi un <a> : sans l'exclusion elles l'emportaient sur
   `.th-btn:hover { color: white }` (même spécificité 0-2-0, mais déclarées
   plus bas dans ce fichier) et repeignaient le libellé en rouge — par-dessus
   la couche de survol ::before, rouge elle aussi. Sur l'encart "Demandez
   votre devis gratuit" des pages prestation, le texte devenait strictement
   invisible ; sur les boutons "En savoir plus", rouge sur bleu nuit. */
main a:not(.th-btn):hover,
.page-content a:not(.th-btn):hover,
.service-card a:not(.th-btn):hover,
.team-contact a:not(.th-btn):hover,
.widget a:not(.th-btn):hover {
  color: var(--brand-red);
}

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

.main-menu .sub-menu li a:hover {
  color: var(--brand-red);
}

/* --- zones sombres : on éclaircit au lieu de foncer ---
   Même exclusion des boutons, pour la même raison : les boutons du hero et
   du pied de page gardent le blanc que leur donne le thème au survol. */
.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,
[data-bg-src] .th-social a:hover {
  color: #FF6B62;
}

/* --- CORRECTIF DE CONTRASTE -------------------------------------------
   `color: inherit` remontait jusqu'au --body-color global (#666666) au lieu
   du blanc déclaré sur .footer-wrapper : gris foncé sur bleu nuit, soit un
   ratio d'environ 2:1 (AA en demande 4.5:1). On pose la couleur en clair. */
.footer-widget.widget_nav_menu a,
.footer-wrapper .footer-links a,
.footer-wrapper .copyright-text a {
  color: var(--white-color);
}

/* le survol du thème repasse en --theme-color (bleu) : illisible sur le bleu
   nuit. Ces sélecteurs sont plus spécifiques que la règle générique ci-dessus,
   il faut donc les reprendre un à un. */
.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 {
  color: #FF6B62;
}

/* petit tiret de séparation entre les liens légaux */
.footer-wrapper .footer-links li:after {
  background-color: rgba(255, 255, 255, .45);
}

/* pastilles réseaux sociaux : le survol bleu disparaissait sur le fond */
.footer-wrapper .th-social a:hover {
  background-color: var(--brand-red);
  border-color: var(--brand-red);
  color: var(--white-color);
}

/* ==========================================================================
   4. FOND BLANC PRÉSERVÉ
   ========================================================================== */

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

/* les zones "smoke" restent un gris très légèrement bleuté, pas orangé */
:root {
  --smoke-color: #F6F8FC;
  --smoke-color2: #EEF2FA;
}

/* ==========================================================================
   5. ICÔNES ET PICTOS
   --------------------------------------------------------------------------
   Attention : .service-item .box-icon est un disque CLAIR dans le thème
   (#F8EFE9, crème). Les icônes posées dessus sont sombres. On garde donc un
   disque clair — simplement reteinté en bleu — sinon icône bleue sur fond
   bleu = invisible. .choose-feature2 .box-icon suit déjà --theme-color et
   n'a pas besoin d'être surchargé.
   ========================================================================== */

.icon-btn,
.team-contact .icon-btn {
  background-color: var(--brand-blue);
  color: var(--white-color);
  border-color: var(--brand-blue);
}

.team-contact:hover .icon-btn {
  background-color: var(--brand-red);
  border-color: var(--brand-red);
}

/* disque clair sous les icônes de prestation : crème -> bleu très pâle */
.service-item .box-icon {
  background: var(--brand-blue-soft);
  border-color: var(--white-color);
}

/* au survol : teinte rouge pâle, l'icône sombre reste parfaitement lisible */
.service-item:hover .box-icon {
  background: #FBEAEA;
}

/* ==========================================================================
   6. FORMULAIRE
   ========================================================================== */

.form-control:focus,
.form-select:focus {
  border-color: var(--brand-blue-bright);
  box-shadow: 0 0 0 .2rem rgba(30, 75, 168, .15);
}

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

.contact-form-error.alert-danger {
  background-color: #FBEAEA;
  border-color: var(--brand-red);
  color: var(--brand-red-dark);
}

/* ==========================================================================
   7. ACCORDÉON FAQ
   ========================================================================== */

.accordion-button:not(.collapsed) {
  color: var(--brand-blue);
}

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

/* ==========================================================================
   8. DIVERS
   ========================================================================== */

/* --- Bouton "remonter en haut" -------------------------------------------
   Le thème empile trois choses dans un disque de 50 px :
     1. un <svg> de fond blanc qui porte l'anneau de progression de lecture ;
     2. le pseudo-élément ::after, PAR-DESSUS (z-index:1), transparent, qui
        porte la flèche \f062 et le liseré ;
     3. la flèche elle-même, en color: var(--theme-color).
   Poser un background-color sur ::after peint donc un aplat opaque qui
   masque l'anneau ET, la flèche étant de la même couleur de marque, la rend
   invisible : il ne reste qu'un rond bleu uni. Le fond doit rester
   transparent — c'est le <svg> du dessous qui fournit le disque blanc. */

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

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

.year-box,
.widget_banner {
  background-color: var(--brand-blue);
}

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

/* ==========================================================================
   9. CORRECTIFS DE MISE EN PAGE
   ========================================================================== */

/* --- Slider hero : hauteur stable ---------------------------------------
   Le thème active autoHeight, qui recalcule la hauteur du conteneur à chaque
   slide. Les titres ne faisant pas le même nombre de lignes, toute la page
   se décalait verticalement à chaque rotation (jusqu'à ~200 px de saut).
   autoHeight est désactivé côté template ; ici on fait en sorte que chaque
   slide occupe toute la hauteur du conteneur, sinon l'image de fond des
   slides les plus courtes laisse une bande vide en bas. */

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

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

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

/* ==========================================================================
   10. EN-TÊTE ET PIED DE PAGE — MISE EN PAGE
   ========================================================================== */

/* --- Logo -----------------------------------------------------------------
   Le thème est dessiné pour un logotype large et couché. Celui du client est
   quasiment carré (1468x1372) : le `width:50px;height:50px` posé en ligne le
   déformait légèrement et le rendait minuscule. On contraint la hauteur et on
   laisse la largeur suivre le ratio. */

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

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

/* L'accueil (header-layout5) et le menu mobile gardent un logo de 50 px de
   haut. On ne fixe QUE la hauteur : le logo du client est presque carré mais
   pas tout à fait (1468x1372, ratio 1,07), et le forcer en 50x50 l'écrasait
   — c'est ce que relevait l'audit "Images affichées dans un format incorrect"
   des bonnes pratiques Lighthouse. */
.header-layout5 .header-logo img,
.th-menu-wrapper .mobile-logo img {
  height: 50px;
  width: auto;
}

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

/* --- En-tête des pages intérieures (header-layout1) ------------------------
   La barre blanche flottante est posée par le thème ; on lui redonne juste
   un peu d'air vertical, le logo étant plus haut que le logotype d'origine. */

.header-layout1 .menu-area {
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Le thème pose deux petits triangles bleu nuit de part et d'autre de la barre
   blanche : ils servent à la raccorder au fond gris de la démo Rakar
   (body #E1E4E5). Notre fond de page est blanc, ils n'ont plus rien à
   raccorder et flottent comme deux chevrons parasites. On les retire. */

.header-layout1 .menu-area:before,
.header-layout1 .menu-area:after {
  display: none;
}

/* --- Pied de page ---------------------------------------------------------
   La carte blanche de contact est collée au contenu de la page ; on écarte
   les trois blocs pour éviter qu'ils ne se touchent sur écran moyen. */

.footer-contact-area .footer-contact-wrap {
  gap: 24px;
}

.footer-contact .box-text {
  max-width: 260px;
}

/* "Nos prestations" compte dix entrées : sur une seule colonne le pied de page
   devenait deux fois plus haut que les autres blocs. On le coupe en deux
   listes côte à côte à partir de lg. */

.footer-widget .menu-all-pages-container.row {
  --bs-gutter-x: 16px;
}

/* Le thème pose margin-top:-5px ET margin-bottom:-5px sur ces listes (un
   rattrapage d'interligne). Sur deux sous-listes empilées, le -5px du bas
   remonte la seconde de 5 px : ses liens chevauchent le dernier de la
   première, ce que l'audit target-size signale comme une cible "partially
   obscured". On neutralise les deux marges et on rétablit un écart réel. */
.footer-widget .menu-all-pages-container.row > .menu {
  margin-top: 0;
  margin-bottom: 0;
}

.footer-widget .menu-all-pages-container.row .menu li:last-child a {
  margin-bottom: 10px;
}

/* Medium devices */
@media (max-width: 991px) {
  .footer-widget .menu-all-pages-container.row > .menu {
    width: 100%;
  }
}

/* Bloc horaires / zone d'intervention */
.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 .footer-text {
  margin-top: 0;
  margin-bottom: 22px;
}

/* ==========================================================================
   11. ICÔNES DES CARTES PRESTATION
   --------------------------------------------------------------------------
   Le thème Rakar est un template de dépannage électroménager : ses SVG de
   prestation représentent un téléviseur, une ampoule, une prise, un robinet…
   Six des dix métiers du client se retrouvaient avec une icône sans rapport
   (une ampoule pour « Ferronnerie », un robinet pour « Débarras de Maison »).

   On les remplace par des glyphes Font Awesome 6 Pro Light, déjà chargés par
   le site, qui couvrent précisément les dix métiers. Le poids « light » (300)
   retrouve le trait fin des SVG d'origine. Ces règles redonnent au <i> la
   taille, la couleur et l'animation de survol qu'avait le <img>.
   ========================================================================== */

.service-card .box-icon i,
.service-item .box-icon i,
.service-grid .box-icon i {
  color: var(--brand-blue);
  line-height: 1;
  display: inline-block;
  transition: 0.4s ease-in-out;
}

/* cartes de la page "Nos prestations" : icône libre, calée sur la taille
   native des SVG remplacés (32 à 40 px) */
.service-card .box-icon i,
.service-grid .box-icon i {
  font-size: 38px;
}

/* cartes de l'accueil : icône centrée dans la pastille de 72 px */
.service-item .box-icon i {
  font-size: 34px;
  line-height: 72px;
}

/* le thème retourne l'icône au survol de la carte ; on conserve le geste */
.service-card:hover .box-icon i,
.service-item:hover .box-icon i,
.service-grid:hover .box-icon i {
  transform: rotateY(180deg);
}

/* ==========================================================================
   12. HAUTEUR DES CARTES PRESTATION
   --------------------------------------------------------------------------
   .service-card n'a pas de hauteur : chaque carte s'arrête à la fin de son
   texte. Les descriptions faisant de trois à cinq lignes et les titres une ou
   deux, les blocs d'une même ligne se terminaient à des hauteurs différentes
   et les boutons "En savoir plus" flottaient à des niveaux différents.

   Les colonnes Bootstrap sont déjà étirées par le flex de .row : il suffit
   que la carte remplisse sa colonne, puis que l'espace libre soit absorbé
   sous la description pour que le bouton se cale en bas.
   ========================================================================== */

.service-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* l'espace restant se place sous la description, pas entre le titre et elle */
.service-card .box-text {
  margin-bottom: auto;
}

/* sans cela le bouton, devenu élément flex, s'étirerait sur toute la largeur.
   Il conserve son margin-top de 32 px : l'écart minimum reste garanti même
   quand la carte est la plus haute de sa ligne et qu'il n'y a aucun surplus. */
.service-card .th-btn {
  align-self: flex-start;
}

/* Le carrousel de l'accueil souffre du même écart, à une échelle bien moindre
   (6 px, dû aux titres qui passent parfois sur deux lignes). Les slides Swiper
   sont déjà étirées à la plus haute : il suffit que la carte remplisse la
   sienne. On s'en tient à height, sans passer .service-item en flex : sa
   pastille d'icône chevauche la photo par une marge négative
   (.box-icon { margin: -75px 0 0 0 }) et ce calage n'a pas à être touché. */

.service-item {
  height: 100%;
}

/* ==========================================================================
   13. CORRECTIFS D'ACCESSIBILITÉ (audit Lighthouse)
   ========================================================================== */

/* --- Contraste du bloc "Ans d'expérience" --------------------------------
   Le thème y laisse son orange d'origine (#F47629) sur un crème (#F8EFE9) :
   2,47:1 mesuré, alors que WCAG AA demande 3:1 pour du grand texte. Ces deux
   couleurs sont des restes du thème, jamais reprises par la charte — la règle
   `.year-box { background-color }` de la section 8 ne les atteignait pas,
   étant moins spécifique que `.img-box7 .year-box`. On repasse le bloc sur le
   bleu pâle déjà utilisé ailleurs et le nombre sur le bleu de marque : 11,5:1. */

.img-box6 .year-box,
.img-box7 .year-box {
  background: var(--brand-blue-soft);
}

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

/* --- Taille des zones tactiles du pied de page ----------------------------
   Les liens des listes "Liens utiles" et "Nos prestations" ne font que 21 px
   de haut, pour un minimum recommandé de 24 px. On les épaissit de 3 px en
   haut et en bas et on reprend la marge pour ne pas rallonger le pied de page
   (21+6+10 = 37 px, exactement le rythme vertical d'avant). */

.footer-widget.widget_nav_menu a {
  padding-top: 3px;
  padding-bottom: 3px;
  margin-bottom: 10px;
}

/* le chevron est positionné en absolu sur le lien : il suit le décalage */
.footer-widget.widget_nav_menu a:before {
  top: 5px;
}

/* --- Repère principal -----------------------------------------------------
   <main> vient d'être ajouté au gabarit. La règle de survol rouge de la
   section 3 ciblait déjà `main a`, restée sans effet jusqu'ici faute de
   <main> dans le document : elle devient active, ce qui est bien l'intention
   d'origine (liens de texte du corps de page en rouge au survol, boutons
   exclus par le :not(.th-btn)). */

main {
  display: block;
}