@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300;0,400;1,300;1,400&family=Cormorant+SC:wght@400;500&display=swap');

/* =============================================================
   GORELI — styles de marque (thème enfant YOOtheme Pro)
   Chargé automatiquement par YOOtheme Pro.

   Couleurs : extraites des maquettes Canva (provisoires,
   à confirmer avec la charte graphique).
   Polices : à régler dans le Style Customizer YOOtheme
   (le picker télécharge et héberge les Google Fonts en local).
   ============================================================= */

:root{
  --gor-beige:   #EDE5D7;   /* crème / fond clair */
  --gor-beige-2: #F5EFE4;
  --gor-green:   #2E3A2F;   /* vert sapin */
  --gor-green-d: #222B23;
  --gor-gold:    #8A6F4A;   /* or / bronze (accents) */
  --gor-ink:     #14110D;   /* encre — fonds sombres */
  --gor-line:    rgba(20,17,13,.18);

  /* Polices de marque (charte Goreli) */
  --gor-serif: 'Cormorant', Georgia, serif;     /* titres & corps — weight 300, italique pour les headlines */
  --gor-sc:    'Cormorant SC', Georgia, serif;  /* small caps — labels, nav, footer, prix, n° de catégorie */
}

/* ---- Utilitaires typographiques ---- */
.gor-eyebrow{
  font-family: var(--gor-sc);   /* small caps : écrire en minuscules pour le rendu petites-capitales */
  letter-spacing: .22em;
  font-size: 14px;
  font-weight: 500;
}
.gor-display{
  font-family: var(--gor-serif);
  font-weight: 300;
  line-height: .96;
}
.gor-italic{ font-style: italic; }

/* ---- CTA texte + flèche (underline animé) ---- */
.gor-cta{
  font-family: var(--gor-sc);
  letter-spacing: .18em;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: .7em;
  position: relative;
  padding-bottom: 6px;
  text-decoration: none;
  color: inherit;
}
.gor-cta::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background: currentColor; transform-origin:left; transition: transform .5s ease;
}
.gor-cta .gor-arrow{ transition: transform .4s ease; }
.gor-cta:hover .gor-arrow{ transform: translateX(8px); }

/* ---- Carte collection / produit ---- */
.gor-card{ cursor:pointer; }
.gor-card .gor-card-media{
  aspect-ratio: 3 / 3.6;
  background: linear-gradient(160deg, var(--gor-beige-2), #ded3bf);
  border: 1px solid var(--gor-line);
  overflow: hidden;
  transition: transform .6s ease;
}
.gor-card:hover .gor-card-media{ transform: scale(.985); }
.gor-card h3{
  font-family: var(--gor-serif);
  font-style: italic; font-weight: 300; font-size: 32px;
  margin: 22px 0 6px;
}
.gor-card .gor-price{
  font-family: var(--gor-sc);
  letter-spacing: .12em; font-size: 14px;
  color: #6a6150;
}

/* ---- Animation d'apparition au scroll ----
   Ajouter la classe .gor-reveal à n'importe quel élément/section
   (via l'onglet Advanced > CSS class d'un élément YOOtheme).        */
.gor-reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s ease, transform 1s ease;
}
.gor-reveal.gor-in{ opacity: 1; transform: none; }

/* Respecte les préférences d'accessibilité */
@media (prefers-reduced-motion: reduce){
  .gor-reveal{ opacity:1 !important; transform:none !important; transition:none; }
}

/* ---- Bouton 360° + pop-up vidéos par métal ([goreli_360]) ---- */
.gor-360-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:54px; height:54px; border-radius:50%;
  border:1px solid var(--gor-line); background:rgba(255,255,255,.7);
  color:var(--gor-ink); cursor:pointer; backdrop-filter:blur(2px);
  transition:background .3s ease, transform .3s ease;
}
.gor-360-btn:hover{ background:#fff; transform:scale(1.05); }

/* Superposer le bouton sur la photo produit :
   ajoute la classe « gor-360-anchor » sur la COLONNE qui contient la galerie. */
.gor-360-anchor{ position:relative; }
.gor-360-anchor .gor-360-btn{ position:absolute; top:18px; left:18px; z-index:5; }

.gor-360-icon{
  font-family:var(--gor-sc); font-size:13px; letter-spacing:.04em; line-height:1;
}

/* Pop-up */
.gor-360-modal .uk-modal-body{ min-height:100vh; padding:48px 24px; }
.gor-360-nav{ margin-bottom:34px; }
.gor-360-nav a{
  font-family:var(--gor-sc); letter-spacing:.16em; font-size:15px;
  color:var(--gor-ink); opacity:.55; transition:opacity .3s ease;
}
.gor-360-nav .uk-active a{ opacity:1; }

.gor-360-video{
  max-width:760px; margin:0 auto; aspect-ratio:1/1;
  background:var(--gor-beige-2); border:1px solid var(--gor-line);
}
.gor-360-video video,
.gor-360-video iframe{ width:100%; height:100%; object-fit:cover; display:block; }