| Current Path : /home/happyrenas/old/devis-huissier.fr/old/components/scss/ |
Linux webd005.cluster105.gra.hosting.ovh.net 5.15.206-ovh-vps-grsec-zfs-classid #1 SMP Fri May 15 02:41:25 UTC 2026 x86_64 |
| Current File : /home/happyrenas/old/devis-huissier.fr/old/components/scss/_placeholders.scss |
.header {
nav {
@include position(relative,10);
height:8.5rem;
}
#logo {
z-index:5;
height:8.5rem;
}
#menu {
height:8.5rem;
display:flex;
align-items:center;
justify-content: space-between;
>li {
color:$noir;
font-size:18px;
font-family:$font-alt;
height:100%;
line-height:8.5rem;
a:hover {
color:$violet;
}
&.active {
>a {
color:$violet!important;
position:relative;
&:after {
content:''; display:block;
width:100%; height:1px; background:$violet;
position:absolute; bottom:-10px;
}
}
}
}
ul.sous-menu {
position:fixed;
top:8.5rem;
left:0;
right:0;
opacity:0.5;
max-height:0;
background:$violet;
overflow:hidden;
transition:all .3s ease-out;
.row {
padding:0px 0px;
transition:all .3s ease-out;
}
.titre-sous-menu {
line-height:60px;
padding:0 45px;
font-size:3rem;
font-family:$font-i;
letter-spacing:.1em;
}
div.col-md-10 {
-webkit-columns: 3;
-moz-columns: 3;
columns: 3;
column-gap : 30px;
-webkit-column-gap : 30px;
-moz-column-gap : 30px;
padding:0 45px;
li {
width:100%;
line-height:60px;
border-bottom:solid 1px rgba(255,255,255,.2);
font-size:16px;
font-family:$font-i;
letter-spacing:.1em;
a:hover {
color:rgba(255,255,255,.5);
}
}
}
}
li:hover {
ul.sous-menu {
max-height:65rem;
opacity:1;
transition:all .5s ease-out .3s;
.row {
padding:50px 0px;
transition:all .5s ease-out .3s;
}
}
}
}
#visuel-header {
height:61.5rem;
background-size:cover;
background-repeat:no-repeat;
background-position:center center;
.container {
top:50%;
transform: translateY(-50%);
}
}
&.accueil {
height:100%;
#visuel-header {
height:calc(100% - 8.5rem);
background-image:url('../images/header/home.jpg');
}
.bouton.video {
padding:0 5rem;
}
}
}
.section {
header.vert.bg {
padding:5rem 0;
position:relative;
p {
color:$blanc;
font-size:4rem;
letter-spacing:.1em;
}
}
.titre-sous-section {
padding:5rem 0;
p {
font-size:2.6rem;
letter-spacing:.1em;
}
}
>article.container, >section.container {
padding-top:11rem;
padding-bottom:11rem;
+article.container, +section.container {
padding-top:0rem!important;
}
+article.container {
margin-top:-8rem;
}
+section.container {
margin-top:-5rem;
}
.row+.row {
margin-top:7.5rem;
}
.titre-article {
display:flex;
align-items:center;
justify-content: flex-start;
margin-bottom:2.5rem;
.h2 {
margin-bottom:0;
}
[class^="icon-"], [class*=" icon-"],img {
font-size:7rem;
margin-right:2.5rem;
max-width:7rem;
}
}
.txt-article {
padding-right:7rem;
&.alt {
padding-right:15px;
}
strong {
font-size:18px;
text-transform: uppercase;
font-family:$font-alt-b;
}
}
figure {
overflow:hidden;
position:absolute;
right:0;
top:0;
bottom:0;
p {
height:100%;
overflow:hidden;
width:100%;
display:flex;
justify-content: center;
align-items: center;
img {
height:100%;
width:auto;
}
}
&.alt {
left:0; right:auto;
}
}
}
aside.bandeau-gris {
background:#e9e9e7;
padding:5rem 0;
.container.lien {
+.container.lien {
margin-top:15px;
}
.row {
display:flex;
padding:0 15px;
div {
padding:0 30px;
display:flex;
align-items:center;
font-size:2.2rem;
letter-spacing:.1em;
text-transform:uppercase;
[class^="icon-"].vert {
font-size:5.5rem;
}
[class^="icon-"].rond {
font-size:5rem;
}
em {
margin:0 2rem;
}
.icon-telecharger-bilan {
@include icon(5rem);
}
}
}
}
}
aside.bandeau-info {
background:$violet;
padding:4rem 0;
.container {
display:flex;
align-items: center;
justify-content:space-between;
.icon-carpodrome {
@include icon(8rem);
background:$blanc;
border-radius:50%;
}
em {
font-size:4rem;
line-height:normal;
@include dsp-ib(top);
padding:2rem 5rem 2rem 0;
border-right:solid 1px rgba(255,255,255,.1);
}
p {
margin:0 5rem;
}
}
}
&.partenaires {
background:#f0f0f0;
.partenaire-details {
>div {
background:$blanc;
header {
line-height:12rem;
padding:0 2rem;
border-bottom:solid 1px rgba(0,0,0,.2);
img {
max-height:8rem;
max-width:20rem;
}
img + img {
margin-left:3rem;
}
}
>div {
height:23rem;
display:flex;
justify-content:center;
padding:0 2rem;
flex-direction: column;
h3 {
margin-bottom:10px;
}
}
}
}
}
}
body>footer {
#menu-footer {
height:11rem;
display:flex;
align-items: center;
justify-content: space-between;
font-size:18px;
font-family:$font-alt;
color:$noir;
li.active {
color:$violet;
}
a:hover {
color:$violet-hover;
}
.round {
border-radius:50%;
width:40px; height:40px; line-height:40px;
&:before {
@include icon(18px);
}
}
}
.textes {
padding:7rem 0;
border-top:solid 1px $gris-alt;
border-bottom:solid 1px $gris-alt;
form {
b {
font-size:20px;
font-family:$font-alt;
display:inline-block;
margin-bottom:20px;
width:100%; text-align:center;
}
.bouton {
height:50px;
line-height:50px;
font-size:16px;
width:100%;
&:hover {
background:$gris-hover;
}
}
input[type=email] {
width:70%;
background:#e9e9e7;
padding:0 15px;
height:50px;
font-size:14px;
float:left;
}
button.bouton {
width:30%;
padding:0 0;
float:left;
&:hover {
background:$violet-hover;
}
}
}
}
.images {
padding:3rem 0;
p {
text-align:right;
img {
max-height:10rem;
display:inline-block;
margin-left:15px;
vertical-align:middle;
&.logo-edf {
max-height:40px;
}
}
}
}
}
.poissons {
>header {
background:$gris-alt;
padding:4rem 0;
p {
letter-spacing:.1em;
color:$noir;
font-size:2.6rem;
}
}
.poisson-detail {
padding:5rem 15px 7rem 15px;
border-bottom:solid 1px $gris-alt;
>header {
display: flex;
align-items: center;
.nom-poisson {
.h2 {
@include dsp-ib(top);
margin:0;
@include position(relative);
em {
color:$gris;
font-size:2.6rem;
text-transform: none;
}
}
[class^="icon-"],[class*=" icon-"] {
@include icon(25px);
@include position(absolute,1,0px,-35px,auto,auto);
}
&:after {
display:block; content:'';
width:62.5%;
position:absolute;
bottom:10px;
right:15px;
border-bottom:solid 1px $gris-alt;
height:1px;
}
}
}
.description-poisson {
margin-top:10px;
>div {
&:first-child {
padding-right:0px;
p.violet.bg {
padding:3rem;
font-size:22px;
font-family:$font-bi;
text-transform: uppercase;
letter-spacing:.1em;
line-height:normal;
}
}
&:last-child {
}
}
.bouton {
@include position(absolute,1,auto,15px,-3rem,auto);
&:hover {
background:$violet-hover;
}
}
}
.h3 {
font-family:$font-bi;
margin-bottom:15px;
letter-spacing:.1em;
}
.reproduction {
margin-top:2rem;
.calendrier {
>div {
p {
padding-top:50px;
font-size:18px; color:$noir;
font-family:$font-alt-b;
}
&:before, &:after {
width:50%; display:block; content:'';
@include position(absolute,5,0,auto,auto,15px);
background:$gris-alt;
height:40px;
}
&:after {
@include position(absolute,5,0,-15px,auto,auto);
}
&:last-child:after {
right:15px;
}
&.full:after, &.full:before {
background:$vert;
}
&.first-half:before {
background:$vert;
}
&.last-half:after {
background:$vert;
}
}
}
}
}
.ecrevisse-detail {
padding:5rem 15px 7rem 15px;
border-bottom:solid 1px $gris-alt;
.description-ecrevisse {
.descriptif {
.h2 {
em {
color:$gris;
font-size:2.6rem;
text-transform: none;
}
}
}
.caracteristiques {
padding-left:0;
p.vert.bg {
padding:4rem 10rem;
font-size:22px;
font-family:$font-bi;
text-transform: uppercase;
letter-spacing:.1em;
line-height:normal;
color:$blanc;
}
.bouton {
float:right;
&:hover {
background:$violet-hover;
}
}
img {
position:absolute;
width:45rem;
margin:auto;
top:0; left:auto; bottom:60px; right:30rem;
}
}
}
}
}
/* --------------------------------------------
-----------------------------------------------
-----------------------------------------------
!----------- BREAKPOINTS
-----------------------------------------------
-----------------------------------------------
---------------------------------------------*/
/* --------------------
---------------- 1200PX
-------------------- */
@media (max-width: 1200px) {
.header {
#menu {
ul.sous-menu {
.titre-sous-menu {
line-height:50px;
padding:0 15px;
}
div.col-md-10 {
column-gap : 15px;
-webkit-column-gap : 15px;
-moz-column-gap : 15px;
padding:0 15px;
li {
line-height:50px;
font-size:16px;
letter-spacing:.05em;
}
}
}
}
}
.section {
header.vert.bg {
.pastille {
right:0;
left:0;
bottom:0;
top:auto;
min-width:12rem;
}
}
>article.container, >section.container {
.txt-article {
padding-right:4rem;
}
figure {
overflow:hidden;
position:absolute;
right:0;
top:0;
bottom:0;
display:flex;
justify-content: center;
align-items: center;
img {
height:100%;
width:auto;
}
}
}
&.partenaires {
.partenaire-details {
>div {
background:$blanc;
>div {
height:30rem;
}
}
}
}
}
body>footer {
#menu-footer {
font-size:17px;
.round {
width:35px; height:35px; line-height:35px;
&:before {
@include icon(16px);
}
}
}
.textes {
form {
b {
font-size:18px;
}
}
}
}
.poissons {
>header {
p {
font-size:2.6rem;
}
}
.poisson-detail {
>header {
.nom-poisson {
[class^="icon-"],[class*=" icon-"] {
@include icon(20px);
@include position(absolute,1,0px,-30px,auto,auto);
}
}
}
.description-poisson {
>div {
&:first-child {
padding-right:15px;
p.violet.bg {
font-size:22px;
line-height:normal;
}
}
}
}
.h3 {
margin-bottom:10px;
}
}
.ecrevisse-detail {
.description-ecrevisse {
.caracteristiques {
img {
position:absolute;
width:40rem;
margin:auto;
top:0; left:auto; bottom:60px; right:38rem;
}
}
}
}
}
}
/* --------------------
----------------- 992PX
-------------------- */
@media (max-width: 992px) {
.header {
#logo {
img {
max-width:14rem;
}
}
#bt-menu {
width:auto;
height:auto;
position:absolute;
top:0;
bottom:0;
margin:auto;
right:15px;
text-align:right;
color:$violet;
span {
@include icon(28px);
&.icon-close {
display:none;
}
}
&:hover {
color:$violet-hover;
}
}
#menu {
position:fixed;
top:0;
left:-33%;
bottom:0;
right:auto;
height:100%;
display:flex;
flex-direction: column;
background:$violet;
opacity:.25;
justify-content:center;
z-index:10;
transition:all .8s ease;
width:auto!important;
>li {
color:$blanc;
font-size:18px;
font-family:$font-i;
letter-spacing:.1em;
height:auto;
width:100%;
flex:1;
display:flex;
align-items: center;
line-height:normal;
border-bottom:solid 1px rgba(255,255,255,.1);
padding-right:70px;
a:hover {
color:rgba(255,255,255,.5);
}
&:last-child {
border:none;
}
.bt-sous-menu {
display:block;
width:30px;
height:30px;
border-radius:50%;
color:$blanc;
border:solid 1px;
margin-left:50px;
@include position(absolute,1,auto,15px,auto,auto);
margin:auto;
&:after {
position:absolute; display:inline-block;
margin:auto;
top:0; left:0; right:0; bottom:0;
content:'+';
font:20px $font-b;
line-height:24px;
}
&:hover {
background:rgba(255,255,255,.1);
}
}
&.active {
a {
color:$blanc!important;
&:after {
display:none;
}
}
>a {
padding-left:10px;
color:rgba(255,255,255,.5)!important;
position:relative;
}
}
}
ul.sous-menu {
position:absolute;
top:0;
bottom:0;
left:100%;
right:-180%;
opacity:.25;
max-height:100%;
height:100%;
max-width:0%;
background:$violet-hover;
overflow:hidden;
transition:all .3s ease 0s;
.container {
width:auto!important;
height:100%;
}
.row {
width:auto!important;
padding:0px 0px;
height:100%;
}
.titre-sous-menu {
line-height:60px;
padding:0 15px;
height:60px;
font-size:3rem;
font-family:$font-i;
letter-spacing:.1em;
width:auto!important;
}
div.col-md-10 {
-webkit-columns:0;
-moz-columns:0;
columns:0;
column-gap :0;
-webkit-column-gap :0;
-moz-column-gap :0;
padding:0 15px;
width:100%!important;
height:calc(100% - 60px);
display:flex;
flex-direction:column;
li {
width:auto!important;
line-height:normal;
border-bottom:solid 1px rgba(255,255,255,.2);
font-size:16px;
font-family:$font-i;
letter-spacing:.1em;
flex:1;
display:flex;
align-items:center;
max-height:80px;
a:hover {
color:rgba(255,255,255,.5);
}
&:last-child {
border:none;
}
}
}
.bt-close-sous-menu {
color:$blanc;
position:absolute;
top:18px;
right:20px;
width:auto;
height:auto;
z-index:15;
}
}
li:hover {
ul.sous-menu {
max-height:100%;
opacity:0;
transition:all .5s ease;
.row {
padding:0px 0px;
}
}
}
li.ouvert:hover {
ul.sous-menu {
opacity:1;
}
}
.ouvert ul.sous-menu {
opacity:1;
max-width:180%;
transition:all .5s ease .3s!important;
}
.bt-close-menu {
color:$blanc;
position:absolute;
top:12px;
font-size:18px;
right:20px;
width:auto;
height:auto;
z-index:10;
}
}
&.ouvert {
#menu {
opacity:1;
left:0;
}
}
}
.section {
aside.bandeau-gris {
.container.lien {
.row {
div {
font-size:18px;
}
}
}
}
.titre-sous-section {
p {
font-size:22px;
}
}
&.partenaires {
.partenaire-details {
margin-bottom:30px;
>div {
>div {
height:30rem;
}
}
}
}
}
body>footer {
nav.row {
p.col-xs-12 {
padding:3rem 15px;
text-align:right;
.bouton.round {
border-radius:50%;
}
span {
display:inline-block;
float:left;
a {
width:50px; height:50px; line-height:50px;
&:before {
@include icon(16px);
transform:rotate(180deg);
line-height:16px;
vertical-align:middle;
}
}
}
}
}
.textes {
padding:3rem 0;
form, p {
margin:4rem 0;
&.images {
padding:0 15px;
text-align:right;
img {
max-height:8rem;
display:inline-block;
margin-left:10px;
vertical-align:middle;
&.logo-edf {
max-height:30px;
}
}
}
}
}
.images {
p {
img {
max-height:8rem;
display:inline-block;
margin-left:15px;
vertical-align:middle;
&.logo-edf {
max-height:30px;
}
}
}
}
}
.poissons {
>header {
p {
font-size:18px;
}
}
.poisson-detail {
>header {
.nom-poisson {
.h2 {
em {
font-size:18px;
}
}
&:after {
display:none;
}
}
}
.description-poisson {
>div {
&:first-child {
p.violet.bg {
font-size:22px;
}
}
}
}
}
.ecrevisse-detail {
.description-ecrevisse {
.descriptif {
.h2 {
em {
font-size:18px;
}
}
}
.caracteristiques {
p.vert.bg {
padding:4rem 4rem 4rem 12rem;
font-size:18px;
}
img {
width:45rem;
top:0; left:auto; bottom:60px; right:30rem;
}
}
}
}
}
}
/* --------------------
----------------- 760PX
-------------------- */
@media (max-width: 760px) {
.header {
height:100%;
#bt-menu {
span {
@include icon(26px);
}
}
#menu {
left:-100%;
width:100%!important;
>li {
padding-right:0px;
}
ul.sous-menu {
position:fixed;
z-index:17;
left:-100%;
right:auto;
max-width:100%;
width:100%;
div.col-md-10 {
li {
width:100%;
max-height:50px;
}
}
}
.ouvert ul.sous-menu {
opacity:1;
max-width:100%;
left:0;
transition:all .5s ease 0s!important;
}
}
#visuel-header {
height:calc(100% - 8.5rem);
}
}
.section {
margin-bottom:20px;
header.vert.bg {
margin:15px 15px 0;
.pastille {
right:0;
left:auto;
bottom:0;
top:auto;
min-width:12rem;
}
p {
.bouton {
margin-top:2rem;
color:$vert!important;
&:hover {
background:rgba(255,255,255,.7);
color:$vert!important;
}
}
}
}
>article.container, >section.container, >aside {
opacity:0;
max-height:0;
overflow:hidden;
padding:0 15px!important;
transition:all .5s ease;
+article.container, +section.container {
margin-top:0;
}
.titre-article {
display:block;
padding-right:8rem;
.h2 {
span {
line-height:normal;
margin-top:1rem;
}
}
[class^="icon-"], [class*=" icon-"], img {
font-size:7rem;
margin-right:2.5rem;
position:absolute;
top:-2rem;
right:0px;
z-index:10;
}
}
.txt-article {
padding-right:15px;
}
figure {
overflow:hidden;
position:relative;
right:auto;
top:auto;
bottom:auto;
height:35vw;
margin-bottom:5rem;
p {
img {
height:auto;
width:100%;
}
}
}
}
.titre-sous-section {
p {
font-size:18px;
}
}
aside.bandeau-gris {
.container.lien {
.row {
display:block;
div {
height:auto;
padding:10px 15px;
font-size:16px;
.icon-arrow {
transform:rotate(90deg);
}
}
}
}
}
&.ouvert {
>article.container, >section.container {
opacity:1;
max-height:999rem;
padding:11rem 15px!important;
}
>article.container+article.container {
margin-top:-8rem;
}
>article.container+section.container {
margin-top:-5rem;
}
>aside.bandeau-gris {
opacity:1;
max-height:999rem;
padding:5rem 0px!important;
}
>aside.bandeau-info {
opacity:1;
max-height:999rem;
padding:4rem 0 4rem!important;
}
>aside.titre-sous-section {
opacity:1;
max-height:999rem;
padding:5rem 0 !important;
}
}
aside.bandeau-info {
.container {
display:flex;
flex-direction:column;
.icon-carpodrome {
@include icon(7rem);
background:$blanc;
border-radius:50%;
position:absolute;
top:-10px;
right:15px;
}
em {
font-size:4rem;
@include dsp-ib(top);
padding:0rem 2rem 2rem 2rem;
border-right:none;
border-bottom:solid 1px rgba(255,255,255,.1);
}
p {
margin:2rem 0;
text-align:center;
}
}
}
&.partenaires {
.partenaire-details {
>div {
header {
line-height:15rem;
img {
max-height:10rem;
max-width:24rem;
}
}
>div {
height:35rem;
}
}
}
}
}
body>footer {
border-top:solid 1px rgba(0,0,0,.1);
.textes {
padding:0;
p {
margin:4rem 0 0 0;
&.images {
padding:0 15px;
text-align:right;
}
}
form {
margin:6rem 0;
max-width:400px;
}
}
}
.poissons {
margin-bottom:30px;
>header {
margin:15px 15px 0;
p {
font-size:20px;
.bouton {
margin-top:2rem;
color:$gris!important;
&:hover {
background:rgba(255,255,255,.7);
color:$gris!important;
}
}
}
}
.poisson-detail {
padding:0 15px;
>header {
display:block;
.nom-poisson {
&:after {
bottom:7px;
width:40%;
display:block;
}
}
.image-poisson {
text-align:center;
img {
max-width:280px;
}
}
p:last-child {
text-align:center;
.bouton {
margin-top:2rem;
&:hover {
background:$vert-hover;
}
}
}
}
.description-poisson {
margin-top:0px;
>div {
margin:2rem 0;
&:first-child {
p.violet.bg {
padding:3rem;
font-size:20px;
}
}
&:last-child {
}
}
.bouton {
@include position(relative,1,auto,auto,auto,auto);
float:right;
margin-right:15px;
}
}
.h3 {
font-family:$font-bi;
margin-bottom:15px;
letter-spacing:.1em;
}
.reproduction {
margin-top:0px;
.calendrier {
>div {
margin-bottom:15px;
p {
padding-top:50px;
font-size:18px; color:$noir;
font-family:$font-alt-b;
}
&:before, &:after {
width:calc(50% - 15px); display:block; content:'';
@include position(absolute,1,0,auto,auto,15px);
background:$gris-alt;
height:40px;
}
&:after {
@include position(absolute,1,0,15px,auto,auto);
}
&:last-child:after {
right:15px;
}
&.full:after, &.full:before {
background:$vert;
}
&.first-half:before {
background:$vert;
}
&.last-half:after {
background:$vert;
}
}
}
}
>section, >article, >aside {
max-height:0px;
opacity:0;
transition:all .5s ease;
overflow:hidden;
}
&.ouvert > section, &.ouvert > article, &.ouvert > aside {
opacity:1;
max-height:999rem;
margin-top:20px;
}
}
>section, >article, >aside {
max-height:0px;
opacity:0;
transition:all .5s ease;
overflow:hidden;
padding:0 15px;
}
.ecrevisse-detail {
padding:0 15px;
.h2 {
em {
font-size:18px;
text-transform: none;
color:$gris;
}
}
.description-ecrevisse {
.caracteristiques {
margin-top:20px;
padding-left:15px;
p.vert.bg {
padding:4rem 10rem;
font-size:18px;
}
img {
position:relative;
top:0; left:0; bottom:0; right:0;
width:45rem;
}
}
}
>section, >article, >aside {
max-height:0px;
opacity:0;
transition:all .5s ease;
overflow:hidden;
}
&.ouvert > section, &.ouvert > article, &.ouvert > aside {
opacity:1;
max-height:999rem;
margin-top:20px;
}
}
}
.ouvert .poissons > section, .ouvert .poissons > article, .ouvert .poissons > aside {
opacity:1;
max-height:999rem;
&.poisson-detail {
padding:5rem 15px 7rem 15px;
}
&.ecrevisse-detail {
padding:5rem 15px 7rem 15px;
}
}
}