/* ============================================================
   OFFRE « 3 MOIS OFFERTS » : bandeau, pop-up, mention de l'accueil, lien de pied de page.
   Chargé sur toutes les pages par scripts/offre_bandeau.py. Réutilise les tokens de site.css.
   html.offre-fini  : offre terminée (date dépassée)  -> tout est masqué
   html.offre-ferme : bandeau fermé par le visiteur   -> bandeau masqué, nav remise à sa place
   ============================================================ */

/* ── BANDEAU (pleine largeur, collé en haut ; se cache quand on descend, revient dès qu'on remonte) ── */
:root { --offre-h: 44px; }
@media (max-width: 767px) { :root { --offre-h: 52px; } }

.offre-bandeau {
  position: sticky; top: 0; z-index: 1001;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
  height: var(--offre-h);
  display: flex; align-items: center; justify-content: center;
  padding: 0 48px;
  background: var(--lime); color: #16160F;
  font-family: var(--sans); font-size: 14px; line-height: 1.3; text-align: center;
}
.offre-bandeau .ob-in { margin: 0; max-width: 1000px; }
.offre-bandeau strong { font-weight: 800; }
.offre-bandeau .ob-court { display: none; }
.offre-bandeau .ob-lien {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; white-space: nowrap;
  color: #16160F; font-weight: 700;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.offre-bandeau .ob-lien:hover, .offre-bandeau .ob-lien:focus-visible { text-decoration-thickness: 3px; }
.offre-bandeau .ob-lien:focus-visible, .offre-bandeau .ob-x:focus-visible { outline: 2px solid #16160F; outline-offset: 3px; border-radius: 4px; }
.offre-bandeau .ob-fleche { width: 16px; height: 16px; flex: none; transition: transform .2s cubic-bezier(.25,1,.5,1); }
.offre-bandeau .ob-lien:hover .ob-fleche { transform: translateX(3px); }
.offre-bandeau .ob-x {
  display: none; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%; align-items: center; justify-content: center;
  color: #16160F; background: transparent; border: 0; cursor: pointer; transition: background .2s;
}
.js .offre-bandeau .ob-x { display: inline-flex; }
.offre-bandeau .ob-x:hover { background: rgba(22,22,15,.12); }
.offre-bandeau .ob-x svg { width: 18px; height: 18px; }
@media (max-width: 767px) {
  .offre-bandeau { padding: 0 44px 0 16px; font-size: 13.5px; }
  .offre-bandeau .ob-long { display: none; }
  .offre-bandeau .ob-court { display: inline; }
  .offre-bandeau .ob-lien { margin-left: 4px; }
}

/* la nav (fixe) et le tiroir mobile descendent sous le bandeau ; offre.js ajoute html.offre-bandeau-cache au défilement vers le bas */
.offre-bandeau ~ header .nav,
.offre-bandeau ~ .drawer { top: calc(var(--nav-top) + var(--offre-h)); transition: top .35s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; }
html.offre-bandeau-cache .offre-bandeau { transform: translateY(-100%); }
html.offre-bandeau-cache .offre-bandeau ~ header .nav,
html.offre-bandeau-cache .offre-bandeau ~ .drawer { top: var(--nav-top); }
html.offre-bandeau-ombre:not(.offre-bandeau-cache) .offre-bandeau { box-shadow: 0 6px 18px rgba(22,22,15,.14); }

html.offre-fini .offre-bandeau,
html.offre-ferme .offre-bandeau { display: none; }
html.offre-fini .offre-bandeau ~ header .nav,
html.offre-ferme .offre-bandeau ~ header .nav,
html.offre-fini .offre-bandeau ~ .drawer,
html.offre-ferme .offre-bandeau ~ .drawer { top: var(--nav-top); }

/* ── LIEN DE PIED DE PAGE + MENTION DE L'ACCUEIL (masqués une fois l'offre finie) ── */
html.offre-fini .ft-col li.offre-ft,
html.offre-fini .hero-offre { display: none; }

.hero-offre { margin: 14px 0 0; font-size: 15px; color: var(--text-secondary); }
.home .hero-offre { opacity: 0; animation: homeFadeUp .7s ease .6s forwards; }
.hero-offre { line-height: 1.9; }
.hero-offre a { color: var(--black); font-weight: 600; }
.hero-offre a strong { font-weight: 800; background: var(--lime); color: #16160F; padding: 2px 8px; border-radius: 6px; margin-right: 8px; white-space: nowrap; }
.hero-offre a span.ho-txt { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--lime-dark); text-decoration-thickness: 2px; }
.hero-offre a:hover span.ho-txt { text-decoration-color: var(--black); }
@media (prefers-reduced-motion: reduce) { .home .hero-offre { animation: none; opacity: 1; } }

/* ── POP-UP ── */
html.offre-pop-ouverte, html.offre-pop-ouverte body { overflow: hidden; }

.offre-pop {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.offre-pop .op-fond {
  position: absolute; inset: 0; background: rgba(14,14,18,.62);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: opFond .25s ease both;
}
.offre-pop .op-carte {
  position: relative; z-index: 1;
  width: min(880px, 100%); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow: auto;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  background: var(--bg-card); color: var(--text-primary);
  border-radius: var(--r-lg); box-shadow: var(--shadow-float);
  animation: opCarte .32s cubic-bezier(.2,.9,.3,1.1) both;
}
html[data-theme="dark"] .offre-pop .op-carte { box-shadow: var(--shadow-float), 0 0 0 1px rgba(255,255,255,.08); }
.offre-pop .op-carte:focus, .offre-pop .op-carte:focus-visible { outline: none; }

/* visuel lime : « 3 mois » très grand */
.offre-pop .op-visuel {
  position: relative; overflow: hidden;
  background: var(--lime); color: #16160F;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: 44px 36px; font-family: var(--display);
}
.offre-pop .op-3 { font-size: 200px; font-weight: 800; line-height: .8; letter-spacing: -0.06em; }
.offre-pop .op-mois { font-size: 76px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; margin-top: 6px; }
.offre-pop .op-offerts {
  display: inline-block; margin-top: 18px; padding: 10px 20px; border-radius: var(--r-pill);
  background: #16160F; color: var(--lime); font-size: 22px; font-weight: 800; font-style: italic;
  transform: rotate(-3deg); box-shadow: 0 6px 14px rgba(22,22,15,.25);
}

.offre-pop .op-corps { padding: 44px 44px 32px; display: flex; flex-direction: column; }
.offre-pop .op-eyebrow { margin-bottom: 14px; }
.offre-pop h2 { font-size: clamp(28px, 3.2vw, 36px); line-height: 1.1; margin: 0 0 20px; }
.offre-pop .op-liste { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 12px; }
.offre-pop .op-liste li { display: flex; align-items: flex-start; gap: 12px; font-size: 16.5px; line-height: 1.45; color: var(--text-primary); }
.offre-pop .op-liste .chip-check { margin-top: 1px; }
.offre-pop .op-date { font-size: 14px; color: var(--text-secondary); margin: 0 0 24px; }
.offre-pop .op-date strong { color: var(--text-primary); }
.offre-pop .op-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.offre-pop .op-ctas .btn { padding: 14px 22px; }
.offre-pop .op-ctas .btn svg { width: 18px; height: 18px; flex: none; }
.offre-pop .op-non {
  align-self: flex-start; margin-top: 14px; padding: 8px 2px; background: none; border: 0; cursor: pointer;
  font: 600 14px/1.3 var(--sans); color: var(--text-secondary);
  text-decoration: underline; text-underline-offset: 3px;
}
.offre-pop .op-non:hover { color: var(--black); }
.offre-pop .op-x {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-secondary); color: var(--black); transition: background .2s, color .2s;
}
.offre-pop .op-x:hover, .offre-pop .op-x:focus-visible { background: var(--lime); color: #16160F; }
.offre-pop .op-x svg { width: 18px; height: 18px; }
.offre-pop a:focus-visible, .offre-pop button:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 3px; }

@keyframes opFond { from { opacity: 0; } to { opacity: 1; } }
@keyframes opCarte { from { opacity: 0; transform: translateY(40px) scale(.94); } 60% { opacity: 1; transform: translateY(-4px) scale(1.005); } to { opacity: 1; transform: none; } }

/* entrée en cascade : le « 3 » arrive en grand, « mois » glisse, la pastille « offerts » tombe et rebondit, puis le texte */
.offre-pop .op-3 { display: inline-block; transform-origin: 30% 80%; animation: op3 .7s cubic-bezier(.2,1.4,.4,1) .12s both; }
.offre-pop .op-mois { animation: opGlisse .5s cubic-bezier(.2,.9,.3,1) .3s both; }
.offre-pop .op-offerts { animation: opPastille .75s cubic-bezier(.3,1.6,.5,1) .5s both, opFlotte 4s ease-in-out 1.6s infinite; }
.offre-pop .op-visuel::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-18deg); animation: opReflet 1.1s ease .9s both; pointer-events: none;
}
.offre-pop .op-eyebrow, .offre-pop h2, .offre-pop .op-liste li, .offre-pop .op-date, .offre-pop .op-ctas, .offre-pop .op-non { animation: opMonte .45s cubic-bezier(.2,.9,.3,1) both; }
.offre-pop .op-eyebrow { animation-delay: .22s; }
.offre-pop h2 { animation-delay: .3s; }
.offre-pop .op-liste li:nth-child(1) { animation-delay: .4s; }
.offre-pop .op-liste li:nth-child(2) { animation-delay: .47s; }
.offre-pop .op-liste li:nth-child(3) { animation-delay: .54s; }
.offre-pop .op-liste li:nth-child(4) { animation-delay: .61s; }
.offre-pop .op-date { animation-delay: .68s; }
.offre-pop .op-ctas { animation-delay: .76s; }
.offre-pop .op-non { animation-delay: .84s; }
.offre-pop .op-ctas .btn-primary { animation: opPulse 2.6s ease-in-out 1.8s 2; }

/* sortie */
.offre-pop.op-sort .op-fond { animation: opFondSort .22s ease both; }
.offre-pop.op-sort .op-carte { animation: opCarteSort .22s ease both; }

@keyframes op3 { from { opacity: 0; transform: scale(.4) rotate(-8deg); } to { opacity: 1; transform: none; } }
@keyframes opGlisse { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@keyframes opPastille { from { opacity: 0; transform: translateY(-40px) rotate(-16deg) scale(.8); } to { opacity: 1; transform: rotate(-3deg); } }
@keyframes opFlotte { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(-1deg) translateY(-4px); } }
@keyframes opReflet { from { left: -60%; } to { left: 130%; } }
@keyframes opMonte { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes opPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(187,255,51,0); } 50% { box-shadow: 0 0 0 8px rgba(187,255,51,.45); } }
@keyframes opFondSort { from { opacity: 1; } to { opacity: 0; } }
@keyframes opCarteSort { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(16px) scale(.97); } }

@media (max-width: 767px) {
  .offre-pop { padding: 12px; align-items: flex-end; }
  .offre-pop .op-carte { grid-template-columns: 1fr; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); border-radius: var(--r-md); }
  .offre-pop .op-visuel { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 26px 22px 22px; }
  .offre-pop .op-3 { font-size: 104px; line-height: .85; }
  .offre-pop .op-mois { font-size: 52px; margin-top: 0; }
  .offre-pop .op-offerts { margin-top: 4px; font-size: 18px; padding: 8px 16px; }
  .offre-pop .op-corps { padding: 22px 22px 18px; }
  .offre-pop h2 { font-size: 26px; margin-bottom: 14px; }
  .offre-pop .op-liste { gap: 10px; margin-bottom: 14px; }
  .offre-pop .op-liste li { font-size: 15.5px; }
  .offre-pop .op-date { margin-bottom: 18px; }
  .offre-pop .op-ctas { flex-direction: column; }
  .offre-pop .op-ctas .btn { width: 100%; }
  .offre-pop .op-non { align-self: center; }
  .offre-pop .op-x { top: 10px; right: 10px; background: rgba(22,22,15,.1); color: #16160F; }
}
@media (max-width: 767px) and (max-height: 700px) {
  .offre-pop .op-3 { font-size: 80px; }
  .offre-pop .op-mois { font-size: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .offre-pop .op-fond, .offre-pop .op-carte, .offre-pop .op-3, .offre-pop .op-mois, .offre-pop .op-offerts,
  .offre-pop .op-eyebrow, .offre-pop h2, .offre-pop .op-liste li, .offre-pop .op-date, .offre-pop .op-ctas,
  .offre-pop .op-non, .offre-pop .op-ctas .btn-primary, .offre-pop.op-sort .op-fond, .offre-pop.op-sort .op-carte { animation: none; }
  .offre-pop .op-visuel::after { display: none; }
  .offre-bandeau, .offre-bandeau ~ header .nav, .offre-bandeau ~ .drawer, .offre-bandeau .ob-fleche { transition: none; }
}