/* ==========================================================================
   GLAMWEL LABORATOIRES - Page editoriale (page_contenu)
   Titre, visuel d'en-tete facultatif, puis le HTML de l'editeur du
   back-office, dans une colonne de lecture.
   ========================================================================== */

/* Le header est opaque (page-solid-header) : le contenu commence dessous. */
.contenu-page { padding-top: calc(var(--header-height) + 64px); }

.contenu-container { max-width: 860px; }

.contenu-entete { margin-bottom: 36px; }

.contenu-visuel {
  margin-bottom: 40px;
  overflow: hidden;
  background: #e5ded4;
}

.contenu-visuel img {
  width: 100%;
  height: auto;
}

/* Texte riche : rien ne garantit la forme saisie dans l'editeur, d'ou des
   regles sur les balises courantes plutot que sur des classes. */
.contenu-texte {
  color: #4f4a44;
  font-size: 15px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.contenu-texte > * + * { margin-top: 18px; }

.contenu-texte h2,
.contenu-texte h3,
.contenu-texte h4 {
  margin-top: 36px;
  color: var(--black);
  font-weight: 600;
  line-height: 1.3;
}

.contenu-texte h2 { font-size: 22px; }
.contenu-texte h3 { font-size: 18px; }
.contenu-texte h4 { font-size: 15px; }

.contenu-texte ul,
.contenu-texte ol { padding-left: 20px; }

.contenu-texte ul { list-style: disc; }
.contenu-texte ol { list-style: decimal; }

.contenu-texte li + li { margin-top: 7px; }
.contenu-texte li::marker { color: var(--gold); }

.contenu-texte b,
.contenu-texte strong { color: var(--black); font-weight: 600; }

.contenu-texte a {
  color: var(--black);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 250ms ease;
}

.contenu-texte a:hover { color: var(--gold); }

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

.contenu-texte table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.contenu-texte th,
.contenu-texte td {
  padding: 10px 12px;
  border: 1px solid var(--line);
  text-align: left;
}

@media (min-width: 1120px) {
  .contenu-page { padding-top: calc(var(--header-height) + 88px); }
  .contenu-texte { font-size: 16px; }
}
