/*====================================================

Solaris Animation V2
style.css
Version 2.0

====================================================*/

:root{

--primary:#00b8ff;
--secondary:#1f6fff;
--dark:#050505;
--dark2:#0b0b0b;
--card:#101010;
--text:#ffffff;
--text2:#bcbcbc;
--border:rgba(255,255,255,.08);

--radius:18px;

--transition:.35s;

--shadow:0 15px 45px rgba(0,184,255,.15);

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

background:var(--dark);
color:var(--text);
font-family:Poppins,sans-serif;
overflow-x:hidden;

}

img{

display:block;
max-width:100%;

}

a{

text-decoration:none;
color:inherit;

}

ul{

list-style:none;

}

.container{

width:min(1400px,92%);
margin:auto;

}

/*======================
HEADER
======================*/

.header{

position:fixed;
top:0;
left:0;
width:100%;
z-index:999;

background:rgba(5,5,5,.65);

backdrop-filter:blur(15px);

transition:.4s;

}

.header.scrolled{

background:#050505;

box-shadow:0 10px 35px rgba(0,0,0,.45);

}

.header .container{

height:95px;

display:flex;

justify-content:space-between;

align-items:center;

}

.logo img{

height:65px;

}

.navbar{

display:flex;

gap:40px;

}

.navbar a{

font-weight:500;

position:relative;

transition:.3s;

}

.navbar a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:var(--primary);

transition:.3s;

}

.navbar a:hover::after,

.navbar .active::after{

width:100%;

}

.navbar a:hover{

color:var(--primary);

}

.btn-header{

padding:14px 28px;

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

border-radius:40px;

font-weight:600;

transition:.35s;

}

.btn-header:hover{

transform:translateY(-4px);

box-shadow:var(--shadow);

}

.menu-btn{

display:none;

font-size:34px;

cursor:pointer;

}

/*======================
PAGE HERO
======================*/

.page-hero{

height:75vh;

position:relative;

display:flex;

justify-content:center;

align-items:center;

overflow:hidden;

}

.page-hero img{

position:absolute;

width:100%;

height:100%;

object-fit:cover;

}

.overlay{

position:absolute;

inset:0;

background:

linear-gradient(rgba(0,0,0,.70),rgba(0,0,0,.75));

}

.hero-content{

position:relative;

z-index:2;

width:min(1200px,92%);

margin:auto;
text-align:center;

}

.hero-content span{

display:inline-block;

margin-bottom:20px;

letter-spacing:4px;

color:var(--primary);

font-weight:600;

}

.hero-content h1{

font-family:'Montserrat',sans-serif;

font-size:clamp(58px,6vw,96px);

font-weight:800;

line-height:1.05;

margin-bottom:30px;

max-width:1200px;

margin-left:auto;

margin-right:auto;

}

.hero-content p{

max-width:900px;

margin:auto;

margin-bottom:45px;

font-size:22px;

line-height:1.8;

}

/*======================
SECTIONS
======================*/

.section{

padding:120px 0;

}

.section-title{

text-align:center;

margin-bottom:70px;

}

.section-title span{

color:var(--primary);

font-weight:600;

letter-spacing:2px;

}

.section-title h2{

font-family:Montserrat;

font-size:48px;

margin:15px 0;

}

.section-title p{

max-width:700px;

margin:auto;

color:var(--text2);

line-height:1.8;

}

/*======================
SERVICES
======================*/

.service-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(340px,1fr));

gap:35px;

}

.service-card{

background:var(--card);

border:1px solid var(--border);

border-radius:var(--radius);

overflow:hidden;

transition:var(--transition);

box-shadow:0 10px 25px rgba(0,0,0,.25);

}

.service-card:hover{

transform:translateY(-12px);

border-color:var(--primary);

box-shadow:0 20px 50px rgba(0,184,255,.25);

}

.service-card img{

width:100%;

height:260px;

object-fit:cover;

transition:.5s;

}

.service-card:hover img{

transform:scale(1.08);

}

.service-text{

padding:35px;

}

.service-text h3{

font-size:28px;

font-family:Montserrat;

margin-bottom:18px;

}

.service-text p{

color:var(--text2);

line-height:1.8;

margin-bottom:20px;

}

.service-text ul{

display:flex;

flex-direction:column;

gap:12px;

}

.service-text li{

padding-left:22px;

position:relative;

color:#ddd;

}

.service-text li::before{

content:"✓";

position:absolute;

left:0;

color:var(--primary);

font-weight:bold;

}

/*======================
NUMBERS
======================*/

.numbers{

padding:90px 0;

background:#090909;

}

.numbers .container{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:30px;

}

.number{

text-align:center;

padding:35px;

background:var(--card);

border-radius:var(--radius);

border:1px solid var(--border);

transition:.35s;

}

.number:hover{

transform:translateY(-8px);

border-color:var(--primary);

}

.number h2{

font-size:60px;

font-family:Montserrat;

color:var(--primary);

margin-bottom:12px;

}

.number span{

color:var(--text2);

}

/*======================
PREMIUM CTA
======================*/

.premium{

padding:120px 0;

}

.premium-box{

display:flex;

justify-content:space-between;

align-items:center;

gap:50px;

padding:70px;

border-radius:30px;

background:

linear-gradient(145deg,#0d0d0d,#181818);

border:1px solid rgba(255,255,255,.08);

}

.premium-box h2{

font-size:48px;

font-family:Montserrat;

margin-bottom:20px;

}

.premium-box p{

color:var(--text2);

line-height:1.9;

max-width:700px;

}

.btn-primary{

display:inline-block;

padding:18px 38px;

border-radius:50px;

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

font-weight:600;

transition:.35s;

}

.btn-primary:hover{

transform:translateY(-5px);

box-shadow:0 20px 45px rgba(0,184,255,.30);

}

.btn-secondary{

display:inline-block;

padding:18px 38px;

border-radius:50px;

border:2px solid var(--primary);

transition:.35s;

}

.btn-secondary:hover{

background:var(--primary);

}

/*======================
FOOTER
======================*/

footer{

margin-top:120px;

background:#050505;

border-top:1px solid var(--border);

}

.footer-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr;

gap:60px;

padding:70px 0;

}

.footer-grid h3{

margin-bottom:20px;

font-family:Montserrat;

}

.footer-grid p{

color:var(--text2);

line-height:1.8;

}

.footer-grid a{

display:block;

margin:12px 0;

color:var(--text2);

transition:.3s;

}

.footer-grid a:hover{

color:var(--primary);

padding-left:8px;

}

.copyright{

padding:25px;

text-align:center;

border-top:1px solid var(--border);

color:#888;

font-size:15px;

}

/*======================
GALLERY
======================*/

.gallery-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

gap:25px;

}

.gallery-item{

position:relative;

overflow:hidden;

border-radius:var(--radius);

border:1px solid var(--border);

background:#111;

cursor:pointer;

}

.gallery-item img{

width:100%;

height:300px;

object-fit:cover;

transition:.5s;

}

.gallery-item:hover img{

transform:scale(1.12);

}

.gallery-overlay{

position:absolute;

inset:0;

display:flex;

justify-content:center;

align-items:center;

flex-direction:column;

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

opacity:0;

transition:.35s;

}

.gallery-item:hover .gallery-overlay{

opacity:1;

}

.gallery-overlay h3{

font-size:28px;

font-family:Montserrat;

margin-bottom:10px;

}

.gallery-overlay span{

color:var(--primary);

font-size:14px;

letter-spacing:3px;

}

/*======================
AVIS
======================*/

.avis-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(340px,1fr));

gap:30px;

}

.avis-card{

background:var(--card);

padding:40px;

border-radius:var(--radius);

border:1px solid var(--border);

transition:.35s;

}

.avis-card:hover{

transform:translateY(-10px);

border-color:var(--primary);

box-shadow:0 15px 40px rgba(0,184,255,.20);

}

.stars{

font-size:24px;

color:#FFD54A;

margin-bottom:20px;

}

.avis-card p{

line-height:1.9;

color:var(--text2);

margin-bottom:25px;

}

.avis-card h3{

font-family:Montserrat;

margin-bottom:5px;

}

.avis-card span{

color:var(--primary);

font-size:14px;

}

/*======================
LEGAL
======================*/

.legal{

max-width:1000px;

margin:auto;

background:#111;

padding:60px;

border-radius:20px;

border:1px solid var(--border);

}

.legal h2{

margin-bottom:20px;

font-family:Montserrat;

color:var(--primary);

}

.legal p{

line-height:2;

color:var(--text2);

margin-bottom:30px;

}

.legal ul{

padding-left:20px;

list-style:disc;

color:var(--text2);

margin-bottom:30px;

}

.legal li{

margin:10px 0;

}

.legal hr{

margin:45px 0;

border:none;

height:1px;

background:rgba(255,255,255,.08);

}

/*======================
FORMULAIRES
======================*/

form{

display:flex;

flex-direction:column;

gap:22px;

}

input,
textarea,
select{

width:100%;

padding:18px 22px;

border-radius:14px;

border:1px solid rgba(255,255,255,.08);

background:#151515;

color:#fff;

font-size:16px;

outline:none;

transition:.3s;

}

input:focus,
textarea:focus,
select:focus{

border-color:var(--primary);

box-shadow:0 0 20px rgba(0,184,255,.15);

}

textarea{

min-height:180px;

resize:vertical;

}

button{

cursor:pointer;

border:none;

font-size:16px;

}

/*======================
HERO VIDEO
======================*/

.hero{

position:relative;

height:100vh;

overflow:hidden;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

}

.hero video{

position:absolute;

top:50%;

left:50%;

width:100%;

height:100%;

object-fit:cover;

transform:translate(-50%,-50%);

}

.hero::before{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(180deg,
rgba(0,0,0,.65),
rgba(0,0,0,.55),
rgba(0,0,0,.85));

z-index:1;

}

.hero-content{

position:relative;

z-index:2;

width:min(900px,90%);

}

.hero-content h1{

font-size:82px;

font-family:Montserrat;

margin-bottom:25px;

line-height:1.1;

text-shadow:0 10px 40px rgba(0,0,0,.6);

}

.hero-content p{

max-width:900px;

margin:auto;

margin-bottom:45px;

font-size:22px;

line-height:1.8;

}

.hero-buttons{

margin-top:45px;

display:flex;

justify-content:center;

align-items:center;

gap:25px;

flex-wrap:wrap;

}
/*======================
SCROLL INDICATOR
======================*/

.scroll-indicator{

position:absolute;

bottom:40px;

left:50%;

transform:translateX(-50%);

z-index:5;

display:flex;

flex-direction:column;

align-items:center;

animation:bounce 2s infinite;

}

.scroll-indicator span{

font-size:14px;

letter-spacing:3px;

color:#ddd;

}

.scroll-indicator::after{

content:"";

margin-top:12px;

width:2px;

height:45px;

background:var(--primary);

}

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

.fade-up{

opacity:0;

transform:translateY(60px);

transition:1s;

}

.fade-up.visible{

opacity:1;

transform:translateY(0);

}

.zoom{

overflow:hidden;

}

.zoom img{

transition:.6s;

}

.zoom:hover img{

transform:scale(1.1);

}

.glow{

box-shadow:

0 0 15px rgba(0,184,255,.25),

0 0 35px rgba(0,184,255,.15),

0 0 70px rgba(0,184,255,.08);

}

/*======================
CUSTOM SCROLLBAR
======================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#070707;

}

::-webkit-scrollbar-thumb{

background:linear-gradient(

180deg,

var(--primary),

var(--secondary)

);

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#00d4ff;

}

/*======================
SELECTION
======================*/

::selection{

background:var(--primary);

color:white;

}

/*======================
KEYFRAMES
======================*/

@keyframes bounce{

0%,100%{

transform:translate(-50%,0);

}

50%{

transform:translate(-50%,10px);

}

}

@keyframes float{

0%,100%{

transform:translateY(0px);

}

50%{

transform:translateY(-15px);

}

}

@keyframes fade{

from{

opacity:0;

}

to{

opacity:1;

}

}

@keyframes shine{

0%{

background-position:-200px;

}

100%{

background-position:400px;

}

}

/*======================
ADMINISTRATION
======================*/

.admin-login{

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

background:
linear-gradient(135deg,#050505,#101010);

}

.login-box{

width:450px;

padding:50px;

background:#111;

border-radius:20px;

border:1px solid var(--border);

box-shadow:0 20px 60px rgba(0,0,0,.45);

}

.login-box h1{

text-align:center;

margin-bottom:35px;

font-family:Montserrat;

}

.login-box button{

width:100%;

padding:18px;

border:none;

border-radius:50px;

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

color:#fff;

font-size:16px;

font-weight:600;

transition:.35s;

}

.login-box button:hover{

transform:translateY(-3px);

box-shadow:var(--shadow);

}

.error{

padding:15px;

margin-bottom:20px;

border-radius:12px;

background:#b00020;

color:#fff;

text-align:center;

}

/*======================
TABLEAUX
======================*/

table{

width:100%;

border-collapse:collapse;

margin-top:30px;

background:#111;

border-radius:18px;

overflow:hidden;

}

table th{

background:#181818;

padding:18px;

text-align:left;

font-family:Montserrat;

}

table td{

padding:18px;

border-top:1px solid rgba(255,255,255,.06);

color:#ddd;

}

table tr:hover{

background:#171717;

}

/*======================
BADGES
======================*/

.badge{

display:inline-block;

padding:8px 16px;

border-radius:30px;

font-size:13px;

font-weight:600;

}

.badge-success{

background:#22c55e;

color:white;

}

.badge-warning{

background:#f59e0b;

color:white;

}

.badge-danger{

background:#ef4444;

color:white;

}

/*======================
ALERTES
======================*/

.alert{

padding:18px 25px;

border-radius:15px;

margin-bottom:30px;

}

.alert-success{

background:#0f5132;

border-left:5px solid #22c55e;

}

.alert-error{

background:#58151c;

border-left:5px solid #ef4444;

}

.alert-info{

background:#082032;

border-left:5px solid var(--primary);

}

/*======================
CARDS ADMIN
======================*/

.dashboard-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:30px;

}

.dashboard-card{

padding:35px;

background:#111;

border-radius:20px;

border:1px solid var(--border);

transition:.35s;

}

.dashboard-card:hover{

transform:translateY(-8px);

border-color:var(--primary);

}

.dashboard-card h3{

margin-bottom:15px;

font-family:Montserrat;

}

.dashboard-card p{

color:#bbb;

line-height:1.7;

}

/*======================
LOADER
======================*/

.loader{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:#050505;

display:flex;

justify-content:center;

align-items:center;

z-index:99999;

transition:.6s;

}

.loader.hidden{

opacity:0;

visibility:hidden;

}

.loader-logo{

width:140px;

animation:float 2s ease-in-out infinite;

}

/*======================
RETOUR EN HAUT
======================*/

#backToTop{

position:fixed;

right:30px;

bottom:30px;

width:55px;

height:55px;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

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

cursor:pointer;

opacity:0;

visibility:hidden;

transition:.35s;

z-index:900;

}

#backToTop.show{

opacity:1;

visibility:visible;

}

#backToTop:hover{

transform:translateY(-5px);

box-shadow:var(--shadow);

}

/*======================
UTILITAIRES
======================*/

.text-center{

text-align:center;

}

.mt-1{margin-top:10px;}
.mt-2{margin-top:20px;}
.mt-3{margin-top:30px;}
.mt-4{margin-top:40px;}
.mt-5{margin-top:50px;}

.mb-1{margin-bottom:10px;}
.mb-2{margin-bottom:20px;}
.mb-3{margin-bottom:30px;}
.mb-4{margin-bottom:40px;}
.mb-5{margin-bottom:50px;}

.pt-1{padding-top:20px;}
.pt-2{padding-top:40px;}
.pt-3{padding-top:60px;}

.pb-1{padding-bottom:20px;}
.pb-2{padding-bottom:40px;}
.pb-3{padding-bottom:60px;}

/*======================
GLASS EFFECT
======================*/

.glass{

background:rgba(255,255,255,.05);

backdrop-filter:blur(12px);

border:1px solid rgba(255,255,255,.08);

border-radius:20px;

}

/*======================
IMAGE HOVER
======================*/

.image-hover{

overflow:hidden;

border-radius:20px;

}

.image-hover img{

transition:.6s;

}

.image-hover:hover img{

transform:scale(1.08);

}

/*======================
GRADIENT TEXT
======================*/

.gradient-text{

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

background-size:300%;

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

animation:gradientMove 6s linear infinite;

}



.gradient-text2{

background:linear-gradient(
180deg,
var(--primary),
#f00ef0,
var(--secondary)
);

background-size:300%;

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

animation:gradientMove 6s linear infinite;

}
/*======================
SECTION BACKGROUND
======================*/

.bg-dark{

background:#090909;

}

.bg-card{

background:#111;

}

/*======================
TRANSITIONS
======================*/

.transition{

transition:.35s ease;

}

/*======================
BOUTONS
======================*/

.btn{

display:inline-flex;

justify-content:center;

align-items:center;

gap:10px;

padding:16px 34px;

border-radius:50px;

font-weight:600;

transition:.35s;

cursor:pointer;

}

.btn:hover{

transform:translateY(-4px);

}

.btn-outline{

border:2px solid var(--primary);

background:transparent;

}

.btn-outline:hover{

background:var(--primary);

}

/*======================
ANIMATION TITRES
======================*/

.section-title h2{

position:relative;

display:inline-block;

}

.section-title h2::after{

content:"";

position:absolute;

left:50%;

bottom:-15px;

transform:translateX(-50%);

width:80px;

height:4px;

border-radius:20px;

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

}

/*======================
KEYFRAMES
======================*/

@keyframes gradientMove{

0%{

background-position:0%;

}

100%{

background-position:300%;

}

}

/*======================
FIN DU FICHIER
======================*/


/*====================================================
HERO PREMIUM V3
====================================================*/

.hero{

position:relative;

display:flex;

align-items:center;

justify-content:center;

height:100vh;

overflow:hidden;

background:#000;

}

.hero-video{

position:absolute;

top:50%;

left:50%;

width:100%;

height:100%;

object-fit:cover;

transform:translate(-50%,-50%) scale(1.05);

filter:brightness(.45);

}

.hero-overlay{

position:absolute;

inset:0;

background:

linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.75));

z-index:1;

}

.hero-content{

position:relative;

z-index:3;

text-align:center;

max-width:1100px;

margin:auto;

}

.hero-subtitle{

display:inline-block;

padding:12px 22px;

border-radius:40px;

background:rgba(255,255,255,.08);

border:1px solid rgba(255,255,255,.12);

backdrop-filter:blur(15px);

letter-spacing:3px;

font-size:13px;

margin-bottom:35px;

}

.hero-content h1{

font-size:clamp(60px,7vw,110px);

font-weight:800;

line-height:1.05;

margin-bottom:35px;

}

.hero-content p{

font-size:23px;

max-width:900px;

margin:auto;

margin-bottom:50px;

line-height:1.8;

color:#d5d5d5;

}

.hero-light{

position:absolute;

width:650px;

height:650px;

border-radius:50%;

filter:blur(120px);

opacity:.18;

animation:floatLight 8s ease-in-out infinite;

z-index:2;

}

.hero-light-1{

background:#00b8ff;

left:-180px;

top:-200px;

}

.hero-light-2{

background:#005dff;

right:-180px;

bottom:-220px;

animation-delay:3s;

}

@keyframes floatLight{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(50px);

}

100%{

transform:translateY(0px);

}

}