/* ==========================================================================
   HERO DEEDAYS (variante 8a) - widget Creative Elements "dlx-deedays-hero" (module io_home_w26)
   Feuille chargée par le contenu "Home DeeDays" : /img/cms/home-w26-2/css/deedays-hero.css
   Portée : .dlx-deedays uniquement. Point de rupture à 900px.
   Ordinateur : photo plein champ, texte à gauche (pastille, H1 petit, H2, 3 paliers, 2 boutons, mention),
   frise des 10 jours en bas. Mobile : texte posé en bas de la photo, 1 bouton, frise.
   Mesures : SPECS-HERO.md du handoff DeeDays (22/10/2026).
   Les polices "DLX Instrument Sans / Serif" sont déclarées par home-w26-2.css.
   ========================================================================== */
.dlx-deedays {
  --dlx-d-accent: #8A5A2E;
  --dlx-d-cream: #FAF8F5;
  --dlx-d-ink: #1A1512;
  --dlx-d-sans: "DLX Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --dlx-d-serif: "DLX Instrument Serif", Georgia, "Times New Roman", serif;
  --dlx-d-days-height: 64px;
  position: relative;
  display: flex;
  flex-direction: column;
  /* 854 = 34 (bandeau d'annonce posé par-dessus) + 820 de la maquette ; suit la hauteur de la fenêtre au-delà */
  min-height: clamp(854px, calc(100vh - 120px), 1080px);
  /* 194 = bandeau 34 + 160 de la maquette : le texte démarre sous l'en-tête transparent (147px) */
  padding: 194px 36px calc(var(--dlx-d-days-height) + 36px);
  overflow: hidden;
  background: #4A4434;
  color: #fff;
  font-family: var(--dlx-d-sans);
  box-sizing: border-box;
}
.dlx-deedays *,
.dlx-deedays *::before,
.dlx-deedays *::after {
  box-sizing: border-box;
}
/* Variantes ordinateur / mobile d'un même texte */
.dlx-deedays .dlx-deedays__mobile {
  display: none;
}
/* Le thème impose height:auto aux images : forçage nécessaire pour remplir le bloc */
.dlx-deedays picture.dlx-deedays__media,
.dlx-deedays img.dlx-deedays__img {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
}
.dlx-deedays img.dlx-deedays__img {
  object-fit: cover;
  /* Le haut de la photo est toujours gardé (peu de ciel au-dessus des têtes) : sur un bloc plus large que l'image (v2, ratio 1440/854),
     c'est le bas (herbe) qui est rogné */
  object-position: 50% 0;
}
/* Voile : bande fine sous l'en-tête, dégradé à gauche derrière le texte qui s'arrête avant la mannequin (47 %),
   léger fond sous la frise. Jamais sur les visages (valeurs du SPECS) */
.dlx-deedays .dlx-deedays__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(20, 14, 10, .38) 0%, rgba(20, 14, 10, 0) 11%, rgba(20, 14, 10, 0) 82%, rgba(20, 14, 10, .5) 100%),
    linear-gradient(90deg, rgba(20, 14, 10, .76) 0%, rgba(20, 14, 10, .6) 26%, rgba(20, 14, 10, .24) 40%, rgba(20, 14, 10, 0) 47%);
}

/* ------------------------------------------------------------------ texte */
.dlx-deedays .dlx-deedays__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 640px;
}
.dlx-deedays p.dlx-deedays__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--dlx-d-accent);
  color: #fff;
  font-family: var(--dlx-d-sans);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.dlx-deedays .dlx-deedays__badge-sep {
  width: 1px;
  height: 12px;
  background: rgba(255, 255, 255, .45);
}
.dlx-deedays .dlx-deedays__badge-dates {
  font-weight: 500;
  letter-spacing: .12em;
}
.dlx-deedays sup {
  font-size: .7em;
  line-height: 0;
  vertical-align: .35em;
  text-transform: none; /* "1er" reste en minuscules dans la pastille en majuscules */
}
/* Titres : le thème met les h1/h2 en majuscules et en gras, surtout sur mobile */
.dlx-deedays h1.dlx-deedays__brand {
  margin: 14px 0 0;
  padding: 0;
  color: #fff;
  font-family: var(--dlx-d-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none !important;
}
.dlx-deedays h2.dlx-deedays__title {
  margin: 14px 0 0;
  padding: 0;
  color: #fff;
  font-family: var(--dlx-d-serif);
  font-size: 62px;
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0;
  text-transform: none !important;
}
.dlx-deedays .dlx-deedays__title-first {
  white-space: nowrap;
}
.dlx-deedays h2.dlx-deedays__title em {
  font-style: italic;
  font-weight: 400;
}

/* Paliers : 3 colonnes, filets haut et bas, montants de taille croissante */
.dlx-deedays ul.dlx-deedays__tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 30px 0 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, .32);
  border-bottom: 1px solid rgba(255, 255, 255, .32);
  list-style: none;
}
.dlx-deedays li.dlx-deedays__tier {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 18px 0;
}
.dlx-deedays li.dlx-deedays__tier + li.dlx-deedays__tier {
  padding-left: 22px;
  border-left: 1px solid rgba(255, 255, 255, .32);
}
.dlx-deedays strong.dlx-deedays__amount {
  font-family: var(--dlx-d-sans);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.dlx-deedays li.dlx-deedays__tier--2 strong.dlx-deedays__amount {
  font-size: 40px;
}
.dlx-deedays li.dlx-deedays__tier--3 strong.dlx-deedays__amount {
  font-size: 48px;
}
.dlx-deedays span.dlx-deedays__legend {
  color: rgba(255, 255, 255, .86);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
}

/* Boutons : pilules de 52px, plein crème et contour blanc sur fond translucide. Le thème force a{font-size:.875rem} */
.dlx-deedays p.dlx-deedays__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0 0;
}
.dlx-deedays a.dlx-deedays__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 30px;
  border-radius: 999px;
  font-family: var(--dlx-d-sans);
  font-size: 14px !important;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
.dlx-deedays a.dlx-deedays__button--primary {
  background: var(--dlx-d-cream);
  color: var(--dlx-d-ink);
}
.dlx-deedays a.dlx-deedays__button--primary:hover,
.dlx-deedays a.dlx-deedays__button--primary:focus-visible {
  background: #fff;
  color: var(--dlx-d-ink);
}
.dlx-deedays a.dlx-deedays__button--ghost {
  padding: 0 26px;
  border: 1px solid rgba(255, 255, 255, .6);
  background: rgba(255, 255, 255, .12);
  color: #fff;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.dlx-deedays a.dlx-deedays__button--ghost:hover,
.dlx-deedays a.dlx-deedays__button--ghost:focus-visible {
  background: rgba(255, 255, 255, .22);
  color: #fff;
}
.dlx-deedays p.dlx-deedays__legal {
  margin: 14px 0 0;
  color: rgba(255, 255, 255, .74);
  font-size: 11.5px;
  line-height: 1.5;
}

/* ------------------------------------------------------------------ frise des jours */
.dlx-deedays ul.dlx-deedays__days {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(var(--dlx-deedays-days, 10), 1fr);
  height: var(--dlx-d-days-height);
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, .22);
  list-style: none;
}
.dlx-deedays li.dlx-deedays__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  border-right: 1px solid rgba(255, 255, 255, .14);
  background: rgba(20, 14, 10, .28);
  color: #fff;
}
.dlx-deedays li.dlx-deedays__day:last-child {
  border-right: 0;
}
.dlx-deedays li.dlx-deedays__day.is-today {
  background: rgba(138, 90, 46, .92);
}
.dlx-deedays .dlx-deedays__number {
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.dlx-deedays .dlx-deedays__label {
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .82;
}

/* ------------------------------------------------------------------ écrans intermédiaires */
@media (max-width: 1199.98px) {
  .dlx-deedays h2.dlx-deedays__title {
    font-size: 52px;
  }
  .dlx-deedays .dlx-deedays__content {
    max-width: 560px;
  }
}

/* ------------------------------------------------------------------ mobile et tablette portrait */
@media (max-width: 900px) {
  .dlx-deedays {
    --dlx-d-days-height: 54px;
    justify-content: flex-end;
    /* 748 = 28 (bandeau) + 720 de la maquette ; le texte est posé en bas, 18px au-dessus de la frise */
    min-height: 748px;
    padding: 96px 18px calc(var(--dlx-d-days-height) + 18px);
  }
  .dlx-deedays .dlx-deedays__desktop,
  .dlx-deedays a.dlx-deedays__button.dlx-deedays__desktop {
    display: none;
  }
  .dlx-deedays .dlx-deedays__mobile {
    display: inline;
  }
  .dlx-deedays img.dlx-deedays__img {
    object-position: 60% 30%;
  }
  /* Voile vertical seulement : rien sur les visages, qui sont dans le tiers haut de la photo */
  .dlx-deedays .dlx-deedays__shade {
    background: linear-gradient(180deg, rgba(20, 14, 10, .4) 0%, rgba(20, 14, 10, 0) 11%, rgba(20, 14, 10, 0) 40%, rgba(20, 14, 10, .55) 58%, rgba(20, 14, 10, .88) 100%);
  }
  .dlx-deedays .dlx-deedays__content {
    max-width: none;
  }
  .dlx-deedays p.dlx-deedays__badge {
    gap: 8px;
    padding: 8px 14px;
    font-size: 10px;
  }
  .dlx-deedays .dlx-deedays__badge-sep {
    display: none;
  }
  .dlx-deedays h1.dlx-deedays__brand {
    margin-top: 12px;
    font-size: 12px;
  }
  .dlx-deedays h2.dlx-deedays__title {
    margin-top: 10px;
    font-size: 42px;
  }
  .dlx-deedays .dlx-deedays__title-first {
    white-space: normal;
  }
  .dlx-deedays ul.dlx-deedays__tiers {
    margin-top: 18px;
  }
  .dlx-deedays li.dlx-deedays__tier {
    gap: 4px;
    padding: 12px 0;
  }
  .dlx-deedays li.dlx-deedays__tier + li.dlx-deedays__tier {
    padding-left: 14px;
  }
  .dlx-deedays strong.dlx-deedays__amount,
  .dlx-deedays li.dlx-deedays__tier--2 strong.dlx-deedays__amount,
  .dlx-deedays li.dlx-deedays__tier--3 strong.dlx-deedays__amount {
    font-size: 26px;
  }
  .dlx-deedays span.dlx-deedays__legend {
    font-size: 11px;
  }
  .dlx-deedays p.dlx-deedays__cta {
    margin-top: 18px;
  }
  .dlx-deedays a.dlx-deedays__button--primary {
    width: 100%;
    height: 50px;
  }
  .dlx-deedays p.dlx-deedays__legal {
    margin-top: 12px;
    font-size: 10.5px;
  }
  .dlx-deedays .dlx-deedays__number {
    font-size: 12px;
  }
  .dlx-deedays .dlx-deedays__label {
    font-size: 8px;
    letter-spacing: .1em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dlx-deedays a.dlx-deedays__button {
    transition: none;
  }
}