/* ═══════════════════════════════════════════════════════════════════
   CPA Mantes Réparation — site vitrine
   Direction : acier + bleu technique. Le sujet du site n'est pas
   « on répare des voitures », c'est « vous saurez ce que ça coûte
   avant qu'on y touche » — c'est ce que disent tous les avis Google.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Couleurs */
  --ink: #0a1220;
  --steel: #131e30;
  --steel-2: #1d2a3e;
  --paper: #ffffff;
  --paper-2: #f8f6f5;
  --line: #e7e2e0;
  --line-dark: rgba(255, 255, 255, 0.12);
  --text: #101828;
  --muted: #5b6676;
  --muted-dark: #9aa8bd;
  /* Accent de marque — rouge brique chaud, volontairement désaturé :
     un rouge signal pur (#e00) sur autant de surfaces crierait. */
  --brand: #b23a30;
  --brand-dark: #8e2a22;
  --brand-soft: #fbedea;
  /* Version claire, pour les sections sur fond encre où le brique
     manquerait de contraste. */
  --brand-light: #ef9086;
  --green: #16a34a;
  /* Statut « fermé » : ardoise et non rouge — avec un thème rouge, un
     point rouge de plus se lit comme une décoration, plus comme un état. */
  --closed: #6b7280;

  /* Typo */
  --display: "Space Grotesk", system-ui, sans-serif;
  --body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Mesures */
  --header: 74px;
  --radius: 6px;
  --radius-sm: 4px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.06);
  --shadow-lift: 0 2px 4px rgba(16, 24, 40, 0.06),
    0 18px 40px rgba(16, 24, 40, 0.12);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header) + 16px);
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  background: var(--paper);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img,
svg,
iframe {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── Grille ───────────────────────────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
}

@media (max-width: 640px) {
  .wrap {
    padding: 0 20px;
  }
}

.section {
  padding: 104px 0;
}

@media (max-width: 900px) {
  .section {
    padding: 72px 0;
  }
}

.section--tint {
  background: var(--paper-2);
}

.section--dark {
  background: var(--ink);
  color: #fff;
}

/* ── Typographie ──────────────────────────────────────────────────── */

h1,
h2,
h3,
h4 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.04;
}

.h1 {
  font-size: clamp(2.35rem, 5vw, 4.05rem);
}

.h2 {
  font-size: clamp(1.85rem, 3.4vw, 2.85rem);
  line-height: 1.06;
}

.h3 {
  font-size: 1.28rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.lead {
  font-size: clamp(1.04rem, 1.35vw, 1.18rem);
  color: var(--muted);
  max-width: 58ch;
}

.section--dark .lead {
  color: var(--muted-dark);
}

/* Étiquette de section : filet accent + libellé */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--display);
  font-size: 0.775rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 20px;
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 3px;
  background: var(--brand);
  flex: none;
}

.section--dark .eyebrow {
  color: var(--brand-light);
}

.section--dark .eyebrow::before {
  background: var(--brand-light);
}

.section-head {
  max-width: 62ch;
  margin-bottom: 56px;
}

.section-head .lead {
  margin-top: 18px;
}

/* ── Boutons ──────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 22px;
  border-radius: var(--radius-sm);
  font-family: var(--display);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  border: 1.5px solid transparent;
  transition: background 0.16s ease, border-color 0.16s ease,
    transform 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
}

.btn svg {
  flex: none;
}

.btn--primary {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 6px 18px rgba(178, 58, 48, 0.28);
}

.btn--primary:hover {
  background: var(--brand-dark);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(178, 58, 48, 0.34);
}

.btn--outline {
  border-color: var(--line);
  background: var(--paper);
  color: var(--text);
}

.btn--outline:hover {
  border-color: var(--text);
  transform: translateY(-1px);
}

.section--dark .btn--outline {
  background: transparent;
  border-color: var(--line-dark);
  color: #fff;
}

.section--dark .btn--outline:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.btn--lg {
  padding: 18px 28px;
  font-size: 1.05rem;
}

@media (prefers-reduced-motion: reduce) {
  .btn:hover {
    transform: none;
  }
}

/* ── En-tête ──────────────────────────────────────────────────────── */

.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}

.header__in {
  height: var(--header);
  display: flex;
  align-items: center;
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
}

@media (max-width: 640px) {
  .header__in {
    padding: 0 20px;
    gap: 16px;
  }
}

.logo {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: none;
}

.logo__mark {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  flex: none;
}

.logo__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.logo__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: -0.02em;
}

.logo__sub {
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.01em;
}

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

.nav a {
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--muted);
  transition: color 0.15s ease;
}

.nav a:hover {
  color: var(--text);
}

.header .btn {
  padding: 11px 18px;
  font-size: 0.92rem;
}

@media (max-width: 940px) {
  .nav {
    display: none;
  }

  .header .btn {
    margin-left: auto;
  }
}

/* ── Hero ─────────────────────────────────────────────────────────── */

.hero {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  align-items: stretch;
  border-bottom: 1px solid var(--line);
}

@media (max-width: 1000px) {
  .hero {
    grid-template-columns: 1fr;
  }
}

.hero__text {
  padding: 68px 56px 68px max(28px, calc((100vw - 1200px) / 2 + 28px));
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 1000px) {
  .hero__text {
    padding: 64px 28px 56px;
  }
}

@media (max-width: 640px) {
  .hero__text {
    padding: 48px 20px 44px;
  }
}

.hero__eyebrow {
  font-family: var(--display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 22px;
}

/* Statut + horaires du jour : ce qu'un visiteur local vérifie en premier */
.hero__now {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-bottom: 32px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.hero__today {
  font-size: 0.95rem;
  color: var(--muted);
}

.hero__today b {
  color: var(--text);
  font-weight: 600;
}

/* Sortie du flux : sinon une photo portrait impose sa hauteur intrinsèque
   à toute la ligne de grille et le hero double de hauteur. */
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px 7px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-size: 0.87rem;
  font-weight: 500;
  color: var(--text);
}

.status__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
  flex: none;
  position: relative;
}

.status--open .status__dot {
  background: var(--green);
}

.status--open .status__dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--green);
  opacity: 0.5;
  animation: ping 2.4s ease-out infinite;
}

.status--closed .status__dot {
  background: var(--closed);
}

.status__sub {
  color: var(--muted);
}

@keyframes ping {
  0% {
    transform: scale(0.7);
    opacity: 0.7;
  }
  70%,
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .status--open .status__dot::after {
    animation: none;
  }
}

.hero h1 {
  margin-bottom: 24px;
  max-width: 15ch;
}

.hero h1 em {
  font-style: normal;
  color: var(--brand);
}

.hero .lead {
  margin-bottom: 34px;
  max-width: 46ch;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero__media {
  position: relative;
  min-height: 500px;
  background: var(--steel);
  overflow: hidden;
}

@media (max-width: 1000px) {
  .hero__media {
    min-height: 360px;
  }
}

/* Carte d'adresse posée sur la photo du hero */
.hero__badge {
  position: absolute;
  left: 28px;
  bottom: 28px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: var(--radius);
  background: rgba(10, 18, 32, 0.74);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
}

.hero__badge > svg {
  flex: none;
  color: var(--brand-light);
}

.hero__badge b {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.97rem;
  letter-spacing: -0.01em;
}

.hero__badge small {
  font-size: 0.87rem;
  color: var(--muted-dark);
}

.hero__badge a {
  margin-left: 4px;
  padding-left: 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  font-weight: 600;
  font-size: 0.92rem;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hero__badge a:hover {
  color: var(--brand-light);
}

@media (max-width: 560px) {
  .hero__badge {
    left: 20px;
    right: 20px;
    bottom: 20px;
    padding: 12px 14px;
  }

  .hero__badge a {
    display: none;
  }
}

/* ── Emplacement photo ────────────────────────────────────────────── */

.photo {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  background-color: var(--steel);
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.035) 0 2px,
    transparent 2px 11px
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 32px;
  color: var(--muted-dark);
}

.photo svg {
  opacity: 0.45;
}

.photo span {
  font-family: var(--display);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  max-width: 30ch;
  line-height: 1.7;
  opacity: 0.72;
}

.photo--flat {
  min-height: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
}

/* ── Barre de chiffres ────────────────────────────────────────────── */

.specs {
  background: var(--ink);
  color: #fff;
}

.specs__in {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
}

@media (max-width: 780px) {
  .specs__in {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .specs__in {
    padding: 0 20px;
  }
}

.spec {
  padding: 30px 26px 30px 0;
  border-right: 1px solid var(--line-dark);
}

.spec:last-child {
  border-right: none;
}

.spec:not(:first-child) {
  padding-left: 26px;
}

@media (max-width: 780px) {
  .spec:nth-child(2n) {
    border-right: none;
  }

  .spec:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line-dark);
  }

  .spec:nth-child(odd) {
    padding-left: 0;
  }
}

.spec__value {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 1.95rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.spec__value .stars {
  color: #ffb020;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
}

.spec__label {
  font-size: 0.86rem;
  color: var(--muted-dark);
}

/* ── Arguments ────────────────────────────────────────────────────── */

.args {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

@media (max-width: 900px) {
  .args {
    grid-template-columns: 1fr;
    gap: 26px;
  }
}

.arg {
  padding-top: 26px;
  border-top: 2px solid var(--text);
}

.arg h3 {
  margin-bottom: 10px;
}

.arg p {
  color: var(--muted);
  font-size: 0.99rem;
}

/* ── Prestations ──────────────────────────────────────────────────── */

.services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 980px) {
  .services {
    grid-template-columns: 1fr;
  }
}

.service {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 28px 28px;
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease, box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.service:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  border-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .service:hover {
    transform: none;
  }
}

.service__icon {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
  color: var(--brand);
  display: grid;
  place-items: center;
  margin-bottom: 22px;
}

.service h3 {
  margin-bottom: 10px;
}

.service > p {
  color: var(--muted);
  font-size: 0.99rem;
  margin-bottom: 22px;
}

.service ul {
  list-style: none;
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-top: 18px;
  display: grid;
  gap: 11px;
}

.service li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 11px;
  align-items: start;
  font-size: 0.94rem;
  color: var(--text);
}

.service li svg {
  margin-top: 4px;
  color: var(--brand);
}

/* ── Déroulé (vraie séquence : la numérotation porte l'ordre) ─────── */

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line-dark);
}

@media (max-width: 900px) {
  .steps {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .steps {
    grid-template-columns: 1fr;
  }
}

.step {
  padding: 32px 28px 34px 0;
  border-right: 1px solid var(--line-dark);
  position: relative;
}

.step:last-child {
  border-right: none;
}

.step:not(:first-child) {
  padding-left: 28px;
}

@media (max-width: 900px) {
  .step:nth-child(2n) {
    border-right: none;
  }

  .step:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line-dark);
  }

  .step:nth-child(odd) {
    padding-left: 0;
  }
}

@media (max-width: 560px) {
  .step {
    border-right: none;
    border-bottom: 1px solid var(--line-dark);
    padding-left: 0;
  }

  .step:last-child {
    border-bottom: none;
  }
}

.step__n {
  font-family: var(--display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--brand-light);
  margin-bottom: 16px;
}

.step h3 {
  margin-bottom: 9px;
}

.step p {
  color: var(--muted-dark);
  font-size: 0.96rem;
}

/* ── Avis ─────────────────────────────────────────────────────────── */

.reviews {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 48px;
  align-items: start;
}

@media (max-width: 980px) {
  .reviews {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

.rating {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 28px;
  box-shadow: var(--shadow);
  position: sticky;
  top: calc(var(--header) + 28px);
}

@media (max-width: 980px) {
  .rating {
    position: static;
  }
}

.rating__score {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.03em;
  font-size: 3.1rem;
  line-height: 1;
}

.rating__score small {
  font-size: 1.05rem;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0;
}

.rating__stars {
  color: #ffb020;
  font-size: 1.15rem;
  letter-spacing: 0.14em;
  margin: 12px 0 6px;
}

.rating__src {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--muted);
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.rating__themes {
  padding-top: 20px;
}

.rating__themes h4 {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  font-size: 0.87rem;
}

.chip b {
  color: var(--muted);
  font-weight: 500;
  font-size: 0.8rem;
}

.review-list {
  display: grid;
  gap: 18px;
}

.review {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 26px 22px;
}

.review__stars {
  color: #ffb020;
  font-size: 0.92rem;
  letter-spacing: 0.12em;
  margin-bottom: 14px;
}

.review blockquote {
  font-size: 1rem;
  color: var(--text);
  margin-bottom: 18px;
}

.review figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.review__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.88rem;
  flex: none;
}

.review__who b {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
}

.review__who span {
  font-size: 0.83rem;
  color: var(--muted);
}

.reviews__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-weight: 600;
  color: var(--brand);
  font-family: var(--display);
  font-size: 0.96rem;
}

.reviews__link:hover {
  text-decoration: underline;
}

/* ── Atelier (bandeau photo + texte) ──────────────────────────────── */

.workshop {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 64px;
}

@media (max-width: 900px) {
  .workshop {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

.workshop__points {
  display: grid;
  gap: 18px;
  margin-top: 30px;
}

.workshop__point {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 14px;
  align-items: start;
}

.workshop__point svg {
  margin-top: 3px;
  color: var(--brand);
}

.workshop__point b {
  font-weight: 600;
}

.workshop__point p {
  color: var(--muted);
  font-size: 0.99rem;
  margin-top: 2px;
}

/* ── Contact ──────────────────────────────────────────────────────── */

.contact-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 56px;
  align-items: start;
}

@media (max-width: 980px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.info-block {
  margin-bottom: 30px;
}

.info-block h4 {
  font-family: var(--display);
  font-size: 0.79rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-dark);
  margin-bottom: 10px;
}

.info-block p,
.info-block a {
  font-size: 1.04rem;
}

.info-block a {
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  transition: border-color 0.15s ease;
}

.info-block a:hover {
  border-bottom-color: #fff;
}

.info-block .phone-big {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  letter-spacing: -0.03em;
  border: none !important;
}

.hours {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.97rem;
}

.hours th,
.hours td {
  padding: 12px 0;
  border-bottom: 1px solid var(--line-dark);
  text-align: left;
  font-weight: 400;
}

.hours td {
  text-align: right;
  color: var(--muted-dark);
}

.hours tr:last-child th,
.hours tr:last-child td {
  border-bottom: none;
}

.hours tr.is-today th,
.hours tr.is-today td {
  color: #fff;
  font-weight: 600;
}

.hours tr.is-today th::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  margin-right: 9px;
  vertical-align: middle;
}

.map {
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--steel);
}

.map__box {
  position: relative;
  aspect-ratio: 16 / 11;
}

@media (max-width: 560px) {
  .map__box {
    aspect-ratio: 4 / 3;
  }
}

.map__box iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.map__load {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 28px;
  text-align: center;
  background-color: var(--steel);
  background-image: repeating-linear-gradient(
      to right,
      transparent 0 47px,
      rgba(255, 255, 255, 0.05) 47px 48px
    ),
    repeating-linear-gradient(
      to bottom,
      transparent 0 47px,
      rgba(255, 255, 255, 0.05) 47px 48px
    );
}

.map__load p {
  font-size: 0.92rem;
  color: var(--muted-dark);
  max-width: 40ch;
}

.map__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-top: 1px solid var(--line-dark);
  font-size: 0.93rem;
  color: var(--muted-dark);
}

.map__foot a {
  color: #fff;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.map__foot a:hover {
  text-decoration: underline;
}

/* ── Appel final ──────────────────────────────────────────────────── */

.cta {
  background: var(--brand-dark);
  color: #fff;
  padding: 84px 0;
  text-align: center;
}

.cta h2 {
  margin-bottom: 16px;
}

.cta p {
  max-width: 50ch;
  margin: 0 auto 34px;
  color: rgba(255, 255, 255, 0.86);
}

.cta .btn--primary {
  background: #fff;
  color: var(--brand);
  box-shadow: 0 8px 24px rgba(10, 18, 32, 0.22);
}

.cta .btn--primary:hover {
  background: #fdf3f1;
}

.cta__note {
  margin-top: 24px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
}

/* ── Pied de page ─────────────────────────────────────────────────── */

.footer {
  background: var(--ink);
  color: #fff;
  padding: 64px 0 34px;
  border-top: 1px solid var(--line-dark);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line-dark);
}

@media (max-width: 780px) {
  .footer__grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

.footer .logo__mark {
  background: #fff;
  color: var(--ink);
}

.footer .logo__sub {
  color: var(--muted-dark);
}

.footer__about {
  color: var(--muted-dark);
  font-size: 0.96rem;
  max-width: 40ch;
  margin-top: 18px;
}

.footer h4 {
  font-family: var(--display);
  font-size: 0.79rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-dark);
  margin-bottom: 14px;
}

.footer__links {
  display: grid;
  gap: 9px;
  font-size: 0.96rem;
}

.footer__links a:hover {
  color: var(--brand-light);
}

.footer__bottom {
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-size: 0.86rem;
  color: var(--muted-dark);
}

/* ── Barre d'action mobile ────────────────────────────────────────── */

.action-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  display: none;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  gap: 10px;
}

.action-bar .btn {
  flex: 1;
  padding: 14px 12px;
}

@media (max-width: 720px) {
  .action-bar {
    display: flex;
  }

  body {
    padding-bottom: 74px;
  }
}

/* ── Révélation au défilement ─────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(18px);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Séquence d'ouverture du hero */
.hero__text > * {
  animation: rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero__text > *:nth-child(1) {
  animation-delay: 0.05s;
}
.hero__text > *:nth-child(2) {
  animation-delay: 0.13s;
}
.hero__text > *:nth-child(3) {
  animation-delay: 0.21s;
}
.hero__text > *:nth-child(4) {
  animation-delay: 0.29s;
}
.hero__text > *:nth-child(5) {
  animation-delay: 0.37s;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero__text > * {
    animation: none;
  }
}

/* ── Lien d'évitement ─────────────────────────────────────────────── */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--brand);
  color: #fff;
  padding: 12px 18px;
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 600;
}

.skip:focus {
  left: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   INTERACTIONS DE DÉFILEMENT
   Tout ce qui suit est décoratif : la page reste complète et lisible
   si le JS ne tourne pas, et tout est neutralisé sous
   prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Fil de section dans l'en-tête ────────────────────────────────── */

/* Le libellé de la section traversée, repris de son data-flag. Il vient
   se loger entre le logo et la navigation, sans changer la hauteur de
   l'en-tête : la fenêtre est fixe, seul le texte glisse à l'intérieur. */
.secflag {
  --flag-h: 20px;
  height: var(--flag-h);
  overflow: hidden;
  position: relative;
  flex: 0 0 auto;
  /* Largeur figée : sans elle le conteneur se rétrécit sur le libellé
     entrant et tronque le sortant en pleine animation. */
  width: 16rem;
  padding-left: 20px;
  border-left: 1px solid var(--line);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}

.secflag.is-on {
  opacity: 1;
  transform: none;
}

.secflag__slot {
  display: block;
  font-family: var(--display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--brand);
  line-height: var(--flag-h);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Le libellé sortant part vers le haut, l'entrant monte depuis le bas :
   la relève se lit comme un compteur qui tourne. */
/* Sortant et entrant partagent EXACTEMENT la même durée et la même
   courbe : les deux libellés se déplacent comme une bande solidaire,
   séparés en permanence d'une hauteur de fenêtre. Deux réglages
   différents les désynchronisent et les font se chevaucher au milieu.
   Pas d'opacité non plus : l'overflow de la fenêtre suffit à couper,
   et un fondu laisse voir les deux textes l'un sur l'autre. */
.secflag__slot.is-out {
  position: absolute;
  inset: 0;
  animation: flag-out 0.42s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

.secflag__slot.is-in {
  animation: flag-in 0.42s cubic-bezier(0.65, 0, 0.35, 1);
}

@keyframes flag-out {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100%);
  }
}

@keyframes flag-in {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

/* Le fil demande ~256px : sous 1200 la ligne logo + nav + bouton d'appel
   n'a plus la place, on le retire plutôt que de comprimer le logo. */
@media (max-width: 1200px) {
  .secflag {
    display: none;
  }
}

/* ── Avancée de lecture ───────────────────────────────────────────── */

.progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: transparent;
}

.progress i {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  background: var(--brand);
  transform-origin: left center;
}

/* ── Lien de navigation de la section courante ────────────────────── */

.nav a {
  position: relative;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav a.is-current {
  color: var(--text);
}

.nav a.is-current::after {
  transform: scaleX(1);
}

/* ── En-tête au défilement ────────────────────────────────────────── */

.header {
  transition: box-shadow 0.25s ease, background-color 0.25s ease;
}

.header.is-stuck {
  box-shadow: 0 1px 0 var(--line), 0 6px 20px rgba(16, 24, 40, 0.07);
}

/* ── Étoiles qui se remplissent ───────────────────────────────────── */

.rating__stars {
  position: relative;
  display: inline-block;
}

.rating__stars-bg {
  color: var(--line);
}

.rating__stars-fill {
  position: absolute;
  inset: 0;
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  color: #ffb020;
  transition: width 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}

.rating.is-in .rating__stars-fill {
  width: var(--fill, 100%);
}

/* ── Cartes prestations : lueur sous le curseur ───────────────────── */

.service {
  position: relative;
  overflow: hidden;
}

/* La lueur suit --mx / --my, écrits par app.js au survol. */
.service::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    320px circle at var(--mx, 50%) var(--my, 0%),
    rgba(178, 58, 48, 0.08),
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.service:hover::before {
  opacity: 1;
}

/* Le contenu doit rester au-dessus de la lueur. */
.service > * {
  position: relative;
}

/* ── Étapes : le filet se trace à l'apparition ────────────────────── */

.step::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--brand-light);
  transition: width 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.25s;
}

.step:not(:first-child)::after {
  left: 28px;
}

.step.is-in::after {
  width: 34px;
}

@media (max-width: 900px) {
  .step:nth-child(odd)::after {
    left: 0;
  }
}

/* ── Retour en haut ───────────────────────────────────────────────── */

.totop {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 70;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-lift);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s,
    background-color 0.2s ease;
}

.totop.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.totop:hover {
  background: var(--brand);
}

.totop:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .totop {
    right: 16px;
    bottom: 16px;
  }
}

/* ── Mouvement réduit ─────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .secflag,
  .secflag__slot,
  .progress i,
  .nav a::after,
  .rating__stars-fill,
  .step::after,
  .totop,
  .service::before {
    transition: none;
    animation: none;
  }

  .secflag {
    opacity: 1;
    transform: none;
  }
}