/* The V Barber — design system : verre dépoli, noir / blanc / gris, accent jaune */
@font-face{font-family:Poppins;font-weight:400;font-display:swap;src:url(/fonts/poppins-400.woff) format("woff")}
@font-face{font-family:Poppins;font-weight:500;font-display:swap;src:url(/fonts/poppins-500.woff) format("woff")}
@font-face{font-family:Poppins;font-weight:600 800;font-display:swap;src:url(/fonts/poppins-700.woff) format("woff")}
:root{
  --y:#F7F100;--yellow:#F7F100;--sans:Poppins,"SF Pro Display",ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;
  --glass:rgba(255,255,255,.065);--glass-2:rgba(255,255,255,.11);--line:rgba(255,255,255,.14);--mut:rgba(255,255,255,.62);
  --r:28px;--ease:cubic-bezier(.2,.8,.2,1);
  --shadow:0 24px 60px -18px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.16);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html{background:radial-gradient(120% 70% at 50% -10%,#2a2a2e 0%,#101012 45%,#060607 100%) fixed #08080a;min-height:100%}
body{margin:0;min-height:100vh;color:#fff;font:400 16px/1.5 var(--sans);-webkit-font-smoothing:antialiased;background:transparent}
/* arrière-plan : réseau organique continu (motif répété sans couture), flou léger + calque lointain plus flou */
html::before,html::after{content:"";position:fixed;inset:-60px;z-index:-1;pointer-events:none;background-repeat:repeat}
html::before{background-image:url(/web.png);background-size:900px 900px;background-position:20% 0;filter:blur(4px);opacity:.3}
html::after{background-image:url(/web.png);background-size:1500px 1500px;background-position:70% 40%;filter:blur(16px);opacity:.14;mix-blend-mode:screen}
body::before{content:"";position:fixed;left:50%;top:-22vmax;width:70vmax;height:70vmax;transform:translateX(-50%);pointer-events:none;z-index:-1;
  background:radial-gradient(closest-side,rgba(247,241,0,.11),rgba(247,241,0,0) 70%)}
.org{display:none!important}
main,header,nav,.page{position:relative;z-index:1}
a{color:var(--y)}
h1{font:700 1.3rem/1.2 var(--sans);margin:0 0 6px;letter-spacing:-.01em}
h2{font:700 1.05rem/1.3 var(--sans);margin:26px 0 10px;letter-spacing:-.01em}
small,.muted{color:var(--mut)}
.mark{display:flex;align-items:center;justify-content:center;gap:14px;font:700 1.35rem/1 var(--sans);text-transform:uppercase;letter-spacing:.2em;margin:0 0 22px}
.mark img{height:54px;filter:drop-shadow(0 0 18px rgba(247,241,0,.35))}
/* le logo est posé dans une capsule en verre à fine bordure, détachée du reste */
.mark{width:fit-content;margin-inline:auto;padding:9px 34px;border-radius:999px;border:1px solid rgba(255,255,255,.38);
  background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.03));-webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);
  box-shadow:0 18px 44px -14px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(255,255,255,.06)}
.mark{align-self:center!important}

/* verre */
.glass,.card,details{background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.04));border:1px solid var(--line);border-radius:var(--r);
  -webkit-backdrop-filter:blur(26px) saturate(150%);backdrop-filter:blur(26px) saturate(150%);box-shadow:var(--shadow)}
.glass.dark{background:linear-gradient(170deg,rgba(40,40,44,.85),rgba(8,8,10,.92))}

/* boutons : par défaut jaune lumineux ; .alt / .ghost = verre */
button,a.btn{font:600 1rem/1 var(--sans);cursor:pointer;text-decoration:none;text-align:center;display:block;width:100%;
  border:0;border-radius:999px;padding:17px 22px;margin-top:12px;color:#0a0a0a;
  background:linear-gradient(180deg,#fbf67a,var(--y));box-shadow:0 10px 30px -8px rgba(247,241,0,.55),inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),filter .2s}
button:hover,a.btn:hover{transform:translateY(-1px);box-shadow:0 14px 36px -8px rgba(247,241,0,.7),inset 0 1px 0 rgba(255,255,255,.6)}
button:active,a.btn:active{transform:scale(.97)}
button.alt,a.btn.alt,button.ghost,.opt,.day,.times button,.glassbtn{background:var(--glass);color:#fff;border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
button.alt:hover,a.btn.alt:hover,button.ghost:hover,.opt:hover,.day:hover,.times button:hover,.glassbtn:hover{background:var(--glass-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
button.link{background:none;border:0;box-shadow:none;color:#fff;font-weight:500;text-decoration:underline;text-underline-offset:3px;padding:12px;margin-top:4px;width:100%}
button:disabled{opacity:.5;cursor:default;transform:none}
.sel{background:rgba(247,241,0,.14)!important;border-color:var(--y)!important;color:var(--y)!important;box-shadow:0 0 0 1px var(--y),0 0 24px -4px rgba(247,241,0,.55)!important}

/* champs */
label{display:block;margin-top:16px;font-weight:500;font-size:.85rem;color:var(--mut);letter-spacing:.02em}
input,select{display:block;width:100%;font:500 1rem var(--sans);padding:15px 18px;margin-top:6px;border-radius:18px;border:1px solid var(--line);
  background:rgba(255,255,255,.06);color:var(--y);caret-color:var(--y);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:border-color .2s,box-shadow .2s,background .2s}
input::placeholder{color:rgba(255,255,255,.35)}
input:focus,select:focus{outline:0;border-color:var(--y);box-shadow:0 0 0 4px rgba(247,241,0,.14);background:rgba(255,255,255,.09)}
input:-webkit-autofill{-webkit-text-fill-color:var(--y);-webkit-box-shadow:0 0 0 1000px #17171a inset;caret-color:var(--y)}
input[type=checkbox]{width:22px;height:22px;padding:0;accent-color:var(--y)}
input[type=date],input[type=time]{color-scheme:dark}
:focus-visible{outline:2px solid var(--y);outline-offset:3px}
.err{margin:14px 0 0;font-weight:500;font-size:.92rem;color:#fff;background:rgba(255,255,255,.08);border:1px solid var(--line);border-left:3px solid var(--y);border-radius:14px;padding:10px 14px}
.err:empty{display:none}
.ok{margin:14px 0 0;font-weight:600;color:var(--y);font-size:.92rem}

/* barre de navigation flottante */
.dock{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:20;display:flex;gap:10px;padding:9px;border-radius:999px;
  background:linear-gradient(160deg,rgba(38,38,42,.82),rgba(10,10,12,.9));border:1px solid var(--line);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
  box-shadow:0 20px 50px -10px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.14)}
.dock a{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;color:#fff;background:rgba(255,255,255,.07);transition:transform .25s var(--ease),background .25s}
.dock a:active{transform:scale(.9)}
.dock a.on{background:linear-gradient(180deg,#fbf67a,var(--y));color:#0a0a0a;box-shadow:0 0 28px -2px rgba(247,241,0,.7)}
.dock svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.has-dock{padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))!important}
.mark{margin-top:30px!important}
body.kb .dock{display:none}
body.kb.has-dock{padding-bottom:0!important}
body.kb .chat-form{padding-bottom:10px!important}

/* animations */
@keyframes rise{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes sheen{0%{background-position:-160% 0}100%{background-position:260% 0}}
.rise{animation:rise .7s var(--ease) both;animation-delay:calc(var(--i,0)*80ms)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* fenêtre de confirmation */
@keyframes uipop{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
.ui-ov{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ui-box{width:100%;max-width:360px;padding:26px 22px 20px;text-align:center;background:linear-gradient(170deg,rgba(40,40,44,.94),rgba(10,10,12,.96));animation:uipop .3s var(--ease) both}
.ui-box h3{margin:10px 0 6px;font:700 1.15rem/1.3 var(--sans)}
.ui-box p{margin:0;color:var(--mut);font-size:.92rem;white-space:pre-line}
.ui-ico{width:54px;height:54px;margin:0 auto;border-radius:50%;display:grid;place-items:center;background:rgba(247,241,0,.12);border:1px solid var(--y);color:var(--y)}
.ui-ico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ui-box.danger .ui-ico{background:rgba(255,77,77,.14);border-color:#ff5c5c;color:#ff5c5c}
.ui-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.ui-row button{margin:0;padding:15px 10px}
button.ui-danger,.btn.ui-danger{background:linear-gradient(160deg,rgba(255,120,120,.46),rgba(214,40,40,.34));color:#fff;border:1px solid rgba(255,140,140,.62);
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);text-shadow:0 1px 8px rgba(120,0,0,.45);
  box-shadow:0 12px 30px -10px rgba(255,70,70,.55),inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(255,255,255,.12)}
button.ui-danger:active{transform:scale(.97)}

/* pastille de messages non lus */
.badge{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:var(--y);color:#0a0a0a;font:700 .75rem/1 var(--sans);box-shadow:0 0 16px rgba(247,241,0,.55)}
.badge:empty,.badge[hidden]{display:none}

/* conversation */
.chat{display:flex;flex-direction:column;flex:1;min-height:0}
.chat-list{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:6px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.chat-day{align-self:center;margin:10px 0 4px;padding:4px 12px;border-radius:999px;font-size:.72rem;color:var(--mut);background:var(--glass);border:1px solid var(--line);text-transform:capitalize}
.chat-empty{margin:auto;text-align:center;color:var(--mut);max-width:260px}
.bub{max-width:82%;padding:10px 14px 6px;border-radius:20px;overflow-wrap:anywhere;white-space:pre-wrap;line-height:1.4;animation:uipop .25s var(--ease) both}
.bub time{display:block;margin-top:3px;font-size:.66rem;opacity:.6;text-align:right}
.bub.me{align-self:flex-end;background:linear-gradient(180deg,#fbf67a,var(--y));color:#0a0a0a;border-bottom-right-radius:6px;box-shadow:0 8px 22px -10px rgba(247,241,0,.6)}
.bub.him{align-self:flex-start;background:linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,.06));border:1px solid var(--line);border-bottom-left-radius:6px}
.chat .err{margin:0 16px 8px}
.chat-form{display:flex;align-items:flex-end;gap:10px;padding:10px 14px calc(12px + env(safe-area-inset-bottom));background:rgba(8,8,10,.72);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);border-top:1px solid var(--line)}
.chat-form textarea{flex:1;margin:0;resize:none;max-height:130px;border-radius:22px;padding:13px 18px;font:500 1rem/1.35 var(--sans);color:#fff;caret-color:var(--y);border:1px solid var(--line);background:rgba(255,255,255,.06)}
.chat-form textarea:focus{outline:0;border-color:var(--y);box-shadow:0 0 0 4px rgba(247,241,0,.14)}
.chat-form button{flex:none;width:50px;height:50px;padding:0;margin:0;display:grid;place-items:center}
.chat-form button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.mark,h1>img[src="/v3.png"]{cursor:pointer}

/* Android : la fenêtre commence sous la barre d'état (pas d'encoche à contourner) */
/* Application Android : le fond passe derrière la barre d'état (bord à bord), la page garde les mêmes marges que sur iPhone, seul le bas est décalé de la barre de navigation */
html.android{--sab:var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px))}
html.android body{box-sizing:border-box;border-bottom:var(--sab) solid transparent}
html.android .dock{bottom:calc(14px + var(--sab))}
html.android .has-dock{padding-bottom:calc(100px + var(--sab))!important}
/* Application Android : page compacte pour que tout tienne à l'écran au lancement (écrans de moins de 800 px de haut) */
html.android body{padding-top:calc(var(--safe-area-inset-top,env(safe-area-inset-top,0px)) + 34px)!important}
html.android .mark{margin-top:0!important}
@media (max-height:800px){
  html.android .mark{margin-bottom:16px!important}
  html.android h1{margin-bottom:4px!important}
  html.android p.sub{margin-bottom:10px!important}
  html.android main form{margin-top:8px!important;padding:2px 20px 16px!important}
  html.android label{margin-top:10px!important}
  html.android .sep{margin:14px 0 4px!important}
  html.android .legal{margin-top:10px!important}
  html.android .legal+*{margin-top:0!important}
}
/* lueur jaune : elle suit le logo « The V Barber » (iPhone et Android) au lieu d'être fixée en haut de l'écran */
body::before{background:none!important}
.mark{position:relative}
.mark::before{content:"";position:absolute;left:50%;top:50%;width:560px;height:560px;max-width:none;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(225,255,0,.30),rgba(225,255,0,.10) 38%,rgba(225,255,0,0) 68%)}
/* pas de défilement horizontal (le halo du logo dépasse volontairement de l'écran) */
html,body{overflow-x:hidden;overflow-x:clip;max-width:100%;overscroll-behavior-x:none}
html{touch-action:pan-y pinch-zoom}
/* le lien légal n'apparaît qu'une fois la page affichée (il flottait au milieu pendant le chargement) */
#app:empty~.legal,main:empty~.legal{display:none!important}