/* ==========================================================================
   Info-Concept — feuille de style
   Couleurs reprises du site d'origine : orange #DB5837, bleu #457B9D,
   bleu pâle #C8D5DC, gris #33373D / #1B1B1B, fond #F9F9F9.
   Polices d'origine (Roboto Slab, Jura, Roboto), hébergées localement.
   ========================================================================== */

@font-face {
  font-family: "Roboto Slab";
  src: url("../fonts/roboto-slab-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Jura";
  src: url("../fonts/jura-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/roboto-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --orange: #DB5837;
  --orange-ink: #B5411F;   /* orange assombri : petits textes sur fond clair (contraste AA) */
  --blue: #457B9D;
  --blue-ink: #35627F;
  --blue-pale: #C8D5DC;
  --mist: #EFF3F4;         /* fond exact de la photo d'accueil */
  --paper: #F9F9F9;
  --ink: #33373D;
  --black: #1B1B1B;
  --dark: #141414;
  --line: rgba(51, 55, 61, .2);
  --line-light: rgba(249, 249, 249, .22);

  --slab: "Roboto Slab", Rockwell, Georgia, serif;
  --tech: "Jura", "Trebuchet MS", Verdana, sans-serif;
  --body: "Roboto", system-ui, "Segoe UI", Arial, sans-serif;

  --gut: clamp(20px, 4.5vw, 56px);
  --spring: cubic-bezier(.2, 1.35, .35, 1);
  --out: cubic-bezier(.2, .7, .2, 1);
}

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

html {
  scroll-padding-top: 92px;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.125rem/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { max-width: 100%; }
[hidden] { display: none !important; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; }
address { font-style: normal; }
::selection { background: var(--orange); color: #fff; }

:focus-visible {
  outline: 3px solid var(--blue-ink);
  outline-offset: 3px;
  border-radius: 3px;
}
.ethic :focus-visible, .ftr :focus-visible, .top :focus-visible { outline-color: var(--blue-pale); }
.contact :focus-visible { outline-color: var(--dark); }

.wrap {
  width: min(1240px, 100% - 2 * var(--gut));
  margin-inline: auto;
}
.sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1.15em; height: 1.15em; flex: none; }
.hot { color: var(--orange); }

.skip {
  position: absolute;
  left: 12px; top: -80px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--black);
  color: #fff;
  font-weight: 700;
  border-radius: 6px;
}
.skip:focus { top: 12px; }

/* ---------- Boutons : une seule famille, partout la même ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: 56px;
  padding: .5em 1.3em;
  border: 2px solid var(--black);
  border-radius: 6px;
  font: 700 1.1875rem/1.15 var(--body);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  transition: transform .18s var(--out), box-shadow .18s var(--out), background-color .18s, color .18s;
}
.btn small {
  display: block;
  margin-top: 3px;
  font: 700 .75rem/1 var(--tech);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.btn--primary {
  background: var(--orange);
  color: #fff;
  box-shadow: 4px 4px 0 var(--black);
}
.btn--primary:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--black); }
.btn--primary:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--black); }
.btn--line { background: transparent; color: var(--black); }
.btn--line:hover { background: var(--black); color: #fff; }
.btn--dark { background: var(--dark); border-color: var(--dark); color: #fff; }
.btn--dark:hover { background: #fff; color: var(--dark); }
.btn--small { min-height: 46px; padding: .35em 1em; font-size: 1rem; }

.lnk {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  min-height: 44px;
  color: var(--black);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  transition: color .18s;
}
.lnk:hover { color: var(--orange-ink); }
.lnk small {
  font: 700 .7rem/1 var(--tech);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
}
.lnk--quiet { font-weight: 500; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: .9em;
  margin: 0 0 1.5rem;
  font: 700 .8125rem/1 var(--tech);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--orange-ink);
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; }
.eyebrow--light { color: var(--blue-pale); }
.eyebrow--onorange { color: var(--dark); }

/* ---------- Bandeau du haut ---------- */
.top {
  background: var(--black);
  color: #fff;
  font: 500 .875rem/1.2 var(--body);
}
.top__in {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.top__item {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
}
.top__item:hover span { text-decoration: underline; text-underline-offset: 3px; }
.top__item .ico { color: var(--orange); }
.top__item--tel { font-weight: 700; white-space: nowrap; }

/* ---------- En-tête ---------- */
.hdr {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--mist);
  transition: box-shadow .25s;
}
.hdr.is-stuck { box-shadow: 0 1px 0 var(--line), 0 10px 24px -18px rgba(27, 27, 27, .35); }
.hdr__in {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
  min-height: 72px;
}
.brand {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-right: auto;
  color: var(--orange);
  text-decoration: none;
}
.brand__logo { width: 40px; height: 40px; transition: transform .7s var(--out); }
.brand:hover .brand__logo { transform: rotate(90deg); }
.brand__name {
  font: 700 1.35rem/1 var(--tech);
  letter-spacing: .07em;
  white-space: nowrap;
  color: var(--black);
}
.brand--light .brand__name { color: #fff; }

.nav__list {
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__list a {
  position: relative;
  display: block;
  padding: 14px 13px;
  color: var(--black);
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none;
}
.nav__list a::after {
  content: "";
  position: absolute;
  left: 13px; right: 13px; bottom: 8px;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--out);
}
.nav__list a:hover::after,
.nav__list a[aria-current="true"]::after { transform: scaleX(1); }
.nav__extra { display: none; }

.hdr__support { position: relative; z-index: 2; }
.burger { display: none; }

/* ---------- Ma mission ---------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--mist);
}
.hero__in {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  min-height: clamp(540px, calc(100svh - 116px), 800px);
  padding-block: clamp(40px, 6vh, 72px) clamp(56px, 9vh, 104px);
  pointer-events: none;
}
.hero__text { max-width: min(57%, 700px); pointer-events: auto; }

.hero__title { color: var(--black); }
.hero__big {
  display: block;
  font: 800 clamp(2.5rem, .9rem + 5vw, 5.4rem)/1.02 var(--slab);
  letter-spacing: -.028em;
}
.hero__small {
  display: block;
  max-width: 20ch;
  margin-top: .85em;
  font: 300 clamp(1.3rem, 1rem + 1.25vw, 2rem)/1.25 var(--slab);
  color: var(--ink);
  transition: opacity .6s;
}
.w, .c { display: inline-block; }

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 18px;
  margin-top: clamp(28px, 4.5vh, 46px);
}
.hero__note {
  margin: 22px 0 0;
  font: 700 .95rem/1.3 var(--tech);
  letter-spacing: .05em;
  color: var(--ink);
}

.hero__visual {
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: min(77%, calc(50% + 430px));
  height: 94%;
  aspect-ratio: 16 / 9;
  transform: translateX(-61%);
}
.hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .9s;
}
.img-ko > img { visibility: hidden; }

/* Petite fenêtre « système » à côté du client */
.sys {
  position: absolute;
  left: 37.5%;
  top: 19%;
  display: grid;
  width: max-content;
  max-width: 290px;
  font-family: var(--tech);
}
.sys__face {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 8px 10px 14px;
  background: #fff;
  border: 2px solid var(--black);
  border-radius: 6px;
  box-shadow: 4px 4px 0 var(--black);
  transition: opacity .3s, transform .45s var(--spring), visibility 0s;
}
.sys__face p {
  display: grid;
  gap: 2px;
  margin: 0;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
}
.sys__face b { font-size: .98rem; font-weight: 700; color: var(--black); letter-spacing: .02em; }
.sys__ico { width: 26px; height: 26px; }
.sys__face--err .sys__ico { color: var(--orange-ink); }
.sys__face--ok .sys__ico { padding: 5px; background: var(--blue-ink); color: #fff; border-radius: 50%; }
.sys__x, .sys__replay {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--ink);
}
.sys__replay { cursor: pointer; transition: background-color .18s; }
.sys__replay .ico { transition: transform .5s var(--out); }
.sys__replay:hover { background: var(--mist); }
.sys__replay:hover .ico { transform: rotate(-180deg); }
html:not(.js) .sys__replay { visibility: hidden; }
.sys__face--err { opacity: 0; visibility: hidden; transform: scale(.9) rotate(-3deg); }

/* Curseur du technicien */
.rc {
  position: absolute;
  top: 0; left: 0;
  z-index: 6;
  display: flex;
  align-items: flex-start;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.rc.is-on { opacity: 1; }
.rc__arrow {
  flex: none;
  width: 24px; height: 28px;
  color: var(--orange);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .25));
  transform-origin: 10% 10%;
  transition: transform .12s;
}
.rc.is-down .rc__arrow { transform: scale(.8); }
.rc__tag {
  margin: 20px 0 0 -3px;
  padding: 5px 9px 6px;
  background: var(--blue-ink);
  color: #fff;
  font: 700 .75rem/1 var(--tech);
  letter-spacing: .06em;
  white-space: nowrap;
  border-radius: 2px 9px 9px 9px;
}
.rc::before {
  content: "";
  position: absolute;
  left: -14px; top: -14px;
  width: 32px; height: 32px;
  border: 2px solid var(--orange);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.3);
}
.rc.is-down::before { animation: ping .45s var(--out); }
@keyframes ping {
  0% { opacity: .9; transform: scale(.3); }
  100% { opacity: 0; transform: scale(1.5); }
}

/* --- État « en panne » (uniquement pendant l'introduction) --- */
html.intro .w { transition: transform .6s var(--spring), text-shadow .3s; transition-delay: calc(var(--i, 0) * 40ms); }
html.intro .c { transition: transform .5s var(--spring); transition-delay: calc(var(--i, 0) * 22ms); }
html.intro .js-fall { transition: transform .55s var(--spring), box-shadow .18s; }

html.brk-a .hero__big .w:not(.w--letters) {
  transform: translate(var(--x), var(--y)) rotate(var(--r));
  text-shadow: -.035em 0 0 rgba(69, 123, 157, .5), .035em 0 0 rgba(219, 88, 55, .45);
}
html.brk-a .hero__small { opacity: .35; }
html.brk-b .c { transform: translateY(var(--y)) rotate(var(--r)); }
html.brk-c .js-fall { transform: translate(-10px, 46px) rotate(9deg); }
html.brk-d .hero__img { opacity: .3; }
html.brk-d .sys__face--err { opacity: 1; visibility: visible; transform: none; animation: shake 1.2s steps(1) infinite; }
html.brk-d .sys__face--ok { opacity: 0; visibility: hidden; transform: scale(.9); }
@keyframes shake {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  20% { translate: -2px 1px; rotate: -.8deg; }
  40% { translate: 2px -1px; rotate: .6deg; }
  60% { translate: -1px -1px; rotate: 0deg; }
  80% { translate: 1px 2px; rotate: .9deg; }
}

/* ---------- Mon éthique ---------- */
.ethic {
  background: var(--black);
  color: var(--paper);
  padding-block: clamp(72px, 11vw, 150px);
}
.ethic__lead {
  max-width: 21ch;
  margin: 0;
  font: 300 clamp(1.9rem, 1rem + 3.6vw, 4.2rem)/1.1 var(--slab);
  letter-spacing: -.02em;
  color: #fff;
}
.strike {
  position: relative;
  display: inline-block;
  font-weight: 700;
  color: var(--blue-pale);
  white-space: nowrap;
}
.strike::after {
  content: "";
  position: absolute;
  left: -.06em; right: -.06em; top: 56%;
  height: .09em;
  background: var(--orange);
  transform-origin: left;
}
html.js .strike::after { transform: scaleX(0); transition: transform .6s var(--out) .55s; }
html.js .strike--2::after { transition-delay: 1.05s; }
html.js .in .strike::after { transform: scaleX(1); }

.ethic__sign {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: clamp(28px, 4vw, 48px) 0 0;
  font: 600 1.05rem/1.3 var(--tech);
  letter-spacing: .04em;
  color: var(--blue-pale);
}
.ethic__logo { flex: none; width: 34px; height: 34px; color: var(--orange); }

.tenets {
  margin: clamp(56px, 8vw, 110px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-light);
}
.tenet {
  display: grid;
  grid-template-columns: 3fr 5fr 5fr;
  gap: 12px clamp(24px, 3vw, 48px);
  align-items: baseline;
  padding-block: clamp(28px, 4vw, 52px);
  border-bottom: 1px solid var(--line-light);
}
.tenet__label {
  margin: 0;
  font: 700 .8125rem/1.35 var(--tech);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue-pale);
}
.tenet__title {
  font: 700 clamp(1.6rem, 1.1rem + 1.7vw, 2.5rem)/1.12 var(--slab);
  letter-spacing: -.015em;
  color: #fff;
}
.tenet__txt { max-width: 46ch; margin: 0; color: rgba(249, 249, 249, .88); }

.remote {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  margin-top: clamp(56px, 8vw, 110px);
}
.remote__photo { position: relative; margin: 0; border-radius: 4px; }
.remote__photo.img-ko { background: #2a2d32; }
.remote__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 4px;
}
.remote__photo figcaption {
  position: absolute;
  left: clamp(12px, 3%, 28px);
  bottom: clamp(12px, 5%, 28px);
  display: flex;
  align-items: flex-start;
  max-width: calc(100% - 24px);
}
.remote__photo figcaption span {
  margin: 20px 0 0 -3px;
  padding: 8px 12px 9px;
  background: #fff;
  color: var(--black);
  border: 2px solid var(--black);
  border-radius: 2px 9px 9px 9px;
  font: 700 .88rem/1.25 var(--tech);
  letter-spacing: .02em;
}
.remote__body { display: grid; gap: 28px; }
.remote__body .tenet__label { margin-bottom: 12px; }
.remote__body .tenet__title { margin-bottom: 16px; }

.gauge { position: relative; width: clamp(170px, 19vw, 230px); aspect-ratio: 1; }
.gauge__ring { display: block; width: 100%; height: 100%; overflow: visible; }
.g-on { fill: var(--orange); }
.g-off { fill: rgba(200, 213, 220, .3); }
html.js .gauge .g-on { fill: rgba(200, 213, 220, .3); transition: fill .3s; transition-delay: calc(var(--i) * 60ms + 250ms); }
html.js .gauge.in .g-on { fill: var(--orange); }
.gauge__num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin: 0;
  padding-top: 31%;
  font: 800 clamp(3rem, 5vw, 4.1rem)/1 var(--slab);
  letter-spacing: -.03em;
  color: #fff;
}
.gauge__num small { margin-left: .1em; font-size: .45em; color: var(--blue-pale); }

/* ---------- Dépannage ---------- */
.steps { padding-block: clamp(72px, 11vw, 150px); overflow-x: clip; }
.sec-title {
  max-width: 15ch;
  font: 800 clamp(2.1rem, 1.1rem + 3.6vw, 4.2rem)/1.04 var(--slab);
  letter-spacing: -.025em;
  color: var(--black);
}
.steps__zone { position: relative; margin-top: clamp(48px, 7vw, 96px); --p: 1; }
html.js .steps__zone { --p: 0; }

.track { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--line); }
.track__fill {
  position: absolute;
  inset: 0;
  background: var(--orange);
  transform: scaleX(var(--p));
  transform-origin: left top;
}
.rc--track {
  top: -2px;
  left: calc(var(--p) * 100%);
  opacity: 1;
  margin-left: -3px;
}
html:not(.js) .rc--track, .steps__zone.is-done .rc--track { opacity: 0; visibility: hidden; }

.steps__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 64px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.step { position: relative; padding-top: 48px; }
.step::before {
  content: "";
  position: absolute;
  top: -6px; left: 0;
  width: 14px; height: 14px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  transition: background-color .4s, border-color .4s, transform .5s var(--spring);
}
.step__n {
  display: block;
  margin-bottom: 20px;
  font: 800 clamp(5rem, 9vw, 8.5rem)/.85 var(--slab);
  letter-spacing: -.04em;
  color: var(--orange);
}
.step__title {
  display: flex;
  align-items: center;
  gap: .45em;
  margin-bottom: .5em;
  font: 700 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.15 var(--slab);
  color: var(--black);
}
.step p { max-width: 34ch; margin: 0 0 .9em; }
.step__more { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; }
.step__ok {
  width: 1.25em; height: 1.25em;
  padding: 5px;
  background: var(--blue-ink);
  color: #fff;
  border-radius: 50%;
}
.tag {
  display: inline-block;
  padding: 6px 10px 7px;
  background: #fff;
  color: var(--black);
  border: 2px solid var(--black);
  border-radius: 4px;
  font: 700 .78rem/1 var(--tech);
  letter-spacing: .12em;
  text-transform: uppercase;
  transform: rotate(-2.5deg);
}

/* États pilotés par le défilement (seulement avec JS) */
html.js .step__n {
  color: transparent;
  -webkit-text-stroke: 2px var(--ink);
  transition: color .5s, -webkit-text-stroke-color .5s;
}
html.js .step > :not(.step__n) { opacity: .55; transition: opacity .5s; }
html.js .step__ok { transform: scale(0) rotate(-45deg); transition: transform .5s var(--spring) .2s; }
html.js .step.is-on::before { background: var(--orange); border-color: var(--orange); transform: scale(1.25); }
html.js .step.is-on .step__n { color: var(--orange); -webkit-text-stroke-color: var(--orange); }
html.js .step.is-on > :not(.step__n) { opacity: 1; }
html.js .step.is-on .step__ok { transform: none; }

/* ---------- Avis ---------- */
.reviews { padding-bottom: clamp(72px, 11vw, 150px); }
.reviews__in { padding-top: clamp(40px, 6vw, 72px); border-top: 2px solid var(--black); }
.reviews__word {
  margin: 0 0 0 -.04em;
  font: 900 min(15.2vw, 12.4rem)/.84 var(--slab);
  letter-spacing: -.05em;
  text-transform: uppercase;
  color: var(--black);
}
.reviews__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 36px;
  margin-top: clamp(24px, 3vw, 40px);
}
.stars { display: flex; gap: 4px; margin: 0; font-size: 2.1rem; color: var(--orange); }
html.js .stars .ico { transform: scale(0) rotate(-40deg); transition: transform .5s var(--spring); }
html.js .stars .ico:nth-child(2) { transition-delay: .09s; }
html.js .stars .ico:nth-child(3) { transition-delay: .18s; }
html.js .stars .ico:nth-child(4) { transition-delay: .27s; }
html.js .stars .ico:nth-child(5) { transition-delay: .36s; }
html.js .in .stars .ico { transform: none; }
.reviews__base {
  margin: 0;
  font: 700 1.05rem/1.2 var(--tech);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--black);
}

/* ---------- Contact ---------- */
.contact {
  background: var(--orange);
  color: #fff;
  padding-block: clamp(64px, 9vw, 124px);
}
.contact__in {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 28px clamp(32px, 5vw, 80px);
  align-items: end;
}
.contact__in > .eyebrow { grid-column: 1 / -1; margin-bottom: 1rem; }
.contact__label {
  margin: 0 0 10px;
  font: 700 .8125rem/1 var(--tech);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dark);
}
.contact__num {
  display: inline-block;
  padding-bottom: .1em;
  font: 800 clamp(2.6rem, 1rem + 7.2vw, 7rem)/1 var(--slab);
  letter-spacing: -.035em;
  white-space: nowrap;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(var(--dark), var(--dark)) left bottom / 0 .07em no-repeat;
  transition: background-size .5s var(--out);
}
.contact__num:hover, .contact__num:focus-visible { background-size: 100% .07em; }
.contact__addr address {
  margin-bottom: 22px;
  font: 500 clamp(1.3rem, 1rem + 1vw, 1.75rem)/1.3 var(--slab);
  color: var(--dark);
}

/* ---------- Pied de page ---------- */
.ftr { background: var(--black); color: var(--paper); padding-block: 40px; }
.ftr__in { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; }
.ftr .brand { margin-right: 0; }
.ftr__nav { display: flex; flex-wrap: wrap; gap: 0 24px; margin: 0; padding: 0; list-style: none; }
.ftr__nav a {
  display: inline-block;
  padding: 11px 0;
  color: var(--paper);
  font-size: 1rem;
  text-decoration: none;
}
.ftr__nav a:hover { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.ftr__copy { margin: 0 0 0 auto; font-size: .9rem; color: var(--blue-pale); }

/* ---------- Appel en un geste (mobile) + message de confirmation ---------- */
.callbar { display: none; }
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 60;
  width: max-content;
  max-width: min(440px, calc(100% - 32px));
  padding: 14px 18px;
  background: var(--dark);
  color: #fff;
  border: 2px solid #fff;
  border-radius: 6px;
  font-size: 1rem;
  line-height: 1.4;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 16px);
  transition: opacity .3s, transform .3s var(--out), visibility 0s .3s;
}
.toast.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }

/* ---------- Apparitions au défilement (seulement avec JS) ---------- */
html.js .rv {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--out), transform .7s var(--out);
}
html.js .rv.in { opacity: 1; transform: none; }
html.js .rv-clip > * { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(.7, 0, .2, 1); }
html.js .rv-clip > figcaption { clip-path: none; opacity: 0; transform: translateY(10px); transition: opacity .5s .9s, transform .5s var(--out) .9s; }
html.js .rv-clip.in > * { clip-path: inset(0); }
html.js .rv-clip.in > figcaption { clip-path: none; opacity: 1; transform: none; }

/* ==========================================================================
   Adaptation tablette / mobile
   ========================================================================== */
@media (max-width: 1080px) {
  .nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 140px var(--gut) 40px;
    background: var(--mist);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity .25s, transform .3s var(--out), visibility 0s .3s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nav__list { flex-direction: column; gap: 0; border-top: 2px solid var(--black); }
  .nav__list a {
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
    font: 700 1.7rem/1.1 var(--slab);
  }
  .nav__list a::after { display: none; }
  .nav__list a[aria-current="true"] { color: var(--orange-ink); }
  .nav__extra { display: grid; gap: 14px; }
  .nav__extra .btn { width: 100%; justify-content: flex-start; }

  .burger {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 0 12px;
    background: transparent;
    border: 2px solid var(--black);
    border-radius: 6px;
    color: var(--black);
    font: 700 1rem/1 var(--body);
    cursor: pointer;
  }
  .burger__bars { display: grid; gap: 4px; width: 20px; }
  .burger__bars i { height: 2px; background: currentColor; transition: transform .3s var(--out), opacity .2s; }
  .burger[aria-expanded="true"] .burger__bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .burger[aria-expanded="true"] .burger__bars i:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] .burger__bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  html.menu-open { overflow: hidden; }
  html:not(.js) .burger { display: none; }
  html:not(.js) .nav { position: static; opacity: 1; visibility: visible; transform: none; padding: 0; }
}

@media (max-width: 960px) {
  .hero__in { min-height: 0; padding-block: 36px 0; pointer-events: auto; }
  .hero__text { max-width: none; }
  .hero__small { max-width: 24ch; }
  .hero__visual {
    position: relative;
    left: auto;
    height: auto;
    aspect-ratio: auto;
    transform: none;
    margin-top: 28px;
  }
  .hero { display: flex; flex-direction: column-reverse; }
  .hero__img {
    width: 100%;
    height: min(86vw, 440px);
    object-position: 61% 0;
  }
  .sys { left: var(--gut); top: 14px; width: max-content; }
  .sys__face p span { display: none; }
  .hero__big { font-size: clamp(2.2rem, 10.2vw, 4.6rem); }

  .tenet { grid-template-columns: 1fr; }
  .remote { grid-template-columns: 1fr; }
  .remote__body { grid-template-columns: auto 1fr; align-items: center; }
  .contact__in { grid-template-columns: 1fr; align-items: start; }
  .ftr__copy { margin-left: 0; width: 100%; }
}

@media (max-width: 820px) {
  .steps__list { grid-template-columns: 1fr; gap: 44px; }
  .step { padding: 0 0 0 44px; }
  .step::before { top: 8px; left: 0; }
  .track { left: 6px; right: auto; top: 8px; bottom: 0; width: 2px; height: auto; }
  .track__fill { transform: scaleY(var(--p)); }
  .rc--track { top: calc(var(--p) * 100%); left: 0; margin: -2px 0 0 4px; }
  .rc--track .rc__tag { display: none; }
  .step__n { font-size: 5.2rem; }
}

@media (max-width: 640px) {
  body { font-size: 1.0625rem; }
  .top__item--tel { display: none; }
  .top__in { justify-content: flex-start; }
  .hdr__in { min-height: 64px; }
  .hdr__support { display: none; }
  .brand__logo { width: 34px; height: 34px; }
  .brand__name { font-size: 1.15rem; }
  .hero__cta .btn { width: 100%; justify-content: flex-start; }
  .remote__body { grid-template-columns: 1fr; }
  .stars { font-size: 1.8rem; }

  .ftr { padding-bottom: 104px; }
  .callbar {
    position: fixed;
    left: 12px; right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6em;
    min-height: 56px;
    background: var(--orange);
    color: #fff;
    border: 2px solid var(--black);
    border-radius: 6px;
    box-shadow: 4px 4px 0 var(--black);
    font: 700 1.1875rem/1 var(--body);
    text-decoration: none;
    transform: translateY(160%);
    visibility: hidden;
    transition: transform .4s var(--out), visibility 0s .4s;
  }
  .callbar.is-on { transform: none; visibility: visible; transition-delay: 0s; }
  .toast { bottom: 88px; }
}

@media (max-width: 360px) {
  .brand { gap: 8px; }
  .brand__name { font-size: 1rem; letter-spacing: .04em; }
  .burger { padding: 0 10px; }
  .top { font-size: .8125rem; }
}

/* ---------- Mouvement réduit : tout est affiché, rien ne bouge ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
}

@media print {
  .top, .hdr, .callbar, .toast, .rc, .sys { display: none !important; }
  html.js .rv, html.js .rv-clip > * { opacity: 1; transform: none; clip-path: none; }
}