/* =========================================================================
   PAGES DE DÉTAIL (3 offres + 5 étapes) — gabarit partagé par les 8
   pages "Voir les détails" / carrousel du hero. Réutilise les variables
   et le style de base de style.css (couleurs, polices, .cta-btn) — ce
   fichier n'ajoute QUE ce qui est propre à ces pages : nav simplifiée
   (visible tout de suite, pas de rideau à jouer ici), en-tête d'article,
   corps de texte, liste à puces dorées, navigation étape précédente/
   suivante. Pas de scroll-jacking, pas d'animation d'entrée complexe —
   ce sont des pages de lecture, pas la scène d'arrivée du hero.
   ========================================================================= */

body{ background:var(--bg); }

/* Nav : même apparence que .hero__nav mais SANS la logique hero-ready
   (pas de rideau sur ces pages, donc rien à attendre) — visible dès le
   chargement, fond plein (pas de dégradé qui suppose une photo dessous). */
.detail-nav{
  position:fixed; top:0; left:0; right:0; z-index:55; display:flex; align-items:center; justify-content:space-between;
  padding:22px clamp(20px,4vw,64px); font-family:var(--body); font-size:.8rem; color:#fff;
  background:linear-gradient(180deg, rgba(10,8,4,.9) 0%, rgba(10,8,4,.75) 70%, rgba(10,8,4,0) 100%);
  /* .hero__nav (style.css) part de opacity:0/pointer-events:none et
     n'est levé que par body.hero-ready, posé uniquement par script.js —
     absent sur ces pages (elles chargent detail.js). Sans cet override,
     la nav restait invisible et non cliquable en permanence ici. */
  opacity:1; pointer-events:auto; transform:none;
}
/* .hero__nav-group/.hero__nav-mark jouaient leur animation d'entrée
   (fondu+flou, rotation du repère) à CHAQUE chargement de ces pages —
   showtime réservé à la vraie première visite du hero (cf. style.css),
   pas pertinent ici puisque ces pages n'ont ni rideau ni hero à révéler :
   le menu doit être là, point, dès la première frame. */
.detail-nav .hero__nav-group{
  animation:none; opacity:1; transform:none; filter:none; pointer-events:auto;
}
.detail-nav .hero__nav-mark{ animation:none; }
@media (max-width:720px){ .detail-nav .hero__nav-group{ display:none; } }

/* En-tête d'article : eyebrow (repère "Offre 01" / "Étape 02"), grand
   titre serif, intro courte, lien retour. padding-top dégagé pour la
   nav fixe. */
.detail-hero{
  position:relative; padding:180px clamp(20px,7vw,110px) 80px; max-width:900px; margin:0 auto;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.detail-hero__back{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:32px;
  font-family:var(--body); font-size:.8rem; color:var(--ink-soft); text-decoration:none;
  transition:color .25s ease;
}
.detail-hero__back:hover{ color:#fff; }
.detail-hero__back svg{ width:14px; height:14px; transition:transform .25s ease; }
.detail-hero__back:hover svg{ transform:translateX(-3px); }
.detail-hero__eyebrow{ font-family:var(--body); font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold-soft); margin:0 0 16px; }
.detail-hero__title{ font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:clamp(2.2rem, 5.4vw, 3.6rem); color:#fff; margin:0 0 22px; line-height:1.05; }
.detail-hero__intro{ font-family:var(--body); font-size:1.05rem; color:rgba(255,255,255,.82); line-height:1.6; max-width:56ch; margin:0; }
/* Pages sans .detail-hero__intro (ex. etape-audit.html) : moins d'espace
   sous le titre, sans toucher aux 8 autres pages qui ont encore leur
   intro et comptent sur cet espacement. */
.detail-hero:not(:has(.detail-hero__intro)){ padding-bottom:40px; }
.detail-hero:not(:has(.detail-hero__intro)) .detail-hero__title{ margin-bottom:0; }
.detail-hero__meta{
  display:flex; flex-wrap:wrap; gap:28px; margin-top:32px;
}
.detail-hero__meta-item{ display:flex; flex-direction:column; gap:4px; }
.detail-hero__meta-label{ font-family:var(--body); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); }
.detail-hero__meta-value{ font-family:var(--display); font-size:1.15rem; color:var(--gold-soft); }

/* Corps : colonne de lecture, sections séparées par un léger trait. */
.detail-body{ max-width:700px; margin:0 auto; padding:70px clamp(20px,7vw,110px) 40px; }
.detail-section{ padding:36px 0; border-top:1px solid rgba(255,255,255,.12); }
.detail-section:first-child{ border-top:none; padding-top:0; }
.detail-section__title{ font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:1.3rem; color:#fff; margin:0 0 18px; }
.detail-section p{ font-family:var(--body); font-size:.94rem; color:rgba(255,255,255,.78); line-height:1.7; margin:0 0 14px; }
.detail-section p:last-child{ margin-bottom:0; }
.detail-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.detail-list li{
  font-family:var(--body); font-size:.94rem; color:rgba(255,255,255,.85);
  padding-left:26px; position:relative; line-height:1.5;
}
.detail-list li::before{
  content:""; position:absolute; left:0; top:.55em; width:10px; height:6px;
  border-left:1.5px solid var(--gold-soft); border-bottom:1.5px solid var(--gold-soft);
  transform:translateY(-50%) rotate(-45deg);
}
.detail-list + p{ margin-top:20px; }

/* Navigation étape précédente / suivante (pages /etape-*.html seulement,
   simplement absente du DOM sur les pages /offre-*.html). */
.detail-pager{
  display:flex; justify-content:space-between; gap:20px; max-width:700px; margin:0 auto;
  padding:40px clamp(20px,7vw,110px) 100px; border-top:1px solid rgba(255,255,255,.12);
}
.detail-pager__link{
  display:flex; flex-direction:column; gap:6px; text-decoration:none; max-width:45%;
  transition:opacity .25s ease;
}
.detail-pager__link:hover{ opacity:.75; }
.detail-pager__link--next{ text-align:right; align-items:flex-end; margin-left:auto; }
.detail-pager__label{ font-family:var(--body); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); }
.detail-pager__name{ font-family:var(--display); font-size:1.1rem; color:#fff; }

@media (max-width:640px){
  .detail-hero{ padding:150px 24px 60px; }
  .detail-body{ padding:50px 24px 20px; }
  .detail-pager{ padding:30px 24px 80px; }
}