/* ==========================================================================
   blogia - style du blog cote visiteur.

   Volontairement sobre et NEUTRE EN COULEUR : le blog s insere dans le theme
   de la boutique, quel qu il soit. Aucune couleur de fond, aucune couleur de
   texte, aucune police ne sont imposees - elles viennent du theme. Un module
   qui peindrait ses propres couleurs paraitrait juste sur le theme classique
   et etranger sur tous les autres.

   Seules exceptions : les bordures et les nuances de gris, exprimees en
   currentColor avec une transparence. Elles suivent donc la couleur du texte
   du theme, en clair comme en sombre, sans qu aucune regle
   prefers-color-scheme ne soit necessaire.
   ========================================================================== */

.blogia {
    margin: 0 0 32px 0;
}

/* --- Rubriques ----------------------------------------------------------- */

.blogia__rubriques {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 26px 0;
}

.blogia__rubrique {
    display: inline-block;
    padding: 6px 13px;
    border: 1px solid;
    border-color: currentColor;
    border-radius: 16px;
    text-decoration: none;
    font-size: 14px;
    opacity: 0.85;
}

.blogia__rubrique:hover {
    opacity: 1;
    text-decoration: none;
}

.blogia__compte {
    display: inline-block;
    margin-left: 5px;
    font-size: 12px;
    opacity: 0.65;
}

/* --- Grille d articles --------------------------------------------------- */

.blogia__grille {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    margin: 0 0 30px 0;
}

.blogia__carte {
    flex: 1 1 280px;
    /* Les deux bornes coexistent ici SANS se contredire parce que min < max.
       L inverse - un min-width superieur au max-width - donnerait une carte
       qui ignore silencieusement sa borne haute : min-width l emporte
       toujours. La borne haute existe pour qu un article seul ne s etale pas
       sur toute la largeur de l ecran, ou plus personne ne lit la ligne. */
    min-width: 260px;
    max-width: 420px;
    display: flex;
    flex-direction: column;
}

.blogia__vignette {
    display: block;
    margin: 0 0 12px 0;
}

.blogia__vignette img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
}

.blogia__corps {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.blogia__titre {
    font-size: 19px;
    line-height: 1.35;
    margin: 0 0 6px 0;
}

.blogia__titre a {
    text-decoration: none;
}

.blogia__meta {
    font-size: 13px;
    opacity: 0.7;
    margin: 0 0 8px 0;
}

.blogia__resume {
    margin: 0 0 12px 0;
    flex: 1 1 auto;
}

.blogia__lien {
    align-self: flex-start;
    text-decoration: underline;
}

/* --- Article -------------------------------------------------------------- */

.blogia--article .blogia__image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    margin: 0 0 22px 0;
}

.blogia__chapo {
    font-size: 18px;
    line-height: 1.6;
    margin: 0 0 24px 0;
    opacity: 0.9;
}

/* Le corps de l article est le seul endroit ou le module impose un rythme :
   un texte long a besoin d une mesure et d un interlignage, et beaucoup de
   themes n en prevoient pas pour du contenu de module. */
.blogia__contenu {
    max-width: 42em;
    line-height: 1.7;
}

.blogia__contenu h2 {
    font-size: 24px;
    line-height: 1.3;
    margin: 34px 0 12px 0;
}

.blogia__contenu h3 {
    font-size: 19px;
    line-height: 1.35;
    margin: 26px 0 10px 0;
}

.blogia__contenu p {
    margin: 0 0 17px 0;
}

.blogia__contenu ul,
.blogia__contenu ol {
    margin: 0 0 17px 0;
    padding-left: 24px;
}

.blogia__contenu li {
    margin: 0 0 7px 0;
}

.blogia__contenu blockquote {
    margin: 22px 0;
    padding: 2px 0 2px 18px;
    border-left: 3px solid;
    border-left-color: currentColor;
    opacity: 0.85;
}

.blogia__contenu a {
    text-decoration: underline;
}

.blogia__contenu img {
    max-width: 100%;
    height: auto;
}

/* --- Etiquettes ----------------------------------------------------------- */

.blogia__etiquettes {
    margin: 30px 0;
}

.blogia__etiquette {
    display: inline-block;
    padding: 3px 11px;
    margin: 0 6px 6px 0;
    border: 1px solid;
    border-color: currentColor;
    border-radius: 13px;
    font-size: 13px;
    text-decoration: none;
    opacity: 0.75;
}

a.blogia__etiquette:hover {
    opacity: 1;
    text-decoration: none;
}

/* --- Pagination ----------------------------------------------------------- */

.blogia__pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin: 30px 0;
    padding: 16px 0;
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-color: currentColor;
}

.blogia__page {
    text-decoration: underline;
}

.blogia__page-courante {
    font-size: 14px;
    opacity: 0.7;
}

/* --- Divers ---------------------------------------------------------------- */

.blogia__sous-titre {
    font-size: 21px;
    margin: 36px 0 16px 0;
}

.blogia__lies {
    margin: 40px 0 0 0;
    padding: 24px 0 0 0;
    border-top: 1px solid;
    border-top-color: currentColor;
}

.blogia__vide {
    padding: 40px 0;
    text-align: center;
    opacity: 0.7;
}

.blogia__retour,
.blogia__flux {
    margin: 30px 0 0 0;
}

.blogia__intro {
    margin: 0 0 26px 0;
    max-width: 42em;
}

.blogia-pied {
    margin: 10px 0;
}

@media (max-width: 600px) {
    .blogia__carte { min-width: 100%; }
    .blogia__contenu h2 { font-size: 21px; }
}