/* =========================================================================
   CLEAN CAR PREMIUM — Page « Nettoyage automobile »
   Complète home.css (mêmes jetons, typographie, boutons et animations).
   ========================================================================= */

/* ---------- Hero de page intérieure ---------- */
.hero--page { height: 92vh; height: 92svh; min-height: 620px; max-height: 1000px; }
.hero--page .hero__in { padding-bottom: clamp(120px, 18vh, 200px); }
.hero--page .hero__lead { max-width: 50ch; }
.np-crumb { display: flex; align-items: center; gap: 10px; font-size: var(--fs-xs); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.72); transition: opacity 1s var(--e-out) .5s, translate 1.1s var(--e-out) .5s; }
.np-crumb a { color: rgba(255,255,255,.72); transition: color var(--t-1); }
.np-crumb a:hover { color: var(--orange); }
.np-crumb [aria-current] { color: var(--orange); }
.ccp-js .is-loading .np-crumb { opacity: 0; translate: 0 20px; }

/* ---------- En-têtes de section ---------- */
.np-head { display: grid; gap: 22px; margin-bottom: clamp(48px, 6vw, 84px); }
.np-intro { color: var(--fg-2); font-size: var(--fs-lead); line-height: 1.55; letter-spacing: -.012em; max-width: 56ch; }

/* ---------- 1. Formules ---------- */
.np-formules { padding-bottom: clamp(100px, 11vw, 170px); }
.np-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 26px); }
.np-card { position: relative; isolation: isolate; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-s); background: var(--ink-1); border: 1px solid var(--line);
  transition: translate .7s var(--e-out), border-color .5s var(--e-soft), box-shadow .7s var(--e-soft) !important; }
.np-card:hover { translate: 0 -8px !important; border-color: rgba(242,140,24,.6); box-shadow: 0 30px 60px -30px rgba(242,140,24,.35); }
.np-card__media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; }
.np-card__media picture, .np-card__media img { width: 100%; height: 100%; }
.np-card__media img { object-fit: cover; transition: transform 1.2s var(--e-soft), filter .8s var(--e-soft); }
.np-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(10,10,10,.9)); pointer-events: none; }
.np-card:hover .np-card__media img { transform: scale(1.07); }
.np-card__n { position: absolute; z-index: 2; top: 16px; left: 20px; font-family: var(--f-display); font-size: clamp(3rem, 4.6vw, 4.6rem); font-weight: 200; line-height: .9; letter-spacing: -.06em; color: rgba(255,255,255,.94);
  text-shadow: 0 2px 6px rgba(0,0,0,.35), 0 10px 40px rgba(0,0,0,.55); transition: color .45s var(--e-soft), scale .6s var(--e-spring); transform-origin: 0 0; }
.np-card:hover .np-card__n { color: var(--orange); scale: 1.06; }
.np-card__badge { position: absolute; z-index: 2; top: 18px; right: 18px; padding: 7px 12px; border-radius: 999px; background: var(--orange); color: #000; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.np-card__body { display: grid; gap: 16px; padding: 26px 28px 28px; flex: 1; align-content: start; }
.np-card__title { font-family: var(--f-display); font-size: clamp(1.7rem, 1.2rem + 1.2vw, 2.4rem); font-weight: 450; letter-spacing: -.035em; line-height: 1.05; color: var(--fg); }
.np-card__text { color: var(--fg-2); line-height: 1.7; }
.np-card .link-arrow { margin-top: 6px; }
.np-card:hover .link-arrow svg { background: var(--orange); border-color: var(--orange); color: #000; rotate: -45deg; }
.np-card:hover .link-arrow > .roll::after { transform: scaleX(1); transform-origin: left; }
.np-card--pack { background: linear-gradient(160deg, rgba(242,140,24,.12), transparent 45%), var(--ink-1); }

/* ---------- 2. Atelier / domicile ---------- */
.np-places { padding: clamp(100px, 11vw, 170px) 0; background: var(--card); border-radius: var(--radius-l) var(--radius-l) 0 0; }
.np-places__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 1.8vw, 26px); }
.np-place { position: relative; isolation: isolate; aspect-ratio: 4 / 4.4; overflow: hidden; border-radius: var(--radius-s); background: var(--black); }
.np-place picture { position: absolute; inset: 0; }
.np-place img { width: 100%; height: 100%; object-fit: cover; }
.np-place::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.05) 30%, rgba(0,0,0,.88)); pointer-events: none; transition: opacity .6s; }
.np-place:hover img { transform: scale(1.05); }
.np-place__body { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: grid; gap: 12px; padding: clamp(24px, 3vw, 40px); }
.np-place__n { font-size: var(--fs-xs); font-weight: 500; letter-spacing: .14em; color: var(--orange); }
.np-place__title { font-family: var(--f-display); font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.8rem); font-weight: 450; letter-spacing: -.035em; line-height: 1.02; color: #fff; }
.np-place__body p { color: rgba(255,255,255,.84); max-width: 46ch; transition: translate .7s var(--e-out); }
.np-place:hover .np-place__body p { translate: 0 -4px; }

/* ---------- 3. Avant / après ---------- */
.np-results { padding: clamp(90px, 10vw, 160px) 0 clamp(100px, 11vw, 170px); background: var(--black); }
.np-results .ba-stage { padding-top: 0; }

/* ---------- 4. Pourquoi nous ---------- */
.np-why { padding: 0 0 clamp(100px, 11vw, 170px); background: var(--black); }
.np-why__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 26px); }
.np-why__item { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 14px; align-content: start; padding: 36px 32px 34px; border-radius: var(--radius-s); background: var(--ink-1); border: 1px solid var(--line);
  transition: translate .7s var(--e-out), border-color .5s var(--e-soft) !important; }
.np-why__item::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .5s; background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(242,140,24,.16), transparent 70%); }
.np-why__item:hover { translate: 0 -6px !important; border-color: rgba(242,140,24,.55); }
.np-why__item:hover::after { opacity: 1; }
.np-why__ico { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(242,140,24,.6); margin-bottom: 10px; transition: background-color .4s, rotate .7s var(--e-spring); }
.np-why__ico svg { width: 22px; height: 22px; fill: none; stroke: var(--orange); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; transition: stroke .4s; }
.np-why__item:hover .np-why__ico { background: var(--orange); rotate: -10deg; }
.np-why__item:hover .np-why__ico svg { stroke: #000; }
.np-why__n { position: absolute; top: 18px; right: 24px; font-family: var(--f-display); font-size: 4.6rem; font-weight: 200; line-height: 1; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1px rgba(242,140,24,.35); }
.np-why__item h3 { font-family: var(--f-display); font-size: var(--fs-h4); font-size: clamp(1.3rem, 1.1rem + .6vw, 1.65rem); font-weight: 500; letter-spacing: -.025em; color: var(--fg); }
.np-why__item p { color: var(--fg-3); line-height: 1.7; }

/* ---------- Responsive ---------- */
@media (max-width: 1023.98px) {
  .np-cards { grid-template-columns: 1fr 1fr; }
  .np-why__list { grid-template-columns: 1fr; }
}
@media (max-width: 639.98px) {
  .hero--page .hero__in { padding-bottom: 92px; }
  .np-cards, .np-places__grid { grid-template-columns: 1fr; }
  .np-place { aspect-ratio: 4 / 5; }
}
@media (prefers-reduced-motion: reduce) {
  .ccp-js .np-crumb { opacity: 1 !important; translate: none !important; }
}

/* ---------- Survol renforcé des cartes de formules ---------- */
.np-card:hover { box-shadow: 0 34px 70px -28px rgba(242,140,24,.5), 0 0 0 1px rgba(242,140,24,.7); }
.np-card__media img { transition: transform 1.2s var(--e-soft), filter .8s var(--e-soft) !important; }
.np-card:hover .np-card__media img { transform: scale(1.1); filter: brightness(1.08) saturate(1.08); }
.np-card__media::before { content: ""; position: absolute; z-index: 1; top: -20%; bottom: -20%; left: -60%; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28) 50%, transparent); transform: skewX(-16deg); }
.np-card:hover .np-card__media::before { animation: sheen 1.3s var(--e-soft) both; }
.np-card__go { position: absolute; z-index: 3; right: 18px; bottom: 18px; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--orange); color: #000; box-shadow: 0 10px 26px rgba(0,0,0,.45);
  opacity: 0; scale: .6; translate: 0 10px; transition: opacity .4s var(--e-soft), scale .55s var(--e-spring), translate .55s var(--e-out), rotate .55s var(--e-spring); }
.np-card__go svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.np-card:hover .np-card__go, .np-card:focus-visible .np-card__go { opacity: 1; scale: 1; translate: 0 0; }
.np-card:hover .np-card__go { rotate: 45deg; }
.np-card__badge { right: auto; left: 20px; top: auto; bottom: 20px; z-index: 3; }
.np-card--pack .np-card__badge { bottom: 22px; }
.np-card:hover .np-card__title { color: var(--orange); }
.np-card__title { transition: color .4s var(--e-soft); }
/* Tactile : l'indicateur reste visible et la flèche du lien est déjà active */
@media (hover: none) {
  .np-card__go { opacity: 1; scale: 1; translate: 0 0; }
  .np-card .link-arrow svg { background: var(--orange); border-color: var(--orange); color: #000; }
  .np-card:active { scale: .985; }
}
/* fin de page : transition naturelle vers le pied de page */
.ccp--page .zone { padding-bottom: clamp(100px, 11vw, 160px); }

/* ---------- Cartes de formules : texte posé directement sur la photo (comme sur le site actuel) ---------- */
.np-card { aspect-ratio: 4 / 5.4; }
.np-card__media { position: absolute; inset: 0; aspect-ratio: auto; }
.np-card__media::after { background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,.15) 42%, rgba(0,0,0,.82) 72%, rgba(0,0,0,.94) 100%); }
.np-card__body { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 28px 28px 30px; gap: 12px; }
.np-card__text { color: rgba(255,255,255,.86); }
.np-card__go { top: 18px; right: 18px; bottom: auto; }
.np-card__badge, .np-card--pack .np-card__badge { top: 92px; bottom: auto; left: 22px; }
.np-card:hover .np-card__body { translate: 0 -4px; }
.np-card__body { transition: translate .7s var(--e-out); }
@media (max-width: 639.98px) { .np-card { aspect-ratio: 4 / 5.2; } .np-card__body { padding: 22px 22px 24px; } }

/* Animations réduites : l'image du hero reste affichée (pas de vidéo) */
@media (prefers-reduced-motion: reduce) { .hero--page .hero__poster { display: block; } }