/* ==========================================================================
   STYLES RÉSERVÉS À L'ÉDITEUR
   ==========================================================================
   Chargée uniquement dans le canevas de l'éditeur de blocs, jamais sur le
   site public. Elle sert à rendre manipulable ce qui, en production, ne doit
   surtout pas l'être.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Bloc « Décor » — positionnement
   --------------------------------------------------------------------------
   useBlockProps ajoute à l'élément du bloc les classes
   « block-editor-block-list__block » et « wp-block ». Le cœur les style en
   position: relative avec une spécificité supérieure à notre .bg-deco :
   dans l'éditeur, les décors retombaient donc dans le flux et repoussaient le
   contenu du héros vers le bas, alors qu'en production ils sont en absolu.

   On rétablit ici l'absolu avec une spécificité suffisante, pour que l'aperçu
   de l'éditeur corresponde au rendu public — c'est tout l'intérêt d'un bloc
   réglable : voir où l'on pose la forme.
   -------------------------------------------------------------------------- */
.editor-styles-wrapper .wp-block.cimo-decor,
.editor-styles-wrapper .block-editor-block-list__block.cimo-decor {
  position: absolute;
  /* Le cœur impose aussi des marges de flux aux blocs : elles décaleraient
     la forme par rapport aux décalages réglés dans le panneau. */
  margin: 0;
  /* Une largeur en vw ne doit pas être bridée par la largeur du canevas. */
  max-width: none;
}

/* Le conteneur du bloc parent sert de repère. En production c'est la règle
   :has() de style.css qui s'en charge ; dans l'éditeur, le wrapper de bloc du
   cœur est déjà en position: relative, il suffit de ne pas le contrarier. */
.editor-styles-wrapper .block-editor-block-list__block:has(> .cimo-decor) {
  position: relative;
}

/* --------------------------------------------------------------------------
   Bloc « Décor » — sélection
   --------------------------------------------------------------------------
   En production, un décor porte pointer-events: none — il ne doit jamais
   intercepter un clic destiné au contenu. Dans l'éditeur, cela le rendrait
   impossible à sélectionner. On le rend donc cliquable, et on le signale
   visuellement puisqu'une forme très transparente serait autrement
   introuvable.
   -------------------------------------------------------------------------- */
.editor-styles-wrapper .cimo-decor {
  pointer-events: auto;
  cursor: pointer;
}

/* Contour au survol et à la sélection : repère la zone réelle de la forme,
   y compris la part qui déborde hors de la section. */
.editor-styles-wrapper .cimo-decor:hover {
  outline: 1px dashed currentColor;
  outline-offset: 4px;
}

.editor-styles-wrapper .cimo-decor.is-selected,
.editor-styles-wrapper .cimo-decor[data-block].is-selected {
  outline: 2px solid var(--wp-admin-theme-color, #3858e9);
  outline-offset: 4px;
}

/* PAS de `opacity: 1` sur le bloc sélectionné.
   -------------------------------------------------------------------------
   Une règle le faisait, pour qu'une forme très transparente reste facile à
   viser. L'intention était bonne, l'effet mauvais : un bloc est sélectionné
   précisément pendant qu'on règle son opacité. Le curseur ne montrait donc
   jamais son résultat, et il fallait prévisualiser ou enregistrer pour voir
   la valeur réelle — c'est-à-dire renoncer au réglage au jugé.

   Ce qui localise la forme, c'est le contour ci-dessus, pas son opacité : il
   reste visible à 0 %, et `pointer-events: auto` garde le bloc cliquable.
   L'aperçu peut donc rester fidèle.

   Pas de min-width / min-height non plus : cela déformerait le rapport de la
   forme et fausserait l'aperçu. */