/* ==========================================================================
   Express Pneu 44 / SOS Dépannage 44
   Palette tirée du flocage du fourgon et du flyer du client : noir, rouge,
   blanc chaud. Aplats, bordures franches, aucun dégradé, aucune ombre.
   Contrastes vérifiés : voir DESIGN.md.
   ========================================================================== */

@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/atkinson-400.woff2") format("woff2");
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/atkinson-700.woff2") format("woff2");
}

@font-face {
  font-family: "Saira Extra Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/saira-700.woff2") format("woff2");
}

@font-face {
  font-family: "Saira Extra Condensed";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/saira-800.woff2") format("woff2");
}

:root {
  --ink: #121010;
  --ink-2: #1e1b1b;
  --paper: #faf8f8;
  --paper-2: #efebeb;
  --white: #ffffff;
  --red: #c8202f;
  --red-deep: #a71926;
  --grey: #625b5b;
  --grey-light: #c7bfbf;
  --green: #1f7a4d;

  --display: "Saira Extra Condensed", "Arial Narrow", Impact, sans-serif;
  --body: "Atkinson Hyperlegible", "Segoe UI", Tahoma, sans-serif;

  /* Échelle d'espacement. Toute marge, tout gap, tout padding vient d'ici.
     Rien d'arbitraire ailleurs : c'est ce qui tient la géométrie de la page. */
  --s1: 0.5rem;
  --s2: 0.75rem;
  --s3: 1rem;
  --s4: 1.5rem;
  --s5: 2rem;
  --s6: 3rem;
  --s7: 4.5rem;
  --gap: var(--s4);
  --section-pad: clamp(3rem, 6vw, 4.5rem);

  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --wide: 78rem;
  --rule: 2px solid var(--ink);
  --rule-thin: 1px solid var(--ink);
  --radius: 6px;
  --header-h: 4.25rem;
  --sticky-h: 4.6rem;
}

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

html {
  scroll-behavior: smooth;
}

/* Le header sticky ne doit pas recouvrir la cible d'une ancre. */
[id] {
  scroll-margin-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* `hidden` sur body crée un conteneur de défilement : Chrome calcule alors mal
     la position des ancres et un clic sur « Contact » s'arrête trop haut.
     `clip` coupe le débordement sans créer ce conteneur. */
  overflow-x: hidden;
  overflow-x: clip;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* .btn impose un display : sans ça, hidden ne masquerait rien. */
[hidden] {
  display: none !important;
}

/* <picture> ne doit pas casser les grilles/flex : l'img reste l'élément de mise en page. */
picture {
  display: contents;
}

a {
  color: inherit;
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 1;
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.4rem, 5.6vw, 3.8rem);
}

h2 {
  font-size: clamp(2rem, 5vw, 3.2rem);
}

h3 {
  font-size: clamp(1.4rem, 2.8vw, 1.8rem);
}

p {
  margin: 0;
}

.wrap {
  width: min(100%, var(--wide));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 0.7rem 1.1rem;
  z-index: 200;
}

.skip:focus {
  left: 0;
}

:where(a, button, summary, input, select, textarea):focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

/* Sur fond sombre, un contour noir serait invisible : on passe au blanc. */
.topbar :focus-visible,
.night :focus-visible,
.site-footer :focus-visible,
.sticky-cta :focus-visible,
.section-dark :focus-visible {
  outline-color: var(--paper);
}

.icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

.icon-lg {
  width: 1.5rem;
  height: 1.5rem;
}

/* --------------------------------------------------------------- boutons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.8rem 1.35rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: var(--body);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.15;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.12s linear, color 0.12s linear, border-color 0.12s linear;
}

/* Sous stress, sur mobile, on ne vise pas un bouton de 40 px. */
@media (max-width: 61.99rem) {
  .btn {
    min-height: 48px;
  }
}

.btn-red {
  background: var(--red);
  border-color: var(--red);
  color: var(--paper);
}

.btn-red:hover,
.btn-red:focus-visible {
  background: var(--red-deep);
  border-color: var(--red-deep);
}

.btn-dark {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.btn-dark:hover,
.btn-dark:focus-visible {
  background: var(--red);
  border-color: var(--red);
}

.btn-light {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}

.btn-light:hover,
.btn-light:focus-visible {
  background: var(--red);
  border-color: var(--red);
  color: var(--paper);
}

.btn-ghost {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  background: var(--ink);
  color: var(--paper);
}

.btn-full {
  width: 100%;
}

.btn-lg {
  padding: 1rem 1.7rem;
  font-size: 1.075rem;
}

/* --------------------------------------------------------------- top bar */

.topbar {
  background: var(--ink);
  color: var(--paper);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.15rem;
}

.topbar-facts {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.topbar-facts span::after {
  content: "·";
  margin-left: 0.55rem;
  color: var(--red);
}

.topbar-facts span:last-child::after {
  content: none;
}

.topbar-live {
  display: none;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
}

.topbar-live i {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #6fe0a0;
}

@media (max-width: 36rem) {
  .topbar-facts span:nth-child(3) {
    display: none;
  }
}

@media (min-width: 48rem) {
  .topbar-live {
    display: inline-flex;
  }
}

/* ---------------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--paper);
  border-bottom: var(--rule);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
  width: min(100%, var(--wide));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.brand {
  text-decoration: none;
  display: grid;
  line-height: 1;
}

.brand-name {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.4rem, 4.4vw, 1.75rem);
}

.brand-sub {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
  margin-top: 0.25rem;
}

.site-nav {
  display: none;
  gap: 1.5rem;
  font-weight: 700;
  font-size: 0.92rem;
}

.site-nav a {
  text-decoration: none;
  padding-block: 0.25rem;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover {
  border-bottom-color: var(--red);
}

@media (min-width: 64rem) {
  .site-nav {
    display: flex;
  }
}

.header-actions .btn {
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
}

/* Le header doit tenir sur une ligne à 390 px : on raccourcit les libellés. */
@media (max-width: 34rem) {
  .btn-long,
  .brand-sub-long {
    display: none;
  }

  /* Le bouton WhatsApp du header se réduit à son icône. */
  .header-actions .btn-wa {
    padding-inline: var(--s3);
  }

  .header-actions .btn {
    padding: 0.6rem 0.9rem;
    font-size: 0.88rem;
  }
}

/* ------------------------------------------------------------------ hero */

.hero {
  background: var(--ink);
  color: var(--paper);
  border-bottom: var(--rule);
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
}

.hero-grid {
  display: grid;
  gap: var(--s5);
  align-items: center;
}

@media (min-width: 62rem) {
  .hero-grid {
    grid-template-columns: 1.05fr 0.95fr;
  }

  /* Le premier écran doit montrer les deux numéros sans faire défiler. */
  .hero {
    display: flex;
    align-items: center;
    min-height: calc(100svh - var(--header-h) - 2.15rem);
  }

  .hero > .wrap {
    width: min(100%, var(--wide));
  }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey-light);
  margin-bottom: 1rem;
}

.eyebrow::before {
  content: "";
  width: 1.6rem;
  height: 0.25rem;
  background: var(--red);
}

.hero .eyebrow {
  margin-bottom: var(--s3);
}

.hero h1 {
  margin-bottom: var(--s2);
}

.lede {
  font-size: clamp(1.02rem, 2.2vw, 1.15rem);
  max-width: 48ch;
}

.hero .lede {
  color: var(--grey-light);
}

.hero-hint {
  margin-top: 1.1rem;
  font-size: 0.92rem;
  color: var(--grey-light);
  max-width: 46ch;
}

/* ------------------------------------------------------- cartes d'appel */

.call-cards {
  display: grid;
  gap: var(--s2);
  margin-top: var(--s4);
}

@media (min-width: 34rem) {
  .call-cards {
    grid-template-columns: 1fr 1fr;
  }
}

.call-cards-stack {
  grid-template-columns: 1fr;
  max-width: 26rem;
}

.call-card {
  display: grid;
  gap: 0.15rem;
  padding: var(--s2) var(--s3) var(--s3);
  background: var(--red);
  color: var(--paper);
  border: 2px solid var(--red);
  border-radius: var(--radius);
  text-decoration: none;
  transition: background-color 0.12s linear, border-color 0.12s linear;
}

.call-card:hover,
.call-card:focus-visible {
  background: var(--red-deep);
  border-color: var(--red-deep);
}

.call-card-alt {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

.call-card-alt:hover,
.call-card-alt:focus-visible {
  background: var(--white);
  border-color: var(--white);
}

.call-card-tag {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.9;
}

.call-card-label {
  font-family: var(--body);
  font-weight: 700;
  font-size: 0.98rem;
}

.call-card-num {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.75rem, 4.2vw, 2.1rem);
  line-height: 1;
  letter-spacing: 0.01em;
  margin-top: 0.15rem;
}

.call-card-brand {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.85;
}

/* ------------------------------------------------------------ hero visuel */

.hero-visual {
  margin: 0;
  position: relative;
  border: 2px solid var(--paper);
}

.hero-visual img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (min-width: 62rem) {
  .hero-grid {
    align-items: stretch;
  }

  .hero-visual {
    display: flex;
  }

  .hero-visual img {
    aspect-ratio: auto;
    height: 100%;
    min-height: 21rem;
    max-height: 30rem;
    object-position: 50% 55%;
  }
}

.hero-badge {
  position: absolute;
  left: -2px;
  bottom: -2px;
  background: var(--red);
  color: var(--paper);
  border: 2px solid var(--red);
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.3rem;
  line-height: 1;
  padding: 0.55rem 0.8rem 0.45rem;
}

.hero-badge small {
  display: block;
  font-family: var(--body);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  font-weight: 700;
  margin-top: 0.25rem;
}

/* ----------------------------------------------------------- réassurance */

.reassure {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--paper-2);
  border-bottom: var(--rule);
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .reassure {
    grid-template-columns: repeat(3, 1fr);
  }
}

.reassure li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.95rem var(--gutter);
  font-weight: 700;
  font-size: 0.95rem;
  border-bottom: var(--rule-thin);
}

.reassure li:last-child {
  border-bottom: 0;
}

@media (min-width: 48rem) {
  .reassure li {
    justify-content: center;
    border-bottom: 0;
    border-right: var(--rule-thin);
    padding-inline: 1rem;
  }

  .reassure li:last-child {
    border-right: 0;
  }
}

.reassure .icon {
  color: var(--red);
  stroke-width: 2.2;
}

/* -------------------------------------------------------------- sections */

.section {
  padding-block: var(--section-pad);
  border-bottom: var(--rule);
}

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

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

.section-dark .lede {
  color: var(--grey-light);
}

.section-head {
  max-width: 48rem;
  margin-bottom: var(--s6);
}

.section-head .lede {
  margin-top: var(--s2);
}

.section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s6);
}

.section-cta {
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
}

/* -------------------------------------------------------------- activités */

.offer {
  display: grid;
  gap: var(--gap);
  align-items: stretch;
}

@media (min-width: 52rem) {
  .offer {
    grid-template-columns: repeat(2, 1fr);
  }
}

.offer-card {
  border: var(--rule);
  background: var(--white);
  display: flex;
  flex-direction: column;
}

.offer-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-bottom: var(--rule);
}

.offer-body {
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  flex: 1;
}

.offer-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  align-self: flex-start;
  background: var(--red);
  color: var(--paper);
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.offer-tag-alt {
  background: var(--ink);
}

.offer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
  font-size: 0.95rem;
}

.offer-list li {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
}

.offer-list li::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  flex: none;
  background: var(--red);
  transform: translateY(-0.1rem);
}

.offer-card .btn {
  margin-top: auto;
  align-self: flex-start;
}

/* ------------------------------------------------------------ bande nuit */

.night {
  position: relative;
  border-bottom: var(--rule);
  background: var(--ink);
}

.night img {
  width: 100%;
  height: clamp(19rem, 42vw, 26rem);
  object-fit: cover;
  opacity: 0.35;
}

.night-copy {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
}

.night-copy .wrap {
  color: var(--paper);
}

.night-copy h2 {
  color: var(--paper);
  max-width: 16ch;
}

.night-copy p {
  margin-top: 0.8rem;
  margin-bottom: 1.3rem;
  max-width: 40ch;
  font-weight: 700;
}

/* ------------------------------------------------------------------ zone */

.zone-grid {
  display: grid;
  gap: var(--s6);
}

@media (min-width: 58rem) {
  .zone-grid {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: start;
  }
}

.cities {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cities li {
  border: var(--rule-thin);
  border-radius: var(--radius);
  padding: 0.35rem 0.7rem;
  font-size: 0.87rem;
  font-weight: 700;
  background: var(--white);
}

.zone-tow {
  margin-top: clamp(1.8rem, 3.5vw, 2.4rem);
  border: var(--rule);
  border-radius: var(--radius);
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
  background: var(--paper-2);
  display: grid;
  gap: 0.75rem;
  justify-items: start;
}

.zone-visual {
  margin: 0;
  border: var(--rule);
  background: var(--white);
}

.zone-visual img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.zone-visual figcaption {
  border-top: var(--rule);
  padding: 0.7rem 1rem;
  font-size: 0.84rem;
  font-weight: 700;
}

/* ----------------------------------------------------------- prestations */

.facts {
  display: grid;
  gap: 0;
  border: 2px solid var(--paper);
}

@media (min-width: 46rem) {
  .facts {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 68rem) {
  .facts {
    grid-template-columns: repeat(4, 1fr);
  }
}

.fact {
  padding: clamp(1.2rem, 2.8vw, 1.7rem);
  border-bottom: 2px solid var(--paper);
  display: grid;
  gap: 0.5rem;
  align-content: start;
}

.fact:last-child {
  border-bottom: 0;
}

@media (min-width: 46rem) {
  .fact {
    border-right: 2px solid var(--paper);
  }

  .fact:nth-child(2n) {
    border-right: 0;
  }

  .fact:nth-last-child(-n + 2) {
    border-bottom: 0;
  }
}

@media (min-width: 68rem) {
  .fact {
    border-right: 2px solid var(--paper);
    border-bottom: 0;
  }

  .fact:nth-child(2n) {
    border-right: 2px solid var(--paper);
  }

  .fact:last-child {
    border-right: 0;
  }
}

.fact .bubble {
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: var(--red);
  color: var(--paper);
}

.fact strong {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.45rem;
  line-height: 1.05;
}

.fact p {
  font-size: 0.95rem;
  color: var(--grey-light);
}

/* ------------------------------------------------------------------- faq */

.faq-list {
  border: var(--rule);
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
}

.faq-list details {
  border-bottom: var(--rule);
}

.faq-list details:last-child {
  border-bottom: 0;
}

.faq-list summary {
  cursor: pointer;
  list-style: none;
  padding: 1.05rem clamp(1rem, 2.5vw, 1.5rem);
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.1rem, 2.6vw, 1.35rem);
  line-height: 1.05;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  content: "+";
  font-size: 1.6rem;
  line-height: 1;
  color: var(--red);
  flex: none;
}

.faq-list details[open] summary {
  background: var(--ink);
  color: var(--paper);
}

.faq-list details[open] summary::after {
  content: "–";
}

.faq-list details p {
  padding: 1rem clamp(1rem, 2.5vw, 1.5rem) 1.2rem;
  max-width: 66ch;
}

.tel-inline {
  font-weight: 700;
  white-space: nowrap;
  text-decoration-color: var(--red);
  text-underline-offset: 2px;
}

/* --------------------------------------------------------------- contact */

.contact-grid {
  display: grid;
  gap: var(--s6);
}

@media (min-width: 58rem) {
  .contact-grid {
    grid-template-columns: 0.95fr 1.05fr;
    align-items: start;
  }
}

.contact-aside .call-cards {
  margin-top: 1.5rem;
}

.contact-aside .call-card-alt,
.merci .call-card-alt {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.contact-aside .call-card-alt:hover,
.contact-aside .call-card-alt:focus-visible,
.merci .call-card-alt:hover,
.merci .call-card-alt:focus-visible {
  background: var(--red);
  border-color: var(--red);
}

.contact-mail {
  margin-top: 1.3rem;
  font-size: 0.95rem;
  color: var(--grey);
}

.contact-mail a {
  font-weight: 700;
  color: var(--ink);
}

.form {
  border: var(--rule);
  border-radius: var(--radius);
  background: var(--white);
  padding: clamp(1.2rem, 3vw, 1.8rem);
  display: grid;
  gap: 0.9rem;
}

.form-intro {
  font-weight: 700;
}

.form label {
  display: grid;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.form input,
.form select,
.form textarea {
  font-family: var(--body);
  font-size: 1rem;
  padding: 0.7rem 0.8rem;
  border: var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  width: 100%;
  text-transform: none;
  letter-spacing: normal;
}

.form textarea {
  resize: vertical;
}

.form ::placeholder {
  color: var(--grey);
  opacity: 1;
}

.form .hp {
  position: absolute;
  left: -9999px;
}

.form-note {
  font-size: 0.82rem;
  color: var(--grey);
}

.form-note + .form-note {
  margin-top: -0.4rem;
}

/* ---------------------------------------------------------------- footer */

.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding-block: 2.4rem 1.6rem;
}

.footer-inner {
  display: grid;
  gap: 1.4rem;
  font-size: 0.9rem;
}

@media (min-width: 40rem) {
  .footer-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  .footer-meta { grid-column: 1 / -1; }
}

@media (min-width: 62rem) {
  .footer-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-meta { grid-column: auto; }
}

/* Une activité = son nom, ce qu'elle fait, son numéro. Le filet rouge donne la
   couleur demandée par le client sans jamais mettre de texte rouge sur noir. */
.footer-activity {
  display: grid;
  justify-items: start;
  gap: var(--s1);
  padding-left: var(--s3);
  border-left: 3px solid var(--red);
}

.footer-meta {
  display: grid;
  gap: var(--s3);
}

.footer-brand {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.6rem;
  line-height: 1.05;
}

.footer-what {
  font-weight: 700;
  color: var(--paper);
}

.footer-zone {
  margin-top: calc(var(--s1) * -1);
  color: var(--grey-light);
}

.footer-tel {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  min-height: 48px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 2rem;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.footer-tel:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.footer-mail {
  color: var(--grey-light);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.footer-mail:hover { color: var(--paper); }

.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  align-items: center;
}

.footer-social span:first-child {
  color: var(--grey-light);
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  text-decoration-color: var(--red);
  text-underline-offset: 3px;
}

.footer-social a:hover {
  color: var(--red);
}

/* Repli tant que les URL des profils ne sont pas connues. */
.footer-social-fallback {
  font-weight: 700;
}

.footer-social:has(a:not([hidden])) .footer-social-fallback {
  display: none;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
}

.footer-links a:hover {
  color: var(--red);
}

.footer-legal {
  width: min(100%, var(--wide));
  margin: 1.8rem auto 0;
  padding-inline: var(--gutter);
  font-size: 0.8rem;
  color: var(--grey-light);
}

/* ------------------------------------------------------------ sticky CTA */

.sticky-cta {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 70;
  background: var(--ink);
  border-top: 2px solid var(--red);
  display: flex;
  gap: 0.6rem;
  padding: 0.6rem var(--gutter);
}

.sticky-cta .btn {
  flex: 1;
  padding: 0.72rem 0.5rem;
  font-size: 0.92rem;
  /* Un libellé d'appel qui passe à la ligne est illisible en urgence. */
  white-space: nowrap;
}

@media (max-width: 22.5rem) {
  .sticky-cta {
    gap: 0.4rem;
    padding-inline: 0.75rem;
  }

  .sticky-cta .btn {
    font-size: 0.86rem;
    gap: 0.35rem;
  }
}

@media (min-width: 64rem) {
  .sticky-cta {
    display: none;
  }
}

@media (max-width: 63.99rem) {
  body {
    padding-bottom: var(--sticky-h);
  }
}

/* ---------------------------------------------------------------- reveal */

/* Sans JS, rien n'est masqué : le contenu ne dépend jamais du script. */
.js .reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.32s ease-out, transform 0.32s ease-out;
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

.js #contact .reveal,
.js #contact.reveal {
  opacity: 1;
  transform: none;
}

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

  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------------- pages annexes */

.legal {
  padding-block: clamp(2.5rem, 6vw, 4rem);
  background: var(--paper);
}

.legal h1 {
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  margin-bottom: 1.4rem;
}

.legal h2 {
  font-size: clamp(1.4rem, 3.4vw, 1.9rem);
  margin-top: 2rem;
  margin-bottom: 0.6rem;
}

.legal p,
.legal li {
  max-width: 68ch;
}

.legal ul {
  padding-left: 1.2rem;
}

.legal p + p {
  margin-top: 0.8rem;
}

/* Page de remerciement après le formulaire : confirmer, puis redonner les deux numéros. */
.merci {
  padding-block: clamp(2.5rem, 6vw, 4rem);
  background: var(--paper);
}

.merci h1 {
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  max-width: 18ch;
  margin-bottom: var(--s3);
}

.merci h2 {
  font-size: clamp(1.4rem, 3.4vw, 1.9rem);
  margin-top: var(--s6);
  margin-bottom: 0.4rem;
}

.merci p {
  max-width: 60ch;
}

.merci-lede {
  font-size: 1.15rem;
}

.merci-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: var(--s4);
  background: var(--red);
  color: var(--paper);
  border-radius: var(--radius);
}

.merci-badge .icon {
  width: 2rem;
  height: 2rem;
}

.merci .call-cards {
  max-width: 40rem;
}

.merci-back {
  margin-top: var(--s5);
}

.kicker {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 0.7rem;
}

/* Contenu développé : situations, préparation et professionnels. */
.situations,
.intervention-grid,
.pro-grid,
.after-hours-grid,
.service-photos,
.service-details {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
}
.situation {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: var(--rule);
  border-radius: var(--radius);
  background: var(--white);
  transition: border-color 0.18s ease-out, background-color 0.18s ease-out;
}
.situation .btn { margin-top: auto; }
.situation p,
.steps p,
.pro-copy p,
.service-details p,
.after-hours p { max-width: 65ch; }
.need-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
  font-weight: 700;
}
.story-photo {
  margin: 0;
  min-width: 0;
  align-self: start;
  border: 2px solid currentColor;
  overflow: hidden;
}
.story-photo picture,
.offer-card picture,
.zone-visual picture { display: block; overflow: hidden; }
.story-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.story-photo figcaption {
  padding: 0.8rem 1rem;
  border-top: 2px solid currentColor;
  font-size: 0.9rem;
}
.story-photo img,
.offer-card img,
.zone-visual img { transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.offer-card { transition: border-color 0.18s ease-out; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: intervention; }
.steps li {
  counter-increment: intervention;
  position: relative;
  padding: 1.4rem 0 1.4rem 3.75rem;
  border-top: var(--rule);
}
.steps li::before {
  content: "0" counter(intervention);
  position: absolute;
  left: 0;
  top: 1.2rem;
  font: 800 2.5rem/1 var(--display);
  color: var(--red);
}
.steps h3 { margin-bottom: 0.65rem; }
.pro-copy > .lede { margin-top: 1rem; }
.pro-service { margin-top: 1.75rem; padding-top: 1.5rem; border-top: var(--rule); }
.pro-service p { margin-block: 0.75rem 1rem; }
.after-hours { padding-block: clamp(2.8rem, 6vw, 4rem); border-bottom: var(--rule); }
.after-hours-grid { align-items: center; }
.after-hours p { margin-block: 1rem 1.5rem; color: var(--grey-light); }
.after-hours img { aspect-ratio: 16 / 9; }
.service-details { margin-top: 2.5rem; }
.service-details article { border-top: 2px solid var(--paper); padding-top: 1.5rem; }
.service-details p { margin-top: 0.85rem; color: var(--grey-light); }
.livery-divider {
  height: clamp(2rem, 5vw, 4rem);
  background: var(--ink);
  display: flex;
  justify-content: flex-end;
  gap: clamp(0.7rem, 2vw, 2rem);
  padding-right: 12%;
  overflow: hidden;
}
.livery-divider span { width: 12%; background: var(--red); transform: skewX(-32deg); }
.livery-divider span:last-child { width: 35%; }
.service-ribbon {
  position: relative;
  background: var(--red);
  color: var(--paper);
  border-bottom: var(--rule);
  overflow: hidden;
}
.service-ribbon :focus-visible { outline-color: var(--paper); }
.ribbon-window { overflow: hidden; padding-block: 1.15rem; }
.ribbon-track { display: flex; width: max-content; animation: ribbon-travel 38s linear infinite; }
.ribbon-group { display: flex; flex: none; align-items: center; }
.ribbon-group span { display: flex; align-items: center; white-space: nowrap; font: 800 clamp(1.6rem, 3vw, 2.4rem)/1.1 var(--display); text-transform: uppercase; }
.ribbon-group span::after { content: ""; display: block; width: 0.5rem; height: 1.2rem; margin-inline: 2rem; background: var(--paper); transform: skewX(-25deg); }
.service-ribbon:hover .ribbon-track { animation-play-state: paused; }
@keyframes ribbon-travel { to { transform: translateX(-50%); } }
.js .cascade > .reveal:nth-child(2) { transition-delay: 60ms; }
.js .cascade > .reveal:nth-child(3) { transition-delay: 120ms; }
.js .cascade > .reveal:nth-child(4) { transition-delay: 180ms; }
.js .reveal:focus-within { opacity: 1; transform: none; transition-delay: 0s; }
.faq-list details[open] > p { animation: faq-open 0.24s ease-out; }
@keyframes faq-open { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.faq-list details[open] summary::after { color: var(--paper); }
.faq-list summary:focus-visible { outline-offset: -4px; }
.faq-list details[open] summary:focus-visible,
.hero :focus-visible { outline-color: var(--paper); }
.topbar-facts span::after { color: var(--grey-light); }
.footer-social a:hover,
.footer-links a:hover { color: var(--paper); text-decoration-thickness: 2px; }
@media (hover: hover) and (pointer: fine) {
  .situation:hover { border-color: var(--red); background: var(--paper-2); }
  .offer-card:hover { border-color: var(--red); }
  .story-photo:hover img,
  .offer-card:hover img,
  .zone-visual:hover img { transform: scale(1.025); }
}
@media (min-width: 48rem) {
  .situations,
  .service-photos,
  .service-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 58rem) {
  .intervention-grid { grid-template-columns: 1.1fr 0.9fr; }
  .pro-grid { grid-template-columns: 0.9fr 1.1fr; }
  .after-hours-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 61.99rem) {
  .brand,
  .footer-links a,
  .footer-social a,
  .contact-mail a,
  .tel-inline { min-height: 48px; display: inline-flex; align-items: center; }
  .brand { display: grid; align-content: center; }
  .form input,
  .form select { min-height: 48px; }
  .faq-list summary { min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .ribbon-track { animation: none; width: auto; }
  .ribbon-group { flex-wrap: wrap; gap: 1rem; padding-inline: var(--gutter); }
  .ribbon-group span { white-space: normal; font-size: 1.5rem; }
  .ribbon-group span::after,
  .ribbon-group[aria-hidden] { display: none; }
  .story-photo img,
  .offer-card img,
  .zone-visual img { transform: none !important; transition: none; }
  .faq-list details[open] > p { animation: none; }
  .js .cascade > .reveal { transition: none; }
}


/* ==========================================================================
   Composants synthétiques : tuiles à icône, pros, WhatsApp
   ========================================================================== */

.icon-xl {
  width: 1.75rem;
  height: 1.75rem;
}

.btn-sm {
  padding: 0.55rem 0.9rem;
  font-size: 0.9rem;
}

/* WhatsApp : vert de la marque, texte blanc (4,6:1). */
.btn-wa {
  background: #157a45;
  border-color: #157a45;
  color: var(--paper);
}

.btn-wa:hover,
.btn-wa:focus-visible {
  background: #0f5c33;
  border-color: #0f5c33;
}

/* --- Tuiles : quatre colonnes égales, hauteur alignée par la grille ------- */

.tiles {
  display: grid;
  gap: var(--gap);
  grid-template-columns: 1fr;
}

@media (min-width: 34rem) {
  .tiles {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 62rem) {
  .tiles {
    grid-template-columns: repeat(4, 1fr);
  }
}

.tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s2);
  padding: var(--s4);
  background: var(--white);
  border: var(--rule);
  border-radius: var(--radius);
  transition: transform 0.16s ease-out, border-color 0.16s ease-out;
}

.tile:hover {
  transform: translateY(-3px);
  border-color: var(--red);
}

.tile h3 {
  font-size: 1.3rem;
  line-height: 1.05;
}

.tile p {
  font-size: 0.95rem;
  color: var(--grey);
  flex: 1;
}

.tile .btn {
  margin-top: var(--s1);
}

.tile-icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex: none;
  background: var(--red);
  color: var(--paper);
  border-radius: var(--radius);
}

.tiles-dark .tile {
  background: var(--ink-2);
  border-color: var(--paper);
}

.tiles-dark .tile p {
  color: var(--grey-light);
}

.tiles-dark .tile:hover {
  border-color: var(--red);
}

/* --- Encart remorquage dans la zone -------------------------------------- */

.zone-tow {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s5);
  padding: var(--s4);
  background: var(--paper-2);
  border: var(--rule);
  border-radius: var(--radius);
}

.zone-tow h3 {
  font-size: 1.25rem;
}

.zone-tow p {
  font-size: 0.95rem;
  color: var(--grey);
  margin-top: 0.2rem;
}

.zone-tow .btn {
  grid-column: 1 / -1;
  justify-self: start;
}

@media (min-width: 34rem) {
  .zone-tow {
    grid-template-columns: auto 1fr auto;
  }

  .zone-tow .btn {
    grid-column: auto;
  }
}

/* --- Professionnels ------------------------------------------------------- */

.pro-grid {
  display: grid;
  gap: var(--s6);
  align-items: center;
}

@media (min-width: 58rem) {
  .pro-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.pro-visual {
  margin: 0;
  border: var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}

.pro-visual img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.pro-grid h2 {
  margin-top: var(--s3);
}

.check-list {
  list-style: none;
  margin: var(--s4) 0 var(--s5);
  padding: 0;
  display: grid;
  gap: var(--s2);
  font-weight: 700;
  font-size: 0.98rem;
}

.check-list li {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.check-list .icon {
  color: var(--red);
  flex: none;
}

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

.contact-alt {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s4);
}

/* Réseaux et fiche Google : visibles près des numéros, plus discrets que les appels. */
.contact-social {
  margin-top: var(--s4);
}

.contact-social-title {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: var(--s2);
}

.contact-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.contact-social .btn {
  padding: 0.65rem 1rem;
  font-size: 0.95rem;
}

/* --- Photos : le survol anime le cadrage, pas la mise en page ------------- */

.offer-card picture,
.zone-visual picture,
.pro-visual picture {
  overflow: hidden;
}

.offer-card img,
.zone-visual img,
.pro-visual img {
  transition: transform 0.4s ease-out;
}

.offer-card:hover img,
.zone-visual:hover img,
.pro-visual:hover img {
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .tile:hover,
  .offer-card:hover img,
  .zone-visual:hover img,
  .pro-visual:hover img {
    transform: none;
  }
}


/* ==========================================================================
   Bouton WhatsApp flottant, en bas à droite
   ========================================================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.wa-float {
  position: fixed;
  right: var(--s3);
  bottom: calc(var(--sticky-h) + var(--s3));
  z-index: 80;
  display: flex;
  align-items: center;
  gap: var(--s2);
  text-decoration: none;
}

@media (min-width: 64rem) {
  .wa-float {
    right: var(--s5);
    bottom: var(--s5);
  }
}

.wa-float-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  flex: none;
  order: 2;
  background: #157a45;
  color: var(--paper);
  border: var(--rule);
  border-radius: 50%;
}

.wa-float-btn .icon {
  width: 1.9rem;
  height: 1.9rem;
}

.wa-float-bubble {
  order: 1;
  max-width: 13.5rem;
  padding: var(--s2) var(--s3);
  background: var(--white);
  color: var(--ink);
  border: var(--rule);
  border-radius: var(--radius);
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.3;
  /* La bulle arrive après le premier coup d'œil, dit ce qu'elle a à dire, puis
     se replie pour ne pas masquer la page. Le survol la rappelle. */
  animation: wa-bubble 9s ease-out 1.6s both;
}

.wa-float-bubble strong {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.05rem;
  line-height: 1;
  margin-bottom: 0.2rem;
  color: #157a45;
}

.wa-float:hover .wa-float-bubble strong,
.wa-float:focus-visible .wa-float-bubble strong {
  color: #6fd39c;
}

@keyframes wa-bubble {
  0% {
    opacity: 0;
    transform: translateX(0.6rem);
  }
  6%,
  85% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: translateX(0.6rem);
    visibility: hidden;
  }
}

.wa-float:hover .wa-float-bubble,
.wa-float:focus-visible .wa-float-bubble {
  animation: none;
  opacity: 1;
  visibility: visible;
  transform: none;
}

.wa-float:hover .wa-float-btn,
.wa-float:focus-visible .wa-float-btn {
  background: #0f5c33;
}

.wa-float:hover .wa-float-bubble,
.wa-float:focus-visible .wa-float-bubble {
  background: var(--ink);
  color: var(--paper);
}

/* Le bouton pulse doucement tant qu'on ne l'a pas survolé : il signale sa
   présence sans bouger la mise en page. */
.wa-float-btn::after {
  content: "";
  position: absolute;
  width: 3.5rem;
  height: 3.5rem;
  border: 2px solid #157a45;
  border-radius: 50%;
  animation: wa-pulse 2.8s ease-out infinite;
}

@keyframes wa-pulse {
  0% {
    opacity: 0.7;
    transform: scale(1);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(1.45);
  }
}

.wa-float:hover .wa-float-btn::after {
  animation: none;
}

/* Sur mobile, la bulle complète mangeait les trois quarts de la largeur, et
   surtout elle recouvrait les deux numéros du premier écran. Elle est donc
   masquée tant que le hero est à l'écran : app.js pose .wa-ready sur <body>
   quand le hero est passé. Sans JS, pas de bulle sur mobile, et c'est très bien :
   un numéro masqué coûte plus cher qu'un message manqué. */
@media (max-width: 62rem) {
  .wa-long {
    display: none;
  }

  .wa-float-bubble {
    display: none;
    max-width: 9.5rem;
    font-size: 0.78rem;
    animation-delay: 0.2s;
  }

  .wa-float-bubble strong {
    font-size: 0.95rem;
  }

  body.wa-ready .wa-float-bubble {
    display: block;
  }
}

@media (max-width: 20rem) {
  .wa-float-bubble {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wa-float-bubble {
    animation: none;
    opacity: 1;
    visibility: visible;
  }

  .wa-float-btn::after {
    animation: none;
    opacity: 0;
  }
}


/* Rappel des zones et prestations en pied de page : utile aux moteurs, discret
   à l'œil. Pas de bourrage : c'est la reprise fidèle de ce que dit le flyer. */
.footer-seo {
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: 1px solid var(--grey);
  display: grid;
  gap: var(--s2);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--grey-light);
}

.footer-seo strong {
  color: var(--paper);
}