/* Thème « dj-tahiti » — académie DJ Kenzo (14/10/2026). Chargé par layout.tsx quand
   NEXT_PUBLIC_THEME=dj-tahiti. Nuit tahitienne, coucher de soleil sur le lagon : corail + mangue.
   Mêmes jetons que globals.css, sélecteurs plus forts (html:root / html.dark) pour gagner sans !important. */
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700;900&family=Instrument+Sans:wght@400;500;600;700&display=swap');

html:root {
  --color-primary: #D9431F;
  --color-primary-hover: #C23A1A;
  --color-primary-soft: rgba(217, 67, 31, 0.10);
  --color-primary-fill: #C93D1C;
  --color-primary-deep: #B33417;
  --color-accent: #B86A00;
  --color-accent-hover: #9C5A00;
  --color-accent-soft: rgba(184, 106, 0, 0.10);
  --color-background: #F6EFE6;
  --color-surface: #FFFBF6;
  --color-surface-2: #F1E7DA;
  --color-surface-3: #EADDCB;
  --color-surface-hover: #F3EADF;
  --color-border-subtle: #EBDFD0;
  --color-border: #E0D1BE;
  --color-border-strong: #CBB79F;
  --color-text: #1A1420;
  --color-text-muted: #5E5462;
  --color-text-faint: #7A6F7D;
}
html.dark {
  --color-primary: #FF5A36;
  --color-primary-hover: #FF7653;
  --color-primary-soft: rgba(255, 90, 54, 0.13);
  --color-primary-fill: #D9431F;
  --color-primary-deep: #C23A1A;
  --color-accent: #FFB547;
  --color-accent-hover: #FFC66F;
  --color-accent-soft: rgba(255, 181, 71, 0.13);
  --color-background: #0B0A12;
  --color-surface: #13111B;
  --color-surface-2: #1A1724;
  --color-surface-3: #221E2E;
  --color-surface-hover: #1E1A29;
  --color-border-subtle: #1C1926;
  --color-border: #2A2536;
  --color-border-strong: #3B3449;
  --color-text: #F3EDE4;
  --color-text-muted: #ADA2B2;
  --color-text-faint: #918699;
  --ck-bg-surface: #13111B;
  --ck-bg-elevated: #1A1724;
  --ck-bg-overlay: #221E2E;
  --ck-border-subtle: #221E2E;
  --ck-border: #2A2536;
  --ck-border-strong: #3B3449;
  --ck-text-primary: #F3EDE4;
  --ck-text-secondary: #ADA2B2;
  --ck-text-muted: #918699;
}
/* Polices : les classes de next/font posent --font-display / --font-sans sur <body> ;
   html body[class] l'emporte sur elles. */
html body[class] {
  --font-display: "Big Shoulders Display", Impact, sans-serif;
  --font-sans: "Instrument Sans", system-ui, sans-serif;
}
::selection { background: #FF5A36; color: #0B0A12; }

/* Connexion : la photo plein cadre et le titre de la marque. */
.ot-auth-photo { position: relative; overflow: hidden; background: #0B0A12; }
.ot-auth-photo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.ot-auth-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,10,18,.95) 8%, rgba(11,10,18,.35) 55%, rgba(11,10,18,.15)); }
.ot-auth-photo-inner { position: absolute; z-index: 1; left: clamp(24px, 5vw, 64px); right: clamp(24px, 5vw, 64px); bottom: clamp(28px, 6vh, 72px); text-align: left; }
.ot-auth-brand.ot-auth-photo .ot-auth-kicker { font-family: "JetBrains Mono", ui-monospace, monospace; letter-spacing: .2em; color: #FF5A36; }
.ot-auth-brand.ot-auth-photo h2 { margin-top: 14px; font-family: "Big Shoulders Display", Impact, sans-serif; font-weight: 900; text-transform: uppercase; line-height: .86; font-size: clamp(3.2rem, 1rem + 5.4vw, 7rem); color: #F3EDE4; letter-spacing: -0.005em; }

/* Couleurs de section : la famille du coucher de soleil (corail, mangue, lagon), plus aucun bleu-violet. */
html :root, html [data-tone="home"] { --tone: #FF5A36; --tone-2: #FFB547; --tone-ink: #C23A1A; }
html [data-tone="learn"] { --tone: #FFB547; --tone-2: #FF5A36; --tone-ink: #9C5A00; }
html [data-tone="community"] { --tone: #2BB5A6; --tone-2: #FFB547; --tone-ink: #1A7F74; }
html [data-tone="rewards"] { --tone: #FF4D6D; --tone-2: #FFB547; --tone-ink: #B8213F; }
html [data-tone="account"] { --tone: #2BB5A6; --tone-2: #FF5A36; --tone-ink: #1A7F74; }
html.dark, html.dark [data-tone="home"] { --tone: #FF5A36; --tone-2: #FFB547; --tone-ink: #FF9A80; }
html.dark [data-tone="learn"] { --tone-ink: #FFC66F; }
html.dark [data-tone="community"] { --tone-ink: #6FD8CB; }
html.dark [data-tone="rewards"] { --tone-ink: #FF8FA3; }
html.dark [data-tone="account"] { --tone-ink: #6FD8CB; }

/* Pages de connexion : le panneau du formulaire passe en nuit et corail. */
html .ot-auth { background: linear-gradient(150deg, color-mix(in srgb, #FF5A36 10%, var(--color-background)), var(--color-background) 60%, color-mix(in srgb, #FFB547 6%, var(--color-background))); }
html .ot-auth-aurora i:nth-child(1) { background: #FF5A36; }
html .ot-auth-aurora i:nth-child(2) { background: #FFB547; }
html .ot-auth-aurora i:nth-child(3) { background: #2BB5A6; }
html .ot-auth-card::before { background: #FF5A36; }
html .ot-auth-card button[type="submit"] { background: #FF5A36; color: #0B0A12; font-weight: 700; box-shadow: 0 14px 30px -14px rgb(255 90 54 / .8); }
html .ot-auth-code-icon { background: linear-gradient(135deg, #FF5A36, #FFB547); box-shadow: 0 16px 34px -14px rgb(255 90 54 / .8); }
html .ot-auth-head h1 { font-family: "Big Shoulders Display", Impact, sans-serif; font-weight: 900; text-transform: uppercase; font-size: 2.4rem; letter-spacing: 0; }
html .ot-auth-grid { color: #FF5A36; }

/* Barre latérale, pastilles et guide : les dégradés bleu-violet du modèle passent au coucher de soleil. */
html .ot-sidebar .ot-brand { background: none; color: var(--color-text); -webkit-text-fill-color: currentColor; font-family: "Big Shoulders Display", Impact, sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: .02em; }
html .ot-sidebar-sections-pill { background: linear-gradient(135deg, #FF5A36, #FF7A4D); box-shadow: 0 6px 16px -6px rgb(255 90 54 / .7), inset 0 1px 0 rgb(255 255 255 / .2); }
html .ot-sidebar-sections[data-active="salons"] .ot-sidebar-sections-pill { background: linear-gradient(135deg, #FFB547, #FF8A3D); box-shadow: 0 6px 16px -6px rgb(255 181 71 / .7), inset 0 1px 0 rgb(255 255 255 / .2); }
html .ot-sidebar-section-dot { background: linear-gradient(135deg, #FF5A36, #FFB547); }
html .ot-unread { --tone: #FF5A36; --tone-2: #FFB547; }
html .ot-unread-dot { background: #FF5A36; }
html .ot-guide-menu-full { background: linear-gradient(120deg, #FF5A36, #FF7A4D 45%, #FFB547); color: #0B0A12; box-shadow: 0 18px 40px -18px rgb(255 90 54 / .8); }
html .ot-guide-legend small b { background: #FF5A36; }
html .ot-guide-legend small b.is-account { background: #2BB5A6; }
html { --guide-ring: #FF5A36; }

/* Connexion : la photo occupe toute la moitié gauche, à fond perdu, et rencontre le formulaire sur
   un bord net — plus de carte arrondie décollée du bord qui flottait à côté d'un fond dégradé (Jordy, 15/10). */
html .ot-auth { background: #0B0A12; }
html .ot-auth-brand.ot-auth-photo { margin: 0; border-radius: 0; }
html .ot-auth-main { background: #0B0A12; border-inline-start: 1px solid rgb(243 237 228 / .08); }
html .ot-auth-main > .ot-auth-aurora { opacity: .35; }