body {
    padding: 20px;            /* Espace interne de 20px tout autour de la page */
    background-color: #9E8055; /* mets comme fond de page la couleur correspondant au code hexadecimale  */
}


h1 {
    text-align: center;       /* sert a centrer le texte des balise h1 */
}




header {
    background: #4D3E2A;      /* mets comme fond du header la couleur correspondant au code hexadecimale */
    color: white;             /* pour écrire blanc */
    padding: 10px;            /* espace entre chaque élément de la paeg */
    border-radius: 10px;      /* utilidé pour arrondir les coins du header */
    display: flex;            /* utilisé pour l'alignement des élément */
    justify-content: center;  /* centre le contenue horizontalement */
    align-items: center;      /* centre le contenue verticalement */
}


nav a {
    color: white;             /* Rend les écriture en blanc */
}


main {
    background: #E0C594;      /* mets comme fond du main la couleur correspondant au code hexadecimale */
    padding: 20px;            /* espace entre chaque élément du main */
    margin-top: 10px;         /* espace entre le header et le main*/
    border-radius: 30px;      /* sert a arrondire les coins */
}



.imgCV {
    width: 15%;               /* Largeur de l'image par rapport a la taille de l'écran */
    height: auto;             /* prend les même proportions que le width */
    display: block;           /* permet de centrer l'image en la transformant en bloc que l'on déplacer grace a margin */
    margin-left: auto;        /* les deux margin sert a centrer l'image */
    margin-right: auto;
    border-radius: 100px;     /* sert a arrondire les coins */
}


ol {
    list-style: none;         /* permet de supprimer mes numéro du début de chaue ligne de la liste ol */
    padding-left: 0;          /* aligne la liste à gauche de 0 */
}


ol li::before {
    content: "- ";            /* permet de mettre des tiret a la palce des nombres */
}

.imgbm {
    width: 35%;               /* dimensionner l'image dans la largeur et sa longueur */
    height: auto;
    border-radius: 30px;      /* arrondire les coins */
    display: block;           
    margin-left: auto;        /* les deux margin sert a centrer l'image */
    margin-right: auto;
}


section {
    padding: 20px;            /* espace entre les éléemenst */
    display: flex;            /* permet aligne le texte et l'image sur une ligne */
    justify-content: center;  /* peret centre le bloc sur la page */
    align-items: center;      /* permet d'aligné verticalement le texte et l'image */
    gap: 40px;                /* espace entre le texte et l'image */
    max-width: 1000px;        /* limite la largeur */
    margin: 0 auto;           /* sert a centrer la section horizontalement */
}


section p {
    flex: 1;                  /* laisse au texte prendre l'entireté de l'espace restant */
    font-size: 22px;          /* défini la taille du texte */
}


.imgtk {
    width: 40%;               /* dimenssionne l'image */
    height: auto;
    border-radius: 20px;      /* arrondie les coins*/
    display: block;           /* transforme l'image ne bloc */
}

.imgtown {  
    width: 30%;               /* dimenssionne l'image */
    height: auto;
    border-radius: 30px;      /* arrondire les coins*/
    display: block;           /* transforme l'image ne bloc */
    margin-left: auto;        /* centrer l'image */
    margin-right: auto;       
}




h2 {
   text-align: center;        /* centre le exte présent dans la balise h2 */
}


.imgiut {
    width: 70%;               /*widgh et height dimmenssionne l'image */
    height: auto;
    border-radius: 5px;       /* Coins très légèrement arrondis */
    display: block;           /* transforme li'mage en block pour la centrer */
    margin-left: auto;        /* centre l'image */
    margin-right: auto;
}

iframe {
    width: 15%;               /* dimensionne la taille de la vidéo sur la page */
    height: auto;
}