:root{
    --ink:#15202e;
    --grey:#576070;
    --paper:#ffffff;
    --mist:#f5f7f9;
    --line:#e4e8ec;
    --accent:#2c4a6e;

    --serif:"Source Serif 4", Georgia, serif;
    --sans:"Source Sans 3", system-ui, sans-serif;
    --maxw:1140px;
    --gut:clamp(20px,5vw,56px);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  #mentions:target{display:block !important}
  body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
  a{color:inherit;text-decoration:none}
  img{display:block;max-width:100%}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
  h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.15;letter-spacing:-.005em}
  .eyebrow{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
  p{color:var(--grey)}

  /* header */
  header{border-bottom:1px solid var(--line);background:var(--paper);position:sticky;top:0;z-index:40}
  .head{display:flex;align-items:center;justify-content:space-between;min-height:74px;height:auto;padding:8px 0}
  .logo{display:flex;align-items:center;gap:12px}
  .logo img{height:42px;width:auto}
  .logo .brand{display:flex;flex-direction:column;line-height:1.1}
  .logo .name{font-family:var(--serif);font-size:22px;font-weight:600;letter-spacing:.14em;color:var(--ink)}
  .logo .tagline{font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.04em;color:var(--grey);margin-top:3px}
  .logo .tagline2{font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.04em;color:var(--grey)}
  nav.menu{display:flex;align-items:center;gap:28px}
  nav.menu a{font-size:15px;color:var(--ink)}
  nav.menu a:hover{color:var(--accent)}
  .contact-link{color:var(--accent);font-weight:600}
  .burger{display:none;border:0;background:none;font-size:15px;cursor:pointer;color:var(--ink)}

  /* hero */
  .hero{padding:clamp(52px,7vw,88px) 0 clamp(46px,6vw,68px);border-bottom:1px solid var(--line);overflow:hidden}
  .hero .inner{display:grid;grid-template-columns:1fr 1.5fr;gap:clamp(28px,5vw,64px);align-items:center}
  .hero .eyebrow{margin-bottom:24px}
  .hero h1{font-size:clamp(28px,4vw,45px);max-width:17ch;font-weight:500}
  .hero .sub{margin-top:24px;max-width:50ch;font-size:clamp(16px,1.4vw,18px)}
  .hero .triad{margin-top:26px;font-family:var(--serif);font-style:italic;color:var(--ink);font-size:18px}
  .hero .actions{margin-top:34px;display:flex;gap:16px;flex-wrap:wrap;align-items:center}
  .hero .art{color:#274868}
  .hero .art svg{width:100%;height:auto;display:block}

  /* rooftop divider */
  .rooftops{color:#dde3e9;background:var(--paper);line-height:0}
  .section.alt + .rooftops{background:var(--mist)}
  .rooftops svg{display:block;width:100%;height:auto}
  .btn{display:inline-block;font-size:15px;font-weight:600;padding:13px 24px;border:1px solid var(--ink);background:var(--ink);color:#fff;transition:background .18s}
  .btn:hover{background:#0d1722}
  .link-arrow{font-size:15px;font-weight:600;color:var(--accent)}
  .link-arrow:hover{text-decoration:underline}

  /* sections */
  .section{padding:clamp(56px,7vw,96px) 0}
  .section.alt{background:var(--mist)}
  .lead h2{font-size:clamp(24px,3vw,34px);max-width:24ch}
  .lead .eyebrow{margin-bottom:18px}
  .lead p{margin-top:18px;max-width:60ch}

  /* cabinet */
  .cab{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,72px);align-items:start}
  .cab .body p{margin-bottom:18px}
  .cab .body p:last-child{margin-bottom:0}
  .cab .body h4{font-family:var(--serif);font-size:21px;font-weight:600;color:var(--ink);margin:34px 0 14px;letter-spacing:-.005em}
  .cab .body ul{list-style:none;margin:16px 0 0;padding:0}
  .cab .body li{position:relative;padding-left:24px;margin-bottom:14px}
  .cab .body li:last-child{margin-bottom:0}
  .cab .body li::before{content:"\25B8";position:absolute;left:0;top:0;color:var(--accent);font-weight:700}
  .facts{margin-top:30px;display:flex;gap:40px;flex-wrap:wrap}
  .facts .f .n{font-family:var(--serif);font-size:30px;font-weight:600;color:var(--ink);line-height:1}
  .facts .f .l{font-size:14px;color:var(--grey);margin-top:6px}

  /* expertises */
  .exp{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:46px}
  .exp .cell{background:var(--paper);padding:clamp(28px,3.4vw,40px)}
  .section.alt .exp .cell{background:var(--mist)}
  .exp h3{font-size:23px;font-weight:600}
  .exp .cell>p{margin-top:12px;font-size:15.5px}
  .exp .svc{margin-top:16px;font-size:14.5px;color:var(--ink);line-height:1.7}
  .exp .svc b{color:var(--accent);font-weight:600}

  /* réalisations */
  .deals{margin-top:42px;border-top:1px solid var(--line)}
  .deal{display:grid;grid-template-columns:1.4fr 1fr .7fr;gap:24px;padding:18px 0;border-bottom:1px solid var(--line);align-items:baseline}
  .deal .op{font-family:var(--serif);font-size:18px;color:var(--ink)}
  .deal .se{font-size:14.5px;color:var(--grey)}
  .deal .mt{font-size:14.5px;color:var(--grey);text-align:right}

  .case{margin-top:42px;border:1px solid var(--line);padding:clamp(28px,3.5vw,42px)}
  .case .tag{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
  .case h3{font-size:24px;font-weight:600;margin-top:10px}
  .case .grid{margin-top:24px;display:grid;grid-template-columns:1fr 1fr;gap:22px 40px}
  .case .grid .lab{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin-bottom:5px}
  .case .grid p{font-size:15px}

  /* témoignages */
  .quote{max-width:64ch;margin-top:8px}
  .quote blockquote{font-family:var(--serif);font-size:clamp(20px,2.4vw,27px);font-weight:400;line-height:1.4;color:var(--ink)}
  .quote .who{margin-top:18px;font-size:15px;color:var(--grey)}

  /* secteurs */
  .sect{margin-top:36px;display:flex;flex-wrap:wrap;gap:10px}
  .sect span{border:1px solid var(--line);background:var(--paper);padding:9px 18px;font-size:15px;color:var(--ink)}

  /* insights */
  .arts{margin-top:38px;border-top:1px solid var(--line)}
  .art{display:grid;grid-template-columns:160px 1fr;gap:24px;padding:20px 0;border-bottom:1px solid var(--line);align-items:baseline}
  .art .c{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
  .art .t{font-family:var(--serif);font-size:20px;color:var(--ink)}
  .art:hover .t{color:var(--accent)}

  /* contact */
  .ct{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(32px,6vw,72px);align-items:start}
  .ct h2{font-size:clamp(26px,3.4vw,40px);max-width:18ch}
  .ct p{margin-top:18px;max-width:42ch}
  .ct .btn{margin-top:28px}
  .coord{font-size:15.5px;line-height:1.9}
  .coord .lab{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-top:18px}
  .coord .lab:first-child{margin-top:0}
  .coord a{color:var(--ink)}.coord a:hover{color:var(--accent)}

  /* footer */
  footer{background:var(--ink);color:#aeb7c4;border-top:4px solid var(--accent)}
  .foot-brand{text-align:center;padding:clamp(44px,7vw,72px) 0 clamp(30px,4vw,40px);border-bottom:1px solid rgba(255,255,255,.12)}
  .foot-brand .bb-name{font-family:var(--serif);font-weight:600;letter-spacing:.16em;color:#fff;font-size:clamp(34px,6vw,58px);line-height:1}
  .foot-brand .bb-tag{margin-top:16px;font-size:clamp(12px,1.3vw,14.5px);letter-spacing:.05em;color:#aeb7c4}
  .foot-brand .bb-tag span{color:var(--line);margin:0 10px}
  .foot{display:grid;grid-template-columns:1fr auto;gap:24px;padding:40px 0;align-items:center}
  .foot .fl{display:flex;align-items:center;gap:12px}
  .foot .fl img{height:44px;width:auto;opacity:.92}
  .foot .fl .name{font-family:var(--serif);font-size:18px;letter-spacing:.14em;color:#fff}
  .foot .meta{font-size:13.5px;text-align:right;line-height:1.7}
  .foot .meta a{color:#aeb7c4}

  /* portrait fondateur */
  .founder{margin-top:32px;max-width:180px}
  .founder img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 20%;border:1px solid var(--line);display:block}
  .founder figcaption{margin-top:14px}
  .founder .fn{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--ink)}
  .founder .fr{font-size:14px;color:var(--accent);font-weight:600;letter-spacing:.03em;margin-top:3px}
  .founder .fe{font-size:13px;margin-top:5px}
  .founder .fe a{color:var(--muted,#6b7280);text-decoration:none;border-bottom:1px solid var(--line);transition:color .2s,border-color .2s}
  .founder .fe a:hover{color:var(--accent);border-color:var(--accent)}
  .founder .team-slide{display:none}
  .founder .team-slide.is-active{display:block;animation:teamFade .35s ease}
  @keyframes teamFade{from{opacity:0}to{opacity:1}}
  .team-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}
  .team-arrow{width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--line);color:var(--ink);font-size:16px;line-height:1;cursor:pointer;transition:border-color .2s,color .2s}
  .team-arrow:hover{border-color:var(--accent);color:var(--accent)}
  .team-dots{display:flex;gap:6px}
  .team-dots span{width:7px;height:7px;border-radius:50%;background:var(--line);transition:background .2s}
  .team-dots span.is-active{background:var(--accent)}

  /* à propos — liste d'expertises */
  .caps{margin-top:38px;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
  .caps li{background:var(--paper);padding:20px 24px 20px 46px;font-size:15.5px;color:var(--ink);position:relative}
  .caps li::before{content:"—";position:absolute;left:22px;top:20px;color:var(--accent);font-weight:600}

  /* process — nos solutions */
  .steps{margin-top:34px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
  .steps .st{background:var(--paper);padding:22px 24px}
  .section.alt .steps .st{background:var(--mist)}
  .steps .st .num{font-family:var(--serif);font-size:14px;color:var(--accent);font-weight:600;letter-spacing:.04em}
  .steps .st .tt{font-family:var(--serif);font-size:18px;color:var(--ink);margin-top:5px}
  .steps .st p{font-size:14px;margin-top:6px}

  /* photos */
  .hero .art.photo{display:block;max-width:440px;margin-left:auto}
  .hero .art.photo img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 20%;border:1px solid var(--line);display:block}
  .apropos-grid{display:grid;grid-template-columns:1fr .82fr;gap:clamp(28px,5vw,56px);align-items:stretch}
  .apropos-img{border:1px solid var(--line);line-height:0;overflow:hidden}
  .apropos-img img{width:100%;height:100%;min-height:340px;object-fit:cover;display:block}
  .band{position:relative;height:clamp(260px,42vw,440px);overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%}
  .band::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(12,20,30,.62),rgba(12,20,30,.05) 58%)}
  .band .cap{position:relative;z-index:2;height:100%;display:flex;align-items:flex-end;max-width:var(--maxw);margin:0 auto;padding:clamp(24px,5vw,52px) var(--gut)}
  .band .cap span{font-family:var(--serif);font-style:italic;color:#fff;font-size:clamp(20px,3vw,30px);text-shadow:0 2px 20px rgba(0,0,0,.5);max-width:22ch;line-height:1.32}
  .ctgrid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(32px,6vw,64px);align-items:stretch}
  .ctimg{border:1px solid var(--line);overflow:hidden;min-height:340px}
  .ctimg img{width:100%;height:100%;object-fit:cover;display:block}
  .ctbody h2{font-size:clamp(26px,3.4vw,40px);max-width:18ch}
  .ctbody p{margin-top:18px;max-width:46ch}
  .ctbody .btn{margin-top:28px}
  .ctbody .coord{margin-top:34px}

  @media(max-width:820px){
    nav.menu{display:none}
    .burger{display:block}
    .cab,.exp,.case .grid,.ct,.ctgrid,.foot,.caps,.steps,.apropos-grid{grid-template-columns:1fr}
    .hero .inner{grid-template-columns:1fr;gap:8px}
    .hero .art{max-width:320px;order:-1;margin-bottom:6px}
    .deal{grid-template-columns:1fr;gap:4px}
    .deal .mt{text-align:left}
    .art{grid-template-columns:1fr;gap:4px}
    .foot{grid-template-columns:1fr}
    .foot .meta{text-align:left}
    .logo .tagline,.logo .tagline2{font-size:9px;letter-spacing:.02em}
  }
  @media(max-width:480px){
    .logo .name{font-size:19px}
    .logo .tagline,.logo .tagline2{font-size:8.5px}
  }

  /* mobile nav panel (drop-down) */
  .burger{position:relative;z-index:41}
  .burger .bx{display:block;width:20px;height:2px;background:currentColor;position:relative;transition:background .15s}
  .burger .bx::before,.burger .bx::after{content:"";position:absolute;left:0;width:20px;height:2px;background:currentColor;transition:transform .18s}
  .burger .bx::before{top:-6px}
  .burger .bx::after{top:6px}
  .burger[aria-expanded="true"] .bx{background:transparent}
  .burger[aria-expanded="true"] .bx::before{transform:translateY(6px) rotate(45deg)}
  .burger[aria-expanded="true"] .bx::after{transform:translateY(-6px) rotate(-45deg)}
  .mobile-panel{display:none}
  .nav-backdrop{display:none}
  @media(max-width:820px){
    header{position:sticky}
    .mobile-panel{
      display:block;position:absolute;top:100%;left:0;right:0;background:var(--paper);
      z-index:39;max-height:calc(100vh - 56px);overflow-y:auto;padding:8px var(--gut) 40px;
      transform:translateY(-8px);opacity:0;pointer-events:none;
      box-shadow:0 12px 24px rgba(21,32,46,.12);
      transition:opacity .16s ease,transform .16s ease;
    }
    .mobile-panel.is-open{opacity:1;transform:translateY(0);pointer-events:auto}
    .mobile-panel nav{display:flex;flex-direction:column}
    .mobile-panel nav a{font-family:var(--serif);font-size:22px;padding:16px 0;border-bottom:1px solid var(--line);color:var(--ink)}
    .mobile-panel nav a.contact-link{color:var(--accent)}
    .mobile-panel .lang-switch{display:flex;flex-wrap:wrap;margin:22px 0 0;border:0}
    .mobile-panel .lang-switch a{border:1px solid var(--line);border-radius:3px;margin:0 8px 8px 0;padding:9px 14px;font-size:13px;display:inline-block}
    .nav-backdrop{
      display:block;position:fixed;inset:0;background:rgba(21,32,46,.35);
      z-index:38;opacity:0;pointer-events:none;transition:opacity .16s ease;
    }
    .nav-backdrop.is-open{opacity:1;pointer-events:auto}
    body.nav-open{overflow:hidden}
  }

  /* language switcher */
  .lang-switch{display:inline-flex;margin-left:26px;border:1px solid var(--line);border-radius:2px;overflow:hidden}
  .lang-switch a{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--grey);background:transparent;border:0;padding:6px 9px;cursor:pointer;line-height:1;border-left:1px solid var(--line);display:inline-block}
  .lang-switch a:first-child{border-left:0}
  .lang-switch a:hover{color:var(--ink)}
  .lang-switch a.active{background:var(--accent);color:#fff}
  @media(max-width:820px){.lang-switch{display:none}}

  /* RTL support (Arabic) */
  [dir="rtl"] body{direction:rtl;text-align:right}
  [dir="rtl"] .lang-switch{margin-left:0;margin-right:26px}
  [dir="rtl"] .lang-switch a{border-left:0;border-right:1px solid var(--line)}
  [dir="rtl"] .lang-switch a:first-child{border-right:0}
  [dir="rtl"] .cab .body li{padding-left:0;padding-right:24px}
  [dir="rtl"] .cab .body li::before{left:auto;right:0}
  [dir="rtl"] .caps li{padding:20px 46px 20px 24px}
  [dir="rtl"] .caps li::before{left:auto;right:22px}
  [dir="rtl"] .deal .mt{text-align:left}
  [dir="rtl"] .foot .meta{text-align:left}
  [dir="rtl"] .hero .art.photo{margin-left:0;margin-right:auto}
  @media(max-width:820px){
    [dir="rtl"] .deal .mt{text-align:right}
    [dir="rtl"] .foot .meta{text-align:right}
  }

  /* ======================================================
     MOBILE-ONLY FIXES — everything below is scoped inside
     max-width media queries so desktop rendering (>820px)
     is left completely untouched.
     ====================================================== */

  @media(max-width:820px){
    /* 1) Layout / horizontal scroll */
    html,body{max-width:100%;overflow-x:hidden}
    .wrap{width:100%;box-sizing:border-box}
    img,svg,video,iframe,embed,object{max-width:100%;height:auto}

    /* 2) iPhone notch / Dynamic Island safe areas */
    header{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
    footer{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}

    /* 3) Avoid content jump when mobile browser UI shows/hides */
    .head{min-height:64px;height:auto;padding:10px 0}
    .logo img{height:36px}

    /* 4) Burger button: proper 44x44 touch target */
    .burger{
      display:flex;align-items:center;justify-content:center;
      min-width:44px;min-height:44px;padding:8px 14px;
      -webkit-tap-highlight-color:transparent;
    }

    /* 5) Buttons: guarantee 44px touch target + prevent overlap/overflow on narrow screens */
    .btn{
      min-height:44px;box-sizing:border-box;
      display:inline-flex;align-items:center;justify-content:center;
      text-align:center;width:100%;
    }
    .hero .actions{flex-direction:column;align-items:stretch}
    .hero .actions .link-arrow{text-align:center;margin-top:4px}

    /* Contact section: two buttons sit side by side via inline markup + margin-left,
       which can overflow / collide on narrow viewports. Stack them safely. */
    .ctbody{display:flex;flex-direction:column}
    .ctbody .btn,
    .ctbody .btn + .btn{
      width:100%;margin-left:0 !important;margin-top:12px;
    }
    .ctbody .btn:first-of-type{margin-top:28px}

    /* 6) Team carousel controls: bigger tap targets */
    .team-arrow{width:44px;height:44px}
    .team-dots span{width:10px;height:10px}
    .team-nav{gap:16px}

    /* 7) Typography: avoid ugly line breaks on narrow headings */
    .hero h1,.lead h2,.case h3,.ct h2,.ctbody h2{overflow-wrap:break-word;word-break:break-word}
    .quote blockquote{overflow-wrap:break-word}

    /* 8) Cards / grids: ensure no fixed widths cause overflow */
    .exp .cell,.case,.steps .st,.caps li{max-width:100%}
    .founder{max-width:220px}

    /* 9) Sections: slightly tighter side padding on small phones for readability */
    :root{--gut:20px}

    /* 10) Prevent long email/URL strings from breaking layout */
    .coord,.foot .meta{overflow-wrap:anywhere;word-break:break-word}

    /* 11) Sticky header should not eat too much vertical space in landscape */
    @media(max-height:420px){
      header{position:relative}
    }
  }

  @media(max-width:480px){
    .hero h1{font-size:clamp(24px,7vw,30px)}
    .hero .sub{font-size:15px}
    .lead h2{font-size:clamp(21px,6vw,26px)}
    .btn{font-size:14px;padding:12px 18px}
    .facts{gap:24px}
    .founder{max-width:180px}
    .sect span{padding:8px 14px;font-size:14px}
  }

  @media(max-width:360px){
    :root{--gut:16px}
    .hero h1{font-size:22px}
    .btn{font-size:13.5px}
    .foot-brand .bb-name{font-size:30px}
  }