/*
 Theme Name: Kimyacar Theme
 Theme URI: https://kimyacar.com
 Author: MALSY-NIGER MALONGO
 Author URI: https://kimyacar.com
 Description: Thème personnalisé KimyaCar (landing app taxi).
 Version: 1.0
 License: GNU General Public License v2 or later
 Text Domain: kimyacar
*/

/* =========================
   VARIABLES DE COULEURS
   ========================= */
:root{
  --kc-gold:      #F9A602;  /* Orange */
  --kc-gold-dark: #FFD800;  /* Jaune */
  --kc-dark:      #000000;  /* noir */
  --kc-gray:      #2B2B2B;  /* gris foncé */
  --kc-light:     #EDEDED;  /* gris clair */
}

/* =========================
   BASE GLOBALE
   ========================= */
*{ box-sizing: border-box; }

body{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Montserrat, sans-serif;
  color: var(--kc-dark);
}

.text-primary{ color: var(--kc-gold) !important; }

section{ scroll-margin-top: 84px; }

.section-title{
  font-weight: 800;
  margin-bottom: 0.5rem;
}

.section-subtitle{
  color: #6c757d;
}

/* =========================================================
   HEADER — Fix logo qui pousse le menu (mobile)
   ========================================================= */

/* 1) Toujours une seule ligne : logo à gauche, toggler à droite */
.navbar .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* 2) Le brand peut rétrécir (important) */
.navbar .kc-brand{
  min-width: 0;          /* permet le shrink */
  flex: 1 1 auto;        /* prend l’espace dispo mais peut se réduire */
}

/* 3) Logo : limite sa taille en mobile */
.navbar .kc-brand__logo{
  height: 38px;          /* ajuste si tu veux 34-40px */
  width: auto;
  max-width: 170px;      /* 🔑 empêche le push du toggler */
  display: block;
}

/* 4) Le bouton menu ne doit jamais se réduire */
.navbar .navbar-toggler{
  flex: 0 0 auto;
  margin-left: 10px;
}

/* Mobile encore plus serré */
@media (max-width: 375px){
  .navbar .kc-brand__logo{
    max-width: 140px;
    height: 34px;
  }
}

/* =========================================================
   LOGO SWAP — superposition parfaite (anti-décalage)
   Le JS ne touche pas aux <img>, il ne fait que toggle .site-header--solid
   ========================================================= */

/* conteneur logo : réserve toujours la même place */
.navbar .kc-brand{
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 38px;              /* ajuste si tu veux (38 desktop/mobile ok) */
}

/* les 2 logos : même taille, même point d’ancrage */
.navbar .kc-brand__logo{
  height: 38px;
  width: auto;
  max-width: 170px;          /* évite qu’il pousse le menu en mobile */
  display: block;
  margin: 0;
}

/* le dark est superposé EXACTEMENT sur le light */
.navbar .kc-brand__logo--dark{
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* le light sert d’ancre mais est centré pareil */
.navbar .kc-brand__logo--light{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

/* état par défaut (header transparent) */
.site-header .kc-brand__logo--light{
  opacity: 1;
  visibility: visible;
}
.site-header .kc-brand__logo--dark{
  opacity: 0;
  visibility: hidden;
}

/* état solide (scroll) */
.site-header.site-header--solid .kc-brand__logo--light{
  opacity: 0;
  visibility: hidden;
}
.site-header.site-header--solid .kc-brand__logo--dark{
  opacity: 1;
  visibility: visible;
}

/* transition douce */
.site-header .kc-brand__logo{
  transition: opacity .18s ease, visibility .18s ease;
}

/* très petits écrans */
@media (max-width: 375px){
  .navbar .kc-brand{ height: 34px; }
  .navbar .kc-brand__logo{ height: 34px; max-width: 140px; }
}


/* =========================================================
   REVEAL SECTIONS — apparition pro (1 fois)
   Bloc: vient du haut + petit bounce + fade
   ========================================================= */

/* état initial (avant entrée) */
.reveal-section{
  opacity: 0;
  transform: translateY(-18px) scale(0.99);
  filter: blur(1px);
  transition:
    opacity .65s ease,
    transform .75s cubic-bezier(.22,1.35,.36,1),
    filter .65s ease;
  will-change: opacity, transform, filter;
}

/* état visible */
.reveal-section.is-inview{
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* Petit rebond élégant (sur le bloc entier) */
.reveal-section.is-inview{
  animation: kcSectionPop .8s cubic-bezier(.22,1.35,.36,1) both;
}

@keyframes kcSectionPop{
  0%   { transform: translateY(-18px) scale(.99); }
  70%  { transform: translateY(2px) scale(1); }
  100% { transform: translateY(0) scale(1); }
}

/* ---------------------------------------------------------
   OPTION PREMIUM: micro-stagger des enfants (très léger)
   (ça reste une apparition "en bloc", juste plus vivant)
   --------------------------------------------------------- */

.reveal-section .reveal-item{
  opacity: 0;
  transform: translateY(-10px);
  transition:
    opacity .55s ease,
    transform .65s cubic-bezier(.22,1.35,.36,1);
  will-change: opacity, transform;
}

.reveal-section.is-inview .reveal-item{
  opacity: 1;
  transform: translateY(0);
}

/* Stagger automatique */
.reveal-section.is-inview .reveal-item:nth-child(1){ transition-delay: .04s; }
.reveal-section.is-inview .reveal-item:nth-child(2){ transition-delay: .10s; }
.reveal-section.is-inview .reveal-item:nth-child(3){ transition-delay: .16s; }
.reveal-section.is-inview .reveal-item:nth-child(4){ transition-delay: .22s; }
.reveal-section.is-inview .reveal-item:nth-child(5){ transition-delay: .28s; }
.reveal-section.is-inview .reveal-item:nth-child(6){ transition-delay: .34s; }

/* Accessibilité */
@media (prefers-reduced-motion: reduce){
  .reveal-section,
  .reveal-section .reveal-item{
    transition: none !important;
    animation: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
}

/* =========================================================
   BACK TO TOP — PREMIUM KIMYACAR
   ========================================================= */

.kc-back-to-top{
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1400;

  width: 52px;
  height: 52px;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background:
    linear-gradient(
      135deg,
      rgba(212,175,55,0.95),
      rgba(184,144,37,0.95)
    );

  color: white;
  border: none;

  box-shadow:
    0 18px 45px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.35);

  backdrop-filter: blur(10px);

  cursor: pointer;

  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.92);

  transition:
    opacity .35s ease,
    transform .45s cubic-bezier(.22,1.35,.36,1),
    visibility .35s ease,
    box-shadow .25s ease;
}

/* icône */
.kc-back-to-top i{
  font-size: 1rem;
  font-weight: 900;
}

/* visible */
.kc-back-to-top.is-visible{
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* hover */
.kc-back-to-top:hover{
  box-shadow:
    0 22px 60px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.45);
  transform: translateY(-2px) scale(1.02);
}

/* focus clavier */
.kc-back-to-top:focus-visible{
  outline: 3px solid rgba(212,175,55,0.55);
  outline-offset: 4px;
}

/* =========================================================
   PULSE PREMIUM — une seule fois à l’apparition
   ========================================================= */
.kc-back-to-top.is-pulse{
  animation: kcBackToTopPulse 1.4s ease-out 1;
}

@keyframes kcBackToTopPulse{
  0%{
    box-shadow:
      0 0 0 0 rgba(212,175,55,0.45),
      0 18px 45px rgba(0,0,0,0.35);
  }
  70%{
    box-shadow:
      0 0 0 14px rgba(212,175,55,0),
      0 18px 45px rgba(0,0,0,0.35);
  }
  100%{
    box-shadow:
      0 0 0 0 rgba(212,175,55,0),
      0 18px 45px rgba(0,0,0,0.35);
  }
}

/* Mobile */
@media (max-width: 575.98px){
  .kc-back-to-top{
    right: 16px;
    bottom: 16px;
    width: 48px;
    height: 48px;
  }
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce){
  .kc-back-to-top{
    transition: none !important;
    animation: none !important;
  }
}