/**
 * CSS CONSOLIDÉ pour la section Hero Levrard
 * Fonctionne sur le front-end ET dans l'éditeur Gutenberg
 */

/* Variables pour les couleurs Levrard */
:root {
  --levrard-red:       #E73331;
  --levrard-dark-red:  #E73331;
  --levrard-white:     #ffffff;
  --levrard-gray:      #f5f5f5;
  --levrard-dark-gray: #333333;
  --levrard-text:      #363636;
  --levrard-border:    #e1e5e9;
}

.levrard-hero-section {
  box-sizing:          border-box;
  position:            relative;
  height:              70vh;
  /* max-height: 80vh; */
  background-position: center;
  background-size:     cover;
  background-repeat:   no-repeat;
  display:             flex;
  align-items:         flex-end;
  margin:              0;
  padding:             0;
  border-radius:       30px;
  overflow:            visible;
  /* box-shadow: inset 0 0 0 2000px rgb(0 0 0 / 11%); */
}

.levrard-hero-section * {
  box-sizing: border-box;
}

.levrard-hero-content {
  position:  relative;
  z-index:   2;
  color:     white;
  width:     100%;
  max-width: 1400px;
  margin:    0 auto;
  padding:   30px 70px 20px;
}

/**
 * Badge évaluation Google
 */
.rating-badge {
  display:          inline-flex;
  align-items:      center;
  background-color: white;
  padding:          10px;
  border-radius:    20px;
  box-shadow:       0 2px 5px rgba(0, 0, 0, 0.1);
  width:            20%;
}

.google-icon {
  width:        30px;
  height:       30px;
  margin-right: 5px;
}

.rating-stars {
  color:        #FFC107;
  font-size:    14px;
  margin-right: 5px;
}

.rating-count {
  font-size: 16px;
  color:     var(--levrard-text);
}


.rating-count-not {
  font-size:   16px;
  font-weight: 500;
  color:       var(--levrard-text);
}

.rating-count-not .first-not {
  font-size:   18px;
  font-weight: 700;
  color:       var(--levrard-text);
}

/**
 * Titre principal
 */
.levrard-hero-title-content {
  padding-top:    30px;
  padding-bottom: 30px;
  padding-left:   210px;
  margin-bottom:  5%;
}


.levrard-hero-title {
  font-size:      60px;
  font-weight:    900;
  text-transform: uppercase;
  line-height:    1;
  display:        flex;
  flex-direction: column;
  color:          var(--levrard-white);
  margin:         30px 0 40px 20px;
}

.levrard-hero-title .line-1,
.levrard-hero-title .line-2 {
  display:     block;
  text-shadow: 0px 0px 20px rgba(65, 48, 48, 0.50);

}

.levrard-hero-title .line-1 {
  font-weight: 800;
  font-size:   136px;
}

.levrard-hero-title .line-2 {
  font-weight: 700;
  font-size:   90px;
}

/**
 * Barre rouge et boutons
 */
.levrard-hero-buttons {
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  background-color: var(--levrard-red);
  padding:          20px 30px;
  border-radius:    30px;
  box-shadow:       0 4px 10px rgba(0, 0, 0, 0.1);
  z-index:          5;
}

.hero-display-element--bar {display: flex;align-items: center;width: 100%;}

/* Flèche pointant vers le bas */
.levrard-hero-buttons::after {
  content:      '';
  position:     absolute;
  bottom:       -15px;
  left:         50%;
  transform:    translateX(-50%);
  width:        0;
  height:       0;
  border-left:  15px solid transparent;
  border-right: 15px solid transparent;
  border-top:   15px solid var(--levrard-red);
  z-index:      4;
}

/* Sous-titre dans la barre rouge */
.levrard-hero-subtitle {
  font-size:    48px;
  font-weight:  bolder;
  margin:       0;
  line-height:  1.3;
  margin-right: auto;
  color:        var(--levrard-white);
  /* max-width: 50%; */
}
/* ---------------------------- */
@media (max-width:135em) {
  .levrard-hero-subtitle {font-size: 40px;}
}
@media (max-width:120em) {
  .levrard-hero-subtitle {font-size: 38px;}
}
@media (max-width:105em) {
  .levrard-hero-subtitle {font-size: 30px;}
}
@media (max-width:90em) {
  .levrard-hero-subtitle {font-size: 24px;}
}
/* ---------------------------- */

.levrard-buttons-container {
  display:     flex;
  align-items: center;
  gap:         15px;
}

/* Styles des boutons */
.levrard-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  padding:         9px 25px;
  border-radius:   4px;
  font-weight:     bold;
  text-decoration: none;
  font-size:       16px;
  transition:      all 0.3s ease;
  margin-left:     15px;
  text-transform:  inherit;
}

.levrard-btn i {
  margin-left: 8px;
  font-size:   12px;
}

.levrard-btn-outline {
  background-color: #333;
  color:            white;
  border:           none;
}

.levrard-btn-outline:hover {
  background-color: #222;
}

.levrard-btn-primary {
  background-color: white;
  border:           2px solid white;
  color:            #E73331;
}

.levrard-btn-primary:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.levrard-hero-content .rating-badge .rating-stars i {
  color:     #e73332;
  font-size: 14px;
}

/**
 * Bloc de texte en bas du hero
 */
.levrard-hero-bottom-text {
  position:            relative;
  text-align:          center;
  z-index:             1;
  padding:             3% 0 0 0;
  background-image:    url('https://www.levrard-debouchage.fr/wp-content/uploads/2025/05/Bulles.svg');
  background-repeat:   no-repeat;
  background-position: 0px 100%;
  background-size:     cover;
  margin-left:         -20px;
  margin-right:        -20px;
}

.levrard-hero-bottom-text::after {
  content:          '';
  display:          block;
  width:            165px;
  height:           3px;
  background-color: red;
  margin:           20px auto 0;
  border-radius:    2px;
}

.levrard-hero-bottom-content {
  padding: 15px 20px;
}

.levrard-hero-bottom-content p {
  margin:      0;
  font-size:   24px;
  line-height: 1.4;
  color:       var(--levrard-text);
  font-style:  italic;
  padding:     2.7% 0 0 0;
}

.levrard-hero-bottom-content strong {
  color:       #2a2a2a;
  font-weight: 700;
}

.levrard-hero-bottom-content em {
  font-style: italic;
  color:      var(--levrard-dark-gray);
}

.levrard-hero-bottom-content a {
  color:           var(--levrard-red);
  text-decoration: none;
  font-weight:     600;
}

.levrard-hero-bottom-content a:hover {
  text-decoration: underline;
}

/* ========== BADGE GOOGLE DESKTOP UNIQUEMENT ========== */
@media screen and (min-width: 50em) {

  /* Nouveau style du badge en desktop */
  .rating-badge {
    background-color: var(--levrard-white) !important;
    border:           1px solid var(--levrard-border) !important;
    border-radius:    35px !important;
    padding:          10px 20px !important;
    display:          flex !important;
    align-items:      center !important;
    gap:              5px !important;
    box-shadow:       0 2px 10px rgba(0, 0, 0, 0.05) !important;
    width:            auto !important;
    min-width:        auto !important;
  }

  /* Masquer les éléments mobiles en desktop */
  .hero-cta-element,
  .hero-bubble-element,
  .hero-image-element {
    display: none !important;
  }
}

/**
 * RESPONSIVE MOBILE (d'après votre visuel)
 */

/* Tablettes et écrans moyens */
@media screen and (max-width: 1200px) {
  .levrard-hero-content {
    padding: 30px 40px 20px;
  }

  .rating-badge {
    width: 25%;
  }
}

@media screen and (max-width: 992px) {
  .levrard-hero-section {
    height:        500px;
    border-radius: 10px;
  }

  .levrard-hero-content {
    padding: 30px 30px 20px;
  }

  .levrard-hero-title {
    font-size:     40px;
    margin-bottom: 20px;
  }

  .levrard-hero-title .line-1 {
    font-size: 55px;
  }

  .levrard-btn {
    margin-left:     0;
    flex:            1;
    justify-content: center;
    text-align:      center;
    padding:         8px 20px;
  }

  .rating-badge {
    width:   30%;
    padding: 8px;
  }
}

/* MOBILE - d'après votre design */
@media screen and (max-width: 50em) {
  main#primary {
    padding: 0 8px;
  }

  .levrard-hero-section {
    height:        auto;
    min-height:    400px;
    border-radius: 8px;
    margin-bottom: 20px;
  }

  .levrard-hero-content {
    padding:     20px 15px 15px;
    align-items: flex-start;
  }

  .rating-badge {
    position:      static; /* Plus en position absolue */
    width:         auto;
    min-width:     150px;
    margin-bottom: 15px;
    padding:       6px 8px;
    font-size:     12px;
  }

  .rating-count-not,
  .rating-count {
    font-size: 10px;
  }

  .rating-stars {
    font-size: 12px;
  }

  .levrard-hero-title {
    font-size:      28px;
    margin-bottom:  15px;
    text-align:     left;
    font-weight:    700;
    text-transform: inherit;
  }

  .levrard-hero-title .line-1 {
    font-size: 32px;
  }

  .levrard-hero-title .line-2 {
    font-size: 28px;
  }

  /* Barre rouge redesignée pour mobile */
  .levrard-hero-buttons {
    position:       static; /* Plus en position absolue */
    width:          100%;
    max-width:      none;
    margin-top:     15px;
    border-radius:  8px;
    padding:        12px 15px;
    transform:      none;
    left:           auto;
    bottom:         auto;
    flex-direction: column;
    align-items:    stretch;
  }

  /* Pas de flèche sur mobile */
  .levrard-hero-buttons::after {
    display: none;
  }

  .levrard-hero-subtitle {
    font-size:     16px;
    margin-bottom: 12px;
    max-width:     100%;
    text-align:    center;
  }

  .levrard-buttons-container {
    flex-direction: column;
    gap:            8px;
  }

  .levrard-btn {
    width:         100%;
    padding:       10px 15px;
    font-size:     14px;
    margin-left:   0;
    margin-top:    0;
    border-radius: 6px;
  }

  /* Ajustement du bloc de texte en bas */
  .levrard-hero-bottom-text {
    margin-left:         -8px;
    margin-right:        -8px;
    padding:             20px 0;
    background-position: center 100%;
    background-size:     contain;
  }

  .levrard-hero-bottom-content p {
    font-size: 16px;
    padding:   15px 15px 0;
  }

  .levrard-hero-bottom-text::after {
    width:      120px;
    height:     2px;
    margin-top: 15px;
  }
}

/* Très petits mobiles */
@media screen and (max-width: 576px) {
  .levrard-hero-section {
    min-height:    350px;
    border-radius: 6px;
  }

  .levrard-hero-content {
    padding: 15px 12px;
  }

  .levrard-hero-title {
    font-size: 24px;
  }

  .levrard-hero-title .line-1 {
    font-size: 28px;
  }

  .levrard-hero-title .line-2 {
    font-size: 24px;
  }

  .levrard-hero-subtitle {
    font-size: 14px;
  }

  .levrard-hero-buttons {
    padding: 10px 12px;
  }

  .levrard-btn {
    padding:   8px 12px;
    font-size: 13px;
  }

  .levrard-hero-bottom-content p {
    font-size: 14px;
    padding:   12px 12px 0;
  }

  .rating-badge {
    min-width: 130px;
    padding:   5px 6px;
  }
}

/**
 * STYLES SPÉCIFIQUES À L'ÉDITEUR GUTENBERG
 * (Seulement les ajustements nécessaires)
 */

/* Améliorer la sélectabilité dans l'éditeur */
/* .block-editor-block-list__block .levrard-hero-section * {
    position: relative;
    z-index: 5;
} */

/* Forcer certains styles si Gutenberg les écrase */
.block-editor-block-list__block .levrard-hero-title {
  font-size:     50px !important;
  font-weight:   900 !important;
  line-height:   1 !important;
  margin-bottom: 12%;
}

.block-editor-block-list__block .rating-badge {
  width: 32%;
}


.block-editor-block-list__block .levrard-hero-title .line-1 {
  font-size:   70px !important;
  font-weight: 700 !important;
}

.block-editor-block-list__block .levrard-hero-title .line-2 {
  font-weight: 700 !important;
}

.block-editor-block-list__block .levrard-hero-buttons {
  background-color: var(--levrard-red) !important;
}

.block-editor-block-list__block .levrard-hero-subtitle {
  color:       white !important;
  font-weight: bolder !important;
}

/* Structure de base pour l'éditeur */
.block-editor-block-list__block .levrard-hero-section {
  border:   1px dashed rgba(255, 255, 255, 0.3);
  overflow: visible;
}

/* Styles pour la prévisualisation */
.levrard-hero-preview {
  height:           400px;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  background-color: #f5f5f5;
  border:           1px dashed #ddd;
  text-align:       center;
  padding:          20px;
}

.levrard-hero-preview img {
  max-width:  100%;
  max-height: 350px;
  object-fit: cover;
}

/* Responsive pour l'éditeur */
@media (max-width: 992px) {
  .block-editor-block-list__block .levrard-hero-buttons {
    flex-direction: column;
    align-items:    flex-start;
  }

  .block-editor-block-list__block .levrard-hero-subtitle {
    margin-bottom: 15px;
    max-width:     100%;
  }

  .block-editor-block-list__block .levrard-buttons-container {
    width: 100%;
  }
}

@media (max-width: 50em) {
  .block-editor-block-list__block .levrard-buttons-container {
    flex-direction: column;
  }

  .block-editor-block-list__block .levrard-btn {
    width:      100%;
    margin-top: 10px;
  }
}

/**
 * AJUSTEMENTS MINIMAUX pour l'éditeur Gutenberg
 * Ce fichier ne contient QUE les corrections spécifiques à l'éditeur
 * Le CSS principal est dans levrard-hero.css
 */

/* Améliorer la visibilité des blocs dans l'éditeur */
.block-editor-block-list__block[data-type="acf/levrard-hero"] {
  margin-bottom: 60px; /* Espace pour la flèche qui dépasse */
}

/* Bordure pour identifier le bloc dans l'éditeur */
.block-editor-block-list__block .levrard-hero-section {
  border: 2px dashed rgba(233, 57, 52, 0.3) !important;
}

/* Assurer que les variables CSS sont disponibles dans l'éditeur */
.block-editor-block-list__block {
  --levrard-red:       #E73331;
  --levrard-dark-red:  #E73331;
  --levrard-white:     #ffffff;
  --levrard-gray:      #f5f5f5;
  --levrard-dark-gray: #333333;
  --levrard-text:      #363636;
}

/* ========== FIX DÉBORDEMENT ET MARGE HERO MOBILE ========== */

/* Reset global pour éviter le débordement */
@media screen and (max-width: 50em) {
  .levrard-hero-bottom-content strong {
    color: var(--levrard-white) !important;
  }

  .levrard-hero-bottom-content em {
    color: var(--levrard-white) !important;
  }

  /* Assurer qu'il n'y a pas de scroll horizontal */
  html, body {
    overflow-x: hidden !important;
    max-width:  100vw !important;
    position:   relative !important;
  }

  /* Supprimer les marges du conteneur principal */
  main#primary {
    padding:  88px 0 0 0 !important;
  }

  /* Container parent du hero */
  .wp-block-group,
  .entry-content {
    padding:    0 !important;
    margin:     0 !important;
    width:      100% !important;
    overflow-x: hidden !important;
  }

  /* VERSION MODIFIÉE avec opacité sur l'image */
  .levrard-hero-section {
    background:     var(--levrard-red) !important;
    position:       relative !important;
    height:         auto !important;
    border-radius:  0 !important;

    /* NOUVELLE APPROCHE pour le full-width */
    margin:         0 !important;
    padding:        0 15px 20px 15px !important;
    width:          100% !important;
    box-sizing:     border-box !important;

    display:        flex !important;
    flex-direction: column !important;
    overflow:       visible !important;

    /* Assurer qu'on ne déborde pas */
    max-width:      100vw !important;
    min-width:      0 !important;
  }

  /* Image avec opacité sur pseudo-élément */
  /*.levrard-hero-section::before {*/
  /*  content:             "" !important;*/
  /*  position:            absolute !important;*/
  /*  top:                 0 !important;*/
  /*  left:                0 !important;*/
  /*  right:               0 !important;*/
  /*  bottom:              0 !important;*/
  /*  background-image:    url('https://www.levrard-debouchage.fr/wp-content/uploads/2025/06/Group.svg') !important;*/
  /*  background-position: top center !important;*/
  /*  background-size:     contain !important;*/
  /*  background-repeat:   no-repeat !important;*/
  /*  opacity:             0.3 !important; !* Ajuste cette valeur : 0.1 = très transparent, 0.8 = très visible *!*/
  /*  z-index:             1 !important;*/
  /*  pointer-events:      none !important;*/
  /*}*/

  /* Le contenu passe au-dessus de l'image */
  .hero-element {
    position: relative !important;
    z-index:  2 !important;
  }

  /* Si le hero est dans un container avec padding */
  .levrard-hero-section {
    /* Compenser le padding du parent seulement si nécessaire */
    margin-left:  calc(-1 * var(--container-padding, 15px)) !important;
    margin-right: calc(-1 * var(--container-padding, 15px)) !important;
    width:        calc(100% + 2 * var(--container-padding, 15px)) !important;
  }

  /* Container pour centrer le contenu */
  .hero-element {
    width:           95% !important;
    position:        static !important;
    margin:          0 auto 15px auto !important;
    padding:         0 !important;
    display:         flex !important;
    justify-content: flex-start !important;
    align-items:     center !important;
    box-sizing:      border-box !important;
    max-width:       400px !important;
  }

  /* ORDRE DES ÉLÉMENTS */
  .hero-title-element { order: 1 !important; }

  .hero-rating-element { order: 2 !important; }

  .hero-cta-element { order: 3 !important; }

  .hero-bubble-element { order: 4 !important; }

  .hero-bottom-element { order: 5 !important; }

  .hero-buttons-element { order: 6 !important; }

  .hero-image-element { order: 7 !important; }

  /* 1. TITRE */
  .hero-title-element {
    margin-bottom: 10px !important;
    max-width:     none !important;
  }

  .levrard-hero-title {
    font-size:   32px !important;
    font-weight: 800 !important;
    color:       white !important;
    text-align:  left !important;
    margin:      0 !important;
    line-height: 1.1 !important;
    width:       100% !important;
    margin-left: 5% !important;
  }

  .levrard-hero-title .line-1,
  .levrard-hero-title .line-2 {
    font-size:   36px !important;
    font-weight: 600 !important;
  }

  /* 2. AVIS GOOGLE */
  .hero-rating-element {
    margin-bottom: 15px !important;
  }

  .rating-badge {
    background:    white !important;
    padding:       8px 12px !important;
    border-radius: 25px !important;
    display:       inline-flex !important;
    align-items:   center !important;
    box-shadow:    0 2px 8px rgba(0, 0, 0, 0.15) !important;
    margin:        0 auto !important;
  }

  /* 3. CTA NOUS APPELER */
  .hero-cta-element {
    margin-bottom: 20px !important;
    max-width:     350px !important;
  }

  .hero-mobile-cta {
    background:      #333 !important;
    color:           white !important;
    padding:         15px 25px !important;
    border-radius:   15px !important;
    text-decoration: none !important;
    font-weight:     600 !important;
    font-size:       18px !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    gap:             10px !important;
    transition:      all 0.3s ease !important;
    width:           100% !important;
    box-sizing:      border-box !important;
  }

  .hero-mobile-cta:hover {
    background: #222 !important;
    color:      white !important;
  }

  /* 4. BULLE COMMENTAIRE */
  .hero-bubble-element {
    margin: 0 20px 20px !important;
    max-width:calc(100% - 40px);
  }

  .hero-mobile-bubble {
    background:    white !important;
    color:         var(--levrard-red) !important;
    border-radius: 25px !important;
    font-size:     22px !important;
    font-weight:   700 !important;
    text-align:    center !important;
    box-shadow:    0 4px 15px rgba(0, 0, 0, 0.1) !important;
    position:      relative !important;
    width:         100% !important;
    line-height:   1.3 !important;
    margin:        0 auto !important;
    padding:15px 20px !important;
  }

  .hero-mobile-bubble::after {
    content:      "" !important;
    position:     absolute !important;
    bottom:       -10px !important;
    left:         50% !important;
    transform:    translateX(-50%) !important;
    width:        0 !important;
    height:       0 !important;
    border-left:  10px solid transparent !important;
    border-right: 10px solid transparent !important;
    border-top:   10px solid white !important;
  }

  /* 5. TEXTE BOTTOM */
  .hero-bottom-element {
    max-width: 400px !important;
  }

  .hero-bottom-element .levrard-hero-bottom-text {
    background:       transparent !important;
    background-image: none !important;
    border-radius:    0 !important;
    padding:          15px 0 !important;
    box-shadow:       none !important;
    margin:           0 !important;
    width:            100% !important;
  }

  .levrard-hero-bottom-content p {
    font-size:   18px !important;
    color:       white !important;
    text-align:  center !important;
    margin:      0 !important;
    padding:     0 !important;
    font-weight: 500 !important;
  }

  .levrard-hero-bottom-text::after {
    display: none !important;
  }

  /* 6. BOUTONS CTA */
  .hero-buttons-element {
    max-width: 350px !important;
  }

  .hero-buttons-element .levrard-hero-buttons {
    background:     transparent !important;
    border-radius:  0 !important;
    padding:        15px 0 !important;
    box-shadow:     none !important;
    display:        flex !important;
    flex-direction: column !important;
    position:       static !important;
    width:          100% !important;
    transform:      none !important;
    margin:         0 !important;
  }

  .levrard-hero-buttons::after {
    display: none !important;
  }

  .levrard-hero-subtitle {
    display: none !important;
  }

  .levrard-buttons-container {
    flex-direction: column !important;
    gap:            12px !important;
    width:          100% !important;
  }

  .levrard-btn {
    width:         100% !important;
    padding:       15px 20px !important;
    font-size:     18px !important;
    border-radius: 15px !important;
    font-weight:   600 !important;
    text-align:    center !important;
    margin:        0 !important;
    transition:    all 0.3s ease !important;
    box-sizing:    border-box !important;
  }

  .levrard-btn-outline {
    background: var(--levrard-dark-gray) !important;
    color:      var(--levrard-white) !important;
    border:     2px solid var(--levrard-dark-gray) !important;
  }

  .levrard-btn-outline:hover {
    background: rgba(255, 255, 255, 0.9) !important;
    color:      var(--levrard-red) !important;
  }

  .levrard-btn-primary {
    background: var(--levrard-white) !important;
    color:      var(--levrard-dark-red) !important;
    border:     2px solid var(--levrard-white) !important;
  }

  .levrard-btn-primary:hover {
    background: #222 !important;
    color:      white !important;
  }

  /* 7. IMAGE EN BAS */
  .hero-image-element {
    margin-bottom: 0 !important;
    max-width:     350px !important;
  }

  .hero-mobile-image {
    border-radius: 15px !important;
    overflow:      hidden !important;
    box-shadow:    0 4px 15px rgba(0, 0, 0, 0.1) !important;
    width:         100% !important;
    margin:        0 auto !important;
  }

  .hero-mobile-image img {
    width:      100% !important;
    height:     220px !important;
    object-fit: cover !important;
    display:    block !important;
  }
}

/* Alternative si le CSS ci-dessus ne suffit pas */
@media screen and (max-width: 50em) {
  /* Force le hero à prendre exactement la largeur de l'écran */
  .levrard-hero-title-content {
    padding-bottom: 10px;
    padding-left:   0;
    margin-bottom:  0;
  }

  .levrard-hero-title-content {
    width: 90%;
  }

  .levrard-hero-section {
    position:     relative !important;
    left:         50% !important;
    right:        50% !important;
    margin-left:  -50vw !important;
    margin-right: -50vw !important;
    width:        100vw !important;
    box-sizing:   border-box !important;

  }

  .levrard-hero-section::after {
    content:       '';
    position:      absolute;
    bottom:        -280px;
    left:          200px;
    transform:     translateX(-25%);
    width:         1080px;
    height:        400px;
    background:    #ffffff;
    border-radius: 50%;
    z-index:       1;
  }

  .we-are-pros-desktop {display: none}

}

/* Très petits mobiles */
@media screen and (max-width: 576px) {
  .hero-element {
    max-width: 350px !important;
  }

  .hero-mobile-bubble {
    font-size:  28px !important;
    text-align: left !important;
  }

  .hero-mobile-cta,
  .levrard-btn {
    font-size: 16px !important;
    padding:   12px 20px !important;
  }

  .levrard-hero-bottom-content p {
    font-size: 16px !important;
  }
}

.hero-element.hero-bottom-element {
  display: none;
}

.hero-element.hero-image-element {
  display: none;
}

.we-are-pros-desktop {padding: 110px 0 50px;text-align: center;position: relative;}
.we-are-pros-desktop:after {content: "";display: block;width: 300px;height: 5px;background: var(--levrard-red);margin: auto;position: absolute;bottom: 0;left: calc(50% - 150px)}
.we-are-pros-desktop__title {font-size: 38px;color: var(--levrard-current);font-weight: 400;font-style: italic;font-family: var(--font-alternate)}
.we-are-pros-mobile__title{display:none}

.hero-display-elements {display: flex;flex-direction: column;align-items: flex-start;width: calc(100% - 100px);margin: 0 auto -50px;position: relative;z-index: 2}

.hero-display-element--bar {width: 100%;}

.levrard-hero-buttons {width: 100%;position: relative;}

.hero-display-gfx-desktop{position:absolute;z-index:-1;bottom:-250px;left:-100px;right:-100px;color:var(--levrard-red);}
.hero-display-gfx-desktop > svg{opacity:0.065}
.hero-display-gfx-desktop > svg path,
.hero-display-gfx-desktop > svg circle{fill:currentColor}

/* ---------------------------- */
@media (min-width: 50em) and (max-width: 75em) {
  .hero-display-elements {width: calc(100% - 20px);}

  .levrard-hero-title .line-2 {font-size: 70px;}

  .levrard-hero-buttons h2 {text-align: center;width: 100%}

  .levrard-hero-buttons .levrard-buttons-container {justify-content: center;}

  .we-are-pros-desktop__title {font-size: 28px;}
  .levrard-hero-buttons {
    flex-direction: column;
    align-items:    flex-start;
    padding:        15px 25px;
    width:          95%;
  }

  .levrard-hero-subtitle {
    margin-bottom: 15px;
    max-width:     100%;
    font-size:     20px;
  }

  .levrard-buttons-container {
    width: 100%;
    gap:   10px;
  }
}
@media (max-width: 50em) {
  .we-are-pros-desktop__title {display: none}
  .we-are-pros-mobile__title{display:block;text-align:center;color:#fff;margin:15px 30px;order:5;font-weight:400}
  .hero-display-elements {align-items: center;padding-top: 30px;width: 100%}
  .levrard-hero-title {margin: 0 0 15px !important;}
  .hero-display-gfx-desktop{z-index: 1;bottom:auto;left:-400px;right:-400px;top:-120px;color:#fff;}
  .hero-display-gfx-desktop > svg{opacity: 0.2;}
}
@media (max-width: 40em) {
  .hero-display-elements{align-items:flex-start;text-align:left;padding:20px 20px 0 20px;}
  .hero-bubble-element{margin:0 0 20px !important}
  .we-are-pros-mobile__title{text-align:left;margin:15px 0 0 20px}
  .levrard-buttons-container{margin-left:20px;align-items:flex-start}
  .hero-image-element{max-width:100% !important;width:100%;margin-top:20px;}
  .hero-cta-element,
  .hero-bubble-element,
  .hero-rating-element{max-width:100% !important;width:100%}
  .rating-badge{width:100%;justify-content:space-between}
}

/* ---------------------------- */