407 lines
11 KiB
SCSS
407 lines
11 KiB
SCSS
html,
|
|
body {
|
|
height: 100vh;
|
|
background-color: $color-bg-body;
|
|
color: $text-color;
|
|
font-family: Poppins-Regular, sans-serif;
|
|
font-size: 14px;
|
|
overflow-x: hidden;
|
|
|
|
@media print {
|
|
overflow-x: inherit;
|
|
}
|
|
}
|
|
|
|
a,
|
|
a:visited,
|
|
a:hover,
|
|
a:active {
|
|
color: $text-color;
|
|
text-decoration: none;
|
|
}
|
|
|
|
img { max-width: 100%; }
|
|
|
|
p,
|
|
th,
|
|
td {
|
|
margin: 0.5rem 0;
|
|
font-family: Poppins-Regular, sans-serif;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
ul,
|
|
ol { list-style: none; }
|
|
|
|
th,
|
|
td { margin: 0; }
|
|
th { font-weight: normal; }
|
|
|
|
td {
|
|
font-weight: bolder;
|
|
text-align: end;
|
|
}
|
|
|
|
.wrapper-xxl {
|
|
max-width: 100vw;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.wrapper-xl {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.wrapper-sm {
|
|
max-width: 576px;
|
|
margin: 0 auto;
|
|
}
|
|
.container-fluid .txt-col > div { max-width: 600px; }
|
|
|
|
.border-inox {
|
|
padding: 2px;
|
|
background: linear-gradient(0.5turn, #333, #fff, #333);
|
|
}
|
|
.underline { text-decoration: underline; }
|
|
.bold { font-weight: bold; }
|
|
.disabled { cursor: default; }
|
|
|
|
.citation-text {
|
|
color: $text-color-second;
|
|
font-family: Poppins-SemiBold, sans-serif;
|
|
font-style: italic;
|
|
}
|
|
|
|
.box-shadow { box-shadow: 0 4px 14px -4px $noir; }
|
|
.drop-shadow { filter: drop-shadow(0.5rem 0.5rem 0.5rem $noir); }
|
|
|
|
.h1 {
|
|
font-family: Poppins-SemiBold, sans-serif;
|
|
font-size: 32px;
|
|
}
|
|
|
|
.h2 {
|
|
margin: 1rem 0 2.5rem;
|
|
font-family: Poppins-SemiBold, sans-serif;
|
|
font-size: 28px;
|
|
}
|
|
|
|
.h3 {
|
|
margin: 1rem 0 1.5rem;
|
|
font-family: Poppins-SemiBold, sans-serif;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.h4 {
|
|
font-family: Poppins-Regular, sans-serif;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.ff-poppins-light { font-family: Poppins-Light, sans-serif; }
|
|
.ff-poppins-regular { font-family: Poppins-Regular, sans-serif; }
|
|
.ff-poppins-medium { font-family: Poppins-Medium, sans-serif; }
|
|
.ff-poppins-bold { font-family: Poppins-SemiBold, sans-serif; }
|
|
.ff-poppins-bold-italic { font-family: Poppins-SemiBoldItalic, sans-serif; }
|
|
|
|
.ff-mocha-regular { font-family: Mocha-Regular, sans-serif; }
|
|
|
|
.fs-mocha-sm { font-size: 15px; }
|
|
.fs-mocha-md { font-size: 16px; }
|
|
.fs-mocha-lg { font-size: 17px; }
|
|
.fs-mocha-xl { font-size: 21px; }
|
|
.fs-mocha-xxl { font-size: 27px; }
|
|
|
|
.fs-title-small { font-size: 1.2rem; }
|
|
.fs-title-medium { font-size: 1.45rem; }
|
|
.fs-title-big { font-size: 2rem; }
|
|
|
|
.fs-subtitle-small { font-size: 1.15rem; }
|
|
.fs-subtitle-medium { font-size: 1.33rem; }
|
|
.fs-subtitle-big { font-size: 1.8rem; }
|
|
|
|
.fs-header-menu { font-size: 18px; }
|
|
.fs-header-submenu { font-size: 16px; }
|
|
|
|
.fs-banner-big { font-size: 18px; }
|
|
.fs-banner-medium { font-size: 16px; }
|
|
|
|
.fs-card-big { font-size: 18px; }
|
|
.fs-card-medium { font-size: 16px; }
|
|
.fs-card-small { font-size: 12px; }
|
|
|
|
.fs-footer-big { font-size: 14px; }
|
|
.fs-footer-medium { font-size: 12px; }
|
|
.fs-footer-small { font-size: 10px; }
|
|
|
|
.fs-default { font-size: 1rem; }
|
|
|
|
.fs-xxl { font-size: 26px; }
|
|
.fs-xl { font-size: 22px; }
|
|
.fs-lg { font-size: 18px; }
|
|
.fs-md { font-size: 16px; }
|
|
.fs-sm { font-size: 14px; }
|
|
.fs-xsm { font-size: 12px; }
|
|
.fs-xxsm { font-size: 10px; }
|
|
.fs-special { font-size: 14px; }
|
|
|
|
.color-invert { color: $text-invert-color; }
|
|
.color-primary { color: $text-color; }
|
|
.color-second { color: $text-color-second; }
|
|
.color-third { color: $text-color-third; }
|
|
.color-fourth { color: $text-color-fourth; }
|
|
|
|
.category-wrapper { background-color: $color-bg-banner; }
|
|
|
|
.category-wrapper:nth-of-type(n) {
|
|
margin-right: 0.5rem;
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
.fiche-img:nth-of-type(n) {
|
|
margin-right: 0.5rem;
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
.category-wrapper:first-of-type,
|
|
.fiche-img:first-of-type { margin-left: 0; }
|
|
|
|
.category-wrapper:last-of-type,
|
|
.fiche-img:last-of-type { margin-right: 0; }
|
|
|
|
.play-btn {
|
|
@include size(100px);
|
|
|
|
.play-icon { fill: $blanc; }
|
|
> * { transition: all 0.3s ease-in-out; }
|
|
|
|
&:hover .play-icon { fill: $rouge; }
|
|
&:hover .play-circle { fill: $blanc; }
|
|
}
|
|
|
|
.object-cover-center {
|
|
object-fit: cover;
|
|
object-position: center;
|
|
}
|
|
|
|
.object-cover-start {
|
|
object-fit: cover;
|
|
object-position: center left;
|
|
}
|
|
|
|
.object-none-top-left {
|
|
object-fit: none;
|
|
object-position: top left;
|
|
}
|
|
|
|
.border-top-inox {
|
|
// height: 2px;
|
|
background: linear-gradient(0.25turn, #333, #fff, #333);
|
|
}
|
|
|
|
// .border-top-inox {
|
|
// position: relative;
|
|
// border-top: 2px solid $primary;
|
|
|
|
// &::after {
|
|
// position: absolute;
|
|
// top: -2px;
|
|
// right: 100%;
|
|
// width: 100%;
|
|
// height: 2px;
|
|
// background: linear-gradient(0.25turn, #333, #fff, #333);
|
|
// content: "";
|
|
// }
|
|
// }
|
|
|
|
.bg-ardoise-radial {
|
|
// $percent: 60%;
|
|
// background: radial-gradient(ellipse, transparent 35%, $noir2 $percent), no-repeat center/cover url("~@/images/fond-ardoise.jpg");
|
|
width: 100%;
|
|
background:
|
|
linear-gradient(0deg, $color-bg-body 0%, transparent 50%, $color-bg-body 100%),
|
|
no-repeat center/cover url("~@/images/fond-ardoise.jpg");
|
|
}
|
|
|
|
.bg-ardoise { background: no-repeat center/cover url("~@/images/fond-ardoise.jpg"); }
|
|
|
|
.bg-inox { background: no-repeat center/cover url("~@/images/fond-inox.jpg"); }
|
|
.bg-transparent { background-color: transparent; }
|
|
.bg-default { background-color: $primary; }
|
|
.bg-noir { background-color: $noir2; }
|
|
.bg-second { background-color: $secondary; }
|
|
.bg-fourth { background-color: $fourth; }
|
|
.bckg-body { background-color: $color-bg-body; }
|
|
.bg-gray { background-color: $gris2; }
|
|
|
|
.bg-color-black { background-color: $color-bg-noir; }
|
|
.bg-color-blue { background-color: #0090d7; }
|
|
.bg-color-red { background-color: #e30613; }
|
|
.bg-color-orange { background-color: #ef7900; }
|
|
.bg-color-green { background-color: #9ed023; }
|
|
.bg-color-deep-green { background-color: #00723a; }
|
|
|
|
.separator .range-color { fill: var(--range-color); }
|
|
.separator-blue .range-color { fill: #0090d7; }
|
|
.separator-red .range-color { fill: #e30613; }
|
|
.separator-orange .range-color { fill: #ef7900; }
|
|
.separator-green .range-color { fill: #9ed023; }
|
|
.separator-deep-green .range-color { fill: #00723a; }
|
|
|
|
.color-blue { color: #0090d7; }
|
|
.color-red { color: #e30613; }
|
|
.color-orange { color: #ef7900; }
|
|
.color-green { color: #9ed023; }
|
|
.color-deep-green { color: #00723a; }
|
|
.color-body { color: $text-color; }
|
|
|
|
.counter-wrapper {
|
|
@include size(26px);
|
|
|
|
background-color: $secondary;
|
|
|
|
&.hide-counter-wrapper {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.separator.end-0 {
|
|
transform: translateX(1px) !important;
|
|
}
|
|
|
|
.separator.reverse {
|
|
rotate: 180deg;
|
|
transform: translateX(1px) !important;
|
|
}
|
|
|
|
.rotate-3 { rotate: 3deg; }
|
|
|
|
.engag-start { @include border-top-radius(1rem); }
|
|
.engag-end { @include border-bottom-radius(1rem); }
|
|
|
|
.card-footer .engag-start.coucher { background: no-repeat center/cover url("~@/images/coucher-de-soleil-dans-un-champ.jpg"); }
|
|
|
|
.pagination {
|
|
.disabled .page-link {
|
|
color: $gris2;
|
|
pointer-events: none;
|
|
}
|
|
.previous { rotate: 90deg; }
|
|
.next { rotate: 270deg; }
|
|
}
|
|
|
|
.mail-letter {
|
|
stroke: $bleu;
|
|
}
|
|
|
|
.business-header.product .mail-letter {
|
|
stroke: $blanc;
|
|
}
|
|
|
|
// MMMMMMMM MMMMMMMMDDDDDDDDDDDDD
|
|
// M:::::::M M:::::::MD::::::::::::DDD
|
|
// M::::::::M M::::::::MD:::::::::::::::DD
|
|
// M:::::::::M M:::::::::MDDD:::::DDDDD:::::D
|
|
// M::::::::::M M::::::::::M D:::::D D:::::D
|
|
// M:::::::::::M M:::::::::::M D:::::D D:::::D
|
|
// M:::::::M::::M M::::M:::::::M D:::::D D:::::D
|
|
// M::::::M M::::M M::::M M::::::M D:::::D D:::::D
|
|
// M::::::M M::::M::::M M::::::M D:::::D D:::::D
|
|
// M::::::M M:::::::M M::::::M D:::::D D:::::D
|
|
// M::::::M M:::::M M::::::M D:::::D D:::::D
|
|
// M::::::M MMMMM M::::::M D:::::D D:::::D
|
|
// M::::::M M::::::MDDD:::::DDDDD:::::D
|
|
// M::::::M M::::::MD:::::::::::::::DD
|
|
// M::::::M M::::::MD::::::::::::DDD
|
|
// MMMMMMMM MMMMMMMMDDDDDDDDDDDDD
|
|
@include media-breakpoint-up(md) { // >= 768px
|
|
html,
|
|
body { font-size: 12px; }
|
|
|
|
.h3 {
|
|
font-family: Poppins-Medium, sans-serif;
|
|
font-size: 18px;
|
|
}
|
|
.fs-header-submenu { font-size: 12px; }
|
|
.fs-footer-medium { font-size: 12px; }
|
|
.fs-special { font-size: 16px; }
|
|
|
|
.engag-start {
|
|
@include border-top-radius(0);
|
|
@include border-start-radius(1rem);
|
|
}
|
|
|
|
.engag-end {
|
|
@include border-bottom-radius(0);
|
|
@include border-end-radius(1rem);
|
|
}
|
|
}
|
|
|
|
// LLLLLLLLLLL GGGGGGGGGGGGG
|
|
// L:::::::::L GGG::::::::::::G
|
|
// L:::::::::L GG:::::::::::::::G
|
|
// LL:::::::LL G:::::GGGGGGGG::::G
|
|
// L:::::L G:::::G GGGGGG
|
|
// L:::::L G:::::G
|
|
// L:::::L G:::::G
|
|
// L:::::L G:::::G GGGGGGGGGG
|
|
// L:::::L G:::::G G::::::::G
|
|
// L:::::L G:::::G GGGGG::::G
|
|
// L:::::L G:::::G G::::G
|
|
// L:::::L LLLLLL G:::::G G::::G
|
|
// LL:::::::LLLLLLLLL:::::L G:::::GGGGGGGG::::G
|
|
// L::::::::::::::::::::::L GG:::::::::::::::G
|
|
// L::::::::::::::::::::::L GGG::::::GGG:::G
|
|
// LLLLLLLLLLLLLLLLLLLLLLLL GGGGGG GGGG
|
|
@include media-breakpoint-up(lg) { // >= 992px
|
|
.wrapper { padding: 0 5rem; }
|
|
|
|
// .border-top-inox.hideable {
|
|
// border-top: 2px solid transparent;
|
|
// &::after {display: none;}
|
|
// }
|
|
|
|
.paragraph-format {
|
|
max-width: 62rem;
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
}
|
|
}
|
|
|
|
// XXXXXXX XXXXXXXLLLLLLLLLLL
|
|
// X:::::X X:::::XL:::::::::L
|
|
// X:::::X X:::::XL:::::::::L
|
|
// X::::::X X::::::XLL:::::::LL
|
|
// XXX:::::X X:::::XXX L:::::L
|
|
// X:::::X X:::::X L:::::L
|
|
// X:::::X:::::X L:::::L
|
|
// X:::::::::X L:::::L
|
|
// X:::::::::X L:::::L
|
|
// X:::::X:::::X L:::::L
|
|
// X:::::X X:::::X L:::::L
|
|
// XXX:::::X X:::::XXX L:::::L LLLLLL
|
|
// X::::::X X::::::XLL:::::::LLLLLLLLL:::::L
|
|
// X:::::X X:::::XL::::::::::::::::::::::L
|
|
// X:::::X X:::::XL::::::::::::::::::::::L
|
|
// XXXXXXX XXXXXXXLLLLLLLLLLLLLLLLLLLLLLLL
|
|
@include media-breakpoint-up(xl) { // >= 1200px
|
|
}
|
|
|
|
// XXXXXXX XXXXXXXXXXXXXX XXXXXXXLLLLLLLLLLL
|
|
// X:::::X X:::::XX:::::X X:::::XL:::::::::L
|
|
// X:::::X X:::::XX:::::X X:::::XL:::::::::L
|
|
// X::::::X X::::::XX::::::X X::::::XLL:::::::LL
|
|
// XXX:::::X X:::::XXXXXX:::::X X:::::XXX L:::::L
|
|
// X:::::X X:::::X X:::::X X:::::X L:::::L
|
|
// X:::::X:::::X X:::::X:::::X L:::::L
|
|
// X:::::::::X X:::::::::X L:::::L
|
|
// X:::::::::X X:::::::::X L:::::L
|
|
// X:::::X:::::X X:::::X:::::X L:::::L
|
|
// X:::::X X:::::X X:::::X X:::::X L:::::L
|
|
// XXX:::::X X:::::XXXXXX:::::X X:::::XXX L:::::L LLLLLL
|
|
// X::::::X X::::::XX::::::X X::::::XLL:::::::LLLLLLLLL:::::L
|
|
// X:::::X X:::::XX:::::X X:::::XL::::::::::::::::::::::L
|
|
// X:::::X X:::::XX:::::X X:::::XL::::::::::::::::::::::L
|
|
// XXXXXXX XXXXXXXXXXXXXX XXXXXXXLLLLLLLLLLLLLLLLLLLLLLLL
|
|
@include media-breakpoint-up(xxl) { // >= 1400px
|
|
.wrapper-xxl { max-width: 1440px; }
|
|
}
|