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






/* CSS pour la div de l'image des villes : */
.div-img-villes {
	padding-bottom: 30px;
}

@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	{
	border-radius: 15px; 
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);	
	}
	

/* 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: #0cd2df;
  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: 0;
  width: 100%;
  height: 2px;
  background-color: #40D681;
  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: #40D681;
}

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


/* 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; * /
}
*/
/* 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: #0cd2df;
    box-shadow: 5px 3px 7px rgb(38 97 65 / 44%);
    text-align: center;
    border-radius: 5px;
    /* 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 {
    position: relative;
    display: block;
    width: 100%;
    font-size: 18px;
    font-weight: bold;
    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%;
}

/* Plus de spans : 
.csrp-listing>ul>li>span {
    position: relative;
    display: block;
}
/*
.csrp-listing>ul>li>span>a {
    position: relative;
    display: block;
    font-size: 18px;
    padding: 10px 0;
}

.csrp-listing>ul>li>span>a:hover {
  /*  background: rgba(255,255,255,0.5);* /
}
*/
.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);
}

/*
*[class*="bloc"] {
    position: relative;
    display: block;
    margin-bottom: 36px;
    border-radius: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
*/

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

.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;
    color: #fff;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    box-shadow: 0 1px 1px #eee;
    cursor: pointer;
    font-weight: 800;
    height: 40px;
    padding: 0 20px;
    transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

.btn-link-ref-prestige:hover {
    background: #0cd2df;
    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 */
}

/* 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: 0 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. */



	/* Début de : CSS des traits fins animés : */	

    .conteneur-animation-ref-prestige {
      margin: 0;
      padding: 0;
    }

    .conteneur-separateur-ref-prestige-left {
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }

    .debut-separateur-ref-prestige-left {
      width: 0%;
      height: 2px;
      background-color: #40d681;
    }

    .fin-separateur-ref-prestige-left {
      width: 100%;
      border-bottom: 2px solid rgba(255,255,255,0.25);
    }

    .conteneur-separateur-ref-prestige-right {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex-direction: row-reverse;
      margin-bottom: 20px;
    }

    .debut-separateur-ref-prestige-right {
      width: 0%;
      height: 2px;
      background-color: #0cd2df;
    }

    .fin-separateur-ref-prestige-right {
      width: 100%;
      border-bottom: 1px solid rgba(255,255,255,0.25);
    }

    .conteneur-separateur-ref-prestige-after-left {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      opacity: 0;
    }

    .debut-separateur-ref-prestige-after-left {
      width: 0%;
      height: 2px;
      background-color: #40d681;
    }

    .fin-separateur-ref-prestige-after-left {
      width: 100%;
      border-bottom: 1px solid rgba(255,255,255,0.25);
    }

    .conteneur-separateur-ref-prestige-after-right {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex-direction: row-reverse;
      opacity: 0;
      margin-bottom: 20px;
    }

    .debut-separateur-ref-prestige-after-right {
      width: 0%;
      height: 2px;
      background-color: #0cd2df;
    }

    .fin-separateur-ref-prestige-after-right {
      width: 100%;
      border-bottom: 1px solid rgba(255,255,255,0.25);
    }

    @keyframes largeurAnim1 {
      from {width: 0%;}
      to {width: 100%;}
    }

    @keyframes largeurAnim2 {
      from {width: 100%;}
      to {width: 0%;}
    }

    @keyframes restartAnim1 {
      to {width: 10%;}
    }

    @keyframes restartAnim2 {
      to {width: 90%;}
    }

    .animate-debut-left, .animate-debut-right {
      animation: largeurAnim1 1s ease-in-out forwards, restartAnim1 2s linear 1s forwards;
    }

    .animate-fin-left, .animate-fin-right {
      animation: largeurAnim2 1s ease-in-out forwards, restartAnim2 2s linear 1s forwards;
    }

    .animate-debut-after-left, .animate-debut-after-right {
      animation: largeurAnim1 4s ease-in-out forwards, restartAnim1 2s linear 4s forwards;
    }

    .animate-fin-after-left, .animate-fin-after-right {
      animation: largeurAnim2 4s ease-in-out forwards, restartAnim2 2s linear 4s forwards;
    }	

	/* Fin de : CSS des traits fins animés : */	
	
	

/* Debut de : CSS des fils d'ariane : */
.aux-breadcrumbs {
    color: #000;
    font-size: 16px;
    display: inline-block;
    font-weight: 600;
}
.aux-breadcrumbs span a {
    color: #000;
    text-decoration: none;
    transition: color 0.3s ease;
}
.aux-breadcrumbs span a:hover {
    color: #1bb0ce;
    text-decoration: underline;
}
/* Fin de : CSS des fils d'ariane. */


/* Début de : Les traits fins sur et sous la div des fils d'ariane : */
.page-title-section .page-header {
    border-top: 1px solid #40d681 !important;
	border-bottom: 1px solid #40d681 !important;
 /*   z-index: 2;
    overflow: hidden;
    border-width: 1px 0 1px;
    padding: 35px 0;
    position: relative;
    top: 0px;
    background-position: center center;
    background-size: cover;
    padding-top: 0;
    padding-bottom: 0;*/
}
/* Début de : Les traits fins sur et sous la div des fils d'ariane : */



			/* Début des CSS des listes de liens des outils gratuits : */

		/* Ils sont placés dans la feuille de style générale, car commun avec d'autres pages */

			/* Fin des CSS des listes de liens des outils gratuits. */


			/* Début de : Style du paragraphe explicatif sous les listes de liens des outils gratuits : */

		/* Ils sont également placés dans la feuille de style générale, car commun avec d'autres pages */

			/* Fin de : Style du paragraphe explicatif sous les listes de liens des outils gratuits. */




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






/*

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}}.div-img-villes{padding-bottom:30px}@media only screen and (max-width:480px){.div-img-villes{width:calc(100vw - 10px)!important;margin-left:5px!important;margin-right:5px!important;padding:0!important;box-sizing:border-box!important;position:relative!important;left:0!important;right:0!important}.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;border-radius:15px;box-shadow:0 6px 10px rgb(0 0 0 / .2)}@media (max-width:480px){.debut-page,.fin-page,.debut-page-menu,.fin-page-menu{margin-left:20px!important;margin-right:20px!important}}.debut-page,.fin-page,.debut-page-menu,.fin-page-menu{margin-left:25px;margin-right:25px;margin-top:35px;margin-bottom:35px}.debut-page a,.debut-page-menu a{color:#0cd2df;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:0;width:100%;height:2px;background-color:#40D681;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:#40D681}.debut-page a:hover::after,.debut-page-menu a:hover::after{transform:scaleX(1)}.csrp-listing>ul{padding:0;display:block;display:flex;display:-moz-flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;box-shadow:2px 2px 5px rgb(0 0 0 / .1)}.csrp-listing>ul>li{-webkit-flex:1;flex:1;position:relative;display:block;padding:3px;margin:0 5px 10px 5px;background:#0cd2df;box-shadow:5px 3px 7px rgb(38 97 65 / 44%);text-align:center;border-radius:5px}.csrp-listing>ul>li>a{position:relative;display:block;width:100%;font-size:18px;font-weight:700;padding:10px 15px;transition:all 0.3s ease;color:#fff}.csrp-listing>ul>li>a:hover{background:linear-gradient(to right,#fff0,#ffffff) bottom left / 100% 100% no-repeat;color:#000;border-radius:6px}.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>ul>li{position:relative;display:block}.csrp-listing>ul>li>ul>li a{position:relative;display:block;padding:3px;border-bottom:1px solid rgb(0 0 0 / .35);text-align:center;font-weight:400}.csrp-listing>ul>li>ul>li a:last-of-type{border-bottom:none}.csrp-listing>ul>li>ul>li a:hover{background:rgb(255 255 255 / .25)}.bloc-ref-prestige{margin-bottom:55px}.btn-link-ref-prestige-container{width:100%;display:flex;justify-content:center}.btn-link-ref-prestige{display:inline-flex;align-items:center;justify-content:center;font-size:18px;font-family:inherit;line-height:1;background:#000;color:#fff;border:none;border-radius:8px;text-decoration:none;box-shadow:0 1px 1px #eee;cursor:pointer;font-weight:800;height:40px;padding:0 20px;transition:background 0.3s ease,color 0.3s ease,transform 0.2s ease}.btn-link-ref-prestige:hover{background:#0cd2df;color:#fff;transform:translateY(-1px)}.btn-text{display:inline-flex;align-items:center;gap:8px}.btn-prestige-icon{font-size:18px;transition:color 0.3s ease,transform 0.3s ease}.btn-link-ref-prestige:hover .btn-prestige-icon{color:#fff;transform:translateX(-10px)}.mobile-break{display:none}@media (max-width:600px){.btn-link-ref-prestige{font-size:16px;font-weight:500;padding:0 12px;width:100%;margin-left:10px;margin-right:10px!important}.btn-prestige-icon{display:none}.btn-text{display:inline-block;text-align:center;width:100%}.mobile-break{display:block;height:0}}.conteneur-animation-ref-prestige{margin:0;padding:0}.conteneur-separateur-ref-prestige-left{display:flex;align-items:center;justify-content:flex-start}.debut-separateur-ref-prestige-left{width:0%;height:2px;background-color:#40d681}.fin-separateur-ref-prestige-left{width:100%;border-bottom:2px solid rgb(255 255 255 / .25)}.conteneur-separateur-ref-prestige-right{display:flex;align-items:center;justify-content:flex-end;flex-direction:row-reverse;margin-bottom:20px}.debut-separateur-ref-prestige-right{width:0%;height:2px;background-color:#0cd2df}.fin-separateur-ref-prestige-right{width:100%;border-bottom:1px solid rgb(255 255 255 / .25)}.conteneur-separateur-ref-prestige-after-left{display:flex;align-items:center;justify-content:flex-start;opacity:0}.debut-separateur-ref-prestige-after-left{width:0%;height:2px;background-color:#40d681}.fin-separateur-ref-prestige-after-left{width:100%;border-bottom:1px solid rgb(255 255 255 / .25)}.conteneur-separateur-ref-prestige-after-right{display:flex;align-items:center;justify-content:flex-end;flex-direction:row-reverse;opacity:0;margin-bottom:20px}.debut-separateur-ref-prestige-after-right{width:0%;height:2px;background-color:#0cd2df}.fin-separateur-ref-prestige-after-right{width:100%;border-bottom:1px solid rgb(255 255 255 / .25)}@keyframes largeurAnim1{from{width:0%}to{width:100%}}@keyframes largeurAnim2{from{width:100%}to{width:0%}}@keyframes restartAnim1{to{width:10%}}@keyframes restartAnim2{to{width:90%}}.animate-debut-left,.animate-debut-right{animation:largeurAnim1 1s ease-in-out forwards,restartAnim1 2s linear 1s forwards}.animate-fin-left,.animate-fin-right{animation:largeurAnim2 1s ease-in-out forwards,restartAnim2 2s linear 1s forwards}.animate-debut-after-left,.animate-debut-after-right{animation:largeurAnim1 4s ease-in-out forwards,restartAnim1 2s linear 4s forwards}.animate-fin-after-left,.animate-fin-after-right{animation:largeurAnim2 4s ease-in-out forwards,restartAnim2 2s linear 4s forwards}.aux-breadcrumbs{color:#000;font-size:16px;display:inline-block;font-weight:600}.aux-breadcrumbs span a{color:#000;text-decoration:none;transition:color 0.3s ease}.aux-breadcrumbs span a:hover{color:#1bb0ce;text-decoration:underline}.page-title-section .page-header{border-top:2px solid #40d681!important;border-bottom:2px solid #40d681!important}


/**/