@charset "UTF-8";
/* Inspiré de KNACSS Reborn (Alsacreations) Licence WTFPL http://www.wtfpl.net/ */

/* VARIABLES */

body {
--color-1: #F7F5EF;
--color-2: #0F0F0F;
--color-3: #FAD850;
--color-3-30: #FFF3C5;
--color-3-50: #EFDE9A;
--color-4: #C65A2E;
--color-4-30: #FFECDE;
--color-5: #5C3BEB;
--color-5-30: #E4DEFF;
--color-6: #FFFFFF;
--color-7: #808080; /* medium grey */
--color-8: #EFEFEF; /* light grey */
--color-9: #59FFCB; /* sélection */
--color-10: #0A3622;  /* succès */
--color-10-20: #D1E7DD;  /* succès background */
--color-11: #DC3545; /* erreur */
--color-11-20: #F8D7DA; /* erreur background */
--color-12: #FEF159; /* highlight */

--color-success: #0A3622;
--color-error: #dc3545;
--x1: 0.625rem; --x2: 1.25rem; --x3: 1.875rem; --x4: 2.5rem; --x6: 3.75rem; --x10: 6.25rem; }

@font-face {
    font-family: 'Sora-ExtraBold';
    src: url('assets/fonts/Sora-ExtraBold.woff2') format('woff2'),
         url('assets/fonts/Sora-ExtraBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sora-SemiBold';
    src: url('assets/fonts/Sora-SemiBold.woff2') format('woff2'),
         url('assets/fonts/Sora-SemiBold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter-Bold';
    src: url('assets/fonts/Inter-Bold.woff2') format('woff2'),
         url('assets/fonts/Inter-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter-Regular;
    src: url('assets/fonts/Inter-Regular.woff2') format('woff2'),
         url('assets/fonts/Inter-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


/* RESET */

*, *::before, *::after { box-sizing: border-box; /* 1 Switch to border-box model for all elements */ min-width: 0; /* 2 Avoid min-width: auto on flex and grid items */ }
html { font-size: 100%; -webkit-tap-highlight-color: transparent; /* 1 Remove the grey highlight on links in iOS */ -webkit-text-size-adjust: 100%; /* 2 Prevent orientation font changes in iOS */ overflow-wrap: break-word; /* 3 Breaks words to prevent overflow in all browsers */ }
body { margin: 0; font-family: "Inter-Regular", "Roboto", "Arial", "Helvetica Neue", "Helvetica", sans-serif; font-size: var(--x2); line-height: 1.4; background-color: var(--color-6); color: var(--color-2); }
a, area, button, input, label, select, summary, textarea, [tabindex] { -ms-touch-action: manipulation; touch-action: manipulation; } /* Remove the tapping delay on clickable elements in all browsers */
button, input, select, textarea { margin: 0; background-color: transparent; color: inherit; font-family: inherit; font-size: inherit; line-height: inherit; letter-spacing: inherit;  vertical-align: middle; } /* Change the inconsistent appearance in all browsers + Add typography inheritance in all browsers */
button, input:not([type="radio"]):not([type="checkbox"]), select, textarea { border: 0; } /* Basic reset */
input[type="radio"] { margin-right: 0.4rem !important; }
pre, code, kbd, samp { font-family: monospace, monospace; /* Correct the inheritance and scaling of font size in all browsers. */ font-size: 1em; /* Correct the odd `em` font sizing in all browsers */ }
pre { tab-size: 2; white-space: pre-wrap; line-height: normal; overflow: auto; -ms-overflow-style: scrollbar; }
button, input { overflow: visible; } /* Show overflow in IE/Edge */
button, select { text-transform: none; } /* Remove the inheritance of text transform in Firefox */
button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } /* Correct the inability to style clickable types in iOS and Safari */
form, fieldset { border: none; }
fieldset { margin: 0; padding: var(--x2); }
legend { display: table; max-width: 100%; padding: 0 0.125rem; border: 0; color: inherit; white-space: normal; }
label { display: inline-block; cursor: pointer; }
textarea { overflow: auto; vertical-align: top; resize: vertical; white-space: pre-wrap; }

#test-en-ligne fieldset { border-bottom: 1px solid var(--color-7); padding-bottom: var(--x4); margin-bottom: var(--x4); }
#test-en-ligne fieldset strong { font-size: 1.6rem; font-family: "Sora-SemiBold", "Roboto", "Arial", "Helvetica Neue", "Helvetica", sans-serif; }

/* EMBED CONTENT */
 
audio, canvas, iframe, img, svg, video { vertical-align: middle; }
img, table, td, blockquote, pre, code, input, textarea, select, video, svg, iframe { max-width: 100% !important; }
figure { margin: var(--x2) 0 var(--x4) 0 !important; }
img, textarea { height: auto !important; }
img { border-style: none; }
iframe { border-style: none; } /* Remove the border on iframes in all browsers */
svg:not([fill]) { fill: currentColor; } /* Fill color matching to text color */
svg:not(:root) { overflow: hidden; } /* Hide the overflow in IE */
hr { box-sizing: content-box; height: 0; overflow: visible; border: 0; border-top: 2px solid var(--color-2); margin: var(--x6) 0; clear: both; color: inherit; }
table { width: 100%; max-width: 100%; table-layout: fixed; border-collapse: collapse; vertical-align: top; margin-bottom: var(--x2); }
td { vertical-align: top; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* Disable animations styles when reduced motion is enabled */
[aria-busy="true"] { cursor: progress; } /* Change the cursor on busy elements in all browsers */
[aria-controls] { cursor: pointer; } /* Change the cursor on control elements in all browsers */
[aria-disabled="true"], [disabled] { cursor: not-allowed; } /* Change the cursor on disabled, not-editable, or otherwise inoperable elements in all browsers */
[aria-hidden="false"][hidden] { display: initial; } /* Change the display on visually hidden accessible elements in all browsers */
[aria-hidden="false"][hidden]:not(:focus) { clip: rect(0, 0, 0, 0); position: absolute; }


/* FORM ODDITIES */

[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; } /* Correct the odd appearance in Chrome, Edge, and Safari + Correct the outline style in Safari */
::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } /* Correct the cursor style of increment and decrement buttons in Safari */
::-webkit-input-placeholder { color: inherit; opacity: 0.54; } /* Correct the text style of placeholders in Chrome, Edge, and Safari */
::-webkit-search-decoration { -webkit-appearance: none; } /* Remove the inner padding in Chrome, Edge, and Safari on macOS */
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } /* Correct the inability to style upload buttons in iOS and Safari + Change font properties to `inherit` in Safari */
::-moz-focus-inner { border-style: none; padding: 0; } /* Remove the inner border and padding of focus outlines in Firefox */
/* :-moz-focusring { outline: 1px dotted ButtonText; } Restore the focus outline styles unset by the previous rule in Firefox */
:-moz-ui-invalid { box-shadow: none; } /* Remove the additional :invalid styles in Firefox */


/* PRINT QUICK RESET */
 
@media print {
  * { background: transparent !important;  box-shadow: none !important; text-shadow: none !important; }
  body { width: auto; margin: auto; font-family: serif; font-size: 12pt; }
  p, .p-like, h1, .h1-like, h2, .h2-like, h3, .h3-like, h4, .h4-like, h5, .h5-like, h6, .h6-like, blockquote, label, ul, ol { color: var(--color-2); margin: auto; }
  .print { display: block; }
  .no-print { display: none; }
  p, .p-like, blockquote { orphans: 3; widows: 3; }  /* no orphans, no widows */
  blockquote, ul, ol { page-break-inside: avoid; } /* no breaks inside these elements */
  h1, .h1-like, h2, .h2-like, h3, .h3-like, caption { page-break-after: avoid; } /* no breaks after these elements */
  a { color: var(--color-2); }
  /* displaying URLs a[href]::after { content: " (" attr(href) ")"; } */
  a[href^="javascript:"]::after, a[href^="#"]::after { content: ""; }
}


/* COLORS */

.eau-light { background-color: var(--color-5-30); }
.border-air { border-color: var(--color-3); } .air { background-color: var(--color-3); } .air-light { background-color: var(--color-3-30); }
.border-feu { border-color: var(--color-4); } .feu { background-color: var(--color-4); } .feu-light { background-color: var(--color-4-30); }
.border-elec { border-color: var(--color-5); } .elec { background-color: var(--color-5); } .text-elec { color: var(--color-5); }
.white { background-color: var(--color-6); !important; } .text-white { color: var(--color-6) !important; }
.border-lightgrey { border: 2px solid var(--color-8); } .lightgrey { background-color: var(--color-8); }
.text-mediumgrey {   color: var(--color-7) !important; }
.border-darkgrey { border: 2px solid var(--color-2); } .text-darkgrey {   color: var(--color-2) !important; }
.border-dashed { border: 2px dashed !important; }
.text-disabled { color: var(--color-7); }
.text-error { color: var(--color-error); }
.text-darkred { color: var(--color-4); }

.elec-light { background-color: #EA00FF; }


/* TITRES */

h1, .h1-like, h2, h3, .h3-like { margin: 0;  font-family: "Sora-ExtraBold", "Roboto", "Arial", "Helvetica Neue", "Helvetica", sans-serif; }
.h2-like, h4, .h4-like, h5, .h5-like, h6, .h6-like { margin: 0; font-weight: bold; }
h1 { line-height: 1; font-size: 2.25rem; text-align: left !important; }
h1 a, h1 a:hover, h1 a:focus, h1 a:active, h1 a:visited { text-decoration: none; }
h2, .h2-like { font-size: 2rem; margin-bottom: var(--x4); }
h2.boost { font-size: 2.625rem; color: var(--color-4); }
h2.boostcaption { font-size: 2.625rem; font-family: "Sora-ExtraBold", "Roboto", "Arial", "Helvetica Neue", "Helvetica", sans-serif; font-weight: bold; line-height: 1.4; color: var(--color-4); }
h2.presentation { font-size: 1.875rem !important; font-weight: bold !important; margin-bottom: var(--x2) !important; }
h3, .h3-like { font-size: 1.625rem; margin-bottom: var(--x2); }
.basic-font { font-family: "Inter-Regular", "Roboto", "Arial", "Helvetica Neue", "Helvetica", sans-serif !important; }
h3.smaller { font-size: 1.625rem !important; }
h4 { font-size: 1.375rem; }
h5 { font-size: 1.25rem; }
.highlight { background: var(--color-12); }


/* HEADER */
 
header { margin: 0; padding: 1.25rem 0 1.25rem 0 !important; }
header.accueil { margin: 0; !important; }
.tiret { border-bottom: 5px solid var(--color-2); width: 2rem; display: inline-block; margin-left: 0.5rem; }


/* FOOTER */

footer { padding: 0; border-top: var(--x2) solid var(--color-3); }
footer .links span { margin-right: var(--x2); }
footer .links span:last-child { margin-right: 0; }
.creative-commons { padding: var(--x4); }
footer .tiret { border-width: 4px; }
.line-height-1 { line-height: 1; }


/* BURGER MENU */

.burger input { position: absolute; top: 40px; right: 40px; height: 20px;  z-index: 5; }
.burger input { position: absolute; width: 100%; height: 2px; top: 0; right: 0; left: 0; display: block; background: var(--color-6) !important; border-color: var(--color-6) !important; box-shadow: none !important; appearance: none; }
.burger input:checked { opacity: 0; top: 50%; }
.burger input ~ .burger-nav { display: none; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; position: absolute !important; overflow: auto !important; }
.burger input ~ .burger-nav > ul { text-align: center; font-size: 1.25rem; position: absolute; top: 5rem; width: 100%; }
.burger input ~ .burger-nav > ul > li { margin: 0; padding: 0; }
.burger input ~ .burger-nav > ul > li > a { text-decoration: none; font-weight: bold; display: block; padding: 1.25rem; }
.burger input:checked ~ .burger-nav { display: block; background: var(--color-6); position: fixed; z-index: 10; overflow: hidden; width: 100% !important; height: 100%!important; top: 0; right: 0; bottom: 0; left: 0; }
.burger input:checked ~ .burger-nav > ul > li { display: block; }
.burger-nav { overflow: auto !important; }
.burger-nav .button { margin: var(--x1) var(--x3); padding: var(--x1) !important; font-size: var(--x2) !important; width: calc(100vw - 60px) !important; }
.menu-button { z-index: 9 !important; position: absolute; top: 2.75rem; right: 0; width: 4rem; height: 2.4rem; line-height: 2.4rem; margin: 0 var(--x3) 0 auto; text-align: center; background: var(--color-5); color: var(--color-6); font-size: 1rem;  border-radius: 4px; }
.menu-button-close { background: var(--color-2) !important; border-radius: 100% !important; width: 3rem !important; height: 3rem !important;  top: 2rem; padding: 0.2rem; }
.burger input:checked ~ .menu-button-close { display: block !important; }
.overflow-hidden { overflow: hidden; } /* To prevent scroll below burger menu - JS needed */
.cta-menu { font-weight: bold; border-radius: 100rem; padding: 1em 1.6rem;}


/* POPIN */

.popin input#form-brochure { position: absolute; top: 40px; right: 40px; height: 20px;  z-index: 5; }
.popin input#form-brochure { position: absolute; width: 100%; height: 2px; top: 0; right: 0; left: 0; display: block; background: var(--color-6) !important; border-color: var(--color-6) !important; box-shadow: none !important; appearance: none; }
.popin input:checked { opacity: 0; top: 50%; }
.popin input ~ .popin-nav { display: none; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; position: absolute !important; overflow: auto !important; }
.popin input ~ .popin-nav > ul { text-align: center; font-size: 1.25rem; position: absolute; top: 5rem; width: 100%; }
.popin input ~ .popin-nav > ul > li { margin: 0; padding: 0; }
.popin input ~ .popin-nav > ul > li > a { text-decoration: none; font-weight: bold; display: block; padding: 1.25rem; }
.popin input:checked ~ .popin-nav { display: block; background: var(--color-6); position: fixed; z-index: 10; overflow: hidden; width: 100% !important; height: 100%!important; top: 0; right: 0; bottom: 0; left: 0; }
.popin input:checked ~ .popin-nav > ul > li { display: block; }
.popin-nav { overflow: auto !important; }
.popin input:checked ~ .menu-button-close { display: block !important; }


/* NAV MON OFFRE */

nav.sous-nav a { margin-right: 1rem !important; padding: 0 var(--x1) !important; line-height: 3.278 !important; font-size: 1.125rem !important; border: 4px solid var(--color-8); background: var(--color-8) !important; border-radius: 4px; display: inline-block; }
nav.sous-nav a.active-link, nav.sous-nav a.active-link span { background: var(--color-3) !important; color: var(--color-2); border-color: var(--color-3); font-weight: bold; }
nav.sous-nav a:focus, nav.sous-nav a.active-link:focus, nav.sous-nav a.active-link:focus span { background: var(--color-2) !important; border-color: var(--color-2) !important; color: var(--color-6) !important; }
nav.sous-nav a:hover, nav.sous-nav a:hover span, nav.sous-nav a.active-link:hover, nav.sous-nav a.active-link:hover span { background: var(--color-3) !important; border-color: var(--color-3) !important; color: var(--color-2) !important; }


/* NAVIGATION ACTIVE LINK */

.active-link span { font-weight: bold; background: var(--color-5); color: var(--color-6); }
.active-link span.air { background: var(--color-3); color: var(--color-2); }


/* NAV HP */

.menu-items { margin-left: var(--x4); margin-right: var(--x4); padding-top: var(--x4); padding-bottom: var(--x4); }
.menu-items div a { display: inline-block; width: 100%; padding: 1.25rem 1.25rem 1.25rem 2rem; border-radius: 1.1875rem; font-size: 1.5rem; font-weight: bold; text-decoration: none; background-image: url("Images/chevron-right.svg"); background-repeat: no-repeat; background-position: right; background-origin: content-box; background-size: var(--x4); border: 4px solid transparent; }
.menu-items div a:focus, .menu-items div a:hover { border: 4px solid var(--color-2); }
.menu-items div a:active { border: 4px solid transparent; }


/* BLOC GÉNÉRAUX */

section { margin: 0 0 var(--x10) 0; }
section footer { border: 0; margin-top: var(--x4); }
.section-container { padding: 0 var(--x4); }
.insert, .small-insert { font-size: 1.125rem; }
.with-background { padding: var(--x6) 0; }
.layout-maxed > footer { font-size: 1.125rem; }
.page-caption { font-size: 1.25rem; margin-bottom: var(--x4); max-width: none !important; }
 section p { max-width: 42rem; }
 section.full-width p { max-width: none !important; }
 p, address, ol, ul, dl, blockquote, pre, h3, .h3-like, h4, .h4-like, h5, .h5-like, h6, .h6-like, dt, dd { margin-top: 0; margin-bottom: var(--x4); }
::selection { color: var(--color-2); background: var(--color-9); }
.icon {width: 1.5rem; height: 1.5rem; }

.hidden { display: none; } .text-16 { font-size: 1rem; } .text-18 { font-size: 1.125rem; } .text-20 { font-size: 1.25rem; } .text-24 { font-size: 1.5rem; } .text-bold { font-weight: bold; } .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .float-left { float: left; }

.programmes { text-align: center; margin-bottom: var(--x4); border-spacing: var(--x2); border-collapse: separate; background: var(--color-4-30); border-radius: 8px; padding: var(--x2); }
.programmes p.head { margin: var(--x1) var(--x1) var(--x4) var(--x1); padding: var(--x2); background: var(--color-4); color: var(--color-2); border-radius: 8px; }
.problematiques div { border-radius: 8px; background: var(--color-5-30); }
.tag { background: #FF00F2; margin-right: .875rem; padding: .375rem .75rem; border-radius: 100px; font-size: 1rem; }
.tag:nth-child(2n) { margin-top: var(--x1) !important; margin-right: 0 !important; }
.calendly-inline-widget { height: 45rem !important; }
.border-bottom { border-bottom: 2px solid var(--color-8); }
.section-articles { z-index: 9; }


/* PHOTO */

.photo { width: 100%; max-width: 400px; display: block; background: url("Images/julien_s.png") no-repeat; background-size: 100% !important; }
.photo::after { content: ''; display: block; padding-bottom: 100%; }
.photo3 {  background: url("Images/julien_s3.png") no-repeat; }

/* VIDEO */

.border-1rem { border-radius: 1rem; }

/* FAQ MON OFFRE */

.summary { border-left: 2px solid var(--color-2); padding-left: var(--x3) !important; }
.summary a, .summary a:visited { text-decoration: none; }
.summary span { font-weight: bold; margin-right: var(--x1); }

.faq input { display: none; }
.faq label { display: block; padding: 0; margin: 0; cursor: pointer; padding: var(--x2) var(--x4); }
.faq .qna { margin-bottom: var(--x2); border-radius: 3px; border: 1px solid var(--color-7); }
.faq label h4 { font-size: 1.125rem; font-weight: normal !important; margin: 0 !important; }
.faq label h4 .number, .faq label h4 .question { font-weight: bold; }
.faq label:hover .question { text-decoration: underline; }
.faq input + label + .content { display: none; }
.faq input:checked + label + .content { display: block; padding: 0 var(--x4) var(--x4) var(--x4); }
#bouton-brochure { display: inline-block !important; }

/* BLOG */
 
.note-tags li { display: inline-block; padding: 0; text-decoration: none; margin: 0 var(--x1) var(--x1) 0 !important; }
.note-tags li a { display: inline-block; padding: 0.4rem 0.8rem; border-radius: 4px; background-color: var(--color-8); text-decoration: none; }
.note-tags li a:hover { background-color: var(--color-3); text-decoration: none; }
.note-tags li a:focus, .note-tags li a:active  { background-color: var(--color-2); color: var(--color-6); text-decoration: none; }
.pagination a, .pagination a:hover, .pagination a:focus, .pagination a:active, .pagination a:visited { text-decoration: none; display: inline-block !important; }
.pagination a span, .pagination a:hover span, .pagination a:focus span, .pagination a:visited span { text-decoration: underline; }
.note-tag-container { border-bottom: 2px solid var(--color-8); padding-bottom: var(--x4); }
.avatar { background: var(--color-8); border-radius: 100%; margin-right: var(--x2); width: 6.25rem; height: 6.25rem; }
.avatar img { border-radius: 100%; }
.note-author { padding: 0.45rem 0; min-height: 6.25rem; }
.note-category { background: var(--color-5-30); margin-left: 0.875rem; padding: 0.375rem 0.75rem; border-radius: 100px; }
.note-text h3 { margin: var(--x6) 0 var(--x4) 0 !important; }
.note-text a, .footnotes a { text-decoration: underline !important; }
.note-text a.button { text-decoration: none !important; }

 
/* TESTIMONIALS */
 
.testimonials-container { margin: 0 auto; position: relative; width: 100%; }
.testimonials-container input { display: none; }
.testimonials-container .slide_img { position: absolute; width: 100%; height: 100%; z-index: -1; }
.testimonials-container .slide_img .prev, .testimonials-container .slide_img .next { position: absolute; z-index: 99; }
@keyframes scroll { 0% { opacity: 0;} 100% { opacity: 1;} }
.testimonials-container .slide_img .next { right: 0; }
.testimonials-container .slide_img .prev { left: 0; }
#i1:checked ~ #one, #i2:checked ~ #two, #i3:checked ~ #three, #i4:checked ~ #four, #i5:checked ~ #five, #i6:checked ~ #six, #i7:checked ~ #seven, #i8:checked ~ #eight, #i9:checked ~ #nine  { z-index: 9; animation: scroll 0.4s ease-in-out; }


/* BUTTONS */

.button, .button:hover, .button:focus, .button:active { text-align: center; color: var(--color-2); padding: var(--x2) var(--x4); border-radius: 100px; font-weight: bold; text-decoration: none; border: 4px solid transparent !important; font-size: 1.25rem; display: inline-block; min-width: 300px; }
.small-button { padding: var(--x1) var(--x2) !important; }
.button:hover, .button:focus { border: 4px solid var(--color-2) !important; cursor: pointer; }
.button:active { border: 4px solid transparent !important; }
.button-rounded { border: 1px solid var(--color-2) !important; display: inline-block; width: var(--x6) !important; height: var(--x6) !important; padding: 0.5625rem 0 !important; min-width: var(--x6) !important; }
.button-rounded:hover, .button-rounded:focus { background: #FF00F2; border: 2px solid var(--color-2) !important; padding: 0.5rem !important; }


/* LINKS */
 
a { color: var(--color-2); text-decoration: underline; }
a:focus, a:hover, a:active { color: var(--color-2); text-decoration: underline; }
/*a[href^="http"]::after { content: "\2197"; display: inline-block; position: relative; margin-left: 0.2rem; }*/
.articles a[href^="http"]::after, .note-tags a[href^="http"]::after, .blog a[href^="http"]::after, .pagination a[href^="http"]::after { display: none }
abbr[title] { border-bottom: none; /* Remove the bottom border in Chrome 57- */ text-decoration: underline; text-decoration: underline dotted; /* Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari */ }
a:hover h3, a:focus h3 { text-decoration: underline !important; }
a.underline-none { text-decoration: none !important; }


/* FORMS */

label { font-weight: bold; font-size: 1.125rem; margin-bottom: 0.25rem; }
input[type=text], input[type=email], input[type=tel], textarea { border: 1px solid var(--color-2) !important; border-radius: 4px; height: 40px; width: 100%; max-width: 320px; padding: 0.75rem; }
.max-with-370 { max-width: 370px !important; }
.max-with-185 { max-width: 185px !important; }
input[type=text]:focus, input[type=email]:focus, input[type=tel]:focus, textarea:focus { border: 2px solid var(--color-2) !important; padding-left: 0.6875rem !important; }
textarea { resize: none !important; margin-bottom: 1px !important; }
textarea:focus { margin-top: -1px !important; margin-bottom: 0 !important; }
.success { background: var(--color-10-20); padding: var(--x1) var(--x2); border-radius: 0.4rem; margin-top: 1rem; color: var(--color-10); font-size: 1.2rem; }
.error { background: var(--color-11-20); padding: var(--x1) var(--x2); border-radius: 0.4rem; margin-top: 1rem; color: var(--color-11); font-size: 1.2rem; }


/* LISTS */

ul li { padding: 0 0 var(--x2) 0; }
ul.list-condensed li { padding: 0 0 var(--x1) 0 !important; }
ul li:last-child, ul.list-condensed:last-child { padding-bottom: 0 !important; }
ul, ol { padding-left: var(--x2); }
nav ul, nav ol { list-style: none; padding: 0; }
ol ol, ol ul, ul ol, ul ul, li ul, li ol, nav ul, nav ol, li p, li .p-like { margin: 0; }
.testimonials ul { margin: 0; }
.articles ul li, .testimonials li { margin: 0 0 var(--x4) 0; padding: 0; }
.testimonials li:last-child { margin: 0; }
.articles ul li p, .articles div p { margin-bottom: var(--x1); }
article p a, article a, article h3 { text-decoration: none !important; margin: 0; }
article { border-bottom: 2px solid var(--color-8); padding-bottom: var(--x4); }
article header { margin: 0 !important; padding: 0 !important; border: none !important; }
article footer { text-align: left !important; font-size: 1.125rem; padding: var(--x4) 0; }
.is-unstyled { list-style: none; padding-left: 0; }
.article-blog article { border: none; padding-bottom: 0; }
.article-blog h2 { font-size: var(--x4); font-weight: bold; }
.article-blog footer { padding: var(--x4) 0 !important; margin: var(--x6) 0 !important; border-bottom: 2px solid var(--color-8); }


/* MARGIN & PADDING */
 
.m-0 {  margin: 0; }
.mt-10 { margin-top: 0.625rem; } .mt-20 { margin-top: 1.25rem; } .mt-40 { margin-top: 2.5rem; } .mt-80 { margin-top: 5rem; }
.mb-0 { margin-bottom: 0 !important; } .mb-10 { margin-bottom: 0.625rem; !important; } .mb-20 { margin-bottom: 1.25rem; !important; } .mb-30 { margin-bottom: 1.875rem; !important; } .mb-40 { margin-bottom: 2.5rem; !important; } .mb-60 { margin-bottom: 3.75rem; !important; } .mb-80 { margin-bottom: 5rem; !important; }
.ml-40 { margin-left: 2.5rem; }
.p-0 { padding: 0 !important; } .p-20 { padding: 1.25rem; } .p-30 { padding: 1.875rem; } .p-40 { padding: 2.5rem; } .p-60 { padding: 3.75rem; }
.px-20 { padding: 0 1.25rem; } .px-40 { padding: 0 2.5rem; }
.my-20 { margin-top: 1.25rem; margin-bottom: 1.25rem; }
.my-40 { margin-top: 2.5rem; margin-bottom: 2.5rem; } /* insert dark-grey offre */
.my-80 { margin-top: 5rem; margin-bottom: 5rem; }
.pb-0 { padding-bottom: 0 !important; }


/* GRID */
 .grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.gap-10 { gap: 0.625rem; } .gap-20 { gap: 1.25rem; } .gap-40 { gap: 2.5rem; }


/* SPÉCIFICITÉS MEDIA QUERIES */

@media (max-width: 575px) {
    .vto\:hidden { display: none !important; }
    .vto\:text-left { text-align: left !important; }
    .vto\:float-left { float: left; }
    .vto\:mt-40 { margin-top: 2.5rem; }
    .vto\:p-40 { padding: 2.5rem; }
    .vto\:mb-10 { margin-bottom: 0.625rem; }
    .vto\:mb-20 { margin-bottom: 1.5rem; }
    .vto\:my-40 { margin-top: 2.5rem; margin-bottom: 2.5rem; }
    .vto\:no-side-border { border-left: none !important; border-right: none !important; }
    
    footer div.links span { display: block; }
    footer div.links span:first-child { margin-bottom: 1.25rem; }
    footer div.links span:last-child { margin-top: 1.25rem; }
    
    .note-cover { margin-left: -2.5rem !important; margin-right: -2.5rem; width: calc(100vw); height: calc(100vw / 2); }
    .note-date { display: block; margin-bottom: var(--x1); }
    .note-category { margin-left: 0 !important; }
    
    .avatar { margin-bottom: var(--x4) !important; }
    .note-author { padding: 0 !important; }
    
    .tag { display: inline-block; }
    
    .vto\:small-button { padding: var(--x1) var(--x2) !important; }
}

@media (min-width: 576px) {
    .sm\:text-center { text-align: center; }
    .note-cover { width: 31rem; height: 15.5rem; }
    .sm\:hidden { display: none !important; }
}

@media (max-width: 991px) {
    .vtsm\:hidden { display: none !important; }
    .vtsm\:visually-hidden { position: absolute !important; border: 0 !important; height: 1px !important; width: 1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; }
    .vtsm\:text-left { text-align: left; }
    .vtsm\:float-left { float: left; }
    .vtsm\:mt-40 { margin-top: 2.5rem; }
    .vtsm\:p-0 { padding: 0 !important; }

    .tiret { border-width: 4px; } 
    
    nav.sous-nav { margin-bottom: var(--x4) !important; }
    nav.sous-nav a { width: 100% !important; text-align: center; }
    
    .sous-nav a { text-decoration: none; }
    .sous-nav a:first-child { margin-bottom: var(--x2) !important; }

    h1 { font-size: 1.875rem; margin-top: 0.6rem !important; margin-bottom: 0 !important; }
    h2 { font-size: 1.875rem; margin-bottom: var(--x4) !important; }
    h2.boost { font-size: 2.25rem; line-height: 3rem !important; }
    h2.boostcaption { font-size: 2rem; }
    h3 .h3-like { font-size: 1.5rem; }
    h3.smaller { font-size: 1.375rem !important; }
    h4 { font-size: 1.25rem; }
    h5 { font-size: 1.125rem; }
    
    header { margin: 0; }
    header.accueil { margin: 0; !important; }
    
    .menu-items div a { padding: 1rem 1.25rem 1rem 2rem !important; font-size: 1.25rem !important; }
    
    .testimonials-container { height: 47rem !important; }
    .testimonials-container .slide_img { position: relative !important; width: 100%; height: 100%; z-index: -1; }
    
    .insert .section-container { padding: 0; }
    .small-insert { margin-left: -2.5rem; margin-right: -2.5rem; padding: var(--x4); }
    
    .page-caption { font-size: 1.25rem; margin-bottom: var(--x4); }
    
    .button { min-width: 260px !important; width: 100%; }
}

@media (max-width: 1199px) {
    h2.presentation { font-size: 1.5rem !important; font-weight: bold !important; margin-bottom: var(--x2) !important; }
    section { margin: 0 0 var(--x6) 0; }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .mdo\:m-0 { margin: 0 !important; }
    .mdo\:block { display: block !important; }
    .mdo\:hidden { display: none !important; }
    
    .testimonials-container { min-height: 24rem !important; }
    
    .note-cover { width: 38rem; height: 19rem; }
    
    .tag { display: inline-block; }
}


@media (min-width: 992px) {
    .md\:p-60 { padding: 3.75rem; }
    .md\:mb-30 { margin-bottom: 1.875rem; } .md\:mb-60 { margin-bottom: 3.75rem; } .md\:mb-80 { margin-bottom: 5rem; }
    .md\:hidden { display: none; }
    .md\:text-20 { font-size: 1.25rem; }
    .md\:gap-20 { gap: 1.25rem; } .md\:gap-40 { gap: 2.5rem; } .md\:gap-60 { gap: 3.75rem; }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .md\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .md\:col-span-2 { grid-column: span 2 / span 2; } .md\:col-span-3 { grid-column: span 3 / span 3; } .md\:col-span-4 { grid-column: span 4 / span 4; } .md\:col-span-6 { grid-column: span 6 / span 6; }
    .md\:row-span-2 { grid-row: span 2 / span 2; }
    
    .photo { width: 286px; height: 286px; } .photo::after { content: ''; display: block; padding-bottom: 100%; }
  
    /* MAIN NAVIGATION */
    .layout-maxed nav { font-size: 1.125rem; margin: 0 !important; padding: 0 !important; /*  position: sticky; top: -1px; z-index: 99999; */ }
    .layout-maxed nav a { display: inline-block; line-height: 3; margin: 0 var(--x1) 0 0; padding: 0;  text-decoration: none !important; }
    .layout-maxed nav a:hover span { background: var(--color-3) !important; color: var(--color-2) !important; }
    .layout-maxed nav a:focus span { background: var(--color-2); color: var(--color-6); }
    .layout-maxed nav a:focus span svg { fill: var(--color-6) !important; }
    header nav a:last-child { margin: 0; }
    header nav a span { padding: var(--x1); border-radius: 4px; }
    
    section footer { text-align: center; margin-top: var(--x6); }
    section footer.text-left { text-align: left; }
    .homepage h2 { text-align: center; }
    .homepage h2.presentation { text-align: left; }
    
    nav.sous-nav { margin-bottom: var(--x6) !important; }
    nav.sous-nav a:focus span { background: transparent !important; }
    
    /* DROPDOWN */
    .dropdown { position: relative; display: inline-block; }
    .dropdown-content { display: none; position: absolute; background-color: var(--color-6); z-index: 1;  margin-top: -10px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); border-radius: 4px; text-align: left !important; }
    .dropdown:hover .dropdown-content { display: block; }
    .dropdown-content a { line-height: 1.5 !important; width: 100%; padding: 1rem 1.25rem !important; white-space: nowrap; }
    .dropdown-content a:hover, .dropdown-content a:hover span  { background: var(--color-3) !important; border-radius: 4px; }

    .dropdown-content a span.mdo\:hidden { padding: 0 !important; }

    .testimonials-container p { max-width: none !important; }
    .small-insert { padding: var(--x6); }
}
  
@media (min-width: 1200px) {
    .lg\:float-right { float: right; }
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .photo { width: 348px; height: 348px; }
    
    .layout-maxed nav a { line-height: 4; }
    header { padding: var(--x4) 0 0 0 !important; }
    
    .testimonials-container { min-height: 20rem !important; }
    
    .note-cover { width: 46.625rem; height: 23.3125rem; }
}


/* GRID */

.layout-maxed { display: grid; }
@media (min-width: 576px) {
    .layout-maxed { grid-template-columns: minmax(0rem, 1fr) minmax(auto, 576px) minmax(0rem, 1fr); }
}
@media (min-width: 992px) {
    .layout-maxed { grid-template-columns: minmax(0rem, 1fr) minmax(auto, 992px) minmax(0rem, 1fr); }
}
@media (min-width: 1200px) {
    .layout-maxed { grid-template-columns: minmax(0rem, 1fr) minmax(auto, 1200px) minmax(0rem, 1fr); }
}
.layout-maxed > * { grid-column: 2; } /* Center all children */
.layout-hero { grid-column: 1 / -1; display: grid; grid-template-columns: inherit; }
.layout-hero > * { grid-column: 2; }
@media (max-width: 575px) { .layout-maxed > * { grid-column: 1; } .layout-hero > * { grid-column: 1; } }
.layout-hero-img { grid-column: 1 / -1; justify-self: center; max-width: 100%; }