@import url(/css/sources/header.css);
@import url(/css/sources/hero.css);
@import url(/css/sources/events.css);
@import url(/css/sources/nouveautes.css);
@import url(/css/sources/nos-services.css);
@import url(/css/sources/contact.css);
@import url(/css/sources/nos-partenaires.css);
@import url(/css/sources/temoignage.css);
@import url(/css/sources/suivez-nous.css);
@import url(/css/sources/footer.css);
@import url(/css/sources/location.css);

/* ======================================
   Base responsive
   Empêche les médias de dépasser la largeur de l'écran : c'est la
   cause la plus fréquente de défilement horizontal sur mobile.
   Placé après les @import pour ne pas les invalider (la règle CSS
   veut que @import précède toute déclaration).
====================================== */
img,
svg,
video,
iframe {
  max-width: 100%;
}

html {
  /* Empêche iOS d'agrandir le texte en orientation paysage. */
  -webkit-text-size-adjust: 100%;
}

@font-face {
    font-family: Montserrat-bold;
    src: url(/fonts/Montserrat-Bold.ttf);
}

@font-face {
    font-family: Montserrat-regular;
    src: url(/fonts/Montserrat-Regular.ttf);
}

@font-face {
    font-family: "open-sans";
    src: url(/fonts/OpenSans-SemiBold.ttf);
}

@font-face {
    font-family: "poppins-bold";
    src: url(/fonts/Poppins-Bold.ttf);
}

@font-face {
    font-family: "open-sans";
    src: url(/fonts/OpenSans-SemiBold.ttf);
}

@font-face {
    font-family: "poppins-bold";
    src: url(/fonts/Poppins-Bold.ttf);
}


*,*::after,*::before{
    margin: 0 0;
    padding: 0 0;
    box-sizing: border-box;
}

body{
  visibility: visible;
  background-color: rgb(255, 255, 255);
  font-style: normal;
  font-weight: 400;
  font-family: var(--Montserrat-regular);
}

html{
  scroll-behavior: smooth;
}

.title{
  text-align: center;
  text-transform: uppercase;
  font-family: var(--Montserrat);
  font-size: clamp(16px,3vw,40px);
  letter-spacing: clamp(1px, 1vw, 2px);
  padding: 1rem;
}
span{
  color: red;
}

/* variables */
:root{
    --Montserrat : "Montserrat-bold";
    --Montserrat-regular : "Montserrat-regular";
    --Open-Sans: "open-sans";
    --poppins-bold : "poppins-bold";
    --raleway-semibold : "raleway-semibold";
    --open-sans-regular : "open-sans-regular";
    --sf-pro-display-bold : "sf-font-display";
    --poppins-regular: "poppins-regular";
    --poppins-thin: "poppins-thin";

    /* Espacement commun à toutes les sections.
       Les clamp() couvrent mobile et bureau : chaque section réglait
       jusqu'ici son propre rembourrage, de 0 à 10vw en horizontal, d'où
       des marges différentes d'une section à l'autre. */
    --section-x: clamp(1rem, 6vw, 5rem);
    --section-y: clamp(2rem, 5vw, 3.5rem);
}

.section-divider1 {
  margin-bottom: -1px;
  height: 60px;
  background-color: #ff0000;
  border: 1px solid red;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.section-divider2 {
  margin-top: -1px;
  height: 60px;
  background-color: rgb(255, 0, 0);
  clip-path: polygon(0 0, 100% 100%, 100% 0);

}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}




@media (max-width: 768px) {
.section-divider1 {
  height: 30px;
  background-color: #ff0000;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.section-divider2 {
  height: 30px;
  background-color: rgb(255, 0, 0);
  clip-path: polygon(0 0, 100% 100%, 100% 0);
}

}