/* =========================================================
   TECHNOLOGIES PAGE  —  assets/css/technology.css
========================================================= */

:root {
    --breadcrumb-bg : #EDF2F5;
    --blue-mkba     : #005FAC;
    --blue-panel    : #B9DEF7;
    --blue-panel-2  : #A9D5F4;
    --orange-mkba   : #ED6A18;
    --orange-light  : #F9C9A6;
    --dark-mkba     : #111827;
    --muted-mkba    : #6b7280;
}

/* =========================================================
   TITRE DE PAGE
========================================================= */

.tech-header {
    background: #ffffff;
    padding: 40px 0 24px;
}

.tech-title {
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    font-weight: 700;
    color: var(--blue-mkba);
    margin-bottom: 12px;
}

.tech-title .highlight {
    background: var(--orange-light);
    padding: 0 4px;
    border-radius: 3px;
}

.tech-subtitle {
    font-size: 0.9rem;
    color: var(--muted-mkba);
    margin: 0;
    max-width: 780px;
}

/* =========================================================
   PANNEAU BLEU CLAIR
========================================================= */

.tech-panel-wrap {
    background: #ffffff;
    padding-bottom: 60px;
}

/* =========================================================
   PANEL
========================================================= */

.tech-panel {
    position:relative;
    background:#B9DEF7;
    padding:28px 12px 38px;
    overflow:hidden;
}

.tech-panel::before,
.tech-panel::after {
    content:"";
    position:absolute;
    border-radius:50%;
    background:#A9D5F4;
    opacity:.55;
}

.tech-panel::before {
    width:340px;
    height:340px;
    top:-120px;
    left:180px;
}

.tech-panel::after {
    width:220px;
    height:220px;
    bottom:-90px;
    left:40px;
}

.tech-panel > * {
    position:relative;
    z-index:1;
}

/* =========================================================
   CATEGORY
========================================================= */

.tech-category {
    margin-bottom:18px;
}

.tech-category-title {
    font-size:0.82rem;
    font-weight:700;
    color:#005FAC;
    margin-bottom:8px;
}

.tech-subcategory {
    margin-bottom:10px;
}

.tech-subcategory-label {
    display:block;
    font-size:.58rem;
    font-weight:700;
    color:#666;
    margin-bottom:5px;
}

/* =========================================================
   TECHNOLOGY BOXES
========================================================= */

.tech-logo-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

.tech-name-box {
    height: 34px;
    min-width: 70px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #005FAC;
    font-size: .58rem;
    font-weight: 600;
    border: 1px solid #d9e8f5;
    border-radius: 0;
    transition: none;
    border-right: 1px solid #d9e8f5;
    border-bottom: 1px solid #d9e8f5;
}

.tech-name-box:hover {
    background: #fff;
    transform: none;
}


/* =========================================================
   MORE SELECT
========================================================= */

.tech-more-box {
    height:34px;
    min-width:65px;
    background:white;
    display:flex;
    align-items:center;
}

.tech-more-select {
    width:100%;
    height:100%;
    border:none;
    background:white;
    font-size:.58rem;
    color:#005FAC;
    padding: 0 10px;
}

/* =========================================================
   ROW SPACING
========================================================= */

.tech-row {
    margin-bottom:0;
}

.tech-row .tech-category {
    margin-bottom:15px;
}

.tech-row-split {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.tech-row-split .tech-logo-row:first-child {
    flex: 1;
}

.tech-row-split .tech-logo-row:last-child {
    flex-shrink: 0;
}

.tech-name-box-wide {
    min-width:240px;    
}


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

@media(max-width:991px){
    .tech-panel {
        padding:22px 10px 30px;
    }
}

@media (max-width: 767px) {
    .tech-name-box {
        height: 30px;
        min-width: 60px;
        padding: 0 12px;
        font-size: .58rem;
    }
    .tech-more-box {
        height: 30px;
    }
}