/* ==========================================================================
   DRAGON - Hero des pages d'univers (DRA-461)
   ==========================================================================

   Charge par sap-bw.php et sap-abap.php via le drapeau $useUniversHeroCss
   lu dans includes/header.php. Prefixe `uh-` : aucune collision avec
   homepage.css (charge sur les memes pages) ni avec home-v2.css.

   /!\ Meme fond, meme trame et memes boutons que `.mk2-hero` sur l'accueil
   (home-v2.css). Si l'un change, changer l'autre : un visiteur qui passe de
   l'accueil a une page d'univers ne doit pas changer d'epoque.

   Le hero se compose de :
     .uh-hero            fond marine + trame, padding qui absorbe le header fixe
     .uh-hero-inner      grille deux colonnes : texte | visuel
     .uh-hero-eyebrow    badge au-dessus du titre (point vert qui pulse)
     .uh-btn             boutons, --primary (orange) et --ghost (contour)
     .uh-hero-visual     colonne de droite, le produit en action
     .uh-hero-proof      ligne de confiance sur un filet, trois faits

   Le VISUEL lui-meme (terminal, diagramme...) est propre a chaque page et
   reste style dans la page.
   ========================================================================== */

.uh-hero {
    position: relative;
    /* Le header du site est fixe (48px) et recouvre le haut du hero : le
       padding doit l'absorber. Meme valeur que .mk2-hero sur l'accueil. */
    padding: 5.5rem 1.5rem 0;
    background: #0b2233;
    color: #fff;
    overflow: hidden;
}
/* Quadrillage « plan technique », estompe vers le bas. */
.uh-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(60,178,225,0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(60,178,225,0.07) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(to bottom, black 20%, transparent 95%);
}
/* Halo bleu derriere le visuel. */
.uh-hero::after {
    content: '';
    position: absolute;
    top: 0;
    right: -12%;
    width: 48vw;
    height: 48vw;
    background: radial-gradient(circle, rgba(60,178,225,0.14) 0%, transparent 62%);
    pointer-events: none;
}
.uh-hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    /* `minmax(0, …)` : un item de grille a une largeur minimale « auto »,
       celle de son contenu. Avec un visuel non retractable (ligne en nowrap,
       SVG...), la colonne deborderait de l'ecran sur mobile. */
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 3.5rem;
    align-items: center;
    max-width: 1150px;
    margin: 0 auto;
}

.uh-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.4rem;
    padding: 0.32rem 0.85rem;
    border: 1px solid rgba(78,201,138,0.45);
    border-radius: 999px;
    color: #7fdcae;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}
/* Point vert qui pulse : le produit est disponible, pas annonce. */
.uh-hero-eyebrow::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #4ec98a;
    animation: uh-pulse 2s ease-in-out infinite;
}
@keyframes uh-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(78,201,138,0.55); }
    50%      { box-shadow: 0 0 0 6px rgba(78,201,138,0); }
}

.uh-hero-title {
    margin: 0 0 1.2rem;
    font-size: clamp(1.9rem, 3.6vw, 2.8rem);
    font-weight: 800;
    line-height: 1.12;
    color: #fff;
    text-wrap: balance;
}
.uh-hero-lead {
    max-width: 34rem;
    margin: 0 0 2rem;
    color: rgba(255,255,255,0.86);
    font-size: clamp(1rem, 1.5vw, 1.12rem);
    line-height: 1.7;
}

.uh-hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.uh-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.85rem 1.6rem;
    border-radius: 8px;
    font-size: 0.98rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.15s ease, background-color 0.15s ease;
}
.uh-btn:hover { transform: translateY(-2px); }
.uh-btn--primary {
    background: #F2971C;
    color: #fff;
    box-shadow: 0 8px 20px -6px rgba(242,151,28,0.55);
}
.uh-btn--primary:hover { background: #d27d0a; }
.uh-btn--ghost {
    background: rgba(255,255,255,0.08);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.35);
}
.uh-btn--ghost:hover { background: rgba(255,255,255,0.16); }

/* Ligne de confiance : trois faits sur un filet, pas des cartes. */
.uh-hero-proof {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem 2.5rem;
    max-width: 1150px;
    margin: 3.5rem auto 0;
    padding: 1.6rem 0 2rem;
    border-top: 1px solid rgba(255,255,255,0.12);
    list-style: none;
}
.uh-hero-proof span {
    display: block;
    margin-bottom: 0.25rem;
    color: rgba(215,236,247,0.55);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.uh-hero-proof strong {
    display: block;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
}

@media (max-width: 860px) {
    .uh-hero { padding-top: 5rem; }
    .uh-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
    .uh-hero-proof {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.1rem;
        margin-top: 2.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .uh-hero-eyebrow::before { animation: none; }
}