#bio .bio,
main {
    position: relative
}

#contact .btn,
#contact label,
h3 {
    text-transform: uppercase;
    font-weight: 700;
}

#contact .btn:hover,
header {
    background-color: #f8c478
}

#cpntact .form form div label h3,
footer li a,
h1,
h2,
p {
    color: #fff
}

#parcours h2,
#passions h2,
.port,
h3 {
    color: #000
}

body {
    font-size: 15px
}

#contact .bulle,
#contact .form,
#menu,
.bulle,
.tableau,
footer {
    background-size: cover
}

#contact p,
#parcours p,
#passions p {
    color: #000;
    font-size: 1em
}

.escalade img,
.patisserie img {
    bottom: -100px
}

#bio,
#compétences {
    background: var(--bleu-clair, #dde8ec)
}

*,
.hi-slide>ul>li {
    margin: 0;
    padding: 0
}

#contact,
#réalisations {
    margin: 50px 1.5vw 1.5vw
}

#bio .bio,
#contact .reseaux,
#parcours p,
#passions p,
.a,
.hi-slide>ul>li>a,
.ref-pro,
.tableau,
.tableaux h3,
h2,
h4,
nav h3 {
    text-align: center
}

.hi-slide>ul,
footer li {
    list-style: none
}

* {
    box-sizing: border-box;
    scroll-behavior: smooth
}

body,
html {
    min-height: 100vh;
    max-width: 100vw
}

h1 {
    font-family: Monoton, cursive;
    font-size: 7.33em;
    letter-spacing: .04em;
    padding-left: 10px;
    font-weight: 400
}

footer ul li:last-child a,
footer ul li:nth-child(3) a,
h2 {
    font-size: 2em
}

h2 {
    font-family: 'DM Serif Display', serif
}

h3 {
    font-family: Dosis;
    font-size: 1em
}

h4 {
    font-family: Dosis;
    font-size: 1.4em
}

p,li {
    font-family: Dosis;
    font-style: normal;
    font-weight: 400;
    font-size: 1.26em;
    line-height: 24px;
    letter-spacing: .01em
}

a {
    text-decoration: none
}

.bulle-bd {
    position: relative; /* Pour positionner la flèche */
    background-color: white; /* Couleur de fond de la bulle */
    padding: 15px 20px; /* Espacement intérieur de la bulle */
    border-radius: 15px; /* Coins arrondis */
    max-width: 400px; /* Largeur maximale */
    font-family: Arial, sans-serif; /* Police du texte */
    font-size: 16px; /* Taille du texte */
    color: #333; /* Couleur du texte */
    margin: 30px;
  }
  
  .bd-g::after {
    content: ''; /* Contenu de la flèche */
    position: absolute; /* Positionnement absolu de la flèche */
    bottom: 10%; /* Centrer la flèche verticalement */
    left: -10px; /* Décale la flèche à gauche */
    transform: translateY(-50%); /* Pour ajuster la flèche au centre verticalement */
    border-top: 10px solid transparent; /* Partie supérieure de la flèche */
    border-bottom: 10px solid transparent; /* Partie inférieure de la flèche */
    border-right: 10px solid white; /* Couleur de la flèche, identique à la bulle */
  }
  .bd-d::after{
    content: '';
  position: absolute;
  top: 50%; /* Centre verticalement */
  right: -10px; /* Place la flèche à droite */
  transform: translateY(-50%); /* Ajuste pour centrer parfaitement */
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid white; 
  }

  .bd-b::after{
    content: '';
  position: absolute;
  left: 50%; /* Centre horizontalement */
  bottom: -10px; /* Place la flèche en bas */
  transform: translateX(-50%); /* Ajuste pour un centrage parfait */
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid white;
  }


#aumenu,
#avatar-caché,
#btn-burger,
#croix-menu,
#menu div,
#menu h2,
#pas-sur-pc,
.mobile {
    display: none
}

.avatar {
    height: 350px;
    width: auto;
    margin-bottom: 30px
}

.personnage,
nav ul {
    height: 100%;
    display: flex
}

.personnage {
    align-items: center;
    justify-content: center
}

#presentation article,
.bulle {
    align-items: center;
    display: flex
}

.bulle {
    width: 220px;
    height: 200px;
    justify-content: center;
    padding: 20px
}

#passions,
#réalisations,
.band {
    background: var(--jaune-clair, #ffedd1)
}

header {
    width: 100vw;
    padding-top: 1.5vw;
    z-index: 200;
    position: absolute;
    top: 0px;
}
.trou{
    height: 250px;
}
.bandeau {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center
}

.bandeau>div {
    display: flex;
    justify-content: center;
    align-items: center
}

.band {
    height: 316px;
    margin: 0 1.5vw;
    padding-top: 40px
}

.mini-band{
    height: 80px;
    width: 40vw;
    margin-left: 1.5vw;
    position: sticky;
    background-color: #ffedd1;
    position: sticky;
    top: 10px;
    z-index: 150;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mini-band h1{
    font-size: 30px;

}
.mini-band .a{
    padding: 10px;
}
.mini-band .foucher{
    padding: 5px;
    margin-right: 20px;
}
.mil {
    background: rgba(6, 94, 121, .9)
}

.a {
    background: var(--rouge-fonc, rgba(187, 67, 30, .93));
    padding: 18px;
    margin-right: 20px
}

.foucher {
    padding: 10px;
    background: var(--vert-fonc, #10765d)
}

.cercle,
.elem-frise {
    background-color: #10765d
}

#menu {
    width: 100vw;
    height: 100px;
    /* background-image: url(./../../medias/menu/vague.svg); */
    background-color: #f8c478;
    position: sticky;
    top: 0;
    z-index: 100
}

nav ul {
    justify-content: flex-end;
    align-items: center
}

nav ul li {
    list-style-type: none
}

nav h3 {
    width: 200px;
    transition: .5s
}

nav h3:hover {
    color: #fff;
    font-size: 1em
}

#presentation {
    padding-top: 50px;
    margin-bottom: 50px
}

#presentation article {
    height: 650px;
    margin: 1.5vw;
    justify-content: center
}

#bio h2 {
    margin: 30px
}

#bio a {
    text-decoration: underline;
    color: #fff
}

#bio a:hover,
footer li a:hover {
    color: #f8c478
}

#bio .bio {
    width: 400px;
    border-radius: 53px;
    background: var(--bleu-fonc, rgba(6, 94, 121, .97));
    padding: 30px
}

#bio .avatar {
    align-self: end
}

#bio .bulle {
  
    align-self: start;
    margin-top: 80px;
    margin-left: 20px
}

.scoch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%)
}

#parcours {
    background: var(--vert-clair, #d4ece6);
    display: flex;
    align-items: center
}

#parcours .personnage {
    flex-direction: column;
    width: 300px
}

#parcours .bulle {
   
    height: 143px;
    width: 200px;
    background-size: 100%;
    align-self: end
}

#passions .points {
    width: 100%
}

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

.elem-frise {
    width: 500px;
    height: 5px;
    position: relative
}

#passions .passion img,
.hi-slide>ul>li,
.points,
.rond-frise,
.tableaux h3,
footer {
    position: absolute
}

.rond-frise {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    top: -7px
}

.cercle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    top: -10px
}

.barre,
.point {
    border-radius: 20px
}

#parcours p {
    margin: 20px 0
}

.bas-frise {
    display: flex;
    justify-content: space-between;
    width: 700px
}

#passions {
    height: auto
}

#passions .passion {
    border-radius: 53px;
    background: var(--jaune-fonc, #f8c478);
    padding: 30px 20px 20px;
    position: relative
}

#contact .ref-pro,
.barre,
.point,
.tableaux h3 {
    background-color: #fff
}

.escalade {
    width: 300px;
    height: 226.05px
}

.patisserie {
    width: 500px;
    height: 196px
}

.création,
.création .points,
.escalade .points {
    width: 300px
}

.création {
    height: 381px
}

#passions p {
    margin: 10px 0
}

#passions .personnage {
    flex-direction: column;
    justify-content: space-between;
    height: 630px;
    margin: 10px
}

#passions .bulle {
   
    height: 200px
}

.IIpassions {
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: space-between;
    height: 540px
}

.point {
    height: 30px;
    width: 20px
}

.points {
    display: flex;
    justify-content: space-around;
    top: -12px;
    left: 0
}

.patisserie .points,
footer ul {
    width: 500px
}

#passions .passion img {
    height: 160px;
    width: auto;
    border-radius: 600px
}

.escalade img,
.hi-slide .hi-prev {
    left: -10px
}

.création img,
.hi-slide .hi-next {
    right: -10px
}

#compétences {
    margin: 40px 1.5vw 1.5vw;
    padding-top: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#carouselle h2,
#compétences h2 {
    font-size: 1.6em
}

#compétences article {
    display: flex;
    align-items:start;
    justify-content:space-around;
   
    width: 84vw;
   
}

#compétences article>div {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-size: cover;
    justify-content: space-around;
    margin: 30px;
    padding: 20px;
    
    /* height: 350px; */
    background-color: #065e7a;
    border-radius: 20px;
}


#compétences article div h2 {
    padding-bottom: 20px;
    
 }
#compétences li {
    color: white;
    padding-left: 15px;
    
}
#compétences article div p {
    margin-top: 10px;
}





#compétences .personnage {
    flex-direction: row
}

.hi-slide,
.tableaux {
    align-items: center;
    display: flex
}

#compétences .bulle:first-child,
#réalisations .bulle {
  
    width: 300px;
    padding-right: 50px
}

#compétences .bulle:nth-child(3) {
   
    width: 390px;
    height: 240px
}

#réalisations {
    padding-top: 100px;
    padding-bottom: 50px
}

.tableaux {
    justify-content: center;
    padding-top: 40px;
    height: 300px
}

#carouselle,
.hi-slide>ul>li {
    flex-direction: column;
    display: flex
}

.tableau {
    height: 255px;
    margin: 20px;
    padding: 26px;
    background-image: url(./../../medias/elem/cadre2.svg);
    transition: .5s;
    position: relative
}

.tableaux .tableau:hover {
    height: 270px
}

.verti {
    background-image: url(./../../medias/elem/cadre3.svg);
    padding: 30px
}

.tableaux .tableau:first-child {
    background-image: url(./../../medias/elem/cadre1.svg);
    padding: 25px
}

.tableau img {
    height: 100%;
    width: auto;
    border-radius: 5px
}

.tableaux h3 {
    bottom: -20px;
    padding: 10px;
    left: 50%;
    transform: translate(-50%)
}

.hi-slide,
.hi-slide>ul {
    position: relative;
    width: 60vw
}

#réalisations .avatar {
    margin-right: calc(40vw - 400px);
    margin-top: 30px
}

#réalisations .personnage h3{
    background-color: #bb431e;
    padding: 20px;
    color:white;
    border-radius: 30px;
    transition: ease 0.5s;
    
}
#réalisations .personnage a:hover h3{
    transition: ease 0.5s;
    background-color:#f8c478;

}

#carouselle {
    background-image: url(./../../medias/elem/fond-carrou.svg);
    width: calc(100vw - 3vw);
    height: 41.2vw;
    left: -1.5vw;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px
}

#carouselle h3 {
    color: #fff;
    margin-top: 10px
}

#contact .id div,
#contact a {
    margin: 20px
}

.hi-slide {
    height: 100%;
    margin: 0 auto;
    justify-content: center
}

#contact h3,
#contact label {
    margin-bottom: 20px
}

.hi-slide .hi-next,
.hi-slide .hi-prev {
    position: absolute;
    top: 50%;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    border-radius: 50px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    color: #fff;
    transition: .7s;
    font-size: 1.3em;
    font-weight: 700;
    z-index: 100
}

.hi-slide .hi-next:hover,
.hi-slide .hi-prev:hover {
    opacity: 1;
    background-color: #fff
}

.hi-slide>ul {
    height: 35vw;
    margin: 0
}

.hi-slide>ul>li {
    overflow: hidden;
    z-index: 0;
    left: 377px;
    top: 147px;
    height: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: 30px
}

.hi-slide>ul>li>a {
    height: 100%;
    padding: 0
}

.hi-slide>ul>li>a img {
    width: auto;
    height: 80%;
    transition: .5s;
    border-radius: 20px
}

.hi-slide>ul>li>a img:hover {
    height: 90%
}




/* contact  */
#contact {
    background-color: #d4ece6;
    display: flex;
    flex-direction: column;
    height: 800px
}

#contact a {
    font-size: 2.6em;
    color: #000
}

#contact .btn,
#contact label {
    font-family: Dosis;
    font-size: 1em
}

#contact article {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    width: 50%
}
#contact-sup{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
}
#contact .reseaux a:hover {
    color: #10765d
}

#contact .personnage {
    display: flex;
    align-items: start;
    margin-top: 20px
}

#contact .bulle {
    background-image: url(./../../medias/elem/bulle\ gauche.svg);
    height: 150px;
    width: 165px
}

#contact .form {
    height: 100%;
    background-image: url(./../../medias/elem/vert-cont.svg)
}

#contact .reseaux,
.ref-pro {
    margin-top: 100px;
    margin-bottom: 20px
}

#contact .reseaux {
    height: 150px;
    margin-top: 200px
}

#contact .ref-pro {
    padding: 30px;
    margin-top: 20px
}

#contact input,
textarea {
    border: none;
    border-radius: 50px;
    height: 30px;
    padding: 10px;
    width: 200px
}

#contact .id {
    display: flex
}

#contact form,
.info {
    display: flex;
    flex-direction: column;
    align-items: flex-end
}

#contact label {
    color: #fff;
    display: block
}

#contact input[name=mail],
#contact input[name=organisme] {
    width: 350px
}

#contact textarea {
    width: 350px;
    height: 200px;
    border-radius: 20px
}

#contact .btn {
    color: #000;
    width: 150px;
    transition: .3s
}

footer {
    background-image: url(./../../medias/elem/footer.svg);
    color: #fff;
    height: 20vh;
    width: 100vw;
    bottom: -70px;
    padding-bottom: 30px;
    display: flex;
    justify-content: center;
    align-items: flex-end
}

footer ul {
    display: flex;
    justify-content: space-around
}

footer img {
    margin-left: 180px;
    margin-right: 30px;
    height: 20vh;
    width: auto
}
#btnrea{
    display: none;
}
@media screen and (max-width:800px) {
     #btnrea{
        display: flex;
        justify-content: center;

      
     }
     #btnrea h3{
        display: block;
        text-align: center;
        background-color: #bb431e;
        padding: 20px;
         color: white;
        border-radius: 30px;
        transition: ease 0.5s;
        width: 40vw;
     }
    #btn-burger,
    #menu {
        border-radius: 20px;
        position: fixed;
        right: 5vw;
        top: 5vw
    }

    #menu h2,
    #pc .personnage,
    #réalisations .tableaux div:first-child {
        display: none
    }

    #menu h2,
    .comp h3,
    .cont h3,
    .rea h3 {
        color: #fff
    }
   
    
    #menu,
    #menu .comp,
    #menu .cont,
    #menu .pres,
    #menu .rea,
    #menu ul,
    #menu ul li h3,
    #menu.active {
        transition: 1s
    }

    #compétences .mobile,
    #menu .bas,
    #menu ul li,
    #réalisations .mobile {
        text-align: center
    }

    body,
    html {
        overflow-x: hidden
    }

    #avatar-caché {
        position: fixed;
        bottom: -70px;
        z-index: 100;
        margin: 40px
    }

    #avatar-caché img {
        height: 150px;
        width: auto
    }

    main {
        max-width: 100vw
    }

    body {
        font-size: 14px
    }

    #croix-menu,
    #menu,
    #menu .pain {
        display: block
    }

    header {
        padding: 1.5vw
    }

    .band {
        margin: 1.5vw;
        height: auto;
        padding: 20px
    }
    
    #contact .id,
    .bandeau {
        flex-direction: column
    }
    .mini-band .bandeau{
        display: none;
    }
    #btn-burger,
    #menu ul {
        flex-direction: column;
        display: flex
    }

    .foucher {
        margin-bottom: 10px
    }

    #btn-burger {
        align-items: center;
        justify-content: space-around;
        background: #000;
        height: 100px;
        width: 90px;
        z-index: 300;
        padding: 10px
    }

    .pain {
        background-color: #ffedd1
    }

    #btn-burger div {
        width: 60px
    }

    .h {
        height: 19px;
        border-radius: 30px 30px 10px 10px
    }

    .garniture {
        height: 8px;
        border-radius: 10px
    }

    .b {
        height: 9px;
        border-radius: 10px 10px 20px 20px
    }

    #menu {
        background-color: #000;
        background-image: none;
        width: 80px;
    }

    #menu.active {
        border-radius: 50px;
        width: 50vw;
        height: 70vw;
        right: 25vw;
        top: 5vw;
        padding: 2vw;
        z-index: 250;
    }
    #menu.active ul li{
        margin: 5px;
    }
    #menu ul {
        height: 90%;
        padding: 4%
    }

    #menu .haut {
        height: 30%;
        width: 100%;
        border-radius: 130px 130px 40px 40px;
        background-image: url(./../../medias/menu/burge.svg);
        background-size: cover;
        
    }

    #menu h2 {
        opacity: 0%
    }

    #croix-menu {
        opacity: 0%;
        color: #000;
        font-size: 6vw
    }

    #au-menu.active,
    #croix-menu.active {
        opacity: 100%;
        transition: 1s
    }

    #menu ul li {
        height: 9%;
        width: 100%;
        border-radius: 40px;
        padding-top: 1.5vw;
        
    }

    #menu ul li h3 {
        width: 100%;
        font-size: 100%;
        display: none;
    }

    #menu .pres {
        background-color: #f8c478;
        color: #000;
    }
    #menu .pres h3{
        
        color: #000;
    }

    #menu .comp {
        background-color: #065e7a
    }

    #menu .rea {
        background-color: #bb431e
    }

    #menu .cont {
        background-color: #10765d
    }

    #menu .bas {
        height: 12%;
        width: 100%;
        border-radius: 40px 40px 70px 70px;
        margin: 5px;
    }

    #presentation #passions {
        flex-direction: column;
        height: 1000px;
        padding-right: 100px
    }

    #passions .création {
        margin-top: 30px;
        align-self: flex-end
    }

    .mis {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-left: 150px;
        width: 100%
    }

    .mobile {
        font-size: 1.5em;
        display: block;
        margin: 40px
    }

    #compétences {
        padding-bottom: 100px
    }

    #réalisations .tableaux {
        margin-bottom: 50px
    }
    #réalisations .tableaux iframe{
        width: 100%;
        height: 100%;
    }

    #carouselle {
        margin-top: 30px
    }

    .hi-slide .hi-prev {
        left: -30px
    }

    .hi-slide .hi-next {
        right: -50px
    }

    #contact {
        flex-direction: column;
        height: 100%;
         
    }

    #contact .reseaux {
        margin-top: 50px;
        height: 100%
    }

    #contact .form {
        width: 100%;
        background-color: #10765d;
        border-radius: 500px 500px 0 0
    }

    #contact form {
        margin-top: 150px;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
       
    }
    #contact-sup{
        margin: 20px;
        flex-direction: column;
    }
    #contact .id div {
        margin: 5px 40px 5px 5px
    }
    #contact a{
        font-size: 1.5em;
    }
    footer {
        bottom: -70px;
        height: 50vh;
       
    }

    footer img {
        margin: 10px;
        height: 15vh
    }
    footer ul{
        width: 50vw;
        height: 70%;
         flex-direction: column;
         justify-content: space-around;
    }
}

@media screen and (max-width:700px) {
    body {
        font-size: 14px
    }

    h1 {
        font-size: 4em
    }

    #btn-burger,
    #menu {
        height: 60px;
        width: 55px
    }

    #btn-burger div {
        width: 35px
    }

    .h {
        height: 10px
    }

    .garniture {
        height: 5px
    }

    .b {
        height: 6px
    }

    #menu.active {
        width: 80vw;
        height: 110vw;
        right: 10vw;
    }

    #bio .bio {
        width: 65vw
    }

    .elem-frise {
        width: 70vw
    }

    .bas-frise {
        width: 90vw
    }

    #presentation #passions {
        padding: 20px
    }

    .IIpassions {
        width: 100%
    }

    #passions .passion {
        border-radius: 30px
    }

    #passions .passion img {
        height: 110px;
        width: auto;
        border-radius: 600px
    }

    .escalade {
        width: 239px;
        align-self: flex-start
    }

    .patisserie {
        width: 80vw
    }

    .création {
        width: 60vw
    }

    .mis {
        padding-left: 20px
    }

    .escalade img {
        left: 220px;
        bottom: 10px
    }

    .patisserie img {
        left: -30px;
        bottom: -70px
    }

    #compétences article {
        flex-direction: column
    }

    #réalisations {
        padding-top: 10px
    }

    #réalisations .tableaux {
        flex-direction: column;
        margin-bottom: 20px;
        height: auto;
        padding-top: 20px
    }

    #réalisations .tableau {
        height: 200px
    }

    .tableau {
        padding: 25px
    }

    .verti {
        padding: 21px
    }

    #carouselle {
        height: 50vh;
        background-size: cover
    }

    .hi-slide>ul {
        height: 40vh
    }

    .hi-slide .hi-next {
        right: -61px
    }

    .hi-slide .hi-prev {
        left: -60px
    }

    .hi-slide>ul>li>a img {
        border-radius: 10px
    }

    .hi-slide .hi-next,
    .hi-slide .hi-prev {
        background-color: #fff;
        color: #000
    }

    .hi-slide .hi-next:hover,
    .hi-slide .hi-prev:hover {
        opacity: .5;
        background-color: #fff
    }
    #contact {
         padding-bottom: 40vh;
    }
    #contact form {
        margin: 50px 20px 100px;
        flex-direction: column
    }

    #contact input,
    #contact input[name=mail],
    #contact input[name=organisme],
    #contact textarea {
        width: 290px
    }

    #contact .id {
        align-items: flex-end;
        width: 100%
    }

    #contact .id input {
        width: 200px
    }

    footer {
        bottom: -60px
    }

    footer ul {
        width: 50vw;
        text-align: center
    }

    #pc footer ul li {
        margin-right: 10px
    }

    footer h4 {
        display: none
    }

    footer a {
        font-size: .9em
    }
}