/* =========================================================
   POK DIGITAL — motifs.css
   Éléments signature additionnels : ridge divider, split-title,
   comparateur avant/après. Chargé après theme.css + style.css.
   Tout est construit sur les variables existantes (--c-electric,
   --c-surface, --c-on-surface...) donc ça reste 100% themable
   par client, comme le reste du template.
   ========================================================= */

/* ---- Ridge divider — bande "ligne de toit" en dents de scie ---- */
.ridge {
    height: 12px;
    width: 100%;
    background:
        linear-gradient(135deg, var(--c-electric) 25%, transparent 25.5%),
        linear-gradient(225deg, var(--c-electric) 25%, transparent 25.5%);
    background-size: 24px 24px;
    opacity: .9;
}
.ridge.dim { opacity: .25; }

/* Remplace la courbe ellipse du bas de .page-hero par le même motif */
.page-hero::after {
    height: 12px;
    background:
        linear-gradient(135deg, var(--c-electric) 25%, transparent 25.5%),
        linear-gradient(225deg, var(--c-electric) 25%, transparent 25.5%);
    background-size: 24px 24px;
    clip-path: none;
    opacity: .9;
}

/* Filigrane toiture en fond des bandeaux page-hero (toutes pages intérieures) */
.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 240'%3E%3Cpath d='M10,220 L120,40 L160,90 L200,20 L240,90 L280,40 L390,220' fill='none' stroke='white' stroke-width='1.4' opacity='0.12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right -40px top -20px;
    background-size: 46% auto;
    pointer-events: none;
}

/* ---- Split-title : mots qui montent au chargement ---- */
[data-split] .word { display: inline-block; overflow: hidden; vertical-align: top; }
[data-split] .word span {
    display: inline-block;
    transform: translateY(110%);
    animation: motifRise .8s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes motifRise { to { transform: translateY(0); } }

/* Roofline dessinée au chargement (hero d'accueil) */
.hero-roofline { position: absolute; pointer-events: none; opacity: .35; z-index: 0; }
.hero-roofline path { fill: none; stroke: var(--c-electric); stroke-width: 1.6; }

/* ---- Comparateur avant/après (image composite unique, moitié gauche = avant) ---- */
.compare {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    aspect-ratio: 16/8.68;
    cursor: ew-resize;
    user-select: none;
    box-shadow: var(--shadow-lg);
    --pos: 50%;
}
.compare .layer {
    position: absolute; inset: 0;
    background-repeat: no-repeat;
    background-size: 200% 100%;
}
.compare .layer-after  { background-position: right center; }
.compare .layer-before {
    background-position: left center;
    clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.compare .c-tag {
    position: absolute; top: 14px;
    font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: #fff; background: rgba(0,0,0,.55); backdrop-filter: blur(4px);
    padding: 6px 12px; border-radius: 999px;
    transition: opacity .2s ease;
}
.compare .c-tag-before { left: 14px; }
.compare .c-tag-after  { right: 14px; }
.compare .c-handle {
    position: absolute; top: 0; bottom: 0; left: var(--pos);
    width: 3px; background: #fff; transform: translateX(-50%);
    box-shadow: 0 0 0 1px rgba(0,0,0,.15);
}
.compare .c-knob {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 44px; height: 44px; border-radius: 50%;
    background: #fff; display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-md);
}
.compare .c-knob svg { width: 17px; height: 17px; }
.compare-hint {
    text-align: center; font-size: 12.5px; color: var(--c-text-muted); margin-top: 10px;
}

/* =========================================================
   PANACHE — bandeau défilant, chiffres géants, CTA flottant
   ========================================================= */

/* ---- Bandeau défilant (marquee) ---- */
.marquee-strip {
    background: var(--c-navy);
    overflow: hidden;
    white-space: nowrap;
    padding: 14px 0;
    border-top: 1px solid rgba(255,255,255,.08);
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.marquee-track {
    display: inline-block;
    animation: marqueeScroll 28s linear infinite;
}
.marquee-track span {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255,255,255,.9);
    padding: 0 20px;
}
.marquee-track .dot { color: var(--c-electric); padding: 0 4px; }
@keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ---- Chiffres géants en fond des étapes du process ---- */
.process-step { position: relative; overflow: visible; }
.process-step .step-number {
    position: absolute;
    top: -.4em; left: -.1em;
    font-family: var(--font-display);
    font-size: 7rem;
    font-weight: 800;
    line-height: 1;
    color: var(--c-electric);
    opacity: .12;
    z-index: 0;
    pointer-events: none;
}
.process-step h3, .process-step p { position: relative; z-index: 1; }

/* ---- CTA inline (bandeau coloré dans le contenu) ---- */
.inline-cta-band {
    margin: 3rem auto 0;
    max-width: 1180px;
    padding: 2rem 2.25rem;
    border-radius: var(--radius-xl);
    background: linear-gradient(120deg, var(--c-electric-10, rgba(var(--c-electric-rgb),.14)), transparent);
    border: 1px solid rgba(var(--c-electric-rgb), .35);
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
.inline-cta-band p { font-weight: 700; font-size: 1.05rem; color: var(--c-text); margin: 0; max-width: 480px; }
.inline-cta-band .btn { flex: none; }

/* ---- Barre CTA flottante (toutes tailles d'écran) ---- */
.floating-cta {
    position: fixed; left: 50%; bottom: 22px; z-index: 90;
    transform: translate(-50%, 140%);
    display: flex; align-items: center; gap: 10px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 999px;
    padding: 8px 8px 8px 20px;
    box-shadow: var(--shadow-lg);
    transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.floating-cta.show { transform: translate(-50%, 0); }
.floating-cta span { font-size: 13.5px; font-weight: 600; color: var(--c-on-surface); white-space: nowrap; }
.floating-cta .btn { padding: .6rem 1.1rem; font-size: 13px; }
@media (max-width: 560px) {
    .floating-cta span { display: none; }
    .floating-cta { padding: 8px; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
    [data-split] .word span { animation-duration: .01ms !important; transform: translateY(0); }
    .hero-roofline path { transition: none !important; }
}

/* =========================================================
   EFFETS "WOW" — natifs / GPU, coût quasi nul
   ========================================================= */

/* ---- Transitions natives entre pages (cross-document View Transitions) ----
   Zero JS, zero coût si non supporté (dégradation = navigation normale). */
@view-transition { navigation: auto; }

@keyframes vt-wipe-out { to   { clip-path: inset(0 0 0 100%); } }
@keyframes vt-wipe-in  { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
::view-transition-old(root) { animation: .5s cubic-bezier(.65,0,.35,1) both vt-wipe-out; }
::view-transition-new(root) { animation: .5s cubic-bezier(.65,0,.35,1) both vt-wipe-in; }

/* ---- Halo du hero réactif au curseur (remplace la position fixe de .hero::before) ---- */
.hero { --mx: 62%; --my: 30%; }
.hero::before {
    top: var(--my);
    left: var(--mx);
    right: auto;
    transform: translate(-50%, -50%);
    width: 55vw; height: 55vw;
    transition: left .7s cubic-bezier(.22,1,.36,1), top .7s cubic-bezier(.22,1,.36,1);
}

/* ---- Boutons magnétiques ---- */
.btn-primary, .btn-secondary { will-change: transform; }

/* ---- Grain/texture très léger sur les bandes sombres (hero, page-hero, cta-band) ---- */
.hero, .page-hero, .cta-band { isolation: isolate; }
.hero::after, .page-hero::before, .cta-band::before { will-change: auto; }
.hero, .page-hero, .cta-band {
    background-image:
        linear-gradient(135deg, var(--c-navy) 0%, var(--c-navy-deep) 60%, var(--c-electric) 140%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
.cta-band { background-image: linear-gradient(135deg, var(--c-navy) 0%, var(--c-navy-deep) 50%, var(--c-electric) 100%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E"); }