/* =============================================================
   CIPAC Sectors Widget — cipac-sectors.css
   ============================================================= */

/* ── Variables ────────────────────────────────────────────────── */
.cipac-sec {
    --navy:      #14346B;
    --navy-deep: #0E2750;
    --navy-rgb:  14, 39, 80;
    --lime:      #8DC63F;
    --lime-deep: #6FA82B;
}

/* ── En-tête de section ───────────────────────────────────────── */
.cipac-sec__header {
    margin-bottom: 32px;
}

.cipac-sec__eyebrow {
    display:        block;
    font-size:      12px;
    font-weight:    700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color:          var(--lime);
    margin-bottom:  10px;
}

.cipac-sec__heading {
    font-size:   2rem;
    font-weight: 700;
    color:       var(--navy);
    margin:      0;
    line-height: 1.2;
}

.cipac-sec__heading .cipac-sec__count {
    color: var(--lime);
}

/* ── Rail ─────────────────────────────────────────────────────── */
.cipac-sec__rail {
    display:        grid;
    grid-auto-flow: column;
    gap:            14px;
    height:         460px;
    width:          100%;
}

/* ── Panneau ──────────────────────────────────────────────────── */
.cipac-sec__panel {
    position:       relative;
    border-radius:  18px;
    overflow:       hidden;
    cursor:         pointer;
    min-width:      0;
    /* Élimine le délai de 300 ms sur les appareils tactiles */
    touch-action:   manipulation;
}

/* ── Image en background : taille fixe, centrée, jamais redimensionnée ── */
/* La div reçoit background-image en style inline via PHP/JS.             */
.cipac-sec__bg {
    position:            absolute;
    inset:               0;
    background-repeat:   no-repeat;
    background-position: center;
    /* Taille par défaut : hauteur = hauteur du panneau, largeur proportionnelle.
       L'image ne rétrécit pas quand le panneau se rétrécit — seule la zone
       visible change (crop par overflow:hidden du panneau). */
    background-size:     auto 100%;
    transition:          background-size 460ms cubic-bezier(0.33, 1, 0.68, 1);
}

/* Sur le panneau actif : la boîte est dimensionnée au ratio de l'image
   (via JS), donc auto 100% suffit pour couvrir sans rogner ni étirer. */
.cipac-sec__panel.is-active .cipac-sec__bg {
    background-size: auto 100%;
}

/* ── Overlay couleur (au-dessus de l'image, sous le scrim) ───── */
.cipac-sec__panel::before {
    content:          '';
    position:         absolute;
    inset:            0;
    z-index:          1;
    pointer-events:   none;
    background-color: transparent;
}

/* ── Scrim (dégradé navy en bas) ─────────────────────────────── */
.cipac-sec__scrim {
    position:   absolute;
    inset:      0;
    z-index:    2;
    background: linear-gradient(
        to top,
        rgba(var(--navy-rgb), .86)  4%,
        rgba(var(--navy-rgb), .28) 44%,
        rgba(var(--navy-rgb), .05) 80%
    );
}

/* ── Index (numéro) — toujours en haut à gauche ──────────────── */
.cipac-sec__index {
    position:       absolute;
    top:            20px;
    left:           20px;
    z-index:        3;
    font-size:      14px;
    font-weight:    700;
    letter-spacing: .1em;
    color:          rgba(255, 255, 255, .75);
    padding-top:    8px;
}

.cipac-sec__index::before {
    content:       '';
    display:       block;
    width:         26px;
    height:        3px;
    background:    var(--lime);
    margin-bottom: 6px;
}

/* ── Contenu — ancré en bas ───────────────────────────────────── */
.cipac-sec__content {
    position: absolute;
    bottom:   0;
    left:     0;
    right:    0;
    z-index:  4;
    padding:  16px 20px 20px;
}

/* ── Nom (titre) ──────────────────────────────────────────────── */
.cipac-sec__name {
    margin:      0;
    font-weight: 700;
    font-size:   24px;
    color:       #fff;
    line-height: 1.2;
}

/* Titre actif : retour à la ligne si trop long */
.cipac-sec__panel.is-active .cipac-sec__name {
    white-space:     normal;
    overflow-wrap:   break-word;
}

/* Titre en vertical sur les panneaux inactifs : reste sur une ligne */
.cipac-sec__panel:not(.is-active) .cipac-sec__name {
    writing-mode:  vertical-rl;
    transform:     rotate(180deg);
    font-size:     22px;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    max-height:    280px;
}

/* ── Zone reveal (description) ───────────────────────────────── */
.cipac-sec__reveal {
    overflow:   hidden;
    max-height: 0;
    opacity:    0;
    transition: max-height 380ms ease, opacity 280ms ease 60ms;
    margin-top: 10px;
}

.cipac-sec__panel.is-active .cipac-sec__reveal {
    max-height: 200px;
    opacity:    1;
}

/* ── Description ─────────────────────────────────────────────── */
.cipac-sec__desc {
    margin:      0;
    font-size:   14.5px;
    line-height: 1.6;
    color:       rgba(255, 255, 255, .92);
}

/* ── Mobile (< 760px) — portrait ET paysage téléphone ────────── */
/*    Layout en flux : image en haut, contenu en dessous.
      Tout est visible sans overflow caché.                        */
@media ( max-width: 759px ) {

    /* Rail en colonne, hauteur auto */
    .cipac-sec__rail {
        display:               flex;
        flex-direction:        column;
        height:                auto;
        gap:                   12px;
        grid-template-columns: none !important;
    }

    /* Panneau : hauteur auto pour tout afficher */
    .cipac-sec__panel {
        width:     100%;
        height:    auto;
        flex:      0 0 auto;
        min-width: 0;
        max-width: 100%;
        overflow:  hidden;
    }

    /* ── Image : bloc en flux, hauteur fixe, cover ────────────── */
    .cipac-sec__bg {
        position:            relative  !important;
        inset:               auto;
        display:             block;
        width:               100%;
        height:              200px;
        background-size:     cover    !important;
        background-position: center   !important;
        transition:          none;
    }

    /* Overlay limité à la zone image */
    .cipac-sec__panel::before {
        height: 200px;
    }

    /* Scrim limité à la zone image */
    .cipac-sec__scrim {
        height: 200px;
    }

    /* Index sur l'image */
    .cipac-sec__index {
        position: absolute;
        top:      12px;
        left:     16px;
        bottom:   auto;
        z-index:  3;
    }

    /* ── Contenu : en dessous de l'image, en flux normal ─────── */
    .cipac-sec__content {
        position:   relative !important;
        bottom:     auto;
        left:       auto;
        right:      auto;
        z-index:    1;
        background: rgba(var(--navy-rgb), .96);
        padding:    14px 16px 18px;
    }

    /* Titre horizontal, normal, sur tous les panneaux mobile */
    .cipac-sec__panel .cipac-sec__name,
    .cipac-sec__panel:not(.is-active) .cipac-sec__name {
        writing-mode: unset   !important;
        transform:    none    !important;
        font-size:    20px;
        white-space:  normal;
        overflow:     visible;
        max-height:   none;
        text-overflow: unset;
    }

    /* Description et reveal toujours visibles */
    .cipac-sec__reveal {
        max-height: none !important;
        opacity:    1    !important;
        margin-top: 8px;
        transition: none;
    }
}

/* ── Téléphone paysage (hauteur < 500px, appareil coarse) ──────── */
/*    Même layout carte que le portrait, panels plus compacts       */
@media ( max-height: 500px ) and ( pointer: coarse ) {

    .cipac-sec__rail {
        display:               flex;
        flex-direction:        column;
        height:                auto;
        gap:                   10px;
        grid-template-columns: none !important;
    }

    .cipac-sec__panel {
        width:     100%;
        height:    auto;
        flex:      0 0 auto;
        overflow:  hidden;
    }

    .cipac-sec__bg {
        position:            relative  !important;
        inset:               auto;
        display:             block;
        width:               100%;
        height:              160px;
        background-size:     cover    !important;
        background-position: center   !important;
        transition:          none;
    }

    .cipac-sec__panel::before { height: 160px; }
    .cipac-sec__scrim          { height: 160px; }

    .cipac-sec__content {
        position:   relative !important;
        bottom:     auto;
        left:       auto;
        right:      auto;
        z-index:    1;
        background: rgba(var(--navy-rgb), .96);
        padding:    10px 14px 14px;
    }

    .cipac-sec__panel .cipac-sec__name,
    .cipac-sec__panel:not(.is-active) .cipac-sec__name {
        writing-mode:  unset   !important;
        transform:     none    !important;
        font-size:     18px;
        white-space:   normal;
        overflow:      visible;
        max-height:    none;
        text-overflow: unset;
    }

    .cipac-sec__reveal {
        max-height: none !important;
        opacity:    1    !important;
        margin-top: 6px;
        transition: none;
    }
}