/* Style de base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: #f7f7f7; 
    color: #333; 
    line-height: 1.6;
}

/* Logo */
.logo-container {
    position: absolute;
    top: 0px;
    left: 40px;
	z-index: 10;
}

.logo {
    max-width: 90px;
    height: auto;
}

/* Bandeau sup�rieur */
.header {
    background-color: white; 
    text-align: center;
    padding: 30px 0;
}


/* Liens du menu */
.header nav ul li a {
    color: #333; 
    text-decoration: none;
    font-weight: 600;
    font-size: 20px;
}

.header nav ul li a:hover {
    color: #D0A9F5; 
    transition: color 0.3s ease;
	 transform: scale(1.1);
}

/* Section de pr�sentation */
.presentation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  
}

.presentation .text {
    flex: 1;
    text-align: left;
    padding: 60px;
    color: black;
    /* Fond sombre transparent pour le texte */
    list-style-type: none;
}

.presentation .text h3 {
    font-size: 30px; /* Taille l�g�rement sup�rieure pour plus d'�l�gance */
    margin-bottom: 15px; /* Espacement sous le texte */
    color: #333333; /* Couleur gris fonc� pour un effet moderne et professionnel */
    text-align: center; /* Centre le texte */
    font-weight: 600; /* Rend le texte l�g�rement plus �pais sans �tre trop gras */
    letter-spacing: 1px; /* Ajoute un espacement subtil entre les lettres */
    padding: 10px; /* Ajoute un peu d'espace autour */
    position: relative; /* N�cessaire pour les effets additionnels */
}

.presentation .text h3::before {
    content: ""; /* Cr�e un �l�ment visuel d�coratif */
    position: absolute;
    bottom: -5px; /* Positionne la ligne d�corative sous le texte */
    left: 50%; /* Centre la ligne */
    transform: translateX(-50%); /* Assure le centrage parfait */
    width: 40%; /* D�finit la longueur de la ligne (ajustable) */
    height: 5px; /* �paisseur de la ligne */
    background-color: #40E0D0; /* Ligne teal pour un effet sobre et chic */
    border-radius: 2px; /* L�g�rement arrondi pour une touche �l�gante */
    transition: width 0.3s ease; /* Animation fluide */
}

.presentation .text h3:hover::before {
    width: 70%; /* Augmente la longueur de la ligne au survol */
}
.presentation .text h3:hover {
    color: #FFD700; /* Change la couleur du texte en jaune dor� au survol */
}
.presentation .text .toggle-button {
    cursor: pointer;
    font-size: 24px;
    color: #013a44;
    transition: transform 0.3s;

	
}

/* Contenu cach� par d�faut */
.hidden-content {
    display: none;
    margin-top: 20px;
}

.presentation .text p,
.presentation .text ul {
    font-size: 20px;
    text-align: left;
    padding: 20px;
    border-radius: 0px;
    background-color: white; /* Vert menthe pastel pour le fond du texte */
}

/* Style pour la liste */


/* Fl�che anim�e (quand le contenu est visible) */
.show .toggle-button {
    transform: rotate(180deg);
}


/* Pied de page */
.footer {
    background-color: #40E0D0; /* P�che pastel pour un pied de page chaleureux */
    color: white;
    text-align: center;
    padding: 20px 0;
}

.footer p {
    font-size: 14px;
}

.footer .contact-info {
    margin-top: 10px;
}

.footer .contact-info a {
    color: white; /* Bleu pastel pour les liens */
    text-decoration: none;
}
img.materiel {
    width: 600px;
    height: 400px;
    
}
/* Conteneur d'images */
.video-container1 {
    position: relative;
    display: inline-block;
    width: 100%;
    height: auto;
}

.video1 {
    display: block;
    width: 100%;
    height: 7cm;
    object-fit: cover;
    object-position: 20% 63%;
}



.container {
    width: 900px; /* Taille fixe */
    height: 1000px; /* Taille fixe */
    margin: 0 auto; /* Centre le conteneur horizontalement */
    text-align: center;
    display: flex; /* Utilise flexbox pour organiser le contenu */
    flex-direction: column; /* Aligne le contenu de haut en bas */
    justify-content: center; /* Centre le contenu verticalement */
    align-items: center; /* Centre le contenu horizontalement */
}
h1 {
    font-size: 7rem;
    margin-bottom: 20px;
    color: #333;
}
.choices {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}
.card {
   
    background: white;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    flex: 1;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
	 position: relative;
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
}
.card h2 a {
    color: #1565c0;
    text-decoration: none;
}
.card h2 a:hover {
    text-decoration: underline;
}
.card p {
    margin: 10px 0;
    color: #555;
}
.badge1 {
   position: absolute;
    top: 70px;
    right: 15px;
    background: #66bb6a;
    color: white;
    font-size: 3rem;
    font-weight: bold;
    width: 100px;
    height: 100px;
   display: flex; /* Ajout Flexbox */
    align-items: center; /* Centrage vertical */
    justify-content: center; /* Centrage horizontal */
	
    text-align: center;
    border-radius: 50%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    border: 3px solid white;
}
.badge2 {
   position: absolute;
    top: 70px;
    right: 15px;
    background: #ffa726;
    color: white;
    font-size: 3rem;
    font-weight: bold;
    width: 100px;
    height: 100px;
   display: flex; /* Ajout Flexbox */
    align-items: center; /* Centrage vertical */
    justify-content: center; /* Centrage horizontal */
	
    text-align: center;
    border-radius: 50%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    border: 3px solid white;
}
.badge3 {
    position: absolute;
    top: 70px;
    right: 15px;
    background: #f44336;
    color: white;
    font-size: 3rem;
    font-weight: bold;
    width: 100px;
    height: 100px;
   display: flex; /* Ajout Flexbox */
    align-items: center; /* Centrage vertical */
    justify-content: center; /* Centrage horizontal */
	
    text-align: center;
    border-radius: 50%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    border: 3px solid white
}
.level {
    display: inline-block;
    margin-top: 5px;
    padding: 2px 15px;
    border-radius: 20px;
    font-size: 1.3rem;
    font-weight: bold;
    color: white;
}
.level.easy {
    background-color: #66bb6a;
}
.level.medium {
    background-color: #ffa726;
}
.level.hard {
    background-color: #ef5350;
}

/* Conteneur principal */
.container {
    padding: 20px;
    width: 100%; /* Utiliser toute la largeur de l'�cran */
    margin: 0; /* Retirer les marges automatiques */
}



/* Conteneur des vid�os */
.videos {
    display: block; /* Fait en sorte que le conteneur prenne toute la largeur disponible */
    margin-left: 0; /* Aligner � gauche */
    padding: 0; /* Retirer tout espacement automatique */
    white-space: nowrap; /* Emp�che les vid�os de passer � la ligne suivante */
    clear: both; /* Emp�che le conteneur de flotter au-dessus des autres �l�ments */
}

/* Conteneur de chaque vid�o */
.video-container {
    display: inline-block; /* Afficher les vid�os horizontalement */
    margin: 0 20px; /* Espacement entre les vid�os */
    text-align: center; /* Centrer les titres et vid�os individuellement */
}

/* Style des titres des vid�os */
.video-container h2 {
    margin-bottom: 10px;
    font-size: 18px;
    color: #555;
}

/* Style des vid�os */
video {
    width: 300px; /* Largeur fixe pour toutes les vid�os */
    height: 200px; /* Hauteur fixe pour uniformiser la taille des vid�os */
    max-width: 100%; /* Assure que la vid�o ne d�passe jamais la largeur du conteneur */
    object-fit: cover; /* Maintient les proportions sans d�formation */
    border: 2px solid #ddd;
    border-radius: 20px;
    cursor: pointer;
    transition: transform 0.3s;
}

/* Effet au survol de la vid�o */
video:hover {
    transform: scale(1.05);
}

/* Pour r�initialiser la premi�re vid�o */
.video-container:first-of-type video {
    width: 300px;
    height: 200px;
    object-fit: cover;
}
  .activity-info {
        font-size: 14px;
        margin: 10px 0;
        line-height: 1.5;
		text-align: left;
    }
/* Galerie d'images */
.gallery-container {
    display: flex;
    justify-content: center;
    padding: 20px 0;
    flex-wrap: wrap; /* Permet aux images de s'adapter aux petites tailles */
    gap: 20px;
}

.gallery {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.image {
    position: relative;
    width: 700px;
    height: 200px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
   
    transition: opacity 0.3s ease;
}

/* Effet au survol de l'image */
.image:hover {
    transform: scale(1.05);
}

/* Changer la taille du cadre de l'image s�lectionn�e */
.preview-frame:hover {
    transform: scale(1.05);
}

/* Effet de transition pour l'image de la galerie */
.gallery img:hover {
    opacity: 0.8;
}

.level.med {
    background-color: #ffa726;
}
.level.med a {
    display: inline-block; /* Assure que transform fonctionne */
    transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out; /* Animation fluide */
    padding: 5px 10px; /* Ajoute un peu d'espace autour du texte */
    border-radius: 10px; /* Arrondit l�g�rement les bords */
}

.level.med a:hover {
    transform: scale(1.1); /* Agrandissement au survol */
}
.level.eas {
    background-color: #66bb6a;
}
.level.eas a {
    display: inline-block; /* Assure que transform fonctionne */
    transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out; /* Animation fluide */
    padding: 5px 10px; /* Ajoute un peu d'espace autour du texte */
    border-radius: 10px; /* Arrondit l�g�rement les bords */
}

.level.eas a:hover {
    transform: scale(1.1); /* Agrandissement au survol */
}
.level.har {
    background-color: #ef5350;
}
.level.har a {
    display: inline-block; /* Assure que transform fonctionne */
    transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out; /* Animation fluide */
    padding: 5px 10px; /* Ajoute un peu d'espace autour du texte */
    border-radius: 10px; /* Arrondit l�g�rement les bords */
}

.level.har a:hover {
    transform: scale(1.1); /* Agrandissement au survol */
}
a {
  color: white;
  text-decoration: underline;
}
.social-icons2 {
    text-align: center; /* Centre les �l�ments */
}

.social-icons2 p {
    font-size: 40px; /* Ajuste la taille du texte */
    margin-bottom: 10px; /* Espace entre le texte et les ic�nes */
	color : white;
}

.social-icons2 a img {
    width: 100px; /* Largeur des ic�nes */
    height: 100px; /* Hauteur des ic�nes */
    margin: 0 10px; /* Espace entre les ic�nes */
    transition: transform 0.3s ease;	/* Animation au survol */
	color : red;
}

.social-icons2 a img:hover {
    transform: scale(1.2); /* Agrandit l�g�rement l'ic�ne au survol */
}
.social-icons3 {
    text-align: center; /* Centre les �l�ments */
}

.social-icons3 p {
    font-size: 40px; /* Ajuste la taille du texte */
    margin-bottom: 10px; /* Espace entre le texte et les ic�nes */
	color : white;
}

.social-icons3 a img {
    width: 100px; /* Largeur des ic�nes */
    height: 100px; /* Hauteur des ic�nes */
    margin: 0 10px; /* Espace entre les ic�nes */
    transition: transform 0.3s ease;	/* Animation au survol */
	color : red;
}

.social-icons3 a img:hover {
    transform: scale(1.2); /* Agrandit l�g�rement l'ic�ne au survol */
}
.social-icons4 {
    text-align: center; /* Centre les �l�ments */
}

.social-icons4 p {
    font-size: 40px; /* Ajuste la taille du texte */
    margin-bottom: 10px; /* Espace entre le texte et les ic�nes */
	color : white;
}

.social-icons4 a img {
    width: 100px; /* Largeur des ic�nes */
    height: 100px; /* Hauteur des ic�nes */
    margin: 0 10px; /* Espace entre les ic�nes */
    transition: transform 0.3s ease;	/* Animation au survol */
	color : red;
}

.social-icons4 a img:hover {
    transform: scale(1.2); /* Agrandit l�g�rement l'ic�ne au survol */
}

#toggle-canyon:first-of-type {
  margin-right: 40px; /* Ajuste la valeur selon l'espace souhait� */
}
   }
        .profile-pic {
            display: block; /* Force le mode bloc */
      width: 5cm;
      height: 5cm;
      border-radius: 50%;
      object-fit: cover;
      border: 3px solid #333;
        }
        .text h1 {
            margin: 0;
            font-size: 24px;
        }
        .text p {
            font-size: 16px;
        }
        .contact {
            text-align: center;
            margin-top: 20px;
        }
        .contact a {
            text-decoration: none;
            margin: 0 10px;
        }
        .contact img {
            width: 90px;
            height: 80px;
        }
        .phone {
            font-size: 22px;
            font-weight: bold;
            color: #333;
            margin-top: 10px;
        }
		    .documents {
            text-align: center;
            margin-top: 20px;
        }
        .documents a {
            display: block;
            margin-top: 5px;
            font-size: 16px;
            color: #0066cc;
            text-decoration: none;
            font-weight: bold;
        }
        .documents a:hover {
            text-decoration: underline;
        }


@media (max-width: 768px) {

/* Style de base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: #f7f7f7; 
    color: #333; 
    line-height: 1.6;
}

/* Logo */
.logo-container {
    position: absolute;
    top: 10px;
    left: 10px;
	z-index: 10;
}

.logo {
    max-width: 35px;
    height: auto;
}

/* Bandeau sup�rieur */
.header {
    background-color: white; 
    text-align: center;
    padding: 9px 0;
}


/* Liens du menu */
.header nav ul li a {
    color: #333; 
    text-decoration: none;
    font-weight: 600;
    font-size: 8px;
}

.header nav ul li a:hover {
    color: #D0A9F5; 
    transition: color 0.3s ease;
	 transform: scale(1.1);
}

/* Section de pr�sentation */
.presentation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
   flex-direction: column;
  width: 400px;
}

.presentation .text {
    flex: 1;
    text-align: left;
    padding: 60px;
    color: black;
    /* Fond sombre transparent pour le texte */
    list-style-type: none;
}

.presentation .text h3 {
    font-size: 15px; /* Taille l�g�rement sup�rieure pour plus d'�l�gance */
    margin-bottom: 15px; /* Espacement sous le texte */
    color: #333333; /* Couleur gris fonc� pour un effet moderne et professionnel */
    text-align: center; /* Centre le texte */
    font-weight: 600; /* Rend le texte l�g�rement plus �pais sans �tre trop gras */
    letter-spacing: 1px; /* Ajoute un espacement subtil entre les lettres */
    padding: 10px; /* Ajoute un peu d'espace autour */
    position: relative; /* N�cessaire pour les effets additionnels */
}

.presentation .text h3::before {
    content: ""; /* Cr�e un �l�ment visuel d�coratif */
    position: absolute;
    bottom: -5px; /* Positionne la ligne d�corative sous le texte */
    left: 50%; /* Centre la ligne */
    transform: translateX(-50%); /* Assure le centrage parfait */
    width: 40%; /* D�finit la longueur de la ligne (ajustable) */
    height: 2px; /* �paisseur de la ligne */
    background-color: #40E0D0; /* Ligne teal pour un effet sobre et chic */
    border-radius: 2px; /* L�g�rement arrondi pour une touche �l�gante */
    transition: width 0.3s ease; /* Animation fluide */
}

.presentation .text h3:hover::before {
    width: 70%; /* Augmente la longueur de la ligne au survol */
}
.presentation .text h3:hover {
    color: #FFD700; /* Change la couleur du texte en jaune dor� au survol */
}
.presentation .text .toggle-button {
    cursor: pointer;
    font-size: 24px;
    color: #013a44;
    transition: transform 0.3s;

	
}

/* Contenu cach� par d�faut */
.hidden-content {
    display: none;
    margin-top: 20px;
}

.presentation .text p,
.presentation .text ul {
    font-size: 12px;
    text-align: left;
    padding: 20px;
    border-radius: 0px;
    background-color: white; /* Vert menthe pastel pour le fond du texte */
}

/* Style pour la liste */


/* Fl�che anim�e (quand le contenu est visible) */
.show .toggle-button {
    transform: rotate(180deg);
}


/* Pied de page */
.footer {
    background-color: #40E0D0; /* P�che pastel pour un pied de page chaleureux */
    color: white;
    text-align: center;
    padding: 10px 0;
}

.footer p {
    font-size: 12px;
}

.footer .contact-info {
    margin-top: 10px;
}

.footer .contact-info a {
    color: white; /* Bleu pastel pour les liens */
    text-decoration: none;
}
  
  img.materiel {
    width: 300px;
    height: 240px;
    
}

/* Conteneur d'images */
.video-container1 {
    position: relative;
    display: inline-block;
    width: 100%;
    height: auto;
}

.video1 {
    display: block;
    width: 100%;
    height: 3cm;
    object-fit: cover;
    object-position: 20% 63%;
}



.container {
    width: 1000px; /* Taille fixe */
    height: 1100px; /* Taille fixe */
    margin: 0 auto; /* Centre le conteneur horizontalement */
    text-align: center;
    display: flex; /* Utilise flexbox pour organiser le contenu */
    flex-direction: column; /* Aligne le contenu de haut en bas */
    justify-content: center; /* Centre le contenu verticalement */
    align-items: center; /* Centre le contenu horizontalement */
}
h1 {
    font-size: 2rem;
    margin-bottom: 20px;
    color: #333;
}
.choices {
    display: flex;
  flex-direction: column;
    justify-content: space-between;
    gap: 20px;
  
}
.card {
    
    background: white;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    flex: 1;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
	position: relative;
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
}
.card h2 a {
    color: #1565c0;
    text-decoration: none;
}
.card h2 a:hover {
    text-decoration: underline;
}
.card p {
    margin: 10px 0;
    color: #555;
}
.badge1 {
    position: absolute;
    top: -15px;
    right: -15px;
    background: #66bb6a;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    width: 55px;
    height: 55px;
    line-height: 50px;
    text-align: center;
    border-radius: 50%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    border: 3px solid white;
}
.badge2 {
    position: absolute;
    top: -15px;
    right: -15px;
    background: #ffa726;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    width: 55px;
    height: 55px;
    line-height: 50px;
    text-align: center;
    border-radius: 50%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    border: 3px solid white;
}
.badge3 {
    position: absolute;
    top: -15px;
    right: -15px;
    background: #f44336;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    width: 55px;
    height: 55px;
    line-height: 50px;
    text-align: center;
    border-radius: 50%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    border: 3px solid white;
}
.level {
    display: inline-block;
    margin-top: 5px;
    padding: 2px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
    color: white;
}
.level.easy {
    background-color: #66bb6a;
}
.level.medium {
    background-color: #ffa726;
}
.level.hard {
    background-color: #ef5350;
}

/* Conteneur principal */
.container {
    padding: 20px;
    width: 100%; /* Utiliser toute la largeur de l'�cran */
    margin: 0; /* Retirer les marges automatiques */
}



/* Conteneur des vid�os */
.videos {
        display: flex;
        flex-direction: column; /* Affichage en colonne */
        align-items: center;  /* Centrer les vidéos horizontalement */
        white-space: normal;  /* Autoriser le retour à la ligne */
    }
  
    .video-container {
        margin: 10px 0; /* Ajustement de l'espacement vertical */
    }


  .activity-info {
        font-size: 14px;
        margin: 10px 0;
        line-height: 1.5;
		text-align: left;
    }
/* Galerie d'images */
.gallery-container {
    display: flex;
    justify-content: center;
    padding: 20px 0;
    flex-wrap: wrap; /* Permet aux images de s'adapter aux petites tailles */
    gap: 20px;
}

.gallery {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.image {
    position: relative;
    width: 380px;
    height: 120px;
    cursor: pointer;
    transition: transform 0.3s ease;
}
  
.image1 img {
    position: relative;
    width: 300px;
    height: 160px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
   
    transition: opacity 0.3s ease;
}

/* Effet au survol de l'image */
.image:hover {
    transform: scale(1.05);
}

/* Changer la taille du cadre de l'image s�lectionn�e */
.preview-frame:hover {
    transform: scale(1.05);
}

/* Effet de transition pour l'image de la galerie */
.gallery img:hover {
    opacity: 0.8;
}

.level.med {
    background-color: #ffa726;
}
.level.med a {
    display: inline-block; /* Assure que transform fonctionne */
    transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out; /* Animation fluide */
    padding: 5px 10px; /* Ajoute un peu d'espace autour du texte */
    border-radius: 10px; /* Arrondit l�g�rement les bords */
}

.level.med a:hover {
    transform: scale(1.1); /* Agrandissement au survol */
}
.level.eas {
    background-color: #66bb6a;
}
.level.eas a {
    display: inline-block; /* Assure que transform fonctionne */
    transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out; /* Animation fluide */
    padding: 5px 10px; /* Ajoute un peu d'espace autour du texte */
    border-radius: 10px; /* Arrondit l�g�rement les bords */
}

.level.eas a:hover {
    transform: scale(1.1); /* Agrandissement au survol */
}
.level.har {
    background-color: #ef5350;
}
.level.har a {
    display: inline-block; /* Assure que transform fonctionne */
    transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out; /* Animation fluide */
    padding: 5px 10px; /* Ajoute un peu d'espace autour du texte */
    border-radius: 10px; /* Arrondit l�g�rement les bords */
}

.level.har a:hover {
    transform: scale(1.1); /* Agrandissement au survol */
}
a {
  color: white;
  text-decoration: underline;
}
.social-icons2 {
    text-align: center; /* Centre les �l�ments */
}

.social-icons2 p {
    font-size: 40px; /* Ajuste la taille du texte */
    margin-bottom: 10px; /* Espace entre le texte et les ic�nes */
	color : white;
}

.social-icons2 a img {
    width: 100px; /* Largeur des ic�nes */
    height: 100px; /* Hauteur des ic�nes */
    margin: 0 10px; /* Espace entre les ic�nes */
    transition: transform 0.3s ease;	/* Animation au survol */
	color : red;
}

.social-icons2 a img:hover {
    transform: scale(1.2); /* Agrandit l�g�rement l'ic�ne au survol */
}
.social-icons3 {
    text-align: center; /* Centre les �l�ments */
}

.social-icons3 p {
    font-size: 40px; /* Ajuste la taille du texte */
    margin-bottom: 10px; /* Espace entre le texte et les ic�nes */
	color : white;
}

.social-icons3 a img {
    width: 100px; /* Largeur des ic�nes */
    height: 100px; /* Hauteur des ic�nes */
    margin: 0 10px; /* Espace entre les ic�nes */
    transition: transform 0.3s ease;	/* Animation au survol */
	color : red;
}

.social-icons3 a img:hover {
    transform: scale(1.2); /* Agrandit l�g�rement l'ic�ne au survol */
}
.social-icons4 {
    text-align: center; /* Centre les �l�ments */
}

.social-icons4 p {
    font-size: 40px; /* Ajuste la taille du texte */
    margin-bottom: 10px; /* Espace entre le texte et les ic�nes */
	color : white;
}

.social-icons4 a img {
    width: 100px; /* Largeur des ic�nes */
    height: 100px; /* Hauteur des ic�nes */
    margin: 0 10px; /* Espace entre les ic�nes */
    transition: transform 0.3s ease;	/* Animation au survol */
	color : red;
}

.social-icons4 a img:hover {
    transform: scale(1.2); /* Agrandit l�g�rement l'ic�ne au survol */
}

#toggle-canyon:first-of-type {
  margin-right: 40px; /* Ajuste la valeur selon l'espace souhait� */
}
   }
        .profile-pic {
            display: block; /* Force le mode bloc */
      width: 5cm;
      height: 5cm;
      border-radius: 50%;
      object-fit: cover;
      border: 1px solid #333;
        }
        .text h1 {
            margin: 0;
            font-size: 13px;
        }
        .text p {
            font-size: 10px;
        }
        .contact {
            text-align: center;
            margin-top: 20px;
        }
        .contact a {
            text-decoration: none;
            margin: 0 10px;
        }
        .contact img {
            width: 60px;
            height: 60px;
        }
        .phone {
            font-size: 12px;
            font-weight: bold;
            color: #333;
            margin-top: 10px;
        }
		    .documents {
            text-align: center;
            margin-top: 20px;
        }
        .documents a {
            display: block;
            margin-top: 5px;
            font-size: 14px;
            color: #0066cc;
            text-decoration: none;
            font-weight: bold;
        }
        .documents a:hover {
            text-decoration: underline;
        }
		
	    }