.rb-tec-cards{
  --rb-bg: #ffffff;
  --rb-text: #0f172a;
  --rb-muted: #475569;

  --rb-blue: #2F6FE4;        /* bouton (proche capture) */
  --rb-blue-dark: #1E4EB5;

  --rb-radius: 18px;
  --rb-shadow: 0 18px 40px rgba(15, 23, 42, .12);
  --rb-shadow-hover: 0 24px 60px rgba(15, 23, 42, .18);

  /* Slider vars */
  --rb-cols: 3;              /* injecté par le shortcode */
  --rb-gap: 18px;            /* injecté / override possible */
  --rb-peek: 16px;           /* petit aperçu à droite */
  --rb-card-w: 320px;        /* recalculé par media queries */
  --rb-card-h: 360px;        /* hauteur uniforme */

  max-width: 1100px;
  margin: 0 auto;
  padding: 22px 16px 40px;
}

/* =========================
   TRACK (GRID ou SLIDER)
========================= */

.rb-tec-cards__grid{
  gap: var(--rb-gap);
}

/* ===== MODE GRID ===== */
.rb-tec-cards.is-grid .rb-tec-cards__grid{
  display: grid;
  grid-template-columns: repeat(var(--rb-cols, 3), minmax(0, 1fr));
}

/* Responsive GRID */
@media (max-width: 980px){
  .rb-tec-cards.is-grid .rb-tec-cards__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px){
  .rb-tec-cards.is-grid .rb-tec-cards__grid{
    grid-template-columns: 1fr;
  }
  .rb-tec-cards{ padding: 18px 14px 34px; }
}

/* ===== MODE SLIDER ===== */
.rb-tec-cards.is-slider{
  position: relative;
}

/* slider track horizontal (stable) */
.rb-tec-cards.is-slider .rb-tec-cards__grid{
  display: flex;
  gap: var(--rb-gap);
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 10px;
  padding-right: var(--rb-peek);

  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;

  /* UX drag */
  cursor: grab;
}
.rb-tec-cards.is-slider .rb-tec-cards__grid.is-dragging{
  cursor: grabbing;
}

/* scrollbar */
.rb-tec-cards.is-slider .rb-tec-cards__grid::-webkit-scrollbar{
  height: 10px;
}
.rb-tec-cards.is-slider .rb-tec-cards__grid::-webkit-scrollbar-thumb{
  background: rgba(15,23,42,.18);
  border-radius: 999px;
}

/* largeur cartes responsive en slider */
@media (min-width: 980px){
  .rb-tec-cards.is-slider{
    --rb-card-w: calc((100% - (var(--rb-gap) * 2)) / 3); /* 3 visibles */
    --rb-card-h: 360px;
  }
}
@media (max-width: 979px){
  .rb-tec-cards.is-slider{
    --rb-card-w: calc((100% - var(--rb-gap)) / 2);       /* 2 visibles */
    --rb-card-h: 360px;
  }
}
@media (max-width: 620px){
  .rb-tec-cards.is-slider{
    --rb-card-w: 85%;                                   /* 1 visible + peek */
    --rb-card-h: 360px;
  }
}

/* =========================
   CARD
========================= */

.rb-tec-card{
  background: var(--rb-bg);
  border-radius: var(--rb-radius);
  overflow: hidden;
  box-shadow: var(--rb-shadow);
  border: 1px solid rgba(15,23,42,.06);
  transition: transform .18s ease, box-shadow .18s ease;

  /* Hauteur uniforme */
  height: var(--rb-card-h);
  display: flex;
  flex-direction: column;
}

.rb-tec-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--rb-shadow-hover);
}

/* En slider: largeur fixe + snap */
.rb-tec-cards.is-slider .rb-tec-card{
  flex: 0 0 var(--rb-card-w);
  scroll-snap-align: start;
}

/* =========================
   MEDIA (image)
========================= */

.rb-tec-card__media{
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  flex: 0 0 auto;
  background: #e2e8f0;
}

.rb-tec-card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Date badge */
.rb-tec-card__date{
  position: absolute;
  top: 12px;
  right: 12px;
  width: 54px;
  height: 54px;
  background: rgba(248, 250, 252, .95);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 14px;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 25px rgba(15,23,42,.15);
}

.rb-tec-card__day{
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
  color: var(--rb-text);
  margin-top: 3px;
}

.rb-tec-card__mon{
  font-weight: 900;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(15,23,42,.70);
  margin-bottom: 2px;
}

/* =========================
   BODY
========================= */

.rb-tec-card__body{
  padding: 16px 16px 18px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.rb-tec-card__kicker{
  margin-bottom: 10px;
}

.rb-tec-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #1D4ED8;
}

/* Titre sur 2 lignes max (stable) */
.rb-tec-card__title{
  margin: 0;
  font-size: 16px;
  line-height: 1.35;
  font-weight: 900;
  letter-spacing: -.01em;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rb-tec-card__title a{
  color: var(--rb-text);
  text-decoration: none;
}

.rb-tec-card__title a:hover{
  text-decoration: underline;
}

.rb-tec-card__meta{
  margin-top: 10px;
}

.rb-tec-meta{
  font-size: 13px;
  font-weight: 700;
  color: var(--rb-muted);
}

/* CTA collé en bas (stable) */
.rb-tec-card__cta{
  margin-top: auto;
  padding-top: 12px;
}

.rb-tec-link{
  font-size: 13px;
  font-weight: 900;
  color: #1D4ED8;
  text-decoration: none;
}

.rb-tec-link:hover{
  text-decoration: underline;
}

/* =========================
   FOOTER BUTTON
========================= */

.rb-tec-cards__footer{
  display: flex;
  justify-content: center;
  margin-top: 18px;
}

.rb-tec-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--rb-blue);
  color: #fff;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 14px 30px rgba(47,111,228,.22);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.rb-tec-btn:hover{
  background: var(--rb-blue-dark);
      color: #fff;

  transform: translateY(-1px);
  box-shadow: 0 20px 45px rgba(47,111,228,.28);
}

/* =========================
   NAV BUTTONS (slider)
========================= */

.rb-tec-nav{
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.92);
  box-shadow: 0 14px 30px rgba(15,23,42,.16);
  color: #0f172a;
  font-size: 26px;
  font-weight: 900;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.rb-tec-prev{ left: -10px; }
.rb-tec-next{ right: -10px; }
.rb-tec-prev:hover{ left: -10px;  background: #fff;}
.rb-tec-next:hover{ right: -10px;  background: #fff;}

.rb-tec-nav:hover{ background: #fff; }

/* Desktop uniquement */
@media (min-width: 980px){
  .rb-tec-cards.is-slider .rb-tec-nav{ display: inline-flex; }
}


/* =========================
   HIDE HORIZONTAL SCROLLBAR
   (slider uniquement)
========================= */

/* Chrome, Edge, Safari */
.rb-tec-cards.is-slider .rb-tec-cards__grid::-webkit-scrollbar{
  display: none;
}

/* Firefox */
.rb-tec-cards.is-slider .rb-tec-cards__grid{
  scrollbar-width: none;      /* Firefox */
}

/* IE / old Edge (safe fallback) */
.rb-tec-cards.is-slider .rb-tec-cards__grid{
  -ms-overflow-style: none;
}


/* 1) La carte est une colonne */
.rb-tec-card{
  display: flex;
  flex-direction: column;
  height: var(--rb-card-h, 360px);
}

/* 2) Zone image = hauteur fixe (ou ratio), ne grandit pas */
.rb-tec-card__media{
  position: relative;
  display: block;
  flex: 0 0 auto;          /* IMPORTANT: ne "pousse" pas */
  height: 180px;           /* hauteur fixe => stable */
  background: #e2e8f0;
}

/* Variante si tu préfères garder 16/9 sans height fixe :
.rb-tec-card__media{ flex:0 0 auto; aspect-ratio:16/9; }
*/

/* 3) L'image couvre seulement la zone média */
.rb-tec-card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rb-tec-card__media{
  position: relative;
  height: 180px;
  overflow: hidden;
  background: #f1f5f9; /* fallback */
}

.rb-tec-card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover; /* CRUCIAL */
  display: block;
}


/* 4) Le body prend le reste de la hauteur */
.rb-tec-card__body{
  flex: 1 1 auto;          /* IMPORTANT: occupe l’espace restant */
  display: flex;
  flex-direction: column;
  padding: 16px 16px 18px;
  min-height: 0;           /* évite certains bugs de flex */
}

/* 5) CTA en bas (et jamais caché) */
.rb-tec-card__cta{
  margin-top: auto;
  padding-top: 12px;
}


/* Zone image verrouillée: ne grandit jamais */
.rb-tec-card__media{
  height: 180px !important;     /* fixe (ajuste si tu veux 200) */
  max-height: 180px !important;
  overflow: hidden !important;
  flex: 0 0 180px !important;   /* CRUCIAL: empêche l'image de prendre le body */
  background: #f1f5f9;
}

/* L'image se “crop” proprement */
.rb-tec-card__media img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block;
}


.rb-tec-card__body{
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}
.rb-tec-card__cta{
  margin-top: auto !important;     /* CTA collé en bas */
  padding-top: 12px;
}