body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 120vh;
    font-family: Quicksand, "Trebuchet MS", Verdana, "Lucida Grande", Tahoma, Arial, Helvetica, Sans-Serif;
    --rouge: #8b0000;
    --jaune: #f9d4a1;
    --gris: #ebe7e7;
    --grisclair: #eee;
    --grisfonce: #676767;
    --white: white;
    --ocre: #ffe3af;
    --hover: #fe9305;
    --black: black;
    --fondslide7: #ccc;
}

headerresp{
  display : none;
}

 /*  ALSACREATION BURGER */
nav > input, 
.nav-button {
  display: none;
}

#bodygrid {
    margin-top: 21vh;
    width: 100%;
    min-height: 100vh;
    display: grid;
    grid-template-rows: repeat(23, 3vh);
    grid-template-columns: repeat(24, 4vw);
}

h1 {
    font-size: 1.8vw;
    font-size: max(min(2vw, 2em), 1.2rem);
    text-align: justify;
}

h2 {
    font-size: 1.6rem;
    text-align: justify;
    color: var(--rouge);
    margin : 0;
}

h3 {
    text-align: justify;
    color: var(--rouge);
    font-size: max(min(1.2vw, 1.2em), 0.8rem);
}

h4 {
    text-align: justify;
    color: var(--rouge);
    margin : 0;
    padding :0;
}

p {
    font-size: 0.9rem;
    text-align: justify;
    color: var(--black);
    font-weight: 500;
}

pp {
    font-size: 0.7vw;
    text-align: justify;
    color: var(--rouge);
}

/*     *****     Menu responsive     *****     */
#menu {
    display: none;
}

/*     *****     Pages     *****     */



h2::first-letter{
    font-size : 2.2rem;
    color : var(--rouge);
}

.titredroi{
    grid-row : 2/3;
    grid-column : 7 / 12; 
}

.textegauch{
    grid-row :6 / 23;
    grid-column : 9 / 16; 
}

.imagedroite1{
    grid-row: 5 / 12;
    grid-column: 2 / 6;
}

.imagedroite2 {
    grid-row: 14 / 21;
    grid-column: 2 / 6;
    width: 100%;
}

.textegauchresp1,
.imagedroite1resp
{  /* dans Bienvenue */
    display : none;
}

.textegauch p::first-letter,
.textedroi p::first-letter,
#zoneretrait p::first-letter 
{
    font-size: 1.4rem;
    color: var(--rouge);
}

.textedroi {
    grid-row: 2/17;
    grid-column: 17 / 24;
}

.reglement {
    grid-row: 6;
    grid-column: 9 / 21;
}

#imgregl{
    margin-top : 75vh;
    grid-row:1/ 4;
    grid-column: 2 / 4;  
}

.boutonimpr {
    grid-row: 2;
    grid-column: 19 / 22;
    width : 100%;
    height : 4.5vh;
    background-color: var(--grisclair);
    text-align: center;
    border-radius : 5px;
    padding-bottom : 0;
}

.boutonimpr p{
margin : 0;
}

.boutoninscrip {
    width : 100%;
    height : 4vh;
    background-color: var(--grisclair);
    text-align: center;
    border-radius : 5px;
    padding-top :1.5vh;
}

.boutoninscrip a{
    text-decoration: none;
    color : var(--black);
}

/*     *****     Fin pages     *****     */

/*     *****     HomePage     *****     */

.titre {
    font-size: 2.1vw;
    color: var(--rouge);
    text-align: right;
    border-bottom: 2px solid var(--rouge);
    margin-bottom: 4.5vh;
}

/*     *****     Header     *****     */

header {
    position: fixed;
    top: 0;
    left: 0;
    background-color: var(--white);
    width: 100vw;
    height: 24vh;
    display: grid;
    grid-template-rows: repeat(5, 1fr);
    grid-template-columns: repeat(20, 1fr) 1.5vw 5vw 5vw 1vw;
}

/*header a::first-letter {
    color: var(--rouge);
} */

header h5 {
    font-size: 1vw;
    color: var(--black);
    margin-top : 0;
}

header a{
    text-decoration: none;
    padding-top : 0;
    margin-top : 1vh;
}

header h5:hover {
    color : var(--rouge);
}

#logo {
    grid-row: 1 / 5;
    grid-column: 1 / 3;
    margin-right: 2vw;
    margin-left: 2vw;
    width: 60%;
}

#logo img{
    height : 85%;
}

#menuhaut {
    margin-top: 1vh;
    grid-row: 2;
    grid-column: 6 / 23;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

#menuhaut a h4 {
    border-bottom: 2px solid var(--rouge);
    color: var(--rouge);
    padding-bottom: 0.3vh;
    padding-bottom: 1vh;
}

#menuhaut a h4:hover  {
    color : red;
    border-bottom: 3px solid white;
}

.collyc {
    grid-column: 6 / 16;
    grid-row: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

.collyc h1 {
    margin-left: 0%;
    font-size: 2.6vw;
    color: black;
}

.collyc h3 {
    color: var(--rouge);
} 

#mail {
    grid-row: 1 / 2;
    grid-column: 22 / 25;
  /*   height: 3.5vh; */
}

#home {
    grid-row: 1 / 2;
    grid-column: 23 / 24;
    width: 5vw;
    height: 3.5vh;
    margin-top : 1.5vh;
    margin-left : 0.5vw;
}

#mail p {
    font-size: 0.8rem;
    color :var(--black);
}

#mailimg{
    grid-row: 1;
    grid-column: 21;
    margin-top : 8vh;
}


/*     *****     Fin Header     *****     */

#slide1,
#slide2,
#slide3,
#slide4,
#slide5,
#slide6,
#slide7 {
    grid-row: 5;
    grid-column: 1;
    display: grid;
    grid-template-rows: repeat(20, 1fr);
    grid-template-columns: repeat(12, 1fr);
}

#slide1 {
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

#slide1 h1 {   
    grid-row: 4;
    grid-column: 5 / 11;
    font-size : 2.5vw;
    margin : 0 0 0 0;
    color : var(--rouge);
}

#slide1 h3 {   
    grid-row: 5;
    margin : 4vh 0 0 0 ;
    grid-column: 10 / 12;
    font-size : 1vw;
    color : var(--rouge);
}
     
#slide2 {
    background-color: #eee; /*var(--grisclair);*/
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    width: 100vw;
    height: 75vh;
    margin-bottom : 0;
}


#slide2 .fournilectures{
    grid-row: 3 / 5;
    grid-column: 2 / 12;

}

#slide2 .fournilectures h3 a {
    color: var(--rouge);
    text-decoration: none;
    display: flex;
    justify-content: space-around;
    height: 100%;
    border-radius: 10px;
    background-color: var(--white);
}

#slide2 .fournilectures h3 a:hover {
    background-color: var(--hover);
}

#lectures {
    grid-row: 3 / 11;
    grid-column: 7 / 20;
}

#fournitures {
    grid-row: 14 / 22;
    grid-column: 7 / 20;
}

.boutons {
    margin-top : 5vh;
    display : flex;
    flex-direction : row;
    justify-content: justify-conbtent;
    
}

.boutons a {
    width: 20%;
    margin-right: 2%;
   background-color: var(--grisclair);
    border-radius: 10px;
}

.boutons a:hover {
    background-color: var(--hover);
}

.boutons a h3{
      text-align: center;  
}

#slide2 .encart1 {
    grid-row: 7 / 18;
    grid-column: 2 / 6;
}



#slide2 .encart2 {
    grid-row: 7 / 18;
    grid-column: 8 / 12;
}

#slide2 .encart1,
#slide2 .encart2 {
    background-color: var(--white);
    padding: 3vh;
    overflow: auto;
}

*[class^="encart"] p {
text-align: left;
}

#slide3 {
    background-image: url(../images/image2.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    height: 125vh;
}

#slide3 .encart {
    grid-auto-rows : auto;
    grid-column: 1 / 8;
    margin-left: 10%;
    margin-top : 5vh;
    background-color: var(--white);
    padding: 3vh;
  
}

#slide3 #texte1
 {
    background-color: var(--grisclair);
    border-radius: 10px;
    width: 90%;
    padding: 2%;
    display : -webkit-box;
    display : -ms-flexbox;
    display : flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-dirfcection: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

#slide4 {
background-color: var(--gris);
 height : 45vh;
  
}

#slide4 img {
    grid-row: 4 / 6;
    grid-column: 5 / 9;
}

.basgauche {
    grid-row: 7 / 18;
    grid-column: 2 / 5;
    border-radius : 10px;
    padding : 2%;
}

.basdroite {
    grid-row: 7 / 18;
    grid-column: 9 / 12;
    border-radius : 10px;
    padding : 2%;
}

#slide5 {
    background-color:var(--ocre);
    height : 100vh;
}

#slide5affich{
    grid-row: 4/ 17;
    grid-column: 2 / 12; 
    display : -webkit-box; 
    display : -ms-flexbox; 
    display : flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap : wrap;
    flex-wrap : wrap;
}

.encart51,
.encart52,
.encart53{
    width : 22%;
    height : 80%;
    background-color: var(--white);
    padding : 2%;
    overflow:auto;
    border-radius : 2%;
} 

#slide7 #bodygrid{
    margin-top : 0;
}

/*     ***     SLIDER Home  & Slider2 VISITE    **/

div#slider figure img {
    width: 20%;  /* 100% / 5 images*/
    height: auto;
    float: left;
}

div#slider2 figure img {
    width: 8.333%; /*(100%/12 images */
    height: auto;
    float: left;
}

div#slider {
    margin-top : 25vh;
    width: 100%;
    max-width: 10000px;
    overflow: hidden;
}

div#slider2 {
    margin-top : 0vh;
    width: 80%;/* 80%; */
    max-width: 2000px;
   overflow: hidden;
}

div#slider figure
{
    position: relative;
    width: 500%; /* car 5 images */
    top :0vh;
    margin: 0;
    padding: 0;
    font-size: 0;
    left: 0;
    text-align: left;
    -webkit-animation: 20s slidy infinite; /* ex 20s */
    animation: 20s slidy infinite;
}

div#slider2 figure{
    position: relative;
    width: 1200%; /*car 12 images*/
    top :0vh;
    margin: 0;
    padding: 0;
    font-size: 0;
    left: 0;
    text-align: left;
    -webkit-animation: 30s slidy infinite;
    animation: 30s slidy2 infinite;
}


 @-webkit-keyframes slidy {
    0% {
        left: 0%;
    }

    20% {
        left: 0%;
    }

    25% {
        left: -100%;
    }

    45% {
        left: -100%;
    }

    50% {
        left: -200%;
    }

    70% {
        left: -200%;
    }

    75% {
        left: -300%;
    }

    95% {
        left: -300%;
    }

    100% {
        left: -400%;
    }
}

 @keyframes slidy {
  
    
    10% {
        left: 0%;
    }

    20% {
        left: 0%;
    }

    25% {
        left: -100%;
    }

    45% {
        left: -100%;
    }

    50% {
        left: -200%;
    }

    70% {
        left: -200%;
    }

    75% {
        left: -300%;
    }

    95% {
        left: -300%;
    }

    100% {
        left: -400%;
    } 
} 

@-webkit-keyframes slidy2 {
   0% {
        left: 0%;
    } 

    8.33% {
        left: 0%;
    }

    16.66% {
        left: -100%;
    }

    25% {
        left: -200%;
    }

    33.33% {
        left: -300%;
    }

    41.66% {
        left: -400%;
    }

    50% {
        left: -500%;
    }

    58.33% {
        left: -600%;
    }

    66.66% {
        left: -700%;
    }
    
    75% {
        left: -800%;
    }
    
    83.33% {
        left: -900%;
    }
    
    91.66% {
        left: -1000%;
    }
   100% {
        left: -1100%;
    }
 
} 

@keyframes slidy2 {
   0% {
        left: 0%;
    } 

    8.33% {
        left: 0%;
    }

    16.66% {
        left: -100%;
    }

    25% {
        left: -200%;
    }

    33.33% {
        left: -300%;
    }

    41.66% {
        left: -400%;
    }

    50% {
        left: -500%;
    }

    58.33% {
        left: -600%;
    }

    66.66% {
        left: -700%;
    }
    
    75% {
        left: -800%;
    }
    
    83.33% {
        left: -900%;
    }
    
    91.66% {
        left: -1000%;
    }
   100% {
        left: -1100%;
    }
 
}

/*     *****     Associations     *****     */

.assocgauch{
    grid-row : 7/ 17;
    grid-column : 9 / 24; 
}

.logoassoc{
    grid-row :4 / 8;
    grid-column : 5 / 7;  
}

/*     *****     Page Renseignements     *****     */

.icones{
    grid-row: 22/ 24;
    grid-column: 4 / 24;
    display: grid;
    grid-template-rows:  10vh;
    grid-template-columns: repeat(7, 1fr);
}

.icones a{
  text-decoration: none;
} 

.icones a h3{
   color : var(--black);
}

#pratique {
    margin: 0;
    padding: 0;
    background: url(../images/image8.jpg) no-repeat center fixed;
    background-size: cover;
}

.icone {
    height: 100%;
    width: 55%;
    border-radius: 10%;
    background-color: var(--grisclair);
}

.icones :hover {
    background-color: var(--hover);
}

.icone img {
    margin-left:  25%; /* 23%; */
    padding-top: 10%;
}

.icone a,
.icone h3 {
    font-size: 0.9vw;
    margin: 0;
    text-align: center; 
}

#iconeslaterales {
    grid-row: 6 / 24;
    grid-column: 2 / 4;
    display: grid;
    grid-template-rows: repeat(7, 6vh);
    grid-template-columns: 8vw;
    grid-row-gap: 2vh;
}

#iconeslaterales .icone {
    height: 120%;
    width: 60%;
    border-radius: 10px;
}

#iconeslaterales :hover{
    background-color: var(--hover);
    border-radius : 5px;
}

#iconeslaterales img{
    margin : 0;
    margin-left :30%;
    margin-bottom : 1vh;
}

#iconeslaterales .icone h3{
    margin : 0;
    margin-right :0vw;
    font-size : 0.75vw;
    line-height : 0vh;
    color : var(--black);
}

#iconeslaterales a{
    text-decoration: none;
    margin-left : 0;
}

/*     *****     Fin page Renseignements     *****     */

#slide7 {
    background-color: var(--fondslide7);
    height: 120vh;
    width: 100vw;
    padding-top: 10px;
}

#gauche{
    grid-row: 4 / 24;
    grid-column: 4 / 13;   
}

#slide7 .titre {
    grid-row: 4 / 4;
    grid-column: 4 / 9;
    padding-top: 5%;
    border-bottom: 0px;
}

/*     *****     Actualité     *****     */

.titreactu1,
.titreactu2,
.titreactu3,
.titreactu4{
    background-color: var(--rouge);
} 

.titreactu1 h3,
.titreactu2 h3,
.titreactu3 h3,
.titreactu4 h3{
    color : var(--white);
    font-size : 0.75vw;
    font-weight: 700;
    text-align : center;
}

.cadreactu1bis,
.cadreactu2bis, 
.cadreactu3bis, 
.cadreactu4bis {
   display : none;
}

.titreactu1 {
    grid-row: 6 / 8;
    grid-column: 5 / 13;
}

.cadreactu1,
.cadreactu1bis {
    grid-row: 9/ 20;
    grid-column: 5 / 13;
}

/*.titreactu2{
    grid-row: 6 / 8;
    grid-column: 10 / 13;
} */

/*.cadreactu2,
.cadreactu2bis{
    grid-row: 9 / 20;
    grid-column: 10 / 13; 
} */

.titreactu3 {
    grid-row: 6 / 8;
    grid-column: 15 / 18;
}

.cadreactu3,
.cadreactu3bis{
    grid-row: 9 / 20;
    grid-column: 15 / 18;
}

.titreactu4
{
    grid-row: 6 / 8;
    grid-column: 20 / 23;
}

.cadreactu4,
.cadreactu4bis{
    grid-row: 9 / 20;
    grid-column: 20 / 23;
}

*[class^="titreactu"] p {
text-align: center;
}

.imageactu img{
    border-radius : 5%;
}

.imgactu1resp, .imgactu2resp, .imgactu3resp,.imgactu4resp{
display : none;
}

#actugauche .titreactu{
    border-bottom : 0;  /* celui des événements */
    background-color: var(--white);
    border : 0;
    margin-top : 0;
}

.cadreactu1 .titreactu p,
.cadreactu2 .titreactu p,
.cadreactu3 .titreactu p,
.cadreactu4 .titreactu p,
.actu1bouton p,
.actu2bouton p,
.actu3bouton p{
    text-align: center;
    font-weight: 800;
}

.evenements {
    grid-row: 16 / 18;
    grid-column: 1 / 4;
    border-radius: 6px;
    background-color: var(--grisclair);
    height: 100%;
    margin-left: 1vw;
}

.evenements a,
.cadreactu1bis a,
.cadreactu2bis a,
.cadreactu3bis a,
.cadreactu4bis a
{
    text-decoration: none;
    color : var(--rouge);
} 

.evenements:hover,
.boutonactu:hover{
    background-color: var(--hover);
}

.evenements p,
.boutonactu p
{
    text-align: center;
    font-size : 1.2rem;
}

.boutonactu a{
    text-align: center;
    font-size : 0.9rem;
    padding-top : 2.8vh;
} 

.droitetextes img{
    width : 40%;
}

#premier, #deuxieme, #troisieme{
    grid-row: 4 / 27;
    grid-column: 2 / 24; 
}

.titreactu{
    margin-left : 0vw;
    width : 30%;
}

.gauchetextes{
    width : 50vw;
    margin-right : 5vw;
}

.droitetextes{
    width : 50vw;
}

.titreactu,
.titrevenement{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 24vh;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.droitetextes img {
    float: left;
    padding-right: 5%;
    padding-bottom: 2%;
}

.titreactu button {
    width: 45%;
    height: 15%;
    border-radius: 5px;
}

.titreactu button p {
    margin-top: 0vh;
    height: 100%;
    line-height: 4vh;
}

.titreactu button :hover {
    background-color: var(--hover);
    border-radius: 5px; 
}


/*   CSS ACTU BP2   */

#actugauche {
    width: 89%;
    height: auto;
    padding: 1% 1% 1% 4%;
    margin-right: 4%;
    margin-bottom: 3%;
}

.quatreactus{
    width : 100%;
    display : -webkit-box;
    display : -ms-flexbox;
    display : flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.date {
    width: 7%;
    height: auto;
    margin-bottom: 1%;
}

.datevide {
    width: 20%;
    display: none;
}

.carreactu {
    width:  20%; /* ex 27%; */
    height: auto;
    margin-bottom: 1.5%;
    margin-left: 1%;
    padding: 0% 1% 1% 1%;
    border: 1px solid var(--rouge);
}

.carreactuvide {
    width:  20%; /* ex 27%; */
    height: auto;
    margin-bottom: 1%;
    padding: 0 1% 1% 1%;
    border: 1px solid white;
    border-radius: 4%;
    margin-left: 1%;
}

.titrecarre p{
    font-size : 0.9rem;
    line-height: 1.4vw;
    border-bottom : 1px solid var(--rouge);
}

.carrebasse{
    margin-top : 3%;
    width : 98%;
    height : auto;
    text-align: justify;
    font-size: 0.8vw;
}

.carrebasse img{
    width : 98%;
}

.carrebasse p{
      font-size: 0.9vw;
    text-align: left;
}

/*     *****     Footer     *****     */

#footer {
    height : 15vh;
    width :90%;
    margin-left : 5%;
    margin-top : 2%; /* 2%; */
    display : -webkit-box;
    display : -ms-flexbox;
    display : flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    border-top : 2px solid var(--rouge);
}

.infooter{
    width : 14%;
    height : 100%;
}

.infooter .titre{
    margin-bottom : 0.5vh;
}

.infooter h5{
    margin : 0;
    font-size : 1.2vw;
    margin-right : 1vw;
}

.infooter p{
    margin : 0;
    font-size : 1rem;
    text-align : left;
}

.imagefooter img{
   margin-top : 4vh; 
}

.infooter a{
    text-decoration: none;
    color : var(--black);
}

.infooter a:hover{
    color : var(--hover);
    font-weight: 800;
}

/*     *****     Fin Footer     *****     */

/*     *****     Page Mail     *****     */

.texte1 {
    grid-row: 4 / 8;
    grid-column: 2/6;
    text-align: justify;
}

.texte2 {
    grid-row: 11 / 17;
    grid-column: 2/6;
    text-align: justify;
}

.message1 {
    grid-row: 5 / 9;
    grid-column: 8 / 11;
}

.message2 {
    grid-row: 13 / 20;
    grid-column: 8 / 11;
    border : 1px solid black;
    border-radius: 5%;
}

/*     *****     Page Collège   *****     */

#textecol{
    grid-row: 5 / 23;
    grid-column: 8 / 25;
    display : grid;
    grid-template-rows: repeat(20, 3vh);
    grid-template-columns: repeat(20, 2vw);
}

*[class^="bouton"] p{
    text-align: center;
    margin-top : 0;
    margin-bottom : 0;
    width : 12vw; 
   line-height : 1.8rem;
    border-radius : 20px;
}

*[class^="bouton"] a,
button p, button a{
text-decoration : none; 
}


*[class^="bouton"] p:hover{
    background-color : var(--hover);
} 

button {
   /* width : 25vw; */
   /* height : 5vh; */
    background-color: var(--grisclair);
    border-radius: 20px ;
    border: 0;
    margin: 0;
    padding: 0;
    margin-bottom : 3%;
}

button a{
    line-height: 2rem;
}

#boutongrid {
    grid-row: 3 / 25;
    grid-column: 2 / 5;
    display : grid;
    grid-template-rows: repeat(20, 3vh);
    grid-template-columns: 12vw; 
}

.boutoncol{
    grid-row: 1 / 3;
}

.boutonins{
    grid-row: 4 / 6;
}

.boutonhor{
    grid-row: 7 / 9;
}

.boutontar{
    grid-row: 10 / 12;
}

.boutonres {
    grid-row: 13 / 15;
}

.boutonensrel {
    grid-row: 16 / 18;
}

#gridhoraires p,
#gridtarifs p {
    margin: 0;
    margin-bottom: 2%;
}

#gridhoraires {

    width: 80%;
    margin-top: 3%;
    margin-left : 10%; */
}

#gridhoraires2 {

    width: 90%;
    margin-top: 5%;
    margin-left : 0%;
    }

#gridtarifs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    justify-items : center;
    width: 90%;
    margin-top : 0%;
}

#gridtarifs  p{
    -ms-flex-item-align: center;
    align-self: center;
}


#titrecollege,
#titreinscription,
#titrehoraires,
#titrefaitreligieux,
#titretarifsgauch,
#titreinscription,
#titreresultats,
#titrefaitsreligieux
{
	grid-row: 4/23;
	grid-column: 8 / 15;
	display: none;
}

#titregauch{
	grid-row: 4/23;
	grid-column: 8 / 15;	
}

#zoneretrait{
	grid-row: 6 / 23;
	grid-column: 9 / 21;	
}

#zoneretraitresp1
{
display : none;
}

#zonecollege,
#zonehorairesgauch,
#zonetarifs,
#zoneinscription,
#resultatsgauch,
#zonefaitsreligieux{
	grid-row: 6 / 23;
	grid-column: 9 / 17;
	display: none;
}

#zoneinscription,
#zonefaitsreligieux{
	grid-row: 6 / 23;
	grid-column: 9 / 23;
	display: none;
}

#zonehorairesdroi {
	grid-row: 6 / 23;
	grid-column: 17 / 23;
	display: none;
}

#titrecollege,
#zonecollege,
#autres,
#imagecollegiens{
	display : block;
}

#autres {
    grid-row: 12 / 23;
    grid-column: 19 / 24;
    border-radius: 5%;
    padding: 4%;
    width : 100%;
}

#autres h3, #titrespecial h3 {
    margin-top: 0%;
}

#titrespecial{
    grid-row: 11 / 12;
    grid-column: 9 / 14;
    display : none;
}

#titrespecial h3{
    margin : 0;
    margin-left : 3vw;
}

#specialgauch {
width : 50%;
}

#specialdroi {
width : 45%;
}

#imagecollegiens{
    grid-row: 7 / 10;
    grid-column: 20 / 24;
    display : block;
}

#imagelyceens{
    grid-row: 8 / 15;
    grid-column: 20 / 24;
    display : none;
    margin-left : 3vw;
}

#horairesdroi{
    grid-row: 3 / 16;
    grid-column: 15 / 21;
    margin-left : 5vw;
}

#inscriptiondroi {
    grid-row: 4 / 16;
    grid-column: 17 / 24;
}

#resultatsdroi {
    grid-row: 5 / 23;
    grid-column: 15 / 24;
}

#inscriptiongauch,
#horairesgauch,
#horairesdroi,
#resultatsgauch,
#tarifsgauch,
#resultatsdroi{
    display: none;
}

#imagecallepin, #imagehorloge{
    grid-row: 6 / 15;
    grid-column: 2 / 4;  
}

#voiturelivres{
    grid-row: 6 / 15;
    grid-column: 2 / 6;  
}

#religieuxg{

    display : none;
}

#religieuxd{
    grid-row: 2 / 15;
    grid-column: 16 / 24;
    display : none;
}


/*     *****     Page Qui sommes-nous     *****     */


#troisboutonsresp {
    grid-row: 5 / 10;
    grid-column: 2 / 5;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

#troisboutons{
    display : none;
}

.bp4, bp5, .berpa1, .bp7{
    margin : 0;
}

/*     *****     CADRE et BOUTON Histoire    *****     */

.cadrehist {
    grid-row: 4 / 8;
    grid-column: 3 / 5;
    width: min(700px, 75%);
    width: max(16vw);
}

/*  *********  CADRE et BOUTON BP  *******   */

.cadrebp {
    grid-row: 11 / 15;
    grid-column: 3 / 5;
    width: min(700px, 75%);
    width: max(16vw);
}

/*  *********  CADRE et BOUTON Evolution  *******   */

.cadrevol {
    grid-row: 18 / 22;
    grid-column: 3 / 5;
    width: min(700px, 75%);
    width: max(16vw);
}

.boutonhist h3,
.boutonbp h3,
.boutonevol h3{
   text-align: center;  
}

#notrehistoire{
    
    grid-row: 8 / 23;
    grid-column: 8 / 23;
    display : -webkit-box;
    display : -ms-flexbox;
    display : flex;
    -webkit-box-orient : horizontal;
    -webkit-box-direction : normal;
    -ms-flex-direction : row;
    flex-direction : row;
    -ms-flex-wrap : wrap;
    flex-wrap : wrap;
}

#notrevolution{
    grid-row: 5 / 23;
    grid-column: 8 / 23;
    display : -webkit-box;
    display : -ms-flexbox;
    display : flex;
    -webkit-box-orient : horizontal;
    -webkit-box-direction : normal;
    -ms-flex-direction : row;
    flex-direction : row;
    -ms-flex-wrap : wrap;
    flex-wrap : wrap;
}

#zonehist{
    height : 55%;
    display : -webkit-box;
    display : -ms-flexbox;
    display : flex;
    -webkit-box-orient : horizontal;
    -webkit-box-direction : normal;
    -ms-flex-direction : row;
    flex-direction : row;
    -webkit-box-pack : justify;
    -ms-flex-pack : justify;
    justify-content : space-between;
}

.textehist{
    width : 60%;
}

#zonetraitehistoire, #zonetraiteevolution{
    width : 100%;
}

/*  Zone evolution site  */

#zonetraiteevolution,
#photosevol{
    display : none;
}

#photosevol {
    height : 40%;
    width : 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

#photosevol img{
    max-width : 100%;
    height : 100%;
}

/*     *****    Localisation BP     *****     */

.localicarte{
    grid-row: 9 / 19;
    grid-column: 6 / 14;  
}

.localitexte{
    grid-row: 15 / 18;
    grid-column: 17 / 20;  
}

.localiphoto{
    grid-row: 6 / 12;
    grid-column: 16 / 20;
}

/*  Zone Bernard Palissy  */

#zoneberpal
{
    grid-row: 6 / 23;
    grid-column: 8 / 23;
    display : none;
}

#photosberpal {
    grid-row: 17 /23;
    grid-column: 8 / 24;
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(26, 1fr);
}

.photosberpal{
    margin-top : 5vh;
    display : -webkit-box;
    display : -ms-flexbox;
    display : flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.bp4{
    height : 20%;
}

/*  Zone Notre Histoire et Evolution du site */

#zonetraitehistoire
{
    height :55%;
    display : grid;
    grid-template-rows: repeat(26, 1fr);
    grid-template-columns: repeat(23, 1fr) 2vw;
    background-color: var(--grisclair);
}

#zonetraiteevolution 
{
    height :50%;
    display : grid;
    grid-template-rows: repeat(20, 5%);
    grid-template-columns: repeat(23, 1fr) 2vw;
    background-color: var(--grisclair);
}

#zonetraitehistoire h3,
#zonetraiteevolution h3{
    grid-row: 1 / 2;
    grid-column: 1 / 16;
    margin-bottom : 0;
    margin-top : 0;
}

#zonetraitehistoire pp,
#zonetraiteevolution pp{
    grid-row: 1 / 2;
    grid-column: 16 / 24;
    margin-bottom : 0;
    margin-top : 0;
}

#trait{
    grid-row: 3 / 4;
    grid-column: 1 / 25;
    border-top : 2px solid var(--rouge);
}

#separateurgauch{
    grid-row: 4 / 24;
    grid-column: 4 / 5;
    border-right : 1px solid var(--rouge);
}

#separateurdroi{
    grid-row: 4 / 24;
    grid-column: 18 / 19;
    border-right : 1px solid var(--rouge);
}

*[class^="hcase"],
*[class^="ecase"]{
    border-radius: 5px;
}

*[class^="hcase"] p,
*[class^="ecase"] p{
    margin: 0;
    color: var(--black);
    text-align: center;
    font-size: 0.75rem;
}

*[class^="hcase"] :hover,
*[class^="ecase"] :hover{
    background-color: var(--hover);
}

.hcase1, .ecase1{
    grid-row: 4 / 6;
    grid-column: 1 /5;
}

.hcase2, .ecase2{
    grid-row: 7 / 9;
    grid-column: 1 /5;  
}

.hcase3, .ecase3{
    grid-row: 10 / 12;
    grid-column: 1 /5; 
}
.hcase4, .ecase4 {
    grid-row: 13 / 15;
    grid-column: 1 /5;
}

.hcase5, .ecase5 {
    grid-row: 16 / 18;
    grid-column: 1 /5;
}

.hcase6, .ecase6 {
    grid-row: 19 / 21;
    grid-column: 1 /5;
}

.hcase7, .ecase7 {
    grid-row: 4 / 6;
    grid-column: 19 / 23;
}

.hcase8, .ecase8{
    grid-row: 7 / 9;
    grid-column: 19 / 23;
}

.hcase9, .ecase9 {
    grid-row: 10 / 10;
    grid-column: 19 / 23;
}

.hcase10, .ecase10 {
    grid-row: 13 / 15;
    grid-column: 19 / 23;
}

.hcase11, .ecase11 {
    grid-row: 16 / 18;
    grid-column: 19 / 23;
}

.hcase12{
    grid-row: 19 / 21;
    grid-column: 19 / 23;
}

#espaceaffich,
#espaceaffichevol{
    grid-row: 8 / 23;
    grid-column: 6 / 18;
    text-align: justify;
    color : var(--rouge);
    font-size : 1rem; /*2vh; */
    margin-top : 1.2vh;
}

#titre, #etitre{
    grid-row: 5 / 7;
    grid-column: 6 / 18;
    color : var(--rouge);
    font-weight: 800;
    font-size : 1rem;
    
}

/*     *****     Contact     *****     */

#gauche{
    grid-row: 1 / 25;
    grid-column: 4 / 13;  
}

#mentions{
     grid-row: 26;
    grid-column: 4 / 13;

}

#mentions a{
      text-decoration : none;
    color : var(--rouge);
}

#droite{
    grid-row: 4 / 24;
    grid-column: 14 / 24;
} 

#formulaire {
    background-color: var(--grisclair);
    border-radius : 10px; 
}

fieldset{
    padding : 3%;
    border : 0;
}

.titreform {
    float: left;
    width: 30%;
    padding-right: 10px;
}

input {
    border-radius: 4px;
    border : 1px solid var(--grisfonce);
    width : 52%;
}

textarea, select {
    border-radius: 4px;
    border : 1px solid var(--grisfonce);
    width : 85%;
}

.boutonform{
    height : 4vh;
    background-color: var(--white);
    float : right;
}

/*     *****    Mentions légales     *****     */

#mentionsgauches{
    grid-row: 6 / 20;
    grid-column: 9 / 16;  
}

#mentionsdroites{
    grid-row: 6 / 20;
    grid-column: 16 / 23;  
}

#mentionsgauches h3{
    margin-bottom : 0;
}

/*     *****     Equipes     *****     */

.boutondirection, .boutonpedago{
    background-color: var(--grisclair);
    margin-bottom : 6%;
    border-radius : 20px;
}

#boutonsequipes{
    grid-row: 3 / 5;
    grid-column: 9 / 16;
    display : -webkit-box;
    display : -ms-flexbox;
    display : flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}


.boutondirection h3,
.boutonviescolaire h3,
.boutonpedago h3
{
    line-height : 2vh;
    text-align: center;
}

#cadredirection,
#cadrepedago{
    grid-row: 6 / 10;
    grid-column: 5 / 25;
    display : -webkit-box;
    display : -ms-flexbox;
    display : flex;
    -webkit-box-orient : horizontal;
    -webkit-box-direction : normal;
    -ms-flex-direction : row;
    flex-direction : row;
    -ms-flex-wrap : wrap;
    flex-wrap : wrap;
}

#cadreviescolaire{
    grid-row: 12 / 18;
    grid-column: 5 / 25;
    display : -webkit-box;
    display : -ms-flexbox;
    display : flex;
    -webkit-box-orient : horizontal;
    -webkit-box-direction : normal;
    -ms-flex-direction : row;
    flex-direction : row;
    -ms-flex-wrap : wrap;
    flex-wrap : wrap;
}

#cadrepedago{
    display : none;
}

.cadreindividuel{
    width : clamp(220px, 8vw, 13vw);
    height : auto;
    border : 1px solid var(--rouge);
    margin : 1%;
    display : -webkit-box;
    display : -ms-flexbox;
    display : flex;
    -webkit-box-orient : vertical;
    -webkit-box-direction : normal;
    -ms-flex-direction : column;
    flex-direction : column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    border-radius : 10px;
}

.cadreindividuel p{
    margin : 3%;
    font-size : 0.8rem;
    text-align: center;
}

.nomprof{
   border-bottom : 1px solid var(--rouge);
	background-color : floralwhite;
}

/*     *****     Visite en images     *****     */

#visite{
    grid-row: 6 / 22;
    grid-column: 6 / 19;   
}

.slide img {
    position: absolute;
    margin: auto;
    max-height: 60%;
    max-width : 90vw;
}



/*     *****     Media Queries     *****     */
/*********************************************/
/*********************************************/


@media screen and (max-width:1400px) {

    .imagedroite1 img,
    .imagedroite2,
    .imagedroite3 {
        display: none;
    }

    .textegauch {
        grid-column: 4 / 23;
    }

    #slide7 {
        height: 130vh;
    }

} 


@media screen and (max-width:1024px) {
    
button {
    width: 25vw;
    height: 7vh;
    background-color: var(--grisclair);
    border-radius: 20px;
    border: 0;
    margin: 0;
    padding: 0;
    margin-bottom: 3%;
}

button p {
    line-height: 2rem;
}
    
   
/* Menu Hamburger Alsacréation */
    
 .nav-inner {
     position: absolute;
     margin-top : 1vh;
     z-index: 5;
     width: 50vw;
     -webkit-transform: translateX(50%) translateZ(0);
     transform: translateX(50%) translateZ(0);
     -webkit-transition: -webkit-transform 1.2s;
     transition: -webkit-transform 1.2s;
     transition: transform 1.2s;
     transition: transform 1.2s, -webkit-transform 1.2s;
     will-change: transform;
     background-color: var(--white);
     padding : 3%;

 }

 /* here's goes the slide effect */
 input:checked ~ .nav-inner {
     -webkit-transform: translateX(-110%);
     transform: translateX(-110%);
 }
 /* passe de burger à croix */   
input:checked ~ .nav-button { 
    background: var(--grisfonce) url(../images/croix.png) center center no-repeat;
 }

.nav-button {
    background: var(--grisfonce) url(../images/menu_bg.png) center center no-repeat;
    display: block;
    height: 15vh; /*35px*/
    width: 10vw;
    position: absolute;
    top: 2vh;
    right: 5vw;
}
nav a {
    display: block;
    padding: .2em;
    margin-bottom: 5px;
    text-decoration: none;
    color: var(--black);
    background: var(--fondslide7);
}
    
nav a:hover {
    background-color :var(--ocre);
}
    
/* Fin Menu Hamburger Alsacréation */

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

h2 {
   font-size: 5vw;
    line-height: 3vh;
    margin-bottom: 2vh;
}

h2::first-letter{
    font-size : 5vw;
    color : var(--rouge);
}

h3{
    font-size: 4vw;
    line-height: 4vh;
    margin-top: 4%;
}
    
h4 {
   /* font-size: 4.5vw; */
    line-height: 3vh;
    margin-top: 4%;
    text-align: left;
}
        
h5 {
    font-size: 0.8em;
}
    
#footer {
    display: none;
} 
    
header {
    display: none;
}
    
*[class^="bouton"] p{
    text-align: center;
    width : 100%;
}
    
    
/*   Page frissons  ***/
    
/*
    .titreactu {
    width: 100%;
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
}
    
button{
    margin-bottom :3vh;
} 

#premier,
#deuxieme,
#troisieme{
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 2;
}
    
 .gauchetextes,
 .droitetextes {
     width: 100%;
     -webkit-box-ordinal-group: 3;
     -ms-flex-order: 2;
     order: 3;
     margin: 2%;
 }
        
.droitetextes img {
    width: 100%;
}
 
.titregauch {
   margin-top: 3vh;
} */

/*      *****     Home Page     *****   */
    
.imagedroite1, 
.imagedroite2,
.imagedroite3,
.encart2,
.encart51
{
    display: none;
}
    
#bodygrid,
#slide2,
#slide3,
#slide4,
#slide5,
#slide7 {
    width: 80%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-left: 8%;
    margin-top: 5vh;
}
    
*[class^="encart"] p {
    text-align: justify;
}
   
headerresp {
    height: 12vh;
    width: 80%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.logoresp {
    width: 25%;
    height : auto;
    padding: 3% 0 0 5%;
}
	
.logoresp img {
	width: 65%;
}

#headernoms {

}

#headernoms h1 {
    font-size: 3vh;
    line-height: 2vh;
}

#headernoms h3 {
    font-size: 2vh;
    text-align: end;
}

div#slider {
    margin-top: 7vh;
}
    
#slide2 {
    height: auto;
    background-color: var(--white);
}
    
#slide2 .encart1 {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
    height : auto;
    padding: 0;
    margin-left : 0;
}

#slide2 .encart2 {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
    padding: 0;
}

#slide2 .encart3 {
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3;
    padding: 0;
}

#slide2 .encart4 {
    -webkit-box-ordinal-group: 5;
    -ms-flex-order: 4;
    order: 4;
    padding: 0;
    margin-right : 0;
}
    
#slide3 .encart {
    -webkit-box-ordinal-group: 6;
    -ms-flex-order: 5;
    order: 5;
    width : 80%;
    height: auto;
    margin-left: 0;
    opacity: 0.8;
    border: 0;
    margin-top: 50%;
}
    
#slide4 {
    height: auto;
    width: 92%;
    margin-left: 0;
    padding: 3vh;
}

#slide4 .basgauche {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
}

#slide4 img {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
}

#slide4 .basdroite {
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3;
}

#slide5 {
   height: auto;
    background-color: var(--white);
}
    
.encart51,
.encart52,
.encart53{
    width : 100%;
}    
    
.collyc1{
    grid-row: 1;
    grid-column: 2 / 3;      
}
    
.collyc1 h1 {
    font-size: 4vw;
    line-height: 5vh;
    margin-left : 10%;
}
    
.collyc2{
    grid-row: 2;
    grid-column: 2 / 3;      
}
    
.collyc2 h1 {
    font-size: 5vw;
    line-height: 6vh;
    margin-left : 30%;
}
    
.collyc3{
    grid-row: 3;
    grid-column: 2 / 3;      
}
    
.collyc3 h3 {
    font-size: 1.8vw;
    line-height: 8vw;
    margin-left : 40%;
}
           
    /*     *****     Bienvenue     *****     */
      
.cadreactu1,
.cadreactu2,
.cadreactu3,
.imageactu,
.textegauch {
    display: none;
}

.textegauchresp1,
.imagedroite1resp {
    display: block;

}

.textegauch p::first-letter,
.textedroi p::first-letter,
#zoneretrait p::first-letter {
    font-size: 120%;
    color: var(--rouge);
}

.collyc h1 {
    font-size: 4vw;
    line-height: 5vh;
    margin-left: 10%;
}

#slide7 {
    background-color: var(--white);
}

#slide7 #textehaut {
    padding: 0%;
    margin-top: 13vh;
    margin-left: 0%;
}
    
    /*      *******    Actualité   ******* */
    
    
#bodygrid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
    
.titreactu1 h3,
.titreactu2 h3,
.titreactu3 h3,
.titreactu4 h3{
    font-size: 1.1rem;
    color: var(--black);
    z-index: 0;
    margin-bottom: 0;
}
    
.cadreactu1bis,
.cadreactu2bis,
.cadreactu3bis,
.cadreactu4bis
    {
    display: block;
    width: 100%;
    margin-left: 0%;
    margin-top: 0;
}
 
.titreactu1,
.titreactu2,
.titreactu3,
.titreactu4{
    width: 100%;
    margin-right: 35%;
    background-color: var(--white);
}
 
.evenements {
    width: 50%;
    margin: 3vh 0 2vh 25%;
}

.carreactu{
    width : 100%;
} 
    
.carrebasse p{
    font-size: 0.8rem;
    text-align: left;
}
    
#actugauche {
    margin-top: 20vh;
    width: 83%;
    height: auto;
    padding: 1% 1% 1% 4%;
    margin-right: 4%;
    margin-bottom: 3%;
}

.titrecarre p {
    line-height: 6vh;
}

#margedroite {
    display: none;
}  
    /*     *****     Règlement     *****     */
    
#imgregl {
    margin-top: 3vh;
    width: 50%;
    margin-left: 20%;
}

.boutonimpr {
    margin-top: 0vh;
    display: none;
}
         
    /*      *******    Collyc    ******* */
    
#boutongrid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: 8vh;
    margin-bottom: 8vh;
}

.boutoncol,
.boutonhor,
.boutontar,
.boutonres,
.boutonins,
.boutonensrel{
    height : 6vh;
    margin-bottom: 5%;
}
    
.boutoncol p,
.boutonhor p,
.boutontar p,
.boutonres p,
.boutonins p,
.boutonensrel p{
    font-size : 1.8vh;
}

#textecol {
    display: block;
    width: 100%;
    margin-right: 0%;
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
}

#titrespecial {
    width: 100%;
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3;
}

#specialgauch {
    width: 100%;
    -webkit-box-ordinal-group: 5;
    -ms-flex-order: 4;
    order: 4;
}

#specialdroi {
    width: 100%;
    -webkit-box-ordinal-group: 6;
    -ms-flex-order: 5;
    order: 5;
}

#autres {
    width: 100%;
    -webkit-box-ordinal-group: 7;
    -ms-flex-order: 6;
    order: 6;
}

#horairesgauch {
    width: 100%;
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
}

#horairesdroi {
    width: 100%;
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
}

#gridhoraires {
  
    width: 90%;
    margin-top: 3%;
}
    
#gridhoraires p{
        text-align: left;
    }
    
#gridtarifs {
    display: grid;
    grid-template-rows: repeat(5, 1fr);
    grid-template-columns:  75% 20%;
    grid-auto-flow: column;
    width: 100%;
    margin-top : 0%;
}
    
#gridtarifs p {
    text-align: left;
    width: 100%;
}

/*     *****     Infos pratiques     ******     */

.icones {
    margin-top: 60vh;
}

.icones h3 {
    font-size: 2.8vw;
}
    
.icones {
    width : 100%;
    margin-left : 0;
    height : 20vh;
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 2vh;
}
    
.icone {
    display: block;
    width: 100%;
    border-radius: 10%;
    text-align: center;
}
    
.logoassoc{
        width : 30%;
}
#iconeslaterales {
    width: 110%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 0;
    margin-top: 3vh;
}

#iconeslaterales .icone {
    width: 19vw;
    height: 5vh;
    display: block;
}

#iconeslaterales .icone img {
    display: none;
}

#iconeslaterales .icone h3 {
    font-size: 3vw;
    line-height: 4.8vh;
    width: 100%;
}

#iconeslaterales a h3:hover {
    background-color: var(--hover);
    border-radius: 5px;
}
    
/*     *****   Slider Visite     *****    */    
    
div#slider2 {
    width: 100%;
}

/*     *****    Qui sommes-nous     *****     */

    #troisboutons {
    display: none;
}
    
#troisboutonsresp{
    display : -webkit-box;
    display : -ms-flexbox;
    display : flex;
    -webkit-box-orient : horizontal;
    -webkit-box-direction : normal;
    -ms-flex-direction : row;
    flex-direction : row;
    width : 90%;
} 
    
.cadrehist,
.cadrebp,
.cadrevol{ 
    width: max(30vw);
}
    
.cadrehist {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
} 
    
.cadrehist img,
.cadrebp img,
.cadrevol img {
    border-top-left-radius: 7px;
    border-bottom-left-radius: 8px;
}
    
.cadrebp {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
}

.cadrevol {
    grid-row: 1 / 2;
    grid-column: 3 / 4;
}
     
.boutonhist {
    grid-row: 2 / 4;
    grid-column: 1 / 2;
}
    
.imagehist1 img {
    width : 100%;;
} 

.boutonbp {
    grid-row: 2 / 4;
    grid-column: 2 / 3;
}

.boutonevol {
    grid-row: 2 / 4;
    grid-column: 3 / 4;
}
    
.boutonhist p, .boutonbp p, .boutonevol p{
    font-size : 0.7rem;
}
    
#zoneretrait {
    margin-top: 4vh;
}

#zoneretraitresp1 {
    display: block;
}

#zoneretrait {
    display: none;
}
    
#zonehist,
#zoneberpal,
#photosevol {
    margin-top: 7vh;
}
    
#photosberpal{
display :-webkit-box;
display :-ms-flexbox;
display :flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap : wrap;
    flex-wrap : wrap;
}
    
.bp4 img,
.bp5 img,
.berpal1 img,
.bp7 img {
    width: 90%;
}  
    
pp{
  font-size : 0.8rem;      
}
    
#zonetraitehistoire,
#zonetraiteevolution 
{
width : 100%;
    height : auto;
    margin-top : 3vh;
    display : grid;
    grid-template-rows: repeat(26, 3vh);
    grid-template-columns: repeat(23, 1fr);
    background-color: var(--grisclair);
    padding : 1% 1% 0% 1%;
}
    
.imagehist1{
    display : none;
    width : 0;
}
    
#notrehistoire{
    display : block;
    width : 100%;
    padding-right : 0;
}
       
.textehist {
    width : 100%;
}
    
#zonetraitehistoire h3,
#zonetraiteevolution h3 
    {
      font-size : 2.8vw;  
}
    
#zonetraitehistoire h3,
#zonetraiteevolution h3
    {
    grid-column: 1 / 25;
}
    
#zonetraitehistoire pp,
#zonetraiteevolution pp 
    {
    display : none;   
}
    
#titre, #etitre{
    font-size : 3.5vw; 
}
    
*[class^="hcase"] p,
*[class^="ecase"] p{

    font-size: 3vw;
}
    
#imagecallepin img {
    width: 25%;
}
    
.titrevenement{
    width : 100%;
   display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 2vh; 
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
    
.titreactu {
    width : 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 25vh;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom : 5vh;
}
    
.titreactu h3 {
    font-size: 4vh;
}
    
 /* ****************  Contact   */

fieldset {
    background-color: var(--white);
}
    
#formulaire {
    background-color: var(--white);
}

.titreform {
    float: left;
    width: 100%;
    padding-right: 10px;
}
    
.titrecont{
        margin-left :10vw;
}

input, textarea, select {
    border-radius: 4px;
    border : 1px solid var(--grisfonce);
    width : 90%;
}

label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
    
.boutonform {
    width: auto;
}
    
    /*     *****     Localisation     *****     */
    

.localiphoto {
    display: none;
}
    
    /*     *****    Equipes     *****     */
    
    
#cadreequipes {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
      
.cadreindividuel {
    width: 40%;
    margin-bottom: 5%;
}

.boutondirection,
.boutonpedago {
    width: 40%;
}
}

@media screen and (max-width:1025px) and (max-height: 648px) {
    
    #footer {
        display : none;
    }
}

    
@media screen and (max-width:816px) and (orientation:portrait) {
    
#menuhaut {
    grid-column: 2 / 23;
}

#menuhaut a h4 {
    font-size: 0.8rem;
} 
}
    
@media screen and (max-width:816px) and (orientation:landscape) {
    
#menuhaut {
    grid-column: 2 / 23;
}

#menuhaut a h4 {
    font-size: 0.8rem;
}  
    
h1{
    font-size : 6vw;
}
    
h4 {
    line-height: 9vh;
    font-size :2.5vw; /* 4.8vh; */
    margin-top : 0;
}
    
h3{
    font-size : 2.5vw; /* ex 3vw*/
}
    
h5 {
    font-size: 2.2vw;
}   

p {
    font-size: 2vw;
}

.logoresp {
    width: 13%;
}
    
headerresp {
    height: 16vh;
}

#headernoms {
    text-align : center;
    width : 60%;
    height : 90%;
}

#headernoms h1 {
    font-size: 5vh;
    line-height: 2vh;
}

#headernoms h3 {
    font-size: 3vh;
    text-align: end;
}
    
#slide3 {
    height: 155vh;
}

#slide3 .encart {
    margin-top: 5%;
}
    
#slide4 img {
    width: 60%;
    margin-left: 15%;
}

#slide5 .encart1 img,
#slide5 .encart2 img,
#slide5 .encart3 img {
    width: 20%;
    height: 35%;
    margin-top: 10%;
}
    
#slide5 .encart1,
#slide5 .encart2,
#slide5 .encart3
    {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
     
#logoresp {
    width : 50%;
}
     
#boutongrid {
    margin-top : 17vh;
}
    
.boutonactu1,
.boutonactu2,
.boutonactu3 {
    display: none;
}

.imgactu1resp img,
.imgactu2resp img,
.imgactu3resp img {
    float: right;
}

#menu ul li {
    height: 7vh;
    line-height: 6vh;
}
    
#menu ul li a {
    font-size: 2vw;
}

#troisboutonsresp {
    margin-top: 2vh;
    height: 25vh;
}
    
.cadrehist,
.cadrebp,
.cadrevol{ 
    width: max(30vw);
}
    
*[class^="hcase"] p,
*[class^="ecase"] p{
    font-size: 2.2vw;
    line-height : 3vh;
}
    
#espaceaffich ,
#espaceaffichevol {
    font-size : 0.65rem;
    line-height : 5.5vh;
}   

 #imagecallepin img {
    margin-top : 20vh;
}
    
.titreactu,
.titrevenement{
    width : 85%;
    margin-left : 12%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom : 5vh;
}
  
.titreactu h3 {
    font-size: 6vh;
}
    
input, textarea, select {
    width : 80%;
} 
    
.boutonform {
    height: 6vh;
}
    
#iconeslaterales{
  margin-top : 10vh;      
    }
    
#iconeslaterales .icone {
    height: 8vh;
    margin-bottom: 3vh;
}
    
#iconeslaterales .icone h3 {
    line-height: 7.8vh;
}
    
#zonehist,
#zoneberpal,
#photosevol {
    margin-top: 28vh;
}

#zoneretrait {
    margin-top: 20vw; /*20vh;*/
}

.boutonhist,
.boutonbp,
.boutonevol {
    margin-top: 7vh;
    height: 60%;
}

.titregauch {
    margin : 14vh 0 5vh 8vw;
}

h2 {
    font-size: 5.5vh;
    padding-top : 5vh;
}
    
h2::first-letter{
    font-size : 6.5vh;
    color : var(--rouge);
}

#zonehist {
    width: 100%;
}

#gauche {
    margin-top: 10vh;
}
    
    .icones {
        width: 75%;
} 
    

.boutonlyc p,
.boutoncol p,
.boutonhor p,
.boutontar p,
.boutonres p,
.boutonins p,
.boutonensrel p{
    font-size : 2.4vw;
}
    
}
    
@media screen and (min-width:718px) and (max-width:1400px) and (orientation:portrait) {

    h3 {
        font-size: 4vw;
    }

    #titre h1 {
        font-family: 'Quicksand', sans-serif;
    }

    h3 b {
        font-size: 2.6vw;
    }

    h5 {
        font-size: 2.2vw;
    }

    #headernoms {
        width: 60%;
    }

    #logoresp {
        width: 50%;
    }
}