/* Yafoye V100 — canonical UX foundation
   Principle: puissance derrière, simplicité devant. */
:root{
  --yf-navy:#031b3a;
  --yf-navy-2:#072a57;
  --yf-cyan:#00d4ff;
  --yf-gold:#d9a441;
  --yf-bg:#f6f8fb;
  --yf-surface:#ffffff;
  --yf-text:#0d1b2a;
  --yf-muted:#64748b;
  --yf-border:rgba(15,23,42,.10);
  --yf-radius-sm:12px;
  --yf-radius-md:18px;
  --yf-radius-lg:26px;
  --yf-shadow:0 18px 50px rgba(3,27,58,.10);
  --yf-touch:44px;
  --yf-space-1:4px;
  --yf-space-2:8px;
  --yf-space-3:12px;
  --yf-space-4:16px;
  --yf-space-5:24px;
  --yf-space-6:32px;
  --yf-space-7:48px;
}

/* ===== Yafoye V100 Full Vision Layer ===== */
html{scroll-behavior:smooth}
body{font-family:Manrope,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.yf-v100-shell{max-width:1180px;margin:0 auto;padding:0 20px}
.yf-v100-eyebrow{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:12px;letter-spacing:.02em;color:var(--yf-cyan,#00d4ff)}
.yf-v100-eyebrow::before{content:"";width:7px;height:7px;border-radius:999px;background:currentColor;box-shadow:0 0 0 5px rgba(0,212,255,.10)}
.yf-v100-pill{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border-radius:999px;background:rgba(3,27,58,.06);font-size:12px;font-weight:800}
.yf-v100-card{background:#fff;border:1px solid rgba(15,23,42,.08);border-radius:22px;box-shadow:0 14px 38px rgba(3,27,58,.08)}
.yf-v100-title{font-family:Sora,Manrope,sans-serif;letter-spacing:-.04em}
.yf-v100-muted{color:#64748b}
.yf-v100-actions{display:flex;gap:10px;flex-wrap:wrap}
.yf-v100-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;border-radius:14px;padding:11px 16px;font-weight:800;text-decoration:none;border:1px solid transparent;cursor:pointer}
.yf-v100-btn--primary{background:#031b3a;color:#fff}
.yf-v100-btn--accent{background:#00d4ff;color:#031b3a}
.yf-v100-btn--ghost{background:#fff;border-color:rgba(15,23,42,.12);color:#031b3a}
.yf-v100-soft{background:linear-gradient(145deg,#f7fbff,#f8fafc);border:1px solid rgba(3,27,58,.08);border-radius:20px}
.yf-v100-section-title{font:800 clamp(22px,3vw,34px) Sora,Manrope,sans-serif;letter-spacing:-.04em;color:#031b3a}
.yf-v100-subtitle{font-size:15px;line-height:1.7;color:#64748b}
.yf-v100-mobile-nav{display:none}
.yf-v100-explain{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.yf-v100-explain span{display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border-radius:999px;background:#f1f5f9;color:#334155;font-size:11px;font-weight:800}
.yf-v100-explain .good{background:#ecfdf5;color:#047857}
.yf-v100-explain .tradeoff{background:#fff7ed;color:#c2410c}
.yf-v100-pro-primary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.yf-v100-pro-primary a{padding:18px;border-radius:18px;background:#fff;border:1px solid rgba(15,23,42,.08);text-decoration:none;color:#031b3a;font-weight:900;box-shadow:0 10px 30px rgba(3,27,58,.06)}
.yf-v100-aura-note{padding:14px 16px;border-radius:17px;background:linear-gradient(135deg,#eefcff,#f8fbff);border:1px solid rgba(0,212,255,.20);color:#16324f}
.yf-v100-aura-note strong{color:#031b3a}
@media(max-width:760px){
  body{padding-bottom:78px}
  .yf-v100-mobile-nav{position:fixed;z-index:9999;left:10px;right:10px;bottom:10px;display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:7px;background:rgba(3,27,58,.96);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.10);border-radius:22px;box-shadow:0 20px 55px rgba(3,27,58,.30)}
  .yf-v100-mobile-nav a{min-width:0;padding:8px 3px 7px;text-align:center;text-decoration:none;color:rgba(255,255,255,.72);font-size:10px;font-weight:800;border-radius:14px}
  .yf-v100-mobile-nav a::before{display:block;font-size:17px;line-height:1.1;margin-bottom:4px}
  .yf-v100-mobile-nav a[data-icon="home"]::before{content:"⌂"}
  .yf-v100-mobile-nav a[data-icon="explore"]::before{content:"⌕"}
  .yf-v100-mobile-nav a[data-icon="mission"]::before,.yf-v100-mobile-nav a[data-icon="match"]::before{content:"◎"}
  .yf-v100-mobile-nav a[data-icon="activity"]::before{content:"↗"}
  .yf-v100-mobile-nav a[data-icon="me"]::before{content:"●"}
  .yf-v100-mobile-nav a.is-active{background:rgba(0,212,255,.13);color:#fff}
  .yf-v100-pro-primary{grid-template-columns:1fr 1fr}
  .yf-v100-shell{padding:0 14px}
}

@media(max-width:760px){
  /* legacy mobile navigation suppressed in favor of the canonical V100 bar */
  #yiUnifiedNav,#yiExplorerBottomNav,.yi-bottom-nav,.bottom-nav{display:none!important}
}

/* ===== V100 Refinement: simplicity / utility / efficiency / beauty ===== */
.yf-focus-hero{max-width:860px;margin:0 auto;text-align:center}
.yf-focus-hero h1{font-size:clamp(40px,7vw,72px);line-height:.98;margin:10px 0 14px}
.yf-focus-hero p{max-width:700px;margin:0 auto 20px}
.yf-decision-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}
.yf-decision-card{padding:16px;border-radius:18px;background:#fff;border:1px solid rgba(15,23,42,.08);box-shadow:0 10px 30px rgba(3,27,58,.06)}
.yf-decision-card b{display:block;color:#031b3a;margin-bottom:4px}
.yf-simple-section{padding:28px 0}
.yf-simple-section>.yf-v100-section-title{margin-bottom:8px}
.yf-mission-card{padding:18px;border-radius:20px;background:#fff;border:1px solid rgba(15,23,42,.08);box-shadow:0 12px 30px rgba(3,27,58,.07)}
.yf-mission-status{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:900;color:#047857}
.yf-mission-status::before{content:"";width:8px;height:8px;border-radius:999px;background:#10b981}
.yf-now-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.yf-now-card{padding:18px;border-radius:20px;background:#fff;border:1px solid rgba(15,23,42,.08);box-shadow:0 12px 30px rgba(3,27,58,.06)}
.yf-now-card strong{display:block;font-size:15px;color:#031b3a;margin-bottom:5px}
.yf-trust-row{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.yf-trust-row span{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;background:#ecfdf5;color:#047857;font-weight:800;font-size:11px}
.yf-sticky-cta{position:sticky;bottom:12px;z-index:30}
.yf-publish-steps{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:16px 0 8px}
.yf-publish-steps span{padding:10px 8px;border-radius:14px;background:#f8fafc;border:1px solid rgba(15,23,42,.08);font-size:11px;font-weight:800;text-align:center;color:#475569}
.yf-quiet-advanced{opacity:.78}
.yf-quiet-advanced:hover{opacity:1}
@media(max-width:760px){
  .yf-decision-strip,.yf-now-grid{grid-template-columns:1fr}
  .yf-publish-steps{grid-template-columns:repeat(3,1fr)}
  .yf-focus-hero h1{font-size:42px}
}

.yf-brand-word{font:900 21px Sora,Manrope,sans-serif;letter-spacing:-.04em}
.yf-value-prop{font:850 clamp(19px,2.4vw,30px) Sora,Manrope,sans-serif;line-height:1.18;letter-spacing:-.04em;max-width:800px;margin:0 auto 16px}
.yf-auth-overlay{position:fixed;inset:0;z-index:12000;background:rgba(3,27,58,.56);backdrop-filter:blur(10px);display:grid;place-items:center;padding:18px}.yf-auth-overlay[hidden]{display:none!important}
.yf-auth-sheet{width:min(100%,460px);background:#fff;border-radius:28px;padding:24px;box-shadow:0 30px 90px rgba(3,27,58,.28);position:relative}
.yf-auth-sheet h2{font:900 28px Sora,Manrope,sans-serif;letter-spacing:-.04em;color:#031b3a;margin:18px 0 8px}.yf-auth-sheet p{color:#64748b;line-height:1.6}
.yf-auth-close{position:absolute;right:16px;top:16px;width:38px;height:38px;border:0;border-radius:12px;background:#f1f5f9;font-size:22px}
.yf-auth-sheet input,.yf-auth-sheet button.yf-auth-action{box-sizing:border-box;width:100%;min-height:48px;border-radius:14px;margin-top:9px;font:750 14px Manrope,sans-serif}
.yf-auth-sheet input{border:1px solid #dbe4ec;padding:0 14px}.yf-auth-action{border:0;background:#031b3a;color:#fff;cursor:pointer}
.yf-auth-google{width:100%;min-height:48px;border-radius:14px;border:1px solid #dbe4ec;background:#fff;color:#031b3a;font-weight:850;cursor:pointer}
.yf-auth-divider{display:flex;align-items:center;gap:10px;color:#94a3b8;font-size:11px;margin:14px 0}.yf-auth-divider:before,.yf-auth-divider:after{content:"";height:1px;flex:1;background:#e2e8f0}
@media(max-width:560px){.yf-auth-overlay{padding:0;align-items:end}.yf-auth-sheet{width:100%;border-radius:26px 26px 0 0;padding:22px 18px 28px}}


/* MERGE 05 FINAL — menu client exactement aligné sur le menu de l'accueil R05. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.14s;animation-timing-function:ease-out}
@media(max-width:700px){
  .yf-v100-mobile-nav{position:fixed!important;z-index:9999!important;left:0!important;right:0!important;bottom:0!important;display:grid!important;grid-template-columns:repeat(5,1fr)!important;gap:0!important;min-height:64px!important;border-radius:0!important;border:0!important;border-top:2px solid rgba(0,212,255,.55)!important;padding:4px 3px calc(5px + env(safe-area-inset-bottom))!important;background:#062344!important;box-shadow:0 -8px 28px rgba(3,27,58,.22)!important;backdrop-filter:blur(18px)!important}
  .yf-v100-mobile-nav a{position:relative!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;padding:5px 2px!important;color:rgba(255,255,255,.68)!important;font-size:7px!important;font-weight:800!important;text-decoration:none!important;border-radius:0!important}
  .yf-v100-mobile-nav a::before,.yf-v100-mobile-nav a::after{display:none!important}
  .yf-v100-mobile-nav a i{display:inline-block!important;font-size:16px!important;color:inherit!important;line-height:1!important}
  .yf-v100-mobile-nav a span{display:block!important}
  .yf-v100-mobile-nav a.is-active{color:#fff!important;background:transparent!important}
  .yf-v100-mobile-nav a.is-active:before{content:""!important;display:block!important;position:absolute!important;top:-6px!important;width:26px!important;height:2px!important;border-radius:3px!important;background:#00d4ff!important}
}


/* R08 — mobile nav fills the safe-area/overscroll edge. */
@media(max-width:700px){
  html,body{overscroll-behavior-y:auto!important}
  .yf-v100-mobile-nav::after{content:"";position:absolute;left:0;right:0;bottom:-48px;height:50px;background:inherit;pointer-events:none}
}

/* R20 — animation navigation client calquée sur le Centre de commandement */
@media (max-width:900px){
  .yf-v100-mobile-nav a{transition:color .18s ease,transform .18s ease,opacity .18s ease!important}
  .yf-v100-mobile-nav a i{transition:transform .18s ease,color .18s ease!important}
  .yf-v100-mobile-nav a span{transition:transform .18s ease,opacity .18s ease!important}
  .yf-v100-mobile-nav a.is-active i{transform:translateY(-2px) scale(1.04)!important}
  .yf-v100-mobile-nav a.is-active span{transform:translateY(-1px)!important}
  .yf-v100-mobile-nav a.is-active:after,.yf-v100-mobile-nav a.is-active:before{animation:yfNavIndicatorIn .18s ease both}
  #yfClientSpaHost.yf-spa-view-in{animation:yfClientViewIn .18s ease both}
  #yfClientSpaHost iframe.yf-spa-frame-in{animation:yfClientViewIn .18s ease both}
  body.yf-spa-base-in>main,body.yf-spa-base-in>.page,body.yf-spa-base-in>#app,body.yf-spa-base-in>.app{animation:yfClientViewIn .18s ease both}
}
@keyframes yfClientViewIn{from{opacity:.35;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes yfNavIndicatorIn{from{opacity:.25;transform:scale(.45)}to{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){#yfClientSpaHost.yf-spa-view-in,#yfClientSpaHost iframe.yf-spa-frame-in,body.yf-spa-base-in>main,body.yf-spa-base-in>.page,body.yf-spa-base-in>#app,body.yf-spa-base-in>.app{animation:none!important}.yf-v100-mobile-nav a,.yf-v100-mobile-nav a i,.yf-v100-mobile-nav a span{transition:none!important}}

/* R21 — EXACT mobile active treatment inspired by Centre de commandement.
   No cyan top bar, no active background: lifted icon + 5px cyan dot. */
@media(max-width:900px){
  .yf-v100-mobile-nav a{position:relative!important;background:transparent!important;transform:none!important;overflow:visible!important;transition:color .18s ease!important}
  .yf-v100-mobile-nav a::before{display:none!important;content:none!important;animation:none!important}
  .yf-v100-mobile-nav a::after{display:none!important;content:none!important}
  .yf-v100-mobile-nav a i{transform:translateY(0)!important;transition:transform .18s ease,color .18s ease!important}
  .yf-v100-mobile-nav a span{transform:none!important;transition:color .18s ease!important}
  .yf-v100-mobile-nav a.is-active{background:transparent!important;color:#fff!important}
  .yf-v100-mobile-nav a.is-active i{transform:translateY(-5px)!important}
  .yf-v100-mobile-nav a.is-active span{transform:none!important}
  .yf-v100-mobile-nav a.is-active::after{content:""!important;display:block!important;position:absolute!important;width:5px!important;height:5px!important;border-radius:50%!important;background:#00d4ff!important;left:50%!important;top:31px!important;transform:translateX(-50%)!important;animation:yfCcDotIn .18s ease both!important;box-shadow:none!important}
}
@keyframes yfCcDotIn{from{opacity:0;transform:translate(-50%,3px) scale(.7)}to{opacity:1;transform:translate(-50%,0) scale(1)}}


/* R22 — navigation client: comportement exact type Centre Pro.
   Aucun trait cyan. Icône relevée + point sous le libellé. */
@media(max-width:900px){
  .yf-v100-mobile-nav{border-top:0!important;}
  .yf-v100-mobile-nav a::before{display:none!important;content:none!important;width:0!important;height:0!important;background:transparent!important;box-shadow:none!important;}
  .yf-v100-mobile-nav a::after{display:none!important;content:none!important;}
  .yf-v100-mobile-nav a.is-active i{transform:translateY(-5px)!important;}
  .yf-v100-mobile-nav a.is-active span{transform:none!important;}
  .yf-v100-mobile-nav a.is-active::after{
    content:""!important;display:block!important;position:absolute!important;
    width:5px!important;height:5px!important;border-radius:50%!important;
    left:50%!important;top:auto!important;bottom:1px!important;
    background:#00d4ff!important;box-shadow:none!important;
    transform:translateX(-50%)!important;animation:yfCcDotBelowLabel .18s ease both!important;
  }
}
@keyframes yfCcDotBelowLabel{from{opacity:0;transform:translate(-50%,3px) scale(.7)}to{opacity:1;transform:translate(-50%,0) scale(1)}}