/* d'après le template "November" - http://www.templatemo.com/tm-473-november */ /*************************************************************************************************************************************************** CSS RESET ***************************************************************************************************************************************************/ * { margin:0 ; padding:0 ; box-sizing:border-box ; -webkit-font-smoothing:antialiased ; } html, body, div, span, h1, h2, h3, h4, h5, h6, p, pre, q, a, address, em, font, s, strong, sub, sup, tt, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, span, table, caption, tr, th, td { padding:0 ; margin:0 ; border:0 ; outline:0 ; vertical-align:baseline ; font-family:Calibri,Arial,sans serif ; } article, aside, details, figcaption, figure, footer, header, main, menu, nav, section { display:block ; } @font-face { font-family:'Oswald' ; src:url('../_fonts/Oswald.ttf') ; } ul, ol { margin:0 0 10px 0 ; } *:not(#recap) li { font-size:13px ; margin:5px 0 10px 0 ; } table { border-collapse:separate ; border-spacing:0 ; } caption, th, td { font-weight:normal ; text-align:left ; } h1, h1 a { font-size:36px ; margin:5px 0 15px 0 ; clear:both ; font-weight:lighter ; color:#FFFFFF ; } h2 { font-size:36px ; margin:5px 0 15px 0 ; clear:both ; font-weight:lighter ; color:#FF9966 ; font-family:'Oswald' ; } #recap h2 { font-size:36px ; margin:5px 0 15px 0 ; clear:both ; font-weight:lighter ; color:#FF9966 ; font-family:'Oswald' ; } h3 { font-size:24px ; margin:5px 0 15px 0 ; clear:both ; font-weight:lighter ; } h4 { font-size:20px ; margin:5px 0 15px 0 ; clear:both ; font-weight:lighter ; } h5 { font-size:16px ; margin:5px 0 15px 0 ; clear:both ; font-weight:lighter ; } h6 { font-size:14px ; margin:5px 0 15px 0 ; clear:both ; font-weight:lighter ; } p { font-size:13px ; margin:5px 0 15px 0 ; } #recap p { font-size:13px ; margin:5px 0 15px 0 ; } strong { font-weight:700 ; } img { display:block ; border:0 ; height:auto ; max-width:100% ; vertical-align:middle ; -ms-interpolation-mode:bicubic ; } figure { margin:0 ; } a { text-decoration:none ; outline:none ; color:#FF9966 ; } input { text-decoration:none ; outline:none ; } textarea { font-family:Calibri,Arial,sans serif ; font-size:14px ; color:#333333 ; text-align:justify ; } input:focus, textarea:focus { background:#FFFFFF ; border:2px solid #000000 ; color:#000000 ; } :required { } :-ms-input-placeholder, :-moz-placeholder, ::-moz-placeholder, ::-webkit-input-placeholder { color:#FF0000 ; } .hide { display:none ; } .clear { clear:both ; height:0 ; overflow:hidden ; } /*************************************************************************************************************************************************** BODY et STRUCTURE ***************************************************************************************************************************************************/ body { background:#FFFFFF ; } #ZoneAffichage { display:block ; width:100% ; position:relative ; min-height:100% ; } #BlocPrincipal { display:block ; width:100% ; margin:0 auto ; } header { height:105px ; position:fixed ; top:0 ; left:0 ; width:100% ; background:rgba(0, 63, 91, 0.5) ; z-index:10 ; } header .centrage { max-width:1100px ; margin:auto ; } header #site-logo { padding:30px 0 0 0 ; width:220px ; float:left ; transition:all 0.3s ; } header #site-logo h1 { margin:0 ; font-weight:800 ; text-shadow:rgb(0, 0, 0) 0 2px 5px ; transition:all 0.7s ease ; letter-spacing:3px ; } header.smaller { height:60px ; padding:0 ; transition:all 0.3s ; background:rgba(0, 0, 0, 0.75) ; } header.smaller #site-logo { padding:13px 0 0 0 ; } header.smaller #site-logo h1 { line-height:30px ; } header.smaller #site-logo h1 a { font-size:30px ; } #MenuNav { float:right ; width:68.18% ; margin-right:11px ; z-index:150 } #MenuNav ul { list-style:none ; margin:0 ; float:right ; } #MenuNav li { float:left ; padding:0 ; margin:0 ; height:105px ; position:relative ; transition:all 0.3s ease ; } #MenuNav li a { padding:42px 20px 36px 20px ; font-size:16px ; color:#FFFFFF ; font-weight:400 ; text-decoration:none ; display:block ; transition:all 0.3s ease ; -webkit-transition:all 0.3s ease ; } #MenuNav li span { border-bottom:solid 5px #FF9966 ; width:100% ; height:100% ; display:block ; position:absolute ; top:0 ; left:0 ; z-index:-10 ; opacity:0 ; background:#006699 ; transition:all 0.5s ease ; } #MenuNav li:hover span, #MenuNav li.active span { opacity:1 ; } header.smaller #MenuNav li a { padding:16px 20px ; } header.smaller #MenuNav li { height:60px ; } .mobile { display:none ; } .mobile .fa { padding:12px 14px ; font-size:31px ; width:55px ; height:55px ; color:#FFFFFF ; cursor:pointer ; background:#FF9966 ; } .mobile .fa:hover { background:#E3860E ; } .mobile.closed .fa-bars { display:none ; } .mobile .fa-times { padding:11px 15px ; width:55px ; height:55px ; display:none ; font-size:31px ; } .mobile.closed .fa-times { display:block ; } /*************************************************************************************************************************************************** BANDEAU ***************************************************************************************************************************************************/ #Bandeau { width:100% ; background:url(../_img/fond_bandeau.jpg) top center no-repeat ; height:687px ; position:relative ; background-size:cover ; } #Bandeau .bannerside { width:100% ; position:absolute ; top:256px ; left:0 ; } #Bandeau .centrage { max-width:1100px ; margin:auto ; } #Bandeau .gauche { padding:60px 0 0 0 ; width:28.90% ; float:left ; } #Bandeau .gauche h3 { color:#FF9966 ; font-size:42px ; font-weight:800 ; line-height:40px ; margin:0 ; text-shadow:#000000 2px 2px 5px ; letter-spacing:2px ; } #Bandeau .gauche h3 span { color:#FFFFFF ; font-size:24px ; font-weight:600 ; line-height:28px ; display:block ; text-shadow:#000000 2px 2px 4px ; } #Bandeau .gauche p { color:#FFFFFF ; font-size:20px ; font-weight:600 ; line-height:24px ; font-style:italic ; padding:16px 0 0 0 ; margin:0 ; word-spacing:2px ; text-shadow:#000000 1px 1px 3px ; } #Bandeau .gauche p:last-child { padding-left:20px ; } #Bandeau .gauche a { color:#FFFFFF ; font-size:14px ; font-weight:600 ; padding:11px 16px ; text-decoration:none ; display:inline-block ; border:solid 1px #B0BDC8 ; background:rgba(64,93,118,0.75) ; transition:all 0.3s ease ; } #Bandeau .gauche a:hover { background:#FF9966 ; color:#FFFFFF ; border:solid 1px #FF9966 ; } #Bandeau .droite { width:68.36% ; float:right ; position:relative ; } #Bandeau .droite ul { list-style:none ; margin:0 ; } #Bandeau .droite li { padding:0 ; margin:0 ; float:none!important ; } #Bandeau .droite #carrousel { width:100% ; float:right ; position:relative ; z-index:1 ; } #Bandeau .droite .carrousel .text { padding:25px 47px 21px 30px ; position:absolute ; bottom:0 ; left:0 ; width:100% ; background:linear-gradient(to bottom right, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.8) 70%, rgba(0,0,0,.8) 100%) ; } #Bandeau .droite .carrousel .text .icon { width:38% ; float:left ; } #Bandeau .droite .carrousel .text ul { list-style:none ; margin:0 ; } #Bandeau .droite .carrousel .text li { float:left!important ; padding:0 30px 0 10px ; margin:0 ; } #Bandeau .droite .carrousel .text li a { display:block ; font-size:14px ; color:#FFFFFF ; text-decoration:none ; font-weight:400 ; transition:all 0.3s ease ; } #Bandeau .droite .carrousel .text li:last-child { padding:0 ; } #Bandeau .droite .carrousel .text li:hover a { color:#FF9966!important ; } #Bandeau .droite .carrousel .text li a .fa { color:#FFFFFF ; padding:13px ; margin-right:10px ; border-radius:50px ; border:solid 2px #FFFFFF ; transition:all 0.3s ease ; } #Bandeau .droite .carrousel .text li:hover a .fa { color:#FFFFFF ; background:#FF9966 ; border:solid 2px #FF9966 ; } #Bandeau .droite .carrousel .text li:last-child { padding-right:0 ; padding-left:0 ; } #Bandeau .droite .carrousel .text .Lorem { float:right ; width:75% ; } #Bandeau .droite .carrousel .text .Lorem p { color:#FFFFFF ; padding-top:5px ; font-size:18px ; margin:0 ; font-weight:400 ; text-align:right ; line-height:20px ; } #Bandeau .droite .carrousel .text .Lorem p a { color:#FF9966 ; font-size:14px ; text-align:right ; display:block ; text-transform:none ; opacity:.75 ; } #Bandeau .droite .btn_prec { width:42px ; height:42px ; display:block ; text-indent:-9999px ; background:url(../_img/fleche_prec.png) no-repeat ; position:absolute ; top:213px ; left:49px ; z-index:1 ; opacity:0.5 ; transition:opacity 0.3s ease ; } #Bandeau .droite .btn_suiv { width:42px ; height:42px ; display:block ; text-indent:-9999px ; background:url(../_img/fleche_suiv.png) no-repeat ; position:absolute ; top:213px ; right:47px ; z-index:1 ; opacity:0.5 ; transition:opacity 0.3s ease ; } #Bandeau .droite .btn_prec:hover, #Bandeau .droite .btn_suiv:hover { opacity:1 ; } #Bandeau .droite .shadow { position:absolute ; bottom:-3px ; left:-25px ; max-width:none ; } .bgcolor { height:74px ; width:100% ; background:#FFFFFF ; background:-webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(223,223,223,1))) ; background:linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(223,223,223,1) 100%) ; filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#DFDFDF', GradientType=0 ) ; } #Contenu { overflow:hidden ; width:100% ; } /*************************************************************************************************************************************************** PRÉSENTATION ***************************************************************************************************************************************************/ #Presentation { padding:100px 0 ; width:100% ; overflow:hidden ; } #Presentation .centrage { max-width:1100px ; margin:auto ; overflow:hidden ; text-align:center ; } #Presentation h2 { font-size:56px ; color:#FF9966 ; font-family:'Oswald',sans-serif ; font-weight:400 ; margin:0 0 50px 0 ; } #Presentation p { font-size:20px ; color:#000000 ; margin:0 0 20px 0 ; line-height:30px ; } /*************************************************************************************************************************************************** PUBLICATIONS ***************************************************************************************************************************************************/ #Publications { padding:100px 0 ; width:100% ; overflow:hidden ; background:url(../_img/fond_publi.jpg) top center no-repeat ; background-size:cover ; } #Publications .centrage { max-width:1100px ; margin:auto ; overflow:hidden ; text-align:center ; } #Publications h2 { font-size:56px ; color:#FF9966 ; font-family:'Oswald',sans-serif ; font-weight:400 ; margin:0 0 50px 0 ; } #Publications p { font-size:20px ; color:#FFFFFF ; margin:0 0 20px 0; line-height:30px ; } /* #Publications .Line { border:solid 1px #FF9966 ; height:2px ; width:252px ; margin:auto ; } */ #Publications .Publi { padding:50px 0 30px 0 ; width:100% ; overflow:hidden ; } #Publications .Publi ul { list-style:none ; margin:0 ; padding:0 ; } #Publications .Publi li { display:inline-block ; width:245px ; margin:0 20px 50px 20px ; padding:0 ; text-align:center ; } #Publications .Publi li a { color:#FFFFFF ; text-decoration:none ; } #Publications .Publi li a figure img { box-shadow:2px 4px 7px rgba(0,0,0,0.75) ; } #Publications .Publi li a figure h4 { margin:10px 0 0 0 ; padding:0 ; text-decoration:none ; font-size:16px ; font-weight:600 ; letter-spacing:1px ; } #Publications .Publi li a:hover figure h4 { color:#FFFFFF ; text-decoration:none ; transition:text-shadow 0.5s ; text-shadow:0 0 5px rgba(0,0,0,1), 0 0 5px rgba(0,0,0,1) ; } #Publications .Publi li a figure h5 { padding:0 ; text-decoration:none ; font-size:14px ; font-weight:500 ; letter-spacing:.5px ; text-transform:uppercase ; } #Publications .Publi li a:hover figure h5 { color:#FFFFFF ; text-decoration:none ; transition:text-shadow 0.5s ; text-shadow:0 0 5px rgba(0,0,0,1), 0 0 5px rgba(0,0,0,1) ; } /*************************************************************************************************************************************************** REJOINDRE ***************************************************************************************************************************************************/ #Rejoindre { padding:100px 0 ; width:100% ; overflow:hidden ; } #Rejoindre .centrage { max-width:1100px ; margin:auto ; overflow:hidden ; text-align:center ; } #Rejoindre h2 { font-size:56px ; color:#FF9966 ; font-family:'Oswald',sans-serif ; font-weight:400 ; margin:0 0 30px 0 ; line-height:60px ; } #Rejoindre p { font-size:20px ; color:#000000 ; margin:0 0 20px 0 ; line-height:30px ; } #Rejoindre h3 { font-size:36px ; margin:0 ; line-height:150px ; } #Rejoindre h3 strong { display:inline-block ; padding:0 30px ; } /*************************************************************************************************************************************************** CONTACT ***************************************************************************************************************************************************/ #Contact { width:100% ; overflow:hidden ; background:url(../_img/fond_contact.jpg) top center no-repeat ; background-size:cover ; } #Contact .Mid { padding:100px 0 ; max-width:1100px ; margin:auto ; overflow:hidden ; } #Contact .gauche { width:48.2% ; float:left ; } #Contact .gauche fieldset { padding:0 ; margin:0 ; } #Contact .gauche p { padding:0 ; margin:0 0 25px 0 ; } #Contact .gauche input.field { padding:18px 20px 17px 20px ; font-size:14px ; color:#000000 ; font-weight:400 ; border:0 ; width:100% ; box-shadow:0 2px 6px 0 #242424 ; -webkit-box-shadow:0 2px 6px 0 #242424 ; -moz-box-shadow:0 2px 6px 0 #242424 ; -o-box-shadow:0 2px 6px 0 #242424 ; border-radius:0 ; } #Contact .gauche input:focus { outline:none ; } #Contact .gauche textarea { padding:18px 20px 17px 20px ; font-size:18px ; color:#000000 ; font-weight:400 ; border:0 ; width:100% ; height:156px ; resize:none ; box-shadow:0 2px 6px 0 #242424 ; -webkit-box-shadow:0 2px 6px 0 #242424 ; -moz-box-shadow:0 2px 6px 0 #242424 ; -o-box-shadow:0 2px 6px 0 #242424 ; border-radius:0 ; } #Contact .gauche textarea:focus { outline:none ; } input[type="checkbox"] { display:none ; } input[type="checkbox"] + label { display:block ; position:relative ; padding-left:35px ; margin-bottom:10px ; font-size:18px ; color:#ddd ; cursor:pointer ; -webkit-user-select:none ; -moz-user-select:none ; -ms-user-select:none ; text-align:justify ; } input[type="checkbox"] + label:last-child { margin-bottom:0 ; } input[type="checkbox"] + label:before { content:'' ; display:block ; width:20px ; height:20px ; border:2px solid #FF9966 ; position:absolute ; left:0 ; top:0 ; -webkit-transition:all .12s, border-color .08s ; transition:all .12s, border-color .08s ; } input[type="checkbox"]:checked + label:before { width:10px ; top:-5px ; left:5px ; border-radius:5px ; opacity:1 ; border:3px solid #33FFFF ; border-top-color:transparent ; border-left-color:transparent ; -webkit-transform:rotate(405deg) ; transform:rotate(405deg) ; } #Contact .gauche .button { padding:16px 0 17px 0 ; margin-top:-3px ; font-size:14px ; color:#FFFFFF ; font-weight:700 ; text-align:center ; background:#FF9966 ; border:0 ; width:100% ; cursor:pointer ; box-shadow:0 2px 6px 0 #242424 ; -webkit-box-shadow:0 2px 6px 0 #242424 ; -moz-box-shadow:0 2px 6px 0 #242424 ; -o-box-shadow:0 2px 6px 0 #242424 ; border-radius:0 ; transition:all 0.3s ease ; } #Contact .gauche .button:hover { background:#2d2d2d ; color:#FFFFFF ; } #Contact .droite { padding-top:12px ; width:48.18% ; float:right ; } #Contact .droite h3 { padding-bottom:44px ; font-size:46px ; color:#FF9966 ; font-family:'Oswald' ; font-weight:400 ; margin:0 ; line-height:46px ; } #Contact .droite address { padding:0 0 27px 65px ; margin-left:3px ; color:#FFFFFF ; } #Contact .droite address.email { margin-left:4px ; background:url(../_img/icon_mail.png) left 0 no-repeat ; letter-spacing:3px ; } #Contact .droite address.email a { text-decoration:none ; color:#FFFFFF ; font-size:18px ; font-weight:400 ; font-style:normal ; } #Contact .droite address.email a:hover { color:#FF9966 ; } /*************************************************************************************************************************************************** FOOTER ***************************************************************************************************************************************************/ footer { overflow:hidden ; width:100% ; padding:0 auto ; text-align:center ; background:rgba(0, 0, 0, 0.6) ; } footer div { max-width:1100px ; padding:0 ; margin:25px auto ; } footer p { display:inline-block ; padding:0 ; margin:0 ; } footer p:nth-child(1) { width:195px ; text-align:left ; font-size:12px ; color:#CCCCCC ; padding-left:5px ; } footer p:nth-child(2) { width:700px ; text-align:center ; font-size:13px ; color:#FFFFFF ; } footer p:nth-child(3) { width:195px ; text-align:right ; font-size:11px ; color:#666666 ; padding-right:5px ; } footer p:nth-child(3):hover { color:#CCCCCC ; } /*************************************************************************************************************************************************** ACCUSÉ DE RÉCEPTION ***************************************************************************************************************************************************/ #voile { position:fixed ; top:0 ; left:0 ; width:100% ; height:100% ; background:rgba(0,0,0,.7) ; margin:0 ; z-index:200 ; } #resultat { position:fixed ; top:50% ; left:50% ; width:600px ; height:500px ; background:#FFFFFF ; margin:-250px 0 0 -300px ; box-shadow:5px 5px 10px #FF6699 ; } #resultat #ferme_pop { position:absolute ; top:0 ; right:0 ; display:block ; padding:5px 10px ; background:#CC0000 ; color:#FFFFFF ; font-weight:700 ; } #recap { height:420px ; width:520px ; margin:0 ; padding:20px 40px 40px 40px ; } #recap a { color:#000000 ; } #recap a::before { content:'\2709' ; margin-right:10px ; } #recap h2 { margin:0 ; padding:0 ; width:520px ; height:52px ; font-size:35px ; color:#FF9966 ; font-family:'Oswald' ; font-weight:400 ; } #recap p { margin:0 ; padding:20px 0 10px 0 ; width:520px ; font-size:18px ; font-weight:500 ; text-align:justify ; } #recap p span { font-size:16px ; font-weight:400 ; position:absolute ; right:40px ; } #recap ul { margin:0 ; width:520px ; list-style-type:none ; } #recap li { margin:0 ; padding:10px 0 0 0 ; font-size:18px ; font-weight:500 ; text-align:justify ; } #recap li::before { content:'\2713' ; color:#00CC00 ; font-weight:950 ; display:inline-block ; width:10px ; margin-right:15px ; } #recap q { width:520px ; margin:0 ; padding:10px 20px ; text-align:justify ; display:block ; font-size:18px ; font-weight:400 ; font-style:italic ; color:#006699 ; overflow:auto ; background:#EFEFEF ; quotes:'« ' ' »' '\201C' '201D' ; } /*************************************************************************************************************************************************** LOADER ***************************************************************************************************************************************************/ #loader-wrapper { position:fixed ; top:0 ; left:0 ; width:100% ; height:100% ; z-index:100 ; } #loader { position:relative ; display:block ; top:50% ; left:50% ; width:200px ; height:220px ; z-index:200 ; margin:-110px 0 0 -100px ; background:url('../_photos/blason.png') no-repeat ; filter:drop-shadow(0 0 40px #FFFFFF) ; } #loader-wrapper .loader-section { position:fixed ; top:0 ; width:100% ; height:100% ; z-index:100 ; transform:translateX(0) ; -webkit-transform:translateX(0) ; } #loader-wrapper .loader-section.section-left { left:0 ; background:linear-gradient(to right, #000000 50%, rgba(0,0,0,0) 60%) ; } #loader-wrapper .loader-section.section-right { right:0 ; background:linear-gradient(to left, #000000 50%, rgba(0,0,0,0) 60%) ; } .loaded #loader-wrapper .loader-section.section-left { transform:translateX(-100%) ; -webkit-transform:translateX(-100%) ; transition:all 3s 1s ; } .loaded #loader-wrapper .loader-section.section-right { transform:translateX(100%) ; -webkit-transform:translateX(100%) ; transition:all 3s 1s ; } .loaded #loader { opacity:0 ; transition:all 3s ease-out ; } .loaded #loader-wrapper { visibility:hidden ; transition:all 2s 0s ease-out ; } .no-js #loader-wrapper { display:none ; }