@charset "UTF-8";

/*
 * Blocs de contenu mis à la disposition des rédacteurs dans JCE.
 *
 * Cette feuille est chargée deux fois, et c'est voulu :
 *  - dans le site, par `templates/index.php` ;
 *  - dans l'éditeur, par `media/css/editor.css`, que JCE injecte dans son iframe.
 * Le rédacteur voit donc dans l'éditeur exactement ce que verra le visiteur.
 *
 * Les sélecteurs ne sont pas scopés sous `.com-content-article` : dans l'iframe de JCE
 * ce conteneur n'existe pas. Les classes `sema-*` sont assez spécifiques pour s'en
 * passer sans risque de collision.
 */

/* ------------------------------------------------------------------- Encart */

/* Mise en garde, définition, aparté. Aplat kraft, filet terre cuite en bord d'attaque :
   l'accent est décoratif, le texte reste à l'encre sur kraft (~9:1). */
.sema-encart {
  /* Papier collé de travers. Une valeur sous le degré suffit : sur un bloc large,
     quelques degrés désaxeraient visiblement le texte au lieu de l'animer. */
  --sema-encart-rotation: -0.4deg;

  margin-block: 2rem;
  padding: 1.25rem 1.5rem;
  color: var(--rem-encre);
  background-color: var(--rem-kraft);
  border-inline-start: 0.5rem solid var(--rem-terre);
  box-shadow: 0.4rem 0.4rem 0 oklch(25.47% 0.007 106.9 / 0.15);
  rotate: var(--sema-encart-rotation);
}

.sema-encart > :first-child {
  margin-block-start: 0;
}

.sema-encart > :last-child {
  margin-block-end: 0;
}

/* Le titre de l'encart est un paragraphe fort, pas un titre de section : il ne doit pas
   entrer dans le sommaire ni dans la hiérarchie des titres du document. */
.sema-encart__titre {
  margin-block-end: 0.5rem;
  font-family: var(--rem-police-display);
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ Citation */

/* Aplat forêt, texte crème (>10:1). Le guillemet fait partie du texte saisi : une
   citation reste lisible telle quelle si la feuille ne se charge pas. */
.sema-citation {
  margin-block: 2rem;
  margin-inline: 0;
  padding: 1.5rem;
  color: var(--rem-creme);
  background-color: var(--rem-foret);
  border: 0 none;
  box-shadow: 0.5rem 0.5rem 0 var(--rem-kraft);
}

.sema-citation > p {
  margin-block: 0;
  font-family: var(--rem-police-display);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.35;
}

.sema-citation > p + p {
  margin-block-start: 0.75rem;
}

/* Étiquette « CITATION » posée par la feuille : un mot de moins à saisir, et pas de
   risque qu'un rédacteur l'oublie ou l'orthographie autrement. */
.sema-citation::before {
  content: "Citation";
  display: block;
  margin-block-end: 0.75rem;
  color: var(--rem-moutarde);
  font-family: var(--rem-police-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Signature, quand elle est renseignée. */
.sema-citation__source {
  display: block;
  margin-block-start: 0.9rem;
  color: var(--rem-kraft);
  font-family: var(--rem-police-mono);
  font-size: 0.8125rem;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}