@import url("ordinia-tokens.f7a0065cd154.css");

/* --- Fontes de la marque, auto-hébergées ---------------------------------
   Cormorant Garamond pour les titres, Lora pour le texte (SIL Open Font
   License, voir fonts/OFL.txt). Servies depuis notre propre domaine : la
   section 1 de l'identité visuelle interdit tout appel réseau vers un tiers,
   et une ASBL n'a pas à annoncer à Google chaque page qu'un de ses membres
   consulte.

   Trois fichiers et non cinq comme le prévoyait la spécification : l'amont
   ne distribue plus que des fontes **variables**, dont un seul fichier porte
   toutes les graisses. Les cinq statiques demandées revenaient à télécharger
   deux fois le même octet.

   Seul le sous-ensemble latin est embarqué : le produit est belge et bilingue
   FR/NL, et le cyrillique triplerait le poids pour des caractères que
   personne n'affichera.

   `font-display: swap` : le texte s'affiche tout de suite dans la pile de
   repli, puis se redessine. Un secrétaire ne doit pas attendre 40 ko pour
   lire une date d'échéance.

   Chemins relatifs : `ManifestStaticFilesStorage` les réécrit tout seul au
   `collectstatic`. */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/cormorant-garamond.ec4225ec161b.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Lora;
  src: url("fonts/lora.662c56ecd8de.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Lora;
  src: url("fonts/lora-italic.bf88700c66c9.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

/* Feuille de style d'Ordinia — identité « Classical », voir brand/IDENTITE-VISUELLE.md.
   Écrite à la main, sans cadre CSS ni chaîne de construction, et sans aucun
   appel réseau vers un tiers.

   Trois règles gouvernent tout ce qui suit :
   1. la couleur est un trait, jamais un aplat — l'or fait des filets, pas des fonds ;
   2. la hiérarchie vient de la typographie et des filets, pas de l'ombre ;
   3. seul le problème est coloré — une obligation à jour est neutre.

   Aucun hex ici : toute valeur vient de ordinia-tokens.css. */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: 16px/1.6 var(--texte);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3 {
  font-family: var(--titre);
  font-weight: var(--titre-graisse);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 var(--e2);
}
h1 { font-size: 2.1rem; font-weight: 400; }   /* plus c'est grand, plus c'est léger */
h2 { font-size: 1.4rem; margin-top: var(--e8); }
h3 { font-size: 1.1rem; }
p { margin: 0 0 var(--e3); }
strong { font-weight: 600; }                  /* jamais 700 */
a { color: var(--accent-texte); }

/* Les explications juridiques se lisent en colonne mesurée. */
.sous-titre, .echeance__note, .fondement__meta, .instructions, .qualification__regle {
  max-width: 62ch;
  text-wrap: pretty;
}

/* Un nombre est un chiffre : il s'aligne. Jamais sur le texte courant, où Lora
   élargirait les espaces. */
th, td, time, .grande-date, .empreinte, .paires dd { font-variant-numeric: tabular-nums; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.saut-au-contenu { position: absolute; left: -9999px; }
.saut-au-contenu:focus {
  left: .5rem; top: .5rem; z-index: 10;
  background: var(--surface); padding: .5rem .75rem; border-radius: var(--rayon);
}

/* --- Étiquettes de colonne et sur-titres ---------------------------------- */

th, .etiquette-legende {
  font-family: var(--texte);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--encre-douce);
  font-weight: 600;
}

/* --- Bandeau -------------------------------------------------------------- */

.bandeau { background: var(--surface); border-bottom: 1px solid var(--trait); }
.bandeau__interieur {
  max-width: 62rem; margin: 0 auto; padding: var(--e3) var(--e4);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e6);
}
.marque {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--titre); font-weight: var(--titre-graisse);
  font-size: 1.35rem; letter-spacing: .02em;
  text-decoration: none; color: var(--encre);
}
.marque__sceau { display: block; border-radius: 3px; }
.bandeau__nav { display: flex; flex-wrap: wrap; gap: var(--e4); align-items: center; }
/* `:not(.bouton)` : sans lui, ce sélecteur l'emporte sur `.bouton` — deux
   classes contre une — et retire son padding horizontal à un bouton placé dans
   le bandeau. Le « Créer un compte » de l'en-tête anonyme voyait son texte
   déborder de sa propre bordure. */
.bandeau__nav a:not(.bouton) {
  text-decoration: none; color: var(--encre-douce); padding: .35rem 0;
}
.bandeau__nav a:hover { color: var(--or-700); }
/* Le soulignement est la marque d'état : jamais un aplat d'or. */
.bandeau__nav a[aria-current="page"] {
  color: var(--encre); box-shadow: inset 0 -2px 0 var(--accent);
}
.bandeau__compte {
  margin-left: auto; display: flex; align-items: center; gap: var(--e3);
  font-size: .9rem; color: var(--encre-douce);
}
.bandeau__compte form { margin: 0; }
/* Le nom du compte est devenu le lien vers le profil : il ne peut donc plus
   disparaître sur un téléphone, sinon la page du profil n'a plus de porte —
   « tout doit être utilisable sur un téléphone » (section 10.2). Étroit, on
   montre un libellé court ; large, le nom complet. Le soulignement au survol
   est celui des liens du bandeau, jamais un aplat d'or. */
.compte__adresse { color: var(--encre-douce); text-decoration: none; padding: .35rem 0; }
.compte__adresse:hover { color: var(--or-700); }
.compte__adresse[aria-current="page"] {
  color: var(--encre); box-shadow: inset 0 -2px 0 var(--accent);
}
.compte__nom { display: none; }
@media (min-width: 48rem) {
  .compte__nom { display: inline; }
  .compte__court { display: none; }
}

.selecteur { position: relative; }
.selecteur summary {
  cursor: pointer; list-style: none; padding: .3rem .6rem;
  border: 1px solid var(--trait); border-radius: var(--rayon); color: var(--encre);
}
.selecteur summary::-webkit-details-marker { display: none; }
.selecteur ul {
  position: absolute; right: 0; z-index: 5;
  margin: .35rem 0 0; padding: .35rem; min-width: 15rem; list-style: none;
  background: var(--surface); border: 1px solid var(--trait);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);          /* une ombre : ceci flotte réellement */
}
.selecteur li a { display: block; padding: .4rem .5rem; text-decoration: none; border-radius: 3px; }
.selecteur li a:hover { background: var(--or-100); }

/* --- Contenu -------------------------------------------------------------- */

.contenu {
  flex: 1; width: 100%; max-width: 62rem; margin: 0 auto;
  padding: var(--e8) var(--e4) var(--e8);
}
.sous-titre { color: var(--encre-douce); margin-top: calc(var(--e1) * -1); }
.fil { margin: 0 0 var(--e3); font-size: .9rem; }

/* Pas d'ombre dans les grilles : un filet est une décision, une ombre un murmure. */
.carte {
  background: transparent;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: var(--e4);
}
.carte + .carte { margin-top: var(--e3); }
.carte__titre { margin: var(--e4) 0 var(--e2); font-size: 1.1rem; }
.carte > .carte__titre:first-child { margin-top: 0; }

.grille { display: grid; gap: var(--e3); }
@media (min-width: 44rem) { .grille--deux { grid-template-columns: 1fr 1fr; } }

/* Le trait épais à gauche est un tic de tableau de bord : filet sur les quatre côtés. */
.encart {
  border: 1px solid var(--accent);
  background: var(--accent-clair);
  padding: var(--e3) var(--e4);
  border-radius: var(--rayon);
  margin: 0 0 var(--e3);
}
.encart--alerte { border-color: var(--alerte); background: var(--alerte-clair); }

/* Filet de clôture : une seule fois par page, avant le pied. */
.cloture {
  height: 8px; margin: var(--e6) 0 var(--e4);
  background: url("brand/ordinia-rule.f650582cb771.svg") center / auto 8px no-repeat;
}

/* --- Listes de données ---------------------------------------------------- */

.paires { display: grid; grid-template-columns: max-content 1fr; gap: .4rem var(--e6); margin: 0; }
.paires dt { color: var(--encre-douce); }
.paires dd { margin: 0; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: var(--e2) var(--e1); }
thead th { border-bottom: 2px solid var(--trait); }
tbody td { border-bottom: 1px solid var(--trait); }
tbody tr:hover { background: var(--neutre-100); }
.tableau-defilant { overflow-x: auto; }

.etiquette {
  display: inline-block; padding: .1rem .5rem; border-radius: 999px;
  font-size: .78rem; font-weight: 600;
  border: 1px solid var(--trait); color: var(--encre-douce);
}
.etiquette--succes { border-color: var(--trait); color: var(--succes); }
.etiquette--attente { border-color: var(--accent); background: var(--accent-clair); color: var(--or-700); }

/* --- Formulaires ---------------------------------------------------------- */

.formulaire { max-width: 34rem; }
.formulaire p { margin: 0 0 var(--e3); }
.formulaire label { display: block; font-weight: 600; margin-bottom: .25rem; }
.formulaire input, .formulaire select, .formulaire textarea {
  width: 100%; padding: .55rem .65rem;
  font: inherit; color: inherit; background: var(--surface);
  border: 1px solid var(--trait); border-radius: var(--rayon);
}
.formulaire .helptext { display: block; font-size: .85rem; color: var(--encre-douce); }

/* Une case à cocher n'est pas un champ de saisie : la règle `width: 100%`
   ci-dessus l'étirait sur toute la colonne et la sortait de son étiquette. */
.formulaire input[type="checkbox"], .formulaire input[type="radio"] {
  width: auto; margin-right: .5rem; vertical-align: middle;
}
.formulaire label:has(input[type="checkbox"]) { display: flex; align-items: center; gap: .1rem; }
.formulaire ul.errorlist {
  margin: 0 0 .35rem; padding: 0; list-style: none;
  color: var(--alerte); font-size: .9rem;
}

/* Jamais d'aplat : un bouton est un contour. */
.bouton {
  display: inline-block; padding: .5rem 1rem; min-height: 2.75rem;
  font-family: var(--titre); font-size: 1rem; font-weight: 600;
  line-height: 1.7;
  color: var(--encre); background: transparent;
  border: 1px solid var(--accent); border-radius: var(--rayon);
  text-decoration: none; cursor: pointer;
}
.bouton:hover { background: var(--or-100); }
.bouton:active { border-color: var(--or-600); }
.bouton--discret {
  border-color: transparent; color: var(--encre-douce); background: transparent;
}
.bouton--discret:hover { background: transparent; color: var(--encre); text-decoration: underline; }
.actions { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; margin-top: var(--e6); }

/* --- Messages et pied ----------------------------------------------------- */

.messages { max-width: 62rem; margin: var(--e3) auto 0; padding: 0 var(--e4); list-style: none; }
.message {
  padding: var(--e2) var(--e4);
  border-left: 3px solid var(--succes);
  background: var(--succes-clair);
  color: var(--encre);              /* la couleur est dans le trait, pas dans le texte */
}
.message--error { border-left-color: var(--alerte); background: var(--alerte-clair); }

.pied { border-top: 1px solid var(--trait); background: var(--surface); }
.pied p {
  max-width: 62rem; margin: 0 auto; padding: var(--e4);
  font-size: .85rem; color: var(--encre-douce); max-width: 62ch;
}

/* --- Bannière d'alerte globale -------------------------------------------- */

.bandeau-alerte { background: var(--alerte-clair); border-bottom: 1px solid var(--alerte); }
.bandeau-alerte__interieur {
  max-width: 62rem; margin: 0 auto; padding: var(--e3) var(--e4);
  color: var(--encre); font-size: .93rem;
  display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); align-items: center;
}
.bandeau-alerte__interieur form { margin-left: auto; }

/* --- Échéancier ----------------------------------------------------------- */

.filtres { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); align-items: center; margin-bottom: var(--e4); }
.filtres label { font-weight: 600; }
.filtres select, .filtres input {
  padding: .45rem .6rem; font: inherit; color: inherit;
  border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--surface);
}

/* Vocabulaire d'état : seul le problème est coloré. */
.echeance { border: 1px solid var(--trait); }
.echeance--en_cours { border-color: var(--accent); background: var(--accent-clair); }
.echeance--en_retard { border-color: var(--alerte); background: var(--alerte-clair); }
.echeance--non_applicable { opacity: .6; }

.echeance__entete { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); justify-content: space-between; align-items: flex-start; }
.echeance__meta { margin: 0; color: var(--encre-douce); font-size: .9rem; }
.echeance__date { text-align: right; font-size: 1.05rem; }
.echeance__estimee { display: block; font-size: .78rem; color: var(--encre-douce); font-weight: 400; }
.echeance__note { margin: var(--e2) 0 0; font-size: .9rem; color: var(--encre-douce); }
.echeance__aller { margin: var(--e2) 0 0; font-size: .92rem; }
.echeance__action { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; margin-top: var(--e3); font-size: .9rem; }
.echeance__action input, .echeance__action select {
  padding: .4rem .55rem; font: inherit; color: inherit;
  border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--surface);
}
.echeance__lien { text-decoration: none; color: inherit; }
.echeance__lien:hover { color: var(--accent-texte); text-decoration: underline; }
.etiquette--en_retard { border-color: var(--alerte); background: var(--alerte-clair); color: var(--alerte); }
.etiquette--en_cours { border-color: var(--accent); background: var(--accent-clair); color: var(--or-700); }
.etiquette--fait { border-color: var(--trait); color: var(--succes); }
.etiquette--non_applicable { border-color: var(--trait); color: var(--encre-douce); }
.echu { color: var(--alerte); }

.fondement { margin-top: var(--e3); font-size: .9rem; }
.fondement summary { cursor: pointer; color: var(--accent-texte); }
.fondement blockquote, .texte-legal {
  margin: var(--e2) 0 var(--e2); padding-left: var(--e3);
  border-left: 1px solid var(--accent); color: var(--encre-douce); font-style: italic;
}
.fondement__meta { margin: 0; color: var(--encre-douce); font-size: .85rem; }
.qualification__regle { margin: var(--e1) 0 0; font-size: .88rem; color: var(--encre-douce); }

/* --- Page d'une échéance et d'une assemblée -------------------------------- */

.echeance-detail__entete { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); align-items: flex-start; justify-content: space-between; }
.carte--date { text-align: center; }
.grande-date { margin: 0; font-family: var(--titre); font-size: 1.9rem; font-weight: 400; line-height: 1.2; }
.base-legale { font-weight: 600; margin-bottom: var(--e2); }
.instructions p { margin: 0 0 var(--e2); }
.portails { list-style: none; margin: var(--e3) 0 0; padding: 0; display: grid; gap: var(--e2); }
.portails li { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e3); align-items: center; }
.portails__quand { font-size: .88rem; color: var(--encre-douce); }
.preuves { list-style: none; margin: 0 0 var(--e3); padding: 0; display: grid; gap: var(--e2); }
.preuves li { padding-bottom: var(--e2); border-bottom: 1px solid var(--trait); }
.preuves__meta { display: block; font-size: .85rem; color: var(--encre-douce); }
.depot { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; }
.depot input[type="file"] { flex: 1 1 14rem; min-width: 0; font: inherit; }
.empreinte { font-size: .85rem; word-break: break-all; }
.apres-liste { margin: var(--e3) 0 0; }
.sans-marge { margin: 0; }

/* Les seuils du CSA : une liste de valeurs à comparer, alignées pour être lues
   ligne à ligne contre ses propres chiffres. */
.seuils { list-style: none; margin: 0 0 var(--e3); padding: 0; display: grid; gap: .2rem; }
.seuils li { display: flex; flex-wrap: wrap; gap: .35rem; }
.seuils strong { font-variant-numeric: tabular-nums; }
.liste-encart { margin: var(--e1) 0 0; padding-left: 1.1rem; }

/* Bascule de langue : un sélecteur discret dans le bandeau, pas un drapeau —
   la Belgique en a trois et aucun ne désigne une langue. */
.langue { margin: 0; }
.langue select {
  font: inherit; font-size: .9rem; color: var(--encre-douce);
  background: var(--surface); border: 1px solid var(--trait);
  border-radius: var(--rayon); padding: .3rem .5rem; min-height: 2.2rem;
}

/* Visible des seuls lecteurs d'écran. Une colonne de boutons « Retirer » n'a
   pas besoin d'un titre à l'écran, mais un tableau dont une colonne n'a pas
   d'en-tête est illisible en navigation vocale (WCAG 2.1 AA, section 8). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Pagination du coffre-fort. Les cibles font 44 px de haut : le public est âgé
   et tout doit rester utilisable au doigt (section 10.2). */
.pagination {
  display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4);
  align-items: center; justify-content: center;
  margin-top: var(--e4); color: var(--encre-douce); font-size: .9rem;
}
.pagination a { display: inline-flex; align-items: center; min-height: 44px; }
.point__outils { display: flex; gap: var(--e1); flex-wrap: wrap; }
.point__outils form { margin: 0; }

/* --- Téléphone ------------------------------------------------------------
   « Tout doit être utilisable sur un téléphone » (section 10.2) : le
   secrétaire consulte ses rappels dessus, et le public est âgé. */

@media (max-width: 30rem) {
  body { font-size: 15px; }
  h1 { font-size: 1.7rem; }
  h2 { font-size: 1.25rem; margin-top: var(--e6); }

  .contenu { padding: var(--e4) var(--e3) var(--e8); }
  .carte { padding: var(--e3); border-radius: 0; margin-left: calc(var(--e3) * -1); margin-right: calc(var(--e3) * -1); }
  .grande-date { font-size: 1.5rem; }

  .bandeau__interieur { padding: var(--e2) var(--e3); gap: var(--e2) var(--e3); }
  .bandeau__nav {
    order: 3; width: 100%; gap: var(--e4);
    overflow-x: auto; scrollbar-width: none; padding-bottom: .15rem;
    -webkit-overflow-scrolling: touch;
  }
  .bandeau__nav::-webkit-scrollbar { display: none; }
  .bandeau__nav a:not(.bouton) { white-space: nowrap; }
  .bandeau__compte { margin-left: auto; gap: var(--e2); }
  .selecteur ul { position: fixed; left: .75rem; right: .75rem; min-width: 0; }

  /* La bascule de langue est dans cette liste depuis la recette du 8 septembre :
     elle en était absente et tombait à 35 px, sous le minimum de 44. C'est le
     seul contrôle du bandeau qu'un utilisateur touche vraiment, et le public
     est âgé (section 10.2). */
  .bouton, .depot input[type="file"], .filtres select, .filtres input,
  .echeance__action input, .echeance__action select,
  .formulaire input, .formulaire select, .langue select { min-height: 2.75rem; }
  .bouton { width: 100%; text-align: center; }
  .bandeau__compte .bouton { width: auto; min-height: 2.25rem; }
  .actions { flex-direction: column; align-items: stretch; }
  .actions a { text-align: center; }

  .filtres { flex-direction: column; align-items: stretch; gap: var(--e1); }
  .echeance__entete { flex-direction: column; }
  .echeance__date { text-align: left; }
  .echeance__action { flex-direction: column; align-items: stretch; }
  .echeance__action input, .echeance__action select { width: 100%; }
  .depot { flex-direction: column; align-items: stretch; }
  .bandeau-alerte__interieur form { margin-left: 0; width: 100%; }

  .paires { grid-template-columns: 1fr; gap: .1rem; }
  .paires dt { margin-top: var(--e2); font-size: .85rem; }

  table { font-size: .92rem; }
  th, td { padding: var(--e2) var(--e1); }
  .messages { padding: 0 var(--e3); }
  .pied p { padding: var(--e3); }
}

/* --- Bloc-marque (écrans de connexion, inscription) ------------------------ */

.marque-bloc { display: inline-flex; align-items: center; gap: .875rem; }
.marque-bloc__sceau { display: block; border-radius: 5px; }
.marque-bloc__texte { display: flex; flex-direction: column; gap: .2rem; }
.marque-bloc__nom {
  font-family: var(--titre); font-weight: 400; font-size: 2.6rem;
  line-height: 1; letter-spacing: .02em; color: var(--encre);
}
.marque-bloc__sous {
  font-family: var(--texte); font-size: .53rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--encre-douce);
}
.marque-bloc--sombre .marque-bloc__nom { color: var(--fond); }
.marque-bloc--sombre .marque-bloc__sous { color: var(--neutre-400); }

.accueil-marque { margin: var(--e6) 0 var(--e8); }


/* --- Vues tableau pleine largeur (module de comptabilité) -----------------
   Un livre comptable ne tient pas dans la colonne de lecture de 62rem : on
   l'élargit pour cette famille d'écrans, et pour elle seule. Le reste du
   produit garde sa largeur de lecture, qui est faite pour du texte. */
.contenu--large { max-width: 96rem; }

/* Tableau où chaque ligne est un formulaire : la saisie et la correction se
   font au même endroit, sans quitter l'écran ni ouvrir de fenêtre. */
.tableau-saisie { width: 100%; border-collapse: collapse; }
.tableau-saisie th {
  text-align: left; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--encre-douce); font-weight: 600;
  padding: var(--e1) var(--e2); border-bottom: 1px solid var(--trait);
}
.tableau-saisie td { padding: var(--e1) var(--e2); border-bottom: 1px solid var(--trait); }
.tableau-saisie tr:hover td { background: var(--neutre-100); }
.tableau-saisie input[type="text"],
.tableau-saisie input[type="date"],
.tableau-saisie select,
.tableau-saisie textarea {
  width: 100%; min-width: 0; padding: .3rem .4rem; font-size: .92rem;
}
.tableau-saisie .nombre { text-align: right; }
.tableau-saisie .nombre input { text-align: right; }
.tableau-saisie tr.ligne-neuve td { background: var(--neutre-100); }
.tableau-saisie tfoot td { font-weight: 600; border-top: 2px solid var(--encre); }
/* Les erreurs d'une ligne s'affichent sous elle, pas en tête d'écran : sur
   trente lignes, un message global n'apprend pas laquelle est fautive. */
.tableau-saisie .erreur-ligne { color: var(--alerte); font-size: .82rem; }
.barre-actions {
  display: flex; gap: var(--e3); align-items: center; flex-wrap: wrap;
  margin: var(--e3) 0;
}
@media (max-width: 60rem) {
  /* Sur téléphone, le tableau défile horizontalement (`.tableau-defilant`,
     déjà défini plus haut) plutôt que d'écraser ses colonnes : « tout doit
     être utilisable sur un téléphone ». */
  .tableau-saisie { min-width: 52rem; }
}