:root { --couleur-fond: #FFF; /**Alignement du contenu en fonction du header. Les règles de dimensions sont copiées du header**/ /****** Écran <=1300px *******/ @media screen and (max-width: 1300px) { --margin-left-contenu: 72px; --margin-right-contenu: 16px; } /** Écran <=850px **/ @media screen and (max-width: 850px) { --margin-left-contenu: 16px; --margin-right-contenu: 16px; } /********/ } .header-align { margin: 0 var(--margin-right-contenu, auto) 0 var(--margin-left-contenu, auto); /**Correctif de dimension pour suivre le header**/ max-width: var(--largeur-max-header, 1152px); /****/ } .contenu { max-width: var(--largeur-max-contenu, 825px); background-color: var(--couleur-fond, #FFF); padding-top: 72px; display: flex; position: relative; flex-direction: column; font-family: var(--font-family-texte, "Open Sans", sans-serif); word-wrap: break-word; } .contenu p { /**Pour overwrite le css margin-block des library**/ margin-block-start: 0; margin-block-end: 0; /******/ &:not(:last-child) { margin-bottom: 24px; } color: var(--couleur-bleu-fonce, #223654); align-self: stretch; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; } .contenu ul { margin-top: 24px; margin-bottom: 24px; } .list-left-aligned { max-width: var(--largeur-max-contenu-sous-section, 650px); padding-left: 20px; display: flex; margin-top: 24px; flex-direction: column; align-items: flex-start; gap: 16px; } .contenu li { color: var(--couleur-bleu-fonce, #223654); &:not(:last-child) { margin-bottom: 16px; } } /**tag pour augmenter la spécificité afin d'overwrite le css du font**/ html h1 { display: flex; padding-bottom: 32px; flex-direction: column; align-items: flex-start; } /**tag pour augmenter la spécificité afin d'overwrite le css de base des library**/ html h1::after { border-bottom: 5px solid var(--couleur-h1-underline, #FF8E7A); } /**tag pour augmenter la spécificité afin d'overwrite le css du font**/ html h2 { color: var(--couleur-bleu-fonce, #223654); font-family: var(--font-family-titre, Roboto, sans-serif); font-size: 36px; font-style: normal; font-weight: 700; line-height: 40px; display: flex; padding: 48px 0 0 0; margin-bottom: 16px; flex-direction: column; align-items: flex-start; } /**tag pour augmenter la spécificité afin d'overwrite le css du font**/ html h3 { color: var(--couleur-bleu-fonce, #223654); font-family: var(--font-family-titre, Roboto, sans-serif); font-size: 28px; font-style: normal; font-weight: 700; line-height: 32px; display: flex; padding-top: 24px; margin-bottom: 16px; flex-direction: column; align-items: flex-start; } /**tag pour augmenter la spécificité afin d'overwrite le css du font**/ html h4 { margin-top: 16px; } .hyperlien { text-decoration-line: underline; text-decoration-style: solid; } .hyperlien::after { content: "\00a0" url("../../../communs/ressources/img/lien-externe.svg"); text-decoration: none; } /******** Correctifs pour ne pas avoir d'espace entre des éléments inline (exemple des hyperliens) *****/ /**tag pour augmenter la spécificité afin d'overwrite les autres css**/ html .inline-span-spacing-fix { font-size: 0; } .inline-span-spacing-fix > span, a { font-size: 16px; line-height: 24px; } /************************/ .anchor-menu { scroll-behavior: smooth; list-style: none; margin-top: 24px; border-top: 1px solid var(--couleur-bordure, #C5CAD2); border-bottom: 1px solid var(--couleur-bordure, #C5CAD2); background: var(--couleur-fond-menu-ancre, #F7F7F7); display: flex; padding: 32px; flex-direction: column; align-items: flex-start; gap: 16px; } .anchor-menu a { text-decoration: none; }