/* =====================================================================
   specialite.css — Design system des pages SPECIALITE (iTeam Polytechnique)
   Base extraite de la page Cycle Ingenieur Genie Electrique pour garantir
   une coherence visuelle stricte + composants specifiques aux specialites.
   ===================================================================== */
        /* ========================================
           CYCLE INGENIEUR PAGE - Style Épuré
           Palette: Blanc + Bleu iTeam (#4F92A6)
           Design minimaliste et aéré
           ======================================== */

        /* --- Breadcrumb --- */
        .breadcrumb {
            background: #ffffff;
            padding: 14px 0;
            border-bottom: 1px solid #EDF2F7;
        }
        .breadcrumb-list {
            display: flex;
            align-items: center;
            gap: 0;
            list-style: none;
            padding: 0;
            margin: 0;
            flex-wrap: wrap;
        }
        .breadcrumb-list li {
            font-size: 0.78rem;
            color: #94A3B8;
            display: flex;
            align-items: center;
        }
        .breadcrumb-list li a {
            color: #64748B;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.2s;
        }
        .breadcrumb-list li a:hover {
            color: #4F92A6;
        }
        .breadcrumb-list li:not(:last-child)::after {
            content: '/';
            margin: 0 10px;
            color: #CBD5E1;
            font-size: 0.85rem;
            font-weight: 300;
        }
        .breadcrumb-list li[aria-current="page"] {
            color: #1B2A4A;
            font-weight: 600;
        }
        @media (max-width: 480px) {
            .breadcrumb { padding: 8px 0; }
            .breadcrumb-list li { font-size: 0.7rem; }
            .breadcrumb-list li:not(:last-child)::after { margin: 0 6px; }
        }

        /* --- Hero --- */
        .poly-hero-stats {
            display: flex;
            gap: 48px;
            margin-top: 32px;
            flex-wrap: wrap;
        }
        .poly-hero-stat {
            text-align: center;
        }
        .poly-hero-stat .stat-number {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--white);
            display: block;
            line-height: 1.1;
        }
        .poly-hero-stat .stat-label {
            font-size: 0.68rem;
            font-weight: 500;
            color: #ffffff;
            text-transform: uppercase;
            letter-spacing: 1.5px;
        }

        /* --- Overview Intro --- */
        .pole-overview {
            padding: 80px 0 64px;
            background: #ffffff;
            border-bottom: none;
        }
        .pole-overview-inner {
            max-width: 720px;
            margin: 0 auto;
            text-align: center;
        }
        .pole-overview-inner p {
            font-size: 1.05rem;
            color: #64748B;
            line-height: 1.9;
            margin-top: 20px;
            font-weight: 400;
        }
        .pole-nav {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 40px;
            flex-wrap: wrap;
        }
        .pole-nav-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 11px 22px;
            background: transparent;
            color: #4F92A6;
            border-radius: var(--radius-full);
            font-size: 0.82rem;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.2s ease;
            border: 1px solid #E2E8F0;
        }
        .pole-nav-link:hover {
            background: #4F92A6;
            color: #ffffff;
            border-color: #4F92A6;
        }
        .pole-nav-link svg { width: 16px; height: 16px; }

        /* --- Formation Section --- */
        .formation-section {
            padding: 80px 0;
        }
        .formation-section:nth-child(even) {
            background: #F8FAFC;
        }
        .formation-header {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 12px;
        }
        .formation-icon {
            width: 48px;
            height: 48px;
            background: rgba(79,146,166,0.08);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #4F92A6;
            flex-shrink: 0;
        }
        .formation-icon svg { width: 24px; height: 24px; }
        .formation-header h2 {
            font-size: 1.5rem;
            font-weight: 700;
            color: #1B2A4A;
            text-transform: none;
            letter-spacing: -0.3px;
            line-height: 1.3;
        }
        .formation-badge {
            display: inline-block;
            background: #4F92A6;
            color: #ffffff;
            font-size: 0.65rem;
            font-weight: 600;
            padding: 4px 14px;
            border-radius: var(--radius-full);
            text-transform: uppercase;
            letter-spacing: 1.2px;
            margin-bottom: 10px;
        }
        .formation-meta {
            display: flex;
            gap: 24px;
            flex-wrap: wrap;
            margin: 14px 0 24px;
        }
        .formation-meta-item {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 0.82rem;
            font-weight: 500;
            color: #64748B;
        }
        .formation-meta-item svg {
            width: 15px;
            height: 15px;
            color: #4F92A6;
        }
        .formation-desc {
            font-size: 0.95rem;
            color: #64748B;
            line-height: 1.8;
            max-width: 720px;
            margin-bottom: 32px;
        }
        /* Specialisations section - white text */
        #specialisations {
            background: #1B2A4A !important;
        }
        #specialisations .formation-header h2 {
            color: #ffffff;
        }
        #specialisations .formation-icon {
            background: rgba(255,255,255,0.15);
            color: #ffffff;
        }
        #specialisations .formation-meta-item {
            color: #ffffff;
        }
        #specialisations .formation-meta-item svg {
            color: #ffffff;
        }
        #specialisations .formation-desc {
            color: #ffffff;
        }
        #specialisations .formation-desc strong {
            color: #ffffff;
        }
        .formation-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 32px;
        }
        .formation-block {
            background: #ffffff;
            border-radius: 12px;
            padding: 28px 24px;
            border: 1px solid #EDF2F7;
            box-shadow: none;
        }
        .formation-block:hover {
            border-color: #D0E3EB;
        }
        .formation-section:nth-child(even) .formation-block {
            background: #ffffff;
        }
        .formation-section:nth-child(odd) .formation-block {
            background: #F8FAFC;
        }
        .formation-block h4 {
            font-size: 0.8rem;
            font-weight: 700;
            color: #1B2A4A;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .formation-block h4 svg {
            width: 16px;
            height: 16px;
            color: #4F92A6;
        }
        .formation-block ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .formation-block ul li {
            font-size: 0.85rem;
            color: #64748B;
            padding: 7px 0;
            padding-left: 18px;
            position: relative;
            line-height: 1.6;
        }
        .formation-block ul li::before {
            content: '';
            position: absolute;
            left: 0;
            top: 15px;
            width: 5px;
            height: 5px;
            background: #4F92A6;
            border-radius: 50%;
        }

        /* --- Carriere & Emploi section (#debouches) --- */
        #debouches {
            background: #ffffff !important;
        }
        #debouches .formation-badge {
            background: #1B2A4A;
            color: #ffffff;
        }
        #debouches .formation-header h2,
        #debouches .formation-icon {
            color: #1B2A4A;
        }
        #debouches .formation-desc {
            color: #64748B;
        }
        #debouches .spec-mini-card {
            background: #ffffff !important;
            border: 1px solid #EDF2F7;
        }
        #debouches .spec-mini-card h5 {
            color: #1B2A4A;
        }
        #debouches .spec-mini-card p {
            color: #64748B;
        }
        #debouches .spec-mini-tag {
            color: #4F92A6;
            background: rgba(79,146,166,0.06);
        }

        /* --- Specialties mini-cards --- */
        .spec-mini-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
            margin-bottom: 32px;
        }
        .spec-mini-card {
            background: #ffffff;
            border-radius: 12px;
            padding: 24px 20px;
            border: 1px solid #EDF2F7;
            border-left: 3px solid #4F92A6;
            box-shadow: none;
            transition: border-color 0.2s ease;
        }
        .formation-section:nth-child(odd) .spec-mini-card {
            background: #F8FAFC;
        }
        .spec-mini-card:hover {
            border-color: #B8D4DE;
            border-left-color: #1B2A4A;
        }
        .spec-mini-card h5 {
            font-size: 0.82rem;
            font-weight: 700;
            color: #1B2A4A;
            margin-bottom: 8px;
        }
        .spec-mini-card p {
            font-size: 0.78rem;
            color: #64748B;
            line-height: 1.6;
        }
        .spec-mini-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            margin-top: 12px;
        }
        .spec-mini-tag {
            font-size: 0.63rem;
            font-weight: 600;
            color: #4F92A6;
            background: rgba(79,146,166,0.06);
            padding: 3px 10px;
            border-radius: var(--radius-full);
            letter-spacing: 0.3px;
        }
        a.spec-mini-card-link {
            text-decoration: none;
            color: inherit;
            display: flex;
            flex-direction: column;
            cursor: pointer;
        }
        a.spec-mini-card-link:hover {
            border-left-color: #1B2A4A;
        }
        .spec-mini-link {
            display: inline-block;
            margin-top: 14px;
            font-size: 0.75rem;
            font-weight: 600;
            color: #4F92A6;
            transition: color 0.2s ease;
        }
        a.spec-mini-card-link:hover .spec-mini-link {
            color: #1B2A4A;
        }

        .formation-cta {
            display: flex;
            gap: 14px;
            flex-wrap: wrap;
            align-items: center;
        }

        /* --- Mid CTA --- */
        .mid-cta {
            background: #1B2A4A;
            padding: 72px 0;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        .mid-cta::before { display: none; }
        .mid-cta::after { display: none; }
        .mid-cta h2 {
            font-size: 1.4rem;
            font-weight: 700;
            color: #ffffff;
            text-transform: none;
            letter-spacing: -0.2px;
            margin-bottom: 12px;
            position: relative;
        }
        .mid-cta p {
            font-size: 0.98rem;
            color: #ffffff;
            margin-bottom: 28px;
            max-width: 500px;
            margin-left: auto;
            margin-right: auto;
            position: relative;
            font-weight: 400;
            line-height: 1.7;
        }
        .mid-cta .btn { position: relative; }

        /* --- Stats Bar --- */
        .stats-section {
            background: #1B2A4A;
            padding: 56px 0;
        }
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 32px;
            text-align: center;
        }
        .stat-item .stat-num {
            font-size: 2.2rem;
            font-weight: 700;
            color: #ffffff;
            line-height: 1.1;
            display: inline;
        }
        .stat-item .stat-text {
            font-size: 0.72rem;
            font-weight: 500;
            color: #ffffff;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-top: 8px;
        }

        /* --- Value Bar --- */
        .value-bar {
            background: #F8FAFC;
            padding: 64px 0;
            border-bottom: none;
        }
        .value-bar-inner {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
            text-align: center;
        }
        .value-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 14px;
            padding: 0;
            background: transparent;
            border-radius: 0;
            box-shadow: none;
            border: none;
        }
        .value-item:hover {
            transform: none;
            box-shadow: none;
        }
        .value-icon {
            width: 48px;
            height: 48px;
            background: rgba(79,146,166,0.08);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #4F92A6;
        }
        .value-icon svg { width: 22px; height: 22px; }
        .value-item h4 {
            font-size: 0.78rem;
            font-weight: 700;
            color: #1B2A4A;
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }
        .value-item p {
            font-size: 0.8rem;
            color: #64748B;
            line-height: 1.6;
            max-width: 220px;
        }

        /* --- Timeline Parcours --- */
        .parcours-timeline {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 44px auto 36px;
            max-width: 900px;
            position: relative;
        }

        .parcours-start {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 0;
            position: relative;
            padding-bottom: 24px;
        }
        .parcours-start::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 2px;
            height: 24px;
            background: #D0E3EB;
        }

        .parcours-fork {
            position: relative;
            width: 100%;
            max-width: 520px;
            margin-bottom: 0;
        }
        .parcours-fork::before {
            content: '';
            position: absolute;
            top: 0;
            left: 25%;
            right: 25%;
            height: 2px;
            background: #D0E3EB;
        }
        .parcours-fork-branches {
            display: flex;
            justify-content: center;
            gap: 0;
            width: 100%;
            position: relative;
        }
        .parcours-branch {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex: 1;
            position: relative;
            padding-top: 24px;
            padding-bottom: 24px;
        }
        .parcours-branch::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 2px;
            height: 24px;
            background: #D0E3EB;
        }
        .parcours-branch::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 2px;
            height: 24px;
            background: #4F92A6;
        }
        .parcours-branch-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
        }
        .parcours-branch-label {
            display: inline-block;
            background: #1B2A4A;
            color: #ffffff;
            font-size: 0.58rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            padding: 3px 12px;
            border-radius: 20px;
        }

        .parcours-ou {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: #4F92A6;
            color: #ffffff;
            font-weight: 700;
            font-size: 0.72rem;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 5;
            border: 3px solid #ffffff;
            box-shadow: none;
        }

        .parcours-merge {
            width: 100%;
            max-width: 520px;
            height: 20px;
            position: relative;
            margin-bottom: 0;
        }
        .parcours-merge::before {
            content: '';
            position: absolute;
            top: 0;
            left: 25%;
            right: 25%;
            height: 2px;
            background: #4F92A6;
        }
        .parcours-merge::after {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 2px;
            height: 20px;
            background: #4F92A6;
        }

        .parcours-main {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            gap: 0;
            position: relative;
            width: 100%;
        }
        .parcours-main::before {
            content: '';
            position: absolute;
            top: 28px;
            left: 20%;
            right: 20%;
            height: 2px;
            background: linear-gradient(90deg, #4F92A6, #1B2A4A);
            z-index: 0;
        }

        .parcours-step {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex: 1;
            min-width: 140px;
            max-width: 200px;
            position: relative;
            z-index: 1;
        }
        .parcours-dot {
            width: 52px;
            height: 52px;
            border-radius: 50%;
            background: #1B2A4A;
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.05rem;
            font-weight: 700;
            margin-bottom: 12px;
            border: 3px solid #ffffff;
            box-shadow: 0 1px 8px rgba(27,42,74,0.1);
        }
        .parcours-dot.active {
            background: #4F92A6;
            color: #ffffff;
            box-shadow: 0 1px 8px rgba(79,146,166,0.15);
        }
        .parcours-step h5 {
            font-size: 0.73rem;
            font-weight: 700;
            color: #1B2A4A;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            text-align: center;
            margin-bottom: 4px;
        }
        .parcours-step p {
            font-size: 0.7rem;
            color: #94A3B8;
            text-align: center;
            line-height: 1.4;
        }

        /* --- FAQ --- */
        .faq-list {
            max-width: 720px;
            margin: 28px auto 0;
        }
        .faq-item {
            border: 1px solid #EDF2F7;
            border-radius: 10px;
            margin-bottom: 8px;
            overflow: hidden;
            transition: border-color 0.2s ease;
            background: #ffffff;
        }
        .faq-item[open] {
            border-color: #4F92A6;
            box-shadow: none;
        }
        .faq-question {
            padding: 18px 24px;
            font-size: 0.9rem;
            font-weight: 600;
            color: #1B2A4A;
            cursor: pointer;
            list-style: none;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            transition: background 0.15s;
        }
        .faq-question::-webkit-details-marker { display: none; }
        .faq-question::after {
            content: '+';
            font-size: 1.1rem;
            font-weight: 400;
            color: #4F92A6;
            flex-shrink: 0;
            transition: transform 0.3s;
        }
        .faq-item[open] .faq-question::after {
            content: '‘2';
        }
        .faq-question:hover {
            background: #F8FAFC;
        }
        .faq-answer {
            padding: 0 24px 20px;
        }
        .faq-answer p {
            font-size: 0.88rem;
            color: #64748B;
            line-height: 1.8;
        }
        @media (max-width: 480px) {
            .faq-question { padding: 14px 16px; font-size: 0.82rem; }
            .faq-answer { padding: 0 16px 16px; }
            .faq-answer p { font-size: 0.82rem; }
        }

        /* --- Responsive --- */
        @media (max-width: 1024px) {
            .formation-content { grid-template-columns: 1fr; }
            .spec-mini-grid { grid-template-columns: 1fr 1fr; }
            .parcours-main::before { display: none; }
            .parcours-main { gap: 16px; }
            .parcours-fork { max-width: 400px; }
            .parcours-merge { max-width: 400px; }
        }

        @media (max-width: 768px) {
            .value-bar-inner { grid-template-columns: repeat(2, 1fr); gap: 20px; }
            .formation-header h2 { font-size: 1.25rem; }
            .formation-content { grid-template-columns: 1fr; gap: 16px; }
            .spec-mini-grid { grid-template-columns: 1fr; gap: 12px; }
            .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
            .mid-cta h2 { font-size: 1.2rem; }
            .pole-nav { gap: 8px; }
            .pole-nav-link { padding: 10px 18px; font-size: 0.78rem; }
            .formation-section { padding: 50px 0; }
            .pole-overview { padding: 50px 0 35px; }
            .parcours-fork-branches { flex-direction: column; align-items: center; gap: 0; }
            .parcours-branch { padding-top: 16px; padding-bottom: 16px; width: 100%; }
            .parcours-branch::before, .parcours-branch::after { display: none; }
            .parcours-fork::before { display: none; }
            .parcours-fork { margin-bottom: 12px; }
            .parcours-ou { position: relative; left: auto; top: auto; transform: none; margin: -12px auto; z-index: 5; }
            .parcours-merge { display: none; }
            .parcours-start::after { display: none; }
            .parcours-start { padding-bottom: 12px; }
            .parcours-main { flex-direction: column; align-items: center; gap: 20px; }
            .parcours-main::before { display: none; }
            .parcours-step { max-width: 100%; flex-direction: row; gap: 14px; }
            .parcours-step h5, .parcours-step p { text-align: left; }

            .hero-inner {
                min-height: auto;
                overflow: visible;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .hero-inner .hero-overlay {
                background: linear-gradient(180deg, rgba(27,42,74,0.45) 0%, rgba(27,42,74,0.60) 35%, rgba(27,42,74,0.78) 100%);
            }
            .hero-inner .hero-bg img {
                filter: brightness(0.8) saturate(0.8);
            }
            .hero-inner .hero-content {
                padding: 32px 20px 40px;
                max-width: 100%;
                text-align: center;
                display: flex;
                flex-direction: column;
                align-items: center;
                overflow-wrap: break-word;
                word-wrap: break-word;
            }
            .hero-inner .hero-content h1 {
                font-size: clamp(1.35rem, 5.5vw, 2rem);
                margin-bottom: 12px;
                line-height: 1.2;
                overflow-wrap: break-word;
                word-wrap: break-word;
            }
            .hero-inner .hero-content p {
                font-size: clamp(0.82rem, 3.2vw, 1rem);
                line-height: 1.6;
                margin-bottom: 20px;
                max-width: 100%;
                padding: 0 4px;
                overflow-wrap: break-word;
                word-wrap: break-word;
            }
            .hero-inner .hero-content .hero-badge {
                font-size: clamp(0.6rem, 2.5vw, 0.75rem);
                padding: 6px 16px;
                margin-bottom: 14px;
            }
            .hero-inner .hero-content .btn {
                display: inline-block;
                text-align: center;
                margin: 0 4px 10px;
                padding: 13px 22px;
                font-size: clamp(0.75rem, 3vw, 0.88rem);
                white-space: normal;
                border-radius: 8px;
                min-height: 44px;
                overflow-wrap: break-word;
                word-wrap: break-word;
            }
            .poly-hero-stats {
                gap: 12px;
                justify-content: center;
                margin-top: 24px;
                background: rgba(255,255,255,0.06);
                backdrop-filter: blur(12px);
                -webkit-backdrop-filter: blur(12px);
                border: 1px solid rgba(255,255,255,0.08);
                border-radius: 12px;
                padding: 18px 16px;
                width: 100%;
            }
            .poly-hero-stat { flex: 1; min-width: 0; }
            .poly-hero-stat .stat-number { font-size: clamp(1.2rem, 4.5vw, 1.6rem); overflow-wrap: break-word; }
            .poly-hero-stat .stat-label { font-size: clamp(0.5rem, 2vw, 0.65rem); letter-spacing: 0.5px; }
            .pole-overview-inner { max-width: 100%; }
            .pole-overview-inner p { font-size: 0.95rem; overflow-wrap: break-word; word-wrap: break-word; }
            .formation-desc { max-width: 100%; overflow-wrap: break-word; word-wrap: break-word; }
            .formation-meta { flex-direction: column; gap: 10px; }
            .formation-meta-item { font-size: 0.8rem; overflow-wrap: break-word; word-wrap: break-word; }
            .formation-block { padding: 22px 18px; overflow-wrap: break-word; word-wrap: break-word; }
            .formation-block ul li { font-size: 0.82rem; overflow-wrap: break-word; word-wrap: break-word; }
            .spec-mini-card h5, .spec-mini-card p { overflow-wrap: break-word; word-wrap: break-word; }
            .mid-cta p { max-width: 100%; font-size: 0.9rem; overflow-wrap: break-word; word-wrap: break-word; }
            .value-item p { max-width: 100%; }
            .value-item h4 { overflow-wrap: break-word; word-wrap: break-word; }
            .formation-cta { flex-direction: column; align-items: stretch; }
            .formation-cta .btn { text-align: center; white-space: normal; overflow-wrap: break-word; word-wrap: break-word; }
        }

        @media (max-width: 480px) {
            .value-bar-inner { grid-template-columns: 1fr 1fr; gap: 20px; }
            .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
            .formation-header { flex-direction: column; align-items: flex-start; gap: 12px; }
            .formation-header h2 { font-size: 1.15rem; }
            .formation-meta { gap: 8px; }
            .formation-section { padding: 36px 0; }
            .formation-desc { font-size: 0.85rem; }
            .hero-inner { min-height: 90svh; min-height: 90vh; }
            .hero-inner .hero-content { padding: 24px 14px 32px; }
            .hero-inner .hero-content .btn { display: block; width: 100%; margin: 0 0 10px; padding: 14px 18px; }
            .poly-hero-stats { gap: 8px; padding: 14px 10px; flex-wrap: nowrap; }
            .poly-hero-stat .stat-number { font-size: clamp(1rem, 4vw, 1.3rem); }
            .poly-hero-stat .stat-label { font-size: 0.5rem; }
            .formation-block { padding: 18px 14px; }
            .formation-block h4 { font-size: 0.78rem; }
            .formation-block ul li { font-size: 0.78rem; padding-left: 14px; }
            .spec-mini-grid { grid-template-columns: 1fr; gap: 12px; }
            .spec-mini-card { padding: 16px 14px; }
            .spec-mini-card h5 { font-size: 0.78rem; }
            .spec-mini-card p { font-size: 0.73rem; }
            .spec-mini-tag { font-size: 0.6rem; }
            .pole-nav { flex-direction: column; align-items: stretch; gap: 8px; }
            .pole-nav-link { padding: 10px 14px; font-size: 0.75rem; justify-content: center; }
            .pole-overview { padding: 40px 0 30px; }
            .pole-overview-inner p { font-size: 0.85rem; text-align: left; }
            .value-bar { padding: 30px 0; }
            .value-item p { font-size: 0.72rem; max-width: 100%; }
            .value-item h4 { font-size: 0.72rem; }
            .value-icon { width: 40px; height: 40px; border-radius: 10px; }
            .value-icon svg { width: 18px; height: 18px; }
            .mid-cta { padding: 50px 0; }
            .mid-cta h2 { font-size: 1.1rem; }
            .mid-cta p { font-size: 0.85rem; }
            .stat-item .stat-num { font-size: 1.8rem; }
            .stat-item .stat-text { font-size: 0.7rem; }
            .formation-cta { gap: 10px; }
            .formation-cta .btn { padding: 12px 16px; font-size: 0.8rem; }
            .formation-icon { width: 42px; height: 42px; }
            .formation-icon svg { width: 20px; height: 20px; }
            .parcours-step h5 { font-size: 0.8rem; }
            .parcours-step p { font-size: 0.72rem; }
        }

        /* === Hero text switching === */
        .hero-desc-mobile { display: none; }
        .hero-desc-desktop { display: block; }

        /* === CTA group === */
        .hero-cta-group {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            margin-top: 8px;
        }

        /* === Secondary CTA === */
        .btn-cta-red {
            background: rgba(255,255,255,0.08) !important;
            color: #ffffff !important;
            border: 1.5px solid rgba(255,255,255,0.35) !important;
            border-radius: 8px !important;
            padding: 13px 28px;
            font-weight: 600;
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            text-decoration: none;
            transition: all 0.2s ease;
            display: inline-block;
            min-height: 44px;
            cursor: pointer;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }
        .btn-cta-red:hover {
            background: rgba(255,255,255,0.15) !important;
            border-color: rgba(255,255,255,0.5) !important;
            color: #ffffff !important;
        }
        .btn-whatsapp-hero {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin-top: 14px;
            padding: 13px 28px;
            border-radius: 14px;
            font-family: 'Montserrat', sans-serif;
            font-size: .92rem;
            font-weight: 700;
            color: rgba(255,255,255,.85);
            background: rgba(37,211,102,.08);
            border: 1.5px solid rgba(37,211,102,.35);
            text-decoration: none;
            transition: all .3s cubic-bezier(.4,0,.2,1);
            cursor: pointer;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }
        .btn-whatsapp-hero:hover {
            transform: translateY(-2px);
            border-color: #25D366;
            color: #fff;
            background: rgba(37,211,102,.1);
            box-shadow: 0 4px 16px rgba(37,211,102,.15);
        }
        .btn-whatsapp-hero:active { transform: translateY(0) }
        .btn-whatsapp-hero svg { flex-shrink: 0; color: #25D366; }

        /* === Primary CTA hero === */
        .hero-inner .hero-cta-group .btn-primary {
            background: #4F92A6 !important;
            color: #ffffff !important;
            border: none !important;
            border-radius: 8px !important;
            padding: 13px 28px;
            font-weight: 600;
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            text-shadow: none;
            box-shadow: none;
            transition: all 0.2s ease;
        }
        .hero-inner .hero-cta-group .btn-primary:hover {
            background: #3D7F93 !important;
        }

        /* --- Texte blanc sur fond foncé --- */
        .mid-cta h2,
        .mid-cta p,
        .mid-cta p strong {
            color: #ffffff;
        }
        .stats-section .stat-num,
        .stats-section .stat-text {
            color: #ffffff;
        }
        .cta-section h2,
        .cta-section p,
        .cta-section p strong {
            color: #ffffff !important;
        }
        .alternance-banner h3,
        .alternance-banner p,
        .alternance-content h3,
        .alternance-content p {
            color: #ffffff !important;
        }

        /* === Hero overlay === */
        .hero-inner .hero-overlay {
            background: linear-gradient(180deg, rgba(27,42,74,0.35) 0%, rgba(27,42,74,0.50) 40%, rgba(27,42,74,0.72) 100%);
        }

        .hero-inner .hero-bg img {
            filter: brightness(0.8) saturate(0.8);
            transition: filter 0.3s ease;
        }

        .hero-inner .hero-content {
            position: relative;
            z-index: 2;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        .hero-inner .hero-content h1 {
            color: #ffffff;
            text-shadow: 0 2px 16px rgba(0,0,0,0.3);
            letter-spacing: -0.5px;
            font-weight: 700;
        }
        .hero-inner .hero-content p {
            font-size: clamp(0.92rem, 2.5vw, 1.08rem);
            line-height: 1.8;
            max-width: 600px;
            color: #ffffff;
            text-shadow: none;
            background: rgba(255,255,255,0.06);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 12px;
            padding: 20px 26px;
            box-shadow: none;
            font-weight: 400;
        }
        .hero-inner .hero-content p strong {
            color: #ffffff;
            font-weight: 600;
            text-shadow: none;
            border-bottom: 1px solid rgba(79,146,166,0.6);
            padding-bottom: 1px;
        }

        .hero-inner .hero-badge {
            background: rgba(79,146,166,0.85);
            color: #ffffff;
            text-shadow: none;
            box-shadow: none;
            font-weight: 600;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border: 1px solid rgba(255,255,255,0.1);
        }

        .hero-inner .poly-hero-stats {
            background: rgba(255,255,255,0.06);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 12px;
            padding: 18px 28px;
            box-shadow: none;
        }
        .hero-inner .poly-hero-stat .stat-number {
            text-shadow: none;
            color: #ffffff;
            font-weight: 700;
        }
        .hero-inner .poly-hero-stat .stat-label {
            color: #ffffff;
            text-shadow: none;
        }

        /* === Mobile <= 767px === */
        @media (max-width: 767px) {
            .hero-desc-desktop { display: none !important; }
            .hero-desc-mobile { display: block !important; }
            .hero-inner .hero-overlay {
                background: linear-gradient(180deg, rgba(27,42,74,0.45) 0%, rgba(27,42,74,0.58) 30%, rgba(27,42,74,0.80) 100%) !important;
            }
            .hero-inner .hero-bg img {
                width: 100%; height: 100%; object-fit: cover; object-position: center top;
                filter: brightness(0.8) saturate(0.8) !important;
            }
            .hero-inner .hero-content {
                padding: 28px 16px 36px; text-align: center;
                display: flex; flex-direction: column; align-items: center; justify-content: center;
            }
            .hero-inner .hero-content h1 {
                font-size: clamp(1.4rem, 6vw, 1.8rem) !important;
                color: #ffffff !important;
                text-shadow: 0 2px 16px rgba(0,0,0,0.4) !important;
                line-height: 1.25 !important;
                overflow-wrap: break-word; word-wrap: break-word;
            }
            .hero-inner .hero-content p {
                font-size: clamp(0.82rem, 3.4vw, 0.95rem) !important;
                line-height: 1.65 !important;
                max-width: 100% !important;
                padding: 16px 18px;
                background: rgba(255,255,255,0.06) !important;
                backdrop-filter: blur(12px) !important;
                -webkit-backdrop-filter: blur(12px) !important;
                border: 1px solid rgba(255,255,255,0.08);
                border-radius: 10px;
                margin-bottom: 20px;
                color: #ffffff !important;
                text-shadow: none !important;
                box-shadow: none;
            }
            .hero-inner .hero-content p strong {
                color: #ffffff !important;
                border-bottom: 1px solid rgba(79,146,166,0.5);
                padding-bottom: 1px;
            }
            .hero-inner .poly-hero-stats {
                background: rgba(255,255,255,0.06) !important;
                backdrop-filter: blur(14px) !important;
                -webkit-backdrop-filter: blur(14px) !important;
                border: 1px solid rgba(255,255,255,0.08) !important;
                padding: 16px 20px !important;
                gap: 20px !important;
                justify-content: center !important;
                box-shadow: none;
            }
            .hero-inner .poly-hero-stat .stat-number { font-size: 1.5rem !important; color: #ffffff !important; }
            .hero-inner .poly-hero-stat .stat-label { font-size: 0.6rem !important; color: #ffffff !important; }
            .hero-cta-group {
                flex-direction: column; align-items: stretch; width: 100%; gap: 10px; justify-content: center;
            }
            .hero-cta-group .btn {
                display: block !important; width: 100% !important; text-align: center;
                padding: 14px 20px !important; font-size: clamp(0.8rem, 3.5vw, 0.95rem) !important;
                border-radius: 8px !important; min-height: 48px; white-space: normal; color: #ffffff !important;
            }
            .hero-inner .hero-cta-group .btn-primary {
                background: #4F92A6 !important; border: none !important;
            }
            .btn-cta-red {
                font-size: clamp(0.8rem, 3.5vw, 0.95rem) !important;
                padding: 14px 20px !important; border-radius: 8px !important;
                background: rgba(255,255,255,0.08) !important;
                border: 1.5px solid rgba(255,255,255,0.35) !important;
                color: #ffffff !important;
            }
        }

        @media (max-width: 480px) {
            .hero-inner .hero-overlay {
                background: linear-gradient(180deg, rgba(27,42,74,0.50) 0%, rgba(27,42,74,0.65) 25%, rgba(27,42,74,0.85) 100%) !important;
            }
            .hero-inner .hero-bg img { filter: brightness(0.75) saturate(0.75) !important; }
            .hero-inner .hero-content h1 { font-size: clamp(1.2rem, 5.5vw, 1.5rem) !important; line-height: 1.3 !important; }
            .hero-inner .hero-content p {
                font-size: clamp(0.78rem, 3.2vw, 0.88rem) !important;
                padding: 14px 14px; background: rgba(255,255,255,0.06) !important; line-height: 1.6 !important;
            }
            .hero-cta-group .btn { padding: 13px 16px !important; font-size: 0.82rem !important; }
            .hero-inner .hero-cta-group .btn-primary { background: #4F92A6 !important; }
        }

        /* ========================================
           GENIE ELECTRIQUE - Blocs specifiques
           ======================================== */

        /* Section Competences : fond fonce (texte blanc) */
        #competences {
            background: #1B2A4A !important;
        }
        #competences .formation-header h2,
        #competences .formation-desc { color: #ffffff; }
        #competences .formation-desc strong { color: #ffffff; }
        #competences .formation-icon {
            background: rgba(255,255,255,0.15);
            color: #ffffff;
        }
        #competences .formation-block { background: #ffffff !important; }

        /* --- Plan d'etudes --- */
        #plan-etudes { background: #F8FAFC !important; }
        .plan-grid {
            display: flex;
            flex-direction: column;
            gap: 18px;
        }
        .plan-year {
            background: #ffffff;
            border: 1px solid #EDF2F7;
            border-radius: 16px;
            padding: 0;
            overflow: hidden;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }
        .plan-year:hover { border-color: #D0E3EB; }
        .plan-year > summary {
            list-style: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 22px 24px;
            position: relative;
        }
        .plan-year > summary::-webkit-details-marker { display: none; }
        .plan-year > summary::after {
            content: '';
            position: absolute;
            right: 26px;
            top: 50%;
            width: 9px;
            height: 9px;
            border-right: 2px solid #4F92A6;
            border-bottom: 2px solid #4F92A6;
            transform: translateY(-70%) rotate(45deg);
            transition: transform 0.25s ease;
        }
        .plan-year[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
        .plan-year[open] > summary { border-bottom: 1px solid #EDF2F7; }
        .plan-year-num {
            width: 50px;
            height: 50px;
            flex-shrink: 0;
            border-radius: 14px;
            background: linear-gradient(135deg, #4F92A6 0%, #37728A 100%);
            color: #ffffff;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 1.05rem;
            line-height: 1;
        }
        .plan-year-num small {
            font-size: 0.5rem;
            font-weight: 600;
            letter-spacing: 1px;
            text-transform: uppercase;
            opacity: 0.85;
            margin-top: 2px;
        }
        .plan-year-txt { padding-right: 22px; }
        .plan-year-txt h4 {
            font-size: 0.95rem;
            font-weight: 700;
            color: #1B2A4A;
            margin: 0 0 4px;
            line-height: 1.3;
        }
        .plan-year-txt span {
            font-size: 0.74rem;
            color: #64748B;
            font-weight: 500;
        }
        .plan-year-body {
            padding: 26px 24px 28px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 32px;
        }
        .plan-sem-label {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            font-size: 0.65rem;
            font-weight: 700;
            letter-spacing: 1.3px;
            text-transform: uppercase;
            color: #4F92A6;
            background: rgba(79,146,166,0.08);
            padding: 5px 12px;
            border-radius: var(--radius-full);
            margin-bottom: 14px;
        }
        .plan-mod-list { list-style: none; padding: 0; margin: 0; }
        .plan-mod-list li {
            position: relative;
            padding: 8px 0 8px 20px;
            font-size: 0.83rem;
            line-height: 1.55;
            color: #475569;
            border-bottom: 1px dashed #EDF2F7;
        }
        .plan-mod-list li:last-child { border-bottom: none; }
        .plan-mod-list li::before {
            content: '';
            position: absolute;
            left: 3px;
            top: 16px;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #4F92A6;
        }
        .plan-mod-list li strong { color: #1B2A4A; font-weight: 600; }
        .plan-note {
            margin-top: 22px;
            display: flex;
            align-items: flex-start;
            gap: 12px;
            background: rgba(79,146,166,0.06);
            border-left: 3px solid #4F92A6;
            border-radius: 10px;
            padding: 16px 18px;
            font-size: 0.8rem;
            color: #475569;
            line-height: 1.6;
        }
        .plan-note svg { width: 18px; height: 18px; color: #4F92A6; flex-shrink: 0; margin-top: 1px; }

        /* --- Tableau credits / rythme --- */
        .plan-facts {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 14px;
            margin: 0 0 32px;
        }
        .plan-fact {
            background: #ffffff;
            border: 1px solid #EDF2F7;
            border-radius: 12px;
            padding: 18px 16px;
            text-align: center;
        }
        .plan-fact b {
            display: block;
            font-size: 1.35rem;
            font-weight: 800;
            color: #4F92A6;
            line-height: 1.1;
        }
        .plan-fact span {
            display: block;
            margin-top: 5px;
            font-size: 0.68rem;
            font-weight: 600;
            letter-spacing: 0.8px;
            text-transform: uppercase;
            color: #64748B;
        }

        @media (max-width: 860px) {
            .plan-year-body { grid-template-columns: 1fr; gap: 24px; }
            .plan-facts { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 480px) {
            .plan-year > summary { padding: 18px 16px; gap: 12px; }
            .plan-year > summary::after { right: 18px; }
            .plan-year-body { padding: 20px 16px 24px; }
            .plan-year-txt h4 { font-size: 0.86rem; }
            .plan-mod-list li { font-size: 0.79rem; }
        }
        /* --- Plateaux techniques / laboratoires (GE) --- */
        #laboratoires { background: #F8FAFC !important; }
        .ge-lab-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
            margin-bottom: 32px;
        }
        .ge-lab-card {
            background: #ffffff;
            border: 1px solid #EDF2F7;
            border-radius: 12px;
            padding: 24px 20px;
            transition: border-color 0.2s ease;
        }
        .ge-lab-card:hover { border-color: #B8D4DE; }
        .ge-lab-icon {
            width: 38px;
            height: 38px;
            border-radius: 10px;
            background: rgba(79,146,166,0.10);
            color: #4F92A6;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 14px;
        }
        .ge-lab-icon svg { width: 19px; height: 19px; }
        .ge-lab-card h5 {
            font-size: 0.82rem;
            font-weight: 700;
            color: #1B2A4A;
            margin-bottom: 8px;
        }
        .ge-lab-card p {
            font-size: 0.78rem;
            color: #64748B;
            line-height: 1.6;
            margin: 0;
        }
        @media (max-width: 900px) { .ge-lab-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 600px) { .ge-lab-grid { grid-template-columns: 1fr; } }


/* =====================================================================
   COMPOSANTS SPECIFIQUES AUX PAGES "SPECIALITE"
   ===================================================================== */

/* --- Jeton de couleur par specialite (surcharge via .spec-theme-*) --- */
.spec-page {
    --spec: #4F92A6;
    --spec-dark: #1B2A4A;
    --spec-soft: #EFF6FF;
    --spec-line: #DBEAFE;
}
.spec-theme-embarque   { --spec: #2563EB; --spec-soft: #EFF6FF; --spec-line: #DBEAFE; }
.spec-theme-auto       { --spec: #C2410C; --spec-soft: #FFF7ED; --spec-line: #FED7AA; }
.spec-theme-energie    { --spec: #0F766E; --spec-soft: #ECFDF5; --spec-line: #A7F3D0; }
.spec-theme-meca       { --spec: #7C3AED; --spec-soft: #F5F3FF; --spec-line: #DDD6FE; }

/* --- Bandeau de retour vers la formation parente --- */
.spec-parent-bar {
    background: var(--spec-soft);
    border-bottom: 1px solid var(--spec-line);
    padding: 12px 0;
}
.spec-parent-bar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.spec-parent-bar p {
    margin: 0;
    font-size: 0.88rem;
    color: #334155;
    line-height: 1.5;
}
.spec-parent-bar p strong { color: var(--spec-dark); }
.spec-parent-bar a.spec-parent-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--spec);
    text-decoration: none;
    white-space: nowrap;
    border: 1.5px solid var(--spec);
    border-radius: 999px;
    padding: 7px 16px;
    transition: background .2s ease, color .2s ease;
}
.spec-parent-bar a.spec-parent-link:hover { background: var(--spec); color: #fff; }
.spec-parent-bar a.spec-parent-link svg { width: 14px; height: 14px; flex-shrink: 0; }

/* --- Sous-navigation sticky (ancre de section) --- */
.spec-subnav {
    position: sticky;
    top: 0;
    z-index: 90;
    background: rgba(255,255,255,0.97);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid #E2E8F0;
    box-shadow: 0 2px 12px rgba(15,23,42,0.04);
}
.spec-subnav-inner {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 6px 0;
}
.spec-subnav-inner::-webkit-scrollbar { display: none; }
.spec-subnav a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 0.83rem;
    font-weight: 600;
    color: #475569;
    text-decoration: none;
    border-radius: 10px;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease;
}
.spec-subnav a svg { width: 15px; height: 15px; opacity: .7; }
.spec-subnav a:hover { background: var(--spec-soft); color: var(--spec); }
.spec-subnav a.is-active {
    background: var(--spec);
    color: #fff;
}
.spec-subnav a.is-active svg { opacity: 1; }

/* --- Encadre "En bref" (resume scannable) --- */
.spec-brief {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin: 0 0 34px;
}
.spec-brief-item {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-left: 4px solid var(--spec);
    border-radius: 12px;
    padding: 18px 20px;
}
.spec-brief-item span {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #94A3B8;
    margin-bottom: 6px;
}
.spec-brief-item b {
    display: block;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--spec-dark);
    line-height: 1.35;
}

/* --- Grille metiers / debouches avec salaires --- */
.spec-jobs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}
.spec-job-card {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 24px 22px;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.spec-job-card:hover {
    transform: translateY(-4px);
    border-color: var(--spec);
    box-shadow: 0 12px 30px rgba(15,23,42,0.08);
}
.spec-job-card h5,
.spec-job-card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--spec-dark);
    margin: 0 0 8px;
    line-height: 1.35;
}
.spec-job-card p {
    font-size: 0.88rem;
    color: #64748B;
    line-height: 1.6;
    margin: 0 0 14px;
}
.spec-job-salary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--spec);
    background: var(--spec-soft);
    border-radius: 999px;
    padding: 6px 13px;
}
.spec-job-salary svg { width: 13px; height: 13px; }

/* --- Grille outils / technologies --- */
.spec-tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}
.spec-tool-card {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 20px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.spec-tool-card:hover { border-color: var(--spec); box-shadow: 0 8px 22px rgba(15,23,42,0.06); }
.spec-tool-card h5,
.spec-tool-card h3 {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--spec-dark);
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.spec-tool-card h5 svg,
.spec-tool-card h3 svg { width: 16px; height: 16px; color: var(--spec); flex-shrink: 0; }
.spec-tool-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.spec-tool-card ul li {
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
    background: #F1F5F9;
    border-radius: 6px;
    padding: 5px 10px;
}

/* --- Certifications --- */
.spec-cert-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}
.spec-cert {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 17px 19px;
}
.spec-cert-badge {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--spec-soft);
    color: var(--spec);
    display: flex;
    align-items: center;
    justify-content: center;
}
.spec-cert-badge svg { width: 17px; height: 17px; }
.spec-cert b { display: block; font-size: 0.9rem; color: var(--spec-dark); margin-bottom: 3px; }
.spec-cert span { display: block; font-size: 0.79rem; color: #64748B; line-height: 1.5; }

/* --- Projets fil rouge --- */
.spec-projects {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 18px;
}
.spec-project {
    position: relative;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 26px 22px 22px;
}
.spec-project-year {
    position: absolute;
    top: -12px;
    left: 22px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    background: var(--spec);
    border-radius: 999px;
    padding: 5px 13px;
}
.spec-project h5,
.spec-project h3 { font-size: 0.97rem; font-weight: 700; color: var(--spec-dark); margin: 6px 0 8px; }
.spec-project p { font-size: 0.86rem; color: #64748B; line-height: 1.6; margin: 0; }

/* --- Navigation entre specialites (prev / next / soeurs) --- */
.spec-siblings {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}
.spec-sibling {
    display: block;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 22px;
    text-decoration: none;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.spec-sibling:hover {
    transform: translateY(-4px);
    border-color: var(--spec);
    box-shadow: 0 12px 28px rgba(15,23,42,0.08);
}
.spec-sibling span {
    display: block;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #94A3B8;
    margin-bottom: 7px;
}
.spec-sibling b {
    display: block;
    font-size: 0.97rem;
    font-weight: 700;
    color: var(--spec-dark);
    line-height: 1.4;
    margin-bottom: 9px;
}
.spec-sibling em {
    font-style: normal;
    font-size: 0.83rem;
    font-weight: 700;
    color: var(--spec);
}

/* --- Theme applique aux composants heritees --- */
.spec-page .formation-icon,
.spec-page .plan-year-num { background: var(--spec); }
.spec-page .formation-badge { background: var(--spec-soft); color: var(--spec); }
.spec-page .plan-year[open] > summary { background: var(--spec-soft); }
.spec-page .plan-fact b { color: var(--spec); }
.spec-page .spec-mini-tag { background: var(--spec-soft); color: var(--spec); }

/* --- Impression du plan d'etudes --- */
@media print {
    .spec-subnav, .spec-parent-bar, .header, .top-bar, .footer,
    .hero, .cta-section, .mid-cta, .alternance-banner,
    #form-section, .scroll-to-top { display: none !important; }
    .plan-year-body { display: block !important; }
    .plan-year > summary::after { display: none; }
    .formation-section { padding: 12px 0 !important; break-inside: avoid; }
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .spec-subnav a { padding: 9px 13px; font-size: 0.79rem; }
    .spec-subnav a svg { display: none; }
    .spec-brief { grid-template-columns: 1fr 1fr; gap: 10px; }
    .spec-brief-item { padding: 14px 15px; }
    .spec-brief-item b { font-size: 0.88rem; }
    .spec-parent-bar .container { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
    .spec-brief { grid-template-columns: 1fr; }
    .spec-job-card, .spec-project { padding: 20px 17px; }
}

/* --- Ancrage des sections sous la sous-navigation sticky --- */
html { scroll-behavior: smooth; }
.spec-page main section[id],
.spec-page .spec-subnav + section { scroll-margin-top: 72px; }
@media (max-width: 768px) {
    .spec-page main section[id] { scroll-margin-top: 62px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .spec-sibling:hover, .spec-job-card:hover { transform: none; }
}

/* =========================================================
   MAQUETTE PEDAGOGIQUE  (.mq-*)
   Plan d'etudes officiel : tronc commun S1-S3 + specialite S4-S5 + PFE S6
   Palette : Blanc + Bleu iTeam #4F92A6 + Navy #1B2A4A
   ========================================================= */

.mq-facts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin: 26px 0 30px;
}
.mq-fact {
    background: #ffffff;
    border: 1px solid #EDF2F7;
    border-radius: 14px;
    padding: 18px 14px;
    text-align: center;
    transition: border-color .2s ease, transform .2s ease;
}
.mq-fact:hover { border-color: #D0E3EB; transform: translateY(-2px); }
.mq-fact b {
    display: block;
    font-size: 1.7rem;
    font-weight: 800;
    color: #4F92A6;
    line-height: 1.05;
    letter-spacing: -0.5px;
}
.mq-fact span {
    display: block;
    margin-top: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.mq-lead {
    font-size: 0.95rem;
    line-height: 1.75;
    color: #475569;
    margin: 0 0 24px;
    max-width: 900px;
}
.mq-lead strong { color: #1B2A4A; font-weight: 700; }

/* --- Rail : parcours en 3 temps --- */
.mq-rail {
    display: grid;
    grid-template-columns: 3fr 2fr 1fr;
    gap: 10px;
    margin-bottom: 36px;
}
.mq-rail-seg {
    position: relative;
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    border: 1px solid transparent;
    min-width: 0;
}
.mq-rail-seg::after {
    content: '';
    position: absolute;
    right: -13px;
    top: 50%;
    transform: translateY(-50%);
    width: 0; height: 0;
    border-left: 8px solid #CBD5E1;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    z-index: 2;
}
.mq-rail-seg:last-child::after { display: none; }
.mq-rail-core { background: #F1F7F9; border-color: #D7E8EE; }
.mq-rail-spec { background: linear-gradient(135deg, #4F92A6 0%, #37728A 100%); border-color: #37728A; }
.mq-rail-pfe  { background: #1B2A4A; border-color: #1B2A4A; }
.mq-rail-sems {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    opacity: 0.9;
}
.mq-rail-core .mq-rail-sems { color: #4F92A6; }
.mq-rail-spec .mq-rail-sems,
.mq-rail-pfe  .mq-rail-sems { color: rgba(255,255,255,.82); }
.mq-rail-name {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.3;
}
.mq-rail-core .mq-rail-name { color: #1B2A4A; }
.mq-rail-spec .mq-rail-name,
.mq-rail-pfe  .mq-rail-name { color: #ffffff; }
.mq-rail-ects {
    font-size: 0.72rem;
    font-weight: 600;
}
.mq-rail-core .mq-rail-ects { color: #64748B; }
.mq-rail-spec .mq-rail-ects,
.mq-rail-pfe  .mq-rail-ects { color: rgba(255,255,255,.75); }

/* --- Groupes d'annee --- */
.mq-sems { display: flex; flex-direction: column; gap: 12px; }
.mq-year {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 22px 0 4px;
    padding-bottom: 12px;
    border-bottom: 2px solid #EDF2F7;
}
.mq-year:first-child { margin-top: 0; }
.mq-year-num {
    flex-shrink: 0;
    width: 34px; height: 34px;
    border-radius: 10px;
    background: #1B2A4A;
    color: #ffffff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800;
    font-size: 0.95rem;
}
.mq-year-txt h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: #1B2A4A;
    letter-spacing: -0.2px;
}
.mq-year-txt h3 sup { font-size: 0.6em; }
.mq-year-txt p {
    margin: 2px 0 0;
    font-size: 0.78rem;
    color: #64748B;
    font-weight: 500;
}

/* --- Semestre (accordeon) --- */
.mq-sem {
    background: #ffffff;
    border: 1px solid #EDF2F7;
    border-radius: 16px;
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.mq-sem:hover { border-color: #D0E3EB; }
.mq-sem[open] { box-shadow: 0 6px 26px rgba(27, 42, 74, .07); }
.mq-sem-head {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 52px 18px 20px;
    position: relative;
}
.mq-sem-head::-webkit-details-marker { display: none; }
.mq-sem-head::after {
    content: '';
    position: absolute;
    right: 24px; top: 50%;
    width: 9px; height: 9px;
    border-right: 2px solid #4F92A6;
    border-bottom: 2px solid #4F92A6;
    transform: translateY(-70%) rotate(45deg);
    transition: transform .25s ease;
}
.mq-sem[open] > .mq-sem-head::after { transform: translateY(-30%) rotate(-135deg); }
.mq-sem[open] > .mq-sem-head { border-bottom: 1px solid #EDF2F7; }
.mq-sem-head:focus-visible { outline: 2px solid #4F92A6; outline-offset: -3px; }

.mq-sem-num {
    flex-shrink: 0;
    width: 46px; height: 46px;
    border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: .5px;
    gap: 1px;
}
.mq-sem-num b { font-size: 1.05rem; font-weight: 800; }
.mq-core  .mq-sem-num { background: #F1F7F9; color: #4F92A6; border: 1px solid #D7E8EE; }
.mq-spec  .mq-sem-num { background: linear-gradient(135deg, #4F92A6 0%, #37728A 100%); color: #ffffff; }
.mq-pfe   .mq-sem-num { background: #1B2A4A; color: #ffffff; }

.mq-sem-txt { flex: 1; min-width: 0; }
.mq-sem-title {
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
    color: #1B2A4A;
    line-height: 1.35;
}
.mq-sem-meta {
    display: block;
    margin-top: 3px;
    font-size: 0.74rem;
    color: #94A3B8;
    font-weight: 500;
}
.mq-chip {
    flex-shrink: 0;
    font-size: 0.63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    padding: 5px 11px;
    border-radius: 20px;
    white-space: nowrap;
}
.mq-chip-core { background: #F1F7F9; color: #4F92A6; border: 1px solid #D7E8EE; }
.mq-chip-spec { background: #4F92A6; color: #ffffff; }
.mq-chip-pfe  { background: #1B2A4A; color: #ffffff; }
.mq-sem-ects {
    flex-shrink: 0;
    text-align: center;
    line-height: 1;
}
.mq-sem-ects b { display: block; font-size: 1.15rem; font-weight: 800; color: #1B2A4A; }
.mq-sem-ects small {
    display: block; margin-top: 2px;
    font-size: 0.56rem; font-weight: 700;
    color: #94A3B8; letter-spacing: .8px;
}

/* --- Corps du semestre --- */
.mq-sem-body { padding: 20px; background: #FBFDFE; }
.mq-ue-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.mq-ue {
    background: #ffffff;
    border: 1px solid #EDF2F7;
    border-radius: 13px;
    padding: 15px 16px 8px;
    transition: border-color .2s ease;
}
.mq-ue:hover { border-color: #D0E3EB; }
.mq-ue-head {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    padding-bottom: 11px;
    border-bottom: 1px dashed #EDF2F7;
}
.mq-ue-code {
    font-size: 0.62rem;
    font-weight: 700;
    color: #4F92A6;
    background: #F1F7F9;
    border-radius: 5px;
    padding: 3px 7px;
    letter-spacing: .4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.mq-ue-name {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 0.87rem;
    font-weight: 700;
    color: #1B2A4A;
    line-height: 1.35;
}
.mq-ue-ects {
    font-size: 0.66rem;
    font-weight: 600;
    color: #64748B;
    white-space: nowrap;
}
.mq-ue-ects b { color: #4F92A6; font-size: 0.82rem; font-weight: 800; }

.mq-ecue-list { list-style: none; margin: 0; padding: 0; }
.mq-ecue { padding: 11px 0; border-bottom: 1px solid #F5F8FA; }
.mq-ecue:last-child { border-bottom: none; }
.mq-ecue-top {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.mq-ecue-code {
    font-size: 0.58rem;
    font-weight: 600;
    color: #B6C2CF;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    white-space: nowrap;
}
.mq-ecue-name {
    flex: 1;
    min-width: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: #334155;
    line-height: 1.4;
}
.mq-ecue-ects {
    font-size: 0.72rem;
    font-weight: 700;
    color: #1B2A4A;
    white-space: nowrap;
}
.mq-ecue-ects small {
    font-size: 0.56rem; font-weight: 600;
    color: #94A3B8; letter-spacing: .5px;
}
.mq-ecue-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 7px;
    padding-left: 0;
}
.mq-m {
    font-size: 0.63rem;
    font-weight: 500;
    color: #64748B;
    background: #F8FAFC;
    border: 1px solid #EDF2F7;
    border-radius: 6px;
    padding: 3px 7px;
    white-space: nowrap;
}
.mq-m b { font-weight: 700; color: #475569; }
.mq-m-vh { background: #F1F7F9; border-color: #D7E8EE; color: #4F92A6; }
.mq-m-vh b { color: #4F92A6; }
.mq-m-pj { background: #FFF7ED; border-color: #FED7AA; color: #C2620C; }
.mq-m-pj b { color: #C2620C; }

/* --- Regime d'evaluation --- */
.mq-reg {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: .4px;
    border-radius: 6px;
    padding: 3px 8px;
    white-space: nowrap;
    font-style: normal;
    text-transform: uppercase;
}
.mq-reg-mx { background: #EEF2FF; color: #4338CA; border: 1px solid #DDE3FE; }
.mq-reg-cc { background: #F0FDF4; color: #15803D; border: 1px solid #D5F2DF; }
.mq-reg-p  { background: #FEF2F2; color: #B91C1C; border: 1px solid #FBDADA; }

.mq-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 22px;
    padding: 14px 18px;
    background: #FBFDFE;
    border: 1px solid #EDF2F7;
    border-radius: 12px;
}
.mq-legend-title {
    font-size: 0.68rem;
    font-weight: 700;
    color: #1B2A4A;
    text-transform: uppercase;
    letter-spacing: .8px;
}
.mq-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.74rem;
    color: #64748B;
    font-weight: 500;
}

/* --- Responsive --- */
@media (max-width: 900px) {
    .mq-ue-grid { grid-template-columns: 1fr; }
    .mq-rail { grid-template-columns: 1fr; gap: 8px; }
    .mq-rail-seg::after {
        right: 50%; top: auto; bottom: -11px;
        transform: translateX(50%) rotate(90deg);
    }
}
@media (max-width: 768px) {
    .mq-facts { grid-template-columns: repeat(2, 1fr); }
    .mq-fact b { font-size: 1.45rem; }
    .mq-sem-head { flex-wrap: wrap; gap: 12px; padding: 16px 44px 16px 16px; }
    .mq-sem-txt { flex-basis: calc(100% - 62px); }
    .mq-chip { order: 3; }
    .mq-sem-ects { order: 4; margin-left: auto; text-align: right; }
    .mq-sem-ects b { font-size: 1rem; }
    .mq-sem-body { padding: 14px; }
}
@media (max-width: 480px) {
    .mq-facts { gap: 10px; }
    .mq-fact { padding: 14px 10px; }
    .mq-fact span { font-size: 0.63rem; }
    .mq-sem-num { width: 40px; height: 40px; }
    .mq-sem-title { font-size: 0.85rem; }
    .mq-ue { padding: 13px 13px 6px; }
    .mq-ecue-meta { gap: 4px; }
    .mq-m, .mq-reg { font-size: 0.58rem; padding: 2px 6px; }
}
@media print {
    .mq-sem-body { display: block !important; }
    .mq-sem { break-inside: avoid; box-shadow: none; }
}

/* =====================================================================
   BLOCS SEO / GEO — reponses directes, tableau comparatif, notes
   (ajoutes pour l'optimisation Google + moteurs de reponse IA)
   ===================================================================== */

/* Compatibilite : le hero peut utiliser <picture> pour servir du WebP */
.spec-page .hero-bg picture {
    display: block;
    width: 100%;
    height: 100%;
}

/* Titre de la barre de valeur (H2 introduit pour la hierarchie H1>H2>H3) */
.value-bar-title {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--spec-dark);
    text-align: center;
    margin: 0 0 10px;
    line-height: 1.3;
}
/* Les cartes passent de h4 a h3 : on conserve exactement le meme rendu */
.spec-page .value-item h3 {
    font-size: 0.78rem;
    font-weight: 700;
    color: #1B2A4A;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin: 0;
}
@media (max-width: 768px) {
    .spec-page .value-item h3 { overflow-wrap: break-word; word-wrap: break-word; }
}
@media (max-width: 480px) {
    .spec-page .value-item h3 { font-size: 0.72rem; }
}

/* Phrase "reponse directe" placee en tete de section */
.spec-answer-lead {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #475569;
    margin: 0 0 18px;
    max-width: 900px;
}
.spec-answer-lead strong { color: var(--spec-dark); }
.value-bar .spec-answer-lead { text-align: center; margin: 0 auto 26px; }

/* Encadre de definition / reponse directe */
.spec-answer {
    background: var(--spec-soft);
    border: 1px solid var(--spec-line);
    border-left: 4px solid var(--spec);
    border-radius: 14px;
    padding: 22px 24px;
    margin: 0 0 30px;
}
.spec-answer h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--spec-dark);
    margin: 0 0 10px;
}
.spec-answer > p {
    font-size: 0.95rem;
    line-height: 1.75;
    color: #334155;
    margin: 0 0 14px;
}
.spec-answer a { color: var(--spec); font-weight: 600; text-decoration: none; }
.spec-answer a:hover { text-decoration: underline; }
.spec-answer-facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 8px 22px;
}
.spec-answer-facts li {
    position: relative;
    padding-left: 18px;
    font-size: 0.88rem;
    line-height: 1.6;
    color: #475569;
}
.spec-answer-facts li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--spec);
}
.spec-answer-facts b { color: var(--spec-dark); font-weight: 700; }

/* Tableau comparatif des specialites */
.spec-table-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--spec-dark);
    margin: 38px 0 10px;
    line-height: 1.35;
}
.spec-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    background: #fff;
}
.spec-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-size: 0.86rem;
}
.spec-table caption {
    caption-side: top;
    text-align: left;
    padding: 14px 18px 0;
    font-size: 0.75rem;
    color: #94A3B8;
}
.spec-table th,
.spec-table td {
    padding: 12px 16px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #EDF2F7;
    line-height: 1.55;
}
.spec-table thead th {
    background: var(--spec-soft);
    color: var(--spec-dark);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: .4px;
    border-bottom: 2px solid var(--spec-line);
}
.spec-table thead th:first-child { border-top-left-radius: 13px; }
.spec-table thead th:last-child  { border-top-right-radius: 13px; }
.spec-table tbody th {
    font-weight: 700;
    color: var(--spec-dark);
    white-space: nowrap;
    background: #F8FAFC;
}
.spec-table tbody tr:last-child th,
.spec-table tbody tr:last-child td { border-bottom: none; }
.spec-table a { color: var(--spec); font-weight: 600; text-decoration: none; }
.spec-table a:hover { text-decoration: underline; }

/* Note de source / methodologie / mise a jour */
.spec-note {
    font-size: 0.82rem;
    line-height: 1.7;
    color: #64748B;
    margin: 18px 0 0;
    padding-left: 14px;
    border-left: 3px solid var(--spec-line);
}
.spec-note a { color: var(--spec); font-weight: 600; text-decoration: none; }
.spec-note a:hover { text-decoration: underline; }
.spec-updated { margin-top: 26px; }

@media (max-width: 768px) {
    .value-bar-title { font-size: 1.2rem; }
    .spec-answer { padding: 18px 18px; }
    .spec-answer h3 { font-size: 0.98rem; }
    .spec-table-title { font-size: 1.02rem; }
    .spec-table { min-width: 640px; font-size: 0.8rem; }
    .spec-table th, .spec-table td { padding: 10px 12px; }
}

/* =====================================================================
   COUCHE « CLARTÉ & LISIBILITÉ » — passe UI/UX (09-2026)
   Objectifs : hiérarchie typographique nette, texte confortable à lire,
   une seule couleur d'accent par page, moins de bordures / pastilles /
   ombres / dégradés. Tout est scopé sur .spec-page.
   ===================================================================== */

/* --- 1. Jetons de design ------------------------------------------- */
.spec-page {
    --ink:        #16233F;  /* titres */
    --ink-2:      #43516B;  /* corps de texte (contraste AA+) */
    --ink-3:      #6B7A90;  /* méta, légendes */
    --line:       #E6EAF0;  /* bordure unique */
    --line-2:     #D5DCE7;  /* bordure appuyée */
    --surface:    #FFFFFF;
    --surface-2:  #F7F9FC;  /* fond alterné / zones calmes */
    --r-lg: 16px;
    --r-md: 12px;
    --r-sm: 8px;
    --measure: 68ch;        /* longueur de ligne confortable */
    --sp-section: clamp(56px, 6vw, 88px);
}

/* --- 2. Rythme vertical des sections -------------------------------- */
.spec-page .formation-section { padding: var(--sp-section) 0; }
.spec-page .formation-section:nth-child(even) { background: var(--surface-2); }
.spec-page .value-bar { background: var(--surface-2); padding: var(--sp-section) 0; }
.spec-page #faq { background: var(--surface); border-top: 1px solid var(--line); }

/* --- 3. En-têtes de section ----------------------------------------- */
.spec-page .formation-badge {           /* pastille -> sur-titre discret */
    background: transparent;
    color: var(--spec);
    padding: 0;
    border-radius: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    margin-bottom: 14px;
}
.spec-page .formation-header {
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}
.spec-page .formation-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: var(--spec-soft);
    color: var(--spec);
}
.spec-page .formation-icon svg { width: 21px; height: 21px; }
.spec-page .formation-header h2 {
    font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.5px;
    color: var(--ink);
}
.spec-page .value-bar-title {
    font-size: clamp(1.45rem, 1.1rem + 1.1vw, 1.95rem);
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--ink);
    margin-bottom: 14px;
}
.spec-page .spec-subtitle {              /* ex-titre en style inline */
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 34px 0 16px;
}

/* --- 4. Texte courant ----------------------------------------------- */
.spec-page .spec-answer-lead {
    font-size: 1.06rem;
    line-height: 1.72;
    color: var(--ink-2);
    max-width: var(--measure);
    margin: 0 0 24px;
}
.spec-page .formation-desc {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--ink-2);
    max-width: var(--measure);
    margin-bottom: 36px;
}
.spec-page .value-bar .spec-answer-lead { margin: 0 auto 34px; }
.spec-page .spec-note {
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--ink-3);
    border-left: 2px solid var(--line-2);
    padding-left: 16px;
    margin-top: 24px;
    max-width: var(--measure);
}
.spec-page .form-intro { font-size: 1rem; line-height: 1.75; color: var(--ink-2); margin-bottom: 30px; }

/* --- 5. Bandeau parent & sous-navigation ---------------------------- */
.spec-page .spec-parent-bar {
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
    padding: 14px 0;
}
.spec-page .spec-parent-bar p { font-size: 0.92rem; color: var(--ink-2); }
.spec-page .spec-parent-bar a.spec-parent-link {
    border: 0;
    padding: 0;
    font-size: 0.9rem;
    font-weight: 600;
}
.spec-page .spec-parent-bar a.spec-parent-link:hover {
    background: transparent;
    color: var(--spec);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.spec-page .spec-subnav { box-shadow: none; border-bottom: 1px solid var(--line); }
.spec-page .spec-subnav-inner { gap: 2px; padding: 4px 0; }
.spec-page .spec-subnav a svg { display: none; }   /* moins de bruit, plus de place */
.spec-page .spec-subnav a {
    padding: 15px 14px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--ink-2);
    border-radius: 0;
    box-shadow: inset 0 -2px 0 transparent;
}
.spec-page .spec-subnav a:hover { background: transparent; color: var(--spec); }
.spec-page .spec-subnav a.is-active {
    background: transparent;
    color: var(--spec);
    font-weight: 700;
    box-shadow: inset 0 -2px 0 var(--spec);
}
.spec-page main section[id] { scroll-margin-top: 84px; }

/* --- 6. Hero --------------------------------------------------------- */
.spec-page .hero-content p strong { color: #ffffff; }
.spec-page .poly-hero-stats { gap: 40px; margin-top: 36px; }
.spec-page .poly-hero-stat { text-align: left; }
.spec-page .poly-hero-stat .stat-number { font-size: 1.7rem; font-weight: 700; }
.spec-page .poly-hero-stat .stat-label {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.82);
}

/* --- 7. Bloc « Pourquoi » (value bar) -------------------------------- */
.spec-page .value-bar-inner { gap: 32px; }
.spec-page .value-icon { background: var(--spec-soft); color: var(--spec); }
.spec-page .value-item h3,
.spec-page .value-item h4 {
    font-size: 1.02rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: -0.2px;
    line-height: 1.35;
    color: var(--ink);
}
.spec-page .value-item p {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--ink-2);
    max-width: 300px;
}

/* --- 8. Encadré de définition & listes ------------------------------- */
.spec-page .spec-answer {
    background: var(--spec-soft);
    border: 1px solid var(--spec-line);
    border-left: 1px solid var(--spec-line);
    border-radius: var(--r-lg);
    padding: 28px 30px;
    margin-bottom: 36px;
}
.spec-page .spec-answer h3 { font-size: 1.15rem; font-weight: 700; color: var(--ink); margin-bottom: 12px; }
.spec-page .spec-answer > p { font-size: 1rem; line-height: 1.78; color: var(--ink-2); }
.spec-page .spec-answer-facts { gap: 12px 28px; }
.spec-page .spec-answer-facts li { font-size: 0.95rem; line-height: 1.65; color: var(--ink-2); padding-left: 20px; }
.spec-page .spec-answer-facts li::before { width: 6px; height: 6px; top: 0.62em; }

/* --- 9. « L'essentiel » ---------------------------------------------- */
.spec-page .spec-brief { gap: 12px; }
.spec-page .spec-brief-item {
    border: 1px solid var(--line);
    border-left: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 18px 20px;
}
.spec-page .spec-brief-item span {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    color: var(--spec);
    margin-bottom: 8px;
}
.spec-page .spec-brief-item b { font-size: 1rem; line-height: 1.4; color: var(--ink); }

/* --- 10. Cartes : une seule grammaire visuelle ------------------------ */
.spec-page .spec-job-card,
.spec-page .spec-tool-card,
.spec-page .spec-cert,
.spec-page .spec-project,
.spec-page .spec-sibling,
.spec-page .spec-mini-card,
.spec-page .ge-lab-card,
.spec-page .formation-block,
.spec-page .mq-fact {
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: none;
    transition: border-color .2s ease;
}
.spec-page .spec-job-card:hover,
.spec-page .spec-tool-card:hover,
.spec-page .spec-sibling:hover,
.spec-page .spec-mini-card:hover,
.spec-page .ge-lab-card:hover,
.spec-page .formation-block:hover,
.spec-page .mq-fact:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--spec);
}
.spec-page .formation-section:nth-child(even) .spec-job-card,
.spec-page .formation-section:nth-child(even) .spec-tool-card,
.spec-page .formation-section:nth-child(even) .spec-cert,
.spec-page .formation-section:nth-child(even) .spec-project,
.spec-page .formation-section:nth-child(even) .spec-sibling,
.spec-page .formation-section:nth-child(even) .formation-block,
.spec-page .formation-section:nth-child(even) .mq-fact { background: var(--surface); }

.spec-page .spec-job-card { padding: 26px 24px; }
.spec-page .spec-job-card h5,
.spec-page .spec-job-card h3 { font-size: 1.05rem; color: var(--ink); margin-bottom: 10px; }
.spec-page .spec-job-card p { font-size: 0.95rem; line-height: 1.65; color: var(--ink-2); margin-bottom: 16px; }
.spec-page .spec-job-salary { font-size: 0.82rem; padding: 7px 14px; }

.spec-page .spec-tool-card { padding: 22px; }
.spec-page .spec-tool-card h5,
.spec-page .spec-tool-card h3 { font-size: 1rem; color: var(--ink); margin-bottom: 14px; }
.spec-page .spec-tool-card ul { gap: 8px; }
.spec-page .spec-tool-card ul li {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--ink-2);
    background: var(--surface-2);
    border-radius: var(--r-sm);
    padding: 6px 11px;
}

.spec-page .spec-cert { padding: 20px; gap: 14px; }
.spec-page .spec-cert b { font-size: 1rem; color: var(--ink); margin-bottom: 5px; }
.spec-page .spec-cert span { font-size: 0.9rem; line-height: 1.6; color: var(--ink-2); }

.spec-page .spec-project { padding: 28px 24px 24px; }
.spec-page .spec-project-year {
    background: var(--spec-soft);
    color: var(--spec);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    padding: 6px 12px;
}
.spec-page .spec-project h5,
.spec-page .spec-project h3 { font-size: 1.05rem; color: var(--ink); margin: 8px 0 10px; }
.spec-page .spec-project p { font-size: 0.95rem; line-height: 1.65; color: var(--ink-2); }

.spec-page .spec-sibling { padding: 24px; }
.spec-page .spec-sibling span { font-size: 0.72rem; letter-spacing: 0.1em; color: var(--ink-3); }
.spec-page .spec-sibling b { font-size: 1.05rem; color: var(--ink); }
.spec-page .spec-sibling em { font-size: 0.9rem; }

.spec-page .formation-block { padding: 28px 26px; }
.spec-page .formation-block h4 {
    font-size: 1rem;
    text-transform: none;
    letter-spacing: -0.2px;
    color: var(--ink);
    margin-bottom: 18px;
}
.spec-page .formation-block ul li {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--ink-2);
    padding: 8px 0 8px 20px;
}
.spec-page .formation-block ul li::before { top: 1.05em; width: 6px; height: 6px; }

/* --- 11. Tableau comparatif ------------------------------------------ */
.spec-page .spec-table-wrap { border: 1px solid var(--line); border-radius: var(--r-md); }
.spec-page .spec-table { font-size: 0.95rem; }
.spec-page .spec-table th,
.spec-page .spec-table td { padding: 15px 18px; border-bottom: 1px solid var(--line); color: var(--ink-2); line-height: 1.6; }
.spec-page .spec-table thead th {
    background: var(--surface-2);
    color: var(--ink);
    font-size: 0.76rem;
    letter-spacing: 0.1em;
    border-bottom: 1px solid var(--line-2);
}
.spec-page .spec-table tbody th { background: transparent; color: var(--ink); }
.spec-page .spec-table-title {
    font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
    font-weight: 700;
    color: var(--ink);
    margin: 48px 0 12px;
}

/* --- 12. Plan d'études : une seule couleur, moins de pastilles -------- */
.spec-page .mq-facts { gap: 14px; }
.spec-page .mq-fact { padding: 22px 18px; }
.spec-page .mq-fact b { font-size: 1.9rem; color: var(--ink); }
.spec-page .mq-fact span { font-size: 0.78rem; letter-spacing: 0.08em; color: var(--ink-3); }
.spec-page .mq-lead { font-size: 1rem; line-height: 1.75; color: var(--ink-2); max-width: var(--measure); }
.spec-page .mq-lead strong { color: var(--ink); }

.spec-page .mq-rail-seg { border-radius: var(--r-md); }
.spec-page .mq-rail-core { background: var(--spec-soft); border-color: var(--spec-line); }
.spec-page .mq-rail-spec { background: var(--spec); border-color: var(--spec); }
.spec-page .mq-rail-pfe  { background: var(--ink); border-color: var(--ink); }
.spec-page .mq-rail-core .mq-rail-sems { color: var(--spec); }
.spec-page .mq-rail-core .mq-rail-name { color: var(--ink); }
.spec-page .mq-rail-name { font-size: 0.98rem; }
.spec-page .mq-rail-sems,
.spec-page .mq-rail-ects { font-size: 0.78rem; letter-spacing: 0.06em; }

.spec-page .mq-year { margin-top: 40px; }
.spec-page .mq-year-num { background: var(--spec-soft); color: var(--spec); }
.spec-page .mq-year-txt h3 { font-size: 1.1rem; color: var(--ink); }
.spec-page .mq-year-txt p { font-size: 0.88rem; color: var(--ink-3); }

.spec-page .mq-sem { border: 1px solid var(--line); border-radius: var(--r-md); }
.spec-page .mq-sem:hover { border-color: var(--line-2); }
.spec-page .mq-sem[open] { box-shadow: none; border-color: var(--line-2); }
.spec-page .mq-sem[open] > .mq-sem-head { border-bottom: 1px solid var(--line); }
.spec-page .mq-sem-head { padding: 18px 46px 18px 18px; gap: 16px; }
.spec-page .mq-sem-title { font-size: 1.02rem; color: var(--ink); }
.spec-page .mq-sem-meta { font-size: 0.84rem; color: var(--ink-3); }
.spec-page .mq-core .mq-sem-num { background: var(--spec-soft); color: var(--spec); border-color: var(--spec-line); }
.spec-page .mq-spec .mq-sem-num { background: var(--spec); color: #fff; border-color: var(--spec); }
.spec-page .mq-pfe  .mq-sem-num { background: var(--ink); color: #fff; border-color: var(--ink); }
.spec-page .mq-chip { font-size: 0.7rem; letter-spacing: 0.08em; }
.spec-page .mq-chip-core { background: var(--spec-soft); color: var(--spec); border-color: var(--spec-line); }
.spec-page .mq-chip-spec { background: var(--spec); color: #fff; }
.spec-page .mq-chip-pfe  { background: var(--ink); color: #fff; }
.spec-page .mq-sem-ects b { color: var(--ink); font-size: 1.2rem; }
.spec-page .mq-sem-ects small { font-size: 0.62rem; letter-spacing: 0.08em; }

.spec-page .mq-sem-body { background: var(--surface-2); padding: 22px; }
.spec-page .mq-ue-grid { gap: 14px; }
.spec-page .mq-ue { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.spec-page .mq-ue:hover { border-color: var(--line-2); }
.spec-page .mq-ue-head { border-bottom: 1px solid var(--line); }
.spec-page .mq-ue-code { font-size: 0.68rem; color: var(--ink-3); background: transparent; }
.spec-page .mq-ue-name { font-size: 0.98rem; font-weight: 700; color: var(--ink); }
.spec-page .mq-ue-ects b { color: var(--spec); font-size: 0.86rem; }
.spec-page .mq-ecue { padding: 14px 0; border-bottom: 1px solid var(--line); }
.spec-page .mq-ecue:last-child { border-bottom: none; }
.spec-page .mq-ecue-code { font-size: 0.68rem; color: #A9B4C4; }
.spec-page .mq-ecue-name { font-size: 0.95rem; font-weight: 500; color: var(--ink); line-height: 1.5; }
.spec-page .mq-ecue-ects { font-size: 0.82rem; color: var(--ink); }
.spec-page .mq-ecue-ects small { font-size: 0.62rem; }

/* Les volumes horaires deviennent du texte, plus des pastilles */
.spec-page .mq-ecue-meta { gap: 4px 18px; margin-top: 9px; align-items: center; }
.spec-page .mq-m {
    background: transparent;
    border: 0;
    padding: 0;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--ink-3);
}
.spec-page .mq-m b,
.spec-page .mq-m-vh b,
.spec-page .mq-m-pj b { font-weight: 600; color: var(--ink-2); }
.spec-page .mq-m-vh { color: var(--ink-2); }
.spec-page .mq-m-pj,
.spec-page .mq-m-pj b { color: #B45309; }
.spec-page .mq-reg,
.spec-page .mq-reg-mx,
.spec-page .mq-reg-cc,
.spec-page .mq-reg-p {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    background: var(--surface-2);
    color: var(--ink-3);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 3px 8px;
}
.spec-page .mq-legend { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 20px; }
.spec-page .mq-legend-title { font-size: 0.72rem; letter-spacing: 0.1em; color: var(--ink-3); }
.spec-page .mq-legend-item { font-size: 0.85rem; color: var(--ink-2); }
.spec-page .plan-note { font-size: 0.9rem; line-height: 1.7; color: var(--ink-2); }

/* --- 13. FAQ ---------------------------------------------------------- */
.spec-page .faq-list { max-width: 780px; margin-top: 34px; }
.spec-page .faq-item { border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: 10px; }
.spec-page .faq-item[open] { border-color: var(--line-2); }
.spec-page .faq-question { padding: 20px 24px; font-size: 1rem; font-weight: 600; color: var(--ink); line-height: 1.5; }
.spec-page .faq-question::after { font-size: 1.4rem; font-weight: 300; color: var(--spec); line-height: 1; }
.spec-page .faq-item[open] .faq-question::after { content: '\2212'; }
.spec-page .faq-question:hover { background: var(--surface-2); }
.spec-page .faq-answer { padding: 0 24px 22px; }
.spec-page .faq-answer p { font-size: 0.98rem; line-height: 1.8; color: var(--ink-2); }
.spec-page .faq-answer a,
.spec-page .spec-answer a,
.spec-page .spec-note a,
.spec-page .spec-table a { color: var(--spec); font-weight: 600; }

/* --- 14. Candidature : encadré documents ------------------------------ */
.spec-page .spec-docs {
    margin-top: 32px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 28px 30px;
}
.spec-page .spec-docs h4 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 16px;
}
.spec-page .spec-docs-list { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 10px; }
.spec-page .spec-docs-list li,
.spec-page .spec-docs-mail { font-size: 0.95rem; color: var(--ink-2); line-height: 1.6; margin: 0; }
.spec-page .spec-docs-mail a { color: var(--spec); font-weight: 600; text-decoration: none; }
.spec-page .spec-docs-mail a:hover { text-decoration: underline; }

/* --- 15. Accessibilité & mouvement ------------------------------------ */
.spec-page a:focus-visible,
.spec-page summary:focus-visible,
.spec-page button:focus-visible,
.spec-page .form-input:focus-visible,
.spec-page .form-select:focus-visible {
    outline: 2px solid var(--spec);
    outline-offset: 3px;
    border-radius: 6px;
}
.spec-page .fade-in { transform: translateY(10px); animation-delay: .5s; }
@media (prefers-reduced-motion: reduce) {
    .spec-page .fade-in { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* --- 16. Responsive ---------------------------------------------------- */
@media (max-width: 900px) {
    .spec-page .value-item p { max-width: 100%; }
}
@media (max-width: 768px) {
    .spec-page .formation-header h2 { font-size: 1.35rem; }
    .spec-page .spec-answer-lead { font-size: 1rem; }
    .spec-page .spec-answer { padding: 22px 20px; }
    .spec-page .spec-subnav a { padding: 13px 12px; font-size: 0.85rem; }
    .spec-page main section[id] { scroll-margin-top: 66px; }
    .spec-page .value-item h3, .spec-page .value-item h4 { font-size: 0.95rem; }
    .spec-page .value-item p { font-size: 0.9rem; }
    .spec-page .mq-sem-title { font-size: 0.95rem; }
    .spec-page .mq-ecue-name { font-size: 0.92rem; }
    .spec-page .spec-docs { padding: 22px 20px; }
}
@media (max-width: 480px) {
    .spec-page .mq-sem-body { padding: 14px; }
    .spec-page .mq-ecue-meta { gap: 4px 14px; }
    .spec-page .mq-m { font-size: 0.76rem; }
    .spec-page .mq-reg, .spec-page .mq-reg-mx, .spec-page .mq-reg-cc, .spec-page .mq-reg-p { font-size: 0.62rem; padding: 2px 6px; }
    .spec-page .faq-question { padding: 16px 18px; font-size: 0.94rem; }
    .spec-page .faq-answer { padding: 0 18px 18px; }
    .spec-page .faq-answer p { font-size: 0.92rem; }
    .spec-page .spec-brief-item b { font-size: 0.95rem; }
}


/* =====================================================================
   17. COUCHE « PREMIUM » — direction artistique haut de gamme (09-2026)
   Objectifs :
     · Hero éditorial cinématographique (alignement à gauche, hiérarchie nette)
     · Cartes réelles, hairlines, élévations douces multi-couches
     · Rythme vertical maîtrisé, alternance de fonds explicite
     · Micro-interactions fluides (easing « expo out »)
     · Correction des contrastes (texte sombre sur fond navy)
   Tout est scopé sur .spec-page — n'affecte aucune autre page.
   ===================================================================== */

/* --- 17.1 Jetons premium -------------------------------------------- */
.spec-page {
    --spec-2:    #A78BFA;
    --spec-deep: #5B21B6;
    --navy-1:    #16233F;
    --navy-2:    #0E1930;
    --gold-1:    #D4A830;

    /* Élévations douces, multi-couches (jamais une seule ombre dure) */
    --e1: 0 1px 2px rgba(16,24,40,.04), 0 4px 12px rgba(16,24,40,.05);
    --e2: 0 2px 4px rgba(16,24,40,.04), 0 12px 28px rgba(16,24,40,.08);
    --e3: 0 4px 8px rgba(16,24,40,.05), 0 22px 48px rgba(16,24,40,.11);

    --ease: cubic-bezier(.16, 1, .3, 1);
    --dur: .45s;
}
.spec-theme-embarque { --spec-2: #60A5FA; --spec-deep: #1D4ED8; }
.spec-theme-auto     { --spec-2: #FB923C; --spec-deep: #9A3412; }
.spec-theme-energie  { --spec-2: #2DD4BF; --spec-deep: #115E59; }
.spec-theme-meca     { --spec-2: #A78BFA; --spec-deep: #5B21B6; }

/* --- 17.2 Finitions typographiques ---------------------------------- */
.spec-page {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1, "liga" 1;
}
.spec-page h1,
.spec-page h2,
.spec-page h3 { text-wrap: balance; }
.spec-page p  { text-wrap: pretty; }

.spec-page ::selection { background: var(--spec); color: #fff; }
.spec-page ::-moz-selection { background: var(--spec); color: #fff; }

.spec-page a:focus-visible,
.spec-page button:focus-visible,
.spec-page summary:focus-visible,
.spec-page input:focus-visible,
.spec-page select:focus-visible,
.spec-page textarea:focus-visible {
    outline: 2px solid var(--spec);
    outline-offset: 3px;
    border-radius: 6px;
}

/* --- 17.3 Alternance de fonds explicite (corrige le navy hérité) ----- */
.spec-page main > section,
.spec-page main > .spec-parent-bar { position: relative; }

.spec-page #presentation,
.spec-page #outils,
.spec-page #certifications,
.spec-page #autres-specialites,
.spec-page #faq            { background: var(--surface) !important; }

.spec-page #plan-etudes,
.spec-page #projets,
.spec-page #debouches      { background: var(--surface-2) !important; }

.spec-page .value-bar {
    background: linear-gradient(180deg, #FFFFFF 0%, var(--surface-2) 55%, var(--surface-2) 100%) !important;
    border-bottom: 1px solid var(--line);
}

/* Filets de séparation discrets entre deux zones claires */
.spec-page #presentation,
.spec-page #outils,
.spec-page #certifications,
.spec-page #autres-specialites { border-top: 1px solid var(--line); }

/* --- 17.4 Bandeau parent : plus discret, plus fin -------------------- */
.spec-page .spec-parent-bar {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--line);
    padding: 14px 0;
}
.spec-page .spec-parent-bar p { color: var(--ink-2); font-size: .87rem; }
.spec-page .spec-parent-bar a.spec-parent-link {
    border: 1px solid var(--line-2);
    color: var(--ink);
    background: var(--surface);
    box-shadow: var(--e1);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color .25s ease, color .25s ease;
}
.spec-page .spec-parent-bar a.spec-parent-link:hover {
    background: var(--surface);
    color: var(--spec);
    border-color: var(--spec);
    transform: translateY(-1px);
    box-shadow: var(--e2);
}

/* --- 17.5 HERO éditorial -------------------------------------------- */
.spec-page .hero-inner {
    min-height: 660px;
    min-height: 82svh;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.spec-page .hero-inner .hero-bg img {
    filter: brightness(.82) saturate(.9) contrast(1.04) !important;
    transform: scale(1.03);
    transition: transform 1.2s var(--ease);
}
/* Dégradé double : lisibilité à gauche + assise en bas, sujet préservé à droite */
.spec-page .hero-inner .hero-overlay {
    background:
        linear-gradient(100deg, rgba(10,18,35,.90) 0%, rgba(10,18,35,.74) 34%, rgba(10,18,35,.30) 62%, rgba(10,18,35,.12) 100%),
        linear-gradient(180deg, rgba(10,18,35,.45) 0%, rgba(10,18,35,0) 28%, rgba(10,18,35,.55) 100%) !important;
}
/* Voile de grain : profondeur « filmique » */
.spec-page .hero-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: .05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Raccord doux vers la section suivante */
.spec-page .hero-inner::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 90px;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.10) 100%);
}

.spec-page .hero-inner .hero-content {
    max-width: 1200px;
    width: 100%;
    padding: clamp(56px, 6.5vh, 92px) 20px;
}

/* Badge : pastille fine en verre + point d'accent */
.spec-page .hero-inner .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(255,255,255,.10) !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border-radius: 999px;
    padding: 8px 18px 8px 14px;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.94) !important;
    box-shadow: 0 2px 20px rgba(0,0,0,.18) !important;
}
.spec-page .hero-inner .hero-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--spec-2);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--spec-2) 28%, transparent);
    flex: 0 0 auto;
}

/* Titre : casse normale (plus haut de gamme que le tout-capitales) */
.spec-page .hero-inner .hero-content h1 {
    text-transform: none !important;
    font-size: clamp(1.95rem, 1.05rem + 2.4vw, 3.05rem);
    line-height: 1.1;
    letter-spacing: -.022em;
    font-weight: 700;
    max-width: 21ch;
    margin: 18px 0 0;
    text-shadow: 0 2px 30px rgba(0,0,0,.35);
}

/* Paragraphe : plus de « boîte de verre », texte net et aéré */
.spec-page .hero-inner .hero-content p {
    background: none !important;
    border: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
    margin: 18px 0 0;
    max-width: 56ch;
    font-size: clamp(.97rem, .9rem + .25vw, 1.09rem);
    line-height: 1.75;
    color: rgba(255,255,255,.9) !important;
    text-shadow: 0 1px 14px rgba(0,0,0,.45);
}
.spec-page .hero-inner .hero-content p strong {
    color: #fff !important;
    font-weight: 600;
    border-bottom: none !important;
    box-shadow: 0 1px 0 color-mix(in srgb, var(--spec-2) 85%, transparent);
    padding-bottom: 1px;
}

/* Boutons hero */
.spec-page .hero-inner .hero-cta-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 30px;
}
.spec-page .hero-inner .hero-cta-group .btn {
    position: relative;
    overflow: hidden;
    border-radius: 12px !important;
    padding: 15px 30px !important;
    font-size: .82rem !important;
    font-weight: 700 !important;
    letter-spacing: .09em;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background .3s ease, border-color .3s ease;
}
.spec-page .hero-inner .hero-cta-group .btn-primary {
    background: linear-gradient(135deg, var(--spec) 0%, var(--spec-deep) 100%) !important;
    border: 1px solid color-mix(in srgb, var(--spec-2) 55%, transparent) !important;
    box-shadow: 0 8px 26px color-mix(in srgb, var(--spec) 38%, transparent),
                inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.spec-page .hero-inner .hero-cta-group .btn-primary:hover {
    background: linear-gradient(135deg, var(--spec) 0%, var(--spec) 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--spec) 46%, transparent),
                inset 0 1px 0 rgba(255,255,255,.24) !important;
}
/* Reflet au survol */
.spec-page .hero-inner .hero-cta-group .btn-primary::after {
    content: "";
    position: absolute;
    top: 0; left: -60%;
    width: 45%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
    transform: skewX(-18deg);
    transition: left .7s var(--ease);
}
.spec-page .hero-inner .hero-cta-group .btn-primary:hover::after { left: 130%; }

.spec-page .hero-inner .hero-cta-group .btn-cta-red {
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.30) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: none !important;
}
.spec-page .hero-inner .hero-cta-group .btn-cta-red:hover {
    background: rgba(255,255,255,.16) !important;
    border-color: rgba(255,255,255,.55) !important;
    transform: translateY(-2px);
}
.spec-page .hero-inner .btn-whatsapp-hero {
    border-radius: 12px;
    padding: 14px 20px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.16);
    transition: transform var(--dur) var(--ease), background .3s ease, border-color .3s ease;
}
.spec-page .hero-inner .btn-whatsapp-hero:hover {
    background: rgba(37,211,102,.14);
    border-color: rgba(37,211,102,.45);
    transform: translateY(-2px);
}

/* Statistiques hero : filets verticaux au lieu d'une boîte de verre */
.spec-page .hero-inner .poly-hero-stats {
    background: none !important;
    border: none !important;
    border-top: 1px solid rgba(255,255,255,.16) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
    padding: 24px 0 0 !important;
    margin-top: 34px;
    gap: 0 !important;
    max-width: 780px;
    width: 100%;
}
.spec-page .hero-inner .poly-hero-stat {
    flex: 1 1 0;
    padding: 0 26px;
    border-left: 1px solid rgba(255,255,255,.14);
    text-align: left;
}
.spec-page .hero-inner .poly-hero-stat:first-child { border-left: none; padding-left: 0; }
.spec-page .hero-inner .poly-hero-stat .stat-number {
    display: block;
    font-size: clamp(1.5rem, 1.2rem + .8vw, 2rem);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.1;
    color: #fff;
}
.spec-page .hero-inner .poly-hero-stat .stat-label {
    display: block;
    margin-top: 7px;
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255,255,255,.62) !important;
    line-height: 1.45;
}

/* Alignement éditorial à gauche sur grand écran (le sujet photo reste visible) */
@media (min-width: 1024px) {
    .spec-page .hero-inner .hero-content {
        align-items: flex-start;
        text-align: left;
    }
    .spec-page .hero-inner .hero-cta-group { justify-content: flex-start; }
}
@media (max-width: 1023px) {
    .spec-page .hero-inner .hero-content h1 { max-width: 22ch; }
    .spec-page .hero-inner .hero-content p  { margin-left: auto; margin-right: auto; }
    .spec-page .hero-inner .poly-hero-stats { max-width: 560px; }
    .spec-page .hero-inner .poly-hero-stat { padding: 0 14px; }
}
@media (max-width: 600px) {
    .spec-page .hero-inner { min-height: 78svh; }
    .spec-page .hero-inner .poly-hero-stats { flex-wrap: wrap !important; padding-top: 20px !important; }
    .spec-page .hero-inner .poly-hero-stat {
        flex: 1 1 42%;
        border-left: none;
        padding: 10px 0;
        text-align: center;
    }
}

/* --- 17.6 Sous-navigation ------------------------------------------- */
.spec-page .spec-subnav {
    background: rgba(255,255,255,.82);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 6px 20px rgba(16,24,40,.05);
}
.spec-page .spec-subnav-inner { padding: 4px 0; }
.spec-page .spec-subnav a {
    padding: 15px 16px;
    letter-spacing: .005em;
    box-shadow: inset 0 -2px 0 transparent;
    transition: color .25s ease, box-shadow .25s var(--ease);
}
.spec-page .spec-subnav a svg { opacity: .55; transition: opacity .25s ease; }
.spec-page .spec-subnav a:hover svg,
.spec-page .spec-subnav a.is-active svg { opacity: 1; }

/* --- 17.7 En-têtes de section : sur-titre avec filet ----------------- */
.spec-page .formation-badge,
.spec-page .spec-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.spec-page .formation-badge::before {
    content: "";
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--spec);
    flex: 0 0 auto;
}
.spec-page .formation-header h2,
.spec-page .value-bar-title { letter-spacing: -.024em; }
.spec-page .formation-icon {
    box-shadow: inset 0 0 0 1px var(--spec-line);
    transition: transform var(--dur) var(--ease);
}
.spec-page .formation-section:hover .formation-icon { transform: rotate(-4deg) scale(1.04); }

/* --- 17.8 Bloc « Pourquoi » : vraies cartes -------------------------- */
.spec-page .value-bar .value-bar-title,
.spec-page .value-bar .spec-answer-lead { text-align: center; }
.spec-page .value-bar .spec-answer-lead {
    max-width: 64ch;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 44px;
}
.spec-page .value-bar-inner { gap: 22px; }
.spec-page .value-item {
    position: relative;
    overflow: hidden;
    text-align: left;
    align-items: flex-start;
    gap: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 30px 26px 32px;
    box-shadow: var(--e1);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color .3s ease;
}
.spec-page .value-item::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--spec), var(--spec-2));
    opacity: 0;
    transform: scaleX(.3);
    transform-origin: left;
    transition: opacity .35s ease, transform .55s var(--ease);
}
.spec-page .value-item:hover {
    transform: translateY(-6px);
    box-shadow: var(--e3);
    border-color: var(--spec-line);
}
.spec-page .value-item:hover::before { opacity: 1; transform: scaleX(1); }
.spec-page .value-item .value-icon {
    width: 50px;
    height: 50px;
    border-radius: 15px;
    margin: 0 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px var(--spec-line);
    transition: transform var(--dur) var(--ease);
}
.spec-page .value-item .value-icon svg { width: 23px; height: 23px; }
.spec-page .value-item:hover .value-icon { transform: translateY(-2px) scale(1.05); }
.spec-page .value-item h3,
.spec-page .value-item h4 { margin: 0 0 10px; font-size: 1.06rem; }
.spec-page .value-item p { max-width: none !important; }

/* --- 17.9 Cartes génériques : hairline + élévation douce ------------- */
.spec-page .spec-brief-item,
.spec-page .spec-cert,
.spec-page .spec-project,
.spec-page .spec-tool-card,
.spec-page .spec-sibling,
.spec-page .formation-block {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--e1);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color .3s ease;
}
.spec-page .spec-cert:hover,
.spec-page .spec-project:hover,
.spec-page .spec-tool-card:hover,
.spec-page .spec-sibling:hover,
.spec-page .spec-brief-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--e2);
    border-color: var(--spec-line);
}
.spec-page .spec-brief-item {
    border-top: 3px solid var(--spec);
    border-radius: 4px 4px 16px 16px;
}
.spec-page .spec-sibling {
    padding: 26px 28px;
    display: block;
}
.spec-page .spec-sibling:hover { border-color: var(--spec); }

/* --- 17.10 Sections sombres : profondeur et halo d'accent ------------ */
.spec-page .mid-cta,
.spec-page .stats-section,
.spec-page .cta-section {
    position: relative;
    overflow: hidden;
}
.spec-page .stats-section::before {
    content: "";
    position: absolute;
    top: -40%;
    right: -10%;
    width: 60%;
    height: 180%;
    pointer-events: none;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--spec) 26%, transparent), transparent 70%);
    opacity: .55;
}
.spec-page .stats-section > * { position: relative; z-index: 1; }

/* Section compétences : traitement clair, comme le reste de la page */
.spec-page #competences { background: var(--surface-2) !important; }
.spec-page #competences .spec-answer-lead,
.spec-page #competences p,
.spec-page #competences li { color: var(--ink-2); }
.spec-page #competences h2,
.spec-page #competences h3 { color: var(--ink); }
.spec-page #competences .formation-badge { color: var(--spec); }
.spec-page #competences .formation-icon {
    background: var(--spec-soft);
    color: var(--spec);
}
.spec-page #competences .formation-block {
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--e1);
}

/* Statistiques : empilement propre + chiffre en dégradé */
.spec-page .stats-section {
    background: linear-gradient(165deg, var(--navy-1) 0%, var(--navy-2) 100%) !important;
    border-top: 1px solid rgba(255,255,255,.07);
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.spec-page .stats-section .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}
.spec-page .stats-section .stat-num {
    display: block;
    font-size: clamp(2rem, 1.4rem + 1.8vw, 2.9rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1;
    background: linear-gradient(135deg, #FFFFFF 0%, var(--spec-2) 130%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.spec-page .stats-section .stat-text {
    display: block;
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255,255,255,.6) !important;
    line-height: 1.5;
    max-width: 20ch;
}

/* Bandeaux d'appel à l'action */
.spec-page .mid-cta,
.spec-page .cta-section {
    background: linear-gradient(165deg, var(--navy-1) 0%, #0B1526 100%) !important;
    border-top: 1px solid rgba(255,255,255,.07);
}
.spec-page .mid-cta h2,
.spec-page .cta-section h2 {
    letter-spacing: -.02em;
    text-transform: none !important;
    font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.4rem);
    line-height: 1.18;
}
.spec-page .mid-cta p,
.spec-page .cta-section p { color: rgba(255,255,255,.72) !important; max-width: 58ch; margin-left: auto; margin-right: auto; }
.spec-page .mid-cta .btn-white,
.spec-page .cta-section .btn-white {
    border-radius: 12px;
    padding: 15px 32px;
    font-weight: 700;
    letter-spacing: .08em;
    box-shadow: 0 10px 30px rgba(0,0,0,.28);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.spec-page .mid-cta .btn-white:hover,
.spec-page .cta-section .btn-white:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(0,0,0,.34);
}

/* --- 17.11 Formulaire ------------------------------------------------ */
.spec-page #form-section {
    background: var(--surface-2) !important;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.spec-page #form-section input,
.spec-page #form-section select,
.spec-page #form-section textarea {
    border-radius: 10px;
    transition: border-color .25s ease, box-shadow .25s ease;
}
.spec-page #form-section input:focus,
.spec-page #form-section select:focus,
.spec-page #form-section textarea:focus {
    border-color: var(--spec) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--spec) 22%, transparent) !important;
    outline: none;
}

/* --- 17.12 Maquette pédagogique : finition ---------------------------- */
.spec-page .mq-sem,
.spec-page .plan-year {
    border-radius: 16px;
    box-shadow: var(--e1);
    transition: box-shadow var(--dur) var(--ease);
}
.spec-page .mq-sem:hover,
.spec-page .plan-year:hover { box-shadow: var(--e2); }
.spec-page .mq-ue {
    border-radius: 14px;
    transition: border-color .3s ease, box-shadow var(--dur) var(--ease);
}
.spec-page .mq-ue:hover { box-shadow: var(--e1); border-color: var(--spec-line); }

/* --- 17.13 FAQ -------------------------------------------------------- */
.spec-page .faq-item {
    border-radius: 14px;
    border: 1px solid var(--line);
    box-shadow: var(--e1);
    transition: box-shadow var(--dur) var(--ease), border-color .3s ease;
}
.spec-page .faq-item:hover { box-shadow: var(--e2); border-color: var(--line-2); }
.spec-page .faq-question { font-weight: 600; letter-spacing: -.01em; }

/* --- 17.14 Tableau comparatif ---------------------------------------- */
.spec-page .spec-table-wrap {
    border-radius: 16px;
    border: 1px solid var(--line);
    box-shadow: var(--e1);
    overflow: hidden;
}
.spec-page .spec-table thead th {
    background: var(--surface-2);
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.spec-page .spec-table tbody tr { transition: background .25s ease; }
.spec-page .spec-table tbody tr:hover { background: var(--spec-soft); }

/* --- 17.15 Apparition à l'entrée : plus douce ------------------------ */
.spec-page .fade-in {
    transform: translateY(16px);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.spec-page .fade-in.visible { transform: none; }

@media (prefers-reduced-motion: reduce) {
    .spec-page *,
    .spec-page *::before,
    .spec-page *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* --- 17.16 Finitions complémentaires --------------------------------- */

/* Chrome de page plus compact (plus d'air pour le hero) */
.spec-page .breadcrumb { padding: 12px 0; border-bottom: 1px solid var(--line); }
.spec-page .breadcrumb-list a { color: var(--ink-3); transition: color .25s ease; }
.spec-page .breadcrumb-list a:hover { color: var(--spec); }

/* Titres de section : casse normale, plus haut de gamme */
.spec-page .section-title,
.spec-page .form-title,
.spec-page .alternance-banner h3,
.spec-page .alternance-content h3 {
    text-transform: none !important;
    letter-spacing: -.02em;
}
.spec-page .section-title {
    font-size: clamp(1.6rem, 1.15rem + 1.7vw, 2.3rem);
    line-height: 1.15;
    font-weight: 700;
}

/* Panneau de formulaire : carte blanche premium */
.spec-page #form-section .form-container {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: 0 22px 50px rgba(22,35,63,.08);
}
.spec-page #form-section .form-title {
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase !important;
    color: var(--ink-3);
}
.spec-page #form-section .form-input {
    background: var(--surface);
    border: 1px solid var(--line-2);
}
.spec-page #form-section .step-number { border-radius: 12px; }
.spec-page #form-section .form-intro { color: var(--ink-2); }

/* Icônes de blocs : alignées sur la couleur de la spécialité */
.spec-page .formation-block h3 svg,
.spec-page .spec-answer h3 svg,
.spec-page .spec-docs h3 svg { color: var(--spec); }

/* Encadré de définition : plus doux, filet d'accent */
.spec-page .spec-answer {
    position: relative;
    background: linear-gradient(180deg, var(--spec-soft) 0%, rgba(255,255,255,.65) 100%);
    border: 1px solid var(--spec-line);
    box-shadow: var(--e1);
    overflow: hidden;
}
.spec-page .spec-answer::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--spec), var(--spec-2) 60%, transparent);
}

/* Note de bas de section / méthodologie */
.spec-page .spec-note {
    border-left: 2px solid var(--spec-line);
    color: var(--ink-3);
}

/* Bandeau alternance : voile pour la lisibilité du texte */
.spec-page .alternance-banner { position: relative; }
.spec-page .alternance-banner h3 {
    font-size: clamp(1.25rem, .95rem + 1.1vw, 1.75rem);
    line-height: 1.25;
    max-width: 26ch;
}
.spec-page .alternance-banner .btn {
    border-radius: 12px;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.spec-page .alternance-banner .btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.3); }

/* Liens de contenu : soulignement fin et élégant */
.spec-page .formation-desc a,
.spec-page .spec-answer a,
.spec-page .spec-note a {
    color: var(--spec);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: color-mix(in srgb, var(--spec) 35%, transparent);
    transition: text-decoration-color .25s ease;
}
.spec-page .formation-desc a:hover,
.spec-page .spec-answer a:hover,
.spec-page .spec-note a:hover { text-decoration-color: var(--spec); }

/* Carte « autre spécialité » : flèche animée */
.spec-page .spec-sibling .spec-sibling-link,
.spec-page .spec-sibling a { transition: gap .3s var(--ease); }
.spec-page .spec-sibling:hover { transform: translateY(-4px); }

/* Bouton retour en haut : finition */
.spec-page .back-to-top,
.spec-page #backToTop {
    border-radius: 14px;
    box-shadow: var(--e2);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.spec-page .back-to-top:hover,
.spec-page #backToTop:hover { transform: translateY(-3px); box-shadow: var(--e3); }

/* --- 17.17 Traitement « capitales de luxe » des titres de bandeaux ----
   Les intitulés sont saisis en majuscules dans le HTML : on les allège
   (graisse réduite + interlettrage ouvert) plutôt que de les crier.     */
.spec-page .section-title,
.spec-page .mid-cta h2,
.spec-page .cta-section h2,
.spec-page .alternance-banner h3,
.spec-page .alternance-content h3 {
    font-weight: 600 !important;
    letter-spacing: .07em !important;
    line-height: 1.28 !important;
}
.spec-page .section-title { font-size: clamp(1.35rem, 1rem + 1.2vw, 1.85rem); }
.spec-page .mid-cta h2,
.spec-page .cta-section h2 { font-size: clamp(1.3rem, .95rem + 1.3vw, 1.9rem); }
.spec-page .alternance-banner h3,
.spec-page .alternance-content h3 { font-size: clamp(1.05rem, .85rem + .8vw, 1.4rem); }

/* Filet d'accent sous le titre de la zone formulaire */
.spec-page #form-section .section-title::after {
    background: linear-gradient(90deg, var(--spec), var(--spec-2)) !important;
}

/* --- 17.18 Bandeau alternance : fondu plus progressif vers la photo --- */
.spec-page .alternance-banner .alternance-img::before {
    background: linear-gradient(to right, #6B1525 0%, rgba(107,21,37,.82) 26%, rgba(107,21,37,.34) 60%, rgba(107,21,37,0) 100%);
}

/* --- 17.19 Indicateur de progression de lecture (CSS pur) ------------ */
@supports (animation-timeline: scroll()) {
    .spec-page .spec-subnav::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -1px;
        height: 2px;
        width: 100%;
        transform-origin: 0 50%;
        background: linear-gradient(90deg, var(--spec), var(--spec-2));
        animation: spec-read-progress linear both;
        animation-timeline: scroll(root block);
    }
    @keyframes spec-read-progress {
        from { transform: scaleX(0); }
        to   { transform: scaleX(1); }
    }
}
@media (prefers-reduced-motion: reduce) {
    .spec-page .spec-subnav::after { display: none; }
}

/* --- 17.20 Équilibre des grilles (évite les cartes orphelines) -------- */
@media (min-width: 1024px) {
    .spec-page .spec-tools-grid { grid-template-columns: repeat(3, 1fr); }
    .spec-page .spec-cert-list  { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 700px) and (max-width: 1023px) {
    .spec-page .spec-tools-grid,
    .spec-page .spec-cert-list { grid-template-columns: repeat(2, 1fr); }
}

/* Alignement de l'icône avec un intitulé sur deux lignes */
.spec-page .spec-tool-card h3,
.spec-page .spec-tool-card h4 {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.spec-page .spec-tool-card h3 svg,
.spec-page .spec-tool-card h4 svg { flex: 0 0 auto; margin-top: 2px; }

/* Sur-titre de la section Débouchés : même traitement que les autres */
.spec-page #debouches .formation-badge {
    background: transparent !important;
    color: var(--spec) !important;
    padding: 0 !important;
}
.spec-page #debouches .formation-header h2 { color: var(--ink) !important; }
.spec-page #debouches .formation-icon { color: var(--spec) !important; background: var(--spec-soft) !important; }

/* =====================================================================
   18. PASSE « ÉPURÉ & PREMIUM » (09-2026)
   Correction des défauts relevés en revue visuelle : icônes non
   dimensionnées, grilles orphelines, alignements, sur-graissage du texte,
   sections sombres trop nombreuses. Une seule couleur d'accent : --spec.
   ===================================================================== */

/* --- 18.1 Icônes de titres de blocs : taille verrouillée ------------- */
.spec-page .formation-block h3,
.spec-page .formation-block h4,
.spec-page .spec-answer h3,
.spec-page .spec-docs h3 {
    display: flex;
    align-items: center;
    gap: 10px;
}
.spec-page .formation-block h3 svg,
.spec-page .formation-block h4 svg,
.spec-page .spec-answer h3 svg,
.spec-page .spec-docs h3 svg,
.spec-page .spec-tool-card h3 svg,
.spec-page .spec-tool-card h4 svg,
.spec-page .spec-job-card h3 svg,
.spec-page .spec-cert svg,
.spec-page .spec-project svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}
/* Garde-fou global : aucune icône inline ne peut s'emballer */
.spec-page main h2 > svg,
.spec-page main h3 > svg,
.spec-page main h4 > svg,
.spec-page main h5 > svg,
.spec-page main li > svg,
.spec-page main p > svg { max-width: 22px; max-height: 22px; }

/* --- 18.2 Titres de blocs : hiérarchie lisible ----------------------- */
.spec-page .formation-block h3 {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
    margin: 0 0 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}
.spec-page .formation-block { padding: 30px 30px 26px; }
.spec-page .formation-block ul { margin: 0; }
.spec-page .formation-block ul li {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--ink-2);
}

/* --- 18.3 Emphase mesurée : moins de gras, plus de calme ------------- */
.spec-page .spec-answer-lead strong,
.spec-page .formation-desc strong,
.spec-page .formation-block li strong,
.spec-page .faq-answer strong,
.spec-page .spec-answer p strong,
.spec-page .spec-answer-facts strong,
.spec-page .plan-note strong,
.spec-page .spec-note strong {
    font-weight: 600;
    color: var(--ink);
}
.spec-page .spec-answer-lead {
    font-size: 1.08rem;
    line-height: 1.75;
    color: var(--ink-2);
}
.spec-page .spec-answer-lead strong { font-weight: 600; }

/* --- 18.4 Encadré de définition : neutre, sans dégradé --------------- */
.spec-page .spec-answer {
    background: var(--surface-2);
    border: 1px solid var(--line);
    box-shadow: none;
    border-radius: var(--r-lg);
    padding: 30px 32px;
}
.spec-page .spec-answer::before { display: none; }
.spec-page .formation-section:nth-child(even) .spec-answer { background: var(--surface); }

/* --- 18.5 Grilles : plus de cartes orphelines ------------------------ */
@media (min-width: 1024px) {
    .spec-page .spec-jobs-grid { grid-template-columns: repeat(3, 1fr); }
    .spec-page .spec-siblings  { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 640px) and (max-width: 1023px) {
    .spec-page .spec-jobs-grid { grid-template-columns: repeat(2, 1fr); }
}
.spec-page .spec-jobs-grid { gap: 20px; }

/* --- 18.6 FAQ : alignée sur la colonne de texte ---------------------- */
.spec-page .faq-list {
    max-width: 860px;
    margin-left: 0;
    margin-right: 0;
    margin-top: 32px;
}

/* --- 18.7 Section « Compétences » : version claire ------------------- */
.spec-page #competences .formation-content { gap: 24px; }

/* --- 18.8 Section « Postuler » : fond clair, titres alignés ---------- */
.spec-page #form-section .section-title {
    text-align: left;
    margin: 0 0 8px;
    color: var(--ink);
}
.spec-page #form-section .section-title::after { display: none !important; }
.spec-page #form-section .section-header { text-align: left; margin-bottom: 0; }

/* --- 18.9 Bandeaux : casse normale, titres respirés ------------------ */
.spec-page .section-title,
.spec-page .mid-cta h2,
.spec-page .cta-section h2,
.spec-page .alternance-banner h3,
.spec-page .alternance-content h3 {
    text-transform: none !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em !important;
    line-height: 1.22 !important;
}
.spec-page .mid-cta { padding: clamp(52px, 5vw, 72px) 0; }
.spec-page .mid-cta p,
.spec-page .cta-section p {
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
    color: rgba(255,255,255,.76);
    line-height: 1.7;
}

/* --- 18.10 Boutons : un seul niveau d'accent ------------------------- */
.spec-page .mid-cta .btn-white,
.spec-page .cta-section .btn-white,
.spec-page .alternance-banner .btn-white {
    background: #fff;
    color: var(--navy-1, #16233F);
    font-weight: 600;
    letter-spacing: .06em;
    box-shadow: none;
}

/* --- 18.11 Respiration : rythme vertical homogène -------------------- */
.spec-page .formation-header { margin-bottom: 18px; }
.spec-page .formation-desc { margin-bottom: 30px; }
.spec-page .spec-brief { margin-top: 8px; }

/* --- 18.12 Mobile ---------------------------------------------------- */
@media (max-width: 768px) {
    .spec-page .formation-block { padding: 22px 20px; }
    .spec-page .spec-answer { padding: 22px 20px; }
    .spec-page .faq-list { max-width: none; }
}

/* --- 18.13 Hero : emphase sans soulignement décoratif ---------------- */
.spec-page .hero-inner .hero-content p strong {
    box-shadow: none !important;
    border-bottom: none !important;
    padding-bottom: 0;
    font-weight: 600;
}

/* --- 18.14 Emphase mesurée (suite) ----------------------------------- */
.spec-page .value-item p strong,
.spec-page .spec-job-card p strong,
.spec-page .spec-project p strong,
.spec-page .mq-note strong { font-weight: 600; color: var(--ink); }

/* --- 18.15 « L'essentiel » : hairline plutôt que barre d'accent ------ */
.spec-page .spec-brief-item {
    border: 1px solid var(--line);
    border-top: 1px solid var(--line);
    border-radius: var(--r-md);
}
.spec-page .spec-brief-item:hover { border-color: var(--line-2); }

/* --- 18.16 Bloc « Pourquoi » : colonne de lecture centrée ------------ */
.spec-page .value-bar .spec-answer-lead {
    text-align: center;
    max-width: 62ch;
}
.spec-page .value-bar-title { text-align: center; max-width: 24ch; margin-inline: auto; text-wrap: balance; }
@media (min-width: 900px) { .spec-page .value-bar-title { max-width: 900px; } }

/* --- 18.17 Cartes « Pourquoi » : lignes de base alignées ------------- */
@media (min-width: 992px) {
    .spec-page .value-item h3,
    .spec-page .value-item h4 { min-height: 2.7em; display: flex; align-items: flex-start; }
}

/* =====================================================================
   19. Zone « POSTULEZ MAINTENANT » : lisibilité renforcée
   (titres contrastés, champs délimités, placeholders lisibles)
   ===================================================================== */
.spec-page #form-section .section-title {
    color: var(--ink);
    font-weight: 800;
}
.spec-page #form-section .form-intro {
    color: var(--ink-2) !important;
    font-size: 1.03rem;
    line-height: 1.75;
    max-width: 54ch;
}

/* Étapes de candidature */
.spec-page #form-section .step-content h4 {
    color: var(--ink);
    font-size: 1.02rem;
    font-weight: 700;
}
.spec-page #form-section .step-content p {
    color: var(--ink-2);
    font-size: 0.95rem;
    line-height: 1.7;
}
.spec-page #form-section .step-number {
    background: color-mix(in srgb, var(--spec) 12%, #FFFFFF);
    color: var(--spec);
    border: 1px solid color-mix(in srgb, var(--spec) 32%, #FFFFFF);
    font-size: 1.1rem;
    font-weight: 800;
}

/* Carte du formulaire */
.spec-page #form-section .form-container {
    padding: 34px 30px;
}
.spec-page #form-section .form-title {
    color: var(--ink) !important;
    font-size: 1.1rem !important;
    font-weight: 800;
    text-transform: none !important;
    letter-spacing: -.01em !important;
    text-align: left;
    margin-bottom: 10px;
}
.spec-page #form-section .form-title::after {
    content: "";
    display: block;
    width: 44px;
    height: 3px;
    border-radius: 3px;
    background: var(--spec);
    margin-top: 10px;
}
.spec-page #form-section .form-hint {
    font-size: 0.88rem;
    color: var(--ink-3);
    margin-bottom: 20px;
    line-height: 1.6;
}
.spec-page #form-section .form-group { margin-bottom: 16px; }

/* Champs : bordure visible + texte foncé */
.spec-page #form-section .form-input,
.spec-page #form-section .form-select {
    background-color: #FFFFFF;
    border: 1.5px solid var(--line-2) !important;
    border-radius: 10px !important;
    padding: 13px 16px;
    font-family: inherit;
    font-size: 1rem;
    color: var(--ink);
    line-height: 1.4;
}
.spec-page #form-section .form-input::placeholder {
    color: #6F7E93;
    opacity: 1;
}
.spec-page #form-section .form-input:hover,
.spec-page #form-section .form-select:hover {
    border-color: color-mix(in srgb, var(--spec) 55%, var(--line-2)) !important;
}
.spec-page #form-section .form-select {
    padding-right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2343516B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
}
.spec-page #form-section .form-select option,
.spec-page #form-section .form-select optgroup {
    color: var(--ink);
}
.spec-page #form-section .form-select optgroup { font-weight: 700; }

/* Bouton d'envoi */
.spec-page #form-section .form-btn {
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: .08em;
    padding: 16px;
    border-radius: 10px;
    margin-top: 14px;
}

@media (max-width: 768px) {
    .spec-page #form-section .form-container { padding: 26px 20px; }
    .spec-page #form-section .form-title { font-size: 1rem !important; }
}

/* =====================================================================
   20. Étapes de candidature — version épurée & lisible
   (fond clair : texte encre foncée, badge sobre, filet de liaison)
   ===================================================================== */
.spec-page #form-section .steps-list {
    position: relative;
    margin: 26px 0 30px;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.spec-page #form-section .step-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin: 0;
    padding: 0 0 24px;
}
.spec-page #form-section .step-item:last-child {
    padding-bottom: 0;
}
/* filet vertical reliant les étapes */
.spec-page #form-section .step-item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 19px;
    top: 42px;
    bottom: 6px;
    width: 1px;
    background: var(--line);
}
.spec-page #form-section .step-number {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid var(--spec-line, var(--line));
    color: var(--spec) !important;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}
.spec-page #form-section .step-content {
    padding-top: 7px;
}
.spec-page #form-section .step-content h4 {
    color: var(--ink) !important;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
    margin: 0 0 5px;
}
.spec-page #form-section .step-content p {
    color: var(--ink-2) !important;
    font-size: 0.93rem;
    font-weight: 400;
    line-height: 1.65;
    margin: 0;
    max-width: 46ch;
}

@media (max-width: 640px) {
    .spec-page #form-section .step-item { gap: 14px; padding-bottom: 20px; }
    .spec-page #form-section .step-number { width: 34px; height: 34px; font-size: 0.88rem; }
    .spec-page #form-section .step-item:not(:last-child)::before { left: 17px; top: 38px; }
    .spec-page #form-section .step-content p { font-size: 0.9rem; }
}


/* =====================================================================
   21. Bloc « DOCUMENTS REQUIS » — finition premium (09-2026)
   Corrige aussi un héritage de styles.css (.section.section-gray .spec-docs)
   pensé pour un fond navy : texte blanc devenu illisible depuis que la
   section « Postuler » est passée sur fond clair.
   Sélecteurs portés par #form-section pour reprendre la main sans !important.
   ===================================================================== */
.spec-page #form-section .spec-docs {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-top: 34px;
    padding: 26px 28px 22px;
    background:
        linear-gradient(180deg, #FFFFFF 0%, #FCFDFF 100%);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--e2, 0 2px 4px rgba(16,24,40,.04), 0 12px 28px rgba(16,24,40,.08));
    transition: box-shadow var(--dur, .45s) var(--ease, cubic-bezier(.16,1,.3,1)),
                transform var(--dur, .45s) var(--ease, cubic-bezier(.16,1,.3,1)),
                border-color .3s ease;
}
.spec-page #form-section .spec-docs:hover {
    transform: translateY(-2px);
    border-color: var(--spec-line, var(--line-2));
    box-shadow: var(--e3, 0 4px 8px rgba(16,24,40,.05), 0 22px 48px rgba(16,24,40,.11));
}
/* Filet d'accent supérieur */
.spec-page #form-section .spec-docs::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--spec) 0%, var(--spec-2, var(--spec)) 45%, transparent 100%);
    z-index: 1;
}
/* Halo d'accent discret en angle */
.spec-page #form-section .spec-docs::after {
    content: "";
    position: absolute;
    top: -80px; right: -70px;
    width: 220px; height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--spec) 13%, transparent) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
}

/* --- En-tête --- */
.spec-page #form-section .spec-docs-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}
.spec-page #form-section .spec-docs-icon {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: var(--spec-soft);
    color: var(--spec);
    border: 1px solid color-mix(in srgb, var(--spec) 20%, transparent);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.spec-page #form-section .spec-docs-icon svg { width: 21px; height: 21px; }
.spec-page #form-section .spec-docs-headings { min-width: 0; }
.spec-page #form-section .spec-docs-eyebrow {
    display: block;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--spec);
    margin-bottom: 4px;
}
.spec-page #form-section .spec-docs h4 {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: -0.012em;
    line-height: 1.25;
    color: var(--ink);
}
.spec-page #form-section .spec-docs-count {
    margin-left: auto;
    flex: 0 0 auto;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--spec);
    background: var(--spec-soft);
    border: 1px solid var(--spec-line, var(--line));
    border-radius: 999px;
    padding: 5px 12px;
    white-space: nowrap;
}

/* --- Liste : lignes séparées par des filets, puce en pastille --- */
.spec-page #form-section .spec-docs-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
}
.spec-page #form-section .spec-docs-list li {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px 0;
    border-top: 1px solid var(--line);
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--ink-2);
}
.spec-page #form-section .spec-docs-list li:first-child { border-top: none; padding-top: 4px; }
.spec-page #form-section .spec-docs-check {
    flex: 0 0 auto;
    width: 22px; height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--spec) 12%, #FFFFFF);
    color: var(--spec);
    transition: background .25s ease, transform .25s var(--ease, ease);
}
.spec-page #form-section .spec-docs-check svg { width: 11px; height: 11px; }
.spec-page #form-section .spec-docs-list li:hover .spec-docs-check {
    background: var(--spec);
    color: #FFFFFF;
    transform: scale(1.08);
}

/* --- Pied : contact --- */
.spec-page #form-section .spec-docs-mail {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 18px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--ink-3);
}
.spec-page #form-section .spec-docs-mail-icon {
    flex: 0 0 auto;
    width: 30px; height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--spec);
}
.spec-page #form-section .spec-docs-mail-icon svg { width: 15px; height: 15px; }
.spec-page #form-section .spec-docs-mail a {
    color: var(--spec);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--spec) 35%, transparent);
    transition: border-color .25s ease;
}
.spec-page #form-section .spec-docs-mail a:hover {
    border-bottom-color: var(--spec);
}

@media (max-width: 640px) {
    .spec-page #form-section .spec-docs { padding: 22px 20px 18px; border-radius: 16px; }
    .spec-page #form-section .spec-docs-head { flex-wrap: wrap; gap: 12px; }
    .spec-page #form-section .spec-docs-count { margin-left: 0; order: 3; }
    .spec-page #form-section .spec-docs h4 { font-size: 1.02rem; }
    .spec-page #form-section .spec-docs-list li { font-size: 0.91rem; }
}

@media (prefers-reduced-motion: reduce) {
    .spec-page #form-section .spec-docs,
    .spec-page #form-section .spec-docs-check { transition: none; }
    .spec-page #form-section .spec-docs:hover { transform: none; }
}