/* ==========================================================================
   Tinhinan — couche "site" partagée (pages publiques hors portail)
   Prolonge tinhinan-theme.css avec l'identité du portail cinématique :
   bandeau « aube » en tête de page (visuels Higgsfield dans public/images/portal/),
   kicker DM Mono, CTA « Recevoir Tinhinan » dans la nav, boutons pilule, grain
   d'ambiance, entrées au scroll. Chargée APRÈS les <style> inline des pages.
   Source de vérité du design : docs/PORTAL_DESIGN_PACKAGE.md
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&display=swap');

:root {
    --night: #0d1410;
    --night-2: #122019;
    --dawn: #c24d2c;
    --dawn-gold: #c9a84c;
    --paper: #f2efea;
    --font-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
    --line: rgba(26, 26, 26, 0.10);
}
[data-theme="dark"] { --line: rgba(232, 232, 232, 0.10); }

html, body { overflow-x: hidden; overflow-x: clip; }
body { position: relative; }

/* ---------- Environnement : grain + dérive lente (une seule couche) ---------- */
.site-env {
    position: fixed; inset: -10%; z-index: 0; pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.45 0 0 0 0 0.35 0 0 0 0.16 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    opacity: .3; animation: siteEnvDrift 90s linear infinite -30s;
}
@keyframes siteEnvDrift { 0% { transform: translate3d(0,0,0); } 50% { transform: translate3d(-2%, -1.5%, 0); } 100% { transform: translate3d(0,0,0); } }
body.paused *, body.paused *::before, body.paused *::after { animation-play-state: paused !important; }
.pattern-overlay { display: none; } /* remplacé par le grain */

/* ---------- Nav : CTA + finitions ---------- */
.tinhinan-nav { background: rgba(245,240,230,.86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
[data-theme="dark"] .tinhinan-nav { background: rgba(26,26,26,.86); }
.tinhinan-nav .nav-links a::after { background: var(--gold); }
.tinhinan-nav .nav-cta {
    background: var(--emerald); color: var(--paper) !important; padding: 0.55rem 1rem !important; border-radius: 999px;
    font-weight: 600 !important; letter-spacing: .06em !important; transition: background-color .3s, transform .3s var(--ease-out);
}
.tinhinan-nav .nav-cta::after { display: none; }
.tinhinan-nav .nav-cta:hover { background: var(--emerald-deep); transform: translateY(-1px); color: var(--paper) !important; }
.tinhinan-nav .nav-links { gap: 1.15rem; }
.tinhinan-nav .nav-links a { white-space: nowrap; }
@media (max-width: 1320px) { .tinhinan-nav li.nav-cta-li { display: none; } }
/* Navigations longues : le conteneur est plafonne a 1400 px, donc une barre qui porte deja
   dix elements ou plus n'a de place a AUCUNE largeur d'ecran (140 px de debordement mesures
   a 1520 px). Le bouton injecte est alors simplement abandonne : il reste dans le menu replie
   et sur les pages a navigation courte. */
.tinhinan-nav .nav-links:has(> li:nth-child(10)) > li.nav-cta-li { display: none; }
.tinhinan-nav .nav-logo { letter-spacing: -0.01em; }

/* ---------- Kicker mono (partagé) ---------- */
.kicker, .site-kicker, .section-label {
    font-family: var(--font-mono) !important; font-size: .72rem !important; font-weight: 500 !important;
    letter-spacing: .14em !important; text-transform: uppercase; color: var(--terracotta);
}
:lang(ar) .kicker, :lang(ar) .site-kicker, :lang(ar) .section-label { font-family: 'Almarai', sans-serif !important; letter-spacing: 0 !important; text-transform: none; }

/* ---------- Bandeau « aube » : un sélecteur par page, un seul traitement ---------- */
.about-hero, .contact-hero, .archives-hero, .legal-hero, .error-hero, .referral-hero,
.events-hero, .bourse-hero, .search-hero, .ai-hero, .podcast-container > .page-header {
    position: relative; isolation: isolate; overflow: hidden;
    background: linear-gradient(180deg, var(--night-2) 0%, var(--night) 55%, #2a1e18 100%) !important;
    color: var(--paper) !important; text-align: center;
    border-bottom: 0 !important;
}
.about-hero, .contact-hero, .archives-hero, .legal-hero, .referral-hero, .events-hero, .bourse-hero, .search-hero, .ai-hero { padding: 6.5rem 2rem 4.5rem !important; }
.error-hero { padding: 8rem 2rem 5rem !important; }
.podcast-container > .page-header { margin: -2rem -1.5rem 3rem !important; padding: 5.5rem 2rem 4rem !important; border-radius: 0 0 28px 28px; }
/* photo de fond (données d'attribut posées par site.js), voile nuit → aube, lueur or */
.site-banner-photo { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center 60%; opacity: .55; transform: scale(1.04); animation: bannerKen 40s ease-in-out infinite alternate; }
@keyframes bannerKen { from { transform: scale(1.04) translateY(0); } to { transform: scale(1.1) translateY(-1.5%); } }
.site-banner-veil { position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(ellipse 80% 70% at 50% 60%, rgba(13,20,16,.35) 0%, rgba(13,20,16,.75) 70%, rgba(13,20,16,.9) 100%); }
.site-banner-glow { position: absolute; left: 50%; bottom: -26vh; width: 60vh; height: 60vh; margin-left: -30vh; z-index: -1; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(201,168,76,.55) 0%, rgba(194,77,44,.28) 40%, rgba(194,77,44,0) 70%); filter: blur(8px);
    animation: bannerGlow 8s ease-in-out infinite -2s; }
@keyframes bannerGlow { 0%,100% { opacity: .8; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
.site-banner-rule { display: block; width: 64px; height: 1px; margin: 1.25rem auto 0; background: var(--dawn-gold); opacity: .9; transform-origin: center; animation: ruleDraw 1.2s var(--ease-out) .2s both; }
@keyframes ruleDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* typographie du bandeau */
.about-hero h1, .contact-hero h1, .archives-hero h1, .legal-hero h1, .referral-hero h1, .events-hero .hero-title, .bourse-hero .bourse-hero-title,
.search-hero h1, .ai-hero h1, .podcast-container .page-title, .error-hero .error-title {
    font-family: 'Cormorant Garamond', Georgia, serif !important; font-weight: 700 !important; color: var(--paper) !important;
    font-size: clamp(2.4rem, 5vw, 4.2rem) !important; line-height: 1.04 !important; letter-spacing: -0.02em; margin: 0 auto .9rem !important; max-width: 22ch;
    text-shadow: 0 1px 2px rgba(5,8,6,.8), 0 10px 40px rgba(5,8,6,.6);
    animation: bannerRise .9s var(--ease-out) both;
}
:lang(ar) .about-hero h1, :lang(ar) .events-hero .hero-title, :lang(ar) .search-hero h1, :lang(ar) .podcast-container .page-title, :lang(ar) .bourse-hero-title, :lang(ar) .ai-hero h1 { font-family: 'Almarai', sans-serif !important; letter-spacing: 0; line-height: 1.3 !important; }
@keyframes bannerRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.about-hero p, .contact-hero p, .archives-hero p, .legal-hero p, .referral-hero p, .events-hero .hero-desc, .bourse-hero p,
.search-hero p, .ai-hero p, .podcast-container .page-subtitle, .error-hero .error-desc, .error-hero p {
    color: rgba(242,239,234,.88) !important; font-size: 1.08rem !important; max-width: 44ch; margin-left: auto !important; margin-right: auto !important; line-height: 1.6;
    animation: bannerRise .9s var(--ease-out) .12s both;
}
.about-hero .kicker, .contact-hero .kicker, .archives-hero .kicker, .legal-hero .kicker, .site-kicker { color: var(--dawn-gold) !important; margin-bottom: 1rem; animation: bannerRise .9s var(--ease-out) both; }
.error-hero .error-number { color: var(--dawn-gold) !important; opacity: .9 !important; text-shadow: 0 10px 40px rgba(5,8,6,.6); }
.error-hero .suggestions-title { color: rgba(242,239,234,.85) !important; }
.error-hero .suggestions-list a { color: var(--paper) !important; border-color: rgba(242,239,234,.35) !important; background: rgba(242,239,234,.06) !important; }
.error-hero .suggestions-list a:hover { background: var(--dawn-gold) !important; color: var(--night) !important; border-color: var(--dawn-gold) !important; }
.error-hero .suggestions { border-top-color: rgba(242,239,234,.25) !important; }
.error-hero .error-icon { color: var(--dawn-gold) !important; }
.error-hero .error-icon svg { color: var(--dawn-gold) !important; }
/* barre de recherche et contrôles posés sur le bandeau */
.search-hero input, .ai-hero input { background: var(--paper) !important; color: var(--ink) !important; }
.search-hero .search-box-wrap, .ai-hero .ai-hero-inner > * { position: relative; z-index: 1; }
.search-hero .popular-tag, .ai-hero .suggestion-chip { background: rgba(242,239,234,.08) !important; color: var(--paper) !important; border-color: rgba(242,239,234,.35) !important; }
.search-hero .popular-tag:hover, .ai-hero .suggestion-chip:hover { background: var(--dawn-gold) !important; color: var(--night) !important; border-color: var(--dawn-gold) !important; }
.events-hero, .bourse-hero, .referral-hero { color: var(--paper) !important; }
.referral-hero h1 { font-size: clamp(2.2rem, 4.5vw, 3.6rem) !important; }

/* podcast : le bouton RSS référençait --orange (inexistant) → fond transparent, texte invisible */
.rss-button { background: var(--terracotta) !important; color: var(--paper) !important; margin-bottom: 1.5rem !important; }
.rss-button:hover { background: var(--terracotta-light) !important; }

/* ---------- Titres de section ---------- */
.section-title, .mission-content h2, .legal-content h2, h2.section-heading { letter-spacing: -0.015em; }
.section-header .section-label { margin-bottom: .9rem; }

/* ---------- Boutons : pilule, easing ---------- */
.btn, .btn-primary, button.btn-primary, .btn-secondary, .btn-outline {
    border-radius: 999px !important; text-transform: none !important; letter-spacing: .02em !important; font-size: .95rem !important; font-weight: 600 !important;
    padding: .85rem 1.5rem !important;
    transition: transform .45s var(--ease-out), background-color .3s, box-shadow .45s, color .3s, border-color .3s !important;
}
.btn-primary { box-shadow: 0 10px 30px rgba(0,98,51,.22); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,98,51,.3); }
.btn-primary:active { transform: translateY(0); }
input[type="email"], input[type="text"], input[type="search"], textarea, select { border-radius: 12px !important; transition: border-color .3s, box-shadow .3s; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--emerald); outline-offset: 2px; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--emerald); outline-offset: 3px; }

/* ---------- Cartes : élévation douce, entrées au scroll ---------- */
.card, .article-card, .episode-card, .event-card, .archive-card, .audience-card, .testimonial-card, .step-card, .mission-card, .value-card, .team-card,
.contact-card, .info-card, .result-card, .search-result, .bourse-card, .stock-card, .faq-item, .pricing-card, .feature-card {
    transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out), border-color .3s !important;
}
.card:hover, .article-card:hover, .episode-card:hover, .event-card:hover, .archive-card:hover, .audience-card:hover, .testimonial-card:hover,
.mission-card:hover, .value-card:hover, .team-card:hover, .result-card:hover, .search-result:hover, .feature-card:hover { transform: translateY(-4px); box-shadow: 0 22px 56px rgba(26,26,26,.12) !important; }
.rv { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.rv.in { opacity: 1; transform: none; }
.rv.in.done { transition: none; }
.rv:nth-child(2).in { transition-delay: .08s; } .rv:nth-child(3).in { transition-delay: .16s; } .rv:nth-child(4).in { transition-delay: .24s; }
.rv:nth-child(5).in { transition-delay: .32s; } .rv:nth-child(n+6).in { transition-delay: .4s; }
.rv.in.done { transition-delay: 0s !important; }

/* ---------- Footer ---------- */
.footer-gradient { height: 2px; animation-duration: 60s; }
.tinhinan-footer { background: var(--night) !important; }
.tinhinan-footer .footer-logo span { color: var(--terracotta); }
.tinhinan-footer a { transition: color .3s; }
.tinhinan-footer a:hover { color: var(--dawn-gold) !important; }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
    .site-env, .site-banner-photo, .site-banner-glow, .site-banner-rule, .about-hero h1, .contact-hero h1, .archives-hero h1, .legal-hero h1, .referral-hero h1,
    .events-hero .hero-title, .bourse-hero .bourse-hero-title, .search-hero h1, .ai-hero h1, .podcast-container .page-title, .error-hero .error-title,
    .about-hero p, .contact-hero p, .archives-hero p, .legal-hero p, .events-hero .hero-desc, .search-hero p, .ai-hero p, .podcast-container .page-subtitle, .site-kicker, .kicker { animation: none !important; }
    .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
}
@media (max-width: 720px) {
    .about-hero, .contact-hero, .archives-hero, .legal-hero, .referral-hero, .events-hero, .bourse-hero, .search-hero, .ai-hero { padding: 5.5rem 1.25rem 3.5rem !important; }
    .podcast-container > .page-header { margin: -1.5rem -1rem 2rem !important; padding: 4.5rem 1.25rem 3rem !important; }
}

/* ---------- Pages autonomes : bandeau générique (.site-banner posé par site.js) + nav injectée ---------- */
.site-banner {
    position: relative; isolation: isolate; overflow: hidden;
    background: linear-gradient(180deg, var(--night-2) 0%, var(--night) 55%, #2a1e18 100%) !important;
    color: var(--paper) !important; text-align: center; border-bottom: 0 !important; margin-bottom: 2rem;
    padding: 6rem 2rem 4.5rem !important;
}
.site-banner-wrap { border-radius: 24px; margin: 1rem 0 2.5rem !important; padding: 4.5rem 2rem 3.5rem !important; }
.site-banner > .container { position: relative; z-index: 1; }
.site-banner h1 {
    font-family: 'Cormorant Garamond', Georgia, serif !important; font-weight: 700 !important; color: var(--paper) !important;
    font-size: clamp(2.4rem, 5vw, 4.2rem) !important; line-height: 1.04 !important; letter-spacing: -0.02em; margin: 0 auto .9rem !important; max-width: 22ch;
    text-shadow: 0 1px 2px rgba(5,8,6,.8), 0 10px 40px rgba(5,8,6,.6); animation: bannerRise .9s var(--ease-out) both; position: relative; z-index: 1;
}
.site-banner p, .site-banner .subtitle, .site-banner .lead {
    color: rgba(242,239,234,.88) !important; font-size: 1.08rem !important; max-width: 48ch; margin-left: auto !important; margin-right: auto !important; line-height: 1.6;
    animation: bannerRise .9s var(--ease-out) .12s both; position: relative; z-index: 1;
}
.site-banner .site-kicker { position: relative; z-index: 1; }
.site-banner .hero-cta, .site-banner .btn, .site-banner .cta-button, .site-banner .btn-primary { position: relative; z-index: 1; }
.site-banner .btn-secondary, .site-banner .btn-outline { color: var(--paper) !important; border-color: rgba(242,239,234,.5) !important; background: rgba(242,239,234,.08) !important; }
.site-banner .site-banner-rule { position: relative; z-index: 1; }
/* la nav injectée doit rester au-dessus des mises en page "position: fixed" de certaines pages */
.site-nav-injected { position: sticky; top: 0; z-index: 1000; }
[data-page="login"] .site-nav-injected { position: relative; }
/* ces pages n'ont aucune règle .container : contenu pleine largeur. On pose le conteneur du site */
[data-page="enterprise"] .container, [data-page="sponsor"] .container, [data-page="analyst"] .container, [data-page="insights"] .container, [data-page="trends"] .container, [data-page="data-dashboard"] .container { max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; }
/* pages à fond blanc pur : ramener le canevas sable (jamais de #fff pur) */
[data-page="pricing"] body, [data-page="enterprise"] body, [data-page="sponsor"] body, [data-page="analyst"] body, [data-page="insights"] body, [data-page="trends"] body, [data-page="data-dashboard"] body { background: var(--sand); }
@media (max-width: 720px) { .site-banner { padding: 5rem 1.25rem 3.5rem !important; } .site-banner-wrap { padding: 3.5rem 1.25rem 3rem !important; } }
@media (prefers-reduced-motion: reduce) { .site-banner h1, .site-banner p { animation: none !important; } }