:root {
  --BLEU: #006699;
  --NOIR: #1D1D1B;
  --NOIR2: #3f3c3b;
  --V8NOIR:#3c3c3b;
  --VERT: #60B885;
  --VERT: #66CC99;
  --VERT2: #1c9b95;
  --SAUMON: #EE8670;
  --BLEUCLAIR: #3287AF;
  --GRIS: #3C3C3B;
  --ORANGE: #f08671;
  --GRIS2: #7c7c7c;
  --GRIS3: #4e4d4d;
  --GRIS4: #7f7f7f;
  --BRUN: rgb(216, 138, 98);
  --RED: #a90202;
  --GRISLIZA: #525252;
}
.indivisible {
  white-space: nowrap;
}

@font-face {
  font-family: "TuffyRegular";
  src: url('../fonts/TuffyRegular.ttf') format("truetype");
  font-weight: 400;
}
@font-face {
  font-family: "TuffyBold";
  src: url('../fonts/TuffyBold.ttf') format("truetype");
  font-weight: 600;
}
@font-face {
  font-family: "trattatello";
  src: url('../fonts/Trattatello.ttf') format("truetype");
}

@font-face {
  font-family: "RobotoBold";
  src: url('../fonts/RobotoBold.ttf') format("truetype");
  font-weight: 600;
}

@font-face {
  font-family: "RobotoRegular";
  src: url('../fonts/RobotoRegular.ttf') format("truetype");
  font-weight: 400;
}

@font-face {
  font-family: "RobotoMed";
  src: url('../fonts/Roboto-Medium.ttf') format("truetype");
}


@font-face {
  font-family: "BebasNeue";
  src: url('../fonts/BebasNeue-Regular.otf') format("opentype");
}



html {
  font-family: "RobotoRegular",sans-serif;
  color: var(--NOIR);
}

html,
body {
  margin: 0;
  padding: 0;
  font-size: 10px;
}

body {
  height: 100vh;
}

@media (min-width: 1801px) {

  html,
  body {
    font-size: 0.5vw;
  }
}


@media (max-width: 1800px) {

  html,
  body {
    font-size: 9px;
  }
}

@media (max-width: 1536px) {

  html,
  body {
    font-size: 8px;
  }
}

@media (max-width: 1280px) {

  html,
  body {
    font-size: 6.5px;
  }
}

@media (max-width: 1097.14px) {

  html,
  body {
    font-size: 7px;
  }
}

@media (max-width: 960px) {

  html,
  body {
    font-size: 0.7vw;
  }
}

@media (max-width: 640px) {

  html,
  body {
    font-size: 0.75vw;
  }

}

.page {
  min-height: auto;
  max-width: 100%;
  width: 100% !important;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.grandLettre {
  font-size: 7rem;
  color: #66CC99;
}

.content_main,
#histoire1 {
  margin: auto;
  flex: 1;
  width: 100% !important;
  max-width: 85%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.consomateur_img {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.content,.content_sans_height,
.shortContent {
  flex: 1;
  max-width: 250rem !important;
  display: flex;
  flex-direction: column;
}
.content_sans_height,
.shortContent {
  justify-content: flex-start;
}
.content{
  justify-content: center;
}
.content {
  margin: auto;
  min-height: 75rem;
  align-items: center;
}
#content_cons{
  min-height: 65rem;
}

.content_sans_height {
  margin: auto;
  align-items: center;
}
@media (max-width: 1281px) and (max-height: 651px) {
  .content_sans_height {
  }
  #content_main3 {
    min-height: 55rem !important;
}
}

.shortContent {
  margin: auto;
  align-items: center;
}
#btn_part2 {
  background-color: var(--BLEU);
  max-width: 25% !important;
  border: 2px solid var(--BLEU) !important;
  margin: 0;
  min-width: 50rem;
  margin-top: -3%;
}
#btn_part5 {
  background-color: var(--BLEU);
  max-width: 25% !important;
  border: 2px solid var(--BLEU) !important;
  margin: 0;
  min-width: 50rem;
  margin-top: -3%;
}


#btn_part3 {
  background-color: var(--SAUMON);
  border: 2px solid var(--SAUMON) !important;
  margin: 0;
  min-width: 35rem;
}

#btn_part2:hover,#btn_part3:hover,#btn_part5:hover {
  color: var(--BLEU);
  background-color: white !important;
  box-shadow: 3px 3px 3px 1px #c5c3c3;
}
@media (max-aspect-ratio: 3/4) {

	#btn_part2,#btn_part3,#btn_part5 {
    min-width: 50vw;
    margin-top: 12%;
    padding: 8px;
	}

  #btn_part2,#btn_part3{
		margin: 5rem;
  }
  #btn_part5{
    margin: auto;
  }
}
#main1_left3_pa {
  color: var(--VERT);
  font-family: "RobotoRegular";
  font-weight: 900;
}

.orange_link {
  color: var(--ORANGE);
}

.dark_link {
  text-decoration: none;
  font-weight: 600;
}

.orange_link,
.vert_link,
.noir_link {
  text-decoration: underline;
  position: relative;
  transition: color 0.3s ease;
  cursor: pointer;
  font-style: italic;
}
.custom_link{
  text-decoration: underline;
}
.vert_link:hover {
  color: #0ace03;
}



.orange_link:hover,
.dark_link:hover {
  color: #ff5500;
}

.ContactModal,
.cguLink {
  cursor: pointer;
}
.ContactModal1pro,
.cguLink {
  cursor: pointer;
}

.ContactModal:hover {
  color: var(--ORANGE);
}

.ContactModalpro:hover{
  color: #006699;
}

.ContactModal:hover,
.cguLink:hover {
  color: var(--ORANGE) !important;
}

.noir_link:hover {
  color: #e78a5c !important;
}

.bleu_text {
  color: var(--BLEU);
  font-size: 5rem;
  font-family: "TuffyRegular";
}

.orang_text {
  color: var(--ORANGE);
  font-size: 4.5rem;
  font-family: "TuffyRegular";
}

.vert_text {
  color: var(--VERT);
  font-size: 5rem;
  font-family: "TuffyRegular";
}

.vert_text_Roboto {
  color: var(--VERT2);
  font-size: 3rem;
  font-family: "RobotoBold";
  text-align: center;
}


.vert_text_2 {
  color: var(--VERT);
  font-size: 5rem;
  font-family: "TuffyRegular";
}

.bleu_text_p1 {
  color: var(--NOIR);
  font-weight: 500;
  font-size: 3rem;
  /* font-family: "TuffyRegular"; */
  font-family: Arial, sans-serif;
}

#bold_text{
  font-size: 3rem;
  font-family: Arial, sans-serif;
  margin-top: 16%;
  /* font-weight: bold; */
  margin-left: 3%;
}
.small_text{
  color: var(--BLEU);
  font-weight: bold;
  font-size: 3rem;
  font-family: "TuffyBold", sans-serif;
}
.tuffyBold{
  font-weight: bold;
  font-family: "TuffyBold", sans-serif;
}

.bleu_text_Bold,.bleu_text_Bold1{
  color: var(--BLEU);
  font-family: "TuffyRegular";
}
.bleu_text_Bold_hero{
  color: var(--BLEU);
  font-family: "TuffyBold";
  font-weight: bold;
  font-size: 2.9rem;
}
.bleu_text_hero{
  color: var(--BLEU);
  font-family: "TuffyRegular";
  font-size: 2.9rem;
}
.bleu_text_Bold_Roboto{
  color: var(--BLEU);
  font-family: "RobotoBold",sans-serif;
  font-weight: bold;
  font-size: 2.9rem;
}
.bleu_text_Bold1 {
  font-size: 3.7rem;
}
.bleu_text_Bold {
  font-size: 3.8rem;
}

.bleu_text_Regular {
  color: var(--BLEU);
  font-weight: 500;
  font-size: 3.5rem;
  /* font-family: Arial, sans-serif; */
  font-family: "RobotoRegular";
}

button:active {
  transform: scale(0.95);
}


#espace {
  padding: 3rem;
}

.content_conso {
  margin: auto;
  flex: 1;
  width: 100%;
  max-width: 113rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

button:not([class^="swal2"]) {
  font-size: 2.5rem;
  color: white;
  background-color: var(--BLEU);
  padding: 1rem;
  border-radius: 1rem;
  border: 2px solid var(--BLEU);
  margin: 1rem;
  box-shadow: 1px 2px 2px 2px #c5c3c3;
  cursor: pointer;
}

@media (max-aspect-ratio: 3/4) {
  button:not([class^="swal2"]) {
    font-size: 3.5vw;
    padding: 2rem;
    /* margin-bottom: 8rem; */
  }
  .bleu_text_Bold_hero,.bleu_text_Bold_Roboto,.bleu_text_hero{
    font-size: 4.5vw !important;
  }
 
  .bleu_text_Bold1 {
    font-size: 5vw;
  }
  .bleu_text_Bold {
    font-size:4.5vw;
  }
  .bleu_text_Regular {
    font-size: 4.5vw;
  }


  .bleu_text_p1 {
    font-size: 4vw;
    display: flex;
    justify-content: start;
    /* margin-left: 3%; */
  }
  .small_text{
    font-size: 4vw;
  }
  #coindespros1_left{
    font-size: 3.2vmin;
    margin-left: -76% !important;
  }
}

.preserve-line-breaks {
  white-space: pre;
}

@media (max-width: 1008px) {
  .content_conso {
    margin: auto;
    max-width: 105rem;
  }
}

.box_text {
  font-size: 3.5rem;
  font-weight: 600;
  padding: 1.2rem;
  font-family: "TuffyRegular";
  color: white;
  letter-spacing: 0.1rem;
}

.text_gris {
  color: var(--GRIS2);
  font-family: "RobotoRegular", sans-serif;
  font-size: 3rem;
}

.text_gris2 {
  color: var(--GRIS2);
  margin: 3rem;
  font-size: 3.5rem;
  font-weight: 600;
  font-family: "RobotoRegular";
}
.text_Noir_color {
  color: var(--V8NOIR) !important;
  font-family: "RobotoBold", sans-serif;
  font-weight: 600;
  font-size: 2.8rem;
}
.text_Noir_color3 {
  color: #525252 !important;
  font-family: "RobotoBold", sans-serif;
  font-size: 3.2rem;
}
.text_Noir_color_pro {
  color: var(--V8NOIR) !important;
  font-family: "RobotoBold", sans-serif;
  font-weight: 600;
  font-size: 2.9rem !important;
}
.span_noir_color{
  color: var(--V8NOIR) !important;
  font-weight: 600;
  font-family: "RobotoBold",sans-serif;
  font-size: 2.9rem;
}
.span_teal_color{
  color: hsl(173, 53%, 48%)!important;
  font-weight: 600;
  font-family: "RobotoBold",sans-serif;
  font-size: 2.9rem;
}
.text_Noir{
  color: var(--NOIR2);
  font-family: "RobotoRegular", sans-serif;
  font-size: 2.9rem;
}

.text_noir_s,
.text_noir_s_conso {
  font-size: 2.6rem;
  font-family: "RobotoRegular";
}

.text_noir_s {
  color: var(--NOIR2);
}

@media (max-width: 1280px) {

  .text_noir_s {
    font-size: 2.5rem;
  }
  .text_noir_s_conso {
    font-size: 2.65rem;
  }
}

.text_noir_Astuce {
  font-size: 2rem;
  color: var(--NOIR2);
  font-family: "RobotoRegular";
  font-style: italic;
}


.text_vert_p1 {
  color: var(--VERT);
  font-family: "RobotoRegular";
  font-size: 2.5rem;
}

.text_Noir_RobotoMedium {
  color: var(--BLEU);
  font-family: "RobotoMed";
  font-size: 4.5rem;
  padding: 10rem 5rem 5rem 5rem;
  letter-spacing: 0.2rem;
}

.text_Noir2 {
  color: var(--NOIR2);
  font-size: 3.3rem;
  font-weight: 600;
  font-family: "RobotoBold";
}

.text_Noir3 {
  color: var(--NOIR2);
  font-size: 3rem;
  font-family: "RobotoBold";
}
.text_Blue3{
  color: var(--BLEU);
  font-size: 3rem;
  font-family: "RobotoBold";
}

.text_vert {
  color: var(--VERT);
  margin: 3rem;
  font-size: 3.5rem;
  font-family: 'TuffyRegular';
  font-weight: 600;
}

.text_center {
  text-align: center;
}

@media (max-aspect-ratio: 3/4) {
  .text_gris {
    grid-area: d;
    font-size: 2.5vh;
    margin: auto;
  }
  #solliciter_marque {
    padding: 10rem !important;
  }
  #scanFooter{
    position: absolute;
    bottom: 0;width: 100%;
  }
  .text_Noir{
    margin-bottom: 12rem;
    font-size: 3.5vw;
  }
}

#main1_title {
  color: var(--ORANGE);
  font-family: "RobotoRegular", sans-serif;
  font-size: 4.5rem;
  padding: 4rem;
  text-align: center;
  animation: fadeIn2 1.5s ease-out;
  letter-spacing: 0.1rem;
  padding-bottom: 6rem;
}

.orange_title {
  color: var(--ORANGE);
  font-family: "TuffyRegular";
  font-size: 5rem;
  animation: fadeIn2 1.5s ease-out;
  letter-spacing: 0.1rem;
}
.bleu_title {
  color: var(--BLEU);
  font-family: "TuffyRegular";
  font-size: 4.5rem;
  animation: fadeIn2 1.5s ease-out;
  letter-spacing: 0.1rem;
  max-width: 100%;
  margin-top: 30px;
  margin-bottom:42px;
}

#headband4,
#headband2,
#headband3,
.headband {
  color: white;
  font-family: "TuffyRegular";
  Letter-spacing: 1px;
  font-size: 5rem;
  text-align: center;
  padding: 5rem;
}
#headbandV8-1{
  background-image: url(../img/background_title.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    font-family: "RobotoRegular";
    Letter-spacing: 1px;
    font-size: 4.5rem;
    width: 100%;
    height: 22rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 3rem;
}
#headbandV8-11{
  background-image: url(../img/background_title.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    font-family: "RobotoRegular",sans-serif;
    Letter-spacing: 1px;
    font-size: 4.5rem;
    width: 100%;
    height: 22rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
#headbandV8-2{
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    font-weight: 100;
    font-family: 'TuffyRegular';
    Letter-spacing: 1px;
    font-size: 5rem;
    width: 100%;
    height: 10rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 8rem 0;
}

.button_bt:hover {
  color: var(--BLEU);
  background-color: white;
  box-shadow: 3px 3px 3px 1px #c5c3c3;
}
button_bt{
  cursor: pointer;
}


.blue_normal_text {
  color: var(--BLEU);
}

/* Définition des l'animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes scaleAndFade {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.orange_title_2 {
  color: var(--ORANGE);
  font-family: "TuffyRegular";
  font-size: 4rem;
  text-align: center;
}

/* Ajout de l'animation 
 animation: scaleAndFade 1.5s ease-in-out;
 */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Ajout de l'animation 
animation: fadeInUp 1.5s ease-out;*/
@keyframes fadeIn2 {
  0% {
    opacity: 0;
    transform: translateY(0);
    /* Ajustez cette valeur à 0 pour éviter le déplacement vertical */
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    /* Ajustez cette valeur à 0 pour éviter le déplacement vertical */
  }
}

#main_content {
  text-align: center;
  width: 80%;
}

.text_Noir1_2 {
  font-family: "RobotoBold"
}

#logoGS {
  max-width: 50rem;
  height: auto;
  width: 35rem;
}

.margin3 {
  margin: 3rem 0;
}

.margin2 {
  margin: 2rem 0;
}

.index_div {
  margin-top: 15rem;
}
.index_div_hero {
  margin-top: 16rem;
}
@media (max-aspect-ratio: 3/4) {
  .index_div,.index_div_hero  {
    margin-top: 10vh;
  }

}

@media (max-aspect-ratio: 3/4) {

  .orang_text {
    grid-area: a;
    font-size: 4.5vw !important;
    font-weight: 600;
    margin: auto;
  }
  .bleu_text {
    grid-area: a;
    font-size: 4.5vw !important;
    font-weight: 600;
    margin: auto;
  }

  .vert_text {
    font-size: 6vw !important;
    font-weight: 600;
    margin: auto;
    text-align: justify;
  }
}

@media (max-width: 640px) {
  .content,.content_sans_height {
    max-width: 99% !important;
  }
}

@media (max-aspect-ratio: 3/4) {
  .content,.content_sans_height {
    max-width: 100% !important;
  }
}

@media (max-aspect-ratio: 3/4) {

  .text_Noir,
  .text_vert_p1,.span_noir_color,.span_teal_color {
    font-size: 3.5vw;
    margin: auto;
    text-align: start;

  }
  .text_Noir_color {
    font-size: 3.5vw;
    text-align: start;
  }
  .text_Noir_color3 {
    font-size: 4vw;
    text-align: start;
  }
  .text_Noir_color_pro {
    font-size: 3.5vw !important;
    text-align: start;
  }
  .un_enjeu{
    font-size: 4.3vw !important;
  }
  .boxTitle2{
    border-radius: 10px !important;
  }
  .arrow2 {
    width: 3.5rem !important;
    height: 3.5rem !important;
  }
  .text_noir_s,
  .text_noir_s_conso {
    font-size: 3.5vw;
    margin: auto;
    text-align: start;
  }

  .text_noir_Astuce {
    font-size: 2.5vw;
    margin: auto;
    text-align: start;
  }

  .text_Noir3 {
    font-size: 5vw;
    margin: auto;
    /* text-align: start; */
  }
  .text_Blue3{
    font-size: 4vw;
    margin: auto;
    /* margin-left: -70%; */
  }
  #div_Transformation{
    min-height: 27rem;
    gap:3rem ; 
    flex-direction: column ;
    /* margin-left: -69%; */
    /* background-color:#e3eff5; */
  }

  .vert_text_Roboto,
  .vert_text_2,
  .text_Noir2 {
    font-size: 4.5vw;
    margin: auto;
    text-align: left;

  }
}

@media (max-aspect-ratio: 3/4) {

  .text_Noir_RobotoMedium {
    font-size: 4.5vw;
    padding: 5rem 10rem;
    margin-left: 12%;
  }

  .grandLettre {
    font-size: 10vw;
    color: #66CC99;
  }
}

.deplacerMobile {
  display: none;
}

.deplacerweb {
  display: block;
}

@media (max-aspect-ratio: 3/4) {
  .deplacerMobile {
    display: block;

  }

  #top_text0 {
    padding: 10rem 10rem 2rem 10rem;
  }

  .deplacerweb {
    display: none;
  }
  .orange_title_2 {
    font-size: 2.5vh;
  }
}

@media (min-aspect-ratio: 3/4) {
  .deplacerMobile {
    display: none;
  }

  .deplacerweb {
    display: block;
  }
  
}

.deplacerM {
  display: none;
}

.deplacerW {
  display: block;
}

@media (max-width: 961px) {
  .deplacerM {
    display: block;

  }

  .deplacerW {
    display: none !important;
  }
}

@media (min-width: 961px) {
  .deplacerM {
    display: none;
  }

  .deplacerW {
    display: block !important;
  }
}

@keyframes vibrateAndRotateImage {
  0% {
    transform: translateX(0) rotate(0deg);
  }

  25% {
    transform: translateX(-5px) rotate(-5deg);
  }

  50% {
    transform: translateX(5px) rotate(5deg);
  }

  75% {
    transform: translateX(-5px) rotate(-5deg);
  }

  100% {
    transform: translateX(0) rotate(0deg);
  }
}
*:disabled {
  opacity: 0.6 !important;
}
*:disabled:hover {
  color: var(--BLEU);
}

.image_Phone_animation {
  position: relative;
  /*animation: vibrateAndRotateImage 1s linear;*/
}

.containerTitle,.containerTitleP {
	display: flex;
	align-items: center;
	justify-content: center;
}
#containerTitle{
  margin-top: 12%;
}

.arrow {
	width: 2.5rem;
	height: 2.5rem;
	border-right: 0.55rem solid rgb(18, 114, 125);
	border-bottom: 0.55rem solid rgb(18, 114, 125);
	/* Arrow color */
	transform: rotate(-45deg);
	/* Rotate to create the arrow shape */
	margin: 0 4rem;
	/* Space between arrow and box */
}
.arrow2 {
	width: 2.5rem;
	height: 2.5rem;
	border-right: 0.55rem solid rgb(18, 114, 125) ; 
	border-bottom: 0.55rem solid rgb(18, 114, 125) ; 
	/* Arrow color */
	transform: rotate(-45deg);
	/* Rotate to create the arrow shape */
	margin: 0 4rem;
	/* Space between arrow and box */
}
.arrow-left {
	transform: rotate(135deg);
	/* Rotate for left arrow */
}

.arrow-right {
	transform: rotate(-45deg);
	/* Rotate for right arrow */
}

.boxTitle {
	padding: 4rem 6rem;
	border: 2px solid rgb(18, 114, 125);
	border-radius: 10px;
	color: rgb(18, 114, 125);
	background-color: white;
	text-align: center;
	cursor: pointer;
}

.boxTitle2 {
	padding: 3rem 4rem;
	border: 2px solid rgb(18, 114, 125);
	border-radius: 25px;
	color: rgb(18, 114, 125);
	background-color: white;
	text-align: center;
	cursor: pointer;
}
#btn_plus_info:hover{
	color: white;
    background-color: rgb(18, 114, 125);
    box-shadow: 3px 3px 3px 1px #c5c3c3;
}
#btn_plus_soutien:hover{
	color: white;
    background-color: rgb(18, 114, 125);
    box-shadow: 3px 3px 3px 1px #c5c3c3;
}

@media(max-aspect-ratio: 3/4){
  .arrow {
    width: 3.5rem !important;
    height: 3.5rem !important;
  }
}
 
.headroom--pinned {
  position: fixed;
  top: 0;
  transition: transform 0.3s ease-in-out;
  transform: translateY(0);
}

.headroom--unpinned {
  position: fixed;
  top: 0;
  transition: transform 0.3s ease-in-out;
  transform: translateY(-100%);
}