/* === Extracted style #1 (from cyber_analysis.cta-uniform-fixedheight.html) === */
* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --primary: #0078d7;
            --secondary: #00d4ff;
            --dark: #0a0e27;
            --darker: #050814;
            --accent: #ff006e;
            --light: #f8f9fa;
            --gray: #6c757d;
            --malware-red: #800003;
            --malware-bg: #fbeded;
            --info-blue: #000081;
            --info-bg: #eeedfb;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: var(--light);
            background: var(--darker);
            overflow-x: hidden;
        }

        /* Animated Background */
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, var(--darker) 0%, #0d1428 50%, var(--dark) 100%);
            z-index: -2;
        }

        body::after {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                radial-gradient(circle at 20% 50%, rgba(0, 120, 215, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(255, 0, 110, 0.1) 0%, transparent 50%);
            z-index: -1;
            animation: pulse 10s ease-in-out infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 0.5; }
            50% { opacity: 1; }
        }

        /* Navigation */
        nav {
            position: fixed;
            top: 0;
            width: 100%;
            background: rgba(10, 14, 39, 0.95);
            backdrop-filter: blur(10px);
            z-index: 1000;
            padding: 1rem 0;
            border-bottom: 1px solid rgba(0, 120, 215, 0.3);
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
        }

        .nav-container {
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 2rem;
        }

        .logo {
            font-size: 1.5rem;
            font-weight: bold;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .nav-menu {
            display: flex;
            gap: 2rem;
            list-style: none;
        }

        .nav-menu a {
            color: var(--light);
            text-decoration: none;
            transition: all 0.3s;
            position: relative;
            padding: 0.5rem 0;
        }

        .nav-menu a::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
            transition: width 0.3s;
        }

        .nav-menu a:hover::after {
            width: 100%;
        }

        /* Hero Section */
        .hero {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 6rem 2rem 2rem;
            position: relative;
        }

        .hero-content {
            max-width: 900px;
            z-index: 1;
        }

        .hero h1 {
            font-size: clamp(2.5rem, 5vw, 4rem);
            margin-bottom: 1rem;
            background: linear-gradient(135deg, var(--primary), var(--secondary), var(--accent));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: slideDown 1s ease-out;
        }

        .hero h2 {
            font-size: clamp(1.2rem, 2.5vw, 1.8rem);
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 2rem;
            animation: slideUp 1s ease-out;
        }

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

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

        /* Container */
        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 4rem 2rem;
        }

        section {
            margin-bottom: 4rem;
        }

        .section-title {
            font-size: clamp(2rem, 4vw, 3rem);
            margin-bottom: 1rem;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-align: center;
        }

        .section-subtitle {
            font-size: clamp(1rem, 2vw, 1.3rem);
            color: rgba(255, 255, 255, 0.7);
            text-align: center;
            margin-bottom: 3rem;
            font-style: italic;
        }

        /* Cards */
        .card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }

        .card {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 2rem;
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.3s;
            position: relative;
            overflow: hidden;
        }

        .card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(0, 120, 215, 0.1), rgba(0, 212, 255, 0.1));
            opacity: 0;
            transition: opacity 0.3s;
        }

        .card:hover {
            transform: translateY(-10px);
            border-color: var(--primary);
            box-shadow: 0 20px 40px rgba(0, 120, 215, 0.3);
        }

        .card:hover::before {
            opacity: 1;
        }

        .card img {
            width: 80px;
            height: 80px;
            margin-bottom: 1rem;
        }

        .card h3 {
            color: var(--secondary);
            margin-bottom: 1rem;
            font-size: 1.5rem;
        }

        .card p {
            color: rgba(255, 255, 255, 0.8);
            line-height: 1.8;
        }

        /* Content Section */
        .content-section {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 3rem;
            align-items: start;
        }

        .content-text {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(10px);
            padding: 2rem;
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .content-text p {
            margin-bottom: 1.5rem;
            line-height: 1.8;
            color: rgba(255, 255, 255, 0.9);
        }

        .content-image {
            position: sticky;
            top: 100px;
        }

        .content-image img {
            width: 100%;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
        }

        /* Malware Section Styles */
        .panorama-label {
            text-transform: uppercase;
            letter-spacing: 3px;
            font-size: 0.9rem;
            color: var(--secondary);
            font-weight: 600;
            margin-bottom: 1rem;
            text-align: center;
        }

        .malware-intro {
            max-width: 900px;
            margin: 0 auto 4rem;
            text-align: center;
            color: rgba(255, 255, 255, 0.7);
            font-size: 1.1rem;
            line-height: 1.8;
        }

        .malware-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2rem;
            margin-bottom: 3rem;
        }

        .malware-card {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 2rem;
            border: 1px solid rgba(255, 255, 255, 0.08);
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .malware-card:hover {
            transform: translateY(-5px);
            border-color: rgba(0, 120, 215, 0.5);
            box-shadow: 0 10px 30px rgba(0, 120, 215, 0.2);
            background: rgba(255, 255, 255, 0.05);
        }

        .malware-icon {
            width: 64px;
            height: 64px;
            margin-bottom: 0.5rem;
        }

        .malware-card h3 {
            color: var(--light);
            font-size: 1.3rem;
            margin: 0;
            font-weight: 600;
        }

        .malware-card p {
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.6;
            font-size: 0.95rem;
            flex-grow: 1;
            margin: 0;
        }

        .learn-more {
            background: transparent;
            border: none;
            color: var(--primary);
            font-size: 0.9rem;
            cursor: pointer;
            padding: 0.5rem 0;
            text-align: left;
            transition: all 0.3s;
            font-weight: 500;
        }

        .learn-more:hover {
            color: var(--secondary);
            transform: translateX(5px);
        }

        .malware-conclusion {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 2rem;
            border-left: 4px solid var(--primary);
            margin-top: 3rem;
        }

        .malware-conclusion p {
            color: rgba(255, 255, 255, 0.9);
            line-height: 1.8;
            margin: 0;
        }

        .malware-conclusion strong {
            color: var(--secondary);
        }

        /* Lab Section Styles */
        .lab-content {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 2.5rem;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .lab-content p {
            color: rgba(255, 255, 255, 0.9);
            line-height: 1.8;
            margin-bottom: 1.5rem;
        }

        .lab-content a {
            color: var(--primary);
            text-decoration: none;
            transition: color 0.3s;
        }

        .lab-content a:hover {
            color: var(--secondary);
        }

        /* Image sections - mise en page propre et centrée */
        .image-showcase, .lab-image-container {
            max-width: 600px;
            width: 100%;
            margin: 2rem auto;
            display: block;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: transform 0.3s;
        }

        .image-showcase:hover, .lab-image-container:hover {
            transform: scale(1.02);
        }

        .image-showcase img, .lab-image-container img {
            width: 100%;
            height: auto;
            display: block;
            margin: 0 auto;
        }

        .image-caption {
            font-style: italic;
            color: rgba(255, 255, 255, 0.6);
            margin-top: 0.5rem;
            font-size: 0.9rem;
            text-align: center;
            display: block;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .image-showcase, .lab-image-container {
                max-width: 95%;
            }
        }

        /* Links Section */
        .links-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
        }

        .link-card {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 1.5rem;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .link-card h3 {
            color: var(--secondary);
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .link-card ul {
            list-style: none;
        }

        .link-card li {
            margin-bottom: 0.5rem;
        }

        .link-card a {
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
            transition: all 0.3s;
            display: inline-block;
        }

        .link-card a:hover {
            color: var(--primary);
            transform: translateX(5px);
        }

        /* Alert */
        .alert {
            background: rgba(255, 193, 7, 0.1);
            border-left: 4px solid #ffc107;
            padding: 1.5rem;
            border-radius: 10px;
            margin: 2rem 0;
        }

        .alert b {
            color: #ffc107;
        }

        /* Contact Section */
        .contact-info {
            text-align: center;
            margin: 3rem 0;
        }

        .social-links {
            display: flex;
            justify-content: center;
            gap: 2rem;
            margin: 2rem 0;
        }

        .social-links a {
            color: var(--light);
            font-size: 2rem;
            transition: all 0.3s;
        }

        .social-links a:hover {
            color: var(--primary);
            transform: scale(1.2);
        }

        /* Footer */
        footer {
            background: rgba(10, 14, 39, 0.95);
            padding: 2rem;
            text-align: center;
            border-top: 1px solid rgba(0, 120, 215, 0.3);
        }

        /* Responsive */
        @media (max-width: 768px) {
            .nav-menu {
                flex-direction: column;
                position: fixed;
                top: 60px;
                right: -100%;
                background: rgba(10, 14, 39, 0.98);
                width: 100%;
                padding: 2rem;
                transition: right 0.3s;
            }

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

            .content-image {
                position: relative;
                top: 0;
            }
        }

        /* Scroll to top */
        .scroll-top {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
            opacity: 0;
            transition: opacity 0.3s;
            box-shadow: 0 4px 20px rgba(0, 120, 215, 0.5);
        }

        .scroll-top.visible {
            opacity: 1;
        }

        /* Blinking cursor */
        .blink {
            animation: blink 1s infinite;
        }

        @keyframes blink {
            0%, 50% { opacity: 1; }
            51%, 100% { opacity: 0; }
        }

        /* Companies logos */
        .companies {
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-wrap: wrap;
            gap: 2rem;
            margin-top: 3rem;
        }

        .companies img {
            max-width: 180px;
            opacity: 0.7;
            transition: opacity 0.3s;
        }

        .companies img:hover {
            opacity: 1;
        }


/* === Extracted style #2 (from cyber_analysis.cta-uniform-fixedheight.html) === */
/* ---- 3 cartes par ligne (responsive) ---- */
.malware-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 2rem;
}
@media (max-width: 1100px){
  .malware-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 680px){
  .malware-grid{ grid-template-columns: 1fr !important; }
}

/* ---- Lisibilité: paragraphes longs repliés + bouton visible dans la carte ---- */
.malware-card{ position:relative; display:flex; flex-direction:column; padding-bottom:80px; }
.malware-card p{
  max-width:66ch;
  display:-webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 9;
  overflow:hidden;
  margin-top:.35rem;
}
.malware-card.is-expanded p{ -webkit-line-clamp:unset; display:block !important; overflow:visible; }
.malware-card::after{
  content:"";
  position:absolute; left:16px; right:16px; bottom:72px; height:72px;
  background:linear-gradient(180deg, rgba(8,16,31,0), rgba(8,16,31,.88));
  pointer-events:none; border-bottom-left-radius:14px; border-bottom-right-radius:14px;
}
.malware-card.is-expanded::after{ display:none; }
.malware-card .learn-more{
  position:absolute; left:16px; bottom:16px; z-index:2;
  background:transparent; color:inherit;
  border:1px solid rgba(255,255,255,.2);
  border-radius:12px; padding:.55rem .8rem; line-height:1; font-weight:700;
  backdrop-filter:saturate(130%) blur(2px);
}
.malware-card.is-expanded .learn-more{
  background:linear-gradient(90deg, var(--primary), #8a5cff); color:#08101f; border:0;
}
@media (max-width: 900px){ .malware-card p{ -webkit-line-clamp:12; } }


/* === Extracted style #3 (from cyber_analysis.cta-uniform-fixedheight.html) === */
/* ---- Agrandit uniquement les images des labs/showcase ---- */
.lab-image-container img,
.image-showcase img{
  display:block;
  margin: 1.25rem auto;
  width: min(100%, 1150px) !important;  /* un peu plus large mais responsive */
  height: auto !important;
  border-radius: 14px;
  cursor: zoom-in;
}
/* Lightbox overlay */
#lightbox-overlay[aria-hidden="true"]{ display:none; }
#lightbox-overlay{
  position: fixed; inset:0; z-index: 9999;
  background: rgba(0,0,0,.72);
  display: grid; place-items: center;
  padding: 2rem;
}
#lightbox-frame{
  position: relative;
  display: grid; grid-template-rows: auto min-content;
  gap: .5rem;
  max-width: 96vw; max-height: 92vh;
}
#lightbox-img{
  /* Montre l'image à sa TAILLE D'ORIGINE sans sur-agrandir, mais se réduit si trop grande pour l'écran */
  width: auto; height: auto;
  max-width: 96vw; max-height: 82vh;
  object-fit: contain;
  border-radius: 16px;
  box-shadow: 0 20px 80px rgba(0,0,0,.6);
  background: #0a0f1f;
  cursor: zoom-out;
}
#lightbox-caption{ color: rgba(255,255,255,.9); text-align:center; font-size:.95rem; }
#lightbox-close{
  position:absolute; top: -14px; right: -14px;
  border:0; border-radius: 999px; width: 40px; height: 40px;
  background: rgba(255,255,255,.15); color: white; cursor: pointer;
  backdrop-filter: blur(6px);
}
#lightbox-close:hover{ background: rgba(255,255,255,.25); }


/* === Extracted style #4 (from cyber_analysis.cta-uniform-fixedheight.html) === */
/* ===== Alternance EXACTEMENT comme Obfuscation, avec grande icône STICKY hors bloc ===== */

/* LABS: grande icône à GAUCHE (sticky), contenu à DROITE */
#labos .container{
  display:grid;
  grid-template-columns: minmax(280px,420px) 1fr;
  gap: 2rem;
  align-items: start;
  position: relative;
}
#labos .container::before{
  content:"";
  grid-column: 1;
  grid-row: 1 / span 999;
  display:block;
  width: 100%;
  aspect-ratio: 1/1;
  position: sticky;
  top: 120px; /* même effet “reste en place en scrollant” */
  border-radius: 24px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.22), rgba(0,0,0,.06)),
              url("https://www.cyber-analysis.ch/assets/img/services/infectedskullvirus.png") center/70% no-repeat;
  box-shadow: 0 20px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
}
#labos .lab-content{ grid-column: 2; }

/* CAS PRATIQUE: contenu à GAUCHE, grande icône à DROITE (sticky) */
#caspratique .container{
  display:grid;
  grid-template-columns: 1fr minmax(280px,420px);
  gap: 2rem;
  align-items: start;
  position: relative;
}
#caspratique .container::after{
  content:"";
  grid-column: 2;
  grid-row: 1 / span 999;
  display:block;
  width: 100%;
  aspect-ratio: 1/1;
  position: sticky;
  top: 120px;
  border-radius: 24px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.22), rgba(0,0,0,.06)),
              url("https://www.cyber-analysis.ch/assets/img/services/bugdatasoftwarevirus.png") center/70% no-repeat;
  box-shadow: 0 20px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
}
#caspratique .content-text{ grid-column: 1; }

/* Responsive: repasse en 1 colonne et masque les grandes icônes pour garder la place sur mobile */
@media (max-width: 980px){
  #labos .container, #caspratique .container{ grid-template-columns: 1fr; }
  #labos .container::before, #caspratique .container::after{ display:none; }
  #labos .lab-content, #caspratique .content-text{ grid-column: 1; }
}


/* === Extracted style #5 (from cyber_analysis.cta-uniform-fixedheight.html) === */
/* ==== Réduction des vides avec les icônes sticky ==== */
/* Limiter la hauteur de l'icône sticky et éviter l'étirement des lignes */
#labos .container, #caspratique .container{
  align-items: start;
}
#labos .container::before,
#caspratique .container::after{
  /* ne pas étendre sur des lignes “infinies” */
  grid-row: 1;
  /* taille contrôlée : pas plus haute que 40vh, pas moins que 260px */
  height: clamp(260px, 40vh, 420px);
  width: 100%;
  aspect-ratio: auto; /* on force la hauteur choisie */
  align-self: start;
}
/* resserrer l'espacement sous la section quand le contenu est court */
#labos section, #caspratique section { padding-bottom: 56px; }
/* sur mobile on masque déjà les grandes icônes via les règles existantes */


/* === Extracted style #6 (from cyber_analysis.cta-uniform-fixedheight.html) === */
/* === Corrige l'alignement des titres avec l'icône sticky === */
/* Les titres doivent occuper toute la largeur au-dessus de la grille */
#labos .container, #caspratique .container{
  display: grid;
  grid-template-columns: minmax(280px,420px) 1fr; /* sera inversé plus bas pour cas pratique */
  column-gap: 2rem;
  row-gap: 1rem;
  align-items: start;
}
/* Titres sur toute la largeur et centrés */
#labos .container > .section-title,
#labos .container > .section-subtitle,
#caspratique .container > .section-title,
#caspratique .container > .section-subtitle{
  grid-column: 1 / -1 !important;
  text-align: center;
}

/* LABS : icône sticky en colonne 1, contenu (lab-content) en colonne 2 — tous DEPUIS la ligne 2 */
#labos .container::before{
  grid-column: 1;
  grid-row: 2;
  margin-top: .5rem;
}
#labos .lab-content{
  grid-column: 2;
  grid-row: 2;
}

/* CAS PRATIQUE : contenu en colonne 1, icône sticky en colonne 2 — ligne 2 */
#caspratique .container{
  grid-template-columns: 1fr minmax(280px,420px);
}
#caspratique .container::after{
  grid-column: 2;
  grid-row: 2;
  margin-top: .5rem;
}
#caspratique .content-text{
  grid-column: 1;
  grid-row: 2;
}

/* Responsive */
@media (max-width: 980px){
  #labos .container, #caspratique .container{ grid-template-columns: 1fr; }
  #labos .container::before, #caspratique .container::after{ display:none; }
  #labos .lab-content, #caspratique .content-text{ grid-column: 1; grid-row: auto; }
}


/* === Extracted style #7 (from cyber_analysis.cta-uniform-fixedheight.html) === */
/* === Corrige l'ordre: sous-titres au-dessus des blocs + alerte en tête du Cas pratique === */

/* 2 colonnes de grille, titres en pleine largeur (ligne 1 et 2) */
#labos .container,
#caspratique .container{
  display: grid;
  grid-template-columns: minmax(280px,420px) 1fr; /* Labs: icône gauche / contenu droite */
  column-gap: 2rem;
  row-gap: 1rem;
  align-items: start;
}
/* Titres TOUJOURS avant les blocs */
#labos .container > .section-title{ grid-column: 1 / -1; grid-row: 1; text-align:center; }
#labos .container > .section-subtitle{ grid-column: 1 / -1; grid-row: 2; text-align:center; }

#caspratique .container{ grid-template-columns: 1fr minmax(280px,420px); } /* Cas pratique inversé */
#caspratique .container > .section-title{ grid-column: 1 / -1; grid-row: 1; text-align:center; }
#caspratique .container > .section-subtitle{ grid-column: 1 / -1; grid-row: 2; text-align:center; }
/* Place l'avertissement juste après les titres, avant le contenu */
#caspratique .container > .alert{ grid-column: 1 / -1; grid-row: 3; }

/* LABS: démarre les blocs à la ligne 3 (pas de warning ici) */
#labos .container::before{ grid-column: 1; grid-row: 3; position: sticky; top:120px; }
#labos .lab-content{ grid-column: 2; grid-row: 3; }

/* CAS PRATIQUE: démarre les blocs à la ligne 4 (après l'alerte) */
#caspratique .container::after{ grid-column: 2; grid-row: 4; position: sticky; top:120px; }
#caspratique .content-text{ grid-column: 1; grid-row: 4; }

/* Limites de hauteur des grandes icônes pour éviter les gros vides */
#labos .container::before,
#caspratique .container::after{
  height: clamp(260px, 40vh, 420px);
  width: 100%;
  border-radius: 24px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.22), rgba(0,0,0,.06));
  box-shadow: 0 20px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
}
#labos .container::before{ background-image: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.22), rgba(0,0,0,.06)), url("https://www.cyber-analysis.ch/assets/img/services/infectedskullvirus.png"); background-repeat:no-repeat; background-position:center; background-size:70%; }
#caspratique .container::after{ background-image: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.22), rgba(0,0,0,.06)), url("https://www.cyber-analysis.ch/assets/img/services/bugdatasoftwarevirus.png"); background-repeat:no-repeat; background-position:center; background-size:70%; }

/* Responsive */
@media (max-width: 980px){
  #labos .container, #caspratique .container{ grid-template-columns: 1fr; }
  #labos .container::before, #caspratique .container::after{ display:none; }
  #labos .lab-content{ grid-column: 1; grid-row: auto; }
  #caspratique .content-text{ grid-column: 1; grid-row: auto; }
  #caspratique .container > .alert{ grid-row: auto; }
}


/* === Extracted style #8 (from cyber_analysis.cta-uniform-fixedheight.html) === */
/* === Icônes sticky plus petites === */
#labos .container::before,
#caspratique .container::after{
  height: clamp(220px, 34vh, 360px) !important; /* moins haut */
}
#labos .container::before{ background-size: 56% !important; }
#caspratique .container::after{ background-size: 56% !important; }


/* === Extracted style #9 (from cyber_analysis.cta-uniform-fixedheight.html) === */
/* === Faire fonctionner Labs & Cas pratique EXACTEMENT comme Obfuscation === */
/* On reprend la même logique de grille: 2fr (texte) / 1fr (icône sticky) */
#labos .container, #caspratique .container{
  display: grid;
  grid-template-columns: 2fr 1fr !important;
  gap: 3rem;
  align-items: start;
}

/* Titres et sous-titres en pleine largeur au-dessus de la grille */
#labos .container > .section-title,
#labos .container > .section-subtitle,
#caspratique .container > .section-title,
#caspratique .container > .section-subtitle{
  grid-column: 1 / -1 !important;
  text-align: center;
}

/* LABS : icône sticky dans la colonne de gauche (1fr), contenu à droite (2fr) */
#labos .lab-content{ grid-column: 2; grid-row: 3; }
#labos .container::before{
  grid-column: 1; grid-row: 3;
  position: sticky; top: 100px; /* comme .content-image */
  width: 100%; aspect-ratio: 1 / 1;
  border-radius: 20px;
  background: #0b1226;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  display: block;
  content:"";
  /* icône centrée, même proportion que Obfuscation */
  background-image: url("https://www.cyber-analysis.ch/assets/img/services/infectedskullvirus.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 64%;
}

/* CAS PRATIQUE : contenu à gauche (2fr), icône sticky à droite (1fr) */
#caspratique .content-text{ grid-column: 1; grid-row: 4; }
#caspratique .container::after{
  grid-column: 2; grid-row: 4;
  position: sticky; top: 100px;
  width: 100%; aspect-ratio: 1 / 1;
  border-radius: 20px;
  background: #0b1226;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  display: block; content:"";
  background-image: url("https://www.cyber-analysis.ch/assets/img/services/bugdatasoftwarevirus.png");
  background-repeat: no-repeat; background-position: center;
  background-size: 64%;
}

/* Ordre des éléments précédents (titres + sous-titres + avertissement) */
#labos .container > .section-title{ grid-row: 1; }
#labos .container > .section-subtitle{ grid-row: 2; }
#caspratique .container > .section-title{ grid-row: 1; }
#caspratique .container > .section-subtitle{ grid-row: 2; }
#caspratique .container > .alert{ grid-column: 1 / -1; grid-row: 3; }

/* Responsive : 1 colonne et icônes masquées sous 980px (comme avant) */
@media (max-width: 980px){
  #labos .container, #caspratique .container{
    grid-template-columns: 1fr !important;
    gap: 1.5rem;
  }
  #labos .container::before, #caspratique .container::after{ display:none; }
  #labos .lab-content, #caspratique .content-text{ grid-column: 1; grid-row: auto; }
  #caspratique .container > .alert{ grid-row: auto; }
}


/* === Extracted style #10 (from cyber_analysis.cta-uniform-fixedheight.html) === */
/* === Réduit la taille des CADRES des icônes sticky (Labs & Cas pratique) === */
/* Hauteur plus compacte + icône moins grande + ombre plus douce */
#labos .container::before,
#caspratique .container::after{
  height: clamp(200px, 24vh, 320px) !important; /* avant ~64% sur de grands blocs */
  background-size: 52% !important;             /* icône légèrement plus petite */
  box-shadow: 0 14px 40px rgba(0,0,0,0.35) !important;
  border-radius: 16px !important;
}

/* Optionnel : rapprocher un peu le texte du cadre */
#labos .container, #caspratique .container{
  gap: 2rem !important; /* avant 3rem */
}


/* === Extracted style #11 (from cyber_analysis.cta-uniform-fixedheight.html) === */
/* === Icônes sticky calibrées comme Obfuscation — cadre + taille plus petits === */
/* Grille identique Obfuscation: 2fr / 1fr, mais on contraint la carte sticky à une taille max centrée */
#labos .container, #caspratique .container{
  grid-template-columns: 2fr 1fr !important;
  gap: 2rem !important;
  align-items: start;
}

/* LABS (icône colonne 1) */
#labos .container::before{
  /* taille précise, centrée dans sa colonne, collée en haut au scroll */
  width: min(100%, 280px) !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  justify-self: center !important;
  top: 100px !important;
  background-size: 60% !important; /* proche de l'icône Obfuscation */
  border-radius: 16px !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.35) !important;
}

/* CAS PRATIQUE (icône colonne 2) */
#caspratique .container::after{
  width: min(100%, 280px) !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  justify-self: center !important;
  top: 100px !important;
  background-size: 60% !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.35) !important;
}

/* Responsive — rien ne change, on masque sous 980px */
@media (max-width: 980px){
  #labos .container, #caspratique .container{ grid-template-columns: 1fr !important; }
  #labos .container::before, #caspratique .container::after{ display:none !important; }
}


/* === Extracted style #12 (from cyber_analysis.cta-uniform-fixedheight.html) === */
/* === Blocs plus larges + alerte alignée à la même largeur === */

/* LABS: icône (col 1) étroite, bloc de contenu (col 2) LARGE */
#labos .container{
  grid-template-columns: 1fr 3fr !important; /* 25% / 75% environ */
  column-gap: 2rem !important;
}
#labos .lab-content{
  grid-column: 2 !important;
  max-width: none !important;
}

/* CAS PRATIQUE: bloc de contenu large à GAUCHE, icône à droite étroite */
#caspratique .container{
  grid-template-columns: 3fr 1fr !important; /* 75% / 25% */
  column-gap: 2rem !important;
}
#caspratique .content-text{
  grid-column: 1 !important;
  max-width: none !important;
}

/* Alerte du Cas pratique: même largeur/alignement que le bloc */
#caspratique .container > .alert{
  grid-column: 1 !important;   /* collée à la colonne contenu */
  width: 100% !important;
  box-sizing: border-box;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Titres restent en pleine largeur */
#labos .container > .section-title,
#labos .container > .section-subtitle,
#caspratique .container > .section-title,
#caspratique .container > .section-subtitle{
  grid-column: 1 / -1 !important;
  text-align: center;
}


/* === Extracted style #13 (from cyber_analysis.cta-uniform-fixedheight.html) === */
/* === Obfuscation : bloc plus large, cadre + icône plus petits (même logique que Labs) === */
#obfuscation .content-section{
  display: grid;
  grid-template-columns: 3fr 1fr !important; /* 75% texte / 25% icône */
  gap: 2rem !important;
  align-items: start;
}

/* Cadre sticky compact et centré */
#obfuscation .content-image{
  position: sticky;
  top: 100px;
  width: min(100%, 280px) !important;     /* cadre plus petit */
  justify-self: center !important;
  padding: 16px;
  border-radius: 16px;
  background: #0b1226;
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
}

/* Icône à l'intérieur plus petite, centrée */
#obfuscation .content-image img{
  width: 60% !important;                  /* ~même ratio que les autres */
  height: auto !important;
  display: block;
  margin: 8px auto 6px auto;
  border-radius: 12px;                    /* au cas où */
  box-shadow: none !important;            /* pas d'ombre double sur l'icône */
}

/* Mobile : revient à 1 colonne automatiquement via règles existantes */
@media (max-width: 980px){
  #obfuscation .content-section{ grid-template-columns: 1fr !important; }
  #obfuscation .content-image{ width: 100% !important; position: static; }
  #obfuscation .content-image img{ width: 48% !important; }
}


/* === Extracted style #14 (from cyber_analysis.cta-uniform-fixedheight.html) === */
/* === Cartes sticky carrées et identiques pour Obfuscation, Labs, Cas pratique === */
:root{
  --sticky-card: 260px;   /* taille du carré */
  --sticky-icon: 58%;     /* taille de l'icône à l'intérieur */
}

/* Obfuscation */
#obfuscation .content-section{ grid-template-columns: 3fr 1fr !important; gap: 2rem !important; }
#obfuscation .content-image{
  position: sticky; top: 100px;
  width: var(--sticky-card) !important;
  height: var(--sticky-card) !important;
  aspect-ratio: auto !important;
  justify-self: center !important;
  padding: 16px; border-radius: 16px;
  background: #0b1226;
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
}
#obfuscation .content-image img{
  width: var(--sticky-icon) !important; height: auto !important;
  display:block; margin: 8px auto 6px auto;
  box-shadow: none !important;
}

/* Labs */
#labos .container{ grid-template-columns: 1fr 3fr !important; gap: 2rem !important; }
#labos .lab-content{ grid-column: 2 !important; }
#labos .container::before{
  content:""; display:block;
  position: sticky; top: 100px;
  width: var(--sticky-card) !important;
  height: var(--sticky-card) !important;
  justify-self: center; border-radius: 16px;
  background: #0b1226 url("https://www.cyber-analysis.ch/assets/img/services/infectedskullvirus.png") center/var(--sticky-icon) no-repeat;
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
}

/* Cas pratique */
#caspratique .container{ grid-template-columns: 3fr 1fr !important; gap: 2rem !important; }
#caspratique .content-text{ grid-column: 1 !important; }
#caspratique .container::after{
  content:""; display:block;
  position: sticky; top: 100px;
  width: var(--sticky-card) !important;
  height: var(--sticky-card) !important;
  justify-self: center; border-radius: 16px;
  background: #0b1226 url("https://www.cyber-analysis.ch/assets/img/services/bugdatasoftwarevirus.png") center/var(--sticky-icon) no-repeat;
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
}

/* Avertissement du Cas pratique aligné à la colonne de contenu */
#caspratique .container > .alert{ grid-column: 1 !important; width: 100% !important; box-sizing: border-box; }

/* Mobile */
@media (max-width: 980px){
  #obfuscation .content-section, #labos .container, #caspratique .container{ grid-template-columns: 1fr !important; gap: 1.5rem !important; }
  #obfuscation .content-image, #labos .container::before, #caspratique .container::after{ display:none !important; }
}


/* === Extracted style #15 (from cyber_analysis.cta-uniform-fixedheight.html) === */
/* === Obfuscation icon: center perfectly and enlarge a bit === */
#obfuscation .content-image{
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;            /* no inner offset so it's truly centered */
}
#obfuscation .content-image img{
  width: 64% !important;            /* a bit larger than the other sections */
  height: auto !important;
  margin: 0 !important;             /* let grid centering do the work */
  box-shadow: none !important;
}


/* === Extracted style #16 (from cyber_analysis.cta-uniform-fixedheight.html) === */
/* ===== Alignement propre des petites icônes placées AVANT un texte ===== */
/* Cible: petites images insérées dans les titres, paragraphes ou listes.
   On ne touche PAS aux grandes captures ni aux images de sections. */
h1 > img:first-child,
h2 > img:first-child,
h3 > img:first-child,
h4 > img:first-child,
p  > img:first-child,
li > img:first-child,
.inline-icon,
.inline-icon img{
  display: inline-block !important;
  vertical-align: middle !important;
  height: 1.25em !important;     /* taille auto basée sur la ligne */
  width: auto !important;
  margin-right: .5rem !important;
  margin-top: -.1em !important;  /* légère correction de ligne */
  object-fit: contain !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Si certains icônes ont un attribut width/height fixe, on neutralise */
h1 > img[width], h1 > img[height],
h2 > img[width], h2 > img[height],
h3 > img[width], h3 > img[height],
h4 > img[width], h4 > img[height],
p  > img[width], p  > img[height],
li > img[width], li > img[height]{
  height: 1.25em !important;
  width: auto !important;
}

/* Espace après les puces/labels qui utilisent une icône suivie d'un strong */
p > img:first-child + strong,
li > img:first-child + strong,
h3 > img:first-child + strong{
  margin-left: .1rem;
}


/* === Extracted style #17 (from cyber_analysis.cta-uniform-fixedheight.html) === */
/* === Correction: on NE change PAS la taille des icônes, on les aligne seulement === */
h1 > img:first-child,
h2 > img:first-child,
h3 > img:first-child,
h4 > img:first-child,
p  > img:first-child,
li > img:first-child,
.inline-icon,
.inline-icon img{
  display: inline-block !important;
  vertical-align: middle !important;
  margin-right: .5rem !important;
  margin-top: 0 !important;
  /* ne pas forcer width/height */
  height: auto !important;
  width: auto !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Supprime les anciennes règles éventuelles qui forçaient 1.25em */
h1 > img[style*=\"1.25em\"], h2 > img[style*=\"1.25em\"], h3 > img[style*=\"1.25em\"], h4 > img[style*=\"1.25em\"],
p  > img[style*=\"1.25em\"], li > img[style*=\"1.25em\"], .inline-icon img[style*=\"1.25em\"]{
  height: auto !important; width: auto !important;
}

/* Un léger ajustement optionnel pour les icônes très hautes afin d'éviter qu'elles "tombent" : */
.icon-baseline-fix{ vertical-align: middle !important; }


/* === Extracted style #18 (from cyber_analysis.cta-uniform-fixedheight.html) === */
/* === Icônes en tête de ligne: EXACTEMENT 48px × 48px === */
/* Cible UNIQUEMENT les images qui ouvrent un titre/texte/liste */
h1 > img:first-child,
h2 > img:first-child,
h3 > img:first-child,
h4 > img:first-child,
p  > img:first-child,
li > img:first-child{
  display: inline-block !important;
  vertical-align: middle !important;
  width: 48px !important;
  height: 48px !important;
  object-fit: contain !important;
  margin-right: .5rem !important;
  margin-top: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Ne PAS toucher aux autres images (captures, sticky, etc.) */


/* === Extracted style #19 (from cyber_analysis.cta-uniform-fixedheight.html) === */
/* ===== Section LINK : icône devant le paragraphe, pleine hauteur; bloc texte large ===== */
#link .content-section{
  display: grid;
  grid-template-columns: 88px 1fr; /* colonne icône + colonne texte */
  align-items: stretch;
  gap: 1.25rem;
}

/* supprime tout effet "carte/sticky" de l'icône */
#link .content-image{
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  position: static !important;
  width: 88px !important;
  height: auto !important;
  display: flex; align-items: center;
}
#link .content-image img{
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
  margin: 0 !important;
  box-shadow: none !important;
}

/* le bloc de texte prend toute la largeur disponible (même largeur que les cartes dessous) */
#link .content-text{ grid-column: 2; }
#link .content-text p{ width: 100%; box-sizing: border-box; }

/* Sous 700px: icône au-dessus du texte pour garder la lisibilité */
@media (max-width: 700px){
  #link .content-section{ grid-template-columns: 1fr; }
  #link .content-image{ width: 68px !important; margin-bottom: .5rem; }
}


/* === Extracted style #20 (from cyber_analysis.cta-uniform-fixedheight.html) === */
/* ===== LINK: placer l'icône *dans* le conteneur du texte ===== */
/* On ne change pas le HTML, on repositionne simplement l'image au-dessus du paragraphe */
#link .content-section{
  display: block !important; /* on enlève la grille précédente pour cette section */
}
#link .content-text{
  position: relative;
  padding-left: 96px;           /* espace réservé pour l'icône */
  min-height: 88px;             /* évite que l'icône dépasse sur les petites hauteurs */
}
#link .content-image{
  position: absolute !important;
  left: 24px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 56px !important;
  height: 56px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center; justify-content: center;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
#link .content-image img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  margin: 0 !important;
  box-shadow: none !important;
}

/* ===== LINK: puces bleues devant les noms des outils ===== */
#link .grid-cards ul{ list-style: none; padding-left: 0; margin: 0; }
#link .grid-cards li{
  position: relative;
  padding-left: 16px;
  margin: 6px 0;
}
#link .grid-cards li::before{
  content: "";
  position: absolute;
  left: 0; top: .6em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand, #6cc9ff);
  box-shadow: 0 0 0 2px rgba(108,201,255,0.15);
  transform: translateY(-50%);
}

/* Responsive: sur mobile on relâche le padding si besoin */
@media (max-width: 700px){
  #link .content-text{ padding-left: 76px; }
  #link .content-image{ left: 18px; width: 48px; height: 48px; }
}


/* === Extracted style #21 (from cyber_analysis.cta-uniform-fixedheight.html) === */
/* ===== LINK fixes ===== */
/* 1) Positionne le conteneur pour l'absolu + ajoute un espace sous le paragraphe */
#link .content-section{
  position: relative !important;
  margin-bottom: 28px !important; /* espace entre paragraphe et cartes d'outils */
}

/* 2) Icône ABSOLUE centrée verticalement DANS la zone texte */
#link .content-text{
  position: relative !important;
  padding-left: 96px !important;  /* réserve la place de l'icône */
  min-height: 72px !important;
}
#link .content-image{
  position: absolute !important;
  left: 24px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 56px !important;
  height: 56px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  background: transparent !important; box-shadow: none !important; border-radius: 0 !important;
  pointer-events: none; /* l'icône ne gêne pas la sélection du texte */
}
#link .content-image img{
  width: 100% !important; height: 100% !important; object-fit: contain !important; margin: 0 !important;
}

/* 3) Puces bleues pour les outils (links-grid) */
#link .links-grid ul{ list-style: none; padding-left: 0; margin: 0; }
#link .links-grid li{
  position: relative; padding-left: 16px; margin: 6px 0;
}
#link .links-grid li::before{
  content: ""; position: absolute; left: 0; top: .6em; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand, #6cc9ff); box-shadow: 0 0 0 2px rgba(108,201,255,.15);
}

/* Mobile tweaks */
@media (max-width:700px){
  #link .content-text{ padding-left: 76px !important; }
  #link .content-image{ left: 18px !important; width: 48px !important; height: 48px !important; }
  #link .content-section{ margin-bottom: 22px !important; }
}


/* === Extracted style #22 (from cyber_analysis.cta-uniform-fixedheight.html) === */
/* === LINK: icône un peu plus grosse et bien intégrée dans le conteneur === */
#link .content-text{ padding-left: 104px !important; min-height: 80px !important; }
#link .content-image{
  left: 24px !important; width: 64px !important; height: 64px !important;
}
/* Plus d'espace avec les cartes d'outils */
#link .content-section{ margin-bottom: 36px !important; }

/* === LINK: styles "carte" appliqués aux cadres des outils === */
#link .link-card{
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 18px;
  transition: transform .2s ease, box-shadow .3s ease, border-color .2s ease;
  box-shadow: 0 8px 24px rgba(108,204,255,.10);
}
#link .link-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(108,204,255,.18);
  border-color: rgba(108,204,255,.25);
}

/* titres des cartes un peu plus marqués */
#link .link-card h3{ margin-top: 0; margin-bottom: .5rem; display:flex; align-items:center; gap:.5rem; }
#link .link-card h3 img{ width: 24px; height: 24px; }

/* puces bleues visibles dans toutes les listes d'outils */
#link .link-card ul{ list-style: none; padding-left: 0; margin: 0; }
#link .link-card li{
  position: relative; padding-left: 16px; margin: 6px 0;
}
#link .link-card li::before{
  content: ""; position: absolute; left: 0; top: .6em; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand, #6cc9ff);
  box-shadow: 0 0 0 2px rgba(108,201,255,.15);
}

/* garder un espacement vertical régulier entre cartes */
#link .links-grid{ gap: 24px !important; }


/* === Extracted style #23 (from cyber_analysis.cta-uniform-fixedheight.html) === */
/* === LINK: icône 68×68 px, padding adapté === */
#link .content-text{ padding-left: 112px !important; min-height: 88px !important; }
#link .content-image{ width: 68px !important; height: 68px !important; }


/* === Extracted style #24 (from cyber_analysis.cta-uniform-fixedheight.html) === */
/* ===== Contact: centré, propre, et harmonisé avec le reste ===== */
#contact .container, #contact .wrap, #contact .inner { max-width: 900px; margin: 0 auto; }
#contact .section-title, #contact .section-subtitle { text-align: center; }

/* bloc principal en carte */
#contact .contact-card{
  margin: 18px auto 28px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 22px 26px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  box-shadow: 0 12px 34px rgba(108,204,255,.12);
}

/* ligne infos (ville + mail) centrée */
#contact .contact-row{
  display:flex; align-items:center; justify-content:center; gap: 16px;
  flex-wrap: wrap;
  color: #d5deef;
}
#contact .contact-row a{ color: #9ad1ff; text-decoration: none; }
#contact .contact-row a:hover{ text-decoration: underline; }

/* réseaux sociaux */
#contact .socials{
  display:flex; align-items:center; justify-content:center; gap: 16px;
}
#contact .socials a{
  width: 40px; height: 40px; display:grid; place-items:center;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
#contact .socials a:hover{
  transform: translateY(-3px);
  background: linear-gradient(90deg, var(--brand, #6cc9ff), var(--brand-2, #8a5cff));
  box-shadow: 0 12px 26px rgba(108,204,255,.25);
}

/* phrase finale centrée et adoucie */
#contact p:last-of-type{
  text-align: center;
  color: #b8c6dd;
  margin-top: 10px;
}

/* réduire l'énorme espace au-dessus/au-dessous */
#contact section, #contact{ padding-top: 56px; padding-bottom: 56px; }

@media (max-width: 600px){
  #contact .contact-card{ padding: 18px; }
}


/* === Extracted style #25 (from cyber_analysis.cta-uniform-fixedheight.html) === */
/* Helpers: try to detect common elements */
#contact .socials, #contact .contact-row { }


/* === Extracted style #26 (from cyber_analysis.cta-uniform-fixedheight.html) === */
#contact .container > *:not(.section-title):not(.section-subtitle){
  margin-left: auto; margin-right: auto;
}
#contact .container > div, #contact .container > p, #contact .container > ul{
  max-width: 900px;
}


/* === Extracted style #27 (from cyber_analysis.cta-uniform-fixedheight.html) === */
/* === Contact: réduire les espaces haut/bas et entre les blocs === */
#contact{ padding-top: 28px !important; padding-bottom: 28px !important; }
#contact .section-title{ margin-top: 0 !important; margin-bottom: 6px !important; }
#contact .section-subtitle{ margin-top: 0 !important; margin-bottom: 12px !important; }
#contact .socials{ margin: 6px 0 10px !important; }
#contact .contact-row{ gap: 10px !important; }
#contact p:last-of-type{ margin-top: 8px !important; }


/* === Extracted style #28 (from cyber_analysis.cta-uniform-fixedheight.html) === */
/* === Contact : encore plus compact === */
#contact{ padding-top: 16px !important; padding-bottom: 16px !important; }
#contact .section-title{ margin: 0 0 4px 0 !important; }
#contact .section-subtitle{ margin: 0 0 8px 0 !important; }
#contact .socials{ margin: 4px 0 8px !important; }
#contact .contact-row{ gap: 8px !important; }
#contact p:last-of-type{ margin-top: 6px !important; }


/* === Extracted style #29 (from cyber_analysis.cta-uniform-fixedheight.html) === */
/* === Cas pratique: centrer TOUTES les captures === */
/* 1) Captures dans des conteneurs dédiés */
#caspratique .image-showcase img,
#caspratique .lab-image-container img{
  display: block !important;
  margin: 1rem auto !important;
  max-width: min(100%, 1100px) !important;
  height: auto !important;
  border-radius: 14px !important;
}
/* 2) Images "orphelines" insérées seules dans un paragraphe */
#caspratique .content-text p > img:only-child{
  display: block !important;
  margin: 1rem auto !important;
  max-width: min(100%, 1100px) !important;
  height: auto !important;
  border-radius: 14px !important;
}
/* 3) Ne PAS toucher aux petites icônes inline (on les laisse en ligne) */
#caspratique .content-text p > img:first-child:not(:only-child),
#caspratique .content-text li > img:first-child:not(:only-child){
  display: inline-block !important;
  margin: 0 .5rem 0 0 !important;
  border-radius: 0 !important;
}


/* === Extracted style #30 (from cyber_analysis.cta-uniform-fixedheight.html) === */
/* === Cas pratique: forcer le centrage de TOUTES les images de contenu === */
#caspratique .content-text img{
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
  max-width: min(100%, 1100px) !important;
  height: auto !important;
  border-radius: 12px;
}

/* Garder les petites icônes inline si elles ouvrent un texte (cas rare dans cette section) */
#caspratique .content-text p > img:first-child:not(:only-child),
#caspratique .content-text li > img:first-child:not(:only-child){
  display: inline-block !important;
  margin: 0 .5rem 0 0 !important;
  border-radius: 0 !important;
}

/* Centrer les figures + légendes si utilisées */
#caspratique .content-text figure{ display:block; text-align:center; margin: 1.25rem auto; }
#caspratique .content-text figure img{ display:inline-block !important; }
#caspratique .content-text figcaption{ font-style: italic; opacity:.85; margin-top:.5rem; }


/* === Extracted style #31 (from cyber_analysis.cta-uniform-fixedheight.html) === */
/* === Starry pixel background (subtle, random twinkle) === */
#bg-stars{position:fixed;inset:0;z-index:0;pointer-events:none;mix-blend-mode:screen;opacity:.45}


/* === Extracted style #32 (from cyber_analysis.cta-uniform-fixedheight.html) === */
/* ===== ExeScope premium frameless CTA ===== */
.hero .exescope-inline{
  margin: 22px auto 0;
  max-width: 1040px;
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 16px;
  align-items: center;
}
.exescope-logo{
  width: 92px; height: 92px;
  display:grid; place-items:center;
  filter: drop-shadow(0 10px 28px rgba(0,0,0,.35));
}
.exescope-logo img{ width:100%; height:auto; display:block; }

.exescope-eyebrow{
  display:inline-flex; align-items:center; gap:.45rem;
  font-weight:900; letter-spacing:.35px; font-size: 18px;
  margin-bottom:.15rem;
  background: linear-gradient(90deg, #3ddcff, #9a6bff);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.exescope-eyebrow .dot{
  width:6px;height:6px;border-radius:50%; background:currentColor; opacity:.85;
  -webkit-text-fill-color: initial;
}
.exescope-title{ margin:0; font-size: clamp(1.15rem, 2.6vw, 1.6rem); }
.exescope-sub{ margin:.35rem 0 .65rem 0; color: rgba(235,245,255,.92); line-height:1.65; }

.badges{ display:flex; flex-wrap:wrap; gap:.45rem; margin:0 0 .7rem 0; }
.badge{
  font-size:.8rem; padding:.34rem .6rem; border-radius:999px;
  background: rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16);
  display:inline-flex; align-items:center; gap:.4rem;
}
.badge i{ font-size:.9rem; opacity:.9; }

.exescope-actions{ display:flex; gap:.65rem; flex-wrap:wrap; }
.btnX{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.7rem 1.05rem; border-radius:12px; border:1px solid transparent;
  text-decoration:none; font-weight:900; letter-spacing:.2px;
  transition: transform .15s ease, box-shadow .25s ease, background .2s ease, border-color .2s ease;
}
.btnX.primary{
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  color:#08101f; box-shadow: 0 10px 26px rgba(0,120,215,.35);
}
.btnX.primary:hover{ transform: translateY(-2px); box-shadow: 0 16px 38px rgba(0,120,215,.45); }
.btnX.ghost{
  background: rgba(255,255,255,.10); color:#d9e9ff; border-color: rgba(255,255,255,.18);
}
.btnX.ghost:hover{ transform: translateY(-2px); background: rgba(255,255,255,.16); }

@media (max-width:820px){
  .hero .exescope-inline{ grid-template-columns: 72px 1fr; }
  .exescope-logo{ width:72px; height:72px; }
}
@media (max-width:620px){
  .hero .exescope-inline{ grid-template-columns: 1fr; text-align:center; }
  .exescope-actions{ justify-content:center; }
  .exescope-logo{ margin:0 auto; }
}


/* === Extracted style #33 (from cyber_analysis.cta-uniform-fixedheight.html) === */
/* Plus d'espace entre le sous-titre et le bloc ExeScope */
.hero h2{ margin-bottom: 24px !important; }
/* Bloc ExeScope centré et un peu plus bas */
.hero .exescope-inline{
  margin-top: 64px !important;      /* espace fort demandé */
  max-width: 880px !important;      /* aligné avec la largeur visuelle du titre/sous-titre */
  justify-self: center;
}
/* Tout centrer visuellement à l'intérieur du bloc */
.hero .exescope-inline .exescope-title,
.hero .exescope-inline .exescope-sub{ text-align: center; }
.hero .exescope-inline .badges{ justify-content: center; }
.hero .exescope-inline .exescope-actions{ justify-content: center; }
/* Le logo reste à gauche sur large écran, mais le bloc entier est centré.
   On peut forcer le logo au-dessus sur petits écrans pour rester bien centré. */
@media (max-width: 980px){
  .hero .exescope-inline{ grid-template-columns: 1fr !important; }
  .hero .exescope-inline .exescope-logo{ margin: 0 auto 8px; }
  .hero .exescope-inline .exescope-title,
  .hero .exescope-inline .exescope-sub{ text-align: center; }
}


/* === Extracted style #34 (from cyber_analysis.cta-uniform-fixedheight.html) === */
/* One-column layout for ExeScope; center everything */
.hero .exescope-inline{
  display: grid;
  grid-template-columns: 1fr !important;
  justify-items: center;
  text-align: center;
  max-width: 880px !important;
  margin-top: 64px !important;
}
.hero .exescope-inline .exescope-title,
.hero .exescope-inline .exescope-sub{ text-align: center; }
.hero .exescope-inline .badges{ justify-content: center; }
.hero .exescope-inline .exescope-actions{ justify-content: center; }

/* Logo centered and positioned between subtitle and badges with spacing */
.hero .exescope-inline .exescope-logo{
  width: 150px; height: 148px;
  display: grid; place-items: center;
  margin: 24px auto 12px; /* space above and below */
  filter: drop-shadow(0 10px 28px rgba(0,0,0,.35));
}
.hero .exescope-inline .exescope-logo img{ width:100%; height:auto; display:block; }


/* === Extracted style #35 (from cyber_analysis.cta-uniform-fixedheight.html) === */
/* CTA compaction (injected) */
.cta--compact{
  padding:10px 16px !important;
  font-size:14px !important;
  line-height:1.2;
  border-radius:8px;
}
@media (min-width:768px){
  .cta--compact{ padding:12px 18px; font-size:15px; }
}
.cta-block--spaced{ margin-top:24px !important; }
@media (min-width:768px){
  .cta-block--spaced{ margin-top:24px !important; }
}


/* === Extracted style #36 (from cyber_analysis.cta-uniform-fixedheight.html) === */
/* === CTA equalize v2 (injected) === */
a.cta--equal, button.cta--equal{
  /* Sizing */
  padding:14px 28px !important;
  min-height:52px !important;
  /* Typography */
  font-size:16px !important;
  line-height:1 !important;
  font-weight:700 !important;
  /* Shape */
  border-radius:14px !important;
  /* Layout */
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  box-sizing:border-box !important;
  vertical-align:middle !important;
  white-space:nowrap !important;
}
@media (min-width:768px){
  a.cta--equal, button.cta--equal{
    padding:16px 30px !important;
    min-height:54px !important;
  }
}
/* Icon normalization */
a.cta--equal svg, button.cta--equal svg{
  width:18px !important;
  height:18px !important;
  flex:0 0 auto !important;
}
/* Optional: keep consistent gap if CTAs are adjacent */
a.cta--equal + a.cta--equal,
a.cta--equal + button.cta--equal,
button.cta--equal + a.cta--equal,
button.cta--equal + button.cta--equal{
  margin-left:24px !important;
}


/* === Extracted style #37 (from cyber_analysis.cta-uniform-fixedheight.html) === */
/* === CTA UNIFORM COMPACT (injected) === */
a.cta--uniform, button.cta--uniform,
a.cta--equal.cta--uniform, button.cta--equal.cta--uniform{
  /* Smaller metrics */
  padding:10px 16px !important;
  min-height:40px !important;
  font-size:14px !important;
  line-height:1.15 !important;
  border-radius:10px !important;
  /* Layout */
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  box-sizing:border-box !important;
  vertical-align:middle !important;
  white-space:nowrap !important;
}
@media (min-width:768px){
  a.cta--uniform, button.cta--uniform,
  a.cta--equal.cta--uniform, button.cta--equal.cta--uniform{
    padding:11px 18px !important;
    min-height:42px !important;
  }
}
/* Icon size reduced to match compact height */
a.cta--uniform svg, button.cta--uniform svg,
a.cta--equal.cta--uniform svg, button.cta--equal.cta--uniform svg{
  width:16px !important;
  height:16px !important;
  flex:0 0 auto !important;
}


/* === Extracted style #38 (from cyber_analysis.cta-uniform-fixedheight.html) === */
/* === CTA UNIFORM FIXED HEIGHT (injected) === */
a.cta--uniformFH, button.cta--uniformFH{
  /* Fixed height guarantees same visual size */
  height:42px !important; /* compact height */
  padding:0 18px !important; /* horizontal only */
  /* Typography */
  font-size:14px !important;
  line-height:1 !important;
  font-weight:700 !important;
  /* Shape */
  border-radius:10px !important;
  /* Layout */
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  box-sizing:border-box !important;
  vertical-align:middle !important;
  white-space:nowrap !important;
  /* Normalize border impact on height */
  border-width:1px !important;
}
@media (min-width:768px){
  a.cta--uniformFH, button.cta--uniformFH{
    height:44px !important;
    padding:0 20px !important;
    font-size:14.5px !important;
  }
}
/* Icon size to fit fixed height */
a.cta--uniformFH svg, button.cta--uniformFH svg{
  width:16px !important;
  height:16px !important;
  flex:0 0 auto !important;
}

/* Overlay with subtle "night sky" vibe */
    .comingsoon-overlay{
      position:fixed; inset:0; display:none; align-items:center; justify-content:center;
      background:radial-gradient(1200px 600px at 50% -10%, rgba(6,12,24,.65), rgba(6,12,24,.85)),
                 radial-gradient(2px 2px at 20% 35%, rgba(255,255,255,.25), rgba(255,255,255,0) 60%),
                 radial-gradient(1.5px 1.5px at 70% 75%, rgba(255,255,255,.20), rgba(255,255,255,0) 55%),
                 radial-gradient(1px 1px at 85% 30%, rgba(255,255,255,.18), rgba(255,255,255,0) 50%);
      z-index:9999; padding:1rem;
      backdrop-filter:saturate(120%) blur(2px);
    }
    .comingsoon-overlay.is-open{ display:flex; }

    /* Card-like modal with soft border glow */
    .comingsoon-modal{
      position:relative;
      background:linear-gradient(180deg, rgba(13,22,40,.96), rgba(9,17,33,.98));
      color:#e8eef7;
      max-width:540px; width:100%;
      border-radius:20px;
      padding:0;
      box-shadow:0 15px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(120,160,255,.15) inset;
      border:1px solid rgba(120,160,255,.18);
      overflow:hidden; transform:translateY(8px); opacity:0; transition:opacity .18s ease, transform .18s ease;
      font-family:inherit;
      isolation:isolate;
    }
    .comingsoon-modal::before{
      content:""; position:absolute; inset:0; pointer-events:none; border-radius:20px;
      background:linear-gradient(160deg, rgba(120,170,255,.18), rgba(120,170,255,0) 40%);
      mix-blend-mode:screen; opacity:.6;
    }
    .comingsoon-overlay.is-open .comingsoon-modal{ opacity:1; transform:translateY(0); }

    .comingsoon-body{ padding:1.1rem 1.1rem 1rem; }
    .comingsoon-body h3{ margin:.25rem 0 .5rem; font-size:1.2rem; font-weight:700; }
    .comingsoon-body p{ margin:.5rem 0; line-height:1.55; color:#cfd9ec; }
    .comingsoon-body strong{ color:#ffffff; font-weight:600; }

    .comingsoon-icon{
      width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center;
      background:linear-gradient(180deg, rgba(120,170,255,.18), rgba(120,170,255,.06));
      border:1px solid rgba(120,170,255,.25);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 10px 22px rgba(35,80,200,.12);
      color:#9ec3ff;
    }
    .comingsoon-icon i{ font-style:normal; } /* placeholder, keep layout even if icon lib missing */

    /* Small "X" only */
    .comingsoon-close{
      position:absolute; top:.55rem; right:.6rem;
      width:28px; height:28px; border-radius:999px;
      display:grid; place-items:center;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.12);
      color:#d9e4ff; font-size:.95rem; line-height:1; cursor:pointer;
      transition:transform .12s ease, background-color .12s ease, opacity .12s ease;
    }
    .comingsoon-close:hover{ background:rgba(255,255,255,.10); transform:scale(1.03); }
    .comingsoon-close:active{ transform:scale(.98); }

    @media (prefers-color-scheme: light){
      .comingsoon-modal{
        background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,249,255,.98));
        color:#0f172a;
        border-color:rgba(60,100,200,.18);
        box-shadow:0 15px 40px rgba(0,0,0,.12), 0 0 0 1px rgba(100,140,220,.08) inset;
      }
      .comingsoon-body p{ color:#334155; }
      .comingsoon-close{ color:#334155; background:rgba(2,6,23,.06); border-color:rgba(2,6,23,.08); }
      .comingsoon-close:hover{ background:rgba(2,6,23,.1); }
      .comingsoon-icon{ color:#2b4d9a; border-color:rgba(60,100,200,.25); background:linear-gradient(180deg, rgba(120,170,255,.15), rgba(120,170,255,.05)); }
    }