/* ============================================================
   PROMOS D'AUTOMNE — page /promos-automne.php + bandeau d'accueil
   S'appuie sur les variables de style.css
   ============================================================ */

/* ---- Bandeau d'accueil ---- */
.promo-band{background:var(--yellow); color:var(--navy); position:relative; overflow:hidden}
.promo-band::before{content:""; position:absolute; inset:0; opacity:.35; background:repeating-linear-gradient(125deg, transparent 0 46px, rgba(255,255,255,.35) 46px 50px)}
.promo-band .container{position:relative; display:flex; align-items:center; gap:28px; padding-top:26px; padding-bottom:26px}
.pb-badge{flex:none; width:86px; height:86px; border-radius:50%; background:var(--navy); color:var(--yellow); display:grid; place-items:center; text-align:center; font:900 13px/1.05 'Poppins',sans-serif; text-transform:uppercase; transform:rotate(-8deg); box-shadow:var(--shadow-md)}
.pb-badge b{display:block; font-size:24px}
.pb-text{flex:1; min-width:0}
.pb-text h2{font:800 clamp(1.3rem,2.4vw,1.9rem)/1.15 'Poppins',sans-serif; text-transform:uppercase; margin:0}
.pb-text p{margin:6px 0 0; font-size:16px; font-weight:500}
.pb-brands{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.pb-brands span{background:rgba(10,31,92,.1); border-radius:var(--r-pill); padding:3px 10px; font:600 12px/1.4 'Inter',sans-serif; letter-spacing:.04em; text-transform:uppercase}
.promo-band .btn{flex:none}
@media (max-width:820px){
  .promo-band .container{flex-direction:column; align-items:flex-start; gap:16px}
  .pb-badge{width:70px; height:70px; font-size:11px}
  .pb-badge b{font-size:20px}
  .promo-band .btn{width:100%; justify-content:center}
}

/* ---- Hero de la page ---- */
.promo-hero .ph-ico{background:var(--yellow); color:var(--navy)}
.promo-dates{display:inline-flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-top:22px}
.promo-dates .pd-range{background:var(--yellow); color:var(--navy); border-radius:var(--r-pill); padding:8px 16px; font:800 14px/1 'Poppins',sans-serif; text-transform:uppercase; letter-spacing:.03em}
.promo-dates .pd-left{color:rgba(255,255,255,.9); font-weight:600; font-size:15px}

/* ---- Filtres ---- */
.promo-filters{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:0 0 40px}
.pf{appearance:none; border:2px solid var(--gray-line); background:#fff; color:var(--navy); border-radius:var(--r-pill); padding:10px 18px; font:600 15px/1 'Inter',sans-serif; cursor:pointer; transition:all .2s; display:inline-flex; align-items:center; gap:8px}
.pf:hover{border-color:var(--electric)}
.pf:focus-visible{outline:3px solid var(--electric); outline-offset:2px}
.pf[aria-pressed="true"]{background:var(--navy); border-color:var(--navy); color:#fff}
.pf .n{font-size:12px; opacity:.7}

/* ---- Cartes ---- */
.promo-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.offer{display:flex; flex-direction:column; background:#fff; border:1px solid var(--gray-line); border-radius:var(--r-lg); overflow:hidden; transition:transform .25s, box-shadow .25s}
.offer:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
.offer-top{background:var(--navy); color:#fff; padding:22px 24px 20px; position:relative}
.offer-top::after{content:""; position:absolute; right:0; top:0; width:70px; height:70px; background:linear-gradient(225deg, var(--yellow) 0 50%, transparent 50%)}
.offer[data-cat="entree"] .offer-top{background:var(--navy-mid)}
.offer[data-cat="entree"] .offer-top::after{background:linear-gradient(225deg, var(--red) 0 50%, transparent 50%)}
.offer[data-cat="habitat"] .offer-top{background:var(--electric)}
.offer[data-cat="habitat"] .offer-top::after{background:linear-gradient(225deg, #fff 0 50%, transparent 50%)}
.o-cat{font:600 12px/1 'Inter',sans-serif; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.75)}
.o-brand{font:800 22px/1.1 'Poppins',sans-serif; text-transform:uppercase; margin:8px 0 0; letter-spacing:.02em}
.o-value{font:900 clamp(3rem,5vw,3.8rem)/1 'Poppins',sans-serif; color:var(--yellow); margin-top:10px; letter-spacing:-.02em}
.offer[data-cat="habitat"] .o-value{color:#fff}
.o-value small{font-size:.38em; font-weight:800; letter-spacing:0; margin-left:4px; vertical-align:.9em}
.offer-body{padding:20px 24px 24px; display:flex; flex-direction:column; gap:12px; flex:1}
.o-title{font:700 18px/1.3 'Poppins',sans-serif; color:var(--navy); margin:0}
.o-items{display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none}
.o-items li{background:var(--gray-bg); color:var(--navy); border-radius:var(--r-pill); padding:4px 11px; font-size:13.5px; font-weight:500}
.o-what{font-size:15px; color:var(--gray-text); margin:0}
.o-what b{color:var(--ink)}
.o-cond{font-size:13px; color:var(--gray-text); margin:0; display:flex; gap:6px; align-items:flex-start}
.o-cond i{color:var(--electric); margin-top:3px}
.offer-actions{margin-top:auto; padding-top:6px; display:flex; gap:10px}
.offer-actions .btn{flex:1; min-width:0; justify-content:center; padding:14px 16px; font-size:15px; white-space:normal; text-align:center}
.offer-actions .btn-icon{flex:none; width:52px; padding:0; min-width:52px}
.promo-legal{max-width:820px; margin:40px auto 0; text-align:center; font-size:14px; color:var(--gray-text)}

/* ---- Offre terminée ---- */
.promo-ended{max-width:640px; margin:0 auto; text-align:center; background:var(--gray-bg); border-radius:var(--r-lg); padding:40px 28px}
.promo-ended i{font-size:34px; color:var(--electric)}
.promo-ended h2{font:800 1.6rem/1.2 'Poppins',sans-serif; text-transform:uppercase; color:var(--navy); margin:14px 0 8px}
.promo-ended p{color:var(--gray-text); margin:0 0 22px}

@media (max-width:1024px){ .promo-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){
  .promo-grid{grid-template-columns:1fr}
  .promo-filters{justify-content:flex-start; flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px; max-width:100%}
  .pf{flex:none}
}

/* L'attribut hidden doit l'emporter sur les display:flex ci-dessus */
.offer[hidden], .promo-dates[hidden], .promo-band[hidden]{display:none}
@media (max-width:380px){ .offer-top, .offer-body{padding-left:18px; padding-right:18px} .offer-actions .btn{padding:12px; font-size:14px} .offer-actions .btn i{display:none} .offer-actions .btn-icon i{display:inline} }

/* Catégorie Professionnels (ajoutée le 06/10/2026) */
.offer[data-cat="pro"] .offer-top{background:var(--anthracite)}
.offer[data-cat="pro"] .offer-top::after{background:linear-gradient(225deg, var(--red) 0 50%, transparent 50%)}