/* ==========================================================================
   Talia — Bloc Image vivante
   --------------------------------------------------------------------------
   SEUL fichier de style du bloc. Rendu : inc/blocks.php
   (`toolbox_render_image_vivante_block`). Éditeur : blocks/src/talia-image-vivante/.

   Sorti de `main.css` le 2026-09-11. Onze règles plus trois en media query.

   PARTICULARITÉ : l'image est pivotée, au repos comme au survol, par deux
   variables posées en style inline depuis le rendu
   (`--talia-image-vivante-rotation` et `-hover`). C'est ce qui commande
   l'espace réservé au-dessus du titre — voir le commentaire de `__content`.
   ========================================================================== */

/* `.container { padding: 0; margin: 0 }` SUPPRIME, et la regle vide au-dessus
   avec. Il otait la gouttiere a TOUS les conteneurs sous 768px, et six regles
   la remettaient ensuite une par une — .pricing-section, .commandes-filters,
   .catalog-hero, .catalog-filters, .catalog-grid, .talia-image-vivante.
   Tout conteneur absent de cette liste collait aux bords : c'est ce qui se
   voyait sur les titres de section du catalogue, releves a x=0 quand le
   reste de la page etait a x=16. Signale en QA le 2026-09-11.

   Le conteneur suit maintenant `--content-gutter` a toutes les largeurs, et
   les six rattrapages deviennent inutiles : ils posaient `var(--spacing-md)`,
   exactement ce que vaut la gouttiere sous `md`. FRT-7. */

.content-wrapper {
  width: 100%;
  background: var(--bg-primary);
  padding: var(--spacing-xl);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-color);
}

/* ========================================================================
   29. BLOCS GUTENBERG TALIA  —  suite 4
   232 regles
   ======================================================================== */


/* ========================================
   TALIA IMAGE VIVANTE - Styles
   ======================================== */
.talia-image-vivante {
  padding: var(--spacing-3xl) 0;
}

.talia-image-vivante__media {
  margin: 0;
  width: 100%;
  max-width: 100%;
  transform: rotate(var(--talia-image-vivante-rotation, -2deg));
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.talia-image-vivante__media img,
.talia-image-vivante__placeholder {
  display: block;
  width: 100%;
  height: auto;
  border: 12px solid #ffffff;
  border-radius: var(--border-radius-xl);
  box-shadow: 0 22px 48px rgba(2, 6, 23, 0.35);
}

.talia-image-vivante__placeholder {
  aspect-ratio: 4 / 3;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  display: grid;
  place-items: center;
  font-size: var(--font-size-sm);
}

.talia-image-vivante__media:hover {
  transform: rotate(var(--talia-image-vivante-rotation-hover, -6deg)) scale(1.01);
}

/* En colonne Gutenberg : exploiter toute la largeur disponible. */
.wp-block-column .talia-image-vivante {
  width: 100%;
}

.wp-block-column .talia-image-vivante .container {
  width: 100%;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* L'IMAGE EST PIVOTÉE : son coin remonte au-dessus de sa boîte, et mordait le
   titre. Une image de 1216px de large pivotée de 6° — la valeur au survol —
   déborde d'environ 64px en hauteur de chaque côté (1216 × sin 6° / 2). Les
   24px d'origine n'en couvraient qu'un tiers.

   Le `transform` ne déclenche pas de recalcul de mise en page : le titre ne se
   décale pas, c'est l'image qui vient sur lui. Il faut donc réserver la place.
   Signalé en QA le 2026-09-11.

   48px couvrent le repos (-2°, ~21px) largement et l'essentiel du survol. Pour
   qu'il n'y ait aucun recouvrement à -6°, il faudrait 64px — au prix d'un blanc
   visible au repos. */
.talia-image-vivante__content {
  margin-top: var(--spacing-2xl);
}

.talia-image-vivante__title {
  margin: 0 0 var(--spacing-sm);
  font-size: var(--font-size-2xl);
  line-height: 1.2;
}

.talia-image-vivante__description {
  margin: 0;
  font-size: var(--font-size-base);
  color: var(--text-secondary);
}

@media (max-width: 767.98px) {
  .talia-image-vivante {
      padding: var(--spacing-2xl) 0;
    }

  .talia-image-vivante .container {
      padding-left: var(--spacing-md);
      padding-right: var(--spacing-md);
    }

  .talia-image-vivante__media {
      max-width: 100%;
    }
}

/* --------------------------------------------------------------------------
   Formats de hauteur (FRT-3, demande QA du 2026-09-11)

   Mêmes noms et mêmes ratios que `talia/carte-image` et `talia/galerie` — le
   thème n'a qu'un seul vocabulaire de format, c'est la règle posée en FRT-11.

   `auto` est le défaut et n'a pas de classe : l'image garde son format
   d'origine, sans rognage. Les trois autres imposent un cadre et rognent.
   -------------------------------------------------------------------------- */

.talia-image-vivante__media--large,
.talia-image-vivante__media--carre,
.talia-image-vivante__media--portrait {
  overflow: hidden;
  border-radius: var(--border-radius-lg);
}

.talia-image-vivante__media--large    { aspect-ratio: 16 / 9; }
.talia-image-vivante__media--carre    { aspect-ratio: 1 / 1; }
.talia-image-vivante__media--portrait { aspect-ratio: 4 / 5; }

.talia-image-vivante__media--large img,
.talia-image-vivante__media--carre img,
.talia-image-vivante__media--portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}