/* Habillage « Beauty » (Portal&Beauty) — site des toiletteuses (beautyandportals.jeromejadot.pro)
   et comptes toiletteuse. Charte reprise de la carte de visite du salon : fond rose saumon,
   rouge du logo, ciseaux dorés, nuages / bulles blanches, bord en vague. */
:root {
  --bt-pink:      #F4CDC7;
  --bt-pink-2:    #FBE6E2;
  --bt-red:       #E1251B;
  --bt-red-dark:  #B91C14;
  --bt-gold:      #E9B43A;
  --bt-ink:       #3B2626;
  --brand:        #E1251B;
  --brand-dark:   #B91C14;
  --brand-light:  #FDECEA;
  --brand-rgb:    225, 37, 27;
  --bt-round: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", "Arial Rounded MT Bold", system-ui, sans-serif;
}

body {
  background:
    radial-gradient(circle at 8% 12%, rgba(255,255,255,.55) 0 22px, transparent 23px),
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.45) 0 9px, transparent 10px),
    radial-gradient(circle at 92% 30%, rgba(255,255,255,.5) 0 16px, transparent 17px),
    radial-gradient(circle at 88% 36%, rgba(255,255,255,.4) 0 7px, transparent 8px),
    linear-gradient(180deg, var(--bt-pink) 0, var(--bt-pink-2) 520px, #FFF7F5 100%) !important;
  background-attachment: fixed !important;
  color: var(--bt-ink);
}
h1, h2, h3, .gm-head h1 { font-family: var(--bt-round); letter-spacing: -.01em; }
.gm-head h1 { color: var(--bt-red); font-weight: 800; }

/* Barre du haut : blanche, bord inférieur en vague. */
.topbar { background: #fff !important; border-bottom: 0 !important; position: relative; box-shadow: none !important; }
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -11px; height: 12px; pointer-events: none;
  background: radial-gradient(circle at 12px -4px, #fff 12px, transparent 13px) repeat-x;
  background-size: 24px 12px;
}
.bt-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.bt-word { font-family: var(--bt-round); font-weight: 900; font-size: 26px; line-height: 1; color: var(--bt-red); letter-spacing: -.02em; }
.bt-sub { font-size: 11px; color: var(--bt-ink); opacity: .8; font-weight: 600; white-space: nowrap; }
.bt-sub b { font-weight: 800; }
.bt-scissors { width: 30px; height: 30px; flex: 0 0 30px; }
.nav-link { font-family: var(--bt-round); font-weight: 700; }
.nav-link:hover { color: var(--bt-red) !important; }

/* Cartes, boutons, éléments du module. */
.gm-card, .gm-item, .gm-kpi, .ag-scroll, .ag-week a, .ag-month a, .gm-check, .gm-pills a, .gm-pay label {
  border-color: rgba(225, 37, 27, .14) !important;
}
.gm-card, .ag-scroll { border-radius: 20px !important; box-shadow: 0 6px 22px rgba(185, 28, 20, .07); }
.gm-card h2, .gm-card h3 { color: var(--bt-red); font-family: var(--bt-round); }
.btn { border-radius: 999px !important; font-family: var(--bt-round); font-weight: 700; }
.btn-primary { background: var(--bt-red) !important; border-color: var(--bt-red) !important; }
.btn-primary:hover { background: var(--bt-red-dark) !important; border-color: var(--bt-red-dark) !important; }
.btn-outline-primary { color: var(--bt-red) !important; border-color: var(--bt-red) !important; }
.ag-week a.on, .gm-pills a.on, .ag-views a.on { background: var(--bt-red) !important; border-color: var(--bt-red) !important; }
.ag-now { border-top-color: var(--bt-gold) !important; }
.gm-dot { box-shadow: 0 0 0 2px #fff; }

/* Page de connexion Beauty. */
.bt-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.bt-login-box { width: 100%; max-width: 380px; background: #fff; border-radius: 28px; padding: 28px 26px 26px; box-shadow: 0 18px 50px rgba(185, 28, 20, .14); text-align: center; position: relative; }
.bt-cloud { width: 120px; height: 92px; margin: -78px auto 4px; display: block; filter: drop-shadow(0 6px 12px rgba(185, 28, 20, .12)); }
.bt-login .bt-word { font-size: 48px; display: inline-block; }
.bt-login .bt-scissors { width: 40px; height: 40px; vertical-align: top; margin-left: -4px; }
.bt-login .bt-sub { display: block; margin: 6px 0 22px; font-size: 13px; }
.bt-login form { display: grid; gap: 14px; text-align: left; }
.bt-login label { font-size: 13px; font-weight: 700; color: var(--bt-ink); display: block; margin-bottom: 4px; }
.bt-login input[type=text], .bt-login input[type=password] { width: 100%; padding: 12px 14px; border: 1.5px solid rgba(225, 37, 27, .22); border-radius: 14px; font-size: 16px; background: #FFFBFA; }
.bt-login input:focus { outline: none; border-color: var(--bt-red); box-shadow: 0 0 0 3px rgba(225, 37, 27, .15); }
.bt-login button { padding: 13px; border: 0; border-radius: 999px; background: var(--bt-red); color: #fff; font-family: var(--bt-round); font-weight: 800; font-size: 16px; cursor: pointer; }
.bt-login button:hover { background: var(--bt-red-dark); }
.bt-login .lerr { background: #FEF2F2; color: #991B1B; border-radius: 12px; padding: 10px 12px; font-size: 14px; margin-bottom: 14px; }
.bt-login .lremember { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
.bt-login .lremember input { width: 18px; height: 18px; accent-color: var(--bt-red); }
.bt-wave { position: fixed; left: 0; right: 0; bottom: 0; height: 70px; background: #fff; z-index: -1; }
.bt-wave::before {
  content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 15px;
  background: radial-gradient(circle at 16px 18px, #fff 15px, transparent 16px) repeat-x;
  background-size: 32px 15px;
}
@media (max-width: 600px) {
  .bt-word { font-size: 22px; }
  .bt-sub { display: none; }
  .bt-login .bt-sub { display: block; }
}