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


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


/* ==================================================================
   ESPACE SOUS LA BARRE DE NAVIGATION, ET LARGEUR DU CONTENU
   26/09/2026

   La barre de navigation est en position fixe. Sur les pages du
   gabarit d'origine, l'image de bandeau reservait la hauteur, mais les
   pages de devis commencent directement par leur contenu, qui passait
   donc sous la barre. Le bloc principal de ces pages recoit desormais
   l'espace correspondant.

   Ces memes pages n'etaient pas placees dans un conteneur, leur texte
   s'etalait sur toute la largeur de l'ecran. Elles recoivent une
   largeur maximale et des marges laterales.
   ================================================================== */

#mainNav ~ main[role="main"] {
	display: block;
	padding-top: 86px;
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 28px;
	padding-right: 28px;
	box-sizing: border-box;
}

@media (max-width: 992px) {
	#mainNav ~ main[role="main"] {
		padding-top: 74px;
		padding-left: 16px;
		padding-right: 16px;
	}
}