@charset "utf-8";
/* CSS Document */
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, ol, ul, li, 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%;
vertical-align: middle
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section {
display: block
}
section {
padding-bottom: var(--margin-xlarge);
position: relative;
}
abbr, eventsource, mark, meter, time, progress, output, bb {
display: inline
}
ol, ul {
list-style: none
}
blockquote, q {
quotes: none
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none
}
table {
border-collapse: collapse;
border-spacing: 0
}
html {
height: 100%;
width: 100%;
min-height: 100%
}
body {
height: 100%;
width: 100%;
position: relative;
background: white;
font-family: Lato, Helvetica, Arial, sans-serif;
font-size: 14px;
color: var(--color-default);
line-height: 1.2em;
min-height: 100vh;
}
h1, h2, h3, h4, h5, h6 {
display:block;
font-weight: bold;
text-align: inherit;
line-height: var(--line-height-reduced);
background: none;
padding: 0;
}
h1 {
font-size: var(--font-size-large);
text-transform: uppercase;
letter-spacing: 1px;
color: var(--color-mirage);
text-align:center;
/*border: solid 1px var(--color-silver-lighter);*/
/*border-bottom: solid 1px var(--color-silver-lighter);*/
padding: var(--margin-normal);
margin-bottom: var(--margin-double);
}
h2 {
font-size: var(--font-size-large);
color: var(--color-blue-cerulean);
margin-bottom: var(--margin-large);
text-align: center;
}
h2:after {
content: "";
display: block;
height: 1px;
width: 25px;
margin: 0 auto;
background-color: var(--color-blue-cerulean);
margin-top: var(--margin-small);
}
h3 {
font-size: var(--font-size-medium);
border-bottom: solid 1px var(--color-silver-lighter);
padding-bottom: var(--margin-small);
margin-bottom: var(--margin-normal);
}
h4 {
font-size: var(--font-size-normal-to-medium);
text-transform: uppercase;
color: var(--color-blue-cerulean);
letter-spacing: 1px;
margin: var(--margin-normal) 0 var(--margin-small) 0;
}
h5 {
font-size: var(--font-size-normal);
margin: var(--margin-normal) 0 var(--margin-small) 0;
}
a {
color: var(--color-blue-cerulean);
text-decoration: none;
outline: 0;
}
a:hover {
text-decoration: underline;
}
a.default,
a.default:hover{
text-decoration: none;
padding: 0 3px;
position: relative;
display: inline-block;
transition: color .5s;
}
a.default:before {
content:"";
width:100%;
height:1px;
background-color: var(--color-blue-cerulean);
position: absolute;
bottom: -1px;
left: 0;
transition: height .5s;
border-radius: 1px;
z-index: -1;
}
a.default:hover{
color:white;
}
a.default:hover:before{
height:100%;
}
strong {
font-weight: bold
}
em {
font-style: italic
}
.clear {
clear: both
}
blockquote, q {
quotes: "\00ab""\00bb""\201C""\201D"
}
sub {
vertical-align: sub;
font-size: 0.85em
}
sup {
vertical-align: super;
font-size: 0.85em
}
small {
font-size: 0.85em
}
del {
text-decoration: line-through
}
ins {
text-decoration: underline
}
th, td {
text-align: left;
font-weight: inherit
}
/* ----------- Menu de navigation ----------*/
#navigation, #back-navigation {
/*width: calc(100% - var(--margin-large)); !* on retire le padding horizontal *!*/
width: 100%;
/*padding: var(--margin-small) var(--margin-double);*/
/*background: url(img/logo-kalao-studio2.png) no-repeat center bottom var(--color-black-pearl);*/
background: var(--color-black-pearl);
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
gap: var(--margin-large);
position: sticky;
top:0;
z-index:100;
box-shadow: var(--box-shadow-default);
}
#back-navigation{
background: var(--color-mine);
}
#navigation > .wrapper, #back-navigation > .wrapper {
margin: 0 auto;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
gap: var(--margin-large);
}
.logo {
text-align: center;
}
.logo .icon {
width:160px;
height: 60px;
display: inline-block;
margin: 0 var(--margin-normal) 0 0;
vertical-align: middle;
overflow: visible; /* IMPORTANT : permet d'afficher les pictos avec border-radius */
color: var(--color-blue-cerulean);
fill: currentColor;
filter: brightness(1.25);
transition: filter .5s;
}
.logo:hover .icon {
filter: brightness(1.5);
}
.menu {
font-family: Lato, Helvetica, Arial, sans-serif;
font-size: var(--font-size-small);
font-weight:bold;
color: #fff;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
gap: var(--margin-normal);
}
.menu > li {
text-align:center;
position: relative;
}
.menu > li span {
display: block;
padding: var(--margin-normal);
background: var(--color-black-pearl);
text-transform: uppercase;
letter-spacing: 1px;
transition: color .25s;
}
.menu .icon {
width: 20px;
height: 20px;
display: block;
margin: 0 auto var(--margin-normal) auto;
vertical-align: middle;
color: #fff;
fill: currentColor;
}
.menu > li:hover {
cursor: pointer;
cursor: grab;
}
.menu > li span > .icon {
opacity: .5;
transition: transform, opacity, color .25s ease;
}
.menu > li:hover span > .icon {
transform: translateY(-5px);
opacity:1;
color: var(--color-blue-cerulean);
transition-duration: .5s;
}
.menu > li:hover,
.menu > li.active,
.menu > li:hover span,
.menu > li.active span {
color: var(--color-blue-cerulean);
transition-duration: .5s;
}
.menu > li.active span > .icon {
color: var(--color-blue-cerulean);
opacity:1;
transition-duration: .5s;
}
.menu > li.active {
position: relative;
}
.menu > li.active:after {
content: "";
display: block;
width: 0;
height: 0;
border-top: 6px solid var(--color-black-pearl);
border-left: 6px solid transparent;
border-right: 6px solid transparent;
-webkit-transform: rotate(360deg);
-moz-transform: scale(0.999);
position: absolute;
left: 50%;
margin-left: -6px;
top: 100%; /*pour le placer tout en bas du */
/*margin-top: var(--margin-small); !*pour compenser le padding de #navigation*!*/
z-index: 10;
}
.menu a {
display: block;
padding: 1.5em 2em;
color: white;
position: relative;
text-decoration: none;
}
.lang-selector > select {
border: 0;
border-radius: 0;
color: white;
background-color: inherit;
padding: 0 var(--margin-double) 0 0;
}
.menu .lang-selector > select > option {
color: var(--color-default);
font-size: var(--font-size-normal);
}
.menu .lang-selector {
display:flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
gap: var(--margin-small);
margin-left: var(--margin-double);
}
.menu .lang-selector .icon {
width:20px;
}
.menu .lang-selector > li {
height:20px;
filter: grayscale(1);
opacity: .5;
transition: filter, opacity .5s;
}
.menu .lang-selector > li.current,
.menu .lang-selector > li:hover{
filter: grayscale(0);
opacity: 1;
}
.menu-sub-items, .menu-sub-items-children {
display: none;
position: absolute;
left:0;
/*top: 95%;*/
top: 100%;
width: max-content;
font-size: var(--font-size-normal);
background-color: rgba(0, 173, 217, .95); /* bleu cerulean */
box-shadow: var(--box-shadow-default);
text-align: left;
color: white;
z-index: 20;
cursor: default;
}
.menu-sub-items-children {
background-color: rgba(0, 136, 177, .95); /* bleu plus foncé (blue-bondi) */
left:100%;
top:var(--margin-normal);
}
.menu li:hover .menu-sub-items,
.menu li.active .menu-sub-items:hover,
.menu-sub-items > li:hover > .menu-sub-items-children {
display: block;
animation: fadingmenu 0.5s ease-in-out 0s forwards;
}
@keyframes fadingmenu {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.menu-sub-items > li,
.menu-sub-items-children > li {
background-color: transparent;
transition: background-color .25s;
}
.menu-sub-items > li:hover,
.menu-sub-items > li.active,
.menu-sub-items-children > li:hover,
.menu-sub-items-children > li.active {
background-color: var(--color-blue-cerulean); /* bleu clair */
color: var(--color-black-pearl); /* bleu foncé */
transition-duration: .5s;
}
.menu-sub-items > li > a,
.menu-sub-items-children > li > a {
color: inherit;
transition: color .25s;
}
.menu-sub-items > li:hover > a,
.menu-sub-items-children > li:hover > a {
color: var(--color-black-pearl); /* bleu foncé */
transition-duration: .5s;
}
.menu-sub-items > li.has-children {
position:relative;
}
.menu-sub-items > li.has-children > a:after {
content: ">";
float: right;
color: inherit;
display: block;
font-weight: bold;
margin-left: var(--margin-double);
transition: transform .25s;
}
.menu-sub-items > li.has-children > a:hover:after {
transform: translateX(7px);
transition-duration: .5s;
}
.menu
.identifiant {
text-align: center;
display: block;
padding: 1.5em 2em;
}
.identifiant:hover {
background-color: transparent !important;
color: #fff !important;
cursor: default;
}
.identifiant > .login {
display:block;
font-weight: bold;
font-style: italic;
letter-spacing: 1px;
margin-top:var(--margin-small);
}
.deconnexion {
padding: 1em 2em;
text-align: center;
}
.deconnexion > .logout > button {
padding:0;
max-height: none;
background: none;
border:0;
color: white;
cursor: pointer;
}
.deconnexion:hover > .logout > button {
color: var(--color-black-pearl); /* bleu foncé */
background:none;
transition: color .5s;
}
.deconnexion .icon {
width: 14px;
height: 14px;
display: inline-block;
margin: 0 var(--margin-normal) 0 0;
vertical-align: middle;
color: inherit;
fill: currentColor;
}
/* ---------- BOUTONS ACTION */
button,
button.default,
form.filter > button,
.button {
display: inline-block;
/*max-height: 14px;*/
background-color: transparent;
border:solid 1px var(--color-blue-cerulean);
/*padding: var(--margin-small) var(--margin-normal);*/
padding:5px 10px;
margin: 5px;
color:var(--color-blue-cerulean);
line-height: 1;
/*border-radius: var(--border-radius-max);*/
border-radius: 1em;
transition: background-color, color .25s;
}
button:hover,button.default:hover,
form.filter > button:hover,
.button:hover {
background-color:var(--color-blue-cerulean);
text-decoration: none;
color: white;
transition-duration: .5s;
}
button + button,
.button + .button {
margin-left: var(--margin-small);
}
.actions > .button + .button {
margin: var(--margin-normal) 0 0 var(--margin-normal);
}
/* ---------- ICONES */
button > .icon,
.button > .icon,
blockquote > .icon {
width: 14px;
height: 14px;
display: inline-block;
margin: 0 var(--margin-small) 0 0;
vertical-align: middle;
overflow: visible; /* IMPORTANT : permet d'afficher les pictos avec border-radius */
color:inherit;
fill: currentColor;
position: relative;
top: -1px;
}
/* ---------- FIN ICONES */
#main {
box-sizing: border-box;
padding: var(--margin-large);
animation: fadingmain 1s ease-in-out 0s forwards;
}
@keyframes fadingmain {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.pagetitle {
margin-bottom: var(--margin-large);
}
/* ---------- ADMIN */
.resume {
margin: var(--margin-double) 0;
color: var(--color-blue-oxford);
text-transform: uppercase;
font-size: var(--font-size-small);
letter-spacing: 1px;
text-align:center;
}
.resume > ul > li {
display: inline-block
}
.resume > ul > li + li:before {
content: "\00a0|\00a0\00a0";
color: inherit;
opacity: .5;
margin: 0 var(--margin-small);
}
/* ---------- ONGLETS NAVIGATION */
ul.tabbed {
margin: var(--margin-normal) 0 var(--margin-double);
padding-left: var(--margin-normal);
line-height: 1;
border-bottom: 1px solid var(--color-silver-lighter);
display:flex;
flex-flow: row wrap;
align-items: flex-end;
justify-content: center;
background: linear-gradient(to top, #f3f3f3 0%, white 25%);
position: relative
}
ul.tabbed:before {
content: "";
display: block;
width: 40px;
height: 100%;
background: linear-gradient(to right, white 0%, transparent 75%);
position: absolute;
left: 0;
z-index:1;
}
ul.tabbed:after {
content: "";
display: block;
width: 40px;
height: 100%;
background: linear-gradient(to left, white 0%, transparent 75%);
position: absolute;
right: 0;
z-index:1;
}
ul.tabbed > li {
margin-top: -10px; /* pour superposition des onglets sur petits écrans */
padding:11px 15px 12px 15px;
color: var(--color-blue-cerulean);
background: linear-gradient(to top, var(--color-blue-bayoux-shadow) 0%, var(--color-blue-bayoux) 25%);
border: solid 1px white;
border-bottom: 0;
border-radius: var(--border-radius-default) var(--border-radius-default) 0 0;
position: relative;
top: 1px;
z-index: 2; /* pour passer par-dessus les dégradés latéraux en before et after du ul.tabbed */
transition: all .5s ease 0s;
transition-property: padding, background;
}
ul.tabbed > li:after {
content: "";
display: block;
width: 0;
height: 0;
border-top: 0px solid var(--color-blue-bayoux-shadow);
border-left: 9px solid transparent;
border-right: 9px solid transparent;
-webkit-transform: rotate(360deg);
-moz-transform: scale(0.999);
position: absolute;
left: 50%;
margin-left: -9px;
top: 100%;
transition: border-top-width .25s ease 0s;
transition-delay: .15s;
}
ul.tabbed > li.active {
background: var(--color-blue-cerulean);
font-weight:bold;
}
ul.tabbed > li.active:after {
border-top: 9px solid var(--color-blue-cerulean);
}
ul.tabbed > li.active,
ul.tabbed > li:hover {
padding:14px 15px 16px 15px;
}
ul.tabbed > li:hover:after {
border-top-width:9px;
}
ul.tabbed > li + li {
margin-left: var(--margin-xsmall)
}
ul.tabbed > li > a {
display: block;
margin:0;
padding:0;
color: #fff;
}
ul.tabbed > li > a:hover {
text-decoration: none
}
ul.tabbed > li.disabled {
pointer-events: none;
opacity: 0.25;
filter: alpha(opacity=25); /* For IE8 and earlier */
}
/* ---------- TABLE */
table.admin {
width: 100%;
margin: var(--margin-normal) 0
}
table.admin th {
padding: 1.5em 0.5em;
text-align: center;
vertical-align: middle
}
table.admin td {
padding: 0.5em 0.5em;
text-align: center;
vertical-align: middle;
}
table.admin th:first-child,
table.admin td:first-child {
text-align: left;
}
table.admin th:last-child,
table.admin td:last-child {
text-align: right
}
table.admin > thead th {
background: var(--color-blue-cerulean);
color: white;
text-transform: uppercase;
letter-spacing: 1px;
}
table.admin > tbody tr {
border-bottom: solid 1px white;
}
table.admin > tbody tr:hover {
color: #000;
}
table.admin > tbody td {
background: none;
transition: background-color 0.5s ease 0s;
}
table.admin > tbody td .button {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
table.admin > tbody tr:hover td .button {
opacity: 1;
filter: alpha(opacity=100); /* For IE8 and earlier */
transition: opacity 0.75s ease;
}
table.admin > tbody td .button + .button {
margin-left: var(--margin-small);
}
table.admin > tbody td.actions {
white-space: nowrap;
}
table.admin > tbody > tr:nth-child(even) > td {
background-color: var(--color-beige-clair);
}
table.admin > tbody > tr:hover > td {
background-color: var(--color-beige-fonce);
}
table.admin > tfoot td {
background: #bbb;
font-weight: bold
}
@media print {
table.admin th, table.admin td {
padding: 0.25em;
border: 1px solid black
}
table.admin th.actions,
table.admin td.actions {
display: none
}
table.admin > thead th {
background: none
}
table.admin > tbody td {
background: none
}
table.admin > tfoot td {
background: none
}
}
/* ---------- FORMULAIRE */
.filter input .filter select, .filter textarea{
border : 2px solid #ffffff;
}
form.filter fieldset, .filter form
{
margin: var(--margin-double) 0;
padding: var(--margin-double) var(--margin-large);
background: var(--color-beige-clair);
border-radius: var(--border-radius-default);
}
form.filter fieldset.multiset > .multiset-buttons {
right: var(--margin-normal);
top: var(--margin-normal);
}
form.filter h2 {
margin-bottom: var(--margin-normal);
color: var(--color-blue-cerulean);
font-size: 1.7em;
}
form.filter .fields {
display: flex;
flex-flow: row wrap;
gap: 20px;
justify-content: space-around;
align-items: center;
line-height: var(--line-height-reduced);
}
.filter-row {
text-align:center;
}
.filter-row > label {
display: inline-block;
margin: 0 var(--margin-small) var(--margin-small) 0;
padding: 0;
max-height: 45px;
text-transform: uppercase;
font-size: var(--font-size-small);
letter-spacing: 1px;
}
form.filter .fields button {
margin: 0 0 0 1px;
max-height: 45px;
}
form.filter .fields label:first-child, form.filter .fields button:first-child, form.filter .fields br + label, form.filter .fields br + button {
margin-left: 0
}
form.filter .fields [type="checkbox"] + label, form.filter .fields [type="radio"] + label {
margin-left: 2px
}
form.filter > button {
margin: var(--margin-double) 0;
max-height: 45px;
}
label.sync {
color: #36b3b5;
}
.form_sync {
font-style: italic
}
input, select, textarea {
-webkit-font-smoothing: antialiased;
margin: 0;
background-color: white;
font-family: inherit;
font-size: 1em;
color: inherit;
}
input:disabled, select:disabled, textarea:disabled {
background-color: whitesmoke;
color: inherit;
cursor: not-allowed;
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
input[size="4"] {
width: 4ch
}
input[size="8"] {
width: 8ch
}
input[size="12"] {
width: 12ch
}
input[size="20"] {
width: 20ch
}
input[size="30"] {
width: 30ch
}
input[size="40"] {
width: 40ch
}
input[size="50"] {
width: 50ch
}
input[size="60"] {
width: 60ch
}
input[size="80"] {
width: 80ch
}
select {
box-sizing: border-box;
background: none no-repeat right center white;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='20px' height='13' viewPort='0 0 12px 13px' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon fill='%23333' points='4,0 8,4 0,4 '/%3E%3Cpolygon fill='%23333' points='4,13 8,9 0,9 '/%3E%3C/svg%3E");
padding: var(--margin-small) var(--margin-large) var(--margin-small) var(--margin-normal);
margin: 0 0 0 var(--margin-small);
outline: 0;
/*border: 2px solid #fff;*/
border: 1px solid var(--color-beige-clair);
appearance: none;
border-radius: var(--border-radius-max);
transition: border-color 0.5s ease 0s;
text-indent: 0.01px;
position: relative
}
select:focus {
border-color: var(--color-blue-cerulean);
box-shadow: 0 0 var(--margin-small) rgba(0, 0, 0, 0.1) inset;
}
select.warning, select.warning:focus {
border-color: #e52f2f
}
select > option {
color: inherit
}
input, input[type=text], input[type=file], input[type=password],
input[type=email], input[type=tel], input[type=url],
textarea {
box-sizing: border-box;
padding: var(--margin-small) var(--margin-normal);
margin: 0;
outline: 0;
/*border: 2px solid #fff;*/
border: 1px solid var(--color-beige-clair);
appearance: none;
border-radius: var(--border-radius-max);
transition: border-color 0.5s ease 0s
}
input[type=text]:focus, input[type=file]:focus,
input[type=password]:focus, input[type=email]:focus, input[type=tel]:focus, input[type=url]:focus,
textarea:focus {
border-color: var(--color-blue-cerulean);
box-shadow: 0 0 var(--margin-small) rgba(0, 0, 0, 0.1) inset;
}
input[type=text].warning, input[type=text].warning:focus, input[type=file].warning, input[type=file].warning:focus, input[type=password].warning, input[type=password].warning:focus, input[type=email].warning, input[type=email].warning:focus, input[type=tel].warning, input[type=tel].warning:focus, input[type=url].warning, input[type=url].warning:focus, textarea.warning, textarea.warning:focus {
border-color: #e52f2f
}
input[type=text]::-webkit-input-placeholder, input[type=file]::-webkit-input-placeholder, input[type=password]::-webkit-input-placeholder, input[type=email]::-webkit-input-placeholder, input[type=tel]::-webkit-input-placeholder, input[type=url]::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: #bbb
}
input[type=text]:-moz-placeholder, input[type=file]:-moz-placeholder, input[type=password]:-moz-placeholder, input[type=email]:-moz-placeholder, input[type=tel]:-moz-placeholder, input[type=url]:-moz-placeholder, textarea:-moz-placeholder {
color: #bbb
}
input[type=text]::-moz-placeholder, input[type=file]::-moz-placeholder, input[type=password]::-moz-placeholder, input[type=email]::-moz-placeholder, input[type=tel]::-moz-placeholder, input[type=url]::-moz-placeholder, textarea::-moz-placeholder {
color: #bbb
}
input[type=text]:-ms-input-placeholder, input[type=file]:-ms-input-placeholder, input[type=password]:-ms-input-placeholder, input[type=email]:-ms-input-placeholder, input[type=tel]:-ms-input-placeholder, input[type=url]:-ms-input-placeholder, textarea:-ms-input-placeholder {
color: #bbb
}
input[type=text][size], input[type=file][size], input[type=password][size], input[type=email][size], input[type=tel][size], input[type=url][size] {
box-sizing: content-box
}
input[type=checkbox].warning, input[type=radio].warning {
box-shadow: 0 0 0 2px #e52f2f
}
textarea:not([cols]) {
width: 100%
}
.checkboxes {
display:inline-block;
}
.filter-tags {
margin: var(--margin-small) auto;
text-align: center;
}
.filter-tags > button {
appearance: none;
background: 0;
display: inline-block;
vertical-align: middle;
text-align: left;
margin: 0;
padding: 0;
border: 0;
outline: 0;
line-height: 1;
white-space: nowrap;
cursor: pointer;
color: inherit;
font-family: inherit;
font-size: inherit;
-webkit-font-smoothing: antialiased;
}
.filter-tags > .tag {
margin: 0 var(--margin-double) var(--margin-small) 0;
padding: 0;
color: var(--color-beige-tres-fonce);
transition: color .5s;
}
.filter-tags > .tag:after {
content: "\d7";
font-weight: bold;
position: relative;
top: -4px;
left: var(--margin-xxsmall);
color: inherit;
opacity: .66;
transition: opacity .5s;
}
.filter-tags > .tag:hover {
color: var(--color-default);
}
.filter-tags > .tag:hover:after {
color: var(--color-fire);
}
/* ---------- BLOCS TEXTE ---------- */
.txt {
line-height: var(--line-height-normal);
padding-bottom: var(--margin-large);
text-align: left;
}
.col-two,
.col-three {
columns: 1;
gap: var(--margin-double);
}
blockquote {
display: block;
background: var(--color-beige-clair);
margin: var(--margin-double) auto;
padding: var(--margin-double);
font-size: var(--font-size-normal-to-medium);
font-weight: bold;
width: fit-content;
max-width: 66%;
border-left: solid 5px var(--color-blue-cerulean);
}
blockquote > .icon {
margin-right: var(--margin-normal);
color: var(--color-blue-cerulean);
}
blockquote.warning {
border-left-color: var(--color-fire);
}
blockquote.warning > .icon {
margin-right: var(--margin-normal);
color: var(--color-fire);
}
/* ---------- FOOTER ---------- */
#footer {
/*width: calc(100% - var(--margin-xlarge)); !* on retire le padding horizontal *!*/
width:100%;
padding: var(--margin-large);
background-color:var(--color-black-pearl);
color: var(--color-beige-clair);
}
#footer > .wrapper {
margin: 0 auto;
}
.footer-nav-menu-entries {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: flex-start;
gap: var(--margin-xlarge);
}
.footer-nav-menu-entries > li > .title {
font-weight:bold;
color: var(--color-blue-cerulean);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: var(--margin-normal);
}
.footer-nav-menu-entries-children > li {
background-color: transparent;
padding: var(--margin-normal) var(--margin-normal-to-double) var(--margin-normal) var(--margin-normal);
border-radius: var(--border-radius-small);
transition: background-color .5s;
}
.footer-nav-menu-entries-children > li:after {
content: ">";
float: right;
color: transparent;
display: block;
font-weight: bold;
margin-left: var(--margin-double);
transition: transform, color .5s;
}
.footer-nav-menu-entries-children > li:hover:after {
color: var(--color-black-pearl);
transform: translateX(7px);
transition-duration: .5s;
}
.footer-nav-menu-entries-children > li > .link {
color:white;
text-decoration:none;
transition: color .5s;
}
.footer-nav-menu-entries-children > li:hover {
background-color: var(--color-blue-cerulean);
}
.footer-nav-menu-entries-children > li:hover > .link,
.footer-nav-menu-entries-children > li:hover > .link:hover {
color: var(--color-black-pearl);
}
/* ---------- RESPONSIVE ---------- */
@media (min-width:500px) {
.col-two,
.col-three {
columns: 2;
}
}
@media (min-width:1000px) {
form.filter fieldset {
border-radius: var(--border-radius-max);
}
.col-three {
columns: 3;
}
}
@media (min-width:1400px) {
form.filter fieldset {
padding: var(--margin-small) var(--margin-double);
}
}
nav.banner-menu{
margin:0;
padding:0;
}
.scroll-y{
max-height: 50vh;
overflow-y: auto;
}