@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    --brand-primary: #0071B9;
    --brand-primary-light: #338dcb;
    --brand-primary-dark: #005a94;
    --brand-secondary: #F47B20;
    --brand-secondary-light: #f6954d;
    --brand-secondary-dark: #c3621a;
    --bg-light: #f8f9fa;
    --text-dark: #333;
}

body {
    font-family: 'Inter', sans-serif !important;
    background-color: var(--bg-light);
    color: var(--text-dark);
}

/* --- Typographie et Couleurs Utilitaires --- */
.text-brand-primary {
    color: var(--brand-primary) !important;
}

.bg-brand-primary {
    background-color: var(--brand-primary) !important;
    color: white;
}

.text-brand-secondary {
    color: var(--brand-secondary) !important;
}

.bg-brand-secondary {
    background-color: var(--brand-secondary) !important;
    color: white;
}

/* --- Glassmorphism --- */
.glass-card {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important;
}

[data-bs-theme="dark"] .glass-card {
    background: rgba(33, 37, 41, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
}

[data-bs-theme="dark"] body {
    background-color: #121212 !important;
}

/* --- Cartes Interactives (Hover & Animations) --- */
.site-card {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    border-radius: 12px !important;
}

.site-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
    cursor: pointer !important;
}

[data-bs-theme="dark"] .site-card:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,0.5) !important;
}

/* --- Micro-animations --- */
.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

.slide-up {
    animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Boutons personnalisés */
.btn-brand-primary {
    background: linear-gradient(135deg, var(--brand-primary-light), var(--brand-primary)) !important;
    color: white !important;
    border: none !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
}

.btn-brand-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 113, 185, 0.3) !important;
    color: white !important;
}

.btn-brand-secondary {
    background: linear-gradient(135deg, var(--brand-secondary-light), var(--brand-secondary)) !important;
    color: white !important;
    border: none !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
}

.btn-brand-secondary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(244, 123, 32, 0.3) !important;
    color: white !important;
}

/* Remplacements Bootstrap */
.card {
    border-radius: 12px !important;
}

/* --- Barre de navigation fixe en haut de page ---
   Le bouton "Accueil", l'interrupteur mode sombre et le menu utilisateur restent visibles
   pendant le défilement, pour ne jamais avoir à remonter en haut d'une longue page. */
.barre-nav-sticky {
    position: sticky;
    top: 0;
    z-index: 1030;
    background-color: var(--bg-light);
    padding-top: .5rem;
    padding-bottom: .5rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
[data-bs-theme="dark"] .barre-nav-sticky {
    background-color: #121212 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* Pipes — colonne « 🏭 Matériel commandé fournisseur » réduite à sa case (v2.4.0).
   Elle est la 2e colonne d'un tableau de 15 : l'état écrit en toutes lettres et la liste du
   matériel commandé lui faisaient prendre le tiers de l'écran. Tout le détail est donc dans
   un `<details>` qui s'ouvre EN SURIMPRESSION : sans ça, ouvrir un détail élargirait la
   colonne et réorganiserait tout le tableau à chaque clic.
   ⚠️ `position: fixed` et non `absolute` : le tableau vit dans un `.table-responsive`, dont
   l'`overflow-x: auto` rogne tout ce qui déborde — un panneau en absolu serait coupé sur les
   dernières lignes. Les coordonnées sont posées à l'ouverture par materiel_fournisseur.js. */
.cel-mf { width: 1%; white-space: nowrap; text-align: center; }
.mf-cellule { display: inline-flex; align-items: center; gap: .3rem; }
.mf-detail { position: relative; }
.mf-detail > summary {
    list-style: none;
    cursor: pointer;
    font-size: .72rem;
    color: var(--bs-secondary-color);
    user-select: none;
}
.mf-detail > summary::-webkit-details-marker { display: none; }
.mf-detail[open] > summary { color: var(--bs-primary); font-weight: 700; }
.mf-detail-corps {
    position: fixed;
    z-index: 1080;
    min-width: 220px;
    max-width: 320px;
    white-space: normal;
    text-align: left;
    font-size: .75rem;
    padding: .45rem .6rem;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    border-radius: .375rem;
    box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .25);
}

/* Sections repliables d'une page longue (page Expéditions, v2.6.0 : « Réservations en
   cours », « Suivi retour client », « Historique des expéditions »). Trois blocs empilés
   dont on ne consulte qu'un à la fois : replier évite de traverser les deux autres pour
   atteindre le troisième. Le chevron remplace la flèche par défaut du navigateur, qui se
   lit mal à côté d'un titre.
   ⚠️ Une section fermée reste dans le DOM mais n'est pas visible : toute ancre qui pointe
   dedans (#reservations, #retours, #reservation-42…) doit l'OUVRIR, sinon le lien semble
   ne rien faire. C'est le rôle du script de la page, pas de ce fichier. */
.section-repliable {
    border-top: 1px solid var(--bs-border-color);
    padding-top: .75rem;
}
.section-repliable > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
}
.section-repliable > summary::-webkit-details-marker { display: none; }
.section-repliable > summary::before {
    content: "\25B8";   /* ▸ */
    color: var(--bs-secondary-color);
}
.section-repliable[open] > summary::before { content: "\25BE"; }   /* ▾ */
.section-repliable > summary:hover { color: var(--bs-primary); }

/* ==================================================================================
   OPTIMISATIONS MOBILES
   ----------------------------------------------------------------------------------
   RÈGLE ABSOLUE DE CE BLOC : tout ce qui suit vit à l'intérieur d'un
   `@media (max-width: 768px)`. L'affichage sur PC ne doit JAMAIS être modifié ici —
   si une règle doit s'appliquer aux deux, sa place est plus haut dans le fichier.

   Ces règles ne se déclenchaient pas du tout avant la v1.11.0 : il manquait la balise
   `viewport` dans base.html, donc le téléphone se déclarait large de 980 px.
   ================================================================================== */
@media (max-width: 768px) {
    /* --- Saisie ---------------------------------------------------------------- */
    /* 16px MINIMUM sur tout champ de saisie : en dessous, iOS zoome automatiquement
       à la mise au point et ne dézoome jamais ensuite — on se retrouve avec une page
       décalée à chaque scan de SN. C'est LA correction mobile la plus importante. */
    input, select, textarea,
    .form-control, .form-select,
    .form-control-sm, .form-select-sm {
        font-size: 16px !important;
    }

    /* Cibles tactiles : 44 px est le minimum confortable au doigt (recommandation
       Apple/Google). Les champs et boutons `-sm` du bureau sont bien trop petits
       pour être visés avec des gants en entrepôt. */
    .form-control, .form-select,
    .btn:not(.btn-link):not(.btn-close) {
        min-height: 44px;
    }
    .btn-sm:not(.btn-link):not(.btn-close) {
        min-height: 40px;
        padding-top: .4rem;
        padding-bottom: .4rem;
    }
    /* Téléphone et e-mail du contact d'une commande : ce sont de vraies cibles tactiles
       (on appelle le client depuis l'entrepôt, souvent d'une main), pas du texte de
       paragraphe. En hauteur de ligne normale ils font 19 px, donc se ratent. */
    .lien-contact {
        display: inline-block;
        min-height: 44px;
        padding-top: .55rem;
        padding-bottom: .55rem;
    }
    /* Cases à cocher : au doigt, la case Bootstrap standard (1em) se rate une fois
       sur deux. Elles portent toute la sélection du matériel à expédier. */
    .form-check-input {
        width: 1.35em;
        height: 1.35em;
        margin-top: .15em;
    }
    .form-check-label {
        padding-left: .15rem;
    }

    /* Touch targets plus faciles pour scan photo/douchette */
    .btn-scan {
        padding: 8px 14px !important;
        font-size: 1.1rem !important;
    }

    /* --- Tableaux -------------------------------------------------------------- */
    /* Bordures propres pour les tableaux défilants */
    .table-responsive {
        border-radius: 8px;
        border: 1px solid rgba(0, 0, 0, 0.08);
        margin-bottom: 1rem;
        /* Inertie de défilement iOS + indication qu'on peut glisser latéralement */
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }
    /* Cellules resserrées : sur 360 px de large, le rembourrage du bureau fait perdre
       une colonne entière. On garde la même taille de police pour rester lisible. */
    .table > :not(caption) > * > * {
        padding-left: .4rem;
        padding-right: .4rem;
    }
    /* Un tableau ne doit jamais être compressé sous sa largeur utile : on le laisse
       déborder DANS son conteneur .table-responsive, qui défile. */
    .table-responsive > .table {
        width: auto;
        min-width: 100%;
    }
    /* Les en-têtes restent visibles quand on fait défiler une longue liste (utile sur les
       listes de sélection à hauteur limitée : stock à expédier, aperçu de table…).
       Le fond opaque est indispensable : sans lui, les lignes défilent en transparence
       DERRIÈRE l'en-tête. `background-color: inherit` conserve le thead sombre là où il
       y en a un (.table-dark), et retombe sur le fond de page ailleurs. */
    .table-responsive > .table > thead {
        background-color: var(--bs-body-bg);
    }
    .table-responsive > .table > thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        background-color: inherit;
    }
    .table-responsive > .table > thead.table-dark {
        background-color: var(--bs-dark, #212529);
    }

    /* --- Typographie ----------------------------------------------------------- */
    h1 { font-size: 1.8rem !important; }
    h2 { font-size: 1.4rem !important; }
    h3 { font-size: 1.2rem !important; }
    .lead { font-size: 1rem !important; }
    /* `display-*` de Bootstrap (page d'erreur, gros compteurs) : 5rem sur un
       téléphone déborde de l'écran. */
    .display-1, .display-2, .display-3, .display-4 {
        font-size: 2.5rem !important;
    }

    /* --- Espacements ----------------------------------------------------------- */
    .container, .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    .container { margin-top: 10px !important; }
    .card-body { padding: 1rem !important; }

    /* --- Barre de navigation --------------------------------------------------- */
    /* Encoches et barres gestuelles (iPhone, Android récents) : sans ces marges,
       la barre collante passe sous l'encoche et le pied de page sous la barre
       de navigation du système. */
    .barre-nav-sticky {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
    body {
        padding-bottom: env(safe-area-inset-bottom);
    }
    /* Le menu utilisateur s'ouvre souvent hors écran à droite sur petit écran. */
    .dropdown-menu {
        max-width: calc(100vw - 20px);
    }

    /* --- Formulaires en ligne -------------------------------------------------- */
    /* Beaucoup de formulaires du projet alignent champs et bouton sur une ligne
       (`d-flex`) : sur téléphone, ils se retrouvent écrasés à 40 px de large.
       On les laisse passer à la ligne et occuper toute la largeur. */
    form .d-flex > .form-control,
    form .d-flex > .form-select {
        flex: 1 1 100%;
        min-width: 0;
    }
    /* `style="width: …px"` en dur dans les gabarits : ces largeurs ont été pensées
       pour un écran large. On les neutralise UNIQUEMENT sur mobile. */
    .form-control[style*="width"],
    .form-select[style*="width"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* --- Divers ---------------------------------------------------------------- */
    /* (Le glisser-tableau à la souris se désactive tout seul au tactile : voir le
       test `pointer: coarse` en tête de static/glisser_tableau.js.) */
    /* Les longs identifiants (SN, MAC, n° de suivi) ne doivent pas élargir la page. */
    code, .font-monospace, .text-break-mobile {
        word-break: break-word;
        overflow-wrap: anywhere;
    }
}

/* Très petits écrans (moins de 400 px : iPhone SE, Android d'entrée de gamme) */
@media (max-width: 400px) {
    .table > :not(caption) > * > * {
        padding-left: .3rem;
        padding-right: .3rem;
        font-size: .85rem;
    }
    /* Les badges se multiplient dans les tableaux (statut, site, marque) : à cette
       largeur ils prennent plus de place que la donnée elle-même. */
    .badge {
        font-size: .68rem;
    }
    h1 { font-size: 1.5rem !important; }
    h2 { font-size: 1.25rem !important; }
}