/* Importer les polices depuis Google Fonts */
/* @import url("https://fonts.googleapis.com/css2?family=Caramel&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Questrial&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Caramel&family=Nunito+Sans:opsz,wght@6..12,200;6..12,400&family=Philosopher&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Questrial&display=swap"); */
/* {
  /* remember to define focus styles! */
/* tables still need 'cellspacing="0"' in the markup */
/* } */

/* Définir les polices localement */
@font-face {
  font-family: 'Caramel';
  src: url('../../assets/fonts/Caramel-Regular.woff2') format('woff2'),
       url('../../assets/fonts/Caramel-Regular.woff') format('woff'),
       url('../../assets/fonts/Caramel-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Questrial';
  src: url('../../assets/fonts/Questrial-Regular.woff2') format('woff2'),
       url('../../assets/fonts/Questrial-Regular.woff') format('woff'),
       url('../../assets/fonts/Questrial-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../../assets/fonts/Montserrat-Regular.woff2') format('woff2'),
       url('../../assets/fonts/Montserrat-Regular.woff') format('woff'),
       url('../../assets/fonts/Montserrat-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../../assets/fonts/Montserrat-Bold.woff2') format('woff2'),
       url('../../assets/fonts/Montserrat-Bold.woff') format('woff'),
       url('../../assets/fonts/Montserrat-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Nunito Sans';
  src: url('../../assets/fonts/NunitoSans10pt-Regular.woff2') format('woff2'),
       url('../../assets/fonts/NunitoSans10pt-Regular.woff') format('woff'),
       url('../../assets/fonts/NunitoSans_10pt_Condensed-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Philosopher';
  src: url('../../assets/fonts/Philosopher-Regular.woff2') format('woff2'),
       url('../../assets/fonts/Philosopher-Regular.woff') format('woff'),
       url('../../assets/fonts/Philosopher-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}








* html,
* body,
* div,
* span,
* applet,
* object,
* iframe,
* h1,
* h2,
* h3,
* h4,
* h5,
* h6,
* p,
* blockquote,
* pre,
* a,
* abbr,
* acronym,
* address,
* big,
* cite,
* code,
* del,
* dfn,
* em,
* font,
* img,
* ins,
* kbd,
* q,
* s,
* samp,
* small,
* strike,
* strong,
* sub,
* sup,
* tt,
* var,
* dl,
* dt,
* dd,
* ol,
* ul,
* li,
* fieldset,
* form,
* label,
* legend,
* table,
* caption,
* tbody,
* tfoot,
* thead,
* tr,
* th,
* td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}
* :focus {
  outline: 0;
}
* body {
  line-height: 1;
  color: black;
  background: white;
}
* ol,
* ul {
  list-style: none;
}
* table {
  border-collapse: separate;
  border-spacing: 0;
}
* caption,
* th,
* td {
  text-align: left;
  font-weight: normal;
}
* blockquote:before,
* blockquote:after,
* q:before,
* q:after {
  content: "";
}
* blockquote,
* q {
  quotes: "" "";
}

.caramel-font {
  font-family: "Caramel", cursive;
}
p {
  text-align: justify;
  padding: 0px 4px;
}

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: grid;
  grid-template-areas: "header" "main" "footer";
  font-family: "Roboto", sans-serif;
  height: 100dvh;
  background-color: beige;
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  row-gap: 10px;
}

/* @media (min-width: 1025px) { */
@media (min-width: 1240px) {
  body {
    display: grid;
    grid-template-areas:
      " . header ."
      " . main . "
      "footer footer footer ";
    grid-template-columns: auto 1240px auto;
    padding: 0;
  }
}

header {
  grid-area: header;
  box-shadow: 10px 5px 5px grey;
  border-radius: 0px 0px 10px 10px;

  background: linear-gradient(85deg, #352361 1%, rgb(64, 84, 178) 55%);
}

/* effet header border-radius à retraivailler éventuellment  */
@media (min-width: 1240px) {
  header {
    border-radius: 10px;
  }
}
main {
  grid-area: main;
  row-gap: 20px;
  padding: 8px 10px;
}

.main-index {
  padding: 0px;
}



@media (min-width: 1240px) {
  .main-index {
    padding: 8px 10px;
  }
}

footer {
  grid-area: footer;
  background-color: black;
  color: gray;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  height: 90px;
  margin-top: auto;
}

@media (min-width: 830px) {
  footer {
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
  }
}

footer > a {
  color: gray;
  text-decoration: none;
}

h1 {
  margin: auto;
}

.logo {
  height: auto;
  /* max-height: 70px; Ajustez cette valeur selon vos besoins */
  max-height: 55px; /* Ajustez cette valeur selon vos besoins */
  width: auto;
  max-width: 100%; /* Le logo ne dépassera pas la largeur de son conteneur */
  padding: 10px;
  /* padding: 4px 10px; */
  object-fit: contain; /* Maintient les proportions du logo */
  grid-area: logo;
}
.title-container {
  grid-area: title;
  background-color: #131f53;
  /* box-shadow: 10px 5px 5px grey; */
  border-radius: 10px 0px 10px 10px;
}
.h2-header {
  /* font-family: "Caramel", cursive; */
  font-family: "Philosopher", sans-serif;
  font-size: 1.5rem;
  color: white;
  /* color: black; */
  text-align: center;
  padding: 10px;
  text-align: center;
}
h1{
  color: black;
  font-size: 2rem;
  padding: 10px;
  text-align: center
}


.intro > p {
  font-size: 1.2rem;
  padding: 0px 4px;
  /* text-align: left; */
  font-family: Questrial, sans-serif;
  /* font-weight: bold; */
}
/* @media (min-width: 830px) {
  .intro > p {
   /* text-align: justify; */
/* } */
/* }  */

/* header {
  display: grid;
  grid-template-areas:
    "logo burger"
    "  . .";
} */

header {
  display: grid;
  grid-template-areas:
    "logo burger"
    " title title"
    " nav nav";
}

/* @media (min-width: 790px) { */
@media (min-width: 830px) {
  header {
    display: grid;
    grid-template-areas:
      "logo nav"
      " title title ";
  }
}

/* essai mobile first */

.menu-toggle {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  padding: 20px;
  grid-area: burger;
  margin-left: auto;
  /* width: 30px; */
  position: relative;
  z-index: 10;
}

/* toggle avec anim */
.menu-toggle span {
  background-color: #0056b3;
  background-color: white;
  height: 3px;
  width: 30px;
  margin: 4px 0;
  /* padding: 4px; */
  transition: all 0.3s ease;
}

.menu-toggle.open span:nth-child(1) {
  transform: rotate(45deg);
  position: absolute;
  top: 30px;
  /* height: 3px; */
}

.menu-toggle.open span:nth-child(2) {
  opacity: 0;
  /* height: 3px; */
}

.menu-toggle.open span:nth-child(3) {
  transform: rotate(-45deg);
  position: absolute;
  top: 30px;
  /* height: 3px; */
}

nav {
  /* Assurez-vous que le contenu caché ne soit pas visible */
  overflow: hidden;
  height: 0;
  /* Transition sur la hauteur */
  transition: height 0.7s ease-in-out;
  grid-area: nav;
}

nav.show {
  /* Hauteur du menu déployé, ajustez selon vos besoins */
  /* height: 300px; */
  height: 285px;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
}

nav ul li {
  padding: 15px;
}

nav ul li a {
  /* color: black; */
  color: white;
  text-decoration: none;
  display: block;
}

nav ul li a:hover {
  /* background-color: white; */
  /* background-color: #86b98b; */
  border-radius: 5px;
  width: auto;
}
/* @media (min-width: 790px) { */
@media (min-width: 830px) {
  nav ul li a:hover {
    /* background-color: white; */
    background-color: #86b98b;
    border-radius: 5px;
    width: auto;
  }
}

/* Styles pour les écrans plus larges */
/* @media (min-width: 790px) { */
@media (min-width: 830px) {
  nav {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
  }

  nav ul {
    display: flex;
    flex-direction: row;
  }

  nav ul li {
    padding: 0;
  }

  nav ul li a {
    padding: 5px 10px;
  }

  .menu-toggle {
    display: none;
  }
}

/*Code grid-container OK avec les grid area */

/* Styles par défaut (mobile first) */
.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 10px;
  padding: 10px;
}

/* Styles pour les écrans plus larges */
/* @media (min-width: 790px) { */
@media (min-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "image1 info1"
      "info2 image2"
      "image3 info3"
      "info4 image4";
    grid-gap: 20px;
    padding: 10px;
  }

  .box-info:nth-of-type(1) {
    grid-area: info1;
  }

  .box-image:nth-of-type(1) {
    grid-area: image1;
  }

  .box-info:nth-of-type(2) {
    grid-area: info1;
  }

  .box-image:nth-of-type(2) {
    grid-area: image2;
  }

  .box-info:nth-of-type(3) {
    grid-area: info3;
  }

  .box-image:nth-of-type(3) {
    grid-area: image2;
    /* height:auto; */
  }

  .box-info:nth-of-type(4) {
    grid-area: info2;
  }

  .box-image:nth-of-type(4) {
    grid-area: image4;
  }
  .box-info:nth-of-type(8) {
    grid-area: info4;
  }
  .box-info {
    place-self: center;
  }
}

.box-info {
  font-family: "caramel" cursive;
  /* font-family: 'Questrial', sans-serif; */
}

.flex-extend-container > .button {
  place-self: center;
  display: grid;
  align-items: center;
}

h2 {
  padding-bottom: 15px;
}

.bold-text {
  font-weight: 800;
}

.center-text {
  text-align: center;
}

.box-info-bordered-title {
  font-size: 16px;
  font-weight: 500;
  padding-bottom: 0.3rem;
}

.box-image {
  display: flex;
  align-items: center;
  justify-content: center;
  align-items: stretch;
  place-self: center;
  box-shadow: 3px 3px 7px 2px #4054b2;
  /* height: 300px; */
  border-radius: 10px;
}

@media screen and (min-width: 768px) {
  .box-image {
    width: auto;
    /* ancine code */
    /* height: 300px; */
    /* essai */
    height: auto;
  }

  @media screen and (min-width: 1023px) {
    .box-image {
      width: auto;
      /* ancine code */
      height: 300px;
      /* essai */
      /* height: auto; */
    }
  }
}
img {
  width: 100%;
  height: 100%;
}

.grid-container {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media screen and (min-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

.grid-container .box-image > img {
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
}

.grid-container {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media screen and (min-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

.box-info {
  /* place-self: center; */
  font-family: caramel cursive;
  font-family: "Questrial", sans-serif;
  padding: 0px 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* main {
  row-gap: 20px;
  padding: 0px 4px;
} */

h1,
h2,
h3,
h4 {
  font-family: "Philosopher", sans-serif;
}

h2,
h3 {
  font-size: 25px;
}


/* versets bibliques */

.dev-notice{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  box-shadow: 3px 3px 7px 2px #4054b2;
  width: auto;
  border-radius: 8px;
  margin-bottom: 10px;
 

}
.verse-reference {
  font-weight: bold;
  color: #2c3e50; /* Couleur pour l'auteur */
}

.verse-text {
  font-style: italic;
  color: #34495e; /* Couleur pour le texte */
}



/* essai suppression sous lignement button > a */

.button {
  background-color: #131f53;
  color: white;
  width: 130px;
  height: 40px;
  border-radius: 7px;
  margin: 10px 0px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none; /* Ajouté pour supprimer le soulignement */
}

.button > a {
  color: white; /* Assurez-vous que la couleur du texte est blanche */
  text-decoration: none; /* Supprime le soulignement */
  display: block;
  /* width: 100%;
  height: 100%; */
  text-align: center;
  line-height: 40px; /* Alignement vertical du texte */
  background-color: #131f53;
}

.button:hover {
  background-color: #0f1740; /* Couleur de fond au survol */
}
.button-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.flex-extend-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content: center;
  width: 100%;
  height: 100%; */
}

.box-info > h2 {
  place-self: flex-start;
}

/* methodo layout */
.main-methodo {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  row-gap: 20px;
  padding: 0px 4px;
}

@media (min-width: 1023px) {
  .main-methodo {
    display: grid;
    /* grid-template-columns: 1fr; */
    gap: 20px;
    padding: 10px;
  }
}

.methodo-layout {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  row-gap: 20px;
  padding: 0px 4px;
}

.methodo-sub-container {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  row-gap: 20px;
  padding: 0px 4px;
}

@media (min-width: 790px) {
  .methodo-sub-container {
    display: grid;
    /* grid-template-columns: 1fr 1fr; */
    gap: 20px;
    padding: 10px;
  }
}

.box-image-methodologie {
  width: 100%;
}
@media (min-width: 790px) {
  .box-image-methodologie {
    width: 600px;
  }
}

.box-text-methodo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  box-shadow: 3px 3px 7px 2px #4054b2;
  border-radius: 10px;
  font-family: "Nunito Sans", sans-serif;
}


.image-methodo{
  height: auto;
  width: 100%;
  object-fit: cover; /* Optionnel : pour s'assurer que l'image couvre l'espace défini */
}

/*  style mission */

.box-info-mission-sub > li {
  list-style: none;
}

.box-info-bordered {
  box-shadow: 3px 3px 7px 2px #4054b2;
  padding: 10px;
  display: grid;
  grid-auto-columns: auto;
  justify-content: center;
  align-content: center;
  /* width: 100%; */
  border-radius: 10px;
  font-family: "Nunito Sans", sans-serif;
}
.box-info-bordered-mission {
  box-shadow: 3px 3px 7px 2px #4054b2;
  padding: 10px;
  display: grid;
  grid-auto-columns: auto;
  justify-content: center;
  align-content: center;
  /* width: 100%; */
  border-radius: 10px;
  font-family: "Nunito Sans", sans-serif;
}

@media (min-width: 1024px) {
  .box-info {
    place-self: center;
  }
}

/* Positionnement container mission */
.grid-container-mission {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas:
    "image1"
    "texte1"
    "image2"
    "texte2"
    "image3 "
    "texte3"
    "image4"
    "texte4";
}

.box-image-mission:nth-of-type(1) {
  grid-area: image1;
  /* border: 2px solid red; */
}
/* .box-image-mission:nth-of-type(2) {
  grid-area: image1;
  border: 2px solid red;
} */

.box-image-mission:nth-of-type(4) {
  grid-area: image3;
  /* border: 2px solid blue; */
}

.box-image-mission:nth-of-type(5) {
  grid-area: image2;
  /* border: 2px solid  rebeccapurple; */
}

.box-image-mission:nth-of-type(8) {
  /* grid-area: image4; */
  /* border: 2px solid violet; */
}
.box-image-mission:nth-of-type(9) {
  grid-area: image4;
  /* border: 2px solid green; */
}

/* @media (min-width: 790px) { */
@media (min-width: 768px) {
  .grid-container-mission {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "image1 texte1"
      "texte2 image2"
      "image3 texte3"
      "image4 texte4";
    grid-gap: 20px;
    padding: 10px;
  }

  .box-info-bordered-mission:nth-of-type(1) {
    grid-area: info1;
  }

  .box-image-mission:nth-of-type(1) {
    grid-area: image1;
  }

  .box-info-bordered-mission:nth-of-type(2) {
    grid-area: info2;
  }

  .box-image-mission:nth-of-type(2) {
    grid-area: image2;
  }

  .box-info-mission:nth-of-type(8) {
    /* grid-area: info3; */
    /* color: red; */
  }

  .box-image-mission:nth-of-type(3) {
    grid-area: image3;
  }

  .box-info-mission:nth-of-type(4) {
    grid-area: info3;
  }

  .box-image-mission:nth-of-type(4) {
    grid-area: image3;
  }
  .box-info.mission:nth-of-type(7) {
    grid-area: texte4;
    /* color: red; */
    height: auto;
  }
  .box-image-mission:nth-of-type(8) {
    grid-area: auto; /* Réinitialise la propriété grid-area*/
  }
  .box-image-mission:nth-of-type(9) {
    grid-area: texte4;
    /* border: 2px solid green; */
  }
  .box-info-mission {
    place-self: center;
  }
  .box-info-bordered-mission {
    place-self: center;
  }
}

/* body > main > div.grid-container-mission > div:nth-child(7) */

.grid-container-mission .box-image > img {
  width: 100%;
  height: auto;
}

.box-image-mission {
  display: flex;
  align-items: center;
  justify-content: center;
  align-items: stretch;
  place-self: center;
  box-shadow: 3px 3px 7px 2px #4054b2;
  /* height: 300px; */
  border-radius: 10px;
}
@media (min-width: 768px) {
  .box-image-mission {
    height: 300px;
  }
}

.box-info-mission-sub {
  display: grid;
  gap: 10px;
}

.box-info-mission-sub li {
  padding: 0px 10px;
}

.sub-title {
  font-size: 25px;
  color: black;
  padding-top: 0;
}

/* .extend-content {
  display: flex;
  flex-direction: column;
  gap: 25px;
  align-items: center;
} */

/*  code avec setTimeout ok */

.extend-content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 1s ease, opacity 1s ease;

  display: flex;
  flex-direction: column;
  gap: 25px;
  align-items: center;
}

.extend-content.show {
  max-height: 1700px; /* Ajustez cette valeur selon vos besoins */
  opacity: 1;
  /* display: flex; /* Final state 
  flex-direction: column;
  gap: 25px;
  align-items: center; */
}

/* fin essai code setTimeout */

.button-extend {
  margin: 10px 0px;
}

.title-extend {
  margin: 0;
  padding-top: 15px;
}

.flex-extend-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* main > div.flex-extend-container > div > div {
  height: 100%;
}

@media (min-width: 768px) {
 main > div.flex-extend-container > div > div {
    height: 300px;
  }
} */

.diapo {
  /* essai fix image */
  /* object-fit: contain; */
  object-fit: cover;
}

.box-image-mission-diapo {
  height: 100%;
}

@media (min-width: 768px) {
  .box-image-mission-diapo {
    height: 210px;
  }
}

@media (min-width: 1024px) {
  .box-image-mission-diapo {
    height: 300px;
  }
}

.image-mission {
  object-fit: cover;
}

.extend-content-2 {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 1s ease, opacity 1s ease;

  display: flex;
  flex-direction: column;
  gap: 25px;
  align-items: center;
}

/* styles services */

.main-services {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  row-gap: 20px;
  padding: 0px 4px;
}

@media (min-width: 1240px) {
  .main-services{
  padding: 0px 40px;
  }
 
  }


.services-p {
  text-align: justify;
}

.services-container {
  display: grid;
  grid-template-columns: 1fr;
  /* justify-items: center; */
  row-gap: 20px;
  padding: 0px 4px;
}

@media screen and (min-width: 768px) {
  .services-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 10px;
    justify-items: center;
  }
}

.services-sub-container {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  row-gap: 20px;
  padding: 0px 4px;
  box-shadow: 3px 3px 7px 2px #4054b2;
  border-radius: 10px;
  font-family: "Nunito Sans", sans-serif;
}
.devis-perso {
  text-align: center;
}

.extend-content-2.show {
  max-height: 250px; /* Ajustez cette valeur selon vos besoins */
  opacity: 1;
  /* display: flex; /* Final state 
  flex-direction: column;
  gap: 25px;
  align-items: center; */
}

@media screen and (min-width: 768px) {
  .extend-content-2.show {
    max-height: 200px; /* Ajustez cette valeur selon vos besoins */
    opacity: 1;
    /* display: flex; /* Final state 
    flex-direction: column;
    gap: 25px;
    align-items: center; */
  }
}

.pack-title {
  font-weight: 600;
  padding-top: 30px;
}

.pack-high-title {
  font-weight: 700;
  text-align: center;
  padding-top: 30px;
}

.pack-high-title > p {
  padding-top: 10px;
  color: red;
}

/* .forfaits {
  padding: 10px 0px;
} */

.pack-list > li {
  list-style-type: disc;
  margin-left: 20px;
  padding: 5px;
}

.pack-list > li::marker {
  margin: 0;
  padding-right: 0;
  color: #131f53;
}

.pack-title-price {
  margin-top: auto;
  padding-bottom: 10px;
}

.box-image-identite-sub-container > img {
  width: 200px;
}

.box-image-identite-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media screen and (min-width: 768px) {
  .box-image-identite-container {
    flex-direction: row;
    gap: 15px;
  }
}

.box-image-identite-sub-container {
  display: flex;
  /* justify-content: space-around; */
  justify-content: space-evenly;
  /* background-color: #131f53; */
  border-radius: 5px;
  margin-top: 30px;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .box-image-identite-sub-container {
    width: 500px;
  }
}
@media screen and (min-width: 768px) and (min-width: 1025px) {
  .box-image-identite-sub-container {
    width: 700px;
  }
}

.realisation-container {
  display: grid;
  justify-items: center;
  row-gap: 5px;
}

.realisation-box {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex-direction: column;
  padding: 0px 15px 30px 15px;
}

@media screen and (min-width: 1025px) {
  .realisation-box {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    align-items: flex-start;
  }
}

/* .realisation > img {
  width: 300px;
}
.realisation > img:last-child {
  width: 300px;
} */

/* .epu-crestois-desktop {
  width: 100%;
  height: auto;
}

.epu-crestois-mobile {
  width: 100%;
  height: 500px;
  height: auto;
}

.securite-img {
  width: 100%;
  height: auto;
}

@media screen and (min-width: 767px) {
  .securite-img {
    width: 700px;
    height: auto;
  }
  .epu-crestois-desktop {
    width: 500px;
    height: 500px;
  }
   

  .epu-crestois-mobile {
    width: 270px;
    height: 500px;
  }
} */

.epu-crestois-desktop {
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 1714; /* Maintenir le ratio d'aspect naturel */
}

.epu-crestois-mobile {
  width: 100%;
  height: auto;
  aspect-ratio: 454 / 871; /* Maintenir le ratio d'aspect naturel */
}

.securite-img {
  width: 100%;
  height: auto;
}

@media screen and (min-width: 767px) {
  .securite-img {
      width: 700px;
      height: auto;
  }
  .epu-crestois-desktop {
      width: 500px;
      height: auto; /* Utiliser auto pour maintenir le ratio d'aspect */
      aspect-ratio: 1920 / 1714; /* Maintenir le ratio d'aspect naturel */
  }
  .epu-crestois-mobile {
      width: 270px;
      height: auto; /* Utiliser auto pour maintenir le ratio d'aspect */
      aspect-ratio: 454 / 871; /* Maintenir le ratio d'aspect naturel */
  }
}





/* .securite-img{
  width: 100%;
  height: 100%;
} */
/* @media screen and (min-width: 1025px) {
  .securite-img{
    width: 700px;
    height: 500px;
  }
} */

@media screen and (min-width: 1025px) {
  .realisation-box {
    flex-direction: row;
    gap: 30px;
    padding-bottom: 30px;
  }
  /* .realisation > img {
    width: 50%;
  }
  .realisation > img:last-child {
    width: 30%;
  } */
}

.realisation-title {
  display: flex;
  justify-content: space-around;
  padding-bottom: 10px;
}

.button-realisation {
  background-color: #131f53;
  color: white;
  /* width: 130px;
  height: 40px; */
  border-radius: 7px;
  /* margin: 10px 0px; */
  margin: 10px;
  padding: 20px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none; /* Ajouté pour supprimer le soulignement */
  white-space: normal; /* Permet de mettre le texte à la ligne */
  word-wrap: break-word; /* Permet de couper les mots trop longs */
  text-align: center; /* Centre le texte */
}

.button-realisation:hover {
  background-color: #86b98b; /* Couleur de fond au survol */
  color: black;
}

/* .desktop-title-masked {
  text-align: center;
  padding: 10px 0px;
} */
/* @media screen and (min-width: 1025px) {
  .desktop-title-masked {
    display: none;
  }
}

.mobile-title-masked {
  display: none;
}
@media screen and (min-width: 1025px) {
  .mobile-title-masked {
    display: flex;
    padding: 10px 0px;
  }
} */

/* .mobile-title-visible {
  padding: 10px 0px;
}# sourceMappingURL=services.css.map */

/* style lié à la page contact */

/* Positionnement de la page contact */

.main-contact {
  display: grid;
  grid-template-columns: var(--grid-columns-mobile);
  grid-template-rows: auto; /* Une ligne pour chaque élément */
  justify-items: center; /* Centre les éléments horizontalement */
  align-items: start; /* Aligne les éléments en haut */
  /* padding: 20px; Ajoute de l'espace autour du contenu principal */
  gap: var(--grid-gap); /* Ajoute de l'espace entre les éléments */
  /* width: 100%; Par défaut, la largeur est de 100% pour les petits écrans */
  /* padding: 10px; Ajoute un padding pour un meilleur espacement */
  padding: 0px 4px;
}

@media (min-width: 600px) {
  .contact-page__container {
    /* width: 500px; /* Ajuste la largeur à 500px pour les écrans plus grands */
    /* width: auto; */
    width: 500px;
  }
}

.contact-page__container {
  display: grid;
  justify-self: center; /* Centre horizontalement */
  align-self: center; /* Centre verticalement */
  padding: 6px; /* Supprime le padding pour les écrans plus grands */
  justify-items: center; /* Centre les éléments horizontalement */
}

.contact-page__form {
  width: 100%;
  display: grid;
  justify-self: center; /* Centre horizontalement */
  align-self: center; /* Centre verticalement */
}
@media (min-width: 600px) {
  .contact-page__form {
    width: auto;
  }
}

/* essai redimensionnement écran tablette
@media (min-width: 768px) {
  .contact-page__form {
    width: 600px;
  }
} */

@media (min-width: 1024px) {
  .contact-page__description {
    /* white-space: wrap; */
  }
}

/* message success error formulaire */
.error {
  color: red;
  font-weight: bold;
}

.success {
  color: green;
  font-weight: bold;
}

/* Code lié au formulaire  */

@media screen and (max-width: 1024px) {
  input,
  select,
  textarea {
    font-size: 16px;
  }
}

#submit-button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  justify-self: center;
  align-self: center;
  width: 50%; /* Ajustez cette valeur selon vos besoins */
  max-width: 200px; /* Limite maximale de la largeur */
  margin-top: 10px;
}
input,
textarea,
select {
  outline: 0;
  padding: 8px 0px;
  border-radius: 8px;
  display: block;
  width: 100%;
  resize: none;
  font-family: "Merriweather", sans-serif;
  color: var(--text-color);
  border: 1px solid #ccc; /* Bordure */
  border-radius: 5px; /* Bordures arrondies */
  background-color: #f9f9f9; /* Couleur de fond */
  color: #333; /* Couleur du texte */
  font-family: Arial, sans-serif; /* Police */
  font-size: 16px; /* Taille de la police */
  /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); Ombre */
  resize: vertical; /* Permet de redimensionner verticalement */
  box-shadow: 3px 7px 2px #4054b2;
  border-radius: 10px;
  margin-bottom: 3px;
}
@media (min-width: 600px) {
  input,
  textarea {
    width: 24rem;
    /* essai taille input tablette */
    /* width: 18rem; */
    resize: none; /* Désactive le redimensionnement */
  }
}

label {
  /* padding-bottom: 5px; */
  padding-top: 5px;
}

textarea {
  max-width: 600px; /* Limite maximale de la largeur */
  height: 150px; /* Hauteur du textarea */
  border: 1px solid #ccc; /* Bordure */
  font-family: Arial, sans-serif; /* Police */
  resize: vertical; /* Permet de redimensionner verticalement */
  margin-bottom: 10px; /* Espace en bas */
}

input:focus,
textarea:focus {
  border-color: var(--input-focus-color); /* Couleur de la bordure en focus */
  outline: none; /* Supprime le contour par défaut */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Ombre en focus */
}

.mentions__section__aside {
  /* display: flex;
  align-items: center;
  justify-content: center;
  align-items: stretch;
  place-self: center; */
  box-shadow: 3px 3px 7px 2px #4054b2;
  /* height: 300px; */
  border-radius: 10px;
  padding: 10px;
}

.main-mentions {
  display: grid;
  grid-template-columns: 1fr;
  /* justify-items: center; */
  row-gap: 20px;
  padding: 0px 4px;

}
@media (min-width: 1024px) {
  .main-mentions {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: 20px;
    padding: 0px 100px;
    text-align: left;
    /* width: 100%; */
    column-gap:40px;


  }
}

.mentions__section {
  display: grid;
  grid-template-columns: 1fr;
  /* padding-left: 50px; */
  width:auto;
  
}



@media (min-width: 1024px) {
.mentions__section {
  display: grid;
  grid-template-columns: 1fr 1fr;
width: 100%;
  align-items: center;
}
}

.mentions__section-title {
  font-size: 25px;
  color: black;
  /* padding-top: 0; */
  /* padding-left: 50px; */
  text-align: left;
}

.rights-sub-title{
  font-size: 1.4rem;
}