/* LE CALQUE D'UN TERRITOIRE, SUR LA CARTE PUBLIQUE.
 *
 * Rien ici ne s'applique tant que le body ne porte pas `cq-mode` : la carte
 * ordinaire, celle de velo.tousensembles.fr, ne voit passer aucune de ces
 * règles.
 *
 * La couleur du territoire arrive du serveur et est posée en variable sur la
 * racine (--cq-couleur). C'est la seule couleur de ce fichier qui ne vienne
 * pas des jetons de la carte : elle appartient à la collectivité, pas à VELO.
 */

/* Le visiteur qui arrive par /valdeleyre sait où il est : lui demander « Où
   roulez-vous ? » serait lui reposer la question à laquelle son lien répond
   déjà. On masque l'écran d'accueil par une classe, pas en retirant
   l'élément — carte.js s'y accroche au démarrage. */
.cq-mode .voile { display: none; }

/* ------------------------------------------------------ le nom du lieu -- */
.cq-lieu {
  font: 600 .95rem/1 var(--sans);
  color: var(--texte-doux);
  padding-left: .9rem;
  margin-left: .3rem;
  border-left: 3px solid var(--cq-couleur, var(--accent));
}
@media (max-width: 560px) { .cq-lieu { display: none; } }

/* ------------------------------------------------------- le panneau -- */
/* A DROITE, ET PAS A GAUCHE. Le panneau des calques de la carte — fond IGN,
   pistes, interdictions — occupe deja le haut a gauche sur grand ecran, et le
   premier essai posait le territoire exactement dessus. La colonne de boutons
   ronds (position, zoom, aide) tient le bord droit sur 3,5 rem ; on se range
   juste avant. */
.cq-panneau {
  position: absolute;
  top: .6rem; right: 4.2rem;
  z-index: 40;
  width: min(19rem, calc(100vw - 1.2rem));
  max-height: min(30rem, calc(100% - 1.2rem));
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-2);
  overflow: hidden;
}
.cq-panneau[hidden] { display: none; }

.cq-tete {
  display: flex; align-items: center; gap: .5rem;
  padding: .7rem .8rem;
  border-bottom: 1px solid var(--bord);
}
.cq-titres { min-width: 0; }
.cq-tete h2 { margin: 0; font-size: 1rem; }
.cq-tete p { margin: .1rem 0 0; font-size: .78rem; color: var(--texte-doux); }

/* LE BLASON DE LA COLLECTIVITE.
 *
 * Il arrive tel que la collectivite le publie : le plus souvent un dessin
 * sombre sur fond transparent, pense pour un site clair. Or VELO suit le
 * theme de l'appareil, et sur fond sombre ce dessin disparaitrait. On lui
 * pose donc une plaque claire, comme on encadre un logo tiers sur une
 * interface sombre — plutot que de recolorier le blason de quelqu'un
 * d'autre, ce qu'on n'a pas a faire. */
.cq-logo {
  display: block;
  height: 2.9rem; width: auto; max-width: 100%;
  padding: .3rem .45rem;
  border-radius: var(--rayon-s);
  background: #fff;
}
.cq-puce {
  flex: 0 0 auto; width: .7rem; height: .7rem; border-radius: 50%;
  background: var(--cq-couleur, var(--accent));
}
.cq-replier {
  margin-left: auto; flex: 0 0 auto;
  font: 600 .78rem/1 var(--sans); cursor: pointer;
  padding: .35rem .6rem; border-radius: 999px;
  border: 1px solid var(--bord-fort); background: var(--surface); color: var(--texte-doux);
}

.cq-corps { overflow-y: auto; padding: .6rem .8rem .8rem; }

/* ------------------------------------------------------- les onglets -- */
.cq-onglets { display: flex; gap: .3rem; margin-bottom: .6rem; }
.cq-onglet {
  flex: 1; font: 600 .82rem/1 var(--sans);
  padding: .55rem .4rem; cursor: pointer;
  border: 1px solid var(--bord-fort); border-radius: 999px;
  background: var(--surface); color: var(--texte-doux);
}
/* La couleur du territoire marque l'onglet ouvert : c'est la sienne qui
   doit conduire l'oeil, pas le vert de VELO. */
.cq-onglet--actif {
  background: var(--cq-couleur, var(--accent));
  border-color: var(--cq-couleur, var(--accent));
  color: #fff;
}
.cq-vue[hidden] { display: none; }
.cq-groupe + .cq-groupe { margin-top: .8rem; }
.cq-groupe h3 {
  margin: 0 0 .35rem; font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--texte-doux);
}
.cq-liste { display: flex; flex-direction: column; gap: .25rem; }
.cq-vide { margin: 0; font-size: .85rem; color: var(--texte-doux); }

.cq-item {
  display: flex; flex-direction: column; gap: .1rem; text-align: left;
  padding: .45rem .55rem; cursor: pointer; font: inherit; color: var(--texte);
  border: 1px solid transparent; border-radius: var(--rayon-s);
  background: var(--surface-2);
}
.cq-item:hover, .cq-item:focus-visible { border-color: var(--cq-couleur, var(--accent)); }
.cq-item__nom { font-weight: 600; font-size: .88rem; }
.cq-item__detail { font-size: .76rem; color: var(--texte-doux); }

/* ---------------------------------------------------------- la fiche --
 *
 * Elle prend la place de la liste DANS le panneau, au lieu de s'ouvrir en
 * boite flottante : sur telephone comme sur ordinateur, une seule boite ne
 * peut en recouvrir aucune autre. Le premier essai la posait en bas de
 * l'ecran, ou elle croisait le bandeau « ajoutez VELO a votre ecran
 * d'accueil ». */
.cq-fiche { display: flex; flex-direction: column; gap: .35rem;
            overflow-y: auto; padding: .6rem .8rem .8rem; }
.cq-fiche[hidden] { display: none; }
.cq-fiche h2 { margin: 0; font-size: 1.05rem; }
.cq-fiche__sous { margin: 0; font-size: .78rem; color: var(--texte-doux); }
.cq-fiche__texte { margin: 0; font-size: .9rem; line-height: 1.5; }
.cq-fiche__lien { align-self: flex-start; margin-top: .2rem; font-size: .88rem; }
.cq-retour {
  align-self: flex-start; margin-bottom: .2rem;
  font: 600 .8rem/1 var(--sans); cursor: pointer;
  padding: .4rem .7rem; border-radius: 999px;
  border: 1px solid var(--bord-fort); background: var(--surface); color: var(--texte-doux);
}

/* LE PANNEAU REPLIÉ : un bandeau, pas une pastille.
 *
 * Replié, c'est la seule chose qui dise encore chez qui l'on est et ce qu'il
 * y a à voir : il porte donc le blason et le décompte. C'est l'état
 * intermédiaire qui manquait entre « panneau ouvert » et « rien ». */
.cq-rouvrir {
  position: absolute; top: .6rem; right: 4.2rem; z-index: 40;
  display: flex; align-items: center; gap: .55rem;
  padding: .4rem .7rem; cursor: pointer;
  font: 600 .82rem/1 var(--sans); color: var(--texte-doux);
  background: var(--surface);
  border: 1px solid var(--bord); border-radius: 999px;
  box-shadow: var(--ombre-2);
}
.cq-rouvrir[hidden] { display: none; }
.cq-rouvrir__logo {
  display: block; height: 1.7rem; width: auto;
  padding: .15rem .25rem;
  border-radius: var(--rayon-s); background: #fff;
}
.cq-rouvrir__mot { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cq-chevron { color: var(--cq-couleur, var(--accent)); font-size: .85rem; }

/* Sur téléphone, panneau et fiche prennent le bas de l'écran : une colonne
   posée en haut à gauche recouvre exactement ce qu'on est venu regarder. */
@media (max-width: 640px) {
  .cq-panneau {
    top: auto; left: .5rem; right: .5rem;
    /* --cq-bas est la hauteur du bandeau d'installation, mesuree par
       calque.js : sans elle le panneau passait dessous. */
    bottom: calc(max(.5rem, env(safe-area-inset-bottom)) + var(--cq-bas, 0px));
    width: auto; max-height: 46vh;
  }
  .cq-rouvrir {
    top: auto; left: .5rem; right: auto;
    bottom: calc(max(.5rem, env(safe-area-inset-bottom)) + var(--cq-bas, 0px));
  }
  /* Sur telephone le panneau ne fait qu'une poignee de centimetres de haut :
     le blason y prend une place que les parcours valent mieux. */
  .cq-logo { height: 2.2rem; }
}

/* ------------------------------------- la suggestion de territoires -- */
/* Le bandeau qui propose les territoires croises. Il reprend la geometrie du
   panneau des parcours — meme emplacement, meme boite — parce que c'est le
   meme objet a un instant plus tot : « il y a quelque chose ici » avant
   « voici ce qu'il y a ». Il se pose en bas de l'ecran, au meme emplacement
   que le panneau des parcours et des points d'interet.
   Il arrive REPLIE : deplie, il occuperait l'ecran pour une proposition que
   personne n'a demandee. */
/* EN BAS, A TOUTES LES TAILLES — corrige le 09/09/2026.
   .cq-panneau se place en haut a droite sur grand ecran, ce qui convient au
   panneau des parcours mais pas a celui-ci : il venait recouvrir le menu
   ouvert. Il doit se poser en bas de l'ecran : c'etait vrai sur telephone par
   heritage, et faux sur ordinateur. Ce n'est pas une
   histoire de z-index — l'en-tete forme son propre contexte d'empilement et
   le bandeau passait devant quoi qu'on ecrive. Il n'a rien a faire la-haut. */
.sg-panneau {
  z-index: 39;
  top: auto; right: auto;
  left: .8rem;
  bottom: calc(max(.8rem, env(safe-area-inset-bottom)) + var(--cq-bas, 0px));
  width: min(24rem, calc(100vw - 1.6rem));
  max-height: 40vh;
}
.sg-panneau .cq-tete { align-items: flex-start; gap: .4rem; }
.sg-panneau h2 { font-size: .92rem; line-height: 1.25; }
.sg-sous { margin: .1rem 0 0; font-size: .78rem; color: var(--texte-doux); }

/* « Voir » porte un mot et non un chevron : un chevron seul n'annonce pas ce
   qu'il ouvre, et cette boite arrive sans avoir ete demandee. */
.sg-deplier {
  width: auto; padding: .15rem .5rem; border-radius: 999px;
  font-size: .78rem; font-weight: 600;
  border: 1px solid var(--bord-fort); background: var(--surface-2);
}
.sg-fermer { flex: none; }

/* .cq-item est une COLONNE — nom au-dessus du detail. Ici on veut une ligne :
   puce, nom, puis « voir les parcours » pousse a droite. Sans redire la
   direction, le nom se centrait et la puce se posait au-dessus. */
.sg-item {
  display: flex; flex-direction: row; align-items: center;
  gap: .5rem; text-decoration: none;
}
.sg-item .cq-item__detail { margin-left: auto; }
.sg-puce { flex: none; width: .7rem; height: .7rem; border-radius: 50%; }

/* Sur telephone, le bandeau d'installation occupe deja le bas : --cq-bas est
   sa hauteur, mesuree par calque.js. Ici calque.js dort — on prend donc la
   valeur si elle existe, zero sinon, exactement comme le panneau des
   parcours. */
@media (max-width: 640px) {
  .sg-panneau { left: .5rem; width: calc(100vw - 1rem); }
}

/* La porte permanente, en tete du menu. Elle n'est pas une suggestion : elle
   est la tant qu'un territoire est sous les yeux, masque ou non. Sans elle,
   « masquer » revenait a « fermer », comme l'essai du 09/09/2026 l'a montre. */
.sg-menu {
  display: flex; flex-direction: column;
  padding-bottom: .3rem; margin-bottom: .3rem;
  border-bottom: 1px solid var(--bord);
}
.sg-menu__titre {
  margin: .35rem .8rem .1rem; font-size: .7rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--texte-doux);
}

/* La clé de légende, devant l'intertitre d'un groupe de points. C'est elle qui
   transforme la liste en légende — sans elle, la carte porte six dessins que
   rien n'explique. */
.cq-groupe h3 { display: flex; align-items: center; gap: .35rem; }
.cq-cle { display: inline-flex; flex: none; line-height: 0; }

/* La clé des deux couches du territoire, dans le panneau « Couches » de la
   carte : un trait à la couleur du territoire, pour que la ligne se relie
   d'un coup d'oeil à ce qu'on voit dessus. Les autres clés sont dessinées
   dans carte.css ; celle-ci prend la teinte du calque, qui n'est connue
   qu'au chargement. */
/* .cle est un TRAIT (border-top sur une hauteur nulle), pas un aplat : on
   suit la convention de carte.css plutot que d'inventer une seconde facon de
   dessiner la meme chose. Cinq pixels, comme le trace du calque est le plus
   epais de la carte. */
.cq-cle-couche { border-top: 5px solid var(--cq-teinte, var(--accent)); }

/* Le trait de couleur devant un parcours dans la liste : avec cinq
   itineraires de cinq teintes, la liste ne disait pas lequel etait lequel.
   Meme convention que les cles de legende — un trait, pas un aplat. */
/* DIX-HUIT PIXELS SUR QUATRE, C'ETAIT UN TIRET — corrige le 11/09/2026.
   Les cinq teintes ne se confondent pas : le plus petit ecart percu entre deux
   d'entre elles est de 28 Delta E, largement au-dessus du seuil de confusion.
   C'est la SURFACE qui manquait, pas le contraste. Un liseré blanc n'y aurait
   rien fait — le fond du panneau est deja presque blanc. */
.cq-cle-trace {
  flex: none; width: 30px; height: 8px; align-self: center;
  background: var(--cq-teinte, var(--accent));
  border-radius: 4px;
}
.cq-item { flex-direction: row; align-items: center; gap: .5rem; flex-wrap: wrap; }
.cq-item .cq-item__nom { flex: 1 1 auto; }
.cq-item .cq-item__detail { flex: 1 0 100%; }