/*
 * Mise en page des articles écrits par les clients dans leur dashboard Avyrel (onglet « Mon site »).
 * Chargée par chaque site client (<link rel="stylesheet" href="https://avyrel.app/avyrel-contenu.css">) et par
 * l'aperçu du dashboard. Ne touche qu'aux classes av-* : la typographie (polices, couleurs) reste celle du site.
 */
.av-colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5em; margin: 1.5em 0; }
.av-colonnes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.av-colonne > :first-child { margin-top: 0; }
.av-colonne > :last-child { margin-bottom: 0; }
@media (max-width: 720px) { .av-colonnes, .av-colonnes--3 { grid-template-columns: 1fr; } }

.av-encadre { margin: 1.5em 0; padding: 1.1em 1.3em; border-radius: 14px; border-left: 4px solid currentColor; background: rgba(127, 127, 127, 0.08); }
.av-encadre > :first-child { margin-top: 0; }
.av-encadre > :last-child { margin-bottom: 0; }
.av-encadre--info { border-left-color: #4f7ab3; background: rgba(79, 122, 179, 0.1); }
.av-encadre--conseil { border-left-color: #3f8f5a; background: rgba(63, 143, 90, 0.1); }
.av-encadre--attention { border-left-color: #c58a12; background: rgba(197, 138, 18, 0.12); }

.av-img { display: block; height: auto; max-width: 100%; border-radius: 12px; margin: 1.5em auto; }
.av-img--pleine { width: 100%; }
.av-img--moyenne { width: 66%; }
.av-img--petite { width: 40%; }
.av-img--gauche { float: left; margin: 0.3em 1.5em 1em 0; }
.av-img--droite { float: right; margin: 0.3em 0 1em 1.5em; }
.av-img--centre { float: none; margin-left: auto; margin-right: auto; }
@media (max-width: 720px) {
  .av-img--gauche, .av-img--droite { float: none; margin: 1.2em auto; }
  .av-img--moyenne, .av-img--petite { width: 100%; }
}
.av-colonnes::after, .av-encadre::after { content: ""; display: table; clear: both; }

a.av-bouton { display: inline-block; padding: 0.7em 1.4em; border-radius: 999px; background: #111; color: #fff !important; text-decoration: none !important; font-weight: 600; }
a.av-bouton:hover { opacity: 0.88; }

mark { padding: 0 0.15em; border-radius: 3px; }
hr { clear: both; }