@font-face {
        font-family: "Light";
        src: url("../font/DMSans-Light.woff") format("woff");
        font-style: normal;
        font-display: swap;
        -webkit-font-smoothing: antialiased;
        -webkit-font-smoothing: subpixel-antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    @font-face {
        font-family: "Regular";
        src: url("../font/DMSans-Regular.woff") format("woff");
        font-style: normal;
        font-display: swap;
        -webkit-font-smoothing: antialiased;
        -webkit-font-smoothing: subpixel-antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    @font-face {
        font-family: "Medium";
        src: url("../font/DMSans-Medium.woff") format("woff");
        font-style: normal;
        font-display: swap;
        -webkit-font-smoothing: antialiased;
        -webkit-font-smoothing: subpixel-antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    @font-face {
        font-family: "Semibold";
        src: url("../font/DMSans-SemiBold.woff") format("woff");
        font-style: normal;
        font-display: swap;
        -webkit-font-smoothing: antialiased;
        -webkit-font-smoothing: subpixel-antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    @font-face {
        font-family: "Bold";
        src: url("../font/DMSans-Bold.woff") format("woff");
        font-style: normal;
        font-display: swap;
        -webkit-font-smoothing: antialiased;
        -webkit-font-smoothing: subpixel-antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    @font-face {
        font-family: "EthiasSans";
        src: url("../font/EthiasSans-Regular.woff") format("woff");
        font-style: normal;
        font-display: swap;
        -webkit-font-smoothing: antialiased;
        -webkit-font-smoothing: subpixel-antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    @font-face {
        font-family: "EthiasScript";
        src: url("../font/EthiasScript-Regular.woff") format("woff");
        font-style: normal;
        font-display: swap;
        -webkit-font-smoothing: antialiased;
        -webkit-font-smoothing: subpixel-antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    html, body{
        margin:0;
        padding:0;
        font-family: Regular;
    }
    *{
        font-family: Regular;
    }
    p{
        margin: 10px 0;
        font-family: Regular;
    }
   
    .nav-header{
        background-color: #fff;
        width:100%;
        padding: 25px 0;
    }

    .nav-content{
        max-width:1200px;
        padding: 0 20px;
        display:flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 auto;
    }
    .logo-nav{
        width:128px;
    }
    .no-burger{
        display:flex;
        gap:50px;
        justify-content: flex-end;
        align-items: center;
    }
    .header-links{
        display: flex;
        gap:15px;
    }
    .active-section{
        font-weight: bold;
    }

    .header-link{
        color:#000;
        text-decoration: none;
        cursor:pointer;
    }
    .header-links:hover .header-link {
        font-weight: 400; /* tous repassent en normal */
    }

    .header-links .header-link:hover {
        font-weight: 700; /* celui survolé redevient bold */
    }
    .language-switch{
        color:#FF6F0D;
    }
    .button{
        text-align: center;
        padding:5px 20px;
        border-radius:8px;
        width:fit-content;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap:10px;
        cursor:pointer;
        font-weight: 600;
        text-decoration: none;
    } 
    .blue-button {
        color:#fff;
        background-color:#089EDD;
    }

    .header{
        width:100%;
        background-image: url("../img/header_background.png");
        background-repeat: no-repeat;
        background-position: right center;
        background-size: auto 100%; /* image collée à droite, hauteur complète */
    }
    .header-gradient{
        background: linear-gradient(
            to right,
            #FF6F0D 50%, /*opaque jusque x% de l'écran*/
            rgba(255, 111, 13, 0) 70% /*a x% de l'écran la couleur est 100% transparente*/
        );
    }
    .header-content{
        max-width: 1200px;
        padding: 100px 20px;
        margin: 0 auto;
    }
    .subtitle{
        font-size:16px ;
        text-transform:uppercase;
        letter-spacing:1.6px;
        color:#fff;
    }
    .title{
        font-size: 48px;
        color:#fff;
        letter-spacing: 1.48px;
        margin:20px 0;
        font-family: "EthiasSans";
    }
    .text-white{
        color:#fff;
    }
    .container{
      padding: 80px 20px;  
    }
    .orange-container{
        background-color: #FFEFDC;
    }
    .white-container{
        background-color: #fff;
    }
    .container-fit{
        max-width: 1200px;
        margin: 0 auto;
    }
    .card-grid{
        display:grid;
        grid-template-columns: 1fr 1fr;
        gap:20px;
        padding-top:20px;
    }

    .columns-3{
        grid-template-columns: 1fr 1fr 1fr;
        gap:40px;
    }
    .colspan{
        grid-template-columns: 1fr;
    }
    .card{
        background-color: #fff;
        border-radius: 16px;
        padding:40px;
        box-shadow: 0 10px 32px -4px rgba(19, 25, 39, 0.10);
    }

  

    .colspan .card{
        display:flex;
        gap:30px;
        align-content: flex-start;
    }
    .card-img{
        width:70px;
        height:70px;
        margin: 0 0 10px 0;
    }
      .modal-4-img{
        width: 48px;
        height:48px;
    }
    .card-title{
        font-size: 20px;
        color:#000;
        line-height: 24px;
        font-weight: bold;
        margin:10px 0 5px 0;
    }

    .colspan .card-title {
         margin:0px 0 5px 0;
    }

    .links-inline{
        display:flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        gap:20px;
    }
    .link-blue{
        color:#089EDD;
        cursor:pointer;
        text-decoration: underline;
        width:fit-content;
    }
    .link-black{
        color:#000;
        cursor:pointer;
        text-decoration: underline;
    }
    .link-orange{
        color:#FF6F0D;
        cursor:pointer;
        text-decoration: underline;
    }
    .hero-title{
        font-size: 48px;
        color:#FF6F0D;
        letter-spacing: 1px;
        margin:20px 0;
        font-family: "EthiasSans";
        letter-spacing: 1.48px;
    }
    .ethias-script{
        font-family: "EthiasScript";
        color:#3D0112;
        font-size: 80px;
        font-weight: 400;
    }
    .mt-small{
        margin-top: 20px;
    }
    .mt-medium{
        margin-top:30px;
    }
    .mt-big{
        margin-top:50px;
    }
    .mb-small{
        margin-bottom: 10px;
    }
    .mb-medium{
        margin-bottom:30px;
    }
    .mb-big{
        margin-bottom:50px;
    }
    .hamburger{
        display:none;
    }

    .burger-menu{
        display:none;
    }

    /* FAQ STYLING */

    .faq-accordeon{
        border: 1px solid #DED9D4;
        border-radius: 8px;
        margin:20px auto;
        padding: 22px 30px;
    }
    .question-wrapper{
        display:flex;
        justify-content: space-between;
        align-items: flex-start;
        margin:0;
        padding:0;
        cursor:pointer;
    }
    .faq-question{
        font-family: "Regular";
        font-weight: bold;
        font-size: 18px !important;
        line-height: 22px !important;
    }

    .hidden-content{
        font-family: "Regular";
        display:none;
        padding: 20px 50px 0 0;
    }
    .hidden-content.visible {
        display: block;
    }

    .active, .toggle-button:hover{
        color:#fff;
        background-color: #FF6F0D;
    }

    .chevron{
        padding: 0 0 0 20px;
        transition: transform 0.3s ease;
    }
    .chevron-rotate{
        transform: rotate(90deg);
    }

    /* Footer */
    footer{
        padding:50px 20px !important;
    }
    .left-col p {
        margin: 20px 0 0 0;
    }
    .footer-logo{
        max-width: 524px;
    }
    .grid-footer{
        display:flex;
        justify-content: space-between;
        align-items: flex-end;
    }
    .footer-links{
        display: flex;
        gap:10px;
        align-items: center;
    }

    /*Modale*/

    dialog::backdrop {
        background: rgba(0,0,0,.6);
        pointer-events: auto;
    }

    dialog{
        padding:0; /*Si on click sur le backdrop, la modale se ferme. l'element dialog appartient au backdrop donc il faut un padding a 0 et ajouter le padding sur l'élement enfant*/
        width: 75%;
        max-height: 90vh;
        overflow: auto;
        border-radius: 20px;
        background: #fff;
        border:none;
        outline: none;
    }

    .modal-content{
        padding: 40px 50px 50px 50px;
    }

    .modal-content h2{
        padding:0 0 15px 0;
    }

    .close-modal{
        width: fit-content;
        text-align: center;
        text-decoration: underline;
        cursor:pointer;
        padding:20px 0 0 0;
        margin:0 auto;
    }

    /* Table */
    .table-wrapper {
        overflow-x: auto;   /* permet le scroll horizontal si besoin */
        -webkit-overflow-scrolling: touch; /* scroll fluide sur iOS */
    }
     /* HEADER */
    .ethias-table thead th {
        background: #ff6f0d;
        color: #fff;
        padding: 14px 16px;
        text-align: left;
        vertical-align: bottom;
    }

    /* Si plusieurs lignes dans le header*/
    .table-multiple-header-row thead:first-child{
        border-top-left-radius: 20px;
    }
    .table-multiple-header-row thead:first-child th{
        text-align: center;
    }

    /* arrondi en bas */
    .ethias-table tbody:first-child:last-child td  {
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
    }
    .ethias-table {
        width: 100%;
        border-collapse: separate; /* nécessaire pour le radius */
        border-spacing: 0;
        border-radius: 20px;
        overflow: hidden; /* clip les coins */
        font-size: 16px;
    }

    /* BODY */
    .ethias-table tbody th,
    .ethias-table tbody td {
        padding: 14px 16px;
        vertical-align: top;
    }

    /* alternance des lignes */
    .ethias-table tbody tr:nth-child(odd) {
        background: #ffefdc;
    }
    .ethias-table tbody tr:nth-child(even) {
        background: #fff;
    }


    /* Lists */
    li {
        margin:10px 0;
    }
    .alphabetical-list > li { /* uniquement les li qui sont enfants direct, pas les sous enfants */
        margin:25px 0;
    }

    .checklist {
        list-style: none;
        padding-left: 0;
    }

    .checklist li {
        position: relative;
        padding-left: 1.75rem;
        margin-bottom: 0.5rem;
    }

    .checklist li::before {
        content: "✓";
        position: absolute;
        left: 0;
        top: 0;
        color: #28a745; /* vert */
        font-weight: bold;
    }


    /* Cookie banner */

    .cookie-banner {
        display:none;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: #fff;
        z-index: 1000;
        box-sizing: border-box;
        box-shadow: 0 5px 10px rgba(0, 160, 225, 0.4);
        padding:30px;
    }
    .cookie-banner-content {
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-around;
        gap: 50px;
    }
    .cookie-accept{
        white-space: nowrap;
        flex-shrink: 0;
    }

    /*Responsive Styling */

    @media (min-width: 600px) {
        .faq-accordeon{
            padding: 22px 50px;
        }
    }

    @media only screen and (max-width: 900px) {
        .no-burger{
            display:none;
        }
        .hamburger{
            display:block;
            cursor:pointer;
            position: relative;
        }

        .hamburger:hover .burger-menu,
        .hamburger .burger-menu:hover {
            display: flex;
        }
        .burger-menu{
            position: absolute;
            top: 100%;
            right: -20px;
            width: 300px;
            background: white;
            padding: 40px;
            flex-direction: column;
            gap:20px;
            justify-content: flex-start;
            border-bottom-left-radius: 20px;
        }
        .grid-footer{
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
        }
        .footer-logo{
            max-width: 90%;
        }
        .footer-links{
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
        }
        .mobile-hidden{
            display:none;
        }
    }
    @media only screen and (max-width: 650px) {

        .title {
            font-size:35px;
        }
        .ethias-script{
            font-size: 50px;
        }
        .card-grid, .columns-3{
            grid-template-columns: 1fr;
        }
        .colspan .card{
            display:block;
        }
        .colspan .card-title {
             margin:10px 0 5px 0;
        }
        .header-gradient{
            background: linear-gradient(
                to right,
                #FF6F0D 100%, /*opaque jusque x% de l'écran*/
                rgba(255, 111, 13, 0) 100% /*a x% de l'écran la couleur est 100% transparente*/
            );
        }
        dialog{
            width:95%;
        }
        .modal-content{
            padding: 20px 25px 25px 25px;
        }

        /* Table */

        .ethias-table td,
        .ethias-table th {
            padding: 10px;
        }

        /*cookie banner*/
          .cookie-banner-content {
            flex-direction: column;
            align-items: flex-start;
            gap:20px;
        }
    }