/* ============================================================
   apl-secteur-site.css — surcouche d'integration Arpentiq

   Ne jamais porter ces regles dans apl-secteur.css : ce fichier
   appartient a Margot et doit survivre a sa prochaine livraison
   sans modification. Tout ajustement de site vit ici.

   Charge APRES apl-secteur.css.
   ============================================================ */

/* -- rendre le collant du kit possible ---------------------------------
   pages.css pose .pgs{position:relative;overflow:hidden}. Un ancetre en
   overflow non visible annule tout position:sticky descendant : le
   bandeau du kit ne pouvait pas prendre.

   Le kit neutralise deja ce piege, mais sur `#licence`, le conteneur
   qu'il attendait. Notre section porte `#places` pour servir d'ancre aux
   liens venant de tarifs et de la page mandataire. On refait donc la
   meme neutralisation sur notre identifiant.

   Portee au seul point de rupture ou le collant existe, et a notre seule
   section : le reste du site garde son overflow:hidden.

   (Note : body{overflow-x:hidden} de site.css n'y est pour rien. html
   etant en overflow visible, la propriete se propage au viewport et le
   body reste un bloc normal — c'est pourquoi .nav est deja sticky et
   fonctionne partout.) */
@media (max-width: 640px) {
  #places          { overflow: visible; }
  #places .wrap   { overflow: visible; }
}

#apl-secteur { padding-bottom: 26px; }
#apl-secteur .apl-search { margin-top: 22px; }
#apl-secteur .apl-ladder { margin-top: 26px; }

/* -- plus de panneau de resultat --------------------------------------
   L'information vit desormais dans la carte du palier : elle porte deja
   le nombre de places et le tarif, il ne lui manquait que le volume reel.
   On masque .apl-res, jamais .apl-out ni .apl-miss : le cas « secteur
   inconnu » doit rester visible, sinon une saisie fausse ne repond rien. */
#apl-secteur .apl-res { display: none; }

/* -- la fourchette laisse place au chiffre reel ------------------------
   apl-secteur-site.js dedouble le texte de .apl-crit en deux spans, en
   laissant .apl-real (le nom de commune) intact. Le basculement est
   pilote par la classe .apl-spot que pose le kit : une seule source de
   verite pour « quel palier est selectionne ». */
#apl-secteur .apl-crit-live { display: none; }
#apl-secteur .apl-tier.apl-spot .apl-crit-def { display: none; }
#apl-secteur .apl-tier.apl-spot .apl-crit-live {
  display: inline-block;
  color: var(--accent);
  animation: apl-crit-pop .34s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes apl-crit-pop {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  #apl-secteur .apl-tier.apl-spot .apl-crit-live { animation: none; }
}

/* -- champ de recherche : pas de fond au repos -------------------------
   Le kit donne un fond au champ sous 640px pour masquer le contenu qui
   defile dessous une fois colle. Au repos ce fond dessine une bande grise
   dans la page. On ne le garde que sur l'etat colle, ou il sert. */
@media (max-width: 640px) {
  #apl-secteur .apl-search:not(.apl-stuck) {
    background: transparent;
    backdrop-filter: none;
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* -- pas de zoom automatique a la saisie sur iOS -----------------------
   Safari mobile agrandit la page des qu'un champ passe sous 16px a la
   prise de focus, et ne redezoome pas. Le kit descend a 15px, puis a 14px
   une fois colle. On force 16px dans les deux etats : c'est le seuil,
   pas un choix esthetique. */
@media (max-width: 640px) {
  #apl-secteur .apl-srow input,
  #apl-secteur .apl-search.apl-stuck .apl-srow input { font-size: 16px; }
}

/* -- passerelle vers l'etude de marche ---------------------------------
   Prefixe `aplx-` et non `apl-` : ce bloc est a nous, il ne doit pas
   entrer en collision avec la prochaine livraison du kit.
   Sous 640px le kit ordonne explicitement ses enfants (hd 0, search 1,
   ladder 2, foot 4) : sans `order`, ce bloc remonterait en tete. */
.aplx-edm {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px 18px;
  margin-top: 16px; padding: 15px 18px;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface);
}
.aplx-edm p { margin: 0; font-size: 14.5px; color: var(--text-dim); max-width: 62ch; }
.aplx-edm b { color: var(--text); font-weight: 700; }
@media (max-width: 640px) {
  #apl-secteur .aplx-edm { order: 5; }
  .aplx-edm { flex-direction: column; align-items: stretch; }
  .aplx-edm .btn { justify-content: center; }
}

/* -- cartes de palier plus basses sur telephone ------------------------
   Anatomie du kit, verticalement : 22px de padding haut, l'accroche, le
   critere, 18px puis une zone de pastilles a min-height:46px, 18px puis
   le nombre de places a 30px, le tarif, et une note en pied. Soit environ
   260px par carte, donc plus de 1000px pour les quatre empilees sous
   460px — deux ecrans et demi de telephone.

   On resserre les respirations et on reduit les deux gros postes : les
   pastilles et le chiffre des places. Rien n'est retire, tout reste
   lisible. Le kit garde ses valeurs au-dessus de 640px. */
@media (max-width: 640px) {
  #apl-secteur .apl-tier   { padding: 14px 16px 15px; }
  #apl-secteur .apl-crit   { font-size: 15px; margin-top: 5px; }
  /* les pastilles : plus petites, elles tiennent alors sur un seul rang
     meme a neuf, donc la hauteur reservee ne sert plus a rien */
  #apl-secteur .apl-plots  { min-height: 0; margin-top: 11px; gap: 6px; }
  #apl-secteur .apl-plots i { width: 11px; height: 11px; }
  #apl-secteur .apl-plots i.apl-more { min-width: 11px; height: 11px;
                                       line-height: 11px; padding: 0 5px; }
  #apl-secteur .apl-cap    { margin-top: 11px; }
  #apl-secteur .apl-cap b  { font-size: 24px; }
  #apl-secteur .apl-tarif  { margin-top: 6px; }
  #apl-secteur .apl-vt     { margin-top: 10px; padding-top: 9px; font-size: 11.5px; }
}