/* Page Services / SAV — nouveau design (moltow-08-2026/services/sav).
   Porté depuis le <style> scopé de la section .hero-v2 (inline dans la
   source) + les 4 blocs d'ajustement qui suivaient dans le head
   (ajustements-hero-services, etoiles-or, harmonisation-sav,
   hero-mobile-v2). Le hero-v2 n'est pas un composant réellement partagé
   entre les pages services (vérifié : variables et structure diffèrent
   d'une page à l'autre) — pas de tentative de mutualisation ici, à
   reconsidérer si une 2e page services confirme un vrai recoupement.
   Nécessite tokens.css (déjà chargé globalement). */

/* --- Hero --- */
.hero-v2 {
  --hv2-accent: #8a6248;
  --hv2-accent-dark: #684735;
  --hv2-ink: #332820;
  --hv2-soft: #555;
  --hv2-mute: #7b6d62;
  --hv2-line: #dfd3c7;
  background: #fff;
  padding: 2rem clamp(20px, 4vw, 64px) 2.5rem;
}
.hero-v2 * {
  box-sizing: border-box;
}
.hero-v2 .hero-v2-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 55fr 45fr;
  column-gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.hero-v2 [data-eyebrow] {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hv2-accent);
  margin: 0 0 1rem;
}
.hero-v2 [data-eyebrow]::before {
  content: '';
  width: 2rem;
  height: 2px;
  background: var(--hv2-accent);
  border-radius: 2px;
}
.hero-v2 h1 {
  font-size: clamp(1.95rem, 1.45rem + 1.9vw, 2.7rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--hv2-ink);
  margin: 0 0 0.8rem;
}
.hero-v2 h1 em {
  font-style: normal;
  color: var(--hv2-accent);
}
.hero-v2 .hero-v2-sub {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--hv2-soft);
  max-width: 34rem;
  margin: 0 0 1.4rem;
}
.hero-v2 .hero-v2-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin: 0;
}
.hero-v2 .hero-v2-actions a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.2s ease;
  border: 1.5px solid transparent;
}
.hero-v2 a[data-cta='primary'] {
  background: var(--hv2-accent);
  color: #fff;
  box-shadow: 0 4px 12px rgba(138, 98, 72, 0.3);
}
.hero-v2 a[data-cta='primary']:hover {
  background: var(--hv2-accent-dark);
  transform: translateY(-1px);
}
.hero-v2 a[data-cta='ghost'] {
  border-color: var(--hv2-line);
  color: var(--hv2-ink);
  background: transparent;
}
.hero-v2 a[data-cta='ghost']:hover {
  border-color: var(--hv2-accent);
  color: var(--hv2-accent);
}
.hero-v2 .hero-v2-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem clamp(1.4rem, 3vw, 2.6rem);
  margin: 1.6rem 0 0;
}
.hero-v2 .hero-v2-stats dt {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.hero-v2 .hero-v2-stats dd {
  margin: 0;
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--hv2-ink);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.hero-v2 .hero-v2-stats dd::after {
  content: attr(data-label);
  display: block;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--hv2-mute);
  margin-top: 0.15rem;
  white-space: nowrap;
}
.hero-v2 .hero-v2-stats dd a {
  color: inherit;
  text-decoration: none;
}
.hero-v2 .hero-v2-stats dd a:hover {
  color: var(--hv2-accent);
}
.hero-v2 figure {
  position: relative;
  margin: 0;
}
.hero-v2 figure img {
  width: 100%;
  height: auto;
  max-height: 400px;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 14px 40px rgba(23, 24, 74, 0.14);
  display: block;
}
.hero-v2 figcaption {
  position: absolute;
  bottom: 1.1rem;
  left: -1.1rem;
  margin: 0;
  background: #fff;
  border: 1px solid var(--hv2-line);
  box-shadow: 0 14px 40px rgba(23, 24, 74, 0.16);
  border-radius: 18px;
  padding: 0.95rem 1.35rem;
  display: grid;
  gap: 0.15rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--hv2-soft);
  max-width: min(85%, 20rem);
}
.hero-v2 figcaption b {
  font-size: 1.45rem;
  font-weight: 900;
  color: var(--hv2-accent);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.hero-v2 figcaption small {
  font-weight: 500;
  font-size: 0.72rem;
  color: var(--hv2-mute);
  line-height: 1.45;
}
@media (max-width: 767px) {
  .hero-v2 {
    padding: 1.6rem 20px 2.2rem;
  }
  .hero-v2 .hero-v2-inner {
    grid-template-columns: 1fr;
    row-gap: 1.8rem;
  }
}
@media (min-width: 769px) {
  .hero-sav {
    max-width: 1180px;
    margin: 0 auto;
    padding: 56px clamp(16px, 4vw, 64px);
  }
  .hero-sav h1 {
    font-size: clamp(26px, 2.6vw, 36px);
    line-height: 1.2;
  }
  .hero-sav p {
    font-size: 15px;
  }
}
mark {
  background: none;
  color: #e8a13a;
}

/* --- Corps de page : mise en page de base ---
   Trouvée dans un second temps : le bloc de ~2000 lignes qui suit le hero
   dans la source n'est pas entièrement mort comme d'abord évalué (seule la
   partie top-bar/nav-bar/menu déroulant l'est réellement, vérifié sans
   markup correspondant) — ses ~700 premières lignes définissent la mise en
   page de base de .sav-*, .engagement-* et .contact-rapide (tailles, grilles,
   espacements) que la couche d'harmonisation plus bas ne fait que recolorer
   par-dessus avec !important. Sans ces règles de base, plusieurs éléments
   (ex. les icônes SVG des engagements, sans elles affichées à leur taille
   native énorme) sont cassés. .hero-sav/.footer/.footer-grid en revanche
   sont bien morts (aucun élément correspondant dans le corps réel de la
   page) — non repris. .form-group/.file-upload/.form-grid également omis :
   le formulaire réel est un composant Astro générique (form-styles.css,
   config src/lib/forms/config.ts) qui n'utilise pas ces classes. */
.sav-card {
  background: #fff;
  padding: 48px;
}
.sav-intro {
  text-align: center;
  margin-bottom: 48px;
}
.sav-intro .intro-mobile {
  display: none;
}
.sav-visual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  margin: 48px 0;
  padding: 32px;
  background: #fafafa;
}
.sav-image {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.sav-highlight {
  padding: 24px;
  margin: 32px 0;
}
.sav-highlight h3 {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sav-highlight ul {
  margin: 16px 0;
  padding-left: 24px;
}
.sav-highlight li {
  margin-bottom: 8px;
  font-size: 15px;
}
.engagements-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin: 40px 0;
}
.engagement-item {
  padding: 24px;
  text-align: center;
}
.engagement-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.engagement-icon svg {
  width: 24px;
  height: 24px;
  color: white;
}
.engagement-item h4 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}
.engagement-item p {
  font-size: 14px;
}
.form-section {
  margin-top: 48px;
  padding-top: 48px;
}
.form-section h3 {
  margin-bottom: 24px;
  text-align: center;
}
.contact-rapide {
  padding: 48px;
  text-align: center;
  margin-top: 48px;
}
.contact-rapide h3 {
  margin-bottom: 16px;
}
.contact-rapide p {
  margin-bottom: 32px;
}
.contact-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .sav-card {
    padding: 24px 18px;
  }
  .sav-intro {
    margin-bottom: 24px;
  }
  .sav-intro .intro-desktop {
    display: none;
  }
  .sav-intro .intro-mobile {
    display: block;
  }
  .sav-visual {
    display: block;
    gap: 16px;
    padding: 16px;
    margin: 20px 0;
  }
  .sav-image {
    height: 140px;
    object-fit: cover;
  }
  .sav-visual-text {
    display: none;
  }
  .engagements-grid {
    display: flex;
    gap: 10px;
    margin: 20px 0;
  }
  .engagement-item {
    flex: 1;
    padding: 16px 12px;
  }
  .engagement-icon {
    width: 38px;
    height: 38px;
    margin-bottom: 10px;
  }
  .engagement-icon svg {
    width: 20px;
    height: 20px;
  }
  .engagement-item h4 {
    font-size: 13px;
    margin-bottom: 4px;
  }
  .engagement-item p {
    font-size: 11px;
    line-height: 1.4;
  }
  .sav-highlight {
    padding: 16px;
    margin: 20px 0;
  }
  .sav-highlight h3 {
    font-size: 14px;
    margin-bottom: 10px;
  }
  .sav-highlight h3 svg {
    width: 18px;
    height: 18px;
  }
  .sav-highlight ul {
    padding-left: 16px;
    margin: 0;
  }
  .sav-highlight li {
    font-size: 12px;
    margin-bottom: 8px;
    line-height: 1.5;
  }
  .sav-highlight li strong {
    display: block;
    font-size: 12px;
    margin-bottom: 2px;
  }
  .form-section {
    margin-top: 28px;
    padding-top: 24px;
  }
  .form-section h3 {
    font-size: 18px;
    margin-bottom: 20px;
  }
  .contact-rapide {
    padding: 28px 20px;
    margin-top: 30px;
  }
  .contact-rapide h3 {
    font-size: 18px;
    margin-bottom: 8px;
  }
  .contact-rapide p {
    font-size: 13px;
    margin-bottom: 20px;
  }
  .contact-buttons {
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }
  .contact-buttons .btn-moltow,
  .contact-buttons .btn-moltow-secondary {
    width: 100%;
    justify-content: center;
    padding: 14px 20px;
    font-size: 14px;
  }
}
@media (max-width: 380px) {
  .sav-intro h2 {
    font-size: 18px;
  }
  .engagement-item h4 {
    font-size: 12px;
  }
  .engagement-item p {
    font-size: 10px;
  }
  .sav-highlight li {
    font-size: 11px;
  }
  .form-section h3 {
    font-size: 16px;
  }
  .contact-rapide h3 {
    font-size: 16px;
  }
}

/* --- Corps de page : design system hero-v2 appliqué au reste (couleurs) --- */
.sav-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(2.4rem, 1.8rem + 2vw, 3.6rem) clamp(20px, 4vw, 64px);
}
body {
  margin: 0;
  line-height: 1.6;
  background: #f3ede5;
  color: #57483e;
  /* La police réelle (Poppins, @font-face déjà chargée par page-base.css)
     n'était déclarée que dans le bloc mort retiré à la migration — sans
     elle la page retombait sur la police système par défaut du navigateur. */
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Le bouton d'envoi du formulaire SAV vient du composant générique partagé
   par tout le site (form-styles.css, .btn-contact-send) — encore bleu, pas
   migré. On le recolore seulement ici (scopé au formulaire de cette page)
   plutôt que dans form-styles.css : ce fichier est chargé par toutes les
   pages à formulaire, la plupart pas encore migrées vers la nouvelle
   palette (ex. /contact) — un changement global y aurait laissé un bouton
   marron isolé au milieu d'une page encore bleue. */
.form-section .btn-contact-send {
  background: #8a6248 !important;
}
.form-section .btn-contact-send:hover {
  background: #684735 !important;
  box-shadow: 0 4px 12px rgba(138, 98, 72, 0.3) !important;
}
.form-section input:focus,
.form-section select:focus,
.form-section textarea:focus {
  border-color: #8a6248 !important;
  box-shadow: 0 0 0 3px rgba(138, 98, 72, 0.1) !important;
}
.sav-card {
  max-width: 900px;
  margin: 0 auto;
  border-radius: 20px;
  border: 1px solid #dfd3c7;
  box-shadow: 0 6px 18px rgba(23, 24, 74, 0.07);
}
.sav-container h2,
.sav-intro h2 {
  color: #332820;
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 1.95rem);
  font-weight: 800;
  line-height: 1.25;
}
.sav-container h3,
.sav-visual-text h3,
.sav-highlight h3,
.form-section h3,
.contact-rapide h3 {
  color: #332820;
  font-size: 1.1rem;
  font-weight: 700;
}
.sav-container h4 {
  color: #332820;
  font-size: 1.05rem;
}
.sav-intro p,
.sav-visual-text p,
.sav-highlight p,
.sav-highlight li,
.engagement-item p,
.contact-rapide p,
.file-upload p {
  color: #7b6d62;
  line-height: 1.6;
}
.sav-intro p {
  max-width: 70ch;
  margin-left: auto;
  margin-right: auto;
}
.sav-highlight li,
.sav-highlight p {
  color: #57483e;
}
.sav-highlight li strong {
  color: #332820;
}
.sav-visual {
  background: #f3ede5;
  border: 1px solid #dfd3c7;
  border-radius: 14px;
  gap: 28px;
  padding: 24px;
  grid-template-columns: 0.8fr 1fr;
}
.sav-image {
  border-radius: 14px;
  max-height: 320px;
  object-fit: cover;
}
.engagements-grid {
  gap: 20px;
}
.engagement-item {
  background: #f3ede5;
  border: 1px solid #dfd3c7;
  border-radius: 14px;
  transition: box-shadow 0.25s ease;
}
.engagement-item:hover {
  box-shadow: 0 6px 18px rgba(23, 24, 74, 0.1);
}
.engagement-icon {
  background: #8a6248;
}
.sav-highlight {
  background: #ebe1d5;
  border-left: 4px solid #8a6248;
  border-radius: 14px;
}
.sav-highlight h3 svg {
  width: 20px;
  height: 20px;
  color: #8a6248;
}
.form-section {
  border-top: 1px solid #dfd3c7;
}
.form-group input,
.form-group select,
.form-group textarea {
  border: 1px solid #dfd3c7;
  border-radius: 14px;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: #8a6248;
}
.form-group label {
  color: #57483e;
}
.file-upload {
  background: #ebe1d5;
  border: 2px dashed #8a6248;
  border-radius: 14px;
}
.file-upload:hover {
  background: #e6e9f0;
}
.contact-rapide {
  background: #ebe1d5;
  border: 1px solid #dfd3c7;
  border-radius: 20px;
}
.contact-buttons {
  gap: 16px;
}
.btn-moltow,
.btn-moltow-secondary {
  border-radius: 999px;
  font-weight: 600;
}
.btn-moltow {
  background: #8a6248;
}
.btn-moltow:hover {
  background: #684735;
  box-shadow: 0 6px 18px rgba(23, 24, 74, 0.1);
  transform: translateY(-1px);
}
.btn-moltow-secondary {
  color: #8a6248;
  border: 1px solid #dfd3c7;
}
.btn-moltow-secondary:hover {
  background: #684735;
  box-shadow: 0 6px 18px rgba(23, 24, 74, 0.1);
  transform: translateY(-1px);
}
@media (max-width: 768px) {
  .sav-container {
    padding-left: 16px;
    padding-right: 16px;
  }
  .engagement-item {
    background: #f3ede5;
  }
  .engagement-item h4 {
    color: #332820;
  }
}

/* --- Hero mobile --- */
@media (max-width: 760px) {
  .hero-v2 {
    padding: 1.7rem 1.2rem 1.7rem !important;
  }
  .hero-v2 .hero-v2-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  .hero-v2 .hero-v2-eyebrow,
  .hero-v2 [data-eyebrow] {
    display: none !important;
  }
  .hero-v2 h1 {
    font-size: clamp(1.55rem, 7vw, 1.9rem) !important;
    line-height: 1.15 !important;
    margin: 0 0 0.35em !important;
  }
  .hero-v2 .hero-v2-sub {
    font-size: 0.95rem !important;
    line-height: 1.45 !important;
    margin: 0 0 1rem !important;
  }
  .cta-sm {
    display: none;
  }
  .cta-lg {
    display: none;
  }
  .cta-sm {
    display: inline;
  }
  .hero-v2 .hero-v2-actions {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.6rem;
    width: 100%;
    margin: 0 0 1.1rem !important;
  }
  .hero-v2 .hero-v2-actions a {
    display: inline-flex;
    justify-content: center !important;
    align-items: center;
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    padding: 0.75rem 0.5rem !important;
    font-size: 0.88rem !important;
    white-space: nowrap;
  }
  .hero-v2 a[href^='tel:'] {
    border: 1.5px solid var(--hv2-accent, #8a6248) !important;
    color: var(--hv2-accent, #8a6248) !important;
    border-radius: 999px;
  }
  .hero-v2 dl.hero-v2-stats dt:nth-of-type(2),
  .hero-v2 dl.hero-v2-stats dd:nth-of-type(2) {
    display: none !important;
  }
  .hero-v2 dl.hero-v2-stats {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto auto;
    grid-auto-flow: column;
    column-gap: 0.8rem;
    row-gap: 0.05rem;
    width: 100%;
    max-width: 100%;
    margin: 0 0 0.9rem !important;
    padding: 0.2rem 0 0 !important;
    border: 0 !important;
  }
  .hero-v2 dl.hero-v2-stats dt {
    grid-row: 2;
    font-size: 0.64rem;
    line-height: 1.25;
    color: var(--hv2-ink-mute, #7b6d62);
    margin: 0;
    white-space: normal;
  }
  .hero-v2 dl.hero-v2-stats dd {
    grid-row: 1;
    font-size: 0.92rem;
    font-weight: 800;
    margin: 0;
    white-space: nowrap;
  }
  .hero-v2 img {
    width: 100%;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 14px;
  }
  .hero-v2 figure {
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
  }
  .hero-v2 figure figcaption,
  .hero-v2 [class*='price'],
  .hero-v2 [class*='card']:not(.hero-v2-copy) {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    margin: 0.65rem 0 0 !important;
    max-width: none !important;
  }
  .hero-v2 dl dd::after,
  .hero-v2 dl dd {
    white-space: normal !important;
  }
}