/**
 * Bloc « Encart coloré ».
 *
 * Un bandeau à fond de rubrique, en deux colonnes égales : le titre à
 * gauche, encadré de pastilles, le texte à droite, précédé de chevrons
 * et fermé par un filet pointillé. Un bec de la charte en fond, qui
 * déborde par le bas.
 *
 * Mesures relevées sur la maquette d'origine.
 */

.encart {
  --encart-reserve-h: 50px;
  --encart-reserve-v: 20px;

  /* La gouttière entre les deux colonnes : elle tient un titre long à
     distance des chevrons d'en face. */
  --encart-gouttiere: 20px;

  /* Le bec : sa largeur, l'abscisse de son centre, et la hauteur de son
     bord haut au-dessus du bord bas du bloc. Trois valeurs, un seul
     endroit — voir la règle .encart__bec plus bas. */
  --encart-bec-largeur: 182px;
  --encart-bec-x: 44%;
  --encart-bec-y: 158px;

  position: relative;
  display: grid;
  gap: 0 var(--encart-gouttiere);
  margin-block: var(--e-section);
  padding: var(--encart-reserve-v) var(--encart-reserve-h);

  /* Le bec déborde par le bas : c'est la section qui le recadre. */
  overflow: hidden;
  background-color: var(--couleur-rubrique);

  /*
   * Tout est blanc sur l'aplat, quelle que soit la rubrique : c'est la
   * consigne arrêtée pour les fonds de couleur, tenue par une variable
   * unique. Y écrire --couleur-sur-rubrique restaurerait partout la
   * version lisible, sans rien toucher d'autre.
   */
  color: var(--couleur-sur-bulle);
}

@media (min-width: 62rem) {
  .encart { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------
 * Le bec en fond
 *
 * Son milieu est posé à 44 % du bord gauche, et son bord haut à 158 px
 * du bord bas ; large de 182, il descend donc 24 px sous le bloc, qui
 * le coupe. Le « translate » horizontal ramène l'ancrage sur le centre,
 * puisque c'est le centre que la maquette mesure de ce côté-là.
 *
 * La teinte est du blanc à 27 % sur l'aplat : c'est ce que donne le
 * relevé du rose de la maquette sur le rouge de la rubrique, et c'est
 * la seule façon d'obtenir une éclaircie juste pour les sept couleurs
 * sans en inventer sept autres.
 * --------------------------------------------------------------- */

.encart__bec {
  position: absolute;
  left: var(--encart-bec-x);
  bottom: calc(var(--encart-bec-y) - var(--encart-bec-largeur));
  translate: -50% 0;
  z-index: 0;
  width: var(--encart-bec-largeur);
  aspect-ratio: 1;
  background-color: currentcolor;
  opacity: 0.27;
  -webkit-mask-image: var(--bec-fichier);
  mask-image: var(--bec-fichier);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Le contenu passe devant le bec. Sans ce rappel, un élément resté dans
   le flux passerait sous un frère posé en absolu. */
.encart__titre,
.encart__corps {
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------------
 * Le titre, et ses deux pastilles
 *
 * Même construction que le titre des pages de rubrique : la pastille
 * d'ouverture est en débord, « padding-left » écarte le texte et
 * « text-indent » négatif ramène la première ligne dessus. Les deux
 * s'annulent sur la première ligne et les suivantes gardent le retrait.
 * --------------------------------------------------------------- */

.encart__titre {
  --encart-pastille: 15px;
  --encart-ecart: 14px;

  margin: 0;
  padding-left: calc(var(--encart-pastille) + var(--encart-ecart));
  text-indent: calc(-1 * (var(--encart-pastille) + var(--encart-ecart)));
  font-family: var(--police-titre);
  font-size: var(--t-rubrique);
  font-weight: var(--graisse-forte);
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: uppercase;
  color: inherit;
}

.encart__titre::before,
.encart__titre::after {
  content: "";
  display: inline-block;
  width: var(--encart-pastille);
  height: var(--encart-pastille);
  border-radius: var(--rayon-rond);
  background-color: currentcolor;
  vertical-align: middle;
}

.encart__titre::before { margin-right: var(--encart-ecart); }
.encart__titre::after  { margin-left: var(--encart-ecart); }

/* ---------------------------------------------------------------
 * Le corps : chevrons, puis texte et boutons
 *
 * Les chevrons tiennent une colonne à eux : le texte s'aligne sur son
 * propre bord et ne passe jamais sous le dessin. Le filet de fermeture
 * appartient au contenu et non au corps entier, pour qu'il fasse la
 * largeur du texte et non celle du texte plus les chevrons.
 * --------------------------------------------------------------- */

.encart__corps {
  --chevrons-largeur: 44px;
  --chevrons-ecart: 28px;

  display: grid;
  grid-template-columns: var(--chevrons-largeur) minmax(0, 1fr);
  column-gap: var(--chevrons-ecart);
  /*
   * Les rangées gardent la hauteur de leur contenu. Sans cela, la
   * colonne du texte s'étire sur la hauteur du bloc — que le titre,
   * plus long, peut fixer — et le filet de fermeture descend avec elle
   * au lieu de rester à 38 px de la dernière ligne.
   */
  align-content: start;
  font-size: var(--t-corps);
  line-height: 1.3;
}

.encart__corps::before {
  grid-column: 1;
  grid-row: 1;
  background-color: currentcolor;
}

.encart__contenu {
  grid-column: 2;
  padding-bottom: 38px;
  border-bottom: 2px dotted currentcolor;
}

.encart__texte > :first-child { margin-top: 0; }
.encart__texte > :last-child { margin-bottom: 0; }
.encart__texte p + p { margin-top: var(--e-2xs); }

/* Sous la rupture, le titre et le corps se suivent. */
@media (max-width: 61.999rem) {
  .encart__corps { margin-top: var(--e-s); }
}