/* Page « site en construction »: autonome (son propre HTML, CSS et assets), déposée telle quelle sur Cloudflare.
   Mesures prises sur les maquettes Figma « En-Construction Desktop » (1440 × 900) et « En-Construction Mobile » (350 × 700). */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

:root {
  /* 1 svh, avec un repli pour les navigateurs qui ne le connaissent pas */
  --vh: 1vh;

  /* Une unité de dessin = 1px sur la maquette desktop. Elle suit la largeur de l'écran, ne dépasse pas sa hauteur (tout tient sans défiler sur un
     portable bas) et ne descend jamais sous la proportion de la maquette mobile. Les textes et les boutons gardent en plus un plancher lisible. */
  --u: max(0.677px, min(calc(0.563px + 0.0303vw), 1.25px, calc(100 * var(--vh) / 900)));

  /* Longueur du câble en plus, au-dessus de la grue: nulle sur grand écran (le câble sort par le haut), longue sur téléphone (maquette mobile) */
  --cable: clamp(0px, calc(11rem - 12vw), 4.3rem);
}

@supports (height: 100svh) {
  :root {
    --vh: 1svh;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--surface-alt);
  color: var(--text);
  font-family: var(--font-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg {
  display: block;
}

/* Images et icônes: on ne peut ni les glisser, ni les enregistrer par appui long ou clic droit, ni les sélectionner (un clic traverse l'image et atteint le lien dessous) */
img,
svg {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

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

/* Le fond: l'image, plein écran */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--surface-alt) url("../assets/Background.webp") 50% 50% / cover no-repeat;
}

.page {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-inline: clamp(1rem, 6.3vw, 2rem);
  overflow-x: clip;
  text-align: center;
}

/* ───── La grue et le logo accroché ───── */
.hanger {
  position: relative;
  flex: none;
  width: 100%;
  height: calc(var(--cable) + var(--u) * 316);
}

.hanger-drop,
.hanger-sway {
  position: absolute;
  inset: 0;
}

.hanger-sway {
  transform-origin: 50% 0;
}

/* le câble part du haut de l'écran (et dépasse au-dessus pour ne jamais se décrocher quand la grue rebondit); celui de crane.svg prend le relais */
.cable {
  position: absolute;
  top: -8rem;
  left: 50%;
  width: calc(var(--u) * 8);
  height: calc(8rem + var(--cable) + var(--u) * 2);
  transform: translateX(-50%);
  background: var(--accent-fill);
}

.crane {
  position: absolute;
  top: var(--cable);
  left: 50%;
  width: calc(var(--u) * 86);
  height: calc(var(--u) * 219);
  max-width: none;
  margin-left: calc(var(--u) * -45.28); /* l'axe du câble dans crane.svg */
}

.logo {
  position: absolute;
  top: calc(var(--cable) + var(--u) * 174);
  left: 50%;
  width: calc(var(--u) * 148);
  height: calc(var(--u) * 142);
  max-width: none;
  margin-left: calc(var(--u) * -74);
}

/* ───── La carte: la barre d'adresse et le bouton de contact ───── */
.card {
  --card-pad: clamp(0.75rem, 0.35rem + 1.9vw, calc(var(--u) * 30));
  --card-gap: clamp(0.9rem, 0.55rem + 1.45vw, calc(var(--u) * 30));

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--card-gap);
  width: min(100%, calc(var(--u) * 624));
  margin-top: clamp(1.5rem, calc(var(--vh) * 4.7), 3rem);
  padding: var(--card-pad);
  border-radius: clamp(1.25rem, 0.81rem + 1.878vw, calc(var(--u) * 40));
  background: rgb(255 255 255 / 0.6);
  -webkit-backdrop-filter: blur(max(12px, calc(var(--u) * 25)));
  backdrop-filter: blur(max(12px, calc(var(--u) * 25)));
  box-shadow: 0 calc(var(--u) * 5) calc(var(--u) * 30) rgb(0 0 0 / 0.08);
}

/* La barre d'adresse: tout y est en em, la taille suit la largeur de la barre (28 → 19,58 px) */
.bar {
  container-type: inline-size;
  width: 100%;
}

.bar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45em;
  padding: 0.377em 0.918em;
  border-radius: var(--radius-pill);
  background: var(--surface);
  box-shadow: 0 calc(var(--u) * 7) calc(var(--u) * 15) rgb(0 0 0 / 0.09);
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-size: clamp(0.6rem, 3.6cqw, 1.2237rem);
  line-height: 1;
}

.bar-nav {
  display: flex;
}

.bar-arrow {
  display: grid;
  place-items: center;
  width: 1.667em;
  height: 1.414em;
  color: var(--text-muted);
}

.bar-forward {
  color: color-mix(in srgb, var(--color-slate) 38%, var(--surface));
}

.bar-arrow svg {
  width: auto;
  height: 0.9em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bar-shield {
  width: 0.946em;
  height: auto;
}

.bar-url {
  display: flex;
  align-items: center;
  gap: 0.734em;
  padding: 0.275em 0.918em;
  border-radius: var(--radius-pill);
  background: var(--surface-alt);
}

.bar-lock {
  width: 0.567em;
  height: auto;
}

.bar-url-text {
  font-weight: 400;
  line-height: 1.21;
  white-space: nowrap;
}

.bar-url-muted {
  color: var(--text-muted);
}

.bar-url-name {
  color: var(--text-accent);
  font-weight: var(--fw-medium);
}

.bar-progress {
  display: flex;
  align-items: center;
  gap: 0.406em;
}

/* le pourcentage garde la largeur de « 90% » pendant qu'il compte, pour que la barre ne bouge pas */
.percent {
  display: inline-grid;
  color: var(--accent-fill);
  font-size: 1.101em;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

.percent > * {
  grid-area: 1 / 1;
  text-align: right;
}

.percent-ghost {
  visibility: hidden;
}

/* Le loader à six points (à côté du pourcentage): un anneau de points qui tournent en décalé, puis tout l'anneau tourne doucement */
.loader {
  --loader-size: 1.285em;
  --loader-color: var(--accent-fill);
  --loader-speed: 1.5s;
  --loader-dot: calc(var(--loader-size) * 0.17);

  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: flex-start;
  width: var(--loader-size);
  height: var(--loader-size);
}

.loader-dot {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.loader-dot::before {
  content: "";
  width: var(--loader-dot);
  height: var(--loader-dot);
  border-radius: 50%;
  background-color: var(--loader-color);
}

/* sans animation (appareil qui demande moins de mouvement): l'anneau reste posé, les six points répartis */
.loader-dot:nth-child(2) {
  transform: rotate(60deg);
}

.loader-dot:nth-child(3) {
  transform: rotate(120deg);
}

.loader-dot:nth-child(4) {
  transform: rotate(180deg);
}

.loader-dot:nth-child(5) {
  transform: rotate(240deg);
}

.loader-dot:nth-child(6) {
  transform: rotate(300deg);
}

/* ───── Le bouton de contact: « Contacter-nous » se referme en rond (✕) et laisse place à Mobile et E-Mail ───── */
.contact {
  /* un peu plus petit sur téléphone (38 px de haut, 12 px de marge, texte de 12 px); 44 px, 20 px et 20 px sur la maquette desktop */
  --btn-h: max(2.375rem, calc(var(--u) * 44));
  --btn-fs: 0.75rem;
  --btn-fs: clamp(0.75rem, 0.6rem + 0.723vw, calc(var(--u) * 20));
  --btn-px: clamp(0.75rem, 0.45rem + 1.1vw, calc(var(--u) * 20));
  --btn-gap: calc(var(--btn-h) * 0.31);

  /* largeur du bouton fermé: celle de « CONTACTER-NOUS » (9,02 em en Petrov Sans Bold) et de ses marges; main.js la remplace par la mesure exacte */
  --toggle-w: calc(9.02em + 2 * var(--btn-px));

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--btn-fs);
  font-weight: var(--fw-bold);
}

/* la case à cocher porte l'état; elle reste atteignable au clavier (Espace), mais invisible: c'est le bouton qui s'affiche */
.contact-switch {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  opacity: 0;
}

.contact-switch:focus-visible ~ .toggle {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

.btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  height: var(--btn-h);
  padding-inline: var(--btn-px);
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--accent-fill);
  box-shadow: 0 calc(var(--u) * 2.22) calc(var(--u) * 8.33) rgb(0 0 0 / 0.2);
  color: var(--text-on-accent);
  font: inherit;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--duration-base) ease,
    color var(--duration-base) ease,
    box-shadow var(--duration-base) ease,
    transform var(--duration-fast) ease;
}

.btn:active {
  transform: scale(0.97);
}

.btn:focus-visible,
.credit-link:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

/* Mobile et E-Mail: fermés, ils n'ont ni largeur ni présence */
.opt {
  gap: 0.6em;
  max-width: 0;
  padding-inline: 0;
  margin-inline: 0;
  opacity: 0;
  visibility: hidden;
  box-shadow: none;
  transition:
    max-width 0.55s var(--ease-out),
    padding 0.55s var(--ease-out),
    margin 0.55s var(--ease-out),
    opacity 0.3s ease,
    visibility 0s linear 0.55s,
    background-color var(--duration-base) ease,
    color var(--duration-base) ease;
}

.opt img {
  flex: none;
  width: 1.11em;
  height: 1.11em;
  transition: filter var(--duration-base) ease;
}

/* au survol, le texte et l'icône passent à l'anthracite (état « hover » de la maquette) */
@media (hover: hover) {
  .opt:hover {
    color: var(--color-anthracite);
  }

  .opt:hover img {
    filter: brightness(0);
  }
}

.toggle {
  position: relative;
  width: var(--toggle-w);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition:
    width 0.55s var(--ease-out),
    padding 0.55s var(--ease-out),
    background-color 0.35s ease,
    color 0.35s ease,
    box-shadow 0.35s ease,
    transform var(--duration-fast) ease;
}

@media (hover: hover) {
  .toggle:hover {
    background: var(--color-red-deep);
  }
}

.toggle-label {
  display: block;
  text-transform: uppercase;
  transition:
    opacity 0.25s ease 0.1s,
    transform 0.4s var(--ease-out);
}

.toggle-x {
  position: absolute;
  inset: 0;
  width: 38%;
  height: 38%;
  margin: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
  transition:
    opacity 0.25s ease,
    transform 0.5s var(--ease-out);
}

/* ouvert: le bouton devient le rond blanc ✕ au centre, Mobile à sa gauche et E-Mail à sa droite */
.contact-switch:checked ~ .opt {
  max-width: 8.5em;
  padding-inline: var(--btn-px);
  opacity: 1;
  visibility: visible;
  box-shadow: 0 calc(var(--u) * 2.22) calc(var(--u) * 8.33) rgb(0 0 0 / 0.2);
  transition-delay: 0s, 0s, 0s, 0.12s, 0s, 0s, 0s;
}

.contact-switch:checked ~ .opt-phone {
  margin-right: var(--btn-gap);
}

.contact-switch:checked ~ .opt-mail {
  margin-left: var(--btn-gap);
}

.contact-switch:checked ~ .toggle {
  width: var(--btn-h);
  padding-inline: 0;
  background: var(--surface);
  box-shadow: 0 calc(var(--u) * 2.22) calc(var(--u) * 8.33) rgb(0 0 0 / 0.12);
  color: var(--accent-fill);
}

.contact-switch:checked ~ .toggle .toggle-label {
  opacity: 0;
  transform: scale(0.85);
  transition-delay: 0s;
}

.contact-switch:checked ~ .toggle .toggle-x {
  opacity: 1;
  transform: none;
  transition-delay: 0.1s;
}

/* ───── Le titre et le texte d'accroche ───── */
.texts {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: max(0.4rem, calc(var(--u) * 10));
  margin-top: clamp(2.2rem, calc(var(--vh) * 5.5), calc(var(--u) * 50));
}

h1 {
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: max(1.5rem, calc(var(--u) * 40));
  font-weight: var(--fw-black);
  letter-spacing: -0.004em;
  line-height: 1.15;
  text-shadow: calc(var(--u) * 3) calc(var(--u) * 3) calc(var(--u) * 9) rgb(0 0 0 / 0.14);
  text-transform: uppercase;
  text-wrap: balance;
}

.lead {
  max-width: min(100%, calc(var(--u) * 702));
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: max(0.875rem, calc(var(--u) * 18));
  font-weight: var(--fw-semibold);
  line-height: 1.35;
  text-wrap: balance;
}

/* ───── Le crédit, en bas de l'écran ───── */
.credit {
  display: flex;
  align-items: baseline;
  gap: 0.28em;
  margin-top: auto;
  padding-top: max(1.5rem, calc(var(--u) * 45));
  padding-bottom: calc(max(1rem, calc(var(--u) * 45)) + env(safe-area-inset-bottom, 0px));
  color: var(--accent-fill);
  font-family: var(--font-body);
  font-size: max(0.75rem, calc(var(--u) * 14));
  font-weight: var(--fw-medium);
  line-height: 1.2;
}

.credit-link {
  margin: -0.35em -0.2em;
  padding: 0.35em 0.2em;
  border-radius: 0.4em;
  color: inherit;
  font-weight: var(--fw-bold);
  text-decoration: none;
}

.credit-link:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ───── Animations: à l'ouverture, puis un léger balancement; rien de tout cela si l'appareil demande moins de mouvement ───── */
@media (prefers-reduced-motion: no-preference) {
  @keyframes bg-in {
    from {
      opacity: 0;
    }
  }

  /* la grue descend du haut de l'écran et rebondit un peu avant de se poser */
  @keyframes drop {
    0% {
      transform: translateY(-100%);
    }
    58% {
      transform: translateY(1.6%);
    }
    76% {
      transform: translateY(-0.7%);
    }
    100% {
      transform: translateY(0);
    }
  }

  @keyframes sway {
    0%,
    100% {
      transform: rotate(0deg);
    }
    25% {
      transform: rotate(1.1deg);
    }
    75% {
      transform: rotate(-1.1deg);
    }
  }

  @keyframes rise {
    from {
      opacity: 0;
      transform: translateY(calc(var(--u) * 22));
    }
  }

  @keyframes loader-turn {
    0% {
      transform: rotate(0deg);
    }
    65%,
    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes loader-smooth {
    to {
      transform: rotate(360deg);
    }
  }

  .bg {
    animation: bg-in 1.4s ease-out both;
  }

  .hanger-drop {
    animation: drop 1.6s var(--ease-out) both;
  }

  .hanger-sway {
    animation: sway 6s ease-in-out 1.7s infinite;
  }

  .card {
    animation: rise 0.9s var(--ease-out) 0.95s both;
  }

  h1 {
    animation: rise 0.9s var(--ease-out) 1.2s both;
  }

  .lead {
    animation: rise 0.9s var(--ease-out) 1.35s both;
  }

  .credit {
    animation: rise 0.9s var(--ease-out) 1.6s both;
  }

  .loader {
    animation: loader-smooth calc(var(--loader-speed) * 1.8) linear infinite;
  }

  .loader-dot {
    animation: loader-turn var(--loader-speed) ease-in-out infinite;
  }

  .loader-dot:nth-child(2) {
    animation-delay: calc(var(--loader-speed) * -0.4175);
  }

  .loader-dot:nth-child(3) {
    animation-delay: calc(var(--loader-speed) * -0.334);
  }

  .loader-dot:nth-child(4) {
    animation-delay: calc(var(--loader-speed) * -0.2505);
  }

  .loader-dot:nth-child(5) {
    animation-delay: calc(var(--loader-speed) * -0.167);
  }

  .loader-dot:nth-child(6) {
    animation-delay: calc(var(--loader-speed) * -0.0835);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}