/** Shopify CDN: Minification failed

Line 32:0 All "@import" rules must come first

**/
/* ============================================================
   DBA COUTURE — Section Univers
   Asset : dba-universes.css
   Thème : Dawn (Shopify)
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --dba-cream:        #faf8f5;
  --dba-cream-mid:    #f2ede7;
  --dba-ink:          #1a1816;
  --dba-ink-soft:     rgba(26, 24, 22, 0.55);
  --dba-white:        #ffffff;
  --dba-overlay:      rgba(15, 12, 10, 0.22);
  --dba-overlay-hover:rgba(15, 12, 10, 0.10);
  --dba-font-serif:   'Playfair Display', 'Georgia', 'Times New Roman', serif;
  --dba-transition:   0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dba-grid-default: 33.333% 33.333% 33.333%;
  --dba-grid-hover-1: 40% 30% 30%;
  --dba-grid-hover-2: 30% 40% 30%;
  --dba-grid-hover-3: 30% 30% 40%;
}

/* ── Import Playfair Display depuis Google Fonts ────────────
   (Dawn charge déjà les fonts via theme.liquid, sinon ajouter
    ce @import en tête du fichier ou dans theme.liquid)          */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');


/* ══════════════════════════════════════════════════════════════
   MINI HERO
   ══════════════════════════════════════════════════════════════ */

.dba-hero {
  background-color: var(--dba-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 18vh;
  padding: 3.5rem 2rem;
  text-align: center;
  border-bottom: 1px solid var(--dba-cream-mid);
}

.dba-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
}

/* Label discret au-dessus */
.dba-hero__label {
  font-family: var(--dba-font-serif);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--dba-ink-soft);
  margin: 0;
}

/* Titre principal */
.dba-hero__title {
  font-family: var(--dba-font-serif);
  font-size: clamp(2rem, 4.5vw, 3.8rem);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--dba-ink);
  margin: 0;
  line-height: 1.1;
}

/* Signature */
.dba-hero__subtitle {
  font-family: var(--dba-font-serif);
  font-size: clamp(0.8rem, 1.4vw, 1rem);
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.1em;
  color: var(--dba-ink-soft);
  margin: 0;
}


/* ══════════════════════════════════════════════════════════════
   GRILLE PRINCIPALE
   ══════════════════════════════════════════════════════════════ */

.dba-grid {
  display: grid;
  grid-template-columns: var(--dba-grid-default);
  height: 82vh;
  min-height: 520px;
  width: 100%;
  overflow: hidden;
  transition: grid-template-columns var(--dba-transition);
}

/* Grille 2 colonnes (1 univers désactivé) */
.dba-grid--2 {
  grid-template-columns: 50% 50%;
}

/* Grille 1 colonne (2 univers désactivés) */
.dba-grid--1 {
  grid-template-columns: 100%;
}

/* Hover states sur la grille (desktop uniquement) */
@media (hover: hover) and (pointer: fine) {

  /* 3 colonnes */
  .dba-grid--3:has(.dba-universe--1:hover) {
    grid-template-columns: var(--dba-grid-hover-1);
  }
  .dba-grid--3:has(.dba-universe--2:hover) {
    grid-template-columns: var(--dba-grid-hover-2);
  }
  .dba-grid--3:has(.dba-universe--3:hover) {
    grid-template-columns: var(--dba-grid-hover-3);
  }

  /* 2 colonnes */
  .dba-grid--2:has(.dba-universe:first-child:hover) {
    grid-template-columns: 60% 40%;
  }
  .dba-grid--2:has(.dba-universe:last-child:hover) {
    grid-template-columns: 40% 60%;
  }
}


/* ══════════════════════════════════════════════════════════════
   BLOC UNIVERS
   ══════════════════════════════════════════════════════════════ */

.dba-universe {
  position: relative;
  display: flex;
  /* --t-v / --t-h : centrage réglable par tuile dans l'éditeur */
  align-items: var(--t-v, center);
  justify-content: var(--t-h, center);
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
  transition: flex var(--dba-transition);

  /* Séparateur entre colonnes */
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}
.dba-universe:last-child {
  border-right: none;
}

/* ── Image de fond ─────────────────────────────────────────── */
.dba-universe__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.dba-universe__img,
.dba-universe__placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform-origin: center center;
  transition: transform var(--dba-transition);
}

/* Placeholder SVG Shopify */
.dba-universe__placeholder svg {
  width: 100%;
  height: 100%;
}

@media (hover: hover) and (pointer: fine) {
  .dba-universe:hover .dba-universe__img,
  .dba-universe:hover .dba-universe__placeholder {
    transform: scale(1.06);
  }
}

/* ── Overlay ───────────────────────────────────────────────── */
.dba-universe__overlay {
  position: absolute;
  inset: 0;
  background-color: var(--dba-overlay);
  transition: background-color var(--dba-transition);
  z-index: 1;
}

@media (hover: hover) and (pointer: fine) {
  .dba-universe:hover .dba-universe__overlay {
    background-color: var(--dba-overlay-hover);
  }
}

/* ── Contenu textuel ───────────────────────────────────────── */
.dba-universe__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: var(--t-h, center);
  gap: 1rem;
  padding: 2rem;
  text-align: var(--t-align, center);
}

/* Eyebrow */
.dba-universe__eyebrow {
  font-family: var(--t-font, var(--dba-font-serif));
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--t-color, rgba(255, 255, 255, 0.7));
  display: block;
  transition: opacity var(--dba-transition), letter-spacing var(--dba-transition);
}

@media (hover: hover) and (pointer: fine) {
  .dba-universe:hover .dba-universe__eyebrow {
    opacity: 1;
    letter-spacing: 0.42em;
  }
}

/* Titre univers */
.dba-universe__title {
  font-family: var(--t-font, var(--dba-font-serif));
  font-size: var(--t-size, clamp(1.8rem, 3.2vw, 3.2rem));
  font-weight: var(--t-weight, 400);
  font-style: var(--t-style, normal);
  letter-spacing: 0.08em;
  color: var(--t-color, var(--dba-white));
  margin: 0;
  line-height: 1.15;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.18);
  transition: letter-spacing var(--dba-transition);
}

@media (hover: hover) and (pointer: fine) {
  .dba-universe:hover .dba-universe__title {
    letter-spacing: 0.14em;
  }
}

/* CTA discret */
.dba-universe__cta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity var(--dba-transition),
    transform var(--dba-transition);
}

@media (hover: hover) and (pointer: fine) {
  .dba-universe:hover .dba-universe__cta {
    opacity: 1;
    transform: translateY(0);
  }
}

.dba-universe__cta-line {
  display: block;
  width: 28px;
  height: 1px;
  background-color: var(--t-color, rgba(255, 255, 255, 0.7));
}

.dba-universe__cta-text {
  font-family: var(--dba-font-serif);
  font-size: 0.68rem;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.2em;
  color: var(--t-color, rgba(255, 255, 255, 0.85));
  text-transform: none;
}


/* ══════════════════════════════════════════════════════════════
   ÉTAT « EN COURS DE CONSTRUCTION »
   ------------------------------------------------------------
   La tuile reste visible ET en couleur, mais :
     • l'image passe en flou + désaturation légère (« pâle »)
     • un voile crème l'éclaircit
     • un message personnalisable s'affiche
     • le curseur n'invite plus au clic (la balise <a> devient <div>
       côté Liquid : la tuile n'est donc plus cliquable du tout)
   Les animations au survol restent identiques.
   ══════════════════════════════════════════════════════════════ */

.dba-universe--soon {
  cursor: default;
}

/* Image : floue + pâle, mais toujours en couleur */
.dba-universe--soon .dba-universe__img,
.dba-universe--soon .dba-universe__placeholder {
  filter: blur(6px) saturate(0.72) brightness(1.08);
  /* léger sur-cadrage : évite les bords transparents dus au flou */
  transform: scale(1.06);
}

/* Le survol continue de « zoomer » comme sur une tuile normale */
@media (hover: hover) and (pointer: fine) {
  .dba-universe--soon:hover .dba-universe__img,
  .dba-universe--soon:hover .dba-universe__placeholder {
    transform: scale(1.12);
  }
}

/* Voile crème : pâlit l'image sans la décolorer */
.dba-universe__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(250, 248, 245, 0.46) 0%,
    rgba(250, 248, 245, 0.30) 55%,
    rgba(250, 248, 245, 0.42) 100%
  );
  transition: background var(--dba-transition);
}

@media (hover: hover) and (pointer: fine) {
  .dba-universe--soon:hover .dba-universe__veil {
    background: linear-gradient(
      180deg,
      rgba(250, 248, 245, 0.34) 0%,
      rgba(250, 248, 245, 0.20) 55%,
      rgba(250, 248, 245, 0.32) 100%
    );
  }
}

/* Textes : on renforce l'ombre pour rester lisible sur fond pâli */
.dba-universe--soon .dba-universe__title {
  text-shadow:
    0 2px 20px rgba(15, 12, 10, 0.55),
    0 1px 4px rgba(15, 12, 10, 0.5);
}
.dba-universe--soon .dba-universe__eyebrow {
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 8px rgba(15, 12, 10, 0.6);
}

/* ── Badge « en cours de construction » ────────────────────── */
.dba-universe__soon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  max-width: 100%;
  margin-top: 0.15rem;
  padding: 0.7rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(15, 12, 10, 0.38);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  transition: background-color var(--dba-transition), border-color var(--dba-transition);
}

.dba-universe__soon-rule {
  display: block;
  flex: 0 0 auto;
  width: 22px;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.55);
}

.dba-universe__soon-text {
  font-family: var(--dba-font-serif);
  font-size: 0.7rem;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dba-white);
  text-shadow: 0 1px 6px rgba(15, 12, 10, 0.7);
  line-height: 1.35;
}

@media (hover: hover) and (pointer: fine) {
  .dba-universe--soon:hover .dba-universe__soon {
    background: rgba(15, 12, 10, 0.5);
    border-color: rgba(255, 255, 255, 0.7);
  }
}


/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE (< 750px)
   Les 3 blocs s'empilent verticalement, pas de hover
   ══════════════════════════════════════════════════════════════ */

@media screen and (max-width: 749px) {

  .dba-hero {
    min-height: 14vh;
    padding: 2.5rem 1.5rem;
  }

  .dba-hero__title {
    font-size: clamp(1.75rem, 7vw, 2.6rem);
  }

  .dba-grid {
    display: flex;
    flex-direction: column;
    height: auto;
  }

  .dba-universe {
    height: 70vw;
    min-height: 280px;
    max-height: 480px;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .dba-universe:last-child {
    border-bottom: none;
  }

  /* Sur mobile : CTA toujours visible */
  .dba-universe__cta {
    opacity: 1;
    transform: translateY(0);
  }

  .dba-universe__title {
    font-size: var(--t-size-m, clamp(2rem, 9vw, 2.8rem));
  }

  /* Badge « en construction » — un peu plus compact sur mobile */
  .dba-universe__soon {
    padding: 0.6rem 1.1rem;
    gap: 0.6rem;
  }
  .dba-universe__soon-rule {
    width: 16px;
  }
  .dba-universe__soon-text {
    font-size: 0.64rem;
    letter-spacing: 0.18em;
  }
}


/* ══════════════════════════════════════════════════════════════
   ACCESSIBILITÉ — Focus visible (navigation clavier)
   ══════════════════════════════════════════════════════════════ */

.dba-universe:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: -4px;
}


/* ══════════════════════════════════════════════════════════════
   REDUCE MOTION — Respect des préférences système
   ══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .dba-grid,
  .dba-universe__img,
  .dba-universe__overlay,
  .dba-universe__veil,
  .dba-universe__eyebrow,
  .dba-universe__title,
  .dba-universe__cta,
  .dba-universe__soon {
    transition: none;
  }
}