/* Début de : CSS des pages de Référencement prestige : */

.site-layout_real-estate .headroom--not-top .navbar.page-with-cover .navbar-brand-wpz a, .site-layout_real-estate .headroom--not-top .navbar.page-with-cover .navbar-nav > li > a, .site-layout_shop .headroom--not-top .navbar.page-with-cover .navbar-brand-wpz a, .site-layout_shop .headroom--not-top .navbar.page-with-cover .navbar-nav > li > a, .site-layout_agency .headroom--not-top .navbar.page-with-cover .navbar-brand-wpz a, .site-layout_agency .headroom--not-top .navbar.page-with-cover .navbar-nav > li > a {
    color: #282A65; /* Bleu S&F */
}


/* CSS pour la div de l'image des villes : */
.div-img-villes {
/*	max-width: 50%;*/
	padding-top: 80px;
	padding-bottom: 10px;
}
/*
@media only screen and (max-width: 480px) {
	
/* Début de : CSS qui neutralise les marges/paddings des conteneurs parents courants dans WordPress : */
/*
Cela afin de pouvoir placer tout le contenu des pages de Referencement Prestige en pleine largeur, et pouvoir les gérer individuellement.
Surtout pour pouvoir avoir une marge minimale de chaque côté de l'image de présentation.
CSS pour div pleine largeur mobile :
https://x.com/i/grok?conversation=1934239124585672779
* /
  body,
  .site-main,
  .content-area,
  .container,
  [class*="aux-fold"],
  [class*="wrap"],
  [class*="content"],
  [class*="main"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
/* Fin de : CSS qui neutralise les marges/paddings des conteneurs parents courants dans WordPress. */	
	
  /* Cible la div pour la pleine largeur avec marges * /
  .div-img-villes {
    width: calc(100vw - 10px) !important; /* 100vw moins 5px à gauche et 5px à droite * /
    margin-left: 5px !important; /* Marge de 5px à gauche * /
    margin-right: 5px !important; /* Marge de 5px à droite * /
    padding: 0 !important;
    box-sizing: border-box !important;
    position: relative !important; /* Reste dans le flux normal * /
    left: 0 !important;
    right: 0 !important;
  }
/* CSS pour les images des villes : * /
  /* Assure que l'image s'adapte * /
  .div-img-villes picture,
  .div-img-villes img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important; 
	margin-top: 30px; 
  }
	
/* Retirer les marges internes sur les divs de contenu * /
.debut-page, .fin-page, .debut-page-menu, .fin-page-menu {
    margin-left: 20px !important; /* Marge de 5px à gauche * /
    margin-right: 20px !important; /* Marge de 5px à droite * /
 /*   margin-top: 35px;
    margin-bottom: 35px;* /
  }	
	
} /* Fin de : @media only screen and (max-width: 480px) { */



.img-villes	{
	max-width: 50%;
/*	border-radius: 15px; 
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);	*/
	box-shadow: 5px 3px 7px rgba(0, 0, 0, 0.4);
    border-radius: 5px;
	}
	

/* Responsive portrait mobile (jusqu’à 480px) * /
/* Retirer les marges internes sur les divs de contenu * /
@media (max-width: 480px) {
.debut-page, .fin-page, .debut-page-menu, .fin-page-menu {
    margin-left: 20px !important; /* Marge de 5px à gauche * /
    margin-right: 20px !important; /* Marge de 5px à droite * /
 /*   margin-top: 35px;
    margin-bottom: 35px;* /
}
}
/**/

/* Texte gras en noir : */
.debut-page, .debut-page-menu strong {
/*   color: #000;*/
}

/* Divs des textes de début et fin de page : */
.debut-page, .fin-page, .debut-page-menu, .fin-page-menu {
    margin-left: 25px;
    margin-right: 25px;
    margin-top: 35px;
    margin-bottom: 35px;
}


/* Début de : Les liens texte de la page : */
.debut-page a,
.debut-page-menu a {
  color: #2A95DC; /* Bleu Qualibat */
  font-weight: 700;
  text-decoration: none;
  position: relative;
  transition: color 0.3s ease;
}

.debut-page a::after,
.debut-page-menu a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 3;
  width: 100%;
  height: 1px;
/*  background-color: #40D681;*/
  background-color: #282A65; /* Bleu S&F */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: none;
  border-radius: 2px;
}

.debut-page a:hover,
.debut-page-menu a:hover {
  color: #FFC40E; /* Jaune d'Oeuf */
}

.debut-page a:hover::after,
.debut-page-menu a:hover::after {
  transform: scaleX(1);
}
/* Fin de : Les liens texte de la page. */

/* Titre Principal H1: */
.page .has-post-cover .entry-header .entry-title, .single .has-post-cover .entry-header .entry-title {
	font-family: "Onest", Sans-serif;
    font-size: 50px;
    font-weight: 600;
	color: #282A65; /* Bleu S&F */
	text-align: center;
/*	
    text-transform: none;
    font-weight: 600;
    text-align: left; */
    margin-top: 0;
    margin-bottom: 35px;
	margin-top: 80px;
    padding: 0;
}

.entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 {
/*    margin-bottom: 20px;
    line-height: 1.3;
    font-weight: 600;*/
	margin-bottom: 35px;
	font-family: "Onest", Sans-serif;
    font-size: 40px;
    font-weight: 600;
	color: #282A65; /* Bleu S&F */
}

.entry-content h2 {
	margin-top: 80px;
}

.entry-content h3 {
    font-size: 30px;
	color: #2A95DC; /* Bleu Qualibat */ 
}


/* Pour forcer la pleine largeur du container principal de la page : */
body.page .entry-content, body.single-post .entry-content {
    width: 100%;
    max-width: 100%;
    margin: auto;
    color: #282A65; /* Bleu S&F */
	font-family: "Inter", Sans-serif;
}

/*
h1, h2, h3, h4, h5, h6 {
	font-family: "Onest", Sans-serif;
    font-size: 30px;
    font-weight: 600;
}
*/

/* Force la hauteur de la vidéo d'acceuil : */
.page .has-post-cover .entry-cover, .single-portfolio_item .has-post-cover .entry-cover, .single .has-post-cover .entry-cover {
    min-height: 100vh;
}

/* Suppression du voile noir sur la vidéo d'acceuil : */
.single-post .slide-background-overlay, .page .slide-background-overlay {
    background-image: none !important;
}

/* La div du titre : */
.page .entry-info, .single .entry-info, .blog .entry-info {
    max-width: 1150px;
    margin: auto;
}
/* La div du titre : */
.entry-header {
    position: relative;
    margin: 0 auto;
    margin-top: 50px;
}




/* Pour forcer la largeur du container principal du contenu de la page (hors le flipbook) : */
.main-text-content {
    width: 1000px;
    max-width: 100%;
    margin: auto;
/*	color: #282A65;*/
	font-family: "Inter", Sans-serif;
}



/* Début de : CSS du diaporama à lamelles. */
/* Le container principal : */
#scene-images-chantiers {
    margin-top: 90px;
	margin-bottom: -70px;
}

/* Imortant partout si souci : */
.div-scene {
    width: 100%;
	max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
/*  margin-bottom: 80px; */
}

.scene-wrapper {
/*    border-radius: 5px;
/*    background-color: #03a9f436; */
/*    padding-left: 50px;
/*    box-shadow: 0 10px 25px rgba(0, 0, 0, .3); */
  /*  position: relative;*/
 /*   width: 95%; */
}



/*    @import url('https://fonts.googleapis.com/css2?family=Berkshire+Swash&display=swap'); */
/*
    *, *::before, *::after {
      padding: 0;
      margin: 0 auto;
      box-sizing: border-box;
    }
*/

    :root {
  /*    --scene-width: 960px; /* Largeur totale de la scène, ajustable */
 /*     --scene-width: 1200px; /* Largeur totale de la scène, ajustable */
	  --scene-width: 100vw; /* Pour une scène responsive (80% de la largeur de la fenêtre)  */
      --segment-count: 24; /* Nombre de segments */
      --segment-width: calc(var(--scene-width) / var(--segment-count)); /* Largeur d’un segment */
      --scene-height: calc(var(--scene-width) * 0.5625); /* Hauteur proportionnelle (16:9) */
      --segment-height: calc(var(--scene-height) - 4em); /* Hauteur des segments */
      --face-width: calc(var(--segment-width) * 0.95); /* Largeur des faces, légèrement inférieure */
      --face-height: calc(var(--segment-height) - 0.5em); /* Hauteur des faces */
      --z-translate: calc(var(--segment-width) * 0.265); /* Translation Z pour prisme */
    }
/*
    body {
/*      font-family: 'Berkshire Swash', cursive; * /
      display: flex;
      flex-direction: column;
      align-items: center;
/*    padding: 2em; * /
    }
*/
    .scene {
      position: relative;
      width: var(--scene-width);
      height: var(--scene-height);
   /*   margin: 2em 0;*/
      margin: 0;
      perspective: 1000px;
    }
    
    .sign_segment {
      position: absolute;
/*    top: 2em; */
      width: var(--segment-width);
      height: var(--segment-height);
/*    transform: translateX(-50%) translateZ(var(--z-translate));
      transform-style: preserve-3d; */
    }

    /* Positionnement des segments dynamiquement */
    .sign_segment:nth-child(1) { left: calc(var(--segment-width) * 0); --ad: 0; }
    .sign_segment:nth-child(2) { left: calc(var(--segment-width) * 1); --ad: 1; }
    .sign_segment:nth-child(3) { left: calc(var(--segment-width) * 2); --ad: 2; }
    .sign_segment:nth-child(4) { left: calc(var(--segment-width) * 3); --ad: 3; }
    .sign_segment:nth-child(5) { left: calc(var(--segment-width) * 4); --ad: 4; }
    .sign_segment:nth-child(6) { left: calc(var(--segment-width) * 5); --ad: 5; }
    .sign_segment:nth-child(7) { left: calc(var(--segment-width) * 6); --ad: 6; }
    .sign_segment:nth-child(8) { left: calc(var(--segment-width) * 7); --ad: 7; }
    .sign_segment:nth-child(9) { left: calc(var(--segment-width) * 8); --ad: 8; }
    .sign_segment:nth-child(10) { left: calc(var(--segment-width) * 9); --ad: 9; }
    .sign_segment:nth-child(11) { left: calc(var(--segment-width) * 10); --ad: 10; }
    .sign_segment:nth-child(12) { left: calc(var(--segment-width) * 11); --ad: 11; }
    .sign_segment:nth-child(13) { left: calc(var(--segment-width) * 12); --ad: 12; }
    .sign_segment:nth-child(14) { left: calc(var(--segment-width) * 13); --ad: 13; }
    .sign_segment:nth-child(15) { left: calc(var(--segment-width) * 14); --ad: 14; }
    .sign_segment:nth-child(16) { left: calc(var(--segment-width) * 15); --ad: 15; }
    .sign_segment:nth-child(17) { left: calc(var(--segment-width) * 16); --ad: 16; }
    .sign_segment:nth-child(18) { left: calc(var(--segment-width) * 17); --ad: 17; }
    .sign_segment:nth-child(19) { left: calc(var(--segment-width) * 18); --ad: 18; }
    .sign_segment:nth-child(20) { left: calc(var(--segment-width) * 19); --ad: 19; }
    .sign_segment:nth-child(21) { left: calc(var(--segment-width) * 20); --ad: 20; }
    .sign_segment:nth-child(22) { left: calc(var(--segment-width) * 21); --ad: 21; }
    .sign_segment:nth-child(23) { left: calc(var(--segment-width) * 22); --ad: 22; }
    .sign_segment:nth-child(24) { left: calc(var(--segment-width) * 23); --ad: 23; }

    .sign_segment > div {
      position: absolute;
      top: 0.25em;
      left: 0.025em;
      width: var(--face-width);
      height: var(--face-height);
      overflow: hidden;
      background-position: calc(var(--ad) / 23 * 100%) 50%;
      background-size: calc(var(--scene-width)) calc(var(--face-height));
      backface-visibility: hidden;
/*      box-shadow: 0 0 1em #0007 inset; */  /* Ombre intérieure sur la périphérie des lamelles */
      transition: transform 0s; /* Transition par défaut à 0s */
    }

    /* Classes pour les angles des faces */
    .face-angle-0 { transform: rotateY(0deg) translateZ(var(--z-translate)); }
    .face-angle-120 { transform: rotateY(120deg) translateZ(var(--z-translate)); }
    .face-angle-240 { transform: rotateY(240deg) translateZ(var(--z-translate)); }

    /* Cacher le bloc des images SEO visuellement */
    .images-chantiers {
      display: none; /* Les images sont invisibles mais indexables */
    }


/* Fin de : CSS du diaporama à lamelles. */


/* Début de : CSS des accordéons de la FAQ : */

/* Bloc FAQ : */
.faq-content{
    width: 1200px;
	max-width: 100%;
    margin: auto;
	margin-top: 110px;
	margin-bottom: 160px;
}
#faq {
	margin-top: 50px;
/*	margin-bottom: 80px; */
}

/* Supprimer les marges par défaut des balises <p> entourant les boutons .accordion */
p:has(.accordion) {
  margin: 0; /* Supprime les marges par défaut des <p> contenant un .accordion */
}

/* Styles pour les boutons .accordion */
.accordion {
/*  background-color: #40D681; /* Couleur verte principale */
/*  color: #2A95DC; /* Bleu Qualibat */ 
  color: #FFF; 
  cursor: pointer;
  padding: 16px 20px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 16px;
  font-weight: 500;
  border-radius: 5px; /* Coins arrondis pour une apparence douce */
  margin-bottom: 0; /* Pas de marge entre le bouton et le panneau */
  transition: background-color 0.3s ease, transform 0.2s ease; /* Transitions fluides */
/*  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Ombre légère */
  border: 3px solid;
/*  border-color: #00000000; */
/*  border-color: #ffc40e; */
  border-color: #282A65;
/* background-color: #A1D8ff; /* Bleu Tee-shirt */
  background-color: #282A65; /* Bleu Tee-shirt */
  white-space: normal;
}

.accordion:hover {
/* background-color: #34b66b; /* Vert légèrement plus foncé au survol */
  background-color: #282A65; /* Bleu S&F */
  transform: translateY(-2px); /* Légère élévation au survol */
  color:  #FFF;
  border: 3px solid;
  border-color:  #ffc40e;
}

.active {
  background-color: #282A65; /* Bleu S&F */
  border-radius: 5px 5px 0 0; /* Arrondi uniquement en haut quand actif */
  border-color: #282A65;
  color: #fff;
}

.accordion:after {
  content: '\002B'; /* Signe plus */
  color: #fff;
  font-weight: bold;
  float: right;
  margin-left: 5px;
  font-size: 18px;
}

.active:after {
  content: "\2212"; /* Signe moins */
}

/* Styles pour les panneaux .panel */
.panel {
  padding: 0 20px;
  background-color: #fff;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out, padding 0.3s ease-out; /* Transition douce pour l'ouverture */
  border-radius: 0 0 5px 5px; /* Coins arrondis en bas */
/*  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Ombre légère */
  margin-top: 0; /* Pas de marge entre le bouton et le panneau */
  margin-bottom: 12px; /* Marge entre les blocs */
}

/* Styles pour le contenu des panneaux */
.panel p {
  padding: 16px 0;
  margin: 0; /* Supprime les marges par défaut du <p> dans le panneau */
  color: #333; /* Texte sombre pour lisibilité */
  font-size: 14px;
}

/* Supprimer la marge inférieure du dernier panneau */
.panel:last-child {
  margin-bottom: 0; /* Pas de marge après le dernier panneau */
}

/*
 #FFC40E; /* Jaune d'Oeuf * /
#2A95DC; /* Bleu Qualibat * /
#A1D8ff; /* Bleu Tee-shirt * /
#282A65; /* Bleu S&F */

										/* Fin de : CSS des accordéons de la FAQ : */




/* Début de : CSS du flipbook : */
.div-real3dflipbook {
    width: 95% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: auto;
	margin-top: 90px;
	margin-bottom: 110px;
}

.flipbook-wrapper {
    position: relative;
    width: 95%;
    -webkit-box-shadow: 0 10px 25px rgba(0,0,0,.2);
    box-shadow: 0 10px 25px rgba(0,0,0,.2);
    text-shadow: none;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background: #fff;
}	
/* Fin de : CSS du flipbook. */






/*   Début de :  Le bloc des liens vers les pages du sites (prestations) : */
.main-links-content {
/*    width: 1200px;  */
    width: 95%;
/*    max-width: 100%; */
    max-width: 95%;
    margin: auto;
	margin-top: 100px;
	margin-bottom: 80px;
}

.wrapper-main-links-content{
    width: 95%;
    max-width: 100%;
    margin: auto;
}


/* CSS pour la div du lien de retour au Menu des villes : * /

/* Style des liens sans href défini (<a>) : * /
a:not([href]):not([tabindex]) {
    color: #1E355A;
    text-decoration: none;
}
/* Style des liens : * /
.page-content a {
    color: #1E355A;
    text-decoration: none;
}	

.csrp-listing {
/*    position: relative;
    display: block;
    margin: 0 auto;
    text-align: center; * /
}
*/









/* Version Grok : */
.csrp-listing>ul {
    padding: 0px;
    display: flex;
    flex-wrap: wrap;
/*  box-shadow: 2px 2px 5px rgba(0,0,0,0.1); */
}

.csrp-listing>ul>li {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center; /* Centre verticalement le contenu */
    justify-content: center; /* Centre horizontalement (optionnel, déjà présent) */
    padding: 6px;
/*    margin: 0 5px 10px 5px;*/
    margin: 12px;
    background: #282A65;
/*  box-shadow: 5px 3px 7px rgb(38 97 65 / 44%); */
	box-shadow: 5px 3px 7px rgb(0, 0, 0, 0.4);
    text-align: center;
    border-radius: 5px;
    line-height: 1.5;
    min-height: 0; /* Permet à la hauteur de s'ajuster automatiquement */
}
/* Effet de surlignage (highlight) avec fond progressif : Un effet où une couleur de fond se déploie subtilement sous le texte au survol: */
.csrp-listing>ul>li>a {
    font-family: "Inter", Sans-serif;
    position: relative;
/*    display: flex; /* Utilise flex pour centrer le texte */
    align-items: center; /* Centre verticalement */
    width: 100%;
    font-size: 18px;
    font-weight: 400;
    padding: 10px 15px;
    transition: all 0.3s ease;
    color: #fff;
}

.csrp-listing>ul>li>a:hover {
    background: linear-gradient(to right, rgb(30 53 90 / 0%), rgb(41 149 220)) bottom left / 100% 100% no-repeat;
/*    color: #000; */
    color: #FFF;
    border-radius: 5px;
	height: 100%;
}
/* Element after pour l'effet de bordure inférieure animée : Plutôt qu’un soulignement complet, une bordure animée qui s’étend de gauche à droite sous le lien : */
.csrp-listing>ul>li>a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
/*  background-color: #00f86b; */
    background-color: #FFC40E; /* Jaune d'Oeuf */
    transition: width 0.3s ease;
}

.csrp-listing>ul>li>a:hover::after {
    width: 100%;
}
/**/








/* Original ! : 
/* Style des liens dans la liste des villes avec href défini (<a href>) : * /
/* Le bloc des blocs : * /
.csrp-listing>ul {
    padding: 0px;
    display: block;
    display: flex;
    /* display: -webkit-flex; * /
    display: -moz-flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}
/* Les blocs : * /
.csrp-listing>ul>li {
    -webkit-flex: 1;
    flex: 1;
    position: relative;
    display: block;
    padding: 3px;
    margin: 0 5px 10px 5px;
    background: #282A65;
    box-shadow: 5px 3px 7px rgb(38 97 65 / 44%);
    text-align: center;
    border-radius: 5px;
	line-height: 1.5;
    /* border: 1px solid #000; * /
}
/* Effet de surlignage (highlight) avec fond progressif : Un effet où une couleur de fond se déploie subtilement sous le texte au survol : * /
.csrp-listing>ul>li>a {
	font-family: "Inter", Sans-serif;
    position: relative;
    display: block;
    width: 100%;
    font-size: 18px;
    font-weight: 400;
    padding: 10px 15px;
    transition: all 0.3s ease;
    color: #fff;
}
.csrp-listing>ul>li>a:hover {
    background: linear-gradient(to right, rgb(30 53 90 / 0%), rgb(255 255 255)) bottom left / 100% 100% no-repeat;
    color: #000;
    border-radius: 6px;
}

/* Element after pour l'effet de bordure inférieure animée : Plutôt qu’un soulignement complet, une bordure animée qui s’étend de gauche à droite sous le lien : * /
.csrp-listing>ul>li>a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background-color: #00f86b;
    transition: width 0.3s ease;
}

.csrp-listing li::before {
     display: none;
}

.csrp-listing>ul>li>a:hover::after {
    width: 100%;
}
/**/









.csrp-listing>ul>li>span {
    position: relative;
    display: block;
    font-size: 22px;
    padding: 15px 0;
    color: #fff;
    font-weight: 800;
    text-decoration: underline;
}

.csrp-listing>ul>li>ul>li {
    position: relative;
    display: block;
}

.csrp-listing>ul>li>ul>li a {
    position: relative;
    display: block;
    padding: 3px;
    border-bottom: 1px solid rgba(0,0,0,0.35);
    text-align: center;
    font-weight: normal;
}

.csrp-listing>ul>li>ul>li a:last-of-type {
    border-bottom: none;
}

.csrp-listing>ul>li>ul>li a:hover {
    background: rgba(255,255,255,0.25);
}



/* Le bloc des chaînes longues traînes (Compositions de mots-clés) : * /
.bloc-ref-prestige {
    margin-bottom: 55px;
}
    /* Début de : CSS des boutons de retour au menu des villes en bas des pages de Référencement Prestige : */
.btn-link-ref-prestige-container {
    width: 100%;
    display: flex;
    justify-content: center; /* centre horizontalement */
	margin-top: 60px;
}

.btn-link-ref-prestige {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-family: inherit;
    line-height: 1; /* utile ici, car plus de line-height: 0 */
/*  background: #000; */
    background: #2A95DC; /* Bleu Qualibat */
    color: #fff !important;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    box-shadow: 0 1px 1px #eee;
    cursor: pointer;
    font-weight: 800;
    height: 40px;
    padding: 30px;
    transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

.btn-link-ref-prestige:hover {
/*  background: #0cd2df; */
    background: #282A65; /* Bleu S&F */
    color: #fff;
    transform: translateY(-1px);
}

.btn-text {
    display: inline-flex;
    align-items: center;
    gap: 8px; /* espace entre icône et texte */
}
/*
.btn-prestige-icon {
    font-size: 18px;
    transition: color 0.3s ease, transform 0.3s ease;
}
*/
/* Effet fluide de déplacement au survol */
.btn-link-ref-prestige:hover .btn-prestige-icon {
    color: #fff;
    transform: translateX(-10px); /* ← déplacement vers la gauche */
}

.btn-link-ref-prestige:hover::after{
    display: none !important;
}

/* Le séparateur de texte sur deux lignes du bouton pour mobiles en mode portrait */
.mobile-break {
    display: none; /* Par défaut ne pas afficher sur desktop, tablettes. */
}
    





/* Responsive portrait mobile (jusqu’à 480px) */
@media (max-width: 600px) {
    .btn-link-ref-prestige {
        font-size: 16px;
        font-weight: 500;
        padding: 30px 12px;
		width: 100%;
		margin-left: 10px;
    	margin-right: 10px !important;
    }
/*
    .btn-prestige-icon {
   /*     font-size: 16px; * /
		display: none;
    }
*/	
.btn-text {
    display: inline-block;
    text-align: center; 
    width: 100%;
}
    .mobile-break {
        display: block;
        height: 0;
    }
}

    /* Fin de : CSS des boutons de retour au menu des villes en bas des pages de Référencement Prestige. */

/*   Fin de :  Le bloc des liens vers les pages du sites (prestations) : */

/* Bloc Avis Google : */
.widget-reviews-content {
    /* width: 1600px; */
    width: 95%;
    max-width: 100%;
    margin: auto;
    margin-top: 90px;
    margin-bottom: 80px;
    padding-top: 10px;
    padding-bottom: 30px;
    border-radius: 5px;
    background-color: #7cb0d5;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .2);
}
/* Les divs des avis Google : */
.ti-widget.ti-goog .ti-review-item>.ti-inner, .ti-widget.ti-goog .ti-load-more-reviews-container .ti-load-more-reviews-button {
	border-radius: 5px !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  /*  border: 1px solid #0cd2df !important; /* Contour bleu fin */
  /*  border: 10px solid #eeeeee!important; /* Contour bleu fin */
}
/* Espace entre les blocs d'avis : */
.ti-widget.ti-goog .ti-review-item {
    padding: 0 22px !important;
}

/**/



/* Smartphones portrait (petits mobiles) */
@media screen and (max-width: 480px) {
  /* règles CSS ici */

	
#scene-images-chantiers {
    margin-top: 40px;
}
	
:root {
    --scene-width: 90vw;
    --scene-height: calc(var(--scene-width) * 0.7225);
}	

	
	
	
/* Titre Principal H1: */
.page .has-post-cover .entry-header .entry-title, .single .has-post-cover .entry-header .entry-title {
    font-size: 40px;
/*  margin-bottom: 35px;
	margin-top: 80px;*/
}

.entry-content h2 {
/*	margin-bottom: 35px; */
    font-size: 30px;
}

.entry-content h3 {
    font-size: 20px;
}



	
.div-img-villes {
/*	max-width: 50%;*/
	padding-top: 0px;
	padding-bottom: 0px;
}		
	
	
	
	
	
	
/* Les blocs de liens Référencement Prestige : */
.main-links-content {
    width: 100% !important;
    max-width: 100% !important;
}	
.wrapper-main-links-content {
    width: 100% !important;
    max-width: 100% !important;
}
/* Retirer la marge gauche des blocs : */
.csrp-listing>ul {
    margin: 0 !important;
}		
	

	
	
.div-real3dflipbook {
    margin-top: 40px;
    margin-bottom: 90px;
}
	

	
.widget-reviews-content {
    margin-top: 40px;
	margin-bottom: -10px;
}
	
	
	
	
	
} /* Fin de : @media screen and (max-width: 480px) { */

/* Smartphones paysage / petits appareils */
@media screen and (min-width: 481px) and (max-width: 767px) {
  /* règles CSS ici */
	
#scene-images-chantiers {
    margin-top: 40px;
}
:root {
    --scene-width: 90vw;
	--scene-height: calc(var(--scene-width) * 0.7225);
}
	
	

	
	
	
	
/* Titre Principal H1: */
.page .has-post-cover .entry-header .entry-title, .single .has-post-cover .entry-header .entry-title {
    font-size: 40px;
/*  margin-bottom: 35px;
	margin-top: 80px;*/
}

.entry-content h2 {
/*	margin-bottom: 35px; */
    font-size: 30px;
}

.entry-content h3 {
    font-size: 20px;
}



	
.div-img-villes {
/*	max-width: 50%;*/
	padding-top: 0px;
	padding-bottom: 0px;
}		
	
	
	
	
	
	
/* Les blocs de liens Référencement Prestige : */
.main-links-content {
    width: 100% !important;
    max-width: 100% !important;
}	
.wrapper-main-links-content {
    width: 100% !important;
    max-width: 100% !important;
}
/* Retirer la marge gauche des blocs : */
.csrp-listing>ul {
    margin: 0 !important;
}		
	
	
	
.div-real3dflipbook {
    margin-top: 40px;
    margin-bottom: 90px;
}	
	
	
	
.widget-reviews-content {
    margin-top: 40px;
	margin-bottom: -10px;
}	
	
	
} /* Fin de : @media screen and (min-width: 481px) and (max-width: 767px) { */

/* Tablettes portrait */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  /* règles CSS ici */
:root {
    --scene-width: 95vw; 
}
}

/* Tablettes paysage & petits laptops */
@media screen and (min-width: 1024px) and (max-width: 1279px) {
  /* règles CSS ici */
:root {
    --scene-width: 90vw; 
}
}

/* Desktop standard */
@media screen and (min-width: 1280px) and (max-width: 1535px) {
  /* règles CSS ici */
:root {
    --scene-width: 80vw; 
}	
}

/* Grands écrans / 4K */
@media screen and (min-width: 1536px) {
  /* règles CSS ici */
:root {
    --scene-width: 50vw;
}	
/*
.scene-wrapper {
    padding-left: 60px;
}	
	*/
}


/*********************************************************** /


/* Conteneur superposé (logo + bouton) */
.elementor-element-7d31660 {
  position: absolute !important; /* ! */
/*  top: 50%;  */
  top: 60%;
/*   left: 50%; */
  left: 55%;
  transform: translate(-50%, -50%); /* Centrage parfait */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10; /* Bien au-dessus de la vidéo et de l'overlay */
  width: 100%;
  max-width: 700px; /* Limite la largeur */
  padding: 20px;
  box-sizing: border-box;
  z-index: 9 !important; /* ! */
}

/* Style pour l'image (logo) */
.elementor-element-c0f3930 img {
  max-width: 80%;
  height: auto;
  display: block;
  margin-bottom: 20px;
  z-index: 9; /* Cohérent avec le conteneur parent */
}

.elementor-element-74d7156 .elementor-button {
    background-color: #00000000;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    fill: #FFFFFF;
    color: #FFFFFF;
    border-style: solid;
    border-width: 2px 2px 2px 2px ;
    border-color: #FFFFFF;
    border-radius: 5px 5px 5px 5px;
}

.elementor-element-74d7156 .elementor-button:hover, .elementor-element-74d7156 .elementor-button:focus {
    background-color: #FFCB00;
    color: #000000;
    border-color: #FFCB00;
}

/* Responsive : ajustements pour écrans plus petits */
@media (max-width: 768px) {
  .elementor-element-7d31660 {
    max-width: 80%;
 /*   padding: 15px;*/
  }

  .elementor-element-c0f3930 img {
/*    max-width: 80%; */
  }

  .elementor-element-74d7156 .elementor-button {
    font-size: 14px;
    padding: 10px 20px;
  }
}

@media (max-width: 480px) {
  .elementor-element-7d31660 {
/*    max-width: 90%; */
  }

  .elementor-element-c0f3930 img {
/*    max-width: 70%; */
  }

  .elementor-element-74d7156 .elementor-button {
    font-size: 12px;
    padding: 8px 16px;
  }
}









/* CSS mis à jour */
.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: #282A65; /* Bleu S&F */
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    display: flex; /* Nécessaire pour le centrage de la flèche */
    justify-content: center;
    align-items: center;
    /* Propriétés pour la transition */
    opacity: 0; /* Masqué par défaut */
    transform: translateY(20px); /* Décalé vers le bas par défaut */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Transition fluide */
}

.back-to-top:hover,
.back-to-top:focus,
.back-to-top:active {
    background-color: #2A95DC; /* Bleu Qualibat */
}

.back-to-top.visible {
    opacity: 1; /* Visible */
    transform: translateY(0); /* Remonte à sa position normale */
}

/* Media query pour mobile */
@media screen and (max-width: 768px) {
    .back-to-top {
        right: auto;
        left: 20px;
    }
}





/* CSS * /
.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none; /* Masqué par défaut * /
    width: 50px;
    height: 50px;
    background-color: #282A65; /* Bleu S&F * /
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    z-index: 1000;
    transition: opacity 0.3s ease, background-color 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
/*    display: flex; * /
    justify-content: center;
    align-items: center;
}

.back-to-top:hover,
.back-to-top:focus,
.back-to-top:active {
    background-color: #2A95DC; /* Bleu Qualibat * /
}

.back-to-top.visible {
    display: flex; /* Affiché avec flex pour centrage * /
	transition: opacity 1s ease, background-color 1s ease;
}

/* Media query pour mobile * /
@media screen and (max-width: 768px) {
    .back-to-top {
        right: auto;
        left: 20px;
    }
}
/**/





/* CSS (inchangé) * /
.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    width: 50px;
    height: 50px;
    background-color: #282A65; /* Bleu S&F * /
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    z-index: 1000;
    transition: opacity 0.3s ease, background-color 0.3s ease; /* Ajout de background-color pour transition fluide * /
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    display: flex;
    justify-content: center;
    align-items: center;
}

.back-to-top:hover,
.back-to-top:focus,
.back-to-top:active {
    background-color: #2A95DC; /* Bleu Qualibat * /
}

.back-to-top.visible {
    display: flex;
}

/* Media query pour mobile * /
@media screen and (max-width: 768px) {
    .back-to-top {
        right: auto;
        left: 20px;
    }
}
/**/




/*
/* CSS mis à jour * /
.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px; /* Par défaut à droite pour PC et tablette * /
    display: none;
    width: 50px;
    height: 50px;
    background-color: #282A65; /* Bleu S&F * /
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    z-index: 1000;
	transition: opacity 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    display: flex;
    justify-content: center;
    align-items: center;
}

.back-to-top:hover {
    background-color: #2A95DC; /* Bleu Qualibat * /
	font-size: 30px;
    color: white !important;
}

.back-to-top.visible {
    display: flex; /* Maintient le centrage * /
}

/* Media query pour mobile (écran de 768px ou moins) * /
@media screen and (max-width: 768px) {
    .back-to-top {
        right: auto; /* Supprime le positionnement à droite * /
        left: 20px; /* Place à gauche * /
    }
}
/**/