:root{
  --ink:#15151a;
  --ink-soft:#4a4854;
  --muted:#726f7c;
  --paper:#faf8f4;
  --paper-alt:#f2efe6;
  --card:#ffffff;
  --line:#e4e0d4;
  --line-strong:#d4cfc0;
  --accent:#4338ca;
  --accent-ink:#312a9e;
  --accent-soft:#ecebfb;
  --radius:16px;
  --maxw:1160px;
  --shadow:0 1px 2px rgba(21,21,26,0.04), 0 12px 28px rgba(21,21,26,0.05);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:auto;}
body{
  font-family:'Inter', system-ui, sans-serif;
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.brand{
  font-family:'Space Grotesk','Inter',sans-serif;
  letter-spacing:-0.02em;
  color:var(--ink);
}
a{color:inherit; text-decoration:none;}
img,svg{max-width:100%; display:block;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
::selection{background:var(--accent); color:#fff;}

/* Header */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(250,248,244,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
nav{
  display:flex; align-items:center; justify-content:space-between;
  max-width:var(--maxw); margin:0 auto; padding:20px 32px;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.2rem;}
.brand .mark{
  width:32px; height:32px; border-radius:9px; background:var(--ink);
  display:flex; align-items:center; justify-content:center;
}
.brand .mark span{color:var(--paper); font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:0.95rem;}
.nav-links{display:flex; align-items:center; gap:34px;}
.nav-links a{
  font-size:0.92rem; font-weight:500; color:var(--ink-soft); transition:color .2s ease; position:relative;
}
.nav-links a:hover{color:var(--ink);}
.nav-links a.active{color:var(--ink);}
.nav-links a.btn-primary, .nav-links a.btn-primary:hover{color:var(--paper);}
.nav-links a.active::after{
  content:''; position:absolute; left:0; right:0; bottom:-8px; height:2px; background:var(--accent); border-radius:2px;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:100px; font-weight:600; font-size:0.88rem;
  cursor:pointer; border:1.5px solid transparent; transition:all .2s ease; white-space:nowrap;
}
.btn-primary{background:var(--ink); color:var(--paper);}
.btn-primary:hover{background:var(--accent); transform:translateY(-1px);}
.btn-outline{background:transparent; color:var(--ink); border-color:var(--line-strong);}
.btn-outline:hover{border-color:var(--ink); background:var(--paper-alt);}
.btn-accent{background:var(--accent); color:#fff;}
.btn-accent:hover{background:var(--accent-ink); transform:translateY(-1px);}
.burger{display:none; width:38px; height:38px; border-radius:9px; border:1.5px solid var(--line-strong); align-items:center; justify-content:center; cursor:pointer; background:var(--card);}
.burger span, .burger span::before, .burger span::after{
  content:''; display:block; width:16px; height:2px; background:var(--ink); position:relative;
}
.burger span::before{position:absolute; top:-5px;}
.burger span::after{position:absolute; top:5px;}

/* Eyebrow */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:0.76rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--ink-soft); border:1.5px solid var(--line-strong); padding:7px 14px; border-radius:100px; margin-bottom:22px;
}
.eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--accent);}

/* Underline squiggle for accent word */
.accent-word{position:relative; color:var(--accent); white-space:nowrap;}
.accent-word svg{position:absolute; left:0; bottom:-0.14em; width:100%; height:0.3em;}

/* Section basics */
section.pad{padding:100px 0;}
.section-head{max-width:620px; margin:0 auto 56px;}
.section-head.center{text-align:center;}
.section-head.center .eyebrow{margin-left:auto; margin-right:auto;}
.section-head h2{font-size:clamp(1.7rem,3.2vw,2.4rem); font-weight:700; margin-bottom:14px;}
.section-head p{color:var(--muted); font-size:1.02rem; line-height:1.65;}
.divider{height:1px; background:var(--line);}

/* Hero */
.hero{padding:88px 0 0;}
.hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:48px; align-items:center; padding-bottom:70px;}
.hero h1{font-size:clamp(2.3rem,4.6vw,3.5rem); line-height:1.1; font-weight:700; margin-bottom:24px;}
.hero p.lead{font-size:1.1rem; color:var(--muted); max-width:520px; margin-bottom:34px; line-height:1.65;}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:40px;}
.hero-stats{display:flex; gap:36px; flex-wrap:wrap;}
.hero-stats div b{display:block; font-family:'Space Grotesk',sans-serif; font-size:1.5rem; font-weight:700;}
.hero-stats div span{font-size:0.82rem; color:var(--muted);}
.hero-visual{display:flex; align-items:center; justify-content:center;}

/* Tonal bands + logo marquees */
.band-dark{background:var(--ink); color:var(--paper);}
.band-dark h1, .band-dark h2, .band-dark h3, .band-dark h4{color:var(--paper);}
.band-dark .section-head p{color:#b8b4c6;}
.band-dark .eyebrow{color:#d8d5e6; border-color:#39374a;}
.band-alt{background:var(--paper-alt);}

.logo-marquee{
  overflow:hidden; width:100%;
  -webkit-mask-image:linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  mask-image:linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}
.logo-track{
  display:flex; align-items:center; gap:20px; width:max-content;
  animation:scrollX 34s linear infinite;
}
.logo-marquee:hover .logo-track{animation-play-state:paused;}
.logo-track.reverse{animation-direction:reverse;}
@keyframes scrollX{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
.logo-card{
  flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  min-width:96px; padding:18px 22px; border-radius:14px; background:#ffffff;
  box-shadow:0 1px 2px rgba(21,21,26,0.08);
  white-space:nowrap; transition:transform .2s ease, box-shadow .2s ease;
}
.logo-card:hover{transform:translateY(-3px); box-shadow:0 8px 20px rgba(21,21,26,0.12);}
.logo-mark{display:flex; align-items:center; justify-content:center; height:32px;}
.logo-mark svg{width:32px; height:32px; display:block; flex:none;}
.logo-mark img{max-height:32px; max-width:110px; width:auto; height:auto; display:block;}
.logo-name{
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:0.78rem; color:var(--ink-soft);
}
.band-dark .logo-name{color:#b8b4c6;}
@media (prefers-reduced-motion:reduce){
  .logo-track{animation:none;}
}

/* Cards / services */
.services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.service-card{
  background:var(--card); border:1.5px solid var(--line); border-radius:var(--radius);
  padding:30px 26px; transition:all .25s ease;
}
.service-card:hover{border-color:var(--ink); transform:translateY(-4px); box-shadow:var(--shadow);}
.icon-box{
  width:44px; height:44px; border-radius:12px; margin-bottom:20px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); border:1px solid var(--line);
}
.icon-box svg{width:22px; height:22px; stroke:var(--accent-ink);}
.service-card h3{font-size:1.08rem; margin-bottom:9px; font-weight:600;}
.service-card p{color:var(--muted); font-size:0.92rem; line-height:1.6;}
.service-card .tag{
  display:inline-block; margin-top:14px; font-size:0.68rem; font-weight:600; color:var(--accent-ink);
  background:var(--accent-soft); padding:3px 10px; border-radius:100px;
}

/* Approach */
.approach{display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative;}
.approach::before{
  content:''; position:absolute; top:23px; left:12.5%; right:12.5%; height:1px; background:var(--line-strong);
}
.step{padding:0 18px;}
.step-num{
  width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.05rem; margin-bottom:22px;
  background:var(--paper); border:1.5px solid var(--accent); color:var(--accent-ink); position:relative; z-index:2;
}
.step h4{font-size:1.02rem; margin-bottom:9px; font-weight:600;}
.step p{color:var(--muted); font-size:0.9rem; line-height:1.6;}

/* Why / benefits */
.why-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.why-copy h2{font-size:clamp(1.7rem,2.8vw,2.2rem); margin-bottom:18px; font-weight:700;}
.why-copy p{color:var(--muted); line-height:1.7; margin-bottom:26px;}
.benefit-list{border-top:1px solid var(--line);}
.benefit-item{
  display:flex; align-items:center; gap:14px; padding:16px 4px; border-bottom:1px solid var(--line); font-size:0.96rem; font-weight:500;
}
.benefit-item .ico{
  width:26px; height:26px; border-radius:7px; flex:none; background:var(--accent-soft);
  display:flex; align-items:center; justify-content:center;
}
.benefit-item .ico svg{width:14px; height:14px; stroke:var(--accent-ink);}

/* Ressources teaser + full grid */
.res-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.res-card{
  background:var(--card); border:1.5px solid var(--line); border-radius:var(--radius);
  padding:26px; display:flex; flex-direction:column; height:100%; transition:all .25s ease;
}
.res-card:hover{border-color:var(--ink); transform:translateY(-4px); box-shadow:var(--shadow);}
.res-num{font-family:'Space Grotesk',sans-serif; font-size:0.78rem; color:var(--accent-ink); font-weight:700; margin-bottom:12px;}
.res-card h3{font-size:1rem; margin-bottom:9px; font-weight:600; line-height:1.4;}
.res-card p{color:var(--muted); font-size:0.87rem; line-height:1.55; margin-bottom:16px; flex:1;}
.res-meta{display:flex; justify-content:space-between; font-size:0.76rem; color:var(--muted); border-top:1px solid var(--line); padding-top:12px;}
.res-cta{text-align:center; margin-top:44px;}

/* Newsletter box */
.newsletter-box{
  background:var(--ink); color:var(--paper); border-radius:24px; padding:52px 44px; text-align:center;
}
.newsletter-box h2{color:var(--paper); font-size:1.6rem; margin-bottom:12px; font-weight:700;}
.newsletter-box p{color:#c7c4cf; margin-bottom:28px;}
.subscribe-form{display:flex; gap:10px; max-width:420px; margin:0 auto; flex-wrap:wrap; justify-content:center;}
.subscribe-form input{
  flex:1; min-width:220px; padding:13px 18px; border-radius:100px; border:1.5px solid #38363f;
  background:#211f27; color:var(--paper); font-size:0.9rem; outline:none;
}
.subscribe-form input::placeholder{color:#8b8894;}
.subscribe-form input:focus{border-color:var(--accent);}
.form-note{margin-top:16px; font-size:0.76rem; color:#8b8894;}

/* Contact */
.contact-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px;}
.contact-info h2{font-size:clamp(1.7rem,2.8vw,2.2rem); margin-bottom:16px; font-weight:700;}
.contact-info p{color:var(--muted); line-height:1.7; margin-bottom:30px;}
.contact-detail{display:flex; align-items:center; gap:14px; margin-bottom:16px;}
.contact-detail .ico{
  width:38px; height:38px; border-radius:10px; background:var(--paper-alt); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.contact-detail .ico svg{width:18px; height:18px; stroke:var(--ink);}
.contact-detail a{color:var(--ink); font-weight:500; font-size:0.94rem;}
.contact-detail span{display:block; font-size:0.76rem; color:var(--muted);}
form.contact-form{background:var(--card); border:1.5px solid var(--line); border-radius:var(--radius); padding:34px;}
.field{margin-bottom:18px;}
.field label{display:block; font-size:0.84rem; color:var(--ink-soft); margin-bottom:8px; font-weight:500;}
.field input, .field textarea{
  width:100%; padding:12px 15px; border-radius:10px; border:1.5px solid var(--line);
  background:var(--paper); color:var(--ink); font-family:inherit; font-size:0.92rem; outline:none; transition:border-color .2s ease;
}
.field input:focus, .field textarea:focus{border-color:var(--accent);}
.field textarea{min-height:110px; resize:vertical;}
form.contact-form .btn{width:100%; padding:13px;}

/* Footer */
footer{border-top:1px solid var(--line); padding:52px 0 30px;}
.footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:36px; margin-bottom:36px;}
.footer-col h5{font-size:0.8rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--muted); margin-bottom:16px; font-weight:600;}
.footer-col a{display:block; color:var(--ink-soft); font-size:0.89rem; margin-bottom:11px;}
.footer-col a:hover{color:var(--ink);}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; padding-top:24px; border-top:1px solid var(--line);
  font-size:0.8rem; color:var(--muted); flex-wrap:wrap; gap:10px;
}

/* Page hero (Ressources) */
.page-hero{padding:70px 0 60px; text-align:center;}
.page-hero h1{font-size:clamp(2rem,4vw,2.8rem); font-weight:700; margin-bottom:18px;}
.page-hero p{color:var(--muted); font-size:1.05rem; max-width:600px; margin:0 auto; line-height:1.65;}

/* Reveal */
.reveal{opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* Cookie banner */
.cookie-banner{
  position:fixed; bottom:20px; left:20px; right:20px; z-index:100;
  max-width:600px; margin:0 auto; padding:18px 22px; border-radius:16px;
  background:var(--card); border:1.5px solid var(--line); box-shadow:0 20px 44px rgba(21,21,26,0.14);
  display:flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content:space-between;
  transition:transform .4s ease, opacity .4s ease;
}
.cookie-banner.hide{transform:translateY(140%); opacity:0; pointer-events:none;}
.cookie-banner p{font-size:0.84rem; color:var(--ink-soft); flex:1; min-width:220px;}
.cookie-actions{display:flex; gap:10px;}
.cookie-actions .btn{padding:9px 16px; font-size:0.8rem;}

@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-visual{max-width:320px; margin:32px auto 0;}
  .services-grid, .res-grid{grid-template-columns:repeat(2,1fr);}
  .approach{grid-template-columns:repeat(2,1fr); row-gap:36px;}
  .approach::before{display:none;}
  .why-grid, .contact-grid{grid-template-columns:1fr; gap:36px;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  .wrap{padding:0 20px;}
  nav{padding:16px 20px;}
  .nav-links{
    position:fixed; top:68px; left:16px; right:16px; flex-direction:column; align-items:flex-start;
    background:var(--card); border:1.5px solid var(--line); border-radius:16px; padding:22px;
    gap:16px; display:none; box-shadow:0 20px 44px rgba(21,21,26,0.12);
  }
  .nav-links.open{display:flex;}
  .nav-links .btn{width:100%;}
  .burger{display:flex;}
  .hero{padding:40px 0 0;}
  .hero-visual{max-width:210px; margin:28px auto 0;}
  .hero-actions{flex-direction:column;}
  .hero-actions .btn{width:100%;}
  .services-grid, .res-grid{grid-template-columns:1fr;}
  .approach{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  section.pad{padding:64px 0;}
  .newsletter-box{padding:38px 24px;}
}

/* Article reading pages */
.article-back{display:inline-block; font-size:0.86rem; color:var(--muted); margin-bottom:28px; transition:color .2s ease;}
.article-back:hover{color:var(--ink);}
.article-title{font-size:clamp(1.6rem,3.4vw,2.3rem); font-weight:700; line-height:1.28; margin:14px 0 16px;}
.article-meta{color:var(--muted); font-size:0.88rem; margin-bottom:40px;}
.article-body{line-height:1.7;}
.article-body p{margin-bottom:20px; color:var(--ink-soft); font-size:1.02rem;}
.article-body h3{font-family:'Space Grotesk','Inter',sans-serif; font-weight:700; font-size:1.25rem; margin:40px 0 16px; color:var(--ink);}
.article-body ul{margin:0 0 20px 22px; color:var(--ink-soft);}
.article-body li{margin-bottom:10px; line-height:1.65;}
.article-body strong{color:var(--ink); font-weight:600;}
.article-cta{text-align:center; margin-top:56px;}