/* ══════════════════════════════════════════════════════════════════════════════════
   CUNY EXPERTISES · Application « Nuages de Points » (port 5020)
   CHARTE GRAPHIQUE EX'IM — appliquée le 12/10/2026
   ---------------------------------------------------------------------------------
   Montserrat · #D0404A rouge · #248887 vert-bleu · #ECEDED gris clair
   #F6A316 orangé · #343434 texte
   ---------------------------------------------------------------------------------
   ⚠️ RÈGLE DE DOMINANCE (leçon SmartBooking 12/10/2026) : les couleurs de marque
      doivent OCCUPER L'ESPACE. Le FOND est BLANC (jamais un gris neutre plein écran) ;
      le gris #ECEDED ne sert qu'à ALTERNER certaines sections. Les grandes surfaces
      (bande d'en-tête, hero, pied de page, en-têtes de cartes, boutons) portent la
      marque.
   ══════════════════════════════════════════════════════════════════════════════════ */

:root{
    --exim-rouge:#D0404A;
    --exim-vert-bleu:#248887;
    --exim-gris:#ECEDED;
    --exim-orange:#F6A316;
    --exim-texte:#343434;
    /* Alias historiques — conservés pour ne rien casser */
    --rouge:#D0404A;
    --vert:#248887;
    --creme:#ECEDED;
    --orange:#F6A316;
    --texte:#343434;
    --exim-rouge-fonce:#B3353E;
    --exim-vert-bleu-fonce:#1C6C6B;
}

/* ── Base ─────────────────────────────────────────────────────────────────────── */
body{
    background:#fff;                      /* fond BLANC de page (brief) */
    font-family:'Montserrat',Arial,sans-serif;
    color:var(--exim-texte);
}
h1,h2,h3,h4,h5,h6,.navbar-brand,.etape-titre,.card-header{font-family:'Montserrat',Arial,sans-serif}

/* ── GRANDE SECTION CENTRALE en VERT-BLEU (leçon SmartBooking/QAI : les couleurs
      de marque doivent OCCUPER l'espace). Les cartes BLANCHES se détachent dessus ;
      les grandes zones vides (colonne de droite sous la visualisation, gouttières)
      deviennent vert-bleu → c'est ce qui fait basculer le % de marque. ───────────── */
.bloc-principal{
    background:var(--exim-vert-bleu);
    padding-top:22px;
    padding-bottom:26px;
}

/* ── Liseré vert-bleu ÉPAIS en tête de page (12 px) ───────────────────────────── */
.lisere{height:12px;background:var(--exim-vert-bleu);width:100%}

/* ── Bande d'en-tête ROUGE franche et épaisse ─────────────────────────────────── */
.exim-header{
    background:var(--exim-rouge);
    color:#fff;
    padding:18px 26px;
    display:flex;align-items:center;gap:20px;
    border-bottom:6px solid var(--exim-vert-bleu);
    min-height:134px;
}
.exim-header .logo-exim{
    background:#fff;border-radius:12px;padding:8px 12px;
    height:84px;display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 14px rgba(0,0,0,.18);
}
.exim-header .logo-exim img{height:66px;width:auto;display:block}
.exim-header .exim-titres{flex:1;min-width:0}
.exim-header h1{
    font-size:26px;font-weight:700;margin:0;color:#fff;letter-spacing:.2px;
    text-transform:uppercase;
}
.exim-header .exim-sous{
    font-size:13px;font-weight:500;opacity:.92;margin-top:3px;letter-spacing:.3px;
}
.exim-header .exim-sous b{font-weight:700}
.exim-header .exim-etat{
    background:#fff;color:var(--exim-rouge);font-weight:700;font-size:12.5px;
    border-radius:999px;padding:9px 16px;white-space:nowrap;
    box-shadow:0 3px 10px rgba(0,0,0,.15);
}

/* ── HERO rouge pleine largeur : bandeau de démonstration ─────────────────────── */
.exim-hero{
    background:var(--exim-rouge);
    color:#fff;
    padding:26px 26px 64px;
    border-bottom:6px solid var(--exim-vert-bleu);
}
.exim-hero .exim-hero-titre{
    font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;
    margin:0 0 14px;color:#fff;
}
.exim-hero .exim-hero-titre span{opacity:.85;font-weight:500;text-transform:none;letter-spacing:0}
.exim-hero .exim-chiffres{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.exim-hero .exim-chiffre{
    background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);
    border-radius:10px;padding:10px 16px;min-width:150px;
}
.exim-hero .exim-chiffre .v{font-size:19px;font-weight:700;line-height:1.1}
.exim-hero .exim-chiffre .l{font-size:11px;opacity:.9;text-transform:uppercase;letter-spacing:.5px}

/* ── Stepper porté par le hero ────────────────────────────────────────────────── */
.stepper{display:flex;gap:0;margin:0}
.step{
    flex:1;text-align:center;padding:13px 8px;background:rgba(255,255,255,.16);
    border-right:2px solid var(--exim-rouge);font-size:12.5px;font-weight:600;
    color:#fff;cursor:default;
}
.step:first-child{border-radius:9px 0 0 9px}
.step:last-child{border-radius:0 9px 9px 0;border-right:none}
.step.active{background:#fff;color:var(--exim-rouge)}
.step.done{background:var(--exim-vert-bleu);color:#fff}
.step .num{
    display:inline-block;width:21px;height:21px;line-height:21px;border-radius:50%;
    background:rgba(0,0,0,.18);font-size:11px;margin-right:5px;
}
.step.active .num,.step.done .num{background:rgba(255,255,255,.28)}

/* ── Titres de sections dans les cartes ───────────────────────────────────────── */
.etape-titre{
    font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.5px;
    color:var(--exim-rouge);margin-bottom:8px;
}

/* ── Cartes : en-tête ROUGE, corps BLANC, alternance gris clair ───────────────── */
.card{border:1px solid #E3E3E3;box-shadow:0 2px 10px rgba(52,52,52,.07);border-radius:12px;overflow:hidden}
.card-header{
    background:var(--exim-rouge)!important;
    color:#fff!important;
    border-bottom:3px solid var(--exim-vert-bleu)!important;
    font-weight:600;font-size:13px;letter-spacing:.3px;
}
.card-header i{color:#fff}
.card-body{background:#fff;color:var(--exim-texte)}
/* Alternance : la 2e carte de chaque bloc prend le gris clair */
.card.alt>.card-body{background:var(--exim-gris)}
.card.alt>.card-header{background:var(--exim-vert-bleu)!important}

/* ── Pied de page VERT-BLEU ───────────────────────────────────────────────────── */
.exim-footer{
    background:var(--exim-vert-bleu);
    color:#fff;
    margin-top:30px;
    padding:30px 26px 34px;
    border-top:14px solid var(--exim-rouge);
}
.exim-footer .exim-f-grid{display:flex;gap:34px;flex-wrap:wrap;align-items:flex-start}
.exim-footer h4{
    font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;
    color:#fff;margin:0 0 6px;
}
.exim-footer .exim-f-col{flex:1;min-width:250px}
.exim-footer .exim-f-col p{margin:0;font-size:13px;line-height:1.7;opacity:.96}
.exim-footer .exim-f-col .pt{font-weight:700}
.exim-footer .exim-bas{
    margin-top:22px;padding-top:14px;border-top:1px solid rgba(255,255,255,.35);
    font-size:12px;opacity:.9;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
}

/* ── Boutons : variables Bootstrap 5.3 réécrites (états hover/actif compris) ──── */
.btn{font-family:'Montserrat',Arial,sans-serif;font-weight:600;border-radius:8px}
.btn-primary{
    --bs-btn-bg:#D0404A;--bs-btn-border-color:#D0404A;--bs-btn-color:#fff;
    --bs-btn-hover-bg:#B3353E;--bs-btn-hover-border-color:#B3353E;--bs-btn-hover-color:#fff;
    --bs-btn-active-bg:#B3353E;--bs-btn-active-border-color:#B3353E;--bs-btn-active-color:#fff;
    --bs-btn-disabled-bg:#D0404A;--bs-btn-disabled-border-color:#D0404A;--bs-btn-disabled-color:#fff;
}
.btn-success{
    --bs-btn-bg:#248887;--bs-btn-border-color:#248887;--bs-btn-color:#fff;
    --bs-btn-hover-bg:#1C6C6B;--bs-btn-hover-border-color:#1C6C6B;--bs-btn-hover-color:#fff;
    --bs-btn-active-bg:#1C6C6B;--bs-btn-active-border-color:#1C6C6B;--bs-btn-active-color:#fff;
    --bs-btn-disabled-bg:#248887;--bs-btn-disabled-border-color:#248887;--bs-btn-disabled-color:#fff;
}
.btn-danger{
    --bs-btn-bg:#D0404A;--bs-btn-border-color:#D0404A;--bs-btn-color:#fff;
    --bs-btn-hover-bg:#B3353E;--bs-btn-hover-border-color:#B3353E;--bs-btn-hover-color:#fff;
    --bs-btn-active-bg:#B3353E;--bs-btn-active-border-color:#B3353E;--bs-btn-active-color:#fff;
}
.btn-warning{
    --bs-btn-bg:#F6A316;--bs-btn-border-color:#F6A316;--bs-btn-color:#343434;
    --bs-btn-hover-bg:#DC900D;--bs-btn-hover-border-color:#DC900D;--bs-btn-hover-color:#343434;
    --bs-btn-active-bg:#DC900D;--bs-btn-active-border-color:#DC900D;--bs-btn-active-color:#343434;
}
.btn-info{
    --bs-btn-bg:#248887;--bs-btn-border-color:#248887;--bs-btn-color:#fff;
    --bs-btn-hover-bg:#1C6C6B;--bs-btn-hover-border-color:#1C6C6B;--bs-btn-hover-color:#fff;
    --bs-btn-active-bg:#1C6C6B;--bs-btn-active-border-color:#1C6C6B;--bs-btn-active-color:#fff;
}
.btn-secondary,.btn-dark{
    --bs-btn-bg:#343434;--bs-btn-border-color:#343434;--bs-btn-color:#fff;
    --bs-btn-hover-bg:#4A4A4A;--bs-btn-hover-border-color:#4A4A4A;--bs-btn-hover-color:#fff;
    --bs-btn-active-bg:#4A4A4A;--bs-btn-active-border-color:#4A4A4A;--bs-btn-active-color:#fff;
}
/* Boutons en contour */
.btn-outline-primary{
    --bs-btn-color:#D0404A;--bs-btn-border-color:#D0404A;
    --bs-btn-hover-bg:#D0404A;--bs-btn-hover-border-color:#D0404A;--bs-btn-hover-color:#fff;
    --bs-btn-active-bg:#D0404A;--bs-btn-active-border-color:#D0404A;--bs-btn-active-color:#fff;
}
.btn-outline-secondary{
    --bs-btn-color:#343434;--bs-btn-border-color:#343434;
    --bs-btn-hover-bg:#343434;--bs-btn-hover-border-color:#343434;--bs-btn-hover-color:#fff;
    --bs-btn-active-bg:#343434;--bs-btn-active-border-color:#343434;--bs-btn-active-color:#fff;
}
.btn-outline-success{
    --bs-btn-color:#248887;--bs-btn-border-color:#248887;
    --bs-btn-hover-bg:#248887;--bs-btn-hover-border-color:#248887;--bs-btn-hover-color:#fff;
    --bs-btn-active-bg:#248887;--bs-btn-active-border-color:#248887;--bs-btn-active-color:#fff;
}
.btn-outline-danger{
    --bs-btn-color:#D0404A;--bs-btn-border-color:#D0404A;
    --bs-btn-hover-bg:#D0404A;--bs-btn-hover-border-color:#D0404A;--bs-btn-hover-color:#fff;
    --bs-btn-active-bg:#D0404A;--bs-btn-active-border-color:#D0404A;--bs-btn-active-color:#fff;
}
.btn-outline-warning{
    --bs-btn-color:#F6A316;--bs-btn-border-color:#F6A316;
    --bs-btn-hover-bg:#F6A316;--bs-btn-hover-border-color:#F6A316;--bs-btn-hover-color:#343434;
    --bs-btn-active-bg:#F6A316;--bs-btn-active-border-color:#F6A316;--bs-btn-active-color:#343434;
}
.btn-outline-info{
    --bs-btn-color:#248887;--bs-btn-border-color:#248887;
    --bs-btn-hover-bg:#248887;--bs-btn-hover-border-color:#248887;--bs-btn-hover-color:#fff;
    --bs-btn-active-bg:#248887;--bs-btn-active-border-color:#248887;--bs-btn-active-color:#fff;
}
.btn-outline-dark{
    --bs-btn-color:#343434;--bs-btn-border-color:#343434;
    --bs-btn-hover-bg:#343434;--bs-btn-hover-border-color:#343434;--bs-btn-hover-color:#fff;
    --bs-btn-active-bg:#343434;--bs-btn-active-border-color:#343434;--bs-btn-active-color:#fff;
}
.btn-outline-light{
    --bs-btn-color:#D0404A;--bs-btn-border-color:#D0404A;--bs-btn-bg:#fff;
    --bs-btn-hover-bg:#D0404A;--bs-btn-hover-border-color:#D0404A;--bs-btn-hover-color:#fff;
    --bs-btn-active-bg:#D0404A;--bs-btn-active-border-color:#D0404A;--bs-btn-active-color:#fff;
}
.btn-outline-cuny{border:1px solid var(--exim-rouge);color:var(--exim-rouge);background:#fff}
.btn-outline-cuny:hover{background:var(--exim-rouge);color:#fff}
.btn-link{color:var(--exim-rouge)}

/* ── Badges / pastilles ───────────────────────────────────────────────────────── */
.badge-etat{font-size:12px;font-weight:700}
.badge.bg-light{background:#fff!important;color:var(--exim-rouge)!important}
.badge.bg-success{background:var(--exim-vert-bleu)!important}
.badge.bg-primary{background:var(--exim-rouge)!important}
.badge.bg-danger{background:var(--exim-rouge)!important}
.badge.bg-warning{background:var(--exim-orange)!important;color:#343434!important}
.badge.bg-info{background:var(--exim-vert-bleu)!important}
.badge.bg-secondary,.badge.bg-dark{background:#343434!important}
.badge.bg-secondary-subtle{background:var(--exim-gris)!important;color:var(--exim-texte)!important}

/* ── Alertes / encadrés ───────────────────────────────────────────────────────── */
.alert{border-radius:9px;margin-top:10px;font-size:12.5px}
.alert-light{border:1px solid #DDD!important;background:var(--exim-gris)!important;color:var(--exim-texte)}
.alert-warning{background:var(--exim-orange)!important;border:none!important;color:#343434!important}
.alert-info{background:#DDEBEA!important;border-left:5px solid var(--exim-vert-bleu)!important;color:var(--exim-texte)!important}
.alert-success{background:#DDEBEA!important;border-left:5px solid var(--exim-vert-bleu)!important;color:var(--exim-texte)!important}
.alert-danger{background:#F8DCDE!important;border-left:5px solid var(--exim-rouge)!important;color:var(--exim-texte)!important}
.res-ok{color:var(--exim-vert-bleu)!important;font-weight:600}
.res-err{color:var(--exim-rouge)!important;font-weight:600}

/* ── Textes utilitaires ───────────────────────────────────────────────────────── */
.text-primary{color:var(--exim-rouge)!important}
.text-success{color:var(--exim-vert-bleu)!important}
.text-danger{color:var(--exim-rouge)!important}
.text-warning{color:var(--exim-orange)!important}
.text-muted{color:#6B6B6B!important}
.text-dark{color:var(--exim-texte)!important}

/* ── Formulaires ──────────────────────────────────────────────────────────────── */
.form-control,.form-select{border-radius:8px;border:1px solid #CFCFCF;color:var(--exim-texte)}
.form-control:focus,.form-select:focus{
    border-color:var(--exim-rouge);
    box-shadow:0 0 0 .2rem rgba(208,64,74,.20);
}
.input-group-text{background:var(--exim-gris);border-color:#CFCFCF;color:var(--exim-texte);font-weight:600}
.form-check-input:checked{background-color:var(--exim-rouge);border-color:var(--exim-rouge)}

/* ── Barres de progression / spinners ─────────────────────────────────────────── */
.progress{background:var(--exim-gris);border-radius:6px}
.progress-bar{background:var(--exim-rouge)!important}
.spinner-border{width:3rem;height:3rem}
.spinner-border.text-primary{color:var(--exim-rouge)!important}

/* ── Modales ──────────────────────────────────────────────────────────────────── */
.modal-content{border-radius:14px;border:none;overflow:hidden;font-family:'Montserrat',Arial,sans-serif}
.modal-header{background:var(--exim-rouge);color:#fff;border-bottom:4px solid var(--exim-vert-bleu)}
.modal-header .modal-title{color:#fff;font-weight:700}
.modal-header .btn-close{filter:invert(1) grayscale(1) brightness(2)}
.modal-footer{background:var(--exim-gris)}
.modal-body{background:#fff}

/* ── Zone de dépôt, conteneurs de plan, viewer ────────────────────────────────── */
.zone-depot{
    border:2px dashed var(--exim-vert-bleu);border-radius:12px;padding:22px;
    text-align:center;cursor:pointer;transition:.2s;background:#fff;
}
.zone-depot:hover,.zone-depot.survol{border-color:var(--exim-rouge);background:var(--exim-gris)}
.plan-conteneur{border:1px solid #DCDCDC;border-radius:10px;padding:8px;background:#fff}
#vue3dFrame{width:100%;height:520px;border:none;border-radius:10px;background:#20262E}
#visualizationArea{
    min-height:400px;display:flex;flex-direction:column;align-items:center;
    justify-content:center;background:var(--exim-gris);border-radius:10px;
    border:2px dashed #CFCFCF;
}
#visualizationArea i{color:var(--exim-rouge)}
#planDisplay{background:#fff;border-radius:10px;padding:20px}
#planImage{max-width:100%;height:auto;border-radius:6px;box-shadow:0 0 10px rgba(52,52,52,.12)}
#statsContent{font-size:13.5px}
#statsContent strong{color:var(--exim-rouge)}
#resultatPanneau{max-height:220px;overflow-y:auto;font-size:12.5px}

/* ── Panneau de résultats / tables ────────────────────────────────────────────── */
.table{--bs-table-border-color:#E3E3E3}
.table thead th{background:var(--exim-rouge);color:#fff;font-weight:600}
.table-striped>tbody>tr:nth-of-type(odd)>*{background:var(--exim-gris)}

/* ── Barres de défilement ─────────────────────────────────────────────────────── */
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:var(--exim-gris);border-radius:10px}
::-webkit-scrollbar-thumb{background:var(--exim-vert-bleu);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:var(--exim-rouge)}

/* ── Animations ───────────────────────────────────────────────────────────────── */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.fade-in{animation:fadeIn .5s ease-in}

/* ── Responsive ───────────────────────────────────────────────────────────────── */
@media (max-width:768px){
    .exim-header{flex-wrap:wrap;min-height:auto;padding:12px 16px}
    .exim-header h1{font-size:19px}
    .exim-header .logo-exim img{height:48px}
    .exim-header .logo-exim{height:62px}
    .exim-header .exim-etat{font-size:11px;padding:7px 12px}
    .exim-hero{padding:16px 16px 20px}
    .step{font-size:11px;padding:10px 4px}
    .exim-footer{padding:22px 16px 26px}
    #visualizationArea{min-height:200px}
}