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


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


/* ------------------------------------------------------------------
   formulaire de devis reprend toute la largeur

   Le bandeau du haut est bati sur deux colonnes l-6 : une colonne
   d'image a gauche, le formulaire de devis a droite. Sur les pages
   regionales la colonne de gauche est vide — elle ne porte que le
   commentaire « Change the background image » du gabarit —, si bien que
   le formulaire restait sur une moitie de page, l'autre etant blanche.

   La regle ne vise que ce cas : une colonne l-6, dans un header, sans
   aucun element a l'interieur. Sur la page d'accueil, ou cette colonne
   porte de vraies images, les deux colonnes sont conservees.
   ------------------------------------------------------------------ */

header .line > .l-6:not(:has(*)) {
	display: none;
}

header .line > .l-6:not(:has(*)) + .l-6 {
	width: 100%;
}