:root {
  /* GK Perf : fond noir, rouge course, blanc. Mise en page asymétrique alignée à gauche ;
     une seule pièce forte, la courbe de banc de puissance en haut de l'accueil. */
  --noir: #101318;
  --carbone: #171b21;
  --trait: #2a3039;
  --acier: #a9afb8;
  --blanc: #f2f4f7;
  --rouge: #da1a22;
  --rouge-vif: #ff2e37;
  --f-display: "Saira", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Saira", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --entete: 4.25rem;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--noir);
  color: var(--blanc);
  font-family: var(--f-body);
  font-stretch: 100%;
  font-size: 1.0625rem;
  line-height: 1.6;
}
img, canvas { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--rouge-vif); outline-offset: 3px; }

.wrap { width: min(1180px, 100% - 2.5rem); margin-inline: auto; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--f-display);
  font-style: normal;
  font-weight: 800;
  font-stretch: 68%;
  line-height: 0.95;
  text-wrap: balance;
}
h1 { font-size: clamp(2.7rem, 8.6vw, 5.9rem); letter-spacing: -0.005em; }
h2 { font-size: clamp(2.05rem, 4.6vw, 3.2rem); }
h3 { font-size: 1.4rem; font-weight: 700; font-stretch: 80%; line-height: 1.1; }

.a-completer { text-decoration: underline dashed var(--rouge); text-underline-offset: 0.3em; }
.lien-rouge {
  color: var(--blanc);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--rouge);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}
.coordonnees dd .lien-rouge { display: inline-block; margin-top: 0.4rem; font-size: 0.95rem; text-decoration: underline; text-decoration-color: var(--rouge); }
.atelier p + p { margin-top: 0.6rem; }
.sr-titre {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- En-tête ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--noir);
  border-bottom: 1px solid var(--trait);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--entete);
}
.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-family: var(--f-display);
  font-style: normal;
  font-weight: 900;
  font-stretch: 70%;
  font-size: 1.85rem;
  line-height: 1;
}
.logo-gk {
  background: var(--rouge);
  padding: 0.16em 0.55em 0.14em 0.45em;
  clip-path: polygon(16% 0, 100% 0, 84% 100%, 0 100%);
}
.logo-perf { padding-left: 0.12em; letter-spacing: 0.02em; }
.logo img { display: block; height: 54px; width: auto; }
.site-footer .logo img { height: 76px; }

.nav { display: flex; align-items: center; gap: clamp(0.9rem, 2.6vw, 2rem); }
.nav a:not(.btn) { text-decoration: none; font-weight: 500; color: var(--acier); }
.nav a:not(.btn):hover { color: var(--blanc); }
.nav a[aria-current="page"] {
  color: var(--blanc);
  text-decoration: underline;
  text-decoration-color: var(--rouge);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.5em;
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.6rem 1.4rem;
  border: 2px solid transparent;
  border-radius: 2px;
  font-family: var(--f-display);
  font-style: normal;
  font-weight: 700;
  font-stretch: 85%;
  font-size: 1.12rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.btn-rouge { background: var(--rouge); color: var(--blanc); }
.btn-rouge:hover { background: var(--rouge-vif); }
.btn-ligne { background: transparent; color: var(--blanc); border-color: var(--trait); }
.btn-ligne:hover { border-color: var(--blanc); }
.nav .btn { min-height: 2.5rem; padding: 0.45rem 1rem; font-size: 1rem; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ---------- Accueil : en-tête et courbe ---------- */
.hero { padding-top: clamp(2.5rem, 7vw, 5rem); border-bottom: 1px solid var(--trait); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 1.75rem 4rem;
  align-items: end;
}
.hero { padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.hero .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 2rem 4rem; }
.hero-logo { display: block; width: 100%; max-width: 440px; height: auto; }
.hero-photo { position: relative; margin: 0; }
.hero-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  max-height: 640px;
  object-fit: cover;
  border: 1px solid var(--trait);
}
.hero-photo figcaption, .service-photo figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0.45rem 0.85rem;
  background: rgba(0, 0, 0, 0.75);
  border-left: 3px solid var(--rouge);
  font-size: 0.9rem;
  font-weight: 600;
}

/* Réalisations */
.galerie {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.25rem;
}
.galerie figure { margin: 0; }
.galerie img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 1px solid var(--trait);
}
.galerie figcaption { padding-top: 0.75rem; font-weight: 600; }

/* Menu */
.nav-liens { display: flex; align-items: center; gap: clamp(0.9rem, 2.6vw, 2rem); }
.menu-btn {
  display: none;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.4rem 0.9rem;
  background: transparent;
  color: var(--blanc);
  border: 2px solid var(--trait);
  border-radius: 2px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* Carrousel des réalisations */
.carrousel-piste {
  list-style: none;
  margin: 0;
  padding: 0 0 0.25rem;
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.carrousel-piste::-webkit-scrollbar { display: none; }
.diapo { flex: 0 0 calc((100% - 3 * 1.25rem) / 4.3); scroll-snap-align: start; }
.photo-ouvrir { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.photo-ouvrir img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 1px solid var(--trait);
  transition: border-color 0.15s;
}
.photo-ouvrir:hover img { border-color: var(--rouge); }
.legende { margin-top: 0.7rem; font-weight: 600; }
.carrousel-bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.75rem; }
.carrousel-fleches { display: flex; gap: 0.5rem; }
.fleche, .v-btn {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  background: transparent;
  color: var(--blanc);
  border: 2px solid var(--trait);
  border-radius: 2px;
  cursor: pointer;
}
.fleche:hover:not(:disabled), .v-btn:hover { border-color: var(--blanc); }
.fleche:disabled { opacity: 0.35; cursor: default; }

/* Avis Google */
.bloc-avis { padding-block: clamp(2.5rem, 6vw, 3.5rem); border-bottom: 1px solid var(--trait); }
.avis { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 3rem; }
.avis-note { display: flex; align-items: center; gap: 1rem; }
.avis-chiffre {
  font-family: var(--f-display);
  font-style: normal;
  font-weight: 900;
  font-stretch: 70%;
  font-size: clamp(3.2rem, 7vw, 4.4rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.avis-chiffre span { font-size: 0.42em; color: var(--acier); font-weight: 700; }
.etoiles { display: flex; gap: 2px; color: var(--rouge); }
.avis-texte { flex: 1 1 18rem; }
.avis-texte h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.avis-texte p { color: var(--acier); margin-top: 0.5rem; }

/* Page Réalisations */
.galerie-page {
  list-style: none;
  margin: 0 0 clamp(3.5rem, 8vw, 6rem);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.75rem 1.25rem;
}

/* Visionneuse plein écran */
.visionneuse {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 4rem 1.25rem 2rem;
  background: rgba(0, 0, 0, 0.95);
}
.visionneuse[hidden] { display: none; }
.v-figure { margin: 0; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.v-img { display: block; max-width: 100%; max-height: calc(100vh - 9rem); object-fit: contain; }
.v-legende { margin-top: 0.8rem; font-weight: 600; }
.v-fermer { position: absolute; top: 0.75rem; right: 0.75rem; }
.v-compteur { position: absolute; top: 1.4rem; left: 1.25rem; margin: 0; color: var(--acier); font-variant-numeric: tabular-nums; }
.v-btn { background: rgba(0, 0, 0, 0.6); }

/* Photo dans la page Services */
.service-photo { position: relative; margin: 2rem 0 0; }
.service-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 78%;
  border: 1px solid var(--trait);
}
.service .banc { margin-top: 2rem; }
.service .banc canvas { height: 240px; }
.hero h1 { max-width: 15ch; font-size: clamp(2.3rem, 4.4vw, 3.6rem); }
.hero .lead { margin-top: 1.25rem; color: var(--acier); font-size: clamp(1.05rem, 1.6vw, 1.2rem); max-width: 48ch; }
.hero .actions { margin-top: 1.75rem; }

.banc { margin: clamp(2.25rem, 5vw, 3.75rem) 0 0; }
.banc canvas { width: 100%; height: clamp(200px, 27vw, 320px); }
.banc figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.6rem;
  padding: 0.95rem 0 1.15rem;
  border-top: 1px solid var(--trait);
  color: var(--acier);
  font-size: 0.92rem;
}
.trace { display: inline-flex; align-items: center; gap: 0.55rem; }
.trace::before { content: ""; width: 1.6rem; height: 3px; background: var(--acier); }
.trace-rouge::before { background: var(--rouge); }
.banc .indicatif { margin-left: auto; }

/* ---------- Blocs ---------- */
.bloc { padding-block: clamp(3.5rem, 8vw, 6rem); }
.bloc-sombre { background: var(--carbone); border-block: 1px solid var(--trait); }
.bloc-tete {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem 4rem;
  align-items: end;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.bloc-tete p { color: var(--acier); max-width: 52ch; }

/* Liste des services (accueil) */
.liste-services { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--trait); }
.liste-services a {
  position: relative;
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr) minmax(0, 1.35fr) auto;
  gap: 0.4rem 2.25rem;
  align-items: center;
  padding: 1.25rem 0.25rem;
  border-bottom: 1px solid var(--trait);
  text-decoration: none;
}
.liste-services a::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 1.5rem;
  bottom: 1.5rem;
  width: 5px;
  background: var(--trait);
  transform: skewX(-14deg);
  transition: background-color 0.15s;
}
.liste-services a::before { display: none; }
.vignette {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--trait);
  transition: border-color 0.15s;
}
.vignette-vide { aspect-ratio: 4 / 3; }
.liste-services a:hover .vignette, .liste-services a:focus-visible .vignette { border-color: var(--rouge); }
.liste-services .nom {
  font-family: var(--f-display);
  font-style: normal;
  font-weight: 800;
  font-stretch: 70%;
  font-size: clamp(1.65rem, 3vw, 2.25rem);
  line-height: 1;
}
.liste-services .desc { color: var(--acier); }
.liste-services .voir {
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: underline;
  text-decoration-color: var(--rouge);
  text-underline-offset: 0.35em;
}

/* Texture carbone */
.carbone-tex {
  background-color: #121417;
  background-image:
    linear-gradient(27deg, #0b0c0e 5px, transparent 5px),
    linear-gradient(207deg, #0b0c0e 5px, transparent 5px),
    linear-gradient(27deg, #1a1c20 5px, transparent 5px),
    linear-gradient(207deg, #1a1c20 5px, transparent 5px),
    linear-gradient(90deg, #15171a 10px, transparent 10px),
    linear-gradient(#17191c 25%, #131518 25%, #131518 50%, transparent 50%, transparent 75%, #1b1d21 75%, #1b1d21);
  background-size: 20px 20px;
  background-position: 0 5px, 10px 0, 0 10px, 10px 5px, 0 0, 0 0;
}

/* Illustrations */
.illu-svg { width: 100%; height: 100%; max-width: 320px; max-height: 200px; overflow: visible; }
.illu-svg .l { fill: none; stroke: var(--blanc); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.illu-svg .r { fill: none; stroke: var(--rouge); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.illu-svg .thin { stroke-width: 1.25; }
.illu-svg .epais { stroke-width: 4.5; }
.illu-svg .tirets { stroke-dasharray: 5 6; }
.illu-svg .fill-noir { fill: var(--noir); }
.illu-svg .fill-rouge { fill: var(--rouge); stroke: none; }
.illu-svg .fill-rouge-faible { fill: rgba(218, 26, 34, 0.28); }
.illu-svg .t { fill: var(--acier); stroke: none; font-family: var(--f-body); font-weight: 600; font-size: 10px; text-anchor: middle; }
.illu-svg .tr { fill: var(--rouge); }
.illu-svg .gras { font-style: normal; font-weight: 800; font-size: 13px; letter-spacing: 0.04em; }

/* Tuiles des services (accueil) */
.tuiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--trait);
  border: 1px solid var(--trait);
}
.tuile {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--noir);
  text-decoration: none;
}
.tuile-grande { grid-column: span 2; }
.tuile-illu {
  display: grid;
  place-items: center;
  height: 210px;
  padding: 1.5rem;
  border-bottom: 1px solid var(--trait);
}
.tuile-grande .tuile-illu .illu-svg { max-width: 360px; }
.tuile-texte { flex: 1; display: flex; flex-direction: column; gap: 0.55rem; padding: 1.4rem 1.5rem 1.6rem; }
.tuile h3 { font-size: clamp(1.55rem, 2.4vw, 1.95rem); font-weight: 800; font-stretch: 70%; }
.tuile p { color: var(--acier); max-width: 52ch; }
.tuile .voir {
  margin-top: auto;
  padding-top: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: underline;
  text-decoration-color: var(--rouge);
  text-underline-offset: 0.35em;
}
.tuile::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--rouge);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease-out;
}
.tuile:hover::after, .tuile:focus-visible::after { transform: scaleX(1); }
.tuile:focus-visible { outline-offset: -3px; }

/* Panneau d'illustration (page Services) */
.illu-panneau {
  display: grid;
  place-items: center;
  height: 230px;
  margin-top: 2rem;
  padding: 1.5rem;
  border: 1px solid var(--trait);
}

/* FAQ */
.faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 2rem 4rem; }
.faq-liste { border-top: 1px solid var(--trait); }
.faq details { border-bottom: 1px solid var(--trait); }
.faq summary {
  display: flex;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.15rem 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--f-display);
  font-style: normal;
  font-weight: 700;
  font-stretch: 80%;
  font-size: 1.3rem;
  line-height: 1.2;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 0.3em;
  background:
    linear-gradient(var(--rouge), var(--rouge)) center / 100% 2px no-repeat,
    linear-gradient(var(--rouge), var(--rouge)) center / 2px 100% no-repeat;
  transition: transform 0.2s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--blanc); }
.faq details p { color: var(--acier); padding-bottom: 1.25rem; max-width: 62ch; }

/* Étapes */
.etapes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
}
.etapes li { border-top: 2px solid var(--trait); padding-top: 1.1rem; }
.etape-num {
  display: block;
  font-family: var(--f-display);
  font-style: normal;
  font-weight: 900;
  font-stretch: 70%;
  font-size: 3.2rem;
  line-height: 1;
  color: var(--rouge);
  font-variant-numeric: tabular-nums;
}
.etapes h3 { margin: 0.7rem 0 0.5rem; }
.etapes p { color: var(--acier); font-size: 0.98rem; }

/* Infos pour un devis */
.infos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 2rem 4rem; }
.infos-texte p { color: var(--acier); margin-top: 1.1rem; max-width: 44ch; }
.infos-texte .btn { margin-top: 1.75rem; }
.champs-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--trait); }
.champs-liste li {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: 0.25rem 1.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--trait);
}
.champs-liste strong { font-weight: 600; }
.champs-liste span { color: var(--acier); }

/* Bandeau atelier */
.atelier { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.atelier p { color: var(--acier); margin-top: 0.9rem; max-width: 46ch; }
.tel {
  display: block;
  font-family: var(--f-display);
  font-style: normal;
  font-weight: 800;
  font-stretch: 70%;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1;
  text-decoration: none;
  margin-bottom: 1rem;
  font-variant-numeric: tabular-nums;
}

.zones {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  max-width: 46rem;
}
.zones li { display: grid; align-content: start; gap: 0.2rem; padding-top: 0.8rem; border-top: 2px solid var(--trait); }
.zones li:first-child { border-top-color: var(--rouge); }
.zones strong { font-family: var(--f-display); font-style: normal; font-weight: 800; font-stretch: 75%; font-size: 1.35rem; line-height: 1.1; }
.zones span { color: var(--acier); font-size: 0.92rem; }
.zones a { color: var(--blanc); font-weight: 600; text-decoration: none; }
.zones a:hover { text-decoration: underline; text-decoration-color: var(--rouge); }
@media (max-width: 640px) { .zones { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Pied de page ---------- */
.site-footer { border-top: 1px solid var(--trait); padding-block: 2.75rem 2rem; color: var(--acier); font-size: 0.95rem; }
.footer-grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr; gap: 2rem; }
.site-footer h3 { color: var(--blanc); font-size: 1.15rem; margin-bottom: 0.6rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--blanc); }
.site-footer .logo { font-size: 1.6rem; color: var(--blanc); margin-bottom: 0.9rem; }
.copyright { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--trait); font-size: 0.85rem; }

/* ---------- Page Services ---------- */
.page-tete { padding-block: clamp(2.75rem, 6vw, 4.5rem) clamp(1.75rem, 4vw, 2.75rem); }
.page-tete p { color: var(--acier); margin-top: 1.25rem; max-width: 56ch; font-size: clamp(1.05rem, 1.6vw, 1.2rem); }

.sous-nav {
  position: sticky;
  top: var(--entete);
  z-index: 10;
  background: var(--noir);
  border-block: 1px solid var(--trait);
}
.sous-nav ul {
  display: flex;
  gap: 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0.85rem 0;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}
.sous-nav ul::-webkit-scrollbar { display: none; }
.sous-nav a { text-decoration: none; color: var(--acier); font-weight: 500; }
.sous-nav a:hover { color: var(--blanc); }
.sous-nav .court { display: none; }
@media (max-width: 560px) {
  .sous-nav ul { gap: 1.1rem; justify-content: space-between; }
  .sous-nav a { font-size: 0.95rem; }
  .sous-nav .long { display: none; }
  .sous-nav .court { display: inline; }
}
@media (max-width: 380px) {
  .sous-nav ul { gap: 0.8rem; }
  .sous-nav a { font-size: 0.88rem; }
}

.service {
  padding-block: clamp(3rem, 7vw, 5rem);
  border-bottom: 1px solid var(--trait);
  scroll-margin-top: calc(var(--entete) + 3.25rem);
}
.service-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem 4.5rem; }
.service h2 { display: flex; align-items: flex-start; gap: 0.85rem; }
.service h2::before {
  content: "";
  flex: none;
  width: 0.32em;
  height: 0.82em;
  margin-top: 0.06em;
  background: var(--rouge);
  transform: skewX(-14deg);
}
.service .intro { color: var(--acier); margin-top: 1.15rem; max-width: 50ch; }
.service .btn { margin-top: 1.75rem; }

.puces { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--trait); }
.puces li { position: relative; padding: 0.8rem 0 0.8rem 1.5rem; border-bottom: 1px solid var(--trait); }
.puces li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.45rem;
  width: 0.65rem;
  height: 2px;
  background: var(--rouge);
}
.note {
  margin-top: 1.5rem;
  padding: 1rem 1.15rem;
  background: var(--carbone);
  border-left: 3px solid var(--rouge);
  color: var(--acier);
  font-size: 0.96rem;
}
.note strong { color: var(--blanc); font-weight: 600; }

/* ---------- Page Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 3rem 4.5rem;
  padding-bottom: clamp(3.5rem, 8vw, 6rem);
}
fieldset { border: 0; padding: 0; margin: 0 0 2rem; min-width: 0; }
legend {
  padding: 0;
  margin-bottom: 1rem;
  font-family: var(--f-display);
  font-style: normal;
  font-weight: 700;
  font-stretch: 80%;
  font-size: 1.4rem;
}
.champs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.1rem 1.25rem; }
.champ { display: grid; gap: 0.4rem; align-content: start; }
.champ.plein { grid-column: 1 / -1; }
label { font-weight: 600; font-size: 0.95rem; }
.optionnel { color: var(--acier); font-weight: 400; }
input, select, textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.85rem;
  font: inherit;
  font-size: 1rem;
  color: var(--blanc);
  background: var(--carbone);
  border: 1px solid var(--trait);
  border-radius: 2px;
}
input::placeholder, textarea::placeholder { color: #6f747c; }
input:hover, select:hover, textarea:hover { border-color: #4a4e55; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0; border-color: var(--rouge-vif); }
textarea { min-height: 8rem; resize: vertical; }
[aria-invalid="true"] { border-color: var(--rouge-vif); }
.erreur { color: #ff7a80; font-size: 0.9rem; }
.form-bas { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.form-bas p { color: var(--acier); font-size: 0.92rem; max-width: 40ch; }

.pret { margin-top: 2rem; padding: 1.4rem; border: 1px solid var(--rouge); background: var(--carbone); }
.pret:focus { outline: none; }
.pret pre {
  margin: 1rem 0 1.25rem;
  white-space: pre-wrap;
  font-family: var(--f-body);
  font-size: 0.95rem;
  color: var(--acier);
}
.pret .statut { margin-top: 0.85rem; color: var(--acier); font-size: 0.92rem; }

.coordonnees { align-self: start; position: sticky; top: calc(var(--entete) + 1.5rem); }
.coordonnees dl { margin: 0; border-top: 1px solid var(--trait); }
.coordonnees dt { color: var(--acier); font-size: 0.9rem; padding-top: 1rem; }
.coordonnees dd { margin: 0.15rem 0 0; padding-bottom: 1rem; border-bottom: 1px solid var(--trait); font-weight: 600; }
.coordonnees dd a { text-decoration: none; }
.coordonnees .tel { font-size: clamp(1.9rem, 3.6vw, 2.5rem); margin: 0; }

/* ---------- Écrans étroits ---------- */
@media (max-width: 900px) {
  .hero-grid, .bloc-tete, .infos, .service-grid, .contact-grid, .faq { grid-template-columns: minmax(0, 1fr); }
  .tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .liste-services a { grid-template-columns: 9rem minmax(0, 1fr) minmax(0, 1.3fr); }
  .liste-services .voir { display: none; }
  .hero .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-logo { max-width: 300px; }
  .hero-photo img { max-height: 480px; }
  .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .diapo { flex-basis: calc((100% - 1.25rem) / 2.3); }
  .galerie-page { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .galerie li:first-child { grid-column: span 2; }
  .galerie li:first-child img { aspect-ratio: 4 / 3; object-position: 50% 60%; }
  .etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
  .coordonnees { position: static; }
}
@media (max-width: 640px) {
  .wrap { width: calc(100% - 2rem); }
  .diapo { flex-basis: 72%; }
  .galerie-page { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1rem; }
  .visionneuse { grid-template-columns: minmax(0, 1fr); padding: 4rem 0.75rem 5.5rem; }
  .v-prec, .v-suiv { position: absolute; bottom: 1.25rem; }
  .v-prec { left: calc(50% - 3.5rem); }
  .v-suiv { right: calc(50% - 3.5rem); }
  .v-img { max-height: calc(100vh - 12rem); }
  .liste-services a { grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.35rem 1rem; align-items: start; padding: 1rem 0; }
  .liste-services .vignette { grid-row: span 2; }
  .liste-services .nom { font-size: 1.45rem; }
  .liste-services .desc { font-size: 0.95rem; }
  .liste-services .voir { display: none; }
  .tuiles { grid-template-columns: minmax(0, 1fr); }
  .tuile-grande { grid-column: auto; }
  .tuile-illu { height: 180px; }
  .illu-panneau { height: 190px; }
  .faq summary { font-size: 1.2rem; }
  .champs-liste li { grid-template-columns: minmax(0, 1fr); }
  .champs { grid-template-columns: minmax(0, 1fr); }
  .banc .indicatif { margin-left: 0; }
}
@media (max-width: 420px) {
  .etapes { grid-template-columns: minmax(0, 1fr); }
  .site-header .wrap { gap: 0.5rem; }
  .logo img { height: 46px; }
  .nav { gap: 0.7rem; }
  .nav a:not(.btn) { font-size: 0.95rem; }
  .nav .btn { padding: 0.4rem 0.7rem; font-size: 0.95rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ---------- File Service ---------- */
.depot {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  padding: 2.25rem 1.25rem;
  border: 2px dashed #4a4e55;
  border-radius: 2px;
  background: var(--carbone);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.depot input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.depot:hover, .depot.survol { border-color: var(--rouge); }
.depot.survol { background: #1d1012; }
.depot:focus-within { outline: 2px solid var(--rouge-vif); outline-offset: 3px; }
.depot.a-fichier { border-style: solid; border-color: var(--rouge); }
.depot-titre { font-family: var(--f-display); font-style: normal; font-weight: 700; font-stretch: 80%; font-size: 1.3rem; line-height: 1.2; }
.depot-info { color: var(--acier); font-size: 0.92rem; }
.depot-choisi { margin-top: 0.5rem; padding: 0.35rem 0.75rem; background: var(--noir); border-left: 3px solid var(--rouge); font-weight: 600; word-break: break-all; }
.cache-robot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.accord { display: flex; align-items: flex-start; gap: 0.75rem; margin: 0 0 1.5rem; font-weight: 400; color: var(--acier); cursor: pointer; }
.accord input { flex: none; width: 1.25rem; height: 1.25rem; min-height: 0; margin-top: 0.2rem; accent-color: var(--rouge); }
.fs-erreur { margin-bottom: 1.25rem; padding: 0.75rem 1rem; border-left: 3px solid var(--rouge-vif); background: var(--carbone); }
.progression { margin-top: 1.5rem; }
.progression-barre { height: 8px; background: var(--carbone); border: 1px solid var(--trait); overflow: hidden; }
.progression-barre span { display: block; height: 100%; width: 0; background: var(--rouge); transition: width 0.2s; }
.progression p { margin-top: 0.5rem; color: var(--acier); font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.fs-etapes { list-style: none; margin: 0 0 1.5rem; padding: 0; counter-reset: etape; border-top: 1px solid var(--trait); }
.fs-etapes li { counter-increment: etape; display: grid; grid-template-columns: 2.25rem 1fr; column-gap: 0.75rem; padding: 1rem 0; border-bottom: 1px solid var(--trait); }
.fs-etapes li::before {
  content: counter(etape);
  grid-row: span 2;
  font-family: var(--f-display);
  font-style: normal;
  font-weight: 900;
  font-stretch: 70%;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--rouge);
}
.fs-etapes strong { font-weight: 600; }
.fs-etapes span { color: var(--acier); font-size: 0.95rem; }
.fs-grid .coordonnees .note { margin-bottom: 1.5rem; }


/* ---------- Autotuner : formules ---------- */
.formules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  padding-bottom: clamp(3rem, 7vw, 5rem);
}
.formule {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--carbone);
  border: 1px solid var(--trait);
  border-top: 3px solid var(--trait);
}
.formule:first-child { border-top-color: var(--rouge); }
.formule-pour { color: var(--acier); margin-top: -0.4rem; }
.formule-logo { display: flex; align-items: center; justify-content: center; height: 4.5rem; padding: 0.75rem 1.1rem; background: #fff; border-radius: 10px; }
.formule-logo img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
.formule .puces { margin-bottom: 0.5rem; }
.formule .btn { margin-top: auto; align-self: flex-start; }
@media (max-width: 900px) { .formules { grid-template-columns: minmax(0, 1fr); } }

/* Bandeau Master Autotuner */
.master {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.5rem 3rem;
  margin-bottom: 1.25rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--rouge);
  background: linear-gradient(90deg, rgba(218, 26, 34, 0.14), rgba(218, 26, 34, 0) 70%), var(--carbone);
}
.master h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
.master-texte p { color: var(--acier); margin-top: 0.75rem; max-width: 62ch; }
.master-chiffre {
  display: grid;
  justify-items: center;
  text-align: center;
  font-family: var(--f-display);
  font-style: normal;
  font-weight: 900;
  font-stretch: 70%;
  font-size: clamp(4rem, 9vw, 6rem);
  line-height: 0.9;
  color: var(--rouge);
  font-variant-numeric: tabular-nums;
}
.master-chiffre .chiffre-plus { font: inherit; color: inherit; white-space: nowrap; }
.master-chiffre span {
  max-width: 13ch;
  margin-top: 0.4rem;
  font-family: var(--f-body);
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-size: 0.9rem;
  line-height: 1.3;
  color: var(--blanc);
}
@media (max-width: 640px) {
  .master { grid-template-columns: minmax(0, 1fr); }
  .master-chiffre { justify-items: start; text-align: left; }
}

/* ---------- Menu « Services » déroulant ---------- */
.nav-deroulant { display: flex; }
.nav-services {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0;
  background: none;
  border: 0;
  color: var(--acier);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
.nav-services:hover, .nav-services[aria-expanded="true"] { color: var(--blanc); }
.nav-services.actif {
  color: var(--blanc);
  text-decoration: underline;
  text-decoration-color: var(--rouge);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.5em;
}
.nav-services svg { transition: transform 0.2s; }
.nav-services[aria-expanded="true"] svg { transform: rotate(180deg); }
.mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 2rem 0 1.5rem;
  background: var(--noir);
  border-top: 1px solid var(--trait);
  border-bottom: 2px solid var(--rouge);
  box-shadow: 0 30px 50px rgba(0, 0, 0, 0.7);
}
.mega[hidden] { display: none; }
.mega-grille {
  width: min(1180px, 100% - 2.5rem);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem 2.5rem;
}
.nav .mega a.mega-titre {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--blanc);
  font-family: var(--f-display);
  font-style: normal;
  font-weight: 700;
  font-stretch: 80%;
  font-size: 1.25rem;
  line-height: 1.1;
}
.nav .mega a.mega-titre svg { flex: none; color: var(--rouge); }
.nav .mega a.mega-titre:hover { color: var(--rouge-vif); }
.mega ul { list-style: none; margin: 0.85rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.nav .mega ul a { color: var(--acier); font-weight: 400; font-size: 0.95rem; }
.nav .mega ul a:hover { color: var(--blanc); text-decoration: underline; text-decoration-color: var(--rouge); text-underline-offset: 0.25em; }
.nav .mega a.mega-tout {
  display: block;
  width: min(1180px, 100% - 2.5rem);
  margin: 1.75rem auto 0;
  padding-top: 1rem;
  border-top: 1px solid var(--trait);
  color: var(--blanc);
  font-weight: 600;
}

/* ---------- Navigation : liens toujours visibles ---------- */
.menu-btn { display: none; }
@media (max-width: 1140px) {
  .nav { gap: 1rem; }
  .nav-liens { gap: 1.15rem; }
  .nav a:not(.btn), .nav-services { font-size: 0.95rem; }
  .nav .btn { padding: 0.45rem 0.85rem; font-size: 0.95rem; }
  .logo img { height: 46px; }
}
@media (max-width: 900px) {
  :root { --entete: 7.25rem; }
  .site-header .wrap { flex-wrap: wrap; min-height: 0; padding-top: 0.6rem; row-gap: 0; }
  .nav { display: contents; }
  .logo { order: 1; }
  .nav > .btn { order: 2; }
  .nav-liens {
    order: 3;
    flex: 1 0 100%;
    margin-top: 0.6rem;
    padding: 0.75rem 0 0.8rem;
    border-top: 1px solid var(--trait);
    gap: 1.4rem;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .nav-liens::-webkit-scrollbar { display: none; }
  .nav-liens > a, .nav-services { flex: none; white-space: nowrap; }
  .nav a[aria-current="page"], .nav-services.actif { text-underline-offset: 0.35em; }
  .mega { max-height: calc(100vh - var(--entete)); overflow-y: auto; }
  .mega-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1.5rem; }
}
@media (max-width: 620px) {
  :root { --entete: 0px; }
  .site-header { position: relative; }
  .nav-liens { flex-wrap: wrap; overflow: visible; gap: 0.55rem 1.15rem; }
  .mega { max-height: none; overflow: visible; }
  .mega-grille { grid-template-columns: minmax(0, 1fr); }
}

.depot-petit { padding: 1.4rem 1rem; }
.depot-petit .depot-titre { font-size: 1.15rem; }
legend .optionnel { font-family: var(--f-body); font-style: normal; font-weight: 400; font-size: 0.95rem; }

/* ---------- Bouton WhatsApp ---------- */
.whatsapp {
  position: fixed;
  right: 1.25rem;
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.15rem 0.7rem 0.9rem;
  background: #25d366;
  color: #ffffff;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.15s, background-color 0.15s;
}
.whatsapp:hover { background: #1ebe5a; transform: translateY(-2px); }
.whatsapp:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }
@media (max-width: 640px) {
  .whatsapp { right: 1rem; bottom: max(1rem, env(safe-area-inset-bottom)); width: 3.5rem; height: 3.5rem; padding: 0; justify-content: center; }
  .whatsapp span { display: none; }
  .whatsapp svg { width: 30px; height: 30px; }
  .site-footer { padding-bottom: 5.5rem; }
}

/* ---------- Pages locales ---------- */
.service-ville { border-top: 1px solid var(--trait); }
.service-ville .intro + .intro { margin-top: 0.75rem; }
.ville-actions { margin-top: 1.75rem; }
.service-ville .service-photo img { aspect-ratio: 4 / 3; object-position: 50% 55%; }
.atouts { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.atouts li { display: grid; gap: 0.2rem; padding: 1rem; border: 1px solid var(--trait); }
.atouts strong { font-family: var(--f-display); font-style: normal; font-weight: 800; font-stretch: 75%; font-size: 1.6rem; line-height: 1; color: var(--rouge); }
.atouts span { color: var(--acier); font-size: 0.92rem; }
@media (max-width: 420px) { .atouts { grid-template-columns: minmax(0, 1fr); } }

h1 { overflow-wrap: break-word; }
.fil + h1 { font-size: clamp(2.3rem, 5.5vw, 4.2rem); max-width: 22ch; }
@media (max-width: 640px) { h1 { hyphens: auto; } }
@media (max-width: 420px) { h1, .fil + h1 { font-size: 2.35rem; } }

/* Rendez-vous */
.label-groupe { font-weight: 600; font-size: 0.95rem; }
.choix { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.choix-option {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0.6rem 1rem;
  background: var(--carbone);
  border: 1px solid var(--trait);
  border-radius: 2px;
  font-weight: 500;
  cursor: pointer;
}
.choix-option input { width: 1.1rem; height: 1.1rem; min-height: 0; margin: 0; accent-color: var(--rouge); }
.choix-option:has(input:checked) { border-color: var(--rouge); }
.aide { margin-top: 0.9rem; color: var(--acier); font-size: 0.9rem; }
input[type="date"] { color-scheme: dark; }

/* ---------- Conseils ---------- */
.fil { margin-bottom: 0.9rem; font-size: 0.95rem; }
.fil a { color: var(--acier); text-decoration: underline; text-decoration-color: var(--rouge); text-underline-offset: 0.3em; }
.article { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 2.5rem 4rem; align-items: start; padding-bottom: clamp(2.5rem, 6vw, 4rem); }
.article-corps { max-width: 44rem; }
.article-corps .chapo { font-size: clamp(1.1rem, 1.8vw, 1.25rem); color: var(--blanc); }
.article-corps h2 { font-size: clamp(1.6rem, 3vw, 2rem); margin: 2.25rem 0 0.9rem; }
.article-corps p, .article-corps li { color: #c9ccd1; }
.article-corps p + p { margin-top: 0.9rem; }
.article-corps ul, .article-corps ol { margin: 0; padding-left: 1.25rem; display: grid; gap: 0.6rem; }
.article-corps li::marker { color: var(--rouge); font-weight: 700; }
.article-corps strong { color: var(--blanc); }
.article-cta { position: sticky; top: calc(var(--entete) + 1.5rem); padding: 1.5rem; background: var(--carbone); border: 1px solid var(--trait); border-top: 3px solid var(--rouge); }
.article-cta h2 { font-size: 1.5rem; }
.article-cta p { color: var(--acier); margin-top: 0.75rem; font-size: 0.95rem; }
.article-cta .actions { margin-top: 1.25rem; flex-direction: column; align-items: stretch; }
.article-tel { font-size: 0.9rem; }
.article-tel a { color: var(--blanc); font-weight: 700; }
.autres-articles { padding-bottom: clamp(3.5rem, 8vw, 6rem); }
.autres-articles h2 { font-size: 1.6rem; margin-bottom: 1rem; }
.autres-articles ul, .conseils-accueil { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--trait); }
.autres-articles li a { display: block; padding: 0.9rem 0; border-bottom: 1px solid var(--trait); text-decoration: none; font-weight: 600; }
.autres-articles li a:hover, .conseils-accueil a:hover strong { color: var(--rouge-vif); }
.conseils-accueil { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
.conseils-accueil a { display: grid; gap: 0.3rem; padding: 1.1rem 0; border-bottom: 1px solid var(--trait); text-decoration: none; }
.conseils-accueil strong { font-family: var(--f-display); font-style: normal; font-weight: 800; font-stretch: 75%; font-size: 1.35rem; line-height: 1.15; }
.conseils-accueil span { color: var(--acier); font-size: 0.95rem; }
.conseils-liste { list-style: none; margin: 0 0 clamp(3.5rem, 8vw, 6rem); padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.carte-conseil { display: flex; flex-direction: column; gap: 0.6rem; height: 100%; padding: 1.5rem; background: var(--carbone); border: 1px solid var(--trait); border-top: 3px solid var(--trait); text-decoration: none; transition: border-color 0.15s; }
.carte-conseil:hover { border-top-color: var(--rouge); }
.carte-conseil h2 { font-size: clamp(1.45rem, 2.6vw, 1.8rem); }
.carte-conseil p { color: var(--acier); }
.carte-conseil .voir { margin-top: auto; padding-top: 0.5rem; font-weight: 600; text-decoration: underline; text-decoration-color: var(--rouge); text-underline-offset: 0.35em; }
@media (max-width: 900px) {
  .article { grid-template-columns: minmax(0, 1fr); }
  .article-cta { position: static; }
  .conseils-accueil, .conseils-liste { grid-template-columns: minmax(0, 1fr); }
}

/* Langue */
.nav a.lang {
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--trait);
  border-radius: 2px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--acier);
}
.nav a.lang:hover { color: var(--blanc); border-color: var(--blanc); }
.kontakt-actions { margin-bottom: 2.5rem; }
.kontakt-titre { font-size: clamp(1.6rem, 3vw, 2rem); margin-bottom: 1rem; }

/* ---------- Calculateur E85 ---------- */
.calc {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 2rem 3.5rem;
  align-items: start;
  padding-bottom: clamp(3rem, 7vw, 5rem);
}
.calc-form { display: grid; gap: 1.4rem; }
.calc-ligne { display: grid; grid-template-columns: minmax(0, 1fr) 8rem; gap: 1rem; align-items: center; }
input[type="range"] { width: 100%; min-height: 0; padding: 0; border: 0; background: none; accent-color: var(--rouge); }
.calc-form output { color: var(--rouge-vif); font-weight: 700; }
.calc-resultat {
  position: sticky;
  top: calc(var(--entete) + 1.5rem);
  display: grid;
  gap: 1.1rem;
  padding: clamp(1.4rem, 3vw, 2rem);
  background: var(--carbone);
  border: 1px solid var(--trait);
  border-top: 3px solid var(--rouge);
}
.calc-etiquette { color: var(--acier); font-weight: 600; }
.calc-gros { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; margin-top: -0.6rem; }
.calc-gros #e85-eco-an {
  font-family: var(--f-display);
  font-style: normal;
  font-weight: 900;
  font-stretch: 70%;
  font-size: clamp(3.2rem, 7vw, 4.6rem);
  line-height: 1;
  color: var(--rouge);
  font-variant-numeric: tabular-nums;
}
.calc-unite { color: var(--acier); font-weight: 600; }
.calc-mois { color: var(--acier); margin-top: -0.5rem; }
.calc-mois strong { color: var(--blanc); }
.calc-barres { display: grid; gap: 0.85rem; padding-top: 1rem; border-top: 1px solid var(--trait); }
.calc-barre-tete { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.95rem; margin-bottom: 0.35rem; }
.calc-barre-tete strong { font-variant-numeric: tabular-nums; }
.calc-piste { height: 12px; background: #0b0c0e; border: 1px solid var(--trait); }
.calc-rempli { display: block; height: 100%; background: var(--rouge); transition: width 0.25s ease-out; }
.calc-gris { background: var(--acier); }
.calc-details { margin: 0; display: grid; gap: 0.6rem; padding-top: 1rem; border-top: 1px solid var(--trait); }
.calc-details div { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.95rem; }
.calc-details dt { color: var(--acier); }
.calc-details dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.calc-details div[hidden] { display: none; }
@media (max-width: 900px) {
  .calc { grid-template-columns: minmax(0, 1fr); }
  .calc-resultat { position: static; }
}
@media (prefers-reduced-motion: reduce) { .calc-rempli { transition: none; } }

picture { display: contents; }

/* ===== Réalisations ajoutées ===== */
.photo-ouvrir { position: relative; }
.gain-badge { position: absolute; top: 0.6rem; left: 0.6rem; padding: 0.25rem 0.6rem; border-radius: 999px; background: var(--rouge); color: #fff;
  font-weight: 800; font-size: 0.85rem; letter-spacing: 0.01em; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }
.legende-gains { margin-top: 0.15rem; color: #4ade80; font-weight: 600; font-size: 0.92rem; font-variant-numeric: tabular-nums; }

/* ===== Pages Freiburg et Basel ===== */
.ville-anfahrt { display: grid; gap: 1rem; align-content: start; }
.ville-anfahrt h2 { margin-bottom: 0.25rem; }
.ville-anfahrt p { color: #d3d7de; }
.ville-anfahrt .actions { margin-top: 0.5rem; }
.ville-infos .champs-liste li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
.ville-infos .champs-liste span { overflow-wrap: break-word; hyphens: auto; }

/* ===== Appli ===== */
.appli { margin-top: 1rem; display: grid; gap: 0.5rem; justify-items: start; }
.appli-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.9rem; border: 1px solid var(--trait); border-radius: 10px; background: #1a1f26; color: var(--blanc); font: inherit; font-size: 0.92rem; font-weight: 600; cursor: pointer; }
.appli-btn:hover { border-color: var(--rouge); }
.appli-aide { font-size: 0.88rem; color: var(--acier); max-width: 30ch; }

/* ===== Outils de reprogrammation ===== */
.page-tete .actions { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.formules-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.formule h3 { font-size: clamp(1.6rem, 2.6vw, 2rem); }
div.carte-service:hover { transform: none; border-color: var(--trait); box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset; }
div.carte-service p { color: var(--acier); font-size: 0.95rem; line-height: 1.55; }
@media (max-width: 1000px) { .formules-3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { div.carte-service p { display: block; } }

/* ===== Corrections du contrôle complet ===== */
/* Pied de page : jamais plus large que l'écran, une colonne sur les petits téléphones */
.site-footer { overflow-wrap: break-word; }
@media (max-width: 1000px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }
.site-footer h2 { color: var(--blanc); font-size: 1.15rem; line-height: 1.2; margin-bottom: 0.6rem; }
/* Titres des encadrés de formulaire (h2 pour la hiérarchie, taille d'un h3) */
.pret h2 { font-size: 1.4rem; font-weight: 700; font-stretch: 90%; }
/* Zones de clic d'au moins 24 px de haut sur téléphone */
.site-footer li a, .sous-nav a, .fil a, .coordonnees dd a, .legal-liste dd a, a.lien-rouge { display: inline-block; padding-block: 0.15rem; }
/* Cases à cocher, boutons radio et curseurs assez grands pour le doigt */
.accord input { width: 1.5rem; height: 1.5rem; margin-top: 0; }
.choix-option input { width: 1.5rem; height: 1.5rem; }
input[type="range"] { min-height: 1.5rem; }
/* Lien « Aller au contenu » pour la navigation au clavier */
.aller-contenu { position: absolute; left: 1rem; top: -4rem; z-index: 200; padding: 0.6rem 1rem; border-radius: 8px; background: var(--rouge); color: #fff; font-weight: 700; text-decoration: none; }
.aller-contenu:focus { top: 1rem; }
main:focus { outline: none; }
/* Langues groupées : DE et EN restent toujours ensemble */
.langues { display: inline-flex; gap: 0.4rem; white-space: nowrap; }
@media (max-width: 620px) { .nav-liens { gap: 0.55rem 0.95rem; } }
@media (max-width: 380px) { .nav-liens { gap: 0.5rem 0.75rem; } .nav-liens > a { font-size: 0.95rem; } }
/* Bouton WhatsApp : vert plus foncé pour que le texte blanc reste lisible */
.whatsapp { background: #15803d; }
.whatsapp:hover { background: #166534; }

/* ===== Offre du moment ===== */
.offre { background: linear-gradient(90deg, #b5111a, var(--rouge) 50%, #b5111a); color: #fff; }
.offre-in { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.35rem 0.9rem; padding: 0.55rem 2.2rem; text-align: center; }
.offre-pastille { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(0, 0, 0, 0.28); padding: 0.15rem 0.55rem; border-radius: 999px; }
.offre p { font-weight: 600; font-size: 0.95rem; line-height: 1.35; }
.offre-btn { color: #fff; font-weight: 700; font-size: 0.9rem; text-decoration: underline; text-underline-offset: 0.2em; white-space: nowrap; }
.offre-fermer { position: absolute; right: 0; top: 50%; transform: translateY(-50%); min-width: 2.2rem; min-height: 2.2rem; background: none; border: 0; color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.offre-fermer:hover { background: rgba(0, 0, 0, 0.18); border-radius: 8px; }

/* ===== Espace pro ===== */
#ep-espace { display: grid; gap: 1.2rem; }
.espace > * { max-width: 62rem; }
.espace { padding-bottom: clamp(3rem, 6vw, 5rem); display: grid; gap: 1.5rem; }
.ep-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.ep-carte { padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--trait); border-radius: 16px; background: var(--carte); display: grid; gap: 1rem; }
.ep-carte h2 { font-size: 1.5rem; }
.ep-carte form { display: grid; gap: 0.9rem; }
.ep-carte .champs { margin: 0; }
.ep-carte .btn { justify-self: start; }
.ep-carte .accord { margin: 0; }
.ep-avantages { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; color: #d3d7de; }
.ep-avantages li { display: flex; gap: 0.6rem; align-items: flex-start; }
.ep-avantages li::before { content: ""; flex: none; width: 0.55rem; height: 0.55rem; margin-top: 0.55rem; border-radius: 50%; background: var(--rouge-vif); }
.ep-note { color: var(--acier); font-size: 0.92rem; }
.ep-message { padding: 0.9rem 1.1rem; border-radius: 10px; background: rgba(34, 197, 94, 0.08); border: 1px solid #2f6b45; }
.ep-lien { background: none; border: 0; padding: 0.2rem 0; font: inherit; font-size: 0.95rem; color: var(--blanc); text-decoration: underline; text-decoration-color: var(--rouge); text-underline-offset: 0.25em; cursor: pointer; justify-self: start; }
.mdp-champ { position: relative; }
.mdp-champ input { padding-right: 5.5rem; }
.mdp-voir { position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%); min-height: 2.2rem; padding: 0 0.7rem; border: 0; border-radius: 6px; background: rgba(255, 255, 255, 0.06); color: var(--acier); font: inherit; font-size: 0.85rem; cursor: pointer; }
.ep-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.ep-tete h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.ep-tete .actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.ep-chiffres { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; }
.ep-chiffres li { padding: 1rem 1.2rem; border: 1px solid var(--trait); border-radius: 12px; background: var(--carte); }
.ep-chiffres strong { display: block; font-family: var(--f-display); font-size: 2rem; line-height: 1; }
.ep-chiffres span { color: var(--acier); font-size: 0.9rem; }
.ep-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; }
.ep-dossier { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.4rem 1rem; align-items: center; padding: 1.1rem 1.25rem; border: 1px solid var(--trait); border-radius: 14px; background: var(--carte); }
.ep-dossier h3 { font-size: 1.15rem; }
.ep-info { color: var(--acier); font-size: 0.9rem; }
.ep-badge { justify-self: end; font-size: 0.8rem; font-weight: 700; padding: 0.25rem 0.65rem; border-radius: 999px; white-space: nowrap; }
.ep-badge.recu { background: rgba(59, 130, 246, 0.18); color: #93c5fd; }
.ep-badge.en_cours { background: rgba(245, 158, 11, 0.16); color: #fbbf24; }
.ep-badge.attente { background: rgba(218, 26, 34, 0.16); color: #ff7a7f; }
.ep-badge.pret { background: rgba(34, 197, 94, 0.14); color: #4ade80; }
.ep-boutons { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.3rem; }
.ep-boutons .btn { padding-block: 0.55rem; font-size: 0.92rem; }
.ep-vide { color: var(--acier); }
.ep-compte { padding-top: 1rem; border-top: 1px solid var(--trait); display: grid; gap: 0.8rem; justify-items: start; }
.ep-compte form { display: grid; gap: 0.7rem; max-width: 26rem; width: 100%; }
.fs-connecte { margin-top: 0.6rem; color: #4ade80; font-size: 0.95rem; }
@media (max-width: 800px) { .ep-grille { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .ep-chiffres { gap: 0.5rem; }
  .ep-chiffres li { padding: 0.8rem; }
  .ep-chiffres strong { font-size: 1.6rem; }
  .ep-dossier { grid-template-columns: minmax(0, 1fr); }
  .ep-badge { justify-self: start; }
}

/* ===== Suivi File Service ===== */
[hidden] { display: none !important; }
.suivi-resultat:focus { outline: none; }
.suivi > * { max-width: 46rem; }
.suivi { padding-bottom: clamp(3rem, 6vw, 5rem); display: grid; gap: 2rem; }
.suivi-resultat { padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--trait); border-radius: 16px; background: var(--carte); display: grid; gap: 1rem; }
.sv-ref { color: var(--acier); font-size: 0.92rem; }
.sv-ref strong { color: var(--blanc); font-variant-numeric: tabular-nums; }
.suivi-resultat h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.sv-presta { color: var(--acier); margin-top: -0.6rem; }
.sv-etapes { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0; }
.sv-etapes li { position: relative; display: grid; gap: 0.1rem; padding: 0 0 1.3rem 2.4rem; color: var(--acier); }
.sv-etapes li::before { content: ""; position: absolute; left: 0.25rem; top: 0.2rem; width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid #4a515c; background: var(--noir); }
.sv-etapes li::after { content: ""; position: absolute; left: 0.69rem; top: 1.35rem; bottom: 0.1rem; width: 2px; background: #2f3640; }
.sv-etapes li:last-child { padding-bottom: 0; }
.sv-etapes li:last-child::after { display: none; }
.sv-etapes li strong { color: var(--acier); font-size: 1.05rem; }
.sv-etapes li.fait::before { background: #22c55e; border-color: #22c55e; }
.sv-etapes li.fait::after { background: #22c55e; }
.sv-etapes li.fait strong, .sv-etapes li.actuel strong { color: var(--blanc); }
.sv-etapes li.actuel::before { background: var(--rouge-vif); border-color: var(--rouge-vif); box-shadow: 0 0 0 5px rgba(218, 26, 34, 0.2); }
.sv-etapes li.actuel.fait::before { background: #22c55e; border-color: #22c55e; box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.2); }
.sv-attente { display: grid; gap: 0.3rem; padding: 1rem 1.1rem; border-radius: 12px; }
.sv-attente { background: rgba(218, 26, 34, 0.12); border: 1px solid rgba(218, 26, 34, 0.5); }
.sv-attente span { color: var(--acier); }
.sv-maj { color: var(--acier); font-size: 0.85rem; }
.sv-messages { display: grid; gap: 0.8rem; padding-top: 1.1rem; border-top: 1px solid var(--trait); }
.sv-messages h3 { font-size: 1.2rem; }
.sv-fil { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.sv-msg { max-width: 88%; padding: 0.65rem 0.9rem; border-radius: 12px; border: 1px solid var(--trait); background: rgba(255, 255, 255, 0.04); }
.sv-msg.gk { justify-self: start; border-left: 3px solid var(--rouge); }
.sv-msg.client { justify-self: end; background: rgba(255, 255, 255, 0.08); }
.sv-msg span { display: block; color: var(--acier); font-size: 0.8rem; margin-bottom: 0.2rem; }
.sv-msg p { white-space: pre-line; overflow-wrap: anywhere; color: #e4e7ec; }
.sv-fil-vide { color: var(--acier); }
.sv-ecrire { display: grid; gap: 0.5rem; }
.sv-ecrire label { font-weight: 600; }
.sv-ecrire textarea { width: 100%; }
.sv-ecrire .btn { justify-self: start; }
.sv-m-ok { color: #4ade80; }
.depot-liste { list-style: none; margin: 0.8rem 0 0; padding: 0; display: grid; gap: 0.45rem; }
.depot-liste li { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.5rem 0.8rem; border: 1px solid var(--trait); border-left: 3px solid var(--rouge); border-radius: 8px; background: var(--noir); }
.depot-liste span { font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.depot-retirer { flex: none; min-height: 2.75rem; padding: 0 0.6rem; background: none; border: 0; color: var(--acier); font: inherit; font-size: 0.9rem; cursor: pointer; text-decoration: underline; text-decoration-color: var(--rouge); text-underline-offset: 0.2em; }
.depot-retirer:hover { color: var(--blanc); }
.sv-avis { color: #d3d7de; }
.sv-paiement { display: grid; gap: 0.6rem; padding: 1rem 1.1rem; border: 1px solid var(--trait); border-radius: 12px; background: rgba(255, 255, 255, 0.04); }
.sv-paiement p { color: #d3d7de; }
/* Notifications sur le téléphone (suivi, espace pro) */
.notif-bloc { display: flex; gap: 0.8rem; align-items: flex-start; padding: 1rem 1.1rem; border: 1px dashed var(--trait); border-radius: 12px; background: rgba(255, 255, 255, 0.03); }
.notif-icone { flex: none; color: var(--rouge-vif); margin-top: 0.15rem; }
.notif-corps { display: grid; gap: 0.45rem; min-width: 0; }
.notif-corps p { margin: 0; }
.notif-titre { font-weight: 700; color: var(--blanc); }
.notif-texte { color: #d3d7de; font-size: 0.95rem; }
.notif-etat { color: var(--blanc); font-weight: 600; font-size: 0.95rem; }
.notif-actions { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; margin-top: 0.15rem; }
.notif-couper { background: none; border: 0; padding: 0.3rem 0; color: var(--acier); text-decoration: underline; cursor: pointer; font: inherit; font-size: 0.9rem; }
.notif-couper:hover { color: var(--blanc); }
#ep-notif { margin: 1rem 0 0.4rem; }
.sv-montant { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }
.sv-montant span:first-child { color: var(--acier); }
.sv-montant strong { font-size: 1.3rem; color: var(--blanc); }
.sv-paye { padding: 0.15rem 0.6rem; border-radius: 999px; background: rgba(34, 197, 94, 0.14); color: #4ade80; font-weight: 700; font-size: 0.85rem; }
.suivi-resultat .btn { justify-self: start; }
.fs-suivi-lien { margin-top: 0.9rem; }
.fs-suivi-lien a { color: var(--blanc); text-decoration-color: var(--rouge); text-underline-offset: 0.25em; }

/* ===== Partenaires ===== */
.partenaires { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.partenaires li { display: grid; gap: 0.3rem; align-content: start; padding: 1.4rem; border: 1px solid var(--trait); border-radius: 12px; background: var(--carte); }
.partenaires strong { font-family: var(--f-display); font-size: 1.3rem; font-weight: 700; line-height: 1.2; }
.partenaires span { color: var(--acier); }
.form-partenaire { max-width: 46rem; }
.form-partenaire .form-erreur { margin-top: 1rem; }
.form-succes { margin-top: 1.25rem; padding: 1.25rem; border: 1px solid #2f6b45; border-radius: 12px; background: rgba(34, 197, 94, 0.08); }
.form-succes h3 { font-size: 1.3rem; margin-bottom: 0.4rem; }

@media (max-width: 900px) {
  .partenaires { grid-template-columns: minmax(0, 1fr); }
}

/* ===== Statut d'ouverture ===== */
.statut-ouverture { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.7rem; border-radius: 999px; font-weight: 600; font-size: 0.88rem; line-height: 1.3; }
.statut-ouverture:empty { display: none; }
.statut-bloc { display: flex; width: fit-content; margin-bottom: 0.5rem; }
.statut-ouverture::before, .atout strong[data-statut]::before {
  content: ""; flex: none; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: currentColor;
}
.atout strong[data-statut]::before { display: inline-block; margin-right: 0.45rem; vertical-align: 0.1em; }
.atout strong[data-statut]:not(.ouvert):not(.ferme):not(.bientot)::before { display: none; }
.statut-ouverture.ouvert { background: rgba(34, 197, 94, 0.13); color: #4ade80; }
.statut-ouverture.bientot { background: rgba(245, 158, 11, 0.14); color: #fbbf24; }
.statut-ouverture.ferme { background: rgba(218, 26, 34, 0.15); color: #ff7a7f; }
.atout strong.ouvert { color: #4ade80; }
.atout strong.bientot { color: #fbbf24; }
.atout strong.ferme { color: #ff7a7f; }
.ouvert::before { animation: pouls 2.2s ease-out infinite; }
@keyframes pouls { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); } }
@media (prefers-reduced-motion: reduce) { .ouvert::before { animation: none; } }

/* ===== Barre mobile et animations ===== */
/* Barre d'action fixe en bas de l'écran sur téléphone */
.barre-mobile { display: none; }
@media (max-width: 760px) {
  .barre-mobile {
    display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: 0.5rem;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 0.55rem 0.75rem calc(0.55rem + env(safe-area-inset-bottom));
    background: rgba(16, 19, 24, 0.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--trait);
  }
  .barre-mobile a {
    display: flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 3rem;
    border-radius: 10px; border: 1px solid var(--trait); background: #1c2129;
    color: #fff; font-weight: 700; font-size: 0.95rem; text-decoration: none;
  }
  .barre-mobile .barre-wa svg { color: #25d366; }
  .barre-mobile .barre-devis { background: var(--rouge); border-color: var(--rouge); }
  .barre-mobile a:active { transform: scale(0.97); }
  .whatsapp { display: none; }
  body { padding-bottom: calc(4.3rem + env(safe-area-inset-bottom)); }
  body.saisie .barre-mobile { display: none; }
}

/* Apparition douce au défilement (seulement si le visiteur n'a pas demandé moins d'animations) */
.anim .apparait { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.anim .apparait.vu { opacity: 1; transform: none; }
data.compteur { display: inline-block; font-variant-numeric: tabular-nums; text-align: right; }

/* Photos des réalisations : léger zoom au survol */
.photo-ouvrir { overflow: hidden; }
.photo-ouvrir img { transition: transform 0.4s ease; }
.photo-ouvrir:hover img, .photo-ouvrir:focus-visible img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .photo-ouvrir img { transition: none; } .photo-ouvrir:hover img { transform: none; } }

/* ===== Carte, page 404, pages légales ===== */
/* Carte de l'atelier, chargée seulement au clic (Google Maps dépose des cookies) */
.carte {
  position: relative; overflow: hidden; border-radius: 16px; border: 1px solid var(--trait);
  height: clamp(340px, 42vw, 460px); background-color: #151a21;
  background-image:
    radial-gradient(circle at 50% 44%, rgba(218, 26, 34, 0.22), transparent 30%),
    linear-gradient(118deg, transparent 46%, rgba(255,255,255,.08) 46%, rgba(255,255,255,.08) 48.2%, transparent 48.2%),
    linear-gradient(28deg, transparent 63%, rgba(255,255,255,.06) 63%, rgba(255,255,255,.06) 64.5%, transparent 64.5%),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: auto, auto, auto, 48px 48px, 48px 48px;
}
.carte-voile { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 0.9rem; padding: 1.5rem; text-align: center; }
.carte-pin { color: var(--rouge-vif); filter: drop-shadow(0 8px 14px rgba(0,0,0,.55)); }
.carte-adresse { color: var(--acier); }
.carte-adresse strong { display: block; font-family: var(--f-display); font-size: 1.45rem; color: var(--blanc); line-height: 1.2; }
.carte-voile .actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
.carte-note { font-size: 0.8rem; color: var(--acier); max-width: 38ch; }
.carte iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Page 404 */
.page-404 { padding-block: clamp(3.5rem, 9vw, 7rem); display: grid; gap: 1.2rem; justify-items: start; }
.code-404 { font-family: var(--f-display); font-weight: 800; font-size: clamp(5.5rem, 16vw, 10rem); line-height: 0.9; color: transparent; -webkit-text-stroke: 2px var(--rouge-vif); }
.page-404 > p:not(.code-404) { color: var(--acier); max-width: 50ch; font-size: 1.1rem; }
.page-404 .actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.liens-404 { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.liens-404 a { display: inline-block; padding: 0.5rem 0.95rem; border: 1px solid var(--trait); border-radius: 999px; text-decoration: none; color: var(--blanc); font-size: 0.95rem; }
.liens-404 a:hover, .liens-404 a:focus-visible { border-color: var(--rouge); }

/* Mentions légales et confidentialité */
.legal > * { max-width: 52rem; }
.legal { padding-bottom: clamp(3rem, 6vw, 5rem); display: grid; gap: 2.25rem; }
.legal h2 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); margin-bottom: 0.8rem; }
.legal p, .legal li { color: #c9ccd1; }
.legal p + p, .legal p + ul, .legal ul + p { margin-top: 0.8rem; }
.legal ul { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.5rem; }
.legal li::marker { color: var(--rouge); }
.legal a { color: var(--blanc); text-decoration-color: var(--rouge); text-underline-offset: 0.25em; }
.legal strong { color: var(--blanc); }
.legal-liste { display: grid; grid-template-columns: 15rem minmax(0, 1fr); margin: 0; border-top: 1px solid var(--trait); }
.legal-liste dt, .legal-liste dd { margin: 0; padding: 0.7rem 0; border-bottom: 1px solid var(--trait); }
.legal-liste dt { color: var(--acier); font-size: 0.95rem; padding-right: 1rem; }
.legal-liste dd { color: var(--blanc); }
.maj { font-size: 0.9rem; color: var(--acier); }
.copyright a { color: inherit; text-underline-offset: 0.2em; }
.accord a { color: var(--blanc); text-underline-offset: 0.2em; }
@media (max-width: 600px) {
  .legal-liste { grid-template-columns: minmax(0, 1fr); }
  .legal-liste dt { border-bottom: 0; padding-bottom: 0; }
  .legal-liste dd { padding-top: 0.15rem; }
}

/* ===== Style 2026 : graphite premium ===== */
:root {
  --voile: rgba(16, 19, 24, 0.97); --voile-2: rgba(16, 19, 24, 0.78);
  --bande: #151920; --carte: linear-gradient(180deg, #1b2028 0%, #161a20 100%);
}
body { background: radial-gradient(1100px 520px at 85% 0%, rgba(218, 26, 34, 0.10), transparent 60%) no-repeat, var(--noir); }
.site-header { background: rgba(16, 19, 24, 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.bloc-sombre { background: #14181e; }

/* Titres droits, en minuscules, plus lisibles */
h1, h2, h3 { font-stretch: 85%; line-height: 1.08; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.3rem, 5.4vw, 4.1rem); }
h2 { font-size: clamp(1.9rem, 3.8vw, 2.8rem); }
h3 { font-stretch: 90%; }
.btn { border-radius: 8px; text-transform: none; letter-spacing: 0; }
.btn-rouge { color: #fff; box-shadow: 0 8px 24px rgba(218, 26, 34, 0.32); }
.btn-verre { color: #fff; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.22); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.btn-verre:hover { background: rgba(255,255,255,0.16); }
.bloc-tete h2 { position: relative; padding-left: 1rem; }
.service h2::before { width: 4px; height: auto; align-self: stretch; margin-block: 0.12em; border-radius: 2px; transform: none; }
.bloc-tete h2::before { content: ""; position: absolute; left: 0; top: 0.12em; bottom: 0.12em; width: 4px; border-radius: 2px; background: var(--rouge); }
.vignette, .photo-ouvrir, .photo-ouvrir img, .service-photo img, .galerie-page img { border-radius: 10px; }
input, select, textarea { border-radius: 8px; }

/* Accueil : grande photo en fond */
.hero-v2 { position: relative; overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--trait); }
.hero-v2-fond {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, var(--voile) 0%, var(--voile-2) 48%, rgba(0,0,0,0.15) 100%),
    url("../img/photos/bmw-m2-competition-cles.webp") 70% 40% / cover no-repeat;
}
.hero-v2-contenu { padding-block: clamp(3rem, 8vw, 6.5rem); display: grid; gap: 1.25rem; justify-items: start; }
.hero-v2-logo { width: min(320px, 70vw); height: auto; display: block; margin-bottom: 0.5rem; }
.hero-v2 h1 { hyphens: manual; font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.05; max-width: 17ch; color: #fff; }
.hero-v2 .lead { color: #d3d7de; max-width: 52ch; font-size: clamp(1.05rem, 1.6vw, 1.2rem); }
.hero-v2 .actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Bandeau des atouts */
.atouts-bande { background: var(--bande); border-bottom: 1px solid var(--trait); }
.atouts-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; padding-block: 1.4rem; }
.atout { display: flex; align-items: center; gap: 0.8rem; min-width: 0; }
.atout-ico { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 10px; color: var(--rouge-vif); background: rgba(218, 26, 34, 0.13); }
.atout strong { display: block; font-size: 1rem; line-height: 1.2; color: var(--blanc); }
.atout span { color: var(--acier); font-size: 0.88rem; line-height: 1.3; display: block; }

/* Cartes des prestations */
.cartes-services { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; }
.carte-service {
  display: flex; flex-direction: column; gap: 0.75rem; padding: 1.4rem;
  text-decoration: none; color: var(--blanc);
  background: var(--carte); border: 1px solid var(--trait); border-radius: 12px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.carte-service:hover, .carte-service:focus-visible { transform: translateY(-3px); border-color: rgba(218, 26, 34, 0.6); box-shadow: 0 14px 34px rgba(218, 26, 34, 0.16); }
.carte-ico { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 12px; color: var(--rouge-vif); background: rgba(218, 26, 34, 0.13); }
.carte-service h3 { font-size: 1.3rem; font-weight: 700; }
.carte-service ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; color: var(--acier); font-size: 0.93rem; }
.carte-service p { color: var(--acier); font-size: 0.93rem; line-height: 1.5; }
.carte-lien { margin-top: auto; padding-top: 0.4rem; font-weight: 600; font-size: 0.92rem; color: var(--rouge-vif); }

@media (max-width: 1000px) {
  .cartes-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .atouts-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .hero-v2-fond { background-position: 72% 50%; }
  .atouts-grille { gap: 1rem 0.8rem; }
  .atout { gap: 0.6rem; align-items: flex-start; }
  .atout-ico { width: 2.3rem; height: 2.3rem; border-radius: 8px; }
  .atout-ico svg { width: 18px; height: 18px; }
  .atout strong { font-size: 0.92rem; }
  .atout span { font-size: 0.8rem; }
  .cartes-services { gap: 0.7rem; }
  .carte-service { padding: 1rem; gap: 0.55rem; }
  .carte-ico { width: 2.6rem; height: 2.6rem; border-radius: 10px; }
  .carte-ico svg { width: 24px; height: 24px; }
  .carte-service h3 { font-size: 1rem; hyphens: manual; overflow-wrap: break-word; }
  .carte-service ul, .carte-service p { display: none; }
  .carte-lien { font-size: 0.85rem; padding-top: 0; }
}

/* Simulateur de gains (module Remapdb) */
.simulateur-cadre { margin-top: 1.6rem; border: 1px solid var(--trait); border-radius: 14px; background: var(--carbone); padding: clamp(.6rem, 2vw, 1.2rem); min-height: 200px; }
.simulateur-cadre .rdb-widget { width: 100%; }
.simulateur-note { margin: 1rem 0 0; color: var(--acier); font-size: .95rem; }
.bandeau-simulateur { margin-top: 1.6rem; display: flex; align-items: center; gap: 1rem 1.2rem; padding: 1.1rem 1.3rem; border: 1px solid var(--trait); border-left: 4px solid var(--rouge); border-radius: 12px; background: var(--carbone); color: var(--blanc); text-decoration: none; transition: border-color .15s; }
.bandeau-simulateur:hover { border-color: var(--rouge); }
.bs-ico { flex: none; color: var(--rouge-vif); }
.bs-texte { display: grid; gap: .2rem; flex: 1; min-width: 0; }
.bs-texte strong { font-size: 1.15rem; }
.bs-texte span { color: var(--acier); }
.bandeau-simulateur .btn { flex: none; }
@media (max-width: 600px) { .bandeau-simulateur { flex-wrap: wrap; } .bandeau-simulateur .btn { width: 100%; } }

/* =====================================================================
   GK Perf - Animations de l'accueil (ajout novembre 2026)
   A coller tout à la fin de css/style.css
   - la photo de fond arrive en douceur
   - le logo entre en glissant, avec un trait rouge et un reflet lumineux
   - le titre, le texte et les boutons arrivent l'un après l'autre
   Rien ne bouge si le téléphone a « Réduire les animations » activé.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* L'apparition au défilement ne s'applique plus au haut de l'accueil :
     ces éléments ont leur propre entrée, ci-dessous. */
  .anim .hero-v2 .apparait { opacity: 1; transform: none; transition: none; }

  /* Photo de fond : léger zoom arrière et fondu */
  .hero-v2-fond {
    transform-origin: 70% 40%;
    animation: gk-fond 2.4s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
  }

  /* Logo : arrive de la gauche, comme une voiture qui freine */
  .hero-v2-contenu > picture { position: relative; display: block; }
  .hero-v2-logo {
    animation: gk-logo 1.1s cubic-bezier(0.16, 0.84, 0.24, 1) 0.15s backwards;
  }

  /* Trait rouge qui file sous le logo à l'arrivée */
  .hero-v2-contenu > picture::before {
    content: "";
    position: absolute;
    left: -8%;
    right: -8%;
    bottom: 0.15rem;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, transparent, var(--rouge-vif) 45%, #ffffff 55%, transparent);
    transform-origin: left center;
    opacity: 0;
    pointer-events: none;
    animation: gk-trait 1.3s ease-out 0.55s;
  }

  /* Reflet lumineux qui passe sur le logo (uniquement sur le dessin du logo) */
  .hero-v2-contenu > picture::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.95) 50%, transparent 60%) no-repeat;
    background-size: 250% 100%;
    background-position: 100% 0;
    -webkit-mask: url("../img/logo-gk-perf.webp") 0 0 / 100% auto no-repeat;
            mask: url("../img/logo-gk-perf.webp") 0 0 / 100% auto no-repeat;
    animation: gk-reflet 6s ease-in-out 1.2s infinite;
  }

  /* Titre, texte, puis boutons */
  .hero-v2 h1 {
    animation: gk-monte 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s backwards;
  }
  .hero-v2 .lead {
    animation: gk-monte 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.68s backwards;
  }
  .hero-v2 .actions .btn {
    animation: gk-bouton 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) 0.85s backwards;
  }
  .hero-v2 .actions .btn:nth-child(2) { animation-delay: 1s; }

  @keyframes gk-fond {
    from { opacity: 0; transform: scale(1.12); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes gk-logo {
    0%   { opacity: 0; transform: translateX(-70px) skewX(-10deg); filter: blur(8px); }
    60%  { opacity: 1; transform: translateX(6px) skewX(2deg); filter: blur(0); }
    100% { opacity: 1; transform: none; filter: none; }
  }
  @keyframes gk-trait {
    0%   { opacity: 0; transform: scaleX(0); }
    25%  { opacity: 1; }
    70%  { opacity: 1; transform: scaleX(1); }
    100% { opacity: 0; transform: scaleX(1); }
  }
  @keyframes gk-reflet {
    0%        { background-position: 100% 0; }
    25%, 100% { background-position: 0% 0; }
  }
  @keyframes gk-monte {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes gk-bouton {
    from { opacity: 0; transform: translateX(-28px); }
    to   { opacity: 1; transform: none; }
  }
}