/* =========================================================
   L'Espace pro : la page d'entrée des services aux rôtisseurs.
   Même charte que le site : crème, rouge de l'enseigne, or,
   Fraunces pour les titres, filets plutôt que boîtes.
   ========================================================= */

/* ---- Hero ---- */
.pro-hero{
  padding-block: clamp(120px, 14vw, 170px) clamp(var(--space-7), 7vw, var(--space-9));
  background:
    radial-gradient(110% 80% at 85% 10%, rgba(176,32,30,.13), transparent 55%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
}
.pro-hero__grid{
  display: grid; grid-template-columns: 1.1fr .9fr;
  gap: clamp(var(--space-6), 5vw, var(--space-9)); align-items: center;
}
.pro-fil{ font-size: .85rem; color: var(--ink-mute); margin-bottom: var(--space-5); }
.pro-fil a{ color: var(--red-deep); text-decoration: none; font-weight: 600; }
.pro-fil a:hover{ text-decoration: underline; }
.pro-fil span[aria-hidden]{ margin-inline: 6px; }
.pro-hero h1{ font-size: clamp(2.3rem, 5.6vw, 3.9rem); letter-spacing: -.025em; margin-top: var(--space-3); }
.pro-hero h1 em, .pro-head h2 em, .pro-ensemble h2 em{ font-style: italic; color: var(--red); }
.pro-hero__sub{
  margin-top: var(--space-5); font-size: clamp(1.05rem, 2.2vw, 1.22rem);
  color: var(--ink-soft); max-width: 50ch;
}
.pro-hero__cta{ display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-7); }
.pro-hero__art{ margin: 0; }
.pro-hero__art picture{
  display: block; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg); rotate: 1.2deg; background: var(--paper-3);
}
.pro-hero__art img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.pro-hero__art figcaption{
  margin-top: var(--space-4); font-size: .84rem; color: var(--ink-mute);
  text-align: right; letter-spacing: .01em;
}

/* ---- Bandeau rouge ---- */
.pro-bandeau{ background: var(--red); color: var(--cream); }
.pro-bandeau__inner{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4); padding-block: var(--space-6); text-align: center;
}
.pro-bandeau__inner > div{ display: flex; flex-direction: column; gap: 4px; }
.pro-bandeau strong{ font-family: var(--font-display); font-size: clamp(1.5rem, 3.2vw, 2.1rem); font-weight: 600; }
.pro-bandeau span{
  font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--cream) 78%, transparent);
}

/* ---- Tête de section ---- */
.pro-head{ max-width: 64ch; margin-bottom: clamp(var(--space-6), 5vw, var(--space-8)); }
.pro-head h2{ font-size: clamp(1.9rem, 4.4vw, 2.8rem); letter-spacing: -.02em; }
.pro-head__lead{ margin-top: var(--space-4); color: var(--ink-soft); font-size: 1.06rem; max-width: 58ch; }

/* ---- Les quatre services : une liste numérotée, des filets ---- */
.pro-offres{ list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.pro-offre{
  display: grid; grid-template-columns: 88px minmax(0, 1fr);
  gap: var(--space-4) var(--space-6);
  padding-block: clamp(var(--space-6), 4vw, var(--space-8));
  border-bottom: 1px solid var(--line);
}
.pro-offre__num{
  font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 500;
  line-height: 1; color: var(--gold); letter-spacing: -.02em; padding-top: 4px;
  font-variation-settings: "opsz" 144;
}
.pro-offre__corps{ min-width: 0; }
.pro-offre__tete{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.pro-offre h3{ font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -.015em; margin: 0; }
.pro-offre__nom{
  margin: var(--space-3) 0 0; font-family: var(--font-display); font-style: italic;
  font-size: 1.2rem; color: var(--red-deep);
}
.pro-offre p{ color: var(--ink-soft); max-width: 66ch; }
.pro-offre__corps > p{ margin-top: var(--space-3); }
.pro-offre--prep .pro-offre__num{ color: var(--ink-mute); opacity: .55; }
.pro-offre--prep h3{ color: var(--ink-soft); }
.pro-offre--prep p:not(.pro-offre__nom){ color: var(--ink-mute); }

/* Pastille d'état */
.pro-etat{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 12px; border-radius: var(--radius-pill);
  color: var(--ink-mute); background: var(--paper-2); border: 1px solid var(--line);
  white-space: nowrap;
}
.pro-etat::before{ content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .6; }
.pro-etat--ok{ color: var(--red-deep); background: var(--red-soft); border-color: transparent; }
.pro-etat--ok::before{ opacity: 1; }
.pro-etat--clair{ color: var(--cream); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }

/* Les trois formules */
.pro-formules{
  list-style: none; margin: var(--space-5) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); max-width: 640px;
}
.pro-formules li{
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--space-4) var(--space-5); background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-md);
}
.pro-formules b{ font-family: var(--font-display); font-size: 1.7rem; font-weight: 600; line-height: 1; color: var(--ink); }
.pro-formules b small{ font-size: .95rem; font-weight: 500; color: var(--ink-mute); margin-left: 2px; }
.pro-formules span{ font-weight: 600; color: var(--ink); margin-top: 6px; }
.pro-formules em{ font-style: normal; font-size: .86rem; color: var(--ink-mute); line-height: 1.4; }
.pro-offre__cta{ display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.pro-offre__deja{ margin-top: var(--space-4); font-size: .92rem; color: var(--ink-mute); }
.pro-offre__deja a{ color: var(--red-deep); font-weight: 600; }

/* ---- L'offre complète : un bloc sombre ---- */
.pro-ensemble{
  background: var(--ink); color: var(--cream);
  padding-block: clamp(var(--space-8), 8vw, var(--space-10));
}
.pro-ensemble__inner{
  display: grid; grid-template-columns: 1.2fr .8fr;
  gap: clamp(var(--space-6), 5vw, var(--space-9)); align-items: center;
}
.pro-ensemble__eyebrow{ color: var(--gold); }
.pro-ensemble h2{ color: var(--cream); font-size: clamp(1.9rem, 4.4vw, 2.8rem); letter-spacing: -.02em; }
.pro-ensemble h2 em{ color: var(--gold); }
.pro-ensemble p{ color: color-mix(in srgb, var(--cream) 78%, transparent); max-width: 60ch; margin-top: var(--space-4); }
.pro-ensemble__cote{
  padding: var(--space-6); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-lg);
  background: rgba(255,255,255,.04);
}
.pro-ensemble__cote p{ margin-top: var(--space-4); font-size: .98rem; }
.pro-ensemble__cta{ display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.btn--clair{ color: var(--cream); border-color: rgba(255,255,255,.35); }
.btn--clair:hover{ color: var(--ink); background: var(--cream); border-color: var(--cream); }

/* ---- Navigation de la page ---- */
.pro-nav li a{ white-space: nowrap; }

/* ---- Responsive ---- */
@media (max-width: 900px){
  .pro-hero__grid, .pro-ensemble__inner{ grid-template-columns: 1fr; }
  .pro-hero__art{ max-width: 100%; }
  .pro-hero__art picture{ rotate: 0deg; }
  .pro-hero__art figcaption{ text-align: left; }
  .pro-offre{ grid-template-columns: 1fr; gap: var(--space-2); }
  .pro-offre__num{ font-size: 1.4rem; padding-top: 0; }
  .pro-formules{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .pro-bandeau__inner{ grid-template-columns: 1fr; gap: var(--space-5); }
  .pro-hero__cta .btn, .pro-offre__cta .btn, .pro-ensemble__cta .btn{ width: 100%; justify-content: center; }
}