/* app.css — l'interface de l'explorateur.
 *
 * La carte occupe l'écran ; les panneaux s'effacent. Section 59 du
 * cahier des charges : sobre, cartographique, pas un tableau de bord.
 * Les couleurs reprennent celles du portail — même territoire, même
 * famille visuelle.
 */

:root{
  --papier:#EDF0EA; --surface:#FFF; --creux:#F5F7F3;
  --encre:#16211C; --doux:#5D6E64; --faible:#9AA79F; --trait:#D5DCD3;
  --accent:#2C6B4C; --accent-pale:#EAF3EE; --lien:#2A6F97; --alerte:#A32C1B;
  --barre:60px; --panneau:300px;
  --ombre:0 1px 2px rgba(22,33,28,.06), 0 8px 24px rgba(22,33,28,.10);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --papier:#121714; --surface:#1B211E; --creux:#222A26;
    --encre:#E8EDE9; --doux:#AFBCB4; --faible:#7C8981; --trait:#323C36;
    --accent:#4FB383; --accent-pale:#1D2A24; --lien:#6FB4DC;
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--papier);color:var(--encre);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
       "Helvetica Neue",Arial,sans-serif;
  display:flex;flex-direction:column;overflow:hidden}

/* ── barre supérieure ───────────────────────────────────────────── */
#barre{height:var(--barre);flex:0 0 auto;display:flex;align-items:center;
  gap:12px;padding:0 14px;background:var(--surface);
  border-bottom:1px solid var(--trait);z-index:30;position:relative}
#barre h1{margin:0;font-size:17px;font-weight:700;letter-spacing:-.01em;
  white-space:nowrap;display:flex;align-items:baseline;gap:8px}
#barre h1 span{font-size:12px;font-weight:500;color:var(--doux);
  letter-spacing:.06em;text-transform:uppercase}

.icone{width:36px;height:36px;flex:0 0 auto;border:1px solid var(--trait);
  background:var(--surface);color:var(--encre);border-radius:8px;
  font-size:17px;line-height:1;cursor:pointer}
.icone:hover{background:var(--creux)}
.bascule{height:36px;padding:0 14px;border:1px solid var(--accent);
  background:var(--accent);color:#fff;border-radius:8px;font:inherit;
  font-weight:700;font-size:13px;cursor:pointer;white-space:nowrap}
.bascule span{opacity:.5;margin:0 2px}
.bascule:hover{filter:brightness(1.08)}
.actions{margin-left:auto;display:flex;gap:8px;align-items:center}

/* ── recherche ──────────────────────────────────────────────────── */
#recherche{position:relative;flex:1 1 420px;max-width:520px;min-width:0}
#q{width:100%;height:36px;padding:0 12px;border:1px solid var(--trait);
  border-radius:8px;background:var(--creux);color:var(--encre);font:inherit}
#q:focus{outline:2px solid var(--accent);outline-offset:-1px;
  background:var(--surface)}
#resultats{position:absolute;top:42px;left:0;right:0;margin:0;padding:6px;
  list-style:none;background:var(--surface);border:1px solid var(--trait);
  border-radius:10px;box-shadow:var(--ombre);max-height:60vh;overflow:auto;
  z-index:40}
#resultats li{margin:0}
#resultats button{width:100%;text-align:left;border:0;background:none;
  padding:8px 10px;border-radius:7px;cursor:pointer;font:inherit;
  color:var(--encre);display:flex;align-items:baseline;gap:8px}
#resultats button:hover{background:var(--creux)}
#resultats b{font-weight:600;font-size:14px}
#resultats i{font-style:normal;font-size:12.5px;color:var(--doux);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#resultats .source{margin-left:auto;font-style:normal;font-size:10px;
  font-weight:700;letter-spacing:.08em;color:var(--faible);flex:0 0 auto}
#resultats .ici b{color:var(--accent)}
#resultats .vide{padding:10px;font-size:13.5px;color:var(--doux)}

/* ── corps ──────────────────────────────────────────────────────── */
main{flex:1 1 auto;display:flex;min-height:0;position:relative}
#panneau{width:var(--panneau);flex:0 0 var(--panneau);overflow-y:auto;
  background:var(--surface);border-right:1px solid var(--trait);
  padding:14px;transition:margin-left .2s ease}
body.panneau-replie #panneau{margin-left:calc(-1 * var(--panneau))}
body.panneau-replie #etat{left:0}
#carte{flex:1 1 auto;min-width:0;background:var(--creux)}

.groupe{margin-bottom:18px}
.groupe h2{margin:0 0 8px;font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent)}
.opt{display:flex;gap:9px;padding:7px 8px;border-radius:8px;cursor:pointer;
  align-items:flex-start}
.opt:hover{background:var(--creux)}
.opt input{margin:3px 0 0;accent-color:var(--accent);flex:0 0 auto}
.opt-texte{display:flex;flex-direction:column;min-width:0}
.opt-texte b{font-size:13.5px;font-weight:600}
.opt-texte i{font-style:normal;font-size:11.5px;color:var(--doux);
  line-height:1.35;margin-top:1px}
.opt.indisponible{opacity:.45}
.opt.indisponible b::after{content:" — indisponible";color:var(--alerte);
  font-weight:500;font-size:11px}

.credits{border-top:1px solid var(--trait);padding-top:12px;margin-top:6px}
.credits p{margin:0 0 7px;font-size:11.5px;line-height:1.45;color:var(--doux)}
.credits b{color:var(--encre);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase}
.credits a{color:var(--lien)}
.credits .reserve{border-left:2px solid var(--trait);padding-left:9px;
  margin-top:10px;font-style:italic}

/* ── barre d'état ───────────────────────────────────────────────── */
/* La barre d'état appartient à la carte, pas au panneau : elle se
   décale donc de la largeur de celui-ci, et revient à gauche quand
   il est replié. */
#etat{position:absolute;left:var(--panneau);bottom:0;z-index:20;transition:left .2s ease;display:flex;gap:8px;
  align-items:center;padding:5px 12px;background:var(--surface);
  border-top:1px solid var(--trait);border-right:1px solid var(--trait);
  border-radius:0 8px 0 0;font-size:12px;color:var(--doux);
  font-variant-numeric:tabular-nums}
#etat b{color:var(--encre);font-weight:600}
/* Les séparateurs sont décoratifs : ils portent `aria-hidden` dans le
   HTML, et leur couleur est remontée de --faible à --doux pour passer
   le seuil AA (mesuré 2,5:1 avant, insuffisant même pour un point). */
#etat .sep{color:var(--doux)}

/* ── alertes ────────────────────────────────────────────────────── */
#alertes{position:fixed;right:14px;bottom:14px;z-index:60;display:flex;
  flex-direction:column;gap:8px;max-width:min(380px,calc(100vw - 28px))}
.alerte{background:var(--surface);border:1px solid var(--trait);
  border-left:3px solid var(--alerte);border-radius:8px;padding:10px 34px 10px 12px;
  font-size:13px;line-height:1.45;box-shadow:var(--ombre);position:relative}
/* Un bouton est un élément d'interface : le seuil est 3:1, et le gris
   --faible ne l'atteignait pas. La cible fait au moins 24 px, comme le
   demande le critère de taille de cible. */
.alerte .fermer{position:absolute;top:2px;right:4px;border:0;background:none;
  font-size:18px;line-height:1;color:var(--doux);cursor:pointer;
  min-width:26px;min-height:26px}
.alerte .fermer:hover{color:var(--encre)}
.alerte .fermer:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

.noscript{position:fixed;inset:0;display:grid;place-items:center;
  background:var(--papier);padding:24px;text-align:center;z-index:100}

/* ── contrôles OpenLayers ───────────────────────────────────────── */
/* Les boutons de zoom d'OpenLayers mesurent 21 px : sous les 24 px
   qu'exige le critère de taille de cible, et c'est justement au doigt
   qu'on s'en sert. On les agrandit sans les rendre voyants. */
.ol-zoom .ol-zoom-in,
.ol-zoom .ol-zoom-out{width:26px;height:26px;font-size:17px;line-height:26px}
.ol-control button:focus-visible{outline:2px solid var(--accent);
  outline-offset:1px}

/* ── attributions OpenLayers ────────────────────────────────────── */
.ol-attribution{background:rgba(255,255,255,.82);border-radius:6px 0 0 0;
  font-size:11px}
.ol-attribution a{color:var(--lien)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .ol-attribution{background:rgba(27,33,30,.82)}
}

/* ── mobile ─────────────────────────────────────────────────────── */
@media (max-width: 760px){
  :root{--panneau:100%}
  #barre{flex-wrap:wrap;height:auto;padding:8px 10px;gap:8px}
  #barre h1 span{display:none}
  #recherche{order:3;flex-basis:100%;max-width:none}
  #panneau{position:absolute;inset:0 0 0 0;z-index:25;border-right:0}
  /* Sur petit écran le panneau recouvre la carte : on la masque pour
     qu'elle ne peigne pas sous lui. Cette règle vaut pour
     l'application complète, et POUR ELLE SEULE — `embed.html` n'a pas
     de panneau, et sans cette exclusion son cadre serait blanc sur
     tous les téléphones, c'est-à-dire là où il sert le plus. */
  body:not(.panneau-replie):not(.embarquee) #carte{visibility:hidden}
  body.panneau-replie #panneau{margin-left:-100%}
  #etat{font-size:11px;left:0}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ── mode 3D ────────────────────────────────────────────────────── */
/* Le conteneur de la 3D occupe la même place que la carte 2D. Les deux
   ne sont jamais visibles ensemble : c'est une bascule, pas une
   juxtaposition. */
#carte3d{flex:1 1 auto;min-width:0;background:#0d1512;position:relative}
body.mode-3d #carte{display:none}
body.mode-3d .bascule{background:var(--encre);border-color:var(--encre)}

/* Les réglages du relief. Des boutons plats, groupés, qui se lisent
   comme un réglage et non comme des actions. */
.boutons{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:2px 0 8px}
.boutons .etiquette{font-size:11.5px;color:var(--doux);margin-right:2px}
#exagerations{display:flex;gap:4px}
.plat{height:28px;padding:0 10px;border:1px solid var(--trait);
  background:var(--surface);color:var(--encre);border-radius:7px;
  font:inherit;font-size:12.5px;cursor:pointer;white-space:nowrap}
.plat:hover{background:var(--creux)}
.plat:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.plat[aria-checked="true"]{background:var(--accent);border-color:var(--accent);
  color:#fff;font-weight:600}

/* L'avertissement du § 9 : il doit se lire, pas se deviner. */
#avertissement-exag{font-size:11px;line-height:1.4;color:var(--doux);
  font-style:italic;border-left:2px solid var(--trait);padding-left:9px;
  margin:0 0 10px}

/* En 3D, la barre d'état porte deux informations de plus. */
#etat-3d{display:inline-flex;gap:8px;align-items:center}

@media (max-width: 760px){
  body.mode-3d:not(.panneau-replie) #carte3d{visibility:hidden}
}

/* ── le panneau de diagnostic (?diag=1) ─────────────────────────── */
/* Mêmes règles que dans la carte embarquée : dense et lisible, jamais
   rencontré par un visiteur puisqu'il faut le demander dans l'URL. */
.diag{position:fixed;inset:12px;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 34%;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(--doux);cursor:pointer;
  min-width:26px;min-height:26px}
.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}