/* ==========================================================================
   NERION ENGINE PRODUCTS — SYSTEME UNIFIÉ DES EXPERTISES (_PRODUITS.CSS)
   --------------------------------------------------------------------------
   Mutualisé pour : réseau, téléphonie, stockage et virtualisation
   PARTIE 1 : BANNIÈRES EN FONDUS & PARCOURS MATÉRIELS ALTERNÉS ASYMÉTRIQUES
   ========================================================================== */

.product-page-layout-root {
    width: 100%;
    box-sizing: border-box;
}

/* --- 1. BANNIÈRES IMMERSIVES AVEC GRAPHISMES VECTORIELS INTEGRÉS --- */
.product-page-layout-root .product-hero-banner-bg {
    width: 100%;
    padding: 130px 24px 150px 24px; 
    position: relative;
    box-sizing: border-box;
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    overflow: hidden;
    margin-bottom: 0;
}

/* Effet de fondu et de halo ambiant au cœur des bannières hautes */
.product-page-layout-root .product-hero-banner-bg::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 700px;
    height: 300px;
    background: radial-gradient(circle, rgba(112, 200, 193, 0.05) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

.product-page-layout-root .product-hero-centered {
    max-width: var(--max-width-site);
    margin: 0 auto;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
}

.product-page-layout-root .hero-desc-block-centered {
    max-width: 820px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Harmonisation typographique fine de l'accroche */
.product-page-layout-root .hero-desc-block-centered h1 {
    font-size: clamp(34px, 4.5vw, 44px);
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--text-white);
    margin-bottom: 25px;
}

.product-page-layout-root .hero-desc-block-centered h1 span {
    font-weight: 800;
    color: var(--accent-light);
}

.product-page-layout-root .hero-desc-block-centered p {
    font-size: 16.5px;
    line-height: 1.7;
    color: var(--text-ecume);
    margin-bottom: 40px;
}

/* Souchages individuels des 4 textures de laboratoires */
.product-page-layout-root .banner-network {
    background-image : linear-gradient( to bottom, rgba(6, 19, 24, 0.4) 0%, rgba(6, 19, 24, 0.2) 60%, var(--bg-dark-lab) 100%), url( "data:image/svg+xml;charset=utf-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' fill='none' %3e%3cpath d='M0,250 L300,250 L350,50 L400,350 L450,250 L1000,250 L1050,100 L1100,300 L1150,250 L1440,250' stroke='%2370C8C1' stroke-width='1.5' stroke-opacity='0.25' /%3e%3cpath d='M0,200 L400,200 L430,120 L460,260 L490,200 L1440,200' stroke='%23E2947E' stroke-width='1' stroke-opacity='0.12' /%3e%3c/svg%3e");
}

.product-page-layout-root .banner-voice {
    /* 🛠️ RETIRE UNIQUEMENT LES ESPACES À L'INTÉRIEUR DE L'URL CI-DESSOUS APRÈS COLLAGE */
    background-image : linear-gradient( to bottom, rgba(6, 19, 24, 0.4) 0%, rgba(6, 19, 24, 0.2) 60%, var(--bg-dark-lab) 100%), url("data:image/svg+xml;charset=utf-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' fill='none' %3e%3cpath d='M0,150 Q180,80 360,150 T720,150 T1080,150 T1440,150' stroke='%2370C8C1' stroke-width='1.5' stroke-opacity='0.25' /%3e%3cpath d='M0,220 Q180,290 360,220 T720,220 T1080,220 T1440,220' stroke='%23E2947E' stroke-width='1.5' stroke-opacity='0.15' /%3e%3cpath d='M0,180 Q360,300 720,180 T1440,180' stroke='%2370C8C1' stroke-width='1' stroke-dasharray='6 6' stroke-opacity='0.12' /%3e%3c/svg%3e");
}

.product-page-layout-root .banner-storage {
    /* 🛠️ RETIRE UNIQUEMENT LES ESPACES À L'INTÉRIEUR DE L'URL CI-DESSOUS APRÈS COLLAGE */
    background-image : linear-gradient( to bottom, rgba(6, 19, 24, 0.4) 0%, rgba(6, 19, 24, 0.2) 60%, var(--bg-dark-lab) 100%) , url("data:image/svg+xml;charset=utf-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' fill='none' %3e%3cpath d='M0,100 L480,100 L960,300 L1440,300' stroke='%2370C8C1' stroke-width='1.5' stroke-opacity='0.2' /%3e%3cpath d='M0,120 L480,120 L960,320 L1440,320' stroke='%2370C8C1' stroke-width='1' stroke-dasharray='4 4' stroke-opacity='0.15' /%3e%3cpath d='M0,280 L520,280 L1000,120 L1440,120' stroke='%23E2947E' stroke-width='1.5' stroke-opacity='0.15' /%3e%3c/svg%3e" );
}

.product-page-layout-root .banner-core {
    /* 🛠️ RETIRE UNIQUEMENT LES ESPACES À L'INTÉRIEUR DE L'URL CI-DESSOUS APRÈS COLLAGE */
    background-image : linear-gradient( to bottom, rgba(6, 19, 24, 0.4) 0%, rgba(6, 19, 24, 0.2) 60%, var(--bg-dark-lab) 100%), url("data:image/svg+xml;charset=utf-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' fill='none' %3e%3cpath d='M0,200 C360,300 720,100 1080,250 C1260,325 1380,280 1440,230' stroke='%2370C8C1' stroke-width='1.5' stroke-opacity='0.25' /%3e%3cpath d='M0,150 C400,80 800,280 1200,180 C1320,146 1400,190 1440,210' stroke='%2370C8C1' stroke-width='1' stroke-dasharray='4 4' stroke-opacity='0.15' /%3e%3cpath d='M0,280 C300,180 600,320 900,220 C1200,120 1350,240 1440,260' stroke='%23E2947E' stroke-width='1' stroke-opacity='0.12'/%3e%3c/svg%3e");
    animation: translationImpulsionCore 10s infinite ease-in-out, defilementFluxPointilles 15s infinite linear;
}

/* --- 2. L'ENVELOPPE NOIRE DU COCKPIT MATÉRIEL HAUT --- */
.product-page-layout-root .product-upper-dark-zone {
    background-color: #061318;
    padding: 40px 24px 60px 24px;
    width: 100%;
    box-sizing: border-box;
}

.product-page-layout-root .section-hardware {
    max-width: var(--max-width-site);
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.product-page-layout-root .hardware-title {
    font-size: 30px;
    font-weight: 300;
    color: var(--text-white);
    margin-bottom: 75px;
    text-align: center;
}

.product-page-layout-root .hardware-title span {
    font-weight: 800;
    color: var(--accent-light);
}

/* Fil de guidage néon horizontal au-dessus de l'infrastructure */
.product-page-layout-root .section-hardware .hardware-container h2{
    font-size: 2.3rem;
}

.product-page-layout-root .hardware-title::before {
    content: "";
    display: block;
    width: 40px;
    height: 2px;
    background-color: var(--accent-light);
    margin: 0 auto 15px auto;
    box-shadow: 0 0 10px rgba(112, 200, 193, 0.6);
}

/* 🛠️ CORRECTIF CRUCIAL : Restauration de l'infrastructure des lignes matérielles (Grille PC) */
.product-page-layout-root .hardware-row-layout {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr; /* Découpe double colonne asymétrique pro */
    gap: 70px;
    margin-bottom: 110px;
    align-items: center;
    width: 100%;
}

/* 🛠️ LE PIVOT INVERSÉ RE-SOUCHÉ : Force le composant 2 à s'aligner horizontalement à droite */
.product-page-layout-root .hardware-row-layout.hw-row-reverse-clean {
    grid-template-columns: 0.9fr 1.1fr;
}
.product-page-layout-root .hardware-row-layout.hw-row-reverse-clean .hw-text-side {
    order: 2; /* Glisse le texte à droite */
}
.product-page-layout-root .hardware-row-layout.hw-row-reverse-clean .hw-visual-side {
    order: 1; /* Glisse la photo produit à gauche */
}

.product-page-layout-root .hw-text-side {
    text-align: left;
}

.product-page-layout-root .hw-step-badge {
    display: inline-block;
    font-family: monospace;
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-light);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.product-page-layout-root .hw-text-side h3 {
    font-size: 24px;
    font-weight: 700; /* Force le lettrage lourd et affirmé de la maquette */
    color: var(--text-ecume);
    margin-bottom: 20px;
    letter-spacing: -0.01em; /* Resserre légèrement pour un look haut de gamme épuré */
}

.product-page-layout-root .hw-text-side p {
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--text-ecume);
    margin-bottom: 18px;
    text-align: justify;
}

.product-page-layout-root .hw-text-side p strong {
    color: var(--accent-light);
}

.product-page-layout-root .hw-visual-side {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.product-page-layout-root .hw-lab-spec-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    width: 100%;
    max-width: 400px;
}

.product-page-layout-root .hw-lab-product {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 220px;
    object-fit: contain;
    filter: drop-shadow(0 15px 35px rgba(4, 13, 18, 0.65));
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.product-page-layout-root .hardware-row-layout:hover .hw-lab-product {
    transform: scale(1.04) translateY(-5px);
}

/* Petit cartel horizontal de laboratoire */
.product-page-layout-root .hw-lab-cartel-horizontal {
    font-family: monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: rgba(112, 200, 193, 0.6);
    background: rgba(18, 53, 68, 0.25);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 6px 16px;
    border-radius: 4px;
    border: 1px solid rgba(112, 200, 193, 0.12);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: var(--transition-fluid);
}

.product-page-layout-root .hardware-row-layout:hover .hw-lab-cartel-horizontal {
    border-color: rgba(112, 200, 193, 0.3);
    color: var(--text-white);
}

.product-page-layout-root .hw-lab-led {
    width: 6px;
    height: 6px;
    background-color: #52DE97;
    border-radius: 50%;
    box-shadow: 0 0 6px #52DE97;
    display: inline-block;
}

.product-page-layout-root .hw-lab-led.corail {
    background-color: var(--corail);
    box-shadow: 0 0 6px var(--corail);
}

/* ==========================================================================
   NERION ENGINE PRODUCTS — SYSTEME UNIFIÉ DES EXPERTISES (_PRODUITS.CSS)
   --------------------------------------------------------------------------
   PARTIE 2 : TEXTURES LOGICIELLES FLAT DESIGN, PRICING & RESPONSIVE MOBILE
   ========================================================================== */

/* --- 1. ARCHITECTURE DE LA NAPPE INFÉRIEURE BLEU ARDOISE --- */
.product-page-layout-root .product-lower-light-zone { 
    background-color: var(--bg-main); 
    padding: 100px 24px 120px 24px; 
    width: 100%; 
    box-sizing: border-box;
}

.product-page-layout-root .software-text h2 {
    font-size: 30px;
    font-weight: 300;
    color: var(--text-white);
    margin-bottom: 24px;
    text-align: left;
}

.product-page-layout-root .software-text ul {
    padding-top: 15px;
}

.product-page-layout-root .software-text h2 span {
    font-weight: 800;
    color: var(--accent-light);
}

/* Fil conducteur électrique néon au-dessus du H2 logiciel */
.product-page-layout-root .software-text h2::before {
    content: "";
    display: block;
    width: 40px;
    height: 2px;
    background-color: var(--accent-light); 
    margin-bottom: 15px;
    box-shadow: 0 0 10px rgba(112, 200, 193, 0.6); 
}

/* 🛠️ MOTEUR D'INJECTION DE PUCES VECTORIELLES : Losange turquoise standardisé Base64 */
.product-page-layout-root .features-list-tech {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.product-page-layout-root .features-list-tech li {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text-ecume);
    position: relative;
    padding-left: 28px;            
    text-align: left;
    display: block;                
}

.product-page-layout-root .features-list-tech li strong {
    font-weight: 800;
    color: var(--accent-light);
}

.product-page-layout-root .features-list-tech li::before {
    content: "";
    display: inline-block;         
    position: absolute;
    left: 0;
    top: 5px;                      
    width: 14px;                   
    height: 14px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNzBDOEMxIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBvbHlnb24gcG9pbnRzPSIxMiAyIDIgMTIgMTIgMjIgMjIgMTIgMTIgMiIvPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjIiIGZpbGw9IiM3MEM4QzEiLz48L3N2Zz4=");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* ==========================================================================
   --- 2. RESTAURATION DE L'ICONOGRAPHIE FLAT DESIGN INTERACTIVE ---
   ========================================================================== */

/* 📡 BRIQUE NETWORK — LES COMMUTATEURS MANAGÉS */
.product-page-layout-root .software-abstract-visual:not(.vm-containers):not(.vocal-wave-bars):not(.database-nodes) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 0 20px;
}

.product-page-layout-root .software-abstract-visual:not(.vm-containers):not(.vocal-wave-bars):not(.database-nodes) div {
    height: 24px; 
    width: 95%;
    background: #0d222d;
    border: 1px solid rgba(112, 200, 193, 0.15);
    border-radius: 4px;
    position: relative;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
    transition: var(--transition-fluid);
}

.product-page-layout-root .software-abstract-visual:not(.vm-containers):not(.vocal-wave-bars):not(.database-nodes) div::after {
    content: "■ ■ ■ ■";
    font-family: monospace;
    font-size: 10px;
    font-weight: 900;
    color: var(--accent-light);
    text-shadow: 0 0 6px var(--accent-light);
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    letter-spacing: 2px;
    animation: pulsationDiodesVeille 2s infinite ease-in-out;
}
.product-page-layout-root .software-abstract-visual:not(.vm-containers):not(.vocal-wave-bars):not(.database-nodes) div:nth-child(2)::after {
    color: var(--corail);
    text-shadow: 0 0 6px var(--corail);
    animation-delay: 0.4s;
}

.product-page-layout-root .software-abstract-visual:not(.vm-containers):not(.vocal-wave-bars):not(.database-nodes) div::before {
    font-family: monospace;
    font-size: 9px;
    font-weight: 700;
    color: rgba(112, 200, 193, 0.4);
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    letter-spacing: 1px;
    transition: color 0.3s ease;
}
.product-page-layout-root .software-abstract-visual:not(.vm-containers):not(.vocal-wave-bars):not(.database-nodes) div:nth-child(1)::before { content: "RACK_01 // CORE_ROUTER"; }
.product-page-layout-root .software-abstract-visual:not(.vm-containers):not(.vocal-wave-bars):not(.database-nodes) div:nth-child(2)::before { content: "RACK_02 // BACKUP_WAN"; color: rgba(226, 148, 126, 0.5); }
.product-page-layout-root .software-abstract-visual:not(.vm-containers):not(.vocal-wave-bars):not(.database-nodes) div:nth-child(3)::before { content: "RACK_03 // SWITCH_POE"; }

.product-page-layout-root .software-layout:hover .software-abstract-visual:not(.vm-containers):not(.vocal-wave-bars):not(.database-nodes) div { border-color: var(--accent-light); background: rgba(112, 200, 193, 0.04); }
.product-page-layout-root .software-layout:hover .software-abstract-visual:not(.vm-containers):not(.vocal-wave-bars):not(.database-nodes) div:nth-child(2) { border-color: var(--corail); background: rgba(226, 148, 126, 0.04); }
.product-page-layout-root .software-layout:hover .software-abstract-visual:not(.vm-containers):not(.vocal-wave-bars):not(.database-nodes) div::before { color: var(--text-white); }

/* 🎙️ BRIQUE VOICE — LE SPECTRE AUDIO HORIZONTAL SYCRONE */
.product-page-layout-root .product-lower-light-zone .software-abstract-visual.vocal-wave-bars {
    display: flex;
    flex-direction: row;          /* RE-SOUCHAGE CRUCIAL : Force la ligne horizontale PC & Mobile */
    justify-content: space-between;
    align-items: center;
    padding: 0 clamp(60px, 12vw, 110px); /* Resserré sagement au centre */
    height: 160px;
    width: 100%;
    box-sizing: border-box;
}

.product-page-layout-root .software-abstract-visual.vocal-wave-bars div {
    width: 12px;
    border-radius: 20px;
    box-sizing: border-box;
    transition: box-shadow 0.3s ease;
    animation: respirationOndeAudio 2.8s infinite ease-in-out;
}
.product-page-layout-root .software-abstract-visual.vocal-wave-bars div:nth-child(odd) { background-color: var(--corail); }
.product-page-layout-root .software-abstract-visual.vocal-wave-bars div:nth-child(even) { background-color: var(--accent-light); }
.product-page-layout-root .software-abstract-visual.vocal-wave-bars div:nth-child(1) { animation-delay: 0.0s; }
.product-page-layout-root .software-abstract-visual.vocal-wave-bars div:nth-child(2) { animation-delay: 0.3s; }
.product-page-layout-root .software-abstract-visual.vocal-wave-bars div:nth-child(3) { animation-delay: 0.6s; }
.product-page-layout-root .software-abstract-visual.vocal-wave-bars div:nth-child(4) { animation-delay: 0.9s; }
.product-page-layout-root .software-abstract-visual.vocal-wave-bars div:nth-child(5) { animation-delay: 1.2s; }

/* Au survol de la carte complète : Le mouvement reste zen, l'éclat rayonne intensément */
.software-layout:hover .software-abstract-visual.vocal-wave-bars div:nth-child(odd) {
    box-shadow: 0 0 18px var(--corail);
}
.software-layout:hover .software-abstract-visual.vocal-wave-bars div:nth-child(even) {
    box-shadow: 0 0 18px var(--accent-light);
}

/* 💾 BRIQUE STORAGE — BAIE DE DISQUES RAIDS EXTERNALISÉS */
.product-page-layout-root .software-abstract-visual.database-nodes {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 95%;
    margin: 0 auto;
}

.product-page-layout-root .software-abstract-visual.database-nodes > div {
    background: rgba(12, 33, 43, 0.6); 
    border: 1px solid rgba(112, 200, 193, 0.15);
    border-radius: 4px;
    padding: 12px 16px;
    position: relative;
    padding-left: 35px; 
    box-sizing: border-box;
    display: block; 
    width: 100%;
    transition: var(--transition-fluid);
}
.product-page-layout-root .software-abstract-visual.database-nodes > div:nth-child(1) { border: 1px dashed rgba(216, 137, 114, 0.3); }

.product-page-layout-root .software-abstract-visual.database-nodes > div::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    animation: pulsationDiodesVeille 1.5s infinite ease-in-out;
}
.product-page-layout-root .software-abstract-visual.database-nodes > div:nth-child(1)::before { background-color: var(--corail); }
.product-page-layout-root .software-abstract-visual.database-nodes > div:nth-child(2)::before { background-color: #52DE97; animation-delay: 0.3s; }
.product-page-layout-root .software-abstract-visual.database-nodes > div:nth-child(3)::before { background-color: #52DE97; animation-delay: 0.6s; }

.product-page-layout-root .software-abstract-visual.database-nodes > div::after {
    font-family: monospace;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: block;
    text-align: left;
}
.product-page-layout-root .software-abstract-visual.database-nodes > div:nth-child(1)::after { content: "VOL_01 // ARCHIVE_RAID [SYNCHRO]"; color: var(--corail); }
.product-page-layout-root .software-abstract-visual.database-nodes > div:nth-child(2)::after { content: "VOL_02 // DRIVE_CLOUD [ONLINE]"; color: var(--accent-light); }
.product-page-layout-root .software-abstract-visual.database-nodes > div:nth-child(3)::after { content: "VOL_03 // SNAPSHOT_LOCAL [READY]"; color: var(--accent-light); }

.product-page-layout-root .software-layout:hover .software-abstract-visual.database-nodes > div { background: rgba(112, 200, 193, 0.08); border-color: var(--accent-light); }
.product-page-layout-root .software-layout:hover .software-abstract-visual.database-nodes > div:nth-child(1) { background: rgba(226, 148, 126, 0.08); border-color: var(--corail); }

/* 🖥️ BRIQUE CORE — MACHINE VIRTUELLES COMPARTIMENTÉES */
/* 1. Ajustement de l'enveloppe de l'hyperviseur (Axe horizontal au centre) */
.product-page-layout-root .product-lower-light-zone .software-abstract-visual.vm-containers {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    height: 160px;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    background: transparent;
    position: relative;
}

/* Génération du bandeau de châssis général du rack de calcul */
.product-page-layout-root .product-lower-light-zone .software-abstract-visual.vm-containers::after {
    content: "RACK // UNIT_02";
    position: absolute;
    top: -10px;
    right: 15px;
    font-size: 9px;
    font-family: monospace;
    color: rgba(112, 200, 193, 0.35);
    letter-spacing: 1px;
}

/* 2. Redressement et habillage des 3 containers LXC / VM */
.product-page-layout-root .product-lower-light-zone .software-abstract-visual.vm-containers div {
    display: block;
    height: 24px;
    width: 95%;
    background: #0d222d;
    border: 1px solid rgba(112, 200, 193, 0.15);
    border-radius: 4px;
    position: relative;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
    transition: var(--transition-fluid);
}

/* Spécification du container 3 en état d'alerte (Dashed Corail) */
.product-page-layout-root .product-lower-light-zone .software-abstract-visual.vm-containers div:nth-child(3) {
    border: 1px dashed rgba(226, 148, 126, 0.4);
}

/* 3. DESSIN DES DIODES DE STATUTS (TÉMOINS LUMINEUX VIRTUALISATION) */
.product-page-layout-root .product-lower-light-zone .software-abstract-visual.vm-containers div::after {
    content: "■ ■ ■ ■";
    font-family: monospace;
    font-size: 10px;
    font-weight: 900;
    color: #52DE97; /* Vert de production stable pour les deux premières VM */
    text-shadow: 0 0 6px #52DE97;
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    letter-spacing: 2px;
    animation: pulsationDiodesVeille 1.5s infinite ease-in-out;
}

/* La troisième instance bascule sur la couleur d'alerte Corail Nerion */
.product-page-layout-root .product-lower-light-zone .software-abstract-visual.vm-containers div:nth-child(3)::after {
    color: var(--corail);
    text-shadow: 0 0 6px var(--corail);
    animation-delay: 0.5s;
}

/* 4. INJECTION ET RE-STYLISATION DES LABELS ET TAGS TECHNIQUES D'ENVIRONNEMENTS */
.product-page-layout-root .product-lower-light-zone .software-abstract-visual.vm-containers div::before {
    font-family: monospace;
    font-size: 9px;
    font-weight: 700;
    color: rgba(112, 200, 193, 0.4);
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

/* Attribution chirurgicale des noms d'instances de calcul */
.product-page-layout-root .product-lower-light-zone .software-abstract-visual.vm-containers div:nth-child(1)::before { content: "LXC_101 // ERP_METIER [ONLINE]"; }
.product-page-layout-root .product-lower-light-zone .software-abstract-visual.vm-containers div:nth-child(2)::before { content: "LXC_102 // SQL_CLUSTER [ONLINE]"; }
.product-page-layout-root .product-lower-light-zone .software-abstract-visual.vm-containers div:nth-child(3)::before { content: "VM_201 // BACKUP_SYS [INSULATED]"; color: rgba(226, 148, 126, 0.6); }

/* 5. INTERACTION SURVOL PROXMOX EFFECT (SUR-ILLUMINATION NÉON) */
.product-page-layout-root .product-lower-light-zone .software-layout:hover .software-abstract-visual.vm-containers div { 
    border-color: var(--accent-light); 
    background: rgba(112, 200, 193, 0.04); 
}
.product-page-layout-root .product-lower-light-zone .software-layout:hover .software-abstract-visual.vm-containers div:nth-child(3) { 
    border-color: var(--corail); 
    background: rgba(226, 148, 126, 0.04); 
}
.product-page-layout-root .product-lower-light-zone .software-layout:hover .software-abstract-visual.vm-containers div::before { 
    color: var(--text-white); 
}
.product-page-layout-root .product-lower-light-zone .software-layout:hover .software-abstract-visual.vm-containers div:nth-child(3)::before { 
    color: var(--corail); 
}

/* --- 3. COMMUTATIONS ET EFFETS EN RACK DE LA BOÎTE TARIFAIRE BASSE --- */
.product-page-layout-root .product-lower-light-zone .cta-pricing-zone {
    max-width: 950px;
    margin: 60px auto 0 auto;
    padding: 50px 45px;
    background: rgba(18, 53, 68, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 4px;
    border: 1px solid rgba(112, 200, 193, 0.15);
    border-top: 3px solid var(--corail); /* Ligne d'action supérieure */
    box-shadow: 0 20px 45px rgba(4, 13, 18, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    box-sizing: border-box;
    text-align: center;
}

.product-page-layout-root .product-lower-light-zone .cta-pricing-box {
    width: 75%;
    margin: auto;
}

.product-page-layout-root .product-lower-light-zone .cta-pricing-box h3 {
    font-size: 35px;
    font-weight: 300;
    color: var(--text-white);
    margin-bottom: 10px;
    text-align: center;
}

.product-page-layout-root .product-lower-light-zone .cta-pricing-box h3 span {
    font-weight: 800;
    color: var(--accent-light);
}

.product-page-layout-root .product-lower-light-zone .cta-pricing-box p {
    margin-bottom: 20px;
}

/* ==========================================================================
   4. CEINTURE DE SÉCURITÉ RESPONSIVE COMPLÈTE (TOUT AU PLANCHER DU FICHIER)
   ========================================================================== */
@media (max-width: 768px) {
    /* --- STRUCTURES DES BANNIÈRES ET DES NAPPES --- */
    .product-page-layout-root .product-hero-banner-bg { padding: 80px 16px 100px 16px; }
    .product-page-layout-root .product-upper-dark-zone { padding: 60px 16px 40px 16px; }
    .product-page-layout-root .product-lower-light-zone { padding: 60px 16px 80px 16px; }

    /* --- PARCOURS MATÉRIEL HAUT (COMPOSANTS 1, 2, 3) --- */
    .product-page-layout-root .hardware-row-layout,
    .product-page-layout-root .hardware-row-layout.hw-row-reverse-clean {
        display: flex;
        flex-direction: column;
        gap: 35px;
        text-align: center;
        width: 100%;
    }

    /* Le visuel passe toujours au-dessus du texte descriptif sur mobile */
    .product-page-layout-root .hardware-row-layout .hw-text-side,
    .product-page-layout-root .hardware-row-layout.hw-row-reverse-clean .hw-text-side { 
        order: 2; 
        text-align: center; 
    }
    .product-page-layout-root .hardware-row-layout .hw-visual-side,
    .product-page-layout-root .hardware-row-layout.hw-row-reverse-clean .hw-visual-side { 
        order: 1; 
    }
    
    .product-page-layout-root .hardware-title { text-align: center; }
    .product-page-layout-root .hw-step-badge { margin: 0 auto 10px auto; display: table; }
    .product-page-layout-root .hw-lab-spec-container { max-width: 320px; margin: 0 auto; }
    .product-page-layout-root .hw-lab-product { max-height: 140px; }

    /* --- 🛠️ APPLATISSEMENT DE LA ZONE LOGICIELLE BASSE (MONITORING) --- */
    .product-page-layout-root .product-lower-light-zone .software-layout {
        display: flex;
        flex-direction: column; /* Écrase la grille PC et force l'empilement vertical pur */
        gap: 45px;
        width: 100%;
    }

    /* Le pavé textuel passe en tête de section et s'aligne au milieu */
    .product-page-layout-root .product-lower-light-zone .software-layout .software-text {
        order: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100%;
    }

    .product-page-layout-root .product-lower-light-zone .software-layout .software-text h2 {
        text-align: center;
        width: 100%;
    }

    .product-page-layout-root .product-lower-light-zone .software-layout .software-text h2::before {
        margin: 0 auto 15px auto; /* Centre le liseré bleu sous le titre */
    }

    .product-page-layout-root .product-lower-light-zone .software-layout .software-text p {
        text-align: center;
        width: 100%;
    }

    /* La liste à puces losanges reste alignée à gauche pour un look technique */
    .product-page-layout-root .product-lower-light-zone .software-layout .software-text .features-list-tech {
        width: 100%;
        max-width: 500px;
        text-align: left;
        padding: 0 10px;
    }

    /* L'animation (VM Proxmox, disques ou spectre) se glisse en dessous */
    .product-page-layout-root .product-lower-light-zone .software-layout .software-abstract-visual {
        order: 2;
        width: 100%;
        max-width: 380px; /* Redonne son envergure d'origine */
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: auto;
    }

    /* Conserve la ligne horizontale exclusive pour le spectre audio de la page Voice */
    .product-page-layout-root .product-lower-light-zone .software-layout .software-abstract-visual.vocal-wave-bars {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0 40px;
        height: 160px;
    }

    /* --- 🛠️ APPLATISSEMENT EXCLUSIF DE LA ZONE LOGICIELLE BASSE VIA SECTION-SOFTWARE --- */
    .product-page-layout-root .product-lower-light-zone .section-software .software-layout {
        display: flex;
        flex-direction: column; /* Force enfin l'empilement l'un en dessous de l'autre */
        gap: 45px;
        width: 100%;
        box-sizing: border-box;
    }

    /* Le visuel dynamique (VM, disques ou spectre) se positionne en premier en haut */
    .product-page-layout-root .product-lower-light-zone .section-software .software-layout .software-abstract-visual {
        order: 1; /* Propulse l'animation au sommet */
        width: 100%;
        max-width: 380px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: auto;
    }

    /* Maintien strict de l'alignement horizontal exclusif pour le spectre de la page Voice */
    .product-page-layout-root .product-lower-light-zone .section-software .software-layout .software-abstract-visual.vocal-wave-bars {
        display: flex;
        flex-direction: row; /* Force les 5 barres côte à côte sur mobile */
        justify-content: space-between;
        align-items: center;
        padding: 0 35px;
        height: 160px;
    }

    /* Le pavé de texte glisse sagement en deuxième position juste en dessous */
    .product-page-layout-root .product-lower-light-zone .section-software .software-layout .software-text {
        order: 2; /* Glisse le texte sous le composant vectoriel */
        display: flex;
        flex-direction: column;
        align-items: center; /* Centre le h2 et le paragraphe au milieu du mobile */
        text-align: center;
        width: 100%;
    }

    .product-page-layout-root .product-lower-light-zone .section-software .software-layout .software-text h2 {
        text-align: center;
        width: 100%;
        margin-bottom: 20px;
    }

    .product-page-layout-root .product-lower-light-zone .section-software .software-layout .software-text h2::before {
        margin: 0 auto 15px auto; /* Centre le petit liseré bleu sous le titre */
    }

    .product-page-layout-root .product-lower-light-zone .section-software .software-layout .software-text p {
        text-align: center;
        width: 100%;
        margin-bottom: 25px;
    }

    /* La liste à puces losanges s'ajuste au centre tout en gardant sa lecture alignée à gauche */
    .product-page-layout-root .product-lower-light-zone .section-software .software-layout .software-text .features-list-tech {
        width: 100%;
        max-width: 500px;
        text-align: left;
        padding: 0 10px;
    }

    /* --- CTA DE TARIFICATION & BOUTONS --- */
    .product-page-layout-root .product-lower-light-zone .cta-pricing-zone { padding: 35px 20px; }
    .product-page-layout-root .product-lower-light-zone .cta-pricing-box { width: 100%; }
    .product-page-layout-root .product-lower-light-zone .cta-pricing-box h3 { text-align: center; }
    
    .product-page-layout-root .btn,
    .product-page-layout-root .product-hero-banner-bg .hero-desc-block-centered .btn {
        display: table;
        width: max-content;
        max-width: 85%;
        padding: 12px 24px;
        font-size: 13px;
        margin: 25px auto 0 auto;
    }
}


/* ==========================================================================
5. TIMING CODES & KEYFRAMES DE VEILLE SYNCHRONISÉS
========================================================================== */
@keyframes pulsationDiodesVeille { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
@keyframes respirationOndeAudio { 0%, 100% { height: 35px; } 50% { height: 135px; } }


/* ==========================================================================
   🛠️ COUPLAGE & RE-ALIGNEMENT CHIRURGICAL DES PAGES SOLUTIONS
   ========================================================================== */

/* --- PALIER 1 : RE-STAURATION DU TAG VOLANT ET DES LIGNES VECTORIELLES --- */
.product-page-layout-root .product-hero-banner-bg .product-badge {
    display: inline-block;
    background: rgba(112, 200, 193, 0.12);
    color: var(--accent-light);
    font-size: 12px;                     
    font-weight: 800;                        
    text-transform: uppercase;
    letter-spacing: 2px;                     
    padding: 8px 16px;                       
    border-radius: 4px;
    margin-bottom: 20px;
}

/* Restauration du bouton Hero "Consulter nos formules locatives" */
.product-page-layout-root .product-hero-banner-bg .btn {
    display: inline-block;
    background-color: var(--corail);
    color: var(--bg-dark-lab);
    padding: 16px 38px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 8px 25px rgba(216, 137, 114, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: var(--transition-fluid);
    cursor: pointer;
}

.product-page-layout-root .product-hero-banner-bg .btn:hover {
    background-color: var(--text-white);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 15px 30px rgba(112, 200, 193, 0.35);
}


/* --- PALIER 2 : RE-DRAIDAGE DU BLOC LOGICIEL BAS EN DOUBLE COLONNE --- */
.product-page-layout-root .product-lower-light-zone .software-layout {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr; /* Visuel à gauche, pavé de texte à droite */
    gap: 60px;
    align-items: center;
    max-width: var(--max-width-site);
    margin: 0 auto 100px auto;
}

/* Rétablissement de la structure d'affichage du visuel dynamique gauche */
.product-page-layout-root .product-lower-light-zone .software-abstract-visual {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 0 20px;
    height: 160px;
    background: transparent;
}


/* --- PALIER 3 : FIX DU BOUTON DE CONVERSION DE TARIFS FINAL --- */
.product-page-layout-root .product-lower-light-zone .cta-pricing-zone .btn {
    display: inline-block;
    background-color: var(--corail);
    color: var(--bg-dark-lab);            
    padding: 16px 38px;
    border-radius: 4px;                  
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 8px 25px rgba(216, 137, 114, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: var(--transition-fluid);
    margin-top: 15px;
    width: max-content;
}

.product-page-layout-root .product-lower-light-zone .cta-pricing-zone .btn:hover {
    background-color: var(--text-white);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 15px 30px rgba(112, 200, 193, 0.35);
}

.product-page-layout-root .product-lower-light-zone .cta-pricing-zone p{
    padding: 15px 0;
}