/* OpenGTA6Map — habillage de la carte. Tout est préfixé .ca, en propriétés logiques (arabe, ourdou), téléphone d'abord. */
.ca {
  --ca-tete: 64px;
  --ca-barre: 54px;
  --ca-fond: #1d002ef2;
  --ca-fond-plein: var(--bitume);
  --ca-texte: var(--papier);
  --ca-doux: var(--gris);
  --ca-trait: var(--trait);
  --ca-bouton: var(--asphalte);
  --ca-bouton-survol: var(--gravier);
  --ca-accent: var(--orange);
  --ca-accent-texte: var(--encre);
}
.ca[data-theme="clair"] {
  --ca-fond: #fff6eef5;
  --ca-fond-plein: #fff6ee;
  --ca-texte: #2a0a47;
  --ca-doux: #5a3a78;
  --ca-trait: #d9b9c9;
  --ca-bouton: #fbdfc8;
  --ca-bouton-survol: #fbcca6;
  --ca-accent: #df3bb8;
  --ca-accent-texte: #fff;
}
.ca[data-theme="contraste"] { --ca-fond: #000; --ca-fond-plein: #000; --ca-texte: #fff; --ca-doux: #e0e0e0; --ca-trait: #fff; --ca-bouton: #1a1a1a; --ca-bouton-survol: #333; --ca-accent: #ffe066; --ca-accent-texte: #000; }

.ca-scene { position: relative; block-size: calc(100dvh - var(--ca-tete)); min-block-size: 420px; overflow: hidden; background: #10002a; isolation: isolate; contain: layout paint; }
.ca-carte { position: absolute; inset: 0; }
.ca-carte .maplibregl-canvas { outline: none; }
.ca-carte .maplibregl-canvas:focus-visible { outline: 3px solid var(--peche); outline-offset: -3px; }

/* Recherche */
.ca-haut { position: absolute; z-index: 5; inset-block-start: 10px; inset-inline: 10px; pointer-events: none; }
.ca-recherche { position: relative; pointer-events: auto; max-inline-size: 420px; }
.ca-recherche input[type="search"] { background: var(--ca-fond); color: var(--ca-texte); border: 2px solid var(--ca-trait); border-radius: 12px; min-block-size: 48px; box-shadow: 0 6px 22px #0006; }
.ca-recherche input::placeholder { color: var(--ca-doux); opacity: 1; }
.ca-resultats { position: absolute; inset-inline: 0; inset-block-start: calc(100% + 6px); max-block-size: 52dvh; overflow-y: auto; margin: 0; padding: 6px; list-style: none; background: var(--ca-fond-plein); color: var(--ca-texte); border: 2px solid var(--ca-trait); border-radius: 12px; box-shadow: 0 10px 30px #0008; }
.ca-resultats li { display: flex; gap: 10px; align-items: center; padding: 8px; min-block-size: 44px; border-radius: 8px; cursor: pointer; }
.ca-resultats li:hover, .ca-resultats li[aria-selected="true"] { background: var(--ca-bouton); }
.ca-resultats li.ca-vide { cursor: default; color: var(--ca-doux); }
.ca-resultats strong { display: block; font-weight: 750; }
.ca-resultats small { display: block; color: var(--ca-doux); }

/* Barre du bas : panneaux */
.ca-barre { position: absolute; z-index: 7; inset-inline: 0; inset-block-end: 0; display: flex; block-size: var(--ca-barre); background: var(--ca-fond-plein); border-block-start: 2px solid var(--ca-trait); padding-block-end: env(safe-area-inset-bottom); }
.ca-onglet { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-inline-size: 0; border: 0; background: none; color: var(--ca-texte); font-family: var(--titre); font-weight: 800; font-size: 1.14rem; line-height: 1; text-transform: var(--casse-titre); text-decoration: none; cursor: pointer; padding-inline: 2px; }
.ca-onglet span { white-space: nowrap; overflow-wrap: normal; }
:lang(ar) .ca-onglet, :lang(ur) .ca-onglet, :lang(hi) .ca-onglet, :lang(bn) .ca-onglet { font-size: 1rem; }
.ca-onglet:hover { color: var(--ca-texte); background: var(--ca-bouton); }
.ca-onglet[aria-expanded="true"] { background: var(--ca-accent); color: var(--ca-accent-texte); }
.ca-pastille { min-inline-size: 20px; padding: 0 5px; border-radius: 10px; background: var(--ca-accent); color: var(--ca-accent-texte); font-family: var(--texte); font-size: .74rem; line-height: 20px; text-align: center; }
.ca-onglet[aria-expanded="true"] .ca-pastille { background: var(--ca-accent-texte); color: var(--ca-accent); }

/* Mention permanente et échelle */
.ca-mention { position: absolute; z-index: 3; inset-block-end: calc(var(--ca-barre) + 8px); inset-inline-start: 8px; max-inline-size: min(70vw, 420px); margin: 0; padding: 4px 8px; border-radius: 8px; background: var(--ca-fond); color: var(--ca-texte); font-size: .74rem; line-height: 1.25; }
.ca-echelle { position: absolute; z-index: 3; inset-block-end: calc(var(--ca-barre) + 8px); inset-inline-end: 8px; display: flex; align-items: center; gap: 6px; padding: 3px 7px; border-radius: 8px; background: var(--ca-fond); color: var(--ca-texte); font-size: .74rem; direction: ltr; }
.ca-echelle i { display: block; inline-size: var(--l, 56px); block-size: 6px; border: 2px solid currentColor; border-block-start: 0; }
.ca-lien { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: .15em; cursor: pointer; text-align: start; }

/* Feuille : bas de l'écran sur téléphone */
.ca-feuille { position: absolute; z-index: 6; inset-inline: 0; inset-block-end: var(--ca-barre); max-block-size: min(66%, 560px); display: flex; flex-direction: column; background: var(--ca-fond-plein); color: var(--ca-texte); border-block-start: 3px solid var(--ca-accent); border-radius: 16px 16px 0 0; box-shadow: 0 -12px 34px #0007; outline: none; }
.ca-feuille[hidden] { display: none; }
.ca-feuille__tete { display: flex; align-items: center; gap: 10px; padding: 8px 8px 6px 14px; }
[dir="rtl"] .ca-feuille__tete { padding: 8px 14px 6px 8px; }
.ca-feuille__titre { flex: 1; margin: 0; font-size: 1.7rem; }
.ca-fermer { position: relative; flex: none; inline-size: 44px; block-size: 44px; border: 0; border-radius: 10px; background: var(--ca-bouton); color: var(--ca-texte); cursor: pointer; }
.ca-fermer::before, .ca-fermer::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: 20px; block-size: 3px; margin: -1.5px 0 0 -10px; background: currentColor; transform: rotate(45deg); }
.ca-fermer::after { transform: rotate(-45deg); }
.ca-feuille__corps { padding: 2px 14px 16px; overflow-y: auto; overscroll-behavior: contain; font-size: 1rem; }
.ca-feuille__corps a { color: inherit; }

.ca-groupe { margin: 0 0 14px; padding: 0; border: 0; min-inline-size: 0; }
.ca-groupe legend { padding: 0; margin-block-end: 4px; font-family: var(--titre); font-weight: 800; font-size: 1.28rem; text-transform: var(--casse-titre); }
.ca-ligne { display: flex; align-items: center; gap: 10px; min-block-size: 44px; padding-block: 3px; cursor: pointer; }
.ca-ligne--fixe { cursor: default; min-block-size: 36px; }
.ca-ligne__nom { flex: 1; display: flex; flex-direction: column; font-weight: 650; line-height: 1.2; min-inline-size: 0; overflow-wrap: normal; }
.ca-ligne small { color: var(--ca-doux); }
.ca-compte { color: var(--ca-doux); font-size: .78rem; font-weight: 500; }
.ca-icone { flex: none; inline-size: 30px; block-size: 30px; }
.ca-etat { margin: 6px 0; color: var(--ca-doux); font-size: .92rem; }
.ca-etat p { margin: 0 0 4px; }
.ca-aide { margin: 6px 0 10px; color: var(--ca-doux); font-size: .86rem; line-height: 1.35; }
.ca-grand { margin: 0 0 8px; font-family: var(--titre); font-weight: 800; font-size: 1.9rem; line-height: 1; text-transform: var(--casse-titre); }
.ca-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 8px; }
.ca-b { display: inline-flex; align-items: center; justify-content: center; min-block-size: 44px; padding: 6px 12px; border: 0; border-radius: 10px; background: var(--ca-bouton); color: var(--ca-texte); font-weight: 700; font-size: .95rem; line-height: 1.1; text-decoration: none; cursor: pointer; }
.ca-b:hover { background: var(--ca-bouton-survol); color: var(--ca-texte); }
.ca-b--principal, .ca-b[aria-pressed="true"] { background: var(--ca-accent); color: var(--ca-accent-texte); }
.ca-b--principal:hover { background: var(--ca-accent); color: var(--ca-accent-texte); filter: brightness(1.08); }
.ca-segments { display: flex; gap: 4px; flex-wrap: wrap; }
.ca-segments label { flex: 1; position: relative; }
.ca-segments input { position: absolute; opacity: 0; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; cursor: pointer; }
.ca-segments span { display: flex; align-items: center; justify-content: center; min-block-size: 44px; padding-inline: 6px; border-radius: 8px; background: var(--ca-bouton); font-weight: 700; font-size: .92rem; }
.ca-segments input:checked + span { background: var(--ca-accent); color: var(--ca-accent-texte); }
.ca-segments input:focus-visible + span { outline: 3px solid var(--peche); outline-offset: 2px; }
.ca-code { font-family: ui-monospace, monospace; font-size: .8rem; background: var(--ca-bouton); color: var(--ca-texte); border: 1px solid var(--ca-trait); }
.ca-touches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 12px; margin: 0; padding: 0; list-style: none; font-size: .9rem; }
.ca-touches li { display: flex; align-items: center; gap: 8px; }
.ca-touches kbd { min-inline-size: 30px; padding: 1px 6px; border-radius: 6px; background: var(--ca-bouton); font-family: ui-monospace, monospace; font-size: .78rem; text-align: center; direction: ltr; }
.ca-progres { margin: 12px 0; padding: 0; list-style: none; }
.ca-progres li { display: flex; align-items: center; gap: 10px; padding-block: 3px; }
.ca-progres span:nth-child(2) { flex: 1; }

/* Un texte encore en anglais sur une page arabe ou ourdoue garde son sens de lecture : chaque bloc prend celui de son contenu. */
.ca-feuille__titre, .ca-mention, .ca-feuille__corps :is(p, small, span, label, legend, dt, dd, li, button), .ca-resultats :is(strong, small, span), .ca-menu__b { unicode-bidi: plaintext; }

/* Fiche */
.ca-fiche__ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; color: var(--ca-doux); font-weight: 650; }
.ca-dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; margin: 10px 0; font-size: .92rem; }
.ca-dl dt { color: var(--ca-doux, var(--gris)); }
.ca-dl dd { margin: 0; }
.ca-sous { margin: 14px 0 4px; font-size: 1.28rem; }
.ca-sources, .ca-voisins { margin: 0; padding: 0; list-style: none; }
.ca-sources { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .92rem; }
.ca-voisins li { display: flex; justify-content: space-between; gap: 10px; align-items: center; min-block-size: 40px; }
.ca-voisins small { color: var(--ca-doux); direction: ltr; }
.ca-formulaire select, .ca-formulaire textarea, .ca-formulaire input { background: var(--ca-bouton); color: var(--ca-texte); }

/* Menu contextuel */
.ca-menu { position: absolute; z-index: 8; inset-block-start: var(--y); inset-inline-start: var(--x); inline-size: 230px; margin: 0; padding: 6px; list-style: none; background: var(--ca-fond-plein); color: var(--ca-texte); border: 2px solid var(--ca-trait); border-radius: 12px; box-shadow: 0 10px 30px #0008; }
[dir="rtl"] .ca-menu { inset-inline-start: auto; inset-inline-end: 8px; }
.ca-menu__tete { padding: 2px 8px 6px; color: var(--ca-doux); font-size: .78rem; direction: ltr; text-align: start; }
.ca-menu__b { display: block; inline-size: 100%; min-block-size: 40px; padding: 6px 8px; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; font-size: .95rem; text-align: start; cursor: pointer; }
.ca-menu__b:hover, .ca-menu__b:focus-visible { background: var(--ca-bouton); }

/* Légende : échantillons de traits */
.ca-t { flex: none; inline-size: 30px; block-size: 0; border-block-start: 4px solid; }
.ca-t--interstate { border-color: var(--orange); }
.ca-t--us { border-color: var(--corail); }
.ca-t--etat { border-color: var(--peche); border-block-start-width: 3px; }
.ca-t--region { border-color: var(--rose); border-block-start: 2px dotted var(--rose); }
.ca-t--comte { border-color: var(--gris-2); border-block-start: 2px dashed var(--gris-2); }
.ca-t--frontiere { border-color: var(--rose); border-block-start: 3px dashed var(--rose); }
.ca-t--cercle { block-size: 20px; border: 2px dashed var(--peche); border-radius: 50%; inline-size: 20px; margin-inline: 5px; }
.ca[data-theme="clair"] .ca-t--interstate { border-color: var(--magenta); }
.ca[data-theme="clair"] .ca-t--etat { border-color: var(--orange); }
.ca[data-theme="clair"] .ca-t--cercle { border-color: var(--violet); }

/* Contrôles du moteur */
.ca-carte .maplibregl-ctrl-top-right, .ca-carte .maplibregl-ctrl-top-left { margin-block-start: 66px; }
.ca-carte .maplibregl-ctrl-group { background: var(--ca-fond-plein); border-radius: 10px; box-shadow: 0 4px 14px #0006; overflow: hidden; }
.ca-carte .maplibregl-ctrl-group button { inline-size: 44px; block-size: 44px; }
.ca-carte .maplibregl-ctrl-group button + button { border-block-start: 1px solid var(--ca-trait); }
.ca-carte .maplibregl-ctrl-group .maplibregl-ctrl-icon { filter: invert(1); }
.ca[data-theme="clair"] .maplibregl-ctrl-group .maplibregl-ctrl-icon { filter: none; }
.ca-carte .maplibregl-ctrl-attrib { background: var(--ca-fond); color: var(--ca-texte); font-size: .68rem; }
.ca-carte .maplibregl-ctrl-attrib a { color: inherit; }
.ca-carte .maplibregl-ctrl-bottom-right, .ca-carte .maplibregl-ctrl-bottom-left { margin-block-end: calc(var(--ca-barre) + 36px); }

/* Sans WebGL 2 : la scène cède la place à la liste */
.ca[data-repli] .ca-scene { block-size: auto; min-block-size: 0; overflow: visible; contain: none; background: none; }
.ca[data-repli] .ca-carte, .ca[data-repli] .ca-mention, .ca[data-repli] .ca-echelle, .ca[data-repli] .ca-haut { display: none; }
.ca[data-repli] .ca-barre { position: static; }
.ca[data-repli] .ca-feuille { position: static; max-block-size: none; border-radius: 0; box-shadow: none; }

/* Texte et liste sous la carte */
.ca-texte { padding-block: 26px 10px; scroll-margin-block-start: 70px; }
.ca-texte h1 { font-size: clamp(2.2rem, 8vw, 3.6rem); }
.ca-liste-tete { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; color: var(--gris); }
.ca-liste-tete .coche { padding: 0; }
.ca-items, .ca-sans { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 6px 14px; margin: 0 0 16px; padding: 0; list-style: none; }
.ca-item { padding: 8px 10px; border-radius: 10px; background: var(--bitume); }
.ca-item[hidden] { display: none; }
.ca-item[data-fait] { outline: 2px solid var(--vert); outline-offset: -2px; }
.ca-item__nom { font-weight: 750; }
.ca-item small { color: var(--gris); }
.ca-item__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 6px; }
.ca-item__actions:empty { display: none; }
.ca-item .ca-b { background: var(--asphalte); color: var(--papier); min-block-size: 44px; font-size: .88rem; }
.ca-item .ca-b[aria-pressed="true"] { background: var(--orange); color: var(--encre); }
.ca-sans li { padding: 4px 0; }

/* Pages de lieux */
.ca-lieu__cat { color: var(--gris); font-weight: 650; }
.ca-lieu__grille { display: grid; gap: 18px; align-items: start; }
.ca-plan { margin: 0; max-inline-size: 300px; }
.ca-plan svg { inline-size: 100%; block-size: auto; background: #180a3e; border-radius: var(--rayon); }
.ca-plan__terre { fill: #2c0a47; stroke: #6a7fe0; stroke-width: 2.5; }
.ca-plan__lac { fill: #3450b4; }
.ca-plan__rayon { fill: #fbcca633; stroke: var(--peche); stroke-width: 3; stroke-dasharray: 10 8; }
.ca-plan__point { fill: var(--orange); stroke: var(--encre); stroke-width: 3; }
.ca-plan figcaption { margin-block-start: 6px; color: var(--gris); font-size: .84rem; }
.ca-voisins-page { columns: 2 220px; }
.ca-voisins-page small { color: var(--gris); }
.ca-lieu .ca-aide { color: var(--gris); }
.ca-lieu .ca-dl { --ca-doux: var(--gris); }

/* Page à intégrer : la carte seule, le site reste à une adresse de là */
.page-carte--embed .tete, .page-carte--embed .menu, .page-carte--embed .pied, .page-carte--embed .evitement, .page-carte--embed .bandeau-langue { display: none; }
.page-carte--embed .ca { --ca-tete: 0px; }
.page-carte--embed .ca-scene { min-block-size: 280px; }

@media (min-width: 900px) {
  .ca { --ca-barre: 0px; }
  .ca-haut { inset-inline: auto; inset-inline-start: 12px; inset-block-start: 12px; inline-size: 344px; }
  .ca-barre { inset-block-end: auto; inset-block-start: 72px; inset-inline: auto; inset-inline-start: 12px; inline-size: 344px; block-size: 46px; border: 2px solid var(--ca-trait); border-radius: 12px 12px 0 0; padding: 0; overflow: hidden; }
  .ca-feuille { inset-inline: auto; inset-inline-start: 12px; inset-block: 118px 44px; inline-size: 344px; max-block-size: none; border: 2px solid var(--ca-trait); border-block-start: 0; border-radius: 0 0 12px 12px; box-shadow: 0 10px 30px #0006; }
  .ca-feuille__titre { font-size: 1.9rem; }
  .ca-mention { inset-block-end: 10px; inset-inline-start: 12px; max-inline-size: 344px; }
  .ca-echelle { inset-block-end: 40px; inset-inline-end: 10px; }
  .ca-carte .maplibregl-ctrl-top-right, .ca-carte .maplibregl-ctrl-top-left { margin-block-start: 12px; }
  .ca-carte .maplibregl-ctrl-bottom-right, .ca-carte .maplibregl-ctrl-bottom-left { margin-block-end: 4px; }
  .ca-lieu__grille { grid-template-columns: 1fr 300px; }
  .ca[data-repli] .ca-barre, .ca[data-repli] .ca-feuille { inline-size: auto; }
  .page-carte--embed .ca-barre { inset-block-start: auto; inset-block-end: 0; inset-inline: 0; inline-size: auto; border-radius: 0; }
  .page-carte--embed .ca-feuille { inset-block: 60px 46px; }
}

/* Droite à gauche : l'échelle est écrite de gauche à droite, donc ses côtés logiques sont inversés. On la place
   physiquement à gauche, à l'opposé de la mention. */
[dir="rtl"] .ca-echelle { inset-inline-end: auto; left: 8px; }
@media (min-width: 900px) { [dir="rtl"] .ca-echelle { left: 10px; } }