/* ==========================================================
   Page Offres — s'appuie sur style.css, theme-corail.css, sections.css
   ========================================================== */

/* ---------- Hero compact ---------- */
.hero--offres { min-height: auto; padding: 150px 0 130px; text-align: center; }
.offres-hero .hero__lead { margin-inline: auto; max-width: 40rem; }
.offer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 2.4rem; }
.offer-nav__item {
  --c: var(--red);
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem 1.2rem .5rem .5rem;
  border-radius: 999px;
  background: var(--paper-2);
  text-decoration: none;
  font-weight: 800;
  box-shadow: var(--shadow-coral);
  transition: transform .25s var(--ease-bounce), box-shadow .25s;
}
.offer-nav__item img { width: 42px; height: 42px; object-fit: contain; transition: transform .4s var(--ease-bounce); }
.offer-nav__item:hover { transform: translate(-2px, -3px); box-shadow: 7px 7px 0 var(--red-dark); }
.offer-nav__item:hover img { transform: rotate(-12deg) scale(1.15); }

/* ---------- Bloc offre ---------- */
.offer { --c: var(--red); padding: 110px 0; position: relative; }
.offer--alt { background: var(--paper-2); }
.offer--green { --c: #6e9b52; }
.offer--purple { --c: var(--purple); }
.offer--blue { --c: var(--blue); }

.offer__grid { display: grid; grid-template-columns: 300px 1fr; gap: 4rem; align-items: start; }
.offer__aside { position: sticky; top: 110px; text-align: center; }
.offer__sider { width: 220px; margin: 0 auto 1rem; }
.offer__aside .hand { color: var(--c); font-size: 1.6rem; }
.offer__name { font-family: var(--font-display); font-size: 2.4rem; line-height: 1; margin: .2rem 0 0; overflow-wrap: anywhere; }
.offer__name span { display: block; color: var(--c); font-size: .62em; margin-top: .2rem; }

.offer__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3.1rem);
  line-height: 1.12;
  margin: 0 0 1rem;
}
.offer__subtitle { font-size: 1.2rem; color: var(--ink-soft); margin: 0 0 2.2rem; max-width: 40rem; }

.offer__pas { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-bottom: 2.4rem; }
.offer__pas > div { padding: 1.3rem 1.4rem; border-radius: 16px; background: var(--paper); border: 3px solid var(--ink); }
.offer--alt .offer__pas > div { background: var(--paper); }
.offer__pas > div:first-child { border-style: dashed; }
.offer__pas > div:last-child { box-shadow: 6px 6px 0 var(--c); }
.offer__pas h3 { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .5rem; color: var(--ink-soft); }
.offer__pas > div:last-child h3 { color: var(--c); }
.offer__pas p { margin: 0; }

.offer__h { font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; margin: 0 0 1rem; }

.offer__benefits { list-style: none; padding: 0; margin: 0 0 2.4rem; display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1.6rem; }
.offer__benefits li { position: relative; padding-left: 2.2rem; }
.offer__benefits li::before {
  content: "✓";
  position: absolute;
  left: 0; top: .05rem;
  width: 1.5rem; height: 1.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--yellow);
  font-weight: 800;
  font-size: .85rem;
}
.offer__benefits--flow li::before { content: "→"; background: var(--c); color: var(--paper); }

/* ---------- Formules ---------- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-bottom: 1.6rem; }
.plan {
  position: relative;
  padding: 1.5rem 1.3rem;
  border-radius: 18px;
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform .3s var(--ease-bounce), box-shadow .3s;
}
.plan:hover { transform: translate(-3px, -5px); box-shadow: 8px 10px 0 var(--c); }
.plan--featured { box-shadow: 6px 6px 0 var(--c); }
.plan__badge {
  position: absolute;
  top: -14px; left: 1rem;
  padding: .2rem .8rem;
  border-radius: 999px;
  background: var(--yellow);
  border: 2px solid var(--ink);
  font-size: .75rem;
  font-weight: 800;
  white-space: nowrap;
}
.plan h4 { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; margin: .2rem 0 .4rem; color: var(--c); }
.plan__for { font-weight: 800; font-size: .92rem; margin: 0 0 .6rem; }
.plan p:last-child { margin: 0; color: var(--ink-soft); font-size: .95rem; }

.offer__extras { padding: 1rem 1.3rem; border-left: 5px solid var(--c); background: var(--paper); border-radius: 0 14px 14px 0; margin-bottom: 1.6rem; }
.offer__extras p { margin: 0; }

.offer__proof {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 1.2rem;
  align-items: center;
  padding: 1rem;
  margin-bottom: 2rem;
  border-radius: 18px;
  background: var(--ink);
  color: var(--paper);
}
.offer__proof img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 10px; }
.offer__proof p { margin: 0; color: #dcdcdc; }
.offer__proof strong { color: var(--yellow); }
.offer__content > .btn { margin: 0 .8rem .8rem 0; }

/* ---------- Diagnostic ---------- */
.diag::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 32 C 240 4 480 58 720 30 S 1200 6 1440 30 V60 H0Z' fill='%23f8f7f2'/%3E%3C/svg%3E"); }
.diag::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 32 C 240 4 480 58 720 30 S 1200 6 1440 30 V60 H0Z' fill='%23000000'/%3E%3C/svg%3E"); }
.diag__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: center; }
.diag__grid > div:first-child p { color: var(--ink-soft); font-weight: 600; font-size: 1.08rem; }
.diag__card { background: var(--paper); border-radius: var(--radius); padding: 2rem; box-shadow: 10px 10px 0 var(--red-dark); }
.diag__card h3 { font-size: 1.3rem; margin-bottom: 1.2rem; }
.diag__card .offer__benefits { grid-template-columns: 1fr; }

/* ---------- Suivi ---------- */
.suivi__grid { display: grid; grid-template-columns: 200px 1fr; gap: 3rem; align-items: center; }
.suivi__grid p { color: #d8d8d8; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .offer__grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .offer__aside { position: static; display: flex; align-items: center; gap: 1rem; text-align: left; }
  .offer__sider { width: 110px; margin: 0; }
  .plans { grid-template-columns: 1fr; gap: 1.6rem; }
  .diag__grid, .suivi__grid { grid-template-columns: 1fr; }
  .suivi__sider { width: 130px; }
}
@media (max-width: 640px) {
  .hero--offres { padding: 120px 0 100px; }
  .offer { padding: 80px 0; }
  .offer__pas, .offer__benefits { grid-template-columns: 1fr; }
  .offer__name { font-size: 1.9rem; }
  .offer__proof { grid-template-columns: 1fr; }
  .offer-nav__item { padding-right: 1rem; }
}