/* Les sélecteurs segmentés : sur une image (.vues), ou seuls (.seg).
 *
 * C'est le segmenté du système : gélule, contour d'encre, option active en
 * aplat. Papier plein plutôt que verre dépoli — pas de surface sombre, pas
 * de flou.
 *
 * Partagé par la fiche, Adopte et GiroGuessr : trois endroits qui montrent la
 * même chose doivent la montrer pareil. Il était écrit deux fois, et les deux
 * copies avaient divergé.
 */

/* LE SÉLECTEUR N'EST PLUS POSÉ SUR L'IMAGE, IL EST LE HAUT DU BLOC.
 *
 * Il flottait en gélule sur le coin de la photo, avec son contour et son ombre
 * — une pastille qui recouvre ce qu'elle commande, et qui change de fond selon
 * ce qu'il y a dessous. Il occupe maintenant toute la largeur, arasé aux bords,
 * sans gélule ni marge, séparé de l'image par un simple filet : il appartient à
 * la fiche, pas à la photo.
 *
 * IL RESTE DANS « .visuel », et ne fait que remonter par la mise en page. C'est
 * là que le plein écran va le chercher pour le faire monter avec l'image
 * agrandie (« boite-plein.js ») ; l'en sortir romprait ce lien. */
.visuel { position: relative; display: flex; flex-direction: column; }

.vues {
  order: -1;                       /* devant l'image, quel que soit le balisage */
  display: flex; width: 100%; margin: 0; padding: 4px 6px; gap: 2px;
  /* Au milieu : quand les onglets ne remplissent pas la barre — GiroGuessr
     n'en a que deux —, ils se serraient à gauche et laissaient le reste vide. */
  justify-content: center;
  background: none; border: none; border-bottom: var(--rule-light);
  /* SES DEUX COINS HAUTS SUIVENT CEUX DE LA FICHE, ET ELLE DÉCOUPE CE QU'ELLE
     PORTE. L'onglet actif est un aplat sombre, le contour de la fiche aussi :
     au coin, le premier venait mordre le second et les deux noirs se
     rejoignaient en un angle plein. La fiche découpe déjà à son propre arrondi,
     mais elle le fait à trois pixels de là — il reste de quoi se toucher.
     En arrondissant ici, l'onglet ne peut plus atteindre l'angle : sa pointe
     est rognée avant. « inherit » prend l'arrondi du bloc parent, quel qu'il
     soit — douze pixels sur la fiche, dix-huit sur le prétendant d'Adopte. */
  border-radius: inherit; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
  overflow: hidden;
}
/* LE DESSIN, ET LE MOT DESSOUS. Sur une ligne, les cinq onglets d'un carrefour
   qui porte une œuvre réclamaient trois cent cinquante-deux pixels pour trois
   cent trente-trois : « Carte » et « Ajouter » se faisaient rogner. En colonne,
   chaque onglet ne pèse plus que la largeur de son mot, et la barre tiendrait
   même à six.
   La hauteur est le prix à payer, et il est tenu court : quatre pixels de
   retrait autour de la barre, cinq dans chaque onglet, deux entre le dessin et
   son mot. */
.vues .vue {
  /* À parts égales : cinq onglets d'un même geste n'ont pas de raison d'occuper
     des largeurs différentes. BORNÉS, tout de même — GiroGuessr n'en a que
     deux, et sans plafond chacun prenait la moitié de la fiche : l'onglet actif
     y devenait un bandeau noir large comme la main. */
  flex: 1 1 auto; max-width: 170px; min-width: 0;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; border: none; background: none;
  cursor: pointer; color: var(--color-text); font-family: var(--font-body);
  font-weight: 700; font-size: 10px; letter-spacing: .04em; text-transform: uppercase;
  padding: 5px 6px; border-radius: 10px; line-height: 1;
}
.vues .vue svg { width: 18px; height: 18px; display: block; flex: none; }
/* Le mot ne se coupe pas en deux : « Ajouter » sur deux lignes ferait grandir
   toute la barre pour un seul onglet. */
.vues .vue span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.vues .vue.on { background: var(--color-text); color: var(--color-bg); }
/* En plein écran, la barre monte au coin de l'image avec la livrée du bouton
   de réduction — trente-six pixels, douze d'arrondi (boite-plein.js). Les
   onglets passent en ligne, dessin à côté du mot, pour tenir dans cette
   hauteur, et leur arrondi suit celui du cadre moins son retrait : neuf. */
body.boite-pleine .vues .vue {
  flex-direction: row; gap: 5px; padding: 0 9px; height: 100%; border-radius: 9px;
}
body.boite-pleine .vues .vue svg { width: 15px; height: 15px; }
@media (hover: hover) and (pointer: fine) {
  .vues .vue.on:hover { color: var(--color-bg); }

  .vues .vue:not(.on):hover { background: color-mix(in srgb, var(--color-text) 8%, transparent); }
}

/* Les cinq onglets portent maintenant un dessin, y compris les trois vues qui
   n'avaient que leur mot : plus rien ne distingue « la carte et l'appareil » du
   reste, et les deux règles qui les traitaient à part n'ont plus lieu d'être. */
.vues .vue:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* Un onglet vide reste cliquable pour que son infobulle s'affiche : barrer le
   mot sans pouvoir demander pourquoi ne renseigne personne. */
.vues .vue.vide { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
@media (hover: hover) and (pointer: fine) {
  .vues .vue.vide:hover { background: none; }
}

.vues .vue:disabled { pointer-events: auto; }
/* Les mots restaient masqués sous 430 pixels quand la barre était une gélule
   posée sur l'image : elle y aurait couvert la moitié de la photo. En colonne,
   chacun ne pèse plus que sa propre largeur, et les cinq tiennent jusqu'à 320. */
@media (max-width: 360px) { .vues .vue { padding: 5px 3px; } }

/* Le même segmenté, dans le flux cette fois : deux vues d'une même chose dont
   une seule a besoin d'être à l'écran. Ce sont de vrais boutons radio sous la
   gélule — le clavier et les lecteurs d'écran savent déjà s'en servir, et
   l'état coché tient sans une ligne de script. */
.seg {
  /* « inline-flex » ne suffit pas dans une colonne flex : le parent étire ses
     enfants, et la gélule s'étalait sur toute la largeur. */
  display: inline-flex; align-self: flex-start; padding: 3px; gap: 2px;
  border: var(--rule-light); border-radius: 999px;
  background: var(--color-surface); max-width: 100%; flex-wrap: wrap;
}
.seg-opt {
  display: inline-flex; align-items: center; cursor: pointer;
  font-family: var(--font-body); font-weight: 700; font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--color-text);
  padding: 8px 15px; border-radius: 999px; line-height: 1; white-space: nowrap;
}
.seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg-opt:has(input:checked) { background: var(--color-text); color: var(--color-bg); }
@media (hover: hover) and (pointer: fine) {
  .seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 8%, transparent); }
}

.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* --- feuilleter plusieurs photos d'une même vue --- */
/* Un rond-point peut avoir plusieurs photos du sol. Deux flèches et un compte,
   posés au bas de l'image du côté opposé au bouton d'agrandissement, en gélule
   sombre pour tenir sur n'importe quelle photo. */
.photo-fig { position: relative; }
.photo-suite {
  /* SOUS LA BARRE DU HAUT (900). Mille et un la faisait passer PAR-DESSUS
     quand la fiche défilait : la boîte glisse sous la barre, et ce qu'elle
     porte glissait au-dessus. Huit cents suffit à tenir la couche de Leaflet,
     dont les panneaux ne montent pas plus haut que sept cents. */
  position: absolute; left: 10px; bottom: 10px; z-index: 800;
  display: flex; align-items: center; gap: 2px;
  background: color-mix(in srgb, #14181c 62%, transparent);
  border-radius: 999px; padding: 2px;
}
.photo-suite button {
  width: 30px; height: 30px; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-size: 20px; line-height: 1;
  color: #fff; background: none; border: none; border-radius: 999px;
}
.photo-suite .compte {
  font-family: var(--font-body); font-weight: 700; font-size: 11.5px;
  letter-spacing: .06em; color: #fff; padding: 0 4px;
  font-variant-numeric: tabular-nums;
}
@media (hover: hover) and (pointer: fine) {
  .photo-suite button:hover { background: color-mix(in srgb, #fff 22%, transparent); }
}

/* L'autre commande d'une boîte à photos : le bouton qui ouvre la carte en
 * grand. En face du sélecteur, et taillé comme lui — même gélule, même
 * contour, même ombre. Deux commandes d'une même boîte doivent se ressembler.
 */
.boite-plein {
  /* Même étage que la cascade, et pour la même raison : sous la barre du
     haut. En plein écran, « boite-plein.js » réécrit la position en style
     direct et monte à deux mille — là, il FAUT passer par-dessus tout. */
  position: absolute; top: 12px; right: 12px; z-index: 800;
}

/* LE BOUTON POSÉ SUR UNE IMAGE OU UNE CARTE, LE MÊME PARTOUT. Celui qui
   agrandit une photo — Adopte, la fiche — était une gélule ronde de quarante ;
   ceux qui commandent la carte des jeux — la croix, le plein écran — un carré
   arrondi de trente-six. Deux dessins pour un même geste au même endroit. Le
   carré arrondi gagne : il est celui qu'on voit le plus, et il vit ici, dans
   la feuille que les deux familles chargent — theme.css ne le redit plus. */
.boite-plein, .carte-ctrl button, .carte-filtre {
  width: 36px; height: 36px; padding: 0; cursor: pointer;
  display: grid; place-items: center; font-size: 15px; line-height: 1;
  background: var(--color-surface); color: var(--color-text);
  border: var(--rule-light); border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}
.boite-plein svg, .carte-ctrl button svg, .carte-filtre svg { width: 17px; height: 17px; display: block; }
@media (hover: hover) and (pointer: fine) {
  .boite-plein:hover, .carte-ctrl button:hover { background: var(--color-neutral-200); }
}

.boite-plein:focus-visible, .carte-ctrl button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Ouverte, la carte couvre la fenêtre et redevient manipulable — sa géométrie
   est posée par carte-boite.js, le seul endroit qui puisse passer devant les
   règles à identifiant de chaque famille. Ici on ne fige que le défilement
   derrière : sans ça, on fait glisser la page sous la carte. */
body.boite-pleine { overflow: hidden; }