:root{
  --ice:#f0f5f7;--navy:#132a3a;--navy-deep:#0b1d2b;--hero:#081820;
  --teal:#159a8b;--teal-deep:#0d7264;--teal-soft:#dcefec;
  /* 3 teintes de bleu du logo (dégradé gauche -> droite) */
  --b1:#0081fc;--b2:#00abbc;--b3:#00d2b2;
  /* variantes lisibles sur fond clair */
  --b1-ink:#0067cc;--b2-ink:#00808f;--b3-ink:#0d7264;
  --blue:var(--b1);
  --muted:#5e7280;--line:#dde6ea;--line-dark:rgba(255,255,255,.14);
  --serif:"Playfair Display",Georgia,serif;--sans:"Poppins",sans-serif;--ar:"Cairo",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--ice);color:var(--navy);font-family:var(--sans);font-weight:300;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:1250px;margin:0 auto;padding:0 20px}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.l-ar{display:none}
body.ar .l-en{display:none}
body.ar .l-ar{display:inline}
body.ar{font-family:var(--ar);font-weight:400}
body.ar h1,body.ar h2,body.ar h3{font-family:var(--ar);font-weight:700;letter-spacing:0}
.dot{color:var(--teal)}
.rv{opacity:0;transform:translateY(34px);filter:blur(10px);transition:opacity .9s ease,transform .9s ease,filter .9s ease}
.rv.in{opacity:1;transform:none;filter:none}

/* page transition curtain */
.pt{position:fixed;inset:0;z-index:999;background:var(--navy-deep);transform:translateY(0);pointer-events:none}
.pt.out{transition:transform .75s cubic-bezier(.7,0,.2,1);transform:translateY(-101%)}
.pt.in{transition:transform .55s cubic-bezier(.7,0,.2,1);transform:translateY(0)}
.pt.idle{transform:translateY(101%)}

/* nav */
nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(8,24,32,.85);backdrop-filter:blur(14px);border-bottom:none;transition:transform .38s cubic-bezier(.4,0,.2,1)}
nav.hidden{transform:translateY(-100%)}
.nav-in{max-width:1250px;margin:0 auto;padding:9px 20px;display:flex;align-items:center;gap:28px;position:relative}
.logo{display:flex;align-items:center}
.logo img{height:40px;width:auto;display:block}
.nav-links{display:flex;gap:30px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:15.5px;font-weight:400;color:rgba(255,255,255,.85)}
.nav-links a:hover{color:var(--b3)}
.lang{display:inline-flex;border:1px solid rgba(255,255,255,.28);border-radius:100px;overflow:hidden;flex:none;margin-inline-start:auto}
.lang button{background:transparent;border:none;padding:7px 14px;font-family:inherit;font-size:12px;cursor:pointer;color:rgba(255,255,255,.65)}
.lang button.active{background:#fff;color:var(--navy)}
.cta{background:var(--teal);color:#fff;border-radius:0;padding:10px 22px;font-size:13.5px;font-weight:500;flex:none;transition:background .25s}
.cta:hover{background:var(--teal-deep)}
/* hairline under the top bar, same rule as the hero divider,
 inset to the content width */
.nav-in::after{content:"";position:absolute;left:20px;right:20px;bottom:0;height:1px;background:rgba(255,255,255,.18);pointer-events:none}
@media(max-width:900px){.nav-links{display:none}}

/* inner hero : dark, animated gradient + topographic waves, title bottom-left */
.ihero{position:relative;overflow:hidden;background:#081820;color:#fff;min-height:64vh;display:flex;align-items:flex-end;padding:150px 0 64px}
.ihero .bg{display:none}
@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(3%,-2%) scale(1.07)}100%{transform:translate(-3%,2%) scale(1.03)}}
.ihero canvas.mesh{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:1}
.ihero .wrap{position:relative;z-index:2;width:100%;display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.ihero .slabel{color:var(--b3)}
.ihero h1{font-family:var(--sans);font-weight:500;font-size:clamp(46px,6.5vw,84px);line-height:1.02;letter-spacing:-2px;max-width:12ch}
body.ar .ihero h1{font-family:var(--ar);letter-spacing:0}
.ihero .side{font-size:16px;color:rgba(255,255,255,.72);max-width:34ch;padding-bottom:14px}
.slabel{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--teal-deep);font-weight:500;margin-bottom:18px}
.slabel::before{content:"";width:9px;height:9px;background:var(--b2)}
body.ar .slabel{letter-spacing:0}
section{padding:100px 0}
h2.title{font-family:var(--serif);font-weight:600;font-size:clamp(30px,4.2vw,50px);line-height:1.08;letter-spacing:-1px;max-width:24ch}
.lead{font-size:16.5px;color:var(--muted);max-width:62ch;margin-top:18px}

/* services grid (inner) */
.sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:26px}
.scard .ph{position:relative;aspect-ratio:391/380;overflow:hidden;border-radius:2px}
.scard .ph .glass{position:absolute;inset-inline-start:20px;bottom:20px;width:52px;height:52px;border-radius:10px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.38);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:2}
.scard .ph .glass svg{width:24px;height:24px;stroke:#fff}
.scard .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,29,43,0) 45%,rgba(11,29,43,.55))}
.scard h3{font-family:var(--sans);font-weight:500;font-size:22px;letter-spacing:-.2px;margin-top:18px}
body.ar .scard h3{font-family:var(--ar)}
.scard p{font-size:14.5px;color:var(--muted);margin-top:6px;max-width:44ch}
@media(max-width:900px){.sgrid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.sgrid{grid-template-columns:1fr}}

/* case studies grid */
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:34px 26px;margin-top:26px}
.ccard .ph{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:2px}
.ccard .tag{position:absolute;top:18px;inset-inline-start:18px;z-index:2;background:rgba(240,245,247,.85);backdrop-filter:blur(6px);border-radius:100px;padding:7px 16px;font-size:12.5px;color:var(--navy)}
.ccard .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,29,43,0) 55%,rgba(11,29,43,.35))}
.ccard .meta{display:flex;align-items:center;gap:10px;margin-top:18px;font-size:13.5px;color:var(--muted)}
.ccard .meta b{color:var(--teal-deep);font-weight:500}
.ccard .meta i{width:5px;height:5px;border-radius:50%;background:var(--teal);font-style:normal}
.ccard h3{font-family:var(--sans);font-weight:500;font-size:clamp(20px,2vw,26px);letter-spacing:-.3px;margin-top:8px;max-width:26ch}
body.ar .ccard h3{font-family:var(--ar)}
@media(max-width:800px){.cgrid{grid-template-columns:1fr}}
/* la barre de nav fixe ne doit pas recouvrir une fiche ciblee par une ancre */
.ccard[id],.srow[id],.scard[id]{scroll-margin-top:110px}

/* gradient placeholders */
.g1{background:radial-gradient(80% 80% at 30% 25%,var(--b1-ink),#0b1d2b)}
.g2{background:radial-gradient(80% 80% at 65% 30%,var(--b2),#0b1d2b)}
.g3{background:radial-gradient(80% 80% at 40% 70%,var(--b1),#0b1d2b)}
.g4{background:radial-gradient(80% 80% at 70% 70%,var(--b3),#0b1d2b)}
.g5{background:radial-gradient(80% 80% at 25% 65%,var(--b1),#0b1d2b)}
.g6{background:radial-gradient(80% 80% at 60% 45%,var(--b2-ink),#0b1d2b)}
.gph{position:absolute;inset:0}
/* photos de terrain : le degrade de substitution laisse place a la vraie image,
   avec un voile sombre pour garder les surtitres lisibles par-dessus */
.sv1{background:linear-gradient(180deg,rgba(11,29,43,.18) 40%,rgba(11,29,43,.55)),url(Images/field-coaster-train.webp?v=20260831) center/cover no-repeat}
.sv2{background:linear-gradient(180deg,rgba(11,29,43,.18) 40%,rgba(11,29,43,.55)),url(Images/field-europe-worksession.webp?v=20260909) center/cover no-repeat}
.sv3{background:linear-gradient(180deg,rgba(11,29,43,.18) 40%,rgba(11,29,43,.55)),url(Images/field-findings-review.webp?v=20260909) center/cover no-repeat}
.sv4{background:linear-gradient(180deg,rgba(11,29,43,.18) 40%,rgba(11,29,43,.55)),url(Images/field-certification-carousel.webp?v=20260909d) center/cover no-repeat}
.sv5{background:linear-gradient(180deg,rgba(11,29,43,.18) 40%,rgba(11,29,43,.55)),url(Images/field-escalator.webp?v=20260909e) center/cover no-repeat}
.sv6{background:linear-gradient(180deg,rgba(11,29,43,.18) 40%,rgba(11,29,43,.55)),url(Images/field-ndt.webp?v=20260909e) center/cover no-repeat}
.pj1{background:linear-gradient(180deg,rgba(11,29,43,.18) 40%,rgba(11,29,43,.55)),url(Images/field-starflyer-low.webp?v=20260831) center/cover no-repeat}
.pj2{background:linear-gradient(180deg,rgba(11,29,43,.18) 40%,rgba(11,29,43,.55)),url(Images/field-storm-coaster.webp?v=20260909b) center/cover no-repeat}
.pj3{background:linear-gradient(180deg,rgba(11,29,43,.18) 40%,rgba(11,29,43,.55)),url(Images/field-coaster-track.webp?v=20260909b) center/cover no-repeat}
.pj4{background:linear-gradient(180deg,rgba(11,29,43,.18) 40%,rgba(11,29,43,.55)),url(Images/field-hydraulics.webp?v=20260831) center/cover no-repeat}
.pj5{background:linear-gradient(180deg,rgba(11,29,43,.18) 40%,rgba(11,29,43,.55)),url(Images/field-team-softplay.webp?v=20260909e) center/cover no-repeat}
.pj6{background:linear-gradient(180deg,rgba(11,29,43,.18) 40%,rgba(11,29,43,.55)),url(Images/field-fat-measure.webp?v=20260909e) center/cover no-repeat}
.pj7{background:linear-gradient(180deg,rgba(11,29,43,.18) 40%,rgba(11,29,43,.55)),url(Images/field-coaster-track.webp?v=20260909b) center/cover no-repeat}
.gph svg{position:absolute;inset-inline-end:-60px;top:-60px;width:260px;height:260px;opacity:.4}

/* statement (SDRY) : label left, sans paragraph right */
.statement .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
.statement .slabel{grid-column:1}
.statement .wrap > a.btn-mint{grid-column:2/4;justify-self:start}
.statement p.big{grid-column:2/4;font-family:var(--sans);font-weight:400;font-size:clamp(20px,2.2vw,32px);line-height:1.32;letter-spacing:-.8px;max-width:none;text-indent:2.4em}
body.ar .statement p.big{font-family:var(--ar);font-weight:700;letter-spacing:0}
.statement .em{color:var(--b1-ink);font-style:normal}
/* en 1 colonne, ramener AUSSI les elements places en 2/4 sur la colonne 1 :
   sinon la grille recree deux colonnes implicites et le texte reste etrique */
@media(max-width:860px){.statement .wrap{grid-template-columns:1fr;gap:16px}.statement p.big{grid-column:1;text-indent:0}.statement .wrap > a.btn-mint{grid-column:1}}
.statement p.big .w{color:#c3cfd8;transition:color .6s ease}
.statement p.big .w.on{color:var(--navy)}
.statement p.big .em .w{color:#cfe3de}
.statement p.big .em .w.on{color:var(--teal-deep)}

/* value cards */
.vals{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:26px}
.val{background:#fff;border:1px solid var(--line);border-radius:2px;padding:28px;min-height:280px;display:flex;flex-direction:column;cursor:default}
.val .ic{width:46px;height:46px;border-radius:8px;background:var(--teal-soft);border:1px solid transparent;display:flex;align-items:center;justify-content:center}
.val .ic svg{width:22px;height:22px;stroke:var(--teal-deep)}
.val h3{font-family:var(--sans);font-weight:500;font-size:20px;margin-top:auto;padding-top:40px}
body.ar .val h3{font-family:var(--ar)}
.val p{font-size:14px;color:var(--muted);margin-top:8px}
@media(max-width:800px){.vals{grid-template-columns:1fr}}

/* big marquee */
.marquee{background:var(--ice);overflow:hidden;padding:64px 0}
.marquee-track{display:flex;width:max-content;animation:slide 32s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
body.ar .marquee-track{animation-name:slideAr}
@keyframes slideAr{to{transform:translateX(50%)}}
.mq{display:flex;align-items:center;white-space:nowrap;font-weight:500;font-size:clamp(48px,6.5vw,92px);letter-spacing:-2px;color:var(--navy);line-height:1}
body.ar .mq{font-family:var(--ar);letter-spacing:0;font-weight:700}
.mq span{display:flex;align-items:center}
.mq span.l-ar{display:none}
body.ar .mq span.l-en{display:none}
body.ar .mq span.l-ar{display:flex}
.mq span::after{content:"•";margin:0 40px;color:var(--b2);font-size:.34em}

/* team */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:26px}
.tm .ph{position:relative;aspect-ratio:3/3.4;overflow:hidden;border-radius:2px}
.tm h3{font-family:var(--sans);font-weight:500;font-size:19px;margin-top:14px}
body.ar .tm h3{font-family:var(--ar)}
.tm p{font-size:13.5px;color:var(--muted)}
@media(max-width:800px){.team{grid-template-columns:1fr 1fr}}

/* difference */
.diff{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:26px}
.dcol{border:1px solid var(--line);border-radius:2px;padding:34px;background:#fff}
.dcol.us{background:var(--navy-deep);color:#fff;border-color:var(--navy-deep)}
.dcol h3{font-family:var(--sans);font-weight:500;font-size:21px}
body.ar .dcol h3{font-family:var(--ar)}
.dcol .sub{font-size:14px;color:var(--muted);margin-top:8px}
.dcol.us .sub{color:rgba(255,255,255,.65)}
.dcol ul{list-style:none;margin-top:22px}
.dcol li{font-size:14.5px;padding:9px 0 9px 26px;position:relative;color:#41586a;border-top:1px solid var(--line)}
.dcol.us li{color:rgba(255,255,255,.85);border-top-color:var(--line-dark)}
.dcol li::before{content:"✕";position:absolute;inset-inline-start:0;color:#c66;font-size:12px}
.dcol.us li::before{content:"✓";color:var(--b3)}
@media(max-width:800px){.diff{grid-template-columns:1fr}}

/* stats */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:70px}
.stat{border-top:2px solid var(--teal);padding-top:18px}
.stat b{font-family:var(--serif);font-weight:600;font-size:clamp(34px,4vw,52px);letter-spacing:-1px;display:block}
.stat span{font-size:13px;color:var(--muted)}
@media(max-width:760px){.stats-row{grid-template-columns:repeat(2,1fr)}}

/* faq */
.fq-item{border-bottom:1px solid var(--line)}
.fq-item:first-child{border-top:1px solid var(--line)}
.fq-head{display:flex;justify-content:space-between;align-items:center;gap:22px;cursor:pointer;padding:24px 0}
.fq-head h3{font-family:var(--sans);font-weight:400;font-size:19px;color:var(--navy)}
body.ar .fq-head h3{font-family:var(--ar)}
.fq-btn{width:36px;height:36px;border-radius:50%;background:var(--teal-deep);color:#fff;flex:none;display:flex;align-items:center;justify-content:center;font-size:19px;transition:transform .35s,background .25s;user-select:none}
.fq-item.open .fq-btn{transform:rotate(45deg);background:var(--navy)}
.fq-a{max-height:0;overflow:hidden;transition:max-height .55s cubic-bezier(.4,0,.2,1)}
.fq-a p{padding:0 0 24px;color:var(--muted);font-size:15px;max-width:58ch}
.faq-grid{display:grid;grid-template-columns:1fr 1.35fr;gap:80px;align-items:start}
@media(max-width:860px){.faq-grid{grid-template-columns:1fr;gap:40px}}
.btn-mint{display:inline-flex;align-items:center;align-self:flex-start;background:var(--b3);color:#0c2229;font-weight:500;font-size:15px;border-radius:0;margin-top:26px;padding:6px;transition:transform .25s,background .25s}
.btn-mint:hover{transform:translateY(-2px);background:#25dbb2}
.btn-mint .t{padding:10px 26px}

/* cta band + footer */
.cta-band{background:var(--navy-deep);color:#fff;position:relative;overflow:hidden;text-align:center}
.cta-band .bg{position:absolute;inset:-20%;background:radial-gradient(45% 60% at 30% 30%,rgba(47,134,196,.25),transparent 60%),radial-gradient(50% 60% at 75% 30%,rgba(21,154,139,.3),transparent 62%);filter:blur(6px);animation:drift 18s ease-in-out infinite alternate}
.cta-band .wrap{position:relative;z-index:2}
.cta-band h2{font-family:var(--serif);font-weight:600;font-size:clamp(30px,4.2vw,52px);letter-spacing:-1px}
body.ar .cta-band h2{font-family:var(--ar)}
.cta-band p{color:rgba(255,255,255,.7);max-width:52ch;margin:16px auto 0}
.btn-teal{display:inline-flex;align-items:center;gap:10px;border-radius:0;padding:14px 30px;font-size:14.5px;font-weight:500;background:var(--teal);color:#fff;margin-top:30px;transition:transform .25s,background .25s}
.btn-teal:hover{transform:translateY(-2px);background:var(--teal-deep)}
footer{background:var(--navy-deep);color:rgba(255,255,255,.6);border-top:1px solid var(--line-dark);padding:36px 0;font-size:13px}
.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.foot .logo img{height:38px}

/* nav hover : text rolls up through a "portal" and returns from below */
.roll{display:inline-block;position:relative;overflow:hidden;vertical-align:top}
.roll .r1{display:block;transition:transform .38s cubic-bezier(.4,0,.2,1)}
.roll .r2{position:absolute;left:0;top:0;width:100%;transform:translateY(115%);transition:transform .38s cubic-bezier(.4,0,.2,1)}
a:hover > .roll .r1{transform:translateY(-115%)}
a:hover > .roll .r2{transform:translateY(0)}

/* ============================================================
   INNER PAGES : additional components
   ============================================================ */

/* generic intro block above a grid */
.intro-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:60px;align-items:end}
@media(max-width:860px){.intro-grid{grid-template-columns:1fr;gap:24px}}

/* standards band : chips of EN / ASTM references */
.stdband{background:var(--navy-deep);color:#fff;padding:64px 0}
.stdband .slabel{color:var(--b3)}
.stdband h2{font-family:var(--serif);font-weight:600;font-size:clamp(26px,3.2vw,38px);letter-spacing:-1px;max-width:22ch}
body.ar .stdband h2{font-family:var(--ar);letter-spacing:0}
.chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.chip{border:1px solid rgba(255,255,255,.22);border-radius:100px;padding:9px 20px;font-size:13.5px;color:rgba(255,255,255,.88);transition:border-color .25s,background .25s}
/* "et bien d'autres" : meme gabarit, trait discontinu, pas lu comme une norme reelle */
.chip.more{border-style:dashed;border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.55);font-style:italic}
.chip:hover{border-color:var(--b3);background:rgba(0,210,178,.12)}
.chip b{color:var(--b3);font-weight:500}

/* service detail rows */
.srow{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;padding:52px 0;border-top:1px solid var(--line);align-items:start}
.srow:last-child{border-bottom:1px solid var(--line)}
.srow .num{font-family:var(--serif);font-size:15px;color:var(--teal-deep);letter-spacing:.14em}
.srow h3{font-family:var(--serif);font-weight:600;font-size:clamp(24px,2.6vw,34px);letter-spacing:-.8px;line-height:1.12;margin-top:10px;max-width:16ch}
body.ar .srow h3{font-family:var(--ar);letter-spacing:0}
.srow p.d{font-size:15.5px;color:var(--muted);max-width:56ch}
.srow ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 30px;margin-top:24px}
.srow li{font-size:14.5px;color:#41586a;padding:11px 0 11px 24px;border-top:1px solid var(--line);position:relative}
.srow li::before{content:"";position:absolute;inset-inline-start:0;top:19px;width:8px;height:8px;background:var(--teal)}
@media(max-width:860px){.srow{grid-template-columns:1fr;gap:22px;padding:38px 0}.srow ul{grid-template-columns:1fr}}

/* horizontal process : 5 numbered steps */
.pline{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:40px;counter-reset:st}
.pstep{padding:26px 24px 30px;border-inline-start:1px solid var(--line);position:relative}
.pstep:last-child{border-inline-end:1px solid var(--line)}
.pstep::after{content:"";position:absolute;top:-1px;inset-inline-start:0;width:0;height:2px;background:var(--teal);transition:width .8s ease .1s}
.pstep.in::after{width:100%}
.pline{border-top:1px solid var(--line)}
.pstep .n{font-size:12.5px;letter-spacing:.2em;color:var(--teal-deep);font-weight:500}
.pstep h4{font-family:var(--sans);font-weight:500;font-size:18px;margin-top:14px;letter-spacing:-.2px}
body.ar .pstep h4{font-family:var(--ar)}
.pstep p{font-size:13.5px;color:var(--muted);margin-top:8px}
@media(max-width:1000px){.pline{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.pline{grid-template-columns:1fr}.pstep{border-inline-end:1px solid var(--line)}}

/* case detail : featured project with stats */
.feat{background:#fff;border:1px solid var(--line);border-radius:2px;overflow:hidden;margin-top:26px}
.feat .top{display:grid;grid-template-columns:1.05fr .95fr;min-height:340px}
.feat .visual{position:relative;overflow:hidden;min-height:280px}
.feat .body{padding:44px}
.feat .kicker{font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--teal-deep);font-weight:500}
body.ar .feat .kicker{letter-spacing:0}
.feat h3{font-family:var(--serif);font-weight:600;font-size:clamp(23px,2.5vw,32px);letter-spacing:-.8px;line-height:1.14;margin-top:14px;max-width:22ch}
body.ar .feat h3{font-family:var(--ar);letter-spacing:0}
.feat p{font-size:15px;color:var(--muted);margin-top:16px;max-width:54ch}
.feat .fstats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.feat .fstats div{padding:26px 44px;border-inline-start:1px solid var(--line)}
.feat .fstats div:first-child{border-inline-start:none}
.feat .fstats b{font-family:var(--serif);font-weight:600;font-size:clamp(26px,3vw,40px);letter-spacing:-1px;display:block;line-height:1}
.feat .fstats > div > span{font-size:13px;color:var(--muted);display:block;margin-top:6px}
@media(max-width:900px){.feat .top{grid-template-columns:1fr}.feat .body{padding:32px}.feat .fstats{grid-template-columns:1fr}.feat .fstats div{padding:22px 32px;border-inline-start:none;border-top:1px solid var(--line)}.feat .fstats div:first-child{border-top:none}}

/* client portfolio columns */
/* auto-fit : s'adapte au nombre de fiches (4 aujourd'hui) sans laisser d'orpheline */
.pf{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:26px;margin-top:26px}
.pfc{background:#fff;border:1px solid var(--line);border-radius:2px;padding:30px;cursor:default}
.pfc h3{font-family:var(--sans);font-weight:500;font-size:19px;letter-spacing:-.2px}
body.ar .pfc h3{font-family:var(--ar)}
.pfc .op{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-deep);font-weight:500;margin-bottom:12px}
body.ar .pfc .op{letter-spacing:0}
.pfc ul{list-style:none;margin-top:18px}
.pfc li{font-size:14.5px;color:#41586a;padding:10px 0;border-top:1px solid var(--line)}
@media(max-width:860px){.pf{grid-template-columns:1fr}}

/* logo strip */
.lstrip{overflow:hidden;padding:44px 0;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lstrip-track{display:flex;width:max-content;align-items:center;animation:slide 46s linear infinite}
.lstrip:hover .lstrip-track{animation-play-state:paused}
.lrow{display:flex;align-items:center;gap:44px;padding-inline-end:44px}
.lrow img{height:46px;width:112px;object-fit:contain;opacity:.5;filter:grayscale(1);transition:opacity .3s,filter .3s}
.lrow img:hover{opacity:1;filter:none}
/* Leos et Wafi sont des traces fins dores : sous grayscale(1)+opacity:.5 ils
   tombent a 79-81% de luminance (les autres logos sont a 50-60%) et deviennent
   illisibles sur ce fond blanc. On les rattrape au meme niveau. */
.lrow img[src*="leos"],.lrow img[src*="wafi"]{filter:grayscale(1) brightness(.6);opacity:.8}

/* insights : featured post + grid */
.post-feat{display:grid;grid-template-columns:1.1fr .9fr;gap:0;background:#fff;border:1px solid var(--line);border-radius:2px;overflow:hidden;margin-top:26px}
.post-feat .visual{position:relative;min-height:320px;overflow:hidden}
.post-feat .body{padding:44px;display:flex;flex-direction:column;justify-content:center}
.post-feat h3{font-family:var(--serif);font-weight:600;font-size:clamp(24px,2.7vw,36px);letter-spacing:-.8px;line-height:1.14;margin-top:14px;max-width:20ch}
body.ar .post-feat h3{font-family:var(--ar);letter-spacing:0}
.post-feat p{font-size:15px;color:var(--muted);margin-top:16px;max-width:52ch}
@media(max-width:900px){.post-feat{grid-template-columns:1fr}.post-feat .body{padding:32px}}
.pmeta{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.pmeta b{color:var(--teal-deep);font-weight:500}
.pmeta i{width:5px;height:5px;border-radius:50%;background:var(--teal);font-style:normal;flex:none}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:26px}
.pcard{background:#fff;border:1px solid var(--line);border-radius:2px;overflow:hidden;display:flex;flex-direction:column;transition:transform .3s ease,box-shadow .3s ease}
.pcard:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(11,29,43,.09)}
.pcard .ph{position:relative;aspect-ratio:16/9;overflow:hidden}
.pcard .body{padding:24px 26px 28px}
.pcard h3{font-family:var(--sans);font-weight:500;font-size:19px;letter-spacing:-.2px;margin-top:10px;line-height:1.32}
body.ar .pcard h3{font-family:var(--ar)}
.pcard p{font-size:14px;color:var(--muted);margin-top:8px}
@media(max-width:900px){.pgrid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.pgrid{grid-template-columns:1fr}}

/* contact : form + info rail */
.cgrid2{display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:start}
@media(max-width:940px){.cgrid2{grid-template-columns:1fr;gap:48px}}
.form{background:#fff;border:1px solid var(--line);border-radius:2px;padding:40px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:600px){.frow{grid-template-columns:1fr}.form{padding:28px}}
.fld{display:flex;flex-direction:column;margin-top:22px}
.fld:first-child,.frow .fld{margin-top:0}
.frow{margin-top:22px}
.form .frow:first-of-type{margin-top:0}
.fld label{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:9px}
body.ar .fld label{letter-spacing:0}
.fld input,.fld select,.fld textarea{font-family:inherit;font-size:15px;font-weight:300;color:var(--navy);background:transparent;border:none;border-bottom:1px solid var(--line);padding:10px 0;transition:border-color .25s}
.fld textarea{resize:vertical;min-height:96px;line-height:1.6}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-bottom-color:var(--teal)}
.fld input::placeholder,.fld textarea::placeholder{color:#a8b8c2}
.fld select{cursor:pointer}
.form .btn-mint{margin-top:32px;border:none;cursor:pointer;font-family:inherit}
.fnote{font-size:12.5px;color:var(--muted);margin-top:16px}
.rail .r-item{display:flex;flex-direction:column;padding:22px 0;border-top:1px solid var(--line)}
.rail .r-item:last-child{border-bottom:1px solid var(--line)}
.rail .rlab{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:500}
body.ar .rail .rlab{letter-spacing:0}
.rail .rval{font-size:17px;color:var(--navy);margin-top:6px;transition:color .25s}
a.r-item:hover .rval{color:var(--teal-deep)}
.rail .hours{background:var(--navy-deep);color:#fff;border-radius:2px;padding:28px;margin-top:30px}
.rail .hours h4{font-family:var(--sans);font-weight:500;font-size:17px}
body.ar .rail .hours h4{font-family:var(--ar)}
.rail .hours p{font-size:14px;color:rgba(255,255,255,.7);margin-top:8px}

/* coverage cards */
.cov{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:26px}
.covc{background:#fff;border:1px solid var(--line);border-radius:2px;padding:30px;display:flex;flex-direction:column;cursor:default}
.covc .ic{width:44px;height:44px;border-radius:8px;background:var(--teal-soft);border:1px solid transparent;display:flex;align-items:center;justify-content:center}
.covc .ic svg{width:21px;height:21px;stroke:var(--teal-deep)}
.covc h3{font-family:var(--sans);font-weight:500;font-size:19px;margin-top:26px}
body.ar .covc h3{font-family:var(--ar)}
.covc p{font-size:14px;color:var(--muted);margin-top:8px}
@media(max-width:860px){.cov{grid-template-columns:1fr}}

/* rich footer */
footer.rich{padding:70px 0 0}
.fgrid{display:grid;grid-template-columns:1.3fr .7fr .7fr 1fr;gap:50px}
@media(max-width:900px){.fgrid{grid-template-columns:1fr 1fr;gap:38px}}
@media(max-width:560px){.fgrid{grid-template-columns:1fr}}
.fgrid .logo img{height:55px}
.fbrand p{font-size:14px;color:rgba(255,255,255,.6);margin-top:18px;max-width:34ch;line-height:1.7}
.fcol h4{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.45);font-weight:500;margin-bottom:16px}
body.ar .fcol h4{letter-spacing:0}
.fcol > a,.fcol > span{display:block;font-size:14.5px;color:rgba(255,255,255,.75);padding:6px 0;transition:color .25s}
.fcol > a:hover{color:var(--b3)}
.fbar{margin-top:56px;border-top:1px solid var(--line-dark);padding:22px 0;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:12.5px;color:rgba(255,255,255,.45)}

/* title reveal : letters drift in from the right, lit left to right, smoke blur */
.sw{display:inline-block}
.sx{display:inline-block;opacity:0;transform:translateX(34px) translateY(7px) scale(1.12);filter:blur(12px);transition:opacity .8s cubic-bezier(.2,.75,.25,1),transform .8s cubic-bezier(.2,.75,.25,1),filter .8s ease}
body.ar .sx{transform:translateX(-34px) translateY(7px) scale(1.12)}
.lit .sx{opacity:1;transform:none;filter:none}
@media(prefers-reduced-motion:reduce){.sx{opacity:1;transform:none;filter:none;transition:none}}

/* team cards : real portraits, clickable */
.tm{cursor:pointer}
.tm .ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.tm:hover .ph img{transform:scale(1.05)}
.tm .ph{position:relative}
.tm .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,29,43,0) 55%,rgba(11,29,43,.45));opacity:0;transition:opacity .4s}
.tm:hover .ph::after{opacity:1}
.tm-more{position:absolute;inset-inline-end:14px;bottom:14px;z-index:2;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);backdrop-filter:blur(8px);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
.tm:hover .tm-more,.tm:focus-visible .tm-more{opacity:1;transform:none}
.tm:focus-visible{outline:2px solid var(--teal);outline-offset:4px}

/* profile panel */
.pmodal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px;visibility:hidden}
.pmodal.open{visibility:visible}
.pm-back{position:absolute;inset:0;background:rgba(6,18,26,.72);backdrop-filter:blur(6px);opacity:0;transition:opacity .4s}
.pmodal.open .pm-back{opacity:1}
.pm-box{position:relative;z-index:2;display:grid;grid-template-columns:.85fr 1.15fr;max-width:900px;width:100%;max-height:86vh;background:#fff;border-radius:2px;overflow:hidden;opacity:0;transform:translateY(26px) scale(.98);transition:opacity .45s cubic-bezier(.2,.7,.2,1),transform .45s cubic-bezier(.2,.7,.2,1)}
.pmodal.open .pm-box{opacity:1;transform:none}
.pm-ph{position:relative;min-height:340px;background:var(--navy-deep);overflow:hidden}
.pm-ph img{width:100%;height:100%;object-fit:cover;display:block}
.pm-body{padding:46px 44px;overflow-y:auto}
.pm-body h3{font-family:var(--serif);font-weight:600;font-size:clamp(24px,2.6vw,32px);letter-spacing:-.8px;line-height:1.12}
body.ar .pm-body h3{font-family:var(--ar);letter-spacing:0}
.pm-body p{font-size:15.5px;color:var(--muted);margin-top:16px;max-width:46ch}
.pm-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.pm-tags span{border:1px solid var(--line);border-radius:100px;padding:7px 16px;font-size:12.5px;color:var(--teal-deep)}
.pm-li{display:inline-flex;align-items:center;gap:9px;margin-top:30px;background:var(--navy-deep);color:#fff;border-radius:0;padding:11px 22px;font-size:14px;transition:background .25s,transform .25s}
.pm-li:hover{background:var(--teal-deep);transform:translateY(-2px)}
.pm-li svg{width:17px;height:17px}
.pm-li[hidden]{display:none}
.pm-x{position:absolute;top:14px;inset-inline-end:14px;z-index:3;width:40px;height:40px;border-radius:50%;border:none;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);color:var(--navy);font-size:24px;line-height:1;cursor:pointer;transition:background .25s,transform .25s}
.pm-x:hover{background:#fff;transform:rotate(90deg)}
@media(max-width:820px){
  .pm-box{grid-template-columns:1fr;max-height:88vh}
  .pm-ph{min-height:0;aspect-ratio:3/2}
  .pm-body{padding:32px 26px 38px}
}

/* value and coverage cards : the whole block flips to the deep navy on hover,
   the same contrast pair already used by the comparison column */
.val,.covc,
.val .ic,.covc .ic,.val .ic svg,.covc .ic svg,
.val h3,.covc h3,.val p,.covc p{
  transition:background .45s cubic-bezier(.2,.7,.2,1),border-color .45s cubic-bezier(.2,.7,.2,1),
             color .45s cubic-bezier(.2,.7,.2,1),stroke .45s cubic-bezier(.2,.7,.2,1),
             transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s cubic-bezier(.2,.7,.2,1)}
.val:hover,.covc:hover{background:var(--navy-deep);border-color:var(--navy-deep);transform:translateY(-4px);box-shadow:0 18px 44px rgba(11,29,43,.16)}
.val:hover .ic,.covc:hover .ic{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.34)}
.val:hover .ic svg,.covc:hover .ic svg{stroke:#fff}
.val:hover h3,.covc:hover h3{color:#fff}
.val:hover p,.covc:hover p{color:rgba(255,255,255,.75)}
@media(prefers-reduced-motion:reduce){.val:hover,.covc:hover{transform:none}}

/* phone row : WhatsApp mark before the number, in the brand teal */
.r-phone .rval{display:flex;align-items:center;gap:11px}
.r-phone .wa{display:inline-flex;color:var(--teal);flex:none;transition:color .25s,transform .25s}
.r-phone .wa svg{width:21px;height:21px;display:block}
.r-phone .wa:hover{color:var(--teal-deep);transform:scale(1.08)}
.r-phone .num{color:var(--navy);transition:color .25s}
.r-phone .num:hover{color:var(--teal-deep)}

/* insight cards now carry real photos and are fully clickable */
.pcard .ph img,.post-feat .visual img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.pcard:hover .ph img,.post-feat .visual:hover img{transform:scale(1.05)}
/* la photo de l'article en vedette a son sujet dans le bas du cadre :
   sans ce decalage, le recadrage 'cover' ne montre que du ciel */
.post-feat .visual img{object-position:center 72%}
.pcard .ph::after,.post-feat .visual::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,29,43,0) 55%,rgba(11,29,43,.3))}
.post-feat .visual{display:block;position:relative;overflow:hidden}
.pcard h3{color:var(--navy);transition:color .3s}
.pcard:hover h3{color:var(--teal-deep)}
.post-feat h3 a:hover{color:var(--teal-deep)}

/* client portfolio cards : same navy flip as the value cards */
.pfc,.pfc .op,.pfc h3,.pfc li{
  transition:background .45s cubic-bezier(.2,.7,.2,1),border-color .45s cubic-bezier(.2,.7,.2,1),
             color .45s cubic-bezier(.2,.7,.2,1),transform .45s cubic-bezier(.2,.7,.2,1),
             box-shadow .45s cubic-bezier(.2,.7,.2,1)}
.pfc:hover{background:var(--navy-deep);border-color:var(--navy-deep);transform:translateY(-4px);box-shadow:0 18px 44px rgba(11,29,43,.16)}
.pfc:hover .op{color:var(--b3)}
.pfc:hover h3{color:#fff}
.pfc:hover li{color:rgba(255,255,255,.78);border-top-color:var(--line-dark)}
@media(prefers-reduced-motion:reduce){.pfc:hover{transform:none}}

/* lettres des titres animees : decalees de 34px avant apparition, elles depassaient
   le bord de l'ecran en mobile. overflow-x:clip ne cree pas de conteneur de defilement. */
@media(max-width:900px){h1,h2.title,.cta-band h2,.stdband h2,.feat h3,.post-feat h3,.srow h3{overflow-x:clip}}