@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Instrument+Sans:wght@400;500;600&display=swap');

:root{
  --ink:#0A1826; --ink-2:#0F2236; --ink-3:#16324D;
  --paper:#F7F5F0; --paper-2:#EFECE4; --white:#FFFFFF;
  --amber:#E8A33D; --amber-deep:#C9821B; --amber-ink:#9A6210;
  --steel:#5B7A9D;
  --line:#D8D3C8; --line-dark:rgba(255,255,255,.14);
  --txt:#1C2B3A; --txt-soft:#54677B; --txt-inverse:#EDF2F7;
  --radius:10px; --wrap:1180px;
  --font-display:"Archivo",system-ui,sans-serif;
  --font-body:"Instrument Sans",system-ui,sans-serif;
  --shadow:0 18px 50px -18px rgba(10,24,38,.35);
  --header-h:88px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--txt);
  overflow-x:hidden;
}
a{color:inherit;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px;}

/* =========================================================================
   HEADER — pilule flottante, réutilisée sur toutes les pages
   ========================================================================= */
.site-header{
  position:absolute; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:26px 40px; height:var(--header-h);
}
.site-header.is-static{ position:relative; background:var(--ink); }
.logo{ display:flex; align-items:center; text-decoration:none; }
.logo img{ display:block; height:34px; width:auto; border-radius:4px; }

.nav-pill{
  display:flex; align-items:center; gap:4px;
  background:rgba(255,255,255,0.10);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:999px; padding:6px;
}
.nav-pill a{
  position:relative; display:flex; flex-direction:column; align-items:center;
  text-decoration:none; color:rgba(255,255,255,0.78);
  font-size:12.5px; font-weight:600; letter-spacing:0.06em;
  text-transform:uppercase; padding:9px 16px; border-radius:999px;
  transition:background .25s ease,color .25s ease; white-space:nowrap;
}
.nav-pill a:hover{ color:#fff; }
.nav-pill a.active{ background:var(--amber); color:var(--ink); }
.nav-pill a .dot{ width:3px;height:3px;border-radius:50%;background:currentColor;margin-top:4px;opacity:0; }
.nav-pill a.active .dot{ opacity:1; }

.header-right{ display:flex; align-items:center; gap:10px; }
.lang-select{
  display:flex; align-items:center; gap:6px;
  background:var(--amber); color:var(--ink); border:none; text-decoration:none;
  border-radius:999px; padding:10px 16px; font-size:12.5px;
  font-weight:700; letter-spacing:0.06em; cursor:pointer; font-family:inherit;
}
.mobile-menu-btn{
  display:none; align-items:center; gap:6px;
  background:rgba(255,255,255,0.12); color:#fff; border:1px solid rgba(255,255,255,.2);
  border-radius:999px; padding:10px 16px; font-size:12px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; cursor:pointer; font-family:inherit;
}
@media (max-width:880px){
  .nav-pill{ display:none; }
  .nav-pill.is-open{
    display:flex; flex-direction:column; align-items:stretch; gap:2px;
    position:absolute; top:76px; left:22px; right:22px;
    background:var(--ink-2); border-radius:16px; padding:10px;
  }
  .nav-pill.is-open a{ align-items:flex-start; padding:12px 14px; }
  .mobile-menu-btn{ display:flex; }
  .site-header{ padding:20px 22px; }
}

/* =========================================================================
   HERO — marche / vélo (repris tel quel)
   ========================================================================= */
.hero-scene{
  position:relative; min-height:100vh; overflow:hidden;
  background:linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 55%, var(--ink-3) 100%);
  display:flex; flex-direction:column; justify-content:flex-end;
}
.hero-media{ position:absolute; inset:0; z-index:1; }
.hero-media video{ width:100%; height:100%; object-fit:cover; }
.hero-scene video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.hero-scene.hero--bike .hero-media{ right:0; top:0; left:auto; height:100%; width:64%; }
.hero-scene.hero--bike video{ right:0; top:0; left:auto; height:100%; width:64%; object-fit:cover; }

.caption{
  position:absolute; top:36%; left:6%; right:auto; max-width:440px; z-index:3;
  color:var(--txt-inverse); font-family:var(--font-display); font-weight:800;
  font-size:clamp(26px, 3.2vw, 44px); line-height:1.08; letter-spacing:-0.01em;
  opacity:0; transform:translateY(14px); text-align:left;
  transition:opacity .6s ease, transform .6s ease; pointer-events:none;
}
.caption.is-visible{ opacity:1; transform:translateY(0); }
.caption .accent{ color:var(--amber); }
/* Miroir : uniquement pour le renard qui marche (traverse l'écran) — le
   renard à vélo reste fixe à droite, son texte reste fixe à gauche (règle
   ci-dessus), jamais de classe pos-* appliquée sur ce hero-là. */
.caption.pos-right{ left:auto; right:6%; text-align:right; }
.caption.pos-left{ left:6%; right:auto; text-align:left; }

/* =========================================================================
   MOBILE — refonte complète du hero et des vidéos.
   Principe : la vidéo occupe une zone haute dédiée (fini le recadrage
   serré à 64% de large qui écrasait le texte dans les 36% restants), un
   voile dégradé assure la lisibilité, le texte est ancré en bas dans une
   position stable unique. Le miroir gauche/droite perd son sens quand la
   vidéo n'est plus positionnée à gauche/droite mais pleine largeur : il
   est désactivé en JS sous 760px (voir site.js).
   ========================================================================= */
@media (max-width:760px){
  .hero-scene{ min-height:100vh; min-height:100dvh; }

  /* Vidéo "marche" : agrandie pour occuper l'espace, descendue légèrement */
  .hero-scene:not(.hero--bike) .hero-media,
  .hero-scene:not(.hero--bike) video{
    height:66%; top:6%; bottom:auto; object-position:center 28%;
  }

  /* Vidéo "vélo" : idem, pleine largeur, agrandie et descendue */
  .hero-scene.hero--bike .hero-media,
  .hero-scene.hero--bike video{
    width:100%; right:auto; left:0; height:66%; top:6%; bottom:auto;
    object-position:center 30%;
  }

  /* Voile dégradé sous la vidéo, pour la lisibilité du texte */
  .hero-scene::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:40%;
    background:linear-gradient(180deg, transparent, var(--ink) 45%);
    z-index:2; pointer-events:none;
  }

  /* Texte : ancré depuis le HAUT, juste sous la vidéo (72 % = fin de la
     vidéo) — plus aucun vide possible entre les deux, quelle que soit la
     hauteur d'écran. La légende du bas reste ancrée près du bord bas en
     pixels fixes, largement séparée du texte principal. */
  .caption,
  .caption.pos-right,
  .caption.pos-left{
    left:6%; right:6%; max-width:none; text-align:left;
    top:74%; bottom:auto;
    font-size:clamp(20px, 5.4vw, 27px);
  }
  .hero-headline{ top:14%; left:6%; right:6%; max-width:none; }
  .hero-sub{
    position:absolute; left:6%; right:6%; bottom:28px; text-align:left;
    font-size:12px; padding-bottom:0;
  }
  .scroll-cue{ display:none; }
}

@media (max-width:760px) and (max-height:680px){
  /* Petits écrans (iPhone SE et similaires) : vidéo un peu plus courte
     pour laisser assez de place au texte sans se serrer. */
  .hero-scene:not(.hero--bike) .hero-media,
  .hero-scene:not(.hero--bike) video,
  .hero-scene.hero--bike .hero-media,
  .hero-scene.hero--bike video{
    height:56%;
  }
  .caption,
  .caption.pos-right,
  .caption.pos-left{ top:62%; font-size:clamp(18px, 5.4vw, 24px); }
  .hero-sub{ bottom:22px; }
}

@media (max-width:420px){
  .hero-scene{ min-height:520px; }
  .caption{ font-size:clamp(22px, 7vw, 28px); }
}

/* =========================================================================
   INTRO — écran plein logo, uniquement sur l'accueil
   ========================================================================= */
.intro{
  position:fixed; inset:0; z-index:998; background:var(--ink);
  display:flex; align-items:center; justify-content:center;
}
.intro-center img{ height:64px; width:auto; opacity:0; }
.intro-corner{
  position:absolute; color:rgba(237,242,247,.55); font-family:var(--font-display);
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; line-height:1.7;
  opacity:0;
}
.intro-corner--bl{ left:32px; bottom:32px; }
.intro-corner--br{ right:32px; bottom:32px; text-align:right; }
.intro-corner--br svg{ width:14px; height:14px; margin-top:4px; }

/* Titre du hero — révélation "masque" ligne par ligne (façon template) */
.hero-headline{ position:absolute; z-index:3; top:30%; left:6%; max-width:560px; }
.hl-line{ display:block; overflow:hidden; }
.hl-inner{
  display:block; font-family:var(--font-display); font-weight:800;
  color:var(--txt-inverse); font-size:clamp(30px,4.4vw,58px); line-height:1.05;
  letter-spacing:-0.01em;
}
.hl-inner .accent{ color:var(--amber); }

/* =========================================================================
   MOTIFS D'INSPIRATION AFRICAINE — SVG maison (wax / adinkra), en attendant
   les vraies photos du client
   ========================================================================= */
.pattern-wax{
  position:absolute; inset:0; opacity:.08; pointer-events:none;
  background-image:
    repeating-linear-gradient(45deg, var(--amber) 0 2px, transparent 2px 22px),
    repeating-linear-gradient(-45deg, var(--amber) 0 2px, transparent 2px 22px);
}
.priority-card{ position:relative; overflow:hidden; }
.priority-card .pattern-wax{ opacity:.05; }
.res-card .thumb{ position:relative; overflow:hidden; }
.res-card .thumb svg.motif{ position:absolute; inset:0; width:100%; height:100%; opacity:.5; }

.hero-sub{
  position:relative; z-index:3; text-align:center; color:rgba(237,242,247,.72);
  font-size:14px; letter-spacing:.04em; padding-bottom:4%;
}
.scroll-cue{
  position:absolute; bottom:5%; left:50%; transform:translateX(-50%); z-index:3;
  color:rgba(237,242,247,.55); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.scroll-cue svg{ width:14px; height:20px; animation:cue-bounce 1.8s ease-in-out infinite; }
@keyframes cue-bounce{ 0%,100%{ transform:translateY(0); opacity:.5; } 50%{ transform:translateY(6px); opacity:1; } }

/* =========================================================================
   SECTIONS génériques (page d'accueil)
   ========================================================================= */
section{ padding:96px 0; }
.section-ink{ background:var(--ink); color:var(--txt-inverse); }
.eyebrow{
  font-family:var(--font-display); font-weight:700; font-size:12px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--amber-ink);
  margin:0 0 14px;
}
.section-ink .eyebrow{ color:var(--amber); }
h2.section-title{
  font-family:var(--font-display); font-weight:800; letter-spacing:-0.01em;
  font-size:clamp(28px, 4vw, 46px); line-height:1.08; margin:0 0 22px; max-width:760px;
}
p.lede{ font-size:18px; line-height:1.6; color:var(--txt-soft); max-width:640px; margin:0 0 8px; }
.section-ink p.lede{ color:rgba(237,242,247,.78); }

/* Reveal animation (progressive enhancement — visible par défaut, voir reveal.js) */
.reveal{ opacity:1; }

/* Grille d'index (domaines d'expertise) */
.index-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  margin-top:40px;
}
.section-ink .index-grid{ background:var(--line-dark); border-color:var(--line-dark); }
.index-col{ background:var(--paper); padding:28px 24px; }
.section-ink .index-col{ background:var(--ink-2); }
.index-col .num{ font-family:var(--font-display); font-weight:800; color:var(--amber); font-size:13px; letter-spacing:.08em; }
.index-col h3{ font-family:var(--font-display); font-size:19px; margin:10px 0 8px; }
.index-col p{ font-size:14.5px; color:var(--txt-soft); line-height:1.5; margin:0; }
.section-ink .index-col p{ color:rgba(237,242,247,.68); }
@media (max-width:760px){ .index-grid{ grid-template-columns:1fr; } }

/* Cartes priorités (icônes SVG maison) */
.priority-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:40px; }
.priority-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px; transition:transform .3s ease, box-shadow .3s ease;
}
.priority-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.priority-card .ic{ width:38px; height:38px; margin-bottom:16px; color:var(--amber-deep); }
.priority-card h3{ font-family:var(--font-display); font-size:17px; margin:0 0 8px; }
.priority-card p{ font-size:14px; color:var(--txt-soft); line-height:1.55; margin:0; }
@media (max-width:900px){ .priority-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .priority-grid{ grid-template-columns:1fr; } }

/* Chiffres clés */
.numbers-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-dark); border-radius:var(--radius); overflow:hidden; margin-top:44px; }
.number-item{ background:var(--ink-2); padding:32px 22px; text-align:left; }
.number-item .val{ font-family:var(--font-display); font-weight:800; font-size:clamp(28px,3vw,40px); color:var(--amber); display:block; }
.number-item .lbl{ font-size:13px; color:rgba(237,242,247,.66); margin-top:8px; display:block; line-height:1.4; }
@media (max-width:760px){ .numbers-grid{ grid-template-columns:1fr 1fr; } }

/* Étapes (approche 6 étapes) */
.steps-row{ display:flex; flex-wrap:wrap; gap:16px; margin-top:44px; }
.step-chip{ flex:1 1 150px; background:var(--paper-2); border:1px solid var(--line); border-radius:999px; padding:14px 20px; font-size:13.5px; font-weight:600; text-align:center; }
.step-chip .n{ display:block; font-family:var(--font-display); color:var(--amber-deep); font-weight:800; font-size:12px; letter-spacing:.08em; margin-bottom:4px; }

/* Ressources / cartes simples */
.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px; }
.res-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.res-card .thumb{ height:150px; background:linear-gradient(135deg,var(--ink),var(--ink-3)); position:relative; }
.res-card .thumb svg{ position:absolute; inset:0; margin:auto; width:46px; height:46px; color:var(--amber); }
.res-card .body{ padding:22px; }
.res-card .tag{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--amber-deep); font-weight:700; }
.res-card h3{ font-family:var(--font-display); font-size:17px; margin:10px 0 0; line-height:1.35; }
@media (max-width:900px){ .card-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .card-grid{ grid-template-columns:1fr; } }

/* Bureaux */
.offices-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:40px; }
.office-card{ border:1px solid var(--line); border-radius:var(--radius); padding:26px; }
.office-card h3{ font-family:var(--font-display); font-size:16px; margin:0 0 10px; color:var(--amber-deep); }
.office-card p{ margin:0; font-size:14.5px; line-height:1.6; color:var(--txt-soft); }
@media (max-width:700px){ .offices-grid{ grid-template-columns:1fr; } }

/* CTA bandeau */
.cta-band{ background:var(--ink); color:var(--txt-inverse); text-align:center; padding:80px 24px; }
.cta-band h2{ font-family:var(--font-display); font-weight:800; font-size:clamp(28px,4vw,42px); margin:0 0 22px; }
.btn{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  background:var(--amber); color:var(--ink); font-weight:700; font-size:14px;
  letter-spacing:.03em; padding:14px 26px; border-radius:999px; border:none; cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.btn:hover{ background:var(--amber-deep); transform:translateY(-2px); }
.btn-ghost{ background:transparent; border:1px solid rgba(237,242,247,.35); color:var(--txt-inverse); }
.btn-ghost:hover{ background:rgba(237,242,247,.08); }

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer{ background:var(--ink); color:rgba(237,242,247,.72); padding:70px 0 28px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:32px; }
.footer-brand img{ height:32px; width:auto; border-radius:4px; margin-bottom:16px; }
.footer-brand p{ font-size:13.5px; line-height:1.6; max-width:280px; color:rgba(237,242,247,.55); }
.footer-col h4{ font-family:var(--font-display); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--amber); margin:0 0 16px; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.footer-col a{ font-size:13.5px; text-decoration:none; color:rgba(237,242,247,.72); transition:color .2s ease; }
.footer-col a:hover{ color:var(--amber); }
.footer-bar{
  border-top:1px solid rgba(237,242,247,.12); margin-top:56px; padding-top:22px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:12.5px; color:rgba(237,242,247,.5);
}
.footer-bar a{ text-decoration:none; color:rgba(237,242,247,.5); }
.footer-bar a:hover{ color:var(--amber); }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }

/* =========================================================================
   PAGES LÉGALES — prose
   ========================================================================= */
.legal-page{ background:var(--paper); }
.legal-hero{ background:var(--ink); color:var(--txt-inverse); padding:calc(var(--header-h) + 70px) 0 60px; }
.legal-hero h1{ font-family:var(--font-display); font-weight:800; font-size:clamp(30px,4vw,48px); margin:0; }
.legal-hero .updated{ margin-top:14px; font-size:13px; color:rgba(237,242,247,.6); }
.legal-body{ padding:56px 0 100px; }
.legal-body .wrap{ max-width:780px; }
.legal-body h2{ font-family:var(--font-display); font-size:22px; margin:40px 0 14px; }
.legal-body h3{ font-family:var(--font-display); font-size:18px; margin:28px 0 10px; }
.legal-body p{ font-size:15.5px; line-height:1.7; color:var(--txt); margin:0 0 16px; }
.legal-body ul{ padding-left:20px; }
.legal-body li{ font-size:15.5px; line-height:1.7; margin-bottom:8px; }
.legal-body a{ color:var(--amber-deep); text-decoration:underline; }

/* =========================================================================
   PAGE EN CONSTRUCTION — modale
   ========================================================================= */
.uc-overlay{
  position:fixed; inset:0; z-index:500; background:rgba(10,24,38,.72);
  display:flex; align-items:center; justify-content:center; padding:24px;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:1; transition:opacity .3s ease;
}
.uc-overlay.is-closed{ opacity:0; pointer-events:none; }
.uc-modal{
  background:var(--paper); border-radius:16px; max-width:440px; width:100%;
  padding:36px 32px; text-align:center; box-shadow:0 30px 70px -20px rgba(0,0,0,.5);
}
.uc-modal .ic{ width:44px; height:44px; margin:0 auto 18px; color:var(--amber-deep); }
.uc-modal h2{ font-family:var(--font-display); font-size:22px; margin:0 0 12px; }
.uc-modal p{ font-size:14.5px; color:var(--txt-soft); line-height:1.6; margin:0 0 24px; }
.uc-modal .actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* =========================================================================
   LOADER
   ========================================================================= */
.page-loader{
  position:fixed; inset:0; z-index:999; background:var(--ink);
  display:flex; align-items:center; justify-content:center; transition:opacity .5s ease;
}
.page-loader img{ width:190px; height:auto; }
.page-loader.is-hidden{ opacity:0; pointer-events:none; }