/* ------------------------------------------------------------------
   Grille du contenu editorial.

   Les pages de devis emploient une grille (line / margin / s-12 m-12
   l-4 l-6) heritee d'un autre gabarit, dont les regles manquaient dans
   la feuille de style du site. Sans elles, les colonnes ne se placent
   pas cote a cote et le texte s'affiche pleine largeur, sans marge.
   ------------------------------------------------------------------ */

.line { width: 100%; margin: 0 auto; }

.line::after,
.margin::after { content: ""; display: table; clear: both; }

.margin { margin-left: -15px; margin-right: -15px; }

.s-12, .m-12, .l-4, .l-6, .l-12 {
  float: left;
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}

.section { display: block; padding: 2rem 0; }
.background-white { background-color: #fff; }
.padding-2x { padding: 2rem; }
.text-center { text-align: center; }

.margin-bottom   { margin-bottom: 1.5rem; }
.margin-bottom-0 { margin-bottom: 0; }

.text-size-16 { font-size: 1rem; line-height: 1.6; }
.text-size-12 { font-size: .8125rem; line-height: 1.5; }
.text-dark    { color: #333; }

.margin img, .line img { max-width: 100%; height: auto; }
.margin iframe { max-width: 100%; border: 0; }

@media (min-width: 768px) {
  .margin-m-bottom { margin-bottom: 2rem; }
}

/* Ecran large : les colonnes se placent cote a cote */
@media (min-width: 992px) {
  .l-6 { width: 50%; }
  .l-4 { width: 50%; }
  .margin-m-bottom { margin-bottom: 0; }
}

/* De l'air entre les blocs de contenu */
.margin > div > h2:first-child,
.margin > div > h3:first-child { margin-top: 0; }
.margin > div h2 { margin-top: 1.75rem; }
.margin > div h3 { margin-top: 1.25rem; }
.margin > div p  { margin-bottom: 1rem; }

/* Le <main> est deja place dans un conteneur du site : on ne lui impose
   pas de largeur, seulement la grille. */
main[role="main"] article { max-width: 100%; }


/* ------------------------------------------------------------------
   UNE SEULE COLONNE DE CONTENU

   Les blocs l-4 et l-6 passaient a 50 % au-dela de 992 px, ce qui
   affichait le contenu sur deux colonnes. Ils reprennent ici toute la
   largeur : le texte se lit d'un seul tenant, du haut vers le bas.
   ------------------------------------------------------------------ */
@media (min-width: 992px) {
  .l-4, .l-6, .l-12 { width: 100%; }
  .margin-m-bottom { margin-bottom: 2rem; }
}