.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

html {
    scroll-behavior: smooth;
}

.espace_blanc.second {
    top: 37%;
    left: 90%;
}

.Hero_integration {
    height: 725.5px;
    background-color: #062E12;
}

.cta.cta-orange {
    background-color: #DD8F1E;
    color: #1C1A15;
}

.cta.cta-orange:hover {
    background-color: #F0B95A;
    box-shadow: 0 20px 30px #f0b95a40;
}

.qualites-immersion4 {
    height: 169.98px;
    background-color: #062E12;
    border-top: 1.5px solid #faf6ee8e;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qualites-immersion4_contenu {
    display: flex;
    align-items: center;
    width: 1155px;
}

.qualites-immersion4_contenu .qualite {
    flex: 1;
    border-right: 1.5px solid #faf6ee1a;
}

.quantite {
    display: flex;
}

.quantite .chiffre {
    font-family: "Fraunces";
    font-weight: 600;
    font-size: 29.6px;
    letter-spacing: 0;
    color: #FAF6EE;
}

#video {
    scroll-margin-top: 0;
}

.quantite .unite {
    font-family: "Fraunces";
    font-weight: 600;
    font-size: 14.8px;
    letter-spacing: 0;
    color: #F0B95A;
    font-style: italic;
    transform: translateY(5px);
}

.qualite_desc {
    font-family: "Outfit";
    font-weight: 300;
    font-size: 11.8px;
    letter-spacing: 0;
    color: #FAF6EE99;
    white-space: nowrap;
}

.qualite {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 4px 20px;
}

.qualites-immersion4_contenu .qualite:last-child {
    border-right: none;
}

.section-incitative {
    height: 515.17px;
    background-color: #FAF6EE;
    display: flex;
    align-items: center;
    position: relative;
}

.section-demonstration-visuelle {
    height: 967.58px;
    background-color: #062E12;
    display: flex;
    justify-content: center;
    padding-block: 120px;
}

.section-explication-process {
    height: 737.59px;
    background-color: #FAF6EE;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-comparaison {
    height: 832.94px;
    background-color: #F3ECDD;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-avantages {
    height: 647.08px;
    background-color: #FAF6EE;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 70px;
}

.section-stats {
    height: 297.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #DD8F1E;
}

.section-utilisations {
    height: 739.90px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FAF6EE;
}

.historique {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 546.70px;
    background-color: #062E12;
}

.section-faq {
    height: 814.33px;
    background-color: #FAF6EE;
}

.section-avant-footer {
    height: 550.68px;
    background-color: #F3ECDD;
}

.section-incitative_contenu {
    margin-inline: auto;
}

.section-incitative_contenu img {
    margin-inline: auto;
    display: block;
}

.section-incitative_texte {
    font-family: "Fraunces";
    font-weight: 300;
    font-size: 36.2px;
    line-height: 53.36px;
    letter-spacing: 0;
    color: #1C1A15;
    text-align: center;
    margin-top: 30px;
}

.texte-vert {
    color: #0F6322;
    font-style: italic;
}

.background-degrade-jaune {
    background: linear-gradient(180deg, rgba(221, 143, 30, 0) 62%, rgba(221, 143, 30, 0.38) 62%);
}

.orange-partiel-cercle {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 231px;
    height: 47px;
}

.vert-partiel-cercle {
    position: absolute;
    top: 0;
    left: 0;
    width: 180px;
    height: 40px;
}

.section-demonstration-visuelle_contenu {
    margin-inline: auto;
}

.section-demo_en_tete {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8.8px;
}

.section-demo_en_tete .trait-jaune {
    width: 24px;
    height: 2px;
    background-color: #F0B95A;
    transform: translateY(1px);
}

.section-demo_en_tete .surtitre {
    font-family: "Outfit";
    font-weight: 700;
    font-size: 11.5px;
    line-height: 100%;
    letter-spacing: 1.7px;
    text-transform: uppercase;
    color: #F0B95A;
}

.section-demo-video iframe {
    width: 100%;
    height: 100%;
    border-radius: 22px;
    object-fit: cover;
}

.section-demo-titre {
    font-family: "Fraunces";
    font-weight: 600;
    font-size: 47.9px;
    line-height: 51.84px;
    letter-spacing: -0.72px;
    color: #FAF6EE;
    text-align: center;
    margin-top: 18.5px;
}

.texte-jaune {
    color: #F0B95A;
    font-style: italic;
}

.section-demo_desc {
    font-family: "Outfit";
    font-weight: 300;
    font-size: 15.9px;
    line-height: 27.94px;
    letter-spacing: -0.2px;
    color: #FAF6EEB8;
    text-align: center;
    margin-top: 18px;
}

.section-demo-video {
    width: 980px;
    height: 557.38px;
    border: 7px solid #FFFFFF;
    border-radius: 22px;
    position: relative;
    margin-top: 51px;
}

.section-explication-process_contenu {
    display: flex;
    align-items: center;
    gap: 56px;
    height: 513.59px;
    width: 1180px;
}

.section-explication_gauche {
    height: 435.55px;
    width: 562px;
    border: 7px solid #FFFFFF;
    border-radius: 22px;
    box-shadow: 0px 20px 100px #00000036;
}

.section-explication_gauche img {
    width: 100%;
    height: 100%;
    border-radius: 15px;
}

.trait-vert {
    width: 24px;
    height: 2px;
    background-color: #0F6322;
}

.section-explication_droit_en-tete .surtitre {
    font-family: "Outfit";
    font-weight: 700;
    font-size: 11.5px;
    line-height: 100%;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #0F6322;
}

.section-explication_droit_en-tete {
    display: flex;
    align-items: center;
    gap: 8.8px;
}

.section-explication_titre {
    font-family: "Fraunces";
    font-weight: 600;
    font-size: 45.5px;
    line-height: 47.52px;
    letter-spacing: 0;
    color: #1C1A15;
    margin-top: 10px;
    transform: translateY(8px);
}

.section-explication_desc {
    font-family: "Outfit";
    font-weight: 400;
    font-size: 15.2px;
    line-height: 28.12px;
    letter-spacing: 0;
    color: #5C574C;
    margin-top: 18px;
    transform: translateY(8px);
}

.section-explication_liste img {
    width: 18px;
    height: 17px;
}

.section-explication_liste_item {
    display: flex;
    align-items: center;
    gap: 11.18px;
}

.explication_texte {
    font-family: "Outfit";
    font-weight: 400;
    font-size: 14.7px;
    line-height: 22px;
    letter-spacing: 0;
    color: #1C1A15;
    transform: translateY(-1px);
}

.section-explication_droit {
    width: 562px;
}

.section-explication_liste {
    margin-top: 20px;
    transform: translateY(10px);
}

.section-explication_liste_item {
    margin-top: 13px;
}

.conteneur-dent-de-scie img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.bg-vert {
    background-color: #062E12;
}

.texte-gris {
    color: #FAF6EE99;
}

.texte-orange {
    color: #F0B95A;
}

.comparaison-tableau table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 50px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0px 18px 50px #1C1A1512;
    border: 1px solid #1C1A151F;
    box-sizing: border-box;
    transform: translateY(13px);
}

.comparaison-tableau table tbody {
    border-radius: 20px;
}

.comparaison-tableau table tr:first-child {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border: 30px solid #062E12;
}

.comparaison-tableau table tr:first-child th:first-child {
    border-top-left-radius: 20px;
    width: 378.03px;
}

.comparaison-tableau table tr:first-child th {
    font-size: 12.5px;
    font-weight: 700;
    font-family: "Outfit";
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.comparaison-tableau table tr:first-child th,
.comparaison-tableau table tr td {
    text-align: start;
    padding-left: 22px;
}

.comparaison-tableau table tr:first-child th:last-child {
    border-top-right-radius: 20px;
}

.comparaison-tableau table tr:last-child td:first-child {
    border-bottom-left-radius: 20px;
}

.comparaison-tableau table tr:last-child td:last-child {
    border-bottom-right-radius: 20px;
}

.comparaison-tableau table tr {
    height: 52.47px;
    width: 998px;
}

.comparaison-tableau table tr td:first-child {
    background-color: #F3ECDD;
    color: #1C1A15;
    font-size: 13.9px;
    font-weight: 600;
    font-family: "Outfit";
    line-height: 19.49px;
    letter-spacing: 0;
    width: 378.03px;
}

.comparaison-tableau table tr td:nth-child(2) {
    background-color: #FAF6EE;
    font-family: "Outfit";
    font-weight: 400;
    font-size: 13.9px;
    line-height: 19.49px;
    letter-spacing: 0;
    color: #5C574C;
    width: 302.42px;
}

.comparaison-tableau table tr td:nth-child(3) {
    background-color: #0F63220D;
    font-family: "Outfit";
    font-weight: 600;
    font-size: 13.9px;
    line-height: 19.49px;
    letter-spacing: 0;
    color: #0F6322;
    background-color: #FAF6EE;
    background-image: linear-gradient(#0F63220D, #0F63220D);
}

.section-comparaison_contenu {
    width: 1000px;
}

.comparasion_en-tete {
    text-align: center;
}

.comparasion_en-tete .section-explication_droit_en-tete {
    justify-content: center;
}

.comparaison-tableau table td {
    border-top: 1px solid #1C1A151F;
}

.comparasion_en-tete .section-explication_titre {
    transform: translateY(10px);
}

.comparasion_en-tete .section-explication_desc {
    font-size: 15.5px;
    font-weight: 350;
    letter-spacing: -0.1px;
    transform: translateY(9px);
}

.section-avantages_cartes {
    width: 1180px;
    display: flex;
    align-items: center;
    gap: 20.8px;
}

.avantage-carte {
    padding: 29.39px 25.6px 52.29px 25.6px;
    border: 1px solid #1C1A151F;
    border-radius: 18px;
    width: 279.4px;
    height: 179.08px;
    box-shadow: 0px 18px 50px #1C1A1512;
    background-color: #FAF6EE;
    position: relative;
    transition: transform 0.2s ease;
}

.num_carte {
    color: #0F632221;
    font-family: "Fraunces";
    font-weight: 600;
    font-size: 41.6px;
    line-height: 41.6px;
    letter-spacing: 0;
    position: absolute;
    bottom: 10px;
    right: 10px;
}

.avantage-carte_titre {
    font-family: "Fraunces";
    font-weight: 600;
    font-size: 16.7px;
    line-height: 20.69px;
    letter-spacing: 0;
    color: #1C1A15;
    white-space: nowrap;
    margin-bottom: 6.87px;
}

.avantage-carte_desc {
    font-family: "Outfit";
    font-weight: 400;
    font-size: 13.3px;
    line-height: 21.91px;
    letter-spacing: 0;
    color: #5C574C;
}

.avantage-carte:hover{
   transform: translateY(-5px);
}

.section-steps {
    height: 558.28px;
    background-color: #1C1A15;
    position: relative;
    color: #FAF6EE;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.container-steps {
    width: 1180px;
    margin-inline: auto;
}

.sun-decor {
    position: absolute;
    width: 250px;
    height: 250px;
    opacity: 1;
    bottom: -70px;
    left: -70px;
    animation: infinite-rotate 8s linear infinite;
    opacity: 1;
    pointer-events: none;
}

.eyebrow,
.headline {
    text-align: center;
}

.eyebrow {
    font-family: "Outfit";
    font-weight: 700;
    font-size: 11.5px;
    line-height: 100%;
    letter-spacing: 2.07px;
    text-transform: uppercase;
    color: #F0B95A;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.headline {
    font-family: "Fraunces";
    font-weight: 600;
    font-size: 47.3px;
    line-height: 51.84px;
    letter-spacing: 0;
    margin-top: 22px;
}

.eyebrow .trait-jaune {
    display: inline-block;
    width: 24px;
    height: 2px;
    background-color: #F0B95A;
}

.steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    width: 1000px;
    margin-inline: auto;
    margin-top: 4rem;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    transform: translateY(16px);
    animation: fadeUp .6s ease forwards;
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.step:nth-child(1) {
    animation-delay: .2s;
}

.step:nth-child(2) {
    animation-delay: .32s;
}

.step:nth-child(3) {
    animation-delay: .44s;
}

.step:nth-child(4) {
    animation-delay: .56s;
}

.icon-wrap {
    position: relative;
    width: 68px;
    height: 68px;
    margin-bottom: 22px;
}

.icon-circle {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: #08401A;
    border: 1px solid var(--gold-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .35s ease, box-shadow .35s ease;
}

.step .icon-circle {
    transform: translateY(-4px);
}

.icon-circle img {
    width: 24px;
    height: 24px;
}

.badge {
    font-family: "Fraunces";
    position: absolute;
    top: -5px;
    right: -5px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--gold-soft);
    color: #062E12;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.step h3 {
    font-family: "Fraunces";
    font-size: 17.3px;
    font-weight: 600;
    color: #FAF6EE;
    margin-bottom: 10px;
    letter-spacing: 2%;
}

.step p {
    font-size: 13.1px;
    font-weight: 150;
    line-height: 20.99px;
    color: #FAF6EE99;
    font-family: "Outfit";
    text-align: center;
}

.section-stats_contenu {
    display: flex;
    align-items: center;
    width: 1130px;
}

.stat {
    position: relative;
    flex: 1;
}

.section-stats_contenu .stat:first-child::after {
    content: none;
}

.stat::after {
    content: "";
    width: 1px;
    height: 75px;
    background-color: #1C1A154D;
    position: absolute;
    transform: translateY(-83px);
}

.stat_quantite {
    display: flex;
    justify-content: center;
}

.stat_chiffre {
    font-family: "Fraunces";
    font-weight: 600;
    font-size: 60.8px;
    line-height: 60.8px;
    letter-spacing: 0;
    color: #1C1A15;
}

.stat_unite {
    font-family: "Fraunces";
    font-weight: 600;
    font-size: 27.4px;
    line-height: 27.4px;
    letter-spacing: 0;
    color: #AD090E;
    font-style: italic;
    transform: translateY(6px);
}

.stat-texte {
    font-family: "Outfit";
    font-weight: 400;
    font-size: 13.4px;
    line-height: 20.16px;
    letter-spacing: 0;
    color: #1C1A15C7;
    text-align: center;
    margin-top: 8px;
}

.utilisations-cartes {
    width: 1180px;
    display: flex;
    gap: 24px;
    margin-top: 70px;
}

.util-carte img {
    width: 50px;
    height: 50px;
}

.util-carte {
    flex: 1;
    background-color: #FAF6EE;
    border-radius: 16px;
    border: 1px solid #1C1A151F;
    padding: 33.6px 28.4px 33.6px 30.4px;
    transition: transform 0.2s ease;
}

.util-carte:hover {
    box-shadow: 0px 18px 50px #1C1A1512;
    transform: translateY(-5px);
}

.util-carte_titre {
    font-family: "Fraunces";
    font-weight: 600;
    font-size: 19.3px;
    line-height: 23.81px;
    letter-spacing: 0;
    color: #1C1A15;
    margin-top: 10px;
}

.util-carte_desc {
    font-family: "Outfit";
    font-weight: 400;
    font-size: 14.2px;
    line-height: 24.21px;
    letter-spacing: 0;
    color: #5C574C;
    margin-top: 10px;
}

.historique_contenu {
    width: 660px;
}

.historique_contenu .texte-jaune {
    font-family: "outfit";
    font-weight: 700;
    font-size: 11.5px;
    line-height: 100%;
    letter-spacing: 1.57px;
    color: #F0B95A;
    text-align: center;
    text-transform: uppercase;
    font-style: normal;
    transform: translateY(-12px);
}

.texte-jaune.font-40 {
    font-family: "Fraunces";
    font-weight: 400;
    font-style: italic;
    font-size: 40px;
}

.histrorique_card_titre {
    font-family: "Fraunces";
    font-weight: 400;
    font-size: 25.6px;
    line-height: 100%;
    letter-spacing: 0;
    color: #F0B95A;
    text-align: center;
}

.historique-card_texte {
    font-family: "Outfit";
    font-weight: 400;
    font-size: 11.8px;
    line-height: 100%;
    letter-spacing: 0.47px;
    color: #FAF6EE80;
    text-align: center;
    margin-top: 10px;
    text-transform: uppercase;
}

.historique_footer sup {
    transform: translateY(3px);
    display: inline-block;
    font-size: 13px;
}

.historique_footer {
    display: flex;
    justify-content: space-around;
    align-items: end;
    gap: 10px;
    margin-top: 20px;
    width: 555px;
    margin-inline: auto;
    transform: translateY(20px);
}

.drapeau-suisse {
    width: 15px;
    height: 15px;
}

.historique_titre {
    font-family: "Fraunces";
    font-weight: 400;
    font-size: 40px;
    line-height: 52px;
    letter-spacing: 0;
    color: #FAF6EE;
    text-align: center;
    margin-top: 10px;
}

.historique_desc {
    font-family: "Outfit";
    font-weight: 300;
    font-size: 15.5px;
    line-height: 28.12px;
    letter-spacing: 0;
    color: #FAF6EEB8;
    text-align: center;
    margin-top: 18px;
    transform: translateY(3px);
}

.section-avant-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.section-avant-footer-contenu {
    width: 740px;
}

.section-avant-footer h1 {
    font-weight: 600;
    font-size: 56.6px;
    color: #1C1A15;
    max-width: 660px;
    margin-inline: auto;
    text-align: center;
    font-family: "Fraunces";
    line-height: 65.66px;
    letter-spacing: -1.22px;
}

h1 em {
    font-style: italic;
    color: rgba(15, 99, 34, 1);
}

.section__subtitle {
    text-align: center;
    width: 800px;
    font-family: 'Outfit';
    color: rgba(92, 87, 76, 1);
    font-weight: 370;
    font-size: 16px;
    padding: 23px 62px 40px 0;
    line-height: 25px;
}

.cta {
    margin: 10px 0;
    display: inline-flex;
    align-items: center;
    gap: 9.58px;
    background-color: #1C1A15;
    color: #ffffff;
    font-size: 14.4px;
    font-weight: 600;
    font-family: 'Outfit';
    padding: 16px 34px;
    border-radius: 995px;
    border: none;
    cursor: pointer;
    letter-spacing: 0.6px;
    transition: background-color 0.2s ease-in-out, gap 0.2s ease-in-out, transform 0.2s ease-in-out;
    position: relative;
}

.cta img {
    width: 20px;
    height: 20px;
}

.Btn {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.cta:hover {
    background-color: #0F6322;
    box-shadow: 0px 12px 30px #0f632333;
}

.cta:hover img {
    transform: translateX(5px);
}

.cta-souligne {
    background-color: transparent;
    padding-inline: 4px;
    color: #000000;
    transition: all ease 0.3s;
    border-radius: 0;
}

#cta_formation::after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    background: #F0B95A;
    transition: width .3s;
    bottom: 5px;
    left: 0;
}

.cta-souligne {
    border-bottom: 2px solid #F0B95A;
}

.cta-souligne:hover {
    color: #0F6322;
    background-color: transparent;
    box-shadow: none;
}

.cercle {
    position: absolute;
    top: 60%;
    right: 50%;
    transform: translate(50%, -50%);
    width: 920px;
    height: 920.06px;
    border-radius: 50%;
    border: 1.5px dashed #ad090e49;
    pointer-events: none;
}

.grand-cercle {
    width: 1200px;
    height: 1200.08px;
    border-radius: 58%;
    border: 1.5px dashed #0f632341;
    transform: translate(50%, -57%);
}

.section-faq {
    background-color: #FAF6EE;
    padding: 100px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-faq_contenu {
    width: 820px;
}

.faq-liste {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.faq-item {
    border: 1px solid #1C1A151F;
    border-radius: 16px;
    background-color: #FAF6EE;
    transition: box-shadow 0.3s ease;
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 20px;
    min-height: 60px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: "Outfit";
    font-weight: 600;
    font-size: 14.5px;
    line-height: 20px;
    color: #1C1A15;
}

.faq-icone {
    position: relative;
    flex-shrink: 0;
    width: 12px;
    height: 12px;
}

.faq-icone::before,
.faq-icone::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 12px;
    height: 1.5px;
    background-color: #0F6322;
    transform: translateY(-50%);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.faq-icone::after {
    transform: translateY(-50%) rotate(90deg);
}

.faq-item.ouvert .faq-icone::after {
    transform: translateY(-50%) rotate(0deg);
    opacity: 0;
}

.faq-reponse {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
}

.faq-item.ouvert .faq-reponse {
    grid-template-rows: 1fr;
}

.faq-reponse_contenu {
    overflow: hidden;
}

.faq-reponse_contenu p {
    margin: 0;
    padding: 0 20px 22px;
    font-family: "Outfit";
    font-weight: 400;
    font-size: 13.5px;
    line-height: 24px;
    color: #5C574C;
}

.faq-reponse_contenu strong {
    font-weight: 600;
    color: #1C1A15;
}

.Hero_integration {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 725.5px;
    padding-top: 243px;
    padding-right: 340px;
    padding-bottom: 72px;
    padding-left: 340px;
    opacity: 1;
    background: #062E12;
    overflow: hidden;
}

.integration_content {
    position: relative;
    display: grid;
    grid-template-rows: repeat(1, 1fr);
    grid-template-columns: repeat(2, 1fr);
    gap: 64px;
    width: 1240px;
    height: 493.5px;
    max-width: 1240px;
}

.content_text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 617.40px;
    top: 53.08px;
    gap: 19.20px;
    grid-row: 1 / span 1;
    grid-column: 1 / span 1;
    transform: translateY(-27px);
}

.Hero_soustitre {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 14px;
    gap: 8.8px;
    opacity: 1;
    font-family: 'Outfit';
    font-weight: 700;
    font-size: 11.5px;
    line-height: 23px;
    letter-spacing: 1.8px;
    color: #F0B95A;
    text-transform: uppercase;
}

.tiret-doré,
.tiret-dore {
    display: inline-block;
    width: 25px;
    height: 2px;
    background-color: var(--color-orange-65, #F0B95A);
}

.Hero_h1 {
    width: 527.4px;
    opacity: 1;
    font-family: 'Fraunces';
    font-weight: 600;
    font-size: 71.9px;
    line-height: 73.6px;
    letter-spacing: -1.47px;
    color: #FAF6EE;
}

.Hero_h1 span {
    font-style: italic;
    color: #F0B95A;
}

.Hero_p {
    width: 489px;
    max-width: 489px;
    padding-top: 0.93px;
    opacity: 1;
    font-family: 'Outfit';
    font-weight: 300;
    font-size: 17px;
    line-height: 29.68px;
    letter-spacing: 0%;
    color: #FAF6EEC7;
}

.BTn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 19.19px;
    padding-top: 19.19px;
    transform: translateY(-5px);
}

#cta_integration {
    color: #FAF6EE;
    font-family: 'Outfit';
    font-weight: 500;
    font-size: 14.7px;
    line-height: 100%;
    letter-spacing: 0%;
    transition: all ease 0.3s;
    padding-bottom: 14px;
}

#cta_integration:hover {
    color: #F0B95A;
    background-color: transparent;
}

.content_image {
    width: 558.60px;
    height: 493.5px;
    left: 681.4px;
    opacity: 1;
    grid-row: 1 / span 1;
    grid-column: 2 / span 1;
    z-index: 10;
}

.porte_tiret {
    position: absolute;
    width: 420px;
    height: 493.5px;
    opacity: 1;
    top: -5%;
    left: 61.9%;
    border-top-left-radius: 999px;
    border-top-right-radius: 999px;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;
    border: 2px solid #DD8F1E59;
    border-style: dashed;
}

.hero_image img {
    width: 600px;
    height: 613.5px;
}

.hero_image {
    position: absolute;
    width: 406px;
    height: 479.5px;
    opacity: 1;
    top: -19%;
    left: 53%;
}

.gras-blanc {
    font-weight: 600;
    color: #FAF6EE;
    letter-spacing: 0.2px;
}

.cercle_vert {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 1.5%;
    top: 69%;
    width: 104px;
    height: 104px;
    opacity: 1;
    border-radius: 52px;
    box-shadow: 0px 18px 40px 0px #062E1280;
}

#im2 {
    width: 185px;
    height: 185px;
}

.espace_blanc {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 61.59px;
    padding-top: 12.8px;
    padding-bottom: 12.8px;
    padding-left: 16px;
    gap: 9.39px;
    top: 0%;
    left: 88%;
    border-radius: 14px;
    background: #FAF6EEF5;
    box-shadow: 0px 16px 40px 0px #0000004D;
    backdrop-filter: blur(8px);
}

.image {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 34px;
    height: 34px;
    opacity: 1;
    border-radius: 9px;
    background: #DD8F1E29;
}

.image img {
    width: 17px;
    height: 17px;
}

.texte {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 96px;
    height: 37px;
    padding-bottom: 1px;
    gap: 5px;
    font-family: 'Outfit';
    font-weight: 400;
    font-size: 10.9px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #5C574C;
}

.gras {
    width: 96px;
    height: 17px;
    font-family: 'Outfit';
    font-weight: 700;
    font-size: 13.1px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #1C1A15;
}

.petite_porte {
    position: absolute;
    width: 560px;
    height: 672px;
    left: 90%;
    top: -35.5%;
    border-top-left-radius: 999px;
    border-top-right-radius: 999px;
    border-bottom-right-radius: 36px;
    border-bottom-left-radius: 36px;
    border: 1px solid #F0B95A33;
}

.grande_porte {
    position: absolute;
    width: 680px;
    height: 816px;
    left: 89.7%;
    top: -55%;
    border-top-left-radius: 999px;
    border-top-right-radius: 999px;
    border-bottom-right-radius: 36px;
    border-bottom-left-radius: 36px;
    border: 1px solid #F0B95A1A;
}

@media (max-width: 1280px) {
    html, body {
        overflow-x: hidden;
        overflow-x: clip;
    }

    .qualites-immersion4 {
        height: auto;
        padding: 28px 24px;
    }

    .qualites-immersion4_contenu {
        width: 100%;
        max-width: 1155px;
    }

    .qualite_desc {
        white-space: normal;
        text-align: center;
    }

    .section-incitative,
    .section-demonstration-visuelle,
    .section-explication-process,
    .section-comparaison,
    .section-avantages,
    .section-stats,
    .section-utilisations,
    .historique,
    .section-faq,
    .section-avant-footer {
        height: auto;
    }

    .section-demonstration-visuelle {
        padding: 80px clamp(24px, 5vw, 64px);
    }

    .section-demo-titre {
        font-size: clamp(32px, 4vw, 47.9px);
        line-height: 1.12;
    }

    .section-demo-video {
        width: 100%;
        max-width: 980px;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .section-explication-process {
        padding: 80px clamp(24px, 5vw, 64px);
    }

    .section-explication-process_contenu {
        width: 100%;
        max-width: 1180px;
        height: auto;
        gap: clamp(24px, 4vw, 56px);
    }

    .section-explication_gauche {
        flex: 0 1 562px;
        min-width: 0;
        width: auto;
        max-width: 562px;
        height: auto;
        aspect-ratio: 562 / 435;
    }

    .section-explication_droit {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
    }

    .section-explication_titre {
        font-size: clamp(30px, 3.8vw, 45.5px);
        line-height: 1.1;
    }

    .section-comparaison {
        padding: 80px clamp(24px, 5vw, 64px);
    }

    .section-comparaison_contenu {
        width: 100%;
        max-width: 1000px;
    }

    .section-avantages {
        padding: 80px clamp(24px, 5vw, 64px);
        gap: 48px;
    }

    .section-avantages_cartes {
        width: 100%;
        max-width: 1180px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .avantage-carte {
        width: 100%;
        max-width: 279px;
        height: auto;
        min-height: 179px;
    }

    .avantage-carte_titre {
        white-space: normal;
    }

    .section-stats {
        padding: 56px 24px;
    }

    .section-stats_contenu {
        width: 100%;
        max-width: 1130px;
    }

    .stat_chiffre {
        font-size: clamp(42px, 5vw, 60.8px);
        line-height: 1;
    }

    .section-utilisations {
        padding: 80px clamp(24px, 5vw, 64px);
    }

    .utilisations-cartes {
        width: 100%;
        max-width: 1180px;
        flex-wrap: wrap;
    }

    .util-carte {
        flex: 1 1 280px;
        min-width: 0;
    }

    .historique {
        padding: 80px clamp(24px, 5vw, 64px);
    }

    .historique_contenu {
        width: 100%;
        max-width: 660px;
    }

    .historique_footer {
        width: 100%;
        max-width: 555px;
        flex-wrap: wrap;
    }

    .historique_titre {
        font-size: clamp(30px, 4vw, 40px);
        line-height: 1.2;
    }

    .section-faq {
        padding: 80px clamp(24px, 5vw, 64px);
    }

    .section-faq_contenu {
        width: 100%;
        max-width: 820px;
    }

    .section-avant-footer {
        padding: 80px clamp(24px, 5vw, 64px);
    }

    .section-avant-footer-contenu {
        width: 100%;
        max-width: 740px;
    }

    .section-avant-footer h1 {
        font-size: clamp(34px, 4.5vw, 56.6px);
        line-height: 1.12;
    }

    .section__subtitle {
        width: 100%;
        max-width: 800px;
        padding: 16px 0 28px;
    }

    .section-steps {
        height: auto;
        padding: 80px clamp(24px, 5vw, 64px);
        overflow: hidden;
    }

    .container-steps {
        width: 100%;
        max-width: 1180px;
    }

    .steps {
        width: 100%;
        max-width: 1000px;
    }

    /* ---- HERO (texte) ---- */
    .Hero_integration {
        height: auto;
        min-height: 0;
        padding: 160px clamp(24px, 6vw, 120px) 64px;
    }

    .Hero_integration .integration_content {
        width: 100%;
        max-width: 1240px;
        height: auto;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: clamp(24px, 4vw, 64px);
        align-items: center;
    }

    .Hero_integration .content_text {
        width: 100%;
        max-width: 617px;
        transform: none;
    }

    .Hero_integration .Hero_h1 {
        width: 100%;
        max-width: 527px;
        font-size: clamp(42px, 5.5vw, 71.9px);
        line-height: 1.05;
    }

    .Hero_integration .Hero_p {
        width: 100%;
        max-width: 489px;
    }
}

@media (max-width: 768px) {
    .qualites-immersion4 {
        height: auto;
    }

    .qualites-immersion4_contenu {
        flex-direction: column;
        gap: 14px;
        width: 100%;
    }

    .qualites-immersion4_contenu .qualite {
        border-right: none;
        border-bottom: 1.5px solid #faf6ee1a;
        padding: 12px 20px 16px;
        width: 100%;
    }

    .qualites-immersion4_contenu .qualite:last-child {
        border-bottom: none;
    }

    .section-incitative {
        height: auto;
        padding: 56px 20px;
    }

  .section-incitative_texte {
    font-size: clamp(22px, 6.5vw, 30px);
    line-height: 1.4;
    text-align: center;
    text-align-last: center;
    word-spacing: normal;
    letter-spacing: 0;
    text-wrap: balance;
    hyphens: none;
    max-width: 36ch;
    margin-inline: auto;
  }

    .section-demonstration-visuelle {
        height: auto;
        padding: 60px 20px;
    }

    .section-demo-titre {
        font-size: clamp(28px, 8vw, 38px);
    }

    .section-demo-video {
        border-width: 4px;
        margin-top: 32px;
    }

    .section-explication-process {
        height: auto;
        padding: 60px 20px;
    }

    .section-explication_titre {
        font-size: clamp(28px, 8vw, 38px);
        transform: none;
    }

    .section-explication_desc {
        font-size: 14px;
        transform: none;
    }

    .section-comparaison {
        height: auto;
        padding: 60px 0 60px 20px;
    }

    .section-comparaison_contenu {
        padding-right: 20px;
    }

    .comparaison-tableau {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .comparaison-tableau table {
        min-width: 620px;
    }

    .section-avantages {
        height: auto;
        padding: 60px 20px;
        gap: 32px;
    }

    .section-avantages_cartes {
        flex-direction: column;
        align-items: center;
    }

    .avantage-carte {
        width: 100%;
        max-width: 420px;
        height: auto;
    }

    .avantage-carte_titre {
        white-space: normal;
    }

    .section-utilisations {
        height: auto;
        padding: 60px 20px;
    }

    .utilisations-cartes {
        flex-direction: column;
        margin-top: 40px;
    }

    .util-carte {
        flex: none;
    }

    .section-steps {
        height: auto;
        padding: 60px 20px;
    }

    .steps {
        grid-template-columns: 1fr;
        max-width: 380px;
    }

    .headline {
        font-size: clamp(30px, 8vw, 40px);
        line-height: 1.15;
    }

    .section-stats {
        height: auto;
        padding: 48px 20px;
    }

    .section-stats_contenu {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 28px 16px;
        align-items: start;
    }

    .stat::after {
        display: none;
    }

    .historique {
        height: auto;
        padding: 60px 20px;
    }

    .historique_footer {
        flex-wrap: wrap;
        justify-content: center;
    }

    .texte-jaune.font-40,
    .historique_titre {
        font-size: clamp(28px, 8vw, 36px);
    }

    .section-faq {
        height: auto;
        padding: 60px 20px;
    }

    .faq-question {
        font-size: 13.5px;
    }

    .section-avant-footer {
        height: auto;
        padding: 64px 20px;
    }

    .section-avant-footer h1 {
        font-size: clamp(30px, 8vw, 40px);
        line-height: 1.15;
    }

    .Btn {
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }

    .cta {
        width: auto;
        max-width: 100%;
        padding: 12px 24px;
        font-size: 13px;
    }

    .qualites-immersion4_contenu {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0;
        width: 100%;
    }

    .qualites-immersion4_contenu .qualite {
        width: auto;
        padding: 16px 8px;
        border-right: 1.5px solid #faf6ee1a;
        border-bottom: 1.5px solid #faf6ee1a;
    }

    .qualites-immersion4_contenu .qualite:nth-child(2n) {
        border-right: none;
    }

    .qualites-immersion4_contenu .qualite:nth-last-child(-n+2) {
        border-bottom: none;
    }

    .section-stats_contenu .stat:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .section-comparaison {
        padding: 60px 16px;
    }

    .section-comparaison_contenu {
        padding-right: 0;
    }

    .comparaison-tableau {
        overflow-x: visible;
    }

    .comparaison-tableau table {
        min-width: 0;
        width: 100%;
        table-layout: fixed;
        margin-top: 32px;
        transform: none;
    }

    .comparaison-tableau table tr {
        width: auto;
        height: auto;
    }

    .comparaison-tableau table tr:first-child th:first-child,
    .comparaison-tableau table tr td:first-child {
        width: 34%;
    }

    .comparaison-tableau table tr td:nth-child(2) {
        width: 33%;
    }

    .comparaison-tableau table tr:first-child th,
    .comparaison-tableau table tr td {
        padding: 12px 8px;
        word-break: break-word;
        hyphens: auto;
        vertical-align: middle;
    }

    .comparaison-tableau table tr:first-child th {
        font-size: 10px;
        letter-spacing: 0.2px;
    }

    .comparaison-tableau table tr td:first-child,
    .comparaison-tableau table tr td:nth-child(2),
    .comparaison-tableau table tr td:nth-child(3) {
        font-size: 12px;
        line-height: 1.4;
    }

    .section-steps {
        padding: 56px 20px;
    }

    .sun-decor {
        display: none;
    }

    .eyebrow {
        font-size: 10.5px;
        letter-spacing: 1.6px;
    }

    .headline {
        margin-top: 16px;
    }

    .steps {
        grid-template-columns: 1fr;
        gap: 36px;
        max-width: 340px;
        margin-top: 2.5rem;
    }

    .step p {
        max-width: 280px;
        font-size: 13.5px;
    }

    .Hero_integration {
        padding: 130px 20px 44px;
        gap: 28px;
    }

    .Hero_integration .Hero_h1 {
        font-size: clamp(30px, 9vw, 40px);
    }

    .Hero_integration .Hero_p {
        font-size: 14.5px;
    }
}

@media (max-width: 480px) {
    .Hero_h1 {
        font-size: clamp(30px, 10vw, 36px);
    }

    .section-demo-titre,
    .section-explication_titre,
    .headline,
    .historique_titre,
    .section-avant-footer h1 {
        font-size: 28px;
    }

    .stat_chiffre {
        font-size: 42px;
    }

    .section-incitative_texte {
        font-size: 21px;
    }

    .cercle,
    .grand-cercle {
        display: none;
    }

    .Hero_integration .Hero_h1 {
        font-size: clamp(28px, 10vw, 34px);
    }
}

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

/* ---------- Base ---------- */
#video { scroll-margin-top: 90px; }

.section-demonstration-visuelle_contenu { width: 100%; max-width: 980px; }

.cta:focus-visible,
.faq-question:focus-visible {
    outline: 2px solid #F0B95A;
    outline-offset: 3px;
}

/* ---------- ≤ 1024px ---------- */
@media (max-width: 1024px) {
    .section-incitative_texte br,
    .section-explication_titre br,
    .section-utilisations br,
    .section-demo_desc br { display: none; }

    .section-incitative { padding: 64px 24px; overflow: hidden; }
    .section-incitative_contenu { width: 100%; }
    .section-incitative_contenu img { max-width: 220px; height: auto; }
    .orange-partiel-cercle { width: 140px; height: auto; }
    .vert-partiel-cercle   { width: 110px; height: auto; }

    .qualites-immersion4_contenu .qualite { border-right: 1.5px solid #faf6ee1a; padding: 14px 10px; }

    .utilisations-cartes .util-carte:last-child:nth-child(odd) { flex-basis: 100%; }
}

/* ---------- ≤ 768px ---------- */
@media (max-width: 768px) {
    .cta { min-height: 44px; justify-content: center; }
    .section-incitative_contenu img { max-width: 180px; }
}

/* ---------- ≤ 480px ---------- */
@media (max-width: 480px) {
    .section-demo-video { border-width: 3px; border-radius: 16px; }
    .section-demo-video iframe { border-radius: 12px; }
    .faq-question { padding-block: 14px; }
}

/* =========================================================
   HERO IMAGE — TABLETTE / PETITS ÉCRANS (≤ 1280px)
   ---------------------------------------------------------
   Principe : on reprend EXACTEMENT la composition desktop
   (arche, photo, pastille bleue, 2 badges) dans une "scène"
   fixe de 700 x 620 px, positionnée en absolu à l'intérieur
   de .content_image (position: relative). La scène est
   ensuite réduite via `zoom` (variable --s) selon la largeur
   d'écran : les proportions restent identiques au desktop.
   ========================================================= */
@media (max-width: 1280px) {

    .Hero_integration .content_image {
        --s: .72;
        position: relative;
        display: block;
        left: auto;
        width: 700px;
        height: 620px;
        zoom: var(--s);
        grid-column: 2 / span 1;
        grid-row: 1 / span 1;
        justify-self: center;
        align-self: center;
        margin: 0;
        z-index: 1;
        overflow: visible;
    }

    /* arche pointillée (CORRIGÉE : plus grande et décalée vers
       le bas / la droite pour dépasser derrière le cadre de la photo,
       comme sur desktop) */
    .Hero_integration .porte_tiret {
        position: absolute;
        width: 500px;
        height: 590px;
        top: 10px;
        left: 56px;
        transform: none;
        margin: 0;
        z-index: 0;
        border: 2px dashed #DD8F1E99;
        pointer-events: none;
    }

    /* photo (l'image PNG déborde de son cadre comme sur desktop) */
    .Hero_integration .hero_image {
        position: absolute;
        width: 406px;
        height: 479.5px;
        top: 0;
        left: 5px;
        right: auto;
        bottom: auto;
        transform: none;
        display: block;
        z-index: 1;
    }

    .Hero_integration .hero_image img {
        display: block;
        width: 600px;
        height: 613.5px;
        max-width: none;
        object-fit: fill;
    }

    /* pastille bleue (snowflake) */
    .Hero_integration .cercle_vert {
        position: absolute;
        left: 8px;
        top: 434px;
        right: auto;
        bottom: auto;
        width: 104px;
        height: 104px;
        z-index: 2;
    }

    .Hero_integration .cercle_vert #im2 {
        width: 185px;
        height: 185px;
    }

    /* badges blancs */
    .Hero_integration .espace_blanc,
    .Hero_integration .espace_blanc.second {
        position: absolute;
        right: auto;
        bottom: auto;
        transform: none;
        z-index: 3;
    }

    .Hero_integration .espace_blanc        { top: 94px;  left: 439px; }
    .Hero_integration .espace_blanc.second { top: 277px; left: 464px; }
}

/* ---------- 2 colonnes (texte | image) jusqu'à 901px, échelle adaptée ---------- */
@media (max-width: 1280px) {
    .Hero_integration {
        padding-left: clamp(24px, 4vw, 120px);
        padding-right: clamp(24px, 4vw, 120px);
    }

    /* colonne image = largeur réelle de la scène, le texte prend le reste */
    .Hero_integration .integration_content {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .Hero_integration .petite_porte,
    .Hero_integration .grande_porte {
        display: none;
    }
}

@media (max-width: 1200px) { .Hero_integration .content_image { --s: .66; } }
@media (max-width: 1100px) { .Hero_integration .content_image { --s: .60; } }
@media (max-width: 1000px) { .Hero_integration .content_image { --s: .52; } }

/* ---------- ≤ 900px : une seule colonne, image centrée sous le texte ---------- */
@media (max-width: 900px) {

    .Hero_integration .integration_content {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    .Hero_integration .content_text {
        grid-column: 1 / -1;
        grid-row: auto;
        max-width: 640px;
    }

    .Hero_integration .Hero_p {
        max-width: 560px;
    }

    .Hero_integration .content_image {
        --s: 1;
        grid-column: 1 / -1;
        grid-row: auto;
        justify-self: center;
    }
}

/* ---------- réduction progressive de la scène ---------- */
@media (max-width: 768px) { .Hero_integration .content_image { --s: .95; } }
@media (max-width: 700px) { .Hero_integration .content_image { --s: .82; } }
@media (max-width: 620px) { .Hero_integration .content_image { --s: .70; } }
@media (max-width: 540px) { .Hero_integration .content_image { --s: .60; } }
@media (max-width: 440px) { .Hero_integration .content_image { --s: .50; } }
@media (max-width: 380px) { .Hero_integration .content_image { --s: .44; } }

/* ---------- Accessibilité : mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .sun-decor { animation: none; }
    .step { animation: none; opacity: 1; transform: none; }
    .cta, .cta img, .faq-reponse { transition: none; }
}

/* ---------- Explication « Comprendre la technologie » : empilée dès tablette ---------- */
@media (max-width: 1024px) {
  .section-explication-process_contenu {
    flex-direction: column;
  }

  .section-explication_gauche {
    flex: none;
    width: 100%;
    max-width: 560px;
  }

  .section-explication_droit {
    width: 100%;
    max-width: 640px;
    text-align: center;
  }

  .section-explication_droit_en-tete {
    justify-content: center;
  }

  .section-explication_titre,
  .section-explication_desc {
    text-align: center;
  }

  .section-explication_liste_item {
    justify-content: flex-start;
    text-align: left;
    max-width: 480px;
    margin-inline: auto;
  }
}

/* =========================================================
   MOBILE / TABLETTE PORTRAIT (≤ 900px)
   - Ordre : surtitre → titre → IMAGE → paragraphe → boutons
   - Boutons CTA : empilés, sans retour à la ligne
   ========================================================= */
@media (max-width: 900px) {

    .Hero_integration .integration_content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    /* les enfants de .content_text deviennent des éléments du flex parent,
       ce qui permet de glisser l'image juste après le titre */
    .Hero_integration .content_text {
        display: contents;
    }

    .Hero_integration .Hero_soustitre { order: 1; }
    .Hero_integration .Hero_h1        { order: 2; }
    .Hero_integration .content_image  {
        order: 3;
        align-self: center;
        flex-shrink: 0;
        margin: 0 0 24px;
    }
    .Hero_integration .Hero_p         { order: 4; }
    .Hero_integration .BTn            { order: 5; }

    /* ---- CTA ---- */
    .Hero_integration .BTn {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 340px;
        gap: 12px;
        padding-top: 4px;
        transform: none;
    }

    .Hero_integration .BTn .cta {
        margin: 0;
        width: 100%;
        min-height: 50px;
        padding: 14px 24px;
        justify-content: center;
        white-space: nowrap;
        font-size: 14px;
    }

    .Hero_integration .BTn .cta-souligne {
        width: auto;
        align-self: center;
        min-height: 0;
        padding: 6px 4px;
    }

    .Hero_integration #cta_integration {
        padding-bottom: 6px;
    }
}