/* ══════════════════════════════════════════════════════════════
   KreaGlobe — système visuel commun aux 3 sites de l'écosystème
   kreaglobe.com · tech.kreaglobe.com · brand.kreaglobe.com
   Palette officielle (deck rebranding 2026)
   ══════════════════════════════════════════════════════════════ */

:root{
  /* — palette de marque, valeurs exactes du deck — */
  --noir:#17191A;
  --sapin:#13521A;
  --vif:#74E55C;
  --menthe:#C6FFC6;
  --blanc:#F2FCF2;

  /* — dérivés utilitaires (teintes de la marque, aucune couleur étrangère) — */
  --ink:#0B0D0C;          /* noir profond, fond des univers sombres */
  --ink-2:#101312;        /* surface sombre 1 */
  --ink-3:#181C1A;        /* surface sombre 2 */
  --sapin-d:#0C3311;      /* sapin assombri */
  --sapin-l:#1A6E24;      /* sapin éclairci */

  /* — typographie — */
  --dpl:'Lexend',system-ui,sans-serif;
  --txt:'Inter',system-ui,sans-serif;

  /* — rythme — */
  --pad:clamp(20px,5vw,64px);
  --sec:clamp(78px,9.2vw,140px);
  --max:1280px;
  --r:14px;

  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--txt);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--vif);color:var(--noir)}

/* ── conteneur ───────────────────────────────────────────── */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.sec{padding-block:var(--sec)}

/* ── typographie ─────────────────────────────────────────── */
.d1{font-family:var(--dpl);font-weight:800;font-size:clamp(2.6rem,7.4vw,6.4rem);line-height:.96;letter-spacing:-.045em}
.d2{font-family:var(--dpl);font-weight:800;font-size:clamp(2.1rem,4.6vw,4rem);line-height:1.02;letter-spacing:-.038em}
.d3{font-family:var(--dpl);font-weight:700;font-size:clamp(1.35rem,2.2vw,1.9rem);line-height:1.14;letter-spacing:-.025em}
.lead{font-size:clamp(1.02rem,1.35vw,1.2rem);line-height:1.7;opacity:.78}
.tiny{font-size:.72rem;line-height:1.5}

/* étiquette de section : mono-ish, lettrage large */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--dpl);font-weight:700;
  font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;
}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.5}

/* ── la marque (SVG inline) ──────────────────────────────── */
.kg-mark{width:1em;height:1em;flex:none;overflow:visible}
.kg-star{fill:var(--vif)}
.kg-ring{color:var(--blanc)}

.kg-lockup{display:inline-flex;align-items:center;gap:.55em;font-family:var(--dpl);font-weight:800;letter-spacing:-.03em;line-height:1}
.kg-lockup .kg-mark{font-size:1.55em}

/* ── barre de navigation (identique sur les 3 sites) ─────── */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:900;
  display:flex;align-items:center;gap:clamp(12px,2vw,28px);
  padding:14px var(--pad);
  transition:background .4s var(--ease),border-color .4s var(--ease),backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:color-mix(in srgb,var(--nav-bg,var(--ink)) 82%,transparent);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom-color:color-mix(in srgb,currentColor 12%,transparent);
}
.nav-home{font-size:1rem}
.nav-home .kg-mark{transition:transform .6s var(--ease)}
.nav-home:hover .kg-mark{transform:rotate(90deg)}

/* pastille d'univers affichée à côté du logo sur les pôles */
.nav-badge{
  font-family:var(--dpl);font-weight:700;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.42em .8em;border-radius:99px;border:1px solid currentColor;opacity:.85;
}
.nav-links{display:flex;align-items:center;gap:clamp(14px,1.8vw,26px);margin-left:auto}
.nav-links a{
  font-size:.85rem;font-weight:500;opacity:.72;
  transition:opacity .25s;position:relative;padding-block:4px;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav-links a:hover{opacity:1}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-links a[aria-current]{opacity:1}

.btn-nav{
  font-family:var(--dpl);font-weight:700;font-size:.8rem;letter-spacing:-.01em;
  background:var(--vif);color:var(--noir);
  padding:.66em 1.15em;border-radius:99px;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.btn-nav:hover{transform:translateY(-2px);box-shadow:0 10px 26px -8px var(--vif)}

.burger{display:none;margin-left:auto;width:38px;height:38px;place-items:center}
.burger span{display:block;width:20px;height:1.5px;background:currentColor;transition:transform .35s var(--ease),opacity .2s}
.burger span+span{margin-top:5px}
.nav.is-open .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav.is-open .burger span:nth-child(2){opacity:0}
.nav.is-open .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

@media(max-width:860px){
  .burger{display:grid}
  .nav-links{
    position:fixed;inset:0;margin:0;
    flex-direction:column;justify-content:center;gap:26px;
    background:var(--nav-bg,var(--ink));
    font-size:1.4rem;
    clip-path:inset(0 0 100% 0);transition:clip-path .6s var(--ease);
  }
  .nav.is-open .nav-links{clip-path:inset(0 0 0 0)}
  .nav-links a{font-size:1.3rem;font-family:var(--dpl);font-weight:700;opacity:1}
  .nav-links .btn-nav{font-size:1rem}
}

/* ── boutons ─────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:.65em;
  font-family:var(--dpl);font-weight:700;font-size:.92rem;letter-spacing:-.01em;
  padding:1em 1.6em;border-radius:99px;
  transition:transform .4s var(--ease),background .3s,color .3s,box-shadow .4s var(--ease);
  will-change:transform;
}
.btn svg{width:1em;height:1em;transition:transform .4s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn-solid{background:var(--vif);color:var(--noir)}
.btn-solid:hover{transform:translateY(-3px);box-shadow:0 16px 34px -12px var(--vif)}
.btn-ghost{border:1px solid color-mix(in srgb,currentColor 28%,transparent)}
.btn-ghost:hover{background:color-mix(in srgb,currentColor 8%,transparent);transform:translateY(-3px)}
/* lien fléché souligné */
.link-a{display:inline-flex;align-items:center;gap:.5em;font-family:var(--dpl);font-weight:700;font-size:.86rem;
  border-bottom:1px solid color-mix(in srgb,currentColor 35%,transparent);padding-bottom:.25em}
.link-a svg{width:.85em;height:.85em;transition:transform .35s var(--ease)}
.link-a:hover svg{transform:translate(4px,-4px)}

/* ── révélation au scroll (IntersectionObserver, sans rAF) ── */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}
.rv-d4{transition-delay:.32s}.rv-d5{transition-delay:.4s}.rv-d6{transition-delay:.48s}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
/* filet de sécurité : si JS ne tourne pas, tout est visible */
.no-js .rv{opacity:1;transform:none}

/* ── pied de page ────────────────────────────────────────── */
.foot{padding:clamp(56px,7vw,88px) 0 32px;border-top:1px solid color-mix(in srgb,currentColor 12%,transparent)}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px 28px}
.foot h4{font-family:var(--dpl);font-weight:700;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;opacity:.5;margin-bottom:16px}
.foot ul{list-style:none;display:grid;gap:9px}
.foot a{font-size:.9rem;opacity:.72;transition:opacity .25s}
.foot a:hover{opacity:1}
.foot-bot{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:center;
  margin-top:clamp(40px,6vw,72px);padding-top:24px;border-top:1px solid color-mix(in srgb,currentColor 10%,transparent);
  font-size:.76rem;opacity:.5}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}}
/* bandeau de contact du pied de page */
.foot-ct{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;
  padding:clamp(22px,3vw,30px) 0 clamp(18px,2.4vw,24px);margin-top:clamp(30px,4.4vw,44px);
  border-top:1px solid color-mix(in srgb,currentColor 10%,transparent)}
.foot-ct a,.foot-ct span{display:inline-flex;align-items:center;gap:.6em;
  font-size:.86rem;opacity:.68;transition:opacity .25s,color .25s}
.foot-ct a:hover{opacity:1;color:var(--vif)}
.foot-ct svg{width:15px;height:15px;flex:none}
.foot-ct .sep{width:1px;height:14px;background:currentColor;opacity:.16;padding:0}
.foot-ct + .foot-bot{margin-top:clamp(16px,2.4vw,28px)}
@media(max-width:760px){.foot-ct{gap:8px 18px}.foot-ct .sep{display:none}}

/* ── bouton WhatsApp flottant (présent partout) ──────────── */
.wa{
  position:fixed;right:clamp(14px,3vw,26px);bottom:clamp(14px,3vw,26px);z-index:800;
  width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--vif);color:var(--noir);
  box-shadow:0 12px 30px -10px rgba(0,0,0,.6);
  transition:transform .4s var(--ease);
}
.wa:hover{transform:scale(1.08) rotate(-6deg)}
.wa svg{width:26px;height:26px}

/* ── fil d'Ariane d'écosystème (micro-pages) ─────────────── */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:.55em;font-size:.76rem;opacity:.62;font-weight:500}
.crumb a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
.crumb .sep{opacity:.45}

/* ── grain léger, appliqué en overlay sur les fonds sombres ─ */
.grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}