/* Reset & Base */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
background-color: #f9f9f9;
color: #333;
}
/* Header & Menu */
header {
background: #fff; /* Menu background blanc */
padding: 15px 20px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1000;
}
.logo {
font-size: 24px;
font-weight: 600;
color: #2A3775;
text-shadow: 0 1px 0 #ccc;
}
.logo a {
font-size: 24px;
font-weight: 600;
color: #2A3775;
text-decoration: none;
}
.search-region {
width: 100%;
}
nav {
flex-grow: 1;
}
nav ul {
list-style: none;
display: flex;
justify-content: center;
gap: 20px;
padding-right: 200px;
}
nav ul li a {
text-decoration: none;
color: #2A3775;
font-weight: 600; /* Liens en gras */
border-radius: 5px;
transition: background-color 0.3s ease, color 0.3s ease;
}
nav ul li a:hover {
background-color: #2A3775;
color: #fff;
padding: 5px 10px;
}
.menu-icon {
display: none;
cursor: pointer;
flex-direction: column;
gap: 5px;
}
.menu-icon span {
display: block;
height: 3px;
width: 25px;
background-color: #2A3775;
border-radius: 2px;
}
/* Sous-menu */
.submenu {
display: none; /* Masquer par défaut */
position: absolute;
background: #fff; /* Fond blanc */
padding: 10px 0;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
border-radius: 5px;
z-index: 10;
}
nav ul li {
position: relative; /* Position relative pour que le sous-menu s'affiche correctement */
}
nav ul li:hover .submenu {
display: block; /* Afficher au survol */
}
.submenu li {
padding: 5px 20px;
text-align: left;
}
.submenu li a {
text-decoration: none;
color: #2A3775;
font-weight: 500;
display: block;
transition: background-color 0.3s ease, color 0.3s ease;
}
.submenu li a:hover {
background-color: #2A3775;
color: #fff;
padding: 5px 10px;
}
@media (max-width: 768px) {
.menu-icon {
display: flex;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
}
nav ul {
display: none;
flex-direction: column;
position: absolute;
top: 60px;
left: 10px;
background: #fff;
border: 1px solid #ddd;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 10px;
border-radius: 5px;
width: 200px;
}
nav ul.show {
display: flex;
}
nav ul li {
margin-bottom: 10px;
}
}
/* Hero Section */
.hero-concess {
background: #796060; /* Dégradé bleu clair */
color: #fff;
text-align: center;
padding: 20px 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.hero {
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://www.motoconcession.com/hero2.jpg");
background-size: cover;
background-position: center;
color: #fff;
text-align: center;
/*padding: 60px 20px; */
padding: 30px 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.hero h1 {
font-size: 32px;
font-weight: 600;
margin-bottom: 20px;
}
.hero p {
font-size: 16px;
margin-bottom: 30px;
color: #fff;
}
.hero1 {
background: #DF1D1D; /* Dégradé bleu clair */
color: #fff;
text-align: center;
/*padding: 60px 20px; */
padding: 15px 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.hero1 h1 {
font-size: 32px;
font-weight: 600;
margin-bottom: 20px;
}
.hero1 p {
font-size: 16px;
margin-top: 15px;
color: #fff;
font-weight: 600;
}
.hero1 p a{
text-decoration: none;
background-image: linear-gradient(#0098D9, #0098D9);
margin: 10px;
padding: 5px 5px;
text-align: center;
transition: 0.5s;
background-size: 200% auto;
color: white;
box-shadow: 0 0 20px #eee;
border-radius: 10px;
display: block;
}
.hero2 {
background: #00A9CD; /* Dégradé bleu clair */
color: #fff;
text-align: center;
/*padding: 60px 20px; */
padding: 15px 5px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.hero2 h1 {
font-size: 32px;
font-weight: 600;
}
.hero2 p {
font-size: 16px;
margin-top: 15px;
color: #fff;
font-weight: 600;
padding-bottom: 20px;
}
.hero2 p a{
text-decoration: none;
background-image: linear-gradient(#0098D9, #0098D9);
margin: 10px;
padding: 5px 5px;
text-align: center;
transition: 0.5s;
background-size: 200% auto;
color: white;
box-shadow: 0 0 20px #eee;
border-radius: 10px;
display: block;
}
/* Style global pour le formulaire */
.search-box {
display: flex;
gap: 10px;
align-items: center;
justify-content: center;
}
.search-box select,
.search-box input {
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
width: 200px;
font-family: 'Poppins', sans-serif;
}
.search-box button {
padding: 10px 20px;
background-color: #EE1C24; /* Couleur du bouton */
color: #fff;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
font-family: 'Poppins', sans-serif;
}
.search-box button:hover {
background-color: #EE1C24; /* Couleur du bouton au survol */
}
.search-box select {
cursor: pointer;
}
/* Style global pour le formulaire par marque dans partie concess */
.search-box1 {
display: flex;
gap: 10px;
align-items: center;
justify-content: center;
flex-direction: column;
}
.search-box1 select,
.search-box1 input {
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
font-family: 'Poppins', sans-serif;
}
.search-box1 button {
padding: 10px 20px;
background-color: #EE1C24; /* Couleur du bouton */
color: #fff;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
font-family: 'Poppins', sans-serif;
}
.search-box1 button:hover {
background-color: #EE1C24; /* Couleur du bouton au survol */
}
.search-box1 select {
cursor: pointer;
}
@media (max-width: 768px) {
.hero h1 {
font-size: 24px;
}
.hero1 h1 {
font-size: 24px;
color: #000;
}
.search-box select {
width: 100%;
}
.search-box input[type="text"] {
width: 100%;
}
.search-box {
flex-direction: column;
align-items: center;
gap: 15px;
}
.search-box1 select {
width: 100%;
}
.search-box1 input[type="text"] {
width: 100%;
}
.search-box1 {
flex-direction: column;
align-items: center;
gap: 15px;
}
}
.container-intro {
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-content: center;
justify-content: center;
margin: 20px 20px 20px 20px;
}
.container-intro ul li{
list-style: none;
}
.container-intro ul li span{
color: red;
font-weight: 600;
padding-right: 10px;
}
.container-intro h1 {
font-size: 25px;
font-weight: 600;
color: #2A3775;
text-align:center;
}
.container-intro h2 {
font-size: 25px;
font-weight: 700;
color: #2A3775;
text-align: center;
}
.container-intro h2 a {
text-decoration: none;
font-weight: 600;
color: #2A3775;
}
.container-intro p {
color: #555;
font-size: 16px;
text-align: left;
max-width: 1140px;
margin-top: 20px;
}
.container-intro p a {
text-decoration: none;
font-size: 16px;
text-align: left;
margin-top: 20px;
font-weight: 600;
color: #2A3775;
}
.container-intro a {
text-decoration: none;
font-size: 16px;
text-align: left;
color: #2A3775;
}
.container-intro span {
margin-top: 20px;
}
.container-intro span p{
margin-top: 20px;
padding-right: 10px;
display : inline;
font-size: 25px;
font-weight: 700;
color: #2A3775;
}
.container-intro1 {
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-content: center;
justify-content: center;
margin: 20px 20px 20px 20px;
background-color : #EDEDF1;
}
.container-intro1 ul li{
list-style: none;
}
.container-intro1 ul li span{
color: red;
font-weight: 600;
padding-right: 10px;
}
.container-intro1 h1 {
font-size: 25px;
font-weight: 600;
color: #2A3775;
text-align:center;
}
.container-intro1 h2 {
font-size: 25px;
font-weight: 700;
color: #2A3775;
text-align: center;
}
.container-intro1 p {
color: #555;
font-size: 16px;
text-align: left;
max-width: 1140px;
margin-top: 20px;
}
.container-intro1 p a {
text-decoration: none;
font-size: 16px;
text-align: left;
margin-top: 20px;
font-weight: 600;
color: #2A3775;
}
.container-intro1 span {
margin-top: 20px;
}
.container-intro1 span p{
margin-top: 20px;
padding-right: 10px;
display : inline;
font-size: 25px;
font-weight: 700;
color: #2A3775;
}
.services-intro {
display: flex;
background-color: #EDEDF1;
flex-wrap: wrap;
flex-direction: column;
align-content: center;
justify-content: center;
padding-left: 20px;
padding-right: 20px;
}
.services {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: -1px;
padding-bottom: 20px;
background-color: #EDEDF1;
}
.services p {
color: #555;
font-size: 16px;
text-align: left;
max-width: 1140px;
margin-top: 20px;
margin-bottom: 10px;
}
.services-marques {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: -1px;
padding-bottom: 20px;
background-color: #fff;
}
.services h2 {
font-size: 25px;
font-weight: 700;
color: #2A3775;
text-align: center;
}
.services-intro h1 {
font-size: 25px;
font-weight: 600;
color: #2A3775;
text-align:center;
}
.services-intro h2 {
padding-top : 20px;
padding-bottom : 10px;
font-size: 25px;
font-weight: 700;
color: #2A3775;
text-align: center;
margin: 0px 20px 0px 20px;
}
.services-intro h3 {
font-size: 22px;
font-weight: 700;
color: #2A3775;
text-align: left;
}
.services-intro p {
color: #555;
font-size: 16px;
text-align: left;
max-width: 1140px;
margin-top: 10px;
margin-bottom: 20px;
}
.container-intro-concess {
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-content: center;
justify-content: center;
margin: 20px 20px 20px 20px;
}
.container-intro-concess h1 {
font-size: 25px;
font-weight: 600;
margin-bottom: 20px;
color: #2A3775;
text-align:center;
}
.container-intro-concess h2 {
font-size: 25px;
font-weight: 700;
color: #2A3775;
}
.container-intro-concess p {
color: #555;
font-size: 16px;
text-align: left;
max-width: 1140px;
margin-top: 20px;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 15px;
}
.container p {
color: #555;
font-size: 16px;
text-align: left;
max-width: 1140px;
margin-top: 20px;
margin-bottom: 10px;
}
.container-suite {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.edito-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
/* margin-bottom: 20px; */
background-color: #fff;
flex-direction: column;
}
.edito-container p{
margin-top: 10px;
}
.banniere {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding-bottom: 15px;
}
.banniere1 {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 20px;
}
.container1 {
background-color: #EDEDF1;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 20px;
}
.faq {
display: flex;
flex-wrap: wrap;
margin-bottom: 20px;
}
.faq a {
padding-left:10px;
}
.faq b {
padding-left:10px;
}
.ajouter-pro {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 20px;
margin-right: 10px;
}
.ajouter-pro a {
padding-left:10px;
}
.ajouter-pro b {
padding-left:10px;
}
.ajouter-pro1 {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 20px;
}
.ajouter-pro1 a {
padding-left:10px;
}
.ajouter-pro1 b {
padding-left:10px;
}
#add-pro-btn {
background-color: #EE1C24;
font-family: 'Poppins', sans-serif;
color: white;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s ease;
}
#add-pro-btn:hover {
background-color: #EE1C24; /* Un peu plus foncé au survol */
}
.card {
background-color: #ffffff;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
border-radius: 10px;
padding: 30px 20px;
width: 30%;
margin-bottom: 30px;
transition: box-shadow 0.3s ease;
margin: 10px;
}
.card h2 {
font-size: 24px;
font-weight: 600;
color: #2A3775;
margin-bottom: 15px;
}
.card p {
font-size: 16px;
color: #555;
margin-bottom: 20px;
}
.card p a {
text-decoration: none;
color: #fff;
}
.card h3 a {
text-decoration: none;
color: #2A3775;
}
.card2 {
background-color: #ffffff;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
border-radius: 10px;
padding: 10px 20px;
margin-bottom: 30px;
transition: box-shadow 0.3s ease;
margin: 10px;
width:1160px;
}
.card2 ul {
color: #555;
font-size: 16px;
line-height: 1.6;
max-width: 1140px;
margin: 15px auto;
}
.card2 ul li {
color: #555;
line-height: 1.6;
align-items: center;
list-style-type: none;
}
.card2 ul li::before {
padding-right: 8px;
}
.card2 h2 {
font-size: 24px;
font-weight: 600;
color: #2A3775;
margin-bottom: 15px;
}
.card2 h3 {
font-size: 20px;
font-weight: 600;
color: #2A3775;
margin-top: 15px;
}
.card2 p {
font-size: 16px;
color: #555;
margin-bottom: 20px;
margin-top: 10px;
}
.card2 p a {
text-decoration: none;
color: #fff;
}
.card2 h3 a {
text-decoration: none;
color: #2A3775;
}
.card2 form {
font-size: 20px;
color: #2A3775;
margin-top: 15px;
font-family: 'Poppins', sans-serif;
}
.card2 form p {
font-size: 16px;
color: #555;
margin-bottom: 20px;
display : flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
}
.card2 form p label {
color: #2A3775;
font-family: 'Poppins', sans-serif;
font-weight: bold;
}
.card2 p select{
font-family: 'Poppins', sans-serif;
}
.card2 span {
font-weight: 600;
color: #EE1C24;
font-size: 20px;
font-family: 'Poppins', sans-serif;
}
.card2 form input {
width : 30%;
font-family: 'Poppins', sans-serif;
height: 35px;
}
.card2 form p a {
text-decoration: none;
color: #2A3775;
}
.card2 form textarea {
width : 100%;
font-family: 'Poppins', sans-serif;
}
.card2 button {
background-color: #EE1C24;
font-family: 'Poppins', sans-serif;
color: white;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.card2 button:hover {
background-color: #EE1C24; /* Un peu plus foncé au survol */
}
.card1 {
background-color: #ffffff;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
border-radius: 10px;
padding: 30px 20px;
transition: box-shadow 0.3s ease;
}
.card3 {
background-color: #ffffff;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
border-radius: 10px;
padding: 30px 20px;
transition: box-shadow 0.3s ease;
}
.card3 h2 {
font-size: 24px;
font-weight: 600;
color: #2A3775;
margin-bottom: 15px;
}
.card3 p {
font-size: 16px;
color: #555;
}
.card3 p a {
text-decoration: none;
color: #fff;
}
.card3 h3 a {
text-decoration: none;
color: #2A3775;
}
.card-intro {
background-color: #ffffff;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
border-radius: 10px;
padding: 30px 20px;
transition: box-shadow 0.3s ease;
}
#regions, #departments {
width: 100%;
padding: 12px 15px;
font-size: 16px;
border: 1px solid #ddd;
border-radius: 8px;
outline: none;
background-color: #fff;
transition: border-color 0.3s ease;
font-family: 'Poppins', sans-serif;
}
#regions:focus, #departments:focus {
border-color: #2A3775;
}
.region-map img {
max-width: 100%;
height: auto;
border-radius: 8px;
margin-top: 20px;
}
.card-index {
background-color: #ffffff;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
border-radius: 10px;
padding: 30px 20px;
width: 30%;
margin-bottom: 30px;
transition: box-shadow 0.3s ease;
margin: 10px;
}
.card-index h2 {
font-size: 24px;
font-weight: 600;
color: #2A3775;
margin-bottom: 15px;
}
.card-index p {
font-size: 16px;
color: #555;
margin-bottom: 20px;
}
.card-index p a {
text-decoration: none;
font-weight: 600;
color: #2A3775;
}
.card-index h3 a {
text-decoration: none;
color: #2A3775;
}
@media (max-width: 768px) {
.card {
width: 100%;
}
.card1 {
width: 100%;
}
.card2 {
width: 100%;
}
.card-index {
width: 100%;
}
.card2 form {
width: 100%;
}
.card2 form label {
width: 100%;
}
.card2 form input {
width: 100%;
}
.card2 form textarea {
width: 100%;
}
.card3 {
width: 100%;
}
.card-intro {
width: 100%;
}
.region-map img {
margin-top: 15px;
}
}
/* Section avec Dégradé */
.last-section-intro {
background: #defcfb;
padding: 20px 20px;
font-family: 'Poppins', sans-serif;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.last-section-intro h2 {
font-size: 25px;
font-weight: 700;
color: #2A3775;
text-align: center;
}
.last-section-intro p {
color: #555;
font-size: 16px;
text-align: left;
max-width: 1140px;
margin-top: 20px;
}
/* Section avec Dégradé */
.intro-section {
background: #d8feff;
padding: 20px 20px;
font-family: 'Poppins', sans-serif;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.intro-section h2 {
font-size: 25px;
font-weight: 700;
color: #2A3775;
text-align: center;
}
.intro-section p {
color: #555;
font-size: 16px;
text-align: left;
max-width: 1140px;
}
.last-section {
background: #defcfb;
padding-bottom: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
font-family: 'Poppins', sans-serif;
}
/* Cards - Derniers Kinés et Derniers Avis */
.card h3 {
color: #2A3775;
margin-bottom: 15px;
font-size: 24px;
}
/* Derniers Kinés */
.last-pros {
display: flex;
flex-direction: column;
}
.pros-item {
padding: 10px 0;
border-bottom: 1px solid #eee;
}
.pros-item:last-child {
border-bottom: none;
}
.pros-item a {
text-decoration: none;
color: #2A3775;
font-weight: 500;
}
.pros-item a:hover {
color: #fff;
background-color: #2A3775;
padding-left: 10px;
}
/* Derniers Avis */
.last-reviews {
display: flex;
flex-direction: column;
}
.last-reviews a{
color: #2A3775;
text-decoration: none;
}
.review-item {
padding: 10px 0;
border-bottom: 1px solid #eee;
}
.review-item p a {
color: #2A3775;
text-decoration: none;
}
.review-item:last-child {
border-bottom: none;
}
.review-item p {
color: #555;
font-size: 16px;
}
.review-item .reviewer {
color: #2A3775;
font-weight: 500;
margin-bottom: 5px;
}
/* Hover Effect */
.card:hover {
transform: translateY(-5px);
}
/* Section Dernières Actualités */
.latest-blog-section-intro {
background-color: #f0f0f0; /* Couleur discrète grise claire */
padding: 20px 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'Poppins', sans-serif;
}
.latest-blog-section-intro h2 {
font-size: 25px;
font-weight: 700;
color: #2A3775;
text-align: center;
}
.latest-blog-section-intro h3 {
color: #2A3775;
font-weight: 700;
font-size: 22px;
max-width: 1140px;
margin: 15px auto;
}
.latest-blog-section-intro p {
color: #555;
font-size: 16px;
text-align: left;
max-width: 1140px;
margin-top: 20px;
}
.latest-blog-section-intro a {
color: #FF9F43;
font-weight: bold;
text-decoration: none;
}
.latest-blog-section {
background-color: #f0f0f0; /* Couleur discrète grise claire */
padding-bottom: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 30px;
font-family: 'Poppins', sans-serif;
}
.blog-card {
background-color: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
border-radius: 8px;
padding: 20px;
width: 90%;
display: flex;
flex-direction: column;
transition: transform 0.2s ease;
max-width: 1140px;
}
.blog-card h3 {
color: #2A3775;
margin-bottom: 15px;
font-size: 24px;
}
.blog-card p {
color: #555;
font-size: 16px;
line-height: 1.6;
}
.blog-card a {
text-decoration: none;
color: #2A3775;
font-weight: 500;
margin-top: 10px;
display: inline-block;
}
.blog-card a:hover {
color: #fff;
background-color: #2A3775;
padding: 5px 10px;
border-radius: 5px;
}
/* Hover Effect */
.blog-card:hover {
transform: translateY(-5px);
}
/* Section Explications */
.breadcrump-section {
background-color: #fff;
padding: 10px 10px;
font-family: 'Poppins', sans-serif;
text-align: center;
}
/* Section Explications */
.explanation-section {
background-color: #fff;
padding: 20px 20px;
font-family: 'Poppins', sans-serif;
align-content: center;
padding-left: 20px;
padding-right: 20px;
}
.explanation-section h2 {
color: #2A3775;
text-align: center;
margin-bottom: 25px;
font-weight: 700;
font-size: 25px;
}
.explanation-section p {
color: #555;
font-size: 16px;
line-height: 1.6;
max-width: 1140px;
margin: 15px auto;
}
.explanation-section ul {
color: #555;
font-size: 16px;
line-height: 1.6;
max-width: 1140px;
margin: 15px auto;
}
.explanation-section h3 {
color: #2A3775;
font-weight: 700;
font-size: 22px;
max-width: 1140px;
margin: 15px auto;
}
.explanation-section h4 {
color: #2A3775;
font-weight: 700;
font-size: 20px;
max-width: 1140px;
margin: 15px auto;
}
.explanation-section h5 {
color: #2A3775;
font-weight: 700;
font-size: 18px;
max-width: 1140px;
margin: 15px auto;
}
.explanation-section h6 {
color: #2A3775;
font-weight: 700;
font-size: 18px;
max-width: 1140px;
margin: 15px auto;
}
.explanation-section .highlight {
color: #FF9F43; /* Orange clair */
font-weight: bold;
}
.explanation-section a {
text-decoration: none;
color: #2A3775;
}
}
/* Réinitialisation des marges et paddings des */
.explanation-section ul {
list-style: none;
max-width: 1140px;
margin: 0 auto;
}
/* Styling des */
.explanation-section ul li {
color: #555;
line-height: 1.6;
align-items: center;
list-style-type: none;
}
.explanation-section ul li::before{
content: "✅";
padding-right: 8px;
}
/* Correction pour le centrage des icônes ou texte dans les */
.explanation-section ul li::marker {
color: #2A3775; /* Couleur des points */
}
/* Responsive pour les petits écrans */
@media (max-width: 768px) {
.explanation-section {
width:100%;
}
.explanation-section ul {
padding-left: 15px;
}
}
/* Section Recherche Villes Rapides */
.footer {
background-color: #03475F;
padding: 10px 20px;
text-align: center;
font-size: 16px;
}
.footer h2 {
color: #2A3775;
font-size: 25px;
font-weight: 600;
margin-bottom: 20px;
}
.footer p {
font-size: 16px;
color: #fff;
margin-bottom: 20px;
color: #fff;
line-height: 1.6;
font-family: 'Poppins', sans-serif;
}
.footer a {
color: #fff; /* Orange clair */
font-weight: bold;
line-height: 1.6;
text-decoration: none;
}
/* Grid de 3 colonnes */
.recherche-villes-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
max-width: 1200px;
margin: 0 auto;
}
.villes-prox-villes {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
max-width: 1200px;
margin: 0 auto;
margin-top: 20px;
}
.ville-card {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 8px;
padding: 20px;
text-align: center;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ville-card a {
color: #2A3775;
text-decoration: none;
font-size: 16px;
}
.ville-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 12px rgba(0,0,0,0.15);
}
.card-ville {
background-color: #00A9CD;
border: 1px solid #ddd;
border-radius: 8px;
padding: 20px;
text-align: center;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-ville a {
color: #fff;
text-decoration: none;
font-size: 16px;
font-weight: bold;
}
.card-ville:hover {
transform: translateY(-5px);
box-shadow: 0 8px 12px rgba(0,0,0,0.15);
}
/* Responsive */
@media (max-width: 1024px) {
.recherche-villes-grid {
grid-template-columns: repeat(2, 1fr);
}
.villes-prox-villes {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.recherche-villes-grid {
grid-template-columns: 1fr;
}
.villes-prox-villes {
grid-template-columns: 1fr;
}
}
.features-list {
font-family: 'Poppins', sans-serif;
margin: 30px 0px 0px 0px;
padding: 0;
display: flex;
justify-content: center; /* Centrer le container principal */
}
.features-list ul {
list-style: none;
padding: 0;
display: flex;
flex-wrap: wrap; /* Gère les retours à la ligne en responsive */
gap: 5px; /* Espacement entre les items */
justify-content: center; /* Centre les items dans le container */
}
.features-list li {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
width: 120px; /* Largeur fixe pour garantir une bonne présentation */
margin: 10px 0;
}
.features-list .check-icon {
color: #EE1C24; /* Vert pour le check */
font-size: 24px;
line-height: 0.8;
}
.features-list .feature-text {
font-size: 14px;
color: #fff;
margin-top: 5px; /* Petit espace entre le check et le texte */
font-weight: bold;
}
.telopt2 {
background-image: linear-gradient(#0098D9,#0098D9);
margin: 10px;
padding: 5px 5px;
text-align: center;
transition: 0.5s;
background-size: 200% auto;
color: white;
box-shadow: 0 0 20px #eee;
border-radius: 10px;
display: block;
max-width: 30%;
}
a.telopt2:hover {
background-position: right center; /* change the direction of the change here */
color: #fff;
text-decoration: none;
}
/* Media query pour les petits écrans */
@media (max-width: 768px) {
.features-list li {
width: 100px; /* Réduit la largeur pour éviter trop d'espace */
}
.telopt2 {
max-width: 100%; /* Réduit la largeur pour éviter trop d'espace */
}
}
.telopt {
background-image: linear-gradient(#0098D9,#0098D9);
margin: 10px;
padding: 5px 5px;
text-align: center;
transition: 0.5s;
background-size: 200% auto;
color: white;
box-shadow: 0 0 20px #eee;
border-radius: 10px;
display: block;
}
a.telopt:hover {
background-position: right center; /* change the direction of the change here */
color: #fff;
text-decoration: none;
}
#textNum {
position: relative;
display: inline-block;
background: url(https://www.meilleurkine.fr/fond_tel_300_229x30_FR.png) no-repeat left top;
width: 229px;
height: 30px;
font-family: Arial;
font-weight: bold;
background-size: auto 30px;
vertical-align: middle;
margin-top: 10px;
}
#textNum a {
display: inline;
top: 0px;
left: 0px;
width: 125px;
height: 30px;
text-align: center;
font-size: 16px;
text-decoration: none;
color: #000;
line-height: 31px;
}
#textNum div {
display: inline-block;
color: #4a4a4a;
font-size: 14px;
margin-left: 5px;
font-weight: 700;
}
.breadcrumb {
font: .75em Poppins;
list-style: none;
}
.breadcrumb.bc2x {
font-size: 1em;
margin-top:5px;
margin-bottom:5px;
background-color: #fff;
}
.breadcrumb.bc3x {
font-size: 1.25em;
}
.breadcrumb p {
margin: 0;
}
.breadcrumb li {
display: inline-block;
margin-bottom: .2em;
}
.breadcrumb li a {
background-color: #EE1C24;
box-sizing: border-box;
color: #fff;
display: block;
padding: 0.25em 0.25em 0.25em 1.5em;
position: relative;
text-decoration: none;
transition: .25s;
}
.breadcrumb li a:before {
border-top: 1em solid transparent;
border-bottom: 1em solid transparent;
border-left: 1em solid #fff;
content: "";
position: absolute;
top: 0;
right: -1.25em;
z-index: 1;
}
.breadcrumb li a:after {
border-top: 1em solid transparent;
border-bottom: 1em solid transparent;
border-left: 1em solid #EE1C24;
content: "";
position: absolute;
top: 0;
right: -1em;
transition: .25s;
z-index: 1;
}
.breadcrumb li a:hover {
background-color: #0098d9;
}
.breadcrumb li a:hover:after {
border-left-color: #0098d9;
}
.breadcrumb li:last-child a {
background-color: #0098d9;
pointer-events: none;
}
.breadcrumb li:last-child a:after {
border-left-color: #0098d9;
}
.mainmenubtn {
background-color: #0098D9;
color: white;
border: none;
cursor: pointer;
padding:20px;
border-radius: 5px;
font-family: 'Poppins', sans-serif;
font-size: 16px;
}
.mainmenubtn:hover {
background-color: #0098D9;
}
.dropdown {
position: relative;
display: inline-block;
font-family: 'Poppins', sans-serif;
}
.dropdown-child {
display: none;
background-color: #0098D9;
min-width: 100px;
}
.dropdown-child a {
color: white;
padding: 20px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-child {
display: block;
}
.blockquote {
padding: 60px 80px 40px;
position: relative;
}
.blockquote p {
font-family: 'Poppins', sans-serif;
font-size: 16px;
font-weight: 700px;
text-align: center;
}
/*blockquote p::before {
content: "\f095";
font-family: 'Poppins', sans-serif;
display: inline-block;
padding-right: 6px;
vertical-align: middle;
font-size: 180px;
}*/
.blockquote:before {
position: absolute;
font-family: 'Poppins', sans-serif;
top: 0;
content:"\f10d";
font-size: 200px;
color: rgba(0,0,0,0.1);
}
.blockquote::after {
content: "";
top: 20px;
left: 50%;
margin-left: -100px;
position: absolute;
border-bottom: 3px solid #bf0024;
height: 3px;
width: 200px;
}
.otro-blockquote{
width:60%;
margin:20px auto;
font-family: 'Poppins', sans-serif;
color: #555555;
padding:1em 30px 1.2em 45px;
border-left:8px solid #EE1C24;
line-height:1.6;
position: relative;
background: linear-gradient(to bottom, rgba(216, 218, 220, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(216, 218, 220, 1) 100%);
}
.otro-blockquote::before{
font-family:Arial;
content: "\201C";
color:#EE1C24;
font-size:4em;
position: absolute;
left: 10px;
top:-8px;
}
.otro-blockquote::after{
content: '';
}
.otro-blockquote span{
display:block;
color:#333333;
font-style: normal;
font-weight: bold;
margin-top:1em;
}
/* Réinitialisation des marges et paddings des */
.otro-blockquote ul {
list-style: none;
max-width: 1140px;
padding-top : 10px;
margin: 0 auto;
}
/* Styling des */
.otro-blockquote ul li {
color: #555;
line-height: 1.6;
}
.otro-blockquote ul li::before{
content: "✅";
padding-right: 8px;
}
/* Correction pour le centrage des icônes ou texte dans les */
.otro-blockquote ul li::marker {
color: #2A3775; /* Couleur des points */
}
@media (max-width: 768px) {
.otro-blockquote {
width: 100%;
margin-left:10px;
margin-right: 10px;
}
}