/* =============================================================================
   KIKIFO — Design System v2
   Geist · Dark mode ultra premium · Fuchsia/Cyan
   ============================================================================= */

/* ─── 0. Geist Font ──────────────────────────────────────────────────────────*/
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

/* ─── 1. Design Tokens ───────────────────────────────────────────────────────*/
:root {
  --kk-bg:         #08080A;
  --kk-bg-2:       #0E0E12;
  --kk-surface:    #131318;
  --kk-elevated:   #1A1A22;
  --kk-elevated-2: #22222E;
  --kk-elevated-3: #2A2A38;

  --kk-primary:     #E8197A;
  --kk-primary-h:   #F02D8A;
  --kk-primary-dim: rgba(232,25,122,0.12);
  --kk-primary-glow:rgba(232,25,122,0.28);
  --kk-cyan:        #00C8F0;
  --kk-cyan-dim:    rgba(0,200,240,0.10);
  --kk-blue:        #3D8EFF;

  --kk-grad-primary: linear-gradient(135deg,#E8197A 0%,#F84BA0 100%);
  --kk-grad-cyan:    linear-gradient(135deg,#00C8F0 0%,#3D8EFF 100%);
  --kk-grad-hero:    linear-gradient(135deg,#E8197A 0%,#8A1FD4 50%,#00C8F0 100%);
  --kk-grad-card:    linear-gradient(180deg,transparent 45%,rgba(8,8,10,0.96) 100%);

  --kk-text:      #EDEDF2;
  --kk-text-2:    #9898B0;
  --kk-text-muted:#55556A;
  --kk-text-dim:  #33334A;

  --kk-border:   rgba(255,255,255,0.055);
  --kk-border-2: rgba(255,255,255,0.10);
  --kk-border-3: rgba(255,255,255,0.16);

  --kk-shadow-xs: 0 1px 3px rgba(0,0,0,0.35);
  --kk-shadow-sm: 0 2px 8px rgba(0,0,0,0.45);
  --kk-shadow-md: 0 6px 20px rgba(0,0,0,0.55);
  --kk-shadow-lg: 0 16px 48px rgba(0,0,0,0.70);
  --kk-shadow-xl: 0 32px 80px rgba(0,0,0,0.80);
  --kk-glow-sm:   0 0 20px var(--kk-primary-glow);

  --kk-r-xs:  3px;  --kk-r-sm:  6px;  --kk-r-md:  10px; --kk-r-lg:  14px;
  --kk-r-xl:  20px; --kk-r-2xl: 28px; --kk-r-full:9999px;

  --kk-1:4px;   --kk-2:8px;   --kk-3:12px;  --kk-4:16px;
  --kk-5:20px;  --kk-6:24px;  --kk-8:32px;  --kk-10:40px;
  --kk-12:48px; --kk-16:64px; --kk-20:80px; --kk-24:96px;

  --kk-font:      'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
  --kk-font-mono: 'Geist Mono', 'JetBrains Mono', monospace;

  --kk-ease:        cubic-bezier(0.4,0,0.2,1);
  --kk-ease-spring: cubic-bezier(0.34,1.4,0.64,1);
  --kk-ease-out:    cubic-bezier(0,0,0.2,1);
  --kk-t-fast:100ms; --kk-t-base:180ms; --kk-t-slow:320ms;

  --kk-header-h: 56px;
  --kk-layout-w: 1200px;  /* Surchargé par le Customizer */

  --z-header:100; --z-dropdown:200; --z-overlay:300; --z-modal:400; --z-toast:500;
}

/* ─── 2. Reset ───────────────────────────────────────────────────────────────*/
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:15px;-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth;}
body{background:var(--kk-bg);color:var(--kk-text);font-family:var(--kk-font);font-size:1rem;line-height:1.6;min-height:100dvh;overflow-x:hidden;font-feature-settings:'kern'1,'liga'1,'calt'1;}
::selection{background:var(--kk-primary-dim);color:var(--kk-primary-h);}
:focus-visible{outline:1.5px solid var(--kk-primary);outline-offset:2px;border-radius:var(--kk-r-xs);}
img,video{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
button{cursor:pointer;border:none;background:none;font:inherit;color:inherit;}
input,textarea,select{font:inherit;}
ul,ol{list-style:none;}

/* ─── 3. Typographie ─────────────────────────────────────────────────────────*/
h1,h2,h3,h4,h5,h6{font-family:var(--kk-font);line-height:1.15;letter-spacing:-0.025em;color:var(--kk-text);font-weight:600;}
h1{font-size:clamp(1.75rem,4vw,3rem);letter-spacing:-0.03em;font-weight:700;}
h2{font-size:clamp(1.375rem,3vw,2.25rem);}
h3{font-size:clamp(1.125rem,2vw,1.625rem);}
h4{font-size:1.125rem;} h5{font-size:1rem;} h6{font-size:0.875rem;font-weight:500;}
p{color:var(--kk-text-2);line-height:1.72;font-size:0.9375rem;}

.text-gradient{background:var(--kk-grad-hero);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.text-primary{color:var(--kk-primary);} .text-cyan{color:var(--kk-cyan);} .text-muted{color:var(--kk-text-muted);}
.text-sm{font-size:0.8125rem;} .text-xs{font-size:0.75rem;letter-spacing:0.01em;}
.mono{font-family:var(--kk-font-mono);font-size:0.875em;}

/* ─── 4. Layout ──────────────────────────────────────────────────────────────*/
.app-wrapper{min-height:100dvh;display:flex;flex-direction:column;}
.site-main{flex:1;}
.container{width:100%;max-width:var(--kk-layout-w);margin:0 auto;padding-inline:var(--kk-5);}
.container--sm{max-width:640px;} .container--lg{max-width:calc(var(--kk-layout-w) + 160px);}
.container--center{display:flex;align-items:center;justify-content:center;min-height:60dvh;}
.section{padding-block:var(--kk-16);} .section--sm{padding-block:var(--kk-10);} .section--lg{padding-block:var(--kk-24);}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--kk-6);}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--kk-5);}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--kk-4);}
.grid-auto{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--kk-5);}
@media(max-width:768px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}.container{padding-inline:var(--kk-4);}}

/* ─── 5. Header ──────────────────────────────────────────────────────────────*/
.site-header{
  position:sticky;top:0;z-index:var(--z-header);height:var(--kk-header-h);
  background:rgba(8,8,10,0.80);
  backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);
  border-bottom:1px solid transparent;
  transition:border-color var(--kk-t-base),background var(--kk-t-base),transform var(--kk-t-base);
  will-change:transform;
}
.site-header--scrolled{border-bottom-color:var(--kk-border);background:rgba(8,8,10,0.95);}
.site-header--hidden{transform:translateY(-100%);}
.site-header__inner{display:flex;align-items:center;height:100%;max-width:var(--kk-layout-w);margin:0 auto;padding-inline:var(--kk-5);gap:var(--kk-4);}
.site-header__logo{display:flex;align-items:center;flex-shrink:0;}
.site-header__logo-text{font-family:var(--kk-font);font-size:1.1875rem;font-weight:700;letter-spacing:-0.04em;background:var(--kk-grad-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.site-header__nav{flex:1;display:flex;justify-content:center;}
.nav__list{display:flex;align-items:center;gap:2px;}
.nav__link{padding:5px var(--kk-3);font-size:0.8125rem;font-weight:500;color:var(--kk-text-muted);border-radius:var(--kk-r-sm);transition:color var(--kk-t-fast),background var(--kk-t-fast);letter-spacing:0.005em;}
.nav__link:hover{color:var(--kk-text-2);background:rgba(255,255,255,0.045);}
.nav__item--active .nav__link{color:var(--kk-text);background:rgba(255,255,255,0.06);}
.site-header__actions{display:flex;align-items:center;gap:var(--kk-2);flex-shrink:0;margin-left:auto;}
.site-header__burger{display:none;flex-direction:column;justify-content:center;gap:4.5px;width:36px;height:36px;padding:var(--kk-2);border-radius:var(--kk-r-sm);transition:background var(--kk-t-fast);}
.site-header__burger:hover{background:rgba(255,255,255,0.055);}
.burger__line{display:block;width:16px;height:1.5px;background:var(--kk-text-muted);border-radius:2px;transition:transform var(--kk-t-base),opacity var(--kk-t-fast);}
@media(max-width:768px){.site-header__nav{display:none;}.site-header__burger{display:flex;}}

/* ─── 6. Boutons premium ─────────────────────────────────────────────────────*/
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--kk-2);
  padding:6px 14px;
  font-family:var(--kk-font);font-size:0.8125rem;font-weight:500;line-height:1;letter-spacing:0.005em;
  border-radius:var(--kk-r-full);border:1px solid transparent;
  cursor:pointer;white-space:nowrap;user-select:none;-webkit-tap-highlight-color:transparent;
  transition:transform var(--kk-t-fast) var(--kk-ease-spring),box-shadow var(--kk-t-fast),background var(--kk-t-fast),border-color var(--kk-t-fast),opacity var(--kk-t-fast);
  position:relative;overflow:hidden;
}
.btn::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,0);transition:background var(--kk-t-fast);border-radius:inherit;}
.btn:hover::before{background:rgba(255,255,255,0.055);}
.btn:active{transform:scale(0.975);}
.btn:disabled{opacity:0.4;pointer-events:none;}

.btn--primary{background:var(--kk-grad-primary);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,0.1) inset,0 2px 10px rgba(232,25,122,0.20);}
.btn--primary:hover{box-shadow:0 1px 0 rgba(255,255,255,0.1) inset,0 4px 18px rgba(232,25,122,0.36);transform:translateY(-1px);}

.btn--ghost{background:rgba(255,255,255,0.04);border-color:var(--kk-border-2);color:var(--kk-text-2);}
.btn--ghost:hover{background:rgba(255,255,255,0.07);border-color:var(--kk-border-3);color:var(--kk-text);}

.btn--outline{background:transparent;border-color:var(--kk-border-2);color:var(--kk-text-2);}
.btn--outline:hover{border-color:var(--kk-primary);color:var(--kk-primary);background:var(--kk-primary-dim);}

.btn--accent{background:var(--kk-grad-cyan);color:#08080A;font-weight:600;box-shadow:0 2px 10px rgba(0,200,240,0.18);}
.btn--danger{background:rgba(255,60,60,0.08);border-color:rgba(255,60,60,0.18);color:#FF7070;}
.btn--danger:hover{background:rgba(255,60,60,0.14);}

.btn--xs{padding:3px 9px;font-size:0.7rem;}
.btn--sm{padding:5px 12px;font-size:0.7875rem;}
.btn--md{padding:8px 18px;font-size:0.875rem;}
.btn--lg{padding:10px 24px;font-size:0.9375rem;font-weight:600;}
.btn--xl{padding:12px 32px;font-size:1rem;font-weight:600;}
.btn--full{width:100%;}

.btn--loading{pointer-events:none;}
.btn--loading::after{content:'';width:12px;height:12px;border:1.5px solid rgba(255,255,255,0.22);border-top-color:rgba(255,255,255,0.8);border-radius:50%;animation:spin 0.65s linear infinite;}

/* ─── 7. Icon button & notifs ────────────────────────────────────────────────*/
.btn-icon{position:relative;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--kk-r-sm);color:var(--kk-text-muted);transition:color var(--kk-t-fast),background var(--kk-t-fast);}
.btn-icon:hover{background:rgba(255,255,255,0.06);color:var(--kk-text-2);}
.notif-badge{position:absolute;top:3px;right:3px;min-width:15px;height:15px;background:var(--kk-primary);color:#fff;font-size:0.6rem;font-weight:700;border-radius:var(--kk-r-full);display:flex;align-items:center;justify-content:center;padding:0 3px;border:1.5px solid var(--kk-bg);animation:pulse-dot 2.5s infinite;}

/* ─── 8. Avatar ──────────────────────────────────────────────────────────────*/
.user-avatar-btn{display:flex;align-items:center;gap:var(--kk-2);padding:3px;border-radius:var(--kk-r-full);transition:background var(--kk-t-fast);}
.user-avatar-btn:hover{background:rgba(255,255,255,0.055);}
.user-avatar{width:30px;height:30px;border-radius:var(--kk-r-full);object-fit:cover;border:1.5px solid var(--kk-border-2);transition:border-color var(--kk-t-fast);}
.user-avatar-btn:hover .user-avatar{border-color:var(--kk-primary);}
.avatar{border-radius:var(--kk-r-full);object-fit:cover;}
.avatar--sm{width:28px;height:28px;} .avatar--md{width:44px;height:44px;} .avatar--lg{width:72px;height:72px;}
.avatar--xl{width:112px;height:112px;} .avatar--2xl{width:152px;height:152px;}
.avatar--ring-primary{border:2px solid var(--kk-primary);box-shadow:0 0 0 3px var(--kk-primary-dim);}

/* ─── 9. Badges ──────────────────────────────────────────────────────────────*/
.kk-badge{display:inline-flex;align-items:center;padding:2px 7px;font-size:0.625rem;font-weight:600;letter-spacing:0.07em;text-transform:uppercase;border-radius:var(--kk-r-full);line-height:1;}
.badge--free{background:rgba(255,255,255,0.07);color:var(--kk-text-muted);}
.badge--basic{background:rgba(61,142,255,0.14);color:#5FA8FF;border:1px solid rgba(61,142,255,0.22);}
.badge--premium{background:var(--kk-primary-dim);color:#F55FAA;border:1px solid rgba(232,25,122,0.22);}
.badge--vip{background:var(--kk-grad-primary);color:#fff;box-shadow:var(--kk-glow-sm);}

/* ─── 10. Dropdown ───────────────────────────────────────────────────────────*/
.site-header__user{position:relative;}
.user-dropdown{position:absolute;top:calc(100% + 6px);right:0;min-width:210px;background:var(--kk-elevated);border:1px solid var(--kk-border-2);border-radius:var(--kk-r-lg);box-shadow:var(--kk-shadow-xl),0 0 0 1px rgba(255,255,255,0.02) inset;overflow:hidden;z-index:var(--z-dropdown);}
.dropdown-header{padding:var(--kk-3) var(--kk-4);border-bottom:1px solid var(--kk-border);}
.dropdown-divider{height:1px;background:var(--kk-border);margin:2px 0;}
.dropdown-item{display:flex;align-items:center;gap:var(--kk-3);padding:7px var(--kk-4);font-size:0.8125rem;color:var(--kk-text-2);transition:background var(--kk-t-fast),color var(--kk-t-fast);}
.dropdown-item:hover{background:rgba(255,255,255,0.04);color:var(--kk-text);}
.dropdown-item--danger:hover{color:#FF7070;}

/* ─── 11. Profile cards ──────────────────────────────────────────────────────*/
.profile-card{position:relative;background:var(--kk-surface);border:1px solid var(--kk-border);border-radius:var(--kk-r-xl);overflow:hidden;cursor:pointer;box-shadow:var(--kk-shadow-xs);transition:transform var(--kk-t-base) var(--kk-ease-spring),box-shadow var(--kk-t-base),border-color var(--kk-t-base);}
.profile-card:hover{transform:translateY(-3px);box-shadow:var(--kk-shadow-lg),0 0 0 1px var(--kk-border-2);border-color:var(--kk-border-2);}
.profile-card__glow{position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,var(--kk-primary-dim),transparent 65%);opacity:0;transition:opacity var(--kk-t-base);pointer-events:none;}
.profile-card:hover .profile-card__glow{opacity:1;}
.profile-card__image{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--kk-elevated);}
.profile-card__image img{width:100%;height:100%;object-fit:cover;transition:transform var(--kk-t-slow);}
.profile-card:hover .profile-card__image img{transform:scale(1.035);}
.profile-card__image-overlay{position:absolute;inset:0;background:var(--kk-grad-card);}
.profile-card__body{padding:var(--kk-3) var(--kk-4) var(--kk-4);}
.profile-card__name{font-size:0.9375rem;font-weight:600;color:var(--kk-text);display:flex;align-items:center;gap:var(--kk-2);letter-spacing:-0.01em;}
.profile-card__meta{display:flex;align-items:center;gap:var(--kk-3);margin-top:3px;font-size:0.75rem;color:var(--kk-text-muted);}
.profile-card__distance{display:flex;align-items:center;gap:3px;color:var(--kk-cyan);font-weight:500;}
.profile-card__slots{display:flex;gap:var(--kk-1);margin-top:var(--kk-3);flex-wrap:wrap;}
.slot-pill{padding:3px 10px;background:var(--kk-elevated);border:1px solid var(--kk-border);border-radius:var(--kk-r-full);font-size:0.7rem;font-weight:500;color:var(--kk-text-muted);transition:all var(--kk-t-fast);}
.slot-pill--active,.slot-pill:hover{background:var(--kk-primary-dim);border-color:rgba(232,25,122,0.3);color:#F55FAA;}
.profile-card__actions{display:flex;gap:var(--kk-2);margin-top:var(--kk-3);padding-top:var(--kk-3);border-top:1px solid var(--kk-border);}
.online-dot{width:8px;height:8px;background:#22C55E;border-radius:50%;border:1.5px solid var(--kk-bg);animation:pulse-dot 2.5s infinite;}

/* ─── 12. Modales ────────────────────────────────────────────────────────────*/
.modal-overlay{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:flex-end;justify-content:center;padding:var(--kk-4);}
@media(min-width:640px){.modal-overlay{align-items:center;}}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.modal-window{position:relative;width:100%;max-width:420px;max-height:92dvh;overflow-y:auto;background:var(--kk-surface);border:1px solid var(--kk-border-2);border-radius:var(--kk-r-2xl);box-shadow:var(--kk-shadow-xl),0 0 0 1px rgba(255,255,255,0.03) inset;padding:var(--kk-8) var(--kk-6);scrollbar-width:none;}
.modal-window::-webkit-scrollbar{display:none;}
@media(max-width:639px){.modal-window{border-radius:var(--kk-r-2xl) var(--kk-r-2xl) var(--kk-r-lg) var(--kk-r-lg);max-height:95dvh;padding:var(--kk-6) var(--kk-5);}}
.modal-close{position:absolute;top:var(--kk-4);right:var(--kk-4);width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:var(--kk-r-sm);color:var(--kk-text-muted);transition:background var(--kk-t-fast),color var(--kk-t-fast);}
.modal-close:hover{background:rgba(255,255,255,0.06);color:var(--kk-text-2);}
.modal-header{text-align:center;margin-bottom:var(--kk-5);}
.modal-logo{font-family:var(--kk-font);font-size:1.25rem;font-weight:700;letter-spacing:-0.04em;background:var(--kk-grad-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.modal-tabs{position:relative;display:flex;background:var(--kk-elevated);border-radius:var(--kk-r-full);padding:3px;margin-bottom:var(--kk-5);border:1px solid var(--kk-border);}
.modal-tab{flex:1;padding:6px var(--kk-3);font-size:0.8125rem;font-weight:500;color:var(--kk-text-muted);border-radius:var(--kk-r-full);transition:color var(--kk-t-base);position:relative;z-index:1;}
.modal-tab--active{color:var(--kk-text);}
.modal-tabs__indicator{position:absolute;top:3px;bottom:3px;background:var(--kk-elevated-2);border:1px solid var(--kk-border-2);border-radius:var(--kk-r-full);box-shadow:var(--kk-shadow-xs);transition:left var(--kk-t-base) var(--kk-ease-spring),width var(--kk-t-base) var(--kk-ease-spring);}

/* ─── 13. Formulaires ────────────────────────────────────────────────────────*/
.modal-form{display:flex;flex-direction:column;gap:var(--kk-4);}
.form-group{display:flex;flex-direction:column;gap:6px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--kk-3);}
@media(max-width:420px){.form-row{grid-template-columns:1fr;}}
.form-label{font-size:0.75rem;font-weight:500;color:var(--kk-text-muted);display:flex;align-items:center;justify-content:space-between;letter-spacing:0.01em;}
.form-label-hint{font-size:0.7rem;color:var(--kk-text-dim);font-weight:400;}
.form-input{width:100%;padding:8px 12px;background:var(--kk-elevated);border:1px solid var(--kk-border-2);border-radius:var(--kk-r-md);color:var(--kk-text);font-size:0.875rem;line-height:1.5;transition:border-color var(--kk-t-fast),box-shadow var(--kk-t-fast),background var(--kk-t-fast);-webkit-appearance:none;}
.form-input:focus{outline:none;border-color:var(--kk-primary);background:var(--kk-elevated-2);box-shadow:0 0 0 3px var(--kk-primary-dim);}
.form-input::placeholder{color:var(--kk-text-dim);}
.form-input--error{border-color:rgba(255,80,80,0.5);box-shadow:0 0 0 2px rgba(255,80,80,0.08);}
.form-input-wrapper{position:relative;}
.form-input-wrapper .form-input{padding-right:40px;}
.form-input-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--kk-text-muted);padding:3px;font-size:0.9rem;transition:color var(--kk-t-fast);}
.form-input-toggle:hover{color:var(--kk-text-2);}
.form-options{display:flex;align-items:center;justify-content:space-between;gap:var(--kk-3);}
.form-checkbox{display:flex;align-items:flex-start;gap:var(--kk-2);cursor:pointer;font-size:0.8125rem;color:var(--kk-text-2);line-height:1.45;}
.form-checkbox input[type="checkbox"]{width:15px;height:15px;flex-shrink:0;margin-top:1px;border:1px solid var(--kk-border-2);border-radius:3px;background:var(--kk-elevated);cursor:pointer;accent-color:var(--kk-primary);}
.form-link{color:var(--kk-primary);font-size:0.8125rem;font-weight:500;}
.form-link:hover{color:var(--kk-primary-h);}
.form-error-global{background:rgba(255,70,70,0.08);border:1px solid rgba(255,70,70,0.18);border-radius:var(--kk-r-md);padding:var(--kk-3);font-size:0.8125rem;color:#FF8080;margin-bottom:2px;}
.form-field-error{font-size:0.7375rem;color:#FF7070;min-height:1em;}
.password-strength{margin-top:5px;}
.password-strength__bar{height:2px;background:var(--kk-elevated-2);border-radius:2px;overflow:hidden;margin-bottom:4px;}
.password-strength__fill{height:100%;border-radius:2px;transition:width var(--kk-t-base),background var(--kk-t-base);}
.strength-weak{background:#FF6464;} .strength-medium{background:#FFAA4A;} .strength-strong{background:#22C55E;}
.password-strength__label{font-size:0.7rem;color:var(--kk-text-muted);}

/* ─── 14. Mobile menu ────────────────────────────────────────────────────────*/
.mobile-menu{position:fixed;inset:0;z-index:calc(var(--z-header) + 1);display:flex;flex-direction:column;}
.mobile-menu__backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.68);backdrop-filter:blur(10px);}
.mobile-menu__panel{position:relative;margin-top:auto;background:var(--kk-surface);border-top:1px solid var(--kk-border-2);border-radius:var(--kk-r-2xl) var(--kk-r-2xl) 0 0;padding:var(--kk-6) var(--kk-5) calc(var(--kk-8) + env(safe-area-inset-bottom));max-height:85dvh;overflow-y:auto;}
.mobile-menu__nav .nav__list{flex-direction:column;gap:2px;align-items:stretch;}
.mobile-menu__nav .nav__link{padding:9px var(--kk-3);font-size:0.9375rem;}

/* ─── 15. 404 ────────────────────────────────────────────────────────────────*/
.error-404{text-align:center;padding:var(--kk-16) var(--kk-5);}
.error-404__code{display:block;font-family:var(--kk-font);font-size:clamp(4rem,14vw,9rem);font-weight:700;letter-spacing:-0.04em;background:var(--kk-grad-hero);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;margin-bottom:var(--kk-4);}
.error-404__title{margin-bottom:var(--kk-3);} .error-404__text{margin-bottom:var(--kk-8);color:var(--kk-text-muted);}

/* ─── 16. Footer ─────────────────────────────────────────────────────────────*/
.site-footer{border-top:1px solid var(--kk-border);padding:var(--kk-12) 0 calc(var(--kk-8) + env(safe-area-inset-bottom));margin-top:auto;}
.site-footer__inner{max-width:var(--kk-layout-w);margin:0 auto;padding-inline:var(--kk-5);display:grid;grid-template-columns:1fr auto auto;gap:var(--kk-8);align-items:start;}
.site-footer__logo-text{font-family:var(--kk-font);font-size:1.125rem;font-weight:700;letter-spacing:-0.04em;background:var(--kk-grad-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.site-footer__tagline{font-size:0.8125rem;color:var(--kk-text-muted);margin-top:5px;}
.footer-nav__list{display:flex;flex-direction:column;gap:var(--kk-2);}
.footer-nav__list .nav__link{font-size:0.8125rem;padding:3px 0;}
.site-footer__social{display:flex;gap:var(--kk-2);}
.social-link{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--kk-r-sm);background:var(--kk-elevated);border:1px solid var(--kk-border);color:var(--kk-text-muted);font-size:0.875rem;transition:all var(--kk-t-fast) var(--kk-ease-spring);}
.social-link:hover{background:var(--kk-primary-dim);border-color:rgba(232,25,122,0.28);color:#F55FAA;transform:translateY(-2px);}
.site-footer__bottom{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;padding-top:var(--kk-5);border-top:1px solid var(--kk-border);gap:var(--kk-4);flex-wrap:wrap;}
.site-footer__copyright{font-size:0.75rem;color:var(--kk-text-muted);}
.site-footer__legal{display:flex;gap:var(--kk-4);}
.site-footer__legal a{font-size:0.75rem;color:var(--kk-text-muted);transition:color var(--kk-t-fast);}
.site-footer__legal a:hover{color:var(--kk-text-2);}
@media(max-width:768px){
  .site-footer__inner{grid-template-columns:1fr;gap:var(--kk-5);text-align:center;}
  .site-footer__brand{display:flex;flex-direction:column;align-items:center;}
  .site-footer__nav .footer-nav__list{align-items:center;}
  .site-footer__social{justify-content:center;}
  .site-footer__bottom{flex-direction:column;align-items:center;text-align:center;}
  .site-footer__legal{justify-content:center;flex-wrap:wrap;}
}

/* ─── 17. Transitions Alpine ─────────────────────────────────────────────────*/
.modal-overlay-enter{transition:opacity var(--kk-t-base) var(--kk-ease);}
.modal-overlay-enter-start{opacity:0;} .modal-overlay-enter-end{opacity:1;}
.modal-overlay-leave{transition:opacity var(--kk-t-base) var(--kk-ease);}
.modal-overlay-leave-start{opacity:1;} .modal-overlay-leave-end{opacity:0;}
.transition-enter{transition:opacity var(--kk-t-fast) var(--kk-ease),transform var(--kk-t-fast) var(--kk-ease-spring);}
.transition-enter-start{opacity:0;transform:translateY(-4px) scale(0.98);} .transition-enter-end{opacity:1;transform:translateY(0) scale(1);}
.transition-leave{transition:opacity var(--kk-t-fast) var(--kk-ease);}
.transition-leave-start{opacity:1;} .transition-leave-end{opacity:0;}

/* ─── 18. Utilities ──────────────────────────────────────────────────────────*/
.flex{display:flex;} .flex-col{flex-direction:column;} .items-center{align-items:center;} .justify-between{justify-content:space-between;}
.gap-2{gap:var(--kk-2);} .gap-3{gap:var(--kk-3);} .gap-4{gap:var(--kk-4);}
.mt-4{margin-top:var(--kk-4);} .mt-6{margin-top:var(--kk-6);} .mb-4{margin-bottom:var(--kk-4);} .mb-6{margin-bottom:var(--kk-6);}
.p-4{padding:var(--kk-4);} .p-6{padding:var(--kk-6);}
.hidden{display:none!important;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.divider{height:1px;background:var(--kk-border);margin-block:var(--kk-6);}
.divider--glow{background:linear-gradient(90deg,transparent,var(--kk-primary-dim),transparent);}
.surface{background:var(--kk-surface);border:1px solid var(--kk-border);border-radius:var(--kk-r-xl);padding:var(--kk-5);box-shadow:var(--kk-shadow-xs);}
.surface--elevated{background:var(--kk-elevated);border-color:var(--kk-border-2);}
.skeleton{background:linear-gradient(90deg,var(--kk-elevated) 25%,var(--kk-elevated-2) 50%,var(--kk-elevated) 75%);background-size:200% 100%;animation:skeleton-wave 1.6s infinite;border-radius:var(--kk-r-sm);}

/* ─── 19. Toasts ─────────────────────────────────────────────────────────────*/
.toast-container{position:fixed;top:calc(var(--kk-header-h) + var(--kk-3));right:var(--kk-4);z-index:var(--z-toast);display:flex;flex-direction:column;gap:var(--kk-2);pointer-events:none;max-width:340px;width:calc(100vw - var(--kk-8));}
.toast{display:flex;align-items:center;gap:var(--kk-3);padding:10px var(--kk-4);background:var(--kk-elevated-2);border:1px solid var(--kk-border-2);border-radius:var(--kk-r-lg);box-shadow:var(--kk-shadow-lg);pointer-events:all;font-size:0.8125rem;animation:fade-in-up var(--kk-t-base) var(--kk-ease-out) both;}
.toast--success{border-color:rgba(34,197,94,0.22);} .toast--error{border-color:rgba(255,100,100,0.22);} .toast--info{border-color:rgba(0,200,240,0.22);}

/* ─── 20. Animations ─────────────────────────────────────────────────────────*/
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes pulse-dot{0%,100%{box-shadow:0 0 0 0 rgba(232,25,122,0.45);}50%{box-shadow:0 0 0 5px rgba(232,25,122,0);}}
@keyframes skeleton-wave{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
@keyframes fade-in-up{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
@keyframes fade-in{from{opacity:0;}to{opacity:1;}}
.animate-fade-in-up{animation:fade-in-up var(--kk-t-slow) var(--kk-ease-out) both;}
.animate-fade-in{animation:fade-in var(--kk-t-base) var(--kk-ease-out) both;}
.stagger > *{animation:fade-in-up var(--kk-t-slow) var(--kk-ease-out) both;}
.stagger > *:nth-child(1){animation-delay:0ms;} .stagger > *:nth-child(2){animation-delay:50ms;}
.stagger > *:nth-child(3){animation-delay:100ms;} .stagger > *:nth-child(4){animation-delay:150ms;}
.stagger > *:nth-child(5){animation-delay:200ms;} .stagger > *:nth-child(6){animation-delay:250ms;}

/* ─── 21. Scrollbar ──────────────────────────────────────────────────────────*/
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--kk-border-2);border-radius:4px;}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.2);}

/* ─── 22. Admin bar masquée (option B.O.) ────────────────────────────────────*/
.kikifo-hide-adminbar #wpadminbar{display:none!important;}
.kikifo-hide-adminbar html{margin-top:0!important;}

/* ─── 23. Safe areas mobile ──────────────────────────────────────────────────*/
.safe-bottom{padding-bottom:env(safe-area-inset-bottom);}
.safe-top{padding-top:env(safe-area-inset-top);}

/* ─── 24. Titlebar ───────────────────────────────────────────────────────────*/
.kk-titlebar {
  position: relative;
  min-height: var(--kk-tb-h, 100px);
  display: flex;
  align-items: center;
  overflow: hidden;
  z-index: 1;
}

/* Image de fond via CSS var */
.kk-titlebar__bg {
  position: absolute; inset: 0;
  background-image: var(--kk-tb-bg);
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
  transition: transform 8s ease-out;
  z-index: 0;
}
.kk-titlebar:hover .kk-titlebar__bg { transform: scale(1); }
.kk-titlebar--parallax .kk-titlebar__bg { background-attachment: fixed; }
.kk-titlebar--blur .kk-titlebar__bg     { filter: blur(3px); }

/* Overlay couleur ou dégradé */
.kk-titlebar__overlay {
  position: absolute; inset: 0;
  background: var(--kk-tb-overlay-bg, transparent);
  z-index: 1;
  pointer-events: none;
}

/* ── Simple ── */
.kk-titlebar--simple {
  background: var(--kk-bg-2);
  border-bottom: 1px solid var(--kk-border);
}

/* ── Standard ── */
.kk-titlebar--standard {
  background: var(--kk-bg-2);
  border-bottom: 1px solid var(--kk-border);
}
.kk-titlebar--standard::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 80px; height: 2px;
  background: var(--kk-primary);
  opacity: 0;
  transition: opacity var(--kk-t-base);
}
.kk-titlebar--standard.kk-titlebar--accent::after { opacity: 1; }

/* ── Hero ── */
.kk-titlebar--hero {
  background: var(--kk-bg);
  min-height: var(--kk-tb-h, 320px);
}
.kk-titlebar--hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--kk-tb-bg);
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
  transition: transform 8s ease-out;
  z-index: 0;
}
.kk-titlebar--hero:hover::before { transform: scale(1); }
.kk-titlebar--hero .kk-titlebar__overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,var(--kk-tb-overlay, 0.6));
  z-index: 1;
}
.kk-titlebar--hero-no-image {
  background: linear-gradient(135deg, var(--kk-bg) 0%, var(--kk-bg-2) 100%);
}
.kk-titlebar--hero-no-image::before { display: none; }

/* ── Parallaxe ── */
.kk-titlebar--parallax::before {
  background-attachment: fixed;
}

/* ── Contenu ── */
.kk-titlebar__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: var(--kk-6);
}

/* Centrage complet : breadcrumb + titre + sous-titre + answer-first */
.kk-titlebar__inner[style*="center"] .kk-breadcrumb,
.kk-titlebar__inner .kk-breadcrumb {
  justify-content: inherit; /* hérite du text-align via flex */
}

.kk-titlebar__title {
  font-family: var(--kk-font);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--kk-text);
  margin: 0;
  line-height: 1.1;
}

.kk-titlebar--simple   .kk-titlebar__title { font-size: clamp(1.25rem, 2.5vw, 1.625rem); }
.kk-titlebar--standard .kk-titlebar__title { font-size: clamp(1.5rem, 3vw, 2rem); }
.kk-titlebar--hero     .kk-titlebar__title {
  font-size: clamp(1.75rem, 4vw, 3rem);
  color: #fff;
  text-shadow: 0 2px 20px rgba(0,0,0,0.4);
}

.kk-titlebar__subtitle {
  margin: var(--kk-2) 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--kk-text-2);
}
.kk-titlebar--hero .kk-titlebar__subtitle {
  color: rgba(255,255,255,0.75);
}

.kk-titlebar__answer-first {
  margin-top: var(--kk-3);
  font-size: 0.9375rem;
  color: var(--kk-text-2);
  line-height: 1.7;
  max-width: 680px;
}
.kk-titlebar__inner[style*="center"] .kk-titlebar__answer-first { margin-inline: auto; }
.kk-titlebar--hero .kk-titlebar__answer-first { color: rgba(255,255,255,0.7); }

/* ── Fil d'Ariane ── */
.kk-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0 0 var(--kk-2);
}
.kk-bc-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--kk-text-muted);
}
.kk-bc-item--current { color: var(--kk-text-2); font-weight: 500; }
.kk-bc-link {
  color: var(--kk-text-muted);
  text-decoration: none;
  transition: color var(--kk-t-fast);
}
.kk-bc-link:hover { color: var(--kk-primary); }
.kk-bc-sep { color: var(--kk-text-dim); font-size: 0.625rem; }

.kk-titlebar--hero .kk-bc-item,
.kk-titlebar--hero .kk-bc-link { color: rgba(255,255,255,0.5); }
.kk-titlebar--hero .kk-bc-link:hover { color: rgba(255,255,255,0.85); }
.kk-titlebar--hero .kk-bc-item--current { color: rgba(255,255,255,0.75); }
.kk-titlebar--hero .kk-bc-sep { color: rgba(255,255,255,0.25); }

/* ── Admin bar ── */
.kikifo-toggle{position:relative;display:inline-block;width:36px;height:20px;flex-shrink:0;}
.kikifo-toggle input{opacity:0;width:0;height:0;}
.kikifo-toggle__slider{position:absolute;inset:0;background:#ccc;border-radius:20px;transition:.2s;}
.kikifo-toggle__slider::before{content:'';position:absolute;height:14px;width:14px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.2s;}
.kikifo-toggle input:checked + .kikifo-toggle__slider{background:#E8197A;}
.kikifo-toggle input:checked + .kikifo-toggle__slider::before{transform:translateX(16px);}
.kikifo-range-wrap{display:flex;align-items:center;gap:12px;}
.kikifo-range{flex:1;accent-color:#E8197A;}
.kikifo-range-output{min-width:48px;font-size:.8125rem;font-family:monospace;color:#666;}

@media(max-width:768px) {
  .kk-titlebar__title { letter-spacing: -0.02em; }
  .kk-titlebar__inner { padding-block: var(--kk-4); }
}