/* ====== Element Styles & Components ====== */
/* Header & Navigation */
section {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

}
.text-bleu{color: var(--Norme-AA-bleu-principal-2);}
/* Section Content - 3 Column Layout */
.section-content {
    gap: var(--Spacing-scale-sp-5);
    align-items: start;
    max-width: var(--max-width);
}

/* Base Container */
.container-section {
    max-width: var(--max-width);
}

/* declare section */
.section-left {
    display: flex;
    flex-direction: column;
    gap: var(--Spacing-scale-sp-4);
}

.section-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-right {
    display: flex;
    flex-direction: column;
    gap: var(--Spacing-scale-sp-5);
}

/* Cards Grid System */
.cards-grid {
    gap: var(--Spacing-scale-sp-5);
}

/* design header */
.header {
    background-color: var(--Cat-Blanc-Blanc-100);
    border-bottom: 1px solid var(--gris-border);
    padding: var(--Spacing-scale-sp-5) 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Header Layout */
.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--Spacing-scale-sp-5);
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--margin-horizontal);
}


.header-actions {
    display: flex;
    align-items: center;
    gap: var(--Spacing-scale-sp-4);
    flex-shrink: 0;
}

.logo {
    flex-shrink: 0;
    width: 160px;
}

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

.nav-menu {
    display: flex;
    gap: var(--Spacing-scale-sp-scale-sp-4);
    flex: 1;
    align-items: center;
    justify-content: center;
}

.nav-item {
    font-size: var(--lgende);
    font-style: italic;
    color: var(--Cat-Noir-Noir-100);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.nav-item:hover {
    color: var(--Norme-AA-bleu-principal-2);
}

.language-selector {
    font-size: var(--lgende);
    font-style: italic;
    color: var(--Cat-Noir-Noir-100);
}

/* Buttons */
.btn-primary-header {
    background-color: var(--Norme-AA-bleu-principal-2);
    color: var(--Cat-Blanc-Blanc-100);
    border: 1px solid var(--Cat-Blanc-Blanc-100);
    padding: var(--Spacing-scale-sp-3) var(--Spacing-scale-sp-5);
    border-radius: var(--Corner-arrondi);
    font-family: var(--font-family);
    font-size: var(--corps);
    font-weight: 700;
    cursor: pointer;
    width: 160px;
    white-space: nowrap;
}

.btn-primary-header:hover {
    background-color: #0056b3;
}

.btn-gradient {
    background: linear-gradient(to right, var(--Norme-AA-bleu-principal-2), var(--Norme-AA-bleu-principal-1));
    color: var(--Cat-Blanc-Blanc-100);
    border: 1px solid var(--Cat-Blanc-Blanc-100);
    padding: var(--Spacing-scale-sp-3) var(--Spacing-scale-sp-5);
    border-radius: var(--Corner-arrondi);
    font-family: var(--font-family);
    font-size: var(--corps);
    font-weight: 700;
    cursor: pointer;
    flex: 1 0 0;
    text-align: center;
    line-height: normal;
    font-style: normal;
    align-self: stretch;
}

.btn-gradient:hover {
    background: var(--survol-Degrad-Sagemcom-Norme-AA);
}

.btn-gradient:active {
    background: var(--active-Degrad-Sagemcom-Norme-AA);
}

.btn-gradient:disable {
    border: 1px solid var(--Cat-Gris-Gris-5);
    background: var(--Cat-Gris-Gris-5);
}


.btn-outline {
    background-color: var(--Cat-Blanc-Blanc-100);
    color: var(--Norme-AA-bleu-principal-2);
    border: 1px solid var(--Norme-AA-bleu-principal-2);
    padding: var(--Spacing-scale-sp-3) var(--Spacing-scale-sp-5);
    border-radius: var(--Corner-arrondi);
    font-family: var(--font-family);
    font-size: var(--corps);
    font-weight: 700;
    cursor: pointer;
    flex: 1 0 0;
    text-align: center;
    line-height: normal;
    font-style: normal;
    align-self: stretch;
}

.btn-outline:hover {
    border: 1px solid var(--Norme-AA-bleu-principal-2-Noir-30);
    background: var(--Norme-AA-bleu-principal-2-Blanc-80);
}

.btn-outline:active {
    border: 1px solid var(--Norme-AA-bleu-principal-2-Blanc-30);
    background: var(--Norme-AA-bleu-principal-2-Blanc-60);
}

.btn-outline:disable {
    border: 1px solid var(--Cat-Gris-Gris-5);
    background: var(--Cat-Blanc-Blanc-100);
}

.btn-card, .btn-card-2-uni {
    background-color: var(--Norme-AA-bleu-principal-2);
    color: var(--Cat-Blanc-Blanc-100);
    border: 1px solid var(--Cat-Blanc-Blanc-100);
    padding: var(--Spacing-scale-sp-3) var(--Spacing-scale-sp-5);
    border-radius: var(--Corner-arrondi);
    font-family: var(--font-family);
    font-size: var(--corps);
    font-weight: 700;
    cursor: pointer;
    width: 100%;
    align-items: center;
}

.btn-card:hover, 
.btn-card a:hover{
    color: var(--Cat-Blanc-Blanc-100);
    background: var(--Norme-AA-bleu-principal-2-Noir-30);
}

.btn-card:active {
    background: var(--Norme-AA-bleu-principal-2-Blanc-30);
}

.btn-card:disabled {
    background: var(--Norme-AA-bleu-principal-2-Blanc-30);
}



.btn-card-2-uni {
    background: var(--Norme-AA-bleu-principal-1);
}

.btn-card-2-uni:hover {
    background: var(--Norme-AA-bleu-principal-2-Noir-30);
}

.btn-card-2-uni:active {
    background: var(--Norme-AA-bleu-principal-2-Blanc-30);
}

.btn-card-2-uni:disabled {
    border: 1px solid var(--Cat-Gris-Gris-5);
    background: var(--Cat-Gris-Gris-5);
}


/* Hero Section */
.hero {
    position: relative;
    background-color: #3B3730;
    background-size: cover;
    background-position: center;
    padding: var(--Spacing-scale-Marge-Top-Bottom) var(--Spacing-scale-Marge-Left-Right);
    display: flex;
    align-items: flex-end;
}

/* Hero Layout */
.hero-container {
    position: relative;
    z-index: 2;
    gap: 109px;
    align-items: flex-end;
    max-width: var(--max-width);
    margin: 0 auto;
    width: 100%;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
/*    background: linear-gradient(0deg, var(--Cat-Noir-Noir-50, rgba(0, 0, 0, 0.50)) 0%, var(--Cat-Noir-Noir-50, rgba(0, 0, 0, 0.50)) 100%), url('../images/univers_eau/Intro.png') lightgray 50% / cover no-repeat;
*/

}

.hero-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Spacing-scale-sp-5);
    flex-shrink: 0;
    color: var(--Cat-Blanc-Blanc-100);
}

.hero-text h1 {
    font-size: var(--H1);
    font-weight: 700;
    line-height: var(--line-height);
    font-style: normal;
    align-self: stretch;
    word-break: break-word;
}

.hero-text p {
    text-align: left;
    font-size: var(--corps);
    line-height: var(--line-height);
}

.hero-stats {
    display: flex;
    align-items: flex-start;
    gap: var(--Spacing-scale-sp-5);
}

.stat-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    gap: var(--Spacing-scale-sp-2);
}

.hero-buttons {
    display: flex;
    align-items: center;
    align-self: stretch;
    gap: var(--Spacing-scale-sp-5);
}

/* Separator */
.separator {
    width: 40px;
    height: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    aspect-ratio: 4/1;
    border-radius: 2px;
    background-color: var(--Cat-Blanc-Blanc-100);
}

.separator.white {
    background-color: var(--Cat-Blanc-Blanc-100);
}

/* Stat Cards */
.stat-card {
    background-color: var(--Cat-Blanc-Blanc-90);
    padding: var(--Spacing-scale-sp-5);
    border-radius: var(--Corner-s);
}

.stat-number {
    font-size: var(--chiffre);
    font-weight: 700;
    color: var(--Norme-AA-bleu-principal-2);
}

.stat-label {
    font-size: var(--corps);
    font-weight: 700;
    color: var(--Cat-Noir-Noir-100);
}

.stat-desc p {
    font-size: var(--petit-texte);
    color: var(--Cat-Noir-Noir-100);
    line-height: normal;
}

/* Platform Section */
.platform-section {
    padding: var(--Spacing-scale-Marge-Top-Bottom) var(--Spacing-scale-Marge-Left-Right);
    background-color: var(--Cat-Blanc-Blanc-100);
}

.platform-section .container-section, .value-section .container-section {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: var(--Spacing-scale-sp-5);

}

.four-columns {
    flex-direction: column;
    align-items: center;
    gap: var(--Spacing-scale-sp-5);
    align-self: stretch;
}

.section-title {
    font-size: var(--H2);
    font-weight: 700;
    text-align: center;
    color: var(--Cat-Noir-Noir-100);
}

.platform-section .section-title {
    color: var(--Norme-AA-bleu-principal-2);
}

.platform-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    gap: var(--Spacing-scale-sp-5);
    border: none;
    position: relative;
    border-radius: var(--Corner-s);
}


.card-header-title h3 {
    font-size: var(--H3);
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    color: var(--Norme-AA-bleu-principal-1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--Spacing-scale-sp-3);
    flex-wrap: wrap;
}

.platform-card::after {
    content: "";
    top: var(--Spacing-scale-sp-2);
    right: var(--Spacing-scale-sp-3);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 27px;
    height: 23px;
    flex-shrink: 0;
    transform: scaleX(-1);
    background-image: url("../images/univers_eau/vector.svg");
    background-repeat: no-repeat;
    background-position: center;
}

.platform-card:last-child::after {
    content: none;
}

.card-image {
    width: 100%;
    aspect-ratio: 302 / 170;
    overflow: hidden;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-image img {
    max-width: 100%;
    object-fit: cover;
}

.card-subtitle {
    font-size: var(--H4);
    font-weight: 700;
    text-align: center;
    color: var(--Cat-Noir-Noir-100);
    word-break: break-word;
}

.card-description, .paragraph.paragraph--type--dd-text p.card-description {
    font-size: var(--corps);
    text-align: center;
    color: var(--Cat-Noir-Noir-100);
    line-height: var(--line-height);
    font-weight: 400;
    flex-grow: 1;
    display: flex;
    align-items: center;
    word-break: break-word;
}
.platform-card p:last-child{
    display: flex;
    flex-direction: column;
    align-self: stretch;
    align-items: flex-start;

}
/* Precision Section */
.precision-section {
    background-color: var(--Norme-AA-background-bleu);
    padding: var(--Spacing-scale-Marge-Top-Bottom) var(--Spacing-scale-Marge-Left-Right);
}

.precision-section .section-content {
    flex-direction: column;
}

.section-left h2,
.section-left p {
    color: var(--Cat-Noir-Noir-100);
}

.section-left h2 {
    font-size: var(--H2);
    font-weight: 700;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    align-self: stretch;
}

.section-left p {
    font-size: var(--corps);
    line-height: var(--line-height);
    font-style: normal;
    font-weight: 400;
    align-self: stretch;
}

/* Measurements Grid */
.measurements-icons {
    display: flex;
    flex-direction: column;
    gap: var(--Spacing-scale-sp-2);
}

.measurement-item {
    display: flex;
    gap: var(--Spacing-scale-sp-2);
    align-items: center;
}
.measurement-item:last-child span {
  font-weight: normal;
}

.measurements-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Spacing-scale-sp-2);
}

.measurements-title {
    font-size: var(--corps);
    font-weight: 400;
}

.measurement-item img {
    width: 24px;
    height: 20px;
    fill: var(--Cat-Noir-Noir-100);
    object-fit: contain;
    flex-shrink: 0;
}

.measurement-item span {
    font-size: var(--corps);
    font-weight: 700;
    color: var(--Cat-Noir-Noir-100);
}

.device-image,
.world-map img{
    max-width: 100%;
    height: auto;
    display: block;
}
.device-image{

    width:100%;
}
.critical-infrastructure .world-map{
   /* Black becomes transparent-looking over the blue background */
  mix-blend-mode: screen;

  /* Makes the cyan lines slightly softer */
  opacity: 0.9;
  filter: brightness(0.95) saturate(1.15); 
}

/* Feature Cards */
.feature-card {
    display: flex;
    flex-direction: column;
    gap: var(--Spacing-scale-sp-4);
    align-items: center;
    justify-content: center;
    text-align: center;
}

.feature-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
}

.feature-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    gap: var(--Spacing-scale-sp-2);
}

.feature-card {
    background-color: var(--Cat-Blanc-Blanc-100);
    padding: var(--Spacing-scale-sp-5);
    border-radius: var(--Corner-s);
}

.feature-icon {
    width: 40px;
    height: 40px;
}

.feature-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.feature-number {
    font-size: var(--chiffre);
    font-weight: 700;
    color: var(--Norme-AA-bleu-principal-2);
}

.feature-title {
    font-size: var(--corps);
    font-weight: 700;
    color: var(--Cat-Noir-Noir-100);
}

.feature-desc {
    font-size: var(--petit-texte);
    color: var(--Cat-Noir-Noir-100);
    line-height: normal;
}

.feature-note,
.paragraph--type--dd-text p.feature-note {
    font-size: var(--lgende);
    color: var(--Cat-Noir-Noir-100);
    text-align: center;

    /* Legende italic */
    font-family: var(--font-family);
    font-style: italic;
    font-weight: 400;
    line-height: normal;
    align-self: stretch;
}

/* Critical Infrastructure Section */
.critical-infrastructure {
    background: var(--degrade-fondimage);
    padding: var(--Spacing-scale-Marge-Top-Bottom) var(--Spacing-scale-Marge-Left-Right);
    color: var(--Cat-Blanc-Blanc-100);
}

.critical-infrastructure .section-content>div {
    align-self: stretch;
}

.cybersecurity-box h3,
.transmission-box h3 {
    font-size: var(--H3);
    font-weight: 700;
    color: var(--Cat-Blanc-Blanc-100);
}

.critical-infrastructure h2 {
    font-size: var(--H2);
    font-weight: 700;
    color: var(--Cat-Blanc-Blanc-100);
}

.critical-infrastructure p {
    font-size: var(--corps);
    line-height: var(--line-height);
    color: var(--Cat-Blanc-Blanc-100);
}

.cybersecurity-box,
.transmission-box {
    border: 1px solid var(--Cat-Blanc-Blanc-100);
    border-radius: var(--Corner-s);
    padding: var(--Spacing-scale-sp-5);
    display: flex;
    flex-direction: column;
    align-self: stretch;
}

.cybersecurity-box {
    gap: var(--Spacing-scale-sp-5);
}

.cybersecurity-desc {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Spacing-scale-sp-4);
    flex: 1 0 0;

}

.transmission-box {
    align-items: center;
    justify-content: center;
    gap: var(--Spacing-scale-sp-4);
}


/* Transmission Features */
.transmission-features {
    display: flex;
    flex-direction: column;
    gap: var(--Spacing-scale-sp-4);
    justify-content: flex-start;
    align-items: flex-start;
    align-self: stretch;
    flex: 1 0 0;
}

.transmission-features .feature {
    display: flex;
    flex-direction: column;
    gap: var(--Spacing-scale-sp-2);
}

.transmission-contenu {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--Spacing-scale-sp-4);
    flex: 1 0 0;
}

.transmission-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Spacing-scale-sp-4);
    align-self: stretch;
}

/* Security Items */
.security-items {
    display: flex;
    flex-direction: column;
    gap: var(--Spacing-scale-sp-4);
}

.security-item {
    display: flex;
    gap: var(--Spacing-scale-sp-2);
    align-items: center;
}
.security-item img{
    fill: var(--Cat-Blanc-Blanc-100);
}
.security-item svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--Cat-Blanc-Blanc-100);
    stroke: currentColor;
    fill: none;
}

.security-item span {
    font-size: var(--corps);
    font-weight: 600;
    color: var(--Cat-Blanc-Blanc-100);
}

.transmission-features .feature strong {
    font-size: var(--corps);
    font-weight: 700;
    color: var(--Cat-Blanc-Blanc-100);
}

.transmission-features .feature p {
    font-size: var(--corps);
    margin: 0;
    color: var(--Cat-Blanc-Blanc-100);
}

.protocol-logos {
    width: 100%;
    display: flex;
    gap: var(--Spacing-scale-sp-4);
    padding: var(--Spacing-scale-sp-5) 0;
    align-items: center;
    justify-content: flex-start;
}

.protocol-logo {
    height: 23.646px;
    flex: 1 0 0;
    aspect-ratio: 73.33/23.65;
    object-fit: contain;
    filter: brightness(1.1);
}

/* Footer */
.footer {
    background-color: var(--Cat-Blanc-Blanc-100);
    color: var(--Cat-Blanc-Blanc-100);
    padding: var(--Spacing-scale-sp-5) var(--Spacing-scale-Marge-Left-Right);
    text-align: center;
    font-size: var(--petit-texte);
}

.footer img {
    display: flex;
    width: 202px;
    height: 40px;
    justify-content: center;
    align-items: center;
    aspect-ratio: 101/20;
}

/* ====== Responsive Typography & Spacing ====== */

/* Tablet (1024px) */
@media (max-width: 1024px) {
    .header-container {
        flex-wrap: wrap;
    }

    .nav-menu {
        order: 3;
        width: 100%;
        margin-top: var(--Spacing-scale-sp-4);
        flex-wrap: wrap;
    }

    .hero-container {
        display: flex;
        flex-direction: column;
        gap: var(--Spacing-scale-sp-6) var(--Spacing-scale-sp-5);
    }

    .hero-text {
        flex: 1;
    }

    .hero-text h1 {
        text-align: left;
    }

    .card-image {
        aspect-ratio: auto;
        min-height: 150px;
    }

    .precision-section .section-left, .precision-section .section-center {
        align-items: flex-start;
        align-self: stretch;
    }

    /* Transform Section - Solutions Cards */
    .solutions-cards {
        flex-direction: column;
        gap: var(--Spacing-scale-sp-3);
    }

    .keywords-list {
        gap: var(--Spacing-scale-sp-2);
    }

    .critical-infrastructure .protocol-logos {
        padding: var(--Spacing-scale-sp-5) 0;
        justify-content: center;
        align-items: center;
        gap: var(--Spacing-scale-sp-5);
        align-self: stretch;

    }

    .protocol-logo {
        width: 120px;
        height: 39px;
        aspect-ratio: 40/13;
        margin: 0 auto;
    }

    .precision-section .section-content {
        align-items: flex-start;
        align-content: flex-start;
        gap: var(--Spacing-scale-sp-6) var(--Spacing-scale-sp-5);
        align-self: stretch;
        flex-wrap: wrap;
    }

    .cybersecurity-box,
    .transmission-box {
        align-items: flex-start;
        align-self: stretch;
    }

    .platform-card::after {
        top: var(--Spacing-scale-sp-1);
    }

    .four-columns{
       gap: var(--Spacing-scale-sp-6) var(--Spacing-scale-sp-5);
    }

    .transform-section .section-left h2,
    .results-section .section-left h2,
    .results-section .section-left p,
    .transform-section .section-left p{
    	text-align:center;
    }
     .transform-section .section-left .separator,
     .results-section .section-left .separator{
    	margin: 0 auto;
    }

    .transform-section .section-right{
    	align-self: stretch;
    }
}

/* Mobile (768px) */
@media (max-width: 768px) {
    .header-container {
        padding: var(--Spacing-scale-sp-4) var(--margin-horizontal);
    }

    .nav-menu {
        display: none;
    }

    .header-actions {
        flex-direction: column;
        width: 100%;
    }

    .logo {
        width: 120px;
    }

    .hero-container {
        flex-direction: column;
        gap: var(--Spacing-scale-sp-5);
        padding: 0;
    }
    .hero-stats {
        flex-direction: column;
        width: 100%;
        gap: var(--Spacing-scale-sp-4);
    }

    .four-columns {
        gap: var(--Spacing-scale-sp-5);
    }

    .four-columns .platform-card {
        border-radius: var(--Corner-s);
        border: 1px solid var(--Cat-Gris-Gris-5);
        margin-bottom: 50px;
        height: 515.265px;
        padding: var(--Spacing-scale-sp-5) var(--Spacing-scale-sp-4);
        justify-content: center;
        align-items: center;
        gap: var(--Spacing-scale-sp-5);
        align-self: stretch;

    }

    .four-columns .platform-card p {
        align-self: stretch;
    }

    .section-content,
    .precision-section .section-content
     {
        gap: var(--Spacing-scale-sp-4);
    }

    .measurements-icons {
        gap: var(--Spacing-scale-sp-3);
    }

    .security-items {
        gap: var(--Spacing-scale-sp-3);
    }

    .stat-card {
        align-items: center;
    }

    .card-image {
        aspect-ratio: auto;
        min-height: 150px;
    }

    .card-header-title h3::after {
        transform: rotate(-90deg);
    }


    .feature-card {
        padding: var(--Spacing-scale-sp-4);
    }

    /* Value Cards Grid */
    .value-cards {
        gap: var(--Spacing-scale-sp-4);
    }

    .solutions-cards {
        gap: var(--Spacing-scale-sp-3);
    }

    .solution-card {
        padding: var(--Spacing-scale-sp-3);
    }

    .cybersecurity-box,
    .transmission-box {
        padding: var(--Spacing-scale-sp-3);
    }

    .platform-card::after {
        top: auto;
        right: auto;
        bottom: -50px;
        left: 50%;
        transform: translateX(-50%) rotate(-90deg);
    }

    .critical-infrastructure .section-content>div {
        align-self: flex-start;
    }

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

    .section-left {
        align-items: center;
    }
}

/* ====== SECTION 5: Transform Data Section ====== */
.transform-section {
    background-color: var(--Norme-AA-background-bleu);
    padding: var(--Spacing-scale-Marge-Top-Bottom) var(--Spacing-scale-Marge-Left-Right);
}

.transform-center {
    display: flex;
    flex-direction: column;
    gap: var(--Spacing-scale-sp-4);
    align-items: flex-start;
    align-self: stretch;
}

.transform-center p {
    font-size: var(--grand-texte);
    font-weight: 700;
    color: var(--Norme-AA-bleu-principal-2);
}

.solutions-cards {
    display: flex;
    flex-direction: column;
    gap: var(--Spacing-scale-sp-2);
    align-self: stretch;
}

.solution-card {
    border: 2px solid var(--Norme-AA-bleu-principal-2);
    border-radius: var(--Corner-s);
    padding: var(--Spacing-scale-sp-2) var(--Spacing-scale-sp-4);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Spacing-scale-sp-1);
}

.solution-badge {
    background: linear-gradient(to right, var(--Norme-AA-bleu-principal-2), var(--Norme-AA-bleu-principal-1));
    color: var(--Cat-Blanc-Blanc-100);
    border-radius: var(--Corner-arrondi);
    padding: 0 var(--Spacing-scale-sp-4);
    font-size: var(--lgende);
    font-weight: 700;
    font-style: italic;
    display: flex;
    height: 20px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: fit-content;
}

.solution-card h4 {
    font-size: var(--corps);
    font-weight: 700;
    color: var(--Cat-Noir-Noir-100);
    align-self: stretch;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.solution-card p {
    font-size: var(--petit-texte);
    color: var(--Cat-Noir-Noir-100);
    line-height: normal;
    font-weight: 400;
    line-height: normal;
    align-self: stretch;
}

.transform-right {
    display: flex;
    flex-direction: column;
    gap: var(--Spacing-scale-sp-4);
}

.keywords-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    gap: var(--Spacing-scale-sp-2);
}

.keyword-item {
    background-color: var(--Cat-Blanc-Blanc-100);
    border-radius: var(--Corner-s);
    padding: var(--Spacing-scale-sp-2) var(--Spacing-scale-sp-4);
    display: flex;
    gap: var(--Spacing-scale-sp-4);
    align-items: center;
    flex: 1 0 0;
    align-self: stretch;
}

.keyword-item img {
    display: flex;
    align-items: center;
    aspect-ratio: 1/1;
    width: 25px;
    height: 25px;
    flex-shrink: 0;
}

.keyword-item span {
    font-size: var(--corps);
    font-weight: 600;
    color: var(--Norme-AA-bleu-principal-2);
    flex: 1 0 0;
}

/* ====== SECTION 6: Results Section ====== */
.results-section {
    position: relative;
    background-color: #F0DACB;
    background-size: cover;
    background-position: center;
    padding: var(--Spacing-scale-Marge-Top-Bottom) var(--Spacing-scale-Marge-Left-Right);
    min-height: 400px;
}

.results-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.85) 23.558%, rgba(153, 153, 153, 0) 80.288%);
    z-index: 1;
}

.results-section .section-content {
    position: relative;
    z-index: 2;
    gap: var(--Spacing-scale-sp-5);
    align-items: stretch;
    padding: 0;
}

.section-content {
    padding: 0;
}

.results-section .section-content .separator,
.precision-section .section-content .separator,
.transform-section .section-content .separator {
    background-color: var(--Cat-Noir-Noir-100);
}

.section-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Spacing-scale-sp-4);
    flex-shrink: 0;
    align-self: stretch;
}

.section-right {
    display: contents;
}

.testimonial-title {
    font-size: var(--H4);
    font-weight: 700;
    color: var(--Cat-Noir-Noir-100);
}

.testimonial-quote {
    font-size: var(--corps);
    font-style: italic;
    color: var(--Cat-Noir-Noir-100);
    line-height: normal;
}

.testimonial-author {
    font-size: var(--corps);
    font-weight: 400;
    color: var(--Cat-Noir-Noir-100);
}

.result-card {
    background-color: var(--Cat-Blanc-Blanc-80);
    border-radius: var(--Corner-s);
    padding: var(--Spacing-scale-sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--Spacing-scale-sp-4);
    align-items: center;
    justify-content: center;
    flex: 1 0 0;
    text-align: left;
    align-self: stretch;
}

.result-card .results-testimonial {
    text-align: left;
    padding: var(--Spacing-scale-sp-4)
}

.result-icon {
    width: 40px;
    height: 40px;
}

.result-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.result-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
}

.result-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--Spacing-scale-sp-2);
    align-self: stretch;
    text-align: center;
}

.result-number {
    font-size: var(--chiffre);
    font-weight: 700;
    font-style: normal;
    line-height: normal;
    text-align:center;
    color: var(--Norme-AA-bleu-principal-2);
}

.result-title {
    font-size: var(--corps);
    font-weight: 700;
    color: var(--Cat-Noir-Noir-100);
}

.result-desc {
    text-align: center;
    font-size: var(--corps);
    color: var(--Cat-Noir-Noir-100);
}

.result-note {
    font-size: var(--lgende);
    font-style: italic;
    color: var(--Cat-Noir-Noir-100);
}

.results-testimonial {
    background-color: var(--Cat-Blanc-Blanc-80);
    border-radius: var(--Corner-s);
    padding: var(--Spacing-scale-sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--Spacing-scale-sp-4);
    align-self: stretch;
    align-items: flex-start;
    justify-content: flex-end;
}

/* ====== SECTION 7 & 8: Value Section ====== */
.value-section {
    background-color: var(--Norme-AA-background-bleu);
    padding: var(--Spacing-scale-Marge-Top-Bottom) var(--Spacing-scale-Marge-Left-Right);
}

.value-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--Spacing-scale-sp-4);
    align-self: stretch;
}

.section-subtitle {
    font-size: var(--corps);
    text-align: center;
    color: var(--Cat-Noir-Noir-100);
    line-height: var(--line-height);
    max-width: 900px;
}

.paragraph.paragraph--type--dd-text p.section-subtitle {
    text-align: center;
}

.separator-center {
    width: 40px;
    height: 10px;
    background-color: var(--Cat-Noir-Noir-100);
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    aspect-ratio: 4/1;
}

.value-cards {
    gap: var(--Spacing-scale-sp-5);
}

.value-card {
    background-color: var(--Cat-Blanc-Blanc-100);
    border-radius: var(--Corner-s);
    padding: var(--Spacing-scale-sp-4) var(--Spacing-scale-sp-2);
    display: flex;
    flex-direction: column;
    gap: var(--Spacing-scale-sp-4);
    align-items: center;
    text-align: center;
    align-items: center;
    justify-content: center;
    flex: 1 0 0;
    align-self: stretch;
    min-height: 266px;
}

.value-card img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.value-card h3 {
    font-size: var(--corps);
    font-weight: 700;
    color: var(--Cat-Noir-Noir-100);
    text-align: center;
}

.value-card p {
    font-size: var(--corps);
    color: var(--Cat-Noir-Noir-100);
    line-height: normal;
}

/* ====== SECTION 8: CTA Section ====== */
.cta-section {
    position: relative;
    background-color: rgba(0, 0, 0, 0.5);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: var(--Spacing-scale-Marge-Top-Bottom) var(--Spacing-scale-Marge-Left-Right);
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;

}

.cta-section .container-section, .footer .container-section {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: var(--Spacing-scale-sp-4);
    align-items: center;
    text-align: center;
}

.cta-section h2 {
    font-size: var(--H2);
    font-weight: 700;
    color: var(--Cat-Blanc-Blanc-100);
    line-height: normal;
    font-style: normal;
    max-width: 846px;
    text-align: center;
}

.cta-section .separator-center {
    background-color: var(--Cat-Blanc-Blanc-100);
}

.cta-section p, .paragraph.paragraph--type--dd-text .cta-section p {
    font-size: var(--corps);
    color: var(--Cat-Blanc-Blanc-100);
    line-height: var(--line-height);
    font-weight: 400;
    font-style: normal;
    align-self: stretch;
    max-width: 800px;
    text-align: center;
}

.btn-cta {
    background-color: var(--Cat-Blanc-Blanc-100);
    color: var(--Norme-AA-bleu-principal-2);
    border: 1px solid var(--Norme-AA-bleu-principal-2);
    padding: var(--Spacing-scale-sp-3) var(--Spacing-scale-sp-5);
    border-radius: var(--Corner-arrondi);
    font-family: var(--font-family);
    font-size: var(--corps);
    font-weight: 700;
    cursor: pointer;
}
.btn-cta a {
    color: var(--Norme-AA-bleu-principal-2);
}
.btn-cta:hover {
    border: 1px solid var(--Norme-AA-bleu-principal-2-Noir-30);
    background-color: var(--Norme-AA-bleu-principal-2-Blanc-80);
}

@media (max-width: 768px) {
    .cta-section {
        background-attachment: initial;
    }

    .cta-section h2 {
        max-width: 100%;
    }

    .results-section, .transform-section, .critical-infrastructure, .precision-section, .platform-section, .hero, .value-section, .cta-section {
        padding: var(--Spacing-scale-Marge-Top-Bottom) var(--Spacing-scale-Marge-Left-Right);
    }

    .cybersecurity-box, .transmission-box {
        align-items: flex-start;
        align-self: stretch;
    }

    .transform-section .section-left h2, .results-section .section-left h2, .results-section .section-left p, .transform-section .section-left p{ text-align:left;}

    .transform-section .section-left .separator, .results-section .section-left .separator{ margin:0;}

}


@media (max-width: 1440px) {
    .container-section {
        max-width: 100vw;
        margin: 0;
        padding: 0;
    }

    .card-image {
        max-width: 100%;
        height: auto;
    }
}