@charset "UTF-8";

/*
==========================================================
ENTOURAGE
Style principal
==========================================================
*/

.onMobile  { display:none;}
@media (max-width: 575.98px) { 
.onMobile  { display:block;}
}
.noMobile  { display:block;}
@media (max-width: 575.98px) { 
.noMobile  { display:none;}
}


body{
    background:#f8f9fa;
}

/*==========================================================
NAVBAR
==========================================================*/

.navbar-brand{
    font-weight:bold;
}

/*==========================================================
CARDS
==========================================================*/

.card{
    border:none;
    border-radius:15px;
}

/*==========================================================
BOUTONS
==========================================================*/

.btn{
    border-radius:10px;
}
.pictoPI { width: 26px; height:26px;}
/*==========================================================
MARGES ET PADDINGS
==========================================================*/
.m5				{ margin:.5rem !important;}
.mr5			{ margin-right:5px;}
.mr10			{ margin-right:10px;}
.mr20			{ margin-right:20px;}
.mr30			{ margin-right:30px;}
.ml10			{ margin-left:10px;}
.ml20			{ margin-left:20px;}
.ml30			{ margin-left:30px;}
.mb0			{ margin-bottom:0px;}
.mb10			{ margin-bottom:10px;}
.mb20			{ margin-bottom:20px;}
.mb30			{ margin-bottom:30px;}
.mb60			{ margin-bottom:60px;}
.mb120			{ margin-bottom:120px;}
.mt10			{ margin-top:10px;}
.mt20			{ margin-top:20px;}
.mt30			{ margin-top:30px;}
.mt60			{ margin-top:60px;}

.p10			{ padding:10px;}
.p20			{ padding:20px;}
.p30			{ padding:30px;}

.pb5			{ padding-bottom:5px;}
.pb10			{ padding-bottom:10px;}
.pb20			{ padding-bottom:20px;}
.pb30			{ padding-bottom:30px;}
.pl15			{ padding-left:15px;}
.pl20			{ padding-left:20px;}
.pl30			{ padding-left:30px;}
.pr10			{ padding-right:10px;}
.pr20			{ padding-right:20px;}
.pr30			{ padding-right:30px;}
.pt15			{ padding-top:15px;}
.pt30			{ padding-top:30px;}
.pt60			{ padding-top:60px;}


@media (max-width: 575.98px) { 
.mmb20			{ margin-bottom:20px;}
}

/*==========================================================
BARRE DE PROGRESSION
==========================================================*/

.progress{
    height:22px;
}

.progress-bar{
    font-weight:600;
}

/*==========================================================
BOITE PHOTO
==========================================================*/

.photo-box{

    background:#fff;

    border:1px solid #dee2e6;

    border-radius:15px;

    padding:15px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

    gap:12px;

    height:100%;

}

.photo-box.done{

    border:2px solid #198754;

}

/*==========================================================
ALBUM VALIDÉ
==========================================================*/

.album-preview{

    display:block;

    width:100%;

    height:auto;

    aspect-ratio:46 / 62;

    object-fit:contain;

    background:#ffffff;

    padding:10px;

}

/*==========================================================
NUMERO DE PHOTO
==========================================================*/

.photo-number{

    font-size:2rem;

    font-weight:bold;

    color:#6c757d;

}


/*==========================================================
FORM
==========================================================*/

.label { color:#aaa; font-style: italic; }


/*==========================================================
STATUT
==========================================================*/

.photo-status{

    font-size:.85rem;

}

/*==========================================================
BLOCS MESSAGES
==========================================================*/
.alert { 
 
}
.alert-success {
	color: #fff;
  background-color: #00B879;
  border: 1px solid #aaa;
}
.alert-primary {
	color: #fff;
  background-color: #1575B4;
  border: 1px solid #aaa;
}

.alert-warning {
	color: #fff;
  background-color: #dc3545;
  border: 1px solid #ddd;
}

.bloc-alert {
	color: #fff;
  background-color: #dc3545;
  border: 2px solid #dc3545;
}
/*==========================================================
APERÇU IMPORT (avant recadrage)
==========================================================*/

.preview-import{

    width:100%;

    height:120px;

    object-fit:cover;

    border-radius:10px;

    border:1px solid #ddd;

}

/*==========================================================
APERÇU FINAL (après recadrage)
==========================================================*/

.preview-final{

    width:110px;

    aspect-ratio:46 / 62;

    object-fit:cover;

    border-radius:8px;

    border:1px solid #ddd;

    background:#fff;

    box-shadow:0 2px 8px rgba(0,0,0,.08);

}

/*==========================================================
ZONE DE PREVIEW IMPORT
==========================================================*/

.preview-box{

    width:240px;

    height:323px;

    border:2px dashed #ccc;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    margin:auto;

    background:#f8f9fa;

}

.preview-box img{

    max-width:100%;

    max-height:100%;

}

/*==========================================================
IMAGES
==========================================================*/

img{

    max-width:100%;

}

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

@media (max-width:768px){

    .preview-final{

        width:90px;

    }

    .preview-import{

        height:90px;

    }

}


/*==========================================================
ADMINISTRATION
==========================================================*/

.imposition-table td{

    vertical-align:middle;

}

.imposition-table textarea{

    resize:vertical;

    min-height:80px;

}

.imposition-table img{

    display:block;

    margin:auto;

}

.imposition-table td:nth-child(5){

    font-size:.90rem;

    line-height:1.35;

}



/*==========================================================
CHOIX PACKS
==========================================================*/



.pack-card
{
    height: 100%;

    border: 1px solid #dee2e6;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.pack-card:hover
{
    transform:
        translateY(-5px);

    box-shadow:
        0 10px 25px rgba(0,0,0,0.12);
}


.pack-placeholder
{
    height: 180px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #f1f1f1;

    font-size: 4rem;

    color: #adb5bd;
}


.pack-price
{
    font-size: 2rem;

    font-weight: bold;
}


.quantite-box
{
    max-width: 220px;

    margin: auto;
}


.quantite-input
{
    text-align: center;

    font-size: 1.2rem;

    font-weight: bold;
}


.resume-box
{
    position: sticky;

    top: 20px;
}


.resume-total
{
    font-size: 2rem;

    font-weight: bold;
}