/* ==========================================================================
   Numbers - gabarit d'article (/blog/<slug>)
   Valeurs relevees dans la verite terrain : blogA-1440/900/375 (article avec
   couverture), blogB-1440 (couverture + images de corps), blogC-1440 (article
   sans couverture ni auteur).
   ========================================================================== */

/* ------------------------------------------------------------- la section */

/* L'original ecrit padding: 10vh 7% 5vh, puis remonte le haut a 20vh sur la
   variante "espace supplementaire" que portent toutes les fiches d'article.
   Les vh sont indispensables : a 1440x900 cela donne 180px en haut et 45px en
   bas, valeurs qui derivent des que la fenetre change de hauteur, exactement
   comme sur le site d'origine. */
.article {
  padding-top: 20vh;
  padding-bottom: 5vh;
  overflow: hidden;
}

/* Deux colonnes 35 / 65 qui remplissent la largeur utile : la repartition
   space-around de l'original ne laisse aucun reste, elle est donc sans effet
   visible, mais on la garde pour rester fidele au comportement si un jour une
   colonne retrecit. */
.article__grille {
  display: flex;
  justify-content: space-around;
  width: 100%;
}

.article__aside {
  width: 35%;
}

.article__colonne {
  width: 65%;
}

/* ------------------------------------------------- colonne de gauche : fil */

/* Le sommaire de l'original est mesure en 0x0 : ses cinq liens sont vides et le
   bloc est en position fixed. Il n'est donc pas reconstruit, seuls restent les
   deux espaceurs qui le suivaient. */

.article__fil {
  display: flex;
  justify-content: flex-start;
}

.article__fil-lien {
  max-width: 100%;
  text-decoration: none;
}

/* Blanc sur fond blanc : le fil "Blog /" et la date sont invisibles dans
   l'original (classe prevue pour un fond sombre, jamais corrigee). Verifie au
   pixel sur truth/blogA-1440.png, la zone est vierge. On reproduit tel quel. */
.article__fil-texte {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: auto;
  margin-bottom: 0;
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  text-align: left;
  text-decoration: none;
}

.article__fil-cat {
  padding-left: 10px;
  color: var(--ink-strong);
}

/* Les 31 articles sans categorie gardent le noeud dans le DOM, masque. */
.article__fil-cat--vide {
  display: none;
}

/* -------------------------------------------- colonne de droite : chapeau */

.article__date {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: auto;
  margin-bottom: 10px;
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  text-align: left;
}

.article__titre {
  margin: 0;
  padding: 0;
  color: var(--ink-strong);
  font-family: var(--font-titre-blog);
  font-size: 45px;
  font-weight: 500;
  line-height: 1;
  text-align: left;
  -webkit-text-stroke-width: 0;
  -webkit-text-stroke-color: var(--ink-strong);
}

.article__auteur {
  display: flex;
  align-items: flex-start;
}

/* Pastille ronde sans visuel : l'original pose background-image: none en
   attribut de style sur toutes les fiches. Elle occupe malgre tout 40px et
   fixe la hauteur du bloc auteur quand le nom est absent. */
.article__avatar {
  width: 40px;
  height: 40px;
  border-radius: 100px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
}

/* Element flex, donc contexte de formatage a lui seul : la marge basse de la
   fonction ne s'echappe pas et le bloc mesure 50px, pas 40px. */
.article__auteur-txt {
  padding-left: 10px;
}

.article__auteur-nom {
  margin-bottom: 0;
  color: var(--ink-strong);
  font-family: var(--font-sans);
}

.article__auteur-role {
  color: var(--white);
  font-family: var(--font-sans);
}

.article__auteur-nom--vide,
.article__auteur-role--vide {
  display: none;
}

/* ---------------------------------------------------------- la couverture */

/* Bloc toujours rendu, avec ou sans visuel : sur les 31 articles sans
   couverture l'original garde la meme boite de 805x400, simplement vide.
   L'image, quand elle existe, arrive en style en ligne depuis le generateur. */
.article__visuel {
  width: 100%;
  height: 400px;
  border-radius: var(--r-lg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

/* ------------------------------------------------------------ le corps */

.article__contenu {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 30px;
}

/* Les deux boites de table ferment le contexte de formatage : sans elles la
   marge haute d'un h3 en tete de corps et la marge basse du dernier
   paragraphe s'echapperaient du bloc et decaleraient tout de 20px. */
.article__contenu::before,
.article__contenu::after {
  content: " ";
  display: table;
}

/* Une liste imbriquee garde sa marge basse : le debordement masque empeche
   la fusion des marges, d'ou les 130px mesures sur la liste de blogB. */
.article__contenu ul,
.article__contenu ol {
  overflow: hidden;
}

/* base.css ne porte que la marge de blockquote : le filet, le retrait et la
   typo de citation sont propres au corps d'article. */
.article__contenu blockquote {
  padding: 10px 20px;
  border-left: 5px solid #e2e2e2;
  font-size: 18px;
  line-height: 22px;
}

/* Liens et boutons du corps gardent la forme par defaut du navigateur, comme
   dans l'original : souligne pour les liens, fond gris clair sans bordure
   pour les boutons. Seule la couleur change : le bleu de lien par defaut
   etait la derniere teinte hors palette du site. Le vert la remplace, comme
   sur la page de politique de confidentialite, et tient 7,8 pour 1 sur le
   blanc du corps d'article. */
.article__contenu a {
  color: var(--vert-texte);
  text-decoration: underline;
}

.article__contenu button {
  margin: 0;
  padding: 1px 6px;
  border: 0;
  background-color: #efefef;
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
}

/* Images de corps : la largeur vient de l'attribut width="600" du contenu,
   la hauteur suit le rapport naturel et l'image se contient dans la colonne
   des que celle-ci passe sous 600px. */
.article__contenu .body-img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/* -------------------------------------------------- points de rupture */

@media (min-width: 1920px) {
  .article__contenu {
    font-size: 18px;
    line-height: 35px;
  }
}

@media (max-width: 991px) {
  .article__grille {
    flex-direction: column;
  }

  .article__aside,
  .article__colonne {
    width: 100%;
  }

  .article__contenu {
    color: #000;
  }
}

@media (max-width: 767px) {
  .article__titre {
    font-size: 40px;
  }
}

@media (max-width: 479px) {
  .article__titre {
    font-size: 23px;
    line-height: 1.2;
    -webkit-text-stroke-width: 0.5px;
  }

  .article__visuel {
    height: 250px;
  }
}