/* UI ----------------------------------------------------------------------------------------- */
/* Titles */
h1 { margin: 0 0 15pt; padding: 0; font-family: "Roboto", Arial, Helvetica, sans-serif; font-weight: 700; font-size: 36px; line-height: 40px; color: var(--color-0054a6); }
h2 { margin: 50px 0 15px; padding: 0; font-family: "Roboto", Arial, Helvetica, sans-serif; font-weight: 500; font-size: 28px; line-height: 31px;  color: var(--color-0054a6); }
h3 { margin: 35px 0 15px; padding: 0; font-family: "Roboto", Arial, Helvetica, sans-serif; font-weight: 700; font-size: 25px; line-height: 28px; color:var(--color-0a0a0a); }
h4 { margin: 20px 0 5px; padding: 0; font-family: "Roboto", Arial, Helvetica, sans-serif; font-weight: 500; font-size: 20px; line-height: 22px; color:var(--color-0a0a0a); }
p { margin: 0 0 15px; padding: 0; font-family: "Roboto", Arial, Helvetica, sans-serif; font-weight: 400; font-size: 16px; line-height: 25px; }
p b,
p strong { font-weight: bold !important; }
em { font-style: italic; }
.text-smaller, .description { font-size: 0.85em; line-height: 1.25em; color: var(--color-999999); }

/* Links */
a { -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; -ms-transition: all 0.25s ease-out; -o-transition: all 0.25s ease-out; transition: all 0.25s ease-out; }
a:link, a:visited { text-decoration: none; color: var(--color-0054a6); }
a:hover, a:active { text-decoration: underline; }


/* Listes */
ol { counter-reset: parentlist; }
ul, ol { list-style: none; margin: 5px 0 30px; overflow: hidden; }
ul li, ol li { position: relative; margin-bottom: 10px; font-family: "Roboto", "Helvetica Neue", Arial; font-size: 16px; font-weight: 400; color: var(--color-0a0a0a); line-height: 1.25em; vertical-align: baseline; -webkit-font-smoothing:antialiased !important; }
ul ul, ul ol,
ol ul, ol ol { margin: 10px 0 20px 15px; }
ul { list-style-type: none; }
ul li { padding-left: 15px; }
ul li::before { content: ""; position: absolute; width: 4px; height: 4px; top: 8px; left: 2px; border-radius: 50%; background-color:var(--color-0054a6); }
ol li { padding-left: 25px; }
ol li::before { counter-increment: parentlist; content: counter(parentlist) ". "; position: absolute; left: 0; font-weight: 700; color: var(--color-0054a6); letter-spacing: -0.08em; }
ol ol { counter-reset: childlist;} 
ol ol li::before { counter-increment: childlist; content: counter(childlist) ". "; }
ol ol[type="a"] { counter-reset: alphalower2;}
ol ol[type="a"] li { counter-increment: alphalower2;}
ol ol[type="a"] li::before { content: counter(alphalower2, lower-alpha) ". "; }
ol ol[type="lower-alpha"] { counter-reset: alphalower;}
ol ol[type="lower-alpha"] li { counter-increment: alphalower;}
ol ol[type="lower-alpha"] li::before { content: counter(alphalower, lower-alpha) ". "; }
ol ol[type="upper-alpha"] { counter-reset: alphaupper;}
ol ol[type="upper-alpha"] li { counter-increment: alphaupper;}
ol ol[type="upper-alpha"] li::before { content: counter(alphaupper, upper-alpha) ". "; }
ol ol[type="i"] { counter-reset: romanlower2;}
ol ol[type="i"] li { counter-increment: romanlower2;}
ol ol[type="i"] li::before { content: counter(romanlower2, lower-roman) ". "; }
ol ol[type="lower-roman"] { counter-reset: romanlower; }
ol ol[type="lower-roman"] li { counter-increment: romanlower; }
ol ol[type="lower-roman"] li::before { content: counter(romanlower, lower-roman) ". "; }
ol ol[type="upper-roman"] { counter-reset: romanupper; }
ol ol[type="upper-roman"] li { counter-increment: romanupper; }
ol ol[type="upper-roman"] li::before { content: counter(romanupper, upper-roman) ". "; }
ol li h1:first-child,
ol li h2:first-child,
ol li h3:first-child,
ol li h4:first-child,
ol li p:first-child,
ul li h1:first-child,
ul li h2:first-child,
ul li h3:first-child,
ul li h4:first-child,
ul li p:first-child { margin-top: 0; padding-top: 0; }



/* Boutons */
a.btn-cta-main, a.btn-cta-secondary, a.btn-cta-submit, a.btn-cta-submit-secondary,
a.btn-cta-main:link, a.btn-cta-secondary:link, a.btn-cta-submit:link, a.btn-cta-submit-secondary:link,
button.btn-cta-submit, form input[type=submit] {
    display: inline-block;
    font-family: "Roboto", Arial, Helvetica, sans-serif; font-weight: 500; font-size: normal; color: var(--color-ffffff); line-height: 1em;
    -webkit-border-radius: 23px;
    -moz-border-radius: 23px;
    border-radius: 23px;
    transition: all 0.35s ease; -ms-transition: all 0.35s ease;
	background: var(--color-0054a6); text-decoration: none;
}
a.btn-cta-main:hover, a.btn-cta-secondary:hover, a.btn-cta-submit:hover, a.btn-cta-submit-secondary:hover,
a.btn-cta-main:active, a.btn-cta-secondary:active, a.btn-cta-submit:active, a.btn-cta-submit-secondary:active,
a.btn-cta-submit:hover, a.btn-cta-submit:active,
button.btn-cta-submit:hover, form input[type=submit]:hover,
 button.btn-cta-submit:active, form input[type=submit]:active { background: var(--color-222d65); text-decoration: none; cursor: pointer; }
a.btn-cta-main 	{ padding: 15px 30px; font-size: 16px; }
a.btn-cta-secondary { padding: 10px 30px; font-size: 13px;  }
a.btn-cta-submit, a.btn-cta-submit-secondary, button.btn-cta-submit, form input[type=submit] { border: 0; padding: 10px 30px; font-size: 16px; }
a.btn-cta-submit, button.btn-cta-submit, form input[type=submit] { background: var(--color-0054a6); }
a.btn-cta-submit-secondary:link, a.btn-cta-submit-secondary:visited { background: var(--color-999999); }
a.btn-cta-submit-secondary:hover, a.btn-cta-submit-secondary:active { background: var(--color-666666); cursor: pointer; }

/* Taxonomie */
.box-taxonomie { clear: both; margin: 0px 0 30px 0;}
.box-taxonomie a { display: inline-block; margin-right: 8px; padding: 0 10px;
    font-family: "Roboto", Arial, Helvetica, sans-serif; font-weight: 400; font-size: 13px; color: var(--color-ffffff); line-height: 1.62em;
    -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
    transition: all 0.35s ease; -ms-transition: all 0.35s ease; }
.box-taxonomie a:link, .box-taxonomie a:visited { text-decoration: none; color: var(--color-0054a6); background:var(--color-eeeeee); }
.box-taxonomie a:hover, .box-taxonomie a:active { text-decoration: none; color: var(--color-ffffff); background:var(--color-0054a6); }


/* Table */
table th { padding: 15px; font-family: "Roboto", Arial, Helvetica, sans-serif; font-weight: 500; font-size: 16px; line-height: 20px; color: var(--color-ffffff); text-align: left; background: var(--color-999999); }
table tr:nth-child(even) { background-color: var(--color-f2f2f3); }
table td { padding: 15px; font-size: 14px; }


/* box-important */
.box-important { margin: 15px 0; padding: 30px; background: var(--color-eeeeee); }
.box-important h1:first-child, .box-important h2:first-child, .box-important h3:first-child, .box-important h4:first-child, .box-important h5:first-child, .box-important h6:first-child { margin-top: 0 !important; }
.box-important *:last-child { margin-bottom: 0 !important; padding-bottom: 0 !important; }
.box-important-secondary { margin: 15px 0; border-top: 1px solid var(--color-c9c9c9); border-bottom: 1px solid var(--color-c9c9c9); width: 100%; padding: 10px 0; }
.box-important-secondary h1:first-child, .box-important-secondary h2:first-child, .box-important-secondary h3:first-child, .box-important-secondary h4:first-child, .box-important-secondary h5:first-child, .box-important-secondary h6:first-child { margin-top: 0 !important; }
.box-important-secondary *:last-child { margin-bottom: 0 !important; padding-bottom: 0 !important; }

/* box-important-stepbystep */
table.box-important-stepbystep { border: 0; margin-bottom: 20px; width: 100%; font-family: "Roboto", Arial, Helvetica, sans-serif; font-size: 16px; line-height: 25px; color: var(--color-0a0a0a); -webkit-font-smoothing: antialiased !important; font-weight: 500; line-height: 19px; background: var(--color-eeeeee); }
table.box-important-stepbystep tr { border: 0; }
table.box-important-stepbystep tr td { border: 0; padding: 30px 30px 15px 30px; }
table.box-important-stepbystep tr td ul { list-style-type: none; margin-left: 20px; padding-left: 0; }
table.box-important-stepbystep tr td ol > li { border-bottom: 1px solid var(--color-c9c9c9); padding-bottom: 15px; margin-bottom: 15px; }
table.box-important-stepbystep tr td h1:first-child,
table.box-important-stepbystep tr td h2:first-child,
table.box-important-stepbystep tr td h3:first-child,
table.box-important-stepbystep tr td h4:first-child,
table.box-important-stepbystep tr td h5:first-child,
table.box-important-stepbystep tr td h6:first-child { margin-bottom: 20px; }
table.box-important-stepbystep tr td *:last-child { margin-bottom: 15px; }

/* box-important-lavaltableimportant */
table.ms-rteTableEvenRow-lavaltableimportant { border: 0; margin-bottom: 20px; width: 100%; font-family: "Roboto",Arial,Helvetica,sans-serif; font-size: 16px; line-height: 25px; color: var(--color-0a0a0a); -webkit-font-smoothing: antialiased !important; font-weight: 500; line-height: 19px; background: var(--color-eeeeee); }
table.ms-rteTableEvenRow-lavaltableimportant tr td { padding: 30px; }
table.ms-rteTableEvenRow-lavaltableimportant h4 { margin: 5px 0 15px; }
table.ms-rteTableEvenRow-lavaltableimportant ul { margin: 0; padding: 0; }
table.ms-rteTableEvenRow-lavaltableimportant ul li::before { content: ""; position: absolute; top: 5px; left: -15px; border-radius: 0; width: 5px; height: 10px; background-image: url(../images/icons/layout/chevron-blue.svg); background-size: 20px; background-repeat: no-repeat; background-position: center center; vertical-align: baseline; background-color: transparent; }

/* blockquote */
blockquote { display: block; border-left: 3px solid var(--color-c9c9c9); margin: 20px 0; padding: 0 0px 0 20px; font-family: "Roboto", Arial, Helvetica, sans-serif; font-weight: 400; font-size: 20px; line-height: 30px; }

/* Iconographies */
.icon-agrandir,
.icon-chevron,
.icon-chevron-double,
.icon-chevron-inline,
.icon-disabled,
.icon-external-inline, .icon-website-inline,
.icon-external,
.icon-important,
.icon-pinpoint,
.icon-print,
.icon-secure,

.icon-download,
.icon-upload,

.icon-document,
.icon-excel,
.icon-pdf,
.icon-powerpoint,
.icon-winzip,
.icon-word,

.icon-address-black,
.icon-address-white,
.icon-courriel-black,
.icon-courriel-white,
.icon-enpersonne-black,
.icon-enpersonne-white,
.icon-fax-black,
.icon-fax-white,
.icon-information-black, .icon-information-black-inline,
.icon-information-white,
.icon-rss-black,
.icon-rss-white,
.icon-schedule-black,
.icon-schedule-white,
.icon-siteweb-black,
.icon-siteweb-white,
.icon-telephone-black,
.icon-telephone-white,
.icon-dollar-white,
.icon-dollar-black,
.icon-facebook-black,
.icon-facebook-white,
.icon-youtube-black,
.icon-youtube-white,
.icon-instagram-black,
.icon-instagram-white,
.icon-twitter-black,
.icon-twitter-white,
.icon-linkedin-black,
.icon-linkedin-white,
.icon-flickr-black,
.icon-flickr-white,
.icon-snapchat-black,
.icon-snapchat-white,
.icon-spotify-black,
.icon-spotify-white,
.icon-tiktok-black,
.icon-tiktok-white
{ float: left; margin-right: 3px; width:25px; height:25px; background-size: 36px; background-position: center center;  background-repeat: no-repeat; }

.text-smaller [class^="icon-"], .description [class^="icon-"] { width: 17px; height: 17px; background-size: 26px; }
form label [class^="icon-"] { width: 17px; height: 17px; background-size: 32px; }



.icon-agrandir { background-image: url('../images/icons/theme/agrandir.svg'); }
.icon-chevron, .icon-chevron-inline { background-image: url('../images/icons/theme/chevron.svg'); background-size: 25px; }
.icon-chevron-double { background-image: url('../images/icons/theme/chevron-double.svg'); background-size: 25px; }
.icon-chevron-inline { display: inline-block; float: none; vertical-align: top; }
.icon-disabled { background-image: url('../images/icons/theme/disabled.svg'); }
.icon-external, .icon-external-inline { background-image: url('../images/icons/theme/externallink.svg'); }
.icon-external-inline { display: inline-block; float: none; vertical-align: top; }
.icon-important { background-image: url('../images/icons/theme/important.svg'); }
.icon-pinpoint { background-image: url('../images/icons/theme/pinpoint.svg'); }
.icon-print { background-image: url('../images/icons/theme/print.svg'); }
.icon-download { background-image: url('../images/icons/theme/download.svg'); }
.icon-upload { background-image: url('../images/icons/theme/upload.svg'); }
.icon-secure { background-image: url('../images/icons/theme/secure.svg'); }

.icon-document { background-image: url('../images/icons/theme/document.svg'); }
.icon-excel { background-image: url('../images/icons/theme/excel.svg'); }
.icon-pdf { background-image: url('../images/icons/theme/pdf.svg'); }
.icon-powerpoint { background-image: url('../images/icons/theme/powerpoint.svg'); }
.icon-winzip { background-image: url('../images/icons/theme/winzip.svg'); }
.icon-word { background-image: url('../images/icons/theme/word.svg'); }

.icon-address-black { background-image: url('../images/icons/theme/adresse-black.svg'); }
.icon-address-white { background-image: url('../images/icons/theme/adresse-white.svg'); }
.icon-courriel-black { background-image: url('../images/icons/theme/courriel-black.svg'); }
.icon-courriel-white { background-image: url('../images/icons/theme/courriel-white.svg'); }
.icon-enpersonne-black { background-image: url('../images/icons/theme/enpersonne-black.svg'); }
.icon-enpersonne-white { background-image: url('../images/icons/theme/enpersonne-white.svg'); }
.icon-fax-black { background-image: url('../images/icons/theme/fax-black.svg'); }
.icon-fax-white { background-image: url('../images/icons/theme/fax-white.svg'); }
.icon-information-black, .icon-information-black-inline { background-image: url('../images/icons/theme/information-black.svg'); }
.icon-information-black-inline { display: inline-block; float: none; vertical-align: top; }
.icon-information-white { background-image: url('../images/icons/theme/information-white.svg'); }
.icon-rss-black { background-image: url('../images/icons/theme/rss-black.svg'); }
.icon-rss-white { background-image: url('../images/icons/theme/rss-white.svg'); }
.icon-schedule-black { background-image: url('../images/icons/theme/heuresouverture-black.svg'); }
.icon-schedule-white { background-image: url('../images/icons/theme/heuresouverture-white.svg'); }
.icon-siteweb-black { background-image: url('../images/icons/theme/siteweb-black.svg'); }
.icon-siteweb-white { background-image: url('../images/icons/theme/siteweb-white.svg'); }
.icon-telephone-black { background-image: url('../images/icons/theme/telephone-black.svg'); }
.icon-telephone-white { background-image: url('../images/icons/theme/telephone-white.svg'); }
.icon-dollar-white { background-image: url('../images/icons/theme/dollar-white.svg'); }
.icon-dollar-black { background-image: url('../images/icons/theme/dollar-black.svg'); }
.icon-facebook-black { background-image: url('../images/icons/social-network/icon-facebook.svg'); }
.icon-facebook-white { background-image: url('../images/icons/social-network/icon-facebook-white.svg'); }
.icon-youtube-black { background-image: url('../images/icons/social-network/icon-youtube-black.svg'); }
.icon-youtube-white { background-image: url('../images/icons/social-network/icon-youtube-white.svg'); }
.icon-instagram-black { background-image: url('../images/icons/social-network/icon-instagram-black.svg'); }
.icon-instagram-white { background-image: url('../images/icons/social-network/icon-instagram-white.svg'); }
.icon-twitter-black { background-image: url('../images/icons/social-network/icon-twitter.svg'); }
.icon-twitter-white { background-image: url('../images/icons/social-network/icon-twitter-white.svg'); }
.icon-linkedin-black { background-image: url('../images/icons/social-network/icon-linkedin.svg'); }
.icon-linkedin-white { background-image: url('../images/icons/social-network/icon-linkedin-white.svg'); }
.icon-flickr-black { background-image: url('../images/icons/social-network/icon-flickr.svg'); }
.icon-flickr-white { background-image: url('../images/icons/social-network/icon-flickr-white.svg'); }
.icon-snapchat-black { background-image: url('../images/icons/social-network/icon-snapchat.svg'); }
.icon-snapchat-white { background-image: url('../images/icons/social-network/icon-snapchat-white.svg'); }
.icon-spotify-black { background-image: url('../images/icons/social-network/icon-spotify.svg'); }
.icon-spotify-white { background-image: url('../images/icons/social-network/icon-spotify-white.svg'); }
.icon-tiktok-black { background-image: url('../images/icons/social-network/icon-tiktok.svg'); }
.icon-tiktok-white { background-image: url('../images/icons/social-network/icon-tiktok-white.svg'); }

ul li .icon-external-inline { vertical-align: middle; }

/* Couleurs */
.palettecouleur { display: inline-block; margin: 0 20px 20px 0; }
.palettecouleur > span:nth-child(1) { display: block; width: 72px; height: 72px; border-radius: 36px; }
.palettecouleur > span { display: block; padding: 10px 5px; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 14px; line-height: 1.25em; vertical-align: middle; }



/* right-col */
#right-col aside { max-width: 360px; }
#right-col aside .content-box > h2 { display: block; margin: 0; padding: 15px; font-family: "Roboto", Arial, Helvetica, sans-serif; font-size: 16px; line-height: 25px; font-weight: 700; line-height: 25px; color: var(--color-ffffff); -webkit-font-smoothing: antialiased !important; background: var(--color-0054a6); text-align: left; }
#right-col aside .content-box .content-container { padding: 15px; background-color: var(--color-f7f7f8); }
#right-col aside .content-box .content-container,
#right-col aside .content-box .content-container p { font-size: 14px; }
#right-col aside .content-box .content-container h2 { margin: 0 0 10px 0; font-size: 18px; }
#right-col aside .content-box .content-container h3 { margin: 0; font-size: 16px; }
#right-col aside .content-box .content-container h4 { margin: 0; font-size: 15px; }
#right-col aside .content-box .content-container ul li,
#right-col aside .content-box .content-container ol li { margin-bottom: 5px; font-size: 14px; }
#right-col aside .content-box .content-container ul li:before { top: 6px; }


/* Accordeon */
.accordion { border-bottom: 1px solid var(--color-666666); overflow: hidden; }
.accordion > h2 { position: relative; cursor: pointer; border-top: 1px solid #666; margin: 0; padding: 15px 0 15px 30px; font-size: 16px; line-height: 20px; font-family: "Roboto", Arial, Helvetica, sans-serif; font-weight: 500; font-weight: normal; color: var(--color-0a0a0a); }
.accordion > h2:before { content: ""; position: absolute; top: 23px; left: 0; width: 14px; height: 2px; background: var(--color-0054a6); }
.accordion > h2:after { content: ""; position: absolute; top: 23px; left: 0; width: 14px; height: 2px; background: var(--color-0054a6); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); }
.accordion.openned > h2 { color: var(--color-0054a6); }
.accordion.openned > h2:after { display: none; }
.accordion > div { display: none; padding: 0 10px 30px 30px; font-family: "Roboto", Arial, Helvetica, sans-serif; font-weight: 400; font-size: 14px; line-height: 22px; }
.accordion + .accordion > h2 { border-top: 0; }
.small-accordion { border: 0; }
.small-accordion h2 { border: 0; padding: 0px 0 0px 17px; font-size: 13px; }
.small-accordion > h2:before { top: 9px; width: 9px; }
.small-accordion > h2:after { top: 9px; width: 9px; }
.small-accordion > div { padding-top: 20px; }


/* TABs */
.tab {}
.tab > ul { margin: 0; padding: 0; list-style: none; background: var(--color-c9c9c9); }
.tab > ul li { float: left; width: 25%; margin: 0; padding: 0; text-align: center; }
.tab > ul li:before { display: none; }
.tab > ul li.current { background: var(--color-eeeeee); }
.tab > ul li.current a { color: var(--color-0054a6); }
.tab > ul li a { display: block; padding: 15px; font-family: "Roboto", Arial, Helvetica, sans-serif; font-weight: 700; font-size: 18px; color: var(--color-333333); text-decoration: none; }
.tab > ul li a:hover, .tab > ul li a:active { color: var(--color-0054a6); }
.tab > div { display: none; padding: 15px; background: var(--color-eeeeee); }
.tab > div > h1:first-child,
.tab > div > h2:first-child,
.tab > div > h3:first-child,
.tab > div > h4:first-child,
.tab > div > h5:first-child,
.tab > div > h6:first-child { margin-top: 0; padding-top: 0; }
.tab > div.current { display: block; }


/* Arrow */
.pager a { display: inline-block; width: 24px; height: 24px; line-height: 24px; text-align: center; font-family: "Roboto", Arial, Helvetica, sans-serif; font-weight: 700; vertical-align: middle; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; }
.pager a:link, .pager a:visited { color: var(--color-0a0a0a); }
.pager a:hover, .pager a:active { color: var(--color-0054a6); background-color: var(--color-eeeeee); text-decoration: none; }
.pager a.current { color: var(--color-0054a6) !important; }
.pager a.current:hover { text-decoration: none; }
.pager span { display: inline-block; width: 24px; height: 24px; line-height: 24px; text-align: center; font-family: "Roboto", Arial, Helvetica, sans-serif; font-weight: 700; vertical-align: middle; }
.pager .ico-arrow,
.pager .ico-arrow-double { background-repeat: no-repeat; background-size: 22px !important; background-position: center; }
.pager .ico-arrow { background-image: url('../images/icons/theme/chevron.svg'); }
.pager .ico-arrow-double { background-image: url('../images/icons/theme/chevron-double.svg'); }
.pager .ico-arrow:hover { background-image: url('../images/icons/theme/chevron.svg'); text-decoration: none; }
.pager .ico-arrow-double:hover { background-image: url('../images/icons/theme/chevron-double.svg'); text-decoration: none; }
.pager .ico-arrow.rotate180,
.pager .ico-arrow-double.rotate180 { -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); }

 /* Présentation du code */
 .code-hint { position: relative; width: auto; max-height: 150px; margin-top: 30px; padding: 15px 33px 15px 15px;
    background-color: var(--color-e6e7e8); border-radius: 5px; overflow: auto; }
.code-hint p { margin: 0 0 0.75em 0; padding: 0; font-size: 12px; line-height: 1.5em; color: var(--color-0a0a0a); }
.code-hint *:last-child { margin-bottom: 0 !important; padding-bottom: 0 !important; }
.code-hint .btncopy { position: absolute; top: 5px; right: 5px; z-index: 2; width: 25px; height: 25px; background-size: 36px; background-position: center center; background-repeat: no-repeat; background-image: url('../images/icons/theme/copy.svg'); cursor: pointer; opacity: 0.25; -webkit-transition: all 0.15s ease-out; -moz-transition: all 0.15s ease-out; -ms-transition: all 0.15s ease-out; -o-transition: all 0.15s ease-out; transition: all 0.15s ease-out; }
.code-hint .btncopy:hover { opacity: 0.5; }
.code-hint .btncopy:active { opacity: 1; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }
/*.code-hint:hover .btncopy { opacity:0.25; }*/

/* FORMULAIRES ----------------------------------------- */

/* General */
fieldset { margin: 0 0 30px 0; border: 0; padding: 0; clear: both; }
fieldset.boxed { padding: 20px; background-color:var(--color-eeeeee); }
form label { display: block; margin: 5px 0; padding: 0; font-family: "Roboto", Arial, Helvetica, sans-serif; font-weight: 500; font-size: 15px; font-weight: bold; color: var(--color-0a0a0a); line-height: 1.2em; }
form .radiocheckbut-wrapper label { margin: 0; line-height: 1em; }


/* Description */
form .description { clear: both; display: block; margin: 5px 0 8px; padding: 0; }


/* Dialog */
fieldset.box-error,
fieldset.box-validation,
fieldset.box-warning {
	display: block;	border: 2px solid var(--color-f8d9dd); margin: 10px 0; padding: 12px; width: 100%; box-sizing: border-box;
	font-family: "Roboto", Arial, Helvetica, sans-serif; font-weight: 500; font-size: 15px; font-weight: normal; color: var(--color-0a0a0a);
}
fieldset.box-error *,
fieldset.box-validation *,
fieldset.box-warning * { font-family: "Roboto", Arial, Helvetica, sans-serif; font-weight: 500; font-size: 15px; color: var(--color-0a0a0a); }
fieldset.box-error { border-color: var(--color-e12324); }
fieldset.box-validation { border-color: var(--color-009c4c); }
fieldset.box-warning { border-color: var(--color-ffb91e); }


/* Progress bar */
.progress-bar { display: inline-block; background: none; text-align: center; max-width: 100%; width: 100%; height: 35px; overflow:hidden; }
.progress-bar > div { position: relative; display: inline-block; }
.progress-bar > div > span {
	position:relative; display: inline-block;  border-radius: 20px;float: left;
	font-size: 20px; line-height: 36px; color: var(--color-666666); font-family: "Roboto", Arial, Helvetica, sans-serif; 
	width: 26px; height: 26px; line-height: 1em; border: 3px solid var(--color-c9c9c9); border-radius: 16px;
	font-size: 15px; font-weight: bold; line-height: 26px; text-align: center;
}
.progress-bar > div > div._valign-parent { position: absolute; top: 10px; left: -60px; width: 150px; font-size: 16px; }
.progress-bar > div.current > span { overflow: hidden; border-color: var(--color-0054a6); color: var(--color-0054a6) ;  }
.progress-bar > div > div._valign-parent > h4._valign-child { display: none }
.progress-bar > div.done > span { border-color: var(--color-0054a6); background: var(--color-0054a6) ; color: var(--color-ffffff); }
.progress-bar > .separator { background: var(--color-c9c9c9); display: inline-block; margin: 0; width: 20px; height: 3px; vertical-align: text-top; }

@media screen and (min-width: 767px) {
	.progress-bar { height: 70px; overflow: inherit; }
	._valign-parent:before { height: inherit; }
	.progress-bar > div > div._valign-parent > h4._valign-child { display: block; 
		margin: 0; padding: 0; font-family: "Roboto", Arial, Helvetica, sans-serif; width:100%; display:inline-block; vertical-align:middle;
	font-weight: 700; font-size: 12px; color: var(--color-666666); text-align: center; height: auto; line-height: 1.25em; white-space: normal; }
	.progress-bar > .separator { width: 12%; }
}


/* Error */
fieldset.error label,
fieldset.error .description { color: var(--color-e12324); }
fieldset.error input[type=text],
fieldset.error textarea,
fieldset.error select { border-color: var(--color-e12324); color: var(--color-e12324); }
fieldset.error input[type=checkbox]~label:before,
fieldset.error input[type=radio]~label:before { border-color: var(--color-e12324); color: var(--color-e12324); }


/* Radio Button + Checkbox */
input[type=checkbox],
input[type=radio] { box-sizing: border-box; padding: 0; outline: none; }
input[type=checkbox],
input[type=radio] { position: absolute; vertical-align: baseline; clip: rect(1px, 1px, 1px, 1px); }
input[type=checkbox]~label,
input[type=radio]~label { position: relative; padding-left: 27px; font-weight: normal; cursor: pointer; line-height: 17px; }
input[type=checkbox]~label:before,
input[type=radio]~label:before { content: ''; position: absolute; top: 0; left: 0; width: 16px; height: 16px; border: 1px solid var(--color-c9c9c9); background: var(--color-f2f2f3); outline: none !important; }
input[type=checkbox]~label:after,
input[type=radio]~label:after { content: ''; position: absolute; top: 4px; left: 4px; width: 10px; height: 10px; background: var(--color-0054a6); outline: none;
    -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: alpha(opacity=0); filter: alpha(opacity=0); -webkit-transition: all .15s ease-out; -moz-transition: all .15s ease-out; -o-transition: all .15s ease-out; transition: all .15s ease-out;
}
input[type=checkbox]:focus~label:before,
input[type=radio]:focus~label:before { outline: var(--color-0a0a0a) dotted 1px; }
input[type=radio]~label:before { -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; }
input[type=radio]~label:after { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
input[type=checkbox]:checked~label:after,
input[type=radio]:checked~label:after { -moz-opacity: .99; -khtml-opacity: .99; -webkit-opacity: .99; opacity: .99; -ms-filter: alpha(opacity=99); filter: alpha(opacity=99); }
.radiocheckbut-wrapper > div > span { display: block; margin: 0 0 5px 0; }
.radiocheckbut-wrapper span:last-of-type { margin-right: 0; }

/* Sélecteur on/off */
label.selecteur-onoff  { position: relative; display: inline-block; width: 60px; height: 34px; margin-top: 8px; }
label.selecteur-onoff input { opacity: 0; width: 0; height: 0; }
label.selecteur-onoff input:checked+.slider { background-color: var(--color-0054a6); }
label.selecteur-onoff input:checked+.slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); }
label.selecteur-onoff .slider { position: absolute; content: ""; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--color-c9c9c9); -webkit-transition: .4s; transition: .4s; }
label.selecteur-onoff .slider:before{ position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: var(--color-ffffff); -webkit-transition: .4s; transition: .4s; }
label.selecteur-onoff .slider.round { border-radius: 34px; }
label.selecteur-onoff .slider.round:before { border-radius: 50%; }
.error label.selecteur-onoff .slider { background-color: var(--color-e12324); }

/* Text field */
form input[type=text] {
	border: 1px solid var(--color-c9c9c9); padding: 8px 12px; width: 100%; background: var(--color-f2f2f3);
	font-family: "Roboto", Arial, Helvetica, sans-serif; font-weight: 500; font-size: 15px; color: var(--color-0a0a0a);
}
form input[type=text]:focus { outline: none; }
form fieldset.boxed input[type=text] { border: 0; background-color: var(--color-ffffff);}


/* Textarea */
form fieldset > div textarea {
	box-sizing: border-box; display: block; border: 1px solid var(--color-c9c9c9); padding: 8px 12px; width: 100%; background: var(--color-f2f2f3);
	font-family: "Roboto", Arial, Helvetica, sans-serif; font-weight: 500; font-size: 15px; color: var(--color-0a0a0a); resize: vertical;
}
form fieldset > div textarea:focus { outline: none; }
form fieldset.boxed textarea { border: 0; background-color: var(--color-ffffff);}


/* Select */
select { width: 100%; height: 38px; border: 1px solid var(--color-c9c9c9); padding: 8px 12px;
	font-family: "Roboto", Arial, Helvetica, sans-serif; font-weight: 500; font-size: 15px; color: var(--color-0a0a0a); background: var(--color-f2f2f3); }
select:focus { outline: none; }
select option { font-family: "Roboto", Arial, Helvetica, sans-serif; font-weight: 500; }
form fieldset.boxed select { border: 0; background-color: var(--color-ffffff);}


/* File upload */
form fieldset input[type=text].uploadFile { display: inline; width: 60%; background: var(--color-f2f2f3); -webkit-border-top-right-radius: 0; -webkit-border-bottom-right-radius: 0; -moz-border-radius-topright: 0; -moz-border-radius-bottomright: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
form fieldset .file-upload {
	position: relative; overflow: hidden; clear: none; display: inline; box-sizing: border-box; margin: 0 0 0 -5px; border: 0; padding: 9px 20px 9px 15px; background-color: var(--color-0054a6); background-image: none;
	font-family: "Roboto", Arial, Helvetica, sans-serif; font-weight: 500; font-size: 15px; text-align: center; color: var(--color-ffffff); white-space: nowrap; vertical-align: middle;
	-webkit-border-top-right-radius: 18px; -webkit-border-bottom-right-radius: 18px; -moz-border-radius-topright: 18px; -moz-border-radius-bottomright: 18px; border-top-right-radius: 18px; border-bottom-right-radius: 18px;
}
form fieldset .file-upload span { background: url('../images/icons/theme/download-white.svg') 0 2px no-repeat; background-size: 26px; padding-left: 23px; background-position: -8px -4px }
form fieldset .file-upload input.upload { position: absolute; top: 0; right: 0; margin: 0; padding: 0; font-size: 20px; cursor: pointer; opacity: 0; filter: alpha(opacity=0); }


/* Badge */
.badge-help {
	border-radius: 9px; -webkit-border-radius: 9px; -moz-border-radius: 9px; background: var(--color-0054a6);
	display: inline-block; margin-left: 5px; width: 16px; line-height: 16px;
	font-family: "Roboto", Arial, Helvetica, sans-serif; font-weight: 700; color: var(--color-ffffff); font-size: 12px; text-align: center; font-weight: bold; vertical-align: top;
}

/* Shared Icons */
.shareicons { margin-top: 30px; border-top: 1px solid var(--color-c9c9c9); padding-top: 8px; }
.shareicons p { margin: 0 0 5px 0; padding: 0; font-size: 14px; line-height: 1em; }
.shareicons a { display: inline-block; margin: 0 -3px; width: 25px; height: 25px; overflow: hidden; cursor: pointer; }

/* REACT */
.catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
}

.catalog-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.catalog-card__image {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.catalog-card__content {
    padding: 1rem;
}

.catalog-card__meta {
    display: flex;
    gap: 1rem;
    margin: 1rem 0;
}

.catalog-card ul {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.catalog-card li {
    background: #efefef;
    padding: .25rem .5rem;
    border-radius: 20px;
    font-size: .8rem;
}


.catalog-toolbar {

    display:flex;
    gap:1rem;
    align-items:center;
    margin-bottom:2rem;
    flex-wrap:wrap;

}

.catalog-toolbar input{

    flex:1;
    min-width:250px;

}

.catalog-toolbar select{

    width:180px;

}