/* embed.css — ce qui change quand la carte est dans un cadre.
 *
 * Chargé APRÈS app.css, dont il reprend toutes les couleurs : une
 * carte embarquée dans le portail doit être de la même famille
 * visuelle que la carte complète, sans quoi le lecteur croira changer
 * de site en changeant de cadre.
 *
 * Ce fichier ne fait que retirer et poser la bulle. Tout le reste —
 * variables, alertes, thème sombre, mouvement réduit — vient d'app.css
 * et n'est pas dupliqué ici : deux définitions d'une même couleur
 * finiraient par diverger.
 */

body.embarquee{display:block;overflow:hidden}

/* La carte occupe tout le cadre, sans barre ni panneau. */
body.embarquee #carte{position:fixed;inset:0;background:var(--creux)}

/* Un cadre fait parfois 260 pixels de haut : les alertes y prennent
   toute la largeur utile plutôt que de se tasser dans un coin.
   Elles s'arrêtent AU-DESSUS du bandeau d'attribution : celui-ci est
   une condition de la Licence Ouverte, et rien n'a le droit de le
   recouvrir, pas même un message de l'application. */
body.embarquee #alertes{right:8px;bottom:26px;left:8px;
  max-width:none;align-items:stretch}
body.embarquee .alerte{font-size:12.5px;padding:8px 30px 8px 10px}
body.embarquee .ol-attribution{z-index:70}

/* ── la bulle d'un point ────────────────────────────────────────── */
.bulle{position:relative;min-width:180px;max-width:min(300px,70vw)}
.bulle-corps{position:relative;background:var(--surface);color:var(--encre);
  border:1px solid var(--trait);border-radius:10px;box-shadow:var(--ombre);
  padding:10px 30px 10px 12px;display:flex;flex-direction:column;gap:3px}
/* La pointe qui rattache la bulle à son point. */
.bulle-corps::after{content:"";position:absolute;top:100%;left:50%;
  transform:translateX(-50%);border:7px solid transparent;
  border-top-color:var(--surface);filter:drop-shadow(0 1px 0 var(--trait))}
.bulle-corps b{font-size:13.5px;font-weight:600;line-height:1.3}
.bulle-corps i{font-style:normal;font-size:12px;color:var(--doux);
  line-height:1.4}
.bulle-corps .fiche{margin-top:5px;font-size:12.5px;font-weight:600;
  color:var(--lien);text-decoration:none}
.bulle-corps .fiche:hover{text-decoration:underline}
.bulle-corps .fermer{position:absolute;top:3px;right:5px;border:0;
  background:none;font-size:17px;line-height:1;color:var(--faible);
  cursor:pointer;padding:2px 5px}
.bulle-corps .fermer:hover{color:var(--encre)}

/* Zone de clic confortable au doigt : un cadre de carte se consulte
   surtout sur un téléphone, au milieu d'une page qui défile. */
@media (pointer: coarse){
  .bulle-corps .fermer{font-size:20px;padding:6px 9px}
}

/* Le repli sans JavaScript occupe le cadre entier : sinon il
   n'occuperait rien et le cadre resterait blanc. */
body.embarquee .noscript{font-size:13px;line-height:1.5}
body.embarquee .noscript p{margin:.3em 0;max-width:34em}

/* ── le panneau de diagnostic (?diag=1) ─────────────────────────── */
/* Un visiteur ne le rencontre jamais : il ne s'affiche que sur
   demande explicite dans l'URL. Il est donc dense et lisible plutôt
   que discret. */
.diag{position:fixed;inset:8px;z-index:90;overflow:auto;
  background:var(--surface);color:var(--encre);border:1px solid var(--trait);
  border-radius:10px;box-shadow:var(--ombre);padding:12px 34px 46px 14px;
  font:12px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace}
.diag h2{font:600 11px/1 system-ui;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);margin:12px 0 7px}
.diag h2:first-child{margin-top:0}
.diag-ligne{display:flex;gap:10px;padding:2px 0;
  border-bottom:1px solid var(--creux);align-items:baseline}
.diag-ligne b{flex:0 0 38%;font-weight:600;color:var(--doux);
  word-break:break-word}
.diag-ligne span{flex:1 1 auto;min-width:0;word-break:break-all}
.diag .fermer{position:absolute;top:6px;right:8px;border:0;background:none;
  font-size:19px;line-height:1;color:var(--faible);cursor:pointer;padding:3px 7px}
.diag .fermer:hover{color:var(--encre)}
.diag-copier{position:absolute;bottom:10px;right:12px;height:30px;padding:0 12px;
  border:1px solid var(--accent);background:var(--accent);color:#fff;
  border-radius:7px;font:600 12px system-ui;cursor:pointer}