/* ============================================
   PROTOCOM - Pages de service dédiées
   Design riche en images
   ============================================ */

/* HERO SERVICE PAGE */
.service-hero {
    position: relative;
    min-height: 70vh;
    padding: 180px 0 100px;
    overflow: hidden;
    color: #fff;
}
.service-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 1;
}
.service-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(30, 37, 51, 0.85) 0%, rgba(30, 37, 51, 0.6) 100%);
}
.service-hero-content {
    position: relative;
    z-index: 2;
    max-width: 760px;
}
.service-hero h1 {
    font-size: clamp(2.4rem, 5vw, 4rem);
    color: #fff;
    line-height: 1.1;
    margin-bottom: 24px;
    font-weight: 800;
}
.service-hero .lead-large {
    font-size: 1.25rem;
    color: rgba(255,255,255,0.92);
    line-height: 1.6;
    margin-bottom: 32px;
}

/* INTRO SECTION (texte + image cote a cote) */
.service-intro {
    padding: 100px 0;
    background: #fff;
}
.service-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}
.service-intro h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    line-height: 1.2;
    margin-bottom: 20px;
}
.service-intro .lead {
    font-size: 1.1rem;
    color: var(--color-gray);
    line-height: 1.75;
    margin-bottom: 22px;
}
.service-intro p {
    color: var(--color-gray);
    line-height: 1.75;
    margin-bottom: 16px;
}
.service-intro-image {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    aspect-ratio: 4/5;
    box-shadow: var(--shadow-xl);
}
.service-intro-image img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.service-intro-image:hover img { transform: scale(1.05); }

.service-intro-image::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0.2;
    pointer-events: none;
}
.intro-cyan::before { background: var(--color-cyan); }
.intro-blue::before { background: var(--color-blue); }
.intro-yellow::before { background: var(--color-yellow); }
.intro-orange::before { background: var(--color-orange); }
.intro-magenta::before { background: var(--color-magenta); }
.intro-coral::before { background: var(--color-coral); }
.intro-purple::before { background: var(--color-purple); }
.intro-pink::before { background: var(--color-pink); }

/* IMAGE PLEINE LARGEUR (parallax-like) */
.service-fullimage {
    position: relative;
    height: 60vh;
    min-height: 420px;
    overflow: hidden;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}
.service-fullimage-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #fff;
    text-align: center;
    padding: 40px 20px;
}
.service-fullimage-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.85;
    z-index: 1;
}
.fi-cyan::before { background: linear-gradient(135deg, var(--color-cyan), var(--color-blue)); }
.fi-blue::before { background: linear-gradient(135deg, var(--color-blue), #1a3f6b); }
.fi-yellow::before { background: linear-gradient(135deg, var(--color-yellow), var(--color-orange)); }
.fi-orange::before { background: linear-gradient(135deg, var(--color-orange), var(--color-coral)); }
.fi-magenta::before { background: linear-gradient(135deg, var(--color-magenta), var(--color-purple)); }
.fi-coral::before { background: linear-gradient(135deg, var(--color-coral), var(--color-pink)); }
.fi-purple::before { background: linear-gradient(135deg, var(--color-purple), var(--color-magenta)); }
.fi-pink::before { background: linear-gradient(135deg, var(--color-pink), var(--color-coral)); }

.service-fullimage-overlay > * { position: relative; z-index: 2; }
.service-fullimage-overlay h3 {
    color: #fff;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    margin-bottom: 16px;
    max-width: 800px;
}
.service-fullimage-overlay p {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.92);
    max-width: 700px;
    line-height: 1.65;
}

/* PROCESS / METHODOLOGIE */
.service-process {
    padding: 100px 0;
    background: var(--color-light);
}
.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 48px;
}
.process-step {
    position: relative;
    background: #fff;
    padding: 36px 28px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    transition: all 0.3s;
    text-align: center;
}
.process-step:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.process-step-number {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px; height: 44px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    box-shadow: var(--shadow-md);
}
.process-step h4 {
    font-size: 1.1rem;
    margin: 16px 0 10px;
}
.process-step p {
    font-size: 14.5px;
    color: var(--color-gray);
    line-height: 1.6;
}
.ps-cyan .process-step-number { background: var(--color-cyan); }
.ps-blue .process-step-number { background: var(--color-blue); }
.ps-yellow .process-step-number { background: var(--color-yellow); color: var(--color-dark); }
.ps-orange .process-step-number { background: var(--color-orange); }
.ps-magenta .process-step-number { background: var(--color-magenta); }
.ps-coral .process-step-number { background: var(--color-coral); }
.ps-purple .process-step-number { background: var(--color-purple); }

/* IMAGE GRID (plusieurs images en mosaïque) */
.service-mosaic {
    padding: 100px 0;
    background: #fff;
}
.mosaic-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 240px 240px;
    gap: 16px;
    margin-top: 48px;
}
.mosaic-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}
.mosaic-item img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.6s;
}
.mosaic-item:hover img { transform: scale(1.08); }
.mosaic-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(30,37,51,0.85) 100%);
}
.mosaic-item-label {
    position: absolute;
    bottom: 18px;
    left: 18px;
    color: #fff;
    font-weight: 600;
    z-index: 2;
    font-size: 15px;
}
.mosaic-item.large { grid-column: span 2; grid-row: span 2; }

/* BENEFITS */
.service-benefits {
    padding: 100px 0;
    background: var(--color-light);
}
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 48px;
}
.benefit-card {
    background: #fff;
    padding: 32px 28px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    transition: all 0.3s;
    position: relative;
}
.benefit-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.benefit-card i {
    width: 56px; height: 56px;
    color: #fff;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 18px;
}
.benefit-card h4 {
    font-size: 1.15rem;
    margin-bottom: 10px;
}
.benefit-card p {
    color: var(--color-gray);
    font-size: 14.5px;
    line-height: 1.65;
}
.bc-cyan i { background: var(--color-cyan); }
.bc-blue i { background: var(--color-blue); }
.bc-yellow i { background: var(--color-yellow); color: var(--color-dark); }
.bc-orange i { background: var(--color-orange); }
.bc-magenta i { background: var(--color-magenta); }
.bc-coral i { background: var(--color-coral); }
.bc-purple i { background: var(--color-purple); }
.bc-pink i { background: var(--color-pink); }

/* CTA SECTION */
.service-cta {
    padding: 90px 0;
    position: relative;
    overflow: hidden;
    background: var(--color-dark);
}
.service-cta-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.25;
}
.service-cta-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
    max-width: 760px;
    margin: 0 auto;
}
.service-cta-content h2 {
    color: #fff;
    font-size: clamp(2rem, 4vw, 2.8rem);
    margin-bottom: 18px;
}
.service-cta-content p {
    color: rgba(255,255,255,0.85);
    font-size: 1.1rem;
    margin-bottom: 32px;
}

/* TESTIMONIAL DEDIE */
.service-testimonial {
    padding: 100px 0;
    background: #fff;
}
.service-testimonial-card {
    max-width: 900px;
    margin: 0 auto;
    background: var(--color-light);
    padding: 48px;
    border-radius: var(--radius-lg);
    text-align: center;
    position: relative;
}
.service-testimonial-card .quote-icon {
    font-size: 2.5rem;
    margin-bottom: 20px;
}
.service-testimonial-card blockquote {
    font-size: 1.3rem;
    line-height: 1.6;
    color: var(--color-dark);
    margin-bottom: 28px;
    font-style: italic;
    font-weight: 500;
}
.service-testimonial-card .testimonial-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}
.service-testimonial-card .testimonial-meta img {
    width: 56px; height: 56px;
    border-radius: 50%;
    object-fit: cover;
}
.service-testimonial-card .testimonial-meta strong {
    display: block;
    color: var(--color-dark);
    font-size: 16px;
}
.service-testimonial-card .testimonial-meta span {
    color: var(--color-gray);
    font-size: 14px;
}

/* RESPONSIVE */
@media (max-width: 968px) {
    .service-intro-grid { grid-template-columns: 1fr; gap: 40px; }
    .service-intro-grid.reverse > div:first-child { order: -1; }
    .process-grid { grid-template-columns: repeat(2, 1fr); }
    .benefits-grid { grid-template-columns: 1fr; }
    .mosaic-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: 220px 220px 220px; }
    .mosaic-item.large { grid-column: span 2; grid-row: span 1; }
    .service-fullimage { background-attachment: scroll; height: 50vh; }
    .service-hero { padding: 140px 0 80px; min-height: auto; }
}
@media (max-width: 600px) {
    .process-grid { grid-template-columns: 1fr; }
    .mosaic-grid { grid-template-columns: 1fr; grid-template-rows: repeat(5, 200px); }
    .mosaic-item.large { grid-column: span 1; }
    .service-testimonial-card { padding: 32px 24px; }
    .service-testimonial-card blockquote { font-size: 1.1rem; }
}

/* LEGAL PAGES */
.legal-section,
.legal-content {
    padding: 80px 0 100px;
    background: #fff;
}
.legal-wrapper {
    max-width: 860px;
    margin: 0 auto;
    line-height: 1.75;
    color: var(--color-dark-2);
}
.legal-wrapper h2 {
    font-size: 1.55rem;
    margin: 40px 0 16px;
    padding-top: 24px;
    border-top: 2px solid var(--color-light);
    color: var(--color-dark);
    font-family: 'Space Grotesk', sans-serif;
}
.legal-wrapper h2:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.legal-wrapper p { margin-bottom: 14px; color: var(--color-gray); }
.legal-wrapper ul { padding-left: 24px; margin-bottom: 18px; }
.legal-wrapper ul li { margin-bottom: 8px; color: var(--color-gray); list-style: disc; }
.legal-wrapper strong { color: var(--color-dark); }
.legal-wrapper a { color: var(--color-cyan); text-decoration: none; }
.legal-wrapper a:hover { text-decoration: underline; }
.legal-update {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--color-border, #e5e7eb);
    color: var(--color-gray);
    font-size: 14px;
}
.legal-content h2 {
    font-size: 1.6rem;
    margin: 40px 0 16px;
    padding-top: 20px;
    border-top: 2px solid var(--color-light);
    color: var(--color-dark);
}
.legal-content h2:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.legal-content h3 {
    font-size: 1.2rem;
    margin: 24px 0 12px;
    color: var(--color-coral);
}
.legal-content p { margin-bottom: 14px; color: var(--color-gray); }
.legal-content ul { padding-left: 24px; margin-bottom: 14px; }
.legal-content ul li { margin-bottom: 8px; color: var(--color-gray); list-style: disc; }
.legal-content strong { color: var(--color-dark); }
.legal-content a { color: var(--color-cyan); }
.legal-content a:hover { text-decoration: underline; }
.legal-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
}
.legal-content th, .legal-content td {
    padding: 12px 14px;
    text-align: left;
    border: 1px solid var(--color-border);
    font-size: 14.5px;
}
.legal-content th {
    background: var(--color-light);
    font-weight: 600;
    color: var(--color-dark);
}
.legal-toc {
    background: var(--color-light);
    padding: 24px 28px;
    border-radius: var(--radius-md);
    margin-bottom: 40px;
    border-left: 4px solid var(--color-coral);
}
.legal-toc h3 {
    margin: 0 0 14px;
    color: var(--color-dark);
    font-size: 1.05rem;
}
.legal-toc ol {
    padding-left: 22px;
    margin: 0;
}
.legal-toc ol li {
    margin-bottom: 6px;
    color: var(--color-gray);
    font-size: 14.5px;
}
.legal-toc ol li a { color: var(--color-coral); font-weight: 500; }