/* =====================================================================
   WS COMPONENT — c-alt-borders.css
   =====================================================================

   Fichier :
   - 20-components/c-alt-borders.css

   Rôle :
   - Ajouter une bordure décorative alternative à un bloc Gutenberg
   - Remplacer une simple border-left / border-right
   - Utilisable avec une ligne simple, une image, un SVG mask ou des symboles

   Utilisation Gutenberg :
   - Ajouter la classe sur un Groupe Gutenberg
   - Exemple :
     ws-alt-border ws-alt-border--left
     ws-alt-border ws-alt-border--right
     ws-alt-border ws-alt-border--celtic

   Important :
   - Ne pas ajouter de border-left classique en même temps
   - Le composant utilise ::before
   - Le padding est automatiquement géré selon le côté choisi

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


/* =====================================================================
   1) TOKENS GLOBAUX OPTIONNELS
   ===================================================================== */

:root{
  --ws-color-ink: #2f2924;
  --ws-color-muted: #7b6a5d;
  --ws-color-accent: #a46f45;
  --ws-color-coral: #c97864;
  --ws-color-brown: #8a5a38;

  --ws-font-body: inherit;
  --ws-transition-soft: 0.25s ease;
}


/* =====================================================================
   2) BASE DU COMPOSANT
   ===================================================================== */

.ws-alt-border{
  position: relative;
  overflow: visible;
  box-sizing: border-box;

  /* Padding vertical du bloc */
  --ws-alt-border-padding-y: 0.25rem;

  /* Padding du côté sans bordure */
  --ws-alt-border-padding-x: 0;

  /* Espace entre la bordure décorative et le contenu */
  --ws-alt-border-gap: 2.5rem;

  /* Par défaut : bordure à gauche */
  --ws-alt-border-padding-left: var(--ws-alt-border-gap);
  --ws-alt-border-padding-right: var(--ws-alt-border-padding-x);

  padding-top: var(--ws-alt-border-padding-y) !important;
  padding-bottom: var(--ws-alt-border-padding-y) !important;
  padding-left: var(--ws-alt-border-padding-left) !important;
  padding-right: var(--ws-alt-border-padding-right) !important;

  /* Position de la bordure */
  --ws-alt-border-top: 0;
  --ws-alt-border-bottom: 0;
  --ws-alt-border-left: 0;
  --ws-alt-border-right: auto;

  /* Dimensions */
  --ws-alt-border-width: 4px;
  --ws-alt-border-height: 100%;

  /* Apparence */
  --ws-alt-border-color: var(--ws-color-accent);
  --ws-alt-border-opacity: 1;
  --ws-alt-border-radius: 999px;

  /* Image décorative */
  --ws-alt-border-image: none;
  --ws-alt-border-image-size: contain;
  --ws-alt-border-image-repeat: repeat-y;
  --ws-alt-border-image-position: center top;

  /* SVG mask recolorable */
  --ws-alt-border-mask: none;
  --ws-alt-border-mask-size: contain;
  --ws-alt-border-mask-repeat: repeat-y;
  --ws-alt-border-mask-position: center top;

  /* Variante symboles */
  --ws-alt-border-symbol: "";
  --ws-alt-border-symbol-size: 1rem;
  --ws-alt-border-symbol-line-height: 1.4;
  --ws-alt-border-symbol-color: var(--ws-alt-border-color);
}


/* Les vrais enfants Gutenberg restent au-dessus de la bordure */
.ws-alt-border > *{
  position: relative;
  z-index: 1;
}


/* Bordure décorative */
.ws-alt-border::before{
  content: "";

  position: absolute;

  top: var(--ws-alt-border-top);
  bottom: var(--ws-alt-border-bottom);

  left: var(--ws-alt-border-left);
  right: var(--ws-alt-border-right);

  width: var(--ws-alt-border-width);

  background-color: var(--ws-alt-border-color);
  background-image: var(--ws-alt-border-image);
  background-repeat: var(--ws-alt-border-image-repeat);
  background-size: var(--ws-alt-border-image-size);
  background-position: var(--ws-alt-border-image-position);

  opacity: var(--ws-alt-border-opacity);
  border-radius: var(--ws-alt-border-radius);

  pointer-events: none;
  z-index: 0;
}


/* =====================================================================
   3) POSITION GAUCHE / DROITE
   ===================================================================== */

.ws-alt-border--left{
  --ws-alt-border-left: 0;
  --ws-alt-border-right: auto;

  --ws-alt-border-padding-left: var(--ws-alt-border-gap);
  --ws-alt-border-padding-right: var(--ws-alt-border-padding-x);
}

.ws-alt-border--right{
  --ws-alt-border-left: auto;
  --ws-alt-border-right: 0;

  --ws-alt-border-padding-left: var(--ws-alt-border-padding-x);
  --ws-alt-border-padding-right: var(--ws-alt-border-gap);
}


/* =====================================================================
   4) ÉPAISSEURS
   ===================================================================== */

.ws-alt-border--thin{
  --ws-alt-border-width: 2px;
}

.ws-alt-border--medium{
  --ws-alt-border-width: 4px;
}

.ws-alt-border--thick{
  --ws-alt-border-width: 8px;
}


/* =====================================================================
   5) ESPACEMENTS
   ===================================================================== */

.ws-alt-border--compact{
  --ws-alt-border-gap: 1.5rem;
}

.ws-alt-border--comfortable{
  --ws-alt-border-gap: 2.5rem;
}

.ws-alt-border--spacious{
  --ws-alt-border-gap: 3.5rem;
}


/* =====================================================================
   6) COULEURS
   ===================================================================== */

.ws-alt-border--muted{
  --ws-alt-border-color: var(--ws-color-muted);
}

.ws-alt-border--accent{
  --ws-alt-border-color: var(--ws-color-accent);
}

.ws-alt-border--coral{
  --ws-alt-border-color: var(--ws-color-coral);
}

.ws-alt-border--brown{
  --ws-alt-border-color: var(--ws-color-brown);
}

.ws-alt-border--soft{
  --ws-alt-border-opacity: 0.45;
}


/* =====================================================================
   7) VARIANTE IMAGE DÉCORATIVE
   ===================================================================== */

.ws-alt-border--image{
  --ws-alt-border-width: 24px;
  --ws-alt-border-radius: 0;
  --ws-alt-border-color: transparent;
  --ws-alt-border-image-size: contain;
  --ws-alt-border-image-repeat: repeat-y;
}


/* Preset image : ligne celtique */
.ws-alt-border--celtic{
  --ws-alt-border-width: 28px;
  --ws-alt-border-radius: 0;
  --ws-alt-border-color: transparent;
  --ws-alt-border-image: url('/wp-content/uploads/2026/05/amandine-celtic-border-line.png');
  --ws-alt-border-image-size: contain;
  --ws-alt-border-image-repeat: repeat-y;
  --ws-alt-border-image-position: center top;
}


/* Preset image : ligne végétale */
.ws-alt-border--leaf{
  --ws-alt-border-width: 26px;
  --ws-alt-border-radius: 0;
  --ws-alt-border-color: transparent;
  --ws-alt-border-image: url('/wp-content/uploads/2026/05/leaf-line.png');
  --ws-alt-border-image-size: contain;
  --ws-alt-border-image-repeat: repeat-y;
}


/* Preset image : ligne pinceau */
.ws-alt-border--brush{
  --ws-alt-border-width: 18px;
  --ws-alt-border-radius: 0;
  --ws-alt-border-color: transparent;
  --ws-alt-border-image: url('/wp-content/uploads/2026/05/brush-line.png');
  --ws-alt-border-image-size: 100% auto;
  --ws-alt-border-image-repeat: repeat-y;
}


/* =====================================================================
   8) VARIANTE SVG MASK RECOLORABLE
   ===================================================================== */

.ws-alt-border--mask::before{
  background-image: none;
  background-color: var(--ws-alt-border-color);

  mask-image: var(--ws-alt-border-mask);
  mask-repeat: var(--ws-alt-border-mask-repeat);
  mask-size: var(--ws-alt-border-mask-size);
  mask-position: var(--ws-alt-border-mask-position);

  -webkit-mask-image: var(--ws-alt-border-mask);
  -webkit-mask-repeat: var(--ws-alt-border-mask-repeat);
  -webkit-mask-size: var(--ws-alt-border-mask-size);
  -webkit-mask-position: var(--ws-alt-border-mask-position);
}


/* Preset mask : entrelacs */
.ws-alt-border--knot{
  --ws-alt-border-width: 24px;
  --ws-alt-border-radius: 0;
  --ws-alt-border-color: var(--ws-color-accent);
  --ws-alt-border-mask: url('/wp-content/uploads/2026/05/knot-line.svg');
  --ws-alt-border-mask-size: contain;
  --ws-alt-border-mask-repeat: repeat-y;
}


/* =====================================================================
   9) VARIANTE SYMBOLES
   ===================================================================== */

.ws-alt-border--symbol::before{
  content: var(--ws-alt-border-symbol);

  width: auto;
  height: 100%;

  background: none;
  color: var(--ws-alt-border-symbol-color);

  font-family: var(--ws-font-body);
  font-size: var(--ws-alt-border-symbol-size);
  line-height: var(--ws-alt-border-symbol-line-height);

  writing-mode: vertical-rl;
  text-orientation: mixed;

  border-radius: 0;
}

.ws-alt-border--dots{
  --ws-alt-border-symbol: "••••••••••••••••";
  --ws-alt-border-symbol-size: 0.8rem;
}

.ws-alt-border--diamonds{
  --ws-alt-border-symbol: "◆◆◆◆◆◆◆◆◆◆◆";
  --ws-alt-border-symbol-size: 0.65rem;
}

.ws-alt-border--stars{
  --ws-alt-border-symbol: "✦✦✦✦✦✦✦✦✦";
  --ws-alt-border-symbol-size: 0.85rem;
}


/* =====================================================================
   10) HOVER OPTIONNEL
   ===================================================================== */

.ws-alt-border--hover:hover::before{
  transform: translateX(2px);
  opacity: 1;
}

.ws-alt-border--right.ws-alt-border--hover:hover::before{
  transform: translateX(-2px);
}


/* =====================================================================
   11) INTÉGRATION GUTENBERG
   ===================================================================== */

.wp-block-group.ws-alt-border{
  box-sizing: border-box;
}

/* Évite que Gutenberg contraigne les blocs internes */
.wp-block-group.ws-alt-border.is-layout-constrained > *{
  max-width: none;
}

/* Nettoyage des marges si le bloc contient un paragraphe */
.ws-alt-border > p:first-child{
  margin-top: 0;
}

.ws-alt-border > p:last-child{
  margin-bottom: 0;
}


/* =====================================================================
   12) RESPONSIVE
   ===================================================================== */

@media (max-width: 768px){

  .ws-alt-border{
    --ws-alt-border-gap: 1.75rem;
    --ws-alt-border-width: 3px;
  }

  .ws-alt-border--image,
  .ws-alt-border--celtic,
  .ws-alt-border--leaf,
  .ws-alt-border--knot{
    --ws-alt-border-width: 18px;
    --ws-alt-border-gap: 2.25rem;
  }

}


/* =====================================================================
   13) UTILISATION RAPIDE
   =====================================================================

   Bordure simple gauche :
   ws-alt-border ws-alt-border--left

   Bordure simple droite :
   ws-alt-border ws-alt-border--right

   Bordure marron épaisse :
   ws-alt-border ws-alt-border--left ws-alt-border--brown ws-alt-border--thick

   Bordure image celtique :
   ws-alt-border ws-alt-border--left ws-alt-border--celtic

   Bordure image celtique à droite :
   ws-alt-border ws-alt-border--right ws-alt-border--celtic

   Bordure SVG recolorable :
   ws-alt-border ws-alt-border--mask ws-alt-border--knot

   Bordure symboles :
   ws-alt-border ws-alt-border--symbol ws-alt-border--diamonds

   Espacement réduit :
   ws-alt-border ws-alt-border--compact

   Espacement large :
   ws-alt-border ws-alt-border--spacious

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


/* =====================================================================
   14) MAINTENANCE & ASTUCES
   =====================================================================

   1. Le composant se pose sur le bloc parent Gutenberg :
      Groupe > Avancé > Classe CSS additionnelle.

   2. La classe minimale est :
      ws-alt-border

   3. Par défaut, la bordure est à gauche.

   4. Pour forcer le côté gauche :
      ws-alt-border--left

   5. Pour placer la bordure à droite :
      ws-alt-border--right

   6. Le padding suit automatiquement le côté choisi.

   7. Pour régler l’espace entre bordure et texte :
      modifier --ws-alt-border-gap.

   8. Pour changer l’image :
      modifier --ws-alt-border-image.

   9. Pour utiliser un SVG recolorable :
      utiliser ws-alt-border--mask
      puis définir --ws-alt-border-mask.

   10. Si la bordure est coupée :
       vérifier qu’un parent n’a pas overflow:hidden.

   11. Si le contenu passe derrière la bordure :
       vérifier que les enfants gardent z-index:1.

   12. Pour personnaliser un seul bloc :
       ajouter une classe dédiée, exemple :
       ws-alt-border ma-bordure-speciale

       Puis :
       .ma-bordure-speciale{
         --ws-alt-border-color: #b8735a;
         --ws-alt-border-gap: 3rem;
       }

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