/* ================================================================
   VYOU COMMUNICATION — Feuille de styles commune
   Agence de communication à Abidjan, Côte d'Ivoire · Afrique
   Polices : Montserrat (Gotham) + Nunito (Avenir)
   ================================================================ */

/* Import Google Fonts — Montserrat (≈ Gotham) + Nunito (≈ Avenir) */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,600;0,700;0,800;0,900;1,400;1,700&family=Nunito:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,700&display=swap');

/* Variables polices */
:root{
  --font-display:'Montserrat',sans-serif;   /* Remplace Anton / Gotham */
  --font-body:'Montserrat',sans-serif;      /* Remplace Barlow Condensed / Gotham */
  --font-serif:'Nunito',sans-serif;         /* Remplace Libre Baskerville / Avenir */

  --W:#F8F7F3;
  --K:#0A0A0A;
  --Y:#FFD600;
  --Y2:#FFE436;
  --Y3:#B89800;
  --K2:#1A1A1A;
  --K3:#333;
  --W2:rgba(248,247,243,0.55);
  --W3:rgba(248,247,243,0.1);
  --ease:cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;font-size:16px;}
body{background:var(--W);color:var(--K);font-family:var(--font-body);font-weight:400;overflow-x:hidden;cursor:none;}

/* ——— LOADING SCREEN ——— */
#loader{
  position:fixed;inset:0;z-index:99999;
  background:var(--K);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:36px;
  transition:opacity .8s cubic-bezier(0.4, 0, 0.2, 1), visibility .8s;
}
#loader.hidden{opacity:0;visibility:hidden;pointer-events:none;}

.loader-logo-wrap {
  position: relative;
  width: 160px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader-logo{
  width:100%;
  opacity:0;
  transform:scale(0.9) translateY(20px);
  transition:opacity .6s .2s, transform .6s cubic-bezier(0.34, 1.56, 0.64, 1) .2s;
  position: relative;
  z-index: 2;
}
#loader.active .loader-logo{
  opacity:1;
  transform:scale(1) translateY(0);
  animation: logoPulse 2s ease-in-out infinite alternate 0.8s;
}

@keyframes logoPulse {
  0% { transform: scale(1); filter: drop-shadow(0 0 0px rgba(255,214,0,0)); }
  100% { transform: scale(1.05); filter: drop-shadow(0 0 15px rgba(255,214,0,0.4)); }
}

.loader-logo img{
  width:100%;height:auto;display:block;
}

.loader-ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 240px; height: 240px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(248,247,243,0.05);
  border-top-color: var(--Y);
  border-bottom-color: var(--Y);
  opacity: 0;
  animation: ringSpin 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
  transition: opacity 0.5s 0.4s;
}
#loader.active .loader-ring {
  opacity: 0.3;
}

@keyframes ringSpin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.loader-bar-wrap{
  width:200px;height:2px;
  background:rgba(248,247,243,0.08);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.loader-bar-fill{
  height:100%;
  background:linear-gradient(90deg, var(--Y), #FFF);
  width:0;
  border-radius: 2px;
  transition:width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 10px rgba(255,214,0,0.5);
}

.loader-text{
  font-family:var(--font-body);font-weight:700;
  font-size:0.65rem;letter-spacing:0.4em;text-transform:uppercase;
  color:rgba(248,247,243,0.3);
  display: flex;
  align-items: center;
}

.loader-text span {
  animation: textBlink 1.4s infinite both;
  display: inline-block;
  margin-left: 2px;
}
.loader-text span:nth-child(1) { animation-delay: 0.0s; }
.loader-text span:nth-child(2) { animation-delay: 0.2s; }
.loader-text span:nth-child(3) { animation-delay: 0.4s; }

@keyframes textBlink {
  0% { opacity: 0.2; transform: translateY(0); }
  20% { opacity: 1; color: var(--Y); transform: translateY(-2px); }
  100% { opacity: 0.2; transform: translateY(0); }
}

/* ——— LOGO IMAGE (nav fond blanc → invert pour rendre noir) ——— */
.logo-img-dark{
  /* Sur fond sombre (nav sombre, footer) : logo blanc, pas de filtre */
  filter:none;height:25px;width:auto;display:block;
}
.logo-img-light{
  /* Sur fond clair (nav blanc) : logo blanc inversé = noir */
  filter:invert(1);height:28px;width:auto;display:block;
  transition:filter .2s;
}

/* ——— CURSOR ——— */
#cur{position:fixed;width:14px;height:14px;background:var(--Y);pointer-events:none;z-index:9999;transform:translate(-50%,-50%) rotate(45deg);transition:width .25s,height .25s,background .3s;}
#curT{position:fixed;width:44px;height:44px;border:2px solid var(--K);pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .3s,height .3s,border-color .3s;}

/* ——— FONT OVERRIDE — Gotham=Montserrat / Avenir=Nunito ——— */
/* Toutes les règles qui utilisaient Anton/Barlow Condensed/Libre Baskerville
   sont maintenant réappliquées via les variables CSS --font-display/--font-body/--font-serif */

/* ——— GLOBAL ——— */
.dark{background:var(--K);color:var(--W);}
.yellow{background:var(--Y);color:var(--K);}

/* ——— NAV ——— */
nav[aria-label="Navigation principale"]{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;padding:0 48px;height:64px;
  background:var(--W);border-bottom:3px solid var(--K);
  transition:box-shadow .3s;
}
.n-left{display:flex;gap:28px;list-style:none;}
.n-left a,.n-right a{
  font-family:'Montserrat',sans-serif;font-weight:700;
  font-size:0.78rem;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--K);text-decoration:none;transition:color .2s;
}
.n-left a:hover,.n-right a:hover{color:var(--K3);}
.n-left a.active{color:var(--Y3);border-bottom:2px solid var(--Y);}
.n-logo{
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;text-align:center;line-height:1;
  /* Fallback texte si image non chargée */
  font-family:'Montserrat',sans-serif;font-size:2rem;letter-spacing:0.04em;color:var(--K);
}
.n-logo span{color:var(--Y);}
.n-right{display:flex;justify-content:flex-end;align-items:center;gap:20px;}
.n-cta{
  background:var(--K);color:var(--W) !important;
  padding:9px 22px;font-size:0.72rem;letter-spacing:0.12em;
  text-transform:uppercase;text-decoration:none;font-weight:700 !important;
  border:2px solid var(--K);transition:background .2s,color .2s !important;
}
.n-cta:hover{background:var(--Y) !important;color:var(--K) !important;border-color:var(--K);}

/* ——— HAMBURGER ——— */
.n-burger{
  display:none;flex-direction:column;justify-content:space-around;
  width:26px;height:20px;background:none;border:none;
  cursor:pointer;padding:0;z-index:210;align-self:center;flex-shrink:0;
}
.n-burger span{
  display:block;width:100%;height:2px;background:var(--K);
  transition:transform .3s var(--ease),opacity .3s,transform-origin .3s;
  transform-origin:center;
}
.n-burger.open span:nth-child(1){transform:translateY(9px) rotate(45deg);}
.n-burger.open span:nth-child(2){opacity:0;transform:scaleX(0);}
.n-burger.open span:nth-child(3){transform:translateY(-9px) rotate(-45deg);}

/* ——— OVERLAY NAVIGATION MOBILE ——— */
.n-overlay{
  display:none;
  position:fixed;top:56px;left:0;right:0;bottom:0;
  background:var(--W);z-index:198;
  flex-direction:column;
  border-top:3px solid var(--K);
  overflow-y:auto;
}
.n-overlay.open{display:flex;}
.n-overlay-links{list-style:none;flex:1;}
.n-overlay-links li{border-bottom:2px solid rgba(10,10,10,0.07);}
.n-overlay-links a{
  display:block;padding:22px 28px;
  font-family:'Montserrat',sans-serif;font-weight:700;
  font-size:1.05rem;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--K);text-decoration:none;transition:background .2s,color .2s;
}
.n-overlay-links a:hover,.n-overlay-links a.active{background:var(--K);color:var(--W);}
.n-overlay-bottom{
  padding:24px 28px;
  border-top:3px solid var(--K);
}

/* ——— SECTION HEADER GRID (titres + CTA côte à côte) ——— */
.sec-header{
  padding:72px 48px 48px;
  border-bottom:3px solid var(--K);
  display:grid;grid-template-columns:1fr auto;
  align-items:end;gap:40px;
}

/* ——— BREADCRUMB ——— */
.breadcrumb{
  padding:14px 48px;
  border-bottom:2px solid rgba(10,10,10,0.08);
  background:var(--W);
  margin-top:64px;
}
.breadcrumb-inner{
  display:flex;align-items:center;gap:8px;
  font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;
  font-family:'Montserrat',sans-serif;font-weight:600;
}
.breadcrumb-inner a{color:var(--K3);text-decoration:none;transition:color .2s;}
.breadcrumb-inner a:hover{color:var(--K);}
.breadcrumb-inner span{color:rgba(10,10,10,0.3);}
.breadcrumb-inner .bc-sep{color:rgba(10,10,10,0.25);}

/* ——— PAGE HERO (intérieur) ——— */
.page-hero{
  padding:80px 48px 72px;
  margin-top:20px;
  border-bottom:3px solid var(--K);
  background:var(--K);color:var(--W);
  position:relative;overflow:hidden;
  
}
.page-hero::before{
  content:'VYOU';position:absolute;
  font-family:'Montserrat',sans-serif;font-size:280px;
  color:rgba(248,247,243,0.02);letter-spacing:-0.04em;
  top:50%;left:50%;transform:translate(-50%,-50%);
  user-select:none;white-space:nowrap;
}
.ph-label{
  font-size:0.68rem;letter-spacing:0.22em;text-transform:uppercase;
  color:rgba(248,247,243,0.35);
  display:flex;align-items:center;gap:10px;margin-bottom:24px;
}
.ph-label::before{content:'';width:28px;height:2px;background:var(--Y);}
.ph-h1{
  font-family:'Montserrat',sans-serif;
  font-size:clamp(3.5rem,8vw,9rem);
  line-height:0.9;letter-spacing:-0.01em;
  color:var(--W);position:relative;z-index:1;
}
.ph-h1 em{
  font-family:'Nunito',sans-serif;
  font-style:italic;font-weight:400;color:var(--Y);font-size:0.75em;
}
.ph-sub{
  margin-top:28px;
  font-family:'Nunito',sans-serif;font-style:italic;
  font-size:1rem;line-height:1.8;color:rgba(248,247,243,0.5);
  max-width:640px;position:relative;z-index:1;
}

/* ——— SECTION LABELS & TITRES ——— */
.sec-label{
  font-size:0.68rem;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--K3);display:flex;align-items:center;gap:10px;margin-bottom:28px;
}
.sec-label::before{content:'';width:28px;height:2px;background:var(--Y);}
.h2-display{
  font-family:'Montserrat',sans-serif;
  font-size:clamp(3rem,5vw,5.5rem);
  line-height:0.95;letter-spacing:0;color:var(--K);
}
.h2-display em{font-family:'Nunito',sans-serif;font-style:italic;font-weight:400;color:var(--K3);font-size:0.85em;}
.h2-display-w{
  font-family:'Montserrat',sans-serif;
  font-size:clamp(2.8rem,5vw,5rem);line-height:0.95;color:var(--W);
}
.h2-display-w em{font-family:'Nunito',sans-serif;font-style:italic;font-weight:400;color:var(--Y);font-size:0.85em;}

/* ——— BOUTONS ——— */
.btn-K{
  background:var(--K);color:var(--W);
  padding:13px 32px;font-family:'Montserrat',sans-serif;
  font-weight:700;font-size:0.78rem;letter-spacing:0.12em;text-transform:uppercase;
  text-decoration:none;border:2px solid var(--K);
  transition:background .25s,color .25s;display:inline-block;
}
.btn-K:hover{background:var(--Y);color:var(--K);}
.btn-Y{
  background:var(--Y);color:var(--K);
  padding:13px 32px;font-family:'Montserrat',sans-serif;
  font-weight:700;font-size:0.78rem;letter-spacing:0.12em;text-transform:uppercase;
  text-decoration:none;border:2px solid var(--K);
  transition:background .25s,color .25s;display:inline-block;
}
.btn-Y:hover{background:var(--K);color:var(--W);}
.btn-ghost{
  color:var(--K3);font-size:0.75rem;letter-spacing:0.1em;
  text-transform:uppercase;text-decoration:none;
  display:flex;align-items:center;gap:8px;
  font-family:'Montserrat',sans-serif;font-weight:600;
  transition:color .2s;
}
.btn-ghost::after{content:'→';transition:transform .25s;}
.btn-ghost:hover{color:var(--K);}
.btn-ghost:hover::after{transform:translateX(4px);}

/* ——— SERVICES GRID ——— */
.services.dark{border-top:3px solid var(--K);border-bottom:3px solid var(--K);}
.services-header{
  padding:56px 48px;border-bottom:2px solid rgba(248,247,243,0.1);
  display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;
}
.srv-intro{font-size:0.88rem;line-height:1.8;color:rgba(248,247,243,0.5);}
.srv-grid{display:grid;grid-template-columns:repeat(3,1fr);}
.srv{
  padding:48px 40px;
  border-right:2px solid rgba(248,247,243,0.07);
  border-bottom:2px solid rgba(248,247,243,0.07);
  position:relative;overflow:hidden;
  transition:background .35s;
}
.srv:nth-child(3n){border-right:none;}
.srv:nth-child(n+4){border-bottom:none;}
.srv:hover{background:rgba(255,214,0,0.06);}
.srv::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--Y);transform:scaleX(0);transform-origin:left;
  transition:transform .4s;
}
.srv:hover::before{transform:scaleX(1);}
.srv-num{font-family:'Montserrat',sans-serif;font-size:5rem;color:rgba(248,247,243,0.04);line-height:1;margin-bottom:16px;transition:color .35s;}
.srv:hover .srv-num{color:rgba(255,214,0,0.12);}
.srv-icon{font-size:1.4rem;margin-bottom:18px;display:block;}
.srv-name{font-family:'Montserrat',sans-serif;font-weight:700;font-size:1.1rem;letter-spacing:0.04em;text-transform:uppercase;color:var(--W);margin-bottom:12px;}
.srv-desc{font-size:0.8rem;line-height:1.75;color:rgba(248,247,243,0.45);}
.srv-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px;}
.sp{font-size:0.62rem;letter-spacing:0.1em;text-transform:uppercase;border:1px solid rgba(248,247,243,0.1);padding:4px 10px;color:rgba(248,247,243,0.3);transition:all .3s;}
.srv:hover .sp{border-color:rgba(255,214,0,0.4);color:rgba(255,214,0,0.8);}

/* ——— TEAM GRID ——— */
.team-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:3px solid var(--K);
}
.tm-card{
  padding:48px 36px;
  border-right:3px solid var(--K);
  border-bottom:3px solid var(--K);
  position:relative;overflow:hidden;
  transition:background .3s;cursor:default;
}
.tm-card:nth-child(4n){border-right:none;}
.tm-card:hover{background:var(--K);}
.tm-avatar{
  width:80px;height:80px;border-radius:50%;
  background:var(--Y);margin-bottom:24px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Montserrat',sans-serif;font-size:1.8rem;color:var(--K);
  transition:background .3s;
}
.tm-card:hover .tm-avatar{background:var(--Y);}
.tm-name{font-family:'Montserrat',sans-serif;font-weight:700;font-size:1.05rem;letter-spacing:0.05em;text-transform:uppercase;color:var(--K);margin-bottom:6px;transition:color .3s;}
.tm-card:hover .tm-name{color:var(--W);}
.tm-role{font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--K3);margin-bottom:16px;transition:color .3s;}
.tm-card:hover .tm-role{color:rgba(248,247,243,0.5);}
.tm-bio{font-size:0.8rem;line-height:1.7;color:var(--K3);transition:color .3s;}
.tm-card:hover .tm-bio{color:rgba(248,247,243,0.5);}
.tm-links{display:flex;gap:8px;margin-top:16px;}
.tm-link{
  width:30px;height:30px;border:1px solid rgba(10,10,10,0.15);
  display:flex;align-items:center;justify-content:center;
  color:var(--K3);text-decoration:none;font-size:0.62rem;font-weight:700;
  font-family:'Montserrat',sans-serif;letter-spacing:0.05em;
  transition:all .2s;
}
.tm-card:hover .tm-link{border-color:rgba(248,247,243,0.2);color:rgba(248,247,243,0.5);}
.tm-link:hover{background:var(--Y) !important;color:var(--K) !important;border-color:var(--Y) !important;}

/* ——— BLOG GRID ——— */
.blog-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:3px solid var(--K);
}
.bl-card{
  border-right:3px solid var(--K);
  border-bottom:3px solid var(--K);
  position:relative;overflow:hidden;
  transition:background .3s;
  display:flex;flex-direction:column;
}
.bl-card:nth-child(3n){border-right:none;}
.bl-img{
  height:220px;background:var(--K);
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.bl-img-bg{
  font-family:'Montserrat',sans-serif;font-size:100px;
  color:rgba(248,247,243,0.04);letter-spacing:-0.04em;
  user-select:none;transition:transform .5s;
}
.bl-card:hover .bl-img-bg{transform:scale(1.06);}
.bl-img-cat{
  position:absolute;bottom:0;left:0;
  background:var(--Y);color:var(--K);
  padding:4px 12px;font-size:0.62rem;letter-spacing:0.14em;
  text-transform:uppercase;font-weight:700;font-family:'Montserrat',sans-serif;
}
.bl-body{padding:32px 32px 28px;flex:1;display:flex;flex-direction:column;}
.bl-meta{
  display:flex;align-items:center;gap:12px;margin-bottom:14px;
  font-size:0.65rem;letter-spacing:0.1em;text-transform:uppercase;
  color:rgba(10,10,10,0.35);font-family:'Montserrat',sans-serif;font-weight:600;
}
.bl-meta-sep{color:var(--Y);}
.bl-title{
  font-family:'Montserrat',sans-serif;font-weight:700;
  font-size:1.1rem;letter-spacing:0.03em;text-transform:uppercase;
  color:var(--K);line-height:1.25;margin-bottom:12px;
  transition:color .2s;
}
.bl-card:hover .bl-title{color:var(--Y3);}
.bl-excerpt{font-size:0.8rem;line-height:1.75;color:var(--K3);flex:1;}
.bl-footer{
  margin-top:20px;padding-top:16px;
  border-top:2px solid rgba(10,10,10,0.07);
  display:flex;align-items:center;justify-content:space-between;
}
.bl-author{display:flex;align-items:center;gap:8px;}
.bl-ava{
  width:28px;height:28px;border-radius:50%;
  background:var(--Y);display:flex;align-items:center;justify-content:center;
  font-size:0.6rem;font-weight:700;font-family:'Montserrat',sans-serif;color:var(--K);
}
.bl-author-name{font-size:0.7rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--K3);font-weight:600;}
.bl-read{
  font-size:0.65rem;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--K);font-weight:700;text-decoration:none;
  display:flex;align-items:center;gap:6px;transition:color .2s;
}
.bl-read::after{content:'→';transition:transform .2s;}
.bl-read:hover{color:var(--Y3);}
.bl-read:hover::after{transform:translateX(3px);}

/* ——— ARTICLE ——— */
.article-layout{
  display:grid;grid-template-columns:1fr 340px;gap:0;
  border-top:3px solid var(--K);
}
.article-main{
  padding:72px 56px;border-right:3px solid var(--K);
}
.article-sidebar{padding:72px 40px;}
.art-header{margin-bottom:48px;}
.art-cat{
  display:inline-block;background:var(--Y);color:var(--K);
  padding:4px 14px;font-size:0.62rem;letter-spacing:0.14em;
  text-transform:uppercase;font-weight:700;margin-bottom:20px;
}
.art-h1{
  font-family:'Montserrat',sans-serif;
  font-size:clamp(2.2rem,4vw,4rem);
  line-height:0.95;letter-spacing:0;color:var(--K);margin-bottom:20px;
}
.art-meta{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;
  color:rgba(10,10,10,0.4);font-family:'Montserrat',sans-serif;font-weight:600;
  padding-bottom:24px;border-bottom:2px solid rgba(10,10,10,0.08);
}
.art-meta-sep{color:var(--Y);}
.art-author-link{color:var(--K);text-decoration:none;font-weight:700;}
.art-body{
  font-family:'Nunito',sans-serif;
  font-size:1rem;line-height:1.85;color:var(--K3);
}
.art-body h2{
  font-family:'Montserrat',sans-serif;font-size:1.8rem;
  color:var(--K);margin:48px 0 20px;letter-spacing:0;line-height:1;
}
.art-body h3{
  font-family:'Montserrat',sans-serif;font-weight:700;
  font-size:1.1rem;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--K);margin:36px 0 14px;
}
.art-body p{margin-bottom:24px;}
.art-body strong{color:var(--K);font-family:'Montserrat',sans-serif;font-weight:700;font-size:1.05em;letter-spacing:0.02em;}
.art-body ul,.art-body ol{margin:0 0 24px 24px;}
.art-body li{margin-bottom:8px;}
.art-body blockquote{
  border-left:4px solid var(--Y);padding:20px 24px;
  background:rgba(255,214,0,0.05);margin:32px 0;
  font-style:italic;font-size:1.05rem;color:var(--K);
}
.art-body a{color:var(--K);border-bottom:2px solid var(--Y);text-decoration:none;transition:color .2s;}
.art-body a:hover{color:var(--Y3);}
.art-share{
  margin-top:56px;padding-top:32px;border-top:3px solid var(--K);
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.art-share-label{font-size:0.68rem;letter-spacing:0.14em;text-transform:uppercase;font-weight:700;color:var(--K);}
.art-share-btn{
  padding:8px 18px;border:2px solid var(--K);
  font-size:0.65rem;letter-spacing:0.1em;text-transform:uppercase;font-weight:700;
  font-family:'Montserrat',sans-serif;text-decoration:none;color:var(--K);
  transition:all .2s;
}
.art-share-btn:hover{background:var(--K);color:var(--W);}

/* Sidebar */
.sb-block{margin-bottom:40px;}
.sb-title{
  font-family:'Montserrat',sans-serif;font-weight:700;
  font-size:0.72rem;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--K3);margin-bottom:20px;padding-bottom:12px;
  border-bottom:2px solid rgba(10,10,10,0.1);
}
.sb-recent{display:flex;flex-direction:column;gap:16px;}
.sb-recent-item{
  display:flex;flex-direction:column;gap:4px;
  padding-bottom:16px;border-bottom:2px solid rgba(10,10,10,0.06);
}
.sb-recent-item:last-child{border-bottom:none;}
.sb-recent-link{
  font-family:'Montserrat',sans-serif;font-weight:700;
  font-size:0.88rem;letter-spacing:0.03em;text-transform:uppercase;
  color:var(--K);text-decoration:none;line-height:1.3;
  transition:color .2s;
}
.sb-recent-link:hover{color:var(--Y3);}
.sb-recent-date{font-size:0.65rem;letter-spacing:0.08em;text-transform:uppercase;color:rgba(10,10,10,0.3);}
.sb-tags{display:flex;flex-wrap:wrap;gap:6px;}
.sb-tag{
  font-size:0.62rem;letter-spacing:0.1em;text-transform:uppercase;
  border:1px solid rgba(10,10,10,0.12);padding:5px 12px;
  color:var(--K3);font-weight:600;text-decoration:none;
  transition:all .2s;
}
.sb-tag:hover{background:var(--K);color:var(--W);border-color:var(--K);}
.sb-cta{
  background:var(--K);padding:32px 28px;
}
.sb-cta-title{
  font-family:'Montserrat',sans-serif;font-size:1.4rem;
  color:var(--W);line-height:1;margin-bottom:12px;
}
.sb-cta-title span{color:var(--Y);}
.sb-cta-text{font-size:0.78rem;line-height:1.7;color:rgba(248,247,243,0.5);margin-bottom:20px;}

/* ——— CONTACT FORM ——— */
.contact-s{border-bottom:3px solid var(--K);}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;}
.contact-left{padding:80px 56px;border-right:3px solid var(--K);background:var(--K);color:var(--W);}
.contact-left .sec-label{color:rgba(248,247,243,0.4);}
.contact-left .sec-label::before{background:var(--Y);}
.contact-tagline{font-family:'Nunito',sans-serif;font-style:italic;font-size:1.05rem;line-height:1.8;color:rgba(248,247,243,0.5);margin-top:28px;margin-bottom:48px;}
.contact-deets{display:flex;flex-direction:column;gap:20px;}
.cd{display:flex;align-items:flex-start;gap:16px;}
.cd-ic{width:36px;height:36px;background:var(--Y);display:flex;align-items:center;justify-content:center;font-size:0.9rem;flex-shrink:0;}
.cd-text{font-size:0.85rem;color:rgba(248,247,243,0.65);line-height:1.5;}
.cd-text strong{color:var(--W);display:block;margin-bottom:2px;font-family:'Montserrat',sans-serif;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;}
.contact-right{padding:80px 56px;background:var(--W);}
.cf{display:flex;flex-direction:column;gap:20px;}
.fl{display:block;font-size:0.65rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--K3);margin-bottom:7px;font-family:'Montserrat',sans-serif;font-weight:600;}
.fi{
  width:100%;background:transparent;border:none;border-bottom:2px solid rgba(10,10,10,0.2);
  color:var(--K);padding:12px 0;font-family:'Montserrat',sans-serif;font-weight:400;
  font-size:1rem;outline:none;transition:border-color .3s;appearance:none;cursor:none;
}
.fi:focus{border-color:var(--K);}
.fi::placeholder{color:rgba(10,10,10,0.25);}
textarea.fi{resize:vertical;min-height:110px;border:2px solid rgba(10,10,10,0.15);padding:12px;transition:border-color .3s;}
textarea.fi:focus{border-color:var(--K);}
select.fi{cursor:none;}
.fr2{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.fsub{
  background:var(--K);color:var(--W);border:2px solid var(--K);
  padding:16px 40px;font-family:'Montserrat',sans-serif;
  font-weight:700;font-size:0.85rem;letter-spacing:0.14em;
  text-transform:uppercase;cursor:none;align-self:flex-start;
  transition:background .25s,color .25s;
}
.fsub:hover{background:var(--Y);color:var(--K);border-color:var(--K);}
.fok{display:none;padding:16px;background:rgba(255,214,0,0.15);border:2px solid var(--Y);color:var(--K);font-size:0.82rem;font-family:'Montserrat',sans-serif;font-weight:600;letter-spacing:0.06em;text-align:center;margin-top:8px;}

/* ——— STMT STRIP ——— */
.stmt{background:var(--Y);border-bottom:3px solid var(--K);padding:72px 48px;display:grid;grid-template-columns:3fr 2fr;gap:60px;align-items:center;}
.stmt-q{font-family:'Nunito',sans-serif;font-weight:700;font-size:clamp(1.6rem,3vw,2.8rem);color:var(--K);line-height:1.25;}
.stmt-q em{font-style:italic;font-weight:400;}
.stmt-facts{display:flex;flex-direction:column;gap:20px;}
.stmt-fact{display:flex;align-items:baseline;gap:16px;border-bottom:2px solid rgba(10,10,10,0.15);padding-bottom:20px;}
.stmt-fact:last-child{border-bottom:none;padding-bottom:0;}
.stmt-fact-n{font-family:'Montserrat',sans-serif;font-size:3.2rem;color:var(--K);line-height:1;min-width:80px;}
.stmt-fact-l{font-size:0.78rem;letter-spacing:0.06em;text-transform:uppercase;color:rgba(10,10,10,0.6);}

/* ——— FOOTER ——— */
footer{background:var(--K);color:var(--W);padding:0;}
.footer-top{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:0;
  border-bottom:2px solid rgba(248,247,243,0.06);
}
.ft-col{padding:56px 48px;border-right:2px solid rgba(248,247,243,0.06);}
.ft-col:last-child{border-right:none;}
.ft-logo{
  display:flex;align-items:center;
  margin-bottom:16px;
  /* Fallback texte */
  font-family:'Montserrat',sans-serif;font-size:2.2rem;letter-spacing:0.04em;color:var(--W);
}
.ft-logo span{color:var(--Y);}
.ft-tagline{font-size:0.78rem;line-height:1.75;color:rgba(248,247,243,0.35);max-width:260px;}
.ft-heading{font-family:'Montserrat',sans-serif;font-weight:700;font-size:0.68rem;letter-spacing:0.2em;text-transform:uppercase;color:rgba(248,247,243,0.3);margin-bottom:20px;}
.ft-links{display:flex;flex-direction:column;gap:10px;list-style:none;}
.ft-links a{font-size:0.82rem;color:rgba(248,247,243,0.55);text-decoration:none;font-family:'Montserrat',sans-serif;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;transition:color .2s;}
.ft-links a:hover{color:var(--Y);}
.footer-bottom{
  display:flex;align-items:center;justify-content:space-between;
  padding:28px 48px;
}
.f-copy{font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;color:rgba(248,247,243,0.2);}
.f-soc{display:flex;gap:10px;}
.f-soc a{
  width:36px;height:36px;border:1px solid rgba(248,247,243,0.1);
  display:flex;align-items:center;justify-content:center;
  color:rgba(248,247,243,0.4);text-decoration:none;
  font-size:0.68rem;font-weight:700;font-family:'Montserrat',sans-serif;
  letter-spacing:0.05em;transition:all .25s;
}
.f-soc a:hover{border-color:var(--Y);color:var(--Y);}

/* ——— CLIENTS ——— */
.clients-s{border-bottom:3px solid var(--K);}
.clients-header{padding:72px 48px 56px;border-bottom:3px solid var(--K);display:grid;grid-template-columns:1fr 420px;gap:60px;align-items:end;}
.clients-intro-p{font-family:'Nunito',sans-serif;font-style:italic;font-size:1rem;line-height:1.8;color:var(--K3);}
.clients-grid{display:grid;grid-template-columns:repeat(3,1fr);}
.cl-card{padding:60px 48px;border-right:3px solid var(--K);position:relative;overflow:hidden;transition:background .3s;cursor:default;}
.cl-card:last-child{border-right:none;}
.cl-card:hover{background:rgba(255,214,0,0.06);}
.cl-card::after{content:'';position:absolute;bottom:0;left:48px;right:48px;height:3px;background:var(--Y);transform:scaleX(0);transform-origin:left;transition:transform .4s;}
.cl-card:hover::after{transform:scaleX(1);}
.cl-abbr{font-family:'Montserrat',sans-serif;font-size:5.5rem;color:rgba(10,10,10,0.06);line-height:1;margin-bottom:24px;transition:color .3s;}
.cl-card:hover .cl-abbr{color:var(--Y);}
.cl-name{font-family:'Montserrat',sans-serif;font-weight:700;font-size:1.1rem;letter-spacing:0.04em;text-transform:uppercase;color:var(--K);margin-bottom:8px;}
.cl-sec{font-size:0.78rem;color:var(--K3);letter-spacing:0.05em;}

/* ——— WHY ——— */
.why-s{border-bottom:3px solid var(--K);}
.why-header{padding:72px 48px 56px;border-bottom:3px solid var(--K);}
.why-list{display:flex;flex-direction:column;}
.wi{display:grid;grid-template-columns:72px 1fr 1fr;gap:40px;padding:36px 48px;border-bottom:2px solid rgba(10,10,10,0.08);align-items:start;transition:background .25s;cursor:default;}
.wi:hover{background:rgba(255,214,0,0.07);}
.wi-n{font-family:'Montserrat',sans-serif;font-size:2.5rem;color:rgba(10,10,10,0.1);line-height:1;}
.wi:hover .wi-n{color:var(--Y);}
.wi-t{font-family:'Montserrat',sans-serif;font-weight:700;font-size:1rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--K);}
.wi-d{font-size:0.82rem;line-height:1.75;color:var(--K3);}

/* ——— PILLARS ——— */
.pillars{display:flex;flex-direction:column;gap:0;}
.pill{padding:24px 0;border-bottom:2px solid rgba(10,10,10,0.1);display:grid;grid-template-columns:48px 1fr;gap:16px;transition:background .2s;cursor:default;}
.pill:first-child{border-top:2px solid rgba(10,10,10,0.1);}
.pill:hover{background:rgba(255,214,0,0.08);}
.pill-n{font-family:'Montserrat',sans-serif;font-size:1.6rem;color:rgba(10,10,10,0.1);line-height:1;}
.pill h3{font-family:'Montserrat',sans-serif;font-weight:700;font-size:0.95rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--K);margin-bottom:6px;}
.pill p{font-size:0.82rem;line-height:1.65;color:var(--K3);}

/* ——— PAGINATION ——— */
.pagination{
  display:flex;align-items:center;justify-content:center;gap:4px;
  padding:48px;border-top:3px solid var(--K);
}
.pg-btn{
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border:2px solid rgba(10,10,10,0.12);
  font-family:'Montserrat',sans-serif;font-weight:700;
  font-size:0.8rem;letter-spacing:0.08em;color:var(--K);
  text-decoration:none;transition:all .2s;
}
.pg-btn:hover,.pg-btn.active{background:var(--K);color:var(--W);border-color:var(--K);}

/* ——— SCROLL TO TOP ——— */
#scrollTop{
  position:fixed;bottom:24px;right:24px;z-index:500;
  width:48px;height:48px;background:var(--K);border:2px solid var(--K);
  display:flex;align-items:center;justify-content:center;
  color:var(--W);font-size:1.1rem;cursor:pointer;
  opacity:0;pointer-events:none;
  transition:opacity .35s,background .2s,color .2s;
}
#scrollTop.visible{opacity:1;pointer-events:auto;}
#scrollTop:hover{background:var(--Y);color:var(--K);}

/* ——— CHATBOT WIDGET ——— */
#chatWidget{position:fixed;bottom:24px;right:80px;z-index:500;}
.chat-btn-wrap{position:relative;}
#chatBtn{
  width:48px;height:48px;background:var(--Y);border:2px solid var(--K);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:1.3rem;
  transition:background .2s,color .2s;
}
#chatBtn:hover{background:var(--K);color:var(--Y);}
#chatPanel{
  position:absolute;bottom:60px;right:0;
  width:300px;background:var(--W);
  border:3px solid var(--K);
  display:none;flex-direction:column;
  box-shadow:4px 4px 0 var(--K);
}
#chatPanel.open{display:flex;}
.chat-header{
  background:var(--K);color:var(--W);
  padding:14px 18px;
  display:flex;align-items:center;justify-content:space-between;
}
.chat-header-title{
  font-family:'Montserrat',sans-serif;font-weight:700;
  font-size:0.75rem;letter-spacing:0.1em;text-transform:uppercase;
}
.chat-close{
  background:none;border:none;color:var(--W);
  cursor:pointer;font-size:1.3rem;line-height:1;
  padding:0;transition:color .2s;
}
.chat-close:hover{color:var(--Y);}
.chat-messages{
  flex:1;overflow-y:auto;padding:14px;
  display:flex;flex-direction:column;gap:10px;
  max-height:220px;min-height:80px;
}
.chat-msg{
  padding:9px 13px;font-size:0.8rem;line-height:1.55;
  max-width:90%;font-family:'Montserrat',sans-serif;
}
.chat-msg.bot{
  background:rgba(10,10,10,0.05);color:var(--K);
  align-self:flex-start;border-left:3px solid var(--Y);
}
.chat-msg.user{
  background:var(--K);color:var(--W);
  align-self:flex-end;
}
.chat-msg a{color:var(--Y);text-decoration:none;font-weight:700;}
.chat-options{
  padding:10px 14px;border-top:2px solid rgba(10,10,10,0.08);
  display:flex;flex-direction:column;gap:5px;
}
.chat-opt{
  padding:7px 12px;border:2px solid rgba(10,10,10,0.1);
  font-family:'Montserrat',sans-serif;font-weight:600;
  font-size:0.65rem;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--K3);cursor:pointer;background:transparent;text-align:left;
  transition:all .2s;
}
.chat-opt:hover{background:var(--K);color:var(--W);border-color:var(--K);}

@media(max-width:540px){
  #chatWidget{right:76px;bottom:20px;}
  #chatPanel{position:fixed;width:calc(100vw - 32px);right:16px;left:16px;bottom:80px;}
  #scrollTop{bottom:20px;right:20px;}
}

/* ——— REVEAL ——— */
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease;}
.rv.vis{opacity:1;transform:none;}

/* ——— ANIMATIONS ——— */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.h1a{opacity:0;animation:fadeUp .7s forwards;}
.h1a:nth-child(1){animation-delay:.1s;}
.h1a:nth-child(2){animation-delay:.25s;}
.h1a:nth-child(3){animation-delay:.4s;}
.h1a:nth-child(4){animation-delay:.55s;}
.h1a:nth-child(5){animation-delay:.7s;}
.h1a:nth-child(6){animation-delay:.85s;}

/* ——— MOBILE ——— */
@media(max-width:1100px){
  .team-grid{grid-template-columns:repeat(2,1fr);}
  .team-grid .tm-card:nth-child(2n){border-right:none;}
}
@media(max-width:880px){
  /* NAV */
  nav[aria-label="Navigation principale"]{display:flex;justify-content:space-between;padding:0 20px;height:56px;}
  .n-left{display:none;}
  .n-right{display:none;}
  .n-burger{display:flex;}
  /* BREADCRUMB */
  .breadcrumb{padding:12px 20px;margin-top:56px;}
  /* HERO PAGES */
  .page-hero{padding:48px 24px 56px;}
  /* SECTION HEADER GRID */
  .sec-header{grid-template-columns:1fr;padding:48px 24px 36px;gap:20px;}
  /* SERVICES */
  .services-header{grid-template-columns:1fr;gap:20px;padding:40px 24px;}
  .srv-grid{grid-template-columns:1fr;}
  .srv{border-right:none;}
  /* CLIENTS */
  .clients-header{grid-template-columns:1fr;gap:24px;padding:48px 24px;}
  .clients-grid{grid-template-columns:1fr;}
  .cl-card{border-right:none;border-bottom:3px solid var(--K);}
  /* STATEMENT */
  .stmt{grid-template-columns:1fr;gap:36px;padding:48px 24px;}
  /* WHY */
  .why-header{padding:48px 24px 36px;}
  .wi{grid-template-columns:48px 1fr;gap:16px;padding:28px 24px;}
  .wi-d{display:none;}
  /* CONTACT */
  .contact-grid{grid-template-columns:1fr;}
  .contact-left{border-right:none;border-bottom:3px solid var(--K);padding:48px 24px;}
  .contact-right{padding:48px 24px;}
  .fr2{grid-template-columns:1fr;}
  /* TEAM */
  .team-grid{grid-template-columns:1fr 1fr;}
  .team-grid .tm-card:nth-child(2n){border-right:none;}
  /* BLOG */
  .blog-grid{grid-template-columns:1fr;}
  .bl-card{border-right:none;}
  /* ARTICLE */
  .article-layout{grid-template-columns:1fr;}
  .article-main{border-right:none;padding:40px 24px;}
  .article-sidebar{padding:40px 24px;border-top:3px solid var(--K);}
  /* FOOTER */
  .footer-top{grid-template-columns:1fr 1fr;}
  .footer-bottom{flex-direction:column;gap:16px;text-align:center;padding:24px;}
  .ft-col{padding:36px 24px;}
  /* PAGINATION */
  .pagination{padding:32px 24px;}
  /* CURSOR — masqué sur tactile */
  #cur,#curT{display:none;}
  /* Restaurer le curseur natif sur mobile */
  body{cursor:auto;}
  .fi{cursor:text;}
  select.fi{cursor:pointer;}
  .fsub,.btn-K,.btn-Y,.n-cta,.btn-ghost,.n-burger,
  .pf-btn,.bc-btn,.cf-radio-btn,.cf-budget-btn,
  .cl-dot,.cl-nav-btn,.pg-btn,.faq-q,.cl-logo-item{cursor:pointer;}
}
@media(max-width:540px){
  nav[aria-label="Navigation principale"]{height:52px;}
  .n-overlay{top:52px;}
  .team-grid{grid-template-columns:1fr;}
  .team-grid .tm-card{border-right:none;}
  .footer-top{grid-template-columns:1fr;}
  .n-logo{font-size:1.6rem;}
  .h2-display{font-size:clamp(2.2rem,7vw,3.5rem);}
  .ph-h1{font-size:clamp(2.8rem,10vw,5rem);}
  /* Sections padding réduit sur très petits écrans */
  .sec-header{padding:40px 20px 28px;}
  .page-hero{padding:40px 20px 48px;}
  .breadcrumb{padding:10px 20px;}
  .services-header{padding:32px 20px;}
  .why-header,.clients-header{padding:40px 20px 28px;}
  .footer-bottom{padding:20px;}
  /* Art stats empilés */
  .art-stat-row{grid-template-columns:1fr !important;}
}

