/** Shopify CDN: Minification failed

Line 48:0 Unexpected "<"
Line 57:7 Expected ":"
Line 334:0 Unexpected "`"
Line 342:38 Unterminated string token
Line 346:106 Unterminated string token
Line 352:53 Unterminated string token
Line 422:40 Unterminated string token
Line 432:58 Unterminated string token

**/
/* ============================================
   IMAGE RESPONSIVE PRO - Version ULTRA RENFORCÉE
   ============================================ */

.vp-responsive-image-wrapper {
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: block !important;
}

.vp-responsive-image-container {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Position de l'image */
.vp-alignment-left {
  margin-left: 0 !important;
  margin-right: auto !important;
}

.vp-alignment-center {
  margin-left: auto !important;
  margin-right: auto !important;
}

.vp-alignment-right {
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* Container de l'élément picture */
<picture class="vp-responsive-picture" style="display: block !important; visibility: visible !important; width: 100% !important;">
  display: block !important;
  width: 100% !important;
  line-height: 0 !important;
  visibility: visible !important;
}

/* L'image elle-même - FORCÉE À ÊTRE VISIBLE */
.vp-responsive-img {
  style="display: block !important; visibility: visible !important; opacity: 1 !important; max-width: 100% !important;"
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  transition: transform 0.3s ease !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Contrôle des dimensions sur MOBILE (moins de 750px de large) */
@media screen and (max-width: 749px) {
  .vp-responsive-img {
    max-width: var(--mobile-width, 750px) !important;
  }
  
  .vp-responsive-image-container {
    max-width: var(--mobile-width, 750px) !important;
  }
}

/* Contrôle des dimensions sur ORDINATEUR (750px et plus) */
@media screen and (min-width: 750px) {
  .vp-responsive-img {
    max-width: var(--desktop-width, 1200px) !important;
  }
  
  .vp-responsive-image-container {
    max-width: var(--desktop-width, 1200px) !important;
  }
}

/* Légende sous l'image */
.vp-image-caption {
  display: block !important;
  margin-top: 1rem !important;
  padding: 0.5rem !important;
  font-size: 0.875rem !important;
  color: rgba(18, 18, 18, 0.75) !important;
  text-align: center !important;
  font-style: italic !important;
}

/* Effet zoom au survol (si activé) */
.vp-responsive-img[data-zoom="true"] {
  cursor: zoom-in !important;
}

.vp-responsive-img[data-zoom="true"]:hover {
  transform: scale(1.02) !important;
}

/* Image non chargée (placeholder) */
.vp-responsive-image-placeholder {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 300px !important;
  background: rgba(18, 18, 18, 0.04) !important;
  border: 2px dashed rgba(18, 18, 18, 0.2) !important;
  border-radius: 8px !important;
  padding: 2rem !important;
}

.vp-responsive-image-placeholder .placeholder-svg {
  width: 80px !important;
  height: 80px !important;
  opacity: 0.3 !important;
  margin-bottom: 1rem !important;
}

.vp-responsive-image-placeholder p {
  font-size: 0.875rem !important;
  color: rgba(18, 18, 18, 0.5) !important;
  margin: 0 !important;
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce) {
  .vp-responsive-img {
    transform: none !important;
    transition: none !important;
  }
}

/* Pour l'impression */
@media print {
  .vp-responsive-img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
}
/* ============================================
   HERO CONTENT (Titre + Texte + Bouton)
   ============================================ */

.vp-responsive-hero-wrapper {
  width: 100%;
  margin: 0 auto;
}

.vp-responsive-hero-container {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Overlay (calque sombre) */
.vp-hero-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: rgba(0, 0, 0, var(--overlay-opacity)) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Container du contenu (texte par-dessus l'image) */
.vp-hero-content {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: var(--content-position) !important;
  justify-content: center !important;
  padding: 2rem !important;
  z-index: 2 !important;
}

.vp-hero-content-inner {
  max-width: 800px !important;
  width: 100% !important;
  text-align: var(--text-alignment) !important;
}

/* Titres */
.vp-hero-heading {
  margin: 0 0 1rem 0 !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.vp-hero-heading--small {
  font-size: 1.5rem !important;
}

.vp-hero-heading--medium {
  font-size: 2rem !important;
}

.vp-hero-heading--large {
  font-size: 3rem !important;
}

.vp-hero-heading--xlarge {
  font-size: 4rem !important;
}

/* Texte / Description */
.vp-hero-text {
  margin: 0 0 1.5rem 0 !important;
  line-height: 1.6 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.vp-hero-text--small {
  font-size: 0.875rem !important;
}

.vp-hero-text--medium {
  font-size: 1rem !important;
}

.vp-hero-text--large {
  font-size: 1.25rem !important;
}

.vp-hero-text p {
  margin: 0 0 0.5rem 0 !important;
}

.vp-hero-text p:last-child {
  margin-bottom: 0 !important;
}

/* Bouton */
.vp-hero-button-wrapper {
  margin-top: 2rem !important;
}

.vp-hero-button {
  display: inline-block !important;
  padding: 0.875rem 2rem !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border-radius: 4px !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  border: 2px solid transparent !important;
}

.vp-hero-button--primary {
  /* Styles déjà définis inline via settings */
}

.vp-hero-button--secondary {
  background-color: transparent !important;
  border: 2px solid currentColor !important;
}

.vp-hero-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  opacity: 0.9 !important;
}

/* Responsive Mobile */
@media screen and (max-width: 749px) {
  .vp-hero-content {
    padding: 1.5rem !important;
  }

  .vp-hero-heading--small {
    font-size: 1.25rem !important;
  }

  .vp-hero-heading--medium {
    font-size: 1.5rem !important;
  }

  .vp-hero-heading--large {
    font-size: 2rem !important;
  }

  .vp-hero-heading--xlarge {
    font-size: 2.5rem !important;
  }

  .vp-hero-text--small {
    font-size: 0.8rem !important;
  }

  .vp-hero-text--medium {
    font-size: 0.875rem !important;
  }

  .vp-hero-text--large {
    font-size: 1rem !important;
  }

  .vp-hero-button {
    padding: 0.75rem 1.5rem !important;
    font-size: 0.875rem !important;
  }
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce) {
  .vp-hero-button {
    transition: none !important;
  }
  
  .vp-hero-button:hover {
    transform: none !important;
  }
}
```

3. Clique sur **"Save"**

---

## 🎉 ÉTAPE 3 : Utiliser ta nouvelle section HERO

### 1. Aller dans l'éditeur de thème

1. **Boutique en ligne → Thèmes → Personnaliser**

2. Tu verras que ta section "Image Responsive Pro" s'est **transformée** en **"Hero Image avec Contenu"**

### 2. Ajouter ou modifier la section

Si tu as déjà une section "Image Responsive Pro" sur ta page :
- Elle va automatiquement se mettre à jour avec le nouveau code
- **MAIS** elle n'aura pas encore de blocs de contenu

Pour ajouter du contenu :

1. **Clique sur ta section** dans le panneau de gauche

2. Tu verras un bouton **"+ Ajouter un bloc"** en bas des réglages

3. **Clique dessus**

4. Choisis ce que tu veux ajouter :
   - **Titre** → Pour ton titre principal
   - **Texte / Description** → Pour ta description
   - **Bouton** → Pour ton call-to-action

### 3. Configurer chaque bloc

#### 📝 BLOC TITRE

Après avoir ajouté un bloc "Titre", tu verras :
```
✏️ Titre
  Titre: [Votre titre ici]
  Balise HTML: [H1 ▼]
  Taille du titre: [Grand ▼]
  Couleur du titre: [⬜ #ffffff]
```

**Configure :**
- **Titre** : Tape ton titre (ex: "Collection Été 2024")
- **Balise HTML** : Choisis H1 (pour le titre principal)
- **Taille** : Grand ou Très grand
- **Couleur** : Blanc (#ffffff) pour qu'il soit visible sur l'image

#### 📝 BLOC TEXTE
```
📄 Texte / Description
  Texte: [Votre description ici]
  Taille du texte: [Moyen ▼]
  Couleur du texte: [⬜ #ffffff]
```

**Configure :**
- **Texte** : Ta description (tu peux utiliser le formatage riche !)
- **Taille** : Moyen
- **Couleur** : Blanc

#### 📝 BLOC BOUTON
```
🔘 Bouton
  Texte du bouton: [Découvrir]
  Lien du bouton: [/collections/ete]
  Style du bouton: [Primaire ▼]
  Couleur de fond: [⬜ #000000]
  Couleur du texte: [⬜ #ffffff]
```

**Configure :**
- **Texte** : "Découvrir la collection"
- **Lien** : Choisis où le bouton redirige (collection, produit, page)
- **Style** : Primaire (bouton plein) ou Secondaire (bouton avec bordure)
- **Couleurs** : Personnalise selon ta charte

---

## 🎨 RÉGLAGES DE POSITION

Dans les réglages de la section (pas des blocs), tu as maintenant :

### Position verticale du contenu
- **En haut** : Texte en haut de l'image
- **Au centre** : Texte au milieu (recommandé)
- **En bas** : Texte en bas

### Alignement du texte
- **À gauche**
- **Au centre** (recommandé pour hero)
- **À droite**

### Overlay (calque sombre)
- ✅ **Cocher** pour ajouter un filtre sombre sur l'image
- **Opacité** : 30% par défaut (ajuste selon le contraste dont tu as besoin)

---

## 📋 ORDRE DES BLOCS

Tu peux **réorganiser** les blocs en les **glissant-déposant** :
```
🖼️ Hero Image avec Contenu
  📸 Image: [ton-image.jpg]
  
  BLOCS:
  ⋮⋮ Titre              ← Glisse pour réorganiser
  ⋮⋮ Texte / Description
  ⋮⋮ Bouton
  
  + Ajouter un bloc