:root{
    --bg:#061219;
    --panel:#0B2230;
    --panel2:#0E2A3B;
    --text:#EAF3F7;
    --muted:#A9C0CC;
    --accent:#2BB7A8;
    --accent2:#7CE7DB;
    --stroke:rgba(255,255,255,.10);
    --shadow: 0 18px 60px rgba(0,0,0,.45);
    --shadow2: 0 10px 30px rgba(0,0,0,.35);
    --radius: 18px;
    --radius2: 28px;
    --max: 1180px;
  }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;
font-family: Manrope, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
color:var(--text);
background:
    radial-gradient(1200px 800px at 20% 10%, rgba(43,183,168,.22), transparent 55%),
    radial-gradient(1000px 700px at 80% 20%, rgba(124,231,219,.16), transparent 55%),
    radial-gradient(900px 600px at 55% 100%, rgba(43,183,168,.10), transparent 60%),
    linear-gradient(180deg, #061219 0%, #081820 55%, #061219 100%);
background-repeat: no-repeat;
overflow-x:hidden;
}

a{color:inherit}
.wrap{max-width:var(--max); margin:0 auto; padding:0 20px}

.btn{
display:inline-flex; align-items:center; justify-content:center;
gap:10px; padding:12px 16px;
border-radius:999px;
border:1px solid var(--stroke);
background: rgba(255,255,255,.06);
color:var(--text);
text-decoration:none;
font-weight:800;
letter-spacing:.2px;
box-shadow: var(--shadow2);
transition: transform .18s ease, background .18s ease, border-color .18s ease;
white-space:nowrap;
}
.btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.10); border-color:rgba(255,255,255,.16)}
.btn.primary{
background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
color:#032229;
border-color: transparent;
box-shadow: 0 18px 55px rgba(43,183,168,.25);
}
.btn.primary:hover{transform: translateY(-2px)}

header{
position:sticky; top:0; z-index:50;
backdrop-filter: blur(12px);
background: rgba(6,18,25,.55);
border-bottom:1px solid rgba(255,255,255,.06);
}
.nav{
display:flex; align-items:center; justify-content:space-between;
padding:14px 0;
gap:12px;
}
.brand{
display:flex; align-items:center; gap:12px;
text-decoration:none;
min-width: 210px;
}
.logo{
width:40px; height:40px; border-radius:14px;
background: rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.10);
display:flex; align-items:center; justify-content:center;
overflow:hidden;
box-shadow: var(--shadow2);
}
.logo img{width:100%; height:100%; object-fit:cover}
.brand b{font-size:14px; letter-spacing:.4px}
.brand small{display:block; color:var(--muted); font-weight:700; margin-top:2px}

nav ul{
list-style:none; margin:0; padding:0;
display:flex; gap:10px; align-items:center;
}
nav a{
text-decoration:none;
color:var(--muted);
font-weight:800;
font-size:13px;
padding:10px 10px;
border-radius:999px;
transition: color .18s ease, background .18s ease;
}
nav a:hover{color:var(--text); background: rgba(255,255,255,.06)}
.nav-right{display:flex; gap:10px; align-items:center}

.lang-toggle{
display:inline-flex;
border:1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.05);
border-radius:999px;
overflow:hidden;
}
.lang-toggle button{
appearance:none; border:0;
background:transparent;
color:var(--muted);
padding:10px 12px;
font-weight:900;
font-size:12px;
cursor:pointer;
letter-spacing:.3px;
}
.lang-toggle button.active{
background: rgba(124,231,219,.18);
color:var(--text);
}

/* HERO CINÉMATIQUE */
.hero{
position:relative;
padding:22px 0 20px;
}
.hero .hero-media{
border-radius: 34px;
overflow:hidden;
border:1px solid rgba(255,255,255,.10);
box-shadow: var(--shadow);
position:relative;
min-height: 520px;
background: #061219;
}
.hero .hero-media img{
position:absolute; inset:0;
width:100%; height:100%;
object-fit:cover;
transform: scale(1.03);
filter: contrast(1.05) saturate(1.05);
}
.hero .overlay{
position:absolute; inset:0;
background:
    radial-gradient(900px 520px at 20% 40%, rgba(43,183,168,.22), transparent 55%),
    radial-gradient(900px 520px at 80% 30%, rgba(124,231,219,.16), transparent 55%),
    linear-gradient(90deg, rgba(6,18,25,.82) 0%, rgba(6,18,25,.55) 40%, rgba(6,18,25,.20) 70%, rgba(6,18,25,.70) 100%),
    linear-gradient(180deg, rgba(6,18,25,.30) 0%, rgba(6,18,25,.72) 100%);
}
.hero .content{
position:relative;
padding: 34px;
max-width: 760px;
}
.pill{
display:inline-flex; align-items:center; gap:10px;
padding:8px 12px; border-radius:999px;
border:1px solid rgba(124,231,219,.22);
background: rgba(43,183,168,.10);
color:rgba(234,243,247,.84);
font-weight:900;
font-size:12px;
letter-spacing:.3px;
text-transform:uppercase;
}
h1{
margin:12px 0 10px;
font-size: clamp(30px, 4.2vw, 54px);
line-height: 1.04;
letter-spacing: -0.8px;
}
.sub{
color: var(--muted);
font-size: 16px;
line-height: 1.65;
margin: 0 0 18px;
max-width: 60ch;
font-weight:650;
}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.trust{
margin-top:18px;
display:flex; gap:10px; flex-wrap:wrap; align-items:center;
color: rgba(234,243,247,.78);
font-weight:800;
font-size:13px;
}
.dot{width:6px; height:6px; border-radius:99px; background: rgba(124,231,219,.7)}

/* Sections */
section{padding:46px 0}
.section-head{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:18px;
margin-bottom:18px;
}
h2{
margin:0;
font-size: clamp(22px, 2.2vw, 30px);
letter-spacing:-.4px;
}
.lead{color:var(--muted); font-weight:650; margin:6px 0 0; max-width:72ch; line-height:1.7}

/* Services */
.cards{display:grid; grid-template-columns: repeat(3, 1fr); gap:16px}
.card{
border:1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.04);
border-radius: var(--radius);
padding:18px;
box-shadow: var(--shadow2);
transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.card:hover{transform: translateY(-2px); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14)}
.icon{
width:44px; height:44px; border-radius:14px;
display:flex; align-items:center; justify-content:center;
background: rgba(124,231,219,.14);
border:1px solid rgba(124,231,219,.18);
margin-bottom:12px;
}
.card h3{margin:6px 0 6px; font-size:16px}
.card p{margin:0; color:var(--muted); line-height:1.65; font-weight:650; font-size:14px}

/* Galerie deluxe (masonry CSS columns) */
.masonry{
columns: 3;
column-gap: 14px;
}
.shot{
break-inside: avoid;
margin: 0 0 14px;
border-radius: 20px;
overflow:hidden;
border:1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.03);
box-shadow: var(--shadow2);
position:relative;
cursor: zoom-in;
transform: translateZ(0);
}
.shot img{
width:100%;
display:block;
height:auto;
transition: transform .35s ease, filter .35s ease;
filter: saturate(1.06) contrast(1.04);
}
.shot:hover img{transform: scale(1.03)}
.shot .cap{
position:absolute; inset:auto 12px 12px 12px;
display:flex; align-items:center; justify-content:space-between; gap:10px;
padding:10px 12px;
border-radius: 14px;
background: rgba(6,18,25,.60);
border:1px solid rgba(255,255,255,.10);
backdrop-filter: blur(10px);
opacity:0;
transform: translateY(6px);
transition: opacity .18s ease, transform .18s ease;
}
.shot:hover .cap{opacity:1; transform: translateY(0)}
.cap b{font-size:12px; letter-spacing:.2px}
.cap span{color: rgba(234,243,247,.75); font-weight:800; font-size:12px}

/* Avis */
.reviews{display:grid; grid-template-columns: repeat(3, 1fr); gap:16px}
.review{
border-radius: var(--radius);
border:1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.04);
padding:18px;
box-shadow: var(--shadow2);
}
.review .top{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px}
.stars{letter-spacing:1px}
.review p{margin:0; color:var(--muted); line-height:1.7; font-weight:650}
.review b{font-size:14px}
.review small{display:block; margin-top:10px; color:rgba(234,243,247,.75); font-weight:900}

/* About + Contact */
.split{grid-template-columns: 1.05fr .95fr; gap:16px}
.panel{
border-radius: 30px;
border:1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.04);
box-shadow: var(--shadow2);
padding:22px;
}
.panel p{color:var(--muted); font-weight:650; line-height:1.75; margin:10px 0 0}
.list{margin:14px 0 0; padding:0; list-style:none; display:grid; gap:10px}
.list li{display:flex; gap:10px; align-items:flex-start; color: var(--muted); font-weight:800}
.check{
width:22px; height:22px; border-radius:8px;
display:inline-flex; align-items:center; justify-content:center;
background: rgba(43,183,168,.14);
border:1px solid rgba(43,183,168,.20);
flex:0 0 auto;
margin-top:1px;
}

form{display:grid; gap:10px; margin-top:12px}
input, textarea{
width:100%;
padding:12px 12px;
border-radius: 14px;
border:1px solid rgba(255,255,255,.12);
background: rgba(0,0,0,.20);
color: var(--text);
font-weight:700;
outline:none;
}
input::placeholder, textarea::placeholder{color: rgba(234,243,247,.55); font-weight:700}
textarea{min-height:110px; resize:vertical}

footer{
padding:26px 0 40px;
border-top:1px solid rgba(255,255,255,.06);
color: rgba(234,243,247,.70);
}
.foot{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-weight:800}

/* Lightbox */
.lightbox{
position:fixed; inset:0;
background: rgba(6,18,25,.92);
display:none;
align-items:center;
justify-content:center;
padding: 22px;
z-index: 100;
}
.lightbox.open{display:flex}
.lb-inner{
width:min(1100px, 100%);
border-radius: 26px;
overflow:hidden;
border:1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.04);
box-shadow: var(--shadow);
position:relative;
}
.lb-inner img{
width:100%;
height:auto;
display:block;
max-height: 82vh;
object-fit: contain;
background: rgba(0,0,0,.18);
}
.lb-bar{
position:absolute; inset: 12px 12px auto 12px;
display:flex; justify-content:space-between; gap:10px; align-items:center;
pointer-events:none;
}
.lb-chip{
pointer-events:auto;
display:inline-flex; align-items:center; gap:10px;
padding:10px 12px;
border-radius: 999px;
background: rgba(6,18,25,.62);
border:1px solid rgba(255,255,255,.10);
backdrop-filter: blur(10px);
font-weight:900;
color: rgba(234,243,247,.88);
font-size:12px;
}
.lb-actions{
pointer-events:auto;
display:flex; gap:10px;
}
.lb-btn{
appearance:none; border:0;
cursor:pointer;
padding:10px 12px;
border-radius:999px;
background: rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.10);
color: var(--text);
font-weight:900;
}
.lb-btn:hover{background: rgba(255,255,255,.12)}

.float-left
{
float:left;
}

.float-right
{
float:right;
}

.float-clear
{
clear:both;
}

/* Responsive */
@media (max-width: 920px){
nav ul{display:none}
.cards{grid-template-columns: 1fr}
.reviews{grid-template-columns: 1fr}
.split{grid-template-columns: 1fr}
.masonry{columns: 1}
.hero .hero-media{min-height: 540px}
.hero .content{padding: 26px}
}
@media (min-width: 921px) and (max-width: 1160px){
.masonry{columns: 2}
}
@media (max-width: 420px){
.btn{width:100%}
.cta-row{flex-direction:column; align-items:stretch}
.hero .hero-media{min-height: 560px}
}

.reviews-wrapper {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(1, 1fr);
    grid-auto-rows: auto;
    padding-bottom: 10px;
}

.review-card {
    background: rgba(255,255,255,.04);
    border-radius: 14px;
    padding: 20px;
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: var(--shadow2);
    flex-shrink: 0;
}

.review-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.review-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
    color: #032229;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    margin-right: 12px;
}

.review-author {
    font-weight: bold;
    font-size: 16px;
}

.review-time {
    color: var(--muted);
    font-size: 13px;
    margin-top: 2px;
}

.review-stars {
    color: #fbbc04;
    font-size: 28px;
    margin-bottom: 12px;
    text-align:center;
}

.review-text {
    color: var(--muted);
    line-height: 1.5;
    font-weight: 650;
    overflow-wrap: break-word;
}

.blog-content
{
    margin-top:18px;
}

.blog-read-more
{
    margin-top:18px;
    text-align:center;
}

.blog-article
{
    margin-top:36px;
}

.blog-image
{
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.5rem auto;
    border-radius: 20px;
}

.blog-title
{
    float:left;
    width:100%;
}

.blog-date
{
    float:right;
    width:100%;
    padding-top:10px;
}

.blog-date-article
{
    padding-top:10px;
}

.grecaptcha-badge
{
    visibility: hidden;
}

.recaptcha-text
{
    color: var(--muted);
}

@media (max-width: 767px)
{
  .hidden-xs
  {
    display: none !important;
  }

  .lang-toggle
  {
    overflow:inherit;
  }  
}

@media (min-width: 992px)
{ 
    .blog-title
    {
        width:auto;
    }
    
    .blog-date
    {
        width:auto;
        padding-top:0;
    }

    .blog-date-article
    {
        padding-top:10px;
    }

    .reviews-wrapper 
    {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 450px;
    }
}