/* ==========================================================================
   PERIMETRE : uniquement body.sl-legacy-page.

   La classe est posee par mu-plugins/sunlouvre-refonte-assets.php. Elle
   EXCLUT les gabarits deja refaits par le proprio (accessoires et ses six
   fiches, projets pres de chez vous, avant-apres, visite virtuelle, blogue,
   nous joindre), ceux de la refonte, et les pages d'atterrissage.

   Pourquoi : ces pages ont des choix deliberes que des regles globales
   ecrasaient. Le titre de la page Accessoires est en Cormorant Garamond 300;
   mes regles le repassaient en futura 700 et detruisaient le travail. Quand
   une page est refaite, on ajoute son gabarit a la liste du mu-plugin et
   elle sort d'elle-meme de ce filet.
   ========================================================================== */

/* ==========================================================================
   Le CORPS des pages, dans la typographie de la refonte.
   25 septembre 2026.

   L'en-tete et le pied de page de la refonte sont deja sur tout le site
   (header.php / footer.php). Ce fichier s'occupe de ce qu'il y a entre les
   deux : titres, paragraphes, listes, liens, accordeons. Sans lui, chaque
   page gardait la typographie de l'ancien theme, et seul l'habillage avait
   change.

   Regles reprises telles quelles du prototype (prototype-accueil-v2) :
     corps        17 px / 1.65, futura 400
     paragraphe   17 px / 1.7,  70ch maximum, encre a 70 %
     titre        futura 400, l'accent en 700, interligne 1.12
     surtitre     Cormorant italique, couleur secondaire
     libelle      IBM Plex Mono, majuscules, 0.14em
     question     Cormorant, 20 a 24 px, filet dessous, + qui pivote

   Charge en DERNIER. Hors perimetre : les pages d'atterrissage
   publicitaires, qui gardent l'ancien habillage entier.
   ========================================================================== */

body.sl-legacy-page {
  --sl-content-measure: 70ch;
}

/* --------------------------------------------------------------------------
   1. Le texte courant

   Le probleme visible sur /garantie/ : des paragraphes sur toute la largeur
   de l'ecran, colles les uns aux autres. Un oeil ne suit pas une ligne de
   140 caracteres, et sans marge entre les paragraphes le texte devient un
   mur. On borne la mesure et on respire.
   -------------------------------------------------------------------------- */

body.sl-legacy-page .container_large p,
body.sl-legacy-page .container_med p,
body.sl-legacy-page .bloc_titre_texte p,
body.sl-legacy-page .texte p,
body.sl-legacy-page .description-wysiwig p {
  font-family: var(--sl-font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--sl-color-ink-70);
  max-width: var(--sl-content-measure);
  margin: 0 0 1.15em;
}

body.sl-legacy-page .container_large li,
body.sl-legacy-page .container_med li,
body.sl-legacy-page .texte li,
body.sl-legacy-page .description-wysiwig li {
  font-family: var(--sl-font-sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--sl-color-ink-70);
  max-width: var(--sl-content-measure);
  margin-bottom: 0.5em;
}

/* Un lien dans le texte : filet fin sous la ligne de base, qui s'epaissit
   au survol. Meme geste que .text-link du prototype. */
body.sl-legacy-page .container_large p a,
body.sl-legacy-page .container_med p a,
body.sl-legacy-page .texte p a,
body.sl-legacy-page .description-wysiwig p a,
body.sl-legacy-page .contenuAccordeon p a {
  color: var(--sl-color-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--sl-color-secondary);
  padding-bottom: 1px;
  transition: color 160ms var(--sl-ease), border-color 160ms var(--sl-ease);
}

body.sl-legacy-page .container_large p a:hover,
body.sl-legacy-page .container_med p a:hover,
body.sl-legacy-page .texte p a:hover,
body.sl-legacy-page .description-wysiwig p a:hover,
body.sl-legacy-page .contenuAccordeon p a:hover {
  color: var(--sl-color-secondary);
}

body.sl-legacy-page strong,
body.sl-legacy-page b {
  font-weight: 700;
  color: var(--sl-color-primary);
}


/* --------------------------------------------------------------------------
   2. Les titres de contenu

   Constat du proprio, capture a l'appui : « il n'y a aucun titre en
   majuscule dans la bonne page, on joue avec les graisses et les serifs ».
   C'est exact. Dans la refonte :

     surtitre   Cormorant Garamond italique, couleur secondaire, 28 px
     titre      futura en casse normale, la premiere moitie en 700 et la
                seconde en 400, interligne serre, aucun lettrage etire

   L'ancien theme, lui, met tous les titres en CAPITALES ESPACEES. Le texte
   est pourtant stocke en casse normale dans la base (« Garantie a vie
   limitee ») : ce sont ses regles CSS qui transforment.

   Ces regles portent DEUX identifiants (#lesPages #Flexible h1), une
   specificite qu'une feuille generique ne peut pas battre. D'ou le
   !important, assume et limite aux proprietes typographiques.
   -------------------------------------------------------------------------- */

body.sl-legacy-page main h1,
body.sl-legacy-page main h2,
body.sl-legacy-page main h3,
body.sl-legacy-page main h4,
body.sl-legacy-page main .pageTitle,
body.sl-legacy-page main .title h2,
body.sl-legacy-page main .bloc_titre_texte h1,
body.sl-legacy-page main .bloc_titre_texte h2 {
  font-family: var(--sl-font-sans) !important;
  text-transform: none !important;
  letter-spacing: var(--sl-tracking-h) !important;
  color: var(--sl-color-primary);
}

/* Titre de page : l'equivalent du grand titre de la refonte, en 700. */
body.sl-legacy-page main h1 {
  font-size: var(--sl-text-h1) !important;
  /* 400 comme les titres de section : c'est le <strong> pose par le
     mu-plugin qui porte le 700, pas le titre entier. Avant, un h1 tout en
     700 a cote d'un h2 tout en 400 cassait la lecture. */
  font-weight: var(--sl-weight-regular) !important;
  line-height: var(--sl-leading-h) !important;
  margin: 0 0 28px;
}

/* Titre de section : 400, et c'est la moitie avant la virgule qui porte le
   700 (voir le filtre PHP dans mu-plugins/sunlouvre-refonte-assets.php). */
body.sl-legacy-page main h2,
body.sl-legacy-page main .pageTitle {
  font-size: var(--sl-text-h2) !important;
  font-weight: var(--sl-weight-regular) !important;
  line-height: var(--sl-leading-h) !important;
  margin: 0 0 24px;
}

body.sl-legacy-page main h1 strong,
body.sl-legacy-page main h2 strong,
body.sl-legacy-page main .pageTitle strong {
  font-weight: var(--sl-weight-bold) !important;
}

body.sl-legacy-page main h3,
body.sl-legacy-page main h4 {
  font-size: var(--sl-text-h3) !important;
  font-weight: var(--sl-weight-bold) !important;
  line-height: 1.2 !important;
  letter-spacing: normal !important;
  margin: 2em 0 0.6em;
}

/* Le surtitre : Cormorant italique dans la couleur secondaire, comme
   « Fabriquees a Granby » au-dessus de « Dessinee pour votre cour ». */
/* .content_label n'est PAS un surtitre : c'est le libelle d'un champ de
   formulaire dans ce theme. Le passer en Cormorant italique 28 px donnait
   des etiquettes geantes en serif au-dessus des champs de la page garantie.
   Il est traite plus bas, avec les formulaires. */
body.sl-legacy-page main .surtitre,
body.sl-legacy-page main .eyebrow {
  font-family: var(--sl-font-serif) !important;
  font-style: italic;
  font-weight: 400;
  font-size: var(--sl-text-eyebrow);
  line-height: 1.2;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--sl-color-secondary);
  margin: 0 0 14px;
}

/* --------------------------------------------------------------------------
   3. Les accordeons, avec le composant FAQ de la refonte

   Le theme sort <div class="Accordeon"><h5 class="titreAccordeon">...</h5>
   <div class="contenuAccordeon">...</div></div>. On lui donne l'allure de
   .faq__item / .faq__q / .faq__a du prototype : question en Cormorant, filet
   fin dessous, signe + qui pivote en croix a l'ouverture.

   On ne touche PAS au JavaScript de l'accordeon : il continue d'ouvrir et de
   fermer comme avant, seule l'apparence change.
   -------------------------------------------------------------------------- */

/* On neutralise d'abord l'habillage de l'ancien theme : chaque question
   etait une carte blanche de 35 px de haut avec un + en SVG a 50 px du bord
   et un survol qui repeignait tout en brun. Il ne reste que le filet fin. */
/* CORRIGE le 25 septembre, apres le retour « la foire aux questions est
   degueulasse ». La regle ci-dessous ne posait que le filet du BAS, en
   pensant que le reste n'existait pas. En realite common.css impose
   border: 2px solid #a27461 sur les QUATRE cotes, par un selecteur plus
   fort : chaque question etait donc une boite brune, et deux boites
   collees doublaient leur trait. D'ou l'echelle de cases empilees.

   Il faut remettre les quatre cotes a zero explicitement avant de poser le
   seul filet qu'on garde, celui du composant FAQ du prototype. */
body.sl-legacy-page .Accordeon {
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--sl-color-ink-12) !important;
  background: transparent !important;
  max-width: 900px;
}

/* Le premier de la liste porte aussi un filet en haut : une liste fermee
   par les deux bouts se lit comme un bloc, pas comme une suite. */
body.sl-legacy-page .liste_accordeons .Accordeon:first-child {
  border-top: 1px solid var(--sl-color-ink-12) !important;
}

body.sl-legacy-page .Accordeon .titreAccordeon:after {
  content: none;
}

body.sl-legacy-page .Accordeon .titreAccordeon:hover {
  background: transparent;
  color: var(--sl-color-secondary);
}

body.sl-legacy-page .Accordeon .contenuAccordeon {
  background: transparent;
  padding: 0 0 22px;
}

body.sl-legacy-page .Accordeon .titreAccordeon {
  position: relative;
  display: block;
  margin: 0;
  padding: 22px 44px 22px 0;
  background: transparent;
  min-height: 0;
  font-family: var(--sl-font-serif);
  font-weight: 400;
  font-size: clamp(20px, 1.7vw, 24px);
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: none;
  color: var(--sl-color-primary);
  cursor: pointer;
  transition: color 160ms var(--sl-ease);
}

body.sl-legacy-page .Accordeon .titreAccordeon:hover {
  color: var(--sl-color-secondary);
}

/* Le + dessine en CSS, sans toucher au HTML : deux filets croises. */
body.sl-legacy-page .Accordeon .titreAccordeon::before,
body.sl-legacy-page .Accordeon .titreAccordeon::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 14px;
  height: 1px;
  /* L'ancien theme posait margin-top: -11px sur :after seulement, pour caler
     son SVG de 22 px. Sans remise a zero, la barre verticale se decalait de
     11 px et le + ressemblait a un L. */
  margin-top: 0;
  background: var(--sl-color-primary);
  transition: transform 220ms var(--sl-ease);
}

body.sl-legacy-page .Accordeon .titreAccordeon::after {
  transform: rotate(90deg);
}

body.sl-legacy-page .Accordeon.active .titreAccordeon::before,
body.sl-legacy-page .Accordeon.open .titreAccordeon::before,
body.sl-legacy-page .Accordeon.is-open .titreAccordeon::before {
  transform: rotate(45deg);
}

body.sl-legacy-page .Accordeon.active .titreAccordeon::after,
body.sl-legacy-page .Accordeon.open .titreAccordeon::after,
body.sl-legacy-page .Accordeon.is-open .titreAccordeon::after {
  transform: rotate(135deg);
}

body.sl-legacy-page .contenuAccordeon {
  padding-bottom: 8px;
}

/* Tout ce qui vit dans une reponse est a la MEME taille. Sans cette regle,
   les paragraphes tombaient a 15,5 px pendant que les listes restaient a
   17 px : deux reponses de la meme FAQ n'avaient pas la meme typographie,
   ce qui se voyait tout de suite en comparant deux accordeons ouverts.
   15,5 px sur 1,65, comme .faq__a-inner p dans le prototype. */
body.sl-legacy-page .contenuAccordeon p,
body.sl-legacy-page .contenuAccordeon li,
body.sl-legacy-page .contenuAccordeon td,
body.sl-legacy-page .contenuAccordeon div,
body.sl-legacy-page .contenuAccordeon span {
  font-family: var(--sl-font-sans);
  /* !important : l'ancien theme met les listes a 1.2em via
     #lesPages #Flexible ol li, deux identifiants. Sans cela, la reponse 3 de
     la FAQ garantie s'affichait a 20 px pendant que les autres etaient a
     15,5 px, sur la meme page. */
  font-size: 15.5px !important;
  line-height: 1.65 !important;
  color: var(--sl-color-ink-70);
}

body.sl-legacy-page .contenuAccordeon p,
body.sl-legacy-page .contenuAccordeon li {
  max-width: 68ch;
}

body.sl-legacy-page .contenuAccordeon li {
  margin-bottom: 0.9em;
}

/* Les sous-titres a l'interieur d'une reponse restent des sous-titres, pas
   des titres de section. */
body.sl-legacy-page .contenuAccordeon h3,
body.sl-legacy-page .contenuAccordeon h4,
body.sl-legacy-page .contenuAccordeon h5,
body.sl-legacy-page .contenuAccordeon h6 {
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  margin: 1.6em 0 0.5em;
}


/* --------------------------------------------------------------------------
   4. Respiration des sections

   L'ancien theme colle les blocs. Le prototype leur donne de l'air, et c'est
   la moitie de la difference d'allure entre les deux.
   -------------------------------------------------------------------------- */

body.sl-legacy-page .bloc_titre_texte {
  margin-bottom: clamp(48px, 5vw, 80px);
}

body.sl-legacy-page .liste_accordeons {
  margin-block: clamp(32px, 4vw, 56px);
}


/* --------------------------------------------------------------------------
   5. Les boutons de la refonte, debarrasses de l'ancien theme

   Le prototype et l'ancien theme utilisent tous les deux la classe .btn.
   Celle de l'ancien theme colle un chevron brun en :after et, au survol,
   repeint le texte en #404142 : sur un bouton charbon, le libelle devenait
   donc gris fonce sur gris fonce, illisible, avec un chevron brun a droite.

   On ne touche qu'aux boutons qui portent AUSSI une classe de la refonte
   (.btn--primary, .btn--secondary, .site-header__cta...). Les boutons de
   l'ancien theme, eux, gardent leur chevron : ils ne sont pas encore
   refaits, autant qu'ils restent coherents entre eux.
   -------------------------------------------------------------------------- */

.btn--primary:after,
.btn--secondary:after,
.btn--outline:after,
.btn--outline-light:after,
.btn--lg:after,
.site-header__cta:after,
.mobile-cta__btn:after,
.btn--primary:hover:after,
.btn--secondary:hover:after,
.site-header__cta:hover:after,
.mobile-cta__btn:hover:after {
  content: none !important;
  background-image: none !important;
  display: none !important;
}

/* Le survol revient a celui du prototype : le fond s'eclaircit, le texte
   reste blanc. */
.btn--primary:hover,
.btn--primary:focus,
.site-header__cta:hover,
.site-header__cta:focus,
.mobile-cta__btn:hover,
.mobile-cta__btn:focus {
  color: var(--sl-color-white) !important;
  text-decoration: none;
}

.btn--secondary:hover,
.btn--secondary:focus {
  color: var(--sl-color-white) !important;
}

.btn--outline:hover,
.btn--outline:focus {
  color: var(--sl-color-white) !important;
}


/* --------------------------------------------------------------------------
   6. Les formulaires

   Meme langage que le formulaire de la refonte : le libelle est petit et
   discret, le champ est une boite fine, et rien n'est en serif. Avant, les
   libelles heritaient du surtitre et s'affichaient en Cormorant italique de
   28 px au-dessus de champs de 100 px de haut.
   -------------------------------------------------------------------------- */

body.sl-legacy-page main .content_label,
body.sl-legacy-page main form label,
body.sl-legacy-page main .wpcf7 label {
  display: block;
  font-family: var(--sl-font-sans) !important;
  font-style: normal !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  color: var(--sl-color-ink-70) !important;
  margin: 0 0 8px;
}

body.sl-legacy-page main input[type="text"],
body.sl-legacy-page main input[type="email"],
body.sl-legacy-page main input[type="tel"],
body.sl-legacy-page main input[type="date"],
body.sl-legacy-page main input[type="number"],
body.sl-legacy-page main select,
body.sl-legacy-page main textarea {
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 14px 16px !important;
  font-family: var(--sl-font-sans) !important;
  font-style: normal !important;
  font-size: 17px !important;
  line-height: 1.4 !important;
  color: var(--sl-color-primary) !important;
  background: var(--sl-color-white);
  border: 1px solid var(--sl-color-ink-20) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 160ms var(--sl-ease);
}

body.sl-legacy-page main textarea {
  min-height: 140px;
}

body.sl-legacy-page main input:focus,
body.sl-legacy-page main select:focus,
body.sl-legacy-page main textarea:focus {
  outline: 0;
  border-color: var(--sl-color-secondary) !important;
}

body.sl-legacy-page main ::placeholder {
  font-family: var(--sl-font-sans);
  color: var(--sl-color-ink-55);
}

/* Le champ d'un formulaire n'herite pas de la mesure du texte courant. */
body.sl-legacy-page main form p,
body.sl-legacy-page main .wpcf7 p {
  max-width: none;
}


/* --------------------------------------------------------------------------
   7. Les boutons d'envoi des formulaires

   Le formulaire de la refonte a un bouton plein : charbon, texte blanc,
   14 px en majuscules espacees, la fleche DANS le bouton.
       <button class="btn btn--primary btn--lg">Contactez-moi &rarr;</button>

   Les formulaires du site sortent au contraire un cadre vide avec un chevron
   brun pose a cote, a 20 px du bord droit du conteneur, qui flotte donc dans
   le vide. On aligne sur le bouton de la refonte, et on retire le chevron
   orphelin.
   -------------------------------------------------------------------------- */

body.sl-legacy-page .btn_submit:after,
body.sl-legacy-page .btn_submit:hover:after,
body.sl-legacy-page .content_submit:after,
body.sl-legacy-page .wpcf7-form .btn_submit:after {
  content: none !important;
  background-image: none !important;
  display: none !important;
}

body.sl-legacy-page input[type="submit"],
body.sl-legacy-page button[type="submit"],
body.sl-legacy-page .wpcf7-submit,
body.sl-legacy-page .btn_submit input {
  display: inline-block;
  width: auto;
  min-height: 0;
  padding: 18px 40px !important;
  font-family: var(--sl-font-sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--sl-color-white) !important;
  background: var(--sl-color-primary) !important;
  border: 1px solid var(--sl-color-primary) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background-color 200ms var(--sl-ease);
}

body.sl-legacy-page input[type="submit"]:hover,
body.sl-legacy-page button[type="submit"]:hover,
body.sl-legacy-page .wpcf7-submit:hover,
body.sl-legacy-page .btn_submit input:hover {
  background: rgba(51, 50, 48, 0.9) !important;
  color: var(--sl-color-white) !important;
}

/* Le conteneur du bouton n'a plus besoin de son cadre ni de sa place pour
   le chevron disparu. */
body.sl-legacy-page .btn_submit,
body.sl-legacy-page .content_submit {
  border: 0 !important;
  padding-right: 0 !important;
  background: transparent !important;
}

/* Cases a cocher et boutons radio : au format du texte courant, pas geants. */
body.sl-legacy-page main .wpcf7-list-item-label,
body.sl-legacy-page main .wpcf7-list-item label {
  font-size: 15.5px !important;
  color: var(--sl-color-ink-70) !important;
}

body.sl-legacy-page main input[type="checkbox"],
body.sl-legacy-page main input[type="radio"] {
  width: 18px;
  height: 18px;
  min-height: 0;
  padding: 0 !important;
  accent-color: var(--sl-color-secondary);
  border: 1px solid var(--sl-color-ink-20) !important;
  vertical-align: middle;
  margin-right: 10px;
}


/* --------------------------------------------------------------------------
   8. Les appels a l'action dans le contenu (.primary_btn)

   Modele : le bouton de la page soumission de la refonte.
       <a class="btn btn--primary btn--lg" href="#formulaire">
         Remplir le formulaire &darr;</a>
   Plein charbon, texte blanc en majuscules espacees, et la fleche DANS le
   bouton, tournee vers l'endroit ou elle mene.

   Ce que le site faisait : un cadre vide avec un chevron vers la DROITE
   pose a cote. Or ces boutons pointent presque toujours vers une ancre plus
   BAS dans la meme page (#enregistrement). Le signe disait donc le
   contraire du geste.

   D'ou la regle : une fleche vers le bas des que le lien commence par #,
   une fleche vers la droite sinon.
   -------------------------------------------------------------------------- */

body.sl-legacy-page main .primary_btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 20px 40px !important;
  font-family: var(--sl-font-sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  color: var(--sl-color-white) !important;
  background: var(--sl-color-primary) !important;
  border: 1px solid var(--sl-color-primary) !important;
  border-radius: 0 !important;
  transition: background-color 200ms var(--sl-ease);
}

body.sl-legacy-page main .primary_btn:hover {
  background: rgba(51, 50, 48, 0.9) !important;
  color: var(--sl-color-white) !important;
}

/* Le chevron de l'ancien theme, en image de fond, disparait. */
body.sl-legacy-page main .primary_btn:after,
body.sl-legacy-page main .primary_btn:hover:after,
body.sl-legacy-page main .primary_btn:before {
  background-image: none !important;
  width: auto !important;
  height: auto !important;
  position: static !important;
}

/* La fleche, en caractere, dans le bouton et dans le bon sens. */
body.sl-legacy-page main .primary_btn:after {
  content: "\2192";          /* vers la droite par defaut */
  display: inline-block !important;
  font-size: 15px;
  line-height: 1;
  opacity: 0.9;
}

body.sl-legacy-page main .primary_btn[href*="#"]:after {
  content: "\2193";          /* le lien mene plus bas dans la page */
}


/* --------------------------------------------------------------------------
   9. Le HERO : le vrai titre de la page

   Correction du proprio : « le titre de la page se trouve dans le hero ».
   C'est exact, et toutes mes regles precedentes etaient bornees a <main>.
   Or le hero (#hero) est POSE AVANT <main> dans ce theme : il echappait
   donc a tout, et gardait ses capitales en 3.5em.

   Modele : le hero de la refonte, ou le titre est en casse normale, en
   futura 700, et ou c'est le SURTITRE en Cormorant italique qui porte la
   couleur. Aucune capitale, aucun lettrage etire.
   -------------------------------------------------------------------------- */

body.sl-legacy-page #hero h1,
body.sl-legacy-page #hero h2,
body.sl-legacy-page #hero .content_title h1,
/* Le gabarit serie (Bioclimatique, Pergola sur mesure) pose son titre de
   hero dans un <h3> : il gardait les capitales etirees et le brun de
   l'ancien theme. Releve par le proprio le 28 septembre. */
body.sl-legacy-page #hero.hero_series .info_area h3 {
  font-family: var(--sl-font-sans) !important;
  font-size: var(--sl-text-hero) !important;
  /* 400, et c'est le <strong> pose par le mu-plugin qui porte le 700, comme
     partout ailleurs. Un titre de hero entierement gras ne laissait pas la
     coupe se voir. */
  font-weight: var(--sl-weight-regular) !important;
  line-height: var(--sl-leading-hero) !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  color: var(--sl-color-primary) !important;
  margin: 0 0 18px !important;
}

body.sl-legacy-page #hero h1 strong,
body.sl-legacy-page #hero h2 strong,
body.sl-legacy-page #hero.hero_series .info_area h3 strong {
  font-weight: var(--sl-weight-bold) !important;
}

/* Le sous-titre du hero, quand il y en a un, devient le surtitre serif. */
body.sl-legacy-page #hero .content_title h2,
body.sl-legacy-page #hero .sous_titre,
body.sl-legacy-page #hero .surtitre {
  font-family: var(--sl-font-serif) !important;
  font-style: italic !important;
  font-size: var(--sl-text-eyebrow) !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--sl-color-secondary) !important;
}

body.sl-legacy-page #hero p {
  font-family: var(--sl-font-sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--sl-color-ink-70);
  max-width: var(--sl-content-measure);
}

/* Le cadre decoratif brun du hero (bordures de 2 px sur trois cotes) n'existe
   pas dans la refonte : le titre y est simplement pose sur le fond, aligne a
   gauche, avec la photo a cote. On retire le cadre et on aligne. */
body.sl-legacy-page #hero .overlay,
body.sl-legacy-page #hero.hero_sections .hero_section .overlay,
body.sl-legacy-page #hero.hero_series .hero_section .overlay,
body.sl-legacy-page #hero.hero_news .hero_new .overlay {
  border: 0 !important;
  width: 100% !important;
}

/* Le filet brun qui restait en haut a droite vient d'un pseudo-element du
   meme decor. */
body.sl-legacy-page #hero .overlay:before,
body.sl-legacy-page #hero .overlay:after,
body.sl-legacy-page #hero .info_area:before,
body.sl-legacy-page #hero .info_area:after {
  content: none !important;
  border: 0 !important;
  background: none !important;
}

body.sl-legacy-page #hero .info_area,
body.sl-legacy-page #hero .content_title {
  text-align: left !important;
}

/* --------------------------------------------------------------------------
   10. Un seul titre de page par page

   Defaut releve par le proprio : sur /garantie/, le titre du hero
   (« Garantie ») et le premier titre du contenu (« Garantie a vie limitee »)
   faisaient tous les deux 68 px. Deux titres de page sur une meme page,
   donc aucune hierarchie.

   Quand le hero porte deja un titre, le premier titre du contenu redevient
   un titre de SECTION. Quand la page n'a pas de hero titre, le titre du
   contenu reste le titre de page : c'est lui qui ouvre la page.
   -------------------------------------------------------------------------- */

body.sl-legacy-page:has(#hero h1) main h1 {
  font-size: var(--sl-text-h2) !important;
  line-height: var(--sl-leading-h) !important;
}


/* --------------------------------------------------------------------------
   11. Les colonnes doubles et triples

   27 instances sur 8 pages : salles de montre (les 4), revendeurs,
   gazebo-auvent, politiques, guide d'entretien.

   L'ancien theme les monte en grille flottante Bootstrap : deux ou trois
   div en float:left, une gouttiere de 30 px obtenue par -15 px de marge sur
   le conteneur et 15 px de padding sur chaque colonne, et un clearfix en
   :before / :after. Aucun trait, aucune respiration : les colonnes se
   touchent presque et rien ne dit ou le bloc commence.

   La reference est la section des salles de montre de la nouvelle accueil
   (.showroom dans prototype-accueil-v2/css/styles.css) : un filet fin en
   tete, de l'air entre les colonnes, le nom du lieu en futura 500 / 21 px,
   l'adresse a 70 % d'encre, le telephone a 18 px.

   ATTENTION au clearfix : en passant le conteneur en grid, .row:before et
   .row:after, qui valent content:" ", deviennent deux CELLULES vides de la
   grille. Elles poussent les vraies colonnes d'un cran et la mise en page
   part de travers. Il faut les supprimer, pas seulement les ignorer.
   -------------------------------------------------------------------------- */

body.sl-legacy-page .double_colonne,
body.sl-legacy-page .triple_colonne {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 3.5vw, 64px);
  align-items: start;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-top: clamp(24px, 2.6vw, 40px);
  border-top: 1px solid var(--sl-color-ink-12);
}

body.sl-legacy-page .triple_colonne {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Le clearfix de .row, neutralise avant qu'il ne devienne une cellule. */
body.sl-legacy-page .double_colonne:before,
body.sl-legacy-page .double_colonne:after,
body.sl-legacy-page .triple_colonne:before,
body.sl-legacy-page .triple_colonne:after {
  content: none !important;
  display: none !important;
}

/* Les colonnes : plus de float, plus de gouttiere Bootstrap. C'est la
   grille qui tient l'ecart, une seule fois, au lieu de six declarations. */
body.sl-legacy-page .double_colonne > div,
body.sl-legacy-page .triple_colonne > div {
  float: none !important;
  width: auto !important;
  min-height: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Le nom du lieu. Deux ecritures coexistent dans le contenu : un h4 sur les
   pages de salle de montre (« Quebec », « Ontario ») et un <strong> seul
   dans le premier paragraphe sur revendeurs (« GRANBY (Siege social) »).
   Les deux deviennent le meme titre que sur la nouvelle accueil.

   Le kit Adobe ne sert futura-pt qu'en 400 et 700 : le 500 demande ici est
   donc rendu en 400, exactement comme sur le prototype qui l'ecrit pareil. */
body.sl-legacy-page .double_colonne h4,
body.sl-legacy-page .triple_colonne h4,
body.sl-legacy-page .double_colonne > div > p:first-child > strong:only-child,
body.sl-legacy-page .triple_colonne > div > p:first-child > strong:only-child {
  display: block;
  font-family: var(--sl-font-sans) !important;
  font-weight: 500 !important;
  font-size: 21px !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--sl-color-primary) !important;
  margin: 0 0 12px !important;
}

/* Le texte d'une colonne : la meme adresse que sur l'accueil, a 70 %
   d'encre, interligne 1,6. */
body.sl-legacy-page .double_colonne > div p,
body.sl-legacy-page .triple_colonne > div p,
body.sl-legacy-page .double_colonne > div li,
body.sl-legacy-page .triple_colonne > div li {
  color: var(--sl-color-ink-70);
  line-height: 1.6;
}

/* Le telephone, comme .showroom__phone : c'est l'information qu'on vient
   chercher sur ces pages, elle ne doit pas avoir la taille d'une note. */
body.sl-legacy-page .double_colonne a[href^="tel:"],
body.sl-legacy-page .triple_colonne a[href^="tel:"] {
  display: inline-block;
  font-size: 18px !important;
  letter-spacing: 0.02em;
}

/* Une photo dans une colonne prend toute la largeur de sa colonne, comme un
   cadre du prototype. Sans cela elle reste a sa taille naturelle et laisse
   un vide a sa droite.

   La photo n'est PAS recadree. Le prototype met ses images en 16/10, et
   appliquer ce rapport ici equilibrait mieux les deux colonnes, mais le
   recadrage coupait le haut de la toiture a lames, c'est-a-dire le produit.
   Une pergola ne se fait pas rogner pour arranger une grille. */
body.sl-legacy-page .double_colonne > div img,
body.sl-legacy-page .triple_colonne > div img {
  display: block;
  width: 100%;
  height: auto;
}

/* Pourquoi les colonnes ne sont PAS centrees verticalement.

   Essaye puis retire le 25 septembre. Sur salles de montre, centrer la
   colonne de texte en face de la photo rendait mieux : le texte est court,
   la photo fait le double de sa hauteur. Mais le meme reglage cassait le
   guide d'entretien, ou les DEUX colonnes sont longues (942 et 1202 px) :
   la gauche descendait de 130 px et les deux textes ne commencaient plus a
   la meme ligne. Une regle CSS ne peut pas distinguer les deux cas.

   Tout part donc du haut. Le blanc sous la colonne la plus courte est la
   reponse normale d'une grille editoriale, et il ne se trompe jamais. */

/* Trois colonnes qui portent chacune une photo : c'est une grille de
   cartes, pas une photo de presentation. Leurs photos n'ont pas le meme
   rapport (carree, 4/3, carree sur gazebo-auvent), donc les titres qui les
   suivent se retrouvent a trois hauteurs differentes.

   Meme correctif que sur la nouvelle accueil, ou toutes les vignettes
   partagent le rapport de .frame : un seul rapport, et la rangee de titres
   redevient une ligne. La photo de presentation d'un bloc a deux colonnes,
   elle, n'est jamais recadree. */
body.sl-legacy-page .triple_colonne:has(img) > div img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
}

body.sl-legacy-page .double_colonne > div p:last-child,
body.sl-legacy-page .triple_colonne > div p:last-child {
  margin-bottom: 0;
}

/* Sur telephone, les colonnes s'empilent et le filet reste en tete du bloc. */
@media (max-width: 768px) {
  body.sl-legacy-page .double_colonne,
  body.sl-legacy-page .triple_colonne {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}


/* --------------------------------------------------------------------------
   12. Les rangees photo / texte

   19 instances : foire aux questions, catalogue, partenaires, salles de
   montre, galeries photos. Deux gabarits jumeaux, bloc_titre_h3_photo_a_gauche
   et _a_droite, qui ne different que par l'ordre des enfants.

   Meme traitement que les colonnes de la section 11, et pour la meme raison :
   l'ancien theme les monte en flottants avec une gouttiere de 30 px et sans
   filet. Le bloc reste dans la composition d'origine, photo a gauche ou a
   droite selon le contenu : la parite avec la nouvelle accueil, qui pose la
   photo au-dessus, demande de redessiner page par page et le proprio a dit
   qu'on garde pour l'instant.

   Le gabarit imprime DEUX fois la photo de gauche, une version .desktop et
   une version .mobile, dont une seule est visible. Un enfant en display:none
   ne prend pas de cellule dans une grille, donc les deux cas tombent juste
   sans rien changer au HTML.
   -------------------------------------------------------------------------- */

body.sl-legacy-page .bloc_photo_colonne {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 3.5vw, 64px);
  align-items: start;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-top: clamp(24px, 2.6vw, 40px);
  border-top: 1px solid var(--sl-color-ink-12);
}

/* Le clearfix, qui deviendrait deux cellules vides. Voir section 11. */
body.sl-legacy-page .bloc_photo_colonne:before,
body.sl-legacy-page .bloc_photo_colonne:after {
  content: none !important;
  display: none !important;
}

body.sl-legacy-page .bloc_photo_colonne > div {
  float: none !important;
  width: auto !important;
  min-height: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* La photo occupe sa colonne, et elle n'est pas recadree : c'est une photo
   de presentation, pas une vignette de grille. Meme regle qu'en section 11. */
body.sl-legacy-page .bloc_photo_colonne img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  body.sl-legacy-page .bloc_photo_colonne {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}


/* --------------------------------------------------------------------------
   13. L'encadre a fond couleur

   6 instances : demande de soumission, guide d'entretien, partenaires.

   Deux defauts. Le fond est #f9f2ec, un beige rose qui ne vient d'aucune
   palette du site, alors que la refonte a une seule creme. Et le bloc n'a
   AUCUN retrait horizontal (100px 0 75px) : sur telephone le texte touche
   les deux bords de l'ecran.
   -------------------------------------------------------------------------- */

body.sl-legacy-page .bloc_titre_h4_centre_avec_fond_couleur {
  background: var(--sl-color-cream) !important;
  padding: clamp(56px, 7vw, 100px) var(--sl-margin) clamp(48px, 5vw, 75px) !important;
}

/* Un texte centre qui traverse toute la page ne se lit pas. La nouvelle
   accueil borne ses ledes autour de 44 caracteres ; ici on est plus large
   parce que le bloc porte parfois un formulaire, mais on borne quand meme. */
body.sl-legacy-page .bloc_titre_h4_centre_avec_fond_couleur > .container_med > .texte > p {
  max-width: 62ch;
  margin-inline: auto;
}


/* --------------------------------------------------------------------------
   14. Les blocs d'avantages (les « series »)

   8 instances : les 3 pages de salle de montre et pergolas aluminium.

   C'est une grille de cartes, donc meme regle que les trois colonnes de la
   section 11 : un rapport d'image partage, sans quoi les titres tombent a
   des hauteurs differentes. Le nombre de cartes varie d'un bloc a l'autre,
   donc la grille se compte toute seule au lieu d'etre figee a deux.

   Le gabarit imprimait aussi un warning PHP DANS la carte quand l'icone
   d'une rangee etait vide : corrige dans template-section.php le meme jour.
   -------------------------------------------------------------------------- */

body.sl-legacy-page .liste_series {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(32px, 3.5vw, 64px);
  align-items: start;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-top: clamp(24px, 2.6vw, 40px);
  border-top: 1px solid var(--sl-color-ink-12);
}

body.sl-legacy-page .liste_series:before,
body.sl-legacy-page .liste_series:after {
  content: none !important;
  display: none !important;
}

body.sl-legacy-page .liste_series > .serie {
  float: none !important;
  width: auto !important;
  min-height: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Le :not(.iconeplus) n'est pas decoratif. Dans .pic il y a DEUX images :
   la photo de la carte, et le « + » de 22 px que le survol fait apparaitre
   par-dessus. Sans l'exclusion, le plus recevait lui aussi le rapport 16/10
   et se retrouvait ecrase a 18 x 11. */
body.sl-legacy-page .liste_series .pic img:not(.iconeplus) {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}


/* --------------------------------------------------------------------------
   15. La geometrie du hero

   Retour du proprio le 25 septembre : « every hero that you made kinda feels
   off, the text doesn't align equally it always moves », et sur Gatineau le
   titre sortait carrement de la page.

   Trois defauts mesures, tous de composition et aucun de typographie :

   1. LE TITRE ETAIT COUPE. La colonne de texte est figee a 350 px par
      l'ancien theme. « d'Ottawa/Gatineau » est un seul mot : a 66 px il fait
      570 px de large, il debordait, et #hero est en overflow:hidden, donc il
      etait tranche net. On rend la colonne fluide et on redescend le titre a
      l'echelle du hero de page du prototype (.h--display, 60 px au plus).

   2. UNE BANDE VIDE SOUS LA PHOTO. .sheight est pilote par matchHeight() en
      jQuery (js/scripts.js), qui pose une hauteur en STYLE EN LIGNE sur les
      deux colonnes pour les egaliser. La photo recevait donc 487 px de boite
      pour 417 px d'image. Un style en ligne ne se corrige qu'avec
      !important : la hauteur repasse en auto et c'est la grille qui egalise.

   3. « CA BOUGE D'UNE PAGE A L'AUTRE ». Le hero n'avait pas de hauteur
      propre : il prenait celle de son contenu, donc un titre de deux lignes
      et un titre de quatre lignes ne donnaient pas le meme hero. Une hauteur
      minimale commune et un centrage vertical reglent les deux.
   -------------------------------------------------------------------------- */

/* LA BANDE VIDE SOUS LA PHOTO, l'autre moitie du probleme.

   .hero_section porte un margin-bottom de 70 px, et il est A L'INTERIEUR du
   fond gris de #hero : le gris continuait donc 70 px sous la photo. Il porte
   aussi un padding-right de 50 px, qui rendait le hero asymetrique, decale
   vers la gauche de 50 px sur toutes les pages.

   L'ecart sous le hero existe toujours, mais il est pose sur #hero, donc
   DEHORS, et le fond gris s'arrete pile au bas de la photo. */
body.sl-legacy-page #hero .hero_section {
  margin-bottom: 0 !important;
  padding-right: 0 !important;
}

/* CORRIGE une deuxieme fois le 25 septembre. Premiere version : l'ecart de
   70 px etait DANS le fond gris de #hero, donc le gris continuait sous la
   photo. Je l'ai sorti sur #hero... et il laissait alors voir la CREME DE LA
   PAGE entre la photo et le bloc blanc qui suit. Meme trou, autre couleur,
   et sur toutes les pages d'un coup.

   Un ecart entre deux blocs ne doit appartenir a aucun des deux : il
   appartient au contenu. Le hero se termine donc pile au bas de la photo, et
   c'est la premiere section de <main> qui apporte sa respiration, dans son
   propre fond. */
body.sl-legacy-page #hero {
  margin-bottom: 0 !important;
}

/* Et TROISIEME essai, le bon. Mettre le retrait sur main > section ne
   marchait pas non plus : le gabarit imbrique DEUX <section>, l'exterieure
   transparente et l'interieure blanche. Le retrait tombait sur la
   transparente, donc il etait creme lui aussi, et la bande revenait.

   Conclusion : on ne pose AUCUN ecart. Le blanc du contenu commence pile au
   bas de la photo, et c'est le bloc blanc lui-meme qui respire, dans sa
   propre couleur. Rien d'orphelin entre les deux, quelle que soit la
   structure de la page. */
body.sl-legacy-page main section[class=""],
body.sl-legacy-page main > section > section:first-child {
  padding-top: clamp(40px, 4vw, 64px);
}

body.sl-legacy-page #hero .row:has(> .text) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  min-height: clamp(360px, 40vw, 520px);
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.sl-legacy-page #hero .row:has(> .text):before,
body.sl-legacy-page #hero .row:has(> .text):after {
  content: none !important;
  display: none !important;
}

/* matchHeight() pose sa hauteur en style en ligne : sans !important, la
   grille ne reprend jamais la main. */
body.sl-legacy-page #hero .row > .pic,
body.sl-legacy-page #hero .row > .text {
  float: none !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* La photo remplit sa moitie, du haut du hero jusqu'en bas. */
body.sl-legacy-page #hero .row > .pic {
  align-self: stretch;
  overflow: hidden;
}

body.sl-legacy-page #hero .row > .pic img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: clamp(360px, 40vw, 520px);
  object-fit: cover;
  object-position: center;
}

/* La colonne de texte : plus de largeur figee, un retrait qui respire, et un
   contenu centre sur la hauteur du hero. */
body.sl-legacy-page #hero .row > .text {
  display: flex;
  align-items: center;
  padding: clamp(32px, 4vw, 64px) var(--sl-margin) !important;
}

body.sl-legacy-page #hero .row > .text .flexcontent,
body.sl-legacy-page #hero .row > .text .overlay,
body.sl-legacy-page #hero .row > .text .info_area,
body.sl-legacy-page #hero .row > .text .content_title {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  float: none !important;
  position: static !important;
  transform: none !important;
}

/* La taille du titre est posee une seule fois, en section 9, par le token
   --sl-text-hero. Ici on ne garde que le garde-fou : un nom de ville qui ne
   rentre vraiment pas se coupe au lieu de sortir de l'ecran. Pas de
   hyphens:auto, qui couperait aussi les mots ordinaires. */
body.sl-legacy-page #hero h1 {
  overflow-wrap: break-word;
}

/* LE COUPABLE DU TITRE ECRASE : l'ancien theme pose un padding-left de
   246 px sur .overlay pour decaler le texte de la photo. Dans une grille,
   ce retrait mange la colonne : 615 px de boite, 369 px utiles, et le titre
   se coupait en « d'Ottawa/Ga | tineau ». C'est la grille qui ecarte les
   deux colonnes maintenant, ce retrait n'a plus de raison d'etre. */
body.sl-legacy-page #hero .row > .text .overlay {
  padding: 0 !important;
}

@media (max-width: 860px) {
  body.sl-legacy-page #hero .row:has(> .text) {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  body.sl-legacy-page #hero .row > .pic img {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }
  body.sl-legacy-page #hero .row > .text {
    padding: clamp(24px, 6vw, 40px) var(--sl-margin) !important;
  }
}


/* --------------------------------------------------------------------------
   16. Une seule creme

   Retour du proprio : « the recropping of images is a good idea but there is
   always a gap ». Ce n'est pas un ecart, c'est une DIFFERENCE DE COULEUR.

   Le fond de page de la refonte est #f3f1ee. Les blocs colores de l'ancien
   theme sont #f9f2ec, un beige rose. Les deux se ressemblent assez pour
   qu'on ne nomme pas la difference, et se distinguent assez pour qu'une
   bande entre une photo et un bloc colore se lise comme un trou.

   Onze declarations de #f9f2ec dans common.css. Toutes ramenees a la creme
   de la refonte.

   Les deux blocs colores n'ont aussi AUCUN retrait horizontal (100px 0 75px)
   dans l'ancien theme : sur telephone leur texte touche les deux bords.
   -------------------------------------------------------------------------- */

body.sl-legacy-page .container_med.couleur_de_fond,
body.sl-legacy-page .bloc_titre_texte_couleur,
body.sl-legacy-page .bloc_contenu_accordeons.colorbg,
body.sl-legacy-page .bloc_caracteristique,
body.sl-legacy-page .bloc_realisations,
body.sl-legacy-page .bloc_documentation,
body.sl-legacy-page #newsHome {
  background-color: var(--sl-color-cream) !important;
}

body.sl-legacy-page .bloc_titre_texte_couleur {
  padding: clamp(56px, 7vw, 100px) var(--sl-margin) clamp(48px, 5vw, 75px) !important;
}

/* Le cercle des icones portait la meme creme rose en fond. */
body.sl-legacy-page .contour_circle {
  background-color: var(--sl-color-cream) !important;
}

/* Un texte centre qui traverse la page ne se lit pas.

   Le !important n'est pas un reflexe : common.css cible ces blocs par des
   selecteurs a IDENTIFIANT (#seriePresentation #flexibleSerie ...), qui
   battent n'importe quelle regle de classe. Sans lui, la largeur passait
   bien mais les marges restaient a 0 : le paragraphe gardait sa mesure et
   se collait a gauche, centre sur 630 px au lieu de 720. C'est exactement
   le « paragraphe pas centre » releve par le proprio. */
body.sl-legacy-page .bloc_titre_texte_couleur p {
  max-width: 62ch;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* --------------------------------------------------------------------------
   17. Les listes

   Retour du proprio, deux fois : « je déteste le petit s de listes » et
   « les listes sont pas de la bonne taille, le S m'enerve plus que plus ».

   Le « s » est une image de fond SVG de 21 x 9 px collee sur chaque <li> par
   l'ancien theme : une petite fleche courbe qui se lit comme un s minuscule.

   Et la mesure etait fausse : 20,4 px d'interligne 1,27 sur une page dont le
   texte courant est a 17 px d'interligne 1,65. Une puce de liste n'a aucune
   raison d'etre plus grosse qu'un paragraphe.

   A la place : un filet court dans la couleur secondaire, pose sur la ligne
   de base de la premiere ligne. C'est la meme langue que les filets qui
   separent les sections.
   -------------------------------------------------------------------------- */

body.sl-legacy-page main li {
  font-size: var(--sl-text-body) !important;
  line-height: var(--sl-leading-body) !important;
  color: var(--sl-color-ink-70);
  background-image: none !important;
  list-style: none;
  position: relative;
  padding-left: 28px !important;
  margin-bottom: 12px !important;
}

body.sl-legacy-page main li:before {
  content: "";
  position: absolute;
  left: 0;
  /* Sur la ligne de base de la premiere ligne, pas au milieu du bloc : une
     puce centree sur un item de trois lignes flotte au milieu de nulle part. */
  top: calc(var(--sl-text-body) * var(--sl-leading-body) / 2);
  width: 14px;
  height: 1px;
  background: var(--sl-color-secondary);
}

/* Une liste numerotee garde ses chiffres. */
body.sl-legacy-page main ol li {
  list-style: decimal;
  padding-left: 0 !important;
  margin-left: 20px;
}

body.sl-legacy-page main ol li:before {
  content: none;
}


/* --------------------------------------------------------------------------
   18. Le rythme d'un long texte

   Retour du proprio sur le guide d'entretien et les politiques : « ça se lit
   comme un mega bloc de texte ».

   Deux causes. Les paragraphes se suivent sans respirer, et la mesure n'est
   bornee nulle part hors des blocs a colonnes : sur une page pleine largeur
   une ligne peut faire 120 caracteres, soit le double de ce qu'un oeil suit
   sans se perdre.
   -------------------------------------------------------------------------- */

body.sl-legacy-page main p {
  max-width: 74ch;
  margin-bottom: 1.15em;
}

/* Centre, la mesure se borne par le milieu. Meme raison qu'en section 16
   pour le !important : les selecteurs a identifiant de common.css. */
body.sl-legacy-page main [style*="text-align: center"] p,
body.sl-legacy-page main p[style*="text-align: center"],
body.sl-legacy-page .bloc_titre_h4_centre_avec_fond_couleur p,
body.sl-legacy-page .texte_colonne_centre p,
body.sl-legacy-page main .sous-texte p {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Un paragraphe centre par son conteneur se centre aussi comme BOITE, pas
   seulement comme texte. Sinon il garde sa mesure et se colle a gauche. */
body.sl-legacy-page main *[align="center"] p,
body.sl-legacy-page main .text_right p,
body.sl-legacy-page main center p {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Un titre qui suit un paragraphe a besoin de plus d'air au-dessus qu'en
   dessous, sinon il appartient visuellement au texte qui le precede. */
body.sl-legacy-page main h2:not(:first-child),
body.sl-legacy-page main h3:not(:first-child),
body.sl-legacy-page main h4:not(:first-child) {
  margin-top: clamp(32px, 3vw, 56px);
}

/* L'intitule en tete de paragraphe prend sa propre ligne. Il n'est marque
   que s'il se termine par deux-points : c'est le tampon de sortie du
   mu-plugin qui decide, parce que le CSS ne sait pas lire le texte et
   couperait « Pour nettoyer votre pergola » en deux. */
body.sl-legacy-page main strong.sl-para-label {
  display: block;
  margin-bottom: 4px;
  font-weight: var(--sl-weight-bold);
  color: var(--sl-color-primary);
}