@charset "UTF-8"; /* Reset et importation des mixins CSS */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } table { border-collapse: collapse; border-spacing: 0; } input, textarea { outline-style: none; border-color: transparent; box-shadow: none !important; } /* @include animate(animation-name, animation-duration, animation-delay); */ /* voir le projet et instruction: https://github.com/simko-io/animated.sass/blob/master/README.md */ @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); -ms-transform: translateX(-30px); transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } /* pour le personnage sur la page accueil */ @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } } @keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); -ms-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); -ms-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } } /* pour le personnage sur la page accueil */ @-webkit-keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); -ms-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } /* pour le personnage sur la page accueil */ @-webkit-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } /* pour le personnage sur la page accueil */ /* Largeur, espace entre les blocs et nombre de blocs */ /* importer les éléments du style */ /* mise en forme de la police à utliser */ @font-face { font-family: 'web_symbolsregular'; src: url("fonts/websymbols-regular-webfont.eot"); src: url("fonts/websymbols-regular-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/websymbols-regular-webfont.woff") format("woff"), url("fonts/websymbols-regular-webfont.ttf") format("truetype"), url("fonts/websymbols-regular-webfont.svg#web_symbolsregular") format("svg"); font-weight: normal; font-style: normal; } span.symbol { font-family: 'web_symbolsregular'; font-weight: normal; font-style: normal; margin: 0 10px; } a { font-size: 17px; line-height: 20.4px; text-decoration: none; color: #7b7972; } h1, h1 > a { font-size: 47.6px; line-height: 68px; font-weight: 700; } h2, h2 > a { font-size: 40.8px; line-height: 57.8px; color: #4f4e4c; font-weight: 700; } h3 { font-size: 34px; line-height: 47.6px; font-weight: 400; } h4 { font-size: 30.6px; line-height: 44.2px; font-weight: 400; } h5 { font-size: 27.2px; line-height: 40.8px; font-weight: 400; } h6 { font-size: 23.8px; line-height: 37.4px; font-weight: 400; } p { font-size: 17px; line-height: 20.4px; margin-bottom: 10px; } ul, li, td { font-size: 17px; line-height: 25.5px; } ul ol { list-style-type: value; } blockquote { border-left: 10px solid #4f4e4c; margin: 1.5em 10px; padding: 0.5em 10px; quotes: "201C" "201D" "2018" "2019"; } blockquote p { display: inline; font-size: 17px; } blockquote:before { content: open-quote; font-size: 20.4px; line-height: 23.8px; margin-right: 0.25em; vertical-align: -0.4em; } pre { background: transparent; padding: 5px; border-left: 5px solid #4f4e4c; margin-bottom: 15px; } table { margin-bottom: 15px; } th { border-bottom: 2px solid #000; padding: 10px 8px; } td { border-bottom: 1px solid #ccc; padding: 6px 8px; } /* style du template */ body { font-family: "Oswald", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 17px; color: #4f4e4c; font-weight: 300; background-color: #ebede3; } /* header du site avec la navigation */ header { min-height: 70px; } /* mise en page du contenu du site */ .blog { background-color: #fff; border-radius: 3px; padding: 10px 20px; margin-bottom: 35px; -webkit-box-shadow: 0px 1px 4px 1px #b4b6a9; -moz-box-shadow: 0px 1px 4px 1px #b4b6a9; box-shadow: 0px 1px 4px 1px #b4b6a9; visibility: hidden; } .blog .titre { color: #3d3b36; margin-bottom: 10px; } .page { background-color: #fff; border-radius: 3px; padding: 10px 20px; margin-bottom: 35px; -webkit-box-shadow: 0px 1px 4px 1px #b4b6a9; -moz-box-shadow: 0px 1px 4px 1px #b4b6a9; box-shadow: 0px 1px 4px 1px #b4b6a9; -webkit-animation-duration: 0.6s; -moz-animation-duration: 0.6s; -o-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 300ms; -moz-animation-delay: 300ms; -o-animation-delay: 300ms; animation-delay: 300ms; -webkit-animation-name: bounceInUp; -moz-animation-name: bounceInUp; -o-animation-name: bounceInUp; animation-name: bounceInUp; } .blog:first-child { visibility: visible; -webkit-animation-duration: 0.6s; -moz-animation-duration: 0.6s; -o-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0ms; -moz-animation-delay: 0ms; -o-animation-delay: 0ms; animation-delay: 0ms; -webkit-animation-name: flipInX; -moz-animation-name: flipInX; -o-animation-name: flipInX; animation-name: flipInX; } .effet { visibility: visible; -webkit-animation-duration: 0.6s; -moz-animation-duration: 0.6s; -o-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0ms; -moz-animation-delay: 0ms; -o-animation-delay: 0ms; animation-delay: 0ms; -webkit-animation-name: flipInX; -moz-animation-name: flipInX; -o-animation-name: flipInX; animation-name: flipInX; } aside { -webkit-animation-duration: 0.6s; -moz-animation-duration: 0.6s; -o-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 300ms; -moz-animation-delay: 300ms; -o-animation-delay: 300ms; animation-delay: 300ms; -webkit-animation-name: bounceInRight; -moz-animation-name: bounceInRight; -o-animation-name: bounceInRight; animation-name: bounceInRight; } .bounce { background-color: #fff; border-radius: 3px; padding: 10px 20px; margin-bottom: 35px; -webkit-box-shadow: 0px 1px 4px 1px #b4b6a9; -moz-box-shadow: 0px 1px 4px 1px #b4b6a9; box-shadow: 0px 1px 4px 1px #b4b6a9; -webkit-animation-duration: 0.6s; -moz-animation-duration: 0.6s; -o-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 300ms; -moz-animation-delay: 300ms; -o-animation-delay: 300ms; animation-delay: 300ms; -webkit-animation-name: bounceInLeft; -moz-animation-name: bounceInLeft; -o-animation-name: bounceInLeft; animation-name: bounceInLeft; } .info { line-height: 1; display: inline-block; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; background: #4f4e4c; border: 1px solid #4f4e4c; color: #fff; font-size: 18.7px; padding: 10px 15px; } /* bloc header */ header { background-color: #4f4e4c; color: #fff; padding-top: 10px; -webkit-box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.2); border-bottom: 3px solid #f5f6ef; border-top: 3px solid #f5f6ef; margin-bottom: 60px; } header a { color: inherit; } header .logo, header .logo a { line-height: 60px; font-weight: 300; font-size: 51px; letter-spacing: -1px; margin: 0; padding: 0; } header .logo:before { content: 'Q'; font-family: 'web_symbolsregular'; font-weight: normal; font-style: normal; margin: 0 20px 0 0; font-size: 68px; } header .nav { position: relative; margin: 20px 0; } header .nav ul li.navigation { display: none; } header .nav ul { margin: 0; padding: 0; } header .nav li { margin: 0 5px 10px 0; padding: 0; list-style: none; display: inline-block; } header .nav a { font-size: 17px; padding: 3px 12px; text-decoration: none; line-height: 100%; font-weight: 300; text-transform: uppercase; } /* style de la sidebar*/ aside .titre { font-weight: 300; font-size: 30.6px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); } aside widget ul { padding: 0; } aside .widget li { list-style: none; margin-left: -30px; padding: 0; } aside .widget a { color: inherit; } aside .widget { margin-bottom: 30px; } aside .symbol { color: #96948e; font-size: 32.3px; } /* style des formualires et des boutons */ label { display: inline-block; width: 100%; color: #4f4e4c; } input[type='text'], textarea { background-color: #fff; background-image: none; border: 1px solid #4f4e4c; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; color: #555; font-size: 15px; padding: 6px 12px !important; width: 60% !important; height: 36px !important; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; } input[type='text']:hover, textarea:hover { border: 1px solid #000; } textarea { height: 150px !important; resize: none; } input.capcha { width: 60px; } .bt, input[type='submit'] { margin: 15px 0; line-height: 1; -webkit-appearance: none; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; background: #4f4e4c; border: 1px solid #4f4e4c; color: #fff; font-size: 18.7px; padding: 10px 15px; text-decoration: none; } .bt:hover, input[type='submit']:hover { background: none; color: #4f4e4c; cursor: pointer; border: 1px solid #4f4e4c; } input[type='reset'] { margin: 15px 0; -webkit-appearance: none; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; background: #7b7972; border: 1px solid #7b7972; color: #fff; font-size: 18.7px; padding: 10px 25px; text-decoration: none; } input[type='reset']:hover { background: none; color: #4f4e4c; cursor: pointer; border: 1px solid #7b7972; } form p { margin: 10px 0 0 0; } #id_rep { width: 20% !important; } .info_comment { font-weight: 400; margin-top: 20px; } .content_com { font-style: italic; color: #7b7972; } /* style du footer */ footer { padding: 30px 0; } /* Valeurs par defaut */ /* Début mise en page */ .wrap { width: 80%; margin: 0 auto; } .wrap:after { content: ""; display: table; clear: both; } .clear:before, .clear:after { content: " "; display: table; } .clear:after { clear: both; } .clear { *zoom: 1; } .hidden { visibility: hidden; } .right { float: right; } .left { float: left; } /* Ajout des options sur tous les blocs */ .bloc-1, .bloc-2, .bloc-3, .bloc-4, .bloc-5, .bloc-6, .bloc-7, .bloc-8, .bloc-9, .bloc-10, .bloc-11, .bloc-12 { float: left; position: relative; min-height: 1px; padding: 0 10px; } .bloc-1 img, .bloc-2 img, .bloc-3 img, .bloc-4 img, .bloc-5 img, .bloc-6 img, .bloc-7 img, .bloc-8 img, .bloc-9 img, .bloc-10 img, .bloc-11 img, .bloc-12 img { max-width: 100%; } /* Création des blocs */ .bloc-1 { width: 8.33333%; } .bloc-2 { width: 16.66667%; } .bloc-3 { width: 25%; } .bloc-4 { width: 33.33333%; } .bloc-5 { width: 41.66667%; } .bloc-6 { width: 50%; } .bloc-7 { width: 58.33333%; } .bloc-8 { width: 66.66667%; } .bloc-9 { width: 75%; } .bloc-10 { width: 83.33333%; } .bloc-11 { width: 91.66667%; } .bloc-12 { width: 100%; } /* responsive */ @media handheld, only screen and (max-width: 1160px) { .wrap { width: 100%; } } @media handheld, only screen and (max-width: 768px) { .wrap { width: 100%; min-width: 0; margin: 0; padding: 0; } [class*='bloc-'] { width: auto; float: none; margin: 0; padding-top: 10px; } /* images */ img { max-width: 100%; height: auto; } /* navigation */ header .nav { position: relative; min-height: 40px; } header .nav ul { width: 60%; padding: 5px 0; position: absolute; top: 0; left: 0; z-index: 10; border: solid 1px #aaa; background: white url(img/icon-menu.png) no-repeat 10px 14px; border-radius: 5px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } header .nav li { display: none; /* hide all

• items */ margin: 0; } header .nav ul li.navigation { display: block; } header .nav a { display: block; padding: 5px 5px 5px 32px; text-align: left; color: #7b7972; } header .nav .navigation a { background: none; } header .nav ul:hover { background-image: none; } header .nav ul:hover li { display: block; margin: 0 0 5px; } header .nav ul:hover .active { background: url(img/icon-check.png) no-repeat 10px 10px; } /* formulaire */ input[type='text'], textarea, input.capcha, input[type='submit'] { width: 100% !important; } } /* suplement 2022*/ /* menu déroulant */ .menu .sub-menu { position: absolute; display: none; } .static.group { cursor: pointer; } .menu:hover .sub-menu , .menu:hover .sub-menu a{ display: block; z-index:1; text-align: start; padding:0.35em; border-radius:0.15em; } .menu:hover .sub-menu a{ background:#E19251 } .menu:hover .sub-menu a:not(:hover){ background:#fffd; color:#9C9992 } @media handheld, only screen and (max-width: 768px) { .menu:hover .sub-menu { display:flex; flex-direction:column; flex-wrap:wrap; gap:0.15em; } .menu:hover .sub-menu { margin:0 0 0 4em; padding:0.25em; height:100%; width:calc(100% - 4em); min-width:50%; max-height:100%; overflow:auto; text-align: start; background:#9c9992dd; box-sizing: border-box } .static.group { color: #4F4E4C; } .static.group:hover { font-weight: bold } } /* extra thumbnail */ a img.art_thumbnail { float: inline-start; width: clamp(120px,35vw,250px); margin-inline-end: 1em; } .blog, .blog pre { overflow: hidden; }