/* =============================================================
   CIPAC Entity Contact Widget — cipac-entity-contact.css
   ============================================================= */

/* ── Variables ────────────────────────────────────────────────── */
.cec {
    --navy:          #14346B;
    --navy-deep:     #0E2750;
    --navy-rgb:      14, 39, 80;
    --lime:          #8DC63F;
    --lime-deep:     #6FA82B;
    --ink:           #16223D;
    --slate:         #5A6B85;
    --mist:          #F4F6F9;
    --line:          #E6EBF2;
    /* Fallback badge district — écrasé par district_default_color (Elementor) puis par --g-badge-color par groupe */
    --g-badge-color: var(--lime-deep);

    font-family:    inherit;
    color:          var(--ink);
    box-sizing:     border-box;
    background:     var(--mist);
    padding:        60px 46px;
}

.cec * {
    box-sizing: border-box;
}

/* ── En-tête ──────────────────────────────────────────────────── */
.cec__head {
    text-align:     center;
    margin-bottom:  36px;
}

.cec__eyebrow {
    display:         inline-flex;
    align-items:     center;
    gap:             9px;
    white-space:     nowrap;
    font-size:       13px;
    font-weight:     600;
    letter-spacing:  .2em;
    text-transform:  uppercase;
    color:           var(--navy);
    margin-bottom:   14px;
}

.cec__eyebrow .dot {
    width:           7px;
    height:          7px;
    border-radius:   50%;
    background:      var(--lime);
    flex:            0 0 auto;
    display:         block;
}

.cec__title {
    margin:       0 0 0;
    font-size:    24px;
    font-weight:  700;
    color:        var(--navy);
    text-align:   center;
}

.cec__rule {
    display:         block;
    width:           64px;
    height:          4px;
    border-radius:   4px;
    background:      var(--lime);
    margin:          18px auto 0;
}

/* ── Onglets ──────────────────────────────────────────────────── */
.cec__tabs {
    display:         flex;
    gap:             10px;
    justify-content: center;
    flex-wrap:       wrap;
    margin-bottom:   30px;
}

.cec__tab {
    display:        inline-flex;
    align-items:    center;
    gap:            8px;
    font-family:    inherit;
    font-size:      14px;
    font-weight:    600;
    color:          var(--navy);
    cursor:         pointer;
    background:     #fff;
    border:         1px solid var(--line);
    border-radius:  999px;
    padding:        10px 20px;
    transition:     background .22s ease, color .22s ease, border-color .22s ease,
                    transform .18s ease, box-shadow .22s ease;
    touch-action:   manipulation;
}

.cec__tab:hover:not(.is-active) {
    border-color:  var(--navy);
    transform:     translateY(-1px);
}

.cec__tab.is-active {
    background:   var(--g-tab-bg,   var(--navy));
    color:        var(--g-tab-text, #fff);
    border-color: var(--g-tab-bg,   var(--navy));
    box-shadow:   0 4px 14px rgba(var(--navy-rgb), .22);
}

.cec__count {
    font-size:     11.5px;
    font-weight:   700;
    background:    var(--mist);
    color:         var(--navy);
    border-radius: 999px;
    padding:       1px 8px;
    transition:    background .22s ease, color .22s ease;
}

.cec__tab.is-active .cec__count {
    background: var(--g-count-bg, var(--lime));
    color:      var(--g-tab-bg,   var(--navy-deep));
}

/* ── Panel (grille de cartes) ─────────────────────────────────── */
.cec-panel {
    display:               none;
    grid-template-columns: repeat(4, 1fr);
    gap:                   18px;
    max-width:             1180px;
    margin:                0 auto;
}

.cec-panel.is-active {
    display: grid;
    animation: cecFadeIn .32s ease both;
}

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

/* ── Carte entité ─────────────────────────────────────────────── */
.cec__card {
    position:       relative;
    border:         1px solid var(--line);
    border-radius:  16px;
    background:     #fff;
    overflow:       hidden;
    transition:     transform .3s cubic-bezier(.33,1,.68,1),
                    box-shadow .3s cubic-bezier(.33,1,.68,1),
                    border-color .25s ease;
    cursor:         default;
    outline:        none;
}

/* Barre d'accentuation en haut : couleur du groupe, slide-in au survol */
.cec__card::before {
    content:          '';
    position:         absolute;
    top:              0;
    left:             0;
    right:            0;
    height:           3px;
    background:       var(--g-tab-bg, var(--navy));
    transform:        scaleX(0);
    transform-origin: left center;
    transition:       transform .32s cubic-bezier(.33,1,.68,1);
    z-index:          2;
}

.cec__card:hover::before,
.cec__card:focus-visible::before {
    transform: scaleX(1);
}

.cec__card:hover,
.cec__card:focus-visible {
    transform:    translateY(-5px);
    box-shadow:   0 18px 34px rgba(var(--navy-rgb), .12);
    border-color: var(--g-tab-bg, rgba(var(--navy-rgb), .18));
}

.cec__card:focus-visible {
    outline:        2px solid var(--g-tab-bg, var(--lime));
    outline-offset: 3px;
}

/* ── Zone image ───────────────────────────────────────────────── */
.cec__card-img {
    position:         relative;
    width:            100%;
    height:           160px;
    overflow:         hidden;
    background-color: #E6EBF2;
    flex-shrink:      0;
}

/* Pseudo-element pour l'overlay au survol */
.cec__card-img::after {
    content:          '';
    position:         absolute;
    inset:            0;
    pointer-events:   none;
    background-color: transparent;
    transition:       background-color .3s ease;
}

.cec__card-img img {
    width:            100%;
    height:           100%;
    object-fit:       cover;
    object-position:  center center;
    display:          block;
    transition:       transform .45s cubic-bezier(.33,1,.68,1);
}

/* Zoom uniquement sur les cartes avec la classe --zoom */
.cec__card--zoom:hover .cec__card-img img {
    transform: scale(1.06);
}

/* ── Corps de la carte ────────────────────────────────────────── */
.cec__card-body {
    padding: 16px 20px 20px;
}

/* Méta : nom + district */
.cec__card-meta {
    margin-bottom: 14px;
}

.cec__name {
    margin:      0 0 5px;
    font-size:   15.5px;
    line-height: 1.25;
    font-weight: 700;
    color:       var(--navy);
    word-break:  break-word;
}

.cec__district {
    display:          inline-block;
    font-size:        11px;
    font-weight:      600;
    letter-spacing:   .08em;
    text-transform:   uppercase;
    color:            var(--g-badge-color);
    background-color: var(--g-badge-bg, transparent);
    border-radius:    4px;
    /* Padding conditionnel : visible seulement si un fond est défini */
    padding:          0;
    transition:       color .2s ease, background-color .2s ease;
}

/* Padding automatique quand un fond est configuré */
.cec-panel[style*="--g-badge-bg"] .cec__district {
    padding: 2px 7px;
}

/* Lignes d'info */
.cec__rows {
    display:        flex;
    flex-direction: column;
    gap:            10px;
}

.cec__row {
    display:         flex;
    gap:             10px;
    align-items:     center;
    font-size:       13.5px;
    line-height:     1.45;
    color:           var(--slate);
    text-decoration: none;
    transition:      color .2s ease;
}

/* Horaires : multi-lignes → icône en haut */
.cec__row--hours {
    align-items: flex-start;
}

a.cec__row:hover {
    color: var(--g-tab-bg, var(--navy));
}

a.cec__row:hover .ic {
    background: var(--g-tab-bg,   var(--navy));
    color:      var(--g-tab-text, #fff);
}

.cec__row .ic {
    width:           30px;
    height:          30px;
    min-width:       30px;
    border-radius:   8px;
    background:      var(--mist);
    color:           var(--g-tab-bg, var(--navy));
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex:            0 0 auto;
    transition:      background .2s ease, color .2s ease;
}

.cec__row--hours span:last-child {
    white-space: pre-line;
}

/* ── Responsive ───────────────────────────────────────────────── */

/* Tablette large */
@media (max-width: 1100px) {
    .cec-panel {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Tablette */
@media (max-width: 900px) {
    .cec {
        padding: 48px 22px;
    }

    .cec-panel {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile large */
@media (max-width: 600px) {
    .cec {
        padding: 40px 16px;
    }

    .cec__title {
        font-size: 20px;
    }

    .cec__tabs {
        gap: 8px;
    }

    .cec__tab {
        font-size:  13px;
        padding:    8px 16px;
    }

    .cec-panel {
        grid-template-columns: 1fr;
    }

    .cec__card-img {
        height: 180px;
    }
}