/* ============================================================================
   AgroClimat — panneau de documentation d'un indicateur
   ----------------------------------------------------------------------------
   Deux responsabilités bien distinctes :

   A. LE PANNEAU (.indicator-doc-panel)
      Tiroir latéral qui glisse depuis la droite AU-DESSUS de la carte, sans la
      masquer entièrement : l'utilisateur garde le contexte cartographique. En
      mobile, il occupe tout l'écran.

      Le panneau est considéré comme OUVERT dès qu'il est présent dans le DOM
      (cas d'un v-if côté Vue, le plus courant ici). Si le template préfère le
      garder monté en permanence, deux états fermés sont reconnus :
          <aside class="indicator-doc-panel est-fermee">   ou   [hidden]
      L'animation d'entrée fonctionne dans les deux cas.

   B. LE CONTENU (.indicator-doc)
      La documentation est saisie dans TinyMCE côté administration : elle arrive
      avec des largeurs de tableaux figées en pixels ou en pourcentages, des
      attributs border="1", et des images dimensionnées à la main. Les attributs
      `style` sont retirés par le nettoyage serveur (htmlSanitizer.php), mais
      width/height/border survivent en tant qu'ATTRIBUTS HTML. Les règles de la
      section B neutralisent tout cela pour que le rendu reste lisible dans un
      panneau étroit, quelle que soit la mise en forme d'origine.

   Les jetons de design proviennent de style.css ; chaque var() porte malgré
   tout sa valeur de repli, pour que cette feuille reste correcte si elle est
   chargée seule ou avant style.css.
   ========================================================================== */


/* ============================================================================
   A. LE PANNEAU
   ========================================================================== */
.indicator-doc-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--largeur-panneau-doc, min(480px, 90vw));
  max-width: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background: var(--blanc, #fff);
  border-left: 1px solid var(--bord-tuile, #eaeaea);
  box-shadow: var(--ombre-tiroir, -4px 0 24px rgba(0, 0, 0, 0.18));
  z-index: var(--plan-panneau-doc, 1200);
  overflow: hidden;                 /* le défilement a lieu dans le corps */
  animation: doc-glissement-entree 0.28s ease;
}

@keyframes doc-glissement-entree {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* États fermés, pour un panneau monté en permanence. */
.indicator-doc-panel.est-fermee,
.indicator-doc-panel[hidden] {
  transform: translateX(100%);
  visibility: hidden;
  pointer-events: none;
  animation: none;
  transition: transform var(--duree-moyenne, 0.3s) ease,
              visibility var(--duree-moyenne, 0.3s) ease;
}

/* ── En-tête ─────────────────────────────────────────────────────────── */
.indicator-doc-panel > :where(header, .indicator-doc-header) {
  flex: none;
  display: flex;
  align-items: flex-start;
  gap: var(--espace-lg, 12px);
  padding: var(--espace-2xl, 16px) var(--espace-3xl, 20px);
  border-bottom: 1px solid var(--bord-tuile, #eaeaea);
  background: var(--fond-section, #f9f9f9);
}

.indicator-doc-title,
.indicator-doc-panel > :where(header, .indicator-doc-header) h2 {
  flex: 1;
  margin: 0;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--encre-titre, #2c3e50);
}

/* Ligne secondaire : unité, date de mise à jour… */
.indicator-doc-meta {
  margin: var(--espace-2xs, 4px) 0 0;
  font-size: 12px;
  color: var(--gris-doux, #777);
}

/* ── Bouton de fermeture ─────────────────────────────────────────────── */
.indicator-doc-close {
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  color: var(--gris-fort, #555);
  background: transparent;
  border: none;
  border-radius: var(--rayon-rond, 50%);
  cursor: pointer;
  transition: background-color var(--duree-rapide, 0.15s), color var(--duree-rapide, 0.15s);
}

.indicator-doc-close:hover {
  background: var(--bleu-neige, #f0f6ff);
  color: var(--bleu-marque, #4a89dc);
}

.indicator-doc-close:focus-visible {
  outline: 2px solid var(--bleu-marque, #4a89dc);
  outline-offset: 2px;
}

/* ── Corps défilant ──────────────────────────────────────────────────── */
.indicator-doc-panel > :where(.indicator-doc, .indicator-doc-body) {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;      /* pas de propagation à la page */
  -webkit-overflow-scrolling: touch;
}


/* ============================================================================
   B. LE CONTENU RÉDIGÉ DANS TinyMCE
   ----------------------------------------------------------------------------
   Toutes les règles sont portées par .indicator-doc : elles ne peuvent pas
   déborder sur le reste de l'application.
   ========================================================================== */
.indicator-doc {
  padding: var(--espace-3xl, 20px);
  font-size: 14px;
  line-height: 1.6;
  color: var(--encre, #333);
  overflow-wrap: break-word;         /* une URL longue ne déborde pas */
  word-break: break-word;
}

.indicator-doc > *:first-child { margin-top: 0; }
.indicator-doc > *:last-child  { margin-bottom: 0; }

/* ── Titres : la documentation démarre en h3 (h1/h2 sont réservés à la
      page). On les hiérarchise explicitement car TinyMCE peut produire
      n'importe quel niveau. ─────────────────────────────────────────────── */
.indicator-doc h2 {
  margin: var(--espace-4xl, 24px) 0 var(--espace-sm, 8px);
  font-size: 17px;
  font-weight: 700;
  color: var(--encre-titre, #2c3e50);
}

.indicator-doc h3 {
  margin: var(--espace-4xl, 24px) 0 var(--espace-sm, 8px);
  padding-bottom: var(--espace-2xs, 4px);
  font-size: 15px;
  font-weight: 700;
  color: var(--bleu-marque, #4a89dc);
  border-bottom: 1px solid var(--bord-tuile, #eaeaea);
}

.indicator-doc h4 {
  margin: var(--espace-2xl, 16px) 0 var(--espace-2xs, 4px);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--gris-fort, #555);
}

.indicator-doc p {
  margin: 0 0 var(--espace-lg, 12px);
}

.indicator-doc hr {
  margin: var(--espace-3xl, 20px) 0;
  border: none;
  border-top: 1px solid var(--bord-tuile, #eaeaea);
}

/* ── Listes ──────────────────────────────────────────────────────────── */
.indicator-doc ul,
.indicator-doc ol {
  margin: 0 0 var(--espace-lg, 12px);
  padding-left: var(--espace-3xl, 20px);
}

.indicator-doc li {
  margin-bottom: var(--espace-xs, 6px);
}

.indicator-doc li > ul,
.indicator-doc li > ol {
  margin-top: var(--espace-xs, 6px);
}

/* ── Liens ───────────────────────────────────────────────────────────── */
.indicator-doc a {
  color: var(--bleu-marque, #4a89dc);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.indicator-doc a:hover {
  color: var(--bleu-fonce, #357ab7);
}

.indicator-doc a:focus-visible {
  outline: 2px solid var(--bleu-marque, #4a89dc);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Citations et code ───────────────────────────────────────────────── */
.indicator-doc blockquote {
  margin: 0 0 var(--espace-lg, 12px);
  padding: var(--espace-sm, 8px) var(--espace-lg, 12px);
  border-left: 3px solid var(--bleu-marque, #4a89dc);
  background: var(--bleu-brume, #f0f7ff);
  color: var(--gris-fort, #555);
  font-style: italic;
}

.indicator-doc code {
  padding: 1px 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--fond-doux, #f0f0f0);
  border-radius: var(--rayon-etiquette, 3px);
}

.indicator-doc pre {
  margin: 0 0 var(--espace-lg, 12px);
  padding: var(--espace-lg, 12px);
  overflow-x: auto;
  background: var(--fond-doux, #f0f0f0);
  border-radius: var(--rayon-controle, 6px);
  font-size: 12px;
  line-height: 1.5;
}

.indicator-doc pre code {
  padding: 0;
  background: none;
}

/* ── Images : TinyMCE fixe width/height en attributs HTML. On les rend
      fluides sans jamais laisser déborder le panneau. ────────────────────── */
.indicator-doc img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  margin: var(--espace-lg, 12px) auto;
  border-radius: var(--rayon-controle, 6px);
}

.indicator-doc figure {
  margin: var(--espace-lg, 12px) 0;
  max-width: 100%;
}

.indicator-doc figcaption {
  margin-top: var(--espace-xs, 6px);
  font-size: 12px;
  font-style: italic;
  color: var(--gris-doux, #777);
  text-align: center;
}

/* ── Tableaux ────────────────────────────────────────────────────────────
   Le point noir de la documentation TinyMCE : largeurs figées (width="600",
   width="120%"), border="1" et cellpadding hérités de l'éditeur. Les !important
   sont indispensables car ces valeurs arrivent en attributs de présentation,
   que le navigateur mappe sur des déclarations de style.
   ---------------------------------------------------------------------- */
.indicator-doc table {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 0 var(--espace-lg, 12px);
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: auto;
  font-size: 13px;
  background: var(--blanc, #fff);
}

/* Annule les largeurs/hauteurs posées ligne par ligne et cellule par cellule
   par l'éditeur (la table, elle, garde son width:100% ci-dessus).
   :where() garde une spécificité nulle : ces règles restent surchargeables. */
.indicator-doc :where(thead, tbody, tfoot, tr, th, td, col, colgroup) {
  width: auto !important;
  height: auto !important;
}

.indicator-doc th,
.indicator-doc td {
  padding: var(--espace-sm, 8px) var(--espace-md, 10px);
  border: 1px solid var(--bord-clair, #e0e0e0) !important;
  text-align: left;
  vertical-align: top;
}

.indicator-doc th {
  background: var(--bleu-brume, #f0f7ff);
  font-weight: 700;
  color: var(--encre-titre, #2c3e50);
}

.indicator-doc tbody tr:nth-child(even) {
  background: var(--fond-section, #f9f9f9);
}

.indicator-doc caption {
  margin-bottom: var(--espace-xs, 6px);
  font-size: 12px;
  font-style: italic;
  color: var(--gris-doux, #777);
  text-align: left;
}

/* Un tableau à nombreuses colonnes ne peut pas toujours tenir dans 480px.
   Si le template enveloppe le tableau dans un conteneur (.indicator-doc-table
   ou .table-scroll), celui-ci devient défilable horizontalement. */
.indicator-doc .indicator-doc-table,
.indicator-doc .table-scroll {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  margin: 0 0 var(--espace-lg, 12px);
  -webkit-overflow-scrolling: touch;
}

.indicator-doc .indicator-doc-table > table,
.indicator-doc .table-scroll > table {
  margin-bottom: 0;
}

/* Sans conteneur, le tableau ne déborde pas pour autant : width:100% et
   table-layout:auto le contraignent à la largeur du panneau, et le texte des
   cellules passe à la ligne (overflow-wrap hérité de .indicator-doc).
   On n'utilise volontairement PAS l'astuce `table { display: block }` : elle
   transformerait thead et tbody en tableaux indépendants, dont les colonnes
   ne seraient plus alignées. Le corps du panneau, lui, reste défilable
   horizontalement en dernier recours (overflow-y:auto force overflow-x:auto). */

/* ── Divers ──────────────────────────────────────────────────────────── */
.indicator-doc sup,
.indicator-doc sub {
  font-size: 0.75em;
  line-height: 0;
}

/* Documentation absente : message discret posé par le template. */
.indicator-doc-vide {
  padding: var(--espace-3xl, 20px);
  font-size: 14px;
  font-style: italic;
  color: var(--gris-doux, #777);
}

/* Chargement et erreur de la fiche. Ces classes existent dans le gabarit
   depuis la phase 1 et n'avaient aucune règle : le message d'erreur et son
   bouton « Réessayer » s'affichaient sans mise en forme. Le panneau étant
   téléporté dans <body>, aucun style de la sidebar ne s'y applique. */
.indicator-doc-etat {
  margin: 0;
  padding: var(--espace-3xl, 20px);
  font-size: 14px;
  line-height: 1.5;
  color: var(--gris, #666);          /* 5,74:1 sur blanc */
}

.indicator-doc-etat > p {
  margin: 0 0 var(--espace-sm, 8px);
}

.indicator-doc-etat[role="alert"] > p:first-child {
  font-weight: 700;
  color: var(--encre, #333);
}

.indicator-doc-etat-detail {
  font-size: 12px;
  font-style: italic;
  color: var(--gris, #666);
  overflow-wrap: break-word;
  word-break: break-word;
}

.indicator-doc-etat button {
  margin-top: var(--espace-sm, 8px);
  padding: var(--espace-xs, 6px) var(--espace-lg, 12px);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  color: var(--blanc, #fff);
  background: var(--bleu-fonce, #357ab7);   /* #fff sur #357ab7 : 4,55:1 */
  border: none;
  border-radius: var(--rayon-controle, 6px);
  cursor: pointer;
}

.indicator-doc-etat button:hover {
  background: var(--bleu-tres-fonce, #2a69bc);
}

.indicator-doc-etat button:focus-visible {
  outline: 2px solid var(--bleu-marque, #4a89dc);
  outline-offset: 2px;
}


/* ============================================================================
   C. RESPONSIVE
   ========================================================================== */

/* Mobile : le panneau prend tout l'écran (au-dessus du tiroir de la sidebar). */
@media (max-width: 768px) {
  .indicator-doc-panel {
    width: 100%;
    max-width: 100%;
    left: 0;
    border-left: none;
  }

  .indicator-doc {
    padding: var(--espace-2xl, 16px);
  }

  .indicator-doc-panel > :where(header, .indicator-doc-header) {
    padding: var(--espace-lg, 12px) var(--espace-2xl, 16px);
  }

  /* Le bouton ☰ de la sidebar ne doit pas flotter par-dessus le panneau.
     CORRECTIF : le sélecteur frère `.indicator-doc-panel ~ #toggleControlsButton`
     a été supprimé, il ne pouvait JAMAIS correspondre — le panneau est
     téléporté en fin de <body> alors que #toggleControlsButton est un enfant
     de #main-layout, et le précède donc dans le document. Seule la forme
     `body:has(…)` ci-dessous décrit correctement la relation. */
  body:has(.indicator-doc-panel:not(.est-fermee):not([hidden])) #toggleControlsButton {
    display: none;
  }
}

/* Tablette : un panneau de 480px masquerait presque toute la carte. */
@media (min-width: 769px) and (max-width: 1024px) {
  .indicator-doc-panel {
    width: min(400px, 60vw);
  }
}


/* ============================================================================
   D. ACCESSIBILITÉ — mouvement réduit
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .indicator-doc-panel,
  .indicator-doc-panel.est-fermee,
  .indicator-doc-panel[hidden],
  .indicator-doc-close {
    animation: none !important;
    transition: none !important;
  }
}


/* ============================================================================
   E. IMPRESSION
   ----------------------------------------------------------------------------
   Imprimer une fiche d'indicateur est un usage attendu (support de formation) :
   le panneau redevient un document normal.
   ========================================================================== */
@media print {
  .indicator-doc-panel {
    position: static;
    width: 100%;
    box-shadow: none;
    border: none;
    animation: none;
  }

  .indicator-doc-close {
    display: none;
  }

  .indicator-doc {
    overflow: visible;
    color: #000;
  }

  .indicator-doc a {
    color: #000;
  }
}