/* ============================================================
   JAOUHAR & PARTNERS — HOME PAGE VISUAL LAYER (v6)
   Editorial split-hero after the A&O Shearman country-page layout.
   Scoped to body.home — loaded ONLY by index.html, after style-v5.css.
   style-v5.css remains the shared stylesheet for all inner pages.

   NOTE ON TOKENS: v5 uses --ink / --text as *text* colours in some rules and
   as *background* colours in others. They are kept DARK here and the handful
   of background usages (header, footer, strip, methode, menus, back-to-top)
   are overridden explicitly. Don't "fix" --ink to a light value.
   ============================================================ */

/* ===== 1. PALETTE & TYPE =================================== */
body.home{
  --f-paper:#FAF9F6;
  --f-paper-2:#F1F0EB;
  --f-white:#FFFFFF;
  --f-ink:#15191A;
  --f-ink-soft:#3A3F3D;
  --f-muted:#6B6E6A;
  --f-blue-deep:#132F4F;   /* serif headline */
  --f-blue:#2E72B8;        /* rules, accents */
  --hairline:rgba(21,25,26,.14);
  --rule:rgba(21,25,26,.085);   /* list dividers — lighter than section edges */
  --hairline-soft:rgba(21,25,26,.08);
  --hdr:76px;
  --gutter:clamp(24px,8.5vw,168px);  /* shared left/right page margin */
  --sp-y:clamp(58px,8.2vh,96px);    /* section half-gap: gap between two sections = 2x */
  --sp-head:clamp(46px,6.2vh,72px); /* heading stack -> the content it introduces */

  --sans:'Inter','Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;

  /* v5 variable overrides */
  --ink:#15191A;
  --ink-2:#1F2422;
  --blue:#132F4F;
  --blue-light:#2E72B8;
  --gold:#2E72B8;
  --gold-light:#2E72B8;
  --cream:#FAF9F6;
  --paper:#FAF9F6;
  --text:#15191A;
  --muted:#6B6E6A;
  --line:rgba(21,25,26,.14);
  --line-dark:rgba(21,25,26,.14);
  --on-dark-muted:#6B6E6A;
  --shadow-lg:0 30px 70px -40px rgba(21,25,26,.28);

  font-family:var(--sans);
  background:var(--f-paper);
  color:var(--f-ink);
}
body.home h1,body.home h2{font-family:var(--serif);font-weight:400;}
body.home h4,body.home h5,body.home .btn,body.home nav.mainnav a{font-family:var(--sans);}
body.home ::selection{background:var(--f-blue-deep);color:#fff;}

/* ===== 2. HEADER — plain text nav, top right ================ */
body.home header{
  position:fixed;top:0;left:0;right:0;
  height:var(--hdr);padding:0 clamp(20px,2.6vw,40px);
  background:transparent;box-shadow:none;
  border-bottom:1px solid transparent;
  justify-content:flex-end;          /* wordmark lives on the hero's edge */
  transition:height .4s var(--ease),background .4s ease,border-color .4s ease;
}
body.home header.scrolled{
  height:64px;
  background:rgba(250,249,246,.92);
  backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border-bottom-color:var(--hairline);
}
body.home header .brand{display:none;}   /* replaced by .edge-brand */
body.home .header-right{gap:clamp(16px,1.8vw,28px);}

body.home nav.mainnav{gap:clamp(16px,1.7vw,28px);}
body.home nav.mainnav a{
  font-size:14.5px;letter-spacing:0;font-weight:400;text-transform:none;
  color:var(--f-muted);padding-bottom:2px;transition:color .25s ease;
}
body.home nav.mainnav a:hover,
body.home nav.mainnav a.active{color:var(--f-ink);}
body.home nav.mainnav a::after{display:none;}   /* no underline rule in the reference */
body.home nav.mainnav a svg.caret{width:10px;height:10px;opacity:.6;}

/* CTA reads as one more nav item, not a button */
body.home header .btn-fill{
  background:transparent;color:var(--f-muted);border:none;box-shadow:none;
  padding:0;font-size:14.5px;letter-spacing:0;font-weight:400;text-transform:none;
}
body.home header .btn-fill:hover{background:transparent;color:var(--f-ink);transform:none;}
body.home header .btn-fill svg{width:12px;height:12px;}

body.home .lang>summary{
  border:none;color:var(--f-muted);padding:4px 2px;
  font-size:14.5px;letter-spacing:0;font-weight:400;
}
body.home .lang>summary:hover{color:var(--f-ink);}
body.home .lang .flag{width:18px;height:12px;}
body.home .lang-menu{
  background:#fff;border:1px solid var(--hairline);border-radius:2px;
  box-shadow:0 22px 55px -28px rgba(21,25,26,.4);
}
body.home .lang-menu a{color:var(--f-ink-soft);border-radius:0;}
body.home .lang-menu a:hover{background:var(--f-paper-2);color:var(--f-ink);}
body.home .lang-menu a[aria-current="true"]{color:var(--f-blue-deep);}

/* mega-menu */
body.home .nav-panel-inner{
  background:#fff;border:1px solid var(--hairline);border-top:2px solid var(--f-blue);
  box-shadow:0 30px 70px -34px rgba(21,25,26,.38);
}
body.home .nav-col-title{color:var(--f-blue-deep);border-bottom-color:var(--hairline);}
body.home nav.mainnav .nav-panel a{color:var(--f-ink-soft);font-size:13.5px;}
body.home nav.mainnav .nav-panel a:hover{background:var(--f-paper-2);color:var(--f-ink);}
body.home nav.mainnav .nav-panel a.nav-panel-all{color:var(--f-blue-deep);}
body.home nav.mainnav .nav-panel a.nav-panel-all:hover{background:transparent;color:var(--f-blue);}

/* mobile nav */
body.home .mobile-nav-panel{background:var(--f-paper);}
body.home .burger span{background:var(--f-ink);}
body.home .mobile-nav-panel nav a{color:var(--f-ink);border-bottom-color:var(--hairline);font-family:var(--serif);}
body.home .m-sub>summary{color:var(--f-ink);font-family:var(--serif);}
body.home .m-sub-title{color:var(--f-blue-deep);}
body.home .mobile-nav-panel .m-sub-panel a{color:var(--f-muted);border-left-color:var(--hairline);font-family:var(--sans);}
body.home .mobile-nav-panel .m-sub-panel a:hover{color:var(--f-ink);border-left-color:var(--f-blue);}
body.home .mobile-nav-panel .m-sub-panel a.m-sub-all{color:var(--f-blue-deep);}
body.home .mobile-nav-panel .btn-fill{
  background:var(--f-blue-deep);color:#fff;border-color:var(--f-blue-deep);
  padding:15px 22px;font-size:13px;
}

/* ===== 3. HERO — split: text left, B&W image panel right ==== */
body.home .hero{
  min-height:100svh;
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(300px,40vw,760px);
  align-items:stretch;
  gap:clamp(28px,4vw,72px);
  padding:var(--hdr) 0 clamp(18px,2.6vh,30px) var(--gutter);
  background:var(--f-paper);
  overflow:visible;
}

/* rotated wordmark on the left edge */
body.home .edge-brand{
  position:absolute;
  left:clamp(24px,2.8vw,52px);
  top:calc(var(--hdr) + 4px);
  z-index:3;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  transform-origin:center;
  font-family:var(--sans);
  font-size:clamp(21px,2.05vw,31px);
  font-weight:600;
  letter-spacing:.055em;
  text-transform:uppercase;
  color:var(--f-ink);
  white-space:nowrap;
  transition:color .3s ease;
}
body.home .edge-brand:hover{color:var(--f-blue-deep);}

/* the image is a panel, not a background wash */
body.home .hero-bg-wrap{
  position:relative;inset:auto;
  grid-column:2;grid-row:1;
  overflow:hidden;
}
body.home .hero-bg-wrap img{
  width:100%;height:100%;object-fit:cover;
  transform:none;animation:none;
  filter:grayscale(1) contrast(1.08) brightness(.97);
}
body.home .hero-bg-wrap::after{display:none;}
html.js body.home .hero-bg-wrap{animation:panelIn 1.1s var(--ease) both;}
@keyframes panelIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

/* left column: label pinned top, headline block anchored bottom */
body.home .hero-text{
  grid-column:1;grid-row:1;
  padding:clamp(10px,2vh,22px) clamp(20px,2.4vw,40px) clamp(30px,6vh,74px) 0;
  max-width:none;gap:0;
  display:flex;flex-direction:column;align-items:flex-start;
}
body.home .hero-text .eyebrow{
  font-size:12px;letter-spacing:.11em;font-weight:700;
  color:var(--f-ink);text-transform:uppercase;
}
body.home .hero-text h1{
  margin-top:auto;                 /* the negative space of the reference */
  font-family:var(--serif);
  font-size:clamp(34px,3.75vw,58px);
  line-height:1.1;letter-spacing:-.005em;font-weight:400;
  color:var(--f-blue-deep);
  max-width:15ch;text-wrap:balance;
}
body.home .hero-text h1 em{color:var(--f-blue-deep);font-style:italic;font-weight:400;}
body.home .hero-rule{
  width:min(100%,560px);height:1px;margin:26px 0 0;
  background:var(--f-blue);
}
body.home .hero-text p{
  margin-top:22px;
  font-family:var(--sans);
  font-size:16.5px;line-height:1.55;font-weight:400;
  color:var(--f-ink);max-width:46ch;
}
body.home .hero-actions{margin-top:30px;gap:26px;}

/* CTAs as understated text links, not boxes */
body.home .hero-actions .btn{
  padding:0;border:none;background:none;box-shadow:none;border-radius:0;
  font-family:var(--sans);font-size:14.5px;letter-spacing:0;font-weight:500;
  text-transform:none;color:var(--f-blue-deep);gap:8px;
  border-bottom:1px solid var(--f-blue);padding-bottom:3px;
}
body.home .hero-actions .btn:hover{
  background:none;color:var(--f-blue);transform:none;box-shadow:none;
  border-bottom-color:var(--f-blue);
}
body.home .hero-actions .btn svg{width:13px;height:13px;}

/* the reference hero carries nothing else */
body.home .hero-badge{display:none;}
body.home .hero-scrollcue{display:none;}

/* ===== 4. VALUES STRIP ===================================== */
body.home .feature-strip{
  background:var(--f-white);
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  padding:var(--sp-y) var(--gutter);
  gap:clamp(28px,4vw,64px);
}
body.home .feature{padding:0;border-left:none;background:none;display:block;}
body.home .feature:hover{background:none;}
body.home .feature .icon{display:none;}
body.home .feature h4{
  font-size:11px;letter-spacing:.13em;font-weight:700;
  color:var(--f-ink);margin-bottom:14px;text-transform:uppercase;
}
body.home .feature p{
  font-size:14.5px;line-height:1.6;font-weight:400;color:var(--f-muted);max-width:270px;
}

/* ===== 5+6. SECTEURS & METHODE — editorial index layout =====
   Both sections share one structure: a sticky heading column on the left and
   a hairline-ruled list on the right. No cards, no connector line.
   HTML is untouched; .secteur-card / .methode-step are restyled into rows. */
body.home .secteurs,
body.home .methode{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.85fr);
  gap:clamp(36px,4.8vw,88px);
  padding:var(--sp-y) var(--gutter);
  align-items:start;
}
body.home .secteurs{background:var(--f-white);border-top:1px solid var(--hairline);}
body.home .methode{background:var(--f-paper);border-top:1px solid var(--hairline);}

body.home .secteurs-head,
body.home .methode-head{
  max-width:none;margin-bottom:0;
  align-self:start;
  position:sticky;top:calc(var(--hdr) + clamp(26px,4.5vh,54px));
}
body.home .secteurs-head .eyebrow,
body.home .methode-head .eyebrow{
  font-size:12px;letter-spacing:.11em;font-weight:700;color:var(--f-ink);text-transform:uppercase;
}
body.home .secteurs-head h2,
body.home .methode-head h2{
  font-family:var(--serif);
  font-size:clamp(26px,2.7vw,38px);font-weight:400;
  letter-spacing:-.005em;line-height:1.16;color:var(--f-blue-deep);margin:22px 0 0;
}
body.home .secteurs-head .rule,
body.home .methode-head .rule{
  width:min(100%,300px);height:1px;margin:26px 0 0;background:var(--f-blue);
}
body.home .secteurs-head p,
body.home .methode-head p{
  font-size:15px;line-height:1.65;font-weight:400;color:var(--f-muted);margin-top:24px;max-width:42ch;
}

/* --- the sector index --- */
body.home .secteur-grid{
  display:flex;flex-direction:column;gap:0;
  background:none;border:none;
}
body.home .secteur-card{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:clamp(14px,1.8vw,26px);
  padding:clamp(18px,1.45vw,25px) 0;
  border:none;                       /* v5 sets a 4-sided border — it stacked into a box */
  border-bottom:1px solid var(--rule);
  background:none;box-shadow:none;border-radius:0;
  transition:background .35s var(--ease);
}
body.home .secteur-card:hover{background:none;transform:none;box-shadow:none;}
body.home .secteur-card:first-child{padding-top:0;}
body.home .secteur-card:last-child{border-bottom:none;}
body.home .secteur-card .icon{
  width:21px;height:21px;margin:0;flex-shrink:0;
  background:none;border:none;border-radius:0;
  color:var(--f-blue-deep);opacity:.45;
  transition:opacity .3s ease;
}
body.home .secteur-card .icon svg{width:21px;height:21px;}
body.home .secteur-card:hover .icon{background:none;border:none;color:var(--f-blue-deep);opacity:1;transform:none;}
body.home .secteur-card h4{
  font-size:clamp(16px,1.4vw,20px);font-weight:400;letter-spacing:-.005em;
  color:var(--f-ink);line-height:1.3;
  transition:transform .35s var(--ease),color .3s ease;
}
body.home .secteur-card:hover h4{transform:translateX(7px);color:var(--f-blue-deep);}
/* label stays in the DOM for screen readers; only the arrow is shown */
body.home .secteur-cta{
  margin:0;padding:0;font-size:0;letter-spacing:0;
  color:rgba(21,25,26,.28);
  transition:color .3s ease,transform .35s var(--ease);
}
body.home .secteur-cta svg{width:17px;height:17px;}
body.home .secteur-card:hover .secteur-cta{color:var(--f-blue);transform:translateX(5px);}
body.home .secteur-card:hover .secteur-cta svg{transform:none;}

/* --- the method index --- */
body.home .methode-steps{
  display:flex;flex-direction:column;gap:0;
}
body.home .methode-steps::before{display:none;}
body.home .methode-step{
  display:grid;
  grid-template-columns:clamp(50px,4.4vw,76px) minmax(0,1fr);
  grid-template-rows:auto auto;
  gap:2px clamp(16px,2.2vw,34px);
  padding:clamp(21px,1.75vw,30px) 0;
  border:none;
  border-bottom:1px solid var(--rule);
}
body.home .methode-step:first-child{padding-top:0;}
body.home .methode-step:last-child{border-bottom:none;}
body.home .methode-step .num{
  grid-column:1;grid-row:1 / span 2;
  width:auto;height:auto;border:none;background:none;border-radius:0;
  display:block;
  font-family:var(--serif);font-size:clamp(21px,1.95vw,29px);font-weight:400;
  color:var(--f-blue);opacity:.42;line-height:1.15;
  transition:opacity .3s ease;
}
body.home .methode-step:hover .num{
  background:none;border:none;color:var(--f-blue);opacity:1;transform:none;
}
body.home .methode-step h4{
  grid-column:2;grid-row:1;
  font-size:clamp(16px,1.4vw,20px);font-weight:400;letter-spacing:-.005em;
  text-transform:none;color:var(--f-ink);margin:0 0 9px;
}
body.home .methode-step p{
  grid-column:2;grid-row:2;
  font-size:14.5px;line-height:1.65;font-weight:400;color:var(--f-muted);max-width:62ch;
}


/* ===== 6b. EXPERTISES — full-width statement list ===========
   Deliberately breaks the two-column pattern used by Secteurs/Methode:
   full-bleed rows, large serif names, and an inverting navy hover.
   Eight featured areas only — all sixteen live in the header mega-menu
   and on expertises.html, linked from the header of this section. */
body.home .xp{
  background:var(--f-paper);
  padding:var(--sp-y) var(--gutter);
}
body.home .xp-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(24px,4vw,64px);flex-wrap:wrap;
  padding-bottom:clamp(30px,3.6vh,48px);
}
body.home .xp-head .eyebrow{
  font-size:12px;letter-spacing:.11em;font-weight:700;color:var(--f-ink);text-transform:uppercase;
}
body.home .xp-head h2{
  font-family:var(--serif);
  font-size:clamp(29px,3.4vw,46px);font-weight:400;
  letter-spacing:-.008em;line-height:1.1;color:var(--f-blue-deep);margin:20px 0 0;
}
body.home .xp-all{
  display:inline-flex;align-items:center;gap:9px;flex-shrink:0;
  font-size:14px;font-weight:500;color:var(--f-blue-deep);
  border-bottom:1px solid var(--f-blue);padding-bottom:4px;
  transition:gap .35s var(--ease),color .3s ease;
}
body.home .xp-all svg{width:14px;height:14px;}
body.home .xp-all:hover{gap:15px;color:var(--f-blue);}

body.home .xp-list{margin:0;padding:0;list-style:none;border-top:1px solid var(--rule);}
body.home .xp-list li{margin:0;}
body.home .xp-list a{
  position:relative;isolation:isolate;
  display:grid;
  grid-template-columns:clamp(44px,3.8vw,68px) minmax(0,1fr) auto auto;
  align-items:center;gap:clamp(12px,1.8vw,30px);
  padding:clamp(18px,1.7vw,27px) 0;
  border-bottom:1px solid var(--rule);
}
/* the navy wash bleeds slightly past the text column so it reads as a band */
body.home .xp-list a::before{
  content:'';position:absolute;z-index:-1;
  left:clamp(-24px,-1.6vw,-12px);right:clamp(-24px,-1.6vw,-12px);top:0;bottom:0;
  background:var(--f-blue-deep);
  opacity:0;transition:opacity .4s var(--ease);
}
body.home .xp-list a:hover::before{opacity:1;}

body.home .xp-num{
  font-family:var(--serif);font-size:clamp(14px,1.05vw,17px);
  color:var(--f-blue);opacity:.55;transition:color .35s ease,opacity .35s ease;
}
body.home .xp-name{
  font-family:var(--serif);
  font-size:clamp(20px,2.15vw,31px);font-weight:400;
  letter-spacing:-.008em;line-height:1.15;color:var(--f-ink);
  transition:color .35s ease,transform .45s var(--ease);
}
body.home .xp-tag{
  font-size:10.5px;letter-spacing:.16em;font-weight:600;text-transform:uppercase;
  color:var(--f-muted);white-space:nowrap;text-align:right;transition:color .35s ease;
}
body.home .xp-arrow{
  display:flex;align-items:center;justify-content:flex-end;width:26px;
  color:rgba(21,25,26,.2);
  transition:color .35s ease,transform .45s var(--ease);
}
body.home .xp-arrow svg{width:19px;height:19px;}

body.home .xp-list a:hover .xp-name{color:var(--f-paper);transform:translateX(8px);}
body.home .xp-list a:hover .xp-num{color:var(--f-paper);opacity:.6;}
body.home .xp-list a:hover .xp-tag{color:rgba(244,249,246,.62);}
body.home .xp-list a:hover .xp-arrow{color:var(--f-paper);transform:translateX(5px);}

@media (max-width:1024px){
  body.home .xp-head{align-items:flex-start;flex-direction:column;}
}
@media (max-width:640px){
  body.home .xp-list a{
    grid-template-columns:clamp(34px,9vw,44px) minmax(0,1fr) auto;
    gap:12px;
  }
  body.home .xp-tag{display:none;}   /* the name carries it on a phone */
  body.home .xp-name{font-size:clamp(18px,5.2vw,23px);}
}

/* --- closing contact band --- */
body.home .cta-band{
  background:var(--f-white);
  border-top:1px solid var(--hairline);
  padding:var(--sp-y) var(--gutter);
}
body.home .cta-inner{max-width:640px;}
body.home .cta-band .eyebrow{
  font-size:12px;letter-spacing:.11em;font-weight:700;color:var(--f-ink);text-transform:uppercase;
}
body.home .cta-band h2{
  font-family:var(--serif);
  font-size:clamp(30px,3.4vw,48px);font-weight:400;
  letter-spacing:-.005em;line-height:1.12;color:var(--f-blue-deep);margin:22px 0 0;
}
body.home .cta-band p{
  font-size:16px;line-height:1.65;color:var(--f-muted);margin-top:24px;max-width:46ch;
}
body.home .cta-link{
  display:inline-flex;align-items:center;gap:10px;margin-top:32px;
  font-size:14.5px;font-weight:500;color:var(--f-blue-deep);
  border-bottom:1px solid var(--f-blue);padding-bottom:4px;
  transition:gap .35s var(--ease),color .3s ease;
}
body.home .cta-link svg{width:14px;height:14px;}
body.home .cta-link:hover{gap:15px;color:var(--f-blue);}

/* ===== 6c. HOVER SYSTEM ====================================
   One gesture reused everywhere: a blue hairline draws in from the left
   while the label steps right. */
body.home .secteur-card,
body.home .methode-step{position:relative;}
body.home .secteur-card::after,
body.home .methode-step::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--f-blue);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease);
}
body.home .secteur-card:hover::after,
body.home .methode-step:hover::after{transform:scaleX(1);}
body.home .methode-step:hover h4{color:var(--f-blue-deep);}
body.home .methode-step h4{transition:color .3s ease;}

/* values strip picks up the same rule language */
body.home .feature{
  position:relative;padding-top:20px;border-top:1px solid var(--rule);
}
body.home .feature::after{
  content:'';position:absolute;left:0;right:0;top:-1px;height:1px;
  background:var(--f-blue);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease);
}
body.home .feature:hover::after{transform:scaleX(1);}
body.home .feature h4{transition:color .3s ease;}
body.home .feature:hover h4{color:var(--f-blue-deep);}

/* footer links */
body.home .fcol a{
  border-bottom:1px solid transparent;padding-bottom:1px;
  transition:color .3s ease,border-color .3s ease;
}
body.home .fcol a:hover{color:var(--f-blue-deep);border-bottom-color:var(--f-blue);}
body.home .footer-bottom .links a{
  border-bottom:1px solid transparent;padding-bottom:1px;
  transition:color .3s ease,border-color .3s ease;
}
body.home .footer-bottom .links a:hover{color:var(--f-blue-deep);border-bottom-color:var(--f-blue);}

@media (max-width:1024px){
  body.home .ix{grid-template-columns:1fr;gap:clamp(30px,4.5vh,46px);}
  body.home .ix-head{position:static;max-width:660px;}
}
@media (max-width:640px){
  body.home .ix-groups{grid-template-columns:1fr;gap:38px;}
}

/* ===== 7. FOOTER =========================================== */
body.home footer{background:var(--f-paper-2);color:var(--f-ink);}
body.home footer::before{height:1px;background:var(--hairline);}
body.home .footer-top{padding:var(--sp-y) var(--gutter);gap:clamp(28px,3.4vw,48px);}
body.home .fcol .icon{
  width:22px;height:22px;background:none;border-radius:0;color:var(--f-blue-deep);opacity:.75;
}
body.home .fcol:hover .icon{background:none;color:var(--f-blue-deep);opacity:1;transform:none;}
body.home .fcol .icon svg{width:22px;height:22px;}
body.home .fcol h5{
  font-size:11px;letter-spacing:.13em;font-weight:700;color:var(--f-ink);
  margin-bottom:12px;text-transform:uppercase;
}
body.home .fcol p,body.home .fcol a{font-size:14.5px;line-height:1.65;font-weight:400;color:var(--f-muted);}
body.home .fcol a:hover{color:var(--f-blue);}
body.home .footer-bottom{
  border-top:1px solid var(--hairline);
  padding:22px var(--gutter);
  font-size:13px;letter-spacing:0;color:var(--f-muted);
}
body.home .footer-bottom .links a:hover{color:var(--f-blue);}

/* ===== 8. BACK TO TOP ====================================== */
body.home .back-to-top{
  width:42px;height:42px;border-radius:0;
  background:#fff;border:1px solid var(--hairline);color:var(--f-ink);
  box-shadow:0 18px 44px -24px rgba(21,25,26,.45);
}
body.home .back-to-top:hover{background:var(--f-blue-deep);border-color:var(--f-blue-deep);color:#fff;}

/* ===== 9. MOTION — restrained ============================== */
html.js body.home .hero-text{animation:none;}
body.home .hero-text>*{animation:homeRise .9s var(--ease) both;}
body.home .hero-text .eyebrow{animation-delay:.10s;}
body.home .hero-text h1{animation-delay:.20s;}
body.home .hero-rule{animation-delay:.30s;}
body.home .hero-text p{animation-delay:.38s;}
body.home .hero-actions{animation-delay:.46s;}
@keyframes homeRise{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}
body.home .edge-brand{animation:homeRise 1s var(--ease) .06s both;}

@media (prefers-reduced-motion:reduce){
  body.home .hero-text>*,body.home .edge-brand,body.home .hero-bg-wrap{
    animation:none;opacity:1;transform:none;
  }
  body.home .edge-brand{transform:rotate(180deg);}
}

/* ===== 10. RESPONSIVE ====================================== */
@media (max-width:1200px){
  body.home .hero{grid-template-columns:minmax(0,1fr) clamp(280px,38vw,520px);}
}

/* tablet — image becomes a band under the text, wordmark stays */
@media (max-width:1080px){
  body.home .hero{
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
    min-height:100svh;
    gap:clamp(28px,4vh,44px);
    padding:calc(var(--hdr) + 20px) clamp(24px,4vw,44px) clamp(28px,4vh,44px) var(--gutter);
  }
  body.home .hero-bg-wrap{grid-column:1;grid-row:2;min-height:min(42vh,340px);}
  body.home .hero-text{grid-column:1;grid-row:1;padding:0;}
  body.home .hero-text h1{margin-top:26px;max-width:20ch;}
  body.home .edge-brand{font-size:clamp(18px,2.6vw,24px);}
  body.home .feature-strip{grid-template-columns:repeat(2,1fr);gap:clamp(30px,5vw,46px);}
  body.home .feature p{max-width:none;}
  body.home .methode-steps{gap:38px;}
}

@media (max-width:1024px){
  body.home .secteurs,body.home .methode{
    grid-template-columns:1fr;gap:clamp(30px,4.5vh,46px);
  }
  body.home .secteurs-head,body.home .methode-head{position:static;max-width:660px;}
}

/* phone — the rotated wordmark has nowhere to live; header logo returns */
@media (max-width:640px){
  body.home{--hdr:66px;--gutter:24px;}
  body.home header{justify-content:space-between;}
  body.home header .brand{display:flex;}
  body.home .brand img{height:30px;width:auto;object-fit:contain;filter:brightness(0);opacity:.9;}
  body.home .edge-brand{display:none;}
  body.home .hero{
    padding:calc(var(--hdr) + 26px) var(--gutter) 30px;
    gap:28px;grid-template-rows:auto auto;
  }
  body.home .hero-text h1{font-size:clamp(30px,7.6vw,38px);margin-top:20px;max-width:none;}
  body.home .hero-text p{font-size:15.5px;margin-top:18px;}
  body.home .hero-rule{margin-top:20px;}
  body.home .hero-actions{margin-top:24px;flex-direction:column;align-items:flex-start;gap:14px;}
  body.home .hero-bg-wrap{min-height:min(38vh,270px);}
  body.home .feature-strip{grid-template-columns:1fr;gap:30px;}
  body.home .feature{border-top:none;}
}

@media (max-width:480px){
  body.home .feature{border-left:none;border-top:none;}
}

@media (max-height:620px) and (max-width:1080px){
  body.home .hero{min-height:0;}
}

/* ===== 11. HERO CONSULTATION CTA ============================
   The hero's two actions are understated text links by default (§3).
   The consultation CTA opts out: it is the page's primary action and
   carries a solid navy fill so it reads first. */
body.home .hero-actions{align-items:center;}
body.home .hero-actions .btn.btn-consult{
  background:var(--f-blue-deep);color:#fff;
  border:1px solid var(--f-blue-deep);
  border-radius:0;padding:15px 26px;
  font-family:var(--sans);font-size:12.5px;letter-spacing:.09em;
  font-weight:600;text-transform:uppercase;
  transition:background .3s ease,border-color .3s ease;
}
body.home .hero-actions .btn.btn-consult:hover{
  background:var(--f-blue);border-color:var(--f-blue);color:#fff;
}
body.home .hero-actions .btn.btn-consult svg{width:13px;height:13px;}
@media (max-width:640px){
  body.home .hero-actions{align-items:flex-start;}
  body.home .hero-actions .btn.btn-consult{width:100%;justify-content:center;}
}

/* ===== 12. HORAIRES — 24h/24, 7j/7 ==========================
   Selectors carry extra weight on purpose: the footer rule
   `body.home .fcol p` (§7) would otherwise win on specificity. */
body.home .dispo-24,
body.home .fcol p.dispo-24{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;letter-spacing:.13em;font-weight:700;text-transform:uppercase;
  color:var(--f-blue);
}
body.home .dispo-24::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:var(--f-blue);flex-shrink:0;
  box-shadow:0 0 0 0 rgba(46,114,184,.55);
  animation:dispoPulse 2.4s var(--ease) infinite;
}
@keyframes dispoPulse{
  0%{box-shadow:0 0 0 0 rgba(46,114,184,.5);}
  70%{box-shadow:0 0 0 7px rgba(46,114,184,0);}
  100%{box-shadow:0 0 0 0 rgba(46,114,184,0);}
}
@media (prefers-reduced-motion:reduce){
  body.home .dispo-24::before{animation:none;}
}

/* ===== 13. LANGUAGE PICKER SPACING ==========================
   v5 pulls the picker in with `margin-left:-12px`, which was tuned for a
   header that had the "Prendre rendez-vous" CTA between the nav and the
   picker. That CTA was removed (2026-09-09), so the negative margin left
   FR sitting tighter to "Contactez-nous" than the nav's own item spacing.
   Give it a clear buffer so it reads as a control, not a nav item. */
body.home .header-right>.lang{margin-left:clamp(4px,1vw,16px);}

/* ===== NUMERALS — one face everywhere ======================
   Client picked the .dispo-24 badge's face (Inter 700, lightly letterspaced)
   and asked for it on every number. The .methode-step / .xp numerals were
   Playfair Display; they keep their size, colour and opacity and only swap
   typeface. tabular-nums so 01-08 sit on a common width. */
body.home .methode-step .num,
body.home .xp-num{
  font-family:var(--sans);
  font-weight:700;
  letter-spacing:.05em;
  font-variant-numeric:tabular-nums;
}
body.home .fcol p,
body.home .fcol a{font-variant-numeric:tabular-nums;}