:root {
    /* Brand palette */
    --pfsc-primary: #435ee3; /* primaire */
    --pfsc-secondary: #fae53c; /* secondaire */
    --pfsc-button: #fae53c; /* bouton */
    --pfsc-accent: #ffac28; /* connexe */
    --pfsc-bg: #F7F9FC;
    --pfsc-bg-dark: #0b1020;
    --pfsc-surface: #FFFFFF;
    --pfsc-surface-dark: #0f172a;
    --pfsc-border: #E5E7EB;
    --pfsc-border-dark: rgba(255, 255, 255, 0.08);
    --pfsc-text: #0B1220;
    --pfsc-text-dark: #f8fafc;

    /* Status */
    --pfsc-success: #0E9F6E;
    --pfsc-warning: #B78103;
    --pfsc-danger:  #B91C1C;

    --radius-xl: 1rem;
    --radius-2xl: 1.25rem;
    --shadow-soft: 0 8px 30px rgba(2,6,23,0.06), 0 2px 8px rgba(2,6,23,0.04);
    --shadow-glass: 0 10px 40px rgba(2,6,23,0.08), inset 0 1px 0 rgba(255,255,255,0.2);

    /* Generic aliases (optional) */
    --primary: var(--pfsc-primary);
    --secondary: var(--pfsc-secondary);
    --accent: var(--pfsc-accent);
    --button: var(--pfsc-button);
    --bg: var(--pfsc-bg);
    --surface: var(--pfsc-surface);
    --text: var(--pfsc-text);
    --muted: #6B7280;
    --border: var(--pfsc-border);
    --success: var(--pfsc-success);
    --warning: var(--pfsc-warning);
    --danger: var(--pfsc-danger);
}

.section-2 {
    --pfsc-primary: #0F3D91;
    --pfsc-secondary: #B11E3B;
    --pfsc-bg: #F7F9FC;
}

.shadow-soft { box-shadow: var(--shadow-soft); }
.shadow-glass { box-shadow: var(--shadow-glass); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.border-default { border-color: var(--pfsc-border); }
.dark .border-default { border-color: var(--pfsc-border-dark); }
.surface { background: var(--pfsc-surface); }
.dark .surface { background: var(--pfsc-surface-dark); }
.brand-gradient { background-image: linear-gradient(135deg, var(--pfsc-primary), var(--pfsc-secondary)); }
.brand-gradient-text { background-image: linear-gradient(135deg, var(--pfsc-primary), var(--pfsc-secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ring-brand { box-shadow: 0 0 0 3px rgba(67, 94, 227, .30), 0 0 0 6px rgba(250, 229, 60, .20); }

[x-cloak] { display: none !important; }

/* Prevent unwanted horizontal scroll on mobile (LTR and RTL) */
html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
/* Defensive utility to clamp any container to the viewport width */
.overflow-clip-x { overflow-x: clip !important; max-width: 100vw; }

/* Visually hide honeypot (RTL-safe, no offscreen left/right) */
.hp-offscreen {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
    white-space: nowrap !important;
}

@keyframes blob {
    0% { transform: translate(0,0) scale(1); }
    33% { transform: translate(20px,-30px) scale(1.05); }
    66% { transform: translate(-25px,20px) scale(0.98); }
    100% { transform: translate(0,0) scale(1); }
}
@keyframes fadeup {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.hover-lift { transition: transform .2s ease, box-shadow .2s ease; }
.hover-lift:hover { transform: translateY(-2px); }
.btn-press { transition: transform .06s ease; }
.btn-press:active { transform: translateY(1px) scale(0.99); }

.skeleton {
    position: relative;
    overflow: hidden;
    background-color: rgba(2, 6, 23, 0.06);
}
.dark .skeleton { background-color: rgba(255, 255, 255, 0.08); }
.skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
    animation: shimmer 1.4s infinite;
}
@keyframes shimmer {
    100% { transform: translateX(100%); }
}

.feature-gradient {
    background-image:
        radial-gradient(1200px 600px at 10% 10%, rgba(59,130,246,0.20), transparent 60%),
        radial-gradient(1000px 600px at 90% 20%, rgba(236,72,153,0.15), transparent 60%),
        linear-gradient(180deg, #1896be 0%, #1896be 100%);
}
.modal-scroll { scrollbar-gutter: stable; }
.scrollbar-stable { scrollbar-gutter: stable; }
.feature-dots {
    background-image: radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1px);
    background-size: 12px 12px;
    background-position: 0 0;
    mask-image: radial-gradient(circle at center, black 60%, transparent 80%);
    pointer-events: none;
}
@keyframes float-slow {
    0% { transform: translateY(0) }
    50% { transform: translateY(-6px) }
    100% { transform: translateY(0) }
}
.animate-float-slow { animation: float-slow 6s ease-in-out infinite; }

.reveal.is-visible .path-draw {
    stroke-dasharray: 800;
    stroke-dashoffset: 0;
    animation: pathdraw 2s ease forwards;
}
@keyframes pathdraw {
    from { stroke-dashoffset: 800; }
    to { stroke-dashoffset: 0; }
}

@keyframes input-glow {
	0% { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.45); }
	100% { box-shadow: 0 0 0 10px rgba(250, 204, 21, 0); }
}
.focus-glow:focus {
	animation: input-glow .7s ease-out;
}

.theme-rose {
	--pfsc-primary: #EC4899;
	--pfsc-secondary: #FACC15;
	--pfsc-surface: #fff1f7;
	--pfsc-surface-dark: #1c1220;
	--pfsc-border: rgba(236, 72, 153, 0.25);
	--pfsc-border-dark: rgba(236, 72, 153, 0.25);
}
.bg-rose-soft {
	background: linear-gradient(180deg, #fff7fb 0%, #fff1f7 100%);
}
.rose-gradient {
	background-image: radial-gradient(600px 300px at 10% 0%, rgba(236,72,153,.20), transparent 60%),
	                  radial-gradient(600px 300px at 90% 0%, rgba(250,204,21,.18), transparent 60%);
}

/* Hero highlight color for key words in the H1 */
.hero-highlight {
	color: #fb5346;
}
/* Hero prefix color for the first part of the H1 */
.hero-prefix {
	color: #3bc5df;
}

/* Typing caret */
.type-caret {
	display: inline-block;
	margin-left: 2px;
	animation: caret-blink 1s steps(2, start) infinite;
}
@keyframes caret-blink {
	0%, 40% { opacity: 1; }
	50%, 100% { opacity: 0; }
}