/* ==========================================================================
   Moroccan Patterns - Riad LallaBaya
   Motifs géométriques inspirés de l'artisanat marocain
   ========================================================================== */

/* ==========================================================================
   Variables pour les patterns
   ========================================================================== */

:root {
  --pattern-color-rose: rgba(212, 165, 165, 0.06);
  --pattern-color-gold: rgba(201, 169, 98, 0.06);
  --pattern-color-dark: rgba(58, 55, 51, 0.04);
}

/* ==========================================================================
   Pattern Zellige - Étoile 8 branches
   Inspiré des carreaux de céramique traditionnels
   ========================================================================== */

.pattern-zellige {
  background-color: var(--color-sable-light);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='%23D4A5A5' fill-opacity='0.06'%3E%3Cpath d='M40 0L50 15L65 10L60 25L75 30L65 40L75 50L60 55L65 70L50 65L40 80L30 65L15 70L20 55L5 50L15 40L5 30L20 25L15 10L30 15Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 80px 80px;
}

.pattern-zellige-subtle {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='%23D4A5A5' fill-opacity='0.03'%3E%3Cpath d='M40 0L50 15L65 10L60 25L75 30L65 40L75 50L60 55L65 70L50 65L40 80L30 65L15 70L20 55L5 50L15 40L5 30L20 25L15 10L30 15Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 80px 80px;
}

/* Pattern zellige doré */
.pattern-zellige-gold {
  background-color: var(--color-sable-light);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='%23C9A962' fill-opacity='0.05'%3E%3Cpath d='M40 0L50 15L65 10L60 25L75 30L65 40L75 50L60 55L65 70L50 65L40 80L30 65L15 70L20 55L5 50L15 40L5 30L20 25L15 10L30 15Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 80px 80px;
}

/* ==========================================================================
   Pattern Moucharabieh - Treillis géométrique
   Inspiré des panneaux en bois ajouré
   ========================================================================== */

.pattern-moucharabieh {
  background-color: var(--color-white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23D4A5A5' stroke-width='0.5' stroke-opacity='0.15'%3E%3Ccircle cx='30' cy='30' r='20'/%3E%3Ccircle cx='30' cy='30' r='10'/%3E%3Cpath d='M30 10V50M10 30H50M16 16L44 44M44 16L16 44'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 60px 60px;
}

.pattern-moucharabieh-subtle {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23D4A5A5' stroke-width='0.5' stroke-opacity='0.08'%3E%3Ccircle cx='30' cy='30' r='20'/%3E%3Ccircle cx='30' cy='30' r='10'/%3E%3Cpath d='M30 10V50M10 30H50M16 16L44 44M44 16L16 44'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 60px 60px;
}

/* ==========================================================================
   Pattern Losanges - Motif simple et élégant
   ========================================================================== */

.pattern-diamonds {
  background-color: var(--color-white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='%23D4A5A5' fill-opacity='0.05'%3E%3Cpath d='M20 0L25 20L20 40L15 20Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 40px 40px;
}

/* ==========================================================================
   Dividers - Séparateurs ornementaux
   ========================================================================== */

/* Divider marocain avec losange central */
.divider-moroccan {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-6) 0;
}

.divider-moroccan::before,
.divider-moroccan::after {
  content: '';
  flex: 1;
  max-width: 120px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-gold) 50%,
    transparent
  );
}

.divider-moroccan__ornament {
  width: 12px;
  height: 12px;
  background: var(--color-rose);
  transform: rotate(45deg);
  position: relative;
}

.divider-moroccan__ornament::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  background: var(--color-gold);
}

/* Divider arabesque avec SVG */
.divider-arabesque {
  display: block;
  width: 100%;
  max-width: 300px;
  height: 30px;
  margin: var(--space-6) auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 30'%3E%3Cpath d='M0 15H120' stroke='%23C9A962' stroke-width='1' fill='none'/%3E%3Cpath d='M180 15H300' stroke='%23C9A962' stroke-width='1' fill='none'/%3E%3Cpath d='M150 5L155 15L150 25L145 15Z' fill='%23D4A5A5'/%3E%3Ccircle cx='130' cy='15' r='3' fill='%23C9A962'/%3E%3Ccircle cx='170' cy='15' r='3' fill='%23C9A962'/%3E%3Cpath d='M135 15Q142 8 150 8Q158 8 165 15' stroke='%23D4A5A5' stroke-width='1' fill='none'/%3E%3Cpath d='M135 15Q142 22 150 22Q158 22 165 15' stroke='%23D4A5A5' stroke-width='1' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Divider simple avec dégradé */
.divider-gradient {
  width: 100%;
  max-width: 200px;
  height: 2px;
  margin: var(--space-6) auto;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-rose) 20%,
    var(--color-gold) 50%,
    var(--color-rose) 80%,
    transparent
  );
  border-radius: var(--radius-full);
}

/* Divider avec triple point */
.divider-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-6) 0;
}

.divider-dots::before,
.divider-dots::after {
  content: '';
  width: 60px;
  height: 1px;
  background: var(--color-gold);
}

.divider-dots__center {
  display: flex;
  gap: var(--space-2);
}

.divider-dots__dot {
  width: 6px;
  height: 6px;
  background: var(--color-rose);
  border-radius: var(--radius-full);
}

.divider-dots__dot:nth-child(2) {
  background: var(--color-gold);
  width: 8px;
  height: 8px;
}

/* ==========================================================================
   Ornaments - Éléments décoratifs
   ========================================================================== */

/* Étoile marocaine décorative */
.ornament-star {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 0L24 12L36 8L28 16L40 20L28 24L36 32L24 28L20 40L16 28L4 32L12 24L0 20L12 16L4 8L16 12Z' fill='%23C9A962' fill-opacity='0.8'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.ornament-star--rose {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 0L24 12L36 8L28 16L40 20L28 24L36 32L24 28L20 40L16 28L4 32L12 24L0 20L12 16L4 8L16 12Z' fill='%23D4A5A5' fill-opacity='0.8'/%3E%3C/svg%3E");
}

.ornament-star--small {
  width: 24px;
  height: 24px;
}

.ornament-star--large {
  width: 60px;
  height: 60px;
}

/* Bordure décorative */
.border-ornate {
  position: relative;
}

.border-ornate::before,
.border-ornate::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  border: 2px solid var(--color-gold);
  opacity: 0.5;
}

.border-ornate::before {
  top: -5px;
  left: -5px;
  border-right: none;
  border-bottom: none;
}

.border-ornate::after {
  bottom: -5px;
  right: -5px;
  border-left: none;
  border-top: none;
}

/* ==========================================================================
   Section Backgrounds - Fonds de section avec patterns
   ========================================================================== */

.section--pattern {
  position: relative;
}

.section--pattern::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='%23D4A5A5' fill-opacity='0.03'%3E%3Cpath d='M40 0L50 15L65 10L60 25L75 30L65 40L75 50L60 55L65 70L50 65L40 80L30 65L15 70L20 55L5 50L15 40L5 30L20 25L15 10L30 15Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 80px 80px;
  pointer-events: none;
  z-index: 0;
}

.section--pattern > * {
  position: relative;
  z-index: 1;
}

/* Section avec fond rose léger */
.section--rose {
  background-color: var(--color-rose-lighter);
}

/* Section avec fond sable */
.section--sable {
  background-color: var(--color-sable);
}

/* ==========================================================================
   Hover Effects - Effets au survol avec touche marocaine
   ========================================================================== */

/* Glow doré au survol */
.hover-glow-gold {
  transition: box-shadow var(--duration-normal) var(--ease-luxe);
}

.hover-glow-gold:hover {
  box-shadow: 0 0 20px rgba(201, 169, 98, 0.3);
}

/* Glow rose au survol */
.hover-glow-rose {
  transition: box-shadow var(--duration-normal) var(--ease-luxe);
}

.hover-glow-rose:hover {
  box-shadow: 0 0 20px rgba(212, 165, 165, 0.3);
}

/* Bordure dorée animée */
.hover-border-gold {
  position: relative;
}

.hover-border-gold::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-rose), var(--color-gold));
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--duration-normal) var(--ease-luxe);
}

.hover-border-gold:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}