/* ==========================================================================
   Module carte — page /carte (mise en page « Chantier », habillée par le thème via les jetons).
   Bureau : barre de recherche et de filtres, liste synchronisée à gauche, carte à droite.
   Mobile (< 760 px) : carte plein écran, recherche et filtres flottants, tiroir au pouce (carrousel ↔ liste).
   Uniquement des jetons (docs/DESIGN.md) : aucune couleur ni police en dur, aucun [data-theme].
   ========================================================================== */

/* Palette « barre » : reprend celle de l'en-tête (sombre en chantier, claire en topo et strates).
   Posée sur la barre de filtres, le bandeau visiteur et les éléments flottants de la carte. */
.cp-zone {
    --fond: var(--entete-fond-2); --fond-2: var(--entete-fond-2); --surface: var(--entete-surface); --surface-2: var(--entete-fond);
    --encre: var(--entete-encre); --encre-2: var(--entete-encre-2); --encre-3: var(--entete-encre-3);
    --trait: var(--entete-trait); --trait-fort: var(--entete-trait); --focus: var(--entete-focus);
    --action-texte: var(--entete-accent); --recherche-texte: var(--entete-recherche);
    color: var(--encre);
}

/* ---------- Page plein écran ---------- */
.page-carte { --cp-tiroir-h: 392px; height: 100vh; height: 100dvh; overflow: hidden; }
.cp-main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.cp { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* ---------- Barre de recherche et de filtres ---------- */
.cp-filtres { position: relative; z-index: 30; flex: none; background: var(--fond); border-bottom: 1px solid var(--trait); padding: 12px 0; }
.cp-filtres-in {
    display: grid; gap: 10px; align-items: center; padding: 0 20px;
    grid-template-columns: minmax(220px, 360px) auto minmax(0, 1fr) auto auto;
    grid-template-areas: "lieu segment . volume rayon" "puces puces puces puces puces";
}
.cp-rang { display: contents; }
.cp-accueil, .cp-btn-filtres { display: none; }
.cp-lieu { grid-area: lieu; min-width: 0; }
.cp-lieu input { min-height: 48px; font-size: 16px; border-width: 1.5px; border-color: var(--clair-surface); }
.cp-lieu input:focus-visible { border-color: var(--clair-focus); }
.cp-lieu .suggestions { z-index: 60; }
.cp-segment { grid-area: segment; }
.cp-select-volume { grid-area: volume; }
.cp-select-rayon { grid-area: rayon; }
.cp-puces { grid-area: puces; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; }

/* Sélecteur de type dans la barre : même fond que la barre, cadre fin */
.cp-segment { padding: 3px; }
.cp-segment label { min-height: var(--cible); padding: 0 16px; font-size: 15px; }

/* Puces (cases à cocher) et puces-sélecteurs (Volume, Rayon) */
.cp-filtres .puce { background: var(--surface); }
.cp-filtres .puce:has(input:checked) { background: var(--encre); color: var(--fond); border-color: var(--encre); }
.cp-puce-mat small { font: var(--donnees-graisse) 0.875rem/1 var(--police-donnees); color: var(--encre-2); }
.cp-puce-mat:has(input:checked) small { color: inherit; }
.cp-puce-mat .profil-sol { color: currentColor; }
.cp-select { position: relative; gap: 6px; padding-right: 12px; }
.cp-select > span { font-weight: var(--texte-graisse); color: var(--encre-2); }
.cp-select select {
    width: auto; min-height: 0; height: var(--cible); margin-block: -1.5px; align-self: center; padding: 0 24px 0 0; border: 0; border-radius: 0;
    background: none; color: var(--encre); font-size: 15px; font-weight: var(--tres-gras); cursor: pointer;
}
.cp-select select:focus-visible { box-shadow: none; border: 0; }
.cp-select:has(select:focus-visible) { outline: var(--focus-epaisseur) solid var(--focus); outline-offset: 2px; }
.cp-select::after { content: ""; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.cp-select option { color: var(--clair-encre); background: var(--clair-surface); }
.cp-select:not(:has(option[value=""]:checked)) { border-color: var(--encre); box-shadow: inset 0 0 0 1px var(--encre); }
.cp-sep { width: 1px; align-self: stretch; margin: 6px 4px; background: var(--trait); }
.cp-plus { cursor: pointer; }
.cp-effacer { display: inline-flex; align-items: center; min-height: var(--cible); padding: 0 10px; color: var(--encre-2); font-weight: var(--gras); font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }
.cp-effacer:hover { color: var(--encre); }
.cp-appliquer { justify-self: start; margin: 10px 20px 0; }

/* Filtres avancés (tiroir) */
.cp-panneau { pointer-events: auto; }
.cp-panneau-volumes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cp-panneau .tiroir-pied { flex-wrap: nowrap; justify-content: space-between; align-items: center; }
.cp-panneau .tiroir-pied .btn-action { flex: 0 1 auto; min-width: 0; white-space: normal; }

/* ---------- Corps : liste + carte ---------- */
.cp-corps { flex: 1; min-height: 0; display: grid; grid-template-columns: 460px minmax(0, 1fr); }

/* Liste synchronisée */
.cp-liste { display: flex; flex-direction: column; min-height: 0; background: var(--fond); border-right: 1px solid var(--trait); }
.cp-poignee { display: none; }
.cp-liste-tete { padding: 22px 22px 14px; }
.cp-liste-tete h2 { font-size: 24px; line-height: 1.12; }
.cp-sous { margin-top: 6px; font: var(--donnees-graisse) 0.875rem/1.35 var(--police-donnees); color: var(--encre-2); }
.cp-visiteur-mob { display: none; }
.cp-outils { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.cp-tri { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; min-height: var(--cible); padding-left: 12px; border: 1.5px solid var(--trait-champ); border-radius: var(--r-bouton); background: var(--surface); }
.cp-tri > span { flex: none; font: var(--donnees-graisse) 13px/1 var(--police-donnees); color: var(--encre-2); text-transform: var(--libelle-casse); }
.cp-tri select { flex: 1; min-width: 0; min-height: var(--cible); margin-block: -1.5px; padding-left: 0; border: 0; background-color: transparent; font-size: 15px; font-weight: var(--tres-gras); }
.cp-tri select:focus-visible { box-shadow: none; }
.cp-tri:has(select:focus-visible) { outline: var(--focus-epaisseur) solid var(--focus); outline-offset: 2px; }
.cp-visiteur {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
    margin: 0 22px 14px; padding: 12px 12px 12px 14px; border-radius: var(--r-moyen);
    background: var(--fond); border: 1px solid var(--trait); font-size: 14px; line-height: 1.35;
}
.cp-visiteur > .ico { color: var(--action-texte); }
.cp-visiteur p { color: var(--encre-2); }
.cp-visiteur strong { color: var(--encre); font-weight: var(--tres-gras); }
.cp-visiteur .btn { padding: 0 14px; }
.cp-lieu-introuvable { margin: 0 22px 14px; font-size: 14.5px; }
.cp-resultats { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 22px 28px; scrollbar-width: thin; transition: opacity .15s; }
.cp-resultats[aria-busy="true"] { opacity: .6; }
.cp-cartes { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.cp-cartes > li { display: flex; min-width: 0; }
.cp-cartes > li > .ca { flex: 1; scroll-margin-block: 12px; }
.cp-vide { padding: var(--e-7) var(--e-4); }
.cp-vide-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: var(--e-2); }
.cp-vide-actions .btn { margin-top: 0; }

/* Carte */
.cp-carte { position: relative; min-height: 0; background: var(--carte-fond); isolation: isolate; }
.cp-leaflet { position: absolute; inset: 0; }
.cp-avis { position: absolute; left: 16px; top: 16px; z-index: 500; max-width: calc(100% - 100px); background: var(--surface); color: var(--encre); border: 1px solid var(--trait); box-shadow: var(--ombre-2); }
.cp-avis .ico { color: var(--action-texte); }
.cp-avis a { color: var(--encre); font-weight: var(--tres-gras); }
.cp-chargement { position: absolute; left: 50%; top: 16px; z-index: 510; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 4px 14px; border-radius: var(--r-pilule); background: var(--surface); color: var(--encre); border: 1px solid var(--trait); box-shadow: var(--ombre-2); font-weight: var(--gras); font-size: 13.5px; }
.cp-chargement-point { width: 10px; height: 10px; border-radius: 50%; background: var(--action); animation: cp-pulsation 1s ease-in-out infinite alternate; }
@keyframes cp-pulsation { from { opacity: .35; transform: scale(.8); } to { opacity: 1; transform: scale(1); } }
.cp-ctrls { position: absolute; right: 16px; top: 16px; z-index: 500; display: grid; gap: 8px; }
.cp-ctrls .ctrl { box-shadow: var(--ombre-2); }
.cp-ctrls .ctrl .ico { width: 22px; height: 22px; }
.cp-ctrl-duo { display: grid; border-radius: var(--r-bouton); overflow: hidden; border: 1px solid var(--trait); box-shadow: var(--ombre-2); }
.cp-ctrl-duo .ctrl { border: 0; border-radius: 0; box-shadow: none; }
.cp-ctrl-duo .ctrl + .ctrl { border-top: 1px solid var(--trait); }
.cp-ctrl-duo .ctrl:focus-visible { outline-offset: -4px; }
.ctrl.est-en-cours .ico { animation: cp-pulsation .6s ease-in-out infinite alternate; }

/* Légende */
.cp-legende { position: absolute; right: 16px; bottom: 30px; z-index: 500; display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--r-bloc); background: var(--surface); border: 1px solid var(--trait); box-shadow: var(--ombre-2); font-weight: var(--gras); font-size: 13.5px; line-height: 1.2; }
.cp-legende > span { display: flex; align-items: center; gap: 10px; }
.cp-ech { display: inline-flex; align-items: center; justify-content: center; gap: 3px; width: 58px; height: 24px; flex: none; border: 2px solid; border-radius: var(--pin-rayon); font: normal 700 11.5px/1 var(--police-donnees); }
.cp-ech .ico { width: 13px; height: 13px; }
.cp-ech-offre { background: var(--pin-offre-fond); color: var(--pin-offre-encre); border-color: var(--pin-offre-bord); }
.cp-ech-recherche { background: var(--pin-recherche-fond); color: var(--pin-recherche-encre); border-color: var(--pin-recherche-bord); }
.cp-ech-recherche .ico { color: var(--pin-recherche-bord); }
.cp-ech-zone { display: inline-grid; place-items: center; width: 58px; flex: none; }
.cp-ech-zone > i { width: 24px; height: 24px; border-radius: 50%; border: 2px dashed var(--zone-couleur); background: color-mix(in srgb, var(--zone-couleur) 18%, transparent); }
.cp-ech-rayon > i { border-color: var(--carte-libelle); background: none; }

/* Contrôles Leaflet (échelle, attribution) dans la palette de la barre (leaflet.css est chargé avant ce fichier) */
.cp-carte .leaflet-control-scale-line { background: var(--surface); color: var(--encre); border-color: var(--encre); font: var(--donnees-graisse) 11px/1.4 var(--police-donnees); }
.cp-carte .leaflet-control-attribution { background: var(--surface); color: var(--encre-2); border-top-left-radius: var(--r-petit); }
.cp-carte .leaflet-control-attribution a { color: var(--encre-2); }

/* Pins, grappes : dessin du système (app.css § 17) ; focus clavier porté par l'étiquette */
.cp-carte .pin-ancre:focus-visible { outline: none; }
.cp-carte .pin-ancre:focus-visible :is(.pin, .grappe) { outline: var(--focus-epaisseur) solid var(--focus); outline-offset: 3px; }
.cp-carte .grappe.est-survole { transform: scale(1.12); }
.cp-carte .grappe { transition: transform .12s; }
.fond-photo .grappe span { box-shadow: 0 0 0 2px var(--grappe-encre); }

/* Fenêtre de pin (bureau) : la carte d'annonce de la liste, sur la carte */
.cp-fenetre { margin-bottom: 0; }
.cp-fenetre .leaflet-popup-content-wrapper { padding: 0; border-radius: 0; background: transparent; box-shadow: none; color: inherit; }
.cp-fenetre .leaflet-popup-content { margin: 0; font-size: var(--texte-taille); line-height: var(--texte-interligne); }
.cp-fenetre .leaflet-popup-content p { margin: 0; }
.cp-fenetre .leaflet-popup-tip { background: var(--ca-fond); box-shadow: none; }
.cp-fenetre .ca { color: var(--encre); filter: var(--ombre-vitrine); }
.cp-fenetre .ca-mat { margin-top: 8px; }
.cp-fenetre .ca-lieu { margin-top: 6px; }
.cp-fenetre .ca-photo { display: block; width: 100%; height: 118px; margin-top: 12px; object-fit: cover; border-radius: var(--r-petit); }
.cp-fenetre a.leaflet-popup-close-button {
    top: -18px; right: -18px; z-index: 2; display: grid; place-items: center; width: var(--cible); height: var(--cible);
    border-radius: 50%; background: var(--surface); color: var(--encre); border: 1px solid var(--trait); box-shadow: var(--ombre-2);
    font: 700 24px/1 var(--police-texte);
}
.cp-fenetre a.leaflet-popup-close-button:hover { color: var(--encre); background: var(--fond-2); }

/* ---------- Tablette ---------- */
@media (max-width: 1099px) and (min-width: 760px) {
    .cp-corps { grid-template-columns: 380px minmax(0, 1fr); }
    /* Tablette : recherche sur toute la largeur, puis une rangée défilante (type, volume, rayon, matériaux…) */
    .cp-filtres-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; padding: 0 var(--gouttiere); }
    .cp-lieu, .cp-segment, .cp-select-volume, .cp-select-rayon, .cp-puces { grid-area: auto; }
    .cp-rang-2 { display: flex; align-items: center; gap: 10px; margin: 0 calc(-1 * var(--gouttiere)); padding: 6px var(--gouttiere); overflow-x: auto; scrollbar-width: none; }
    .cp-rang-2::-webkit-scrollbar { display: none; }
    .cp-rang-2 > *, .cp-puces > * { flex: none; }
    .cp-puces { display: contents; }
    .cp-tri > span { display: none; }
    .cp-liste-tete { padding: 18px 18px 12px; }
    .cp-visiteur, .cp-lieu-introuvable { margin-inline: 18px; }
    .cp-visiteur { grid-template-columns: auto minmax(0, 1fr); }
    .cp-visiteur .btn { grid-column: 1 / -1; }
    .cp-resultats { padding-inline: 18px; }
    .cp-legende { display: none; }
}

/* ---------- Mobile : carte plein écran, filtres flottants, tiroir au pouce ---------- */
@media (max-width: 759px) {
    .page-carte .entete { display: none; }
    .cp-filtres { position: absolute; left: 0; right: 0; top: 0; background: transparent; border: 0; padding: 10px 0 0; pointer-events: none; }
    .cp-filtres-in { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: none; gap: 8px; padding: 0; }
    .cp-rang { display: flex; align-items: center; gap: 8px; min-width: 0; }
    .cp-rang > *, .cp-puces > * { pointer-events: auto; }
    .cp-rang-1 { padding: 0 12px; }
    .cp-accueil, .cp-btn-filtres {
        position: relative; display: grid; place-items: center; width: 52px; height: 52px; flex: none;
        border-radius: var(--r-bouton); background: var(--surface); color: var(--encre); border: 1px solid var(--trait); box-shadow: var(--ombre-2);
    }
    .cp-accueil .marque-symbole { width: 32px; height: 32px; }
    .cp-btn-filtres .ico { width: 22px; height: 22px; }
    .cp-compteur { position: absolute; right: -6px; top: -6px; min-width: 22px; height: 22px; padding: 0 5px; display: grid; place-items: center; border-radius: 11px; background: var(--action); color: var(--action-encre); font: normal 800 12px/1 var(--police-donnees); }
    .cp-lieu { flex: 1; }
    .cp-lieu input { min-height: 52px; box-shadow: var(--ombre-2); }
    .cp-rang-2 { overflow-x: auto; padding: 2px 12px 8px; scrollbar-width: none; }
    .cp-rang-2::-webkit-scrollbar { display: none; }
    .cp-puces { display: contents; }
    .cp-segment, .cp-rang-2 .puce { flex: none; box-shadow: var(--ombre-2); }
    .cp-segment { grid-auto-columns: auto; }
    .cp-segment label { min-height: var(--cible); padding: 0 12px; font-size: 14.5px; }
    .cp-segment .n, .cp-sep, .cp-plus, .cp-effacer { display: none; }
    .cp-rang-2 .puce { min-height: var(--cible); }
    .cp-appliquer { margin-inline: 12px; pointer-events: auto; }

    .cp-corps { position: relative; display: block; flex: 1; }
    .cp-carte { position: absolute; inset: 0; }
    .cp-avis, .cp-legende, .cp-ctrl-duo { display: none; }
    .cp-ctrls { top: auto; right: 12px; bottom: calc(var(--cp-tiroir-h) + 12px); }
    .cp-chargement { top: 132px; }
    .cp-carte .leaflet-bottom { bottom: var(--cp-tiroir-h); }
    .cp-carte .leaflet-control-scale { display: none; }

    .cp-liste {
        position: absolute; left: 0; right: 0; bottom: 0; z-index: 40; height: var(--cp-tiroir-h);
        border: 0; border-radius: var(--r-tiroir) var(--r-tiroir) 0 0; box-shadow: var(--ombre-3);
        transition: height .25s ease-out;
    }
    .cp-liste[data-etat="ouvert"] { height: calc(100% - 70px); }
    /* Poignée : cible de 44 px (WCAG 2.5.8, règle du projet), trait inchangé. */
    .cp-poignee { display: grid; place-items: center; flex: none; width: 100%; height: var(--cible); margin-bottom: -8px; padding: 0; border: 0; background: none; }
    .cp-poignee::before { content: ""; width: 44px; height: 5px; border-radius: 3px; background: var(--trait-fort); }
    .cp-liste-tete { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; padding: 0 16px 12px; }
    .cp-liste-titres { display: contents; }
    .cp-liste-tete h2 { grid-column: 1 / -1; font-size: 19px; }
    .cp-sous { grid-column: 1; margin-top: 2px; font-size: 0.875rem; }
    .cp-visiteur-mob { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 2px; font-size: 0.875rem; line-height: 1.3; color: var(--encre-2); }
    .cp-visiteur-mob .ico { flex: none; color: var(--action-texte); }
    .cp-visiteur-mob a { color: var(--encre); font-weight: var(--tres-gras); }
    .cp-outils { grid-column: 2; grid-row: 2; margin: 0; }
    .cp-outils .cp-tri, .cp-outils .cp-partager { display: none; }
    .cp-outils .btn { padding: 0 14px; font-size: 15px; }
    .cp-visiteur { display: none; }
    .cp-lieu-introuvable { margin: 0 16px 10px; padding: 10px 12px; font-size: 13.5px; }

    /* Replié : carrousel de cartes à accroche (le tiroir défile verticalement si une carte est plus haute) */
    .cp-resultats { padding: 0; overflow-x: hidden; overflow-y: auto; }
    .cp-liste[data-etat="replie"] .cp-cartes .ca-mat,
    .cp-liste[data-etat="replie"] .cp-cartes .ca-lieu > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .cp-liste[data-etat="replie"] .cp-cartes .ca-lieu > span { min-width: 0; }
    .cp-liste[data-etat="replie"] .cp-cartes { display: flex; align-items: flex-start; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 16px 14px; scrollbar-width: none; }
    .cp-liste[data-etat="replie"] .cp-cartes::-webkit-scrollbar { display: none; }
    .cp-liste[data-etat="replie"] .cp-cartes > li { flex: 0 0 min(300px, 82vw); scroll-snap-align: start; scroll-margin-inline: 16px; }
    .cp-liste[data-etat="replie"] .cp-vide { padding: 4px 16px 12px; gap: 6px; }
    .cp-liste[data-etat="replie"] .cp-vide .etat-vide-icone { display: none; }
    .cp-liste[data-etat="replie"] .cp-vide h3 { font-size: 17px; }
    .cp-liste[data-etat="replie"] .cp-vide p { font-size: 14px; line-height: 1.4; }
    /* Ouvert : liste complète, outils de tri et de partage */
    .cp-liste[data-etat="ouvert"] .cp-resultats { overflow-y: auto; padding: 0 16px 20px; }
    .cp-liste[data-etat="ouvert"] .cp-outils { grid-column: 1 / -1; grid-row: auto; margin-top: 10px; }
    .cp-liste[data-etat="ouvert"] .cp-outils .cp-tri, .cp-liste[data-etat="ouvert"] .cp-outils .cp-partager { display: flex; }
    .cp-tri > span { display: none; }
    .cp-tri { padding-left: 4px; }

    /* Onglet « Thème » (pré-lancement) : languette au bord GAUCHE, au-dessus du tiroir (les contrôles de carte sont à droite) */
    .page-carte .onglet-theme { top: auto; right: auto; left: 0; bottom: calc(var(--h-nav-bas) + var(--cp-tiroir-h) + 16px + env(safe-area-inset-bottom)); }
    .page-carte .onglet-theme > summary { border-radius: 0 8px 8px 0; border: 1px solid var(--sombre-trait); border-left: 0; }
    .page-carte .onglet-theme-panneau { right: auto; left: calc(100% + 6px); top: auto; bottom: 0; transform: none; }
    .page-carte:has(.cp-liste[data-etat="ouvert"]) .onglet-theme { display: none; }
}
@media (min-width: 900px) {
    /* Onglet « Thème » (pré-lancement) : entre les contrôles de carte et la légende */
    .page-carte .onglet-theme { top: 50%; }
}

/* Total « 15 dans la Broye · Tout voir » (UX-09) */
.cp-total a { color: var(--encre); font-weight: var(--tres-gras); text-decoration: underline; text-underline-offset: 3px; }
.cp-total a:hover { color: var(--action-texte); }