/* liquid.css — matière « verre liquide » pour les commandes de l'interface.
 *
 * Chargée après theme.css, avant responsive.css.
 *
 * Technique reprise du verre d'Apple (Tahoe), sans son moteur : la version
 * d'origine calcule une carte de déplacement en WebGL et la rejoue à chaque
 * image. Ici tout est en CSS — trois couches empilées suffisent à l'illusion :
 *
 *   1. le corps       : teinte translucide + backdrop-filter (flou + saturation)
 *   2. ::before       : la lentille — reflet spéculaire en haut, rebond en bas
 *   3. ::after        : le liseré — dégradé conique masqué en anneau d'un pixel
 *
 * L'empilement de box-shadow fait le reste : une arête claire en haut, une
 * ombre interne en bas, deux ombres portées de portées différentes. C'est
 * l'écart entre ces couches qui donne l'épaisseur, pas le flou seul.
 */

:root {
  /* Ressort léger : dépasse la cible puis revient. C'est ce dépassement qui
     fait « liquide » plutôt que « mécanique ». */
  --lg-spring: cubic-bezier(.34, 1.56, .64, 1);
  --lg-glide: cubic-bezier(.32, .72, 0, 1);
  --lg-veil: blur(22px) saturate(185%);
}

/* ------------------------------------------------------- liseré réutilisable */
.btn::after,
[data-m="dock"]::after,
[data-m="dock-btn"][data-active="1"]::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from 128deg,
    rgba(255, 255, 255, .72), rgba(255, 255, 255, .06) 26%,
    rgba(255, 255, 255, .58) 50%, rgba(255, 255, 255, .06) 74%,
    rgba(255, 255, 255, .72));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  opacity: .75;
  transition: opacity .3s var(--lg-glide);
}

/* -------------------------------------------------------------------- boutons */
.btn {
  position: relative;
  isolation: isolate;
  transition:
    transform .34s var(--lg-spring),
    box-shadow .3s var(--lg-glide),
    background .25s var(--lg-glide);
}
.btn > * { position: relative; z-index: 1; }

.btn-primary {
  background: linear-gradient(163deg, #7b73e0 0%, #5b53c9 52%, #4a42b4 100%);
  border-color: transparent;
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .40),
    inset 0 -1px 0 rgba(20, 22, 28, .20),
    0 1px 2px rgba(31, 32, 80, .26),
    0 8px 20px -6px rgba(91, 83, 201, .46),
    0 20px 42px -16px rgba(91, 83, 201, .40);
}
/* La lentille : lumière rasante en haut, rebond diffus en bas. */
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background:
    radial-gradient(124% 78% at 50% -22%, rgba(255, 255, 255, .48), transparent 60%),
    radial-gradient(84% 62% at 50% 122%, rgba(255, 255, 255, .16), transparent 58%);
  transition: opacity .3s var(--lg-glide);
  pointer-events: none;
}
.btn-primary:hover {
  background: linear-gradient(163deg, #8880e6 0%, #6159d0 52%, #4f47bd 100%);
  color: #fff;
  transform: translateY(-1.5px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .52),
    inset 0 -1px 0 rgba(20, 22, 28, .18),
    0 2px 4px rgba(31, 32, 80, .22),
    0 14px 28px -8px rgba(91, 83, 201, .52),
    0 28px 56px -18px rgba(91, 83, 201, .46);
}
.btn-primary:hover::before { opacity: 1.15; }
/* Retour rapide et léger enfoncement : la pression doit se sentir tout de suite. */
.btn-primary:active {
  transform: scale(.963);
  transition-duration: .09s;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    inset 0 2px 8px rgba(31, 32, 80, .28),
    0 2px 6px rgba(31, 32, 80, .20);
}
.btn-primary::after { opacity: .5; }

.btn-secondary {
  background: color-mix(in srgb, #fff 60%, transparent);
  -webkit-backdrop-filter: var(--lg-veil);
  backdrop-filter: var(--lg-veil);
  border-color: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 0 0 1px rgba(255, 255, 255, .45),
    inset 0 -7px 14px -10px rgba(20, 22, 28, .22),
    0 1px 2px rgba(16, 24, 40, .07),
    0 10px 24px -12px rgba(16, 24, 40, .20);
}
.btn-secondary:hover {
  background: color-mix(in srgb, #fff 78%, transparent);
  transform: translateY(-1.5px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 0 0 1px rgba(255, 255, 255, .6),
    inset 0 -7px 14px -10px rgba(20, 22, 28, .18),
    0 2px 4px rgba(16, 24, 40, .08),
    0 16px 32px -14px rgba(16, 24, 40, .26);
}
.btn-secondary:active { transform: scale(.963); transition-duration: .09s; }

.btn-ghost { position: relative; }
.btn-ghost::after { display: none; }
.btn-ghost:hover {
  background: color-mix(in srgb, var(--color-accent) 9%, transparent);
  transform: translateY(-1px);
}
.btn-ghost:active { transform: scale(.97); transition-duration: .09s; }

.btn:disabled { transform: none !important; }
.btn:disabled::before, .btn:disabled::after { opacity: .3; }

/* --------------------------------------------------- champs et interrupteurs */
.input {
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
  box-shadow:
    inset 0 1px 2px rgba(16, 24, 40, .05),
    inset 0 1px 0 rgba(255, 255, 255, .7);
  transition: border-color .2s var(--lg-glide), box-shadow .24s var(--lg-glide), background .2s;
}
.input:hover { background: rgba(255, 255, 255, .95); }
.input:focus-visible {
  box-shadow:
    0 0 0 4px rgba(91, 83, 201, .15),
    inset 0 1px 0 rgba(255, 255, 255, .8);
}

.seg {
  -webkit-backdrop-filter: var(--lg-veil);
  backdrop-filter: var(--lg-veil);
  background: color-mix(in srgb, #fff 58%, transparent);
  border-color: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    inset 0 0 0 1px rgba(255, 255, 255, .4),
    0 1px 2px rgba(16, 24, 40, .06),
    0 8px 20px -14px rgba(16, 24, 40, .3);
}
.seg-opt {
  position: relative;
  transition:
    color .22s var(--lg-glide),
    background .28s var(--lg-glide),
    box-shadow .28s var(--lg-glide),
    transform .3s var(--lg-spring);
}
.seg-opt:has(input:checked) {
  background: linear-gradient(163deg, #7b73e0, #5b53c9 60%, #4f47bd);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .38),
    0 1px 2px rgba(31, 32, 80, .2),
    0 8px 18px -8px rgba(91, 83, 201, .5);
}
.seg-opt:active { transform: scale(.97); transition-duration: .09s; }

/* ------------------------------------------------------- surfaces vitrées --- */
[data-glass] {
  -webkit-backdrop-filter: blur(26px) saturate(190%);
  backdrop-filter: blur(26px) saturate(190%);
}
header[data-glass] {
  background: color-mix(in srgb, #fff 66%, transparent);
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, .6),
    0 1px 0 rgba(20, 22, 28, .05),
    0 12px 34px -22px rgba(16, 24, 40, .5);
}

/* Le panneau latéral partage la matière du reste. */
[data-m="drawer"] {
  background: color-mix(in srgb, #fff 88%, transparent) !important;
  -webkit-backdrop-filter: blur(30px) saturate(190%);
  backdrop-filter: blur(30px) saturate(190%);
  box-shadow:
    inset -1px 0 0 rgba(255, 255, 255, .5),
    0 18px 60px rgba(16, 24, 40, .24) !important;
}
[data-m="scrim"] {
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.mnav { transition: background .18s var(--lg-glide), transform .3s var(--lg-spring), color .18s; }
.mnav:active:not([data-off="1"]) { transform: scale(.975); transition-duration: .09s; }
.mnav[data-active="1"] {
  background: linear-gradient(120deg,
    color-mix(in srgb, var(--color-accent) 16%, transparent),
    color-mix(in srgb, var(--color-accent) 9%, transparent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 0 0 1px rgba(91, 83, 201, .14);
}
[data-m="burger"] {
  -webkit-backdrop-filter: var(--lg-veil);
  backdrop-filter: var(--lg-veil);
  border-color: transparent !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 0 0 1px rgba(255, 255, 255, .45),
    0 1px 2px rgba(16, 24, 40, .07),
    0 8px 20px -12px rgba(16, 24, 40, .24);
  transition: transform .3s var(--lg-spring), box-shadow .26s var(--lg-glide), background .2s;
}
[data-m="burger"]:hover { transform: translateY(-1px); }
[data-m="burger"]:active { transform: scale(.94); transition-duration: .09s; }

/* ============================================================ dock flottant
   Accès direct aux sections, sans remonter en haut de page. Le libellé
   n'apparaît que sur l'entrée active : six icônes tiennent alors dans la
   largeur d'un téléphone sans rien tronquer. */
[data-m="dock"] {
  position: fixed;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px;
  border-radius: 999px;
  max-width: calc(100vw - 20px);
  background: color-mix(in srgb, #fff 72%, transparent);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  backdrop-filter: blur(28px) saturate(190%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -1px 0 rgba(20, 22, 28, .06),
    0 2px 6px rgba(16, 24, 40, .10),
    0 16px 40px -12px rgba(16, 24, 40, .30);
  animation: dock-in .5s var(--lg-spring) both;
}
@keyframes dock-in {
  from { opacity: 0; transform: translateX(-50%) translateY(14px) scale(.94); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
[data-m="dock"]::after { opacity: .55; }

[data-m="dock-btn"] {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 42px;
  padding: 0 11px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-neutral-400);
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background .26s var(--lg-glide),
    color .2s var(--lg-glide),
    transform .3s var(--lg-spring),
    box-shadow .26s var(--lg-glide);
}
[data-m="dock-btn"] svg { width: 20px; height: 20px; flex: none; }
/* Le libellé glisse hors de sa boîte au lieu de disparaître d'un coup. */
[data-m="dock-btn"] span {
  display: block;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-width .38s var(--lg-glide),
    opacity .22s var(--lg-glide),
    margin-left .38s var(--lg-glide);
}
[data-m="dock-btn"][data-active="1"] {
  background: linear-gradient(163deg, #7b73e0, #5b53c9 58%, #4f47bd);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .38),
    0 1px 2px rgba(31, 32, 80, .22),
    0 10px 22px -10px rgba(91, 83, 201, .55);
}
[data-m="dock-btn"][data-active="1"] span { max-width: 120px; opacity: 1; margin-left: 8px; }
[data-m="dock-btn"][data-active="1"]::after { opacity: .45; }
[data-m="dock-btn"]:not([data-active="1"]):hover {
  background: color-mix(in srgb, var(--color-text) 6%, transparent);
  color: var(--color-text);
  transform: translateY(-1px);
}
[data-m="dock-btn"]:active { transform: scale(.93); transition-duration: .09s; }
[data-m="dock-btn"][data-off="1"] { opacity: .34; cursor: default; }
[data-m="dock-btn"][data-off="1"]:hover { background: transparent; transform: none; }

/* Le dock flotte au-dessus du contenu : on lui réserve la place en bas. */
body { padding-bottom: 78px; }

/* Écran étroit : cinq icônes plus un libellé dépassent les 300 px utiles d'un
   téléphone de 320. On resserre l'espacement et on borne le libellé plutôt que
   de le supprimer — c'est lui qui dit où l'on se trouve. */
@media (max-width: 400px) {
  [data-m="dock"] { gap: 0; padding: 4px; }
  [data-m="dock-btn"] { padding: 0 9px; height: 40px; font-size: 12px; }
  [data-m="dock-btn"] svg { width: 19px; height: 19px; }
  [data-m="dock-btn"][data-active="1"] span { max-width: 74px; margin-left: 6px; }
}
@media (max-width: 340px) {
  [data-m="dock-btn"] { padding: 0 7px; }
  [data-m="dock-btn"][data-active="1"] span { max-width: 62px; }
}

/* ===================================================== stepper horizontal
   Les étapes du formulaire en file au-dessus du contenu : pastilles numérotées
   reliées par un trait qui se colore avec l'avancée. Sur écran étroit, seul le
   libellé de l'étape courante reste déplié — même ressort que le dock. */
[data-m="step-btn"] {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 5px 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background .26s var(--lg-glide), transform .3s var(--lg-spring);
}
[data-m="step-btn"]:not([data-off="1"]):hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); }
[data-m="step-btn"]:active { transform: scale(.95); transition-duration: .09s; }
[data-m="step-btn"][data-off="1"] { opacity: .38; cursor: default; }
[data-m="step-lbl"] {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-left: 9px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: max-width .38s var(--lg-glide), opacity .22s var(--lg-glide), margin-left .38s var(--lg-glide);
}
[data-m="step-eta"] {
  flex: none;
  margin-left: 12px;
  font-size: 12px;
  color: var(--color-neutral-500);
  white-space: nowrap;
}

/* L'estimation de durée est la première chose qui cède la place. */
@media (max-width: 1000px) {
  [data-m="step-eta"] { display: none; }
}
/* En dessous de 860 px, les libellés des étapes inactives glissent hors de
   leur boîte : quatre pastilles et un seul libellé tiennent dans 320 px. */
@media (max-width: 860px) {
  [data-m="stepper"] { padding: 8px 10px !important; }
  [data-m="step-btn"] { padding: 5px 6px; }
  [data-m="step-lbl"] { max-width: 0; opacity: 0; margin-left: 0; }
  [data-m="step-btn"][data-active="1"] [data-m="step-lbl"] { max-width: 40vw; opacity: 1; margin-left: 8px; }
}
@media (max-width: 400px) {
  [data-m="stepper"] { padding: 7px 8px !important; }
  [data-m="step-btn"] { padding: 4px; font-size: 12px; }
  [data-m="step-btn"] [data-bub] { width: 22px !important; height: 22px !important; font-size: 10.5px !important; }
  [data-m="step-seg"] { margin: 0 5px !important; min-width: 8px !important; }
  [data-m="step-btn"][data-active="1"] [data-m="step-lbl"] { max-width: 31vw; margin-left: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .seg-opt, .mnav, [data-m="dock"], [data-m="dock-btn"], [data-m="dock-btn"] span,
  [data-m="burger"], [data-m="drawer"], [data-m="step-btn"], [data-m="step-lbl"], [data-m="step-seg"] {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}