/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #6366f1;
    --primary-dark: #4f46e5;
    --secondary-color: #8b5cf6;
    --accent-color: #ec4899;
    --text-dark: #1e293b;
    --text-light: #64748b;
    --bg-light: #f8fafc;
    --bg-white: #ffffff;
    --border-color: #e2e8f0;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --gradient-3: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: hidden;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.68);
    backdrop-filter: saturate(180%) blur(22px);
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    z-index: 1000;
    transition: background 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    border-bottom: 1px solid rgba(99, 102, 241, 0.08);
    box-shadow: 0 4px 24px rgba(30, 27, 75, 0.04);
}

.navbar.scrolled {
    background: rgba(255, 255, 255, 0.85);
    border-bottom-color: rgba(99, 102, 241, 0.14);
    box-shadow: 0 10px 34px rgba(30, 27, 75, 0.09);
}

.nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    position: relative;
}

/* Navbar pleine largeur : logo collé à gauche, pilule langue collée à droite */
.navbar .container {
    max-width: 100%;
    padding-left: 2rem;
    padding-right: 2rem;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}

.logo-img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
    transition: transform 0.3s ease;
}

.logo:hover .logo-img {
    transform: scale(1.05);
}

.logo-text {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text-dark);
    text-decoration: none;
}

.logo-highlight {
    background: var(--gradient-1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav-links {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.nav-link {
    font-family: 'Sora', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: #241f47;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.92rem;
    letter-spacing: 0;
    position: relative;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    transition: color 0.25s ease, background 0.25s ease, transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0.34rem;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--gradient-1);
    transition: width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.nav-link:hover {
    color: var(--primary-color);
    background: rgba(99, 102, 241, 0.08);
    transform: translateY(-1px);
}

.nav-link:hover::after {
    width: 38%;
}

.nav-link.active {
    color: var(--primary-color);
    background: rgba(99, 102, 241, 0.13);
    font-weight: 600;
}

.nav-link.active::after {
    width: 46%;
}

/* Conteneur « segmented » dépoli (desktop) — logo gauche · menu centré · langue droite */
@media (min-width: 969px) {
    .nav-links {
        gap: 0.2rem;
        padding: 0.32rem;
        background: rgba(99, 102, 241, 0.05);
        border: 1px solid rgba(99, 102, 241, 0.09);
        border-radius: 999px;
        box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.55), 0 2px 12px rgba(30, 27, 75, 0.04);
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
    }
    .navbar .nav-content { padding-right: 0; }
}

.mobile-menu-btn {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    position: relative;
    z-index: 1002;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.mobile-menu-btn span {
    width: 25px;
    height: 3px;
    background: var(--text-dark);
    transition: all 0.3s ease;
    border-radius: 3px;
}

/* Hero Section */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding-top: 80px;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background: linear-gradient(135deg, #f8fafc 0%, #e0e7ff 50%, #f5f3ff 75%, #e0e7ff 100%);
    background-size: 300% 300%;
    animation: heroBgShift 18s ease-in-out infinite;
}

@keyframes heroBgShift {
    0% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
    100% { background-position: 0% 0%; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-background {
        animation: none;
    }
}

.gradient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.6;
    animation: float 20s infinite ease-in-out;
}

.orb-1 {
    width: 500px;
    height: 500px;
    background: var(--gradient-1);
    top: -250px;
    right: -250px;
    animation-delay: 0s;
}

.orb-2 {
    width: 400px;
    height: 400px;
    background: var(--gradient-2);
    bottom: -200px;
    left: -200px;
    animation-delay: 5s;
}

.orb-3 {
    width: 300px;
    height: 300px;
    background: var(--gradient-3);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 10s;
}

@keyframes float {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(50px, -50px) scale(1.1);
    }
    66% {
        transform: translate(-50px, 50px) scale(0.9);
    }
}

.hero-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    animation: fadeInUp 1s ease;
}

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

.hero-title {
    font-size: 4rem;
    font-weight: 800;
    line-height: 1.1;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.title-line {
    display: block;
}

.gradient-text {
    background: var(--gradient-1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--text-light);
    margin-bottom: 2.5rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 4rem;
    flex-wrap: wrap;
}

.btn {
    padding: 1rem 2rem;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
    font-size: 1rem;
    border: none;
    cursor: pointer;
}

.btn-primary {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 4px 14px 0 rgba(99, 102, 241, 0.4);
}

.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px 0 rgba(99, 102, 241, 0.5);
}

.btn-secondary {
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    background: linear-gradient(90deg, #ffffff, #e0e7ff, #ffffff, #eef2ff);
    background-size: 300% 100%;
    animation: btnShimmer 6s ease-in-out infinite;
}

.btn-secondary .btn-icon {
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

@keyframes btnShimmer {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.btn-secondary:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-2px);
}

.btn-secondary:hover .btn-icon {
    transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
    .btn-secondary {
        animation: none;
    }
}

.btn-outline {
    background: transparent;
    color: var(--text-primary, #1e293b);
    border: 2px solid rgba(30, 41, 59, 0.15);
}

.btn-outline:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-2px);
}

.hero-stats {
    display: flex;
    gap: 3rem;
    justify-content: center;
    flex-wrap: wrap;
}

.stat-item {
    text-align: center;
}

.stat-number {
    display: block;
    font-size: 3rem;
    font-weight: 800;
    background: var(--gradient-1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-label {
    display: block;
    color: var(--text-light);
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-10px);
    }
    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}

.mouse {
    width: 26px;
    height: 40px;
    border: 2px solid var(--primary-color);
    border-radius: 13px;
    position: relative;
}

.wheel {
    width: 4px;
    height: 8px;
    background: var(--primary-color);
    border-radius: 2px;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    animation: scroll 2s infinite;
}

@keyframes scroll {
    0% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(12px);
    }
}

/* Section Styles */
section {
    padding: 6rem 0;
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.section-label {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary-color);
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.section-description {
    font-size: 1.125rem;
    color: var(--text-light);
    max-width: 700px;
    margin: 0 auto;
}

/* Services Section */
.services {
    background: var(--bg-white);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.service-card {
    background: white;
    border: 2px solid var(--border-color);
    border-radius: 20px;
    padding: 2.5rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    text-decoration: none !important;
    color: var(--text-dark);
    display: block;
    cursor: pointer;
}

.service-card * {
    text-decoration: none !important;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-1);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-color);
}

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

.service-card.featured {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
}

.service-card.featured .service-description,
.service-card.featured .service-features li {
    color: rgba(255, 255, 255, 0.9);
}

.featured-badge {
    position: absolute !important;
    top: 48px !important;
    right: -96px !important;
    width: 320px !important;
    margin: 0 !important;
    padding: 0.5rem 0;
    text-align: center;
    transform: rotate(45deg);
    background: linear-gradient(120deg, #ff5f6d 0%, #e11d48 55%, #be123c 100%);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-top: 2px dashed rgba(255,255,255,.55);
    border-bottom: 2px dashed rgba(255,255,255,.55);
    box-shadow: inset 0 2px 0 rgba(255,255,255,.35), inset 0 -4px 8px rgba(90,0,20,.28), 0 8px 22px rgba(225, 29, 72, 0.55);
    overflow: hidden;
    z-index: 2;
    animation: elpRibbonGlow 2.6s ease-in-out infinite;
}
.featured-badge::before {
    content: "★  ";
    display: inline-block;
    animation: elpStarTwinkle 1.8s ease-in-out infinite;
}
.featured-badge::after {
    content: "";
    position: absolute;
    top: 0;
    left: -130%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
    transform: skewX(-20deg);
    animation: elpRibbonShine 3.2s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes elpRibbonShine { 0% { left: -130%; } 55% { left: 150%; } 100% { left: 150%; } }
@keyframes elpRibbonGlow { 0%, 100% { box-shadow: inset 0 2px 0 rgba(255,255,255,.35), inset 0 -4px 8px rgba(120,0,50,.22), 0 8px 22px rgba(225,29,72,.5); } 50% { box-shadow: inset 0 2px 0 rgba(255,255,255,.35), inset 0 -4px 8px rgba(90,0,20,.28), 0 12px 36px rgba(244,63,94,.9); } }
@keyframes elpStarTwinkle { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35) rotate(20deg); opacity: .85; } }
@media (prefers-reduced-motion: reduce) { .featured-badge, .featured-badge::before, .featured-badge::after { animation: none; } }

.service-icon {
    width: 60px;
    height: 60px;
    background: rgba(99, 102, 241, 0.1);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.service-card.featured .service-icon {
    background: rgba(255, 255, 255, 0.2);
}

.service-icon svg {
    width: 30px;
    height: 30px;
    color: var(--primary-color);
}

.service-card.featured .service-icon svg {
    color: white;
}

.service-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.service-description {
    color: var(--text-light);
    margin-bottom: 1.5rem;
}

.service-features {
    list-style: none;
    margin-bottom: 1.5rem;
}

.service-features li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
    color: var(--text-light);
}

.service-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: 700;
}

.service-card.featured .service-features li::before {
    color: white;
}

.service-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: gap 0.3s ease;
}

.service-card.featured .service-link {
    color: white;
}

.service-link:hover {
    gap: 1rem;
}

.service-link-text {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    margin-top: 1rem;
}

.service-card:hover .service-link-text {
    gap: 1rem;
    color: var(--primary-dark);
}

.service-card.featured .service-link-text {
    color: white;
}

/* Platforms Section */
.platforms {
    background: var(--bg-light);
}

.platforms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.platform-card {
    background: white;
    border-radius: 20px;
    padding: 2rem;
    text-decoration: none;
    color: var(--text-dark);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(0, 0, 0, 0.05);
    display: block;
    position: relative;
    overflow: hidden;
}

/* Effet Glossy haute qualité pour les plateformes */
.platform-card.glossy {
    background: linear-gradient(145deg, 
        rgba(255, 255, 255, 1) 0%, 
        rgba(248, 250, 252, 0.98) 50%, 
        rgba(255, 255, 255, 1) 100%);
    box-shadow: 
        0 4px 20px rgba(99, 102, 241, 0.08),
        0 2px 8px rgba(139, 92, 246, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(99, 102, 241, 0.08);
}

.platform-card.glossy::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(180deg, 
        rgba(255, 255, 255, 0.6) 0%, 
        rgba(255, 255, 255, 0) 100%);
    border-radius: 20px 20px 0 0;
    pointer-events: none;
}

.platform-card.glossy::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.3) 50%, 
        transparent 100%);
    transform: skewX(-20deg);
    transition: left 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.platform-card.glossy:hover::after {
    left: 150%;
}

.platform-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 
        0 20px 60px rgba(99, 102, 241, 0.15),
        0 15px 35px rgba(139, 92, 246, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.05);
    border-color: rgba(99, 102, 241, 0.2);
}

.platform-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.platform-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.platform-icon svg {
    width: 28px;
    height: 28px;
}

.platform-icon.apple {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.platform-icon.learning {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(240, 147, 251, 0.3);
}

.platform-icon.formations {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(79, 172, 254, 0.3);
}

.platform-icon.forums {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(67, 233, 123, 0.3);
}

.platform-icon.blog {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(250, 112, 154, 0.3);
}

.platform-icon.shop {
    background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(48, 207, 208, 0.3);
}

.platform-icon.depannage {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(240, 147, 251, 0.3);
}

.platform-icon.web {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.platform-card:hover .platform-icon {
    transform: scale(1.05);
}

.platform-status {
    padding: 0.375rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(16, 185, 129, 0.1);
    color: var(--success-color);
}

.platform-status.active {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success-color);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.platform-status.development {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning-color);
}

.platform-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.platform-description {
    color: var(--text-light);
    font-size: 0.95rem;
}

/* About Section */
.about {
    background: white;
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.about-text p {
    margin-bottom: 1.5rem;
    color: var(--text-light);
    font-size: 1.05rem;
    line-height: 1.8;
}

.about-features {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 2rem;
}

.about-feature {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.feature-icon {
    width: 40px;
    height: 40px;
    background: var(--gradient-1);
    color: white;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}

.about-feature h4 {
    margin-bottom: 0.25rem;
}

.about-feature p {
    margin: 0;
    font-size: 0.95rem;
}

.about-image {
    position: relative;
    height: 500px;
}

.image-decoration {
    width: 100%;
    height: 100%;
    background: var(--gradient-1);
    border-radius: 20px;
    position: relative;
}

.floating-card {
    position: absolute;
    background: white;
    padding: 1.5rem;
    border-radius: 15px;
    box-shadow: var(--shadow-xl);
    display: flex;
    align-items: center;
    gap: 1rem;
    animation: float 6s infinite ease-in-out;
}

.card-1 {
    top: 10%;
    right: -20px;
    animation-delay: 0s;
}

.card-2 {
    top: 45%;
    left: -20px;
    animation-delay: 2s;
}

.card-3 {
    bottom: 10%;
    right: -20px;
    animation-delay: 4s;
}

.card-icon {
    font-size: 2rem;
}

.card-text {
    font-weight: 600;
    font-size: 1.125rem;
}

/* Contact Section */
.contact {
    background: var(--bg-light);
    padding-top: 2.5rem;
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

.contact-info p {
    color: var(--text-light);
    margin: 1.5rem 0 2rem;
    font-size: 1.05rem;
    line-height: 1.8;
}

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

.contact-method {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.method-icon {
    width: 50px;
    height: 50px;
    background: var(--gradient-1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

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

.contact-method h4 {
    margin-bottom: 0.25rem;
}

.contact-method p {
    margin: 0;
    color: var(--text-light);
}

.contact-form {
    background: white;
    padding: 2.5rem;
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
}

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

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

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    font-family: inherit;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.form-group textarea {
    resize: vertical;
}

/* Footer */
.footer {
    background: var(--text-dark);
    color: white;
    padding: 4rem 0 2rem;
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.footer-logo-img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.footer-section h3,
.footer-section h4 {
    margin-bottom: 1rem;
    color: white;
}

.footer-section .logo-text {
    color: white !important;
}

.footer-section .logo-highlight {
    background: var(--gradient-1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.footer-section p {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.8;
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 0.75rem;
}

.footer-section ul li a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section ul li a:hover {
    color: white;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom p {
    color: rgba(255, 255, 255, 0.92);
    font-weight: 500;
}
.footer-bottom .ftr-heart {
    display: inline-block;
    filter: brightness(1.12) saturate(1.15) drop-shadow(0 0 7px rgba(255,60,90,.85)) drop-shadow(0 0 16px rgba(255,60,90,.5));
    animation: ftrHeartPulse 1.6s ease-in-out infinite;
}
@keyframes ftrHeartPulse {
    0%, 100% { transform: scale(1); filter: brightness(1.12) saturate(1.15) drop-shadow(0 0 7px rgba(255,60,90,.85)) drop-shadow(0 0 15px rgba(255,60,90,.45)); }
    50% { transform: scale(1.18); filter: brightness(1.22) saturate(1.25) drop-shadow(0 0 10px rgba(255,80,110,1)) drop-shadow(0 0 22px rgba(255,60,90,.7)); }
}
@media (prefers-reduced-motion: reduce) { .footer-bottom .ftr-heart { animation: none; } }
.footer-bottom .ftr-link { color: #fff; text-decoration: none; font-weight: 600; transition: color .2s ease; }
.footer-bottom .ftr-link:hover { color: #c4b5fd; text-decoration: underline; }

/* une seule ligne, comme sur les autres sites du groupe : la regle
   dupliquee ci-dessous (flex-wrap: wrap) faisait passer GitHub seul sur une
   2e ligne des que les 7 icones ne tenaient plus en largeur */
.social-links {
    display: flex;
    gap: 0.75rem;
    flex-wrap: nowrap;
}

.social-icon {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.social-icon:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.social-icon.youtube:hover {
    background: #FF0000;
}

.social-icon.tiktok:hover {
    background: linear-gradient(135deg, #69C9D0 0%, #EE1D52 100%);
}

.social-icon.linkedin:hover {
    background: #0077B5;
}

.social-icon.x:hover {
    background: #000000;
}

.social-icon.facebook:hover {
    background: #1877F2;
}

.social-icon.instagram:hover {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.social-icon.github:hover {
    background: #333333;
}

.social-icon svg {
    width: 22px;
    height: 22px;
    color: white;
}

/* Responsive Design */
@media (max-width: 968px) {
    .nav-links {
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        background: white;
        flex-direction: column;
        padding: 2rem;
        gap: 1rem;
        box-shadow: var(--shadow-lg);
        transform: translateY(-100%);
        opacity: 0;
        pointer-events: none;
        z-index: 1001;
        transition: all 0.3s ease;
    }

    .nav-links.active {
        pointer-events: auto;
    }

    .nav-links.active {
        transform: translateY(0);
        opacity: 1;
    }

    .mobile-menu-btn {
        display: flex;
    }

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

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

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

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 1.1rem;
    }

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

    .about-image {
        height: 400px;
    }

    .footer-content {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    .section-title {
        font-size: 2rem;
    }
}

@media (max-width: 640px) {
    .hero-title {
        font-size: 2rem;
    }

    .hero-stats {
        gap: 2rem;
    }

    .stat-number {
        font-size: 2.5rem;
    }

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

    .footer-content {
        grid-template-columns: 1fr;
    }

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

    .hero-buttons {
        flex-direction: column;
        width: 100%;
    }

    .btn {
        width: 100%;
    }
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fade-in {
    animation: revealPremium 1.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.slide-in-left {
    animation: slideInLeft 0.8s ease;
}

.slide-in-right {
    animation: slideInRight 0.8s ease;
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ============================================================
   Apple-premium — liens vers apple.elpisia.com
   Carte "space black", logo argenté, halo qui suit le curseur,
   inclinaison 3D (voir script.js). Ajout 2026-07-14.
   ============================================================ */
.apple-premium {
    position: relative;
    isolation: isolate;
    background: linear-gradient(165deg, #17171a 0%, #29292e 55%, #1c1c1f 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    color: #f5f5f7 !important;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        inset 0 -1px 0 rgba(0, 0, 0, 0.4) !important;
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.55s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Halo lumineux qui suit le curseur (--mx/--my posés par le JS) */
.platform-card.apple-premium::before,
.service-card.apple-premium::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(340px circle at var(--mx, 50%) var(--my, -20%),
                rgba(122, 145, 255, 0.28), transparent 62%);
    opacity: 0;
    transition: opacity 0.45s ease;
    pointer-events: none;
    z-index: 0;
}
.apple-premium:hover::before { opacity: 1; }

/* Reflet balayant argenté (réutilise ::after pour les platform-cards) */
.platform-card.apple-premium.glossy::after {
    background: linear-gradient(90deg,
        transparent 0%, rgba(255, 255, 255, 0.14) 50%, transparent 100%);
}
.service-card.apple-premium::after {
    content: '';
    position: absolute;
    top: 0; left: -110%;
    width: 55%; height: 100%;
    background: linear-gradient(90deg,
        transparent 0%, rgba(255, 255, 255, 0.12) 50%, transparent 100%);
    transform: skewX(-20deg);
    transition: left 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 0;
}
.service-card.apple-premium:hover::after { left: 160%; }

/* Contenu au-dessus du halo */
.apple-premium > * { position: relative; z-index: 1; }

/* Lueur d'accent au survol (sans le lift : le JS gère l'inclinaison) */
.apple-premium:hover {
    box-shadow:
        0 26px 70px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(122, 145, 255, 0.35),
        0 18px 60px rgba(90, 110, 255, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(122, 145, 255, 0.4) !important;
}

/* Logo Apple — pastille argentée métallique qui respire */
.apple-premium .platform-icon.apple,
.apple-premium .service-icon {
    background: linear-gradient(160deg, #fdfdff 0%, #d7d7dc 45%, #a9a9b2 100%) !important;
    color: #1a1a1c !important;
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.45),
        inset 0 1px 1px rgba(255, 255, 255, 0.9),
        inset 0 -2px 4px rgba(0, 0, 0, 0.18) !important;
    animation: applePulse 4.5s ease-in-out infinite;
}
.apple-premium .platform-icon.apple svg,
.apple-premium .service-icon svg { filter: drop-shadow(0 1px 0 rgba(255,255,255,0.6)); }

.apple-premium:hover .platform-icon.apple,
.apple-premium:hover .service-icon {
    transform: scale(1.08) translateZ(30px);
}

@keyframes applePulse {
    0%, 100% { box-shadow: 0 6px 18px rgba(0,0,0,0.45), inset 0 1px 1px rgba(255,255,255,0.9), inset 0 -2px 4px rgba(0,0,0,0.18), 0 0 0 0 rgba(160,175,255,0.0); }
    50%      { box-shadow: 0 6px 22px rgba(0,0,0,0.5),  inset 0 1px 1px rgba(255,255,255,0.9), inset 0 -2px 4px rgba(0,0,0,0.18), 0 0 22px 4px rgba(150,168,255,0.22); }
}

/* Typo claire sur fond sombre */
.apple-premium .platform-title,
.apple-premium .service-title { color: #ffffff !important; letter-spacing: -0.02em; }
.apple-premium .platform-description,
.apple-premium .service-description { color: #b8b8c0 !important; }
.apple-premium .service-features li { color: #cfcfd6 !important; }
.apple-premium .service-features li::before { color: #8fa2ff !important; }
.apple-premium .service-link-text { color: #8fa2ff !important; font-weight: 600; }
.apple-premium:hover .service-link-text { color: #aeb9ff !important; }

/* Badge statut adapté au sombre */
.apple-premium .platform-status.active {
    background: rgba(122, 145, 255, 0.16) !important;
    color: #b9c4ff !important;
    box-shadow: 0 0 0 3px rgba(122, 145, 255, 0.10) !important;
}

/* ============================================================
   Révélation premium raffinée + cascade
   ============================================================ */
.services-grid .service-card,
.platforms-grid .platform-card { transition-delay: 0s; }

.fade-in {
    animation: revealPremium 1.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes revealPremium {
    from { opacity: 0; transform: translateY(28px) scale(0.985); filter: blur(6px); }
    to   { opacity: 1; transform: translateY(0)    scale(1);     filter: blur(0); }
}

/* Cascade : chaque carte de la grille arrive légèrement décalée */
.platforms-grid .platform-card:nth-child(2).fade-in { animation-delay: 0.06s; }
.platforms-grid .platform-card:nth-child(3).fade-in { animation-delay: 0.12s; }
.platforms-grid .platform-card:nth-child(4).fade-in { animation-delay: 0.18s; }
.platforms-grid .platform-card:nth-child(5).fade-in { animation-delay: 0.24s; }
.platforms-grid .platform-card:nth-child(6).fade-in { animation-delay: 0.30s; }
.platforms-grid .platform-card:nth-child(7).fade-in { animation-delay: 0.36s; }
.services-grid .service-card:nth-child(2).fade-in { animation-delay: 0.07s; }
.services-grid .service-card:nth-child(3).fade-in { animation-delay: 0.14s; }
.services-grid .service-card:nth-child(4).fade-in { animation-delay: 0.21s; }
.services-grid .service-card:nth-child(5).fade-in { animation-delay: 0.28s; }

/* Respect de la préférence "réduire les animations" */
@media (prefers-reduced-motion: reduce) {
    .apple-premium, .apple-premium .platform-icon.apple, .apple-premium .service-icon { animation: none !important; transition: none !important; }
    .fade-in { animation: revealPremium 1.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
}


/* ===== Cartes services colorées + animations (2026-07-16) ===== */
.services-grid > .service-card { isolation: isolate; }
.services-grid > .service-card > * { position: relative; z-index: 1; }
.services-grid > .service-card:nth-child(1)::before,
.services-grid > .service-card:nth-child(4)::before,
.services-grid > .service-card:nth-child(5)::before,
.services-grid > .service-card:nth-child(6)::before { display: none; }
/* reflet balayant */
.services-grid > .service-card:nth-child(1)::after,
.services-grid > .service-card:nth-child(4)::after,
.services-grid > .service-card:nth-child(5)::after,
.services-grid > .service-card:nth-child(6)::after {
  content:''; position:absolute; top:0; left:-110%; width:55%; height:100%;
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.18) 50%, transparent 100%);
  transform:skewX(-20deg); transition:left .8s cubic-bezier(.4,0,.2,1); pointer-events:none; z-index:0;
}
.services-grid > .service-card:nth-child(1):hover::after,
.services-grid > .service-card:nth-child(4):hover::after,
.services-grid > .service-card:nth-child(5):hover::after,
.services-grid > .service-card:nth-child(6):hover::after { left:160%; }
/* thèmes */
.services-grid > .service-card:nth-child(1) { background:linear-gradient(160deg,#1d4ed8 0%,#2563eb 45%,#06b6d4 100%); border:none; color:#fff; box-shadow:0 14px 40px rgba(37,99,235,.30); }
.services-grid > .service-card:nth-child(4) { background:linear-gradient(160deg,#c2410c 0%,#f97316 55%,#fbbf24 100%); border:none; color:#fff; box-shadow:0 14px 40px rgba(249,115,22,.30); }
.services-grid > .service-card:nth-child(5) { background:linear-gradient(160deg,#be185d 0%,#ec4899 55%,#a855f7 100%); border:none; color:#fff; box-shadow:0 14px 40px rgba(236,72,153,.30); }
.services-grid > .service-card:nth-child(6) { background:linear-gradient(160deg,#0f766e 0%,#14b8a6 55%,#22d3ee 100%); border:none; color:#fff; box-shadow:0 14px 40px rgba(20,184,166,.30); }
/* textes blancs */
.services-grid > .service-card:nth-child(1) .service-title, .services-grid > .service-card:nth-child(4) .service-title,
.services-grid > .service-card:nth-child(5) .service-title, .services-grid > .service-card:nth-child(6) .service-title,
.services-grid > .service-card:nth-child(1) .service-link-text, .services-grid > .service-card:nth-child(4) .service-link-text,
.services-grid > .service-card:nth-child(5) .service-link-text, .services-grid > .service-card:nth-child(6) .service-link-text { color:#fff; }
.services-grid > .service-card:nth-child(1) .service-description, .services-grid > .service-card:nth-child(4) .service-description,
.services-grid > .service-card:nth-child(5) .service-description, .services-grid > .service-card:nth-child(6) .service-description,
.services-grid > .service-card:nth-child(1) .service-features li, .services-grid > .service-card:nth-child(4) .service-features li,
.services-grid > .service-card:nth-child(5) .service-features li, .services-grid > .service-card:nth-child(6) .service-features li { color:rgba(255,255,255,.92); }
.services-grid > .service-card:nth-child(1) .service-features li::before, .services-grid > .service-card:nth-child(4) .service-features li::before,
.services-grid > .service-card:nth-child(5) .service-features li::before, .services-grid > .service-card:nth-child(6) .service-features li::before { color:#fff; }
/* pastille icône blanche, icône colorée */
.services-grid > .service-card:nth-child(1) .service-icon, .services-grid > .service-card:nth-child(4) .service-icon,
.services-grid > .service-card:nth-child(5) .service-icon, .services-grid > .service-card:nth-child(6) .service-icon {
  background:rgba(255,255,255,.95); box-shadow:0 8px 22px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.9);
}
.services-grid > .service-card:nth-child(1) .service-icon svg { color:#2563eb; }
.services-grid > .service-card:nth-child(4) .service-icon svg { color:#ea580c; }
.services-grid > .service-card:nth-child(5) .service-icon svg { color:#db2777; }
.services-grid > .service-card:nth-child(6) .service-icon svg { color:#0d9488; }
/* survol : lift + ombre colorée + animation d'icône propre à chaque carte */
.services-grid > .service-card:nth-child(1):hover { transform:translateY(-8px); box-shadow:0 26px 64px rgba(37,99,235,.45); border:none; }
.services-grid > .service-card:nth-child(4):hover { transform:translateY(-8px); box-shadow:0 26px 64px rgba(249,115,22,.45); border:none; }
.services-grid > .service-card:nth-child(5):hover { transform:translateY(-8px); box-shadow:0 26px 64px rgba(236,72,153,.45); border:none; }
.services-grid > .service-card:nth-child(6):hover { transform:translateY(-8px); box-shadow:0 26px 64px rgba(20,184,166,.45); border:none; }
.services-grid > .service-card:nth-child(1):hover .service-icon { animation: elpFlip .7s ease; }
.services-grid > .service-card:nth-child(4):hover .service-icon { animation: elpWiggle .6s ease; }
.services-grid > .service-card:nth-child(5):hover .service-icon { animation: elpSpinPulse .8s ease; }
.services-grid > .service-card:nth-child(6):hover .service-icon { animation: elpBounce .7s ease; }
@keyframes elpFlip { from{transform:rotateY(0)} to{transform:rotateY(360deg)} }
@keyframes elpWiggle { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-14deg)} 60%{transform:rotate(12deg)} }
@keyframes elpSpinPulse { 0%{transform:rotate(0) scale(1)} 50%{transform:rotate(180deg) scale(1.15)} 100%{transform:rotate(360deg) scale(1)} }
@keyframes elpBounce { 0%,100%{transform:translateY(0)} 40%{transform:translateY(-10px)} 70%{transform:translateY(3px)} }

/* ===== Cards affiliées colorées : 7=Ebooks (violet) · 8=Matériel (cyan) · 9=Logiciel (émeraude) ===== */
.services-grid > .service-card:nth-child(7),
.services-grid > .service-card:nth-child(8),
.services-grid > .service-card:nth-child(9) { border:none; color:#fff; }
.services-grid > .service-card:nth-child(7)::before,
.services-grid > .service-card:nth-child(8)::before,
.services-grid > .service-card:nth-child(9)::before { display:none; }
.services-grid > .service-card:nth-child(7) { background:linear-gradient(160deg,#6d28d9 0%,#8b5cf6 55%,#c4b5fd 100%); box-shadow:0 14px 40px rgba(139,92,246,.30); }
.services-grid > .service-card:nth-child(8) { background:linear-gradient(160deg,#0e7490 0%,#0891b2 55%,#22d3ee 100%); box-shadow:0 14px 40px rgba(8,145,178,.30); }
.services-grid > .service-card:nth-child(9) { background:linear-gradient(160deg,#047857 0%,#10b981 55%,#6ee7b7 100%); box-shadow:0 14px 40px rgba(16,185,129,.30); }
.services-grid > .service-card:nth-child(7)::after,
.services-grid > .service-card:nth-child(8)::after,
.services-grid > .service-card:nth-child(9)::after {
  content:''; position:absolute; top:0; left:-110%; width:55%; height:100%;
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.18) 50%, transparent 100%);
  transform:skewX(-20deg); transition:left .8s cubic-bezier(.4,0,.2,1); pointer-events:none; z-index:0;
}
.services-grid > .service-card:nth-child(7):hover::after,
.services-grid > .service-card:nth-child(8):hover::after,
.services-grid > .service-card:nth-child(9):hover::after { left:160%; }
.services-grid > .service-card:nth-child(7) .service-title, .services-grid > .service-card:nth-child(8) .service-title, .services-grid > .service-card:nth-child(9) .service-title,
.services-grid > .service-card:nth-child(7) .service-link-text, .services-grid > .service-card:nth-child(8) .service-link-text, .services-grid > .service-card:nth-child(9) .service-link-text { color:#fff; }
.services-grid > .service-card:nth-child(7) .service-description, .services-grid > .service-card:nth-child(8) .service-description, .services-grid > .service-card:nth-child(9) .service-description,
.services-grid > .service-card:nth-child(7) .service-features li, .services-grid > .service-card:nth-child(8) .service-features li, .services-grid > .service-card:nth-child(9) .service-features li { color:rgba(255,255,255,.92); }
.services-grid > .service-card:nth-child(7) .service-features li::before, .services-grid > .service-card:nth-child(8) .service-features li::before, .services-grid > .service-card:nth-child(9) .service-features li::before { color:#fff; }
.services-grid > .service-card:nth-child(7) .service-icon, .services-grid > .service-card:nth-child(8) .service-icon, .services-grid > .service-card:nth-child(9) .service-icon {
  background:rgba(255,255,255,.95); box-shadow:0 8px 22px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.9);
}
.services-grid > .service-card:nth-child(7) .service-icon svg { color:#7c3aed; }
.services-grid > .service-card:nth-child(8) .service-icon svg { color:#0891b2; }
.services-grid > .service-card:nth-child(9) .service-icon svg { color:#059669; }
.services-grid > .service-card:nth-child(7):hover { transform:translateY(-8px); box-shadow:0 26px 64px rgba(139,92,246,.45); border:none; }
.services-grid > .service-card:nth-child(8):hover { transform:translateY(-8px); box-shadow:0 26px 64px rgba(8,145,178,.45); border:none; }
.services-grid > .service-card:nth-child(9):hover { transform:translateY(-8px); box-shadow:0 26px 64px rgba(16,185,129,.45); border:none; }
.services-grid > .service-card:nth-child(7):hover .service-icon { animation: elpSpinPulse .8s ease; }
.services-grid > .service-card:nth-child(8):hover .service-icon { animation: elpFlip .7s ease; }
.services-grid > .service-card:nth-child(9):hover .service-icon { animation: elpBounce .7s ease; }

/* ===== Modale premium (formulaire de contact) ===== */
.elp-overlay { position:fixed; inset:0; background:rgba(17,10,40,.5); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; z-index:99999; opacity:0; transition:opacity .25s ease; padding:20px; }
.elp-overlay.show { opacity:1; }
.elp-dialog { background:#fff; border-radius:24px; max-width:430px; width:100%; padding:34px 30px 26px; text-align:center;
  box-shadow:0 40px 100px rgba(17,10,40,.45); transform:translateY(16px) scale(.95); transition:transform .32s cubic-bezier(.2,.8,.2,1); }
.elp-overlay.show .elp-dialog { transform:none; }
.elp-dialog-icon { width:66px; height:66px; border-radius:20px; display:flex; align-items:center; justify-content:center;
  margin:0 auto 18px; font-size:30px; font-weight:800; background:linear-gradient(135deg,#22c55e,#16a34a); color:#fff;
  box-shadow:0 16px 34px rgba(34,197,94,.42); }
.elp-dialog.error .elp-dialog-icon { background:linear-gradient(135deg,#f59e0b,#ef4444); box-shadow:0 16px 34px rgba(239,68,68,.4); }
.elp-dialog h3 { font-size:22px; font-weight:800; color:#111; margin-bottom:8px; }
.elp-dialog p { color:#555; line-height:1.6; margin-bottom:22px; white-space:pre-line; }
.elp-dialog .elp-btn { display:inline-block; background:linear-gradient(135deg,#6366f1,#8b5cf6); color:#fff; font-weight:700;
  border:none; border-radius:999px; padding:12px 38px; font-size:15px; cursor:pointer; transition:transform .2s, box-shadow .2s;
  box-shadow:0 10px 24px rgba(99,102,241,.35); }
.elp-dialog .elp-btn:hover { transform:translateY(-2px); box-shadow:0 16px 34px rgba(99,102,241,.45); }

/* ===== ELP-PLATFORM-COLORS : chaque carte écosystème a sa couleur ===== */
.platform-card.glossy { border: 1px solid rgba(30,41,59,.06); }
.platform-card:has(.platform-icon.web) { background: linear-gradient(135deg, #e9f8f1 0%, #d6f3e5 100%); }
.platform-card:has(.platform-icon.formations) { background: linear-gradient(135deg, #eaf2ff 0%, #d9e8ff 100%); }
.platform-card:has(.platform-icon.depannage) { background: linear-gradient(135deg, #ffeaef 0%, #ffdbe5 100%); }
.platform-card:has(.platform-icon.shop) { background: linear-gradient(135deg, #efecff 0%, #e3deff 100%); }
.platform-card:has(.platform-icon.blog) { background: linear-gradient(135deg, #fff2e7 0%, #ffe6d2 100%); }
.platform-card:has(.platform-icon.forums) { background: linear-gradient(135deg, #e7f7f5 0%, #d5f1ed 100%); }
.platform-card:not(.apple-premium):has(.platform-icon) .platform-title { color: #1e293b; }
.platform-card:not(.apple-premium):has(.platform-icon) .platform-description { color: #5b6472; }
.platform-card:not(.apple-premium):has(.platform-icon) .platform-icon {
    background: linear-gradient(160deg, #fdfdff 0%, #d4d4de 100%) !important;
    box-shadow: inset 0 1px 1px rgba(255,255,255,.95), inset 0 -2px 4px rgba(0,0,0,.16), 0 8px 18px rgba(0,0,0,.22);
    border-radius: 16px;
}
.platform-card .platform-icon.web svg { color: #10b981 !important; stroke: #10b981; }
.platform-card .platform-icon.formations svg { color: #2563eb !important; stroke: #2563eb; }
.platform-card .platform-icon.depannage svg { color: #e11d48 !important; stroke: #e11d48; }
.platform-card .platform-icon.shop svg { color: #6d5efc !important; stroke: #6d5efc; }
.platform-card .platform-icon.blog svg { color: #f97316 !important; stroke: #f97316; }
.platform-card .platform-icon.forums svg { color: #0d9488 !important; stroke: #0d9488; }
.platform-card .platform-status.active { background: #10b981 !important; color: #fff !important; box-shadow: 0 4px 12px rgba(16,185,129,.35); backdrop-filter: none; }
.platform-card .platform-status.development { background: #f59e0b !important; color: #fff !important; box-shadow: 0 4px 12px rgba(245,158,11,.35); backdrop-filter: none; }
.platform-card:has(.platform-icon.web):hover        { box-shadow: 0 22px 44px rgba(16,185,129, .22); }
.platform-card:has(.platform-icon.formations):hover { box-shadow: 0 22px 44px rgba(56,132,248, .22); }
.platform-card:has(.platform-icon.depannage):hover  { box-shadow: 0 22px 44px rgba(225,29,72, .22); }
.platform-card:has(.platform-icon.shop):hover       { box-shadow: 0 22px 44px rgba(99,70,229, .22); }
.platform-card:has(.platform-icon.blog):hover       { box-shadow: 0 22px 44px rgba(249,115,22, .22); }
.platform-card:has(.platform-icon.forums):hover     { box-shadow: 0 22px 44px rgba(13,148,136, .22); }
.platform-card:has(.platform-icon.materiel) { background: linear-gradient(135deg, #e2f4fb 0%, #c9e9fa 100%); }
.platform-card .platform-icon.materiel svg { color: #0891b2 !important; stroke: #0891b2; }
.platform-card:has(.platform-icon.materiel):hover   { box-shadow: 0 22px 44px rgba(8,145,178, .22); }
.platform-card:has(.platform-icon.logiciel) { background: linear-gradient(135deg, #e6f8ef 0%, #cef0dd 100%); }
.platform-card .platform-icon.logiciel svg { color: #059669 !important; stroke: #059669; }
.platform-card:has(.platform-icon.logiciel):hover   { box-shadow: 0 22px 44px rgba(5,150,105, .22); }
.platform-card:has(.platform-icon.apps) { background: linear-gradient(135deg, #e9ecff 0%, #d7dcff 100%); }
.platform-card .platform-icon.apps svg { color: #5b6cf0 !important; stroke: #5b6cf0; }
.platform-card:has(.platform-icon.apps):hover      { box-shadow: 0 22px 44px rgba(91,108,240, .22); }
/* /ELP-PLATFORM-COLORS */
/* ===== ELP-PLATFORM-BOX-ILLUS : grande box blanche + illustrations ===== */
.platforms-grid {
    background: linear-gradient(180deg, #ffffff 0%, #f7f4ff 100%);
    border-radius: 34px;
    padding: 2.4rem;
    box-shadow: 0 34px 90px rgba(90, 62, 166, 0.16), 0 4px 18px rgba(90, 62, 166, 0.07), inset 0 2px 0 #ffffff;
    border: 1px solid rgba(122, 110, 240, 0.10);
}
@media (max-width: 640px) { .platforms-grid { padding: 1.2rem; border-radius: 24px; } }
.platform-card {
    padding-bottom: 180px !important;
    background-repeat: no-repeat, no-repeat;
    background-position: center bottom 20px, center;
    background-size: auto 138px, cover;
}
.platform-card:has(.platform-icon.web) { background-image: url('images/plat-web.png?v=3'), linear-gradient(135deg, #e9f8f1 0%, #d6f3e5 100%); }
.platform-card:has(.platform-icon.formations) { background-image: url('images/plat-formations.png?v=3'), linear-gradient(135deg, #eaf2ff 0%, #d9e8ff 100%); }
.platform-card:has(.platform-icon.depannage) { background-image: url('images/plat-depannage.png?v=3'), linear-gradient(135deg, #ffeaef 0%, #ffdbe5 100%); }
.platform-card:has(.platform-icon.shop) { background-image: url('images/plat-shop.png?v=3'), linear-gradient(135deg, #efecff 0%, #e3deff 100%); }
.platform-card:has(.platform-icon.blog) { background-image: url('images/plat-blog.png?v=3'), linear-gradient(135deg, #fff2e7 0%, #ffe6d2 100%); }
.platform-card:has(.platform-icon.forums) { background-image: url('images/plat-forums.png?v=3'), linear-gradient(135deg, #e7f7f5 0%, #d5f1ed 100%); }
.platform-card:has(.platform-icon.apps) { background-image: url('images/plat-apps.png?v=1'), linear-gradient(135deg, #e9ecff 0%, #d7dcff 100%); }
.platform-card:has(.platform-icon.materiel) { background-image: url('images/plat-materiel.png?v=1'), linear-gradient(135deg, #e2f4fb 0%, #c9e9fa 100%); }
.platform-card:has(.platform-icon.logiciel) { background-image: url('images/plat-logiciel.png?v=1'), linear-gradient(135deg, #e6f8ef 0%, #cef0dd 100%); }

/* ===== Nos Partenaires — marquee défilant premium ===== */
.partners { padding: 3.5rem 0 1.5rem; }
.partners-marquee {
    margin-top: 2.5rem; overflow: hidden; padding: 10px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.partners-track {
    display: flex; width: max-content;
    animation: partnersScroll 45s linear infinite;
}
.partners-marquee:hover .partners-track { animation-play-state: paused; }
@keyframes partnersScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.partner-logo {
    flex: 0 0 auto; margin-right: 1.4rem;
    display: inline-flex; align-items: center; justify-content: center;
    width: 172px; height: 96px; padding: 0 1.6rem;
    background: linear-gradient(160deg, #ffffff 0%, #f7f6ff 100%);
    border: 1px solid rgba(122,110,240,.12); border-radius: 20px;
    box-shadow: 0 2px 8px rgba(90,62,166,.06), 0 16px 40px rgba(90,62,166,.12), inset 0 1px 0 rgba(255,255,255,.9);
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.partner-logo img { max-width: 100%; max-height: 32px; width: auto; height: auto; object-fit: contain; display: block; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.partner-logo:hover { transform: translateY(-6px); box-shadow: 0 0 0 2px rgba(124,110,240,.35), 0 26px 52px rgba(124,110,240,.22), inset 0 1px 0 rgba(255,255,255,.9); border-color: transparent; }
.partner-logo:hover img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { .partners-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; } }
@media (max-width: 600px) { .partner-logo { width: 140px; height: 82px; padding: 0 1rem; margin-right: 1rem; } .partner-logo img { max-height: 26px; } }
.platform-card.apple-premium {
    background-image: url('images/plat-apple.png?v=3'), linear-gradient(165deg, #17171a 0%, #29292e 55%, #1c1c1f 100%) !important;
}
/* /ELP-PLATFORM-BOX-ILLUS */

/* ELP-FEATURED-ALIGN : la carte featured s'aligne comme les autres */
.service-card.featured { padding: 2.5rem !important; }
.service-card.featured .service-icon { margin-top: 0 !important; margin-bottom: 1.5rem !important; }

/* ===== ELP-ICON-CHIPS : pastilles argentées façon Apple, icône colorée par service ===== */
.services-grid > .service-card .service-icon {
    background: linear-gradient(160deg, #fdfdff 0%, #d4d4de 100%) !important;
    box-shadow: inset 0 1px 1px rgba(255,255,255,.95), inset 0 -2px 4px rgba(0,0,0,.16), 0 8px 18px rgba(0,0,0,.28);
    border-radius: 16px;
}
.services-grid > .service-card:nth-child(1) .service-icon svg { color: #2563eb !important; stroke: #2563eb; }
.services-grid > .service-card:nth-child(2) .service-icon svg { color: #7c6ef0 !important; stroke: #7c6ef0; }
.services-grid > .service-card:nth-child(4) .service-icon svg { color: #f97316 !important; stroke: #f97316; }
.services-grid > .service-card:nth-child(5) .service-icon svg { color: #ec4899 !important; stroke: #ec4899; }
.services-grid > .service-card:nth-child(6) .service-icon svg { color: #0d9488 !important; stroke: #0d9488; }
/* /ELP-ICON-CHIPS */
/* ===== ELP-ILLUS-SIZE-FIX : les illustrations restent petites en bas (les raccourcis background des règles couleurs réinitialisaient size/position) ===== */
.platforms-grid .platform-card {
    background-repeat: no-repeat !important;
    background-position: center bottom 20px, center !important;
    background-size: auto 130px, cover !important;
}
/* /ELP-ILLUS-SIZE-FIX */
/* ===== ELP-NAV-LANG-SPACE : menu centré en absolu → plus besoin de réserver l'espace à droite ===== */
/* (padding-right retiré : le menu ne dépend plus du flux, il est centré ; la pilule langue reste en fixe à droite) */
/* /ELP-NAV-LANG-SPACE */
/* ===== ELP-REVEAL-LOGIC : cachée avant l'écran -> fondu ; déjà à l'écran -> aucune animation ===== */
.elp-js .services-grid .service-card:not(.fade-in):not(.elp-instant),
.elp-js .platforms-grid .platform-card:not(.fade-in):not(.elp-instant) { opacity: 0; }
.elp-instant, .elp-instant.fade-in { animation: none !important; opacity: 1 !important; }
/* /ELP-REVEAL-LOGIC */
/* ===== ELP-PLAT-HOVER : survol = agrandissement + contour couleur de la plateforme ===== */
.platforms-grid .platform-card {
    transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease, border-color .35s ease;
    will-change: transform;
}
.platforms-grid .platform-card:hover { transform: translateY(-6px) scale(1.03); }
.platform-card:has(.platform-icon.web):hover        { border-color: #10b981 !important; box-shadow: 0 0 0 2px #10b981, 0 24px 48px rgba(16,185,129,.28); }
.platform-card:has(.platform-icon.formations):hover { border-color: #2563eb !important; box-shadow: 0 0 0 2px #2563eb, 0 24px 48px rgba(37,99,235,.28); }
.platform-card:has(.platform-icon.depannage):hover  { border-color: #e11d48 !important; box-shadow: 0 0 0 2px #e11d48, 0 24px 48px rgba(225,29,72,.26); }
.platform-card:has(.platform-icon.shop):hover       { border-color: #6d5efc !important; box-shadow: 0 0 0 2px #6d5efc, 0 24px 48px rgba(109,94,252,.28); }
.platform-card:has(.platform-icon.blog):hover       { border-color: #f97316 !important; box-shadow: 0 0 0 2px #f97316, 0 24px 48px rgba(249,115,22,.28); }
.platform-card:has(.platform-icon.forums):hover     { border-color: #0d9488 !important; box-shadow: 0 0 0 2px #0d9488, 0 24px 48px rgba(13,148,136,.28); }
.platform-card.apple-premium:hover { border-color: rgba(129,140,248,.65) !important; box-shadow: 0 0 0 2px rgba(129,140,248,.75), 0 24px 48px rgba(0,0,0,.5); }
@media (prefers-reduced-motion: reduce) { .platforms-grid .platform-card, .platforms-grid .platform-card:hover { transform: none; transition: none; } }
/* /ELP-PLAT-HOVER */
/* ===== ELP-FIXES-0718 ===== */
/* 1) Plateformes : agrandissement net + ombre prononcée (plus de contour) */
.platforms-grid .platform-card { transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease !important; }
.platforms-grid .platform-card:hover { transform: translateY(-8px) scale(1.055) !important; }
.platform-card:has(.platform-icon.web):hover        { border-color: transparent !important; box-shadow: 0 30px 62px rgba(16,185,129,.45) !important; }
.platform-card:has(.platform-icon.formations):hover { border-color: transparent !important; box-shadow: 0 30px 62px rgba(37,99,235,.45) !important; }
.platform-card:has(.platform-icon.depannage):hover  { border-color: transparent !important; box-shadow: 0 30px 62px rgba(225,29,72,.42) !important; }
.platform-card:has(.platform-icon.shop):hover       { border-color: transparent !important; box-shadow: 0 30px 62px rgba(109,94,252,.45) !important; }
.platform-card:has(.platform-icon.blog):hover       { border-color: transparent !important; box-shadow: 0 30px 62px rgba(249,115,22,.45) !important; }
.platform-card:has(.platform-icon.forums):hover     { border-color: transparent !important; box-shadow: 0 30px 62px rgba(13,148,136,.45) !important; }
.platform-card.apple-premium:hover { border-color: transparent !important; box-shadow: 0 30px 62px rgba(0,0,0,.55) !important; }

/* 2) Services : même agrandissement + ombre prononcée */
.services-grid > .service-card { transition: transform .32s cubic-bezier(.22,1,.36,1), box-shadow .32s ease !important; }
.services-grid > .service-card:hover { transform: translateY(-8px) scale(1.045) !important; }
.services-grid > .service-card:nth-child(1):hover { box-shadow: 0 30px 64px rgba(37,99,235,.5) !important; }
.services-grid > .service-card:nth-child(4):hover { box-shadow: 0 30px 64px rgba(249,115,22,.5) !important; }
.services-grid > .service-card:nth-child(5):hover { box-shadow: 0 30px 64px rgba(236,72,153,.5) !important; }
.services-grid > .service-card:nth-child(6):hover { box-shadow: 0 30px 64px rgba(20,184,166,.5) !important; }
.service-card.featured:hover { box-shadow: 0 30px 64px rgba(124,110,240,.5) !important; }
.service-card.apple-premium:hover { box-shadow: 0 30px 64px rgba(0,0,0,.6) !important; }

/* 3) « En savoir plus » : changement au survol de la carte */
.service-card .service-link { transition: gap .25s ease, transform .25s ease !important; }
.service-card:hover .service-link { gap: .85rem; transform: translateX(4px); }
.service-card:hover .service-link-text { text-decoration: underline; text-underline-offset: 4px; }

/* 4) Carte Apple : « En savoir plus » en blanc */
.apple-premium .service-link-text, .apple-premium:hover .service-link-text,
.apple-premium .service-link, .apple-premium .service-link svg { color: #ffffff !important; }
.apple-premium .service-link-text { font-weight: 700; }

/* 5) Carte Dépannage : ruban « IMMÉDIAT » */



/* 6) Ruban Formation Pro : espace entre l'étoile et POPULAIRE */
.featured-badge::before { content: "★" !important; margin-right: 7px; }

/* 7) Badge « Actif » : scintillement */
.platform-card .platform-status.active { position: relative; overflow: hidden; }
.platform-card .platform-status.active::after {
    content: ""; position: absolute; top: 0; left: -125%; width: 55%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
    transform: skewX(-20deg); animation: elpActifShine 2.8s ease-in-out infinite; pointer-events: none;
}
@keyframes elpActifShine { 0% { left: -125%; } 55% { left: 165%; } 100% { left: 165%; } }
@media (prefers-reduced-motion: reduce) { .platform-card .platform-status.active::after { animation: none; } }

/* 8) Logo footer : nom centré verticalement avec l'avatar */
.footer-section .footer-logo, .footer-logo { display: flex !important; align-items: center !important; gap: .65rem; }
.footer-logo .logo-text { margin: 0 !important; line-height: 1; }
/* /ELP-FIXES-0718 */
/* ===== ELP-SERVICE-RIBBON : ruban IMMÉDIAT sur la carte service Dépannage ===== */
.services-grid > .service-card:nth-child(4) { overflow: hidden; position: relative; }
.services-grid > .service-card:nth-child(4)::before {
  content: "★ IMMÉDIAT" !important; display: block !important;
  position: absolute !important; top: 34px !important; left: auto !important; right: -56px !important;
  width: 214px !important; height: auto !important; text-align: center !important;
  transform: rotate(45deg) !important; transition: none !important;
  background: linear-gradient(120deg, #ef4444 0%, #dc2626 55%, #991b1b 100%) !important;
  color: #fff !important; font-size: .68rem !important; font-weight: 800 !important; letter-spacing: 1px !important; padding: .4rem 0 !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 8px 20px rgba(220,38,38,.5) !important;
  border-top: 1.5px dashed rgba(255,255,255,.6) !important; border-bottom: 1.5px dashed rgba(255,255,255,.6) !important;
  border-radius: 0 !important; z-index: 6 !important; pointer-events: none !important; opacity: 1 !important;
}
/* /ELP-SERVICE-RIBBON */


/* ===== ELP-SELECT-0719 : select Sujet blanc premium + chevron ===== */
.form-group select{
  background-color:#fff !important;
  border:1.5px solid #e6e8ec !important;
  border-radius:14px !important;
  box-shadow:0 6px 18px rgba(30,41,59,.09) !important;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif !important;
  -webkit-appearance:none !important;-moz-appearance:none !important;appearance:none !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236a4cf0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 1rem center !important;
  padding-right:2.75rem !important;
  transition:border-color .2s ease, box-shadow .2s ease !important;
  cursor:pointer;
}
.form-group select:focus{
  border-color:#6a4cf0 !important;
  box-shadow:0 0 0 4px rgba(106,76,240,.14),0 6px 18px rgba(30,41,59,.10) !important;
  outline:none !important;
}
/* /ELP-SELECT-0719 */

/* ===== ELP-FIELDS-WHITE : tous les champs du formulaire au même blanc pur que le select ===== */
.form-group input,
.form-group textarea{
  background-color:#fff !important;
}
/* /ELP-FIELDS-WHITE */

/* ===== ELP-REVEAL-SMOOTH : pas de saut à l'apparition (about/hero-stats étaient visibles PUIS re-cachés par l'anim) ===== */
.elp-js .about-text:not(.fade-in):not(.elp-instant),
.elp-js .about-image:not(.fade-in):not(.elp-instant),
.elp-js .hero-stats:not(.fade-in):not(.elp-instant){ opacity: 0; }
/* /ELP-REVEAL-SMOOTH */

/* ===== ELP-SCROLLPAD : ancres sous le header fixe ===== */
html{ scroll-padding-top: 84px; }
/* Les sections ont déjà 6rem de padding haut : on le neutralise à l'ancrage
   pour éviter le "grand trou" (84px header + 96px padding) au-dessus du titre. */
section[id]{ scroll-margin-top: -6rem; }
/* Le hero n'a pas ce padding : on le laisse s'aligner sous le header. */
.hero[id]{ scroll-margin-top: 0; }
/* /ELP-SCROLLPAD */

/* ===== ELP-CONTACT-CENTER =====
   La section Contact est en 2 colonnes (texte à gauche / formulaire à droite) :
   son en-tête est donc aligné à gauche, contrairement à toutes les autres
   sections dont le .section-header est centré. Dès que le layout retombe sur
   UNE colonne (≤968px), on recentre label + titre + intro pour rester cohérent.
   Les contact-methods restent alignées à gauche (c'est une liste). */
@media (max-width: 968px){
  .contact-info .section-label{
    display:block; width:fit-content;
    margin-left:auto; margin-right:auto;
  }
  .contact-info .section-title{ text-align:center; }
  .contact-info > p{ text-align:center; }
}
/* /ELP-CONTACT-CENTER */

/* ===== ELP-BACKTOTOP : retour en haut (mobile, au-dessus du sélecteur de langue) ===== */
.elp-backtotop{
  display:none;
  position:fixed;
  /* le sélecteur de langue est à bottom:16px et mesure ~36px de haut */
  bottom:64px; right:16px;
  z-index:2147483001;   /* au-dessus du bandeau cookies (2147483000), comme la pilule de langue */
  width:42px; height:42px;
  align-items:center; justify-content:center;
  padding:0;
  border:1px solid rgba(0,0,0,.10);
  border-radius:999px;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px);
  color:#1c1c28;
  box-shadow:0 4px 14px rgba(0,0,0,.12);
  cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .2s, transform .2s, visibility .2s, box-shadow .15s;
}
.elp-backtotop.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.elp-backtotop:active{ box-shadow:0 2px 8px rgba(0,0,0,.16); }
/* Sur TOUS les écrans (12 août 2026) : la flèche était réservée au mobile, mais
   les pages sont longues aussi sur ordinateur. En desktop le sélecteur de langue
   occupe le haut à droite, le bas à droite est donc libre — on y descend la
   flèche, au ras du bord. */
.elp-backtotop{ display:flex; bottom:16px; }
@media (max-width:968px){ .elp-backtotop{ bottom:64px; } }
@media (prefers-color-scheme:dark){
  .elp-backtotop{ background:rgba(30,30,40,.86); color:#f2f2f7; border-color:rgba(255,255,255,.14); }
}
@media (prefers-reduced-motion:reduce){
  .elp-backtotop{ transition:opacity .2s, visibility .2s; transform:none; }
  .elp-backtotop.is-visible{ transform:none; }
}
@media print{ .elp-backtotop{ display:none !important; } }
/* /ELP-BACKTOTOP */

/* ===== ELP-SHIMMER : scintillement léger logo + titre ===== */
.logo-img{ animation: elpLogoTwinkle 4.5s ease-in-out infinite; will-change: filter; }
@keyframes elpLogoTwinkle{
  0%,100%{ filter: drop-shadow(0 1px 2px rgba(0,0,0,.12)) brightness(1); }
  50%{ filter: drop-shadow(0 0 9px rgba(139,123,255,.72)) brightness(1.05); }
}
.logo-text{ position: relative; overflow: hidden; }
.logo-text::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.85) 50%, transparent 62%);
  transform: translateX(-140%);
  animation: elpSheen 5.5s ease-in-out infinite; animation-delay: 1.4s;
}
@keyframes elpSheen{ 0%,62%{ transform: translateX(-140%) } 84%,100%{ transform: translateX(140%) } }
@media (prefers-reduced-motion: reduce){ .logo-img,.logo-text::after{ animation:none!important } }
/* /ELP-SHIMMER */

/* ===== ELP-PLATFORM-DARK : cartes plateformes sombres premium (relief retina) ===== */
/* fond sombre par carte — background shorthand + !important => retire le PNG clair et bat 1633/1685 */
.platform-card:not(.apple-premium):has(.platform-icon.web){ background-image:url('images/plat-web.png?v=3'), linear-gradient(150deg,#06291f 0%,#0b543b 55%,#139163 100%) !important; }
.platform-card:not(.apple-premium):has(.platform-icon.formations){ background-image:url('images/plat-formations.png?v=3'), linear-gradient(150deg,#12213f 0%,#1e3e75 55%,#3060b8 100%) !important; }
.platform-card:not(.apple-premium):has(.platform-icon.depannage){ background-image:url('images/plat-depannage.png?v=3'), linear-gradient(150deg,#351130 0%,#75205c 55%,#c33489 100%) !important; }
.platform-card:not(.apple-premium):has(.platform-icon.shop){ background-image:url('images/plat-shop.png?v=3'), linear-gradient(150deg,#241663 0%,#4a2aa6 55%,#6d3bd6 100%) !important; }
.platform-card:not(.apple-premium):has(.platform-icon.blog){ background-image:url('images/plat-blog.png?v=3'), linear-gradient(150deg,#3a230a 0%,#7a480f 55%,#c47d1a 100%) !important; }
.platform-card:not(.apple-premium):has(.platform-icon.forums){ background-image:url('images/plat-forums.png?v=3'), linear-gradient(150deg,#072a3d 0%,#0c4d68 55%,#1690b8 100%) !important; }
.platform-card:not(.apple-premium):has(.platform-icon.apps){ background-image:url('images/plat-apps.png?v=1'), linear-gradient(150deg,#1a1147 0%,#37277f 55%,#5b6cf0 100%) !important; }
.platform-card:not(.apple-premium):has(.platform-icon.materiel){ background-image:url('images/plat-materiel.png?v=1'), linear-gradient(150deg,#062a38 0%,#0b4d60 55%,#1195b8 100%) !important; }
.platform-card:not(.apple-premium):has(.platform-icon.logiciel){ background-image:url('images/plat-logiciel.png?v=1'), linear-gradient(150deg,#06291f 0%,#0a5238 55%,#12885c 100%) !important; }
/* bordure fine + ombre de relief */
.platform-card:not(.apple-premium).glossy{ border:1px solid rgba(255,255,255,.09) !important; box-shadow:0 18px 44px rgba(20,16,50,.42), 0 6px 18px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.12) !important; }
/* voile brillant discret (sinon le sheen blanc .6 blanchit le haut) */
.platform-card:not(.apple-premium).glossy::before{ height:46% !important; background:linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 100%) !important; }
/* texte clair */
.platform-card:not(.apple-premium):has(.platform-icon) .platform-title{ color:#fff !important; }
.platform-card:not(.apple-premium):has(.platform-icon) .platform-description{ color:rgba(255,255,255,.82) !important; }
/* pastille d'icône en verre dépoli */
.platform-card:not(.apple-premium):has(.platform-icon) .platform-icon{ background:rgba(255,255,255,.12) !important; border:1px solid rgba(255,255,255,.20) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 8px 20px rgba(0,0,0,.35) !important; }
/* icône en accent clair par carte */
.platform-card .platform-icon.web svg{ color:#6ee7b7 !important; stroke:#6ee7b7 !important; }
.platform-card .platform-icon.formations svg{ color:#93c5fd !important; stroke:#93c5fd !important; }
.platform-card .platform-icon.depannage svg{ color:#f9a8d4 !important; stroke:#f9a8d4 !important; }
.platform-card .platform-icon.shop svg{ color:#c4b5fd !important; stroke:#c4b5fd !important; }
.platform-card .platform-icon.blog svg{ color:#fcd34d !important; stroke:#fcd34d !important; }
.platform-card .platform-icon.forums svg{ color:#7dd3fc !important; stroke:#7dd3fc !important; }
.platform-card .platform-icon.apps svg{ color:#a5b4fc !important; stroke:#a5b4fc !important; }
.platform-card .platform-icon.materiel svg{ color:#7dd3fc !important; stroke:#7dd3fc !important; }
.platform-card .platform-icon.logiciel svg{ color:#6ee7b7 !important; stroke:#6ee7b7 !important; }
/* /ELP-PLATFORM-DARK */


/* ===== ELP-NEWS ===== */
.news { padding: 5rem 0; }
.news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 2rem; margin-top: 3rem; }
.news-grid:empty { min-height: 120px; }
.news-card { display: flex; flex-direction: column; text-decoration: none; background: #fff; border: 1px solid rgba(122,110,240,.10); border-radius: 20px; overflow: hidden; box-shadow: 0 4px 12px rgba(30,27,70,.06), 0 18px 44px rgba(30,27,70,.10); transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; }
.news-card:hover { transform: translateY(-6px); box-shadow: 0 0 0 2px rgba(124,110,240,.28), 0 26px 54px rgba(124,110,240,.20); }
.news-img { display: block; width: 100%; aspect-ratio: 16/9; background-size: cover; background-position: center; }
.news-img--ph { background: linear-gradient(140deg, #37246e, #7c3aed); }
.news-body { display: flex; flex-direction: column; gap: .5rem; padding: 1.3rem 1.4rem 1.5rem; }
.news-body time { font-size: .8rem; font-weight: 700; color: #6a4cf0; text-transform: uppercase; letter-spacing: .04em; }
.news-body strong { font-size: 1.12rem; font-weight: 800; color: #1a1440; line-height: 1.35; }
.news-body em { font-style: normal; color: #5b6472; font-size: .93rem; line-height: 1.55; }
.news-read { margin-top: .5rem; font-weight: 700; font-size: .92rem; color: #6a4cf0; }
.news-cta { text-align: center; margin-top: 2.6rem; }
/* /ELP-NEWS */

/* === ELP-NOOVERFLOW : anti débordement horizontal mobile === */
html,body{overflow-x:hidden;max-width:100%;}

/* === ELP-FORM-FIT : formulaire contact responsive (reCAPTCHA 304px) === */
.contact-form{min-width:0;}
@media (max-width:520px){.contact-form{padding:1.75rem 1.4rem;}}
@media (max-width:400px){.contact-form .g-recaptcha{transform:scale(.9);transform-origin:left top;}}

/* === ELP-BTN-CENTER : bouton submit centré === */
.contact-form button[type="submit"]{display:flex;width:fit-content;max-width:100%;margin-left:auto;margin-right:auto;}

/* === ELP-NAV-ICONS : icônes devant les items du menu mobile (30/07/2026) ===
   Technique : pseudo-élément ::before + masque SVG inline (zéro requête réseau).
   POURQUOI PAS une balise <i> dans le HTML : elpisia-lang.js applique
   « el.textContent = v » sur chaque [data-i18n] ; une icône placée à l'intérieur
   du lien serait donc effacée au changement de langue. Un pseudo-élément n'est
   pas un nœud enfant : il survit à la traduction.
   Le masque est peint par currentColor : l'icône suit la couleur du lien
   (violet au survol et sur l'item actif) sans règle supplémentaire.
   Ciblage par [data-i18n] : stable quelle que soit la langue affichée.
   Desktop (>968px) inchangé : le menu y reste en texte seul. */
@media (max-width: 968px) {
    .nav-links .nav-link {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        width: 100%;
        max-width: 15rem;
        padding-left: 1.1rem;
        padding-right: 1.1rem;
    }

    /* Le soulignement animé (::after) est centré sur toute la largeur du bloc :
       hors sujet ici. La pastille de fond de .active suffit sur mobile. */
    .nav-links .nav-link::after {
        display: none;
    }

    .nav-links .nav-link::before {
        content: '';
        flex: 0 0 auto;
        width: 1.15rem;
        height: 1.15rem;
        background-color: currentColor;   /* défaut, surchargé par item ci-dessous */
        opacity: 0.88;
        transition: opacity 0.25s ease;
        -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
        -webkit-mask-position: center;  mask-position: center;
        -webkit-mask-size: contain;     mask-size: contain;
    }

    .nav-links .nav-link:hover::before,
    .nav-links .nav-link.active::before {
        opacity: 1;
    }

    /* Accueil — maison */
    .nav-links .nav-link[data-i18n="nav_home"]::before {
        background-color: var(--primary-color);   /* #6366f1 indigo */
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 10 9-7 9 7v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M9 21v-6h6v6'/%3E%3C/svg%3E");
                mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 10 9-7 9 7v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M9 21v-6h6v6'/%3E%3C/svg%3E");
    }

    /* Services — mallette */
    .nav-links .nav-link[data-i18n="nav_services"]::before {
        background-color: var(--success-color);   /* #10b981 vert (rappel du logo) */
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2'/%3E%3Cpath d='M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2'/%3E%3Cpath d='M2 13h20'/%3E%3C/svg%3E");
                mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2'/%3E%3Cpath d='M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2'/%3E%3Cpath d='M2 13h20'/%3E%3C/svg%3E");
    }

    /* Nos Plateformes — grille */
    .nav-links .nav-link[data-i18n="nav_platforms"]::before {
        background-color: var(--secondary-color);   /* #8b5cf6 violet */
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E");
                mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E");
    }

    /* À Propos — information */
    .nav-links .nav-link[data-i18n="nav_about"]::before {
        background-color: var(--warning-color);   /* #f59e0b ambre */
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 16.5v-5.5'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
                mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 16.5v-5.5'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
    }

    /* Contact — enveloppe */
    .nav-links .nav-link[data-i18n="nav_contact"]::before {
        background-color: var(--accent-color);   /* #ec4899 rose */
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3.5 7.5 8.5 6 8.5-6'/%3E%3C/svg%3E");
                mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3.5 7.5 8.5 6 8.5-6'/%3E%3C/svg%3E");
    }
}

/* ===== ELP-DOCK-FOOTER (04/08/2026) =====
   Sur mobile, la fleche « retour en haut » et la pilule de langue sont fixes
   en bas a droite. En fin de page, elles recouvraient les icones reseaux
   sociaux du footer (derniere icone inatteignable au clic). Le script inline
   mesure le chevauchement reel et pose --elp-dock-lift ; on remonte juste ce
   qu'il faut, sans jamais deviner une valeur fixe qui casserait sur un footer
   plus haut ou plus bas. */
.elp-backtotop.elp-dock.is-visible {
    transform: translateY(calc(-1 * var(--elp-dock-lift, 0px)));
    transition: opacity .2s, transform .25s ease, visibility .2s, box-shadow .15s;
}
.elpisia-lang.elp-dock, .elpl-lang.elp-dock {
    bottom: calc(16px + var(--elp-dock-lift, 0px));
    transition: bottom .25s ease;
}
@media (prefers-reduced-motion: reduce) {
    .elp-backtotop.elp-dock.is-visible { transition: opacity .2s, visibility .2s; }
    .elpisia-lang.elp-dock, .elpl-lang.elp-dock { transition: none; }
}
/* /ELP-DOCK-FOOTER */


/* ===== « Gérer les cookies » dans la barre du pied (20/08/2026) =====
   Le lien était posé en fin de pied, centré et souligné, sur une ligne à lui.
   Il se range désormais à gauche de la barre, discret et sans soulignement,
   pendant que le copyright reprend le centre exact et les réseaux la droite.
   Les trois éléments sont sortis du flux pour que le centrage soit vrai et non
   « au milieu de ce qui reste ». */
.footer-bottom { position: relative; }
.footer-bottom > .elp-cookies {
  /* Volontairement en retrait : c'est un lien de service, pas une invitation.
     On s'arrête à 34 % de blanc — en dessous, sur ce fond, il deviendrait
     illisible pour qui a une vue moyenne, ce qui n'est pas de la discrétion
     mais de la dissimulation. Le survol et le focus le rendent pleinement
     lisible. */
  text-decoration: none !important; color: rgba(255, 255, 255, .34) !important;
  font-size: .78rem !important; letter-spacing: .01em;
  transition: color .2s ease, opacity .2s ease;
}
.footer-bottom > .elp-cookies:hover,
.footer-bottom > .elp-cookies:focus-visible { color: rgba(255, 255, 255, .92) !important; }
@media (min-width: 768px) {
  .footer-bottom > .elp-cookies { position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
  .footer-bottom > .social-links { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
  .footer-bottom > p { flex: 1 1 100%; text-align: center; margin: 0; }
}


/* ===== barre du pied : tout sur la même ligne (20/08/2026) =====
   Le copyright restait dans le flux, sous la marge haute de 2 rem, pendant que
   le lien cookies et les réseaux étaient centrés sur la boîte ENTIÈRE, marge
   comprise : d'où un décalage d'une vingtaine de pixels. On lui donne la même
   boîte de contenu — « padding-top: inherit » reprend la valeur du parent,
   quelle qu'elle devienne — et on l'y centre. */
@media (min-width: 768px) {
  .footer-bottom > .elp-cookies,
  .footer-bottom > .social-links { position: static; transform: none; }
  .footer-bottom { justify-content: space-between; align-items: center; }
  .footer-bottom > p {
    position: absolute; inset: 0; padding-top: inherit; margin: 0;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;   /* le texte ne doit pas voler le clic aux icônes */
  }
  .footer-bottom > p a { pointer-events: auto; }
}


/* ===== pied de page : fond dégradé (20/08/2026) =====
   Le pied était d'un gris ardoise uni, hérité de --text-dark. Il reprend la
   palette indigo/violet du site : un dégradé diagonal, deux halos très diffus
   qui rappellent ceux des sections, et un liseré lumineux en haut.
   « isolation: isolate » enferme le halo dans le pied : sans lui, un z-index
   négatif passerait DERRIÈRE le fond de la page et disparaîtrait. */
.footer {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(160deg, #14112b 0%, #1c1a44 46%, #251b55 100%);
}
.footer::before {
  content: ''; position: absolute; inset: -35% -10% auto -10%; height: 80%;
  background:
    radial-gradient(58% 62% at 18% 0%, rgba(99, 102, 241, .30), transparent 70%),
    radial-gradient(46% 52% at 84% 8%, rgba(139, 92, 246, .24), transparent 72%);
  pointer-events: none; z-index: -1;
}
.footer::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139, 92, 246, .7),
              rgba(99, 102, 241, .7), transparent);
  pointer-events: none;
}
/* le trait de séparation gagne le même dégradé, plus discret */
.footer-bottom {
  border-top: 0;
  background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16), transparent);
  background-size: 100% 1px; background-repeat: no-repeat; background-position: top;
}


/* ===== carte « Assistance » (20/08/2026) =====
   Les cartes de plateformes sont sombres PAR DÉFAUT sur ce site — ce n'est pas
   une variante liée au thème du système. La nouvelle carte suit donc la même
   règle, sans quoi elle serait la seule en clair au milieu des autres.
   La prune est la seule teinte encore libre : vert, bleu, rose, orange,
   violet, cyan et indigo appartiennent déjà aux autres cartes. */
.platform-icon.helpdesk {
  background: linear-gradient(135deg, #c026d3 0%, #a21caf 100%); color: white;
  box-shadow: 0 4px 12px rgba(162, 28, 175, .3);
}
.platform-card:not(.apple-premium):has(.platform-icon.helpdesk) {
  background-image: url('images/plat-helpdesk.png?v=1'),
                    linear-gradient(150deg, #2c0a33 0%, #5c1268 55%, #a21caf 100%) !important;
}
.platform-card .platform-icon.helpdesk svg { color: #f0abfc !important; stroke: #f0abfc !important; }
.platform-card:has(.platform-icon.helpdesk):hover {
  border-color: transparent !important;
  box-shadow: 0 30px 62px rgba(162, 28, 175, .45) !important;
}


/* ===== BANDEAU COMPACT AU DÉFILEMENT (20/08/2026) =====
   Le site pose déjà « .scrolled » sur la barre au-delà de 100 px : la
   réduction ne demande aucun script, seulement ces quelques règles.
   POUR REVENIR EN ARRIÈRE : supprimer ce bloc, rien d'autre n'en dépend.
   La barre de recherche mesure le bas réel du bandeau à chaque défilement,
   elle suit donc la réduction sans réglage. */
.navbar { transition: background .3s ease, box-shadow .3s ease, border-color .3s ease; }
.nav-content { transition: padding .28s cubic-bezier(.2, .8, .2, 1); }
.logo-img { transition: width .28s cubic-bezier(.2, .8, .2, 1),
                        height .28s cubic-bezier(.2, .8, .2, 1), transform .3s ease; }
.logo-text { transition: font-size .28s cubic-bezier(.2, .8, .2, 1); }
.navbar .nav-link { transition: padding .28s cubic-bezier(.2, .8, .2, 1), color .2s ease; }

@media (min-width: 992px) {
  .navbar.scrolled .nav-content { padding: .45rem 0; }
  .navbar.scrolled .logo-img { width: 34px; height: 34px; }
  .navbar.scrolled .logo-text { font-size: 1.32rem; }
  .navbar.scrolled .nav-links .nav-link { padding-top: .42rem; padding-bottom: .42rem; }
  .navbar.scrolled .elp-loupe { width: 34px; height: 34px; }
  .navbar.scrolled .elp-loupe svg { width: 16px; height: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .navbar, .nav-content, .logo-img, .logo-text, .navbar .nav-link { transition: none; }
}


/* ===== ESPACES AUTOUR DU CŒUR (20/08/2026) =====
   En centrant le copyright, ce paragraphe est devenu une boîte flexible : ses
   enfants deviennent des éléments de flux et les espaces du texte qui les
   séparaient DISPARAISSENT — d'où « avec❤️parelpisia.com ». L'écart se pose
   donc explicitement, ce que le texte ne peut plus faire. */
.footer-bottom > p { gap: .34rem; flex-wrap: wrap; }
.footer-bottom > p .ftr-heart { margin: 0 .1rem; }


/* ===== SÉLECTEUR DE LANGUE : NE PAS L'ANCRER EN BAS SUR GRAND ÉCRAN =====
   (21/08/2026) Le script d'ancrage au pied pose « bottom » sur la pastille
   quand la rangée de réseaux sociaux arrive à l'écran. Or au-dessus de 968 px
   la pastille est ancrée en HAUT (top:14px) : une boîte fixe qui porte à la
   fois top et bottom s'étire sur toute la hauteur de la fenêtre, et son menu,
   placé « sous la boîte », tombait hors de l'écran. On neutralise l'ancrage là
   où il n'a pas lieu d'être ; sur mobile, où la pastille est en bas, il reste
   utile pour ne pas recouvrir les icônes du pied. */
@media (min-width: 969px) {
  .elpisia-lang.elp-dock, .elpl-lang.elp-dock {
    top: 14px !important; bottom: auto !important;
  }
}

/* ===== LOUPE À GAUCHE DU MENU sur téléphone (2 sept. 2026) =====
   Sur petit écran la loupe vivait dans le tiroir du menu : il fallait ouvrir
   le menu pour chercher. Le script la déplace dans la rangée, juste à gauche
   du bouton de menu ; elle retourne dans le menu sur grand écran. */
@media (max-width: 968px) {
    .nav-content .elp-loupe { margin-left: auto; margin-right: 12px; flex: 0 0 auto; }
    .nav-content .elp-loupe + .mobile-menu-btn { margin-left: 0; }
}

/* ===== Infolettre aux dimensions de référence (3 sept. 2026) =====
   Mêmes valeurs que web.elpisia.com : rembourrage haut et bas d'un cran plus
   serré, et surtout la zone de message d'état — vide tant qu'on n'a rien
   envoyé — cesse de réserver 1,2 em au-dessus de « désinscription en un clic ».
   Le widget pose ses styles en ligne dans <head>, d'où !important. */
.elp-news { padding-top: 1.1rem !important; padding-bottom: 1.05rem !important; }
.elp-news__t { margin-bottom: .3rem !important; }
.elp-news__s { margin-bottom: .85rem !important; }
.elp-news__m:empty { display: none !important; }
.elp-news__m { margin-top: .5rem !important; min-height: 0 !important; }
.elp-news__l { margin-top: .55rem !important; }

/* ===== Les sept réseaux sur UNE ligne au téléphone (3 sept. 2026) =====
   À 44 px et 0,75 rem d'écart il fallait 356 px pour la rangée : sur un iPhone
   de 390 px, marges déduites, la septième pastille passait à la ligne. On
   réduit la pastille et l'écart, pas l'icône, qui reste au-dessus de la cible
   tactile recommandée. Deux paliers : 40 px, puis 34 px sur les écrans les
   plus étroits. */
/* La rangée « Suivez-nous » du pied porte un style EN LIGNE dans la page
   (<style id="elp-footer-follow">) qui impose « flex-wrap: wrap » et un écart
   de 0,6 rem. À spécificité égale, un style en ligne placé plus bas l'emporte
   sur la feuille : d'où « body » devant le sélecteur, qui le dépasse d'un cran
   sans recourir à !important. */
@media (max-width: 480px) {
  body .footer-follow .social-links,
  .social-links { gap: .45rem; flex-wrap: nowrap; justify-content: center; }
  .social-icon { width: 40px; height: 40px; border-radius: 11px; flex: 0 0 auto; }
  .social-icon svg { width: 20px; height: 20px; }
}
@media (max-width: 380px) {
  /* Le « nowrap » doit être REDIT ici : une règle mobile plus loin remet le
     retour à la ligne, et la septième pastille repassait dessous sur un écran
     de 320 px. */
  body .footer-follow .social-links,
  .social-links { gap: .28rem; flex-wrap: nowrap; justify-content: center; }
  .social-icon { width: 32px; height: 32px; border-radius: 9px; flex: 0 0 auto; }
  .social-icon svg { width: 16px; height: 16px; }
}

/* ===== L'iPad mérite une vraie barre de menu (3 sept. 2026) =====
   Jusqu'ici tout ce qui descendait sous 968 px basculait en tiroir : sur une
   tablette de 768 ou 834 px de large, la barre se réduisait à un logo, une
   loupe et trois traits, alors que les cinq entrées y tiennent largement.
   On rend donc la navigation horizontale de 768 à 968 px, avec des entrées
   plus grandes qu'au bureau — le doigt vise moins bien que la souris. */
@media (min-width: 768px) and (max-width: 968px) {
  .navbar .nav-link { white-space: nowrap; flex: 0 0 auto; }
  .navbar .nav-links {
    position: static; flex-direction: row; background: none; box-shadow: none;
    transform: none; opacity: 1; pointer-events: auto; padding: 0;
    gap: .35rem; z-index: auto;
  }
  /* Les entrées portent un rembourrage large pensé pour un écran de bureau :
     à cinq, elles réclamaient 673 px quand il en restait 550. On resserre le
     rembourrage, pas le texte, qui reste au-dessus de la taille du bureau. */
  /* La taille suit la largeur au lieu d'être fixée : à 768 px l'espagnol, dont
     les entrées sont les plus longues, débordait de 17 px ; à 968 px il restait
     de la place inutilisée. Les bornes tiennent la lisibilité aux deux bouts. */
  .navbar .nav-link { font-size: clamp(.84rem, 1.55vw, 1rem);
                      padding: .5rem clamp(.3rem, .8vw, .7rem) !important; letter-spacing: 0; }
  .navbar .nav-links { gap: .1rem; }
  .navbar .logo-text { font-size: 22px; }
  .navbar .logo img, .navbar .nav-logo img { max-height: 40px; }
  /* Les 2 rem de marge de chaque côté suffisaient à faire déborder la loupe de
     18 px en français, la langue aux entrées les plus longues. La barre gagne
     ces marges ; le reste de la page garde les siennes. */
  .navbar .container { padding-left: 1rem; padding-right: 1rem; }
  .navbar .mobile-menu-btn { display: none !important; }
  /* La loupe reprend sa place à droite des entrées, sans absorber l'espace
     réservé au bouton de menu qui n'existe plus ici. */
  .navbar .elp-loupe { margin-left: .5rem !important; margin-right: 0 !important; }
}

/* Sur iPad en paysage — et sur iPad en portrait, où Safari demande le site en
   version bureau et annonce donc 1024 px — la barre existait déjà, mais elle
   restait à la taille du bureau alors qu'il reste 250 à 400 px de libre. Les
   entrées grandissent, la barre respire, et la cible tactile s'agrandit
   d'autant : c'est un doigt qui vise, pas une souris. */

@media (min-width: 969px) and (max-width: 1400px) {
  /* Une entrée ne se coupe pas en deux : « À Propos » passait à la ligne sur
     son espace et déformait la rangée. Borné à la tablette. */
  .navbar .nav-link { white-space: nowrap; flex: 0 0 auto; }
  .navbar .nav-links { gap: .4rem; }
  .navbar .nav-link { font-size: 1.06rem; padding: .78rem 1.05rem; }
  .navbar .logo-text { font-size: 31px; }
  .navbar .elp-loupe { width: 42px; height: 42px; }
  .navbar .container { padding-top: .35rem; padding-bottom: .35rem; }
}

/* ===== Le menu centré sur le TEXTE, pas sur la capsule (4 sept. 2026) =====
   La loupe vit dans la même capsule que les entrées, à son extrémité droite :
   centrer la capsule décalait le groupe de mots de 24 px vers la gauche.
   UNIQUEMENT sur tablette : le bureau garde son réglage d'origine. */
@media (min-width: 969px) and (max-width: 1400px) {
  .navbar .nav-links { margin-left: 24px; }
}

/* ===== Pastille de langue : fond transparent =====
   Le module commun la peint en blanc opaque, et en NOIR quand la tablette est
   en thème sombre — une pastille noire sur un en-tête clair. Ici elle se fond
   dans l'en-tête : un voile à peine teinté, un filet, et le drapeau parle de
   lui-même. Les deux thèmes sont couverts, l'en-tête restant clair dans les
   deux cas. */
@media (min-width: 768px) and (max-width: 1400px) {
  .elpisia-lang__btn,
  .elpisia-lang.elp-dans-entete .elpisia-lang__btn {
    background: rgba(255, 255, 255, .18) !important;
    border-color: rgba(36, 31, 71, .14) !important;
    color: #241f47 !important;
    box-shadow: 0 2px 10px rgba(36, 31, 71, .08) !important;
  }
  .elpisia-lang__btn:hover { background: rgba(255, 255, 255, .42) !important; }
}
@media (prefers-color-scheme: dark) and (min-width: 768px) and (max-width: 1400px) {
  .elpisia-lang__btn {
    background: rgba(255, 255, 255, .16) !important;
    border-color: rgba(36, 31, 71, .16) !important;
    color: #241f47 !important;
  }
}