<style type="text/css">

@font-face {
    font-family: ortica-light;
    src: url('./fonts/ortica-light.woff2') format('woff2'),
            url('./fonts/ortica-light.woff') format('woff'),
            url('./fonts/ortica-light.otf') format('opentype');
 }

@font-face {
    font-family: ortica-bold;
    src: url('./fonts/ortica-bold.woff2') format('woff2'),
        url('./fonts/ortica-bold.woff') format('woff'),
        url('./fonts/ortica-bold.otf') format('opentype');
}

body {
    font-family: ortica-light, serif;
    font-size: 100%;
    color: black;
}

body, ul {
    margin: 0;
    padding: 0;
}

        
em { 
    font-style: normal;
    font-weight: 700;
    color: firebrick;
       
}
        
a {
    text-decoration: underline;
    font-weight: 700;
    color: firebrick;
}
        
a:hover {
    text-decoration: none;
}

ul {
     list-style:none; /* Aucun style de puce ou de marqueur ne sera affiché devant les éléments de la liste */
}

h1 {
    color: firebrick;
    text-align: center;
    font-size: 4rem;
    margin-bottom: 5px; /* Élimine l'espace sous le titre */
    max-width: 85%;
    margin: 0 auto; /* Centre horizontalement */
}

.image-sous-h1 {
    max-width: 60%; /* Limite spécifique à ces images */
    height: auto;
    display: block;
    margin: 0 auto; /* Centre l'image si nécessaire */
}

.grand-texte {
    color: firebrick;
    font-size: 4rem;
    font-weight: 700;
}

*::selection {
    background-color: firebrick;
    color: white;
}

/* Pour les indices (chiffres en exposant) */
.superscript {
    font-size: 0.5em;         /* Taille réduite */
    vertical-align: super;    /* Positionnement en exposant */
}

/* Pour les notes elles-mêmes après le texte */
.notes {
    font-size: 0.7em;         /* Taille réduite */
    vertical-align: baseline; /* Positionnement normal, pas en exposant */
}

.centrer-texte {
    text-align: center; /* Centre le texte horizontalement */
    margin: 0 auto; /* Centrage horizontal du conteneur */
    width: 90%;
    max-width: 100%; /* Ainsi on évite tout débordement horizontal */
}

/* Enlever le soulignement des liens actifs */
.page-active {
    text-decoration: none !important;  /* L'ajout de !important permet de surcharger la règle globale des a soulignés */
    /* Supprime le soulignement */
    pointer-events: none;  /* Rend le lien non cliquable */
    color: firebrick; /* Tu peux définir une couleur spécifique si tu le souhaites */
}

/* Par défaut, cache le menu sur les petits écrans */
ul {
    display: none;
}

/* Sur les petits écrans (max-width: 768px), lorsque la classe .open est ajoutée, on affiche le menu */
ul.open {
    display: block;
}

/* Les quatre paragraphes suivants c'est pour le bouton "Retour en haut" */
#back-to-top {
    position: fixed;
    bottom: 20px;
    /*top: 50%;*/ /* Centre verticalement */
    left: 50%; /* Centre horizontalement */
    transform: translate(-50%, -50%); /* Ajuste pour centrer parfaitement */
    font-size: 1rem;
    background-color: firebrick;
    color: #fff;
    padding: 10px 15px;
    border-radius: 50px;
    text-decoration: underline;
    display: none; /* Caché par défaut */
    z-index: 1000;
    animation: fadeIn 0.5s ease-in-out;
}

/*#back-to-top:hover {
    text-decoration: none;
}*/

.hidden {
    display: none;
}

.opa50 {opacity: 50%;}
.opa20 {opacity: 20%;}

@keyframes fadeIn {    /* Pour attier l'attention sur ce bouton, je définis ici un Fade In*/
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Conteneur vidéo */
#video-container {
  width: 100%; /* Le conteneur occupe toute la largeur de la fenêtre */
  display: flex; /* Utilisation de flexbox pour centrer la vidéo */
  justify-content: center; /* Centre la vidéo horizontalement */
  /*overflow: hidden; /* Empêche la vidéo ou des éléments de dépasser le conteneur */
}

/* Vidéo adaptative */
#video-intro {
  width: 60%; /* La vidéo occupe 60% de la largeur sur les grands écrans */
  max-width: 100%; /* Empêche la vidéo de dépasser la largeur du conteneur */
  height: auto; /* Garde le ratio d'aspect de la vidéo */
}

/* Masquer le conteneur après le défilement */
/*.cacherVideo {
/*  display: none; /* Cache complètement le conteneur */
/*}*/

@media screen and (min-width: 769px) {

    ul {
        display: flex; /* Menu en ligne pour les grands écrans */
    }
    
    #menu {
        position: fixed;
        top: 18px; /* Le menu doit rester collé en haut de la page */
        z-index: 1000; /* S'assurer qu'il est bien au-dessus d'autres éléments */
        width: 100%; /* Assure-toi qu'il occupe toute la largeur */
    }

    #menu ul {
        display: flex; /* Applique flexbox directement à la liste */
        justify-content: center; /* Centre les éléments horizontalement */
        gap: 0; /* Espacement entre les éléments */
        padding: 0; /* Enlève les marges internes par défaut de la liste */
        margin: 0; /* Enlève les marges externes par défaut */
    }

    #menu li {
        list-style: none; /* Enlève les puces des éléments de la liste */
    }

    #menu a {
        text-decoration: underline;
        color: firebrick;
        font-size: 1.2rem;
        padding: 5px 10px;
    }

    #menu a:hover {
        text-decoration: none;
    }
    
}

@media screen and (max-width: 768px) {
    
    #video-intro {
        width: 90%; /* La vidéo d'intro occupe 90% de la largeur sur les petits écrans */
    }
    
    /* Positionne le conteneur de l'icône burger en haut à droite */
    .burger-container {
        position: fixed;
        top: 20px; /* Distance du haut de l'écran */
        right: 20px; /* Distance de la droite de l'écran */
        z-index: 1001; /* S'assurer que l'icône est au-dessus des autres éléments */
    }
    
    /* Stylisation des barres du burger */
    .burger {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        width: 30px;
        height: 25px;
        background-color: transparent;
        cursor: pointer;
        z-index: 1001; /* Assure que le burger est au-dessus des autres éléments */
    }

    .burger .bar {
        width: 100%;
        height: 4px;
        background-color: firebrick;
        border-radius: 10px;
        transition: all 0.3s ease; /* Animation de transition fluide */
    }

    /* Animation pour transformer le burger en croix lorsque le menu est ouvert */
    .burger.open .bar:nth-child(1) {
        transform: rotate(45deg);
        position: relative;
        top: 8px;
    }

    .burger.open .bar:nth-child(2) {
        opacity: 0;
    }

    .burger.open .bar:nth-child(3) {
        transform: rotate(-45deg);
        position: relative;
        top: -8px;
    }

    #menu {
        position: fixed;
        top: 60px; /* Le menu burger s'ouvre 15px en dessous de l'icône burger */
        right: 20px; /* et à 20px du bord droit, comme l'icone */
        z-index: 1000; /* S'assurer qu'il est bien au-dessus d'autres éléments */
        width: 160px; /* Assure-toi qu'il occupe toute la largeur */
        background-color: rgba(255, 255, 255, 0.98); /*fond blanc, mais à 0,95 d'opacité */
        box-shadow: -2px 0 20px rgba(100, 50, 25, 0.4);
        padding: 0px 20px;
        text-align: right;
    }
    
    #menu ul li {
    margin: 10px 0;  /* Ajoute 10px d'espace entre les éléments du menu burger */
}
    
    #menu a {
        font-family: ortica-bold, serif;
        text-decoration: underline;
        color: firebrick;
        font-size: 1.6rem;
    }
    
    #menu a:hover {
        text-decoration: none;
    }
    
    .image-sous-h1 {
    max-width: 85%;
    }
    
}

/* LA C'EST POUR REPARTIR LA LARGEUR EN DEUX BLOCS (1) CV et (2) BIO/PHOTO */
.conteneur{
    display: flex;
}

.element:nth-child(1) {
      width: 41%;
      margin-left: 5%;
 }
        
.element:nth-child(2) {
    width: 41%;
    margin-right: 5%;
    margin-left: auto;
}

</style>