/* ==========================================================================
   Base commune : reprend, valeur pour valeur, l'effet cumulé de bootstrap 4.6
   (reboot) et de theme-default.css sur les éléments nus. Une page DIGIlium
   peut ainsi se passer de ces deux feuilles (service.html) ; sur les pages qui
   les chargent encore, ces règles ne changent rien.
   Inter et Cabin (polices de base du template, visibles dans plusieurs blocs)
   sont servies localement : plus d'appel bloquant à Google Fonts.
   ========================================================================== */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("assets/fonts/inter/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cabin"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("assets/fonts/cabin/cabin-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cabin"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("assets/fonts/cabin/cabin-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
*, ::after, ::before { box-sizing: border-box; }
html { font-family: sans-serif; line-height: 1.15; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; }
article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; }
body { margin: 0; padding: 0; font-family: "Inter"; font-size: 16px; font-weight: 400; font-style: normal; line-height: 28px; color: #6d6d6d; text-align: left; background-color: #fff; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 10px; font-family: "Cabin"; font-style: normal; font-weight: 700; line-height: 1.3; color: #061738; transition: .5s; }
h1 { font-size: 38px; }
h2 { font-size: 24px; }
h3, h4 { font-size: 18px; }
h5 { font-size: 17px; }
h6 { font-size: 16px; }
p { margin-top: 0; margin-bottom: 1rem; font-family: "Inter"; font-weight: 400; font-style: normal; color: #6d6d6d; }
ol, dl { margin-top: 0; margin-bottom: 1rem; }
ol ol, ol ul, ul ol, ul ul { margin-bottom: 0; }
ul { margin: 0; padding: 0; }
blockquote, figure { margin: 0 0 1rem; }
b, strong { font-weight: bolder; }
small { font-size: 80%; }
a { color: #606060; text-decoration: none; background-color: transparent; transition: all .3s ease-out 0s; }
a:hover { color: #0056b3; text-decoration: none; }
a:focus { text-decoration: none; outline: none; }
a:not([href]):not([class]), a:not([href]):not([class]):hover { color: inherit; text-decoration: none; }
a, i, cite, em, var, address, dfn, ol, li, ul { font-style: normal; font-weight: 400; }
img { vertical-align: middle; border-style: none; }
svg { overflow: hidden; vertical-align: middle; }
label { display: inline-block; margin-bottom: .5rem; }
button { border-radius: 0; }
button, input, optgroup, select, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; }
button, input { overflow: visible; }
button, select { text-transform: none; }
[type=button], [type=reset], [type=submit], button { -webkit-appearance: button; }
[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) { cursor: pointer; }
button:focus:not(:focus-visible) { outline: 0; }
input:focus, button:focus, textarea:focus { border-color: transparent; outline-color: transparent; }
[hidden] { display: none !important; }
::selection { background: #3399ff; color: #fff; text-shadow: none; }

.sticky-nav .header-button a {
    display: inline-block;
    color: #fff;
    padding: 10px 28px;
    border: 1px solid#fff;
    text-transform: capitalize;
    transition: 0.5s;
    font-size: 15px;
    position: relative;
    z-index: 1;
    border-radius: 3px;
    overflow: hidden;
    margin-top: 5px;
    font-weight: 400;
}
.sticky-nav.nav-menu .header_tbn {
    position: relative;
    top: 4px;
    left: 60px;
}
/*<!-- ============================================================== -->
<!-- Start header-top Css -->
<!-- ============================================================== -->*/
.header-top {
    background: #2871FF;
    padding: 9px 0;
}
.header-left-text p {
    font-size: 14px;
    font-weight: 400;
    font-family: 'Cabin';
    margin: 0;
    color: #fff;
}
.header-icon-list {
    text-align: right;
}
.header-icon-list ul li {
    display: inline-block;
    list-style: none;
    margin-right: 10px;
    color: #fff;
}
.header-icon-list ul li a {
    font-size: 14px;
    display: inline-block;
    color: #fff;
    line-height: 26px;
}
/*<!-- ============================================================== -->
<!-- Start  main-header Css -->
<!-- ============================================================== -->*/
.main-header {
    position: relative;
    z-index: 99;
    padding: 0  50px 15px;
}
.nav-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.heder-menu ul li {
    display: inline-block;
    margin-right: 5px;
}
.heder-menu {
    display: inline-block;
    position: relative;
    right: -95px;
}
.heder-menu ul {
    display: block;
}
.heder-menu ul li a {
    display: inline-block;
    text-transform: capitalize;
    padding: 30px 20px 18px;
    transition: .5s;
    position: relative;
    font-size: 16px;
    line-height: 40px;
    color: #333F4F;
    font-weight: 500;
    font-family: "Cabin";
}
.heder-menu ul li a:hover {
    color: #2871FE;
}
.heder-menu ul li a:hover .icon::before {
    color: #2871FE;
}
.heder-menu ul li.icon {
    position: relative;
}
.heder-menu ul li.icon::before {
    content: "\f107";
    font-family: FontAwesome;
    font-size: 15px;
    opacity: 1;
    top: 37px;
    right: 5px;
    left: inherit;
    position: absolute;
    color: #8E9BAE;
}
.sticky-nav .heder-menu ul li.icon::before {
    color: #2871FE;
}
.header-button {
    margin-top: 15px;
    margin-left: 20px;
}
.header-button a {
    display: inline-block;
    color: #fff;
    font-weight: 400;
    padding: 10px 28px;
    text-transform: capitalize;
    transition: 0.5s;
    font-size: 16px;
    position: relative;
    z-index: 1;
    border-radius: 3px;
    overflow: hidden;
    margin-top: 5px;
    background: #2871FE;
}
.header-button a:hover {
    color: #fff;
    background: linear-gradient(to left, #533efe, #740fd6);
}
.header_tbn {
    position: relative;
    top: 4px;
    left: 15px;
}
.header_tbn a {
    display: inline-block;
    font-size: 16px;
    line-height: 40px;
    color: #010e22;
    font-weight: 400;
    font-family: "Cabin";
    text-transform: capitalize;
}
.header_tbn a i {
    display: inline-block;
    font-size: 16px;
    color: #2771FF;
    font-weight: 800;
    margin-right: 5px;
}
/* sub-menu */
.heder-menu ul .sub-menu {
    top: 120px;
    height: auto;
    width: 200px;
    background: #fff;
    transition: .5s;
    visibility: hidden;
    display: block;
    padding: 15px 0px 12px;
    border-radius: 5px;
    position: absolute;
    box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 20%);
    opacity: 0;
}
.sub-menu ul {
    overflow: hidden;
    display: inherit;
}
.sub-menu ul li {
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: inherit;
    border-top: 1px solid #DEE1E6;
}
.heder-menu ul .sub-menu ul li a {
    display: inline-block;
    font-size: 15px;
    font-weight: 600;
    color: #616161!important;
    padding: 5px 7px 5px 25px;
    transition: .5s;
}
.heder-menu ul .sub-menu ul li:hover {
    background: #2771FF;
}
.heder-menu ul .sub-menu ul li:hover a {
    color: #fff!important;
}
.heder-menu ul li:hover .sub-menu {
    top:75px;
    visibility: visible !important;
    opacity: 1;
}
/*<!-- ============================================================== -->
<!-- Start  slider-area Css -->
<!-- ============================================================== -->*/
.slider-area {
    background: url(assets/images/hero-bg_3.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 800px;
    position: relative;
} 
.slider-content {
    padding: 0 0 40px;
    text-align: center;
}
.slider-title h1 {
    font-size: 60px;
    line-height: 75px;
    color: #010e22;
    font-weight: 700;
    font-family: "Cabin";
}
.slider-discription p {
    font-size: 16px;
    line-height: 28px;
    color: #616161;
    font-weight: 300;
    font-family: "Inter";
    width: 55%;
    text-align: center;
    margin: 0 auto 0;
}
.slider-button {
    margin-top: 53px;
    display: inline-block;
}
.slider-button a {
    font-size: 16px;
    color: #fff;
    padding: 22px 63px 22px 41px;
    background: #2871ff;
    border-radius: 5px;
    text-align: center;
    transition: .5s;
}
.slider-button a:hover {
    color: #fff;
    background: linear-gradient(to left, #533efe, #740fd6);
}
.slider-button a span {
    opacity: 0.302;
    font-size: 17px;
    line-height: 28px;
    color: #ffffff;
    font-weight: 500;
    font-family: "Cabin";
    position: relative;
    left: 30px;
    transition: .5s;
}
.slider-button a span::before {
    position: absolute;
    content: "";
    top: 10px;
    left: -25px;
    height: 2px;
    width: 17px;
    background: #ffffff;
    opacity: 1;
    transition: .5s;
}
.slider-area .hape-img {
    position: absolute;
    left: 5%;
    bottom: -52%;
}
.slider-area .hape-img-two {
    position: absolute;
    right: 11%;
    top: 106%;
}
/*<!-- ============================================================== -->
<!-- Start  section-title  Css -->
<!-- ============================================================== -->*/
.section-title {
    text-align: center;
    margin-bottom: 50px;
}
.main-title h1 {
    font-size: 42px;
    line-height: 56px;
    color: #010e22;
    font-weight: 700;
    font-family: "Cabin";
    text-align: center;
    margin: 0;
}
 .sub-title h5 {
    font-size: 18px;
    line-height: 26px;
    color: #2871ff;
    font-weight: 400;
    font-family: "Cabin";
}
.sub-title p {
    font-size: 16px;
    line-height: 28px;
    color: #616161;
    font-weight: 400;
    font-family: "Inter";
    margin: 20px 0 0;
}
/*<!-- ============================================================== -->
<!-- Start  breadcumb-area   Css -->
<!-- ============================================================== -->*/
.breadcumb-area {
    background: url(assets/images/hero-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 125px 0 110px;
}
.breacumb-content {
    text-align: center;
}
.breadcumb-title h1 {
    font-size: 56px;
    line-height: 75px;
    color: #010e22;
    font-weight: 700;
    font-family: "Cabin";
    text-align: center;
    text-transform: capitalize;
    margin-bottom: -10px;
}
.breadcumb-content-text a {
    display: inline-block;
    font-size: 16px;
    line-height: 75px;
    color: #2871ff;
    font-weight: 400;
    font-family: "Cabin";
    text-transform: capitalize;
    margin-left: -30px;
}
.breadcumb-content-text a span {
    font-size: 16px;
    line-height: 75px;
    color: #616161;
    font-weight: 400;
    font-family: "Cabin";
    position: relative;
    left: 35px;
}
.breadcumb-content-text a span::before {
    position: absolute;
    content: "";
    top: 11px;
    left: -28px;
    height: 1px;
    width: 17px;
    background: #2F71FF;
}
/*<!-- ============================================================== -->
<!-- Start  .service-area  Css -->
<!-- ============================================================== -->*/
.service-area {
    padding: 100px 0 100px;
}
.service-area .section-title {
    text-align: center;
    margin-bottom: 55px;
}
.service-area .single-service-box {
    padding: 50px 30px 45px;
    box-shadow: 0px 0px 40px 0px rgb(0 0 0 / 20%);
    border-radius: 5px;
    margin-bottom: 30px;
    transition: 0.5s;
    background: #fff;
}
.service-area .single-service-box:hover {
    margin-top: -10px;
}
.service-area .service-icon-img {
    text-align: center;
}
.service-area .service-title h3 {
    font-size: 22px;
    line-height: 50px;
    color: #010e22;
    font-weight: 600;
    font-family: "Cabin";
    text-align: center;
    margin: 27px 0 10px;
}
.service-area .service-discription p {
    font-size: 16px;
    line-height: 28px;
    color: #616161;
    font-weight: 400;
    font-family: "Inter";
    text-align: center;
    margin: 0;
}
 .service-area.style-two {
    background: #f7faff;
}
.service-area.style-two .single-service-box {
    padding: 40px 30px 35px;
}
.service-area.style-two .service-title h3 {
    font-size: 20px;
    margin-bottom: 5px;
}
.service-area.style-two .service-discription p {
    font-size: 15px;
    line-height: 25px;
}

.service-area.style_one .row.marg {
    margin-top: 50px;
}
.service-area.style_one .single-service-box.upper {
    position: relative;
    top: -50px;
}
.service-area.style_one .single-service-box {
    box-shadow: 0px 0px 20px 0px rgb(0 0 0 / 15%);
    transition: .5s;
}
.service-area.style_one .single-service-box:hover {
    box-shadow: 0px 0px 40px 0px rgb(0 0 0 / 20%);
}
/*<!-- ============================================================== -->
<!-- Start  our-cards-section  Css -->
<!-- ============================================================== -->*/
.our-cards-section {
    padding: 100px 0 100px;
}
.our-cards-section .sub-title h5 {
    font-size: 18px;
    line-height: 26px;
    color: #2871ff;
    font-weight: 400;
    font-family: "Cabin";
    text-align: left;
}
.our-cards-section .row.bor-top {
    margin-top: 50px;
}
.single_cards .section-title {
    margin-bottom: 20px;
}
.our-cards-section .single_cards .main-title h1 {
    text-align: left;
}
.our-cards-section .cards-discription p {
    font-size: 16px;
    line-height: 28px;
    color: #616161;
    font-weight: 400;
    font-family: "Inter";
    margin: 0;
}
.our-cards-section .card-button {
    margin-top: 35px;
}
.our-cards-section .card-button a {
    display: inline-block;
    font-size: 17px;
    line-height: 28px;
    color: #010e22;
    font-weight: 500;
    font-family: "Cabin";
    text-transform: capitalize;
    border: 1px solid #010E22;
    padding: 14px 35px;
    border-radius: 5px;
    transition: 0.5s;
}
.our-cards-section .card-button a:hover {
    color: #fff;
    border: 1px solid #2771FF;
    background: #2771FF;
}
.our-cards-section .card-button a i {
    display: inline-block;
    margin-left: 5px;
}
.our-cards-section .single_cards .cards-thumb {
    position: relative;
    left: 115px;
}
.our-cards-section .single_cards .card-animation {
    position: absolute;
    bottom: 0;
    left: 45px;
}
.our-cards-section .single_cards .card-left-img {
    position: absolute;
    bottom: 100px;
    right: -23px;
}
.our-cards-section .single_cards .card-right-img {
    position: absolute;
    top: 90px;
    left: 50px;
}
/*<!-- ============================================================== -->
<!-- Start  .counter-area  Css -->
<!-- ============================================================== -->*/
.transaction-report {
    padding: 0px 0 100px;
}
.single-transaction .section-title {
    text-align: left;
    margin-bottom: 20px;
}
.single-transaction .main-title h1 {
    text-align: left;
}
.single-transaction .transaction-tmb {
    margin-left: -60px;
}
.single-transaction .transaction-tmb img {
    width: 100%;
}
.transaction-report .transaction-button {
    margin-top: 35px;
}
.transaction-report .transaction-button a {
    display: inline-block;
    font-size: 17px;
    line-height: 28px;
    color: #010e22;
    font-weight: 500;
    font-family: "Cabin";
    text-transform: capitalize;
    border: 1px solid #010E22;
    padding: 14px 35px;
    border-radius: 5px;
    transition: 0.5s;
}
.transaction-report .transaction-button a:hover {
    color: #fff;
    border: 1px solid #2771FF;
    background: #2771FF;
}
.transaction-report .transaction-button a i {
    display: inline-block;
    margin-left: 5px;
}
/*<!-- ============================================================== -->
<!-- Start  fintech-location-area  Css -->
<!-- ============================================================== -->*/
.fintech-location-area {
    padding: 100px 0 100px;
    background: url(assets/images/location-bg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 750px;
    overflow: hidden;
}
.fintech-location-area .main-title h1 {
    margin: 0 0 17px;
}
.fintech-location-area .sub-title p {
    font-size: 16px;
    line-height: 28px;
    color: #616161;
    font-weight: 400;
    font-family: "Inter";
    margin: 0 auto 0;
    text-align: center;
    width: 50%;
}
.fintech-location-area .single-location {
    position: relative;
    z-index: 1;
}
.fintech-location-area .location-thumb {
    position: relative;
    height: 64px;
    width: 64px;
    border-radius: 100%;
    margin: auto;
    transition: .3s;
    right: 0;
    text-align: center;
}
.fintech-location-area .location-thumb-1 {
    position: absolute;
    top: 150px;
    right: 75px;
}
.fintech-location-area .location-thumb-2 {
    position: absolute;
    top: 150px;
    left: 75px;
}
.fintech-location-area .icon-box {
    text-align: left;
}
.fintech-location-area .location-thumb-3 {
    position: absolute;
    top: 300px;
    left: 19px;
    right: 0;
    text-align: center;
}
.fintech-location-area .contact-title h2 {
    font-size: 20px;
    margin: 0 0 20px;
    font-family: 'Cabin', sans-serif;
    line-height: 1.2;
    color: #1d2124;
    position: relative;
    z-index: 1;
    text-align: left;
}
.fintech-location-area .contact-title h2::before {
    position: absolute;
    content: "";
    height: 35px;
    width: 35px;
    line-height: 36px;
    top: -50px;
    left: 0;
    background: #fff;
    transform: rotate(45deg);
    z-index: -1;
}
.fintech-location-area .contact-icon {
    float: left;
    margin-right: 5px;
}
.fintech-location-area .contact-icon i {
    color: #6425E8;
    font-size: 24px;
    display: inline-block;
    font-weight: 600;
    margin-right: 13px;
    position: relative;
    top: 9px;
}
.fintech-location-area .icon-title h2 {
    font-size: 16px;
    font-weight: 400;
    color: #646464;
    display: inline-block;
    margin: 0 0 16px;
    line-height: 27px;
    text-align: left;
}
.fintech-location-area .contacts-boxs {
    padding: 34px 16px 18px 31px;
    box-shadow: 0 20px 50px rgb(229 229 229 / 80%);
    border-radius: 5px;
    background: #fff;
    position: absolute;
    top: 60px;
    visibility: hidden;
    width: 320px;
    transition: .3s;
    z-index: 1;
    opacity: 0;
    border-radius: 7px;
}
.fintech-location-area .location-thumb:hover .contacts-boxs {
    top: 50px;
    opacity: 1;
    visibility: visible;
}
.fintech-location-area .location-thumb-1:hover .contacts-boxs {
    top: 50px;
    opacity: 1;
    visibility: visible;
}
.fintech-location-area .location-thumb-2:hover .contacts-boxs {
    top: 50px;
    opacity: 1;
    visibility: visible;
}
.fintech-location-area .location-thumb-3:hover .contacts-boxs {
    top: 50px;
    opacity: 1;
    visibility: visible;
}
/*<!-- ============================================================== -->
<!-- Start  .counter-area  Css -->
<!-- ============================================================== -->*/
.counter-area {
    padding: 95px 0 95px;
}
.single-counter-box {
    padding: 55px 0px 30px 35px;
    transition: 0.5s;
}
.single-counter-box:hover {
    box-shadow: 0 2px 30px #0003;
}
.counter-title h1 {
    font-size: 28px;
    line-height: 0;
    color: #010e22;
    font-weight: 700;
    font-family: "Cabin";
    margin: 0 0 27px;
}
.counter-title h4 {
    font-size: 16px;
    line-height: 26px;
    color: #616161;
    font-weight: 300;
    font-family: 'Inter';
}
.connter-thumb {
    float: left;
    margin: -11px 15px 0 0;
}
/*<!-- ============================================================== -->
<!-- Start  fintech-about-section  Css -->
<!-- ============================================================== -->*/
.fintech-about-section {
    padding: 100px 0 100px;
}
.fintech-about-section .about_thumb {
    position: relative;
}
.fintech-about-section .about_tmb {
    position: absolute;
    top: 50px;
    left: 87px;
}
.fintech-about-section .about_thumb img {
    width: 100%;
}
.fintech-about-section .section-title {
    text-align: left;
    margin-bottom: 20px;
}
.fintech-about-section .main-title h1 {
    text-align: left;
}
.fintech-about-section .about-discription p {
    font-size: 16px;
    line-height: 28px;
    color: #616161;
    font-weight: 300;
    font-family: "Inter";
    text-align: left;
    margin: 0;
}
.fintech-about-section .about-buttin {
    margin-top: 30px;
}
.fintech-about-section .about-buttin a {
    display: inline-block;
    font-size: 17px;
    line-height: 28px;
    color: #010e22;
    font-weight: 500;
    font-family: "Cabin";
    text-transform: capitalize;
    border: 1px solid #010E22;
    padding: 14px 35px;
    border-radius: 5px;
    transition: 0.5s;
}
.fintech-about-section .about-buttin a:hover {
    color: #fff;
    border: 1px solid #2771FF;
    background: #2771FF;
}
.fintech-about-section .about-buttin a i {
    display: inline-block;
    margin-left: 5px;
}
/*<!-- ============================================================== -->
<!-- Start  fintech-brand-section  Css -->
<!-- ============================================================== -->*/
.fintech-brand-section {
    background: #F7FAFF;
    padding: 100px 0 40px;
}
.fintech-brand-section .main-title h1 {
    font-size: 24px;
    line-height: 50px;
    color: #010e22;
    font-weight: 600;
    font-family: "Cabin";
    text-align: center;
    margin: 0;
}
.fintech-brand-section .single-brand {
    margin-bottom: 60px;
}









/*<!-- ============================================================== -->
<!-- Start  team-area  Css -->
<!-- ============================================================== -->*/
.team-area {
    padding: 100px 0 70px;
    border-bottom: 1px solid #ECECEC;
}
.single-team {
    transition: .5s;
    margin-bottom: 30px;
}
.team-area .team-content {
    text-align: center;
    padding: 28px 0 0;
    border: 1px solid #ECECEC;
    transition: .5s;
}.team-area .team-content {
    text-align: center;
    padding: 28px 0 0;
    border: 1px solid #ECECEC;
    transition: .5s;
}
.team-area .team-thumb img {
    width: 100%;
}
.team-area .team-title h3 {
    font-size: 20px;
    color: #010e22;
    font-weight: 600;
    margin: 0 0 5px;
    line-height: 25px;
}
.team-area .team-text p {
    font-size: 15px;
    color: #616161;
    font-weight: 400;
    margin: 0;
    transition: .5s;
}
.team-icon ul {
    
}
.team-icon ul li {
    list-style: none;
    display: inline-block;
    margin-right: 5px;
}
.team-icon ul li a {
    display: inline-block;
    font-size: 15px;
    color: #818489;
    opacity: 0;
    transition: .5s;
    position: relative;
    top: -10px;
}
.single-team:hover .team-content{
    border: 1px solid #fff;
}
.single-team:hover .team-text p{
    opacity: 0;
}
.single-team:hover .team-icon ul li a{
    opacity: 1;
    top: -25px;
}
/*<!-- ============================================================== -->
<!-- Start  ceo-quote  Css -->
<!-- ============================================================== -->*/
.ceo-quote {
    padding: 100px 0 100px;
}
.row.back {
    background: url(assets/images/quote-bg.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 10px;
    padding: 55px 0 55px;
    text-align: center;
}
.quote-content {
    text-align: center;
}
.quote-text p {
    font-size: 22px;
    line-height: 34px;
    color: #ffffff;
    font-weight: 500;
    font-family: "Cabin";
    text-align: center;
    width: 80%;
    margin: 0 auto 35px;
}
.quote-thumb {
    display: inline-block;
    position: relative;
    right: 15px;
    top: -15px;
}
.quote-title {
    display: inline-block;
    text-align: left;
}
.quote-title h3 {
    font-size: 20px;
    line-height: 28px;
    color: #ffffff;
    font-weight: 600;
    font-family: "Cabin";
    margin: 0;
}
.quote-title span {
    font-size: 15px;
    line-height: 28px;
    color: #ffffff;
    font-weight: 400;
    font-family: "Inter";
}
/*<!-- ============================================================== -->
<!-- Start  team-intro  Css -->
<!-- ============================================================== -->*/
.team-intro-area {
    padding: 90px 0 90px;
}
.team-intro-area .section-title {
    margin-bottom: 20px;
}
.team-intro-area .team-intro-thumb img {
    width: 100%;
}
.team-intro-area .main-title h1 {
    text-align: left;
}
.team-intro-area .sub-title p {
    text-align: left;
}
.intro-icon ul li {
    list-style: none;
    display: block;
    font-size: 16px;
    line-height: 26px;
    color: #616161;
    font-weight: 300;
    font-family: "Inter";
}
.intro-icon ul li i {
    display: inline-block;
    font-size: 30px;
    color: #3779FF;
    position: relative;
    top: 6px;
}
/*<!-- ============================================================== -->
<!-- Start  .brand-area  Css -->
<!-- ============================================================== -->*/
.brand-area {
    padding: 100px 0 100px;
    background: #f7faff;
}
.brand-area .main-title h1 {
    font-size: 24px;
    font-weight: 600;
}
.brand-thumb {
    text-align: center;
}
.brand-area.style-two {
    padding: 75px 0 100px;
    background: none;
}
/*<!-- ============================================================== -->
<!-- Start  about-area  Css -->
<!-- ============================================================== -->*/
.about-area {
    padding: 120px 0 0;
}
.about-area .row.bottom {
    border-bottom: 1px solid #E9EBEC;
    padding-bottom: 16px;
}
.about-area .section-title {
    text-align: left;
    margin-bottom: 25px;
}
.about-area .main-title h1 {
    text-align: left;
}
.about-thumb {
    position: relative;
    top: -30px;
}
.about-title h3 {
    font-size: 18px;
    line-height: 45px;
    color: #010e22;
    font-weight: 500;
    font-family: "Cabin";
    margin: 0;
}
.about-icon {
    display: inline-block;
    margin: 0 6px 0 0px;
    position: relative;
    top: 7px;
}
.about-icon i {
    display: inline-block;
    color: #2D75FF;
    font-size: 30px;
    font-weight: 600;
}
.about-title {
    display: inline-block;
}
.about-discription p {
    font-size: 16px;
    line-height: 28px;
    color: #616161;
    font-weight: 400;
    font-family: "Inter";
    margin: 0 0 10px 37px;
}
/*<!-- ============================================================== -->
<!-- Start  mission-area  Css -->
<!-- ============================================================== -->*/
.mission-area {
    padding: 90px 0 90px;
}
.mission-area .section-title {
    text-align: left;
    margin-bottom: 26px;
}
.mission-area .main-title h1 {
    text-align: left;
}
.mission-icon {
    float: left;
    margin: 8px 20px 0 0;
}
.mission-icon i {
    display: inline-block;
    font-size: 18px;
    height: 20px;
    width: 20px;
    line-height: 21px;
    text-align: center;
    background: #2871FE;
    color: #fff;
    border-radius: 50%;
}
.mission-discription p {
    opacity: 0.800;
    font-size: 16px;
    line-height: 26px;
    color: #010e22;
    font-weight: 400;
    font-family: "Cabin";
    overflow: hidden;
    width: 70%;
}
.mission-button {
    position: relative;
    top: 35px;
}
.mission-button a {
    font-size: 17px;
    line-height: 28px;
    color: #ffffff;
    font-weight: 500;
    font-family: "Cabin";
    background: #2892FF;
    padding: 19px 41px;
    border-radius: 5px;
    transition: .5s;
}
.mission-button a:hover {
    color: #fff;
    background: linear-gradient(to left, #533efe, #740fd6);
}
.mission-button a i {
    display: inline-block;
    margin-left: 5px;
    transition: .5s;
}
.missions-content .mission-icon {
    float: left;
    margin: 0px 20px 0 0;
}
.missions-content .mission-icon i {
    display: inline-block;
    font-size: 27px;
    background: none;
    color: #2871FE;
}
.missions-content .mission-discription p {
    font-size: 16px;
    line-height: 24px;
    color: #010e22;
    opacity: 1;
}
.missions-persent {
    margin: 40px 25px 0 0;
    padding: 40px 0 0;
    border-top: 1px solid #E6E6E8;
}
.mission-bottom {
    display: inline-block;
}
.mission-number h2 {
    font-size: 42px;
    line-height: 28px;
    color: #010e22;
    font-weight: 700;
    font-family: "Cabin";
}
.mission-bottom.upper {
    display: inline-block;
    margin-right: 50px;
}
.mission-bottom .mission-text p {
    font-size: 16px;
    line-height: 28px;
    color: #616161;
    font-weight: 400;
    font-family: "Inter";
    margin: 0;
}
.mission-area.style-two .mission-thumb {
    position: relative;
    left: -40px;
}
.mission-area.style-two .mission-thumb img {
    width: 100%;
}
.mission-area.style-two .mission-discrip {
    margin-top: 28px;
    padding: 25px 0 0;
    border-top: 1px solid #E9EBEC;
}
.mission-area.style-two .mission-discrip p {
    font-size: 15px;
    line-height: 24px;
    color: #010e22;
    font-weight: 400;
    font-family: "Inter";
}
/*<!-- ============================================================== -->
<!-- Start  pricing-area  Css -->
<!-- ============================================================== -->*/
.pricing-area {
    padding: 100px 0 80px;
}
.single-tab {
    text-align: center;
}
.pricing-area .tab-title {
    display: inline-block;
    margin: 0 0 0 15px;
}
.pricing-area .tab-title h4 {
    font-size: 16px;
    line-height: 28px;
    color: #2871ff;
    font-weight: 400;
    font-family: "Cabin";
    text-align: center;
    margin: 0;
    padding: 7px 30px;
    border: 1px solid #E5E8ED;
    border-radius: 5px;
    transition: .5s;
}
.pricing-area .tab-title h3 {
    font-size: 16px;
    line-height: 28px;
    color: #010e22;
    font-weight: 400;
    font-family: "Cabin";
    text-align: center;
    margin: 0;
    padding: 7px 30px;
    border: 1px solid #E5E8ED;
    border-radius: 5px;
    transition: .5s;
}
.pricing-area .tab-title h4:hover {
    background: #58B0FF;
    color: #fff;
}
.pricing-area .tab-title h3:hover {
    background: #58B0FF;
    color: #fff;
}
.pricing-area .row.come {
    margin-top: 70px;
}
.pricing-area .single-pricing {
    padding: 30px 30px 35px 40px;
    box-shadow: 0px 0px 20px 0px rgb(0 0 0 / 15%);
    background: #fff;
    transition: .5s;
    margin-bottom: 30px;
}
.pricing-area .pricing-title h3 {
    font-size: 24px;
    line-height: 28px;
    color: #010e22;
    font-weight: 600;
    font-family: "Cabin";
    margin-bottom: 15px;
}
.pricing-area .pricing-title h3 span {
    font-size: 13px;
    line-height: 28px;
    color: #2871ff;
    font-weight: 400;
    background: #EFF6FF;
    padding: 5px 10px;
    border-radius: 3px;
    opacity: 0;
    margin-left: 10px;
    transition: .5s;
}
.pricing-area .pricing-text p {
    font-size: 16px;
    line-height: 24px;
    color: #616161;
    font-weight: 400;
    font-family: "Inter";
    margin: 0 0 25px;
}
.pricing-area .pricing-dolar p {
    font-size: 18px;
    line-height: 28px;
    color: #010e22;
    font-weight: 700;
    font-family: "Cabin";
    margin: 30px 0 20px;
}
.pricing-area .pricing-dolar p span {
    font-size: 36px;
    line-height: 28px;
    color: #010e22;
    font-weight: 700;
    font-family: "Cabin";
    transition: .5s;
}
.pricing-area .pricing-icon-list ul li {
    list-style: none;
    display: block;
    margin-bottom: 10px;
    font-size: 16px;
}
.pricing-area .pricing-icon-list ul li i {
    display: inline-block;
    height: 20px;
    width: 20px;
    line-height: 20px;
    color: #fff;
    border-radius: 50%;
    background: #2A6FFE;
    text-align: center;
    margin-right: 10px;
}
.pricing-area .pricing-button {
    text-align: center;
    margin-top: 35px;
}
.pricing-area .pricing-button a {
    display: inline-block;
    background: #333;
    color: #fff;
    padding: 13px 85px;
    border-radius: 5px;
    transition: .5s;
    font-size: 16px;
}
.pricing-area .pricing-button a:hover {
    background: #2871FE;
    color: #fff;
}
.pricing-area .pricing-button.upper a {
    background: #2871FE;
    color: #fff;
}
.single-pricing.style-two {
    position: relative;
    top: -30px;
}
.pricing-area .single-pricing.style-two .pricing-title h3 span {
    opacity: 1;
}
.pricing-area .single-pricing:hover .pricing-title h3 span {
    opacity: 1;
}
/*<!-- ============================================================== -->
<!-- Start portfolio-area  Css -->
<!-- ============================================================== -->*/
.portfolio-area {
    padding: 90px 0 90px;
    background: #f7f7f7;
}
.single-portfolio {
    margin-bottom: 30px;
    transition: .5s;
}
.portfolio-thumb img {
    width: 100%;
}
.portfolio-content {
    position: absolute;
    bottom: 0px;
    background: #fff;
    padding: 17px 100px 17px 30px;
    opacity: 0;
    transition: .5s;
    left: 78px;
}
.single-portfolio:hover .portfolio-content {
    opacity: 1;
}
.portfolio-thumb {
    position: relative;
}
.portfolio-content .wrapper h3 {
    font-size: 18px;
    color: #010E22;
    text-transform: capitalize;
}
.portfolio-content .wrapper h6 {
    font-size: 16px;
    color: #010E22;
    text-transform: capitalize;
    margin: 0;
}


/*<!-- ============================================================== -->
<!-- Start map-area   Css -->
<!-- ============================================================== -->*/
.row.name {
    overflow: hidden;
}
/*<!-- ============================================================== -->
<!-- Start  company-info-section   Css -->
<!-- ============================================================== -->*/
.company-info-section {
    padding: 90px 0 90px;
}
.company-icon-box {
    background: url(assets/images/contact-bg.png);
    padding: 57px 0px 30px 65px;
    background-size: cover;
    background-repeat: no-repeat;
}
.company-icon-box .company-content {
    margin-top: 40px;
}
.company-icon-box .company-title {
    padding: 13px 0;
}
.company-icon-box .company-titles p {
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
    font-weight: 400;
    font-family: "Inter";
}
.company-icon-box .company-titles h3 {
    font-size: 28px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    color: #FFFFFF;
}
.company-icons i {
    font-size: 25px;
    color: #fff;
    text-align: center;
    display: inline-block;
    float: left;
    margin: 15px 22px 0 0;
    height: 50px;
    width: 50px;
    line-height: 50px;
    background: #548DFF;
    border-radius: 5px;
}
.company-title h2 {
    color: #FFFFFF;
    margin: 0px 0px 5px 0px;
    font-weight: 600;
    font-size: 20px;
    font-family: 'Inter', sans-serif;
}
.company-title p {
    font-size: 15px;
    color: #FFFFFF;
    margin: 0;
    font-weight: 400;
    font-family: 'Inter', sans-serif;
    overflow: hidden;
}
.company-text p {
    font-size: 15px;
    font-weight: 400;
    text-align: left;
    font-family: 'Inter', sans-serif;
    color: #FFFFFF;
    line-height: 1.5;
}
.company-info-section .main-titles h3 {
    font-size: 36px;
    line-height: 48px;
    color: #010e22;
    font-weight: 700;
    font-family: "Cabin";
}
.company-info-section .main-titles p {
    font-size: 15px;
    font-weight: 400;
    color: #6e7673;
    text-align: left;
    font-family: 'Inter', sans-serif;
    margin: 0 0 35px;
}
.company-info-section .form_box {
    margin-bottom: 15px;
}
.company-info-section .form_box input {
    width: 100%;
    height: 54px;
    padding-left: 20px;
    background: #F1F7F1;
    border-radius: 3px;
    transition: .5s;
    border: 1px solid #F6F4EC;
}
.company-info-section .form_box textarea {
    width: 100%;
    padding-left: 20px;
    padding-top: 15px;
    border: 1px solid #F6F4EC;
    height: 120px;
    outline: 0;
    transition: .5s;
    background: #F1F7F1;
}
.company-info-section .form_box input:focus{
    box-shadow: 0 0 0 .2rem rgba(0,123,255,.25);
    border-color: #80bdff;
    outline: 0;
}
.company-info-section .form_box textarea:focus{
    box-shadow: 0 0 0 .2rem rgba(0,123,255,.25);
    border-color: #80bdff;
}
.company-info-section input::placeholder {
    color: #94A9A8;
}
.company-info-section textarea#massage::placeholder {
    color: #94A9A8;
}
.company-info-section .form-button {
    text-align: left;
    margin-top: 25px;
}
.company-info-section .form-button button {
    padding: 13px 35px;
    display: inline-block;
    background: #2871FE;
    color: #fff;
    text-transform: capitalize;
    border-radius: 3px;
    transition: .5s;
    border: navajowhite;
}
.company-info-section .form-button button:hover {
    background: #5A49F8;
    color: #fff;
}
.company-icon-list {
    margin-top: 100px;
}
.company-icon-list ul li {
    list-style: none;
    display: inline-block;
    margin-right: 10px;
}
.company-icon-list ul li.follow-text {
    font-size: 16px;
    line-height: 25px;
    color: #ffffff;
    font-weight: 500;
    font-family: "Cabin";
    text-transform: uppercase;
    margin-right: 15px;
}
.company-icon-list ul li a i {
    display: inline-block;
    font-size: 15px;
    color: #fff;
}
.company-logo {
    position: relative;
    top: -10px;
    left: -30px;
}

/*<!-- ============================================================== -->
<!-- Start  archive-area  Css -->
<!-- ============================================================== -->*/
.archive-area {
    background: #f7faff;
    padding: 90px 0 90px;
}
.single-archive {
    margin-bottom: 30px;
}
.archive-thumb {
    float: left;
    margin: 25px 20px 10px 0;
}
.archive-title h3 {
    font-size: 22px;
    line-height: 56px;
    color: #010e22;
    font-weight: 600;
    font-family: "Cabin";
    margin: 0;
}
.archive-title p {
    font-size: 15px;
    line-height: 26px;
    color: #616161;
    font-weight: 300;
    font-family: "Inter";
    margin: 0;
    overflow: hidden;
}
/*<!-- ============================================================== -->
<!-- Start  process-area  Css -->
<!-- ============================================================== -->*/
.process-area {
    padding: 70px 0 70px;
    border-bottom: 1px solid #E9EBEC;
}
.single-process {
    margin-bottom: 30px;
    position: relative;
}
.single-process::before {
    position: absolute;
    content: "";
    top: 30px;
    left: 165px;
    height: 1px;
    width: 80%;
    border: 1px dashed #A9C7FD;
}
.single-process.upper::before {
    border: inherit;
}
.process-thumb {
    text-align: center;
}
.process-title h3 {
    font-size: 20px;
    line-height: 28px;
    color: #010e22;
    font-weight: 600;
    font-family: "Cabin";
    text-align: center;
    margin: 30px 0 18px;
}
.process-title p {
    font-size: 15px;
    line-height: 26px;
    color: #616161;
    font-weight: 400;
    font-family: "Inter";
    text-align: center;
    margin: 0;
}
/*<!-- ============================================================== -->
<!-- Start  managing-area  Css -->
<!-- ============================================================== -->*/
.managing-area {
    padding: 70px 0 90px;
}
.managing-thumb {
    position: relative;
    left: -30px;
}
.managing-thumb img {
    width: 100%;
}
.managing-discription p {
    font-size: 18px;
    line-height: 34px;
    color: #010e22;
    font-weight: 400;
    font-family: "Inter";
}
.company-logo {
    text-align: right;
}
.managing-director {
    position: relative;
    top: 45px;
}
.managing-director h3 {
    font-size: 18px;
    margin: 0 0 5px;
    line-height: 25px;
}
/*<!-- ============================================================== -->
<!-- Start  call-do-action-area  Css -->
<!-- ============================================================== -->*/
.call-do-action {
    padding: 70px 0 113px;
}
.call-do-button {
    text-align: center;
}
.call-do-action .sub-title p {
    font-size: 16px;
    line-height: 28px;
    margin: 20px auto 0;
    text-align: center;
    width: 50%;
}
.call-do-button a {
    font-size: 17px;
    color: #010e22;
    font-weight: 500;
    padding: 18px 38px;
    border: 1px solid #333;
    border-radius: 5px;
    transition: .5s;
}
.call-do-button a:hover {
    border: 1px solid #2871FE;
    background: #2871FE ;
    color: #fff;
}
.call-do-button a i {
    display: inline-block;
    margin-left: 5px;
}

/*<!-- ============================================================== -->
<!-- Start  faq-area  Css -->
<!-- ============================================================== -->*/
.faq-area {
    padding: 85px 0px 80px 0px;
    background: #f7faff;
}
.faq-area .section-title {
    text-align: center;
    margin-bottom: 20px;
}
.single-faq-box .sub-title p {
    margin: 15px 0 0;
}
.faq-area .section-title h5 {
    margin-left: 60px;
}
.faq-area .accordion {
    max-width: 100%;
    margin: 33px 0 auto 0px;
    border-top: 1px solid #d9e5e8;
    list-style: none;
}
.faq-area .accordion li {
    background: #FFFFFF;
    position: relative;
    margin-bottom: 15px;
}
.faq-area .accordion a {
    width: 100%;
    border: none;
    outline: 0;
    position: relative;
    cursor: pointer;
    text-decoration: none;
    font-weight: 600;
    line-height: 3;
    font-size: 18px;
    text-indent: 40px;
    user-select: none;
    color: #1d2124;
    font-family: 'Cabin';
    box-shadow: 0px 10px 60px 0px rgb(0 0 0 / 10%);
    margin-bottom: 20px;
    padding: 8px 0;
    display: inline-block;
}
.faq-area .accordion a:hover {
    text-decoration: underline;
    color: #2871FE;
}
.faq-area .accordion li a.active {
    background: #fff;
    color: #1d2124;
    padding: 6px 0;
    border-radius: 5px;
    font-size: 18px;
    transition: .5s;
    text-decoration: none;
}
.faq-area .accordion li a.active:hover{
    color: #5a49f8;
}
.faq-area .accordion a.active::before{
    display: none;
}
.faq-area .accordion p {
    display: none;
    padding: 10px 25px 30px;
    color: #646464;
    font-size: 15px;
}
.accordion li a::after {
    content: "\f067";
    font-family: "Font Awesome 5 Free";
    position: absolute;
    right: 20px;
    top: 7px;
}
.accordion  li a.active::after {
    content: "\f068";
}
.faq-button a {
    padding: 13px 35px;
    background: linear-gradient(to right,#533dfd,#730fd5);
    color: #fff;
    transition: .5s;
    font-weight: 600;
    text-transform: capitalize;
    border-radius: 8px;
    display: inline-block;
    margin: 0 10px;
    font-size: 18px;
}
.faq-button a:hover {
    background: linear-gradient(to right,#730fd5,#533dfd);
}



/*<!-- ============================================================== -->
<!-- Start  feature-area  Css -->
<!-- ============================================================== -->*/
.feature-area {
    padding: 100px 0 100px;
    background: #f7faff;
}
.feature-area .main-title h1 {
    text-align: left;
}
.feature-area .section-title {
    margin-bottom: 35px;
}
.feature-area .sub-title {
    text-align: left;
}
.feature-button a {
    font-size: 17px;
    line-height: 28px;
    color: #333;
    font-weight: 500;
    font-family: "Cabin";
    padding: 19px 41px;
    border-radius: 5px;
    transition: .5s;
    border: 1px solid #333;
    display: inline-block;
    text-transform: capitalize;
}
.feature-button a:hover{
    color: #fff;
    border: 1px solid #2871FE;
    background: #2871FE ;
}
.feature-button a i {
    display: inline-block;
    margin-left: 5px;
}
.feature-thumb {
    left: 50px;
    position: relative;
}












/*<!-- ============================================================== -->
<!-- Start  about-area  Css -->
<!-- ============================================================== -->*/
.why-choose-us {
    padding: 130px 0 0px;
}
.why-choose-us .section-title {
    text-align: left;
    margin-bottom: 25px;
}
.why-choose-us .main-title h1 {
    text-align: left;
}
.choose-us-thumb {
    position: relative;
    top: -64px;
}
.choose-us-title h3 {
    font-size: 18px;
    line-height: 45px;
    color: #010e22;
    font-weight: 500;
    font-family: "Cabin";
    margin: 0;
}
.choose-us-icon {
    display: inline-block;
    margin: 0 6px 0 0px;
    position: relative;
    top: 7px;
}
.choose-us-icon i {
    display: inline-block;
    color: #2D75FF;
    font-size: 30px;
    font-weight: 600;
}
.choose-us-title {
    display: inline-block;
}
.choose-us-discription p {
    font-size: 16px;
    line-height: 28px;
    color: #616161;
    font-weight: 400;
    font-family: "Inter";
    margin: 0 0 10px 37px;
}
/*<!-- ============================================================== -->
<!-- Start  testimonial-area  Css -->
<!-- ============================================================== -->*/
.testimonial-area {
    padding: 100px 0 90px;
    background: #f7faff;
}
.testimonial-area .main-title h1 {
    text-align: left;
}
.testimonial-area .single-testimonial {
    background: #fff;
    padding: 37px 20px 37px;
    position: relative;
    border-radius: 5px;
}
.testimonial-area .testi-discription p {
    font-size: 16px;
    line-height: 28px;
    color: #616161;
    font-weight: 400;
    font-family: "Inter";
    font-style: italic;
    margin: 0 0 33px;
}
.testimonial-area .testi-thumb {
    float: left;
    margin-right: 15px;
}
.testimonial-area .client-name h3 {
    font-size: 18px;
    line-height: 28px;
    color: #010e22;
    font-weight: 600;
    font-family: "Cabin";
    margin: 0;
}
.testimonial-area .shape-img {
    position: absolute;
    bottom: 50px;
    right: 40px;
}
.testimonial-area .client-name span {
    font-size: 15px;
    line-height: 24px;
    color: #616161;
    font-weight: 400;
    font-family: "Inter";
}
.testimonial-area .owl-nav {
    position: absolute;
    top: -90px;
    right: 20px;
}
.testimonial-area .owl-nav .owl-prev {
    font-size: 20px;
    margin-left: -70px;
    height: 50px;
    width: 50px;
    line-height: 50px;
    border: 1px solid #E5E9EC;
    border-radius: 50%;
    text-align: center;
    transition: .5s;
}
.testimonial-area .owl-nav .owl-next {
    margin-top: -51px;
    font-size: 20px;
    height: 50px;
    width: 50px;
    line-height: 50px;
    border: 1px solid #E5E9EC;
    border-radius: 50%;
    text-align: center;
    transition: .5s;
}
.testimonial-area .owl-nav .owl-prev:hover {
    border: 1px solid #2772FF;
    color: #fff;
    background:#2772FF ;
}
.testimonial-area .owl-nav .owl-next:hover {
    border: 1px solid #2772FF;
    color: #fff;
    background:#2772FF ;
}
/*<!-- ============================================================== -->
<!-- Start  subscribe-areaa  Css -->
<!-- ============================================================== -->*/
.subscribe-area {
    padding: 100px 0 30px;
}
.subscribe-area .row.bottoms {
    border-bottom: 1px solid #E9EBEC;
    padding-bottom: 100px;
}
.subscribe-area .sub-title p {
    width: 55%;
    text-align: center;
    margin: 20px auto 0; 
}
.subscribe-area .form_box {
    text-align: center;
    position: relative;
}
.subscribe-area .form_box input {
    width: 55%;
    height: 54px;
    padding-left: 20px;
    border-radius: 3px;
    transition: .5s;
    border: 1px solid #E9EBEC;
}
.subscribe-area input::placeholder {
    color: #7D7D7D;
}
.subscribe-area .form_box input:focus {
    border-color: #DEE1E6;
    outline: 0;
}
.subscribe-area .form-button button {
    padding: 13px 35px;
    display: inline-block;
    background: #2871FE;
    color: #fff;
    text-transform: capitalize;
    border-radius: 3px;
    transition: .5s;
    border: navajowhite;
}
.subscribe-area .form-button button:hover {
    color: #fff;
    background: linear-gradient(to left, #533efe, #740fd6);
}
.subscribe-area .form-button {
    position: absolute;
    top: -25px;
    right: 20%;
}
.subscribe-area.upper {
    padding: 90px 0 0px;
}
.subscribe-area.upper .row.bg {
    padding: 70px 0 65px;
    background: url(assets/images/bg1.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 10px;
}
.subscribe-area.upper .row.bg .main-title h1 {
    color: #fff;
}
 .subscribe-area.upper .row.bg .form_box input {
    width: 50%;
    height: 70px;
    padding-left: 20px;
    border-radius: 3px;
    transition: .5s;
    border: 1px solid #E9EBEC;
}
 .subscribe-area.upper .row.bg .form-button button {
    padding: 12px 30px;
    display: inline-block;
    background: #2871FE;
    color: #fff;
    text-transform: capitalize;
    border-radius: 3px;
    transition: .5s;
    border: navajowhite;
}
.subscribe-area.upper .row.bg .form-button {
    position: absolute;
    top: -16px;
    right: 27%;
}
/*<!-- ============================================================== -->
<!-- Start  blog-area  Css -->
<!-- ============================================================== -->*/
.login-section {
    padding: 50px 0 90px;
}
.login-title h1 {
    font-size: 42px;
    font-weight: 500;
    line-height: 60px;
    color: #010e22;
    text-transform: capitalize;
    font-family: 'Cabin';
    margin: 0 0 15px;
    text-align: left;
}
.login-disaription p {
    font-size: 20px;
    line-height: 28px;
    color: #616161;
    font-weight: 400;
    font-family: "Inter";
    margin: 0;
}
.single_login {
    box-shadow: 0px 0px 40px 0px rgb(0 0 0 / 20%);
    padding: 40px 47px 0px;
}
.login-title h3 {
    font-size: 30px;
    color: #010E22;
    font-weight: 500;
}
.login-text {
    margin-bottom: 50px;
}
.login-section .form_box input {
    width: 100%;
    height: 54px;
    padding-left: 40px;
    background: #fff;
    border-radius: 3px;
    transition: .5s;
    border: 1px solid #A8A8A8;
}
.login-section .form_box span {
    position: relative;
    top: -40px;
    left: 15px;
}
.login-section .form_box span i {
    display: inline-block;
    color: #2771FF;
    font-size: 20px;
}
.login-section .form_box {
    margin-bottom: 0;
}
.login-section .form_box p {
    position: absolute;
    top: 7px;
    right: 20px;
}
.login-section .form-button {
    text-align: center;
    margin-top: 0;
}
.login-section .form-button button {
    padding: 14px 190px;
    margin-bottom: 50px;
}
.bottom-text {
    border-top: 1px solid #A8A8A8;
    padding: 15px 0;
}
.login_bottom .bottom-text h5{
    font-size: 16px;
    font-weight: 500;
}
.login_bottom .bottom-text h5 a {
    display: inline-block;
    font-size: 15px;
    color: #2771FF;
}
.login-section.upper .form-button button {
    padding: 14px 150px;
    margin-bottom: 20px;
}
.login-section.upper .bottom-text {
    border-top: none;
    padding: 0 0 10px;
    text-align: center;
}
.login-section.upper .login-title {
    text-align: center;
}
.login-section.upper .login-text p {
    font-size: 16px;
    text-align: center;
    margin: 0;
}
.login-section .login-text p {
    font-size: 16px;
    margin: 0;
}



/*<!-- ============================================================== -->
<!-- Start  blog-area  Css -->
<!-- ============================================================== -->*/
.blog-area {
    padding: 50px 0 70px;
}
.blog-area .section-title {
    text-align: left;
    margin-bottom: 15px;
}
.blog-area .main-title h1 {
    text-align: left;
}
.blog-button a {
    display: inline-block;
    color: #010e22;
    font-size: 16px;
    font-weight: 500;
    font-family: 'Cabin';
}
.blog-button a i {
    display: inline-block;
    color: #4887FF;
    font-size: 16px;
    font-weight: 800;
    margin-left: 5px;
}
.single-blog {
    padding: 0 0 25px;
    box-shadow: 0px 0px 21px 0px rgb(0 0 0 / 20%);
    transition: .5s;
    margin-bottom: 30px;
}
.single-blog:hover {
    box-shadow: 0px 0px 40px 0px rgb(0 0 0 / 20%);
}
.blog-thumb img {
    width: 100%;
}
.blog-title h2 a{
    display: inline-block;
    font-size: 20px;
    line-height: 30px;
    color: #010e22;
    font-weight: 500;
    font-family: "Cabin";
    margin: 23px 34px 0;
    transition: .5s;
}
.blog-title h2 a:hover{
    color: #5739FA;
}
.blog-area .row.details {
    margin-top: 20px;
}
/*<!-- ============================================================== -->
<!-- Start  footer-area  Css -->
<!-- ============================================================== -->*/
.footer-area {
    padding: 110px 0 0px;
}
.footer-discription p {
    color: #010E22;
    font-size: 15px;
    line-height: 30px;
    font-weight: 300;
    margin: 34px 0 0;
    font-family: 'Inter', sans-serif;
}
.footer-title h3 {
    font-size: 24px;
    line-height: 26px;
    color: #1d2124;
    margin-bottom: 35px;
}
.footer-content ul li {
    list-style: none;
    display: block;
    margin: 0 0 12px;
}
.footer-content ul li a {
    display: inline-block;
    font-size: 16px;
    color: #010E22;
    transition: .5s;
    font-family: "Cabin", Sans-serif;
}
.footer-content ul li a:hover{
    color: #2972FF;
}
.copy-right-area {
    padding: 20px 0 12px;
    background: #2871FF;
    margin-top: 70px;
}
.copyright-title h3 {
    font-size: 16px;
    line-height: 26px;
    color: #fff;
    font-weight: 400;
    font-family: 'Inter';
}
.copyright-title h3 span {
    color: #1B51BD;
}

/*<!-- ============================================================== -->
<!-- Start bg-bar  Css -->
<!-- ============================================================== -->*/
.sideber-search-box {
    margin-bottom: 40px;
    padding: 2px 30px 8px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e6e6e6;
    box-shadow: 0 0 5px rgb(0 0 0 / 10%);
}
.sideber-box {
    margin-bottom: 40px;
    padding: 35px 30px 35px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e6e6e6;
    box-shadow: 0 0 5px rgb(0 0 0 / 10%);
}
.bg-bar {
    position: relative;
    z-index: 1;
}
.bg-bar::before {
    position: absolute;
    left: 0;
    bottom: 20px;
    width: 88px;
    height: 3px;
    background: #aec6ef;
    content: "";
}
.bg-bar::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 18px;
    height: 8px;
    width: 8px;
    border-radius: 50%;
    background: #5a49f8;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: MOVE-BG;
    animation-name: MOVE-BG;
}
@-webkit-keyframes MOVE-BG {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(88px);
            transform: translateX(88px);
  }
}
.resent-post-single-box {
    border-bottom: 1px solid #E8E8E8;
    padding-bottom: 50px;
    margin-bottom: 16px;
}
.blog-thub img {
    width: 100%;
}
.resent-thunb img {
    border-radius: 5px;
    width: 28%;
    float: left;
    margin-right: 12px;
    height: 70px;
}
.resent-title {
    position: relative;
    top: 14px;
}
.resent-title a h3 {
    color: #1d2124;
    font-size: 16px;
    line-height: 22px;
    font-weight: 600;
    margin-bottom: 0;
}
.resent-title a span {
    color: #616161;
}
.resent-post-single-box.two {
    border: none;
    margin: 0;
    padding: 0 0 20px;
}
.catagories-body ul li{
    list-style: none;
    margin-bottom: 10px;
    border-bottom: 1px solid #E8E8E8;
    transition: .5s;
    padding-bottom: 10px;
}
.catagories-body ul li a {
    color: #616161;
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
    transition: .5s;
}
.catagories-body ul li a:hover {
    color: #5A49F8;
}
.sidebar-search {
    margin-bottom: 30px;
}


.tag-body ul {
    list-style: none;
}
.tag-body ul li {
    display: inline-block;
    margin: 0 10px 9px 0;
}
.tag-body ul li a {
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    color: #616161;
    text-transform: capitalize;
    border: 1px solid #e6e6e6;
    border-radius: 5px;
    padding: 5px 14px;
    background: #fff;
    transition: .5s;
}
.tag-body ul li a:hover {
    color: #fff;
    background: #2771FF;
}
.form-control {
    top: 31px;
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: 28px 10px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #949494;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    position: relative;
}
.sideber-search-box button a {
    position: absolute;
    right: 60px;
    top: 50px;
    display: inline-block;
    color: #616161;
    font-size: 18px;
}
.paginationss-title {
    padding-top: 40px;
    text-align: left;
    border-top: 1px solid #e6e6e6;
    margin-top: 0;
    width: 90%;
    position: relative;
    left: 31px;
    margin-bottom: 30px;
}
.paginationss-title ul {
    display: inline-block;
}
.paginationss-title ul li {
    list-style: none;
    display: inline-block;
    margin-right: 10px;
}
.paginationss-title ul li a i {
    border: 1px solid #e6e6e6;
    color: #565872;
    display: inline-block;
    font-size: 15px;
    height: 40px;
    line-height: 41px;
    margin: 0 0 0 0;
    text-align: center;
    width: 40px;
    border-radius: 5px;
}
.paginationss-title ul li a i:hover {
    background: #5F4FF8;
    border-color: #5F4FF8;
    color: #fff;
}
.contact-title h3 {
    font-size: 24px;
    font-weight: 600;
    text-transform: capitalize;
    margin-bottom: 35px;
    color: #1d2124;
    font-family: 'Poppins', sans-serif;
    position: relative;
}
.sideber-title h3 {
    color: #232323;
    display: block;
    font-size: 21px;
    margin-bottom: 28px;
    padding-bottom: 0;
    position: relative;
    text-transform: capitalize;
}
 .form_box {
    margin-bottom: 15px;
}
.form_box input {
    width: 100%;
    height: 54px;
    padding-left: 20px;
    background: #fff;
    border-radius: 3px;
    transition: .5s;
    border: 1px solid #EEECFE;
}
.form_box textarea {
    width: 100%;
    padding-left: 20px;
    padding-top: 15px;
    border: 1px solid #EEECFE;
    height: 150px;
    outline: 0;
    transition: .5s;
    background: #fff;
    margin-top: 7px;
}
 .form_box input:focus{
    box-shadow: 0 0 0 .2rem rgba(0,123,255,.25);
    border-color: #80bdff;
    outline: 0;
}
 .form_box textarea:focus{
    box-shadow: 0 0 0 .2rem rgba(0,123,255,.25);
    border-color: #80bdff;
}
 input::placeholder {
    color: #94A9A8;
}
 textarea#massage::placeholder {
    color: #94A9A8;
}
.form-button {
    text-align: left;
    margin-top: 20px;
}
.form-button button {
    display: inline-block;
    color: #fff;
    font-weight: 400;
    padding: 14px 35px;
    text-transform: capitalize;
    transition: 0.5s;
    font-size: 18px;
    position: relative;
    z-index: 1;
    border-radius: 5px;
    overflow: hidden;
    margin-top: 5px;
    background: #2771FF;
    border: none;
}
.form-button button:hover {
    color: #fff;
    background: linear-gradient(to left, #533efe, #740fd6);
}

.blog-area.style-one .blog-title span {
    font-size: 15px;
    color: #2871ff;
    line-height: 24px;
    font-weight: 400;
    font-family: 'Cabin';
    background: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    position: relative;
    top: -15px;
    left: 30px;
}
.blog-area.style-one .blog-title p {
    font-size: 15px;
    position: relative;
    left: 33px;
    color: #616161;
    transition: .5s;
}
.blog-area.style-one .single-blog:hover .blog-title p{
    color: #2B72FF;
}
.blog-area.style-one .single-blog:hover .blog-title h2 a{
    color: #2B72FF;
}
.blog-area.style-one .blog-title h2 a {
    font-size: 26px;
}
.blog-number ul {
    position: relative;
    left: 10px;
}
.blog-number ul li {
    display: inline-block;
    list-style: none;
    margin-right: 5px;
}
.blog-number ul li a {
    display: inline-block;
    border: 1px solid #DEE1E6;
    height: 50px;
    width: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 50%;
    transition: .5s;
    color: #000F22;
    font-weight: 600;
}
.blog-number ul li a:hover {
    border: 1px solid #2771FF;
    background: #2771FF;
    color: #fff;
}
.blog-number ul li a i{
    display: inline-block;
    color: #000F22;
    font-weight: 600;
}
.blog-number ul li a i:hover{
    color: #fff;
}
.blog-area.style-two .blog-title p {
    position: relative;
    top: 30px;
    color: #2871ff;
}
.blog-area.style-two .blog-title p span {
    color: #27293C;
    margin-left: 20px;
    position: relative;
}
.blog-area.style-two .blog-title p span::before {
    position: absolute;
    content: "";
    top: 8px;
    left: -16px;
    height: 6px;
    width: 6px;
    border-radius: 50%;
    background: #D4D4D4;
}
.blog-area.style-two .blog-title h2 a {
    display: inline-block;
    font-size: 30px;
    line-height: 32px;
    font-weight: 500;
    font-family: "Cabin";
    margin: 30px 0 0;
    transition: .5s;
    color: #010e22;
    text-align: left;
}
.blog-area.style-two .single-blog {
    padding: 0 0 25px;
    box-shadow: inherit;
    transition: .5s;
    margin-bottom: 30px;
}
.blog-area.style-two .blog-discription p {
    font-size: 16px;
    line-height: 28px;
    color: #616161;
    font-family: 'Inter';
    font-weight: 400;
    margin: 30px  0;
}
.blog-area.style-two .blog-discription p span {
    color: #4A87FF;
}
.blog-area.style-two .blog-text {
    position: relative;
    margin-left: 35px;
}
.blog-area.style-two .blog-text::before {
    position: absolute;
    top: 0;
    left: -30px;
    content: "";
    height: 100%;
    width: 3px;
    background: #2871FE;
}
.blog-area.style-two .blog-text p {
    font-size: 18px;
    line-height: 30px;
    color: #010e22;
    font-weight: 400;
    font-style: italic;
    font-family: "Cabin";
    margin: 0;
}
.blog-area.style-two .blog-text span {
    font-size: 15px;
    color: #2672FF;
}
.blog-area.style-two .blogs-titles {
    margin-top: 15px;
}
.blog-area.style-two .blogs-titles h2  {
    display: inline-block;
    font-size: 36px;
    line-height: 45px;
    font-weight: 700;
    font-family: "Cabin";
    margin: 30px 0 0;
    transition: .5s;
    color: #010e22;
    text-align: left;
}
.blog-area.style-two .blog-icon-list ul li {
    display: block;
    list-style: none;
    font-size: 16px;
    color: #616161;
    margin: 5px 0 0;
}
.blog-area.style-two .blog-icon-list ul li i {
    display: inline-block;
    margin-right: 10px;
    font-size: 20px;
    line-height: 28px;
    color: #296CF1;
    font-weight: 800;
}
.blog-area.style-two .blog-tab ul {
    margin-top: 35px;
    padding-bottom: 40px;
    border-bottom: 1px solid #DEE1E6;
}
.blog-area.style-two .blog-tab ul li {
    display: inline-block;
    list-style: none;
    margin-right: 10px;
}
.blog-area.style-two .blog-tab ul li a{
    display: inline-block;
    list-style: none;
    margin-right: 10px;
    padding: 5px 15px;
    border: 1px solid #DEE1E6;
    border-radius: 5px;
    transition: .5s;
}
.blog-area.style-two .blog-tab ul li a:hover {
    border: 1px solid #2771FF;
    color: #fff;
    background: #2771FF;
}


/* bounce-animate */
.bounce-animate {
  animation-name: float-bob;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -moz-animation-name: float-bob;
  -moz-animation-duration: 2s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: float-bob;
  -ms-animation-duration: 2s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-animation-name: float-bob;
  -o-animation-duration: 2s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear; }
.bounce-animate2 {
  animation-name: float-bob2;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -moz-animation-name: float-bob2;
  -moz-animation-duration: 3s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: float-bob2;
  -ms-animation-duration: 3s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-animation-name: float-bob2;
  -o-animation-duration: 3s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear; }
.bounce-animate3 {
  animation-name: float-bob3;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -moz-animation-name: float-bob3;
  -moz-animation-duration: 4s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: float-bob3;
  -ms-animation-duration: 4s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-animation-name: float-bob3;
  -o-animation-duration: 4s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear; }
.bounce-animate4 {
  animation-name: float-bob4;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -moz-animation-name: float-bob4;
  -moz-animation-duration: 5s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: float-bob4;
  -ms-animation-duration: 5s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-animation-name: float-bob4;
  -o-animation-duration: 5s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear; }
 .bounce-animate5 {
  animation-name: float-bob5;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -moz-animation-name: float-bob5;
  -moz-animation-duration: 6s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: float-bob5;
  -ms-animation-duration: 6s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-animation-name: float-bob5;
  -o-animation-duration: 6s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear; }
@-webkit-keyframes float-bob {
  0% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px); }
  50% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px); }
  100% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px); } }
@-webkit-keyframes float-bob2 {
  0% {
    -webkit-transform: translateY(-60px);
    transform: translateY(-60px); }
  50% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px); }
  100% {
    -webkit-transform: translateY(-60px);
    transform: translateY(-60px); } }
@-webkit-keyframes float-bob3 {
  0% {
    -webkit-transform: translateY(-40px);
    transform: translateY(-40px); }
  50% {
    -webkit-transform: translateY(-25px);
    transform: translateY(-25px); }
  100% {
    -webkit-transform: translateY(-40px);
    transform: translateY(-40px); } }
@-webkit-keyframes float-bob4 {
  0% {
    -webkit-transform: translateY(-70px);
    transform: translateY(-70px); }
  50% {
    -webkit-transform: translateY(-35px);
    transform: translateY(-35px); }
  100% {
    -webkit-transform: translateY(-70px);
    transform: translateY(-70px); } }
@-webkit-keyframes float-bob5 {
  0% {
    -webkit-transform: translateY(-75px);
    transform: translateY(-75px); }
  50% {
    -webkit-transform: translateY(-35px);
    transform: translateY(-35px); }
  100% {
    -webkit-transform: translateY(-75px);
    transform: translateY(-75px); } }
@-webkit-keyframes movebounce {
  0% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  50% {
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
/* bounce-animate */    
@-webkit-keyframes movebounce {
  0% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  50% {
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}

@keyframes movebounce {
  0% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  50% {
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}

@-webkit-keyframes moveleftbounce {
  0% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
  50% {
    -webkit-transform: translateX(20px);
            transform: translateX(20px);
  }
  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}

@keyframes moveleftbounce {
  0% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
  50% {
    -webkit-transform: translateX(20px);
            transform: translateX(20px);
  }
  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}
/* rotateme*/
.rotateme {
  -webkit-animation-name: rotateme;
          animation-name: rotateme;
  -webkit-animation-duration: 20s;
          animation-duration: 20s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@keyframes rotateme {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@-webkit-keyframes rotateme {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

@-webkit-keyframes rotate3d {
  0% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }
}

/*** 
====================================================================
  Search Popup
====================================================================
***/

.search-popup{
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100%;
  z-index: 99999;
  margin-top: -540px;
  transform: translateY(-100%);
  background-color: rgba(0,0,0,0.90);
    -webkit-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -moz-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -o-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    transition: all 1500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); /* easeInOutQuint */
    -webkit-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -moz-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -o-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); /* easeInOutQuint */
}

.search-popup{
  width: 100%;
}
.search-active .search-popup{
  transform: translateY(0%);
  margin-top: 0;
}
.search-box-btn.search-box-outer {
    display: inline-block;
    position: absolute;
    right: -20px;
    top: 35px;
}
.search-box-btn.search-box-outer i {
    display: inline-block;
    text-align: center;
    font-size: 18px;
    cursor: pointer;
    color: #fff;
    margin-top: 0px;
}
.sticky-nav .search-box-btn.search-box-outer i {
    color: #fff;
    position: relative;
    left: 40px;
}
.search-popup .close-search {
    position: absolute;
    left: 0;
    right: 0;
    top: 75%;
    margin: 0 auto;
    margin-top: -200px;
    border-radius: 50%;
    text-align: center;
    background-color: #5A49F8;
    width: 70px;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
    border-bottom: 3px solid #ffffff;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
    opacity: 0;
    visibility: hidden;
    height: 70px;
    line-height: 70px;
    text-align: center;
}

.search-popup .close-search i {
    position: relative;
    height: 70px;
    width: 70px;
    font-size: 30px;
    line-height: 70px;
    color: #fff;
    display: inline;
    text-align: center;
}

.search-active .search-popup .close-search{
  visibility: visible;
  opacity: 1;
  top: 50%;
  -webkit-transition-delay: 1500ms;
  -moz-transition-delay: 1500ms;
  -ms-transition-delay: 1500ms;
  -o-transition-delay: 1500ms;
  transition-delay: 1500ms;
}

.search-popup form{
  position: absolute;
  max-width: 700px;
  top: 50%;
  left: 15px;
  right: 15px;
  margin:-35px auto 0;
  transform: scaleX(0);
  transform-origin: center;
  background-color: #111111;
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;
}

.search-active .search-popup form{
  transform: scaleX(1);
  -webkit-transition-delay: 1200ms;
  -moz-transition-delay: 1200ms;
  -ms-transition-delay: 1200ms;
  -o-transition-delay: 1200ms;
  transition-delay: 1200ms;
}

.search-popup .form-group{
  position:relative;
  margin:0px; 
  overflow: hidden;
}
.search-popup .close-search.style-two{
  position: absolute;
  right: 25px;
  left: auto;
  color:#ffffff;
  width:auto;
  height:auto;
  top:25px;
  margin:0px;
  border:none;
  background:none !important;
  box-shadow:none !important;
  -webkit-transition:all 500ms ease;
  -moz-transition:all 500ms ease;
  -ms-transition:all 500ms ease;
  -o-transition:all 500ms ease;
  transition:all 500ms ease;
}

.search-popup .close-search.style-two i {
    font-size: 20px;
    color: #fff;
}
.search-popup .form-group input[type="text"],
.search-popup .form-group input[type="search"]{
  position:relative;
  display:block;
  font-size:18px;
  line-height: 50px;
  color:#000000;
  height:70px;
  width:100%;
  padding: 10px 30px;
  background-color: #ffffff;
  -webkit-transition:all 500ms ease;
  -moz-transition:all 500ms ease;
  -ms-transition:all 500ms ease;
  -o-transition:all 500ms ease;
  transition:all 500ms ease;
  font-weight:500;
  text-transform:capitalize;
}
.search-popup .form-group input[type="submit"], .search-popup .form-group button {
    position: absolute;
    right: 30px;
    top: 0px;
    height: 70px;
    line-height: 70px;
    background: transparent;
    text-align: center;
    font-size: 24px;
    color: #000000;
    padding: 0;
    cursor: pointer;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
    border: none;
}

.search-popup .form-group input[type="submit"]:hover,
.search-popup .form-group button:hover{
  color: #000000;
}

.search-popup input::placeholder,
.search-popup textarea::placeholder{
  color:#000000;
}

/*===========================scroll strat===========================  
 ===========================************===========================  */ 
.scroll-area {
  position: relative;
  z-index: 999;
}
.scroll-area .go-top {
  position: fixed;
  cursor: pointer;
  top: 0;
  right: 30px;
  color: #ffffff;
  background-image: -moz-linear-gradient(0deg, #d1651a 0%, #c1282a 100%);
  background-image: -webkit-linear-gradient(0deg, #d1651a 0%, #c1282a 100%);
  background-image: -ms-linear-gradient(0deg, #d1651a 0%, #c1282a 100%);
  z-index: 9999;
  width: 45px;
  text-align: center;
  height: 45px;
  line-height: 42px;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.9s ease-out 0s;
  -moz-transition: all 0.9s ease-out 0s;
  -ms-transition: all 0.9s ease-out 0s;
  -o-transition: all 0.9s ease-out 0s;
  transition: all 0.9s ease-out 0s;
  border-radius: 10px;
}
.scroll-area .go-top i {
  position: absolute;
  top: 50%;
  left: -4px;
  right: 0;
  margin: 0 auto;
  font-size: 15px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
  -ms-transition: all 0.5s ease-out 0s;
  -o-transition: all 0.5s ease-out 0s;
  transition: all 0.5s ease-out 0s;
}
.scroll-area .go-top i:last-child {
  opacity: 0;
  visibility: hidden;
  top: 60%;
}
.scroll-area .go-top::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    animation: zoomBig 3.25s linear infinite;
    -webkit-animation-delay: 0.75s;
    animation-delay: 0.75s;
}
.scroll-area .go-top:focus, .scroll-area .go-top:hover {
  color: #fff;
}
.scroll-area .go-top:focus::before, .scroll-area .go-top:hover::before {
  opacity: 1;
  visibility: visible;
}
.scroll-area .go-top:focus i:first-child, .scroll-area .go-top:hover i:first-child {
  opacity: 0;
  top: 0;
  visibility: hidden;
}
.scroll-area .go-top:focus i:last-child, .scroll-area .go-top:hover i:last-child {
  opacity: 1;
  visibility: visible;
  top: 50%;
}
.scroll-area .go-top.active {
  top: 95%;
  -webkit-transform: translateY(-98%);
  -moz-transform: translateY(-98%);
  -ms-transform: translateY(-98%);
  -o-transform: translateY(-98%);
  transform: translateY(-98%);
  opacity: 1;
  visibility: visible;
  border-radius: 0;
  right: 50px;
  border-radius: 100%;
}
.top-wrap {
  position: relative;
}
.top-wrap .go-top-button {
    display: inline-block;
    width: 60px;
    height: 59px;
    line-height: 60px;
    text-align: center;
    color: #fff;
    top: 3px;
    z-index: 1;
    background-image: -moz-linear-gradient(0deg, #d1651a 0%, #c1282a 100%);
    background: #2771FF;
    background-image: -ms-linear-gradient(0deg, #d1651a 0%, #c1282a 100%);
}
.top-wrap .go-top-button i {
  font-size: 20px;
  font-weight: 700;
  padding-left: 4px;
  color: #fff;
}
.top-wrap .go-top-button::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    animation: zoomBig 3.25s linear infinite;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}
@keyframes zoomBig {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 1;
    border-width: 3px;
  }
  40% {
    opacity: 0.5;
    border-width: 2px;
  }
  65% {
    border-width: 1px;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
    border-width: 1px;
  }
}
/*<!-- ============================================================== -->
<!-- Start  sticky-nav  Css -->
<!-- ============================================================== -->*/
.sticky-nav {
    left: 0;
    margin: auto;
    top: 0;
    width: 100%;
    position: fixed !important;
    box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.07);
    -webkit-animation: 300ms running fadeInDown;
    animation: 500ms running fadeInUp;
    -webkit-box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1);
    transition: 0.5s !important;
    background: #fff!important;
    z-index: 9999 !important;
    animation-name: slideInDown;
    padding: 0 40px 7px;
}
.sticky-nav li.icon {
    color: #fff;
}
.sticky-nav.nav-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sticky-nav .heder-menu {
    display: inline-block;
    position: relative;
    left: 10%;
}
a.main_sticky {
    display: none;
}

.sticky-nav .header-menu ul li a{
    color: #fff!important;
}
.sticky-nav a.main_sticky {
    display: inline-block !important;
}
.sticky-nav .header-logo a {
    display: none;
}
.sticky-nav ul.sub-menu li a {
    display: inline-block;
    margin: 6px 0px 6px 21px;
    color: #6e7673 !important;
    transition: .5s;
}
.sticky-nav .header-con i {
    color: #fff;
}
.header-menu ul .sub-menu li {
    display: block;
    margin-right: 0;
    transition: .5s;
}
 ul.sub-menu li:hover{
    background: #87C03D;
}
 ul.sub-menu li a:hover{
    color: #fff !important;
}
.sticky-nav ul.sub-menu li:hover{
    background: #87C03D;
}
.sticky-nav ul.sub-menu li a:hover{
    color: #fff !important;
}



/*Loader*/

.loader-wrapper {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    transition: 0.8s 1s ease;
    z-index: 666;
}
.loader {
  position: relative;
  display: block;
  z-index: 201;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin: -50px 0 0 -50px;
  border-radius: 50%;
  transition: all 1s 1s ease;
  border: 3px solid transparent;
  border-top-color: #F2CD00;
  -webkit-animation: spin 1.5s linear infinite;
  -moz-animation: spin 1.5s linear infinite;
  -o-animation: spin 1.5s linear infinite;
  animation: spin 1.5s linear infinite;
}
.loader:before {
  position: absolute;
  content: '';
  top: 6px;
  left: 6px;
  right: 6px;
  bottom: 6px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-left-color: #010E22;
  -webkit-animation: spin 2s linear infinite;
  -moz-animation: spin 2s linear infinite;
  -o-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
.loader:after {
  position: absolute;
  content: '';
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-right-color: #fff;
  -webkit-animation: spin 2.5s linear infinite;
  -moz-animation: spin 2.5s linear infinite;
  -o-animation: spin 2.5s linear infinite;
  animation: spin 2.5s linear infinite;
}
/* Here comes the Magic */

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-moz-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.loader-wrapper .loder-section {
    position: fixed;
    top: 0;
    width: 52%;
    height: 100%;
    background: #2771FF;
    z-index: 2;
}
.loader-wrapper .loder-section.left-section {
  left: 0;
  transition: 1s 1.4s ease;
}
.loader-wrapper .loder-section.right-section {
  right: 0;
  transition: 1s 1.4s ease;
}

/* When page loaded
   Même trajet qu'avant (left/right: -100%, top: -100%), mais en `translate` :
   une animation de position (left/top) compte comme décalage de mise en page (CLS). */
.loaded .loder-section.left-section {
  translate: -100vw 0;
}
.loaded .loder-section.right-section {
  translate: 100vw 0;
}
.loaded .loader-wrapper {
  visibility: hidden;
}
.loaded .loader {
  translate: 0 -150vh;
  opacity: 0;
}


/* ==========================================================================
   DIGIlium — feuilles de la charte, déplacées ici depuis assets/css/ et assemblées dans leur
   ordre de chargement d'origine : en-tête, pied de page, système commun,
   puis sections de l'accueil (hero, expertise, solutions, pour qui).
   Les url() de polices sont relatives à ce fichier (racine du site).
   ========================================================================== */

/* ==========================================================================
   DIGIlium — Header, méga-menu et tiroir mobile
   Le markup est présent tel quel dans chaque page HTML.
   Desktop : toutes les cotes sont en --u = 1px de la maquette (2170px de
   large) ramené à la largeur de la fenêtre, pour des proportions identiques.
   ========================================================================== */

@font-face { font-family: "Ubuntu"; font-style: normal; font-weight: 300; font-display: swap; src: url("assets/fonts/ubuntu/ubuntu-300.woff2") format("woff2"); }
@font-face { font-family: "Ubuntu"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/ubuntu/ubuntu-400.woff2") format("woff2"); }
@font-face { font-family: "Ubuntu"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/ubuntu/ubuntu-500.woff2") format("woff2"); }
@font-face { font-family: "Ubuntu"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/ubuntu/ubuntu-700.woff2") format("woff2"); }

.dgh-shell {
	--u: min(1px, calc(100vw / 2170));

	--dgh-navy: #010462;
	--dgh-title: #01036b;
	--dgh-t-c: #020581;
	--dgh-s-c: #4560a6;
	--dgh-blue: #0062fe;
	--dgh-ink-c: #0656fc;
	--dgh-sep: #d6e9fb;
	--dgh-ease: cubic-bezier(.22, .8, .24, 1);

	/* barre */
	--dgh-bar-h: calc(var(--u) * 148);
	--dgh-pad-l: calc(var(--u) * 78);
	--dgh-pad-r: calc(var(--u) * 44);
	--dgh-logo-w: calc(var(--u) * 300);
	--dgh-logo-y: calc(var(--u) * 46);
	--dgh-nav-ml: calc(var(--u) * 65);
	--dgh-nav-mr: calc(var(--u) * 49);
	--dgh-nav-fs: calc(var(--u) * 20);
	--dgh-link-px: calc(var(--u) * 16);
	--dgh-text-y: calc(var(--u) * 83);
	--dgh-chev: calc(var(--u) * 26);
	--dgh-chev-y: calc(var(--u) * 112.5);
	--dgh-cta-y: calc(var(--u) * 62);
	--dgh-cta-h: calc(var(--u) * 65);
	--dgh-cta-pl: calc(var(--u) * 34.5);
	--dgh-cta-pr: calc(var(--u) * 31.5);
	--dgh-cta-fs: calc(var(--u) * 21);

	/* menu déroulant */
	--dgh-mega-top: calc(var(--u) * 164);
	--dgh-mega-rad: calc(var(--u) * 20);
	--dgh-col-pt: calc(var(--u) * 32);
	--dgh-col-pb: calc(var(--u) * 30);
	--dgh-col-px: calc(var(--u) * 28);
	--dgh-col-pr: calc(var(--u) * 34);
	--dgh-col-title-fs: calc(var(--u) * 22);
	--dgh-col-title-ls: -.02em;
	--dgh-col-title-mb: calc(var(--u) * 35);
	--dgh-col-title-pl: calc(var(--u) * 6);
	--dgh-tile: calc(var(--u) * 72);
	--dgh-tile-rad: calc(var(--u) * 18);
	--dgh-ico: calc(var(--u) * 50);
	--dgh-entry-gap: calc(var(--u) * 16);
	--dgh-list-gap: calc(var(--u) * 25);
	--dgh-list-gap-airy: calc(var(--u) * 38);
	--dgh-t-fs: calc(var(--u) * 17.5);
	--dgh-t-ls: -.035em;
	--dgh-t-lh: calc(var(--u) * 23);
	--dgh-s-fs: calc(var(--u) * 16);
	--dgh-s-ls: -.03em;
	--dgh-s-lh: calc(var(--u) * 23);
	--dgh-s-mt: calc(var(--u) * 4);

	position: relative;
	z-index: 600; /* sous le loader du template (666) */
	height: var(--dgh-bar-h);
	font-family: "Ubuntu", "Segoe UI", system-ui, -apple-system, sans-serif;
}

.dgh-sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.dgh {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
	color: var(--dgh-navy);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.dgh *,
.dgh *::before,
.dgh *::after { box-sizing: border-box; }
.dgh a { transition: none; text-decoration: none; }
.dgh ul { margin: 0; padding: 0; list-style: none; }
.dgh li { margin: 0; padding: 0; font-weight: inherit; }
.dgh svg { display: block; overflow: visible; }

.dgh a:focus-visible,
.dgh button:focus-visible {
	outline: 2px solid var(--dgh-blue);
	outline-offset: 3px;
	border-radius: 8px;
}

/* --------------------------------------------------------------------------
   Barre
   -------------------------------------------------------------------------- */
.dgh-bar {
	position: relative;
	display: flex;
	align-items: flex-start;
	height: var(--dgh-bar-h);
	padding: 0 var(--dgh-pad-r) 0 var(--dgh-pad-l);
	background: linear-gradient(180deg, #fdfeff 0%, #f6faff 100%);
	transition: height .45s var(--dgh-ease), background-color .45s, box-shadow .45s;
}
.dgh-deco {
	position: absolute;
	top: 0;
	right: 0;
	width: calc(var(--u) * 460);
	height: 100%;
	pointer-events: none;
}

.dgh-logo {
	position: relative;
	flex: 0 0 auto;
	display: block;
	width: var(--dgh-logo-w);
	margin-top: var(--dgh-logo-y);
	transform-origin: 0 0;
	transition: transform .45s var(--dgh-ease);
}
.dgh-logo img {
	display: block;
	width: 100%;
	height: auto;
}

.dgh-nav {
	position: relative;
	flex: 1 1 auto;
	height: 100%;
	margin: 0 var(--dgh-nav-mr) 0 var(--dgh-nav-ml);
}
.dgh .dgh-menu {
	display: flex;
	justify-content: space-between;
	height: 100%;
}
.dgh-item { position: relative; }
.dgh-link {
	position: relative;
	display: block;
	height: 100%;
	padding: var(--dgh-text-y) var(--dgh-link-px) 0;
	font-size: var(--dgh-nav-fs);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -.025em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--dgh-navy);
}
.dgh .dgh-link { transition: color .25s ease, padding-top .45s var(--dgh-ease); }
.dgh-brand { text-transform: none; }
.dgh-link:hover,
.dgh-link:focus,
.dgh-item.is-hover > .dgh-link,
.dgh-item.is-current > .dgh-link { color: var(--dgh-blue); }
/* une autre rubrique est pointée : la page courante reprend sa couleur neutre */
.dgh.is-pointing .dgh-item.is-current:not(.is-hover) > .dgh-link { color: var(--dgh-navy); }

.dgh-chev {
	position: absolute;
	left: 50%;
	top: var(--dgh-chev-y);
	width: var(--dgh-chev);
	height: var(--dgh-chev);
	margin-left: calc(var(--dgh-chev) / -2);
	fill: none;
	stroke: currentColor;
	stroke-width: 2.3;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: top .45s var(--dgh-ease);
}
.dgh-item.is-hover .dgh-chev { animation: dgh-nudge .5s var(--dgh-ease); }
@keyframes dgh-nudge {
	45% { transform: translateY(calc(var(--u) * 4)); }
}

/* soulignement glissant */
.dgh-ink {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: max(2px, calc(var(--u) * 3));
	border-radius: 3px;
	background: var(--dgh-ink-c);
	opacity: 0;
	pointer-events: none;
	transition: transform .45s var(--dgh-ease), width .45s var(--dgh-ease), opacity .3s ease;
}
.dgh-ink.is-instant { transition: none; }

/* bouton d'appel */
.dgh-cta {
	position: relative;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: calc(var(--u) * 20.5);
	height: var(--dgh-cta-h);
	margin-top: var(--dgh-cta-y);
	padding: 0 var(--dgh-cta-pr) 0 var(--dgh-cta-pl);
	overflow: hidden;
	border-radius: 999px;
	background: linear-gradient(90deg, #0061fe 0%, #0062fe 38%, #0072fe 66%, #0095ff 100%);
	box-shadow: 0 calc(var(--u) * 12) calc(var(--u) * 30) calc(var(--u) * -6) rgba(0, 98, 254, .45), inset 0 0 0 1px rgba(255, 255, 255, .14);
	color: #fff;
	font-size: var(--dgh-cta-fs);
	font-weight: 400;
	line-height: 1;
	white-space: nowrap;
}
.dgh .dgh-cta { transition: transform .35s var(--dgh-ease), box-shadow .35s; }
.dgh-cta::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .38) 50%, transparent 65%);
	transform: translateX(-110%);
	transition: transform .9s var(--dgh-ease);
	pointer-events: none;
}
.dgh-cta:hover,
.dgh-cta:focus { color: #fff; }
.dgh-cta:hover {
	transform: translateY(-1px);
	box-shadow: 0 calc(var(--u) * 18) calc(var(--u) * 36) calc(var(--u) * -8) rgba(0, 98, 254, .6), inset 0 0 0 1px rgba(255, 255, 255, .2);
}
.dgh-cta:hover::after { transform: translateX(110%); }
.dgh-arrow {
	width: calc(var(--u) * 27);
	height: calc(var(--u) * 27);
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .35s var(--dgh-ease);
}
.dgh-cta:hover .dgh-arrow { transform: translateX(calc(var(--u) * 5)); }

.dgh-burger,
.dgh-drawer-head,
.dgh-cta--drawer,
.dgh-col-toggle { display: none; }

/* compactage au défilement */
.dgh.is-stuck {
	--dgh-text-y: calc(var(--u) * 52);
	--dgh-chev-y: calc(var(--u) * 83.5);
	--dgh-mega-top: calc(var(--u) * 135);
}
.dgh.is-stuck .dgh-bar {
	height: calc(var(--dgh-bar-h) - var(--u) * 30);
	background-color: rgba(255, 255, 255, .82);
	background-image: linear-gradient(180deg, rgba(253, 254, 255, .9), rgba(246, 250, 255, .86));
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	backdrop-filter: saturate(160%) blur(14px);
	box-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 40) calc(var(--u) * -18) rgba(10, 40, 120, .28);
}
.dgh.is-stuck .dgh-bar > .dgh-logo { transform: translateY(calc(var(--u) * -22)) scale(.82); }
.dgh.is-stuck .dgh-bar > .dgh-cta { transform: translateY(calc(var(--u) * -30)); }
.dgh.is-stuck .dgh-bar > .dgh-cta:hover { transform: translateY(calc(var(--u) * -31)); }

/* --------------------------------------------------------------------------
   Menu déroulant : une carte par rubrique, centrée sous la rubrique (JS)
   -------------------------------------------------------------------------- */
.dgh-mega {
	position: absolute;
	top: var(--dgh-mega-top);
	left: 0;
	width: max-content;
	border: 1px solid #deedfc;
	border-radius: var(--dgh-mega-rad);
	background: #fff;
	box-shadow:
		0 calc(var(--u) * 34) calc(var(--u) * 80) calc(var(--u) * -24) rgba(13, 82, 200, .26),
		0 calc(var(--u) * 6) calc(var(--u) * 26) rgba(13, 82, 200, .07);
	opacity: 0;
	visibility: hidden;
	transform: translateY(calc(var(--u) * -12));
	transition: opacity .25s ease, transform .4s var(--dgh-ease), visibility 0s linear .4s, top .45s var(--dgh-ease), left .4s var(--dgh-ease);
}
.dgh-mega.is-instant { transition: opacity .25s ease, transform .4s var(--dgh-ease), visibility 0s linear .4s, top .45s var(--dgh-ease); }
/* pont de survol entre la barre et le panneau */
.dgh.is-open .dgh-bar::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: calc(var(--u) * 24);
}
.dgh.is-open .dgh-mega {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

.dgh-col {
	position: relative;
	padding: var(--dgh-col-pt) var(--dgh-col-pr) var(--dgh-col-pb) var(--dgh-col-px);
}
@media (min-width: 1200px) {
	.dgh-col { display: none; }
	.dgh-col.is-active {
		display: block;
		animation: dgh-in .35s var(--dgh-ease);
	}
	.dgh-t,
	.dgh-s { white-space: nowrap; }
}
@keyframes dgh-in {
	from { opacity: 0; transform: translateY(calc(var(--u) * 8)); }
}

.dgh-col-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--dgh-col-title-mb);
	padding-left: var(--dgh-col-title-pl);
}
.dgh-col-title {
	font-size: var(--dgh-col-title-fs);
	font-weight: 700;
	line-height: 1;
	letter-spacing: var(--dgh-col-title-ls);
	text-transform: uppercase;
	color: var(--dgh-title);
}
.dgh .dgh-col-title { transition: color .25s ease; }
.dgh-col-title:hover,
.dgh-col-title:focus { color: var(--dgh-blue); }

.dgh .dgh-list {
	display: flex;
	flex-direction: column;
	gap: var(--dgh-list-gap);
}
.dgh .dgh-col--airy .dgh-list { gap: var(--dgh-list-gap-airy); }

.dgh-entry {
	display: flex;
	align-items: center;
	gap: var(--dgh-entry-gap);
	color: inherit;
}
.dgh-tile {
	position: relative;
	flex: 0 0 var(--dgh-tile);
	display: grid;
	place-items: center;
	width: var(--dgh-tile);
	height: var(--dgh-tile);
	overflow: hidden;
	border-radius: var(--dgh-tile-rad);
	background: linear-gradient(150deg, #e6f2fe 0%, #f1f8ff 100%);
	color: var(--dgh-blue);
	transition: transform .4s var(--dgh-ease), box-shadow .4s, color .25s;
}
.dgh-tile::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(140deg, #1d8eff 0%, #0656f5 100%);
	opacity: 0;
	transition: opacity .3s ease;
}
.dgh-ico {
	position: relative;
	width: var(--dgh-ico);
	height: var(--dgh-ico);
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.dgh-entry:hover .dgh-tile,
.dgh-entry:focus-visible .dgh-tile {
	color: #fff;
	transform: translateY(calc(var(--u) * -3));
	box-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 26) calc(var(--u) * -6) rgba(0, 98, 254, .45);
}
.dgh-entry:hover .dgh-tile::before,
.dgh-entry:focus-visible .dgh-tile::before { opacity: 1; }

.dgh-txt { min-width: 0; }
.dgh-t {
	display: block;
	font-size: var(--dgh-t-fs);
	font-weight: 500;
	line-height: var(--dgh-t-lh);
	letter-spacing: var(--dgh-t-ls);
	color: var(--dgh-t-c);
	transition: color .25s ease;
}
.dgh-s {
	display: block;
	margin-top: var(--dgh-s-mt);
	font-size: var(--dgh-s-fs);
	font-weight: 400;
	line-height: var(--dgh-s-lh);
	letter-spacing: var(--dgh-s-ls);
	color: var(--dgh-s-c);
}
.dgh-entry:hover .dgh-t,
.dgh-entry:focus-visible .dgh-t { color: var(--dgh-blue); }

/* voile sur la page */
.dgh-veil {
	position: fixed;
	inset: 0;
	z-index: 1;
	background: rgba(238, 245, 254, .62);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility 0s linear .3s;
}
.dgh.is-open + .dgh-veil,
.dgh.is-drawer + .dgh-veil {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

/* --------------------------------------------------------------------------
   Desktop intermédiaire (1200–1759) : tailles plancher lisibles
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) and (max-width: 1759.98px) {
	.dgh-shell {
		--dgh-mega-rad: 18px;
		--dgh-col-pt: 24px;
		--dgh-col-pb: 24px;
		--dgh-col-px: 22px;
		--dgh-col-pr: 26px;
		--dgh-col-title-pl: 4px;
		--dgh-col-title-fs: 15.5px;
		--dgh-col-title-ls: .01em;
		--dgh-col-title-mb: 20px;
		--dgh-tile: 52px;
		--dgh-tile-rad: 14px;
		--dgh-ico: 28px;
		--dgh-entry-gap: 15px;
		--dgh-list-gap: 16px;
		--dgh-list-gap-airy: 16px;
		--dgh-t-fs: clamp(14.5px, 1.02vw, 16px);
		--dgh-t-ls: -.01em;
		--dgh-t-lh: 1.35;
		--dgh-s-fs: clamp(13px, .92vw, 14.5px);
		--dgh-s-ls: 0em;
		--dgh-s-lh: 1.4;
		--dgh-s-mt: 2px;
	}
}

/* barre plus serrée sous 1440px */
@media (min-width: 1200px) and (max-width: 1439.98px) {
	.dgh-shell {
		--u: calc(100vw / 1900);
		--dgh-pad-l: calc(var(--u) * 40);
		--dgh-pad-r: calc(var(--u) * 30);
		--dgh-logo-w: calc(var(--u) * 260);
		--dgh-logo-y: calc(var(--u) * 52);
		--dgh-nav-ml: calc(var(--u) * 34);
		--dgh-nav-mr: calc(var(--u) * 30);
		--dgh-link-px: calc(var(--u) * 12);
		--dgh-cta-pl: calc(var(--u) * 28);
		--dgh-cta-pr: calc(var(--u) * 26);
	}
}

/* --------------------------------------------------------------------------
   Mobile & tablette (< 1200px) : burger + tiroir latéral
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
	.dgh-shell {
		--dgh-bar-h: 76px;
		--dgh-col-title-ls: .01em;
		--dgh-t-ls: -.01em;
		--dgh-s-ls: 0em;
		height: var(--dgh-bar-h);
	}
	.dgh-bar {
		align-items: center;
		padding: 0 clamp(16px, 4vw, 32px);
	}
	.dgh-deco { width: 46%; }
	.dgh-bar > .dgh-logo {
		width: clamp(150px, 30vw, 196px);
		margin: 0 auto 0 0;
	}
	.dgh-nav { display: none; }
	.dgh-bar > .dgh-cta {
		--u: 0.62px;
		height: 44px;
		margin: 0 14px 0 0;
		padding: 0 18px 0 22px;
		font-size: 15px;
	}

	.dgh-burger {
		position: relative;
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 5px;
		width: 46px;
		height: 46px;
		padding: 0;
		border: 0;
		border-radius: 14px;
		background: linear-gradient(150deg, #e6f2fe 0%, #f1f8ff 100%);
		cursor: pointer;
		transition: background .3s;
	}
	.dgh-burger span {
		display: block;
		width: 20px;
		height: 2px;
		border-radius: 2px;
		background: var(--dgh-navy);
		transition: width .3s var(--dgh-ease);
	}
	.dgh-burger span:nth-child(2) { width: 14px; margin-left: 6px; }
	.dgh-burger:hover span:nth-child(2) { width: 20px; margin-left: 0; }

	.dgh.is-stuck .dgh-bar { height: 64px; }
	.dgh.is-stuck .dgh-bar > .dgh-logo { transform: scale(.9); transform-origin: 0 50%; }
	.dgh.is-stuck .dgh-bar > .dgh-cta,
	.dgh.is-stuck .dgh-bar > .dgh-cta:hover { transform: none; }

	/* le panneau devient un tiroir */
	.dgh-mega {
		position: fixed;
		top: 0;
		left: auto;
		right: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		width: min(440px, 100%);
		border: 0;
		border-radius: 26px 0 0 26px;
		box-shadow: -30px 0 80px -20px rgba(13, 82, 200, .3);
		opacity: 1;
		transform: translateX(104%);
		transition: transform .5s var(--dgh-ease), visibility 0s linear .5s;
		overflow-y: auto;
		overscroll-behavior: contain;
	}
	.dgh.is-open .dgh-bar::after { content: none; }
	.dgh.is-open .dgh-mega { opacity: 1; visibility: hidden; transform: translateX(104%); }
	.dgh.is-drawer .dgh-mega {
		visibility: visible;
		transform: none;
		transition-delay: 0s;
	}

	.dgh-drawer-head {
		position: sticky;
		top: 0;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 16px 20px 14px 24px;
		background: rgba(255, 255, 255, .94);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
	}
	.dgh-drawer-head .dgh-logo { width: 156px; }
	.dgh-close {
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		border-radius: 14px;
		background: linear-gradient(150deg, #e6f2fe 0%, #f1f8ff 100%);
		color: var(--dgh-navy);
		cursor: pointer;
	}
	.dgh-close-ico {
		width: 22px;
		height: 22px;
		fill: none;
		stroke: currentColor;
		stroke-width: 2;
		stroke-linecap: round;
	}

	.dgh-grid { padding: 4px 20px 8px; }
	.dgh-col {
		padding: 0;
		border-top: 1px solid var(--dgh-sep);
		transform: translateX(24px);
		transition: transform .45s var(--dgh-ease);
	}
	.dgh-col:first-child { border-top: 0; }
	.dgh.is-drawer .dgh-col {
		transform: none;
		transition-delay: calc(var(--i) * 40ms + 120ms);
	}

	.dgh-col-head {
		min-height: 60px;
		margin: 0;
		padding-left: 4px;
	}
	.dgh-col-title {
		flex: 1 1 auto;
		padding: 18px 0;
		font-size: 15px;
	}
	.dgh-col.is-current .dgh-col-title { color: var(--dgh-blue); }
	.dgh-col-toggle {
		display: grid;
		place-items: center;
		flex: 0 0 44px;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		border-radius: 12px;
		background: transparent;
		color: var(--dgh-navy);
		cursor: pointer;
		transition: background .25s, color .25s;
	}
	.dgh-col-toggle[aria-expanded="true"] {
		background: #edf5fe;
		color: var(--dgh-blue);
	}
	.dgh-col-chev {
		width: 22px;
		height: 22px;
		fill: none;
		stroke: currentColor;
		stroke-width: 2.2;
		stroke-linecap: round;
		stroke-linejoin: round;
		transition: transform .35s var(--dgh-ease);
	}
	.dgh-col-toggle[aria-expanded="true"] .dgh-col-chev { transform: rotate(180deg); }

	/* accordéon */
	.dgh-fold {
		display: grid;
		grid-template-rows: 0fr;
		visibility: hidden;
		transition: grid-template-rows .4s var(--dgh-ease), visibility 0s linear .4s;
	}
	.dgh-col.is-expanded .dgh-fold {
		grid-template-rows: 1fr;
		visibility: visible;
		transition-delay: 0s;
	}
	.dgh .dgh-list,
	.dgh .dgh-col--airy .dgh-list {
		min-height: 0;
		overflow: hidden;
		gap: 4px;
	}
	.dgh-list li:last-child { padding-bottom: 14px; }
	.dgh-entry {
		gap: 14px;
		padding: 8px 4px;
		border-radius: 14px;
	}
	.dgh-tile {
		flex-basis: 48px;
		width: 48px;
		height: 48px;
		border-radius: 13px;
	}
	.dgh-ico { width: 26px; height: 26px; }
	.dgh-t { font-size: 15px; line-height: 1.3; }
	.dgh-s { margin-top: 2px; font-size: 13.5px; line-height: 1.35; }
	.dgh-entry br { display: none; }
	.dgh-entry:hover .dgh-tile { transform: none; box-shadow: none; }

	.dgh-mega > .dgh-cta--drawer {
		--u: 0.7px;
		display: flex;
		justify-content: center;
		flex: 0 0 auto;
		height: 54px;
		margin: auto 20px 24px;
		padding: 0 24px;
		font-size: 16px;
	}
}

@media (max-width: 639.98px) {
	.dgh-bar > .dgh-cta { display: none; }
	.dgh-shell { --dgh-bar-h: 68px; }
	.dgh-mega { border-radius: 0; }
}

html.dgh-lock,
html.dgh-lock body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.dgh *,
	.dgh *::before,
	.dgh *::after,
	.dgh-veil {
		transition-duration: 0s !important;
		transition-delay: 0s !important;
	}
}

/* ==========================================================================
   DIGIlium — Footer Groupe Trimax Partners
   Le markup est présent tel quel dans chaque page HTML.
   Desktop : cotes en --u = 1px de la maquette (2170px), ramené à la fenêtre.
   ========================================================================== */

@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("assets/fonts/figtree/figtree-latin.woff2") format("woff2"); }

.dgf {
	--u: min(1px, calc(100vw / 2170));

	--dgf-navy: #00006b;
	--dgf-link: #0c1589;
	--dgf-text: #152093;
	--dgf-blue: #187ffb;
	--dgf-hover: #0062fe;
	--dgf-line: #cfe7fc;

	/* bandeau haut */
	--dgf-top-pt: calc(var(--u) * 51);
	--dgf-top-pb: calc(var(--u) * 40);
	--dgf-cols: calc(var(--u) * 597) calc(var(--u) * 225) calc(var(--u) * 312) calc(var(--u) * 258) calc(var(--u) * 304) minmax(0, 1fr);
	--dgf-logo-w: calc(var(--u) * 460);
	--dgf-logo-x: calc(var(--u) * 69);
	--dgf-logo-y: calc(var(--u) * -12);
	--dgf-intro-x: calc(var(--u) * 20);
	--dgf-intro-mt: calc(var(--u) * 26);
	--dgf-intro-fs: calc(var(--u) * 21);
	--dgf-intro-lh: calc(var(--u) * 27.7);
	--dgf-col-px: calc(var(--u) * 34);
	--dgf-title-fs: calc(var(--u) * 19.2);
	--dgf-title-pt: calc(var(--u) * 13);
	--dgf-bar-w: calc(var(--u) * 42);
	--dgf-bar-h: calc(var(--u) * 3);
	--dgf-bar-mt: calc(var(--u) * 20);
	--dgf-link-fs: calc(var(--u) * 20);
	--dgf-links-mt: calc(var(--u) * 37);
	--dgf-links-gap: calc(var(--u) * 24.5);
	--dgf-links-gap-dense: calc(var(--u) * 17);
	--dgf-bubble: calc(var(--u) * 72);
	--dgf-bubble-ico: calc(var(--u) * 41);
	--dgf-contact-mt: calc(var(--u) * 13);
	--dgf-contact-gap: 0px;
	--dgf-contact-x: calc(var(--u) * 31);
	--dgf-contact-fs: calc(var(--u) * 20.4);
	--dgf-contact-lh: calc(var(--u) * 26);

	/* entités */
	--dgf-ents-h: calc(var(--u) * 132);
	--dgf-ents-label-w: calc(var(--u) * 268);
	--dgf-ents-label-x: calc(var(--u) * 53);
	--dgf-ents-label-fs: calc(var(--u) * 16.6);
	--dgf-ents-label-lh: calc(var(--u) * 24);
	--dgf-ents-cols: calc(var(--u) * 199) calc(var(--u) * 202) calc(var(--u) * 189) calc(var(--u) * 196) calc(var(--u) * 191) calc(var(--u) * 195) calc(var(--u) * 208) calc(var(--u) * 231) minmax(0, 1fr);
	--dgf-ent-pt: calc(var(--u) * 28);
	--dgf-ent-px: calc(var(--u) * 18);
	--dgf-ent-ico: calc(var(--u) * 46);
	--dgf-ent-gap: calc(var(--u) * 9);
	--dgf-ent-name-fs: calc(var(--u) * 20.8);
	--dgf-ent-desc-fs: calc(var(--u) * 14.5);
	--dgf-ent-desc-lh: calc(var(--u) * 19);
	--dgf-ent-desc-mt: calc(var(--u) * 10);
	--dgf-ext: calc(var(--u) * 25);
	--dgf-sep-inset: calc(var(--u) * 24);

	/* bas de page */
	--dgf-bottom-h: calc(var(--u) * 114);
	--dgf-bottom-px: calc(var(--u) * 53);
	--dgf-bottom-fs: calc(var(--u) * 16.9);
	--dgf-legal-gap: calc(var(--u) * 38);
	--dgf-mark-fs: calc(var(--u) * 13.8);
	--dgf-mark-w: calc(var(--u) * 173);
	--dgf-up: calc(var(--u) * 46);

	position: relative;
	overflow: hidden;
	background: #fff;
	color: var(--dgf-text);
	font-family: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.dgf *,
.dgf *::before,
.dgf *::after { box-sizing: border-box; }
.dgf a { text-decoration: none; transition: color .25s ease; }
.dgf ul { margin: 0; padding: 0; list-style: none; }
.dgf li { margin: 0; padding: 0; font-weight: inherit; }
.dgf p { margin: 0; font-family: inherit; color: inherit; }
.dgf svg { display: block; overflow: visible; }
.dgf a:focus-visible {
	outline: 2px solid var(--dgf-hover);
	outline-offset: 3px;
	border-radius: 6px;
}
.dgf-sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   Bandeau haut : marque + colonnes + contact
   -------------------------------------------------------------------------- */
.dgf-top {
	position: relative;
	display: grid;
	grid-template-columns: var(--dgf-cols);
	padding: var(--dgf-top-pt) 0 var(--dgf-top-pb);
	background: linear-gradient(180deg, #fff 0%, #fcfdff 100%);
}
.dgf-deco {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
.dgf-brand,
.dgf-col { position: relative; }

.dgf-brand { padding: 0 var(--dgf-brand-pr, 0px) 0 var(--dgf-logo-x); }
.dgf-logo {
	display: block;
	width: var(--dgf-logo-w);
	margin-top: var(--dgf-logo-y);
}
.dgf-logo img {
	display: block;
	width: 100%;
	height: auto;
}
.dgf .dgf-intro {
	margin-top: var(--dgf-intro-mt);
	padding-left: var(--dgf-intro-x);
	font-size: var(--dgf-intro-fs);
	font-weight: 400;
	line-height: var(--dgf-intro-lh);
		color: var(--dgf-text);
}

.dgf-col {
	padding-left: var(--dgf-col-px);
	border-left: 1px solid var(--dgf-line);
}
.dgf .dgf-title {
	margin: 0;
	padding-top: var(--dgf-title-pt);
	font-family: inherit;
	font-size: var(--dgf-title-fs);
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	color: var(--dgf-navy);
	transition: none;
}
.dgf-title::after {
	content: "";
	display: block;
	width: var(--dgf-bar-w);
	height: var(--dgf-bar-h);
	margin-top: var(--dgf-bar-mt);
	border-radius: 3px;
	background: var(--dgf-blue);
}
.dgf .dgf-links {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--dgf-links-gap);
	margin-top: var(--dgf-links-mt);
}
.dgf .dgf-col--dense .dgf-links {
	gap: var(--dgf-links-gap-dense);
	margin-top: calc(var(--dgf-links-mt) - var(--u) * 4);
}
.dgf .dgf-links > li { display: flex; }
.dgf-links a {
	position: relative;
	display: inline-block;
	font-size: var(--dgf-link-fs);
	font-weight: 400;
	line-height: 1;
		white-space: nowrap;
	color: var(--dgf-link);
}
.dgf-links a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -.28em;
	height: 2px;
	border-radius: 2px;
	background: var(--dgf-blue);
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform .35s cubic-bezier(.22, .8, .24, 1);
}
.dgf-links a:hover,
.dgf-links a:focus { color: var(--dgf-hover); }
.dgf-links a:hover::after,
.dgf-links a:focus-visible::after { transform: scaleX(1); }

/* contact */
.dgf .dgf-contact {
	display: flex;
	flex-direction: column;
	gap: var(--dgf-contact-gap);
	margin-top: var(--dgf-contact-mt);
}
/* rythme vertical de la maquette (cercles jointifs puis plus aérés) */
.dgf .dgf-contact > li:nth-child(2) { margin-top: calc(var(--u) * -6); }
.dgf .dgf-contact > li:nth-child(3) { margin: calc(var(--u) * 11) 0 calc(var(--u) * 5); }
.dgf .dgf-contact > li:nth-child(4) { margin-top: calc(var(--u) * 15); }
.dgf-contact a {
	display: flex;
	align-items: center;
	gap: var(--dgf-contact-x);
	color: var(--dgf-link);
}
.dgf-bubble {
	flex: 0 0 var(--dgf-bubble);
	display: grid;
	place-items: center;
	width: var(--dgf-bubble);
	height: var(--dgf-bubble);
	border-radius: 50%;
	background: linear-gradient(150deg, #dcefff 0%, #e8f5fe 100%);
	color: #0b6efd;
	transition: background .3s, color .3s, transform .35s cubic-bezier(.22, .8, .24, 1), box-shadow .35s;
}
.dgf-bubble-ico {
	width: var(--dgf-bubble-ico);
	height: var(--dgf-bubble-ico);
}
.dgf-ctxt {
	font-size: var(--dgf-contact-fs);
	font-weight: 400;
	line-height: var(--dgf-contact-lh);
		color: #0a138e;
	transition: color .25s ease;
}
.dgf-contact a:hover .dgf-bubble,
.dgf-contact a:focus-visible .dgf-bubble {
	background: linear-gradient(140deg, #1d8eff 0%, #0656f5 100%);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 10px 22px -8px rgba(0, 98, 254, .5);
}
.dgf-contact a:hover .dgf-ctxt { color: var(--dgf-hover); }

/* --------------------------------------------------------------------------
   Entités du groupe
   -------------------------------------------------------------------------- */
.dgf-ents {
	display: flex;
	align-items: stretch;
	min-height: var(--dgf-ents-h);
	border-top: 1px solid #d6ecfd;
	border-bottom: 1px solid #d9eefc;
	background: #fff;
}
.dgf .dgf-ents-label {
	flex: 0 0 var(--dgf-ents-label-w);
	align-self: center;
	padding-left: var(--dgf-ents-label-x);
	font-size: var(--dgf-ents-label-fs);
	font-weight: 700;
	line-height: var(--dgf-ents-label-lh);
	color: #000169;
}
.dgf-ents-label::after {
	content: "";
	display: block;
	width: var(--dgf-bar-w);
	height: var(--dgf-bar-h);
	margin-top: calc(var(--u) * 13);
	border-radius: 3px;
	background: var(--dgf-blue);
}
.dgf .dgf-ents-list {
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: var(--dgf-ents-cols);
}
.dgf-ents-list > li { position: relative; }
.dgf-ents-list > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: var(--dgf-sep-inset);
	bottom: var(--dgf-sep-inset);
	width: 1px;
	background: var(--dgf-line);
}
.dgf-ent {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--dgf-ent-gap);
	height: 100%;
	padding: var(--dgf-ent-pt) calc(var(--dgf-ext) + var(--u) * 14) var(--dgf-ent-pt) var(--dgf-ent-px);
	color: inherit;
}
.dgf-ent-ico {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	min-width: var(--dgf-ent-ico);
	height: var(--dgf-ent-ico);
	transition: transform .4s cubic-bezier(.22, .8, .24, 1);
}
.dgf-ent-svg {
	width: var(--dgf-ent-ico);
	height: var(--dgf-ent-ico);
}
.dgf-ent-txt { min-width: 0; }
.dgf-ent-name {
	display: block;
	margin-top: calc(var(--u) * 3);
	font-size: var(--dgf-ent-name-fs);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.02em;
	white-space: nowrap;
	color: #00006a;
}
.dgf-ent-name span { font-weight: 300; }
.dgf-ent-desc {
	display: block;
	margin-top: var(--dgf-ent-desc-mt);
	font-size: var(--dgf-ent-desc-fs);
	font-weight: 400;
	line-height: var(--dgf-ent-desc-lh);
	white-space: nowrap;
	color: #202c96;
}
.dgf-ext {
	position: absolute;
	right: calc(var(--u) * 12);
	bottom: calc(var(--u) * 26);
	display: grid;
	place-items: center;
	width: var(--dgf-ext);
	height: var(--dgf-ext);
	border-radius: calc(var(--u) * 7);
	background: #e8f6fd;
	color: #0266fc;
	transition: background .3s, color .3s, transform .35s cubic-bezier(.22, .8, .24, 1);
}
.dgf-ext-ico {
	width: calc(var(--u) * 14);
	height: calc(var(--u) * 14);
}
.dgf-ent:hover .dgf-ent-ico { transform: translateY(-3px) scale(1.06); }
.dgf-ent:hover .dgf-ext,
.dgf-ent:focus-visible .dgf-ext {
	background: #0b6efd;
	color: #fff;
	transform: translate(2px, -2px);
}

/* --------------------------------------------------------------------------
   Bas de page
   -------------------------------------------------------------------------- */
.dgf-bottom {
	display: flex;
	align-items: center;
	min-height: var(--dgf-bottom-h);
	padding: 0 var(--dgf-bottom-px);
	background: #fdfeff;
	font-size: var(--dgf-bottom-fs);
	line-height: 1.3;
	color: #101f96;
}
.dgf .dgf-copy { white-space: nowrap; }
.dgf .dgf-legal { display: flex; align-items: center; }
.dgf-legal li {
	display: flex;
	align-items: center;
	margin-left: var(--dgf-legal-gap);
}
.dgf-legal li::before {
	content: "";
	width: 1px;
	height: 1.15em;
	margin-right: var(--dgf-legal-gap);
	background: #5a68b8;
}
.dgf-legal a,
.dgf-up { color: #101f96; white-space: nowrap; }
.dgf-legal a:hover,
.dgf-legal a:focus { color: var(--dgf-hover); }

.dgf-mark {
	display: flex;
	align-items: center;
	gap: calc(var(--u) * 22);
	margin-left: auto;
	font-size: var(--dgf-mark-fs);
	white-space: nowrap;
}
.dgf-mark img {
	display: block;
	width: var(--dgf-mark-w);
	height: auto;
}
.dgf-up {
	display: inline-flex;
	align-items: center;
	gap: calc(var(--u) * 20);
	margin-left: calc(var(--u) * 33);
}
.dgf-up-btn {
	display: grid;
	place-items: center;
	width: var(--dgf-up);
	height: var(--dgf-up);
	border-radius: 50%;
	background: linear-gradient(150deg, #dcefff 0%, #e9f5fe 100%);
	color: #0b6efd;
	transition: background .3s, color .3s, transform .35s cubic-bezier(.22, .8, .24, 1);
}
.dgf-up-ico {
	width: calc(var(--u) * 24);
	height: calc(var(--u) * 24);
}
.dgf-up:hover,
.dgf-up:focus { color: var(--dgf-hover); }
.dgf-up:hover .dgf-up-btn {
	background: linear-gradient(140deg, #1d8eff 0%, #0656f5 100%);
	color: #fff;
	transform: translateY(-3px);
}

/* --------------------------------------------------------------------------
   Desktop compact (1200–1599) : tailles plancher, entités sur 2 rangées
   -------------------------------------------------------------------------- */
@media (max-width: 1599.98px) {
	.dgf {
		--u: .74px;
		--dgf-cols: minmax(0, 1.45fr) minmax(0, .9fr) minmax(0, 1.2fr) minmax(0, .95fr) minmax(0, 1.15fr) minmax(0, 1.55fr);
		--dgf-logo-w: min(100%, 300px);
		--dgf-logo-x: clamp(20px, 3vw, 48px);
		--dgf-brand-pr: clamp(28px, 3vw, 48px);
		--dgf-logo-y: 0px;
		--dgf-intro-x: 0px;
		--dgf-intro-fs: 15px;
		--dgf-intro-lh: 1.45;
		--dgf-col-px: clamp(16px, 1.8vw, 26px);
		--dgf-title-fs: 15px;
		--dgf-link-fs: 15px;
		--dgf-contact-fs: 15px;
		--dgf-contact-lh: 1.4;
		--dgf-bubble: 50px;
		--dgf-bubble-ico: 23px;
		--dgf-contact-x: 16px;
		--dgf-ent-name-fs: clamp(11.5px, .92vw, 15px);
		--dgf-ent-desc-fs: clamp(10.5px, .8vw, 12.5px);
		--dgf-ent-desc-lh: 1.35;
		--dgf-ent-desc-mt: 5px;
		--dgf-ent-ico: clamp(20px, 1.75vw, 28px);
		--dgf-ent-gap: clamp(5px, .5vw, 8px);
		--dgf-ent-px: clamp(8px, .8vw, 13px);
		--dgf-ents-label-fs: clamp(12px, .95vw, 14.5px);
		--dgf-ents-label-lh: 1.35;
		--dgf-bottom-fs: clamp(11px, .9vw, 14px);
		--dgf-legal-gap: clamp(7px, 1.2vw, 22px);
		--dgf-mark-fs: clamp(10px, .8vw, 13px);
		--dgf-mark-w: clamp(76px, 7.6vw, 125px);
		--dgf-up: clamp(28px, 2.3vw, 36px);
	}
	.dgf-intro br { display: none; }
	.dgf-intro { max-width: 34ch; }
	.dgf-links a { white-space: normal; line-height: 1.25; }
	/* entités : toujours sur une seule ligne, tailles fluides */
	.dgf .dgf-ents-label {
		flex: 0 0 auto;
		padding: 0 clamp(12px, 1.3vw, 22px) 0 var(--dgf-logo-x);
	}
	.dgf .dgf-ents-list {
		/* DIGIlium : icône et « Développement » plus larges */
		grid-template-columns: repeat(8, minmax(0, 1fr)) minmax(0, 1.12fr);
		padding-right: clamp(10px, 1.6vw, 26px);
	}
	.dgf-ent { padding: 22px 6px 22px var(--dgf-ent-px); }
	/* pas la place pour la pastille au repos : elle apparaît au survol */
	.dgf-ext {
		top: 8px;
		right: 6px;
		bottom: auto;
		width: 20px;
		height: 20px;
		border-radius: 5px;
		opacity: 0;
		transition: opacity .25s ease, background .3s, color .3s;
	}
	.dgf-ext-ico { width: 11px; height: 11px; }
	.dgf-ent:hover .dgf-ext,
	.dgf-ent:focus-visible .dgf-ext { opacity: 1; transform: none; }
	/* bas de page : une seule ligne, tailles fluides */
	.dgf-bottom { padding: 14px clamp(16px, 2.4vw, 40px); }
	.dgf-mark { gap: clamp(8px, .9vw, 16px); padding-left: 16px; }
	.dgf-up { gap: clamp(7px, .8vw, 14px); margin-left: clamp(12px, 1.6vw, 26px); }
	.dgf-up-ico {
		width: calc(var(--dgf-up) * .52);
		height: calc(var(--dgf-up) * .52);
	}
}

/* --------------------------------------------------------------------------
   Tablette (< 1200) : marque en tête, colonnes en grille
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
	.dgf {
		--dgf-cols: repeat(4, minmax(0, 1fr));
		--dgf-links-gap: 14px;
		--dgf-links-gap-dense: 12px;
		--dgf-links-mt: 22px;
	}
	.dgf-top {
		row-gap: 36px;
		padding: 44px clamp(20px, 4vw, 48px) 40px;
	}
	.dgf-brand {
		grid-column: 1 / -1;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 16px 40px;
		padding-left: 0;
	}
	.dgf-intro { max-width: 46ch; }
	.dgf-top > nav:nth-of-type(1) { border-left: 0; padding-left: 0; }
	/* entités : plus assez de largeur pour une ligne, passage en grille */
	.dgf {
		--dgf-ent-name-fs: 16px;
		--dgf-ent-desc-fs: 13px;
		--dgf-ent-ico: 34px;
		--dgf-ent-gap: 9px;
		--dgf-ent-px: 16px;
		--dgf-ents-label-fs: 15px;
	}
	.dgf-ents { flex-direction: column; }
	.dgf .dgf-ents-label {
		flex: none;
		align-self: stretch;
		padding: 26px clamp(20px, 4vw, 48px) 6px;
	}
	.dgf-ents-label br { display: none; }
	.dgf .dgf-ents-list {
		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
		padding: 0 clamp(8px, 2vw, 32px) 10px;
	}
	.dgf-ent { padding: 22px calc(var(--dgf-ext) + 14px) 22px var(--dgf-ent-px); }
	.dgf-ext {
		top: auto;
		right: 12px;
		bottom: 22px;
		opacity: 1;
	}
	.dgf-col--contact {
		grid-column: 1 / -1;
		padding-left: 0;
		padding-top: 30px;
		border-left: 0;
		border-top: 1px solid var(--dgf-line);
	}
	.dgf .dgf-contact > li:nth-child(n) { margin: 0; }
	.dgf .dgf-contact {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
		gap: 16px 24px;
		margin-top: 22px;
	}
	.dgf-bottom {
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px 0;
		padding: 18px clamp(20px, 4vw, 48px);
		text-align: center;
	}
	.dgf-mark { padding-left: 0; }
	.dgf-up { margin-left: 26px; }
	.dgf .dgf-legal { flex-wrap: wrap; justify-content: center; }
	.dgf-mark { margin-left: 0; }
	.dgf .dgf-copy { width: 100%; }
	.dgf-legal li:first-child { margin-left: 0; }
	.dgf-legal li:first-child::before { content: none; }
}

@media (max-width: 767.98px) {
	.dgf { --dgf-cols: repeat(2, minmax(0, 1fr)); }
	.dgf-top { row-gap: 32px; }
	.dgf-top > nav:nth-of-type(3) { border-left: 0; padding-left: 0; }
	.dgf .dgf-copy { white-space: normal; }
	.dgf-legal li { margin-left: 14px; }
	.dgf-legal li::before { margin-right: 14px; }
	.dgf-mark { width: 100%; justify-content: center; }
	.dgf-deco { display: none; }
	.dgf-ent { padding-top: 14px; padding-bottom: 14px; }
}

/* le footer porte son propre « Haut de page » : on masque les boutons flottants du template */
.go-top,
#scrollUp { display: none !important; }

@media (prefers-reduced-motion: reduce) {
	.dgf *,
	.dgf *::before,
	.dgf *::after { transition-duration: 0s !important; }
}

/* ==========================================================================
   DIGIlium — Système commun des sections de la page d'accueil
   Chargé AVANT les feuilles de section (hero, expertise, solutions, audiences).
   Une seule source pour : palette, rythme vertical, conteneur, hiérarchie
   eyebrow → titre → chapeau, transitions entre sections, fil conducteur
   et animation d'entrée. Les feuilles de section ne gardent que leur mise en page.

   Pour une nouvelle section : lui donner la classe `dg-section` et les classes
   `dg-eyebrow`, `dg-title`, `dg-lead` ; elle hérite de tout ce qui suit.
   ========================================================================== */

:root {
	/* palette : un fond, une teinte, un fond profond (réservé aux temps forts) */
	--dg-bg: #f4f9fe;
	--dg-bg-rgb: 244 249 254;
	--dg-bg-tint: #eaf3fd;
	--dg-bg-deep: #000a33;
	--dg-white: #fff;

	/* encres (contrastes AA vérifiés sur --dg-bg et blanc) */
	--dg-navy: #000a33;
	--dg-ink: #0b1550;
	--dg-muted: #36447a;
	--dg-eyebrow: #1d2d68;
	--dg-blue: #0062fc;
	--dg-blue-bright: #1a86ff;
	--dg-blue-rgb: 0 98 252;

	/* rythme et conteneur (mise en page empilée, < 1200px) */
	--dg-section-y: clamp(56px, 8vw, 96px);
	--dg-gutter: clamp(20px, 5vw, 48px);
	--dg-stack-gap: 36px;

	/* mouvement : une seule entrée pour toute la page */
	--dg-ease: cubic-bezier(.22, 1, .36, 1);
	--dg-reveal-y: 20px;
	--dg-reveal-dur: 700ms;
	--dg-stagger: 80ms;
}

/* échelle commune : en --u (1px de la maquette) sur desktop, fluide en empilé */
:is(.dgx, .dge, .dgs, .dgq, .dgf, .dg-section) {
	--dg-seam: clamp(96px, calc(var(--u) * 150), 160px);
}
:is(.dgx, .dge, .dgs, .dgq, .dg-section) {
	--dg-edge-x: calc(var(--u) * 96);
	--dg-pad-top: calc(var(--u) * 72);
	/* écart entre le dernier contenu d’une section et le surtitre de la suivante */
	--dg-rhythm: calc(var(--u) * 110);
	--dg-nowrap: nowrap;

	--dg-eyebrow-fs: max(11px, calc(var(--u) * 16.5));
	--dg-eyebrow-ls: .3em;
	--dg-rule-w: calc(var(--u) * 50);
	--dg-rule-gap: calc(var(--u) * 22);

	--dg-title-fs: calc(var(--u) * 54);
	--dg-title-lh: calc(var(--u) * 57);
	--dg-title-ls: -.025em;
	--dg-title-mt: calc(var(--u) * 22);

	--dg-lead-fs: calc(var(--u) * 23.6);
	--dg-lead-lh: calc(var(--u) * 29.5);
	--dg-lead-mt: calc(var(--u) * 16);
	--dg-lead-max: none;
}
@media (max-width: 1199.98px) {
	:is(.dgx, .dge, .dgs, .dgq, .dg-section) {
		--dg-nowrap: normal;
		--dg-eyebrow-fs: 13px;
		--dg-rule-w: 44px;
		--dg-rule-gap: 14px;
		--dg-title-fs: clamp(28px, 5.2vw, 44px);
		--dg-title-lh: 1.12;
		--dg-title-mt: 18px;
		--dg-lead-fs: clamp(16px, 2.3vw, 19px);
		--dg-lead-lh: 1.55;
		--dg-lead-mt: 16px;
		--dg-lead-max: 62ch;
	}
}

/* --------------------------------------------------------------------------
   Conteneur unique : chaque composition fait 1944u, centrée ; au-delà de 2177px
   ses bords se fondent dans le fond de page (aucune coupure verticale)
   -------------------------------------------------------------------------- */
:is(.dgx, .dge, .dgs, .dgq) { background: var(--dg-bg); }
:is(.dgx-stage, .dge-stage, .dgs-stage, .dgq-stage) {
	max-width: calc(var(--u) * 1944);
	margin-inline: auto;
}
@media (min-width: 2178px) {
	:is(.dgx-stage, .dge-stage, .dgs-stage, .dgq-stage) {
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%);
		mask-image: linear-gradient(90deg, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%);
	}
}

/* --------------------------------------------------------------------------
   Hiérarchie des titres : eyebrow → titre → chapeau
   -------------------------------------------------------------------------- */
.dge .dge-kicker,
.dgs .dgs-kicker,
.dgq .dgq-kicker,
.dg-section .dg-eyebrow {
	display: flex;
	align-items: center;
	font-size: var(--dg-eyebrow-fs);
	font-weight: 600;
	line-height: 1;
	letter-spacing: var(--dg-eyebrow-ls);
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--dg-eyebrow);
}
.dge-kicker::after,
.dgs-kicker::after,
.dgq-kicker::after,
.dg-eyebrow::after {
	content: "";
	width: var(--dg-rule-w);
	height: 2px;
	margin-left: var(--dg-rule-gap);
	background: var(--dg-blue);
	transform-origin: 0 50%;
}
.dge .dge-title,
.dgs .dgs-title,
.dgq .dgq-title,
.dg-section .dg-title {
	margin: var(--dg-title-mt) 0 0;
	font-family: inherit;
	font-size: var(--dg-title-fs);
	font-weight: 800;
	line-height: var(--dg-title-lh);
	letter-spacing: var(--dg-title-ls);
	white-space: var(--dg-nowrap);
	text-wrap: balance;
	text-transform: none;
	color: var(--dg-navy);
}
.dge-title span,
.dgs-title span,
.dgq-title span,
.dg-title span { color: var(--dg-blue); }
.dge .dge-lead,
.dgs .dgs-lead,
.dgq .dgq-lead,
.dg-section .dg-lead {
	max-width: var(--dg-lead-max);
	margin-top: var(--dg-lead-mt);
	font-size: var(--dg-lead-fs);
	font-weight: 400;
	line-height: var(--dg-lead-lh);
	white-space: var(--dg-nowrap);
	color: var(--dg-ink);
}

/* --------------------------------------------------------------------------
   Transitions entre sections
   1. Fondu : chaque plaque se dissout, en haut et en bas, dans la teinte de page
      suivant une courbe douce (smoothstep), jamais une rampe linéaire courte.
      Le fondu déborde d'1px : aucun liseré d'arrondi ne peut apparaître.
   2. Lumière : à chaque jonction, une même lueur est centrée sur la limite et
      partagée par les deux sections (une moitié chacune) ; elle alterne
      droite / gauche et fait « couler » la lumière d'une section à l'autre.
   -------------------------------------------------------------------------- */
:root {
	--dg-fade-in: linear-gradient(180deg,
		rgb(var(--dg-bg-rgb)) 0,
		rgb(var(--dg-bg-rgb)) 2px,
		rgb(var(--dg-bg-rgb) / .97) 10%,
		rgb(var(--dg-bg-rgb) / .9) 20%,
		rgb(var(--dg-bg-rgb) / .78) 30%,
		rgb(var(--dg-bg-rgb) / .65) 40%,
		rgb(var(--dg-bg-rgb) / .5) 50%,
		rgb(var(--dg-bg-rgb) / .35) 60%,
		rgb(var(--dg-bg-rgb) / .22) 70%,
		rgb(var(--dg-bg-rgb) / .1) 80%,
		rgb(var(--dg-bg-rgb) / .03) 90%,
		rgb(var(--dg-bg-rgb) / 0) 100%);
	--dg-fade-out: linear-gradient(0deg,
		rgb(var(--dg-bg-rgb)) 0,
		rgb(var(--dg-bg-rgb)) 2px,
		rgb(var(--dg-bg-rgb) / .97) 10%,
		rgb(var(--dg-bg-rgb) / .9) 20%,
		rgb(var(--dg-bg-rgb) / .78) 30%,
		rgb(var(--dg-bg-rgb) / .65) 40%,
		rgb(var(--dg-bg-rgb) / .5) 50%,
		rgb(var(--dg-bg-rgb) / .35) 60%,
		rgb(var(--dg-bg-rgb) / .22) 70%,
		rgb(var(--dg-bg-rgb) / .1) 80%,
		rgb(var(--dg-bg-rgb) / .03) 90%,
		rgb(var(--dg-bg-rgb) / 0) 100%);
	/* lueur de jonction : bleu de marque très dilué */
	--dg-glow: rgb(var(--dg-blue-rgb) / .075);
}
/* position horizontale des lueurs, partagée par les deux sections d'une jonction */
.dgx { --dg-glow-bottom-x: 74%; }
.dge { --dg-glow-top-x: 74%; --dg-glow-bottom-x: 22%; }
.dgs { --dg-glow-top-x: 22%; --dg-glow-bottom-x: 74%; }
.dgq { --dg-glow-top-x: 74%; }

.dge-stage::before,
.dgs-stage::before,
.dgq-stage::before {
	content: "";
	position: absolute;
	inset: -1px 0;
	z-index: 0; /* au-dessus des plaques (z négatif), sous le contenu (positionné, plus tard dans l'arbre) */
	pointer-events: none;
	background:
		radial-gradient(ellipse 34% 100% at var(--dg-glow-top-x, 50%) 0, var(--dg-glow), transparent) top / 100% var(--dg-seam) no-repeat,
		radial-gradient(ellipse 34% 100% at var(--dg-glow-bottom-x, 50%) 100%, var(--dg-glow), transparent) bottom / 100% var(--dg-seam) no-repeat,
		var(--dg-fade-in) top / 100% var(--dg-seam) no-repeat,
		var(--dg-fade-out) bottom / 100% var(--dg-seam) no-repeat;
}
.dgq-stage::before {
	/* le pied de page prend le relais vers le blanc : pas de lueur en bas */
	background:
		radial-gradient(ellipse 34% 100% at var(--dg-glow-top-x) 0, var(--dg-glow), transparent) top / 100% var(--dg-seam) no-repeat,
		var(--dg-fade-in) top / 100% var(--dg-seam) no-repeat,
		var(--dg-fade-out) bottom / 100% var(--dg-seam) no-repeat;
}
/* hero : le fondu bas (et sa moitié de lueur) passe par son voile existant */
.dgx .dgx-fade {
	inset: 0 0 -1px;
	background-image:
		radial-gradient(ellipse 34% 100% at var(--dg-glow-bottom-x) 100%, var(--dg-glow), transparent),
		var(--dg-fade-out),
		radial-gradient(ellipse 40% 60% at 6% 20%, rgba(214, 234, 255, .55), transparent 70%),
		linear-gradient(90deg, #f1f8ff 0%, #f5faff 35%, rgba(245, 250, 255, .9) 39.5%, rgba(245, 250, 255, .55) 44%, rgba(245, 250, 255, .15) 49%, rgba(245, 250, 255, 0) 53%);
	background-size: 100% var(--dg-seam), 100% var(--dg-seam), auto, auto;
	background-position: bottom, bottom, 0 0, 0 0;
	background-repeat: no-repeat;
}
.dgx .dgx-shapes {
	-webkit-mask-image: linear-gradient(0deg, transparent 0, #000 var(--dg-seam));
	mask-image: linear-gradient(0deg, transparent 0, #000 var(--dg-seam));
}
/* pied de page : part de la teinte de page et rejoint le blanc par une courbe douce
   (une rampe linéaire qui s'arrête net laisse un palier visible).
   Limité aux pieds de page qui suivent une section DIGIlium : les autres pages gardent le leur. */
:is(.dgx, .dge, .dgs, .dgq, .dgv, .dgk, .dgo, .dgi) ~ .dgf .dgf-top {
	background:
		linear-gradient(180deg,
			rgb(var(--dg-bg-rgb)) 0,
			rgb(var(--dg-bg-rgb) / .9) calc(var(--dg-seam) * .2),
			rgb(var(--dg-bg-rgb) / .65) calc(var(--dg-seam) * .4),
			rgb(var(--dg-bg-rgb) / .35) calc(var(--dg-seam) * .6),
			rgb(var(--dg-bg-rgb) / .1) calc(var(--dg-seam) * .8),
			rgb(var(--dg-bg-rgb) / 0) var(--dg-seam)) top / 100% calc(var(--dg-seam) * 1.4) no-repeat,
		linear-gradient(180deg, #fff 0%, #fcfdff 100%);
}
/* lueurs de jonction : desktop uniquement (sur écran étroit elles font tache) */
@media (max-width: 1199.98px) {
	:root { --dg-glow: transparent; }
}
:is(.dgx, .dge, .dgs, .dgq, .dgv, .dgk, .dgo, .dgi) ~ .dgf .dgf-deco {
	-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--dg-seam));
	mask-image: linear-gradient(180deg, transparent 0, #000 var(--dg-seam));
}

/* Pages intérieures (portfolio) : mêmes fondus et même lueur alternée qu'à l'accueil.
   Posés à z-index -1 : au-dessus de la plaque, sous le décor animé et le contenu. */
.dgt { --dg-glow-bottom-x: 74%; }
.dgm { --dg-glow-top-x: 74%; --dg-glow-bottom-x: 22%; }
.dgv { --dg-glow-top-x: 22%; }
.dgm-stage::before,
.dgv-stage::before,
.dgt-stage::after,
.dgm-stage::after,
.dgv-stage::after {
	content: "";
	position: absolute;
	z-index: -1;
	left: 0;
	right: 0;
	height: var(--dg-seam);
	pointer-events: none;
}
.dgm-stage::before,
.dgv-stage::before {
	top: -1px;
	background:
		radial-gradient(ellipse 34% 100% at var(--dg-glow-top-x) 0, var(--dg-glow), transparent),
		var(--dg-fade-in);
}
.dgt-stage::after,
.dgm-stage::after {
	bottom: -1px;
	background:
		radial-gradient(ellipse 34% 100% at var(--dg-glow-bottom-x) 100%, var(--dg-glow), transparent),
		var(--dg-fade-out);
}
/* le pied de page prend le relais vers le blanc : pas de lueur */
.dgv-stage::after { bottom: -1px; background: var(--dg-fade-out); }
/* hero : sa plaque (809u) s’arrête avant le bas de la section agrandie ; le fondu couvre aussi ce reste */
.dgt-stage::after {
	--dgt-rest: calc(var(--dg-rhythm) - var(--u) * 42);
	height: calc(var(--dg-seam) + var(--dgt-rest));
	background:
		radial-gradient(ellipse 34% var(--dg-seam) at var(--dg-glow-bottom-x) 100%, var(--dg-glow), transparent),
		var(--dg-fade-out) top / 100% var(--dg-seam) no-repeat,
		linear-gradient(var(--dg-bg), var(--dg-bg)) bottom / 100% calc(var(--dgt-rest) + 2px) no-repeat;
}

/* --------------------------------------------------------------------------
   Animation d'entrée unique : fondu + montée de 20px, 700ms, décalage de 80ms.
   Le script (digilium-system.js) pose `is-armed` puis le remplace par `is-in`.
   Sans script ou avec « mouvement réduit », rien n'est masqué.
   -------------------------------------------------------------------------- */
@keyframes dg-rise {
	from { opacity: 0; translate: 0 var(--dg-reveal-y); }
}

/* ordre d'entrée : textes d'abord, puis visuels */
.dge-content > :nth-child(2), .dgs-content > :nth-child(2), .dgq-content > :nth-child(2) { --i: 1; }
.dge-content > :nth-child(3), .dgs-content > :nth-child(3), .dgq-content > :nth-child(3) { --i: 2; }
.dgs-content > :nth-child(4) { --i: 3; }
.dgs-content > :nth-child(5) { --i: 4; }
.dge-card { --dg-base: 3; }
.dgs-step { --dg-base: 1; }
.dgs-tech > .dgs-kicker { --i: 5; }
.dgs-logo { --dg-base: 5; }
.dgq-card { --dg-base: 2; }
.dgq-hud { --i: 2; }
.dgq-badge { --i: 3; }
.dgq-testi { --i: 4; }

.dge.is-armed :is(.dge-content > *, .dge-card),
.dgs.is-armed :is(.dgs-content > *, .dgs-tech > .dgs-kicker, .dgs-logo, .dgs-step),
.dgq.is-armed :is(.dgq-content > *, .dgq-card, .dgq-hud, .dgq-badge, .dgq-testi) { opacity: 0; }

.dge.is-in :is(.dge-content > *, .dge-card),
.dgs.is-in :is(.dgs-content > *, .dgs-tech > .dgs-kicker, .dgs-logo, .dgs-step),
.dgq.is-in :is(.dgq-content > *, .dgq-card, .dgq-hud, .dgq-badge, .dgq-testi) {
	animation: dg-rise var(--dg-reveal-dur) var(--dg-ease) backwards;
	animation-delay: min(calc(var(--dg-stagger) * (var(--i, 0) + var(--dg-base, 0))), 640ms);
}

@media (prefers-reduced-motion: reduce) {
	.dge.is-in :is(.dge-content > *, .dge-card),
	.dgs.is-in :is(.dgs-content > *, .dgs-tech > .dgs-kicker, .dgs-logo, .dgs-step),
	.dgq.is-in :is(.dgq-content > *, .dgq-card, .dgq-hud, .dgq-badge, .dgq-testi) { animation: none; }
}

/* ==========================================================================
   DIGIlium — Hero de la page d'accueil
   Desktop : cotes en --u = 1px de la maquette (1944 × 809), ramené à la fenêtre.
   ========================================================================== */

@font-face { font-family: "Sacramento"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/sacramento/sacramento-latin.woff2") format("woff2"); }

.dgx {
	--u: min(1.12px, calc(100vw / 1944));

	--dgx-navy: var(--dg-navy);
	--dgx-blue: var(--dg-blue);
	--dgx-text: var(--dg-ink);
	--dgx-muted: var(--dg-muted);
	--dgx-line: #cfe6fc;
	--dgx-ease: var(--dg-ease);

	/* plancher de lisibilité des petits textes */
	--dgx-small: max(12px, calc(var(--u) * 14));

	position: relative;
	color: var(--dgx-text);
	font-family: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.dgx *,
.dgx *::before,
.dgx *::after { box-sizing: border-box; }
.dgx ul { margin: 0; padding: 0; list-style: none; }
.dgx li { margin: 0; padding: 0; font-weight: inherit; }
.dgx p { margin: 0; font-family: inherit; color: inherit; }
.dgx a { text-decoration: none; }
.dgx a:focus-visible {
	outline: 2px solid var(--dgx-blue);
	outline-offset: 3px;
}
.dgx svg { display: block; overflow: visible; }
.dgx-sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.dgx-stage {
	position: relative;
	height: calc(var(--u) * 809);
	overflow: hidden;
	background: linear-gradient(180deg, var(--dg-bg-tint) 0%, var(--dg-bg) 100%);
}

/* photo + voiles */
.dgx-photo {
	position: absolute;
	left: calc(var(--u) * 699);
	top: calc(var(--u) * -107);
	width: calc(var(--u) * 1352);
}
.dgx-photo img {
	display: block;
	width: 100%;
	height: auto;
}
.dgx-fade {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 40% 60% at 6% 20%, rgba(214, 234, 255, .55), transparent 70%),
		linear-gradient(90deg, #f1f8ff 0%, #f5faff 35%, rgba(245, 250, 255, .9) 39.5%, rgba(245, 250, 255, .55) 44%, rgba(245, 250, 255, .15) 49%, rgba(245, 250, 255, 0) 53%);
}
.dgx-shapes,
.dgx-net {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   Cartes « verre » posées sur la photo
   -------------------------------------------------------------------------- */
@property --dgx-spin {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}
.dgx-card {
	/* pilotés par digilium-hero.js : inclinaison et position du reflet */
	--rx: 0deg;
	--ry: 0deg;
	--mx: 50%;
	--my: 0%;

	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: calc(var(--u) * 10) max(10px, calc(var(--u) * 12));
	border: 1px solid rgba(160, 212, 255, .7);
	border-radius: calc(var(--u) * 18);
	background: linear-gradient(160deg, rgba(40, 132, 235, .84) 0%, rgba(6, 82, 196, .8) 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .25),
		0 0 calc(var(--u) * 26) rgba(70, 170, 255, .55),
		0 calc(var(--u) * 18) calc(var(--u) * 40) rgba(0, 40, 120, .25);
	-webkit-backdrop-filter: blur(7px) saturate(140%);
	backdrop-filter: blur(7px) saturate(140%);
	color: #fff;
	text-align: center;
	transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
	transition:
		transform .7s var(--dgx-ease),
		scale .5s var(--dgx-ease),
		box-shadow .45s ease,
		border-color .45s ease,
		opacity .45s ease,
		filter .45s ease;
	animation: dgx-float 7s ease-in-out infinite;
}
.dgx a.dgx-card:hover,
.dgx a.dgx-card:focus { color: #fff; }
/* pendant le suivi du curseur, l'inclinaison répond sans traîner */
.dgx-card.is-tilting {
	transition:
		transform .14s linear,
		scale .5s var(--dgx-ease),
		box-shadow .45s ease,
		border-color .45s ease,
		opacity .45s ease,
		filter .45s ease;
}

/* reflet lumineux qui suit la souris */
.dgx-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background:
		radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .3) 0%, rgba(150, 210, 255, .12) 28%, transparent 58%),
		linear-gradient(160deg, rgba(0, 60, 180, .18), rgba(0, 40, 140, .28));
	opacity: 0;
	transition: opacity .45s ease;
}
/* liseré lumineux qui fait le tour de la carte */
.dgx-card::after {
	content: "";
	position: absolute;
	inset: -1.5px;
	padding: 2px;
	border-radius: inherit;
	background: conic-gradient(from var(--dgx-spin), rgba(120, 200, 255, .25) 0 50%, rgba(140, 215, 255, .95) 66%, #fff 75%, rgba(140, 215, 255, .95) 84%, rgba(120, 200, 255, .25) 100%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	opacity: 0;
	pointer-events: none;
	transition: opacity .45s ease;
	animation: dgx-orbit 3.2s linear infinite paused;
}
@keyframes dgx-orbit {
	to { --dgx-spin: 360deg; }
}

.dgx-card:hover,
.dgx-card:focus-visible {
	scale: 1.045;
	border-color: rgba(205, 238, 255, .95);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .45),
		0 0 0 1px rgba(255, 255, 255, .18),
		0 0 calc(var(--u) * 34) rgba(20, 135, 255, .85),
		0 0 calc(var(--u) * 80) rgba(40, 150, 255, .45),
		0 calc(var(--u) * 34) calc(var(--u) * 60) calc(var(--u) * -8) rgba(0, 30, 100, .5);
	animation-play-state: paused;
}
.dgx-card:hover::before,
.dgx-card:focus-visible::before { opacity: 1; }
.dgx-card:hover::after,
.dgx-card:focus-visible::after {
	opacity: 1;
	animation-play-state: running;
}
.dgx-card:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* les autres cartes s'effacent pour guider le regard */
.dgx-cards:hover .dgx-card:not(:hover) {
	opacity: .74;
	filter: saturate(.55) brightness(.92);
}
/* les lignes du réseau s'illuminent */
.dgx-net { transition: filter .5s ease, opacity .5s ease; }
.dgx-stage:has(.dgx-card:hover) .dgx-net {
	filter: brightness(1.45) drop-shadow(0 0 4px rgba(150, 215, 255, .9));
}
.dgx-card--dev { left: calc(var(--u) * 894); top: calc(var(--u) * 47); width: calc(var(--u) * 209); height: calc(var(--u) * 194); }
.dgx-card--cloud { left: calc(var(--u) * 742); top: calc(var(--u) * 238); width: calc(var(--u) * 198); height: calc(var(--u) * 159); animation-delay: -2.2s; }
.dgx-card--ia { left: calc(var(--u) * 1395); top: calc(var(--u) * 58); width: calc(var(--u) * 211); height: calc(var(--u) * 185); animation-delay: -4.1s; }
.dgx-card--data { left: calc(var(--u) * 1655); top: calc(var(--u) * 185); width: calc(var(--u) * 193); height: calc(var(--u) * 165); animation-delay: -5.6s; }
/* flottement sur `translate` : `transform` reste libre pour l'inclinaison */
@keyframes dgx-float {
	50% { translate: 0 calc(var(--u) * -6); }
}
.dgx-card-ico {
	flex: 0 0 auto;
	width: calc(var(--u) * 46);
	height: calc(var(--u) * 46);
	margin-bottom: calc(var(--u) * 14);
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	/* tracés normalisés (pathLength="1") : l'icône se redessine au survol */
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
	transition: transform .55s var(--dgx-ease), filter .55s ease;
}
.dgx-card:hover .dgx-card-ico,
.dgx-card:focus-visible .dgx-card-ico {
	transform: translateY(calc(var(--u) * -4)) scale(1.1);
	filter: drop-shadow(0 0 calc(var(--u) * 9) rgba(205, 238, 255, .95));
	animation: dgx-draw 1.1s var(--dgx-ease) both;
}
@keyframes dgx-draw {
	from { stroke-dashoffset: 1; }
	to { stroke-dashoffset: 0; }
}
.dgx-card strong,
.dgx-card span { transition: transform .55s var(--dgx-ease); }
.dgx-card:hover strong,
.dgx-card:focus-visible strong { transform: translateY(calc(var(--u) * -2)); }
.dgx-card:hover span,
.dgx-card:focus-visible span { transform: translateY(calc(var(--u) * -1)); }
.dgx-card strong {
	display: block;
	font-size: max(12px, calc(var(--u) * 17.5));
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: -.01em;
}
.dgx-card span {
	display: block;
	margin-top: calc(var(--u) * 9);
	font-size: max(11.5px, calc(var(--u) * 16));
	font-weight: 400;
	line-height: 1.15;
	opacity: .96;
}
/* lignes équilibrées quand le texte se replie (écrans moyens) */
.dgx-card strong,
.dgx-card span { text-wrap: balance; }

/* signature manuscrite sur la vague bleue */
/* écriture fine et penchée de la maquette : rotation + inclinaison supplémentaire */
.dgx-script {
	position: absolute;
	left: calc(var(--u) * 1579);
	top: calc(var(--u) * 612);
	width: calc(var(--u) * 420);
	white-space: nowrap;
	font-family: "Sacramento", cursive;
	font-size: calc(var(--u) * 45);
	line-height: .84;
	color: #fff;
	text-align: center;
	transform: rotate(-12deg) skewX(-7deg) scaleX(.8);
	transform-origin: 50% 50%;
	text-shadow: 0 0 1px rgba(255, 255, 255, .6), 0 2px 10px rgba(0, 30, 90, .3);
}
.dgx .dgx-script {
	font-family: "Sacramento", cursive;
	color: #fff;
}
.dgx-script-line {
	width: calc(var(--u) * 165);
	height: calc(var(--u) * 13);
	margin: calc(var(--u) * 20) auto 0;
	fill: #fff;
}

/* --------------------------------------------------------------------------
   Bloc texte
   -------------------------------------------------------------------------- */
.dgx-content {
	position: absolute;
	left: var(--dg-edge-x);
	top: calc(var(--u) * 117);
}
.dgx .dgx-kicker {
	font-size: var(--dg-eyebrow-fs);
	font-weight: 600;
	line-height: 1;
	letter-spacing: var(--dg-eyebrow-ls);
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--dg-eyebrow);
}
.dgx-kicker i {
	margin: 0 .72em 0 .37em;
	font-style: normal;
	font-weight: 400;
	color: #3985fd;
}
.dgx .dgx-title {
	margin: calc(var(--u) * 22.5) 0 0;
	font-family: inherit;
	font-size: calc(var(--u) * 63);
	font-weight: 800;
	line-height: calc(var(--u) * 67);
	letter-spacing: var(--dg-title-ls);
	white-space: nowrap;
	color: var(--dgx-navy);
	transition: none;
}
.dgx-title span { color: var(--dgx-blue); }
.dgx .dgx-lead {
	margin-top: calc(var(--u) * 18.5);
	font-size: var(--dg-lead-fs);
	font-weight: 400;
	line-height: var(--dg-lead-lh);
	white-space: nowrap;
	color: var(--dgx-text);
}

.dgx-actions {
	display: flex;
	gap: calc(var(--u) * 23);
	margin-top: calc(var(--u) * 22);
}
.dgx-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	height: calc(var(--u) * 68);
	overflow: hidden;
	border-radius: 999px;
	font-size: max(13px, calc(var(--u) * 19.5));
	font-weight: 600;
	white-space: nowrap;
	transition: transform .35s var(--dgx-ease), box-shadow .35s, background .3s, color .3s;
}
.dgx-btn--primary {
	width: calc(var(--u) * 330);
	padding: 0 calc(var(--u) * 40) 0 calc(var(--u) * 42);
	background: linear-gradient(90deg, #0062fe 0%, #0068fe 60%, #127bff 100%);
	box-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 30) calc(var(--u) * -10) rgba(0, 98, 254, .55);
	color: #fff;
}
.dgx-btn--ghost {
	width: calc(var(--u) * 332);
	padding: 0 calc(var(--u) * 34) 0 calc(var(--u) * 35);
	border: 2px solid #308afd;
	background: rgba(255, 255, 255, .75);
	color: var(--dgx-blue);
}
.dgx-btn::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%);
	transform: translateX(-110%);
	transition: transform .9s var(--dgx-ease);
	pointer-events: none;
}
.dgx-btn:hover { transform: translateY(-2px); }
.dgx-btn:hover::after { transform: translateX(110%); }
.dgx-btn--primary:hover,
.dgx-btn--primary:focus {
	color: #fff;
	box-shadow: 0 calc(var(--u) * 20) calc(var(--u) * 36) calc(var(--u) * -10) rgba(0, 98, 254, .65);
}
.dgx-btn--ghost:hover,
.dgx-btn--ghost:focus {
	background: #eaf4ff;
	color: var(--dgx-blue);
}
.dgx-btn-ico {
	width: calc(var(--u) * 24);
	height: calc(var(--u) * 24);
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .35s var(--dgx-ease);
}
.dgx-btn:hover .dgx-btn-ico { transform: translateX(calc(var(--u) * 5)); }

/* --------------------------------------------------------------------------
   Atouts + entités
   -------------------------------------------------------------------------- */
.dgx .dgx-feats {
	position: absolute;
	left: calc(var(--u) * 96);
	top: calc(var(--u) * 592);
	display: grid;
	grid-template-columns: calc(var(--u) * 277) calc(var(--u) * 305) calc(var(--u) * 332) calc(var(--u) * 320);
}
.dgx-feats > li {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: calc(var(--u) * 23);
}
.dgx-feats > li + li { padding-left: calc(var(--u) * 25); }
.dgx-feats > li + li::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(var(--u) * 10);
	bottom: calc(var(--u) * 6);
	width: 1px;
	background: var(--dgx-line);
}
.dgx-feat-ico {
	flex: 0 0 calc(var(--u) * 79);
	display: grid;
	place-items: center;
	width: calc(var(--u) * 79);
	height: calc(var(--u) * 79);
	border-radius: 50%;
	background: linear-gradient(150deg, #e2f2fe 0%, #edf7ff 100%);
	color: #0059fc;
	transition: background .3s, color .3s, transform .4s var(--dgx-ease);
}
.dgx-feat-ico svg {
	width: calc(var(--u) * 40);
	height: calc(var(--u) * 40);
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.dgx-feats > li:hover .dgx-feat-ico {
	background: linear-gradient(140deg, #1d8eff 0%, #0656f5 100%);
	color: #fff;
	transform: translateY(-3px);
}
.dgx-feat-txt { margin-top: calc(var(--u) * 11); }
.dgx-feat-txt strong {
	display: block;
	font-size: max(13px, calc(var(--u) * 17.5));
	font-weight: 700;
	line-height: calc(var(--u) * 22);
	color: #01033b;
}
.dgx-feat-txt span {
	display: block;
	margin-top: calc(var(--u) * 4);
	font-size: var(--dgx-small);
	line-height: 1.3;
	color: #37457a;
}

.dgx-ents {
	position: absolute;
	left: calc(var(--u) * 105);
	top: calc(var(--u) * 716);
	display: flex;
	align-items: flex-start;
}
.dgx .dgx-ents-list {
	display: grid;
	grid-template-columns: calc(var(--u) * 143) calc(var(--u) * 218) calc(var(--u) * 225) calc(var(--u) * 187) calc(var(--u) * 176);
	margin-top: calc(var(--u) * 5.5);
}
.dgx-ents-list > li { position: relative; }
.dgx-ents-list > li + li { padding-left: calc(var(--u) * 33); }
.dgx-ents-list > li + li::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(var(--u) * 2);
	bottom: calc(var(--u) * -4);
	width: 1px;
	background: #b9dcfb;
}
.dgx-ents-list a {
	display: block;
	color: inherit;
}
.dgx-ents-list strong {
	display: block;
	font-size: calc(var(--u) * 21.5);
	font-weight: 800;
	line-height: calc(var(--u) * 28);
	letter-spacing: -.01em;
	color: #00013b;
	transition: color .25s;
}
.dgx-ents-list .dgx-ent-big { font-size: calc(var(--u) * 27.7); }
.dgx-ents-list em {
	font-style: normal;
	font-weight: 400;
}
.dgx-ents-list a span {
	display: block;
	margin-top: calc(var(--u) * 3.5);
	font-size: var(--dgx-small);
	line-height: calc(var(--u) * 18);
	white-space: nowrap;
	color: var(--dgx-muted);
}
.dgx-ents-list a:hover strong { color: var(--dgx-blue); }

.dgx-pill {
	position: absolute;
	left: calc(var(--u) * 968);
	top: 0;
	display: flex;
	align-items: center;
	gap: calc(var(--u) * 16);
	width: calc(var(--u) * 276);
	height: calc(var(--u) * 73);
	padding-left: calc(var(--u) * 20);
	border-radius: 999px;
	background: linear-gradient(90deg, #dbeffe 0%, #d0e9fd 100%);
	color: #1c356b;
	font-size: max(12px, calc(var(--u) * 15.5));
	line-height: 1.28;
	transition: background .3s, transform .35s var(--dgx-ease);
}
.dgx-pill:hover,
.dgx-pill:focus { color: #1c356b; background: linear-gradient(90deg, #cfe8fe 0%, #c2e1fd 100%); }
.dgx-pill-ico {
	flex: 0 0 auto;
	width: calc(var(--u) * 24);
	height: calc(var(--u) * 24);
	fill: none;
	stroke: #0059fe;
	stroke-width: 2.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .35s var(--dgx-ease);
}
.dgx-pill:hover .dgx-pill-ico { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   Desktop compact (1200–1599) : petits textes autorisés à passer à la ligne
   -------------------------------------------------------------------------- */
@media (max-width: 1599.98px) {
	.dgx-feat-txt span,
	.dgx-ents-list a span { white-space: normal; }
	.dgx-card span br { display: none; }
}

/* --------------------------------------------------------------------------
   Tablette & mobile (< 1200) : mise en page empilée
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
	.dgx { --u: .62px; --dgx-small: 13px; }
	.dgx-stage {
		display: flex;
		flex-direction: column;
		gap: var(--dg-stack-gap);
		height: auto;
		padding: 0 var(--dg-gutter) var(--dg-section-y);
	}
	.dgx .dgx-fade,
	.dgx .dgx-shapes,
	.dgx .dgx-net,
	.dgx .dgx-script { display: none; }
	/* photo plein cadre, carte de texte qui remonte dessus, carrousel des domaines, puis le reste */
	.dgx-photo { order: 1; }
	.dgx-content { order: 2; }
	.dgx .dgx-cards { order: 3; }
	.dgx .dgx-cards + .dg-rail-dots { order: 4; }
	.dgx .dgx-feats { order: 5; }
	.dgx-ents { order: 6; }
	.dgx .dgx-feats,
	.dgx-ents { position: static; }

	/* carte blanche qui remonte sur la photo, à la manière visioassur.pro */
	.dgx-content {
		position: relative;
		left: auto;
		top: auto;
		z-index: 2;
		width: 100%;
		max-width: 640px;
		margin: clamp(-128px, -22vw, -76px) auto 0;
		padding: 34px 28px 30px;
		border-radius: 26px;
		background: #fff;
		box-shadow: 0 30px 60px -18px rgba(4, 18, 46, .32), 0 2px 8px rgba(4, 18, 46, .08);
	}

	/* carrousel tactile des 4 domaines, posé juste sous la photo */
	.dgx .dgx-cards {
		display: flex;
		position: static;
		gap: 14px;
		width: auto;
		margin: 0 calc(var(--dg-gutter) * -1);
		padding: 2px var(--dg-gutter) 6px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--dg-gutter);
		-ms-overflow-style: none;
		scrollbar-width: none;
	}
	.dgx .dgx-cards::-webkit-scrollbar { display: none; }
	.dgx .dgx-cards > li { flex: 0 0 auto; scroll-snap-align: start; }
	.dgx .dgx-card,
	.dgx .dgx-card--dev,
	.dgx .dgx-card--cloud,
	.dgx .dgx-card--ia,
	.dgx .dgx-card--data {
		position: static;
		width: 180px;
		height: 150px;
		animation: none;
	}
	.dgx .dgx-title {
		font-size: clamp(32px, 6vw, 52px);
		line-height: 1.08;
		white-space: normal;
	}
	.dgx .dgx-kicker { white-space: normal; line-height: 1.6; }
	.dgx .dgx-lead {
		font-size: clamp(16px, 2.3vw, 19px);
		line-height: 1.5;
		white-space: normal;
		max-width: 60ch;
	}
	.dgx-lead br,
	.dgx-title br { display: none; }
	.dgx-title span::before { content: " "; }
	.dgx-actions { flex-wrap: wrap; gap: 14px; margin-top: 24px; }
	.dgx-btn,
	.dgx-btn--primary,
	.dgx-btn--ghost {
		width: auto;
		height: 56px;
		gap: 22px;
		padding: 0 26px 0 30px;
		font-size: 16px;
	}
	.dgx-btn-ico { width: 20px; height: 20px; }
	.dgx-photo {
		position: relative;
		left: auto;
		top: auto;
		width: calc(100% + 2 * var(--dg-gutter));
		margin: 0 calc(var(--dg-gutter) * -1);
		overflow: hidden;
		border-radius: 0 0 28px 28px;
		box-shadow: none;
	}
	.dgx-photo img {
		display: block;
		width: 100%;
		height: clamp(300px, 78vw, 560px);
		aspect-ratio: auto;
		object-fit: cover;
		object-position: 62% 32%;
	}
	/* assombrit le bas de la photo pour que la carte blanche s'y pose en douceur */
	.dgx-photo::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg, transparent 44%, rgba(4, 18, 46, .4) 75%, rgba(4, 18, 46, .58) 100%);
		pointer-events: none;
	}
	.dgx .dgx-feats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}
	.dgx-feats > li + li { padding-left: 0; }
	.dgx-feats > li + li::before { content: none; }
	.dgx-feat-ico { flex-basis: 56px; width: 56px; height: 56px; }
	.dgx-feat-ico svg { width: 28px; height: 28px; }
	.dgx-feat-txt { margin-top: 4px; }
	.dgx-feat-txt strong { font-size: 16px; line-height: 1.3; }
	.dgx-feat-txt strong br { display: none; }
	.dgx-ents { flex-direction: column; align-items: stretch; gap: 20px; }
	.dgx .dgx-ents-list {
		grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
		gap: 18px 0;
		margin: 0;
	}
	.dgx .dgx-ents-list > li {
		padding: 0 14px;
		border-left: 2px solid #cfe6fc;
	}
	.dgx-ents-list > li + li::before { content: none; }
	.dgx-ents-list strong,
	.dgx-ents-list .dgx-ent-big { font-size: 19px; line-height: 1.3; }
	.dgx-ents-list a span { margin-top: 2px; line-height: 1.35; }
	.dgx-pill {
		position: static;
		width: auto;
		max-width: 360px;
		height: 60px;
		gap: 12px;
		padding: 0 24px 0 18px;
		font-size: 14px;
	}
	.dgx-pill-ico { width: 20px; height: 20px; }
}
@media (max-width: 639.98px) {
	.dgx .dgx-feats { grid-template-columns: 1fr; }
	.dgx-actions .dgx-btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.dgx-card,
	.dgx-card::after,
	.dgx-card:hover .dgx-card-ico { animation: none; }
	.dgx-card:hover { scale: 1; }
	.dgx *,
	.dgx *::before,
	.dgx *::after { transition-duration: 0s !important; }
}

/* ==========================================================================
   DIGIlium — Section « Notre expertise » (sous le hero)
   Desktop : cotes en --u = 1px de la maquette (1944 × 809), ramené à la fenêtre.
   ========================================================================== */


.dge {
	--u: min(1.12px, calc(100vw / 1944));

	--dge-navy: var(--dg-navy);
	--dge-blue: var(--dg-blue);
	--dge-link: var(--dg-blue);
	--dge-text: var(--dg-ink);
	--dge-muted: var(--dg-muted);
	--dge-ease: var(--dg-ease);

	/* planchers de lisibilité des petits textes */
	--dge-small: max(13px, calc(var(--u) * 19.8));

	position: relative;
	color: var(--dge-text);
	font-family: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.dge *,
.dge *::before,
.dge *::after { box-sizing: border-box; }
.dge ul { margin: 0; padding: 0; list-style: none; }
.dge li { margin: 0; font-weight: inherit; }
.dge p { margin: 0; font-family: inherit; color: inherit; }
.dge a { text-decoration: none; }
.dge a:focus-visible {
	outline: 2px solid var(--dge-blue);
	outline-offset: 3px;
}
.dge svg { display: block; overflow: visible; }
.dge-sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}
.dge-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.dge-stage {
	position: relative;
	isolation: isolate;
	min-height: calc(var(--u) * 809);
	padding: calc(var(--u) * 379) 0 calc(var(--u) * 51) calc(var(--u) * 62);
	overflow: hidden;
	background:
		radial-gradient(ellipse calc(var(--u) * 360) calc(var(--u) * 200) at calc(var(--u) * 820) calc(var(--u) * 40), rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 70%),
		var(--dg-bg);
}

/* photo du parcours + décor */
.dge-photo {
	position: absolute;
	z-index: -1;
	left: calc(var(--u) * 742);
	top: calc(var(--u) * -24);
	width: calc(var(--u) * 1202);
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%), linear-gradient(180deg, #000 86%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(90deg, transparent 0, #000 22%), linear-gradient(180deg, #000 86%, transparent 100%);
	mask-composite: intersect;
}
.dge-photo img {
	display: block;
	width: 100%;
	height: auto;
}
.dge-waves {
	position: absolute;
	z-index: -2;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   Bloc texte
   -------------------------------------------------------------------------- */
.dge-content {
	position: absolute;
	left: var(--dg-edge-x);
	top: var(--dg-pad-top);
}

/* --------------------------------------------------------------------------
   Cartes
   -------------------------------------------------------------------------- */
.dge-cards {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: calc(var(--u) * 19.6);
	width: calc(var(--u) * 1830);
}
.dge-card {
	/* reflet piloté par digilium-system.js */
	--mx: 50%;
	--my: 0%;

	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-height: calc(var(--u) * 379);
	padding: calc(var(--u) * 9) calc(var(--u) * 12) calc(var(--u) * 28) calc(var(--u) * 43);
	border: 1px solid rgba(255, 255, 255, .95);
	border-radius: calc(var(--u) * 24);
	background: linear-gradient(180deg, rgba(250, 252, 255, .9) 0%, rgba(248, 251, 254, .94) 100%);
	box-shadow:
		0 0 0 calc(var(--u) * 5) rgba(255, 255, 255, .35),
		0 calc(var(--u) * 22) calc(var(--u) * 44) calc(var(--u) * -18) rgba(24, 84, 170, .2),
		0 calc(var(--u) * 2) calc(var(--u) * 10) rgba(24, 84, 170, .05);
	-webkit-backdrop-filter: blur(14px) saturate(130%);
	backdrop-filter: blur(14px) saturate(130%);
	transition:
		transform .55s var(--dge-ease),
		box-shadow .45s ease,
		border-color .45s ease;
}
/* halo qui suit la souris */
.dge-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: radial-gradient(circle calc(var(--u) * 260) at var(--mx) var(--my), rgba(2, 111, 253, .09), transparent 70%);
	opacity: 0;
	transition: opacity .45s ease;
}
.dge-card:hover,
.dge-card:focus-within {
	transform: translateY(calc(var(--u) * -8));
	border-color: rgba(150, 200, 255, .9);
	box-shadow:
		0 0 0 calc(var(--u) * 5) rgba(214, 233, 255, .45),
		0 calc(var(--u) * 34) calc(var(--u) * 60) calc(var(--u) * -20) rgba(2, 90, 220, .32),
		0 calc(var(--u) * 2) calc(var(--u) * 10) rgba(24, 84, 170, .06);
}
.dge-card:hover::before,
.dge-card:focus-within::before { opacity: 1; }

.dge .dge-num {
	position: absolute;
	top: calc(var(--u) * 17.5);
	right: calc(var(--u) * 32.5);
	font-size: calc(var(--u) * 43);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.05em;
	color: #d8e8fc;
	transition: color .45s ease, transform .55s var(--dge-ease);
}
.dge-card:hover .dge-num,
.dge-card:focus-within .dge-num {
	color: #a9cefd;
	transform: translateY(calc(var(--u) * -3));
}

/* icône 3D sous sa bulle de verre */
.dge-ico {
	position: relative;
	flex: 0 0 auto;
	width: calc(var(--u) * 116);
	height: calc(var(--u) * 116);
	margin-left: calc(var(--u) * 1);
}
.dge-dome,
.dge-art {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.dge-glow {
	position: absolute;
	left: calc(var(--u) * 26);
	top: calc(var(--u) * 74);
	width: calc(var(--u) * 62);
	height: calc(var(--u) * 16);
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(30, 114, 255, .65), rgba(30, 114, 255, 0));
	opacity: .85;
	transition: opacity .45s ease, transform .55s var(--dge-ease);
}
.dge-art {
	filter: drop-shadow(0 calc(var(--u) * 4) calc(var(--u) * 5) rgba(10, 60, 180, .22));
	transition: transform .6s var(--dge-ease), filter .45s ease;
	animation: dge-bob 6s ease-in-out infinite;
	animation-delay: calc(var(--i, 0) * -1s);
}
/* flottement sur `translate` : `transform` reste libre pour le survol */
@keyframes dge-bob {
	50% { translate: 0 calc(var(--u) * -3); }
}
.dge-card:hover .dge-art,
.dge-card:focus-within .dge-art {
	transform: translateY(calc(var(--u) * -6)) scale(1.06);
	filter: drop-shadow(0 calc(var(--u) * 10) calc(var(--u) * 10) rgba(10, 70, 200, .3)) brightness(1.06);
}
.dge-card:hover .dge-glow,
.dge-card:focus-within .dge-glow {
	opacity: 1;
	transform: scale(1.18);
}

.dge .dge-card-title {
	min-height: calc(var(--u) * 84);
	margin: calc(var(--u) * 10) 0 0;
	font-family: inherit;
	font-size: max(15px, calc(var(--u) * 23.5));
	font-weight: 700;
	line-height: calc(var(--u) * 27);
	letter-spacing: -.01em;
	white-space: nowrap;
	color: var(--dge-navy);
	text-transform: none;
}
.dge-card-title::after {
	content: "";
	display: block;
	width: calc(var(--u) * 35);
	height: max(2px, calc(var(--u) * 3));
	margin-top: calc(var(--u) * 15.7);
	border-radius: 2px;
	background: linear-gradient(90deg, #006afb, #2a8bff);
	transition: width .55s var(--dge-ease);
}
.dge-card:hover .dge-card-title::after,
.dge-card:focus-within .dge-card-title::after { width: calc(var(--u) * 64); }

.dge .dge-card-text {
	font-size: var(--dge-small);
	font-weight: 400;
	line-height: calc(var(--u) * 26);
	white-space: nowrap;
	color: var(--dge-muted);
}

.dge-more {
	display: inline-flex;
	align-items: center;
	gap: calc(var(--u) * 12);
	margin-top: auto;
	font-size: var(--dge-small);
	font-weight: 600;
	line-height: 1.2;
	color: var(--dge-link);
	transition: color .3s ease;
}
/* toute la carte est cliquable */
.dge-more::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: calc(var(--u) * 24);
}
.dge-more:hover,
.dge-more:focus { color: #004fd6; }
.dge-more-ico {
	width: calc(var(--u) * 21);
	height: calc(var(--u) * 21);
	fill: none;
	stroke: currentColor;
	stroke-width: 2.3;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .45s var(--dge-ease);
}
.dge-card:hover .dge-more-ico,
.dge-card:focus-within .dge-more-ico { transform: translateX(calc(var(--u) * 6)); }
.dge .dge-more:focus-visible { outline: none; }
.dge-card:has(.dge-more:focus-visible) {
	outline: 2px solid var(--dge-blue);
	outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   Desktop compact (1200–1599) : textes des cartes autorisés à passer à la ligne
   -------------------------------------------------------------------------- */
@media (max-width: 1599.98px) {
	.dge-card { padding-right: calc(var(--u) * 20); padding-left: calc(var(--u) * 32); }
	.dge .dge-card-text { white-space: normal; text-wrap: pretty; }
	.dge-card-text br { display: none; }
	.dge .dge-card-title { line-height: 1.15; white-space: normal; text-wrap: balance; }
	.dge .dge-card-text { line-height: 1.4; }
	.dge-more { padding-top: 18px; }
}

/* --------------------------------------------------------------------------
   Tablette & mobile (< 1200) : mise en page empilée
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
	.dge { --u: .8px; --dge-small: 15.5px; }
	.dge-stage {
		display: flex;
		flex-direction: column;
		gap: var(--dg-stack-gap);
		min-height: 0;
		padding: 0 var(--dg-gutter) var(--dg-section-y);
	}
	.dge .dge-waves { display: none; }
	.dge-title br,
	.dge-lead br { display: none; }
	.dge-photo {
		position: relative;
		z-index: auto;
		left: auto;
		top: auto;
		order: 1;
		width: calc(100% + 2 * var(--dg-gutter));
		margin: 0 calc(var(--dg-gutter) * -1);
		overflow: hidden;
		border-radius: 0 0 28px 28px;
		box-shadow: none;
		-webkit-mask-image: none;
		mask-image: none;
	}
	.dge-photo img {
		display: block;
		width: 100%;
		height: clamp(230px, 56vw, 420px);
		aspect-ratio: auto;
		object-fit: cover;
		object-position: 54% 45%;
	}
	.dge-photo::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg, transparent 50%, rgba(4, 18, 46, .38) 78%, rgba(4, 18, 46, .54) 100%);
		pointer-events: none;
	}
	/* carte blanche qui remonte sur la photo */
	.dge-content {
		position: relative;
		left: auto;
		top: auto;
		z-index: 2;
		order: 2;
		width: 100%;
		margin: clamp(-96px, -16vw, -56px) auto 0;
		padding: 30px 26px 28px;
		border-radius: 26px;
		background: #fff;
		box-shadow: 0 30px 60px -18px rgba(4, 18, 46, .28), 0 2px 8px rgba(4, 18, 46, .07);
	}
	.dge-cards {
		order: 3;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 20px;
		width: auto;
	}
	.dge-card {
		min-height: 0;
		padding: 14px 22px 26px 26px;
		border-radius: 22px;
	}
	.dge .dge-num { top: 18px; right: 22px; font-size: 34px; }
	.dge .dge-card-title {
		min-height: 0;
		margin-top: 8px;
		font-size: 20px;
		line-height: 1.2;
	}
	.dge-card-title br { display: none; }
	.dge-card-title::after { width: 32px; height: 3px; margin-top: 14px; }
	.dge .dge-card-text { margin-top: 16px; line-height: 1.5; }
	.dge-more { margin-top: auto; padding-top: 22px; gap: 12px; }
	.dge-more-ico { width: 18px; height: 18px; }
}
@media (max-width: 899.98px) {
	.dge-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599.98px) {
	.dge-cards { grid-template-columns: 1fr; }
	.dge-photo img { object-position: 56% 45%; }
}

@media (prefers-reduced-motion: reduce) {
	.dge-art { animation: none; }
	.dge *,
	.dge *::before,
	.dge *::after { transition-duration: 0s !important; transition-delay: 0s !important; }
}

/* ==========================================================================
   DIGIlium — Section « Des solutions concrètes » (sous « Notre expertise »)
   Desktop : cotes en --u = 1px de la maquette (1944 × 809), ramené à la fenêtre.
   La plaque de fond (décor + photo) est calée sur la maquette : img/features/production*.
   ========================================================================== */


.dgs {
	--u: min(1.12px, calc(100vw / 1944));

	--dgs-navy: var(--dg-navy);
	--dgs-ink: var(--dg-ink);
	--dgs-blue: var(--dg-blue);
	--dgs-icon: var(--dg-blue);
	--dgs-muted: var(--dg-muted);
	--dgs-ease: var(--dg-ease);

	/* planchers de lisibilité des petits textes */
	--dgs-small: max(13px, calc(var(--u) * 16));

	position: relative;
	color: var(--dgs-ink);
	font-family: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.dgs *,
.dgs *::before,
.dgs *::after { box-sizing: border-box; }
.dgs ul,
.dgs ol { margin: 0; padding: 0; list-style: none; }
.dgs li { margin: 0; font-weight: inherit; }
.dgs p { margin: 0; font-family: inherit; color: inherit; }
.dgs a { text-decoration: none; }
.dgs a:focus-visible {
	outline: 2px solid var(--dgs-blue);
	outline-offset: 3px;
}
.dgs svg { display: block; overflow: visible; }
.dgs-sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}
.dgs-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.dgs-stage {
	position: relative;
	isolation: isolate;
	max-width: calc(var(--u) * 1944);
	min-height: calc(var(--u) * 809);
	margin: 0 auto;
	overflow: hidden;
	background: var(--dg-bg);
}

/* plaque photo + décor */
.dgs-photo {
	position: absolute;
	z-index: -2;
	inset: 0;
}
.dgs-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* étincelles près de l'écran */
.dgs-sparks {
	position: absolute;
	z-index: -1;
	inset: 0;
	pointer-events: none;
}
.dgs-sparks i {
	position: absolute;
	left: calc(var(--u) * var(--x));
	top: calc(var(--u) * var(--y));
	width: calc(var(--u) * 7);
	height: calc(var(--u) * 7);
	margin: calc(var(--u) * -3.5) 0 0 calc(var(--u) * -3.5);
	border-radius: 50%;
	background: radial-gradient(closest-side, #fff, rgba(120, 190, 255, .9) 45%, rgba(40, 130, 255, 0));
	scale: var(--s);
	animation: dgs-twinkle 3.6s ease-in-out infinite;
	animation-delay: var(--d);
}
@keyframes dgs-twinkle {
	0%, 100% { opacity: .25; transform: scale(.6); }
	45% { opacity: 1; transform: scale(1.25); }
}

/* --------------------------------------------------------------------------
   Bloc texte
   -------------------------------------------------------------------------- */
.dgs-content {
	position: absolute;
	left: var(--dg-edge-x);
	top: var(--dg-pad-top);
}
/* la 2e ligne se resserre pour tenir devant l’écran du portable */
.dgs-title span { letter-spacing: -.04em; }

.dgs .dgs-checks {
	margin-top: calc(var(--u) * 9.5);
}
.dgs-checks li {
	display: flex;
	align-items: center;
	gap: calc(var(--u) * 25);
	height: calc(var(--u) * 43.4);
	font-size: calc(var(--u) * 22.9);
	line-height: 1.2;
	white-space: nowrap;
	color: var(--dgs-ink);
}
.dgs-checks strong { font-weight: 700; color: #00002f; }
.dgs-check {
	flex: 0 0 auto;
	width: calc(var(--u) * 40);
	height: calc(var(--u) * 40);
	padding: calc(var(--u) * 4.75);
	border-radius: 50%;
	background: #d5eafd;
	fill: none;
	stroke: #005cfe;
	stroke-width: 2.9;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
}

.dgs-cta {
	position: relative;
	display: flex;
	align-items: center;
	gap: calc(var(--u) * 23);
	width: calc(var(--u) * 405);
	height: calc(var(--u) * 70);
	margin-top: calc(var(--u) * 21);
	padding-left: calc(var(--u) * 45);
	overflow: hidden;
	border-radius: calc(var(--u) * 35);
	background: linear-gradient(90deg, #0062fb 0%, #0078fd 50%, #0a95fd 100%);
	box-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 28) calc(var(--u) * -12) rgba(0, 98, 251, .55);
	font-size: calc(var(--u) * 22.4);
	font-weight: 400;
	line-height: 1;
	white-space: nowrap;
	transition: transform .5s var(--dgs-ease), box-shadow .45s ease;
}
.dgs .dgs-cta,
.dgs .dgs-cta:hover,
.dgs .dgs-cta:focus { color: #fff; }
/* reflet qui balaie le bouton au survol */
.dgs-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .38) 50%, transparent 70%);
	translate: -110% 0;
	transition: translate .8s var(--dgs-ease);
}
.dgs-cta:hover,
.dgs-cta:focus-visible {
	transform: translateY(calc(var(--u) * -3));
	box-shadow: 0 calc(var(--u) * 20) calc(var(--u) * 34) calc(var(--u) * -12) rgba(0, 98, 251, .65);
}
.dgs-cta:hover::before,
.dgs-cta:focus-visible::before { translate: 110% 0; }
.dgs-cta-ico {
	width: calc(var(--u) * 30);
	height: calc(var(--u) * 30);
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .45s var(--dgs-ease);
}
.dgs-cta:hover .dgs-cta-ico,
.dgs-cta:focus-visible .dgs-cta-ico { transform: translateX(calc(var(--u) * 6)); }

/* --------------------------------------------------------------------------
   Technologies
   -------------------------------------------------------------------------- */
.dgs-tech {
	position: absolute;
	left: calc(var(--u) * 96);
	top: calc(var(--u) * 657);
}
.dgs .dgs-logos {
	display: grid;
	grid-template-columns: 142fr 152fr 164fr 160fr 147fr 137fr 141fr 141fr;
	gap: calc(var(--u) * 14.6);
	width: calc(var(--u) * 1286);
	margin-top: calc(var(--u) * 17);
}
.dgs-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: calc(var(--u) * 8);
	height: calc(var(--u) * 76);
	border: 1px solid rgba(255, 255, 255, .9);
	border-radius: calc(var(--u) * 14);
	background: rgba(248, 251, 255, .82);
	box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 24) calc(var(--u) * -14) rgba(30, 80, 160, .22);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	font-size: calc(var(--u) * 21.5);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -.01em;
	white-space: nowrap;
	color: #0a0c1a;
	transition: transform .5s var(--dgs-ease), box-shadow .45s ease, border-color .45s ease;
}
.dgs-logo:hover {
	transform: translateY(calc(var(--u) * -5));
	border-color: rgba(160, 205, 255, .95);
	box-shadow: 0 calc(var(--u) * 18) calc(var(--u) * 30) calc(var(--u) * -14) rgba(0, 90, 220, .3);
}
.dgs-mark {
	flex: 0 0 auto;
	width: calc(var(--u) * var(--w));
	height: calc(var(--u) * var(--h));
	transition: transform .55s var(--dgs-ease);
}
.dgs-logo:hover .dgs-mark { transform: scale(1.08) rotate(-3deg); }
.dgs-mark-php { --w: 84; --h: 44; }
.dgs-mark-sf { --w: 36; --h: 36; }
.dgs-mark-react { --w: 49; --h: 45; }
.dgs-mark-vue { --w: 41; --h: 35.4; }
.dgs-mark-node { --w: 107; --h: 34.3; }
.dgs-mark-py { --w: 45; --h: 45; }
.dgs-mark-aws { --w: 66; --h: 39; }
.dgs-mark-docker { --w: 50; --h: 34.7; }
/* tailles de libellés propres à la maquette */
.dgs-logo:nth-child(2) { font-size: calc(var(--u) * 24.5); }
.dgs-logo:nth-child(3) { gap: calc(var(--u) * 9); }
.dgs-logo:nth-child(4) { gap: calc(var(--u) * 6.5); font-size: calc(var(--u) * 23); }
.dgs-logo:hover .dgs-mark-react { transform: rotate(60deg) scale(1.06); }
.dgs-logo-docker {
	flex-direction: column;
	gap: calc(var(--u) * 2);
	font-size: calc(var(--u) * 19);
	font-weight: 600;
	letter-spacing: 0;
	color: #1d8cf8;
}

/* --------------------------------------------------------------------------
   Étapes (frise verticale à droite)
   -------------------------------------------------------------------------- */
.dgs-steps {
	position: absolute;
	left: calc(var(--u) * 1529);
	top: calc(var(--u) * 75);
	display: flex;
	flex-direction: column;
	gap: calc(var(--u) * 19.25);
	width: calc(var(--u) * 360);
}
/* la frise */
.dgs-steps::before,
.dgs-steps::after {
	content: "";
	position: absolute;
	left: calc(var(--u) * -29);
	width: 1.5px;
	margin-left: -.75px;
	pointer-events: none;
}
.dgs-steps::before {
	top: calc(var(--u) * -15);
	bottom: calc(var(--u) * 22);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0), #f2faff calc(var(--u) * 30), #0a87f8 calc(var(--u) * 60), #0a87f8 calc(100% - var(--u) * 20), rgba(10, 135, 248, 0));
	transform-origin: 50% 0;
}
/* impulsion lumineuse qui parcourt la frise */
.dgs-steps::after {
	top: calc(var(--u) * 17);
	height: calc(var(--u) * 90);
	margin-left: -2px;
	width: 4px;
	border-radius: 4px;
	background: linear-gradient(180deg, rgba(120, 200, 255, 0), #bfe4ff 70%, #fff);
	box-shadow: 0 0 calc(var(--u) * 10) rgba(60, 160, 255, .9);
	opacity: 0;
	animation: dgs-pulse 5.5s cubic-bezier(.45, 0, .55, 1) infinite 1.6s;
}
@keyframes dgs-pulse {
	0% { opacity: 0; translate: 0 0; }
	10% { opacity: 1; }
	70% { opacity: 1; }
	80%, 100% { opacity: 0; translate: 0 calc(var(--u) * 560); }
}

.dgs-step {
	/* reflet piloté par digilium-system.js */
	--mx: 50%;
	--my: 50%;

	position: relative;
	display: grid;
	grid-template-columns: calc(var(--u) * 75) 1fr;
	grid-template-rows: auto auto;
	grid-template-areas: "ico title" "ico text";
	align-content: center;
	column-gap: calc(var(--u) * 22);
	min-height: calc(var(--u) * 102);
	padding: calc(var(--u) * 13) calc(var(--u) * 16) calc(var(--u) * 13) calc(var(--u) * 12);
	border: 1px solid rgba(255, 255, 255, .95);
	border-radius: calc(var(--u) * 17);
	background: linear-gradient(180deg, rgba(246, 250, 254, .93), rgba(242, 248, 253, .95));
	box-shadow:
		0 calc(var(--u) * 16) calc(var(--u) * 32) calc(var(--u) * -18) rgba(16, 70, 160, .3),
		0 1px calc(var(--u) * 6) rgba(16, 70, 160, .05);
	-webkit-backdrop-filter: blur(14px) saturate(130%);
	backdrop-filter: blur(14px) saturate(130%);
	transition: transform .55s var(--dgs-ease), box-shadow .45s ease, border-color .45s ease;
}
/* halo qui suit la souris */
.dgs-step::before,
.dgs-step::after { pointer-events: none; }
.dgs-step::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: radial-gradient(circle calc(var(--u) * 200) at var(--mx) var(--my), rgba(0, 112, 253, .1), transparent 70%);
	opacity: 0;
	transition: opacity .45s ease;
}
/* point + liaison vers la frise */
.dgs-step::after {
	content: "";
	position: absolute;
	top: 50%;
	left: calc(var(--u) * -35.5);
	width: calc(var(--u) * 36.5);
	height: calc(var(--u) * 13);
	margin-top: calc(var(--u) * -6.5);
	background:
		radial-gradient(circle closest-side at calc(var(--u) * 6.5) 50%, #0479fd 0 calc(100% - .5px), transparent 100%) 0 0 / calc(var(--u) * 13) 100% no-repeat,
		linear-gradient(#1381fa, #1381fa) calc(var(--u) * 13) 50% / 100% 1.5px no-repeat;
	filter: drop-shadow(0 0 calc(var(--u) * 3) rgba(10, 111, 251, .45));
	transition: filter .45s ease, transform .45s var(--dgs-ease);
}
.dgs-step:hover {
	transform: translateX(calc(var(--u) * -6));
	border-color: rgba(160, 205, 255, .95);
	box-shadow:
		0 calc(var(--u) * 24) calc(var(--u) * 40) calc(var(--u) * -18) rgba(0, 90, 220, .38),
		0 1px calc(var(--u) * 6) rgba(16, 70, 160, .06);
}
.dgs-step:hover::before { opacity: 1; }
.dgs-step:hover::after { filter: drop-shadow(0 0 calc(var(--u) * 7) rgba(10, 111, 251, .95)); }

.dgs-step-ico {
	grid-area: ico;
	display: grid;
	place-items: center;
	width: calc(var(--u) * 75);
	height: calc(var(--u) * 75);
	align-self: center;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: calc(var(--u) * 15);
	background: linear-gradient(150deg, #edf6ff 0%, #e2f0fd 55%, #d9ebfc 100%);
	box-shadow:
		inset 0 1px 0 #fff,
		0 calc(var(--u) * 8) calc(var(--u) * 16) calc(var(--u) * -10) rgba(20, 90, 200, .3);
	transition: background .45s ease, box-shadow .45s ease;
}
.dgs-step-ico svg {
	width: calc(var(--u) * 54);
	height: calc(var(--u) * 54);
	fill: none;
	stroke: var(--dgs-icon);
	stroke-width: 2.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.dgs-step-ico .dgs-ico-bulb { width: calc(var(--u) * 51); height: calc(var(--u) * 51); }
.dgs-step:hover .dgs-step-ico {
	background: linear-gradient(150deg, #f4f9ff 0%, #dcedff 55%, #c9e2ff 100%);
	box-shadow:
		inset 0 1px 0 #fff,
		0 calc(var(--u) * 12) calc(var(--u) * 20) calc(var(--u) * -10) rgba(0, 90, 220, .4);
}

/* micro-animations des icônes au survol */
.dgs-step-ico svg * { transition: transform .5s var(--dgs-ease), opacity .4s ease, stroke-dashoffset .6s var(--dgs-ease); }
.dgs-rays { opacity: 0; transform: scale(.7); transform-origin: 24px 18.5px; }
.dgs-step:hover .dgs-rays { opacity: 1; transform: none; }
.dgs-step:hover .dgs-code-l { transform: translateX(-2.5px); }
.dgs-step:hover .dgs-code-r { transform: translateX(2.5px); }
.dgs-shield-tick { stroke-dasharray: 1; stroke-dashoffset: 1; }
.dgs-step:hover .dgs-shield-tick { stroke-dashoffset: 0; }
.dgs-step:hover .dgs-link-a { transform: translate(-1.6px, 1.6px); }
.dgs-step:hover .dgs-link-b { transform: translate(1.6px, -1.6px); }
.dgs-ico-chart rect { transform-origin: 0 41.5px; transform-box: view-box; }
.dgs-step:hover .dgs-ico-chart rect { animation: dgs-bar .7s var(--dgs-ease) calc(var(--b) * 70ms) both; }
@keyframes dgs-bar {
	0% { transform: scaleY(1); }
	40% { transform: scaleY(.35); }
	100% { transform: scaleY(1); }
}

.dgs .dgs-step-title {
	grid-area: title;
	margin: 0;
	font-family: inherit;
	font-size: max(14px, calc(var(--u) * 17.8));
	font-weight: 800;
	line-height: calc(var(--u) * 24);
	letter-spacing: -.005em;
	white-space: nowrap;
	color: #050f3d;
	text-transform: none;
}
.dgs .dgs-step-text {
	grid-area: text;
	margin-top: calc(var(--u) * 4);
	font-size: var(--dgs-small);
	line-height: calc(var(--u) * 22.5);
	white-space: nowrap;
	color: var(--dgs-muted);
}
.dgs .dgs-step-num {
	position: absolute;
	top: calc(var(--u) * 14);
	right: calc(var(--u) * 16);
	font-size: calc(var(--u) * 28);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -.01em;
	color: #d3e6fc;
	transition: color .45s ease, transform .55s var(--dgs-ease);
}
.dgs-step:hover .dgs-step-num {
	color: #9ccaff;
	transform: translateY(calc(var(--u) * -2));
}

/* --------------------------------------------------------------------------
   Desktop compact (1200–1599) : textes des étapes autorisés à passer à la ligne
   -------------------------------------------------------------------------- */
@media (max-width: 1599.98px) {
	.dgs .dgs-step-text { white-space: normal; line-height: 1.3; text-wrap: balance; }
	.dgs-step-text br { display: none; }
	.dgs-step { column-gap: calc(var(--u) * 20); padding-right: calc(var(--u) * 12); }
	.dgs .dgs-step-num { font-size: calc(var(--u) * 24); top: calc(var(--u) * 10); right: calc(var(--u) * 12); }
}

/* --------------------------------------------------------------------------
   Tablette & mobile (< 1200) : mise en page empilée
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
	.dgs { --u: .8px; --dgs-small: 15.5px; }
	/* texte / photo + étapes côte à côte / technologies */
	.dgs-stage {
		display: grid;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		grid-template-areas: "content content" "photo steps" "tech tech";
		gap: var(--dg-stack-gap) 28px;
		min-height: 0;
		padding: var(--dg-section-y) var(--dg-gutter);
	}
	.dgs-sparks { display: none; }
	.dgs-content,
	.dgs-tech {
		position: static;
	}
	.dgs-content { grid-area: content; }
	.dgs-photo {
		position: relative;
		z-index: auto;
		inset: auto;
		grid-area: photo;
		overflow: hidden;
		border-radius: 24px;
		box-shadow: 0 24px 50px -24px rgba(0, 40, 120, .35);
	}
	/* recadrage sur l'ordinateur */
	.dgs-photo img { object-position: 60% 50%; }
	.dgs-steps {
		position: relative;
		left: auto;
		top: auto;
		grid-area: steps;
	}
	.dgs-tech { grid-area: tech; }

	.dgs-title br,
	.dgs-lead br { display: none; }
	.dgs-title span { display: block; }
	.dgs .dgs-checks { margin-top: 18px; }
	.dgs-checks li {
		gap: 16px;
		height: auto;
		padding: 6px 0;
		font-size: clamp(16px, 2.2vw, 18px);
		white-space: normal;
	}
	.dgs-check { width: 34px; height: 34px; padding: 8px; }
	.dgs-cta {
		width: auto;
		max-width: 100%;
		height: 58px;
		margin-top: 26px;
		padding: 0 30px 0 32px;
		display: inline-flex;
		gap: 22px;
		font-size: 18px;
		border-radius: 29px;
	}
	.dgs-cta-ico { width: 20px; height: 20px; }

	.dgs .dgs-steps {
		gap: 14px;
		width: auto;
		padding-left: 34px;
	}
	.dgs-steps::before,
	.dgs-steps::after { left: 7px; }
	.dgs-steps::before { top: 10px; bottom: 10px; }
	.dgs-steps::after { animation: none; display: none; }
	.dgs-step {
		grid-template-columns: 64px 1fr;
		column-gap: 18px;
		min-height: 0;
		padding: 14px 52px 14px 12px;
		border-radius: 18px;
	}
	.dgs-step::after { left: -33px; width: 33px; height: 12px; margin-top: -6px; background-size: 12px 100%, 100% 1.5px; background-position: 0 0, 12px 50%; }
	.dgs-step-ico { width: 64px; height: 64px; border-radius: 14px; }
	.dgs-step-ico svg { width: 38px; height: 38px; }
	.dgs-step-ico .dgs-ico-bulb { width: 36px; height: 36px; }
	.dgs .dgs-step-title { font-size: 18px; line-height: 1.3; white-space: normal; }
	.dgs .dgs-step-text { margin-top: 4px; line-height: 1.45; white-space: normal; }
	.dgs-step-text br { display: none; }
	.dgs .dgs-step-num { top: 14px; right: 16px; font-size: 24px; }
	.dgs-step:hover { transform: translateX(4px); }

	.dgs .dgs-logos {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 12px;
		width: auto;
		margin-top: 18px;
	}
	.dgs-logo,
	.dgs-logo:nth-child(n) { height: 72px; border-radius: 14px; font-size: 17px; }
	.dgs-logo-docker { font-size: 15px; }
}
@media (max-width: 899.98px) {
	.dgs-stage {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "content" "photo" "steps" "tech";
		gap: var(--dg-stack-gap);
	}
	.dgs-photo img { height: auto; aspect-ratio: 16 / 10; }
}
@media (max-width: 599.98px) {
	.dgs { --u: .62px; }
	.dgs-photo img { aspect-ratio: 4 / 3; object-position: 58% 50%; }
	.dgs .dgs-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dgs-step { padding-right: 44px; }
	.dgs .dgs-step-num { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.dgs-sparks i,
	.dgs-steps::after { animation: none; }
	.dgs-steps::after { display: none; }
	.dgs *,
	.dgs *::before,
	.dgs *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation-duration: 0s !important; }
}

/* ==========================================================================
   DIGIlium — Section « Pour qui ? » (sous « Des solutions concrètes »)
   Desktop : cotes en --u = 1px de la maquette (1944 × 809), ramené à la fenêtre.
   La plaque de fond (décor + photo) est calée sur la maquette : img/features/ecosysteme*.
   ========================================================================== */


.dgq {
	--u: min(1.12px, calc(100vw / 1944));

	--dgq-navy: var(--dg-navy);
	--dgq-ink: var(--dg-ink);
	--dgq-blue: var(--dg-blue);
	--dgq-muted: var(--dg-muted);
	--dgq-ease: var(--dg-ease);

	/* planchers de lisibilité des petits textes */
	--dgq-small: max(13px, calc(var(--u) * 20.4));

	position: relative;
	color: var(--dgq-ink);
	font-family: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.dgq *,
.dgq *::before,
.dgq *::after { box-sizing: border-box; }
.dgq ul { margin: 0; padding: 0; list-style: none; }
.dgq li { margin: 0; font-weight: inherit; }
.dgq p,
.dgq figure,
.dgq blockquote { margin: 0; padding: 0; font-family: inherit; color: inherit; }
.dgq blockquote { border: 0; background: none; font-size: inherit; }
.dgq a { text-decoration: none; }
.dgq a:focus-visible,
.dgq button:focus-visible {
	outline: 2px solid var(--dgq-blue);
	outline-offset: 3px;
}
.dgq svg { display: block; overflow: visible; }
.dgq-sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.dgq-stage {
	position: relative;
	isolation: isolate;
	max-width: calc(var(--u) * 1944);
	min-height: calc(var(--u) * 809);
	margin: 0 auto;
	overflow: hidden;
	background: var(--dg-bg);
}
.dgq-photo {
	position: absolute;
	z-index: -2;
	inset: 0;
}
.dgq-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   Interface flottante (tuiles de verre, liaisons, tableau de bord)
   -------------------------------------------------------------------------- */
.dgq-hud {
	position: absolute;
	z-index: -1;
	inset: 0;
	pointer-events: none;
}
.dgq-links {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.dgq-links-glow {
	fill: none;
	stroke: #dcf1ff;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-dasharray: 30 7;
	filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px rgba(70, 165, 255, .95));
	animation: dgq-flow 2.2s linear infinite;
}
@keyframes dgq-flow { to { stroke-dashoffset: -37; } }
.dgq-links-dots {
	fill: #e9f6ff;
	filter: drop-shadow(0 0 4px rgba(80, 170, 255, 1));
}
.dgq-links-dots circle {
	transform-box: fill-box;
	transform-origin: center;
	animation: dgq-blink 2.4s ease-in-out infinite;
}
.dgq-links-dots circle:nth-child(3n + 1) { animation-delay: -.8s; }
.dgq-links-dots circle:nth-child(3n + 2) { animation-delay: -1.6s; }
@keyframes dgq-blink {
	0%, 100% { opacity: .55; transform: scale(.8); }
	50% { opacity: 1; transform: scale(1.35); }
}

.dgq-tile {
	position: absolute;
	display: grid;
	place-items: center;
	border: 1.5px solid rgba(235, 248, 255, .9);
	border-radius: calc(var(--u) * 12);
	background: linear-gradient(150deg, rgba(215, 238, 255, .82) 0%, rgba(160, 212, 252, .7) 55%, rgba(120, 190, 250, .66) 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .8),
		inset 0 0 calc(var(--u) * 20) rgba(255, 255, 255, .35),
		0 0 calc(var(--u) * 24) rgba(90, 175, 255, .6);
	-webkit-backdrop-filter: blur(6px) saturate(140%);
	backdrop-filter: blur(6px) saturate(140%);
	animation: dgq-bob 6s ease-in-out infinite;
	animation-delay: var(--d);
}
@keyframes dgq-bob { 50% { translate: 0 calc(var(--u) * -7); } }
.dgq-tile svg {
	width: 64%;
	height: 64%;
	fill: none;
	stroke: #fff;
	stroke-width: 2.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	filter: drop-shadow(0 0 calc(var(--u) * 4) rgba(255, 255, 255, .6));
}
.dgq-tile-cloud { left: calc(var(--u) * 1025); top: calc(var(--u) * 117); width: calc(var(--u) * 132); height: calc(var(--u) * 116); }
.dgq-tile-gear { left: calc(var(--u) * 932); top: calc(var(--u) * 245); width: calc(var(--u) * 111); height: calc(var(--u) * 110); }
.dgq-tile-gear svg { stroke-width: 1.35; }
.dgq-tile-code { left: calc(var(--u) * 1482); top: calc(var(--u) * 186); width: calc(var(--u) * 123); height: calc(var(--u) * 104); }
.dgq-gear {
	transform-origin: 12px 12px;
	animation: dgq-spin 14s linear infinite;
}
@keyframes dgq-spin { to { transform: rotate(360deg); } }

.dgq-dash {
	position: absolute;
	left: calc(var(--u) * 1640);
	top: calc(var(--u) * 197);
	width: calc(var(--u) * 282);
	height: calc(var(--u) * 244);
	border-radius: calc(var(--u) * 12);
	box-shadow: 0 0 calc(var(--u) * 26) rgba(110, 185, 255, .55);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	transform: perspective(900px) rotateY(-9deg);
	transform-origin: 0 50%;
	animation: dgq-bob 7s ease-in-out infinite -1s;
}
.dgq-dash svg { width: 100%; height: 100%; }
.dgq-dash-panel { fill: rgba(226, 240, 254, .66); stroke: rgba(255, 255, 255, .9); }
.dgq-dash-card { fill: rgba(255, 255, 255, .42); stroke: rgba(255, 255, 255, .75); }
.dgq-donut circle { fill: none; stroke-width: 12; }
.dgq-arc {
	stroke-dasharray: var(--v) 100;
	transition: stroke-dasharray 1.6s var(--dgq-ease) .6s;
}
.dgq-donut .dgq-arc:last-child { stroke-dasharray: var(--v) 100; }
.dgq-bars rect {
	transform-box: fill-box;
	transform-origin: 50% 100%;
	transition: transform 1s var(--dgq-ease) calc(.7s + var(--b) * 90ms);
}

/* badge sécurité */
.dgq .dgq-badge {
	position: absolute;
	left: calc(var(--u) * 1600);
	top: calc(var(--u) * 56);
	display: flex;
	align-items: center;
	gap: calc(var(--u) * 26);
	width: calc(var(--u) * 305);
	height: calc(var(--u) * 128);
	padding-left: calc(var(--u) * 36);
	overflow: hidden;
	border: 1px solid rgba(160, 220, 255, .75);
	border-radius: calc(var(--u) * 16);
	background: linear-gradient(160deg, #10a6fe 0%, #0b86f2 45%, #0b6fe6 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .4),
		0 0 calc(var(--u) * 26) rgba(40, 150, 255, .55);
	font-size: calc(var(--u) * 17.5);
	line-height: calc(var(--u) * 23);
	color: #fff;
}
/* reflet qui traverse le badge */
.dgq-badge::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%);
	translate: -120% 0;
	animation: dgq-sheen 6s ease-in-out infinite 2s;
}
@keyframes dgq-sheen { 0%, 70% { translate: -120% 0; } 100% { translate: 120% 0; } }
.dgq-badge strong {
	display: block;
	font-size: calc(var(--u) * 19.5);
	font-weight: 700;
	line-height: calc(var(--u) * 26);
}
.dgq-badge-ico {
	flex: 0 0 auto;
	width: calc(var(--u) * 66);
	height: calc(var(--u) * 66);
	margin-top: calc(var(--u) * -8);
	fill: none;
	stroke: #fff;
	stroke-width: 2.9;
	stroke-linejoin: round;
	filter: drop-shadow(0 0 calc(var(--u) * 6) rgba(255, 255, 255, .45));
}

/* --------------------------------------------------------------------------
   Bloc texte
   -------------------------------------------------------------------------- */
.dgq-content {
	position: absolute;
	left: var(--dg-edge-x);
	top: var(--dg-pad-top);
}

/* --------------------------------------------------------------------------
   Cartes « acteurs »
   -------------------------------------------------------------------------- */
.dgq .dgq-cards {
	position: absolute;
	left: calc(var(--u) * 91);
	top: calc(var(--u) * 348);
	display: flex;
	flex-direction: column;
	gap: calc(var(--u) * 16);
	width: calc(var(--u) * 771);
}
.dgq-card {
	position: relative;
	display: grid;
	grid-template-columns: calc(var(--u) * 101) 1fr auto;
	grid-template-areas: "ico title arrow" "ico text arrow";
	align-content: center;
	align-items: center;
	column-gap: calc(var(--u) * 38);
	height: calc(var(--u) * 124);
	padding: 0 calc(var(--u) * 31) 0 calc(var(--u) * 26);
	border: 1px solid rgba(255, 255, 255, .95);
	border-radius: calc(var(--u) * 18);
	background: rgba(251, 252, 254, .94);
	box-shadow:
		0 calc(var(--u) * 16) calc(var(--u) * 34) calc(var(--u) * -20) rgba(16, 70, 160, .28),
		0 1px calc(var(--u) * 6) rgba(16, 70, 160, .05);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	transition: transform .55s var(--dgq-ease), box-shadow .45s ease, border-color .45s ease;
}
.dgq-card:hover,
.dgq-card:focus-within {
	transform: translateX(calc(var(--u) * 8));
	border-color: rgba(160, 205, 255, .95);
	box-shadow:
		0 calc(var(--u) * 24) calc(var(--u) * 42) calc(var(--u) * -20) rgba(0, 90, 220, .36),
		0 1px calc(var(--u) * 6) rgba(16, 70, 160, .06);
}
.dgq-card-ico {
	grid-area: ico;
	display: grid;
	place-items: center;
	width: calc(var(--u) * 101);
	height: calc(var(--u) * 92);
	margin-top: calc(var(--u) * -6);
	border-radius: calc(var(--u) * 20);
	background: linear-gradient(150deg, #ecf5fe 0%, #e1effd 60%, #d8eafc 100%);
	box-shadow: inset 0 1px 0 #fff;
	transition: background .45s ease, box-shadow .45s ease;
}
.dgq-card-ico svg {
	width: calc(var(--u) * 66);
	height: calc(var(--u) * 54);
	fill: none;
	stroke: #0070fe;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: stroke .45s ease, transform .55s var(--dgq-ease);
}
/* poignée de main plus large que haute, comme la maquette */
.dgq-card:nth-child(3) .dgq-card-ico svg { width: calc(var(--u) * 67); height: calc(var(--u) * 50); stroke-width: calc(var(--u) * 3.3); }
.dgq-card:nth-child(3) .dgq-card-ico path { vector-effect: non-scaling-stroke; }
.dgq-card:hover .dgq-card-ico,
.dgq-card:focus-within .dgq-card-ico {
	background: linear-gradient(150deg, #2a92ff 0%, #0a6ffb 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 calc(var(--u) * 12) calc(var(--u) * 22) calc(var(--u) * -10) rgba(0, 100, 250, .6);
}
.dgq-card:hover .dgq-card-ico svg,
.dgq-card:focus-within .dgq-card-ico svg { stroke: #fff; transform: scale(1.08); }

.dgq .dgq-card-title {
	grid-area: title;
	align-self: end;
	position: relative;
	top: calc(var(--u) * 4);
	margin: 0;
	font-family: inherit;
	font-size: max(15px, calc(var(--u) * 24.4));
	font-weight: 700;
	line-height: calc(var(--u) * 30);
	letter-spacing: -.005em;
	white-space: nowrap;
	text-transform: none;
}
.dgq .dgq-card-link { font: inherit; color: var(--dgq-navy); }
/* toute la carte est cliquable */
.dgq-card-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: calc(var(--u) * 18);
}
.dgq .dgq-card-link:focus-visible { outline: none; }
.dgq-card:has(.dgq-card-link:focus-visible) {
	outline: 2px solid var(--dgq-blue);
	outline-offset: 4px;
}
.dgq .dgq-card-text {
	grid-area: text;
	align-self: start;
	margin-top: calc(var(--u) * 6);
	font-size: var(--dgq-small);
	line-height: calc(var(--u) * 27);
	white-space: nowrap;
	color: var(--dgq-muted);
}
.dgq-card-arrow {
	grid-area: arrow;
	width: calc(var(--u) * 34);
	height: calc(var(--u) * 34);
	fill: none;
	stroke: #006cfe;
	stroke-width: 2.1;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .45s var(--dgq-ease);
}
.dgq-card:hover .dgq-card-arrow,
.dgq-card:focus-within .dgq-card-arrow { transform: translateX(calc(var(--u) * 7)); }

/* --------------------------------------------------------------------------
   Témoignage
   -------------------------------------------------------------------------- */
.dgq-testi {
	position: absolute;
	left: calc(var(--u) * 1399);
	top: calc(var(--u) * 486);
	width: calc(var(--u) * 507);
	height: calc(var(--u) * 266);
	padding: calc(var(--u) * 65) calc(var(--u) * 30) 0 calc(var(--u) * 50);
	border: 1px solid rgba(255, 255, 255, .95);
	border-radius: calc(var(--u) * 26);
	background: rgba(252, 253, 255, .96);
	box-shadow:
		0 calc(var(--u) * 24) calc(var(--u) * 50) calc(var(--u) * -24) rgba(16, 60, 140, .35),
		0 1px calc(var(--u) * 6) rgba(16, 70, 160, .05);
}
.dgq-testi-ico {
	position: absolute;
	left: calc(var(--u) * 35);
	top: calc(var(--u) * 11);
	display: grid;
	place-items: center;
	width: calc(var(--u) * 52);
	height: calc(var(--u) * 52);
	border-radius: 50%;
	background: #eaf2fd;
}
.dgq-testi-ico svg {
	width: calc(var(--u) * 34);
	height: calc(var(--u) * 26);
	fill: #0075ff;
}
.dgq-slides { position: relative; }
.dgq-slide { display: none; }
.dgq-slide.is-active {
	display: block;
	animation: dgq-slide-in .6s var(--dgq-ease);
}
.dgq-slide.is-back { animation-name: dgq-slide-back; }
@keyframes dgq-slide-in { from { opacity: 0; translate: calc(var(--u) * 26) 0; } }
@keyframes dgq-slide-back { from { opacity: 0; translate: calc(var(--u) * -26) 0; } }
.dgq-slide blockquote p {
	font-size: max(13px, calc(var(--u) * 20.5));
	font-style: italic;
	line-height: calc(var(--u) * 25.8);
	letter-spacing: -.005em;
	white-space: nowrap;
	color: #00025c;
}
.dgq-slide figcaption {
	margin-top: calc(var(--u) * 27);
	font-size: max(13px, calc(var(--u) * 18.5));
	line-height: calc(var(--u) * 24);
	color: #303d79;
}
.dgq-slide figcaption::before {
	content: "";
	display: block;
	width: calc(var(--u) * 40);
	height: max(2px, calc(var(--u) * 2.5));
	margin-bottom: calc(var(--u) * 19);
	background: var(--dgq-blue);
}
.dgq-slide figcaption strong {
	display: block;
	font-size: max(13px, calc(var(--u) * 19));
	font-weight: 700;
	color: #000042;
}
.dgq-nav {
	position: absolute;
	right: calc(var(--u) * 37);
	bottom: calc(var(--u) * 22);
	display: flex;
	gap: calc(var(--u) * 9);
}
.dgq-nav button {
	display: grid;
	place-items: center;
	width: calc(var(--u) * 58);
	height: calc(var(--u) * 58);
	padding: 0;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: transform .4s var(--dgq-ease), box-shadow .4s ease, background .4s ease;
}
.dgq-nav svg {
	width: calc(var(--u) * 26);
	height: calc(var(--u) * 26);
	fill: none;
	stroke: currentColor;
	stroke-width: 2.1;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.dgq-prev { background: #e1effd; color: #006dfd; }
.dgq-prev svg { transform: scaleX(-1); }
.dgq-next {
	background: linear-gradient(150deg, #1785ff, #0068fb);
	color: #fff;
	box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 20) calc(var(--u) * -8) rgba(0, 104, 251, .6);
}
.dgq-nav button:hover { transform: scale(1.08); }
.dgq-prev:hover { background: #d2e7fd; }

/* --------------------------------------------------------------------------
   Entrée du tableau de bord (anneaux et barres), déclenchée avec l'entrée commune
   -------------------------------------------------------------------------- */
.dgq.is-armed .dgq-arc { stroke-dasharray: 0 100; }
.dgq.is-armed .dgq-bars rect { transform: scaleY(0); }

/* --------------------------------------------------------------------------
   Desktop compact (1200–1599) : textes des cartes autorisés à passer à la ligne
   -------------------------------------------------------------------------- */
@media (max-width: 1599.98px) {
	.dgq .dgq-card-text { white-space: normal; line-height: 1.3; text-wrap: balance; }
	.dgq-card-text br { display: none; }
	.dgq .dgq-slide blockquote p { white-space: normal; line-height: 1.3; }
	.dgq-slide blockquote br { display: none; }
	.dgq-testi { padding-right: calc(var(--u) * 40); }
}

/* --------------------------------------------------------------------------
   Tablette & mobile (< 1200) : mise en page empilée, interface flottante masquée
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
	.dgq { --u: .8px; --dgq-small: 15.5px; }
	.dgq-stage {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas: "content content" "cards cards" "photo photo" "testi badge";
		gap: var(--dg-stack-gap) 24px;
		min-height: 0;
		padding: var(--dg-section-y) var(--dg-gutter);
	}
	.dgq-hud { display: none; }
	.dgq-content,
	.dgq .dgq-cards,
	.dgq-testi,
	.dgq .dgq-badge { position: relative; left: auto; top: auto; }
	.dgq-content { grid-area: content; }
	.dgq .dgq-cards { grid-area: cards; width: auto; gap: 14px; }
	.dgq-photo {
		position: relative;
		z-index: auto;
		inset: auto;
		grid-area: photo;
		overflow: hidden;
		border-radius: 24px;
		box-shadow: 0 24px 50px -24px rgba(0, 40, 120, .35);
	}
	.dgq-photo img { height: auto; aspect-ratio: 2 / 1; object-position: 72% 40%; }
	.dgq-testi { grid-area: testi; width: auto; height: auto; min-height: 250px; padding: 76px 28px 96px 32px; border-radius: 22px; }
	.dgq .dgq-badge { grid-area: badge; align-self: start; width: auto; height: auto; padding: 28px 32px; gap: 24px; border-radius: 22px; font-size: 16px; line-height: 1.45; }
	.dgq-badge strong { font-size: 19px; line-height: 1.4; }
	.dgq-badge-ico { width: 52px; height: 52px; }

	.dgq-title span { display: block; }
	.dgq-title br,
	.dgq-lead br { display: none; }

	.dgq-card {
		grid-template-columns: 72px 1fr auto;
		column-gap: 20px;
		height: auto;
		min-height: 104px;
		padding: 16px 24px 16px 16px;
		border-radius: 18px;
	}
	.dgq-card-ico { width: 72px; height: 66px; border-radius: 16px; }
	.dgq-card-ico svg,
	.dgq-card:nth-child(3) .dgq-card-ico svg { width: 46px; height: 38px; }
	.dgq .dgq-card-title { font-size: 18px; line-height: 1.3; white-space: normal; }
	.dgq .dgq-card-text { margin-top: 4px; line-height: 1.45; }
	.dgq-card-arrow { width: 24px; height: 24px; }

	.dgq-testi-ico { left: 28px; top: 20px; width: 44px; height: 44px; }
	.dgq-testi-ico svg { width: 26px; height: 20px; }
	.dgq .dgq-slide blockquote p { font-size: 17px; line-height: 1.5; }
	.dgq-slide figcaption { margin-top: 20px; font-size: 15px; line-height: 1.5; }
	.dgq-slide figcaption::before { width: 36px; height: 2px; margin-bottom: 14px; }
	.dgq-slide figcaption strong { font-size: 16px; }
	.dgq-nav { right: 24px; bottom: 22px; gap: 8px; }
	.dgq-nav button { width: 48px; height: 48px; }
	.dgq-nav svg { width: 22px; height: 22px; }
}
@media (max-width: 767.98px) {
	.dgq-stage { grid-template-columns: minmax(0, 1fr); grid-template-areas: "content" "cards" "photo" "badge" "testi"; }
	.dgq-photo img { aspect-ratio: 4 / 3; object-position: 70% 45%; }
	.dgq-card { grid-template-columns: 56px 1fr; grid-template-areas: "ico title" "ico text"; padding-right: 18px; }
	.dgq-card-ico { width: 56px; height: 56px; border-radius: 14px; }
	.dgq-card-ico svg,
	.dgq-card:nth-child(3) .dgq-card-ico svg { width: 36px; height: 30px; }
	.dgq .dgq-card-arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.dgq-tile,
	.dgq-dash,
	.dgq-gear,
	.dgq-links-glow,
	.dgq-links-dots circle,
	.dgq-badge::after { animation: none; }
	.dgq *,
	.dgq *::before,
	.dgq *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation-duration: 0s !important; }
}

/* ==========================================================================
   DIGIlium — Portfolio : hero « Nos équipes »
   Desktop : cotes en --u = 1px de la maquette (1942 × 809), ramené à la fenêtre.
   Le décor (carte, arcs, épingles, bureau flou) est la plaque img/features/equipes* ;
   textes, cartes, étiquettes, drapeaux et icônes sont en HTML / SVG par-dessus.
   La hiérarchie surtitre → titre → chapeau vient du système commun (dg-section).
   ========================================================================== */

.dgt {
	--u: min(1.12px, calc(100vw / 1942));

	--dgt-navy: #000448;
	--dgt-ink: #0f1c69;
	--dgt-sub: #15226e;
	--dgt-blue: #0070fe;
	--dgt-ease: cubic-bezier(.22, 1, .36, 1);

	--dgt-next: var(--dg-bg); /* teinte de page commune */

	position: relative;
	background: var(--dgt-next);
	color: var(--dgt-ink);
	font-family: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
@media (min-width: 1200px) {
	.dgt {
		--dg-title-fs: calc(var(--u) * 56);
		--dg-title-lh: calc(var(--u) * 55);
		--dg-title-ls: -.03em;
		--dg-title-mt: calc(var(--u) * 30);
		--dg-lead-fs: calc(var(--u) * 21.7);
		--dg-lead-lh: calc(var(--u) * 27.6);
		--dg-lead-mt: calc(var(--u) * 24);
	}
}
.dgt *,
.dgt *::before,
.dgt *::after { box-sizing: border-box; }
.dgt ul { margin: 0; padding: 0; list-style: none; }
.dgt li { margin: 0; font-weight: inherit; }
.dgt p { margin: 0; font-family: inherit; color: inherit; }
.dgt h2 { margin: 0; font-family: inherit; text-transform: none; letter-spacing: normal; }
.dgt a { text-decoration: none; }
.dgt svg { display: block; overflow: visible; }
.dgt-sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}
.dgt-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.dgt-stage {
	position: relative;
	isolation: isolate;
	max-width: calc(var(--u) * 1942);
	min-height: calc(var(--u) * 809);
	margin: 0 auto;
	/* bas : toute la respiration avant « Notre méthode » (son surtitre est à 25u du haut) */
	padding: calc(var(--u) * 283) 0 calc(var(--dg-rhythm) - var(--u) * 25);
	overflow: hidden;
}
.dgt-plate {
	position: absolute;
	z-index: -2;
	inset: 0 0 auto;
}
.dgt-plate img {
	display: block;
	width: 100%;
	height: auto;
}

/* --------------------------------------------------------------------------
   Carte : liaisons, ondes et étiquettes (repère de la maquette x 1100–1640, y 0–280)
   -------------------------------------------------------------------------- */
.dgt-map {
	/* --m : 1px de la maquette dans le repère de la carte (résolu chez chaque enfant) */
	--m: calc(100cqw / 540);

	position: absolute;
	z-index: -1;
	left: calc(var(--u) * 1100);
	top: 0;
	width: calc(var(--u) * 540);
	height: calc(var(--u) * 280);
	container-type: inline-size;
	pointer-events: none;
}
.dgt-routes {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: #f2fbff;
	stroke-width: 2.6;
	stroke-linecap: round;
	filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px rgba(90, 185, 255, .95));
}
/* une impulsion lumineuse parcourt chaque liaison */
.dgt-routes path {
	stroke-dasharray: .09 1;
	stroke-dashoffset: .09;
	animation: dgt-flow 3.6s cubic-bezier(.45, 0, .25, 1) infinite;
	animation-delay: var(--d);
}
@keyframes dgt-flow {
	0% { stroke-dashoffset: .09; opacity: 0; }
	12% { opacity: 1; }
	80% { opacity: 1; }
	100% { stroke-dashoffset: -1; opacity: 0; }
}
/* ondes au pied des épingles */
.dgt-ping {
	position: absolute;
	left: calc(50% + (var(--x) - 1370) * var(--m));
	top: calc(var(--m) * var(--y));
	width: calc(var(--m) * 36);
	height: calc(var(--m) * 13);
	margin: calc(var(--m) * -6.5) 0 0 calc(var(--m) * -18);
	border: 1.5px solid rgba(205, 240, 255, .95);
	border-radius: 50%;
	box-shadow: 0 0 calc(var(--m) * 8) rgba(110, 200, 255, .8);
	opacity: 0;
	animation: dgt-ping 2.7s ease-out infinite;
	animation-delay: var(--d);
}
@keyframes dgt-ping {
	0% { opacity: .95; transform: scale(.25); }
	100% { opacity: 0; transform: scale(1.7); }
}
.dgt-tag {
	position: absolute;
	left: calc(50% + (var(--x) - 1370) * var(--m));
	top: calc(var(--m) * var(--y));
	display: grid;
	place-items: center;
	width: calc(var(--m) * var(--w));
	height: calc(var(--m) * 34);
	border-radius: 999px;
	background: linear-gradient(180deg, #fff, #f3f8ff);
	box-shadow:
		0 0 calc(var(--m) * 14) rgba(130, 205, 255, .55),
		0 calc(var(--m) * 5) calc(var(--m) * 12) rgba(0, 40, 130, .28);
	padding-top: calc(var(--m) * 3);
	font-size: calc(var(--m) * 16.8);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -.01em;
	white-space: nowrap;
	color: #000755;
	animation: dgt-float 6s ease-in-out infinite;
	animation-delay: var(--d);
}
@keyframes dgt-float { 50% { translate: 0 calc(var(--m) * -4); } }

/* --------------------------------------------------------------------------
   Bloc texte
   -------------------------------------------------------------------------- */
.dgt-content {
	position: absolute;
	left: var(--dg-edge-x);
	top: calc(var(--u) * 103);
}
.dgt-content .dg-lead + .dg-lead { margin-top: calc(var(--u) * 23); }
/* chapeau : retour à la ligne naturel dans sa colonne, pour ne jamais toucher les cartes */
@media (min-width: 1200px) {
	.dgt .dg-lead { max-width: calc(var(--u) * 520); white-space: normal; text-wrap: pretty; }
	.dgt .dg-lead br { display: none; }
}

/* --------------------------------------------------------------------------
   Colonne de droite : phrase manuscrite et atouts
   -------------------------------------------------------------------------- */
.dgt .dgt-script {
	position: absolute;
	left: calc(var(--u) * 1690);
	top: calc(var(--u) * 40);
	font-family: "Sacramento", "Segoe Script", cursive;
	font-size: calc(var(--u) * 37);
	line-height: calc(var(--u) * 46);
	white-space: nowrap;
	color: #fff;
	-webkit-text-stroke: calc(var(--u) * .6) #fff;
	text-shadow: 0 0 calc(var(--u) * 14) rgba(120, 195, 255, .65);
	/* Sacramento est plus large que l’écriture de la maquette : on l’allonge légèrement */
	transform: rotate(-8deg) scaleY(1.12);
	transform-origin: 0 100%;
}
.dgt-script span { margin-left: calc(var(--u) * 6); }
.dgt-swoosh {
	position: absolute;
	left: calc(var(--u) * 92);
	top: calc(var(--u) * 88);
	width: calc(var(--u) * 116);
	height: calc(var(--u) * 26);
	fill: none;
	stroke: #fff;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
	animation: dgt-draw 1.4s var(--dgt-ease) .5s backwards;
}
@keyframes dgt-draw { from { stroke-dashoffset: 1; } }

.dgt .dgt-assets {
	position: absolute;
	left: calc(var(--u) * 1714);
	top: calc(var(--u) * 160);
	display: flex;
	flex-direction: column;
	gap: calc(var(--u) * 16.2);
}
.dgt-assets li {
	display: flex;
	align-items: center;
	gap: calc(var(--u) * 10.5);
	font-size: max(11.5px, calc(var(--u) * 15.4));
	line-height: calc(var(--u) * 20.5);
	color: #f4f9ff;
}
.dgt-asset-ico {
	flex: none;
	display: grid;
	place-items: center;
	width: calc(var(--u) * 64);
	height: calc(var(--u) * 64);
	border-radius: 50%;
	background: radial-gradient(circle at 50% 30%, rgba(14, 76, 160, .38), rgba(0, 30, 88, .34) 72%);
	box-shadow:
		inset 0 0 0 1px rgba(120, 180, 255, .07),
		0 calc(var(--u) * 6) calc(var(--u) * 16) rgba(0, 16, 60, .22);
	transition: box-shadow .45s ease, background .45s ease;
}
.dgt-asset-ico svg {
	width: calc(var(--u) * 44);
	height: calc(var(--u) * 44);
	fill: none;
	stroke: #b4efff;
	stroke-width: 2.1;
	stroke-linecap: round;
	stroke-linejoin: round;
	filter: drop-shadow(0 0 calc(var(--u) * 5) rgba(110, 215, 255, .9));
	transition: transform .55s var(--dgt-ease);
}
.dgt-asset-ico .dgt-ico-users { width: calc(var(--u) * 42); height: calc(var(--u) * 34); stroke-width: 1.7; }
.dgt-asset-ico .dgt-ico-gear { stroke-width: 1.5; }
.dgt-assets li:hover .dgt-asset-ico {
	background: radial-gradient(circle at 50% 30%, rgba(40, 130, 240, .75), rgba(0, 50, 140, .85) 70%);
	box-shadow: inset 0 0 0 1px rgba(170, 220, 255, .4), 0 0 calc(var(--u) * 26) rgba(40, 140, 255, .6);
}
.dgt-assets li:hover .dgt-asset-ico svg { transform: scale(1.1); }

/* --------------------------------------------------------------------------
   Cartes des trois sites
   -------------------------------------------------------------------------- */
.dgt .dgt-sites {
	display: grid;
	grid-template-columns: 356fr 346fr 336fr;
	gap: calc(var(--u) * 12);
	width: calc(var(--u) * 1062);
	margin-left: calc(var(--u) * 632);
}
.dgt-site {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: calc(var(--u) * 379);
	padding: 0 calc(var(--u) * 18) calc(var(--u) * 4);
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .95);
	border-radius: calc(var(--u) * 16);
	background: rgba(250, 252, 254, .97);
	box-shadow:
		0 0 0 calc(var(--u) * 4) rgba(255, 255, 255, .3),
		0 calc(var(--u) * 20) calc(var(--u) * 40) calc(var(--u) * -18) rgba(10, 60, 150, .32);
	transition: transform .55s var(--dgt-ease), box-shadow .45s ease, border-color .45s ease;
}
.dgt-site:hover,
.dgt-site:focus-within {
	transform: translateY(calc(var(--u) * -8));
	border-color: rgba(160, 205, 255, .95);
	box-shadow:
		0 0 0 calc(var(--u) * 4) rgba(214, 233, 255, .5),
		0 calc(var(--u) * 30) calc(var(--u) * 54) calc(var(--u) * -20) rgba(0, 80, 210, .4);
}
.dgt-site-media {
	position: relative;
	margin: 0 calc(var(--u) * -18);
}
.dgt-photo {
	display: block;
	height: calc(var(--u) * 243);
	overflow: hidden;
}
.dgt-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.1s var(--dgt-ease);
}
.dgt-site:hover .dgt-photo img,
.dgt-site:focus-within .dgt-photo img { transform: scale(1.06); }
.dgt-flag {
	position: absolute;
	left: calc(var(--u) * 13);
	bottom: calc(var(--u) * -20);
	width: calc(var(--u) * 46);
	height: calc(var(--u) * 46);
	border-radius: 50%;
	box-shadow:
		0 0 0 calc(var(--u) * 3) #fff,
		0 calc(var(--u) * 5) calc(var(--u) * 12) rgba(0, 30, 90, .35);
	transition: transform .6s var(--dgt-ease);
}
.dgt-site:hover .dgt-flag,
.dgt-site:focus-within .dgt-flag { transform: rotate(-12deg) scale(1.08); }

.dgt-site-head {
	display: flex;
	align-items: center;
	gap: calc(var(--u) * 10);
	margin: calc(var(--u) * 4) calc(var(--u) * -10) 0 calc(var(--u) * 46);
}
.dgt-site-head > div { flex: 1; min-width: 0; }
.dgt .dgt-site-name {
	font-size: max(15px, calc(var(--u) * 23.5));
	font-weight: 800;
	line-height: calc(var(--u) * 27);
	letter-spacing: -.01em;
	color: var(--dgt-navy);
}
.dgt .dgt-site-link { font: inherit; color: inherit; }
/* toute la carte est cliquable */
.dgt-site-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}
.dgt .dgt-site-link:focus-visible { outline: none; }
.dgt-site:has(.dgt-site-link:focus-visible) {
	outline: 2px solid var(--dgt-blue);
	outline-offset: 4px;
}
.dgt .dgt-site-role {
	margin-top: calc(var(--u) * -2);
	font-size: max(12.5px, calc(var(--u) * 16));
	line-height: calc(var(--u) * 21);
	color: var(--dgt-sub);
}
.dgt-site-btn {
	flex: none;
	display: grid;
	place-items: center;
	width: calc(var(--u) * 45);
	height: calc(var(--u) * 45);
	border-radius: 50%;
	background: #d9edfd;
	color: #046ffe;
	translate: 0 calc(var(--u) * 7);
	transition: background .4s ease, color .4s ease, transform .5s var(--dgt-ease);
}
.dgt-site-btn svg {
	width: calc(var(--u) * 24);
	height: calc(var(--u) * 24);
	fill: none;
	stroke: currentColor;
	stroke-width: 2.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .45s var(--dgt-ease);
}
.dgt-site:hover .dgt-site-btn,
.dgt-site:focus-within .dgt-site-btn { background: linear-gradient(150deg, #1785ff, #0068fb); color: #fff; }
.dgt-site:hover .dgt-site-btn svg,
.dgt-site:focus-within .dgt-site-btn svg { transform: translateX(calc(var(--u) * 3)); }
.dgt .dgt-site-text {
	margin-top: calc(var(--u) * 10);
	font-size: max(12.5px, calc(var(--u) * 16.6));
	line-height: calc(var(--u) * 20.4);
	white-space: nowrap;
	color: var(--dgt-ink);
}

/* la carte Bulgarie (4 lignes) a un interligne plus serré, comme la maquette */
@media (min-width: 1600px) {
	.dgt-site:nth-child(3) .dgt-site-text { margin-top: calc(var(--u) * 5); line-height: calc(var(--u) * 18.7); }
}

/* --------------------------------------------------------------------------
   Barre des engagements
   -------------------------------------------------------------------------- */
.dgt .dgt-pillars {
	display: grid;
	grid-template-columns: 427fr 455fr 442fr 481fr;
	width: calc(var(--u) * 1878 - var(--dg-edge-x));
	min-height: calc(var(--u) * 114);
	margin: calc(var(--u) * 16) 0 0 var(--dg-edge-x);
	border: 1px solid rgba(255, 255, 255, .95);
	border-radius: calc(var(--u) * 18);
	background: rgba(251, 252, 254, .93);
	box-shadow: 0 calc(var(--u) * 16) calc(var(--u) * 36) calc(var(--u) * -20) rgba(10, 60, 150, .25);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}
.dgt-pillar {
	position: relative;
	display: flex;
	align-items: center;
	gap: calc(var(--u) * var(--g));
	padding: calc(var(--u) * 10) calc(var(--u) * 14) calc(var(--u) * 10) calc(var(--u) * var(--pl));
}
.dgt-pillar + .dgt-pillar::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(var(--u) * 24);
	bottom: calc(var(--u) * 24);
	width: 1px;
	background: #cde5fb;
}
.dgt-pillar-ico {
	flex: none;
	display: grid;
	place-items: center;
	width: calc(var(--u) * 93);
	height: calc(var(--u) * 93);
	border-radius: 50%;
	background: radial-gradient(circle at 50% 35%, #e8f4fe, #dbedfd);
	transition: background .45s ease, box-shadow .45s ease;
}
.dgt-pillar-ico svg {
	width: calc(var(--u) * 52);
	height: calc(var(--u) * 52);
	fill: none;
	stroke: #006ffe;
	stroke-width: 2.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: stroke .45s ease, transform .55s var(--dgt-ease);
}
.dgt-pillar-ico svg:not([class]) { width: calc(var(--u) * 64); height: calc(var(--u) * 64); stroke-width: 2.3; }
.dgt-pillar-ico .dgt-ico-users { width: calc(var(--u) * 60); height: calc(var(--u) * 49); stroke-width: 1.8; }
.dgt-pillar-ico .dgt-ico-gear { width: calc(var(--u) * 58); height: calc(var(--u) * 58); stroke-width: 1.6; }
.dgt-pillar:hover .dgt-pillar-ico {
	background: linear-gradient(150deg, #2a92ff, #0a6ffb);
	box-shadow: 0 calc(var(--u) * 12) calc(var(--u) * 24) calc(var(--u) * -10) rgba(0, 100, 250, .55);
}
.dgt-pillar:hover .dgt-pillar-ico svg { stroke: #fff; transform: scale(1.08); }
.dgt .dgt-pillar-title {
	font-size: max(13px, calc(var(--u) * 18.4));
	font-weight: 700;
	line-height: calc(var(--u) * 22.5);
	white-space: nowrap;
	color: #000041;
}
.dgt .dgt-pillar-text {
	margin-top: calc(var(--u) * 7);
	font-size: max(12px, calc(var(--u) * 15.6));
	line-height: calc(var(--u) * 19.6);
	white-space: nowrap;
	color: #27377e;
}

/* --------------------------------------------------------------------------
   Desktop compact (1200–1599) : petits textes lisibles, passage à la ligne autorisé
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) and (max-width: 1599.98px) {
	.dgt .dg-lead { white-space: normal; max-width: calc(var(--u) * 520); font-size: max(13.5px, calc(var(--u) * 21)); line-height: 1.42; }
	.dgt .dg-lead br { display: none; }
	.dgt .dgt-site-text,
	.dgt .dgt-pillar-text { white-space: normal; line-height: 1.38; text-wrap: pretty; }
	.dgt-site-text br,
	.dgt-pillar-text br { display: none; }
	.dgt .dgt-site-role { line-height: 1.3; }
	.dgt .dgt-pillar-title { white-space: normal; line-height: 1.25; }
	.dgt-assets li { line-height: 1.25; }
}

/* --------------------------------------------------------------------------
   Tablette & mobile (< 1200) : composition éditoriale
   - la carte devient une scène plein cadre recadrée sur les trois sites,
     la phrase manuscrite posée dessus, étiquettes toujours lisibles ;
   - les atouts forment un panneau bleu nuit, les engagements une liste ;
   - sur téléphone, les trois sites défilent en carrousel (pastilles).
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
	.dgt { --u: .82px; }
	.dgt-stage {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "scene" "content" "sites" "dots" "assets" "pillars";
		gap: 22px;
		min-height: 0;
		padding: 0 0 var(--dg-section-y);
		background: linear-gradient(180deg, var(--dg-bg) 0%, #eef5fd 70%, var(--dgt-next) 100%);
	}
	.dgt-stage::after,
	.dgt-plate { display: none; }
	.dgt .dg-title br,
	.dgt .dg-lead br { display: none; }
	.dgt .dg-title span { display: block; }
	.dgt .dg-lead { max-width: 62ch; white-space: normal; }
	.dgt .dgt-sites,
	.dgt .dgt-assets,
	.dgt .dgt-pillars { margin-left: var(--dg-gutter); margin-right: var(--dg-gutter); }

	/* scène plein cadre : la carte recadrée façon « cover » */
	.dgt-map {
		--m: max(100cqw / 540, 100cqh / 280);
		position: relative;
		z-index: auto;
		grid-area: scene;
		left: auto;
		top: auto;
		width: calc(100% + 2 * var(--dg-gutter));
		height: auto;
		margin: 0 calc(var(--dg-gutter) * -1);
		aspect-ratio: 540 / 280;
		overflow: hidden;
		container-type: size;
		border-radius: 0 0 28px 28px;
		background: #0c5fd6 image-set(url("img/features/equipes-carte.webp") type("image/webp"), url("img/features/equipes-carte.jpg") type("image/jpeg")) 50% 0 / cover no-repeat;
		box-shadow: none;
	}

	/* carte blanche qui remonte sur la scène */
	.dgt-content {
		position: relative;
		left: auto;
		top: auto;
		z-index: 2;
		grid-area: content;
		width: calc(100% - 2 * var(--dg-gutter));
		margin: clamp(-96px, -16vw, -56px) auto 0;
		padding: 30px 26px 28px;
		border-radius: 26px;
		background: #fff;
		box-shadow: 0 30px 60px -18px rgba(4, 18, 46, .28), 0 2px 8px rgba(4, 18, 46, .07);
	}
	/* voile bleu nuit en bas à gauche, où se pose la phrase manuscrite */
	.dgt-map::before {
		content: "";
		position: absolute;
		inset: 0;
		background: radial-gradient(ellipse 72% 78% at 0 100%, rgba(2, 30, 90, .6), transparent 70%);
	}
	.dgt-tag {
		width: auto;
		height: auto;
		padding: .5em .9em .45em;
		font-size: clamp(12px, calc(var(--m) * 16.8), 16px);
	}
	.dgt-aside { display: contents; }
	.dgt .dgt-script { display: none; }

	.dgt .dgt-sites {
		grid-area: sites;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 20px;
		width: auto;
		margin: 0;
	}
	.dgt .dg-rail-dots { grid-area: dots; margin-top: -16px; }
	.dgt-site { min-height: 0; padding: 0 20px 22px; border-radius: 20px; }
	.dgt-site-media { margin: 0 -20px; }
	.dgt-photo { height: auto; aspect-ratio: 346 / 243; }
	.dgt-flag { left: 16px; bottom: -22px; width: 48px; height: 48px; box-shadow: 0 0 0 3px #fff, 0 5px 12px rgba(0, 30, 90, .35); }
	.dgt-site-head { gap: 10px; margin: 8px -6px 0 54px; }
	.dgt .dgt-site-name { font-size: 20px; line-height: 1.25; }
	.dgt .dgt-site-role { font-size: 15px; line-height: 1.35; }
	.dgt-site-btn { width: 42px; height: 42px; translate: none; }
	.dgt-site-btn svg { width: 22px; height: 22px; }
	.dgt .dgt-site-text { margin-top: 14px; font-size: 15px; line-height: 1.5; white-space: normal; }
	.dgt-site-text br { display: none; }

	/* atouts : panneau bleu nuit */
	.dgt .dgt-assets {
		position: static;
		grid-area: assets;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px 24px;
		padding: 26px clamp(20px, 4vw, 34px);
		border-radius: 24px;
		background:
			radial-gradient(ellipse 70% 90% at 100% 0, rgba(40, 140, 255, .45), transparent 70%),
			linear-gradient(160deg, #0a3f9e 0%, #032a6e 60%, #021d52 100%);
		box-shadow: 0 24px 50px -24px rgba(0, 30, 100, .55);
	}
	.dgt-assets li { gap: 14px; font-size: 15px; line-height: 1.35; }
	.dgt-assets li br { display: none; }
	.dgt-asset-ico { width: 50px; height: 50px; }
	.dgt-asset-ico svg { width: 28px; height: 28px; }
	.dgt-asset-ico .dgt-ico-users { width: 30px; height: 25px; }

	.dgt .dgt-pillars {
		grid-area: pillars;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: auto;
		margin: 0;
		padding: 8px;
		border-radius: 20px;
	}
	.dgt-pillar { gap: 18px; padding: 16px 16px 16px 14px; }
	.dgt-pillar + .dgt-pillar::before { display: none; }
	.dgt-pillar-ico { width: 64px; height: 64px; }
	.dgt-pillar-ico svg,
	.dgt-pillar-ico svg:not([class]) { width: 34px; height: 34px; }
	.dgt-pillar-ico .dgt-ico-users { width: 36px; height: 30px; }
	.dgt-pillar-ico .dgt-ico-gear { width: 34px; height: 34px; }
	.dgt .dgt-pillar-title { font-size: 16.5px; line-height: 1.3; white-space: normal; }
	.dgt .dgt-pillar-text { margin-top: 4px; font-size: 14.5px; line-height: 1.45; white-space: normal; }
	.dgt-pillar-title br,
	.dgt-pillar-text br { display: none; }
}

/* 600–899 : cartes en ligne (photo à gauche) */
@media (min-width: 600px) and (max-width: 899.98px) {
	.dgt .dgt-sites { grid-template-columns: minmax(0, 1fr); }
	.dgt-site {
		display: grid;
		grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		column-gap: 22px;
		padding: 0 22px 0 0;
	}
	.dgt-site-media { grid-row: 1 / span 2; margin: 0; }
	.dgt-photo { height: 100%; min-height: 200px; aspect-ratio: auto; }
	.dgt-flag { top: 14px; bottom: auto; left: 14px; }
	.dgt-site-head { margin: 22px -4px 0 0; }
	.dgt .dgt-site-text { margin: 12px 0 22px; }
}

/* < 600 : scène plus haute, sites en carrousel, atouts en grille d'icônes */
@media (max-width: 599.98px) {
	.dgt-map { aspect-ratio: 3 / 2; }
	.dgt .dgt-sites {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 84%;
		gap: 14px;
		margin: 0 calc(var(--dg-gutter) * -1);
		padding: 4px var(--dg-gutter) 10px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--dg-gutter);
		scrollbar-width: none;
	}
	.dgt .dgt-sites::-webkit-scrollbar { display: none; }
	.dgt-site { scroll-snap-align: start; }
	.dgt .dgt-assets { gap: 22px 16px; }
	.dgt-assets li { flex-direction: column; align-items: flex-start; gap: 10px; font-size: 14px; }
	.dgt .dgt-pillars { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	.dgt-routes path,
	.dgt-ping { animation: none; opacity: 0; }
	.dgt-tag,
	.dgt-swoosh { animation: none; }
	.dgt *,
	.dgt *::before,
	.dgt *::after { transition-duration: 0s !important; }
}

/* ==========================================================================
   DIGIlium — Portfolio : « Notre méthode » (sous le hero « Nos équipes »)
   Desktop : cotes en --u = 1px de la maquette (1942 × 809), ramené à la fenêtre.
   Fond : plaque img/features/methode* ; tout le reste est en HTML / SVG.
   Sous 1200px, la frise devient un carrousel horizontal (défilement à l'aimant).
   ========================================================================== */

.dgm {
	--u: min(1.12px, calc(100vw / 1942));

	--dgm-navy: #000032;
	--dgm-ink: #00003e;
	--dgm-text: #1c2966;
	--dgm-blue: #0070fe;
	--dgm-line: #70b6fd;
	--dgm-ease: cubic-bezier(.22, 1, .36, 1);
	--dgm-top: var(--dg-bg);  /* teinte de page commune */
	--dgm-next: var(--dg-bg);

	position: relative;
	background: var(--dgm-top);
	color: var(--dgm-ink);
	font-family: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
@media (min-width: 1200px) {
}
.dgm *,
.dgm *::before,
.dgm *::after { box-sizing: border-box; }
.dgm ol { margin: 0; padding: 0; list-style: none; }
.dgm li { margin: 0; font-weight: inherit; }
.dgm p { margin: 0; font-family: inherit; color: inherit; }
.dgm h3 { margin: 0; font-family: inherit; text-transform: none; letter-spacing: normal; }
.dgm a { text-decoration: none; }
.dgm svg { display: block; overflow: visible; }
.dgm-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.dgm-stage {
	position: relative;
	isolation: isolate;
	max-width: calc(var(--u) * 1942);
	min-height: calc(var(--u) * 809);
	margin: 0 auto;
	padding: calc(var(--u) * 313) 0 calc(var(--u) * 100);
	overflow: hidden;
}
.dgm-plate {
	position: absolute;
	z-index: -2;
	inset: 0 0 auto;
}
.dgm-plate img { display: block; width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   En-tête : texte à gauche, engagement à droite
   -------------------------------------------------------------------------- */
.dgm-content {
	position: absolute;
	left: var(--dg-edge-x);
	top: calc(var(--u) * 25);
}
.dgm .dgm-aside {
	position: absolute;
	left: calc(var(--u) * 1183);
	top: calc(var(--u) * 97);
	padding: calc(var(--u) * 8) 0 calc(var(--u) * 17) calc(var(--u) * 70);
	border-left: 1px solid rgba(113, 124, 169, .75);
	font-size: calc(var(--u) * 23.7);
	line-height: calc(var(--u) * 30.5);
	white-space: nowrap;
	color: #00003b;
}

/* --------------------------------------------------------------------------
   Frise des sept étapes
   -------------------------------------------------------------------------- */
.dgm .dgm-steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: calc(var(--u) * 13.7);
	width: calc(var(--u) * 1866);
	margin-left: calc(var(--u) * 39);
	/* filet discret qui traverse les photos d’une étape à l’autre */
	background: linear-gradient(90deg, rgb(120 185 250 / 0), rgb(120 185 250 / .55) 3%, rgb(120 185 250 / .55) 97%, rgb(120 185 250 / 0)) 0 calc(var(--u) * 285) / 100% 1.5px no-repeat;
}
/* le fil qui relie les numéros (du 1er au 7e) */
.dgm-steps::before,
.dgm-steps::after {
	content: "";
	position: absolute;
	top: calc(var(--u) * -9);
	left: calc((100% - 6 * var(--u) * 13.7) / 14);
	right: calc((100% - 6 * var(--u) * 13.7) / 14);
	height: 2px;
	margin-top: -1px;
	pointer-events: none;
}
.dgm-steps::before {
	background: var(--dgm-line);
	transform-origin: 0 50%;
}
/* une impulsion lumineuse parcourt le fil */
.dgm-steps::after {
	height: 4px;
	margin-top: -2px;
	background: linear-gradient(90deg, rgb(160 215 255 / 0), #fff 45%, #bfe4ff 55%, rgb(160 215 255 / 0)) no-repeat;
	background-size: calc(var(--u) * 160) 100%;
	background-position: calc(var(--u) * -160) 0;
	filter: drop-shadow(0 0 calc(var(--u) * 5) rgba(40, 150, 255, .9));
	animation: dgm-pulse 6s cubic-bezier(.45, 0, .55, 1) infinite 1.8s;
}
@keyframes dgm-pulse {
	0% { background-position: calc(var(--u) * -160) 0; opacity: 0; }
	8% { opacity: 1; }
	62% { opacity: 1; }
	70%, 100% { background-position: calc(100% + var(--u) * 160) 0; opacity: 0; }
}

.dgm-step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: calc(var(--u) * 363);
	padding: calc(var(--u) * 24) calc(var(--u) * 9) calc(var(--u) * 3);
	border: 1px solid rgba(255, 255, 255, .95);
	border-radius: calc(var(--u) * 16);
	background: rgba(253, 254, 254, .93);
	box-shadow:
		0 0 0 calc(var(--u) * 4) rgba(255, 255, 255, .28),
		0 calc(var(--u) * 18) calc(var(--u) * 38) calc(var(--u) * -20) rgba(16, 70, 160, .28);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	text-align: center;
	transition: transform .55s var(--dgm-ease), box-shadow .45s ease, border-color .45s ease;
}
/* jalon entre deux étapes */
.dgm-step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: calc(var(--u) * -15);
	right: calc(var(--u) * -13);
	width: calc(var(--u) * 12);
	height: calc(var(--u) * 12);
	border-radius: 50%;
	background: #067cf3;
	box-shadow: 0 0 0 calc(var(--u) * 3) rgba(6, 124, 243, .14);
}
.dgm-step:hover,
.dgm-step:focus-within {
	transform: translateY(calc(var(--u) * -8));
	border-color: rgba(160, 205, 255, .95);
	box-shadow:
		0 0 0 calc(var(--u) * 4) rgba(214, 233, 255, .5),
		0 calc(var(--u) * 28) calc(var(--u) * 50) calc(var(--u) * -20) rgba(0, 80, 210, .38);
}
.dgm-step:hover::after,
.dgm-step:focus-within::after { transform: translateY(calc(var(--u) * 8)); }

.dgm-num {
	position: absolute;
	top: calc(var(--u) * -33);
	left: 50%;
	display: grid;
	place-items: center;
	width: calc(var(--u) * 50);
	height: calc(var(--u) * 50);
	margin-left: calc(var(--u) * -25);
	border-radius: 50%;
	background: radial-gradient(circle at 34% 28%, #5cb4ff 0%, #2f8bfd 48%, #1462f4 100%);
	box-shadow:
		0 0 0 calc(var(--u) * 2.5) #fff,
		0 0 calc(var(--u) * 16) rgba(30, 130, 255, .55);
	font-size: calc(var(--u) * 25);
	font-weight: 800;
	line-height: 1;
	color: #fff;
	transition: transform .5s cubic-bezier(.3, 1.6, .5, 1);
}
.dgm-step:hover .dgm-num,
.dgm-step:focus-within .dgm-num { transform: scale(1.12); }

.dgm-ico {
	display: grid;
	place-items: center;
	flex: none;
	width: calc(var(--u) * 86);
	height: calc(var(--u) * 86);
	border-radius: 50%;
	background: #e4f1fd;
	transition: background .45s ease, box-shadow .45s ease;
}
.dgm-ico svg {
	width: calc(var(--u) * 56);
	height: calc(var(--u) * 56);
	fill: none;
	stroke: #006fff;
	stroke-width: 2.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: stroke .45s ease, transform .55s var(--dgm-ease);
}
.dgm-step:hover .dgm-ico,
.dgm-step:focus-within .dgm-ico {
	background: linear-gradient(150deg, #2a92ff, #0a6ffb);
	box-shadow: 0 calc(var(--u) * 12) calc(var(--u) * 22) calc(var(--u) * -10) rgba(0, 100, 250, .55);
}
.dgm-step:hover .dgm-ico svg,
.dgm-step:focus-within .dgm-ico svg { stroke: #fff; transform: scale(1.08); }

.dgm .dgm-step-title {
	margin-top: calc(var(--u) * 2);
	font-size: max(14px, calc(var(--u) * 23));
	font-weight: 800;
	line-height: calc(var(--u) * 28);
	letter-spacing: -.01em;
	white-space: nowrap;
}
.dgm .dgm-link { font: inherit; color: var(--dgm-navy); }
/* toute la carte est cliquable */
.dgm-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: inherit;
}
.dgm .dgm-link:focus-visible { outline: none; }
.dgm-step:has(.dgm-link:focus-visible) {
	outline: 2px solid var(--dgm-blue);
	outline-offset: 4px;
}
.dgm .dgm-step-text {
	margin-top: calc(var(--u) * 3);
	font-size: max(12.5px, calc(var(--u) * 18.4));
	line-height: calc(var(--u) * 22.6);
	white-space: nowrap;
	color: var(--dgm-text);
}

.dgm-photo {
	display: block;
	width: 100%;
	height: calc(var(--u) * 136);
	margin-top: auto;
	overflow: hidden;
	border-radius: calc(var(--u) * 14);
}
.dgm-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--op, 50% 50%);
	transition: transform 1.1s var(--dgm-ease);
}
.dgm-step:hover .dgm-photo img,
.dgm-step:focus-within .dgm-photo img { transform: scale(1.07); }

.dgm-go {
	position: absolute;
	left: 50%;
	bottom: calc(var(--u) * -35);
	display: grid;
	place-items: center;
	width: calc(var(--u) * 56);
	height: calc(var(--u) * 56);
	margin-left: calc(var(--u) * -28);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 20) rgba(16, 70, 160, .2);
	color: #006efe;
	transition: background .4s ease, color .4s ease, box-shadow .4s ease;
}
.dgm-go svg {
	width: calc(var(--u) * 25);
	height: calc(var(--u) * 25);
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .45s var(--dgm-ease);
}
.dgm-step:hover .dgm-go,
.dgm-step:focus-within .dgm-go {
	background: linear-gradient(150deg, #1785ff, #0068fb);
	color: #fff;
	box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 22) rgba(0, 104, 251, .45);
}
.dgm-step:hover .dgm-go svg,
.dgm-step:focus-within .dgm-go svg { transform: translateX(calc(var(--u) * 4)); }

/* --------------------------------------------------------------------------
   Pied : signature et phrase manuscrite
   -------------------------------------------------------------------------- */
.dgm .dgm-foot {
	position: absolute;
	left: calc(var(--u) * 57);
	top: calc(var(--u) * 744);
	display: flex;
	align-items: center;
	gap: calc(var(--u) * 30);
	font-size: max(10.5px, calc(var(--u) * 14.6));
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .23em;
	text-transform: uppercase;
	white-space: nowrap;
	color: #09145c;
}
.dgm-foot::before {
	content: "";
	flex: none;
	width: calc(var(--u) * 50);
	height: 2px;
	background: #0068fe;
}
.dgm .dgm-script {
	position: absolute;
	left: calc(var(--u) * 1576);
	top: calc(var(--u) * 721);
	font-family: "Sacramento", "Segoe Script", cursive;
	font-size: calc(var(--u) * 47);
	line-height: 1;
	white-space: nowrap;
	color: #006afe;
	-webkit-text-stroke: calc(var(--u) * .7) #006afe;
	transform: rotate(-6deg);
	transform-origin: 0 100%;
}
.dgm-script svg {
	position: absolute;
	left: calc(var(--u) * 88);
	top: calc(var(--u) * 47);
	width: calc(var(--u) * 215);
	height: calc(var(--u) * 12);
	fill: none;
	stroke: #006afe;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-dasharray: 1;
}

/* --------------------------------------------------------------------------
   Entrée au défilement (digilium-system.js pose is-armed / is-in)
   -------------------------------------------------------------------------- */
.dgm-content > :nth-child(2) { --i: 1; }
.dgm-content > :nth-child(3) { --i: 2; }
.dgm-aside { --i: 2; }
.dgm-step { --dg-base: 2; }
.dgm-foot,
.dgm-script { --i: 6; }
.dgm.is-armed :is(.dgm-content > *, .dgm-aside, .dgm-step, .dgm-foot, .dgm-script) { opacity: 0; }
.dgm.is-in :is(.dgm-content > *, .dgm-aside, .dgm-step, .dgm-foot, .dgm-script) {
	animation: dg-rise var(--dg-reveal-dur) var(--dg-ease) backwards;
	animation-delay: min(calc(var(--dg-stagger) * (var(--i, 0) + var(--dg-base, 0))), 720ms);
}
/* le fil se déroule de gauche à droite, la signature se trace */
.dgm.is-armed .dgm-steps::before { transform: scaleX(0); }
.dgm.is-in .dgm-steps::before { transition: transform 1.6s var(--dg-ease) .25s; }
.dgm.is-armed .dgm-script svg { stroke-dashoffset: 1; }
.dgm.is-in .dgm-script svg { transition: stroke-dashoffset 1.2s var(--dg-ease) 1s; }

/* --------------------------------------------------------------------------
   Desktop compact (1200–1599) : textes des étapes autorisés à passer à la ligne
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) and (max-width: 1599.98px) {
	.dgm .dgm-step-text { white-space: normal; line-height: 1.32; text-wrap: balance; }
	.dgm-step-text br { display: none; }
	.dgm .dgm-step-title { white-space: normal; line-height: 1.2; }
	.dgm .dgm-aside { font-size: max(13.5px, calc(var(--u) * 23.2)); line-height: 1.4; }
}

/* --------------------------------------------------------------------------
   Tablette & mobile (< 1200) : en-tête empilé, frise en carrousel horizontal
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
	.dgm { --u: 1px; background: linear-gradient(180deg, var(--dgm-top), #edf5fd 70%, var(--dgm-next)); }
	.dgm-stage {
		display: flex;
		flex-direction: column;
		min-height: 0;
		padding: var(--dg-section-y) 0;
	}
	.dgm-plate,
	.dgm-stage::before,
	.dgm-stage::after { display: none; }
	.dgm-content,
	.dgm .dgm-aside,
	.dgm .dgm-foot,
	.dgm .dgm-script { position: static; }
	.dgm-content { padding: 0 var(--dg-gutter); }
	.dgm .dg-title br,
	.dgm .dg-lead br,
	.dgm-aside br { display: none; }
	.dgm .dg-title span { display: block; }
	.dgm .dgm-aside {
		max-width: 62ch;
		margin: 22px var(--dg-gutter) 0;
		padding-left: 18px;
		border-left-color: #0070fe;
		font-size: clamp(15.5px, 2.1vw, 18px);
		line-height: 1.5;
		white-space: normal;
	}

	.dgm .dgm-steps {
		grid-template-columns: repeat(7, 232px);
		gap: 16px;
		width: auto;
		margin: 26px 0 0;
		padding: 44px var(--dg-gutter) 48px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--dg-gutter);
		scrollbar-width: thin;
		scrollbar-color: #9ccaff transparent;
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--dg-gutter), #000 calc(100% - var(--dg-gutter)), transparent);
		mask-image: linear-gradient(90deg, transparent 0, #000 var(--dg-gutter), #000 calc(100% - var(--dg-gutter)), transparent);
	}
	.dgm-steps::before,
	.dgm-steps::after {
		top: 35px;
		left: calc(var(--dg-gutter) + 116px);
		right: auto;
		width: calc(6 * 248px);
	}
	.dgm .dgm-steps { background: none; }
	.dgm-step { scroll-snap-align: start; min-height: 360px; }
	.dgm-step:hover,
	.dgm-step:focus-within { transform: translateY(-6px); }
	.dgm .dgm-step-title { font-size: 20px; }
	.dgm .dgm-step-text { font-size: 15px; line-height: 1.45; }

	.dgm .dgm-foot {
		margin: 6px var(--dg-gutter) 0;
		gap: 16px;
		font-size: 12px;
		letter-spacing: .24em;
		white-space: normal;
	}
	.dgm-foot::before { width: 36px; }
	.dgm .dgm-script {
		position: relative;
		left: auto;
		top: auto;
		align-self: flex-end;
		margin: 18px var(--dg-gutter) 26px;
		font-size: clamp(36px, 7vw, 46px);
		transform: rotate(-6deg);
		-webkit-text-stroke: .5px #006afe;
	}
	.dgm-script svg { top: auto; bottom: -14px; left: 22%; width: 74%; height: 12px; }
	.dgm .dg-rail-dots { margin: -34px 0 8px; }
}

/* < 600 : la méthode se lit de haut en bas, comme une frise verticale */
@media (max-width: 599.98px) {
	.dgm .dgm-steps {
		display: flex;
		flex-direction: column;
		gap: 12px;
		margin: 30px var(--dg-gutter) 0;
		padding: 0 0 0 46px;
		overflow: visible;
		scroll-snap-type: none;
		-webkit-mask-image: none;
		mask-image: none;
	}
	.dgm-steps::before {
		top: 30px;
		bottom: 30px;
		left: 17px;
		right: auto;
		width: 2px;
		height: auto;
		margin: 0;
		transform-origin: 50% 0;
	}
	.dgm.is-armed .dgm-steps::before { transform: scaleY(0); }
	/* la lueur descend le long de la frise */
	.dgm-steps::after {
		top: 30px;
		left: 16px;
		right: auto;
		width: 4px;
		height: 90px;
		margin: 0;
		background: linear-gradient(180deg, rgb(160 215 255 / 0), #fff 55%, #bfe4ff 70%, rgb(160 215 255 / 0));
		background-size: 100% 100%;
		animation-name: dgm-pulse-down;
	}
	@keyframes dgm-pulse-down {
		0% { top: 30px; opacity: 0; }
		8% { opacity: 1; }
		62% { opacity: 1; }
		70%, 100% { top: calc(100% - 120px); opacity: 0; }
	}
	.dgm-step {
		display: grid;
		grid-template-columns: 44px minmax(0, 1fr) 84px;
		grid-template-areas: "ico title photo" "text text photo";
		align-items: center;
		column-gap: 12px;
		min-height: 0;
		padding: 14px 14px 14px 12px;
		text-align: left;
	}
	.dgm-step:hover,
	.dgm-step:focus-within { transform: none; }
	.dgm-step:not(:last-child)::after,
	.dgm-go { display: none; }
	.dgm-num {
		top: 50%;
		left: -46px;
		width: 34px;
		height: 34px;
		margin: -17px 0 0;
		font-size: 16px;
		box-shadow: 0 0 0 2px #fff, 0 0 12px rgba(30, 130, 255, .5);
	}
	.dgm-ico { grid-area: ico; width: 44px; height: 44px; }
	.dgm-ico svg { width: 24px; height: 24px; stroke-width: 2.8; }
	.dgm .dgm-step-title { grid-area: title; margin: 0; font-size: 17.5px; line-height: 1.25; }
	.dgm .dgm-step-text { grid-area: text; margin-top: 8px; font-size: 14px; line-height: 1.45; white-space: normal; }
	.dgm-step-text br { display: none; }
	.dgm-photo { grid-area: photo; width: 84px; height: 84px; margin: 0; border-radius: 14px; }
	.dgm .dgm-foot { margin-top: 26px; }
}

@media (prefers-reduced-motion: reduce) {
	.dgm-steps::after { animation: none; opacity: 0; }
	.dgm *,
	.dgm *::before,
	.dgm *::after { transition-duration: 0s !important; }
}

/* ==========================================================================
   DIGIlium — Portfolio : « Notre vision » (sous « Notre méthode »)
   Desktop : cotes en --u = 1px de la maquette (1944 × 809), ramené à la fenêtre.
   Fond : plaque img/features/vision* (décor + photo alpine alignée) ;
   chemin de crête, épingles, étiquettes des sites et valeurs en HTML / SVG.
   ========================================================================== */

.dgv {
	--u: min(1.12px, calc(100vw / 1944));

	--dgv-navy: #000a41;
	--dgv-ink: #00003d;
	--dgv-text: #22366f;
	--dgv-blue: #0079ff;
	--dgv-ease: cubic-bezier(.22, 1, .36, 1);
	--dgv-top: var(--dg-bg);  /* teinte de page commune : le pied de page part de la même */
	--dgv-next: var(--dg-bg);

	position: relative;
	background: var(--dgv-top);
	color: var(--dgv-ink);
	font-family: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.dgv *,
.dgv *::before,
.dgv *::after { box-sizing: border-box; }
.dgv ul { margin: 0; padding: 0; list-style: none; }
.dgv li { margin: 0; font-weight: inherit; }
.dgv p { margin: 0; font-family: inherit; color: inherit; }
.dgv h3 { margin: 0; font-family: inherit; text-transform: none; letter-spacing: normal; }
.dgv svg { display: block; overflow: visible; }
.dgv-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.dgv-stage {
	position: relative;
	isolation: isolate;
	max-width: calc(var(--u) * 1944);
	min-height: calc(var(--u) * 809);
	margin: 0 auto;
	padding: calc(var(--u) * 485) 0 calc(var(--u) * 45);
	overflow: hidden;
}
.dgv-plate { position: absolute; z-index: -2; inset: 0 0 auto; }
.dgv-plate img { display: block; width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   Chemin de crête et épingles (repère maquette x 776–1944, y 0–486, centre 1360)
   -------------------------------------------------------------------------- */
.dgv-map {
	--m: calc(100cqw / 1168);
	position: absolute;
	z-index: -1;
	left: calc(var(--u) * 776);
	top: 0;
	width: calc(var(--u) * 1168);
	height: calc(var(--u) * 486);
	container-type: inline-size;
	pointer-events: none;
}
.dgv-trail {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: #fff;
	stroke-width: 2.6;
	stroke-linecap: round;
	stroke-dasharray: 1.5 8;
	filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px rgba(60, 160, 255, .95));
	animation: dgv-march 1.6s linear infinite;
}
/* les points avancent de Madagascar vers la France, sommet de la crête */
@keyframes dgv-march { to { stroke-dashoffset: -19; } }
.dgv-trail path:first-child { animation: none; }
.dgv-pin {
	position: absolute;
	left: calc(50% + (var(--x) - 1360) * var(--m));
	top: calc(var(--m) * var(--y));
	width: calc(var(--m) * 34);
	height: calc(var(--m) * 34);
	margin: calc(var(--m) * -17) 0 0 calc(var(--m) * -17);
	border-radius: 50%;
	background: radial-gradient(circle, #8ccbff 0 calc(var(--m) * 4.5), #0a86ff calc(var(--m) * 5) calc(var(--m) * 11), #fff calc(var(--m) * 11.5) calc(var(--m) * 15), rgb(80 170 255 / .45) calc(var(--m) * 15.5));
	box-shadow: 0 0 calc(var(--m) * 16) rgba(40, 150, 255, .9);
}
.dgv-pin::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 1.5px solid rgba(190, 230, 255, .95);
	border-radius: 50%;
	opacity: 0;
	animation: dgv-ping 2.6s ease-out infinite;
	animation-delay: var(--d);
}
@keyframes dgv-ping {
	0% { opacity: .95; transform: scale(.7); }
	100% { opacity: 0; transform: scale(2.2); }
}

/* étiquettes des sites */
.dgv-sites { position: absolute; inset: 0 auto auto 0; width: 100%; height: 0; }
.dgv-site {
	position: absolute;
	left: calc(var(--u) * var(--x));
	top: calc(var(--u) * var(--y));
	display: flex;
	align-items: center;
	gap: calc(var(--u) * 16);
	width: calc(var(--u) * var(--w));
	height: calc(var(--u) * var(--h));
	padding-left: calc(var(--u) * 13);
	border-radius: calc(var(--u) * 22);
	background: rgba(255, 255, 255, .97);
	box-shadow:
		0 0 calc(var(--u) * 18) rgba(120, 195, 255, .55),
		0 calc(var(--u) * 8) calc(var(--u) * 20) rgba(0, 40, 120, .2);
	animation: dgv-float 6s ease-in-out infinite;
	animation-delay: var(--d);
}
@keyframes dgv-float { 50% { translate: 0 calc(var(--u) * -5); } }
.dgv-flag {
	flex: none;
	width: calc(var(--u) * 40);
	height: calc(var(--u) * 40);
	border-radius: 50%;
	box-shadow: 0 calc(var(--u) * 3) calc(var(--u) * 8) rgba(0, 30, 90, .25);
}
.dgv-site span {
	padding-top: calc(var(--u) * 6);
	font-size: max(11px, calc(var(--u) * 16.7));
	line-height: calc(var(--u) * 21);
	white-space: nowrap;
	color: #2a4074;
}
.dgv-site strong {
	display: block;
	font-size: max(12.5px, calc(var(--u) * 21.8));
	font-weight: 800;
	line-height: calc(var(--u) * 24);
	color: #000041;
}

/* --------------------------------------------------------------------------
   Bloc texte
   -------------------------------------------------------------------------- */
.dgv-content {
	position: absolute;
	left: var(--dg-edge-x);
	top: var(--dg-pad-top);
}
.dgv-content .dg-lead + .dg-lead { margin-top: calc(var(--u) * 14); }

/* --------------------------------------------------------------------------
   Valeurs
   -------------------------------------------------------------------------- */
.dgv .dgv-values {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: calc(var(--u) * 24);
	width: calc(var(--u) * 1756);
	margin-left: calc(var(--u) * 96);
}
.dgv-value {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: calc(var(--u) * 276);
	padding: calc(var(--u) * 12) calc(var(--u) * 16) calc(var(--u) * 20);
	border: 1px solid rgba(255, 255, 255, .95);
	border-radius: calc(var(--u) * 18);
	background: rgba(253, 253, 254, .96);
	box-shadow:
		0 0 0 calc(var(--u) * 4) rgba(255, 255, 255, .3),
		0 calc(var(--u) * 18) calc(var(--u) * 40) calc(var(--u) * -20) rgba(16, 70, 160, .28);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	text-align: center;
	transition: transform .55s var(--dgv-ease), box-shadow .45s ease, border-color .45s ease;
}
.dgv-value:hover {
	transform: translateY(calc(var(--u) * -8));
	border-color: rgba(160, 205, 255, .95);
	box-shadow:
		0 0 0 calc(var(--u) * 4) rgba(214, 233, 255, .5),
		0 calc(var(--u) * 28) calc(var(--u) * 50) calc(var(--u) * -20) rgba(0, 80, 210, .36);
}
.dgv-ico {
	display: grid;
	place-items: center;
	flex: none;
	width: calc(var(--u) * 96);
	height: calc(var(--u) * 96);
	border-radius: 50%;
	background: radial-gradient(circle at 50% 35%, #ecf6fe, #e2f1fd);
	transition: background .45s ease, box-shadow .45s ease;
}
.dgv-ico svg {
	width: calc(var(--u) * 58);
	height: calc(var(--u) * 58);
	fill: none;
	stroke: #007bfe;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: stroke .45s ease, transform .55s var(--dgv-ease);
}
.dgv-ico .dgv-ico-users { width: calc(var(--u) * 62); height: calc(var(--u) * 50); stroke-width: 1.9; }
.dgv-value:hover .dgv-ico {
	background: linear-gradient(150deg, #2a92ff, #0a6ffb);
	box-shadow: 0 calc(var(--u) * 12) calc(var(--u) * 24) calc(var(--u) * -10) rgba(0, 100, 250, .55);
}
.dgv-value:hover .dgv-ico svg { stroke: #fff; transform: scale(1.08); }
.dgv .dgv-value-title {
	margin-top: calc(var(--u) * 3);
	font-size: max(15px, calc(var(--u) * 24));
	font-weight: 800;
	line-height: calc(var(--u) * 30);
	letter-spacing: -.01em;
	color: #00003f;
}
.dgv-value-title::after {
	content: "";
	display: block;
	width: calc(var(--u) * 40);
	height: max(2px, calc(var(--u) * 4));
	margin: calc(var(--u) * 14) auto 0;
	border-radius: 4px;
	background: linear-gradient(90deg, #0a6ffb, #3fa3ff);
	transition: width .55s var(--dgv-ease);
}
.dgv-value:hover .dgv-value-title::after { width: calc(var(--u) * 72); }
.dgv .dgv-value-text {
	margin-top: calc(var(--u) * 11);
	font-size: max(13px, calc(var(--u) * 21.4));
	line-height: calc(var(--u) * 29);
	white-space: nowrap;
	color: var(--dgv-text);
}

/* --------------------------------------------------------------------------
   Entrée au défilement (digilium-system.js)
   -------------------------------------------------------------------------- */
.dgv-content > :nth-child(2) { --i: 1; }
.dgv-content > :nth-child(3) { --i: 2; }
.dgv-content > :nth-child(4) { --i: 3; }
.dgv-value { --dg-base: 3; }
.dgv.is-armed :is(.dgv-content > *, .dgv-value, .dgv-site) { opacity: 0; }
.dgv.is-in :is(.dgv-content > *, .dgv-value) {
	animation: dg-rise var(--dg-reveal-dur) var(--dg-ease) backwards;
	animation-delay: min(calc(var(--dg-stagger) * (var(--i, 0) + var(--dg-base, 0))), 720ms);
}
/* les sites apparaissent de bas en haut, en remontant la crête */
.dgv.is-in .dgv-site {
	animation: dg-rise var(--dg-reveal-dur) var(--dg-ease) backwards, dgv-float 6s ease-in-out infinite;
	animation-delay: .7s, var(--d);
}
.dgv.is-in .dgv-site:nth-child(2) { animation-delay: .5s, var(--d); }
.dgv.is-in .dgv-site:nth-child(3) { animation-delay: .3s, var(--d); }

/* --------------------------------------------------------------------------
   Desktop compact (1200–1599) : petits textes lisibles
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) and (max-width: 1599.98px) {
	.dgv .dgv-value-text { white-space: normal; line-height: 1.4; text-wrap: balance; }
	.dgv-value-text br { display: none; }
	.dgv .dg-lead { white-space: normal; max-width: calc(var(--u) * 800); font-size: max(13.5px, calc(var(--u) * 21.8)); line-height: 1.42; }
	.dgv .dg-lead br { display: none; }
	.dgv-site { padding-left: calc(var(--u) * 10); gap: calc(var(--u) * 10); }
	.dgv-site span { font-size: max(10px, calc(var(--u) * 16.7)); }
}

/* --------------------------------------------------------------------------
   Tablette & mobile (< 1200) : la photo alpine devient une scène recadrée sur
   la crête (même repère que le desktop, façon « cover ») ; sur téléphone,
   cadrage plus haut et étiquettes accrochées à leur épingle.
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
	.dgv { --u: 1px; background: linear-gradient(180deg, var(--dgv-top), #eef5fd 70%, var(--dgv-next)); }
	.dgv-stage {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "content" "scene" "values";
		gap: 32px;
		min-height: 0;
		padding: var(--dg-section-y) var(--dg-gutter);
	}
	.dgv-plate,
	.dgv-stage::before,
	.dgv-stage::after { display: none; }
	.dgv-content { position: static; grid-area: content; }
	.dgv .dg-title br,
	.dgv .dg-lead br { display: none; }
	.dgv .dg-title span { display: block; }
	.dgv .dg-lead { max-width: 62ch; white-space: normal; }

	/* scène et étiquettes partagent la même cellule, donc le même cadre */
	.dgv-map,
	.dgv .dgv-sites {
		--m: max(100cqw / 1168, 100cqh / 486);
		position: relative;
		grid-area: scene;
		inset: auto;
		width: 100%;
		height: auto;
		aspect-ratio: 1168 / 486;
		overflow: hidden;
		container-type: size;
		border-radius: 24px;
		pointer-events: none;
	}
	.dgv-map {
		z-index: auto;
		background: #9cc8f5 image-set(url("img/features/vision-scene.webp") type("image/webp"), url("img/features/vision-scene.jpg") type("image/jpeg")) 50% 0 / cover no-repeat;
		box-shadow:
			inset 0 0 0 1px rgba(255, 255, 255, .55),
			0 28px 56px -26px rgba(0, 50, 150, .5);
	}
	.dgv .dgv-sites { z-index: 1; }
	.dgv-site {
		left: calc(50% + (var(--x) - 1360) * var(--m));
		top: calc(var(--y) * var(--m));
		gap: clamp(8px, calc(var(--m) * 14), 14px);
		width: auto;
		height: auto;
		padding: clamp(5px, calc(var(--m) * 8), 9px) clamp(12px, calc(var(--m) * 20), 20px) clamp(5px, calc(var(--m) * 8), 9px) clamp(5px, calc(var(--m) * 9), 10px);
		border-radius: 999px;
	}
	.dgv-flag { width: clamp(26px, calc(var(--m) * 40), 38px); height: clamp(26px, calc(var(--m) * 40), 38px); }
	.dgv-site strong { font-size: clamp(12.5px, calc(var(--m) * 20), 18px); line-height: 1.2; }
	.dgv-site span { padding-top: 0; font-size: clamp(10.5px, calc(var(--m) * 15.5), 14px); line-height: 1.3; }

	.dgv .dgv-values {
		grid-area: values;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px;
		width: auto;
		margin: 0;
	}
	.dgv-value { min-height: 0; padding: 22px 20px 26px; border-radius: 20px; }
	.dgv-ico { width: 80px; height: 80px; }
	.dgv-ico svg { width: 46px; height: 46px; }
	.dgv-ico .dgv-ico-users { width: 50px; height: 40px; }
	.dgv .dgv-value-title { margin-top: 10px; font-size: 20px; line-height: 1.3; }
	.dgv-value-title::after { width: 36px; height: 3px; margin-top: 12px; }
	.dgv .dgv-value-text { margin-top: 12px; font-size: 15.5px; line-height: 1.5; white-space: normal; }
	.dgv-value-text br { display: none; }
}
@media (max-width: 599.98px) {
	/* cadrage plus haut, recentré sur la crête */
	.dgv-map,
	.dgv .dgv-sites { aspect-ratio: 6 / 5; }
	/* chaque étiquette s'accroche à son épingle, du côté où il y a de la place */
	.dgv-site {
		left: calc(50% + (var(--px) - 1360) * var(--m));
		top: calc(var(--py) * var(--m));
		transform: translate(var(--tx, 0), -50%);
	}
	.dgv-site:nth-child(1) { --px: 1530; --py: 100; --tx: -100%; }
	.dgv-site:nth-child(2) { --px: 1344; --py: 288; --tx: -100%; }
	.dgv-site:nth-child(3) { --px: 1115; --py: 423; }

	/* valeurs : liste compacte, icône à gauche */
	.dgv .dgv-values { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.dgv-value {
		display: grid;
		grid-template-columns: 56px minmax(0, 1fr);
		grid-template-areas: "ico title" "ico text";
		column-gap: 16px;
		align-items: start;
		padding: 18px 18px 18px 16px;
		text-align: left;
	}
	.dgv-ico { grid-area: ico; width: 56px; height: 56px; }
	.dgv-ico svg { width: 30px; height: 30px; }
	.dgv-ico .dgv-ico-users { width: 32px; height: 26px; }
	.dgv .dgv-value-title { grid-area: title; margin-top: 2px; font-size: 17.5px; }
	.dgv-value-title::after { width: 28px; margin: 8px 0 0; }
	.dgv .dgv-value-text { grid-area: text; margin-top: 8px; font-size: 14.5px; line-height: 1.45; }
}

@media (prefers-reduced-motion: reduce) {
	.dgv-trail,
	.dgv-site { animation: none; }
	.dgv-pin::after { animation: none; }
	.dgv *,
	.dgv *::before,
	.dgv *::after { transition-duration: 0s !important; }
}

/* ==========================================================================
   DIGIlium — Carrousels (tablette & mobile) : pastilles de navigation
   Créées par digilium-system.js sous chaque [data-dg-rail], affichées
   seulement quand la rangée défile réellement.
   ========================================================================== */
.dg-rail-dots {
	display: flex;
	justify-content: center;
	gap: 2px;
}
.dg-rail-dots[hidden] { display: none; }
.dg-rail-dots button {
	display: grid;
	place-items: center;
	min-width: 24px;
	height: 24px;
	padding: 0 3px;
	border: 0;
	background: none;
	cursor: pointer;
}
.dg-rail-dots button::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 99px;
	background: #bcd5f5;
	transition: width .45s var(--dg-ease), background .45s ease;
}
.dg-rail-dots button[aria-current="true"]::before { width: 26px; background: var(--dg-blue); }
.dg-rail-dots button:focus-visible { outline: 2px solid var(--dg-blue); outline-offset: 2px; border-radius: 8px; }
@media (min-width: 1200px) { .dg-rail-dots { display: none; } }
@media (prefers-reduced-motion: reduce) { .dg-rail-dots button::before { transition: none; } }

/* ==========================================================================
   DIGIlium — Blog : hero « Nos expertises »
   Desktop : cotes en --u = 1px de la maquette (1944 × 809), ramené à la fenêtre.
   Fond : plaque img/features/expertises* (décor + photo du bureau alignée) ;
   textes, six cartes et encart « Notre objectif » en HTML / SVG.
   ========================================================================== */

.dgb {
	--u: min(1.12px, calc(100vw / 1944));

	--dgb-navy: #000036;
	--dgb-ink: #0c1458;
	--dgb-text: #161c63;
	--dgb-blue: #0062fe;
	--dgb-ease: var(--dg-ease);

	position: relative;
	background: var(--dg-bg);
	color: var(--dgb-ink);
	font-family: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
@media (min-width: 1200px) {
	.dgb {
		--dg-eyebrow-fs: max(11px, calc(var(--u) * 17.1));
		--dg-eyebrow-ls: .36em;
		--dg-rule-w: calc(var(--u) * 50);
		--dg-rule-gap: calc(var(--u) * 22);
		--dg-title-fs: calc(var(--u) * 56);
		--dg-title-lh: calc(var(--u) * 60);
		--dg-title-ls: -.02em;
		--dg-title-mt: calc(var(--u) * 21);
		--dg-lead-fs: calc(var(--u) * 22.6);
		--dg-lead-lh: calc(var(--u) * 32);
		--dg-lead-mt: calc(var(--u) * 9);
	}
}
.dgb *,
.dgb *::before,
.dgb *::after { box-sizing: border-box; }
.dgb ul { margin: 0; padding: 0; list-style: none; }
.dgb li { margin: 0; font-weight: inherit; }
.dgb p { margin: 0; font-family: inherit; color: inherit; }
.dgb h2 { margin: 0; font-family: inherit; text-transform: none; letter-spacing: normal; }
.dgb a { text-decoration: none; }
.dgb svg { display: block; overflow: visible; }
.dgb-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.dgb-stage {
	position: relative;
	isolation: isolate;
	max-width: calc(var(--u) * 1944);
	min-height: calc(var(--u) * 809);
	margin: 0 auto;
	padding: calc(var(--u) * 247) 0 calc(var(--u) * 69);
	overflow: hidden;
}
.dgb-plate { position: absolute; z-index: -2; inset: 0 0 auto; }
.dgb-plate img { display: block; width: 100%; height: auto; }
/* le bas se fond dans la section suivante */
.dgb-stage::after {
	content: "";
	position: absolute;
	z-index: -1;
	left: 0;
	right: 0;
	bottom: -1px;
	height: var(--dg-seam);
	background: var(--dg-fade-out);
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   En-tête
   -------------------------------------------------------------------------- */
.dgb-content {
	position: absolute;
	left: calc(var(--u) * 93);
	top: calc(var(--u) * 49);
}
.dgb .dg-title { color: var(--dgb-navy); }
.dgb .dg-title span { color: #0069fe; }
.dgb .dg-lead { color: #000146; }

/* --------------------------------------------------------------------------
   Six cartes
   -------------------------------------------------------------------------- */
.dgb .dgb-cards {
	display: grid;
	grid-template-columns: 396fr 400fr 382fr;
	grid-auto-rows: auto;
	gap: calc(var(--u) * 14) calc(var(--u) * 16);
	width: calc(var(--u) * 1210);
	margin-left: calc(var(--u) * 87);
}
.dgb .dgb-cards > li:nth-child(n + 4) { min-height: calc(var(--u) * 243); padding-bottom: calc(var(--u) * 24); }
.dgb .dgb-cards > li:nth-child(3n + 2) { --pad: calc(var(--u) * 17); --gap: calc(var(--u) * 27); }
.dgb .dgb-cards > li:nth-child(3n) { --pad: calc(var(--u) * 13); --gap: calc(var(--u) * 26); }
.dgb-card {
	--pad: calc(var(--u) * 18);
	--gap: calc(var(--u) * 30);
	position: relative;
	display: grid;
	grid-template-columns: calc(var(--u) * 84) minmax(0, 1fr);
	grid-template-areas: "ico title" "ico text" "list list";
	grid-template-rows: auto 1fr auto;
	column-gap: var(--gap);
	min-height: calc(var(--u) * 235);
	padding: calc(var(--u) * 19) var(--pad) calc(var(--u) * 21);
	border: 1px solid rgba(225, 236, 250, .95);
	border-radius: calc(var(--u) * 18);
	background: rgba(253, 254, 254, .96);
	box-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 34) calc(var(--u) * -22) rgba(16, 70, 160, .28);
	transition: transform .55s var(--dgb-ease), box-shadow .45s ease, border-color .45s ease;
}
.dgb-card:hover,
.dgb-card:focus-within {
	transform: translateY(calc(var(--u) * -6));
	border-color: rgba(160, 205, 255, .95);
	box-shadow: 0 calc(var(--u) * 24) calc(var(--u) * 44) calc(var(--u) * -22) rgba(0, 80, 210, .36);
}
.dgb-ico {
	grid-area: ico;
	align-self: start;
	display: grid;
	place-items: center;
	width: calc(var(--u) * 84);
	height: calc(var(--u) * 84);
	border-radius: 50%;
	background: radial-gradient(circle at 40% 30%, #f6faff, #e9f3fe 70%);
	transition: background .45s ease, box-shadow .45s ease;
}
.dgb-ico svg {
	width: calc(var(--u) * 61);
	height: calc(var(--u) * 61);
	fill: none;
	stroke: #005ffe;
	stroke-width: 2.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: stroke .45s ease, transform .55s var(--dgb-ease);
}
.dgb-ico .dgb-ico-gear { width: calc(var(--u) * 58); height: calc(var(--u) * 58); stroke-width: 1.3; }
.dgb-ico .dgb-ico-users { width: calc(var(--u) * 53); height: calc(var(--u) * 43); stroke-width: 1.7; }
.dgb-card:hover .dgb-ico,
.dgb-card:focus-within .dgb-ico {
	background: linear-gradient(150deg, #2a92ff, #0a6ffb);
	box-shadow: 0 calc(var(--u) * 12) calc(var(--u) * 22) calc(var(--u) * -10) rgba(0, 100, 250, .55);
}
.dgb-card:hover .dgb-ico svg,
.dgb-card:focus-within .dgb-ico svg { stroke: #fff; transform: scale(1.06); }

.dgb .dgb-card-title {
	grid-area: title;
	margin-top: calc(var(--u) * 2);
	font-size: max(14px, calc(var(--u) * 20));
	font-weight: 700;
	line-height: calc(var(--u) * 26);
	letter-spacing: -.005em;
	white-space: nowrap;
}
.dgb .dgb-link { font: inherit; color: var(--dgb-navy); }
/* toute la carte est cliquable */
.dgb-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}
.dgb .dgb-link:focus-visible { outline: none; }
.dgb-card:has(.dgb-link:focus-visible) { outline: 2px solid var(--dgb-blue); outline-offset: 4px; }
.dgb .dgb-card-text {
	grid-area: text;
	margin-top: calc(var(--u) * 6.5);
	font-size: max(12.5px, calc(var(--u) * 17.6));
	line-height: calc(var(--u) * 24);
	white-space: nowrap;
	color: var(--dgb-text);
}
.dgb .dgb-list {
	grid-area: list;
	display: grid;
	gap: calc(var(--u) * 9.5);
	margin: calc(var(--u) * 12) 0 0 calc(var(--u) * 23 - var(--pad));
}
.dgb-list li {
	display: flex;
	align-items: center;
	gap: calc(var(--u) * 17);
	font-size: max(12.5px, calc(var(--u) * 17.6));
	line-height: calc(var(--u) * 20);
	white-space: nowrap;
	color: var(--dgb-ink);
}
.dgb-list svg {
	flex: none;
	width: calc(var(--u) * 20);
	height: calc(var(--u) * 20);
	fill: #0062fe;
}

/* --------------------------------------------------------------------------
   Encart « Notre objectif »
   -------------------------------------------------------------------------- */
.dgb .dgb-goal {
	position: absolute;
	left: calc(var(--u) * 1334);
	top: calc(var(--u) * 585);
	display: flex;
	align-items: center;
	width: calc(var(--u) * 573);
	height: calc(var(--u) * 165);
	padding-left: calc(var(--u) * 32);
	overflow: hidden;
	border-radius: calc(var(--u) * 18);
	background: linear-gradient(135deg, #0a86fe 0%, #0068f6 55%, #0060ea 100%);
	box-shadow: 0 calc(var(--u) * 22) calc(var(--u) * 44) calc(var(--u) * -20) rgba(0, 80, 220, .55);
	color: #fff;
}
/* reflet qui traverse l'encart */
.dgb-goal::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .2) 50%, transparent 65%);
	translate: -120% 0;
	animation: dgb-sheen 7s ease-in-out infinite 2.5s;
	pointer-events: none;
}
@keyframes dgb-sheen { 0%, 72% { translate: -120% 0; } 100% { translate: 120% 0; } }
.dgb-goal-ico {
	flex: none;
	width: calc(var(--u) * 87);
	height: calc(var(--u) * 87);
	margin-right: calc(var(--u) * 24);
	translate: 0 calc(var(--u) * 4);
	fill: none;
	stroke: #fff;
	stroke-width: 2.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.dgb-goal > div {
	padding-left: calc(var(--u) * 33);
	border-left: 1px solid rgba(255, 255, 255, .35);
}
.dgb .dgb-goal-title {
	font-size: max(14px, calc(var(--u) * 19.5));
	font-weight: 700;
	line-height: calc(var(--u) * 26);
	color: #fff;
}
.dgb .dgb-goal-text {
	margin-top: calc(var(--u) * 6);
	font-size: max(12.5px, calc(var(--u) * 17.6));
	line-height: calc(var(--u) * 25);
	white-space: nowrap;
	color: #f3f8ff;
}

/* --------------------------------------------------------------------------
   Desktop compact (1200–1599) : les petits textes peuvent passer à la ligne
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) and (max-width: 1599.98px) {
	.dgb .dgb-card-text,
	.dgb-list li,
	.dgb .dgb-goal-text { white-space: normal; line-height: 1.32; }
	.dgb-card-text br,
	.dgb-goal-text br { display: none; }
	.dgb .dgb-card-title { white-space: normal; line-height: 1.2; }
	.dgb-card { column-gap: calc(var(--u) * 22); }
	.dgb .dg-lead br { display: none; }
	.dgb .dg-lead { max-width: calc(var(--u) * 1100); white-space: normal; }
}

/* --------------------------------------------------------------------------
   Tablette & mobile (< 1200) : en-tête, scène photo avec l'objectif posé
   dessus, puis les six domaines (2 colonnes, puis 1)
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
	.dgb { --u: 1px; background: linear-gradient(180deg, var(--dg-bg), #eef5fd 70%, var(--dg-bg)); }
	.dgb-stage {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "scene" "content" "goal" "cards";
		gap: 22px;
		min-height: 0;
		padding: 0 0 var(--dg-section-y);
	}
	.dgb-stage::after { display: none; }
	.dgb .dg-title,
	.dgb .dg-lead { white-space: normal; }
	.dgb .dg-title span { display: block; }
	.dgb .dg-lead { max-width: 62ch; }
	.dgb .dg-lead br { display: none; }
	.dgb .dgb-cards { padding-left: var(--dg-gutter); padding-right: var(--dg-gutter); }

	/* scène plein cadre */
	.dgb-plate {
		position: relative;
		z-index: auto;
		inset: auto;
		grid-area: scene;
		width: 100%;
		overflow: hidden;
		border-radius: 0 0 28px 28px;
		box-shadow: none;
	}
	.dgb-plate img {
		display: block;
		width: 100%;
		height: clamp(230px, 56vw, 420px);
		aspect-ratio: auto;
		object-fit: cover;
		object-position: 50% 40%;
	}
	.dgb-plate::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg, transparent 50%, rgba(4, 18, 46, .38) 78%, rgba(4, 18, 46, .54) 100%);
		pointer-events: none;
	}

	/* carte blanche qui remonte sur la photo */
	.dgb-content {
		position: relative;
		left: auto;
		top: auto;
		z-index: 2;
		grid-area: content;
		width: calc(100% - 2 * var(--dg-gutter));
		margin: clamp(-96px, -16vw, -56px) auto 0;
		padding: 30px 26px 28px;
		border-radius: 26px;
		background: #fff;
		box-shadow: 0 30px 60px -18px rgba(4, 18, 46, .28), 0 2px 8px rgba(4, 18, 46, .07);
	}
	.dgb .dgb-goal {
		position: relative;
		z-index: 1;
		grid-area: goal;
		align-self: auto;
		left: auto;
		top: auto;
		width: auto;
		height: auto;
		margin: 0 var(--dg-gutter);
		padding: 20px 24px 20px 22px;
		border-radius: 20px;
	}
	.dgb-goal-ico { width: 52px; height: 52px; margin-right: 20px; }
	.dgb-goal > div { padding-left: 20px; }
	.dgb .dgb-goal-title { font-size: 18px; line-height: 1.3; }
	.dgb .dgb-goal-text { margin-top: 4px; font-size: 15px; line-height: 1.45; white-space: normal; }
	.dgb-goal-text br { display: none; }

	.dgb .dgb-cards {
		grid-area: cards;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px;
		width: auto;
		margin: 0;
	}
	.dgb .dgb-cards > li:nth-child(n + 4),
	.dgb-card { min-height: 0; }
	.dgb-card {
		grid-template-columns: 60px minmax(0, 1fr);
		column-gap: 16px;
		padding: 20px 20px 22px;
		border-radius: 20px;
	}
	.dgb-ico { width: 60px; height: 60px; }
	.dgb-ico svg { width: 34px; height: 34px; }
	.dgb-ico .dgb-ico-gear { width: 36px; height: 36px; }
	.dgb-ico .dgb-ico-users { width: 36px; height: 30px; }
	.dgb .dgb-card-title { margin-top: 2px; font-size: 18px; line-height: 1.3; white-space: normal; }
	.dgb .dgb-card-text { margin-top: 4px; font-size: 15px; line-height: 1.45; white-space: normal; }
	.dgb-card-text br { display: none; }
	.dgb .dgb-list { gap: 9px; margin: 16px 0 0; }
	.dgb-list li { gap: 12px; font-size: 15px; line-height: 1.35; white-space: normal; }
	.dgb-list svg { width: 18px; height: 18px; }
}
@media (max-width: 699.98px) {
	.dgb .dgb-cards { grid-template-columns: minmax(0, 1fr); }
	.dgb-plate img { object-position: 58% 40%; }
	.dgb-goal-ico { width: 44px; height: 44px; margin-right: 16px; }
	.dgb-goal > div { padding-left: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.dgb-goal::after { animation: none; }
	.dgb *,
	.dgb *::before,
	.dgb *::after { transition-duration: 0s !important; }
}

/* ==========================================================================
   DIGIlium — Blog : « Des compétences au service de vos ambitions » (sous le hero)
   Desktop : cotes en --u = 1px de la maquette (1944 × 809), ramené à la fenêtre.
   Fond : plaque img/features/competences* (décor + photo du développeur) ;
   pictos partagés avec le hero (#dgb-i-*), le reste en HTML / SVG.
   ========================================================================== */

.dgk {
	--u: min(1.12px, calc(100vw / 1944));

	--dgk-navy: #000042;
	--dgk-ink: #0b115d;
	--dgk-text: #162069;
	--dgk-blue: #006bfe;

	position: relative;
	background: var(--dg-bg);
	color: var(--dgk-ink);
	font-family: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
@media (min-width: 1200px) {
	.dgk {
		--dg-eyebrow-fs: max(11px, calc(var(--u) * 16.2));
		--dg-eyebrow-ls: .34em;
		--dg-rule-w: calc(var(--u) * 48);
		--dg-rule-gap: calc(var(--u) * 26);
		--dg-title-fs: calc(var(--u) * 58);
		--dg-title-lh: calc(var(--u) * 53);
		--dg-title-ls: -.025em;
		--dg-title-mt: calc(var(--u) * 22);
		--dg-lead-fs: calc(var(--u) * 22.4);
		--dg-lead-lh: calc(var(--u) * 31);
		--dg-lead-mt: calc(var(--u) * 17);
	}
}
.dgk *,
.dgk *::before,
.dgk *::after { box-sizing: border-box; }
.dgk ul { margin: 0; padding: 0; list-style: none; }
.dgk li { margin: 0; font-weight: inherit; }
.dgk p { margin: 0; font-family: inherit; color: inherit; }
.dgk h3 { margin: 0; font-family: inherit; text-transform: none; letter-spacing: normal; }
.dgk a { text-decoration: none; }
.dgk svg { display: block; overflow: visible; }
.dgk-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.dgk-stage {
	position: relative;
	isolation: isolate;
	max-width: calc(var(--u) * 1944);
	min-height: calc(var(--u) * 809);
	margin: 0 auto;
	padding: calc(var(--u) * 319) 0 calc(var(--u) * 118);
	overflow: hidden;
}
.dgk-plate { position: absolute; z-index: -2; inset: 0 0 auto; }
.dgk-plate img { display: block; width: 100%; height: auto; }
/* raccords : le haut prolonge le hero, le bas rejoint la section suivante */
.dgk-stage::before,
.dgk-stage::after {
	content: "";
	position: absolute;
	z-index: -1;
	left: 0;
	right: 0;
	height: var(--dg-seam);
	pointer-events: none;
}
.dgk-stage::before { top: -1px; background: var(--dg-fade-in); -webkit-mask-image: linear-gradient(90deg, #000 60%, transparent 72%); mask-image: linear-gradient(90deg, #000 60%, transparent 72%); }
.dgk-stage::after { bottom: -1px; background: var(--dg-fade-out); }

/* --------------------------------------------------------------------------
   En-tête
   -------------------------------------------------------------------------- */
.dgk-content {
	position: absolute;
	left: calc(var(--u) * 89);
	top: calc(var(--u) * 61);
}
.dgk .dg-title { color: var(--dgk-navy); }
.dgk .dg-title span { color: #0079fe; }
.dgk .dg-lead { color: var(--dgk-ink); }
.dgk .dgk-aside {
	position: absolute;
	left: calc(var(--u) * 917);
	top: calc(var(--u) * 115);
	padding: calc(var(--u) * 4) 0 calc(var(--u) * 5) calc(var(--u) * 40);
	border-left: 1px solid rgba(149, 154, 190, .85);
	font-size: calc(var(--u) * 20.6);
	line-height: calc(var(--u) * 30.4);
	white-space: nowrap;
	color: var(--dgk-ink);
}

/* --------------------------------------------------------------------------
   Six cartes
   -------------------------------------------------------------------------- */
.dgk .dgk-cards {
	display: grid;
	grid-template-columns: 423fr 425fr 429fr;
	grid-auto-rows: calc(var(--u) * 178);
	gap: calc(var(--u) * 16);
	width: calc(var(--u) * 1309);
	margin-left: calc(var(--u) * 89);
}
.dgk-card {
	--gap: calc(var(--u) * 29);
	position: relative;
	display: grid;
	grid-template-columns: calc(var(--u) * 90) minmax(0, 1fr);
	grid-template-areas: "ico title" "ico text";
	grid-template-rows: auto 1fr;
	column-gap: var(--gap);
	padding: calc(var(--u) * 19) calc(var(--u) * 20) 0 calc(var(--u) * 13);
	border: 1px solid rgba(228, 238, 250, .95);
	border-radius: calc(var(--u) * 16);
	background: rgba(253, 254, 254, .96);
	box-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 34) calc(var(--u) * -22) rgba(16, 70, 160, .26);
	transition: transform .55s var(--dg-ease), box-shadow .45s ease, border-color .45s ease;
}
/* écarts relevés sur la maquette, par colonne et par rangée */
.dgk-card:nth-child(3n + 2) { --gap: calc(var(--u) * 26); }
.dgk-card:nth-child(3n) { --gap: calc(var(--u) * 25); }
.dgk-card:nth-child(-n + 3) { padding-top: calc(var(--u) * 16); }
.dgk-card:nth-child(-n + 3) .dgk-ico { margin-top: calc(var(--u) * 4); }
.dgk-card:nth-child(n + 4) .dgk-go { bottom: calc(var(--u) * 12); }
.dgk-card:hover,
.dgk-card:focus-within {
	transform: translateY(calc(var(--u) * -6));
	border-color: rgba(160, 205, 255, .95);
	box-shadow: 0 calc(var(--u) * 24) calc(var(--u) * 44) calc(var(--u) * -22) rgba(0, 80, 210, .36);
}
.dgk-ico {
	grid-area: ico;
	display: grid;
	place-items: center;
	width: calc(var(--u) * 90);
	height: calc(var(--u) * 90);
	border-radius: 50%;
	background: radial-gradient(circle at 40% 30%, #f3f9ff, #e8f3fd 70%);
	transition: background .45s ease, box-shadow .45s ease;
}
.dgk-ico svg {
	width: calc(var(--u) * 64);
	height: calc(var(--u) * 64);
	fill: none;
	stroke: #0070ff;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: stroke .45s ease, transform .55s var(--dg-ease);
}
/* le nuage de la maquette est plus large que haut */
.dgk-card:nth-child(2) .dgk-ico svg { width: calc(var(--u) * 70); height: calc(var(--u) * 70); }
.dgk-ico .dgk-ico-gear { width: calc(var(--u) * 60); height: calc(var(--u) * 60); stroke-width: 1.25; }
.dgk-ico .dgk-ico-users { width: calc(var(--u) * 58); height: calc(var(--u) * 47); stroke-width: 1.6; }
.dgk-card:hover .dgk-ico,
.dgk-card:focus-within .dgk-ico {
	background: linear-gradient(150deg, #2a92ff, #0a6ffb);
	box-shadow: 0 calc(var(--u) * 12) calc(var(--u) * 22) calc(var(--u) * -10) rgba(0, 100, 250, .55);
}
.dgk-card:hover .dgk-ico svg,
.dgk-card:focus-within .dgk-ico svg { stroke: #fff; transform: scale(1.06); }

.dgk .dgk-card-title {
	grid-area: title;
	margin-top: calc(var(--u) * 6);
	font-size: max(14px, calc(var(--u) * 21));
	font-weight: 700;
	line-height: calc(var(--u) * 27);
	letter-spacing: -.01em;
	white-space: nowrap;
}
.dgk .dgk-link { font: inherit; color: #000038; }
/* toute la carte est cliquable */
.dgk-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}
.dgk .dgk-link:focus-visible { outline: none; }
.dgk-card:has(.dgk-link:focus-visible) { outline: 2px solid var(--dgk-blue); outline-offset: 4px; }
.dgk .dgk-card-text {
	grid-area: text;
	margin-top: calc(var(--u) * 7);
	font-size: max(12.5px, calc(var(--u) * 18.4));
	line-height: calc(var(--u) * 25.8);
	white-space: nowrap;
	color: var(--dgk-text);
}
.dgk-go {
	position: absolute;
	right: calc(var(--u) * 14);
	bottom: calc(var(--u) * 15);
	display: grid;
	place-items: center;
	width: calc(var(--u) * 44);
	height: calc(var(--u) * 44);
	border-radius: 50%;
	background: #ebf5fd;
	color: var(--dgk-blue);
	transition: background .4s ease, color .4s ease;
}
.dgk-go svg {
	width: calc(var(--u) * 28);
	height: calc(var(--u) * 28);
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .45s var(--dg-ease);
}
.dgk-card:hover .dgk-go,
.dgk-card:focus-within .dgk-go { background: linear-gradient(150deg, #1785ff, #0068fb); color: #fff; }
.dgk-card:hover .dgk-go svg,
.dgk-card:focus-within .dgk-go svg { transform: translateX(calc(var(--u) * 3)); }

/* --------------------------------------------------------------------------
   Encart et signature
   -------------------------------------------------------------------------- */
.dgk .dgk-note {
	position: absolute;
	left: calc(var(--u) * 1422);
	top: calc(var(--u) * 579);
	display: flex;
	align-items: center;
	width: calc(var(--u) * 494);
	height: calc(var(--u) * 147);
	padding-left: calc(var(--u) * 42);
	overflow: hidden;
	border-radius: calc(var(--u) * 16);
	background: linear-gradient(120deg, #1b94fd 0%, #0a7cfe 45%, #006afe 100%);
	box-shadow: 0 calc(var(--u) * 22) calc(var(--u) * 44) calc(var(--u) * -20) rgba(0, 80, 220, .5);
	font-size: max(13px, calc(var(--u) * 20.2));
	line-height: calc(var(--u) * 30);
	white-space: nowrap;
	color: #f2f8ff;
}
.dgk-note::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .2) 50%, transparent 65%);
	translate: -120% 0;
	animation: dgk-sheen 7s ease-in-out infinite 3s;
	pointer-events: none;
}
@keyframes dgk-sheen { 0%, 72% { translate: -120% 0; } 100% { translate: 120% 0; } }
.dgk-note-ico {
	flex: none;
	width: calc(var(--u) * 40);
	height: calc(var(--u) * 60);
	margin-right: calc(var(--u) * 38);
	fill: none;
	stroke: #fff;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.dgk-note span {
	padding-left: calc(var(--u) * 29);
	border-left: 1px solid rgba(255, 255, 255, .45);
}
.dgk .dgk-foot {
	position: absolute;
	left: calc(var(--u) * 89);
	top: calc(var(--u) * 734);
	display: flex;
	align-items: center;
	gap: calc(var(--u) * 30);
	font-size: max(10.5px, calc(var(--u) * 13.8));
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .28em;
	text-transform: uppercase;
	white-space: nowrap;
	color: #1f2873;
}
.dgk-foot::before {
	content: "";
	flex: none;
	width: calc(var(--u) * 45);
	height: 2px;
	background: #0068fe;
}

/* --------------------------------------------------------------------------
   Desktop compact (1200–1599) : petits textes autorisés à passer à la ligne
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) and (max-width: 1599.98px) {
	.dgk .dgk-card-text { white-space: normal; line-height: 1.32; padding-right: calc(var(--u) * 46); }
	.dgk-card-text br { display: none; }
	.dgk .dgk-card-title { white-space: normal; line-height: 1.2; }
	.dgk-card { column-gap: calc(var(--u) * 22); }
	.dgk .dgk-cards { grid-auto-rows: minmax(calc(var(--u) * 178), auto); }
}

/* --------------------------------------------------------------------------
   Tablette & mobile (< 1200) : en-tête, photo en scène avec l'encart posé
   dessus, puis les six compétences (2 colonnes, puis 1)
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
	.dgk { --u: 1px; background: linear-gradient(180deg, var(--dg-bg), #eef5fd 70%, var(--dg-bg)); }
	.dgk-stage {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "scene" "content" "aside" "note" "cards" "foot";
		gap: 22px;
		min-height: 0;
		padding: 0 0 var(--dg-section-y);
	}
	.dgk-stage::before,
	.dgk-stage::after { display: none; }
	.dgk .dg-title br,
	.dgk .dg-lead br,
	.dgk-aside br { display: none; }
	.dgk .dg-title span { display: block; }
	.dgk .dg-lead { max-width: 62ch; white-space: normal; }
	.dgk .dgk-aside {
		position: static;
		grid-area: aside;
		max-width: 62ch;
		margin: 0 var(--dg-gutter);
		padding: 2px 0 2px 18px;
		border-left-color: #0070fe;
		font-size: clamp(15.5px, 2.1vw, 18px);
		line-height: 1.5;
		white-space: normal;
	}
	.dgk .dgk-cards,
	.dgk .dgk-foot { margin-left: var(--dg-gutter); margin-right: var(--dg-gutter); }

	/* scène plein cadre */
	.dgk-plate {
		position: relative;
		z-index: auto;
		inset: auto;
		grid-area: scene;
		width: 100%;
		overflow: hidden;
		border-radius: 0 0 28px 28px;
		box-shadow: none;
	}
	.dgk-plate img {
		display: block;
		width: 100%;
		height: clamp(230px, 56vw, 420px);
		aspect-ratio: auto;
		object-fit: cover;
		object-position: 60% 40%;
	}
	.dgk-plate::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg, transparent 50%, rgba(4, 18, 46, .38) 78%, rgba(4, 18, 46, .54) 100%);
		pointer-events: none;
	}

	/* carte blanche qui remonte sur la photo */
	.dgk-content {
		position: relative;
		left: auto;
		top: auto;
		z-index: 2;
		grid-area: content;
		width: calc(100% - 2 * var(--dg-gutter));
		margin: clamp(-96px, -16vw, -56px) auto 0;
		padding: 30px 26px 28px;
		border-radius: 26px;
		background: #fff;
		box-shadow: 0 30px 60px -18px rgba(4, 18, 46, .28), 0 2px 8px rgba(4, 18, 46, .07);
	}
	.dgk .dgk-note {
		position: relative;
		z-index: 1;
		grid-area: note;
		align-self: auto;
		justify-self: auto;
		left: auto;
		top: auto;
		width: auto;
		max-width: none;
		height: auto;
		margin: 0 var(--dg-gutter);
		padding: 18px 22px 18px 22px;
		border-radius: 18px;
		font-size: 15.5px;
		line-height: 1.45;
		white-space: normal;
	}
	.dgk-note br { display: none; }
	.dgk-note-ico { width: 30px; height: 45px; margin-right: 18px; }
	.dgk-note span { padding-left: 18px; }

	.dgk .dgk-cards {
		grid-area: cards;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: auto;
		gap: 18px;
		width: auto;
		margin: 0;
	}
	.dgk-card {
		grid-template-columns: 60px minmax(0, 1fr);
		column-gap: 16px;
		padding: 20px 20px 70px;
		border-radius: 20px;
	}
	.dgk-ico { width: 60px; height: 60px; }
	.dgk-ico svg,
	.dgk-card:nth-child(2) .dgk-ico svg { width: 38px; height: 38px; }
	.dgk-ico .dgk-ico-gear { width: 36px; height: 36px; }
	.dgk-ico .dgk-ico-users { width: 36px; height: 30px; }
	.dgk .dgk-card-title { margin-top: 2px; font-size: 18px; line-height: 1.3; white-space: normal; }
	.dgk .dgk-card-text { margin-top: 4px; font-size: 15px; line-height: 1.45; white-space: normal; }
	.dgk-card-text br { display: none; }
	.dgk-go { right: 16px; bottom: 16px; width: 40px; height: 40px; }
	.dgk-go svg { width: 22px; height: 22px; }

	.dgk .dgk-foot {
		position: static;
		grid-area: foot;
		gap: 16px;
		font-size: 12px;
		letter-spacing: .24em;
		white-space: normal;
	}
	.dgk-foot::before { width: 36px; }
}
@media (max-width: 699.98px) {
	.dgk .dgk-cards { grid-template-columns: minmax(0, 1fr); }
	.dgk-card { padding-bottom: 20px; padding-right: 66px; }
	.dgk-go { top: 50%; bottom: auto; margin-top: -20px; }
	.dgk-plate img { object-position: 62% 40%; }
}

@media (prefers-reduced-motion: reduce) {
	.dgk-note::after { animation: none; }
	.dgk *,
	.dgk *::before,
	.dgk *::after { transition-duration: 0s !important; }
}

/* ==========================================================================
   DIGIlium — Blog détail : hero « Votre projet » (de l’idée à la solution)
   Desktop : cotes en --u = 1px de la maquette (1944 × 809), ramené à la fenêtre.
   Fond : plaque img/features/projet* (décor + photo du duo) ; textes, sept
   étapes, atouts, appel à l’action et encart en HTML / SVG.
   Sous 1200px : en-tête, photo, puis la frise en carrousel horizontal.
   ========================================================================== */

.dgj {
	--u: min(1.12px, calc(100vw / 1944));

	--dgj-navy: #000049;
	--dgj-ink: #00003c;
	--dgj-text: #333e8d;
	--dgj-blue: #0065f4;
	--dgj-sky: #ebf5fe;
	--dgj-ease: var(--dg-ease);
	/* jonction avec « Deux modes d’intervention » : lueur partagée à droite */
	--dg-glow-bottom-x: 74%;

	position: relative;
	background: var(--dg-bg);
	color: var(--dgj-ink);
	font-family: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
@media (min-width: 1200px) {
	.dgj {
		--dg-eyebrow-fs: max(11px, calc(var(--u) * 16.6));
		--dg-eyebrow-ls: .218em;
		--dg-rule-w: calc(var(--u) * 52);
		--dg-rule-gap: calc(var(--u) * 24);
		--dg-title-fs: calc(var(--u) * 58);
		--dg-title-lh: calc(var(--u) * 51.5);
		--dg-title-ls: .022em;
		--dg-title-mt: calc(var(--u) * 21);
		--dg-lead-fs: calc(var(--u) * 20.63);
		--dg-lead-lh: calc(var(--u) * 25);
		--dg-lead-mt: calc(var(--u) * 2);
	}
}
.dgj *,
.dgj *::before,
.dgj *::after { box-sizing: border-box; }
.dgj ol,
.dgj ul { margin: 0; padding: 0; list-style: none; }
.dgj li { margin: 0; font-weight: inherit; }
.dgj p { margin: 0; font-family: inherit; color: inherit; }
.dgj h2 { margin: 0; font-family: inherit; text-transform: none; letter-spacing: normal; }
.dgj a { text-decoration: none; }
.dgj svg { display: block; overflow: visible; }
.dgj-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.dgj-stage {
	position: relative;
	isolation: isolate;
	max-width: calc(var(--u) * 1944);
	min-height: calc(var(--u) * 809);
	margin: 0 auto;
	padding: calc(var(--u) * 252) 0 calc(var(--u) * (31 + var(--dg-after)));
	overflow: hidden;
}
.dgj-plate { position: absolute; z-index: -2; inset: 0 0 auto; }
.dgj-plate img { display: block; width: 100%; height: auto; }
/* Continuité (système commun) : la plaque se dissout dans la teinte de page sur
   --dg-seam, la lueur de jonction est partagée avec la section suivante, et la
   scène s’allonge de --dg-after pour tenir la respiration --dg-rhythm (110u)
   entre le bandeau (fin à 778u) et le surtitre suivant (35u). */
.dgj { --dg-after: 44; }
.dgj-stage::after {
	content: "";
	position: absolute;
	z-index: -1;
	left: 0;
	right: 0;
	bottom: -1px;
	height: calc(var(--dg-seam) + var(--u) * var(--dg-after));
	background:
		radial-gradient(ellipse 34% var(--dg-seam) at var(--dg-glow-bottom-x) 100%, var(--dg-glow), transparent),
		var(--dg-fade-out) top / 100% var(--dg-seam) no-repeat,
		linear-gradient(var(--dg-bg), var(--dg-bg)) bottom / 100% calc(var(--u) * var(--dg-after) + 2px) no-repeat;
	pointer-events: none;
}
@media (min-width: 2178px) {
	.dgj-stage {
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%);
		mask-image: linear-gradient(90deg, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%);
	}
}

/* --------------------------------------------------------------------------
   En-tête : titre à gauche, phrase manuscrite et engagement à droite
   -------------------------------------------------------------------------- */
.dgj-content {
	position: absolute;
	left: calc(var(--u) * 70);
	top: calc(var(--u) * 35.5);
}
.dgj .dg-eyebrow { color: #02056b; }
.dgj .dg-eyebrow::after { background: linear-gradient(90deg, #0a62f2, rgb(10 98 242 / .35)); }
.dgj .dg-title { color: var(--dgj-navy); }
.dgj .dg-title span {
	background: linear-gradient(90deg, #005ff2 0%, #0a78fb 55%, #1689ff 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	letter-spacing: .004em;
}
.dgj .dg-lead { color: #141d7b; }

.dgj .dgj-script {
	position: absolute;
	left: calc(var(--u) * 1052);
	top: calc(var(--u) * 92);
	font-family: "Sacramento", "Segoe Script", cursive;
	font-size: calc(var(--u) * 46);
	line-height: calc(var(--u) * 50);
	letter-spacing: -.01em;
	white-space: nowrap;
	color: #0a66f4;
	-webkit-text-stroke: calc(var(--u) * .55) #0a66f4;
	transform: rotate(-24deg);
	transform-origin: 0 0;
}
.dgj-script > span { display: block; }
.dgj-script > span:nth-child(2) { margin-left: calc(var(--u) * 14); }
.dgj-script > span:nth-child(3) { margin: calc(var(--u) * -2) 0 0 calc(var(--u) * 60); }
.dgj-swoosh {
	position: absolute;
	left: calc(var(--u) * 21.5);
	top: calc(var(--u) * 131);
	width: calc(var(--u) * 176);
	height: calc(var(--u) * 28);
	fill: none;
	stroke: #0a66f4;
	stroke-width: 2.8;
	stroke-linecap: round;
	stroke-dasharray: 1;
}

.dgj .dgj-pledge {
	position: absolute;
	left: calc(var(--u) * 1333);
	top: calc(var(--u) * 61);
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: calc(var(--u) * 123);
	padding-left: calc(var(--u) * 33);
	border-left: 1.5px solid rgba(40, 52, 140, .55);
	font-size: calc(var(--u) * 18.85);
	line-height: calc(var(--u) * 26.5);
	white-space: nowrap;
	color: #17218b;
}

/* --------------------------------------------------------------------------
   Frise des sept étapes
   -------------------------------------------------------------------------- */
.dgj .dgj-steps {
	display: grid;
	grid-template-columns: repeat(7, calc(var(--u) * 198));
	gap: calc(var(--u) * 11.3);
	margin-left: calc(var(--u) * 47);
}
.dgj-step {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: calc(var(--u) * 408);
	padding: calc(var(--u) * 205.5) 0 calc(var(--u) * 10) calc(var(--u) * 13);
	border: 1px solid rgba(255, 255, 255, .95);
	border-radius: calc(var(--u) * 18);
	background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(252, 254, 255, .9) 45%);
	box-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 34) calc(var(--u) * -22) rgba(16, 70, 160, .22);
	transition: transform .55s var(--dgj-ease), box-shadow .45s ease, border-color .45s ease;
}
.dgj-step:hover {
	transform: translateY(calc(var(--u) * -6));
	border-color: rgba(170, 210, 255, .95);
	box-shadow: 0 calc(var(--u) * 26) calc(var(--u) * 46) calc(var(--u) * -22) rgba(0, 80, 210, .32);
}

/* photo inclinée (bords haut et bas qui montent vers la droite) */
.dgj-photo {
	position: absolute;
	left: calc(var(--u) * 3);
	top: calc(var(--u) * 31);
	display: block;
	width: calc(var(--u) * 180);
	height: calc(var(--u) * 136);
	overflow: hidden;
	border-radius: calc(var(--u) * 16);
	transform: skewY(-8.5deg);
	transform-origin: 0 0;
	box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 22) calc(var(--u) * -12) rgba(10, 50, 130, .35);
}
.dgj-photo img {
	position: absolute;
	left: 0;
	top: calc(var(--u) * -14);
	display: block;
	width: 100%;
	height: calc(100% + var(--u) * 28);
	object-fit: cover;
	object-position: var(--op, 50% 50%);
	transform: skewY(8.5deg);
	scale: var(--z, 1.2);
	transition: scale 1.1s var(--dgj-ease);
}
.dgj-step:hover .dgj-photo img { scale: calc(var(--z, 1.2) * 1.07); }

.dgj-num {
	position: absolute;
	left: calc(var(--u) * 15);
	top: calc(var(--u) * 1);
	z-index: 1;
	display: grid;
	place-items: center;
	width: calc(var(--u) * 44);
	height: calc(var(--u) * 44);
	border-radius: 50%;
	background: radial-gradient(circle at 34% 28%, #4aa6ff 0%, #1677fb 50%, #0a5cf0 100%);
	box-shadow:
		0 0 0 calc(var(--u) * 3) #fff,
		0 calc(var(--u) * 6) calc(var(--u) * 14) rgba(0, 70, 200, .35);
	font-size: calc(var(--u) * 22);
	font-weight: 800;
	line-height: 1;
	color: #fff;
	transition: transform .5s cubic-bezier(.3, 1.6, .5, 1);
}
.dgj-step:hover .dgj-num { transform: scale(1.12); }

.dgj-ico {
	position: absolute;
	left: calc(var(--u) * 11);
	top: calc(var(--u) * 124);
	z-index: 1;
	display: grid;
	place-items: center;
	width: calc(var(--u) * 80);
	height: calc(var(--u) * 80);
	border: calc(var(--u) * 4) solid #dcebfc;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 35%, #fff 55%, #f4f9ff);
	box-shadow:
		0 0 0 calc(var(--u) * 2) rgba(255, 255, 255, .8),
		0 calc(var(--u) * 8) calc(var(--u) * 18) calc(var(--u) * -6) rgba(16, 80, 180, .24);
	transition: background .45s ease, border-color .45s ease, box-shadow .45s ease;
}
.dgj-ico svg {
	width: calc(var(--u) * 47);
	height: calc(var(--u) * 47);
	fill: none;
	stroke: #0a68f6;
	stroke-width: 2.7;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: stroke .45s ease, transform .55s var(--dgj-ease);
}
.dgj-step:hover .dgj-ico {
	border-color: #cfe4fd;
	background: linear-gradient(150deg, #2a92ff, #0a6ffb);
	box-shadow: 0 calc(var(--u) * 12) calc(var(--u) * 22) calc(var(--u) * -8) rgba(0, 100, 250, .55);
}
.dgj-step:hover .dgj-ico svg { stroke: #fff; transform: scale(1.08); }

/* flèche pointillée vers l’étape suivante : les points avancent */
.dgj-flow {
	position: absolute;
	left: calc(var(--u) * 101);
	top: calc(var(--u) * 164);
	width: calc(var(--u) * 91);
	height: calc(var(--u) * 12);
	fill: none;
	stroke: #1d79f6;
	stroke-width: 2.1;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dashoffset: 0;
	animation: dgj-flow 1.6s linear infinite;
}
.dgj-flow-line { stroke-dasharray: 0 4.6; }
@keyframes dgj-flow { to { stroke-dashoffset: -9.2; } }

.dgj .dgj-step-title {
	font-size: max(14px, calc(var(--u) * 20.8));
	font-weight: 700;
	line-height: calc(var(--u) * 26);
	letter-spacing: -.012em;
	white-space: nowrap;
	color: var(--dgj-navy);
}
.dgj .dgj-step-text {
	margin-top: calc(var(--u) * 7.4);
	font-size: max(11px, calc(var(--u) * 16));
	line-height: calc(var(--u) * 20.8);
	letter-spacing: -.012em;
	white-space: nowrap;
	color: var(--dgj-text);
}
/* la maquette resserre la plus longue ligne */
.dgj .dgj-step:nth-child(6) .dgj-step-text { letter-spacing: -.03em; }
.dgj .dgj-pill {
	display: grid;
	place-items: center;
	width: calc(var(--u) * 176);
	min-height: calc(var(--u) * 60);
	margin: auto 0 0 calc(var(--u) * -6);
	padding: calc(var(--u) * 6) calc(var(--u) * 4);
	border-radius: calc(var(--u) * 10);
	background: var(--dgj-sky);
	font-size: max(11px, calc(var(--u) * 16));
	line-height: calc(var(--u) * 21.5);
	letter-spacing: -.02em;
	text-align: center;
	white-space: nowrap;
	color: #0460f9;
	transition: background .45s ease, color .45s ease;
}
.dgj-step:hover .dgj-pill { background: #dcebfe; }

/* --------------------------------------------------------------------------
   Bandeau des atouts + appel à l’action
   -------------------------------------------------------------------------- */
.dgj .dgj-foot {
	display: flex;
	align-items: flex-start;
	gap: calc(var(--u) * 14);
	margin: calc(var(--u) * 12) 0 0 calc(var(--u) * 37);
}
.dgj .dgj-assets {
	display: grid;
	grid-template-columns: 350fr 360fr 344fr 412fr;
	align-items: center;
	flex: none;
	width: calc(var(--u) * 1466);
	min-height: calc(var(--u) * 106);
	border: 1px solid rgba(255, 255, 255, .95);
	border-radius: calc(var(--u) * 14);
	background: rgba(255, 255, 255, .86);
	box-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 34) calc(var(--u) * -24) rgba(16, 70, 160, .28);
}
.dgj-asset {
	display: flex;
	align-items: center;
	gap: calc(var(--u) * 26);
	padding: calc(var(--u) * 12) calc(var(--u) * 10) calc(var(--u) * 12) calc(var(--u) * 28);
}
.dgj-asset:first-child { padding-left: calc(var(--u) * 16); }
.dgj-asset + .dgj-asset { border-left: 1px solid #dfe8f5; }
.dgj-asset-ico {
	display: grid;
	place-items: center;
	flex: none;
	width: calc(var(--u) * 80);
	height: calc(var(--u) * 80);
	border-radius: 50%;
	background: radial-gradient(circle at 40% 30%, #f3f9ff, #e6f1fd 70%);
	transition: background .45s ease, box-shadow .45s ease;
}
.dgj-asset-ico svg {
	width: calc(var(--u) * 52);
	height: calc(var(--u) * 52);
	fill: none;
	stroke: #0a68f6;
	stroke-width: 2.9;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: stroke .45s ease, transform .55s var(--dgj-ease);
}
.dgj-asset-ico .dgj-ico-users { width: calc(var(--u) * 52); height: calc(var(--u) * 43); stroke-width: 1.9; }
.dgj-asset:hover .dgj-asset-ico {
	background: linear-gradient(150deg, #2a92ff, #0a6ffb);
	box-shadow: 0 calc(var(--u) * 12) calc(var(--u) * 22) calc(var(--u) * -10) rgba(0, 100, 250, .55);
}
.dgj-asset:hover .dgj-asset-ico svg { stroke: #fff; transform: scale(1.06); }
.dgj .dgj-asset-title {
	font-size: max(13px, calc(var(--u) * 16.6));
	font-weight: 700;
	line-height: calc(var(--u) * 22);
	white-space: nowrap;
	color: #00004c;
}
.dgj .dgj-asset-text {
	margin-top: calc(var(--u) * 2);
	font-size: max(12px, calc(var(--u) * 16.2));
	line-height: calc(var(--u) * 21.5);
	white-space: nowrap;
	color: #3542a0;
}

.dgj .dgj-cta {
	position: relative;
	display: flex;
	align-items: center;
	flex: none;
	width: calc(var(--u) * 398);
	min-height: calc(var(--u) * 107);
	margin-top: calc(var(--u) * -1);
	padding: 0 calc(var(--u) * 21) 0 calc(var(--u) * 25);
	overflow: hidden;
	border-radius: calc(var(--u) * 12);
	background: linear-gradient(110deg, #0350c4 0%, #0560dd 45%, #0a70f4 80%, #0b78fd 100%);
	box-shadow: 0 calc(var(--u) * 20) calc(var(--u) * 40) calc(var(--u) * -18) rgba(0, 70, 200, .55);
	color: #fff;
	transition: transform .5s var(--dgj-ease), box-shadow .45s ease;
}
/* reflet qui traverse le bouton */
.dgj-cta::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .22) 50%, transparent 65%);
	translate: -120% 0;
	animation: dgj-sheen 7s ease-in-out infinite 2.5s;
	pointer-events: none;
}
@keyframes dgj-sheen { 0%, 72% { translate: -120% 0; } 100% { translate: 120% 0; } }
.dgj .dgj-cta:hover,
.dgj .dgj-cta:focus-visible {
	transform: translateY(calc(var(--u) * -4));
	box-shadow: 0 calc(var(--u) * 26) calc(var(--u) * 46) calc(var(--u) * -18) rgba(0, 70, 200, .65);
	color: #fff;
}
.dgj .dgj-cta:focus-visible { outline: 2px solid var(--dgj-blue); outline-offset: 4px; }
.dgj-cta-ico {
	flex: none;
	width: calc(var(--u) * 62);
	height: calc(var(--u) * 62);
	margin-left: calc(var(--u) * -3);
	fill: none;
	stroke: #fff;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.dgj-cta-txt {
	display: flex;
	flex-direction: column;
	gap: calc(var(--u) * 5);
	margin-left: calc(var(--u) * 15);
	padding: calc(var(--u) * 5) 0 calc(var(--u) * 4) calc(var(--u) * 13);
	border-left: 1px solid rgba(255, 255, 255, .45);
	white-space: nowrap;
}
.dgj-cta-txt strong {
	font-size: max(13px, calc(var(--u) * 18));
	font-weight: 600;
	line-height: calc(var(--u) * 24);
}
.dgj-cta-txt span {
	font-size: max(10.5px, calc(var(--u) * 13.7));
	line-height: calc(var(--u) * 19);
	color: #e8f1ff;
}
.dgj-cta-btn {
	display: grid;
	place-items: center;
	flex: none;
	width: calc(var(--u) * 54);
	height: calc(var(--u) * 54);
	margin-left: auto;
	border-radius: 50%;
	background: #fff;
	color: #0a62f0;
	box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 14) rgba(0, 30, 110, .25);
}
.dgj-cta-btn svg {
	width: calc(var(--u) * 26);
	height: calc(var(--u) * 26);
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .45s var(--dgj-ease);
}
.dgj-cta:hover .dgj-cta-btn svg,
.dgj-cta:focus-visible .dgj-cta-btn svg { transform: translateX(calc(var(--u) * 4)); }

/* --------------------------------------------------------------------------
   Encart sur la photo
   -------------------------------------------------------------------------- */
.dgj .dgj-hint {
	position: absolute;
	left: calc(var(--u) * 1708);
	top: calc(var(--u) * 473);
	width: calc(var(--u) * 217);
	height: calc(var(--u) * 147);
	padding: calc(var(--u) * 13) 0 0 calc(var(--u) * 29);
	border: 1px solid rgba(255, 255, 255, .9);
	border-radius: calc(var(--u) * 14);
	background: linear-gradient(160deg, rgba(255, 255, 255, .9), rgba(244, 248, 254, .78));
	-webkit-backdrop-filter: blur(16px) saturate(1.1);
	backdrop-filter: blur(16px) saturate(1.1);
	box-shadow: 0 calc(var(--u) * 18) calc(var(--u) * 36) calc(var(--u) * -16) rgba(10, 40, 110, .35);
	font-size: calc(var(--u) * 20.6);
	font-weight: 700;
	line-height: calc(var(--u) * 26);
	letter-spacing: -.012em;
	white-space: nowrap;
	color: #000048;
}
.dgj-hint::after {
	content: "";
	position: absolute;
	left: calc(var(--u) * 30);
	bottom: calc(var(--u) * 17);
	width: calc(var(--u) * 52);
	height: 2px;
	background: linear-gradient(90deg, #0a62f2, rgb(10 98 242 / .25));
}

/* --------------------------------------------------------------------------
   Entrée au défilement (digilium-system.js pose is-armed / is-in)
   -------------------------------------------------------------------------- */
.dgj-content > :nth-child(2) { --i: 1; }
.dgj-content > :nth-child(3) { --i: 2; }
.dgj-script,
.dgj-pledge { --i: 2; }
.dgj-step { --dg-base: 2; }
.dgj-step:nth-child(2) { --i: 1; }
.dgj-step:nth-child(3) { --i: 2; }
.dgj-step:nth-child(4) { --i: 3; }
.dgj-step:nth-child(5) { --i: 4; }
.dgj-step:nth-child(6) { --i: 5; }
.dgj-step:nth-child(7) { --i: 6; }
.dgj-foot,
.dgj-hint { --i: 8; }
.dgj.is-armed :is(.dgj-content > *, .dgj-script, .dgj-pledge, .dgj-step, .dgj-foot, .dgj-hint) { opacity: 0; }
.dgj.is-in :is(.dgj-content > *, .dgj-script, .dgj-pledge, .dgj-step, .dgj-foot, .dgj-hint) {
	animation: dg-rise var(--dg-reveal-dur) var(--dg-ease) backwards;
	animation-delay: min(calc(var(--dg-stagger) * (var(--i, 0) + var(--dg-base, 0))), 800ms);
}
/* la signature se trace */
.dgj.is-armed .dgj-swoosh { stroke-dashoffset: 1; }
.dgj.is-in .dgj-swoosh { transition: stroke-dashoffset 1.2s var(--dg-ease) .9s; }

/* --------------------------------------------------------------------------
   Desktop compact (1200–1365) : les tailles mini dépassent l’échelle,
   les textes passent donc à la ligne et les cartes s’allongent
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) and (max-width: 1365.98px) {
	.dgj .dgj-step-text,
	.dgj .dgj-pill,
	.dgj .dgj-asset-text,
	.dgj-cta-txt { white-space: normal; line-height: 1.3; text-wrap: balance; }
	.dgj .dgj-step-text { margin-bottom: 8px; }
	.dgj-step-text br,
	.dgj-pill br,
	.dgj-asset-text br { display: none; }
	.dgj .dgj-step-title { white-space: normal; line-height: 1.2; }
	.dgj .dgj-step { padding-right: calc(var(--u) * 13); }
	.dgj .dgj-asset { gap: calc(var(--u) * 18); }
	.dgj .dgj-asset-title { white-space: normal; line-height: 1.25; }
	.dgj .dg-lead br { display: none; }
	.dgj .dg-lead { max-width: calc(var(--u) * 960); white-space: normal; }
}

/* --------------------------------------------------------------------------
   Tablette & mobile (< 1200) : en-tête et photo, engagement, frise en
   carrousel horizontal, puis atouts et appel à l’action
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
	.dgj { --u: 1px; background: linear-gradient(180deg, var(--dg-bg), #eef5fd 60%, var(--dg-bg)); }
	.dgj-stage {
		display: grid;
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
		grid-template-areas:
			"content scene"
			"script  scene"
			"pledge  scene"
			"steps   steps"
			"dots    dots"
			"foot    foot";
		align-items: start;
		column-gap: 32px;
		min-height: 0;
		padding: var(--dg-section-y) 0;
	}
	.dgj-stage::after { display: none; }
	.dgj-content,
	.dgj .dgj-script,
	.dgj .dgj-pledge,
	.dgj .dgj-hint { position: relative; left: auto; top: auto; }
	.dgj-content { grid-area: content; padding-left: var(--dg-gutter); }
	.dgj .dg-title,
	.dgj .dg-lead { white-space: normal; }
	.dgj .dg-title span { display: block; }
	.dgj .dg-lead br { display: none; }

	/* photo + encart posé dessus */
	.dgj-plate {
		position: relative;
		z-index: auto;
		inset: auto;
		grid-area: scene;
		margin-right: var(--dg-gutter);
		overflow: hidden;
		border-radius: 26px;
		box-shadow: 0 24px 50px -24px rgba(4, 30, 90, .45);
	}
	.dgj { --dgj-scene-h: clamp(300px, 40vw, 440px); }
	.dgj-plate img {
		width: 100%;
		height: var(--dgj-scene-h);
		object-fit: cover;
		object-position: 55% 30%;
	}
	.dgj .dgj-hint {
		z-index: 1;
		grid-area: scene;
		align-self: start;
		justify-self: start;
		width: auto;
		max-width: 220px;
		height: auto;
		margin: calc(var(--dgj-scene-h) - 92px) 0 0 -22px;
		padding: 14px 22px 26px;
		font-size: 17px;
		line-height: 1.35;
		white-space: normal;
	}
	.dgj-hint::after { left: 22px; bottom: 14px; width: 40px; }
	.dgj-hint br { display: none; }

	.dgj .dgj-script {
		grid-area: script;
		justify-self: start;
		margin: 34px 0 0 calc(var(--dg-gutter) + 6px);
		font-size: clamp(34px, 5.4vw, 44px);
		line-height: .95;
		-webkit-text-stroke: .6px #0a66f4;
		transform: rotate(-8deg);
		transform-origin: 0 50%;
	}
	.dgj-script > span { display: inline; }
	.dgj-script > span:nth-child(n) { margin-left: 0; }
	.dgj-swoosh { left: 52%; top: auto; bottom: -12px; width: 46%; height: 12px; }
	.dgj .dgj-pledge {
		grid-area: pledge;
		height: auto;
		margin: 26px 0 0 var(--dg-gutter);
		padding: 2px 0 2px 18px;
		border-left-color: #0a66f4;
		font-size: clamp(15.5px, 2.1vw, 18px);
		line-height: 1.5;
		white-space: normal;
	}

	/* frise : carrousel à l’aimant, cartes à l’échelle 1,1 de la maquette */
	.dgj .dgj-steps {
		--u: 1.1px;
		grid-area: steps;
		grid-template-columns: repeat(7, calc(var(--u) * 198));
		gap: 14px;
		margin: 36px 0 0;
		padding: 6px var(--dg-gutter) 30px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--dg-gutter);
		scrollbar-width: thin;
		scrollbar-color: #9ccaff transparent;
	}
	.dgj-step { scroll-snap-align: start; background: rgba(255, 255, 255, .92); }
	.dgj .dg-rail-dots { grid-area: dots; margin: -16px 0 6px; }

	.dgj .dgj-foot {
		grid-area: foot;
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		margin: 22px var(--dg-gutter) 0;
	}
	.dgj .dgj-assets {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
		width: auto;
		border: 0;
		background: none;
		box-shadow: none;
	}
	.dgj .dgj-asset,
	.dgj .dgj-asset:first-child {
		gap: 16px;
		height: 100%;
		padding: 18px 20px;
		border: 1px solid rgba(225, 236, 250, .95);
		border-radius: 18px;
		background: #fff;
		box-shadow: 0 14px 30px -22px rgba(16, 70, 160, .35);
	}
	.dgj-asset-ico { width: 60px; height: 60px; }
	.dgj-asset-ico svg { width: 34px; height: 34px; }
	.dgj-asset-ico .dgj-ico-users { width: 34px; height: 28px; }
	.dgj .dgj-asset-title { font-size: 17px; line-height: 1.3; white-space: normal; }
	.dgj .dgj-asset-text { margin-top: 4px; font-size: 15px; line-height: 1.45; white-space: normal; }
	.dgj-asset-text br { display: none; }

	.dgj .dgj-cta { width: auto; min-height: 92px; margin: 0; padding: 0 18px 0 22px; border-radius: 18px; }
	.dgj-cta-ico { width: 46px; height: 46px; }
	.dgj-cta-txt { margin-left: 16px; padding-left: 16px; white-space: normal; }
	.dgj-cta-txt strong { font-size: 18px; line-height: 1.3; }
	.dgj-cta-txt span { font-size: 14.5px; line-height: 1.4; }
	.dgj-cta-btn { width: 48px; height: 48px; margin-left: auto; padding: 0; }
	.dgj-cta-btn svg { width: 24px; height: 24px; }
}
@media (max-width: 759.98px) {
	.dgj-stage {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "content" "scene" "script" "pledge" "steps" "dots" "foot";
	}
	.dgj { --dgj-scene-h: clamp(260px, 72vw, 380px); }
	.dgj-content { padding-right: var(--dg-gutter); }
	.dgj-plate { margin: 28px var(--dg-gutter) 0; }
	.dgj .dgj-hint {
		max-width: 178px;
		margin: calc(28px + var(--dgj-scene-h) - 64px) 0 0 calc(var(--dg-gutter) + 14px);
		padding: 11px 16px 20px;
		font-size: 14.5px;
	}
	.dgj-hint::after { left: 16px; bottom: 11px; width: 32px; }
	.dgj .dgj-script { margin-top: 46px; font-size: clamp(28px, 8vw, 38px); }
	.dgj .dgj-assets { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.dgj .dgj-asset,
	.dgj .dgj-asset:first-child { padding: 14px 16px; }
	.dgj-asset-ico { width: 52px; height: 52px; }
	.dgj-asset-ico svg { width: 30px; height: 30px; }
	.dgj-cta-txt strong { font-size: 16.5px; }
}

@media (prefers-reduced-motion: reduce) {
	.dgj-flow,
	.dgj-cta::after { animation: none; }
	.dgj *,
	.dgj *::before,
	.dgj *::after { transition-duration: 0s !important; }
}

/* ==========================================================================
   DIGIlium — Blog détail : « Deux modes d’intervention » (sous le hero)
   Desktop : cotes en --u = 1px de la maquette (1942 × 809), ramené à la fenêtre.
   Fond : plaque img/features/modes* (décor + bureau flou en haut à droite) ;
   photos des deux cartes : img/features/mode-projet*, mode-renfort*,
   découpées en arc à gauche par les clipPath #dgi-c-a / #dgi-c-b.
   ========================================================================== */

.dgi {
	--u: min(1.12px, calc(100vw / 1942));

	--dgi-navy: #00003e;
	--dgi-ink: #0c0d74;
	--dgi-text: #191c7b;
	--dgi-blue: #0062fe;
	--dgi-ease: var(--dg-ease);
	/* jonction avec le hero : même lueur, même abscisse */
	--dg-glow-top-x: 74%;
	/* dernière section avant le pied de page */
	--dg-after: 50;

	position: relative;
	background: var(--dg-bg);
	color: var(--dgi-ink);
	font-family: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
@media (min-width: 1200px) {
	.dgi {
		--dg-eyebrow-fs: max(11px, calc(var(--u) * 16.8));
		--dg-eyebrow-ls: .332em;
		--dg-rule-w: calc(var(--u) * 57);
		--dg-rule-gap: calc(var(--u) * 21);
		--dg-title-fs: calc(var(--u) * 52);
		--dg-title-lh: calc(var(--u) * 56);
		--dg-title-ls: -.012em;
		--dg-title-mt: calc(var(--u) * 10.5);
		--dg-lead-fs: calc(var(--u) * 22.7);
		--dg-lead-lh: calc(var(--u) * 28);
		--dg-lead-mt: calc(var(--u) * 4.5);
	}
}
.dgi *,
.dgi *::before,
.dgi *::after { box-sizing: border-box; }
.dgi ul { margin: 0; padding: 0; list-style: none; }
.dgi li { margin: 0; font-weight: inherit; }
.dgi p { margin: 0; font-family: inherit; color: inherit; }
.dgi h3 { margin: 0; font-family: inherit; text-transform: none; letter-spacing: normal; }
.dgi a { text-decoration: none; }
.dgi svg { display: block; overflow: visible; }
.dgi-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.dgi-stage {
	position: relative;
	isolation: isolate;
	max-width: calc(var(--u) * 1942);
	min-height: calc(var(--u) * 809);
	margin: 0 auto;
	padding: calc(var(--u) * 207) 0 calc(var(--u) * (36 + var(--dg-after)));
}
.dgi-plate { position: absolute; z-index: -2; inset: 0 0 auto; overflow: hidden; }
.dgi-plate img { display: block; width: 100%; height: auto; }
/* Continuité (système commun) : la plaque naît de la teinte de page sous la lueur
   partagée avec le hero, puis s’y dissout ; le pied de page prend le relais vers
   le blanc (pas de lueur en bas). */
.dgi-stage::before,
.dgi-stage::after {
	content: "";
	position: absolute;
	z-index: -1;
	left: 0;
	right: 0;
	pointer-events: none;
}
.dgi-stage::before {
	top: -1px;
	height: var(--dg-seam);
	background:
		radial-gradient(ellipse 34% 100% at var(--dg-glow-top-x) 0, var(--dg-glow), transparent),
		var(--dg-fade-in);
}
.dgi-stage::after {
	bottom: -1px;
	height: calc(var(--dg-seam) + var(--u) * var(--dg-after));
	background:
		var(--dg-fade-out) top / 100% var(--dg-seam) no-repeat,
		linear-gradient(var(--dg-bg), var(--dg-bg)) bottom / 100% calc(var(--u) * var(--dg-after) + 2px) no-repeat;
}
@media (min-width: 2178px) {
	.dgi-stage {
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%);
		mask-image: linear-gradient(90deg, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%);
	}
}

/* --------------------------------------------------------------------------
   En-tête
   -------------------------------------------------------------------------- */
.dgi-content {
	position: absolute;
	left: calc(var(--u) * 73);
	top: calc(var(--u) * 32.5);
}
.dgi .dg-eyebrow { color: #00005a; }
.dgi .dg-eyebrow::after { height: 3px; background: linear-gradient(90deg, #0a62f2, rgb(10 98 242 / .5)); }
.dgi .dg-title { color: var(--dgi-navy); }
.dgi .dg-title span {
	background: linear-gradient(90deg, #0052f2 0%, #0a6efa 60%, #1a86ff 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.dgi .dg-lead { color: #05076c; }

.dgi .dgi-script {
	position: absolute;
	left: calc(var(--u) * 1218);
	top: calc(var(--u) * 86);
	font-family: "Sacramento", "Segoe Script", cursive;
	font-size: calc(var(--u) * 52);
	line-height: calc(var(--u) * 47);
	letter-spacing: -.01em;
	white-space: nowrap;
	color: #0a62f4;
	-webkit-text-stroke: calc(var(--u) * .55) #0a62f4;
	transform: rotate(-16deg);
	transform-origin: 0 0;
}
.dgi-script > span { display: block; }
.dgi-script > span:nth-child(2) { margin-left: calc(var(--u) * 16); }
.dgi-swoosh {
	position: absolute;
	left: calc(var(--u) * 18);
	top: calc(var(--u) * 100);
	width: calc(var(--u) * 160);
	height: calc(var(--u) * 14);
	fill: none;
	stroke: #0a62f4;
	stroke-width: 2.8;
	stroke-linecap: round;
	stroke-dasharray: 1;
}

.dgi .dgi-pledge {
	position: absolute;
	left: calc(var(--u) * 1454);
	top: calc(var(--u) * 57);
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: calc(var(--u) * 108);
	padding: 0 0 calc(var(--u) * 3) calc(var(--u) * 33);
	border-left: 1.5px solid rgba(20, 30, 130, .6);
	font-size: calc(var(--u) * 19.35);
	line-height: calc(var(--u) * 26);
	white-space: nowrap;
	color: #03057e;
}

/* --------------------------------------------------------------------------
   Les deux cartes
   -------------------------------------------------------------------------- */
.dgi .dgi-modes {
	display: grid;
	grid-template-columns: calc(var(--u) * 926) calc(var(--u) * 908);
	gap: calc(var(--u) * 22);
	margin-left: calc(var(--u) * 47);
}
.dgi-mode {
	--pl: calc(var(--u) * 29);
	--title-x: calc(var(--u) * 80);
	--list-mt: calc(var(--u) * 8.3);
	--text-fs: calc(var(--u) * 18.6);
	--btn-x: calc(var(--u) * 30);
	--btn-w: calc(var(--u) * 327);
	--btn-pl: calc(var(--u) * 50);
	--media-x: calc(var(--u) * 395);
	--clip: url(#dgi-c-a);
	position: relative;
	isolation: isolate;
	min-height: calc(var(--u) * 431);
	padding: calc(var(--u) * 22.2) 0 calc(var(--u) * 60) var(--pl);
	overflow: hidden;
	border: 1px solid rgba(226, 236, 250, .95);
	border-radius: calc(var(--u) * 14);
	background: #fff;
	box-shadow: 0 calc(var(--u) * 18) calc(var(--u) * 42) calc(var(--u) * -26) rgba(16, 70, 160, .32);
	transition: box-shadow .45s ease, border-color .45s ease;
}
.dgi-mode--b {
	--pl: calc(var(--u) * 24);
	--title-x: calc(var(--u) * 84);
	--list-mt: calc(var(--u) * 14.2);
	--text-fs: calc(var(--u) * 17.75);
	--btn-x: calc(var(--u) * 33);
	--btn-w: calc(var(--u) * 376);
	--btn-pl: calc(var(--u) * 26);
	--media-x: calc(var(--u) * 415);
	--clip: url(#dgi-c-b);
}
.dgi-mode:hover {
	border-color: rgba(170, 210, 255, .95);
	box-shadow: 0 calc(var(--u) * 26) calc(var(--u) * 52) calc(var(--u) * -26) rgba(0, 80, 210, .38);
}

/* photo en arc, doublée d’un croissant de verre clair */
.dgi-media {
	position: absolute;
	z-index: -1;
	top: 0;
	right: 0;
	bottom: 0;
	left: var(--media-x);
}
.dgi-media::before {
	content: "";
	position: absolute;
	inset: 0 0 0 calc(var(--u) * -30);
	clip-path: var(--clip);
	background: linear-gradient(90deg, #e2eefc, #eef5fe 60%, #f6faff);
}
.dgi-photo {
	position: absolute;
	inset: 0;
	display: block;
	overflow: hidden;
	clip-path: var(--clip);
}
.dgi-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--op, 27% 50%);
	transition: scale 1.2s var(--dgi-ease);
}
.dgi-mode--b .dgi-photo img { --op: 29% 50%; }
.dgi-mode:hover .dgi-photo img { scale: 1.04; }
/* liseré lumineux le long de l’arc */
.dgi-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgb(255 255 255 / .5), rgb(255 255 255 / 0) calc(var(--u) * 40));
	pointer-events: none;
}

.dgi-num {
	position: absolute;
	left: calc(var(--pl) - var(--u) * 6.5);
	top: calc(var(--u) * 12);
	display: grid;
	place-items: center;
	width: calc(var(--u) * 57);
	height: calc(var(--u) * 57);
	border-radius: 50%;
	background: linear-gradient(150deg, #1c80ff 0%, #0866fb 55%, #005cf2 100%);
	box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 14) calc(var(--u) * -6) rgba(0, 90, 230, .4);
	font-size: calc(var(--u) * 27);
	font-weight: 700;
	line-height: 1;
	color: #fff;
}
.dgi-mode--b .dgi-num { left: calc(var(--pl) - var(--u) * .5); }

.dgi .dgi-mode-title {
	margin-left: var(--title-x);
	font-size: max(16px, calc(var(--u) * 28.4));
	font-weight: 780;
	line-height: calc(var(--u) * 36);
	letter-spacing: -.015em;
	white-space: nowrap;
	color: var(--dgi-navy);
}
.dgi-mode-title span { color: #0051f5; }
.dgi .dgi-mode-text {
	margin-top: calc(var(--u) * 6.7);
	font-size: max(12px, var(--text-fs));
	line-height: calc(var(--u) * 22.4);
	white-space: nowrap;
	color: var(--dgi-text);
}
.dgi .dgi-list { margin-top: var(--list-mt); }
.dgi-list li {
	display: flex;
	align-items: center;
	gap: calc(var(--u) * 16);
	height: calc(var(--u) * 27.6);
	font-size: max(12px, calc(var(--u) * 17.75));
	white-space: nowrap;
	color: var(--dgi-ink);
}
.dgi-list li.is-key { color: #164bb0; }
.dgi-list svg {
	flex: none;
	width: calc(var(--u) * 23);
	height: calc(var(--u) * 23);
	fill: #0061fe;
}
.dgi-mode--b .dgi-list svg { margin-left: calc(var(--u) * 8); }

.dgi .dgi-btn {
	position: absolute;
	left: var(--btn-x);
	bottom: calc(var(--u) * 9);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: calc(var(--u) * 48);
	width: var(--btn-w);
	height: calc(var(--u) * 47);
	padding-left: var(--btn-pl);
	border-radius: 99px;
	background: linear-gradient(90deg, #0062fe, #0a6dff);
	box-shadow: 0 calc(var(--u) * 12) calc(var(--u) * 24) calc(var(--u) * -12) rgba(0, 90, 240, .6);
	font-size: max(13px, calc(var(--u) * 18.6));
	font-weight: 600;
	color: #fff;
	transition: background .4s ease, box-shadow .4s ease, transform .5s var(--dgi-ease);
}
.dgi .dgi-btn:hover,
.dgi .dgi-btn:focus-visible {
	background: linear-gradient(90deg, #0052e0, #0062fe);
	box-shadow: 0 calc(var(--u) * 16) calc(var(--u) * 28) calc(var(--u) * -12) rgba(0, 80, 220, .7);
	transform: translateY(calc(var(--u) * -2));
	color: #fff;
}
.dgi .dgi-btn:focus-visible { outline: 2px solid var(--dgi-blue); outline-offset: 3px; }
.dgi-btn svg {
	width: calc(var(--u) * 24);
	height: calc(var(--u) * 24);
	fill: none;
	stroke: currentColor;
	stroke-width: 2.3;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .45s var(--dgi-ease);
}
.dgi-btn:hover svg,
.dgi-btn:focus-visible svg { transform: translateX(calc(var(--u) * 4)); }

/* étiquette marine (carte 1) */
.dgi .dgi-tag {
	position: absolute;
	top: calc(var(--u) * 3);
	right: 0;
	width: calc(var(--u) * 193);
	height: calc(var(--u) * 126);
	padding: calc(var(--u) * 17) 0 0 calc(var(--u) * 25);
	border-radius: calc(var(--u) * 12);
	background: linear-gradient(160deg, rgba(0, 44, 104, .92), rgba(0, 30, 80, .9));
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	font-size: calc(var(--u) * 16.6);
	font-weight: 700;
	line-height: calc(var(--u) * 24.5);
	letter-spacing: .05em;
	text-transform: uppercase;
	white-space: nowrap;
	color: #fff;
}
.dgi-tag::after {
	content: "";
	position: absolute;
	left: calc(var(--u) * 25);
	top: calc(var(--u) * 104);
	width: calc(var(--u) * 45);
	height: 2px;
	background: #fff;
}

/* encarts posés sur les photos */
.dgi .dgi-note {
	position: absolute;
	left: calc(var(--u) * 483);
	top: calc(var(--u) * 340);
	display: flex;
	align-items: center;
	width: calc(var(--u) * 395);
	height: calc(var(--u) * 88);
	padding: 0 0 calc(var(--u) * 4) calc(var(--u) * 28);
	border: 1px solid rgba(255, 255, 255, .95);
	border-radius: calc(var(--u) * 12);
	background: rgba(255, 255, 255, .97);
	box-shadow: 0 calc(var(--u) * 16) calc(var(--u) * 32) calc(var(--u) * -16) rgba(10, 40, 110, .35);
	font-size: max(12px, calc(var(--u) * 18.8));
	line-height: calc(var(--u) * 25);
	letter-spacing: .012em;
	white-space: nowrap;
	color: #0b0d5e;
}
.dgi-note strong { display: block; font-weight: 700; color: var(--dgi-navy); }
.dgi-note-ico {
	flex: none;
	width: calc(var(--u) * 64);
	height: calc(var(--u) * 64);
	margin: 0 calc(var(--u) * 27) 0 calc(var(--u) * -5);
	fill: none;
	stroke: #0062fe;
	stroke-width: 2.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.dgi .dgi-note--deep {
	left: calc(var(--u) * 545);
	top: calc(var(--u) * 328);
	width: calc(var(--u) * 340);
	height: calc(var(--u) * 93);
	padding: 0 0 calc(var(--u) * 10) calc(var(--u) * 22);
	border-color: rgba(110, 160, 255, .55);
	font-size: calc(var(--u) * 18.2);
	letter-spacing: 0;
	background: linear-gradient(160deg, rgba(0, 42, 96, .93), rgba(0, 22, 66, .93));
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 calc(var(--u) * 16) calc(var(--u) * 32) calc(var(--u) * -14) rgba(0, 20, 70, .55);
	line-height: calc(var(--u) * 26);
	color: #fff;
}
.dgi-note--deep .dgi-note-ico {
	width: calc(var(--u) * 52);
	height: calc(var(--u) * 43);
	margin: 0 calc(var(--u) * 21) 0 0;
	stroke: #fff;
	stroke-width: 1.7;
}

/* --------------------------------------------------------------------------
   Bandeau des atouts + appel à l’action
   -------------------------------------------------------------------------- */
.dgi .dgi-foot {
	display: flex;
	gap: calc(var(--u) * 23);
	margin: calc(var(--u) * 20) 0 0 calc(var(--u) * 46);
}
.dgi .dgi-assets {
	display: grid;
	grid-template-columns: 332fr 371fr 338fr 393fr;
	align-items: center;
	flex: none;
	width: calc(var(--u) * 1434);
	min-height: calc(var(--u) * 115);
	border: 1px solid rgba(255, 255, 255, .95);
	border-radius: calc(var(--u) * 14);
	background: rgba(255, 255, 255, .88);
	box-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 34) calc(var(--u) * -24) rgba(16, 70, 160, .28);
}
.dgi-asset {
	display: flex;
	align-items: center;
	gap: calc(var(--u) * 26);
	padding: calc(var(--u) * 10) calc(var(--u) * 8) calc(var(--u) * 15) calc(var(--u) * 29);
}
.dgi-asset:first-child { gap: calc(var(--u) * 28); padding-left: calc(var(--u) * 16); }
.dgi-asset-ico { margin-top: calc(var(--u) * 5); }
.dgi-asset + .dgi-asset { border-left: 1px solid #d9e3f2; }
.dgi-asset-ico {
	display: grid;
	place-items: center;
	flex: none;
	width: calc(var(--u) * 78);
	height: calc(var(--u) * 78);
	border-radius: 50%;
	background: radial-gradient(circle at 40% 30%, #f1f8ff, #e4f0fd 70%);
	transition: background .45s ease, box-shadow .45s ease;
}
.dgi-asset-ico svg {
	width: calc(var(--u) * 46);
	height: calc(var(--u) * 46);
	fill: none;
	stroke: #0062fe;
	stroke-width: 2.7;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: stroke .45s ease, transform .55s var(--dgi-ease);
}
.dgi-asset-ico .dgi-ico-users { width: calc(var(--u) * 48); height: calc(var(--u) * 40); stroke-width: 1.8; }
.dgi-asset:hover .dgi-asset-ico {
	background: linear-gradient(150deg, #2a92ff, #0a6ffb);
	box-shadow: 0 calc(var(--u) * 12) calc(var(--u) * 22) calc(var(--u) * -10) rgba(0, 100, 250, .55);
}
.dgi-asset:hover .dgi-asset-ico svg { stroke: #fff; transform: scale(1.06); }
.dgi .dgi-asset-title {
	font-size: max(12.5px, calc(var(--u) * 15.6));
	font-weight: 700;
	line-height: calc(var(--u) * 22);
	white-space: nowrap;
	color: #00004a;
}
.dgi .dgi-asset-text {
	margin-top: calc(var(--u) * 1);
	font-size: max(12px, calc(var(--u) * 15.6));
	line-height: calc(var(--u) * 22);
	white-space: nowrap;
	color: #2d36a0;
}

.dgi .dgi-cta {
	position: relative;
	display: flex;
	align-items: center;
	flex: none;
	width: calc(var(--u) * 403);
	min-height: calc(var(--u) * 115);
	padding: 0 calc(var(--u) * 18) 0 calc(var(--u) * 19);
	overflow: hidden;
	border-radius: calc(var(--u) * 12);
	background: linear-gradient(110deg, #0062fc 0%, #0068fd 60%, #0a72ff 100%);
	box-shadow: 0 calc(var(--u) * 20) calc(var(--u) * 40) calc(var(--u) * -18) rgba(0, 80, 220, .55);
	color: #fff;
	transition: transform .5s var(--dgi-ease), box-shadow .45s ease;
}
.dgi-cta::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .22) 50%, transparent 65%);
	translate: -120% 0;
	animation: dgi-sheen 7s ease-in-out infinite 3.5s;
	pointer-events: none;
}
@keyframes dgi-sheen { 0%, 72% { translate: -120% 0; } 100% { translate: 120% 0; } }
.dgi .dgi-cta:hover,
.dgi .dgi-cta:focus-visible {
	transform: translateY(calc(var(--u) * -4));
	box-shadow: 0 calc(var(--u) * 26) calc(var(--u) * 46) calc(var(--u) * -18) rgba(0, 80, 220, .65);
	color: #fff;
}
.dgi .dgi-cta:focus-visible { outline: 2px solid var(--dgi-blue); outline-offset: 4px; }
.dgi-cta-ico {
	flex: none;
	width: calc(var(--u) * 60);
	height: calc(var(--u) * 60);
	fill: none;
	stroke: #fff;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.dgi-cta-txt {
	display: flex;
	flex-direction: column;
	gap: calc(var(--u) * 6);
	margin-left: calc(var(--u) * 14);
	padding: calc(var(--u) * 4) 0 calc(var(--u) * 4) calc(var(--u) * 16);
	border-left: 1px solid rgba(255, 255, 255, .5);
	white-space: nowrap;
}
.dgi-cta-txt strong {
	font-size: max(13px, calc(var(--u) * 17.4));
	font-weight: 600;
	line-height: calc(var(--u) * 22);
}
.dgi-cta-txt span {
	font-size: max(10.5px, calc(var(--u) * 12.3));
	line-height: calc(var(--u) * 19.5);
	color: #eef4ff;
}
.dgi-cta-btn {
	display: grid;
	place-items: center;
	flex: none;
	width: calc(var(--u) * 56);
	height: calc(var(--u) * 56);
	margin-left: auto;
	border-radius: 50%;
	background: #fff;
	color: #0a62f0;
	box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 14) rgba(0, 30, 110, .25);
}
.dgi-cta-btn svg {
	width: calc(var(--u) * 26);
	height: calc(var(--u) * 26);
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .45s var(--dgi-ease);
}
.dgi-cta:hover .dgi-cta-btn svg,
.dgi-cta:focus-visible .dgi-cta-btn svg { transform: translateX(calc(var(--u) * 4)); }

/* --------------------------------------------------------------------------
   Entrée au défilement (digilium-system.js pose is-armed / is-in)
   -------------------------------------------------------------------------- */
.dgi-content > :nth-child(2) { --i: 1; }
.dgi-content > :nth-child(3) { --i: 2; }
.dgi-script,
.dgi-pledge { --i: 2; }
.dgi-mode { --i: 3; }
.dgi-mode--b { --i: 4; }
.dgi-foot { --i: 6; }
.dgi.is-armed :is(.dgi-content > *, .dgi-script, .dgi-pledge, .dgi-mode, .dgi-foot) { opacity: 0; }
.dgi.is-in :is(.dgi-content > *, .dgi-script, .dgi-pledge, .dgi-mode, .dgi-foot) {
	animation: dg-rise var(--dg-reveal-dur) var(--dg-ease) backwards;
	animation-delay: min(calc(var(--dg-stagger) * (var(--i, 0) + var(--dg-base, 0))), 640ms);
}
/* les coches se posent l’une après l’autre, la signature se trace */
@keyframes dgi-pop { from { opacity: 0; scale: .4; } }
.dgi-list li:nth-child(2) svg { --d: 1; }
.dgi-list li:nth-child(3) svg { --d: 2; }
.dgi-list li:nth-child(4) svg { --d: 3; }
.dgi-list li:nth-child(5) svg { --d: 4; }
.dgi-list li:nth-child(6) svg { --d: 5; }
.dgi.is-armed .dgi-list svg { opacity: 0; }
.dgi.is-in .dgi-list svg { animation: dgi-pop .5s cubic-bezier(.3, 1.6, .5, 1) backwards; animation-delay: calc(600ms + var(--d, 0) * 90ms); }
.dgi.is-armed .dgi-swoosh { stroke-dashoffset: 1; }
.dgi.is-in .dgi-swoosh { transition: stroke-dashoffset 1.1s var(--dg-ease) .8s; }

/* --------------------------------------------------------------------------
   Desktop compact (1200–1365) : les textes longs passent à la ligne
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) and (max-width: 1365.98px) {
	.dgi .dgi-asset-text,
	.dgi-cta-txt { white-space: normal; line-height: 1.3; }
	.dgi-asset-text br { display: none; }
	.dgi .dgi-asset-title { white-space: normal; line-height: 1.25; }
	.dgi .dgi-asset { gap: calc(var(--u) * 18); }
	.dgi-cta-txt br { display: none; }
}

/* --------------------------------------------------------------------------
   Tablette & mobile (< 1200) : en-tête, puis les deux cartes photo en tête
   (côte à côte, puis empilées), atouts et appel à l’action
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
	.dgi { --u: 1px; --dgi-photo-h: clamp(220px, 30vw, 300px); background: linear-gradient(180deg, var(--dg-bg), #eef5fd 70%, var(--dg-bg)); }
	.dgi-stage {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"content content"
			"script  pledge"
			"modes   modes"
			"foot    foot";
		align-items: center;
		min-height: 0;
		padding: var(--dg-section-y) var(--dg-gutter);
	}
	.dgi-plate,
	.dgi-stage::before,
	.dgi-stage::after { display: none; }
	.dgi-content,
	.dgi .dgi-script,
	.dgi .dgi-pledge { position: relative; left: auto; top: auto; }
	.dgi-content { grid-area: content; }
	.dgi .dg-title,
	.dgi .dg-lead { white-space: normal; }
	.dgi .dg-title span { display: block; }
	.dgi .dg-lead br { display: none; }

	.dgi .dgi-script {
		grid-area: script;
		justify-self: start;
		margin: 30px 0 10px 6px;
		font-size: clamp(30px, 5vw, 40px);
		line-height: .95;
		-webkit-text-stroke: .5px #0a62f4;
		transform: rotate(-8deg);
		transform-origin: 0 50%;
	}
	.dgi-script > span { display: inline; }
	.dgi-script > span:nth-child(2) { margin-left: 0; }
	.dgi-swoosh { left: 40%; top: auto; bottom: -12px; width: 58%; height: 10px; }
	.dgi .dgi-pledge {
		grid-area: pledge;
		height: auto;
		margin-top: 26px;
		padding: 2px 0 2px 18px;
		border-left-color: #0a62f4;
		font-size: clamp(15px, 2vw, 17px);
		line-height: 1.45;
	}

	.dgi .dgi-modes {
		grid-area: modes;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
		margin: 30px 0 0;
	}
	.dgi-mode,
	.dgi-mode--b {
		--pl: 22px;
		--title-x: 62px;
		--list-mt: 14px;
		display: flex;
		flex-direction: column;
		min-height: 0;
		padding: calc(var(--dgi-photo-h) + 26px) 22px 24px;
		border-radius: 22px;
	}
	.dgi-mode-title,
	.dgi-mode-text,
	.dgi-list { align-self: stretch; }
	.dgi-media {
		inset: 0 0 auto;
		height: var(--dgi-photo-h);
	}
	.dgi-media::before { display: none; }
	.dgi-photo { clip-path: none; }
	.dgi-photo::after { background: linear-gradient(180deg, rgb(4 18 46 / 0) 55%, rgb(4 18 46 / .35)); }
	.dgi-photo img { object-position: 45% 30%; }
	.dgi-mode--b .dgi-photo img { --op: 60% 40%; }
	.dgi-num,
	.dgi-mode--b .dgi-num { left: 22px; top: calc(var(--dgi-photo-h) + 22px); width: 46px; height: 46px; font-size: 22px; }
	.dgi .dgi-mode-title { margin-left: var(--title-x); min-height: 52px; font-size: clamp(19px, 2.4vw, 23px); line-height: 1.25; white-space: normal; }
	.dgi .dgi-mode-text { margin-top: 12px; font-size: 15.5px; line-height: 1.5; white-space: normal; }
	.dgi-mode-text br { display: none; }
	.dgi-list li { height: auto; min-height: 30px; gap: 12px; font-size: 15.5px; line-height: 1.35; white-space: normal; }
	.dgi-list svg,
	.dgi-mode--b .dgi-list svg { width: 21px; height: 21px; margin: 0; }
	.dgi .dgi-btn {
		position: relative;
		left: auto;
		bottom: auto;
		gap: 18px;
		flex: none;
		width: 100%;
		height: 50px;
		margin-top: auto;
		padding: 0;
		font-size: 16.5px;
	}
	.dgi .dgi-list { margin-bottom: 22px; }
	.dgi .dgi-tag {
		top: 14px;
		right: 14px;
		width: auto;
		height: auto;
		padding: 12px 18px 22px;
		font-size: 13px;
		line-height: 1.45;
	}
	.dgi-tag::after { left: 18px; top: auto; bottom: 12px; width: 32px; }
	.dgi .dgi-note,
	.dgi .dgi-note--deep {
		left: 14px;
		top: calc(var(--dgi-photo-h) - 76px);
		width: auto;
		max-width: calc(100% - 28px);
		height: auto;
		padding: 12px 18px 12px 14px;
		font-size: 14.5px;
		line-height: 1.4;
		white-space: normal;
	}
	.dgi-note-ico,
	.dgi-note--deep .dgi-note-ico { width: 36px; height: 36px; margin-right: 14px; }
	.dgi-note--deep .dgi-note-ico { height: 30px; }
	.dgi-note br { display: none; }

	.dgi .dgi-foot {
		grid-area: foot;
		flex-direction: column;
		gap: 16px;
		margin: 22px 0 0;
	}
	.dgi .dgi-assets {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
		width: auto;
		border: 0;
		background: none;
		box-shadow: none;
	}
	.dgi .dgi-asset,
	.dgi .dgi-asset:first-child {
		gap: 16px;
		height: 100%;
		padding: 18px 20px;
		border: 1px solid rgba(225, 236, 250, .95);
		border-radius: 18px;
		background: #fff;
		box-shadow: 0 14px 30px -22px rgba(16, 70, 160, .35);
	}
	.dgi-asset-ico { width: 60px; height: 60px; }
	.dgi-asset-ico svg { width: 34px; height: 34px; }
	.dgi-asset-ico .dgi-ico-users { width: 34px; height: 28px; }
	.dgi .dgi-asset-title { font-size: 17px; line-height: 1.3; white-space: normal; }
	.dgi .dgi-asset-text { margin-top: 4px; font-size: 15px; line-height: 1.45; white-space: normal; }
	.dgi-asset-text br { display: none; }

	.dgi .dgi-cta { width: auto; min-height: 92px; padding: 0 18px 0 22px; border-radius: 18px; }
	.dgi-cta-ico { width: 46px; height: 46px; }
	.dgi-cta-txt { margin-left: 16px; padding-left: 16px; white-space: normal; }
	.dgi-cta-txt strong { font-size: 18px; line-height: 1.3; }
	.dgi-cta-txt span { font-size: 14.5px; line-height: 1.4; }
	.dgi-cta-txt br { display: none; }
	.dgi-cta-btn { width: 48px; height: 48px; }
	.dgi-cta-btn svg { width: 24px; height: 24px; }
}
@media (max-width: 759.98px) {
	.dgi { --dgi-photo-h: clamp(200px, 56vw, 280px); }
	.dgi-stage {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "content" "script" "pledge" "modes" "foot";
		align-items: start;
	}
	.dgi .dgi-script { font-size: clamp(28px, 8vw, 36px); }
	.dgi .dgi-pledge { margin-top: 22px; }
	.dgi-pledge br { display: none; }
	.dgi .dgi-modes { grid-template-columns: minmax(0, 1fr); }
	.dgi .dgi-tag { top: 10px; right: 10px; padding: 8px 12px 15px; font-size: 11px; }
	.dgi-tag::after { left: 12px; bottom: 8px; width: 24px; }
	.dgi .dgi-note,
	.dgi .dgi-note--deep { left: 10px; top: calc(var(--dgi-photo-h) - 62px); padding: 9px 14px 9px 10px; font-size: 13.5px; }
	.dgi-note-ico,
	.dgi-note--deep .dgi-note-ico { width: 30px; height: 30px; margin-right: 10px; }
	.dgi .dgi-assets { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.dgi .dgi-asset,
	.dgi .dgi-asset:first-child { padding: 14px 16px; }
	.dgi-asset-ico { width: 52px; height: 52px; }
	.dgi-asset-ico svg { width: 30px; height: 30px; }
	.dgi-cta-txt strong { font-size: 16.5px; }
}

@media (prefers-reduced-motion: reduce) {
	.dgi-cta::after { animation: none; }
	.dgi *,
	.dgi *::before,
	.dgi *::after { transition-duration: 0s !important; }
}

/* ==========================================================================
   DIGIlium — Service : hero « Nos réalisations »
   Desktop : cotes en --u = 1px de la maquette (1942 × 809), ramené à la fenêtre.
   La plaque (img/features/realisations*) porte le décor et la photo ; tout le
   reste (textes, cartes, processus, étiquettes) est en HTML aux cotes exactes.
   ========================================================================== */
.dgr {
	--u: min(1.12px, calc(100vw / 1942));
	--dgr-navy: #020c3e;
	--dgr-ink: #12195a;
	--dgr-indigo: #0b1466;
	--dgr-muted: #1d2470;
	--dgr-blue: #0a7bfd;
	--dgr-icon: #0068fb;
	--dgr-pill: #007dfe;
	--dgr-tag: #01184b;
	--dgr-card: #fbfdfe;

	position: relative;
	color: var(--dgr-ink);
	font-family: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background: linear-gradient(180deg, #fafcfd 0%, #e6f2fd 45%, var(--dg-bg) 100%);
}
.dgr *,
.dgr *::before,
.dgr *::after { box-sizing: border-box; }
.dgr ul,
.dgr ol { margin: 0; padding: 0; list-style: none; }
.dgr p,
.dgr h1,
.dgr h2 { margin: 0; }
.dgr svg { display: block; overflow: visible; }
.dgr-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.dgr-sprite symbol,
.dgr use { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }

.dgr-stage {
	position: relative;
	isolation: isolate;
	max-width: calc(var(--u) * 1942);
	height: calc(var(--u) * 809);
	margin: 0 auto;
	overflow: hidden;
}
.dgr-plate { position: absolute; z-index: -2; inset: 0 0 auto; }
.dgr-plate img { display: block; width: 100%; height: auto; }
.dgr-photo-m { display: none; }

/* ---------- bandeau : surtitre, titre, chapeau ---------- */
.dgr .dg-eyebrow {
	position: absolute;
	left: calc(var(--u) * 65);
	top: calc(var(--u) * 27.6);
	font-size: calc(var(--u) * 16);
	font-weight: 500;
	line-height: 1;
	letter-spacing: .265em;
	color: var(--dgr-indigo);
}
.dgr .dg-eyebrow::after {
	width: calc(var(--u) * 55);
	height: max(1.5px, calc(var(--u) * 2));
	margin-left: calc(var(--u) * 20);
	background: #3b8bfd;
}
.dgr .dg-title {
	position: absolute;
	left: calc(var(--u) * 60);
	top: calc(var(--u) * 58.5);
	max-width: none;
	margin: 0;
	font-size: calc(var(--u) * 59);
	font-weight: 700;
	line-height: calc(var(--u) * 55);
	letter-spacing: -.028em;
	white-space: nowrap;
	color: var(--dgr-navy);
}
.dgr .dg-title span { color: var(--dgr-blue); }
.dgr .dg-lead {
	position: absolute;
	left: calc(var(--u) * 61);
	top: calc(var(--u) * 178);
	max-width: none;
	margin: 0;
	font-size: calc(var(--u) * 18.25);
	font-weight: 400;
	line-height: calc(var(--u) * 27);
	white-space: nowrap;
	color: var(--dgr-ink);
}
.dgr .dg-lead strong { font-weight: 700; color: var(--dgr-navy); }

/* ---------- signature manuscrite ---------- */
.dgr-script {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	font-family: "Sacramento", "Segoe Script", cursive;
	font-size: calc(var(--u) * 55);
	line-height: 1;
	letter-spacing: -.025em;
	white-space: nowrap;
	color: #1170fb;
	-webkit-text-stroke: calc(var(--u) * .35) #1170fb;
	pointer-events: none;
}
.dgr-script span {
	position: absolute;
	left: calc(var(--u) * var(--sx));
	top: calc(var(--u) * var(--sy));
	transform: rotate(-15deg);
	transform-origin: 0 80%;
}
.dgr-script span:nth-child(1) { --sx: 1021; --sy: 95; }
.dgr-script span:nth-child(2) { --sx: 1031; --sy: 135; }
.dgr-script span:nth-child(3) { --sx: 1058; --sy: 174; }
.dgr-swoosh {
	position: absolute;
	left: calc(var(--u) * 1054);
	top: calc(var(--u) * 196);
	width: calc(var(--u) * 180);
	height: calc(var(--u) * 44);
	fill: #1170fb;
}

/* ---------- carte givrée : trois engagements ---------- */
.dgr .dgr-points {
	position: absolute;
	left: calc(var(--u) * 1252);
	top: calc(var(--u) * 84);
	width: calc(var(--u) * 272);
	height: calc(var(--u) * 164);
	padding: calc(var(--u) * 26.25) 0 0 calc(var(--u) * 60);
	border-radius: calc(var(--u) * 18);
	background: linear-gradient(100deg, rgba(255, 255, 255, .9) 0%, rgba(248, 252, 255, .84) 55%, rgba(238, 246, 255, .72) 100%);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 18px 38px -24px rgba(10, 50, 120, .35);
	-webkit-backdrop-filter: blur(16px) saturate(125%);
	backdrop-filter: blur(16px) saturate(125%);
}
.dgr-points::before {
	content: "";
	position: absolute;
	left: calc(var(--u) * 33);
	top: calc(var(--u) * 24);
	width: 1px;
	height: calc(var(--u) * 127);
	background: #6b99f1;
}
.dgr-points li {
	display: flex;
	align-items: center;
	gap: calc(var(--u) * 9);
	height: calc(var(--u) * 41.5);
	font-size: calc(var(--u) * 14.2);
	font-weight: 500;
	white-space: nowrap;
	color: #0f1a6e;
}
.dgr-points svg { flex: none; width: calc(var(--u) * 34); height: calc(var(--u) * 34); margin-left: calc(var(--u) * -3); color: var(--dgr-icon); stroke-width: 1.85; }

/* ---------- panneaux ---------- */
.dgr-panel {
	position: absolute;
	top: calc(var(--u) * 262);
	height: calc(var(--u) * 400);
	overflow: hidden;
	border-radius: calc(var(--u) * 14);
	background: var(--dgr-card);
	box-shadow: 0 calc(var(--u) * 18) calc(var(--u) * 40) calc(var(--u) * -20) rgba(20, 70, 150, .22), 0 0 0 1px rgba(255, 255, 255, .9);
	transition: transform .5s var(--dg-ease), box-shadow .5s var(--dg-ease);
}
.dgr-panel:hover {
	transform: translateY(calc(var(--u) * -4));
	box-shadow: 0 calc(var(--u) * 26) calc(var(--u) * 50) calc(var(--u) * -20) rgba(20, 70, 150, .3), 0 0 0 1px rgba(255, 255, 255, .95);
}
.dgr-panel-photo { position: absolute; left: 0; top: 0; }
.dgr-panel-photo img { display: block; width: 100%; height: auto; }
.dgr-panel-eyebrow {
	position: absolute;
	font-size: calc(var(--u) * 17);
	font-weight: 500;
	line-height: 1;
	letter-spacing: .235em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* « Votre projet » */
.dgr-projet { left: calc(var(--u) * 37); width: calc(var(--u) * 364); background: #fcfdfd; }
.dgr-projet .dgr-panel-photo { width: calc(var(--u) * 364); }
.dgr-projet .dgr-panel-eyebrow { left: calc(var(--u) * 21); top: calc(var(--u) * 15.2); letter-spacing: .262em; color: #06107a; }
.dgr-projet .dgr-panel-eyebrow::after {
	content: "";
	position: absolute;
	left: calc(var(--u) * 1);
	top: calc(var(--u) * 24.5);
	width: calc(var(--u) * 57);
	height: max(1.5px, calc(var(--u) * 2.5));
	border-radius: 2px;
	background: #097bfc;
}
.dgr-projet-title {
	position: absolute;
	left: calc(var(--u) * 31);
	top: calc(var(--u) * 288.3);
	font-size: calc(var(--u) * 21);
	font-weight: 700;
	line-height: calc(var(--u) * 22);
	letter-spacing: .012em;
	white-space: nowrap;
	color: #0a0f5c;
}
.dgr-projet-text {
	position: absolute;
	left: calc(var(--u) * 31);
	top: calc(var(--u) * 338.2);
	font-size: calc(var(--u) * 15.9);
	line-height: calc(var(--u) * 20);
	white-space: nowrap;
	color: #151c6a;
}

/* processus */
.dgr-process { left: calc(var(--u) * 417); width: calc(var(--u) * 955); }
.dgr-logo {
	position: absolute;
	left: calc(var(--u) * 427);
	top: calc(var(--u) * 6);
	font-size: calc(var(--u) * 66);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.03em;
	white-space: nowrap;
	color: #050a2e;
}
.dgr-logo span { font-weight: 700; color: #0071ec; }
.dgr-kicker {
	position: absolute;
	left: calc(var(--u) * 281);
	top: calc(var(--u) * 78.45);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: calc(var(--u) * 15);
	width: calc(var(--u) * 512);
	font-size: calc(var(--u) * 17);
	font-weight: 500;
	line-height: 1;
	letter-spacing: .2em;
	text-transform: uppercase;
	white-space: nowrap;
	color: #0b1048;
}
.dgr-kicker::before,
.dgr-kicker::after { content: ""; width: calc(var(--u) * 58); height: max(1px, calc(var(--u) * 1.6)); background: #1073fc; }

.dgr-steps { position: absolute; inset: 0; }
.dgr-steps li {
	position: absolute;
	left: calc(var(--u) * (var(--cx) - 76));
	top: 0;
	width: calc(var(--u) * 152);
	height: 100%;
	text-align: center;
}
.dgr-step-ico {
	position: absolute;
	left: calc(var(--u) * 36.5);
	top: calc(var(--u) * 125);
	display: grid;
	place-items: center;
	width: calc(var(--u) * 79);
	height: calc(var(--u) * 79);
	border-radius: 50%;
	background: radial-gradient(circle at 50% 30%, #f0f7ff 0%, #e4f0fd 60%, #dcebfc 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 calc(var(--u) * 8) calc(var(--u) * 18) calc(var(--u) * -10) rgba(20, 90, 200, .35);
	transition: transform .45s var(--dg-ease), box-shadow .45s var(--dg-ease);
}
.dgr-step-ico svg { width: calc(var(--u) * 43); height: calc(var(--u) * 43); color: #006afa; stroke-width: 1.75; }
.dgr-steps li:hover .dgr-step-ico { transform: translateY(calc(var(--u) * -4)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 calc(var(--u) * 14) calc(var(--u) * 24) calc(var(--u) * -10) rgba(20, 90, 200, .45); }
.dgr-steps strong {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(var(--u) * 214);
	font-size: calc(var(--u) * 16);
	font-weight: 700;
	line-height: calc(var(--u) * 17);
	letter-spacing: -.01em;
	white-space: nowrap;
	color: #0a0f2e;
}
.dgr-steps li > span:last-child {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(var(--u) * 254.4);
	font-size: calc(var(--u) * 15.5);
	line-height: calc(var(--u) * 20);
	white-space: nowrap;
	color: #1d2470;
}
.dgr-flow {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
.dgr-arrows { fill: none; stroke: #1477fb; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dgr-bracket { fill: none; stroke: #2d94fe; stroke-width: 1.5; }
.dgr-dot { fill: #087ffe; }
.dgr-pill {
	position: absolute;
	left: calc(var(--u) * 255);
	top: calc(var(--u) * 338);
	display: grid;
	place-items: center;
	width: calc(var(--u) * 455);
	height: calc(var(--u) * 40);
	border-radius: calc(var(--u) * 20);
	background: var(--dgr-pill);
	box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 24) calc(var(--u) * -8) rgba(0, 125, 254, .55);
	font-size: calc(var(--u) * 18.5);
	font-weight: 500;
	white-space: nowrap;
	color: #fff;
}

/* « Votre solution » */
.dgr-solution { left: calc(var(--u) * 1390); width: calc(var(--u) * 520); }
.dgr-solution .dgr-panel-photo { width: calc(var(--u) * 520); }
.dgr-solution .dgr-panel-eyebrow { left: calc(var(--u) * 17); top: calc(var(--u) * 16.2); letter-spacing: .292em; color: #0a1068; }
.dgr-solution .dgr-panel-eyebrow::after {
	content: "";
	position: absolute;
	left: calc(var(--u) * -2);
	top: calc(var(--u) * 24.5);
	width: calc(var(--u) * 60);
	height: max(1.5px, calc(var(--u) * 2.5));
	border-radius: 2px;
	background: rgba(9, 123, 252, .2);
}
.dgr-solution-lead {
	position: absolute;
	left: calc(var(--u) * 18);
	top: calc(var(--u) * 44);
	font-size: calc(var(--u) * 16.8);
	line-height: 1;
	white-space: nowrap;
	color: #141b66;
}
.dgr-tags li {
	position: absolute;
	left: calc(var(--u) * var(--x));
	top: calc(var(--u) * var(--y));
	display: grid;
	place-items: center;
	width: calc(var(--u) * var(--w));
	height: calc(var(--u) * var(--h));
	border-radius: calc(var(--u) * 5);
	background: var(--dgr-tag);
	box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 14) calc(var(--u) * -6) rgba(1, 20, 70, .55);
	font-size: calc(var(--u) * var(--fs, 14));
	font-weight: 500;
	line-height: 1.22;
	text-align: center;
	white-space: nowrap;
	color: #fff;
}

/* ---------- bandeau des atouts ---------- */
.dgr-feats > li {
	position: absolute;
	left: calc(var(--u) * var(--x));
	top: calc(var(--u) * 679);
	width: calc(var(--u) * var(--w));
	height: calc(var(--u) * 102);
	border-radius: calc(var(--u) * 12);
	background: #f9fcfe;
	box-shadow: 0 calc(var(--u) * 12) calc(var(--u) * 28) calc(var(--u) * -18) rgba(20, 70, 150, .28), 0 0 0 1px rgba(255, 255, 255, .95);
	transition: transform .45s var(--dg-ease), box-shadow .45s var(--dg-ease);
}
.dgr-feats > li:not(.dgr-cta):hover { transform: translateY(calc(var(--u) * -3)); box-shadow: 0 calc(var(--u) * 18) calc(var(--u) * 32) calc(var(--u) * -18) rgba(20, 70, 150, .35), 0 0 0 1px #fff; }
.dgr-feat-ico {
	position: absolute;
	left: calc(var(--u) * 9);
	top: calc(var(--u) * 10);
	display: grid;
	place-items: center;
	width: calc(var(--u) * 66);
	height: calc(var(--u) * 66);
	border-radius: 50%;
	background: radial-gradient(circle at 50% 35%, #f1f8ff 0%, #e6f2fe 100%);
}
.dgr-feat-ico svg { width: calc(var(--u) * 41); height: calc(var(--u) * 41); color: #0165f9; stroke-width: 1.9; }
.dgr-feats li:nth-child(5) .dgr-feat-ico svg { stroke-width: 1.7; }
.dgr-feat-txt {
	position: absolute;
	left: calc(var(--u) * var(--tx, 89));
	top: calc(var(--u) * var(--ty, 16.5));
	font-size: calc(var(--u) * 14.7);
	line-height: calc(var(--u) * 20);
	white-space: nowrap;
	color: #292f7c;
}
.dgr-feat-txt strong {
	display: block;
	margin-bottom: calc(var(--u) * 4);
	font-size: calc(var(--u) * 14.6);
	font-weight: 700;
	line-height: calc(var(--u) * 19);
	color: #000022;
}
.dgr-feats li:nth-child(2) { --tx: 91; }
.dgr-feats li:nth-child(3) { --tx: 85; --ty: 12.75; }
.dgr-feats li:nth-child(3) strong,
.dgr-feats li:nth-child(5) strong { margin-bottom: calc(var(--u) * 2); }
.dgr-feats li:nth-child(4) { --tx: 92; }
.dgr-feats li:nth-child(5) { --tx: 86; --ty: 13.75; }

.dgr-feats .dgr-cta { top: calc(var(--u) * 678); height: calc(var(--u) * 104); background: none; box-shadow: none; }
.dgr-cta a {
	position: absolute;
	inset: 0;
	border-radius: calc(var(--u) * 12);
	background: linear-gradient(100deg, #0180fe 0%, #007cfe 100%);
	box-shadow: 0 calc(var(--u) * 16) calc(var(--u) * 34) calc(var(--u) * -16) rgba(0, 110, 250, .6);
	color: #fff;
	transition: transform .45s var(--dg-ease), box-shadow .45s var(--dg-ease);
}
.dgr-cta a:hover,
.dgr-cta a:focus-visible { color: #fff; transform: translateY(calc(var(--u) * -3)); box-shadow: 0 calc(var(--u) * 22) calc(var(--u) * 40) calc(var(--u) * -14) rgba(0, 110, 250, .7); }
.dgr-cta a::after {
	content: "";
	position: absolute;
	left: calc(var(--u) * 87);
	top: calc(var(--u) * 22);
	width: 1px;
	height: calc(var(--u) * 60);
	background: rgba(255, 255, 255, .55);
}
.dgr-cta-ico {
	position: absolute;
	left: calc(var(--u) * 20);
	top: calc(var(--u) * 24);
	width: calc(var(--u) * 54);
	height: calc(var(--u) * 54);
	color: #fff;
	stroke-width: 1.5;
}
.dgr-cta-txt {
	position: absolute;
	left: calc(var(--u) * 102);
	top: calc(var(--u) * 22);
	font-size: calc(var(--u) * 15.5);
	line-height: calc(var(--u) * 20);
	white-space: nowrap;
	color: #eef5ff;
}
.dgr-cta-txt strong {
	display: block;
	margin-bottom: calc(var(--u) * 3);
	font-size: calc(var(--u) * 17.4);
	font-weight: 700;
	line-height: calc(var(--u) * 22);
	color: #fff;
}
.dgr-cta-go {
	position: absolute;
	left: calc(var(--u) * 330);
	top: calc(var(--u) * 30);
	display: grid;
	place-items: center;
	width: calc(var(--u) * 50);
	height: calc(var(--u) * 50);
	border-radius: 50%;
	background: #fff;
	transition: transform .45s var(--dg-ease);
}
.dgr-cta-go svg { width: calc(var(--u) * 24); height: calc(var(--u) * 24); color: var(--dgr-pill); stroke-width: 2.4; }
.dgr-cta a:hover .dgr-cta-go { transform: translateX(calc(var(--u) * 4)); }

/* --------------------------------------------------------------------------
   Tablette & mobile (< 1200) : photo plein cadre, carte de texte qui remonte
   dessus, engagements, puis les trois panneaux et les atouts recomposés.
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
	.dgr { --u: 1px; background: linear-gradient(180deg, var(--dg-bg), #eef5fd 70%, var(--dg-bg)); }
	.dgr-stage {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
		height: auto;
		padding: 0 0 var(--dg-section-y);
	}
	.dgr-plate,
	.dgr-script,
	.dgr .dgr-flow { display: none; }

	.dgr-photo-m {
		position: relative;
		display: block;
		overflow: hidden;
		border-radius: 0 0 28px 28px;
	}
	.dgr-photo-m img { display: block; width: 100%; height: clamp(240px, 58vw, 460px); object-fit: cover; object-position: 62% 28%; }
	.dgr-photo-m::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg, transparent 48%, rgba(4, 18, 46, .38) 78%, rgba(4, 18, 46, .54) 100%);
	}

	/* carte blanche qui remonte sur la photo */
	.dgr-content {
		position: relative;
		z-index: 2;
		width: calc(100% - 2 * var(--dg-gutter));
		max-width: 720px;
		margin: clamp(-110px, -18vw, -64px) auto 0;
		padding: 30px 26px 28px;
		border-radius: 26px;
		background: #fff;
		box-shadow: 0 30px 60px -18px rgba(4, 18, 46, .28), 0 2px 8px rgba(4, 18, 46, .07);
	}
	.dgr .dg-eyebrow,
	.dgr .dg-title,
	.dgr .dg-lead { position: static; white-space: normal; }
	.dgr .dg-eyebrow { font-size: 13px; letter-spacing: .24em; }
	.dgr .dg-eyebrow::after { width: 44px; margin-left: 14px; }
	.dgr .dg-title { margin-top: 14px; font-size: clamp(28px, 5.4vw, 44px); line-height: 1.12; letter-spacing: -.02em; }
	.dgr .dg-title br,
	.dgr .dg-lead br { display: none; }
	.dgr .dg-title span { display: block; }
	.dgr .dg-lead { margin-top: 14px; font-size: clamp(15.5px, 2.2vw, 18px); line-height: 1.55; }

	.dgr .dgr-points {
		position: relative;
		left: auto;
		top: auto;
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 10px;
		width: auto;
		height: auto;
		margin: 0 var(--dg-gutter);
		padding: 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
	.dgr-points::before { display: none; }
	.dgr-points li {
		flex-direction: column;
		justify-content: center;
		gap: 10px;
		height: auto;
		padding: 18px 10px;
		border-radius: 18px;
		background: #fff;
		box-shadow: 0 12px 28px -18px rgba(20, 70, 150, .3), 0 0 0 1px rgba(214, 230, 250, .9);
		font-size: 14.5px;
		line-height: 1.3;
		text-align: center;
		white-space: normal;
	}
	.dgr-points svg { width: 30px; height: 30px; }

	.dgr-panel,
	.dgr-feats > li {
		position: relative;
		left: auto;
		top: auto;
		width: auto;
		height: auto;
		margin: 0 var(--dg-gutter);
	}
	.dgr-panel { border-radius: 22px; }
	.dgr-panel:hover { transform: none; }
	.dgr-panel-photo { position: relative; }
	.dgr-panel-eyebrow { font-size: 13px; letter-spacing: .22em; }

	/* « Votre projet » : photo, puis texte */
	.dgr-projet { display: grid; padding-bottom: 24px; }
	.dgr-projet .dgr-panel-photo { width: 100%; }
	.dgr-projet .dgr-panel-photo img { aspect-ratio: 364 / 276; object-fit: cover; }
	.dgr-projet .dgr-panel-eyebrow { left: 20px; top: 16px; }
	.dgr-projet .dgr-panel-eyebrow::after { top: 20px; width: 44px; height: 2px; }
	.dgr .dgr-projet-title,
	.dgr .dgr-projet-text { position: static; margin: 18px 24px 0; white-space: normal; }
	.dgr-projet-title { font-size: 19px; line-height: 1.3; }
	.dgr .dgr-projet-text { margin-top: 8px; font-size: 16px; line-height: 1.5; }
	.dgr-projet-text br { display: none; }

	/* processus : logo, surtitre, étapes en grille, interlocuteur unique */
	.dgr-process { display: grid; justify-items: center; padding: 26px 18px 26px; }
	.dgr-logo,
	.dgr-kicker,
	.dgr-pill,
	.dgr-steps,
	.dgr-steps li,
	.dgr-step-ico,
	.dgr-steps strong,
	.dgr-steps li > span:last-child { position: static; }
	.dgr-logo { font-size: clamp(42px, 9vw, 64px); }
	.dgr .dgr-kicker { gap: 14px; width: auto; margin-top: 12px; font-size: clamp(11.5px, 2vw, 15px); letter-spacing: .18em; }
	.dgr-kicker::before,
	.dgr-kicker::after { width: clamp(22px, 6vw, 56px); }
	.dgr-steps {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 26px 8px;
		width: 100%;
		margin-top: 26px;
	}
	.dgr-steps li { display: grid; justify-items: center; align-content: start; width: auto; height: auto; }
	.dgr-step-ico { width: 72px; height: 72px; }
	.dgr-step-ico svg { width: 38px; height: 38px; }
	.dgr-steps strong { margin-top: 12px; font-size: 15px; line-height: 1.2; white-space: normal; }
	.dgr-steps strong br { display: none; }
	.dgr-steps li > span:last-child { margin-top: 6px; font-size: 14px; line-height: 1.4; white-space: normal; }
	.dgr-steps li > span:last-child br { display: none; }
	.dgr .dgr-pill { width: auto; max-width: 100%; height: auto; margin-top: 28px; padding: 12px 24px; border-radius: 999px; font-size: clamp(14.5px, 2.4vw, 17px); text-align: center; white-space: normal; }

	/* « Votre solution » : la scène garde sa composition, mise à l'échelle */
	.dgr-solution { container-type: inline-size; aspect-ratio: 520 / 400; }
	.dgr-solution .dgr-panel-photo { position: absolute; inset: 0; width: 100%; }
	.dgr-solution .dgr-panel-photo img { height: 100%; object-fit: cover; }
	.dgr-solution .dgr-panel-eyebrow { left: calc(17 / 520 * 100cqw); top: calc(15 / 520 * 100cqw); font-size: max(11px, calc(17 / 520 * 100cqw)); }
	.dgr-solution .dgr-panel-eyebrow::after { display: none; }
	.dgr-solution-lead { left: calc(18 / 520 * 100cqw); top: calc(43 / 520 * 100cqw); font-size: max(11px, calc(17.5 / 520 * 100cqw)); }
	.dgr-tags li {
		left: calc(var(--x) / 520 * 100cqw);
		top: calc(var(--y) / 520 * 100cqw);
		width: calc(var(--w) / 520 * 100cqw);
		height: calc(var(--h) / 520 * 100cqw);
		border-radius: calc(5 / 520 * 100cqw);
		font-size: calc(var(--fs, 14) / 520 * 100cqw);
	}

	/* atouts : deux colonnes, l'appel à l'action en pleine largeur */
	.dgr .dgr-feats {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
		margin: 0 var(--dg-gutter);
	}
	.dgr-feats > li { display: flex; align-items: center; gap: 14px; margin: 0; padding: 16px; border-radius: 18px; }
	.dgr-feat-ico,
	.dgr-feat-txt { position: static; }
	.dgr-feat-ico { flex: none; width: 58px; height: 58px; }
	.dgr-feat-ico svg { width: 30px; height: 30px; }
	.dgr-feat-txt { font-size: 14.5px; line-height: 1.45; white-space: normal; }
	.dgr-feat-txt strong { font-size: 15.5px; line-height: 1.3; }
	.dgr-feat-txt br { display: none; }
	.dgr-feats .dgr-cta { grid-column: 1 / -1; top: auto; height: auto; min-height: 104px; padding: 0; }
	.dgr-cta a { display: flex; align-items: center; gap: 18px; padding: 20px 22px; }
	.dgr-cta a::after { display: none; }
	.dgr-cta-ico,
	.dgr-cta-txt,
	.dgr-cta-go { position: static; }
	.dgr-cta-ico { flex: none; width: 46px; height: 46px; }
	.dgr-cta-txt { flex: 1; font-size: 15px; line-height: 1.45; white-space: normal; }
	.dgr-cta-txt strong { font-size: 18px; }
	.dgr-cta-txt br { display: none; }
	.dgr-cta-go { flex: none; width: 48px; height: 48px; }
	.dgr-cta-go svg { width: 22px; height: 22px; }
}
@media (max-width: 699.98px) {
	.dgr .dgr-points { grid-template-columns: minmax(0, 1fr); }
	.dgr-points li { flex-direction: row; justify-content: flex-start; gap: 14px; padding: 14px 18px; text-align: left; }
	.dgr-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dgr .dgr-feats { grid-template-columns: minmax(0, 1fr); }
	/* étiquettes trop petites sur la scène : elles passent en pastilles sous la photo */
	.dgr-solution { aspect-ratio: auto; display: grid; padding-bottom: 18px; }
	.dgr-solution .dgr-panel-photo { position: relative; aspect-ratio: 520 / 400; }
	.dgr-solution .dgr-panel-eyebrow { font-size: 11.5px; }
	.dgr-solution-lead { font-size: 12px; }
	.dgr-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px 16px 0; }
	.dgr-tags li { position: static; width: auto; height: auto; padding: 7px 12px; border-radius: 8px; font-size: 13px; }
	.dgr-tags li br { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.dgr *,
	.dgr *::before,
	.dgr *::after { transition-duration: 0s !important; }
}

/* ==========================================================================
   DIGIlium — Service : « Des projets concrets, des résultats réels »
   Desktop : cotes en --u = 1px de la maquette (1944 × 809), ramené à la fenêtre.
   ========================================================================== */
.dgp {
	--u: min(1.12px, calc(100vw / 1944));
	--dgp-navy: #00003a;
	--dgp-ink: #01044f;
	--dgp-blue: #0b7cfd;
	--dgp-icon: #0b5ffc;

	position: relative;
	color: var(--dgp-ink);
	font-family: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background: var(--dg-bg);
}
.dgp *,
.dgp *::before,
.dgp *::after { box-sizing: border-box; }
.dgp ul,
.dgp ol { margin: 0; padding: 0; list-style: none; }
.dgp p,
.dgp h2,
.dgp h3,
.dgp blockquote { margin: 0; }
.dgp svg { display: block; overflow: visible; }
.dgp-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.dgp use { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.dgp a { text-decoration: none; }

.dgp-stage {
	position: relative;
	isolation: isolate;
	max-width: calc(var(--u) * 1944);
	height: calc(var(--u) * 809);
	margin: 0 auto;
	overflow: hidden;
}
.dgp-plate { position: absolute; z-index: -2; inset: 0 0 auto; }
.dgp-plate img { display: block; width: 100%; height: auto; }

/* ---------- en-tête ---------- */
.dgp .dg-eyebrow {
	position: absolute;
	left: calc(var(--u) * 68);
	top: calc(var(--u) * 33.6);
	font-size: calc(var(--u) * 16);
	font-weight: 600;
	line-height: 1;
	letter-spacing: .345em;
	color: #01013a;
}
.dgp .dg-eyebrow::after {
	width: calc(var(--u) * 58);
	height: max(1.5px, calc(var(--u) * 2));
	margin-left: calc(var(--u) * 17);
	background: #2b7ffc;
}
.dgp .dg-title {
	position: absolute;
	left: calc(var(--u) * 66);
	top: calc(var(--u) * 61);
	max-width: none;
	margin: 0;
	font-size: calc(var(--u) * 56.7);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.03em;
	white-space: nowrap;
	color: var(--dgp-navy);
}
.dgp .dg-title span { color: var(--dgp-blue); }
.dgp .dg-lead {
	position: absolute;
	left: calc(var(--u) * 68);
	top: calc(var(--u) * 122.5);
	max-width: none;
	margin: 0;
	font-size: calc(var(--u) * 19.75);
	font-weight: 400;
	line-height: calc(var(--u) * 29);
	white-space: nowrap;
	color: var(--dgp-ink);
}
.dgp .dg-lead strong { font-weight: 700; color: #000034; }

.dgp-script {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	font-family: "Sacramento", "Segoe Script", cursive;
	font-size: calc(var(--u) * 49);
	line-height: 1;
	letter-spacing: -.02em;
	white-space: nowrap;
	color: #0b55f8;
	-webkit-text-stroke: calc(var(--u) * .5) #0b55f8;
	pointer-events: none;
}
.dgp-script span {
	position: absolute;
	left: calc(var(--u) * var(--sx));
	top: calc(var(--u) * var(--sy));
	transform: rotate(-14deg);
	transform-origin: 0 80%;
}
.dgp-script span:nth-child(1) { --sx: 1136; --sy: 60; }
.dgp-script span:nth-child(2) { --sx: 1117; --sy: 115; }
.dgp-swoosh {
	position: absolute;
	left: calc(var(--u) * 1193);
	top: calc(var(--u) * 122);
	width: calc(var(--u) * 212);
	height: calc(var(--u) * 40);
	fill: #0b55f8;
}

.dgp-aside {
	position: absolute;
	left: calc(var(--u) * 1536);
	top: calc(var(--u) * 53);
	font-size: calc(var(--u) * 18.6);
	line-height: calc(var(--u) * 27);
	white-space: nowrap;
	color: #020549;
}
.dgp-aside::before {
	content: "";
	position: absolute;
	left: calc(var(--u) * -53);
	top: calc(var(--u) * -6.5);
	width: max(1.5px, calc(var(--u) * 2));
	height: calc(var(--u) * 98);
	background: #111a62;
}
.dgp-aside strong { font-weight: 700; color: #000036; }

/* ---------- projets ---------- */
.dgp-project {
	position: absolute;
	left: calc(var(--u) * var(--x));
	top: calc(var(--u) * 198);
	width: calc(var(--u) * var(--w));
	height: calc(var(--u) * 462);
	overflow: hidden;
	border-radius: calc(var(--u) * 13);
	background: #fbfcfe;
	box-shadow: 0 calc(var(--u) * 16) calc(var(--u) * 36) calc(var(--u) * -20) rgba(20, 70, 150, .28), 0 0 0 1px rgba(255, 255, 255, .95);
	transition: transform .5s var(--dg-ease), box-shadow .5s var(--dg-ease);
}
.dgp-project:hover {
	transform: translateY(calc(var(--u) * -5));
	box-shadow: 0 calc(var(--u) * 26) calc(var(--u) * 46) calc(var(--u) * -20) rgba(20, 70, 150, .34), 0 0 0 1px #fff;
}
.dgp-shot { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--u) * 192); overflow: hidden; }
.dgp-shot img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--dg-ease); }
.dgp-project:hover .dgp-shot img { transform: scale(1.04); }
.dgp-badge {
	position: absolute;
	right: calc(var(--u) * 10);
	top: calc(var(--u) * 10);
	display: grid;
	place-items: center;
	min-width: calc(var(--u) * 69);
	height: calc(var(--u) * 36);
	padding: 0 calc(var(--u) * 15);
	border-radius: calc(var(--u) * 8);
	background: #0274fd;
	box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 14) calc(var(--u) * -6) rgba(0, 90, 220, .7);
	font-size: calc(var(--u) * 15.5);
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	white-space: nowrap;
	color: #fff;
}
.dgp-name,
.dgp-sub,
.dgp-desc {
	position: absolute;
	left: calc(var(--u) * 21.5);
	white-space: nowrap;
}
.dgp-name {
	top: calc(var(--u) * 205.5);
	font-size: calc(var(--u) * 23.5);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.01em;
	color: #00006a;
}
.dgp-sub {
	top: calc(var(--u) * 230.5);
	font-size: calc(var(--u) * 16.2);
	font-weight: 700;
	letter-spacing: -.012em;
	line-height: 1;
	color: #01025f;
}
.dgp-desc {
	top: calc(var(--u) * 256);
	font-size: calc(var(--u) * 15.55);
	line-height: calc(var(--u) * 20.6);
	color: #23398e;
}
.dgp-feats li {
	position: absolute;
	left: calc(var(--u) * (var(--cx) - 50));
	top: calc(var(--u) * 329);
	width: calc(var(--u) * 100);
	padding-top: calc(var(--u) * 48);
	font-size: calc(var(--u) * 12.9);
	line-height: calc(var(--u) * 16.4);
	text-align: center;
	white-space: nowrap;
	color: #24398a;
}
/* VISIOacte et VISIOwork : cartes plus étroites, textes resserrés comme sur la maquette */
.dgp-project:nth-child(3) .dgp-desc { font-size: calc(var(--u) * 14.85); letter-spacing: -.006em; }
.dgp-project:nth-child(4) .dgp-feats li { font-size: calc(var(--u) * 12.2); letter-spacing: -.012em; }
.dgp-feat-ico {
	position: absolute;
	left: calc(var(--u) * 25);
	top: 0;
	display: grid;
	place-items: center;
	width: calc(var(--u) * 50);
	height: calc(var(--u) * 50);
	border-radius: 50%;
	background: radial-gradient(circle at 50% 35%, #f0f9ff 0%, #e2f2fe 100%);
	transition: transform .45s var(--dg-ease);
}
.dgp-feat-ico svg { width: calc(var(--u) * 28); height: calc(var(--u) * 28); color: var(--dgp-icon); stroke-width: 1.7; }
.dgp-feats li:hover .dgp-feat-ico { transform: translateY(calc(var(--u) * -3)); }
.dgp-link {
	position: absolute;
	left: calc(var(--u) * 21.5);
	right: calc(var(--u) * 17);
	top: calc(var(--u) * 428);
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: calc(var(--u) * 24);
	font-size: calc(var(--u) * 16.55);
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	color: #0a3ff5;
}
.dgp-link strong { margin-left: .28em; margin-right: auto; font-weight: 600; }
.dgp-link svg { width: calc(var(--u) * 22); height: calc(var(--u) * 22); stroke-width: 2.2; transition: transform .4s var(--dg-ease); }
.dgp-link:hover,
.dgp-link:focus-visible { color: #002fd8; }
.dgp-link:hover svg { transform: translateX(calc(var(--u) * 5)); }

/* ---------- carte « Vous avez un projet similaire » ---------- */
.dgp-cta {
	position: absolute;
	left: calc(var(--u) * 1555);
	top: calc(var(--u) * 194);
	width: calc(var(--u) * 362);
	height: calc(var(--u) * 463);
	overflow: hidden;
	border-radius: calc(var(--u) * 14);
	background: #062868;
	box-shadow: 0 calc(var(--u) * 20) calc(var(--u) * 40) calc(var(--u) * -18) rgba(0, 25, 80, .55);
	color: #fff;
}
.dgp-cta-bg { position: absolute; inset: 0; }
.dgp-cta-bg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dgp-cta-bulb {
	position: absolute;
	left: calc(var(--u) * 33);
	top: calc(var(--u) * 28);
	width: calc(var(--u) * 44);
	height: calc(var(--u) * 64);
	color: #fff;
	stroke-width: 2.6;
}
.dgp-cta-bulb path { stroke: #2f8bff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dgp-cta-title {
	position: absolute;
	left: calc(var(--u) * 109);
	top: calc(var(--u) * 25.5);
	font-size: calc(var(--u) * 22.5);
	font-weight: 700;
	line-height: calc(var(--u) * 28);
	white-space: nowrap;
	color: #fff;
}
.dgp-cta-sub {
	position: absolute;
	left: calc(var(--u) * 32);
	top: calc(var(--u) * 118.5);
	font-size: calc(var(--u) * 19.7);
	line-height: 1;
	white-space: nowrap;
	color: #f2f6ff;
}
.dgp-cta-sub strong { font-weight: 800; color: #fff; }
.dgp-cta-list { position: absolute; left: calc(var(--u) * 32); top: calc(var(--u) * 166.5); }
.dgp-cta-list li {
	position: relative;
	height: calc(var(--u) * 34.25);
	padding-left: calc(var(--u) * 37);
	font-size: calc(var(--u) * 15.8);
	line-height: calc(var(--u) * 22);
	white-space: nowrap;
	color: #f4f7ff;
}
.dgp-cta-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: calc(var(--u) * 22.5);
	height: calc(var(--u) * 22.5);
	border-radius: 50%;
	background: #0b6cf6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6.5 12.4 3.6 3.6 7.4-8' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 72% no-repeat;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .12);
}
.dgp-cta-btn {
	position: absolute;
	left: calc(var(--u) * 26);
	top: calc(var(--u) * 379);
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: calc(var(--u) * 311);
	height: calc(var(--u) * 57);
	padding: 0 calc(var(--u) * 28) 0 calc(var(--u) * 61);
	border-radius: calc(var(--u) * 28.5);
	background: linear-gradient(90deg, #0068ff 0%, #0b7bff 100%);
	box-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 28) calc(var(--u) * -12) rgba(0, 100, 255, .65);
	font-size: calc(var(--u) * 18);
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	color: #fff;
	transition: transform .4s var(--dg-ease), box-shadow .4s var(--dg-ease);
}
.dgp-cta-btn svg { width: calc(var(--u) * 24); height: calc(var(--u) * 24); stroke-width: 2.2; transition: transform .4s var(--dg-ease); }
.dgp-cta-btn:hover,
.dgp-cta-btn:focus-visible { color: #fff; transform: translateY(calc(var(--u) * -3)); box-shadow: 0 calc(var(--u) * 20) calc(var(--u) * 32) calc(var(--u) * -12) rgba(0, 100, 255, .8); }
.dgp-cta-btn:hover svg { transform: translateX(calc(var(--u) * 5)); }

/* ---------- preuves ---------- */
.dgp-proofs {
	position: absolute;
	left: calc(var(--u) * 32);
	top: calc(var(--u) * 680);
	width: calc(var(--u) * 1483);
	height: calc(var(--u) * 99);
	border-radius: calc(var(--u) * 12);
	background: #fafcfd;
	box-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 30) calc(var(--u) * -20) rgba(20, 70, 150, .3), 0 0 0 1px rgba(255, 255, 255, .95);
}
.dgp-proofs li { position: absolute; left: calc(var(--u) * var(--x)); top: 0; height: 100%; }
.dgp-proofs li + li::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(var(--u) * 18);
	width: 1px;
	height: calc(var(--u) * 60);
	background: #dbe8f8;
}
.dgp-proof-ico {
	position: absolute;
	left: calc(var(--u) * (var(--cx) - 34));
	top: calc(var(--u) * 12);
	display: grid;
	place-items: center;
	width: calc(var(--u) * 68);
	height: calc(var(--u) * 68);
	border-radius: 50%;
	background: radial-gradient(circle at 50% 35%, #f0f8ff 0%, #e3f1fe 100%);
}
.dgp-proof-ico svg { width: calc(var(--u) * 40); height: calc(var(--u) * 40); color: #0b5ffc; stroke-width: 1.6; }
.dgp-proof-txt {
	position: absolute;
	left: calc(var(--u) * var(--tx));
	top: calc(var(--u) * 16.5);
	font-size: calc(var(--u) * 15.6);
	line-height: calc(var(--u) * 21.6);
	white-space: nowrap;
	color: #3a4d9e;
}
.dgp-proof-txt strong { display: block; font-size: calc(var(--u) * 16.2); font-weight: 700; color: #01013c; }

.dgp-quote {
	position: absolute;
	left: calc(var(--u) * 1537);
	top: calc(var(--u) * 680);
	width: calc(var(--u) * 377);
	height: calc(var(--u) * 99);
	padding: calc(var(--u) * 18) 0 0 calc(var(--u) * 92);
	border-radius: calc(var(--u) * 12);
	background: #fafcfd;
	box-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 30) calc(var(--u) * -20) rgba(20, 70, 150, .3), 0 0 0 1px rgba(255, 255, 255, .95);
}
.dgp-quote::before {
	content: "";
	position: absolute;
	left: calc(var(--u) * 20);
	top: calc(var(--u) * 22);
	width: calc(var(--u) * 37);
	height: calc(var(--u) * 32);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 37 32'%3E%3Cpath fill='%23acd6fd' d='M0 32V19C0 8.5 4.7 2.2 14 0l1.8 3.9C10.6 5.7 8.2 9.2 8 14h7.5v18Zm21.5 0V19c0-10.5 4.7-16.8 14-19L37.3 3.9C32.1 5.7 29.7 9.2 29.5 14H37v18Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.dgp-quote::after {
	content: "";
	position: absolute;
	left: calc(var(--u) * 91);
	top: calc(var(--u) * 81);
	width: calc(var(--u) * 46);
	height: max(1.5px, calc(var(--u) * 2));
	background: #2f8bfd;
}
.dgp-quote p {
	font-size: calc(var(--u) * 15.75);
	font-style: italic;
	line-height: calc(var(--u) * 25);
	white-space: nowrap;
	color: #132184;
}

/* --------------------------------------------------------------------------
   Tablette & mobile (< 1200) : en-tête, projets en grille (2 puis 1),
   carte d'appel, preuves et citation recomposées
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
	.dgp { --u: 1px; background: linear-gradient(180deg, var(--dg-bg), #eef5fd 70%, var(--dg-bg)); }
	.dgp-stage {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
		height: auto;
		padding: var(--dg-section-y) var(--dg-gutter);
	}
	.dgp-plate,
	.dgp-script { display: none; }
	.dgp-content,
	.dgp-aside,
	.dgp-cta,
	.dgp-proofs,
	.dgp-quote { grid-column: 1 / -1; }
	.dgp .dg-eyebrow,
	.dgp .dg-title,
	.dgp .dg-lead,
	.dgp .dgp-aside { position: static; white-space: normal; }
	.dgp .dg-eyebrow { font-size: 13px; letter-spacing: .26em; }
	.dgp .dg-eyebrow::after { width: 44px; margin-left: 14px; }
	.dgp .dg-title { margin-top: 14px; font-size: clamp(28px, 5.4vw, 44px); line-height: 1.12; letter-spacing: -.02em; }
	.dgp .dg-title span { display: block; }
	.dgp .dg-lead { margin-top: 14px; font-size: clamp(15.5px, 2.2vw, 18px); line-height: 1.55; }
	.dgp .dg-lead br,
	.dgp-aside br { display: none; }
	.dgp .dgp-aside {
		margin-top: -4px;
		padding: 2px 0 2px 18px;
		border-left: 2px solid #0b7cfd;
		font-size: clamp(15.5px, 2.1vw, 18px);
		line-height: 1.5;
	}
	.dgp-aside::before { display: none; }

	.dgp-projects { display: contents; }
	.dgp-project {
		position: relative;
		left: auto;
		top: auto;
		display: flex;
		flex-direction: column;
		width: auto;
		height: auto;
		padding-bottom: 20px;
		border-radius: 20px;
	}
	.dgp-project:hover { transform: none; }
	.dgp-shot { position: relative; height: auto; aspect-ratio: 370 / 192; }
	.dgp-badge { right: 12px; top: 12px; min-width: 0; height: 30px; padding: 0 12px; border-radius: 8px; font-size: 13px; }
	.dgp .dgp-name,
	.dgp .dgp-sub,
	.dgp .dgp-desc { position: static; margin: 0 20px; white-space: normal; }
	.dgp .dgp-name { margin-top: 18px; font-size: 22px; }
	.dgp .dgp-sub { margin-top: 8px; font-size: 16.5px; line-height: 1.3; }
	.dgp .dgp-desc { margin-top: 10px; font-size: 15.5px; line-height: 1.5; }
	.dgp-desc br { display: none; }
	.dgp .dgp-feats {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 6px;
		margin: 18px 12px 0;
	}
	.dgp-feats li { position: relative; left: auto; top: auto; width: auto; padding-top: 54px; font-size: 13px; line-height: 1.3; white-space: normal; }
	.dgp-feats li br { display: none; }
	.dgp-feat-ico { left: 50%; margin-left: -24px; width: 48px; height: 48px; }
	.dgp-feat-ico svg { width: 26px; height: 26px; }
	.dgp-link { position: static; height: auto; margin: auto 20px 0; padding-top: 18px; font-size: 16.5px; }
	.dgp-link svg { width: 22px; height: 22px; }

	/* carte d'appel : la montagne reste à droite, le texte se pose à gauche */
	.dgp-cta {
		position: relative;
		left: auto;
		top: auto;
		display: grid;
		grid-template-columns: 56px minmax(0, 1fr);
		column-gap: 18px;
		width: auto;
		height: auto;
		padding: 28px 26px 28px;
		border-radius: 22px;
	}
	.dgp-cta-bg img { object-position: 100% 60%; }
	.dgp-cta-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4, 28, 82, .82) 0%, rgba(4, 28, 82, .55) 55%, rgba(4, 28, 82, .15) 100%); }
	.dgp-cta > :not(.dgp-cta-bg) { position: relative; left: auto; top: auto; }
	.dgp-cta-bulb { grid-row: 1 / span 2; width: 40px; height: 58px; }
	.dgp-cta-title { font-size: clamp(20px, 3.2vw, 24px); line-height: 1.3; white-space: normal; }
	.dgp-cta-title br { display: none; }
	.dgp .dgp-cta-sub { margin-top: 10px; font-size: 18px; line-height: 1.35; white-space: normal; }
	.dgp .dgp-cta-list { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; margin-top: 22px; }
	.dgp-cta-list li { height: auto; padding-left: 34px; font-size: 15.5px; line-height: 22px; white-space: normal; }
	.dgp-cta-list li::before { width: 22px; height: 22px; }
	.dgp-cta-btn { grid-column: 1 / -1; justify-self: start; width: auto; max-width: 100%; height: 54px; margin-top: 24px; padding: 0 24px 0 30px; gap: 22px; border-radius: 27px; font-size: 17px; }
	.dgp-cta-btn svg { width: 22px; height: 22px; }

	.dgp-proofs {
		position: relative;
		left: auto;
		top: auto;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0;
		width: auto;
		height: auto;
		border-radius: 20px;
	}
	.dgp-proofs li { position: relative; left: auto; display: flex; align-items: center; gap: 16px; height: auto; padding: 18px 20px; }
	.dgp-proofs li + li::before { display: none; }
	.dgp-proofs li:nth-child(n + 3) { border-top: 1px solid #dbe8f8; }
	.dgp-proofs li:nth-child(even) { border-left: 1px solid #dbe8f8; }
	.dgp-proof-ico,
	.dgp-proof-txt { position: static; }
	.dgp-proof-ico { flex: none; width: 58px; height: 58px; }
	.dgp-proof-ico svg { width: 32px; height: 32px; }
	.dgp-proof-txt { font-size: 14.5px; line-height: 1.45; white-space: normal; }
	.dgp-proof-txt strong { font-size: 15.5px; line-height: 1.35; }
	.dgp-proof-txt br { display: none; }

	.dgp-quote {
		position: relative;
		left: auto;
		top: auto;
		width: auto;
		height: auto;
		padding: 22px 24px 30px 84px;
		border-radius: 20px;
	}
	.dgp-quote::before { left: 24px; top: 24px; width: 37px; height: 32px; }
	.dgp-quote::after { left: 84px; top: auto; bottom: 18px; }
	.dgp-quote p { font-size: 17px; line-height: 1.45; white-space: normal; }
}
@media (max-width: 699.98px) {
	.dgp-stage { grid-template-columns: minmax(0, 1fr); }
	.dgp .dgp-cta-list,
	.dgp-proofs { grid-template-columns: minmax(0, 1fr); }
	.dgp .dgp-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; margin-left: 20px; margin-right: 20px; }
	.dgp-feats li { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 0 0 58px; text-align: left; }
	.dgp-feat-ico { top: 0; left: 0; margin-left: 0; }
	.dgp-proofs li:nth-child(even) { border-left: 0; }
	.dgp-proofs li + li { border-top: 1px solid #dbe8f8; }
}

@media (prefers-reduced-motion: reduce) {
	.dgp *,
	.dgp *::before,
	.dgp *::after { transition-duration: 0s !important; }
}

/* ==========================================================================
   DIGIlium — photos indéplaçables : ni glisser-déposer, ni sélection,
   ni menu « enregistrer l'image » au toucher long (draggable="false" en
   complément dans le HTML, pour Firefox)
   ========================================================================== */
img {
	-webkit-user-drag: none;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}

/* ==========================================================================
   DIGIlium — Service : « Des solutions concrètes pour un impact réel »
   Desktop : cotes en --u = 1px de la maquette (1942 × 809), ramené à la fenêtre.
   ========================================================================== */
.dgn {
	--u: min(1.12px, calc(100vw / 1942));
	position: relative;
	color: #000045;
	font-family: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background: var(--dg-bg);
}
.dgn *,
.dgn *::before,
.dgn *::after { box-sizing: border-box; }
.dgn ul { margin: 0; padding: 0; list-style: none; }
.dgn p,
.dgn h2,
.dgn h3 { margin: 0; }
.dgn svg { display: block; overflow: visible; }
.dgn-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.dgn use { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.dgn a { text-decoration: none; }

.dgn-stage {
	position: relative;
	isolation: isolate;
	max-width: calc(var(--u) * 1942);
	height: calc(var(--u) * 809);
	margin: 0 auto;
	overflow: hidden;
}
.dgn-plate { position: absolute; z-index: -2; inset: 0 0 auto; }
.dgn-plate img { display: block; width: 100%; height: auto; }

/* ---------- en-tête ---------- */
.dgn .dg-eyebrow {
	position: absolute;
	left: calc(var(--u) * 77);
	top: calc(var(--u) * 29.5);
	font-size: calc(var(--u) * 17);
	font-weight: 500;
	line-height: 1;
	letter-spacing: .245em;
	color: #112173;
}
.dgn .dg-eyebrow::after {
	width: calc(var(--u) * 55);
	height: max(1.5px, calc(var(--u) * 2));
	margin-left: calc(var(--u) * 12);
	background: #2b7ffc;
}
.dgn .dg-title {
	position: absolute;
	left: calc(var(--u) * 74);
	top: calc(var(--u) * 60.5);
	max-width: none;
	margin: 0;
	font-size: calc(var(--u) * 53);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.025em;
	white-space: nowrap;
	color: #000011;
}
.dgn .dg-title span { color: #0a76fc; }
.dgn .dg-lead {
	position: absolute;
	left: calc(var(--u) * 76);
	top: calc(var(--u) * 120.5);
	max-width: none;
	margin: 0;
	font-size: calc(var(--u) * 20.05);
	font-weight: 400;
	line-height: calc(var(--u) * 29);
	white-space: nowrap;
	color: #000045;
}

.dgn-script {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	font-family: "Sacramento", "Segoe Script", cursive;
	font-size: calc(var(--u) * 55);
	line-height: 1;
	letter-spacing: -.02em;
	white-space: nowrap;
	color: #0b56f6;
	-webkit-text-stroke: calc(var(--u) * .5) #0b56f6;
	pointer-events: none;
}
.dgn-script span {
	position: absolute;
	left: calc(var(--u) * var(--sx));
	top: calc(var(--u) * var(--sy));
	transform: rotate(-18deg);
	transform-origin: 0 80%;
}
.dgn-script span:nth-child(1) { --sx: 1140; --sy: 74; }
.dgn-script span:nth-child(2) { --sx: 1155; --sy: 121; }
.dgn-swoosh {
	position: absolute;
	left: calc(var(--u) * 1167);
	top: calc(var(--u) * 138);
	width: calc(var(--u) * 160);
	height: calc(var(--u) * 44);
	fill: #0b56f6;
}
.dgn-aside {
	position: absolute;
	left: calc(var(--u) * 1395);
	top: calc(var(--u) * 63);
	font-size: calc(var(--u) * 17.5);
	line-height: calc(var(--u) * 24);
	white-space: nowrap;
	color: #010152;
}
.dgn-aside::before {
	content: "";
	position: absolute;
	left: calc(var(--u) * -29);
	top: calc(var(--u) * -7);
	width: max(1px, calc(var(--u) * 1.6));
	height: calc(var(--u) * 110);
	background: #8d99c9;
}

/* ---------- projets ---------- */
.dgn-project {
	position: absolute;
	left: calc(var(--u) * var(--x));
	top: calc(var(--u) * 202);
	width: calc(var(--u) * var(--w));
	height: calc(var(--u) * 490);
	overflow: hidden;
	border-radius: calc(var(--u) * 12);
	background: #fbfcfe;
	box-shadow: 0 calc(var(--u) * 16) calc(var(--u) * 36) calc(var(--u) * -20) rgba(20, 70, 150, .28), 0 0 0 1px rgba(255, 255, 255, .95);
	transition: transform .5s var(--dg-ease), box-shadow .5s var(--dg-ease);
}
.dgn-project:hover {
	transform: translateY(calc(var(--u) * -5));
	box-shadow: 0 calc(var(--u) * 26) calc(var(--u) * 46) calc(var(--u) * -20) rgba(20, 70, 150, .34), 0 0 0 1px #fff;
}
.dgn-shot { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--u) * 188); overflow: hidden; }
.dgn-shot img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--dg-ease); }
.dgn-project:hover .dgn-shot img { transform: scale(1.04); }
.dgn-badge {
	position: absolute;
	left: calc(var(--u) * var(--bx));
	top: calc(var(--u) * 6.5);
	display: grid;
	place-items: center;
	width: calc(var(--u) * var(--bw));
	height: calc(var(--u) * 34);
	border-radius: calc(var(--u) * 8);
	background: #0270fd;
	box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 14) calc(var(--u) * -6) rgba(0, 90, 220, .7);
	font-size: calc(var(--u) * 15.5);
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
	color: #fff;
}
.dgn-name,
.dgn-sub,
.dgn-desc { position: absolute; left: calc(var(--u) * 20.5); white-space: nowrap; }
.dgn-name { top: calc(var(--u) * 201); font-size: calc(var(--u) * 25); font-weight: 700; line-height: 1; letter-spacing: -.015em; color: #00018f; }
.dgn-sub { top: calc(var(--u) * 229.5); font-size: calc(var(--u) * 17.45); font-weight: 700; line-height: 1; letter-spacing: -.01em; color: #010176; }
.dgn-desc { top: calc(var(--u) * 255); font-size: calc(var(--u) * 16.3); line-height: calc(var(--u) * 21.5); color: #0f1d78; }
/* VISIOacte et VISIOwork : cartes plus étroites, chapeau resserré comme sur la maquette */
.dgn-project:nth-child(3) .dgn-desc { font-size: calc(var(--u) * 14.95); }
.dgn-project:nth-child(4) .dgn-desc { font-size: calc(var(--u) * 15.2); }
.dgn-feats li {
	position: absolute;
	left: calc(var(--u) * (var(--cx) - 60));
	top: calc(var(--u) * 341);
	width: calc(var(--u) * 120);
	padding-top: calc(var(--u) * 59);
	font-size: calc(var(--u) * 14);
	line-height: calc(var(--u) * 18);
	text-align: center;
	white-space: nowrap;
	color: #112597;
}
.dgn-feat-ico {
	position: absolute;
	left: calc(var(--u) * 31);
	top: 0;
	display: grid;
	place-items: center;
	width: calc(var(--u) * 58);
	height: calc(var(--u) * 58);
	border-radius: 50%;
	background: radial-gradient(circle at 50% 35%, #f1f9ff 0%, #e4f2fd 100%);
	transition: transform .45s var(--dg-ease);
}
.dgn-feat-ico svg { width: calc(var(--u) * 31); height: calc(var(--u) * 31); color: #0b5ffc; stroke-width: 1.6; }
.dgn-feats li:hover .dgn-feat-ico { transform: translateY(calc(var(--u) * -3)); }
.dgn-link {
	position: absolute;
	left: calc(var(--u) * 20.5);
	right: calc(var(--u) * 15);
	top: calc(var(--u) * 453);
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: calc(var(--u) * 24);
	font-size: calc(var(--u) * 17.6);
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	color: #0359fa;
}
.dgn-link svg { width: calc(var(--u) * 23); height: calc(var(--u) * 23); stroke-width: 2.2; transition: transform .4s var(--dg-ease); }
.dgn-link:hover,
.dgn-link:focus-visible { color: #0043d8; }
.dgn-link:hover svg { transform: translateX(calc(var(--u) * 5)); }

/* ---------- colonne de droite ---------- */
.dgn-others {
	position: absolute;
	left: calc(var(--u) * 1569);
	top: calc(var(--u) * 205);
	width: calc(var(--u) * 343);
	height: calc(var(--u) * 258);
	padding: calc(var(--u) * 19) calc(var(--u) * 22) 0 calc(var(--u) * 25);
	border-radius: calc(var(--u) * 12);
	background: #fbfcfe;
	box-shadow: 0 calc(var(--u) * 16) calc(var(--u) * 36) calc(var(--u) * -22) rgba(20, 70, 150, .28), 0 0 0 1px rgba(255, 255, 255, .95);
}
.dgn-others-title {
	font-size: calc(var(--u) * 14);
	font-weight: 700;
	line-height: 1;
	letter-spacing: .2em;
	text-transform: uppercase;
	white-space: nowrap;
	color: #00003f;
}
.dgn .dgn-others ul { margin-top: calc(var(--u) * 11.5); }
.dgn-others li + li { border-top: 1px solid #e8f0fb; }
.dgn-others a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: calc(var(--u) * 36);
	font-size: calc(var(--u) * 16);
	line-height: calc(var(--u) * 22);
	white-space: nowrap;
	color: #091066;
}
.dgn-others li:last-child a { min-height: calc(var(--u) * 60); }
.dgn-others svg { flex: none; width: calc(var(--u) * 21); height: calc(var(--u) * 21); color: #0b6cfb; stroke-width: 2.1; transition: transform .4s var(--dg-ease); }
.dgn-others a:hover,
.dgn-others a:focus-visible { color: #0b5ffc; }
.dgn-others a:hover svg { transform: translateX(calc(var(--u) * 4)); }

.dgn-globe {
	position: absolute;
	left: calc(var(--u) * 1573);
	top: calc(var(--u) * 480);
	width: calc(var(--u) * 339);
	height: calc(var(--u) * 189);
	overflow: hidden;
	border-radius: calc(var(--u) * 12);
	background: #002165;
	box-shadow: 0 calc(var(--u) * 18) calc(var(--u) * 36) calc(var(--u) * -18) rgba(0, 25, 80, .5);
}
.dgn-globe-bg { position: absolute; inset: 0; }
.dgn-globe-bg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dgn-globe::before {
	content: "";
	position: absolute;
	z-index: 1;
	left: calc(var(--u) * 33);
	top: calc(var(--u) * 29);
	width: calc(var(--u) * 56);
	height: max(1.5px, calc(var(--u) * 2.4));
	background: #0a8be0;
}
.dgn-globe p {
	position: absolute;
	left: calc(var(--u) * 25);
	top: calc(var(--u) * 44.5);
	font-size: calc(var(--u) * 17.8);
	line-height: calc(var(--u) * 24);
	white-space: nowrap;
	color: #fff;
}

.dgn-cta {
	position: absolute;
	left: calc(var(--u) * 1556);
	top: calc(var(--u) * 688);
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: calc(var(--u) * 356);
	height: calc(var(--u) * 102);
	padding: 0 calc(var(--u) * 24) 0 calc(var(--u) * 35);
	border-radius: calc(var(--u) * 12);
	background: linear-gradient(100deg, #0a6ffb 0%, #0b74fc 100%);
	box-shadow: 0 calc(var(--u) * 16) calc(var(--u) * 34) calc(var(--u) * -16) rgba(0, 110, 250, .6);
	font-size: calc(var(--u) * 19);
	font-weight: 600;
	line-height: calc(var(--u) * 25);
	white-space: nowrap;
	color: #fff;
	transition: transform .45s var(--dg-ease), box-shadow .45s var(--dg-ease);
}
.dgn-cta:hover,
.dgn-cta:focus-visible { color: #fff; transform: translateY(calc(var(--u) * -3)); box-shadow: 0 calc(var(--u) * 22) calc(var(--u) * 40) calc(var(--u) * -14) rgba(0, 110, 250, .7); }
.dgn-cta-go {
	display: grid;
	place-items: center;
	width: calc(var(--u) * 54);
	height: calc(var(--u) * 54);
	border-radius: 50%;
	background: #fff;
	transition: transform .45s var(--dg-ease);
}
.dgn-cta-go svg { width: calc(var(--u) * 26); height: calc(var(--u) * 26); color: #0a6ffb; stroke-width: 2.3; }
.dgn-cta:hover .dgn-cta-go { transform: translateX(calc(var(--u) * 4)); }

/* ---------- preuves ---------- */
.dgn-proofs {
	position: absolute;
	left: calc(var(--u) * 48);
	top: calc(var(--u) * 704);
	width: calc(var(--u) * 1494);
	height: calc(var(--u) * 87);
	border-radius: calc(var(--u) * 12);
	background: #fafcfd;
	box-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 30) calc(var(--u) * -20) rgba(20, 70, 150, .3), 0 0 0 1px rgba(255, 255, 255, .95);
}
.dgn-proofs li { position: absolute; left: calc(var(--u) * var(--x)); top: 0; height: 100%; }
.dgn-proofs li + li::before { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: #e2ecf9; }
.dgn-proof-ico {
	position: absolute;
	left: calc(var(--u) * (var(--cx) - 35));
	top: calc(var(--u) * 8.5);
	display: grid;
	place-items: center;
	width: calc(var(--u) * 70);
	height: calc(var(--u) * 70);
	border-radius: 50%;
	background: radial-gradient(circle at 50% 35%, #f0f8ff 0%, #e4f2fd 100%);
}
.dgn-proof-ico svg { width: calc(var(--u) * 44); height: calc(var(--u) * 44); color: #0b5ffc; stroke-width: 1.5; }
.dgn-proof-txt {
	position: absolute;
	left: calc(var(--u) * var(--tx));
	top: calc(var(--u) * 22);
	font-size: calc(var(--u) * 15.1);
	line-height: calc(var(--u) * 22);
	white-space: nowrap;
	color: #1a2f9b;
}
.dgn-proof-txt strong { display: block; font-size: calc(var(--u) * 15.25); font-weight: 700; color: #000170; }

/* --------------------------------------------------------------------------
   Tablette & mobile (< 1200) : en-tête, projets en grille (2 puis 1),
   colonne de droite et preuves recomposées
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
	.dgn { --u: 1px; background: linear-gradient(180deg, var(--dg-bg), #eef5fd 70%, var(--dg-bg)); }
	.dgn-stage {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
		height: auto;
		padding: var(--dg-section-y) var(--dg-gutter);
	}
	.dgn-plate,
	.dgn-script { display: none; }
	.dgn-content,
	.dgn-aside,
	.dgn-proofs { grid-column: 1 / -1; }
	.dgn .dg-eyebrow,
	.dgn .dg-title,
	.dgn .dg-lead,
	.dgn .dgn-aside { position: static; white-space: normal; }
	.dgn .dg-eyebrow { font-size: 13px; letter-spacing: .26em; }
	.dgn .dg-eyebrow::after { width: 44px; margin-left: 14px; }
	.dgn .dg-title { margin-top: 14px; font-size: clamp(28px, 5.4vw, 44px); line-height: 1.12; letter-spacing: -.02em; }
	.dgn .dg-title span { display: block; }
	.dgn .dg-lead { margin-top: 14px; font-size: clamp(15.5px, 2.2vw, 18px); line-height: 1.55; }
	.dgn .dg-lead br,
	.dgn-aside br { display: none; }
	.dgn .dgn-aside { margin-top: -4px; padding: 2px 0 2px 18px; border-left: 2px solid #0b76fc; font-size: clamp(15.5px, 2.1vw, 18px); line-height: 1.5; }
	.dgn-aside::before { display: none; }

	.dgn-projects { display: contents; }
	.dgn-project {
		position: relative;
		left: auto;
		top: auto;
		display: flex;
		flex-direction: column;
		width: auto;
		height: auto;
		padding-bottom: 20px;
		border-radius: 20px;
	}
	.dgn-project:hover { transform: none; }
	.dgn-shot { position: relative; height: auto; aspect-ratio: 371 / 188; }
	.dgn-badge { left: auto; right: 12px; top: 12px; width: auto; height: 30px; padding: 0 12px; border-radius: 8px; font-size: 13px; }
	.dgn .dgn-name,
	.dgn .dgn-sub,
	.dgn .dgn-desc { position: static; margin: 0 20px; white-space: normal; }
	.dgn .dgn-name { margin-top: 18px; font-size: 23px; }
	.dgn .dgn-sub { margin-top: 8px; font-size: 16.5px; line-height: 1.3; }
	.dgn .dgn-desc { margin-top: 10px; font-size: 15.5px; line-height: 1.5; }
	.dgn-desc br { display: none; }
	.dgn .dgn-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 18px 12px 0; }
	.dgn-feats li { position: relative; left: auto; top: auto; width: auto; padding-top: 58px; font-size: 13.5px; line-height: 1.3; white-space: normal; }
	.dgn-feats li br { display: none; }
	.dgn-feat-ico { left: 50%; margin-left: -26px; width: 52px; height: 52px; }
	.dgn-feat-ico svg { width: 28px; height: 28px; }
	.dgn-link { position: static; height: auto; margin: auto 20px 0; padding-top: 18px; font-size: 16.5px; }

	.dgn-others,
	.dgn-globe,
	.dgn-cta { position: relative; left: auto; top: auto; width: auto; height: auto; border-radius: 20px; }
	.dgn-others { padding: 22px 22px 8px 24px; }
	.dgn-others-title { font-size: 13px; }
	.dgn .dgn-others ul { margin-top: 12px; }
	.dgn-others a { min-height: 46px; padding: 6px 0; font-size: 16px; line-height: 1.35; white-space: normal; }
	.dgn-others li:last-child a { min-height: 46px; }
	.dgn-others a br { display: none; }
	.dgn-others svg { width: 20px; height: 20px; margin-left: 12px; }
	.dgn-globe { min-height: 190px; }
	.dgn-globe-bg img { object-position: 100% 50%; }
	.dgn-globe::before { left: 28px; top: 30px; width: 52px; height: 2px; }
	.dgn-globe p { left: 28px; right: 28px; top: 50px; font-size: 19px; line-height: 1.35; white-space: normal; }
	.dgn-cta { grid-column: 1 / -1; min-height: 96px; padding: 20px 22px 20px 28px; font-size: 18.5px; line-height: 1.35; white-space: normal; gap: 18px; }
	.dgn-cta br { display: none; }
	.dgn-cta-go { flex: none; width: 50px; height: 50px; }
	.dgn-cta-go svg { width: 24px; height: 24px; }

	.dgn-proofs {
		position: relative;
		left: auto;
		top: auto;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: auto;
		height: auto;
		border-radius: 20px;
	}
	.dgn-proofs li { position: relative; left: auto; display: flex; align-items: center; gap: 16px; height: auto; padding: 18px 20px; }
	.dgn-proofs li + li::before { display: none; }
	.dgn-proofs li:nth-child(n + 3) { border-top: 1px solid #e2ecf9; }
	.dgn-proofs li:nth-child(even) { border-left: 1px solid #e2ecf9; }
	.dgn-proof-ico,
	.dgn-proof-txt { position: static; }
	.dgn-proof-ico { flex: none; width: 58px; height: 58px; }
	.dgn-proof-ico svg { width: 34px; height: 34px; }
	.dgn-proof-txt { font-size: 14.5px; line-height: 1.45; white-space: normal; }
	.dgn-proof-txt strong { font-size: 15.5px; line-height: 1.35; }
}
@media (max-width: 699.98px) {
	.dgn-stage { grid-template-columns: minmax(0, 1fr); }
	.dgn-proofs { grid-template-columns: minmax(0, 1fr); }
	.dgn-proofs li:nth-child(even) { border-left: 0; }
	.dgn-proofs li + li { border-top: 1px solid #e2ecf9; }
}

@media (prefers-reduced-motion: reduce) {
	.dgn *,
	.dgn *::before,
	.dgn *::after { transition-duration: 0s !important; }
}

/* ==========================================================================
   DIGIlium — Service : « Nos solutions » (Fernest, VISIOfact, VISIOacte)
   Desktop : cotes en --u = 1px de la maquette (1944 × 809), ramené à la fenêtre.
   ========================================================================== */
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400 500; font-display: swap; src: url("assets/fonts/eb-garamond/eb-garamond-italic-latin.woff2") format("woff2"); }

.dgo {
	--u: min(1.12px, calc(100vw / 1944));
	--dgo-navy: #01125c;
	--dgo-ink: #0f1e71;
	--dgo-blue: #0077fd;
	--dgo-icon: #0068fe;

	position: relative;
	color: var(--dgo-ink);
	font-family: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background: var(--dg-bg);
}
.dgo *,
.dgo *::before,
.dgo *::after { box-sizing: border-box; }
.dgo ul { margin: 0; padding: 0; list-style: none; }
.dgo p,
.dgo h2,
.dgo h3,
.dgo blockquote { margin: 0; }
.dgo svg { display: block; overflow: visible; }
.dgo-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.dgo use { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.dgo a { text-decoration: none; }

.dgo-stage {
	position: relative;
	isolation: isolate;
	max-width: calc(var(--u) * 1944);
	height: calc(var(--u) * 809);
	margin: 0 auto;
	overflow: hidden;
}
.dgo-plate { position: absolute; z-index: -2; inset: 0 0 auto; }
.dgo-plate img { display: block; width: 100%; height: auto; }

/* ---------- en-tête ---------- */
.dgo .dg-eyebrow {
	position: absolute;
	left: calc(var(--u) * 73);
	top: calc(var(--u) * 25.4);
	font-size: calc(var(--u) * 17.5);
	font-weight: 600;
	line-height: 1;
	letter-spacing: .374em;
	color: #000262;
}
.dgo .dg-eyebrow::after {
	width: calc(var(--u) * 77);
	height: max(1.5px, calc(var(--u) * 2));
	margin-left: calc(var(--u) * 12);
	background: #0b6efc;
}
.dgo .dg-title {
	position: absolute;
	left: calc(var(--u) * 70);
	top: calc(var(--u) * 59);
	max-width: none;
	margin: 0;
	font-size: calc(var(--u) * 57);
	font-weight: 800;
	line-height: calc(var(--u) * 50);
	letter-spacing: .006em;
	white-space: nowrap;
	color: var(--dgo-navy);
}
.dgo .dg-title span { color: var(--dgo-blue); }
/* la 2e ligne de la maquette est composée un rien plus petit */
.dgo .dg-title span:last-child { font-size: calc(var(--u) * 54.8); letter-spacing: -.025em; }
.dgo .dg-lead {
	position: absolute;
	left: calc(var(--u) * 72);
	top: calc(var(--u) * 162.7);
	max-width: none;
	margin: 0;
	font-size: calc(var(--u) * 20.6);
	font-weight: 400;
	line-height: calc(var(--u) * 27);
	letter-spacing: -.01em;
	white-space: nowrap;
	color: #14257f;
}
.dgo .dg-lead strong { font-weight: 700; color: #01125c; }

.dgo-script {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	font-family: "Sacramento", "Segoe Script", cursive;
	font-size: calc(var(--u) * 46.5);
	line-height: 1;
	letter-spacing: -.01em;
	white-space: nowrap;
	color: #046cfc;
	-webkit-text-stroke: calc(var(--u) * .6) #046cfc;
	pointer-events: none;
}
.dgo-script span {
	position: absolute;
	left: calc(var(--u) * var(--sx));
	top: calc(var(--u) * var(--sy));
	/* écriture plus penchée que Sacramento, comme la maquette */
	transform: rotate(var(--sr)) skewX(-12deg);
	transform-origin: 0 80%;
}
.dgo-script span:nth-child(1) { --sx: 1077; --sy: 80; --sr: -20deg; }
.dgo-script span:nth-child(2) { --sx: 1085; --sy: 108; --sr: -18.5deg; }
.dgo-script span:nth-child(3) { --sx: 1107; --sy: 146; --sr: -14.5deg; }
.dgo-swoosh {
	position: absolute;
	left: calc(var(--u) * 1110);
	top: calc(var(--u) * 157);
	width: calc(var(--u) * 220);
	height: calc(var(--u) * 48);
	fill: #046cfc;
}

.dgo-aside {
	position: absolute;
	left: calc(var(--u) * 1460);
	top: calc(var(--u) * 67.7);
	font-size: calc(var(--u) * 19.8);
	line-height: calc(var(--u) * 27);
	letter-spacing: -.012em;
	white-space: nowrap;
	color: #0f1e71;
}
.dgo-aside::before {
	content: "";
	position: absolute;
	left: calc(var(--u) * -57);
	top: calc(var(--u) * -4.7);
	width: max(1px, calc(var(--u) * 2));
	height: calc(var(--u) * 94);
	background: #a1b3dd;
}

/* ---------- cartes produits ---------- */
.dgo-product {
	position: absolute;
	left: calc(var(--u) * var(--x));
	top: calc(var(--u) * 229);
	width: calc(var(--u) * var(--w));
	height: calc(var(--u) * 444);
	overflow: hidden;
	border-radius: calc(var(--u) * 14);
	background: #fefefe;
	box-shadow: 0 calc(var(--u) * 16) calc(var(--u) * 36) calc(var(--u) * -20) rgba(20, 70, 150, .28), 0 0 0 1px rgba(255, 255, 255, .95);
	transition: transform .5s var(--dg-ease), box-shadow .5s var(--dg-ease);
}
.dgo-product:hover {
	transform: translateY(calc(var(--u) * -5));
	box-shadow: 0 calc(var(--u) * 26) calc(var(--u) * 46) calc(var(--u) * -20) rgba(20, 70, 150, .34), 0 0 0 1px #fff;
}
.dgo-shot {
	position: absolute;
	left: calc(var(--u) * 6);
	right: calc(var(--u) * 6);
	top: calc(var(--u) * 151);
	height: calc(var(--u) * 160);
	overflow: hidden;
}
.dgo-fernest .dgo-shot {
	height: calc(var(--u) * 168);
	-webkit-mask-image: linear-gradient(180deg, #000 85%, transparent);
	mask-image: linear-gradient(180deg, #000 85%, transparent);
}
.dgo-shot img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--dg-ease); }
.dgo-product:hover .dgo-shot img { transform: scale(1.04); }

.dgo-logo { position: absolute; }
.dgo-logo svg { width: 100%; height: 100%; }
.dgo-logo--fernest { left: calc(var(--u) * 30); top: calc(var(--u) * 22); width: calc(var(--u) * 44); height: calc(var(--u) * 44); }
.dgo-logo--fact { left: calc(var(--u) * 31); top: calc(var(--u) * 21); width: calc(var(--u) * 46); height: calc(var(--u) * 46); transition: transform .9s var(--dg-ease); }
.dgo-logo--acte { left: calc(var(--u) * 28); top: calc(var(--u) * 23); width: calc(var(--u) * 35); height: calc(var(--u) * 43); }
.dgo-visiofact:hover .dgo-logo--fact { transform: rotate(36deg); }

.dgo-name {
	position: absolute;
	left: calc(var(--u) * 87);
	top: calc(var(--u) * 23);
	font-size: calc(var(--u) * 33);
	font-weight: 800;
	line-height: 1;
	letter-spacing: .012em;
	white-space: nowrap;
	color: #010a59;
}
.dgo-visiofact .dgo-name { left: calc(var(--u) * 95); }
.dgo-visioacte .dgo-name { left: calc(var(--u) * 81); top: calc(var(--u) * 24); }
.dgo-name span { color: var(--dgo-blue); }
.dgo-badge {
	position: absolute;
	left: calc(var(--u) * var(--bx));
	top: calc(var(--u) * 22);
	display: grid;
	place-items: center;
	width: calc(var(--u) * var(--bw));
	height: calc(var(--u) * 30);
	border-radius: calc(var(--u) * 8);
	background: #007bfe;
	box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 14) calc(var(--u) * -6) rgba(0, 100, 240, .65);
	font-size: calc(var(--u) * 13.4);
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	color: #fff;
}
.dgo-fernest .dgo-badge { top: calc(var(--u) * 17); font-weight: 600; }
.dgo-sub,
.dgo-desc { position: absolute; left: calc(var(--u) * 87); white-space: nowrap; }
.dgo-visiofact :is(.dgo-sub, .dgo-desc) { left: calc(var(--u) * 95); }
.dgo-visioacte :is(.dgo-sub, .dgo-desc) { left: calc(var(--u) * 81); }
.dgo-sub {
	top: calc(var(--u) * 60.6);
	font-size: calc(var(--u) * 16.2);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.035em;
	color: #000251;
}
.dgo-visiofact .dgo-sub,
.dgo-visioacte .dgo-sub { top: calc(var(--u) * 62.6); }
.dgo-fernest .dgo-sub { letter-spacing: -.015em; }
.dgo-desc {
	top: calc(var(--u) * 90.2);
	font-size: calc(var(--u) * 15.8);
	line-height: calc(var(--u) * 20.6);
	letter-spacing: -.02em;
	color: #1c2d7a;
}
.dgo-visiofact .dgo-desc { top: calc(var(--u) * 92.2); }
.dgo-visioacte .dgo-desc { top: calc(var(--u) * 91.2); }
.dgo-visioacte .dgo-sub { font-size: calc(var(--u) * 15.6); top: calc(var(--u) * 63); }
.dgo-fernest .dgo-name { letter-spacing: .04em; }

/* modules Fernest : tuiles givrées posées sur le bas de la photo */
.dgo-modules li {
	position: absolute;
	left: calc(var(--u) * (var(--cx) - 33));
	top: calc(var(--u) * 314);
	width: calc(var(--u) * 66);
	height: calc(var(--u) * 76);
	padding-top: calc(var(--u) * 52);
	border-radius: calc(var(--u) * 10);
	background: linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .9));
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .8);
	font-size: calc(var(--u) * 12);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -.02em;
	text-align: center;
	white-space: nowrap;
	color: #131f71;
}
.dgo-modules li:first-child { left: calc(var(--u) * (var(--cx) - 37)); width: calc(var(--u) * 74); }
.dgo-tile {
	position: absolute;
	left: 50%;
	top: calc(var(--u) * 14);
	display: grid;
	place-items: center;
	width: calc(var(--u) * 28);
	height: calc(var(--u) * 28);
	margin-left: calc(var(--u) * -14);
	border-radius: calc(var(--u) * 6);
	background: linear-gradient(160deg, var(--c1), var(--c2));
	box-shadow: 0 calc(var(--u) * 5) calc(var(--u) * 10) calc(var(--u) * -4) var(--c2);
	transition: transform .45s var(--dg-ease);
}
.dgo-tile svg { width: calc(var(--u) * 17); height: calc(var(--u) * 17); color: #fff; stroke-width: 2; }
.dgo-modules li:hover .dgo-tile { transform: translateY(calc(var(--u) * -3)); }

.dgo-feats li {
	position: absolute;
	left: calc(var(--u) * (var(--cx) - 55));
	top: calc(var(--u) * 316);
	width: calc(var(--u) * 110);
	padding-top: calc(var(--u) * 50.5);
	font-size: calc(var(--u) * 12);
	font-weight: 600;
	line-height: calc(var(--u) * 14);
	letter-spacing: -.02em;
	text-align: center;
	white-space: nowrap;
	color: #182671;
}
.dgo-feat-ico {
	position: absolute;
	left: calc(var(--u) * 31);
	top: 0;
	display: grid;
	place-items: center;
	width: calc(var(--u) * 48);
	height: calc(var(--u) * 48);
	border-radius: 50%;
	background: radial-gradient(circle at 50% 35%, #eef8ff 0%, #e2f1fe 100%);
	transition: transform .45s var(--dg-ease);
}
.dgo-feat-ico svg { width: calc(var(--u) * 28); height: calc(var(--u) * 28); color: var(--dgo-icon); stroke-width: 1.9; }
.dgo-feats li:hover .dgo-feat-ico { transform: translateY(calc(var(--u) * -3)); }

.dgo-btn {
	position: absolute;
	left: calc(var(--u) * var(--bl));
	top: calc(var(--u) * 401.5);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: calc(var(--u) * 14);
	width: calc(var(--u) * var(--bw));
	height: calc(var(--u) * 36.5);
	border-radius: calc(var(--u) * 18.25);
	background: linear-gradient(90deg, #006cff 0%, #0b7dff 100%);
	box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 20) calc(var(--u) * -10) rgba(0, 100, 255, .7);
	font-size: calc(var(--u) * 16);
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	color: #fff;
	transition: transform .4s var(--dg-ease), box-shadow .4s var(--dg-ease);
}
.dgo-btn svg { width: calc(var(--u) * 21); height: calc(var(--u) * 21); stroke-width: 2.2; transition: transform .4s var(--dg-ease); }
.dgo-btn:hover,
.dgo-btn:focus-visible { color: #fff; transform: translateY(calc(var(--u) * -2)); box-shadow: 0 calc(var(--u) * 16) calc(var(--u) * 26) calc(var(--u) * -10) rgba(0, 100, 255, .85); }
.dgo-btn:hover svg { transform: translateX(calc(var(--u) * 5)); }

/* ---------- carte « Vous avez un besoin… » ---------- */
.dgo-cta {
	position: absolute;
	left: calc(var(--u) * 1461);
	top: calc(var(--u) * 229);
	width: calc(var(--u) * 459);
	height: calc(var(--u) * 445);
	overflow: hidden;
	border-radius: calc(var(--u) * 14);
	background: #022e66;
	box-shadow: 0 calc(var(--u) * 20) calc(var(--u) * 40) calc(var(--u) * -18) rgba(0, 25, 80, .55);
	color: #fff;
}
.dgo-cta-bg { position: absolute; inset: 0; }
.dgo-cta-bg img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--dg-ease); }
.dgo-cta:hover .dgo-cta-bg img { transform: scale(1.03); }
.dgo-cta-bulb {
	position: absolute;
	left: calc(var(--u) * 22);
	top: calc(var(--u) * 17);
	width: calc(var(--u) * 76);
	height: calc(var(--u) * 86);
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.dgo-cta-bulb .dgo-rays { stroke: #1f86ff; stroke-width: 2.4; }
.dgo-cta-bulb .dgo-glass { stroke: #e3efff; stroke-width: 2.6; filter: drop-shadow(0 0 calc(var(--u) * 4) rgba(110, 175, 255, .9)); }
.dgo-cta-bulb .dgo-fil { stroke: #1f86ff; stroke-width: 2.2; }
/* l’ampoule s’allume au survol */
.dgo-cta:hover .dgo-rays { animation: dgo-glow 1.6s ease-in-out infinite; }
@keyframes dgo-glow { 50% { opacity: .35; } }
.dgo-cta-title {
	position: absolute;
	left: calc(var(--u) * 118);
	top: calc(var(--u) * 19);
	font-size: calc(var(--u) * 30);
	font-weight: 700;
	line-height: calc(var(--u) * 33);
	letter-spacing: .005em;
	white-space: nowrap;
	color: #fff;
}
.dgo-cta-sub {
	position: absolute;
	left: calc(var(--u) * 118);
	top: calc(var(--u) * 127);
	font-size: calc(var(--u) * 21.8);
	letter-spacing: -.0165em;
	line-height: 1;
	white-space: nowrap;
	color: #f2f6ff;
}
.dgo-cta-sub strong { font-weight: 800; color: #fff; }
.dgo-cta-list { position: absolute; left: calc(var(--u) * 31); top: calc(var(--u) * 170.5); }
.dgo-cta-list li {
	position: relative;
	height: calc(var(--u) * 34.5);
	padding-left: calc(var(--u) * 43);
	font-size: calc(var(--u) * 16.3);
	line-height: calc(var(--u) * 25);
	white-space: nowrap;
	color: #f4f7ff;
}
.dgo-cta-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(var(--u) * -1);
	width: calc(var(--u) * 25);
	height: calc(var(--u) * 25);
	border-radius: 50%;
	background: #0278ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6.5 12.4 3.6 3.6 7.4-8' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .12);
}
.dgo-cta-btn {
	position: absolute;
	left: calc(var(--u) * 22);
	top: calc(var(--u) * 367);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: calc(var(--u) * 22);
	width: calc(var(--u) * 414);
	height: calc(var(--u) * 54);
	overflow: hidden;
	border-radius: calc(var(--u) * 27);
	background: #fff;
	box-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 28) calc(var(--u) * -12) rgba(0, 10, 40, .55);
	font-size: calc(var(--u) * 19.4);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.01em;
	white-space: nowrap;
	color: #000250;
	transition: transform .4s var(--dg-ease), box-shadow .4s var(--dg-ease);
}
.dgo-cta-btn svg { width: calc(var(--u) * 26); height: calc(var(--u) * 26); stroke-width: 2.2; transition: transform .4s var(--dg-ease); }
/* reflet qui balaie le bouton au survol */
.dgo-cta-btn::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 -40%;
	width: 30%;
	background: linear-gradient(100deg, transparent, rgba(0, 110, 255, .14), transparent);
	transform: skewX(-20deg);
	transition: left .8s var(--dg-ease);
}
.dgo-cta-btn:hover,
.dgo-cta-btn:focus-visible { color: #000250; transform: translateY(calc(var(--u) * -3)); box-shadow: 0 calc(var(--u) * 20) calc(var(--u) * 32) calc(var(--u) * -12) rgba(0, 10, 40, .65); }
.dgo-cta-btn:hover::after { left: 110%; }
.dgo-cta-btn:hover svg { transform: translateX(calc(var(--u) * 5)); }

/* ---------- preuves ---------- */
.dgo-proofs {
	position: absolute;
	left: calc(var(--u) * 43);
	top: calc(var(--u) * 688);
	width: calc(var(--u) * 1458);
	height: calc(var(--u) * 101);
	border-radius: calc(var(--u) * 12);
	background: #fefefe;
	box-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 30) calc(var(--u) * -20) rgba(20, 70, 150, .3), 0 0 0 1px rgba(255, 255, 255, .95);
}
.dgo-proofs li { position: absolute; inset: 0; pointer-events: none; }
.dgo-proofs li > * { pointer-events: auto; }
.dgo-proofs li + li::before {
	content: "";
	position: absolute;
	left: calc(var(--u) * var(--sx));
	top: calc(var(--u) * 15);
	width: 1px;
	height: calc(var(--u) * 69);
	background: #dbe9f8;
}
.dgo-proof-ico {
	position: absolute;
	left: calc(var(--u) * (var(--cx) - 36));
	top: calc(var(--u) * 14);
	display: grid;
	place-items: center;
	width: calc(var(--u) * 72);
	height: calc(var(--u) * 72);
	border-radius: 50%;
	background: radial-gradient(circle at 50% 35%, #eef8ff 0%, #e1f0fe 100%);
	transition: transform .45s var(--dg-ease);
}
.dgo-proof-ico svg { width: calc(var(--u) * 42); height: calc(var(--u) * 42); color: #006ffe; stroke-width: 1.6; }
.dgo-proofs li:hover .dgo-proof-ico { transform: scale(1.06); }
.dgo-proof-txt {
	position: absolute;
	left: calc(var(--u) * var(--tx));
	top: calc(var(--u) * 18.5);
	font-size: calc(var(--u) * 14.3);
	line-height: calc(var(--u) * 21.5);
	white-space: nowrap;
	color: #3a4d9e;
}
.dgo-proof-txt strong { display: block; font-size: calc(var(--u) * 15.5); font-weight: 700; letter-spacing: -.01em; color: #030858; }

.dgo-quote {
	position: absolute;
	left: calc(var(--u) * 1609);
	top: calc(var(--u) * 705.6);
}
.dgo-quote::before {
	content: "";
	position: absolute;
	left: calc(var(--u) * -75);
	top: calc(var(--u) * 5);
	width: calc(var(--u) * 45);
	height: calc(var(--u) * 40);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 37 32'%3E%3Cpath fill='%23cfe4fb' d='M0 32V19C0 8.5 4.7 2.2 14 0l1.8 3.9C10.6 5.7 8.2 9.2 8 14h7.5v18Zm21.5 0V19c0-10.5 4.7-16.8 14-19L37.3 3.9C32.1 5.7 29.7 9.2 29.5 14H37v18Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.dgo-quote::after {
	content: "";
	position: absolute;
	left: 0;
	top: calc(var(--u) * 81.4);
	width: calc(var(--u) * 44);
	height: max(1.5px, calc(var(--u) * 2));
	background: #0b72fd;
}
.dgo-quote p {
	font-family: "EB Garamond", Georgia, "Times New Roman", serif;
	font-size: calc(var(--u) * 18.3);
	font-style: italic;
	line-height: calc(var(--u) * 23.5);
	white-space: nowrap;
	color: #1e2c86;
}

/* --------------------------------------------------------------------------
   Tablette & mobile (< 1200) : en-tête, produits en grille (2 puis 1),
   carte d'appel, preuves et citation recomposées
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
	.dgo { --u: 1px; background: linear-gradient(180deg, var(--dg-bg), #eef5fd 70%, var(--dg-bg)); }
	.dgo-stage {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
		height: auto;
		padding: var(--dg-section-y) var(--dg-gutter);
	}
	.dgo-plate,
	.dgo-script { display: none; }
	.dgo-content,
	.dgo-aside,
	.dgo-proofs,
	.dgo-quote { grid-column: 1 / -1; }
	.dgo .dg-eyebrow,
	.dgo .dg-title,
	.dgo .dg-lead,
	.dgo .dgo-aside { position: static; white-space: normal; }
	.dgo .dg-eyebrow { font-size: 13px; letter-spacing: .26em; }
	.dgo .dg-eyebrow::after { width: 44px; margin-left: 14px; }
	.dgo .dg-title { margin-top: 14px; font-size: clamp(28px, 5.4vw, 44px); line-height: 1.12; letter-spacing: -.02em; }
	.dgo .dg-title br { display: none; }
	.dgo .dg-title span:last-child { font-size: inherit; letter-spacing: inherit; }
	.dgo .dg-lead { margin-top: 14px; font-size: clamp(15.5px, 2.2vw, 18px); line-height: 1.55; }
	.dgo .dg-lead br,
	.dgo-aside br { display: none; }
	.dgo .dgo-aside { margin-top: -4px; padding: 2px 0 2px 18px; border-left: 2px solid #0b77fd; font-size: clamp(15.5px, 2.1vw, 18px); line-height: 1.5; }
	.dgo-aside::before { display: none; }

	.dgo-products { display: contents; }
	.dgo-product {
		position: relative;
		left: auto;
		top: auto;
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		column-gap: 14px;
		width: auto;
		height: auto;
		padding: 22px 20px 22px;
		border-radius: 20px;
	}
	.dgo-product:hover { transform: none; }
	.dgo-product > * { grid-column: 1 / -1; }
	.dgo .dgo-logo { position: static; grid-column: 1; grid-row: 1; width: 44px; height: 44px; }
	.dgo .dgo-logo--acte { width: 36px; }
	.dgo .dgo-name { position: static; grid-column: 2; grid-row: 1; font-size: 28px; }
	.dgo .dgo-badge { position: static; grid-column: 1 / -1; grid-row: 2; justify-self: start; width: auto; height: 28px; margin-top: 12px; padding: 0 12px; font-size: 13px; }
	/* ordre de lecture : texte, visuel, atouts, bouton */
	.dgo-product > :is(.dgo-sub, .dgo-desc) { order: 1; }
	.dgo-product > .dgo-shot { order: 2; }
	.dgo-product > :is(.dgo-modules, .dgo-feats) { order: 3; }
	.dgo-product > .dgo-btn { order: 4; }
	.dgo .dgo-sub,
	.dgo .dgo-desc { position: static; white-space: normal; }
	.dgo .dgo-sub { margin-top: 16px; font-size: 17px; line-height: 1.3; }
	.dgo .dgo-desc { margin-top: 8px; font-size: 15.5px; line-height: 1.5; }
	.dgo-desc br { display: none; }
	.dgo .dgo-shot { position: relative; left: auto; right: auto; top: auto; height: auto; margin: 16px -20px 0; aspect-ratio: 450 / 160; }
	.dgo-fernest .dgo-shot { aspect-ratio: 462 / 168; }
	.dgo .dgo-modules,
	.dgo .dgo-feats { display: grid; gap: 6px; margin-top: 14px; }
	.dgo .dgo-modules { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.dgo .dgo-feats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.dgo .dgo-modules li,
	.dgo .dgo-modules li:first-child,
	.dgo-feats li { position: relative; left: auto; top: auto; width: auto; font-size: 12.5px; line-height: 1.3; white-space: normal; }
	.dgo .dgo-modules li { height: auto; padding: 50px 2px 10px; }
	.dgo-feats li { padding-top: 56px; }
	.dgo-feats li br { display: none; }
	.dgo-feat-ico { left: 50%; margin-left: -24px; }
	.dgo .dgo-btn { position: relative; left: auto; top: auto; justify-self: start; width: auto; height: 46px; margin-top: 20px; padding: 0 26px; border-radius: 23px; font-size: 16px; }

	.dgo-cta {
		position: relative;
		left: auto;
		top: auto;
		display: grid;
		grid-template-columns: 64px minmax(0, 1fr);
		column-gap: 16px;
		align-content: start;
		width: auto;
		height: auto;
		padding: 26px 24px 28px;
		border-radius: 20px;
	}
	.dgo-cta-bg img { object-position: 100% 50%; }
	.dgo-cta-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2, 40, 96, .85) 0%, rgba(2, 40, 96, .55) 60%, rgba(2, 40, 96, .2) 100%); }
	.dgo-cta > :not(.dgo-cta-bg) { position: relative; left: auto; top: auto; }
	.dgo-cta-bulb { grid-row: 1 / span 2; width: 60px; height: 68px; }
	.dgo .dgo-cta-title { font-size: clamp(21px, 3.2vw, 26px); line-height: 1.25; white-space: normal; }
	.dgo-cta-title br { display: none; }
	.dgo .dgo-cta-sub { margin-top: 8px; font-size: 18px; line-height: 1.35; white-space: normal; }
	.dgo .dgo-cta-list { grid-column: 1 / -1; margin-top: 20px; }
	.dgo-cta-list li { height: auto; padding: 0 0 12px 38px; font-size: 16px; line-height: 24px; white-space: normal; }
	.dgo-cta-list li::before { top: 0; width: 24px; height: 24px; }
	.dgo .dgo-cta-btn { grid-column: 1 / -1; justify-self: start; width: auto; max-width: 100%; height: 52px; margin-top: 12px; padding: 0 26px; gap: 18px; font-size: 17px; }
	.dgo-cta-btn svg { width: 22px; height: 22px; }

	.dgo-proofs {
		position: relative;
		left: auto;
		top: auto;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: auto;
		height: auto;
		border-radius: 20px;
	}
	.dgo-proofs li { position: relative; inset: auto; display: flex; align-items: center; gap: 16px; padding: 18px 20px; }
	.dgo-proofs li + li::before { display: none; }
	.dgo-proofs li:nth-child(n + 3) { border-top: 1px solid #dbe9f8; }
	.dgo-proofs li:nth-child(even) { border-left: 1px solid #dbe9f8; }
	.dgo-proof-ico,
	.dgo-proof-txt { position: static; }
	.dgo-proof-ico { flex: none; width: 58px; height: 58px; }
	.dgo-proof-ico svg { width: 32px; height: 32px; }
	.dgo-proof-txt { font-size: 14.5px; line-height: 1.45; white-space: normal; }
	.dgo-proof-txt strong { font-size: 15.5px; line-height: 1.35; }
	.dgo-proof-txt br { display: none; }

	.dgo-quote { position: relative; left: auto; top: auto; padding: 6px 0 22px 68px; }
	.dgo-quote::before { left: 0; top: 6px; width: 42px; height: 37px; }
	.dgo-quote::after { left: 68px; top: auto; bottom: 4px; }
	.dgo-quote p { font-size: 20px; line-height: 1.35; white-space: normal; }
}
@media (max-width: 699.98px) {
	.dgo-stage { grid-template-columns: minmax(0, 1fr); }
	.dgo-proofs { grid-template-columns: minmax(0, 1fr); }
	.dgo-proofs li:nth-child(even) { border-left: 0; }
	.dgo-proofs li + li { border-top: 1px solid #dbe9f8; }
	.dgo .dgo-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.dgo *,
	.dgo *::before,
	.dgo *::after { transition-duration: 0s !important; animation: none !important; }
}

/* ==========================================================================
   DIGIlium — Service : continuité entre les sections
   Même système qu'à l'accueil et sur portfolio : chaque plaque se dissout en
   haut et en bas dans la teinte de page (courbe douce), et une même lueur,
   centrée sur la jonction, est partagée par les deux sections en alternant
   droite / gauche. Posés à z-index -1 : au-dessus de la plaque (-2), sous le contenu.
   ========================================================================== */
.dgr { --dg-glow-bottom-x: 74%; }
.dgp { --dg-glow-top-x: 74%; --dg-glow-bottom-x: 22%; }
.dgn { --dg-glow-top-x: 22%; --dg-glow-bottom-x: 74%; }
.dgo { --dg-glow-top-x: 74%; }
:is(.dgp, .dgn, .dgo) > [class$="-stage"]::before,
:is(.dgr, .dgp, .dgn, .dgo) > [class$="-stage"]::after {
	content: "";
	position: absolute;
	z-index: -1;
	left: 0;
	right: 0;
	height: var(--dg-seam);
	pointer-events: none;
}
:is(.dgp, .dgn, .dgo) > [class$="-stage"]::before {
	top: -1px;
	background:
		radial-gradient(ellipse 34% 100% at var(--dg-glow-top-x) 0, var(--dg-glow), transparent),
		var(--dg-fade-in);
}
:is(.dgr, .dgp, .dgn) > [class$="-stage"]::after {
	bottom: -1px;
	background:
		radial-gradient(ellipse 34% 100% at var(--dg-glow-bottom-x) 100%, var(--dg-glow), transparent),
		var(--dg-fade-out);
}
/* dernière section : la suite de la page prend le relais, pas de lueur */
.dgo > .dgo-stage::after { bottom: -1px; background: var(--dg-fade-out); }

/* Rythme : même respiration (--dg-rhythm, 110u) entre le dernier contenu d'une
   section et le surtitre de la suivante. Chaque scène s'allonge de ce qui manque
   (--dg-after) ; sa plaque (809u) s'arrête avant, et le fondu bas couvre ce reste.
   Écarts relevés : dernier contenu à 782 / 779 / 791 / 789u, surtitres suivants à 34 / 30 / 25u. */
@media (min-width: 1200px) {
	.dgr { --dg-after: 49; }
	.dgp { --dg-after: 51; }
	.dgn { --dg-after: 67; }
	.dgo { --dg-after: 50; }
	:is(.dgr-stage, .dgp-stage, .dgn-stage, .dgo-stage) { height: calc(var(--u) * (809 + var(--dg-after))); }
	:is(.dgr, .dgp, .dgn) > [class$="-stage"]::after {
		height: calc(var(--dg-seam) + var(--u) * var(--dg-after));
		background:
			radial-gradient(ellipse 34% var(--dg-seam) at var(--dg-glow-bottom-x) 100%, var(--dg-glow), transparent),
			var(--dg-fade-out) top / 100% var(--dg-seam) no-repeat,
			linear-gradient(var(--dg-bg), var(--dg-bg)) bottom / 100% calc(var(--u) * var(--dg-after) + 2px) no-repeat;
	}
	.dgo > .dgo-stage::after {
		height: calc(var(--dg-seam) + var(--u) * var(--dg-after));
		background:
			var(--dg-fade-out) top / 100% var(--dg-seam) no-repeat,
			linear-gradient(var(--dg-bg), var(--dg-bg)) bottom / 100% calc(var(--u) * var(--dg-after) + 2px) no-repeat;
	}
}
/* au-delà de 2177px, les bords des plaques se fondent aussi dans la page */
@media (min-width: 2178px) {
	:is(.dgr-plate, .dgp-plate, .dgn-plate, .dgo-plate) {
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%);
		mask-image: linear-gradient(90deg, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%);
	}
}