/* ------------------------- Variables globales -------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
	--brand-color: #0b6efd;
	--brand-color-soft: rgba(11, 110, 253, 0.15);
	--brand-color-glow: rgba(11, 110, 253, 0.35);
	--text-color: #ffffff;
	--text-muted: rgba(255,255,255,0.75);
	--background: #070a12;
	--muted: rgba(255,255,255,0.75);
	--radius: 14px;
	--gap: 1rem;
    --font-body: "Inter", system-ui, sans-serif;
	--font-title: "Space Grotesk", sans-serif;	
}

.site-main {
	position: relative;
	overflow: clip;    
}

*, *::before, *::after {
  box-sizing: border-box;
}

html{
	overflow-x: clip;
}

html, body {
	scroll-behavior: smooth;
	height: auto;
	margin: 0;
	padding: 0;
	color: var(--text-color);
	background: #070a12;
    font-family: var(--font-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	
	
}


h1, h2, h3 {
	font-family: var(--font-title);	
}

h2{
	background: rgba(59, 130, 246, 0.10);
	box-shadow: 0 0 14px rgba(59, 130, 246, 0.15);
}



/* ------------------------- Accessiblité-- */

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ========================= séparateur section ========================= */

.section-divider {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    z-index: 3;
}

.divider-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(11,110,253,0.12);
    color: #fdfdfd;
    text-decoration: none;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    animation: floatUpDown 1.0s infinite;
}

.divider-action::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);

    background: rgba(7,10,18,.85);
    color: #ffffff;
    padding: 5px 14px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: .04em;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.12);

    pointer-events: none;
}


.divider-action:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.divider-action:hover {
    color: #0b6efd;
    box-shadow: 0 15px 40px rgba(11,110,253,0.15);
}

.divider-action .rocket-icon {
    transform: rotate(180deg) scale(0.8);
    transition: transform 0.2s ease;
}

.divider-action:hover .rocket-inner {
    animation: shakeSoft 0.5s infinite;
}

.section-divider .rocket-wrapper.launch.down,
.hero .rocket-wrapper.launch.down {
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.2));
    animation: rocketLaunchDown 2s ease-in forwards;
    will-change: transform;
}

.section-divider .rocket-wrapper.launch.down::before,
.hero .rocket-wrapper.launch.down::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -10px;
    width: 10px;
    height: 18px;
    transform: translateX(-50%);
    background: linear-gradient(to top, #fff, transparent);
    border-radius: 50%;
    animation: flameBurst 1.5s ease-out forwards;
    pointer-events: none;
}

.section-divider .rocket-wrapper.launch.down::after,
.hero .rocket-wrapper.launch.down::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -20px;
    width: 4px;
    height: 40px;
    transform: translateX(-50%);
    background: linear-gradient(to top, #fff, transparent);
    animation: smokeTrail 1.5s ease-out forwards;
    pointer-events: none;
}

/* ========================= Back to Top = */

.back-to-top {
    position: fixed;
    top: 18px;
    left: 47.8%;
    padding-top: 100px;
	z-index: 3;
    filter: blur(2px);
   
   

    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 4px 8px;
    color: rgba(255,255,255,0.85);
    text-decoration: none;

    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
    border-radius: 999px;

    box-shadow: 0 10px 30px rgba(0,0,0,0.25);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: opacity 0.25s ease, transform 0.35s ease, filter 0.35s ease;
}
.back-to-top:hover .tooltip-text {
    opacity: 1;
    visibility: visible;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
}
.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    filter: blur(0);
	transform: scale(0.8);
    
}

@media (hover: hover) and (pointer: fine) {
    .back-to-top:hover {
        background: rgba(11,110,253,0.12);
        border-color: rgba(11,110,253,0.35);
        color: #0b6efd;
        box-shadow: 0 15px 40px rgba(11,110,253,0.15);
        animation: shakeSoft 0.6s infinite;
    }
}

.back-to-top::before,
.back-to-top::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    pointer-events: none;
}

.back-to-top::before {
    bottom: -14px;
    width: 10px;
    height: 18px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.15) 40%, rgba(255,100,0,0) 70%);
    border-radius: 50%;
    filter: blur(1px);
}

.back-to-top::after {
    bottom: -40px;
    width: 4px;
    height: 40px;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.15), transparent);
}

.back-to-top.launching::before {
    opacity: 1;
    animation: flame 0.4s ease-out forwards;
}

.back-to-top.launching::after {
    opacity: 1;
    animation: smokeTrail 0.5s ease-out forwards;
}


/* ========================= boutons = */

.btn-primary {
    display: inline-block;
    position: relative;
    padding: 12px 28px;

    background: rgba(0, 1, 2, 0.418);
    border: 1px solid rgba(1, 8, 17, 0.3);
    border-radius: 14px;

    color: #ffffff;
    font-weight: 600;
    font-size: 1.1rem;
    text-decoration: none;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    box-shadow:
        0 0 20px rgba(11, 110, 253, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);

    pointer-events: auto;
    cursor: pointer;

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.btn-primary::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background: radial-gradient(circle at 50% 0%, rgba(11, 110, 253, 0.25), transparent 70%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    background: rgba(11, 110, 253, 0.22);
    border-color: rgba(11, 110, 253, 0.55);
    box-shadow:
        0 12px 32px rgba(11, 110, 253, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.btn-primary:hover::before {
    opacity: 1;
}

.btn-primary:active {
    transform: translateY(0) scale(0.97);
    box-shadow: 0 4px 12px rgba(11, 110, 253, 0.15);
}


/* ------------------------- Header -------------------------- */

.site-header {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    width: min(1200px, calc(100% - 40px));
    height: 64px;
    box-sizing: border-box;
    z-index: 100; 
    background: rgba(27, 27, 27, 0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
    overflow: visible;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}

.site-header.hidden {
    transform: translateX(-50%) translateY(-120px);
    opacity: 0;
}

.site-header.visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        135deg,
        rgba(255,255,255,0.02) 0,
        rgba(255,255,255,0.02) 1px,
        transparent 1px,
        transparent 12px
    );
    opacity: 0.25;
    animation: stripes 12s linear infinite;
    pointer-events: none;
}

.site-header::after {
    content: "";
    position: absolute;
    inset: -2px;
    background: radial-gradient(circle at 50% 0%, rgba(11,110,253,0.15), transparent 60%);
    pointer-events: none;
}

.site-header .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0; 
    height: 100%;
}

.header-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 24px; 
    box-sizing: border-box;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: inherit;
}

.brand-logo {
    width: 120px;
    height: 44px; 
    object-fit: contain;
}

.brand-text {
    font-weight: 700;
    font-size: 1.125rem;
}

.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1rem;
    align-items: center;
}

.main-nav a {
    position: relative;
    padding: 0.5rem 0.9rem;
    border-radius: 10px;
    text-decoration: none;
    color: var(--muted);
    font-weight: 600;
    transition: color 0.25s, background 0.25s;
    white-space: nowrap;
}

.main-nav a:hover {
    background: rgba(255,255,255,0.06);
    color: var(--brand-color);
}

.main-nav .active > a {
    background: rgba(11,110,253,0.12);
    border: 1px solid rgba(11,110,253,0.25);
    border-radius: 10px;
}

.has-submenu > a::after {
    content: "▾";
    margin-left: 6px;
    font-size: 0.7em;
    opacity: 0.6;
    transition: transform 0.2s ease;
}

.has-submenu.submenu-open > a::after {
    transform: rotate(180deg);
}

.main-nav .has-submenu {
    position: relative;
}

.main-nav .submenu {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    margin-top: 20px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    background: rgba(27, 27, 27, 0.55);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
    min-width: 220px;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.25s ease 0.25s, transform 0.25s ease 0.25s;
}

.main-nav .submenu::before {
    content: "";
    position: absolute;
    top: -14px;
    left: -10px;
    right: -10px;
    height: 14px;
}

@media (hover: hover) and (pointer: fine) {
    .main-nav .has-submenu:hover > .submenu {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        transition: opacity 0.2s ease 0s, transform 0.2s ease 0s;
    }

    .main-nav .has-submenu:hover > a::after {
        transform: rotate(180deg);
    }
}


.has-submenu.submenu-open > .submenu {
    visibility: visible; 
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0s;
}

.main-nav .submenu li a {
    padding: 0.6rem 1.6rem;
    font-weight: 400;
    color: var(--muted);
}

.lang-switcher {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.lang {
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
    color: var(--muted);
    border: 1px solid transparent;
    transition: color 0.25s, border-color 0.25s; 
    white-space: nowrap;
}

.lang:hover {
    color: var(--brand-color);
}

.lang.active {
    color: var(--brand-color);
    border-color: rgba(11,110,253,0.12);
}

.nav-toggle {
    display: none;
    background: none;
    border: 0;
    width: 40px;
    height: 40px;
}

.hamburger {
    width: 18px;
    height: 2px;
    background: var(--text-color);
    position: relative;
    transition: background 0.25s ease; 
}

.hamburger::before,
.hamburger::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--text-color);
    transition: transform 0.25s ease; 
}

.hamburger::before { top: -6px; }
.hamburger::after  { top:  6px; }

.nav-left a {
    color: var(--muted);
    font-weight: 600;
    text-decoration: none;
    position: relative;
    transition: color 0.25s;
    white-space: nowrap;
}

.nav-left a.active {
    color: var(--brand-color);
}

.nav-left a.active::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background: var(--brand-color);
}

/* ========================= FOOTER ========================= */

.site-footer {
	position: fixed;
	bottom: 20px;
	left: 50%;
    pointer-events: none;
	transform: translateX(-50%) translateY(120px);
	opacity: 0;
	width: min(1200px, calc(100% - 40px));
	z-index: 2;
	background: rgba(27, 27, 27, 0.55);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 18px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
	padding: 40px 20px;
	overflow: visible;
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}

.site-footer.visible {
	transform: translateX(-50%) translateY(0);
    pointer-events: auto;
	opacity: 1;
}

.site-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient( 135deg, rgba(255,255,255,0.02) 0, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 12px );
	opacity: 0.25;
	pointer-events: none;
}

.site-footer::after {
	content: "";
	position: absolute;
	inset:-2px;
	background: radial-gradient( circle at 50% 100%, rgba(11,110,253,0.15), transparent 60% );
	pointer-events: none;
}

.footer-inner {
	position: relative;
	
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 30px;
	flex-wrap: wrap;
}

.footer-brand {
	display: flex;
	align-items: center;
    margin-left: 40px;
	gap: 10px;
	text-decoration: none;
	color: inherit;
}

.footer-brand:hover {
    transform: scale(1.05);
}

.footer-brand img {
	width: 120px;
	height: 42px;
	object-fit: contain;
	opacity: 0.85;
}

.footer-text {
	font-weight: 700;
	font-size: 1.05rem;
	color: rgba(255,255,255,0.85);
}

.footer-copy {
	margin: 0;
	text-align: center;
	font-size: 0.9rem;
	color: rgba(255,255,255,0.55);
}

.footer-nav {
	list-style: none;
	display: flex;
	gap: 14px;
	justify-content: center;
	margin: 10px 0 30px;
	padding: 0;
}

.footer-nav a {
	text-decoration: none;
	color: rgba(255,255,255,0.6);
	font-weight: 600;
	padding: 6px 10px;
	border-radius: 8px;
	transition: color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.footer-nav a:hover {
	color: var(--brand-color);
	background: rgba(11,110,253,0.08);
	transform: translateY(-1px);
}

.footer-cta {
	display: inline-block;
	padding: 12px 18px;
	border-radius: 12px;
	background: #0b6efd;
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 10px 25px rgba(11, 110, 253, 0.25);
	transition: all 0.3s ease;
    margin-right: 40px;
}

.footer-cta:hover {
	background: #0953c6;
	transform: translateY(-2px);
	box-shadow: 0 14px 35px rgba(11, 110, 253, 0.35);
}

.site-footer.visible .footer-cta {
	animation: Pulse 2.5s ease-in-out infinite;
}


/* ========================= landingpage.php ========================= */

.section-company {
    position: relative;
    padding-top: 150px;
    padding-bottom: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 100dvh;
	background:
        radial-gradient(circle at center, rgba(0,0,0,0.05), rgba(0,0,0,0.5)),
        url("../image/bgsite.png") center / cover no-repeat;
    background-size: cover;
    background-position: center;
}



.company-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 900px;
    padding: 40px 20px;
}

.site_description {
    font-size: 1.5rem;
    line-height: 1.85;
    font-weight: 600;
    max-width: 820px;
    margin: 0 auto;
    color: rgba(255,255,255,0.95);
    letter-spacing: 0.2px;
    opacity: 0;
    animation: fadeUp 0.9s ease-out forwards;
    animation-delay: 0.2s;
}

.site_description_devise {
    font-size: 0.9rem;
    line-height: 1.7;
    font-weight: 400;
    max-width: 680px;
    margin: 10px auto 20px;
    color: rgb(255, 255, 255);
    opacity: 0;
    animation: fadeUp 0.9s ease-out forwards;
    animation-delay: 0.4s;
}

.site_description .highlight {
    color: var(--brand-color);
    text-decoration: none;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 8px;
    /* ← était transition: all */
    transition: color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, text-shadow 0.25s ease;
}

.site_description .highlight:hover {
    background: rgba(255, 255, 255, 0.08);
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.25);
    color: #ffffff;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.15);
    -webkit-box-decoration-break: clone; 
    box-decoration-break: clone;
}

.company-logo img {
    max-width: 120px;
    opacity: 0.75;
    margin-top: 30px;
    margin-bottom: 50px;
    border-radius: 14px;
    animation: fadeUp 1.8s ease-out forwards;
}

.company-logomain img {
    max-width: 400px;
    margin-bottom: 50px;
    border-radius: 20px;
    opacity: 0.9;
    filter: drop-shadow(0 25px 60px rgba(0, 0, 0, 0.4));
    will-change: transform, filter;
    transition: transform 0.2s ease-out, filter 0.3s ease;
    transform: translateY(0) scale(1);
    animation: floatSub 3s ease-in-out infinite;
}

.company-logo img:hover {
    animation: none;
    transform: scale(1.2);
    opacity: 0.9;
}

.company-logooffre img {
    max-width: 250px;
    margin-bottom: 10px;
    border-radius: 20px;
    opacity: 0.9;
    filter: drop-shadow(0 25px 60px rgba(0, 0, 0, 0.4));
    will-change: transform, filter;
    transition: transform 0.2s ease-out, filter 0.3s ease;
    transform: translateY(0) scale(1);
    animation: logoBreath 6s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.hero-actions {
    margin-top: 50px;
    margin-bottom: 10px;
    animation: fadeUp 1.8s ease-out forwards;
}

.rocket-icon {
    width: 64px;
    height: 64px;
    transition: transform 0.3s ease;
    
}

.tooltip-text-index {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: rgba(255, 255, 255, 0.08);
    color: #fffefe;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.9rem;
    white-space: nowrap;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.tooltip-hidden {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
}

.hero-actions .btn {
    display: inline-block;
    padding: 12px 22px;
    border-radius: 12px;
    color: #fff;
    font-weight: 600;
    font-size: 1.15rem;
    text-decoration: none;
    position: relative;
    overflow: visible;
    opacity: 0.95;
    transform: scale(0.98);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.hero-actions .btn:hover {
    transform: scale(1.05);
    animation: shakeSoft 0.6s infinite;
}

.hero-actions .btn:hover .rocket-icon {
    transform: scale(1.8);
}

.hero-actions .btn.launching {
    animation: rocketLaunch 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.hero-actions .btn::after {
    content: "";
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%) scaleY(0);
    width: 12px;
    height: 30px;
    background: radial-gradient(circle, rgba(255,255,255,0.15), rgba(255,255,255,0.15), transparent);
    filter: blur(2px);
    border-radius: 50%;
}

.hero-actions .btn.launching::after {
    animation: flame 0.18s infinite alternate;
    opacity: 1;
}

.hero-actions .btn::before {
    content: "";
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 80px;
    background: linear-gradient(to top, rgba(255,255,255,0.15), transparent);
    opacity: 0;
}

.hero-actions .btn.launching::before {
    opacity: 1;
    animation: smokeTrail 0.5s infinite linear;
}

.btn.launching .rocket-icon {
    animation: rocketShake 0.8s infinite;
}

.rocket-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
	padding: 30px 50px;
    cursor: pointer;
}

.rocket-wrapper:hover .tooltip-text,
.btn:hover .tooltip-text {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}



/* ========================= Accueil.php ========================= */

main .hero {
    position: relative;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    background:
        radial-gradient(circle at center, rgba(0,0,0,0.05), rgba(0,0,0,0.5)),
        url("../image/grandcockpit.png") center / cover no-repeat;
}

/* Vignette cockpit — assombrit le cadre, laisse la fenêtre centrale transparente */
main .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 54% 46% at 50% 38%,
        transparent 0%,
        transparent 46%,
        rgba(0, 3, 20, 0.52) 72%,
        rgba(0, 3, 20, 0.8) 100%
    );
    pointer-events: none;
    z-index: 0;
}

/* Liseré HUD bas de section */
main .hero::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(11,110,253,0.4), transparent);
    pointer-events: none;
    z-index: 1;
}

/* ── Zone fenêtre (logo + titre + CTA) ── */
.hero-window-area {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 75px;
}

main .hero .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: 100%;
}




/* Panneau de verre centré dans la fenêtre */
.hero-window-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    margin-top: 24px;
    padding: 36px 32px 32px;
    max-width: 540px;
    width: 100%;

    background: rgba(0, 5, 22, 0.22);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.07);
    box-shadow:
        0 0 80px rgba(11,110,253,0.1),
        inset 0 0 40px rgba(0,0,0,0.2);
}

.highlight-accueil {
    background: rgba(59, 130, 246, 0.10);
    box-shadow: 0 0 14px rgba(59, 130, 246, 0.15);
    color: #ffffff;
    padding: 2px 6px;
    border-radius: 6px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

main .hero h1 {
    font-family: "Space Grotesk", sans-serif;
    font-size: 2.8rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0.72) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

main .hero h1 .highlight-accueil {
    -webkit-text-fill-color: #ffffff;
    color: #ffffff;
}

main .hero .subtitle {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0;
    max-width: 560px;
    line-height: 1.65;
    background: linear-gradient(180deg, rgba(100,160,255,0.95), rgba(59,130,246,0.82));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ── Zone cockpit / dashboard (hero-points) ── */
.hero-cockpit-area {
    position: relative;
    z-index: 1;
    padding: 18px 20px 14px;
    display: flex;
    justify-content: center;
}

main .hero-points {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

main .hero-points li {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 18px;
    border-radius: 6px;
    width: 100%;
    max-width: 420px;

    background: rgba(0, 0, 0, 0.52);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(11,110,253,0.22);
    box-shadow: 0 0 14px rgba(11,110,253,0.08);

    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255,255,255,0.85);

    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}


main .hero-points li:hover {
    transform: translateY(-2px);
    border-color: rgba(11,110,253,0.45);
    box-shadow: 0 0 22px rgba(11,110,253,0.2);
}

main .hero-points li::before {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--brand-color);
    box-shadow: 0 0 8px rgba(11,110,253,0.9);
}

/* ── Rocket wrapper ── */
main .hero .rocket-wrapper {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    padding-bottom: 45px;
}




/* ===================== SECTION FUSIONNÉE SOLUTION + OFFRES ===================== */


.sol-off {
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    background:
        radial-gradient(ellipse at 50% 0%,  rgba(11,110,253,.13) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 100%, rgba(0,0,0,.6)       0%, transparent 60%),
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,.04) 0,
            rgba(255,255,255,.04) 1px,
            transparent 1px,
            transparent 48px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.03) 0,
            rgba(255,255,255,.03) 1px,
            transparent 1px,
            transparent 48px
        ),
        rgba(7,10,18,.95);
}

.sol-off::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 50%, rgba(11,110,253,.07) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}

/* ─── INNER ROW ─── */

.sol-off-inner {
    flex: 1;
    min-height: 0;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: clamp(1rem, 2vh, 2rem) clamp(1rem, 3vw, 2rem);
    display: flex;
    align-items: center;
    gap: 120px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

/* ─── DIVIDER BAS ─── */

.sol-off .section-divider {
    flex-shrink: 0;
    padding: 8px 0;
    position: relative;
    z-index: 1;
}

/* ─── CONTENU GAUCHE ─── */

.sol-off-content {
    flex: 1;
    min-width: 0;
    text-align: center;
}


.sol-off-content h2 {
    font-size: clamp(1.4rem, 2vw, 2rem);
    margin-bottom: 120px;
}

.sol-off-offers-title {
    margin-top: clamp(20px, 3vh, 48px);
    margin-bottom: clamp(14px, 2vh, 28px);
}

.sol-off-content p {
    color: var(--brand-color);
    font-weight: 500;
    text-shadow: 0 0 10px rgba(59,130,246,.25);
    margin-bottom: 10px;
    line-height: 1.6;
    font-size: clamp(.85rem, 1vw, 1rem);
    
}

.btn-sol-off {
    display: inline-block;
    margin-top: 8px;
    padding: 12px 40px;
    background: rgba(11,110,253,.12);
    border: 1px solid rgba(11,110,253,.30);
    border-radius: 14px;
    color: #ffffff;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 0 20px rgba(11,110,253,.06), inset 0 1px 0 rgba(255,255,255,.06);
    transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
}

.btn-sol-off:hover {
    background: rgba(59,130,246,.2);
    box-shadow: 0 10px 30px rgba(59,130,246,.25);
    transform: translateY(-2px);
}

/* ─── GRILLE FUSÉE + PRICING ─── */

.sol-off-rocket-area {
    display: grid;
    grid-template-columns: 310px 170px;
    grid-template-rows:
        clamp(80px,  12vh, 130px)   /* nose */
        clamp(100px, 15vh, 250px)   /* sas 1 */
        clamp(100px, 15vh, 250px)   /* sas 2 */
        clamp(100px, 15vh, 250px)   /* sas 3 */
        auto;                        /* queue + flammes */
    flex-shrink: 0;
}

/* ========================= FUSÉE VERTICALE ========================= */

.rocketv-wrapper {
    grid-column: 1;
    grid-row: 1 / 6;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
    filter: drop-shadow(0 0 40px rgba(11,110,253,.12));
}

/* --- NOSE --- */

.rocketv-nose {
    position: relative;
    height: clamp(80px, 12vh, 130px);
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    border-left: 2px solid rgba(0,0,0,.55);
    border-right: 2px solid rgba(0,0,0,.55);
    background:
        linear-gradient(90deg,
            rgba(0,0,0,.72) 0%,
            rgba(0,0,0,.12) 18%,
            rgba(20,30,65,.96) 40%,
            rgba(20,30,65,.96) 60%,
            rgba(0,0,0,.12) 82%,
            rgba(0,0,0,.72) 100%
        ),
        linear-gradient(180deg, rgba(30,46,90,.98) 0%, rgba(12,18,42,1) 100%);
}

.rocketv-nose-highlight {
    position: absolute;
    top: 14%;
    left: 50%;
    transform: translateX(-50%);
    width: 22%;
    height: 42%;
    background: radial-gradient(ellipse, rgba(255,255,255,.09) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.rocketv-nose-window {
    position: absolute;
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(11,110,253,.18) 0%, rgba(0,0,0,.6) 100%);
    border: 2px solid rgba(11,110,253,.35);
    box-shadow: 0 0 18px rgba(11,110,253,.28), inset 0 0 10px rgba(0,0,0,.7);
    animation: noseWindowGlow 4s ease-in-out infinite;
}

.rocketv-nose-window::before {
    content: "";
    position: absolute;
    top: 18%;
    left: 18%;
    width: 30%;
    height: 30%;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
}

@keyframes noseWindowGlow {
    0%, 100% { box-shadow: 0 0 14px rgba(11,110,253,.25), inset 0 0 10px rgba(0,0,0,.7); }
    50%       { box-shadow: 0 0 28px rgba(11,110,253,.55), inset 0 0 10px rgba(0,0,0,.5); }
}

.rocketv-nose-seam {
    position: absolute;
    bottom: 0;
    left: 4%;
    right: 4%;
    height: 2px;
    background: linear-gradient(to right, transparent, rgba(255,255,255,.18), transparent);
}

/* --- SAS COULEURS + HAUTEURS --- */

.rocketv-sas--1 {
    --sv-color: #3b82f6;
    --sv-soft:  rgba(59,130,246,.14);
    --sv-glow:  rgba(59,130,246,.32);
    
    height: 180px;
}

.rocketv-sas--2 {
    --sv-color: #fbbf24;
    --sv-soft:  rgba(251,191,36,.14);
    --sv-glow:  rgba(251,191,36,.32);
    
    height: 180px;
}

.rocketv-sas--3 {
    --sv-color: #06b6d4;
    --sv-soft:  rgba(6,182,212,.14);
    --sv-glow:  rgba(6,182,212,.32);
    
    height: 180px;
}

/* --- SAS BASE --- */

.rocketv-sas {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 0 0 clamp(100px, 15vh, 250px);
    gap: 16px;
    padding: clamp(14px, 2vh, 26px) 20px;
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
    transition: filter .3s ease;
    background:
        linear-gradient(90deg,
            rgba(0,0,0,.62) 0%,
            rgba(0,0,0,.08) 16%,
            rgba(14,20,46,.93) 34%,
            rgba(14,20,46,.93) 66%,
            rgba(0,0,0,.08) 84%,
            rgba(0,0,0,.62) 100%
        );
    border-left:   2px solid rgba(0,0,0,.55);
    border-right:  2px solid rgba(0,0,0,.55);
    border-top:    2px solid rgba(255,255,255,.13);
    border-bottom: 2px solid rgba(255,255,255,.04);
    box-shadow: inset 0 0 32px rgba(0,0,0,.28);
}

.rocketv-sas::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px);
    background-size: 22px 22px;
    pointer-events: none;
}

.rocketv-sas::after {
    content: "";
    position: absolute;
    right: 0;
    top: 12%;
    bottom: 12%;
    width: 2px;
    background: linear-gradient(to bottom, transparent, var(--sv-color), transparent);
    opacity: 0;
    transition: opacity .3s ease;
}

.rocketv-sas:hover { filter: brightness(1.14); }
.rocketv-sas:hover::after { opacity: 1; }

/* Featured */

.rocketv-sas--featured {
    background:
        linear-gradient(90deg,
            rgba(0,0,0,.62) 0%,
            rgba(0,0,0,.06) 16%,
            rgba(14,22,66,.95) 34%,
            rgba(14,22,66,.95) 66%,
            rgba(0,0,0,.06) 84%,
            rgba(0,0,0,.62) 100%
        );
    border-top-color:    rgba(251,191,36,.35);
    border-bottom-color: rgba(251,191,36,.18);
    box-shadow:
        inset 0 0 32px rgba(0,0,0,.28),
        -6px 0 28px rgba(251,191,36,.06),
         6px 0 28px rgba(251,191,36,.06);
}

/* --- PORTHOLE --- */

.rocketv-porthole {
    width: clamp(36px, 4.5vw, 52px);
    height: clamp(36px, 4.5vw, 52px);
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--sv-soft);
    border: 2px solid var(--sv-color);
    box-shadow: 0 0 20px var(--sv-glow), inset 0 0 14px rgba(0,0,0,.55);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: box-shadow .3s ease;
}

.rocketv-porthole::before,
.rocketv-porthole::after {
    content: "";
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255,255,255,.22);
    top: 50%;
    transform: translateY(-50%);
}
.rocketv-porthole::before { left:  -10px; }
.rocketv-porthole::after  { right: -10px; }

.rocketv-porthole-core {
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--sv-soft) 0%, transparent 100%);
    border: 1px solid var(--sv-color);
    animation: rocketvPorthole 3s ease-in-out infinite;
}

@keyframes rocketvPorthole {
    0%, 100% { box-shadow: 0 0 6px  var(--sv-glow); }
    50%       { box-shadow: 0 0 20px var(--sv-color); }
}

.rocketv-sas:hover .rocketv-porthole {
    box-shadow: 0 0 32px var(--sv-color), inset 0 0 14px rgba(0,0,0,.3);
}

.rocketv-porthole--gold {
    border-color: rgba(251,191,36,.55);
    background: rgba(251,191,36,.09);
    box-shadow: 0 0 22px rgba(251,191,36,.32), inset 0 0 14px rgba(0,0,0,.55);
}
.rocketv-porthole--gold .rocketv-porthole-core {
    background: radial-gradient(circle, rgba(251,191,36,.55) 0%, transparent 100%);
    border-color: rgba(251,191,36,.55);
    animation: rocketvGold 3s ease-in-out infinite;
}
@keyframes rocketvGold {
    0%, 100% { box-shadow: 0 0 6px  rgba(251,191,36,.5); }
    50%       { box-shadow: 0 0 24px rgba(251,191,36,.95); }
}
.rocketv-sas--featured:hover .rocketv-porthole {
    box-shadow: 0 0 36px rgba(251,191,36,.65), inset 0 0 14px rgba(0,0,0,.3);
}

/* --- CONTENU SAS --- */

.rocketv-sas-body { flex: 1; min-width: 0; }

.rocketv-sas-body h3 {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(.82rem, 1vw, 1rem);
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.3;
    background: none;
    box-shadow: none;
    padding: 0;
    transition: margin .3s ease;
}



.rocketv-sas-body p {
    font-size: clamp(.72rem, .85vw, .84rem);
    color: rgba(255,255,255,.55);
    line-height: 1.6;
    margin: 0;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity .35s ease, max-height .35s ease;
}

.rocketv-sas:hover .rocketv-sas-body p {
    opacity: 1;
    max-height: 200px;
}

.rocketv-sas-cta {
    font-size: .85rem;
    font-weight: 700;
    color: var(--sv-color);
    opacity: 0;
    flex-shrink: 0;
    transition: opacity .25s ease, transform .25s ease;
}
.rocketv-sas:hover .rocketv-sas-cta { opacity: 1; transform: translateX(4px); }

.rocketv-ribbon {
    position: absolute;
    top: 8px;
    right: 32px;
    background: rgba(251,191,36,.12);
    color: #fbbf24;
    border: 1px solid rgba(251,191,36,.38);
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    z-index: 2;
    animation: ribbonPulse 4s ease-in-out infinite;
}

/* --- QUEUE --- */

.rocketv-tail {
    position: relative;
    height: clamp(50px, 7vh, 80px);
    flex-shrink: 0;
    clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%);
    background:
        linear-gradient(90deg,
            rgba(0,0,0,.72) 0%,
            rgba(0,0,0,.1) 20%,
            rgba(8,14,36,.98) 50%,
            rgba(0,0,0,.1) 80%,
            rgba(0,0,0,.72) 100%
        );
    border-top: 2px solid rgba(255,255,255,.1);
}

.rocketv-tail::before {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    top: 38%;
    height: 2px;
    background: repeating-linear-gradient(
        to right,
        rgba(255,255,255,.2) 0,
        rgba(255,255,255,.2) 3px,
        transparent 3px,
        transparent 14px
    );
}

.rocketv-tail::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(to right, transparent, rgba(11,110,253,.45), transparent);
}

.rocketv-fin {
    position: absolute;
    bottom: 0;
    width: 42px;
    height: 58px;
    background: linear-gradient(180deg, rgba(10,16,36,.99), rgba(18,26,54,.97));
}
.rocketv-fin--left  { left:  -38px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.rocketv-fin--right { right: -38px; clip-path: polygon(0 0,   100% 100%, 0 100%); }

.rocketv-nozzle {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 22px;
    background: rgba(4,6,18,.99);
    border: 1px solid rgba(255,255,255,.07);
    clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%);
    border-radius: 0 0 6px 6px;
}

.rocketv-nozzle::after {
    content: "";
    position: absolute;
    inset: 2px;
    background: radial-gradient(ellipse at 50% 0%, rgba(255,120,0,.3), transparent 70%);
}

/* --- FLAMMES --- */

.rocketv-exhaust {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    padding-top: clamp(12px, 1.5vh, 22px);
    height: clamp(60px, 9vh, 110px);
    flex-shrink: 0;
    pointer-events: none;
}

.rocketv-flame {
    display: block;
    border-radius: 0 0 50% 50%;
    transform-origin: center top;
    filter: blur(3.5px);
}

.rocketv-flame--a {
    width: 16px;
    height: clamp(38px, 6vh, 65px);
    background: linear-gradient(to bottom, rgba(255,255,180,.98), rgba(255,180,30,.9), rgba(255,60,0,.75), transparent);
    animation: rocketvFlicker .09s ease-in-out infinite alternate;
}
.rocketv-flame--b {
    width: 26px;
    height: clamp(52px, 8vh, 92px);
    background: linear-gradient(to bottom, rgba(255,240,100,.96), rgba(255,130,20,.86), rgba(255,40,0,.72), transparent);
    filter: blur(5px);
    animation: rocketvFlicker .13s ease-in-out infinite alternate-reverse;
}
.rocketv-flame--c {
    width: 14px;
    height: clamp(34px, 5.5vh, 58px);
    background: linear-gradient(to bottom, rgba(255,255,220,.96), rgba(255,180,50,.82), rgba(255,80,0,.66), transparent);
    animation: rocketvFlicker .11s ease-in-out infinite alternate;
}

@keyframes rocketvFlicker {
    from { transform: scaleX(1)   scaleY(1); }
    to   { transform: scaleX(.58) scaleY(.62); }
}

/* ========================= PRICING ========================= */

.pricing-spacer { grid-column: 2; grid-row: 1; }

.pricing-card--1 { --pc-color: #06b6d4; --pc-glow: rgba(6,182,212,.25);   grid-column: 2; grid-row: 2; }
.pricing-card--2 { --pc-color: #fbbf24; --pc-glow: rgba(251,191,36,.25);  grid-column: 2; grid-row: 3; }
.pricing-card--3 { --pc-color: #3b82f6; --pc-glow: rgba(59,130,246,.25);  grid-column: 2; grid-row: 4; }

.pricing-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 0 0 22px;
    position: relative;
    border-left: 2px solid rgba(255,255,255,.06);
    transition: border-color .3s ease;
}

.pricing-card + .pricing-card {
    border-top: 1px solid rgba(255,255,255,.04);
}

.pricing-card::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 2px;
    background: var(--pc-color);
    opacity: .5;
    transition: opacity .3s ease, width .3s ease;
}

.pricing-card:hover { border-left-color: var(--pc-color); }
.pricing-card:hover::before { opacity: 1; width: 18px; }

.pricing-amount {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(1rem, 1.4vw, 1.45rem);
    font-weight: 700;
    color: var(--pc-color);
    line-height: 1;
    text-shadow: 0 0 20px var(--pc-glow);
}

.pricing-currency {
    font-size: .85rem;
    font-weight: 600;
    opacity: .75;
}

.pricing-type {
    font-size: .75rem;
    color: rgba(255,255,255,.45);
    margin-top: 6px;
    line-height: 1.4;
    max-width: 140px;
}


/* ===================== MODULES ===================== */

main .modules {
    padding: clamp(50px, 8vh, 100px) 0;
    position: relative;
    background:
        /* Coin bas-gauche : bleu brand */
        radial-gradient(ellipse at 0% 100%,   rgba(11,110,253,.18) 0%, transparent 45%),
        /* Coin haut-droit : bleu doux */
        radial-gradient(ellipse at 100% 0%,   rgba(59,130,246,.10) 0%, transparent 45%),
        /* Centre : lueur ambiante */
        radial-gradient(ellipse at 50% 50%,   rgba(11,110,253,.05) 0%, transparent 65%),
        /* Grille technique */
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,.025) 0,
            rgba(255,255,255,.025) 1px,
            transparent 1px,
            transparent 44px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.018) 0,
            rgba(255,255,255,.018) 1px,
            transparent 1px,
            transparent 44px
        ),
        rgba(7,10,18,.92);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-top: 1px solid rgba(11,110,253,.14);
    border-bottom: 1px solid rgba(11,110,253,.14);
    overflow: hidden;
}

/* Scan-line d'ambiance */
main .modules::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(11,110,253,.03) 50%,
        transparent 100%
    );
    pointer-events: none;
}

main .modules .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 2rem);
    position: relative;
    z-index: 1;
}

/* ─── EN-TÊTE ─── */

.modules-header {
    text-align: center;
    margin-bottom: clamp(32px, 5vh, 60px);
}

.modules-header h2 {
    font-size: clamp(1.6rem, 2.5vw, 2.2rem);
    margin-bottom: 16px;
    display: inline-block;
}

main .modules p {
    color: var(--brand-color);
    font-weight: 500;
    text-shadow: 0 0 10px rgba(59,130,246,.25);
    margin: 0 auto;
    max-width: 600px;
    line-height: 1.7;
    font-size: clamp(.9rem, 1.1vw, 1rem);
}

/* ─── LAYOUT DEUX COLONNES ─── */

.modules-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(20px, 4vw, 60px);
    align-items: start;
}

/* ─── BLOC ─── */

.modules-block {
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 20px;
    padding: clamp(20px, 3vw, 36px);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

/* Coin lumineux par bloc */
.modules-block--included::before {
    content: "";
    position: absolute;
    top: -40px;
    right: -40px;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(59,130,246,.15) 0%, transparent 70%);
    pointer-events: none;
}

.modules-block--optional::before {
    content: "";
    position: absolute;
    top: -40px;
    right: -40px;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(251,191,36,.12) 0%, transparent 70%);
    pointer-events: none;
}

/* ─── LABEL DE BLOC ─── */

.modules-block-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.modules-block-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: .85rem;
    font-weight: 700;
    flex-shrink: 0;
}

.modules-block-badge--blue {
    background: rgba(59,130,246,.15);
    color: #3b82f6;
    border: 1px solid rgba(59,130,246,.35);
    box-shadow: 0 0 12px rgba(59,130,246,.2);
}

.modules-block-badge--amber {
    background: rgba(251,191,36,.12);
    color: #fbbf24;
    border: 1px solid rgba(251,191,36,.35);
    box-shadow: 0 0 12px rgba(251,191,36,.18);
}

.modules-block-label h3 {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(.85rem, 1.1vw, 1rem);
    font-weight: 600;
    color: rgba(255,255,255,.85);
    margin: 0;
    padding: 0;
    background: none;
    box-shadow: none;
    border: none;
    white-space: nowrap;
    text-shadow: none;
    backdrop-filter: none;
}

/* ─── LISTE ─── */

main .modules-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
    list-style: none;
    margin: 0;
}

main .modules-list li {
    border-radius: 10px;
    padding: 12px 14px 12px 18px;
    font-size: clamp(.84rem, 1vw, .95rem);
    line-height: 1.5;
    color: rgba(255,255,255,.82);
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.05);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
    position: relative;
    overflow: visible;
}

/* Accent gauche : inclus = bleu */
.modules-block--included .modules-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 3px;
    border-radius: 10px 0 0 10px;
    background: linear-gradient(to bottom, rgba(59,130,246,.8), rgba(59,130,246,.2));
}

/* Accent gauche : optionnel = amber */
.modules-block--optional .modules-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 3px;
    border-radius: 10px 0 0 10px;
    background: linear-gradient(to bottom, rgba(251,191,36,.7), rgba(251,191,36,.15));
}

.modules-block--included .modules-list li:hover {
    transform: translateX(4px);
    background: rgba(59,130,246,.06);
    border-color: rgba(59,130,246,.2);
    box-shadow: 0 4px 16px rgba(59,130,246,.1);
    color: #fff;
}

.modules-block--optional .modules-list li:hover {
    transform: translateX(4px);
    background: rgba(251,191,36,.05);
    border-color: rgba(251,191,36,.18);
    box-shadow: 0 4px 16px rgba(251,191,36,.08);
    color: #fff;
}

/* Tooltip */
.modules-list li::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(10,14,30,.95);
    color: #fff;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: .75rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    z-index: 20;
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(8px);
    transform: translateX(-50%) translateY(6px);
}

.modules-list li:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ─── CTA ─── */

.modules-cta {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.modules-cta-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: rgba(11,110,253,.10);
    border: 1px dashed rgba(11,110,253,.35);
    border-radius: 14px;
    color: rgba(255,255,255,.85);
    text-decoration: none;
    font-size: .95rem;
    font-weight: 500;
    transition: background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
    position: relative;
    overflow: hidden;
}

.modules-cta-link::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(11,110,253,.12), transparent 70%);
    opacity: 0;
    transition: opacity .3s ease;
}

.modules-cta-link:hover {
    background: rgba(11,110,253,.18);
    border-color: rgba(11,110,253,.6);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(11,110,253,.2);
    color: #fff;
}

.modules-cta-link:hover::before { opacity: 1; }

.modules-cta-link .rocket-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    transition: transform .25s ease;
}

.modules-cta-link:hover .rocket-icon {
    transform: translateY(-3px) rotate(10deg);
}





/* ===================== METHOD ===================== */

.method {
    padding: 80px 0 0;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 15% 50%,  rgba(6,182,212,.09)   0%, transparent 42%),
        radial-gradient(ellipse at 85% 50%,  rgba(11,110,253,.08)  0%, transparent 42%),
        radial-gradient(ellipse at 50% 0%,   rgba(11,110,253,.11)  0%, transparent 50%),
        radial-gradient(ellipse at 50% 100%, rgba(139,92,246,.06)  0%, transparent 45%),
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,.022) 0,
            rgba(255,255,255,.022) 1px,
            transparent 1px,
            transparent 56px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.016) 0,
            rgba(255,255,255,.016) 1px,
            transparent 1px,
            transparent 56px
        ),
        rgba(7,10,18,.94);
    border-top: 1px solid rgba(255,255,255,.05);
}

.method::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent 0,
        transparent 3px,
        rgba(0,0,0,.03) 3px,
        rgba(0,0,0,.03) 4px
    );
    pointer-events: none;
    z-index: 0;
}

.method .container {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 2rem);
}

/* ─── EN-TÊTE ─── */

.method-header {
    text-align: center;
    margin-top: 60px;
    margin-bottom: 100px;
}

.method-header h2 {
    
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    margin: 0;
}

/* ─── GRILLE ─── */

.method-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 90px;
}

/* ─── ÉTAPE ─── */

.method-step {
    position: relative;
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 24px 24px 24px 20px;
    background: rgba(255,255,255,.028);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 16px;
    overflow: hidden;
    transition: background .25s ease, transform .25s ease, border-color .25s ease;
}

.method-step::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--ms-color);
    opacity: .65;
    transition: opacity .25s ease, top .25s ease, bottom .25s ease;
}

.method-step:hover {
    background: rgba(255,255,255,.052);
    transform: translateX(5px);
    border-color: rgba(255,255,255,.10);
}

.method-step:hover::before {
    opacity: 1;
    top: 8%;
    bottom: 8%;
}

/* ─── COULEURS PAR ÉTAPE ─── */

.method-step--1 { --ms-color: #3b82f6; }
.method-step--2 { --ms-color: #06b6d4; }
.method-step--3 { --ms-color: #8b5cf6; }
.method-step--4 { --ms-color: #06b6d4; }
.method-step--5 { --ms-color: #3b82f6; }
.method-step--6 { --ms-color: #8b5cf6; }

.method-step-badge {
    position: absolute;
    top: 12px;
    right: 12px;
}

/* ─── NUMÉRO DÉCORATIF ─── */

.method-step-num {
    font-family: "Space Grotesk", sans-serif;
    font-size: 2.6rem;
    font-weight: 800;
    color: var(--ms-color);
    opacity: .16;
    line-height: 1;
    flex-shrink: 0;
    user-select: none;
    transition: opacity .25s ease;
}

.method-step:hover .method-step-num {
    opacity: .30;
}

/* ─── CORPS ─── */

.method-step-body {
    flex: 1;
    min-width: 0;
}

.method-step-body h3 {
    font-family: "Space Grotesk", sans-serif;
    font-size: .96rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px;
    line-height: 1.3;
    background: none;
    box-shadow: none;
    padding: 0;
    text-shadow: 0 0 10px rgba(59,130,246,.20);
}

.method-step-body p {
    font-size: .84rem;
    color: rgba(255,255,255,.50);
    line-height: 1.65;
    margin: 0;
}

/* ─── DIVIDER ─── */

.method .section-divider {
    margin-top: 20px;
    margin-bottom: 20px;
    padding-bottom: 0;
}


/* ===================== PROBLEM ===================== */

.problem {
    
    padding: 20px 0 0;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 100% 20%, rgba(11,110,253,.11)  0%, transparent 48%),
        radial-gradient(ellipse at 0%   80%, rgba(139,92,246,.08)  0%, transparent 44%),
        radial-gradient(ellipse at 50%  50%, rgba(11,110,253,.04)  0%, transparent 65%),
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,.020) 0,
            rgba(255,255,255,.020) 1px,
            transparent 1px,
            transparent 52px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.014) 0,
            rgba(255,255,255,.014) 1px,
            transparent 1px,
            transparent 52px
        ),
        rgba(7,10,18,.92);
    border-top: 1px solid rgba(255,255,255,.05);
}

.problem::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent 0,
        transparent 3px,
        rgba(0,0,0,.03) 3px,
        rgba(0,0,0,.03) 4px
    );
    pointer-events: none;
    z-index: 0;
}

/* ─── LAYOUT ─── */

.problem-layout {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 100px;
    max-width: 1300px;
    margin: 0 auto;
    margin-top: 40px;
    padding: 0 clamp(1rem, 3vw, 2rem);
}

/* ─── CONTENU ─── */

.problem-content {
    flex: 1;
    min-width: 0;
    padding: 36px 32px;
    border-radius: 18px;
    background: rgba(255,255,255,.032);
    border: 1px solid rgba(255,255,255,.07);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.problem-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(to right, transparent, rgba(11,110,253,.45), rgba(139,92,246,.35), transparent);
}

.problem-content h2 {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 1.2rem;
    background: linear-gradient(100deg, #ffffff 40%, rgba(59,130,246,.90) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.problem-content p {
    color: rgba(255,255,255,.60);
    font-size: .96rem;
    line-height: 1.75;
    margin: 0 0 1rem;
}

/* ─── RÉSULTAT ─── */

.problem-result {
    margin-top: 1.6rem !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    color: #3b82f6 !important;
    padding: 10px 14px 10px 16px !important;
    border-left: 3px solid #3b82f6 !important;
    border-radius: 0 8px 8px 0 !important;
    background: rgba(59,130,246,.07) !important;
    line-height: 1.5 !important;
    margin-bottom: 0 !important;
}

/* ─── POINTS ─── */

.problem-points {
    list-style: none;
    padding: 0;
    margin: 1.4rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.problem-points li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 10px;
    background: rgba(255,255,255,.028);
    border: 1px solid rgba(255,255,255,.06);
    color: rgba(255,255,255,.58);
    font-size: .92rem;
    line-height: 1.55;
    transition: background .22s ease, border-color .22s ease, transform .22s ease;
}

.problem-points li::before {
    content: "→";
    color: #3b82f6;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
}

.problem-points li:hover {
    background: rgba(59,130,246,.07);
    border-color: rgba(59,130,246,.18);
    color: rgba(255,255,255,.78);
    transform: translateX(4px);
}

/* ─── VISUEL ─── */

.problem-visual {
    flex: 0 0 420px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.problem-visual img {
    width: 100%;
    transform: scale(1.04);
    filter: drop-shadow(0 24px 48px rgba(0,0,0,.40))
            drop-shadow(0 0 40px rgba(11,110,253,.12));
    transition: transform .4s ease, filter .4s ease;
}

.problem-visual:hover img {
    transform: scale(1.07);
    filter: drop-shadow(0 28px 56px rgba(0,0,0,.45))
            drop-shadow(0 0 56px rgba(11,110,253,.20));
}

.problem-visual-caption {
    margin-top: 24px;
    font-size: .82rem;
    color: rgba(255,255,255,.38);
    line-height: 1.5;
    letter-spacing: .02em;
}

/* ─── DIVIDER ─── */

.problem .section-divider {
    margin-top: 10px;
    position: relative;
    z-index: 1;
}


/* ===================== WHY-TARGET ===================== */

.why-target {
    padding: 80px 0 80px;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 20% 30%,  rgba(11,110,253,.13)  0%, transparent 48%),
        radial-gradient(ellipse at 80% 30%,  rgba(6,182,212,.09)   0%, transparent 48%),
        radial-gradient(ellipse at 50% 100%, rgba(11,110,253,.10)  0%, transparent 55%),
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,.020) 0,
            rgba(255,255,255,.020) 1px,
            transparent 1px,
            transparent 54px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.014) 0,
            rgba(255,255,255,.014) 1px,
            transparent 1px,
            transparent 54px
        ),
        rgba(7,10,18,.94);
    border-top: 1px solid rgba(11,110,253,.10);
}

.why-target::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent 0,
        transparent 3px,
        rgba(0,0,0,.03) 3px,
        rgba(0,0,0,.03) 4px
    );
    pointer-events: none;
    z-index: 0;
}

.why-target .container {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 2rem);
}

/* ─── GRILLE 2 COLONNES ─── */

.why-target-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}

/* ─── BOÎTES ─── */

.why-box,
.target-box {
    padding: 32px 28px;
    border-radius: 18px;
    background: rgba(255,255,255,.032);
    border: 1px solid rgba(255,255,255,.07);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    overflow: hidden;
}

.why-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(to right, transparent, rgba(59,130,246,.55), transparent);
}

.target-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(to right, transparent, rgba(6,182,212,.55), transparent);
}

/* ─── LABEL / BADGE ─── */

.wt-box-label {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wt-badge {
    font-size: 1rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    letter-spacing: .05em;
    line-height: 1;
}

.wt-badge--blue {
    color: #3b82f6;
    background: rgba(59,130,246,.10);
    border: 1px solid rgba(59,130,246,.28);
    box-shadow: 0 0 12px rgba(59,130,246,.15);
}

.wt-badge--cyan {
    color: #06b6d4;
    background: rgba(6,182,212,.10);
    border: 1px solid rgba(6,182,212,.28);
    box-shadow: 0 0 12px rgba(6,182,212,.15);
}

/* ─── TITRES ─── */

.why-box h2,
.target-box h2 {
    font-size: clamp(1.3rem, 2.2vw, 1.75rem);
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
    background: linear-gradient(100deg, #ffffff 40%, rgba(59,130,246,.90) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.target-box h2 {
    background: linear-gradient(100deg, #ffffff 40%, rgba(6,182,212,.90) 100%);
    background-clip: text;
    -webkit-background-clip: text;
}

/* ─── LISTES ─── */

.feature-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(255,255,255,.026);
    border: 1px solid rgba(255,255,255,.06);
    color: rgba(255,255,255,.62);
    font-size: .92rem;
    line-height: 1.55;
    transition: background .22s ease, border-color .22s ease, transform .22s ease, color .22s ease;
}

.feature-list--why li::before {
    content: "✓";
    color: #3b82f6;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
}

.feature-list--target li::before {
    content: "→";
    color: #06b6d4;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
}

.feature-list--why li:hover {
    background: rgba(59,130,246,.07);
    border-color: rgba(59,130,246,.18);
    color: rgba(255,255,255,.82);
    transform: translateX(4px);
}

.feature-list--target li:hover {
    background: rgba(6,182,212,.07);
    border-color: rgba(6,182,212,.18);
    color: rgba(255,255,255,.82);
    transform: translateX(4px);
}

/* ─── CTA INTÉGRÉ ─── */

.why-target-cta {
    text-align: center;
    margin-top: 5px;
}

.wt-cta-sep {
    width: 1px;
    height: 48px;
    background: linear-gradient(to bottom, rgba(11,110,253,.40), transparent);
    margin: 0 auto 48px;
}

.why-target-cta h2 {
    font-size: clamp(1.5rem, 2.8vw, 2.1rem);
    font-weight: 700;
    margin: 0 0 16px;
    background: linear-gradient(100deg, #ffffff 40%, rgba(59,130,246,.88) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cta-text {
    color: rgba(255,255,255,.58);
    font-size: .98rem;
    max-width: 620px;
    margin: 0 auto 32px;
    line-height: 1.7;
}

.btn-accueil {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 15px 44px;
    font-size: 1.05rem;
    font-weight: 600;
    border-radius: 999px;
    background: rgba(11,110,253,.14);
    border: 1px solid rgba(59,130,246,.32);
    color: #ffffff;
    text-decoration: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 0 24px rgba(11,110,253,.08), inset 0 1px 0 rgba(255,255,255,.07);
    transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
    margin-bottom: 130px;
}

.btn-accueil:hover {
    background: rgba(59,130,246,.22);
    box-shadow: 0 12px 36px rgba(59,130,246,.28);
    transform: translateY(-2px);
}

/* ========================= services.php ========================= */

/* ─── BACKGROUND ESPACE FIXE ─── */
.page-service::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        linear-gradient(rgba(0,0,0,.52), rgba(0,0,0,.52)),
        url("../image/bgsite.png") center / cover no-repeat;
    z-index: 0;
}

.page-service > * {
    position: relative;
    z-index: 1;
}

/* ─── HERO ─── */
.page-service .services-hero {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    padding: 120px 0 80px;
    position: relative;
}

.page-service .hero-content {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 2rem);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.page-service .company-info {
    width: 100%;
    max-width: 680px;
    margin: 0 auto 80px;
    height: 220px;
    overflow: hidden;
    position: relative;
}



/* ─── INTRO STAR WARS ─── */
.page-service .intro-text {
    margin: 0;
    width: 100%;
    max-width: 680px;
    display: block;

    font-size: 1.12rem;
    line-height: 1.85;
    font-weight: 500;
    color: #d6eaff;
    text-align: center;
    letter-spacing: .02em;

    text-shadow:
        0 0 18px rgba(100,170,255,.55),
        0 0 50px rgba(100,170,255,.18),
        0 2px 4px rgba(0,0,0,.70);

    transform-origin: center bottom;
    animation: starWarsCrawl 16s ease-in-out 1 forwards;
}

.page-service .intro-text.is-crawling {
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 20%,
        black 75%,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 20%,
        black 75%,
        transparent 100%
    );
}

@keyframes starWarsCrawl {
    0%   { transform: perspective(700px) rotateX(16deg) translateY(150%); opacity: 0; }
    6%   { opacity: 1; }
    83%  { transform: perspective(700px) rotateX(16deg) translateY(18%);  opacity: 1; }
    91%  { transform: perspective(500px) rotateX(10deg) translateY(8%);   opacity: 1; }
    97%  { transform: perspective(200px) rotateX(4deg)  translateY(2%);   opacity: 1; }
    100% { transform: perspective(0px)   rotateX(0deg)  translateY(60px); opacity: 1; }
}


/* ─── HERO GRID CAPSULES ─── */
.hero-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
}

/* ─── CAPSULES DE SERVICE ─── */
.service-capsule {
    --capsule-color: #0b6efd;
    --capsule-soft:  rgba(11,110,253,.12);
    --capsule-glow:  rgba(11,110,253,.22);

    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 28px 24px 22px;
    border-radius: 24px;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    background: rgba(7,10,18,.78);
    border: 1px solid rgba(255,255,255,.07);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.service-capsule::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
    background-size: 28px 28px;
    border-radius: inherit;
    pointer-events: none;
}

.service-capsule::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 15%;
    right: 15%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--capsule-color), transparent);
    opacity: .5;
    transition: opacity .35s ease, left .35s ease, right .35s ease;
}

.service-capsule--conseil {
    --capsule-color: #8b5cf6;
    --capsule-soft:  rgba(139,92,246,.12);
    --capsule-glow:  rgba(139,92,246,.22);
}

.service-capsule--featured {
    --capsule-color: #0b6efd;
    --capsule-soft:  rgba(11,110,253,.12);
    --capsule-glow:  rgba(11,110,253,.22);
    border-color: rgba(11,110,253,.22);
    background: rgba(11,110,253,.06);
}

.service-capsule--cloud {
    --capsule-color: #06b6d4;
    --capsule-soft:  rgba(6,182,212,.12);
    --capsule-glow:  rgba(6,182,212,.22);
}

.capsule-status {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--capsule-color);
    box-shadow: 0 0 8px var(--capsule-color), 0 0 18px var(--capsule-soft);
    animation: capsuleStatusPulse 2.8s ease-in-out infinite;
}

@keyframes capsuleStatusPulse {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%       { opacity: .4; transform: scale(.75); }
}

.capsule-porthole {
    position: relative;
    width: 58px;
    height: 58px;
    flex-shrink: 0;
}

.capsule-porthole::before {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1px solid var(--capsule-soft);
    pointer-events: none;
}

.porthole-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--capsule-soft);
    border: 1.5px solid var(--capsule-color);
    box-shadow: 0 0 18px var(--capsule-glow), inset 0 0 14px rgba(0,0,0,.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--capsule-color);
    transition: box-shadow .35s ease, background .35s ease;
}

.porthole-inner svg { width: 22px; height: 22px; }

.capsule-seam {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
    flex-shrink: 0;
}

.capsule-content h4 {
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 8px;
    line-height: 1.3;
}

.capsule-content p {
    font-size: .875rem;
    color: rgba(255,255,255,.55);
    line-height: 1.65;
    margin: 0;
}

.capsule-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--capsule-color);
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-top: 4px;
    opacity: .8;
    transition: gap .2s ease, opacity .2s ease;
}

.service-capsule:hover {
    transform: translateY(-5px);
    border-color: var(--capsule-color);
    box-shadow: 0 24px 60px rgba(0,0,0,.30), 0 0 35px var(--capsule-glow);
}

.service-capsule:hover::after { left: 5%; right: 5%; opacity: .9; }
.service-capsule:hover .porthole-inner {
    box-shadow: 0 0 28px var(--capsule-color), 0 0 55px var(--capsule-glow), inset 0 0 12px rgba(0,0,0,.20);
}
.service-capsule:hover .capsule-cta { gap: 10px; opacity: 1; }

/* ─── SECTIONS LAYOUT — section + divider = 100dvh ─── */
.page-service .section-block {
    padding: 100px clamp(1rem, 4vw, 3rem);
    position: relative;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 0;
    transform: perspective(1100px) translateZ(-120px) translateY(60px);
    transition:
        opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

.section-block.is-visible {
    opacity: 1;
    transform: perspective(1100px) translateZ(0) translateY(0);
}

/* ─── DIVIDER : ligne se dessine puis la fusée tombe ─── */
.section-divider {
    min-height: 160px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.section-divider .divider-line {
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.section-divider.is-visible .divider-line {
    transform: scaleX(1);
}

.section-divider .rocket-wrapper {
    opacity: 0;
    transform: translateY(-55px) scale(0.6);
    transition:
        opacity 0.5s ease 0.55s,
        transform 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) 0.55s;
}

.section-divider.is-visible .rocket-wrapper {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.layout-split {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
}

.layout-right { flex-direction: row-reverse; }

/* ========================= GALAXY TITLE BUBBLE ========================= */

@keyframes galaxyRotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes galaxyPulse {
    0%, 100% { box-shadow: 0 0 28px rgba(70,30,130,.16), 0 0 56px rgba(70,30,130,.06); }
    50%       { box-shadow: 0 0 44px rgba(70,30,130,.26), 0 0 88px rgba(70,30,130,.10); }
}

@keyframes galaxyPulseBlue {
    0%, 100% { box-shadow: 0 0 28px rgba(8,70,180,.18), 0 0 56px rgba(8,70,180,.07); }
    50%       { box-shadow: 0 0 44px rgba(8,70,180,.30), 0 0 88px rgba(8,70,180,.12); }
}

@keyframes galaxyPulseCyan {
    0%, 100% { box-shadow: 0 0 28px rgba(4,120,155,.18), 0 0 56px rgba(4,120,155,.07); }
    50%       { box-shadow: 0 0 44px rgba(4,120,155,.30), 0 0 88px rgba(4,120,155,.12); }
}

.title-bubble {
    flex: 0 0 380px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(2.1rem, 1.8vw, 2.55rem);
    font-weight: 800;
    letter-spacing: -.02em;
    color: #ffffff;
    padding: 0;

    --galaxy-speed: 22s;

    opacity: 0;
    transform: scale(0.08) rotate(-300deg);
    transition:
        opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.2s,
        transform 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s;
    will-change: transform, opacity;
}

.section-block.is-visible .title-bubble {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.title-bubble::before {
    content: "";
    position: absolute;
    inset: -10%;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        rgba(8,60,180,0)    0deg,
        rgba(8,60,180,.18)  28deg,
        rgba(8,60,180,0)    58deg,
        rgba(70,30,150,0)   118deg,
        rgba(70,30,150,.12) 148deg,
        rgba(70,30,150,0)   178deg,
        rgba(4,100,140,0)   238deg,
        rgba(4,100,140,.10) 268deg,
        rgba(4,100,140,0)   298deg,
        rgba(8,60,180,0)    360deg
    );
    animation: galaxyRotate var(--galaxy-speed) linear infinite;
    pointer-events: none;
    z-index: 0;
}

.title-bubble::after {
    content: "";
    position: absolute;
    inset: 20%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.07) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Voyage : zoom + accélération de rotation */
.title-bubble:hover {
    transform: scale(1.08);
    transition:
        transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0s,
        opacity 0s;
}
.section-title--essentiel {
    background-image: url('../image/Galaxy-web.png');
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(30,65,165,.16);
    animation: galaxyPulseBlue 9s ease-in-out infinite;
    transition: background-image 0.3s ease;
}

.section-title--essentiel:hover {
    background-image: none;
    background-color: rgba(8,20,80,.92);
}

.section-title--pro {
    background-image: url('../image/galaxy-hm.png');
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(4,100,140,.16);
    animation: galaxyPulseCyan 9s ease-in-out infinite;
}

.section-title--pro:hover {
    background-image: none;
    background-color: rgba(2,30,55,.92);
}

.section-title--surmesure {
    background-image: url('../image/galaxy-accompagnement.png');
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(65,22,140,.16);
    animation: galaxyPulse 9s ease-in-out infinite;
}

.section-title--surmesure:hover {
    background-image: none;
    background-color: rgba(20,5,55,.92);
}

.section-title-link {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    color: inherit;
    width: 100%;
    padding: 20px;
}

.section-title-main {
    display: block;
    line-height: 1.2;
    text-shadow:
        0 2px 8px rgba(0,0,0,.95),
        0 0 24px rgba(0,0,0,.85),
        0 0 2px rgba(0,0,0,1);
}

.section-title-sub {
    display: inline-block;
    margin-top: 12px;
    font-size: .44em;
    font-weight: 500;
    opacity: .90;
    padding: 6px 12px;
    position: relative;
    text-align: center;
    transition: opacity .25s ease;
    color: rgba(255,255,255,.92);
    text-shadow:
        0 1px 6px rgba(0,0,0,.95),
        0 0 16px rgba(0,0,0,.85);
}

.section-title-sub::before,
.section-title-sub::after {
    content: "";
    display: block;
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(160,210,255,.55), transparent);
    margin: 0 auto;
}

.section-title-sub::before { margin-bottom: 6px; }
.section-title-sub::after  { margin-top: 6px; }
.title-bubble:hover .section-title-sub { opacity: 1; }

/* ─── OFFERS GRID ─── */
.layout-split .offers-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 220px));
    gap: 80px 120px;
    justify-content: center;
    align-items: start;
}


.section-title--essentiel::after,
.section-title--pro::after,
.section-title--surmesure::after {
    transition: opacity 0.6s ease;
    opacity: 0;
}

.section-title--essentiel {
    --bubble-img: url('../image/bg-offres-creationweb.png');
}
.section-title--pro {
    --bubble-img: url('../image/bg-offres-hebergement.png');
}
.section-title--surmesure {
    --bubble-img: url('../image/bg-offres-conseil.png');
}

.section-title--essentiel::after,
.section-title--pro::after,
.section-title--surmesure::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--bubble-img) center / cover;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.section-title--essentiel:hover::after,
.section-title--pro:hover::after,
.section-title--surmesure:hover::after {
    opacity: 1;
}

/* ========================= PLANET CARDS ========================= */

@keyframes ribbonPulse {
    0%, 100% { box-shadow: 0 0 0    rgba(251,191,36,0); }
    50%       { box-shadow: 0 0 14px rgba(251,191,36,.38); }
}

@keyframes planetSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes highlightFloat {
    0%, 100% { opacity: .22; transform: scale(1); }
    50%       { opacity: .34; transform: scale(1.06); }
}

/* ─── Carte — conteneur principal ─── */
.planet-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    text-decoration: none;
    color: inherit;
    background: transparent;
    border: none;

    opacity: 0;
    transform: translateY(100px) scale(0.45);
    filter: blur(8px);
    transition:
        opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1),
        filter 0.65s ease;
    will-change: transform, opacity;
    animation: none;
}

.planet-card.is-visible {
    opacity: 0.9;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

.planet-card:nth-child(1) { transition-delay: 0.12s; }
.planet-card:nth-child(2) { transition-delay: 0.28s; }
.planet-card:nth-child(3) { transition-delay: 0.44s; }

.planet-card:hover {
    transform: scale(1.14);
    z-index: 2;
    transition: transform .65s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ─── Sphère ─── */
.planet-sphere {
    position: relative;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    transition: transform .45s ease, box-shadow .45s ease;
}

/* Surface bands — ::before (tourne, clippé par overflow:hidden) */
.planet-sphere::before {
    content: "";
    position: absolute;
    inset: -25%;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    opacity: 0.30;
    animation: planetSpin 40s linear infinite;
}

/* Atmospheric rim — ::after (inner glow sur le bord) */
.planet-sphere::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    z-index: 3;
}

/* ─── Infos dans la sphère ─── */
.planet-info {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 300px;
    border-radius: 50%;
    clip-path: circle(50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 5;
    padding: 28px 20px 16px;
    gap: 8px;
    background: radial-gradient(
        circle at center,
        rgba(0,0,0,.72) 0%,
        rgba(0,0,0,.55) 50%,
        rgba(0,0,0,.28) 72%,
        transparent 90%
    );
}

.planet-info h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    border-bottom: 1px solid rgba(255,255,255,.22);
    padding-bottom: 6px;
    width: 70%;
    text-align: center;
    line-height: 1.25;
    text-shadow:
        0 2px 8px rgba(0,0,0,.95),
        0 0 24px rgba(0,0,0,.85),
        0 0 2px rgba(0,0,0,1);
}

.planet-info p {
    font-size: .90rem;
    color: rgba(255,255,255,.95);
    line-height: 1.5;
    margin: 0;
    text-shadow:
        0 1px 6px rgba(0,0,0,.95),
        0 0 16px rgba(0,0,0,.85),
        0 0 2px rgba(0,0,0,1);
}

/* ─── Reflet spéculaire ─── */
.planet-highlight {
    position: absolute;
    top: 11%;
    left: 15%;
    width: 26%;
    height: 26%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.28) 0%, transparent 68%);
    pointer-events: none;
    z-index: 2;
    animation: highlightFloat 5s ease-in-out infinite;
}

/* ─── Anneau Saturn ─── */
.planet-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scaleY(.20);
    width: 155%;
    height: 155%;
    border-radius: 50%;
    border: 5px solid rgba(255,200,80,.30);
    box-shadow: 0 0 16px rgba(251,191,36,.20);
    pointer-events: none;
    z-index: 4;
    transition: border-color .65s ease, box-shadow .65s ease;
}

.planet-card:hover .planet-ring {
    border-color: rgba(255,200,80,.62);
    box-shadow: 0 0 32px rgba(251,191,36,.50);
}

.planet-card:hover{
    opacity: 1;
    
}


/* ─── Badge featured ─── */
.planet-ribbon {
    position: absolute;
    top: -6px;
    right: 2px;
    background: rgba(251,191,36,.12);
    color: #fbbf24;
    border: 1px solid rgba(251,191,36,.35);
    padding: 2px 10px;
    border-radius: 999px;
    font-size: .6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    z-index: 6;
    animation: ribbonPulse 4s ease-in-out infinite;
}

/* ─── CTA sous la planète ─── */
.planet-cta {
    font-size: .74rem;
    font-weight: 700;
    color: rgba(255,255,255,.40);
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: color .3s ease, letter-spacing .3s ease;
}

.planet-card:hover .planet-cta {
    color: rgba(255,255,255,.95);
    letter-spacing: .14em;
}


/* ========================= VARIANTES PLANÈTES =========================
   Tier 1 — Essentiel  : ocean, desert
   Tier 2 — Pro        : ice, storm
   Tier 3 — Sur mesure : gold, nebula, forest
======================================================================= */

/* ─────────── TIER 1 ─────────── */

/* ── ocean : Terre vue de l'espace — océan profond, nuages quasi-invisibles ── */
.planet--ocean .planet-sphere {
    background-image: url('../image/planet-eau.png');
    background-size: cover;
    background-position: center;
    box-shadow:
        0 0 20px rgba(6,38,120,.20),
        0 0 42px rgba(3,22,88,.07),
        inset -30px -30px 60px rgba(0,0,14,.90);
}
.planet--ocean:hover .planet-sphere {
    box-shadow:
        0 0 38px rgba(6,38,120,.44),
        0 0 76px rgba(3,22,88,.15),
        inset -30px -30px 60px rgba(0,0,14,.90);
}
.planet--ocean .planet-sphere::before {
    background: repeating-linear-gradient(
        -15deg,
        transparent              0px,  transparent              32px,
        rgba(200,220,248,.06)   32px,  rgba(200,220,248,.06)   34px,
        transparent              34px,  transparent              64px,
        rgba(160,195,235,.04)   64px,  rgba(160,195,235,.04)   66px
    );
    animation-duration: 90s;
}
.planet--ocean .planet-sphere::after {
    box-shadow:
        inset 0 0 16px rgba(5,32,105,.14),
        inset 0 0 32px rgba(2,18,78,.07);
}

/* ── desert : Mars — rouille terne, poussière de fer ── */
.planet--desert .planet-sphere {
    background-image: url('../image/planet-jupiter.png');
    background-size: cover;
    background-position: center;
    box-shadow:
        0 0 20px rgba(100,30,6,.22),
        0 0 42px rgba(115,40,5,.07),
        inset -30px -30px 60px rgba(16,2,0,.90);
}
.planet--desert:hover .planet-sphere {
    box-shadow:
        0 0 38px rgba(100,30,6,.46),
        0 0 76px rgba(115,40,5,.15),
        inset -30px -30px 60px rgba(16,2,0,.90);
}
.planet--desert .planet-sphere::before {
    background: repeating-linear-gradient(
        -20deg,
        rgba(105,40,8,.11)  0px,  rgba(105,40,8,.11) 22px,
        rgba(62,16,2,.08)  22px,  rgba(62,16,2,.08)  46px,
        rgba(82,28,4,.07)  46px,  rgba(82,28,4,.07)  72px
    );
    animation-duration: 60s;
}
.planet--desert .planet-sphere::after {
    box-shadow:
        inset 0 0 18px rgba(118,42,5,.16),
        inset 0 0 36px rgba(85,26,2,.08);
}

/* ─────────── TIER 2 ─────────── */

/* ── ice : Neptune — bleu-indigo très sombre, quasi-noir ── */
.planet--ice .planet-sphere {
    background-image: url('../image/planet-glace.png');
    background-size: cover;
    background-position: center;
    box-shadow:
        0 0 22px rgba(2,55,110,.22),
        0 0 44px rgba(0,38,88,.07),
        inset -30px -30px 60px rgba(0,3,14,.90);
}
.planet--ice:hover .planet-sphere {
    box-shadow:
        0 0 42px rgba(2,55,110,.46),
        0 0 85px rgba(0,38,88,.15),
        inset -30px -30px 60px rgba(0,3,14,.90);
}
.planet--ice .planet-sphere::before {
    background: repeating-linear-gradient(
        -35deg,
        transparent             0px,  transparent             40px,
        rgba(80,130,172,.06)   40px,  rgba(80,130,172,.06)   42px,
        transparent             42px,  transparent             78px,
        rgba(55,100,140,.04)   78px,  rgba(55,100,140,.04)   80px
    );
    animation-duration: 110s;
}
.planet--ice .planet-sphere::after {
    box-shadow:
        inset 0 0 14px rgba(2,55,110,.14),
        inset 0 0 28px rgba(0,35,82,.07);
}

/* ── storm : géante gazeuse sombre — tourmente sous-jacente ── */
.planet--storm .planet-sphere {
    background-image: url('../image/planet-magma.png');
    background-size: cover;
    background-position: center;
    box-shadow:
        0 0 20px rgba(12,22,95,.20),
        0 0 42px rgba(15,32,115,.07),
        inset -30px -30px 60px rgba(0,0,10,.92);
}
.planet--storm:hover .planet-sphere {
    box-shadow:
        0 0 38px rgba(12,22,95,.44),
        0 0 76px rgba(15,32,115,.14),
        inset -30px -30px 60px rgba(0,0,10,.92);
}
.planet--storm .planet-sphere::before {
    background: repeating-linear-gradient(
        -8deg,
        rgba(22,32,82,.13)  0px,  rgba(22,32,82,.13) 18px,
        rgba(7,10,38,.09)  18px,  rgba(7,10,38,.09)  36px,
        rgba(15,22,62,.07) 36px,  rgba(15,22,62,.07) 58px
    );
    animation-duration: 25s;
}
.planet--storm .planet-sphere::after {
    box-shadow:
        inset 0 0 14px rgba(14,30,120,.14),
        inset 0 0 28px rgba(8,18,88,.07);
}

/* ─────────── TIER 3 ─────────── */

/* ── gold : Jupiter/Saturne — ocre chaud, ceintures ocre et brun ── */
.planet--gold .planet-sphere {
    background-image: url('../image/planet-mars.png');
    background-size: cover;
    background-position: center;
    box-shadow:
        0 0 28px rgba(115,68,12,.26),
        0 0 55px rgba(135,85,16,.09),
        0 0 90px rgba(88,42,3,.04),
        inset -30px -30px 60px rgba(18,3,0,.88);
}
.planet--gold:hover .planet-sphere {
    box-shadow:
        0 0 52px rgba(115,68,12,.54),
        0 0 105px rgba(135,85,16,.20),
        0 0 165px rgba(88,42,3,.09),
        inset -30px -30px 60px rgba(18,3,0,.88);
}
.planet--gold .planet-sphere::before {
    background: repeating-linear-gradient(
        -10deg,
        rgba(145,82,18,.12)  0px,  rgba(145,82,18,.12) 10px,
        rgba(88,34,4,.09)   10px,  rgba(88,34,4,.09)   22px,
        rgba(158,98,26,.07) 22px,  rgba(158,98,26,.07) 34px,
        rgba(118,50,7,.11)  34px,  rgba(118,50,7,.11)  44px,
        rgba(75,28,2,.08)   44px,  rgba(75,28,2,.08)   56px,
        rgba(135,72,14,.07) 56px,  rgba(135,72,14,.07) 68px,
        rgba(100,38,5,.09)  68px,  rgba(100,38,5,.09)  80px
    );
    animation-duration: 42s;
}
.planet--gold .planet-sphere::after {
    box-shadow:
        inset 0 0 18px rgba(145,82,18,.16),
        inset 0 0 38px rgba(110,50,5,.08);
}

/* ── nebula : océan cyan profond — Sur mesure ── */
.planet--nebula .planet-sphere {
    background-image: url('../image/planet-terre.png');
    background-size: cover;
    background-position: center;
    box-shadow:
        0 0 28px rgba(6,182,212,.22),
        0 0 55px rgba(4,120,155,.08),
        0 0 90px rgba(2,70,100,.03),
        inset -30px -30px 60px rgba(0,5,18,.92);
}
.planet--nebula:hover .planet-sphere {
    box-shadow:
        0 0 52px rgba(6,182,212,.48),
        0 0 105px rgba(4,120,155,.18),
        0 0 165px rgba(2,70,100,.08),
        inset -30px -30px 60px rgba(0,5,18,.92);
}
.planet--nebula .planet-sphere::before {
    background: repeating-linear-gradient(
        -14deg,
        rgba(6,182,212,.08)   0px,  rgba(6,182,212,.08)  14px,
        rgba(4,100,130,.06)  14px,  rgba(4,100,130,.06)  30px,
        rgba(8,160,200,.05)  30px,  rgba(8,160,200,.05)  48px,
        rgba(2,60,90,.06)    48px,  rgba(2,60,90,.06)    68px
    );
    animation-duration: 34s;
}
.planet--nebula .planet-sphere::after {
    box-shadow:
        inset 0 0 20px rgba(6,182,212,.16),
        inset 0 0 42px rgba(4,120,155,.07);
}

/* ── forest : Amazonie vue du ciel — vert très sombre, presque noir ── */
.planet--forest .planet-sphere {
    background-image: url('../image/lune.png');
    background-size: cover;
    background-position: center;
    box-shadow:
        0 0 26px rgba(3,60,24,.22),
        0 0 52px rgba(4,78,40,.07),
        0 0 88px rgba(1,38,14,.03),
        inset -30px -30px 60px rgba(0,4,1,.90);
}
.planet--forest:hover .planet-sphere {
    box-shadow:
        0 0 50px rgba(3,60,24,.46),
        0 0 100px rgba(4,78,40,.16),
        0 0 160px rgba(1,38,14,.08),
        inset -30px -30px 60px rgba(0,4,1,.90);
}
.planet--forest .planet-sphere::before {
    background: repeating-linear-gradient(
        -18deg,
        transparent             0px,  transparent             30px,
        rgba(8,55,22,.08)      30px,  rgba(8,55,22,.08)      32px,
        transparent             32px,  transparent             60px,
        rgba(5,42,18,.06)      60px,  rgba(5,42,18,.06)      62px
    );
    animation-duration: 70s;
}
.planet--forest .planet-sphere::after {
    box-shadow:
        inset 0 0 16px rgba(4,78,40,.14),
        inset 0 0 32px rgba(2,38,16,.07);
}



/* ─── CTA FINAL ─── */
.services-cta {
    text-align: center;
    padding: 100px 20px 140px;
    position: relative;
}

.services-cta h2 {
    font-size: clamp(1.5rem, 2.8vw, 2.2rem);
    font-weight: 700;
    margin: 0 0 16px;
    background: linear-gradient(100deg, #ffffff 40%, rgba(59,130,246,.88) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.services-cta .cta-text {
    color: rgba(255,255,255,.58);
    font-size: .98rem;
    max-width: 600px;
    margin: 0 auto 32px;
    line-height: 1.7;
}

.btn-accueil {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 15px 44px;
    font-size: 1.05rem;
    font-weight: 600;
    border-radius: 999px;
    background: rgba(11,110,253,.14);
    border: 1px solid rgba(59,130,246,.32);
    color: #ffffff;
    text-decoration: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 0 24px rgba(11,110,253,.08), inset 0 1px 0 rgba(255,255,255,.07);
    transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
}

.btn-accueil:hover {
    background: rgba(59,130,246,.22);
    box-shadow: 0 12px 36px rgba(59,130,246,.28);
    transform: translateY(-2px);
}






/* ========================= offres-site.php ========================= */

/* ─── BACKGROUND FIXE ─── */
.page-offers::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        linear-gradient(rgba(0,0,0,.52), rgba(0,0,0,.52)),
        url("../image/bgsite.png") center / cover no-repeat;
    z-index: 0;
}

.page-offers > * {
    position: relative;
    z-index: 1;
}

/* ─── SCROLL REVEAL ─── */
.page-offers .section-block {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s ease, transform .7s ease;
}

.page-offers .section-block.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ─── WRAPPER HERO + CARDS ─── */
.offer-intro-block {
    height: 80dvh;
    display: flex;
    flex-direction: column;
}

/* ─── HERO ─── */
.page-offers .offer-hero {
    padding-top: clamp(120px, 14dvh, 210px);
    padding-bottom: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    max-width: 500px;
    margin: 0 auto;
    gap: 4px;
    flex-shrink: 0;
}

.offer-hero h1 {
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    background: linear-gradient(100deg, #ffffff 40%, rgba(59,130,246,.88) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 2px;
}

.offer-hero .intro {
    color: rgba(255,255,255,.68);
    font-size: .92rem;
    line-height: 1.6;
    max-width: 560px;
    margin-top: 2px;
}

/* ─── OFFER CARDS (LEVELS) ─── */
.offer-levels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 2dvh, 28px);
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 10px 20px 20px;
    flex: 1;
    align-content: center;
}

.page-offers .offer-card {
    padding: clamp(20px, 2.5dvh, 36px) 28px;
    display: flex;
    flex-direction: column;
    text-align: left;
    position: relative;
    border-radius: 20px;
    background:
        radial-gradient(circle at 15% 20%, rgba(255,255,255,.80) 0%, transparent .5%),
        radial-gradient(circle at 72% 8%,  rgba(255,255,255,.65) 0%, transparent .4%),
        radial-gradient(circle at 88% 55%, rgba(255,255,255,.72) 0%, transparent .45%),
        radial-gradient(circle at 30% 78%, rgba(255,255,255,.55) 0%, transparent .38%),
        radial-gradient(circle at 58% 34%, rgba(255,255,255,.60) 0%, transparent .35%),
        radial-gradient(circle at 90% 80%, rgba(255,255,255,.50) 0%, transparent .32%),
        radial-gradient(circle at 45% 90%, rgba(255,255,255,.45) 0%, transparent .30%),
        rgba(8,12,30,.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 15px 40px rgba(0,0,0,.45);
    color: #fff;
    text-decoration: none;
    overflow: hidden;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.page-offers .offer-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    border-radius: 20px 20px 0 0;
    opacity: .7;
    transition: opacity .35s ease;
}

.page-offers .offer-card:hover {
    transform: translateY(-6px);
}

.page-offers .offer-card:hover::before {
    opacity: 1;
}

/* Tier colors — top accent + hover glow */
.page-offers .offer-card.essentiel::before {
    background: linear-gradient(90deg, rgba(6,182,212,.6), rgba(103,232,249,.9));
}
.page-offers .offer-card.essentiel:hover {
    border-color: rgba(6,182,212,.38);
    box-shadow: 0 20px 60px rgba(0,0,0,.55), 0 0 55px rgba(6,182,212,.28);
}

.page-offers .offer-card.pro::before {
    background: linear-gradient(90deg, rgba(251,191,36,.8), rgba(253,230,138,1));
}
.page-offers .offer-card.pro:hover {
    border-color: rgba(251,191,36,.42);
    box-shadow: 0 20px 60px rgba(0,0,0,.55), 0 0 60px rgba(251,191,36,.28);
}

.page-offers .offer-card.surmesure::before {
    background: linear-gradient(90deg, rgba(59,130,246,.7), rgba(147,197,253,.95));
}
.page-offers .offer-card.surmesure:hover {
    border-color: rgba(59,130,246,.36);
    box-shadow: 0 20px 60px rgba(0,0,0,.55), 0 0 55px rgba(59,130,246,.26);
}

.offer-card h2 {
    margin: 0 0 4px;
    font-size: clamp(1rem, 1.4vw, 1.25rem);
    line-height: 1.35;
    word-break: break-word;
}

.offer-card p {
    margin: 0;
    font-size: clamp(.8rem, 1vw, .92rem);
    line-height: 1.6;
    color: rgba(255,255,255,.80);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.offer-card .meta {
    margin-top: auto;
    padding-top: 12px;
    color: rgba(255,255,255,.45);
    font-size: .82rem;
}

.offer-card .price {
    display: inline-block;
    padding: 7px 16px;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -.01em;
    border: 1px solid rgba(255,255,255,.08);
    margin: 4px 0 6px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.offer-card.essentiel .price { background: rgba(6,182,212,.18); border-color: rgba(6,182,212,.40); color: rgba(103,232,249,1); }
.offer-card.pro .price       { background: rgba(251,191,36,.18); border-color: rgba(251,191,36,.40); color: rgba(253,230,138,1); }
.offer-card.surmesure .price { background: rgba(59,130,246,.18); border-color: rgba(59,130,246,.40); color: rgba(147,197,253,1); }

/* OFFER PLANET THUMBNAIL */
.offer-planet {
    display: flex;
    justify-content: center;
    margin-bottom: clamp(10px, 1.5dvh, 18px);
}

.offer-planet img {
    width: clamp(60px, 7dvh, 80px);
    height: clamp(60px, 7dvh, 80px);
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 22px rgba(255,255,255,.12);
    transition: transform .4s ease, box-shadow .4s ease;
}

.offer-card:hover .offer-planet img {
    transform: scale(1.08);
}

.offer-card.essentiel:hover .offer-planet img {
    box-shadow: 0 0 36px rgba(6,182,212,.45);
}

.offer-card.pro:hover .offer-planet img {
    box-shadow: 0 0 36px rgba(251,191,36,.45);
}

.offer-card.surmesure:hover .offer-planet img {
    box-shadow: 0 0 36px rgba(59,130,246,.45);
}

/* OFFER LINK */
.offer-link {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    text-decoration: none;
    color: inherit;
}

/* RIBBON */
.offer-ribbon {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    pointer-events: none;
    z-index: 2;
}

.offer-ribbon.pro {
    background: #0b6efd;
    color: #fff;
    box-shadow: 0 4px 14px rgba(11,110,253,.45);
}

.offer-ribbon.pro::before {
    content: "★ ";
}

/* ─── OPTIONS HEADER ─── */
.offer-options-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    padding: 60px 20px 20px;
}

.offer-options-header h2 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    background: linear-gradient(100deg, #ffffff 40%, rgba(122,92,255,.88) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 12px;
}

.offer-options-header p {
    color: rgba(255,255,255,.58);
    font-size: 1rem;
    line-height: 1.7;
}

/* ─── OPTIONS GRID ─── */
.options-section-header {
    grid-column: 1 / -1;
    position: relative;
    padding: 48px 0 20px;
    margin-top: 8px;
}

.options-section-header:first-child {
    padding-top: 0;
    margin-top: 0;
}

.options-section-header:not(:first-child)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(11,110,253,.55) 25%,
        rgba(122,92,255,.35) 75%,
        transparent 100%
    );
    box-shadow: 0 0 14px rgba(11,110,253,.2);
}

.sect-header-content {
    display: flex;
    align-items: center;
    gap: 20px;
    background: linear-gradient(
        135deg,
        rgba(11,110,253,.06) 0%,
        rgba(122,92,255,.04) 100%
    );
    border: 1px solid rgba(11,110,253,.14);
    border-left: 3px solid rgba(11,110,253,.5);
    border-radius: 0 10px 10px 0;
    padding: 14px 20px 14px 18px;
    position: relative;
    overflow: hidden;
}

.sect-header-content::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 120px;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(122,92,255,.04)
    );
    pointer-events: none;
}

.sect-num {
    font-size: 2.2rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    color: rgba(11,110,253,.22);
    letter-spacing: -.03em;
    line-height: 1;
    flex-shrink: 0;
    font-family: monospace;
}

.sect-orb {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(11,110,253,.55);
    box-shadow: 0 0 10px rgba(11,110,253,.6), 0 0 24px rgba(11,110,253,.25);
    margin-left: auto;
    animation: orbPulse 3s ease-in-out infinite;
}

@keyframes orbPulse {
    0%, 100% { opacity: .6; box-shadow: 0 0 8px rgba(11,110,253,.5), 0 0 20px rgba(11,110,253,.2); }
    50%       { opacity: 1;  box-shadow: 0 0 14px rgba(11,110,253,.9), 0 0 32px rgba(11,110,253,.4); }
}

.options-section-header strong {
    display: block;
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(255,255,255,.82);
    margin-bottom: 4px;
}

.options-section-header p {
    font-size: .76rem;
    color: rgba(255,255,255,.38);
    line-height: 1.5;
    margin: 0;
}

.opt-cat-from {
    font-size: .68rem;
    font-weight: 500;
    color: rgba(255,255,255,.3);
    margin-left: 6px;
    vertical-align: middle;
    font-style: italic;
}

.opt-cat-from--devis {
    color: rgba(251,191,36,.7);
    font-style: normal;
    font-weight: 600;
}

.opt-price {
    font-size: .75rem;
    font-weight: 600;
    color: rgba(122,92,255,.85);
    white-space: nowrap;
    flex-shrink: 0;
}

.opt-name {
    flex: 1;
}

.options-section-divider {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 0 8px;
}

.options-section-divider span {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(255,255,255,.45);
    white-space: nowrap;
}

.options-section-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,.08);
}

.offer-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 20px 60px;
    text-align: left;
}

.options-category {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 16px;
    padding: 20px 24px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.2s ease, transform 1.2s ease, border-color .3s ease, box-shadow .3s ease;
}

.options-category.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.options-category:hover {
    border-color: rgba(122,92,255,.22);
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.option-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.options-category h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.options-category h4 {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(122,92,255,.8);
    margin: 14px 0 6px;
}

.options-category ul {
    list-style: none;
    padding: 0;
    margin: 0 0 6px;
}

.options-category li {
    font-size: .88rem;
    color: rgba(255,255,255,.68);
    padding: 5px 0 5px 16px;
    position: relative;
    line-height: 1.5;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.options-category li::before {
    content: "▸";
    position: absolute;
    left: 0;
    color: rgba(122,92,255,.7);
    font-size: .75rem;
}

/* ─── TOOLTIP BADGES (div créé par JS) ─── */
.tooltip {
    position: fixed;
    background: rgba(10,15,40,.96);
    color: #fff;
    padding: 5px 11px;
    border-radius: 6px;
    font-size: .74rem;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
    z-index: 9999;
    transform: translate(-50%, calc(-100% - 10px));
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 4px 16px rgba(0,0,0,.35);
}

/* ─── BADGES ─── */
.badge {
    display: inline-flex;
    align-items: center;
    font-size: .75rem;
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: .02em;
    border: 1px solid transparent;
    white-space: nowrap;
}

.badge.essentiel {
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.65);
    border-color: rgba(255,255,255,.10);
}

.badge.optional {
    background: rgba(251,191,36,.12);
    color: #fbbf24;
    border-color: rgba(251,191,36,.45);
    box-shadow: 0 0 8px rgba(251,191,36,.25), inset 0 0 6px rgba(251,191,36,.08);
    text-shadow: 0 0 8px rgba(251,191,36,.5);
}

.badge.pro {
    background: rgba(251,191,36,.14);
    color: #fde68a;
    border-color: rgba(251,191,36,.38);
}

.badge.surmesure {
    background: rgba(6,182,212,.13);
    color: #67e8f9;
    border-color: rgba(6,182,212,.35);
}

.badge.intro {
    font-size: 1.4rem;
    background: #0b6efd;
    color: #fff;
    border-radius: 40%;
    border: none;
    animation: arrowSlideright 5s ease-in-out infinite;
    text-decoration: none;
}

.badge.intro:hover {
    background: rgba(255,255,255,.15);
}

.badge.suivante {
    font-size: 1.4rem;
    background: #0b6efd;
    color: #fff;
    border-radius: 60%;
    border: none;
    margin-left: 20px;
    animation: arrowSlideleft 5s ease-in-out infinite;
    text-decoration: none;
}

.badge.precedente {
    font-size: 1.4rem;
    background: #0b6efd;
    color: #fff;
    border-radius: 60%;
    border: none;
    margin-right: 20px;
    animation: arrowSlide1 5s ease-in-out infinite;
    text-decoration: none;
}

/* ─── TOOLTIPS ─── */
.tooltip-link {
    text-decoration: none;
    color: inherit;
}

.tooltip-icon {
    position: relative;
    display: inline-block;
    margin-left: 6px;
    cursor: pointer;
    font-size: 14px;
    color: rgba(255,255,255,.6);
    vertical-align: middle;
}

.tooltip-text {
    position: absolute;
    background: rgba(10,14,30,.96);
    border: 1px solid rgba(255,255,255,.10);
    color: #fff;
    border-radius: 8px;
    font-size: .75rem;
    font-weight: 500;
    white-space: nowrap;
    padding: 6px 12px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
    z-index: 10;
}

.tooltip-icon .tooltip-text {
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
}

.tooltip-icon:hover .tooltip-text {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* ─── COMPARISON TABLE ─── */
.offer-comparison {
    max-width: 1600px;
    height: 85dvh;
    margin: 40px auto 0;
    margin-bottom: 60px;
    padding: 0 20px 60px;
}

.table-wrapper {
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.08);
    background:
        radial-gradient(circle at 8%  12%, rgba(255,255,255,.75) 0%, transparent .4%),
        radial-gradient(circle at 55% 5%,  rgba(255,255,255,.60) 0%, transparent .35%),
        radial-gradient(circle at 92% 18%, rgba(255,255,255,.70) 0%, transparent .42%),
        radial-gradient(circle at 22% 55%, rgba(255,255,255,.50) 0%, transparent .30%),
        radial-gradient(circle at 78% 42%, rgba(255,255,255,.55) 0%, transparent .33%),
        radial-gradient(circle at 40% 88%, rgba(255,255,255,.45) 0%, transparent .28%),
        radial-gradient(circle at 88% 78%, rgba(255,255,255,.48) 0%, transparent .30%),
        radial-gradient(circle at 14% 80%, rgba(255,255,255,.42) 0%, transparent .27%),
        rgba(6,8,20,.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 60px rgba(0,0,0,.25);
    position: relative;
    padding-top: 14px;
    overflow: visible;
}



/* Sticky thead */
.offer-comparison thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

.offer-comparison thead tr {
    background:
        radial-gradient(circle at 8%  12%, rgba(255,255,255,.75) 0%, transparent .4%),
        radial-gradient(circle at 55% 5%,  rgba(255,255,255,.60) 0%, transparent .35%),
        radial-gradient(circle at 92% 18%, rgba(255,255,255,.70) 0%, transparent .42%),
        rgba(6,8,20,.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.offer-comparison table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.offer-comparison tbody tr {
    border-bottom: 1px solid rgba(255,255,255,.055);
    transition: background .2s ease;
}

.offer-comparison tbody tr:last-child { border-bottom: none; }

.offer-comparison tbody tr:hover { background: rgba(255,255,255,.025); }

.offer-comparison tr.table-section-label td {
    font-size: .6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(255,255,255,.35);
    padding-top: 24px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    background: transparent !important;
    pointer-events: none;
}

.offer-comparison tr.table-section-label:hover { background: transparent !important; }

.offer-comparison td,
.offer-comparison th {
    padding: 15px 20px;
    text-align: center;
    line-height: 1.5;
    position: relative;
    vertical-align: middle;
}

.offer-comparison td {
    font-size: .78rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
    color: rgba(255,255,255,.75);
}

.offer-comparison th {
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
}

.offer-comparison td:first-child,
.offer-comparison th:first-child {
    width: 30%;
    text-align: left;
    font-weight: 500;
    color: rgba(255,255,255,.88);
    padding-left: 24px;
}

.offer-comparison td:not(:first-child),
.offer-comparison th:not(:first-child) {
    border-left: 1px solid rgba(255,255,255,.05);
}

/* Col 2 — Essentiel (cyan) */
.offer-comparison th:nth-child(2),
.offer-comparison td:nth-child(2) {
    background: rgba(6,182,212,.03);
}

/* Col 3 — Pro (recommended, amber) */
.offer-comparison th:nth-child(3),
.offer-comparison td:nth-child(3) {
    background: rgba(251,191,36,.06);
    border-left: 1px solid rgba(251,191,36,.20) !important;
    border-right: 1px solid rgba(251,191,36,.20);
}

.offer-comparison th:nth-child(3) {
    box-shadow: 0 6px 28px rgba(251,191,36,.14);
}

/* Col 4 — Sur mesure (blue) */
.offer-comparison th:nth-child(4),
.offer-comparison td:nth-child(4) {
    background: rgba(59,130,246,.04);
}

/* Row hover per column */
.offer-comparison tbody tr:hover td:nth-child(2) { background: rgba(6,182,212,.07); }
.offer-comparison tbody tr:hover td:nth-child(3) { background: rgba(251,191,36,.11); }
.offer-comparison tbody tr:hover td:nth-child(4) { background: rgba(59,130,246,.07); }

/* thead */
.offer-comparison thead th {
    font-weight: 800;
    padding-top: 28px;
    padding-bottom: 22px;
    font-size: 0.85rem;
    letter-spacing: .01em;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.offer-comparison thead th:first-child { border-radius: 16px 0 0 0; }
.offer-comparison thead th:last-child  { border-radius: 0 16px 0 0; }

.offer-comparison thead th:nth-child(2) { color: #67e8f9; }
.offer-comparison thead th:nth-child(3) { color: #fde68a; }
.offer-comparison thead th:nth-child(4) { color: #93c5fd; }

.offer-comparison th.recommended::after {
    content: attr(data-label);
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, rgb(120,64,4), #fbbf24);
    color: #fff;
    font-size: .66rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    letter-spacing: .05em;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(251,191,36,.45);
}

/* tfoot */
.offer-comparison tfoot tr {
    border-top: 1px solid rgba(255,255,255,.08);
}

.offer-comparison tfoot td {
    color: rgba(255,255,255,.45);
    font-size: .82rem;
    padding: 14px 20px;
}

.offer-comparison tfoot td:first-child { padding-left: 24px; }

/* Price row */
.offer-comparison .price-row {
    border-top: 1px solid rgba(255,255,255,.10) !important;
}

.offer-comparison .price-row td:first-child {
    font-size: .74rem;
    color: rgba(255,255,255,.55);
    font-weight: 400;
}

.offer-comparison .price-row th {
    font-size: 1.0rem;
    font-weight: 800;
    color: #fff;
    padding-top: 22px;
    padding-bottom: 22px;
}

.offer-comparison .price-row th:nth-child(2) { color: #93c5fd; }
.offer-comparison .price-row th:nth-child(3) { font-size: 1.4rem; color: #fde68a; }
.offer-comparison .price-row th:nth-child(4) { color: #67e8f9; }

/* Check / Cross coloring */
.offer-comparison .val-check { color: #4ade80; font-size: 1.1rem; font-weight: 700; }
.offer-comparison .val-cross { color: rgba(255,255,255,.30); font-size: .9rem; letter-spacing: .05em; }



/* ─── OFFER CTA ─── */
.offer-cta {
    text-align: center;
    padding: 80px 20px 60px;
    max-width: 900px;
    margin: 0 auto;
}

.offer-cta h2 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    margin-bottom: 40px;
    background: linear-gradient(100deg, #ffffff 40%, rgba(59,130,246,.88) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cta-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}

.cta-btn {
    display: inline-block;
    padding: 12px 32px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    font-size: .95rem;
    color: #fff;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.12);
    transition: transform .3s ease, box-shadow .3s ease, background .3s ease, border-color .3s ease;
}

.cta-btn:hover {
    transform: translateY(-3px);
    border-color: rgba(11,110,253,.6);
    box-shadow: 0 10px 25px rgba(11,110,253,.18);
    background: rgba(11,110,253,.10);
}

.cta-btn--featured {
    background: rgba(11,110,253,.75);
    border-color: rgba(11,110,253,.55);
    transform: scale(1.06);
    box-shadow: 0 8px 24px rgba(11,110,253,.30);
}

.cta-btn--featured:hover {
    background: rgba(11,110,253,.90);
    box-shadow: 0 14px 34px rgba(11,110,253,.42);
    transform: scale(1.06) translateY(-3px);
}

/* ─── MODALITIES ─── */
.offer-modalities {
    max-width: 860px;
    margin: 0 auto;
    padding: 40px 20px 200px;
}

.offer-modalities h2 {
    text-align: center;
    font-size: clamp(1.4rem, 2.5vw, 1.9rem);
    font-weight: 700;
    margin-bottom: 28px;
    color: rgba(255,255,255,.9);
}

.modalities-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.modalities-list li {
    padding: 14px 20px 14px 44px;
    border-radius: 12px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    color: rgba(255,255,255,.70);
    font-size: .92rem;
    line-height: 1.6;
    position: relative;
    transition: border-color .25s ease, background .25s ease;
}

.modalities-list li::before {
    content: "✦";
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: .65rem;
    color: rgba(11,110,253,.65);
}

.modalities-list li:hover {
    background: rgba(255,255,255,.045);
    border-color: rgba(255,255,255,.10);
}

/* ========================= sitevitrine.php ========================= */

/* ─── BACKGROUND FIXE ─── */
.page-vitrine::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        linear-gradient(rgba(0,0,0,.52), rgba(0,0,0,.52)),
        url("../image/bgsite.png") center / cover no-repeat;
    z-index: 0;
}

.page-vitrine > * {
    position: relative;
    z-index: 1;
}

/* ─── SCROLL REVEAL ─── */
.page-vitrine .section-block {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s ease, transform .7s ease;
}

.page-vitrine .section-block.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* ─── HERO : taille réduite ─── */
.vitrine-hero {
    min-height: 60dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 180px 20px 60px;
    text-align: center;
    position: relative;
}


/* ─── NAVIGATION INTER-OFFRES : plus visible ─── */
.vitrine-offer-nav {
    position: absolute;
    top: clamp(90px, 12vh, 120px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(860px, calc(100% - 40px));
}

.vitrine-nav-link {
    display: inline-flex;
    position: relative;
    align-items: center;
    gap: 10px;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255,255,255,.80);
    text-decoration: none;
    padding: 12px 28px;
    border-radius: 999px;
    background: rgba(11,110,253,.12);
    border: 1px solid rgba(59,130,246,.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        0 0 18px rgba(59,130,246,.15),
        inset 0 1px 0 rgba(255,255,255,.08);
    transition:
        color .25s ease,
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}

.vitrine-nav-link:hover {
    color: #fff;
    background: rgba(59,130,246,.25);
    border-color: rgba(59,130,246,.75);
    box-shadow:
        0 0 32px rgba(59,130,246,.35),
        0 8px 20px rgba(11,110,253,.20),
        inset 0 1px 0 rgba(255,255,255,.12);
    transform: translateY(-2px);
}

.vitrine-nav-link--prev:hover {
    transform: translateY(-2px) translateX(-3px);
}

.vitrine-nav-link--next:hover {
    transform: translateY(-2px) translateX(3px);
}

.vitrine-nav-link svg {
    width: 18px;
    height: 18px;
    transition: transform .25s ease;
    flex-shrink: 0;
}

.vitrine-nav-link--prev:hover svg {
    transform: translateX(-3px);
}

.vitrine-nav-link--next:hover svg {
    transform: translateX(3px);
}

.vitrine-nav-link::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(-100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: rgba(10,14,30,.96);
    border: 1px solid rgba(255,255,255,.10);
    color: rgba(255,255,255,.85);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    white-space: nowrap;
    padding: 5px 12px;
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    z-index: 10;
}

.vitrine-nav-link:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.vitrine-track-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,.22);
    border: 1px solid rgba(255,255,255,.18);
    flex-shrink: 0;
}

.vitrine-track-dot--active {
    width: 10px;
    height: 10px;
    background: #3b82f6;
    border-color: rgba(59,130,246,.8);
    box-shadow: 0 0 10px rgba(59,130,246,.70);
}

.vitrine-track-line {
    width: 32px;
    height: 1px;
    background: rgba(255,255,255,.20);
}


/* ─── HERO INNER ─── */
.vitrine-hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    max-width: 700px;
}

.vitrine-tier-label {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #22d3ee;
    background: rgba(6,182,212,.10);
    border: 1px solid rgba(6,182,212,.28);
    box-shadow: 0 0 14px rgba(6,182,212,.12);
}

.vitrine-hero h1 {
    font-size: clamp(1.9rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0;
    background: linear-gradient(100deg, #ffffff 40%, rgba(59,130,246,.90) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.vitrine-subtitle {
    color: rgba(255,255,255,.60);
    font-size: 1.05rem;
    line-height: 1.75;
    max-width: 560px;
    margin: 0;
}

.vitrine-price-block {
    margin: 4px 0;
}

.vitrine-price {
    display: inline-block;
    padding: 10px 28px;
    border-radius: 12px;
    font-size: 1.55rem;
    font-weight: 800;
    color: #fff;
    background: rgb(1,44,161);
    border: 1px solid rgba(59,130,246,.28);
    box-shadow: 0 0 28px rgba(59,130,246,.18);
}

/* ─── INCLUS + MODALITÉS ─── */
.vitrine-details {
    max-width: 1100px;
    margin: 0 auto;
    padding: 60px 20px;
}

.vitrine-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

.vitrine-card {
    padding: 32px 28px;
    border-radius: 20px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: relative;
    overflow: hidden;
    transition: border-color .3s ease, box-shadow .3s ease;
}

.vitrine-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
}

.vitrine-card--includes::before {
    background: linear-gradient(90deg, transparent, rgba(6,182,212,.70), transparent);
}

.vitrine-card--terms::before {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.20), transparent);
}

.vitrine-card--includes:hover {
    border-color: rgba(6,182,212,.22);
    box-shadow: 0 10px 32px rgba(6,182,212,.09);
}

.vitrine-card h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.vitrine-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.vitrine-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.05);
    color: rgba(255,255,255,.68);
    font-size: .88rem;
    line-height: 1.55;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.vitrine-list li::before {
    content: "✓";
    color: #06b6d4;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
    font-size: .85rem;
}

.vitrine-list--terms {
    counter-reset: modal-counter;
}

.vitrine-list--terms li {
    counter-increment: modal-counter;
}

.vitrine-list--terms li::before {
    content: counter(modal-counter, decimal-leading-zero) ".";
    color: rgba(6,182,212,.55);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    min-width: 22px;
    flex-shrink: 0;
}

.vitrine-card--includes .vitrine-list li:hover {
    background: rgba(6,182,212,.06);
    border-color: rgba(6,182,212,.16);
    color: rgba(255,255,255,.88);
}

/* ─── OPTIONS ─── */
.vitrine-options {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 20px 60px;
}

.vitrine-options-header {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 36px;
}

.vitrine-options-header h2 {
    font-size: clamp(1.35rem, 2.5vw, 1.85rem);
    font-weight: 700;
    margin: 0 0 10px;
    background: linear-gradient(100deg, #ffffff 40%, rgba(59,130,246,.88) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.vitrine-options-header p {
    color: rgba(255,255,255,.50);
    font-size: .92rem;
    line-height: 1.7;
}

.vitrine-options-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
}

.vitrine-options-grid .option-card {
    grid-column: span 2;
}

.vitrine-options-grid .option-card:nth-child(7) {
    grid-column: 3 / 5;
}

.option-card {
    padding: 22px 20px;
    border-radius: 16px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity .8s ease,
        transform .8s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.option-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.option-card:nth-child(1) { transition-delay: .05s; }
.option-card:nth-child(2) { transition-delay: .12s; }
.option-card:nth-child(3) { transition-delay: .19s; }
.option-card:nth-child(4) { transition-delay: .26s; }
.option-card:nth-child(5) { transition-delay: .33s; }
.option-card:nth-child(6) { transition-delay: .40s; }
.option-card:nth-child(7) { transition-delay: .47s; }

.option-card:hover {
    border-color: rgba(59,130,246,.22);
    box-shadow: 0 8px 24px rgba(59,130,246,.08);
}

.option-card h3 {
    font-size: .92rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.option-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.option-card li {
    font-size: .83rem;
    color: rgba(255,255,255,.60);
    padding: 4px 0 4px 14px;
    position: relative;
    line-height: 1.5;
}

.option-card li::before {
    content: "▸";
    position: absolute;
    left: 0;
    color: rgba(59,130,246,.65);
    font-size: .72rem;
    top: 5px;
}

.option-card li.opt-item {
    padding-left: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.option-card li.opt-item::before {
    display: none;
}

.opt-item-name {
    flex: 1;
    color: rgba(255,255,255,.70);
    line-height: 1.5;
}

.opt-price {
    flex-shrink: 0;
    font-size: .78rem;
    font-weight: 600;
    color: #3b82f6;
    white-space: nowrap;
    margin-top: 1px;
}

/* ─── ADVANCED MODULES CALLOUT ─── */
.vit-adv-callout {
    grid-column: 1 / -1;
    max-width: 1100px;
    margin: 8px auto 0;
    padding: 0 20px 48px;
    width: 100%;
    box-sizing: border-box;
}

.vit-adv-callout-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    background: linear-gradient(135deg, rgba(122,92,255,.07) 0%, rgba(11,110,253,.05) 100%);
    border: 1px solid rgba(122,92,255,.22);
    border-left: 3px solid rgba(122,92,255,.6);
    border-radius: 0 12px 12px 0;
    padding: 18px 24px;
    flex-wrap: wrap;
}

.vit-adv-callout-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(122,92,255,.9);
    white-space: nowrap;
    flex-shrink: 0;
}

.vit-adv-callout-text {
    flex: 1;
    font-size: .82rem;
    color: rgba(255,255,255,.5);
    line-height: 1.55;
    margin: 0;
    min-width: 200px;
}

.vit-adv-callout-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .8rem;
    font-weight: 600;
    color: rgba(122,92,255,.85);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color .2s ease, gap .2s ease;
}

.vit-adv-callout-link svg {
    width: 14px;
    height: 14px;
    transition: transform .2s ease;
}

.vit-adv-callout-link:hover {
    color: rgba(122,92,255,1);
    gap: 10px;
}

.vit-adv-callout-link:hover svg {
    transform: translateX(3px);
}

.vit-adv-callout-inner + .vit-adv-callout-inner {
    margin-top: 10px;
}

.vit-adv-callout-inner--cyan {
    background: linear-gradient(135deg, rgba(6,182,212,.07) 0%, rgba(11,110,253,.04) 100%);
    border-color: rgba(6,182,212,.22);
    border-left-color: rgba(6,182,212,.6);
}

.vit-adv-callout-link--cyan {
    color: rgba(6,182,212,.85);
}

.vit-adv-callout-inner--cyan .vit-adv-callout-label {
    color: rgba(6,182,212,.9);
}

.vit-adv-callout-link--cyan:hover {
    color: rgba(6,182,212,1);
}

.vit-adv-callout-inner--green {
    background: linear-gradient(135deg, rgba(34,197,94,.07) 0%, rgba(16,185,129,.04) 100%);
    border-color: rgba(34,197,94,.22);
    border-left-color: rgba(34,197,94,.6);
}

.vit-adv-callout-link--green {
    color: rgba(34,197,94,.85);
}

.vit-adv-callout-inner--green .vit-adv-callout-label {
    color: rgba(34,197,94,.9);
}

.vit-adv-callout-link--green:hover {
    color: rgba(34,197,94,1);
}

.pro-adv-module-callout {
    background: linear-gradient(135deg, rgba(251,191,36,.08) 0%, rgba(245,158,11,.04) 100%);
    border-color: rgba(251,191,36,.25);
    border-left-color: rgba(251,191,36,.65);
}

.pro-adv-module-callout .vit-adv-callout-label {
    color: rgba(251,191,36,.95);
}

.vit-adv-callout-link--amber {
    color: rgba(251,191,36,.85);
}

.vit-adv-callout-link--amber:hover {
    color: rgba(251,191,36,1);
}

.pro-list-highlight {
    color: rgba(251,191,36,.95);
    font-weight: 600;
    background: rgba(251,191,36,.06);
    border-color: rgba(251,191,36,.15);
}

/* ─── PAGE PREMIUM (surmesure.php) ─── */

.sur-adv-module-callout {
    background: linear-gradient(135deg, rgba(59,130,246,.08) 0%, rgba(99,102,241,.04) 100%);
    border-color: rgba(59,130,246,.25);
    border-left-color: rgba(59,130,246,.65);
}

.sur-adv-module-callout .vit-adv-callout-label {
    color: rgba(59,130,246,.95);
}

.vit-adv-callout-link--blue {
    color: rgba(59,130,246,.85);
}

.vit-adv-callout-link--blue:hover {
    color: rgba(59,130,246,1);
}

.sur-list-highlight {
    color: rgba(251,191,36,.95);
    font-weight: 600;
    background: rgba(251,191,36,.06);
    border-color: rgba(251,191,36,.15);
}

.sur-list-highlight--blue {
    color: rgba(59,130,246,.95);
    background: rgba(59,130,246,.06);
    border-color: rgba(59,130,246,.15);
}

.page-sur .sur-hero,
.page-sur .sur-details,
.page-sur .sur-options,
.page-sur .sur-cta {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.sur-hero {
    padding-top: clamp(100px, 14vw, 160px);
    padding-bottom: 60px;
    text-align: center;
    position: relative;
}

.sur-offer-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 32px;
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
}

.sur-nav-link {
    display: inline-flex;
    position: relative;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    font-weight: 600;
    color: rgba(255,255,255,.45);
    text-decoration: none;
    padding: 6px 12px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 20px;
    background: rgba(255,255,255,.03);
    transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.sur-nav-link:hover {
    color: rgba(59,130,246,.85);
    border-color: rgba(59,130,246,.3);
    background: rgba(59,130,246,.05);
}

.sur-nav-link::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(-100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: rgba(10,14,30,.96);
    border: 1px solid rgba(255,255,255,.10);
    color: rgba(255,255,255,.85);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    white-space: nowrap;
    padding: 5px 12px;
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    z-index: 10;
}

.sur-nav-link:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.sur-tier-label {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(59,130,246,.9);
    background: rgba(59,130,246,.1);
    border: 1px solid rgba(59,130,246,.25);
    border-radius: 20px;
    padding: 4px 14px;
    margin-bottom: 16px;
}

.sur-hero-inner h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    margin: 0 0 12px;
    background: linear-gradient(100deg, #ffffff 40%, rgba(59,130,246,.88) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sur-subtitle {
    color: rgba(255,255,255,.55);
    font-size: 1rem;
    line-height: 1.7;
    max-width: 540px;
    margin: 0 auto 28px;
}

.sur-price-block {
    margin-bottom: 28px;
}

.sur-price {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    color: rgba(59,130,246,.95);
}

.sur-details {
    padding: 0 20px 48px;
}

.sur-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
}

.sur-card {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 16px;
    padding: 28px 24px;
    position: relative;
    overflow: hidden;
    transition: border-color .3s ease, box-shadow .3s ease;
}

.sur-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
}

.sur-card--includes::before {
    background: linear-gradient(90deg, transparent, rgba(59,130,246,.80), transparent);
}

.sur-card--terms::before {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.20), transparent);
}

.sur-card--includes:hover {
    border-color: rgba(59,130,246,.22);
    box-shadow: 0 10px 32px rgba(59,130,246,.09);
}

.sur-card h2 {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(59,130,246,.75);
    margin: 0 0 16px;
}

.sur-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sur-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.05);
    font-size: .88rem;
    color: rgba(255,255,255,.68);
    line-height: 1.55;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.sur-list li::before {
    content: '✓';
    color: rgba(59,130,246,.8);
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
    font-size: .85rem;
}

.sur-card--includes .sur-list li:hover {
    background: rgba(59,130,246,.06);
    border-color: rgba(59,130,246,.16);
    color: rgba(255,255,255,.88);
}

.sur-list--terms {
    counter-reset: modal-counter;
}

.sur-list--terms li {
    counter-increment: modal-counter;
}

.sur-list--terms li::before {
    content: counter(modal-counter, decimal-leading-zero) ".";
    color: rgba(59,130,246,.55);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    min-width: 22px;
    flex-shrink: 0;
}

.badge-offered {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    padding: 2px 9px;
    border-radius: 20px;
    flex-shrink: 0;
    line-height: 1.7;
}

.badge-offered--amber {
    background: rgba(251,191,36,.12);
    color: rgba(251,191,36,.95);
    border: 1px solid rgba(251,191,36,.28);
}

.badge-offered--blue {
    background: rgba(59,130,246,.12);
    color: rgba(59,130,246,.95);
    border: 1px solid rgba(59,130,246,.28);
}

.badge-offered--devis {
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.50);
    border: 1px solid rgba(255,255,255,.12);
}

.highlight-anchor {
    color: inherit;
    text-decoration: none;
    flex: 1;
}

.highlight-anchor:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: currentColor;
    opacity: .85;
}

.sur-options {
    padding: 0 20px 48px;
}

.sur-cta {
    text-align: center;
    padding: 60px 20px;
    max-width: 760px;
    margin: 0 auto;
}

.sur-cta h2 {
    font-size: clamp(1.45rem, 2.5vw, 2rem);
    font-weight: 700;
    margin: 0 0 14px;
    background: linear-gradient(100deg, #ffffff 40%, rgba(59,130,246,.88) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sur-cta p {
    color: rgba(255,255,255,.55);
    font-size: .98rem;
    line-height: 1.75;
    max-width: 560px;
    margin: 0 auto 28px;
}

@media (max-width: 768px) {
    .sur-cards {
        grid-template-columns: 1fr;
    }
}

/* ─── BACKGROUND FIXE ─── */
.page-sur::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        linear-gradient(rgba(0,0,0,.52), rgba(0,0,0,.52)),
        url("../image/bgsite.png") center / cover no-repeat;
    z-index: 0;
}

.page-sur > * {
    position: relative;
    z-index: 1;
}

/* ─── SCROLL REVEAL ─── */
.page-sur .section-block {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s ease, transform .7s ease;
}

.page-sur .section-block.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ─── CTA FINAL ─── */
.vitrine-cta {
    text-align: center;
    padding: 60px 20px 200px;
    max-width: 760px;
    margin: 0 auto;
}

.vitrine-cta h2 {
    font-size: clamp(1.45rem, 2.5vw, 2rem);
    font-weight: 700;
    margin: 0 0 14px;
    background: linear-gradient(100deg, #ffffff 40%, rgba(59,130,246,.88) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.vitrine-cta p {
    color: rgba(255,255,255,.55);
    font-size: .98rem;
    line-height: 1.75;
    max-width: 560px;
    margin: 0 auto 28px;
}

.page-vitrine .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 40px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .04em;
    border-radius: 999px;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(135deg, rgba(11,110,253,.85) 0%, rgba(59,130,246,.70) 100%);
    border: 1px solid rgba(99,170,255,.40);
    box-shadow:
        0 0 28px rgba(59,130,246,.25),
        0 8px 24px rgba(11,110,253,.20),
        inset 0 1px 0 rgba(255,255,255,.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition:
        background .3s ease,
        box-shadow .3s ease,
        transform .3s ease,
        border-color .3s ease;
    position: relative;
    overflow: hidden;
}

.page-vitrine .btn-primary::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.08) 0%, transparent 60%);
    border-radius: inherit;
    pointer-events: none;
}

.page-vitrine .btn-primary::after {
    content: "→";
    font-size: .95rem;
    transition: transform .3s ease, opacity .3s ease;
    opacity: .7;
}

.page-vitrine .btn-primary:hover {
    background: linear-gradient(135deg, rgba(11,110,253,1) 0%, rgba(59,130,246,.90) 100%);
    border-color: rgba(99,170,255,.65);
    box-shadow:
        0 0 48px rgba(59,130,246,.40),
        0 12px 32px rgba(11,110,253,.30),
        inset 0 1px 0 rgba(255,255,255,.18);
    transform: translateY(-3px);
}

.page-vitrine .btn-primary:hover::after {
    transform: translateX(4px);
    opacity: 1;
}

.page-vitrine .section-block.is-visible .option-card {
    opacity: 1;
    transform: translateY(0);
}




/* ========================= sitepro.php ========================= */

/* ─── BACKGROUND FIXE ─── */
.page-pro::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        linear-gradient(rgba(0,0,0,.52), rgba(0,0,0,.52)),
        url("../image/bgsite.png") center / cover no-repeat;
    z-index: 0;
}

.page-pro > * {
    position: relative;
    z-index: 1;
}

/* ─── SCROLL REVEAL ─── */
.page-pro .section-block {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s ease, transform .7s ease;
}

.page-pro .section-block.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ─── HERO ─── */
.pro-hero {
    min-height: 60dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 180px 20px 60px;
    text-align: center;
    position: relative;
}

/* ─── NAVIGATION INTER-OFFRES ─── */
.pro-offer-nav {
    position: absolute;
    top: clamp(90px, 12vh, 120px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(860px, calc(100% - 40px));
}

.pro-nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255,255,255,.80);
    text-decoration: none;
    padding: 12px 28px;
    border-radius: 999px;
    background: rgba(251,191,36,.12);
    border: 1px solid rgba(251,191,36,.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        0 0 18px rgba(251,191,36,.16),
        inset 0 1px 0 rgba(255,255,255,.08);
    transition:
        color .25s ease,
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}

.pro-nav-link:hover {
    color: #fff;
    background: rgba(251,191,36,.24);
    border-color: rgba(251,191,36,.75);
    box-shadow:
        0 0 36px rgba(251,191,36,.38),
        0 8px 20px rgba(251,191,36,.20),
        inset 0 1px 0 rgba(255,255,255,.12);
    transform: translateY(-2px);
}

.pro-nav-link--prev:hover { transform: translateY(-2px) translateX(-3px); }
.pro-nav-link--next:hover { transform: translateY(-2px) translateX(3px); }

.pro-nav-link svg {
    width: 18px;
    height: 18px;
    transition: transform .25s ease;
    flex-shrink: 0;
}

.pro-nav-link--prev:hover svg { transform: translateX(-3px); }
.pro-nav-link--next:hover svg { transform: translateX(3px); }

.pro-nav-link::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(-100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: rgba(10,14,30,.96);
    border: 1px solid rgba(255,255,255,.10);
    color: rgba(255,255,255,.85);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    white-space: nowrap;
    padding: 5px 12px;
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    z-index: 10;
}

.pro-nav-link:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ─── HERO INNER ─── */
.pro-hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    max-width: 700px;
}

.pro-tier-label {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fde68a;
    background: rgba(251,191,36,.12);
    border: 1px solid rgba(251,191,36,.38);
    box-shadow:
        0 0 18px rgba(251,191,36,.20),
        inset 0 1px 0 rgba(255,255,255,.07);
}

.pro-hero h1 {
    font-size: clamp(1.9rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0;
    background: linear-gradient(100deg, #ffffff 35%, rgba(251,191,36,.95) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pro-subtitle {
    color: rgba(255,255,255,.60);
    font-size: 1.05rem;
    line-height: 1.75;
    max-width: 560px;
    margin: 0;
}

.pro-price-block {
    margin: 4px 0;
}

.pro-price {
    display: inline-block;
    padding: 10px 28px;
    border-radius: 12px;
    font-size: 1.55rem;
    font-weight: 800;
    color: #fff;
    background: rgb(120,64,4);
    border: 1px solid rgba(251,191,36,.42);
    box-shadow:
        0 0 32px rgba(251,191,36,.28),
        0 8px 20px rgba(251,191,36,.16);
}

/* ─── INCLUS + MODALITÉS ─── */
.pro-details {
    max-width: 1100px;
    margin: 0 auto;
    padding: 60px 20px;
}

.pro-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

.pro-card {
    padding: 32px 28px;
    border-radius: 20px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: relative;
    overflow: hidden;
    transition: border-color .3s ease, box-shadow .3s ease;
}

.pro-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
}

.pro-card--includes::before {
    background: linear-gradient(90deg, transparent, rgba(251,191,36,.80), transparent);
}

.pro-card--terms::before {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.20), transparent);
}

.pro-card--includes:hover {
    border-color: rgba(251,191,36,.25);
    box-shadow: 0 10px 32px rgba(251,191,36,.10);
}

.pro-card h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.pro-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.pro-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.05);
    color: rgba(255,255,255,.68);
    font-size: .88rem;
    line-height: 1.55;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.pro-list li::before {
    content: "✓";
    color: #fbbf24;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
    font-size: .85rem;
}

.pro-list--terms {
    counter-reset: modal-counter;
}

.pro-list--terms li {
    counter-increment: modal-counter;
}

.pro-list--terms li::before {
    content: counter(modal-counter, decimal-leading-zero) ".";
    color: rgba(251,191,36,.55);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    min-width: 22px;
    flex-shrink: 0;
}

.pro-card--includes .pro-list li:hover {
    background: rgba(251,191,36,.07);
    border-color: rgba(251,191,36,.18);
    color: rgba(255,255,255,.88);
}

/* ─── OPTIONS ─── */
.pro-options {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 20px 60px;
}

.pro-options-header {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 36px;
}

.pro-options-header h2 {
    font-size: clamp(1.35rem, 2.5vw, 1.85rem);
    font-weight: 700;
    margin: 0 0 10px;
    background: linear-gradient(100deg, #ffffff 35%, rgba(251,191,36,.95) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pro-options-header p {
    color: rgba(255,255,255,.50);
    font-size: .92rem;
    line-height: 1.7;
}

.pro-options-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
}

.pro-options-grid .option-card            { grid-column: span 2; }
.pro-options-grid .option-card:nth-child(4) { grid-column: 2 / 4; }
.pro-options-grid .option-card:nth-child(5) { grid-column: 4 / 6; }

/* ─── CTA FINAL ─── */
.pro-cta {
    text-align: center;
    padding: 60px 20px 160px;
    max-width: 760px;
    margin: 0 auto;
}

.pro-cta h2 {
    font-size: clamp(1.45rem, 2.5vw, 2rem);
    font-weight: 700;
    margin: 0 0 14px;
    background: linear-gradient(100deg, #ffffff 35%, rgba(251,191,36,.95) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pro-cta p {
    color: rgba(255,255,255,.55);
    font-size: .98rem;
    line-height: 1.75;
    max-width: 560px;
    margin: 0 auto 28px;
}

/* ─── BTN PRIMARY OVERRIDE (tier Pro) ─── */
.page-pro .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 40px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .04em;
    border-radius: 999px;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(135deg, rgba(251,191,36,.85) 0%, rgba(180,120,4,.80) 100%);
    border: 1px solid rgba(251,191,36,.52);
    box-shadow:
        0 0 32px rgba(251,191,36,.25),
        0 8px 24px rgba(251,191,36,.18),
        inset 0 1px 0 rgba(255,255,255,.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
    transition: background .3s ease, box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}

.page-pro .btn-primary::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.10) 0%, transparent 60%);
    border-radius: inherit;
    pointer-events: none;
}

.page-pro .btn-primary::after {
    content: "→";
    font-size: .95rem;
    transition: transform .3s ease, opacity .3s ease;
    opacity: .7;
}

.page-pro .btn-primary:hover {
    background: linear-gradient(135deg, rgba(251,191,36,1) 0%, rgba(180,120,4,.95) 100%);
    border-color: rgba(251,191,36,.78);
    box-shadow:
        0 0 52px rgba(251,191,36,.40),
        0 12px 32px rgba(251,191,36,.28),
        inset 0 1px 0 rgba(255,255,255,.18);
    transform: translateY(-3px);
}

.page-pro .btn-primary:hover::after {
    transform: translateX(4px);
    opacity: 1;
}

.page-pro .section-block.is-visible .option-card {
    opacity: 1;
    transform: translateY(0);
}



/* ========================= surmesure.php ========================= */

/* ─── BACKGROUND FIXE ─── */
.page-custom::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        linear-gradient(rgba(0,0,0,.52), rgba(0,0,0,.52)),
        url("../image/bgsite.png") center / cover no-repeat;
    z-index: 0;
}

.page-custom > * {
    position: relative;
    z-index: 1;
}

/* ─── SCROLL REVEAL ─── */
.page-custom .section-block {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s ease, transform .7s ease;
}

.page-custom .section-block.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ─── HERO ─── */
.custom-hero {
    min-height: 60dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 180px 20px 60px;
    text-align: center;
    position: relative;
}

/* ─── NAVIGATION INTER-OFFRES ─── */
.custom-offer-nav {
    position: absolute;
    top: clamp(90px, 12vh, 120px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(860px, calc(100% - 40px));
}

.custom-nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255,255,255,.80);
    text-decoration: none;
    padding: 12px 28px;
    border-radius: 999px;
    background: rgba(6,182,212,.12);
    border: 1px solid rgba(6,182,212,.42);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        0 0 18px rgba(6,182,212,.15),
        inset 0 1px 0 rgba(255,255,255,.08);
    transition:
        color .25s ease,
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}

.custom-nav-link:hover {
    color: #fff;
    background: rgba(6,182,212,.24);
    border-color: rgba(6,182,212,.75);
    box-shadow:
        0 0 36px rgba(6,182,212,.35),
        0 8px 20px rgba(6,182,212,.18),
        inset 0 1px 0 rgba(255,255,255,.12);
    transform: translateY(-2px);
}

.custom-nav-link--prev:hover   { transform: translateY(-2px) translateX(-3px); }
.custom-nav-link--overview:hover { transform: translateY(-2px) translateX(3px); }

.custom-nav-link svg {
    width: 18px;
    height: 18px;
    transition: transform .25s ease;
    flex-shrink: 0;
}

.custom-nav-link--prev:hover svg     { transform: translateX(-3px); }
.custom-nav-link--overview:hover svg { transform: translateX(3px); }

.custom-nav-link::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(-100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: rgba(10,14,30,.96);
    border: 1px solid rgba(255,255,255,.10);
    color: rgba(255,255,255,.85);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    white-space: nowrap;
    padding: 5px 12px;
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    z-index: 10;
}

.custom-nav-link:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ─── HERO INNER ─── */
.custom-hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    max-width: 700px;
}

.custom-tier-label {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #67e8f9;
    background: rgba(6,182,212,.12);
    border: 1px solid rgba(6,182,212,.35);
    box-shadow:
        0 0 18px rgba(6,182,212,.18),
        inset 0 1px 0 rgba(255,255,255,.07);
}

.custom-hero h1 {
    font-size: clamp(1.9rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0;
    background: linear-gradient(100deg, #ffffff 35%, rgba(6,182,212,.95) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.custom-subtitle {
    color: rgba(255,255,255,.60);
    font-size: 1.05rem;
    line-height: 1.75;
    max-width: 560px;
    margin: 0;
}

.custom-price-block {
    margin: 4px 0;
}

.custom-price {
    display: inline-block;
    padding: 10px 28px;
    border-radius: 12px;
    font-size: 1.55rem;
    font-weight: 800;
    color: #fff;
    background: rgb(7,109,130);
    border: 1px solid rgba(6,182,212,.40);
    box-shadow:
        0 0 32px rgba(6,182,212,.28),
        0 8px 20px rgba(7,109,130,.22);
}

/* ─── INCLUS + EXEMPLES ─── */
.custom-details {
    max-width: 1100px;
    margin: 0 auto;
    padding: 60px 20px;
}

.custom-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

.custom-card {
    padding: 32px 28px;
    border-radius: 20px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: relative;
    overflow: hidden;
    transition: border-color .3s ease, box-shadow .3s ease;
}

.custom-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
}

.custom-card--includes::before {
    background: linear-gradient(90deg, transparent, rgba(6,182,212,.80), transparent);
}

.custom-card--examples::before {
    background: linear-gradient(90deg, transparent, rgba(103,232,249,.30), transparent);
}

.custom-card--includes:hover {
    border-color: rgba(6,182,212,.25);
    box-shadow: 0 10px 32px rgba(6,182,212,.10);
}

.custom-card--examples:hover {
    border-color: rgba(103,232,249,.18);
    box-shadow: 0 10px 32px rgba(6,182,212,.07);
}

.custom-card h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.custom-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.custom-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.05);
    color: rgba(255,255,255,.68);
    font-size: .88rem;
    line-height: 1.55;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.custom-list li::before {
    content: "✓";
    color: #06b6d4;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
    font-size: .85rem;
}

.custom-list--examples li::before {
    content: "◆";
    color: rgba(103,232,249,.55);
    font-size: .55rem;
    margin-top: 4px;
}

.custom-card--includes .custom-list li:hover {
    background: rgba(6,182,212,.07);
    border-color: rgba(6,182,212,.18);
    color: rgba(255,255,255,.88);
}

.custom-card--examples .custom-list li:hover {
    background: rgba(103,232,249,.05);
    border-color: rgba(103,232,249,.12);
    color: rgba(255,255,255,.82);
}

/* ─── OPTIONS ─── */
.custom-options {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 20px 60px;
}

.custom-options-header {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 36px;
}

.custom-options-header h2 {
    font-size: clamp(1.35rem, 2.5vw, 1.85rem);
    font-weight: 700;
    margin: 0 0 10px;
    background: linear-gradient(100deg, #ffffff 35%, rgba(6,182,212,.95) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.custom-options-header p {
    color: rgba(255,255,255,.50);
    font-size: .92rem;
    line-height: 1.7;
}

.custom-options-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
}

.custom-options-grid .option-card             { grid-column: span 2; }
.custom-options-grid .option-card:nth-child(4) { grid-column: 2 / 4; }
.custom-options-grid .option-card:nth-child(5) { grid-column: 4 / 6; }

/* ─── option-card override cyan ─── */
.page-custom .option-card:hover {
    border-color: rgba(6,182,212,.20);
    box-shadow: 0 8px 24px rgba(6,182,212,.08);
}

.page-custom .option-card li::before {
    color: rgba(6,182,212,.72);
}

/* ─── CTA FINAL ─── */
.custom-cta {
    text-align: center;
    padding: 60px 20px 160px;
    max-width: 760px;
    margin: 0 auto;
}

.custom-cta h2 {
    font-size: clamp(1.45rem, 2.5vw, 2rem);
    font-weight: 700;
    margin: 0 0 14px;
    background: linear-gradient(100deg, #ffffff 35%, rgba(6,182,212,.95) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.custom-cta p {
    color: rgba(255,255,255,.55);
    font-size: .98rem;
    line-height: 1.75;
    max-width: 560px;
    margin: 0 auto 28px;
}

/* ─── BTN PRIMARY OVERRIDE (tier Sur mesure) ─── */
.page-custom .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 40px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .04em;
    border-radius: 999px;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(135deg, rgba(6,182,212,.85) 0%, rgba(7,109,130,.75) 100%);
    border: 1px solid rgba(6,182,212,.48);
    box-shadow:
        0 0 32px rgba(6,182,212,.28),
        0 8px 24px rgba(7,109,130,.20),
        inset 0 1px 0 rgba(255,255,255,.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
    transition: background .3s ease, box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}

.page-custom .btn-primary::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.10) 0%, transparent 60%);
    border-radius: inherit;
    pointer-events: none;
}

.page-custom .btn-primary::after {
    content: "→";
    font-size: .95rem;
    transition: transform .3s ease, opacity .3s ease;
    opacity: .7;
}

.page-custom .btn-primary:hover {
    background: linear-gradient(135deg, rgba(6,182,212,1) 0%, rgba(7,109,130,.95) 100%);
    border-color: rgba(6,182,212,.72);
    box-shadow:
        0 0 52px rgba(6,182,212,.45),
        0 12px 32px rgba(7,109,130,.28),
        inset 0 1px 0 rgba(255,255,255,.18);
    transform: translateY(-3px);
}

.page-custom .btn-primary:hover::after {
    transform: translateX(4px);
    opacity: 1;
}

.page-custom .section-block.is-visible .option-card {
    opacity: 1;
    transform: translateY(0);
}





/* ========================= hm.php ========================= */

/* ─── BACKGROUND FIXE ─── */
.page-hm::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        linear-gradient(rgba(0,0,0,.52), rgba(0,0,0,.52)),
        url("../image/bgsite.png") center / cover no-repeat;
    z-index: 0;
}

.page-hm > * {
    position: relative;
    z-index: 1;
}

/* ─── SCROLL REVEAL ─── */
.page-hm .section-block {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s ease, transform .7s ease;
}

.page-hm .section-block.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ─── HERO ─── */
.hm-hero {
    min-height: 55dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 140px 20px 80px;
    text-align: center;
}

.hm-hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    max-width: 760px;
}

.hm-page-label {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #67e8f9;
    background: rgba(6,182,212,.10);
    border: 1px solid rgba(6,182,212,.32);
    box-shadow: 0 0 16px rgba(6,182,212,.14);
}

.hm-hero h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0;
    background: linear-gradient(100deg, #ffffff 40%, rgba(6,182,212,.90) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ─── PILLS FEATURES ─── */
.hm-features-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.hm-features-pills li {
    padding: 5px 14px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    color: rgba(255,255,255,.70);
    background: rgba(6,182,212,.07);
    border: 1px solid rgba(6,182,212,.22);
    letter-spacing: .03em;
}

.hm-subtitle {
    color: rgba(255,255,255,.55);
    font-size: .98rem;
    line-height: 1.75;
    max-width: 580px;
    margin: 0;
}

/* ─── HERO CTA ─── */
.hm-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin-top: 4px;
}

.hm-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 999px;
    color: rgba(255,255,255,.78);
    text-decoration: none;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s ease;
}

.hm-btn-secondary:hover {
    color: #fff;
    background: rgba(6,182,212,.10);
    border-color: rgba(6,182,212,.40);
    transform: translateY(-2px);
}

/* ─── BTN PRIMARY OVERRIDE (cyan) ─── */
.page-hm .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 36px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .04em;
    border-radius: 999px;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(135deg, rgba(6,182,212,.80) 0%, rgba(14,165,233,.70) 100%);
    border: 1px solid rgba(6,182,212,.45);
    box-shadow:
        0 0 28px rgba(6,182,212,.22),
        0 8px 20px rgba(6,182,212,.14),
        inset 0 1px 0 rgba(255,255,255,.10);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
    transition: background .3s ease, box-shadow .3s ease, transform .3s ease;
}

.page-hm .btn-primary::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.10) 0%, transparent 60%);
    border-radius: inherit;
    pointer-events: none;
}

.page-hm .btn-primary::after {
    content: "→";
    font-size: .95rem;
    opacity: .7;
    transition: transform .3s ease, opacity .3s ease;
}

.page-hm .btn-primary:hover {
    background: linear-gradient(135deg, rgba(6,182,212,1) 0%, rgba(14,165,233,.90) 100%);
    box-shadow:
        0 0 44px rgba(6,182,212,.40),
        0 12px 28px rgba(6,182,212,.22),
        inset 0 1px 0 rgba(255,255,255,.16);
    transform: translateY(-3px);
}

.page-hm .btn-primary:hover::after {
    transform: translateX(4px);
    opacity: 1;
}

/* ─── PLANS SECTION ─── */
.hm-plans {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px 80px;
}

.hm-plans-header {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 48px;
}

.hm-plans-header h2 {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 800;
    margin: 0 0 10px;
    background: linear-gradient(100deg, #ffffff 40%, rgba(6,182,212,.88) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hm-plans-header p {
    color: rgba(255,255,255,.50);
    font-size: .95rem;
    line-height: 1.7;
}

/* ─── PLANS GRID ─── */
.hm-plans-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    align-items: stretch;
}

/* ─── PLAN CARD BASE ─── */
.hm-plan {
    display: flex;
    flex-direction: column;
    padding: 28px 24px 24px;
    border-radius: 20px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: relative;
    overflow: hidden;
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.hm-plan::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
}

.hm-plan:hover {
    transform: translateY(-6px);
}

/* ─── TIER COLORS ─── */
.hm-plan--basic::before {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
}
.hm-plan--basic:hover {
    border-color: rgba(255,255,255,.16);
    box-shadow: 0 16px 40px rgba(0,0,0,.30);
}

.hm-plan--essentiel::before {
    background: linear-gradient(90deg, transparent, rgba(59,130,246,.65), transparent);
}
.hm-plan--essentiel:hover {
    border-color: rgba(59,130,246,.28);
    box-shadow: 0 16px 40px rgba(59,130,246,.12);
}

.hm-plan--pro::before {
    background: linear-gradient(90deg, transparent, rgba(251,191,36,.85), transparent);
}
.hm-plan--pro {
    border-color: rgba(251,191,36,.20);
    box-shadow: 0 0 40px rgba(251,191,36,.08);
}
.hm-plan--pro:hover {
    border-color: rgba(251,191,36,.40);
    box-shadow: 0 16px 50px rgba(251,191,36,.18);
}

.hm-plan--premium::before {
    background: linear-gradient(90deg, transparent, rgba(6,182,212,.70), transparent);
}
.hm-plan--premium:hover {
    border-color: rgba(6,182,212,.25);
    box-shadow: 0 16px 40px rgba(6,182,212,.10);
}

/* ─── RIBBON ─── */
.hm-plan-ribbon {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(251,191,36,.75);
    border: 1px solid rgba(251,191,36,.48);
    box-shadow: 0 4px 14px rgba(251,191,36,.28);
}

/* ─── PLAN TOP ─── */
.hm-plan-top {
    margin-bottom: 20px;
}

.hm-plan-tier {
    display: inline-block;
    font-size: .70rem;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.hm-plan--basic    .hm-plan-tier { color: rgba(255,255,255,.45); }
.hm-plan--essentiel .hm-plan-tier { color: #7aa2ff; }
.hm-plan--pro      .hm-plan-tier { color: #fde68a; }
.hm-plan--premium  .hm-plan-tier { color: #67e8f9; }

.hm-plan-top h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 14px;
    line-height: 1.3;
}

.hm-plan-tagline {
    font-size: .80rem;
    color: rgba(255,255,255,.40);
    margin: 6px 0 0;
    font-style: italic;
}

/* ─── PRIX ─── */
.hm-plan-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding: 10px 14px;
    border-radius: 10px;
    width: fit-content;
}

.hm-plan--basic    .hm-plan-price { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.hm-plan--essentiel .hm-plan-price { background: rgba(59,130,246,.10);  border: 1px solid rgba(59,130,246,.20); }
.hm-plan--pro      .hm-plan-price { background: rgba(251,191,36,.12);  border: 1px solid rgba(251,191,36,.22); }
.hm-plan--premium  .hm-plan-price { background: rgba(6,182,212,.12);   border: 1px solid rgba(6,182,212,.22); }

.hm-price-amount {
    font-size: 1.4rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

.hm-price-currency {
    font-size: .75rem;
    font-weight: 700;
    color: rgba(255,255,255,.55);
    margin-bottom: 2px;
}

.hm-price-period {
    font-size: .75rem;
    color: rgba(255,255,255,.40);
}

/* ─── PLAN LIST ─── */
.hm-plan-list {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.hm-plan-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: .84rem;
    color: rgba(255,255,255,.65);
    line-height: 1.5;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(255,255,255,.04);
    transition: color .2s ease, background .2s ease;
}

.hm-plan-list li::before {
    content: "✓";
    font-size: .78rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
}

.hm-plan--basic    .hm-plan-list li::before { color: rgba(255,255,255,.30); }
.hm-plan--essentiel .hm-plan-list li::before { color: #3b82f6; }
.hm-plan--pro      .hm-plan-list li::before { color: #fbbf24; }
.hm-plan--premium  .hm-plan-list li::before { color: #06b6d4; }

.hm-plan:hover .hm-plan-list li {
    color: rgba(255,255,255,.80);
}

/* ─── PLAN CTA ─── */
.hm-plan-cta {
    display: block;
    text-align: center;
    padding: 10px 20px;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 700;
    text-decoration: none;
    color: rgba(255,255,255,.75);
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    transition: color .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.hm-plan--pro .hm-plan-cta {
    color: #fff;
    background: rgba(251,191,36,.16);
    border-color: rgba(251,191,36,.40);
    box-shadow: 0 4px 16px rgba(251,191,36,.12);
}

.hm-plan-cta:hover {
    color: #fff;
    background: rgba(251,191,36,.20);
    border-color: rgba(251,191,36,.55);
    box-shadow: 0 6px 20px rgba(251,191,36,.20);
}

.hm-plan--basic    .hm-plan-cta:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); box-shadow: none; }
.hm-plan--essentiel .hm-plan-cta:hover { background: rgba(59,130,246,.14); border-color: rgba(59,130,246,.40); box-shadow: 0 6px 20px rgba(59,130,246,.12); }
.hm-plan--premium  .hm-plan-cta:hover { background: rgba(6,182,212,.14); border-color: rgba(6,182,212,.40); box-shadow: 0 6px 20px rgba(6,182,212,.12); }

/* ─── CTA FINAL ─── */
.hm-cta {
    text-align: center;
    padding: 60px 20px 220px;
    max-width: 720px;
    margin: 0 auto;
}

.hm-cta h2 {
    font-size: clamp(1.5rem, 2.8vw, 2.1rem);
    font-weight: 700;
    margin: 0 0 14px;
    background: linear-gradient(100deg, #ffffff 40%, rgba(6,182,212,.88) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hm-cta p {
    color: rgba(255,255,255,.55);
    font-size: .98rem;
    line-height: 1.75;
    max-width: 520px;
    margin: 0 auto 28px;
}

.hm-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}




/* ========================= hebergement.php ========================= */

/* ─── BACKGROUND FIXE ─── */
.page-heberg::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        linear-gradient(rgba(0,0,0,.52), rgba(0,0,0,.52)),
        url("../image/bgsite.png") center / cover no-repeat;
    z-index: 0;
}

.page-heberg > * {
    position: relative;
    z-index: 1;
}

/* ─── SCROLL REVEAL ─── */
.page-heberg .section-block {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s ease, transform .7s ease;
}

.page-heberg .section-block.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ─── LAYOUT INNER COMMUN ─── */
.heberg-section-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 2rem);
}

/* ─── HERO ─── */
.heberg-hero {
    min-height: 55dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 140px 20px 80px;
    text-align: center;
}

.heberg-hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    max-width: 760px;
}

.heberg-page-label {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #67e8f9;
    background: rgba(6,182,212,.10);
    border: 1px solid rgba(6,182,212,.32);
    box-shadow: 0 0 16px rgba(6,182,212,.14);
}

.heberg-hero h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0;
    background: linear-gradient(100deg, #ffffff 40%, rgba(6,182,212,.90) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.heberg-hero-sub {
    color: rgba(255,255,255,.58);
    font-size: .98rem;
    line-height: 1.75;
    max-width: 620px;
    margin: 0;
}

.heberg-impact-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.heberg-impact-list li {
    padding: 6px 16px;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    color: rgba(255,255,255,.68);
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.10);
}

.heberg-hero-cta-line {
    font-size: .92rem;
    font-weight: 600;
    color: rgba(6,182,212,.85);
    margin: 0;
    padding: 10px 20px;
    border-left: 2px solid rgba(6,182,212,.50);
    background: rgba(6,182,212,.06);
    border-radius: 0 8px 8px 0;
    text-align: left;
}

/* ─── INFOMANIAK ─── */
.heberg-infomaniak {
    padding: 70px 0;
    border-top: 1px solid rgba(255,255,255,.05);
}

.heberg-infomaniak .heberg-section-inner {
    display: flex;
    align-items: center;
    gap: 60px;
}

.heberg-section-text {
    flex: 1;
    min-width: 0;
}

.heberg-section-text h2 {
    font-size: clamp(1.3rem, 2.5vw, 1.85rem);
    font-weight: 700;
    margin: 0 0 14px;
    background: linear-gradient(100deg, #ffffff 40%, rgba(6,182,212,.88) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.heberg-section-text p {
    color: rgba(255,255,255,.55);
    font-size: .95rem;
    line-height: 1.75;
    margin: 0;
}

.heberg-badges {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
    width: 340px;
}

.heberg-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    font-size: .84rem;
    font-weight: 600;
    color: rgba(255,255,255,.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: border-color .25s ease, background .25s ease;
}

.heberg-badge:hover {
    background: rgba(6,182,212,.07);
    border-color: rgba(6,182,212,.22);
}

.heberg-badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .04em;
    flex-shrink: 0;
    background: rgba(11,110,253,.12);
    color: var(--brand-color);
    border: 1px solid rgba(11,110,253,.2);
}

.heberg-badge--swiss   .heberg-badge-icon { background: rgba(220,38,38,.10);  color: #f87171; border-color: rgba(220,38,38,.22); }
.heberg-badge--privacy .heberg-badge-icon { background: rgba(59,130,246,.12); color: #7aa2ff; border-color: rgba(59,130,246,.22); }
.heberg-badge--speed   .heberg-badge-icon { background: rgba(251,191,36,.10); color: #fbbf24; border-color: rgba(251,191,36,.22); }
.heberg-badge--eco     .heberg-badge-icon { background: rgba(34,197,94,.10);  color: #4ade80; border-color: rgba(34,197,94,.22); }

/* ─── SECTION HEADER COMMUN ─── */
.heberg-section-header {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 40px;
}

.heberg-section-header h2 {
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-weight: 700;
    margin: 0 0 10px;
    background: linear-gradient(100deg, #ffffff 40%, rgba(6,182,212,.88) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.heberg-section-header p {
    color: rgba(255,255,255,.48);
    font-size: .92rem;
    line-height: 1.7;
}

/* ─── PILIERS ─── */
.heberg-pillars {
    padding: 70px 0;
    border-top: 1px solid rgba(255,255,255,.05);
}

.heberg-pillars-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.heberg-pillar {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 24px 22px;
    border-radius: 16px;
    background: rgba(255,255,255,.028);
    border: 1px solid rgba(255,255,255,.06);
    position: relative;
    overflow: hidden;
    transition: background .25s ease, border-color .25s ease, transform .25s ease;
}

.heberg-pillar::before {
    content: "";
    position: absolute;
    left: 0; top: 15%; bottom: 15%;
    width: 3px;
    border-radius: 0 2px 2px 0;
    opacity: .55;
    transition: opacity .25s ease, top .25s ease, bottom .25s ease;
}

.heberg-pillar--perf::before  { background: #06b6d4; }
.heberg-pillar--sec::before   { background: #3b82f6; }
.heberg-pillar--seo::before   { background: #8b5cf6; }
.heberg-pillar--scale::before { background: #06b6d4; }

.heberg-pillar:hover {
    background: rgba(255,255,255,.048);
    border-color: rgba(255,255,255,.10);
    transform: translateX(5px);
}

.heberg-pillar:hover::before {
    opacity: 1;
    top: 6%;
    bottom: 6%;
}

.heberg-pillar-icon {
    font-size: 1.6rem;
    font-weight: 800;
    flex-shrink: 0;
    margin-top: 2px;
    line-height: 1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: rgba(6,182,212,.55);
}

.heberg-pillar--sec   .heberg-pillar-icon { color: rgba(59,130,246,.55); }
.heberg-pillar--seo   .heberg-pillar-icon { color: rgba(139,92,246,.55); }
.heberg-pillar--scale .heberg-pillar-icon { color: rgba(6,182,212,.55); }

.heberg-pillar-body h3 {
    font-size: .96rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 6px;
}

.heberg-pillar-body p {
    font-size: .86rem;
    color: rgba(255,255,255,.52);
    line-height: 1.65;
    margin: 0;
}

/* ─── INCLUS ─── */
.heberg-includes {
    padding: 70px 0;
    border-top: 1px solid rgba(255,255,255,.05);
}

.heberg-includes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.heberg-inc-card {
    padding: 26px 22px;
    border-radius: 18px;
    background: rgba(255,255,255,.028);
    border: 1px solid rgba(255,255,255,.06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
    transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

.heberg-inc-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(6,182,212,.55), transparent);
}

.heberg-inc-card:hover {
    border-color: rgba(6,182,212,.20);
    box-shadow: 0 10px 28px rgba(6,182,212,.08);
    transform: translateY(-4px);
}

.heberg-inc-icon {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 12px;
    line-height: 1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: rgba(6,182,212,.45);
    display: block;
}

.heberg-inc-card h3 {
    font-size: .95rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.heberg-inc-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.heberg-inc-card li {
    font-size: .84rem;
    color: rgba(255,255,255,.58);
    padding: 6px 8px 6px 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.5;
}

.heberg-inc-card li::before {
    content: "✓";
    color: #06b6d4;
    font-size: .78rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ─── PHILOSOPHIE ─── */
.heberg-philosophy {
    padding: 70px 0;
    border-top: 1px solid rgba(255,255,255,.05);
}

.heberg-philosophy-card {
    max-width: 780px;
    margin: 0 auto;
    padding: 40px 36px;
    border-radius: 20px;
    background: rgba(255,255,255,.032);
    border: 1px solid rgba(255,255,255,.07);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: relative;
    overflow: hidden;
}

.heberg-philosophy-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(to right, transparent, rgba(6,182,212,.55), rgba(59,130,246,.40), transparent);
}

.heberg-philosophy-card h2 {
    font-size: clamp(1.3rem, 2.2vw, 1.75rem);
    font-weight: 700;
    margin: 0 0 24px;
    background: linear-gradient(100deg, #ffffff 40%, rgba(6,182,212,.88) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.heberg-philo-points {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}

.heberg-philo-point {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .95rem;
    font-weight: 600;
    color: rgba(255,255,255,.85);
}

.heberg-philo-arrow {
    color: #06b6d4;
    font-weight: 700;
    flex-shrink: 0;
}

.heberg-philo-sub {
    font-size: .88rem;
    color: rgba(255,255,255,.40);
    margin: 0 0 12px;
    font-style: italic;
}

.heberg-philo-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.heberg-philo-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .88rem;
    color: rgba(255,255,255,.55);
    padding: 8px 14px;
    border-radius: 8px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.05);
}

.heberg-philo-list li::before {
    content: "✕";
    color: rgba(239,68,68,.65);
    font-size: .75rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* ─── MONITORING BONUS ─── */
.heberg-monitoring {
    padding: 70px 0;
    border-top: 1px solid rgba(255,255,255,.05);
}

.heberg-monitoring-inner {
    display: flex;
    align-items: center;
    gap: 60px;
    padding: 36px 36px;
    border-radius: 20px;
    background: rgba(6,182,212,.05);
    border: 1px solid rgba(6,182,212,.16);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.heberg-monitoring-text {
    flex: 1;
    min-width: 0;
}

.heberg-monitoring-text h2 {
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    font-weight: 700;
    margin: 0 0 10px;
    background: linear-gradient(100deg, #ffffff 40%, rgba(6,182,212,.88) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.heberg-monitoring-text p {
    color: rgba(255,255,255,.52);
    font-size: .92rem;
    line-height: 1.7;
    margin: 0;
}

.heberg-monitoring-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
    min-width: 260px;
}

.heberg-monitoring-list li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: .88rem;
    font-weight: 600;
    color: rgba(255,255,255,.72);
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(6,182,212,.07);
    border: 1px solid rgba(6,182,212,.18);
}

.heberg-monitoring-list li::before {
    content: "→";
    color: #06b6d4;
    font-weight: 700;
    flex-shrink: 0;
}

/* ─── CTA FINAL ─── */
.heberg-cta {
    padding: 70px 20px 220px;
    border-top: 1px solid rgba(255,255,255,.05);
}

.heberg-cta-inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.heberg-cta-inner h2 {
    font-size: clamp(1.5rem, 2.8vw, 2.1rem);
    font-weight: 700;
    margin: 0 0 14px;
    background: linear-gradient(100deg, #ffffff 40%, rgba(6,182,212,.88) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.heberg-cta-inner p {
    color: rgba(255,255,255,.55);
    font-size: .98rem;
    line-height: 1.75;
    max-width: 520px;
    margin: 0 auto 28px;
}

.heberg-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

.heberg-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 999px;
    color: rgba(255,255,255,.78);
    text-decoration: none;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s ease;
}

.heberg-btn-secondary:hover {
    color: #fff;
    background: rgba(6,182,212,.10);
    border-color: rgba(6,182,212,.40);
    transform: translateY(-2px);
}

/* ─── BTN PRIMARY OVERRIDE ─── */
.page-heberg .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 36px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .04em;
    border-radius: 999px;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(135deg, rgba(6,182,212,.80) 0%, rgba(14,165,233,.70) 100%);
    border: 1px solid rgba(6,182,212,.45);
    box-shadow:
        0 0 28px rgba(6,182,212,.22),
        0 8px 20px rgba(6,182,212,.14),
        inset 0 1px 0 rgba(255,255,255,.10);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
    transition: background .3s ease, box-shadow .3s ease, transform .3s ease;
}

.page-heberg .btn-primary::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.10) 0%, transparent 60%);
    border-radius: inherit;
    pointer-events: none;
}

.page-heberg .btn-primary::after {
    content: "→";
    font-size: .95rem;
    opacity: .7;
    transition: transform .3s ease, opacity .3s ease;
}

.page-heberg .btn-primary:hover {
    background: linear-gradient(135deg, rgba(6,182,212,1) 0%, rgba(14,165,233,.90) 100%);
    box-shadow:
        0 0 44px rgba(6,182,212,.40),
        0 12px 28px rgba(6,182,212,.22),
        inset 0 1px 0 rgba(255,255,255,.16);
    transform: translateY(-3px);
}

.page-heberg .btn-primary:hover::after {
    transform: translateX(4px);
    opacity: 1;
}


/* ========================= maintenance.php ========================= */

/* ─── BACKGROUND FIXE ─── */
.page-maint::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        linear-gradient(rgba(0,0,0,.52), rgba(0,0,0,.52)),
        url("../image/bgsite.png") center / cover no-repeat;
    z-index: 0;
}

.page-maint > * {
    position: relative;
    z-index: 1;
}

/* ─── SCROLL REVEAL ─── */
.page-maint .section-block {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s ease, transform .7s ease;
}

.page-maint .section-block.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ─── LAYOUT INNER COMMUN ─── */
.maint-section-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 2rem);
}

/* ─── SECTION HEADER ─── */
.maint-section-header {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 40px;
}

.maint-section-header h2 {
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-weight: 700;
    margin: 0 0 10px;
    background: linear-gradient(100deg, #ffffff 40%, rgba(6,182,212,.88) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.maint-section-header p {
    color: rgba(255,255,255,.48);
    font-size: .92rem;
    line-height: 1.7;
}

/* ─── HERO ─── */
.maint-hero {
    min-height: 55dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 140px 20px 80px;
    text-align: center;
}

.maint-hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    max-width: 760px;
}

.maint-page-label {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #67e8f9;
    background: rgba(6,182,212,.10);
    border: 1px solid rgba(6,182,212,.32);
    box-shadow: 0 0 16px rgba(6,182,212,.14);
}

.maint-hero h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0;
    background: linear-gradient(100deg, #ffffff 40%, rgba(6,182,212,.90) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.maint-hero-sub {
    color: rgba(255,255,255,.58);
    font-size: .98rem;
    line-height: 1.75;
    max-width: 620px;
    margin: 0;
}

.maint-impact-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.maint-impact-list li {
    padding: 6px 16px;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    color: rgba(239,68,68,.80);
    background: rgba(239,68,68,.06);
    border: 1px solid rgba(239,68,68,.18);
}

.maint-hero-tagline {
    font-size: .92rem;
    font-weight: 600;
    color: rgba(6,182,212,.85);
    margin: 0;
    padding: 10px 20px;
    border-left: 2px solid rgba(6,182,212,.50);
    background: rgba(6,182,212,.06);
    border-radius: 0 8px 8px 0;
    text-align: left;
}

/* ─── POURQUOI ─── */
.maint-why {
    padding: 70px 0;
    border-top: 1px solid rgba(255,255,255,.05);
}

.maint-why-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.maint-why-card {
    padding: 28px 26px;
    border-radius: 18px;
    background: rgba(255,255,255,.028);
    border: 1px solid rgba(255,255,255,.06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.maint-why-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
}

.maint-why-card--reasons::before {
    background: linear-gradient(90deg, transparent, rgba(6,182,212,.55), transparent);
}

.maint-why-card--risks::before {
    background: linear-gradient(90deg, transparent, rgba(239,68,68,.45), transparent);
}

.maint-why-card h3 {
    font-size: .96rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 16px;
}

.maint-tech-list,
.maint-risk-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.maint-tech-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .88rem;
    color: rgba(255,255,255,.65);
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(6,182,212,.05);
    border: 1px solid rgba(6,182,212,.12);
}

.maint-tech-list li::before {
    content: "▸";
    color: #06b6d4;
    font-size: .72rem;
    flex-shrink: 0;
}

.maint-risk-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .88rem;
    color: rgba(255,255,255,.62);
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(239,68,68,.04);
    border: 1px solid rgba(239,68,68,.10);
}

.maint-risk-list li::before {
    content: "✕";
    color: rgba(239,68,68,.70);
    font-size: .72rem;
    font-weight: 700;
    flex-shrink: 0;
}

.maint-why-tagline {
    margin-top: 16px;
    font-size: .86rem;
    font-weight: 600;
    color: rgba(239,68,68,.75);
    font-style: italic;
}

/* ─── PILIERS SÉCURITÉ + PERF ─── */
.maint-pillars {
    padding: 70px 0;
    border-top: 1px solid rgba(255,255,255,.05);
}

.maint-pillars-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.maint-pillar {
    padding: 30px 26px;
    border-radius: 18px;
    background: rgba(255,255,255,.028);
    border: 1px solid rgba(255,255,255,.06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    overflow: hidden;
}

.maint-pillar::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
}

.maint-pillar--sec::before {
    background: linear-gradient(90deg, transparent, rgba(59,130,246,.65), transparent);
}

.maint-pillar--perf::before {
    background: linear-gradient(90deg, transparent, rgba(6,182,212,.65), transparent);
}

.maint-pillar-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.maint-pillar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 7px;
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .06em;
    flex-shrink: 0;
    background: rgba(11,110,253,.10);
    color: var(--brand-color);
    border: 1px solid rgba(11,110,253,.20);
}

.maint-pillar--sec  .maint-pillar-icon { background: rgba(59,130,246,.10); color: #7aa2ff; border-color: rgba(59,130,246,.22); }
.maint-pillar--perf .maint-pillar-icon { background: rgba(251,191,36,.10); color: #fbbf24; border-color: rgba(251,191,36,.22); }

.maint-pillar-head h2 {
    font-size: clamp(1.1rem, 1.8vw, 1.4rem);
    font-weight: 700;
    margin: 0;
    background: linear-gradient(100deg, #ffffff 40%, rgba(6,182,212,.88) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.maint-pillar > p {
    font-size: .90rem;
    color: rgba(255,255,255,.52);
    line-height: 1.7;
    margin: 0;
}

.maint-pillar-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.maint-pillar-list li {
    font-size: .86rem;
    color: rgba(255,255,255,.55);
    padding: 6px 10px 6px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.maint-pillar-list li::before {
    content: "–";
    color: rgba(255,255,255,.25);
    flex-shrink: 0;
}

.maint-pillar-response {
    padding: 14px 16px;
    border-radius: 10px;
    background: rgba(6,182,212,.06);
    border: 1px solid rgba(6,182,212,.14);
}

.maint-pillar-response-label {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #06b6d4;
    margin-bottom: 10px;
}

.maint-pillar-response ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.maint-pillar-response li {
    font-size: .86rem;
    color: rgba(255,255,255,.68);
    display: flex;
    align-items: flex-start;
    gap: 7px;
}

.maint-pillar-response li::before {
    content: "✓";
    color: #06b6d4;
    font-size: .76rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
}

.maint-pillar-tagline {
    font-size: .88rem;
    font-weight: 600;
    color: rgba(6,182,212,.80);
    margin: 0;
    font-style: italic;
}

/* ─── INCLUS ─── */
.maint-includes {
    padding: 70px 0;
    border-top: 1px solid rgba(255,255,255,.05);
}

.maint-includes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.maint-inc-card {
    padding: 26px 22px;
    border-radius: 18px;
    background: rgba(255,255,255,.028);
    border: 1px solid rgba(255,255,255,.06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
    transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

.maint-inc-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(6,182,212,.55), transparent);
}

.maint-inc-card:hover {
    border-color: rgba(6,182,212,.20);
    box-shadow: 0 10px 28px rgba(6,182,212,.08);
    transform: translateY(-4px);
}

.maint-inc-icon {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 12px;
    line-height: 1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: rgba(6,182,212,.45);
    display: block;
}

.maint-inc-card h3 {
    font-size: .95rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.maint-inc-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.maint-inc-card li {
    font-size: .84rem;
    color: rgba(255,255,255,.58);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.5;
}

.maint-inc-card li::before {
    content: "✓";
    color: #06b6d4;
    font-size: .78rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ─── APPROCHE ─── */
.maint-approach {
    padding: 70px 0;
    border-top: 1px solid rgba(255,255,255,.05);
}

.maint-approach-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.maint-approach-card {
    padding: 32px 28px;
    border-radius: 18px;
    background: rgba(255,255,255,.028);
    border: 1px solid rgba(255,255,255,.06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    overflow: hidden;
}

.maint-approach-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
}

.maint-approach-card--results::before {
    background: linear-gradient(90deg, transparent, rgba(6,182,212,.55), transparent);
}

.maint-approach-card--hosting::before {
    background: linear-gradient(90deg, transparent, rgba(59,130,246,.45), transparent);
}

.maint-approach-card h2 {
    font-size: clamp(1.1rem, 1.8vw, 1.4rem);
    font-weight: 700;
    margin: 0;
    background: linear-gradient(100deg, #ffffff 40%, rgba(6,182,212,.88) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.maint-approach-card > p {
    font-size: .90rem;
    color: rgba(255,255,255,.52);
    line-height: 1.7;
    margin: 0;
}

.maint-approach-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.maint-approach-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .88rem;
    color: rgba(255,255,255,.70);
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(6,182,212,.05);
    border: 1px solid rgba(6,182,212,.12);
}

.maint-approach-list li::before {
    content: "→";
    color: #06b6d4;
    font-weight: 700;
    flex-shrink: 0;
}

.maint-approach-tagline {
    font-size: .88rem;
    font-weight: 600;
    color: rgba(6,182,212,.80);
    margin: 0;
    font-style: italic;
}

.maint-hosting-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .88rem;
    font-weight: 600;
    color: #93c5fd;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid rgba(59,130,246,.28);
    background: rgba(59,130,246,.07);
    margin-top: 4px;
    transition: background .25s ease, border-color .25s ease, color .25s ease;
}

.maint-hosting-link::after {
    content: "→";
    font-size: .80rem;
}

.maint-hosting-link:hover {
    background: rgba(59,130,246,.14);
    border-color: rgba(59,130,246,.45);
    color: #fff;
}

/* ─── SÉRÉNITÉ ─── */
.maint-serenity {
    padding: 70px 0;
    border-top: 1px solid rgba(255,255,255,.05);
}

.maint-serenity-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.maint-serenity-block,
.maint-adapted-block {
    padding: 30px 26px;
    border-radius: 18px;
    background: rgba(255,255,255,.028);
    border: 1px solid rgba(255,255,255,.06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    overflow: hidden;
}

.maint-serenity-block::before,
.maint-adapted-block::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(6,182,212,.50), transparent);
}

.maint-serenity-block h2,
.maint-adapted-block h2 {
    font-size: clamp(1.1rem, 1.8vw, 1.4rem);
    font-weight: 700;
    margin: 0;
    background: linear-gradient(100deg, #ffffff 40%, rgba(6,182,212,.88) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.maint-serenity-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.maint-serenity-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .88rem;
    color: rgba(255,255,255,.68);
    padding: 9px 12px;
    border-radius: 8px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.05);
}

.maint-serenity-list li::before {
    content: "✓";
    color: #06b6d4;
    font-size: .76rem;
    font-weight: 700;
    flex-shrink: 0;
}

.maint-serenity-tagline {
    font-size: .88rem;
    font-weight: 600;
    color: rgba(6,182,212,.80);
    margin: 0;
    font-style: italic;
}

.maint-adapted-block > p {
    font-size: .90rem;
    color: rgba(255,255,255,.52);
    line-height: 1.7;
    margin: 0;
}

.maint-adapted-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.maint-adapted-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .88rem;
    color: rgba(255,255,255,.62);
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.05);
    line-height: 1.5;
}

.maint-adapted-level {
    font-size: .70rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #06b6d4;
    background: rgba(6,182,212,.10);
    border: 1px solid rgba(6,182,212,.22);
    border-radius: 999px;
    padding: 2px 9px;
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ─── BONUS ─── */
.maint-bonus {
    padding: 70px 0;
    border-top: 1px solid rgba(255,255,255,.05);
}

.maint-bonus-card {
    max-width: 760px;
    margin: 0 auto;
    padding: 40px 36px;
    border-radius: 20px;
    background: rgba(6,182,212,.05);
    border: 1px solid rgba(6,182,212,.20);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    position: relative;
    overflow: hidden;
}

.maint-bonus-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(to right, transparent, rgba(6,182,212,.75), rgba(14,165,233,.55), transparent);
}

.maint-bonus-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 14px;
    border-radius: 999px;
    font-size: .70rem;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: #67e8f9;
    background: rgba(6,182,212,.12);
    border: 1px solid rgba(6,182,212,.35);
    box-shadow: 0 0 16px rgba(6,182,212,.15);
}

.maint-bonus-card h2 {
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    font-weight: 700;
    margin: 0;
    background: linear-gradient(100deg, #ffffff 40%, rgba(6,182,212,.88) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.maint-bonus-card > p {
    color: rgba(255,255,255,.52);
    font-size: .92rem;
    line-height: 1.7;
    max-width: 540px;
    margin: 0;
}

.maint-bonus-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 480px;
    text-align: left;
}

.maint-bonus-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .90rem;
    font-weight: 500;
    color: rgba(255,255,255,.75);
    padding: 10px 16px;
    border-radius: 10px;
    background: rgba(6,182,212,.07);
    border: 1px solid rgba(6,182,212,.16);
}

.maint-bonus-list li::before {
    content: "→";
    color: #06b6d4;
    font-weight: 700;
    flex-shrink: 0;
}

.maint-bonus-tagline {
    font-size: .90rem;
    font-weight: 600;
    color: rgba(6,182,212,.85);
    margin: 0;
    font-style: italic;
}

/* ─── CTA FINAL ─── */
.maint-cta {
    padding: 70px 20px 220px;
    border-top: 1px solid rgba(255,255,255,.05);
}

.maint-cta-inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.maint-cta-inner h2 {
    font-size: clamp(1.5rem, 2.8vw, 2.1rem);
    font-weight: 700;
    margin: 0 0 14px;
    background: linear-gradient(100deg, #ffffff 40%, rgba(6,182,212,.88) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.maint-cta-inner p {
    color: rgba(255,255,255,.55);
    font-size: .98rem;
    line-height: 1.75;
    max-width: 520px;
    margin: 0 auto 28px;
}

.maint-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

.maint-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 999px;
    color: rgba(255,255,255,.78);
    text-decoration: none;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s ease;
}

.maint-btn-secondary:hover {
    color: #fff;
    background: rgba(6,182,212,.10);
    border-color: rgba(6,182,212,.40);
    transform: translateY(-2px);
}

/* ─── BTN PRIMARY OVERRIDE ─── */
.page-maint .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 36px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .04em;
    border-radius: 999px;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(135deg, rgba(6,182,212,.80) 0%, rgba(14,165,233,.70) 100%);
    border: 1px solid rgba(6,182,212,.45);
    box-shadow:
        0 0 28px rgba(6,182,212,.22),
        0 8px 20px rgba(6,182,212,.14),
        inset 0 1px 0 rgba(255,255,255,.10);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
    transition: background .3s ease, box-shadow .3s ease, transform .3s ease;
}

.page-maint .btn-primary::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.10) 0%, transparent 60%);
    border-radius: inherit;
    pointer-events: none;
}

.page-maint .btn-primary::after {
    content: "→";
    font-size: .95rem;
    opacity: .7;
    transition: transform .3s ease, opacity .3s ease;
}

.page-maint .btn-primary:hover {
    background: linear-gradient(135deg, rgba(6,182,212,1) 0%, rgba(14,165,233,.90) 100%);
    box-shadow:
        0 0 44px rgba(6,182,212,.40),
        0 12px 28px rgba(6,182,212,.22),
        inset 0 1px 0 rgba(255,255,255,.16);
    transform: translateY(-3px);
}

.page-maint .btn-primary:hover::after {
    transform: translateX(4px);
    opacity: 1;
}

/* ========================= Navigation inter-pages HM ========================= */

/* ─── Position relative sur les 3 heroes ─── */
.hm-hero,
.heberg-hero,
.maint-hero {
    position: relative;
    padding-top: 200px;
}

/* ─── NAV ─── */
.hmg-nav {
    position: absolute;
    top: clamp(90px, 12vh, 120px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(680px, calc(100% - 40px));
    z-index: 2;
}

.hmg-nav-spacer {
    width: 120px;
    flex-shrink: 0;
}

/* ─── LIENS ─── */
.hmg-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgba(255,255,255,.72);
    text-decoration: none;
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid rgba(6,182,212,.38);
    background: rgba(6,182,212,.09);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 0 14px rgba(6,182,212,.10);
    position: relative;
    transition: color .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease, transform .25s ease;
}

.hmg-nav-link:hover {
    color: #fff;
    border-color: rgba(6,182,212,.68);
    background: rgba(6,182,212,.18);
    box-shadow: 0 0 24px rgba(6,182,212,.26);
}

.hmg-nav-link--prev:hover { transform: translateX(-3px); }
.hmg-nav-link--next:hover { transform: translateX(3px); }

.hmg-nav-link svg {
    transition: transform .25s ease;
    flex-shrink: 0;
}

.hmg-nav-link--prev:hover svg { transform: translateX(-2px); }
.hmg-nav-link--next:hover svg { transform: translateX(2px); }

/* ─── TOOLTIP ─── */
.hmg-nav-link::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(-100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: rgba(10,14,30,.96);
    border: 1px solid rgba(255,255,255,.10);
    color: rgba(255,255,255,.85);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    white-space: nowrap;
    padding: 5px 12px;
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    z-index: 10;
}

.hmg-nav-link:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(8px);
}

/* ─── TRACK ─── */
.hmg-offer-track {
    display: flex;
    align-items: center;
    gap: 6px;
}

.hmg-track-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,.20);
    border: 1px solid rgba(255,255,255,.16);
    flex-shrink: 0;
}

.hmg-track-dot--active {
    width: 10px;
    height: 10px;
    background: #06b6d4;
    border-color: rgba(6,182,212,.80);
    box-shadow: 0 0 10px rgba(6,182,212,.68);
}

.hmg-track-line {
    width: 28px;
    height: 1px;
    background: rgba(255,255,255,.18);
    flex-shrink: 0;
}




/* ─── HMG-NAV COULEUR INDIGO pour pages conseil ─── */
.page-conseil .hmg-nav-link {
    border-color: rgba(99,102,241,.38);
    background: rgba(99,102,241,.09);
    box-shadow: 0 0 14px rgba(99,102,241,.10);
}

.page-conseil .hmg-nav-link:hover {
    border-color: rgba(99,102,241,.68);
    background: rgba(99,102,241,.16);
    box-shadow: 0 0 20px rgba(99,102,241,.20);
}

.page-conseil .hmg-track-dot--active {
    background: #6366f1;
    border-color: rgba(99,102,241,.80);
    box-shadow: 0 0 10px rgba(99,102,241,.68);
}


/* ========================= conseil.php ========================= */

/* ─── BACKGROUND FIXE ─── */
.page-conseil::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        linear-gradient(rgba(0,0,0,.52), rgba(0,0,0,.52)),
        url("../image/bgsite.png") center / cover no-repeat;
    z-index: 0;
}

.page-conseil > * {
    position: relative;
    z-index: 1;
}

/* ─── SCROLL REVEAL ─── */
.page-conseil .section-block {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s ease, transform .7s ease;
}

.page-conseil .section-block.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ─── LAYOUT INNER COMMUN ─── */
.conseil-section-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 2rem);
}

/* ─── SECTION HEADER ─── */
.conseil-section-header {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 40px;
}

.conseil-section-header h2 {
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-weight: 700;
    margin: 0 0 10px;
    background: linear-gradient(100deg, #ffffff 40%, rgba(99,102,241,.90) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.conseil-section-header p {
    color: rgba(255,255,255,.48);
    font-size: .92rem;
    line-height: 1.7;
}

/* ─── HERO ─── */
.conseil-hero {
    min-height: 55dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 140px 20px 80px;
    text-align: center;
}

.conseil-hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    max-width: 760px;
    margin-top: 48px;
}

.conseil-page-label {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #a5b4fc;
    background: rgba(99,102,241,.10);
    border: 1px solid rgba(99,102,241,.32);
    box-shadow: 0 0 16px rgba(99,102,241,.14);
}

.conseil-hero h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0;
    background: linear-gradient(100deg, #ffffff 40%, rgba(99,102,241,.90) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.conseil-hero-sub {
    color: rgba(255,255,255,.58);
    font-size: .98rem;
    line-height: 1.75;
    max-width: 620px;
    margin: 0;
}

.conseil-impact-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.conseil-impact-list li {
    padding: 6px 16px;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    color: rgba(165,180,252,.85);
    background: rgba(99,102,241,.08);
    border: 1px solid rgba(99,102,241,.22);
}

.conseil-hero-tagline {
    font-size: .92rem;
    font-weight: 600;
    color: rgba(99,102,241,.85);
    margin: 0;
    padding: 10px 20px;
    border-left: 2px solid rgba(99,102,241,.50);
    background: rgba(99,102,241,.06);
    border-radius: 0 8px 8px 0;
    text-align: left;
}

/* ─── REGARD EXPERT ─── */
.conseil-expert {
    padding: 70px 0;
    border-top: 1px solid rgba(255,255,255,.05);
}

.conseil-expert-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.conseil-expert-card {
    padding: 28px 26px;
    border-radius: 18px;
    background: rgba(255,255,255,.028);
    border: 1px solid rgba(255,255,255,.06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.conseil-expert-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
}

.conseil-expert-card--situations::before {
    background: linear-gradient(90deg, transparent, rgba(99,102,241,.55), transparent);
}

.conseil-expert-card--choices::before {
    background: linear-gradient(90deg, transparent, rgba(139,92,246,.50), transparent);
}

.conseil-expert-card h3 {
    font-size: .96rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 16px;
}

.conseil-expert-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.conseil-expert-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .88rem;
    color: rgba(255,255,255,.65);
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(99,102,241,.05);
    border: 1px solid rgba(99,102,241,.10);
}

.conseil-expert-list li::before {
    content: "→";
    color: #818cf8;
    font-weight: 700;
    flex-shrink: 0;
}

.conseil-expert-list--choices li::before {
    content: "◆";
    color: rgba(139,92,246,.80);
    font-size: .6rem;
}

.conseil-expert-tagline {
    margin-top: 16px;
    font-size: .88rem;
    font-weight: 600;
    color: rgba(99,102,241,.85);
    font-style: italic;
}

/* ─── DOMAINES ─── */
.conseil-domains {
    padding: 70px 0;
    border-top: 1px solid rgba(255,255,255,.05);
}

.conseil-domains-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.conseil-domain {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 24px 22px;
    border-radius: 16px;
    background: rgba(255,255,255,.028);
    border: 1px solid rgba(255,255,255,.06);
    position: relative;
    overflow: hidden;
    transition: background .25s ease, border-color .25s ease, transform .25s ease;
}

.conseil-domain::before {
    content: "";
    position: absolute;
    left: 0; top: 15%; bottom: 15%;
    width: 3px;
    border-radius: 0 2px 2px 0;
    opacity: .55;
    transition: opacity .25s ease, top .25s ease, bottom .25s ease;
}

.conseil-domain--strategy::before { background: #6366f1; }
.conseil-domain--ux::before       { background: #8b5cf6; }
.conseil-domain--perf::before     { background: #6366f1; }
.conseil-domain--conv::before     { background: #8b5cf6; }

.conseil-domain:hover {
    background: rgba(255,255,255,.048);
    border-color: rgba(99,102,241,.16);
    transform: translateX(5px);
}

.conseil-domain:hover::before {
    opacity: 1;
    top: 6%;
    bottom: 6%;
}

.conseil-domain-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 9px;
    border-radius: 7px;
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .06em;
    flex-shrink: 0;
    margin-top: 2px;
    background: rgba(99,102,241,.10);
    color: #a5b4fc;
    border: 1px solid rgba(99,102,241,.22);
}

.conseil-domain--strategy .conseil-domain-icon { background: rgba(139,92,246,.10); color: #c4b5fd; border-color: rgba(139,92,246,.22); }
.conseil-domain--ux       .conseil-domain-icon { background: rgba(99,102,241,.10); color: #a5b4fc; border-color: rgba(99,102,241,.22); }
.conseil-domain--perf     .conseil-domain-icon { background: rgba(251,191,36,.10); color: #fbbf24; border-color: rgba(251,191,36,.22); }
.conseil-domain--conv     .conseil-domain-icon { background: rgba(34,197,94,.10);  color: #4ade80; border-color: rgba(34,197,94,.22); }

.conseil-domain-body h3 {
    font-size: .96rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 10px;
}

.conseil-domain-body ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.conseil-domain-body li {
    font-size: .86rem;
    color: rgba(255,255,255,.55);
    padding: 4px 0 4px 14px;
    position: relative;
    line-height: 1.5;
}

.conseil-domain-body li::before {
    content: "▸";
    position: absolute;
    left: 0;
    color: rgba(99,102,241,.65);
    font-size: .72rem;
    top: 5px;
}

/* ─── APPROCHE ─── */
.conseil-approach {
    padding: 70px 0;
    border-top: 1px solid rgba(255,255,255,.05);
}

.conseil-approach-card {
    max-width: 860px;
    margin: 0 auto;
    padding: 40px 36px;
    border-radius: 20px;
    background: rgba(255,255,255,.032);
    border: 1px solid rgba(255,255,255,.07);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.conseil-approach-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(to right, transparent, rgba(99,102,241,.65), rgba(139,92,246,.45), transparent);
}

.conseil-approach-card h2 {
    font-size: clamp(1.3rem, 2.2vw, 1.75rem);
    font-weight: 700;
    margin: 0;
    background: linear-gradient(100deg, #ffffff 40%, rgba(99,102,241,.90) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.conseil-approach-card > p {
    font-size: .92rem;
    color: rgba(255,255,255,.55);
    line-height: 1.75;
    margin: 0;
}

.conseil-approach-qualities {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.conseil-quality {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(99,102,241,.08);
    border: 1px solid rgba(99,102,241,.18);
    font-size: .88rem;
    font-weight: 600;
    color: rgba(255,255,255,.75);
}

.conseil-quality-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #818cf8;
    box-shadow: 0 0 8px rgba(99,102,241,.80);
    flex-shrink: 0;
}

.conseil-approach-results {
    padding: 18px 20px;
    border-radius: 12px;
    background: rgba(99,102,241,.06);
    border: 1px solid rgba(99,102,241,.16);
}

.conseil-approach-results-label {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #818cf8;
    margin-bottom: 12px;
}

.conseil-approach-results ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.conseil-approach-results li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .88rem;
    color: rgba(255,255,255,.70);
}

.conseil-approach-results li::before {
    content: "✓";
    color: #818cf8;
    font-size: .76rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* ─── OFFRES ─── */
.conseil-offers {
    padding: 70px 0;
    border-top: 1px solid rgba(255,255,255,.05);
}

.conseil-offers-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    align-items: stretch;
}

.conseil-plan {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 26px 22px 22px;
    border-radius: 20px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: relative;
    overflow: hidden;
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.conseil-plan::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
}

.conseil-plan:hover { transform: translateY(-6px); }

.conseil-plan--basic::before {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
}
.conseil-plan--basic:hover {
    border-color: rgba(255,255,255,.14);
    box-shadow: 0 16px 40px rgba(0,0,0,.28);
}

.conseil-plan--essential::before {
    background: linear-gradient(90deg, transparent, rgba(99,102,241,.60), transparent);
}
.conseil-plan--essential:hover {
    border-color: rgba(99,102,241,.26);
    box-shadow: 0 16px 40px rgba(99,102,241,.10);
}

.conseil-plan--pro::before {
    background: linear-gradient(90deg, transparent, rgba(139,92,246,.80), transparent);
}
.conseil-plan--pro {
    border-color: rgba(139,92,246,.20);
    box-shadow: 0 0 40px rgba(139,92,246,.08);
}
.conseil-plan--pro:hover {
    border-color: rgba(139,92,246,.40);
    box-shadow: 0 16px 50px rgba(139,92,246,.18);
}

.conseil-plan--premium::before {
    background: linear-gradient(90deg, transparent, rgba(251,191,36,.60), transparent);
}
.conseil-plan--premium:hover {
    border-color: rgba(251,191,36,.24);
    box-shadow: 0 16px 40px rgba(251,191,36,.10);
}

.conseil-plan-ribbon {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(139,92,246,.75);
    border: 1px solid rgba(139,92,246,.50);
    box-shadow: 0 4px 14px rgba(139,92,246,.30);
}

.conseil-plan-top { display: flex; flex-direction: column; gap: 8px; }

.conseil-plan-tier {
    display: inline-block;
    font-size: .70rem;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
}

.conseil-plan--basic    .conseil-plan-tier { color: rgba(255,255,255,.40); }
.conseil-plan--essential .conseil-plan-tier { color: #a5b4fc; }
.conseil-plan--pro      .conseil-plan-tier { color: #c4b5fd; }
.conseil-plan--premium  .conseil-plan-tier { color: #fcd34d; }

.conseil-plan-top h3 {
    font-size: .98rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.3;
}

.conseil-plan-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding: 9px 12px;
    border-radius: 10px;
    width: fit-content;
}

.conseil-plan--basic    .conseil-plan-price { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.conseil-plan--essential .conseil-plan-price { background: rgba(99,102,241,.10); border: 1px solid rgba(99,102,241,.20); }
.conseil-plan--pro      .conseil-plan-price { background: rgba(139,92,246,.12); border: 1px solid rgba(139,92,246,.24); }
.conseil-plan--premium  .conseil-plan-price { background: rgba(251,191,36,.10); border: 1px solid rgba(251,191,36,.22); }

.conseil-price-amount {
    font-size: 1.3rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

.conseil-price-currency {
    font-size: .75rem;
    font-weight: 700;
    color: rgba(255,255,255,.50);
    margin-bottom: 2px;
}

.conseil-price-period {
    font-size: .72rem;
    color: rgba(255,255,255,.38);
}

.conseil-plan-tagline {
    font-size: .80rem;
    color: rgba(255,255,255,.38);
    font-style: italic;
    margin: 0;
}

.conseil-plan-section { display: flex; flex-direction: column; gap: 8px; }

.conseil-plan-section-label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.35);
}

.conseil-plan-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.conseil-plan-list li {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: .83rem;
    color: rgba(255,255,255,.65);
    line-height: 1.5;
    padding: 6px 8px;
    border-radius: 7px;
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(255,255,255,.04);
    transition: color .2s ease;
}

.conseil-plan-list li::before {
    content: "✓";
    font-size: .76rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
}

.conseil-plan--basic    .conseil-plan-list li::before { color: rgba(255,255,255,.28); }
.conseil-plan--essential .conseil-plan-list li::before { color: #818cf8; }
.conseil-plan--pro      .conseil-plan-list li::before { color: #a78bfa; }
.conseil-plan--premium  .conseil-plan-list li::before { color: #fbbf24; }

.conseil-plan-list--ideal li::before { content: "→"; }

.conseil-plan:hover .conseil-plan-list li { color: rgba(255,255,255,.82); }

.conseil-plan-cta {
    display: block;
    text-align: center;
    padding: 10px 16px;
    border-radius: 999px;
    font-size: .84rem;
    font-weight: 700;
    text-decoration: none;
    color: rgba(255,255,255,.72);
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
    margin-top: auto;
    transition: color .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.conseil-plan--pro .conseil-plan-cta {
    color: #fff;
    background: rgba(139,92,246,.18);
    border-color: rgba(139,92,246,.42);
    box-shadow: 0 4px 16px rgba(139,92,246,.14);
}

.conseil-plan--basic    .conseil-plan-cta:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.20); }
.conseil-plan--essential .conseil-plan-cta:hover { background: rgba(99,102,241,.14); border-color: rgba(99,102,241,.40); box-shadow: 0 6px 20px rgba(99,102,241,.12); color: #fff; }
.conseil-plan--pro      .conseil-plan-cta:hover { background: rgba(139,92,246,.28); border-color: rgba(139,92,246,.60); box-shadow: 0 6px 20px rgba(139,92,246,.22); }
.conseil-plan--premium  .conseil-plan-cta:hover { background: rgba(251,191,36,.14); border-color: rgba(251,191,36,.38); box-shadow: 0 6px 20px rgba(251,191,36,.12); color: #fff; }

/* ─── PHILOSOPHIE ─── */
.conseil-philosophy {
    padding: 70px 0;
    border-top: 1px solid rgba(255,255,255,.05);
}

.conseil-philosophy-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.conseil-philo-card {
    padding: 32px 28px;
    border-radius: 18px;
    background: rgba(255,255,255,.028);
    border: 1px solid rgba(255,255,255,.06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    overflow: hidden;
}

.conseil-philo-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(99,102,241,.50), transparent);
}

.conseil-philo-card h2 {
    font-size: clamp(1.1rem, 1.8vw, 1.4rem);
    font-weight: 700;
    margin: 0;
    background: linear-gradient(100deg, #ffffff 40%, rgba(99,102,241,.90) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.conseil-philo-card > p {
    font-size: .90rem;
    color: rgba(255,255,255,.52);
    line-height: 1.7;
    margin: 0;
}

.conseil-philo-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.conseil-philo-steps li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: .88rem;
    color: rgba(255,255,255,.70);
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(99,102,241,.06);
    border: 1px solid rgba(99,102,241,.12);
}

.conseil-step-num {
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    color: #818cf8;
    opacity: .65;
    flex-shrink: 0;
    line-height: 1;
    width: 28px;
}

.conseil-philo-tagline {
    font-size: .88rem;
    font-weight: 600;
    color: rgba(99,102,241,.80);
    margin: 0;
    font-style: italic;
}

.conseil-partner-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.conseil-partner-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .88rem;
    color: rgba(255,255,255,.68);
    padding: 9px 12px;
    border-radius: 8px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.05);
}

.conseil-partner-list li::before {
    content: "→";
    color: #818cf8;
    font-weight: 700;
    flex-shrink: 0;
}

/* ─── BONUS ─── */
.conseil-bonus {
    padding: 70px 0;
    border-top: 1px solid rgba(255,255,255,.05);
}

.conseil-bonus-card {
    max-width: 760px;
    margin: 0 auto;
    padding: 40px 36px;
    border-radius: 20px;
    background: rgba(99,102,241,.05);
    border: 1px solid rgba(99,102,241,.20);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    position: relative;
    overflow: hidden;
}

.conseil-bonus-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(to right, transparent, rgba(99,102,241,.75), rgba(139,92,246,.55), transparent);
}

.conseil-bonus-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 14px;
    border-radius: 999px;
    font-size: .70rem;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: #a5b4fc;
    background: rgba(99,102,241,.12);
    border: 1px solid rgba(99,102,241,.35);
    box-shadow: 0 0 16px rgba(99,102,241,.15);
}

.conseil-bonus-card h2 {
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    font-weight: 700;
    margin: 0;
    background: linear-gradient(100deg, #ffffff 40%, rgba(99,102,241,.88) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.conseil-bonus-card > p {
    color: rgba(255,255,255,.52);
    font-size: .92rem;
    line-height: 1.7;
    max-width: 540px;
    margin: 0;
}

.conseil-bonus-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 480px;
    text-align: left;
}

.conseil-bonus-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .90rem;
    font-weight: 500;
    color: rgba(255,255,255,.75);
    padding: 10px 16px;
    border-radius: 10px;
    background: rgba(99,102,241,.07);
    border: 1px solid rgba(99,102,241,.16);
}

.conseil-bonus-list li::before {
    content: "→";
    color: #818cf8;
    font-weight: 700;
    flex-shrink: 0;
}

.conseil-bonus-tagline {
    font-size: .90rem;
    font-weight: 600;
    color: rgba(99,102,241,.85);
    margin: 0;
    font-style: italic;
}

/* ─── CTA FINAL ─── */
.conseil-cta {
    padding: 70px 20px 220px;
    border-top: 1px solid rgba(255,255,255,.05);
}

.conseil-cta-inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.conseil-cta-inner h2 {
    font-size: clamp(1.5rem, 2.8vw, 2.1rem);
    font-weight: 700;
    margin: 0 0 14px;
    background: linear-gradient(100deg, #ffffff 40%, rgba(99,102,241,.88) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.conseil-cta-inner p {
    color: rgba(255,255,255,.55);
    font-size: .98rem;
    line-height: 1.75;
    max-width: 520px;
    margin: 0 auto 28px;
}

.conseil-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

.conseil-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 999px;
    color: rgba(255,255,255,.78);
    text-decoration: none;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s ease;
}

.conseil-btn-secondary:hover {
    color: #fff;
    background: rgba(99,102,241,.10);
    border-color: rgba(99,102,241,.40);
    transform: translateY(-2px);
}

/* ─── BTN PRIMARY OVERRIDE ─── */
.page-conseil .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 36px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .04em;
    border-radius: 999px;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(135deg, rgba(99,102,241,.80) 0%, rgba(139,92,246,.70) 100%);
    border: 1px solid rgba(99,102,241,.45);
    box-shadow:
        0 0 28px rgba(99,102,241,.22),
        0 8px 20px rgba(99,102,241,.14),
        inset 0 1px 0 rgba(255,255,255,.10);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
    transition: background .3s ease, box-shadow .3s ease, transform .3s ease;
}

.page-conseil .btn-primary::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.10) 0%, transparent 60%);
    border-radius: inherit;
    pointer-events: none;
}

.page-conseil .btn-primary::after {
    content: "→";
    font-size: .95rem;
    opacity: .7;
    transition: transform .3s ease, opacity .3s ease;
}

.page-conseil .btn-primary:hover {
    background: linear-gradient(135deg, rgba(99,102,241,1) 0%, rgba(139,92,246,.90) 100%);
    box-shadow:
        0 0 44px rgba(99,102,241,.40),
        0 12px 28px rgba(99,102,241,.22),
        inset 0 1px 0 rgba(255,255,255,.16);
    transform: translateY(-3px);
}

.page-conseil .btn-primary:hover::after {
    transform: translateX(4px);
    opacity: 1;
}


/* ========================= conseil.php (Conseil Web) ========================= */

/* ─── BACKGROUND FIXE ─── */
.page-conseil::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        linear-gradient(rgba(0,0,0,.52), rgba(0,0,0,.52)),
        url("../image/bgsite.png") center / cover no-repeat;
    z-index: 0;
}

.page-conseil > * {
    position: relative;
    z-index: 1;
}

/* ─── SCROLL REVEAL ─── */
.page-conseil .section-block {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s ease, transform .7s ease;
}
.page-conseil .section-block.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ─── btn-primary override ─── */
.page-conseil .btn-primary {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    box-shadow: 0 4px 20px rgba(99,102,241,.35);
}
.page-conseil .btn-primary:hover {
    background: linear-gradient(135deg, #818cf8, #a78bfa);
    box-shadow: 0 6px 28px rgba(99,102,241,.50);
}

/* ─── SHARED ─── */
.cw-section-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

.cw-section-header {
    text-align: center;
    margin-bottom: 48px;
}
.cw-section-header h2 {
    font-size: clamp(1.4rem, 2.5vw, 1.9rem);
    font-weight: 700;
    margin: 0 0 10px;
    background: linear-gradient(100deg, #fff 40%, rgba(99,102,241,.9) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.cw-section-header p {
    color: rgba(255,255,255,.50);
    font-size: .95rem;
    max-width: 540px;
    margin: 0 auto;
}

/* ─── HERO ─── */
.cw-hero {
    min-height: 55dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 140px 24px 60px;
    text-align: center;
}
.cw-hero-inner {
    max-width: 760px;
    margin-top: 48px;
}
.cw-page-label {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(99,102,241,.9);
    border: 1px solid rgba(99,102,241,.35);
    background: rgba(99,102,241,.10);
    padding: 5px 14px;
    border-radius: 999px;
    margin-bottom: 20px;
}
.cw-hero h1 {
    font-size: clamp(1.9rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 16px;
    background: linear-gradient(120deg, #fff 50%, rgba(99,102,241,.85) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.cw-hero-sub {
    color: rgba(255,255,255,.60);
    font-size: 1rem;
    line-height: 1.7;
    max-width: 560px;
    margin: 0 auto 24px;
}
.cw-impact-list {
    list-style: none;
    padding: 0;
    margin: 0 auto 20px;
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
.cw-impact-list li {
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 6px 16px;
    border-radius: 999px;
    background: rgba(99,102,241,.12);
    border: 1px solid rgba(99,102,241,.30);
    color: rgba(255,255,255,.80);
}
.cw-hero-tagline {
    font-size: .92rem;
    color: rgba(255,255,255,.48);
    font-style: italic;
    margin: 0;
}

/* ─── WHY ─── */
.cw-why {
    padding: 80px 0;
}
.cw-why-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.cw-why-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    padding: 32px;
}
.cw-why-card--errors {
    border-color: rgba(239,68,68,.15);
}
.cw-why-card h2 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 10px;
}
.cw-why-card p {
    color: rgba(255,255,255,.50);
    font-size: .88rem;
    line-height: 1.6;
    margin: 0 0 16px;
}
.cw-why-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cw-why-list li {
    font-size: .85rem;
    color: rgba(255,255,255,.60);
    padding-left: 18px;
    position: relative;
    line-height: 1.5;
}
.cw-why-list li::before {
    content: "✕";
    position: absolute;
    left: 0;
    color: rgba(239,68,68,.75);
    font-size: .72rem;
    top: 3px;
}
.cw-why-tagline {
    font-size: .85rem;
    color: rgba(239,68,68,.70);
    font-weight: 600;
    margin: 0;
    font-style: italic;
}
.cw-why-card--benefits h3 {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
    margin: 0 0 16px;
}
.cw-benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cw-benefits-list li {
    font-size: .88rem;
    color: rgba(255,255,255,.75);
    padding: 10px 14px 10px 42px;
    background: rgba(99,102,241,.08);
    border: 1px solid rgba(99,102,241,.14);
    border-radius: 8px;
    position: relative;
}
.cw-benefits-list li::before {
    content: "✓";
    position: absolute;
    left: 14px;
    color: rgba(99,102,241,.9);
    font-weight: 800;
}

/* ─── APPROCHE ─── */
.cw-approach {
    padding: 80px 0;
}
.cw-approach-inner {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}
.cw-approach-inner h2 {
    font-size: clamp(1.3rem, 2.5vw, 1.8rem);
    font-weight: 700;
    color: #fff;
    margin: 0 0 10px;
    background: linear-gradient(100deg, #fff 40%, rgba(99,102,241,.9) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.cw-approach-inner > p {
    color: rgba(255,255,255,.48);
    font-size: .92rem;
    margin: 0 0 36px;
}
.cw-approach-steps {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
}
.cw-approach-steps li {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(99,102,241,.15);
    border-radius: 10px;
    padding: 16px 20px;
    font-size: .92rem;
    color: rgba(255,255,255,.80);
    transition: border-color .25s, background .25s;
}
.cw-approach-steps li:hover {
    border-color: rgba(99,102,241,.30);
    background: rgba(99,102,241,.07);
}
.cw-step-num {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .10em;
    color: rgba(99,102,241,.9);
    background: rgba(99,102,241,.14);
    border: 1px solid rgba(99,102,241,.28);
    border-radius: 6px;
    padding: 4px 9px;
    flex-shrink: 0;
}
.cw-approach-tagline {
    font-size: .88rem;
    color: rgba(255,255,255,.40);
    font-style: italic;
    margin: 0;
}

/* ─── DOMAINS ─── */
.cw-domains {
    padding: 80px 0;
}
.cw-domains-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.cw-domain {
    display: flex;
    gap: 14px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    padding: 24px;
    transition: border-color .25s, box-shadow .25s;
}
.cw-domain:hover {
    border-color: rgba(99,102,241,.22);
    box-shadow: 0 6px 20px rgba(99,102,241,.08);
}
.cw-domain-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 9px;
    border-radius: 7px;
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .06em;
    flex-shrink: 0;
    margin-top: 2px;
    background: rgba(99,102,241,.10);
    color: #a5b4fc;
    border: 1px solid rgba(99,102,241,.22);
}

.cw-domain--structure .cw-domain-icon { background: rgba(139,92,246,.10); color: #c4b5fd; border-color: rgba(139,92,246,.22); }
.cw-domain--ux        .cw-domain-icon { background: rgba(99,102,241,.10); color: #a5b4fc; border-color: rgba(99,102,241,.22); }
.cw-domain--content   .cw-domain-icon { background: rgba(251,191,36,.10); color: #fbbf24; border-color: rgba(251,191,36,.22); }
.cw-domain--perf      .cw-domain-icon { background: rgba(251,191,36,.10); color: #fbbf24; border-color: rgba(251,191,36,.22); }
.cw-domain--conv      .cw-domain-icon { background: rgba(34,197,94,.10);  color: #4ade80; border-color: rgba(34,197,94,.22); }
.cw-domain-body h3 {
    font-size: .85rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.cw-domain-body ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.cw-domain-body li {
    font-size: .80rem;
    color: rgba(255,255,255,.55);
    padding-left: 12px;
    position: relative;
    line-height: 1.5;
}
.cw-domain-body li::before {
    content: "▸";
    position: absolute;
    left: 0;
    color: rgba(99,102,241,.65);
    font-size: .68rem;
    top: 4px;
}

/* ─── WHEN ─── */
.cw-when {
    padding: 80px 0;
}
.cw-when-inner {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}
.cw-when-inner h2 {
    font-size: clamp(1.3rem, 2.5vw, 1.8rem);
    font-weight: 700;
    margin: 0 0 28px;
    background: linear-gradient(100deg, #fff 40%, rgba(99,102,241,.9) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.cw-when-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cw-when-list li {
    font-size: .90rem;
    color: rgba(255,255,255,.72);
    padding: 11px 16px 11px 46px;
    background: rgba(99,102,241,.06);
    border: 1px solid rgba(99,102,241,.12);
    border-radius: 8px;
    position: relative;
    text-align: left;
    transition: background .2s, border-color .2s;
}
.cw-when-list li:hover {
    background: rgba(99,102,241,.11);
    border-color: rgba(99,102,241,.22);
}
.cw-when-list li::before {
    content: "→";
    position: absolute;
    left: 16px;
    color: rgba(99,102,241,.75);
    font-weight: 700;
}
.cw-when-tagline {
    font-size: .90rem;
    color: rgba(99,102,241,.82);
    font-weight: 600;
    font-style: italic;
    margin: 0;
}

/* ─── OFFER ─── */
.cw-offer {
    padding: 80px 0;
}
.cw-offer-card {
    display: grid;
    grid-template-columns: 280px 1fr;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(99,102,241,.30);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 0 40px rgba(99,102,241,.10);
}
.cw-offer-left {
    background: rgba(99,102,241,.10);
    border-right: 1px solid rgba(99,102,241,.20);
    padding: 36px 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cw-offer-tier {
    display: inline-block;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(99,102,241,.9);
    background: rgba(99,102,241,.15);
    border: 1px solid rgba(99,102,241,.32);
    padding: 4px 10px;
    border-radius: 999px;
    align-self: flex-start;
}
.cw-offer-left h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.35;
}
.cw-offer-tagline {
    font-size: .82rem;
    color: rgba(255,255,255,.48);
    margin: 0;
    line-height: 1.55;
}
.cw-offer-price {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin: 8px 0;
}
.cw-price-amount {
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}
.cw-price-currency {
    font-size: .85rem;
    font-weight: 700;
    color: rgba(255,255,255,.45);
}
.cw-price-period {
    font-size: .78rem;
    color: rgba(255,255,255,.35);
}
.cw-offer-right {
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    gap: 26px;
}
.cw-offer-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cw-offer-section-label {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: rgba(99,102,241,.72);
}
.cw-offer-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.cw-offer-list li {
    font-size: .82rem;
    color: rgba(255,255,255,.78);
    padding: 5px 13px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 6px;
}
.cw-offer-list--ideal li {
    background: rgba(99,102,241,.08);
    border-color: rgba(99,102,241,.18);
    color: rgba(255,255,255,.65);
}

/* ─── BENEFITS ─── */
.cw-benefits {
    padding: 80px 0;
}
.cw-benefits-inner {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}
.cw-benefits-inner h2 {
    font-size: clamp(1.3rem, 2.5vw, 1.8rem);
    font-weight: 700;
    margin: 0 0 10px;
    background: linear-gradient(100deg, #fff 40%, rgba(99,102,241,.9) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.cw-benefits-inner > p {
    color: rgba(255,255,255,.48);
    font-size: .92rem;
    margin: 0 0 28px;
}
.cw-benefits-pills {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.cw-benefits-pills li {
    font-size: .88rem;
    color: rgba(255,255,255,.78);
    padding: 9px 20px;
    background: rgba(99,102,241,.10);
    border: 1px solid rgba(99,102,241,.26);
    border-radius: 999px;
}
.cw-benefits-tagline {
    font-size: .90rem;
    color: rgba(99,102,241,.82);
    font-weight: 600;
    font-style: italic;
    margin: 0;
}

/* ─── CONSEIL VS ACCOMPAGNEMENT ─── */
.cw-vs {
    padding: 80px 0;
}
.cw-vs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
}
.cw-vs-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    padding: 30px 32px;
}
.cw-vs-card h3 {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
    margin: 0 0 16px;
}
.cw-vs-card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cw-vs-card li {
    font-size: .88rem;
    color: rgba(255,255,255,.72);
    padding: 6px 14px;
    background: rgba(255,255,255,.03);
    border-radius: 6px;
}
.cw-vs-card--conseil {
    border-color: rgba(99,102,241,.25);
}
.cw-vs-card--conseil li {
    background: rgba(99,102,241,.07);
    border: 1px solid rgba(99,102,241,.12);
}
.cw-vs-card p {
    font-size: .85rem;
    color: rgba(255,255,255,.42);
    margin: 0 0 12px;
}
.cw-vs-tagline {
    font-size: .85rem;
    color: rgba(99,102,241,.80) !important;
    font-weight: 600;
    font-style: italic;
}

/* ─── EXPERTISE ─── */
.cw-expertise {
    padding: 80px 0;
}
.cw-expertise-card {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 20px;
    padding: 48px 36px;
}
.cw-expertise-card h2 {
    font-size: clamp(1.25rem, 2vw, 1.65rem);
    font-weight: 700;
    margin: 0 0 10px;
    background: linear-gradient(100deg, #fff 40%, rgba(99,102,241,.9) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.cw-expertise-card > p {
    color: rgba(255,255,255,.48);
    font-size: .92rem;
    margin: 0 0 28px;
}
.cw-exp-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
.cw-exp-list li {
    font-size: .88rem;
    color: rgba(255,255,255,.78);
    padding: 9px 20px;
    background: rgba(99,102,241,.09);
    border: 1px solid rgba(99,102,241,.22);
    border-radius: 8px;
}
.cw-exp-tagline {
    font-size: .88rem;
    color: rgba(99,102,241,.80);
    font-weight: 600;
    font-style: italic;
    margin: 0;
}

/* ─── BONUS ─── */
.cw-bonus {
    padding: 80px 0;
}
.cw-bonus-card {
    max-width: 720px;
    margin: 0 auto;
    background: linear-gradient(135deg, rgba(99,102,241,.12), rgba(139,92,246,.09));
    border: 1px solid rgba(99,102,241,.30);
    border-radius: 20px;
    padding: 44px 40px;
    text-align: center;
}
.cw-bonus-badge {
    display: inline-block;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(99,102,241,.9);
    background: rgba(99,102,241,.15);
    border: 1px solid rgba(99,102,241,.35);
    padding: 4px 12px;
    border-radius: 999px;
    margin-bottom: 16px;
}
.cw-bonus-card h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 24px;
}
.cw-bonus-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.cw-bonus-list li {
    font-size: .85rem;
    color: rgba(255,255,255,.78);
    padding: 8px 18px;
    background: rgba(99,102,241,.10);
    border: 1px solid rgba(99,102,241,.26);
    border-radius: 999px;
}
.cw-bonus-tagline {
    font-size: .88rem;
    color: rgba(99,102,241,.85);
    font-weight: 600;
    font-style: italic;
    margin: 0;
}

/* ─── CTA FINAL ─── */
.cw-cta {
    padding: 80px 0 220px;
    text-align: center;
}
.cw-cta-inner {
    max-width: 680px;
    margin: 0 auto;
    padding: 0 24px;
}
.cw-cta h2 {
    font-size: clamp(1.45rem, 2.5vw, 2rem);
    font-weight: 700;
    margin: 0 0 14px;
    background: linear-gradient(100deg, #fff 40%, rgba(99,102,241,.88) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.cw-cta p {
    color: rgba(255,255,255,.52);
    font-size: .98rem;
    line-height: 1.75;
    margin: 0 auto 28px;
}
.cw-cta-buttons {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}
.cw-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 999px;
    border: 1px solid rgba(99,102,241,.35);
    background: rgba(99,102,241,.08);
    color: rgba(255,255,255,.78);
    font-size: .90rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .25s, border-color .25s, color .25s;
}
.cw-btn-secondary:hover {
    background: rgba(99,102,241,.18);
    border-color: rgba(99,102,241,.55);
    color: #fff;
}



/* ─── HMG-NAV COULEUR INDIGO pour pages accompagnement ─── */
.page-accomp .hmg-nav-link {
    border-color: rgba(99,102,241,.38);
    background: rgba(99,102,241,.09);
    box-shadow: 0 0 14px rgba(99,102,241,.10);
}

.page-accomp .hmg-nav-link:hover {
    border-color: rgba(99,102,241,.68);
    background: rgba(99,102,241,.16);
    box-shadow: 0 0 20px rgba(99,102,241,.20);
}

.page-accomp .hmg-track-dot--active {
    background: #6366f1;
    border-color: rgba(99,102,241,.80);
    box-shadow: 0 0 10px rgba(99,102,241,.68);
}


/* ========================= accompagnement.php ========================= */

/* ─── BACKGROUND FIXE ─── */
.page-accomp::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        linear-gradient(rgba(0,0,0,.52), rgba(0,0,0,.52)),
        url("../image/bgsite.png") center / cover no-repeat;
    z-index: 0;
}

.page-accomp > * {
    position: relative;
    z-index: 1;
}

/* ─── SCROLL REVEAL ─── */
.page-accomp .section-block {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s ease, transform .7s ease;
}
.page-accomp .section-block.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ─── btn-primary override ─── */
.page-accomp .btn-primary {
    background: linear-gradient(135deg, #6366f1, #818cf8);
    box-shadow: 0 4px 20px rgba(99,102,241,.35);
}
.page-accomp .btn-primary:hover {
    background: linear-gradient(135deg, #818cf8, #c7d2fe);
    box-shadow: 0 6px 28px rgba(99,102,241,.50);
}

/* ─── SHARED ─── */
.acmp-section-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

.acmp-section-header {
    text-align: center;
    margin-bottom: 48px;
}
.acmp-section-header h2 {
    font-size: clamp(1.4rem, 2.5vw, 1.9rem);
    font-weight: 700;
    margin: 0 0 10px;
    background: linear-gradient(100deg, #fff 40%, rgba(99,102,241,.9) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.acmp-section-header p {
    color: rgba(255,255,255,.50);
    font-size: .95rem;
    max-width: 540px;
    margin: 0 auto;
}

/* ─── HERO ─── */
.acmp-hero {
    min-height: 55dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 140px 24px 60px;
    text-align: center;
}
.acmp-hero-inner {
    max-width: 780px;
    margin-top: 48px;
}
.acmp-page-label {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(99,102,241,.9);
    border: 1px solid rgba(99,102,241,.35);
    background: rgba(99,102,241,.10);
    padding: 5px 14px;
    border-radius: 999px;
    margin-bottom: 20px;
}
.acmp-hero h1 {
    font-size: clamp(1.9rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 16px;
    background: linear-gradient(120deg, #fff 50%, rgba(99,102,241,.85) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.acmp-hero-sub {
    color: rgba(255,255,255,.58);
    font-size: 1rem;
    line-height: 1.7;
    max-width: 600px;
    margin: 0 auto 24px;
}
.acmp-impact-list {
    list-style: none;
    padding: 0;
    margin: 0 auto 20px;
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
.acmp-impact-list li {
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 6px 16px;
    border-radius: 999px;
    background: rgba(99,102,241,.12);
    border: 1px solid rgba(99,102,241,.30);
    color: rgba(255,255,255,.80);
}
.acmp-hero-tagline {
    font-size: .92rem;
    color: rgba(255,255,255,.48);
    font-style: italic;
    margin: 0;
}

/* ─── WHY ─── */
.acmp-why {
    padding: 80px 0;
}
.acmp-why-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.acmp-why-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    padding: 32px;
}
.acmp-why-card--problems {
    border-color: rgba(239,68,68,.15);
}
.acmp-why-card h2 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 10px;
}
.acmp-why-card p {
    color: rgba(255,255,255,.50);
    font-size: .88rem;
    line-height: 1.6;
    margin: 0 0 16px;
}
.acmp-why-list {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.acmp-why-list li {
    font-size: .85rem;
    color: rgba(255,255,255,.58);
    padding-left: 18px;
    position: relative;
    line-height: 1.5;
}
.acmp-why-list li::before {
    content: "✕";
    position: absolute;
    left: 0;
    color: rgba(239,68,68,.72);
    font-size: .72rem;
    top: 3px;
}
.acmp-why-result {
    font-size: .85rem;
    color: rgba(239,68,68,.65);
    font-style: italic;
    font-weight: 600;
    margin: 0;
}
.acmp-why-card--benefits h3 {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: rgba(255,255,255,.52);
    margin: 0 0 16px;
}
.acmp-benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.acmp-benefits-list li {
    font-size: .88rem;
    color: rgba(255,255,255,.78);
    padding: 10px 14px 10px 42px;
    background: rgba(99,102,241,.08);
    border: 1px solid rgba(99,102,241,.14);
    border-radius: 8px;
    position: relative;
}
.acmp-benefits-list li::before {
    content: "✓";
    position: absolute;
    left: 14px;
    color: rgba(99,102,241,.9);
    font-weight: 800;
}

/* ─── APPROCHE ─── */
.acmp-approach {
    padding: 80px 0;
}
.acmp-approach-inner {
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
}
.acmp-approach-inner h2 {
    font-size: clamp(1.3rem, 2.5vw, 1.8rem);
    font-weight: 700;
    margin: 0 0 10px;
    background: linear-gradient(100deg, #fff 40%, rgba(99,102,241,.9) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.acmp-approach-inner > p {
    color: rgba(255,255,255,.48);
    font-size: .92rem;
    margin: 0 0 36px;
}
.acmp-cycle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.acmp-cycle-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: rgba(99,102,241,.10);
    border: 1px solid rgba(99,102,241,.22);
    border-radius: 12px;
    padding: 16px 20px;
    min-width: 130px;
    transition: background .25s, border-color .25s;
}
.acmp-cycle-step:hover {
    background: rgba(99,102,241,.18);
    border-color: rgba(99,102,241,.38);
}
.acmp-cycle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 7px;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .06em;
    background: rgba(99,102,241,.10);
    color: #a5b4fc;
    border: 1px solid rgba(99,102,241,.22);
}

.acmp-cycle-icon--aud  { background: rgba(139,92,246,.10); color: #c4b5fd; border-color: rgba(139,92,246,.22); }
.acmp-cycle-icon--opt  { background: rgba(59,130,246,.10); color: #7aa2ff; border-color: rgba(59,130,246,.22); }
.acmp-cycle-icon--perf { background: rgba(251,191,36,.10); color: #fbbf24; border-color: rgba(251,191,36,.22); }
.acmp-cycle-icon--conv { background: rgba(34,197,94,.10);  color: #4ade80; border-color: rgba(34,197,94,.22); }
.acmp-cycle-step span:last-child {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255,255,255,.72);
}
.acmp-cycle-arrow {
    font-size: 1.2rem;
    color: rgba(99,102,241,.55);
    font-weight: 700;
}
.acmp-approach-tagline {
    font-size: .88rem;
    color: rgba(255,255,255,.40);
    font-style: italic;
    margin: 0;
}

/* ─── INCLUDES ─── */
.acmp-includes {
    padding: 80px 0;
}
.acmp-includes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.acmp-inc-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    padding: 26px 24px;
    transition: border-color .25s, box-shadow .25s;
}
.acmp-inc-card:hover {
    border-color: rgba(99,102,241,.22);
    box-shadow: 0 6px 20px rgba(99,102,241,.08);
}
.acmp-inc-icon {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 12px;
    line-height: 1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: rgba(99,102,241,.45);
    display: block;
}
.acmp-inc-card h3 {
    font-size: .85rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.acmp-inc-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.acmp-inc-card li {
    font-size: .80rem;
    color: rgba(255,255,255,.55);
    padding-left: 12px;
    position: relative;
    line-height: 1.5;
}
.acmp-inc-card li::before {
    content: "▸";
    position: absolute;
    left: 0;
    color: rgba(99,102,241,.65);
    font-size: .68rem;
    top: 4px;
}

/* ─── PROGRESSION ─── */
.acmp-progress {
    padding: 80px 0;
}
.acmp-progress-inner {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}
.acmp-progress-inner h2 {
    font-size: clamp(1.3rem, 2.5vw, 1.8rem);
    font-weight: 700;
    margin: 0 0 10px;
    background: linear-gradient(100deg, #fff 40%, rgba(99,102,241,.9) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.acmp-progress-inner > p {
    color: rgba(255,255,255,.48);
    font-size: .92rem;
    margin: 0 0 28px;
}
.acmp-progress-pills {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.acmp-progress-pills li {
    font-size: .88rem;
    color: rgba(255,255,255,.78);
    padding: 9px 20px;
    background: rgba(99,102,241,.10);
    border: 1px solid rgba(99,102,241,.26);
    border-radius: 999px;
}

/* ─── OFFERS ─── */
.acmp-offers {
    padding: 80px 0;
}
.acmp-offers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: stretch;
}
.acmp-plan {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 18px;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    transition: border-color .25s, box-shadow .25s;
}
.acmp-plan:hover {
    border-color: rgba(99,102,241,.22);
    box-shadow: 0 8px 28px rgba(99,102,241,.08);
}
.acmp-plan--pro {
    border-color: rgba(99,102,241,.35);
    background: rgba(99,102,241,.08);
    box-shadow: 0 0 40px rgba(99,102,241,.12);
}
.acmp-plan-ribbon {
    position: absolute;
    top: -1px;
    right: 24px;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
    background: linear-gradient(135deg, #6366f1, #818cf8);
    color: #fff;
    padding: 5px 14px;
    border-radius: 0 0 8px 8px;
}
.acmp-plan-top {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.acmp-plan-tier {
    display: inline-block;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(99,102,241,.9);
    background: rgba(99,102,241,.14);
    border: 1px solid rgba(99,102,241,.28);
    padding: 3px 10px;
    border-radius: 999px;
    align-self: flex-start;
}
.acmp-plan-top h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.3;
}
.acmp-plan-price {
    display: flex;
    align-items: baseline;
    gap: 5px;
}
.acmp-price-amount {
    font-size: 1.75rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}
.acmp-price-currency {
    font-size: .82rem;
    font-weight: 700;
    color: rgba(255,255,255,.42);
}
.acmp-price-period {
    font-size: .75rem;
    color: rgba(255,255,255,.32);
}
.acmp-plan-tagline {
    font-size: .80rem;
    color: rgba(255,255,255,.45);
    margin: 0;
    line-height: 1.5;
}
.acmp-plan-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1;
}
.acmp-plan-list li {
    font-size: .82rem;
    color: rgba(255,255,255,.68);
    padding: 6px 10px 6px 28px;
    position: relative;
    line-height: 1.5;
}
.acmp-plan-list li::before {
    content: "✓";
    position: absolute;
    left: 8px;
    color: rgba(99,102,241,.80);
    font-weight: 700;
    font-size: .80rem;
}
.acmp-plan--pro .acmp-plan-list li::before {
    color: rgba(129,140,248,.90);
}
.acmp-plan-ideal {
    font-size: .82rem;
    color: rgba(99,102,241,.78);
    font-style: italic;
    font-weight: 600;
    margin: 0;
    padding-top: 4px;
    border-top: 1px solid rgba(255,255,255,.06);
}
.acmp-plan-cta {
    display: block;
    text-align: center;
    padding: 11px 20px;
    border-radius: 999px;
    border: 1px solid rgba(99,102,241,.35);
    background: rgba(99,102,241,.10);
    color: rgba(255,255,255,.85);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    margin-top: auto;
    transition: background .25s, border-color .25s, color .25s;
}
.acmp-plan-cta:hover {
    background: rgba(99,102,241,.22);
    border-color: rgba(99,102,241,.55);
    color: #fff;
}
.acmp-plan--pro .acmp-plan-cta {
    background: linear-gradient(135deg, #6366f1, #818cf8);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 16px rgba(99,102,241,.30);
}
.acmp-plan--pro .acmp-plan-cta:hover {
    background: linear-gradient(135deg, #818cf8, #c7d2fe);
    box-shadow: 0 6px 22px rgba(99,102,241,.45);
}

/* ─── PHILOSOPHY ─── */
.acmp-philosophy {
    padding: 80px 0;
}
.acmp-philosophy-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.acmp-philo-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    padding: 32px;
}
.acmp-philo-card h2 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 10px;
    background: linear-gradient(100deg, #fff 40%, rgba(99,102,241,.9) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.acmp-philo-card p {
    color: rgba(255,255,255,.48);
    font-size: .88rem;
    line-height: 1.6;
    margin: 0 0 16px;
}
.acmp-partner-list {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.acmp-partner-list li {
    font-size: .88rem;
    color: rgba(255,255,255,.72);
    padding: 8px 12px 8px 32px;
    background: rgba(99,102,241,.07);
    border-radius: 7px;
    position: relative;
}
.acmp-partner-list li::before {
    content: "→";
    position: absolute;
    left: 10px;
    color: rgba(99,102,241,.72);
    font-weight: 700;
}
.acmp-philo-tagline {
    font-size: .85rem;
    color: rgba(99,102,241,.80);
    font-weight: 600;
    font-style: italic;
    margin: 0;
}
.acmp-vs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}
.acmp-vs-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.acmp-vs-label {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: rgba(255,255,255,.45);
    margin-bottom: 4px;
}
.acmp-vs-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.acmp-vs-col li {
    font-size: .82rem;
    color: rgba(255,255,255,.60);
    padding: 5px 10px;
    background: rgba(255,255,255,.03);
    border-radius: 5px;
}
.acmp-vs-col--active li {
    color: rgba(255,255,255,.80);
    background: rgba(99,102,241,.09);
    border: 1px solid rgba(99,102,241,.16);
}
.acmp-vs-tagline {
    font-size: .85rem;
    color: rgba(99,102,241,.78);
    font-weight: 600;
    font-style: italic;
    margin: 0;
}

/* ─── GROWTH ─── */
.acmp-growth {
    padding: 80px 0;
}
.acmp-growth-card {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 20px;
    padding: 48px 36px;
}
.acmp-growth-card h2 {
    font-size: clamp(1.25rem, 2vw, 1.65rem);
    font-weight: 700;
    margin: 0 0 10px;
    background: linear-gradient(100deg, #fff 40%, rgba(99,102,241,.9) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.acmp-growth-card > p {
    color: rgba(255,255,255,.48);
    font-size: .92rem;
    margin: 0 0 26px;
}
.acmp-growth-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}
.acmp-growth-list li {
    font-size: .88rem;
    color: rgba(255,255,255,.72);
    padding: 9px 14px 9px 38px;
    background: rgba(99,102,241,.08);
    border: 1px solid rgba(99,102,241,.14);
    border-radius: 7px;
    position: relative;
}
.acmp-growth-list li::before {
    content: "↗";
    position: absolute;
    left: 12px;
    color: rgba(99,102,241,.80);
    font-weight: 700;
}
.acmp-growth-tagline {
    font-size: .90rem;
    color: rgba(99,102,241,.82);
    font-weight: 600;
    font-style: italic;
    margin: 0;
}

/* ─── BONUS ─── */
.acmp-bonus {
    padding: 80px 0;
}
.acmp-bonus-card {
    max-width: 720px;
    margin: 0 auto;
    background: linear-gradient(135deg, rgba(99,102,241,.12), rgba(129,140,248,.09));
    border: 1px solid rgba(99,102,241,.30);
    border-radius: 20px;
    padding: 44px 40px;
    text-align: center;
}
.acmp-bonus-badge {
    display: inline-block;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(99,102,241,.9);
    background: rgba(99,102,241,.15);
    border: 1px solid rgba(99,102,241,.35);
    padding: 4px 12px;
    border-radius: 999px;
    margin-bottom: 16px;
}
.acmp-bonus-card h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 24px;
}
.acmp-bonus-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.acmp-bonus-list li {
    font-size: .85rem;
    color: rgba(255,255,255,.78);
    padding: 8px 18px;
    background: rgba(99,102,241,.10);
    border: 1px solid rgba(99,102,241,.26);
    border-radius: 999px;
}
.acmp-bonus-tagline {
    font-size: .88rem;
    color: rgba(99,102,241,.85);
    font-weight: 600;
    font-style: italic;
    margin: 0;
}

/* ─── CTA FINAL ─── */
.acmp-cta {
    padding: 80px 0 220px;
    text-align: center;
}
.acmp-cta-inner {
    max-width: 680px;
    margin: 0 auto;
    padding: 0 24px;
}
.acmp-cta h2 {
    font-size: clamp(1.45rem, 2.5vw, 2rem);
    font-weight: 700;
    margin: 0 0 14px;
    background: linear-gradient(100deg, #fff 40%, rgba(99,102,241,.88) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.acmp-cta p {
    color: rgba(255,255,255,.52);
    font-size: .98rem;
    line-height: 1.75;
    margin: 0 auto 28px;
}
.acmp-cta-buttons {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}
.acmp-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 999px;
    border: 1px solid rgba(99,102,241,.35);
    background: rgba(99,102,241,.08);
    color: rgba(255,255,255,.78);
    font-size: .90rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .25s, border-color .25s, color .25s;
}
.acmp-btn-secondary:hover {
    background: rgba(99,102,241,.18);
    border-color: rgba(99,102,241,.55);
    color: #fff;
}




/* ========================= about.php ========================= */

/* ─── BACKGROUND ─── */
.page-about::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        linear-gradient(rgba(0,0,0,.52), rgba(0,0,0,.52)),
        url("../image/bgsite.png") center / cover no-repeat;
    z-index: 0;
}

.page-about > * {
    position: relative;
    z-index: 1;
}

/* ─── SCROLL REVEAL ─── */
.page-about .section-block {
    opacity: 0;
    transform: translateY(44px);
    transition:
        opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-about .section-block.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ─── HERO ─── */
.about-hero {
    padding: 140px 20px 80px;
}

.about-hero .container {
    max-width: 1100px;
    margin: 0 auto;
}

.about-hero-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

.about-hero-content {
    flex: 1 1 0;
    min-width: 0;
}

.about-hero-content h1 {
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 22px;
    background: linear-gradient(110deg, #ffffff 30%, rgba(59,130,246,.90) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.about-subtitle {
    color: rgba(255,255,255,.65);
    line-height: 1.88;
    font-size: 1.05rem;
    max-width: 560px;
}

/* ─── PHOTO ─── */
.about-hero-image {
    flex: 0 0 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.about-hero-image::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 22px;
    background: linear-gradient(
        135deg,
        rgba(11,110,253,.55) 0%,
        rgba(139,92,246,.30) 50%,
        rgba(6,182,212,.50) 100%
    );
    z-index: 0;
}

.about-hero-image img {
    position: relative;
    z-index: 1;
    width: 320px;
    height: 420px;
    object-fit: cover;
    border-radius: 20px;
    display: block;
    box-shadow:
        0 0 50px rgba(11,110,253,.20),
        0 30px 70px rgba(0,0,0,.55);
}

.about-image-caption {
    position: relative;
    z-index: 1;
    margin-top: 16px;
    font-size: .82rem;
    color: rgba(255,255,255,.45);
    text-align: center;
    letter-spacing: .02em;
}

/* ─── SECTIONS ─── */
.about-section {
    padding: 80px 20px;
}

.about-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    max-width: 1100px;
    margin: 0 auto;
}

/* ─── CARDS ─── */
.about-card,
.about-single {
    padding: 34px 38px;
    border-radius: 18px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    position: relative;
    overflow: hidden;
    transition: border-color .3s ease, box-shadow .3s ease;
}

.about-card::before,
.about-single::before {
    content: "";
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(59,130,246,.50), transparent);
}

.about-card:hover,
.about-single:hover {
    border-color: rgba(59,130,246,.16);
    box-shadow: 0 22px 55px rgba(0,0,0,.22), 0 0 30px rgba(11,110,253,.05);
}

.about-card h2,
.about-single h2 {
    font-size: 1.55rem;
    font-weight: 700;
    margin-bottom: 18px;
    line-height: 1.3;
    background: linear-gradient(100deg, #ffffff 40%, rgba(148,163,184,.80) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.about-single {
    max-width: 900px;
    margin: 0 auto;
}

/* ─── LISTES ─── */
.about-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}

.about-list li {
    padding: 14px 18px 14px 46px;
    border-radius: 12px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.055);
    color: rgba(255,255,255,.70);
    line-height: 1.68;
    position: relative;
    transition: background .25s ease, border-color .25s ease, color .25s ease;
}

.about-list li::before {
    content: "▸";
    position: absolute;
    left: 18px;
    top: 15px;
    color: rgba(59,130,246,.75);
    font-size: .82rem;
    line-height: 1;
}

.about-list li:hover {
    background: rgba(59,130,246,.06);
    border-color: rgba(59,130,246,.16);
    color: rgba(255,255,255,.88);
}

/* Liste numérotée (méthode) */
.about-list--numbered {
    counter-reset: method-counter;
}

.about-list--numbered li {
    counter-increment: method-counter;
}

.about-list--numbered li::before {
    content: counter(method-counter, decimal-leading-zero);
    font-size: .70rem;
    font-weight: 700;
    letter-spacing: .04em;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(59,130,246,.65);
}

/* ─── PHILOSOPHIE ─── */
.about-philosophy {
    padding: 80px 20px;
    text-align: center;
}

.about-philosophy .container {
    max-width: 980px;
    margin: 0 auto;
}

.about-philosophy h2 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 0;
    background: linear-gradient(100deg, #ffffff 40%, rgba(148,163,184,.80) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.philosophy-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin: 30px auto 0;
}

.philosophy-item {
    padding: 26px 22px;
    border-radius: 16px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    border-top-width: 2px;
    color: rgba(255,255,255,.68);
    line-height: 1.75;
    font-size: .96rem;
    transition: transform .3s ease, box-shadow .3s ease, color .25s ease;
}

.philosophy-item:hover {
    transform: translateY(-3px);
    color: rgba(255,255,255,.88);
}

.philosophy-item:nth-child(1) { border-top-color: rgba(11,110,253,.65); }
.philosophy-item:nth-child(2) { border-top-color: rgba(6,182,212,.65); }
.philosophy-item:nth-child(3) { border-top-color: rgba(139,92,246,.65); }
.philosophy-item:nth-child(4) { border-top-color: rgba(16,185,129,.65); }

.philosophy-item:nth-child(1):hover { box-shadow: 0 14px 38px rgba(11,110,253,.10); }
.philosophy-item:nth-child(2):hover { box-shadow: 0 14px 38px rgba(6,182,212,.10); }
.philosophy-item:nth-child(3):hover { box-shadow: 0 14px 38px rgba(139,92,246,.10); }
.philosophy-item:nth-child(4):hover { box-shadow: 0 14px 38px rgba(16,185,129,.10); }

/* ─── CTA ─── */
.about-cta {
    padding: 100px 20px 220px;
    text-align: center;
}

.about-cta .container {
    max-width: 680px;
    margin: 0 auto;
}

.about-cta h2 {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 700;
    margin-bottom: 18px;
    background: linear-gradient(100deg, #ffffff 35%, rgba(59,130,246,.88) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.about-cta p {
    color: rgba(255,255,255,.60);
    line-height: 1.88;
    margin: 0 auto 34px;
    font-size: 1rem;
}




/* ========================= contact.php ========================= */

/* ─── BACKGROUND ─── */
.page-contact::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        linear-gradient(rgba(0,0,0,.52), rgba(0,0,0,.52)),
        url("../image/bgsite.png") center / cover no-repeat;
    z-index: 0;
}

.page-contact > * {
    position: relative;
    z-index: 1;
}

/* ─── SCROLL REVEAL ─── */
.page-contact .section-block {
    opacity: 0;
    transform: translateY(44px);
    transition:
        opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-contact .section-block.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ─── SECTION ─── */
.contact {
    padding: 140px 20px 180px;
}

.contact .container {
    max-width: 1100px;
    margin: 0 auto;
}

/* ─── HEADER ─── */
.contact-header {
    text-align: center;
    margin-bottom: 56px;
}

.contact-header h1 {
    font-size: clamp(2.2rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 14px;
    background: linear-gradient(110deg, #ffffff 30%, rgba(59,130,246,.90) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.contact-header p {
    color: rgba(255,255,255,.58);
    font-size: 1.05rem;
    line-height: 1.78;
    max-width: 540px;
    margin: 0 auto;
}

/* ─── GRID ─── */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 28px;
    align-items: start;
}

/* ─── FORM ─── */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 36px 38px;
    border-radius: 20px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    position: relative;
    overflow: hidden;
}

.contact-form::before {
    content: "";
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(59,130,246,.50), transparent);
}

.form-group {
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 8px;
}

.form-group label {
    font-size: .76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: rgba(255,255,255,.45);
}

.form-group input,
.form-group textarea {
    padding: 13px 16px;
    border-radius: 11px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(0,0,0,.28);
    color: #fff;
    font-size: .95rem;
    font-family: inherit;
    outline: none;
    resize: vertical;
    transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: rgba(255,255,255,.20);
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: rgba(59,130,246,.55);
    background: rgba(11,110,253,.05);
    box-shadow: 0 0 0 3px rgba(59,130,246,.10), 0 0 20px rgba(11,110,253,.08);
}

/* ─── CHANNEL SELECTOR ─── */
.channel-radio-group {
    display: flex;
    gap: 10px;
}

.channel-option {
    flex: 1;
    cursor: pointer;
}

.channel-option input[type="radio"] {
    display: none;
}

.channel-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 16px;
    border-radius: 11px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(0,0,0,.28);
    color: rgba(255,255,255,.40);
    font-size: .90rem;
    font-family: inherit;
    cursor: pointer;
    transition: border-color .25s ease, background .25s ease,
                color .25s ease, box-shadow .25s ease;
}

.channel-label svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.channel-option input:checked + .channel-label {
    border-color: rgba(59,130,246,.55);
    background: rgba(11,110,253,.12);
    color: #ffffff;
    box-shadow: 0 0 0 3px rgba(59,130,246,.10), 0 0 18px rgba(11,110,253,.08);
}

.channel-option:hover .channel-label {
    border-color: rgba(255,255,255,.14);
    color: rgba(255,255,255,.65);
}

/* ─── PHONE GROUP ─── */
.form-group--phone {
    display: none;
    overflow: hidden;
    animation: phoneGroupReveal .28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes phoneGroupReveal {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── BOUTON ENVOI ─── */
.btn-contact {
    align-self: flex-start;
    padding: 13px 38px;
    border-radius: 999px;
    border: 1px solid rgba(59,130,246,.35);
    background: rgba(11,110,253,.14);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    letter-spacing: .02em;
    transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
}

.btn-contact:hover {
    background: rgba(59,130,246,.26);
    box-shadow: 0 10px 30px rgba(11,110,253,.22);
    transform: translateY(-2px);
}

.btn-contact:active {
    transform: translateY(0);
}

/* ─── INFO CARDS ─── */
.contact-info {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.info-card {
    padding: 22px 22px 22px 26px;
    border-radius: 16px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    border-left-width: 2px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: box-shadow .3s ease;
}

.info-card h3 {
    font-size: .76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 8px;
}

.info-card p {
    color: rgba(255,255,255,.62);
    font-size: .92rem;
    line-height: 1.65;
}

.info-card--blue   { border-left-color: rgba(11,110,253,.70); }
.info-card--cyan   { border-left-color: rgba(6,182,212,.70); }
.info-card--purple { border-left-color: rgba(139,92,246,.70); }

.info-card--blue   h3 { color: rgba(99,160,255,.90); }
.info-card--cyan   h3 { color: rgba(34,211,238,.90); }
.info-card--purple h3 { color: rgba(167,139,250,.90); }

.info-card--blue:hover   { box-shadow: 0 12px 32px rgba(11,110,253,.08); }
.info-card--cyan:hover   { box-shadow: 0 12px 32px rgba(6,182,212,.08); }
.info-card--purple:hover { box-shadow: 0 12px 32px rgba(139,92,246,.08); }

/* ─── REASSURANCE ─── */
.contact-reassurance {
    margin-top: 48px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.reassure-card {
    padding: 26px 22px;
    border-radius: 16px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    border-top-width: 2px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: transform .3s ease, box-shadow .3s ease;
}

.reassure-card:hover {
    transform: translateY(-3px);
}

.reassure-icon {
    display: flex;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.reassure-icon svg {
    width: 18px;
    height: 18px;
}

.reassure-card p {
    color: rgba(255,255,255,.65);
    font-size: .90rem;
    line-height: 1.72;
}

.reassure-card--green  { border-top-color: rgba(16,185,129,.65); }
.reassure-card--blue   { border-top-color: rgba(11,110,253,.65); }
.reassure-card--purple { border-top-color: rgba(139,92,246,.65); }

.reassure-card--green .reassure-icon {
    background: rgba(16,185,129,.12);
    color: rgba(52,211,153,.90);
    border: 1px solid rgba(16,185,129,.20);
}
.reassure-card--blue .reassure-icon {
    background: rgba(11,110,253,.12);
    color: rgba(99,160,255,.90);
    border: 1px solid rgba(11,110,253,.20);
}
.reassure-card--purple .reassure-icon {
    background: rgba(139,92,246,.12);
    color: rgba(167,139,250,.90);
    border: 1px solid rgba(139,92,246,.20);
}

.reassure-card--green:hover  { box-shadow: 0 14px 38px rgba(16,185,129,.08); }
.reassure-card--blue:hover   { box-shadow: 0 14px 38px rgba(11,110,253,.08); }
.reassure-card--purple:hover { box-shadow: 0 14px 38px rgba(139,92,246,.08); }

/* ─── BUDGET SELECTOR ─── */
.budget-radio-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.channel-option--full {
    grid-column: 1 / -1;
}


/* ═══════════════════════════════════════════════════════
   SECTION EXEMPLES — browser mockup + iframe preview
   ═══════════════════════════════════════════════════════ */

.exemples-section {
    padding: 80px 24px;
    max-width: 1100px;
    margin: 0 auto;
}

.exemples-header {
    text-align: center;
    margin-bottom: 56px;
}

.exemples-header .exemples-label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand-color);
    background: var(--brand-color-soft);
    border: 1px solid rgba(11,110,253,.25);
    border-radius: 999px;
    padding: 4px 14px;
    margin-bottom: 16px;
}

.exemples-header h2 {
    font-family: var(--font-title);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
    background: none;
    box-shadow: none;
}

.exemples-header p {
    color: var(--text-muted);
    font-size: 1rem;
    max-width: 520px;
    margin: 0 auto;
}

.exemples-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

.exemples-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.exemple-card {
    border-radius: 16px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden;
    transition: border-color .25s, box-shadow .25s, transform .25s;
}

.exemple-card:hover {
    border-color: rgba(11,110,253,.4);
    box-shadow: 0 16px 40px rgba(11,110,253,.12);
    transform: translateY(-4px);
}

.browser-chrome {
    background: rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.07);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.browser-dots {
    display: flex;
    gap: 5px;
    flex-shrink: 0;
}

.browser-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: block;
}

.browser-dots span:nth-child(1) { background: #ff5f57; }
.browser-dots span:nth-child(2) { background: #ffbd2e; }
.browser-dots span:nth-child(3) { background: #28c840; }

.browser-url {
    flex: 1;
    background: rgba(255,255,255,.06);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: monospace;
}

.browser-preview {
    width: 100%;
    height: 260px;
    overflow: hidden;
    position: relative;
    background: #fff;
}

.browser-preview iframe {
    width: 400%;
    height: 400%;
    border: none;
    transform: scale(0.25);
    transform-origin: top left;
    pointer-events: none;
}

.exemple-card-footer {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.exemple-card-info h3 {
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 2px;
}

.exemple-card-info span {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.exemple-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--brand-color);
    text-decoration: none;
    white-space: nowrap;
    transition: gap .2s;
}

.exemple-card-link:hover { gap: 10px; }


/* ========================= cgv.php ========================= */

/* ─── BACKGROUND ─── */
.page-cgv::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        linear-gradient(rgba(0,0,0,.52), rgba(0,0,0,.52)),
        url("../image/bgsite.png") center / cover no-repeat;
    z-index: 0;
}

.page-cgv > *:not(.back-to-top) {
    position: relative;
    z-index: 1;
}

.page-cgv > .back-to-top {
    position: fixed;
}

/* ─── SCROLL REVEAL ─── */
.page-cgv .section-block {
    opacity: 0;
    transform: translateY(44px);
    transition:
        opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-cgv .section-block.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ─── HERO ─── */
.cgv-hero {
    padding: 140px 20px 56px;
    text-align: center;
}

.cgv-hero h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 14px;
    background: linear-gradient(110deg, #ffffff 30%, rgba(11,110,253,.90) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cgv-updated {
    font-size: 0.8rem;
    color: rgba(255,255,255,.38);
    letter-spacing: .025em;
}

/* ─── BODY ─── */
.cgv-body {
    padding: 0 20px 60px;
}

.cgv-container {
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ─── ARTICLE CARDS ─── */
.cgv-section {
    padding: 28px 32px;
    border-radius: 18px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    position: relative;
    overflow: hidden;
    transition: border-color .3s ease, box-shadow .3s ease;
}

.cgv-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(11,110,253,.40), transparent);
}

.cgv-section:hover {
    border-color: rgba(11,110,253,.16);
    box-shadow: 0 22px 55px rgba(0,0,0,.22), 0 0 30px rgba(11,110,253,.05);
}

/* ─── ARTICLE HEADINGS ─── */
.cgv-section h2 {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 16px;
    line-height: 1.2;
}

.cgv-article-num {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    flex-shrink: 0;
    color: rgba(11,110,253,.35);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}

.cgv-article-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: rgba(255,255,255,.88);
    letter-spacing: .01em;
}

/* ─── PARAGRAPHS ─── */
.cgv-section p {
    font-size: 0.875rem;
    line-height: 1.8;
    color: rgba(255,255,255,.65);
    margin-bottom: 10px;
}

.cgv-section p:last-child { margin-bottom: 0; }

.cgv-section p strong {
    color: rgba(255,255,255,.88);
    font-weight: 600;
}

/* ─── LISTS ─── */
.cgv-section ul {
    list-style: none;
    padding: 0;
    margin: 14px 0 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cgv-section ul li {
    font-size: 0.855rem;
    color: rgba(255,255,255,.68);
    line-height: 1.65;
    padding: 11px 16px 11px 42px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 10px;
    position: relative;
    transition: background .22s ease, border-color .22s ease, color .22s ease;
}

.cgv-section ul li::before {
    content: "▸";
    position: absolute;
    left: 16px;
    top: 12px;
    color: rgba(11,110,253,.65);
    font-size: .78rem;
    line-height: 1;
}

.cgv-section ul li:hover {
    background: rgba(11,110,253,.06);
    border-color: rgba(11,110,253,.16);
    color: rgba(255,255,255,.88);
}

.cgv-section ul li strong {
    color: rgba(255,255,255,.88);
    font-weight: 600;
}

/* ─── CTA FOOTER ─── */
.cgv-back-link {
    text-align: center;
    padding: 20px 0 200px;
}

/* ─── FOOTER LINK ─── */
.footer-cgv-link {
    color: rgba(255,255,255,.5);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-cgv-link:hover {
    color: var(--brand-color, #0b6efd);
}