/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.3.0.1750876712
Updated: 2025-06-25 18:38:32

*/

selector{hyphens: auto;}
.seo-keyword {
  background:#D70F1F;
  padding: 1px 10px;
  font-weight: 500;
  border:solid 1px #D70F1F ;
  border-radius: 500px;
}
ul.seo-list {
  margin-left: 1.2em;
  list-style: square  outside;
  color: 
}
ul.seo-list li {
  margin-bottom: 0.5em;
}
ul.seo-list li::marker {
  color: #D70F1F;    /* couleur de la puce */
  font-size: 1.2em;  /* optionnel : taille de la puce */
}
.Nav-offCanvas .has-submenu{ font-size: 1.3em;text-transform:uppercase!important;}
.Nav-offCanvas a.elementor-item-active{ font-weight:700}
.Nav-offCanvas .elementor-nav-menu--dropdown .elementor-item:focus, .elementor-nav-menu--dropdown .elementor-item:hover{color: var(--e-global-color-primary)!important;background-color:#ffffff !important;font-weight:700 !important}
.Nav-offCanvas .elementor-sub-item:focus{color: var(--e-global-color-primary)!important;background-color:#ffffff !important;font-weight:700 !important;text-transform:none!important;}
.Nav-offCanvas .elementor-sub-item{text-transform:none!important;}

.hover-block__title,
.hover-block__title * {
  text-transform: lowercase !important;
}

/* 2) La première lettre de chaque élément de bloc reste en majuscule */
.hover-block__title::first-letter,
.hover-block__title *::first-letter {
  text-transform: uppercase !important;
}
/* Fond rouge sur le bloc au hover */
.hover-block:hover {
  background-color: #e30613 !important;

}

/* Texte et liens en blanc */
.hover-block:hover .hover-block__title,
.hover-block:hover .hover-block__title a,
.hover-block:hover .elementor-post-info__item,
.hover-block:hover .elementor-post-info__item a {
  color: #fff !important;
}

/* Icône flèche en blanc */
.hover-block:hover .hover-block__icon i {
  color: #fff !important;
}

/* Badge custom, inversion des couleurs */
.hover-block:hover .badge {
  background: #fff !important;
  color: #e30613 !important;
}

/* Transition lisse pour l’icône */
.hover-block__icon {
  transition: transform 0.3s ease;
}

/* Décalage de l’icône vers la droite au hover du bloc */
.hover-block:hover .hover-block__icon {
  transform: translateX(10px);
}

@media (max-width: 600px) {
  /* cible très spécifique */
  .wpcf7-form-control-wrap[data-name="photo"] .wpcf7-form-control.wpcf7-file {
    width: 100%;
    font-size: 0 !important;         /* masque le texte système */
    color: transparent !important;    /* iOS/Safari : masque le texte éventuel */
    line-height: 0 !important;
  }

  /* garder le libellé du bouton visible */
  .wpcf7-form-control-wrap[data-name="photo"] .wpcf7-form-control.wpcf7-file::file-selector-button,
  .wpcf7-form-control-wrap[data-name="photo"] .wpcf7-form-control.wpcf7-file::-webkit-file-upload-button {
    font-size: 16px !important;
    line-height: 1.2 !important;
  }
}
/* Masquer l'UI native et afficher un faux bouton + un texte d'état */
@media (max-width: 600px) {
  .upload-group .wpcf7-form-control-wrap[data-name="photo"] {
    position: relative;
    display: block;
  }

  /* L'input couvre la zone mais est invisible (cliquable) */
  .upload-group .wpcf7-form-control-wrap[data-name="photo"] input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 48px;
    opacity: 0;
    cursor: pointer;
  }

  /* Faux bouton visible */
  .upload-group .wpcf7-form-control-wrap[data-name="photo"]::before {
    content: "Joindre une photo"; /* change ce texte si besoin */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #000000;
    font-size: 16px;
  }

  /* Texte sous le bouton — par défaut */
  .upload-group .wpcf7-form-control-wrap[data-name="photo"]::after {
    content: "Aucun fichier choisi";
    display: block;
    margin-top: 6px;
    font-size: 14px;
    color: #666;
    word-break: break-word;
  }
 .upload-group .wpcf7-form-control-wrap[data-name="photo"]::after {
    content: "aucun fichier sélectionné";
    display: block;
    margin-top: 6px;
    font-size: 11px !important;
    color: #666;
    word-break: break-word !important;
  }
  /* Quand on a un fichier, on remplace par l'attribut data-file (mis à jour en JS) */
  .upload-group .wpcf7-form-control-wrap[data-name="photo"][data-file]::after {
    content: attr(data-file);
  }
}
/* Slider horizontal sur mobile pour .grid-slider-mobile */
@media (max-width: 767px) {
  /* Le conteneur parent devient un carrousel défilable */
  .grid-slider-mobile.e-parent {
    display: flex !important;          /* override éventuel de .e-grid */
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory !important;
    scroll-padding-left: 16px !important;         /* aligne la 1re slide avec le padding */
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain;
  }

  /* Chaque enfant = 1 slide */
  .grid-slider-mobile.e-parent > .e-con.e-child {
    flex: 0 0 50% !important;                      /* largeur d’une slide (80% de l’écran) */
    max-width: 50% !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    min-width: 0;                       /* évite les débordements internes */
  }

  /* Option : pleine largeur (1 slide par écran) 
  .grid-slider-mobile.e-parent > .e-con.e-child {
    flex-basis: 100%;
    max-width: 100%;
  }*/

  /* Mise en page interne propre */
  .grid-slider-mobile .e-con-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;
    gap: 8px;
  }

  /* Images fluides */
  .grid-slider-mobile .elementor-widget-image img {
    width: 100%;
    height: auto;
  }

  /* Masquer la barre de scroll (iOS/Chrome) */
  .grid-slider-mobile::-webkit-scrollbar { display: none; }
}

/* Slider horizontal sur mobile pour Footer Adresse Garage .grid-slider-mobile */
/* Slider horizontal pour le container #c762eac (mobile) */
@media (max-width: 767px) {
  /* --- CAS A : le parent est le scroller --- */
  .elementor-element[data-id="c762eac"].e-parent {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .elementor-element[data-id="c762eac"].e-parent > .e-con.e-child {
    flex: 0 0 100%;
    max-width: 100%;
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* --- CAS B : le scroller est le wrapper .e-grid --- */
  .elementor-element[data-id="c762eac"].e-parent > .e-grid.e-child {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .elementor-element[data-id="c762eac"].e-parent > .e-grid.e-child > .e-con.e-child {
    flex: 0 0 100%;
    max-width: 100%;
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* Mise en page interne propre */
  .elementor-element[data-id="c762eac"] .e-con.e-child .elementor-widget-text-editor,
  .elementor-element[data-id="c762eac"] .e-con.e-child .elementor-widget-button {
    text-align: center;
  }
  .elementor-element[data-id="c762eac"] .elementor-button {
    width: 100%;                 /* bouton téléphone pleine largeur */
  }

  /* Masquer la barre de scroll sur iOS/Chrome */
  .elementor-element[data-id="c762eac"]::-webkit-scrollbar { display: none; }
}

/* Slider horizontal pour le Loop Grid (mobile) */
@media (max-width: 767px) {
  /* Le parent ne doit pas couper le débordement du scroller */
  .elementor-element[data-id="0ce2b80"] { 
    overflow: visible !important; 
  }

  /* Le wrapper du Loop Grid devient un scroller horizontal */
  .elementor-element[data-id="702cf39"] .elementor-loop-container.elementor-grid {
    display: flex !important;           /* remplace la grille par flex */
    flex-wrap: nowrap !important;
    overflow-x: auto;                    /* défilement horizontal */
    scroll-snap-type: x mandatory;       /* snap au début de chaque slide */
    scroll-padding-left: 16px;           /* aligne 1re slide avec le padding */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  /* Chaque item de la boucle = 1 slide */
  .elementor-element[data-id="702cf39"] .elementor-loop-container > .e-loop-item {
    flex: 0 0 100%;                       /* largeur d’une slide (peek) */
    max-width: 100%;
    min-width: 0;                        /* évite les débordements internes */
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* Mise en page interne propre (cartes haut=100%) */
  .elementor-element[data-id="702cf39"] .e-loop-item .e-parent { 
    height: 100%; 
  }


  /* Masquer la barre de scroll */
  .elementor-element[data-id="702cf39"] .elementor-loop-container.elementor-grid::-webkit-scrollbar {
    display: none;
  }
}
/* Bouton Contact Form 7 – style moderne (rouge Labonne) */
.button-wrapper .btn-contact{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  font-weight:600;
  font-size:1rem;
  letter-spacing:.01em;
  color:#fff;
  text-align:center;
  white-space:nowrap;
  user-select:none;
  background:#d70f1f;
  border:1px solid #c40e1d;
  padding:.75rem 1.25rem;
  border-radius:.5rem;
  line-height:1;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease,transform .05s ease,box-shadow .2s ease,opacity .2s ease;
  box-shadow:0 6px 14px rgba(215,15,31,.18);
}

.button-wrapper .btn-contact:hover:not([disabled]){
  background:#b90d1a;
  border-color:#a70c17;
  box-shadow:0 10px 18px rgba(215,15,31,.25);
}

.button-wrapper .btn-contact:active:not([disabled]){
  transform:translateY(1px);
  box-shadow:0 4px 10px rgba(215,15,31,.2);
}

.button-wrapper .btn-contact:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(215,15,31,.25),0 6px 14px rgba(215,15,31,.18);
}

/* État désactivé (CF7 désactive le bouton pendant la soumission) */
.button-wrapper .btn-contact[disabled],
.wpcf7-form.submitting .button-wrapper .btn-contact{
  opacity:.6;
  cursor:not-allowed;
  box-shadow:none;
}

/* Spinner CF7 harmonisé et aligné au bouton */
.button-wrapper .wpcf7-spinner{
  width:18px;
  height:18px;
  margin-left:.5rem;
  border:2px solid rgba(215,15,31,.25);
  border-top-color:#d70f1f;
  border-right-color:#d70f1f;
  border-radius:50%;
  display:inline-block;
  visibility:hidden;
  opacity:0;
  transition:opacity .2s ease,visibility .2s ease;
}

.wpcf7-form.submitting .button-wrapper .wpcf7-spinner{
  visibility:visible;
  opacity:1;
  animation:btnspin .9s linear infinite;
}

/* Pleine largeur sur mobile (optionnel) */
@media (max-width:640px){
  .button-wrapper .btn-contact{ width:100%; }
}

@keyframes btnspin{ to{ transform:rotate(360deg); } }