/* ============================================================================
   rich-content.css — styles du HTML riche produit par l'editeur
   ----------------------------------------------------------------------------
   CETTE FEUILLE EST CHARGEE DEUX FOIS, ET C'EST VOULU :
   1. par le layout tenant, pour le rendu public du contenu enregistre ;
   2. par TinyMCE via `content_css`, pour que le redacteur voie le resultat
      pendant qu'il ecrit.

   D'ou la regle a respecter ici : CHAQUE var() PORTE UN REPLI. L'iframe de
   l'editeur ne charge ni tokens.css ni dark-mode.css, et n'a pas la classe
   body.arcprod-tenant. Sans repli, la propriete retomberait silencieusement
   sur l'heritage — l'encadre serait invisible dans l'editeur alors qu'il
   s'affiche correctement sur la page. Les replis reproduisent donc les
   valeurs du jeu `body.arcprod-tenant` de tokens.css.

   Le mode sombre ne demande AUCUNE regle supplementaire : dark-mode.css
   redefinit deja --*-light et --*-text. Les couleurs pleines (--info,
   --warning, --danger) ne sont, elles, pas redefinies en sombre : elles ne
   servent donc qu'a la bordure, ou une teinte vive reste lisible sur fond
   sombre, et jamais a du texte.

   Le pictogramme est un caractere Unicode et non une icone de police :
   bootstrap-icons n'est pas charge dans l'iframe de l'editeur. Il double
   l'information de couleur, pour ne pas la porter par la seule teinte.
   ========================================================================= */

.xh-callout {
    /* Variables locales : une seule declaration de forme pour trois variantes. */
    --xh-callout-accent: var(--info, #3b82f6);
    --xh-callout-bg:     var(--info-light, #eff6ff);
    --xh-callout-fg:     var(--info-text, #2e65c0);
    --xh-callout-mark:   "\2139";

    /* Le contenu conserve son flux : une grille répartissait le deuxième
       paragraphe dans la colonne du pictogramme. */
    display: block;
    position: relative;
    margin: 1.25rem 0;
    padding: 0.875rem 1rem 0.875rem 3rem;
    border-left: 4px solid var(--xh-callout-accent);
    border-radius: 6px;
    background: var(--xh-callout-bg);
    color: var(--xh-callout-fg);
    font-size: 0.95rem;
    line-height: 1.55;
}

.xh-callout::before {
    content: var(--xh-callout-mark);
    position: absolute;
    left: 1rem;
    top: .875rem;
    pointer-events: none;
    font-size: 1.05rem;
    line-height: 1.5;
    /* LE PICTOGRAMME PREND LA COULEUR DU TEXTE, PAS CELLE DE L'ACCENT.
       Mesure du 2026-09-08 en mode clair : l'ambre --warning sur le fond
       --warning-light ne donne que 2,07:1, sous le seuil de 3:1 des elements
       non textuels — et ce pictogramme PORTE de l'information, puisqu'il
       double la couleur pour ne pas la laisser seule distinguer les trois
       encadres. La couleur du texte donne 5,50:1. L'accent reste sur la
       bordure, qui est decorative. Il herite donc, sans declaration. */
}

/* Le contenu du redacteur reste du HTML libre : on borne les marges des
   premiers et derniers enfants pour que l'encadre ne se creuse pas. */
.xh-callout > *:first-child { margin-top: 0; }
.xh-callout > *:last-child  { margin-bottom: 0; }

.xh-callout--warning {
    --xh-callout-accent: var(--warning, #f59e0b);
    --xh-callout-bg:     var(--warning-light, #fffbeb);
    --xh-callout-fg:     var(--warning-text, #8e5c06);
    --xh-callout-mark:   "\26A0";
}

.xh-callout--danger {
    --xh-callout-accent: var(--danger, #ef4444);
    --xh-callout-bg:     var(--danger-light, #fef2f2);
    --xh-callout-fg:     var(--danger-text, #ba3535);
    --xh-callout-mark:   "\26D4";
}

/* Dans l'editeur, l'encadre doit rester selectionnable comme un bloc ordinaire :
   seul le pictogramme est positionne, sans intercepter le curseur. */

/* ---------------------------------------------------------------------------
   Media insere depuis la mediatheque du Helper.
   LA CLASSE EST INDISPENSABLE : un selecteur nu `video, iframe` toucherait
   aussi les lecteurs des pages de detail (video_view, tutoriels), qui ont leur
   propre mise en page. Sans borne de largeur, le width="560" pose en attribut
   deborde sur mobile.
   ------------------------------------------------------------------------ */
.xh-media {
    display: block;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    margin: 1.25rem 0;
    border: 0;
}

video.xh-media {
    /* Fond noir : une video dont le ratio reel n'est pas 16/9 laisse des
       bandes, et un fond transparent y laisserait voir la page. */
    background: #000;
}