.magasin-location-field{
    padding:15px;
    background:#f4f7fb;
    border:1px solid #d7e0ea;
    border-radius:8px;
}

.magasin-location-field label{
    display:block;
    margin-bottom:10px;
    font-weight:bold;
}

.btn-plan-magasin{
    padding:11px 18px;
    background:#1769aa;
    color:#fff;
    border:0;
    border-radius:6px;
    cursor:pointer;
}

.resume-emplacements{
    margin:10px 0 0;
    direction:ltr;
    text-align:center;
    color:#234;
}

.modal-plan-magasin{
    display:none;
    position:fixed;
    z-index:10000;
    inset:0;
    padding:12px;
    overflow:auto;
    background:rgba(10,25,45,.72);
}

.modal-plan-magasin.visible{
    display:block;
}

.modal-plan-contenu{
    position:relative;
    width:min(720px,96vw);
    min-height:calc(100vh - 24px);
    margin:auto;
    padding:18px;
    background:#fff;
    border-radius:12px;
    direction:rtl;
}

.fermer-plan{
    position:absolute;
    left:12px;
    top:10px;
    z-index:2;
    padding:2px 10px;
    border:0;
    background:#667386;
    color:#fff;
    border-radius:5px;
    font-size:24px;
    cursor:pointer;
}

.legende-plan{
    text-align:center;
}

.pastille{
    display:inline-block;
    width:13px;
    height:13px;
    margin:0 8px;
    border-radius:3px;
}

.pastille.selectionne{
    background:#20a45a;
}

.pastille.libre{
    background:#dbe3ec;
}

.pastille.occupe{
    background:#7b8794;
}

#plan-magasin{
    width:100%;
    margin:15px auto;
    direction:ltr;
}

.entete-navigation-plan{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    margin-bottom:12px;
    direction:rtl;
}

.entete-navigation-plan h3{
    margin:0;
    padding:0 68px;
    text-align:center;
    font-size:18px;
}

.btn-retour-plan{
    position:absolute;
    right:0;
    padding:8px 12px;
    border:0;
    border-radius:6px;
    background:#58697c;
    color:#fff;
    cursor:pointer;
}

.schema-magasin-simple{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:1fr 1.15fr 1.15fr;
    grid-template-areas:
        'z3 z4'
        'z2 vide'
        'z1 vide';
    width:min(100%,500px);
    min-height:590px;
    margin:auto;
}

.choix-zone,
.choix-sous-zone{
    position:relative;
    min-width:0;
    border:3px solid #172033;
    color:#111;
    cursor:pointer;
}

.choix-zone strong,
.choix-sous-zone strong{
    display:block;
    font-size:clamp(18px,5vw,30px);
}

.choix-zone-1{
    grid-area:z1;
    border-top:0;
    background:#e8edf2;
}

.choix-zone-2{
    grid-area:z2;
    border-top:0;
    background:#e8edf2;
}

.choix-zone-3{
    grid-area:z3;
    background:#e8edf2;
}

.choix-zone-4{
    grid-area:z4;
    border-left:0;
    background:#e8edf2;
}

.badge-selection-plan{
    position:absolute;
    top:7px;
    left:7px;
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:26px;
    height:26px;
    padding:0 6px;
    border-radius:14px;
    background:#087438;
    color:#fff;
    font-size:12px;
    font-weight:bold;
}

.schema-sous-zones-1,
.schema-sous-zones-2,
.schema-sous-zones-3,
.schema-sous-zones-4{
    display:grid;
    gap:10px;
    width:min(100%,620px);
    min-height:590px;
    margin:auto;
    padding:8px;
    background:#f7f8fa;
    border:3px solid #172033;
}

.schema-sous-zones-1,
.schema-sous-zones-2{
    grid-template-columns:minmax(65px,.28fr) 1fr minmax(65px,.28fr);
    grid-template-rows:1fr 1fr;
    grid-template-areas:
        'sz2 sz3 sz1'
        'sz2 sz4 sz1';
}

.schema-sous-zones-1 .choix-sous-zone-1,
.schema-sous-zones-2 .choix-sous-zone-1{
    background:#f7b19a;
}

.schema-sous-zones-1 .choix-sous-zone-2,
.schema-sous-zones-2 .choix-sous-zone-2{
    background:#f4a6c9;
}

.schema-sous-zones-1 .choix-sous-zone-3,
.schema-sous-zones-2 .choix-sous-zone-3{
    margin:10% 16%;
    background:#9dd8b4;
}

.schema-sous-zones-1 .choix-sous-zone-4,
.schema-sous-zones-2 .choix-sous-zone-4{
    margin:10% 16%;
    background:#85d0ef;
}

.schema-sous-zones-4{
    grid-template-columns:1fr 1fr minmax(70px,.32fr);
    grid-template-rows:minmax(90px,.35fr) minmax(250px,1fr) minmax(90px,.35fr);
    grid-template-areas:
        'sz1 sz1 sz1'
        'sz4 sz5 sz2'
        'sz3 sz3 sz3';
}

.schema-sous-zones-3{
    grid-template-columns:minmax(70px,.32fr) 1fr;
    grid-template-rows:minmax(90px,.35fr) minmax(200px,1fr) minmax(200px,1fr);
    grid-template-areas:
        'sz2 sz1'
        'sz2 sz3'
        'sz2 sz4';
}

.schema-sous-zones-3 .choix-sous-zone-1{
    background:#f7b19a;
}

.schema-sous-zones-3 .choix-sous-zone-2{
    background:#f4a6c9;
}

.schema-sous-zones-3 .choix-sous-zone-3{
    margin:10% 18%;
    background:#9dd8b4;
}

.schema-sous-zones-3 .choix-sous-zone-4{
    margin:10% 18%;
    background:#85d0ef;
}

.choix-sous-zone{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:8px;
    border-width:2px;
    border-radius:4px;
}

.choix-sous-zone strong{
    font-size:clamp(14px,4vw,24px);
}

.choix-sous-zone small{
    display:block;
    margin-top:6px;
    font-weight:bold;
}

.choix-sous-zone-1{
    grid-area:sz1;
    background:#f7b19a;
}

.choix-sous-zone-2{
    grid-area:sz2;
    background:#ffd08e;
}

.choix-sous-zone-3{
    grid-area:sz3;
    background:#f4a6c9;
}

.choix-sous-zone-4{
    grid-area:sz4;
    margin:20% 0;
    background:#9dd8b4;
}

.choix-sous-zone-5{
    grid-area:sz5;
    margin:20% 0;
    background:#85d0ef;
}

.grille-blocs-detail{
    display:grid;
    grid-template-columns:repeat(var(--colonnes),minmax(0,1fr));
    grid-template-rows:repeat(var(--lignes),minmax(0,1fr));
    flex:1;
    min-height:0;
    gap:4px;
    width:100%;
    height:100%;
    overflow:hidden;
    direction:ltr;
}

.niveau-blocs{
    display:flex;
    flex-direction:column;
    height:calc(100vh - 245px);
    height:calc(100dvh - 245px);
    min-height:360px;
    max-height:720px;
    overflow:hidden;
}

.bloc-magasin{
    min-width:0;
    min-height:0;
    padding:1px;
    border:1px solid #b7c3cf;
    border-radius:4px;
    background:#dbe3ec;
    color:#26384c;
    font-size:clamp(7px,2.1vw,12px);
    line-height:1;
    cursor:pointer;
}

.bloc-magasin:hover{
    background:#b9c9d9;
}

.bloc-magasin.occupe{
    background:#7b8794;
    color:#fff;
    border-color:#687481;
    cursor:pointer;
    opacity:1;
}

.bloc-magasin.occupe:hover{
    background:#687481;
}

.bloc-magasin.selectionne{
    background:#20a45a;
    color:#fff;
    border-color:#087438;
    outline:2px solid #087438;
}

.actions-plan{
    position:sticky;
    bottom:0;
    display:flex;
    gap:10px;
    justify-content:space-between;
    align-items:center;
    margin-top:12px;
    padding:12px;
    background:#fff;
    box-shadow:0 -4px 10px rgba(0,0,0,.08);
}

@media(max-width:520px){
    .modal-plan-magasin{
        padding:0;
    }

    .modal-plan-contenu{
        width:100%;
        min-height:100vh;
        padding:12px;
        border-radius:0;
    }

    .modal-plan-contenu > h2{
        margin-top:5px;
        font-size:22px;
    }

    .legende-plan{
        font-size:12px;
    }

    .schema-magasin-simple,
    .schema-sous-zones-1,
    .schema-sous-zones-2,
    .schema-sous-zones-3,
    .schema-sous-zones-4{
        min-height:65vh;
    }

    .schema-sous-zones-1,
    .schema-sous-zones-2,
    .schema-sous-zones-3,
    .schema-sous-zones-4{
        gap:6px;
    }

    .choix-sous-zone{
        padding:4px;
    }

    .choix-sous-zone small{
        font-size:10px;
    }

    .grille-blocs-detail{
        gap:3px;
    }

    .niveau-blocs{
        height:calc(100vh - 225px);
        height:calc(100dvh - 225px);
        min-height:300px;
        max-height:none;
    }
}