/* ============================================================
 *  home.css — Styles spécifiques à la page d'accueil
 *  (hero, chiffres-clés, animations d'apparition)
 *  Animations GPU-friendly : transform / opacity uniquement,
 *  aucune animation liée au défilement (pas de parallax).
 * ============================================================ */

/* ------------------------------------------------------------
 *  HERO — bandeau d'accroche pleine largeur
 * ------------------------------------------------------------ */

.hero {
    position: relative;
    isolation: isolate;          /* contexte d'empilement propre pour le glow */
    /* Full-bleed EXACT.
     * Largeur = zone visible = 100vw moins la barre de défilement (--sbw).
     * Les marges --hero-ml / --hero-mr sont calées AU PIXEL par JS sur le bord
     * réel du conteneur (qui a un padding asymétrique en desktop).
     * Repli CSS (si JS off) : approximation centrée classique. */
    width: calc(100vw - var(--sbw, 0px));
    margin-left: var(--hero-ml, calc(50% - 50vw + var(--sbw, 0px) / 2));
    margin-right: var(--hero-mr, calc(50% - 50vw + var(--sbw, 0px) / 2));
    margin-bottom: 3rem;
    padding: 5rem 1.2rem 4.5rem;
    overflow: hidden;
    text-align: center;
    color: #fff;
    /* Base sombre garantissant le contraste du texte ; la couleur vient
     * des zones lumineuses animées (.hero__glow) posées par-dessus. */
    background: linear-gradient(135deg, #2a2018 0%, #342820 55%, #1e1712 100%);
}

/* Voile sombre central : posé ENTRE le glow (z0) et le texte (z1).
 * Transparent sur les bords (le rétroéclairage reste visible), légèrement
 * sombre au centre → garantit le contraste du texte quoi qu'il arrive. */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(
        ellipse 70% 75% at center,
        rgba(20, 15, 10, 0.55) 0%,
        rgba(20, 15, 10, 0.18) 55%,
        transparent 100%
    );
}

/* --- Rétroéclairage RGB (zones de lumière qui dérivent, type clavier gamer) ---
 * Décoratif, posé sous le texte (z-index). Couleurs vives de marque, floutées
 * et à opacité maîtrisée : le texte blanc reste ≥ 4,5:1 (WCAG AA) en tout point. */
.hero__glow {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.hero__glow span {
    position: absolute;
    width: 48vw;
    height: 48vw;
    max-width: 620px;
    max-height: 620px;
    /* Forme organique de départ (asymétrique) au lieu d'un cercle parfait */
    border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
    filter: blur(70px);
    will-change: transform, border-radius;
}

/* Chaque blob combine 2 animations : la dérive (position) + la morph (forme),
 * avec des durées distinctes → fluctuation organique, jamais synchronisée. */
.hero__glow .g1 {
    background: var(--coghit-teal);
    left: -8%; top: -35%;
    opacity: 0.40;
    max-width: 496px;            /* -20 % (zone turquoise) */
    max-height: 496px;
    animation: hero-drift-1 13s ease-in-out infinite,
               blob-morph 19s ease-in-out infinite;
}

.hero__glow .g2 {
    background: var(--coghit-teal-light);   /* zone de droite → turquoise */
    right: -8%; bottom: -45%;
    opacity: 0.34;
    max-width: 496px;            /* -20 % (zone turquoise) */
    max-height: 496px;
    animation: hero-drift-2 17s ease-in-out infinite,
               blob-morph 23s ease-in-out infinite -4s;
}

.hero__glow .g3 {
    background: var(--coghit-gold-dark);    /* zone centrale → or (accent) */
    left: 38%; top: 55%;
    opacity: 0.30;
    animation: hero-drift-3 21s ease-in-out infinite,
               blob-morph 17s ease-in-out infinite -9s;
}

@keyframes blob-morph {
    0%, 100% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; }
    33%      { border-radius: 60% 40% 42% 58% / 55% 48% 52% 45%; }
    66%      { border-radius: 38% 62% 58% 42% / 48% 62% 38% 52%; }
}

@keyframes hero-drift-1 {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(22%, 18%, 0) scale(1.18); }
}
@keyframes hero-drift-2 {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); }
    50%      { transform: translate3d(-20%, -16%, 0) scale(1); }
}
@keyframes hero-drift-3 {
    0%, 100% { transform: translate3d(0, 0, 0) scale(0.9); }
    50%      { transform: translate3d(-26%, -22%, 0) scale(1.15); }
}

/* --- Recollage parfait au header (uniquement sur la page d'accueil) ---
 * On annule les espacements que Material ajoute au-dessus du contenu
 * pour que le hero démarre pile sous l'en-tête. */
.md-main__inner:has(.hero) { margin-top: 0; }

.md-content__inner:has(.hero) {
    margin-top: 0;
    padding-top: 0;
}

.md-content__inner:has(.hero)::before { display: none; }

.hero__inner {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
}

/* .hero préfixé pour battre `.md-typeset h1` de extra.css.
 * Plafond réduit (2.5rem) : reste sur une ligne en desktop ; le bas de
 * la fourchette (2rem) conserve le rendu mobile qui te plaît. */
.hero .hero__title {
    font-size: clamp(2rem, 3.8vw, 2.5rem);
    line-height: 1.15;
    font-weight: 800;
    margin: 0 0 1rem;
    color: #fff;                 /* blanc sur fond sombre → ~17:1 */
}

.hero .hero__title .accent {
    color: var(--coghit-gold);   /* hero sombre → or vif (contraste OK) */
}

.hero__subtitle {
    font-size: clamp(1rem, 2.2vw, 1.25rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.82);
    max-width: 620px;
    margin: 0 auto 2.2rem;
}

.hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    justify-content: center;
}

/* Boutons du hero (indépendants du thème clair/sombre) */
.hero .md-button {
    margin: 0;
    border-radius: 0.4rem;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

/* .md-button doublé = spécificité renforcée pour battre les règles
 *  de extra.css ciblant les boutons en mode sombre (slate). */
.hero .md-button.md-button--primary {
    background-color: var(--coghit-gold);
    border-color: var(--coghit-gold);
    color: #1e1712 !important;   /* texte foncé sur or vif → ~6,5:1 (AA) */
}

.hero .md-button.md-button:not(.md-button--primary) {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    background-color: transparent !important;
}

.hero .md-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
}

.hero .md-button.md-button:not(.md-button--primary):hover {
    background-color: rgba(255, 255, 255, 0.12) !important;
    border-color: #fff !important;
}

/* Vague décorative en bas du hero */
.hero__wave {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    width: 100%;
    height: 60px;
    display: block;
    z-index: 1;
    fill: var(--md-default-bg-color);
}

/* ------------------------------------------------------------
 *  CHIFFRES-CLÉS
 * ------------------------------------------------------------ */

.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin: 2.5rem 0 1rem;
}

.stat {
    text-align: center;
    padding: 1.4rem 0.8rem;
    border-radius: 0.6rem;
    background: color-mix(in srgb, var(--md-primary-fg-color) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--md-default-fg-color) 8%, transparent);
}

.stat__num {
    display: block;
    font-size: clamp(1.6rem, 4vw, 2.3rem);
    font-weight: 800;
    line-height: 1;
    color: var(--coghit-gold-large);   /* grand texte → or vif (≥3:1) */
}

.stat__label {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--md-default-fg-color--light);
}

@media (max-width: 700px) {
    .stats { grid-template-columns: repeat(2, 1fr); }
}

/* ------------------------------------------------------------
 *  CARTES (grid cards Material) — survol dynamique
 * ------------------------------------------------------------ */

.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
    transition: transform 0.18s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid > .card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--md-accent-fg-color) 60%, transparent);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10);
}

.md-typeset .grid.cards .lg svg {
    transition: transform 0.2s ease;
}

.md-typeset .grid.cards > ul > li:hover .lg svg {
    transform: scale(1.12);
    color: var(--md-accent-fg-color);
}

/* ------------------------------------------------------------
 *  APPARITION AU DÉFILEMENT (scroll reveal)
 *  Activé par reveal.js (ajout de la classe .is-visible).
 *  Si JS désactivé : le contenu reste visible (pas de .reveal).
 * ------------------------------------------------------------ */

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    will-change: opacity, transform;
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Léger décalage en cascade pour les cartes */
.reveal[data-reveal-delay="1"] { transition-delay: 0.08s; }
.reveal[data-reveal-delay="2"] { transition-delay: 0.16s; }
.reveal[data-reveal-delay="3"] { transition-delay: 0.24s; }

/* Respect des préférences d'accessibilité */
@media (prefers-reduced-motion: reduce) {
    .hero__glow span { animation: none; }
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}