/* ================================================
   INDEX — L'Affranchi Vidéo
   ================================================ */


* { margin:0; padding:0; box-sizing:border-box; }

html, body{
font-family:'Outfit',sans-serif;
background:#000;
color:#fff;
overflow-x:hidden;
max-width:100%;
width:100%;
}

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

.hero-video{
position:relative;
width:100%;
height:100vh;
overflow:hidden;
display:block;
margin:0; padding:0;
}

.hero-video video{
position:absolute;
top:0; left:0;
width:100%; height:100%;
object-fit:cover;
object-position:center top;
display:block;
}

.hero-overlay{
position:absolute;
top:0; left:0;
width:100%; height:100%;
background:linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.15) 60%, rgba(0,0,0,0.3) 100%);
}

.hero-text{
position:absolute;
bottom:28%;
left:7%;
z-index:10;
}

.hero-tag{
font-size:16px;
font-weight:700;
letter-spacing:5px;
text-transform:uppercase;
color:#ffe600;
margin-bottom:16px;
margin-left:-2px;
text-shadow:0 0 20px rgba(255,230,0,0.4), 0 2px 8px rgba(0,0,0,0.6);
}

.hero-title{
font-size:110px;
font-weight:900;
line-height:0.9;
text-transform:uppercase;
color:#fff;
letter-spacing:-2px;
text-shadow:0 4px 40px rgba(0,0,0,0.5);
}

.hero-cinematic-wrap{
display:block;
margin-top:-10px;
}

.hero-cinematic-svg{
width:auto;
height:120px;
display:block;
}

.hero-sub{
margin-top:24px;
font-size:15px;
font-weight:600;
letter-spacing:4px;
text-transform:uppercase;
color:#fff;
text-shadow:0 2px 16px rgba(0,0,0,0.9), 0 0 40px rgba(0,0,0,0.8);
}

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

.section-video{
position:relative;
width:100%;
height:120vh;
overflow:hidden;
display:block;
margin-top:-2px; padding:0;
}

.section-video video,
.section-video .video-bg-wrap{
position:absolute;
top:0; left:0;
width:100%;
height:100%;
display:block;
opacity:0.35;
}

.section-header{
position:absolute;
top:6%;
left:50%;
transform:translateX(-50%);
text-align:center;
z-index:10;
width:100%;
}

.section-title{
font-size:32px;
font-weight:700;
letter-spacing:1px;
line-height:1.3;
color:#fff;
text-transform:uppercase;
text-shadow:0 2px 16px rgba(0,0,0,0.95);
}

.section-sub{
margin-top:12px;
font-size:16px;
font-weight:300;
color:rgba(255,255,255,0.8);
letter-spacing:1px;
text-shadow:0 2px 12px rgba(0,0,0,0.9);
}

.section-footer{
position:absolute;
bottom:8%;
left:50%;
transform:translateX(-50%);
text-align:center;
z-index:10;
width:100%;
}

.section-tags{
font-size:15px;
font-weight:700;
letter-spacing:3px;
color:#fff;
text-transform:uppercase;
text-shadow:0 2px 12px rgba(0,0,0,0.9);
}

.section-tagline{
margin-top:10px;
font-size:15px;
font-weight:300;
color:rgba(255,255,255,0.8);
letter-spacing:1px;
text-shadow:0 2px 12px rgba(0,0,0,0.9);
}

.section-cta{
margin-top:28px;
display:flex;
gap:20px;
justify-content:center;
align-items:center;
}

.btn{
text-decoration:none;
font-family:'Outfit',sans-serif;
font-size:13px;
font-weight:700;
letter-spacing:2.5px;
text-transform:uppercase;
padding:18px 44px;
border-radius:12px;
border:1px solid rgba(255,255,255,0.8);
color:#fff;
background:transparent;
transition:all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
cursor:pointer;
}

.btn:hover{
background:#fff;
color:#000;
border-color:#fff;
}

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

.cards{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
display:flex;
gap:40px;
align-items:flex-start;
}

.card{
position:relative;
cursor:pointer;
width:340px;
display:flex;
flex-direction:column;
filter:drop-shadow(0 8px 32px rgba(255,255,255,0.08));
transition:filter 0.4s ease;
}

.card:hover{
filter:drop-shadow(0 12px 40px rgba(255,255,255,0.18));
}

.card-img-wrap{
position:relative;
overflow:hidden;
width:100%;
height:440px;
flex-shrink:0;
border:1px solid rgba(255,255,255,0.2);
}

.card-border{
position:absolute;
top:0; left:0;
width:100%; height:100%;
pointer-events:none;
z-index:10;
overflow:visible;
}

.card-border rect{
fill:none;
stroke:#fff;
stroke-width:1.5;
filter:drop-shadow(0 0 6px rgba(255,255,255,0.8));
stroke-dasharray:2400;
stroke-dashoffset:2400;
transition:stroke-dashoffset 0.7s cubic-bezier(0.77, 0, 0.175, 1);
}

.card:hover .card-border rect{
stroke-dashoffset:0;
}

.card img{
width:100%; height:100%;
object-fit:cover;
display:block;
transition:transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.card:hover img{ transform:scale(1.12); }

.card-overlay{
position:absolute;
top:0; left:0;
width:100%; height:100%;
background:rgba(0,0,0,0.45);
display:flex;
align-items:center;
justify-content:center;
opacity:0;
transition:opacity 0.5s ease;
z-index:5;
}

.card-overlay span{
color:#fff;
font-size:11px;
font-weight:700;
letter-spacing:4px;
text-transform:uppercase;
opacity:0;
transform:translateY(10px);
transition:opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s;
border-bottom:1px solid rgba(255,255,255,0.5);
padding-bottom:4px;
}

.card:hover .card-overlay{ opacity:1; }
.card:hover .card-overlay span{ opacity:1; transform:translateY(0); }

.card-text{
height:130px;
padding:28px 20px 0 20px;
background:rgba(0,0,0,0.72);
border:1px solid rgba(255,255,255,0.2);
border-top:none;
backdrop-filter:blur(4px);
overflow:hidden;
}

.card-title{
font-weight:700;
font-size:18px;
letter-spacing:1.5px;
text-transform:uppercase;
color:#fff;
}

.card-sub{
margin-top:10px;
font-size:15px;
font-weight:300;
color:rgba(255,255,255,0.85);
line-height:1.75;
letter-spacing:0.2px;
}

/* ===== SPLIT SECTION ===== */

.split-section{
display:flex;
width:100%;
height:100vh;
overflow:hidden;
background:#000;
margin-top:-2px; padding:0;
}

.split-panel{
position:relative;
flex:1;
overflow:hidden;
cursor:pointer;
transition:flex 0.7s cubic-bezier(0.77, 0, 0.175, 1);
}

.split-section:hover .split-panel{ flex:0.6; }
.split-section:hover .split-panel:hover{ flex:1.4; }

.split-bg{
position:absolute;
top:0; left:0;
width:100%; height:100%;
background-size:cover;
background-position:center;
transition:transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.split-panel:hover .split-bg{ transform:scale(1.05); }

.split-vid{
position:absolute;
top:0; left:0;
width:100%; height:100%;
object-fit:cover;
transition:transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.split-panel:hover .split-vid{ transform:scale(1.05); }

.split-panel .video-bg-wrap{
position:absolute;
top:0; left:0;
width:100%; height:100%;
overflow:hidden;
}

.split-panel .video-bg-wrap video{
position:absolute;
top:50%; left:50%;
transform:translate(-50%,-50%) scale(1);
width:100%;
height:100%;
object-fit:cover;
transition:transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.split-panel:hover .video-bg-wrap video{
transform:translate(-50%,-50%) scale(1.05);
}

.split-overlay{
position:absolute;
top:0; left:0;
width:100%; height:100%;
background:linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.1) 100%);
transition:background 0.5s ease;
}

.split-panel:hover .split-overlay{
background:linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 60%, rgba(0,0,0,0.15) 100%);
}

.split-content{
position:absolute;
bottom:60px;
left:50px;
z-index:10;
}

.split-label{
font-size:20px;
font-weight:700;
letter-spacing:4px;
text-transform:uppercase;
color:#f5c400;
margin-bottom:14px;
text-shadow:0 2px 8px rgba(0,0,0,0.5);
}

.split-title{
font-size:36px;
font-weight:700;
line-height:1.2;
color:#fff;
text-transform:uppercase;
letter-spacing:1px;
text-shadow:0 2px 20px rgba(0,0,0,0.8);
transform:translateY(8px);
transition:transform 0.5s ease;
}

.split-panel:hover .split-title{ transform:translateY(0); }

.split-btn{
display:inline-block;
margin-top:22px;
font-size:12px;
font-weight:700;
letter-spacing:2px;
text-transform:uppercase;
color:#fff;
text-decoration:none;
border-bottom:1px solid rgba(255,255,255,0.5);
padding-bottom:3px;
opacity:0;
transform:translateY(10px);
transition:opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s, border-color 0.3s ease;
}

.split-panel:hover .split-btn{ opacity:1; transform:translateY(0); }
.split-btn:hover{ border-color:#ff0000; color:#ff0000; }

.split-divider{
position:absolute;
left:50%; top:0;
width:1px; height:100%;
background:rgba(255,0,0,0.6);
z-index:20;
pointer-events:none;
opacity:0;
transition:opacity 0.4s ease;
}

.split-section:hover .split-divider{ opacity:1; }

/* ===== RESPONSIVE TABLETTE ===== */
@media (min-width:769px) and (max-width:1600px) {

  /* --- HERO --- */
  .hero-text {
    bottom: 24%;
    left: 6%;
    right: 6%;
  }
  .hero-title { font-size: 80px; }
  .hero-cinematic-svg { height: 90px; }

  /* --- SECTION SERVICES --- */
  .section-video {
    display: flex;
    flex-direction: column;
    padding: 60px 30px 70px;
    min-height: unset;
    height: auto;
    position: relative;
  }
  .section-video video,
  .section-video .video-bg-wrap {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    min-height: 100%;
  }
  /* Vidéo fond section services tablette */
  .section-video .video-bg-wrap video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .section-header {
    position: relative;
    top: auto; left: auto;
    transform: none;
    text-align: center;
    margin-bottom: 36px;
    z-index: 10;
  }
  .section-title { font-size: 22px; }
  .section-sub   { font-size: 14px; }

  .cards {
    position: relative;
    top: auto; left: auto;
    transform: none;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    width: 100%;
    z-index: 10;
  }
  .card {
    width: calc(50% - 12px);
    max-width: 280px;
  }
  .card-img-wrap { height: 300px; }
  .card-text { height: auto; padding: 16px; }
  .card-title { font-size: 15px; }
  .card-sub   { font-size: 13px; }

  .section-footer {
    position: relative;
    bottom: auto; left: auto;
    transform: none;
    margin-top: 160px;
    z-index: 10;
    text-align: center;
  }
  .section-tags    { font-size: 12px; letter-spacing: 2px; }
  .section-tagline { font-size: 13px; }
  .section-cta {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 20px;
  }
  .btn { padding: 14px 28px; font-size: 12px; }

  /* --- SPLIT SECTION --- */
  .split-section {
    flex-direction: column;
    height: auto;
  }
  .split-panel {
    flex: none !important;
    width: 100%;
    height: 55vh;
    min-height: 320px;
  }
  /* Vidéo dans split panel tablette */
  .split-panel .video-bg-wrap video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .split-content { bottom: 36px; left: 36px; }
  .split-title   { font-size: 28px; transform: translateY(0); }
  .split-btn     { opacity: 1; transform: translateY(0); }
  .split-divider { display: none; }
}

/* ===== RESPONSIVE MOBILE ===== */
@media(max-width:768px) {

  /* --- HERO --- */
  .hero-text {
    bottom:28%;
    left:5%;
    right:5%;
  }
  .hero-tag { font-size:12px; letter-spacing:3px; }
  .hero-title { font-size:58px; letter-spacing:-1px; }
  .hero-cinematic-svg { height:65px; }
  .hero-sub { font-size:11px; letter-spacing:2px; margin-top:14px; }

  /* --- SECTION SERVICES --- */
  .section-video {
    display:flex;
    flex-direction:column;
    padding:60px 20px 60px;
    height:auto;
    min-height:unset;
    position:relative;
  }
  .section-video video,
  .section-video .video-bg-wrap {
    position:absolute;
    top:0; left:0;
    width:100%; height:100%;
    min-height:100%;
  }
  /* Vidéo fond mobile */
  .section-video .video-bg-wrap video {
    width:100%;
    height:100%;
    object-fit:cover;
  }
  .section-header {
    position:relative;
    top:auto; left:auto;
    transform:none;
    text-align:center;
    margin-bottom:30px;
    padding:0 10px;
    z-index:10;
  }
  .section-title { font-size:18px; letter-spacing:0.5px; }
  .section-sub { font-size:13px; }

  .cards {
    position:relative;
    top:auto; left:auto;
    transform:none;
    flex-direction:column;
    align-items:center;
    gap:20px;
    width:100%;
    padding:0 10px;
    z-index:10;
  }
  .card { width:100%; max-width:340px; }
  .card-img-wrap { height:260px; }
  .card-text { height:auto; padding:18px; }
  .card-title { font-size:15px; }
  .card-sub { font-size:13px; }

  .section-footer {
    position:relative;
    bottom:auto; left:auto;
    transform:none;
    margin-top:30px;
    padding:0 10px;
    z-index:10;
  }
  .section-tags { font-size:11px; letter-spacing:1.5px; }
  .section-tagline { font-size:13px; }
  .section-cta {
    flex-direction:column;
    gap:12px;
    align-items:center;
  }
  .btn {
    padding:14px 32px;
    font-size:12px;
    width:100%;
    max-width:280px;
    text-align:center;
  }

  /* --- SPLIT SECTION --- */
  .split-section {
    flex-direction:column;
    height:auto;
  }
  .split-panel {
    flex:none !important;
    width:100%;
    height:55vh;
    min-height:280px;
  }
  /* Vidéo dans split panel mobile */
  .split-panel .video-bg-wrap video {
    width:100%;
    height:100%;
    object-fit:cover;
  }
  .split-content {
    bottom:30px;
    left:25px;
  }
  .split-label { font-size:13px; letter-spacing:2px; }
  .split-title { font-size:22px; transform:translateY(0); }
  .split-btn { opacity:1; transform:translateY(0); margin-top:14px; }
  .split-divider { display:none; }
}