/* ============================================================
   JANEL S.à r.l.
   Noir chaud · perle · champagne — Bodoni Moda / Instrument Sans
   ============================================================ */

:root{
  --noir:      #14120F;
  --noir-2:    #1D1A16;
  --noir-3:    #2A251F;
  --perle:     #F4F2ED;
  --perle-2:   #EAE6DE;
  --blanc:     #FFFFFF;
  --ivoire:    #EFEBE4;
  --ivoire-2:  #B8B0A4;
  --champagne: #C3A87B;
  --champagne-2:#8C7551;
  --taupe:     #A2988C;
  --encre:     #14120F;
  --gris:      #6B6459;
  --trait:     #DCD6CB;
  --trait-nuit:rgba(239,235,228,.14);

  --display: "Bodoni Moda", "Didot", Georgia, serif;   /* logo / wordmark UNIQUEMENT */
  --head: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --maxw: 1240px;
  --pad:  clamp(1.5rem, 5vw, 4rem);
  --sect: clamp(1.6rem, 2.6vw, 2.5rem);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans);
  font-size:15px;
  line-height:1.5;
  color:var(--encre);
  background:var(--perle);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
p{ color:var(--gris); }

h1,h2,h3{ font-family:var(--head); font-weight:500; line-height:1.12; letter-spacing:-.02em; }

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }

/* ---------- libellé ---------- */
.label{
  font-family:var(--sans);
  font-size:.68rem; font-weight:600;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--champagne-2);
  display:inline-flex; align-items:center; gap:.9rem;
}
.label::before{ content:""; width:24px; height:1px; background:currentColor; flex:none; opacity:.6; }
.nuit .label{ color:var(--champagne); }

/* ---------- boutons ---------- */
.btn{
  display:inline-block; font-family:var(--sans);
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  padding:1.15em 2.6em; border:1px solid var(--encre); color:var(--encre);
  background:transparent; cursor:pointer;
  transition:background .4s ease, color .4s ease, border-color .4s ease;
}
.btn:hover{ background:var(--encre); color:var(--perle); }
.btn-or{ border-color:var(--champagne); color:var(--champagne); }
.btn-or:hover{ background:var(--champagne); border-color:var(--champagne); color:var(--noir); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:60;
  padding-block:1.6rem; border-bottom:1px solid transparent;
  transition:background .4s ease, padding .4s ease, border-color .4s ease;
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.site-header.scrolled{
  background:var(--perle);
  border-bottom-color:var(--trait); padding-block:1rem;
}
/* Le flou n'est appliqué qu'au-delà du breakpoint mobile.
   backdrop-filter fait de l'en-tête un bloc conteneur pour ses descendants
   position:fixed : sous 900px, cela écrase le tiroir .nav (qui vit dans
   l'en-tête) à la hauteur de l'en-tête et rend le burger incliquable. */
@media (min-width:901px){
  .site-header.scrolled{
    background:rgba(244,242,237,.9);
    backdrop-filter:saturate(150%) blur(12px);
    -webkit-backdrop-filter:saturate(150%) blur(12px);
  }
}

.brand{ display:inline-flex; align-items:center; gap:.7rem; }
.brand .bracket{ width:15px; height:15px; flex:none; }
.brand .bracket path{ stroke:var(--champagne); stroke-width:1.8; fill:none; }
.brand .wordmark{
  font-family:var(--display); font-size:1.5rem; font-weight:500;
  letter-spacing:.34em; padding-left:.34em; color:var(--encre);
}
.site-header:not(.scrolled) .brand .wordmark{ color:var(--ivoire); }
.site-header:not(.scrolled) .nav a{ color:var(--ivoire-2); }
.site-header:not(.scrolled) .nav a:hover{ color:var(--ivoire); }
.site-header:not(.scrolled) .nav a::after{ background:var(--champagne); }
.site-header:not(.scrolled) .lang button{ color:var(--ivoire-2); }
.site-header:not(.scrolled) .burger span{ background:var(--ivoire); }
html.lang-fr .site-header:not(.scrolled) .lang [data-set="fr"],
html.lang-en .site-header:not(.scrolled) .lang [data-set="en"]{ color:var(--champagne); }

.nav{ display:flex; align-items:center; gap:2.4rem; }
.nav a{
  font-size:.68rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gris); position:relative; padding-block:.35rem; transition:color .3s ease;
}
.nav a::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--champagne-2); transition:width .35s ease; }
.nav a:hover{ color:var(--encre); }
.nav a:hover::after{ width:100%; }

.lang{ display:inline-flex; align-items:center; gap:.45rem; font-size:.68rem; font-weight:600; letter-spacing:.12em; color:var(--gris); }
.lang button{ background:none; border:none; cursor:pointer; font:inherit; color:var(--gris); padding:.15rem; transition:color .3s ease; }
.lang .sep{ opacity:.4; }
html.lang-fr .lang [data-set="fr"], html.lang-en .lang [data-set="en"]{ color:var(--champagne-2); }

/* z-index > .nav (55) : le burger doit rester cliquable par-dessus le tiroir ouvert */
.burger{ display:none; position:relative; z-index:70; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:.4rem; }
.burger span{ width:24px; height:1.5px; background:var(--encre); transition:transform .35s ease, opacity .25s ease; }
.nav-open .burger span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav-open .burger span:nth-child(2){ opacity:0; }
.nav-open .burger span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* ============================================================
   NUIT — bandes sombres
   ============================================================ */
.nuit{ background:var(--noir); color:var(--ivoire); }
.nuit h1,.nuit h2,.nuit h3{ color:var(--ivoire); }
.nuit p{ color:var(--ivoire-2); }

/* ============================================================
   HERO
   ============================================================ */
.hero{ min-height:auto; display:flex; align-items:center; padding-block:6rem 0.85rem; position:relative; overflow:hidden; }
/* photo Luxembourg (viaduc de Pfaffenthal) en duotone chaud, voilée pour la lisibilité du texte */
.hero.nuit{
  background-color:var(--noir);
  background-image:
    linear-gradient(90deg, rgba(20,18,15,.97) 0%, rgba(20,18,15,.86) 45%, rgba(20,18,15,.70) 100%),
    url("hero.jpg");
  background-size:cover;
  background-position:center 90%;
}
.hero .container{ display:grid; grid-template-columns:1.35fr .65fr; gap:clamp(2rem,4vw,4rem); align-items:start; }

.statement{ position:relative; padding:0; }
.statement .corner{ position:absolute; width:28px; height:28px; stroke:var(--champagne); stroke-width:1.2; fill:none; }
.statement .corner.tl{ top:0; left:0; }
.statement .corner.tr{ top:0; right:0; transform:scaleX(-1); }
.statement .corner.br{ bottom:0; right:0; transform:scale(-1); }
.statement .corner.bl{ bottom:0; left:0; transform:scaleY(-1); }
html.js .statement .corner{ stroke-dasharray:56; stroke-dashoffset:56; animation:trace 1s ease forwards; }
html.js .statement .corner.tr{ animation-delay:.12s; }
html.js .statement .corner.br{ animation-delay:.24s; }
html.js .statement .corner.bl{ animation-delay:.36s; }
@keyframes trace{ to{ stroke-dashoffset:0; } }

.hero h1{
  font-size:clamp(1.55rem, 2.7vw, 2.2rem);
  margin:1rem 0 .9rem;
  max-width:34ch; font-weight:500; line-height:1.12;
}
.hero h1 em{ font-style:normal; color:var(--champagne); }
.hero .lede{ font-size:.98rem; max-width:46ch; margin-bottom:1.4rem; }
.hero .lede b{ color:var(--ivoire); font-weight:600; }
.hero-meta{ margin-top:2.4rem; font-size:.66rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--gris); }

.hero-logo{ width:min(238px,66%); height:auto; justify-self:center; align-self:center; }
.hero-logo .frame{ stroke:var(--ivoire); stroke-width:1.6; fill:none; opacity:.7; }
.hero-logo .side{ fill:var(--ivoire); font-family:var(--display); letter-spacing:3.4px; font-size:12.5px; }
/* Bodoni est plus large que l'ancien serif : la marque doit tenir entre les libellés latéraux (x=86 / x=338) */
.hero-logo .mark{ fill:var(--ivoire); font-family:var(--display); font-weight:500; letter-spacing:4px; font-size:54px; }

/* ============================================================
   BANDE DE CRÉDIBILITÉ (sous le hero)
   ============================================================ */
.credentials{ background:var(--noir-2); padding-block:clamp(.6rem,1vw,.9rem); }
.creds{ display:flex; flex-wrap:wrap; }
.creds li{ flex:1 1 200px; display:flex; flex-direction:column; gap:.2rem; padding:.5rem 0 .5rem 1.8rem; margin-left:1.8rem; border-left:1px solid var(--trait-nuit); }
.creds li:first-child{ padding-left:0; margin-left:0; border-left:none; }
.creds .fig{ font-family:var(--head); font-weight:600; font-size:1.2rem; line-height:1.1; color:var(--champagne); letter-spacing:.01em; }
.creds .cap{ font-size:.66rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--ivoire-2); }
@media (max-width:760px){
  .creds li{ flex:1 1 44%; padding:.4rem 0 .4rem 1.4rem; margin-left:1.4rem; }
  .creds li:nth-child(odd){ padding-left:0; margin-left:0; border-left:none; }
}

/* ============================================================
   SECTIONS
   ============================================================ */
section{ scroll-margin-top:80px; }
.section{ padding-block:var(--sect); }
.section.alt{ background:var(--perle-2); }
/* sous-bloc "La société" : dans le même bloc que le Périmètre, séparé par un simple filet */
.subblock{ margin-top:clamp(1.75rem,3.5vw,3rem); padding-top:clamp(1.75rem,3.5vw,3rem); border-top:1px solid var(--trait); scroll-margin-top:80px; }
.subblock .section-head{ margin-bottom:clamp(1.2rem,2.4vw,1.8rem); }
.section-head{ max-width:64ch; margin-bottom:clamp(.85rem,1.6vw,1.3rem); }
.section-head h2{ font-size:clamp(1.5rem,2.6vw,2.05rem); margin-top:.55rem; font-weight:500; line-height:1.06; }
.section-head p{ margin-top:1.2rem; font-size:1.05rem; }
/* lead d'indépendance en tête d'Expertise : sur une seule ligne */
#intervention .section-head{ max-width:none; }
#intervention .section-head p.lead-oneline{ max-width:none; font-size:1rem; }

/* ---------- Profil ---------- */
.profil{ display:grid; grid-template-columns:.72fr 1.28fr; gap:clamp(1.75rem,3.5vw,3.25rem); align-items:start; }
/* Profil : photo à droite, texte à gauche */
.profil-flip{ grid-template-columns:1.28fr .72fr; }
.profil-flip .bio{ order:1; }
.profil-flip .portrait{ order:2; }
.portrait{ position:relative; }
.portrait img{ width:100%; aspect-ratio:3/4; object-fit:cover; }
.portrait figcaption{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gris); padding-top:1rem; font-weight:600; }
.nuit .portrait figcaption{ color:var(--ivoire-2); }

.bio .titre{ font-family:var(--head); font-size:1.6rem; font-weight:500; }
.bio .role{ font-size:.7rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--champagne-2); margin:.5rem 0 1.8rem; }
.nuit .bio .role{ color:var(--champagne); }
.bio p{ margin-bottom:.6rem; font-size:.96rem; }
.bio b{ color:var(--encre); font-weight:600; }
.nuit .bio b{ color:var(--ivoire); }
/* Profil : crédibilité (agrément CSSF en exergue + méta compacte) */
.profile-creds{ margin-top:clamp(1.75rem,3vw,2.4rem); }
.cred-lead{ font-size:1.08rem; color:var(--encre); border-left:2px solid var(--champagne); padding-left:1.1rem; margin:0 0 1.15rem; line-height:1.5; }
.cred-lead b{ color:var(--encre); font-weight:600; }
.cred-list{ display:grid; grid-template-columns:max-content 1fr; gap:.55rem 1.8rem; align-items:baseline; }
.cred-list .cl-row{ display:contents; }
.cred-list dt{ font-weight:600; color:var(--champagne-2); letter-spacing:.04em; text-transform:uppercase; font-size:.68rem; padding-top:.15rem; }
.cred-list dd{ font-size:.94rem; color:var(--encre); }
@media (max-width:560px){
  .cred-list{ grid-template-columns:1fr; gap:.1rem; }
  .cred-list dt{ margin-top:.7rem; }
}

/* fiche */
.record{ margin-top:2.4rem; border-top:1px solid var(--trait); }
.nuit .record{ border-color:var(--trait-nuit); }
.record-row{ display:grid; grid-template-columns:minmax(0,140px) minmax(0,1fr); gap:1rem; padding:.55rem 0; border-bottom:1px solid var(--trait); }
.nuit .record-row{ border-color:var(--trait-nuit); }
.record-row dt{ font-size:.66rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--gris); padding-top:.28rem; }
.nuit .record-row dt{ color:var(--ivoire-2); }
.record-row dd{ font-size:.98rem; }

.tbc{ font-size:.8rem; background:var(--champagne); color:var(--noir); padding:.25em .7em; display:inline-block; font-weight:500; }

/* ---------- Périmètre ---------- */
/* quatre volets : Structures / Stratégies / Services / Investissement.
   4 sur desktop, 2×2 sur tablette (voir responsive), 1 sur mobile. */
.scope{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(1.75rem,3vw,3rem); }
.scope-col h3{ font-size:1.4rem; margin:.9rem 0 1.1rem; font-weight:400; }
.scope-col ul{ display:flex; flex-direction:column; }
.scope-col li{
  font-size:.95rem; font-weight:400; color:var(--encre);
  padding:.5rem 0; border-bottom:1px solid var(--trait);
}
.scope-col li:last-child{ border-bottom:none; }
/* Mandats sur fond marron foncé */
#perimetre{ background:var(--noir-3); }
#perimetre .scope-col li{ color:var(--ivoire); border-bottom-color:var(--trait-nuit); }

/* ---------- Intervention ---------- */
/* exactement quatre domaines : grille 2×2 (écho aux 4 coins du logo), 1 colonne en mobile */
.fns{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--trait); border:1px solid var(--trait); }
.fn{ background:var(--perle); padding:clamp(1.4rem,2.4vw,2.1rem); display:flex; flex-direction:column; gap:.55rem; transition:background .4s ease; }
.fn:hover{ background:var(--blanc); }
.fn-top{ display:flex; align-items:baseline; gap:.75rem; margin-bottom:.2rem; }
.fn .no{ font-family:var(--head); font-size:.95rem; font-weight:600; color:var(--champagne-2); letter-spacing:.02em; }
.fn .pillar{ font-family:var(--head); font-size:clamp(1.5rem,2.4vw,2rem); font-weight:600; letter-spacing:-.015em; text-transform:none; color:var(--ink); }
.fn h3{ font-size:1.55rem; font-weight:400; }
.fn p{ font-size:.96rem; }
.fn dl{ margin-top:.4rem; display:flex; flex-direction:column; gap:1rem; }
.fn dl div{ border-left:1px solid var(--champagne); padding-left:1.1rem; }
.fn dt{ font-size:.8rem; font-weight:600; color:var(--encre); letter-spacing:.02em; }
.fn dd{ font-size:.88rem; color:var(--gris); margin-top:.15rem; }

.todo{ background:var(--perle-2); }
.todo .flag{ font-size:.64rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--noir); background:var(--champagne); padding:.4em .8em; align-self:flex-start; }

/* ---------- Contact ---------- */
.contact{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,5rem); align-items:start; }
.contact h2{ font-size:clamp(2rem,3.6vw,3rem); margin:1.1rem 0 1.2rem; font-weight:400; }
.card{ border:1px solid var(--trait); background:var(--blanc); padding:clamp(1.8rem,3vw,2.6rem); }
.crow{ display:grid; grid-template-columns:minmax(0,90px) minmax(0,1fr); gap:1.2rem; padding:1.1rem 0; border-bottom:1px solid var(--trait); }
.crow:last-child{ border-bottom:none; }
.crow dt{ font-size:.66rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--gris); padding-top:.28rem; }
.crow dd{ font-size:1.02rem; }
.crow a:hover{ color:var(--champagne-2); }
.actions{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:2rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:var(--noir); color:var(--ivoire-2); padding-block:clamp(2rem,3.5vw,2.75rem) 1.5rem; }
.site-footer .container{ display:flex; flex-direction:column; gap:1.6rem; }
.footer-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:2.5rem; flex-wrap:wrap; }
.footer-brand .wordmark{ font-family:var(--display); font-size:1.4rem; letter-spacing:.34em; color:var(--ivoire); font-weight:500; }
.footer-brand p{ color:var(--ivoire-2); font-size:.88rem; margin-top:.55rem; max-width:34ch; }
.footer-legal{ font-size:.74rem; line-height:1.85; color:var(--ivoire-2); }
.footer-legal .k{ color:var(--champagne); font-weight:600; letter-spacing:.06em; }
.footer-bottom{ display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; padding-top:1.2rem; border-top:1px solid var(--trait-nuit); font-size:.72rem; }
.footer-bottom nav{ display:flex; gap:1.8rem; }
.footer-bottom a:hover{ color:var(--champagne); }

/* ============================================================
   PAGES LÉGALES
   ============================================================ */
.legal{ padding-block:clamp(7.5rem,12vw,10rem) var(--sect); }
.legal .container{ max-width:760px; }
.legal h1{ font-size:clamp(2.2rem,4.6vw,3.2rem); margin-bottom:.6rem; font-weight:400; }
.legal .updated{ font-size:.68rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--champagne-2); margin-bottom:3rem; }
.legal h2{ font-size:1.5rem; margin:2.6rem 0 .9rem; font-weight:400; }
.legal h3{ font-family:var(--sans); font-size:1rem; font-weight:600; margin:1.6rem 0 .5rem; }
.legal p, .legal li{ color:var(--gris); margin-bottom:.9rem; }
.legal ul{ list-style:disc; padding-left:1.3rem; margin-bottom:1rem; }
.legal li{ margin-bottom:.35rem; }
.legal a{ color:var(--champagne-2); text-decoration:underline; text-underline-offset:3px; }
.back-home{ display:inline-flex; align-items:center; gap:.5rem; font-size:.68rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--champagne-2); margin-bottom:2.4rem; }
.back-home:hover{ color:var(--encre); }
.legal-page .site-header .brand .wordmark{ color:var(--encre); }
.legal-page .site-header .nav a{ color:var(--gris); }
.legal-page .site-header .lang button{ color:var(--gris); }
.legal-page .site-header .burger span{ background:var(--encre); }

/* ============================================================
   BILINGUE
   ============================================================ */
[data-lang]{ display:none; }
[data-lang="fr"]{ display:revert; }
html.lang-en [data-lang="fr"]{ display:none; }
html.lang-en [data-lang="en"]{ display:revert; }
span[data-lang], a[data-lang], b[data-lang], em[data-lang]{ display:none; }
span[data-lang="fr"], a[data-lang="fr"], b[data-lang="fr"], em[data-lang="fr"]{ display:inline; }
html.lang-en span[data-lang="fr"], html.lang-en a[data-lang="fr"], html.lang-en b[data-lang="fr"], html.lang-en em[data-lang="fr"]{ display:none; }
html.lang-en span[data-lang="en"], html.lang-en a[data-lang="en"], html.lang-en b[data-lang="en"], html.lang-en em[data-lang="en"]{ display:inline; }

/* ============================================================
   REVEAL
   ============================================================ */
.reveal{ opacity:1; transform:none; }
html.js .reveal{ opacity:0; transform:translateY(18px); transition:opacity 1s ease, transform 1s ease; }
html.js .reveal.in{ opacity:1; transform:none; }

:focus-visible{ outline:2px solid var(--champagne); outline-offset:3px; }

/* lien d'évitement clavier */
.skip{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--noir); color:var(--ivoire); padding:.85em 1.3em; font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; }
.skip:focus{ left:1rem; top:1rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* tablette : le Périmètre passe en 2×2 avant de s'empiler */
@media (min-width:901px) and (max-width:1100px){
  .scope{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:900px){
  .hero .container{ grid-template-columns:1fr; }
  .hero-logo{ display:none; }
  .hero{ min-height:auto; padding-block:8.5rem 4rem; }
  .profil, .contact, .fns, .scope{ grid-template-columns:1fr; }
  .portrait img{ aspect-ratio:4/5; }
  .record-row{ grid-template-columns:minmax(0,120px) minmax(0,1fr); }

  .burger{ display:flex; }
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(300px,82vw);
    background:var(--blanc); flex-direction:column; align-items:flex-start; justify-content:center;
    gap:1.8rem; padding:2.5rem; transform:translateX(100%);
    transition:transform .45s cubic-bezier(.7,0,.2,1); box-shadow:-30px 0 60px rgba(0,0,0,.12); z-index:55;
  }
  .nav-open .nav{ transform:none; }
  .nav a{ font-size:.82rem; color:var(--gris) !important; }
  .lang{ order:-1; }
  /* la page ne défile plus derrière le tiroir ouvert */
  .nav-open{ overflow:hidden; }
}

@media (prefers-reduced-motion:reduce){
  *{ scroll-behavior:auto !important; }
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  html.js .statement .corner{ animation:none; stroke-dashoffset:0; }
}