/* =========================================================
   TEXTES REPLIABLES
   Cahier des charges : cdc/videos_yt_content_repliables.md §2

   Le contenu complet reste TOUJOURS dans le DOM : seule sa hauteur visible est
   contrainte. Aucune troncature côté serveur, aucun chargement différé, donc
   aucun impact sur l'indexation.

   Le JavaScript se contente de poser les classes et le bouton ; toute la
   présentation est ici.
   ========================================================= */

:root {
  /* Hauteurs de repli, modifiables sans toucher au JavaScript. */
  --bkw-collapsible-height: 280px;
  --bkw-collapsible-height-mobile: 180px;
  --bkw-collapsible-fade: 4rem;
}

/* Un bloc candidat mais dont le contenu tient dans la hauteur n'est jamais
   marqué : il reste strictement inchangé. */
.bkw-collapsible {
  position: relative;
}

.bkw-collapsible__content {
  position: relative;
  overflow: hidden;
  /* Transition de confort ; le contenu est déjà là, seule la fenêtre bouge. */
  transition: max-height 0.3s ease;
}

.bkw-collapsible[data-collapsed="true"] .bkw-collapsible__content {
  max-height: var(--bkw-collapsible-height);
}

.bkw-collapsible[data-collapsed="false"] .bkw-collapsible__content {
  max-height: none;
  -webkit-mask-image: none;
  mask-image: none;
}

/* Fondu de bas de bloc.
   Réalisé par masque et non par un dégradé posé par-dessus : un dégradé doit
   connaître la couleur du fond, ce qui produisait un voile blanc sur les pages
   à fond beige. Le masque rend le texte lui-même transparent et fonctionne
   donc sur n'importe quel fond, sans rien à accorder. */
@supports (mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000)) {
  .bkw-collapsible[data-collapsed="true"] .bkw-collapsible__content {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--bkw-collapsible-fade)), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - var(--bkw-collapsible-fade)), transparent 100%);
  }
}

/* Bouton de dépliage : un vrai <button>, utilisable au clavier. */
.bkw-collapsible__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-top: 0.75rem;
  padding: 0;
  background: var(--bkw-secondary, #e8ddd7);
  border: 0;
  border-radius: 6px;
  color: var(--main-color, #2f1f1e);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.bkw-collapsible__toggle:hover {
  background: var(--bkw-secondary-hover, #dbcbc3);
  color: var(--main-color, #2f1f1e);
  /* Neutralise la translation de la règle générique `.btn, button`. */
  transform: none;
}

.bkw-collapsible__toggle:focus-visible {
  outline: 2px solid var(--typo-3, #a86443);
  outline-offset: 2px;
}

/* Le glyphe suit l'état, sans JavaScript ni second libellé à traduire. */
.bkw-collapsible__toggle::before {
  content: "+";
}

.bkw-collapsible[data-collapsed="false"] .bkw-collapsible__toggle::before {
  content: "\2212"; /* signe moins typographique */
}

@media (max-width: 767.98px) {
  .bkw-collapsible[data-collapsed="true"] .bkw-collapsible__content {
    max-height: var(--bkw-collapsible-height-mobile);
  }
}

/* Sans JavaScript, rien ne doit être masqué : les classes n'étant posées que
   par le script, l'état par défaut est le contenu entier. Cette règle protège
   en outre de l'impression, où le repli n'a pas de sens. */
@media print {
  .bkw-collapsible .bkw-collapsible__content {
    max-height: none !important;
    overflow: visible !important;
  }

  .bkw-collapsible .bkw-collapsible__content {
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  .bkw-collapsible__toggle {
    display: none !important;
  }
}