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

   Les pages regionales utilisent une grille (line / margin / s-12 m-12
   l-4 l-6) heritee d'un autre gabarit, dont les regles n'existaient pas
   dans la feuille de style du site. Sans elles, les colonnes ne se
   placent pas cote a cote et le contenu s'affiche pleine largeur, sans
   marge ni respiration. Ce fichier retablit ces regles.
   ------------------------------------------------------------------ */

main[role="main"] article {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 14px;
}

.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 {
  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; }

.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; }

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

.margin iframe { max-width: 100%; border: 0; }

/* Tablette */
@media (min-width: 768px) {
  .m-12 { width: 100%; }
  .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%; }   /* deux colonnes de contenu : moitie-moitie */
  .margin-m-bottom { margin-bottom: 0; }
}

/* Les blocs de contenu gardent de l'air entre eux */
.margin > .l-4 > h2:first-child,
.margin > .l-4 > h3:first-child { margin-top: 0; }

.margin > .l-4 h2 { margin-top: 1.75rem; }
.margin > .l-4 h3 { margin-top: 1.25rem; }
.margin > .l-4 p  { margin-bottom: 1rem; }

/* ------------------------------------------------------------------
   Reglages propres au gabarit du site : la colonne laterale passe en
   pied de page et la zone editoriale occupe toute la largeur utile.
   ------------------------------------------------------------------ */
main[role="main"] { display: block; order: 1; }
main[role="main"] article > .line { margin-bottom: 1rem; }
main[role="main"] header.section { padding: 0 0 1rem; }
main[role="main"] iframe { width: 100%; }
main[role="main"] h2, main[role="main"] h3 { clear: none; }
@media (max-width: 991px) { main[role="main"] .padding-2x { padding: 1rem 0; } }