Untitled diff
512 lines
/*--------------------------------------
/* --------------------------------------
design.css
design.css
Contient les conteneurs de mise en page.
Contient les conteneurs de mise en page.
Le design.css permet de mettre en forme votre site web avec le design de votre choix
Le design.css permet de mettre en forme votre site web avec le design de votre choix
--------------------------------------*/
-------------------------------------- */
/* -- Elements HTML generiques specifique au theme -- */
/* -- Elements HTML generiques specifique au theme -- */
/* -------------------------------------------------- */
/* -------------------------------------------------- */
html {
html {
font-size: 100%;
font-size: 100%;
font-size: 10px;
font-size: 10px;
}
}
body {
body {
position: relative;
position: relative;
height: auto;
height: auto;
min-height: 100%;
min-height: 100%;
font-size: 1.3em;
font-size: 1.456em;
font-family: 'Open Sans', sans-serif;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
line-height: 1.6;
}
}
@media (max-width: 768px) {
@media (min-width: 769px) {
body {
body {
font-size: 1.4em;
font-size: 1.618em;
}
}
}
}
/* -- Gestion de la taille du site -- */
/* -- Gestion de la taille du site -- */
/* ---------------------------------- */
/* ---------------------------------- */
#header,
#header,
#global,
#global,
#footer {
#footer {
width: 100%;
width: 100%;
padding: 0.809em;
}
}
@media (min-width: 768px) {
@media (min-width: 769px) {
#header,
#header {
padding: 1.618em 0;
}
#top-header,
#sub-header,
#global,
#global,
#footer {
#footer {
max-width: 1024px;
margin: auto;
padding: 1.618em 0;
}
#top-header,
#sub-header,
#global,
#footer {
width: 768px;
}
}
}
}
/* -- Gestion des couleurs principales -- */
@media (min-width: 1025px) { #top-header, #sub-header, #global, #footer { width: 1024px; } }
/* -------------------------------------- */
@media (min-width: 1367px) { #top-header, #sub-header, #global, #footer { width: 1280px; } }
/*
Blue => #021B34; #1E5083; #366493; #517BA6; #81A4C8;
Green => #003524; #168561; #2F9674; #4BAA8B; #7CCAB0;
red => #490011; #B81F43; #CF4162; #EA6886; #F294AA;
Orange => #511B00; #C95A21; #E27B47; #FFA172; #FFBF9C;
Yellow => #513000; #C98621; #E2A447; #FFC672; #FFD79C;
Purple => #080437; #2E278B; #47409D; #645CB1; #8F8ACF;
*/
body { background-color: #F1F1F1; }
#header, #global { background-color: #FAFAFA; }
#sub-header { background-color: #366493; }
#footer { background-color: #81A4C8; }
#top-header, #global { border-color: #E1E1E1; }
#footer { border-color: #366493; }
.footer-infos { border-color: #366493; }
body { color: #021B34; }
#site-name { color: #366493; }
#site-slogan { color: #81A4C8; }
#sub-header,
#sub-header a { color: #FFFFFF; }
.footer-infos span { color: #366493; }
.footer-infos span a { color: #021B34; }
/* -- En-tete de page - Header -- */
/* -- En-tete de page - Header -- */
/* ------------------------------ */
/* ------------------------------ */
#header {
#header {
margin: auto;
}
/* --- Partie superieure du header --- */
#top-header {
position: relative;
position: relative;
display: flex;
display: -ms-flexbox;
display: -webkit-flex;
flex-direction: row;
-ms-flex-direction: row;
-webkit-flex-direction: row;
margin: auto;
min-height: 139px;
border-width: 0 1px 0 1px;
border-style: solid;
}
#top-header-content {
flex: 1 1 auto;
-ms-flex: 1 1 auto;
-webkit-flex: 1 1 auto;
}
@media (max-width: 768px) {
#top-header {
flex-direction: column;
-ms-flex-direction: column;
-webkit-flex-direction: column;
}
#top-header-content {
align-self: flex-end;
-ms-align-self: flex-end;
-webkit-align-self: flex-end;
}
}
}
/* --- Partie inferieur du header --- */
/* --- Partie inferieur du header --- */
#sub-header {
min-height: 35px;
}
#sub-header-content{
margin: auto;
}
/* --- Logo et Nom du site web --- */
#site-infos {
display: flex;
display: -ms-flexbox;
display: -webkit-flex;
margin: 1.5em 0 0 1.5em;
max-width: 940px;
flex: 1 1 auto;
}
#site-logo {
#site-logo {
margin: 0 1em 0 0;
width: 60px;
width: 60px;
height: 60px;
height: 60px;
background-image: url(images/logo.png);
background-image: url(images/logo.png);
background-position: center;
background-position: center;
background-repeat: no-repeat;
background-repeat: no-repeat;
background-size: cover;
background-size: cover;
flex: 0 0 auto;
-ms-flex: 0 0 auto;
-webkit-flex: 0 0 auto;
}
}
#site-name-container {
#site-name-container {
margin: 0.4em 0 0 0;
margin: 0.2em 0 0 0.809em;
}
}
#site-name {
#site-name {
font-size: 3em;
font-size: 1.618em;
font-weight: bold;
display: block;
line-height: 1em;
font-weight: 400;
letter-spacing: 0.02em;
text-decoration: none;
text-decoration: none;
}
}
#site-slogan {
#site-slogan {
display: block;
display: block;
padding: 0.1em 0 0 0.1em;
padding: 0.3236em 0 0 0.1618em;
font-size: 1em;
font-size: 0.8em;
letter-spacing: 0.1em;
letter-spacing: 0.1em;
}
}
@media (min-width: 769px) {
@media (min-width: 769px) {
#site-logo {
#site-logo {
width: 90px;
width: 90px;
height: 90px;
height: 90px;
}
}
#site-name-container {
#site-name-container {
margin: 1em 0 0 0;
margin: 0 0 0 1.618em;
}
}
#site-name {
#site-name {
font-size: 4em;
font-size: 3.236em;
line-height: 1.2em;
}
}
#site-slogan {
font-size: 1em;
padding: 0.1em 0 0 0.1618em;
}
}
}
/* -- Conteneur global du site -- */
/* -- Conteneur global du site -- */
/* ------------------------------ */
/* ------------------------------ */
#global {
display: flex;
display: -ms-flexbox;
display: -webkit-flex;
flex-direction: column;
-ms-flex-direction: column;
-webkit-flex-direction: column;
margin: 0 auto 0 auto;
padding: 0;
border-width: 0 1px 0 1px;
border-style: solid;
}
#main {
#main {
padding: 0 0 10px 0;
width: 100%;
max-width: 100%;
order : 1;
-ms-flex-order: 1;
-webkit-flex-order: 1;
}
}
#menu-left,
#menu-left,
#menu-right {
#menu-right {
width: 100%;
width: 100%;
}
}
#menu-left {
order : 2;
-ms-flex-order: 2;
-webkit-flex-order: 2;
}
#menu-right {
order : 3;
-ms-flex-order: 3;
-webkit-flex-order: 3;
}
@media (min-width: 769px) {
@media (min-width: 769px) {
#global {
#menu-left { margin-right: 1.618em; }
min-height: 100vh;
#menu-right { margin-left: 1.618em; }
flex-direction: row;
-ms-flex-direction: row;
-webkit-flex-direction: row;
}
#main {
padding: 0 10px;
order : 2;
-ms-flex-order: 2;
-webkit-flex-order: 2;
flex: 1 0 auto;
-ms-flex: 1 0 100%;
}
#menu-left,
#menu-left,
#menu-right {
#menu-right {
width: 200px;
width: calc(100% / 13 * 3.5);
}
}
#menu-left {
#menu-left.narrow-menu-left { margin-right: 0.809em; }
order : 1;
#menu-right.narrow-menu-right { margin-left: 0.809em; }
-ms-flex-order: 1;
-webkit-flex-order: 1;
#menu-left.narrow-menu-left,
#menu-right.narrow-menu-right {
width: calc(100% / 13 * 2.5);
}
}
#menu-right {
order : 3;
#main {
-ms-flex-order: 3;
padding: 0 0 1.618em;
-webkit-flex-order: 3;
}
}
#main.main-with-left,
#main.main-with-left,
#main.main-with-right {
#main.main-with-right {
width: calc(100% - 200px);
width: calc(100% - ((100% / 13 * 5)));
-ms-flex: 1 0 auto; /*Tricks IE*/
}
}
#main.main-with-left.main-with-right {
#main.main-with-left.main-with-right {
width: calc(100% - 400px);
width: calc(100% - ((100% / 13 * 8)));
-ms-flex: 1 0 auto; /*Tricks IE*/
}
}
}
}
#top-footer {
#top-footer {
padding: 0.5em 0;
padding: 0.809em;
}
/* -- Contenu de la page -- */
/* ------------------------ */
/* --- Contenu central --- */
#main-content {
padding: 1.5em 0.8em;
}
}
.block-container {
.block-container {
margin-top: 15px;
margin-top: 1em;
}
}
/* --- Emplacement au dessus et en dessous du contenu de la page --- */
/* --- Emplacement au dessus et en dessous du contenu de la page --- */
#top-content {
#top-content {
margin: 0 0 2% 0;
margin: 0 0 1.618em 0;
padding: 0.1em 0.8em;
}
}
/* --- Emplacement au dessus du pied de page --- */
/* --- Emplacement au dessus du pied de page --- */
#bottom-content {
#bottom-content {
margin: 2% 0 0 0;
margin: 1.618em 0 0;
padding: 0.1em 0.8em;
}
}
/* -- Pied de page - Footer -- */
/* -- Pied de page - Footer -- */
/* --------------------------- */
/* --------------------------- */
#footer {
#footer {
margin: auto;
clear: both;
clear: both;
border-width: 4px 0 0 0;
border-width: 4px 0 0 0;
border-style: solid;
border-style: solid;
border-color: transparent;
}
}
.footer-content {
.footer-content {
margin: 0 auto 0 auto;
margin: 0 auto 0 auto;
padding: 1.5em 0;
padding: 0.809em;
}
}
.footer-infos {
.footer-infos {
margin: auto;
margin: auto;
padding-top: 10px;
padding: 0.809em;
min-height: 40px;
min-height: 40px;
border-width: 1px 0 0 0;
border-width: 1px 0 0 0;
border-style: solid;
border-style: solid;
border-color: transparent;
text-align: center;
text-align: center;
}
}
Text moved with changes to lines 310-315 (82.4% similarity)
@media (min-width: 769px) {
.footer-infos {
width: 400px;
}
}
.footer-infos span {
.footer-infos span {
font-size: 0.8em;
font-size: 0.8em;
display: block;
}
}
@media (max-width: 768px) {
.footer-infos span.footer-infos-separator {
.footer-infos span {
display: none;
display: block
}
}
@media (min-width: 769px) {
.footer-infos span,
.footer-infos span.footer-infos-separator {
.footer-infos span.footer-infos-separator {
display: none;
display: inline-block;
}
}
.footer-infos {
.footer-infos {
padding: 10px;
padding: 0.618em 0 0;
}
}
}
}
/* -- Elements specifiques PHPboost -- */
/* -- Elements specifiques PHPboost -- */
/* ----------------------------------- */
/* ----------------------------------- */
/* --- Compteur de visites --- */
/* --- Compteur de visites --- */
#visit-counter {
#visit-counter {
position: absolute;
position: absolute;
right: 0;
right: 1.618em;
bottom : 1em;
top : 92.5%;
margin-right: 10px;
font-size: 0.9em;
font-size: 0.9em;
text-align: right;
text-align: right;
}
}
/* --- Barre de lien rapide --- */
/* --- Barre de lien rapide --- */
#breadcrumb {
#breadcrumb {
margin: 0 0 20px 10px;
padding: 0.618em;
text-indent: 10px;
font-size: 0.809em;
}
}
#breadcrumb ol {
#breadcrumb ol {
margin: 0;
margin: 0;
list-style: none;
list-style: none;
}
}
#breadcrumb li {
#breadcrumb li {
display: inline;
display: inline;
}
}
#breadcrumb li:not(.current):after {
#breadcrumb li:not(.current):after {
content: '/';
content: '/';
color: #616161;
}
}
/* --- Scroll to Top --- */
/* --- Scroll to Top --- */
.scroll-to {
.scroll-to {
position: fixed;
position: fixed;
z-index: 10;
z-index: 10;
display: none;
display: none;
background-color: rgba(15, 15, 16, 0.8);
cursor: pointer;
}
}
#scroll-to-top {
#scroll-to-top {
right: 25px;
right: 0;
bottom: 0;
bottom: 0.618em;
padding: 2px 11px 3px 10px;
padding: 0.618em 0.809em;
transition: 0.2s;
}
}
#scroll-to-top,
.scroll-to i {
.scroll-to i {
color: rgba(255, 255, 255, 0.8);
transition: 0.2s;
transition: 0.2s;
}
}
#scroll-to-top:hover,
.scroll-to:hover i {
.scroll-to:hover i {
color: rgba(255, 255, 255, 1);
transition: 0.3s;
transition: 0.3s;
}
}
@media (min-width: 769px) {
@media (min-width: 769px) {
#scroll-to-top {
#scroll-to-top {
bottom: 25px;
right: 0.618em;
padding: 9px 11px 11px 10px;
}
}
.scroll-to i {
.scroll-to i {
font-size: 2em;
font-size: 1.618em;
}
}
@media (max-width: 768px) {
#scroll-to-top:hover {
padding: 9px 11px 11px 10px;
transition: 0.3s;
}
}
}
}
/* -- Cookie Bar -- */
/* --- Cookie Bar --- */
/* ------------------- */
.cookiebar-container {
.cookiebar-container {
z-index: 100;
z-index: 100;
left: 0;
left: 0;
right: 0;
right: 0;
top: 0;
top: 0;
padding: 7px 20px;
padding: 0.456em 1.309em;
background-color: #F2F2F2;
font-size: 0.809em;
border-bottom: 1px solid #E2E2E2;
font-size: 0.9em;
text-align: center;
text-align: center;
}
}
@media (max-width: 768px) {
.cookiebar-container {
position: fixed;
top: auto;
bottom: 0;
padding: 1.309em 1.309em 0.456em 1.309em;
margin: 1em 0.456em;
Text moved with changes from lines 320-325 (82.4% similarity)
border-style: solid;
border-width: 1px;
font-size: 1em;
}
}
.cookiebar-container.fixed {
.cookiebar-container.fixed {
position: fixed;
position: fixed;
}
}
.cookiebar-content {
.cookiebar-content {
text-align: justify;
text-align: justify;
}
}
@media (min-width: 769px) {
@media (min-width: 769px) {
.cookiebar-content {
.cookiebar-content {
display: inline-block;
display: inline-block;
max-width: calc(100% - 250px);
max-width: calc(100% - 400px);
vertical-align: middle;
vertical-align: top;
}
}
.cookiebar-actions {
.cookiebar-actions {
display: inline-block;
display: inline-block;
width: 250px;
width: 400px;
}
}
}
}
@media (max-width: 768px) {
@media (max-width: 768px) {
.cookiebar-content {
.cookiebar-content {
margin-bottom: 5px;
margin-bottom: 0.309em;
}
}
.cookiebar-actions {
.cookiebar-actions {
margin: 15px 0 5px 0;
margin: 1em 0 0.309em 0;
}
}
}
}
.cookiebar-button {
.cookiebar-button {
margin: 0 5px 0 5px;
margin: 0 0.309em;
border-radius: 4px;
color: #FEFEFE;
}
}
@media (max-width: 768px) {
@media (max-width: 768px) {
.cookiebar-button {
.cookiebar-button {
margin: 0 10px 0 10px;
margin: 0 0.618em;
}
}
}
}
.cookiebar-button-understand { background-color: #337AB7; border-color: #2E6DA4; }
.cookiebar-button-understand:hover { background-color: #2E6DA4; }
.cookiebar-button-allowed { background-color: #5CB85C; border-color: #4CAE4C; }
.cookiebar-button-allowed:hover { background-color: #4CAE4C; }
.cookiebar-button-declined { background-color: #E84E40; border-color: #CE271A; }
.cookiebar-button-declined:hover { background-color: #CE271A; }
@media (max-width: 468px) {
@media (max-width: 468px) {
.cookiebar-more {
.cookiebar-more {
display: block;
display: block;
margin: 10px 0 5px 0;
margin: 0.618em 0 0.309em 0;
}
}
}
}
.aboutcookie-title {
.aboutcookie-title {
font-size: 1.3em;
font-size: 1.3em;
line-height: 1.3em;
line-height: 1.3em;
font-weight: bold
font-weight: bold
}
}
.aboutcookie-title + p {
.aboutcookie-title + p {
margin: 0px 0 20px 0px;
margin: 0 0 1.309 0;
}
}
#cookiebar-change-choice {
#cookiebar-change-choice {
margin-top: 10px;
margin-top: 0.618em;
text-align: center;
text-align: center;
}
}
.cookiebar-change-choice-link {
.cookiebar-change-choice-link {
text-align: center;
text-align: center;
}
}
/* --- Search engines --- */
.robot {
font-size: 0.9em;
font-weight: bold;
}