/* Carte des Exclusivités ARTECH — styles globaux
   Palette et tokens : voir la config Tailwind dans index.html */

:root {
  --ink: #1d1d1f;
  --ink-muted: #6e6e73;
  --line: #d2d2d7;
  --surface: #ffffff;
  --surface-sunken: #f4f5f7;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--surface-sunken);
  color: var(--ink);
}

/* Barres de défilement discrètes (panneau latéral, listes) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #c7c7cc;
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: #8e8e93;
  background-clip: content-box;
}

/* Anneau de focus homogène et accessible */
:where(button, a, input, select, textarea):focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
  border-radius: 6px;
}

/* Carte Leaflet */
.leaflet-container {
  width: 100%;
  height: 100%;
  z-index: 10;
  background: var(--surface-sunken);
  font: inherit;
}

/* Respect des préférences d'accessibilité */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   Boutons en relief

   Un bouton ne doit pas sembler peint sur la page : il doit sembler
   posé dessus, donc cliquable. Trois ingredients, comme sur macOS :

   1. une ombre courte et serree au pourtour, qui decolle le bouton ;
   2. un lisere clair en haut a l'interieur, qui simule la lumiere
      rasante sur une surface bombee ;
   3. un enfoncement au clic — le bouton se comprime sous le doigt et
      reprend sa taille au relachement.

   La courbe d'animation est volontairement plus rapide a l'aller
   qu'au retour : l'enfoncement doit sembler instantane, la detente
   un peu elastique.
   ───────────────────────────────────────────────────────────────── */

.btn-raised {
  box-shadow:
    0 1px 1px rgba(20, 23, 31, 0.04),
    0 2px 4px -1px rgba(20, 23, 31, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transition:
    transform 180ms cubic-bezier(0.22, 1.2, 0.36, 1),
    box-shadow 180ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease;
  will-change: transform;
}

.btn-raised:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow:
    0 1px 1px rgba(20, 23, 31, 0.04),
    0 4px 10px -2px rgba(20, 23, 31, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.btn-raised:active:not(:disabled) {
  transform: scale(0.965);
  transition-duration: 90ms;
  box-shadow:
    0 1px 1px rgba(20, 23, 31, 0.05),
    inset 0 1px 2px rgba(20, 23, 31, 0.08);
}

.btn-raised:disabled {
  box-shadow: none;
  transform: none;
}

/* Variante sombre : le lisere interieur doit rester discret sur fond fonce */
.btn-raised-dark {
  box-shadow:
    0 1px 1px rgba(20, 23, 31, 0.12),
    0 2px 6px -1px rgba(20, 23, 31, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.btn-raised-dark:hover:not(:disabled) {
  box-shadow:
    0 1px 1px rgba(20, 23, 31, 0.12),
    0 5px 14px -3px rgba(20, 23, 31, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.btn-raised-dark:active:not(:disabled) {
  box-shadow:
    0 1px 1px rgba(20, 23, 31, 0.14),
    inset 0 1px 3px rgba(0, 0, 0, 0.22);
}

/* Segment actif d'un selecteur : meme relief, sans le deplacement au survol
   (l'onglet actif ne doit pas bouger, il est deja "en avant"). */
.seg-active {
  box-shadow:
    0 1px 1px rgba(20, 23, 31, 0.05),
    0 2px 5px -1px rgba(20, 23, 31, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.seg-idle {
  transition: transform 160ms cubic-bezier(0.22, 1.2, 0.36, 1), color 140ms ease, background-color 140ms ease;
}

.seg-idle:active:not(:disabled) {
  transform: scale(0.97);
  transition-duration: 90ms;
}

/* ─────────────────────────────────────────────────────────────────────
   Teinte ambiante par service

   Changer de service, ce n'est pas filtrer une liste : c'est changer de
   carte, avec ses propres attributions. L'ambiance colorée de toute
   l'interface le signale en permanence, sans qu'on ait besoin de relire
   l'onglet actif.

   Volontairement tres dilue — plus blanc que colore. La couleur doit se
   remarquer quand on bascule, pas quand on travaille. Le texte reste sur
   l'encre habituelle, la lisibilite n'est jamais engagee.

   Une seule source de verite : l'attribut data-service porte par la
   racine de l'application. Toutes les surfaces lisent ces variables.
   ───────────────────────────────────────────────────────────────── */

[data-service] {
  /* Valeurs de repli, si l'attribut n'a pas encore ete pose */
  --tint: #f7f8fa;
  --tint-deep: #eef0f4;
  --tint-line: #e3e7ee;
  --accent: #3b82f6;
}

/* Estimation Elite — le bleu du logo ARTECH, a environ 4 % */
[data-service='estimation'] {
  --tint: #f4f8fe;
  --tint-deep: #e7f0fd;
  --tint-line: #dbe7f8;
  --accent: #3b82f6;
}

/* SEO Local Avance — le magenta ARTECH, a environ 4 % */
[data-service='seo_local'] {
  --tint: #fef5fa;
  --tint-deep: #fce9f2;
  --tint-line: #f8dcea;
  --accent: #e0378e;
}

/* La bascule doit se voir : assez lente pour etre percue, assez courte
   pour ne pas retarder le travail. */
[data-service],
[data-service] .tinted {
  transition: background-color 320ms ease, border-color 320ms ease;
}

@media (prefers-reduced-motion: reduce) {
  [data-service],
  [data-service] .tinted {
    transition: none;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   Ecran de connexion sur ecran court

   Une tablette en paysage n'offre que 768 px de haut. A cette hauteur,
   l'ecran de connexion depasse d'une trentaine de pixels et un
   defilement apparait — sur un ecran de connexion, c'est une faute.

   On resserre les respirations verticales, jamais les tailles de texte :
   c'est l'espace qui cede, pas la lisibilite.
   ───────────────────────────────────────────────────────────────── */

@media (max-height: 860px) {
  .login-pane.login-pane {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .login-title.login-title {
    margin-top: 1.75rem;
  }
  .login-args.login-args {
    margin-top: 1.75rem;
  }
  .login-args.login-args > li + li {
    margin-top: 1.15rem;
  }
  .login-countries.login-countries {
    margin-top: 1.75rem;
  }
}