/* Offres : l'en-tête sur le crème, puis les cartes de l'ancien site (remise, nom, prix, ce qui est inclus, devis)
   sur un plateau sombre, comme la carte des projets. Avec le mouvement, offers-deck.js en fait un paquet qu'on
   fait défiler d'une pichenette (offers-deck.css) ; sans lui, les quatre cartes restent en grille. */

.offers {
  padding: 112px 0 120px;
}
.offers-kicker {
  letter-spacing: 0.3em;
  color: var(--ink-2);
}
.offers-title {
  margin: 12px 0 18px;
  font: italic 900 clamp(2.25rem, 0.5rem + 4.44vw, 5.875rem) / 0.9 var(--sans);
  letter-spacing: -0.05em;
  text-transform: uppercase;
}
.offers-sub {
  max-width: 672px;
  font-size: 18px;
  font-style: italic;
  line-height: 29.25px;
  color: var(--ink-2);
}
.offers-maintenance {
  margin-top: 40px;
  letter-spacing: 0.2em;
  line-height: 1.8;
  color: var(--ink-2);
}
.offers-note {
  max-width: 900px;
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-3);
}

/* ---------- Le plateau : filets verticaux de l'ancien site, lumière au centre ---------- */
.offers-stage {
  position: relative;
  isolation: isolate;
  margin-top: 56px;
  padding: 32px;
  overflow: clip;
  border-radius: 6px;
  color: var(--bg);
  background:
    linear-gradient(90deg, rgb(255 255 255 / 0.035) 1px, transparent 1px) 0 0 / 128px 100%,
    radial-gradient(70% 65% at 50% 52%, #33302c 0%, #161513 58%, #0c0c0c 100%);
}
.offers-stage :focus-visible {
  outline-color: var(--bg);
}

/* ---------- Les cartes ---------- */
.offer-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.offer-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 26px 24px;
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 16px;
  background: linear-gradient(160deg, #2b2926 0%, #161513 74%);
  color: var(--bg);
  box-shadow:
    0 44px 70px -36px rgb(0 0 0 / 0.9),
    inset 0 1px 0 rgb(255 255 255 / 0.08);
}
.offer-card-collect {
  background: linear-gradient(160deg, #24221f 0%, #11100e 100%);
}
.offer-card-admin {
  background: linear-gradient(160deg, #37342f 0%, #171613 77%);
}
/* Pack complet : la carte claire, textes et bouton en encre. */
.offer-card-pack {
  border-color: rgb(255 255 255 / 0.9);
  background: linear-gradient(165deg, #faf9f6 0%, #d4d1cb 94%);
  color: var(--ink);
}
.offer-card-pack :focus-visible {
  outline-color: var(--ink);
}
.offer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: rgb(var(--bg-rgb) / 0.55);
}
.offer-badge {
  padding: 7px 11px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.offer-title {
  margin: 22px 0 12px;
  font: 900 clamp(1.75rem, 2.3vw, 2.125rem) / 0.95 var(--sans);
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.offer-title em {
  font-style: normal;
  color: #8f8c86;
  white-space: nowrap;
}
.offer-desc {
  font-size: 15px;
  line-height: 1.5;
  color: rgb(var(--bg-rgb) / 0.68);
}
.offer-pricing {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin: 18px 0 18px;
  padding: 16px 0 14px;
  border-block: 1px solid rgb(255 255 255 / 0.14);
}
/* L'ancien prix est barré par un trait de fond, que le paquet redessine quand la carte passe devant. */
.offer-old {
  font: 500 15px / 1 var(--mono);
  color: rgb(var(--bg-rgb) / 0.58);
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 55% / 100% 1.5px;
}
.offer-price {
  font: 900 clamp(2.875rem, 3.9vw, 3.5rem) / 0.9 var(--sans);
  letter-spacing: -0.05em;
  white-space: nowrap;
}
.offer-amount {
  display: inline-block;
}
.offer-caption {
  flex-basis: 100%;
  margin-top: 8px;
  letter-spacing: 0.16em;
  color: rgb(var(--bg-rgb) / 0.55);
}
/* « Ce qui est inclus » : un simple intertitre sur grand écran ; sur téléphone, une ligne qu'on touche pour
   déplier la liste, repliée par offers-deck.js pour garder des cartes courtes. */
.offer-includes {
  margin-bottom: 22px;
}
.offer-list-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  letter-spacing: 0.2em;
  color: rgb(var(--bg-rgb) / 0.55);
  list-style: none;
  cursor: default;
}
.offer-list-title::-webkit-details-marker {
  display: none;
}
.offer-count {
  display: none;
}
.offer-list {
  display: grid;
  gap: 7px;
}
@supports (interpolate-size: allow-keywords) {
  .offer-includes {
    interpolate-size: allow-keywords;
  }
  .offer-includes::details-content {
    height: 0;
    overflow: clip;
    transition:
      height 0.45s var(--ease-out),
      content-visibility 0.45s allow-discrete;
  }
  .offer-includes[open]::details-content {
    height: auto;
  }
}
.offer-list li {
  position: relative;
  padding-left: 26px;
  font-size: 14.5px;
  line-height: 1.4;
  color: rgb(var(--bg-rgb) / 0.86);
}
/* Coche : icône « check » de Phosphor (MIT), comme sur l'ancien site. */
.offer-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.offer-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 50px;
  margin-top: auto;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  white-space: nowrap;
  -webkit-user-drag: none;
  transition:
    background-color 0.25s ease,
    scale 0.15s ease;
}
.offer-cta:hover {
  background: #fff;
}
.offer-cta:active {
  scale: 0.98;
}
.offer-cta .icon {
  font-size: 15px;
  transition: translate 0.35s var(--ease-out);
}
.offer-cta:hover .icon {
  translate: 3px -3px;
}
.offer-card-pack :is(.offer-top, .offer-caption, .offer-list-title) {
  color: rgb(var(--ink-rgb) / 0.62);
}
.offer-card-pack .offer-badge {
  background: var(--ink);
  color: var(--bg);
}
.offer-card-pack .offer-title em {
  color: #77746d;
}
.offer-card-pack .offer-desc {
  color: var(--ink-2);
}
.offer-card-pack .offer-pricing {
  border-color: rgb(var(--ink-rgb) / 0.14);
}
.offer-card-pack .offer-old {
  color: rgb(var(--ink-rgb) / 0.62);
}
.offer-card-pack .offer-list li {
  color: rgb(var(--ink-rgb) / 0.82);
}
.offer-card-pack .offer-cta {
  background: var(--ink);
  color: var(--bg);
}
.offer-card-pack .offer-cta:hover {
  background: #2a2826;
}
@media (forced-colors: active) {
  .offer-old {
    text-decoration: line-through;
  }
}

/* Sans mouvement, les cartes en grille : quatre de front seulement à partir de 1280 px, sinon elles s'écrasent. */
@media (max-width: 1279px) {
  .offer-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .offers {
    padding: 72px 0 80px;
  }
  .offers-title {
    font-size: clamp(1.8125rem, 0.5rem + 5.64vw, 2.5rem);
    line-height: 0.9;
    letter-spacing: -0.05em;
  }
  .offers-sub {
    font-size: 14px;
    line-height: 22.75px;
  }
  .offers-stage {
    margin-top: 40px;
    padding: 16px;
  }
  .offer-cards {
    grid-template-columns: 1fr;
  }
  .offer-card {
    padding: 20px 18px 18px;
    border-radius: 14px;
  }
  .offer-title {
    margin: 18px 0 10px;
    font-size: 24px;
  }
  .offer-desc {
    font-size: 14px;
    line-height: 1.45;
  }
  .offer-pricing {
    margin: 14px 0 0;
    padding: 12px 0;
  }
  .offer-price {
    font-size: 42px;
  }
  .offer-caption {
    margin-top: 6px;
  }
  .offer-includes {
    margin-bottom: 16px;
  }
  .offer-list-title {
    min-height: 46px;
    margin-bottom: 0;
    border-bottom: 1px solid rgb(255 255 255 / 0.14);
    cursor: pointer;
  }
  .offer-card-pack .offer-list-title {
    border-color: rgb(var(--ink-rgb) / 0.14);
  }
  .offer-count {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    letter-spacing: 0.12em;
  }
  .offer-count .icon {
    font-size: 14px;
    transition: rotate 0.3s var(--ease-out);
  }
  .offer-includes[open] .offer-count .icon {
    rotate: 45deg;
  }
  .offer-list {
    gap: 8px;
    padding: 12px 0 2px;
  }
  .offer-list li {
    font-size: 14px;
  }
  .offer-cta {
    min-height: 46px;
  }
}