/* ============================================
   PROTOCOM - Inner pages styles
   Palette logo Protocom
   ============================================ */

/* Header solid */
.header-solid {
    background: rgba(255,255,255,0.97) !important;
    border-bottom: 1px solid var(--color-border) !important;
    box-shadow: var(--shadow-sm);
}
/* Header solid sur fond blanc -> version COULEUR du logo */
.header-solid .logo-img {
    content: url('../images/logo-protocom-horizontal.png?v=7');
}
.header-solid .logo-text { display: none !important; }
.header-solid .nav-link { color: var(--color-dark-2); }
.header-solid .nav-link:hover, .header-solid .nav-link.active { color: var(--color-coral); background: rgba(230, 59, 92, 0.08); }
.header-solid .mobile-menu-toggle span { background: var(--color-dark); }

/* PAGE HERO */
.page-hero {
    padding: 160px 0 90px;
    background: var(--color-dark);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.25;
}
.page-hero.bg-services::before { background-image: url('https://images.unsplash.com/photo-1497366216548-37526070297c?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80'); }
.page-hero.bg-contact::before { background-image: url('https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80'); }
.page-hero.bg-logiciels::before { background-image: url('https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80'); }
.page-hero.bg-about::before { background-image: url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80'); }

.page-hero::after {
    content: '';
    position: absolute;
    top: -40%; right: -20%;
    width: 700px; height: 700px;
    background: var(--gradient-logo);
    border-radius: 50%;
    filter: blur(150px);
    opacity: 0.4;
}
.page-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 820px;
    margin: 0 auto;
}
.page-hero h1 {
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    color: #fff;
    line-height: 1.15;
    margin-bottom: 18px;
}
.page-hero p {
    font-size: 1.15rem;
    color: rgba(255,255,255,0.9);
}

/* SERVICE DETAIL */
.service-detail {
    padding: 90px 0;
    background: #fff;
}
.service-detail.alt {
    background: var(--color-light);
}
.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}
.detail-grid.reverse > div:first-child { order: -1; }

.detail-grid h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    margin: 14px 0 18px;
    line-height: 1.2;
}
.lead {
    font-size: 1.1rem;
    color: var(--color-gray);
    line-height: 1.7;
    margin-bottom: 28px;
}

/* Section labels colorés par service */
.label-cyan { background: rgba(54, 175, 233, 0.12) !important; color: var(--color-cyan) !important; }
.label-blue { background: rgba(37, 86, 142, 0.12) !important; color: var(--color-blue) !important; }
.label-yellow { background: rgba(246, 177, 31, 0.15) !important; color: #c8902a !important; }
.label-orange { background: rgba(247, 147, 30, 0.12) !important; color: var(--color-orange) !important; }
.label-magenta { background: rgba(233, 61, 122, 0.12) !important; color: var(--color-magenta) !important; }
.label-coral { background: rgba(230, 59, 92, 0.12) !important; color: var(--color-coral) !important; }
.label-purple { background: rgba(160, 58, 132, 0.12) !important; color: var(--color-purple) !important; }
.label-pink { background: rgba(216, 60, 106, 0.12) !important; color: var(--color-pink) !important; }

.feature-list {
    margin-bottom: 32px;
}
.feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    font-size: 15.5px;
    color: var(--color-dark-2);
}
.feature-list li i {
    flex-shrink: 0;
    width: 24px; height: 24px;
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    margin-top: 3px;
}
.feat-cyan li i { background: var(--color-cyan); }
.feat-blue li i { background: var(--color-blue); }
.feat-yellow li i { background: var(--color-yellow); color: var(--color-dark); }
.feat-orange li i { background: var(--color-orange); }
.feat-magenta li i { background: var(--color-magenta); }
.feat-coral li i { background: var(--color-coral); }
.feat-purple li i { background: var(--color-purple); }
.feat-pink li i { background: var(--color-pink); }

/* Visuel image avec overlay couleur */
.detail-visual {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    aspect-ratio: 4/5;
}
.detail-visual img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.6s;
}
.detail-visual:hover img { transform: scale(1.05); }
.detail-visual::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.45;
    mix-blend-mode: multiply;
}
.detail-visual.v-cyan::after { background: var(--color-cyan); }
.detail-visual.v-blue::after { background: var(--color-blue); }
.detail-visual.v-yellow::after { background: var(--color-yellow); }
.detail-visual.v-orange::after { background: var(--color-orange); }
.detail-visual.v-magenta::after { background: var(--color-magenta); }
.detail-visual.v-coral::after { background: var(--color-coral); }
.detail-visual.v-purple::after { background: var(--color-purple); }
.detail-visual.v-pink::after { background: var(--color-pink); }

.detail-visual-icon {
    position: absolute;
    bottom: 24px;
    left: 24px;
    width: 70px; height: 70px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: #fff;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.3);
    z-index: 2;
}

/* Boutons colorés par service */
.btn-cyan { background: var(--color-cyan); color: #fff; box-shadow: 0 10px 25px rgba(54, 175, 233, 0.35); }
.btn-cyan:hover { background: #2596d1; transform: translateY(-2px); }
.btn-blue { background: var(--color-blue); color: #fff; box-shadow: 0 10px 25px rgba(37, 86, 142, 0.35); }
.btn-blue:hover { background: #1a4373; transform: translateY(-2px); }
.btn-yellow { background: var(--color-yellow); color: var(--color-dark); box-shadow: 0 10px 25px rgba(246, 177, 31, 0.35); }
.btn-yellow:hover { background: #e0a01c; transform: translateY(-2px); }
.btn-orange { background: var(--color-orange); color: #fff; box-shadow: 0 10px 25px rgba(247, 147, 30, 0.35); }
.btn-orange:hover { background: #de8210; transform: translateY(-2px); }
.btn-magenta { background: var(--color-magenta); color: #fff; box-shadow: 0 10px 25px rgba(233, 61, 122, 0.35); }
.btn-magenta:hover { background: #d52f6c; transform: translateY(-2px); }
.btn-coral { background: var(--color-coral); color: #fff; box-shadow: 0 10px 25px rgba(230, 59, 92, 0.35); }
.btn-coral:hover { background: #cc2a4d; transform: translateY(-2px); }
.btn-purple { background: var(--color-purple); color: #fff; box-shadow: 0 10px 25px rgba(160, 58, 132, 0.35); }
.btn-purple:hover { background: #862e6f; transform: translateY(-2px); }
.btn-pink { background: var(--color-pink); color: #fff; box-shadow: 0 10px 25px rgba(216, 60, 106, 0.35); }
.btn-pink:hover { background: #c12c5b; transform: translateY(-2px); }

/* CONTACT PAGE */
.contact-page-section {
    padding: 80px 0 100px;
    background: var(--color-light);
}
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 48px;
}
.contact-info {
    background: var(--color-dark);
    color: #fff;
    padding: 48px;
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
}
.contact-info::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('https://images.unsplash.com/photo-1497366754035-f200968a6e72?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80');
    background-size: cover;
    background-position: center;
    opacity: 0.15;
}
.contact-info::after {
    content: '';
    position: absolute;
    bottom: -40%; right: -30%;
    width: 500px; height: 500px;
    background: var(--gradient-logo);
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.5;
}
.contact-info > * { position: relative; z-index: 2; }
.contact-info h2 { color: #fff; font-size: 1.8rem; margin-bottom: 16px; }
.contact-info p { color: rgba(255,255,255,0.85); margin-bottom: 32px; }
.contact-list { margin-bottom: 32px; }
.contact-list li {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 22px;
}
.contact-list i {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #fff;
    flex-shrink: 0;
}
.contact-list li:nth-child(1) i { background: var(--color-cyan); }
.contact-list li:nth-child(2) i { background: var(--color-orange); }
.contact-list li:nth-child(3) i { background: var(--color-magenta); }
.contact-list li:nth-child(4) i { background: var(--color-yellow); color: var(--color-dark); }
.contact-list strong { display: block; font-size: 14px; color: rgba(255,255,255,0.65); margin-bottom: 4px; font-weight: 500; }
.contact-list span, .contact-list a { color: #fff; font-size: 16px; font-weight: 500; }

.contact-info-social { display: flex; gap: 10px; }
.contact-info-social a {
    width: 40px; height: 40px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.contact-info-social a:hover { background: var(--color-coral); transform: translateY(-3px); }

.contact-form-wrapper {
    background: #fff;
    padding: 48px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border);
}
.contact-form-wrapper h2 { font-size: 1.7rem; margin-bottom: 8px; }
.contact-form-wrapper > p { color: var(--color-gray); margin-bottom: 28px; }

/* LOGICIELS PAGE */
.logiciel-detail {
    padding: 90px 0;
}
.logiciel-detail.alt { background: var(--color-light); }

.logiciel-hero-card {
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    position: relative;
    margin-bottom: 60px;
}
.logiciel-hero-bg {
    position: relative;
    height: 280px;
    overflow: hidden;
}
.logiciel-hero-bg img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.logiciel-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.65;
}
.jet-bg::after { background: linear-gradient(135deg, var(--color-cyan) 0%, var(--color-blue) 100%); }
.glass-bg::after { background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-magenta) 100%); }

.logiciel-hero-body {
    padding: 60px;
    color: #fff;
    position: relative;
}
.logiciel-hero-card.jet .logiciel-hero-body { background: linear-gradient(135deg, var(--color-blue) 0%, #1a3f6b 100%); }
.logiciel-hero-card.glass .logiciel-hero-body { background: linear-gradient(135deg, var(--color-purple) 0%, #6f2858 100%); }
.logiciel-hero-card.remote .logiciel-hero-body { background: linear-gradient(135deg, var(--color-orange) 0%, #b8541a 100%); }
.remote-bg::after { background: linear-gradient(135deg, var(--color-orange) 0%, var(--color-coral) 100%); }

.logiciel-hero-body::before {
    content: '';
    position: absolute;
    top: -40%; right: -20%;
    width: 500px; height: 500px;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
}
.logiciel-hero-body-content { position: relative; z-index: 2; max-width: 700px; }
.logiciel-hero-body .logiciel-logo {
    width: 80px; height: 80px;
    font-size: 2.4rem;
    margin-bottom: 24px;
}
.logiciel-hero-body h2 { color: #fff; font-size: 2.6rem; margin-bottom: 14px; }
.logiciel-hero-body p { font-size: 1.15rem; color: rgba(255,255,255,0.9); margin-bottom: 30px; }
.logiciel-hero-body .btn-primary { background: #fff; color: var(--color-blue); }
.logiciel-hero-card.glass .logiciel-hero-body .btn-primary { color: var(--color-purple); }
.logiciel-hero-card.remote .logiciel-hero-body .btn-primary { color: var(--color-orange); }
.logiciel-hero-body .btn-ghost { background: rgba(255,255,255,0.15); color: #fff; }

.logiciels-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.feature-box {
    background: #fff;
    padding: 28px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}
.feature-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 3px;
}
.feature-box:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.feature-box i {
    width: 48px; height: 48px;
    color: #fff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 16px;
}
.feature-box h4 { font-size: 1.05rem; margin-bottom: 8px; }
.feature-box p { font-size: 14.5px; color: var(--color-gray); }

/* Couleurs alternées pour feature-boxes */
.feature-box.fb-cyan i { background: var(--color-cyan); }
.feature-box.fb-cyan::before { background: var(--color-cyan); }
.feature-box.fb-blue i { background: var(--color-blue); }
.feature-box.fb-blue::before { background: var(--color-blue); }
.feature-box.fb-orange i { background: var(--color-orange); }
.feature-box.fb-orange::before { background: var(--color-orange); }
.feature-box.fb-yellow i { background: var(--color-yellow); color: var(--color-dark); }
.feature-box.fb-yellow::before { background: var(--color-yellow); }
.feature-box.fb-magenta i { background: var(--color-magenta); }
.feature-box.fb-magenta::before { background: var(--color-magenta); }
.feature-box.fb-coral i { background: var(--color-coral); }
.feature-box.fb-coral::before { background: var(--color-coral); }
.feature-box.fb-purple i { background: var(--color-purple); }
.feature-box.fb-purple::before { background: var(--color-purple); }
.feature-box.fb-pink i { background: var(--color-pink); }
.feature-box.fb-pink::before { background: var(--color-pink); }

/* ABOUT PAGE */
.about-section {
    padding: 90px 0;
}
.about-section.alt {
    background: var(--color-light);
}
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}
.about-image-stack {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    position: relative;
}
.about-image-stack > div {
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow-lg);
}
.about-image-stack > div img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.about-image-stack > div:nth-child(2) { margin-top: 40px; }
.about-image-stack > div::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.18;
}
.about-image-stack > div:nth-child(1)::after { background: var(--color-cyan); }
.about-image-stack > div:nth-child(2)::after { background: var(--color-magenta); }

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
}
.value-card {
    background: #fff;
    padding: 36px 28px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    text-align: center;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}
.value-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 3px;
}
.value-card:nth-child(1)::before { background: var(--color-cyan); }
.value-card:nth-child(2)::before { background: var(--color-orange); }
.value-card:nth-child(3)::before { background: var(--color-magenta); }
.value-card:nth-child(4)::before { background: var(--color-blue); }
.value-card:nth-child(5)::before { background: var(--color-coral); }
.value-card:nth-child(6)::before { background: var(--color-purple); }
.value-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.value-card i {
    width: 64px; height: 64px;
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 18px;
}
.value-card:nth-child(1) i { background: var(--color-cyan); }
.value-card:nth-child(2) i { background: var(--color-orange); }
.value-card:nth-child(3) i { background: var(--color-magenta); }
.value-card:nth-child(4) i { background: var(--color-blue); }
.value-card:nth-child(5) i { background: var(--color-coral); }
.value-card:nth-child(6) i { background: var(--color-purple); }
.value-card h4 { font-size: 1.15rem; margin-bottom: 10px; }
.value-card p { font-size: 14.5px; color: var(--color-gray); }

/* RESPONSIVE */
@media (max-width: 968px) {
    .detail-grid, .contact-grid, .about-grid { grid-template-columns: 1fr; gap: 40px; }
    .detail-grid.reverse > div:first-child { order: 0; }
    .logiciels-features-grid, .values-grid { grid-template-columns: 1fr; }
    .contact-info, .contact-form-wrapper { padding: 32px; }
    .logiciel-hero-body { padding: 40px 32px; }
    .page-hero { padding: 130px 0 70px; }
}