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

@font-face {
  font-family: 'nationalpark_light';
  font-style: normal;
  src: 
    url(fonts/nationalpark_light.otf);
}

@font-face {
    font-family: 'nationalpark_medium';
    font-style: normal;
    src: 
      url(fonts/nationalpark_medium.otf);
}

@font-face {
    font-family: 'baculi';
    font-style: normal;
    src: 
      url(fonts/baculi.ttf);
}

@font-face {
    font-family: 'abtool';
    font-style: normal;
    src: 
      url(fonts/abtool.ttf);
}

img {
    max-width: 100%;
    height: auto;
    display: flex;
}

a {
    text-decoration: none;
    color: black;
}

a:hover {
    color: rgb(208, 206, 206);
}

.colonne {
    flex: 0 0 50%;
}

.entourer {
    border: 1px solid #000;  /* Bordure noire autour du mot */
    padding: 3px 8px;  /* Un peu d'espace autour du mot */
    border-radius: 10px;  /* Coins arrondis pour un effet plus doux */
}

.custom-cursor {
    cursor: url('point.png'), auto; /* Applique le curseur personnalisé */
}




/*
  _                               
 | |                 |            
 | |     _   __,   __|   _   ,_   
 |/ \   |/  /  |  /  |  |/  /  |  
 |   |_/|__/\_/|_/\_/|_/|__/   |_/                                                            
*/

header {
    font-family: "nationalpark_medium";
    font-size: 1.1em;
    display: flex;
    max-width: 100%;
    margin-top:1% ;
    margin-bottom:1% ;
    margin-left:2% ;
    margin-right:2% ;
}

.item1 {
    font-family: "nationalpark_medium";
    padding: 0px ;
    width: 50%;
    text-align :left ;
}

.item2 {
    font-family: "nationalpark_medium";
    padding: 0px ;
    width: 50%;
    text-align :right ;
}

/*
  _                    
 | |          |        
 | |   __   __|        
 |/ \_/  \_/  |  |   | 
  \_/ \__/ \_/|_/ \_/|/
                    /| 
                    \| 
*/

.container {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
    margin-bottom: 1.5%;
    margin-left: 1.5%;
    margin-right: 1.5%;
}


/*
           _                               
          | |                              
 __   __  | |  __   _  _    _  _    _   ,  
/    /  \_|/  /  \_/ |/ |  / |/ |  |/  / \_
\___/\__/ |__/\__/   |  |_/  |  |_/|__/ \/ 
*/

.colonne1, .colonne2, .colonne3 {
    width: 33.33%;
}

.colonne1 img {
    display: flex;
    flex-direction: column;
    padding: 1%;
    justify-content: left;
}

.colonne2 img {
    display: flex;
    flex-direction: column;
    padding: 1%;
    justify-content: center;
}

.colonne3 img {
    display: flex;
    flex-direction: column;
    padding: 1%;
    justify-content: right;
}

.colonne1 img:hover {
    opacity: 0.7;
}

.colonne2 img:hover {
    opacity: 0.7;
}

.colonne3 img:hover {
    opacity: 0.7;
}


/*                           
                  o        
    _   ,_    __     _ _|_ 
  |/ \_/  |  /  \_| |/  |  
  |__/    |_/\__/ |/|__/|_/
 /|              /|        
 \|              \|        

*/

.colonne1projet {
    font-family: 'nationalpark_light';
    flex-direction: column;
    font-size: 1em;
    line-height: 1.3;
    letter-spacing: 0.04em;
    display: flex;
    width: 28%;
    box-sizing: border-box;
    padding: 0.5%;
    margin-right: 2%;
}

.p_projet, .p_legendes {
    display: flex;
    text-align: left;
}

.p_legendes {
    font-size: 0.8em;
}

.fleche-responsive a{
    display: none;
}

.colonne2projet {
    display: flex;
    flex-direction: column;
    width: 69%;
    box-sizing: border-box;
    margin-left: 0.5%;
    margin-right: 0%;
    justify-content: flex-end;
    align-items: center;
    height: 83vh;
} 

.images-scroll {
    display: flex;
    flex-direction: column; 
    gap: 10px;
    overflow-y: scroll;
    height: auto;
    width: 100%;
    scroll-behavior: smooth; 
    /*flex-direction: row;*/
}

.images-scroll-responsive{
    display: none;
}


/*
   \                                    
                                        
  __,       _   ,_    __    _   __   ,  
 /  |     |/ \_/  |  /  \_|/ \_/  \_/ \_
 \_/|_/   |__/    |_/\__/ |__/ \__/  \/ 
         /|              /|             
         \|              \|             
*/


.container2 {
    display: flex;
    max-width: 100%;
    padding: 0px ;
    margin-bottom: 1.5%;
    margin-left: 1.5%;
    margin-right: 1.5%;
}

.p1apropos {
    font-family: 'nationalpark_light';
    font-size: 1.4em;
    line-height: 1.3;
    letter-spacing: 0.04em;
    display: flex;
    text-align: left;
    width: 70%;
    margin-left: 0.5%;
    margin-right: 4%;   
}

.apropos_legende {
    display: flex;
    text-align: left;
    font-size: 0.8em;
    width: 70%;
    margin-left: 0.5%;
    margin-right: 4%; 
}

/*
 _                      
| |                     
| |  __   _  _  _|_  ,  
|/  /  \_/ |/ |  |  / \_
|__/\__/   |  |_/|_/ \/ 
|\                      
|/                       

*/
.pfonts {
    font-family: 'nationalpark_light';
    font-size: 1em;
    line-height: 1.3;
    letter-spacing: 0.04em;
    display: flex;
    justify-content: center;
    text-align: center;
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;   
}

.editable-text {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%; 
    font-family: 'baculi';
    font-size: 3.5em;
    line-height: 1.1;
    letter-spacing: 0em;
    caret-color: black;
    justify-content: center;
    text-align: center;
    text-transform: uppercase;
}

.editable-text2 {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%; 
    font-family: 'abtool';
    font-size: 3.5em;
    line-height: 1.3;
    letter-spacing: 0em;
    caret-color: black;
    justify-content: center;
    text-align: center;
    text-transform: uppercase;
}

.editable-text:empty:before {
    content: "Écrivez ici...";
}

.editable-text:focus {
    outline: none; /* Enlève le bord orange lorsque l'élément est sélectionné */
}

.editable-text2:focus {
    outline: none; /* Enlève le bord orange lorsque l'élément est sélectionné */
}


/*
                  |  o        
 _  _  _    _   __|      __,  
/ |/ |/ |  |/  /  |  |  /  |  
  |  |  |_/|__/\_/|_/|_/\_/|_/

*/


@media (max-width: 768px) {
    div.colonne2projet{
        display: none;
    }

    div.images-scroll {
        display: none;
    }

    .images-scroll {
        flex: 0 0 100%;
    }

    div.images-scroll-responsive{
        display: block;
        flex: 0 0 100%;
    }

    div.images-scroll-responsive img{
        padding-bottom: 1.5%;
        display: block;
        flex: 0 0 100%;
    }

    .container {
        height: 100%;
        flex: 0 0 100%;
    }

    .colonne1,.colonne2,.colonne3 {
        flex: 0 0 100%;
    }

    .colonne1projet {
        flex: 0 0 100%;
        overflow: hidden;
    }

    .p_projet,.p_legendes{
        font-size: 0.8em;
        flex-direction: column;
    }

    .container2 {
        flex: 0 0 100%;
    }

    .p1apropos {
        flex: 0 0 100%;
        font-size: 1em;
        text-align: left;
    }

    .item1,.item2 {
        font-size: 0.8em;
    }

    .fleche-responsive a {
        display: flex;
        font-family: 'nationalpark_medium';
        font-size: 1.2em;
        padding-bottom: 1.5%;
    }

    .editable-text {
        font-size: 2em;
    }

    .editable-text2 {
        font-size: 2em;
    }
}