/* BBTP — mobile first, gros éléments tactiles */

:root {
    --bleu: #1d4ed8;
    --bleu-fonce: #1e3a8a;
    --vert: #16a34a;
    --vert-fonce: #15803d;
    --rouge: #dc2626;
    --gris: #6b7280;
    --fond: #f3f4f6;
    --texte: #111827;
    --rayon: 16px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--fond);
    color: var(--texte);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    -webkit-tap-highlight-color: transparent;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}

.carte {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: var(--rayon);
    padding: 28px 22px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.08);
}

.logo-titre {
    text-align: center;
    margin-bottom: 24px;
}

.logo-entreprise {
    display: block;
    max-width: 220px;
    width: 100%;
    height: auto;
    margin: 0 auto 14px;
}

.logo-titre h1 {
    font-size: 1.4rem;
    margin: 0;
    color: var(--bleu-fonce);
}

.logo-titre p {
    margin: 4px 0 0;
    color: var(--gris);
    font-size: 0.95rem;
}

label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 1.05rem;
}

input[type="text"],
input[type="tel"] {
    width: 100%;
    font-size: 1.6rem;
    padding: 16px;
    border: 2px solid #d1d5db;
    border-radius: 12px;
    text-align: center;
    letter-spacing: 4px;
    margin-bottom: 18px;
}

input[type="text"]:focus,
input[type="tel"]:focus {
    outline: none;
    border-color: var(--bleu);
}

.btn {
    display: block;
    width: 100%;
    padding: 20px;
    font-size: 1.25rem;
    font-weight: 700;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background: var(--bleu);
    transition: transform 0.05s ease, background 0.15s ease;
}

.btn:active { transform: scale(0.97); }

.btn-principal { background: var(--bleu); }
.btn-principal:hover { background: var(--bleu-fonce); }

.btn-succes { background: var(--vert); }
.btn-succes:hover { background: var(--vert-fonce); }

.btn-danger { background: var(--rouge); }

.btn-secondaire {
    background: #fff;
    color: var(--bleu);
    border: 2px solid var(--bleu);
}

.liste-boutons-societes {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.btn-societe {
    background: #fff;
    color: var(--texte);
    border: 2px solid #d1d5db;
    text-align: center;
    font-size: 1.15rem;
}

.btn-societe:active { background: #eff6ff; border-color: var(--bleu); }

.erreur {
    background: #fee2e2;
    color: #991b1b;
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 16px;
    font-size: 0.95rem;
    text-align: center;
}

.succes {
    background: #dcfce7;
    color: #166534;
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 16px;
    font-size: 0.95rem;
    text-align: center;
}

.societe-badge {
    text-align: center;
    background: #eff6ff;
    color: var(--bleu-fonce);
    font-weight: 700;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 20px;
}

/* Récapitulatif avant validation finale */
.recap-liste {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}

.recap-ligne {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #f9fafb;
    border-radius: 10px;
    padding: 12px 14px;
}

.recap-ligne span {
    color: var(--gris);
    font-size: 0.9rem;
}

.recap-ligne strong {
    font-size: 1.05rem;
    text-align: right;
}

.case-certification {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fffbeb;
    border: 2px solid #fde68a;
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 20px;
    font-weight: 600;
    font-size: 0.98rem;
    line-height: 1.4;
    cursor: pointer;
}

.case-certification input[type="checkbox"] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 1px;
    accent-color: var(--bleu);
}

/* Grille des types de camion : gros boutons carrés */
.camion-grille {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 22px;
}

.camion-btn {
    aspect-ratio: 1 / 0.55;
    border: 3px solid #d1d5db;
    border-radius: 14px;
    background: #fff;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--texte);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6px;
}

.camion-btn.selection {
    border-color: var(--bleu);
    background: #eff6ff;
    color: var(--bleu-fonce);
}

/* Liste des types de déchets : boutons pleine largeur (libellés plus longs
   que les types de camion, une seule colonne) */
.dechet-liste {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 22px;
}

.dechet-btn {
    display: block;
    width: 100%;
    border: 3px solid #d1d5db;
    border-radius: 14px;
    background: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--texte);
    cursor: pointer;
    text-align: center;
    padding: 16px 10px;
}

.dechet-btn.selection {
    border-color: var(--bleu);
    background: #eff6ff;
    color: var(--bleu-fonce);
}

.confirmation-icone {
    text-align: center;
    font-size: 4rem;
    margin-bottom: 12px;
}

.centre { text-align: center; }

.lien-retour {
    display: block;
    text-align: center;
    margin-top: 18px;
    color: var(--gris);
    text-decoration: none;
    font-size: 0.95rem;
}

/* --- Zone admin (peut s'afficher plus large sur desktop) --- */
.admin-carte { max-width: 640px; }

/* Page "déchets autorisés" */
.soustitre-liste {
    font-size: 1.05rem;
    color: var(--bleu-fonce);
    margin: 0 0 12px;
}

.code-dechet-liste {
    list-style: none;
    padding: 0;
    margin: 0 0 26px;
}

.code-dechet-ligne {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f9fafb;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 8px;
}

.code-dechet-code {
    flex-shrink: 0;
    background: var(--bleu);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    padding: 4px 8px;
    border-radius: 6px;
}

.code-dechet-desc {
    font-size: 0.95rem;
}

.bandeau-site {
    background: var(--bleu-fonce);
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    padding: 12px 14px;
    border-radius: 10px 10px 0 0;
    margin-top: 10px;
}

.autorisation-num {
    background: #fef2f2;
    color: var(--rouge);
    font-style: italic;
    font-size: 0.85rem;
    margin: 0;
    padding: 8px 14px;
}

.cadre-materiaux {
    border: 2px solid #e5e7eb;
    border-top: none;
    border-radius: 0 0 10px 10px;
    padding: 10px 14px 14px;
    margin-bottom: 22px;
}

.cadre-materiaux-titre {
    font-weight: 700;
    margin: 4px 0 8px;
    font-size: 0.9rem;
    color: var(--gris);
    text-transform: uppercase;
}

.materiaux-liste {
    margin: 0;
    padding-left: 20px;
}

.materiaux-liste li {
    font-size: 0.98rem;
    margin-bottom: 4px;
}

table.export-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    margin-top: 14px;
}

table.export-table th,
table.export-table td {
    border-bottom: 1px solid #e5e7eb;
    padding: 10px 8px;
    text-align: left;
}

table.export-table th {
    background: #f9fafb;
    font-size: 0.85rem;
    text-transform: uppercase;
    color: var(--gris);
}

.liste-societes { list-style: none; padding: 0; margin: 0 0 20px; }

.liste-societes li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: #f9fafb;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
}

.liste-societes .infos { line-height: 1.4; }
.liste-societes .code { color: var(--gris); font-size: 0.9rem; }

.actions-inline { display: flex; gap: 8px; }

.btn-mini {
    padding: 8px 12px;
    font-size: 0.85rem;
    border-radius: 8px;
}

.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.top-bar a { color: var(--gris); text-decoration: none; font-size: 0.9rem; }

/* Page statistiques */
.stats-entreprise {
    background: #f9fafb;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 14px;
}

.stats-entreprise-nom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--bleu-fonce);
    margin-bottom: 8px;
}

.stats-entreprise-total {
    color: var(--gris);
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
}

.stats-ligne {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 0;
    border-top: 1px solid #e5e7eb;
    font-size: 0.95rem;
}

.stats-ligne:first-of-type { border-top: none; }

.stats-ligne-count {
    font-weight: 700;
    color: var(--bleu);
    flex-shrink: 0;
}

.stats-poids-titre {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 2px solid #e5e7eb;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--gris);
    text-transform: uppercase;
}

/* Page d'accueil : liste des camions actuellement sur site */
.liste-dedans {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 8px;
}

.carte-dedans {
    display: block;
    background: #f9fafb;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px 14px;
    text-decoration: none;
    color: var(--texte);
}

.carte-dedans:active { border-color: var(--bleu); background: #eff6ff; }

.carte-dedans-principal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-weight: 700;
}

.carte-dedans-camion {
    background: var(--bleu);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 6px;
    flex-shrink: 0;
}

.carte-dedans-societe {
    text-align: right;
    color: var(--bleu-fonce);
}

.carte-dedans-detail {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 6px;
    font-size: 0.9rem;
    color: var(--gris);
}

/* Pavé numérique pour le code société (écrans entrée/sortie) */
.code-affichage {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 26px;
}

.code-case {
    width: 46px;
    height: 56px;
    border: 2px solid #d1d5db;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--texte);
}

.code-case.rempli {
    border-color: var(--bleu);
    background: #eff6ff;
    color: var(--bleu-fonce);
}

.pave-numerique {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.pave-touche {
    aspect-ratio: 1 / 0.75;
    border: 2px solid #d1d5db;
    border-radius: 14px;
    background: #fff;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--texte);
    cursor: pointer;
}

.pave-touche:active { background: #eff6ff; border-color: var(--bleu); }

.pave-vide { border: none; background: transparent; cursor: default; }
.pave-vide:active { background: transparent; border-color: transparent; }

.pave-effacer { color: var(--gris); font-size: 1.2rem; }

@media (min-width: 480px) {
    .carte { padding: 36px 32px; }
}