/* =====================================================================
   WS UTILITIES — u-corner.css
   =====================================================================

   Fichier :
   - 90-utilities/u-corner.css

   Rôle :
   - Ajouter un ou plusieurs coins décoratifs à un bloc
   - Utiliser une image décorative unique
   - Choisir sur quels coins afficher cette image
   - Tourner automatiquement l’image selon le coin choisi

   Préfixe :
   - ws- = WebService

   Philosophie :
   - opt-in uniquement
   - aucun impact global sur Gutenberg / WordPress
   - système réutilisable sur Group, Cover, Column, Card, etc.
   - réglages via variables CSS
   - image définie directement dans le CSS, avec surcharge locale possible

   IMPORTANT
   ---------------------------------------------------------------------
   Les coins décoratifs sont de vrais enfants du groupe.
   Pour éviter qu’ils ne masquent le contenu :
   - les .ws-corner sont placés derrière
   - les autres enfants du groupe sont remontés devant

   ===================================================================== */


/* =====================================================================
   1) VARIABLES GLOBALES PAR DÉFAUT
   ===================================================================== */

:root{
  /* Image décorative par défaut */
  --ws-corner-image: url('/wp-content/uploads/2026/04/amandine-corner.png');

  /* Taille standard */
  --ws-corner-size: 160px;

  /* Décalage depuis les bords */
  --ws-corner-offset-x: -5px;
  --ws-corner-offset-y: -15px;

  /* Aspect */
  --ws-corner-opacity: 1;
  --ws-corner-filter: none;

  /* IMPORTANT :
     les corners doivent rester derrière le contenu */
  --ws-corner-z: 0;

  /* Interaction */
  --ws-corner-pointer-events: none;

  /* Rotation de base */
  --ws-corner-base-rotation: 0deg;
}

/* =====================================================================
   WS UTILITIES — u-corner.css
   CONTRÔLE DU PADDING DU BLOC PARENT
   ===================================================================== */

.ws-corners{
  position: relative;
  overflow: visible;

  /* Padding local contrôlable */
  --ws-corners-pt: 0px;
  --ws-corners-pr: 0px;
  --ws-corners-pb: 0px;
  --ws-corners-pl: 0px;

  padding-top: var(--ws-corners-pt) !important;
  padding-right: var(--ws-corners-pr) !important;
  padding-bottom: var(--ws-corners-pb) !important;
  padding-left: var(--ws-corners-pl) !important;
}


/* =====================================================================
   2) PARENT
   ===================================================================== */

.ws-corners{
  position: relative;
  overflow: visible;
}

/* Variante optionnelle */
.ws-corners--clip{
  overflow: hidden;
}

/* Remonte tout le vrai contenu devant les corners */
.ws-corners > :not(.ws-corner){
  position: relative;
  z-index: 1;
}


/* =====================================================================
   3) BASE DES COINS
   ===================================================================== */

.ws-corner{
  position: absolute;
  width: var(--ws-corner-size);
  height: var(--ws-corner-size);

  background-image: var(--ws-corner-image);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;

  opacity: var(--ws-corner-opacity);
  filter: var(--ws-corner-filter);
  z-index: var(--ws-corner-z);
  pointer-events: var(--ws-corner-pointer-events);

  transform-origin: center;
}


/* =====================================================================
   4) POSITIONNEMENT + ROTATION AUTOMATIQUE
   ===================================================================== */

.ws-corner--tl{
  top: var(--ws-corner-offset-y);
  left: var(--ws-corner-offset-x);
  transform: rotate(calc(var(--ws-corner-base-rotation) + 0deg));
}

.ws-corner--tr{
  top: var(--ws-corner-offset-y);
  right: var(--ws-corner-offset-x);
  transform: rotate(calc(var(--ws-corner-base-rotation) + 90deg));
}

.ws-corner--br{
  bottom: var(--ws-corner-offset-y);
  right: var(--ws-corner-offset-x);
  transform: rotate(calc(var(--ws-corner-base-rotation) + 180deg));
}

.ws-corner--bl{
  bottom: var(--ws-corner-offset-y);
  left: var(--ws-corner-offset-x);
  transform: rotate(calc(var(--ws-corner-base-rotation) + 270deg));
}


/* =====================================================================
   5) TAILLES RAPIDES
   ===================================================================== */

.ws-corner--xs{ --ws-corner-size: 32px; }
.ws-corner--sm{ --ws-corner-size: 56px; }
.ws-corner--md{ --ws-corner-size: 84px; }
.ws-corner--lg{ --ws-corner-size: 120px; }
.ws-corner--xl{ --ws-corner-size: 160px; }


/* =====================================================================
   6) VARIANTE OUTSIDE
   ===================================================================== */

.ws-corner--outside.ws-corner--tl{
  top: calc(var(--ws-corner-offset-y) * -1);
  left: calc(var(--ws-corner-offset-x) * -1);
}

.ws-corner--outside.ws-corner--tr{
  top: calc(var(--ws-corner-offset-y) * -1);
  right: calc(var(--ws-corner-offset-x) * -1);
}

.ws-corner--outside.ws-corner--br{
  bottom: calc(var(--ws-corner-offset-y) * -1);
  right: calc(var(--ws-corner-offset-x) * -1);
}

.ws-corner--outside.ws-corner--bl{
  bottom: calc(var(--ws-corner-offset-y) * -1);
  left: calc(var(--ws-corner-offset-x) * -1);
}


/* =====================================================================
   7) FLIPS OPTIONNELS
   ===================================================================== */

.ws-corner--tl.ws-corner-flip-x{
  transform: scaleX(-1) rotate(calc(var(--ws-corner-base-rotation) + 0deg));
}

.ws-corner--tr.ws-corner-flip-x{
  transform: scaleX(-1) rotate(calc(var(--ws-corner-base-rotation) + 90deg));
}

.ws-corner--br.ws-corner-flip-x{
  transform: scaleX(-1) rotate(calc(var(--ws-corner-base-rotation) + 180deg));
}

.ws-corner--bl.ws-corner-flip-x{
  transform: scaleX(-1) rotate(calc(var(--ws-corner-base-rotation) + 270deg));
}

.ws-corner--tl.ws-corner-flip-y{
  transform: scaleY(-1) rotate(calc(var(--ws-corner-base-rotation) + 0deg));
}

.ws-corner--tr.ws-corner-flip-y{
  transform: scaleY(-1) rotate(calc(var(--ws-corner-base-rotation) + 90deg));
}

.ws-corner--br.ws-corner-flip-y{
  transform: scaleY(-1) rotate(calc(var(--ws-corner-base-rotation) + 180deg));
}

.ws-corner--bl.ws-corner-flip-y{
  transform: scaleY(-1) rotate(calc(var(--ws-corner-base-rotation) + 270deg));
}


/* =====================================================================
   8) PRÉSETS VISUELS
   ===================================================================== */

.ws-corners--soft{
  --ws-corner-opacity: .72;
}

.ws-corners--subtle{
  --ws-corner-opacity: .5;
}

.ws-corners--strong{
  --ws-corner-opacity: 1;
  --ws-corner-size: 120px;
}


/* =====================================================================
   9) PRÉSETS D’IMAGES
   ===================================================================== */

.ws-corners--floral{
  --ws-corner-image: url('/wp-content/uploads/2026/04/corner-floral.png');
}

.ws-corners--leaf{
  --ws-corner-image: url('/wp-content/uploads/2026/04/corner-leaf.png');
}

.ws-corners--brush{
  --ws-corner-image: url('/wp-content/uploads/2026/04/corner-brush.png');
}