:root{
  --ink:#0A1F54;
  --ink-2:#071640;
  --paper:#FFFFFF;
  --paper-2:#F3F5FA;
  --rouge:#C0392B;
  --or:#B08D3D;
  --gris:#5B6472;
  --ligne: rgba(10,31,84,0.14);
  --ligne-dark: rgba(255,255,255,0.16);
  --serif:'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:'Inter', 'Helvetica Neue', Arial, sans-serif;
}
*{box-sizing:border-box;}
html,body{background:var(--paper); color:var(--ink);}
body{font-family:var(--sans); margin:0; overflow-x:hidden; -webkit-font-smoothing:antialiased;}
::selection{background:var(--ink); color:#fff;}
h1,h2,h3,h4,.serif{font-family:var(--serif); font-weight:600; letter-spacing:-0.01em;}
.num{font-family:var(--serif); font-style:italic; font-weight:500;}
a{color:inherit; text-decoration:none;}
.container{max-width:1240px; margin:0 auto; padding-left:24px; padding-right:24px;}
@media(min-width:768px){.container{padding-left:56px; padding-right:56px;}}

.rule-full{height:1px; background:var(--ligne);}

.btn{display:inline-flex; align-items:center; gap:10px; font-family:var(--sans); font-weight:600; font-size:14px; letter-spacing:0.01em; padding:15px 28px; border-radius:2px; cursor:pointer; border:1px solid transparent; transition:transform .2s cubic-bezier(.2,.8,.2,1), background .2s, color .2s, border-color .2s; white-space:nowrap;}
.btn-primary{background:var(--ink); color:#fff;}
.btn-primary:hover{background:var(--ink-2); transform:translateY(-2px);}
.btn-ghost{border-color:var(--ligne); color:var(--ink);}
.btn-ghost:hover{border-color:var(--ink); transform:translateY(-2px);}
.btn-ghost.on-dark{border-color:var(--ligne-dark); color:#fff;}
.btn-ghost.on-dark:hover{border-color:#fff;}
.btn-inverse{background:#fff; color:var(--ink);}
.btn-inverse:hover{background:var(--paper-2); transform:translateY(-2px);}

.magnetic{display:inline-block;}

/* nav */
#site-nav{position:fixed; top:0; left:0; right:0; z-index:80; padding:20px 0; transition:background .25s ease, padding .25s ease, border-color .25s ease, color .25s ease;}
#site-nav.on-light{color:var(--ink);}
#site-nav.on-dark{color:#fff;}
#site-nav.scrolled{background:rgba(255,255,255,0.92); backdrop-filter:blur(10px); padding:12px 0; border-bottom:1px solid var(--ligne); color:var(--ink) !important;}
.navlink{font-size:13px; letter-spacing:0.03em; font-weight:600; opacity:.75; transition:opacity .18s, color .18s; position:relative;}
.navlink:hover, .navlink.active{opacity:1; color:var(--rouge);}
#site-nav.scrolled .navlink:hover, #site-nav.scrolled .navlink.active{color:var(--rouge);}
.navlink::after{content:'';position:absolute; left:0; right:0; bottom:-6px; height:1px; background:var(--rouge); transform:scaleX(0); transform-origin:left; transition:transform .2s ease;}
.navlink:hover::after, .navlink.active::after{transform:scaleX(1);}
.logo-chip{display:inline-flex; align-items:left; gap:8px; background:#ffffff58; padding:0px 1px; border-radius:999px; }
.logo-chip img{height:100px; display:block;}

.nav-dropdown-wrap{position:relative;}
.nav-dropdown{position:absolute; top:calc(100% + 14px); left:-16px; background:#fff; border:1px solid var(--ligne); min-width:230px; padding:8px 0; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .15s ease, transform .15s ease, visibility .15s; z-index:90; box-shadow:0 12px 30px rgba(10,31,84,0.14);}
.nav-dropdown-wrap:hover .nav-dropdown{opacity:1; visibility:visible; transform:translateY(0);}
.nav-dropdown a{display:block; padding:10px 18px; font-size:13px; color:var(--ink); opacity:.85;}
.nav-dropdown a:hover{color:var(--rouge); background:var(--paper-2); opacity:1;}

/* hero */
.hero-headline{font-size:clamp(42px,7.4vw,104px); line-height:1.02; font-weight:600; color:#fff;}
.hero-tagline{font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(18px,2.2vw,26px); color:#fff; opacity:.92;}
.dark-section{background:var(--ink);}
.dark-section, .dark-section .eyebrow{color:#fff;}
.dark-section .eyebrow{color:#DCC98A; opacity:1;}

.grain{position:absolute; inset:0; pointer-events:none; opacity:.05; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.hero-orb{position:absolute; border-radius:50%; filter:blur(80px); opacity:.28;}

.eyebrow{font-size:12px; letter-spacing:0.14em; color:var(--gris); font-weight:600; text-transform:uppercase;}

.service-row{border-top:1px solid var(--ligne); padding:30px 0; display:grid; grid-template-columns:52px 1fr; gap:22px; align-items:start; transition:padding-left .2s ease, background .3s ease;}
.service-row:last-child{border-bottom:1px solid var(--ligne);}
.service-row:hover{padding-left:14px; background:var(--paper-2);}
.service-row:hover .service-title{color:var(--rouge);}
.service-title{font-family:var(--serif); font-size:clamp(20px,2.4vw,28px); transition:color .3s;}
.service-idx{font-family:var(--serif); font-style:italic; color:var(--gris); font-size:18px;}
.service-desc{color:var(--gris); font-size:15px; max-width:52ch; line-height:1.55; grid-column:2;}

.info-cell{border-top:1px solid var(--ligne); padding:20px 0;}
.info-cell .k{font-size:11px; letter-spacing:0.1em; color:var(--gris); font-weight:600; text-transform:uppercase; margin-bottom:6px;}
.info-cell .v{font-family:var(--serif); font-size:18px;}

.step-row{display:grid; grid-template-columns:64px 1fr; gap:20px; padding:28px 0; border-top:1px solid var(--ligne);}
.step-row:last-child{border-bottom:1px solid var(--ligne);}
.step-num{font-family:var(--serif); font-style:italic; font-size:30px; color:var(--rouge);}

.pillar-card{border:1px solid var(--ligne); padding:30px; background:var(--paper); transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;}
.pillar-card:hover{transform:translateY(-6px); box-shadow:0 18px 40px rgba(10,31,84,0.12); border-color:transparent;}
.pillar-card .n{font-family:var(--serif); font-style:italic; color:var(--rouge); font-size:24px; margin-bottom:14px; display:block;}

.icon-circle{width:60px; height:60px; border-radius:50%; background:var(--paper-2); display:flex; align-items:center; justify-content:center; color:var(--ink); margin:0 auto 16px; transition:transform .4s cubic-bezier(.34,1.56,.64,1), background .3s ease, color .3s ease;}
.icon-circle svg{width:26px; height:26px;}
.icon-circle.on-dark{background:rgba(255,255,255,0.1); color:#fff;}
.icon-circle.rouge{color:var(--rouge);}
.icon-card{text-align:center; padding:10px; transition:transform .3s ease;}
.icon-card .icon-circle{margin-left:auto; margin-right:auto;}
.icon-card:hover .icon-circle, .pillar-card:hover .icon-circle{transform:scale(1.12) rotate(-4deg); background:var(--ink); color:#fff;}
.icon-row{display:flex; align-items:flex-start; gap:18px;}
.icon-row .icon-circle{flex:none; margin:0;}
.icon-row:hover .icon-circle{transform:scale(1.1) rotate(-4deg); background:var(--ink); color:#fff;}

.data-table{width:100%; border-collapse:collapse; font-size:13.5px;}
.data-table th{text-align:left; font-family:var(--sans); font-weight:600; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--gris); padding:12px 16px; border-bottom:1px solid var(--ligne);}
.data-table td{padding:16px; border-bottom:1px solid var(--ligne); vertical-align:top; color:var(--ink);}
.data-table tr:hover td{background:var(--paper-2);}

.stamp{display:inline-block; border:3px solid var(--rouge); color:var(--rouge); font-family:var(--sans); font-weight:800; letter-spacing:.08em; padding:10px 22px; border-radius:6px; transform:rotate(-6deg); text-transform:uppercase; font-size:13px;}

.nav-dropdown a[data-lang]{font-size:13px;}
.lang-switch #lang-current{font-size:12px; letter-spacing:0.03em; border:1px solid var(--ligne); padding:6px 12px; border-radius:999px; opacity:1;}
#site-nav.on-dark .lang-switch #lang-current{border-color:var(--ligne-dark);}
.lang-switch .nav-dropdown{min-width:170px; left:auto; right:-16px;}
.lang-switch .nav-dropdown a.active{color:var(--rouge); font-weight:600;}

.lang-pill{font-size:11px; font-weight:600; letter-spacing:0.02em; padding:6px 12px; border:1px solid var(--ligne); border-radius:999px; color:var(--ink); background:transparent; cursor:pointer; transition:background .18s, color .18s, border-color .18s;}
.lang-pill:hover{border-color:var(--ink);}
.lang-pill.active{background:var(--ink); color:#fff; border-color:var(--ink);}

html[dir="rtl"] body{font-family:'Noto Kufi Arabic', var(--sans);}
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] .serif{font-family:'Noto Kufi Arabic', var(--serif); font-style:normal;}
html[dir="rtl"] .service-row{grid-template-columns:1fr 52px;}
html[dir="rtl"] .service-row .service-idx{order:2;}
html[dir="rtl"] .step-row{grid-template-columns:1fr 64px;}
html[dir="rtl"] .step-row .step-num{order:2;}
html[dir="rtl"] .icon-row{flex-direction:row-reverse;}
html[dir="rtl"] .nav-dropdown{left:auto; right:-16px;}
html[dir="rtl"] .lang-switch .nav-dropdown{right:auto; left:-16px;}
html[dir="rtl"] .navlink.pl-4{padding-left:0; padding-right:1rem;}
html[dir="rtl"] .mobile-menu-indent{padding-left:0;}

footer{background:var(--ink); color:#fff; border-top:1px solid var(--ligne-dark);}
footer .eyebrow{color:#DCC98A; opacity:1;}
footer a:hover{color:#DCC98A;}

/* devis panel */
#devis-panel{position:fixed; inset:0; z-index:200; display:none;}
#devis-panel.open{display:block;}
#devis-backdrop{position:absolute; inset:0; background:rgba(10,31,84,0.55); backdrop-filter:blur(3px);}
#devis-sheet{position:absolute; right:0; top:0; bottom:0; width:min(460px,100%); background:var(--paper); border-left:1px solid var(--ligne); padding:34px 30px; overflow-y:auto; transform:translateX(100%); transition:transform .3s cubic-bezier(.2,.8,.2,1);}
#devis-panel.open #devis-sheet{transform:translateX(0);}
.field{width:100%; background:transparent; border:none; border-bottom:1px solid var(--ligne); color:var(--ink); padding:10px 2px; font-family:var(--sans); font-size:15px; outline:none; transition:border-color .25s;}
.field:focus{border-color:var(--ink);}
.field::placeholder{color:var(--gris);}
label.flabel{font-size:11px; letter-spacing:0.08em; color:var(--gris); font-weight:600; text-transform:uppercase; display:block; margin-bottom:4px;}

#mobile-cta{position:fixed; left:0; right:0; bottom:0; z-index:60; background:var(--ink); color:#fff; display:none;}
@media(max-width:767px){#mobile-cta{display:flex;}}
#mobile-cta button{width:100%; padding:16px; font-family:var(--sans); font-weight:700; font-size:14px; letter-spacing:.03em; background:transparent; border:none; color:#fff;}

[data-reveal]{opacity:0; transform:translateY(28px);}

#preloader{position:fixed; inset:0; z-index:300; background:var(--ink); display:flex; align-items:center; justify-content:center; overflow:hidden;}
#preloader .pl-word{font-family:var(--serif); font-size:clamp(24px,5.4vw,64px); color:#fff; overflow:hidden; display:flex; font-style:italic;}
#preloader .pl-word span{display:inline-block; transform:translateY(115%);}
#preloader .pl-bar{position:absolute; left:0; bottom:0; height:4px; width:0%; background:var(--rouge);}
#preloader .pl-panel{position:absolute; inset:0; background:var(--rouge); transform:scaleY(0); transform-origin:bottom;}

.line-mask{overflow:hidden; display:block;}
.line-inner{display:block; transform:translateY(115%);}

#cursor-glow{position:fixed; top:0; left:0; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle, rgba(10,31,84,0.10), transparent 70%); pointer-events:none; z-index:5; transform:translate(-50%,-50%); will-change:transform;}

@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1 !important; transform:none !important;}
  .line-inner{transform:none !important;}
  .btn{transition:none;}
  #preloader, #cursor-glow{display:none !important;}
}
/* =========================================================
   HERO — IMAGE DE FOND
   ========================================================= */

.hero-section {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    background: #111;
}

/* ---------------------------------------------------------
   IMAGE
   --------------------------------------------------------- */

.hero-background {
    position: absolute;
    inset: 0;
    z-index: -3;

    background-image: url("heroibl.jpeg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    transform: scale(1.03);
    will-change: transform;
}

/* ---------------------------------------------------------
   OVERLAY
   --------------------------------------------------------- */

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: -2;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.82) 0%,
            rgba(0, 0, 0, 0.64) 38%,
            rgba(0, 0, 0, 0.38) 70%,
            rgba(0, 0, 0, 0.48) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.22) 0%,
            rgba(0, 0, 0, 0.05) 45%,
            rgba(0, 0, 0, 0.72) 100%
        );
}

/* ---------------------------------------------------------
   LUEURS
   --------------------------------------------------------- */

.hero-light {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(90px);
    z-index: -1;
}

/* Lueur rouge discrète */
.hero-light-right {
    width: 420px;
    height: 420px;
    right: -180px;
    top: -130px;

    background: var(--rouge);
    opacity: 0.13;
}

/* Lueur dorée discrète */
.hero-light-bottom {
    width: 320px;
    height: 320px;
    left: -150px;
    bottom: -170px;

    background: #DCC98A;
    opacity: 0.09;
}

/* ---------------------------------------------------------
   TEXTE HERO
   --------------------------------------------------------- */

.hero-section .hero-headline {
    position: relative;
    z-index: 2;
}

.hero-section .hero-tagline {
    color: rgba(255,255,255,0.92);
    font-size: 17px;
    line-height: 1.6;
}

.hero-section .eyebrow {
    color: rgba(255,255,255,0.72);
}

/* ---------------------------------------------------------
   BOUTON SECONDAIRE
   --------------------------------------------------------- */

.hero-section .btn-ghost.on-dark {
    color: #fff;
    border-color: rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.04);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.hero-section .btn-ghost.on-dark:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.65);
}

/* ---------------------------------------------------------
   IMAGE — PETIT EFFET ZOOM
   --------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {

    .hero-background {
        animation: heroImageZoom 12s ease-out forwards;
    }

    @keyframes heroImageZoom {
        from {
            transform: scale(1.08);
        }

        to {
            transform: scale(1.03);
        }
    }
}

/* ---------------------------------------------------------
   TABLETTE
   --------------------------------------------------------- */

@media (max-width: 1024px) {

    .hero-background {
        background-position: center center;
    }

    .hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(0,0,0,0.78) 0%,
                rgba(0,0,0,0.55) 60%,
                rgba(0,0,0,0.45) 100%
            ),
            linear-gradient(
                180deg,
                rgba(0,0,0,0.18),
                rgba(0,0,0,0.72)
            );
    }
}

/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 768px) {

    .hero-section {
        min-height: 100svh;
        padding-top: 150px;
        padding-bottom: 70px;
    }

    .hero-background {
        background-position: 62% center;
    }

    .hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(0,0,0,0.38) 0%,
                rgba(0,0,0,0.60) 45%,
                rgba(0,0,0,0.90) 100%
            );
    }

    .hero-light-right {
        width: 280px;
        height: 280px;
        right: -160px;
        top: -80px;
    }

    .hero-light-bottom {
        width: 220px;
        height: 220px;
        left: -120px;
        bottom: -120px;
    }

    .hero-section .hero-tagline {
        font-size: 15px;
    }

    .hero-section .text-white\/65 {
        font-size: 14px;
    }
}
/* =========================================================
   HERO — PAGE À PROPOS
   ========================================================= */

.about-hero {
    position: relative;
    isolation: isolate;
    min-height: 70vh;
    background: #111;
}

/* ---------------------------------------------------------
   IMAGE DE FOND  logo-chip
   --------------------------------------------------------- */

.about-hero-background {
    position: absolute;
    inset: 0;
    z-index: -3;

    background-image: url("heropropos.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    transform: scale(1.03);
}

/* ---------------------------------------------------------
   OVERLAY
   --------------------------------------------------------- */

.about-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: -2;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.84) 0%,
            rgba(0, 0, 0, 0.68) 40%,
            rgba(0, 0, 0, 0.42) 75%,
            rgba(0, 0, 0, 0.52) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.25) 0%,
            rgba(0, 0, 0, 0.08) 45%,
            rgba(0, 0, 0, 0.78) 100%
        );
}

/* ---------------------------------------------------------
   LUEUR ROUGE
   --------------------------------------------------------- */

.about-hero-light {
    position: absolute;
    width: 420px;
    height: 420px;

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

    border-radius: 50%;

    background: var(--rouge);
    opacity: 0.10;

    filter: blur(100px);

    pointer-events: none;
    z-index: -1;
}

/* ---------------------------------------------------------
   TEXTE
   --------------------------------------------------------- */

.about-hero .eyebrow {
    color: rgba(255, 255, 255, 0.72);
}

.about-hero h1 {
    position: relative;
    z-index: 2;
}

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

/* ---------------------------------------------------------
   EFFET ZOOM IMAGE
   --------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {

    .about-hero-background {
        animation: aboutHeroZoom 12s ease-out forwards;
    }

    @keyframes aboutHeroZoom {

        from {
            transform: scale(1.08);
        }

        to {
            transform: scale(1.03);
        }

    }

}

/* ---------------------------------------------------------
   TABLETTE
   --------------------------------------------------------- */

@media (max-width: 1024px) {

    .about-hero-background {
        background-position: center center;
    }

    .about-hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(0, 0, 0, 0.82) 0%,
                rgba(0, 0, 0, 0.60) 65%,
                rgba(0, 0, 0, 0.50) 100%
            ),
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.20),
                rgba(0, 0, 0, 0.78)
            );
    }

}

/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 768px) {

    .about-hero {
        min-height: 78svh;
        padding-top: 145px;
        padding-bottom: 65px;
    }

    .about-hero-background {
        background-position: 60% center;
    }

    .about-hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.38) 0%,
                rgba(0, 0, 0, 0.62) 45%,
                rgba(0, 0, 0, 0.92) 100%
            );
    }

    .about-hero-light {
        width: 280px;
        height: 280px;

        right: -150px;
        top: -80px;

        opacity: 0.08;
    }

}
/* =========================================
   HERO SERVICES
========================================= */

.services-hero {
  position: relative;
  isolation: isolate;
  min-height: 70vh;
  background: #071640;
}

/* IMAGE */
.services-hero-bg {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

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

  z-index: -3;

  transform: scale(1.03);
}

/* OVERLAY SOMBRE */
.services-hero-overlay {
  position: absolute;
  inset: 0;

  z-index: -2;

  background:
    linear-gradient(
      90deg,
      rgba(7, 22, 64, 0.94) 0%,
      rgba(7, 22, 64, 0.78) 38%,
      rgba(7, 22, 64, 0.48) 70%,
      rgba(7, 22, 64, 0.62) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.15) 0%,
      rgba(0, 0, 0, 0.15) 50%,
      rgba(0, 0, 0, 0.55) 100%
    );
}

/* ORBE ROUGE */
.services-hero::after {
  content: "";
  position: absolute;

  width: 420px;
  height: 420px;

  right: -100px;
  top: -120px;

  background: var(--rouge);

  opacity: 0.16;

  filter: blur(80px);

  border-radius: 50%;

  z-index: -1;

  pointer-events: none;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

  .services-hero {
    min-height: 78svh;
    padding-top: 145px;
    padding-bottom: 65px;
  }

  .services-hero-bg {
    object-position: 60% center;
  }

  .services-hero-overlay {
    background:
      linear-gradient(
        180deg,
        rgba(7, 22, 64, 0.82) 0%,
        rgba(7, 22, 64, 0.68) 45%,
        rgba(7, 22, 64, 0.92) 100%
      );
  }

  .services-hero::after {
    width: 260px;
    height: 260px;

    right: -100px;
    top: -80px;

    opacity: 0.12;
  }
}