/* ------------------- Typos et couleurs ------------------- */

@font-face{
    font-family: "Montserrat-ExtraBold";
    src: url(font/montserrat/Montserrat-ExtraBold.ttf);}

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

@font-face{
    font-family: "Montserrat-SemiBold";
    src: url(font/montserrat/Montserrat-SemiBold.ttf);}

@font-face{
    font-family: "Montserrat-Medium";
    src: url(font/montserrat/Montserrat-Medium.ttf);}

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

h1{
    font-family: "Montserrat-ExtraBold";
    font-weight: 700;    
    font-size: 7.969rem /*51px*/;
}

h2{
    font-family: "Montserrat-Bold";
    font-weight: 600;    
    font-size: 5rem /*32px*/;
}

h3{
    font-family: "Montserrat-SemiBold";
    font-weight: 500;
    font-size: 3.125rem /*20px*/;
}

.font_label{
    font-family: "Montserrat-Regular";
    font-size: 1.875rem /*12px*/;
}

@media (min-width: 1280px){
    h1{
        font-size: 60px;
    }

    h2{
        font-size: 40px;
    }

    h3{
        font-size: 25px;
    }

    .font_label{
        font-size: 14px;
    }
}

:root {
    --blanc: #FFFDFA;
    --orange0: #FEF5E6;
    --orange1: #FCD191;
    --orange2: #FF9F0F;
    --orange3: #B26B00;
    --orange4: #4D2E00;
    --bleu0: #EAF7FB;
    --bleu1: #B9E3F0;
    --bleu2: #52ADC9;
    --bleu3: #006C8C;
    --bleu4: #002733;
}

/*
.blanc{
    color: #FFFDFA;
}

.orange4{
    color: #4D2E00;
}

.orange3{
    color: #B26B00;
}

.orange2{
    color: #FF9F0F;
}

.orange1{
    color: #FCD191;
}

.orange0{
    color: #FEF5E6;
}

.bleu4{
    color: #002733;
}

.bleu3{
    color: #006C8C;
}

.bleu2{
    color: #52ADC9;
}

.bleu1{
    color: #B9E3F0;
}

.bleu0{
    color: #EAF7FB;
}*/





/* ------------------- Style global ------------------- */

*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    position: relative;
}

p, a, button{
    font-family: "Montserrat-Medium";
    font-weight: 400;    
    font-size: 2.5rem; /*32px ???? 16px 1em ?*/
}

body{
    /*background-image: url('images/crete_adi.svg');
    background-size: 400px;
    background-repeat: no-repeat;
    position: fixed;*/
    padding: 2.5rem 3.75rem;
    background-color: var(--orange0);
    overflow-x: hidden;
    max-width: 100%;
}

.page{
    max-width: 1920px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 15.625rem;
}

a{
    cursor: pointer;
}

.material-icons {    
    width: 3.75rem;
}

@media (min-width: 1280px){
    body{
        padding: 16px 80px;
    }

    .page{
        gap: 140px;
    }

    p, a, button{
        font-size: 1rem;
    }
}







/* ------------------- Navigation ------------------- */

/* Barre de navigation (mobile) */
  
.top-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: transparent;
    padding: 1em;
    /*width: calc(100% - 160px);
    position: fixed;
    z-index: 1;*/
  }

  .top-nav img{
    height: 6.25rem;
  }
  
  .menu-button-container {
    display: flex;
    height: auto;
  }

  .menu {
    position: absolute;
    top: 0;
    margin-top: 12.5rem /*76px*/;
    padding: 0;
    left: 0;
    width: 100%;
  }
  
  #menu-toggle ~ .menu li {
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  
  .menu > li {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0.5em 0;
    width: 100%;
    color: var(--blanc);
    background-color: var(--bleu4);
  }

  .menu li a {
    display: none;
    color: var(--blanc);
  }

  #menu-toggle:checked ~ .menu li a {
    display: flex;
    align-items: center;
    gap: 1.25rem;
  }
  
  
  #menu-toggle {
    display: none;
  }
  

  /* Animation menu burger (mobile) */

  #menu-toggle:checked ~ .menu li {
    height: 2.5em;
    padding: 0.5em;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  .menu-button {
    transform: translate(-100%, 0);
  }
  
  .menu-button,
  .menu-button::before,
  .menu-button::after {
    display: block;
    background-color: var(--bleu4);
    position: absolute;
    height: 0.625rem;
    width: 5rem /*30px*/;
    transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
    border-radius: 2px;
  }
  
  .menu-button::before {
    content: '';
    margin-top: -1.25rem;
  }
  
  .menu-button::after {
    content: '';
    margin-top: 1.25rem;
  }
  
  #menu-toggle:checked + .menu-button-container .menu-button::before {
    margin-top: 0px;
    transform: rotate(405deg);
  }
  
  #menu-toggle:checked + .menu-button-container .menu-button {
    background: transparent;
  }
  
  #menu-toggle:checked + .menu-button-container .menu-button::after {
    margin-top: 0px;
    transform: rotate(-405deg);
  }
  
  /* Barre de navigation (desktop) */

  @media (min-width: 1280px) {
    
    .menu {
      display: flex;
      width: auto;
      position: relative;
      flex-direction: row;
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
    
    .menu > li {
      width: auto;
      margin: 0 1rem;
      overflow: hidden;
      background-color: transparent;
      color: var(--bleu4);
    }
    
    .menu-button-container {
      display: none;
      height: 100%;
      width: 30px;
      cursor: pointer;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  
    #menu-toggle ~ .menu li {
      height: auto;
      margin: 0 0.5rem;      
      border-radius: 8px;
      padding: 8px 16px;
      border: 2px solid transparent;
    }

    #menu-toggle ~ .menu li:hover{
        border: 2px solid var(--bleu4);
    }
  
    #menu-toggle:checked ~ .menu li {
      border: 0;
      height: auto;
      padding: 0;
      transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
    }

    .menu li a {
        display: flex;
        align-items: center;
        gap: 16px;
        color: var(--bleu4);
      }
  }


  /*Boutons*/

.bouton {
    position: relative; /* Ajoutez cette ligne */
    color: var(--bleu4);
    fill: var(--bleu4);
    border-radius: 8px;
    border: 2px solid var(--bleu4);
    text-align: center;
    padding: 1.25rem 2.5rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    transition: color 0.4s ease;
    overflow: hidden; /* Empêche le débordement de ::after */
}

.bouton::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%; /* Commence en dehors du bouton */
    width: 100%;
    height: 100%;
    background-color: var(--bleu4); /* Couleur de remplissage */
    transition: left 0.4s ease;
    z-index: -1;
}

.bouton:hover::after {
    left: 0; /* Fait glisser le fond de gauche à droite */
}

.bouton:hover {
    color: var(--bleu0); /* Change la couleur du texte au survol */
    fill: var(--bleu0);
}




@media (min-width: 1280px) {
    .bouton {
        gap: 8px;
        padding: 8px 16px;
    }

    #store{
        width: 24px;
        height: 24px;
    }

    #apple{
        width: 24px;
        height: 24px;
    }
}







/* ------------------- Header ------------------- */

header{
    display: flex;
    flex-direction: column;
    width: 100%;
}

.header{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    gap: 12.5rem /*80px*/;
    margin-top: 3.75rem;
}

.header div{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 6.25rem;
}

.header div div{
    gap: 0px;
}

.img_fond{
    position: absolute;
    z-index: -1;
}

#etoiles_desktop{
    display: none;
}

#etoiles_mobile{
    display: flex;
    width: 260vw;
    left: -180vw;
    top: -80px;
}

#apple, #store{
    color: var(--bleu4);
}

.header div img{
    height: fit-content;
    width: 42.2rem/*270px*/;
}

@media (min-width: 1280px){
    header{
        gap: 140px;
    }

    .header{
        align-items: end;
    }

    .header_sans_img{
        align-items: start;
        width: auto;
        padding-left: 30%;
    }

    .header div p{
        width: 50%;
    }

    .header div img{
        width: 270px;
    }
    
    .header div div{
        flex-direction: row;
        width: auto;
        align-items: end;
        justify-content: start;
        gap: 40px;
    }

    .header img{
        width: 40%;
    }

    #etoiles_desktop{
        display: block;
        width: 160vw;
        left: -70vw;
        top: -180px;
    }
    
    #etoiles_mobile{
        display: none;
    }
}






/* ------------------- Section presentation application ------------------- */


.masque_maquettes{
    width: 100%;
}

.presentation_app{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 3.75rem /*24px*/;
    width: auto;
    overflow: hidden;
    position: relative;
}

/*.img_bgd{
    height: 100%;
    border-radius: 8px;
    width: 50%;
    background-image: url(images/agent-administratif.jpeg);
}

.presentation_fonctionnalites img{
    border-radius: 8px;
    overflow: hidden;    
    height: 100%;
    width: auto;
}*/

.presentation_app{
    position: relative;
}

.polygone{
    display: none;
    top: 120px;
}

.mockup_CTA{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 10rem /*64px*/;
}

.mockup{
    width: 52rem /*350px*/;
    transform: rotate(3deg);
}

.qr_bouton{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2.5rem;
}

#qr{
    width: 12.5rem /*80px*/;
}

.deux_boutons{
    display: flex;
    flex-direction: column;
    gap: 1.25rem /*8px*/;
}

.maquettes{
    display: none;
}

.maquettes img{
    width: 280px;
    box-shadow: 8px, 8px, 8px, var(--bleu3);
}

#citoyen{
    transform: rotate(-2deg);
    margin-left: 6.25rem;
}

#parcoursup{
    transform: rotate(4deg);
}

@media (min-width: 1280px){
    .polygone{
        width: 100%;
        position: absolute;
        display: flex;
        flex-direction: row;
        justify-content: center;
        z-index: -1;
    }
    #polygone{
        width: 80%;
    }

    .mockup_CTA{
        display: flex;
        flex-direction: row;
        gap: 80px;
        justify-content: center;
    }

    .mockup{
        width: 350px;
    }

    .maquettes{
        display: flex;
        flex-direction: column;
        gap: 64px;
    }

    .qr_bouton{
        display: flex;
        flex-direction: column;
        align-items: start;
    }

    #qr{
        width: 80px;
    }
}






/* ------------------- Section a quoi ça sert ? ------------------- */

.service{
    display: flex;
    flex-direction: column;
    gap: 3.75rem;
}

.service article{
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.service article img{
    width: 8.75rem/*56px*/;
}

.fil_ariane{
    display: flex;
    flex-direction: row;
    gap: 5%;
    width: 52rem;
}

.fil_ariane1{
    background-color: var(--bleu4);
}

.fil_ariane div{
    border: 1px solid var(--bleu4);
    height: 1.25rem;
    width: 100%;
    border-radius: 8px;
}

.service_maquettes{
    display: flex;
    flex-direction: row;
    gap: 15%;
    align-items: start;
}

#calendrier_evnt, #calendrier_annee{
    width: 40%;
    border-radius: 8px;
}

#calendrier_evnt{
    transform: rotate(3deg);
    margin-top: 15.625rem /*100px*/;
}

#calendrier_annee{
    transform: rotate(-2deg);
}



@media (min-width: 1280px){
    .service{
        gap: 80px;
    }
    .service_maquettes_content{
        display: flex;
        flex-direction: row;
        gap: 25%;
        align-items: center;
    }

    #calendrier_evnt, #calendrier_annee{
        width: 15vw;
        border-radius: 8px;
    }

    .fil_ariane{
        margin-top: 20%;
    }

    .fil_ariane{
        width: 350px;
    }

    .fil_ariane div{
        height: 8px;
    }

    .service article img {
        width: 56px;
    }
}





/* ------------------- Listes de cartes ------------------- */

.toutes_cartes{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3.75rem;
    position: relative;
}

.toutes_cartes h2{
    width: 100%;
}

#fond_bleu{
    position: absolute;
    width: 70%;
    z-index: -1;
    bottom: 31.25rem /*200px*/;
    right: -3.75rem;
    overflow: hidden;
}

#fond_bleu_desktop{
    display: none;
}

ul{
    list-style: none; 
}

.fonctionnalite{
    display: flex;
    align-items: center;
    gap: 2.5rem;
}

.cartes{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2.5rem;
    color: var(--bleu4);

}

.cartes article{
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.cartes li img{
    width: 15.625rem;
    object-fit: contain;
}

.cartes li{
    display: flex;
    flex-direction: row;
    gap: 3.75rem;
    width: 100%;
    padding: 3.75rem;
    border-radius: 8px;
    background-color: var(--blanc);
}

.liste_contenu{
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.liste_contenu div{
    display: flex;
    flex-direction: row;
    gap: 1.25rem;
    align-items: center;
}

.cartes li{
    position: relative;
    transition: transform 0.1s ease-out;
}

#icones{
    font-size: 3.75rem;
}






@media only screen and (min-width: 1280px){
    .toutes_cartes{
        gap: 80px;
    }

    .cartes li{
        flex: 1 1 33%;
        gap: 24px;
        padding: 24px;
    }

    #fond_bleu{
        display: none;
    }

    #fond_bleu_desktop{
        display: block;
        position: absolute;
        width: 45%;
        z-index: -1;
        bottom: -220px;
        right: -260px;
    }

    #icones{
        font-size: 24px;
        width: 24px;
    }

    .cartes article{
        gap: 16px;
    }
    
    .cartes li img{
        width: 100px;
    }
}







/* ------------------- Section avis clients ------------------- */

.avis_clients{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 3.75rem;
    position: relative;
}

.scroll{
    overflow-x: scroll;

    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.scroll::-webkit-scrollbar {
    display: none;
}

.avis_clients ul{
    display: flex;
    flex-direction: row;
    gap: 3.75rem;
    width: fit-content;
    color: var(--blanc);
    align-items: center;
}

.avis_clients ul li{
    background-color: var(--orange4);
    border-radius: 1.25rem;
    padding: 6.25rem;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    width: 50vw;
    height: fit-content;
    color: var(--blanc);
    align-items: center;
}

.profil{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2.5rem;
}

.profil img{
    width: 6.25rem;
    object-fit: cover;
    aspect-ratio: 1/1;
    border-radius: 8px;
}

.avis_clients ul li p{
    text-align: center;
}

.note_generale{
    color: var(--bleu4);
    background-color: var(--blanc);
    border: 1px solid #002733;
    border-radius: 8px;
    padding: 2.5rem;
    display: flex;
    position: absolute;
    overflow-x: hidden;
    right: -22px;
    top: -60px;
    flex-direction: column;
    gap: 1.25rem;
    align-items: center;
    transform: rotate(3deg);
    width: fit-content;
}

.etoiles{
    display: flex;
    flex-direction: row;
    gap: 1.25remx;
}

.etoiles img{
    width: 3.75rem;
}

.gg_play{
    display: flex;
    flex-direction: row;
    gap: 1.25rem;
    align-items: center;
}




@media (min-width: 1280px){
    .avis_clients{
        gap: 40px;
    }

    .avis_clients ul li{
        width: 100%;
    }

    .profil img{
        width: 40px;
    }

    .etoiles img{
        width: 24px;
    }

    .etoiles{
        gap: 8px;
    }

    .avis_clients ul li{
        padding: 40px;
        gap: 16px;
    }

    .note_generale{
        padding: 16px;
        gap: 8px;
        top: -10px;
    }
}





/* ------------------- Section contact ------------------- */


.contact{
    display: flex;
    flex-direction: column;
    gap: 3.75rem;
    width: 100%;
}

form {
    background-color: transparent;
    border-radius: 8px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

input[type=text],
input[type=email],
select,
textarea {
    width: 100%;
    padding: 1.25rem;
    border: 1px solid var(--bleu4);
    border-radius: 8px;
    box-sizing: border-box; /* Pour que la largeur inclue le padding */
    background-color: var(--blanc);
    font-family: "Montserrat-Medium";
    font-weight: 400;    
    font-size: 2.5rem;
}

#message{
    resize: vertical;
}

/*
input[type=submit] {
    background-color: #4CAF50;
    color: #FFFDFA;
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
}*/

form .bouton{
    background-color: var(--bleu4);
    color: var(--blanc);
    width: fit-content;
    margin-top: 0.625rem;
}






@media (min-width: 1280px){
    input[type=text],
    input[type=email],
    select,
    textarea {
        padding: 8px;  
        font-size: 16px;
    }
}






/* ------------------- Footer ------------------- */

footer{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    width: 100%;
    margin-bottom: 6.25rem;
    position: relative;
}

.footer{
    display: flex;
    flex-direction: column;
    justify-content: end;
    gap: 6.25rem;
}

#fond_orange_mobile{
    width: 80%;
}

.legales_confidentialite, .A_propos{
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    align-items: end;
    text-align: end;
}

.legales_confidentialite div, .A_propos div{
    display: flex;
    flex-direction: column;
    gap: 0.625;
    width: 100%;
}

#fond_orange_mobile{
    position: absolute;
    width: 100%;
    z-index: -1;
    bottom: -15.625rem;
    right: -3.5rem;
}

#fond_orange_desktop{
    display: none;
}

#mascotte{
    width: 30%;
}





@media (min-width: 1280px){
    .contact_footer{
        display: flex;
        flex-direction: row-reverse;
        gap: 80px;
    }

    #fond_orange_mobile{
        display: none;
    }

    #fond_orange_desktop{
        display:block;
        position: absolute;
        width: 80vw;
        z-index: -1;
        bottom: -200px;
        right: -350px;
    }
}