/* ------------------------------------------------------------------
   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 pose directement dans le <body> : la feuille lui donne
   elle-meme une largeur maximale et le centre. */
main[role="main"] article {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 15px;
  box-sizing: border-box;
}


/* ------------------------------------------------------------------
   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; }
}

/* La mention legale reprend une couleur lisible.
   « .text-muted » est un gris prevu pour du texte secondaire sur fond
   clair ; sur ce pied sombre il ne se lisait plus. */
footer .text-muted,
.footer .text-muted,
#footer .text-muted {
	/* Bootstrap ecrit « .text-muted{color:#868e96!important} » :
	   sans « important » a notre tour, la regle ne passerait pas. */
	color: rgba(255, 255, 255, 0.78) !important;
}


/* ------------------------------------------------------------------
   chapeau et zones geographiques (1/2)

   Le chapeau, paragraphe d'accroche place sous le titre, sortait a la
   meme taille que le corps de texte. Il doit s'en detacher.
   ------------------------------------------------------------------ */

/* En pixels, et non en rem : plusieurs de ces gabarits posent
   html { font-size: 10px } dans bootstrap.css, ou 1 rem ne vaut donc
   que 10 px. C'est ce qui rendait le chapeau minuscule. */

.text-size-16 { font-size: 16px; line-height: 1.6; }
.text-size-12 { font-size: 13px; line-height: 1.5; }

.line > p.text-size-16 {
	font-size: 18px;
	line-height: 1.65;
}

@media (max-width: 600px) {
	.line > p.text-size-16 { font-size: 17px; }
}