:root {
    --blue-institutional: #000069;
    --blue-light:#C4DDF9;
    --blue-petal-defaut: #0391DF;

    --yellow-petal-defaut: #FCBA00;

    --red-petal-defaut: #F42A5F;

    --green-petal-defaut: #0DD3B6;

    --violet-petal-defaut: #6A2DC1;
    --violet-petal-yzma: #E1D7FF;

    --gray-normandy: #575770;
    --gray-agenda: #272733;
    --gray-bailey: #FDFDFD;

    --black: #000000;
    --white: #ffffff;
}

.no-js .submenu {
    visibility: hidden; /* Les sous-menus ne seront pas visibles */
    opacity: 0; /* Préserve l'effet d'animation */
    transform: translateY(-20px); /* Évite tout déplacement brusque */
    transition: none; /* Empêche les animations initiales */
}

.js-loaded .submenu {
    visibility: visible; /* Les sous-menus deviennent visibles */
    transition: all 0.5s ease-out; /* Réapplique les animations */
}

header, footer {
    font-family: "Codec Pro";
    font-size: 1rem;
    line-height: 1.5rem;
    background-color: white;
}

body{
    overflow-x: hidden;
}

.new-tab:before {
    content: "\ea00";
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.text-left      { text-align: left; }
.text-center    { text-align: center; }
.text-right     { text-align: right; }
.text-justify   { text-align: justify; }

.text-h1-like   {
    font-family: "Tosh A";
    font-size: 2.5rem;
    line-height: 120%;
    font-variation-settings: "wght" 700;
}

.text-blue-institutional  { color: var(--blue-institutional); }

.list-none { list-style-type: none; }

.bg-white               { background-color: var(--white); }
.bg-gray-bailey         { background-color: var(--gray-bailey); }
.bg-blue-institutional  { background-color: var(--blue-institutional); }
.bg-blue-light          { background-color: var(--blue-light); }
.bg-violet-petal-yzma   { background-color: var(--violet-petal-yzma); }

.overflow-x-hidden  { overflow-x: hidden; }
.overflow-hidden    { overflow: hidden; }

.z-top { z-index: 1000; }

.h-8    { height: 2rem; /* 32px */ }
.h-24   { height: 6rem; /* 96px */ }
.h-full { height: 100%; }

.w-20       { width: 5rem; }
.w-42       { width: 12rem; }
.w-80       { width: 22rem; }
.w-50       { width: 42rem; }
.w-1-3      { width: 33%; }
.w-30p      { width: 30%; }
.w-1\/3     { width: 33%; }
.w-50p      { width: 48%; }
.w-1\/2     { width: 50%; }
.w-2\/3     { width: 66%; }
.w-1\/4     { width: 25%; }
.w-5\/12    { width: 41.666667%; }
.w-fit      { width: fit-content; }
.w-full     { width: 100%; }

.mt-6   { margin-top: 1.5rem; /* 32px */ }
.my-6   { margin-top: 1.5rem; margin-bottom: 1.5rem; /* 32px */ }
.mb-6   { margin-bottom: 1.5rem; /* 32px */ }

.py-6   { padding-top: 1.5rem; padding-bottom: 1.5rem; /* 32px */ }
.py-8   { padding-top: 2rem; padding-bottom: 2rem; /* 32px */ }
.py-16  { padding-top: 4rem; padding-bottom: 4rem; /* 64px */ }

.px-4   { padding-left: 1rem; padding-right: 1rem; /* 32px */ }
.px-8   { padding-left: 2rem; padding-right: 2rem; /* 32px */ }
.px-16  { padding-left: 4rem; padding-right: 4rem; /* 64px */ }

.block  { display: block; }
.flex   { display: flex; }
.hidden { display: none; }

.block-right { margin: 0 0 0 auto }

.quote::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("/assets/img/actualites/quote.svg");
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 5px;
    transform: rotate(180deg);
    margin-right: 1rem;
}
.quote::after {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("/assets/img/actualites/quote.svg");
    background-repeat: no-repeat;
    background-size: contain;
    margin-left: 5px;
    margin-left: 1rem;
}

.underlined {
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-decoration-color: var(--blue-institutional);
    text-underline-offset: 1rem;
    margin-bottom: 3rem;
}

.relative   { position: relative; }
.sticky     { position: sticky; top: 0; }
.absolute   { position: absolute; }
.static     { position: static; }

.top-0      { top: 0; }
.top-28     { top: 7rem; /* 112px */ }
.left-0     { left: 0; }
.right-0    { right: 0; }

.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }

.justify-between    { justify-content: space-between; }
.justify-center     { justify-content: center; }
.items-center       { align-items: center; }
.items-stretch      { align-items: stretch; }

.gap-0      { gap: 0px; }
.gap-0-5    { gap: 0.125rem; /* 2px */ }
.gap-1      { gap: 0.25rem; /* 4px */ }
.gap-1-5    { gap: 0.375rem; /* 6px */ }
.gap-2      { gap: 0.5rem; /* 8px */ }
.gap-2-5    { gap: 0.625rem; /* 10px */ }
.gap-3      { gap: 0.75rem; /* 12px */ }
.gap-3-5    { gap: 0.875rem; /* 14px */ }
.gap-4      { gap: 1rem; /* 16px */ }
.gap-6      { gap: 1.5rem; /* 24px */ }
.gap-8      { gap: 2rem; /* 32px */ }
.gap-16     { gap: 4rem; /* 64px */ }

.border-2 {
    border: 1px solid #000;
}

header button, footer button {
    background: transparent;
    border: none;
    font-family: "Codec Pro";
    font-size: 1rem;
    line-height: 1.5rem;
    cursor: pointer;
    font-weight: 200;
}
header a, header button, footer a, footer button {
    color: var(--blue-institutional);
    text-decoration: underline;
    text-decoration-color: transparent !important;
    outline: none;
}
.submenu a, .submenu button {
    word-break: break-word;
    overflow-wrap: break-word;
}

/*GLOBAL FOR ALL WEBSITE*/
a:focus-visible, button:focus-visible {
    outline: none;
    box-shadow:
      0 0 0 4px white,
      0 0 0 8px #30116A;
}
a::before, a::after,
button::before, button::after {
    outline: none !important;
    pointer-events: none !important;
}
/*GLOBAL FOR ALL WEBSITE*/

header a:hover:not([rel="prev"]), header button:hover:not([rel="prev"]), footer a:hover:not([rel="prev"]), footer button:hover:not([rel="prev"]) {
    text-decoration-color: var(--blue-institutional) !important;
}
header a[target="_blank"]::after, header button[target="_blank"]:not(.btn-sticky-talent-soft)::after, footer a[target="_blank"]::after, footer button[target="_blank"]:not(.btn-sticky-talent-soft)::after {
    display: inline-flex;
    content: '';
    background-image: url('../../img/features/header-footer/out-link.svg');
    background-repeat: no-repeat;
    height: 20px;
    width: 20px;
    margin-left: 0.3rem;
}

a[target="_blank"].external::after, button[formtarget="_blank"].external::after{
    display: inline-flex;
    content: '';
    margin-left: 0.3rem;

    background-color: currentColor; /* Applique la couleur du texte */
    -webkit-mask-image: url('../../img/features/header-footer/external-link.svg');
    mask-image: url('../../img/features/header-footer/external-link.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

button[formtarget="_blank"].external::after{
    height: 15px;
    width: 15px;
}

a[target="_blank"].external::after{
    height: 12px;
    width: 12px;
}

.visually-hidden {
    position: absolute !important;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    width: 1px;
    height: 1px;
    word-wrap: normal;
}
.visually-hidden.focusable:active, .visually-hidden.focusable:focus {
    position: static !important;
    overflow: visible;
    clip: auto;
    width: auto;
    height: auto;
    display: inline-block;
    margin: 1rem;
}

.accordion_correction {
    grid-template-columns: none;
}

.graduated-list p {
    margin-bottom: 0;
}

.list-style-picture li {
    list-style: none;
    display: block;
    margin-bottom: 2rem;
}

.list-style-picture li img {
    width: 16rem;
}

.list-style-picture li p {
    margin: 0;
}

.list-style-petales li {
    list-style: none;
    display: block;
    margin-bottom: 2rem;
    display: flex;
    gap: 1rem;
}

.list-style-petales li img {
    width: 2rem;
}

.list-style-petales li p {
    margin: 0;
}

.button-full {
    display: inline-block;
    text-decoration: none !important;
    font-size: 1em;
    padding: 1rem;
    margin: 1em 0em;
    text-align: center;
    background-repeat: no-repeat;
    background-position: left -710px top -10px;
    -webkit-transition: all 0.5s linear;
    transition: all 0.5s linear;
    border-radius: 0.3em;
    vertical-align: middle;
    font-family: "Codec Pro";
    line-height: 150%;
    font-variation-settings: "wght" 200;
    cursor: pointer;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDcwMCAyMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik03MDAgMTAwQzcwMCAxNTUuMjI4IDY1NS4yMjggMjAwIDYwMCAyMDBDNTQ0Ljc3MiAyMDAgNTAwIDE1NS4yMjggNTAwIDEwMEM1MDAgNDQuNzcxNSA1NDQuNzcyIDAgNjAwIDBDNjU1LjIyOCAwIDcwMCA0NC43NzE1IDcwMCAxMDBaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMCAwSDYwMFYyMDBIMFYwWiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==);
}

.button-full:hover {
    text-decoration: none !important;
    background-position: right -300px top -40px;
    background-color: transparent;
}

.tertiary {
    background-color: #000069;
    color: #ffffff;
    border: 2px solid #000069;
}

.secondary {
    background-color: #fdfdfd;
    color: #6A2DC1;
    border: 2px solid #fdfdfd;
}

.secondary:hover {
    color: #ffffff;
    border: 2px solid #fdfdfd;
}

.tertiary:hover {
    color: #000069;
    border: 2px solid #000069;
}

@media (min-width: 1240px) {
    .lg-px-14   { padding-left: 3.5rem; padding-right: 3.5rem; /* 56px */ }

    .lg-w-1-5   { width: 20%; }
    .lg-w-1-3   { width: 33%; }
    .lg-w-desc  { width: 35%; }
    .lg-w-fit   { width: fit-content; }
    .lg-w-full  { width: 100%; }

    .lg-block   { display: block; }
    .lg-flex    { display: flex; }
    .lg-hidden  { display: none; }

    .lg-static  { position: static; }
    .lg-sticky  { position: sticky; }

    .lg-flex-row { flex-direction: row; }
    .lg-flex-col { flex-direction: column; }

    .lg-justify-center     { justify-content: center; }

    .list-style-picture li {
        display: flex;
        align-items: center;
        gap: 2rem;
    }
}