/* ============================================================
   SMART TOPO — chrome & components
   ============================================================ */

/* ============================================================
   header
   ============================================================ */

.hdr {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  color: var(--paper);
  transition: height .4s var(--ease), background-color .4s var(--ease), color .4s var(--ease);
}
.hdr::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  border-bottom: 1px solid rgba(244, 242, 236, .12);
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
  z-index: -1;
}
.hdr.is-stuck { --header-h: 4.25rem; }
.hdr.is-stuck::after { opacity: 1; transform: none; }
/* over light sections before it sticks */
.hdr.is-light:not(.is-stuck) { color: var(--ink); }

.hdr__in {
  width: 100%;
  max-width: var(--wrap-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--s-5);
}

.brand {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-right: auto;
  min-width: 0;
}
/* The lockup is the supplied identity, traced to SVG. Never recoloured. */
.brand__mark { width: auto; height: 2.9rem; flex: none; }
/* flex-start, or the SVG stretches to the strapline's width and
   letterboxes itself inside the gap */
.brand__txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.brand__word { display: block; width: auto; height: 1rem; }
.hdr.is-stuck .brand__mark { height: 2.4rem; }
.brand__sub {
  font-family: var(--f-mono);
  font-size: .55rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  opacity: .66;
  margin-top: .46rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* On a phone the header keeps the wordmark and the menu button only;
   the descriptor reappears at the foot of the drawer. */
@media (max-width: 34rem) {
  .brand__mark, .hdr.is-stuck .brand__mark { height: 2.25rem; }
  .brand__word { height: .86rem; }
  .brand__sub  { display: none; }
}

/* --- primary nav --- */
.nav { display: none; }
@media (min-width: 64rem) { .nav { display: flex; align-items: center; gap: clamp(1rem, .2rem + 1.5vw, 2.1rem); } }

.nav__link {
  position: relative;
  font-size: .87rem;
  font-weight: 500;
  letter-spacing: .01em;
  padding-block: .45rem;
  white-space: nowrap;
  opacity: .82;
  transition: opacity .25s;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: .1rem;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .42s var(--ease-out);
}
.nav__link:hover { opacity: 1; }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav__link[aria-current="page"] { opacity: 1; }

.hdr__tools { display: flex; align-items: center; gap: var(--s-4); flex: none; }

/* --- language switch --- */
/* The header always sits over a dark band, so the switch is
   coloured directly rather than inheriting a variable palette. */
.lang {
  display: flex;
  align-items: center;
  font-family: var(--f-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .14em;
  border: 1px solid rgba(244, 242, 236, .26);
}
.lang__btn {
  padding: .38rem .6rem;
  line-height: 1;
  color: rgba(244, 242, 236, .62);
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.lang__btn:hover { color: #F4F2EC; }
.lang__btn[aria-pressed="true"] { background: #F4F2EC; color: #0E1726; }
.hdr.is-light:not(.is-stuck) .lang { border-color: rgba(14, 23, 38, .26); }
.hdr.is-light:not(.is-stuck) .lang__btn { color: rgba(14, 23, 38, .62); }
.hdr.is-light:not(.is-stuck) .lang__btn:hover { color: #0E1726; }
.hdr.is-light:not(.is-stuck) .lang__btn[aria-pressed="true"] { background: #0E1726; color: #F4F2EC; }

/* --- burger --- */
.burger {
  --bar: currentColor;
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  margin-right: -.6rem;
}
@media (min-width: 64rem) { .burger { display: none; } }
.burger i {
  display: block; position: relative;
  width: 1.35rem; height: 1px; background: var(--bar);
  transition: background-color .2s .15s;
}
.burger i::before, .burger i::after {
  content: ""; position: absolute; left: 0;
  width: 100%; height: 1px; background: var(--bar);
  transition: transform .35s var(--ease);
}
.burger i::before { top: -.38rem; }
.burger i::after  { top: .38rem; }
.burger[aria-expanded="true"] i { background: transparent; transition-delay: 0s; }
.burger[aria-expanded="true"] i::before { transform: translateY(.38rem) rotate(45deg); }
.burger[aria-expanded="true"] i::after  { transform: translateY(-.38rem) rotate(-45deg); }

/* --- mobile drawer --- */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: var(--ink);
  color: var(--paper);
  padding: calc(var(--header-h) + 2rem) var(--gutter) 2.5rem;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .7s var(--ease-out);
  visibility: hidden;
}
.drawer.is-open { clip-path: inset(0 0 0 0); visibility: visible; }
@media (min-width: 64rem) { .drawer { display: none; } }

.drawer__nav { display: flex; flex-direction: column; margin-top: auto; }
.drawer__link {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-block: .8rem;
  border-top: 1px solid rgba(244, 242, 236, .13);
  font-family: var(--f-display);
  font-size: clamp(1.7rem, 1.1rem + 3.4vw, 2.6rem);
  line-height: 1.05;
  opacity: 0;
  transform: translateY(1.2rem);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.drawer.is-open .drawer__link { opacity: 1; transform: none; }
.drawer__link .num { font-size: .68rem; color: var(--accent-text); letter-spacing: .1em; }
.drawer__foot {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(244, 242, 236, .13);
  display: grid; gap: .4rem;
  font-family: var(--f-mono); font-size: .78rem;
  color: var(--slate-2);
}
.drawer__foot a:hover { color: var(--paper); }

/* ============================================================
   scroll HUD — fixed readout, bottom-right
   ============================================================ */

.hud {
  position: fixed;
  right: 1.05rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  font-family: var(--f-mono);
  font-size: .58rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--paper);
  mix-blend-mode: difference;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s;
}
/* only where the page gutter is wide enough to hold it clear of text */
@media (min-width: 78rem) { .hud { display: flex; } }
.hud.is-on { opacity: .8; }
.hud > span:not(.hud__bar) { writing-mode: vertical-rl; }
.hud__bar {
  width: 1px; height: 6.5rem;
  background: currentColor; opacity: .3;
  position: relative;
}
.hud__bar i {
  position: absolute; inset: 0;
  background: currentColor;
  transform: scaleY(var(--p, 0));
  transform-origin: top;
}

/* ============================================================
   buttons
   ============================================================ */

.btn {
  --btn-fg: var(--paper);
  --btn-bg: var(--ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .85em;
  padding: .95rem 1.6rem;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--btn-fg);
  background: var(--btn-bg);
  overflow: hidden;
  isolation: isolate;
  transition: color .35s var(--ease);
}
.btn::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--accent-strong);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .45s var(--ease-out);
  z-index: -1;
}
.btn:hover::before { transform: scaleY(1); }
.btn:hover { color: var(--paper); }
.btn svg { width: .95em; height: .95em; flex: none; transition: transform .4s var(--ease-out); }
.btn:hover svg { transform: translateX(.3em); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  border: 1px solid var(--rule);
}
.btn--accent { --btn-bg: var(--accent-strong); }
.btn--accent::before { background: var(--ink); }
.btn--lg { padding: 1.15rem 2rem; }

/* inline arrow link */
.alink {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--rule);
  transition: border-color .35s, color .35s;
}
.alink:hover { color: var(--accent-text); border-color: var(--accent-text); }
.alink svg { width: .9em; height: .9em; transition: transform .4s var(--ease-out); }
.alink:hover svg { transform: translateX(.35em); }

/* ============================================================
   media plate — the site's image container
   ============================================================ */

.plate {
  position: relative;
  overflow: hidden;
  background: var(--ink-2);
}
/* direct child only — a figure paired with its plate nests a second
   image inside the same frame, and it must not inherit the cover sizing */
.plate > img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.plate--tall  { aspect-ratio: 3 / 4; }
.plate--sq    { aspect-ratio: 1 / 1; }
.plate--wide  { aspect-ratio: 16 / 9; }
.plate--photo { aspect-ratio: 4 / 3; }

/* parallax: image is oversized so it can drift without gaps */
.plate--par > img {
  height: 122%;
  position: absolute;
  top: -11%; left: 0;
  will-change: transform;
}

.plate__cap {
  position: absolute;
  left: 0; bottom: 0;
  padding: .6rem .9rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-mono);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.plate__cap b { color: var(--accent-text); font-weight: 500; }

.plate__tag {
  position: absolute;
  top: .9rem; right: .9rem;
  font-family: var(--f-mono);
  font-size: .6rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--paper);
  background: rgba(14, 23, 38, .7);
  backdrop-filter: blur(6px);
  padding: .35rem .6rem;
}

figure.fig { margin: 0; }
figure.fig figcaption {
  margin-top: .85rem;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .08em;
  color: var(--fg-muted);
  display: flex;
  gap: .7rem;
}
figure.fig figcaption b { color: var(--accent-text); font-weight: 500; flex: none; }

/* ============================================================
   stat block
   ============================================================ */

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--rule);
}
@media (min-width: 52rem) { .stats { grid-template-columns: repeat(4, 1fr); } }

.stat {
  padding: var(--s-6) var(--s-4) var(--s-5) 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
@media (min-width: 52rem) {
  .stat { border-bottom: 0; padding-right: var(--s-6); }
  .stat + .stat { border-left: 1px solid var(--rule); padding-left: var(--s-5); }
}
.stat__n {
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 1.6rem + 3.2vw, 4rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: .1em;
}
.stat__n sup {
  font-family: var(--f-mono);
  font-size: .3em;
  font-weight: 500;
  color: var(--accent-text);
  letter-spacing: .05em;
  top: -1.4em;
}
.stat__l {
  margin-top: .8rem;
  font-size: var(--t-sm);
  color: var(--fg-muted);
  max-width: 15ch;
  line-height: 1.45;
}

/* ============================================================
   cards
   ============================================================ */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s-6) 0 var(--s-6);
  border-top: 1px solid var(--rule);
}
.card__n {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .18em;
  color: var(--accent-text);
}
.card__t {
  font-family: var(--f-display);
  font-size: var(--t-lg);
  margin-top: var(--s-4);
  font-weight: 500;
  letter-spacing: -.015em;
}
.card__d { margin-top: var(--s-3); color: var(--fg-muted); font-size: var(--t-sm); }
.card__f { margin-top: auto; padding-top: var(--s-5); }

/* ============================================================
   accordion (service detail lists)
   ============================================================ */

.acc { border-top: 1px solid var(--rule); }
.acc__item { border-bottom: 1px solid var(--rule); }
.acc__btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: 1.35rem 0;
  text-align: left;
  color: inherit;
  transition: color .3s;
}
.acc__btn:hover { color: var(--accent-text); }
.acc__btn .num { font-size: var(--t-xs); letter-spacing: .18em; color: var(--accent-text); flex: none; width: 2.4rem; }
.acc__btn h3 { font-size: var(--t-md); font-weight: 500; flex: 1; letter-spacing: -.005em; }
.acc__ico {
  position: relative; flex: none;
  width: 1.1rem; height: 1.1rem;
}
.acc__ico::before, .acc__ico::after {
  content: ""; position: absolute; inset: 50% 0 auto;
  height: 1px; background: currentColor;
  transition: transform .4s var(--ease-out);
}
.acc__ico::after { transform: rotate(90deg); }
.acc__btn[aria-expanded="true"] .acc__ico::after { transform: rotate(0deg); }
.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .55s var(--ease-out);
}
.acc__btn[aria-expanded="true"] + .acc__panel { grid-template-rows: 1fr; }
.acc__panel > div { overflow: hidden; }
.acc__inner { padding: 0 0 1.8rem; }
@media (min-width: 48rem) { .acc__inner { padding-left: 3.4rem; } }

/* ============================================================
   checklist — the long technical lists
   ============================================================ */

.ticks { display: grid; gap: .1rem; }
@media (min-width: 46rem) { .ticks--2 { grid-template-columns: 1fr 1fr; column-gap: var(--s-6); } }
@media (min-width: 72rem) { .ticks--3 { grid-template-columns: repeat(3, 1fr); column-gap: var(--s-6); } }

.ticks li {
  position: relative;
  padding: .55rem 0 .55rem 1.6rem;
  font-size: var(--t-sm);
  line-height: 1.5;
  border-bottom: 1px solid var(--rule-soft);
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.15em;
  width: .5rem; height: .5rem;
  border-left: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
  transform: translateY(-50%);
}

/* ============================================================
   marquee
   ============================================================ */

.mq {
  display: flex;
  overflow: hidden;
  user-select: none;
  padding-block: 1.6rem;
  border-block: 1px solid var(--rule);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.mq__track {
  display: flex;
  flex: none;
  gap: 3.5rem;
  padding-right: 3.5rem;
  will-change: transform;
}
.mq__item {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  white-space: nowrap;
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.mq__item::before {
  content: "";
  width: .3rem; height: .3rem;
  background: var(--accent);
  transform: rotate(45deg);
  flex: none;
}

/* ============================================================
   forms
   ============================================================ */

.form { display: grid; gap: var(--s-5); }
@media (min-width: 46rem) { .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); } }

.field { display: grid; gap: .5rem; }
.field > label {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.field > label .req { color: var(--accent-text); }
/* Les cases à cocher sont exclues : `appearance: none` leur retirerait
   la coche, et le visiteur ne verrait plus si la case est cochée. */
.field input:not([type="checkbox"]):not([type="radio"]),
.field textarea,
.field select {
  width: 100%;
  padding: .9rem 1rem;
  background: var(--field);
  border: 1px solid var(--rule);
  border-radius: 0;
  font-size: var(--t-base);
  transition: border-color .3s, background-color .3s;
  appearance: none;
}
.field select {
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 1.45rem, calc(100% - .8rem) 1.45rem;
  background-size: .35rem .35rem, .35rem .35rem;
  background-repeat: no-repeat;
  padding-right: 2.6rem;
}
.field textarea { resize: vertical; min-height: 9rem; }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--accent);
  outline: none;
  background: transparent;
}
.field input::placeholder, .field textarea::placeholder { color: var(--fg-muted); opacity: .65; }
.field .err {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  color: var(--accent-text);
  min-height: 0;
}
.field.is-bad input, .field.is-bad textarea, .field.is-bad select { border-color: var(--accent-2); }

.check {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  font-size: var(--t-sm);
  color: var(--fg-muted);
  cursor: pointer;
}
.check input {
  width: 1.05rem; height: 1.05rem;
  margin-top: .3rem;
  flex: none;
  accent-color: var(--accent);
}
.field--check { gap: .4rem; }
.field--check.is-bad .check input {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}

.form__note {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  color: var(--fg-muted);
}

.form__status {
  padding: 1rem 1.2rem;
  border-left: 2px solid var(--accent);
  background: var(--field);
  font-size: var(--t-sm);
}

/* ============================================================
   footer
   ============================================================ */

.ftr {
  background: var(--ink);
  color: var(--paper);
  --fg-muted: var(--slate-2);
  --rule: rgba(244, 242, 236, .14);
  padding-top: var(--band-s);
  position: relative;
  overflow: hidden;
}
.ftr__bg {
  position: absolute;
  inset: auto 0 -20% 0;
  height: 62%;
  color: var(--navy-2);
  opacity: .5;
  pointer-events: none;
}
.ftr__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .45; }
.ftr__in { position: relative; }

.ftr__top {
  display: grid;
  gap: var(--s-7) var(--gutter);
  padding-bottom: var(--s-8);
}
@media (min-width: 60rem) { .ftr__top { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); } }

.ftr__cta { font-family: var(--f-display); font-size: var(--t-xl); line-height: 1.12; letter-spacing: -.02em; max-width: 18ch; }
.ftr h4 {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--slate-2);
  margin-bottom: var(--s-5);
}
.ftr__list { display: grid; gap: .65rem; font-size: var(--t-sm); }
.ftr__list a { opacity: .82; transition: opacity .25s, color .25s; }
.ftr__list a:hover { opacity: 1; color: var(--accent-2); }
.ftr address { font-style: normal; font-size: var(--t-sm); line-height: 1.7; opacity: .82; }

.ftr__bot {
  border-top: 1px solid var(--rule);
  padding-block: var(--s-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-6);
  align-items: center;
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate-2);
}
.ftr__bot .sep { margin-left: auto; }
.ftr__bot a:hover { color: var(--paper); }

/* ============================================================
   reticle cursor (fine pointers only)
   ============================================================ */

@media (hover: hover) and (pointer: fine) {
  .cursor {
    position: fixed;
    top: 0; left: 0;
    width: 46px; height: 46px;
    margin: -23px 0 0 -23px;
    z-index: 200;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s;
    mix-blend-mode: difference;
  }
  .cursor.is-on { opacity: .9; }
  .cursor svg { width: 100%; height: 100%; }
  .cursor .ring {
    transform-origin: center;
    transform: scale(.55);
    transition: transform .35s var(--ease-out), opacity .35s;
    opacity: .55;
  }
  .cursor .tick { opacity: 0; transition: opacity .35s; }
  .cursor.is-hot .ring { transform: scale(1); opacity: 1; }
  .cursor.is-hot .tick { opacity: 1; }
}

/* ============================================================
   page intro curtain
   ============================================================ */

.curtain {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--ink);
  display: grid;
  place-items: center;
  transition: clip-path 1s var(--ease-out) .25s, opacity .4s 1.1s;
}
.curtain__in {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  color: var(--paper);
}
.curtain__mark { width: 4rem; height: auto; }
.curtain__word { width: 9.5rem; height: auto; }
.curtain__bar {
  width: 8rem; height: 1px;
  background: rgba(244, 242, 236, .2);
  position: relative;
  overflow: hidden;
}
.curtain__bar i {
  position: absolute; inset: 0;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  animation: load 1.1s var(--ease-out) forwards;
}
@keyframes load { to { transform: scaleX(1); } }

body.is-loaded .curtain { clip-path: inset(0 0 100% 0); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .curtain { display: none; } }

/* ============================================================
   accent on dark surfaces

   --accent-text defaults to the darker vermillion so small mono
   labels clear AA on paper. These surfaces are dark whatever band
   they sit in, so they take the lighter one back.
   ============================================================ */

.hdr, .drawer, .hero, .phero, .ftr, .cta,
.plate__cap, .plate__tag, .map__cta, .curtain {
  --accent-text: var(--accent-2);
}

/* Failsafe: if the script never reaches `curtain()`, the intro still
   clears itself rather than holding the page behind a blank screen. */
.curtain { animation: curtain-release 1ms linear 3.2s forwards; }
@keyframes curtain-release {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}


/* ============================================================
   blocks that no longer open on an ordinal
   ============================================================ */

.card__t:first-child,
.method__step h3:first-child,
.role__t:first-child { margin-top: 0; }

/* ============================================================
   bouton WhatsApp flottant

   Au Maroc, WhatsApp est le canal de contact réel. Le bouton
   apparaît après un peu de défilement — il ne recouvre jamais
   l'appel à l'action du héros — et s'ouvre au survol.
   ============================================================ */

.wa {
  position: fixed;
  right: clamp(1rem, .5rem + 1.5vw, 1.7rem);
  bottom: clamp(1rem, .5rem + 1.5vw, 1.7rem);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  height: 3.3rem;
  background: #0E7A6C;          /* blanc à 5,2:1 */
  color: #FFFFFF;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  box-shadow: 0 .7rem 1.8rem rgba(4, 9, 17, .42);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(.9rem);
  transition:
    opacity .45s var(--ease),
    transform .45s var(--ease-out),
    visibility .45s,
    background-color .3s var(--ease);
}
.wa.is-on { opacity: 1; visibility: visible; transform: none; }
.wa:hover, .wa:focus-visible { background: #0C6A5E; color: #FFFFFF; }
.wa:focus-visible { outline: 2px solid var(--brass-lite); outline-offset: 3px; }

.wa__ico {
  width: 3.3rem;
  height: 3.3rem;
  flex: none;
  display: grid;
  place-items: center;
}
.wa__ico svg { width: 1.55rem; height: 1.55rem; }

/* le libellé se déplie au survol, sur les écrans qui savent survoler */
.wa__txt {
  max-width: 0;
  padding-right: 0;
  white-space: nowrap;
  overflow: hidden;
  transition: max-width .45s var(--ease-out), padding-right .45s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .wa:hover .wa__txt, .wa:focus-visible .wa__txt {
    max-width: 9rem;
    padding-right: 1.2rem;
  }
}

/* il ne doit jamais masquer le relevé de progression */
@media (min-width: 78rem) { .hud { bottom: auto; } }

/* ============================================================
   affinage mobile

   Mesuré sur un écran de 390 px : cibles tactiles portées à
   44 px, champs de saisie à 16 px minimum, libellés remontés.
   ============================================================ */

/* Sous 16 px, iOS Safari agrandit la page dès que le visiteur
   touche un champ. On ne descend jamais sous ce seuil. */
.field input:not([type="checkbox"]):not([type="radio"]),
.field textarea,
.field select { font-size: max(16px, var(--t-base)); }

/* le halo bleu du navigateur laisse la place à la couleur de marque */
a, button, label, summary, [role="button"] {
  -webkit-tap-highlight-color: rgba(161, 132, 55, .2);
}

@media (max-width: 48rem) {

  /* --- cibles tactiles : 44 px au doigt --- */
  .lang__btn { padding: .8rem .75rem; }
  .brand { padding-block: .35rem; }

  .ftr__list { gap: 0; }
  .ftr__list a { display: block; padding-block: .68rem; }

  .ftr__bot { gap: .1rem 1.4rem; }
  .ftr__bot a { padding-block: .6rem; }

  .alink { padding-block: .7rem; }
  .crumbs a { padding-block: .5rem; }
  .info__v a { display: inline-block; padding-block: .45rem; }
  .filter { padding: .8rem 1rem; }

  .check input { width: 1.4rem; height: 1.4rem; margin-top: .1rem; }
  .field--check .check { padding-block: .45rem; }

  .dnav__item a, .svc-index__item { padding-block: 1.1rem; }

  /* --- lisibilité des libellés --- */
  .ftr__bot { font-size: .75rem; }
  .hero__bar-in { font-size: .7rem; }
  .dpanel__tags li { font-size: .7rem; padding: .45rem .75rem; }
  .figpair__tag { font-size: .62rem; padding: .32rem .62rem; letter-spacing: .14em; }
  .plate__cap, .plate__tag { font-size: .68rem; }
  .zones li { padding: .6rem .9rem; }
}

/* 44 px garantis, quelle que soit la hauteur de ligne du libellé */
@media (max-width: 48rem) {
  .lang { align-items: stretch; font-size: .74rem; }
  .lang__btn { padding-inline: 1rem; }
  .alink { padding-block: .78rem; }
  .ftr__list a { padding-block: .72rem; }
  .lang__btn,
  .filter,
  .ftr__bot a,
  .crumbs a,
  .info__v a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .filter { justify-content: center; }
  .check input { width: 1.5rem; height: 1.5rem; }
}

/* Le bouton flottant occupe le coin bas-droit en permanence : le bas du
   document doit lui laisser la place, sinon le dernier lien du pied de
   page reste caché quoi qu'il arrive. */
@media (max-width: 48rem) {
  .ftr__bot { padding-bottom: 4.6rem; }
}