/* =============================================================
   CIPAC News Tiles v1.0 — scopé sous .cnti
   ============================================================= */

.cnti {
    font-family: inherit;
    box-sizing: border-box;
    background: #fff;
    padding: 70px 56px 74px;
}
.cnti * { box-sizing: border-box; }

/* ── En-tête ──────────────────────────────────────────────── */

.cnti-head {
    text-align: center;
    margin-bottom: 46px;
}

.cnti-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #14346B;
    margin-bottom: 14px;
}

.cnti-eyebrow .cnti-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #8DC63F;
    flex: 0 0 auto;
}

.cnti-section-title {
    margin: 0;
    font-size: 34px;
    line-height: 1.12;
    font-weight: 700;
    color: #14346B;
    letter-spacing: -.01em;
}

.cnti-rule {
    display: block;
    width: 64px;
    height: 4px;
    border-radius: 4px;
    background: #8DC63F;
    margin: 18px auto 0;
}

/* ── Grille ───────────────────────────────────────────────── */

.cnti-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(3, 1fr); /* fallback desktop */
}

/* Classes de colonnes (contrôle responsive Elementor overrides via selectors) */
.cnti-grid.cnti-cols-1 { grid-template-columns: 1fr; }
.cnti-grid.cnti-cols-2 { grid-template-columns: repeat(2, 1fr); }
.cnti-grid.cnti-cols-3 { grid-template-columns: repeat(3, 1fr); }
.cnti-grid.cnti-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ── Carte ────────────────────────────────────────────────── */

.cnti-card {
    position: relative;
    display: block;
    min-height: 330px;
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
    background: #fff;
    border: 1px solid #E6EBF2;
    transition:
        transform  .4s cubic-bezier(.22, 1, .36, 1),
        box-shadow .4s,
        border-color .4s;
}

.cnti-card:hover,
.cnti-card:focus-visible {
    transform: translateY(-6px);
    box-shadow: 0 24px 44px rgba(14, 39, 80, .20);
    border-color: transparent;
    outline: none;
}

/* ── Image révélation ─────────────────────────────────────── */

.cnti-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity .5s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
}

.cnti-card:hover .cnti-img,
.cnti-card:focus-visible .cnti-img {
    opacity: 1;
    transform: scale(1);
}

/* Placeholder fond quand pas d'image */
.cnti-card--no-img .cnti-img { display: none; }

/* ── Scrim overlay ────────────────────────────────────────── */

.cnti-scrim {
    position: absolute;
    inset: 0;
    opacity: 0;
    background: linear-gradient(
        to top,
        rgba(14, 39, 80, .92)  6%,
        rgba(14, 39, 80, .35) 55%,
        rgba(14, 39, 80, .08) 90%
    );
    transition: opacity .5s ease;
}

.cnti-card:hover .cnti-scrim,
.cnti-card:focus-visible .cnti-scrim {
    opacity: 1;
}

/* ── Contenu interne ──────────────────────────────────────── */

.cnti-inner {
    position: relative;
    z-index: 2;
    height: 100%;
    min-height: 330px;
    display: flex;
    flex-direction: column;
    padding: 26px 26px 24px;
}

/* ── Numéro ordinal ───────────────────────────────────────── */

.cnti-num {
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
    color: #E6EBF2;
    transition: color .4s;
}

.cnti-card:hover .cnti-num,
.cnti-card:focus-visible .cnti-num {
    color: #8DC63F;
}

/* ── Meta (catégories + titre) ────────────────────────────── */

.cnti-meta {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cnti-cats {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.cnti-cat {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: 7px;
    background: #F4F6F9;
    color: #14346B;
    transition: background .4s, color .4s;
}

.cnti-card:hover .cnti-cat,
.cnti-card:focus-visible .cnti-cat {
    background: rgba(255, 255, 255, .92);
    color: #0E2750;
}

.cnti-cardtitle {
    margin: 0;
    font-size: 20px;
    line-height: 1.28;
    font-weight: 700;
    color: #14346B;
    transition: color .4s;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cnti-card:hover .cnti-cardtitle,
.cnti-card:focus-visible .cnti-cardtitle {
    color: #fff;
}

/* ── Pied de carte ────────────────────────────────────────── */

.cnti-foot-card {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 18px;
}

.cnti-date {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 500;
    color: #5A6B85;
    transition: color .4s;
    white-space: nowrap;
}

.cnti-card:hover .cnti-date,
.cnti-card:focus-visible .cnti-date {
    color: rgba(255, 255, 255, .85);
}

.cnti-readmore {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #6FA82B;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .35s, transform .35s, color .4s;
    white-space: nowrap;
    flex-shrink: 0;
}

.cnti-card:hover .cnti-readmore,
.cnti-card:focus-visible .cnti-readmore {
    opacity: 1;
    transform: none;
    color: #8DC63F;
}

.cnti-readmore svg { transition: transform .3s; }
.cnti-card:hover .cnti-readmore svg { transform: translateX(4px); }

/* ── Bouton bas de page ───────────────────────────────────── */

.cnti-foot-section {
    text-align: center;
    margin-top: 46px;
}

.cnti-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    background: #14346B;
    color: #fff;
    border-radius: 999px;
    padding: 13px 26px;
    transition: background .25s, transform .25s, color .25s;
}

.cnti-btn:hover {
    background: #0E2750;
    transform: translateY(-2px);
}

.cnti-btn svg { transition: transform .3s; }
.cnti-btn:hover svg { transform: translateX(4px); }

/* ── Message vide ─────────────────────────────────────────── */

.cnti-empty {
    padding: 3rem;
    text-align: center;
    color: #9ca3af;
    font-style: italic;
    border: 2px dashed #E6EBF2;
    border-radius: 18px;
}

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

/* Tablette large (≤ 1024px) */
@media (max-width: 1024px) {
    .cnti { padding: 60px 32px 66px; }
    .cnti-section-title { font-size: 30px; }
}

/* Tablette (≤ 980px) : 3 et 4 colonnes → 2 */
@media (max-width: 980px) {
    .cnti { padding: 54px 22px 60px; }
    .cnti-section-title { font-size: 28px; }

    .cnti-grid.cnti-cols-3,
    .cnti-grid.cnti-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile (≤ 620px) : toujours 1 colonne */
@media (max-width: 620px) {
    .cnti { padding: 44px 16px 50px; }
    .cnti-section-title { font-size: 24px; }
    .cnti-eyebrow { font-size: 11px; }

    .cnti-grid,
    .cnti-grid.cnti-cols-2,
    .cnti-grid.cnti-cols-3,
    .cnti-grid.cnti-cols-4 {
        grid-template-columns: 1fr !important;
    }

    .cnti-card { min-height: 280px; }
    .cnti-inner { min-height: 280px; }
    .cnti-cardtitle { font-size: 17px; }
    .cnti-num { font-size: 32px; }

    .cnti-btn { font-size: 13.5px; padding: 11px 20px; }
}

/* Portrait strict (≤ 480px) */
@media (max-width: 480px) {
    .cnti { padding: 36px 14px 42px; }
    .cnti-cardtitle { font-size: 15px; }
    .cnti-date { font-size: 12px; }
}

/* Tactile : readmore toujours visible, pas besoin du hover */
@media (hover: none) {
    .cnti-readmore {
        opacity: 1;
        transform: none;
    }
}