/* Adresses préférées sur la carte (27/10/2026, Jérémy ; pack_adresses_carte, version A) : bandeau du clic sur la carte (W1-W3),
   feuille du téléphone (M1-M3), repères des adresses (C1-C3), listes des champs d'adresse (L1-L4), profil compact (P1).
   Fichier à part : il ne touche aucune règle existante, il passe après elles. Couleurs du pack en variables, avec leur version sombre. */
#kg { --kp-soft:#F4F1EC; --kp-tile:#EEE8E0; --kp-rasp-soft:#FDEEF3; --kp-rasp-ink:#B5164C; --kp-teal:#0B5C6B; --kp-teal-soft:#E4F4F7; --kp-teal-line:#BFDCE2; --kp-handle:#D6CFC4; --kp-go-sub:#FFE1EB; }
#kg[data-theme="dark"] { --kp-soft:#232A34; --kp-tile:#2A313B; --kp-rasp-soft:#3A1624; --kp-rasp-ink:#FF6B95; --kp-teal:#37C2DC; --kp-teal-soft:#0E3B44; --kp-teal-line:#1F5560; --kp-handle:#3A434F; --kp-go-sub:#FFE1EB; }

/* ---- §3 Repères « Mes adresses » (C1-C3) : rond noir cerclé, icône blanche ; nom dessous à partir du zoom 12 ---- */
.kg-fav-mk { background: none; border: 0; }
.kg-fav-dot { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--card);
  box-shadow: 0 0 0 2.5px var(--halo), 0 5px 12px -4px rgba(34,30,26,.6); }
.kg-fav-dot svg { width: 15px; height: 15px; stroke-width: 2.2; }
.kg-fav-lab { display: none; position: absolute; top: 31px; left: 50%; transform: translateX(-50%); white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis;
  padding: 2px 7px; border-radius: 6px; background: var(--glass); color: var(--ink); font: 800 11.5px/1.3 Archivo, sans-serif; box-shadow: 0 1px 4px rgba(34,30,26,.18); }
.kg-fav-names .kg-fav-lab { display: block; }
/* Point cliqué : goutte framboise 28 x 34, pointe sur le point, halo framboise de 40 px dessous ; adresse enregistrée : halo de 52 px autour de son repère. */
.kg-place-point { background: none; border: 0; }
.kg-place-halo { position: absolute; inset: 0; border-radius: 50%; background: rgba(224,27,93,.16); }
.kg-place-drop { position: absolute; left: 6px; top: -14px; width: 28px; height: 34px; filter: drop-shadow(0 3px 4px rgba(34,30,26,.35)); }
.kg-place-favhalo { background: rgba(224,27,93,.18); border: 0; border-radius: 50%; }

/* ---- §1 Bandeau du clic sur la carte, site ordinateur (W1-W3) ---- */
.kg-place { position: absolute; z-index: 900; box-sizing: border-box; width: max-content; display: flex; flex-direction: column; gap: 12px; padding: 14px 14px 14px 16px;
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 22px 44px -22px rgba(34,30,26,.6); font-family: Archivo, sans-serif; }
.kg-place[hidden] { display: none; }
.kg-place-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.kg-place-tile { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px; background: var(--kp-rasp-soft); color: #E01B5D; }
.kg-place-tile svg { width: 20px; height: 20px; }
.kg-place-tile.fav { background: var(--ink); color: var(--card); }
.kg-place-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.kg-place-l1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.kg-place-title { min-width: 0; font-size: 14.5px; font-weight: 800; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kg-place-badge { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--kp-rasp-soft); color: var(--kp-rasp-ink); font-size: 11px; font-weight: 800; white-space: nowrap; }
.kg-place-badge svg { width: 11px; height: 11px; }
.kg-place-badge svg * { fill: currentColor; }
.kg-place-sub { font-size: 13px; line-height: 1.3; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kg-place-x { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink2); cursor: pointer; }
.kg-place-x svg { width: 16px; height: 16px; }
.kg-place-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kg-place-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 13px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--ink); font: 800 13px Archivo, sans-serif; white-space: nowrap; cursor: pointer; }
.kg-place-btn svg { flex: 0 0 auto; width: 16px; height: 16px; }
.kg-place-btn.primary { background: var(--blue); border-color: var(--blue); color: var(--blueink); }
.kg-place-btn.teal { color: var(--kp-teal); border-color: var(--kp-teal-line); }
.kg-place-btn:disabled { opacity: .45; cursor: default; }
@media (hover: hover) { .kg-place-btn:not(:disabled):hover { border-color: var(--ink3); } .kg-place-btn.primary:not(:disabled):hover { background: var(--blueh); border-color: var(--blueh); }
  .kg-place-btn.teal:not(:disabled):hover { border-color: var(--kp-teal); } .kg-place-x:hover { background: var(--kp-soft); } }
/* Bandeau ouvert (ordinateur) : les boutons de zoom du bas de la carte remontent au-dessus de lui au lieu d'être cachés dessous. */
#kg-v3-stage.kg-place-open #kg-v3-map-zoom { transform: translateY(calc(-1 * var(--kp-bh, 0px) - 8px)); transition: transform .18s ease; }
/* « Bornes autour » + Rapides + Lentes : un seul bloc, sur sa propre ligne sous les boutons du trajet. */
.kg-place-around { display: flex; align-items: center; gap: 8px; white-space: nowrap; }   /* ligne à part, à gauche, sous les boutons du trajet (Jérémy, 27/10) */
.kg-place-lab { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); margin-right: 4px; }
/* W3 « Ajouter à mes adresses » : le bandeau s'agrandit sur place */
.kg-place-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; padding: 12px; border: 1.5px solid var(--blue); border-radius: 13px; }
.kg-place-fcol { display: flex; flex-direction: column; gap: 6px; }
.kg-place-flab { font-size: 13px; font-weight: 800; color: var(--ink); }
.kg-place-icons { display: flex; gap: 6px; }
.kg-place-ico { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 9px; background: var(--kp-soft); color: var(--ink2); cursor: pointer; }
.kg-place-ico svg { width: 16px; height: 16px; }
.kg-place-ico.on { background: var(--kp-rasp-soft); color: var(--kp-rasp-ink); box-shadow: inset 0 0 0 1.5px var(--blue); }
.kg-place-fname { flex: 1 1 170px; }
.kg-place-name-in { width: 100%; height: 38px; box-sizing: border-box; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); font: 14px Archivo, sans-serif; }
.kg-place-name-in:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--kp-rasp-soft); }
.kg-place-fbtns { display: flex; gap: 8px; margin-left: auto; }
.kg-place-fbtns .kg-place-btn { height: 38px; padding: 0 16px; }

/* ---- §2 Feuille du bas, site mobile (M1-M3) ---- */
.kg-place.kg-place-m { position: fixed; left: 0; right: 0; bottom: 0; width: auto; z-index: 1500; gap: 12px; padding: 8px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  border: 0; border-radius: 22px 22px 0 0; box-shadow: 0 -14px 34px -18px rgba(34,30,26,.55); transition: transform .2s ease; }
.kg-place-handle { align-self: center; width: 38px; height: 4px; border-radius: 2px; background: var(--kp-handle); }
.kg-place-m .kg-place-title { font-size: 15px; }
.kg-place-m .kg-place-sub { font-size: 12.5px; }
.kg-place-go { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 52px; padding: 0 20px; border: 0; border-radius: 26px;
  background: var(--blue); color: var(--blueink); font-family: Archivo, sans-serif; text-align: left; cursor: pointer; }
.kg-place-go svg { flex: 0 0 auto; width: 22px; height: 22px; }
.kg-place-go b { display: block; font-size: 15px; font-weight: 800; line-height: 1.15; }
.kg-place-go small { display: block; font-size: 11.5px; font-weight: 600; line-height: 1.2; color: var(--kp-go-sub); }
.kg-place-go:disabled { opacity: .5; }
.kg-place-two { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; }
.kg-place-m .kg-place-btn { height: 46px; border-radius: 13px; font-size: 15px; gap: 10px; padding: 0 10px; white-space: normal; line-height: 1.15; text-align: center; }   /* textes longs (es, fi…) : sur 2 lignes plutôt que coupés */
.kg-place-m .kg-place-btn svg { width: 18px; height: 18px; }
.kg-place-m .kg-place-btn.soft { background: var(--kp-soft); border-color: var(--kp-soft); }
.kg-place-m .kg-place-btn.teal { background: var(--kp-teal-soft); border-color: var(--kp-teal-soft); }
.kg-place-m .kg-place-lab { margin: 2px 0 -4px; }

/* ---- §4 Listes des champs d'adresse, site (L1, L2) : « Mes adresses » puis « Adresses » ---- */
.kg-sug-head { padding: 10px 12px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); }
.kg-sug-head ~ .kg-sug-head { border-top: 1px solid var(--line); margin-top: 2px; }
.kg-suggestion-item.kg-sug2 { display: flex; align-items: center; gap: 10px; min-height: 44px; box-sizing: border-box; padding: 0 12px; border-bottom: 0; color: var(--ink); }
.kg-sug2-tile { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: var(--kp-tile); color: var(--ink2); }
.kg-sug2-tile svg { width: 15px; height: 15px; }
.kg-sug2.saved .kg-sug2-tile { background: var(--ink); color: var(--card); }
/* Deux lignes, nom puis adresse dessous (Jérémy, 27/10/2026 : « sur le site web mets les adresses sur deux lignes aussi »). */
.kg-suggestion-item.kg-sug2 { padding: 6px 12px; }
.kg-sug2-txt { flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; min-width: 0; white-space: nowrap; }
.kg-sug2-txt b { overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; line-height: 16px; font-weight: 800; color: var(--ink); }
.kg-sug2-txt span { overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; line-height: 15px; color: var(--ink3); }
.kg-sug2:not(.saved):not(.accent) .kg-sug2-txt b { font-weight: 400; }   /* suggestions du géocodeur : nom non gras (L2) */
.kg-sug2.accent .kg-sug2-tile { background: var(--kp-teal-soft); color: var(--kp-teal); }   /* « Choisir sur la carte » (L1) */
mark.kg-sug-hl { background: none; color: #E01B5D; font-weight: inherit; }
#kg[data-theme="dark"] mark.kg-sug-hl { color: var(--blue); }
.kg-suggestion-item.kb { background: var(--card2); }

/* ---- §4 Page d'adresse du téléphone (L3, L4) : lignes de 56 px sur deux lignes (nom, adresse dessous) ; Domicile, Travail et
   adresses enregistrées en tuile noire, suggestions du géocodeur en tuile claire ---- */
.kg-m-addr-row.saved .kg-m-addr-ic { background: var(--ink); color: var(--card); }
.kg-m-addr-row.geo .kg-m-addr-ic { background: var(--kp-tile); color: var(--ink2); }

/* ---- §5 Profil « Mes adresses » compact, site ordinateur (P1) -- le téléphone garde ses lignes actuelles (doigt) ---- */
.kg-addr-filter { display: flex; align-items: center; gap: 8px; height: 36px; box-sizing: border-box; margin: 0 0 8px; padding: 0 12px; border-radius: 10px; background: var(--kp-soft); color: var(--ink3); }
.kg-addr-filter[hidden] { display: none; }
.kg-addr-filter svg { flex: 0 0 auto; width: 16px; height: 16px; }
.kg-addr-filter input { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; border: 0; background: none; color: var(--ink); font: 13.5px Archivo, sans-serif; outline: none; }
#kg-xaddr-add:disabled { opacity: .45; cursor: default; }
@media (min-width: 641px) and (min-height: 501px), (min-width: 1001px) {
  .kg-addr-list { gap: 6px; }
  .kg-addr-row { min-height: 44px; padding: 0 4px 0 8px; gap: 10px; border-radius: 10px; }
  .kg-addr-ico { width: 28px; height: 28px; border-radius: 8px; }
  .kg-addr-ico svg { width: 15px; height: 15px; }
  .kg-addr-txt { flex-direction: row; align-items: baseline; gap: 10px; white-space: nowrap; }
  .kg-addr-txt b { flex: 0 0 auto; max-width: 60%; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; font-weight: 800; }
  .kg-addr-txt .kg-addr-line { flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: var(--ink3); }
  .kg-addr-txt .kg-addr-add-txt { font-size: 12.5px; }
  .kg-addr-row .kg-vx-iconbtn.small { width: 30px; height: 30px; }
  .kg-addr-row .kg-vx-iconbtn.small svg { width: 15px; height: 15px; }
  /* La liste des autres adresses défile dans le panneau ; dégradé de 40 px en bas tant qu'il reste des lignes plus bas. */
  #kg-xaddr-list { max-height: min(46vh, 430px); overflow-y: auto; overscroll-behavior: contain; padding-bottom: 2px; }
  #kg-xaddr-list.kg-more-below { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent); }
}

/* Champ « Adresse » de la modification (profil) : la loupe passait sur le texte au téléphone (vu avec une adresse préremplie depuis la carte). */
#kg .kg-addr-edit .kg-addr-search .kg-addr-input { padding-left: 40px; }
#kg .kg-addr-search > svg { top: 50%; transform: translateY(-50%); }

/* ---- Petits effets (27/10/2026, Jérémy) : point cliqué (la goutte tombe avec un petit rebond, une onde framboise s'étend), ouverture du bandeau
   (monte en fondu) et de la feuille du téléphone (monte du bas) ; point déplacé bandeau ouvert : le contenu se renouvelle en fondu. ---- */
@keyframes kp-drop { 0% { transform: translateY(-16px) scale(.6); opacity: 0; } 60% { transform: translateY(2px) scale(1.05); opacity: 1; } 100% { transform: none; } }
@keyframes kp-halo { 0% { transform: scale(.2); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes kp-ring { 0% { transform: scale(.4); opacity: .6; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes kp-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes kp-sheet { from { transform: translateY(100%); } to { transform: none; } }
@keyframes kp-swap { from { opacity: .3; } to { opacity: 1; } }
.kg-place-drop { transform-origin: 14px 33px; animation: kp-drop .4s cubic-bezier(.3,1.4,.5,1) both; }
.kg-place-halo { animation: kp-halo .35s ease-out both; }
.kg-place-halo::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(224,27,93,.5); animation: kp-ring .65s ease-out both; }
.kg-place-favhalo { animation: kp-halo .3s ease-out both; }
.kg-place.kg-place-in { animation: kp-in .24s cubic-bezier(.2,.8,.2,1) both; }
.kg-place.kg-place-m.kg-place-in { animation: kp-sheet .3s cubic-bezier(.2,.8,.2,1) both; }
.kg-place.kg-place-swap > * { animation: kp-swap .22s ease both; }
@media (prefers-reduced-motion: reduce) {
  .kg-place-drop, .kg-place-halo, .kg-place-halo::after, .kg-place-favhalo, .kg-place.kg-place-in, .kg-place.kg-place-m.kg-place-in, .kg-place.kg-place-swap > * { animation: none; }
}

/* ---- Téléphone : modifier une adresse en page plein écran (pack_modifier_adresse_mobile E1-E3, 27/10/2026 ; kargit-v3.js, xPage) ----
   Comme la page de saisie d'adresse (#kg-m-addr, au-dessus d'elle-même quand on choisit l'adresse) ; Enregistrer suit le clavier (--vv-h). */
@media (max-width: 640px), (orientation: landscape) and (max-height: 500px) and (max-width: 1000px) {
  #kg-m-xedit { position: fixed; left: 0; right: 0; top: var(--vv-top, 0px); height: var(--vv-h, 100dvh); z-index: 3100; display: flex; flex-direction: column;
    background: var(--card); color: var(--ink); font-family: Archivo, sans-serif; transform: translateY(18px); opacity: 0; pointer-events: none;
    transition: transform .22s cubic-bezier(.2,.7,.2,1), opacity .18s ease; }
  html.kg-m-xedit-open #kg-m-xedit { transform: none; opacity: 1; pointer-events: auto; }
  html.kg-m-xedit-open #kg-unsaved-modal, html.kg-m-xedit-open #kg-confirm-modal { z-index: 3150; }
  html.kg-m-xedit-open .kg-error-banner { z-index: 3160; }
  .kg-xe-title { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; padding-left: 4px; }
  .kg-xe-title b { font-size: 17px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kg-xe-tile { flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--ink); color: var(--card); }
  .kg-xe-tile svg { width: 17px; height: 17px; }
  .kg-xe-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 18px; padding: 18px 16px; }
  .kg-xe-sec { display: flex; flex-direction: column; gap: 8px; }
  .kg-xe-lab { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }
  .kg-xe-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .kg-xe-ico { display: grid; place-items: center; height: 48px; border: 0; border-radius: 12px; background: var(--kp-soft); color: var(--ink2); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .kg-xe-ico svg { width: 22px; height: 22px; }
  .kg-xe-ico.on { background: var(--kp-rasp-soft); color: var(--kp-rasp-ink); box-shadow: inset 0 0 0 1.5px #E01B5D; }
  .kg-xe-name { box-sizing: border-box; width: 100%; height: 48px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--kp-soft); color: var(--ink);
    font: 400 16px Archivo, sans-serif; outline: none; }
  .kg-xe-name:focus { background: var(--card); box-shadow: inset 0 0 0 1.5px var(--mintt); caret-color: var(--blue); }
  .kg-xe-addr { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 10px 8px 14px; border: 0; border-radius: 12px; background: var(--kp-soft);
    color: var(--ink2); text-align: left; font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .kg-xe-addr > svg { flex: 0 0 auto; width: 18px; height: 18px; }
  .kg-xe-addr > svg:last-child { color: var(--ink3); }
  .kg-xe-addr-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .kg-xe-addr-t b { font-size: 15px; font-weight: 400; color: var(--ink); }
  .kg-xe-addr-t small { font-size: 12px; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kg-xe-addr-t i { font-style: normal; font-size: 15px; color: var(--ink3); }
  .kg-xe-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
  .kg-xe-foot { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 4px 16px calc(18px + env(safe-area-inset-bottom, 0px)); }
  .kg-xe-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--ink2);
    font: 700 14px Archivo, sans-serif; cursor: pointer; }
  .kg-xe-link.danger { color: #B0281B; }
  #kg[data-theme="dark"] .kg-xe-link.danger { color: #FF8F70; }
  .kg-xe-link svg { width: 17px; height: 17px; }
  .kg-xe-save { width: 100%; height: 50px; border: 0; border-radius: 25px; background: #E01B5D; color: #fff; font: 800 16px Archivo, sans-serif; cursor: pointer;
    box-shadow: 0 6px 16px rgba(224,27,93,.35); }
  .kg-xe-save:disabled { opacity: .45; cursor: default; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { #kg-m-xedit { transition: none; } }