/* ============================================
   Omega Kube - Styles Globaux
   ============================================ */

/* Custom Fonts */
@font-face {
    font-family: 'OmegaLarge';
    src: url('../fonts/custom_font_large.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'OmegaSmall';
    src: url('../fonts/custom_font_small.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat-Bold';
    src: url('../fonts/Montserrat/static/Montserrat-Bold.ttf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat-BoldItalic';
    src: url('../fonts/Montserrat/static/Montserrat-BoldItalic.ttf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ============================================
   Variables & Thèmes
   ============================================ */
:root {
    --bg-deep: #1a0f1f;
    --bg-secondary: #251528;
    --bg-tertiary: #2d1b33;
    --accent-primary: #8b3a62;
    --accent-secondary: #a64d79;
    --accent-light: #c77daa;
    --accent-glow: #d4a5c9;
    --text-primary: #ffffff;
    --text-secondary: #c9b8d0;
    --text-muted: #8a7a91;
    --glass-bg: rgba(45, 27, 51, 0.7);
    --glass-border: rgba(167, 77, 121, 0.3);
    --card-bg: rgba(37, 21, 40, 0.8);
    --input-bg: #1a0f1f;
    --shadow-color: rgba(139, 58, 98, 0.3);
    --shape-color: rgba(255, 255, 255, 0.08);
    --shape-border: rgba(255, 255, 255, 0.15);
}

[data-theme="light"] {
    --bg-deep: #faf7fb;
    --bg-secondary: #f3edf5;
    --bg-tertiary: #ebe3ee;
    --accent-primary: #8b3a62;
    --accent-secondary: #a64d79;
    --accent-light: #c77daa;
    --accent-glow: #8b3a62;
    --text-primary: #1a0f1f;
    --text-secondary: #4a3a52;
    --text-muted: #6a5a72;
    --glass-bg: rgba(255, 255, 255, 0.9);
    --glass-border: rgba(139, 58, 98, 0.2);
    --card-bg: rgba(255, 255, 255, 0.95);
    --input-bg: #ffffff;
    --shadow-color: rgba(139, 58, 98, 0.15);
    --shape-color: rgba(139, 58, 98, 0.06);
    --shape-border: rgba(139, 58, 98, 0.12);
}

/* ============================================
   Reset & Base
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Montserrat-Bold', 'Montserrat-BoldItalic',/* 'OmegaSmall',*/ 'Segoe UI', sans-serif;
    background: var(--bg-deep);
    color: var(--text-primary);
    overflow-x: hidden;
    line-height: 1.6;
    transition: background 0.4s ease, color 0.4s ease;
}

::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--bg-deep);
}
::-webkit-scrollbar-thumb {
    background: var(--accent-primary);
    border-radius: 4px;
}

/* ============================================
   Background Effects
   ============================================ */
.geo-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    background: linear-gradient(135deg, var(--bg-deep) 0%, var(--bg-secondary) 50%, var(--bg-tertiary) 100%);
}

.grid-pattern {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(circle, var(--shape-border) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.5;
}

.geo-shapes {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.shape {
    position: absolute;
    opacity: 0.6;
    animation: floatShape 20s ease-in-out infinite;
}

.shape-triangle {
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 52px solid var(--shape-color);
}

.shape-triangle-outline {
    width: 60px;
    height: 52px;
    background: transparent;
    border: 2px solid var(--shape-border);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.shape-square {
    width: 40px;
    height: 40px;
    background: var(--shape-color);
}

.shape-square-outline {
    width: 50px;
    height: 50px;
    background: transparent;
    border: 2px solid var(--shape-border);
}

.shape-rect {
    width: 80px;
    height: 30px;
    background: var(--shape-color);
}

.shape-diamond {
    width: 40px;
    height: 40px;
    background: var(--shape-color);
    transform: rotate(45deg);
}

.shape-dots {
    display: grid;
    grid-template-columns: repeat(4, 8px);
    grid-template-rows: repeat(4, 8px);
    gap: 6px;
}

.shape-dots span {
    width: 4px;
    height: 4px;
    background: var(--shape-border);
    border-radius: 50%;
}

.shape:nth-child(1) { top: 10%; left: 5%; animation-delay: 0s; }
.shape:nth-child(2) { top: 20%; right: 10%; animation-delay: -3s; }
.shape:nth-child(3) { top: 60%; left: 8%; animation-delay: -6s; }
.shape:nth-child(4) { top: 75%; right: 5%; animation-delay: -9s; }
.shape:nth-child(5) { top: 40%; left: 3%; animation-delay: -12s; }
.shape:nth-child(6) { top: 85%; left: 15%; animation-delay: -15s; }
.shape:nth-child(7) { top: 15%; right: 20%; animation-delay: -4s; }
.shape:nth-child(8) { top: 50%; right: 3%; animation-delay: -8s; }
.shape:nth-child(9) { top: 30%; left: 12%; animation-delay: -11s; }
.shape:nth-child(10) { top: 90%; right: 15%; animation-delay: -14s; }

@keyframes floatShape {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-20px) rotate(5deg); }
    50% { transform: translateY(-10px) rotate(-3deg); }
    75% { transform: translateY(-25px) rotate(3deg); }
}

/* ============================================
   Navigation
   ============================================ */
nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 1.5rem 2rem;
    transition: all 0.4s ease;
}

nav.scrolled {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--glass-border);
    padding: 1rem 2rem;
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-family: 'OmegaLarge', sans-serif;
    font-size: 1.6rem;
    text-decoration: none;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: color 0.3s ease;
}

.logo-icon {
    width: 45px;
    height: 45px;
    flex-shrink: 0;
}

.logo-icon img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.logo-text {
    display: flex;
    align-items: baseline;
    gap: 0.15rem;
}

.logo-text .omega { color: var(--text-primary); }
.logo-text .kube { color: var(--accent-light); }
.logo-short { display: none; }

.nav-right {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.nav-links {
    display: flex;
    gap: 2.5rem;
    list-style: none;
}

.nav-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: color 0.3s ease;
    position: relative;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent-primary);
    transition: width 0.3s ease;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--text-primary);
}

.nav-links a:hover::after,
.nav-links a.active::after {
    width: 100%;
}

/* Theme Toggle */
.theme-toggle {
    width: 56px;
    height: 30px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 50px;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    padding: 4px;
    flex-shrink: 0;
}

.theme-toggle:hover {
    border-color: var(--accent-primary);
}

.theme-toggle-thumb {
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border-radius: 50%;
    transition: transform 0.3s ease;
    box-shadow: 0 2px 10px var(--shadow-color);
}

[data-theme="light"] .theme-toggle-thumb {
    transform: translateX(26px);
}

.theme-toggle .icon-moon,
.theme-toggle .icon-sun {
    position: absolute;
    width: 14px;
    height: 14px;
    transition: opacity 0.3s ease;
}

.theme-toggle .icon-moon {
    left: 8px;
    opacity: 1;
    color: var(--text-muted);
}

.theme-toggle .icon-sun {
    right: 8px;
    opacity: 0.4;
    color: var(--text-muted);
}

[data-theme="light"] .theme-toggle .icon-moon { opacity: 0.4; }
[data-theme="light"] .theme-toggle .icon-sun { opacity: 1; }

.mobile-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 5px;
    flex-shrink: 0;
}

.mobile-toggle span {
    width: 25px;
    height: 2px;
    background: var(--text-primary);
    transition: all 0.3s ease;
}

/* Responsive: show mobile toggle and hide nav links on small screens */
@media (max-width:880px) {
  .nav-links {
    display: none;
    position: absolute;
    right: 2rem;
    top: 100%;
    background: var(--glass-bg);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(2,6,23,.12);
    flex-direction: column;
    gap: 1rem;
    width: auto;
    min-width: 160px;
    z-index: 1002;
  }
  .nav-links.active { display: block; }
  .mobile-toggle { display: flex; }

  /* Debug helpers: make elements clearly visible during testing */
  /* .mobile-toggle { outline: 2px solid rgba(255,0,0,0.9) !important; }
  .nav-links { outline: 2px dashed rgba(0,128,255,0.9) !important; }
  .nav-links { z-index: 1100 !important; } */
}

/* ============================================
   Hero Sections
   ============================================ */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 6rem 2rem 4rem;
}

.page-hero {
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 8rem 2rem 4rem;
    text-align: center;
}

/* Le contenu du page-hero est toujours visible dès le chargement */
.page-hero .reveal,
.page-hero-content {
    opacity: 1;
    transform: none;
    transition: none;
    animation: fadeInUp 0.7s ease forwards;
}
.page-hero .reveal.active {
    opacity: 1;
    transform: none;
}

.hero-content {
    text-align: center;
    max-width: 900px;
    z-index: 1;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    padding: 0.5rem 1.25rem;
    border-radius: 4px;
    font-size: 0.85rem;
    color: var(--accent-light);
    margin-bottom: 2rem;
    backdrop-filter: blur(10px);
    animation: fadeInUp 0.8s ease forwards;
}

.hero-badge::before {
    content: '';
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 10px solid var(--accent-light);
}

.hero h1,
.page-hero h1 {
    font-family: 'OmegaLarge', sans-serif;
    font-size: clamp(3rem, 8vw, 5.5rem);
    font-weight: normal;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    animation: fadeInUp 0.8s ease 0.1s forwards;
    opacity: 0;
}

.page-hero h1 {
    font-size: clamp(2.5rem, 6vw, 4rem);
    opacity: 1;
    animation: fadeInUp 0.8s ease forwards;
}

.hero h1 .highlight,
.page-hero h1 .highlight {
    color: var(--accent-light);
}

.hero p,
.page-hero p {
    font-size: 1.25rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto 2.5rem;
    animation: fadeInUp 0.8s ease 0.2s forwards;
    opacity: 0;
}

.page-hero p {
    margin-bottom: 0;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    animation: fadeInUp 0.8s ease 0.3s forwards;
    opacity: 0;
}

/* ============================================
   Buttons
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    border-radius: 4px;
    font-family: 'Montserrat-Bold', 'Montserrat-BoldItalic', /*'OmegaSmall',*/ sans-serif;
    font-weight: 500;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: white;
    box-shadow: 0 4px 20px var(--shadow-color);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px var(--shadow-color);
}

.btn-secondary {
    background: var(--glass-bg);
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(10px);
}

.btn-secondary:hover {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   Sections
   ============================================ */
section {
    padding: 8rem 2rem;
    position: relative;
}

.section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 5rem;
}

.section-tag {
    font-size: 0.85rem;
    color: var(--accent-light);
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.section-tag::before,
.section-tag::after {
    content: '';
    width: 30px;
    height: 1px;
    background: var(--accent-primary);
}

.section-title {
    font-family: 'OmegaLarge', sans-serif;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: normal;
    margin-bottom: 1rem;
}

.section-desc {
    color: var(--text-secondary);
    font-size: 1.1rem;
}

/* ============================================
   About Section
   ============================================ */
.about {
    background: linear-gradient(180deg, transparent 0%, var(--bg-secondary) 50%, transparent 100%);
}

.about-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.about-content h3 {
    font-family: 'OmegaLarge', sans-serif;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    color: var(--accent-light);
}

.about-content p {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
}

.about-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}

.stat-item {
    text-align: center;
    padding: 1.5rem;
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.stat-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
}

.stat-number {
    font-family: 'OmegaLarge', sans-serif;
    font-size: 2rem;
    color: var(--accent-light);
}

.stat-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.about-card {
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    padding: 3rem;
    backdrop-filter: blur(20px);
    position: relative;
    overflow: hidden;
}

.about-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--accent-primary), var(--accent-secondary));
}

.about-card h4 {
    font-family: 'OmegaLarge', sans-serif;
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.about-card p {
    color: var(--text-secondary);
    line-height: 1.8;
}

.deco-triangle {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 35px solid var(--accent-primary);
    opacity: 0.3;
    bottom: 20px;
    right: 20px;
}

/* ============================================
   Services
   ============================================ */
.services-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.service-card {
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    padding: 2.5rem;
    backdrop-filter: blur(10px);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.service-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

.service-card:hover {
    transform: translateY(-10px);
    border-color: var(--accent-primary);
    box-shadow: 0 20px 40px var(--shadow-color);
}

.service-card:hover::after {
    transform: scaleX(1);
}

.service-icon {
    width: 70px;
    height: 70px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.service-icon::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.service-icon svg {
    width: 28px;
    height: 28px;
    color: white;
    position: relative;
    z-index: 1;
}

.service-card h3 {
    font-family: 'OmegaLarge', sans-serif;
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.service-card p {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.service-features {
    list-style: none;
}

.service-features li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
}

.service-features li::before {
    content: '';
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid var(--accent-light);
    flex-shrink: 0;
}

/* Service Detail */
.service-detail {
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    padding: 3rem;
    margin-bottom: 3rem;
    position: relative;
    overflow: hidden;
}

.service-detail::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
}

.service-detail-header {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 2rem;
}

.service-detail-icon {
    width: 100px;
    height: 100px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.service-detail-icon::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.service-detail-icon svg {
    width: 40px;
    height: 40px;
    color: white;
    position: relative;
    z-index: 1;
}

.service-detail h2 {
    font-family: 'OmegaLarge', sans-serif;
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.service-detail h2 + p {
    color: var(--text-secondary);
    font-size: 1.1rem;
}

.service-detail-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}

.service-detail-content h3 {
    font-family: 'OmegaLarge', sans-serif;
    font-size: 1.25rem;
    margin-bottom: 1rem;
    color: var(--accent-light);
}

.service-detail-content p {
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.service-detail-content ul {
    list-style: none;
}

.service-detail-content ul li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.service-detail-content ul li::before {
    content: '';
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid var(--accent-light);
    flex-shrink: 0;
}

/* ============================================
   Team Carousel
   ============================================ */
.team {
    background: linear-gradient(180deg, transparent 0%, var(--bg-secondary) 50%, transparent 100%);
}

.team-carousel-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    padding: 0.5rem 1rem;
}

.team-carousel {
    display: flex;
    transition: transform 0.5s ease;
}

.team-card {
    flex: 0 0 calc(33.333% - 2rem);
    margin: 0 1rem;
    text-align: center;
    padding: 2rem;
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    backdrop-filter: blur(10px);
    transition: all 0.4s ease;
}

.team-card:hover {
    border-color: var(--accent-primary);
    box-shadow: 0 5px 20px var(--shadow-color);
    cursor: pointer;
}

.team-avatar {
    width: 120px;
    height: 120px;
    margin: 0 auto 1.5rem;
    position: relative;
}

.team-avatar::before {
    content: '';
    position: absolute;
    inset: -4px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    clip-path: polygon(29.3% 0%, 70.7% 0%, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0% 70.7%, 0% 29.3%);
}

.team-avatar-inner {
    position: absolute;
    inset: 0;
    background: var(--bg-secondary);
    clip-path: polygon(29.3% 0%, 70.7% 0%, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0% 70.7%, 0% 29.3%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'OmegaLarge', sans-serif;
    font-size: 2rem;
    overflow: hidden;
    transition: background 0.3s ease;
}

.team-avatar-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-card h4 {
    font-family: 'OmegaLarge', sans-serif;
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}

.team-role {
    color: var(--accent-light);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.team-desc {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Carousel Controls */
.carousel-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}

.carousel-btn {
    width: 50px;
    height: 50px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--text-primary);
}

.carousel-btn:hover {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}

.carousel-btn svg {
    width: 24px;
    height: 24px;
}

.carousel-dots {
    display: flex;
    gap: 0.5rem;
}

.carousel-dot {
    width: 10px;
    height: 10px;
    background: var(--glass-border);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.carousel-dot.active {
    background: var(--accent-primary);
    width: 30px;
    border-radius: 5px;
}

/* ============================================
   Portfolio
   ============================================ */
.portfolio-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.portfolio-item {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    aspect-ratio: 4/3;
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    cursor: pointer;
    transition: all 0.4s ease;
}

.portfolio-item:hover {
    transform: scale(1.02);
    box-shadow: 0 20px 40px var(--shadow-color);
}

.portfolio-item.hidden {
    display: none;
}

.portfolio-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    /* opacity retiré — géré par portfolio-content gradient */
}

.portfolio-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2rem;
    /* Gradient sombre uniquement en bas pour lisibilité du texte sans masquer l'image */
    background: linear-gradient(180deg, transparent 55%, rgba(10,10,15,0.92) 100%);
    z-index: 2;
}

.portfolio-tag {
    font-size: 0.75rem;
    color: var(--accent-light);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.portfolio-tag::before {
    content: '';
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 7px solid var(--accent-light);
}

.portfolio-item h4 {
    font-family: 'OmegaLarge', sans-serif;
    font-size: 1.25rem;
    color: #ffffff; /* Toujours blanc — lisible sur le gradient sombre en bas */
}

/* En mode clair, forcer le blanc sur les textes des cartes portfolio */
[data-theme="light"] .portfolio-item h4,
[data-theme="light"] .portfolio-tag,
[data-theme="light"] .portfolio-tag::before {
    color: #ffffff;
}

.portfolio-item p {
    display: none; /* Description masquée dans les cartes — visible uniquement dans la modal */
}

/* Portfolio Detail */
.portfolio-detail {
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 3rem;
}

.portfolio-detail-image {
    width: 100%;
    height: 300px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
}

.portfolio-detail-content {
    padding: 2.5rem;
}

.portfolio-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.portfolio-detail h2 {
    font-family: 'OmegaLarge', sans-serif;
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.portfolio-detail-meta {
    display: flex;
    gap: 2rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.portfolio-detail-meta span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.portfolio-detail-meta svg {
    width: 16px;
    height: 16px;
}

.portfolio-detail p {
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.portfolio-detail-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 2rem;
    list-style: none;
}

.portfolio-detail-features li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-secondary);
}

.portfolio-detail-features li::before {
    content: '';
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid var(--accent-light);
    flex-shrink: 0;
}

/* ============================================
   Contact
   ============================================ */
.contact {
    background: linear-gradient(180deg, transparent 0%, var(--bg-secondary) 100%);
}

.contact-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
}

.contact-info h3 {
    font-family: 'OmegaLarge', sans-serif;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

.contact-info p {
    color: var(--text-secondary);
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

.contact-links {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.contact-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-link:hover {
    color: var(--accent-light);
}

.contact-link-icon {
    width: 50px;
    height: 50px;
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.contact-link:hover .contact-link-icon {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}

.contact-form {
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    padding: 2.5rem;
    backdrop-filter: blur(10px);
    position: relative;
}

.contact-form::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 1rem;
    background: var(--input-bg);
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    color: var(--text-primary);
    font-family: 'Montserrat-Bold', 'Montserrat-BoldItalic', /*'OmegaSmall',*/ sans-serif;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--shadow-color);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.form-submit {
    width: 100%;
}

/* ============================================
   Footer
   ============================================ */
footer {
    padding: 4rem 2rem 2rem;
    border-top: 1px solid var(--glass-border);
}

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

.footer-links {
    display: flex;
    gap: 2rem;
}

.footer-links a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: var(--text-primary);
}

.footer-social {
    display: flex;
    gap: 1rem;
}

.footer-social a {
    width: 44px;
    height: 44px;
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.footer-social a svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    display: block;
}

.footer-social a:hover {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
}

/* ── Partners Section ──────────────────────────────────────────────────────── */
.partners {
    padding: 6rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.partners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 3rem;
}

.partner-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 1.5rem;
    text-decoration: none;
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.partner-card:hover {
    border-color: var(--accent-primary);
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(var(--accent-primary-rgb, 142, 36, 170), 0.15);
}

.partner-avatar {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'OmegaLarge', sans-serif;
    font-size: 1rem;
    color: white;
    flex-shrink: 0;
}

.partner-info h4 {
    font-family: 'OmegaLarge', sans-serif;
    font-size: 1rem;
    margin-bottom: 0.25rem;
    color: var(--text-primary);
}

.partner-info p {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* ── Easter Egg ────────────────────────────────────────────────────────────── */
#easter-egg-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn 0.3s ease;
}

.easter-egg-box {
    background: var(--card-bg);
    border: 2px solid var(--accent-primary);
    border-radius: 12px;
    padding: 3rem 2.5rem;
    text-align: center;
    max-width: 480px;
    width: 90%;
    animation: scaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.easter-egg-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    display: block;
}

.easter-egg-box h2 {
    font-family: 'OmegaLarge', sans-serif;
    font-size: 1.5rem;
    color: var(--accent-light);
    margin-bottom: 1rem;
}

.easter-egg-box p {
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

@keyframes scaleIn {
    from { transform: scale(0.7); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.footer-bottom {
    max-width: 1200px;
    margin: 2rem auto 0;
    padding-top: 2rem;
    border-top: 1px solid var(--glass-border);
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* ============================================
   Animations
   ============================================ */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s ease;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 1024px) {
    .services-grid,
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .team-card {
        flex: 0 0 calc(50% - 2rem);
    }
}

@media (max-width: 768px) {
    nav {
        padding: 1rem;
    }

    nav.scrolled {
        padding: 0.75rem 1rem;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--glass-bg);
        backdrop-filter: blur(20px);
        flex-direction: column;
        padding: 2rem;
        gap: 1.5rem;
        border-bottom: 1px solid var(--glass-border);
    }

    .nav-links.active {
        display: flex;
    }

    .mobile-toggle {
        display: flex;
    }

    .mobile-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .mobile-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .mobile-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }

    .nav-right {
        gap: 0.75rem;
    }

    .logo-text .logo-full {
        display: none;
    }

    .logo-short {
        display: flex !important;
        align-items: baseline;
        gap: 0.1rem;
    }

    .logo-short .omega-symbol {
        color: var(--text-primary);
    }

    .logo-short .kube-short {
        color: var(--accent-light);
    }

    .logo-icon {
        width: 35px;
        height: 35px;
    }

    .logo {
        font-size: 1.3rem;
        gap: 0.5rem;
    }

    .about-grid,
    .contact-wrapper {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .services-grid,
    .portfolio-grid {
        grid-template-columns: 1fr;
    }

    .service-detail-content,
    .portfolio-detail-features {
        grid-template-columns: 1fr;
    }

    .service-detail-header {
        flex-direction: column;
        text-align: center;
    }

    .team-card {
        flex: 0 0 calc(100% - 2rem);
    }

    section {
        padding: 5rem 1.5rem;
    }

    .hero {
        padding: 8rem 1.5rem 4rem;
    }

    .footer-content {
        flex-direction: column;
        text-align: center;
    }

    .footer-links {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .about-stats {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .theme-toggle {
        width: 48px;
        height: 26px;
    }

    .theme-toggle-thumb {
        width: 18px;
        height: 18px;
    }

    [data-theme="light"] .theme-toggle-thumb {
        transform: translateX(22px);
    }

    .carousel-controls {
        flex-wrap: wrap;
    }
}

/* ============================================
   Team Member Modal
   ============================================ */
.team-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.team-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.team-modal {
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    max-width: 500px;
    width: 100%;
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    position: relative;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s ease;
    overscroll-behavior: contain;
}

.team-modal-overlay.active .team-modal {
    transform: scale(1) translateY(0);
}

.team-modal-header {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    padding: 2rem;
    text-align: center;
    position: relative;
}

.team-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: all 0.3s ease;
}

.team-modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.team-modal-close svg {
    width: 20px;
    height: 20px;
}

.team-modal-avatar {
    width: 120px;
    height: 120px;
    margin: 0 auto;
    position: relative;
}

.team-modal-avatar::before {
    content: '';
    position: absolute;
    inset: -4px;
    background: rgba(255, 255, 255, 0.3);
    clip-path: polygon(29.3% 0%, 70.7% 0%, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0% 70.7%, 0% 29.3%);
}

.team-modal-avatar-inner {
    position: absolute;
    inset: 0;
    background: var(--bg-secondary);
    clip-path: polygon(29.3% 0%, 70.7% 0%, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0% 70.7%, 0% 29.3%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'OmegaLarge', sans-serif;
    font-size: 2.5rem;
    color: var(--text-primary);
}

.team-modal-name {
    font-family: 'OmegaLarge', sans-serif;
    font-size: 1.5rem;
    color: white;
    margin-top: 1rem;
}

.team-modal-role {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
    margin-top: 0.25rem;
}

.team-modal-content {
    padding: 2rem;
}

.team-modal-bio {
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.team-modal-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.team-modal-stat {
    text-align: center;
    padding: 1rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 4px;
}

.team-modal-stat-value {
    font-family: 'OmegaLarge', sans-serif;
    font-size: 1.25rem;
    color: var(--accent-light);
}

.team-modal-stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.team-modal-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.team-modal-skill {
    padding: 0.5rem 1rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    transition: all 0.3s ease;
}

.team-modal-skill:hover {
    border-color: var(--accent-primary);
    color: var(--accent-light);
}

.team-modal-social {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--glass-border);
}

.team-modal-social a {
    width: 40px;
    height: 40px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all 0.3s ease;
}

.team-modal-social a:hover {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
}

.team-modal-social a svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    display: block;
}

@media (max-width: 480px) {
    .team-modal-stats {
        grid-template-columns: repeat(3, 1fr);
    }

    .team-modal {
        max-height: calc(100dvh - 1rem);
        border-radius: 6px;
    }
    
    .team-modal-header {
        padding: 1.5rem 1rem;
    }
    
    .team-modal-content {
        padding: 1.25rem 1rem;
    }

    .team-modal-avatar {
        width: 90px;
        height: 90px;
    }

    .team-modal-name {
        font-size: 1.2rem;
    }
}

@media (max-width: 360px) {
    .team-modal-stats {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   Pagination
   ============================================ */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 4rem;
    flex-wrap: wrap;
}

.pagination-btn {
    width: 44px;
    height: 44px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary);
    font-family: 'Montserrat-Bold', 'Montserrat-BoldItalic', /*'OmegaSmall',*/ sans-serif;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.pagination-btn:hover:not(:disabled) {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
}

.pagination-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pagination-btn.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
}

.pagination-btn svg {
    width: 20px;
    height: 20px;
}

.pagination-arrow {
    width: 50px;
}

.pagination-ellipsis {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 1.2rem;
    letter-spacing: 2px;
}

.pagination-info {
    width: 100%;
    text-align: center;
    margin-top: 1rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

@media (max-width: 480px) {
    .pagination-btn {
        width: 38px;
        height: 38px;
        font-size: 0.85rem;
    }
    
    .pagination-arrow {
        width: 44px;
    }
}

/* ============================================
   Bento Grid - Projets Phares
   ============================================ */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto;
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.bento-item {
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.4s ease;
    position: relative;
}

.bento-item:hover {
    border-color: var(--accent-primary);
    box-shadow: 0 20px 40px var(--shadow-color);
    transform: translateY(-5px);
}

/* Bento Project Layout */
.bento-project {
    grid-column: span 12;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 1.5rem;
    padding: 0;
    background: transparent;
    border: none;
}

.bento-project:hover {
    transform: none;
    box-shadow: none;
}

.bento-project .bento-image {
    grid-column: 1;
    grid-row: 1 / 3;
    min-height: 400px;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

/* Pas d'overlay sur le bento — juste gradient bas pour lisibilité texte */
.bento-project .bento-image::before {
    display: none;
}

/* Gradient sombre en bas pour le texte */
.bento-project .bento-image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(10,10,15,0.9) 0%, transparent 100%);
    z-index: 2;
    pointer-events: none;
}

.bento-image-content {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    right: 2rem;
    z-index: 3;
}

.bento-image-content .portfolio-tag {
    margin-bottom: 0.75rem;
}

.bento-image-content h3 {
    font-family: 'OmegaLarge', sans-serif;
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: #ffffff;
}

.bento-image-content p {
    color: rgba(255,255,255,0.85);
    font-size: 1rem;
}

/* Mode clair — forcer blanc sur textes bento (gradient sombre garantit lisibilité) */
[data-theme="light"] .bento-image-content h3,
[data-theme="light"] .bento-image-content p,
[data-theme="light"] .bento-image-content .portfolio-tag {
    color: #ffffff;
}

/* Mode clair — tag catégorie dans la modal projet : couleur contrastée */
[data-theme="light"] .project-modal .portfolio-tag,
[data-theme="light"] #modal-category {
    color: var(--accent-primary);
}
[data-theme="light"] .project-modal .portfolio-tag::before,
[data-theme="light"] #modal-category::before {
    border-bottom-color: var(--accent-primary);
}

/* Stats Grid */
.bento-stats {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.bento-stat {
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
}

.bento-stat:hover {
    border-color: var(--accent-primary);
    background: var(--glass-bg);
}

.bento-stat-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.bento-stat-icon svg {
    width: 24px;
    height: 24px;
    color: white;
}

.bento-stat-value {
    font-family: 'OmegaLarge', sans-serif;
    font-size: 1.75rem;
    color: var(--accent-light);
    margin-bottom: 0.25rem;
}

.bento-stat-label {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Info Card */
.bento-info {
    grid-column: 2;
    grid-row: 2;
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
}

.bento-info h4 {
    font-family: 'OmegaLarge', sans-serif;
    font-size: 1.1rem;
    color: var(--accent-light);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bento-info h4::before {
    content: '';
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid var(--accent-light);
}

.bento-info p {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

.bento-features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.bento-feature {
    padding: 0.4rem 0.8rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    transition: all 0.3s ease;
}

.bento-feature:hover {
    border-color: var(--accent-primary);
    color: var(--accent-light);
}

/* Tech Stack */
.bento-tech {
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 1.5rem;
}

.bento-tech h4 {
    font-family: 'OmegaLarge', sans-serif;
    font-size: 0.9rem;
    color: var(--accent-light);
    margin-bottom: 1rem;
}

.bento-tech-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.bento-tech-item {
    padding: 0.5rem 1rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.bento-tech-item:hover {
    border-color: var(--accent-primary);
    color: var(--accent-light);
}

.bento-tech-item svg {
    width: 16px;
    height: 16px;
}

/* Alternate Layout (Image Right) */
.bento-project.reverse .bento-image {
    grid-column: 2;
    grid-row: 1 / 3;
}

.bento-project.reverse .bento-stats {
    grid-column: 1;
    grid-row: 1;
}

.bento-project.reverse .bento-info {
    grid-column: 1;
    grid-row: 2;
}

/* Bento Divider */
.bento-divider {
    grid-column: span 12;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--glass-border), transparent);
    margin: 2rem 0;
}

@media (max-width: 1024px) {
    .bento-project {
        grid-template-columns: 1fr;
    }

    .bento-project .bento-image {
        grid-column: 1;
        grid-row: 1;
        min-height: 300px;
    }

    .bento-project .bento-stats {
        grid-column: 1;
        grid-row: 2;
    }

    .bento-project .bento-info {
        grid-column: 1;
        grid-row: 3;
    }

    .bento-project.reverse .bento-image,
    .bento-project.reverse .bento-stats,
    .bento-project.reverse .bento-info {
        grid-column: 1;
    }

    .bento-project.reverse .bento-image { grid-row: 1; }
    .bento-project.reverse .bento-stats { grid-row: 2; }
    .bento-project.reverse .bento-info { grid-row: 3; }
}

@media (max-width: 480px) {
    .bento-stats {
        grid-template-columns: 1fr;
    }

    .bento-project .bento-image {
        min-height: 250px;
    }

    .bento-image-content h3 {
        font-size: 1.5rem;
    }
}

/* ============================================
   Project Modal - Galerie
   ============================================ */
.project-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.project-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.project-modal {
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    position: relative;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.project-modal-overlay.active .project-modal {
    transform: scale(1) translateY(0);
}

.project-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    transition: all 0.3s ease;
    z-index: 10;
}

.project-modal-close:hover {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}

.project-modal-close svg {
    width: 24px;
    height: 24px;
}

/* Gallery */
.project-gallery {
    position: relative;
    width: 100%;
    height: 350px;
    overflow: hidden;
}

.project-gallery-slides {
    position: relative;
    width: 100%;
    height: 100%;
}

.project-gallery-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s ease;
    transform: translateX(100%);
    will-change: transform, opacity;
}

/* Slide à gauche de la courante */
.project-gallery-slide.slide-left {
    transform: translateX(-100%);
    opacity: 0;
}

/* Slide à droite de la courante */
.project-gallery-slide.slide-right {
    transform: translateX(100%);
    opacity: 0;
}

/* Slide active — visible */
.project-gallery-slide.active {
    opacity: 1;
    transform: translateX(0) !important;
    pointer-events: auto;
}

.project-gallery-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(139, 58, 98, 0.4), rgba(45, 27, 51, 0.6));
}

.gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    transition: all 0.3s ease;
    z-index: 5;
}

.gallery-nav:hover {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}

.gallery-nav svg {
    width: 20px;
    height: 20px;
}

.gallery-nav.prev { left: 1rem; }
.gallery-nav.next { right: 1rem; }

.gallery-dots {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    z-index: 5;
}

.gallery-dot {
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.gallery-dot.active {
    background: white;
    width: 30px;
    border-radius: 5px;
}

/* Modal Content */
.project-modal-content {
    padding: 2rem;
    overflow-y: auto;
    flex-grow: 1;
}

.project-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.project-modal-header h2 {
    font-family: 'OmegaLarge', sans-serif;
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

.project-modal-meta {
    display: flex;
    gap: 1.5rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.project-modal-meta span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.project-modal-meta svg {
    width: 16px;
    height: 16px;
}

.project-modal-desc {
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 2rem;
}

/* Modal Tabs */
.project-modal-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--glass-border);
    padding-bottom: 1rem;
}

.project-modal-tab {
    padding: 0.75rem 1.25rem;
    background: transparent;
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    color: var(--text-secondary);
    font-family: 'Montserrat-Bold', 'Montserrat-BoldItalic', /*'OmegaSmall',*/ sans-serif;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.project-modal-tab:hover,
.project-modal-tab.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
}

.project-modal-tab-content {
    display: none;
}

.project-modal-tab-content.active {
    display: block;
}

/* Features Grid */
.project-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.project-feature-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    color: var(--text-secondary);
    transition: all 0.3s ease;
}

.project-feature-item:hover {
    border-color: var(--accent-primary);
}

.project-feature-item::before {
    content: '';
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid var(--accent-light);
    flex-shrink: 0;
}

/* Tech Stack Grid */
.project-tech-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* project-tech-item and project-stats-grid → see end of file */

/* project-stat-card-value / label → see end of file */

@media (max-width: 768px) {
    .project-modal {
        max-height: 95vh;
        margin: 0.5rem;
    }

    .project-gallery {
        height: 250px;
    }

    .project-modal-content {
        padding: 1.5rem;
    }

    .project-features-grid,
    .project-stats-grid {
        grid-template-columns: 1fr;
    }

    .project-modal-tabs {
        flex-wrap: wrap;
    }
}

/* Portfolio Item Click State */
.portfolio-item {
    cursor: pointer;
}

.portfolio-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: transparent;
    z-index: 3;
    transition: background 0.3s ease;
}

.portfolio-item:hover::before {
    background: rgba(139, 58, 98, 0.08);
}

.portfolio-item:active {
    transform: scale(0.98);
}

/* ============================================
   Process Timeline
   ============================================ */
.process-section {
    padding: 6rem 2rem;
    background: linear-gradient(180deg, transparent 0%, var(--bg-secondary) 50%, transparent 100%);
}

.process-timeline {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    position: relative;
    padding: 2rem 0;
}

.process-timeline::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 10%;
    right: 10%;
    height: 3px;
    background: var(--glass-border);
    transform: translateY(-50%);
    z-index: 0;
}

.process-timeline::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 10%;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    transform: translateY(-50%);
    z-index: 1;
    width: 0%;
    transition: width 5s ease;
}

.process-timeline.animated::after {
    width: 80%;
}

.process-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    flex: 1;
}

.process-step-number {
    width: 70px;
    height: 70px;
    background: var(--card-bg);
    border: 3px solid var(--glass-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'OmegaLarge', sans-serif;
    font-size: 1.5rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    transition: all 0.5s ease;
    position: relative;
}

.process-step-number::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    opacity: 0;
    z-index: -1;
    transition: opacity 0.5s ease;
}

.process-step.active .process-step-number {
    border-color: var(--accent-primary);
    color: var(--accent-light);
    background: var(--bg-deep);
}

.process-step.active .process-step-number::before {
    opacity: 1;
}

.process-step-icon {
    position: absolute;
    width: 30px;
    height: 30px;
    color: var(--text-muted);
    transition: color 0.5s ease;
}

.process-step.active .process-step-icon {
    color: var(--accent-light);
}

[data-theme="light"] .process-step.active .process-step-icon {
    color: var(--accent-primary);
}

.process-step-content {
    text-align: center;
    max-width: 150px;
}

.process-step-title {
    font-family: 'OmegaLarge', sans-serif;
    font-size: 1rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.process-step-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
}

@media (max-width: 768px) {
    .process-timeline {
        flex-direction: column;
        gap: 2rem;
        padding: 0;
    }

    .process-timeline::before,
    .process-timeline::after {
        top: 10%;
        bottom: 10%;
        left: 35px;
        right: auto;
        width: 3px;
        height: auto;
        transform: none;
    }

    .process-timeline::after {
        height: 0%;
        width: 3px;
    }

    .process-timeline.animated::after {
        height: 80%;
        width: 3px;
    }

    .process-step {
        flex-direction: row;
        gap: 1.5rem;
    }

    .process-step-number {
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .process-step-content {
        text-align: left;
        max-width: none;
    }
}

/* ============================================
   Service Tabs
   ============================================ */
.service-tabs-section {
    padding: 6rem 2rem;
}

.service-tabs-container {
    max-width: 1200px;
    margin: 0 auto;
}

.service-tabs-nav {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.service-tab-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    color: var(--text-secondary);
    font-family: 'Montserrat-Bold', 'Montserrat-BoldItalic', /*'OmegaSmall',*/ sans-serif;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.service-tab-btn:hover {
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.service-tab-btn.active {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border-color: transparent;
    color: white;
}

.service-tab-btn svg {
    width: 20px;
    height: 20px;
}

/* Service Tags / Stamps */
.service-stamp {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 0.6rem;
    font-family: 'OmegaLarge', sans-serif;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 4px;
    font-weight: bold;
    transform: rotate(12deg);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    animation: stampPop 0.4s ease;
}

@keyframes stampPop {
    0% { transform: rotate(12deg) scale(0); opacity: 0; }
    50% { transform: rotate(12deg) scale(1.2); }
    100% { transform: rotate(12deg) scale(1); opacity: 1; }
}

.service-stamp-free {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    color: white;
    border: 2px dashed rgba(255, 255, 255, 0.5);
}

.service-stamp-new {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    border: 2px dashed rgba(255, 255, 255, 0.5);
}

.service-stamp-soon {
    background: linear-gradient(135deg, #686b6d, #828e96);
    color: white;
    border: 2px dashed rgba(255, 255, 255, 0.5);
}

.service-stamp-popular {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
    border: 2px dashed rgba(255, 255, 255, 0.5);
}

.service-stamp-promo {
    background: linear-gradient(135deg, #f39c12, #e67e22);
    color: white;
    border: 2px dashed rgba(255, 255, 255, 0.5);
}

.service-stamp-best {
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
    color: white;
    border: 2px dashed rgba(255, 255, 255, 0.5);
}

/* ── Tampons supplémentaires ────────────────────────────────────────────────
   Utilisables dans assets/data/services/*.json via
   "stamp": { "type": "<nom>", "text": "…", "animated": true }
   Le champ `text` est libre : le type ne fait que choisir la couleur. */

.service-stamp-premium {
    background: linear-gradient(135deg, #d4a24c, #b8860b);
    color: #2a1c05;
    border: 2px dashed rgba(255, 255, 255, 0.55);
}

.service-stamp-exclusive {
    background: linear-gradient(135deg, #1abc9c, #16a085);
    color: white;
    border: 2px dashed rgba(255, 255, 255, 0.5);
}

.service-stamp-limited {
    background: linear-gradient(135deg, #e91e63, #ad1457);
    color: white;
    border: 2px dashed rgba(255, 255, 255, 0.5);
}

.service-stamp-updated {
    background: linear-gradient(135deg, #00bcd4, #0097a7);
    color: white;
    border: 2px dashed rgba(255, 255, 255, 0.5);
}

.service-stamp-beta {
    background: linear-gradient(135deg, #7986cb, #3f51b5);
    color: white;
    border: 2px dashed rgba(255, 255, 255, 0.5);
}

.service-stamp-sale {
    background: linear-gradient(135deg, #ff5722, #d84315);
    color: white;
    border: 2px dashed rgba(255, 255, 255, 0.5);
}

/* Tampon neutre : reprend l'accent du thème, utile quand aucune couleur
   particulière ne s'impose. */
.service-stamp-accent {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: white;
    border: 2px dashed rgba(255, 255, 255, 0.5);
}

/* Variante sobre : contour seul, pour les contextes déjà chargés. */
.service-stamp-outline {
    background: transparent;
    color: var(--accent-light);
    border: 1px solid var(--accent-primary);
}

/* Stamp on tab button */
.service-tab-btn {
    position: relative;
}

/* BUG CORRIGÉ : le tampon était positionné en absolu à -10 px du coin haut
   droit du bouton. Il débordait donc du cadre, chevauchait la section
   au-dessus, et se faisait rogner dès qu'un parent portait un overflow.
   Il devient une pastille INLINE : plus aucun débordement possible, quelle
   que soit la longueur du libellé ou la largeur de l'écran. */
.service-tab-btn .service-stamp {
    position: static;
    margin-left: 0.5rem;
    font-size: 0.55rem;
    padding: 0.18rem 0.45rem;
    /* Une pastille inline n'a pas à être penchée : la rotation d'un tampon
       n'a de sens que sur les grands formats (visuel du service). */
    transform: none;
    animation: none;
    border-width: 1px;
    border-radius: 999px;
}

/* Large stamp for service visual */
.service-visual-stamp {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    transform: rotate(12deg);
    border: 3px dashed rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.service-visual-stamp::before {
    content: '';
    position: absolute;
    inset: -6px;
    border: 2px solid currentColor;
    border-radius: 6px;
    opacity: 0.3;
}

/* Stamp in header - inline with transparency */
.service-tab-header {
    position: relative;
}

.service-tab-header .service-stamp-inline {
    display: inline-flex;
    margin-left: 1rem;
    vertical-align: middle;
    transform: rotate(12deg);
    opacity: 0.7;
    font-size: 0.55rem;
    padding: 0.2rem 0.45rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: opacity 0.3s ease;
}

.service-tab-header .service-stamp-inline:hover {
    opacity: 1;
}

/* Animated stamp effect */
.service-stamp-animated {
    animation: stampBounce 2s ease infinite;
}

@keyframes stampBounce {
    0%, 100% { transform: rotate(12deg) scale(1); }
    50% { transform: rotate(12deg) scale(1.05); }
}

/* Ribbon style stamp */
.service-ribbon {
    position: absolute;
    top: 20px;
    left: -35px;
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    color: white;
    padding: 0.5rem 3rem;
    font-family: 'OmegaLarge', sans-serif;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transform: rotate(-45deg);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    z-index: 10;
}

.service-ribbon::before,
.service-ribbon::after {
    content: '';
    position: absolute;
    bottom: -5px;
    border: 5px solid #1e8449;
    border-bottom-color: transparent;
}

.service-ribbon::before {
    left: 0;
    border-left-color: transparent;
}

.service-ribbon::after {
    right: 0;
    border-right-color: transparent;
}

/* Tab Content */
.service-tab-content {
    display: none;
    animation: fadeInTab 0.5s ease;
}

.service-tab-content.active {
    display: block;
}

@keyframes fadeInTab {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.service-tab-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 3rem;
    align-items: center;
}

/* Aucune illustration : le texte occupe toute la largeur. On borne la mesure
   pour que les lignes restent lisibles — du texte étalé sur 1200 px se lit
   mal. */
.service-tab-grid--solo {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

/* Sans colonne d'illustration, le bloc de texte doit être centré : laissé à
   gauche, il donnait une page bancale, avec la moitié droite vide. */
.service-tab-grid--solo .service-tab-details {
    max-width: 900px;
    margin-inline: auto;
    width: 100%;
}

/* En-tête, note et boutons centrés. Le corps des listes (fonctionnalités,
   composition d'un pack) reste aligné à gauche : du texte courant centré est
   nettement moins lisible, chaque ligne commençant à un endroit différent. */
.service-tab-grid--solo .service-tab-header {
    text-align: center;
}

.service-tab-grid--solo .service-tab-titleline {
    justify-content: center;
}

.service-tab-grid--solo .service-tab-header p {
    margin-inline: auto;
    max-width: 720px;
}

.service-tab-grid--solo .service-tab-note {
    text-align: center;
}

.service-tab-grid--solo .service-tab-cta {
    justify-content: center;
}



/* Service Visual */
.service-visual {
    position: relative;
    height: 400px;
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    opacity: 0.1;
}

.service-visual-icon {
    position: relative;
    z-index: 1;
}

.service-visual-icon .icon-main {
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: floatIcon 3s ease-in-out infinite;
    box-shadow: 0 20px 60px var(--shadow-color);
}

.service-visual-icon .icon-main svg {
    width: 60px;
    height: 60px;
    color: white;
}

@keyframes floatIcon {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

/* Floating elements around icon */
.service-visual-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.particle {
    position: absolute;
    background: var(--accent-primary);
    border-radius: 50%;
    opacity: 0.3;
    animation: particleFloat 4s ease-in-out infinite;
}

.particle:nth-child(1) { width: 10px; height: 10px; top: 20%; left: 20%; animation-delay: 0s; }
.particle:nth-child(2) { width: 15px; height: 15px; top: 30%; right: 25%; animation-delay: -1s; }
.particle:nth-child(3) { width: 8px; height: 8px; bottom: 25%; left: 30%; animation-delay: -2s; }
.particle:nth-child(4) { width: 12px; height: 12px; bottom: 20%; right: 20%; animation-delay: -3s; }
.particle:nth-child(5) { width: 6px; height: 6px; top: 50%; left: 15%; animation-delay: -0.5s; }
.particle:nth-child(6) { width: 14px; height: 14px; top: 15%; right: 35%; animation-delay: -1.5s; }

@keyframes particleFloat {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.3; }
    50% { transform: translate(10px, -20px) scale(1.2); opacity: 0.6; }
}

/* Service Details */
.service-tab-details {
    padding: 1rem 0;
}

.service-tab-header {
    margin-bottom: 2rem;
}

.service-tab-header h2 {
    font-family: 'OmegaLarge', sans-serif;
    font-size: 2.25rem;
    margin-bottom: 0.75rem;
}

.service-tab-header p {
    color: var(--text-secondary);
    font-size: 1.1rem;
    line-height: 1.7;
}

.service-tab-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.service-feature-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.service-feature-item:hover {
    border-color: var(--accent-primary);
    transform: translateX(5px);
}

.service-feature-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.service-feature-icon svg {
    width: 20px;
    height: 20px;
    color: white;
}

.service-feature-text h4 {
    font-size: 0.95rem;
    margin-bottom: 0.2rem;
}

.service-feature-text p {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Service CTA */
.service-tab-cta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Service Highlights */
.service-highlights {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
}

.service-highlight {
    text-align: center;
    flex: 1;
}

.service-highlight-value {
    font-family: 'OmegaLarge', sans-serif;
    font-size: 1.75rem;
    color: var(--accent-light);
    margin-bottom: 0.25rem;
}

.service-highlight-label {
    font-size: 0.8rem;
    color: var(--text-muted);
}

@media (max-width: 1024px) {
    .service-tab-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .service-visual {
        height: 300px;
    }
}

@media (max-width: 600px) {
    .service-tab-features {
        grid-template-columns: 1fr;
    }

    .service-highlights {
        flex-direction: column;
        gap: 1rem;
    }

    .service-tab-btn {
        padding: 0.75rem 1rem;
        font-size: 0.85rem;
    }

    .service-tab-btn span {
        display: none;
    }
}

/* ============================================
   Why Choose Us Section
   ============================================ */
.why-us-grid {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.why-us-card {
    text-align: center;
    padding: 2.5rem 2rem;
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.why-us-card:hover {
    border-color: var(--accent-primary);
    transform: translateY(-5px);
}

.why-us-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.why-us-icon svg {
    width: 36px;
    height: 36px;
    color: white;
}

.why-us-card h3 {
    font-family: 'OmegaLarge', sans-serif;
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
}

.why-us-card p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
}

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

/* ||||||||||||||||||||||||||||||||||||||||||||||
   ||||||||||||||||||||||||||||||||||||||||||||||
   |||||||||||||||||||||||||||||||||||||||||||||| */

/* ============================================
   Service Stamps / Tags
   ============================================ */
.service-stamp {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 0.6rem;
    font-family: 'OmegaLarge', sans-serif;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 4px;
    font-weight: bold;
    transform: rotate(12deg);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.service-stamp-free {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    color: white;
    border: 2px dashed rgba(255, 255, 255, 0.5);
}

.service-stamp-new {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    border: 2px dashed rgba(255, 255, 255, 0.5);
}

.service-stamp-soon {
    background: linear-gradient(135deg, #686b6d, #828e96);
    color: white;
    border: 2px dashed rgba(255, 255, 255, 0.5);
}

.service-stamp-popular {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
    border: 2px dashed rgba(255, 255, 255, 0.5);
}

.service-stamp-promo {
    background: linear-gradient(135deg, #f39c12, #e67e22);
    color: white;
    border: 2px dashed rgba(255, 255, 255, 0.5);
}

/* Doublon de la règle plus haut, hérité d'un ancien thème. Conservé mais
   aligné dessus : laissé en `position: absolute`, il annulait le correctif
   puisqu'il apparaît plus loin dans le fichier. */
.service-tab-btn .service-stamp {
    position: static;
    margin-left: 0.5rem;
    font-size: 0.55rem;
    padding: 0.18rem 0.45rem;
    transform: none;
    animation: none;
    border-width: 1px;
    border-radius: 999px;
}

.service-visual-stamp {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    transform: rotate(12deg);
    border: 3px dashed rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.service-tab-header .service-stamp-inline {
    display: inline-flex;
    margin-left: 1rem;
    vertical-align: middle;
    transform: rotate(12deg);
    opacity: 0.75;
    font-size: 0.75rem;
    padding: 0.35rem 0.7rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.service-tab-header .service-stamp-inline:hover {
    opacity: 1;
    transform: rotate(12deg) scale(1.1);
}

.service-stamp-animated {
    animation: stampBounce 2s ease infinite;
}

@keyframes stampBounce {
    0%, 100% { transform: rotate(12deg) scale(1); }
    50% { transform: rotate(12deg) scale(1.05); }
}

/* ============================================
   Partners Section - Infinite Logo Carousel
   ============================================ */
.partners-section {
    padding: 4rem 0;
}

.partners-section .section-header {
    margin-bottom: 2.5rem;
}

.partners-marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 2rem 0 3rem;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, white 8%, white 92%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, white 8%, white 92%, transparent 100%);
}

.partners-track {
    display: flex;
    gap: 5rem;
    width: max-content;
    animation: marqueeInfinite 35s linear infinite;
    will-change: transform;
    backface-visibility: hidden;
    perspective: 1000px;
}

.partners-track:hover {
    animation-play-state: paused;
}

@keyframes marqueeInfinite {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

.partner-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.partner-item:hover {
    transform: translateY(-8px);
}

.partner-logo-icon {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'OmegaLarge', sans-serif;
    font-size: 2rem;
    color: var(--text-muted);
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    transition: all 0.3s ease;
}

.partner-item:hover .partner-logo-icon {
    color: var(--accent-light);
    border-color: var(--accent-primary);
    background: var(--glass-bg);
    box-shadow: 0 15px 40px rgba(139, 58, 98, 0.3);
}

.partner-item span {
    font-size: 0.95rem;
    color: var(--text-muted);
    font-weight: 500;
    transition: color 0.3s ease;
    white-space: nowrap;
}

.partner-item:hover span {
    color: var(--text-primary);
}

@media (max-width: 768px) {
    .partners-track {
        gap: 3rem;
        animation-duration: 25s;
    }
    
    .partner-logo-icon {
        width: 75px;
        height: 75px;
        font-size: 1.5rem;
        border-radius: 14px;
    }
    
    .partner-item span {
        font-size: 0.8rem;
    }
}

/* ============================================
   Legal Pages Styles
   ============================================ */
.legal-content {
    padding: 4rem 2rem 6rem;
    max-width: 900px;
    margin: 0 auto;
}

.legal-container {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.legal-section h2 {
    font-family: 'OmegaLarge', sans-serif;
    font-size: 1.3rem;
    color: var(--text-primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.legal-section h2 svg {
    width: 22px;
    height: 22px;
    color: var(--accent-light);
}

.legal-card {
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 1.5rem 2rem;
}

.legal-card p {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 1rem;
}

.legal-card p:last-child {
    margin-bottom: 0;
}

.legal-card strong {
    color: var(--text-primary);
}

.legal-card ul {
    margin: 1rem 0;
    padding-left: 1.5rem;
    color: var(--text-secondary);
}

.legal-card ul li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.legal-card ul li::marker {
    color: var(--accent-light);
}

@media (max-width: 768px) {
    .legal-content {
        padding: 2rem 1rem 4rem;
    }
    
    .legal-card {
        padding: 1.25rem 1.5rem;
    }
    
    .legal-section h2 {
        font-size: 1.1rem;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   HOME — Partners carousel
   ═══════════════════════════════════════════════════════════════════════════ */

.partners-carousel-wrapper {
    overflow: hidden;
    padding: 2rem 0;
    position: relative;
    mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.partners-carousel-track {
    display: flex;
    gap: 1.5rem;
    width: max-content;
    will-change: transform;
}

.partner-slide {
    flex-shrink: 0;
    cursor: pointer;
}

.partner-slide-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 1.25rem 1.75rem;
    width: 160px;
    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.partner-slide:hover .partner-slide-inner {
    border-color: var(--accent-primary);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(142,36,170,0.18);
}

.partner-logo-img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: 8px;
}

.partner-logo-fallback {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    font-family: 'OmegaLarge', sans-serif;
    font-size: 1.2rem;
    color: white;
    display: none;
}

.partner-slide-name {
    font-size: 0.82rem;
    color: var(--text-secondary);
    text-align: center;
    font-weight: 500;
}

/* Partner modal — utilise exactement la même structure que team-modal */

.team-modal-avatar-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Remplit l'octogone — clip-path du parent gère la forme */
}

.team-modal-avatar-fallback {
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    font-family: 'OmegaLarge', sans-serif;
    font-size: 1.25rem;
    color: white;
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEAM — Avatar photo
   ═══════════════════════════════════════════════════════════════════════════ */

.team-avatar-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Pas de border-radius — le clip-path octogone du parent s'applique */
}

.team-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-family: 'OmegaLarge', sans-serif;
    font-size: 1.5rem;
    color: var(--text-primary);
}

.team-avatar-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    /* overflow géré par clip-path du parent — pas de border-radius */
}

/* Modal avatar photo */
.team-modal-avatar-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SERVICES — Note
   ═══════════════════════════════════════════════════════════════════════════ */

.service-note {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
    line-height: 1.5;
    font-style: italic;
}

.service-note-mark {
    color: var(--accent-light);
    font-style: normal;
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FAQ — Page
   ═══════════════════════════════════════════════════════════════════════════ */

.faq-teaser {
    padding: 0 2rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.faq-teaser-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    border-left: 4px solid var(--accent-primary);
    border-radius: 10px;
    padding: 2rem 2.5rem;
}

.faq-teaser-text p.section-tag {
    margin-bottom: 0.5rem;
}

.faq-teaser-text h2 {
    font-family: 'OmegaLarge', sans-serif;
    font-size: 1.4rem;
    color: var(--text-primary);
    margin-bottom: 0.6rem;
}

.faq-teaser-text p:last-child {
    color: var(--text-secondary);
    font-size: 0.9rem;
    max-width: 480px;
}

.faq-teaser-btn {
    white-space: nowrap;
    flex-shrink: 0;
}

.faq-page-section {
    padding: 2rem 2rem 5rem;
}

.faq-page-container {
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.faq-category-title {
    font-family: 'OmegaLarge', sans-serif;
    font-size: 1rem;
    color: var(--accent-light);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--glass-border);
}

.faq-category-title svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.faq-item {
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.25s ease;
}

.faq-item.open {
    border-color: var(--accent-primary);
}

.faq-question {
    width: 100%;
    background: none;
    border: none;
    padding: 1.1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
    text-align: left;
    transition: color 0.25s ease;
}

.faq-question:hover {
    color: var(--accent-light);
}

.faq-chevron {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--text-muted);
    transition: transform 0.3s ease;
}

.faq-item.open .faq-chevron {
    transform: rotate(180deg);
    color: var(--accent-light);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1), padding 0.3s ease;
    padding: 0 1.5rem;
}

.faq-item.open .faq-answer {
    max-height: 300px;
    padding: 0 1.5rem 1.25rem;
}

.faq-answer p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

.faq-answer strong {
    color: var(--text-primary);
}

.faq-cta-section {
    background: var(--card-bg);
    border-top: 1px solid var(--glass-border);
    padding: 4rem 2rem;
    text-align: center;
}

.faq-cta-inner {
    max-width: 600px;
    margin: 0 auto;
}

.faq-cta-inner h2 {
    font-family: 'OmegaLarge', sans-serif;
    font-size: 1.6rem;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

.faq-cta-inner p {
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.faq-cta-btns {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .faq-teaser-inner {
        flex-direction: column;
        align-items: flex-start;
    }
    .faq-teaser-btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   GALLERY — image réelle dans les slides
   ═══════════════════════════════════════════════════════════════════════════ */

/* Slide sans image chargée → masqué */
.project-gallery-slide.no-image {
    display: none !important;
}

/* Slide avec image → l'image remplace le gradient */
.project-gallery-slide.has-image {
    background: #000 !important;
}

.gallery-slide-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    display: block;
}

/* Enlève l'overlay gradient quand une vraie image est présente */
.project-gallery-slide.has-image::before {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODAL TECH — tech items avec icônes
   ═══════════════════════════════════════════════════════════════════════════ */

.project-tech-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
}

.project-tech-item {
    padding: 0.75rem 1rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    transition: all 0.25s ease;
    font-weight: 500;
}

.project-tech-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--accent-light);
}

.project-tech-item:hover {
    border-color: var(--accent-primary);
    color: var(--text-primary);
    background: rgba(142, 36, 170, 0.08);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODAL STATS — grille 2×2 valorisée
   ═══════════════════════════════════════════════════════════════════════════ */

.project-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.project-stat-card {
    text-align: center;
    padding: 1.5rem 1rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    transition: border-color 0.25s ease, transform 0.25s ease;
}

.project-stat-card:hover {
    border-color: var(--accent-primary);
    transform: translateY(-2px);
}

.project-stat-card-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.85rem;
}

.project-stat-card-icon svg {
    width: 22px;
    height: 22px;
    color: white;
}

.project-stat-card-value {
    font-family: 'OmegaLarge', sans-serif;
    font-size: 2.2rem;
    color: var(--accent-light);
    line-height: 1;
    margin-bottom: 0.4rem;
}

.project-stat-card-label {
    font-size: 0.82rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}



/* ═══════════════════════════════════════════════════════════════════════════
   PORTFOLIO — image de couverture dans les cartes
   ═══════════════════════════════════════════════════════════════════════════ */

.portfolio-cover-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1; /* au-dessus du gradient .portfolio-bg */
    display: block;
}

/* .portfolio-bg — override pour les cartes avec image */
.portfolio-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    /* gradient retiré ici — défini dans la règle principale */
    background: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BENTO + PORTFOLIO — image de couverture réelle
   ═══════════════════════════════════════════════════════════════════════════ */

.bento-cover-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1; /* au-dessus du gradient de fond */
    display: block;
}

/* bento-image-content — z-index géré dans la règle principale ligne ~2141 */

/* ═══════════════════════════════════════════════════════════════════════════
   GALLERY — iframe YouTube
   ═══════════════════════════════════════════════════════════════════════════ */

.yt-wrapper {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.gallery-slide-yt-iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GALLERY — bouton mute vidéo
   ═══════════════════════════════════════════════════════════════════════════ */

.gallery-mute-btn {
    position: absolute;
    bottom: 3rem; /* au-dessus des dots */
    right: 1rem;
    z-index: 10;
    width: 38px;
    height: 38px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    transition: background 0.2s ease;
    backdrop-filter: blur(4px);
}

.gallery-mute-btn:hover {
    background: rgba(139, 58, 98, 0.8);
    border-color: var(--accent-primary);
}

/* Icône son coupé = visible par défaut (muted=true au départ) */
.gallery-mute-btn .icon-muted  { display: block; }
.gallery-mute-btn .icon-unmuted { display: none; }

/* Quand le son est activé */
.gallery-mute-btn.unmuted .icon-muted  { display: none; }
.gallery-mute-btn.unmuted .icon-unmuted { display: block; }

/* Footer social — img pour logos CDN (gaming platforms) */
.footer-social a img {
    width: 20px;
    height: 20px;
    display: block;
    object-fit: contain;
    filter: brightness(0) invert(1); /* Force blanc pour cohérence avec les SVG */
    opacity: 0.85;
    transition: opacity 0.3s ease;
}

.footer-social a:hover img {
    opacity: 1;
    filter: none; /* Affiche la couleur officielle au hover */
}

/* ═══════════════════════════════════════════════════════════════════════════
   Footer gaming icons — logos officiels locaux
   ═══════════════════════════════════════════════════════════════════════════ */

.footer-gaming-icon {
    width: 20px;
    height: 20px;
    display: block;
    object-fit: contain;
    opacity: 0.85;
    /* Mode sombre : icône blanche */
    filter: brightness(0) invert(1);
    transition: opacity 0.2s ease, filter 0.2s ease;
}

.footer-social a:hover .footer-gaming-icon {
    opacity: 1;
}

/* Mode clair : icône sombre */
[data-theme="light"] .footer-gaming-icon {
    filter: brightness(0);
}

[data-theme="light"] .footer-social a:hover .footer-gaming-icon {
    filter: brightness(0) invert(1); /* Blanc au hover (fond accent) */
}

/* Hytale PNG — fond transparent forcé via mix-blend-mode */
.footer-gaming-icon--hytale {
    mix-blend-mode: screen;
    opacity: 0.9;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CORRECTIFS — passe sécurité + bugs visuels
   Ce bloc est volontairement placé en fin de fichier : il fait autorité sur
   les règles déclarées plus haut.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Attribut [hidden] ────────────────────────────────────────────────────
   La CSP interdit les style="display:none". Toute la bascule d'affichage passe
   désormais par l'attribut HTML natif [hidden], qu'on rend inconditionnel :
   sans cette règle, un display:flex/grid déclaré ailleurs le neutraliserait. */
[hidden] { display: none !important; }

/* ── 2. Verrou de scroll des modals ──────────────────────────────────────────
   Remplace document.body.style.overflow (style inline interdit par la CSP). */
body.modal-open {
    overflow: hidden;
    /* Évite le saut de mise en page dû à la disparition de la scrollbar */
    scrollbar-gutter: stable;
}

/* Menu mobile ouvert : le <body> est figé en position: fixed.
   `overflow: hidden` seul ne verrouille rien sur mobile — Safari iOS l'ignore,
   et Chrome Android continue de rétracter sa barre d'URL, ce qui change la
   hauteur de viewport et fait remonter la barre de navigation.
   Le décalage négatif (posé en JS) compense la position de défilement, et
   celle-ci est restaurée à la fermeture. */
body.menu-open {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}

/* Menu mobile ouvert : on bloque le défilement de la page.
   Sans cela, faire défiler derrière le menu rétracte la barre d'URL du
   navigateur mobile, ce qui change la hauteur de viewport (100dvh) et fait
   « sauter » toute la mise en page, navbar comprise. */
@media (min-width: 881px) {
    body.menu-open { overflow: auto; }
}

/* ── 3. Repli des logos / avatars ────────────────────────────────────────────
   Ces éléments sont masqués par [hidden] tant que l'image se charge ;
   quand le repli s'active, ils doivent s'afficher en flex, pas en block. */
.partner-logo-fallback,
.team-modal-avatar-fallback,
.team-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
}

.team-modal-avatar-fallback {
    font-family: 'OmegaLarge', sans-serif;
    font-size: 2rem;
    color: #fff;
}

/* ── 4. NAVBAR MOBILE ────────────────────────────────────────────────────────
   BUG : le menu ouvert remontait de ~8px au scroll.
   Cause : .nav-links est en position:absolute; top:100% dans <nav>, et
   nav.scrolled réduisait le padding (1rem → 0.75rem). La hauteur de nav
   changeait donc sous le menu ouvert, qui suivait.
   Correctif : hauteur de nav figée en mobile + transition explicite
   (l'ancien `transition: all` animait aussi la position du menu). */
nav {
    transition: background-color 0.35s ease,
                border-color 0.35s ease,
                padding 0.35s ease,
                box-shadow 0.35s ease;
}

@media (max-width: 880px) {
    /* Padding identique dans les deux états → hauteur de nav constante.
       min-height verrouille la hauteur même si le contenu venait à changer :
       la barre ne peut plus « s'enfoncer » ni rogner le logo.
       Le max() avec env() est sans effet aujourd'hui (pas de viewport-fit=cover)
       mais protège d'avance les appareils à encoche. */
    nav,
    nav.scrolled {
        padding: 0.9rem 1rem;
        padding-top: max(0.9rem, env(safe-area-inset-top));
        min-height: 64px;
        box-sizing: border-box;
    }

    .nav-container {
        align-items: center;
        min-height: 45px;
    }

    /* Une seule définition du menu déroulant : les deux blocs @media
       concurrents (880px et 768px) se contredisaient sur display,
       left/right et le fond. */
    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: auto;
        min-width: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
        margin: 0;
        padding: 1.5rem;
        /* Fond opaque : un backdrop-filter imbriqué dans celui de nav.scrolled
           produisait un panneau délavé et illisible. */
        background: var(--bg-secondary);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-top: 1px solid var(--glass-border);
        border-bottom: 1px solid var(--glass-border);
        border-radius: 0;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
        /* Sécurité d'affichage sur petits écrans / paysage */
        /* 64px = hauteur verrouillée de la nav ci-dessus. On évite volontairement
           calc(100dvh - 100%) : la valeur dvh change quand la barre d'URL mobile
           se rétracte, ce qui redimensionnait le panneau en cours d'usage. */
        max-height: calc(100vh - 64px);
        max-height: calc(100svh - 64px);
        overflow-y: auto;
        overscroll-behavior: contain;
        z-index: 1002;
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links li {
        list-style: none;
        width: 100%;
        text-align: center;
    }

    /* Liens centrés. inline-block (et non block) pour que le soulignement
       actif épouse le texte au lieu de barrer toute la largeur du panneau. */
    .nav-links a {
        display: inline-block;
        width: auto;
        padding: 0.25rem 0.5rem;
        text-align: center;
    }

    .mobile-toggle {
        display: flex;
    }
}

/* Le menu ne doit jamais rester ouvert en repassant en desktop */
@media (min-width: 881px) {
    .nav-links {
        display: flex;
    }
}

/* ── 5. Retour du formulaire de contact ──────────────────────────────────────
   Remplace le feedback.style.cssText construit en JS. */
.form-feedback {
    padding: 1rem 1.25rem;
    border-radius: 4px;
    font-size: 0.95rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
}

.form-feedback--success {
    background: rgba(46, 204, 113, 0.12);
    border-color: rgba(46, 204, 113, 0.4);
    color: #2ecc71;
}

.form-feedback--error {
    background: rgba(231, 76, 60, 0.12);
    border-color: rgba(231, 76, 60, 0.4);
    color: #e74c3c;
}

.form-submit.is-loading {
    opacity: 0.7;
    cursor: not-allowed;
}

/* ── 6. Classes utilitaires ──────────────────────────────────────────────────
   Remplacent les attributs style="..." retirés du HTML pour permettre une CSP
   sans 'unsafe-inline' sur style-src. */
.u-center      { text-align: center; }
.u-muted       { color: var(--text-muted); }
.u-mt-3        { margin-top: 3rem; }
.u-mt-4        { margin-top: 4rem; }
.u-mb-2        { margin-bottom: 2rem; }
.u-pt-2        { padding-top: 2rem; }
.u-pt-4        { padding-top: 4rem; }
.u-pt-6        { padding-top: 6rem; }
.u-px-2        { padding-left: 2rem; padding-right: 2rem; }
.u-wrap-1200   { max-width: 1200px; margin-left: auto; margin-right: auto; }
.u-hero-short  { min-height: 40vh; }
.is-clickable  { cursor: pointer; }

.u-band-fade {
    padding: 6rem 2rem;
    background: linear-gradient(180deg, transparent 0%, var(--bg-secondary) 50%, transparent 100%);
}

/* .u-wrap-1200 combiné à .u-mt-4 : la marge auto ne doit pas écraser le top */
.pagination.u-wrap-1200.u-mt-4 { margin-bottom: 0; }

/* ── 7. Accessibilité : respect de prefers-reduced-motion ───────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Onglets de filtre (page Réalisations) ───────────────────────────────────
   Déplacé depuis un <style> inline de pages/realisations.html : la CSP
   du site interdit les styles inline (style-src 'self'). */
    .filter-tabs {
        display: flex;
        gap: 1rem;
        justify-content: center;
        flex-wrap: wrap;
        margin-bottom: 2rem;
    }
    .filter-tab {
        padding: 0.75rem 1.5rem;
        background: var(--glass-bg);
        border: 1px solid var(--glass-border);
        border-radius: 4px;
        color: var(--text-secondary);
        font-family: 'OmegaSmall', sans-serif;
        font-size: 0.95rem;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    .filter-tab:hover,
    .filter-tab.active {
        background: var(--accent-primary);
        border-color: var(--accent-primary);
        color: white;
    }

/* ── Titres des partenaires ──────────────────────────────────────────────────
   Les displayName de partners.json contenaient des marques de formatage
   invisibles (U+200E, LEFT-TO-RIGHT MARK) insérées à la main pour forcer un
   retour à la ligne dans le carrousel. Effet de bord : dans la fenêtre de
   détail, ces caractères s'affichaient comme un grand vide au milieu du titre
   ("SITE      OMEGA").

   Les JSON sont désormais propres ; le passage à la ligne est géré ici, par
   le CSS, là où il relève de la mise en forme et non de la donnée. */

.partner-slide-name {
    /* Respecte les sauts de ligne \n présents dans partners.json.
       Aucune largeur ne peut à elle seule produire le rendu voulu : "Redemption"
       seul (86px) est plus large que "Site Omega" entier (80px). Forcer la
       coupure par la largeur casserait donc l'un ou l'autre. La coupure est
       décidée dans la donnée, ce CSS ne fait que la respecter. */
    white-space: pre-line;
    max-width: 100%;
    margin-inline: auto;
    line-height: 1.3;
    /* Réserve deux lignes : toutes les cartes gardent la même hauteur, que le
       nom tienne sur une ou deux lignes. */
    min-height: 2.6em;
    text-align: center;
    overflow-wrap: break-word;
    hyphens: none;
}

/* Titre dans la fenêtre de détail : centré, sur une ou deux lignes selon la
   place disponible, sans espace parasite. */
#partner-modal-name {
    text-align: center;
    text-wrap: balance;
    max-width: 90%;
    margin-inline: auto;
    line-height: 1.25;
    /* white-space normal explicite : neutralise tout héritage qui empêcherait
       le repli du texte. */
    white-space: normal;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SERVICES — sélecteur de sous-offres, tarif, packs
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Titre + badge tarif ─────────────────────────────────────────────────── */

.service-tab-titleline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-bottom: 0.75rem;
}

.service-tab-titleline h2 {
    margin: 0;
}

.service-tarif {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    white-space: nowrap;
}

.service-tarif svg {
    width: 14px;
    height: 14px;
}

.service-tarif--gratuit {
    background: rgba(46, 204, 113, 0.14);
    color: #2ecc71;
    border: 1px solid rgba(46, 204, 113, 0.35);
}

.service-tarif--devis {
    background: rgba(142, 36, 170, 0.12);
    color: var(--accent-light);
    border: 1px solid rgba(142, 36, 170, 0.3);
}

/* ── Composition d'un pack ──────────────────────────────────────────────────
   Les lignes sont résolues depuis les identifiants du JSON : elles ne peuvent
   pas diverger des offres réelles. */

.service-bundle {
    margin: 1.5rem 0;
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    background: rgba(142, 36, 170, 0.05);
}

.service-bundle-subtitle {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent-light);
    margin: 0 0 0.9rem;
}

.service-bundle-list,
.service-bundle-extras {
    list-style: none;
    padding: 0;
    margin: 0;
}

.service-bundle-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--glass-border);
    font-size: 0.92rem;
}

.service-bundle-item:last-child {
    border-bottom: none;
}

.service-bundle-item > svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--accent-light);
}

.service-bundle-item-label {
    color: var(--text-primary);
    font-weight: 500;
}

.service-bundle-item-service {
    font-size: 0.72rem;
    color: var(--text-muted);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    white-space: nowrap;
}

.service-bundle-item-link {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    color: var(--text-muted);
    transition: color 0.25s ease, background-color 0.25s ease;
}

.service-bundle-item-link:hover {
    color: #fff;
    background: var(--accent-primary);
}

.service-bundle-item-link svg {
    width: 14px;
    height: 14px;
}

.service-bundle-extras {
    margin-top: 0.5rem;
}

.service-bundle-extras li {
    position: relative;
    padding-left: 1.3rem;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.55;
}

.service-bundle-extras li::before {
    content: '+';
    position: absolute;
    left: 0;
    color: #2ecc71;
    font-weight: 700;
}

/* ── Mobile ─────────────────────────────────────────────────────────────────
   La barre de pastilles passe en défilement horizontal : empiler 5 pastilles
   verticalement mangerait tout l'écran avant le contenu. */
@media (max-width: 768px) {
    .service-bundle-item {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .service-bundle-item-service {
        order: 3;
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORMULAIRES DE CONTACT — sélecteur devis / candidature
   ═══════════════════════════════════════════════════════════════════════════ */

.contact-form-zone {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ── Champs ─────────────────────────────────────────────────────────────── */

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-optional {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: 0;
}

/* Les <select> doivent suivre exactement le style des <input> déjà en place */
.contact-form select {
    width: 100%;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--text-primary);
    background-color: var(--card-bg);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    cursor: pointer;
    transition: border-color 0.25s ease;
}

.contact-form select:focus {
    outline: none;
    border-color: var(--accent-primary);
}

/* Un champ pré-rempli depuis l'URL est signalé : le visiteur doit comprendre
   d'où vient la valeur, et pouvoir la changer sans hésiter. */
.contact-form select.is-prefilled {
    border-color: var(--accent-primary);
    background-color: rgba(142, 36, 170, 0.08);
}

.contact-form optgroup {
    background-color: var(--bg-secondary);
    color: var(--text-muted);
    font-style: normal;
    font-weight: 600;
}

.contact-form option {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.form-group--check {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.form-group--check input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: var(--accent-primary);
    cursor: pointer;
    flex-shrink: 0;
}

.form-group--check label {
    margin: 0;
    cursor: pointer;
    font-weight: 400;
    color: var(--text-secondary);
}

.form-intro {
    padding: 0.9rem 1.1rem;
    border-radius: 8px;
    background: rgba(230, 160, 60, 0.09);
    border: 1px solid rgba(230, 160, 60, 0.28);
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
}

.form-intro a {
    color: var(--accent-light);
    text-decoration: underline;
}

.form-hint {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.8rem 1rem;
    border-radius: 8px;
    background: rgba(90, 150, 235, 0.09);
    border: 1px solid rgba(90, 150, 235, 0.28);
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: -0.5rem 0 0;
}

.form-hint svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #5a96eb;
    margin-top: 0.15rem;
}

.form-feedback-slot {
    margin-bottom: 0;
}

@media (max-width: 640px) {
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTACT — sélecteur segmenté et corrections de mise en forme
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Sélecteur ──────────────────────────────────────────────────────────────
   Contrôle segmenté centré, placé AU-DESSUS des deux colonnes. Dans la colonne
   de droite, il déséquilibrait la page ; ici il annonce le choix avant que le
   regard ne descende. Les deux options restent visibles en permanence : c'est
   tout l'intérêt par rapport à un champ « objet » dans un formulaire unique. */

.form-switch-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 3rem;
}

.form-switch {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 5px;
    border-radius: 999px;
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    min-width: min(440px, 100%);
}

/* Curseur coulissant : l'animation rend le lien entre les deux états
   perceptible, là où un simple changement de couleur se remarque à peine. */
.form-switch::before {
    content: '';
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 5px;
    width: calc(50% - 5px);
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.form-switch[data-active="candidature"]::before {
    transform: translateX(100%);
}

.form-switch-btn {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-radius: 999px;
    padding: 0.8rem 1.5rem;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.25s ease;
}

.form-switch-btn svg {
    width: 17px;
    height: 17px;
}

.form-switch-btn:hover {
    color: var(--text-primary);
}

.form-switch-btn.active {
    color: #fff;
}

.form-switch-btn:focus-visible {
    outline: 2px solid var(--accent-light);
    outline-offset: 3px;
}

/* ── Colonne de gauche contextuelle ─────────────────────────────────────── */

.contact-points {
    list-style: none;
    padding: 0;
    margin: 1.75rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.contact-points li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.contact-points svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    color: var(--accent-light);
}

.contact-info-cta {
    margin-top: 2rem;
    align-self: flex-start;
}

/* ── Corrections de mise en forme ───────────────────────────────────────── */

/* BUG : « Budget envisagé » + « optionnel » passait sur deux lignes alors que
   « Échéance optionnel » tenait sur une seule — les deux champs de la rangée
   se retrouvaient décalés verticalement. Aligner les colonnes par le BAS règle
   le problème quelle que soit la hauteur des libellés. */
.form-row {
    display: grid;
    /* 180px : deux colonnes tiennent dans la zone de formulaire (~400 px
       utiles) et basculent seules sur une colonne en dessous. */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem 1rem;
    align-items: end;
}

/* BUG : le texte des listes déroulantes était tronqué (« Je ne sais pas er »).
   La flèche native occupe une largeur variable selon le navigateur ; on la
   remplace par une flèche dessinée, dont on maîtrise l'encombrement. */
.contact-form select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.4rem;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
                      linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position: calc(100% - 18px) calc(50% + 2px),
                         calc(100% - 13px) calc(50% + 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    text-overflow: ellipsis;
}

.contact-form label {
    display: block;
    line-height: 1.35;
}

.form-row .form-group {
    margin-bottom: 0;
}

.form-optional {
    white-space: nowrap;
}

/* ── Case « moins de 18 ans » ───────────────────────────────────────────────
   Une case à cocher nue au milieu de champs encadrés paraissait oubliée.
   On lui donne la même surface que les autres champs. */
.form-group--check {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
    background: var(--card-bg);
    cursor: pointer;
    transition: border-color 0.25s ease, background-color 0.25s ease;
}

.form-group--check:hover {
    border-color: var(--accent-primary);
}

.form-group--check:has(input:checked) {
    border-color: rgba(90, 150, 235, 0.5);
    background: rgba(90, 150, 235, 0.08);
}

.form-group--check label {
    margin: 0;
    cursor: pointer;
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 0.92rem;
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .form-switch {
        min-width: 100%;
    }

    .form-switch-btn {
        padding: 0.75rem 0.75rem;
        font-size: 0.88rem;
    }

    .form-switch-btn svg {
        width: 15px;
        height: 15px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ONGLETS — composant partagé

   Principe : aucun cadre, aucune boîte. Les libellés respirent, et un
   soulignement en dégradé glisse de l'un à l'autre. Le mouvement porte toute
   l'information — quel onglet est actif, et d'où l'on vient — là où les
   versions précédentes empilaient bordures, fonds et séparateurs.

   Utilisé par les sous-offres (Services) et les onglets d'arguments
   (Nous rejoindre) : un seul composant, une seule grammaire.
   ═══════════════════════════════════════════════════════════════════════════ */

.seg {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    padding-bottom: 0.7rem;
}

/* Soulignement coulissant. Sa position et sa largeur sont posées par
   window.initSegmented() : les onglets ont des largeurs variables, une
   translation en pourcentage ne conviendrait pas.
   L'easing déborde légèrement (1.35 > 1) pour donner au déplacement une
   inertie de ressort plutôt qu'un glissement mécanique. */
.seg-indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 0;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-light));
    transition: transform 0.42s cubic-bezier(0.32, 1.35, 0.5, 1),
                width 0.42s cubic-bezier(0.32, 1.35, 0.5, 1);
    pointer-events: none;
    opacity: 0;
}

/* Halo sous le trait : ce qui distingue un soulignement soigné d'un simple
   filet de 2 px. */
.seg-indicator::after {
    content: '';
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: -5px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent-primary);
    filter: blur(7px);
    opacity: 0.55;
}

.seg-btn {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-radius: 8px;
    padding: 0.45rem 0.95rem;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.25s ease, background-color 0.25s ease;
}

/* Fond au survol, discret : il indique la zone cliquable sans concurrencer
   le soulignement. */
.seg-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 8px;
    background: var(--glass-bg);
    opacity: 0;
    transition: opacity 0.25s ease;
    z-index: -1;
}

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

.seg-btn:hover {
    color: var(--text-secondary);
}

.seg-btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    opacity: 0.55;
    transition: opacity 0.25s ease, color 0.25s ease, transform 0.35s cubic-bezier(0.32, 1.35, 0.5, 1);
}

.seg-btn:hover svg {
    opacity: 0.85;
}

.seg-btn.active {
    color: var(--text-primary);
    font-weight: 600;
}

.seg-btn.active::before {
    opacity: 0;
}

.seg-btn.active svg {
    opacity: 1;
    color: var(--accent-light);
    transform: scale(1.12);
}

.seg-btn:focus-visible {
    outline: 2px solid var(--accent-light);
    outline-offset: 0;
}

@media (prefers-reduced-motion: reduce) {
    .seg-indicator,
    .seg-btn,
    .seg-btn svg {
        transition-duration: 0.01ms;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SERVICES — panneau
   ═══════════════════════════════════════════════════════════════════════════ */

/* En-tête et corps dans le même conteneur : ils partagent donc exactement les
   mêmes bords. La barre de sélection vivait auparavant à l'extérieur, avec sa
   propre marge, et paraissait décalée par rapport au reste de la page. */
/* Aucun cadre : la bordure et le fond enfermaient la section dans une boîte
   qui évoquait une fenêtre de navigateur. Seul subsiste le filet sous la
   rangée d'onglets, qui sert d'appui au soulignement coulissant. */
.service-panel {
    max-width: 1200px;
    margin: 2.5rem auto 0;
    position: relative;
}

/* Grille en trois colonnes 1fr / auto / 1fr : le libellé occupe la première,
   une colonne vide de même largeur occupe la troisième. Le sélecteur est ainsi
   centré sur le PANNEAU, et non sur l'espace restant après le libellé — c'est
   ce décalage qui sautait aux yeux, la rangée d'onglets de service au-dessus
   étant, elle, centrée. */
.service-panel-head {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    gap: 1.25rem;
    padding: 1.1rem 0 0;
    background: transparent;
    border-bottom: 1px solid var(--glass-border);
    /* La rangée déborde en défilement plutôt que de passer à la ligne :
       des onglets sur deux lignes casseraient le curseur coulissant. */
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.service-panel-head::-webkit-scrollbar {
    display: none;
}

.service-offers-label {
    flex-shrink: 0;
    padding-bottom: 1.35rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
}

.service-panel-body {
    padding: 3rem 0 0;
}

/* Transition douce au changement d'offre : sans elle, le contenu se remplace
   d'un coup et la bascule paraît brutale. */
.service-panel-body .service-tab-content {
    animation: panelFade 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes panelFade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .service-panel-body .service-tab-content { animation: none; }
    .seg-indicator { transition: none; }
}

@media (max-width: 880px) {
    .service-panel {
        margin: 2rem 1.25rem 0;
    }

    /* En dessous de cette largeur la rangée déborde : on repasse en flex
       aligné à gauche. Centrer un contenu qui défile rendrait le premier
       onglet inatteignable dans certains navigateurs. */
    .service-panel-head {
        display: flex;
        justify-content: flex-start;
        align-items: flex-end;
        padding: 0.9rem 0 0;
        gap: 0.85rem;
    }

    /* Le libellé « Nos bots » mange une largeur précieuse sur petit écran,
       alors que les onglets se suffisent à eux-mêmes. */
    .service-offers-label {
        display: none;
    }

    .service-panel-body {
        padding: 2rem 0 0;
    }

    .seg-btn {
        padding: 0.45rem 0.7rem;
        font-size: 0.84rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORMULAIRES — respiration
   Les champs étaient trop serrés : 1,5 rem entre deux groupes et 1 rem de
   padding interne ne laissent pas l'œil se poser, surtout sur un formulaire
   de sept champs.
   ═══════════════════════════════════════════════════════════════════════════ */

.contact-form {
    padding: 2.75rem 2.5rem;
    border-radius: 14px;
}

.contact-form .form-group {
    margin-bottom: 1.9rem;
}

.contact-form .form-group:last-of-type {
    /* Même écart que partout ailleurs. Le cumul avec la marge haute du bouton
       produisait 42 px là où tout le reste du formulaire est à 30 px : c'est
       exactement le genre d'écart isolé qui se remarque. */
    margin-bottom: 1.9rem;
}

.contact-form .form-row {
    margin-bottom: 1.9rem;
    gap: 1.25rem;
}

.contact-form .form-group label {
    margin-bottom: 0.6rem;
    font-size: 0.93rem;
    letter-spacing: 0.01em;
}

.contact-form .form-group input,
.contact-form .form-group textarea,
.contact-form select {
    padding: 0.95rem 1.1rem;
    border-radius: 9px;
    font-size: 0.97rem;
}

.contact-form .form-group textarea {
    min-height: 150px;
    line-height: 1.65;
}

/* Le bouton reste très légèrement détaché du dernier champ — c'est l'action
   irréversible — mais 4 px suffisent, pas 12. */
.contact-form .form-submit {
    margin-top: 0.25rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.contact-form .form-intro {
    margin-bottom: 1.9rem;
}

.contact-form .form-group--check {
    margin-bottom: 1.9rem;
    padding: 1rem 1.15rem;
}

.contact-form .form-hint {
    margin: -1.1rem 0 1.9rem;
}

.contact-form .form-feedback-slot {
    margin-bottom: 1.5rem;
}

@media (max-width: 640px) {
    .contact-form {
        padding: 1.85rem 1.35rem;
    }

    .contact-form .form-group,
    .contact-form .form-row {
        margin-bottom: 1.6rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORMULAIRES — uniformisation verticale

   Les écarts mesurés étaient incohérents : 30 px après un champ simple, mais
   61 px après une rangée de deux champs. Cause : `.contact-form .form-group`
   (marge 1,9 rem) et `.contact-form .form-row` (marge 1,9 rem) ont la même
   spécificité, la seconde règle l'emportait — les groupes À L'INTÉRIEUR d'une
   rangée conservaient donc leur marge basse, qui s'ajoutait à celle de la
   rangée.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Un groupe dans une rangée n'a aucune marge propre : c'est la rangée qui
   porte l'espacement. Spécificité volontairement plus forte (0-3-0). */
.contact-form .form-row .form-group {
    margin-bottom: 0;
}

/* Un <textarea> est en inline-block par défaut : la ligne de base laisse
   quelques pixels sous lui, qui gonflaient l'écart avant le bouton d'envoi. */
.contact-form textarea {
    display: block;
}

/* Écart identique partout, bouton compris. */
.contact-form .form-submit {
    margin-top: 0;
}

.contact-form .form-group--check {
    margin-bottom: 1.9rem;
}

.contact-form .form-hint {
    /* Écart identique aux autres blocs : la mention n'est pas « collée » à la
       case, mais l'espacement reste régulier sur toute la hauteur. */
    margin: 0 0 1.9rem;
}

/* ── Crédit de réalisation ──────────────────────────────────────────────── */

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem 1rem;
}

.footer-credit {
    color: var(--text-muted);
}

.footer-credit a {
    color: var(--accent-light);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.25s ease, color 0.25s ease;
}

.footer-credit a:hover {
    color: var(--text-primary);
    border-bottom-color: var(--accent-primary);
}

/* Séparateur discret entre la mention légale et le crédit, masqué dès que les
   deux passent à la ligne. */
@media (min-width: 561px) {
    .footer-credit::before {
        content: '·';
        margin-right: 1rem;
        color: var(--glass-border);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PIED DE PAGE — responsive

   Les 6 icônes de réseaux sociaux (44 px + 1 rem d'écart = 318 px de large)
   débordaient à droite sous 400 px : `.footer-social` était en flex sans
   retour à la ligne, et `flex-shrink: 0` sur chaque lien empêchait toute
   compression.
   ═══════════════════════════════════════════════════════════════════════════ */

.footer-social {
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
}

@media (max-width: 768px) {
    .footer-content {
        gap: 2.5rem;
        padding-inline: 0;
    }

    .footer-social {
        gap: 0.75rem;
    }
}

@media (max-width: 420px) {
    /* Icônes légèrement réduites : six tiennent alors sur deux rangées
       centrées, sans jamais toucher les bords. */
    .footer-social {
        gap: 0.6rem;
    }

    .footer-social a {
        width: 40px;
        height: 40px;
    }

    .footer-links {
        gap: 0.75rem 1.25rem;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 0.35rem;
        text-align: center;
    }

    /* Le séparateur « · » n'a plus de sens sur deux lignes */
    .footer-credit::before {
        content: none;
    }
}

/* Filet de sécurité : aucun élément du pied de page ne doit provoquer de
   défilement horizontal, quelle que soit la largeur. */
footer {
    overflow-x: clip;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TRÈS PETITS ÉCRANS (≤ 420 px)

   Le titre du hero était figé à 48 px. Le mot « expérience » mesure alors
   345 px dans la fonte OmegaLarge, soit plus que les 272 px disponibles à
   320 px de large : le mot ne pouvant pas être coupé, il imposait sa largeur
   à toute la page et provoquait un défilement horizontal.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 420px) {
    .hero-content h1,
    .page-hero-content h1 {
        /* La borne en vw garantit que le titre suit la largeur réelle de
           l'écran, quelle que soit la longueur des mots. */
        font-size: clamp(1.75rem, 10.5vw, 2.6rem);
        overflow-wrap: break-word;
        hyphens: auto;
    }

    .hero,
    section {
        padding-inline: 1.1rem;
    }

    .section-title {
        font-size: clamp(1.5rem, 8.5vw, 2rem);
        overflow-wrap: break-word;
    }
}

/* Filet de sécurité global : un mot trop long ne doit jamais imposer sa
   largeur à la page entière. */
h1, h2, h3, .section-title {
    overflow-wrap: break-word;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SERVICES — illustration réelle

   Ces règles sont volontairement en fin de fichier : placées plus haut, la
   règle de base `.service-visual` (hauteur fixe de 400 px, fond, bordure)
   était déclarée APRÈS et l'emportait. Le cadre décoratif se superposait donc
   à l'image, avec du vide tout autour.

   Les illustrations sont très hétérogènes — 256×256, 512×512, 3866×2134.
   Aucun cadre de dimensions fixes ne peut leur convenir à toutes : c'est donc
   le cadre qui épouse l'image, et non l'inverse.
   ═══════════════════════════════════════════════════════════════════════════ */

.service-visual.service-visual--image {
    /* `fit-content` : le conteneur prend exactement la taille de l'image.
       Sans cela, il occupait toute la colonne et le tampon se retrouvait
       posé dans le vide, loin du coin de l'illustration. */
    width: fit-content;
    max-width: 100%;
    height: auto;
    min-height: 0;
    margin-inline: auto;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-visual.service-visual--image::before,
.service-visual.service-visual--image::after {
    content: none;
}

.service-visual-img {
    display: block;
    /* Taille naturelle, simplement plafonnée. Étirer un logo de 256 px sur
       500 px de large le rendrait flou : mieux vaut une image nette et
       modeste qu'une image grande et molle. */
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 420px;
    object-fit: contain;
    border-radius: 16px;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.38);
}

/* Le tampon se pose sur le coin de l'image, pas du conteneur. */
.service-visual--image .service-visual-stamp {
    top: -12px;
    right: -14px;
    z-index: 2;
}

@media (max-width: 968px) {
    .service-visual-img {
        max-height: 320px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SERVICES — statut « bientôt », options et partenariat
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Badge tarif : offre annoncée mais pas encore livrable ──────────────── */
.service-tarif--soon {
    background: rgba(230, 160, 60, 0.14);
    color: #e0a13c;
    border: 1px solid rgba(230, 160, 60, 0.35);
}

/* Repère discret dans l'onglet : savoir avant de cliquer évite une déception,
   sans charger la barre comme le faisait l'ancienne pastille « Gratuit ». */
.seg-soon {
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.08rem 0.38rem;
    border-radius: 999px;
    color: var(--text-muted);
    border: 1px solid var(--glass-border);
}

.seg-btn--soon .seg-btn-label {
    opacity: 0.75;
}

.seg-btn--soon.active .seg-btn-label {
    opacity: 1;
}

.seg-btn--soon.active .seg-soon {
    color: #e0a13c;
    border-color: rgba(230, 160, 60, 0.45);
}

/* ── Bandeau d'attente ──────────────────────────────────────────────────────
   Placé en tête de fiche : mieux vaut annoncer tout de suite qu'une offre
   n'est pas commandable plutôt que de le laisser découvrir en bas de page. */
.service-soon {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    border-radius: 10px;
    background: rgba(230, 160, 60, 0.08);
    border: 1px solid rgba(230, 160, 60, 0.28);
    text-align: left;
}

.service-soon svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 0.15rem;
    color: #e0a13c;
}

.service-soon p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--text-secondary);
}

/* ── Mention de partenariat ─────────────────────────────────────────────── */
.service-partner {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    border-radius: 10px;
    background: rgba(142, 36, 170, 0.07);
    border: 1px solid rgba(142, 36, 170, 0.25);
    text-align: left;
}

.service-partner svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 0.15rem;
    color: var(--accent-light);
}

.service-partner p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--text-secondary);
}

.service-partner a {
    color: var(--accent-light);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.25s ease;
}

.service-partner a:hover {
    border-bottom-color: var(--accent-primary);
}

/* ── Options facturables en supplément ──────────────────────────────────────
   Volontairement distinctes des fonctionnalités : ce ne sont PAS des éléments
   inclus, et les présenter pareil serait trompeur. D'où un encadré à part,
   un titre explicite et une mention de tarification. */
.service-options {
    margin: 1.75rem 0;
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px dashed var(--glass-border);
    text-align: left;
}

.service-options-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem 1.5rem;
}

.service-option {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.service-option > svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 0.2rem;
    color: var(--accent-light);
}

.service-option-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.service-option-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary);
}

.service-option-desc {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.service-options-note {
    margin: 1.25rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--glass-border);
    font-size: 0.83rem;
    font-style: italic;
    color: var(--text-muted);
}

@media (max-width: 640px) {
    .service-options {
        padding: 1.15rem;
    }

    .service-options-list {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   INDICATION DE DÉFILEMENT HORIZONTAL

   Une rangée d'onglets qui déborde ne le dit pas : rien ne distingue « il y a
   cinq onglets » de « il y en a cinq de plus à droite ». Trois signaux
   complémentaires, du plus discret au plus explicite :
     1. un dégradé de bord, du côté où il reste du contenu ;
     2. une flèche animée, superposée au dégradé ;
     3. une brève amorce de défilement au premier affichage (voir main.js).

   Les classes sont posées par window.initScrollHint() : aucun style inline
   n'est généré, la CSP reste stricte.
   ═══════════════════════════════════════════════════════════════════════════ */

.service-panel-head,
.join-tabs-nav {
    position: relative;
}

/* ESTOMPAGE PAR MASQUE, et non par dégradé peint par-dessus.

   La première approche superposait un pseudo-élément rempli de la couleur de
   fond. Elle échouait ici : le corps de page porte un dégradé décoratif, pas
   un aplat. Le rectangle de couleur unie se voyait donc comme un bloc plus
   sombre, au lieu de se fondre.

   `mask-image` agit sur l'ALPHA du contenu lui-même : les onglets deviennent
   progressivement transparents en approchant du bord, quel que soit ce qui est
   peint derrière. Aucune couleur à synchroniser, aucun thème à gérer.

   Les deux masques sont combinés en une seule déclaration par état, car
   plusieurs `mask-image` se multiplient entre eux — c'est exactement le
   comportement voulu quand le contenu déborde des deux côtés. */

.service-panel-head,
.join-tabs-nav {
    -webkit-mask-image: none;
    mask-image: none;
    transition: -webkit-mask-image 0.25s ease, mask-image 0.25s ease;
}

/* Déborde à droite seulement */
.has-overflow-end:not(.has-overflow-start) {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 80px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 calc(100% - 80px), transparent 100%);
}

/* Déborde à gauche seulement */
.has-overflow-start:not(.has-overflow-end) {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 80px);
    mask-image: linear-gradient(90deg, transparent 0, #000 80px);
}

/* Déborde des deux côtés */
.has-overflow-start.has-overflow-end {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}

/* Flèche : le dégradé seul se confond avec une ombre. Une flèche ne laisse
   aucun doute sur le geste attendu.

   Elle est portée par un ÉLÉMENT SÉPARÉ (.scroll-hint-arrow) et non par un
   pseudo-élément de la zone : celle-ci défile avec son contenu, la flèche
   partirait donc hors écran dès le premier geste. L'élément est posé par
   window.initScrollHint() dans le parent, qui lui ne bouge pas. */
/* Calque superposé à la zone d'onglets. Ses dimensions sont posées en JS
   (CSSOM, pas d'attribut style=) pour épouser exactement la barre.
   La pastille reste ainsi pleinement opaque alors que les onglets s'estompent
   derrière elle. */
.scroll-hint-layer {
    position: absolute;
    pointer-events: none;
    z-index: 4;
}

.scroll-hint-arrow {
    position: absolute;
    right: 6px;
    top: 50%;
    width: 26px;
    height: 26px;
    margin-top: -13px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    box-shadow: 0 3px 14px rgba(139, 58, 98, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.28s ease;
    pointer-events: none;
    z-index: 4;
}

.scroll-hint-arrow::before {
    content: '';
    width: 7px;
    height: 7px;
    margin-left: -2px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
}

.scroll-hint-layer.has-overflow-end > .scroll-hint-arrow {
    opacity: 1;
    animation: hintNudge 1.6s ease-in-out 3;
}

@keyframes hintNudge {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(4px); }
}

/* La barre de défilement native reste MASQUÉE : elle jurait avec le reste de
   l'interface. Le dégradé, la pastille fléchée et l'amorce animée suffisent
   à faire comprendre le geste. */
@media (max-width: 880px) {
    .service-panel-head,
    .join-tabs-nav {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .service-panel-head::-webkit-scrollbar,
    .join-tabs-nav::-webkit-scrollbar {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .scroll-hint-layer.has-overflow-end > .scroll-hint-arrow { animation: none; }
}

/* ── Outils employés ────────────────────────────────────────────────────────
   Nommer Blender, Maya ou Blockbench rassure un client qui sait de quoi il
   parle, et répond d'avance à la question du format de livraison. */
.service-tools {
    margin: 1.75rem 0;
    text-align: left;
}

.service-tools-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.service-tool {
    font-size: 0.83rem;
    font-weight: 500;
    padding: 0.35rem 0.8rem;
    border-radius: 8px;
    background: rgba(142, 36, 170, 0.1);
    color: var(--accent-light);
    border: 1px solid rgba(142, 36, 170, 0.25);
}

/* Sans illustration, le bloc de texte est centré : les outils doivent suivre. */
.service-tab-grid--solo .service-tools-list {
    justify-content: center;
}

.service-tab-grid--solo .service-tools {
    text-align: center;
}