.informations-panel
    {
        display: none;
        width: 1024px;
        height: calc(100svh - 10px);
        position: fixed;
        left: 0;
        right: 0;
        margin: 0 auto;
        bottom:0;
        /*top: calc(100svh - 82px);*/
        background-color: white;
        /*box-shadow: 0px 0px 10px rgba(0,0,0,0.2);*/
        z-index: 1025;
        padding: 0px;
        overflow-y: hidden;
        overflow-x: hidden;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;

        transform: translateY(100%); /* Par défaut, seule la poignée dépasse */
        touch-action: none; /* Empêche le scroll de la page pendant le drag */       

        /* From https://css.glass */
        background: rgba(255, 255, 255, 0.5);
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 1);
    }

    .withTransition
    {
        transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    .informations-panel .informations-panel-handle-zone
    {
        display: block;
        top:0px;
        left:initial;
        right: 0px;
        width: 100%;
        padding-bottom: 20px;
        cursor: pointer;

        height: auto;

        background: var(--le-primary);
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 1);
    }

    .informations-panel .informations-panel-handle
    {
        display: block;
        position: relative;
        margin:0;
        top: 0px;
        right:initial;
        left: 0px;
        width: 100%;
        height: 32px;
        /*background-color: rgba(75,75,75,1);*/
        border-radius: 7px;
        pointer-events: none;
        z-index: 1051;
        font-family: "Font Awesome 6 Pro";
        text-align: center;
        font-size:18pt;
        width: 40px; height: 6px; border-radius: 3px; background: #a2a6aa; margin: 18px auto 0px auto; border:1px solid rgba(255,255,255,0.75);
    }

    .informations-name
    {
        width: 100%;
        text-align:center;
        color: oklch(from var(--le-primary) calc((0.55 - l) * infinity) 0 0);
        font-size: 14pt;
        line-height: 16pt;
        font-weight: 600;
        margin-top: 18px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        padding: 0px 10px 0px 10px;
    }

    .informations-close
    {
        position: absolute;
        right: 8px;
        top: 2px;
        font-family: "Font Awesome 6 Pro";
        text-align: center;
        font-size:22pt;

        /* Choisit automatiquement le blanc ou le noir selon la luminosité du fond */
        color: oklch(from var(--le-primary) calc((0.55 - l) * infinity) 0 0);
    }

    .informations-close:after
    {
        content: '\f057';
        font-weight: bold;
    }

    .informations-panel-content
    {
        padding: 0px 10px 10px 10px;
    }

    :root{
        --bg:#f4f5f7;
        --card:#fff;
        --txt:#14181f;
        --mut:#667085;
        --line:#e4e7ec;
        --acc:#2f5bea;
        --accbg:#e8eefd;
        --title:#525968;
        box-sizing:border-box;
        padding-top:env(safe-area-inset-top,0px);
        padding-bottom:env(safe-area-inset-bottom,0px)
    }
    
    @media(prefers-color-scheme:dark){
        :root:not([data-theme="light"])
        {
            --bg:#0e1116;
            --card:#1a1f27;
            --txt:#eef1f6;
            --mut:#9aa4b2;
            --line:#2a313c;
            --acc:#7c9bff;
            --accbg:#232d4a;
            --title:#525968;
        }
    }

    /*:root[data-theme="dark"]{
        --bg:#0e1116;
        --card:#1a1f27;
        --txt:#eef1f6;
        --mut:#9aa4b2;
        --line:#2a313c;
        --acc:#7c9bff;
        --accbg:#232d4a;
        --title:#525968;
    }*/

    .informations-actions
    {
        /*display:flex;*/
        display: none;
        flex-direction:row;
        gap:8px;
        padding:12px 10px;
        justify-content: center;
    }

    .informations-actions a
    {
        min-width: 25vw;
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:2px;
        padding:9px 0;
        border-radius:12px;
        background:var(--accbg);
        color:var(--acc);
        text-decoration:none;
        font-size:12px;
        font-weight:600
    }

    .informations-actions a span
    {
        font-size:20px
    }

.informations-content{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:0 16px calc(24px + env(safe-area-inset-bottom,0px))}

.informations-content section{scroll-margin-top:8px;padding:8px 0px 18px 0px;border-bottom:1px solid var(--line);}
.informations-content section:last-child{border:0}

.informations-content section h2
{
    padding-top: 10px;
}

.informations-chips
{
    overflow-x:auto;
    padding:8px 16px;
    border-bottom:1px solid var(--line);
    scrollbar-width:none;
    flex:none; 
    text-align: center;
}
.informations-chips::-webkit-scrollbar{display:none}
.informations-chips button{
    /* flex: none; */
    border: 1px solid var(--line);
    background: rgba(255,255,255,0.6);
    color: var(--mut);
    font: inherit;
    font-size: 14px;
    padding: 6px 14px;
    border-radius: 99px;
    margin: 0px 3px 3px 3px;
}
.informations-chips button.on{background:var(--acc);border-color:var(--acc);color:#fff}

h2
{
    font-size:14px;
    letter-spacing:.06em;
    color:var(--title);
    margin:0 0 10px;
    font-weight: bold;
}

.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags span{background:var(--bg);border-radius:8px;padding:4px 10px;font-size:14px}

.informations-content .section-wrapper
{
    font-size: 10pt;
    line-height: 14pt;
}

.informations-content ul
{
    padding-left: 20px;
}

.informations-content .level-0
{
    margin-left:0px;
}

.informations-content .level-1
{
    margin-left:10px;
}

.informations-content .level-2
{
    margin-left:20px;
}

.informations-content .level-3
{
    margin-left:30px;
}

.informations-content .level-4
{
    margin-left:40px;
}

.description-image
{
    width: 40%;
    border-radius: 10px;
    overflow: hidden;
    padding: 5px;
    border: 1px solid var(--line);
    margin: 0 auto 10px auto;
    display: block;
    background-color: white;
}

.contact-row{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);color:inherit;text-decoration:none;min-height:48px}
.contact-row:last-child{border:0}
.contact-row i{font-style:normal;font-size:24px;width:28px;text-align:center}
.contact-row small{display:block;color:var(--mut);font-size:12px}

.contact-row.center
{
    justify-content: center;
}

.contact-social
{
    font-size: 40px !important;
}

.car{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:16px;margin:0 -16px;padding:0 16px 4px;scrollbar-width:none;overscroll-behavior-x:contain}
.car::-webkit-scrollbar{display:none}
.pc{flex:none;width:80%;max-width:320px;scroll-snap-align:start;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--card)}
.pc .ph{position:relative}
.pc img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--bg)}
.pc .n{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.55);color:#fff;font-size:12px;padding:2px 9px;border-radius:99px}
.pc .t{padding:12px 14px 14px}
.pc h3{margin:0 0 4px;font-size:16px}
.pc p{margin:0;color:var(--mut);font-size:14px}
.dots{display:flex;justify-content:center;gap:6px;margin-top:12px}
.dots button{width:8px;height:8px;padding:0;border:0;border-radius:99px;background:var(--line);transition:.2s}
.dots button.on{width:22px;background:var(--acc)}

@media screen and (max-width: 1200px) {

    .informations-panel
    {
        right: 10px;
        left: initial;
        max-width: 430px;
        width: calc(100svw - 20px);
        height: calc(100svh - 10px);
    }
}

@media screen and (max-width: 880px) {

    .informations-panel
    {
        right: initial;
        left: 10px;
        width: calc(100% - 20px);
        max-width: calc(100% - 20px);
    }
}

@media screen and (min-width: 1201px) {

    .dots
    {
        display: none;
    }
}