/* ==========================================================
   AN Studio Framework V1
   File : style.css
   Description : Base Styles
   ========================================================== */

/* ==========================
   RESET
========================== */

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:var(--font-body);
    color:var(--color-text);
    background:var(--color-white);
    line-height:1.6;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
}

img{
    display:block;
    max-width:100%;
}

a{
    color:inherit;
    text-decoration:none;
}

ul{
    list-style:none;
}

button,
input,
textarea{
    font:inherit;
}

/* ==========================
   CONTAINER
========================== */

.container{
    width:min(100% - 48px, var(--container-width));
    margin-inline:auto;
}

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

section{
    padding:var(--section-padding) 0;
}

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

h1,h2,h3,h4,h5,h6{
    font-family:var(--font-heading);
    color:var(--color-dark);
    line-height:1.15;
    font-weight:700;
}

h1{
    font-size:clamp(3rem,6vw,5rem);
}

h2{
    font-size:clamp(2.2rem,4vw,3.5rem);
}

h3{
    font-size:1.6rem;
}

p{
    margin-top:1rem;
    color:var(--color-text-light);
}

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

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    height:56px;
    padding:0 32px;

    border:none;
    border-radius:999px;

    cursor:pointer;

    transition:var(--transition);

    font-weight:600;
}

.btn-primary{

    background:var(--gradient-primary);

    color:#fff;

    box-shadow:var(--shadow-md);

}

.btn-primary:hover{

    transform:translateY(-3px);

    box-shadow:var(--shadow-lg);

}

.btn-outline{

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

    color:var(--color-primary);

    background:white;

}

.btn-outline:hover{

    background:var(--color-primary);

    color:white;

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

.site-header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:var(--header-height);
    z-index:1000;

    display:flex;
    align-items:center;

    background:rgba(255,255,255,.82);
    backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(226,232,240,.7);
}

.header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.logo{
    display:flex;
    align-items:center;
    gap:12px;

    font-weight:800;
    font-size:1.25rem;
    color:var(--color-dark);
}

.logo-mark{
    width:42px;
    height:42px;
    border-radius:14px;

    display:grid;
    place-items:center;

    background:var(--gradient-primary);
    color:white;
    box-shadow:var(--shadow-sm);
}

.nav{
    display:flex;
    align-items:center;
    gap:34px;
}

.nav a{
    font-size:.95rem;
    font-weight:600;
    color:var(--color-dark-light);
    transition:var(--transition);
}

.nav a:hover{
    color:var(--color-primary);
}

.header-cta{
    display:flex;
    align-items:center;
    gap:16px;
}
/* ==========================================================
   HERO PREMIUM V2
========================================================== */

.hero{
    min-height:100vh;
    display:flex;
    align-items:center;
    padding-top:120px;
    padding-bottom:80px;
}

.hero-inner{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:80px;
    align-items:center;
}

.hero-content h1{
    margin:20px 0;
    max-width:700px;
}

.hero-content p{
    font-size:1.25rem;
    line-height:1.8;
    max-width:650px;
    margin-bottom:40px;
}

.eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:10px 18px;

    border-radius:999px;

    background:#fff7f1;

    color:var(--color-primary);

    font-size:.9rem;

    font-weight:700;

    letter-spacing:.05em;

    text-transform:uppercase;
}

.hero-actions{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
}

.hero-visual{
    display:flex;
    justify-content:center;
}

.mockup-card{

    overflow:hidden;

    border-radius:28px;

    background:white;

    box-shadow:
        0 40px 80px rgba(0,0,0,.12);

    transform:rotate(-2deg);

    transition:.45s;

}

.mockup-card:hover{

    transform:
        rotate(0deg)
        translateY(-12px);

}

.mockup-card img{

    display:block;

    width:100%;

}
/* ==========================================================
   HERO PREMIUM - OVERRIDE V1
========================================================== */

.hero{
    min-height:calc(100vh - 90px);
    padding-top:40px;
    padding-bottom:40px;
}

.hero-inner{
    display:grid;
    grid-template-columns:55% 45%;
    align-items:center;
    gap:70px;
}

.hero-content{
    max-width:700px;
}

.hero-content h1{
    font-size:clamp(3.8rem,6vw,5.8rem);
    line-height:1.02;
    margin:25px 0;
}

.hero-content p{
    font-size:1.35rem;
    line-height:1.75;
    margin-bottom:45px;
    color:#6f7a91;
}

.hero-visual{
    display:flex;
    justify-content:center;
    align-items:center;
}

.mockup-card{

    border-radius:34px;

    overflow:hidden;

    box-shadow:
        0 35px 80px rgba(20,30,60,.16);

    transition:.45s;

}

.mockup-card:hover{

    transform:
        translateY(-10px)
        rotate(.6deg);

    box-shadow:
        0 60px 120px rgba(20,30,60,.22);

}

.mockup-card img{

    display:block;

    width:100%;

}
/* ==========================================================
   STATS
========================================================== */

.stats{

    margin-top:-40px;

    padding-bottom:90px;

}

.stats-grid{

    display:grid;

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

    gap:30px;

}

.stats-grid>div{

    background:white;

    border-radius:24px;

    padding:35px;

    text-align:center;

    box-shadow:
        0 15px 45px rgba(30,40,60,.08);

    transition:.35s;

}

.stats-grid>div:hover{

    transform:translateY(-8px);

}

.stats strong{

    display:block;

    font-size:2.2rem;

    color:var(--color-primary);

    margin-bottom:10px;

}

.stats span{

    color:#6d7692;

}
/* ==========================================================
   CORRECTION SERVICES - CARTES PREMIUM
========================================================== */

.services {
    padding: 110px 0;
    background: #fcfcfd;
}

.services .section-heading {
    max-width: 760px;
    margin-bottom: 60px;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

.service-card {
    position: relative;
    display: flex;
    min-height: 290px;
    flex-direction: column;
    padding: 34px;
    overflow: hidden;

    border: 1px solid #e2e8f0;
    border-radius: 28px;

    background: #ffffff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.07);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.service-card::before {
    display: grid;
    width: 62px;
    height: 62px;
    place-items: center;

    margin-bottom: 55px;

    border-radius: 20px;
    color: #ffffff;
    background: linear-gradient(135deg, #f97316, #fb923c);
    box-shadow: 0 14px 30px rgba(249, 115, 22, 0.25);

    content: "✦";
    font-size: 1.35rem;
    font-weight: 800;
}

.service-card:nth-child(1)::before {
    content: "⌘";
}

.service-card:nth-child(2)::before {
    content: "↗";
}

.service-card:nth-child(3)::before {
    content: "IA";
    font-size: 1rem;
}

.service-card:nth-child(4)::before {
    content: "◇";
}

.service-card:nth-child(5)::before {
    content: "⚙";
}

.service-card:nth-child(6)::before {
    content: "⚡";
}

.service-card h3 {
    margin-bottom: 14px;
    font-size: 1.45rem;
}

.service-card p {
    margin: 0;
    line-height: 1.75;
}

.service-card:hover {
    transform: translateY(-10px);
    border-color: rgba(249, 115, 22, 0.35);
    box-shadow: 0 30px 70px rgba(15, 23, 42, 0.13);
}

@media (max-width: 950px) {
    .services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .services-grid {
        grid-template-columns: 1fr;
    }
}
/* =========================
   PORTFOLIO PREMIUM
========================= */

.portfolio{
    padding:120px 0;
    background:#fff;
}

.section-intro{
    max-width:700px;
    margin:25px auto 70px;
    text-align:center;
    color:#667085;
    font-size:18px;
    line-height:1.8;
}

.portfolio-grid{

    display:grid;

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

    gap:35px;

}

.project-card{

    background:#fff;

    border-radius:30px;

    overflow:hidden;

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

    transition:.35s;

    border:1px solid #edf1f7;

}

.project-card:hover{

    transform:translateY(-12px);

    box-shadow:0 35px 70px rgba(255,123,0,.18);

}

.project-card img{

    width:100%;

    height:240px;

    object-fit:cover;

}

.project-content{

    padding:35px;

}

.project-content span{

    color:#ff7a1a;

    font-weight:700;

    text-transform:uppercase;

    font-size:13px;

    letter-spacing:1px;

}

.project-content h3{

    margin:15px 0;

    font-size:30px;

    color:#111827;

}

.project-content p{

    color:#667085;

    line-height:1.8;

    margin-bottom:30px;

}

.project-content a{

    color:#ff7a1a;

    text-decoration:none;

    font-weight:700;

}

.project-content a:hover{

    color:#111827;

}
/* ===================================
   FLOATING CARDS
=================================== */

.hero-visual{
    position:relative;
}

.floating-card{

    position:absolute;

    background:white;

    padding:15px 22px;

    border-radius:18px;

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

    font-weight:700;

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

}

.floating-card-1{

    top:30px;

    left:-40px;

}

.floating-card-2{

    right:-40px;

    top:160px;

    animation-delay:1s;

}

.floating-card-3{

    bottom:40px;

    left:-20px;

    animation-delay:2s;

}

@keyframes float{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0px);

    }

}
/* =========================================================
   HERO V3
========================================================= */

.hero{
    position:relative;
    overflow:hidden;
    padding:170px 0 120px;
    background:#ffffff;
}

.hero-background{
    position:absolute;
    inset:0;
    overflow:hidden;
    z-index:0;
}

.gradient{
    position:absolute;
    border-radius:50%;
    filter:blur(90px);
    opacity:.25;
}

.gradient-1{
    width:500px;
    height:500px;
    background:#ff7a1a;
    top:-180px;
    right:-120px;
}

.gradient-2{
    width:400px;
    height:400px;
    background:#ffd8b2;
    bottom:-150px;
    left:-100px;
}

.hero-container {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    gap: clamp(40px, 4vw, 70px);

    width: 100%;
    max-width: 1680px;
    margin: 0 auto;
    padding: 0 clamp(45px, 5vw, 90px);
    box-sizing: border-box;
    min-width: 0;
}

.hero-badge{

    display:inline-block;

    padding:10px 18px;

    border-radius:40px;

    background:#fff3ea;

    color:#ff7a1a;

    font-weight:700;

    margin-bottom:30px;

}

.hero-left h1{

    font-size:72px;

    line-height:1;

    color:#111827;

    margin-bottom:35px;

    max-width:720px;

}

.hero-left p{

    font-size:22px;

    line-height:1.8;

    color:#667085;

    max-width:650px;

}

.hero-buttons{

    display:flex;

    gap:20px;

    margin-top:45px;

}

.hero-stats{

    display:flex;

    gap:50px;

    margin-top:60px;

}

.stat h3{

    font-size:36px;

    color:#ff7a1a;

    margin-bottom:5px;

}

.stat span{

    color:#667085;

}

.hero-right {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.hero-mockup {
    width: 100%;
    max-width: 100%;
    background: #ffffff;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 35px 90px rgba(0, 0, 0, 0.12);
}

.hero-mockup img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.floating-card{

    position:absolute;

    background:#ffffff;

    padding:15px 22px;

    border-radius:16px;

    box-shadow:0 15px 40px rgba(0,0,0,.12);

    font-weight:700;

}

.floating-1{

    top:40px;

    left:-30px;
.floating-2 {
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}
    right:-40px;

}

.floating-3{

    bottom:30px;

    left:10px;

}
/* =========================================================
   NAVBAR V3 — CORRECTION
========================================================= */

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;

    display: flex;
    width: 100%;
    min-height: 86px;
    align-items: center;

    padding: 0 max(30px, calc((100% - 1240px) / 2));

    border-bottom: 1px solid rgba(229, 231, 235, 0.8);

    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    box-shadow: 0 10px 35px rgba(15, 23, 42, 0.04);
}

/* Logo */

.navbar .logo {
    flex-shrink: 0;

    color: #111827;

    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.navbar .logo span {
    color: #ff7a1a;
}

/* Menu */

.navbar ul {
    display: flex;
    align-items: center;
    gap: 34px;

    margin: 0 34px 0 auto;
    padding: 0;

    list-style: none;
}

.navbar ul li {
    margin: 0;
    padding: 0;
}

.navbar ul a {
    position: relative;

    display: inline-block;
    padding: 12px 0;

    color: #111827;

    font-size: 0.95rem;
    font-weight: 650;

    text-decoration: none;

    transition: color 0.25s ease;
}

.navbar ul a::after {
    position: absolute;
    bottom: 6px;
    left: 50%;

    width: 0;
    height: 2px;

    border-radius: 999px;

    background: #ff7a1a;

    content: "";

    transform: translateX(-50%);
    transition: width 0.25s ease;
}

.navbar ul a:hover {
    color: #ff7a1a;
}

.navbar ul a:hover::after {
    width: 100%;
}

/* Bouton devis */

.navbar .btn-nav {
    display: inline-flex;
    min-height: 52px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;

    padding: 0 27px;

    border-radius: 999px;

    color: #ffffff;

    background: linear-gradient(135deg, #ff6b00, #ff963f);

    box-shadow: 0 15px 35px rgba(255, 122, 26, 0.25);

    font-weight: 750;
    text-decoration: none;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.navbar .btn-nav:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 45px rgba(255, 122, 26, 0.35);
}

/* Deuxième bouton du Hero */

.hero .btn-secondary {
    display: inline-flex;
    min-height: 56px;
    align-items: center;
    justify-content: center;

    padding: 0 30px;

    border: 2px solid #ff7a1a;
    border-radius: 999px;

    color: #ff6b00;
    background: rgba(255, 255, 255, 0.85);

    font-weight: 750;
    text-decoration: none;

    transition:
        color 0.25s ease,
        background 0.25s ease,
        transform 0.25s ease;
}

.hero .btn-secondary:hover {
    color: #ffffff;
    background: #ff7a1a;
    transform: translateY(-3px);
}

/* Mobile */

@media (max-width: 850px) {
    .navbar {
        position: relative;
        min-height: auto;
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;

        padding: 22px;
    }

    .navbar ul {
        width: 100%;
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;

        margin: 0;
    }

    .navbar .btn-nav {
        width: 100%;
    }

    .hero {
        padding-top: 90px;
    }
}
/* ==========================================================
   NAVBAR V3 — OPTION A
========================================================== */

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;

    width: 100%;

    border-bottom: 1px solid rgba(226, 232, 240, 0.7);

    background: rgba(255, 255, 255, 0.82);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    transition:
        background 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.navbar.navbar-scrolled {
    border-color: rgba(226, 232, 240, 0.9);

    background: rgba(255, 255, 255, 0.95);

    box-shadow: 0 12px 35px rgba(15, 23, 42, 0.08);
}

.navbar-container {
    display: flex;

    width: min(100% - 48px, 1240px);
    min-height: 86px;

    align-items: center;
    justify-content: space-between;

    margin-inline: auto;
}

/* Logo */

.navbar-logo {
    display: inline-flex;
    flex-shrink: 0;

    align-items: center;
    gap: 12px;

    color: #111827;

    font-size: 1.35rem;
    font-weight: 800;

    text-decoration: none;
}

.navbar-logo-mark {
    display: grid;

    width: 48px;
    height: 48px;

    place-items: center;

    border-radius: 15px;

    color: #ffffff;

    background: linear-gradient(
        135deg,
        #ff6b00,
        #ff963f
    );

    box-shadow: 0 13px 30px rgba(255, 122, 26, 0.25);

    font-size: 1rem;
    font-weight: 800;
}

.navbar-logo-text {
    letter-spacing: -0.04em;
}

/* Menu */

.navbar-menu {
    display: flex;

    align-items: center;
    gap: 32px;
}

.navbar-menu > a:not(.navbar-cta) {
    position: relative;

    padding: 12px 0;

    color: #172033;

    font-size: 0.95rem;
    font-weight: 650;

    text-decoration: none;

    transition: color 0.25s ease;
}

.navbar-menu > a:not(.navbar-cta)::after {
    position: absolute;

    bottom: 6px;
    left: 50%;

    width: 0;
    height: 2px;

    border-radius: 999px;

    background: #ff7a1a;

    content: "";

    transform: translateX(-50%);

    transition: width 0.25s ease;
}

.navbar-menu > a:not(.navbar-cta):hover {
    color: #ff6b00;
}

.navbar-menu > a:not(.navbar-cta):hover::after {
    width: 100%;
}

/* Bouton devis */

.navbar-cta {
    display: inline-flex;

    min-height: 52px;

    align-items: center;
    justify-content: center;

    padding: 0 27px;

    border-radius: 999px;

    color: #ffffff;

    background: linear-gradient(
        135deg,
        #ff6b00,
        #ff963f
    );

    box-shadow: 0 14px 32px rgba(255, 122, 26, 0.25);

    font-size: 0.95rem;
    font-weight: 750;

    text-decoration: none;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.navbar-cta:hover {
    transform: translateY(-3px);

    box-shadow: 0 20px 42px rgba(255, 122, 26, 0.35);
}

/* Bouton hamburger */

.navbar-toggle {
    display: none;

    width: 48px;
    height: 48px;

    align-items: center;
    justify-content: center;
    flex-direction: column;

    gap: 5px;

    border: 0;
    border-radius: 14px;

    color: #111827;
    background: #f8fafc;

    cursor: pointer;
}

.navbar-toggle span {
    display: block;

    width: 22px;
    height: 2px;

    border-radius: 999px;

    background: currentColor;

    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}

.navbar-toggle.is-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.navbar-toggle.is-active span:nth-child(2) {
    opacity: 0;
}

.navbar-toggle.is-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Mobile */

@media (max-width: 850px) {

    .navbar-container {
        width: min(100% - 30px, 1240px);
        min-height: 76px;
    }

    .navbar-toggle {
        display: flex;
    }

    .navbar-menu {
        position: fixed;

        top: 88px;
        right: 15px;
        left: 15px;

        display: grid;

        max-height: 0;

        overflow: hidden;

        gap: 8px;

        padding: 0 22px;

        border: 1px solid rgba(226, 232, 240, 0.9);
        border-radius: 22px;

        background: rgba(255, 255, 255, 0.98);

        box-shadow: 0 25px 65px rgba(15, 23, 42, 0.16);

        opacity: 0;

        transition:
            max-height 0.35s ease,
            padding 0.35s ease,
            opacity 0.25s ease;
    }

    .navbar-menu.is-open {
        max-height: 500px;

        padding: 22px;

        opacity: 1;
    }

    .navbar-menu > a:not(.navbar-cta) {
        width: 100%;

        padding: 13px 5px;
    }

    .navbar-menu > a:not(.navbar-cta)::after {
        display: none;
    }

    .navbar-cta {
        width: 100%;

        margin-top: 8px;
    }
}
/* ==========================================================
   ABOUT V3
========================================================== */

.about-v3 {
    position: relative;
    overflow: hidden;
    padding: 120px 0;
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fafc 100%
        );
}

.about-v3::before {
    position: absolute;
    top: -180px;
    right: -180px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(249, 115, 22, 0.08);
    filter: blur(80px);
    content: "";
}

.section-title {
    max-width: 820px;
    margin-bottom: 65px;
}

.section-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 20px;
    padding: 9px 17px;

    border: 1px solid rgba(249, 115, 22, 0.16);
    border-radius: 999px;

    color: #ea580c;
    background: #fff3e9;

    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.section-tag::before {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f97316;
    content: "";
}

.section-title h2 {
    margin: 0;
    max-width: 900px;

    color: #0f172a;

    font-size: clamp(2.5rem, 4.5vw, 4.3rem);
    line-height: 1.08;
    letter-spacing: -0.045em;
}

.section-title p {
    max-width: 720px;
    margin-top: 24px;

    color: #667085;

    font-size: 1.1rem;
    line-height: 1.8;
}

.about-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 70px;
}

.about-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.about-card {
    position: relative;
    min-height: 260px;
    overflow: hidden;

    padding: 30px;

    border: 1px solid #e5e7eb;
    border-radius: 24px;

    background: rgba(255, 255, 255, 0.95);

    box-shadow:
        0 16px 45px rgba(15, 23, 42, 0.06);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.about-card::after {
    position: absolute;
    top: -70px;
    right: -70px;

    width: 170px;
    height: 170px;

    border-radius: 50%;

    background: rgba(249, 115, 22, 0.07);

    content: "";

    transition: transform 0.45s ease;
}

.about-card:hover {
    border-color: rgba(249, 115, 22, 0.3);

    box-shadow:
        0 28px 70px rgba(15, 23, 42, 0.12);

    transform: translateY(-10px);
}

.about-card:hover::after {
    transform: scale(1.3);
}

.about-card .icon {
    position: relative;
    z-index: 2;

    display: grid;
    width: 58px;
    height: 58px;

    place-items: center;

    margin-bottom: 42px;

    border-radius: 18px;

    color: #ffffff;
    background: linear-gradient(135deg, #f97316, #fb923c);

    box-shadow:
        0 14px 30px rgba(249, 115, 22, 0.24);

    font-size: 1.35rem;
}

.about-card h3 {
    position: relative;
    z-index: 2;

    margin: 0 0 14px;

    color: #0f172a;

    font-size: 1.35rem;
    letter-spacing: -0.03em;
}

.about-card p {
    position: relative;
    z-index: 2;

    margin: 0;

    color: #667085;

    line-height: 1.75;
}

.about-image {
    position: relative;
}

.about-image::before {
    position: absolute;
    z-index: 0;

    inset: 8% -8% -8% 8%;

    border-radius: 34px;

    background:
        linear-gradient(
            135deg,
            rgba(249, 115, 22, 0.18),
            rgba(37, 99, 235, 0.08)
        );

    filter: blur(18px);

    content: "";
}

.about-image img {
    position: relative;
    z-index: 1;

    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
    object-fit: contain;

    border: 10px solid rgba(255, 255, 255, 0.86);
    border-radius: 32px;
    box-shadow: 0 38px 90px rgba(15, 23, 42, 0.18);
}

/* Responsive */

@media (max-width: 1050px) {
    .about-grid {
        grid-template-columns: 1fr;
    }

    .about-image {
        max-width: 800px;
        margin-inline: auto;
    }
}

@media (max-width: 700px) {
    .about-v3 {
        padding: 90px 0;
    }

    .about-cards {
        grid-template-columns: 1fr;
    }

    .about-card {
        min-height: auto;
    }

   .about-image img {
    width: 100%;
    height: auto;
    min-height: 0;
}
}
/*======================================================
SERVICES V3
======================================================*/

.services-v3{

    padding:140px 0;

    background:#ffffff;

}

.services-v3-grid{

    display:grid;

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

    gap:35px;

    margin-top:70px;

}

.service-v3-card{

    position:relative;

    overflow:hidden;

    padding:40px;

    border:1px solid #e5e7eb;

    border-radius:28px;

    background:#ffffff;

    transition:.35s;

    box-shadow:0 15px 40px rgba(0,0,0,.05);

}

.service-v3-card:hover{

    transform:translateY(-10px);

    box-shadow:0 35px 70px rgba(0,0,0,.12);

    border-color:#ff7a1a;

}

.service-v3-number{

    position:absolute;

    top:30px;

    right:35px;

    font-size:55px;

    font-weight:800;

    color:#f3f4f6;

}
.service-v3-icon{

    width:72px;
    height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:22px;

    background:linear-gradient(
        135deg,
        #ff7a1a,
        #ff9d4d
    );

    color:#fff;

    font-size:30px;

    margin-bottom:35px;

    box-shadow:0 15px 35px rgba(255,122,26,.30);

}

.service-v3-card h3{

    font-size:30px;

    margin-bottom:20px;

}

.service-v3-card p{

    color:#667085;

    line-height:1.8;

    margin-bottom:25px;

}

.service-v3-card ul{

    margin:0;

    padding-left:20px;

}

.service-v3-card li{

    margin-bottom:10px;

    color:#475467;

}

.service-v3-link{

    display:inline-block;

    margin-top:30px;

    font-weight:700;

    color:#ff7a1a;

    text-decoration:none;

}

.service-v3-link:hover{

    color:#111827;

}

@media(max-width:900px){

.services-v3-grid{

grid-template-columns:1fr;

}

}
/* ==========================================================
   PORTFOLIO V3
========================================================== */

.portfolio-v3 {
    padding: 140px 0;
    background:
        linear-gradient(
            180deg,
            #f8fafc 0%,
            #ffffff 100%
        );
}

.portfolio-feature {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    gap: 70px;

    margin-top: 70px;
    padding: 48px;

    border: 1px solid #e5e7eb;
    border-radius: 32px;

    background: #ffffff;

    box-shadow:
        0 28px 80px rgba(15, 23, 42, 0.10);
}

.portfolio-content {
    display: grid;
    gap: 24px;
}

.portfolio-category {
    display: inline-flex;
    width: fit-content;

    padding: 9px 15px;

    border-radius: 999px;

    color: #ea580c;
    background: #fff3e9;

    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.portfolio-content h3 {
    margin: 0;

    color: #0f172a;

    font-size: clamp(2.4rem, 4vw, 4rem);
    line-height: 1.08;
    letter-spacing: -0.045em;
}

.portfolio-content > p {
    max-width: 620px;

    color: #667085;

    font-size: 1.08rem;
    line-height: 1.85;
}

.portfolio-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.portfolio-stats div {
    padding: 22px;

    border: 1px solid #e5e7eb;
    border-radius: 20px;

    background: #f8fafc;
}

.portfolio-stats strong {
    display: block;

    color: #f97316;

    font-size: 1.8rem;
    line-height: 1;
}

.portfolio-stats span {
    display: block;
    margin-top: 8px;

    color: #667085;

    font-size: 0.9rem;
}

.portfolio-content .btn {
    width: fit-content;
    margin-top: 6px;

    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #f97316,
            #fb923c
        );

    box-shadow:
        0 16px 38px rgba(249, 115, 22, 0.28);
}

.portfolio-image {
    position: relative;
}

.portfolio-image::before {
    position: absolute;
    inset: 8% -6% -8% 8%;
    z-index: 0;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            rgba(249, 115, 22, 0.18),
            rgba(15, 23, 42, 0.08)
        );

    filter: blur(20px);

    content: "";
}

.portfolio-image img {
    position: relative;
    z-index: 1;

    width: 100%;
    min-height: 520px;

    object-fit: cover;

    border: 10px solid rgba(255, 255, 255, 0.9);
    border-radius: 30px;

    box-shadow:
        0 35px 90px rgba(15, 23, 42, 0.18);

    transition:
        transform 0.45s ease,
        box-shadow 0.45s ease;
}

.portfolio-feature:hover .portfolio-image img {
    transform: translateY(-8px) scale(1.01);

    box-shadow:
        0 45px 110px rgba(15, 23, 42, 0.23);
}

/* Responsive */

@media (max-width: 1050px) {
    .portfolio-feature {
        grid-template-columns: 1fr;
    }

    .portfolio-image {
        order: -1;
    }
}

@media (max-width: 700px) {
    .portfolio-v3 {
        padding: 95px 0;
    }

    .portfolio-feature {
        gap: 38px;
        padding: 24px;
    }

    .portfolio-stats {
        grid-template-columns: 1fr;
    }

    .portfolio-image img {
        min-height: 320px;
    }

    .portfolio-content .btn {
        width: 100%;
    }
}
/*======================================================
METHOD V3
======================================================*/

.method-v3{

    padding:140px 0;

    background:#ffffff;

}

.method-grid{

    display:grid;

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

    gap:30px;

    margin-top:70px;

}

.method-card{

    position:relative;

    padding:38px 32px;

    border-radius:28px;

    background:#ffffff;

    border:1px solid #e5e7eb;
min-height:290px;
    box-shadow:0 18px 45px rgba(15,23,42,.05);

    transition:.35s;

}

.method-card:hover{

    transform:translateY(-12px);

    border-color:#ff7a1a;

    box-shadow:0 35px 70px rgba(15,23,42,.12);

}

.method-number{

    width:64px;

    height:64px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:35px;

    font-size:24px;

    font-weight:800;

    color:white;

    background:linear-gradient(
135deg,
#ff7a1a,
#ffb15d
);

box-shadow:

0 15px 35px rgba(255,122,26,.35);

}

.method-card h3{

    margin-bottom:18px;

    font-size:28px;

    color:#111827;

}

.method-card p{

    color:#667085;

    line-height:1.8;

}

@media(max-width:1100px){

.method-grid{

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

}

}

@media(max-width:700px){

.method-grid{

grid-template-columns:1fr;

}

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

.cta-premium {
    position: relative;
    overflow: hidden;
    padding: 120px 0;
    background: #ffffff;
}

.cta-box {
    position: relative;
    overflow: hidden;

    padding: 90px 70px;

    border-radius: 34px;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 85% 18%,
            rgba(255, 255, 255, 0.18),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #0f172a 0%,
            #172033 58%,
            #1f2937 100%
        );

    box-shadow:
        0 38px 100px rgba(15, 23, 42, 0.22);
}

.cta-box::before {
    position: absolute;
    top: -130px;
    right: -100px;

    width: 360px;
    height: 360px;

    border-radius: 50%;

    background: rgba(249, 115, 22, 0.34);

    filter: blur(80px);

    content: "";
}

.cta-box::after {
    position: absolute;
    bottom: -180px;
    left: -130px;

    width: 380px;
    height: 380px;

    border-radius: 50%;

    background: rgba(251, 146, 60, 0.16);

    filter: blur(95px);

    content: "";
}

.cta-box > * {
    position: relative;
    z-index: 2;
}

.cta-box .section-tag {
    color: #ffffff;

    border-color: rgba(255, 255, 255, 0.14);

    background: rgba(255, 255, 255, 0.08);
}

.cta-box .section-tag::before {
    background: #ff9a4d;
}

.cta-box h2 {
    max-width: 900px;
    margin: 24px 0 0;

    color: #ffffff;

    font-size: clamp(2.7rem, 5.3vw, 5.3rem);
    line-height: 1.04;
    letter-spacing: -0.05em;
}

.cta-box > p {
    max-width: 720px;
    margin-top: 28px;

    color: rgba(255, 255, 255, 0.72);

    font-size: 1.12rem;
    line-height: 1.85;
}

.cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;

    margin-top: 38px;
}

.cta-box .btn {
    display: inline-flex;
    min-height: 58px;

    align-items: center;
    justify-content: center;

    padding: 0 32px;

    border-radius: 999px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #f97316,
            #fb923c
        );

    box-shadow:
        0 18px 42px rgba(249, 115, 22, 0.34);

    font-weight: 800;
    text-decoration: none;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.cta-box .btn:hover {
    transform: translateY(-4px);

    box-shadow:
        0 24px 54px rgba(249, 115, 22, 0.44);
}

.btn-outline {
    display: inline-flex;
    min-height: 58px;

    align-items: center;
    justify-content: center;

    padding: 0 32px;

    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;

    color: #ffffff;

    background: rgba(255, 255, 255, 0.06);

    font-weight: 800;
    text-decoration: none;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}

.btn-outline:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-4px);
}

.cta-features {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;

    margin-top: 38px;
}

.cta-features span {
    color: rgba(255, 255, 255, 0.76);

    font-size: 0.95rem;
    font-weight: 650;
}

/* Responsive */

@media (max-width: 760px) {
    .cta-premium {
        padding: 90px 0;
    }

    .cta-box {
        padding: 58px 28px;
        border-radius: 28px;
    }

    .cta-buttons {
        flex-direction: column;
    }

    .cta-box .btn,
    .btn-outline {
        width: 100%;
    }

    .cta-features {
        flex-direction: column;
        gap: 10px;
    }
}
/*======================================================
CONTACT V3
======================================================*/

.contact-v3{

    padding:140px 0;

    background:#f8fafc;

}

.contact-v3-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:start;

}

.contact-v3-content h2{

    margin:25px 0;

    font-size:58px;

    line-height:1.05;

    color:#111827;

}

.contact-v3-content p{

    color:#667085;

    line-height:1.9;

    margin-bottom:45px;

}

.contact-v3-details{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.contact-v3-item{

    display:flex;

    gap:18px;

    align-items:center;

    padding:22px;

    border-radius:22px;

    background:white;

    border:1px solid #e5e7eb;

    text-decoration:none;

    transition:.35s;

}

.contact-v3-item:hover{

    transform:translateX(10px);

    border-color:#ff7a1a;

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

}

.contact-v3-icon{

    width:60px;

    height:60px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(135deg,#ff7a1a,#ff9d4d);

    color:white;

    font-size:28px;

}

.contact-v3-item small{

    display:block;

    color:#98a2b3;

    margin-bottom:4px;

}

.contact-v3-item strong{

    color:#111827;

}

.contact-v3-form{

    padding:45px;

    border-radius:28px;

    background:white;

    border:1px solid #e5e7eb;

    box-shadow:0 25px 60px rgba(15,23,42,.08);

}

.contact-v3-fields{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

}

.contact-v3-form label{

    display:flex;

    flex-direction:column;

    margin-bottom:24px;

}

.contact-v3-form span{

    margin-bottom:10px;

    font-weight:700;

    color:#111827;

}

.contact-v3-form input,

.contact-v3-form textarea{

    padding:18px;

    border-radius:16px;

    border:1px solid #d0d5dd;

    font-size:16px;

    transition:.3s;

}

.contact-v3-form textarea{

    min-height:180px;

    resize:vertical;

}

.contact-v3-form input:focus,

.contact-v3-form textarea:focus{

    outline:none;

    border-color:#ff7a1a;

    box-shadow:0 0 0 4px rgba(255,122,26,.15);

}

.contact-v3-submit{

    width:100%;

    height:60px;

    border:none;

    border-radius:999px;

    background:linear-gradient(135deg,#ff7a1a,#ff9d4d);

    color:white;

    font-size:18px;

    font-weight:700;

    cursor:pointer;

    transition:.35s;

}

.contact-v3-submit:hover{

    transform:translateY(-3px);

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

}

.contact-v3-note{

    margin-top:20px;

    text-align:center;

    color:#667085;

    font-size:14px;

}

@media(max-width:950px){

.contact-v3-grid{

grid-template-columns:1fr;

}

.contact-v3-fields{

grid-template-columns:1fr;

}

.contact-v3-content h2{

font-size:42px;

}

}
/* ==========================================================
   FOOTER V3
========================================================== */

.footer-v3 {
    padding: 90px 0 30px;

    color: rgba(255, 255, 255, 0.72);

    background:
        radial-gradient(
            circle at 86% 12%,
            rgba(249, 115, 22, 0.18),
            transparent 28rem
        ),
        #0f172a;
}

.footer-v3-grid {
    display: grid;
    grid-template-columns: 1.4fr 0.8fr 1fr 1.1fr;
    gap: 55px;

    padding-bottom: 60px;
}

.footer-v3-brand {
    display: grid;
    gap: 22px;
}

.footer-v3-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    width: fit-content;

    color: #ffffff;

    font-size: 1.35rem;
    font-weight: 800;
    text-decoration: none;
}

.footer-v3-logo-mark {
    display: grid;

    width: 48px;
    height: 48px;

    place-items: center;

    border-radius: 15px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #f97316,
            #fb923c
        );

    box-shadow:
        0 14px 32px rgba(249, 115, 22, 0.26);
}

.footer-v3-brand p {
    max-width: 430px;

    color: rgba(255, 255, 255, 0.62);

    line-height: 1.8;
}

.footer-v3-contact {
    display: grid;
    gap: 10px;
}

.footer-v3-contact a {
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;

    transition: color 0.25s ease;
}

.footer-v3-contact a:hover {
    color: #fb923c;
}

.footer-v3-column {
    display: grid;
    align-content: start;
    gap: 12px;
}

.footer-v3-column h3,
.footer-v3-project h3 {
    margin: 0 0 10px;

    color: #ffffff;

    font-size: 1rem;
    letter-spacing: -0.02em;
}

.footer-v3-column a {
    width: fit-content;

    color: rgba(255, 255, 255, 0.62);
    text-decoration: none;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.footer-v3-column a:hover {
    color: #fb923c;
    transform: translateX(4px);
}

.footer-v3-project p {
    margin: 0;

    color: rgba(255, 255, 255, 0.62);

    line-height: 1.75;
}

.footer-v3-button {
    display: inline-flex;

    min-height: 54px;

    align-items: center;
    justify-content: center;

    margin-top: 24px;
    padding: 0 26px;

    border-radius: 999px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #f97316,
            #fb923c
        );

    box-shadow:
        0 16px 38px rgba(249, 115, 22, 0.28);

    font-weight: 800;
    text-decoration: none;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.footer-v3-button:hover {
    transform: translateY(-3px);

    box-shadow:
        0 22px 48px rgba(249, 115, 22, 0.38);
}

.footer-v3-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    padding-top: 28px;

    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-v3-bottom p {
    margin: 0;

    color: rgba(255, 255, 255, 0.44);
}

.footer-v3-bottom div {
    display: flex;
    gap: 24px;
}

.footer-v3-bottom a {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;

    transition: color 0.25s ease;
}

.footer-v3-bottom a:hover {
    color: #fb923c;
}

/* Responsive */

@media (max-width: 1050px) {
    .footer-v3-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .footer-v3 {
        padding-top: 75px;
    }

    .footer-v3-grid {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .footer-v3-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .footer-v3-bottom div {
        flex-direction: column;
        gap: 10px;
    }
}
/* ==========================================================
   PREMIUM SECTION DIVIDERS
========================================================== */

.hero,
.about-v3,
.services-v3,
.portfolio-v3,
.method-v3,
.cta-premium,
.contact-v3{

    position:relative;

    overflow:hidden;

}

.about-v3::before,
.services-v3::before,
.portfolio-v3::before,
.method-v3::before{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%);

    width:82%;

    height:1px;

    background:

    linear-gradient(

    90deg,

    transparent,

    rgba(255,122,26,.25),

    transparent

    );

}

.about-v3::after,
.portfolio-v3::after{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    background:

    radial-gradient(

    rgba(255,122,26,.08),

    transparent 70%

    );

    filter:blur(20px);

    z-index:0;

}

.about-v3::after{

    right:-180px;

    top:120px;

}

.portfolio-v3::after{

    left:-180px;

    bottom:50px;

}

.about-v3>*,
.services-v3>*,
.portfolio-v3>*,
.method-v3>*{

    position:relative;

    z-index:2;

}
/* ==========================================================
   ÉTUDE DE CAS — HERO
========================================================== */

.case-hero {
    position: relative;
    overflow: hidden;

    padding: 170px 0 110px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fafc 100%
        );
}

.case-hero-background {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.case-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(90px);

    opacity: 0.22;
}

.case-glow-one {
    top: -160px;
    right: -100px;

    width: 480px;
    height: 480px;

    background: #f97316;
}

.case-glow-two {
    bottom: -180px;
    left: -120px;

    width: 420px;
    height: 420px;

    background: #fed7aa;
}

.case-hero-grid {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 0.9fr 1.1fr;

    align-items: center;
    gap: 75px;
}

.case-hero-content {
    display: grid;
    gap: 24px;
}

.case-back {
    width: fit-content;

    color: #667085;

    font-size: 0.95rem;
    font-weight: 700;

    text-decoration: none;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.case-back:hover {
    color: #f97316;
    transform: translateX(-4px);
}

.case-hero-content h1 {
    margin: 0;

    color: #0f172a;

    font-size: clamp(3.4rem, 6vw, 6.4rem);
    line-height: 1;
    letter-spacing: -0.055em;
}

.case-hero-lead {
    max-width: 680px;

    color: #667085;

    font-size: 1.15rem;
    line-height: 1.85;
}

.case-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 10px;
}

.case-tags span {
    padding: 10px 15px;

    border: 1px solid #e5e7eb;
    border-radius: 999px;

    color: #475467;
    background: rgba(255, 255, 255, 0.92);

    font-size: 0.88rem;
    font-weight: 700;
}

.case-hero-image {
    position: relative;
}

.case-hero-image::before {
    position: absolute;
    z-index: 0;

    inset: 8% -7% -8% 8%;

    border-radius: 34px;

    background:
        linear-gradient(
            135deg,
            rgba(249, 115, 22, 0.2),
            rgba(15, 23, 42, 0.08)
        );

    filter: blur(22px);

    content: "";
}

.case-hero-image img {
    position: relative;
    z-index: 1;

    width: 100%;
    min-height: 560px;

    object-fit: cover;

    border: 10px solid rgba(255, 255, 255, 0.9);
    border-radius: 32px;

    box-shadow:
        0 40px 100px rgba(15, 23, 42, 0.2);
}

/* Responsive */

@media (max-width: 1050px) {
    .case-hero-grid {
        grid-template-columns: 1fr;
    }

    .case-hero-image {
        order: -1;
    }
}

@media (max-width: 700px) {
    .case-hero {
        padding: 125px 0 85px;
    }

    .case-hero-image img {
        min-height: 340px;
    }
}
/* ==========================================================
   TÉMOIGNAGES V3
========================================================== */

.testimonials-v3 {
    padding: 130px 0;
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fafc 100%
        );
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;

    margin-top: 65px;
}

.testimonial-card {
    position: relative;
    overflow: hidden;

    padding: 34px;

    border: 1px solid #e5e7eb;
    border-radius: 26px;

    background: rgba(255, 255, 255, 0.96);

    box-shadow:
        0 18px 50px rgba(15, 23, 42, 0.07);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.testimonial-card::before {
    position: absolute;
    top: -70px;
    right: -70px;

    width: 180px;
    height: 180px;

    border-radius: 50%;

    background: rgba(249, 115, 22, 0.08);

    content: "";
}

.testimonial-card:hover {
    border-color: rgba(249, 115, 22, 0.3);

    box-shadow:
        0 30px 75px rgba(15, 23, 42, 0.13);

    transform: translateY(-10px);
}

.stars {
    position: relative;
    z-index: 2;

    margin-bottom: 28px;

    color: #f97316;

    font-size: 1.15rem;
    letter-spacing: 0.12em;
}

.testimonial-card p {
    position: relative;
    z-index: 2;

    margin: 0;

    color: #475467;

    font-size: 1.02rem;
    line-height: 1.85;
}

.testimonial-card h4 {
    position: relative;
    z-index: 2;

    margin: 28px 0 0;

    color: #0f172a;

    font-size: 1rem;
    font-weight: 800;
}

@media (max-width: 950px) {
    .testimonials-grid {
        grid-template-columns: 1fr;
    }
}
/* ==========================================================
   CORRECTION STATS V4
========================================================== */

section.stats-v4 {
    display: block !important;
    position: relative !important;
    padding: 90px 0 !important;
    background: #0f172a !important;
}

section.stats-v4 .stats-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 24px !important;
}

section.stats-v4 .stat-card {
    display: block !important;
    padding: 34px 22px !important;

    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 24px !important;

    background: rgba(255, 255, 255, 0.06) !important;
    text-align: center !important;

    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.12) !important;
}

section.stats-v4 .counter {
    display: block !important;
    margin-bottom: 14px !important;

    color: #fb923c !important;

    font-size: 3.4rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

section.stats-v4 .stat-card p {
    margin: 0 !important;

    color: rgba(255, 255, 255, 0.72) !important;

    font-size: 1rem !important;
}

@media (max-width: 900px) {
    section.stats-v4 .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 560px) {
    section.stats-v4 .stats-grid {
        grid-template-columns: 1fr !important;
    }
}
/* =========================================================
   ÉTUDE DE CAS — STRUCTURE GÉNÉRALE
========================================================= */

.case-overview,
.case-challenge,
.case-strategy,
.case-showcase,
.case-results,
.case-final {
    position: relative;
    overflow: hidden;
    padding: clamp(90px, 10vw, 150px) 24px;
}

.case-overview,
.case-strategy,
.case-results {
    background: #ffffff;
}

.case-challenge,
.case-showcase {
    background: #f8f5ef;
}

.case-overview__grid,
.case-challenge__grid,
.case-results__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(50px, 7vw, 100px);
    align-items: start;
}

.case-overview__intro h2,
.case-section-header h2,
.case-results__content h2,
.case-final__box h2 {
    margin: 22px 0 0;
    color: #111827;
    font-size: clamp(40px, 5.5vw, 72px);
    font-weight: 800;
    line-height: 1.03;
    letter-spacing: -0.045em;
}

.case-overview__intro h2 span,
.case-section-header h2 span {
    display: block;
    color: #ff7417;
}

.case-overview__text p,
.case-results__content p,
.case-section-header p,
.case-final__box p {
    margin: 0 0 24px;
    color: #667085;
    font-size: clamp(17px, 1.8vw, 20px);
    line-height: 1.85;
}

.case-overview__facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: clamp(55px, 7vw, 90px);
}

.case-fact {
    position: relative;
    overflow: hidden;
    min-height: 180px;
    padding: 28px;
    border: 1px solid #e5e7eb;
    border-radius: 26px;
    background: #ffffff;
    box-shadow: 0 20px 50px rgba(17, 24, 39, 0.06);
    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.case-fact:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 116, 23, 0.35);
    box-shadow:
        0 28px 65px rgba(17, 24, 39, 0.09),
        0 10px 24px rgba(255, 116, 23, 0.08);
}

.case-fact > span {
    position: absolute;
    top: 22px;
    right: 24px;
    color: rgba(255, 116, 23, 0.22);
    font-size: 42px;
    font-weight: 800;
    line-height: 1;
}

.case-fact small {
    display: block;
    margin-bottom: 28px;
    color: #98a2b3;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.case-fact strong {
    display: block;
    max-width: 220px;
    color: #111827;
    font-size: 21px;
    font-weight: 750;
    line-height: 1.35;
}

@media (max-width: 950px) {
    .case-overview__grid,
    .case-challenge__grid,
    .case-results__grid {
        grid-template-columns: 1fr;
    }

    .case-overview__facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .case-overview,
    .case-challenge,
    .case-strategy,
    .case-showcase,
    .case-results,
    .case-final {
        padding-right: 18px;
        padding-left: 18px;
    }

    .case-overview__facts {
        grid-template-columns: 1fr;
    }

    .case-fact {
        min-height: 150px;
        padding: 24px;
        border-radius: 22px;
    }
}
/* =========================================================
   ÉTUDE DE CAS — LE DÉFI
========================================================= */

.case-challenge {
    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(255, 116, 23, 0.12),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #f8f5ef 0%,
            #f4efe7 100%
        );
}

.case-challenge__grid {
    position: relative;
}

.case-challenge__number {
    position: absolute;
    top: -40px;
    left: -10px;
    z-index: 0;

    color: rgba(255, 116, 23, 0.12);

    font-size: clamp(110px, 16vw, 230px);
    font-weight: 850;
    line-height: 1;
    letter-spacing: -0.08em;

    pointer-events: none;
}

.case-challenge__content,
.case-challenge__points {
    position: relative;
    z-index: 1;
}

.case-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 24px;

    color: #ff7417;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.case-label::before {
    content: "";

    width: 34px;
    height: 1px;

    background: #ff7417;
}

.case-challenge__content h2 {
    max-width: 720px;
    margin: 0 0 32px;

    color: #111827;

    font-size: clamp(42px, 5.4vw, 70px);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.045em;
}

.case-challenge__content p {
    max-width: 720px;
    margin: 0 0 22px;

    color: #667085;

    font-size: clamp(17px, 1.8vw, 20px);
    line-height: 1.85;
}

.case-challenge__points {
    display: grid;
    gap: 18px;
}

.case-point {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 20px;
    align-items: start;

    padding: 26px;

    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 24px;

    background: rgba(255, 255, 255, 0.76);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    box-shadow: 0 18px 45px rgba(17, 24, 39, 0.06);

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.case-point:hover {
    transform: translateY(-6px);

    border-color: rgba(255, 116, 23, 0.35);

    box-shadow:
        0 26px 60px rgba(17, 24, 39, 0.09),
        0 10px 26px rgba(255, 116, 23, 0.08);
}

.case-point__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    border-radius: 18px;

    background: linear-gradient(
        135deg,
        #ff7417,
        #ff9b43
    );

    color: #ffffff;

    font-size: 22px;
    font-weight: 800;

    box-shadow:
        0 14px 30px rgba(255, 116, 23, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.case-point:hover .case-point__icon {
    transform: scale(1.06) rotate(-4deg);

    box-shadow:
        0 18px 38px rgba(255, 116, 23, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

.case-point h3 {
    margin: 4px 0 10px;

    color: #111827;

    font-size: 21px;
    font-weight: 780;
    line-height: 1.25;
}

.case-point p {
    margin: 0;

    color: #667085;

    font-size: 16px;
    line-height: 1.7;
}

@media (max-width: 950px) {
    .case-challenge__number {
        top: -20px;
        left: 0;
    }
}

@media (max-width: 620px) {
    .case-challenge__number {
        top: -5px;
        font-size: 100px;
    }

    .case-point {
        grid-template-columns: 50px minmax(0, 1fr);
        gap: 16px;
        padding: 22px;
    }

    .case-point__icon {
        width: 50px;
        height: 50px;
        border-radius: 16px;
    }

    .case-point h3 {
        font-size: 19px;
    }
}
/* =========================================================
   ÉTUDE DE CAS — STRATÉGIE
========================================================= */

.case-strategy {
    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(255, 116, 23, 0.08),
            transparent 32%
        ),
        #ffffff;
}

.case-section-header {
    max-width: 900px;
    margin-bottom: clamp(55px, 7vw, 90px);
}

.case-section-header p {
    max-width: 760px;
    margin-top: 26px;
}

.case-strategy__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.case-strategy-card {
    position: relative;
    overflow: hidden;

    min-height: 320px;
    padding: clamp(30px, 4vw, 46px);

    border: 1px solid #e5e7eb;
    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.98),
            rgba(248, 250, 252, 0.94)
        );

    box-shadow:
        0 24px 60px rgba(17, 24, 39, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.75);

    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.35s ease,
        box-shadow 0.4s ease;
}

.case-strategy-card::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at top right,
            rgba(255, 116, 23, 0.15),
            transparent 42%
        );

    opacity: 0;
    transition: opacity 0.4s ease;
}

.case-strategy-card::after {
    content: "";
    position: absolute;
    top: -120%;
    left: -55%;

    width: 42%;
    height: 320%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.8),
        transparent
    );

    transform: rotate(18deg);
    opacity: 0;

    transition:
        left 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.35s ease;

    pointer-events: none;
}

.case-strategy-card:hover {
    transform: translateY(-8px);

    border-color: rgba(255, 116, 23, 0.38);

    box-shadow:
        0 34px 78px rgba(17, 24, 39, 0.11),
        0 12px 30px rgba(255, 116, 23, 0.09);
}

.case-strategy-card:hover::before {
    opacity: 1;
}

.case-strategy-card:hover::after {
    left: 130%;
    opacity: 1;
}

.case-strategy-card__number {
    position: relative;
    z-index: 1;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;
    margin-bottom: 45px;

    border-radius: 50%;

    background: #111827;
    color: #ffffff;

    font-size: 15px;
    font-weight: 800;

    box-shadow: 0 14px 30px rgba(17, 24, 39, 0.18);

    transition:
        transform 0.35s ease,
        background 0.35s ease;
}

.case-strategy-card:hover .case-strategy-card__number {
    transform: scale(1.07) rotate(-5deg);
    background: #ff7417;
}

.case-strategy-card h3,
.case-strategy-card p {
    position: relative;
    z-index: 1;
}

.case-strategy-card h3 {
    margin: 0 0 18px;

    color: #111827;

    font-size: clamp(25px, 3vw, 34px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.025em;
}

.case-strategy-card p {
    max-width: 500px;
    margin: 0;

    color: #667085;

    font-size: 17px;
    line-height: 1.8;
}

@media (max-width: 820px) {
    .case-strategy__grid {
        grid-template-columns: 1fr;
    }

    .case-strategy-card {
        min-height: auto;
    }
}

@media (max-width: 620px) {
    .case-strategy-card {
        padding: 26px;
        border-radius: 22px;
    }

    .case-strategy-card__number {
        margin-bottom: 32px;
    }

    .case-strategy-card h3 {
        font-size: 25px;
    }
}
/* =========================================================
 /* =========================================================
   ÉTUDE DE CAS — PRÉSENTATION PREMIUM DU PROJET
========================================================= */

.case-presentation {
    position: relative;
    overflow: hidden;
    padding: clamp(80px, 9vw, 140px) 24px;
    background:
        radial-gradient(circle at 82% 22%, rgba(255,116,23,.10), transparent 30%),
        linear-gradient(180deg,#f8f5ef 0%,#ffffff 100%);
}

.case-presentation__card{
    position:relative;
    overflow:hidden;

    display:grid;
    grid-template-columns:.82fr 1.18fr;
    gap:70px;
    align-items:center;

    padding:70px;
    min-height:620px;

    border-radius:38px;
    border:1px solid rgba(17,24,39,.08);

    background:#fff;

    box-shadow:
        0 40px 100px rgba(17,24,39,.12),
        0 12px 40px rgba(255,116,23,.08);
}

.case-presentation__card::before{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    right:-120px;
    top:-150px;

    border-radius:50%;

    background:rgba(255,116,23,.12);

    filter:blur(90px);

}

.case-presentation__content,
.case-presentation__visual{
    position:relative;
    z-index:2;
}

.case-presentation__eyebrow{

    display:inline-flex;

    padding:11px 18px;

    margin-bottom:28px;

    border-radius:999px;

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

    border:1px solid rgba(255,116,23,.18);

    color:#f05b12;

    font-size:13px;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:.08em;

}

.case-presentation__content h2{

    margin-bottom:28px;

    color:#111827;

    font-size:clamp(48px,5vw,74px);

    font-weight:850;

    line-height:1.02;

    letter-spacing:-.05em;

}

.case-presentation__content h2 span{

    display:block;

}

.case-presentation__content h2 span::after{

    content:".";

    color:#ff7417;

}

.case-presentation__content p{

    max-width:560px;

    margin-bottom:40px;

    color:#667085;

    font-size:19px;

    line-height:1.8;

}

.case-presentation__actions{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

.case-presentation__button,
.case-presentation__link{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:58px;

    padding:0 28px;

    border-radius:14px;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

}

.case-presentation__button{

    background:linear-gradient(135deg,#ff7417,#ff9b45);

    color:#fff;

    box-shadow:0 16px 34px rgba(255,116,23,.28);

}

.case-presentation__button:hover{

    transform:translateY(-4px);

}

.case-presentation__link{

    color:#f05b12;

    border:1px solid rgba(255,116,23,.65);

}

.case-presentation__link:hover{

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

    transform:translateY(-4px);

}

.case-presentation__visual{

    display:flex;

    justify-content:center;

    align-items:center;

}

.case-presentation__visual img{

    width:100%;

    max-width:900px;

    height:auto;

    filter:drop-shadow(0 35px 45px rgba(17,24,39,.18));

    transition:.7s;

}

.case-presentation__card:hover .case-presentation__visual img{

    transform:translateY(-8px) scale(1.02);

}

@media(max-width:1100px){

.case-presentation__card{

grid-template-columns:1fr;

gap:50px;

}

.case-presentation__visual img{

max-width:800px;

}

}

@media(max-width:700px){

.case-presentation{

padding:70px 18px;

}

.case-presentation__card{

padding:34px 22px;

gap:34px;

}

.case-presentation__content h2{

font-size:44px;

}

.case-presentation__actions{

flex-direction:column;

}

.case-presentation__button,
.case-presentation__link{

width:100%;

}

}
/* =========================================================
   ÉTUDE DE CAS — RÉSULTATS
========================================================= */

.case-results {
    background:
        radial-gradient(
            circle at 8% 88%,
            rgba(255, 116, 23, 0.08),
            transparent 30%
        ),
        #ffffff;
}

.case-results__grid {
    align-items: center;
}

.case-results__content {
    max-width: 700px;
}

.case-results__content h2 {
    margin-bottom: 28px;
}

.case-results__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.case-result {
    position: relative;
    overflow: hidden;

    min-height: 210px;
    padding: 30px;

    border: 1px solid #e5e7eb;
    border-radius: 26px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f9fafb
        );

    box-shadow:
        0 22px 55px rgba(17, 24, 39, 0.07);

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.case-result::before {
    content: "";
    position: absolute;
    top: -70px;
    right: -70px;

    width: 160px;
    height: 160px;

    border-radius: 50%;

    background: rgba(255, 116, 23, 0.11);
    filter: blur(8px);

    transition:
        transform 0.45s ease,
        background 0.35s ease;
}

.case-result:hover {
    transform: translateY(-7px);

    border-color: rgba(255, 116, 23, 0.36);

    box-shadow:
        0 32px 75px rgba(17, 24, 39, 0.1),
        0 12px 28px rgba(255, 116, 23, 0.08);
}

.case-result:hover::before {
    transform: scale(1.2);
    background: rgba(255, 116, 23, 0.18);
}

.case-result strong,
.case-result span {
    position: relative;
    z-index: 1;
}

.case-result strong {
    display: block;
    margin-bottom: 34px;

    color: #ff7417;

    font-size: clamp(42px, 5vw, 68px);
    font-weight: 850;
    line-height: 1;
    letter-spacing: -0.055em;
}

.case-result span {
    display: block;
    max-width: 210px;

    color: #344054;

    font-size: 17px;
    font-weight: 700;
    line-height: 1.5;
}

@media (max-width: 950px) {
    .case-results__content {
        max-width: none;
    }
}

@media (max-width: 620px) {
    .case-results__stats {
        grid-template-columns: 1fr;
    }

    .case-result {
        min-height: 175px;
        padding: 26px;
        border-radius: 22px;
    }

    .case-result strong {
        margin-bottom: 26px;
    }
}
/* =========================================================
   ÉTUDE DE CAS — CTA FINAL
========================================================= */

.case-final {
    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(255, 116, 23, 0.18),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #111827 0%,
            #1f2937 100%
        );
}

.case-final__box {
    position: relative;
    overflow: hidden;

    padding: clamp(42px, 7vw, 90px);

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 34px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.08),
            rgba(255, 255, 255, 0.03)
        );

    box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.24);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.case-final__box::before {
    content: "";
    position: absolute;
    top: -150px;
    right: -120px;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    background: rgba(255, 116, 23, 0.2);
    filter: blur(80px);

    pointer-events: none;
}

.case-final__box::after {
    content: "";
    position: absolute;
    bottom: -140px;
    left: -100px;

    width: 340px;
    height: 340px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.06);
    filter: blur(70px);

    pointer-events: none;
}

.case-final__eyebrow,
.case-final__box h2,
.case-final__box p,
.case-final__actions {
    position: relative;
    z-index: 1;
}

.case-final__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 24px;

    color: #ff9b43;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.case-final__eyebrow::before {
    content: "";

    width: 34px;
    height: 1px;

    background: #ff7417;
}

.case-final__box h2 {
    max-width: 980px;
    margin: 0 0 28px;

    color: #ffffff;
}

.case-final__box p {
    max-width: 760px;
    margin-bottom: 38px;

    color: rgba(255, 255, 255, 0.7);
}

.case-final__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
}

.case-final__back {
    display: inline-flex;
    align-items: center;

    color: #ffffff;

    font-size: 16px;
    font-weight: 700;

    text-decoration: none;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

.case-final__back:hover {
    color: #ff9b43;
    transform: translateX(5px);
}

/* =========================================================
   ÉTUDE DE CAS — RESPONSIVE GLOBAL
========================================================= */

@media (max-width: 760px) {
    .case-overview__intro h2,
    .case-section-header h2,
    .case-results__content h2,
    .case-final__box h2,
    .case-challenge__content h2 {
        font-size: 38px;
    }

    .case-overview__text p,
    .case-results__content p,
    .case-section-header p,
    .case-final__box p,
    .case-challenge__content p {
        font-size: 17px;
        line-height: 1.75;
    }
}

@media (max-width: 620px) {
    .case-final__box {
        padding: 30px 24px;
        border-radius: 24px;
    }

    .case-final__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .case-final__actions .btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .case-final__back {
        justify-content: center;
    }
}
/* =========================================================
   CTA FINAL — BOUTON PREMIUM
========================================================= */

.case-final__actions .btn {

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 18px 38px;

    border-radius: 999px;

    background: linear-gradient(
        135deg,
        #ff7417 0%,
        #ff9f4a 100%
    );

    color: #ffffff !important;

    font-size: 17px;
    font-weight: 700;

    text-decoration: none;

    box-shadow:
        0 16px 40px rgba(255,116,23,.35);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        filter .35s ease;
}

.case-final__actions .btn:hover{

    transform:translateY(-4px);

    filter:brightness(1.05);

    box-shadow:
        0 24px 55px rgba(255,116,23,.45);

}

.case-final__back{

    margin-left:12px;

    opacity:.92;

}

.case-final__back:hover{

    opacity:1;

}
/* =========================================================
 /* =========================================================
   APPLE MACBOOK PRO MOCKUP
========================================================= */

.case-showcase__visual{
    background:transparent;
    border:none;
    box-shadow:none;
    min-height:auto;
    overflow:visible;
}

.case-showcase__visual::before,
.case-showcase__visual::after{
    display:none;
}

.case-macbook{
    position:relative;

    width:min(900px,86%);
    margin:30px auto 0;

    perspective:2400px;

    transform:
        translateY(28px)
        rotate(-2deg);

    transition:transform .6s ease;
}
.case-macbook__body{

    position:relative;

    padding:18px;

    border-radius:26px 26px 14px 14px;

    background:linear-gradient(
        180deg,
        #2c3138,
        #161b22
    );

    box-shadow:
        0 70px 120px rgba(0,0,0,.25),
        0 25px 60px rgba(0,0,0,.18);

    transform:
        rotateX(7deg)
        rotateZ(-2deg);

}

.case-macbook__camera{

    position:absolute;

    top:8px;
    left:50%;

    transform:translateX(-50%);

    width:110px;
    height:16px;

    border-radius:0 0 12px 12px;

    background:#090909;

    z-index:50;

}

.case-macbook__screen{

    position:relative;

    overflow:hidden;

    border-radius:12px;

    background:#000;

}

.case-macbook__screen img{

    display:block;

    width:100%;

    height:auto;

}

.case-macbook__glass{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            115deg,
            transparent 25%,
            rgba(255,255,255,.10) 42%,
            transparent 58%
        );

    animation:
        glassMove 8s linear infinite;

}

.case-macbook__base{

    position:relative;

    width:106%;

    margin:-3px auto 0;

}

.case-macbook__base-top{

    height:16px;

    border-radius:0 0 20px 20px;

    background:
        linear-gradient(
            180deg,
            #d7dbe0,
            #aab0b7
        );

}

.case-macbook__base-bottom{

    height:12px;

    margin:0 auto;

    width:94%;

    border-radius:0 0 60px 60px;

    background:
        linear-gradient(
            180deg,
            #aeb5bc,
            #8d949b
        );

}

.case-macbook__encoche{

    position:absolute;

    top:4px;
    left:50%;

    transform:translateX(-50%);

    width:120px;
    height:5px;

    border-radius:20px;

    background:#808891;

}

.case-macbook__shadow{

    position:absolute;

    left:50%;
    bottom:-36px;

    transform:translateX(-50%);

    width:82%;
    height:42px;

    border-radius:50%;

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

    filter:blur(24px);

    z-index:-1;

}

@keyframes glassMove{

    from{

        transform:translateX(-140%);

    }

    to{

        transform:translateX(140%);

    }

}
/* =========================================================
   PORTFOLIO — SHOWCASE PREMIUM
========================================================= */

.portfolio-showcase {
    position: relative;
    overflow: hidden;
    padding: clamp(80px, 9vw, 140px) 24px;

    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(255, 116, 23, 0.12),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #f8f5ef 0%,
            #ffffff 100%
        );
}

.portfolio-showcase__card {
    position: relative;
    overflow: hidden;

    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 38px;

    background: #ffffff;

    box-shadow:
        0 45px 110px rgba(17, 24, 39, 0.13),
        0 14px 38px rgba(255, 116, 23, 0.08);

    transition:
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.6s ease;
}

.portfolio-showcase__card:hover {
    transform: translateY(-8px);

    box-shadow:
        0 58px 135px rgba(17, 24, 39, 0.17),
        0 18px 48px rgba(255, 116, 23, 0.12);
}

/* IMAGE */

.portfolio-showcase__image {
    position: relative;
    overflow: hidden;

    aspect-ratio: 16 / 9;

    background: #f3f0e9;
}

.portfolio-showcase__image::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 65%,
            rgba(17, 24, 39, 0.08) 100%
        );

    pointer-events: none;
}

.portfolio-showcase__image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transform: scale(1.001);

    transition:
        transform 1.1s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.7s ease;
}

.portfolio-showcase__card:hover .portfolio-showcase__image img {
    transform: scale(1.035);
    filter: saturate(1.03) contrast(1.01);
}

/* INFORMATIONS */

.portfolio-showcase__details {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.9fr);
    gap: clamp(45px, 7vw, 100px);
    align-items: end;

    padding: clamp(34px, 5vw, 64px);
}

.portfolio-showcase__label {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 20px;

    color: #f05b12;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.portfolio-showcase__label::before {
    content: "";

    width: 34px;
    height: 1px;

    background: #ff7417;
}

.portfolio-showcase__identity h2 {
    margin: 0 0 18px;

    color: #111827;

    font-size: clamp(34px, 4vw, 56px);
    font-weight: 850;
    line-height: 1.05;
    letter-spacing: -0.045em;
}

.portfolio-showcase__identity p {
    max-width: 650px;
    margin: 0;

    color: #667085;

    font-size: 18px;
    line-height: 1.8;
}

/* SERVICES */

.portfolio-showcase__services {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.portfolio-showcase__service {
    position: relative;

    min-height: 125px;
    padding: 22px;

    border: 1px solid #e5e7eb;
    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f9fafb
        );

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.portfolio-showcase__service:hover {
    transform: translateY(-5px);

    border-color: rgba(255, 116, 23, 0.38);

    box-shadow:
        0 20px 45px rgba(17, 24, 39, 0.08),
        0 8px 20px rgba(255, 116, 23, 0.07);
}

.portfolio-showcase__service span {
    display: block;
    margin-bottom: 22px;

    color: #ff7417;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.portfolio-showcase__service strong {
    display: block;

    color: #111827;

    font-size: 17px;
    font-weight: 750;
    line-height: 1.35;
}

/* TABLETTE */

@media (max-width: 1000px) {
    .portfolio-showcase__details {
        grid-template-columns: 1fr;
    }

    .portfolio-showcase__services {
        max-width: 720px;
    }
}

/* MOBILE */

@media (max-width: 650px) {
    .portfolio-showcase {
        padding-right: 18px;
        padding-left: 18px;
    }

    .portfolio-showcase__card {
        border-radius: 25px;
    }

    .portfolio-showcase__image {
        aspect-ratio: 4 / 3;
    }

    .portfolio-showcase__image img {
        object-position: 62% center;
    }

    .portfolio-showcase__details {
        gap: 35px;
        padding: 30px 22px;
    }

    .portfolio-showcase__identity h2 {
        font-size: 36px;
    }

    .portfolio-showcase__identity p {
        font-size: 16px;
        line-height: 1.7;
    }

    .portfolio-showcase__services {
        grid-template-columns: 1fr;
    }

    .portfolio-showcase__service {
        min-height: 105px;
    }
}
/* =========================================================
 /* =========================================================
   ÉTUDE DE CAS — SHOWCASE PREMIUM
========================================================= */

.case-banner {
    position: relative;

    width: min(1700px, calc(100% - 40px));
    margin: 20px auto 100px;

    overflow: hidden;

    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 34px;

    background: #ffffff;

    box-shadow:
        0 40px 100px rgba(17, 24, 39, 0.14),
        0 14px 40px rgba(255, 116, 23, 0.1);

    transform: translateZ(0);
}

.case-banner::before {
    content: "";

    position: absolute;
    z-index: 2;
    inset: 0;

    border-radius: inherit;

    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.35);

    pointer-events: none;
}

.case-banner-image {
    display: block;

    width: 100%;
    height: auto;

    object-fit: cover;
    object-position: center;

    transform: scale(1.001);

    transition:
        transform 1.1s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.8s ease;
}

.case-banner:hover .case-banner-image {
    transform: scale(1.025);
    filter: saturate(1.03) contrast(1.015);
}

/* TABLETTE */

@media (max-width: 1000px) {
    .case-banner {
        width: calc(100% - 32px);
        margin-top: 10px;
        margin-bottom: 80px;

        border-radius: 26px;
    }
}

/* MOBILE */

@media (max-width: 650px) {
    .case-banner {
        width: calc(100% - 24px);
        margin-top: 0;
        margin-bottom: 65px;

        border-radius: 20px;
    }

    .case-banner-image {
        min-height: 290px;

        object-fit: cover;
        object-position: center;
    }
}
/* =========================================================
   AN STUDIO CONNECT
========================================================= */