/* ==========================================================================
   DISCIPLINE — Service client : styles communs
   /contact · /faq · /livraison-retours · /guide-des-tailles
   Préfixe « sv- ». Réutilise les classes de main.css.
   SOMMAIRE
    1. Hôtes de SVG inline
    2. Héros de service (colonne bâtie, titre, chapô)
    3. Navigation du service client
    4. Tête de section numérotée
    5. Bandeau de clôture
   ========================================================================== */

/* ---------- 1. HÔTES DE SVG INLINE ---------- */
[data-svg] > svg { display: block; width: 100%; height: 100%; }
[data-svg].is-failed { min-height: 1px; }

/* ---------- 2. HÉROS DE SERVICE ---------- */
.sv-hero { padding-top: clamp(28px, 4vw, 56px); padding-bottom: clamp(56px, 8vw, 112px); }
.sv-hero .breadcrumb { margin-bottom: clamp(32px, 5vw, 72px); }
.sv-hero__grid { display: grid; gap: clamp(28px, 4vw, 56px); position: relative; }
@media (min-width: 1000px) {
  .sv-hero__grid { grid-template-columns: minmax(0, 8.2fr) minmax(0, 3.4fr); align-items: end; gap: clamp(48px, 6vw, 112px); }
}
.sv-hero__title-wrap { display: grid; gap: clamp(18px, 2.2vw, 30px); }
/* Taille : h1.page-title--utility (main.css), qui l'emporte ; voix brute 900 : max-width × 1,5 */
.sv-hero__title { max-width: 14.25em; }
.sv-hero__aside { display: grid; gap: 1.1em; max-width: 30rem; }
.sv-hero__aside .lead { font-size: clamp(1rem, 0.82rem + 0.62vw, 1.1875rem); }   /* coupe « pretty » des <p> (balance laissait « La » seul en fin de ligne sur /contact) */
.sv-hero__aside p + p { margin-top: 0; color: var(--fg-muted); }
.sv-hero__art {
  position: absolute; z-index: -1; top: 0; bottom: 0; right: max(var(--gutter), calc((100% - var(--container)) / 2));
  width: clamp(64px, 9vw, 130px); pointer-events: none; --decor: var(--decor-soft);   /* sous le texte : « pierre » */
}
.sv-hero__art > [data-svg] { height: 100%; }
.sv-hero__art > [data-svg] > svg { height: 100%; width: auto; margin-inline: auto; }
@media (min-width: 1000px) {
  .sv-hero__art { --decor: currentColor; }      /* à côté du texte : plein (ivoire / encre selon le fond) */
  .sv-hero__grid { padding-right: clamp(110px, 12vw, 190px); }
}

/* ---------- 3. NAVIGATION DU SERVICE CLIENT ---------- */
.sv-nav { background: var(--marble); border-block: 1px solid var(--rule); position: relative; z-index: 2; }
.sv-nav__inner { display: flex; align-items: center; gap: clamp(20px, 3vw, 48px); }
.sv-nav__list { list-style: none; padding: 0; display: flex; gap: clamp(20px, 3vw, 44px); overflow-x: auto; scrollbar-width: none; margin-left: auto; }
.sv-nav__list::-webkit-scrollbar { display: none; }
.sv-nav__list a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 20px 12px; white-space: nowrap; font: 600 0.72rem/1 var(--font-caps); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-muted); transition: color var(--dur-1); }
.sv-nav__list a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent-line); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-2) var(--ease); }
.sv-nav__list a:hover, .sv-nav__list a[aria-current='page'] { color: var(--fg); }
.sv-nav__list a:hover::after, .sv-nav__list a[aria-current='page']::after { transform: scaleX(1); }
/* La page courante : son soulignement se pose à l'arrivée (une seule fois, sans attendre le survol) */
@keyframes sv-underline { from { transform: scaleX(0); } }
.sv-nav__list a[aria-current='page']::after { animation: sv-underline 900ms var(--ease-out) 450ms backwards; }
@media (max-width: 760px) { .sv-nav__list { margin-left: 0; } }

/* ---------- 4. TÊTE DE SECTION NUMÉROTÉE ---------- */
.sv-head { display: grid; gap: var(--space-4); max-width: 46rem; margin-bottom: clamp(32px, 5vw, 64px); }
.sv-head__title { font-size: clamp(1.625rem, 2.85vw, 2.625rem); }
.sv-head p { color: var(--fg-muted); }
.sv-head .lead { color: var(--fg); text-wrap: balance; }

/* ---------- 5. BANDEAU DE CLÔTURE ---------- */
.sv-cta { text-align: center; padding-block: clamp(72px, 9vw, 132px); }
.sv-cta__inner { display: grid; justify-items: center; gap: clamp(18px, 2.4vw, 28px); }
.sv-cta__mark { color: var(--gold-light); }
.sv-cta__title { font-size: clamp(1.625rem, 3.1vw, 2.75rem); max-width: 21em; }
.sv-cta .cluster { margin-top: 8px; }