/* CharlesGroleau.com — habillage du coffre : page de connexion (charte : noir, blanc, gris, Arial) */
html:has(auth-anon-layout), html:has(auth-anon-layout) body { background: #0A0A0A !important; }

auth-anon-layout {
  display: block; min-height: 100vh; position: relative; isolation: isolate;
  font-family: Arial, Helvetica, sans-serif;
  /* la page : encre sombre */
  --color-background-alt: 10 10 10;
  --color-text-main: 255 255 255;
  --color-fg-heading: #FFFFFF; --color-fg-body: #D1D5DB; --color-fg-body-subtle: #9CA3AF;
  --color-fg-brand: #D1D5DB; --color-fg-brand-strong: #FFFFFF;
  --color-marketing-logo: 255 255 255;
  background:
    radial-gradient(900px 520px at 78% -8%, rgba(255,255,255,.10), transparent 62%),
    radial-gradient(760px 520px at 6% 108%, rgba(255,255,255,.055), transparent 62%),
    #0A0A0A;
}
/* trame fine, estompée vers les bords */
auth-anon-layout::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 38%, #000 18%, transparent 72%);
          mask-image: radial-gradient(ellipse at 50% 38%, #000 18%, transparent 72%);
}
auth-anon-layout .tw-bg-background-alt { background: transparent !important; }

/* illustrations décoratives Bitwarden au bas de la page : retirées */
auth-anon-layout bit-landing-layout > div > div.tw-hidden { display: none !important; }
html:has(auth-anon-layout) { overflow-x: hidden; }

/* en-tête : monogramme CG + nom */
auth-anon-layout bit-landing-header a {
  display: flex !important; align-items: center; gap: 14px; width: auto !important;
  padding-block: 26px !important; padding-inline-start: 6px;
}
auth-anon-layout bit-landing-header a bit-svg { display: none !important; }
auth-anon-layout bit-landing-header a::before {
  content: ""; width: 48px; height: 38px; flex: none;
  background: url("cg-logo-blanc.png") center / contain no-repeat;
}
auth-anon-layout bit-landing-header a::after {
  content: "CHARLESGROLEAU.COM"; color: #FFFFFF;
  font: 700 13px/1 Arial, Helvetica, sans-serif; letter-spacing: .16em;
}

/* présentation : cadenas dans un anneau fin, étiquette, titre */
auth-anon-layout bit-landing-hero [class*="tw-size-20"] {
  width: 84px !important; height: 84px !important; margin-bottom: 22px !important;
  border: 1px solid #404040; border-radius: 50%;
  background: rgba(255,255,255,.03) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='11' y='21' width='26' height='19' rx='3'/%3E%3Cpath d='M16 21v-5a8 8 0 0 1 16 0v5'/%3E%3Ccircle cx='24' cy='30' r='2.2' fill='%23FFFFFF'/%3E%3Cpath d='M24 32.4v3.6'/%3E%3C/svg%3E") center / 40px no-repeat;
}
auth-anon-layout bit-landing-hero [class*="tw-size-20"] > * { display: none !important; }
auth-anon-layout bit-landing-hero h1 {
  font-family: Arial, Helvetica, sans-serif !important; font-weight: 700 !important;
  letter-spacing: -.01em; color: #FFFFFF !important;
}
auth-anon-layout bit-landing-hero h1::before {
  content: "COFFRE PERSONNEL"; display: block; margin-bottom: 12px;
  font: 700 11px/1 Arial, Helvetica, sans-serif; letter-spacing: .24em; color: #9CA3AF;
}

/* la carte : blanche, jetons de couleur redéfinis localement (même rendu en thème clair ou sombre) */
auth-anon-layout bit-base-card {
  --color-background: 255 255 255; --color-text-main: 10 10 10;
  --color-fg-heading: #0A0A0A; --color-fg-body: #404040; --color-fg-body-subtle: #6B7280;
  --color-bg-secondary: #F9FAFB; --color-bg-tertiary: #F9FAFB; --color-bg-quaternary: #F3F4F6;
  --color-border-strong: #D1D5DB; --color-border-base: #E5E7EB; --color-border-light: #E5E7EB;
  --color-border-brand: #0A0A0A; --color-border-focus: #0A0A0A;
  --color-bg-brand: #0A0A0A; --color-bg-brand-strong: #404040; --color-bg-brand-stronger: #1A1A1A;
  --color-fg-brand: #0A0A0A; --color-fg-brand-strong: #404040; --color-fg-contrast: #FFFFFF;
  --color-bg-hover: rgba(10,10,10,.05); --color-secondary-100: 229 231 235;
  background: #FFFFFF !important; padding: 2rem !important;
  border: 1px solid rgba(255,255,255,.16) !important; border-radius: 18px !important;
  box-shadow: 0 40px 90px -24px rgba(0,0,0,.75) !important;
  font-family: Arial, Helvetica, sans-serif;
}
auth-anon-layout bit-base-card button[class*="tw-bg-bg-brand"] { letter-spacing: .02em; font-weight: 700; }

/* liens sous la carte et pied de page */
auth-anon-layout main a { text-decoration: underline; text-underline-offset: 3px; }
auth-anon-layout footer, auth-anon-layout bit-landing-footer { color: #6B7280 !important; font-size: 12px; }
auth-anon-layout bit-landing-footer::after {
  content: "CharlesGroleau.com · Une division de 9481-6154 Québec inc."; display: block;
  margin-top: 14px; text-align: center; color: #9CA3AF; font-size: 12px; letter-spacing: .04em;
}
@media (max-width: 640px) { auth-anon-layout bit-base-card { padding: 1.5rem !important; } }
@media (max-width: 400px) {
  auth-anon-layout bit-landing-header a { gap: 10px; }
  auth-anon-layout bit-landing-header a::after { font-size: 11.5px; letter-spacing: .1em; }
}