body {
  margin: 0;
  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--bleu-tres-fonce);
}

.conteneur-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

::selection {
  color: #edf5f2;
  background: var(--bleu-clair);
}
html, body {
    overflow-x: clip;
}

/************************* Palette de couleur RAVAIL **************************/
:root {
    --blanc: #ffffff;
    --vert-clair: #76e297;
    --vert-clair-nuance-0: #62b87c;
    --vert-clair-nuance-1: #76e297;
    --vert-clair-nuance-2: #bff2ca;
    --vert-clair-nuance-3: #d5f6dc;
    --vert-clair-nuance-4: #e4f3f0;
    --vert-clair-nuance-5: #edf5f2;
    --vert-fonce: #93c6b6;
    --vert-fonce-nuance-1: #79a295;
    --vert-fonce-nuance-2: #93c6b6;
    --vert-cyan: #c3ebe3;
    --bleu-clair: #04aceb;
    --bleu-clair-nuance-1: #025676;
    --bleu-clair-nuance-2: #0378a5;
    --bleu-clair-nuance-3: #04aceb;
    --bleu-clair-nuance-4: #4fc5f1;
    --bleu-clair-nuance-4-alpha: #04adeb27;
    --bleu-clair-nuance-5: #9bdef7;
    --bleu-clair-nuance-6: #e6f7fd;
    --bleu-fonce: #3a5886;
    --bleu-tres-fonce: #233551;
    --bleu-fonce-nuance-1: #233551;
    --bleu-fonce-nuance-2: #3a5886;
    --bleu-fonce-nuance-3: #758aaa;
    --bleu-fonce-nuance-4: #8c93a4;
    --bleu-fonce-nuance-5: #d8dae0;
    --rouge: #f97575;
    --rouge-nuance-0: #c75d5d;
    --rouge-nuance-1: #fef1f1;
    --jaune: #ffb74d;
    --jaune-nuance-0:#e1972a;
    --jaune-nuance-1: #fff8ed;

}
/*********************** Fin Palette de couleur RAVAIL ************************/

#root {
    font-size: 18px;
    color: #233551;
    color: var(--bleu-tres-fonce);
}

body{
    -webkit-print-color-adjust:exact !important;
    print-color-adjust:exact !important;
    color: #233551;
    color: var(--bleu-tres-fonce);
}

.background {
    min-height: 100vh;
    display: block;
    background: #edf5f2;
    background: var(--vert-clair-nuance-5);
    align-items: center;
}

.backgroundImage {
    background-image: url(/static/media/backgroundv2.a8cd4f6d735448b719ff.webp);
    background-color: #e4f3f0;
    background-color: var(--vert-clair-nuance-4);
    background-position: top;
    background-size: 100% auto;
    background-repeat: no-repeat;
}

.background-stethos {
    background-image: url(/static/media/fond_stetho.27d3d0137b5532d604b4.png);
    background-color: #e4f3f0;
    background-color: var(--vert-clair-nuance-4);
    background-position: top;
    background-size: 100% auto;
}

.aligned-center {
    text-align: center;
}

@media (min-width: 992px){
    .lg-align-right {
        text-align: right;
    }
    
    .lg-align-left {
        text-align: left;
    }
}


@media (max-width: 575.98px){
    .ant-steps.ant-steps-dot:not(:has(.ant-steps-item-title .isQuickModeStepTitle)) .ant-steps-item-icon, .ant-steps.ant-steps-dot.ant-steps-small .ant-steps-item-icon {
        -webkit-margin-start: 16px !important;
                margin-inline-start: 16px !important;
    }

    .ant-steps.ant-steps-dot:not(:has(.ant-steps-item-title .isQuickModeStepTitle)) .ant-steps-item-process .ant-steps-item-icon, .ant-steps.ant-steps-dot.ant-steps-small .ant-steps-item-process .ant-steps-item-icon {
        -webkit-margin-start: 15px !important;
                margin-inline-start: 15px !important;
    }

    .ant-steps.ant-steps-dot:not(:has(.ant-steps-item-title .isQuickModeStepTitle)) .ant-steps-item-tail, .ant-steps.ant-steps-dot.ant-steps-small .ant-steps-item-tail {
        margin-inline: 20px 0 !important;
    }

    .ant-steps.ant-steps-dot .ant-steps-item-icon, .ant-steps.ant-steps-dot.ant-steps-small .ant-steps-item-icon {
        -webkit-margin-start: 10px !important;
                margin-inline-start: 10px !important;
    }

    .ant-steps.ant-steps-dot .ant-steps-item-process .ant-steps-item-icon, .ant-steps.ant-steps-dot.ant-steps-small .ant-steps-item-process .ant-steps-item-icon {
        -webkit-margin-start: 9px !important;
                margin-inline-start: 9px !important;
    }

    .ant-steps.ant-steps-dot .ant-steps-item-tail, .ant-steps.ant-steps-dot.ant-steps-small .ant-steps-item-tail {
        margin-inline: 14px 0 !important;
    }
}

@media (min-width: 576px){
    .ant-steps.ant-steps-dot:not(:has(.ant-steps-item-title .isQuickModeStepTitle)) .ant-steps-item-icon, .ant-steps.ant-steps-dot.ant-steps-small .ant-steps-item-icon {
        -webkit-margin-start: 76px !important;
                margin-inline-start: 76px !important;
    }

    .ant-steps.ant-steps-dot:not(:has(.ant-steps-item-title .isQuickModeStepTitle)) .ant-steps-item-process .ant-steps-item-icon, .ant-steps.ant-steps-dot.ant-steps-small .ant-steps-item-process .ant-steps-item-icon {
        -webkit-margin-start: 75px !important;
                margin-inline-start: 75px !important;
    }

    .ant-steps.ant-steps-dot:not(:has(.ant-steps-item-title .isQuickModeStepTitle)) .ant-steps-item-tail, .ant-steps.ant-steps-dot.ant-steps-small .ant-steps-item-tail {
        margin-inline: 80px 0 !important;
    }

    .ant-steps.ant-steps-dot .ant-steps-item-icon, .ant-steps.ant-steps-dot.ant-steps-small .ant-steps-item-icon {
        -webkit-margin-start: 70px !important;
                margin-inline-start: 70px !important;
    }

    .ant-steps.ant-steps-dot .ant-steps-item-process .ant-steps-item-icon, .ant-steps.ant-steps-dot.ant-steps-small .ant-steps-item-process .ant-steps-item-icon {
        -webkit-margin-start: 69px !important;
                margin-inline-start: 69px !important;
    }

    .ant-steps.ant-steps-dot .ant-steps-item-tail, .ant-steps.ant-steps-dot.ant-steps-small .ant-steps-item-tail {
        margin-inline: 74px 0 !important;
    }
}

.ant-steps .ant-steps-item-title {
    font-size: 1.45rem;
    padding: 0 10px 0 0 !important;
}

.isQuickModeStepTitle {
    font-size: 1.2rem !important;
    padding: 0 !important;
}

.ant-btn-primary.button-primary-dark {
    background-color: #3a5886;
    background-color: var(--bleu-fonce);
}

.mb-3 {
    margin-bottom: 3rem!important;
}

.ps-3 {
    padding-left: 1rem!important;
}

.fw-semibold {
    font-weight: 600!important;
}

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

div > img, svg {
    vertical-align: middle;
}

.ant-badge .ant-badge-multiple-words {
    padding: 0 6px;
}

.py-5 {
    padding-top: 3rem!important;
    padding-bottom: 3rem!important;
}

.page {
    width: 100%;
}

.heading {
    font-size: 60px;
    padding: 5px 10px;
    font-weight: 400;
    -webkit-margin-after: 0;
            margin-block-end: 0;
}


@media only screen and (max-width: 600px) {
    .heading {
        font-size: 30px;
        display: flex;
        justify-content: center;
    }
}

.btn-vertical{
    flex-direction: column !important;
    white-space: break-spaces !important;
    min-height: 148px !important;
    width: -webkit-min-content !important;
    width: min-content !important;
}

.steps-content {
    min-height: 200px;
}

.titreSection {
    font-size: 20px !important;
    font-weight: 700 !important;;
}

.section {
    margin-top: 24px;
}

.highlightSectionOnHover {
  position: relative;
}

/* Overlay */
.highlightSectionOnHover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #04adeb27;
  background: var(--bleu-clair-nuance-4-alpha);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none; /* keeps table clickable */
  border-radius: 4px;
}

/* Hover effect */
.highlightSectionOnHover:hover::after {
  opacity: 1;
}
  
.steps-action {
    margin-top: 24px;
    position: -webkit-sticky;
    position: sticky;
    bottom: -6px;
    z-index: 10;
    display: inline-block;
    width: 100%;
    box-shadow: rgb(0 0 0 / 20%) 0px 0px 4px;
    border-radius: 8px;
}

.caracIcon {
    width: 1.5em;
    height: 1.5em;
}

.steps-action > .ant-card-bordered {
    background-color: #93c6b6;
    background-color: var(--vert-fonce);
    border: 0;
}

.ant-menu-submenu-popup {
    z-index: 2000 !important;
}

.ant-btn > span {
    align-items: center;
}

.ant-form-horizontal .ant-form-item-control {
    flex: 1 1 auto;
}

.ant-form-item + .ant-form-text {
    margin-left: 5px;
}

.duration .ant-form-item-control-input-content {
    display: flex;
    align-items: center;
}

.ant-table .ant-select .ant-select-selection-placeholder {
    width: 0;
}

.ant-card .ant-card-head {
    font-weight: 700;
}

.ant-select-selector {
    height: auto !important;
}

.ant-menu{
    justify-content: right;
}

.ant-dropdown .ant-dropdown-menu{
    border-radius: 12px;
}

.ant-menu-submenu-title{
    height: auto !important;
}

.ant-divider .ant-divider-inner-text{
    white-space: break-spaces;
    flex-shrink: 0;
    max-width: 100%;
}

.ant-menu-light.ant-menu-horizontal >.connexionItem.ant-menu-item:hover::after, .ant-menu-light.ant-menu-horizontal >.connexionItem.ant-menu-item::after, .ant-menu-light.ant-menu-horizontal >.connexionItem.ant-menu-submenu:hover::after, .ant-menu-light.ant-menu-horizontal >.connexionItem.ant-menu-submenu::after, .ant-menu-light.ant-menu-horizontal >.connexionItem.ant-menu-item-active::after, .ant-menu-light.ant-menu-horizontal >.connexionItem.ant-menu-submenu-active::after, .ant-menu-light.ant-menu-horizontal >.connexionItem.ant-menu-item-open::after, .ant-menu-light.ant-menu-horizontal >.connexionItem.ant-menu-submenu-open::after{
    border-bottom: none !important;
}

.ant-menu-light.ant-menu-horizontal >.connectedItem.ant-menu-item:hover::after, .ant-menu-light.ant-menu-horizontal >.connectedItem.ant-menu-item::after, .ant-menu-light.ant-menu-horizontal >.connectedItem.ant-menu-submenu:hover::after, .ant-menu-light.ant-menu-horizontal >.connectedItem.ant-menu-submenu::after, .ant-menu-light.ant-menu-horizontal >.connectedItem.ant-menu-item-active::after, .ant-menu-light.ant-menu-horizontal >.connectedItem.ant-menu-submenu-active::after, .ant-menu-light.ant-menu-horizontal >.connectedItem.ant-menu-item-open::after, .ant-menu-light.ant-menu-horizontal >.connectedItem.ant-menu-submenu-open::after{
    border-bottom: none !important;
}

.connectedItem{
    border: 4px solid #3a5886 !important;
    border: 4px solid var(--bleu-fonce) !important;
    border-radius: 18px !important;
    margin-left: 8px !important;
}

.connectedItem:hover{
    border: 4px solid #04aceb !important;
    border: 4px solid var(--bleu-clair) !important;
}

.ant-menu-light.ant-menu-horizontal >.logoItem.ant-menu-item:hover::after, .ant-menu-light.ant-menu-horizontal >.logoItem.ant-menu-item::after, .ant-menu-light.ant-menu-horizontal >.logoItem.ant-menu-submenu:hover::after, .ant-menu-light.ant-menu-horizontal >.logoItem.ant-menu-submenu::after, .ant-menu-light.ant-menu-horizontal >.logoItem.ant-menu-item-active::after, .ant-menu-light.ant-menu-horizontal >.logoItem.ant-menu-submenu-active::after, .ant-menu-light.ant-menu-horizontal >.logoItem.ant-menu-item-open::after, .ant-menu-light.ant-menu-horizontal >.logoItem.ant-menu-submenu-open::after{
    border-bottom: none !important;
}

label[for=basic_visiteType] {
    margin-top: 12px;
}

.logoLink{
    height: 64px;
    width: 100%;
    display: flex;
}

.logoImg{
    height: 100%;
    width: 100%;
    min-height: 100%; /* fix to solve object-fit not working well on Safari */
    min-width: 100%; /* fix to solve object-fit not working well on Safari */
    object-fit: contain;
}

.email-pre-visite {
    width: 169px !important;
}

.cardNiveauExpo > .ant-card-body {
    padding: 14px !important;
}

.ant-menu-horizontal >.ant-menu-item{
    display: flex;
    align-items: center;
    font-size: 1rem;
    font-weight: 600;
}

.ant-col-18 {
    flex: 0 0 75% !important;
}

.ant-menu-horizontal >.ant-menu-overflow-item{
    display: flex;
    align-items: center;
    font-size: 1rem;
    font-weight: 600;
}

.ant-menu-horizontal >.ant-menu-overflow-item-rest::after{
    border: none !important;
}

.ant-menu{
    border-bottom: none !important;
}

.ant-tabs-card.ant-tabs-top > .ant-tabs-nav .ant-tabs-tab-active, .ant-tabs-card.ant-tabs-top > div > .ant-tabs-nav .ant-tabs-tab-active {
    border-bottom-color: #3a5886;
    border-bottom-color: var(--bleu-fonce);
    background: #3a5886;
    background: var(--bleu-fonce);
}

.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab-active, .ant-tabs-card > div > .ant-tabs-nav .ant-tabs-tab-active {
    color: #ffffff;
    color: var(--blanc);
    background: #3a5886;
    background: var(--bleu-fonce);
}

.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab, .ant-tabs-card > div > .ant-tabs-nav .ant-tabs-tab {
    background-color: #758aaa;
    background-color: var(--bleu-fonce-nuance-3);
    color: white;
    border-bottom: 0;
}

.ant-tabs-top > .ant-tabs-nav::before, .ant-tabs-bottom > .ant-tabs-nav::before, .ant-tabs-top > div > .ant-tabs-nav::before, .ant-tabs-bottom > div > .ant-tabs-nav::before {
    border-bottom: none;
}

.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
    color: #ffffff !important;
    color: var(--blanc) !important;
}

.ant-tabs-nav-wrap{
    background-color: white;
}

.width100{
    width: 100%;
}


.ant-tabs-nav-list >:not(.ant-tabs-tab-active) {
    border: 1px solid #758aaa !important;
    border: 1px solid var(--bleu-fonce-nuance-3) !important;
    border-left: 1px solid #3a5886 !important;
    border-left: 1px solid var(--bleu-fonce-nuance-2) !important;
    transition: none !important;
    margin-left: 0px !important;
}

.ant-tabs-nav-list {
    line-height: 28px;
}

.ant-tabs-tab:hover {
    border: 1px solid #3a5886 !important;
    border: 1px solid var(--bleu-fonce) !important;
    border-bottom: 0px !important;
    color: #233551 !important;
    color: var(--bleu-tres-fonce) !important;
}

.ant-tabs-tab.ant-tabs-tab-active:hover {
    border: 1px solid #3a5886 !important;
    border: 1px solid var(--bleu-fonce) !important;
    transition: none !important;
}

.ant-tabs-tab-active {
    border: 1px solid #3a5886 !important;
    border: 1px solid var(--bleu-fonce) !important;
    transition: none !important;
    margin: 0px !important;
}

.ant-tabs-tab-btn span {
    font-size: 18px;
}

.ant-tabs-tab-labelled {
    margin-top: 1em;
}

.ant-tabs-tab-labelled > .ant-card-body{
    padding: 1em;
    padding-top: 0px;
}

.ants-card-label-text {
    scroll-margin-top: 2em;
    font-size: 18px;
}

.ants-card-label {
    position: absolute;
    top: -15px;
    left: 1em;
    font-size: 16px;
    background-color: #04aceb;
    background-color: var(--bleu-clair);
    border-radius: 20px;
    color: white;
    padding: 2px 16px;
    margin-right: 16px;
}

.ants-card-label-invisible-placeholder {
    font-size: 18px;
    color: white;
    padding: 0px 16px;
    visibility: hidden;
}

.troncate-card-label .ants-card-label-invisible-placeholder {
    padding: 0;
}

.ant-tabs-card.ant-tabs-top>.ant-tabs-nav .ant-tabs-tab-active, .ant-tabs-card.ant-tabs-top>div>.ant-tabs-nav .ant-tabs-tab-active {
    padding: 8px 16px;
}

.ant-tabs-card.ant-tabs-top>.ant-tabs-nav .ant-tabs-tab{
    margin-top: auto;
}

.ant-steps .ant-steps-item-process>.ant-steps-item-container>.ant-steps-item-content>.ant-steps-item-title {
    font-weight: 600;
    color: #76e297;
    color: var(--vert-clair);
}

.ant-steps .ant-steps-item-finish>.ant-steps-item-container>.ant-steps-item-content>.ant-steps-item-title {
    font-weight: 500;
}

.ant-steps .ant-steps-item-error .ant-steps-item-icon >.ant-steps-icon .ant-steps-icon-dot {
    background: #5bc1e7;
}

.ant-steps .ant-steps-item-error>.ant-steps-item-container>.ant-steps-item-content>.ant-steps-item-title {
    padding-left: 5%;
    color: rgba(0, 0, 0, 0.45);
}

.ant-steps .ant-steps-item-finish>.ant-steps-item-container>.ant-steps-item-content>.ant-steps-item-title {
    color: #04aceb;
    color: var(--bleu-clair);
}

.ant-steps .ant-steps-item-process .ant-steps-item-icon >.ant-steps-icon .ant-steps-icon-dot {
    background: #76e297;
    background: var(--vert-clair);
}

.ants-card-extra {
    position: absolute;
    top: 1em;
    right: 1em;
}


.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab, .ant-tabs-card > div > .ant-tabs-nav .ant-tabs-tab {
    z-index: -2;
}

.ant-tooltip-content {
    padding-left: 12px;
}

.ant-tabs-top > .ant-tabs-nav, .ant-tabs-bottom > .ant-tabs-nav, .ant-tabs-top > div > .ant-tabs-nav, .ant-tabs-bottom > div > .ant-tabs-nav {
    margin: 0 0 0 0;
}

.ant-tabs-content-holder {
    z-index: 0;
    background-color: #3a5886;
    background-color: var(--bleu-fonce);
    border-radius: 0 4px 8px 8px; 
    padding: 1em;
}

.ant-tabs-card.ant-tabs-top > .ant-tabs-nav .ant-tabs-tab, .ant-tabs-card.ant-tabs-top > div > .ant-tabs-nav .ant-tabs-tab {
    border-radius: 4px 4px 0 0;
}

.ant-divider-horizontal.ant-divider-with-text {
    display: inline-flex;
}

.ant-divider-horizontal {
    display: inline-flex;
    margin: 12px 0;
}

.ant-card-bordered {
    box-shadow: rgba(149, 157, 165, 0.2) 0px 0px 4px;
}

.ant-card-hoverable:hover {
    cursor: auto;
    border-color: #04aceb;
    border-color: var(--bleu-clair);
}

.ant-picker {
    display: flex;
}

.ant-picker-input > input {
    text-align: center;
}

.site-tree-search-value {
    background-color: #f4ff00;
}

.potential-expositions-recommendation {
    color: #04aceb;
    color: var(--bleu-clair);
    font-weight: bold;
}

.mandatory-seeked-expositions {
    color: #f97575;
    color: var(--rouge);
    font-weight: bold;
}

.ant-input-prefix, .ant-input-suffix {
    align-items: normal;
}

.ant-modal-confirm-content {
    width: 100%;
}

button.ant-btn {
    white-space: break-spaces;
    height: auto;
    min-height: 24px;
    padding: 3px 15px;
}

.card-container {
    background-color: #eef5f2;
}

.legal {
    text-align: left;
}

.ant-float-btn-icon {
    width: 100% !important;
}

.ant-select {
    height: auto !important;
}

.ant-space-item {
    max-width: 100%;
}

.ant-select-selection-item {
    white-space: break-spaces !important;
    height: auto !important;
}

.ant-image-preview-wrap {
    z-index: 1120 !important;
}

.ant-image-preview-operations-wrapper {
    z-index: 1121 !important;
}

div:not([class^="ant-"]) > table:not([class^="ant-"]), table:not([class^="ant-"]) th:not([class^="ant-"]), td:not([class^="ant-"]) {
    line-height: 8mm;
}

.simpleTableGreen {
    border-collapse: collapse;
}

.simpleTableGreen td {
    border: 1px solid #e4f3f0;
    border: 1px solid var(--vert-clair-nuance-4);
    padding: 0 2mm;
}

.legal {
    text-align: left;
}

.ant-btn-lg {
    padding: 6px 15px;
}

.ant-btn .ant-btn-icon {
    line-height: 0;
}

.ant-badge .ant-scroll-number {
    z-index: 1;
}

.ant-table-wrapper .ant-table .ant-table-tbody >tr >td {
    background: #fff;
}

.ant-table-tbody > tr.ant-table-row:hover > td {
    background-color: #edf5f2 !important;
    background-color: var(--vert-clair-nuance-5) !important;
}

.ant-table-tbody > tr.ant-table-row-selected.ant-table-row-level-0 > td{
    background: #eaf5ff;
}

.ant-table-tbody > tr.ant-table-row-selected.ant-table-row-level-1 > td {
    background: #f1f8ff;
}

.ant-table-tbody > tr.ant-table-row-selected.ant-table-row-level-2 > td {
    background: #f6fbff
}

.ant-table-thead > tr > th {
    color: #233551;
    color: var(--bleu-tres-fonce);
    background: #e4f3f0 !important;
    background: var(--vert-clair-nuance-4) !important;
}

.ant-table-thead > tr > td {
    color: #233551;
    color: var(--bleu-tres-fonce);
    background: #e4f3f0 !important;
    background: var(--vert-clair-nuance-4) !important;
}

.ant-modal {
    top: 300px;
}

.StethoLogo {
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    margin-top: 40px;
  }

.ant-tag {
    white-space: break-spaces;
    -webkit-margin-end: 0px;
            margin-inline-end: 0px;
}

.ant-tag-checkable{
    background-color: #0000000a;
}

.ant-tag-checkable-checked{
    background-color: #04aceb;
    background-color: var(--bleu-clair);
}

.checkableTagGreen {
    background-color: #d5f6dc;
    background-color: var(--vert-clair-nuance-3);
    color: #62b87c !important;
    color: var(--vert-clair-nuance-0) !important;
}

.checkableTagGreen:hover {
    background-color: #62b87c !important;
    background-color: var(--vert-clair-nuance-0) !important;
    color: #d5f6dc !important;
    color: var(--vert-clair-nuance-3) !important;
}

.checkableTagRed {
    background-color: #fef1f1;
    background-color: var(--rouge-nuance-1);
    color: #c75d5d !important;
    color: var(--rouge-nuance-0) !important;
}

.checkableTagRed:hover {
    background-color: #c75d5d !important;
    background-color: var(--rouge-nuance-0) !important;
    color: #fef1f1 !important;
    color: var(--rouge-nuance-1) !important;
}

.ant-tooltip {
    z-index: 1110;
}

.tooltip-synthese {
    z-index: 9;
}

.ant-tooltip .ant-tooltip-inner {
    box-shadow: 0px 0px 4px 3px rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)
}

.ant-tree .ant-tree-checkbox-disabled .ant-tree-checkbox-inner {
    background: #d9d9d9;
    border-color: #d9d9d9;
}

.ant-popover .ant-popover-inner {
    background-color: rgb(240 247 253);
    box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
}

.ant-select-multiple .ant-select-selection-item {
    height: auto;
}

.ant-select-multiple .ant-select-selection-item-content{
    white-space: break-spaces;
}

.ant-select-multiple .ant-select-selection-overflow {
    display: grid;
}

.anticon-info-circle {
    color: rgba(0, 0, 0, 0.45);
    cursor: help;
    writing-mode: horizontal-tb;
    display: inline-flex;
}

.daysBeforeExpiredInner {
    border: 2px solid;
    border-radius: 16px;
    width: -webkit-fit-content;
    width: fit-content;
    background: #d0e9e5;
    padding: 0px 8px;
    margin-inline: auto;
    transform: rotate(328deg);
}

.daysBeforeExpiredOuter {
    color: rgb(228 128 131);
    position: absolute;
    top: 44px;
    right: -63px;
    line-height: 14px;
    font-size: 12px;
}

.editable-cell {
    position: relative;
}

.editable-cell-value-wrap {
    padding: 5px 12px;
    cursor: pointer;
}

.non-editable-cell-value-wrap {
    padding: 5px 12px;
}

#pdfContent .editable-cell-value-wrap {
    padding: 0px;
    white-space: pre-wrap;
}

.required::before {
    display: inline-block;
    margin-right: 4px;
    color: #ff4d4f;
    font-size: 14px;
    font-family: SimSun, sans-serif;
    line-height: 1;
    content: '*';
}

.multiple-cell {
    display: inline-flex;
}

.editable-row:hover .editable-cell-value-wrap {
    padding: 4px 11px !important;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
}

.editable-cell-value-wrap:hover {
    background: #dcf4ff !important;
}

.editable-pdfContent {
    box-shadow: rgba(149, 157, 165, 0.2) 0px 0px 4px;
}

.editable-pdfContent:hover .editable-cell-value-wrap {
    padding: 4px 11px !important;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    background: #ebf9ff;
}

.ant-modal-footer > .ant-checkbox-wrapper{
    margin-right: 56px;
}

.ant-select-item-option-content {
    display: flex;
    align-items: center;
}

.ant-table-row-level-1 > td.ant-table-cell-with-append {
    padding-left: 72px !important;
}

.indent-level-1 {
    height: 0px !important;
}

.ant-table-row-expand-icon-spaced {
    display: none;
}

.container{
    position:relative;
    margin-left:auto;
    margin-right:auto;
    padding-right:15px;
    padding-left:15px
}

.iconsMedicaux {
    height: 492px;
    padding: 1rem;
}

.ant-empty-normal {
    color: rgb(0 0 0 / 50%);
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% {  transform: rotate(359deg); }
}

@keyframes heartFadeInOut {
    0% {transform: scale(1);}
    25% {transform: scale(.97);}
    35% {transform: scale(.9);}
    45% {transform: scale(1.1);}
    55% {transform: scale(.9);}
    65% {transform: scale(1.1);}
    75% {transform: scale(1.03);}
    100% {transform: scale(1);}
  }

@keyframes pdfScreenshotFlash {
    0%   { transform: scale(1);    box-shadow: rgba(149, 157, 165, 0.2) 0px 0px 4px; }
    15%  { transform: scale(0.96); box-shadow: rgba(4, 172, 235, 0.55) 0px 0px 24px 6px; }
    100% { transform: scale(1);    box-shadow: rgba(149, 157, 165, 0.2) 0px 0px 4px; }
}

@keyframes pdfScreenshotFlashOverlay {
    0%   { opacity: 0; }
    15%  { opacity: 0.85; }
    100% { opacity: 0; }
}

.pdf-screenshot-flash {
    animation: pdfScreenshotFlash 600ms ease-out;
}

.pdf-screenshot-flash::after {
    content: "";
    position: absolute;
    inset: 0;
    background: white;
    pointer-events: none;
    animation: pdfScreenshotFlashOverlay 600ms ease-out;
}

#loadingIndicators {
    display: inline-block;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    margin: 0 auto;
}

#spinningLogo {
    animation: spin 2s linear infinite;
    top: 0%;
    inset-inline-start: 42%;
}

#beatingLogo {
    animation: heartFadeInOut 2s linear infinite;
    top: 0%;
    inset-inline-start: 42%;
    z-index: 1001;
}

#loadingProgressBar {
    top: 300%;
}

.source {
    float: right;
    color: #00000080;
    font-size: 14px;
    font-weight: 600;
}

.source-table {
    color: #00000080;
    font-size: 14px;
    font-weight: 600;
}

@media (min-width: 476px){
    .container{
        padding-right:15px;
        padding-left:15px;
        width:100%
    }
    
    .jobCard, .metier-input-search {
        width: 408px;
    }
}
@media (min-width: 1170px){
    .container{
        width:720px;
        max-width:100%
    }
    .iconsMedicaux {
        display: inline;
        display: initial;
    }
    .StethoLogo {
        display: inline;
        display: initial;
    }
    .metier-input-search {
        width: 812px;
    }
}
@media (min-width: 1415px){
    .container{
        width:940px;
        max-width:100%
    }
}
@media (min-width: 1580px){
    .container{
        width:980px;
        max-width:100%
    }
}
@media (min-width: 1800px){
    .container{
        width:1140px;
        max-width:100%
    }
}

.navigation-dropdown-menu .ant-dropdown-menu {
    max-height: 80vh;
    overflow-y: auto;
}

.containerVisite, .containerAccueil {
    position:relative;
    margin-left:auto;
    margin-right:auto;
    padding-right:30px;
    padding-left:30px;
    width: 100%;
    box-sizing: border-box;
}
@media (max-width: 575.98px){
    .containerVisite, .containerAccueil{
        padding-right:0;
        padding-left:0;
    }
}

.ant-btn-dangerous {
    color: #f97575 !important;
    color: var(--rouge) !important;
    border-color: #f97575 !important;
    border-color: var(--rouge) !important;
    background: #FFFFFF !important;
}

.vue-detaillee .ant-space-gap-col-large {
    row-gap: 8px !important;
}

.metier-input-search .ant-input-lg {
    line-height: 1.45 !important;
}

.metier-input-search-modal {
    width: 100%;
}

.ant-layout-header {
    padding: 0 30px !important;
}

.ant-layout-footer {
    padding: 12px 50px !important;
}

.ant-alert-info .ant-alert-icon {
    color: #04aceb;
    color: var(--bleu-clair);
}

.ant-tag.ant-tag-blue {
    background-color: #e6f7fd !important;
    background-color: var(--bleu-clair-nuance-6) !important;
    border-color: #4fc5f1 !important;
    border-color: var(--bleu-clair-nuance-4) !important;
    color: #04aceb !important;
    color: var(--bleu-clair-nuance-3) !important;
}

.ant-tag.ant-tag-green {
    background-color: #eefbf1 !important;
    border-color: #76e297 !important;
    border-color: var(--vert-clair-nuance-1) !important;
    color: #62b87c !important;
    color: var(--vert-clair-nuance-0) !important;
}

.ant-tag.ant-tag-purple {
    background-color: whitesmoke !important;
    border-color: #758aaa !important;
    border-color: var(--bleu-fonce-nuance-3) !important;
    color: #3a5886 !important;
    color: var(--bleu-fonce-nuance-2) !important;
}

.ant-tag.ant-tag-red {
    background-color: #fef1f1 !important;
    background-color: var(--rouge-nuance-1) !important;
    border-color: #f97575 !important;
    border-color: var(--rouge) !important;
    color: #c75d5d !important;
    color: var(--rouge-nuance-0) !important;
}

.ant-tag.ant-tag-yellow {
    background-color: #fff8ed !important;
    background-color: var(--jaune-nuance-1) !important;
    border-color: #ffb74d !important;
    border-color: var(--jaune) !important;
    color: #e1972a !important;
    color: var(--jaune-nuance-0) !important;
}

.custom-tag-bleu-nuance-1 {
    background-color: #025676 !important;
    background-color: var(--bleu-clair-nuance-1) !important;
    border-color: #8c93a4 !important;
    border-color: var(--bleu-fonce-nuance-4) !important;
    color: #ffffff !important;
    color: var(--blanc) !important;
}

.custom-tag-bleu-nuance-4 {
    background-color: #4fc5f1 !important;
    background-color: var(--bleu-clair-nuance-4) !important;
    border-color: #d8dae0 !important;
    border-color: var(--bleu-fonce-nuance-5) !important;
    color: #ffffff !important;
    color: var(--blanc) !important;
}

.intensity-high {
    font-weight: 500;
    color: #025676;
}

.intensity-medium {
    font-weight: 500;
    color: #0378a5;
}

.intensity-low {
    font-weight: 500;
    color: #04aceb;
}

.intensity-lowest  {
    font-weight: 500;
    color: #4fc5f1;
}

.ant-select-item-option-content {
    color: inherit !important;
}

.ant-select-status-error > .ant-select-selector {
    border-color: #f97575 !important;
    border-color: var(--rouge) !important;
}

.ant-select-status-warning > .ant-select-selector {
    border-color: #ffb74d !important;
    border-color: var(--jaune) !important;
}

.ant-input-affix-wrapper-lg {
    line-height: 1.5em !important;
}

.ant-modal-confirm-confirm .ant-modal-confirm-body>.anticon, .ant-popconfirm .ant-popconfirm-message >.ant-popconfirm-message-icon .anticon {
    color: #ffb74d;
    color: var(--jaune);
}

.sub-title-blue {
    color: #04aceb;
    color: var(--bleu-clair);
    font-size: 20px;
    font-weight: bold;
    margin: 8mm 0 4mm 0;
}

.sub-title-blue.big-margin-top {
    margin-top: 12mm;
}

#ravail-document-footer {
    padding: 0mm 20mm 20mm 20mm;
    align-items: center;
}

#ravail-document-header {
    background-color: #93c6b6;
    padding: 10mm 20mm 4mm 0;
    height: 34mm;
    box-sizing: content-box;
    box-sizing: initial;
}

#ravail-document-header >.logo-adresse {
    float: left;
    width: 130mm;
    height: 22mm;
    padding: 6mm 2mm 4mm 21mm;
    background-color: #e4f3f0;
    box-sizing: content-box;
    box-sizing: initial;
    /*clip-path: polygon(0 0, 100% 0, 98% 100%, 0% 100%);*/
}

#ravail-document-header >.img-document {
    float: right;
    width: 20mm;
    height: 20mm;
    padding: 6mm;
    padding-left: 4mm;
    background-color: #233551;
    box-sizing: content-box;
    box-sizing: initial;
    /*clip-path: polygon(11.6% 0, 100% 0, 100% 100%, 0 100%);*/
}

.ant-steps.ant-steps-dot .ant-steps-item-content {
    width: 170px;
}


@media (min-width: 767px){
    /* Set width only if descendant has class 'isQuickModeStepTitle' */
    .ant-steps.ant-steps-dot .ant-steps-item-content:has(.ant-steps-item-title .isQuickModeStepTitle) {
        width: 155px;
    }
}

.highlightOnHover:hover {
    background-color: #e6f7fd;
    background-color: var(--bleu-clair-nuance-6);
}

.cr-colored-value {
    padding: 4px 8px;
    font-weight: 700;
    color: white;
    border-radius: 12px;
}

.cr-card {
    display: inline-block;
    position: relative;
    padding: 1mm 4mm 1mm 4mm;
    background-color: #edf5f2;
    background-color: var(--vert-clair-nuance-5);
    margin: 6mm 0;
    border-radius: 8mm;
    width: 100%;
}

.cr-card-label {
    position: absolute;
    top: -4mm;
    left: 50%;
    transform: translateX(-50%);
    font-size: 16px;
    font-weight: 700;
    background-color: #76e297;
    background-color: var(--vert-clair);
    border-radius: 20px;
    color: white;
    padding: 1mm 4mm 1mm 4mm;
    text-align: center;
    width: -webkit-max-content;
    width: max-content;
    max-width: 100%;
}

.cr-card-label-invisible-placeholder {
    font-size: 16px;
    font-weight: 700;
    color: white;
    padding: 1mm 4mm 1mm 4mm;
    width: -webkit-max-content;
    width: max-content;
    max-width: 100%;
    visibility: hidden;
}

table.ant-pdfTable, .cr-card table {
    width:100%;
    text-align:center;
    border:none;
    margin-bottom: 6mm;
}

.ant-pdfTh, .cr-card table>thead>tr {
    background-color: #9bdef7 !important;
    background-color: var(--bleu-clair-nuance-5) !important;
    line-height: 8mm;
    font-weight: bold;
    text-align: center;
}

.ant-pdfTd, .cr-card table>tbody>tr>td, .cr-table table>tbody>tr>td {
    padding: 2mm;
    line-height: 6mm;
    background-color: white;
}

.ant-pdfTd.puce-list {
    text-align: left;
}

.ant-pdfTd ul {
    padding-left: 5mm;
}

.linkStyleOnHover:hover {
    color: #04aceb;
    color: var(--bleu-clair);
}

.linkStyleOnHover {
    color: inherit;
}

@media (min-width: 476px){
    .indented-table .ant-table-selection-column {
        text-align: left !important;
    }
    .indented-table .thead-title {
        margin-left: -20px;
    }
    .indented-table .indented-checkbox {
        margin-left: 20px;
    }
}

.table-without-body .ant-table-tbody {
    display: none;
}
.table-without-body .ant-table-selection, .table-cache .ant-table-selection, .table-without-body .cache-source {
    display: none;
}
.table-without-body button {
    margin-left: 20px;
}
.table-cache .ant-table-cell {
    color: #8c93a4;
    color: var(--bleu-fonce-nuance-4);
}

.ant-table-cell .action-column, .ant-table-cell .source-column {
    display: none;
}
.ant-table-cell.ant-table-cell-row-hover .action-column, .ant-table-cell.ant-table-cell-row-hover .source-column {
    display: inline !important;
}

.custom-checkbox-group .ant-checkbox-wrapper {
  display: flex !important;
  align-items: center !important;
  width: 100%;
  white-space: normal;
}

.custom-checkbox-group .ant-checkbox {
  margin-right: 8px;
  flex-shrink: 0;
}

.custom-checkbox-group .ant-checkbox-wrapper .ant-checkbox + span {
  display: flex;
  width: calc(100% - 24px);
  justify-content: space-between;
  align-items: center;
}

/* ===================== PAGE 404 ===================== */

.nf-page {
  min-height: 100vh;
  background: #ebf5f4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 24px 60px;
}

.nf-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 480px;
  width: 100%;
}

.nf-number {
  display: block;
  font-size: 72px;
  font-weight: 800;
  line-height: 1;
  color: #f97575;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.nf-title {
  font-size: 32px;
  font-weight: 700;
  color: #3a5886;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.nf-desc {
  font-size: 16px;
  font-weight: 400;
  color: rgba(27, 34, 40, 0.5);
  margin: 0 0 32px;
  line-height: 1.6;
  max-width: 480px;
}

.nf-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 48px;
}

.nf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.nf-btn:hover {
  transform: scale(1.03);
}

.nf-btn--primary {
  background: #f97575;
  color: #ffffff;
  border: 2px solid #f97575;
}

.nf-btn--primary:hover {
  color: #ffffff;
}

.nf-btn--secondary {
  background: transparent;
  color: #f97575;
  border: 2px solid #f97575;
}

.nf-btn--secondary:hover {
  color: #f97575;
}

.nf-illustration {
  width: 100%;
  max-width: 260px;
  height: auto;
}

@media (max-width: 575px) {
  .logoLink {
    height: 44px;
  }

  .nf-number {
    font-size: 64px;
  }

  .nf-title {
    font-size: 28px;
  }

  .nf-desc {
    font-size: 16px;
  }

  .nf-actions {
    flex-direction: column;
    width: 100%;
  }

  .nf-btn {
    width: 100%;
  }
}

@media (max-width: 1400px) {
  .logoLink {
    height: 44px;
  }

  .ant-menu-horizontal >.ant-menu-item,
  .ant-menu-horizontal >.ant-menu-overflow-item {
    padding-inline: 10px;
  }
}

.custom-scroll-table .ant-table-body {
  overflow-y: auto !important;
}


.footer-vitrine-wrapper.ant-layout-footer {
  padding: 0 !important;
  background: #3a5886 !important;
}

.footer-vitrine {
  background-color: #3a5886;
  padding: 0 120px 48px;
  position: relative;
}

.fv-wave {
  line-height: 0;
  display: block;
  font-size: 0;
}

.fv-wave svg {
  display: block;
  width: 100%;
  height: 120px;
  vertical-align: bottom;
}

.fv-content {
  display: flex;
  justify-content: center;
  padding: 40px 0 48px;
}

.fv-nav {
  display: flex;
  flex-direction: row;
  gap: 48px;
  align-items: flex-start;
}

.fv-logo {
  width: 180px;
  height: auto;
  flex-shrink: 0;
}

.fv-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fv-col-title {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 4px;
}

.fv-link {
  font-size: 16px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 0.2s ease;
}

.fv-link:hover {
  color: #ffffff;
}

.fv-copyright {
  font-size: 14px;
  font-weight: 300;
  color: #ffffff;
  text-align: center;
  margin: 0;
}

@media (max-width: 991px) {
  .footer-vitrine {
    padding: 0 40px 40px;
  }

  .fv-nav {
    flex-wrap: wrap;
    gap: 40px;
  }
}

@media (max-width: 575px) {
  .footer-vitrine {
    padding: 0 24px 32px;
  }

  .fv-nav {
    flex-direction: column;
    gap: 32px;
  }
}

[data-sal]{transition-delay:0s;transition-delay:var(--sal-delay,0s);transition-duration:.2s;transition-duration:var(--sal-duration,.2s);transition-timing-function:ease;transition-timing-function:var(--sal-easing,ease)}[data-sal][data-sal-duration="200"]{transition-duration:.2s}[data-sal][data-sal-duration="250"]{transition-duration:.25s}[data-sal][data-sal-duration="300"]{transition-duration:.3s}[data-sal][data-sal-duration="350"]{transition-duration:.35s}[data-sal][data-sal-duration="400"]{transition-duration:.4s}[data-sal][data-sal-duration="450"]{transition-duration:.45s}[data-sal][data-sal-duration="500"]{transition-duration:.5s}[data-sal][data-sal-duration="550"]{transition-duration:.55s}[data-sal][data-sal-duration="600"]{transition-duration:.6s}[data-sal][data-sal-duration="650"]{transition-duration:.65s}[data-sal][data-sal-duration="700"]{transition-duration:.7s}[data-sal][data-sal-duration="750"]{transition-duration:.75s}[data-sal][data-sal-duration="800"]{transition-duration:.8s}[data-sal][data-sal-duration="850"]{transition-duration:.85s}[data-sal][data-sal-duration="900"]{transition-duration:.9s}[data-sal][data-sal-duration="950"]{transition-duration:.95s}[data-sal][data-sal-duration="1000"]{transition-duration:1s}[data-sal][data-sal-duration="1050"]{transition-duration:1.05s}[data-sal][data-sal-duration="1100"]{transition-duration:1.1s}[data-sal][data-sal-duration="1150"]{transition-duration:1.15s}[data-sal][data-sal-duration="1200"]{transition-duration:1.2s}[data-sal][data-sal-duration="1250"]{transition-duration:1.25s}[data-sal][data-sal-duration="1300"]{transition-duration:1.3s}[data-sal][data-sal-duration="1350"]{transition-duration:1.35s}[data-sal][data-sal-duration="1400"]{transition-duration:1.4s}[data-sal][data-sal-duration="1450"]{transition-duration:1.45s}[data-sal][data-sal-duration="1500"]{transition-duration:1.5s}[data-sal][data-sal-duration="1550"]{transition-duration:1.55s}[data-sal][data-sal-duration="1600"]{transition-duration:1.6s}[data-sal][data-sal-duration="1650"]{transition-duration:1.65s}[data-sal][data-sal-duration="1700"]{transition-duration:1.7s}[data-sal][data-sal-duration="1750"]{transition-duration:1.75s}[data-sal][data-sal-duration="1800"]{transition-duration:1.8s}[data-sal][data-sal-duration="1850"]{transition-duration:1.85s}[data-sal][data-sal-duration="1900"]{transition-duration:1.9s}[data-sal][data-sal-duration="1950"]{transition-duration:1.95s}[data-sal][data-sal-duration="2000"]{transition-duration:2s}[data-sal][data-sal-delay="50"]{transition-delay:.05s}[data-sal][data-sal-delay="100"]{transition-delay:.1s}[data-sal][data-sal-delay="150"]{transition-delay:.15s}[data-sal][data-sal-delay="200"]{transition-delay:.2s}[data-sal][data-sal-delay="250"]{transition-delay:.25s}[data-sal][data-sal-delay="300"]{transition-delay:.3s}[data-sal][data-sal-delay="350"]{transition-delay:.35s}[data-sal][data-sal-delay="400"]{transition-delay:.4s}[data-sal][data-sal-delay="450"]{transition-delay:.45s}[data-sal][data-sal-delay="500"]{transition-delay:.5s}[data-sal][data-sal-delay="550"]{transition-delay:.55s}[data-sal][data-sal-delay="600"]{transition-delay:.6s}[data-sal][data-sal-delay="650"]{transition-delay:.65s}[data-sal][data-sal-delay="700"]{transition-delay:.7s}[data-sal][data-sal-delay="750"]{transition-delay:.75s}[data-sal][data-sal-delay="800"]{transition-delay:.8s}[data-sal][data-sal-delay="850"]{transition-delay:.85s}[data-sal][data-sal-delay="900"]{transition-delay:.9s}[data-sal][data-sal-delay="950"]{transition-delay:.95s}[data-sal][data-sal-delay="1000"]{transition-delay:1s}[data-sal][data-sal-easing=linear]{transition-timing-function:linear}[data-sal][data-sal-easing=ease]{transition-timing-function:ease}[data-sal][data-sal-easing=ease-in]{transition-timing-function:ease-in}[data-sal][data-sal-easing=ease-out]{transition-timing-function:ease-out}[data-sal][data-sal-easing=ease-in-out]{transition-timing-function:ease-in-out}[data-sal][data-sal-easing=ease-in-cubic]{transition-timing-function:cubic-bezier(.55,.055,.675,.19)}[data-sal][data-sal-easing=ease-out-cubic]{transition-timing-function:cubic-bezier(.215,.61,.355,1)}[data-sal][data-sal-easing=ease-in-out-cubic]{transition-timing-function:cubic-bezier(.645,.045,.355,1)}[data-sal][data-sal-easing=ease-in-circ]{transition-timing-function:cubic-bezier(.6,.04,.98,.335)}[data-sal][data-sal-easing=ease-out-circ]{transition-timing-function:cubic-bezier(.075,.82,.165,1)}[data-sal][data-sal-easing=ease-in-out-circ]{transition-timing-function:cubic-bezier(.785,.135,.15,.86)}[data-sal][data-sal-easing=ease-in-expo]{transition-timing-function:cubic-bezier(.95,.05,.795,.035)}[data-sal][data-sal-easing=ease-out-expo]{transition-timing-function:cubic-bezier(.19,1,.22,1)}[data-sal][data-sal-easing=ease-in-out-expo]{transition-timing-function:cubic-bezier(1,0,0,1)}[data-sal][data-sal-easing=ease-in-quad]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-sal][data-sal-easing=ease-out-quad]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-sal][data-sal-easing=ease-in-out-quad]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-sal][data-sal-easing=ease-in-quart]{transition-timing-function:cubic-bezier(.895,.03,.685,.22)}[data-sal][data-sal-easing=ease-out-quart]{transition-timing-function:cubic-bezier(.165,.84,.44,1)}[data-sal][data-sal-easing=ease-in-out-quart]{transition-timing-function:cubic-bezier(.77,0,.175,1)}[data-sal][data-sal-easing=ease-in-quint]{transition-timing-function:cubic-bezier(.755,.05,.855,.06)}[data-sal][data-sal-easing=ease-out-quint]{transition-timing-function:cubic-bezier(.23,1,.32,1)}[data-sal][data-sal-easing=ease-in-out-quint]{transition-timing-function:cubic-bezier(.86,0,.07,1)}[data-sal][data-sal-easing=ease-in-sine]{transition-timing-function:cubic-bezier(.47,0,.745,.715)}[data-sal][data-sal-easing=ease-out-sine]{transition-timing-function:cubic-bezier(.39,.575,.565,1)}[data-sal][data-sal-easing=ease-in-out-sine]{transition-timing-function:cubic-bezier(.445,.05,.55,.95)}[data-sal][data-sal-easing=ease-in-back]{transition-timing-function:cubic-bezier(.6,-.28,.735,.045)}[data-sal][data-sal-easing=ease-out-back]{transition-timing-function:cubic-bezier(.175,.885,.32,1.275)}[data-sal][data-sal-easing=ease-in-out-back]{transition-timing-function:cubic-bezier(.68,-.55,.265,1.55)}[data-sal|=fade]{opacity:0;transition-property:opacity}[data-sal|=fade].sal-animate,body.sal-disabled [data-sal|=fade]{opacity:1}[data-sal|=slide]{opacity:0;transition-property:opacity,transform}[data-sal=slide-up]{transform:translateY(20%)}[data-sal=slide-down]{transform:translateY(-20%)}[data-sal=slide-left]{transform:translateX(20%)}[data-sal=slide-right]{transform:translateX(-20%)}[data-sal|=slide].sal-animate,body.sal-disabled [data-sal|=slide]{opacity:1;transform:none}[data-sal|=zoom]{opacity:0;transition-property:opacity,transform}[data-sal=zoom-in]{transform:scale(.5)}[data-sal=zoom-out]{transform:scale(1.1)}[data-sal|=zoom].sal-animate,body.sal-disabled [data-sal|=zoom]{opacity:1;transform:none}[data-sal|=flip]{-webkit-backface-visibility:hidden;backface-visibility:hidden;transition-property:transform}[data-sal=flip-left]{transform:perspective(2000px) rotateY(-91deg)}[data-sal=flip-right]{transform:perspective(2000px) rotateY(91deg)}[data-sal=flip-up]{transform:perspective(2000px) rotateX(-91deg)}[data-sal=flip-down]{transform:perspective(2000px) rotateX(91deg)}[data-sal|=flip].sal-animate,body.sal-disabled [data-sal|=flip]{transform:none}

/*# sourceMappingURL=sal.css.map*/
body {
	background-color: #e7f2f1;
	color: #253651;
}

/* ===================== HERO ===================== */

.hero-section {
  background-color: #ebf5f4;
  padding: 160px 0 0;
}

@media (min-width: 992px) {
  .hero-section {
    overflow: hidden;
  }
}

.hero-row {
  gap: 32px 0;
}

.hero-text-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
  padding: 40px 32px;
}

.hero-title {
  font-size: 56px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #3a5886;
  margin: 0;
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.ant-btn.ant-btn-lg.hero-btn-primary {
  background-color: #76e297;
  border-color: #76e297;
  color: #fff;
  border-radius: 12px;
  padding: 0 24px;
  font-weight: 500;
  font-size: 18px;
  height: 48px;
  transition: transform 0.2s ease;
}

.ant-btn.ant-btn-lg.hero-btn-primary:hover,
.ant-btn.ant-btn-lg.hero-btn-primary:focus {
  background-color: #76e297;
  border-color: #76e297;
  color: #fff;
  transform: scale(1.05);
}

.ant-btn.ant-btn-lg.hero-btn-secondary {
  background-color: transparent;
  border: 2px solid #04aceb;
  color: #04aceb;
  border-radius: 12px;
  padding: 0 24px;
  font-weight: 500;
  font-size: 18px;
  height: 48px;
}

.ant-btn.ant-btn-lg.hero-btn-secondary:hover,
.ant-btn.ant-btn-lg.hero-btn-secondary:focus {
  background-color: #04aceb;
  border-color: #04aceb;
  color: #fff;
}

/* Device frame */
.hero-device-col {
  padding: 0 0 0 64px;
}

.device-frame {
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(58, 88, 134, 0.1);
  box-shadow: 0 8px 32px rgba(58, 88, 134, 0.1), 0 2px 12px rgba(58, 88, 134, 0.1);
  overflow: hidden;
  width: 813px;
  flex-shrink: 0;
}

.device-titlebar {
  height: 40px;
  background-color: #93c6b6;
  display: flex;
  align-items: center;
  padding-left: 16px;
}

.device-titlebar::before {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #3a5886;
  box-shadow: 18px 0 0 #3a5886, 36px 0 0 #3a5886;
  flex-shrink: 0;
}

.device-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.device-img-wrap {
  position: relative;
  aspect-ratio: 203 / 278;
  overflow: hidden;
  cursor: pointer;
}

.device-img-recto,
.device-img-verso {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.device-img-recto {
  transition: filter 0.6s ease, opacity 0.6s ease;
}

.device-img-verso {
  opacity: 0;
  top: 16px;
  bottom: auto;
  height: calc(100% - 16px);
  transition: opacity 0.6s ease;
}

/* Desktop : hover */
@media (hover: hover) {
  .device-img-wrap:hover .device-img-recto {
    filter: blur(3px);
    opacity: 0.6;
  }
  .device-img-wrap:hover .device-img-verso {
    opacity: 1;
  }
}

/* Tablette et desktop : tap (classe toggleée via onClick) */
@media (min-width: 576px) {
  .device-img-wrap.is-flipped .device-img-recto {
    filter: blur(3px);
    opacity: 0.6;
  }
  .device-img-wrap.is-flipped .device-img-verso {
    opacity: 1;
  }
}

/* Mobile : pas d'effet, pas de curseur pointer */
@media (max-width: 575px) {
  .device-img-wrap {
    cursor: default;
  }
}

/* Responsive hero — tablette (<992px) */
@media (max-width: 991px) {
  .hero-section {
    padding: 80px 0 40px;
  }

  .hero-device-col {
    padding: 16px 16px 0;
  }

  .device-frame {
    width: 100%;
  }
}

/* Responsive hero — mobile (<576px) */
@media (max-width: 575px) {
  .hero-title {
    font-size: 36px;
  }

  .hero-text-col {
    padding: 24px 16px;
    gap: 24px;
  }

  .hero-device-col {
    padding: 16px 16px 0;
  }

  .device-frame {
    width: 100%;
  }
}

/* ===================== POINTS FORTS ===================== */

.wave-hero-to-pf {
  background: #ebf5f4;
  line-height: 0;
  display: block;
  font-size: 0;
}

.wave-hero-to-pf svg {
  display: block;
  width: 100%;
  height: 120px;
  vertical-align: bottom;
}

.section-points-forts {
  background: #fefefe;
  padding: 32px 0 0;
}

.pf-header {
  margin-bottom: 0;
}

.pf-title {
  font-size: 48px;
  font-weight: 700;
  color: #3a5886;
  margin-bottom: 8px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-align: left;
  padding: 0;
}

.pf-subtitle {
  font-size: 20px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.55);
  margin-bottom: 0;
}

.pf-cards {
  padding: 40px 0;
  align-items: stretch !important;
}

.pf-cards > .ant-col {
  display: flex !important;
}

.pf-card {
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0px 4px 10px rgba(58, 88, 134, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  height: 100%;
  width: 100%;
  text-align: center;
}

.pf-card p {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.7;
  margin: 0;
}

.pf-card--blue  { background-color: #3a5886; }
.pf-card--cyan  { background-color: #04aceb; }
.pf-card--green { background-color: #76e297; }

@keyframes pf-dot-bounce {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

.pf-dot {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pf-card:hover .pf-dot {
  animation: pf-dot-bounce 0.6s ease;
}

.pf-dot--green { background-color: #76e297; }
.pf-dot--blue  { background-color: #3a5886; }
.pf-dot--cyan  { background-color: #04aceb; }

@media (max-width: 575px) {
  .pf-title {
    font-size: 34px;
  }
  .pf-subtitle {
    font-size: 17px;
  }
}

/* ===================== FEATURE GALLERY ===================== */

.section-feature-gallery {
  background: #ffffff;
  padding: 48px 0 40px;
}

.fg-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 24px;
}

.fg-header {
  margin-bottom: 40px;
}

.fg-title {
  font-size: 48px;
  font-weight: 700;
  color: #3a5886;
  margin-bottom: 8px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-align: left;
  padding: 0;
}

.fg-subtitle {
  font-size: 20px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.55);
  margin-bottom: 0;
}

.fg-tabs {
  display: inline-flex;
  background: rgba(58, 88, 134, 0.07);
  border-radius: 12px;
  padding: 4px;
  gap: 2px;
  margin-bottom: 32px;
}

.fg-tab {
  padding: 8px 24px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: rgba(58, 88, 134, 0.5);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.fg-tab:not(.fg-tab--active):hover {
  color: #3a5886;
}

.fg-tab--active {
  background: #ffffff;
  color: #3a5886;
  box-shadow: 0 1px 6px rgba(58, 88, 134, 0.12);
}

@keyframes fg-slide-from-right {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fg-slide-from-left {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

.fg-gallery.fg-slide--right,
.fg-gallery.fg-slide--left {
  animation: none;
}

.fg-slide--right .fg-col:nth-child(1),
.fg-slide--left .fg-col:nth-child(1) {
  animation: fg-slide-from-right 0.35s ease both;
  animation-delay: 0s;
}

.fg-slide--right .fg-col:nth-child(2),
.fg-slide--left .fg-col:nth-child(2) {
  animation: fg-slide-from-right 0.35s ease both;
  animation-delay: 0.07s;
}

.fg-slide--right .fg-col:nth-child(3),
.fg-slide--left .fg-col:nth-child(3) {
  animation: fg-slide-from-right 0.35s ease both;
  animation-delay: 0.14s;
}

.fg-slide--left .fg-col:nth-child(1) { animation-name: fg-slide-from-left; }
.fg-slide--left .fg-col:nth-child(2) { animation-name: fg-slide-from-left; }
.fg-slide--left .fg-col:nth-child(3) { animation-name: fg-slide-from-left; }

.fg-cta {
  text-align: center;
  margin-top: 40px;
}

.fg-cta-btn {
  display: inline-block;
  padding: 12px 28px;
  background: #3a5886;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.fg-cta-btn:hover {
  background: #04aceb;
  color: #ffffff;
  transform: translateY(-2px);
}

.fg-gallery {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.fg-col {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  will-change: transform;
}


.fg-img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  display: block;
  cursor: pointer;
  transition: transform 0.3s ease;
  will-change: transform;
}

.fg-img:hover {
  transform: scale(1.03);
}

.section-feature-gallery .ant-image {
  display: block;
  width: 100%;
}

.section-feature-gallery .ant-image-mask {
  display: none !important;
}

@media (max-width: 991px) {
  .fg-gallery {
    flex-direction: column;
  }

  .fg-img {
    height: auto !important;
  }
}

@media (max-width: 575px) {
  .fg-title {
    font-size: 34px;
  }

  .section-feature-gallery {
    padding: 40px 0 60px;
  }

  .fg-tabs {
    gap: 2px;
  }

  .fg-tab {
    font-size: 13px;
    padding: 6px 14px;
  }
}

/* ===================== LABELS ===================== */

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.section-labels {
  background: linear-gradient(180deg, #fefefe 0%, #ebf5f4 32%, #ebf5f4 70%, #fefefe 100%);
  padding: 24px 0 80px;
}

.labels-header {
  margin-bottom: 40px;
}

.labels-title {
  font-size: 48px;
  font-weight: 700;
  color: #3a5886;
  margin-bottom: 8px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-align: left;
  padding: 0;
}

.labels-subtitle {
  font-size: 20px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.55);
  margin-bottom: 0;
}

.labels-track-wrapper {
  overflow: hidden;
  width: 100%;
}

.labels-track {
  display: flex;
  flex-wrap: nowrap;
  animation: marquee 45s linear infinite;
  width: -webkit-max-content;
  width: max-content;
  will-change: transform;
}

.labels-track:hover {
  animation-play-state: paused;
}

/* Chaque carte : 410x243px fixes, margin-right = espacement entre cartes */
.label-card {
  width: 410px;
  height: 243px;
  flex-shrink: 0;
  margin-right: 24px;
  background: #ffffff;
  border: 1px solid #ebf5f4;
  border-radius: 16px;
  box-shadow: 0px 4px 10px 0px rgba(58, 88, 134, 0.1);
  padding: 32px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
}

.label-logo {
  width: 120px;
  height: 120px;
  object-fit: contain;
  flex-shrink: 0;
}

.label-text {
  font-size: 16px;
  font-weight: 500;
  color: #3a5886;
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 575px) {
  .labels-title {
    font-size: 34px;
  }

  .labels-subtitle {
    font-size: 17px;
  }

  .section-labels {
    padding: 40px 0 60px;
  }
}

/* ===================== BLOG ===================== */

.section-blog {
  background: #fefefe;
  padding: 48px 0 0;
}

.blog-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 40px;
}

.blog-title {
  font-size: 48px;
  font-weight: 700;
  color: #3a5886;
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-align: left;
  padding: 0;
}

.blog-voir-plus {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 500;
  color: #3a5886;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.blog-voir-plus:hover {
  color: #04aceb;
}

.blog-arrow {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-top: 2px solid #f97575;
  border-right: 2px solid #f97575;
  transform: rotate(45deg);
}

.blog-card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(58, 88, 134, 0.07);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  cursor: pointer;
  will-change: transform;
}

.blog-card:hover {
  box-shadow: 0 8px 32px rgba(58, 88, 134, 0.14);
  transform: translateY(-3px);
}

.blog-card-img-wrap {
  height: 180px;
  overflow: hidden;
  flex-shrink: 0;
}

.blog-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.blog-card:hover .blog-card-img {
  transform: scale(1.04);
}

.blog-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1;
}

.blog-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.blog-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  border-radius: 20px;
  padding: 3px 10px;
}

.blog-card-date {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.4);
}

.blog-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.blog-card-title {
  font-size: 18px;
  font-weight: 700;
  color: #3a5886;
  margin: 0;
  line-height: 1.3;
}

.blog-card-arrow {
  font-size: 18px;
  color: #04aceb;
  flex-shrink: 0;
  margin-top: 2px;
  transition: transform 0.2s ease;
}

.blog-card:hover .blog-card-arrow {
  transform: translate(2px, -2px);
}

.blog-card-desc {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.55);
  line-height: 1.7;
  margin: 0;
}

@media (max-width: 575px) {
  .blog-title {
    font-size: 34px;
  }

  .section-blog {
    padding: 40px 0 0;
  }
}

/* ===================== FAQ ===================== */

.section-faq {
  background: #fefefe;
  padding: 64px 0 80px;
}

.faq-header {
  margin-bottom: 32px;
}

.faq-title {
  font-size: 48px;
  font-weight: 700;
  color: #3a5886;
  margin-bottom: 8px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.faq-subtitle {
  font-size: 20px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.55);
  margin-bottom: 0;
}

/* ── Grille de tuiles (3 + 4) ── */
.faq-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 10px;
  gap: 10px;
  margin-bottom: 28px;
}

.faq-tile { grid-column: span 4; }

.faq-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1.5px solid rgba(58, 88, 134, 0.15);
  background: #ffffff;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.faq-tile:hover:not(.faq-tile--active) {
  border-color: rgba(58, 88, 134, 0.35);
  box-shadow: 0 2px 8px rgba(58, 88, 134, 0.08);
}

.faq-tile--active {
  background: #3a5886;
  border-color: #3a5886;
}

.faq-tile-name {
  font-size: 15px;
  font-weight: 600;
  color: #253651;
  line-height: 1.35;
}

.faq-tile--active .faq-tile-name {
  color: #ffffff;
}

.faq-tile-count {
  font-size: 13px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.38);
}

.faq-tile--active .faq-tile-count {
  color: rgba(255, 255, 255, 0.6);
}

/* ── Panel accordéon ── */

@keyframes faq-panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.faq-panel {
  animation: faq-panel-in 0.2s ease both;
}

.faq-item {
  border-bottom: 1px solid rgba(58, 88, 134, 0.1);
}

.faq-item:first-child {
  border-top: 1px solid rgba(58, 88, 134, 0.1);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 17px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

.faq-question-text {
  flex: 1 1;
  min-width: 0;
  font-size: 18px;
  font-weight: 600;
  color: #253651;
  line-height: 1.5;
  overflow-wrap: break-word;
  transition: color 0.2s ease;
}

.faq-item--open .faq-question-text {
  color: #3a5886;
}

.faq-icon {
  font-size: 20px;
  font-weight: 300;
  color: #04aceb;
  flex-shrink: 0;
  width: 22px;
  text-align: center;
  -webkit-user-select: none;
          user-select: none;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.faq-item--open .faq-answer {
  max-height: 3000px;
}

.faq-answer-text {
  font-size: 17px;
  color: rgba(0, 0, 0, 0.62);
  line-height: 1.8;
  padding: 0 40px 18px 0;
  margin: 0;
}

.faq-cta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
  padding-top: 24px;
}

.faq-cta-text {
  font-size: 15px;
  color: rgba(0, 0, 0, 0.5);
  margin: 0;
}

.faq-cta-btn {
  font-size: 14px;
  font-weight: 600;
  color: #04aceb;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.faq-cta-btn:hover {
  color: #3a5886;
}

@media (max-width: 767px) {
  .faq-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .faq-tile:nth-child(-n+3),
  .faq-tile:nth-child(n+4) {
    grid-column: span 1;
  }
}

@media (max-width: 575px) {
  .section-faq {
    padding: 48px 0 60px;
  }
  .faq-title {
    font-size: 34px;
  }
  .faq-subtitle {
    font-size: 17px;
  }
  .faq-answer-text {
    padding-right: 16px;
  }
}

/* ===================== BOUTON SE CONNECTER (HeaderLinks) ===================== */

.ant-btn.ant-btn-lg.custom-btn-green {
  color: #243652;
  background-color: #76E297;
  border-color: #6AD48A;
  border-radius: 8px;
  padding: 8px 16px;
  font-weight: 500;
  height: auto;
  transition: transform 0.2s ease;
}

.ant-btn.ant-btn-lg.custom-btn-green.active,
.ant-btn.ant-btn-lg.custom-btn-green:active,
.ant-btn.ant-btn-lg.custom-btn-green:focus,
.ant-btn.ant-btn-lg.custom-btn-green:hover {
  color: #243652;
  background-color: #76E297;
  border-color: #6AD48A;
  transform: scale(1.05);
}

/* ===================== CONTAINER RESPONSIVE ===================== */

@media (min-width: 476px) {
  .containerAccueil {
    width: 100%;
  }
}

@media (min-width: 768px) {
  .containerAccueil {
    width: 720px;
    max-width: 100%;
  }
}

@media (min-width: 992px) {
  .containerAccueil {
    width: 960px;
    max-width: 100%;
  }
}

@media (min-width: 1200px) {
  .containerAccueil {
    width: 1140px;
    max-width: 100%;
  }
}

@media (min-width: 1400px) {
  .containerAccueil {
    width: 1340px;
    max-width: 100%;
  }
}

@media (min-width: 1700px) {
  .containerAccueil {
    width: 1340px;
    max-width: 100%;
  }
}

/* Copyright 2014 Mozilla Foundation
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

:root {
  --react-pdf-annotation-layer: 1;
  --annotation-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");
  --input-focus-border-color: Highlight;
  --input-focus-outline: 1px solid Canvas;
  --input-unfocused-border-color: transparent;
  --input-disabled-border-color: transparent;
  --input-hover-border-color: black;
  --link-outline: none;
}

@media screen and (forced-colors: active) {
  :root {
    --input-focus-border-color: CanvasText;
    --input-unfocused-border-color: ActiveText;
    --input-disabled-border-color: GrayText;
    --input-hover-border-color: Highlight;
    --link-outline: 1.5px solid LinkText;
  }
  .annotationLayer .textWidgetAnnotation :is(input, textarea):required,
  .annotationLayer .choiceWidgetAnnotation select:required,
  .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required {
    outline: 1.5px solid selectedItem;
  }

  .annotationLayer .linkAnnotation:hover {
    -webkit-backdrop-filter: invert(100%);
            backdrop-filter: invert(100%);
  }
}

.annotationLayer {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  transform-origin: 0 0;
  z-index: 3;
}

.annotationLayer[data-main-rotation='90'] .norotate {
  transform: rotate(270deg) translateX(-100%);
}
.annotationLayer[data-main-rotation='180'] .norotate {
  transform: rotate(180deg) translate(-100%, -100%);
}
.annotationLayer[data-main-rotation='270'] .norotate {
  transform: rotate(90deg) translateY(-100%);
}

.annotationLayer canvas {
  position: absolute;
  width: 100%;
  height: 100%;
}

.annotationLayer section {
  position: absolute;
  text-align: left;
  text-align: initial;
  pointer-events: auto;
  box-sizing: border-box;
  margin: 0;
  transform-origin: 0 0;
}

.annotationLayer .linkAnnotation {
  outline: none;
  outline: var(--link-outline);
}

.annotationLayer :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton) > a {
  position: absolute;
  font-size: 1em;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.annotationLayer :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton) > a:hover {
  opacity: 0.2;
  background: rgba(255, 255, 0, 1);
  box-shadow: 0 2px 10px rgba(255, 255, 0, 1);
}

.annotationLayer .textAnnotation img {
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.annotationLayer .textWidgetAnnotation :is(input, textarea),
.annotationLayer .choiceWidgetAnnotation select,
.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input {
  background-image: url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");
  background-image: var(--annotation-unfocused-field-background);
  border: 2px solid transparent;
  border: 2px solid var(--input-unfocused-border-color);
  box-sizing: border-box;
  font: calc(9px * var(--scale-factor)) sans-serif;
  height: 100%;
  margin: 0;
  vertical-align: top;
  width: 100%;
}

.annotationLayer .textWidgetAnnotation :is(input, textarea):required,
.annotationLayer .choiceWidgetAnnotation select:required,
.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required {
  outline: 1.5px solid red;
}

.annotationLayer .choiceWidgetAnnotation select option {
  padding: 0;
}

.annotationLayer .buttonWidgetAnnotation.radioButton input {
  border-radius: 50%;
}

.annotationLayer .textWidgetAnnotation textarea {
  resize: none;
}

.annotationLayer .textWidgetAnnotation :is(input, textarea)[disabled],
.annotationLayer .choiceWidgetAnnotation select[disabled],
.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input[disabled] {
  background: none;
  border: 2px solid transparent;
  border: 2px solid var(--input-disabled-border-color);
  cursor: not-allowed;
}

.annotationLayer .textWidgetAnnotation :is(input, textarea):hover,
.annotationLayer .choiceWidgetAnnotation select:hover,
.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:hover {
  border: 2px solid black;
  border: 2px solid var(--input-hover-border-color);
}
.annotationLayer .textWidgetAnnotation :is(input, textarea):hover,
.annotationLayer .choiceWidgetAnnotation select:hover,
.annotationLayer .buttonWidgetAnnotation.checkBox input:hover {
  border-radius: 2px;
}

.annotationLayer .textWidgetAnnotation :is(input, textarea):focus,
.annotationLayer .choiceWidgetAnnotation select:focus {
  background: none;
  border: 2px solid Highlight;
  border: 2px solid var(--input-focus-border-color);
  border-radius: 2px;
  outline: 1px solid Canvas;
  outline: var(--input-focus-outline);
}

.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) :focus {
  background-image: none;
  background-color: transparent;
}

.annotationLayer .buttonWidgetAnnotation.checkBox :focus {
  border: 2px solid Highlight;
  border: 2px solid var(--input-focus-border-color);
  border-radius: 2px;
  outline: 1px solid Canvas;
  outline: var(--input-focus-outline);
}

.annotationLayer .buttonWidgetAnnotation.radioButton :focus {
  border: 2px solid Highlight;
  border: 2px solid var(--input-focus-border-color);
  outline: 1px solid Canvas;
  outline: var(--input-focus-outline);
}

.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before,
.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after,
.annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before {
  background-color: CanvasText;
  content: '';
  display: block;
  position: absolute;
}

.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before,
.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after {
  height: 80%;
  left: 45%;
  width: 1px;
}

.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before {
  transform: rotate(45deg);
}

.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after {
  transform: rotate(-45deg);
}

.annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before {
  border-radius: 50%;
  height: 50%;
  left: 30%;
  top: 20%;
  width: 50%;
}

.annotationLayer .textWidgetAnnotation input.comb {
  font-family: monospace;
  padding-left: 2px;
  padding-right: 0;
}

.annotationLayer .textWidgetAnnotation input.comb:focus {
  /*
   * Letter spacing is placed on the right side of each character. Hence, the
   * letter spacing of the last character may be placed outside the visible
   * area, causing horizontal scrolling. We avoid this by extending the width
   * when the element has focus and revert this when it loses focus.
   */
  width: 103%;
}

.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input {
  -webkit-appearance: none;
          appearance: none;
}

.annotationLayer .popupTriggerArea {
  height: 100%;
  width: 100%;
}

.annotationLayer .fileAttachmentAnnotation .popupTriggerArea {
  position: absolute;
}

.annotationLayer .popupWrapper {
  position: absolute;
  font-size: calc(9px * var(--scale-factor));
  width: 100%;
  min-width: calc(180px * var(--scale-factor));
  pointer-events: none;
}

.annotationLayer .popup {
  position: absolute;
  max-width: calc(180px * var(--scale-factor));
  background-color: rgba(255, 255, 153, 1);
  box-shadow: 0 calc(2px * var(--scale-factor)) calc(5px * var(--scale-factor))
    rgba(136, 136, 136, 1);
  border-radius: calc(2px * var(--scale-factor));
  padding: calc(6px * var(--scale-factor));
  margin-left: calc(5px * var(--scale-factor));
  cursor: pointer;
  font: message-box;
  white-space: normal;
  word-wrap: break-word;
  pointer-events: auto;
}

.annotationLayer .popup > * {
  font-size: calc(9px * var(--scale-factor));
}

.annotationLayer .popup h1 {
  display: inline-block;
}

.annotationLayer .popupDate {
  display: inline-block;
  margin-left: calc(5px * var(--scale-factor));
}

.annotationLayer .popupContent {
  border-top: 1px solid rgba(51, 51, 51, 1);
  margin-top: calc(2px * var(--scale-factor));
  padding-top: calc(2px * var(--scale-factor));
}

.annotationLayer .richText > * {
  white-space: pre-wrap;
  font-size: calc(9px * var(--scale-factor));
}

.annotationLayer .highlightAnnotation,
.annotationLayer .underlineAnnotation,
.annotationLayer .squigglyAnnotation,
.annotationLayer .strikeoutAnnotation,
.annotationLayer .freeTextAnnotation,
.annotationLayer .lineAnnotation svg line,
.annotationLayer .squareAnnotation svg rect,
.annotationLayer .circleAnnotation svg ellipse,
.annotationLayer .polylineAnnotation svg polyline,
.annotationLayer .polygonAnnotation svg polygon,
.annotationLayer .caretAnnotation,
.annotationLayer .inkAnnotation svg polyline,
.annotationLayer .stampAnnotation,
.annotationLayer .fileAttachmentAnnotation {
  cursor: pointer;
}

.annotationLayer section svg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.annotationLayer .annotationTextContent {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  color: transparent;
  -webkit-user-select: none;
          user-select: none;
  pointer-events: none;
}

.annotationLayer .annotationTextContent span {
  width: 100%;
  display: inline-block;
}

/* Copyright 2014 Mozilla Foundation
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

:root {
  --react-pdf-text-layer: 1;
  --highlight-bg-color: rgba(180, 0, 170, 1);
  --highlight-selected-bg-color: rgba(0, 100, 0, 1);
}

@media screen and (forced-colors: active) {
  :root {
    --highlight-bg-color: Highlight;
    --highlight-selected-bg-color: ButtonText;
  }
}

[data-main-rotation='90'] {
  transform: rotate(90deg) translateY(-100%);
}
[data-main-rotation='180'] {
  transform: rotate(180deg) translate(-100%, -100%);
}
[data-main-rotation='270'] {
  transform: rotate(270deg) translateX(-100%);
}

.textLayer {
  position: absolute;
  text-align: left;
  text-align: initial;
  inset: 0;
  overflow: hidden;
  line-height: 1;
  -webkit-text-size-adjust: none;
     -moz-text-size-adjust: none;
          text-size-adjust: none;
  forced-color-adjust: none;
  transform-origin: 0 0;
  z-index: 2;
}

.textLayer :is(span, br) {
  color: transparent;
  position: absolute;
  white-space: pre;
  cursor: text;
  margin: 0;
  transform-origin: 0 0;
}

/* Only necessary in Google Chrome, see issue 14205, and most unfortunately
 * the problem doesn't show up in "text" reference tests. */
.textLayer span.markedContent {
  top: 0;
  height: 0;
}

.textLayer .highlight {
  margin: -1px;
  padding: 1px;
  background-color: rgba(180, 0, 170, 1);
  background-color: var(--highlight-bg-color);
  border-radius: 4px;
}

.textLayer .highlight.appended {
  position: static;
  position: initial;
}

.textLayer .highlight.begin {
  border-radius: 4px 0 0 4px;
}

.textLayer .highlight.end {
  border-radius: 0 4px 4px 0;
}

.textLayer .highlight.middle {
  border-radius: 0;
}

.textLayer .highlight.selected {
  background-color: rgba(0, 100, 0, 1);
  background-color: var(--highlight-selected-bg-color);
}

/* Avoids https://github.com/mozilla/pdf.js/issues/13840 in Chrome */
.textLayer br::selection {
  background: transparent;
}

.textLayer .endOfContent {
  display: block;
  position: absolute;
  inset: 100% 0 0;
  z-index: -1;
  cursor: default;
  -webkit-user-select: none;
          user-select: none;
}

.textLayer .endOfContent.active {
  top: 0;
}

/* ===================== PDF MAGAZINE ===================== */

.pdf-magazine {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 40px 0 0;
  width: 100%;
}

.pdf-magazine-loading {
  font-size: 15px;
  color: rgba(58, 88, 134, 0.5);
  padding: 40px;
  text-align: center;
}

/* Wrapper avec flèches latérales */
.pdf-flipbook-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
}

.pdf-flipbook-arrow {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #04aceb;
  background: rgba(255, 255, 255, 0.9);
  color: #04aceb;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
  box-shadow: 0 2px 8px rgba(4, 172, 235, 0.15);
}

.pdf-flipbook-arrow:hover:not(:disabled) {
  background: #04aceb;
  color: #fff;
  transform: scale(1.08);
}

.pdf-flipbook-arrow:disabled {
  opacity: 0.25;
  cursor: default;
}

/* Fenêtre de clipping — centrée, masque la moitié vide sur couverture/4e de couv */
.pdf-flipbook-clip {
  margin: 0 auto;
  display: block;
  max-width: 100%;
  box-shadow:
    0 8px 32px rgba(4, 172, 235, 0.2),
    0 24px 64px rgba(58, 88, 134, 0.18);
  border-radius: 2px;
}

/* Conteneur du flipbook généré par react-pageflip */
.pdf-flipbook {
  border-radius: 2px;
}

.pdf-magazine-page {
  background: #fff;
  overflow: hidden;
}

.pdf-magazine-page canvas {
  display: block;
}

/* ===================== CONTRÔLES ===================== */

.pdf-magazine-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 480px;
}

.pdf-magazine-counter {
  font-size: 13px;
  color: rgba(58, 88, 134, 0.6);
  white-space: nowrap;
  min-width: 56px;
  text-align: center;
}

.pdf-magazine-slider {
  flex: 1 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 4px;
  background: rgba(4, 172, 235, 0.2);
  outline: none;
  cursor: pointer;
}

.pdf-magazine-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #04aceb;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(4, 172, 235, 0.4);
  -webkit-transition: transform 0.15s ease;
  transition: transform 0.15s ease;
}

.pdf-magazine-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.pdf-magazine-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #04aceb;
  cursor: pointer;
  border: none;
  box-shadow: 0 1px 4px rgba(4, 172, 235, 0.4);
}

/* ===================== RESPONSIVE ===================== */

@media (max-width: 767px) {
  .pdf-flipbook-arrow {
    display: none;
  }
}

/* ===================== BOUTON TÉLÉCHARGEMENT ===================== */

.pdf-magazine-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 12px;
  background: transparent;
  border: 2px solid #3a5886;
  color: #3a5886;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.pdf-magazine-download::before {
  content: '↓';
  font-size: 16px;
}

.pdf-magazine-download:hover {
  background: #3a5886;
  color: #fff;
}

/* ===================== PAGE WRAPPER ===================== */

.ns-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.ns-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ===================== HERO ===================== */

.ns-hero {
  background: #ebf5f4;
  padding: 100px 0 0;
  position: relative;
  z-index: 2;
}

.ns-hero-title {
  font-size: 56px;
  font-weight: 700;
  color: #3a5886;
  margin: 0 0 20px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.ns-hero-intro {
  font-size: 18px;
  color: rgba(0, 0, 0, 0.55);
  margin: 0;
  line-height: 1.7;
  max-width: 600px;
}

/* ===================== VAGUES ===================== */

.wave-ns-to-content {
  background: #ebf5f4;
  line-height: 0;
  display: block;
  font-size: 0;
  position: relative;
  z-index: 1;
  margin-top: -1px;
}

.wave-ns-to-content svg {
  display: block;
  width: 100%;
  height: 120px;
}


/* ===================== SECTIONS ===================== */

.ns-section {
  background: #fefefe;
  padding: 72px 0;
}

.ns-section--alt {
  background: #f7fbfa;
}

.ns-section-title {
  font-size: 40px;
  font-weight: 700;
  color: #3a5886;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}

.ns-section-subtitle {
  font-size: 18px;
  color: rgba(0, 0, 0, 0.45);
  margin: 0;
  line-height: 1.6;
}

/* ===================== VIDÉO ===================== */

.ns-video-wrap {
  margin: 48px auto -240px;
  max-width: 860px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 56px rgba(58, 88, 134, 0.22), 0 4px 16px rgba(58, 88, 134, 0.14);
  position: relative;
  z-index: 3;
}

.ns-video {
  width: 100%;
  display: block;
}

.ns-video-play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ns-video-play-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #3a5886;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 4px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, background 0.2s ease;
}

.ns-video-play:hover .ns-video-play-icon {
  transform: scale(1.1);
  background: #ffffff;
}

.ns-demo-cta {
  display: flex;
  justify-content: center;
  padding-top: 160px;
  padding-bottom: 40px;
  background: #fefefe;
}

/* ===================== BADGES ===================== */

.ns-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 20px;
  padding: 4px 14px;
  margin-bottom: 16px;
}

.ns-badge--blue {
  background: rgba(4, 172, 235, 0.12);
  color: #04aceb;
}

.ns-badge--dark {
  background: rgba(58, 88, 134, 0.1);
  color: #3a5886;
}

.ns-badge--green {
  background: rgba(118, 226, 151, 0.2);
  color: #3a8a56;
}

/* ===================== TIMELINE FONCTIONNALITÉS ===================== */

.ns-section--timeline {
  background: #fefefe;
  padding: 72px 0;
}

.ns-section--timeline .ns-section-subtitle {
  margin-bottom: 48px;
}

.ns-tl-layout {
  display: flex;
  gap: 48px;
  align-items: stretch;
}

.ns-tl-sidebar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  position: -webkit-sticky;
  position: sticky;
  top: 120px;
}

.ns-tl-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-align: left;
}

.ns-tl-item-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ns-tl-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(58, 88, 134, 0.08);
  border: 2px solid rgba(58, 88, 134, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  flex-shrink: 0;
}

.ns-tl-item--active .ns-tl-dot {
  background: #04aceb;
  border-color: #04aceb;
  transform: scale(1.1);
}

.ns-tl-item:not(.ns-tl-item--active):hover .ns-tl-dot {
  border-color: #04aceb;
}

.ns-tl-number {
  font-size: 12px;
  font-weight: 700;
  color: rgba(58, 88, 134, 0.5);
  transition: color 0.2s ease;
}

.ns-tl-item--active .ns-tl-number {
  color: #ffffff;
}

.ns-tl-label {
  font-size: 13px;
  font-weight: 500;
  color: rgba(58, 88, 134, 0.4);
  white-space: nowrap;
  transition: color 0.2s ease, font-weight 0.2s ease;
}

.ns-tl-item--active .ns-tl-label {
  color: #04aceb;
}

.ns-tl-item:not(.ns-tl-item--active):hover .ns-tl-label {
  color: #04aceb;
}

.ns-tl-item--active:hover .ns-tl-number {
  color: #ffffff;
}

.ns-tl-line {
  width: 2px;
  height: 28px;
  background: rgba(58, 88, 134, 0.15);
  display: block;
  margin-left: 15px;
}

.ns-tl-content {
  flex: 1 1;
  min-width: 0;
  display: flex;
}

@keyframes ns-content-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ns-tl-content-panel {
  animation: ns-content-in 0.3s ease;
  background: #f7fbfa;
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 2px 12px rgba(58, 88, 134, 0.07);
  width: 100%;
  min-height: 420px;
  display: flex;
  align-items: center;
}

.ns-feature-img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

.ns-tl-content-panel .ant-image {
  display: block;
  width: 100%;
}

.ns-tl-content-panel .ant-image-mask {
  background: rgba(58, 88, 134, 0.55);
  border-radius: 12px;
}

.ns-feature-img-wrap--sm {
  width: 45%;
  margin: 0 auto;
}


.ns-feature-title {
  font-size: 24px;
  font-weight: 700;
  color: #3a5886;
  margin: 0 0 16px;
  line-height: 1.2;
}

.ns-feature-text {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.6);
  line-height: 1.8;
  margin: 0;
}

/* ===================== SÉCURITÉ ===================== */

.ns-section--securite {
  background: linear-gradient(180deg, #fefefe 0%, #ebf5f4 32%, #ebf5f4 70%, #fefefe 100%);
}

.ns-securite-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 12px;
  gap: 12px;
  margin-top: 32px;
  margin-bottom: 32px;
}

.ns-securite-card {
  border-left: 3px solid #04aceb;
  background: #ffffff;
  border-radius: 0 10px 10px 0;
  padding: 14px 16px;
  box-shadow: 0 2px 8px rgba(58, 88, 134, 0.06);
}

.ns-securite-card-titre {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #3a5886;
  margin-bottom: 4px;
}

.ns-securite-card-texte {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.55);
  line-height: 1.6;
  margin: 0;
}

.ns-securite-rgpd {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.5);
  line-height: 1.5;
}

.ns-rgpd-icon {
  width: 56px;
  height: auto;
  flex-shrink: 0;
}

.ns-securite-illustration {
  width: 100%;
  height: auto;
}

/* ===================== CTA FINAL ===================== */

.ns-cta {
  background: #fefefe;
  padding: 64px 0;
}

.ns-cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 32px;
}

.ns-cta-subtitle {
  font-size: 18px;
  color: rgba(0, 0, 0, 0.45);
  margin: -16px 0 0;
  line-height: 1.6;
}

.ns-cta-title {
  font-size: 40px;
  font-weight: 700;
  color: #3a5886;
  margin: 0;
  letter-spacing: -0.02em;
}

.ns-cta-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.ns-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.ns-cta-btn:hover {
  transform: scale(1.03);
}

.ns-cta-btn--primary {
  background: #76e297;
  color: #ffffff;
}

.ns-cta-btn--primary:hover {
  color: #ffffff;
}

.ns-cta-btn--secondary {
  background: transparent;
  color: #04aceb;
  border: 2px solid #04aceb;
}

.ns-cta-btn--secondary:hover {
  background: #04aceb;
  color: #ffffff;
}

/* ===================== RESPONSIVE ===================== */

@media (max-width: 991px) {
  .ns-securite-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 991px) {
  .ns-tl-sidebar {
    position: static;
  }
}

@media (max-width: 767px) {
  .ns-tl-layout {
    flex-direction: column;
    gap: 24px;
  }

  .ns-tl-sidebar {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    position: static;
    gap: 8px;
  }

  .ns-tl-item {
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
  }

  .ns-tl-item-row {
    flex-direction: row;
    background: rgba(58, 88, 134, 0.06);
    border-radius: 20px;
    padding: 6px 12px 6px 6px;
    gap: 8px;
    transition: background 0.2s ease;
  }

  .ns-tl-item--active .ns-tl-item-row {
    background: rgba(4, 172, 235, 0.12);
  }

  .ns-tl-line {
    display: none;
  }

  .ns-tl-dot {
    width: 26px;
    height: 26px;
  }

  .ns-tl-label {
    font-size: 12px;
  }


  .ns-tl-content-panel {
    padding: 24px;
    min-height: 0;
  }

  .ns-feature-img {
    height: 220px;
  }
}

@media (max-width: 575px) {
  .ns-hero-title {
    font-size: 40px;
  }

  .ns-section-title {
    font-size: 28px;
  }

  .ns-cta-title {
    font-size: 28px;
  }

  .ns-cta-actions {
    flex-direction: column;
    width: 100%;
  }

  .ns-cta-btn {
    width: 100%;
  }
}

/* ===================== PAGE ===================== */

.blog-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.blog-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ===================== HERO ===================== */

.blog-hero {
  background: #ebf5f4;
  padding: 120px 0 48px;
}

.blog-eyebrow {
  display: block;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #04aceb;
  margin-bottom: 12px;
}

.blog-hero-title {
  font-size: 56px;
  font-weight: 700;
  color: #3a5886;
  margin: 0 0 20px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.blog-hero-text {
  font-size: 18px;
  color: rgba(0, 0, 0, 0.55);
  margin: 0;
  line-height: 1.7;
  max-width: 520px;
}

/* Newsletter */

.blog-newsletter {
  background: #ffffff;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 4px 24px rgba(58, 88, 134, 0.10);
}

.blog-newsletter-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #3a5886;
  margin-bottom: 8px;
}

.blog-newsletter-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.blog-newsletter-input {
  width: 100%;
  height: 52px;
  border: 1px solid rgba(58, 88, 134, 0.2);
  border-radius: 10px;
  padding: 0 14px;
  font-size: 15px;
  color: #3a5886;
  outline: none;
  transition: border-color 0.2s ease;
}

.blog-newsletter-input:focus {
  border-color: #04aceb;
}

.blog-newsletter-input::placeholder {
  color: rgba(0, 0, 0, 0.35);
}

.blog-newsletter-btn {
  width: 100%;
  height: 52px;
  padding: 0 20px;
  background: #76e297;
  color: #ffffff;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.2s ease;
}

.blog-newsletter-btn:hover {
  transform: scale(1.03);
}

.blog-newsletter-error {
  font-size: 12px;
  color: #f97575;
  margin: 6px 0 0;
}

.blog-newsletter-hint {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.4);
  margin: 10px 0 0;
  line-height: 1.5;
}

.blog-newsletter-hint a {
  color: #04aceb;
  text-decoration: none;
}

.blog-newsletter-thanks {
  font-size: 16px;
  font-weight: 600;
  color: #3a5886;
  text-align: center;
  margin: 0;
  padding: 16px 0;
}

/* ===================== VAGUE ===================== */

.wave-blog-hero {
  background: #ebf5f4;
  line-height: 0;
  display: block;
  font-size: 0;
  margin-top: -1px;
}

.wave-blog-hero svg {
  display: block;
  width: 100%;
  height: 64px;
}


/* ===================== FILTRES ===================== */

.blog-filters {
  background: #f7fbfa;
  padding: 0;
}

.blog-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 480px;
  margin-top: 28px;
}

.blog-search-icon {
  position: absolute;
  left: 16px;
  width: 17px;
  height: 17px;
  color: rgba(58, 88, 134, 0.45);
  pointer-events: none;
  flex-shrink: 0;
}

.blog-search-input {
  width: 100%;
  height: 48px;
  padding: 0 40px 0 46px;
  border: 2px solid rgba(58, 88, 134, 0.18);
  border-radius: 28px;
  background: #ffffff;
  font-size: 15px;
  color: #3a5886;
  outline: none;
  box-shadow: 0 2px 12px rgba(58, 88, 134, 0.08);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.blog-search-input::placeholder {
  color: rgba(58, 88, 134, 0.38);
}

.blog-search-input:focus {
  border-color: #04aceb;
  box-shadow: 0 2px 16px rgba(4, 172, 235, 0.14);
}

.blog-search-clear {
  position: absolute;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  color: rgba(58, 88, 134, 0.4);
  padding: 0;
  line-height: 1;
  transition: color 0.2s ease;
}

.blog-search-clear:hover {
  color: #3a5886;
}

.blog-filters-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}


.blog-filter-btn {
  height: 36px;
  padding: 0 18px;
  border-radius: 20px;
  border: 2px solid rgba(58, 88, 134, 0.15);
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  color: rgba(58, 88, 134, 0.55);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.blog-filter-btn:hover {
  cursor: pointer;
}

.blog-filter-btn--active {
  font-weight: 600;
}

/* ===================== SECTIONS ===================== */

.blog-section {
  background: #f7fbfa;
  padding: 32px 0 72px;
  min-height: 400px;
}

.blog-section-title {
  font-size: 32px;
  font-weight: 700;
  color: #3a5886;
  margin: 0 0 32px;
  letter-spacing: -0.02em;
}


/* ===================== CARTE ===================== */

.blog-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.blog-card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(58, 88, 134, 0.07);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  cursor: pointer;
}

.blog-card:hover {
  box-shadow: 0 8px 32px rgba(58, 88, 134, 0.14);
  transform: translateY(-3px);
}

.blog-card-img-wrap {
  overflow: hidden;
  flex-shrink: 0;
}

.blog-card-img-wrap {
  height: 180px;
}

.blog-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
  transition: transform 0.4s ease;
}

.blog-card:hover .blog-card-img {
  transform: scale(1.04);
}

.blog-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1;
}

.blog-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.blog-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  border-radius: 20px;
  padding: 3px 10px;
}

.blog-card-date {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.4);
}

.blog-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.blog-card-title {
  font-size: 18px;
  font-weight: 700;
  color: #3a5886;
  margin: 0;
  line-height: 1.3;
}


.blog-card-arrow {
  font-size: 18px;
  color: #04aceb;
  flex-shrink: 0;
  margin-top: 2px;
  transition: transform 0.2s ease;
}

.blog-card:hover .blog-card-arrow {
  transform: translate(2px, -2px);
}

.blog-card-desc {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.55);
  line-height: 1.7;
  margin: 0;
}

/* ===================== PAGINATION ===================== */

.blog-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(58, 88, 134, 0.12);
  gap: 16px;
}

.blog-pagination-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: rgba(58, 88, 134, 0.55);
  padding: 0;
  transition: color 0.2s ease;
}

.blog-pagination-nav:hover:not(:disabled) {
  color: #3a5886;
}

.blog-pagination-nav:disabled {
  opacity: 0.3;
  cursor: default;
}

.blog-pagination-numbers {
  display: flex;
  gap: 2px;
}

.blog-pagination-page {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  color: rgba(58, 88, 134, 0.55);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.blog-pagination-page:hover {
  background: rgba(4, 172, 235, 0.10);
  color: #04aceb;
}

.blog-pagination-page--active {
  background: rgba(4, 172, 235, 0.12);
  color: #04aceb;
}

.blog-pagination-ellipsis {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: rgba(58, 88, 134, 0.35);
  -webkit-user-select: none;
          user-select: none;
}

/* ===================== RESPONSIVE ===================== */


@media (max-width: 575px) {
  .blog-pagination-nav span {
    display: none;
  }

  .blog-hero-title {
    font-size: 40px;
  }

  .blog-section-title {
    font-size: 24px;
  }

  .blog-card:not(.blog-card--big) .blog-card-img-wrap {
    height: 140px;
  }
}

/* ===================== IMAGE PLACEHOLDER ===================== */

.blog-card-img-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #e8f5f1 0%, #d0ece5 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog-card-dept-num {
  font-size: 48px;
  font-weight: 800;
  color: #2e9a78;
  opacity: 0.45;
  letter-spacing: -0.03em;
  line-height: 1;
}

/* ===================== BANNIÈRE ANNUAIRE SPSTI ===================== */

.blog-spsti-banner {
  padding: 28px 0 8px;
}

.blog-spsti-banner-content {
  display: flex;
  align-items: center;
  gap: 20px;
  background: linear-gradient(135deg, #edf7f3 0%, #f0faf6 100%);
  border: 1px solid rgba(46, 160, 120, 0.2);
  border-radius: 16px;
  padding: 24px 28px;
}

.blog-spsti-banner-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: rgba(46, 160, 120, 0.12);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog-spsti-banner-text {
  flex: 1 1;
  min-width: 0;
}

.blog-spsti-banner-title {
  font-size: 18px;
  font-weight: 700;
  color: #3a5886;
  margin: 0 0 4px;
}

.blog-spsti-banner-desc {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.55);
  margin: 0;
  line-height: 1.55;
}

.blog-spsti-banner-cta {
  flex-shrink: 0;
  background: #2e9a78;
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease;
}

.blog-spsti-banner-cta:hover {
  background: #267d63;
}

@media (max-width: 640px) {
  .blog-spsti-banner-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 20px;
  }

  .blog-spsti-banner-cta {
    width: 100%;
    text-align: center;
  }
}

/* ===================== PAGE ===================== */

.article-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.article-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ===================== HERO ===================== */

.article-hero {
  background: #ebf5f4;
  padding: 112px 0 56px;
  overflow: visible;
}

.article-hero-layout {
  display: flex;
  flex-direction: column;
}

.article-hero-layout--with-img {
  display: grid;
  grid-template-columns: 1fr 380px;
  grid-gap: 48px;
  gap: 48px;
  align-items: start;
}

.article-hero-img-col {
  position: relative;
  z-index: 2;
  transform: translateY(16px);
}

.article-hero-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  box-shadow: 0 20px 56px rgba(58, 88, 134, 0.18);
}

.article-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(58, 88, 134, 0.55);
  text-decoration: none;
  margin-bottom: 28px;
  transition: color 0.2s ease;
}

.article-back-link:hover {
  color: #3a5886;
}

.article-hero-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.article-hero-date {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.4);
}

.article-hero-title {
  font-size: 48px;
  font-weight: 700;
  color: #3a5886;
  margin: 0 0 20px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  max-width: 800px;
}

.article-hero-desc {
  font-size: 18px;
  color: rgba(0, 0, 0, 0.55);
  line-height: 1.7;
  margin: 0;
  max-width: 680px;
}

/* ===================== BADGE ===================== */

.article-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
}

/* ===================== VAGUE ===================== */

.wave-article-hero {
  background: #ebf5f4;
  line-height: 0;
  display: block;
  font-size: 0;
  margin-top: -1px;
  position: relative;
  z-index: 1;
}

.wave-article-hero svg {
  display: block;
  width: 100%;
  height: 120px;
}


/* ===================== SECTION ===================== */

.article-section {
  background: #ffffff;
  padding: 56px 0 80px;
  position: relative;
  z-index: 1;
}

.article-section--with-img {
  padding-top: 72px; /* 56px + 16px de dépassement image */
}

/* ===================== LAYOUT ===================== */

.article-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  grid-gap: 56px;
  gap: 56px;
  align-items: start;
}

/* ===================== CORPS DE L'ARTICLE ===================== */

.article-content {
  font-size: 17px;
  line-height: 1.8;
  color: rgba(0, 0, 0, 0.75);
}

.article-content h1 {
  font-size: 32px;
  font-weight: 700;
  color: #3a5886;
  margin: 0 0 24px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.article-content h2 {
  font-size: 26px;
  font-weight: 700;
  color: #3a5886;
  margin: 40px 0 16px;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.article-content h3 {
  font-size: 20px;
  font-weight: 600;
  color: #3a5886;
  margin: 32px 0 12px;
  line-height: 1.35;
}

.article-content p {
  margin: 0 0 20px;
}

.article-content p:last-child {
  margin-bottom: 0;
}

.article-content ul,
.article-content ol {
  margin: 0 0 20px;
  padding-left: 24px;
}

.article-content li {
  margin-bottom: 8px;
}

.article-content strong {
  font-weight: 600;
  color: #3a5886;
}

.article-content em {
  color: rgba(0, 0, 0, 0.55);
  font-style: italic;
}

.article-content a {
  color: #04aceb;
  text-decoration: none;
}

.article-content a:hover {
  text-decoration: underline;
}

.article-content hr {
  border: none;
  border-top: 1px solid rgba(58, 88, 134, 0.12);
  margin: 40px 0;
}

.article-content blockquote {
  border-left: 3px solid #04aceb;
  margin: 24px 0;
  padding: 12px 20px;
  background: rgba(4, 172, 235, 0.05);
  border-radius: 0 8px 8px 0;
}

.article-content blockquote p {
  margin: 0;
  color: rgba(0, 0, 0, 0.65);
}

.article-content code {
  background: rgba(58, 88, 134, 0.07);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.9em;
  font-family: monospace;
  color: #3a5886;
}

/* ===================== SIDEBAR ===================== */

.article-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: -webkit-sticky;
  position: sticky;
  top: 80px;
}

.article-sidebar-card {
  background: #f7fbfa;
  border-radius: 12px;
  padding: 20px;
}

.article-sidebar-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(58, 88, 134, 0.5);
  margin: 0 0 10px;
}

.article-sidebar-value {
  font-size: 15px;
  font-weight: 500;
  color: #3a5886;
  margin: 0;
}

.article-sidebar-cta {
  background: #3a5886;
  border-radius: 12px;
  padding: 24px;
  margin-top: 8px;
}

.article-sidebar-cta-text {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  margin: 0 0 16px;
}

.article-sidebar-cta-btn {
  display: block;
  text-align: center;
  background: #76e297;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 8px;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.article-sidebar-cta-btn:hover {
  transform: scale(1.02);
  color: #ffffff;
}

.article-newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.article-newsletter-input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
}

.article-newsletter-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.article-newsletter-input:focus {
  border-color: #76e297;
}

.article-newsletter-btn {
  width: 100%;
  height: 40px;
  background: #76e297;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.article-newsletter-btn:hover {
  transform: scale(1.02);
}

.article-newsletter-thanks {
  font-size: 14px;
  color: #76e297;
  font-weight: 600;
  margin: 0;
}

.article-newsletter-error {
  font-size: 12px;
  color: #f97575;
  margin: 4px 0 0;
}

/* ===================== ARTICLES LIÉS ===================== */

.article-related {
  background: linear-gradient(180deg, #fefefe 0%, #ebf5f4 32%, #ebf5f4 70%, #fefefe 100%);
  padding: 56px 0;
}

.article-related-title {
  font-size: 22px;
  font-weight: 700;
  color: #3a5886;
  margin: 0 0 24px;
  letter-spacing: -0.01em;
}

.article-related-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 24px;
  gap: 24px;
}

.article-related-card {
  display: flex;
  gap: 16px;
  align-items: center;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 12px rgba(58, 88, 134, 0.07);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.article-related-card:hover {
  box-shadow: 0 8px 28px rgba(58, 88, 134, 0.13);
  transform: translateY(-2px);
}

.article-related-img-wrap {
  flex-shrink: 0;
  width: 120px;
  height: 90px;
  overflow: hidden;
}

.article-related-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

.article-related-body {
  padding: 16px 16px 16px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.article-related-card-title {
  font-size: 14px;
  font-weight: 600;
  color: #3a5886;
  margin: 0;
  line-height: 1.4;
}

@media (max-width: 575px) {
  .article-related-grid {
    grid-template-columns: 1fr;
  }
}

/* ===================== LOADING / SKELETON ===================== */

.article-loading {
  padding-top: 40px;
}

.article-skeleton {
  background: linear-gradient(90deg, rgba(58, 88, 134, 0.07) 25%, rgba(58, 88, 134, 0.12) 50%, rgba(58, 88, 134, 0.07) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: 8px;
  margin-bottom: 16px;
}

.article-skeleton--title {
  height: 48px;
  width: 70%;
}

.article-skeleton--subtitle {
  height: 20px;
  width: 45%;
}

.article-skeleton--img {
  height: 280px;
  width: 100%;
  border-radius: 16px;
  margin: 24px 0;
}

.article-skeleton--body {
  height: 16px;
  width: 100%;
}

.article-skeleton--short {
  width: 60%;
}

@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ===================== NOT FOUND ===================== */

.article-not-found {
  padding: 80px 0;
  text-align: center;
}

.article-not-found p {
  font-size: 18px;
  color: rgba(58, 88, 134, 0.6);
  margin-bottom: 20px;
}

/* ===================== RESPONSIVE ===================== */

@media (max-width: 991px) {
  .article-layout {
    grid-template-columns: 1fr;
  }

  .article-sidebar {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .article-sidebar-cta {
    grid-column: 1 / -1;
    margin-top: 0;
  }

  .article-hero-layout--with-img {
    grid-template-columns: 1fr;
  }

  .article-hero-img-col {
    transform: none;
    margin-top: 32px;
  }

  .article-section--with-img {
    padding-top: 56px;
  }
}

@media (max-width: 575px) {
  .article-hero-title {
    font-size: 32px;
  }

  .article-hero-desc {
    font-size: 16px;
  }

  .article-content {
    font-size: 16px;
  }

  .article-content h2 {
    font-size: 22px;
  }

  .article-content h3 {
    font-size: 18px;
  }

  .article-sidebar {
    grid-template-columns: 1fr;
  }
}

/* ===================== SPSTI CARDS ===================== */

.spsti-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 18px;
  gap: 18px;
  margin: 24px 0 40px;
}

.spsti-card {
  background: #ffffff;
  border: 1.5px solid rgba(58, 88, 134, 0.13);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 14px rgba(58, 88, 134, 0.07);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.22s ease, transform 0.22s ease;
}

.spsti-card:hover {
  box-shadow: 0 8px 28px rgba(58, 88, 134, 0.14);
  transform: translateY(-2px);
}

.spsti-card-title {
  background: #3a5886;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  padding: 13px 18px;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

.spsti-card-body {
  padding: 16px 18px;
  flex: 1 1;
  display: flex;
  flex-direction: column;
}

.article-content .spsti-card-body ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.article-content .spsti-card-body li {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 5px;
  color: rgba(0, 0, 0, 0.72);
}

.article-content .spsti-card-body > p {
  font-size: 13px;
  line-height: 1.55;
  margin: 10px 0 0;
  color: rgba(0, 0, 0, 0.5);
  border-top: 1px solid rgba(58, 88, 134, 0.1);
  padding-top: 10px;
}

/* ===================== COMMUNES SHOW MORE ===================== */

.communes-more-btn {
  display: inline-block;
  margin-left: 4px;
  background: none;
  border: 1px solid rgba(46, 160, 120, 0.4);
  border-radius: 20px;
  color: #2e9a78;
  font-size: 13px;
  font-weight: 600;
  padding: 2px 12px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
  white-space: nowrap;
}

.communes-more-btn:hover {
  background: rgba(46, 160, 120, 0.1);
}


/* ===================== PAGE WRAPPER ===================== */

.qsn-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.qsn-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ===================== HERO ===================== */

.qsn-hero {
  background: #ebf5f4;
  padding: 100px 0 40px;
}

.qsn-hero-title {
  font-size: 56px;
  font-weight: 700;
  color: #3a5886;
  margin: 0 0 20px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.qsn-hero-intro {
  font-size: 18px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.55);
  margin: 0 0 40px;
  line-height: 1.7;
  max-width: 520px;
}

.qsn-stats {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}

.qsn-stat {
  display: flex;
  flex-direction: column;
}

.qsn-stat-number {
  font-size: 36px;
  font-weight: 800;
  color: #3a5886;
  line-height: 1;
}

.qsn-stat-label {
  font-size: 13px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.45);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.qsn-hero-photo-col {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 48px;
}

.qsn-team-photo-wrap {
  max-width: 420px;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(58, 88, 134, 0.15), 0 2px 12px rgba(58, 88, 134, 0.1);
  position: relative;
}

/* Toutes les images (fond + personnes) occupent le même espace */
.qsn-team-layer {
  width: 100%;
  height: auto;
  display: block;
}

.qsn-team-bg {
  position: relative; /* définit la hauteur du conteneur */
}

/* PNGs des personnes — cachés par défaut */
.qsn-person-png {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.qsn-person-png--visible {
  opacity: 1;
}

/* Overlay teinté quand une personne est survolée */
.qsn-team-photo-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(58, 88, 134, 0);
  transition: background 0.35s ease;
  pointer-events: none;
  z-index: 1;
}

.qsn-team-photo-wrap--hovered::after {
  background: rgba(58, 88, 134, 0.5);
}

/* Zones hotspot invisibles */
.qsn-person-hotspot {
  position: absolute;
  cursor: pointer;
}

/* Tooltip centré en bas du conteneur photo */
.qsn-person-tooltip {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.92);
  border-radius: 10px;
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(58, 88, 134, 0.18);
  z-index: 20;
  pointer-events: auto;
  animation: tooltipIn 0.25s ease forwards;
}

@keyframes tooltipIn {
  from { opacity: 0; transform: translateX(-50%) translateY(6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.qsn-person-nom {
  font-size: 14px;
  font-weight: 700;
  color: #3a5886;
}

.qsn-person-linkedin-hint {
  font-size: 12px;
  font-weight: 500;
  color: #04aceb;
}

/* ===================== VAGUES ===================== */

.wave-qsn-to-content {
  background: #ebf5f4;
  line-height: 0;
  display: block;
  font-size: 0;
}

.wave-qsn-to-content svg {
  display: block;
  width: 100%;
  height: 120px;
}


/* ===================== SECTIONS ===================== */

.qsn-section {
  background: #fefefe;
  padding: 72px 0;
}


.qsn-section-title {
  font-size: 40px;
  font-weight: 700;
  color: #3a5886;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}

.qsn-section-subtitle {
  font-size: 18px;
  color: rgba(0, 0, 0, 0.45);
  margin: 0 0 48px;
}

/* ===================== ORIGINE DU PROJET ===================== */

.qsn-section--origine {
  padding-top: 64px;
  padding-bottom: 48px;
}

.qsn-origine-heading {
  margin-bottom: 40px;
}

.qsn-origine-text {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.6);
  line-height: 1.8;
  margin: 0 0 18px;
}

.qsn-origine-portraits {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
}

.qsn-origine-portrait {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.qsn-origine-portrait-circle {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(58, 88, 134, 0.15);
  flex-shrink: 0;
}

.qsn-origine-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.qsn-origine-portrait-circle:hover .qsn-origine-portrait-img {
  transform: scale(1.1);
}

.qsn-origine-portrait-nom {
  font-size: 14px;
  font-weight: 600;
  color: #3a5886;
  text-align: center;
}

/* ===================== CARTES SERVICES / ENGAGEMENT ===================== */

.qsn-card {
  border-radius: 16px;
  padding: 36px 32px;
  height: 100%;
  box-shadow: 0 8px 32px rgba(58, 88, 134, 0.1), 0 2px 12px rgba(58, 88, 134, 0.1);
}

.qsn-card--blue,
.qsn-card--green {
  background: #f7fbfa;
}

.qsn-card-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 20px;
  color: #3a5886;
}

.qsn-card-title {
  font-size: 22px;
  font-weight: 700;
  color: #3a5886;
  margin: 0 0 16px;
}

.qsn-card-text {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.6);
  line-height: 1.7;
  margin: 0;
}

/* ===================== ÉVÉNEMENTS ===================== */

.qsn-events-header {
  margin-bottom: 48px;
}

.qsn-events-layout {
  display: flex;
  gap: 64px;
  align-items: flex-start;
}

/* Timeline */

.qsn-timeline {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 80px;
  position: -webkit-sticky;
  position: sticky;
  top: 120px;
}

.qsn-timeline-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.qsn-timeline-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(58, 88, 134, 0.15);
  border: 2px solid rgba(58, 88, 134, 0.2);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  flex-shrink: 0;
}

.qsn-timeline-item--active .qsn-timeline-dot {
  background: #04aceb;
  border-color: #04aceb;
  transform: scale(1.3);
}

.qsn-timeline-line {
  width: 2px;
  height: 40px;
  background: rgba(58, 88, 134, 0.15);
  display: block;
}

.qsn-timeline-year {
  font-size: 15px;
  font-weight: 600;
  color: rgba(58, 88, 134, 0.4);
  transition: color 0.2s ease;
  white-space: nowrap;
  margin-top: 6px;
  margin-bottom: 6px;
}

.qsn-timeline-item--active .qsn-timeline-year {
  color: #3a5886;
}

.qsn-timeline-item:hover .qsn-timeline-year {
  color: #04aceb;
}

.qsn-timeline-item:hover .qsn-timeline-dot {
  border-color: #04aceb;
}

/* Grille événements */

.qsn-events-grid {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.qsn-event-card {
  background: #ffffff;
  border: 1px solid rgba(58, 88, 134, 0.1);
  border-radius: 14px;
  padding: 20px 24px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(58, 88, 134, 0.06);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.qsn-event-card:hover {
  box-shadow: 0 6px 20px rgba(58, 88, 134, 0.12);
  border-color: #04aceb;
}

.qsn-event-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.qsn-event-nom {
  display: block;
  font-size: 17px;
  font-weight: 600;
  color: #3a5886;
}

.qsn-event-meta {
  display: block;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.4);
  margin-top: 3px;
}

/* Miniatures header */

.qsn-event-thumbs {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
  margin-left: auto;
}

.qsn-event-thumb-wrap {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}

.qsn-event-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}

.qsn-event-card:hover .qsn-event-thumb {
  transform: scale(1.07);
}

.qsn-event-thumb-more {
  position: absolute;
  inset: 0;
  background: rgba(35, 53, 81, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.qsn-event-chevron {
  font-size: 22px;
  color: rgba(58, 88, 134, 0.3);
  transition: transform 0.25s ease, color 0.2s ease;
  line-height: 1;
  flex-shrink: 0;
}

.qsn-event-chevron--open {
  transform: rotate(90deg);
  color: #04aceb;
}

.qsn-event-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(58, 88, 134, 0.08);
}

.qsn-event-photo {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 8px;
}

.qsn-event-photos .ant-image {
  border-radius: 8px;
  overflow: hidden;
  display: block;
}

.qsn-event-photos .ant-image-mask {
  background: rgba(58, 88, 134, 0.55);
  border-radius: 8px;
}

.qsn-event-photos-empty {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.3);
  padding: 24px 0;
  margin: 0;
}

/* ===================== CTA ===================== */

.qsn-cta {
  background: #fefefe;
  padding: 64px 0;
}

.qsn-cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 32px;
}

.qsn-cta-title {
  font-size: 40px;
  font-weight: 700;
  color: #3a5886;
  margin: 0;
  letter-spacing: -0.02em;
}

.qsn-cta-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.qsn-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.qsn-cta-btn:hover {
  transform: scale(1.03);
}

.qsn-cta-btn--primary {
  background: #76e297;
  color: #ffffff;
}

.qsn-cta-btn--primary:hover {
  color: #ffffff;
}

.qsn-cta-btn--secondary {
  background: transparent;
  color: #04aceb;
  border: 2px solid #04aceb;
}

.qsn-cta-btn--secondary:hover {
  background: #04aceb;
  color: #ffffff;
}

/* ===================== RESPONSIVE ===================== */

@media (max-width: 991px) {
  .qsn-events-layout {
    gap: 40px;
  }

  .qsn-timeline {
    width: 64px;
    position: static;
  }
}

@media (max-width: 767px) {
  .qsn-events-layout {
    flex-direction: column;
    gap: 0;
  }

  .qsn-timeline {
    flex-direction: row;
    width: 100%;
    justify-content: flex-start;
    margin-bottom: 32px;
    overflow-x: auto;
    padding: 6px 0 8px;
  }

  .qsn-timeline {
    align-items: flex-start;
  }

  .qsn-timeline-line {
    width: 40px;
    height: 2px;
    margin-top: 7px;
  }

  .qsn-events-layout {
    align-items: stretch;
  }

  .qsn-events-grid {
    width: 100%;
  }

  .qsn-event-photos {
    grid-template-columns: repeat(2, 1fr);
  }

  .qsn-event-thumb-wrap {
    width: 36px;
    height: 36px;
  }
}

@media (max-width: 767px) {
  .qsn-origine-portraits {
    flex-direction: row;
    justify-content: center;
  }

  .qsn-origine-portrait-circle {
    width: 120px;
    height: 120px;
  }
}

@media (max-width: 575px) {
  .qsn-hero {
    padding: 80px 0 32px;
  }

  .qsn-hero-photo-col {
    padding-top: 0;
  }

  .qsn-hero-title {
    font-size: 40px;
  }

  .qsn-stats {
    gap: 24px;
  }

  .qsn-stat-number {
    font-size: 28px;
  }

  .qsn-section-title {
    font-size: 28px;
  }

  .qsn-cta-title {
    font-size: 28px;
  }

  .qsn-cta-actions {
    flex-direction: column;
    width: 100%;
  }

  .qsn-cta-btn {
    width: 100%;
  }

  .qsn-event-photos {
    grid-template-columns: 1fr;
  }
}

/* ===================== PAGE WRAPPER ===================== */

.contact-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ===================== HERO ===================== */

.contact-hero {
  background: #ebf5f4;
  padding: 100px 0 40px;
}

.contact-hero-title {
  font-size: 56px;
  font-weight: 700;
  color: #3a5886;
  margin: 0 0 12px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.contact-hero-subtitle {
  font-size: 20px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.55);
  margin: 0;
}

.wave-contact-to-content {
  background: #ebf5f4;
  line-height: 0;
  display: block;
  font-size: 0;
}

.wave-contact-to-content svg {
  display: block;
  width: 100%;
  height: 120px;
  vertical-align: bottom;
}

/* ===================== LAYOUT ===================== */

.contact-section {
  background: #fefefe;
  padding: 48px 0 80px;
  flex: 1 1;
}

.contact-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 24px;
}

.contact-layout {
  display: flex;
  gap: 64px;
  align-items: flex-start;
}

/* ===================== NAV GAUCHE ===================== */

.contact-nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
  width: 260px;
  position: -webkit-sticky;
  position: sticky;
  top: 100px;
}

.contact-nav-btn {
  text-align: left;
  background: #ebf5f4;
  border: none;
  border-radius: 12px;
  padding: 16px 20px;
  font-size: 17px;
  font-weight: 500;
  color: #3a5886;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  line-height: 1.5;
}

.contact-nav-btn:hover {
  background: rgba(4, 172, 235, 0.12);
  color: #04aceb;
}

.contact-nav-btn--active {
  background: #04aceb;
  color: #ffffff;
}

.contact-nav-btn--active:hover {
  background: #04aceb;
  color: #ffffff;
}

/* ===================== CONTENU DROITE ===================== */

.contact-content {
  flex: 1 1;
  min-width: 0;
}

/* ===================== VUE INFO ===================== */

.contact-info-title {
  font-size: 40px;
  font-weight: 700;
  color: #3a5886;
  margin: 0 0 8px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.contact-info-subtitle {
  font-size: 18px;
  color: rgba(0, 0, 0, 0.55);
  margin: 0 0 40px;
}

.contact-info-items {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-info-item {
  display: flex;
  align-items: center;
  gap: 20px;
  background: #ffffff;
  border: 1px solid rgba(58, 88, 134, 0.12);
  border-radius: 16px;
  padding: 24px 28px;
  box-shadow: 0 4px 10px rgba(58, 88, 134, 0.08);
  text-decoration: none;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.contact-info-item:hover {
  box-shadow: 0 8px 20px rgba(58, 88, 134, 0.15);
  border-color: #04aceb;
}

.contact-info-icon {
  font-size: 28px;
  color: #3a5886;
  flex-shrink: 0;
}

.contact-info-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.contact-info-value {
  display: block;
  font-size: 20px;
  font-weight: 600;
  color: #3a5886;
}

/* ===================== VUE FORMULAIRE ===================== */

.contact-form-title {
  font-size: 40px;
  font-weight: 700;
  color: #3a5886;
  margin: 0 0 32px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.contact-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 0 24px;
  gap: 0 24px;
}

.contact-submit-btn {
  background-color: #76e297 !important;
  border-color: #76e297 !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  height: 48px !important;
  padding: 0 32px !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  transition: transform 0.2s ease !important;
}

.contact-submit-btn:hover {
  transform: scale(1.03);
}

/* ===================== HINT RAPPELEZ-MOI ===================== */

.contact-callback-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px 16px;
  background: rgba(4, 172, 235, 0.08);
  border-radius: 10px;
  border: 1px solid rgba(4, 172, 235, 0.2);
}

.contact-callback-label {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.55);
}

.contact-callback-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  color: #04aceb;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}

.contact-callback-btn:hover {
  color: #3a5886;
}

/* Inputs Ant Design */
.contact-form-wrap .ant-input,
.contact-form-wrap .ant-input-affix-wrapper {
  border-radius: 10px;
  border-color: rgba(58, 88, 134, 0.2);
  font-size: 15px;
}

.contact-form-wrap .ant-input:focus,
.contact-form-wrap .ant-input-focused {
  border-color: #04aceb;
  box-shadow: 0 0 0 2px rgba(4, 172, 235, 0.15);
}

.contact-form-wrap .ant-form-item-label > label {
  font-weight: 500;
  color: #3a5886;
}

/* ===================== RESPONSIVE ===================== */

@media (max-width: 991px) {
  .contact-layout {
    flex-direction: column;
    gap: 40px;
  }

  .contact-nav {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    position: static;
  }

  .contact-nav-btn {
    flex: 1 1 auto;
    text-align: center;
  }
}

@media (max-width: 575px) {
  .contact-section {
    padding: 48px 0 80px;
  }

  .contact-nav {
    flex-direction: column;
  }

  .contact-info-title,
  .contact-form-title {
    font-size: 28px;
  }

  .contact-form-row {
    grid-template-columns: 1fr;
  }
}

.loginContainer {
  display: flex;
  flex-direction: column;
  margin: 30px;
}

/* ===================== DIPLÔME ===================== */

.pans-diplome-section {
  background: linear-gradient(
    180deg,
    #fefefe 0%,
    #ebf5f4 32%,
    #ebf5f4 70%,
    #fefefe 100%
  );
  padding-top: 300px;
  padding-bottom: 64px;
}

.pans-diplome-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

.pans-diplome,
.pans-talents {
  flex: 1 1 360px;
  max-width: 520px;
}

.pans-diplome-wrap .ant-image-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  cursor: pointer;
}

/* ===================== ACTIONS ===================== */

.pans-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  padding-top: 48px;
  padding-bottom: 80px;
  background: #fefefe;
}

@media (max-width: 575px) {
  .pans-diplome-section {
    padding-top: 140px;
  }

  .pans-actions .ns-cta-btn {
    width: 100%;
  }
}


/*# sourceMappingURL=main.4a6f7440.css.map*/