/* AI loader components — états de génération IA visibles partout dans l'app.
 *
 * Trois variantes :
 *   .ai-loading            inline spinner (pour boutons / champs)
 *   .ai-shimmer            placeholder texte qui pulse (skeleton)
 *   .ai-generating-banner  bandeau flottant avec statut IA (génération longue)
 *
 * Inclus dans static/css/main.css ou directement dans la page.
 */

/* ======= Inline marque (bouton "Générer") — tracé « A » doré ======= */
.ai-loading{
    display:inline-flex;
    align-items:center;
    gap:8px;
    pointer-events:none;
    opacity:.85;
}
.ai-loading .brand-mark{
    width:15px;
    height:16px;
    flex-shrink:0;
}
.ai-loading .brand-stroke-left{
    animation:brand-draw-a 2.4s ease-in-out infinite;
}
.ai-loading .brand-stroke-right{
    animation:brand-draw-a 2.4s ease-in-out infinite;
    animation-delay:.28s;
}
.ai-loading .brand-stroke-bar{
    animation:brand-draw-a 2.4s ease-in-out infinite;
    animation-delay:.56s;
}

/* Tracé « A » (défini aussi dans page-nav-loader.css si présent) */
.brand-mark{
    display:block;
    overflow:visible;
}
.brand-stroke{
    fill:none;
    stroke:var(--museum-gold,#c9a86a);
    stroke-width:2.75;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-dasharray:1;
    stroke-dashoffset:1;
    filter:drop-shadow(0 0 6px rgba(201,168,106,.35));
}
@keyframes brand-draw-a{
    0%{stroke-dashoffset:1;opacity:.35}
    35%{stroke-dashoffset:0;opacity:1}
    55%{stroke-dashoffset:0;opacity:1}
    100%{stroke-dashoffset:1;opacity:.35}
}

/* ======= Shimmer skeleton text ======= */
.ai-shimmer{
    background:linear-gradient(90deg,#e2e8f0 0%,#f1f5f9 50%,#e2e8f0 100%);
    background-size:200% 100%;
    animation:ai-shimmer 1.6s ease-in-out infinite;
    border-radius:6px;
    color:transparent !important;
    user-select:none;
    pointer-events:none;
    min-height:1em;
}
@keyframes ai-shimmer{
    0%{background-position:200% 0}
    100%{background-position:-200% 0}
}

/* ======= Floating banner — génération IA en cours ======= */
.ai-generating-banner{
    position:fixed;
    top:18px;
    right:18px;
    z-index:9990;
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 18px 12px 14px;
    background:var(--museum-black,#000);
    color:var(--museum-white,#fff);
    border-radius:0;
    border:1px solid var(--border,#e5e5e5);
    box-shadow:none;
    font-family:'Inter',system-ui,sans-serif;
    font-size:.9rem;
    font-weight:500;
    max-width:380px;
    animation:ai-banner-in .35s cubic-bezier(.16,1,.3,1);
}
.ai-generating-banner.is-hiding{
    animation:ai-banner-out .25s ease forwards;
}
@keyframes ai-banner-in{
    from{opacity:0;transform:translateY(-12px) scale(.96)}
    to{opacity:1;transform:none}
}
@keyframes ai-banner-out{
    to{opacity:0;transform:translateY(-8px) scale(.97)}
}
.ai-generating-banner .ai-glow{
    width:34px;
    height:34px;
    border-radius:0;
    background:transparent;
    position:relative;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:none;
    animation:none;
}
.ai-generating-banner .ai-glow .brand-mark{
    width:28px;
    height:30px;
}
.ai-generating-banner .ai-glow .brand-stroke-left{
    animation:brand-draw-a 2.4s ease-in-out infinite;
}
.ai-generating-banner .ai-glow .brand-stroke-right{
    animation:brand-draw-a 2.4s ease-in-out infinite;
    animation-delay:.28s;
}
.ai-generating-banner .ai-glow .brand-stroke-bar{
    animation:brand-draw-a 2.4s ease-in-out infinite;
    animation-delay:.56s;
}
.ai-generating-banner .ai-text{
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;
}
.ai-generating-banner .ai-title{
    font-weight:700;
    letter-spacing:-.01em;
    display:flex;
    align-items:center;
    gap:6px;
}
.ai-generating-banner .ai-dots::after{
    content:"";
    display:inline-block;
    animation:ai-dots 1.4s steps(4,end) infinite;
}
@keyframes ai-dots{
    0%{content:""}
    25%{content:"."}
    50%{content:".."}
    75%{content:"..."}
    100%{content:""}
}
.ai-generating-banner .ai-sub{
    font-size:.78rem;
    color:rgba(255,255,255,.7);
    font-weight:400;
    transition:opacity .18s ease;
}

/* ======= Inline AI-token typing effect (streaming) ======= */
.ai-cursor::after{
    content:"▍";
    margin-left:2px;
    color:#6366f1;
    animation:ai-blink 1s steps(2,end) infinite;
}
@keyframes ai-blink{50%{opacity:0}}

/* ======= Mode sombre ======= */
@media (prefers-color-scheme: dark){
    .ai-shimmer{
        background:linear-gradient(90deg,#1e293b 0%,#334155 50%,#1e293b 100%);
        background-size:200% 100%;
    }
}

/* ======= Mobile ======= */
@media (max-width:640px){
    .ai-generating-banner{
        top:auto;
        bottom:18px;
        left:18px;
        right:18px;
        max-width:none;
    }
}

/* ===========================================================================
 * MICRO-INTERACTIONS — entrée scroll-reveal + transitions douces
 * ===========================================================================
 * Classes utilitaires à ajouter à n'importe quel élément :
 *   data-reveal              fade-in + slight slide-up à l'entrée du viewport
 *   data-reveal="left"       slide depuis la gauche
 *   data-reveal="right"      slide depuis la droite
 *   data-reveal="scale"      scale 96% → 100%
 *   data-reveal-delay="200"  délai en ms
 *
 * Animées via IntersectionObserver dans ai-loader.js (autoWire).
 */
[data-reveal]{
    opacity:0;
    transform:translateY(18px);
    transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);
    will-change:opacity,transform;
}
[data-reveal="left"]  { transform:translateX(-24px) translateY(0); }
[data-reveal="right"] { transform:translateX(24px)  translateY(0); }
[data-reveal="scale"] { transform:scale(.96); }

[data-reveal].is-revealed{
    opacity:1;
    transform:translateY(0) translateX(0) scale(1);
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
    [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
    .ai-loading .brand-stroke, .ai-shimmer, .ai-generating-banner .ai-glow .brand-stroke,
    .ai-generating-banner .ai-dots::after,
    .ai-cursor::after { animation:none !important; }
}

/* ======= Buttons : hover lift partout ======= */
.btn, .ad-btn, .bp-btn, .dc-btn, .bs-btn-primary, .hero-btn-primary,
.b-btn{
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.btn:hover, .ad-btn:hover, .bp-btn:hover, .dc-btn:hover,
.bs-btn-primary:hover, .b-btn:hover{
    transform:translateY(-1px);
}

/* ======= Card hover lift ======= */
.tpl-card, .ad-card, .bp-card, .b-kpi{
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tpl-card:hover{
    transform:translateY(-2px);
}