/**
 * TonSite.ca — Cartes Rentables Pro
 * Design repris à l'identique du snippet Navigation IA V8.3 MICRO POLISH FINAL.
 * Classes renommées ts-crp-* (au lieu de ts-navia-v83-*) pour éviter tout
 * conflit si l'ancien snippet est encore actif pendant la transition.
 */

.ts-crp-block,
.ts-crp-block *,
.ts-crp-block *::before,
.ts-crp-block *::after {
    box-sizing: border-box;
}

/* =========================================================
   BLOC GLOBAL
========================================================= */
.ts-crp-block {
    width: 100%;
    margin: 24px 0 26px;
    padding: 15px;
    background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
    border: 1px solid #dbe7fb;
    border-radius: 24px;
    box-shadow:
        0 12px 30px rgba(0, 92, 255, 0.11),
        0 3px 10px rgba(0,0,0,0.045);
    overflow: hidden;
    clear: both;
}

.ts-crp-title {
    margin: 0 0 15px;
    padding: 0 0 10px;
    color: #005cff;
    font-size: 19px;
    line-height: 1.08;
    font-weight: 900;
    text-transform: uppercase;
    border-bottom: 3px solid #005cff;
    letter-spacing: 0.25px;
}

.ts-crp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.ts-crp-card {
    background: #ffffff;
    border: 1px solid #e4ebf5;
    border-radius: 24px;
    overflow: hidden;
    box-shadow:
        0 10px 24px rgba(0,0,0,0.10),
        0 2px 6px rgba(0,0,0,0.04);
    transition: transform .18s ease, box-shadow .18s ease;
}

.ts-crp-card:hover {
    transform: translateY(-1px);
    box-shadow:
        0 14px 28px rgba(0,0,0,0.12),
        0 3px 8px rgba(0,0,0,0.05);
}

.ts-crp-link {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-height: 256px;
    height: 100%;
    color: #111 !important;
    text-decoration: none !important;
}

/* =========================================================
   DESKTOP
========================================================= */
.ts-crp-media {
    width: 47%;
    min-width: 47%;
    background: linear-gradient(180deg, #f4f7fc 0%, #eef4fb 100%);
    padding: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ts-crp-media img {
    width: 100%;
    height: auto;
    max-height: 100%;
    aspect-ratio: 4 / 5;
    object-fit: contain;
    object-position: center center;
    display: block;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 5px 13px rgba(0,0,0,0.11);
}

.ts-crp-body {
    width: 53%;
    padding: 18px 18px 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
}

.ts-crp-card-title {
    font-size: 23px;
    line-height: 1.18;
    font-weight: 900;
    color: #101418;
    margin: 0 0 14px;
    letter-spacing: -0.18px;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ts-crp-button {
    margin-top: auto;
    width: 100%;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #ff1c2e 0%, #e30613 100%);
    color: #fff;
    font-size: 15px;
    line-height: 1.1;
    font-weight: 900;
    border-radius: 15px;
    box-shadow: 0 6px 14px rgba(227, 6, 19, 0.27);
    text-transform: uppercase;
    letter-spacing: 0.22px;
}

/* =========================================================
   GRANDES TABLETTES
========================================================= */
@media (max-width: 1180px) {
    .ts-crp-link { min-height: 238px; }
    .ts-crp-media { width: 45%; min-width: 45%; }
    .ts-crp-body { width: 55%; padding: 16px 16px 14px; }
    .ts-crp-card-title { font-size: 21px; }
    .ts-crp-button { min-height: 48px; font-size: 14px; }
}

/* =========================================================
   TABLETTE / PETIT DESKTOP
========================================================= */
@media (max-width: 1024px) {
    .ts-crp-grid { grid-template-columns: 1fr; gap: 14px; }
    .ts-crp-card:nth-child(n+3) { display: none; }
    .ts-crp-link { min-height: 224px; }
    .ts-crp-media { width: 41%; min-width: 41%; }
    .ts-crp-body { width: 59%; }
    .ts-crp-card-title { font-size: 20px; line-height: 1.2; }
}

/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 768px) {
    .ts-crp-block {
        margin: 18px 0 22px;
        padding: 13px;
        border-radius: 22px;
        box-shadow:
            0 10px 24px rgba(0, 92, 255, 0.11),
            0 2px 6px rgba(0,0,0,0.04);
    }

    .ts-crp-title { font-size: 18px; margin-bottom: 12px; padding-bottom: 8px; }
    .ts-crp-grid { grid-template-columns: 1fr; gap: 14px; }
    .ts-crp-card:nth-child(n+3) { display: none; }

    .ts-crp-card {
        border-radius: 22px;
        box-shadow:
            0 10px 24px rgba(0,0,0,0.12),
            0 2px 6px rgba(0,0,0,0.04);
    }

    .ts-crp-link { flex-direction: column; min-height: 0; }

    .ts-crp-media {
        width: 100%;
        min-width: 0;
        aspect-ratio: 4 / 5;
        padding: 10px;
        background: linear-gradient(180deg, #f4f7fc 0%, #eef4fb 100%);
    }

    .ts-crp-media img {
        width: 100%;
        height: 100%;
        max-height: none;
        object-fit: contain;
        border-radius: 17px;
    }

    .ts-crp-body { width: 100%; padding: 13px 14px 14px; min-height: auto; }

    .ts-crp-card-title {
        font-size: 22px;
        line-height: 1.25;
        margin-bottom: 12px;
        letter-spacing: -0.12px;
    }

    .ts-crp-button { min-height: 49px; font-size: 14px; border-radius: 15px; }
}

/* =========================================================
   PETITS MOBILES
========================================================= */
@media (max-width: 380px) {
    .ts-crp-card-title { font-size: 20px; line-height: 1.24; }
    .ts-crp-button { min-height: 46px; font-size: 13px; }
}

/* v1.2.5 — format TRÈS COMPACT sur ordinateur uniquement.
   Mobile et tablette (<=1024px) : aucun changement. */
@media screen and (min-width: 1025px) {
    .ts-crp-block { margin: 12px 0 15px; padding: 9px; border-radius: 13px; box-shadow: 0 3px 12px rgba(0,92,255,.09); }
    .ts-crp-block .ts-crp-title { margin: 0 0 7px; padding: 0 0 5px; font-size: 13px; line-height: 1.2; border-bottom-width: 2px; }
    .ts-crp-block .ts-crp-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
    .ts-crp-block .ts-crp-card { border-radius: 11px; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
    .ts-crp-block .ts-crp-link { flex-direction: row; align-items: stretch; height: 104px; min-height: 104px; max-height: 104px; }
    .ts-crp-block .ts-crp-media { flex: 0 0 83px; width: 83px; min-width: 83px; padding: 5px; }
    .ts-crp-block .ts-crp-media img { width: 73px; height: 92px; max-height: 92px; aspect-ratio: 4/5; object-fit: cover; border-radius: 6px; box-shadow: none; }
    .ts-crp-block .ts-crp-body { flex: 1 1 auto; width: auto; padding: 7px 7px 7px 4px; gap: 4px; min-width: 0; }
    .ts-crp-block .ts-crp-card-title { font-size: 12px; line-height: 1.12; font-weight: 750; margin: 0; letter-spacing: 0; -webkit-line-clamp: 4; overflow-wrap: anywhere; }
    .ts-crp-block .ts-crp-button { min-height: 22px; height: 22px; max-height: 22px; border-radius: 6px; font-size: 9px; line-height: 1; letter-spacing: 0; box-shadow: none; }
}


/* v1.2.6 — Desktop large: eight articles in four columns, two rows.
   Existing tablet / mobile appearance stays unchanged. */
@media screen and (min-width: 1025px) {
  .ts-crp-block .ts-crp-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; }
  .ts-crp-block .ts-crp-link { height: 102px; min-height: 102px; max-height: 102px; }
  .ts-crp-block .ts-crp-media { flex: 0 0 65px; width: 65px; min-width: 65px; padding: 4px; }
  .ts-crp-block .ts-crp-media img { width: 57px; height: 94px; max-height: 94px; border-radius: 5px; }
  .ts-crp-block .ts-crp-body { padding: 6px 6px 6px 2px; gap: 3px; }
  .ts-crp-block .ts-crp-card-title { font-size: 11px; line-height: 1.12; font-weight: 730; -webkit-line-clamp: 4; }
  .ts-crp-block .ts-crp-button { height: 20px; min-height: 20px; max-height: 20px; font-size: 8px; padding: 2px 3px; }
}

/* v1.2.7 — Contours desktop renforcés : cartes clairement délimitées.
   Scope >=1025px pour préserver exactement la présentation mobile. */
@media screen and (min-width: 1025px) {
  .ts-crp-block .ts-crp-grid > .ts-crp-card,
  .ts-crp-block .ts-crp-card {
    background: #ffffff;
    border: 2px solid #aabbd3;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(20, 45, 80, 0.12);
    overflow: hidden;
  }
  .ts-crp-block .ts-crp-card:hover,
  .ts-crp-block .ts-crp-card:focus-within {
    border-color: #567dac;
    box-shadow: 0 3px 12px rgba(20, 45, 80, 0.19);
  }
}


/* v1.2.8 — Finition ordinateur : contours uniformes, titres allégés,
   boutons moins dominants. Aucun style mobile/tablette modifié. */
@media screen and (min-width: 1025px) {
  .ts-crp-block .ts-crp-grid > .ts-crp-card {
    border: 2px solid #aabbd3 !important;
    border-radius: 12px;
    box-shadow: 0 2px 7px rgba(22, 48, 83, .10);
    background: #fff;
  }
  .ts-crp-block .ts-crp-grid > .ts-crp-card:hover,
  .ts-crp-block .ts-crp-grid > .ts-crp-card:focus-within {
    border-color: #aabbd3 !important;
    box-shadow: 0 3px 9px rgba(22, 48, 83, .15);
  }
  .ts-crp-block .ts-crp-card-title {
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    letter-spacing: 0;
    -webkit-line-clamp: 4;
  }
  .ts-crp-block .ts-crp-button {
    height: 19px !important;
    min-height: 19px !important;
    max-height: 19px !important;
    padding: 2px 5px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    border-radius: 6px;
    box-shadow: none;
  }
}

/* v1.2.9 : sidebar Elementor (shortcode ts_sidebar_rentable).
   CSS limité au nouveau conteneur, sans toucher aux recommandations en article. */
.ts-crp-sidebar-scope { width:100%; min-width:0; max-width:100%; }
.ts-crp-sidebar-scope .ts-crp-block { width:100%; margin:8px 0 16px; padding:9px; border-radius:12px; }
.ts-crp-sidebar-scope .ts-crp-block .ts-crp-title { font-size:14px; line-height:1.2; margin:0 0 9px; padding-bottom:7px; }
.ts-crp-sidebar-scope .ts-crp-block .ts-crp-grid { display:grid; grid-template-columns:minmax(0,1fr) !important; gap:8px; }
.ts-crp-sidebar-scope .ts-crp-block .ts-crp-card { border:2px solid #aabbd3 !important; border-radius:11px; background:#fff; box-shadow:0 2px 7px rgba(22,48,83,.10); }
.ts-crp-sidebar-scope .ts-crp-block .ts-crp-link { display:flex; flex-direction:row; height:105px; min-height:105px; max-height:105px; align-items:stretch; }
.ts-crp-sidebar-scope .ts-crp-block .ts-crp-media { width:76px; min-width:76px; flex:0 0 76px; padding:4px; }
.ts-crp-sidebar-scope .ts-crp-block .ts-crp-media img { width:66px; height:95px; max-height:95px; aspect-ratio:4/5; object-fit:cover; border-radius:6px; box-shadow:none; }
.ts-crp-sidebar-scope .ts-crp-block .ts-crp-body { flex:1 1 auto; min-width:0; width:auto; padding:6px 6px 6px 3px; gap:3px; }
.ts-crp-sidebar-scope .ts-crp-block .ts-crp-card-title { font-size:12px !important; font-weight:600 !important; line-height:1.2 !important; margin:0; -webkit-line-clamp:4; overflow-wrap:anywhere; }
.ts-crp-sidebar-scope .ts-crp-block .ts-crp-button { height:21px !important; min-height:21px !important; max-height:21px !important; font-size:9px !important; padding:3px 2px !important; border-radius:6px; }