/* Rubriques Block — Style Frontend (Figma 527:6428) */

.wp-block-bloc-th-rubriques.rubriques {
  background: var(--color-beige);
}

.rubriques__inner {
  display: grid;
  grid-template-columns: 1fr 52.57%;
  align-items: stretch;
  min-height: 835px;
}

/* ===== Colonne gauche ===== */
.rubriques__left {
  display: flex;
  flex-direction: column;
  gap: 72px;
  padding: 94px 0 80px 112px;   /* pas de padding droit → la liste peut déborder sur l'image */
}

.rubriques__accent {
  margin: 0;
  font-family: var(--font-accent);
  font-size: var(--text-accent);
  font-weight: 400;
  line-height: 1.1;
  color: var(--color-warm-gray);
}

.rubriques__meta {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-condensed);
  font-size: var(--text-sub-l);
  font-weight: 700;
  letter-spacing: var(--ls-sub);
  color: var(--color-text);
}
.rubriques__meta-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-gold);
}

/* Nav + liste */
.rubriques__nav-list {
  display: flex;
  gap: 40px;
  align-items: center;
  margin-right: -40px;        /* la liste déborde de 40px sur l'image (Figma) */
  position: relative;
  z-index: 2;
}
.rubriques__nav {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.rubriques__nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: transparent;
  border: 0.5px solid var(--color-warm-gray);
  border-radius: 50%;
  color: var(--color-warm-gray);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.rubriques__nav-btn:hover { background: var(--color-gold); color: var(--color-white); border-color: var(--color-gold); }
.rubriques__nav-btn svg { display: block; }
.rubriques__nav-btn[data-dir="up"] svg   { transform: rotate(-90deg); }   /* flèche Figma (→) tournée vers le haut */
.rubriques__nav-btn[data-dir="down"] svg { transform: rotate(90deg); }    /* … vers le bas */

.rubriques__list {
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}
.rubriques__item {
  flex: 1 0 0;
  min-height: 78px;
  display: flex;
  background: #fefbf7;
  font-family: var(--font-serif-light);
  font-size: var(--text-h3);
  color: var(--color-warm-gray);
}
/* Toute la rangée est cliquable (lien vers la page de la rubrique) */
.rubriques__link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  padding: 0 29px;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
}
.rubriques__link { transition: color 0.2s ease; }
.rubriques__item:not(.is-active) .rubriques__link:hover { color: var(--color-gold); }
.rubriques__item.is-active {
  background: var(--color-white);
  font-family: var(--font-serif);
  color: var(--color-text);
}

.rubriques__bullet {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-gold);
  flex-shrink: 0;
}
/* La puce n'apparaît que sur l'onglet actif (Figma) */
.rubriques__item:not(.is-active) .rubriques__bullet { display: none; }

/* ===== Colonne droite : image + cartouche ===== */
.rubriques__media {
  position: relative;
  overflow: hidden;
  min-height: 835px;
}
/* Un panneau (image + cartouche) par rubrique ; seul l'actif est visible */
.rubriques__panel {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--color-warm-gray);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease;
}
.rubriques__panel.is-active { opacity: 1; visibility: visible; z-index: 1; }
.rubriques__cartouche {
  position: absolute;
  left: 78px;            /* cartouche posé sur l'image (bas) */
  bottom: 35px;
  width: 634px;
  max-width: calc(100% - 96px);
  min-height: 250px;
  justify-content: center;
  background: rgba(255, 255, 255, 0.44);
  backdrop-filter: blur(3px);
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 3;
}
.rubriques__c-titre {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-h1);
  font-weight: 400;
  line-height: 1;
  color: var(--color-text);
}
.rubriques__c-sous {
  margin: 0;
  font-family: var(--font-condensed);
  font-size: var(--text-sub-s);
  font-weight: 700;
  letter-spacing: var(--ls-sub);
  text-transform: uppercase;
  color: var(--color-text);
}
.rubriques__c-texte {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.3;
  color: var(--color-text);
}
.rubriques__button { align-self: flex-start; margin-top: 0; }

/* ===== Responsive ===== */
/* Tablette : grille en 1 colonne ; on neutralise le débordement de la liste sur l'image */
@media (max-width: 1024px) {
  .rubriques__inner { grid-template-columns: 1fr; min-height: auto; }
  .rubriques__left { padding: 60px 24px 60px 56px; gap: 48px; }
  .rubriques__nav-list { margin-right: 0; }
  .rubriques__media { min-height: 480px; }
  .rubriques__cartouche {
    left: 16px;
    right: 16px;
    bottom: 16px;
    width: auto;
    max-width: none;
    box-sizing: border-box;
  }
}
/* Mobile (Figma 1573-17324) : l'article (média) en 1er, les rubriques en slider horizontal */
@media (max-width: 768px) {
  .rubriques__inner { display: flex; flex-direction: column; }
  .rubriques__media { order: 1; min-height: 380px; }
  .rubriques__left { order: 2; padding: 28px 20px; gap: 18px; }
  .rubriques__nav { display: none; }
  .rubriques__nav-list { margin-right: 0; gap: 12px; }
  .rubriques__list {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
    margin: 0 -20px;
    padding: 4px 20px 10px;
  }
  .rubriques__item { flex: 0 0 auto; min-height: 0; scroll-snap-align: start; border: none; }
  .rubriques__link { white-space: nowrap; }
  .rubriques__cartouche { padding: 24px; min-height: 0; }
  .rubriques__c-titre { font-size: 28px; }
}

/* Sous-titre(s) en bas de casse (réglage subUppercase = OFF) */
.rubriques--sub-lower .rubriques__c-sous { text-transform: none; }

/* Panneau entièrement cliquable (visuel + cartouche) vers l'article, sans casser le bouton.
   NB : .rubriques__panel est DÉJÀ position:absolute (empilement crossfade) → il sert de
   référence au lien plein-panneau. NE PAS le repasser en position:relative : ça annulerait
   inset:0 et le panneau ne remplirait plus la zone média → background-image (visuel) invisible. */
.rubriques__panel:not(.is-active) { pointer-events: none; }   /* le panneau caché ne capte pas les clics */
.rubriques__panel-link { position: absolute; inset: 0; z-index: 1; }
.rubriques__cartouche { z-index: 2; pointer-events: none; }    /* laisse passer le clic vers le lien plein-panneau */
.rubriques__button { pointer-events: auto; }                   /* … sauf le bouton Découvrir */