/* ============================================================
   Ets. Med El Harti — custom skin (brand #023b86), matched to the PDF design
   ============================================================ */
:root{
	--brand:#023b86;
	--brand-light:#3f73c9;
	--brand-dark:#022a60;
	--red:#ed1c24;
	--ink:#3a3a3a;
	--grey-bg:#eef1f5;
}

/* ============================================================
   SITE LOADER — logo silhouette filling up with red "water"
   ============================================================ */
.site-loader{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;background:#fff;transition:opacity .6s ease,visibility .6s ease;}
.site-loader.is-hidden{opacity:0;visibility:hidden;}
.site-loader__logo{position:relative;width:170px;height:170px;
	-webkit-mask:url('/static/img/logos/loader-logo.svg') center/contain no-repeat;
	        mask:url('/static/img/logos/loader-logo.svg') center/contain no-repeat;}
/* empty (un-filled) logo shown faintly behind the water */
.site-loader__ghost{position:absolute;inset:0;background:#e4e7ec;}
/* the rising red water */
.site-loader__water{position:absolute;left:0;right:0;bottom:0;height:0;background:var(--red);
	animation:loaderFill 2.4s cubic-bezier(.45,.05,.4,1) infinite;}
/* two wavy crests riding the waterline for a liquid feel */
.site-loader__water::before,.site-loader__water::after{content:"";position:absolute;left:-50%;width:200%;height:22px;top:-16px;background-repeat:repeat-x;background-size:140px 22px;}
.site-loader__water::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='22' viewBox='0 0 140 22'%3E%3Cpath d='M0 12 C 23 -2 47 26 70 12 C 93 -2 117 26 140 12 L140 22 L0 22 Z' fill='%23ed1c24'/%3E%3C/svg%3E");animation:loaderWave 2.2s linear infinite;}
.site-loader__water::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='22' viewBox='0 0 140 22'%3E%3Cpath d='M0 12 C 23 26 47 -2 70 12 C 93 26 117 -2 140 12 L140 22 L0 22 Z' fill='%23ed1c24'/%3E%3C/svg%3E");animation:loaderWave 3.1s linear infinite reverse;opacity:.6;}
@keyframes loaderFill{0%{height:0}70%,100%{height:100%}}
@keyframes loaderWave{from{transform:translateX(0)}to{transform:translateX(140px)}}
@media (prefers-reduced-motion:reduce){
	.site-loader__water{animation:none;height:100%;}
	.site-loader__water::before,.site-loader__water::after{animation:none;}
}

/* Client request: site text is blue (#023b86) everywhere except on dark/blue
   backgrounds where .text-color-light keeps it white. */
body,.body{font-family:'Montserrat',sans-serif;color:var(--brand);}
h1,h2,h3,h4,h5,h6{font-family:'Montserrat',sans-serif;}
p{color:var(--brand);}

/* Helpers */
.text-color-primary{color:var(--brand)!important;}
.text-color-primary-light{color:var(--brand-light)!important;}
.text-color-dark{color:var(--brand)!important;}
.text-color-dark-50{color:#3a5e96!important;}
.text-color-grey{color:#5f79a3!important;}
.bg-color-primary,.bg-primary{background-color:var(--brand)!important;}
.letter-spacing-1{letter-spacing:1px;}
.lh-1{line-height:1;}

/* Buttons — brand blue, turning the company red on hover (client request) */
.btn-primary{background-color:var(--brand);border-color:var(--brand);}
.btn-primary:hover,.btn-primary:focus{background-color:var(--red)!important;border-color:var(--red)!important;}
.btn-rounded{border-radius:35px;}
.btn-outline.btn-primary{color:var(--brand);background:transparent;}
.btn-outline.btn-primary:hover{background:var(--red);border-color:var(--red);color:#fff;}
.btn-link.text-color-primary:hover{color:var(--red)!important;}

/* Footer logo (white, enlarged — client request) */
.footer-logo{width:220px;max-width:80%;height:auto;filter:brightness(0) invert(1);}

/* Neutralize Porto's default .section dark bg/border (we use our own .sec system) */
.section{background:transparent;border:0;margin:0;padding:0;}

/* ---------- SECTION SYSTEM ---------- */
.sec{padding:5rem 0;position:relative;}
.sec-sm{padding:3.25rem 0;position:relative;}
.sec-white{background:#fff;}
.sec-light{background:var(--grey-bg);}
.sec-blue{background:var(--brand);}
.sec-blueprint{background:#eef2f7;position:relative;overflow:hidden;}
/* fainter blueprint so the (blue) text stands out more — client request */
.sec-blueprint::before{content:"";position:absolute;inset:0;background:url('/static/img/backgrounds/blueprint.webp') center/cover no-repeat;opacity:.10;z-index:0;}
.sec-blueprint>.container{position:relative;z-index:1;}
/* bigger stat numbers + labels (client request) */
.sec-blueprint .counters strong{font-size:4rem;}
.sec-blueprint .counters label{font-size:1rem;}
@media(max-width:767px){.sec-blueprint .counters strong{font-size:2.6rem;}}

/* One continuous blueprint background spanning several sections */
.blueprint-band{position:relative;background:#e9edf3;overflow:hidden;}
.blueprint-band::before{content:"";position:absolute;inset:0;background:url('/static/img/backgrounds/blueprint.webp') center/cover no-repeat;opacity:.22;z-index:0;}
.blueprint-band>section{position:relative;z-index:1;}

/* Section headings with a rule line */
.heading{display:flex;align-items:center;gap:1.6rem;margin-bottom:2.6rem;}
.heading h2{text-transform:uppercase;}
.heading-line{flex:1 1 auto;height:2px;background:var(--brand);opacity:.45;}
.heading-line-light{background:#fff;opacity:.5;}
.heading-right{flex-direction:row-reverse;}
.heading-right h2{text-align:right;}

/* ============================================================
   TOP BAR — replaces the left side-bar everywhere; overlays the
   hero and slides away on scroll (client request)
   ============================================================ */
.topbar{position:fixed;top:0;left:0;right:0;z-index:9994;display:flex;align-items:center;justify-content:space-between;padding:1.15rem 2.2rem;pointer-events:none;transition:background-color .35s ease,box-shadow .35s ease,padding .35s ease;}
.topbar>*{pointer-events:auto;}
/* sticky bar: transparent over the hero, solid brand-blue once scrolled so the
   white logo + hamburger keep contrast over light sections (client request) */
.topbar.topbar--scrolled{background:var(--brand);box-shadow:0 6px 22px rgba(2,42,96,.22);padding-top:.55rem;padding-bottom:.55rem;}
.topbar-logo img{height:78px;width:auto;filter:brightness(0) invert(1);transition:height .35s ease;}/* logo blanc total */
.topbar.topbar--scrolled .topbar-logo img{height:60px;}
/* pages with a light hero panel (e.g. contact): keep the bar solid from the top
   so the white logo + hamburger stay visible */
body.topbar-solid .topbar{background:var(--brand);box-shadow:0 6px 22px rgba(2,42,96,.22);}
body.topbar-solid .topbar .topbar-logo img{height:60px;}
/* hamburger/close lines stay white — good over the dark hero and the blue bar */
.topbar-burger .hamburguer span,.topbar-burger .close span{background:#fff!important;}
@media(max-width:991px){.topbar{padding:.7rem 1.1rem;}.topbar-logo img{height:60px;}.topbar.topbar--scrolled .topbar-logo img{height:50px;}}

/* --- Top bar while the slide-in menu is OPEN ---
   The white panel slides under the bar, so: drop the bar's bg/shadow, hide the
   duplicate logo (the panel has its own), and keep the close (✕) legible. */
html:not(.side-header-hide) .topbar{background:transparent!important;box-shadow:none!important;}
html:not(.side-header-hide) .topbar-logo{opacity:0;visibility:hidden;}
/* On phones the panel covers (nearly) the full width → the ✕ sits over white,
   so darken it; on desktop the panel is a left rail and the ✕ stays over the
   hero, so it stays white. */
@media(max-width:575px){#header.side-header,#header.side-header.side-header-lg{width:100%!important;max-width:100%!important;}}
@media(max-width:991px){
	html:not(.side-header-hide) .topbar-burger .hamburguer span,
	html:not(.side-header-hide) .topbar-burger .close span{background:var(--brand)!important;}
}

/* ============================================================
   SCROLL-REVEAL ANIMATIONS (blur + rise + fade, randomised) —
   like tgcc.ma. Applied via JS so no-JS users still see content.
   ============================================================ */
.reveal{opacity:0;transform:translateY(34px);filter:blur(9px);transition:opacity .85s cubic-bezier(.2,.6,.2,1),transform .85s cubic-bezier(.2,.6,.2,1),filter .85s ease;will-change:opacity,transform,filter;}
.reveal.reveal--left{transform:translateX(-44px);}
.reveal.reveal--right{transform:translateX(44px);}
.reveal.reveal--zoom{transform:scale(.92);}
.reveal.in-view{opacity:1;transform:none;filter:none;}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important;filter:none!important;transition:none!important;}}

/* ---------- SIDE HEADER (corporate-11) ---------- */
/* Narrow bar = white, with a blue logo box on top */
.side-header-narrow-bar{background:#fff;border-right:1px solid #e6e9ef;}
.side-header-narrow-bar-logo{background:var(--brand)!important;}
.side-header-narrow-bar-content-vertical{letter-spacing:2px;font-size:.95rem;font-weight:600;color:var(--brand)!important;text-transform:none!important;}
.side-header-narrow-bar .hamburguer-btn .hamburguer span,
.side-header-narrow-bar .hamburguer-btn .close span,
#header .hamburguer-btn .hamburguer span,#header .hamburguer-btn .close span{background:#0c1a30!important;}
/* Expanded panel = white */
#header.side-header .header-body{background:#fff;box-shadow:6px 0 30px rgba(0,0,0,.10);}
.header-logo-img{height:auto;width:auto;max-width:210px;}
#mainNav{width:100%;}
#mainNav li{text-align:center;}
#mainNav .dropdown-item{color:#5b6b85;font-weight:600;padding:.6rem 1rem;border-radius:6px;background:transparent;font-size:1.05rem;text-transform:none!important;}
#mainNav .dropdown-item:hover,#mainNav .dropdown-item:focus{color:var(--brand);background:rgba(2,59,134,.06);}
#mainNav .dropdown-item.active{color:var(--brand);font-weight:700;background:transparent;}

/* ---------- FOOTER (brand blue) ---------- */
#footer{background:var(--brand)!important;margin-top:0!important;border-top:0!important;}
#footer .footer-copyright{background:var(--brand-dark)!important;}
/* Footer text is white (client request) */
#footer,#footer p,#footer a,#footer h2,#footer span,#footer li,#footer .footer-copyright p{color:#fff!important;}
#footer a:hover{color:#fff!important;text-decoration:underline;}
#footer .opacity-5,#footer .opacity-7,#footer .opacity-8{opacity:.95!important;}

/* Shared image overlay (page heroes) */
.services-fade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,59,134,.72),rgba(2,42,96,.86));z-index:0;}
.services-fade-strong{background:linear-gradient(180deg,rgba(2,42,96,.5),rgba(2,42,96,.8));}

/* ---------- HERO (autoplay bg video + red play button) ---------- */
.hero-section{position:relative;height:92vh;min-height:520px;overflow:hidden;background:#02152f;}
.hero-video-el{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.hero-tint{position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,42,96,.45),rgba(2,21,47,.55));z-index:1;}
.hero-play-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;width:96px;height:96px;border-radius:50%;border:0;background:#ff0000;color:#fff;font-size:2rem;cursor:pointer;transition:.25s;box-shadow:0 10px 40px rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;padding-left:6px;}
.hero-play-btn:hover{transform:translate(-50%,-50%) scale(1.08);background:#e60000;}

/* Hero text overlay (Montserrat light / bold / light, per the brief) */
.hero-content{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:90px 1.2rem 0;color:#fff;}
.hero-title{margin:0;line-height:1.08;color:#fff;text-shadow:0 3px 22px rgba(0,0,0,.45);}
.hero-line{display:block;}
.hero-line--light{font-weight:300;font-size:clamp(1.4rem,3.4vw,2.7rem);letter-spacing:2px;}
.hero-line--bold{font-weight:800;font-size:clamp(2rem,5.4vw,4rem);letter-spacing:1.5px;}
.hero-since{font-weight:300;letter-spacing:5px;margin:1.1rem 0 0;font-size:clamp(.95rem,1.4vw,1.25rem);color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.45);}
/* play button sits below the text inside the hero (not absolutely centered) */
.hero-content .hero-play-btn{position:static;transform:none;margin:2.2rem auto 0;width:78px;height:78px;font-size:1.6rem;}
.hero-content .hero-play-btn:hover{transform:scale(1.08);background:#e60000;}
/* staggered entrance once the loader has faded */
.hero-content .hero-line,.hero-content .hero-since,.hero-content .hero-play-btn{opacity:0;transform:translateY(28px);animation:heroRise .85s cubic-bezier(.2,.6,.2,1) forwards;}
.hero-content .hero-line--light{animation-delay:.85s;}
.hero-content .hero-line--bold{animation-delay:1s;}
.hero-content .hero-since{animation-delay:1.18s;}
.hero-content .hero-play-btn{animation-delay:1.35s;}
@keyframes heroRise{to{opacity:1;transform:none;}}
@media(prefers-reduced-motion:reduce){.hero-content .hero-line,.hero-content .hero-since,.hero-content .hero-play-btn{opacity:1;transform:none;animation:none;}}

/* Video modal */
.video-modal{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;padding:3vw;}
.video-modal .vm-inner{position:relative;width:100%;max-width:1000px;aspect-ratio:16/9;}
.video-modal iframe,.video-modal video{width:100%;height:100%;border:0;background:#000;}
.video-modal .vm-close{position:absolute;top:-44px;right:0;background:none;border:0;color:#fff;font-size:2rem;cursor:pointer;}

/* ---------- SECTORS ---------- */
.sector-tile{position:relative;display:block;border-radius:8px;overflow:hidden;}
.sector-tile img{width:100%;height:340px;object-fit:cover;display:block;transition:transform .5s;}
.sector-tile:hover img{transform:scale(1.08);}
.sector-tile .sector-name{position:absolute;left:0;top:0;z-index:2;padding:1.1rem 1.2rem;color:#fff;font-weight:700;text-transform:uppercase;letter-spacing:.5px;font-size:1.05rem;text-shadow:0 2px 10px rgba(0,0,0,.5);}
.sector-tile::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,42,96,.55),transparent 45%);z-index:1;}
.sectors-carousel .owl-nav button{color:var(--brand)!important;}

/* ---------- SERVICES (split) ---------- */
.sec-services{position:relative;}
.services-aside{position:relative;min-height:420px;background-size:cover;background-position:center;}
.services-aside-tint{position:absolute;inset:0;background:linear-gradient(135deg,rgba(2,59,134,.82),rgba(2,42,96,.9));}
.services-aside-title{position:absolute;left:2.5rem;bottom:2.2rem;z-index:2;font-size:2.4rem;letter-spacing:1px;}
.services-body{background:#fff;}
.services-body-inner{padding:3.5rem 3rem;max-width:760px;}
.service-icon{width:56px;height:56px;object-fit:contain;flex:0 0 56px;}
@media(min-width:992px){.services-aside-title{writing-mode:initial;}}

/* ---------- REALISATIONS (image + text below) ---------- */
.realisation-card{display:block;}
.realisation-img{display:block;border-radius:8px;overflow:hidden;}
.realisation-card img{width:100%;height:300px;object-fit:cover;display:block;transition:transform .5s;}
.realisation-card:hover img{transform:scale(1.06);}
.realisation-card h3{transition:.2s;}
.realisation-card:hover h3{color:var(--brand-dark)!important;}

/* ---------- PROJECTS grid (name overlaid) ---------- */
.project-card{position:relative;display:block;border-radius:8px;overflow:hidden;}
.project-card img{width:100%;height:300px;object-fit:cover;display:block;transition:transform .5s;}
.project-card:hover img{transform:scale(1.08);}
.project-info{position:absolute;left:0;right:0;bottom:0;padding:1.3rem;background:linear-gradient(0deg,rgba(2,42,96,.95),transparent);}

/* Project filter (text tabs) */
.project-filter{flex-wrap:wrap;gap:.3rem 1.4rem;border-bottom:1px solid #e2e6ec;padding-bottom:0;}
.project-filter .nav-item{position:relative;}
.project-filter .nav-link{color:#5b6b85;font-weight:600;padding:.6rem .2rem;border:0;background:none;}
.project-filter .nav-link:hover{color:var(--brand);}
.project-filter .nav-item.active .nav-link,.project-filter .nav-link.active{color:var(--brand);}
.project-filter .nav-item.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--brand);}

/* Project detail */
.project-meta-table th{font-weight:500;}

/* ---------- VALUES (blue section) ---------- */
.sec-blue.values-blue{position:relative;overflow:hidden;}
.sec-blue.values-blue::before{content:"";position:absolute;inset:0;background:url('/static/img/backgrounds/blueprint.webp') center/cover no-repeat;opacity:.07;}
.sec-blue.values-blue>.container{position:relative;z-index:1;}
.value-card{text-align:center;padding:1rem .6rem;}
.value-card .value-title{display:inline-block;text-transform:uppercase;letter-spacing:1px;padding-bottom:.5rem;margin-bottom:1rem;border-bottom:2px solid rgba(255,255,255,.45);}

/* ---------- IMAGE COLLAGES (about) ---------- */
.collage{position:relative;height:440px;}
.collage img{position:absolute;object-fit:cover;border-radius:8px;box-shadow:0 12px 34px rgba(0,0,0,.18);}
/* 3-photo scattered/random montage (varied sizes, positions & slight tilt) */
.collage-nm3{height:480px;}
.collage-nm3 img{box-shadow:0 14px 32px rgba(2,42,96,.22);transform-origin:center;}
.collage-nm3 .c1{top:2%;left:0;width:50%;height:47%;transform:rotate(-4deg);z-index:1;}
.collage-nm3 .c2{top:0;right:2%;width:45%;height:44%;transform:rotate(4deg);z-index:2;}
.collage-nm3 .c3{bottom:0;left:24%;width:54%;height:50%;transform:rotate(-2deg);z-index:3;}
.collage-nm{height:480px;}
.collage-nm .c1{top:0;left:0;width:74%;height:66%;}
.collage-nm .c2{bottom:0;right:0;width:52%;height:56%;}
.mission-single{width:100%;border-radius:10px;box-shadow:0 14px 34px rgba(2,42,96,.18);}
@media(max-width:991px){
	.collage{height:auto;}
	.collage img{position:static!important;width:100%!important;height:auto!important;margin-bottom:12px;border:0!important;transform:none!important;}
}

/* ---------- INSTITUTIONAL VIDEO BAND ---------- */
.video-band{position:relative;min-height:360px;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;}
.video-band .hero-play-btn{position:relative;left:auto;top:auto;transform:none;}
.video-band .hero-play-btn:hover{transform:scale(1.08);}

/* ---------- CLIENTS multi-row column ---------- */
.client-col{display:flex;flex-direction:column;gap:1rem;}

/* ---------- ABOUT verb box ---------- */
.verb-box{display:inline-block;background:var(--brand);color:#fff!important;padding:.1em .55em;border-radius:6px;transition:opacity .25s;min-width:4em;}

/* ---------- CLIENTS (colored logos) ---------- */
.client-logo{display:flex;align-items:center;justify-content:center;height:110px;}
.client-logo img{max-height:88px;max-width:100%;width:auto;object-fit:contain;transition:.3s;}

/* Clients static grid (home "Ensemble vers la réussite") — transparent logos, no bg */
.clients-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem 1.2rem;align-items:center;}
.client-mark{display:flex;align-items:center;justify-content:center;height:84px;}
.client-mark img{max-width:80%;max-height:64px;width:auto;object-fit:contain;transition:.25s;}
.client-mark:hover img{transform:scale(1.06);}
@media(max-width:767px){.clients-grid{grid-template-columns:repeat(3,1fr);gap:1rem;}}
@media(max-width:420px){.clients-grid{grid-template-columns:repeat(2,1fr);}}

/* ---------- E-BOOK ---------- */
.ebook-cover{width:100%;max-width:480px;height:auto;filter:drop-shadow(0 20px 30px rgba(2,42,96,.35));}

/* ---------- PAGE HERO ---------- */
.page-hero{padding:8rem 0 4rem;position:relative;background-size:cover;background-position:center;}
.page-hero-sm{padding:7rem 0 3.5rem;}
.page-hero .container{z-index:1;position:relative;}
.page-breadcrumb{font-size:.85rem;margin-bottom:.6rem;}
.page-breadcrumb-sep{margin:0 .35rem;}

/* ---------- CONTACT (bg + right white panel) ---------- */
.contact-hero{position:relative;min-height:88vh;background-size:cover;background-position:center;display:flex;justify-content:flex-end;align-items:stretch;}
.contact-panel{position:relative;z-index:2;background:#fff;width:100%;max-width:540px;}
.contact-panel-inner{padding:7rem 3rem 3.5rem;}/* top padding clears the fixed bar */
.contact-form .form-control{border-radius:30px;}
.contact-form textarea.form-control{border-radius:18px;}
.contact-hero .hero-video-el{z-index:0;}
.contact-hero .hero-tint{z-index:1;}
.contact-play{left:30%;top:50%;}
@media(max-width:767px){.contact-play{display:none;}}

/* Form feedback */
.form-message.ok{color:#1e9e5a;font-weight:600;}
.form-message.err{color:#e03b3b;font-weight:600;}

@media (max-width:991px){
	.hero-section{height:64vh;min-height:420px;}
	.sector-tile img{height:280px;}
	.services-body-inner{padding:2.5rem 1.5rem;}
	.services-aside{min-height:240px;}
	.services-aside-title{font-size:1.8rem;left:1.5rem;bottom:1.2rem;}
	.contact-panel{max-width:100%;}
	.contact-panel-inner{padding:6rem 1.5rem 2.5rem;}
	.sec{padding:3.5rem 0;}
}