/* ==========================================================
   Offres de Laure (assets/js/promos.js, assets/js/home.js)
   Encart en timbres dans la carte postale, ligne d'économie sous les dates,
   et pastille du haut de page. Variables de site.css.
   ========================================================== */

/* ---------- Timbre dentelé (encart) ---------- */
/* Deux couches de masque : l'intérieur plein, et un bord percé de demi-cercles tous les 7 px */
.po-stamp {
  --perf: radial-gradient(circle at 3.5px 3.5px, transparent 2.3px, #000 2.7px) -3.5px -3.5px / 7px 7px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, var(--perf);
  mask: linear-gradient(#000 0 0) content-box, var(--perf);
  padding: 3px; background: var(--coral-deep); color: #fff;
}

/* ---------- Encart dans la carte postale (compact) ---------- */
.po { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .45s var(--ease), opacity .35s, margin .45s var(--ease); margin-top: 0; }
.po.is-open { grid-template-rows: 1fr; opacity: 1; margin-top: 8px; }
.po__in { min-height: 0; overflow: hidden; border-radius: 14px; border: 1.5px dashed rgba(169,88,55,.4); background: rgba(212,111,69,.05); }
.po__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; padding: 6px 4px 2px 12px; }
.po__title { margin: 0; font-family: var(--f-hand); font-size: 18px; line-height: 1.1; color: var(--coral-deep); }
.po__how { margin: 1px 0 0; font-size: 11.5px; line-height: 1.3; color: var(--muted); }
.po__x { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--muted); }
.po__x:hover { background: rgba(169,88,55,.1); color: var(--coral-deep); }
.po__x svg { width: 14px; height: 14px; }
.po__list { list-style: none; margin: 0; padding: 0 12px; max-height: 210px; overflow-y: auto; overscroll-behavior: contain; }
.po-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid rgba(169,88,55,.14); }
.po-row:first-child { border-top: 0; }
.po-stamp { flex: none; width: 42px; height: 49px; box-sizing: border-box; display: grid; place-items: center; transform: rotate(-4deg); }
.po-row:nth-child(even) .po-stamp { transform: rotate(3deg); }
.po-stamp > span { width: 100%; height: 100%; display: grid; place-content: center; text-align: center; border: 1px solid rgba(255,255,255,.45); font-size: 10px; line-height: 1; }
.po-stamp b { display: block; font-family: var(--f-display); font-size: 19px; font-weight: 600; font-variant-numeric: lining-nums; }
.po.is-open .po-stamp { animation: po-stamp .6s var(--ease-spring) both; }
.po.is-open .po-row:nth-child(2) .po-stamp { animation-delay: .08s; }
.po.is-open .po-row:nth-child(3) .po-stamp { animation-delay: .16s; }
@keyframes po-stamp { from { opacity: 0; transform: scale(1.5) rotate(-14deg); } }
.po-row__txt { flex: 1; min-width: 0; }
.po-row p { margin: 0; line-height: 1.25; }
.po-row__when { font-family: var(--f-display); font-size: 16.5px; font-weight: 600; color: var(--ink); font-variant-numeric: lining-nums; }
.po-row__sub { font-size: 12px; color: var(--sea-text); }
.po-row__hurry { color: var(--coral-deep); white-space: nowrap; }
.po-track { position: relative; display: block; height: 3px; margin-top: 5px; border-radius: 3px; background: rgba(74,58,44,.1); }
.po-track i { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--coral); transform-origin: left; }
.po.is-open .po-track i { animation: po-track .9s .15s var(--ease) both; }
@keyframes po-track { from { transform: scaleX(0); } }
.po__axis { display: flex; gap: 10px; padding: 3px 12px 7px; border-top: 1px solid rgba(169,88,55,.14); }
.po__axis-sp { flex: none; width: 42px; }
.po__axis-in { position: relative; flex: 1; height: 12px; }
.po__axis-in span { position: absolute; top: 0; transform: translateX(-1px); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* ---------- Ligne « voir les offres », au-dessus des dates ---------- */
.pc-offers {
  display: flex; align-items: center; gap: 8px; width: 100%; margin: 16px 0 0; padding: 8px 12px; border: 0; border-radius: 12px;
  background: rgba(212,111,69,.09); color: var(--coral-deep); font: inherit; font-size: 14px; text-align: left; transition: background .3s;
}
.pc-offers:hover { background: rgba(212,111,69,.15); }
.pc-offers b { font-weight: 600; }
.pc-offers__more { margin-left: auto; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.pc-offers__more::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: translateY(-2px) rotate(45deg); transition: transform .3s var(--ease); }
.pc-offers[aria-expanded="true"] .pc-offers__more::after { transform: translateY(1px) rotate(-135deg); }

/* ---------- Estimation du séjour, sous les dates ---------- */
.pc-quote { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .45s var(--ease), opacity .35s, margin .45s var(--ease); }
.pc-quote.is-on { grid-template-rows: 1fr; opacity: 1; margin-top: 4px; }
.pc-quote__wrap { min-height: 0; overflow: hidden; }
.pc-quote__in { padding: 10px 14px 9px; border-radius: 14px; background: rgba(22,124,128,.07); color: var(--sea-deep); }
.pc-quote p { margin: 0; line-height: 1.35; }
.pc-quote__k { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--sea-text); }
.pc-quote__total { margin-top: 1px !important; display: flex; align-items: baseline; gap: 10px; }
.pc-quote__total b { font-family: var(--f-display); font-size: 30px; line-height: 1.05; font-weight: 600; color: var(--brown); font-variant-numeric: lining-nums tabular-nums; }
.pc-quote s { font-size: 14px; color: var(--muted); text-decoration-color: var(--coral); }
.pc-quote__det { font-size: 12.5px; color: var(--muted); }
.pc-quote__promo { margin-top: 5px !important; font-size: 13.5px; color: var(--coral-deep); }
.pc-quote__promo b { font-weight: 600; }
.pc-quote__promo button { margin-left: 6px; border: 0; padding: 4px 10px; border-radius: 999px; background: var(--sea); color: #fff; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; }
.pc-quote__to { font-size: 14px; color: var(--muted); }
.pc-quote__note { margin-top: 5px !important; font-size: 11.5px; color: var(--muted); }

/* ---------- Pastille du haut de page ---------- */
.offer-pill {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 7px 16px 7px 10px; border-radius: 999px;
  background: rgba(251,247,240,.82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(169,88,55,.28); color: var(--brown); font-size: 14px; text-decoration: none;
  animation: offer-in .8s .9s var(--ease) both; transition: box-shadow .3s, transform .4s var(--ease-spring);
}
.offer-pill[hidden] { display: none; }
.offer-pill:hover { box-shadow: inset 0 0 0 1px var(--coral-deep), var(--shadow-soft); transform: translateY(-1px); }
.offer-pill b { color: var(--coral-deep); font-weight: 600; }
.offer-pill__dot { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }
.offer-pill__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--coral); animation: offer-ping 2.4s var(--ease) infinite; }
.offer-pill__when { color: var(--muted); }
.offer-pill svg { width: 14px; height: 14px; flex: none; color: var(--coral-deep); transition: transform .3s var(--ease); }
.offer-pill:hover svg { transform: translateX(3px); }
@keyframes offer-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes offer-ping { 0% { transform: scale(1); opacity: .6; } 70%, 100% { transform: scale(2.8); opacity: 0; } }
@media (max-width: 480px) { .offer-pill { font-size: 13px; } .offer-pill__when { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .po, .pc-quote { transition: none; }
  .po.is-open .po-stamp, .po.is-open .po-track i, .offer-pill, .offer-pill__dot::after { animation: none; }
}