/* ............................................................................. RESETS Pris certains styles de reboot.css et ajouter certains. ............................................................................. */ *,::after,::before{box-sizing:border-box;} html { font-family: sans-serif; line-height: 1.15; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -ms-overflow-style: scrollbar; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } @-ms-viewport { width: device-width; } article, aside, figcaption, figure, footer, header, hgroup, main, nav, section, picture { display: block; } [tabindex="-1"]:focus { outline: 0 !important; } h1, h2, h3, h4, h5, h6, p, fieldset, ul, ol, li, figure, picture, blockquote {margin: 0; padding: 0; border: 0;} hr {display: block;height: 1px;border: 0;border-top: 1px solid #ccc;margin: 1em 0;padding: 0;} audio, canvas, iframe, img, svg, video {vertical-align: middle;} textarea {resize: vertical;} table {display: table;width: auto;height: auto;margin: 0;padding: 0;border: none;border-collapse: inherit;border-spacing: 0;border-color: inherit;text-align: left;font-weight: inherit;} /* Pour debug */ /* * { outline: 1px solid red; outline-offset: -1px; } */ /* Pour debug #2 */ /* * { background-color: rgba(255,0,0,.2); } * * { background-color: rgba(0,255,0,.2); } * * * { background-color: rgba(0,0,255,.2); } * * * * { background-color: rgba(255,0,255,.2); } * * * * * { background-color: rgba(0,255,255,.2); } * * * * * * { background-color: rgba(255,255,0,.2); } */ /* ............................................................................. BASE TAGS Enlever le base font-size pour s'adapter au user-set font-size. Voir Chrome / Preferences / Taille de police. Donc, change les media queries pour des rem. ............................................................................. */ html {margin: 0; padding: 0;} body {color: var(--color-base);background: var(--color-bg-base);line-height: 1;margin: 0;padding: 0;} body.locked {margin: 0;height: 100%;overflow: hidden;} .onDark {color: var(--color-base-on-dark);} /* Font size global du site. On le met sur tous les enfants direct et pas directement sur le body car on veut conserver le user-set font-size. */ body > * {font-size: 1em;} /* Medium desktop- */ @media (max-width:102rem) { body > * {font-size: calc(0.085em + 0.9vw);} } /* Mobile */ @media (max-width:62rem) { body > * {font-size: 1em;} } /* Liens de base */ a {text-decoration: none;cursor: pointer;color: inherit; } a:hover {text-decoration:none;} /* Focus de base : laisser celui du browser par defaut. Only suppress the focus ring once what-input has successfully started. Suppress focus ring on form controls for mouse users. */ [data-whatintent='touch'] *:focus, [data-whatintent='mouse'] *:focus { outline: none; } /* Sup and sub. */ sup {vertical-align: super;font-size: 40%;} /* All images responsive */ img, svg {height:auto;width: 100%;display:block;} img.forceBigger {width: 100%;} /* Removes animation when the page renders. */ .preload *, .removeTransition {transition:none !important;} /* prefers-reduced-motion detects if the user has the reduced motion preference activated to minimize the amount of movements and animations. */ @media screen and (prefers-reduced-motion: reduce) { * { /* Very short durations means JavaScript that relies on events still works */ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* ............................................................................. PAGE BASE ............................................................................. */ /* OWL SELECTOR L'espacement entre les elements se fera souvent avec le margin-top. Avec cette facon de fonctionner, le 1er item n'aura jamais de margin-top. L'espacement entre les titres est dans titles.css. */ * + p, * + ul, * + ol {margin-top: 1.5002em;} .lessFlow * + p, .lessFlow * + ul, .lessFlow * + ol {margin-top: 0.75em;} /* WIDTHS Les largeurs sont assez standard pour avoir des classes uniquement pour ca. Les exceptions sont gerer dans les styles custom de sections. Les valeurs sont dans configs.css. Options de largeur : 1. FULL width : Pas de classe, car par defaut c'est 100% de large 2. STD width : .wStd */ .wStd, .wStdLeft {padding-left: var(--width-std-left);} .wStd, .wStdRight {padding-right: var(--width-std-right);} /* MAIN Comme la navigation du haut est sticky, on doit ajouter un margin top au main pour le descendre un peu, sinon le debut du main est hidden par la topbar. */ main {padding-top: var(--topbar-height);} .landing main{padding-top: 0;} /* AUTO STYLED CONTENT: Useful for CMS pages because the end-user doesn't have to write specific classes to get the right formatting. Les paragraphes posent toujours un probleme dans un site web, car si on les stylise comme il faut, il faut ensuite les redefinir a pleins d'endroits (car c'est un tag qu'on utilise un peu pour n'importe quel contenu). Donc, au lieu de styliser les p { }, on utilise la classe .typo sur un container. Cette classe stylisera les

child de ce container .typo. C'est un peu le meme probleme pour les liens (), car on les utilise un peu partout, mais doivent aussi avoir un style pour les inline links. On utilise la classe .typoLinks pour ceux-ci. */ .typo {line-height: 1.45;} /* Default ul */ .typo ul:not([class]), ul.list {--padding-left:1.25002em; list-style: none;} .typo ul:not([class]) li, ul.list li {list-style:none;margin-bottom: 0;padding-left: var(--padding-left);position: relative;} .typo ul:not([class]) li::before, ul.list li::before {backface-visibility: hidden;position: absolute;display: block;content: '';background-color: var(--color-green);width: 0.4em;height: 0.4em;top: 0.6em;left: 0;} .typo.bMain--green ul:not([class]) li::before, ul.list li::before{ background-color: #fff; } /* Default ol */ .typo ol:not([class]) {--padding-left:1.25002em; list-style: none;counter-reset:li;} .typo ol:not([class]) li {list-style: none;counter-increment: li;padding-left: var(--padding-left);position: relative;} .typo ol:not([class]) li::before {content: counter(li);color: var(--color-green);display: inline-block;font-weight:bold;width: var(--padding-left);margin-left: calc(-1 * var(--padding-left));} /* Default CTA margin top. */ * + .typo__cta, h3 + .typo__cta, .h3 + .typo__cta {margin-top: 2.5em;} /* On dark */ .typo .onDark ul:not([class]) li::before, .typo .onDark ol:not([class]) li::before {background-color: #fff;} /* Links */ .typoLink, .typoLinks { } .typoLink, .typoLinks a {color:var(--color-orange); text-decoration:none; transition: color 0.2s; } /* Hover */ .typoLink:hover, .typoLinks a:hover {color:var(--color-green);} /* Links avec underline qui animate */ .typoLinkUL { } .typoLinksUL { } .typoLinkUL, .typoLinksUL a {text-decoration:none; position: relative; display: inline-block; } .typoLinkUL::before, .typoLinksUL a::before {position: absolute; z-index: 1; display: block; content: ''; left: 0; right: 0; bottom: 0; height: 1px; background-color: currentColor; transform-origin: 0% 50%; transform: scaleX(0); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* Hover */ .typoLinkUL:hover, .typoLinksUL a:hover { } .typoLinkUL:hover::before, .typoLinksUL a:hover::before {transform: scaleX(1); } /* LISTS Listes ul li utiles dans le site. */ /* Liste sans style */ .listNS {list-style: none;} /* Liste inline horizontale. */ .listInline {list-style: none;padding-left: 0;line-height: 1.5;} .listInline li {position: relative;display: inline-block;margin-bottom: 0;padding-left: 0;} .listInline li:not(:last-child) {margin-right: 2.002em;} /* Smaller, 2 cols list */ .listSm2C {list-style: none;line-height: 1.2;columns: 7em 2;column-gap: 10%;} .listSm2C li {break-inside: avoid;padding: 0.3em 0;} /* Liste dans le panel du topBar. */ .listPanel {font-size: 1.78em;list-style: none;line-height: 1.3;} .listPanel li {display: block;} .listPanel a {text-transform: none;color: var(--color-orange);position: relative;display: inline-block;padding: 0.6em 0;transition: color 0.2s;} /* Hover */ .listPanel a:hover {color: var(--color-green); } /* Liste en colonnes */ .listCols{ column-count: 3; column-gap: 2em; font-weight: 700; } .listCols--2{ column-count: 2; } @media (max-width: 47rem){ .listCols{ column-count: 2; } } @media (max-width: 37.5rem){ .listCols{ column-count: 1; } } /* ............................................................................. SVGs Styles des SVGs du site. Les SVGs sont majoritairement utile pour les icones, mais pas uniquement pour ca. ............................................................................. */ /* SVG ICON Chaque icone / SVG est wrapped dans un .svgIcon. On utilise , mais si pertinent on prend autre chose (ex :

) */ .svgIcon {display:block;font-size: 1em;line-height: 1;width: 1em;height: 1em;} .svgIcon > svg {max-width: none; display: block; fill: currentColor; width: 1em; height: 1em;} /* SVG SPECIFIC SIZES Certains SVG n'ont pas la meme largeur que hauteur. On les ajuste ici. Fixed size parce qu'IE (et vieux Safari) est incompetent */ .svgIcon--logoCoalition, .svgIcon--logoCoalition svg, .svgIcon--logoCoalitionNoText, .svgIcon--logoCoalitionNoText svg {width: 3.198em;height: 1em;} .svgIcon--logoCoalitionVertical, .svgIcon--logoCoalitionVertical svg {width: 1.493em;height: 1em;} .svgIcon--logoCoalitionVerticalWidthPriority, .svgIcon--logoCoalitionVerticalWidthPriority svg {width: 1em;height: 0.67em;} .svgIcon--linedBG, .svgIcon--linedBG svg {width: 1em;height: 1.572em;}