/* ==========================================================================
   WebHopper · offres.css
   Sections propres a la page offres. Depend de tokens.css et base.css.
   ========================================================================== */


/* ---- Les quatre offres ---- */
.offers{display:grid;gap:clamp(1.3rem,2.6vw,1.9rem);padding-bottom:clamp(1rem,2vw,1.5rem)}
.offer{background:var(--blanc);border:1px solid var(--border-clair);border-radius:var(--r-section);
  padding:clamp(1.6rem,3.5vw,2.8rem);display:grid;gap:clamp(1.5rem,3vw,2.6rem);
  transition:border-color .3s ease, box-shadow .3s ease}
.offer:hover{border-color:var(--pierre);box-shadow:0 20px 44px -26px rgba(26,25,24,.24)}
@media(min-width:900px){.offer{grid-template-columns:1.05fr .95fr;align-items:start}}

.offer-n{font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:2px;
  color:var(--charbon);display:inline-flex;align-items:center;gap:.6rem;line-height:1;margin-bottom:1.1rem}
.offer-n::before{content:"";width:22px;height:2px;background:var(--ambre);flex-shrink:0}
.offer-head{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;margin-bottom:.9rem}
.offer h2{font-family:var(--font-display);font-weight:900;font-size:clamp(1.5rem,2.8vw,2.15rem);
  letter-spacing:-.025em;line-height:1.1;color:var(--charbon)}
.offer p{color:var(--ink);font-size:clamp(1rem,1.2vw,1.06rem);line-height:1.7;max-width:52ch}
.offer-price{margin-top:1.5rem;display:inline-flex;align-items:baseline;gap:.55rem;flex-wrap:wrap;
  background:var(--ambre-pale);border:1px solid rgba(222,99,0,.45);border-radius:var(--r-pill);
  padding:.6rem .95rem;line-height:1}
.offer-price .pfrom{font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:1px;
  text-transform:uppercase;color:var(--pierre)}
.offer-price .pval{font-family:var(--font-display);font-weight:800;font-size:1.08rem;
  letter-spacing:-.015em;color:var(--charbon)}

.offer-inc{background:var(--ivoire);border:1px solid var(--border-clair);border-radius:var(--r-card);
  padding:clamp(1.2rem,2.4vw,1.7rem)}
.offer-inc h3{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--pierre);margin-bottom:1.1rem;line-height:1}
.offer-inc ul{display:grid;gap:.85rem}
.offer-inc li{display:flex;gap:.75rem;align-items:flex-start;color:var(--charbon);
  font-size:.97rem;line-height:1.5;font-weight:500}
.offer-inc svg{width:18px;height:18px;color:var(--ambre);flex-shrink:0;margin-top:2px}
.offer-foot{margin-top:1.4rem}

/* ---- Bandeau tarifs ---- */
.pricing-band{background:var(--ivoire);border-top:1px solid var(--border-clair);
  border-bottom:1px solid var(--border-clair)}
.pricing-band .wrap{padding:clamp(2.2rem,4.5vw,3.2rem) 0;display:flex;gap:1rem;align-items:flex-start}
.pricing-band svg{width:22px;height:22px;color:var(--ambre);flex-shrink:0;margin-top:3px}
.pricing-band p{color:var(--ink);font-size:clamp(1rem,1.3vw,1.1rem);line-height:1.7;max-width:74ch}
.pricing-band strong{color:var(--charbon);font-weight:700}

/* ---- Approche globale ---- */
.approach{background:var(--blanc)}
.approach-text p{color:var(--ink);font-size:clamp(1.04rem,1.4vw,1.2rem);line-height:1.75;max-width:58ch}
.approach-text p + p{margin-top:1.3rem}