/* GIKI-OCTET — ce que le theme Material UI n'atteint pas : la page elle-meme,
   l'ecran de chargement, et les commandes dessinees par la carte. */

html, body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  background: #EEF4F3;
  -webkit-font-smoothing: antialiased;
}

/* Avant que la console ne demarre, le reglage du telephone ; ensuite, le
   mode choisi (data-mode, pose par la console). */
@media (prefers-color-scheme: dark) {
  html:not([data-mode="clair"]) body {
    background: #071E24;
  }
}
html[data-mode="sombre"] body {
  background: #071E24;
}

.root {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Le rond d'attente est le premier element affiche, avant meme que React
   demarre : il doit deja etre aux couleurs de la maison. */
.loader {
  border-color: #D8E0E2 !important;
  border-right-color: #0B4F5C !important;
}

/* Les commandes de la carte : memes coins et meme trait que le reste. */
.maplibregl-ctrl-group {
  border: 1.5px solid #0B4F5C !important;
  border-radius: 9px !important;
  box-shadow: 0 4px 16px rgba(10, 40, 48, .12) !important;
  overflow: hidden;
}
.maplibregl-ctrl-group button + button {
  border-top: 1px solid #E3EAEB !important;
}
.maplibregl-ctrl-group button:hover {
  background: #F2F8F8 !important;
}

/* Les commandes de la carte, en colonne en haut a droite, la ou le client
   les veut (2026-10-27) ; depuis la maquette du 31/10, des carres arrondis
   poses comme des cartes, clairs le jour, sombres la nuit. */
.maplibregl-ctrl-top-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  padding: 16px 16px 0 0;
}
.maplibregl-ctrl-top-right .maplibregl-ctrl {
  margin: 0 !important;
}
.maplibregl-ctrl-top-right .maplibregl-ctrl-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible;
}
/* Des ronds (sa demande du 2/11). La carte arrondit ses boutons selon leur
   place dans le groupe, et autrement quand ils ont le focus : sans
   « !important » partout, un bouton touche devenait carre un instant. */
html .maplibregl-ctrl-top-right .maplibregl-ctrl-group button,
html .maplibregl-ctrl-top-right .maplibregl-ctrl-group button:focus,
html .maplibregl-ctrl-top-right .maplibregl-ctrl-group button:active {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(11, 42, 49, .08) !important;
  border-radius: 50% !important;
  background-color: #FFFFFF;
  color: #0B2A31;
  box-shadow: 0 1px 2px rgba(10, 40, 48, .10), 0 6px 16px -4px rgba(10, 40, 48, .22) !important;
  outline: none;
}
html .maplibregl-ctrl-top-right .maplibregl-ctrl-group button:focus-visible {
  outline: 2px solid #0B4F5C;
  outline-offset: 2px;
}
html .maplibregl-ctrl-top-right .maplibregl-ctrl-group button:active {
  transform: scale(.94);
}
html .maplibregl-ctrl-top-right .maplibregl-ctrl-group button:hover {
  background-color: #F2F7F6 !important;
}
html[data-mode="sombre"] .maplibregl-ctrl-top-right .maplibregl-ctrl-group button,
html[data-mode="sombre"] .maplibregl-ctrl-top-right .maplibregl-ctrl-group button:focus,
html[data-mode="sombre"] .maplibregl-ctrl-top-right .maplibregl-ctrl-group button:active {
  border-color: rgba(232, 243, 242, .1) !important;
  background-color: #0E2F37;
  color: #EAF4F3;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 16px -4px rgba(0, 0, 0, .5) !important;
}
html[data-mode="sombre"] .maplibregl-ctrl-top-right .maplibregl-ctrl-group button:focus-visible {
  outline-color: #8FD3C9;
}
html[data-mode="sombre"] .maplibregl-ctrl-top-right .maplibregl-ctrl-group button:hover {
  background-color: #123A43 !important;
}
/* Les pictogrammes dessines par la carte elle-meme sont sombres : la nuit,
   on les eclaircit. */
html[data-mode="sombre"] .maplibregl-ctrl-top-right span.maplibregl-ctrl-icon {
  filter: invert(1) brightness(1.5);
}
/* Sur telephone, on agrandit avec les doigts : comme Horizon, pas de
   boutons de zoom ni de boussole. */
@media (max-width: 899.95px) {
  .maplibregl-ctrl-top-right .maplibregl-ctrl-zoom-in,
  .maplibregl-ctrl-top-right .maplibregl-ctrl-zoom-out,
  .maplibregl-ctrl-top-right .maplibregl-ctrl-compass {
    display: none !important;
  }
}

/* La bulle d'information de la carte reprend le rayon des surfaces. */
.maplibregl-popup-content {
  border-radius: 14px !important;
  box-shadow: 0 8px 30px rgba(10, 40, 48, .24) !important;
  padding: 0 !important;
}

/* Un reglage systeme, pas une preference esthetique : certaines personnes
   ont mal au coeur devant une interface qui bouge. */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

@media print {
  * {
    height: auto !important;
    overflow: visible !important;
  }
}

/* ===== Regroupements de la carte ======================================
   Repris de l'application Horizon : une bulle petrole qui porte un anneau
   disant de quoi elle est faite, et qui s'ouvre sur la liste de ce qu'elle
   contient. */

.amas {
  box-sizing: border-box;
  /* Une largeur fixe, et ronde : un bloc pose dans le conteneur de la
     carte sans largeur propre s'etire, et la bulle devient une barre. */
  width: 34px;
  height: 34px;
  border-radius: 50%;
  /* Vert petrole, la couleur de l'habillage, et jamais une couleur
     d'etat : une bulle n'est pas un engin. */
  background: #0B4F5C;
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  display: grid;
  place-items: center;
  cursor: pointer;
  position: absolute;
  box-shadow: 0 0 0 3px #fff, 0 3px 9px rgba(10, 40, 48, .4);
  /* JAMAIS de transition sur « transform » ici : la bibliotheque place
     chaque marqueur par un « transform » en ligne, repose a chaque image
     d'un deplacement. Une transition dessus animait le replacement — la
     bulle nageait au-dessus du fond pendant qu'on faisait glisser. */
  transition: box-shadow .15s ease;
}
.amas:hover { box-shadow: 0 0 0 3px #fff, 0 5px 16px rgba(10, 40, 48, .55); }
.amas.grand { width: 42px; height: 42px; font-size: 15.5px; }
.amas.enorme { width: 52px; height: 52px; font-size: 17px; }
.amas-nombre { line-height: 1; }

/* La jauge : un anneau fin qui dit la part qui roule, la part a l'arret,
   la part sans nouvelles, sans qu'on ait a ouvrir la bulle. Le masque
   radial ne garde du disque que son bord. */
.amas-jauge {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  pointer-events: none;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
}

.bulle-amas .maplibregl-popup-content {
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(10, 40, 48, .28);
  border: 1px solid #EDF2F3;
}
.bulle-amas .maplibregl-popup-close-button {
  width: 28px;
  height: 28px;
  font-size: 19px;
  color: #fff;
  border-radius: 0 12px 0 0;
}
.bulle-amas .maplibregl-popup-close-button:hover { background: rgba(255, 255, 255, .18); }
.bulle-amas .maplibregl-popup-tip { border-top-color: #fff; }

.amas-panneau {
  width: 272px;
  max-width: 78vw;
  /* Sans cette limite, un nom long elargit la liste et la pousse hors du
     panneau : les lignes debordaient sur la carte. */
  box-sizing: border-box;
  overflow: hidden;
}

.amas-tete {
  background: #0B4F5C;
  color: #fff;
  padding: 10px 40px 10px 14px;
  font-size: 13px;
}
.amas-tete strong { font-size: 15px; }

/* La liste defile si le regroupement est nombreux : la bulle ne doit
   jamais depasser la carte, sur telephone surtout. */
.amas-corps {
  max-height: min(38vh, 244px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
}
.amas-ligne {
  box-sizing: border-box;
  max-width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: 0;
  border-bottom: 1px solid #EDF2F3;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.amas-ligne:last-child { border-bottom: none; }
.amas-ligne:hover { background: rgba(11, 79, 92, .05); }
/* L'icone de l'equipement, teintee par son etat. Le masque colore le SVG
   quelle que soit sa couleur d'origine. */
.amas-icone {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex: 0 0 auto;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}
.amas-texte { min-width: 0; overflow: hidden; display: flex; flex-direction: column; }
.amas-nom {
  font-size: 14px;
  font-weight: 600;
  color: #10242A;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.amas-sous {
  font-size: 12px;
  color: #5E757C;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.amas-cadrer {
  display: block;
  width: 100%;
  padding: 11px 14px;
  border: none;
  border-top: 1px solid #EDF2F3;
  background: #fff;
  color: #0B4F5C;
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
.amas-cadrer:hover { background: #F2F8F8; }

.amas-pied {
  padding: 9px 14px;
  border-top: 1px solid #EDF2F3;
  background: #fff;
  color: #5E757C;
  font-size: 12px;
}

/* Sur telephone, la fiche du vehicule se pose sur le menu du bas : l'echelle
   et la mention « © Google » remontent au-dessus d'elle au lieu de passer
   dessous. La fiche donne elle-meme sa hauteur (--fiche-hauteur). */
@media (max-width: 899.95px) {
  .maplibregl-map .maplibregl-ctrl-bottom-left,
  .maplibregl-map .maplibregl-ctrl-bottom-right {
    bottom: calc(
      var(--fiche-hauteur, 0px) + var(--liaison-hauteur, 0px) + var(--barre-etats-hauteur, 0px)
    );
    transition: bottom .22s ease-out;
  }
}