/* ==========================================================================
   PMB Auto Diagnostic — feuille de style
   Palette et typographie centralisées en variables : toute retouche de
   charte se fait ici, jamais dans les règles.
   ========================================================================== */

:root {
  /* Couleurs (dérivées du logo) */
  --bleu-nuit: #1E2733;        /* dominante : textes, sections foncées */
  --carbone: #12161C;          /* sections très sombres (réalisations, footer) */
  --vert: #6DBE2B;             /* accent uniquement : CTA, onde, éléments actifs */
  --vert-survol: #5FAA22;
  --blanc-casse: #F7F8F6;      /* fonds clairs */
  --gris-acier: #8A94A0;       /* textes secondaires, données techniques */

  /* Nuances d'appui */
  --texte-secondaire-clair: #5C6670;   /* texte gris sur fond clair */
  --texte-secondaire-sombre: #AEB6BF;  /* texte gris sur fond sombre */
  --texte-horaires: #DDE2E7;
  --bordure-claire: #E2E6E0;
  --bordure-sombre: #2C3540;
  --bordure-sombre-2: #3A4552;
  --fond-carte-sombre: #262E39;
  --fond-chip: #EDF0EA;

  /* Typographie : titrage technique, corps neutre, mono pour les données */
  --font-titres: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-texte: 'Inter', 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  --largeur-max: 1180px;
  --hauteur-entete: 76px;
}

/* ---------- Base ---------- */

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* compense le header sticky pour les ancres */
  scroll-padding-top: var(--hauteur-entete);
}

body {
  margin: 0;
  background: var(--blanc-casse);
  color: var(--bleu-nuit);
  font-family: var(--font-texte);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

h1, h2, h3 {
  font-family: var(--font-titres);
  letter-spacing: -0.01em;
}

.conteneur {
  max-width: var(--largeur-max);
  margin: 0 auto;
}

.section { padding: clamp(60px, 8vw, 100px) 20px; }
.section--sans-haut { padding-top: 0; }
.section--claire { background: var(--blanc-casse); }
.section--sombre { background: var(--bleu-nuit); color: var(--blanc-casse); }
.section--carbone { background: var(--carbone); color: var(--blanc-casse); }

h2 {
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 700;
  margin: 0 0 8px;
}

/* Étiquette mono verte au-dessus de chaque titre de section */
.kicker {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--vert);
  margin: 0 0 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.kicker--petit { font-size: 12px; }

/* Petite onde décorative sous les titres */
.onde-titre {
  width: 96px;
  height: 20px;
  display: block;
  margin: 0 0 36px;
}

.note-mono {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--gris-acier);
  line-height: 1.8;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Lien d'évitement clavier/lecteur d'écran, invisible hors focus */
.evitement {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 100;
  background: var(--vert);
  color: var(--carbone);
  padding: 10px 16px;
  border-radius: 6px;
  font-family: var(--font-titres);
  text-decoration: none;
}
.evitement:focus { left: 8px; }

/* ---------- Boutons ---------- */

.btn {
  text-decoration: none;
  font-family: var(--font-titres);
  font-size: 16px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.btn--vert {
  background: var(--vert);
  color: var(--carbone);
  font-weight: 600;
  padding: 15px 26px;
}
.btn--vert:hover { background: var(--vert-survol); }

.btn--grand { font-size: 18px; padding: 15px 24px; }

.btn--contour {
  color: var(--blanc-casse);
  font-weight: 500;
  padding: 15px 22px;
  border: 1px solid var(--bordure-sombre-2);
}
.btn--contour:hover { border-color: var(--vert); color: var(--vert); }

/* ---------- Header ---------- */

.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 248, 246, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bordure-claire);
}

.entete__inner {
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  transition: padding 0.25s ease;
}

.entete__marque {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--bleu-nuit);
  min-height: 44px;
}

.entete__logo {
  height: 40px;
  width: auto;
  display: block;
  transition: height 0.25s ease;
}

/* Header compacté après défilement (classe posée par main.js) */
.entete.reduit .entete__inner { padding-top: 5px; padding-bottom: 5px; }
.entete.reduit .entete__logo { height: 28px; }

.entete__nom {
  font-family: var(--font-titres);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.02em;
}
.entete__nom span { font-weight: 500; color: var(--gris-acier); }

.nav {
  display: flex;
  gap: 22px;
  margin-left: auto;
  align-items: center;
}

.nav a {
  text-decoration: none;
  color: var(--bleu-nuit);
  font-size: 14px;
  font-weight: 500;
}
.nav a:hover { color: var(--vert); }

/* Mobile : la nav devient une rangée de puces défilables — pas de menu
   burger, les 4 ancres restent accessibles en un geste */
@media (max-width: 639px) {
  html { scroll-padding-top: 60px; }

  .entete__inner { flex-wrap: nowrap; gap: 10px; }
  .entete__nom { display: none; }

  .nav {
    gap: 8px;
    overflow-x: auto;
    flex: 1 1 auto;
    min-width: 0;
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }

  .nav a {
    font-size: 13px;
    white-space: nowrap;
    padding: 0 12px;
    border-radius: 6px;
    background: var(--fond-chip);
    display: flex;
    align-items: center;
    min-height: 44px; /* cible tactile minimale */
  }
}

/* ---------- Hero ---------- */

.hero {
  background: var(--bleu-nuit);
  color: var(--blanc-casse);
  overflow: hidden;
}

.hero__inner {
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: clamp(56px, 9vw, 110px) 20px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
}

.hero__texte { flex: 1 1 420px; min-width: 0; }

.hero h1 {
  font-size: clamp(34px, 5.5vw, 62px);
  line-height: 1.08;
  font-weight: 700;
  margin: 0 0 20px;
  text-wrap: balance;
}

.hero .kicker { margin-bottom: 18px; }

.hero__sous-titre {
  font-size: clamp(15px, 2vw, 17px);
  line-height: 1.6;
  color: var(--texte-secondaire-sombre);
  max-width: 46ch;
  margin: 0 0 32px;
}

.hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

.hero__photo {
  flex: 0 1 360px;
  min-width: 0;
  margin: 0;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--bordure-sombre);
}

.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero__photo::after {
  /* voile en bas de la photo pour garder la légende lisible */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(18, 22, 28, 0.55), rgba(18, 22, 28, 0) 55%);
}

.hero__photo figcaption {
  position: absolute;
  bottom: 12px;
  left: 14px;
  right: 14px;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
}

.hero__onde {
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 30px 20px 56px;
}

.hero__onde svg {
  display: block;
  width: 100%;
  height: 90px;
}

/* L'onde se trace de gauche à droite au chargement, comme un diagnostic
   qui démarre. 1500 couvre la longueur du tracé avec de la marge. */
#onde-hero {
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
  animation: tracer-onde 2.4s cubic-bezier(0.4, 0, 0.2, 1) 0.4s forwards;
}

@keyframes tracer-onde {
  to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #onde-hero { animation: none; stroke-dashoffset: 0; }
  html { scroll-behavior: auto; }
}

/* ---------- Prestations ---------- */

.prestations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

.carte {
  background: #FFFFFF;
  border: 1px solid var(--bordure-claire);
  border-radius: 10px;
  padding: 22px;
}

.carte__num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--gris-acier);
  margin: 0 0 8px;
}

.carte h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 6px;
}

.carte p:last-child {
  font-size: 14px;
  line-height: 1.55;
  color: var(--texte-secondaire-clair);
  margin: 0;
}

/* Carte "recherche de panne" : pleine largeur et sombre pour marquer
   la spécialité mise en avant par le client */
.carte--vedette {
  grid-column: 1 / -1;
  background: var(--bleu-nuit);
  color: var(--blanc-casse);
  border: none;
  padding: clamp(24px, 4vw, 40px);
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
}

.carte--vedette > div { flex: 1 1 380px; }

.carte--vedette h3 {
  font-size: clamp(21px, 3vw, 28px);
  margin: 0 0 10px;
}

.carte--vedette p:last-child {
  font-size: 15px;
  line-height: 1.6;
  color: var(--texte-secondaire-sombre);
  max-width: 60ch;
}

.carte--vedette svg { flex: 0 1 220px; height: 52px; }

.prestations + .note-mono { margin: 28px 0 0; }

/* ---------- Réalisations ---------- */

/* Comparateur avant/après : l'image "avant" est rognée par clip-path
   selon --position (0–100 %), pilotée par l'input range invisible
   qui couvre tout le bloc */
.comparateur {
  --position: 50%;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  height: clamp(200px, 26vw, 300px);
  user-select: none;
  background: var(--bleu-nuit);
  margin-bottom: 36px;
}

.comparateur img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.comparateur__avant {
  clip-path: inset(0 calc(100% - var(--position)) 0 0);
}

.comparateur__badge {
  position: absolute;
  top: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 5px 10px;
  border-radius: 5px;
  pointer-events: none;
}
.comparateur__badge--avant {
  left: 14px;
  background: rgba(18, 22, 28, 0.75);
  color: var(--blanc-casse);
}
.comparateur__badge--apres {
  right: 14px;
  background: rgba(109, 190, 43, 0.9);
  color: var(--carbone);
}

.comparateur__ligne {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--position);
  width: 2px;
  background: var(--vert);
  transform: translateX(-1px);
  pointer-events: none;
}

.comparateur__poignee {
  position: absolute;
  top: 50%;
  left: var(--position);
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--vert);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

.comparateur input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
  margin: 0;
}

.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.galerie img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

.encart-insta {
  margin-top: 40px;
  background: var(--bleu-nuit);
  border: 1px solid var(--bordure-sombre);
  border-radius: 12px;
  padding: clamp(20px, 3vw, 28px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}

.encart-insta__texte { flex: 1 1 280px; min-width: 0; }

.encart-insta__titre {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px;
}

.encart-insta__titre h3 { font-size: 18px; font-weight: 600; margin: 0; }

.encart-insta__texte > p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--gris-acier);
  margin: 0 0 14px;
  max-width: 44ch;
}

.encart-insta__lien {
  text-decoration: none;
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--vert);
  border: 1px solid var(--bordure-sombre-2);
  padding: 13px 18px;
  border-radius: 6px;
}
.encart-insta__lien:hover { border-color: var(--vert); }

.encart-insta__grille {
  flex: 1 1 300px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  min-width: 0;
}

.encart-insta__grille img {
  width: 100%;
  height: 104px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* ---------- À propos ---------- */

.apropos {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 5vw, 60px);
  align-items: flex-start;
}

.apropos__portrait {
  flex: 0 1 300px;
  max-width: 300px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.apropos__portrait img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

.apropos__portrait .note-mono { font-size: 11.5px; margin: 0; }

.apropos__texte { flex: 1 1 420px; min-width: 0; }

.apropos__texte .onde-titre { margin-bottom: 24px; }

.apropos__accroche {
  font-family: var(--font-titres);
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.5;
  font-weight: 500;
  margin: 0 0 20px;
  max-width: 46ch;
}

.apropos__texte > p:not(.kicker):not(.apropos__accroche) {
  font-size: 16px;
  line-height: 1.7;
  color: var(--bordure-sombre-2);
  margin: 0 0 16px;
  max-width: 62ch;
}

.apropos__texte blockquote {
  margin: 12px 0 0;
  padding: 22px 26px;
  background: #FFFFFF;
  border: 1px solid var(--bordure-claire);
  border-radius: 10px;
  max-width: 54ch;
}

.apropos__texte blockquote p {
  font-family: var(--font-titres);
  font-size: 18px;
  line-height: 1.5;
  margin: 0 0 10px;
}

.apropos__texte blockquote footer {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--gris-acier);
}

/* ---------- Avis ---------- */

.avis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.avis__carte {
  background: #FFFFFF;
  border: 1px solid var(--bordure-claire);
  border-radius: 10px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.avis__etoiles {
  color: var(--vert);
  font-size: 15px;
  letter-spacing: 3px;
}

.avis__carte > p:not(.avis__auteur) {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--bordure-sombre-2);
  margin: 0;
}

.avis__auteur {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--gris-acier);
  margin: auto 0 0;
}

/* ---------- Contact ---------- */

.contact {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}

.contact__infos {
  flex: 1 1 340px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.contact__etiquette {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--gris-acier);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 8px;
}

.contact__adresse { font-size: 17px; line-height: 1.5; margin: 0; }

.contact__email {
  display: inline-block;
  color: var(--blanc-casse);
  font-size: 16px;
  text-decoration: none;
  border-bottom: 1px solid var(--bordure-sombre-2);
  overflow-wrap: anywhere;
  padding: 12px 0;
}
.contact__email:hover { color: var(--vert); border-bottom-color: var(--vert); }

/* Horaires en mono, alignés sur deux colonnes : lisibilité immédiate
   demandée par le client (exigence mobile) */
.horaires {
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 2;
  color: var(--texte-horaires);
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 20px;
}

.horaires span:nth-child(odd) { color: var(--gris-acier); }

.contact__carte-lieu { flex: 1 1 420px; min-width: 0; }

.contact__carte-lieu iframe {
  width: 100%;
  height: 100%;
  min-height: 340px;
  border: 0;
  border-radius: 12px;
  display: block;
}

/* ---------- Footer ---------- */

.pied {
  background: var(--carbone);
  color: var(--gris-acier);
  padding: 40px 20px;
}

.pied__inner {
  max-width: var(--largeur-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
}

.pied__marque {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pied__marque img { height: 36px; width: auto; display: block; }

.pied__nom {
  font-family: var(--font-titres);
  font-weight: 600;
  font-size: 14px;
  color: var(--blanc-casse);
  margin: 0;
}

.pied__coordonnees {
  font-family: var(--font-mono);
  font-size: 11.5px;
  margin: 2px 0 0;
}

.pied__coordonnees a {
  color: var(--vert);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
}

.pied__reseaux {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.pied__reseaux a {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--bordure-sombre);
  color: var(--vert);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.pied__reseaux a:hover { border-color: var(--vert); }
.pied__reseaux a[aria-label="Instagram"] { color: var(--blanc-casse); }
.pied__reseaux a[aria-label="Instagram"]:hover { color: var(--vert); }

.pied__bientot {
  font-family: var(--font-mono);
  font-size: 11px;
  color: #6B7480;
}

/* ---------- Icônes flottantes ---------- */

.flottants {
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.flottants a {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(18, 22, 28, 0.35);
}

.flottants__whatsapp { background: var(--vert); color: var(--carbone); }
.flottants__whatsapp:hover { background: var(--vert-survol); }

.flottants__instagram { background: var(--bleu-nuit); color: var(--blanc-casse); }
.flottants__instagram:hover { background: var(--carbone); }