/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/
/* ------------------------------------------------------------------ */
/* Liste à pictogrammes, dans le contenu des articles                  */
/* À ajouter au CSS de la classe ar-body, gabarit Article.             */
/* ------------------------------------------------------------------ */

.ar-body .ar-liste-icones{
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
}

.ar-body .ar-liste-icones li{
  display: flex;
  align-items: center;          /* picto et texte alignés sur le même axe */
  column-gap: 15px;
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--gris-l);
  font-size: 16.5px;
  line-height: 1.6;
  color: #2B3648;
}
.ar-body .ar-liste-icones li:last-child{ border-bottom: 0; }

/* la puce carrée de ar-body ne doit pas s'ajouter au picto */
.ar-body .ar-liste-icones li::before{ content: none; }

.ar-body .ar-liste-icones i{
  flex: none;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--brume);
  color: var(--safran);
  font-size: 16px;
  line-height: 1;
}

/* sur deux lignes, le picto reste en haut plutôt qu'au milieu du bloc */
.ar-body .ar-liste-icones li span{ flex: 1; min-width: 0; }

@media(max-width: 767px){
  .ar-body .ar-liste-icones li{ font-size: 15px; column-gap: 12px; padding: 12px 0; }
  .ar-body .ar-liste-icones i{ width: 34px; height: 34px; font-size: 15px; }
}

/* ------------------------------------------------------------------ */
/* Citations                                                           */
/* Couvre le bloc Citation de Gutenberg, avec ou sans attribution.     */
/* ------------------------------------------------------------------ */

.ar-body blockquote,
.ar-body .wp-block-quote,
.ar-body .wp-block-pullquote{
  position: relative;
  margin: 34px 0;
  padding: 28px 32px 28px 34px;
  border: 0;
  border-left: 3px solid var(--safran-vif);
  border-radius: 0 14px 14px 0;
  background: var(--brume);
}

/* guillemet ouvrant, en filigrane */
.ar-body blockquote::before{
  content: "\201C";
  position: absolute;
  top: 6px;
  right: 22px;
  font-family: var(--display);
  font-size: 84px;
  line-height: 1;
  color: var(--safran);
  opacity: .14;
  pointer-events: none;
}

.ar-body blockquote p{
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(24px, 2.4vw, 29px);
  font-style: normal;
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -0.005em;
  color: var(--nuit);
}
.ar-body blockquote p + p{ margin-top: 12px; }

/* attribution */
.ar-body blockquote cite,
.ar-body blockquote .wp-block-quote__citation{
  display: block;
  margin-top: 14px;
  font-family: var(--sans);
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--gris);
}
.ar-body blockquote cite::before{ content: "— "; color: var(--safran); }

/* variante mise en avant */
.ar-body .wp-block-quote.is-style-large p,
.ar-body .wp-block-pullquote p{
  font-size: 24px;
  line-height: 1.35;
}

@media(max-width: 767px){
  .ar-body blockquote{ padding: 22px 22px 22px 24px; margin: 26px 0; }
  .ar-body blockquote p{ font-size: 21px; }
  .ar-body blockquote::before{ font-size: 60px; right: 14px; }
}

/* ------------------------------------------------------------------ */
/* Signature de fin d'article                                          */
/* ------------------------------------------------------------------ */

.ar-body .ar-signature{
  margin: 34px 0 0;
  padding: 22px 26px;
  border-left: 3px solid var(--safran-vif);
  border-radius: 0 12px 12px 0;
  background: var(--brume);
}
.ar-body .ar-signature strong{
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--nuit);
}
.ar-body .ar-signature span{
  display: block;
  margin-top: 5px;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--safran);
}