/* =====================================================
   TALACOTE BASE — Reset & Global Styles
===================================================== */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
html body,
html body.tc-page {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

/* #17: smooth scroll only for users who accept motion */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

body {
    font-family: var(--tc-font);
    color: var(--tc-text);
    background: #040810;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    position: relative;
}

/* Stadium background — DESKTOP ONLY */
@media (min-width: 768px) {
    body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* Tâche 32 (Apr 2026): AVIF added at the front of the image-set.
           The 1st `background` line is the legacy fallback for browsers
           that don't parse image-set() at all (very rare in 2026). The
           2nd line is parsed by everything else; the browser picks the
           best format it can decode. AVIF wins 96% of the time → WebP
           → JPG. AVIF here is ~3 KB vs 6 KB WebP vs 70 KB JPG. */
        background: url('../img/hero-stadium.webp') top center / cover no-repeat;
        background: image-set(
            url('../img/hero-stadium.avif') type('image/avif'),
            url('../img/hero-stadium.webp') type('image/webp'),
            url('../img/hero-stadium.jpg')  type('image/jpeg')
        ) top center / cover no-repeat;
        /* Apr 2026 contrast pass: dropped 0.22 → 0.12. Stadium still gives
           the page mood/atmosphere but bright spots (lights, sky) no longer
           bleed through translucent panels enough to drop muted-text
           contrast under WCAG AA. */
        opacity: 0.12;
        z-index: -1;
        pointer-events: none;
    }
}

/* Mobile background image — hidden on desktop, shown on mobile via media query */
.tc-mobile-bg {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    /* Apr 2026 contrast pass: 0.30 → 0.16. Same rationale as the desktop
       body::before — keeps the stadium readable as backdrop without
       bleed-through hurting muted-text contrast. */
    opacity: 0.16;
    z-index: -1;
    pointer-events: none;
}

/* RTL support */
[dir="rtl"] body {
    direction: rtl;
}

/* =====================================================
   LISIBILITÉ GLOBALE — tout le site
   ----------------------------------------------------
   Previously this block forced a heavy `text-shadow` on every text
   element to mask poor contrast against the dark background. The
   shadow was so opaque (0.75–0.9 alpha) that Lighthouse + axe-core
   flagged contrast ratios below WCAG AA. The proper fix is to
   guarantee high enough text colors against `--tc-bg` so no shadow
   is needed at all. Shadows are now reserved for the hero (where the
   text sits over a photographic/gradient background) and for legacy
   inline-styled Gutenberg paragraphs.
===================================================== */

/* Hero / over-image text — keep a discreet shadow purely for legibility
   over the stadium banner. Other surfaces are flat and rely on contrast. */
.tc-section--hero h1,
.tc-section--hero h2,
.tc-section--hero p {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

/* Gutenberg / legacy inline-coloured paragraphs: keep a defensive shadow
   because user-pasted content can use light hues that wouldn't pass AA
   on the dark background. We do NOT apply a `filter` brightness/contrast
   anymore — that was visually destroying brand colors and accent text. */
p[style*="color"],
span[style*="color"],
li[style*="color"],
.wp-block-paragraph[style*="color"],
.has-text-color {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Links */
a {
    color: var(--tc-green);
    text-decoration: none;
    transition: color var(--tc-transition);
}
a:hover {
    color: var(--tc-green-dark);
}

/* Images */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    color: var(--tc-text);
    line-height: 1.2;
    font-weight: 800;
}

h1 { font-size: clamp(28px, 5vw, 48px); }
h2 { font-size: clamp(24px, 4vw, 36px); }
h3 { font-size: clamp(20px, 3vw, 28px); }
h4 { font-size: clamp(18px, 2.5vw, 22px); }

/* Paragraphs */
p {
    color: var(--tc-text-secondary);
    line-height: 1.7;
    margin-bottom: var(--tc-space-md);
}
p:last-child {
    margin-bottom: 0;
}

/* Selection */
::selection {
    background: var(--tc-green);
    color: var(--tc-bg);
}

/* Focus */
:focus-visible {
    outline: 2px solid var(--tc-green);
    outline-offset: 2px;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: rgba(11, 16, 32, 0.6);
}
::-webkit-scrollbar-thumb {
    background: #4a6899;
    border-radius: var(--tc-radius-full);
    border: 2px solid rgba(11, 16, 32, 0.6);
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
    background: #39ff14;
}

/* Hidden utility */
.tc-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.tc-hidden { display: none !important; }

/* Skeleton loading */
.tc-skeleton {
    background: linear-gradient(90deg, var(--tc-soft) 25%, var(--tc-panel) 50%, var(--tc-soft) 75%);
    background-size: 200% 100%;
    animation: tc-skeleton-pulse 1.5s ease-in-out infinite;
    border-radius: var(--tc-radius-sm);
}
@keyframes tc-skeleton-pulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* =====================================================
   ACCESSIBILITY — prefers-reduced-motion
   Disables animations and transitions for users who
   have enabled "Reduce motion" in their OS settings.
===================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =====================================================
   MOBILE OVERRIDES — directly in base.css (not relying on mobile.css)
===================================================== */

@media (max-width: 767px) {
    /* Hide top banner — logo already in header */
    .tc-top-banner {
        display: none !important;
    }

    /* #7: usage badge rules moved to mobile.css only — no more duplicates */
}


/* =====================================================================
   SSO — Sprint C (May 2026)
   Continue with Google / Apple buttons + divider + error banner.
   Brand-faithful provider colors (Google white BG with multicolor G,
   Apple black BG with white wordmark) — Google Identity + Apple HIG
   require these specific treatments to comply with their brand
   guidelines. Don't restyle.
===================================================================== */

/* !important on layout rules to defeat any inherited button styling
   from the login form (the global .tc-btn rules can otherwise override
   our flex-column and produce side-by-side buttons). */
.tc-sso-buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
    width: 100%;
}

.tc-sso-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 14px 20px;
    border-radius: var(--tc-radius-sm);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none !important;
    border: 1px solid transparent;
    transition: transform var(--tc-transition), box-shadow var(--tc-transition), border-color var(--tc-transition);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.tc-sso-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
    text-decoration: none;
}

/* Google — official guideline: white BG + dark text. Border + shadow
   so it stands out on top of the translucent stadium panels. */
.tc-sso-btn--google {
    background: #ffffff;
    color: #1f1f1f;
    border-color: #d2d2d2;
}
.tc-sso-btn--google:hover {
    background: #f8f8f8;
    color: #1f1f1f;
    border-color: #b6b6b6;
}

/* Apple — official guideline: black BG + white text. Added a subtle
   white border so the button doesn't blend into the dark stadium
   background. Apple HIG allows a 1px outline as long as the fill stays
   pure black. */
.tc-sso-btn--apple {
    background: #000000;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.22);
}
.tc-sso-btn--apple:hover {
    background: #1a1a1a;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.4);
}

/* OR separator between SSO and email form */
.tc-sso-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0 20px;
    color: var(--tc-muted);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.tc-sso-divider::before,
.tc-sso-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--tc-line);
}

/* =====================================================================
   LOGIN MODAL — Sprint C (May 2026)
   Opens when the anonymous "Connexion" header button is clicked. Same
   SSO options as the full /connexion/ page, just delivered in a 1-click
   popup. Pattern: Stripe Dashboard, Vercel, Cal.com — keeps the user
   on the current page context instead of forcing a navigation.
===================================================================== */

.tc-login-modal {
    position: fixed;
    inset: 0;
    z-index: 10005; /* above cookie banner but below toasts */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.tc-login-modal[hidden] {
    display: none !important;
}

.tc-login-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 8, 16, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 0;
    padding: 0;
    cursor: pointer;
}

.tc-login-modal__panel {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: var(--tc-panel-solid);
    border: 1px solid var(--tc-line-strong);
    border-radius: var(--tc-radius);
    padding: 32px 28px 24px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55);
    animation: tc-login-modal-in 0.2s ease-out;
}

@keyframes tc-login-modal-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

.tc-login-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid transparent;
    background: transparent;
    color: var(--tc-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.tc-login-modal__close:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--tc-text);
    border-color: var(--tc-line);
}

.tc-login-modal__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--tc-text);
    margin: 0 0 6px;
    text-align: center;
}

.tc-login-modal__subtitle {
    font-size: 14px;
    color: var(--tc-muted);
    margin: 0 0 20px;
    text-align: center;
    line-height: 1.5;
}

/* The "Continue with email" link below the divider — outlined,
   non-CTA-looking, secondary action. */
.tc-login-modal__email-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: var(--tc-radius-sm);
    border: 1px solid var(--tc-line);
    color: var(--tc-text) !important;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 14px;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.tc-login-modal__email-link:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--tc-line-strong);
}
.tc-login-modal__email-link .tc-icon {
    color: var(--tc-muted);
}

/* Mobile compression — full-width modal with safer touch padding. */
@media (max-width: 480px) {
    .tc-login-modal { padding: 0; align-items: flex-end; }
    .tc-login-modal__panel {
        max-width: none;
        border-radius: var(--tc-radius) var(--tc-radius) 0 0;
        padding: 28px 20px 32px;
        animation: tc-login-modal-slide-up 0.25s ease-out;
    }
    @keyframes tc-login-modal-slide-up {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }
}

/* Mobile burger nav — SSO section integrated at the bottom (Sprint C).
   The buttons + email login + register are wrapped in .tc-nav__sso
   with a top divider so the burger menu reads as:
       — main nav items —
       ──────────────────
       [G] Continue with Google
       [🍎] Continue with Apple
       [✉] Email login
       [Register]                                       */
.tc-nav__sso {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 0 0;
    margin-top: 12px;
    border-top: 1px solid var(--tc-line);
}

/* Inside the burger, the SSO buttons keep their base styling but with
   slightly tighter padding to fit the mobile menu density. */
.tc-nav__sso .tc-sso-buttons {
    margin-bottom: 4px;
}
.tc-nav__sso .tc-sso-btn {
    padding: 12px 16px;
    font-size: 14px;
}

/* The "Email login" link mimics the other nav items but with an icon. */
.tc-nav__link--auth {
    display: flex !important;
    align-items: center;
    gap: 8px;
}

/* Header login button — text "Connexion" pill with subtle styling
   that matches the avatar pill aesthetic (glassmorphism). */
.tc-header__login {
    /* Inherits .tc-btn--sm + .tc-btn--outline — we just ensure the
       text color stays white (defeats anchor blue) and add a touch
       of polish on hover. */
    color: #ffffff !important;
}
.tc-header__login:hover {
    color: var(--tc-green) !important;
    border-color: var(--tc-green) !important;
}

/* Error banner — shown when /sso/<provider>/callback redirects back
   with sso_error= query param. Subtle red, doesn't scream — just
   informs. */
.tc-sso-error {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--tc-red-glow);
    border: 1px solid rgba(255, 107, 107, 0.3);
    border-radius: var(--tc-radius-sm);
    color: var(--tc-text);
    font-size: 14px;
    margin-bottom: 16px;
}
.tc-sso-error .tc-icon { color: var(--tc-red); flex-shrink: 0; }