/* MISE EN FORME DU HEAD */

html {
    scroll-behavior:smooth;
}

/* Titre */

head {
    position: float;
}

.milieu {
    display: flex ;
    justify-content: center ;
}
.imgtitre {
    position: absolute;
    height: 60px;
    width: 561px;
}
#Equipe {
    float : center;
}
#Bandeau {
    height: 140px ;
    width: 10px;
}

#Footer {
    height: 50px ;
    width: 10px;
    background-color : transparent ;
    position: sticky ;
}

#BandeOrange {
    height: 20px ;
    background-color : rgb(239, 89, 49) ;
}
#BandeBleu {
    height: 20px ;
    background-color : rgb(43, 50, 145) ;
}

nav {
    position: sticky ;
    top: 10px;
}

pot {
    position: sticky;
}

/* Logo */
.signature {
    top: 0px ;
    left:0px ; 
    height:140px ;
    width: 190px ;
}

.TopButton {
    position: fixed;
    right:20px;
    height:50px;
    background:transparent;
    bottom:30px;
}

#Logo {
    float:left;
}
#LogoR {
    float:right;
}

/* MENU */

ul {
    list-style-type: none;
    margin: 40px;
}
li {
    display: inline-block;
}

.btnmenu{
    color: rgb(239, 89, 49); 
    text-decoration: none; 
    padding-bottom: 0px;
    padding-right: 20px;
    padding-top: 0px;
    padding-left: 20px;
    margin-left: 5px;
    margin-right: 5px;
    font-size: 20px;
    border-width: 6px;
    border-style: outset;
    background-color: rgb(4, 16, 104);
    border-color: rgb(239, 89, 49);
    border-radius: 10px;
    box-shadow: 3px 3px 4px rgb(2, 34, 78);
    text-shadow: 
        1px 1px 1px rgb(160, 39, 6),
        1px 2px 1px rgb(160, 39, 6),
        0 1px 1px rgba(68,68,68,.3),
        0 5px 3px rgba(68,68,68,.2),
        0 10px 4px rgba(68,68,68,.2),
        0 15px 8px rgba(68,68,68,.2),
        0 30px 10px rgba(68,68,68,.1);
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; 
    line-height: 70px;
}
.btnmenu:hover{
    color: rgb(239, 89, 49); 
    border: 4px solid rgb(239, 89, 49);
    border-width: 6px;
    border-style: inset;
    background-color: rgb(4, 16, 104);
    border-color: rgb(239, 89, 49);
    border-radius: 10px;
    box-shadow: 3px 3px 4px rgb(2, 34, 78) inset;
    text-shadow: 
        -1px -1px 1px rgb(160, 39, 6),
        -1px -2px 1px rgb(160, 39, 6),
        0 1px 1px rgba(68,68,68,.3),
        0 5px 3px rgba(68,68,68,.2),
        0 10px 4px rgba(68,68,68,.2),
        0 15px 8px rgba(68,68,68,.2),
        0 30px 10px rgba(68,68,68,.1);
}

.btn{
    color: rgb(239, 89, 49); 
    text-decoration: none; 
    padding-bottom: 0px;
    padding-right: 20px;
    padding-top: 0px;
    padding-left: 20px;
    margin-left: 10px;
    margin-right: 10px;
    font-size: 20px;
    border-width: 8px;
    border-style: outset;
    background-color: rgb(4, 16, 104);
    border-color: rgb(239, 89, 49);
    border-radius: 10px;
    box-shadow: 3px 3px 4px rgb(2, 34, 78);
    text-shadow: 
        1px 1px 1px rgb(160, 39, 6),
        1px 2px 1px rgb(160, 39, 6),
        0 1px 1px rgba(68,68,68,.3),
        0 5px 3px rgba(68,68,68,.2),
        0 10px 4px rgba(68,68,68,.2),
        0 15px 8px rgba(68,68,68,.2),
        0 30px 10px rgba(68,68,68,.1);
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; 
    line-height: 70px;
}
.btn:hover{
    color: rgb(239, 89, 49); 
    border: 4px solid rgb(239, 89, 49);
    border-width: 8px;
    border-style: inset;
    background-color: rgb(4, 16, 104);
    border-color: rgb(239, 89, 49);
    border-radius: 10px;
    box-shadow: 3px 3px 4px rgb(2, 34, 78) inset;
    text-shadow: 
        -1px -1px 1px rgb(160, 39, 6),
        -1px -2px 1px rgb(160, 39, 6),
        0 1px 1px rgba(68,68,68,.3),
        0 5px 3px rgba(68,68,68,.2),
        0 10px 4px rgba(68,68,68,.2),
        0 15px 8px rgba(68,68,68,.2),
        0 30px 10px rgba(68,68,68,.1);
}

.social{
    color:rgb(211, 91, 41);
}

.fa-facebook-square{
    color:rgb(211, 91, 41);
    transition:1s;
    padding-right: 20px;
    padding-bottom: 40px;
}

.fa-facebook-square:hover{
    color:white;
}

.fa-instagram{
    color:rgb(211, 91, 41);
    transition:1s;
    padding-left: 20px;
    padding-bottom: 40px;
}

.fa-instagram:hover{
    color:white;
}

li1 {
    list-style: none;
    margin: 10px 30px ;
    display: inline-block;
    transition: .55;
    height:30px;
    padding-bottom: 60px;
    color: rgb(239, 89, 49);
    transition:1s;
}

li1:hover {
    color:white;
}

.content {
    padding: 100px; 
}
.sticky {
    position: fixed;
    top: 0;
    width: 100%
}
.sticky + .content {
    padding-top: 400px;
}

/* BODY */

/* Gros titre = Impact */
/* Corps = monospace */
/* Normal = Gill Sans */
/* Différents bleux : foncé = rgb(43, 50, 145), bleu clair = rgb(166, 212, 236), très foncé = rgb(4, 16, 104) */
body {
    background-color: rgb(4, 16, 104);
    /*background-color: rgb(83, 201, 255);*/
    /*background-color: rgb(42,142,152);*/
    background-image: url("EtoilesTrans-min.png") ;
    background-size: 100%;
    text-align: center;
    font-family: monospace,'Gill Sans',Impact; 
} 
.fondBleu {
    background-color: rgb(4, 16, 104);
    /*background-color: rgb(83, 201, 255);*/
    /*background-color: rgb(42,142,152);*/
    background-image: url("EtoilesTrans-min.png") ;
    padding-top: 50px;
    padding-bottom: 50px;
}
/* orange pâle = rgb(254, 179, 106), orange pétant = rgb(239, 89, 49) */
.fondOrange {
    /*background-color: rgb(240, 120, 80);*/
    /*background-color: rgb(241, 164, 100);*/
    /*background-color: rgb(211, 91, 41);*/
    background-color: transparent ;
    margin-inline: 50px;
    padding-top: 50px;
    padding-bottom: 50px;
}

.fondPlan1 {
    background-image: url("Plan1-min.png") ;
    background-blend-mode:hard-light;
    background-size:inherit;
    background-color: rgb(211, 91, 41);
    margin-inline: 50px;
    padding-top: 50px;
    padding-bottom: 50px;
}

.fondPlan2 {
    background-image: url("Plan2-min.png") ;
    background-blend-mode:hard-light;
    background-size:inherit;
    background-color: rgb(211, 91, 41);
    margin-inline: 50px;
    padding-top: 50px;
    padding-bottom: 50px;
}

.fondPlan3 {
    background-image: url("Plan3-min.png") ;
    background-blend-mode:hard-light;
    background-size:inherit;
    background-color: rgb(211, 91, 41);
    margin-inline: 50px;
    padding-top: 50px;
    padding-bottom: 50px;
}

.photoPleine {
    padding-top: 50px ;
    padding-bottom: 30px ;
    align-content: center;
}

.photoGalerie {
    padding-top: 50px ;
    padding-bottom: 30px ;
    padding-left: 20px;
    padding-right: 20px;
    align-content: center;
}

.Hotline_Dec {
    margin-top: 10px ;
    margin-bottom: 10px ;
    margin-right: 40px ;
    border-width: 8px;
    border-style: outset;
    border-color: rgb(200, 80, 35);
    background-color: transparent;
    background-image: url("Hotline_Dec.png");
    background-repeat: no-repeat;
    background-size: 100%;
}

.Hotline_Dec:hover {
    border-style: inset;
    background-image: url("Numero_Dec.png");
    background-color: rgb(180, 70, 30);
    background-repeat: no-repeat;
    background-size: 100%;
}

.Hotline_Rav {
    margin-top: 10px ;
    margin-bottom: 10px ;
    border-width: 8px;
    border-style: outset;
    border-color: rgb(200, 80, 35);
    background-color: transparent;
    background-image: url("Hotline_Rav.png");
    background-repeat: no-repeat;
    background-size: 100%;
}

.Hotline_Rav:hover {
    border-style: inset;
    background-image: url("Numero_Rav.png");
    background-color: rgb(180, 70, 30);
    background-repeat: no-repeat;
    background-size: 100%;
}

.Hotline_Ufo {
    margin-top: 10px ;
    margin-bottom: 10px ;
    margin-right: 40px ;
    border-width: 8px;
    border-style: outset;
    border-color: rgb(200, 80, 35);
    background-color: transparent;
    background-image: url("Hotline_Ufo.png");
    background-repeat: no-repeat;
    background-size: 100%;
}

.Hotline_Ufo:hover {
    border-style: inset;
    background-image: url("Numero_Ufo.png");
    background-color: rgb(180, 70, 30);
    background-repeat: no-repeat;
    background-size: 100%;
}

.Hotline_Tes {
    margin-top: 10px ;
    margin-bottom: 10px ;
    margin-left: 40px ;
    border-width: 8px;
    border-style: outset;
    border-color: rgb(200, 80, 35);
    background-color: transparent;
    background-image: url("Hotline_Tes.png");
    background-repeat: no-repeat;
    background-size: 100%;
}

.Hotline_Tes:hover {
    border-style: inset;
    background-image: url("Numero_Tes.png");
    background-color: rgb(180, 70, 30);
    background-repeat: no-repeat;
    background-size: 100%;
}

.Hotline_Sat {
    margin-top: 10px ;
    margin-bottom: 10px ;
    margin-left: 40px ;
    border-width: 8px;
    border-style: outset;
    border-color: rgb(200, 80, 35);
    background-color: transparent;
    background-image: url("Hotline_Sat.png");
    background-repeat: no-repeat;
    background-size: 100%;
}

.Hotline_Sat:hover {
    border-style: inset;
    background-image: url("Numero_Sat.png");
    background-color: rgb(180, 70, 30);
    background-repeat: no-repeat;
    background-size: 100%;
}

.Hotline_Ori {
    margin-top: 10px ;
    margin-bottom: 10px ;
    margin-right: 40px;
    border-width: 8px;
    border-style: outset;
    border-color: rgb(200, 80, 35);
    background-color: transparent;
    background-image: url("Hotline_Ori.png");
    background-repeat: no-repeat;
    background-size: 100%;
}

.Hotline_Ori:hover {
    border-style: inset;
    background-image: url("Numero_Ori.png");
    background-color: rgb(180, 70, 30);
    background-repeat: no-repeat;
    background-size: 100%;
}

.Hotline_Cre {
    margin-top: 10px ;
    margin-bottom: 10px ;
    margin-right: 40px ;
    border-width: 8px;
    border-style: outset;
    border-color: rgb(200, 80, 35);
    background-color: transparent;
    background-image: url("Hotline_Cre.png");
    background-repeat: no-repeat;
    background-size: 100%;
}

.Hotline_Cre:hover {
    border-style: inset;
    background-image: url("Numero_Cre.png");
    background-color: rgb(180, 70, 30);
    background-repeat: no-repeat;
    background-size: 100%;
}

.Hotline_Pro {
    margin-top: 10px ;
    margin-bottom: 10px ;
    margin-left: 40px ;
    border-width: 8px;
    border-style: outset;
    border-color: rgb(200, 80, 35);
    background-color: transparent;
    background-image: url("Hotline_Pro.png");
    background-repeat: no-repeat;
    background-size: 100%;
}

.Hotline_Pro:hover {
    border-style: inset;
    background-image: url("Numero_Pro.png");
    background-color: rgb(180, 70, 30);
    background-repeat: no-repeat;
    background-size: 100%;
}

.description{
    text-align:justify;
    color:white;
    padding-left:10px;
    padding-right:10px;
    text-shadow: 
        1px 1px 1px rgb(160, 39, 6),
        2px 2px 1px rgb(160, 39, 6),
        3px 3px 1px rgb(160, 39, 6),
        4px 4px 1px rgb(160, 39, 6),
        5px 5px 1px rgb(160, 39, 6),
        -1px 1px 1px rgb(160, 39, 6),
        -2px 2px 1px rgb(160, 39, 6),
        -3px 3px 1px rgb(160, 39, 6),
        -4px 4px 1px rgb(160, 39, 6),
        -5px 5px 1px rgb(160, 39, 6),
        1px -1px 1px rgb(160, 39, 6),
        2px -2px 1px rgb(160, 39, 6),
        3px -3px 1px rgb(160, 39, 6),
        4px -4px 1px rgb(160, 39, 6),
        5px -5px 1px rgb(160, 39, 6),
        -1px -1px 1px rgb(160, 39, 6),
        -2px -2px 1px rgb(160, 39, 6),
        -3px -3px 1px rgb(160, 39, 6),
        -4px -4px 1px rgb(160, 39, 6),
        -5px -5px 1px rgb(160, 39, 6),
        0 1px 1px rgba(68,68,68,.3),
        0 5px 3px rgba(68,68,68,.2),
        0 10px 4px rgba(68,68,68,.2),
        0 15px 8px rgba(68,68,68,.2),
        0 30px 10px rgba(68,68,68,.1);
}

.titrevid{
    text-align:center;
    color:white;
    padding-left:5px;
    padding-right:5px;
    padding-bottom:5px;
    text-shadow: 
        1px 1px 1px rgb(160, 39, 6),
        2px 2px 1px rgb(160, 39, 6),
        3px 3px 1px rgb(160, 39, 6),
        4px 4px 1px rgb(160, 39, 6),
        5px 5px 1px rgb(160, 39, 6),
        -1px 1px 1px rgb(160, 39, 6),
        -2px 2px 1px rgb(160, 39, 6),
        -3px 3px 1px rgb(160, 39, 6),
        -4px 4px 1px rgb(160, 39, 6),
        -5px 5px 1px rgb(160, 39, 6),
        1px -1px 1px rgb(160, 39, 6),
        2px -2px 1px rgb(160, 39, 6),
        3px -3px 1px rgb(160, 39, 6),
        4px -4px 1px rgb(160, 39, 6),
        5px -5px 1px rgb(160, 39, 6),
        -1px -1px 1px rgb(160, 39, 6),
        -2px -2px 1px rgb(160, 39, 6),
        -3px -3px 1px rgb(160, 39, 6),
        -4px -4px 1px rgb(160, 39, 6),
        -5px -5px 1px rgb(160, 39, 6),
        0 1px 1px rgba(68,68,68,.3),
        0 5px 3px rgba(68,68,68,.2),
        0 10px 4px rgba(68,68,68,.2),
        0 15px 8px rgba(68,68,68,.2),
        0 30px 10px rgba(68,68,68,.1);
}

h1 {
    text-align: center;
    text-decoration: rgb(160, 39, 6);
    text-overflow: ellipsis;
    color: white;
    text-shadow: 
        1px 1px 1px black,
        2px 2px 1px black,
        3px 3px 1px black,
        4px 4px 1px black,
        5px 5px 1px black,
        -1px 1px 1px black,
        -2px 2px 1px black,
        -3px 3px 1px black,
        -4px 4px 1px black,
        -5px 5px 1px black,
        1px -1px 1px black,
        2px -2px 1px black,
        3px -3px 1px black,
        4px -4px 1px black,
        5px -5px 1px black,
        -1px -1px 1px black,
        -2px -2px 1px black,
        -3px -3px 1px black,
        -4px -4px 1px black,
        -5px -5px 1px black,
        0 1px 1px rgba(68,68,68,.3),
        0 5px 3px rgba(68,68,68,.2),
        0 10px 4px rgba(68,68,68,.2),
        0 15px 8px rgba(68,68,68,.2),
        0 30px 10px rgba(68,68,68,.1);
}


/* COMMENTAIRE EN PLUS */

.Gris {
    color : rgb(188, 189, 191) ;
}

.superpose {
    position: absolute;
    top: 0PX;
    left: 0px;
    width:100%;
    height:100%;
}