@charset "utf-8";
html {
scroll-behavior: smooth;
} 
body {
position:relative;
margin:0;
padding:0;
overflow:hidden;
overflow-y:auto;
background-repeat:repeat;
width:100%;
left:0;
top:0;
font-family: 'Ubuntu',sans-serif;
word-spacing:2px;
font-size:16px;
line-height:24px;
z-index:1;
}
.webp {
background-image:url(../img/fond.webp);	
}
.notwebp {
background-image:url(../img/fond.png);
}
@media screen and (max-width:1023px) {
body {
font-family: 'Ubuntu',sans-serif;
font-size:14px;
line-height:24px;
}
}
p {
text-align:justify;
text-justify:inter-word;
margin-top:-5px;
}
.lettrine::first-letter {
font-size:3em;
padding-right:0.04em;
padding-top:0.12em;
float:left;
color:black;
}	
li {
text-align:justify;
text-justify:inter-word;
}
a {
font-weight:normal;
text-decoration:none;
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
position:relative;
color:inherit;
}
a:hover {
background:linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(0,0,0,0.2) 90%, rgba(0,0,0,0.3) 100%);
}
a.nostyle {
text-decoration:none;
}
a.nostyle:hover{
}
a.nostyle1 {
text-decoration:none;
}
a.nostyle1:hover{
background:rgba(255,255,255,0);
}
i {
font-style: italic;
}
img {
max-width:100%;
height:auto;
}
.zoom div img {
transform: scale(1);
transition: .3s ease-in-out;
}
.zoom div:hover img {
transform: scale(1.3);
}
.avant-apres{
display:inline-block;
position:relative;
width:90%;
margin-left:auto;
margin-right:auto;
margin-bottom:20px;
text-align:center;
box-shadow:0px 5px 10px 10px rgba(0,0,0,0.2);
outline:2px solid white;
outline-offset:-5px;
}
@media screen and (max-width:1023px) {
.reserved {
display:none;	
}
}
@media screen and (max-width:1023px) {
.grand_ecran {
display:none;	
}
}
@media screen and (min-width:1024px) {
.petit_ecran {
display:none;	
}
}
.avant-apres img{
margin-bottom:-15px;
transition: all 0.3s ease-out;
}
.avant-apres span{
position: absolute;
top:0;
left: 0;
right: 0;
margin-top:0px;
background: rgba(0,0,0,0.5);
padding: 3px 50px;	
text-align: center;
font-size: 16px;
color: white;
transition: all 0.3s ease-out;
}
.avant-apres:hover span{
opacity: 0;
}
.avant-apres:hover img{
transform: scale(1.10, 1.10);
}
ul {
margin-left:15px;
padding-left:5px;
}
option {
margin-left:20px;
padding-left:10px;
}	
img.scaled {
width:100%;
}
p.mini {
margin-top:0px;
margin-bottom:0px;	
margin-left:-2px;	
padding-left:3px;
margin-right:0px;
}
.grande_puce {
margin-left:15px;
}
.grande_puce:before {
margin-left:-16px;
content:"● ";
}
.petite_puce {
margin-left:30px;
}
.petite_puce:before {
margin-left:-16px;
content:"○ ";
}
.double_petite_puce {
margin-left:45px;
}
.double_petite_puce:before {
margin-left:-16px;
content:"□ ";
}
.puce_avant_apres:before {
content:"● ";
}
.puce_avant_apres:after {
content:" ●";
}
.losange:before{
content:"◆ ";
}
.enveloppe{
content:"►";
line-height: 0;
text-indent:0px;
}
.trois_triangles:after {
content:" ►►►";
}
.triangle_bas_apres:after {
content:" ▼";
}
.triangle_gauche:after{
content:"◄";
line-height: 0;
text-indent:0px;
}
.triangle_droite:after {
content:"►";
line-height: 0;
text-indent:0px;
}
.triangle_haut:after {
content:"▲";
line-height: 0;
text-indent:0px;
}
.triangle_bas:after {
content:"▼";
line-height: 0;
text-indent:0px;
}
.ecran_accueil {
display:block;
position:fixed;
text-align:center;
/*left:50%;
top:50%;
transform:translate(-50%,-50%);*/
height:100%;
width:100%;
background-color:white;
/*background-size:contain;*/
background-repeat:no-repeat;
animation:zoom-arriere 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
animation-delay:1.5s;
z-index:100;
}
.webp .ecran_accueil{
background-image:url(../img/bienvenue.webp);
background-position:center;
}
.notwebp .ecran_accueil{
background-image:url(../img/bienvenue.jpg);
background-position:center;
}
@keyframes zoom-arriere {
0% {
transform:scale(1);
opacity:1;
}
100% {
transform:scale(0);
opacity:0;
}
}
.conteneur_titre_ecran_accueil {
position:absolute;
background:rgba(0,0,0,0.3);
width:100%;
top:55%;
transform:translateY(0%);
left:50%;
transform:translateX(-50%);
height:170px;
border-top-color:rgba(255,255,255,0.7);
border-top-width:2px;
border-top-style:solid;
border-bottom-color:rgba(255,255,255,0.7);
border-bottom-width:2px;
border-bottom-style:solid;
text-align:center;
z-index:102;	
}
.titre_ecran_accueil_ligne1{
color:rgba(255,255,255,1);
margin-top:38px;
font-size:50px;
transform:scale(1,1.4);
font-weight:bold;
letter-spacing:4px;
word-spacing:12px;
text-align:center;
text-shadow:0px 0px 3px rgba(0,0,0,1);	
}
.titre_ecran_accueil_ligne2{
color:rgba(255,255,255,1);
font-size:50px;
transform:scale(1,1.2);
font-variant:small-caps;
text-align:center;font-weight:normal;
letter-spacing:4px;
word-spacing:12px;
text-align:center;
text-shadow:0px 0px 3px rgba(0,0,0,1);	
}
.conteneur_titre_bas_ecran_accueil {
position:absolute;
width:100%;
top:94%;
transform:translateY(0%);
left:50%;
transform:translateX(-50%);
height:50px;
border-top-color:rgba(255,255,255,0.3);
text-align:center;
z-index:102;
}
.titre_ecran_accueil_ligne3{
color:rgba(0,0,0,1);
margin-top:10px;
font-size:16px;
transform:scale(1,1.4);
font-weight:normal;
letter-spacing:1px;
word-spacing:5px;
text-align:center;
}
.loader {
border:6px solid rgb(50,50,50);
border-radius:50%;
border-top:6px solid rgb(100,210,255);
border-bottom:6px solid rgb(100,210,255);
width:30px;
height:30px;
animation:spin 2s linear infinite;
margin-left:35%;
margin-top:25%;
}
@keyframes spin {
0% { transform:rotate(0deg); }
100% { transform:rotate(360deg); }
}
@media screen and (max-width:1023px) {
.ecran_accueil, .loader {
display:none;
}
}
.fond_accueil {
position:absolute;
display:block;
left:0;
/*top:80px;
padding-top:50px;*/
background-repeat:no-repeat;
width:100%;
height:70%;
background-size:contain;
color:rgba(100,100,100,0.9);
z-index:-1;
animation:zoom-gauche 5s ease-out both;
animation-delay:2s;
}
.webp .fond_accueil{
background-image:url(../img/photo_accueil.webp);	
}
.notwebp .fond_accueil{
background-image:url(../img/photo_accueil.jpg);	
}
@keyframes zoom-gauche {
0% {
transform:scale(1) translate(0, 0);
transform-origin:16% 50%;
}
100% {
transform:scale(1.25) translate(0px, 230px);
transform-origin:right;
}
}
@media screen and (max-width:1023px) {
.fond_accueil{
display:none;
}	
}
.intro {
position:fixed;
display:block;
left:0;
top:0;
height:100%;
width:100%;
background:white;
animation:zoom-arriere 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
animation-delay:0s;
animation-duration:0.4s;
z-index:100;
}
@keyframes zoom-arriere {
0% {
opacity:1;
}
99% {
opacity:0;
}
100% {
opacity:0;
height:0;
}
}
.inner {
display:block;
position:relative;
background:rgb(255,255,255);
width:60%;
max-width:1333px;
margin-left:auto;
margin-right:auto;
border-radius:20px;
box-shadow:0 0 8px 1px rgba(102, 102, 102, 1) inset; 
border-color :rgb(0,0,0); 
border-style :solid; 
border-width:2px;
padding:40px;
padding-top:clamp(0px,19.8%,440px);
margin-bottom:-60px;
margin-top:388px;
font-family: 'Ubuntu',sans-serif;
font-size:14px;
line-height:22px;
overflow:hidden;
}
@media screen and (max-width:1023px) {
.inner {
width:90%;
margin-left:auto;
margin-right:auto;
margin-top:-30px;
margin-bottom:30px;
padding-left:5px;
padding-right:5px;
padding-top:40%;
padding-bottom:10px;
font-family: 'Ubuntu',sans-serif;
overflow:hidden;
font-size:11px;
line-height:24px;
}
}
.animation_contenu_inner{
display:block;
animation:down 1.5s cubic-bezier(0, 0, 0, 1.0);
z-index:4;
animation-fill-mode:both;
}
@keyframes down {
0% {
transform:translateY(-2000px);
opacity:0;
}
60% {
opacity:0.40;
}
100% {
transform:translateY(60px);
opacity:1;
}
}
@media screen and (max-width:1023px) {
.animation_contenu_inner{
display:block;
animation:down 1s cubic-bezier(0, 0, 0, 1.0);
z-index:4;
animation-fill-mode:both;
}
@keyframes down {
0% {
transform:translateY(-1000px);
opacity:0;
}
60% {
	opacity:0.40;
}
100% {
transform:translateY(20px);
opacity:1;
}
}
}
aside {
display:block;
position:absolute;
width:24%;
top:0;
left:0;
}
.aside_encadre1{
background:rgba(0,0,0,1);
width:100%;
color:white;
text-align:center;
font-size:smaller;
font-weight:bold;
border-style:solid;
border-color:rgba(0,0,0,1);
border-width:2px;
border-bottom-width:0;
padding-top:5px;
padding-bottom:5px;
border-top-left-radius:10px;
border-top-right-radius:10px;	
}
.aside_encadre2{
background:rgba(245,245,245,1);
width:100%;
color:rgba(23,120,203,1);
text-align:left;
border-style:solid;
border-color:rgba(0,0,0,1);
border-width:2px;
font-weight:bold;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}
.aside_encadre2 li {
text-align:left;
margin-right:5px;
margin-left:0px;
}
.fond_aside, .bas_page {
display:block;
width:100%;
line-height:7000%;
background-repeat:repeat;
}
.webp .fond_aside, .webp .bas_page {
background-image:url(../img/fond_bas_page.webp);		
}
.notwebp .fond_aside, .notwebp .bas_page {
background-image:url(../img/fond_bas_page.jpg);		
}
@media screen and (max-width:1023px) {
.fond_aside, .bas_page{
display:none;
}
}
main {
display:block;
position:relative;
width:75%;
top:0;
left:25%;
padding-left:1%;
text-align:justify;
border-left-width:3px;
border-left-style:dotted;
border-left-color:rgba(0,0,0,1);
}
@media screen and (max-width:1023px) {
aside{
position:relative;
width:99%;
left:0.5%;
}
main {
width:99%;
left:0.5%;
padding-left:0;
border-width:0;
}
#info_ergonomie{
display:none;	
}
}
@media screen and (min-width:1024px) {
.cabinet_ouvert { 
position:absolute;
display:block; 
font-size:14px; 
font-style:italic; 
font-weight:normal;
top:359px;
height:24px;
width:1020px;
left:50%;
margin-left:-512px;
background:linear-gradient(to top, rgb(0,0,0) 0%, rgb(0,0,0) 30%, rgb(100,100,100) 100%);
padding-top:2px;
padding-bottom:1px;
text-align:left; 
color:white;
border-style:solid;
border-width:2px;
border-color:rgb(0,0,0);
margin-bottom:60px;
z-index:3;
} 
.marque { 
overflow:hidden; 
} 
.marque:hover [data-text]:before { 
animation-play-state:paused; 
} 
.marque [data-text] { 
white-space:nowrap; 
display:inline-block; 
min-width:300%; 
cursor:pointer; 
} 
.marque [data-text]:before, .marque [data-text]:after { 
content:attr(data-text) "\00A0"; 
display:inline-block; 
min-width:50%; 
} 
.marque [data-text]:before { 
animation:marque-defil 60s linear infinite; 
} 
.marque [data-text]:after { 
color:white;
} 
@keyframes marque-defil { 
0% { 
margin-left:8%; 
} 
100% { 
margin-left:-50%; 
} 
} 
}
@media screen and (max-width:1023px) {
.cabinet_ouvert, .marque { 
display:none;
}
}
.first_entete{
display:block;
margin-top:-33.25%;
margin-bottom:-4%;
width:58%;
background:white;
text-align:center;
margin-left:auto;
margin-right:auto;
}
.first_entete:hover{
filter:grayscale(100%);
}
.inversion{
}
.inversion:hover{
filter:invert(100%);
}
@media screen and (max-width:1023px) {
.first_entete{
width:100%;
width:98%;
left:6px;
top:6px;
margin-top:-43%;
margin-bottom:-12%;
margin-left:auto;
margin-right:auto;}
}
.rideau_gauche{
display:block;
position:absolute;
top:-9px;
width:50%;
left:0;
z-index:0;
transform-style:preserve-3d;
box-shadow:0px 0px 15px rgba(0,0,0,0.8);
animation:deplacement_rideau_gauche 1.6s ease-in-out;
animation-fill-mode:forwards;
animation-delay:1.6s;
}
@keyframes deplacement_rideau_gauche {
0% {
opacity:1;	
transform:translateX(0px);
}
30% {
opacity:0.8;	
transform:translateX(0px);
}
75%{
opacity:0.6;	
transform:translateX(0px);
}
100% {
transform:translateX(-52%);
opacity:1;
}
}
.rideau_droite{
display:block;
position:absolute;
top:-9px;
width:50%;
left:50%;
z-index:0;
transform-style:preserve-3d;
box-shadow:0px 0px 15px rgba(0,0,0,0.8);
animation:deplacement_rideau_droite 1.6s ease-in-out;
animation-fill-mode:forwards;
animation-delay:1.6s;
}
@keyframes deplacement_rideau_droite {
0% {
opacity:1;	
transform:translateX(0px);
}
30%{
opacity:0.8;	
transform:translateX(0px);
}
75%{
opacity:0.6;	
transform:translateX(0px);
}
100% {
transform:translateX(52%);
opacity:1;
}
}
.conteneur_liens_recherche {
display:block;
}
@media screen and (max-width:1023px) {
.rideau_droite{
display:none;
}
.rideau_gauche{
display:none;
}
}
.conteneur_liens_recherche p{
display:block;
margin:auto;
background:rgb(210,210,210);
color:black;
font-size:12px;
padding:2px 10px 3px 10px;
text-align:left;
}
.conteneur_liens_recherche p:hover {
background:rgb(0,0,0);
color:white;
cursor:pointer;
}
.inner_menu_secondaire {
display:none;
position:absolute;
float:left;
margin-left:0px;
border-radius:0 20px 20px 0;
padding-right:5px;
padding-top:0;
padding-left:15px;
margin-top:388px;
text-align:left;
font-size:11px;
line-height:17px;
width:224px;
background:black;
border-style:solid;
border-width:2px;
border-color:rgb(200,200,200);
z-index:0;
}
.inner_menu_secondaire li {
margin-left:-37px;
padding-left:3px;
background:rgb(180,180,180);
list-style:none;
border-bottom:1px solid grey;
border-top:1px solid rgb(120,120,120);
}
.inner_menu_secondaire li li {
margin-left:-10px;
padding-left:3px;
background:linear-gradient(to top, rgb(200,200,200) 0%, rgb(230,230,230) 50%, rgb(200,200,200) 100%);
list-style:none;
border-bottom:1px solid grey;
border-top:1px solid rgb(120 120 120);
}
.inner_menu_secondaire a {
text-shadow:none;
text-decoration:none;
color:rgb(0,0,0);
}
.inner_menu_secondaire li a:hover {
display:block;
margin-left:-3px;
padding-left:3px;
padding-right:5px;
background:rgb(0,0,0);
color:white;
width:97.7%;
}
.fond_bouton_menu_secondaire {
position:absolute;
display:block;
left:0;
background:rgb(0,0,0);
width:100px;
height:51px;
top:252px;
border-radius:0 10px 10px 0;
border-style:solid;
border-color:rgb(150,150,150);
border-width:2px;
}
.bouton_menu_secondaire {
position:absolute;
display:block;
top:10px;
left:30px;
background:rgb(0,0,0);
z-index:2;
}
.bouton_menu_secondaire:hover {
cursor:pointer;
animation:menu_rotation 0.5s;
}
@keyframes menu_rotation {
0% {
transform:rotate(0deg);
}
100% {
transform:rotate(360deg);
}
}
@media screen and (max-width:1439px) {
.bouton_menu_secondaire, .fond_bouton_menu_secondaire {
display:none;
}
}
.sitemap {
display:block;
width:80%;
margin-left:9.3%;
text-align:left;
font-size:16px;
line-height:25px;
padding:0;
}
@media screen and (max-width:1023px) {
.sitemap {
width:90%;
margin-left: 3%;
}
}
.sitemap li {
padding-left:20px;
background:rgb(208,228,244);
list-style:none;
border-bottom:2px solid grey;
border-top:2px solid rgb(120,120,120);
}
.sitemap li li {
padding-left:10px;
background:rgb(200,200,200);
list-style:none;
border-bottom:1px solid grey;
border-top:1px solid rgb(120 120 120);
}
.sitemap a {
color:rgb(0,0,0);
text-decoration:none;
}
.sitemap li a:hover {
display:block;
margin-left:-10px;
padding-left:10px;
background:rgb(0,0,0);
color:white;
width:100%;
}
.grid_container3_accueil {
display:grid;
grid-template-columns:36% 35% 26%;
gap:10px;
background:rgba(255,255,255,0);
padding:10px;
}
.grid_container3_accueil > div {
display:block;
justify-content:center;
background:rgba(255,255,255,0);
text-align:center;
padding:10px 0;
font-size:14px;
}
@media screen and (max-width:1023px) {
.grid_container3_accueil {
display:none;
}
}
.grid_container4 {
display:grid;
grid-template-columns:25% 25% 25% 25%;
gap:8px;
background:rgb(255,255,255);
padding:8px;
}
.grid_container4 > div {
display:flex;
justify-content:center;
align-items:center;
background:rgb(255,255,255);
text-align:center;
padding:8px 8px;
}
@media screen and (max-width:1023px) {
.grid_container4 {
grid-template-columns:auto;
}
}
.grid_container3 {
display:grid;
grid-template-columns:33% 33% 33%;
gap:10px;
background:rgb(255,255,255);
padding:10px;
}
.grid_container3 > div {
display:flex;
justify-content:center;
align-items:center;
background:rgb(255,255,255);
text-align:center;
padding:10px 10px;
}
@media screen and (max-width:1023px) {
.grid_container3 {
grid-template-columns:auto;
}
}
.grid_container2 {
display:grid;
grid-template-columns:49.6% 49.6%;
gap:10px;
background:rgb(255,255,255);
padding:0;
margin-bottom:10px;
}
.grid_container2 > div {
display:flex;
background:rgb(255,255,255);
text-align:justify;
padding:10px 10px;
border-style:solid;
border-width:1px;
border-color:rgb(200,200,200);
}
@media screen and (max-width:1023px) {
.grid_container2 {
grid-template-columns:auto;
}
}
.colonne_container4 {
column-count:4;
column-gap:10px;
column-rule:rgb(150,150,150) 1px solid;
padding:5px;
text-align:justify;
text-justify:inter-word;
}
@media screen and (max-width:1023px) {
.colonne_container4 {
column-count:1;
padding:5px;
text-align:justify;
text-justify:inter-word;
}
}
.colonne_container3 {
column-count:3;
column-gap:20px;
column-rule:rgb(150,150,150) 1px solid;
padding:5px;
text-align:justify;
text-justify:inter-word;
}
@media screen and (max-width:1023px) {
.colonne_container3 {
column-count:1;
padding:5px;
text-align:justify;
text-justify:inter-word;
}
}
.colonne_container2 {
column-count:2;
column-gap:20px;
column-rule:rgb(150,150,150) 1px solid;
padding:5px;
text-align:justify;
text-justify:inter-word;
}
@media screen and (max-width:1023px) {
.colonne_container2 {
column-count:1;
padding:5px;
text-align:justify;
text-justify:inter-word;
}
}
.centre {
display:block;
margin:auto;
}
.alignement_vertical_horizontal {
display:flex;
justify-content:center;
align-items:center;
}
.interligne {
display:block;
margin-left:auto;
margin-right:auto;
}
@media screen and (max-width:1023px) {
.interligne {
display:none;
}
}
.texte_centre {
text-align:center;
}
.texte_droite {
text-align:right;
}
.legende_centre { 
text-align:center; 
font-size:10px; 
color:gray; 
}
.legende_droite { 
text-align:right; 
font-size:x-small; 
color:gray; 
}
.legende_gauche { 
text-align:left; 
font-size:x-small; 
color:gray; 
}
.texte-small_gris {
font-size:12px;
color:gray;	
}
.ombre_portee_bas_droite {
text-shadow:2px 2px 4px rgb(130,130,130);
}
.font_10 {
font-size:10px;
}
.font_11 {
font-size:11px;
}
.font_12 {
font-size:12px;
}
.font_14 {
font-size:14px;
}
.font_16 {
font-size:16px;
}
.font_18 {
font-size:18px;
}
.font_20 {
font-size:20px;
}
.font_22 {
font-size:22px;
}
.font_24 {
font-size:24px;
}
.font_28 {
font-size:28px;
}
.font_40 {
font-size:40px;
}
.font_gris {
color:rgb(160,160,160);
}
.font_rouge { 
color:rgb(255,0,0);
} 
.font_or {
color:rgb(177,163,133);
}
.font_blanc {
color:rgb(255,255,255);
}
.font_noir {
color:rgb(0,0,0);
}
.font_times {
font-family:"Times";
}
.terre {
display:block;
position:relative;
border-radius:50%;
background:url(../img/terre.jpg) repeat;
margin-top:-1px;
margin-left:-153px;
width:80px;
height:81px;
animation:animTerre 20s linear infinite;
}
@keyframes animTerre {
0% {
background-position:0;
}
100% {
background-position:168px;
}
}
@media screen and (max-width:1023px) {
.terre {
display:none;
}
}
.logo {
top:50%;
float:left;
margin-right:10px;
}
.bouton_blanc {
display:inline-block;
width:auto;
height:17px;
padding-left:5px;
padding-right:5px;
padding-top:2px;
padding-bottom:7px;
background:rgb(220,220,220);
border-style:solid;
border-width:1px;
border-color:black;
text-decoration: none;
transform:perspective(1px) translateZ(0);
}
.bouton_blanc:hover {
background:white;
cursor:pointer;
}
.bouton_blanc:before {
content:"";
position:absolute;
z-index:-1;
left:0;
right:100%;
bottom:0;
background:rgba(23,120,203,1);
height:3px;
transition-property:right;
transition-duration:0.2s;
transition-timing-function:ease-out;
}
.bouton_blanc:hover:before, .bouton_blanc:focus:before, .bouton_blanc:active:before {
right:0;
}
.bouton_lien_ext {
display:inline-block;
background-color: white;
width:300px;
box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.5);
border-style:solid;
border-color:black;
border-width:2px;
border-radius:10px;
color: black;
padding: 8px 16px;
text-align: center;
font-size: 13px;
margin: 3px 1px;
transition: 0.2s;
}
.bouton_lien_ext a{
text-decoration:none;
}
.bouton_lien_ext:hover {
background-color: black;
color: white;
}
.rechercher_site {
position:absolute;
display:none;
background:linear-gradient(to bottom, rgb(220,220,220) 0%, rgb(255,255,255) 50%, rgb(220,220,220) 100%);
width:414px;
height:109px;
top:250px;
left:50%;
padding:0;
margin-left:-210px;
border-radius:0px 0px 0px 0px;
border-style:solid;
border-color:rgb(0,0,0);
border-width:2px;
box-shadow: 0px 0px 10px 0px black;
z-index:25;
animation:deplacement_recherche 0.7s both;
}
@keyframes deplacement_recherche {
0% {
transform:translateX(-500px);
animation-timing-function:ease-in;
opacity:1;
}
38% {
transform:translateX(0);
animation-timing-function:ease-out;
opacity:1;
}
55% {
transform:translateX(-65px);
animation-timing-function:ease-in;
}
72% {
transform:translateX(0);
animation-timing-function:ease-out;
}
81% {
transform:translateX(-28px);
animation-timing-function:ease-in;
}
90% {
transform:translateX(0);
animation-timing-function:ease-out;
}
95% {
transform:translateX(-8px);
animation-timing-function:ease-in;
}
100% {
transform:translateX(0);
animation-timing-function:ease-out;
}
}
@media screen and (max-width:1023px) {
.rechercher_site {
display:none;
}
}
.rechercher_site_mobile {
display:block;
text-align:center;
margin-left:0px;
margin-top:-10px;
margin-bottom:10px;
}
@media screen and (min-width:1024px) {
.rechercher_site_mobile {
display:none;
}
}
.fermeture_panneau_recherche {
position:relative;
display:block;
width:22px;
height:22px;
top:4px;
left:390px;
cursor:pointer;
}
.webp .fermeture_panneau_recherche {
background-image:url(../img/x1.webp);	
}
.notwebp .fermeture_panneau_recherche {
background-image:url(../img/x1.png);	
}
.webp .fermeture_panneau_recherche:hover {
background-image:url(../img/x.webp);	
}
.notwebp .fermeture_panneau_recherche:hover {
background-image:url(../img/x.png);	
}
.loupe {
display:block;
position:relative;
background-repeat:no-repeat;
height:30px;
width:30px;
top:8px;
left:985px;
border-style:solid;
border-color:grey;
border-width:1px;
cursor:pointer;
z-index:5;
}
.webp .loupe {
background-image:url(../img/loupe.webp);	
}
.notwebp .loupe {
background-image:url(../img/loupe.png);	
}
.webp .loupe:hover {
background-image:url(../img/loupe1.webp);	
}
.notwebp .loupe:hover {
background-image:url(../img/loupe1.png);	
}
@media screen and (max-width:1023px) {
.rechercher_site, .loupe {
display:none;
}
}
.bouton_video {
display:block;
position:relative;
background-repeat:no-repeat;
height:35px;
width:39px;
top:18px;
left:980px;
cursor:pointer;
z-index:5;
}
.webp .bouton_video {
background-image:url(../img/bouton_video.webp);	
}
.notwebp .bouton_video {
background-image:url(../img/bouton_video.png);	
}
.webp .bouton_video:hover {
background-image:url(../img/bouton_video1.webp);	
}
.notwebp .bouton_video:hover {
background-image:url(../img/bouton_video1.png);	
}
@media screen and (max-width:1023px) {
.bouton_video {
display:none;
}
}
.champ_recherche { 
margin-left:-10px;
margin-top:-5px;
padding-left:10px;
height:20px;
width:270px;
} 
.bouton_recherche{
width:auto;
margin-top:31px;
margin-left:11px;
height:25px;
padding-left:5px;
padding-right:6px;
padding-top:2px;
padding-bottom:2px;
background:rgb(220,220,220);
border-style:solid;
border-width:1px;
border-color:black;
cursor:pointer;
}
.bouton_recherche:hover {
background:white;
}
.cadre_photo_centre{
display:inline-block;
position:relative;
text-align:center;
left:50%;
transform:translate(-50%,0%);
box-shadow:0 0 4px 1px rgba(0,0,0,0.2);
border-width:18px;
border-bottom-width:14px;
border-style:solid;
border-color:white;
}
.cadre_photo{
display:inline-block;
position:relative;
text-align:center;
box-shadow:0 0 4px 1px rgba(0,0,0,0.2);
border-width:18px;
border-bottom-width:14px;
border-style:solid;
border-color:white;
}
.cadre_video_simple {
position:relative;
width:70%;
padding-left:5px;
padding-right:5px;
margin-left:auto;
margin-right:auto;
margin-top:-8px;
background:linear-gradient(to bottom, rgb(240,240,240) 0%, rgb(170,170,170) 50%, rgb(240,240,240) 100%);
border-width:2px;
border-style:solid;
border-color:black;
box-shadow: 0px 0px 10px 0px black;	
}
.cadre_video {
position:relative;
width:70%;
padding-top:44%;
padding-left:5px;
padding-right:5px;
margin-left:auto;
margin-right:auto;
margin-top:-8px;
background:linear-gradient(to bottom, rgb(240,240,240) 0%, rgb(170,170,170) 50%, rgb(240,240,240) 100%);
border-width:2px;
border-style:solid;
border-color:black;
box-shadow: 0px 0px 10px 0px black;	
}
@media screen and (max-width:1023px) {
.cadre_video {
padding-top:5%;
padding-bottom:20%;
}
}
.cadre_video_iframe {
position: absolute; 
top: 0; 
left: 0;
bottom:0;
right:0;
width: 95%; 
height:100%;
margin-left:auto;
margin-right:auto;
padding-bottom:0;
border: 0; 
}
.cadre_video_iframe_bis {
position:absolute;
margin-top:-10px;
width: 100%; 
height:450px;
margin-left:auto;
margin-right:auto;
background:black;
}
@media screen and (max-width:1023px) {
.cadre_video_iframe_bis {
height:250px;
}
}
@media screen and (max-width:700px) {
.cadre_video_iframe_bis {
height:150px;
}
}
.cadre_iframe {
width:100%;
height:530px;
margin-left:auto;
margin-right:auto;
background:linear-gradient(to top, rgb(0,0,0) 0%, rgb(255,255,255) 70%, rgb(255,255,255) 100%);
border-width:0;
}
@media screen and (max-width:1023px) {
.cadre_iframe {
height:250px;
}
}
table.general {
width:70%;
border:rgb(51,51,51) solid 1px;
border-radius:8px;
margin:auto;
}
td.general {
border:rgb(0,0,0) solid 1px;
padding-left:5px;
padding-right:5px;
border-radius:8px;
}
.deco_bas_page {
display:block;
background:black;
height:25px;
margin-left:auto;
margin-right:auto;
margin-bottom:-8px;
margin-top:-40px;
padding:10px;
padding-top:8px;
}
.grand_conteneur_banniere {
display:block;
position:absolute;
width:100%;
background-repeat:repeat;
height:260px;
left:0;
top:0;
margin-bottom:250px;
overflow:hidden;
width:100%;
z-index:13;
}
.webp .grand_conteneur_banniere {
background:url(../img/fond_banniere.webp);
}	
.notwebp .grand_conteneur_banniere {
background:url(../img/fond_banniere.png);
}	
.conteneur_banniere {
display:flex;
justify-content:space-between;
align-items:center;
position:absolute;
height:260px;
left:0;
top:0;
margin-bottom:250px;
overflow:hidden;
width:100%;
}
.flex_banniere1 {
width:14.0%;
text-align:right;
}
.flex_banniere2 {
text-align:center;
top:0;
width:1024px;
}
.flex_banniere3 {
width:14.0%;
text-align:left;
}
@media screen and (max-width:1439px) {
.flex_banniere1, .flex_banniere3{
width:0 !important;
}
}
.diaporama { 
position:relative;
height:260px; 
width:340px;
left:50%; 
margin-left:150px; 
top:0; 
} 
.diaporama > div{ 
position:absolute; 
background:rgb(0,0,0,0);
top: 10px; 
left: 10px; 
right: 10px; 
bottom: 10px; 
}
@media screen and (max-width:1023px) {
.grand_conteneur_banniere,.diaporama,.conteneur_banniere,.section_grand_ecran,.flex_banniere1, .flex_banniere3 {
display:none;
}
}
.conteneur_banniere_mobile {
position:relative;
display:block;
background:rgba(255,255,255,0);
left:0;
width:100%;
z-index:5;
}
@media screen and (min-width:1024px) {
.conteneur_banniere_mobile {
display:none;
}
}
.esthetique_sourire {
display:flex;
position:absolute;
height:16px;
width:253px;
top:157px;
left:50%;
transform:translate(-256px,0);
padding:6px;
padding-left:60px;
color:white;
background:linear-gradient(to top, rgb(0,0,0) 0%, rgb(0,0,0) 30%, rgb(100,100,100) 100%);
font-size:18px;
font-style:italic;
word-spacing:10px;
text-align:center;
overflow:hidden;
z-index:30;
}
.expansion_texte{
animation: expansion-txt 1.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
animation-delay:1s;
}
@keyframes expansion-txt {
0% {
letter-spacing: -0.5em;
transform: translateZ(-700px);
opacity: 0;
}
40% {
opacity: 0.6;
}
100% {
transform: translateZ(0);
opacity: 1;
}
}
@media screen and (max-width:1023px) {
.esthetique_sourire {
display:none;
}
}
.deco_banniere {
display:block;
position:absolute;
height:10px;
width:100%;
border-bottom-style:solid;
border-bottom-width:2px;
border-bottom-color:rgb(0,0,0);
border-top-style:solid;
border-top-width:2px;
border-top-color:rgb(0,0,0);
background-image:url(../img/bordure_menu.png);
background-repeat:repeat;
z-index:25;
}
.webp .deco_banniere {
background-image:url(../img/bordure_menu.webp);
}
.notwebp .deco_banniere {
background-image:url(../img/bordure_menu.png);
}
.deco_banniere2 {
display:block;
position:absolute;
height:10px;
width:1020px;
left:50%;
margin-left:-512px;
border-style:solid;
border-width:2px;
border-color:rgb(0,0,0);
background-repeat:repeat;
z-index:14;
}
.webp .deco_banniere2 {
background-image:url(../img/bordure_menu.webp);
}
.notwebp .deco_banniere2 {
background-image:url(../img/bordure_menu.png);
}
.invisible {
display:none;	
}
h1 {
font-family:Futura, "Trebuchet MS", Arial, sans-serif;
font-size:20px;
font-weight:bold;
text-align:center;
height:35px;
line-height:26px;
margin-top:-3px;
color:white;
overflow:hidden;
animation:deplacement_titre 2.5s both;
animation-delay:2.3s;
}
@keyframes deplacement_titre {
0% {
transform:translateX(-500px);
animation-timing-function:ease-in;
opacity:0;
}
38% {
transform:translateX(0);
animation-timing-function:ease-out;
opacity:1;
}
55% {
transform:translateX(-65px);
animation-timing-function:ease-in;
}
72% {
transform:translateX(0);
animation-timing-function:ease-out;
}
81% {
transform:translateX(-28px);
animation-timing-function:ease-in;
}
90% {
transform:translateX(0);
animation-timing-function:ease-out;
}
95% {
transform:translateX(-8px);
animation-timing-function:ease-in;
}
100% {
transform:translateX(0);
animation-timing-function:ease-out;
}
}
@media screen and (max-width:1023px) {
h1 {
font-size:14px;
height:30px;
margin-bottom:10px;
}
}
h2 {
display:block;
font-size:20px;
color:rgb(0,0,0);
text-align:left;
font-weight:normal;
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:rgba(0,0,0,1);
margin-left:0;
margin-bottom:10px;
padding-left:5px;
padding-bottom:3px;
padding-top:3px;
background:linear-gradient(to right, rgba(0,0,0,.1), white);
}
h2:before {
font-size:18px;
font-weight:bold;
color:rgb(0,0,0);
content:"☼ ";
}
@media screen and (max-width:1023px) {
h2 {
font-size:14px;
}
}
h3 {
display:block;
font-size:20px;
color:rgb(155,10,60);
text-align:left;
font-weight:normal;
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:rgba(155,10,60,1);
margin-left:0;
margin-bottom:0;
padding-left:5px;
padding-bottom:3px;
padding-top:3px;
background:linear-gradient(to right, rgba(155,10,60,.2), white);
}
h3:before {
font-size:18px;
font-weight:bold;
color:rgb(155,10,60);
content:"☼ ";
}
@media screen and (max-width:1023px) {
h3 {
font-size:14px;
}
}
h4{
display:table; /*saut ligne auto après fermeture balise */
font-size:12px; 
height:auto; 
width:auto;
font-weight:bold; 
background:rgba(0,0,0,1);
color:white;
padding-left:8px;
padding-right:8px;
margin-bottom:6px;
}
h4::before {
content:"▫▫▫ ";
}
h4::after {
content:" ▫▫▫";
}
h5{
display:table; /*saut ligne auto après fermeture balise */
position:relative;
max-width:65%;
text-align:center;
font-size:14px; 
height:auto; 
width:auto;
margin-left:auto;
margin-right:auto;
font-weight:bold; 
background:rgba(0,0,0,0);
color:black;
border-style:solid;
border-width:2px;
border-color:black;
border-radius:10px;
border-bottom-right-radius:0px;
border-bottom-left-radius:0px;
text-shadow:0 1px 3px rgba(0,0,1,0.5);
padding-bottom:10px;
padding-right:20px;
margin-bottom:1px;
}
.webp h5::before {
content:url(../img/logo_video.webp);
padding-left:20px;
padding-right:10px;
}
.notwebp h5::before {
content:url(../img/logo_video.png);
padding-left:20px;
padding-right:10px;
}
.g-recaptcha {
display:block;
margin-bottom:12px;
}
.pastille_noire {
font-family:sans-serif;
font-size:14px; 
height:auto; 
width:auto;
font-weight:bold; 
background:rgba(0,0,0,1);
color:white;
padding-left:8px;
padding-right:8px;
border-radius:50%;
border-width:0;
}
.titre_permanent {
display:block;
position:relative;
height:24px;
background:rgba(0,0,0,0.4);
color:white;
font-size:18px;
font-weight:bold;
width:97.4%;
margin-left:1.6%;
padding-top:2px;
text-align:center;
text-shadow:0 0 3px rgb(0,0,1);
margin-top:0.8%;
overflow:hidden;
transform:scale(1,1.5);
opacity:0;
animation:fade-out 5s 7s ease-out both;
animation-delay:0s;
z-index:0;
}
@keyframes fade-out {
0% {
opacity:0;
}
30% {
opacity:0;
}
70% {
opacity:1;
}
100% {
opacity:1;
}
}
@media screen and (max-width:1023px) {
.titre_permanent {
width:98.0%;
font-size:16px;
margin-top:45px;
margin-left:1%;
}
}
.titre_bienvenue {
display:block;
position:absolute;
height:40px;
background:rgba(0,0,0,0.1);
color:white;
font-size:40px;
font-weight:bold;
width:550px;
padding-top:17px;
left:50%;
transform:translate(-50%);
text-align:center;
margin-top:-16px;
border-width:2px;
border-style:solid;
border-color:grey;
border-radius:20px;
animation:fade-out 1s 2s ease-out both;
animation-delay:7s;
}
@keyframes fade-out1 {
0% {
opacity:1;
}
100% {
opacity:0;
}
}
@media screen and (max-width:1023px) {
.titre_bienvenue {
display:none;
}
}
.vcard {
position:absolute;
display:block;
left:-82px;
background-repeat:no-repeat;
width:192px;
height:170px;
transition-duration:0.3s;
top:238px;
border-radius:0px 0px 10px 10px;
border-style:solid;
border-color:rgb(0,0,0);
border-width:2px;
cursor:pointer;
z-index:3;
}
.webp .vcard {
background-image:url(../img/vcard.webp);	
}
.notwebp .vcard {
background-image:url(../img/vcard.png);	
}
.message_urgences {
position:absolute;
display:block;
font-family: 'Ubuntu',sans-serif;
line-height:22px;
font-size:12px;
left:525px;
background-repeat:no-repeat;
width:212px;
height:360px;
transition-duration:0.3s;
top:48px;
border-radius:0px 0px 10px 10px;
border-style:solid;
border-color:rgb(0,0,0);
border-width:2px;
padding-left:3px;
padding-right:2px;
cursor:pointer;
z-index:3;
}
.webp .message_urgences {
background-image:url(../img/message_urgences.webp);	
}
.notwebp .message_urgences {
background-image:url(../img/message_urgences.png);	
}
.informations {
position:absolute;
display:block;
font-family: 'Ubuntu',sans-serif;
font-size:12px;
font-weight:normal;
text-decoration:none;
color:black;
left:748px;
background-repeat:no-repeat;
width:187px;
height:170px;
line-height:19px;
transition-duration:0.3s;
top:238px;
border-radius:10px 10px 10px 10px;
border-style:solid;
border-color:rgb(0,0,0);
border-width:2px;
padding-left:3px;
cursor:pointer;
z-index:3;
}
.webp .informations {
background-image:url(../img/information.webp);	
}
.notwebp .informations {
background-image:url(../img/information.png);	
}
.conteneur_messages_dropdown {
position:absolute;
display:block;
left:50%;
margin-left:-430px;
width:1000px;
height:200px;
background:rgba(0,0,0,0);
z-index:1;
}
@media screen and (max-width:1023px) {
.vcard, .informations, .conteneur_messages_dropdown {
display:none;
}
}
.google_traduction {
position:absolute;
display:block;
font-family: 'Ubuntu',sans-serif;
font-size:6px;
font-weight:normal;
text-decoration:none;
color:black;
left:116px;
background-repeat:no-repeat;
width:403px;
height:110px;
transition-duration:0.3s;
top:298px;
border-radius:0px 0px 10px 10px;
border-style:solid;
border-color:rgb(0,0,0);
border-width:2px;
cursor:pointer;
z-index:3;
}
.webp .google_traduction {
background-image:url(../img/drapeaux.webp);	
}
.notwebp .google_traduction {
background-image:url(../img/drapeaux.png);	
}
.google_traduction_new {
text-align:center;
}
@media screen and (max-width:1023px) {
.google_traduction, .google_traduction_new {
display:none;
}
}
.titre_google {
position:relative;
background:rgb(255,255,255);
color:#000;
margin-top:-30px;
margin-left:auto;
margin-right:auto;
width:90%;
max-width:1010px;
padding:10px 4px 10px 5px;
font-size:20px;
font-weight:bold;
text-shadow:0 1px 2px rgb(200,200,200);
border:solid 2px;
border-color:rgb(200,200,200);
box-shadow:0 0 4px 1px rgb(153,153,153) inset;
z-index:4;
}
.google_traduction_new_mobile {
text-align:center;
}
@media screen and (min-width:1024px) {
.titre_google, .google_traduction_new_mobile {
display:none;
}
}
.gras {
font-weight:bold;
}
.souligne {
text-decoration:underline;
}
.bouton_FB {
display:block;
top:10px;
width:30px;
height:30px;
margin-left:10px;
background-repeat:no-repeat;
}
.webp .bouton_FB {
background-image:url(../img/FB1.webp);
}
.notwebp .bouton_FB {
background-image:url(../img/FB1.png);
}
.webp .bouton_FB:hover {
background-image:url(../img/FB.webp);
}
.notwebp .bouton_FB:hover {
background-image:url(../img/FB.png);
}
.bouton_FB_partage {
display:block;
top:60px;
width:30px;
height:30px;
margin-left:-30px;
background-repeat:no-repeat;
}
.webp .bouton_FB_partage {
background-image:url(../img/FBpartage1.webp);
}
.notwebp .bouton_FB_partage {
background-image:url(../img/FBpartage1.png);
}
.webp .bouton_FB_partage:hover {
background-image:url(../img/FBpartage.webp);
}
.notwebp .bouton_FB_partage:hover {
background-image:url(../img/FBpartage.png);
}
.bouton_Google {
display:block;
top:110px;
width:30px;
height:30px;
margin-left:-30px;
background-repeat:no-repeat;
}
.webp .bouton_Google {
background-image:url(../img/Google1.webp);
}
.notwebp .bouton_Google {
background-image:url(../img/Google1.png);
}
.webp .bouton_Google:hover {
background-image:url(../img/Google.webp);
}
.notwebp .bouton_Google:hover {
background-image:url(../img/Google.png);
}
.bouton_Linkedin {
display:block;
top:160px;
width:30px;
height:30px;
margin-left:-30px;
background-repeat:no-repeat;
}
.webp .bouton_Linkedin {
background-image:url(../img/Linkedin1.webp);
}
.notwebp .bouton_Linkedin {
background-image:url(../img/Linkedin1.png);
}
.webp .bouton_Linkedin:hover {
background-image:url(../img/Linkedin.webp);
}
.notwebp .bouton_Linkedin:hover {
background-image:url(../img/Linkedin.png);
}
.bouton_Youtube {
display:block;
top:210px;
width:30px;
height:30px;
margin-left:-30px;
background-repeat:no-repeat;
}
.webp .bouton_Youtube {
background-image:url(../img/Youtube1.webp);
}
.notwebp .bouton_Youtube {
background-image:url(../img/Youtube1.png);
}
.webp .bouton_Youtube:hover {
background-image:url(../img/Youtube.webp);
}
.notwebp .bouton_Youtube:hover {
background-image:url(../img/Youtube.png);
}
.bouton_Instagram {
display:block;
top:260px;
width:30px;
height:30px;
margin-left:-30px;
background-repeat:no-repeat;
}
.webp .bouton_Instagram {
background-image:url(../img/Instagram1.webp);
}
.notwebp .bouton_Instagram {
background-image:url(../img/Instagram1.png);
}
.webp .bouton_Instagram:hover {
background-image:url(../img/Instagram.webp);
}
.notwebp .bouton_Instagram:hover {
background-image:url(../img/Instagram.png);
}
.conteneur_boutons_droite {
background:rgb(0,0,0);
display:flex;
float:right;
position:sticky;
top:40.4%;
width:52px;
margin-right:-4px;
margin-left:-52px;
height:500px;
border-radius:10px 0 0 10px;
border-style:solid;
border-color:rgb(150,150,150);
border-width:2px;
}
@media screen and (max-width:1023px) {
.bouton_FB, .bouton_FB_partage, .bouton_Google, .bouton_Linkedin, .bouton_Youtube, .bouton_Instagram, .conteneur_boutons_droite {
display:none;
}
}
.bouton_FB_mobile {
display:block;
position:sticky;
left:5%;
width:60px;
height:60px;
background-repeat:no-repeat;
}
.webp .bouton_FB_mobile {
background-image:url(../img/FB1-mobile.webp);
}
.notwebp .bouton_FB_mobile {
background-image:url(../img/FB1-mobile.png);
}
.webp .bouton_FB_mobile:hover {
background-image:url(../img/FB-mobile.webp);
}
.notwebp .bouton_FB_mobile:hover {
background-image:url(../img/FB-mobile.png);
}
.bouton_FB_partage_mobile {
display:block;
position:sticky;
left:20%;
width:60px;
height:60px;
background-repeat:no-repeat;
}
.webp .bouton_FB_partage_mobile {
background-image:url(../img/FBpartage1-mobile.webp);
}
.notwebp .bouton_FB_partage_mobile {
background-image:url(../img/FBpartage1-mobile.png);
}
.webp .bouton_FB_partage_mobile:hover {
background-image:url(../img/FBpartage-mobile.webp);
}
.notwebp .bouton_FB_partage_mobile:hover {
background-image:url(../img/FBpartage-mobile.png);
}
.bouton_Google_mobile {
display:block;
position:sticky;
left:35%;
width:60px;
height:60px;
background-image:url(../img/Google1-mobile.png);
background-repeat:no-repeat;
}
.webp .bouton_Google_mobile {
background-image:url(../img/Google1-mobile.webp);
}
.notwebp .bouton_Google_mobile {
background-image:url(../img/Google1-mobile.png);
}
.webp .bouton_Google_mobile:hover {
background-image:url(../img/Google-mobile.webp);
}
.notwebp .bouton_Google_mobile:hover {
background-image:url(../img/Google-mobile.png);
}
.bouton_Linkedin_mobile {
display:block;
position:sticky;
left:50%;
width:60px;
height:60px;
background-repeat:no-repeat;
}
.webp .bouton_Linkedin_mobile {
background-image:url(../img/Linkedin1-mobile.webp);
}
.notwebp .bouton_Linkedin_mobile {
background-image:url(../img/Linkedin1-mobile.png);
}
.webp .bouton_Linkedin_mobile:hover {
background-image:url(../img/Linkedin-mobile.webp);
}
.notwebp .bouton_Linkedin_mobile:hover {
background-image:url(../img/Linkedin-mobile.png);
}
.bouton_Youtube_mobile {
display:block;
position:sticky;
left:65%;
width:60px;
height:60px;
background-repeat:no-repeat;
}
.webp .bouton_Youtube_mobile {
background-image:url(../img/Youtube1-mobile.webp);
}
.notwebp .bouton_Youtube_mobile {
background-image:url(../img/Youtube1-mobile.png);
}
.webp .bouton_Youtube_mobile:hover {
background-image:url(../img/Youtube-mobile.webp);
}
.notwebp .bouton_Youtube_mobile:hover {
background-image:url(../img/Youtube-mobile.png);
}
.bouton_Instagram_mobile {
display:block;
position:sticky;
left:80%;
width:60px;
height:60px;
background-repeat:no-repeat;
}
.webp .bouton_Instagram_mobile {
background-image:url(../img/Instagram1-mobile.webp);
}
.notwebp .bouton_Instagram_mobile {
background-image:url(../img/Instagram1-mobile.png);
}
.webp .bouton_Instagram_mobile:hover {
background-image:url(../img/Instagram-mobile.webp);
}
.notwebp .bouton_Instagram_mobile:hover {
background-image:url(../img/Instagram-mobile.png);
}
@media screen and (min-width:1024px) {
.bouton_FB_mobile, .bouton_FB_partage_mobile, .bouton_Google_mobile, .bouton_Linkedin_mobile, .bouton_Youtube_mobile, .bouton_Instagram_mobile, .bloc_boutons_mobiles{
display:none;
}
}
.bloc_boutons_mobiles {
display:flex;
height:60px;
max-height:60px;
margin-left:auto;
margin-right:auto;
margin-bottom:70px;
margin-top:20px;
align-content:center;
align-items:center;
}
.bouton_page_haut {
display:flex;
top:310px;
width:30px;
height:30px;
margin-left:-30px;
background:rgb(200,200,200);
border-radius:3px;
font-size:18px;
color:black;
justify-content:center;
align-items:center;
margin-right:-30px;
text-indent: -9999px;
line-height: 0;
}
.bouton_page_haut:hover {
background:white;
}
@media screen and (max-width:1023px) {
.bouton_page_haut {
display:none;
}
.bouton_page_haut_mobile {
display:flex;
width:60px;
height:60px;
margin-left:auto;
margin-right:auto;
background:rgb(200,200,200);
border-radius:3px;
font-size:36px;
color:black;
justify-content:center;
align-items:center;
text-indent: -9999px;
line-height: 0;
}
.bouton_page_haut_mobile:hover {
background:white;
}
}
@media screen and (min-width:1024px) {
.bouton_page_haut_mobile {
display:none;
}
}
.bouton_page_precedente {
display:flex;
top:360px;
width:30px;
height:30px;
margin-left:0;
background:rgb(200,200,200);
border-radius:3px;
font-size:18px;
color:black;
justify-content:center;
align-items:center;
margin-right:-30px;
text-indent: -9999px;
line-height: 0;
}
.bouton_page_precedente:hover {
background:white;
}
@media screen and (max-width:1023px) {
.bouton_page_precedente {
display:none;
}
}
.bouton_page_suivante {
display:flex;
top:410px;
width:30px;
height:30px;
margin-left:0;
background:rgb(200,200,200);
border-radius:3px;
font-size:18px;
color:black;
justify-content:center;
align-items:center;
margin-right:-30px;
text-indent: -9999px;
line-height: 0;
}
.bouton_page_suivante:hover {
background:white;
}
@media screen and (max-width:1023px) {
.bouton_page_suivante {
display:none;
}
}
.bouton_page_bas {
display:flex;
top:460px;
width:30px;
height:30px;
margin-left:0;
background:rgb(200,200,200);
border-radius:3px;
font-size:18px;
color:black;
justify-content:center;
align-items:center;
margin-right:-30px;
text-indent: -9999px;
line-height: 0;
}
.bouton_page_bas:hover {
background:white;
}
@media screen and (max-width:1023px) {
.bouton_page_bas {
display:none;
}
}
.fond_smartphone{
display:flex;
width:100%;
flex-direction:row;
align-items:center;
justify-content:center;
margin-top:20px;
background-repeat:repeat;
}
.webp .fond_smartphone {
background-image:url(../img/fond_smartphone.webp);
}
.notwebp .fond_smartphone {
background-image:url(../img/fond_smartphone.png);
}
.smartphone {
display:block; 
position:relative;
height:635px;
width:327px;
animation: smartphone 30s infinite;
}
.webp .smartphone {
background-image:url(../img/progres.webp);	
}
.notwebp .smartphone {
background-image:url(../img/progres.png);	
}
@keyframes smartphone {
0% { opacity:1; }
25% { opacity:0.2; }
50% { opacity:0.2; }
75% { opacity:1; }
100% { opacity:1; }
}
.logo1 {
display:block; 
position:absolute;
height:96px;
width:96px;
background-image:url(../img/logo1.png);
animation: logo1 60s infinite;
}
.webp .logo1 {
background-image:url(../img/logo1.webp);	
}
.notwebp .logo1 {
background-image:url(../img/logo1.png);	
}
@keyframes logo1 { 
0% { 
transform:rotate(0deg); 
} 
12.5% { 
transform:rotate(90deg); 
}
25% { 
transform:rotate(90deg); 
}
37.5% { 
transform:rotate(180deg); 
} 
50% { 
transform:rotate(180deg); 
}
62.5% { 
transform:rotate(270deg); 
}
75% { 
transform:rotate(270deg); 
}
87.5% { 
transform:rotate(360deg); 
}
100% { 
transform:rotate(360deg); 
}
} 
.sms {
display:block; 
position:absolute;
height:635px;
width:327px;
animation: sms 60s infinite;
}
.webp .sms {
background-image:url(../img/sms.webp);	
}
.notwebp .sms {
background-image:url(../img/sms.png);	
}
@keyframes sms {
0% { opacity:0.01; }
12.5% { opacity:1; }
25% { opacity:1; }
37.5% { opacity:0.2; }
50% { opacity:0.05; }
50.01% { opacity:0; }
100% { opacity:0; }
}
.sms1 {
display:block; 
position:absolute;
height:635px;
width:327px;
animation: sms1 60s infinite;
}
.webp .sms1 {
background-image:url(../img/sms1.webp);	
}
.notwebp .sms1 {
background-image:url(../img/sms1.png);	
}
@keyframes sms1 {
0% { opacity:0.05; }
0.01% { opacity:0; }
50% { opacity:0; }
50.01% { opacity:0.2; }
62.5% { opacity:1; }
75% { opacity:1; }
87.5% { opacity:0.2; }
100% { opacity:0.05; }
}
@media screen and (max-width:1439px) {
.fond_smartphone, .smartphone, .logo1, .sms, .sms1 {
display:none;
}
}
.bouton_enveloppe {
display:flex;
width:30px;
height:30px;
justify-content:center;
align-items:center;
margin-left:5%;
background:rgb(200,200,200);
font-size:22px;
color:black;
border-style:solid;
border-width:1px;
border-color:black;
text-indent: -9999px;
line-height: 0;
}
.bouton_enveloppe:hover {
background:white;
}
.enveloppe:after{
content:" ✉";
line-height: 0;
text-indent:0px;
}
@media screen and (min-width:1024px) {
.conteneur_texte_defilant {
display:block;
background:rgb(255,255,255);
height:300px;
width:32%;
border:solid 2px; 
border-radius:8px; 
box-shadow:0 0 4px 1px rgba(102, 102, 102, 1) inset; 
border-color:#FFFFFF; 
border-style:ridge; 
margin-top:-298px;
float:right;
overflow:hidden;
}
.texte_defilant {
display:block;
position:relative;
background:rgba(255,255,255,0);
font-size:26px;
font-family:"times";
line-height:50px;
text-shadow:none;
color:rgba(0,0,0,0.2);
font-weight:bold;
border-width:0;
text-align:left;
padding-left:10px;
animation:texte_defilant1_up 150s linear infinite;
}
}
@keyframes texte_defilant1_up {
0% {
top:290px;
}
100% {
top:-880px;
}
}
@media screen and (max-width:1023px) {
.conteneur_texte_defilant, .texte_defilant {
display:none;
}
}
.conteneur_message_accueil {
display:block;
text-align:justify;
background:rgb(255,255,255);
font-size:12px;
line-height:16px;
color:rgb(130,130,130);
height:auto;
width:auto;
margin-left:5%;
margin-right:5%;
min-width:250px;
padding:10px;
border-style:solid;
border-width:1px;
border-color:rgb(0 0 0/0.3);
animation:scale-in-ver-center 0.4s cubic-bezier(0.250,0.460,0.450,0.940) both;
animation-delay:6s;
}
@keyframes scale-in-ver-center {
0% {
transform:scaleY(0);
opacity:1;
}
100% {
transform:scaleY(1);
opacity:1;
}
}
@media screen and (max-width:1023px) {
.conteneur_message_accueil {
display:none;
}
}
.conteneur_message_accueil_mobile {
display:block;
text-align:justify;
background:rgb(255,255,255);
border-style:solid;
border-width:1px;
border-color:rgb(180,180,180);
color:rgb(130,130,130);
height:auto;
width:90%;
margin-left:auto;
margin-right:auto;
margin-top:30px;
margin-bottom:30px;
padding:10px;
}
@media screen and (min-width:1024px) {
.conteneur_message_accueil_mobile {
display:none;
}
}
@media screen and (max-width:1023px) {
.topnav {
display:none;
}
}
.topnav {
background:linear-gradient(to bottom, rgb(215,215,215) 0%, rgb(250,250,250) 40%, rgb(250,250,250) 60%, rgb(215,215,215) 100%);
font-weight:bold;
border-style:solid;
border-width:0 2px;
border-color:rgb(0,0,0);
position:absolute;
width:995px;
left:50%;
margin-left:-512px;
padding-right:25px;
height:89px;
top:260px;
z-index:20;
}
.topnav a {
float:left;
display:block;
color:black;
height:22px;
padding:11px 34px 10px 34px;
text-decoration:none;
text-shadow:none;
border-style:dotted;
border-width:1px;
border-color:rgba(0,0,0,0.2);
border-top-style:solid;
border-top-width:1px;
border-bottom-width:0px;
border-top-color:rgba(0,0,0,0.5);
font-size:13px;
font-weight:bold;
text-align:center;
}
@media screen and (max-width:1439px) {
.topnav {
font-weight:normal;
}
.topnav a{
padding:11px 26px 10px 25px;
}
}
.active {
height:14px;
background:rgb(255,255,255);
}
.topnav .icon {
display:none;
font-size:13px;
}
.dropdown {
float:left;
overflow:hidden;
}
.dropdown .dropbtn {
font-size:13px;
border:none;
outline:none;
color:black;
padding:14px 22px 14px 28px;
border-style:dotted;
border-width:1px;
border-color:rgba(0,0,0,0.2);
border-top-style:solid;
border-top-width:1px;
border-bottom-width:0px;
border-top-color:rgba(0,0,0,0.5);
background:inherit;
font-family: 'Ubuntu',sans-serif;
font-weight:bold; 
margin:0;
}
@media screen and (min-width:1024px) {
.dropdown .dropbtn {
height:44px;
}
}
.dropdown_content {
display:none;
position:absolute;
background:rgba(220,220,220,0.95);
min-width:160px;
border-style:double;
border-color:black;
border-width:4px;
z-index:26;
animation:scale-in-ver-top 0.5s cubic-bezier(0.250,0.460,0.450,0.940) both;
}
@keyframes scale-in-ver-top {
0% {
transform:scaleY(0);
transform-origin:100% 0%;
opacity:1;
}
100% {
transform:scaleY(1);
transform-origin:100% 0%;
opacity:1;
}
}
.dropdown_content a {
float:none;
color:black;
padding:3px 8px;
font-weight:bold; 
text-decoration:none;
display:block;
text-align:left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background:rgb(0,0,0);
color:white;
}
.dropdown a:hover {
background:linear-gradient(to bottom, rgb(0,0,0) 0%, rgb(255,255,255) 11%, rgb(255,255,255) 87%, rgb(0,0,0) 100%);
color:black;
}
.dropdown:hover .dropdown_content {
display:block;
}
@media screen and (max-width:1023px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display:none;
}
.topnav a.icon {
float:right;
display:block;
font-size:20px;
}
}
/* -------------------------------------------------------------------------------------------ANCIEN CSS ------------------------------------------------------------------------------ */
table.plan { 
width:90%; 
border:rgba(51, 51, 51, 1) solid 1px; 
border-radius:8px; 
background-color:rgba(102, 102, 102, 1); 
box-shadow:2px 2px 2px 0 rgba(0, 0, 0, 0.5); 
margin:0 auto; 
} 
th.plan { 
width:50%; 
background-color:rgba(220, 220, 220, 1); 
padding-left:10px; 
border-radius:8px; 
box-shadow:0 5px 5px rgba(0, 0, 0, 0.3) inset; 
text-align:center; 
text-shadow:1px 1px rgba(255, 255, 255, 0.5); 
} 
td.plan { 
border:rgba(0, 0, 0, 1) solid 1px; 
padding-left:5px; 
padding-right:5px; 
border-radius:8px; 
background-color:rgba(255, 255, 255, 1); 
box-shadow:0 5px 12px rgba(0, 0, 0, 0.3) inset; 
} 
table.honoraires { 
width:90%; 
border:rgba(51, 51, 51, 1) solid 1px; 
border-radius:8px; 
background-color:rgba(102, 102, 102, 1); 
box-shadow:2px 2px 2px 0 rgba(0, 0, 0, 0.5); 
margin:0 auto; 
} 
td.honoraires { 
border:rgba(0, 0, 0, 1) solid 1px; 
padding-left:5px; 
padding-right:5px; 
border-radius:8px; 
background-color:rgba(255, 255, 255, 1); 
box-shadow:0 5px 3px rgba(0, 0, 0, 0.2) inset; 
text-shadow:1px 1px rgba(255, 255, 255, 0.3); 
} 
table.infos { 
width:90%; 
margin:0 auto; 
} 
th.infos { 
padding-left:5px; 
padding-right:5px; 
border-radius:0 0 20px 20px; 
border:groove; 
background-color:rgba(204, 180, 100, 0.3); 
text-shadow:1px 1px rgba(255, 255, 255, 0.3); 
border-color:rgba(250, 239, 207, 0.5); 
} 
td.infos { 
width:50%; 
text-align:center; 
} 
tr.infos { 
height:30px; 
text-align:center; 
} 
table.liens { 
width:80%; 
border:rgba(51, 51, 51, 1) solid 1px; 
border-radius:8px; 
background-color:rgba(255, 255, 255, 1); 
box-shadow:2px 2px 2px 0 rgba(0, 0, 0, 0.5); 
margin:0 auto; 
} 
td.liens { 
padding-left:40px; 
padding-right:40px; 
border-radius:8px 0 0 8px; 
} 
table.deco { 
width:95.5%; 
margin:0 auto; 
} 
img.flottement_droite { 
float:right; 
margin-left:20px;
vertical-align:text-top;
} 
img.flottement_gauche { 
float:left; 
margin-right:20px;
vertical-align:text-top;
} 
img.centre { 
display:block; 
margin-left:auto; 
margin-right:auto; 
top:100%; 
margin-top:4px; 
} 
img.unitag { 
margin-left:35%; 
top:100%; 
margin-top:4px; 
} 
video { 
height:auto; 
width:auto; 
margin-top:0; 
margin-bottom:-3px; 
} 
textarea, table, td, th, code, pre, samp { 
margin:10px; 
}
.inner_inside { 
background-color:rgba(255, 255, 255, 1); 
width:auto; 
text-align:justify; 
line-height:22px; 
border:solid 2px; 
border-radius:8px; 
box-shadow:0 0 4px 1px rgba(102, 102, 102, 1) inset; 
border-color:#FFFFFF; 
border-style:ridge; 
margin-left:15px;
margin-right:15px;
margin-top:15px;
padding: 15px 30px 15px 30px;
z-index:10; 
}
@media screen and (max-width:1023px) {
.inner_inside { 
margin-top:30px;
}
}
.flottement_gauche {
float:left;
}
.deuxcolonnes {
column-count:2;
column-gap:25px;
column-rule-color:gray;
column-rule-style:solid;
column-rule-width:1px;
column-width:auto;
height:auto;
overflow:hidden;
}
.troiscolonnes {
column-count:3;
column-gap:15px;
column-rule-color:gray;
column-rule-style:solid;
column-rule-width:1px;
column-width:auto;
height:auto;
overflow:hidden;
}
.quatrecolonnes {
column-count:4;
column-gap:10px;
column-rule-color:gray;
column-rule-style:solid;
column-rule-width:1px;
column-width:auto;
height:auto;
overflow:hidden;
}
.bouton_violet {
overflow:hidden;
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(120,90,160,1) 50%, rgba(0,0,0,1) 100%);
white-space: nowrap;
box-shadow:0px 2px 5px 1px rgba(0, 0, 0, 0.5); 
border-radius:15px 15px 15px 15px; 
font-size: 12px;
font-weight:bold;
padding-left:8px; 
padding-right:8px; 
padding-top:4px; 
padding-bottom:4px; 
margin:5px;
vertical-align:middle;
color:rgb(210, 210, 210);
}
.bouton_violet:hover {
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(180,150,210,1) 50%, rgba(0,0,0,1) 100%);
cursor:pointer;
}
.haut_gauche {
position: absolute;
top: 0;
left: 0;
padding-left:5px;
padding-top:5px;
}
.haut_droite {
position: absolute;
top: 0;
right: 0%;
padding-right:5px;
padding-top:5px;
}
.bas_gauche {
position: absolute;
bottom: 0%;
left: 0;
padding-left:5px;
padding-bottom:7px;
}
.bas_droite {
position: absolute;
bottom: 0%;
right: 0%;
padding-right:5px;
padding-bottom:7px;
}
.ombre_portee_photo {
box-shadow: 3px 3px 4px 0px rgba(0,0,0,0.6);
margin-bottom:20px;
}
.ombre_portee_periph {
box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.6);
}
.puce_carree{
display:inline-block;
}
.webp .puce_carree:before{
content: url(../img/puce_carree_petite.webp);
width:13px;
height:9px;
}
.notwebp .puce_carree:before{
content: url(../img/puce_carree_petite.jpg);
width:13px;
height:9px;
}
.separation:before {
display:block;
color:rgb(0,0,0);
font-weight:normal;
letter-spacing:-2px;
text-align:center;
content:"―――――――――――― <> ―――――――――――――";
}
.diy-slideshow{
position: relative;
display:flex;
justify-content:center;
vertical-align:center;
margin-left:auto;
margin-right:auto;
margin-top:auto;
margin-bottom:auto;
width:auto;
height:auto;
max-width:665px;
max-height:500px;
}
figure{
position: absolute;
margin-left:0;
margin-right:0;
margin-top:0;
margin-bottom:0;
max-width:665px;
width:100%;
height:100%;
opacity:0;
transition: 1s opacity;
}
figcaption{
position: absolute;
font-family: sans-serif;
font-size: 12px;
top:86%;
width:96%;
margin-left: 0%;
margin-right: auto;
text-align:center;
font-weight: bold;
color: rgba(255,255,255,0.6);
background: rgba(0,0,0, 0.4);
border-radius: 2px;
}
figcaption a{
color: #fff;
}
figure.show{
opacity:1;
position:static; 
transition: 2s opacity;
}
.next, .prev{
color: #fff;
position: absolute;
background: rgba(0,0,0, .6);
top: 51.7%;
z-index: 1;
font-size: 40px;
margin-top: -.75em;
opacity: .4;
}
.next:hover, .prev:hover{
cursor: pointer;
opacity: 1;
}
.next{
position: absolute;
left: 90.0%;
padding: 10px 5px 15px 10px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.prev{
position: absolute;
left: 4.2%;
padding: 10px 10px 15px 5px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.next1, .prev1{
color: #fff;
position: absolute;
background: rgba(0,0,0, .6);
top: 51.7%;
z-index: 1;
font-size: 40px;
margin-top: -.75em;
opacity: .4;
}
.next1:hover, .prev1:hover{
cursor: pointer;
opacity: 1;
}
.next1{
position: absolute;
right:0;
padding: 10px 5px 15px 10px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.prev1{
position: absolute;
left: 0;
padding: 10px 10px 15px 5px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.cadre_diaporama{
position: absolute;
display:block;
margin-left:-0.35%;
margin-right:auto;
margin-top:-1.1%;
margin-bottom:auto;
width:105%;
height:105%;
max-width:679px;
max-height:514px;
}
.legende_cadre_diaporama {
position: absolute;
display:inline-block;
width:7%;
height:2.3%;
top:95.4%;
left:46.2%;
text-align:center;
font-weight: bold;
color:white;
font-size:11px;
background-color:rgba(255,0,0,0);
}
.prov-slideshow{
position: relative;
margin-left:auto;
margin-right:auto;
margin-top:auto;
margin-bottom:auto;
background-repeat:repeat;
top:0px;
width:auto;
height:auto;
max-height:500px;
max-width:679px;
padding:7px;
filter:grayscale(100%);
box-shadow: 0px 0px 8px 4px rgba(0,0,0,0.5);
overflow: hidden;
}
.webp .prov-slideshow{
background:url(../img/BB.webp);
}
.notwebp .prov-slideshow{
background:url(../img/BB.jpg);
}
.conteneur_album {
line-height:500px;
border-width:2px;
}
.album{
position: absolute;
display:inline-block;
font-family:"Arial Black", Gadget, sans-serif;
line-height:30px;
font-size: 20px;
margin-left:15%;
margin-right:15%;
height:100%;
vertical-align: middle;
color: rgba(0,0,0,1);
background: rgba(255,0,0,0);
opacity: 0;
padding:5%;
overflow: hidden;
}
.show1{
opacity: 1;
position: static; 
font-family: "Arial Black";
}
.chimpanzes {
animation:shake 0.2s;
animation-iteration-count:40;
animation-delay:2s;
}
@keyframes shake {
0% {transform:translate(0px,0px);}
100% {transform:translate(0px,5px);}
}	
.alignement_haut {
vertical-align:top;	
}
.alignement_droite {
text-align:right;	
}
.soulign {
text-decoration:underline;	
}