/* Le panneau « Couches » des cartes du compte promoteur (src/couches.js) : comme au Géoportail,
   une pile de couches avec leur curseur d'opacité, et le catalogue en dessous. Au bureau, un
   panneau flottant sous le bouton ; au téléphone, une feuille qui monte du bas de l'écran (la
   carte n'y fait que 300 px de haut, le panneau y serait coupé). */
.cc { position: relative; }
.cc-declencheur { gap: 6px; }
.cc-declencheur svg { width: 15px; height: 15px; opacity: 0.8; }
.cc-declencheur b:empty { display: none; }
.cc-ouvert .cc-declencheur { box-shadow: var(--ombre-flottant), inset 0 0 0 1px var(--accent); }
.cc-panneau { position: absolute; z-index: 25; top: calc(100% + 6px); right: 0; width: 300px; max-height: min(520px, 70vh); overflow-y: auto; overscroll-behavior: contain; border-radius: var(--r-carte); background: var(--surface-panneau); color: var(--encre); box-shadow: 0 0 0 1px var(--filet-2), 0 12px 32px rgba(0, 0, 0, 0.35); font-size: var(--t-14); }
.cc-panneau[hidden] { display: none; }
.cc-tete { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 6px 0 12px; border-bottom: 1px solid var(--filet); background: var(--surface-panneau); }
.cc-tete b { font-size: var(--t-17); font-weight: 600; }
.cc-tete small { flex: 1; color: var(--encre-3); font-size: var(--t-12); }
.cc-x { flex: none; width: 28px; height: 28px; min-height: 0; padding: 0; border: 0; border-radius: var(--r-bouton); background: none; color: var(--attenue); font: inherit; font-size: var(--t-17); line-height: 1; cursor: pointer; }
.cc-x:hover { background: var(--actif); color: var(--encre); }
.cc-pile { list-style: none; margin: 0; padding: 4px; }
.cc-couche { padding: 4px 6px 8px 2px; border-radius: var(--r-bouton); background: var(--surface-panneau); }
.cc-couche + .cc-couche { box-shadow: 0 -1px 0 var(--filet); border-radius: 0 0 8px 8px; }
.cc-tiree { position: relative; z-index: 2; border-radius: var(--r-bouton) !important; box-shadow: 0 0 0 1px var(--accent), 0 10px 24px rgba(0, 0, 0, 0.35) !important; }
.cc-ligne { display: flex; align-items: center; gap: 2px; min-height: 30px; }
.cc-poignee, .cc-oeil { flex: none; display: grid; place-items: center; width: 26px; height: 28px; min-height: 0; padding: 0; border: 0; border-radius: var(--r-pastille); background: none; color: var(--encre-3); cursor: pointer; }
.cc-poignee { width: 20px; cursor: grab; touch-action: none; }
.cc-tiree .cc-poignee { cursor: grabbing; }
.cc-poignee svg { width: 8px; height: 14px; opacity: 0.7; }
.cc-oeil svg { width: 16px; height: 16px; }
.cc-poignee:hover, .cc-oeil:hover { background: var(--actif); color: var(--encre); }
.cc-poignee:focus-visible, .cc-oeil:focus-visible, .cc-x:focus-visible, .cc-ajout:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cc-nom { flex: 1; min-width: 0; padding-left: 2px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-nom small { display: block; color: var(--encre-3); font-size: var(--t-12); font-weight: 400; }
.cc-eteinte .cc-nom, .cc-eteinte .cc-opacite { opacity: 0.45; }
/* Le curseur d'opacité : la piste se remplit jusqu'à la valeur (--cc-op), comme un curseur de Linear */
.cc-opacite { display: grid; grid-template-columns: minmax(0, 1fr) 40px; align-items: center; gap: 8px; padding: 0 2px 0 48px; color: var(--encre-3); font-size: var(--t-12); }
.cc-lib-op { display: none; }
.cc-opacite output { text-align: right; font-variant-numeric: tabular-nums; color: var(--encre-2); }
.cc-opacite input { -webkit-appearance: none; appearance: none; width: 100%; height: 20px; margin: 0; background: transparent; cursor: pointer; }
.cc-opacite input::-webkit-slider-runnable-track { height: 4px; border-radius: var(--r-rond); background: linear-gradient(to right, var(--accent) var(--cc-op, 100%), var(--actif) var(--cc-op, 100%)); box-shadow: inset 0 0 0 1px var(--filet); }
.cc-opacite input::-moz-range-track { height: 4px; border-radius: var(--r-rond); background: var(--actif); }
.cc-opacite input::-moz-range-progress { height: 4px; border-radius: var(--r-rond); background: var(--accent); }
.cc-opacite input::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.35); }
.cc-opacite input::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.35); }
.cc-opacite input:focus-visible { outline: none; }
.cc-opacite input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--accent); }
/* La légende d'une couche de zonage, sous son curseur */
.cc-leg { display: flex; flex-wrap: wrap; gap: 3px 10px; padding: 4px 2px 0 48px; color: var(--encre-3); font-size: var(--t-12); line-height: 1.3; }
.cc-leg b { width: 100%; color: var(--encre-3); font-weight: 400; }
.cc-leg span { display: inline-flex; align-items: center; gap: 5px; }
.cc-leg i { flex: none; width: 9px; height: 9px; border-radius: var(--r-fin); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); }
.cc-leg i.cc-rond { border-radius: 50%; }
.cc-leg .cc-note { width: 100%; font-style: italic; }
@media (max-width: 899px) { .cc-leg { padding-left: 72px; font-size: var(--t-12); } }
.cc-vide { margin: 0; padding: 12px; color: var(--encre-3); font-size: var(--t-12); }
.cc-sous { padding: 10px 12px 4px; border-top: 1px solid var(--filet); color: var(--encre-3); font-size: var(--t-12); font-weight: 400; }
.cc-catalogue { padding: 0 4px 6px; }
.cc-ajout { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 5px 8px; border: 0; border-radius: var(--r-bouton); background: none; color: var(--encre); font: inherit; font-size: var(--t-14); text-align: left; cursor: pointer; }
.cc-ajout:hover { background: var(--actif); }
.cc-ajout i { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: var(--r-pastille); box-shadow: inset 0 0 0 1px var(--filet-2); color: var(--encre-3); font-style: normal; font-size: var(--t-14); line-height: 1; }
.cc-ajout:hover i { background: var(--accent); box-shadow: none; color: var(--sur-accent); }
.cc-ajout span { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.cc-ajout small { color: var(--encre-3); font-size: var(--t-12); }
.cc-ajout.cc-abonne { color: var(--encre-3); }
.cc-verrou { flex: none; margin-left: auto; font-size: var(--t-13); }
@media (max-width: 899px) {
  /* un voile sur le reste de l'écran : on voit que le toucher ailleurs referme la feuille */
  .cc-panneau { position: fixed; z-index: 80; top: auto; left: 8px; right: 8px; bottom: calc(env(safe-area-inset-bottom) + 8px); width: auto; max-height: 72svh; border-radius: var(--r-panneau); box-shadow: 0 0 0 1px var(--filet-2), 0 0 0 100vmax rgba(0, 0, 0, 0.4); }
  .cc-tete { height: 46px; }
  .cc-ligne { min-height: 40px; }
  .cc-poignee { width: 32px; height: 40px; }
  .cc-oeil, .cc-x { width: 40px; height: 40px; }
  .cc-opacite { padding-left: 72px; }
  .cc-opacite input { height: 32px; }
  .cc-opacite input::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -9px; }
  .cc-ajout { min-height: 48px; }
}
/* La fiche d'un monument historique (src/monuments.js) */
.mh-bulle .maplibregl-popup-content { padding: 10px 12px; border-radius: var(--r-moyen); background: var(--surface-panneau); color: var(--encre); box-shadow: 0 0 0 1px var(--filet-2), 0 10px 26px rgba(0, 0, 0, 0.35); font-size: var(--t-12); }
.mh-bulle .maplibregl-popup-tip { display: none; }
.mh-bulle .maplibregl-popup-close-button { color: var(--encre-3); font-size: var(--t-17); padding: 2px 6px; }
.mh-fiche b { display: block; padding-right: 16px; font-size: var(--t-14); font-weight: 600; }
.mh-fiche small { color: var(--encre-3); font-size: var(--t-12); }
.mh-fiche p { margin: 6px 0 0; line-height: 1.4; }
.mh-detail { color: var(--encre-2); max-height: 7.2em; overflow: auto; }
.mh-abf { color: var(--encre-3); font-size: var(--t-12); }
.mh-liens { display: flex; gap: 12px; }
.mh-liens a { color: var(--encre); text-decoration: underline; text-decoration-color: var(--filet-2); text-underline-offset: 2px; }
.mh-liens a:hover { text-decoration-color: var(--encre-3); }

/* Légendes repliables : la ligne de la couche reste (œil, nom, croix), le curseur et la légende se replient */
.cc-pli { flex: none; display: grid; place-items: center; width: 20px; height: 28px; min-height: 0; padding: 0; border: 0; border-radius: var(--r-pastille); background: none; color: var(--encre-3); cursor: pointer; }
.cc-pli svg { width: 10px; height: 10px; transition: transform 0.15s; }
.cc-pli:hover { background: var(--actif); color: var(--encre); }
.cc-replie .cc-pli svg { transform: rotate(-90deg); }
.cc-replie .cc-opacite, .cc-replie .cc-leg-carte, .cc-replie .cc-leg { display: none; }
.cc-tout-plier { font-size: var(--t-13); }