/* ============================================================
   EXPERT CYBER SERVICES — FEUILLE DE STYLE UNIFIÉE
   Thème : Sombre / Bleu nuit
   ------------------------------------------------------------
   SOMMAIRE
   1.  Variables globales
   2.  Reset & styles de base
   3.  En-tête / Navigation
   4.  Fil d'Ariane (breadcrumb)
   5.  Section Hero (bannière d'accueil)
   6.  Boutons & badges
   7.  Sections génériques
   8.  Cartes de service
   9.  Garanties
   10. Formulaire de contact
   11. Pages légales (mentions, CGV, etc.)
   12. Tableaux de données
   13. Tarifs
   14. Logos partenaires
   15. Pied de page
   16. Bandeau "Patch de sécurité"
   17. Classes utilitaires
   18. Section partenaires (#partenaires)
   19. Section "3 domaines d'expertise" (.ecs-poster)
   20. Grille partenaires (pages matériel/logiciel)
   21. Bloc de contact "Wysam"
   22. Media queries responsives
   23. Blog
   24. Responsive
   25. Page assistance (icônes de titres & séparateur)
   ============================================================ */


/* ============================================================
   1. VARIABLES GLOBALES
   Modifie ces valeurs pour changer les couleurs/ombres
   sur tout le site en une seule fois.
   ============================================================ */
:root {
    /* -- Couleurs de fond -- */
    --bg-main: #0d1221;
    /* fond principal (bleu nuit) */
    --bg-section: #111827;
    /* fond des sections alternées / cartes */
    --bg-footer: #0a0f1e;
    /* fond du footer (plus sombre) */

    /* -- Couleurs de texte -- */
    --text-base: #e2e8f0;
    /* texte courant */
    --text-muted: #9ca3af;
    /* texte secondaire / descriptions */
    --text-white: #ffffff;
    /* titres */

    /* -- Couleur d'accent principale (bleu) -- */
    --accent: #3b82f6;
    --accent-light: #60a5fa;
    --accent-dark: #1d4ed8;

    /* -- Couleur d'accent secondaire (violet, cartes services) -- */
    --accent-purple: #9c5ee7;
    --accent-purple-dark: #6d28d9;

    /* -- Couleurs d'état -- */
    --color-success: #4caf50;
    --color-danger: #f44336;
    --color-warning: #ff9800;
    --color-warning-light: #ffc107;

    /* -- Typographie -- */
    --font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    /* -- Arrondis -- */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;

    /* -- Transition commune -- */
    --transition-fast: 0.3s ease;

    /* -- Ombres réutilisables -- */
    --shadow-card: 0 8px 30px rgba(0, 0, 0, 0.4);
    --shadow-card-hover: 0 15px 50px rgba(59, 130, 246, 0.3);
}


/* ============================================================
   2. RESET & STYLES DE BASE
   ============================================================ */
html {
    font-size: 62.5%;
    /* 1rem = 10px, facilite les calculs */
}

.alignItemsCenter {
    text-align: center;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-main);
    font-size: 1.6rem;
    line-height: 1.6;
    color: var(--text-base);
    background-color: var(--bg-main);
    scroll-behavior: smooth;
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--accent-light);
    text-decoration: underline;
}

strong {
    color: var(--text-white);
}

/* -- Conteneur principal -- */
.ecs-poster {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    padding: 54px 10px 60px;
    background:
        radial-gradient(900px 520px at 38% 45%, rgba(59, 130, 246, .07), transparent 70%),
        radial-gradient(700px 520px at 79% 47%, rgba(139, 92, 246, .06), transparent 72%),
        var(--bg-main);
    font-family: Inter, Montserrat, 'Segoe UI', Arial, sans-serif;
    color: var(--ecs-white);
}

/* ============================================================
   3. EN-TÊTE / NAVIGATION
   ============================================================ */
header {
    background: rgba(13, 18, 33, 0.95);
    border-bottom: 1px solid rgba(59, 130, 246, 0.3);
    color: var(--text-white);
    padding: 1rem 0;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-white);
    display: flex;
    align-items: center;
    gap: 0.8rem;
    transition: transform var(--transition-fast);
}

.logo:hover {
    transform: scale(1.02);
}

.logo-img {
    height: 66px;
    width: auto;
    /* filter: brightness(1.1); */
}

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

.nav-links li {
    position: relative;
}

.nav-links a {
    color: var(--text-base);
    text-decoration: none;
    font-weight: 500;
    font-size: 1.7rem;
    padding: 0.8rem 1.5rem;
    display: block;
    position: relative;
    transition: all var(--transition-fast);
}

.nav-links a:hover {
    color: var(--accent);
    background: rgba(59, 130, 246, 0.08);
}

/* Soulignement animé au survol des liens de nav */
.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: var(--accent);
    transition: width var(--transition-fast);
}

.nav-links a:hover::after {
    width: 80%;
}

/* Badge cybermalveillance flottant sous le header */
.badge-bar {
    position: fixed;
    top: 70px;
    left: 20px;
    z-index: 999;
}

.badge-bar img {
    width: 120px;
    height: auto;
    display: block;
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    transition: transform var(--transition-fast);
}

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


/* ============================================================
   4. FIL D'ARIANE (BREADCRUMB)
   ============================================================ */
.breadcrumb {
    margin-bottom: 2rem;
    padding: 1rem;
    background: var(--bg-section);
    border-radius: 5px;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.breadcrumb a {
    color: var(--accent);
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}


/* ============================================================
   5. SECTION HERO (bannière d'accueil)
   ============================================================ */
.hero {
    background: linear-gradient(135deg, #0d1221 0%, #111827 50%, #0f172a 100%);
    color: white;
    padding: 180px 0 100px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Halos lumineux décoratifs en fond de hero */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.hero h1 {
    font-size: 3.2rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
    letter-spacing: -1px;
    position: relative;
    z-index: 1;
    color: var(--text-white);
}

.hero h1::after {
    content: '';
    display: block;
    width: 120px;
    height: 4px;
    background: var(--accent);
    margin: 1.5rem auto 0;
    border-radius: 2px;
}

.hero h2 {
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1.8;
    margin-bottom: 2.5rem;
    opacity: 0.85;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
    color: var(--text-muted);
}


/* ============================================================
   6. BOUTONS & BADGES
   ============================================================ */
.cta-button {
    display: inline-block;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
    color: var(--text-white);
    padding: 1.2rem 3rem;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.05rem;
    transition: all var(--transition-fast);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
    position: relative;
    z-index: 1;
    border: 2px solid transparent;
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(59, 130, 246, 0.5);
    background: transparent;
    color: var(--accent);
    border-color: var(--accent);
    text-decoration: none;
}

.btn-more {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 24px;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all var(--transition-fast);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.btn-more:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
    background: linear-gradient(135deg, var(--accent-dark), var(--accent));
    text-decoration: none;
}

.badge {
    display: block;
    margin: 2rem auto 0;
    transition: transform var(--transition-fast);
}

.badge img {
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    transition: all var(--transition-fast);
    width: 150px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.badge:hover {
    transform: scale(1.05);
}


/* ============================================================
   7. SECTIONS GÉNÉRIQUES
   Bloc réutilisé pour la plupart des sections de contenu
   (chaque section paire reçoit automatiquement un fond différent)
   ============================================================ */
.section {
    padding: 100px 0;
}

.section h2 {
    text-align: center;
    font-size: 2.8rem;
    margin-bottom: 1rem;
    color: var(--text-white);
    font-weight: 700;
    letter-spacing: -0.5px;
    position: relative;
}

/* Petit trait décoratif sous les titres de section */
.section h2::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: var(--accent);
    margin: 1rem auto 0;
    border-radius: 2px;
}

.section h3 {
    text-align: center;
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--text-muted);
    max-width: 900px;
    margin: 0 auto 4rem;
    line-height: 1.8;
}

.intro-section {
    background: linear-gradient(135deg, #0d1221 0%, #111827 100%);
    padding: 80px 0;
}

.intro-section h3 {
    text-align: center;
    font-size: 1.25rem;
    line-height: 1.9;
    color: var(--text-muted);
    font-weight: 400;
    max-width: 900px;
    margin: 0 auto;
}


/* ============================================================
   8. CARTES DE SERVICE
   ============================================================ */

.service-grid {
    display: grid;
    gap: 1.5rem;
    margin-top: 5%;
    width: min(1536px, 100%);
    margin-left: auto;
    margin-right: auto;
}


/* 1 service → 100% */

.service-grid-1 {
    grid-template-columns: 1fr;
}


/* 2 services → 50% / 50% */

.service-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}


/* 3 services → 33% / 33% / 33% */

.service-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}


/* 4 services ou plus → 25% / 25% / 25% / 25% */

.service-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}


/* ============================================================
   GRILLE CYBERSÉCURITÉ
   ============================================================ */

.cyber-grid {
    display: grid;
    gap: 1.5rem;
    margin-top: 4rem;
    width: min(1536px, 100%);
    margin-left: auto;
    margin-right: auto;
}

.cyber-grid-1 {
    grid-template-columns: 1fr;
}

.cyber-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.cyber-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.cyber-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}


/* ============================================================
   CARTES
   ============================================================ */

.service-card {
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(520px 330px at 50% 95%, rgba(156, 94, 231, .17), transparent 65%),
        linear-gradient(180deg, rgba(21, 32, 55, .94), rgba(9, 20, 36, .95));
    padding: 1.8rem 2rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(156, 94, 231, 0.2);
    box-shadow: var(--shadow-card);
    transition: all 0.4s ease;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}


/* Liseré coloré */

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 0;
    background: linear-gradient(180deg,
            var(--accent-purple),
            var(--accent-purple-dark));
    transition: height 0.4s ease;
}


.service-card:hover::before {
    height: 100%;
}


.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 50px rgba(156, 94, 231, 0.3);
    border-color: var(--accent-purple);
    text-decoration: none;
}


.service-card h3 {
    color: var(--text-white);
    margin-bottom: 1rem;
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.3px;
    text-align: center;
}


.service-card:hover h3 {
    color: var(--accent-purple);
}


.service-card p {
    line-height: 1.8;
    color: var(--text-muted);
    flex-grow: 1;
    font-size: 1.5rem;
    text-align: center;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {

    .service-grid-4,
    .service-grid-3,
    .cyber-grid-4,
    .cyber-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 700px) {

    .service-grid-1,
    .service-grid-2,
    .service-grid-3,
    .service-grid-4,
    .cyber-grid-1,
    .cyber-grid-2,
    .cyber-grid-3,
    .cyber-grid-4 {
        grid-template-columns: 1fr;
    }

}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {

    .cyber-grid-4,
    .cyber-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 700px) {

    .cyber-grid-1,
    .cyber-grid-2,
    .cyber-grid-3,
    .cyber-grid-4 {
        grid-template-columns: 1fr;
    }

}

/* ============================================================
   9. GARANTIES
   ============================================================ */
.guarantees {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 4rem;
    margin-left: 3rem;
    margin-right: 3rem;
}

.guarantee-item {
    text-align: center;
    padding: 1.8rem 2rem;
    background: var(--bg-section);
    border-radius: var(--radius-md);
    border: 1px solid rgba(59, 130, 246, 0.2);
    transition: all var(--transition-fast);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.guarantee-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(59, 130, 246, 0.3);
    border-color: var(--accent);
}

.guarantee-icon {
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
    transition: transform var(--transition-fast);
}

.guarantee-item:hover .guarantee-icon {
    transform: scale(1.1);
}

.guarantee-item h3 {
    color: var(--text-white);
    margin-bottom: 1rem;
    font-size: 1.25rem;
    font-weight: 600;
}

.guarantee-item:hover h3 {
    color: var(--accent);
}

.guarantee-item p {
    color: var(--text-muted);
    line-height: 1.7;
}

/* ============================================================
   10. FORMULAIRE DE CONTACT
   ============================================================ */
.contact-form {
    max-width: 650px;
    margin: 0 auto;
    background: var(--bg-section);
    padding: 3.5rem;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(59, 130, 246, 0.2);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

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

.form-group label {
    display: block;
    margin-bottom: 0.8rem;
    font-weight: 600;
    color: var(--text-white);
    font-size: 0.95rem;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 1.1rem;
    border: 2px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    transition: all var(--transition-fast);
    background: var(--bg-main);
    color: var(--text-base);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bg-section);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.submit-btn {
    width: 100%;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
    color: white;
    padding: 1.2rem;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(59, 130, 246, 0.5);
    background: linear-gradient(135deg, var(--accent-dark) 0%, var(--accent) 100%);
}


/* ============================================================
   11. PAGES LÉGALES (mentions, CGV, confidentialité...)
   Ces règles sont scopées dans .main-content pour ne pas
   affecter les cartes et sections du reste du site.
   ============================================================ */
.main-content {
    background: var(--bg-section);
    margin: 120px auto 2rem;
    padding: 4rem;
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(59, 130, 246, 0.2);
    max-width: 1000px;
}

.main-content h1 {
    color: var(--text-white);
    font-size: 2.8rem;
    margin-bottom: 1rem;
    text-align: center;
    padding-bottom: 1.5rem;
    border-bottom: 3px solid var(--accent);
}

.main-content h2 {
    color: var(--text-white);
    font-size: 2.2rem;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    padding: 1rem 0 1rem 1.5rem;
    border-left: 5px solid var(--accent);
    background: rgba(59, 130, 246, 0.08);
    border-radius: 8px;
}

.main-content h3 {
    color: var(--accent);
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-size: 1.8rem;
}

.main-content h4 {
    color: var(--text-white);
    margin-top: 1.5rem;
    margin-bottom: 0.8rem;
    font-size: 1.6rem;
}

.main-content p {
    margin-bottom: 1.2rem;
    line-height: 1.8;
    color: var(--text-muted);
    font-size: 1.5rem;
}

.main-content ul {
    margin-left: 2rem;
    margin-bottom: 1.5rem;
    line-height: 1.8;
}

.main-content ul li {
    margin-bottom: 0.5rem;
    color: var(--text-muted);
}

/* Sommaire (table des matières) en haut des pages légales */
.toc-box {
    background: var(--bg-main);
    border: 2px solid var(--accent);
    border-radius: var(--radius-lg);
    padding: 1.8rem 2rem;
    margin: 3rem 0;
    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.2);
}

.toc-box h3 {
    color: var(--accent);
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    text-align: center;
    font-weight: 600;
}

.toc-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.toc-box li {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(59, 130, 246, 0.15);
    background: rgba(59, 130, 246, 0.05);
    margin-bottom: 0.5rem;
    border-radius: 8px;
    transition: all var(--transition-fast);
}

.toc-box li:last-child {
    border-bottom: none;
}

.toc-box li:hover {
    background: rgba(59, 130, 246, 0.15);
    transform: translateX(8px);
}

.toc-box a {
    color: var(--text-base);
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: 500;
    transition: all var(--transition-fast);
    display: block;
}

.toc-box a:hover {
    color: var(--accent);
}

/* Encadrés d'information dans les pages légales */
.important-box {
    background: rgba(59, 130, 246, 0.08);
    border: 2px solid var(--accent);
    border-left: 6px solid var(--accent);
    padding: 2rem;
    margin: 2.5rem 0;
    border-radius: var(--radius-md);
    color: var(--text-base);
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.15);
}

.important-box h4 {
    color: var(--accent);
    margin-top: 0;
}

.privacy-box {
    background: rgba(59, 130, 246, 0.05);
    border: 2px solid rgba(59, 130, 246, 0.3);
    border-left: 6px solid var(--accent);
    padding: 2rem;
    margin: 2.5rem 0;
    border-radius: var(--radius-md);
    color: var(--text-base);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.privacy-box h4 {
    color: var(--accent);
    margin-top: 0;
}

.contact-info {
    background: rgba(76, 175, 80, 0.08);
    padding: 2rem;
    border-radius: var(--radius-md);
    border-left: 6px solid var(--color-success);
    margin: 2.5rem 0;
    color: var(--text-base);
    box-shadow: 0 4px 20px rgba(76, 175, 80, 0.15);
}

.contact-info h4 {
    color: var(--color-success);
    margin-top: 0;
}

/* ============================================================
   12. TABLEAUX DE DONNÉES
   ============================================================ */
.data-table {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.data-table th,
.data-table td {
    border: 1px solid rgba(59, 130, 246, 0.2);
    padding: 1.2rem;
    text-align: center;
    color: var(--text-base);
}

.data-table th {
    background: linear-gradient(135deg, var(--accent-dark), var(--accent));
    color: white;
    font-weight: 600;
    font-size: 1.5rem;
}

.data-table tr:nth-child(even) {
    background: var(--bg-main);
}

.data-table tr:nth-child(odd) {
    background: var(--bg-section);
}

.data-table tr:hover {
    background: rgba(59, 130, 246, 0.1);
}


/* ============================================================
   13. TARIFS
   ============================================================ */
.conditions ul {
    list-style: none;
}

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

.pricing-card {
    background: var(--bg-section);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: var(--radius-md);
    padding: 1.8rem 2rem;
    text-align: center;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-card);
}

.pricing-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--accent);
}

/* Carte tarif mise en avant (offre recommandée) */
.pricing-card.featured,
.pricing-card.recommended {
    border: 2px solid var(--accent);
    box-shadow: var(--shadow-card-hover);
}

.pricing-card.recommended {
    transform: scale(1.05);
    z-index: 10;
}

.pricing-card h3 {
    color: var(--text-white);
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

.price {
    font-size: 3rem;
    color: var(--accent);
    font-weight: 700;
    margin: 1.5rem 0;
}

.price span {
    font-size: 1rem;
    color: var(--text-muted);
}

.pricing-features {
    list-style: none;
    margin: 2rem 0;
    text-align: center;
}

.pricing-features li {
    padding: 0.8rem 0;
    border-bottom: 1px solid rgba(59, 130, 246, 0.1);
    color: var(--text-muted);
}

/* Coche bleue devant chaque fonctionnalité incluse */
.pricing-features li:before {
    content: "✓ ";
    color: var(--accent);
    font-weight: bold;
    margin-right: 0.5rem;
}


/* ============================================================
   14. LOGOS PARTENAIRES (grille générique réutilisable)
   ============================================================ */
.partners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
    margin-top: 4rem;
    align-items: center;
}

.partner-logo {
    background: var(--bg-section);
    padding: 2rem;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    border: 1px solid rgba(59, 130, 246, 0.2);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    height: 120px;
    animation: fadeInUp 0.6s ease forwards;
}

.partner-logo:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
    border-color: var(--accent);
}

.partner-logo img {
    max-width: 100%;
    height: 60px;
    width: 100%;
    object-fit: contain;
    filter: brightness(1.2) contrast(1.1) saturate(1.1);
    transition: all var(--transition-fast);
}

.partner-logo:hover img {
    filter: brightness(1.3) contrast(1.15) saturate(1.2);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ============================================================
   15. PIED DE PAGE
   ============================================================ */
footer {
    background: linear-gradient(135deg, var(--bg-footer) 0%, var(--bg-main) 100%);
    color: var(--text-base);
    text-align: center;
    padding: 4rem 0 2rem;
    position: relative;
}

/* Liseré lumineux en haut du footer */
footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 3rem;
    margin-bottom: 3rem;
    text-align: center;
}

.footer-section h3 {
    margin-bottom: 1.5rem;
    color: var(--accent);
    font-weight: 600;
    font-size: 1.2rem;
}

.footer-section p {
    margin-bottom: 0.8rem;
    opacity: 0.9;
    color: var(--text-muted);
}

.footer-section a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-section a:hover {
    color: var(--accent);
}

footer a {
    color: var(--accent);
    text-decoration: none;
    transition: color var(--transition-fast);
}

footer a:hover {
    text-decoration: underline;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 2rem;
    margin-top: 3rem;
    color: var(--text-muted);
}

.footer-separator-dark {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 2rem;
    margin-top: 2rem;
}

.footer-separator-orange {
    border-top: 1px solid rgba(59, 130, 246, 0.3);
    padding-top: 2rem;
    margin-top: 2rem;
    color: var(--text-base);
}

/* ============================================================
   16. BANDEAU "PATCH DE SÉCURITÉ"
   ============================================================ */
.cyber-badge {
    width: 250px;
}

.cyber-badge-link {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.cyber-badge-img {
    height: 104px;
    width: auto;
    display: block;
    border-radius: 4px;
    transition: transform var(--transition-fast);
}

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

.contact-info-text {
    text-align: center;
    margin-bottom: 2rem;
    color: var(--text-muted);
}


/* ============================================================
   17. CLASSES UTILITAIRES
   Petites classes à usage unique, à combiner librement
   dans le HTML (couleurs, espacements, alignements...).
   ============================================================ */

/* -- Couleurs de texte -- */
.text-highlight {
    color: var(--accent);
    font-weight: 600;
}

.text-dark-link {
    color: var(--text-base);
    text-decoration: none;
}

.text-white {
    color: var(--text-white);
}

.text-orange {
    color: var(--accent);
}

/* nom conservé pour compat, couleur = accent bleu */
.text-blue-light {
    color: var(--accent-light);
}

.text-danger {
    color: var(--color-danger);
}

.text-warning {
    color: var(--color-warning);
}

.text-warning-light {
    color: var(--color-warning-light);
}

.text-success {
    color: var(--color-success);
}

.text-intro {
    text-align: center;
    color: var(--accent);
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 2rem;
}

.text-italic-gray {
    text-align: center;
    margin-top: 3rem;
    font-style: italic;
    color: var(--text-muted);
}

.text-small-gray {
    font-size: 1.2rem;
    margin-top: 1rem;
    color: var(--text-muted);
}

.copyright-text {
    font-size: 1.2rem;
    margin-top: 1rem;
    color: var(--text-muted);
}

/* -- Fonds -- */
.bg-black {
    background-color: var(--bg-main) !important;
}

.bg-dark-section {
    background: var(--bg-section);
}

/* -- Alignement & espacement -- */
.text-center {
    text-align: center;
}

.mt-1 {
    margin-top: 1rem;
}

.list-indented {
    margin-left: 2rem;
    margin-bottom: 1rem;
}

.list-indented-small {
    margin-left: 1rem;
}

.hr-orange {
    margin: 3rem 0;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.w-250 {
    width: 150px;
    max-width: 100%;
    height: auto;
}

/* -- Remplacement des styles inline (conformité CSP style-src-attr) -- */
.section-sous-header {
    padding-top: 180px;
}

/* sections sous le header fixe (ex: service.php) */
.cta-espace-haut {
    margin-top: 30px;
    display: inline-block;
}

/* boutons CTA espacés dans les pricing-cards (tarifs.php) */

/* -- Encadrés colorés réutilisables -- */
.highlight-box {
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.highlight-box.free {
    border-left: 4px solid var(--color-success);
    background: rgba(76, 175, 80, 0.08);
}

.highlight-box.urgent {
    border-left: 4px solid var(--color-danger);
    background: rgba(244, 67, 54, 0.08);
}


/* ============================================================
   18. SECTION PARTENAIRES (#partenaires)
   ============================================================ */
#partenaires {
    padding: 80px 0;
    background: var(--bg-section);
}

#partenaires h2 {
    text-align: center;
    margin-bottom: 1rem;
    font-size: 2.8rem;
    color: var(--text-white);
    font-weight: 700;
}

#partenaires h2::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: var(--accent);
    margin: 1rem auto 0;
    border-radius: 2px;
}

/* IMPORTANT : ces règles réutilisent volontairement les classes
   .partners-grid / .partner-logo (section 14) et les redéfinissent
   ici avec des valeurs différentes. Comme elles arrivent plus tard
   dans le fichier, elles ont la priorité en cascade — c'est le
   comportement d'origine, conservé tel quel pour ne rien casser. */
.partners-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    justify-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.partner-logo {
    height: 100px;
    width: 100%;
    max-width: 260px;
    padding: 20px;
    background: #1e2a3a;
}

.partner-logo:hover {
    background: #263548;
}

.partner-logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}


/* ============================================================
   19. SECTION "3 DOMAINES D'EXPERTISE" (.ecs-poster)
   ------------------------------------------------------------
   Toutes les règles sont préfixées "ecs-" et scopées dans
   .ecs-poster pour ne jamais entrer en conflit avec le reste
   du site. Ce bloc a ses propres variables (--ecs-*) pour rester
   autonome et facile à déplacer/réutiliser ailleurs.
   ============================================================ */

/* box-sizing local (au cas où le reset global serait modifié) */
.ecs-poster,
.ecs-poster * {
    box-sizing: border-box;
}

/* La section qui contient le poster doit garder le même fond,
   pour éviter toute démarcation visuelle. */
.section:has(.ecs-poster) {
    background: var(--bg-main) !important;
    padding: 0;
    padding-top: 100px;
}

/* Rapproche "Nos Engagements" des 4 cartes (padding haut réduit : 100px → 30px) */
.guarantees-section {
    padding-top: 30px;
}

/* -- Variables propres à ce bloc -- */
.ecs-poster {
    --ecs-bg: #0b2438;
    --ecs-bg2: #102f48;
    --ecs-white: #f4f7fb;
    --ecs-muted: #c9d5e5;
    --ecs-line: rgba(114, 151, 190, .28);
    --ecs-blue: #2d8cff;
    --ecs-cyan: #16c7cf;
    --ecs-purple: #9c5ee7;
    --ecs-pink: #e0407b;
    /* couleur "cyber", isolée pour réemploi facile */
    --ecs-card: #071b2b;
    --ecs-card2: #0d2539;
}

/* -- Conteneur principal -- */
.ecs-poster {
    width: 100%;
    position: relative;
    overflow: hidden;
    padding: 54px 0 60px;
    background:
        radial-gradient(900px 520px at 38% 45%, rgba(59, 130, 246, .07), transparent 70%),
        radial-gradient(700px 520px at 79% 47%, rgba(139, 92, 246, .06), transparent 72%),
        var(--bg-main);
    font-family: Inter, Montserrat, 'Segoe UI', Arial, sans-serif;
    color: var(--ecs-white);
}

/* Texture de points en fond (effet "circuit") */
.ecs-poster::before {
    content: "";
    position: absolute;
    inset: -260px auto auto -160px;
    width: 670px;
    height: 430px;
    background: radial-gradient(circle at center, rgba(41, 145, 255, .35) 1.1px, transparent 1.6px) 0 0 / 12px 12px;
    transform: rotate(-18deg);
    opacity: .24;
    filter: blur(.2px);
    pointer-events: none;
    mask-image: linear-gradient(90deg, transparent, #000 18%, #000 70%, transparent);
}

/* Lueur douce en haut du poster */
.ecs-poster::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% -20%, rgba(255, 255, 255, .08), transparent 38%);
    pointer-events: none;
}

/* -- En-tête de la section -- */
.ecs-header {
    text-align: center;
    position: relative;
    z-index: 2;
    margin-bottom: 31px;
}

.ecs-eyebrow {
    color: var(--ecs-blue);
    font-size: 24px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.ecs-h1 {
    margin: 0;
    color: #f6f7fb;
    font-size: clamp(34px, 3.35vw, 49px);
    line-height: 1.18;
    font-weight: 900;
    letter-spacing: .035em;
    text-transform: uppercase;
    text-shadow: 0 3px 18px rgba(0, 0, 0, .28);
}

/* -- Grille des cartes (matériel / logiciel / service / cyber) -- */
.ecs-cards {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    width: 100%;
}

/* -- Carte individuelle -- */
.ecs-card {
    width: 100%;
    min-width: 0;
    min-height: 674px;
    border: 1px solid rgba(124, 164, 204, .35);
    border-radius: 18px;
    background:
        radial-gradient(650px 260px at 50% 105%, rgba(43, 138, 223, .16), transparent 68%),
        linear-gradient(180deg, rgba(15, 42, 66, .92) 0%, rgba(7, 24, 40, .94) 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .02),
        0 16px 36px rgba(0, 0, 0, .2);
    position: relative;
    overflow: hidden;
    padding: 138px 24px 24px;
    display: flex;
    flex-direction: column;
    transition:
        transform .3s cubic-bezier(.22, .68, 0, 1.2),
        box-shadow .3s ease;
    cursor: default;
}

.ecs-card:hover {
    transform: scale(1.035) translateY(-6px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 28px 54px rgba(0, 0, 0, .38);
    z-index: 10;
}

/* Couleur de bordure au survol selon le type de carte */
.ecs-card.ecs-material:hover {
    border-color: rgba(45, 140, 255, .55);
}

.ecs-card.ecs-software:hover {
    border-color: rgba(22, 199, 207, .55);
}

.ecs-card.ecs-service:hover {
    border-color: rgba(156, 94, 231, .55);
}

.ecs-card.ecs-cyber:hover {
    border-color: rgba(224, 64, 123, .55);
}

/* Fond spécifique selon le type de carte */
.ecs-card.ecs-software {
    background:
        radial-gradient(520px 300px at 50% 45%, rgba(22, 199, 207, .12), transparent 68%),
        linear-gradient(180deg, rgba(9, 42, 51, .92), rgba(7, 25, 38, .94));
}

.ecs-card.ecs-service {
    background:
        radial-gradient(520px 330px at 50% 95%, rgba(156, 94, 231, .17), transparent 65%),
        linear-gradient(180deg, rgba(21, 32, 55, .94), rgba(9, 20, 36, .95));
}

.ecs-card.ecs-cyber {
    background:
        radial-gradient(520px 330px at 50% 95%, rgba(224, 64, 123, .15), transparent 65%),
        linear-gradient(180deg, rgba(40, 15, 30, .94), rgba(20, 8, 18, .95));
}

.ecs-material,
.ecs-software {
    cursor: pointer;
}

.ecs-material:hover,
.ecs-software:hover,
.ecs-service:hover,
.ecs-cyber:hover {
    transform: scale(1.03);
}

/* -- Anneau icône en haut de chaque carte -- */
.ecs-ring {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 116px;
    height: 116px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 4px solid currentColor;
    color: var(--ecs-blue);
    background: rgba(10, 28, 45, .9);
    box-shadow: 0 0 34px color-mix(in srgb, currentColor 35%, transparent), inset 0 0 25px rgba(255, 255, 255, .03);
    transition: transform .3s cubic-bezier(.22, .68, 0, 1.2), box-shadow .3s ease;
}

.ecs-card:hover .ecs-ring {
    transform: translateX(-50%) scale(1.12);
    box-shadow: 0 0 48px color-mix(in srgb, currentColor 55%, transparent), inset 0 0 25px rgba(255, 255, 255, .05);
}

.ecs-software .ecs-ring {
    color: var(--ecs-cyan);
}

.ecs-service .ecs-ring {
    color: var(--ecs-purple);
}

.ecs-cyber .ecs-ring {
    color: var(--ecs-pink);
}

.ecs-ring svg {
    width: 58px;
    height: 58px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* -- Titre de carte -- */
.ecs-card-title {
    text-align: center;
    margin: 0;
    font-size: 32px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .055em;
    color: var(--ecs-blue);
    text-transform: uppercase;
}

.ecs-software .ecs-card-title {
    color: var(--ecs-cyan);
}

.ecs-service .ecs-card-title {
    color: var(--ecs-purple);
}

.ecs-cyber .ecs-card-title {
    color: var(--ecs-pink);
}

/* -- Trait coloré sous le titre -- */
.ecs-underline {
    width: 72px;
    height: 3px;
    margin: 12px auto 27px;
    border-radius: 999px;
    background: currentColor;
    color: var(--ecs-blue);
    box-shadow: 0 0 16px currentColor;
}

.ecs-software .ecs-underline {
    color: var(--ecs-cyan);
}

.ecs-service .ecs-underline {
    color: var(--ecs-purple);
}

.ecs-cyber .ecs-underline {
    color: var(--ecs-pink);
}

/* -- Description -- */
.ecs-desc {
    height: 90px;
    text-align: center;
    color: #eef3fa;
    font-size: 18px;
    line-height: 1.38;
    margin: 0 auto 22px;
    max-width: 340px;
    font-weight: 500;
}

/* -- Liste de fonctionnalités -- */
.ecs-features li {
    display: grid;
    grid-template-columns: 38px 1fr;
    align-items: center;
    gap: 15px;
    color: #fff;
    min-height: 48px;
    border-bottom: 1px solid rgba(133, 166, 198, .17);
    font-size: 17px;
    font-weight: 530;
    letter-spacing: .004em;
}

.ecs-features svg {
    width: 32px;
    height: 32px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ecs-material .ecs-features {
    color: var(--ecs-blue);
}

.ecs-software .ecs-features {
    color: var(--ecs-cyan);
}

.ecs-service .ecs-features {
    color: var(--ecs-purple);
}

.ecs-cyber .ecs-features {
    color: var(--ecs-pink);
}

.ecs-features span {
    color: #fff;
}

/* -- Visuel matériel (image produit) -- */
.ecs-visual {
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .96;
    margin: 0 auto;
}

.ecs-visual img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 13px 20px rgba(0, 0, 0, .32));
}

/* -- Logos logiciels -- */
.ecs-logo-row {
    height: 340px;
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: center;
    justify-content: space-evenly;
    padding: 0;
    color: #f4f8ff;
}

.ecs-software-logo .ecs-winmark {
    width: 44px;
    height: 44px;
    margin: 0 auto 11px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

.ecs-software-logo .ecs-winmark i {
    display: block;
    background: #e8eff8;
    box-shadow: 0 0 9px rgba(255, 255, 255, .2);
}

.ecs-software-logo .ecs-name {
    font-size: 17px;
    font-weight: 600;
    white-space: nowrap;
}

.ecs-partner-logo {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ecs-partner-logo img {
    height: 55px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.85;
    transition: opacity 0.2s;
}

.ecs-partner-logo img:hover {
    opacity: 1;
}

/* Netgear : logo plus grand + mix-blend-mode pour effacer le fond blanc */
img[alt="Netgear"],
img[src*="netgear"] {
    height: 80px !important;
    max-width: 220px !important;
    filter: invert(1) !important;
    mix-blend-mode: screen;
}

.ecs-eset {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    filter: drop-shadow(0 0 9px rgba(255, 255, 255, .13));
}

.ecs-eset b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 30px;
    border: 2px solid #fff;
    border-radius: 6px;
    color: #fff;
    font-size: 22px;
    letter-spacing: .04em;
    font-weight: 900;
    line-height: 1;
    text-transform: lowercase;
}

.ecs-eset small {
    margin-top: 8px;
    font-size: 10px;
    letter-spacing: .33em;
    color: #dce5ef;
    text-transform: uppercase;
    line-height: 1.25;
}

/* -- Photo service -- */
.ecs-service-photo {
    margin-top: auto;
    height: 160px;
    border-radius: 0 0 18px 18px;
    overflow: hidden;
    position: relative;
    background: linear-gradient(180deg, transparent, rgba(3, 12, 22, .18));
    display: grid;
    align-items: end;
}

.ecs-service-photo::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 75px;
    background: linear-gradient(180deg, rgba(12, 24, 43, .96), transparent);
    z-index: 1;
}

.ecs-service-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    opacity: .93;
    filter: saturate(1.05) brightness(1.03);
}

/* -- Bandeau "bénéfices" en bas du poster -- */
.ecs-footer {
    position: relative;
    z-index: 2;
    margin-bottom: 16px;
    /* bandeau déplacé au-dessus des cartes : l'espace passe en dessous */
    border: 1px solid rgba(124, 164, 204, .35);
    border-radius: 18px;
    background: rgba(14, 34, 53, .75);
    display: flex;
    align-items: stretch;
    padding: 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .02), 0 14px 35px rgba(0, 0, 0, .12);
    color: #f4f7fb;
    overflow: hidden;
}

.ecs-footer::before {
    display: none;
}

.ecs-benefits {
    display: flex;
    flex-direction: row;
    flex: 3;
    /* 3 colonnes sur 4 : s'aligne sur la grille des cartes */
    justify-content: center;
    align-items: stretch;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: .035em;
}

.ecs-benefit {
    flex: 1 1 0;
    /* chaque bénéfice occupe une colonne égale */
    padding: 1.2rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-left: 1px solid rgba(209, 225, 242, .27);
    font-size: 11px;
    /* réduit une seconde fois à la demande */
    color: #fff;
    text-decoration: none;
    /* les blocs sont désormais des liens : pas de soulignement */
    text-align: center;
    /* colonnes fixes : le libellé peut passer sur 2 lignes, centré */
}

.ecs-benefit:first-child {
    border-left: none;
}

.ecs-benefit svg {
    width: 30px;
    height: 30px;
    stroke: #fff;
    fill: none;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.ecs-benefit svg.ecs-fill {
    fill: #fff;
    stroke: none;
}

/* -- Mention charte Cybermalveillance, à gauche du bandeau bénéfices -- */
.ecs-charte {
    flex: 1;
    /* 1re colonne sur 4, alignée sur la 1re carte */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.2rem 1rem;
    border-right: 1px solid rgba(209, 225, 242, .27);
    font-size: 11px;
    /* même taille que les bénéfices ; passe sur 2 lignes si besoin */
    text-transform: uppercase;
    /* même police que les bénéfices */
    font-weight: 800;
    letter-spacing: .035em;
    color: #fff;
}

.ecs-charte a {
    margin-left: .4em;
}


/* ============================================================
   20. GRILLE PARTENAIRES (pages matériel & logiciel)
   ============================================================ */

.partner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    max-width: 1000px;
    /* borne la largeur → 3 colonnes centrées (image 1) */
    margin: 3rem auto 0;
    /* centre la grille (remplace margin-top: 3rem) */
}

.partner-grid .pricing-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    padding: 2rem 1.5rem;
    min-height: 180px;
    overflow: hidden;
    text-decoration: none;
    color: #e2e8f0;
}

.partner-grid .pricing-card:hover {
    text-decoration: none;
    color: #e2e8f0;
}

/* Logos partenaires : forcés en blanc pour ressortir sur le fond sombre */
.partner-grid .pricing-card img {
    height: 70px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
    opacity: 0.85;
}

.partner-grid .pricing-card p {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.88rem;
    line-height: 1.6;
    text-align: center;
    margin: 0;
}

.partner-h1 {
    text-align: center;
}

/* Veeam : logo déjà clair, on saute l'inversion */
img[alt="Veeam"] {
    filter: brightness(1.2) !important;
    opacity: 0.9 !important;
}

/* ============================================================
   21. BLOC DE CONTACT "WYSAM"
   ============================================================ */
.contact-section {
    background: var(--bg-main);
}

.contact-wysam {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
    background: linear-gradient(180deg, rgba(21, 32, 55, .94), rgba(9, 20, 36, .95));
    border: 1px solid rgba(59, 130, 246, 0.25);
    border-radius: var(--radius-lg);
    padding: 3.5rem 3rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.contact-wysam:hover {
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 14px 50px rgba(59, 130, 246, 0.2);
}

.contact-wysam-icon {
    font-size: 3rem;
    color: var(--accent);
    margin-bottom: 1.5rem;
    filter: drop-shadow(0 0 12px rgba(59, 130, 246, 0.5));
}

.contact-wysam h3 {
    color: var(--text-white);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-align: center;
}

.contact-wysam p {
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 2rem;
    font-size: 1rem;
}

.contact-wysam .cta-button {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 1rem;
}


/* ============================================================
   22. MEDIA QUERIES RESPONSIVES
   Regroupées ici par taille d'écran (du plus large au plus
   étroit) pour repérer facilement tous les ajustements mobiles.
   ============================================================ */

/* -- Tablettes (≤ 1300px) -- */
@media (max-width: 1300px) {
    .ecs-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* -- Petites tablettes (≤ 1050px) -- */
@media (max-width: 1050px) {
    .ecs-poster {
        padding: 34px 20px;
        min-height: auto;
    }

    .ecs-cards {
        grid-template-columns: 1fr;
    }

    .ecs-card {
        min-height: 650px;
    }

    .ecs-footer {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 28px;
        text-align: center;
    }

    .ecs-divider {
        display: none;
    }

    .ecs-slogan {
        padding-left: 0;
    }

    .ecs-benefits {
        grid-template-columns: 1fr;
        height: auto;
        gap: 8px;
    }

    .ecs-benefit {
        border: 0;
    }

    .ecs-charte {
        border-right: 0;
        justify-content: center;
        text-align: center;
    }

    .ecs-brand {
        margin: auto;
    }

    .ecs-eyebrow {
        font-size: 18px;
    }
}

/* -- Petits écrans / tablettes portrait (≤ 1024px) -- */
@media (max-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* -- Mobile (≤ 768px) -- */
@media (max-width: 768px) {

    /* Navigation */
    .nav-links {
        display: none;
    }

    .logo {
        font-size: 1.2rem;
    }

    .logo-img {
        height: 40px;
    }

    /* Hero */
    .hero {
        padding: 140px 0 80px;
    }

    .hero h1 {
        font-size: 2.2rem;
    }

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

    /* Sections génériques */
    .section {
        padding: 60px 0;
    }

    .section h2 {
        font-size: 2.2rem;
    }

    /* Grilles */
    .services-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* Formulaire / contenu légal */
    .contact-form {
        padding: 2rem;
    }

    .main-content {
        margin: 100px 1rem 1rem;
        padding: 2rem 1.5rem;
    }

    .main-content h1 {
        font-size: 2.4rem;
    }

    .main-content h2 {
        font-size: 1.9rem;
        padding-left: 1rem;
    }

    .toc-box {
        padding: 1.5rem;
    }

    .toc-box h3 {
        font-size: 1.6rem;
    }

    .toc-box li {
        padding: 0.8rem 1rem;
    }

    .footer-content {
        text-align: center;
    }

    .data-table {
        font-size: 1.3rem;
    }

    .data-table th,
    .data-table td {
        padding: 0.8rem;
    }

    /* Section partenaires */
    .partners-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }

    .partner-logo {
        height: 80px;
        padding: 15px;
        max-width: 100%;
    }

    #partenaires h2 {
        font-size: 2.2rem;
        margin-bottom: 2rem;
    }

    /* Bloc contact Wysam */
    .contact-wysam {
        padding: 2.5rem 1.5rem;
    }
}

/* -- Petit mobile (≤ 480px) -- */
@media (max-width: 480px) {
    .partners-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .partner-logo {
        height: 70px;
        padding: 12px;
        max-width: 100%;
    }

    #partenaires {
        padding: 60px 0;
    }

    #partenaires h2 {
        font-size: 2rem;
        margin-bottom: 1.5rem;
    }
}

.contact-page {
    text-align: center;
    padding-top: 160px;
}

/* TITRE */
.contact-title {
    font-size: 3rem;
    color: var(--text-white);
    font-weight: 700;
    margin-bottom: 10px;
}

.contact-underline {
    width: 100px;
    height: 4px;
    background: var(--accent);
    margin: 0 auto 50px;
    border-radius: 10px;
}

/* CARD PRINCIPALE */
.contact-card {
    max-width: 850px;
    margin: auto;
    padding: 60px 50px;
    border-radius: 18px;

    background: linear-gradient(180deg, rgba(21, 32, 55, 0.95), rgba(9, 20, 36, 0.95));
    border: 1px solid rgba(59, 130, 246, 0.25);

    box-shadow: 0 15px 60px rgba(0, 0, 0, 0.6);
}

/* LOGO WYSAM */
.contact-wysam-logo {
    width: 220px;
    margin-bottom: 25px;
}

/* CADENAS */
.contact-lock {
    font-size: 3rem;
    color: var(--accent);
    margin-bottom: 15px;
    filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.6));
}

/* TITRE SOUS LOGO */
.contact-subtitle {
    color: var(--text-white);
    font-size: 1.6rem;
    margin-bottom: 15px;
}

/* TEXTE */
.contact-text {
    color: var(--text-muted);
    max-width: 600px;
    margin: auto;
    line-height: 1.7;
}

/* BOUTON NEON EXACT IMAGE */
.contact-button {
    display: inline-block;
    margin-top: 40px;
    padding: 16px 42px;

    border-radius: 999px;
    text-decoration: none;

    font-weight: 600;
    color: white;

    background: linear-gradient(135deg, #3b82f6, #1d4ed8);

    box-shadow: 0 0 15px rgba(59, 130, 246, 0.45);

    transition: all 0.3s ease;
}

.contact-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 35px rgba(59, 130, 246, 0.9);
}

.big-cta {
    padding: 18px 55px !important;
    font-size: 1.2rem !important;
}



/* ------------------------------------------------------------
   23. BLOG
   Styles propres à la page newsletter
   Préfixe : .blog-
   Couleurs héritées des variables de main.css
   ------------------------------------------------------------ */


/* ============================================================
   PAGE
   ============================================================ */

.blog-page {

    padding: 140px 2rem 80px;

    max-width: 1400px;

    margin: 0 auto;
}


/* ============================================================
   EN-TÊTE DU BLOG
   ============================================================ */

.blog-header {

    background: var(--bg-section);

    border: 1px solid rgba(59, 130, 246, 0.2);

    border-radius: var(--radius-lg);

    padding: 2.5rem 3rem;

    margin-bottom: 4rem;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 2rem;

    flex-wrap: wrap;

    box-shadow: var(--shadow-card);
}


/* ============================================================
   BADGE
   ============================================================ */

.blog-badge {

    display: inline-flex;

    align-items: center;

    gap: 0.6rem;

    background: rgba(59, 130, 246, 0.12);

    border: 1px solid rgba(59, 130, 246, 0.3);

    color: var(--accent);

    font-size: 1.2rem;

    font-weight: 600;

    padding: 0.4rem 1.2rem;

    border-radius: 999px;

    margin-bottom: 1.2rem;
}


.blog-badge::before {

    content: "";

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: var(--accent);
}


/* ============================================================
   TITRE DU BLOG
   ============================================================ */

.blog-header h1 {

    color: var(--text-white);

    font-size: 3.2rem;

    font-weight: 700;

    margin-bottom: 0.8rem;
}


.blog-header p {

    color: var(--text-muted);

    font-size: 1.5rem;

    max-width: 500px;
}


/* ============================================================
   RECHERCHE
   ============================================================ */

.blog-search {

    display: flex;

    gap: 1rem;

    flex-shrink: 0;
}


.blog-search input {

    width: 300px;

    max-width: 100%;

    padding: 1.1rem 1.5rem;

    border: 2px solid rgba(59, 130, 246, 0.2);

    border-radius: var(--radius-sm);

    background: var(--bg-main);

    color: var(--text-base);

    font-size: 1.4rem;

    font-family: inherit;

    transition: all var(--transition-fast);
}


.blog-search input:focus {

    outline: none;

    border-color: var(--accent);

    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}


.blog-search button {

    padding: 1.1rem 2.4rem;

    border: none;

    border-radius: var(--radius-sm);

    background:
        linear-gradient(135deg,
            var(--accent) 0%,
            var(--accent-dark) 100%);

    color: var(--text-white);

    font-size: 1.4rem;

    font-weight: 600;

    cursor: pointer;

    transition: all var(--transition-fast);

    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}


.blog-search button:hover {

    transform: translateY(-2px);

    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5);
}


/* ============================================================
   THÈME
   ============================================================ */

.blog-theme {

    margin-bottom: 5rem;
}


/* ============================================================
   TITRE DU THÈME
   ============================================================ */

.theme-title {

    position: relative;

    color: var(--text-white);

    font-size: 2.4rem;

    font-weight: 700;

    margin: 0 0 2rem;

    padding-left: 1.5rem;
}


.theme-title::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0.25rem;

    bottom: 0.25rem;

    width: 5px;

    border-radius: 999px;

    background:
        linear-gradient(180deg,
            var(--accent),
            var(--accent-dark));
}


/* ============================================================
   GRILLE DES ARTICLES
   ============================================================ */

.blog-grid {

    display: grid;

    gap: 2.5rem;

    width: 100%;

    align-items: stretch;

    margin-bottom: 2rem;
}


/* ============================================================
   1 ARTICLE
   → 100% DE LARGEUR
   ============================================================ */

.blog-grid-1 {

    grid-template-columns: minmax(0, 1fr);
}


/* ============================================================
   2 ARTICLES
   → 50% / 50%
   ============================================================ */

.blog-grid-2 {

    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}


/* ============================================================
   3 ARTICLES
   → 33.33% / 33.33% / 33.33%
   ============================================================ */

.blog-grid-3 {

    grid-template-columns:
        repeat(3, minmax(0, 1fr));
}


/* ============================================================
   4 ARTICLES OU PLUS
   → 25% / 25% / 25% / 25%
   ============================================================ */

.blog-grid-4 {

    grid-template-columns:
        repeat(4, minmax(0, 1fr));
}


/* ============================================================
   CARTE ARTICLE
   ============================================================ */

.blog-card {

    display: flex;

    flex-direction: column;

    min-width: 0;

    height: 100%;

    background: var(--bg-section);

    border: 1px solid rgba(59, 130, 246, 0.2);

    border-radius: var(--radius-md);

    overflow: hidden;

    box-shadow: var(--shadow-card);

    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        border-color var(--transition-fast);
}


.blog-card:hover {

    transform: translateY(-6px);

    box-shadow: var(--shadow-card-hover);

    border-color: var(--accent);
}


/* ============================================================
   IMAGE
   ============================================================ */

.blog-card-img {

    height: 200px;

    flex-shrink: 0;

    background:
        linear-gradient(135deg,
            var(--bg-main),
            var(--bg-section));

    overflow: hidden;
}


.blog-card-img img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;
}


/* ============================================================
   PLACEHOLDER IMAGE
   ============================================================ */

.blog-card-img .blog-img-placeholder {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--accent);

    font-size: 4rem;

    opacity: 0.4;
}


/* ============================================================
   CONTENU DE LA CARTE
   ============================================================ */

.blog-card-body {

    display: flex;

    flex-direction: column;

    flex-grow: 1;

    padding: 1.8rem 2rem 2rem;
}


/* ============================================================
   DATE
   ============================================================ */

.blog-card-date {

    display: inline-flex;

    align-items: center;

    gap: 0.6rem;

    align-self: flex-start;

    background: rgba(59, 130, 246, 0.1);

    border: 1px solid rgba(59, 130, 246, 0.25);

    color: var(--text-muted);

    font-size: 1.15rem;

    padding: 0.3rem 1rem;

    border-radius: 999px;

    margin-bottom: 1.2rem;
}


.blog-card-date::before {

    content: "";

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: var(--accent);
}


/* ============================================================
   TITRE ARTICLE
   ============================================================ */

.blog-card h3 {

    color: var(--text-white);

    font-size: 1.7rem;

    font-weight: 700;

    line-height: 1.4;

    margin-bottom: 1rem;
}


/* ============================================================
   DESCRIPTION
   ============================================================ */

.blog-card p {

    color: var(--text-muted);

    font-size: 1.35rem;

    line-height: 1.7;

    flex-grow: 1;

    margin-bottom: 1.8rem;

    display: -webkit-box;

    -webkit-line-clamp: 3;

    -webkit-box-orient: vertical;

    overflow: hidden;
}


/* ============================================================
   BOUTON ARTICLE
   ============================================================ */

.blog-read-btn {

    display: block;

    width: 100%;

    text-align: center;

    padding: 1rem;

    border: 2px solid rgba(59, 130, 246, 0.4);

    border-radius: var(--radius-sm);

    color: var(--accent);

    font-size: 1.4rem;

    font-weight: 600;

    text-decoration: none;

    transition: all var(--transition-fast);
}


.blog-read-btn:hover {

    background: var(--accent);

    color: var(--text-white);

    text-decoration: none;

    border-color: var(--accent);
}


/* ============================================================
   AUCUN ARTICLE / ERREUR
   ============================================================ */

.blog-empty {

    width: 100%;

    text-align: center;

    color: var(--text-muted);

    font-size: 1.5rem;

    padding: 5rem 2rem;

    background: var(--bg-section);

    border: 1px solid rgba(59, 130, 246, 0.2);

    border-radius: var(--radius-md);
}


/* ============================================================
   TABLETTE LARGE
   ============================================================ */

@media (max-width: 1100px) {


    /*
     * 4 articles :
     * 4 colonnes → 2 colonnes
     */

    .blog-grid-4 {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    /*
     * 3 articles :
     * 3 colonnes → 2 colonnes
     */

    .blog-grid-3 {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .blog-page {

        max-width: 1200px;
    }

}


/* ============================================================
   TABLETTE
   ============================================================ */

@media (max-width: 768px) {


    .blog-page {

        padding: 120px 1.5rem 60px;
    }


    .blog-header {

        padding: 2rem;

        margin-bottom: 3rem;
    }


    .blog-header h1 {

        font-size: 2.4rem;
    }


    .blog-header p {

        font-size: 1.35rem;
    }


    /*
     * Recherche pleine largeur
     */

    .blog-search {

        width: 100%;
    }


    .blog-search input {

        width: 100%;

        flex-grow: 1;
    }


    /*
     * Sur tablette :
     * toutes les grilles passent en 2 colonnes
     */

    .blog-grid-2,
    .blog-grid-3,
    .blog-grid-4 {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .theme-title {

        font-size: 2.1rem;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 600px) {


    .blog-page {

        padding-left: 1rem;

        padding-right: 1rem;
    }


    .blog-header {

        padding: 1.5rem;

        gap: 1.5rem;
    }


    .blog-header h1 {

        font-size: 2.1rem;
    }


    .blog-search {

        flex-direction: column;

        width: 100%;
    }


    .blog-search input {

        width: 100%;
    }


    .blog-search button {

        width: 100%;
    }


    /*
     * Mobile :
     * une seule carte par ligne
     */

    .blog-grid-1,
    .blog-grid-2,
    .blog-grid-3,
    .blog-grid-4 {

        grid-template-columns: 1fr;
    }


    .blog-grid {

        gap: 1.8rem;
    }


    .blog-theme {

        margin-bottom: 4rem;
    }


    .theme-title {

        font-size: 1.9rem;

        margin-bottom: 1.5rem;
    }


    .blog-card-img {

        height: 190px;
    }


    .blog-card-body {

        padding: 1.5rem;
    }


    .blog-card h3 {

        font-size: 1.6rem;
    }


    .blog-card p {

        font-size: 1.3rem;
    }

}




/* ============================================================
   24. Responsive
   RESPONSIVE.CSS
   À charger APRÈS main.css (il écrase certaines de ses règles)
   ============================================================ */

/* ---------- BOUTON BURGER (masqué en desktop) ---------- */
.burger-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
}

.burger-bar {
    display: block;
    width: 26px;
    height: 3px;
    border-radius: 2px;
    background: var(--text-white);
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}

/* Animation du burger en croix quand le menu est ouvert */
.burger-btn.burger-active .burger-bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.burger-btn.burger-active .burger-bar:nth-child(2) {
    opacity: 0;
}

.burger-btn.burger-active .burger-bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* ============================================================
   HEADER RESPONSIVE (<= 768px)
   ============================================================ */
@media (max-width: 768px) {

    nav {
        padding: 0 1rem;
    }

    /* On affiche le bouton burger */
    .burger-btn {
        display: flex;
    }

    /* On réduit le badge cybermalveillance pour laisser la place */
    .cyber-badge-img {
        height: 72px;
    }

    /* Menu déroulant : on écrase le "display:none" de main.css.
       Fermé par défaut (replié), déroulé quand .nav-open est présent. */
    .nav-links {
        display: flex;
        flex-direction: column;
        gap: 0;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        background: rgba(13, 18, 33, 0.98);
        border-bottom: 1px solid rgba(59, 130, 246, 0.3);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);

        /* État fermé */
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
        transition: max-height var(--transition-fast), opacity var(--transition-fast);
    }

    /* État ouvert (classe ajoutée par burger.js) */
    .nav-links.nav-open {
        max-height: 80vh;
        opacity: 1;
        pointer-events: auto;
    }

    .nav-links li {
        width: 100%;
        border-top: 1px solid rgba(59, 130, 246, 0.15);
    }

    .nav-links a {
        font-size: 1.2rem;
        padding: 1rem 1.5rem;
        text-align: center;
    }
}

/* ============================================================
   SITE RESPONSIVE (visuel global)
   ============================================================ */

/* ----- Conteneur centré (n'avait aucune règle) ----- */
.container {
    width: 100%;
    max-width: 1536px;
    margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* ----- Grilles principales : passage fluide ----- */
@media (max-width: 1024px) {
    .cyber-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .guarantees {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {

    /* Bloc poster qui débordait (width: max-content + translateX) */
    .ecs-poster {
        width: 100%;
        left: auto;
        transform: none;
    }

    .ecs-cards {
        grid-template-columns: 1fr;
    }

    .ecs-card {
        min-width: 0;
    }

    .cyber-grid,
    .guarantees {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 480px) {
    .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}


/* ============================================================
   25. PAGES LÉGALES — COMPLÉMENTS (CGV, RGPD, mentions)
   Petit jeu de classes dédié à la mise en page des documents
   juridiques. Réutilise les variables du thème (section 1).
   ============================================================ */

/* -- Grille de cartes (prestations, engagements, contacts...) -- */
.legal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.2rem;
    margin: 2rem 0;
}

.legal-card {
    background: var(--bg-main);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: 1.5rem 1.8rem;
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.legal-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.2);
}

.legal-card h4 {
    color: var(--text-white);
    font-size: 1.5rem;
    margin: 0 0 0.5rem;
}

.legal-card h4 i {
    color: var(--accent);
    margin-right: 0.7rem;
}

.legal-card p {
    color: var(--text-muted);
    font-size: 1.35rem;
    line-height: 1.6;
    margin: 0;
}

/* -- Listes à icônes (sans puces, icône accentuée) -- */
.icon-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

.main-content .icon-list {
    margin-left: 0;
    /* neutralise le retrait générique des ul de .main-content */
}

.icon-list li {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid rgba(59, 130, 246, 0.12);
    color: var(--text-muted);
    font-size: 1.45rem;
    line-height: 1.6;
}

.icon-list li:last-child {
    border-bottom: none;
}

.icon-list li>i {
    color: var(--accent);
    flex-shrink: 0;
    width: 2rem;
    text-align: center;
}

/* -- Encadré d'avertissement (clauses sensibles : pénalités, plafonds...) -- */
.warning-box {
    background: rgba(244, 67, 54, 0.07);
    border: 1px solid rgba(244, 67, 54, 0.35);
    border-left: 6px solid var(--color-danger);
    border-radius: var(--radius-md);
    padding: 1.8rem 2rem;
    margin: 2.5rem 0;
    color: var(--text-base);
}

.warning-box h4 {
    color: var(--color-danger);
    margin-top: 0;
}

/* -- Badges (référentiels, certifications) -- */
.legal-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin: 1.5rem 0;
}

.legal-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.35);
    color: var(--accent-light);
    font-size: 1.3rem;
    font-weight: 600;
    padding: 0.5rem 1.4rem;
    border-radius: 999px;
    white-space: nowrap;
}

.legal-badge i {
    color: var(--accent);
}

/* -- Étapes numérotées (processus de résolution amiable) -- */
.legal-steps {
    counter-reset: etape;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.2rem;
    row-gap: 2.4rem;
    margin: 2.8rem 0 2rem;
}

.legal-step {
    counter-increment: etape;
    position: relative;
    background: var(--bg-main);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: var(--radius-sm);
    padding: 1.8rem 1.5rem 1.5rem;
}

.legal-step::before {
    content: counter(etape);
    position: absolute;
    top: -1.4rem;
    left: 1.5rem;
    width: 2.8rem;
    height: 2.8rem;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: var(--text-white);
    font-weight: 700;
    font-size: 1.4rem;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.legal-step h5 {
    color: var(--text-white);
    font-size: 1.45rem;
    margin: 0.4rem 0 0.5rem;
}

.legal-step p {
    color: var(--text-muted);
    font-size: 1.3rem;
    line-height: 1.55;
    margin: 0;
}

/* -- Bloc de version / métadonnées du document -- */
.legal-meta {
    margin-top: 3rem;
    padding: 1.5rem 2rem;
    background: var(--bg-main);
    border: 1px dashed rgba(59, 130, 246, 0.3);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 1.3rem;
    text-align: center;
    line-height: 1.8;
}


/* ============================================================
   IMAGES / LOGOS DES CARDS (Services & Cybersécurité)
   Image centrée au-dessus du titre, taille lisible, jamais rognée.
   Utilisé par pages/service.php et pages/cybersecurite.php.
   ============================================================ */
.card-image {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.4rem;
}

.card-image img {
    max-width: 100%;
    max-height: 110px;
    object-fit: contain;
    display: block;
    border-radius: 8px;
}


/* ============================================================
   25. PAGE ASSISTANCE (icônes de titres & séparateur)
   ============================================================ */

/* Icônes SVG encadrant les titres : la taille est fixée en dur dans
   le HTML (attributs width/height). Ici uniquement couleur et marges. */
.icone-titre {
    margin: 0 1rem;
    color: var(--accent);
}

/* Variante violette : rappelle la couleur d'accent des cartes de service */
.icone-titre-violet {
    color: var(--accent-purple);
}

/* Séparateur horizontal entre les deux sections d'assistance :
   trait dégradé discret + grand espacement vertical pour aérer
   la transition après la dernière carte de la première grille. */
.separateur-section {
    width: min(900px, 90%);
    margin: 7rem auto 6rem;
    border: none;
    height: 1px;
    background: linear-gradient(90deg,
            transparent,
            rgba(156, 94, 231, 0.5),
            transparent);
}

/* Titre de la section post-incident : espacement sous le titre
   (le trait décoratif ::after de .section h2 reste appliqué) */
.titre-section-assistance {
    margin-bottom: 2.5rem;
}

/* Paragraphe d'introduction de la section : largeur limitée et
   interlignage confortable pour la lisibilité */
.intro-section-assistance {
    max-width: 900px;
    margin: 0 auto;
    line-height: 1.9;
    color: var(--text-muted);
}

@media (max-width: 768px) {
    .icone-titre {
        margin: 0 0.6rem;
    }

    .separateur-section {
        margin: 5rem auto 4rem;
    }
}

/*** THÈME TITRE CENTRÉ & ESPACÉ ***/
.theme-title {
    color: #f26522;
    font-size: 1.6rem;
    text-align: center;
    margin: 3rem auto 1.5rem;
    padding-bottom: 1rem;
    border: none;
    border-bottom: 3px solid #f26522;
    font-weight: 700;
}


/* ============================================================
   26. LISIBILITÉ & PRÉSENTATION DES PAGES À THÈMES
   Bloc ajouté en fin de fichier, donc appliqué en dernier.

   PAGES COUVERTES (8) et point d'accroche utilisé pour chacune :

     assistance.php    .section-sous-header
     maintenance.php   .section-sous-header
     securisation.php  .section-sous-header
     service.php       .section-sous-header
     cybersecurite.php .section--cyber
     logiciel.php      .section:has(.partner-grid)
     materiel.php      .section:has(.partner-grid)
     newsletter.php    .blog-theme

   Toutes les règles sont préfixées par l'un de ces quatre
   sélecteurs, tous déjà présents dans le HTML : aucune
   modification de balisage n'est nécessaire, sauf materiel.php
   dont les titres de thèmes n'ont aucune classe.

   Aucune règle existante de ce fichier n'est modifiée : les
   surcharges se font uniquement par spécificité et par ordre de
   déclaration. Les composants propres aux autres pages
   (.blog-card, .pricing-card, .blog-header) ne sont pas touchés.

   Rappel : html { font-size: 62.5% }, donc 1rem = 10px.
   ============================================================ */


/* ============================================================
   26.1 DÉGAGEMENT DU HEADER FIXE

   header est en position: fixed (L154). Les pages en
   .section-sous-header ont 180px de padding-top (L1360), mais
   cybersecurite.php (.section--cyber) n'a aucune règle et
   retombe sur les 100px de .section : son titre passe presque
   sous le header.

   logiciel.php et materiel.php portent style="padding-top:180px"
   en attribut HTML. Or ce fichier indique L1357 que les styles
   inline ont été retirés pour cause de CSP style-src-attr : si
   cette directive est bloquée, ce padding n'est pas appliqué.
   La règle CSS ci-dessous garantit le dégagement dans les deux
   cas, sans qu'il soit nécessaire de toucher au HTML.
   ============================================================ */

.section--cyber,
.section:has(.partner-grid) {
    padding-top: 180px;
}


/* ============================================================
   26.2 TITRES PRINCIPAUX

   Objectif commun : 34px, blanc, centré, avec une marge basse.
   Chaque page utilise un balisage différent, d'où trois règles.
   .blog-header h1 de newsletter.php est déjà stylé (L2556) et
   n'est pas touché.
   ============================================================ */


/* ------------------------------------------------------------
   assistance / maintenance / securisation / service

   Aucune règle de ce fichier ne ciblait ces h1 : les règles h1
   existantes sont .hero h1 (L297), .main-content h1 (L799),
   .blog-header h1 (L2556) et .partner-h1 (L2089, alignement
   seul). Ils s'affichaient donc en taille navigateur par
   défaut, en gris --text-base, et sans marge basse — le
   paragraphe d'introduction était collé au titre.

   Le flex remplace le simple text-align de .alignItemsCenter et
   aligne verticalement les icônes SVG d'assistance.php, qui se
   posaient sur la ligne de base du texte. Aucune règle de ce
   fichier ne génère de ::after sur un h1, le flex est donc sans
   effet de bord ici.
   ------------------------------------------------------------ */

.section-sous-header h1 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.4rem;

    font-size: 3.4rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.5px;
    color: var(--text-white);

    margin: 0 auto 2.8rem;
    max-width: 100%;

    /* Équilibre les lignes d'un titre qui passe sur deux lignes */
    text-wrap: balance;
}


/* Icônes du h1 : agrandies pour rester lisibles face à un titre
   de 34px. Les attributs width/height du HTML valent 20, le CSS
   les surcharge sans toucher au balisage. La marge horizontale
   de .icone-titre (L3646) est neutralisée, le gap la remplace. */

.section-sous-header h1 .icone-titre {
    width: 2.6rem;
    height: 2.6rem;
    margin: 0;
    flex-shrink: 0;
}


/* ------------------------------------------------------------
   cybersecurite.php

   Son titre principal est un h2.category-title, classe qui n'a
   AUCUNE règle dans ce fichier : il ne s'affichait que par
   effet de bord, via .section h2 (L410, 2.8rem).

   Pas de display: flex ici, contrairement au h1 ci-dessus : le
   tiret décoratif .section h2::after (L421) est conservé, et un
   ::after dans un conteneur flex deviendrait un élément de la
   même ligne que le texte au lieu de rester dessous. L'icône
   FontAwesome est un <i> en ligne, elle s'aligne correctement
   sans flex.
   ------------------------------------------------------------ */

.section--cyber .category-title {
    font-size: 3.4rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.5px;
    color: var(--text-white);
    text-align: center;
    text-wrap: balance;
    margin: 0 auto 2.4rem;
}


/* ------------------------------------------------------------
   logiciel.php / materiel.php

   .partner-h1 (L2089) ne définit que text-align: center : même
   problème de taille par défaut que les h1 ci-dessus.
   materiel.php doit recevoir cette classe, voir la note en fin
   de bloc.
   ------------------------------------------------------------ */

.section:has(.partner-grid) .partner-h1 {
    font-size: 3.4rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.5px;
    color: var(--text-white);
    text-align: center;
    text-wrap: balance;
    margin: 0 auto 2.4rem;
    max-width: 100%;
}


/* ============================================================
   26.3 PARAGRAPHES D'INTRODUCTION

   Ils occupaient toute la largeur de .container (max-width
   1536px), soit des lignes de plus de 200 caractères. Largeur
   ramenée à une mesure lisible sur les trois balisages.
   ============================================================ */

.section-sous-header > .container > p,
.section--cyber .section-subtitle,
.section:has(.partner-grid) .text-intro {
    max-width: 76ch;
    margin-left: auto;
    margin-right: auto;

    font-size: 1.7rem;
    line-height: 1.85;
}


/* .section-subtitle n'a aucune règle dans ce fichier, sa couleur
   est donc fixée ici. .text-intro (L1293) garde son bleu
   d'origine, seule sa largeur de ligne change. */

.section-sous-header > .container > p,
.section--cyber .section-subtitle {
    color: var(--text-base);
}


/* Le paragraphe post-incident d'assistance.php reste plus
   discret que le premier, conformément à
   .intro-section-assistance (L3677) */

.section-sous-header > .container > p.intro-section-assistance {
    color: var(--text-muted);
    margin-top: 2.2rem;
}


/* ============================================================
   26.4 TITRES DE THÈMES — .theme-title

   Sur les 7 pages qui utilisent cette classe, jusqu'à trois
   décorations se superposaient sur le même élément :

     - .theme-title::before (L2691) : barre verticale de 5px
       calée à left: 0, donc détachée d'un texte centré ;
     - .section h2::after (L421) : tiret de 80px ;
     - .theme-title (L3701) : trait orange en border-bottom,
       étiré sur toute la largeur du conteneur, ce qui le fait
       lire comme un séparateur de section et non comme le
       soulignement d'un titre.

   Une seule est conservée : le trait orange, déjà présent dans
   le thème, ramené à la largeur du texte par width: fit-content.

   Taille : .section h2 (L410) imposait 2.8rem au titre de thème
   ET aux titres de cartes, les deux niveaux étaient donc
   identiques. La règle .theme-title { font-size: 1.6rem }
   (L3696) n'a jamais pu s'appliquer, sa spécificité (0,1,0)
   étant inférieure à celle de .section h2 (0,1,1). C'est la
   cause principale de l'illisibilité.

   Cas particulier de newsletter.php : ses .theme-title sont
   dans main.blog-page, hors de .section, donc sans le tiret
   ::after — mais avec la barre verticale et une taille de 16px.
   La même règle corrige les deux situations.
   ============================================================ */

:is(.section-sous-header,
    .section--cyber,
    .blog-theme,
    .section:has(.partner-grid)) .theme-title {

    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.1rem;

    /* Le trait orange s'arrête à la fin du texte */
    width: fit-content;
    max-width: 100%;

    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0;
    text-align: center;
    text-wrap: balance;
    color: var(--text-white);

    /* Le padding-left: 1.5rem de L2686 décalait le titre vers la
       droite. 1.5rem en bas = air entre le texte et son trait. */
    padding: 0 0 1.5rem;

    border: none;
    border-bottom: 3px solid #f26522;

    /* RYTHME VERTICAL, appliqué sur toutes les pages :
       70px au-dessus du titre, ce qui sépare les blocs ;
       40px en dessous du trait orange, ce qui rattache le titre
       à SES cartes. Le rapport 70/40 est ce qui rend les groupes
       lisibles : le titre est visiblement plus proche de ses
       cartes que du bloc précédent. */
    margin: 7rem auto 4rem;
}


/* Barre verticale parasite */

:is(.section-sous-header,
    .section--cyber,
    .blog-theme,
    .section:has(.partner-grid)) .theme-title::before {
    display: none;
}


/* Tiret hérité de .section h2::after */

:is(.section-sous-header,
    .section--cyber,
    .blog-theme,
    .section:has(.partner-grid)) .theme-title::after {
    display: none;
}


/* Icônes du titre de thème : marge neutralisée au profit du gap,
   taille harmonisée avec un titre de 26px */

:is(.section-sous-header,
    .section--cyber,
    .blog-theme,
    .section:has(.partner-grid)) .theme-title .icone-titre {
    width: 2.1rem;
    height: 2.1rem;
    margin: 0;
    flex-shrink: 0;
}


/* Premier titre de thème de la page. Il suit soit le paragraphe
   d'introduction (assistance, maintenance, securisation,
   logiciel, cybersecurite), soit directement le h1 (service,
   materiel) : marge réduite pour ne pas ouvrir un trou en haut
   de page. */

:is(.section-sous-header,
    .section--cyber,
    .section:has(.partner-grid)) :is(h1, h2, p) + .theme-title {
    margin-top: 5rem;
}


/* assistance.php : après le séparateur, la marge de
   .separateur-section (L3659) suffit, on évite le cumul */

.section-sous-header .separateur-section + .theme-title {
    margin-top: 0;
}


/* ------------------------------------------------------------
   assistance.php : titre de section « Assistance post-incident »

   Il portait exactement le même style que les sous-thèmes, alors
   qu'il est d'un niveau supérieur. Il est ciblé sans toucher au
   HTML, par le seul élément qui le différencie : ses icônes
   .icone-titre-violet.

   Le trait passe en violet, couleur de ses propres icônes et des
   bordures de cartes, donc dans la palette existante.

   Pour annuler cette distinction, supprimer ce bloc et ses deux
   équivalents dans les media queries en 26.7.
   ------------------------------------------------------------ */

.section-sous-header .theme-title:has(.icone-titre-violet) {
    font-size: 3rem;
    border-bottom-color: var(--accent-purple);

    /* Ce titre est suivi d'un paragraphe, pas d'une grille. Sa
       marge haute vient de .separateur-section, voir la règle
       .separateur-section + .theme-title ci-dessus. */
    margin-bottom: 3rem;
}


/* ============================================================
   26.5 GRILLES

   .service-grid utilise margin-top: 5% (L465), qui se calcule
   sur la LARGEUR du conteneur : l'écart titre/cartes variait
   donc avec la taille de l'écran, d'où les espacements
   incohérents. Même principe pour .cyber-grid (4rem),
   .partner-grid (3rem) et .pricing-grid (4rem).

   L'espace au-dessus des cartes est désormais porté par la seule
   marge basse de .theme-title (4rem). On met 0 sur la grille
   pour éviter que les deux marges se fusionnent et rendent
   l'écart imprévisible.

   Le sélecteur d'adjacence est volontaire : sur logiciel.php et
   materiel.php, le titre de thème peut être masqué
   ($masquerTitreUnique). Dans ce cas la grille conserve sa marge
   d'origine et ne se colle pas au paragraphe.
   ============================================================ */

:is(.section-sous-header,
    .section--cyber,
    .blog-theme,
    .section:has(.partner-grid))
.theme-title + :is(.service-grid, .cyber-grid, .partner-grid, .blog-grid) {
    margin-top: 0;
}


/* Largeur des grilles de cartes de services : 1536px avec deux
   cartes par ligne donnait des cartes de près de 750px pour deux
   lignes de texte centré, d'où l'effet de cartes vides et
   étirées. .partner-grid (1000px) et .blog-grid sont déjà bornées
   et ne sont pas touchées. */

.section-sous-header .service-grid,
.section--cyber .cyber-grid {
    width: min(1180px, 100%);
    gap: 2.2rem;
}


/* ============================================================
   26.6 CARTES DE SERVICES

   Portée limitée aux pages qui utilisent .service-card :
   assistance, maintenance, securisation, service (titre en h2)
   et cybersecurite (titre en h3).

   Fond, bordure, box-shadow, liseré violet ::before et effets de
   survol de .service-card (L533) sont conservés : rien de tout
   cela n'est redéfini ici. .pricing-card et .blog-card, qui sont
   d'autres composants, ne sont pas touchées.
   ============================================================ */

:is(.section-sous-header, .section--cyber) .service-card {
    padding: 2.8rem 2.2rem 2.6rem;
}


/* ------------------------------------------------------------
   TITRE DE CARTE EN h2
   assistance / maintenance / securisation / service

   Ce fichier style .service-card h3 (L581) mais ces quatre pages
   utilisent <h2>, qui retombait donc sur .section h2 : 2.8rem,
   soit la même taille que le titre de thème, plus un tiret
   décoratif de 80x4px sous CHAQUE carte.

   Le balisage ne peut pas passer en h3 : serviceModal.js L158
   lit le titre via card.querySelector('h2') pour alimenter la
   modale. La règle est donc reportée sur h2.
   ------------------------------------------------------------ */

.section-sous-header .service-card h2 {
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.2px;
    color: var(--text-white);
    text-align: center;
    text-wrap: balance;
    margin: 0 0 1.4rem;
}


/* Tiret de .section h2::after supprimé sur les cartes : il est
   redondant avec le .service-card-divider déjà présent dans le
   HTML de ces quatre pages */

.section-sous-header .service-card h2::after {
    display: none;
}


.section-sous-header .service-card:hover h2 {
    color: var(--accent-purple);
}


/* ------------------------------------------------------------
   TITRE DE CARTE EN h3
   cybersecurite.php

   .service-card h3 (L581) est réglé à 1.35rem, soit 13,5px,
   alors que .service-card p (L596) est à 1.5rem, soit 15px : les
   titres de cartes étaient PLUS PETITS que leur propre
   description. Hiérarchie inversée.

   Ces cartes n'ont pas de <div class="service-card-divider">,
   contrairement aux quatre autres pages. Le tiret est donc
   généré en CSS pour obtenir le même rendu, sans ajouter
   d'élément au HTML : cyberModal.js n'est pas dans les fichiers
   fournis, je ne peux pas garantir qu'un ajout de nœud dans la
   carte ne le perturberait pas.
   ------------------------------------------------------------ */

.section--cyber .service-card h3 {
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.2px;
    color: var(--text-white);
    text-align: center;
    text-wrap: balance;
    margin: 0;
}


.section--cyber .service-card h3::after {
    content: "";
    display: block;
    width: 52px;
    height: 3px;
    margin: 1.4rem auto 1.7rem;
    border-radius: 999px;
    background: var(--accent);
    transition: background var(--transition-fast);
}


.section--cyber .service-card:hover h3::after {
    background: var(--accent-purple);
}


/* ------------------------------------------------------------
   SÉPARATEUR DE CARTE

   <div class="service-card-divider"> est présent dans le HTML
   d'assistance, maintenance, securisation et service, mais
   n'avait AUCUNE règle dans ce fichier : élément vide, sans
   aucun effet visuel. Il reprend ici le rôle du tiret ::after
   supprimé ci-dessus, dans une proportion adaptée à un titre de
   18px.
   ------------------------------------------------------------ */

.section-sous-header .service-card-divider {
    width: 52px;
    height: 3px;
    margin: 0 auto 1.7rem;
    border-radius: 999px;
    background: var(--accent);
    transition: background var(--transition-fast);
}


.section-sous-header .service-card:hover .service-card-divider {
    background: var(--accent-purple);
}


/* ------------------------------------------------------------
   TEXTE DE CARTE
   1.5rem (L596) est le principal frein à la lecture. La couleur
   --text-muted du thème est conservée.
   ------------------------------------------------------------ */

:is(.section-sous-header, .section--cyber) .service-card p {
    font-size: 1.6rem;
    line-height: 1.75;
    max-width: 62ch;
    margin: 0 auto;
}


/* ------------------------------------------------------------
   IMAGES DE CARTES
   .card-image img (L3630) fixe un max-height sans hauteur de
   conteneur : des images de hauteurs différentes décalent donc
   verticalement les titres des cartes d'une même ligne.
   ------------------------------------------------------------ */

:is(.section-sous-header, .section--cyber) .card-image {
    height: 90px;
    margin-bottom: 1.6rem;
}


:is(.section-sous-header, .section--cyber) .card-image img {
    max-height: 90px;
}


/* ============================================================
   26.7 RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {

    .section--cyber,
    .section:has(.partner-grid) {
        padding-top: 140px;
    }

    .section-sous-header h1 {
        font-size: 2.8rem;
        gap: 1rem;
    }

    .section-sous-header h1 .icone-titre {
        width: 2.2rem;
        height: 2.2rem;
    }

    .section--cyber .category-title,
    .section:has(.partner-grid) .partner-h1 {
        font-size: 2.8rem;
    }

    :is(.section-sous-header,
        .section--cyber,
        .blog-theme,
        .section:has(.partner-grid)) .theme-title {
        font-size: 2.2rem;
        margin-top: 5.5rem;
        margin-bottom: 3.2rem;
    }

    .section-sous-header .theme-title:has(.icone-titre-violet) {
        font-size: 2.5rem;
    }

    .section-sous-header > .container > p,
    .section--cyber .section-subtitle,
    .section:has(.partner-grid) .text-intro {
        font-size: 1.6rem;
    }

}


@media (max-width: 600px) {

    .section-sous-header h1 {
        font-size: 2.4rem;
        gap: 0.8rem;
    }

    .section-sous-header h1 .icone-titre {
        width: 1.9rem;
        height: 1.9rem;
    }

    .section--cyber .category-title,
    .section:has(.partner-grid) .partner-h1 {
        font-size: 2.4rem;
    }

    :is(.section-sous-header,
        .section--cyber,
        .blog-theme,
        .section:has(.partner-grid)) .theme-title {
        font-size: 1.95rem;
        margin-top: 5rem;
        margin-bottom: 2.8rem;
        padding-bottom: 1.2rem;
    }

    .section-sous-header .theme-title:has(.icone-titre-violet) {
        font-size: 2.2rem;
    }

    :is(.section-sous-header, .section--cyber) .service-card {
        padding: 2rem 1.8rem;
    }

    .section-sous-header .service-card h2,
    .section--cyber .service-card h3 {
        font-size: 1.7rem;
    }

}


/* ============================================================
   NOTE — MODIFICATION REQUISE DANS materiel.php

   Ses titres de thèmes sont des <h2> sans aucune classe, avec
   toute la mise en forme en attribut style=. Ils sont donc
   impossibles à cibler en CSS, et un attribut style l'emporte
   de toute façon sur une feuille externe.

   Remplacer :
     <h2 style="color:#f26522; font-size:1.6rem; ...">
   par :
     <h2 class="theme-title">

   Et pour le titre principal, remplacer :
     <h1 style="text-align:center;">
   par :
     <h1 class="partner-h1">

   C'est la seule modification HTML nécessaire sur les 8 pages.
   ============================================================ */