/* ==========================================================================
   CINÉMA — la direction artistique « 18 h 47 » étendue à tout le site
   Chargée en tout dernier sur les 11 pages. Le contenu ne change pas.
     · Scènes : cadre arrondi posé dans la page, nuit, disque de lumière,
       grain de pellicule (en-têtes de page, secteurs, démo vocale, appel
       final, diapositives, connexion).
     · Titres très grands et serrés, un mot en italique à empattement.
     · Chiffres en caractères très fins, comme l'heure « 18:47 ».
     · Cartes dépolies posées sur la lumière, comme des notifications.
   ========================================================================== */
:root {
    --nuit-1: #0A1730;
    --nuit-2: #060D1C;
    --bleu-pale: #BFDBFE;
    --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    --lumiere: radial-gradient(circle at 38% 34%, #BFDBFE 0%, #60A5FA 26%, #2563EB 52%, #1E3A8A 74%, #0F1F4D 100%);
    --lumiere-halo: 0 0 120px 20px rgba(59, 130, 246, 0.42), 0 0 320px 80px rgba(37, 99, 235, 0.25);
}

/* ---------------------------------------------------------------- TITRES */
.section-title {
    font-size: clamp(2.5rem, 4.8vw, 4.1rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.048em;
    text-wrap: balance;
}
.page-hero h1 em,
.legal-content h1 em {
    background: linear-gradient(180deg, #DBEAFE 10%, #93C5FD 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}
.uc-hero-content h2 em,
.af-titre em,
.voix-titre em { color: var(--bleu-pale); -webkit-text-fill-color: var(--bleu-pale); }
.section-subtitle,
.solutions-header p,
.recit-entete p:not(.section-tag) { font-size: 1.15rem; color: #8E9BB0; }

/* Accroches qui étaient encore en capitales espacées. */
.logos-cloud-label,
.flux-legende {
    text-transform: none;
    letter-spacing: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #93C5FD;
    opacity: 1;
}

/* Les filets entre sections disparaissent : le rythme vient de l'espace. */
.gradient-divider { display: none; }

/* ---------------------------------------------------------------- CHIFFRES FINS */
.ring-value { font-weight: 300; letter-spacing: -0.04em; font-size: 1.45rem; }
.chiffre-valeur { font-weight: 200; letter-spacing: -0.05em; }
.uc-hero-metric .uc-metric-val { font-weight: 300; letter-spacing: -0.045em; }

/* ---------------------------------------------------------------- SCÈNES
   Base commune : nuit, grain, contenu au-dessus. La lumière se place au
   cas par cas. */
.appel-final,
.voix-tuile,
.uc-hero-section { position: relative; isolation: isolate; overflow: hidden; }

.appel-final::after,
.voix-tuile::after,
.diapo::after,
.login-inner::after {
    content: '';
    position: absolute;
    inset: -50%;
    z-index: 0;
    pointer-events: none;
    background-image: var(--grain);
    opacity: 0.14;
    mix-blend-mode: overlay;
    animation: sceneGrain 1.2s steps(6) infinite;
}
.appel-final > *, .voix-tuile > * { position: relative; z-index: 1; }

/* --- En-têtes de page (Contact, Dashboard, À propos) : sobres, le titre
       et le sous-titre seuls, sans cadre ni lumière. */
.page-hero { padding: 170px 0 70px; }
.page-hero h1 { font-size: clamp(3rem, 7vw, 6rem); line-height: 0.98; letter-spacing: -0.055em; }

/* --- Pages secteur : la photo devient une scène encadrée. */
.uc-hero-section {
    margin: 12px;
    border-radius: 34px;
    min-height: 700px;
}
/* Grain : on réutilise le ::before qui servait de bande de fondu sous la
   photo (inutile maintenant que la photo est encadrée). */
.uc-hero-section::before {
    content: '';
    position: absolute;
    top: -50%; right: -50%; bottom: -50%; left: -50%;
    width: auto;
    height: auto;
    z-index: 1;
    pointer-events: none;
    background: var(--grain);
    opacity: 0.16;
    mix-blend-mode: overlay;
    animation: sceneGrain 1.2s steps(6) infinite;
}
.uc-hero-section::after {
    background:
        linear-gradient(180deg, transparent 45%, rgba(6, 13, 28, 0.85) 100%),
        radial-gradient(ellipse at 75% 50%, transparent 0%, rgba(6, 13, 28, 0.35) 60%, rgba(6, 13, 28, 0.85) 100%);
}
/* Les chiffres deviennent des notifications posées sur la photo. */
.uc-hero-metric {
    background: rgba(12, 22, 44, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(22px) saturate(1.3);
    -webkit-backdrop-filter: blur(22px) saturate(1.3);
}

/* --- Démo vocale et appel final : le disque de lumière derrière la carte. */
.voix-tuile, .appel-final {
    background:
        radial-gradient(90% 80% at 0% 0%, #10275A 0%, transparent 60%),
        linear-gradient(180deg, var(--nuit-1) 0%, var(--nuit-2) 100%);
}
.voix-tuile::before,
.appel-final::before {
    content: '';
    position: absolute;
    z-index: 0;
    right: -12%;
    top: 50%;
    width: min(62vw, 720px);
    aspect-ratio: 1;
    border-radius: 50%;
    translate: 0 -50%;
    background: var(--lumiere);
    box-shadow: var(--lumiere-halo);
    opacity: 0.85;
    animation: sceneRespire 9s ease-in-out infinite;
}
/* Sur la lumière, les cartes passent en verre dépoli. */
.voix-lecteur,
.af-agenda {
    background: rgba(12, 22, 44, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(22px) saturate(1.3);
    -webkit-backdrop-filter: blur(22px) saturate(1.3);
}
.voix-cle, .af-cle { color: #93C5FD; }

/* --- Diapositives du carrousel : le grain par-dessus la lumière. */
.diapo::after { z-index: 0; opacity: 0.12; }
.diapo-texte, .diapo-visuel { position: relative; z-index: 1; }

/* --- Connexion : la carte seule, en verre dépoli. */
.login-box { z-index: 1; }
.login-inner { overflow: hidden; background: rgba(12, 22, 44, 0.62); backdrop-filter: blur(24px) saturate(1.3); -webkit-backdrop-filter: blur(24px) saturate(1.3); border: 1px solid rgba(255, 255, 255, 0.1); }

/* ---------------------------------------------------------------- PIED DE PAGE
   Le nom en très grand, qui s'éteint vers le bas : la dernière image. */
footer { overflow: hidden; }
footer::after {
    content: 'Automya';
    display: block;
    margin: 56px 0 -0.22em;
    text-align: center;
    font-size: clamp(5rem, 19vw, 17rem);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.065em;
    background: linear-gradient(180deg, rgba(147, 197, 253, 0.22) 0%, rgba(147, 197, 253, 0) 85%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    pointer-events: none;
    user-select: none;
}

/* ---------------------------------------------------------------- PETITS ÉCRANS */
@media (max-width: 900px) {
    .page-hero { padding: 130px 0 50px; }
    .uc-hero-section { border-radius: 26px; min-height: 0; }
    .voix-tuile::before, .appel-final::before { right: -40%; top: 85%; width: 130vw; }
}
@media (max-width: 620px) {
    .uc-hero-section { margin: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .appel-final::before, .appel-final::after,
    .voix-tuile::before, .voix-tuile::after, .diapo::after, .uc-hero-section::before,
    .login-inner::after { animation: none; }
}

/* Aucune page ne doit glisser de côté sur téléphone. Les formes décoratives
   de l'ancienne version (.blob) dépassaient de quelques pixels en bougeant.
   « clip » et non « hidden » : hidden créerait une zone de défilement et
   casserait le téléphone collant du récit (position: sticky). */
html, body { overflow-x: clip; }


/* « Retour au site » : un vrai bouton, posé au-dessus de la carte (il était
   en texte, et en absolu il finissait par-dessus le logo). */
.login-back {
    position: static;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 14px;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #EAF0F8;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}
.login-back:hover { background: rgba(255, 255, 255, 0.15); color: #FFFFFF; transform: translateX(-2px); }
.login-back:focus-visible { outline: 2px solid #93C5FD; outline-offset: 3px; }
.login-inner > *:not(.login-aura) { position: relative; z-index: 1; }