/* OpenTN — charte inspirée du drapeau tunisien : rouge #E70013, blanc, encre chaude.
   Mise en page : carte plein écran, panneau catalogue au bord de lecture, outils en rail au bord opposé. */
:root {
  --rouge: #E70013;
  --rouge-fonce: #B3000F;
  --rouge-pale: #FDE8EA;
  --rouge-plein: #E70013;
  --fond: #F7F4F4;
  --surface: #FFFFFF;
  --surface-2: #F3EEEE;
  --encre: #1F1617;
  --gris: #6B5E60;
  --trait: #E6DCDD;
  --ombre: 0 1px 2px rgba(31, 22, 23, .08), 0 8px 24px rgba(31, 22, 23, .10);
  --ombre-forte: 0 12px 40px rgba(31, 22, 23, .22);
  --vert: #1F8A4C;
  --ambre: #B7791F;
  --bleu: #1D6FB8;
  --f-titre: "Reem Kufi", "IBM Plex Sans Arabic", "Segoe UI", sans-serif;
  --f-texte: "IBM Plex Sans", "IBM Plex Sans Arabic", "Segoe UI", Roboto, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --rayon: 10px;
  --haut-barre: 58px;
  --larg-panneau: 372px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --rouge: #FF3448; --rouge-fonce: #FF6B7A; --rouge-pale: #3A1519; --rouge-plein: #C40016;
    --fond: #120D0E; --surface: #1C1516; --surface-2: #261D1F; --encre: #F5EDEE; --gris: #B4A6A8; --trait: #3A2E30;
    --ombre: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.45); --ombre-forte: 0 12px 40px rgba(0,0,0,.6);
    --vert: #4CC27E; --ambre: #E0A84A; --bleu: #5AA7EE;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --rouge: #FF3448; --rouge-fonce: #FF6B7A; --rouge-pale: #3A1519; --rouge-plein: #C40016;
  --fond: #120D0E; --surface: #1C1516; --surface-2: #261D1F; --encre: #F5EDEE; --gris: #B4A6A8; --trait: #3A2E30;
  --ombre: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.45); --ombre-forte: 0 12px 40px rgba(0,0,0,.6);
  --vert: #4CC27E; --ambre: #E0A84A; --bleu: #5AA7EE;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--fond); color: var(--encre); font: 14px/1.45 var(--f-texte); -webkit-font-smoothing: antialiased; overflow: hidden; }
[dir="rtl"] body { font-family: "IBM Plex Sans Arabic", var(--f-texte); }
[hidden] { display: none !important; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--rouge); outline-offset: 2px; }
.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic.grand { width: 40px; height: 40px; stroke-width: 1.4; color: var(--rouge); }
[dir="rtl"] .ic use[href="#i-chev"] { transform: scaleX(-1); transform-origin: center; }

.app { position: fixed; inset: 0; display: grid; grid-template-rows: var(--haut-barre) 1fr; }

/* ---------- Barre ---------- */
.barre {
  display: flex; align-items: center; gap: 14px; position: relative; z-index: 30;
  padding-block: 0; padding-left: max(14px, env(safe-area-inset-left, 0px)); padding-right: max(14px, env(safe-area-inset-right, 0px));
  background: var(--surface); border-bottom: 1px solid var(--trait);
}
.barre::after { content: ""; position: absolute; inset: auto 0 -1px 0; height: 3px; background: var(--rouge-plein); }
.marque { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--encre); flex: none; }
.sceau { width: 34px; height: 34px; display: block; }
.sceau svg { width: 100%; height: 100%; display: block; }
.sceau-fond, .sceau-rouge { fill: #E70013; }
.mot { font: 700 23px/1 var(--f-titre); letter-spacing: .2px; }
.mot b { color: var(--rouge); font-weight: 700; }
.devise { font-size: 11.5px; color: var(--gris); letter-spacing: .3px; border-inline-start: 1px solid var(--trait); padding-inline-start: 10px; max-width: 120px; line-height: 1.25; }

.recherche { position: relative; flex: 1 1 auto; max-width: 540px; margin-inline-start: 8px; }
.recherche > .ic { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); color: var(--gris); pointer-events: none; }
.recherche input {
  width: 100%; height: 40px; border-radius: 20px; border: 1px solid var(--trait); background: var(--surface-2);
  padding-inline: 38px 14px; outline: none; transition: border-color .15s, background .15s;
}
.recherche input:focus { border-color: var(--rouge); background: var(--surface); }
.resultats {
  position: absolute; top: 46px; inset-inline: 0; background: var(--surface); border: 1px solid var(--trait);
  border-radius: 12px; box-shadow: var(--ombre-forte); max-height: min(60vh, 440px); overflow-y: auto; padding: 6px; z-index: 40;
}
.res-groupe { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--gris); padding: 8px 10px 4px; }
[dir="rtl"] .res-groupe { text-transform: none; letter-spacing: 0; }
.res { display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: start; border: 0; background: none; padding: 8px 10px; border-radius: 8px; }
.res:hover, .res.focus { background: var(--rouge-pale); }
.res .ic { margin-top: 2px; color: var(--rouge); }
.res b { display: block; font-weight: 600; }
.res small { color: var(--gris); }
.res-vide { padding: 12px; color: var(--gris); }

.barre-actions { display: flex; gap: 6px; margin-inline-start: auto; align-items: center; }
.bouton-ic { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; border: 1px solid transparent; background: none; color: var(--encre); }
.bouton-ic:hover { background: var(--surface-2); border-color: var(--trait); }
.bouton-ic.petit { width: 30px; height: 30px; border-radius: 8px; }
.bouton-texte { height: 34px; border-radius: 17px; border: 1px solid var(--trait); background: var(--surface); padding: 0 12px; display: flex; gap: 6px; align-items: center; font-weight: 600; font-size: 13px; }
.bouton-texte .lg-sep { color: var(--trait); }
.bouton-texte .lg-ar { font-family: "IBM Plex Sans Arabic", sans-serif; }
html[lang="fr"] .lg-fr, html[lang="ar"] .lg-ar { color: var(--rouge); }

/* ---------- Panneau ---------- */
.panneau {
  position: fixed; top: calc(var(--haut-barre) + 12px); bottom: 12px; inset-inline-start: max(12px, env(safe-area-inset-left, 0px));
  width: var(--larg-panneau); background: var(--surface); border: 1px solid var(--trait); border-radius: 14px; box-shadow: var(--ombre);
  display: flex; flex-direction: column; z-index: 20; overflow: hidden; transition: transform .25s ease, opacity .25s;
}
.panneau.ferme { transform: translateX(calc(-100% - 24px)); opacity: 0; pointer-events: none; }
[dir="rtl"] .panneau.ferme { transform: translateX(calc(100% + 24px)); }
.poignee { display: none; }
.onglets { display: flex; padding: 6px; gap: 4px; border-bottom: 1px solid var(--trait); flex: none; }
.onglets-liste { display: flex; gap: 4px; flex: 1; min-width: 0; }
.onglet { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 36px; border: 0; border-radius: 8px; background: none; color: var(--gris); font-weight: 600; font-size: 13px; position: relative; }
.onglet:hover { background: var(--surface-2); color: var(--encre); }
.fermer-panneau { flex: none; align-self: center; color: var(--gris); }
.onglet.actif { background: var(--rouge-pale); color: var(--rouge-fonce); }
.compteur { font-style: normal; font-size: 11px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--rouge-plein); color: #fff; display: inline-grid; place-items: center; padding: 0 5px; font-variant-numeric: tabular-nums; }
.compteur.zero { background: var(--trait); color: var(--gris); }
.vue { flex: 1; overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
.filtre { padding: 10px 12px 4px; position: sticky; top: 0; background: var(--surface); z-index: 2; }
.filtre input { width: 100%; height: 34px; border-radius: 8px; border: 1px solid var(--trait); background: var(--surface-2); padding: 0 12px; outline: none; }
.filtre input:focus { border-color: var(--rouge); }

/* Arbre des thèmes */
.arbre { padding: 6px 8px 16px; }
.theme { border-radius: 10px; }
.theme + .theme { margin-top: 2px; }
.theme-tete { width: 100%; display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 9px 8px; border-radius: 10px; text-align: start; }
.theme-tete:hover { background: var(--surface-2); }
.theme-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: #fff; flex: none; }
.theme-ic .ic { width: 17px; height: 17px; }
.theme-nom { flex: 1; min-width: 0; }
.theme-nom b { display: block; font-weight: 600; font-size: 14px; }
.theme-nom small { display: block; color: var(--gris); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.theme-nb { font-size: 11px; color: var(--rouge); font-weight: 600; font-variant-numeric: tabular-nums; }
.theme-tete > .ic:last-child { color: var(--gris); transition: transform .2s; }
.theme.ouvert .theme-tete > .ic:last-child { transform: rotate(90deg); }
[dir="rtl"] .theme.ouvert .theme-tete > .ic:last-child { transform: rotate(-90deg); }
.theme-corps { padding: 2px 4px 8px 50px; display: none; }
[dir="rtl"] .theme-corps { padding: 2px 50px 8px 4px; }
.theme.ouvert .theme-corps { display: block; }

.couche { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px; align-items: center; padding: 7px 8px; border-radius: 8px; }
.couche:hover { background: var(--surface-2); }
.couche input[type="checkbox"], .couche input[type="radio"] { width: 17px; height: 17px; accent-color: var(--rouge); margin: 0; }
.couche label { cursor: pointer; min-width: 0; }
.couche label b { font-weight: 500; display: block; }
.couche label small { color: var(--gris); font-size: 11.5px; display: block; }
.couche .etat { font-size: 11px; color: var(--gris); grid-column: 2 / 4; display: flex; align-items: center; gap: 6px; }
.couche .etat:empty { display: none; }
.couche .etat.erreur { color: var(--rouge); }
.couche .etat.ok { color: var(--vert); }
.couche .info-c { width: 26px; height: 26px; border: 0; background: none; color: var(--gris); border-radius: 6px; display: grid; place-items: center; }
.couche .info-c:hover { color: var(--rouge); background: var(--rouge-pale); }
.couche .info-c .ic { width: 16px; height: 16px; }
.couche .opacite { grid-column: 2 / 4; display: none; align-items: center; gap: 8px; font-size: 11px; color: var(--gris); }
.couche.on .opacite { display: flex; }
.opacite input { flex: 1; accent-color: var(--rouge); height: 18px; }
.badge-exp { font-size: 10px; font-weight: 600; color: var(--ambre); border: 1px solid currentColor; border-radius: 4px; padding: 0 4px; margin-inline-start: 6px; vertical-align: 1px; }
.couche .date-c { grid-column: 2 / 4; display: none; }
.couche.on .date-c { display: block; }
.date-c input { height: 28px; border: 1px solid var(--trait); border-radius: 6px; background: var(--surface-2); padding: 0 8px; font-size: 12px; }
.spin { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--trait); border-top-color: var(--rouge); animation: tourne .8s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }

/* Couches affichées */
.liste-actives, .liste-mes { padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.active { display: grid; grid-template-columns: 10px 1fr auto auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--trait); border-radius: 10px; background: var(--surface); }
.active .pastille { width: 10px; height: 10px; border-radius: 3px; }
.active b { font-weight: 500; display: block; }
.active small { color: var(--gris); font-size: 11.5px; }
.active button { width: 28px; height: 28px; border: 0; background: none; color: var(--gris); border-radius: 6px; display: grid; place-items: center; }
.active button:hover { background: var(--surface-2); color: var(--encre); }
.active button[disabled] { opacity: .3; cursor: default; }
.vide-doux { color: var(--gris); padding: 14px 12px; font-size: 13px; }
.bloc-mes { border-top: 1px solid var(--trait); margin-top: 6px; }
.titre-bloc { display: flex; justify-content: space-between; align-items: center; padding: 12px 12px 0; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: var(--gris); }
[dir="rtl"] .titre-bloc { text-transform: none; letter-spacing: 0; }
.lien { border: 0; background: none; color: var(--rouge); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; padding: 4px; text-transform: none; letter-spacing: 0; font-size: 13px; }
.lien .ic { width: 15px; height: 15px; }

/* Fiche territoire */
.fiche { padding: 12px 14px 22px; }
.fiche-vide { text-align: center; padding: 40px 16px; color: var(--gris); display: grid; justify-items: center; gap: 12px; }
.fiche-vide p { max-width: 34ch; margin: 0; }
.f-tete { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; }
.f-sur { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--rouge); font-weight: 600; }
[dir="rtl"] .f-sur { text-transform: none; letter-spacing: 0; }
.f-titre { font: 600 22px/1.2 var(--f-titre); margin: 2px 0 2px; text-wrap: balance; }
.f-sous { color: var(--gris); font-size: 13px; }
.f-actions { display: flex; gap: 4px; flex: none; }
.f-bloc { margin-top: 16px; }
.f-bloc h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: var(--gris); font-weight: 600; display: flex; align-items: center; gap: 6px; }
[dir="rtl"] .f-bloc h4 { text-transform: none; letter-spacing: 0; }
.f-bloc h4 .ic { width: 15px; height: 15px; color: var(--rouge); }
.f-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.f-case { background: var(--surface-2); border-radius: 9px; padding: 9px 10px; min-width: 0; }
.f-case small { display: block; color: var(--gris); font-size: 11.5px; }
.f-case b { display: block; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.f-case b i { font-style: normal; font-size: 12px; font-weight: 500; color: var(--gris); margin-inline-start: 2px; }
.f-case.large { grid-column: 1 / -1; }
.f-coords { font: 500 12.5px/1.6 var(--f-mono); background: var(--surface-2); border-radius: 9px; padding: 9px 10px; direction: ltr; text-align: left; }
.f-coords div { display: flex; justify-content: space-between; gap: 10px; }
.f-coords span { color: var(--gris); font-family: var(--f-texte); font-size: 11.5px; }
.f-note { font-size: 11.5px; color: var(--gris); margin: 6px 0 0; }
.f-charge { display: flex; align-items: center; gap: 8px; color: var(--gris); font-size: 13px; padding: 8px 0; }
.f-err { color: var(--gris); font-size: 13px; background: var(--surface-2); border-radius: 9px; padding: 9px 10px; }
.jauge { margin-top: 8px; }
.jauge-tete { display: flex; justify-content: space-between; align-items: baseline; }
.jauge-tete b { font: 600 28px/1 var(--f-titre); font-variant-numeric: tabular-nums; }
.jauge-tete span { font-weight: 600; font-size: 13px; }
.jauge-barre { height: 8px; border-radius: 4px; background: var(--trait); margin-top: 8px; overflow: hidden; }
.jauge-barre span { display: block; height: 100%; border-radius: 4px; }
.composantes { display: grid; gap: 5px; margin-top: 10px; font-size: 12px; }
.composantes div { display: grid; grid-template-columns: 1fr 70px 34px; gap: 8px; align-items: center; }
.composantes .mb { height: 5px; background: var(--trait); border-radius: 3px; overflow: hidden; }
.composantes .mb span { display: block; height: 100%; background: var(--gris); }
.composantes em { font-style: normal; text-align: end; font-variant-numeric: tabular-nums; color: var(--gris); }
.mini-pluie { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; align-items: end; height: 64px; margin-top: 8px; }
.mini-pluie span { background: var(--bleu); border-radius: 3px 3px 0 0; min-height: 2px; position: relative; }
.mini-mois { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; font-size: 10px; color: var(--gris); text-align: center; margin-top: 3px; }
.proche { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.proche div { background: var(--surface-2); border-radius: 9px; padding: 8px; text-align: center; }
.proche b { display: block; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.proche small { color: var(--gris); font-size: 11px; }
.avert { margin-top: 18px; font-size: 11.5px; color: var(--gris); border-inline-start: 3px solid var(--rouge); padding: 6px 10px; background: var(--surface-2); border-radius: 0 8px 8px 0; }
[dir="rtl"] .avert { border-radius: 8px 0 0 8px; }

.bascule-panneau { position: fixed; top: calc(var(--haut-barre) + 12px); inset-inline-start: max(12px, env(safe-area-inset-left, 0px)); z-index: 19; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--trait); background: var(--surface); box-shadow: var(--ombre); display: grid; place-items: center; color: var(--encre); }

/* ---------- Carte ---------- */
.zone-carte { position: relative; min-height: 0; }
.carte { position: absolute; inset: 0; }
.carte-b { z-index: 2; }
.rideau { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.rideau-trait { position: absolute; top: 0; bottom: 0; width: 3px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25); left: 50%; transform: translateX(-1.5px); }
.rideau-poignee { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 3px solid #fff; background: var(--rouge-plein); color: #fff; display: grid; place-items: center; pointer-events: auto; box-shadow: var(--ombre-forte); cursor: ew-resize; touch-action: none; }

.maplibregl-ctrl-group { background: var(--surface) !important; border: 1px solid var(--trait); box-shadow: var(--ombre) !important; border-radius: 10px !important; }
.maplibregl-ctrl-group button + button { border-top: 1px solid var(--trait) !important; }
:root[data-theme="dark"] .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1); } }
.maplibregl-ctrl-attrib { font-size: 10.5px; background: color-mix(in srgb, var(--surface) 85%, transparent) !important; color: var(--gris); }
.maplibregl-ctrl-attrib a { color: var(--gris) !important; }
.maplibregl-ctrl-scale { background: color-mix(in srgb, var(--surface) 80%, transparent); border-color: var(--encre); color: var(--encre); font-size: 10.5px; }
.maplibregl-ctrl-bottom-left, .maplibregl-ctrl-bottom-right { margin-bottom: 34px; }
.maplibregl-popup-content { background: var(--surface); color: var(--encre); border-radius: 12px; box-shadow: var(--ombre-forte); padding: 12px 14px; font: 13px/1.45 var(--f-texte); max-width: 290px; }
.maplibregl-popup-tip { border-top-color: var(--surface) !important; border-bottom-color: var(--surface) !important; }
.maplibregl-popup-close-button { color: var(--gris); font-size: 18px; width: 26px; height: 26px; }
.pop-type { font-size: 11px; color: var(--rouge); font-weight: 600; text-transform: uppercase; letter-spacing: .8px; }
.pop-nom { font-weight: 600; font-size: 15px; margin: 2px 0 6px; padding-inline-end: 18px; }
.pop-l { display: flex; gap: 8px; font-size: 12.5px; }
.pop-l span { color: var(--gris); min-width: 74px; }
.pop-liens { display: flex; gap: 12px; margin-top: 8px; font-size: 12.5px; flex-wrap: wrap; }
.pop-liens a, .pop-liens button { color: var(--rouge); font-weight: 600; text-decoration: none; border: 0; background: none; padding: 0; }

/* Outils */
.outils {
  position: absolute; top: 12px; inset-inline-end: max(12px, env(safe-area-inset-right, 0px)); z-index: 10;
  display: flex; flex-direction: column; gap: 2px; padding: 6px; background: var(--surface); border: 1px solid var(--trait); border-radius: 14px; box-shadow: var(--ombre);
}
.outil { width: 62px; display: grid; justify-items: center; gap: 3px; padding: 7px 2px 6px; border: 0; background: none; border-radius: 9px; color: var(--encre); font-size: 10.5px; font-weight: 500; line-height: 1.1; }
.outil:hover { background: var(--surface-2); }
.outil.actif { background: var(--rouge-plein); color: #fff; }
.outil .ic { width: 20px; height: 20px; }
.outils .sep { height: 1px; background: var(--trait); margin: 3px 6px; }
.maplibregl-ctrl-top-right { top: 0; }
.maplibregl-ctrl-top-right .maplibregl-ctrl { margin: 12px 88px 0 0; }
[dir="rtl"] .maplibregl-ctrl-top-right { right: auto; left: 0; }
[dir="rtl"] .maplibregl-ctrl-top-right .maplibregl-ctrl { margin: 12px 0 0 88px; }

/* Consigne d'outil */
.consigne {
  position: absolute; z-index: 12; left: 50%; transform: translateX(-50%); top: 12px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center;
  background: var(--encre); color: var(--surface); border-radius: 12px; padding: 8px 10px 8px 14px; box-shadow: var(--ombre-forte); max-width: calc(100% - 180px); font-size: 13px;
}
.consigne-res { font: 600 14px var(--f-mono); color: #FFD3D8; direction: ltr; }
.consigne-btns { display: flex; gap: 6px; }
.mini { height: 30px; border-radius: 8px; border: 1px solid var(--trait); background: var(--surface); color: var(--encre); padding: 0 10px; font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.mini .ic { width: 15px; height: 15px; }
.mini.plein, .gros.plein { background: var(--rouge-plein); border-color: var(--rouge-plein); color: #fff; }
.consigne .mini { background: transparent; color: var(--surface); border-color: color-mix(in srgb, var(--surface) 30%, transparent); }
.consigne .mini.plein { background: var(--rouge-plein); border-color: var(--rouge-plein); color: #fff; }

/* Cartons flottants (tour, temps, profil) */
.carton-tour, .carton-temps, .carton-profil {
  position: absolute; z-index: 12; bottom: 46px; left: 50%; transform: translateX(-50%); width: min(560px, calc(100% - 32px));
  background: var(--surface); border: 1px solid var(--trait); border-radius: 14px; box-shadow: var(--ombre-forte); padding: 14px 16px;
}
.ct-etape { font: 500 11.5px var(--f-mono); color: var(--rouge); }
.carton-tour h3 { margin: 2px 0 4px; font: 600 22px/1.2 var(--f-titre); }
.carton-tour p { margin: 0; color: var(--gris); max-width: 62ch; }
.ct-btns { display: flex; gap: 6px; margin-top: 12px; }
.ct-btns .plein { margin-inline-start: auto; }
.ct-barre { height: 3px; background: var(--trait); border-radius: 2px; margin-top: 12px; overflow: hidden; }
.ct-barre span { display: block; height: 100%; width: 0; background: var(--rouge-plein); transition: width .4s; }
.cmp-tete { display: flex; justify-content: space-between; align-items: center; }
.cmp-tete b { font: 600 17px var(--f-titre); }
.cmp-annees { display: flex; align-items: flex-end; gap: 10px; margin-top: 10px; }
.cmp-annees label { flex: 1; display: grid; gap: 3px; font-size: 11.5px; color: var(--gris); }
.cmp-annees select { height: 34px; border-radius: 8px; border: 1px solid var(--trait); background: var(--surface-2); padding: 0 8px; color: var(--encre); font-size: 14px; }
.cmp-annees > .ic { margin-bottom: 8px; color: var(--rouge); }
.cmp-lieux { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.cmp-lieux button { height: 28px; border-radius: 14px; border: 1px solid var(--trait); background: var(--surface); padding: 0 10px; font-size: 12px; }
.cmp-lieux button:hover { border-color: var(--rouge); color: var(--rouge); }
.cmp-note { font-size: 11.5px; color: var(--gris); margin: 10px 0 0; }
.profil-graph { margin-top: 8px; height: 150px; }
.profil-graph svg { width: 100%; height: 100%; display: block; overflow: visible; }
.profil-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.profil-stats div { background: var(--surface-2); border-radius: 8px; padding: 6px 8px; }
.profil-stats small { display: block; color: var(--gris); font-size: 11px; }
.profil-stats b { font-variant-numeric: tabular-nums; }

/* Légende */
.legende {
  position: absolute; z-index: 9; bottom: 46px; inset-inline-end: max(12px, env(safe-area-inset-right, 0px)); width: 230px; max-height: 42vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--trait); border-radius: 12px; box-shadow: var(--ombre); padding: 10px 12px; font-size: 12px;
}
.legende.repliee { width: auto; padding: 0; }
.leg-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; border: 0; background: none; padding: 0 0 6px; font-weight: 600; font-size: 12px; color: var(--encre); }
.legende.repliee .leg-tete { padding: 8px 12px; min-height: 38px; }
.leg-tete { min-height: 28px; }
.leg-tete em { font-style: normal; color: var(--rouge); font-variant-numeric: tabular-nums; }
.leg-tete .ic { width: 15px; height: 15px; color: var(--gris); transform: rotate(90deg); transition: transform .2s; }
.legende.repliee .leg-tete .ic { transform: rotate(-90deg); }
.leg-t { font-weight: 600; margin: 8px 0 4px; }
.leg-t:first-child { margin-top: 0; }
.leg-grad { height: 10px; border-radius: 3px; direction: ltr; }
.leg-ext { direction: ltr; display: flex; justify-content: space-between; color: var(--gris); font-size: 11px; font-variant-numeric: tabular-nums; }
.leg-cl { display: flex; align-items: center; gap: 7px; margin: 2px 0; }
.leg-cl i { width: 12px; height: 12px; border-radius: 3px; flex: none; border: 1px solid rgba(0,0,0,.12); }
.leg-cl i.rond { border-radius: 50%; }

/* Coordonnées */
.coords {
  position: absolute; z-index: 9; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; align-items: center;
  background: var(--surface); border: 1px solid var(--trait); border-radius: 18px; padding: 4px 6px 4px 4px; box-shadow: var(--ombre); font-size: 12px; direction: ltr; white-space: nowrap;
}
.c-sys { background: var(--rouge-plein); color: #fff; border-radius: 14px; padding: 3px 10px; font-weight: 600; cursor: pointer; user-select: none; }
.c-val { font: 500 12px var(--f-mono); font-variant-numeric: tabular-nums; }
.c-alt { font: 500 12px var(--f-mono); color: var(--gris); }
.c-alt:empty { display: none; }

/* Accueil */
.accueil { position: absolute; z-index: 15; inset: 0; pointer-events: none; display: flex; align-items: flex-end; justify-content: center; padding: 0 16px 64px; }
.acc-carte {
  pointer-events: auto; position: relative; width: min(600px, 100%); background: var(--surface); border: 1px solid var(--trait); border-radius: 18px;
  box-shadow: var(--ombre-forte); padding: 22px 24px 20px; overflow: hidden;
}
.acc-carte::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--rouge-plein); }
[dir="rtl"] .acc-carte::before { inset: 0 0 0 auto; }
.acc-x { position: absolute; top: 10px; inset-inline-end: 10px; }
.acc-sur { font: 500 11.5px var(--f-mono); color: var(--rouge); letter-spacing: .2px; padding-inline-end: 30px; }
.acc-carte h1 { font: 700 clamp(26px, 4.2vw, 36px)/1.12 var(--f-titre); margin: 8px 0 8px; text-wrap: balance; }
.acc-carte p { margin: 0; color: var(--gris); font-size: 15px; max-width: 52ch; }
.acc-btns { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.gros { height: 42px; border-radius: 11px; border: 1px solid var(--trait); background: var(--surface); padding: 0 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.gros:hover { border-color: var(--rouge); }
.gros.plein:hover { background: var(--rouge-fonce); }

/* Toast */
.toast { position: absolute; z-index: 50; top: 14px; left: 50%; transform: translateX(-50%); background: var(--encre); color: var(--surface); padding: 9px 16px; border-radius: 10px; box-shadow: var(--ombre-forte); font-size: 13px; max-width: calc(100% - 32px); }

/* Fenêtre */
.fenetre { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; }
.fenetre-fond { position: absolute; inset: 0; background: rgba(20, 12, 13, .5); }
.fenetre-boite { position: relative; width: min(620px, 100%); max-height: min(86vh, 760px); background: var(--surface); border-radius: 16px; box-shadow: var(--ombre-forte); display: flex; flex-direction: column; overflow: hidden; }
.fenetre-tete { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px 10px 20px; border-bottom: 1px solid var(--trait); }
.fenetre-tete h2 { margin: 0; font: 600 20px var(--f-titre); }
.fenetre-corps { padding: 16px 20px 22px; overflow-y: auto; }
.fenetre-corps p { margin: 0 0 10px; max-width: 65ch; }
.fenetre-corps h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .8px; color: var(--gris); margin: 18px 0 8px; }
[dir="rtl"] .fenetre-corps h3 { text-transform: none; letter-spacing: 0; }
.sources { display: grid; gap: 6px; }
.sources div { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 8px 10px; background: var(--surface-2); border-radius: 8px; font-size: 13px; }
.sources small { color: var(--gris); }
.sources a { color: var(--rouge); }
.copie { display: flex; gap: 6px; }
.copie input { flex: 1; min-width: 0; height: 38px; border-radius: 8px; border: 1px solid var(--trait); background: var(--surface-2); padding: 0 10px; font: 12px var(--f-mono); direction: ltr; }
.depot { border: 2px dashed var(--trait); border-radius: 12px; padding: 26px 16px; text-align: center; color: var(--gris); display: grid; justify-items: center; gap: 8px; cursor: pointer; }
.depot:hover, .depot.survol { border-color: var(--rouge); color: var(--encre); background: var(--rouge-pale); }
.formats { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.formats span { font: 500 11px var(--f-mono); border: 1px solid var(--trait); border-radius: 4px; padding: 1px 6px; }
.lien-ext { color: var(--rouge); font-weight: 600; }

/* Marqueurs */
.repere { width: 26px; height: 26px; }
.repere svg { width: 26px; height: 34px; display: block; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); transform: translateY(-14px); }
.point-gps { width: 18px; height: 18px; border-radius: 50%; background: #1D6FB8; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(29,111,184,.25); }

/* ---------- Téléphone ---------- */
@media (max-width: 760px) {
  :root { --haut-barre: 54px; }
  .devise { display: none; }
  .mot { font-size: 20px; }
  .sceau { width: 30px; height: 30px; }
  .barre { gap: 8px; }
  .recherche { margin-inline-start: 0; }
  .recherche input { height: 38px; font-size: 16px; }
  #btnApropos, #btnTheme { display: none; }
  .bouton-texte { padding: 0 9px; }
  .bouton-texte .lg-sep, html[lang="fr"] .bouton-texte .lg-fr, html[lang="ar"] .bouton-texte .lg-ar { display: none; }
  html[lang="fr"] .bouton-texte .lg-ar, html[lang="ar"] .bouton-texte .lg-fr { color: var(--encre); }

  .panneau, [dir="rtl"] .panneau {
    top: auto; bottom: 0; inset-inline: 0; width: auto; height: 62%; border-radius: 18px 18px 0 0; border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px);
  }
  .panneau.grand { height: calc(100% - var(--haut-barre) - 8px); }
  .panneau.ferme, [dir="rtl"] .panneau.ferme { transform: translateY(105%); }
  .poignee { display: grid; place-items: center; height: 18px; flex: none; cursor: grab; touch-action: none; }
  .poignee span { width: 40px; height: 4px; border-radius: 2px; background: var(--trait); }
  .bascule-panneau { top: auto; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); inset-inline-start: auto; inset-inline-end: max(14px, env(safe-area-inset-right, 0px)); width: 54px; height: 54px; border-radius: 27px; background: var(--rouge-plein); color: #fff; border: 0; box-shadow: var(--ombre-forte); }
  .bascule-panneau .ic { width: 22px; height: 22px; }

  .outils { flex-direction: row; top: 10px; left: max(10px, env(safe-area-inset-left, 0px)); right: max(10px, env(safe-area-inset-right, 0px)); inset-inline: auto; overflow-x: auto; scrollbar-width: none; border-radius: 12px; padding: 4px; }
  .outils { left: max(10px, env(safe-area-inset-left, 0px)); right: max(10px, env(safe-area-inset-right, 0px)); }
  .outils::-webkit-scrollbar { display: none; }
  .outil { width: auto; min-width: 56px; flex: none; padding: 6px 4px; font-size: 10px; }
  .outils .sep { width: 1px; height: auto; margin: 6px 2px; }
  .maplibregl-ctrl-top-right .maplibregl-ctrl, [dir="rtl"] .maplibregl-ctrl-top-right .maplibregl-ctrl { margin: 78px 10px 0 0; }
  [dir="rtl"] .maplibregl-ctrl-top-right .maplibregl-ctrl { margin: 78px 0 0 10px; }
  .consigne { top: 74px; max-width: calc(100% - 20px); width: calc(100% - 20px); padding: 8px 10px; gap: 8px; }
  .coords { display: none; }
  .legende { bottom: 80px; width: 200px; max-height: 30vh; }
  .zone-carte:has(#accueil:not([hidden])) .legende { display: none; }
  .carton-tour, .carton-temps, .carton-profil { bottom: calc(82px + env(safe-area-inset-bottom, 0px)); }
  .accueil { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); align-items: flex-end; }
  .acc-carte { padding: 18px 18px 16px; }
  .acc-carte p { font-size: 14px; }
  .gros { flex: 1 1 100%; justify-content: center; }
  .maplibregl-ctrl-bottom-left, .maplibregl-ctrl-bottom-right { margin-bottom: 4px; }
  .profil-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}