@charset "utf-8";
/* CSS Document pour Trousse jeunes familles */


:root {
    --primary-color: #6d6f7c; /* Couleur principale */
    --secondary-color: #43819a; /* Couleur secondaire */
    --background-color: #ffffff; /* Couleur de fond spécifique */
    --font-color: #000000;
    --accent-color:#a5b452;
}


html {
    background-color: #ffffff;
}

/****titres****/


h1 {
    color: #6d6f7c; /* Couleur propre au site jeunes */
}

h1 a {
    color: #6d6f7c;
    font-weight: bold;
}
h1 a:visited, h1 a:link {
    color: #6d6f7c;
}
h2 {
    color: #43819a;
    
}
h3 {
    font-size: 1.2em;
	color: #a5b452;
    
    
    
}
h4 {
    font-size: 1.2em;
    font-weight: bold;
}

/********Général****/

main, .main {
    background-color: #ffffff;
}
a.hyperlien {
    color: #43819a;
    text-decoration: underline;
}

.ital {
    font-style: italic;
}

.picto-problematique {
    margin-top: 1em; /* Ajoute un espace au-dessus du texte */
}



/***Header****/


.header-container /*dans header-page du site jeunes, il n'y a pas les boîtes    */ {
    grid-template-columns: 1fr;
    grid-template-areas: "titre";
}

/****pages intérieures*****/
/*media queries pour étaler sur 2 rangées la ligne picto-problématique - inversé pour ce site */
@media only screen and (max-width:750px) {
    .picto-problematique {
        grid-template-columns: 1fr;
        grid-template-areas: "problematique""picto1";
    }
    .problematique {
        margin-top: 1em;
        padding-left: 0em;
    }
}
.round-developpement, .round-pluri, .round-formation, .round-religion, .round-construction, .round-racisme, .round-animation, .round-deux-garcons, .round-violence, .round-mediation, .round-representations, .round-temoignages, #round {
    width: 9em;
    height: 9em;
    border-radius: 6%;
    border: none;
}
/*image spécifique à chacune des pages*/
.round-pluri {
    background-image: url("../images/mere_mus_centre.png");
    background-size: cover;
    background-color: #43819a;
}
.round-formation {
    background-image: url("../images/grand_pere_centre.png");
    background-color: #43819a;
    background-size: cover;
}
.round-representations {
    background-image: url("../images/pere-fils.png");
    background-color: #43819a;
    background-size: cover;
}
.round-racisme {
    background-image: url("../images/mere_fille_centre.png");
    background-color: #43819a;
    background-size: cover;
}
.round-animation {
    background-image: url("../images/famille_centre.png");
    background-color: #43819a;
    background-size: cover;
}
.round-construction {
    background-image: url("../images/ado_fille_centre.png");
    background-color: #43819a;
    background-size: cover;
}
.round-temoignages {
    background-image: url("../images/fillette.png");
    background-color: #43819a;
    background-size: cover;
}
.round-violence {
    background-image: url("../images/balancoire_centre.png");
    background-color: #43819a;
    background-size: cover;
}
.round-mediation {
    background-image: url("../images/famille_2_centre.png");
    background-color: #43819a;
    background-size: cover;
}
.round-religion {
    background-image: url("../images/garcon_centre.png");
    background-color: #43819a;
    background-size: cover;
}
.round-deux-garcons {
    background-image: url("../images/2garcons_centre.png");
    background-color: #43819a;
    background-size: cover;
}

/*la section problematique sert ici a mettre le titre h2*/
.problematique {
    font-style: normal;
}


/***carrés de la page d'accueil***/
.bloc-container {
    margin-top: 0em;
}
.bloc-container .bloc .titre {
    font-weight: bold;
}


/***images dans les blocs***/
#bloc1 {
    background-image: url("../images/garcon.png");
    background-color: #43819a;
    background-size: cover;
}
#bloc1:hover {
    background-color: #a5b452;
}
#bloc2 {
    background-image: url("../images/2garcons.png");
    background-size: cover;
    background-color: #43819a;
}
#bloc2:hover {
    background-color: #a5b452;
    background-size: cover;
}
#bloc3 {
    background-image: url("../images/mere_mus.png");
    background-color: #43819a;
    background-size: cover;
}
#bloc3:hover {
    background-color: #a5b452;
}
#bloc4 {
    background-image: url("../images/mere_fille.png");
    background-color: #43819a;
    background-size: cover;
}
#bloc4:hover {
    background-color: #a5b452;
}
#bloc5 {
    background-image: url("../images/famille_2.png");
    background-color: #43819a;
    background-size: cover;
}
#bloc5:hover {
    background-color: #a5b452;
}
#bloc6 {
    background-image: url("../images/balancoire.png");
    background-size: cover;
    background-color: #43819a;
}
#bloc6:hover {
    background-color: #a5b452;
}
#bloc7 {
    background-image: url("../images/ado_fille.png");
    background-size: cover;
    background-color: #43819a;
}
#bloc7:hover {
    background-color: #a5b452;
}
#bloc8 {
    background-image: url("../images/grand_pere.png");
    background-size: cover;
    background-color: #43819a;
}
#bloc8:hover {
    background-color: #a5b452;
}
#bloc9 {
    background-image: url("../images/famille.png");
    background-size: cover;
    background-color: #43819a;
}
#bloc9:hover {
    background-color: #a5b452;
}
#bloc10 {
    background-image: url("../images/photo1.png");
    background-size: cover;
    background-color: #43819a;
}
#bloc10:hover {
    background-color: #a5b452;
}
#bloc11 {
    background-image: url("../images/pere-fils.png");
    background-size: cover;
    background-color: #43819a;
}
#bloc11:hover {
    background-color: #a5b452;
}
#bloc12 {
    background-image: url("../images/fillette.png");
    background-size: cover;
    background-color: #43819a;
}
#bloc12:hover {
    background-color: #a5b452;
}
/**********menu en haut****/
.inline1 {
    grid-area: apropos;
    display: flex;
    justify-content: center;
}
.inline2 {
    grid-area: public;
}
.inline4 {
    grid-area: ressources;
}
.inline5 {
    grid-area: contact;
}
.inline_ {
    grid-area: accueil;
}

/*Menu site jeunes*/

ul.header-menu-ul, ul.header-menu-ul-accueil {
    
    grid-template-columns: repeat(5, auto) 1fr;
    grid-template-areas: "menu accueil apropos public ressources contact .";
}

.dropdown:hover .dropbtn { /*couleur du dropdown button*/
    background-color: #6d6f7c;
}





.texte-theorique{ 
	padding : 0;
}


@media only screen and (max-width:876px) {
    a.phone {
        display: block;
    }
    .desktop {
        display: none;
    }
}
@media only screen and (max-width:650px) { /**permettre au h1 de prendre toute la place**/
    h1 {
        max-width: none;
    }
    @media only screen and (max-width:991px) {
        h1 {
            max-width: none;
            font-size: 1.5em;
        }
        h2 {
            font-size: 1.3em;
        }
        /*.video{

width:400px;
}*/
    }
}
/**retour en haut***/
#haut {
    background-color: #6d6f7c;
}
/***responsive iframe pour les vidéos***/
@media only screen and (max-width:991px) {
    .container-responsive {
        position: relative;
        width: 100%;
        overflow: hidden;
        padding-top: 56.25%; /* 16:9 Aspect Ratio */
    }
    .responsive-iframe {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
        border: none;
    }
}
@media only screen and (min-width:992px) {
    .responsive-iframe {
        width: 640px;
        height: 360px;
    }
}

/***cesure***/
.cesure {
    wordbreak: breakword;
}
@media only screen and (max-width:991px) {
    .header-container {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        grid-template-areas: "titre"
    }
}