/* Eclara — Adaptive motifs per language */

/* Zellige (Darija/Arabic) */
body[data-motif="zellige"] .motif-section {
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 0L40 20L20 40L0 20z' fill='none' stroke='%23C4956A' stroke-opacity='0.06' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 40px 40px;
}
body[data-motif="zellige"] .hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 0L40 20L20 40L0 20z' fill='none' stroke='%23C4956A' stroke-opacity='0.04' stroke-width='1'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 0;
}

/* Art Deco (French) */
body[data-motif="deco"] .motif-section {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5 Q45 5 45 20 L45 55 M15 20 Q15 5 30 5 L15 55' fill='none' stroke='%23C4956A' stroke-opacity='0.05' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 60px 60px;
}
body[data-motif="deco"] .hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5 Q45 5 45 20 L45 55 M15 20 Q15 5 30 5 L15 55' fill='none' stroke='%23C4956A' stroke-opacity='0.03' stroke-width='1'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 0;
}

/* Minimal geometric (English) */
body[data-motif="minimal"] .motif-section {
  background-image: radial-gradient(circle, rgba(196,149,106,0.05) 1px, transparent 1px);
  background-size: 24px 24px;
}
body[data-motif="minimal"] .hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(196,149,106,0.03) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none; z-index: 0;
}

/* Hero positioning needs relative */
.hero { position: relative; }
.hero > * { position: relative; z-index: 1; }