/* ==========================================================================
   Socle tactile — commun a tous les gabarits
   ==========================================================================
   Ce que toute vue doit respecter sur un telephone, quel que soit son
   habillage : des commandes atteignables au doigt et des champs qui ne
   declenchent pas le zoom automatique de Safari iOS.

   Ce fichier est charge par les cinq gabarits de l'application. Ce qui est
   propre au back-office vit dans admin.css, ce qui est propre au portail dans
   vitrine.css.
   ========================================================================== */
@media (max-width: 767.98px) {

    /* 44 px est le minimum recommande pour une cible tactile ; 40 pour les
       boutons, compromis pour que les barres d'actions denses restent
       compactes. Les liens habilles en bouton (.btn-link) suivent le texte. */
    .btn:not(.btn-link) { min-height: 40px; }
    .btn-lg { min-height: 48px; }

    .form-control,
    .form-select { min-height: 44px; }

    /* Sous 16 px, Safari iOS zoome a la mise au point du champ et laisse la
       page decalee. C'est la seule raison de figer cette taille. */
    .form-control,
    .form-select,
    input[type="text"], input[type="email"], input[type="password"],
    input[type="tel"], input[type="number"], input[type="date"],
    input[type="search"], input[type="url"],
    textarea, select { font-size: 16px; }

    /* Ce n'est pas la case qu'on vise mais la zone autour : on donne au bloc
       la hauteur d'une cible et au libelle de quoi la remplir. */
    .form-check-input { width: 1.35em; height: 1.35em; }
    .form-check {
        padding-left: 2em;
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    .form-check-label { padding: 10px 0; flex: 1; cursor: pointer; }

    /* La croix de fermeture d'une fenetre modale : principale sortie, elle
       doit etre atteignable sans viser. */
    .btn-close { width: 1.4em; height: 1.4em; padding: 12px; background-size: 1em; }

    /* Une fenetre modale occupe l'ecran plutot que de flotter au centre. */
    .modal-dialog { margin: 8px; }
    .modal-body { padding: 14px; }

    /* Un tableau laisse en tableau defile seul, sans etirer la page. */
    .table-responsive { -webkit-overflow-scrolling: touch; }
}

/* ==========================================================================
   Application installable — barres d'information
   ==========================================================================
   Bandeau d'installation, de mise a jour et d'etat du reseau. Poses en bas
   plutot qu'en haut : le haut de l'ecran est occupe par la barre du systeme,
   et le pouce atteint plus facilement le bas.
   ========================================================================== */
.cz-barre-pwa,
.cz-hors-ligne {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 2000;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 12px 14px;
    border-radius: 10px;

    font-size: 14px;
    line-height: 1.35;
    color: #fff;

    box-shadow: 0 6px 24px rgba(0, 0, 0, .22);

    /* Sur un telephone a encoche, le bas de l'ecran est partiellement occupe
       par la barre de geste du systeme. */
    margin-bottom: env(safe-area-inset-bottom, 0);
}

.cz-barre-pwa { background: #E91E8C; }
.cz-barre-pwa span { flex: 1; }
.cz-barre-pwa .btn-light { white-space: nowrap; }

.cz-hors-ligne { background: #4b5563; justify-content: center; }

/* Deux bandeaux simultanes se recouvriraient. */
.cz-hors-ligne ~ .cz-barre-pwa { bottom: 72px; }

/* ==========================================================================
   Mobile — sous-formulaires repetables
   ==========================================================================
   Les lignes de document et les lignes d'exoneration sont dimensionnees pour
   un ecran large : largeurs figees en style inline, champs cote a cote. Sur un
   telephone, chaque champ y tombe sous 120 px, ce qui rend la saisie penible
   et masque la valeur des le premier chiffre.

   Mesure a 390 px : 6 champs sous 120 px par ligne de facture, 3 par ligne
   d'exoneration.
   ========================================================================== */
@media (max-width: 767.98px) {

    /* --- Lignes de devis et de facture --- */

    /* Ligne 1 : la description prend toute la largeur, les commandes de
       reordonnancement et de suppression passent dessous. */
    .item-row > .d-flex:first-of-type { flex-wrap: wrap; }
    .item-row .item-description {
        flex: 1 1 100%;
        order: 2;
        min-width: 0;
    }

    /* Ligne 2 : un champ par ligne. Les min-width et max-width poses en style
       inline sont neutralises — ils valent pour un ecran large, et seul
       !important peut les surcharger. */
    .item-row > .d-flex:last-of-type { padding-left: 0 !important; }
    .item-row > .d-flex:last-of-type > div {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    /* Le total revenait a droite par ms-auto : il se lit mieux aligne comme
       le reste. */
    .item-row .ms-auto {
        margin-left: 0 !important;
        text-align: left !important;
    }

    /* Le selecteur de type de remise gardait 62 px, ce qui coupait « Mnt ». */
    .item-row .item-discount-type { max-width: 90px !important; }

    /* L'alerte de stock etait decalee pour s'aligner sous la description. */
    .item-row .item-stock-alert { margin-left: 0 !important; }

    /* --- Champs a l'interieur d'une liste passee en cartes --- */

    /*
     * Une cellule de carte reserve 38 % de sa largeur au libelle. C'est bien
     * pour une valeur a lire, mauvais pour un champ a remplir : il ne reste
     * que 178 px. Quand la cellule contient une commande de formulaire, le
     * libelle passe donc au-dessus et le champ prend toute la largeur.
     */
    .table-cards td:has(.form-control),
    .table-cards td:has(.form-select),
    .table-cards td:has(textarea) {
        padding-left: 14px;
        text-align: left !important;
    }

    .table-cards td:has(.form-control)::before,
    .table-cards td:has(.form-select)::before,
    .table-cards td:has(textarea)::before {
        position: static;
        display: block;
        width: auto;
        margin-bottom: 6px;
    }
}

/* ==========================================================================
   Retour visuel pendant une navigation
   ==========================================================================
   Barre de progression en haut de l'ecran. Pas de pourcentage : le serveur ne
   dit pas ou il en est, et une barre qui pretendrait le savoir mentirait. Elle
   avance vite au debut puis ralentit — l'attente parait plus courte qu'avec
   une progression lineaire.

   Hors media query : l'attente existe aussi sur un poste fixe.
   ========================================================================== */
.cz-progression {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 3000;
    background: transparent;
    pointer-events: none;
}

.cz-progression-trait {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #E91E8C, #f5a8d4);
    box-shadow: 0 0 8px rgba(233, 30, 140, .6);
    transition: width 8s cubic-bezier(.05, .8, .2, 1);
}

.cz-progression-active .cz-progression-trait {
    /* Jamais 100 % : la barre ne se remplit qu'au chargement effectif de la
       page suivante, qui la fait disparaitre. */
    width: 92%;
}

/* Sur un telephone a encoche, la barre du systeme mord le haut de l'ecran. */
@supports (top: env(safe-area-inset-top)) {
    .cz-progression { top: env(safe-area-inset-top, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .cz-progression-trait { transition: none; width: 92%; }
}

/* ==========================================================================
   Editeur d'image — recadrage, zoom, rotation
   ==========================================================================
   Hors media query : l'ajustement sert autant sur un poste fixe que sur un
   telephone. Seule la hauteur de la zone s'adapte.
   ========================================================================== */
.cz-editeur-zone {
    max-height: 55vh;
    background: #1f2937;
    border-radius: 8px;
    overflow: hidden;
}

/* Cropper.js exige que l'image soit en bloc et de largeur pleine : sans cela
   il calcule un cadre decale de la position reelle. */
.cz-editeur-zone > img {
    display: block;
    max-width: 100%;
}

.cz-editeur-outils .btn { min-width: 42px; }

@media (max-width: 767.98px) {
    /* Sur un telephone, la fenetre occupe l'ecran : la zone d'image peut
       prendre davantage de hauteur, le pouce restant sur les outils du bas. */
    .cz-editeur-zone { max-height: 48vh; }
    .cz-editeur-outils { gap: 8px !important; }
}