/* les brèves juridiques : vignette dessinée, page d'article, archive */

/* ---------- la vignette d'une brève ----------
   Sur les cinquante et un articles repris de l'ancien site, quarante-quatre
   n'avaient aucune image. Plutôt qu'une même photo répétée quarante-quatre
   fois, chaque brève porte un aplat aux couleurs du DJCE, son année en gros
   chiffres et un motif — douze combinaisons, tirées de son adresse. C'est du
   dessin : quelques centaines d'octets, net sur tous les écrans, rien à
   télécharger et rien à redimensionner le jour où la grille change. */
.breve-vue{display:block;width:100%;aspect-ratio:3/4}
/* Pas de zoom au survol, contrairement à la couverture de la Gazette : celle-ci
   est un lien, la vignette d'une brève n'en est pas un. Une image qui bouge
   sous la souris promet un clic qu'elle ne tient pas. */
.breve .publication-couverture{display:block;overflow:hidden}

/* ---------- la page d'une brève ----------
   Un texte de mille mots se lit à soixante-dix signes par ligne, pas sur toute
   la largeur de l'écran. Le corps est donc borné, et non centré : il reste
   aligné sur le titre et sur le reste du site. */
.breve-tete h1{max-width:30ch}
.breve-date{margin:18px 0 0;font-family:Montserrat,sans-serif;font-size:11.5px;
  font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.breve-corps{max-width:72ch}
.breve-corps p{margin:0 0 22px;font-size:16.6px;line-height:1.8;color:var(--ink);
  text-align:justify;hyphens:auto}
.breve-corps h2{margin:42px 0 16px;font-size:25px;font-weight:400;line-height:1.3}
.breve-corps ul{margin:0 0 22px;padding-left:22px}
.breve-corps li{margin-bottom:9px;font-size:16.4px;line-height:1.78;color:var(--ink)}
.breve-corps a{color:var(--crimson);border-bottom:1px solid rgba(194,3,25,.35);
  transition:border-color .22s ease}
.breve-corps a:hover{border-bottom-color:var(--crimson)}
.breve-corps img{margin:28px 0;border:1px solid var(--line)}
/* Les appels de note de l'ancien site ne mènent nulle part : leurs cibles
   manquaient déjà là-bas. On garde le repère, discret, sans faire croire à un
   lien. */
.breve-corps sup{font-size:.72em;color:var(--muted);padding-left:1px}
.breve-pdf{display:flex;flex-wrap:wrap;gap:10px;margin:34px 0 0}
.breve-retour{margin:52px 0 0;padding-top:26px;border-top:1px solid var(--line)}
.breve-retour a{font-size:14.5px;font-weight:600;color:var(--crimson);
  border-bottom:1px solid currentColor;padding-bottom:2px}
.breve-retour a::before{content:"\2190  "}

/* ---------- l'archive ----------
   Cinquante vignettes n'apprendraient rien de plus que cinquante titres, et
   demanderaient dix écrans. L'archive est une liste, groupée par année : on y
   cherche un sujet, on ne la parcourt pas. */
.breves-archive{max-width:none}
.breves-annee{margin:0 0 18px;font-family:Montserrat,sans-serif;font-size:12px;
  font-weight:600;letter-spacing:.18em;color:var(--crimson);
  padding-bottom:14px;border-bottom:1px solid var(--line)}
.breves-annee + .breves-liste{margin-bottom:52px}
.breves-liste{list-style:none;margin:0;padding:0}
.breves-liste li{border-bottom:1px solid var(--line)}
.breves-liste a{display:grid;grid-template-columns:168px 1fr;gap:10px 26px;
  align-items:baseline;padding:17px 12px 17px 0;
  transition:background .22s ease,padding-left .22s ease}
.breves-liste a:hover{background:var(--stone-soft);padding-left:12px}
.breves-date{font-family:Montserrat,sans-serif;font-size:11.5px;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.breves-titre{font-family:Spectral,Georgia,serif;font-size:18.5px;line-height:1.38;
  transition:color .22s ease}
.breves-liste a:hover .breves-titre{color:var(--crimson)}
@media (max-width:700px){
  .breves-liste a{grid-template-columns:1fr;gap:6px}
  .breves-titre{font-size:17px}
  .breve-corps p{text-align:left;hyphens:manual}
}