/**
 * Table of Contents:
 *
 * 1.0 - Basic Structure
 * 2.0 - Media Queries
 * ---------------------------------------
 -------------------------------------
 */

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;600;700&display=swap");

:root {
  --color-primary: #272726;
  --bg-color: #f7f7f7;
}

html {
  font-size: 16px;
}
body {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(2, 6, 9, 0.6);
}

.text-secondary {
  color: rgba(255, 255, 255, 0.8);
}

h2, h4, h5, h6 {
  color: var( --color-primary);
}


h1,
h4,
.h4 {
  font-weight: 700;
}

h2,
h3,
.h5,
h6 {
  font-weight: 600;
}

h5,
.h6 {
  font-weight: 500;
}
h1 {
  font-size: 2.5rem;
}
h2, 
h3 {
  font-size: 2rem;
  margin-bottom: 1rem;
}
h4,
.h4,
h5,
.h5 {
  font-size: 1.25rem;
}
.p {
  font-size: 1rem;
}
figure,
img {
	max-width: 100%;
}

ul {
	margin: 0;
	padding: 0;
}
ul li {
	list-style: none;
}

a {
  display: inline-block;
}
a,
a:hover {
  display: inline-block;
  text-decoration: none;
}

.text-blue{
  color: #2616EB;
}

/* Btn */
.btn {
  font-weight: 400;
  padding: 0.75rem 1rem;
  border-radius: 100px;
}
.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.btn-outline-primary {
  background-color: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.btn-secondary {
  background-color: #fff;
  border-color: #fff;
  color: var(--color-primary);
}
.btn:hover,
.btn:focus-visible,
.btn-check:focus + .btn,
.btn:focus,
.btn:first-child:active,
:not(.btn-check) + .btn:active,
.btn:first-child:active:focus-visible,
:not(.btn-check) + .btn:active:focus-visible {
  box-shadow: none;
  transition: 0.5s ease-in;
}
.btn:hover.btn-primary,
.btn:focus-visible.btn-primary,
.btn-check:focus + .btn.btn-primary,
.btn:focus.btn-primary,
.btn:first-child:active.btn-primary,
:not(.btn-check) + .btn:active.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus-visible,
.btn-check:focus + .btn.btn-outline-primary,
.btn-outline-primary:first-child:active,
:not(.btn-check) + .btn:active.btn-outline-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.btn:hover.btn-secondary,
.btn:focus-visible.btn-secondary,
.btn-check:focus + .btn.btn-secondary,
.btn:focus.btn-secondary,
.btn:first-child:active.btn-secondary,
:not(.btn-check) + .btn:active.btn-secondary {
  background-color: #fff;
  border-color: #fff;
  color: var(--color-primary);
}

/* Définition des styles pour les inputs et les formulaires */
input, textarea, select {
  padding: 0.8125rem 1rem !important;
  border-radius: 24px !important;
  transition:all 0.3s;
}

input ,input:focus , textarea:focus , select:focus , input:hover , textarea:hover , select:hover {
    outline: none !important; 
    border: 1px solid rgba(32, 31, 31, 0.3);
}

input::placeholder ,textarea::placeholder, select::placeholder{
    color:var(--color-tertiary) !important; 
}

label {
  font-weight: 600;
  display: block;
}
select {
  width: 100%;
}

/* Slick */
.slick-slide {
	padding: 0 .75rem;
}


.logo {
  max-width: 8rem;
}

/* Text and background */
.liste , .number{
  padding: 0.5rem 1rem; 
  margin-left: 1.5rem;
}
.liste li{
  list-style-type: disc;
}

.background {
  background-color: var(--bg-color);
}

/**
  * 1.0 Basic Structure
  * ----------------------------------------------------------------------------
  */


/* Banner */
.banner {
  background: linear-gradient(rgba(2, 6, 9, 0.3) 100%, rgba(2, 6, 9, 0.3) 100%), url(assets/images/banner.webp) no-repeat;
  background-size: cover;
  background-position: center;
  padding: 9rem 0;
  text-align: center;
  color: #fff;
}

/* Temoignage */
.temoignage-item {
  box-shadow: 0px 0px 15px #0000000D;
  margin: 1rem 0.5rem;
  border-radius: 16px; 
}
.temoignage-img {
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 50%;
  object-fit: cover;
  overflow: hidden;
}


/* Newletter */
.newletter {
  background: linear-gradient(rgba(2, 6, 9, 0.3) 100%, rgba(2, 6, 9, 0.3) 100%), url("assets/images/img1.jpg") no-repeat;
  background-size: cover;
  background-position: center;
}

/* Security */
.security-content {
  margin-bottom: 1.5rem;
}
.security-content h4{
  position: relative;
  padding-left: 2rem;
}
.security-content h4::before {
  position: absolute;
  content: url(assets/images/bonbon.svg);
  left: -0.5rem;
}

/* Footer */
footer section:first-child {
  color: #080902;
} 
footer section:last-child {
  background-color: var(--color-primary);
  color: #fff;
} 
footer section:last-child a {
  color: #fff;
} 

.language-switcher {
  position: fixed; /* Reste en place lors du défilement */
  bottom: 20px;
  right: 20px;
  z-index: 1050; /* Doit être au-dessus de la plupart des autres éléments */
}

/* Optionnel : pour que le menu s'affiche joliment */
.language-switcher .dropdown-menu {
  min-width: auto; /* Le menu ne prend que la largeur nécessaire */
}

/**
  * 2.0 Media Queries
  * ----------------------------------------------------------------------------
  */

/* WordPress Media Queries */
@media (max-width: 600.98px) {
}
@media (min-width: 601px) and (max-width: 782.98px) {
}
@media (min-width: 783px) {
}

/* X-Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
}

/* Small devices (landscape phones, 576px, up to 768px) */
@media (min-width: 576px) and (max-width: 767.98px) {
}


/* Medium devices (tablets, 768px, up to 992px) */
@media (min-width: 768px) and (max-width: 991.98px) {
}

/* Large devices (desktops, 992px, up to 1200px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
}
/* Large devices (desktops, 992px) */
@media (min-width: 992px) {
  h1 {
    font-size: 3rem;
  }
  h2, 
  h3 {
    font-size: 2.5rem;
  }
  h4,
  .h4 {
    font-size: 1.5rem;
  }

  .p {
    font-size: 1.125rem;
  }

  
  /* Banner */
  .banner {
    padding: 18rem 0;
  }

}

/* X-Large devices (large desktops, 1200px, up to 1400px) */
@media (min-width: 1200px) and (max-width: 1399.98px) {
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
}