/* ===================================================================
   Images de chapitre (éditeur v2 + lecteurs)
   Source unique des styles d'images insérées dans le contenu.
   Inclus dans : chapter_edit_v2.html, chapter_detail.html, reader_v2.html
   Les valeurs utilisent des fallbacks pour fonctionner même là où les
   variables de thème (--accent, --bg…) ne sont pas définies.
   =================================================================== */

/* ── Filet de sécurité : images nues ──────────────────────────────
   Le corpus contient des images collées avant l'éditeur v2 : une <img>
   posée directement dans un <p>, sans <figure class="ce-img"> autour et
   sans aucune contrainte de taille. Tout le reste de ce fichier étant
   accroché à `figure.ce-img`, rien ne les bornait : elles s'affichaient à
   leur taille intrinsèque — jusqu'à 1600 px, la largeur maximale produite
   par la conversion webp — et débordaient de la colonne d'écriture.

   Les lecteurs n'étaient pas touchés : `.ch-content img` (design-system.css)
   les borne déjà. Le trou ne concernait que le conteneur de l'éditeur.

   `wrap_legacy_images` enveloppe le gros de ces images dans une vraie
   figure ; cette règle reste le filet pour celles qu'il ne peut pas
   traiter (image dans un lien, dans un titre, au fil du texte) et pour
   tout collage futur. Volontairement en tête de fichier : `figure.ce-img
   img` est plus spécifique et la surcharge donc sans y toucher.

   `height` n'est remis à auto que sans attribut `height` explicite —
   l'annuler ferait au contraire GRANDIR les images que leur auteur avait
   dimensionnées par cet attribut. */
.scribe-content img { max-width: 100%; }
.scribe-content img:not([height]) { height: auto; }

figure.ce-img {
  display: block;
  width: 60%;                 /* surchargé en inline par le resize */
  max-width: 100%;
  margin: 1.4em auto;         /* centrée par défaut */
  padding: 0;
  text-align: center;
}

figure.ce-img img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  box-sizing: border-box;
  background: var(--bg, #fff);
}

/* ── Bordure & arrondi ────────────────────────────────────────────
   Bordure (couleur + épaisseur) et arrondi sont appliqués en styles
   inline sur l'<img> par l'éditeur (border / border-radius), donc rien
   à définir ici : les valeurs sont portées par le HTML sauvegardé. */

/* ── Ombres (paliers nettement distincts) ─────────────────────── */
figure.ce-img.ce-sh-none  img { box-shadow: none; }
figure.ce-img.ce-sh-soft  img { box-shadow: 0 2px 6px rgba(0, 0, 0, .20); }
figure.ce-img.ce-sh-md    img { box-shadow: 0 9px 22px rgba(0, 0, 0, .32); }
figure.ce-img.ce-sh-paper img { box-shadow: 0 20px 44px rgba(0, 0, 0, .42); }

/* ── Rotation libre ───────────────────────────────────────────────
   L'angle est appliqué en styles inline par l'éditeur : la <figure> réserve
   une boîte (height:0 + padding-bottom %) et l'<img> pivotée est centrée en
   position absolute — le texte autour se réagence. Rien à définir ici. */

/* ── Légende ──────────────────────────────────────────────────── */
figure.ce-img figcaption {
  margin-top: .55em;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: .85rem;
  font-style: italic;
  line-height: 1.4;
  color: var(--text-muted, var(--nav-muted, #6b6157));
  text-align: center;
}
figure.ce-img figcaption:empty::before {
  content: 'Légende…';
  opacity: .5;
}