/**
 * Bascule Liste / Carte de l'archive.
 *
 * Le plugin n'a pas de build SCSS : ce fichier est du CSS simple, et il ne redefinit
 * aucune valeur du design system. Il consomme les custom properties que bdt-core
 * expose au runtime, avec un repli pour rester lisible si le composant est rendu hors
 * du theme. Toute valeur ecrite en dur ici serait une valeur a retirer plus tard.
 *
 * ⚠️ Verifier l'existence de chaque token dans le `style.css` compile du theme avant
 * de l'ecrire : un nom inexistant ne provoque aucune erreur, le repli s'applique en
 * silence et le composant cesse de suivre le design system sans que rien ne le dise.
 *
 * @package CCL_MW
 * @since 1.2.1
 */

.ccl-m-view-toggle {
    /* ⚠️ Noms releves dans le `style.css` compile du theme, pas devines : quatre des
       tokens ecrits au premier jet n'existaient nulle part, et le composant tournait
       donc en permanence sur ses replis, sans jamais suivre le theme.

       ⚠️ `--pollen-bg-neutral-bolder` fait exception : il est declare cote Figma
       (`background/neutral/bolder`) mais **absent du theme compile**. Ce n'est pas un
       nom invente, c'est un token POLLEN pas encore porte dans bdt-core — a creer la,
       apres quoi le repli deviendra inutile.

       Les valeurs qui n'ont pas de token (12px, 6px, 5px, 3px) sont ecrites en dur :
       l'echelle POLLEN va de 4 a 8 puis 16, elle ne couvre pas ces mesures propres au
       composant. Conforme a la regle « valeurs en dur si Figma met des valeurs en dur ». */
    --ccl-m-view-toggle-label: var(--pollen-text-light, #5c5f66);
    --ccl-m-view-toggle-color: var(--pollen-text-base, #1f2023);
    /* Gris neutre, comme la maquette — mais d'un cran plus soutenu qu'elle.
       Elle prescrit `--pollen-border-bold` (#babcc0), qui ne mesure que 1,90:1 sur
       blanc, sous le seuil de 3:1 d'un composant d'interface, et n'est surcharge dans
       aucun theme enfant. `bolder` (#6f737b, 4,76:1) franchit le seuil en restant
       discret, la ou la couleur de marque — essayee puis ecartee — tirait trop l'oeil
       sur un controle secondaire, a cote d'un tri sans bordure marquee.
       Valeur unique pour les quatre themes : aucun ne la surcharge. */
    --ccl-m-view-toggle-border: var(--pollen-border-bolder, #6f737b);
    --ccl-m-view-toggle-radius: 6px;
    --ccl-m-view-toggle-active-bg: var(--pollen-bg-neutral-bolder, #3f4145);
    --ccl-m-view-toggle-active-color: var(--pollen-text-white, #fff);
    --ccl-m-view-toggle-focus: var(--pollen-focus-ring-color, currentColor);

    display: flex;
    align-items: center;
    gap: 12px;
    padding: 3px 5px;

    /* Ecarte la bascule du bloc de tri sans toucher au theme.
       Le bandeau (`.o-archive-content-grid__toolbar`) est un conteneur flex en
       `justify-content: flex-end` : une marge automatique a gauche du dernier enfant
       absorbe l'espace libre et repousse le premier vers la gauche. On obtient la
       disposition de la maquette en ne stylant que notre propre composant — ni regle
       ajoutee dans le SCSS de bdt-core, ni `:has()`, ni classe conditionnelle. */
    margin-left: auto;
}

.ccl-m-view-toggle__label {
    color: var(--ccl-m-view-toggle-label);
    font-size: 14px;
    line-height: 14px;
    font-weight: 500;
}

/* Un seul cadre pour les deux options : c'est un controle segmente, pas deux boutons
   voisins. Les options sont accolees, sans espace ni bordure individuelle. */
.ccl-m-view-toggle__options {
    display: flex;
    align-items: center;
    border: 1px solid var(--ccl-m-view-toggle-border);
    border-radius: var(--ccl-m-view-toggle-radius);
}

.ccl-m-view-toggle__option {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--ccl-m-view-toggle-radius);
    color: var(--ccl-m-view-toggle-color);
    font-size: 14px;
    line-height: 20px;
    /* Explicite : les liens du theme arrivent en graisse forte, alors que la maquette
       veut du Regular. Sans cette ligne le composant heritait d'un gras qui n'est pas
       au design — et qui brouillait le seul indice d'etat, le fond plein. */
    font-weight: 400;

    /* Des liens, pas des boutons : la bascule doit fonctionner sans JavaScript.
       D'ou la remise a plat de la decoration heritee des liens du theme. */
    text-decoration: none;
}

/* L'etat actif est porte par `aria-current`, qui pilote aussi le style : l'attribut
   lu par le lecteur d'ecran et celui qui decide de l'apparence ne peuvent pas diverger.

   RGAA critere 3.1 — « l'information ne doit pas etre donnee uniquement par la
   couleur » : ici l'etat ne repose pas sur une teinte mais sur la presence d'un fond
   plein, percue meme en niveaux de gris. Pas besoin d'ajouter une graisse, que la
   maquette ne prevoit pas. Contraste mesure : 10,23:1, conforme AAA. */
.ccl-m-view-toggle__option[aria-current] {
    background: var(--ccl-m-view-toggle-active-bg);
    color: var(--ccl-m-view-toggle-active-color);
}

/* Les traces viennent des assets Figma, en `currentColor` : ils suivent la couleur de
   leur etat sans qu'on duplique un fichier par variante, et sans filtre calcule. */
.ccl-m-view-toggle__icon {
    flex: none;
    width: 16px;
    height: 16px;
}

.ccl-m-view-toggle__option:focus-visible {
    outline: 2px solid var(--ccl-m-view-toggle-focus);
    outline-offset: 2px;
}

/* ================================================================
   VUE CARTE — surcouche posee sur l'archive
   ================================================================
   La classe `is-map-view` est posee sur le <body> par le plugin : au rendu serveur
   via `body_class` quand l'URL porte `?view=carte`, puis basculee au clic.

   Ces regles vivent ici, et non dans le theme, parce que la vue carte n'existe que
   si ce plugin est installe : elles disparaissent avec lui, sans laisser de CSS mort
   dans bdt-core. Le prix est un couplage assume — nous nommons des classes du theme.
   ⚠️ Si bdt-core renomme `o-archive-content-grid__list` ou `m-pagination`, la vue
   carte cesse de masquer la liste, en silence. Note miroir dans les deux annuaires ABEM.

   ⚠️ La grille et la pagination sont MASQUEES, jamais retirees du DOM : ce sont les
   cartes de resultat qui decident quelles epingles sont primaires, et c'est leur
   conteneur que le composant de cartographie observe pour se rafraichir. Les sortir
   du DOM eteindrait la carte.

   ⚠️ Le bandeau de tri reste visible : il porte la bascule. Le masquer rendrait le
   retour a la liste impossible.

   ⚠️ Masquage par une classe sur un ancetre, jamais par un style en ligne :
   `archive-filters.js` reecrit `style.display` de la section a chaque requete et
   l'effacerait.

   ⚠️ Le masquage est conditionne a la PRESENCE de la carte dans la page, pas au seul
   parametre d'URL. Sans ce garde, ouvrir n'importe quelle autre archive du theme avec
   `?view=carte` y masquerait la grille et la pagination, qui partagent ces memes
   classes ABEM, sans qu'aucune bascule n'y soit rendue pour en sortir : une page vide,
   sans recours. Le script pose la meme ceinture pour les navigateurs sans `:has()`. */
.is-map-view:has(#ccl-mw-map-container.ccl-mw-map--archive) .o-archive-content-grid__list,
.is-map-view:has(#ccl-mw-map-container.ccl-mw-map--archive) .o-archive-content-grid__no-results,
.is-map-view:has(#ccl-mw-map-container.ccl-mw-map--archive) .o-archive-content-grid__empty,
.is-map-view:has(#ccl-mw-map-container.ccl-mw-map--archive) .m-pagination {
    display: none;
}

/* La carte d'une archive n'est visible qu'en vue carte.
   Sans cette regle elle occupe sa hauteur en permanence, sous les filtres, et laisse
   un grand bloc vide au-dessus de la liste — c'est ce qu'on voyait avant.

   Scopee par `--archive` : la meme carte posee sur une page libre via `[ccl_mw_map]`
   n'a pas de vue liste a lui opposer, elle doit rester visible. C'est le rendu sur
   archive qui ajoute cette classe, pas le shortcode. */
#ccl-mw-map-container.ccl-mw-map--archive {
    display: none;
}

.is-map-view #ccl-mw-map-container.ccl-mw-map--archive {
    display: block;
}

/* ==========================================================================
   Popup d'une epingle
   ========================================================================== */

/* La card rendue dans le popup est celle de l'archive : `m-card-experience`, ou
   `m-card-experience-external` pour un REX externe (BDTCLIENT-643). Le
   composant de cartographie l'insere dans sa propre sidebar, qui fournit deja un
   fond blanc, des coins arrondis et une ombre portee : celle de la card s'y
   ajoute en double, et le relief se voit au bord.

   Neutralisee ici, sur notre classe de contexte, et non sur la molecule : le
   thème la partage avec l'archive, ou l'ombre est voulue. Regle du projet —
   toucher l'appelant plutot que l'API d'un composant partage. */
.ccl-mw-map-popup__card {
    box-shadow: none;
}

/* Le CTA « Je decouvre » du popup reprend la couleur du bouton secondaire du theme
   (BDTCLIENT-633).

   Leaflet, charge par le composant de cartographie, pose `.leaflet-container a
   { color: #0078a8 }` (specificite 0,1,1), charge apres nos feuilles : elle battait la
   couleur de base de `.a-btn--secondary` (0,1,0), et le libelle sortait en bleu.

   La specificite est calibree a 0,1,2 : juste au-dessus de Leaflet, mais SOUS les
   etats du bouton dans le theme (`:hover`, `:focus`, `:active`, 0,2,0), qui gardent
   donc leurs propres couleurs — dont le texte clair sur fond sombre de `:active`. Une
   regle plus forte les aurait ecrases. D'ou `div > article` (la card est le premier
   enfant de `.user-block-front`) et `:where()`, qui n'ajoute rien a la specificite.
   Seule la variable du theme est reprise, avec son repli : aucune couleur propre au
   plugin, chaque site garde la sienne. */
div > article.ccl-mw-map-popup__card :where(a.a-btn--secondary) {
    color: var(--a-btn-secondary-color, var(--pollen-text-accent, #f60c1a));
}

/* Meme correction pour le CTA du verso de la card d'un REX externe, un bouton
   primaire (BDTCLIENT-643). La card definit elle-meme `--a-btn-primary-color` sur
   son verso : on ne fait que la reprendre. */
div > article.ccl-mw-map-popup__card :where(a.a-btn--primary) {
    color: var(--a-btn-primary-color, #fff);
}

/* Bouton de fermeture du panneau lisible au-dessus de la card (BDTCLIENT-633).

   Le bouton appartient au composant de la marketplace (`map.scss`) : position absolue
   en haut a droite du panneau, `margin-top: 16px`, icone de 30px. Il est pense pour le
   popup offreur, qui commence par une ligne de texte a gauche et laisse ce coin libre.
   Notre popup commence par l'image pleine largeur de la card : le bouton tombait
   dessus, rouge sur photo, illisible.

   On reserve donc sa hauteur au-dessus de la card — 16px + 30px + 10px d'air — au
   lieu de deplacer le bouton : rien n'est change dans le composant, et le popup
   offreur n'est pas concerne. `:has()` limite la regle aux seuls panneaux qui portent
   notre card ; sans support, le rendu reste celui d'avant. */
.leaflet-sidebar-content:has(.ccl-mw-map-popup__card) {
    padding-top: 56px;
}