/* ==========================================================================
   assets/css/editor-blocks.css
   Styles appliqués aux blocs Gutenberg NATIFS (Groupe, Colonnes, Image...)
   pour reproduire visuellement les sections de la maquette, en utilisant
   des "styles de blocs" enregistrés via inc/block-styles.php.

   Chargé à la fois sur le site (front-end) et dans l'éditeur, pour que le
   client voie un aperçu fidèle pendant qu'il compose sa page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Style de bloc "Groupe" : section avec fond gris alterné
   Activable dans l'éditeur : sélectionner un bloc Groupe > Styles > "Fond gris"

   Le fond (couleur) s'étend sur toute la largeur de l'écran, mais le
   CONTENU à l'intérieur reste contraint à la largeur du site (1200px),
   exactement comme .container utilisé dans le reste du thème.
   -------------------------------------------------------------------------- */
.is-style-gtv-section-alt,
.is-style-gtv-section,
.is-style-gtv-section-pattern {
  padding: var(--space-lg) var(--space-sm);
  width: 100%;
  max-width: 100% !important;
  box-sizing: border-box;
}

.is-style-gtv-section-pattern {
  background-size: auto 120px !important;
  background-repeat: repeat !important;
  background-position: center !important;
}

.is-style-gtv-section-alt {
  background: var(--gtv-bg-light);
}

/* Seul le CONTENU intérieur est contraint à 1200px.
   Le fond (couleur, motif) s'étend lui sur toute la largeur de l'écran. */
.is-style-gtv-section-alt > .wp-block-group__inner-container,
.is-style-gtv-section > .wp-block-group__inner-container,
.is-style-gtv-section-pattern > .wp-block-group__inner-container {
  max-width: var(--container-width);
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------------------------
   Style de bloc "Titre" (H2) : titre centré + séparateur pointillé
   Activable sur un bloc Titre > Styles > "Titre de section GTV"
   -------------------------------------------------------------------------- */
.is-style-gtv-section-title {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--text-lg) !important;
  margin-bottom: var(--space-md) !important;
  position: relative;
  padding-bottom: 1.2rem;
}

.is-style-gtv-section-title::after {
  content: '·· ───────── ··';
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  color: var(--gtv-dark);
  margin-top: 0.5rem;
}

/* --------------------------------------------------------------------------
   Style de bloc "Image" : vignettes diagonales (bleu, vert, jaune, orange)
   4 variantes — même structure CSS, couleurs différentes.
   Le triangle est appliqué via ::after. Le titre via figcaption (légende
   native du bloc Image dans Gutenberg).
   -------------------------------------------------------------------------- */
figure.wp-block-image.is-style-gtv-diagonal-blue,
figure.wp-block-image.is-style-gtv-diagonal-orange,
figure.wp-block-image.is-style-gtv-diagonal-green,
figure.wp-block-image.is-style-gtv-diagonal-yellow {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-sm);
  margin: 0;
  max-width: 100%;
  width: 100%;
}

figure.wp-block-image.is-style-gtv-diagonal-blue img,
figure.wp-block-image.is-style-gtv-diagonal-orange img,
figure.wp-block-image.is-style-gtv-diagonal-green img,
figure.wp-block-image.is-style-gtv-diagonal-yellow img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 0;
}

figure.wp-block-image.is-style-gtv-diagonal-blue::after,
figure.wp-block-image.is-style-gtv-diagonal-orange::after,
figure.wp-block-image.is-style-gtv-diagonal-green::after,
figure.wp-block-image.is-style-gtv-diagonal-yellow::after {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 65% 0, 0% 100%);
  pointer-events: none;
  z-index: 1;
}

figure.wp-block-image.is-style-gtv-diagonal-blue::after   { background: var(--gtv-blue); }
figure.wp-block-image.is-style-gtv-diagonal-orange::after { background: var(--gtv-orange); }
figure.wp-block-image.is-style-gtv-diagonal-green::after  { background: var(--gtv-green); }
figure.wp-block-image.is-style-gtv-diagonal-yellow::after { background: var(--gtv-yellow); }

/* --------------------------------------------------------------------------
   Titre superposé via la légende native (figcaption) du bloc Image.
   Dans Gutenberg : cliquer sur l'image → champ "Légende" en bas → saisir
   le texte. Il s'affiche automatiquement en blanc en haut à gauche,
   au-dessus du triangle coloré.
   -------------------------------------------------------------------------- */
figure.wp-block-image.is-style-gtv-diagonal-blue figcaption,
figure.wp-block-image.is-style-gtv-diagonal-orange figcaption,
figure.wp-block-image.is-style-gtv-diagonal-green figcaption,
figure.wp-block-image.is-style-gtv-diagonal-yellow figcaption {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  color: var(--gtv-white) !important;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-base);
  text-transform: uppercase;
  line-height: 1.2;
  max-width: 55%;
  margin: 0;
  padding: 0;
  background: none !important;
  text-align: left;
}

/* --------------------------------------------------------------------------
   VIGNETTES DIAGONALES — via bloc Couverture (core/cover)
   Le bloc Couverture Gutenberg est conçu pour superposer du texte sur une
   image : c'est la bonne primitive ici. On applique le triangle coloré via
   ::before sur le bloc cover, et on contrôle hauteur et ratio.

   Usage dans Gutenberg : insérer un bloc "Couverture", uploader l'image,
   ajouter un bloc Titre ou Paragraphe à l'intérieur pour le libellé,
   puis appliquer le style "Vignette cover bleue/verte/jaune" depuis le
   panneau Styles (pinceau, colonne de droite).
   -------------------------------------------------------------------------- */
.wp-block-cover.is-style-gtv-cover-blue,
.wp-block-cover.is-style-gtv-cover-green,
.wp-block-cover.is-style-gtv-cover-yellow {
  aspect-ratio: 4 / 3;
  min-height: 0 !important;
  border-radius: var(--radius-sm);
  overflow: hidden;
  padding: 1rem !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

/* Triangle coloré superposé à l'image via ::before */
.wp-block-cover.is-style-gtv-cover-blue::before,
.wp-block-cover.is-style-gtv-cover-green::before,
.wp-block-cover.is-style-gtv-cover-yellow::before {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 65% 0, 0 100%);
  z-index: 1;
  pointer-events: none;
}

.wp-block-cover.is-style-gtv-cover-blue::before   { background: var(--gtv-blue); }
.wp-block-cover.is-style-gtv-cover-green::before  { background: var(--gtv-green); }
.wp-block-cover.is-style-gtv-cover-yellow::before { background: var(--gtv-yellow); }

/* Retire l'overlay sombre par défaut de Gutenberg (il ajoute un ::after noir) */
.wp-block-cover.is-style-gtv-cover-blue .wp-block-cover__background,
.wp-block-cover.is-style-gtv-cover-green .wp-block-cover__background,
.wp-block-cover.is-style-gtv-cover-yellow .wp-block-cover__background {
  display: none;
}

/* Titre/texte positionné en haut à gauche, au-dessus du triangle */
.wp-block-cover.is-style-gtv-cover-blue .wp-block-cover__inner-container,
.wp-block-cover.is-style-gtv-cover-green .wp-block-cover__inner-container,
.wp-block-cover.is-style-gtv-cover-yellow .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
  width: 100%;
  align-self: flex-start;
}

.wp-block-cover.is-style-gtv-cover-blue .wp-block-cover__inner-container p,
.wp-block-cover.is-style-gtv-cover-blue .wp-block-cover__inner-container h2,
.wp-block-cover.is-style-gtv-cover-blue .wp-block-cover__inner-container h3,
.wp-block-cover.is-style-gtv-cover-green .wp-block-cover__inner-container p,
.wp-block-cover.is-style-gtv-cover-green .wp-block-cover__inner-container h2,
.wp-block-cover.is-style-gtv-cover-green .wp-block-cover__inner-container h3,
.wp-block-cover.is-style-gtv-cover-yellow .wp-block-cover__inner-container p,
.wp-block-cover.is-style-gtv-cover-yellow .wp-block-cover__inner-container h2,
.wp-block-cover.is-style-gtv-cover-yellow .wp-block-cover__inner-container h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-base);
  text-transform: uppercase;
  line-height: 1.2;
  max-width: 55%;
  margin: 0;
  color: var(--gtv-white);
  text-shadow: none;
}

/* Supprime les anciens styles cover/wrapper devenus inutiles */
.is-style-gtv-diag-wrapper,
.gtv-diag-title { all: unset; }

/* --------------------------------------------------------------------------
   Fond de section avec image de motif (pictos vétérinaires)
   Style "gtv-section-pattern" sur un bloc Groupe : permet d'uploader une
   image de motif de fond via l'option "Image de fond" native de Gutenberg
   (panneau de droite > Couleur > Arrière-plan), ou via l'attribut style.
   La section reste modifiable normalement ; seul le fond change.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Style de bloc "Groupe" : carte icône (façon "Maladie de la LSA")
   Activable sur un bloc Groupe contenant une image/icône + titre + texte

   À utiliser à l'intérieur d'un bloc Colonnes (2 ou 4 colonnes) pour
   reproduire la grille de cartes vue dans la maquette : chaque carte
   doit être placée dans sa propre colonne.
   -------------------------------------------------------------------------- */
.is-style-gtv-icon-card {
  background: var(--gtv-white);
  border: 1px solid var(--gtv-border);
  border-radius: var(--radius-md);
  text-align: center;
  height: 100%;
  padding: var(--space-md) var(--space-sm) !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.is-style-gtv-icon-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
}

.is-style-gtv-icon-card .wp-block-image {
  margin: 0 auto 0.75rem;
}

.is-style-gtv-icon-card .wp-block-image img {
  max-width: 48px;
  max-height: 48px;
  width: auto;
  margin: 0 auto;
  display: block;
}

.is-style-gtv-icon-card h3 {
  font-size: var(--text-sm);
  text-transform: uppercase;
}

.is-style-gtv-icon-card p {
  font-size: var(--text-xs);
  color: var(--gtv-text-light);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Cards du tableau de bord intranet
   Variante plus grande de la carte icône, avec espace pour le bouton CTA.
   Utilisée sur la page Intranet une fois l'utilisateur connecté.
   -------------------------------------------------------------------------- */
.gtv-dashboard-card.is-style-gtv-icon-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  padding: var(--space-lg) var(--space-md) !important;
  border-top: 4px solid var(--gtv-blue);
}

.gtv-dashboard-card.is-style-gtv-icon-card h3 {
  font-size: var(--text-base);
  margin-bottom: 0.5rem;
}

.gtv-dashboard-card.is-style-gtv-icon-card p {
  font-size: var(--text-sm);
  flex: 1;
}

.gtv-dashboard-card .wp-block-buttons {
  margin-top: auto;
}

/* --------------------------------------------------------------------------
   Style de bloc "Bouton" : reprend .btn-primary / .btn-blue
   Les styles natifs "Rempli" / "Contour" de Gutenberg restent disponibles ;
   ceux-ci sont des alternatives visuelles supplémentaires.
   -------------------------------------------------------------------------- */
.wp-block-button.is-style-gtv-btn-orange .wp-block-button__link {
  background: var(--gtv-orange);
  text-transform: uppercase;
  font-weight: 700;
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
}

.wp-block-button.is-style-gtv-btn-blue .wp-block-button__link {
  background: var(--gtv-blue);
  text-transform: uppercase;
  font-weight: 700;
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   Colonnes : espacement cohérent avec le reste du thème quand utilisées
   pour les sections "texte + image" (remplace .split-row)
   -------------------------------------------------------------------------- */
.wp-block-columns.are-vertically-aligned-center {
  gap: var(--space-lg);
}

/* --------------------------------------------------------------------------
   Listes à puces : style cohérent avec le reste du site
   -------------------------------------------------------------------------- */
.entry-content ul,
.block-editor-block-list__layout ul {
  padding-left: 1.2em;
}

.entry-content li,
.block-editor-block-list__layout li {
  margin-bottom: 0.4rem;
}

/* --------------------------------------------------------------------------
   Responsive : les colonnes natives Gutenberg passent déjà en pile sur
   mobile par défaut (comportement WordPress standard) ; on ajuste juste
   les espacements pour rester cohérent avec le reste du thème.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .is-style-gtv-section-alt,
  .is-style-gtv-section {
    padding: var(--space-md) var(--space-sm);
  }

  .wp-block-columns.are-vertically-aligned-center {
    gap: var(--space-md);
  }
}