/*----------------------------------------------------------------------------*/
/*--------------------------CONFIGURATION ORDINATEUR--------------------------*/
/*----------------------------------------------------------------------------*/

/* corps de la page */

	body {
	    /* Création du dégradé diagonal */
	    background: linear-gradient(to bottom right, #ffffff, #194ba1);
	    /* Ajustement à la hauteur de l'écran */
	    min-height: 100vh;
	    margin: 0;
    	    /* Texte principal */
	    font-family: "Arial", sans-serif;
	    font-size: 12pt;
	    color: #000000;
	}

/* Entête */
	header {
	    background: #3969bb;
	    color: white;
	    padding: 1rem 5%;
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    position: sticky;
	    top: 0;
	    z-index: 1000;
	}

/* Declaration de la police personnalisee */
	@font-face {
	    font-family: 'Boucherie Block';
	    src: url('fonts/boucherie-block.woff2') format('woff2');
	    font-weight: normal;
	    font-style: normal;
	    font-display: swap;
	}

/* Titres et paragraphes */
	h1 {
	    font-family: 'Boucherie Block', sans-serif;
	    font-size: 30pt;
	    color: #000000;
	    margin-top: 0;
	}

	h2 {
	    font-family: "Comic Sans MS", "Comic Sans", cursive;
	    font-size: 16pt;
	    color: #000000;
	}

	p {
	    text-align: justify;
	}

/* Menu Navigation */
	nav ul {
	    list-style: none;
	    display: flex;
	    gap: 20px;
	    margin: 0;
	}

/* zone principale */
	.main-layout {
	    display: flex;
	    padding: 20px;
	    gap: 20px;
	}
	#content-area {
	    flex: 1;
	    padding: 40px;
	}

/* Pied de page */
	footer {
	    background: #3969bb;
	    color: white;
	    padding: 20px;
	    margin-top: 10px;
	    position: fixed;
	    bottom: 0;
	    left: 0;
	    width: 100%;
	    z-index: 1000
	}

	.footer-content {
	    display: flex;
	    justify-content: space-around;
	    align-items: center;
	    flex-wrap: wrap;
	    gap: 20px;
	}

/* Bloc d'activite*/
	.conteneur-activites {
	    display: flex;          /* Aligne les blocs côte à côte */
	    gap: 20px;              /* Espace entre les deux blocs */
	    margin: 0px 0;
	}

	.bloc-activite {
	    flex: 1;                /* Donne la même largeur aux deux blocs */
	    text-align: justify;    /* Justification du texte comme demandé précédemment */
	}
/* Photo Allan */
	.container-allan {
	    display: flex;
	    flex-wrap: wrap; /* Permet le passage à la ligne sur mobile */
	    width: 100%;
	}
	.photo-allan {
	    flex: 0 0 auto; /* Ne grandit pas, ne rétrécit pas, s'adapte au contenu */
	    display: flex;
	    justify-content: center; /* Centre la photo horizontalement */
	    align-items: center;
	    padding: 10px;
	    margin: 0 auto; /* Aide au centrage sur mobile */
	}
	.bloc-allan img {
	    max-width: 100%; /* Empêche l'image de déborder */
	    height: auto;
	    display: block;
	}
	.texte-allan {
	    flex: 1; /* Prend 100% de l'espace restant */
	    min-width: 300px; /* Force le passage à la ligne si l'espace devient trop étroit */
	    text-align: justify; /* Texte justifié */
	    padding: 20px;
	}

/* image pas plus large que l'ecran */
img {
    max-width: 100%; /* L'image ne peut pas être plus large que son parent */
    height: auto;    /* Conserve les proportions pour éviter de déformer l'image */
    display: block;  /* Supprime l'espace vide sous l'image */
}
/*----------------------------------------------------------------------------*/
/*--------------------------CONFIGURATION SMARTPHONE--------------------------*/
/*----------------------------------------------------------------------------*/

@media (max-width: 768px)
{

/* zone principale */
    .main-layout {
        flex-direction: column;
    }
    #content-area {
        padding: 0px 10px 10px 0px;
    }

/* Bloc de traits du menu */
    .menu-toggle {
        display: flex;
        flex-direction: column;
        gap: 5px;
        background: none;
        border: none;
        cursor: pointer;
    }
    .menu-toggle span { width: 25px; height: 3px; background: white; }

/* Menu Navigation */
    nav { display: none; width: 100%; }
    nav.active { display: block; }
    nav ul { flex-direction: column; width: 100%; padding: 20px 0; }

/* Entête */    
    header { flex-wrap: wrap; }

/* Ajustements de vos anciens styles */
    .conteneur-flex {
        flex-direction: column;
        text-align: center;
    }
/* Bloc d'activite*/ 
    .conteneur-activites {
        flex-direction: column;
    }  
    .bloc-activite {
        width: 100%;        /* Prend toute la largeur sur téléphone */
    }
/* Photo Allan */
	.container-allan {
	    flex-direction: column; /* Aligne les blocs verticalement */
	}
	.photo-allan {
	    flex: 0 0 auto; /* Ne grandit pas, ne rétrécit pas, s'adapte au contenu */
	    display: flex;
	    justify-content: center; /* Centre la photo horizontalement */
	    align-items: center;
	    padding: 10px;
	    margin: 0 auto; /* Aide au centrage sur mobile */
	}
	.bloc-allan img {
	    width: 100%; /* Prend toute la largeur pour bien centrer */
	}
	.texte-allan {
	    width: 100%;
	}

/* image pas plus large que l'ecran */
img {
    max-width: 100%; /* L'image ne peut pas être plus large que son parent */
    height: auto;    /* Conserve les proportions pour éviter de déformer l'image */
    display: block;  /* Supprime l'espace vide sous l'image */
}
}