/* ==========================================================================
   Solution Park 2026 — thème enfant Kadence
   Fichier généré par theme/build/build.sh (tokens.css + icons.css + main.css) :
   ne pas modifier assets/css/sp.css directement.
   ========================================================================== */

/* 1. Charte --------------------------------------------------------------- */
:root {
	--sp-red: #FF3131;
	--sp-red-action: #E4232B;
	--sp-red-action-hover: #C81C24;
	--sp-red-text: #B5121A;
	--sp-red-text-hover: #8E0D14;
	--sp-red-soft: #FFE5E3;
	--sp-red-soft-text: #A3111A;
	--sp-red-on-dark: #FF6B6B;

	--sp-ink: #100F0D;
	--sp-ink-2: #1B1917;
	--sp-ink-3: #34302C;
	--sp-bg-soft: #F6F4F2;
	--sp-bg-softer: #FAF9F8;
	--sp-border: #E8E4E0;
	--sp-border-strong: #D5CFC9;
	--sp-text: #1D1B19;
	--sp-text-2: #57514B;
	--sp-text-3: #6E675F;
	--sp-on-dark-2: #BDB6AF;
	--sp-on-dark-3: #9A928A;
	--sp-on-dark-soft: #D6D0CA;
	--sp-line-on-dark: rgba(255, 255, 255, 0.08);

	--sp-live: #4ADE80;
	--sp-ok-bg: #DDF3E2;
	--sp-ok-text: #1D6B34;

	--sp-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--sp-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;

	--sp-content: 1200px;
	--sp-gutter: clamp(20px, 4vw, 40px);
	--sp-section-y: clamp(64px, 8vw, 112px);

	--sp-radius-btn: 14px;
	--sp-radius-card: 28px;
	--sp-radius-section: 40px;

	--sp-shadow-card: 0 30px 60px -40px rgba(16, 15, 13, 0.35);
	--sp-shadow-float: 0 24px 48px -18px rgba(16, 15, 13, 0.45);
	--sp-shadow-red: 0 14px 34px -12px rgba(255, 49, 49, 0.75);
	--sp-focus: 0 0 0 3px #FFFFFF, 0 0 0 6px var(--sp-red-action);

	--sp-ease: cubic-bezier(.16, .84, .24, 1);
}

/* 2. Icônes (masques CSS, couleur = currentColor) -------------------------- */
:root {
	--sp-i-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	--sp-i-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E");
	--sp-i-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
	--sp-i-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	--sp-i-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E");
	--sp-i-mobile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='2.5' width='10' height='19' rx='2.5'/%3E%3Cpath d='M11 18.5h2'/%3E%3C/svg%3E");
	--sp-i-desktop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='2'/%3E%3Cpath d='M8 20h8M12 16v4'/%3E%3C/svg%3E");
	--sp-i-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.6 3.8 5.6 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.6-3.8-9S9.5 5.6 12 3z'/%3E%3C/svg%3E");
	--sp-i-store: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5 5.5 4h13L20 9.5zM5.5 9.5V20h13V9.5M10 20v-5h4v5'/%3E%3C/svg%3E");
	--sp-i-barrier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V6M3 21h4M5 8h16v3H5M9 8l-2 3M13 8l-2 3M17 8l-2 3M21 8l-2 3'/%3E%3C/svg%3E");
	--sp-i-gate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V6M3 21h4M5 8h16v3H5'/%3E%3C/svg%3E");
	--sp-i-enter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 17l5-5-5-5M15 12H3M21 4v16'/%3E%3C/svg%3E");
	--sp-i-qr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Cpath d='M14 14h3v3h-3zM17 17h4v4h-4'/%3E%3C/svg%3E");
	--sp-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
	--sp-i-plane: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15.5 13.5 11V5a1.5 1.5 0 0 0-3 0v6L3 15.5v2l7.5-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5l-2-1.5v-4l7.5 2.5z'/%3E%3C/svg%3E");
	--sp-i-train: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='14' rx='3'/%3E%3Cpath d='M5 10h14M9 21l1.5-4M15 21l-1.5-4'/%3E%3C/svg%3E");
	--sp-i-anchor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='5' r='2'/%3E%3Cpath d='M12 7v14M5 13a7 7 0 0 0 14 0M8 11h8'/%3E%3C/svg%3E");
	--sp-i-city: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V5l8-2v18M12 8l8 2v11M3 21h18'/%3E%3C/svg%3E");
	--sp-i-bus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='14' rx='3'/%3E%3Cpath d='M4 11h16M8 21v-4M16 21v-4'/%3E%3C/svg%3E");
	--sp-i-key: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='M11 12l9-9M17 6l2 2M15 8l2 2'/%3E%3C/svg%3E");
	--sp-i-truck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6h11v10H2zM13 9h4.5l3.5 3.5V16h-8'/%3E%3Ccircle cx='6' cy='17.5' r='1.8'/%3E%3Ccircle cx='17' cy='17.5' r='1.8'/%3E%3C/svg%3E");
	--sp-i-card: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2.5'/%3E%3Cpath d='M2.5 10h19M6.5 15h4'/%3E%3C/svg%3E");
	--sp-i-plate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='10' rx='2'/%3E%3Cpath d='M6 12h2M10.5 12h3M16 12h2'/%3E%3C/svg%3E");
	--sp-i-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
	--sp-i-dashboard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='9' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='5' rx='1.5'/%3E%3Crect x='14' y='12' width='7' height='9' rx='1.5'/%3E%3Crect x='3' y='16' width='7' height='5' rx='1.5'/%3E%3C/svg%3E");
	--sp-i-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='17' rx='2'/%3E%3Cpath d='M8 2v4M16 2v4M4 10h16'/%3E%3C/svg%3E");
	--sp-i-calendar-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='17' rx='2'/%3E%3Cpath d='M8 2v4M16 2v4M4 10h16M12 13v5M9.5 15.5h5'/%3E%3C/svg%3E");
	--sp-i-bars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M21 20H3'/%3E%3C/svg%3E");
	--sp-i-trend: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8M15 7h6v6'/%3E%3C/svg%3E");
	--sp-i-camera: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h3l2-3h8l2 3h3v13H3z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E");
	--sp-i-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E");
	--sp-i-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3.5 6.5 8.5 6.5 8.5-6.5'/%3E%3C/svg%3E");
	--sp-i-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
	--sp-i-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5A7 7 0 0 1 19 9.5C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E");
	--sp-i-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
	--sp-i-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
	--sp-i-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0 1 13 0M16 4.6a3.5 3.5 0 0 1 0 6.8M18.5 20a6.5 6.5 0 0 0-3-5.5'/%3E%3C/svg%3E");
	--sp-i-bolt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E");
	--sp-i-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4.5 6v6c0 4.6 3.2 8 7.5 9 4.3-1 7.5-4.4 7.5-9V6z'/%3E%3C/svg%3E");
	--sp-i-message: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H8l-4 4z'/%3E%3C/svg%3E");
	--sp-i-euro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 6.5A7 7 0 1 0 17 17.5M4 10h9M4 14h9'/%3E%3C/svg%3E");
	--sp-i-apple: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701'/%3E%3C/svg%3E");
	--sp-i-google-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22.018 13.298l-3.919 2.218-3.515-3.493 3.543-3.521 3.891 2.202a1.49 1.49 0 0 1 0 2.594zM1.337.924a1.486 1.486 0 0 0-.112.568v21.017c0 .217.045.419.124.6l11.155-11.087L1.337.924zm12.207 10.065l3.258-3.238L3.45.195a1.466 1.466 0 0 0-.946-.179l11.04 10.973zm0 2.067l-11 10.933c.298.036.612-.016.906-.183l13.324-7.54-3.23-3.21z'/%3E%3C/svg%3E");
	--sp-i-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 3 2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1L3.2 9.5l6.1-.9z' fill='%23000'/%3E%3C/svg%3E");
}
.sp-ico--chevron-down { --sp-ico: var(--sp-i-chevron-down); }
.sp-ico--phone { --sp-ico: var(--sp-i-phone); }
.sp-ico--menu { --sp-ico: var(--sp-i-menu); }
.sp-ico--arrow-right { --sp-ico: var(--sp-i-arrow-right); }
.sp-ico--external { --sp-ico: var(--sp-i-external); }
.sp-ico--mobile { --sp-ico: var(--sp-i-mobile); }
.sp-ico--desktop { --sp-ico: var(--sp-i-desktop); }
.sp-ico--globe { --sp-ico: var(--sp-i-globe); }
.sp-ico--store { --sp-ico: var(--sp-i-store); }
.sp-ico--barrier { --sp-ico: var(--sp-i-barrier); }
.sp-ico--gate { --sp-ico: var(--sp-i-gate); }
.sp-ico--enter { --sp-ico: var(--sp-i-enter); }
.sp-ico--qr { --sp-ico: var(--sp-i-qr); }
.sp-ico--check { --sp-ico: var(--sp-i-check); }
.sp-ico--plane { --sp-ico: var(--sp-i-plane); }
.sp-ico--train { --sp-ico: var(--sp-i-train); }
.sp-ico--anchor { --sp-ico: var(--sp-i-anchor); }
.sp-ico--city { --sp-ico: var(--sp-i-city); }
.sp-ico--bus { --sp-ico: var(--sp-i-bus); }
.sp-ico--key { --sp-ico: var(--sp-i-key); }
.sp-ico--truck { --sp-ico: var(--sp-i-truck); }
.sp-ico--card { --sp-ico: var(--sp-i-card); }
.sp-ico--plate { --sp-ico: var(--sp-i-plate); }
.sp-ico--lock { --sp-ico: var(--sp-i-lock); }
.sp-ico--dashboard { --sp-ico: var(--sp-i-dashboard); }
.sp-ico--calendar { --sp-ico: var(--sp-i-calendar); }
.sp-ico--calendar-plus { --sp-ico: var(--sp-i-calendar-plus); }
.sp-ico--bars { --sp-ico: var(--sp-i-bars); }
.sp-ico--trend { --sp-ico: var(--sp-i-trend); }
.sp-ico--camera { --sp-ico: var(--sp-i-camera); }
.sp-ico--grid { --sp-ico: var(--sp-i-grid); }
.sp-ico--mail { --sp-ico: var(--sp-i-mail); }
.sp-ico--clock { --sp-ico: var(--sp-i-clock); }
.sp-ico--pin { --sp-ico: var(--sp-i-pin); }
.sp-ico--close { --sp-ico: var(--sp-i-close); }
.sp-ico--plus { --sp-ico: var(--sp-i-plus); }
.sp-ico--users { --sp-ico: var(--sp-i-users); }
.sp-ico--bolt { --sp-ico: var(--sp-i-bolt); }
.sp-ico--shield { --sp-ico: var(--sp-i-shield); }
.sp-ico--message { --sp-ico: var(--sp-i-message); }
.sp-ico--euro { --sp-ico: var(--sp-i-euro); }
.sp-ico--apple { --sp-ico: var(--sp-i-apple); }
.sp-ico--google-play { --sp-ico: var(--sp-i-google-play); }
.sp-ico--star { --sp-ico: var(--sp-i-star); }
[class*="sp-ico--"]::before {
	content: "";
	display: inline-block;
	flex-shrink: 0;
	width: 1.15em;
	height: 1.15em;
	background-color: currentColor;
	-webkit-mask: var(--sp-ico) center / contain no-repeat;
	mask: var(--sp-ico) center / contain no-repeat;
}

/* 3. Base ------------------------------------------------------------------ */
body {
	font-family: var(--sp-font);
	color: var(--sp-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

::selection {
	background: var(--sp-red);
	color: var(--sp-ink);
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: none;
	box-shadow: var(--sp-focus);
	border-radius: 8px;
}

/* Surlignage natif utilisé pour colorer une partie d'un titre. */
mark.has-inline-color {
	background: none;
	padding: 0;
}

.sp-mono {
	font-family: var(--sp-mono);
}

/* 4. Contenu Kadence : les sections gèrent leurs propres espacements -------- */
#wrapper.wp-site-blocks > * {
	margin-top: 0;
	margin-bottom: 0;
}

.entry-content.single-content .sp-section,
.single-content .sp-section,
.single-content .sp-section + .sp-section {
	margin-top: 0;
	margin-bottom: 0;
}

.single-content .sp-section :is(p, h1, h2, h3, h4, h5, h6, ul, ol, figure, blockquote, form, .wp-block-buttons, .wp-block-button, .wp-block-group, .wp-block-columns, .wp-block-image, .wp-block-separator, .wp-block-list, .wp-block-details) {
	margin-top: 0;
	margin-bottom: 0;
}

.single-content .sp-section :is(ul, ol)[class*="is-style-sp-"] {
	padding-left: 0;
}

/* 5. Sections -------------------------------------------------------------- */
.sp-section {
	position: relative;
	padding: var(--sp-section-y) var(--sp-gutter);
}

/* Kadence retire le padding latéral des blocs pleine largeur : on le rétablit pour les sections. */
.entry-content .sp-section.alignfull,
.editor-styles-wrapper .sp-section.alignfull {
	padding-left: var(--sp-gutter);
	padding-right: var(--sp-gutter);
}

.wp-block-group.is-style-sp-dark {
	background-color: var(--sp-ink);
	color: var(--sp-on-dark-2);
}

.wp-block-group.is-style-sp-soft {
	background-color: var(--sp-bg-soft);
}

.wp-block-group.is-style-sp-red {
	background-color: var(--sp-red);
	color: var(--sp-ink);
}

.single-content .is-style-sp-dark :is(h1, h2, h3, h4, h5, h6),
.single-content .is-style-sp-card-dark :is(h1, h2, h3, h4, h5, h6),
.single-content .is-style-sp-panel :is(h1, h2, h3, h4, h5, h6) {
	color: #FFFFFF;
}

.single-content .is-style-sp-red :is(h1, h2, h3, h4, h5, h6) {
	color: var(--sp-ink);
}

.is-style-sp-dark strong,
.is-style-sp-card-dark strong {
	color: #FFFFFF;
}

/* Liens dans le texte sur fond sombre : blancs et soulignés, y compris au survol (Kadence les passe en noir). */
.single-content :is(.is-style-sp-dark, .is-style-sp-card-dark, .is-style-sp-panel) :not(.sp-tile) > p a:not(.wp-block-button__link) {
	color: #FFFFFF;
	text-decoration-line: underline;
	text-decoration-color: rgba(255, 255, 255, 0.45);
	text-underline-offset: 0.2em;
}

.single-content :is(.is-style-sp-dark, .is-style-sp-card-dark, .is-style-sp-panel) :not(.sp-tile) > p a:not(.wp-block-button__link):is(:hover, :focus-visible) {
	color: #FFFFFF;
	text-decoration-color: currentColor;
}

.sp-rounded-top {
	border-radius: var(--sp-radius-section) var(--sp-radius-section) 0 0;
}

.sp-overlap-top {
	margin-top: calc(-1 * var(--sp-radius-section)) !important;
	z-index: 1;
}

/* Empilement vertical : une grille d'une colonne se mesure mieux qu'une colonne flex
   quand elle contient des rangées qui passent à la ligne ou des grilles. */
.wp-block-group.sp-stack {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.sp-grid-bg {
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
	background-size: 64px 64px;
}

/* 6. Titres ------------------------------------------------------------------ */
.single-content .sp-section h1,
.sp-h1 {
	font-size: clamp(44px, 6vw, 78px);
	line-height: 1.02;
	font-weight: 700;
	letter-spacing: -0.035em;
	text-wrap: balance;
}

.single-content .sp-section h2,
.sp-h2 {
	font-size: clamp(34px, 4vw, 52px);
	line-height: 1.08;
	font-weight: 700;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.single-content .sp-section h3,
.sp-h3 {
	font-size: clamp(22px, 2.4vw, 32px);
	line-height: 1.12;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.single-content .sp-section h4,
.sp-h4 {
	font-size: 20px;
	line-height: 1.3;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.single-content .sp-section .sp-title-sm {
	font-size: 18px;
	line-height: 1.35;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.single-content .sp-section .sp-title-md {
	font-size: clamp(20px, 2vw, 24px);
	line-height: 1.25;
	font-weight: 600;
}

.single-content .sp-section p {
	text-wrap: pretty;
}

/* 7. Textes ------------------------------------------------------------------ */
p.is-style-sp-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	line-height: 1.4;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sp-red-text);
}

p.is-style-sp-eyebrow::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--sp-red);
	flex-shrink: 0;
}

.is-style-sp-dark p.is-style-sp-eyebrow,
.is-style-sp-card-dark p.is-style-sp-eyebrow {
	color: var(--sp-red-on-dark);
}

.has-text-align-center.is-style-sp-eyebrow {
	align-self: center;
}

p.is-style-sp-chip {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px 8px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
	color: var(--sp-on-dark-soft);
	font-size: 13px;
	line-height: 1.3;
	font-weight: 500;
}

p.is-style-sp-chip::before {
	content: "";
	width: 12px;
	height: 12px;
	flex-shrink: 0;
	background:
		radial-gradient(circle at 2.5px 2.5px, var(--sp-red) 2.4px, transparent 2.8px),
		linear-gradient(var(--sp-red), var(--sp-red)) 0 7px / 5px 5px no-repeat,
		linear-gradient(var(--sp-red), var(--sp-red)) 7px 7px / 5px 5px no-repeat;
}

p.is-style-sp-tag {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 8px;
	width: fit-content;
	min-height: 32px;
	padding: 0 12px;
	border-radius: 999px;
	background: var(--sp-red-soft);
	color: var(--sp-red-soft-text);
	font-size: 13px;
	line-height: 1.2;
	font-weight: 600;
}

.is-style-sp-card-dark p.is-style-sp-tag {
	background: var(--sp-red);
	color: var(--sp-ink);
}

p.is-style-sp-lead {
	font-size: 19px;
	line-height: 1.6;
	color: var(--sp-text-2);
}

.is-style-sp-dark p.is-style-sp-lead {
	color: var(--sp-on-dark-2);
}

p.is-style-sp-label {
	font-size: 13px;
	line-height: 1.4;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sp-text-3);
}

.is-style-sp-dark p.is-style-sp-label,
.is-style-sp-card-dark p.is-style-sp-label,
.is-style-sp-panel p.is-style-sp-label {
	color: var(--sp-on-dark-3);
}

p.is-style-sp-note {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--sp-text-3);
}

p.is-style-sp-note::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--sp-red);
	box-shadow: 0 0 12px var(--sp-red);
	flex-shrink: 0;
}

.is-style-sp-dark p.is-style-sp-note {
	color: var(--sp-on-dark-3);
}

p.is-style-sp-num {
	font-family: var(--sp-mono);
	font-size: 13px;
	line-height: 1.4;
	color: var(--sp-red-text);
}

.is-style-sp-dark p.is-style-sp-num {
	color: var(--sp-red-on-dark);
}

.sp-muted {
	color: var(--sp-text-3);
}

.is-style-sp-dark .sp-muted {
	color: var(--sp-on-dark-3);
}

/* 8. Listes ------------------------------------------------------------------ */
.single-content ul.is-style-sp-bullets,
ul.is-style-sp-bullets {
	list-style: none;
	padding-left: 0;
	display: grid;
	gap: 12px;
	font-size: 15px;
	color: var(--sp-text);
}

ul.is-style-sp-bullets > li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
}

ul.is-style-sp-bullets > li::before {
	content: "";
	width: 8px;
	height: 8px;
	margin-top: 0.55em;
	border-radius: 2px;
	background: var(--sp-red);
	flex-shrink: 0;
}

.is-style-sp-dark ul.is-style-sp-bullets,
.is-style-sp-card-dark ul.is-style-sp-bullets {
	color: var(--sp-on-dark-soft);
}

ul.is-style-sp-bullets.sp-cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 24px;
}

.single-content ul.is-style-sp-pills,
ul.is-style-sp-pills {
	list-style: none;
	padding-left: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

ul.is-style-sp-pills > li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 38px;
	margin: 0;
	padding: 0 14px;
	border-radius: 999px;
	border: 1px solid var(--sp-border);
	background: #FFFFFF;
	color: var(--sp-text);
	font-size: 14px;
	line-height: 1.2;
	white-space: nowrap;
}

.is-style-sp-dark ul.is-style-sp-pills > li {
	border-color: rgba(255, 255, 255, 0.12);
	background: transparent;
	color: #EDE8E3;
}

ul.is-style-sp-pills > li[class*="sp-ico--"]::before {
	width: 16px;
	height: 16px;
	color: var(--sp-red-on-dark);
}

/* Plateformes (« Tout au même endroit ») */
ul.is-style-sp-pills.sp-platforms {
	justify-content: center;
	gap: 10px;
}

ul.is-style-sp-pills.sp-platforms > li {
	min-height: 46px;
	padding: 0 18px;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 600;
	box-shadow: 0 10px 24px -18px rgba(16, 15, 13, 0.4);
}

ul.is-style-sp-pills.sp-platforms > li.sp-highlight {
	border: 1px dashed var(--sp-red-action);
	background: var(--sp-red-soft);
	color: var(--sp-red-text);
}

.is-style-sp-dark ul.is-style-sp-pills.sp-platforms > li,
.is-style-sp-card-dark ul.is-style-sp-pills.sp-platforms > li,
.is-style-sp-panel ul.is-style-sp-pills.sp-platforms > li {
	background: var(--sp-ink-2);
	border-color: var(--sp-ink-3);
	color: #FFFFFF;
	box-shadow: none;
}

.is-style-sp-dark ul.is-style-sp-pills.sp-platforms > li.sp-highlight,
.is-style-sp-card-dark ul.is-style-sp-pills.sp-platforms > li.sp-highlight,
.is-style-sp-panel ul.is-style-sp-pills.sp-platforms > li.sp-highlight {
	background: transparent;
	border-color: var(--sp-red-on-dark);
	color: var(--sp-red-on-dark);
}

.single-content ol.is-style-sp-numbered,
ol.is-style-sp-numbered {
	list-style: none;
	padding-left: 0;
	counter-reset: sp-num;
	display: grid;
}

ol.is-style-sp-numbered > li {
	counter-increment: sp-num;
	display: grid;
	grid-template-columns: 28px 1fr;
	gap: 12px;
	margin: 0;
	padding: 20px 0;
	border-top: 1px solid var(--sp-border);
	font-size: 15px;
	line-height: 1.55;
}

ol.is-style-sp-numbered > li:last-child {
	border-bottom: 1px solid var(--sp-border);
}

ol.is-style-sp-numbered > li::before {
	content: counter(sp-num, decimal-leading-zero);
	font-family: var(--sp-mono);
	font-size: 12px;
	line-height: 2;
	color: var(--sp-red-text);
}

.is-style-sp-dark ol.is-style-sp-numbered > li {
	border-color: var(--sp-line-on-dark);
	color: #EDE8E3;
}

.is-style-sp-dark ol.is-style-sp-numbered > li::before {
	color: var(--sp-red-on-dark);
}

ul.is-style-sp-codes {
	list-style: none;
	padding-left: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	font-family: var(--sp-mono);
	font-size: 11px;
}

ul.is-style-sp-codes > li {
	margin: 0;
	padding: 3px 6px;
	border-radius: 6px;
	background: var(--sp-bg-soft);
	color: var(--sp-text-2);
}

.is-style-sp-dark ul.is-style-sp-codes > li,
.is-style-sp-card-dark ul.is-style-sp-codes > li {
	background: rgba(255, 255, 255, 0.07);
	color: var(--sp-on-dark-soft);
}

.single-content ul.is-style-sp-plain,
ul.is-style-sp-plain {
	list-style: none;
	padding-left: 0;
	display: grid;
	gap: 10px;
}

ul.is-style-sp-plain > li {
	margin: 0;
}

/* Tuiles de fonctions (icône + libellé) */
.single-content ul.sp-feature-list,
ul.sp-feature-list {
	list-style: none;
	padding-left: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

ul.sp-feature-list > li {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 20px 18px;
	border-radius: 18px;
	background: var(--sp-ink-2);
	border: 1px solid var(--sp-ink-3);
	color: #FFFFFF;
	font-size: 15px;
	line-height: 1.35;
	font-weight: 600;
}

ul.sp-feature-list > li[class*="sp-ico--"]::before {
	width: 24px;
	height: 24px;
	color: var(--sp-red);
}

/* 9. Boutons ------------------------------------------------------------------ */
.wp-block-buttons.sp-buttons {
	gap: 12px;
}

.wp-block-button[class*="is-style-sp-"] .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 56px;
	padding: 0 26px;
	border: 0;
	border-radius: var(--sp-radius-btn);
	font-family: var(--sp-font);
	font-size: 16px;
	line-height: 1.2;
	font-weight: 600;
	text-decoration: none;
	box-shadow: none;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.wp-block-button.is-style-sp-primary .wp-block-button__link {
	background: var(--sp-red-action);
	color: #FFFFFF;
	box-shadow: var(--sp-shadow-red);
}

.wp-block-button.is-style-sp-primary .wp-block-button__link:is(:hover, :focus-visible) {
	background: var(--sp-red-action-hover);
	color: #FFFFFF;
}

.wp-block-button.is-style-sp-outline .wp-block-button__link {
	background: transparent;
	color: #FFFFFF;
	border: 1px solid rgba(255, 255, 255, 0.18);
	font-weight: 500;
	padding: 0 24px;
}

.wp-block-button.is-style-sp-outline .wp-block-button__link:is(:hover, :focus-visible) {
	background: rgba(255, 255, 255, 0.06);
	color: #FFFFFF;
}

.wp-block-button.is-style-sp-dark .wp-block-button__link {
	background: var(--sp-ink);
	color: #FFFFFF;
	font-weight: 500;
}

.wp-block-button.is-style-sp-dark .wp-block-button__link:is(:hover, :focus-visible) {
	background: var(--sp-ink-3);
	color: #FFFFFF;
}

.wp-block-button.is-style-sp-white .wp-block-button__link {
	background: #FFFFFF;
	color: var(--sp-ink);
}

.wp-block-button.is-style-sp-white .wp-block-button__link:is(:hover, :focus-visible) {
	background: var(--sp-bg-soft);
	color: var(--sp-ink);
}

.wp-block-button.is-style-sp-light .wp-block-button__link {
	min-height: 34px;
	padding: 0 12px;
	border-radius: 10px;
	background: var(--sp-bg-soft);
	color: var(--sp-text);
	font-size: 13px;
	font-weight: 400;
}

.wp-block-button.is-style-sp-light .wp-block-button__link:is(:hover, :focus-visible) {
	background: var(--sp-border);
	color: var(--sp-ink);
}

/* Taille compacte (boutons des cartes) */
.wp-block-button.sp-small .wp-block-button__link {
	min-height: 48px;
	padding: 0 20px;
	border-radius: 12px;
	font-size: 15px;
}

/* Flèches */
.wp-block-button.sp-arrow .wp-block-button__link::after,
.wp-block-button.sp-ext .wp-block-button__link::after {
	content: "";
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask: var(--sp-i-arrow-right) center / contain no-repeat;
	mask: var(--sp-i-arrow-right) center / contain no-repeat;
	transition: transform 0.2s ease;
}

.wp-block-button.sp-ext .wp-block-button__link::after {
	-webkit-mask-image: var(--sp-i-external);
	mask-image: var(--sp-i-external);
}

.wp-block-button.sp-small .wp-block-button__link::after {
	width: 16px;
	height: 16px;
}

.wp-block-button.sp-arrow .wp-block-button__link:hover::after {
	transform: translateX(3px);
}

/* Magasins d'applications : logo puis deux lignes (« Télécharger dans » / « l'App Store ») */
.wp-block-buttons.sp-stores {
	gap: 12px;
}

.wp-block-button.sp-store[class*="sp-ico--"]::before {
	content: none;
}

.wp-block-button.sp-store .wp-block-button__link {
	display: inline-grid;
	grid-template-columns: auto auto;
	justify-content: start;
	align-items: center;
	gap: 0 12px;
	min-height: 56px;
	padding: 8px 22px 8px 18px;
	text-align: left;
	font-size: 17px;
	line-height: 1.15;
}

.wp-block-button.sp-store .wp-block-button__link::before {
	content: "";
	grid-row: 1 / 3;
	width: 26px;
	height: 26px;
	background-color: currentColor;
	-webkit-mask: var(--sp-ico) center / contain no-repeat;
	mask: var(--sp-ico) center / contain no-repeat;
}

.wp-block-button.sp-store .wp-block-button__link small {
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.02em;
	opacity: 0.8;
}

/* 10. Cartes ------------------------------------------------------------------ */
.wp-block-group.is-style-sp-card {
	position: relative;
	background: #FFFFFF;
	border: 1px solid var(--sp-border);
	border-radius: var(--sp-radius-card);
	padding: clamp(24px, 3vw, 36px);
	box-shadow: var(--sp-shadow-card);
	transition: transform 0.25s ease;
}

.wp-block-group.is-style-sp-card-dark {
	position: relative;
	background: var(--sp-ink);
	color: var(--sp-on-dark-2);
	border-radius: var(--sp-radius-card);
	padding: clamp(24px, 3vw, 36px);
}

.wp-block-group.is-style-sp-card-soft {
	position: relative;
	background: var(--sp-bg-soft);
	border-radius: 22px;
	padding: 28px;
}

.wp-block-group.is-style-sp-panel {
	background: var(--sp-ink);
	color: var(--sp-on-dark-2);
	border-radius: 20px;
	padding: 22px;
}

.sp-lift:hover {
	transform: translateY(-4px);
}

/* 11. Images ------------------------------------------------------------------ */
.wp-block-image.is-style-sp-screen img {
	border-radius: 20px;
	border: 1px solid var(--sp-border);
	box-shadow: var(--sp-shadow-float);
}

.wp-block-image.is-style-sp-float img {
	filter: drop-shadow(0 30px 40px rgba(16, 15, 13, 0.35));
}

.wp-block-image.is-style-sp-tilt img {
	transform: rotate(-8deg);
	filter: drop-shadow(0 30px 40px rgba(16, 15, 13, 0.4));
}

.wp-block-image img {
	height: auto;
}

/* 12. Accueil — hero ---------------------------------------------------------- */
.sp-hero {
	overflow: hidden;
	isolation: isolate;
	padding-top: clamp(40px, 6vw, 72px);
	padding-bottom: 0;
}

/* Marquage de parking en perspective */
.sp-hero::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: -50%;
	right: -50%;
	bottom: 60px;
	height: 520px;
	pointer-events: none;
	background-image:
		repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.075) 0 2px, transparent 2px 132px),
		linear-gradient(0deg, transparent 0 48%, rgba(255, 49, 49, 0.32) 48% 49%, transparent 49% 100%);
	transform: perspective(900px) rotateX(64deg);
	transform-origin: 50% 100%;
	-webkit-mask-image: linear-gradient(to top, #000 15%, transparent 88%);
	mask-image: linear-gradient(to top, #000 15%, transparent 88%);
}

/* Halo rouge */
.sp-hero::after {
	content: "";
	position: absolute;
	z-index: -1;
	right: 4%;
	top: 60px;
	width: min(760px, 100vw);
	aspect-ratio: 1;
	pointer-events: none;
	background: radial-gradient(closest-side, rgba(255, 49, 49, 0.3), rgba(255, 49, 49, 0.07) 55%, transparent);
}

.sp-hero__row {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 48px;
	padding-bottom: 40px;
}

/* Petits points flottants */
.sp-hero__row::before,
.sp-hero__row::after {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
	background: var(--sp-red);
	animation: sp-float 7s ease-in-out infinite;
}

.sp-hero__row::before {
	left: -3%;
	top: 6%;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	opacity: 0.45;
}

.sp-hero__row::after {
	left: 40%;
	bottom: 6%;
	width: 7px;
	height: 7px;
	border-radius: 2px;
	opacity: 0.5;
	animation-duration: 5.5s;
	animation-delay: 1.5s;
}

.sp-hero__text {
	flex: 1 1 480px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.single-content .sp-hero h1 {
	color: #FFFFFF;
}

.sp-hero p.sp-hero__lead {
	max-width: 540px;
	font-size: 19px;
	line-height: 1.6;
	color: var(--sp-on-dark-2);
}

.sp-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 28px;
	padding-top: 8px;
}

.sp-stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.sp-stat + .sp-stat {
	padding-left: 28px;
	border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.single-content .sp-section p.sp-stat__num {
	font-size: 30px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #FFFFFF;
}

.single-content .sp-section p.sp-stat__label {
	font-size: 13px;
	color: var(--sp-on-dark-3);
}

/* Bandeau « Pour tous les parkings » */
.sp-segments {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 32px;
	padding: 28px 0 56px;
	border-top: 1px solid var(--sp-line-on-dark);
}

.sp-segments > .is-style-sp-pills {
	flex: 1 1 420px;
}

.sp-segments__countries {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.single-content .sp-section .sp-segments__countries p {
	font-size: 13px;
	color: var(--sp-on-dark-3);
}

/* 13. Accueil — visuel animé (l'icône du logo) ------------------------------------
   Toutes les mesures sont relatives à la largeur du visuel (600 px dans la maquette). */
.sp-hero-visual {
	position: relative;
	flex: 1 1 520px;
	max-width: 600px;
	aspect-ratio: 600 / 630;
	container-type: inline-size;
	margin-inline: auto;
}

.sp-hero-visual > * {
	position: absolute;
	margin: 0 !important;
}

.sp-hero-visual__square {
	left: 0;
	top: 11.667cqw;
	width: 86.667cqw;
	height: 86.667cqw;
	border-radius: 5.333cqw;
	background: var(--sp-red);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 50px 100px -40px rgba(255, 49, 49, 0.85);
	animation: sp-hero-square 0.9s var(--sp-ease) 0.1s both;
}

/* Le rond du haut et son onde */
.sp-hero-visual__square::before,
.sp-hero-visual__square::after {
	content: "";
	position: absolute;
	left: 12.5cqw;
	top: 8.333cqw;
	width: 16.667cqw;
	height: 16.667cqw;
	border-radius: 50%;
}

.sp-hero-visual__square::before {
	z-index: 2;
	background: radial-gradient(circle closest-side, var(--sp-red-action) 21%, #FFFFFF 23%);
	box-shadow: 0 18px 36px -14px rgba(16, 15, 13, 0.55);
	animation: sp-hero-p1 1.3s var(--sp-ease) 0.45s both;
}

.sp-hero-visual__square::after {
	z-index: 1;
	background: #FFFFFF;
	opacity: 0;
	animation: sp-ping 2.6s ease-out 2.2s infinite;
}

/* Les 5 points-offres */
.sp-tile {
	position: absolute;
	z-index: 3;
	width: 16.667cqw;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.333cqw;
}

.sp-tile::before {
	content: "";
	width: 16.667cqw;
	height: 16.667cqw;
	border-radius: 3cqw;
	background: #FFFFFF;
	box-shadow: 0 18px 36px -14px rgba(16, 15, 13, 0.55);
	transition: transform 0.25s ease;
}

.sp-tile::after {
	content: "";
	position: absolute;
	top: 4.667cqw;
	left: 4.667cqw;
	width: 7.333cqw;
	height: 7.333cqw;
	background-color: var(--sp-red-action);
	-webkit-mask: var(--sp-ico) center / contain no-repeat;
	mask: var(--sp-ico) center / contain no-repeat;
	pointer-events: none;
}

.single-content .sp-section .sp-tile p {
	margin: 0;
	padding: 0.667cqw 1.833cqw;
	border-radius: 999px;
	background: var(--sp-ink);
	color: #FFFFFF;
	font-size: max(11px, 2.333cqw);
	line-height: 1.3;
	font-weight: 600;
	white-space: nowrap;
}

.sp-tile a {
	color: inherit;
	text-decoration: none;
}

/* Toute la tuile est cliquable */
.sp-tile a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 3cqw;
}

.sp-tile:hover::before {
	transform: translateY(-3px);
}

.sp-tile--app { left: 12.5cqw; top: 33cqw; --sp-ico: var(--sp-i-mobile); animation: sp-hero-p2 1.3s var(--sp-ease) 0.55s both; }
.sp-tile--soft { left: 35cqw; top: 33cqw; --sp-ico: var(--sp-i-desktop); animation: sp-hero-p3 1.3s var(--sp-ease) 0.65s both; }
.sp-tile--web { left: 12.5cqw; top: 57.667cqw; --sp-ico: var(--sp-i-globe); animation: sp-hero-p4 1.3s var(--sp-ease) 0.75s both; }
.sp-tile--store { left: 35cqw; top: 57.667cqw; --sp-ico: var(--sp-i-store); animation: sp-hero-p5 1.3s var(--sp-ease) 0.85s both; }
.sp-tile--gate { left: 57.5cqw; top: 57.667cqw; --sp-ico: var(--sp-i-barrier); animation: sp-hero-p6 1.3s var(--sp-ease) 0.95s both; }

/* Téléphone */
.sp-hero-visual__phone {
	z-index: 4;
	left: 63cqw;
	top: 0;
	width: 35cqw;
	animation: sp-fade-up 0.9s ease-out 1.3s both;
}

.sp-hero-visual__phone img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 40px 50px rgba(0, 0, 0, 0.6));
}

/* Notifications */
.sp-notif {
	z-index: 5;
	display: flex;
	flex-direction: column;
	gap: 0.667cqw;
	padding: 2cqw 2.333cqw;
	border-radius: 2.333cqw;
}

.sp-notif--resa {
	left: 23cqw;
	top: 3cqw;
	width: 34cqw;
	background: rgba(27, 25, 23, 0.94);
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.8);
	animation: sp-fade-up 0.7s ease-out 1.7s both, sp-float 6s ease-in-out 2.6s infinite;
}

.single-content .sp-section .sp-notif p {
	font-size: max(10px, 1.833cqw);
	line-height: 1.35;
}

.single-content .sp-section .sp-notif p.sp-notif__title {
	display: flex;
	align-items: center;
	gap: 1.333cqw;
	font-size: max(11px, 2cqw);
	font-weight: 600;
	color: #FFFFFF;
}

.sp-notif--resa .sp-notif__title::before {
	content: "";
	width: 1.333cqw;
	height: 1.333cqw;
	min-width: 6px;
	min-height: 6px;
	border-radius: 50%;
	background: var(--sp-live);
}

.single-content .sp-section .sp-notif--resa p:not(.sp-notif__title) {
	color: #B9B2AB;
}

.sp-notif--gate {
	left: 46cqw;
	top: 93.667cqw;
	padding-left: 9cqw;
	background: #FFFFFF;
	box-shadow: 0 24px 48px -18px rgba(0, 0, 0, 0.7);
	animation: sp-fade-up 0.7s ease-out 2s both;
}

.sp-notif--gate::before {
	content: "";
	position: absolute;
	left: 2.333cqw;
	top: 50%;
	width: 5cqw;
	height: 5cqw;
	margin-top: -2.5cqw;
	border-radius: 1.5cqw;
	background:
		var(--sp-i-check) center / 55% no-repeat,
		var(--sp-ok-bg);
}

.single-content .sp-section .sp-notif--gate p.sp-notif__title {
	color: var(--sp-ink);
}

.single-content .sp-section .sp-notif--gate p:not(.sp-notif__title) {
	color: var(--sp-text-2);
}

/* 14. En-tête de section ---------------------------------------------------------- */
.sp-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
}

.sp-section-head__main {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 720px;
}

.single-content .sp-section p.sp-section-head__aside {
	max-width: 420px;
	font-size: 17px;
	line-height: 1.6;
	color: var(--sp-text-2);
}

.sp-center {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	max-width: 780px;
	margin-inline: auto;
	text-align: center;
}

/* 15. Accueil — solutions (cartes) ------------------------------------------------- */
.sp-bento {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.single-content .sp-bento .wp-block-columns {
	gap: 20px;
}

.sp-bento .wp-block-column > .wp-block-group {
	height: 100%;
}

.sp-card-body {
	display: flex;
	flex-direction: column;
	gap: 24px;
	height: 100%;
}

.sp-card-body > .wp-block-buttons:last-child {
	margin-top: auto !important;
}

.sp-card-top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.single-content .sp-section .sp-card-top p:not(.is-style-sp-tag) {
	font-size: 13px;
	color: var(--sp-text-3);
}

.sp-card-text {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.single-content .sp-section .sp-card-text p {
	font-size: 16px;
	color: var(--sp-text-2);
}

.single-content .sp-section .sp-card-text h3 {
	font-size: clamp(24px, 2.4vw, 32px);
}

.is-style-sp-card-dark .sp-card-text p {
	color: var(--sp-on-dark-2) !important;
}

/* Carte application : le téléphone incliné déborde en bas à droite */
.sp-card--app {
	overflow: hidden;
}

.sp-card--app ul.is-style-sp-bullets {
	max-width: 260px;
}

.sp-card--app .sp-card__phone {
	position: absolute;
	right: -10px;
	bottom: -90px;
	width: 200px;
	margin: 0 !important;
	pointer-events: none;
}

.sp-card--app .wp-block-buttons {
	position: relative;
	z-index: 1;
}

/* Capture dans une carte */
.wp-block-image.sp-card__shot img {
	width: 100%;
	border-radius: 18px;
	border: 1px solid var(--sp-border);
}

.wp-block-image.sp-card__shot.is-style-sp-float img {
	border: 0;
	width: auto;
	max-width: 100%;
	max-height: 260px;
	margin-inline: auto;
}

/* Carte plateforme : encadré « Votre parking » */
.sp-platform-panel {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sp-platform-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 6px;
}

.single-content .sp-section .sp-platform-panel__head p:first-child {
	font-size: 14px;
	font-weight: 600;
	color: #FFFFFF;
}

.single-content .sp-section p.sp-live {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 8px;
	border-radius: 999px;
	background: rgba(74, 222, 128, 0.14);
	color: #86EFAC;
	font-size: 11px;
}

p.sp-live::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sp-live);
}

.sp-platform-panel__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 10px;
	background: var(--sp-ink-2);
}

.single-content .sp-section .sp-platform-panel__row p {
	font-size: 12px;
	color: var(--sp-on-dark-2);
}

.single-content .sp-section .sp-platform-panel__row p:last-child {
	color: var(--sp-red-on-dark);
	text-align: right;
}

/* Carte barrières (sombre, pleine largeur) */
.single-content .sp-bento .sp-card--gate .wp-block-columns {
	gap: 32px;
	align-items: center;
}

/* 16. Accueil — tout au même endroit ---------------------------------------------- */
.sp-dashboard {
	position: relative;
	max-width: 960px;
	margin-inline: auto !important;
	padding-top: 64px;
}

.sp-dashboard::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 2px;
	height: 44px;
	background: linear-gradient(transparent, var(--sp-red));
}

.sp-dashboard::after {
	content: "";
	position: absolute;
	top: 40px;
	left: 50%;
	width: 10px;
	height: 10px;
	margin-left: -4px;
	border-radius: 50%;
	background: var(--sp-red-action);
}

.sp-dashboard img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 40px 60px rgba(16, 15, 13, 0.28));
}

.sp-gains {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.sp-gains > .wp-block-group {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.single-content .sp-section .sp-gains h3 {
	font-size: 22px;
	line-height: 1.25;
}

.single-content .sp-section .sp-gains p:not(.is-style-sp-num) {
	font-size: 15px;
	color: var(--sp-text-2);
}

.sp-gains.sp-gains--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 17. Accueil — expertise ----------------------------------------------------------- */
.single-content .sp-expertise .wp-block-columns {
	gap: clamp(32px, 6vw, 80px);
}

.sp-expertise__intro {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.single-content .sp-section .sp-expertise__intro p:not(.is-style-sp-eyebrow) {
	font-size: 17px;
	line-height: 1.6;
	color: var(--sp-on-dark-2);
}

.single-content .sp-section .sp-expertise__issues h3 {
	font-size: 15px;
	line-height: 1.4;
	font-weight: 600;
	margin-bottom: 18px !important;
}

.sp-advantages {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin-top: clamp(40px, 5vw, 56px) !important;
}

.sp-advantages > .wp-block-group {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 26px 22px 24px;
	border-radius: 20px;
	background: var(--sp-ink-2);
	border: 1px solid var(--sp-ink-3);
}

.sp-advantages > .wp-block-group::before {
	content: "";
	height: 10px;
	margin-bottom: 8px;
	background: radial-gradient(circle at 5px 5px, var(--sp-red) 4.5px, transparent 5px) 0 0 / 10px 10px no-repeat;
}

.sp-advantages > .wp-block-group:nth-child(2)::before {
	background:
		linear-gradient(var(--sp-red), var(--sp-red)) 0 0 / 9px 9px no-repeat,
		linear-gradient(var(--sp-red), var(--sp-red)) 13px 0 / 9px 9px no-repeat;
	border-radius: 2px;
}

.sp-advantages > .wp-block-group:nth-child(3)::before {
	background:
		linear-gradient(var(--sp-red), var(--sp-red)) 0 0 / 9px 9px no-repeat,
		linear-gradient(var(--sp-red), var(--sp-red)) 13px 0 / 9px 9px no-repeat,
		linear-gradient(var(--sp-red), var(--sp-red)) 26px 0 / 9px 9px no-repeat;
}

.single-content .sp-section .sp-advantages h3 {
	font-size: 17px;
	line-height: 1.35;
	font-weight: 600;
}

.single-content .sp-section .sp-advantages p {
	font-size: 14px;
	line-height: 1.55;
	color: var(--sp-on-dark-2);
}

/* 18. Avis et chiffres ----------------------------------------------------------- */
.single-content .sp-reviews .wp-block-columns {
	gap: 20px;
}

.wp-block-quote.is-style-sp-review {
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 0;
	padding: clamp(28px, 3.5vw, 40px);
	border: 1px solid var(--sp-border);
	border-left: 1px solid var(--sp-border);
	border-radius: var(--sp-radius-card);
	background: #FFFFFF;
	box-shadow: var(--sp-shadow-card);
	font-style: normal;
}

.single-content .wp-block-quote.is-style-sp-review p {
	font-size: clamp(26px, 3vw, 40px);
	line-height: 1.15;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--sp-ink);
}

.single-content .wp-block-quote.is-style-sp-review p.sp-review__badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.4;
	color: var(--sp-text-2);
}

.sp-review__badge strong {
	padding: 6px 10px;
	border-radius: 999px;
	background: var(--sp-ink);
	color: #FFFFFF;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.wp-block-quote.is-style-sp-review cite {
	display: block;
	margin-top: auto;
	font-style: normal;
	font-size: 14px;
	line-height: 1.5;
	color: var(--sp-text-3);
}

.wp-block-quote.is-style-sp-review cite strong {
	display: block;
	color: var(--sp-ink);
	font-weight: 600;
}

.wp-block-quote.is-style-sp-review cite::before {
	content: "★★★★★";
	display: block;
	margin-bottom: 6px;
	letter-spacing: 3px;
	color: var(--sp-red);
}

/* Avis Parkos : logo à côté de la signature (le logo précède la signature dans le bloc) */
.wp-block-quote.is-style-sp-review.sp-review--logo {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: auto 1fr auto;
	grid-auto-flow: row dense;
	gap: 24px 20px;
}

.wp-block-quote.sp-review--logo > * {
	grid-column: 1 / -1;
}

.wp-block-quote.sp-review--logo > cite {
	grid-column: 1;
	align-self: end;
	margin-top: 0;
}

.single-content .wp-block-quote.sp-review--logo > figure.sp-review__logo {
	grid-column: 2;
	align-self: end;
	margin: 0;
}

.wp-block-image.sp-review__logo img {
	display: block;
	width: 120px;
	height: auto;
	border-radius: 12px;
}

.sp-figures {
	display: flex;
	flex-direction: column;
	gap: 16px;
	height: 100%;
}

.sp-figures > .wp-block-group {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 16px;
	padding: 28px;
	border-radius: var(--sp-radius-card);
}

.single-content .sp-section .sp-figures p.sp-figure-big {
	font-size: clamp(56px, 7vw, 84px);
	line-height: 1;
	font-weight: 800;
	letter-spacing: -0.04em;
}

.single-content .sp-section .sp-figures p {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.45;
}

.single-content .sp-section .sp-figures .is-style-sp-card-dark p.sp-figure-big {
	color: #FFFFFF;
}

.sp-figures .is-style-sp-card-dark::before {
	content: "";
	width: 42px;
	height: 42px;
	background: url("../img/logo-points.svg") 0 0 / contain no-repeat;
}

/* 19. Tarifs (aperçu) ------------------------------------------------------------- */
.sp-prices {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.sp-prices > .wp-block-group {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 26px 24px 28px;
	border: 1px solid var(--sp-border);
	border-radius: 24px;
	background: #FFFFFF;
}

.single-content .sp-section p.sp-price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 14px;
	color: var(--sp-text-3);
}

.sp-price strong {
	font-size: 40px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--sp-ink);
}

.single-content .sp-section .sp-prices p:last-child {
	font-size: 14px;
	line-height: 1.55;
	color: var(--sp-text-2);
}

/* 20. Contact / démo (fond rouge) ------------------------------------------------- */
.sp-contact {
	overflow: hidden;
}

.single-content .sp-contact .wp-block-columns {
	gap: clamp(32px, 5vw, 64px);
}

.sp-contact__intro {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.single-content .sp-section .sp-contact__intro h2 {
	font-size: clamp(40px, 4.6vw, 60px);
	line-height: 1.02;
	letter-spacing: -0.04em;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: manual;
}

.single-content .sp-section .sp-contact__intro p {
	font-size: 17px;
	line-height: 1.6;
	color: var(--sp-ink);
}

.single-content ul.sp-contact__list {
	list-style: none;
	padding: 0;
	display: grid;
	gap: 10px;
	margin-top: 8px !important;
}

.sp-contact__list > li {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 14px 18px;
	border-radius: 16px;
	background: rgba(16, 15, 13, 0.08);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--sp-ink);
}

.sp-contact__list > li.sp-plain {
	padding: 4px 4px;
	background: none;
	font-weight: 400;
	font-size: 14px;
}

.sp-contact__list a {
	color: inherit;
	text-decoration: none;
}

.sp-contact__list a:hover {
	text-decoration: underline;
}

.sp-contact__list > li[class*="sp-ico--"]::before {
	width: 20px;
	height: 20px;
}

/* Carrés décoratifs (motif du logo) */
.sp-contact::after {
	content: "";
	position: absolute;
	left: -30px;
	bottom: -40px;
	width: 300px;
	height: 120px;
	pointer-events: none;
	background:
		linear-gradient(rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.22)) 0 0 / 72px 72px no-repeat,
		linear-gradient(rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.22)) 114px 0 / 72px 72px no-repeat,
		linear-gradient(rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.22)) 228px 0 / 72px 72px no-repeat;
	-webkit-mask: linear-gradient(#000, #000);
	border-radius: 0;
}

.sp-form-card {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: clamp(24px, 3vw, 32px);
	border-radius: var(--sp-radius-card);
	background: #FFFFFF;
	box-shadow: 0 40px 80px -40px rgba(16, 15, 13, 0.5);
}

.single-content .sp-section .sp-form-card h3 {
	font-size: 20px;
	line-height: 1.3;
	font-weight: 600;
}


/* 20 bis. Pages produit ----------------------------------------------------------- */
.sp-page-hero {
	overflow: hidden;
	isolation: isolate;
	padding-top: 28px;
	padding-bottom: clamp(56px, 7vw, 88px);
}

.sp-page-hero::after {
	content: "";
	position: absolute;
	z-index: -1;
	right: 0;
	top: 40px;
	width: min(780px, 100vw);
	height: 620px;
	pointer-events: none;
	background: radial-gradient(closest-side, rgba(255, 49, 49, 0.26), transparent);
}

.sp-page-hero__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 56px;
}

.sp-page-hero__text {
	flex: 1 1 460px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.single-content .sp-section.sp-page-hero h1 {
	font-size: clamp(40px, 5.2vw, 68px);
	line-height: 1.03;
	color: #FFFFFF;
}

/* Titres longs */
.single-content .sp-section.sp-page-hero h1.sp-long {
	font-size: clamp(36px, 4.2vw, 56px);
	line-height: 1.06;
}

.single-content .sp-section .sp-contact__intro h2.sp-long {
	font-size: clamp(32px, 3.6vw, 46px);
	line-height: 1.08;
}

.single-content .sp-section p.sp-kicker {
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--sp-on-dark-soft);
}

.single-content .sp-section p.sp-page-hero__lead {
	max-width: 560px;
	font-size: 17px;
	line-height: 1.65;
	color: var(--sp-on-dark-2);
}

.single-content .sp-section p.sp-callout {
	position: relative;
	max-width: 560px;
	padding: 16px 18px 16px 42px;
	border-radius: 16px;
	background: rgba(255, 49, 49, 0.1);
	border: 1px solid rgba(255, 49, 49, 0.28);
	font-size: 15px;
	line-height: 1.55;
	color: #EDE8E3;
}

p.sp-callout::before {
	content: "";
	position: absolute;
	left: 18px;
	top: 23px;
	width: 10px;
	height: 10px;
	border-radius: 2px;
	background: var(--sp-red);
}

.sp-cta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
}

.single-content .sp-section .sp-cta-row > p {
	font-size: 13px;
	color: var(--sp-on-dark-3);
}

/* Ordinateur + téléphone (captures) */
.sp-devices {
	position: relative;
	flex: 1 1 520px;
	min-width: 0;
	max-width: 640px;
	aspect-ratio: 640 / 470;
	margin-inline: auto;
}

.sp-devices > .wp-block-image {
	position: absolute;
	margin: 0 !important;
}

.sp-devices > .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}

.sp-devices__laptop {
	right: 0;
	top: 2%;
	width: 92%;
	filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.55));
}

.sp-devices__phone {
	left: 0;
	bottom: 0;
	width: 27%;
	filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.7));
}

/* Fil d'Ariane (bloc natif) */
.wp-block-breadcrumbs {
	font-size: 13px;
	color: var(--sp-on-dark-3);
}

.single-content .wp-block-breadcrumbs ol,
.wp-block-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wp-block-breadcrumbs a {
	color: #B9B2AB;
	text-decoration: none;
}

.wp-block-breadcrumbs a:hover {
	color: #FFFFFF;
	text-decoration: underline;
}

.wp-block-breadcrumbs [aria-current] {
	color: #FFFFFF;
}

/* Sous-navigation collante */
.entry-content .sp-subnav.alignfull,
.editor-styles-wrapper .sp-subnav.alignfull {
	padding-left: var(--sp-gutter);
	padding-right: var(--sp-gutter);
}

.single-content .wp-block-group.sp-subnav,
.wp-block-group.sp-subnav {
	position: sticky;
	top: calc(64px + var(--wp-admin--admin-bar--height, 0px));
	z-index: 40;
	margin-top: 0;
	margin-bottom: 0;
	background: #FFFFFF;
	border-bottom: 1px solid var(--sp-border);
	box-shadow: 0 10px 24px -22px rgba(16, 15, 13, 0.6);
}

.sp-subnav__inner {
	display: flex;
	align-items: center;
	gap: 28px;
	min-height: 64px;
	overflow-x: auto;
	scrollbar-width: none;
	white-space: nowrap;
}

.sp-subnav__inner::-webkit-scrollbar {
	display: none;
}

.single-content ul.sp-subnav__links {
	display: flex;
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	font-weight: 500;
}

.sp-subnav__links li {
	margin: 0;
}

.sp-subnav__links a {
	display: inline-block;
	padding: 6px 0;
	color: var(--sp-text-2);
	text-decoration: none;
}

.sp-subnav__links a:hover,
.sp-subnav__links a[aria-current] {
	color: var(--sp-ink);
	box-shadow: 0 2px 0 var(--sp-red);
}

.sp-subnav__inner > .wp-block-buttons {
	margin-left: auto !important;
}

.sp-subnav .wp-block-button .wp-block-button__link {
	min-height: 40px;
	padding: 0 16px;
	border-radius: 10px;
	font-size: 14px;
}

.sp-section[id],
.sp-anchor {
	scroll-margin-top: calc(140px + var(--wp-admin--admin-bar--height, 0px));
}

/* Tuiles de fonctions (icône dans un carré coloré) */
.single-content ul.sp-tiles,
ul.sp-tiles {
	list-style: none;
	padding-left: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}

ul.sp-tiles > li {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	padding: 22px;
	border: 1px solid var(--sp-border);
	border-radius: 20px;
	background: #FFFFFF;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--sp-ink);
}

ul.sp-tiles > li::before {
	content: "";
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	border-radius: 12px;
	background: var(--sp-red);
	-webkit-mask: none;
	mask: none;
}

ul.sp-tiles > li::after {
	content: "";
	position: absolute;
	left: 35px;
	top: 50%;
	width: 22px;
	height: 22px;
	margin-top: -11px;
	background: #FFFFFF;
	-webkit-mask: var(--sp-ico) center / contain no-repeat;
	mask: var(--sp-ico) center / contain no-repeat;
}

ul.sp-tiles > li:nth-child(4n+2)::before { background: var(--sp-red-action); }
ul.sp-tiles > li:nth-child(4n+3)::before { background: var(--sp-red-text); }
ul.sp-tiles > li:nth-child(4n+4)::before { background: var(--sp-ink); }

/* Gains en cartes grises */
.sp-gains--cards > .wp-block-group {
	padding: 28px;
	border-radius: 22px;
	background: var(--sp-bg-soft);
}

/* Encadré plateformes */
.wp-block-group.sp-platform-box {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: clamp(24px, 3vw, 32px);
	border-radius: var(--sp-radius-card);
}

.single-content .sp-section .sp-platform-box p {
	font-size: 14px;
	color: var(--sp-on-dark-3);
}

.single-content .sp-section .sp-platform-box p:last-child {
	color: #B9B2AB;
}

/* Logos des plateformes : 17 logos + « votre site web », 3 colonnes */
.sp-logo-wall {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.single-content .sp-logo-wall > figure.wp-block-image {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 5 / 2;
	margin: 0;
	padding: 6px 10px;
	border-radius: 12px;
	background: #FFFFFF;
	overflow: hidden;
}

.sp-logo-wall > figure.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.single-content .sp-section .sp-platform-box .sp-logo-wall p.sp-logo-wall__more {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 6px 10px;
	border: 1px dashed var(--sp-red-on-dark);
	border-radius: 12px;
	color: var(--sp-red-on-dark);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
}

.single-content .sp-section .sp-platforms-intro p:not(.is-style-sp-eyebrow) {
	font-size: 17px;
	line-height: 1.65;
	color: var(--sp-text-2);
}

/* Avantages : cartes avec capture */
.sp-feature-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.sp-feature-cards > .wp-block-group {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--sp-border);
	border-radius: var(--sp-radius-card);
	background: #FFFFFF;
}

.sp-feature-cards .wp-block-image {
	height: 240px;
	margin: 0 !important;
	padding: 28px 32px 0;
	overflow: hidden;
	background: var(--sp-bg-soft);
}

.sp-feature-cards > .wp-block-group:nth-child(4n+2) .wp-block-image,
.sp-feature-cards > .wp-block-group:nth-child(4n+3) .wp-block-image {
	background: var(--sp-ink);
}

.sp-feature-cards .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px 12px 0 0;
	box-shadow: 0 20px 40px -20px rgba(16, 15, 13, 0.5);
}

.sp-feature-cards__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 32px;
}

.single-content .sp-section .sp-feature-cards__body h3 {
	font-size: clamp(20px, 2vw, 24px);
	line-height: 1.25;
}

.single-content .sp-section .sp-feature-cards__body p {
	font-size: 16px;
	line-height: 1.6;
	color: var(--sp-text-2);
}

/* Fonctionnalités : liste en colonnes sur fond sombre */
.single-content ul.sp-feature-rows,
ul.sp-feature-rows {
	list-style: none;
	padding-left: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 40px;
	font-size: 16px;
	line-height: 1.45;
	color: #E3DDD7;
}

ul.sp-feature-rows > li {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 16px 0;
	border-top: 1px solid var(--sp-line-on-dark);
}

ul.sp-feature-rows > li::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: var(--sp-red);
	flex-shrink: 0;
}

.single-content .sp-section p.sp-bignum {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	max-width: 320px;
	font-size: 15px;
	line-height: 1.4;
	color: var(--sp-on-dark-2);
}

.sp-bignum strong {
	font-size: 56px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: -0.04em;
	color: var(--sp-red) !important;
	white-space: nowrap;
}

.single-content .sp-section p.sp-more {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #FF8A8A;
}

/* Essai gratuit / démo sur fond sombre */
.is-style-sp-dark.sp-contact::after {
	display: none;
}

.single-content .is-style-sp-dark .sp-contact__intro h2 {
	color: #FFFFFF;
}

.single-content .sp-section.is-style-sp-dark .sp-contact__intro p {
	color: var(--sp-on-dark-2);
}

.is-style-sp-dark .sp-contact__list > li,
.is-style-sp-card-dark .sp-contact__list > li {
	background: rgba(255, 255, 255, 0.06);
	color: #FFFFFF;
}

.is-style-sp-dark .sp-contact__list > li[class*="sp-ico--"]::before,
.is-style-sp-card-dark .sp-contact__list > li[class*="sp-ico--"]::before {
	color: var(--sp-red-on-dark);
}

/* Contact sur fond rouge (accueil) : texte blanc, donc rouge d'action (contraste AA), coordonnées sur pastilles blanches */
.wp-block-group.is-style-sp-red.sp-contact {
	background-color: var(--sp-red-action);
	color: #FFFFFF;
}

.single-content .sp-section.is-style-sp-red .sp-contact__intro :is(h2, p) {
	color: #FFFFFF;
}

/* Le formulaire garde un texte sombre (sinon les listes déroulantes héritent du blanc). */
.is-style-sp-red .sp-form-card {
	color: var(--sp-ink);
}

.is-style-sp-red .sp-contact__list > li {
	background: #FFFFFF;
	color: var(--sp-ink);
	box-shadow: 0 10px 24px -16px rgba(16, 15, 13, 0.45);
}

.is-style-sp-red .sp-contact__list > li[class*="sp-ico--"]::before {
	color: var(--sp-red-action);
}

.is-style-sp-red .sp-contact__list > li.sp-plain {
	background: none;
	box-shadow: none;
	color: #FFFFFF;
}

.is-style-sp-red .sp-contact__list > li.sp-plain[class*="sp-ico--"]::before {
	color: #FFFFFF;
}

/* Pour aller plus loin (textes de référencement) */
.single-content .sp-section p.sp-seo__title {
	font-size: 28px;
	line-height: 1.2;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--sp-ink);
}

.sp-seo__cols {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px;
}

.sp-seo__cols.sp-seo__cols--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sp-seo__cols > .wp-block-group {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.single-content .sp-section .sp-seo__cols h2 {
	font-size: 19px;
	line-height: 1.35;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.single-content .sp-section .sp-seo__cols p {
	font-size: 15px;
	line-height: 1.65;
	color: var(--sp-text-2);
}

/* 20 ter. Pages sites web ------------------------------------------------------------ */
/* Visuel unique du hero (capture détourée ou sur fond clair) */
.sp-page-hero__visual {
	flex: 1 1 520px;
	min-width: 0;
	max-width: 640px;
	margin: 0 auto !important;
}

.sp-page-hero__visual img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.55));
}

.sp-page-hero__visual.is-style-sp-screen img {
	filter: none;
	border: 0;
	box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.85);
}

/* Avantages en trois cartes */
.sp-feature-cards.sp-feature-cards--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sp-feature-cards--3 > .wp-block-group:nth-child(3) .wp-block-image {
	background: var(--sp-bg-soft);
}

/* Comparaison de performances : deux captures légendées */
.sp-compare {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.sp-compare > .wp-block-image {
	padding: 12px 12px 0;
	border: 1px solid var(--sp-border);
	border-radius: 20px;
	background: #FFFFFF;
}

.sp-compare > .wp-block-image img {
	display: block;
	width: 100%;
	border-radius: 10px;
}

.single-content .sp-compare figcaption {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 14px 4px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	text-align: left;
	color: var(--sp-ink);
}

.sp-compare figcaption::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 2px;
	flex-shrink: 0;
	background: var(--sp-ok-text);
}

.sp-compare > .wp-block-image:nth-child(2) figcaption::before {
	background: var(--sp-red);
}

/* Deux captures sans légende */
.sp-compare--plain > .wp-block-image {
	padding: 12px;
}

/* Toutes les fonctionnalités : accordéons natifs sur fond sombre */
.sp-acc-group {
	display: grid;
	gap: 12px;
}

details.wp-block-details.sp-acc {
	padding: 0 clamp(18px, 3vw, 28px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 20px;
	background: var(--sp-ink-2);
}

details.sp-acc > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 68px;
	list-style: none;
	cursor: pointer;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
	color: #FFFFFF;
}

details.sp-acc > summary::-webkit-details-marker {
	display: none;
}

details.sp-acc > summary::after {
	content: "";
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	background-color: var(--sp-red-on-dark);
	-webkit-mask: var(--sp-i-plus) center / contain no-repeat;
	mask: var(--sp-i-plus) center / contain no-repeat;
	transition: transform 0.25s var(--sp-ease);
}

details.sp-acc[open] > summary::after {
	transform: rotate(45deg);
}

.single-content details.sp-acc > ul.sp-feature-rows {
	margin-bottom: 14px;
}

/* Logo partenaire (image sur fond blanc) */
.wp-block-image.sp-partner-badge img {
	display: block;
	width: 150px;
	height: auto;
	border-radius: 12px;
}

/* Google Partner / Google Ads */
.single-content .sp-ads .wp-block-columns {
	gap: clamp(32px, 5vw, 64px);
}

.wp-block-group.sp-ads__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}

.single-content .sp-ads__card .wp-block-image.sp-partner-badge {
	margin: 0;
}

.sp-ads__card .wp-block-image.sp-partner-badge img {
	width: 180px;
}

.single-content .sp-section .sp-ads__card p {
	font-size: 15px;
	line-height: 1.6;
	color: var(--sp-text-2);
}

/* Quelques exemples : deux rangées de captures qui défilent (piste doublée par sp.js) */
.sp-examples {
	display: flex;
	flex-direction: column;
	gap: 28px;
	margin-top: clamp(48px, 6vw, 80px);
}

.sp-examples__head {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 760px;
}

.single-content .sp-section .sp-examples__head p {
	font-size: 17px;
	line-height: 1.6;
	color: var(--sp-text-2);
}

.single-content .sp-section .sp-examples__head p.sp-examples__more a {
	color: var(--sp-red-text);
	font-weight: 600;
}

.sp-marquee {
	display: flex;
	flex-direction: column;
	gap: 20px;
	overflow-x: auto;
	padding-block: 4px 16px;
}

.sp-marquee.is-ready {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.sp-marquee__track {
	display: flex;
	gap: 20px;
	width: max-content;
	padding-right: 20px;
}

.single-content .sp-marquee__track > figure.wp-block-image {
	flex: 0 0 auto;
	width: 170px;
	margin: 0;
	padding: 6px;
	border-radius: 28px;
	background: var(--sp-ink);
	box-shadow: 0 18px 30px -22px rgba(16, 15, 13, 0.55);
}

.sp-marquee__track > figure.wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 400 / 768;
	object-fit: cover;
	object-position: top;
	border-radius: 22px;
	background: var(--sp-bg-soft);
}

@media (prefers-reduced-motion: no-preference) {
	.sp-marquee.is-ready .sp-marquee__track {
		animation: sp-marquee 90s linear infinite;
	}

	.sp-marquee.is-ready .sp-marquee__track--reverse {
		animation-duration: 100s;
		animation-direction: reverse;
	}

	.sp-marquee.is-ready:is(:hover, :focus-within, .is-paused) .sp-marquee__track {
		animation-play-state: paused;
	}
}

@keyframes sp-marquee {
	to {
		transform: translateX(-50%);
	}
}

/* Réalisations : encadré démonstration */
.wp-block-group.sp-demo-panel {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: clamp(24px, 3vw, 32px);
	border-radius: var(--sp-radius-card);
}

.single-content .sp-section .sp-demo-panel p:not(.is-style-sp-label) {
	font-size: 15px;
	line-height: 1.6;
}

.sp-demo-panel .wp-block-buttons {
	gap: 8px;
}

.sp-demo-panel .wp-block-buttons + .is-style-sp-label {
	margin-top: 10px !important;
	padding-top: 22px;
	border-top: 1px solid var(--sp-line-on-dark);
}

/* Offre tarifaire */
.single-content .sp-offer .wp-block-columns {
	gap: clamp(28px, 4vw, 56px);
}

.sp-offer__intro {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.single-content .sp-offer ul.is-style-sp-bullets {
	font-size: 17px;
}

/* 20 quater. Page application ---------------------------------------------------------- */
/* Trois téléphones en éventail (captures détourées) */
.sp-phones {
	position: relative;
	flex: 1 1 460px;
	min-width: 0;
	max-width: 560px;
	aspect-ratio: 560 / 500;
	margin-inline: auto;
}

.sp-phones > .wp-block-image {
	position: absolute;
	top: 11%;
	width: 34%;
	margin: 0 !important;
}

.sp-phones > .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.6));
}

.sp-phones > .wp-block-image:nth-child(1) {
	left: 3%;
	transform: rotate(-8deg);
}

.sp-phones > .wp-block-image:nth-child(2) {
	z-index: 2;
	top: 0;
	left: 31%;
	width: 38%;
}

.sp-phones > .wp-block-image:nth-child(3) {
	right: 3%;
	transform: rotate(8deg);
}

@media (prefers-reduced-motion: no-preference) {
	.sp-phones > .wp-block-image:nth-child(2) img {
		animation: sp-float 6s ease-in-out infinite;
	}
}

/* Cartes d'avantages avec un téléphone détouré sur fond de couleur */
.sp-feature-cards--phones .wp-block-image {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 260px;
	padding: 0;
	background:
		radial-gradient(circle at 50% 115%, rgba(255, 49, 49, 0.22), transparent 62%),
		var(--sp-bg-soft);
}

.sp-feature-cards--phones > .wp-block-group:nth-child(4n+2) .wp-block-image,
.sp-feature-cards--phones > .wp-block-group:nth-child(4n+3) .wp-block-image {
	background:
		radial-gradient(circle at 50% 115%, rgba(255, 49, 49, 0.32), transparent 62%),
		var(--sp-ink);
}

.sp-feature-cards--phones.sp-feature-cards--3 > .wp-block-group:nth-child(3) .wp-block-image {
	background:
		radial-gradient(circle at 50% 115%, rgba(255, 49, 49, 0.22), transparent 62%),
		var(--sp-bg-soft);
}

.sp-feature-cards.sp-feature-cards--phones .wp-block-image img {
	width: auto;
	max-width: none;
	height: 300px;
	border-radius: 0;
	box-shadow: none;
}

/* Cartes grises sur fond gris : blanches */
.is-style-sp-soft .sp-gains--cards > .wp-block-group {
	background: #FFFFFF;
}

.single-content .sp-section.is-style-sp-dark p.sp-section-head__aside {
	color: var(--sp-on-dark-2);
}

/* 20 quinquies. Page barrières ---------------------------------------------------------- */
/* Cartes d'avantages avec photo plein cadre */
.sp-feature-cards.sp-feature-cards--photos .wp-block-image {
	padding: 0;
	background: var(--sp-ink);
}

.sp-feature-cards.sp-feature-cards--photos .wp-block-image img {
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	box-shadow: none;
}

/* Documents à télécharger */
.sp-docs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.sp-docs > .wp-block-group {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.single-content .sp-section .sp-docs h3 {
	font-size: clamp(20px, 2vw, 24px);
	line-height: 1.25;
}

.single-content .sp-section .sp-docs p:not(.is-style-sp-tag) {
	font-size: 15px;
	color: var(--sp-text-2);
}

.sp-docs .wp-block-buttons {
	margin-top: auto !important;
}

/* 20 sexies. Page ouvrir un parking ------------------------------------------------------ */
/* Photos verticales recadrées */
.sp-page-hero__visual.sp-crop img {
	aspect-ratio: 5 / 4;
	object-fit: cover;
}

.wp-block-image.sp-crop-portrait img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--sp-radius-card);
}

/* Témoignage long */
.wp-block-quote.is-style-sp-review.sp-quote-long cite::before {
	display: none;
}

.single-content .wp-block-quote.is-style-sp-review.sp-quote-long p:not(.sp-review__badge) {
	font-size: clamp(18px, 1.7vw, 22px);
	line-height: 1.55;
	font-weight: 500;
	letter-spacing: 0;
}

/* 20 septies. Page contacts ------------------------------------------------------------- */
.sp-contact-boxes {
	display: grid;
	flex: 1 1 420px;
	gap: 16px;
	min-width: 0;
	max-width: 520px;
	margin-inline: auto;
}

.wp-block-group.sp-contact-box {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: clamp(20px, 2.4vw, 28px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 22px;
	background: rgba(255, 255, 255, 0.04);
}

.wp-block-image.sp-qr img {
	display: block;
	width: 160px;
	height: auto;
	border-radius: 14px;
}

/* 20 octies. Page tarifs (configurateur) --------------------------------------------------- */
.sp-pricing-toggle {
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 8px 16px;
	border: 1px solid var(--sp-border);
	border-radius: 999px;
	background: #FFFFFF;
	font-size: 15px;
	font-weight: 500;
	color: var(--sp-text-3);
}

.sp-pricing-toggle .is-active {
	color: var(--sp-ink);
	font-weight: 600;
}

.sp-pricing-toggle strong {
	color: var(--sp-red-text);
}

.sp-switch {
	position: relative;
	display: inline-block;
	width: 48px;
	height: 28px;
	cursor: pointer;
}

.sp-switch input {
	position: absolute;
	opacity: 0;
	inset: 0;
	margin: 0;
	cursor: pointer;
}

.sp-switch__slider {
	position: absolute;
	inset: 0;
	border-radius: 999px;
	background: var(--sp-border-strong);
	transition: background-color 0.2s ease;
}

.sp-switch__slider::before {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #FFFFFF;
	box-shadow: 0 1px 3px rgba(16, 15, 13, 0.3);
	transition: transform 0.2s var(--sp-ease);
}

.sp-switch input:checked + .sp-switch__slider {
	background: var(--sp-red-action);
}

.sp-switch input:checked + .sp-switch__slider::before {
	transform: translateX(20px);
}

.sp-switch input:focus-visible + .sp-switch__slider {
	box-shadow: var(--sp-focus);
}

.sp-plans {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	align-items: stretch;
}

.sp-plans--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sp-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 24px 22px;
	border: 1px solid var(--sp-border);
	border-radius: 24px;
	background: #FFFFFF;
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sp-plan:hover {
	border-color: var(--sp-border-strong);
}

.sp-plan.is-selected {
	border-color: var(--sp-red-action);
	box-shadow: 0 0 0 1px var(--sp-red-action), var(--sp-shadow-card);
}

.sp-plan.is-disabled {
	cursor: not-allowed;
	border-style: dashed;
	background: var(--sp-bg-softer);
}

.sp-plan.is-disabled :is(.sp-plan__name, .sp-plan__price) {
	color: var(--sp-text-2);
}

.sp-plan :is(h3, p, ul) {
	margin: 0;
}

.single-content .sp-plan h3.sp-plan__name {
	font-size: 22px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.sp-plan__badge {
	position: absolute;
	top: -12px;
	right: 18px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--sp-ink);
	color: #FFFFFF;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.sp-plan__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 8px;
	min-height: 40px;
	font-size: 15px;
	font-weight: 600;
	color: var(--sp-ink);
}

.sp-plan__price strong {
	font-size: 32px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: -0.03em;
}

.sp-plan__price span {
	font-size: 13px;
	font-weight: 500;
	color: var(--sp-text-3);
}

.sp-plan__price small {
	flex-basis: 100%;
	font-size: 13px;
	font-weight: 500;
	color: var(--sp-ok-text);
}

.sp-plan__old {
	font-size: 15px;
	font-weight: 500;
	color: var(--sp-text-3);
}

.single-content .sp-plan p.sp-plan__desc {
	font-size: 14px;
	line-height: 1.5;
	color: var(--sp-text-2);
}

.single-content ul.sp-plan__features {
	display: grid;
	gap: 8px;
	padding: 14px 0 0;
	border-top: 1px solid var(--sp-border);
	list-style: none;
	font-size: 14px;
	line-height: 1.45;
	color: var(--sp-text);
}

.sp-plan__features li {
	position: relative;
	margin: 0;
	padding-left: 20px;
}

.sp-plan__features li::before {
	content: "+";
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 700;
	color: var(--sp-red-text);
}

.sp-plan__features li.is-inherited {
	font-weight: 600;
}

.sp-plan__features li.is-inherited::before {
	content: "✓";
	color: var(--sp-ok-text);
}

/* Infobulle (sans script) */
.sp-tip {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	margin-left: 4px;
	border-radius: 50%;
	background: var(--sp-bg-soft);
	color: var(--sp-text-2);
	font-size: 11px;
	font-weight: 700;
	font-style: normal;
	line-height: 1;
	vertical-align: 1px;
	cursor: help;
}

.sp-tip::after {
	content: attr(data-tip);
	position: absolute;
	z-index: 5;
	bottom: calc(100% + 8px);
	left: 50%;
	width: max-content;
	max-width: 240px;
	padding: 8px 10px;
	border-radius: 8px;
	background: var(--sp-ink);
	color: #FFFFFF;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.45;
	text-align: left;
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 4px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
	pointer-events: none;
}

.sp-tip:hover::after,
.sp-tip:focus-visible::after {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s;
}

.sp-plan__example {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	font-size: 14px;
	font-weight: 600;
	color: var(--sp-red-text);
}

.sp-plan__select {
	min-height: 44px;
	margin-top: auto;
	padding: 0 16px;
	border: 1px solid var(--sp-border-strong);
	border-radius: 12px;
	background: #FFFFFF;
	color: var(--sp-ink);
	font-family: var(--sp-font);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.sp-plan__example + .sp-plan__select {
	margin-top: 0;
}

.sp-plan.is-selected .sp-plan__select {
	border-color: var(--sp-red-action);
	background: var(--sp-red-action);
	color: #FFFFFF;
}

.sp-plan.is-disabled .sp-plan__select {
	cursor: not-allowed;
}

/* Résumé collant */
.sp-summary {
	position: sticky;
	bottom: 16px;
	z-index: 30;
	padding: 14px 20px;
	border-radius: 20px;
	background: var(--sp-ink);
	color: var(--sp-on-dark-2);
	box-shadow: 0 24px 48px -20px rgba(16, 15, 13, 0.7);
}

.sp-summary__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 20px;
}

.sp-summary__title {
	margin: 0 !important;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sp-on-dark-3);
}

.sp-summary__total {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	margin: 0 0 0 auto !important;
	font-size: 14px;
}

.sp-summary__total strong {
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #FFFFFF;
}

.sp-summary__total small {
	color: var(--sp-live);
}

.sp-summary__fold {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 10px;
	background: transparent;
	color: #FFFFFF;
	cursor: pointer;
}

.sp-summary__fold::before {
	content: "";
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: var(--sp-i-chevron-down) center / contain no-repeat;
	mask: var(--sp-i-chevron-down) center / contain no-repeat;
	transition: transform 0.2s ease;
}

.sp-summary.is-folded .sp-summary__fold::before {
	transform: rotate(180deg);
}

.sp-summary .wp-block-button .wp-block-button__link {
	min-height: 40px;
	padding: 0 16px;
	border-radius: 10px;
	font-size: 14px;
}

.sp-summary__details {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--sp-line-on-dark);
	font-size: 14px;
}

.sp-summary.is-folded .sp-summary__details {
	display: none;
}

.sp-summary__details ul {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-summary__details li {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
}

.sp-summary__details li span:last-child {
	color: #FFFFFF;
	font-weight: 600;
	white-space: nowrap;
}

.sp-summary__details s {
	color: var(--sp-on-dark-3);
	font-weight: 400;
}

.sp-summary__details p {
	margin: 0;
}

/* 20 nonies. Pages de texte (mentions, CGV, confidentialité) --------------------------------- */
.sp-page-hero.sp-page-hero--compact {
	padding-bottom: clamp(40px, 5vw, 64px);
}

.single-content .sp-section.sp-page-hero--compact h1 {
	font-size: clamp(36px, 4.4vw, 56px);
}

.wp-block-group.sp-prose {
	max-width: 780px;
	margin-inline: auto !important;
	font-size: 16px;
	line-height: 1.75;
	color: var(--sp-text);
}

.single-content .sp-section .wp-block-group.sp-prose > * + * {
	margin-top: 1em;
}

.single-content .sp-section .wp-block-group.sp-prose > :is(h2, h3, h4) {
	margin-top: 2em;
}

.single-content .sp-section .sp-prose h2 {
	font-size: clamp(22px, 2.2vw, 28px);
	line-height: 1.25;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.single-content .sp-section .sp-prose h3 {
	font-size: 20px;
	line-height: 1.3;
}

.single-content .sp-section .sp-prose h4 {
	font-size: 17px;
	line-height: 1.4;
}

.sp-prose a {
	color: var(--sp-red-text);
	overflow-wrap: anywhere;
}

.single-content .sp-section .sp-prose :is(ul, ol):not([class*="is-style-sp-"]) {
	padding-left: 1.4em;
}

.sp-prose li + li {
	margin-top: 0.35em;
}

.sp-prose .wp-block-separator {
	border: 0;
	border-top: 1px solid var(--sp-border);
}

/* Document en deux colonnes (liste des fonctionnalités) */
.wp-block-group.sp-prose.sp-prose--cols {
	max-width: none;
	columns: 2 340px;
	column-gap: 56px;
}

.single-content .sp-section .wp-block-group.sp-prose--cols > .wp-block-group {
	margin: 0 0 36px;
	break-inside: avoid;
}

.single-content .sp-section .sp-prose--cols > .wp-block-group > * + * {
	margin-top: 0.75em;
}

/* Accordéons sur fond clair */
details.wp-block-details.sp-acc.sp-acc--light {
	border-color: var(--sp-border);
	background: #FFFFFF;
}

details.sp-acc.sp-acc--light > summary {
	color: var(--sp-ink);
}

details.sp-acc.sp-acc--light > summary::after {
	background-color: var(--sp-red-action);
}

.single-content .sp-section .sp-acc--light > * + * {
	margin-top: 0.75em;
}

.single-content .sp-section .sp-acc--light > :last-child {
	margin-bottom: 20px;
}

.sp-acc--light .wp-block-image img {
	max-width: 220px;
	height: auto;
}

/* 21. Formulaires Fluent Forms ------------------------------------------------------- */
.sp-form-card .fluentform .ff-el-group {
	margin-bottom: 16px;
}

.sp-form-card .fluentform .ff-el-input--label label {
	font-family: var(--sp-font);
	font-size: 13px;
	font-weight: 500;
	color: var(--sp-ink);
}

.sp-form-card .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after {
	color: var(--sp-red-action);
}

.sp-form-card .fluentform .ff-el-form-control {
	min-height: 48px;
	padding: 10px 14px;
	border: 1px solid var(--sp-border-strong);
	border-radius: 12px;
	background: #FFFFFF;
	font-family: var(--sp-font);
	font-size: 15px;
	color: var(--sp-ink);
	box-shadow: none;
}

.sp-form-card .fluentform .ff-el-form-control:focus {
	border-color: var(--sp-ink);
	box-shadow: var(--sp-focus);
}

.sp-form-card .fluentform .ff-el-form-check-label,
.sp-form-card .fluentform .ff_tc_checkbox + div,
.sp-form-card .fluentform .ff-el-tc label {
	font-size: 12px;
	line-height: 1.5;
	color: var(--sp-text-2);
}

.sp-form-card .fluentform .ff-btn-submit,
.sp-form-card .fluentform button.ff-btn {
	min-height: 52px;
	padding: 0 28px;
	border: 0;
	border-radius: 14px;
	background: var(--sp-red-action) !important;
	color: #FFFFFF !important;
	font-family: var(--sp-font);
	font-size: 16px;
	font-weight: 600;
	box-shadow: var(--sp-shadow-red);
}

.sp-form-card .fluentform .ff-btn-submit:hover {
	background: var(--sp-red-action-hover) !important;
	opacity: 1;
}

/* 22. En-tête Kadence ---------------------------------------------------------------- */
#masthead .site-main-header-wrap .site-header-row-container-inner,
#masthead .site-mobile-header-wrap .site-header-row-container-inner {
	background: rgba(16, 15, 13, 0.96);
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

#masthead .site-top-header-wrap {
	display: none;
}

/* En-tête au-dessus de la sous-navigation collante (z-index 40), sinon elle masque les sous-menus.
   Kadence le laisse à 11. */
#masthead.site-header {
	z-index: 50;
}

/* Fond sur toute la largeur seulement : sur le bloc central aussi, les deux couches semi-opaques
   rendaient le centre plus sombre que les côtés. */
#masthead .kadence-sticky-header.item-is-fixed .site-header-row-container-inner {
	background: rgba(16, 15, 13, 0.96);
}

#masthead .site-main-header-wrap .site-main-header-inner-wrap {
	background: transparent;
}

#masthead .kadence-sticky-header.item-is-fixed {
	box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.8);
}

.sp-branding {
	display: flex;
	align-items: center;
}

.sp-logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}

.sp-logo__icon {
	position: relative;
	display: block;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: 4px;
	background: var(--sp-red);
}

.sp-logo__icon > span {
	position: absolute;
	width: 6px;
	height: 6px;
	border-radius: 1.2px;
	background: #FFFFFF;
}

.sp-logo__icon .sp-logo__p1 { left: 7px; top: 8px; border-radius: 50%; }
.sp-logo__icon .sp-logo__p2 { left: 7px; top: 17px; }
.sp-logo__icon .sp-logo__p3 { left: 17px; top: 17px; }
.sp-logo__icon .sp-logo__p4 { left: 7px; top: 27px; }
.sp-logo__icon .sp-logo__p5 { left: 17px; top: 27px; }
.sp-logo__icon .sp-logo__p6 { left: 27px; top: 27px; }

.sp-logo__word {
	display: block;
	width: auto;
	height: 26px;
}

.sp-logo--animated .sp-logo__icon { animation: sp-logo-square 0.6s var(--sp-ease) 0.05s both; }
.sp-logo--animated .sp-logo__p1 { animation: sp-logo-p1 0.7s var(--sp-ease) 0.3s both; }
.sp-logo--animated .sp-logo__p2 { animation: sp-logo-p2 0.7s var(--sp-ease) 0.38s both; }
.sp-logo--animated .sp-logo__p3 { animation: sp-logo-p3 0.7s var(--sp-ease) 0.46s both; }
.sp-logo--animated .sp-logo__p4 { animation: sp-logo-p4 0.7s var(--sp-ease) 0.54s both; }
.sp-logo--animated .sp-logo__p5 { animation: sp-logo-p5 0.7s var(--sp-ease) 0.62s both; }
.sp-logo--animated .sp-logo__p6 { animation: sp-logo-p6 0.7s var(--sp-ease) 0.7s both; }
.sp-logo--animated .sp-logo__word { animation: sp-fade-up 0.5s ease-out 0.85s both; }

/* Menu principal */
#masthead .main-navigation .primary-menu-container > ul > li.menu-item > a {
	color: var(--sp-on-dark-soft);
	font-family: var(--sp-font);
	font-size: 15px;
	font-weight: 500;
	padding-left: 11px;
	padding-right: 11px;
}

#masthead .main-navigation .primary-menu-container > ul > li.menu-item > a:hover,
#masthead .main-navigation .primary-menu-container > ul > li.menu-item.current-menu-item > a,
#masthead .main-navigation .primary-menu-container > ul > li.menu-item.current-menu-ancestor > a {
	color: #FFFFFF;
}

#masthead .main-navigation .primary-menu-container > ul > li.menu-item.current-menu-item > a {
	box-shadow: inset 0 -2px 0 var(--sp-red);
}

#masthead .header-navigation .header-menu-container ul ul.sub-menu {
	padding: 8px;
	border: 1px solid var(--sp-ink-3);
	border-radius: 14px;
	background: var(--sp-ink-2);
	box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
}

#masthead .header-navigation .header-menu-container ul ul li.menu-item > a {
	padding: 10px 12px;
	border-radius: 9px;
	color: var(--sp-on-dark-soft);
	font-size: 14px;
	font-weight: 400;
	border-bottom: 0;
}

#masthead .header-navigation .header-menu-container ul ul li.menu-item > a:hover {
	background: rgba(255, 255, 255, 0.06);
	color: #FFFFFF;
}

#masthead .header-navigation .header-menu-container ul ul li.menu-item {
	border-bottom: 0;
}

/* Téléphone, bouton démo, langues */
.sp-tel {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

.sp-tel::before {
	content: "";
	width: 18px;
	height: 18px;
	background-color: var(--sp-red-on-dark);
	-webkit-mask: var(--sp-i-phone) center / contain no-repeat;
	mask: var(--sp-i-phone) center / contain no-repeat;
}

#masthead .sp-tel,
.sp-tel {
	text-decoration: none;
}

.sp-tel:hover {
	color: #FFFFFF;
	text-decoration: underline;
}

.sp-tel--icon {
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 12px;
}

.sp-tel--icon::before {
	width: 20px;
	height: 20px;
}

#masthead .header-button,
#masthead .mobile-header-button {
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 20px;
	border-radius: 12px;
	background: var(--sp-red-action);
	color: #FFFFFF;
	font-family: var(--sp-font);
	font-size: 14px;
	font-weight: 600;
	box-shadow: none;
}

#masthead .header-button:hover,
#masthead .mobile-header-button:hover {
	background: var(--sp-red-action-hover);
	color: #FFFFFF;
}

.sp-lang {
	position: relative;
}

.sp-lang > summary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 44px;
	padding: 0 10px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 12px;
	color: #FFFFFF;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	list-style: none;
}

.sp-lang > summary::-webkit-details-marker {
	display: none;
}

.sp-lang > summary::after {
	content: "";
	width: 12px;
	height: 12px;
	background-color: currentColor;
	-webkit-mask: var(--sp-i-chevron-down) center / contain no-repeat;
	mask: var(--sp-i-chevron-down) center / contain no-repeat;
	transition: transform 0.2s ease;
}

.sp-lang[open] > summary::after {
	transform: rotate(180deg);
}

.sp-lang > ul {
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	z-index: 1000;
	min-width: 220px;
	max-height: min(70vh, 520px);
	overflow-y: auto;
	margin: 0;
	padding: 8px;
	list-style: none;
	border: 1px solid var(--sp-ink-3);
	border-radius: 14px;
	background: var(--sp-ink-2);
	box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
}

.sp-lang a,
.sp-lang-list a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 9px;
	color: var(--sp-on-dark-soft);
	font-size: 14px;
	text-decoration: none;
}

/* Kadence souligne les liens des zones HTML (.inner-link-style-normal a:not(.button)). */
#masthead .sp-lang a {
	text-decoration: none;
}

.sp-lang__flag {
	flex-shrink: 0;
	width: 18px;
	height: 12px;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.sp-lang a:hover,
.sp-lang a[aria-current] {
	background: rgba(255, 255, 255, 0.06);
	color: #FFFFFF;
}

.sp-lang__code {
	min-width: 44px;
	font-family: var(--sp-mono);
	font-size: 12px;
	color: var(--sp-red-on-dark);
}

#masthead .header-html,
#masthead .header-html2 {
	display: flex;
	align-items: center;
}

/* En-tête mobile */
#masthead .site-mobile-header-wrap .mobile-toggle-open-container .menu-toggle-open {
	width: 44px;
	height: 44px;
	padding: 0;
	justify-content: center;
	border-radius: 12px;
	background: #FFFFFF;
	color: var(--sp-ink);
}

#masthead .site-mobile-header-wrap .mobile-toggle-open-container .menu-toggle-open .menu-toggle-icon {
	color: var(--sp-ink);
}

/* Tiroir mobile */
#mobile-drawer .drawer-inner {
	background: var(--sp-ink);
	color: #FFFFFF;
}

#mobile-drawer .drawer-header .drawer-toggle {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: #FFFFFF;
	color: var(--sp-ink);
}

#mobile-drawer .mobile-navigation ul li.menu-item > a,
#mobile-drawer .mobile-navigation ul li.menu-item > .drawer-nav-drop-wrap {
	border-bottom-color: var(--sp-line-on-dark);
}

#mobile-drawer .mobile-navigation > div > ul > li.menu-item > a,
#mobile-drawer .mobile-navigation > div > ul > li.menu-item > .drawer-nav-drop-wrap > a {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-top: 16px;
	padding-bottom: 16px;
	color: #FFFFFF;
	font-size: 19px;
	font-weight: 500;
}

#mobile-drawer .mobile-navigation > div > ul > li.menu-item > a::before,
#mobile-drawer .mobile-navigation > div > ul > li.menu-item > .drawer-nav-drop-wrap > a::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 2px;
	background: var(--sp-red);
	flex-shrink: 0;
}

#mobile-drawer .mobile-navigation ul ul li.menu-item > a {
	padding-left: 24px;
	color: var(--sp-on-dark-2);
	font-size: 15px;
}

#mobile-drawer .mobile-navigation .drawer-sub-toggle {
	color: #FFFFFF;
}

#mobile-drawer .sp-drawer a,
#mobile-drawer .sp-lang-list a {
	text-decoration: none;
}

.sp-drawer {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 20px 0 8px;
}

.sp-drawer__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	border-radius: 14px;
	background: var(--sp-red-action);
	color: #FFFFFF;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
}

.sp-drawer__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.sp-drawer__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 50px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 14px;
	color: #FFFFFF;
	font-size: 15px;
	text-decoration: none;
}

.sp-drawer__btn::before {
	color: var(--sp-red-on-dark);
}

.sp-drawer__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-size: 13px;
	color: var(--sp-on-dark-3);
}

.sp-lang-list {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-lang-list a {
	gap: 6px;
	padding: 6px 8px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 8px;
	font-family: var(--sp-mono);
	font-size: 11px;
}

.sp-lang-list .sp-lang__name {
	display: none;
}

.sp-lang-list .sp-lang__code {
	min-width: 0;
	color: inherit;
}

.sp-lang-list a[aria-current] {
	background: #FFFFFF;
	color: var(--sp-ink);
}

/* 23. Pied de page ------------------------------------------------------------------- */
.sp-footer {
	padding: 72px var(--sp-gutter) 36px;
	background: var(--sp-ink);
	color: var(--sp-on-dark-3);
	font-size: 14px;
	line-height: 1.6;
}

.sp-footer :is(p, ul, h2) {
	margin: 0;
}

.sp-footer__inner {
	max-width: var(--sp-content);
	margin: 0 auto;
}

.sp-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 40px 32px;
}

.sp-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-width: 300px;
}

.sp-footer__agencies {
	grid-column: 1;
}

.sp-footer__title {
	margin-bottom: 16px !important;
	font-size: 13px;
	line-height: 1.4;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #FFFFFF;
}

.sp-footer a {
	color: #B9B2AB;
	text-decoration: none;
}

.sp-footer a:hover {
	color: #FFFFFF;
	text-decoration: underline;
}

.sp-footer__links {
	gap: 8px;
}

.sp-footer__social.wp-block-social-links {
	gap: 8px;
	margin: 0;
}

.sp-footer__social .wp-social-link {
	margin: 0;
}

.sp-footer__social .wp-social-link a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 10px;
	color: #FFFFFF;
}

.sp-footer__social .wp-social-link svg {
	width: 16px;
	height: 16px;
}

/* X : logo noir par défaut, invisible sur le pied de page sombre */
.wp-block-social-links.sp-footer__social .wp-social-link-x {
	color: #FFFFFF;
}

.sp-footer__bottom {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid var(--sp-line-on-dark);
}

.sp-footer__legal {
	display: flex !important;
	flex-wrap: wrap;
	gap: 6px 20px !important;
	font-size: 13px;
}

.sp-footer__legal-text a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.sp-footer__legal-text {
	font-size: 12px;
	line-height: 1.6;
	color: #8E867E;
}

/* 24. Barre d'action mobile ------------------------------------------------------------ */
.sp-mbar {
	position: fixed;
	left: 12px;
	right: 12px;
	bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	z-index: 900;
	display: flex;
	gap: 8px;
	padding: 8px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 18px;
	background: rgba(27, 25, 23, 0.94);
	box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.6);
	transform: translateY(160%);
	visibility: hidden;
	transition: transform 0.35s var(--sp-ease), visibility 0s linear 0.35s;
}

.sp-mbar.is-visible {
	transform: none;
	visibility: visible;
	transition: transform 0.35s var(--sp-ease), visibility 0s;
}

.sp-mbar a {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.sp-mbar__call {
	background: rgba(255, 255, 255, 0.08);
	color: #FFFFFF;
}

.sp-mbar__call::before {
	color: var(--sp-red-on-dark);
}

.sp-mbar__demo {
	flex: 1.5 !important;
	background: var(--sp-red-action);
	color: #FFFFFF;
}

.sp-mbar a:hover {
	color: #FFFFFF;
}

@media (min-width: 1080px) {
	.sp-mbar {
		display: none;
	}
}

/* 25. Animations --------------------------------------------------------------------- */
@keyframes sp-logo-square { from { transform: scale(.4) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sp-logo-p1 { from { transform: translate(-26px, -22px) scale(.2); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sp-logo-p2 { from { transform: translate(-30px, 10px) scale(.2); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sp-logo-p3 { from { transform: translate(24px, -26px) scale(.2); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sp-logo-p4 { from { transform: translate(-22px, 28px) scale(.2); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sp-logo-p5 { from { transform: translate(8px, 32px) scale(.2); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sp-logo-p6 { from { transform: translate(30px, 20px) scale(.2); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sp-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@keyframes sp-hero-square { from { transform: scale(.55) rotate(-10deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sp-hero-p1 { from { transform: translate(-420px, -200px) rotate(-60deg) scale(.15); opacity: 0; } 55% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes sp-hero-p2 { from { transform: translate(-560px, 80px) rotate(45deg) scale(.2); opacity: 0; } 55% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes sp-hero-p3 { from { transform: translate(380px, -300px) rotate(80deg) scale(.15); opacity: 0; } 55% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes sp-hero-p4 { from { transform: translate(-380px, 320px) rotate(-70deg) scale(.2); opacity: 0; } 55% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes sp-hero-p5 { from { transform: translate(160px, 380px) rotate(50deg) scale(.18); opacity: 0; } 55% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes sp-hero-p6 { from { transform: translate(460px, 220px) rotate(-55deg) scale(.15); opacity: 0; } 55% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes sp-ping { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes sp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Apparition douce des sections au défilement (navigateurs compatibles uniquement) */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.sp-reveal {
			animation: sp-fade-up linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 40%;
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.sp-logo--animated *,
	.sp-logo--animated .sp-logo__icon,
	.sp-hero-visual *,
	.sp-hero-visual > *,
	.sp-hero-visual__square::before,
	.sp-hero-visual__square::after,
	.sp-hero__row::before,
	.sp-hero__row::after {
		animation: none !important;
	}

	.sp-hero-visual__square::after {
		display: none;
	}

	.sp-lift:hover,
	.sp-tile:hover::before {
		transform: none;
	}
}

/* 26. Écrans moyens et petits ----------------------------------------------------------- */
@media (max-width: 1079px) {
	.sp-footer__grid {
		grid-template-columns: 1fr 1fr;
	}

	.sp-footer__agencies {
		grid-column: auto;
	}

	.sp-hero-visual {
		max-width: 560px;
	}
}

@media (max-width: 1079px) {
	.sp-plans,
	.sp-plans--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sp-summary {
		bottom: calc(84px + env(safe-area-inset-bottom, 0px));
	}

	.single-content ul.sp-tiles,
	ul.sp-tiles,
	.single-content ul.sp-feature-rows,
	ul.sp-feature-rows {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sp-feature-cards.sp-feature-cards--3 {
		grid-template-columns: minmax(0, 1fr);
	}

	.single-content .wp-block-group.sp-subnav,
	.wp-block-group.sp-subnav {
		position: relative;
		top: auto;
	}
}

@media (max-width: 900px) {
	.sp-gains,
	.sp-advantages,
	.sp-prices,
	.sp-feature-cards,
	.sp-docs,
	.sp-gains.sp-gains--2,
	.sp-seo__cols,
	.sp-seo__cols.sp-seo__cols--2 {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 781px) {
	.sp-card--app .sp-card__phone {
		width: 150px;
		bottom: -70px;
	}

	.sp-card--app ul.is-style-sp-bullets {
		max-width: 60%;
	}
}

@media (max-width: 640px) {
	.sp-hero .wp-block-buttons,
	.sp-hero .wp-block-button,
	.sp-page-hero .sp-cta-row,
	.sp-page-hero .wp-block-buttons,
	.sp-page-hero .wp-block-button {
		width: 100%;
	}

	.sp-hero .wp-block-button .wp-block-button__link,
	.sp-page-hero .wp-block-button .wp-block-button__link {
		width: 100%;
	}

	/* Magasins d'applications : côte à côte */
	.sp-page-hero .wp-block-buttons.sp-stores {
		flex-wrap: nowrap;
	}

	.sp-page-hero .wp-block-buttons.sp-stores .wp-block-button {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
	}

	.wp-block-button.sp-store .wp-block-button__link {
		padding: 8px 12px;
		gap: 0 10px;
		font-size: 15px;
	}

	.wp-block-button.sp-store .wp-block-button__link::before {
		width: 22px;
		height: 22px;
	}

	.wp-block-image.sp-review__logo img {
		width: 96px;
	}

	.single-content .sp-marquee__track > figure.wp-block-image {
		width: 132px;
		padding: 5px;
		border-radius: 22px;
	}

	.sp-marquee__track > figure.wp-block-image img {
		border-radius: 17px;
	}

	/* Tuiles de fonctions : icône et libellé sur une ligne */
	ul.sp-feature-list > li {
		flex-direction: row;
		align-items: center;
		padding: 16px 18px;
	}

	.sp-stat + .sp-stat {
		padding-left: 20px;
	}

	.sp-stats {
		gap: 16px 20px;
	}

	.sp-segments {
		padding-bottom: 40px;
	}

	.sp-segments > .is-style-sp-pills {
		flex-wrap: nowrap;
		overflow-x: auto;
		margin-inline: calc(-1 * var(--sp-gutter));
		padding-inline: var(--sp-gutter);
		scrollbar-width: none;
	}

	.sp-segments > .is-style-sp-pills::-webkit-scrollbar {
		display: none;
	}

	.sp-footer__grid {
		grid-template-columns: 1fr;
	}

	.sp-contact::after {
		display: none;
	}

	ul.is-style-sp-bullets.sp-cols-2 {
		grid-template-columns: minmax(0, 1fr);
	}

	.single-content ul.sp-feature-rows,
	ul.sp-feature-rows,
	.single-content ul.sp-feature-list,
	ul.sp-feature-list {
		grid-template-columns: minmax(0, 1fr);
	}

	.sp-plans,
	.sp-plans--3 {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Résumé : une seule ligne au-dessus de la barre d'action mobile */
	.sp-summary {
		padding: 10px 14px;
	}

	.sp-summary__title,
	.sp-summary .wp-block-buttons {
		display: none;
	}

	.sp-summary__total {
		flex: 1;
		margin-left: 0 !important;
	}

	.sp-summary__total strong {
		font-size: 22px;
	}

	/* Tuiles colorées : deux colonnes, icône au-dessus du libellé */
	.single-content ul.sp-tiles,
	ul.sp-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	ul.sp-tiles > li {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		padding: 16px;
		font-size: 15px;
	}

	ul.sp-tiles > li::before {
		width: 40px;
		height: 40px;
		border-radius: 10px;
	}

	ul.sp-tiles > li::after {
		left: 26px;
		top: 26px;
		width: 20px;
		height: 20px;
		margin-top: 0;
	}

	.sp-feature-cards.sp-feature-cards--phones .wp-block-image {
		height: 220px;
		padding: 0;
	}

	.sp-feature-cards.sp-feature-cards--phones .wp-block-image img {
		height: 254px;
	}

	.sp-feature-cards .wp-block-image {
		height: 200px;
		padding: 20px 20px 0;
	}

	.sp-compare {
		grid-template-columns: minmax(0, 1fr);
	}

	.sp-bignum strong {
		font-size: 44px;
	}
}