/* ============================================
   CHAPITRE 9 : Les Backgrounds
   Styles spécifiques à la démonstration
   ============================================ */

/* --- Démonstration couleurs --- */
.demo-colors {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.5rem;
  background: var(--couleur-blanc);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  margin-bottom: 1.5rem;
}

.color-box {
  flex: 1;
  min-width: 120px;
  padding: 1.5rem 1rem;
  border-radius: var(--rayon);
  color: white;
  font-family: var(--police-code);
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  display: grid;
  place-items: center;
}

/* --- Démonstration gradients --- */
.demo-gradients {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  padding: 1.5rem;
  background: var(--couleur-blanc);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  margin-bottom: 1.5rem;
}

.gradient-demo {
  text-align: center;
}

.gradient-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--couleur-secondaire);
  margin-bottom: 0.5rem;
  font-family: var(--police-code);
}

.gradient-box {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--rayon);
}

.gradient-linear {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.gradient-radial {
  background: radial-gradient(circle at 30% 30%, #f093fb 0%, #f5576c 50%, #4facfe 100%);
}

.gradient-conic {
  background: conic-gradient(#ff6b6b, #feca57, #48dbfb, #ff9ff3, #54a0ff, #5f27cd, #ff6b6b);
}

/* --- Démonstration répétition --- */
.demo-repeat {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  padding: 1.5rem;
  background: var(--couleur-blanc);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  margin-bottom: 1.5rem;
}

.repeat-demo {
  text-align: center;
}

.repeat-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--couleur-secondaire);
  margin-bottom: 0.5rem;
  font-family: var(--police-code);
}

.repeat-box {
  width: 100%;
  aspect-ratio: 1;
  border: 2px solid var(--couleur-bordure);
  border-radius: 6px;
  background-image: radial-gradient(#3b82f6 3px, transparent 3px);
  background-size: 20px 20px;
}

.repeat-default { background-repeat: repeat; }
.repeat-x { background-repeat: repeat-x; }
.repeat-y { background-repeat: repeat-y; }
.repeat-no { background-repeat: no-repeat; }

/* --- Démonstration position --- */
.demo-position {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  padding: 1.5rem;
  background: var(--couleur-blanc);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  margin-bottom: 1.5rem;
}

.pos-demo {
  text-align: center;
}

.pos-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--couleur-secondaire);
  margin-bottom: 0.5rem;
  font-family: var(--police-code);
}

.pos-box {
  width: 100%;
  aspect-ratio: 1;
  border: 2px solid var(--couleur-bordure);
  border-radius: 6px;
  background-color: #eff6ff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233b82f6'%3E%3Cpath d='M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 30px;
}

.pos-center { background-position: center; }
.pos-topleft { background-position: top left; }
.pos-bottomright { background-position: bottom right; }
.pos-percent { background-position: 25% 75%; }

/* --- Démonstration size --- */
.demo-size {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  padding: 1.5rem;
  background: var(--couleur-blanc);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  margin-bottom: 1.5rem;
}

.size-demo {
  text-align: center;
}

.size-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--couleur-secondaire);
  margin-bottom: 0.5rem;
  font-family: var(--police-code);
}

.size-box {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 2px solid var(--couleur-bordure);
  border-radius: 6px;
  background-color: #f0f9ff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60' fill='none'%3E%3Crect width='100' height='60' rx='8' fill='%233b82f6' opacity='0.2'/%3E%3Cpath d='M30 40 L50 15 L70 40' stroke='%233b82f6' stroke-width='3' fill='none'/%3E%3Ccircle cx='50' cy='30' r='5' fill='%233b82f6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}

.size-auto { background-size: auto; }
.size-cover { background-size: cover; }
.size-contain { background-size: contain; background-position: center; }

/* --- Démonstration clip text --- */
.demo-clip-text {
  padding: 2rem;
  background: var(--couleur-blanc);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  margin-bottom: 1.5rem;
  text-align: center;
}

.clip-text-demo {
  font-size: 3rem;
  font-weight: 900;
  background: linear-gradient(135deg, #667eea, #764ba2, #f093fb, #f5576c);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 0.5rem;
}

.clip-text-subtitle {
  font-size: 0.9rem;
  color: var(--couleur-texte-clair);
}

/* --- Démonstration patterns --- */
.demo-patterns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  padding: 1.5rem;
  background: var(--couleur-blanc);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  margin-bottom: 1.5rem;
}

.pattern-demo {
  text-align: center;
}

.pattern-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--couleur-secondaire);
  margin-bottom: 0.5rem;
}

.pattern-box {
  width: 100%;
  aspect-ratio: 1;
  border: 2px solid var(--couleur-bordure);
  border-radius: 6px;
}

/* Rayures */
.pattern-stripes {
  background: repeating-linear-gradient(
    0deg,
    #3b82f6,
    #3b82f6 8px,
    #93c5fd 8px,
    #93c5fd 16px
  );
}

/* Pointillés */
.pattern-dots {
  background-color: #f0f9ff;
  background-image: radial-gradient(#3b82f6 2px, transparent 2px);
  background-size: 16px 16px;
}

/* Damier */
.pattern-checkerboard {
  background-color: #ffffff;
  background-image:
    linear-gradient(45deg, #e5e7eb 25%, transparent 25%, transparent 75%, #e5e7eb 75%),
    linear-gradient(45deg, #e5e7eb 25%, transparent 25%, transparent 75%, #e5e7eb 75%);
  background-size: 24px 24px;
  background-position: 0 0, 12px 12px;
}

/* Zigzag */
.pattern-zigzag {
  background:
    linear-gradient(135deg, #3b82f6 25%, transparent 25%) -8px 0,
    linear-gradient(225deg, #3b82f6 25%, transparent 25%) -8px 0,
    linear-gradient(315deg, #3b82f6 25%, transparent 25%),
    linear-gradient(45deg, #3b82f6 25%, transparent 25%);
  background-size: 24px 24px;
  background-color: #93c5fd;
}

/* --- Démonstration blend modes --- */
.demo-blend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  padding: 1.5rem;
  background: var(--couleur-blanc);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  margin-bottom: 1.5rem;
}

.blend-demo {
  text-align: center;
}

.blend-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--couleur-secondaire);
  margin-bottom: 0.5rem;
  font-family: var(--police-code);
}

.blend-box {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--rayon);
  background-image:
    radial-gradient(circle at 30% 30%, #f093fb 0%, transparent 60%),
    radial-gradient(circle at 70% 70%, #4facfe 0%, transparent 60%),
    linear-gradient(135deg, #3b82f6, #8b5cf6);
}

.blend-multiply { background-blend-mode: multiply; }
.blend-screen { background-blend-mode: screen; }
.blend-overlay { background-blend-mode: overlay; }
.blend-darken { background-blend-mode: darken; }

/* --- Démonstration multi-backgrounds --- */
.demo-multi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  padding: 1.5rem;
  background: var(--couleur-blanc);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  margin-bottom: 1.5rem;
}

.multi-demo {
  text-align: center;
}

.multi-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--couleur-secondaire);
  margin-bottom: 0.5rem;
}

.multi-box {
  padding: 2rem;
  border-radius: var(--rayon);
  color: var(--couleur-texte);
}

.multi-box h3 {
  margin-bottom: 0.5rem;
}

.multi-textured {
  background:
    radial-gradient(circle, #d1d5db 1px, transparent 1px),
    linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  background-size: 16px 16px, 100% 100%;
  border: 1px solid var(--couleur-bordure);
}

.multi-band {
  background:
    linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.15) 40%),
    linear-gradient(225deg, transparent 40%, rgba(255,255,255,0.15) 40%),
    linear-gradient(135deg, #3b82f6, #8b5cf6);
  background-size: 40px 40px;
  color: white;
}

/* --- Démonstration hero --- */
.demo-hero {
  margin-bottom: 1.5rem;
}

.hero-demo {
  padding: 4rem 2rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: var(--rayon);
  text-align: center;
  color: white;
}

.hero-titre {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: white;
}

.hero-sous-titre {
  font-size: 1.1rem;
  opacity: 0.9;
  margin-bottom: 1.5rem;
}

.hero-btn {
  padding: 0.75rem 2rem;
  background: rgba(255,255,255,0.2);
  border: 2px solid rgba(255,255,255,0.5);
  color: white;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
}

.hero-btn:hover {
  background: rgba(255,255,255,0.35);
  transform: translateY(-2px);
}