/* -------------------------------------------------------
   Sélecteur de datacenter
------------------------------------------------------- */

.oaka-datacenter-selector {
    display: block;
    width:   100%;
}

/* Select custom */
.oaka-dc-custom-select {
    position:    relative;
    display:     block;
    width:       100%;
    user-select: none;
    color:       #000064;
}

.oaka-dc-button {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             8px;
    width:           100%;
    padding:         6px 12px;
    border:          1px solid #ccc;
    border-radius:   7px;
    background:      #fff;
    cursor:          pointer;
    font:            inherit;
    font-size:       inherit;
    white-space:     nowrap;
    color:           #000064;
    box-sizing:      border-box;
}

.oaka-dc-button::after {
    content:            '';
    display:            inline-block;
    width:              18px;
    height:             18px;
    margin-left:        4px;
    background-image:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000064' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:  no-repeat;
    background-size:    contain;
    transition:         transform 0.15s;
}

.oaka-dc-custom-select.is-open .oaka-dc-button::after {
    transform: rotate(180deg);
}

.oaka-dc-button:disabled {
    opacity: 0.5;
    cursor:  wait;
}

.oaka-dc-button--static {
    cursor: default;
}

.oaka-dc-button--static::after {
    display: none;
}

.oaka-dc-list {
    display:      none;
    position:     absolute;
    top:          calc(100% + 4px);
    left:         0;
    min-width:    100%;
    margin:       0;
    padding:      4px 0;
    list-style:   none;
    background:   #fff;
    border:       1px solid #ccc;
    border-radius: 7px;
    box-shadow:   0 4px 12px rgba(0,0,0,.12);
    z-index:      9999;
}

.oaka-dc-custom-select.is-open .oaka-dc-list {
    display:    block;
    list-style: none;
    padding:    0;
}

/* Empêche le header Divi de clipper le dropdown */
#main-header,
#et-top-navigation,
.et-menu-nav {
    overflow: visible !important;
}

.oaka-dc-list li {
    padding: 8px 16px;
    cursor:  pointer;
    white-space: nowrap;
}

.oaka-dc-list li:hover,
.oaka-dc-list li.is-selected {
    background: #BED2FF;
}

/* -------------------------------------------------------
   Listing d'articles par datacenter
------------------------------------------------------- */

.oaka-datacenter-listing {
    list-style: none;
    margin:     0;
    padding:    0;
    max-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.oaka-datacenter-listing li {
    padding: 8px 0;
}

.oaka-datacenter-listing li a {
    display:         block;
    text-decoration: none;
    color:           inherit;
}

.oaka-datacenter-listing li a:hover {
    text-decoration: underline;
}

.oaka-datacenter-no-results {
    margin: 0;
}

/* -------------------------------------------------------
   Listing groupé par sous-catégorie (archive de catégorie parente)
------------------------------------------------------- */

.oaka-dc-group {
    padding:    24px 0;
    border-top: 1px solid #e8e8e8;
}

/* Pas de séparateur avant la première section : rien à séparer */
.oaka-dc-group:first-child {
    border-top: none;
}

.oaka-dc-group.is-hidden {
    display: none;
}

/* margin/padding en !important : Divi impose son propre espacement sous les
   titres via des sélecteurs à ID, plus spécifiques que notre classe. */
.oaka-dc-group__title {
    margin:      8px !important;
    padding:     0 !important;
    font-size:   20px;
    font-weight: 700;
}

.oaka-dc-group__title a {
    color:           inherit;
    text-decoration: none;
}

.oaka-dc-group__title a:hover {
    color: #FF4848;
}

/* La vue groupée reprend le listing de base, avec puces et sans scroll interne.
   padding en !important : Divi impose un padding-bottom de 23px aux ul via des
   sélecteurs à ID (#left-area ul…), plus spécifiques que notre classe — c'est
   lui qui décollait le lien « Voir tous les articles » du listing. */
.oaka-datacenter-listing--grouped {
    list-style:   disc;
    margin:       0 !important;
    padding:      0 0 0 20px !important;
    max-height:   none;
    overflow:     visible;
}

.oaka-datacenter-listing--grouped li {
    padding:     4px 0;
    line-height: 16px;
    color:       #000063; /* colore aussi les puces (marqueurs) */
}

.oaka-datacenter-listing--grouped li a {
    display: inline;
    color:   #000063;
}

.oaka-datacenter-listing--grouped li a:hover {
    color: #FF4848;
}

.oaka-dc-group__more {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    margin-top:      4px;
    margin-left:     20px;
    font-weight:     600;
    color:           #000064;
    text-decoration: none;
}

.oaka-dc-group__more::after {
    content:           '';
    display:           inline-block;
    width:             16px;
    height:            16px;
    background-image:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000064' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size:   contain;
}

.oaka-dc-group__more:hover {
    text-decoration: underline;
}

.oaka-dc-groups-more-wrap {
    text-align: center;
    padding:    24px 0 8px;
    border-top: 1px solid #e8e8e8;
}

.oaka-dc-groups-more,
.oaka-dc-articles-more {
    padding:       8px 28px;
    border:        none;
    border-radius: 4px;
    background:    #000063;
    color:         #fff;
    font:          inherit;
    font-size:     14px;
    cursor:        pointer;
    transition:    background-color 0.15s;
}

.oaka-dc-groups-more:hover,
.oaka-dc-articles-more:hover {
    background: #FF4848;
}

/* -------------------------------------------------------
   Listing détaillé (pages de sous-catégorie) :
   titre + courte description par article
------------------------------------------------------- */

.oaka-dc-article {
    padding:    24px 0 20px;
    border-top: 1px solid #e8e8e8;
}

.oaka-dc-article:first-child {
    border-top: none;
}

.oaka-dc-article.is-hidden {
    display: none;
}

/* margin/padding en !important : même combat de spécificité contre Divi
   que pour .oaka-dc-group__title */
.oaka-dc-article__title {
    margin:      8px !important;
    padding:     0 !important;
    font-size:   20px;
    font-weight: 700;
}

.oaka-dc-article__title a {
    color:           inherit;
    text-decoration: none;
}

.oaka-dc-article__title a:hover {
    color: #FF4848;
}

.oaka-dc-article__desc {
    margin:      0 0 0 8px !important;
    padding:     0 !important;
    color:       #575756;
    font-size:   14px;
    line-height: 1.5;
}

/* -------------------------------------------------------
   Notice article hors datacenter
------------------------------------------------------- */

.oaka-datacenter-notice {
    padding:       12px 16px;
    margin-bottom: 20px;
    border-left:   4px solid #f0a500;
    background:    #fff8ec;
    color:         #6b4f00;
    font-size:     14px;
    line-height:   1.5;
}