/*==========================
BACK TO TOP
==========================*/

.back-to-top{

position:fixed;

right:30px;

bottom:30px;

width:56px;

height:56px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:var(--primary);

color:#fff;

font-size:1.4rem;

box-shadow:var(--shadow);

opacity:0;

visibility:hidden;

transform:translateY(20px);

transition:.35s;

z-index:999;

}

.back-to-top.show{

opacity:1;

visibility:visible;

transform:none;

}

.back-to-top:hover{

background:var(--secondary);

}

/*==========================
SCROLL PROGRESS
==========================*/

.scroll-progress{

position:fixed;

top:0;

left:0;

height:4px;

width:0;

background:linear-gradient(90deg,var(--primary),var(--secondary));

z-index:99999;

transition:width .15s linear;

}

/*==========================
MENU OVERLAY
==========================*/

.menu-overlay{

position:fixed;

inset:0;

background:rgba(0,0,0,.55);

opacity:0;

visibility:hidden;

transition:.35s;

z-index:900;

}

.menu-overlay.is-visible{

opacity:1;

visibility:visible;

}

/*==========================
REVEAL
==========================*/

.reveal{

opacity:0;

transform:translateY(60px);

transition:all .8s ease;

}

.reveal.is-visible{

opacity:1;

transform:none;

}

/*==========================
LOADED IMAGES
==========================*/

img{

opacity:1;

transition:opacity .4s ease,transform .5s ease;

}

img[loading="lazy"]{

opacity:.2;

}

img.loaded{

opacity:1;

}

/*==========================
TOAST
==========================*/

.toast{

position:fixed;

left:50%;

bottom:40px;

transform:translateX(-50%) translateY(20px);

background:#163041;

color:#fff;

padding:16px 26px;

border-radius:40px;

font-weight:600;

opacity:0;

visibility:hidden;

transition:.35s;

z-index:999999;

}

.toast.show{

opacity:1;

visibility:visible;

transform:translateX(-50%);

}

/*==========================
ERROR
==========================*/

.error{

border-color:#d32f2f !important;

background:#fff5f5;

}

/*==========================
ANIMATIONS
==========================*/

@keyframes float{

0%{transform:translateY(0);}

50%{transform:translateY(-8px);}

100%{transform:translateY(0);}

}

@keyframes pulse{

0%{transform:scale(1);}

50%{transform:scale(1.08);}

100%{transform:scale(1);}

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:none;

}

}

/*==========================
RESPONSIVE 1200
==========================*/

@media(max-width:1200px){

.cards-grid,

.gallery-grid,

.reviews-grid{

grid-template-columns:repeat(2,1fr);

}

.why-grid,

.engagements-grid{

grid-template-columns:repeat(2,1fr);

}

.site-footer__grid{

grid-template-columns:repeat(2,1fr);

}

}

/*==========================
RESPONSIVE 992
==========================*/

@media(max-width:992px){

.grid-2,

.contact-grid,

.footer-cta__inner{

grid-template-columns:1fr;

display:grid;

}

.presentation__stats{

grid-template-columns:1fr 1fr;

}

.main-navigation{

position:fixed;

top:0;

right:-100%;

width:330px;

height:100vh;

background:#fff;

padding:120px 35px;

display:flex;

flex-direction:column;

align-items:flex-start;

justify-content:flex-start;

transition:.35s;

z-index:9999;

overflow:auto;

}

.main-navigation.is-open{

right:0;

}

.main-navigation ul{

flex-direction:column;

align-items:flex-start;

width:100%;

gap:0;

}

.main-navigation li{

width:100%;

}

.main-navigation a{

display:block;

padding:15px 0;

width:100%;

}

.menu-item-has-children>ul{

position:static;

display:none;

opacity:1;

visibility:visible;

transform:none;

box-shadow:none;

padding-left:20px;

background:none;

}

.menu-item-has-children.open>ul{

display:block;

}

.nav-toggle{

display:flex;

}

}

/*==========================
RESPONSIVE 768
==========================*/

@media(max-width:768px){

.section{

padding:80px 0;

}

.cards-grid,

.gallery-grid,

.reviews-grid,

.why-grid,

.engagements-grid,

.presentation__stats,

.area-list{

grid-template-columns:1fr;

}

.hero{

min-height:620px;

}

.hero__title{

font-size:2.7rem;

}

.hero__subtitle{

font-size:1.1rem;

}

.hero__actions{

flex-direction:column;

align-items:stretch;

}

.btn{

width:100%;

}

.contact-form .form-row{

grid-template-columns:1fr;

}

.site-footer__grid{

grid-template-columns:1fr;

}

.site-footer__bottom-inner{

flex-direction:column;

text-align:center;

}

.back-to-top{

right:18px;

bottom:18px;

width:50px;

height:50px;

}

}

/*==========================
RESPONSIVE 480
==========================*/

@media(max-width:480px){

.container{

width:min(100% - 24px,var(--container));

}

.site-header__inner{

height:78px;

}

.hero{

min-height:560px;

}

.hero__eyebrow{

font-size:.72rem;

}

.hero__trust{

flex-direction:column;

gap:10px;

}

.card,

.review,

.widget,

.contact-form{

padding:28px;

}

}

/*==========================
PRINT
==========================*/

@media print{

header,

footer,

.back-to-top,

.nav-toggle,

.footer-cta,

.menu-overlay{

display:none!important;

}

body{

background:#fff;

color:#000;

}

a{

text-decoration:underline;

}

}

/*==========================
ACCESSIBILITÉ
==========================*/

@media(prefers-reduced-motion:reduce){

*{

animation:none!important;

transition:none!important;

scroll-behavior:auto!important;

}

}