/* ==========================================================================
   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:6px;height:6px;border-radius:50%;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:12px;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:12px;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)}
/* Les gouttieres sont reprecisees, sinon le raccourci padding les remet a zero
   et le bandeau part du bord de l'ecran alors que tout le reste de la page
   s'aligne sur la gouttiere. Mesure avant correction : contenu du bandeau a
   0 px, contre 64 px pour le titre, les offres et la section suivante. */
.pricing-band .wrap{padding:clamp(2.2rem,4.5vw,3.2rem) var(--gutter);
  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}
.pricing-band .price-factors{display:block;padding-top:0;padding-bottom:clamp(2.6rem,5vw,3.8rem)}
.factors{display:grid;gap:1.2rem;margin-top:clamp(1.8rem,3.5vw,2.6rem);list-style:none;padding:0}
@media(min-width:760px){.factors{grid-template-columns:repeat(2,1fr)}}
.factors li{background:var(--blanc);border:1px solid var(--border-clair);border-radius:var(--r-card);
  padding:clamp(1.3rem,2.4vw,1.7rem)}
.factors h3{font-family:var(--font-display);font-weight:800;font-size:1.15rem;letter-spacing:-.015em;
  line-height:1.2;color:var(--charbon);margin-bottom:.6rem}
.factors p{color:var(--ink);font-size:.98rem;line-height:1.65;max-width:none}

/* ---- 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}