:root{
      --bg:#fff; --ink:#0d0d0d; --muted:#666;
      --dark:#1E2346; --line:#e9e9e9;
      --maxw:1180px; --ease:cubic-bezier(.2,.8,.2,1);
      --nav-h:64px; /* will be set exactly by JS */
    }
    *,*::before,*::after{box-sizing:border-box}
    html,body{height:100%}
    html{scroll-behavior:smooth}
    body{margin:0; background:var(--bg); color:var(--ink);
      font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial; line-height:1.65; -webkit-font-smoothing:antialiased}

    /* Nav */
    .nav{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.86); backdrop-filter:saturate(160%) blur(8px); border-bottom:1px solid rgba(0,0,0,.06)}
    .nav__inner{max-width:var(--maxw); margin:auto; padding:14px 20px; display:flex; align-items:center; gap:18px}
    .brand{font-family:"Playfair Display", Georgia, serif; font-weight:700; letter-spacing:.2px}
    .spacer{flex:1}
    .nav a{color:var(--ink); text-decoration:none; padding:8px 10px; border-radius:10px}
    .nav a:hover{background:#f4f4f4}

    /* Mobile Nav Toggle */
    .nav-toggle{display:none; background:none; border:none; font-size:24px; cursor:pointer; padding:8px}
    .nav-menu{display:flex; gap:0}
    
    @media (max-width:768px){
      .nav-toggle{display:block}
      .nav-menu{
        position:absolute; top:100%; left:0; right:0;
        background:rgba(255,255,255,.95); backdrop-filter:saturate(160%) blur(8px);
        flex-direction:column; gap:0; padding:20px;
        border-bottom:1px solid rgba(0,0,0,.06);
        display:none
      }
      .nav-menu.active{display:flex}
      .nav-menu a{padding:12px 0; border-radius:0; border-bottom:1px solid #f0f0f0}
      .nav-menu a:last-child{border-bottom:none}
      .nav__inner{position:relative}
    }

    .hero--fixed{
      position:fixed; left:0; right:0;
      top:var(--nav-h);
      z-index:1;
      background:#fff;
      display:flex; flex-direction:column;
      padding:46px 10px 18px;
    }
    .hero__inner{max-width:var(--maxw); margin:auto; width:100%;
      display:grid; grid-template-columns:1fr auto; gap:18px; align-items:start}
    .h1{font-family:"Playfair Display", Georgia, serif; font-size: clamp(38px,6vw,72px); line-height:1.06; margin:0}
    .sub{color:var(--muted); margin:14px 0 0}
    .cta-pill{display:inline-block; background:#1E2346; color:#fff; border-radius:999px; padding:12px 20px; text-decoration:none; font-weight:600}
    .hero__row2{max-width:var(--maxw); width:100%; margin:6px auto 10px}
    .note{display:inline-block; font-size:12px; padding:6px 10px; border:1px solid #dcdcdc; border-radius:999px; color:#333; background:#fff}
    .banner{height:min(56vh,520px); width:100%; background:#efefef url('/assets/images/1.jpg') center/cover no-repeat; border-radius:10px}

    /* Spacer will be measured in JS */
    .hero-spacer{height:0}

    @media (max-width:768px){
      .hero--fixed{padding:30px 20px 15px}
      .hero__inner{grid-template-columns:1fr; gap:20px; text-align:center}
      .hero__row2{text-align:center}
      .note{font-size:11px; padding:5px 8px}
      .banner{height:min(40vh,300px)}
    }

    @media (max-width:480px){
      .hero--fixed{padding:20px 15px 10px}
      .h1{font-size:clamp(28px,8vw,38px)}
      .sub{font-size:14px}
      .cta-pill{padding:10px 16px; font-size:14px}
    }
    
    /* À propos (scrolls OVER the fixed hero) */
    .about{position:relative; z-index:2; background:var(--dark); color:#fff; padding:72px 20px}
    .about__inner{max-width:var(--maxw); margin:auto; display:grid; grid-template-columns:1.05fr 1fr; gap:40px; align-items:center}
    .about h2{font-family:"Playfair Display", Georgia, serif; font-size: clamp(32px,4vw,52px); margin:0 0 16px}
    .about p{color:#e6e6e6}
    .about__img{border-radius:12px; background:#555 url('/assets/images/jem1.png') center/cover no-repeat; aspect-ratio:4/3}
    
    @media (max-width:980px){ .about__inner{grid-template-columns:1fr} }
    @media (max-width:768px){
      .about{padding:50px 20px}
      .about__inner{gap:30px}
    }
    @media (max-width:480px){
      .about{padding:40px 15px}
      .about__inner{gap:25px}
      .about p{font-size:15px; line-height:1.6}
    }

    /* Services list */
    .services{padding:86px 20px; background:#fff; position:relative; z-index:2}
    .services__inner{max-width:var(--maxw); margin:auto}
    .services h2{font-family:"Playfair Display", Georgia, serif; font-size: clamp(32px,4vw,56px); margin:0}
    .services .intro{display:grid; grid-template-columns:.8fr 1fr; gap:50px; margin-top:22px; align-items:start}
    .kicker{color:#333; font-weight:600}
    .item{display:flex; align-items:center; gap:16px; padding:20px 0; border-bottom:1px solid var(--line)}
    .item .icon{width:36px; height:36px; border-radius:50%; border:1px solid #000; display:grid; place-items:center; font-weight:700; font-size:14px; flex-shrink: 0;}
    .item .title{font-weight:600}
    
    @media (max-width:900px){ .services .intro{grid-template-columns:1fr} }
    @media (max-width:768px){
      .services{padding:60px 20px}
      .services .intro{gap:30px}
    }
    @media (max-width:480px){
      .services{padding:50px 15px}
      .item{padding:15px 0; gap:12px}
      .item .icon{width:32px; height:32px; font-size:12px; flex-shrink: 0;}
      .item .title{font-size:15px}
    }
.blog-section {
  padding: 86px 20px;
  background: #fafafa; /* Light gray background for visual separation */
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--line); /* Subtle border for separation */
}

.blog-section__inner {
  max-width: var(--maxw);
  margin: auto;
}

.blog-section h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(32px, 4vw, 56px);
  margin: 0 0 22px;
}

.blog-section .intro {
  display: grid;
  grid-template-columns: .8fr 1fr;
  gap: 50px;
  margin-top: 22px;
  align-items: start;
  margin-bottom: 40px;
}

.blog-section .kicker {
  color: #333;
  font-weight: 600;
}

/* Professional Blog List - Improved mobile responsiveness */
.blog-list {
  margin-top: 32px;
}

.blog-article {
  display: flex;
  gap: 24px;
  padding: 32px 0;
  border-bottom: 1px solid var(--line);
  align-items: flex-start;
  background: #fff; /* White background for articles */
  border-radius: 12px;
  margin-bottom: 20px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04); /* Subtle shadow */
}

.blog-article:first-child {
  padding-top: 24px;
}

.blog-article:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.blog-article__image {
  width: 180px;
  height: 120px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #f5f5f5;
}

.blog-article__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-article__placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--dark), #4a5568);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
}

.blog-article__content {
  flex: 1;
}

.blog-article__category {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 8px;
}

.blog-article__title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 22px;
  line-height: 1.3;
  margin: 0 0 12px;
  font-weight: 600;
}

.blog-article__title a {
  color: var(--ink);
  text-decoration: none;
}

.blog-article__title a:hover {
  color: var(--dark);
}

.blog-article__excerpt {
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 16px;
  font-size: 15px;
}

.blog-article__meta {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 13px;
  color: #999;
}

.blog-more {
  text-align: center;
  margin-top: 50px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}

/* Responsive improvements */
@media (max-width: 900px) {
  .blog-section .intro {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .blog-section {
    padding: 60px 20px;
  }
  
  .blog-article {
    flex-direction: column;
    gap: 16px;
    padding: 20px; /* Reduced padding */
    margin-bottom: 16px; /* Reduced margin */
  }
  
  .blog-article__image {
    width: 100%;
    height: 140px; /* Reduced from 200px */
  }
  
  .blog-section .intro {
    gap: 30px;
    margin-bottom: 30px;
  }
  
  .blog-more {
    margin-top: 40px;
    padding-top: 20px;
  }
}

@media (max-width: 480px) {
  .blog-section {
    padding: 50px 15px;
  }
  
  .blog-article {
    padding: 16px; /* Further reduced padding */
    gap: 12px;
    margin-bottom: 12px;
  }
  
  .blog-article__image {
    height: 100px; /* Much smaller on mobile */
  }
  
  .blog-article__title {
    font-size: 18px; /* Reduced from 19px */
    line-height: 1.25;
    margin-bottom: 8px;
  }
  
  .blog-article__excerpt {
    font-size: 14px;
    margin-bottom: 12px;
    line-height: 1.5;
  }
  
  .blog-article__meta {
    font-size: 12px;
    gap: 15px;
  }
  
  .blog-article__category {
    font-size: 10px;
    margin-bottom: 6px;
  }
  
  .blog-more {
    margin-top: 30px;
    padding-top: 15px;
  }
}

/* Extra small screens */
@media (max-width: 320px) {
  .blog-article {
    padding: 12px;
  }
  
  .blog-article__image {
    height: 80px; /* Very compact on tiny screens */
  }
  
  .blog-article__title {
    font-size: 16px;
  }
  
  .blog-article__excerpt {
    font-size: 13px;
  }
}
    /* Stats + parallax (transform-based, mobile-safe) */
    .stats{padding:60px 20px 0; background:#fff; position:relative; z-index:2}
    .stats__header{max-width:var(--maxw); margin:0 auto 24px}
    .stats__header h2{font-family:"Playfair Display", Georgia, serif; font-size: clamp(32px,4vw,56px); margin:0 0 10px}
    .stats__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; text-align:center; max-width:var(--maxw); margin:0 auto 26px}
    .num{font-family:"Playfair Display", Georgia, serif; font-size: clamp(36px,6vw,72px)}
    .label{color:#333}
    .parallax{position:relative; height:min(56vh,520px); overflow:hidden}
    .parallax__bg{position:absolute; inset:-10%; background:url('/assets/images/3.png') center/cover no-repeat; will-change:transform; transform:translateY(0); filter:grayscale(100%) contrast(1.03)}

    .stats__grid .num {
      font-family: "Playfair Display", Georgia, serif;
      font-size: clamp(36px,6vw,72px);
      margin-bottom:6px;
    }

    .stats__grid .label {
      color:#333;
      font-weight:500;
      margin-top:6px;
    }

    /* NEW: styles for the language list */
    .lang-list {
      list-style:none;
      padding:0;
      margin:0 0 6px 0;
      font-size:18px;
      line-height:1.6;
      font-weight:500;
      text-align:left;
      display:inline-block; /* keeps it compact */
    }
    .lang-list li {
      margin:4px 0;
    }
    .lang-list .fi {
      margin-right:5px;
      vertical-align:middle;
      border-radius:3px;
    }

    @media (max-width:768px){
      .stats{padding:50px 20px 0}
      .stats__grid{gap:20px}
      .parallax{height:min(40vh,300px)}
    }
    @media (max-width:600px){
      .stats__grid{grid-template-columns:1fr; gap:30px}
    }
    @media (max-width:480px){
      .stats{padding:40px 15px 0}
      .lang-list{font-size:16px}
    }

    /* Why (dark) */
    .why{background:var(--dark); color:#fff; padding:86px 20px; position:relative; z-index:2}
    .why__inner{max-width:var(--maxw); margin:auto}
    .why h2{font-family:"Playfair Display", Georgia, serif; font-size:clamp(32px,4vw,56px); margin:0 0 12px}
    .why__list{display:grid; grid-template-columns:1fr 1fr; gap:26px 60px; margin-top:22px}
    .why__item{display:flex; align-items:flex-start; gap:10px}
    .why__item .dash{width:20px; text-align:center; opacity:.9}
    .why__item span{color:#eaeaea}
    
    @media (max-width:900px){ .why__list{grid-template-columns:1fr} }
    @media (max-width:768px){
      .why{padding:60px 20px}
      .why__list{gap:20px 40px}
    }
    @media (max-width:480px){
      .why{padding:50px 15px}
      .why__list{gap:20px}
      .why__item{gap:8px}
      .why__item .dash{width:18px}
    }

    /* Testimonials */
    .testimonials{padding:86px 20px; position:relative; z-index:2}
    .testimonials__inner{max-width:var(--maxw); margin:auto}
    .testimonials h2{font-family:"Playfair Display", Georgia, serif; font-size:clamp(32px,4vw,56px); margin:0 0 10px}
    .row{display:grid; grid-template-columns:260px 1fr; gap:24px; align-items:start; padding:24px 0; border-bottom:1px solid var(--line)}
    .row .who{font-weight:600}
    .row .quote{color:#444}
    
    @media (max-width:800px){ .row{grid-template-columns:1fr} }
    @media (max-width:768px){
      .testimonials{padding:60px 20px}
    }
    @media (max-width:480px){
      .testimonials{padding:50px 15px}
      .row{padding:20px 0}
    }

    /* Contact Section Responsive */
    .contact-section{padding:86px 20px; background:#fff; position:relative; z-index:2}
    .contact-header{max-width:var(--maxw); margin:auto; display:flex; gap:20px; flex-wrap:wrap; align-items:center; justify-content:space-between}
    .contact-title{font-family:'Playfair Display',serif; font-size:clamp(32px,4vw,56px); margin:0 0 12px}
    .contact-text{color:#444; margin:0}
    .contact-buttons{display:flex; gap:10px; flex-wrap:wrap}
    .contact-form{max-width:var(--maxw); margin:22px auto 0; border-top:1px solid var(--line); padding-top:22px}
    .form-grid{display:grid; gap:12px; grid-template-columns: repeat(2,1fr)}
    .form-input{padding:12px 14px; border:1px solid #ddd; border-radius:12px; font:inherit}
    .form-textarea{grid-column:1/-1; min-height:120px; padding:12px 14px; border:1px solid #ddd; border-radius:12px; font:inherit}
    .form-submit{grid-column:1/-1; width:max-content}

    @media (max-width:768px){
      .contact-section{padding:60px 20px}
      .contact-header{flex-direction:column; align-items:flex-start; gap:25px}
      .contact-buttons{width:100%; justify-content:center}
      .form-grid{grid-template-columns:1fr; gap:15px}
    }
    @media (max-width:480px){
      .contact-section{padding:50px 15px}
      .contact-text{font-size:15px}
      .contact-buttons{gap:8px}
      .cta-pill{font-size:14px; padding:10px 16px}
    }

    /* Footer */
    footer{padding:28px 20px; color:#777; border-top:1px solid var(--line); background:#fff; position:relative; z-index:2}
    footer .wrap{max-width:var(--maxw); margin:auto; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap}

    @media (max-width:768px){
      footer{padding:25px 20px; text-align:center}
      footer .wrap{flex-direction:column; gap:10px}
    }
    @media (max-width:480px){
      footer{padding:20px 15px; font-size:14px}
    }

    /* Fade-in */
    [data-reveal]{opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
    .in{opacity:1 !important; transform:none !important}
    @media (prefers-reduced-motion: reduce){ [data-reveal]{transition:none !important} }
  
  
  .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  letter-spacing: .2px;
}

.brand-logo {
  height: 32px;
  width: auto;
}

.brand-text {
  /* Inherits the existing brand styles */
  color: #1E2346;
}

@media (max-width:768px){
  .brand {
    gap: 8px;
  }
  
  .brand-logo {
    height: 28px;
  }
  
  .brand-text {
    font-size: 14px; /* Make text smaller on mobile if needed */
  }
}

@media (max-width:480px){
  .brand-text {
    display: none; /* Hide text on very small screens, show only logo */
  }
}


:root {
  --cookie-card-bg: #ffffff;
  --cookie-card-fg: #1b1f23;
  --cookie-card-border: rgba(27, 31, 35, 0.08);
  --cookie-card-shadow: 0 10px 30px rgba(0,0,0,0.12), 0 2px 10px rgba(0,0,0,0.06);
  --cookie-accent: #0ea5e9;        /* cyan-500 */
  --cookie-accept-bg: #1056a6ff;     /* emerald-500 */
  --cookie-accept-fg: #fbfbfbff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --cookie-card-bg: #111418;
    --cookie-card-fg: #e9eef3;
    --cookie-card-border: rgba(233, 238, 243, 0.08);
    --cookie-card-shadow: 0 10px 30px rgba(0,0,0,0.45), 0 2px 10px rgba(0,0,0,0.25);
    --cookie-accent: #38bdf8;
    --cookie-accept-bg: #34d399;
    --cookie-accept-fg: #071d15;
  }
}

.cookie-card {
  position: fixed;
  right: clamp(12px, 2vw, 24px);
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 9999;
  width: min(420px, 92vw);
  background: var(--cookie-card-bg);
  color: var(--cookie-card-fg);
  border: 1px solid var(--cookie-card-border);
  border-radius: 16px;
  box-shadow: var(--cookie-card-shadow);
  padding: 14px;
  backdrop-filter: saturate(140%) blur(6px);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
  display: none;
}

.cookie-card[aria-hidden="false"] { display: block; }
.cookie-card[hidden] { display: none !important; }

.cookie-card-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
}

.cookie-card-body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
}

.cookie-card-link {
  color: var(--cookie-accent);
  text-decoration: underline;
}

.cookie-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cookie-card-ok {
  appearance: none;
  border: 0;
  border-radius: 9999px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  background: var(--cookie-accept-bg);
  color: var(--cookie-accept-fg);
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 200ms ease;
  box-shadow: 0 4px 14px rgba(16, 100, 185, 0.35);
}
.cookie-card-ok:hover, .cookie-card-ok:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.5);
  outline: none;
}
.cookie-card-ok:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
}

@media (max-width: 520px) {
  .cookie-card-row { grid-template-columns: 1fr; }
  .cookie-card-ok { width: 100%; }
}

.cookie-fab {
  position: fixed;
  right: clamp(12px, 2vw, 24px);
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 9998;
  width: 48px;
  height: 48px;
  display: none;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cookie-card-border);
  border-radius: 9999px;
  background: var(--cookie-card-bg);
  box-shadow: var(--cookie-card-shadow);
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 200ms ease, opacity 160ms ease;
  padding: 0;
}
.cookie-fab img {
  max-width: 24px;
  max-height: 24px;
  pointer-events: none;
}
.cookie-fab:hover, .cookie-fab:focus-visible {
  transform: translateY(-1px);
  outline: none;
}
.cookie-fab:active { transform: translateY(0); }

.cookie-fab[aria-hidden="false"] { display: inline-flex; }
.cookie-fab[hidden] { display: none !important; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cookie-card-ok, .cookie-fab { transition: none; }
}

/* language dropdown */
.nav-lang {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* the trigger button */
.lang-toggle {
  background: none;
  border: none;
  display: flex;
  align-items: center;
  gap: .45rem;
  font: inherit;
  color: inherit;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 10px;
}
.lang-toggle:hover { background: #f4f4f4; }
.flag { width:18px; height:18px; display:inline-block; }
.flag-sm { width:16px; height:16px; display:inline-block; }
.code { font-size:.85rem; letter-spacing:.02em; }
.chev { opacity:.65; transition: transform .15s ease; }
.nav-lang.open .chev { transform: rotate(180deg); }

/* dropdown list */
.lang-menu {
  display: none;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: .5rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  min-width: 12rem;
  z-index: 50;
}
.nav-lang.open .lang-menu { display: flex; }

.lang-option {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem .6rem;
  border-radius: .4rem;
  color: inherit;
  text-decoration: none;
}
.lang-option:hover { background: #f3f4f6; }

/* MOBILE — make it flow naturally in column */
@media (max-width: 768px) {
  .nav-lang {
    justify-content: flex-start;
    width: 100%;
  }
  .lang-menu {
    position: static;
    box-shadow: none;
    border: 0;
    border-top: 1px solid #eee;
    margin-top: 4px;
    background: transparent;
  }
  .lang-option { padding: 10px 0; }
}




/* ===== Page loader (overlay) ===== */
#page-loader{
  position:fixed;
  inset:0;
  background:#ffffff;
  z-index:9999;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  transition:opacity .4s ease, visibility .4s ease;
}
#page-loader.hidden{
  opacity:0;
  visibility:hidden;
}
.loader-logo{
  font-size:1.4rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:1.2rem;
}
.loader-subtitle{
  font-size:.9rem;
  color:#4b5563;
  margin-bottom:1.5rem;
  text-align:center;
  max-width:320px;
}
.loader-spinner{
  width:42px;
  height:42px;
  border-radius:999px;
  border:3px solid #e5e7eb;
  border-top-color:#1056a6;
  animation:loader-spin .9s linear infinite;
}
@keyframes loader-spin{
  to{transform:rotate(360deg);}
}