@charset "UTF-8";
/* ===================================================================
 * DEFAULT
 * ================================================================= */
/**
 * SETTINGS : Variables globales, couleurs, polices, etc.
 * TOOLS : Outils disponibles de manières globales, mixins, fonctions
 * GENERIC : Styles de niveau 0 (Normalize.css, resets, box-sizing)
 * ELEMENTS : Éléments HTML (sélecteur de balises), H1–H6, liens, listes, etc
 * LAYOUT : Éléments de mise en page (Grille etc...)
 * OBJECTS : Composants simples (Boutons, Listes etc...)
 * COMPONENTS : Composants (Cartes, Fil d'ariane, Header, Footer, Navigations etc...)
 * SECTIONS : Modules (Actualités, événements etc...)
 * UTILITIES : Les atouts, utilitaires avec des spécificités maximales.
 */
:root {
  --spacer: 8px;
}

@keyframes slide-out-up {
  to {
    transform: translateY(-100%);
  }
}
@keyframes slide-out-down {
  to {
    transform: translateY(100%);
  }
}
@keyframes slide-out-right {
  to {
    transform: translateX(100%);
  }
}
@keyframes slide-out-left {
  to {
    transform: translateX(-100%);
  }
}
@keyframes slide-in-up {
  0% {
    transform: translateY(100%);
  }
}
@keyframes slide-in-down {
  0% {
    transform: translateY(-100%);
  }
}
@keyframes slide-in-right {
  0% {
    transform: translateX(-100%);
  }
}
@keyframes slide-in-left {
  0% {
    transform: translateX(100%);
  }
}
/* ===================================================================
 * FONTS
 * ================================================================= */
/*
 *   => $family: font name
 *   => $police: font file.
 *   => $font-weight: (normal, 600...)
 *   => $font-style: (normal, italic...)
 *   Example :
 *   @font-face {
 *       @include font-face('ExampleFont', 'ExampleFont-webfont', 400);
 *   }
 */
@font-face {
  font-family: "Nunito Sans";
  src: url("/include/css/GAB_JCMB/fonts/nunito-sans-v15-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Nunito Sans";
  src: url("/include/css/GAB_JCMB/fonts/nunito-sans-v15-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Nunito Sans";
  src: url("/include/css/GAB_JCMB/fonts/nunito-sans-v15-latin-800.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Nunito Sans";
  src: url("/include/css/GAB_JCMB/fonts/nunito-sans-v15-latin-900.woff2") format("woff2");
  font-weight: 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "K2D";
  src: url("/include/css/GAB_JCMB/fonts/k2d-v11-latin-300.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "K2D";
  src: url("/include/css/GAB_JCMB/fonts/k2d-v11-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Icons";
  src: url("/include/css/GAB_JCMB/fonts/icons.woff2") format("woff2");
  font-weight: 400;
  font-display: block;
  font-style: normal;
}
/* ===================================================================
 * FORMS
 * ================================================================= */
/*
 *  Placeholder :
 *  A utiliser sur une champ input, ex: "c-form__item"
 *  => $color:          couleur du texte
 *  => $fontWeight:     poids de la police
 */
/*
 *   Checkbox :
 *   => $checkboxMarginTop:         alignement de la case avec le libellé
 *   => $checkboxSize:              largeur et hauteur de la case
 *   => $checkboxBorderColor:       couleur de bordure de la case
 *   => $checkboxBgColor:           couleur de fond de la case
 *   => $checkboxInnerSize:         largeur et hauteur de la coche
 *   => $checkboxInnerBorderColor:  couleur de bordure de la case coché
 *   => $checkboxInnerBgColor:      couleur de fond de la case coché
 *   => $checkboxDisabledColor:     couleur de désactivé de la case
 */
/*
 *   Radio button :
 *   => $radioMarginTop:        alignement du bouton radio avec le libellé
 *   => $radioSize:             largeur et hauteur du bouton radio
 *   => $radioBorderColor:      couleur de bordure du bouton radio
 *   => $radioBgColor:          couleur de fond du bouton radio
 *   => $radioInnerSize:        largeur et hauteur de la coche
 *   => $radioInnerBorderColor: couleur de bordure du bouton radio coché
 *   => $radioInnerBgColor:     couleur de fond du bouton radio coché
 *   => $radioDisabledColor:    couleur de désactivé du bouton radio
 */
/*
 *   Custom select :
 *   => $arrow:   nom du fichier image
 *   => $taille:  width du background en pixels permettant de calculer le padding-right
 *   => $right:   espacement de l'image par rapport au bord droit
 */
/*
 *   IMAGE DECLARATION
 *   => @a : image file name
 *   => @b : background color, repeat...
 *   Example :
 *       .background-image('bullet.png', no-repeat 0 0 #fff);
 */
/**
 * GRADIENT
 */
/**
 * CLEARFIX
 */
/**
 * SVG
 */
/**
 * Background en pleine largeur (à mettre sur un élément before ou after)
 */
/**
 * Génération des colonnes
 */
/**
 * Génère une classe utilitaire avec ses suffixes responsive (issue de 1_settings/breakpoints)
 * @mixin
 * @param {string} $className - Le nom de la classe
 * @param {string} $property - La propriété CSS (exemple: "text-align")
 * @param {string} $property - La valeur de la propriété CSS entière (exemple: "right")
 *
 * @example
 * .u-text-right {
       text-align: right;

        &\@xs {
            @media (min-width: $smallmobile) {
                text-align: right;
            }
        }
        [...]
    }
 */
/**
 * Taille d'un element en cercle
 */
/**
 * 3 tailles de box shadow par défaut (large, medium & small)
 */
/**
 * Scrollbar style
 */
/**
 * Font icon
 */
/**
 * Assistive technology only (sr-only)
 */
/*
 * Calcul la taille d'une colonne dans un contexte CSS Gap
 * Permet d'avoir la taille exact d'une colonne séparée par la gouttière spécifiée.
 * @param  {$nbCols}   int      Nombre de colonnes
 * @param  {$gutter}   int      Gouttière (En px)
 */
html {
  box-sizing: border-box;
}

*,
*::after,
*::before {
  box-sizing: inherit;
}

@media print {
  html {
    font-family: "Nunito Sans", sans-serif;
    font-size: 11pt;
    line-height: 1.4;
  }
  .c-skiplinks,
  .c-main-header,
  .c-footer,
  #tarteaucitronRoot {
    display: none;
  }
  .o-pagination-reglette {
    display: none;
  }
}
/* normalize.css v3.0.2 | MIT License | git.io/normalize */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
  font-size: 62.5%;
}

/**
 * Remove default margin.
 */
body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */
/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none;
}

/* Links
   ========================================================================== */
/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
  outline: 0;
}

/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */
/**
 * Address differences between Firefox and other browsers.
 */
hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace;
  font-size: 1em;
}

/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type=button],
input[type=reset],
input[type=submit] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type=checkbox],
input[type=radio] {
  padding: 0; /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */
input[type=search] {
  -webkit-appearance: textfield; /* 1 */
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold;
}

/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

strong {
  font-weight: 700;
}

i {
  font-style: normal;
}

h1, h2, h3,
h4, h5, h6 {
  font-family: "Nunito Sans", sans-serif;
  color: #000000;
}

h1, .h1 {
  font-size: 4.8rem;
  font-weight: 700;
}
@media (max-width: 991px) {
  h1, .h1 {
    font-size: 4.8rem;
  }
}

h2, .h2 {
  font-size: 3.6rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: calc(var(--spacer) * 4);
}
@media (max-width: 991px) {
  h2, .h2 {
    font-size: 2.4rem;
    margin-bottom: calc(var(--spacer) * 2);
  }
}

h3, .h3 {
  font-size: 2.8rem;
  font-weight: 700;
}
@media (max-width: 991px) {
  h3, .h3 {
    font-size: 1.9rem;
  }
}

h4, .h4 {
  font-size: 2.4rem;
  font-weight: 700;
}
@media (max-width: 991px) {
  h4, .h4 {
    font-size: 1.7rem;
  }
}

h5, .h5 {
  font-size: 2rem;
  font-weight: 600;
}
@media (max-width: 991px) {
  h5, .h5 {
    font-size: 1.5rem;
  }
}

h6, .h6 {
  font-size: 1.6rem;
  font-weight: 600;
}
@media (max-width: 991px) {
  h6, .h6 {
    font-size: 1.3rem;
  }
}

input[type=radio],
input[type=checkbox] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent; /* this is needed for iOS. Otherwise the background just becomes black. */
  border: 2px solid #000000;
  height: 20px;
  width: 20px;
  display: inline-block;
  border-radius: 100%;
  vertical-align: text-bottom;
  position: relative;
  margin-top: 4px;
}
input[type=radio][disabled], input[type=radio][aria-disabled=true],
input[type=checkbox][disabled],
input[type=checkbox][aria-disabled=true] {
  opacity: 0.4;
}
input[type=radio]::before,
input[type=checkbox]::before {
  content: "";
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  top: 0;
}
input[type=radio]:checked::before,
input[type=checkbox]:checked::before {
  width: 8px;
  height: 8px;
  background-color: #000000;
}

input[type=checkbox] {
  border-radius: 2px;
}
input[type=checkbox].fakeRadio {
  border-radius: 100%;
}
input[type=checkbox].fakeRadio:checked::before {
  border-radius: 100%;
}

input[type=radio]::before {
  height: 0;
  width: 0;
}

input[type=radio]:checked::before {
  border-radius: 50%;
}

input[type=checkbox]:indeterminate::before,
input[type=checkbox][aria-checked=mixed]::before {
  border: 2px solid #222;
  height: 0;
  width: 40%;
}

input[type=checkbox]:checked::before {
  border-radius: 2px;
}

a {
  text-decoration: none;
}
@media screen {
  a {
    color: inherit;
  }
}
a:active, a:hover {
  text-decoration: underline;
}

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

html, body {
  scroll-behavior: smooth;
}

body {
  width: 100%;
  color: #000000;
  font-size: 20px;
  font-family: "Nunito Sans", sans-serif;
  font-weight: 400;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
}
body:not(.accueil) #contenu {
  position: relative;
  min-height: 25rem;
  padding-top: calc(var(--spacer) * 3);
}
@media (min-width: 768px) {
  body:not(.accueil) #contenu::before {
    content: "";
    background-image: url("/include/css/GAB_JCMB/images/mountains.svg");
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    width: 347px;
    height: 168px;
    max-height: 80%;
    position: absolute;
    top: 0.9rem;
    right: 0;
    z-index: 10;
  }
}

p {
  line-height: 1.5;
}

h1 {
  margin-top: 0;
  margin-bottom: 0;
}

h3 {
  margin-top: 1em;
  margin-bottom: 1em;
}

h4 {
  margin-top: 1.33em;
  margin-bottom: 1.33em;
}

h5 {
  margin-top: 1.67em;
  margin-bottom: 1.67em;
}

h6 {
  margin-top: 2.33em;
  margin-bottom: 2.33em;
}

p {
  margin-bottom: 1em;
  margin-top: 0.5rem;
}

blockquote {
  font-style: italic;
  margin: 0;
}

.contrainer-fluid {
  width: 100%;
  padding-right: 20px;
  padding-left: 20px;
}

.container {
  margin-left: auto;
  margin-right: auto;
  padding-right: 20px;
  padding-left: 20px;
  max-width: 1320px;
  width: 100%;
}

.container-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr min(80%, 1320px) 1fr;
  gap: 0 40px;
}
.container-grid:not(.container-grid--full-bleed) > * {
  grid-column: 2/3;
}
@media (max-width: 767px) {
  .container-grid:not(.container-grid--full-bleed) > * {
    grid-column: 1/4;
  }
}
.container-grid--full-bleed > * {
  width: 100%;
  grid-column: 1/4;
}

.main-wrapper,
.has-two-columns {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr repeat(12, minmax(2.6666666667px, 70px)) 1fr;
  gap: 0 40px;
  padding-top: calc(var(--spacer) * 3);
}
@media (max-width: 991px) {
  .main-wrapper,
  .has-two-columns {
    gap: 20px;
  }
}

@media (max-width: 991px) {
  .has-two-columns {
    display: flex;
    flex-direction: column;
  }
}

.paragraphe {
  margin-bottom: 5.5rem;
  scroll-margin-top: var(--pseudo-menu-height, 0);
  display: flow-root;
}

.main-column-center {
  grid-column: 2/14;
}

.main-column-left {
  grid-column: 1/10;
}
@media (min-width: 1320px) {
  .main-column-left {
    padding-right: 40px;
  }
}

.main-column-right {
  grid-column: 10/14;
}

.l-document {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* Exemple d'utilisation :
<div class="row">
    <div class="col-md-6">
    <div class="col-md-6">
</div>
 */
.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -20px;
  row-gap: var(--row-gap, 1rem);
}
.row > * {
  flex-grow: 1;
  padding-left: 20px;
  padding-right: 20px;
}

.col {
  flex: 1 0 0;
}

[class*=col-] {
  min-height: 1px;
  padding-left: 20px;
  padding-right: 20px;
  width: 100%;
  flex-grow: 0;
}

@media (min-width: 576px) {
  .col-xs-1 {
    width: 8.3333333333%;
  }
  .col-xs-2 {
    width: 16.6666666667%;
  }
  .col-xs-3 {
    width: 25%;
  }
  .col-xs-4 {
    width: 33.3333333333%;
  }
  .col-xs-5 {
    width: 41.6666666667%;
  }
  .col-xs-6 {
    width: 50%;
  }
  .col-xs-7 {
    width: 58.3333333333%;
  }
  .col-xs-8 {
    width: 66.6666666667%;
  }
  .col-xs-9 {
    width: 75%;
  }
  .col-xs-10 {
    width: 83.3333333333%;
  }
  .col-xs-11 {
    width: 91.6666666667%;
  }
  .col-xs-12 {
    width: 100%;
  }
}
@media (min-width: 768px) {
  .col-sm-1 {
    width: 8.3333333333%;
  }
  .col-sm-2 {
    width: 16.6666666667%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-4 {
    width: 33.3333333333%;
  }
  .col-sm-5 {
    width: 41.6666666667%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-7 {
    width: 58.3333333333%;
  }
  .col-sm-8 {
    width: 66.6666666667%;
  }
  .col-sm-9 {
    width: 75%;
  }
  .col-sm-10 {
    width: 83.3333333333%;
  }
  .col-sm-11 {
    width: 91.6666666667%;
  }
  .col-sm-12 {
    width: 100%;
  }
}
@media (min-width: 992px) {
  .col-md-1 {
    width: 8.3333333333%;
  }
  .col-md-2 {
    width: 16.6666666667%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-4 {
    width: 33.3333333333%;
  }
  .col-md-5 {
    width: 41.6666666667%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-7 {
    width: 58.3333333333%;
  }
  .col-md-8 {
    width: 66.6666666667%;
  }
  .col-md-9 {
    width: 75%;
  }
  .col-md-10 {
    width: 83.3333333333%;
  }
  .col-md-11 {
    width: 91.6666666667%;
  }
  .col-md-12 {
    width: 100%;
  }
}
@media (min-width: 1320px) {
  .col-lg-1 {
    width: 8.3333333333%;
  }
  .col-lg-2 {
    width: 16.6666666667%;
  }
  .col-lg-3 {
    width: 25%;
  }
  .col-lg-4 {
    width: 33.3333333333%;
  }
  .col-lg-5 {
    width: 41.6666666667%;
  }
  .col-lg-6 {
    width: 50%;
  }
  .col-lg-7 {
    width: 58.3333333333%;
  }
  .col-lg-8 {
    width: 66.6666666667%;
  }
  .col-lg-9 {
    width: 75%;
  }
  .col-lg-10 {
    width: 83.3333333333%;
  }
  .col-lg-11 {
    width: 91.6666666667%;
  }
  .col-lg-12 {
    width: 100%;
  }
}
@media (min-width: 1600px) {
  .col-xl-1 {
    width: 8.3333333333%;
  }
  .col-xl-2 {
    width: 16.6666666667%;
  }
  .col-xl-3 {
    width: 25%;
  }
  .col-xl-4 {
    width: 33.3333333333%;
  }
  .col-xl-5 {
    width: 41.6666666667%;
  }
  .col-xl-6 {
    width: 50%;
  }
  .col-xl-7 {
    width: 58.3333333333%;
  }
  .col-xl-8 {
    width: 66.6666666667%;
  }
  .col-xl-9 {
    width: 75%;
  }
  .col-xl-10 {
    width: 83.3333333333%;
  }
  .col-xl-11 {
    width: 91.6666666667%;
  }
  .col-xl-12 {
    width: 100%;
  }
}
.l-stack {
  display: flex;
  flex-direction: column;
}
.l-stack > * + * {
  margin-top: 1em;
}

.l-side {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--side-gap, 40px);
  padding: 0;
  margin: 0;
  list-style-type: none;
}
@media (min-width: 992px) {
  .l-side\@md {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px;
  }
}

.o-burger {
  background-color: #FF4713;
  border: none;
  font-size: 1rem;
  width: 53px;
  height: 53px;
  border-radius: 50%;
  padding: 1rem;
  display: flex;
  place-content: center;
  place-items: center;
}
@media (min-width: 992px) {
  .o-burger {
    display: none;
  }
}
.o-burger__icon, .o-burger__icon::before, .o-burger__icon::after {
  content: "";
  position: absolute;
  display: block;
  height: 3px;
  width: 2.3rem;
  border-radius: 3px;
  background-color: #000000;
  transition: transform 300ms ease, opacity 200ms ease;
  backface-visibility: visible;
}
.o-burger__icon:before {
  transform: translateY(-10px) rotateZ(0deg);
}
.o-burger__icon:after {
  transform: translateY(10px) rotateZ(0deg);
}
.o-burger[aria-expanded=true] .o-burger__icon {
  height: 0;
}
.o-burger[aria-expanded=true] .o-burger__icon:after {
  transform: rotateZ(-45deg);
}
.o-burger[aria-expanded=true] .o-burger__icon:before {
  transform: rotateZ(45deg);
}

.o-button {
  display: inline-flex;
  place-items: center;
  place-content: center;
  text-align: center;
  gap: calc(var(--spacer));
  padding: calc(var(--spacer)) calc(var(--spacer) * 1.5);
  border: 1px solid #000000;
  background-color: #000000;
  color: #ffffff;
  border-radius: 8px;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.3em;
  text-decoration: none;
  outline-offset: 2px;
  transition: background-color, color, border-color, 300ms ease-in-out;
}
.o-button:hover, .o-button:focus, .o-button.active {
  text-decoration: none;
  background-color: #AB2E0A;
  border-color: #AB2E0A;
}
.o-button--primary {
  border: 1px solid #FF4713;
  background-color: #FF4713;
  color: #000000;
}
.o-button--primary:hover, .o-button--primary:focus, .o-button--primary.active {
  background-color: #000000;
  border-color: #000000;
  color: #FF4713;
}
.o-button--secondary {
  border: 1px solid #8E2A0D;
  background-color: #8E2A0D;
  color: #ffffff;
}
.o-button--secondary:hover, .o-button--secondary:focus {
  background-color: #000000;
  border-color: #000000;
}

.o-form-control {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
.o-form-control--level2 {
  margin: 0 0 2rem 7rem;
}
.o-form-control--level2 .o-form-control__label {
  font-weight: 500;
}
@media (min-width: 768px) {
  .o-form-control--50 {
    width: 49.5%;
  }
}
.o-form-control__label {
  font-weight: 700;
  margin-bottom: 20px;
  color: #000000;
  width: 100%;
}
.o-form-control__label::after {
  content: "";
  display: block;
  width: 2.9rem;
  height: 0.5rem;
  background: #FF4713;
  position: relative;
  bottom: -5px;
}
.o-form-control__label span {
  font-size: 80%;
}
.o-form-control__textarea, .o-form-control__select, .o-form-control__input, .o-form-control__file {
  flex: 1;
  width: 100%;
  border: 1px solid #F8F3EF;
  padding: 10px 16px;
  background-color: #ffffff;
  border-radius: 5px;
  color: #000000;
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}
.o-form-control__textarea::placeholder, .o-form-control__select::placeholder, .o-form-control__input::placeholder, .o-form-control__file::placeholder {
  color: #7E7E7E;
  opacity: 1;
}
.o-form-control__select {
  appearance: none;
  background-image: url("./images/select_arrow.png");
  background-repeat: no-repeat;
  background-position: top 22px right 18px;
  padding: 12px 46px 12px 16px;
}
.o-form-control__select option {
  color: #000000;
}
.o-form-control__textarea {
  height: 100px;
}
.o-form-control--search {
  flex-direction: row;
  position: relative;
  min-width: 27rem;
  margin-bottom: 0;
}
.o-form-control--search .o-form-control__input {
  padding-right: 50px;
  flex-grow: 1;
}
.o-form-control--search .o-button {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 0 0 6px 0;
  padding: 11px;
}
.o-form-control__comment {
  font-weight: 400;
  font-size: 1.2rem;
  color: #312E37;
  margin-top: 0.5rem;
  margin-bottom: 0;
  width: 100%;
}
.o-form-control__file-container {
  position: relative;
  align-items: center;
  flex: 1;
  width: 100%;
}
.o-form-control__file-container input[type=file] {
  opacity: 0;
  width: 100%;
  height: 100%;
  left: 0;
  position: absolute;
}
.o-form-control__file-container input[type=file]:hover {
  cursor: pointer;
}
.o-form-control__file-container input[type=file]:focus + .o-form-control__file {
  outline: 1px solid;
}
.o-form-control__file-container .o-form-control__file {
  font-weight: 700;
  background-image: url("./images/upload.svg");
  background-repeat: no-repeat;
  background-size: 18px;
  background-position: center left 16px;
  padding: 12px 16px 12px 45px;
}

.o-hr {
  border: 0;
  height: 1px;
  background-color: #000000;
  margin: calc(var(--spacer) * 2) 0;
}

.o-hr--color-primary {
  background-color: #FF4713;
}

.o-icon {
  display: block;
}
.o-icon::before {
  display: block;
  font-family: "Icons";
  color: currentColor;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.o-icon--home::before {
  content: "\e800";
}
.o-icon--separator::before {
  content: "\e801";
}
.o-icon--line-dot::before {
  content: "\e801";
}
.o-icon--menu::before {
  content: "\e802";
}
.o-icon--note::before {
  content: "\e803";
}
.o-icon--people::before {
  content: "\e804";
}
.o-icon--play-circle::before {
  content: "\e805";
}
.o-icon--ticket::before {
  content: "\e806";
}
.o-icon--user-square::before {
  content: "\e807";
}
.o-icon--arrow-down-circle::before {
  content: "\e808";
}
.o-icon--theatre::before {
  content: "\e809";
}
.o-icon--search::before {
  content: "\e80a";
}
.o-icon--youtube::before {
  content: "\e80b";
}
.o-icon--arrow-right::before {
  content: "\e80c";
}
.o-icon--warning-circle::before {
  content: "\e80d";
}
.o-icon--arrow-left::before {
  content: "\e80e";
}
.o-icon--calendar::before {
  content: "\e80f";
}
.o-icon--document-text::before {
  content: "\e810";
}
.o-icon--clock::before {
  content: "\e811";
}
.o-icon--empty-wallet::before {
  content: "\e812";
}
.o-icon--envelope::before {
  content: "\e813";
}
.o-icon--external::before {
  content: "\e814";
}
.o-icon--facebook::before {
  content: "\e815";
}
.o-icon--instagram::before {
  content: "\e816";
}
.o-icon--x-twitter::before {
  content: "\e817";
}
.o-icon--back-to-top::before {
  content: "\e818";
}
.o-icon--close::before {
  content: "\e819";
}
.o-icon--location::before {
  content: "\e81a";
}
.o-icon--chevron::before {
  content: "\e81b";
}
.o-icon--arrow-right-circle::before {
  content: "\e81c";
}
.o-icon--call::before {
  content: "\e81d";
}
.o-icon--contact::before {
  content: "\e81e";
}
.o-icon--global::before {
  content: "\e81f";
}
.o-icon--sms::before {
  content: "\e820";
}
.o-icon--tarif::before {
  content: "\e821";
}
.o-icon--user::before {
  content: "\e822";
}
.o-icon--video::before {
  content: "\e823";
}
.o-icon--list::before {
  content: "\e824";
}
.o-icon--sublist::before {
  content: "\e825";
}
.o-icon--location-bold::before {
  content: "\e826";
}
.o-icon--calendar-bold::before {
  content: "\e827";
}
.o-icon--back::before {
  content: "\e828";
}
.o-icon--at-sign::before {
  content: "\e829";
}
.o-icon--plus::before {
  content: "\e830";
}
.o-icon--minus::before {
  content: "\e831";
}
.o-icon--edit::before {
  content: "\e832";
}
.o-icon--logout::before {
  content: "\e833";
}
.o-icon--linkedin::before {
  content: "\e82e";
}
.o-icon--mirror::before {
  transform: scaleX(-1);
}
.o-icon--mirror-y::before {
  transform: scaleY(-1);
}
.o-icon--medium {
  font-size: 1.3em;
}
.o-icon--big {
  font-size: 1.6em;
}
.o-icon--color-primary {
  color: #FF4713;
  transition: color 200ms ease-in-out;
}
.o-icon--color-secondary {
  color: #F8F3EF;
  transition: color 200ms ease-in-out;
}

/* Utilisation dans le HTML :
    <div class="has-icon has-icon--left">
        <i class="o-icon o-icon--facebook" aria-hidden="true"></i>
        <span class="u-visuallyhidden">Mon texte alternatif accessible</span>
    </div>
 */
.has-icon {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
}
.has-icon .o-icon {
  z-index: 1;
  position: relative;
}
.has-icon--left .o-icon {
  margin-right: 10px;
}
.has-icon--right .o-icon {
  margin-left: 10px;
}

.o-link {
  color: #FF4713;
  text-decoration: none;
}
.o-link::before {
  content: "> ";
}
.o-link:hover, .o-link:focus {
  text-decoration: underline;
}

.o-list {
  list-style-type: none;
  padding-left: calc(var(--spacer) * 0);
  row-gap: calc(var(--spacer) * 4);
}

.o-map {
  aspect-ratio: 4/3;
}

.o-pagination-nb {
  margin: 0 0 calc(var(--spacer) * 4);
  font-size: 1.8rem;
  padding-bottom: calc(var(--spacer));
  border-bottom: solid 1px #000000;
}

.o-pagination-reglette ul {
  margin: 5rem 0 4.5rem;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
.o-pagination-reglette a,
.o-pagination-reglette strong {
  border-radius: 3px;
  border: 1px solid #000000;
  color: #000000;
  transition: all 0.2s ease 0s;
  margin: 0 0.5rem 0.5rem;
  display: flex;
  width: 3.7rem;
  height: 3.7rem;
  justify-content: center;
  align-items: center;
}
.o-pagination-reglette strong {
  background-color: #FF4713;
  border-color: #FF4713;
  font-weight: 700;
}
.o-pagination-reglette a {
  text-decoration: none;
}
.o-pagination-reglette a:hover, .o-pagination-reglette a:focus {
  background-color: #FF4713;
  border-color: #FF4713;
}

.o-tag {
  margin: 0;
  color: #ffffff;
  background-color: #8E2A0D;
  padding: calc(var(--spacer) * 0.5) calc(var(--spacer));
  font-family: "K2D", sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.3em;
}
.o-tag:link {
  transition: opacity 220ms ease-in-out;
}
.o-tag:link:hover, .o-tag:link:focus {
  text-decoration: none;
  opacity: 0.8;
}
.o-tag--primary {
  background-color: #000000;
}

/* ===================================================================
 * TOOLTIPS WITHIN FORMS
 * =================================================================*/
.ui-tooltip {
  font-size: 12px;
  line-height: normal;
}

.helper {
  cursor: help;
}

.helper img {
  border: none;
  padding: 0;
  margin: 0;
}

/* Tooltip hidden by default */
.simpletooltip[aria-hidden=true] {
  display: none;
}

/* position relative for containers */
.simpletooltip_container {
  position: relative;
  display: inline-block;
}

/* tooltip styles */
.simpletooltip {
  position: absolute;
  z-index: 666;
  right: auto;
  left: 100%;
  width: 11em;
  margin-left: 11px;
  background: #C2CAD6;
  color: #231F20;
  border: none;
  border-radius: 0;
  padding: 4px 8px;
  text-align: left;
  font-weight: 400;
  font-size: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
}
.simpletooltip::after {
  content: "";
  width: 0;
  height: 0;
  display: block;
  position: absolute;
  z-index: 10;
  border: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  margin-top: -7px;
  top: 50%;
  border-right: 7px solid #C2CAD6;
  left: -7px;
}
@media (max-width: 991px) {
  .simpletooltip {
    right: 100%;
    left: auto;
    margin-left: 0;
    margin-right: 11px;
  }
  .simpletooltip::after {
    border-right: none;
    border-left: 7px solid #C2CAD6;
    right: -7px;
    left: auto;
  }
}

.c-accordion {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 2) calc(var(--spacer) * 3);
}
.c-accordion__heading {
  margin: 0;
}
.c-accordion__button {
  display: flex;
  place-items: center;
  justify-content: space-between;
  column-gap: calc(var(--spacer) * 1.5);
  border: 0;
  background: none;
  cursor: pointer;
  box-sizing: border-box;
}
.c-accordion__button::before {
  content: "\e830";
  font-family: "Icons";
  font-size: 1.6rem;
  background: #000000;
  color: #ffffff;
  border-radius: 50%;
  width: 46px;
  height: 46px;
  display: flex;
  place-content: center;
  place-items: center;
}
.c-accordion__button[aria-expanded=true]::before {
  content: "\e831";
}

@media (min-width: 768px) {
  .c-accroche {
    padding-right: 34rem;
  }
}
@media (min-width: 768px) {
  .c-accroche-home {
    padding-right: 0;
  }
}
.c-accroche-home__visuel {
  display: flex;
  max-width: 383px;
  height: fit-content;
  position: relative;
  top: -3.3rem;
  z-index: 1;
}
@media (max-width: 991px) {
  .c-accroche-home__visuel {
    max-width: 283px;
  }
}
.c-accroche-home__visuel::before {
  content: "";
  background: #ffffff;
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  right: -1.7rem;
  bottom: -2rem;
  z-index: -1;
}
.c-accroche-home__infos {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: calc(var(--spacer) * 2);
  padding: calc(var(--spacer) * 6) 0 calc(var(--spacer) * 6);
}
@media (max-width: 991px) {
  .c-accroche-home__infos {
    padding: calc(var(--spacer) * 3) 0;
  }
}
.c-accroche-home__title {
  margin: 0;
}
.c-accroche-home__texte {
  font-size: 1.8rem;
  margin: 0;
}
.c-accroche-home__logo {
  display: flex;
  gap: calc(var(--spacer) * 1.5);
}
.c-accroche-home__button {
  display: flex;
  gap: calc(var(--spacer) * 2);
}

.c-ariane {
  padding: calc(var(--spacer) * 3) 0;
}
@media (max-width: 767px) {
  .c-ariane {
    display: none;
  }
}
.c-ariane__list {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.c-ariane__icon {
  color: #FF4713;
  padding: 0 calc(var(--spacer));
  font-size: 0.7em;
}
.c-ariane__item {
  display: flex;
  align-items: center;
  font-size: 1.5rem;
  font-weight: 400;
  color: #000000;
}
.c-ariane__item:last-child {
  font-style: italic;
  color: #312E37;
}

.c-bloc {
  border-bottom: 8px solid #FF4713;
  box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.07);
  padding: calc(var(--spacer) * 4);
  margin-bottom: 3rem;
  hyphens: auto;
}
.c-bloc p {
  margin-top: 0;
  font-size: 1.6rem;
}
.c-bloc p:last-child {
  margin-bottom: 0;
}
.c-bloc__title {
  font-size: 2rem;
  line-height: 1.5em;
  margin: 0 0 calc(var(--spacer) * 3);
}
.c-bloc__list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 0.5);
}
.c-bloc__list li {
  font-size: 1.6rem;
  display: flex;
  gap: calc(var(--spacer));
  word-break: break-word;
}

.c-card {
  display: flex;
  position: relative;
  justify-content: space-between;
  transition: 320ms ease-in-out;
  height: 100%;
  container: card/inline-size;
  box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.07);
}
.c-card:hover .c-card__image, .c-card:focus .c-card__image {
  transform: scale(1.05);
}
.c-card :where(p) {
  margin: 0;
  font-size: 1.4rem;
}
.c-card__image-wrapper {
  position: relative;
  overflow: hidden;
  padding: 5px 5px 0;
}
.c-card__image-wrapper .o-tag {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.c-card__image {
  transition: transform 320ms ease-in-out;
  display: block;
  width: 100%;
}
.c-card__infos {
  padding: calc(var(--spacer) * 3) calc(var(--spacer)) calc(var(--spacer) * 3) calc(var(--spacer) * 4);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  width: 100%;
  gap: calc(var(--spacer));
  transition: background-color 320ms ease-in-out;
}
.c-card__title {
  margin: 0;
  font-family: "K2D", sans-serif;
  font-size: 1.6rem;
  text-transform: uppercase;
}
.c-card__link:hover, .c-card__link:focus, .c-card__link:active {
  text-decoration: none;
}
.c-card__date {
  order: -1;
}
.c-card__lieu {
  font-weight: 700;
}
.c-card__mail span {
  word-break: break-all;
}

.c-card--vertical {
  flex-direction: column-reverse;
  background-color: #ffffff;
}
.c-card--vertical .c-card__image {
  aspect-ratio: 16/9;
  object-fit: contain;
}

.c-card--disabled {
  filter: grayscale(1);
}

.c-card--presentation {
  box-shadow: none;
  flex-direction: column-reverse;
  place-content: center;
  gap: calc(var(--spacer) * 4);
}
.c-card--presentation:hover .c-card__image, .c-card--presentation:focus .c-card__image {
  transform: none;
}
.c-card--presentation h2 span {
  font-weight: 400;
}
.c-card--presentation .c-card__image-wrapper {
  width: 140px;
}
.c-card--presentation .c-card__image-wrapper::after {
  display: none;
}

.c-fiche__top {
  margin-bottom: calc(var(--spacer) * 4);
}
.c-fiche__visuel {
  margin-bottom: calc(var(--spacer) * 4);
  text-align: center;
}
.c-fiche__image {
  max-height: 300px;
}
.c-fiche__figure {
  margin-inline-start: 0;
  margin-inline-end: 0;
}
.c-fiche__legende {
  font-size: 1.4rem;
}
.c-fiche__territoire {
  display: flex;
  gap: calc(var(--spacer) * 2);
}
.c-fiche__resume {
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 120%;
  overflow-wrap: break-word;
}
.c-fiche__description {
  overflow-wrap: break-word;
}

.c-footer__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--spacer));
  padding-bottom: calc(var(--spacer) * 3);
}
.c-footer__baseline {
  font-family: "K2D", sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: calc(var(--spacer) * 2);
}
.c-footer__logo {
  display: flex;
  gap: calc(var(--spacer) * 2);
}
.c-footer__logo a {
  display: flex;
}
.c-footer__image-logo {
  max-height: 60px;
}
.c-footer__button {
  display: flex;
  gap: calc(var(--spacer) * 2);
}
.c-footer__link {
  background-color: #231F20;
  color: #ffffff;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: calc(var(--spacer) * 0.5) calc(var(--spacer) * 3);
  padding: calc(var(--spacer) * 1.5);
}
.c-footer__link a {
  text-decoration: underline;
  font-size: 1.4rem;
  font-weight: 700;
}

.c-form__group {
  border: none;
  padding: 35px 35px 25px;
  margin-bottom: 2rem;
  background-color: #F8F3EF;
}
@media (max-width: 992px) {
  .c-form__group {
    padding: 10px 15px;
  }
}
.c-form__group-inner {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacer) * 4) 1%;
  margin-bottom: calc(var(--spacer) * 4);
}

.c-form__legend {
  font-weight: 700;
  font-size: 2rem;
  color: #000000;
  margin-bottom: calc(var(--spacer) * 4);
  position: relative;
  bottom: -35px;
}
.c-form__legend h2 {
  font-size: 2rem;
  margin: 0;
}

.fieldset-check {
  border: none;
  padding: 0;
  margin: 0;
}

.checks {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.checks--column {
  flex-direction: column;
}

.c-form__action {
  text-align: right;
}

.check {
  display: inline-flex;
  gap: 8px;
}
.check input[type=radio],
.check input[type=checkbox] {
  flex-shrink: 0;
}

.c-form__notice {
  font-weight: 700;
  font-size: 13px;
  color: #646367;
}

.c-form__mention-cnil {
  font-weight: 400;
  font-size: 1.3rem;
  margin-top: 24px;
}

.form_success {
  border: 1px solid #00871E;
  color: #00871E;
  padding: 2rem;
  margin-bottom: 3rem;
}

.form_error {
  border: 1px solid #E70014;
  color: #E70014;
  padding: 2rem;
  margin-bottom: 3rem;
}

.c-header {
  background-color: #ffffff;
}
body:not(.accueil) .c-header {
  box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.1);
}
.c-header__inner {
  display: flex;
  place-items: center;
}
.c-header__logo {
  padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 3);
}
.c-header__visuel {
  position: relative;
}
.c-header__visuel img {
  width: 100%;
  display: block;
}
@media (min-width: 768px) {
  .c-header__visuel::after {
    content: "";
    background-image: url("/include/css/GAB_JCMB/images/mountainsB.png");
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    width: 750px;
    height: 215px;
    max-height: 35%;
    max-width: 50%;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 10;
  }
}
.c-header__description {
  font-size: 3.6rem;
  text-align: center;
  padding: calc(var(--spacer) * 4) 0;
}
@media (max-width: 992px) {
  .c-header__description {
    font-size: 2.4rem;
  }
  .c-header__description h1 {
    font-size: 3.6rem;
  }
}

.c-navigation {
  flex-grow: 1;
}
@media (max-width: 991px) {
  .c-navigation {
    display: flex;
    justify-content: end;
    position: relative;
  }
}
.c-navigation__nav {
  display: flex;
  gap: calc(var(--spacer) * 3) calc(var(--spacer) * 8);
}
@media (max-width: 991px) {
  .c-navigation__nav {
    display: none;
    width: fit-content;
    position: absolute;
    top: calc(100% + var(--spacer) * 1.5);
    right: 0;
    background-color: #ffffff;
    box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.34);
    z-index: 1000;
  }
}
@media (max-width: 575px) {
  .c-navigation__nav {
    width: 100vw;
    margin-right: -2rem;
  }
}
.c-navigation__list {
  display: flex;
  flex-grow: 1;
  gap: calc(var(--spacer) * 3);
  justify-content: space-around;
  align-items: center;
}
@media (max-width: 991px) {
  .c-navigation__list {
    flex-direction: column;
    padding: calc(var(--spacer) * 1.5);
  }
}
.c-navigation__item {
  font-weight: 700;
  font-size: 1.6rem;
  text-transform: uppercase;
  color: #000000;
  display: block;
  text-align: center;
}
.c-navigation__link {
  position: relative;
}
.c-navigation__link::after {
  content: "";
  width: 45px;
  height: 13px;
  background-color: #FF4713;
  border-radius: 1rem;
  position: absolute;
  top: calc(100% + 1rem);
  left: 50%;
  transform: translateX(-55%);
  transition: all 0.2s ease-in-out;
  opacity: 0;
}
@media (max-width: 991px) {
  .c-navigation__link::after {
    display: none;
  }
}
.c-navigation__link--selected, .c-navigation__link:hover, .c-navigation__link:focus, .c-navigation__link:active {
  text-decoration: none;
}
.c-navigation__link--selected::after, .c-navigation__link:hover::after, .c-navigation__link:focus::after, .c-navigation__link:active::after {
  opacity: 1;
}

.c-rubrique__item {
  position: relative;
  background-color: #ffffff;
  padding: calc(var(--spacer) * 4) calc(var(--spacer) * 5);
  height: 100%;
  display: flex;
  align-items: center;
  transition: background-color 320ms ease-in-out;
  border-bottom: 8px solid #FF4713;
  box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.1);
}
.c-rubrique__item:hover, .c-rubrique__item:focus {
  background-color: #F8F3EF;
}
.c-rubrique__title {
  margin: 0;
  position: relative;
  font-size: 3rem;
  font-weight: 700;
}
.c-rubrique__link:hover, .c-rubrique__link:focus {
  text-decoration: none;
}

.c-skiplinks {
  position: fixed;
  z-index: -1;
  top: -5rem;
  width: 100%;
  transition: all 0.3s;
  background-color: #ffffff;
  border-bottom: 0.3rem solid #FF4713;
  opacity: 1;
}
.c-skiplinks--focus {
  top: 0;
  z-index: 1001;
  opacity: 1;
}
.pseudo .c-skiplinks.c-skiplinks--focus {
  top: 5rem;
}
.c-skiplinks__list {
  display: flex;
  margin: 0;
}
.c-skiplinks__item {
  list-style: none;
}
.c-skiplinks__link {
  display: block;
  padding: 1rem;
  color: #000000;
  background-color: #ffffff;
  text-decoration: none;
  margin: 0 0.5rem;
}
.c-skiplinks__link:hover, .c-skiplinks__link:focus {
  color: #ffffff;
  background-color: #000000;
}

.TPL_JCMBDIAGHOME {
  background-color: #F8F3EF;
  margin-top: calc(var(--spacer) * 3 * -1);
  margin-bottom: calc(var(--spacer) * 12);
  padding: calc(var(--spacer) * 4) calc(var(--spacer) * 0);
  position: relative;
}
.TPL_JCMBDIAGHOME::before {
  content: "";
  background-color: #F8F3EF;
  display: block;
  width: 100vw;
  height: 101%;
  position: absolute;
  left: 50%;
  top: 0;
  z-index: -1;
  transform: translateX(-50%);
}
.TPL_JCMBDIAGHOME .s-diag__title {
  position: relative;
  margin-bottom: calc(var(--spacer) * 10);
}
.TPL_JCMBDIAGHOME .s-diag__title strong {
  font-weight: 800;
}
.TPL_JCMBDIAGHOME .s-diag__title::after {
  content: "";
  width: 250px;
  height: 10px;
  background-color: #FF4713;
  position: absolute;
  bottom: -2rem;
  left: 0;
}
.TPL_JCMBDIAGHOME .s-diag__list {
  display: flex;
  gap: calc(var(--spacer) * 2);
}
.TPL_JCMBDIAGHOME .s-diag__item {
  display: flex;
  flex-basis: 25%;
  flex-direction: column;
  padding: calc(var(--spacer) * 6) calc(var(--spacer) * 2) calc(var(--spacer) * 4);
  place-items: center;
  background-color: #ffffff;
  border-radius: 8px;
}
@media (max-width: 767px) {
  .TPL_JCMBDIAGHOME .s-diag__item {
    display: none;
  }
}
.TPL_JCMBDIAGHOME .s-diag__item-separator {
  place-self: center;
  flex-basis: 3%;
}
@media (max-width: 767px) {
  .TPL_JCMBDIAGHOME .s-diag__item-separator {
    display: none;
  }
}
.TPL_JCMBDIAGHOME .s-diag__item-link {
  text-align: center;
  padding: calc(var(--spacer) * 6) calc(var(--spacer) * 2) calc(var(--spacer) * 4);
  display: flex;
  justify-content: space-between;
  flex-basis: 25%;
  flex-direction: column;
  border-radius: 8px;
  background: #FF4713;
  position: relative;
}
@media (max-width: 767px) {
  .TPL_JCMBDIAGHOME .s-diag__item-link {
    flex-basis: 100%;
  }
}
.TPL_JCMBDIAGHOME .s-diag__item-link .o-icon {
  color: #ffffff;
}
.TPL_JCMBDIAGHOME .s-diag__item-link:hover .o-icon, .TPL_JCMBDIAGHOME .s-diag__item-link:focus-within .o-icon {
  color: #000000;
}
.TPL_JCMBDIAGHOME .s-diag__item-link a {
  font-size: 2.6rem;
  line-height: 3.1rem;
}
.TPL_JCMBDIAGHOME .s-diag__item-link a:hover, .TPL_JCMBDIAGHOME .s-diag__item-link a:focus {
  text-decoration: none;
}
.TPL_JCMBDIAGHOME .s-diag__item-link a strong {
  font-weight: 800;
}
.TPL_JCMBDIAGHOME .s-diag__item-link .o-icon {
  font-size: 4.8rem;
  transition: color 300ms ease-in-out;
}
.TPL_JCMBDIAGHOME .s-diag__item-title {
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-around;
  flex: 1;
  gap: 1.7rem;
}
.TPL_JCMBDIAGHOME .s-diag__item-title h3 {
  text-align: center;
  margin: 0;
}
.TPL_JCMBDIAGHOME .s-diag__item-title img {
  height: 100px;
}

.TPL_JCMBDIAGFORM .checks {
  gap: 1rem;
}
.TPL_JCMBDIAGFORM .check {
  background-color: #ffffff;
  padding: calc(var(--spacer)) calc(var(--spacer) * 3);
  border-radius: 5px;
  width: fit-content;
}
.TPL_JCMBDIAGFORM .check input[type=radio], .TPL_JCMBDIAGFORM .check input[type=checkbox] {
  background-color: #ffffff;
}
.TPL_JCMBDIAGFORM .check:has(input:checked) {
  background-color: #FF4713;
}
.TPL_JCMBDIAGFORM .s-diag__etapes {
  display: flex;
  margin-bottom: calc(var(--spacer) * 3);
  margin-left: calc((var(--spacer)) * -1);
}
.TPL_JCMBDIAGFORM .s-diag__etapes li {
  background-image: url("/include/css/GAB_JCMB/images/diag-step-gray.svg");
  background-repeat: no-repeat;
  background-size: cover;
  width: 345px;
  height: 63px;
  display: flex;
  place-content: center;
  place-items: center;
  font-size: 18px;
}
.TPL_JCMBDIAGFORM .s-diag__etapes li:first-child {
  z-index: 1;
}
.TPL_JCMBDIAGFORM .s-diag__etapes li:nth-child(2) {
  margin-left: -50px;
  margin-right: -50px;
  z-index: 0;
}
.TPL_JCMBDIAGFORM .s-diag__etapes li.selected {
  background-image: url("/include/css/GAB_JCMB/images/diag-step-orange.svg");
  font-weight: 700;
}
@media (max-width: 992px) {
  .TPL_JCMBDIAGFORM .s-diag__etapes {
    flex-wrap: wrap;
    gap: calc(var(--spacer));
  }
  .TPL_JCMBDIAGFORM .s-diag__etapes li {
    width: auto;
    height: auto;
    background-color: #F8F3EF;
    background-image: unset;
    padding: 10px 16px;
    border-radius: 8px;
  }
  .TPL_JCMBDIAGFORM .s-diag__etapes li:nth-child(2) {
    margin: 0;
    z-index: 1;
  }
  .TPL_JCMBDIAGFORM .s-diag__etapes li.selected {
    background-image: unset;
    background-color: #FF4713;
  }
}
.TPL_JCMBDIAGFORM .s-diag__accroche {
  padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 0);
}
.TPL_JCMBDIAGFORM .s-diag__title {
  font-size: 2rem;
  margin-bottom: calc(var(--spacer));
}
.TPL_JCMBDIAGFORM .s-diag__conseil {
  background-color: #F8F3EF;
  padding: calc(var(--spacer) * 4);
  margin-bottom: 3rem;
}
.TPL_JCMBDIAGFORM .s-diag__conseil-img {
  width: 100px;
}
.TPL_JCMBDIAGFORM .s-diag__columns {
  display: flex;
  gap: calc(var(--spacer) * 4);
}
.TPL_JCMBDIAGFORM .s-diag__buttons {
  display: flex;
  gap: calc(var(--spacer) * 2) calc(var(--spacer) * 4);
  flex-wrap: wrap;
  margin-bottom: calc(var(--spacer) * 8);
}
.TPL_JCMBDIAGFORM .c-bloc {
  margin-bottom: calc(var(--spacer) * 8);
}

.TPL_JCMBACCROCHEHOME {
  margin-bottom: calc(var(--spacer) * 0);
}
.TPL_JCMBACCROCHEHOME .s-accroche-home {
  display: flex;
  flex-flow: row wrap;
  gap: 0 10rem;
}

.TPL_STRUCTUREHOME {
  background-color: #F8F3EF;
  padding: calc(var(--spacer) * 5) 0;
  position: relative;
}
.TPL_STRUCTUREHOME::before {
  content: "";
  background-color: #F8F3EF;
  display: block;
  width: 100vw;
  height: 101%;
  position: absolute;
  left: 50%;
  top: 0;
  z-index: -1;
  transform: translateX(-50%);
}

.TPL_AGENDAHOME .s-home__section {
  padding: calc(var(--spacer) * 5);
  background-color: #FF4713;
  margin: 0 calc(var(--spacer) * -5);
}

.TPL_PLANSITE {
  border-left: solid 0.8rem #FF4713;
  padding-left: calc(var(--spacer) * 3);
}
.TPL_PLANSITE ul {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacer) * 1.5);
}
.TPL_PLANSITE ul li {
  font-weight: 700;
}
.TPL_PLANSITE ul li ul {
  padding-top: calc(var(--spacer) * 1.5);
}
.TPL_PLANSITE ul li ul li {
  padding-left: 1.2rem;
  font-weight: 400;
}

.s-login {
  display: flex;
}
.s-login__creation {
  width: 40%;
  background-color: #FF4713;
  padding: 5rem;
}
.s-login__connexion {
  width: 60%;
  background-color: #F8F3EF;
  padding: 5rem;
}
@media (max-width: 992px) {
  .s-login {
    flex-direction: column;
  }
  .s-login__creation, .s-login__connexion {
    width: 100%;
    padding: 2rem;
  }
}

.s-password .ok {
  color: #00871E;
}
.s-password .ko {
  color: #E70014;
  text-decoration: underline;
}

@media (min-width: 768px) {
  .txt .IMF_50,
  .partage .IMF_50,
  .mce-content-body .IMF_50 {
    max-width: 50%;
  }
}
@media (min-width: 768px) {
  .txt .IMF_30,
  .partage .IMF_30,
  .mce-content-body .IMF_30 {
    max-width: 30%;
  }
}
.txt ul,
.partage ul,
.mce-content-body ul {
  list-style: none;
}
.txt ul li,
.partage ul li,
.mce-content-body ul li {
  position: relative;
  padding-left: calc(var(--spacer) * 3);
  margin-bottom: calc(var(--spacer) * 2);
}
.txt ul li::before,
.partage ul li::before,
.mce-content-body ul li::before {
  content: "\e824";
  font-family: "Icons";
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--spacer) * 3);
  display: grid;
  place-items: center;
  font-size: 0.8rem;
}
.txt ul ul li::before,
.partage ul ul li::before,
.mce-content-body ul ul li::before {
  content: "\e825";
}
.txt ol,
.partage ol,
.mce-content-body ol {
  padding: 0;
  list-style-type: none;
  counter-reset: listeCounter;
}
.txt ol li,
.partage ol li,
.mce-content-body ol li {
  position: relative;
  padding-left: calc(var(--spacer) * 3);
  margin-bottom: calc(var(--spacer) * 2);
}
.txt ol li::before,
.partage ol li::before,
.mce-content-body ol li::before {
  counter-increment: listeCounter;
  content: counter(listeCounter) ". ";
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--spacer) * 3);
  display: grid;
  place-items: center;
}
.txt ul, .txt ol,
.partage ul,
.partage ol,
.mce-content-body ul,
.mce-content-body ol {
  margin: 0 0 calc(var(--spacer) * 3);
  padding: 0;
  line-height: 1.5em;
  list-style-position: inside;
}
.txt ul ul, .txt ul ol, .txt ol ul, .txt ol ol,
.partage ul ul,
.partage ul ol,
.partage ol ul,
.partage ol ol,
.mce-content-body ul ul,
.mce-content-body ul ol,
.mce-content-body ol ul,
.mce-content-body ol ol {
  margin: 0 0 0 calc(var(--spacer) * 3);
  padding-top: calc(var(--spacer) * 4);
}
.txt a:not(.o-button):not(.o-link):not(.c-ressources__link),
.partage a:not(.o-button):not(.o-link):not(.c-ressources__link),
.mce-content-body a:not(.o-button):not(.o-link):not(.c-ressources__link) {
  text-decoration: underline;
}
.txt a:not(.o-button):not(.o-link):not(.c-ressources__link):hover, .txt a:not(.o-button):not(.o-link):not(.c-ressources__link):focus,
.partage a:not(.o-button):not(.o-link):not(.c-ressources__link):hover,
.partage a:not(.o-button):not(.o-link):not(.c-ressources__link):focus,
.mce-content-body a:not(.o-button):not(.o-link):not(.c-ressources__link):hover,
.mce-content-body a:not(.o-button):not(.o-link):not(.c-ressources__link):focus {
  text-decoration: none;
}
.txt table,
.partage table,
.mce-content-body table {
  width: 100%;
  font-size: 1.6rem;
  color: #312E37;
  border-collapse: collapse;
  border: 0;
  font-family: "Nunito Sans", sans-serif;
}
.txt table caption,
.partage table caption,
.mce-content-body table caption {
  text-align: left;
  padding-bottom: calc(var(--spacer) * 1.5);
}
.txt table thead td,
.txt table th,
.partage table thead td,
.partage table th,
.mce-content-body table thead td,
.mce-content-body table th {
  color: #000000;
  font-weight: 900;
  border-bottom: 3px solid #E2E2E4;
  border-right: none;
}
.txt table tr:nth-child(even),
.partage table tr:nth-child(even),
.mce-content-body table tr:nth-child(even) {
  background-color: #646367;
}
.txt table td,
.partage table td,
.mce-content-body table td {
  padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2);
  border: 0;
  border-right: 2px solid white;
}
@media (max-width: 991px) {
  .txt table thead td,
  .txt table th,
  .partage table thead td,
  .partage table th,
  .mce-content-body table thead td,
  .mce-content-body table th {
    padding: calc(var(--spacer) * 0.5) calc(var(--spacer) * 2) calc(var(--spacer));
    border-bottom: 2px solid #E2E2E4;
    border-right: none;
  }
  .txt table td,
  .partage table td,
  .mce-content-body table td {
    padding: calc(var(--spacer) * 0.5) calc(var(--spacer) * 2) calc(var(--spacer));
  }
}

/**
 * RESPONSIVE TABLE
 */
@media (max-width: 991px) {
  .tableauContainer {
    overflow-x: scroll;
    position: relative;
    width: 100%;
    margin-bottom: 2rem;
  }
  .tableauContainer > table {
    min-width: 767px;
    margin-bottom: 1rem !important;
  }
}

.u-flex {
  display: flex;
}
@media (min-width: 992px) {
  .u-flex\@md {
    display: flex;
  }
}
@media (max-width: 991px) {
  .u-flex\@md- {
    display: flex;
  }
}

.u-flex-column {
  flex-direction: column;
}
@media (min-width: 992px) {
  .u-flex-column\@md {
    flex-direction: column;
  }
}
@media (max-width: 991px) {
  .u-flex-column\@md- {
    flex-direction: column;
  }
}

.u-flex-column-reverse {
  flex-direction: column-reverse;
}
@media (min-width: 992px) {
  .u-flex-column-reverse\@md {
    flex-direction: column-reverse;
  }
}
@media (max-width: 991px) {
  .u-flex-column-reverse\@md- {
    flex-direction: column-reverse;
  }
}

.u-flex-row {
  flex-direction: row;
}
@media (min-width: 992px) {
  .u-flex-row\@md {
    flex-direction: row;
  }
}
@media (max-width: 991px) {
  .u-flex-row\@md- {
    flex-direction: row;
  }
}

.u-flex-row-reverse {
  flex-direction: row-reverse;
}
@media (min-width: 992px) {
  .u-flex-row-reverse\@md {
    flex-direction: row-reverse;
  }
}
@media (max-width: 991px) {
  .u-flex-row-reverse\@md- {
    flex-direction: row-reverse;
  }
}

.u-justify-start {
  justify-content: start;
}
@media (min-width: 992px) {
  .u-justify-start\@md {
    justify-content: start;
  }
}
@media (max-width: 991px) {
  .u-justify-start\@md- {
    justify-content: start;
  }
}

.u-justify-center {
  justify-content: center;
}
@media (min-width: 992px) {
  .u-justify-center\@md {
    justify-content: center;
  }
}
@media (max-width: 991px) {
  .u-justify-center\@md- {
    justify-content: center;
  }
}

.u-justify-end {
  justify-content: flex-end;
}
@media (min-width: 992px) {
  .u-justify-end\@md {
    justify-content: flex-end;
  }
}
@media (max-width: 991px) {
  .u-justify-end\@md- {
    justify-content: flex-end;
  }
}

.u-align-start {
  align-items: flex-start;
}
@media (min-width: 992px) {
  .u-align-start\@md {
    align-items: flex-start;
  }
}
@media (max-width: 991px) {
  .u-align-start\@md- {
    align-items: flex-start;
  }
}

.u-align-center {
  align-items: center;
}
@media (min-width: 992px) {
  .u-align-center\@md {
    align-items: center;
  }
}
@media (max-width: 991px) {
  .u-align-center\@md- {
    align-items: center;
  }
}

.u-align-end {
  align-items: flex-end;
}
@media (min-width: 992px) {
  .u-align-end\@md {
    align-items: flex-end;
  }
}
@media (max-width: 991px) {
  .u-align-end\@md- {
    align-items: flex-end;
  }
}

.u-space-between {
  justify-content: space-between;
}
@media (min-width: 992px) {
  .u-space-between\@md {
    justify-content: space-between;
  }
}
@media (max-width: 991px) {
  .u-space-between\@md- {
    justify-content: space-between;
  }
}

.u-hidden {
  display: none;
}
@media (min-width: 576px) {
  .u-hidden\@xs {
    display: none;
  }
}
@media (min-width: 768px) {
  .u-hidden\@sm {
    display: none;
  }
}
@media (min-width: 992px) {
  .u-hidden\@md {
    display: none;
  }
}
@media (min-width: 1320px) {
  .u-hidden\@lg {
    display: none;
  }
}

@media (max-width: 575px) {
  .u-visible\@xs {
    display: none;
  }
}
@media (max-width: 767px) {
  .u-visible\@sm {
    display: none;
  }
}
@media (max-width: 991px) {
  .u-visible\@md {
    display: none;
  }
}
@media (max-width: 1319px) {
  .u-visible\@lg {
    display: none;
  }
}

.u-hidden-important {
  display: none !important;
}
@media (min-width: 576px) {
  .u-hidden-important\@xs {
    display: none !important;
  }
}
@media (min-width: 768px) {
  .u-hidden-important\@sm {
    display: none !important;
  }
}
@media (min-width: 992px) {
  .u-hidden-important\@md {
    display: none !important;
  }
}
@media (min-width: 1320px) {
  .u-hidden-important\@lg {
    display: none !important;
  }
}

.u-visuallyhidden:not(:focus, :active) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}
@media (max-width: 575px) {
  .u-visuallyhidden\@xs:not(:focus, :active) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }
}
@media (max-width: 767px) {
  .u-visuallyhidden\@sm:not(:focus, :active) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }
}
@media (max-width: 991px) {
  .u-visuallyhidden\@md:not(:focus, :active) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }
}
@media (max-width: 1319px) {
  .u-visuallyhidden\@lg:not(:focus, :active) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }
}

/*
Version simplifiée du fichier pour éviter de doubler la taille du fichier CSS - A incrémenter au besoin
cf : https://gitlab.eolas.fr/pole-front-end/boilerplate-eolas-css/-/blob/main/src/scss/9_utilities/_spacing.scss?ref_type=heads
*/
.u-ml-auto {
  margin-left: auto;
}

.u-mb-4 {
  margin-bottom: calc(var(--spacer) * 2);
}

.u-mb-5 {
  margin-bottom: calc(var(--spacer) * 3);
}

.u-mb-6 {
  margin-bottom: calc(var(--spacer) * 4);
}

.u-mb-9 {
  margin-bottom: calc(var(--spacer) * 8);
}

.u-mb-10 {
  margin-bottom: calc(var(--spacer) * 10);
}

.u-mt-5 {
  margin-top: calc(var(--spacer) * 3);
}

.clear {
  clear: both;
}

.invisible {
  display: none;
}

.alignleft {
  text-align: left;
}

.alignright {
  text-align: right;
}

.aligncenter {
  text-align: center;
}

.alignjustify {
  text-align: justify;
}

object.alignleft,
img.alignleft,
table.alignleft,
span.alignleft,
iframe.alignleft,
embed.alignleft,
video.alignleft,
figure.alignleft {
  float: left;
  margin: 0 1% 1rem 0;
}

object.alignright,
img.alignright,
table.alignright,
span.alignright,
iframe.alignright,
embed.alignright,
video.alignright,
figure.alignright {
  float: right;
  margin: 0 0 1rem 1%;
  text-align: left;
}

table.aligncenter,
img.aligncenter,
figure.aligncenter {
  margin: auto;
  text-align: left;
}

img.aligncenter {
  display: block;
}

acronym {
  border-bottom: 1px dotted;
  cursor: help;
}

img {
  max-width: 100%;
  height: auto;
}

/* CLEARFIX */
.clearfix {
  display: flow-root;
}

/* Vidéos responsive */
.iframe-ratio {
  position: relative;
  margin-bottom: 2rem;
}
.iframe-ratio::before {
  content: "";
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}
.iframe-ratio.width_left {
  width: 48%;
  float: left;
  margin-right: 2%;
}
.iframe-ratio.width_right {
  width: 48%;
  float: right;
  margin-left: 2%;
}
.iframe-ratio.width_middle {
  width: 50%;
  margin: auto;
}
.iframe-ratio iframe,
.iframe-ratio embed,
.iframe-ratio object,
.iframe-ratio video {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.iframe-ratio > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}
@media screen and (max-width: 768px) {
  .iframe-ratio.width_left, .iframe-ratio.width_right, .iframe-ratio.width_middle {
    width: 100%;
    float: none;
    margin-right: 0;
    margin-left: 0;
  }
}

/*
Utilisation des suffixes responsive :
class="u-text-right@md"
*/
.u-text-right {
  text-align: right;
}
@media (min-width: 576px) {
  .u-text-right\@xs {
    text-align: right;
  }
}
@media (min-width: 768px) {
  .u-text-right\@sm {
    text-align: right;
  }
}
@media (min-width: 992px) {
  .u-text-right\@md {
    text-align: right;
  }
}
@media (min-width: 1320px) {
  .u-text-right\@lg {
    text-align: right;
  }
}
@media (min-width: 1600px) {
  .u-text-right\@xl {
    text-align: right;
  }
}

.u-text-center {
  text-align: center;
}
@media (min-width: 576px) {
  .u-text-center\@xs {
    text-align: center;
  }
}
@media (min-width: 768px) {
  .u-text-center\@sm {
    text-align: center;
  }
}
@media (min-width: 992px) {
  .u-text-center\@md {
    text-align: center;
  }
}
@media (min-width: 1320px) {
  .u-text-center\@lg {
    text-align: center;
  }
}
@media (min-width: 1600px) {
  .u-text-center\@xl {
    text-align: center;
  }
}

/*
Fin de compilation
*/
.u-font-medium {
  font-weight: 500;
}

.u-font-bold {
  font-weight: 700;
}

.u-font-black {
  font-weight: 900;
}

/*
 * Utilitaire permettant une troncature sur un nombre fixe de ligne (par défaut 3)
 * Dans l'HTML, utiliser l'attribut style pour affecter la variable --lines-to-show
 * Exemple, si besoin d'afficher uniquement les 5 premières lignes :
 * <p class="u-truncate" style="--lines-to-show: 5;">...</p>
 */
.u-truncate {
  display: -webkit-box;
  -webkit-line-clamp: var(--lines-to-show, 3);
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.u-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

.u-rounded {
  border-radius: 50%;
}

.u-list-unstyled {
  margin: 0;
  padding: 0;
  list-style: none;
}

.u-nowrap {
  white-space: nowrap;
}

.u-w-100 {
  width: 100%;
}