/* Nguessan SARL — interface : tons dilués, aucun dégradé, police manuscrite */
@font-face {
  font-family: 'Manuscrite';
  src: local('Gabriola');
}
@font-face {
  /* Repli pour les appareils sans Gabriola (téléphone, Mac) */
  font-family: 'Manuscrite';
  src: url('/lib/kalam/kalam-latin-400-normal.woff2') format('woff2');
  size-adjust: 78%;
  font-weight: 400;
}
@font-face {
  font-family: 'Manuscrite';
  src: url('/lib/kalam/kalam-latin-700-normal.woff2') format('woff2');
  size-adjust: 78%;
  font-weight: 700;
}

:root {
  --fond: #f4f3ee;
  --surface: #ffffff;
  --surface-2: #f9f8f4;
  --ligne: #e5e2d8;
  --ligne-forte: #d4d0c3;
  --encre: #2c2b27;
  --encre-2: #5d5b54;
  --encre-3: #8b887f;
  --accent: #3e6f68;
  --accent-fonce: #2f5852;
  --accent-doux: #e2ede9;
  --bleu: #2f6493; --bleu-doux: #e4edf7;
  --ocre: #8a6414; --ocre-doux: #f7eedc;
  --rouge: #a3473c; --rouge-doux: #f6e4e0;
  --vert: #3c7a46; --vert-doux: #e3f0e5;
  --rayon: 14px;
  --ombre: 0 1px 2px rgba(44, 43, 39, .05), 0 4px 16px rgba(44, 43, 39, .04);
  --police: 'Manuscrite', Gabriola, 'Segoe Print', cursive;
  --taille: 21px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--fond);
  color: var(--encre);
  font-family: var(--police);
  font-size: var(--taille);
  line-height: 1.15;
  font-variant-numeric: lining-nums tabular-nums;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.1; }
h1 { font-size: 1.9rem; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.2rem; }
p { margin: 0; }
a { color: var(--accent); }
.bi { line-height: 1; vertical-align: -0.08em; }
.muet { color: var(--encre-3); }
.second { color: var(--encre-2); }
.fort { font-weight: 700; }
.droite { text-align: right; }
.cache { display: none !important; }

/* ---------- Boutons et champs ---------- */
button, input, select, textarea { font: inherit; color: inherit; }
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  border: 1px solid var(--ligne-forte); background: var(--surface); color: var(--encre);
  padding: .42em 1em; border-radius: 10px; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, transform .05s;
}
.bouton:hover { background: var(--surface-2); border-color: var(--encre-3); }
.bouton:active { transform: translateY(1px); }
.bouton.principal { background: var(--accent); border-color: var(--accent); color: #fff; }
.bouton.principal:hover { background: var(--accent-fonce); }
.bouton.danger { color: var(--rouge); border-color: #e3c2bc; }
.bouton.danger:hover { background: var(--rouge-doux); }
.bouton.discret { border-color: transparent; background: transparent; color: var(--encre-2); }
.bouton.discret:hover { background: var(--surface-2); }
.bouton.icone { padding: .42em .6em; }
.bouton:disabled { opacity: .5; cursor: not-allowed; }

.champ { display: flex; flex-direction: column; gap: .25em; text-align: left; }
.champ label, .etiquette { color: var(--encre-2); font-size: .9em; }
.saisie, .champ input, .champ select, .champ textarea {
  width: 100%; border: 1px solid var(--ligne-forte); background: var(--surface);
  border-radius: 10px; padding: .4em .7em; outline: none; transition: border-color .15s, box-shadow .15s;
}
.saisie:focus, .champ input:focus, .champ select:focus, .champ textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-doux);
}
.champ textarea { min-height: 3.5em; resize: vertical; }
.case { display: flex; align-items: center; gap: .5em; cursor: pointer; }
.case input { width: 1.05em; height: 1.05em; accent-color: var(--accent); }
.grille-champs { display: grid; grid-template-columns: 1fr 1fr; gap: .8em 1em; }
.grille-champs .large { grid-column: 1 / -1; }

/* Contrôle segmenté */
.segments { display: inline-flex; background: var(--surface-2); border: 1px solid var(--ligne); border-radius: 11px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.segments button { border: 0; background: transparent; padding: .28em .85em; border-radius: 8px; cursor: pointer; color: var(--encre-2); }
.segments button.actif { background: var(--surface); color: var(--encre); box-shadow: 0 1px 2px rgba(0,0,0,.08); font-weight: 700; }

/* ---------- Étiquettes ---------- */
.pastille { display: inline-flex; align-items: center; gap: .35em; padding: .1em .6em; border-radius: 99px; font-size: .85em; white-space: nowrap; }
.pastille.vert { background: var(--vert-doux); color: var(--vert); }
.pastille.ocre { background: var(--ocre-doux); color: var(--ocre); }
.pastille.rouge { background: var(--rouge-doux); color: var(--rouge); }
.pastille.bleu { background: var(--bleu-doux); color: var(--bleu); }
.pastille.gris { background: var(--surface-2); color: var(--encre-2); border: 1px solid var(--ligne); }
.point { width: .6em; height: .6em; border-radius: 50%; display: inline-block; flex: none; }

/* ---------- Cartes ---------- */
.carte { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 1.1em 1.2em; min-width: 0; }
.carte-tete { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-bottom: .8em; flex-wrap: wrap; }
.carte-tete h3 { display: flex; align-items: center; gap: .45em; }
.carte-tete h3 .bi { color: var(--accent); }
.vide { text-align: center; color: var(--encre-3); padding: 2em 1em; }
.vide .bi { font-size: 2em; display: block; margin-bottom: .3em; color: var(--ligne-forte); }

/* ---------- Structure de l'application ---------- */
.appli { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
.menu {
  background: var(--surface); border-right: 1px solid var(--ligne); padding: 1.2em .9em;
  display: flex; flex-direction: column; gap: .2em; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.marque { display: flex; align-items: center; gap: .6em; padding: .2em .5em 1.1em; }
.marque .logo { width: 42px; height: 42px; border-radius: 12px; background: var(--accent-doux); color: var(--accent); display: grid; place-items: center; font-size: 1.3em; flex: none; }
.marque strong { display: block; font-size: 1.25em; }
.marque span { color: var(--encre-3); font-size: .85em; }
.menu a {
  display: flex; align-items: center; gap: .7em; padding: .45em .75em; border-radius: 10px;
  color: var(--encre-2); text-decoration: none; transition: background .15s, color .15s;
}
.menu a .bi { font-size: 1.05em; width: 1.2em; text-align: center; }
.menu a:hover { background: var(--surface-2); color: var(--encre); }
.menu a.actif { background: var(--accent-doux); color: var(--accent-fonce); font-weight: 700; }
.menu .compteur { margin-left: auto; min-width: 1.5em; height: 1.5em; padding: 0 .4em; border-radius: 99px; background: var(--ocre-doux); color: var(--ocre); font-size: .8em; font-weight: 700; display: grid; place-items: center; }
.menu .titre-groupe { color: var(--encre-3); font-size: .8em; padding: .9em .75em .25em; text-transform: uppercase; letter-spacing: .06em; }
.menu .pied { margin-top: auto; padding-top: 1em; border-top: 1px solid var(--ligne); }

.principal-zone { min-width: 0; display: flex; flex-direction: column; }
.barre {
  position: sticky; top: 0; z-index: 20; background: rgba(244, 243, 238, .92); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--ligne); padding: .7em 1.6em; display: flex; align-items: center; gap: 1em;
}
.barre h1 { font-size: 1.6rem; flex: 1; display: flex; align-items: center; gap: .5em; }
.barre .ouvrir-menu { display: none; }
.contenu { padding: 1.4em 1.6em 3em; display: flex; flex-direction: column; gap: 1.2em; max-width: 1500px; width: 100%; }

/* Indicateur de synchronisation */
.synchro { display: inline-flex; align-items: center; gap: .45em; padding: .25em .75em; border-radius: 99px; border: 1px solid var(--ligne); background: var(--surface); cursor: pointer; font-size: .9em; white-space: nowrap; }
.synchro .point { width: .55em; height: .55em; }
.synchro.en-ligne .point { background: #4f9a5b; }
.synchro.hors-ligne .point { background: #c98a2c; }
.synchro.erreur .point { background: #c0574b; }

/* Filtres */
.filtres { display: flex; align-items: center; gap: .7em; flex-wrap: wrap; }
.filtres .saisie { width: auto; }
.filtres .separe { flex: 1; }

/* ---------- Indicateurs ---------- */
.indicateurs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1em; }
.indicateur { display: flex; flex-direction: column; gap: .3em; }
.indicateur .libelle { color: var(--encre-2); display: flex; align-items: center; gap: .45em; }
.indicateur .libelle .bi { width: 1.8em; height: 1.8em; border-radius: 9px; display: grid; place-items: center; font-size: .95em; }
.indicateur .valeur { font-size: 2rem; font-weight: 700; letter-spacing: -.01em; }
.indicateur .comparaison { font-size: .88em; color: var(--encre-3); display: flex; align-items: center; gap: .35em; flex-wrap: wrap; }
.hausse { color: var(--vert); }
.baisse { color: var(--rouge); }
.ton-bleu { background: var(--bleu-doux); color: var(--bleu); }
.ton-ocre { background: var(--ocre-doux); color: var(--ocre); }
.ton-vert { background: var(--vert-doux); color: var(--vert); }
.ton-accent { background: var(--accent-doux); color: var(--accent); }
.ton-rouge { background: var(--rouge-doux); color: var(--rouge); }

.grille-2 { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 1.2em; }
.grille-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2em; }
.grille-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1em; }
.zone-graphe { position: relative; height: 290px; }

/* Barres horizontales (répartitions) */
.barres { display: flex; flex-direction: column; gap: .7em; }
.barre-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2em .8em; align-items: center; }
.barre-ligne .piste { grid-column: 1 / -1; height: 9px; background: var(--surface-2); border-radius: 99px; overflow: hidden; border: 1px solid var(--ligne); }
.barre-ligne .remplissage { height: 100%; border-radius: 99px; }
.barre-ligne .nom { display: flex; align-items: center; gap: .45em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Objectifs */
.objectif { display: flex; flex-direction: column; gap: .4em; padding: .8em 0; border-bottom: 1px dashed var(--ligne); }
.objectif:last-child { border-bottom: 0; }
.objectif .haut { display: flex; justify-content: space-between; gap: .5em; }
.progression { height: 12px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--ligne); overflow: hidden; }
.progression div { height: 100%; background: var(--accent); border-radius: 99px; transition: width .6s ease; }

/* Fil des ventes */
.fil { display: flex; flex-direction: column; }
.fil-ligne { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .7em; align-items: center; padding: .55em 0; border-bottom: 1px solid var(--ligne); }
.fil-ligne:last-child { border-bottom: 0; }
.fil-ligne .heure { color: var(--encre-3); font-size: .85em; width: 3.2em; }
.fil-ligne .quoi { min-width: 0; }
.fil-ligne .quoi div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fil-ligne .quoi small { color: var(--encre-3); font-size: .82em; }
.barre-texte { text-decoration: line-through; color: var(--encre-3); }

/* ---------- Tableaux ---------- */
.tableau-conteneur { overflow-x: auto; margin: 0 -1.2em; padding: 0 1.2em; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-weight: 700; color: var(--encre-2); font-size: .9em; padding: .5em .7em; border-bottom: 1px solid var(--ligne-forte); white-space: nowrap; }
td { padding: .5em .7em; border-bottom: 1px solid var(--ligne); vertical-align: middle; }
tbody tr { transition: background .12s; }
tbody tr.cliquable { cursor: pointer; }
tbody tr.cliquable:hover { background: var(--surface-2); }
td.montant, th.montant { text-align: right; white-space: nowrap; }
tr.sous-total td { background: var(--surface-2); font-weight: 700; }
tr.total-general td { background: var(--accent-doux); font-weight: 700; color: var(--accent-fonce); }
tr.annulee td { color: var(--encre-3); }

/* Cartes d'activités et d'employés */
.carte-activite { cursor: pointer; transition: border-color .15s, transform .15s; display: flex; flex-direction: column; gap: .6em; }
.carte-activite:hover { border-color: var(--ligne-forte); transform: translateY(-2px); }
/* Activités : 5 premières visibles, les autres se déroulent à la demande */
.grille-activites { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grille-activites .en-plus { display: none; }
.grille-activites.deroulee .en-plus { display: flex; animation: apparait .25s ease both; }
.grille-activites .description { font-size: .88em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.grille-activites .haut-carte { display: flex; align-items: flex-start; justify-content: space-between; }
.grille-activites .nom-activite { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grille-activites .description { min-height: 2.3em; }
.grille-activites .chiffres { margin-top: auto; }
.derouler { display: flex; justify-content: center; margin-top: -.3em; }
.carte-activite.choisie { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-doux); }
.icone-ronde { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-size: 1.35em; flex: none; }
.entete-ligne { display: flex; align-items: center; gap: .8em; }
.entete-ligne > div { min-width: 0; }
.entete-ligne > div:not(.icone-ronde) { flex: 1; }
.chiffres { display: flex; gap: 1.4em; color: var(--encre-2); font-size: .92em; flex-wrap: wrap; }
.chiffres strong { color: var(--encre); display: block; font-size: 1.15em; }

/* Résumé (rapport mensuel) */
.resume { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .8em; }
.resume div { background: var(--surface-2); border: 1px solid var(--ligne); border-radius: 12px; padding: .7em .9em; }
.resume span { display: block; color: var(--encre-2); font-size: .88em; }
.resume strong { font-size: 1.35em; }

/* ---------- Écran de connexion ---------- */
.ecran-connexion { min-height: 100vh; display: grid; place-items: center; padding: 1.5em; }
.boite-connexion { width: 100%; max-width: 430px; display: flex; flex-direction: column; gap: 1.1em; padding: 2em 2em 1.6em; }
.boite-connexion .marque { padding: 0 0 .4em; }
.boite-connexion .marque .logo { width: 52px; height: 52px; font-size: 1.6em; }
.boite-connexion .bouton.principal { padding: .6em 1em; }
.note { background: var(--surface-2); border: 1px solid var(--ligne); border-radius: 11px; padding: .7em .9em; color: var(--encre-2); font-size: .9em; display: flex; gap: .6em; }
.note .bi { color: var(--accent); }

/* ---------- Caisse (employé) ---------- */
.caisse { display: grid; grid-template-columns: minmax(0, 1fr) 400px; min-height: calc(100vh - 62px); }
.caisse-services { padding: 1.3em 1.6em 2em; display: flex; flex-direction: column; gap: 1em; min-width: 0; }
.caisse-journee { background: var(--surface); border-left: 1px solid var(--ligne); padding: 1.3em 1.3em 2em; display: flex; flex-direction: column; gap: 1em; position: sticky; top: 62px; height: calc(100vh - 62px); overflow-y: auto; }
.tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: .8em; }
.tuile {
  text-align: left; background: var(--surface); border: 1px solid var(--ligne); border-radius: 13px; padding: .8em .9em;
  cursor: pointer; display: flex; flex-direction: column; gap: .35em; min-height: 98px; position: relative;
  transition: border-color .15s, transform .12s, box-shadow .15s;
}
.tuile:hover { border-color: var(--ligne-forte); box-shadow: var(--ombre); transform: translateY(-2px); }
.tuile:active { transform: scale(.98); }
.tuile .bande { position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; }
.tuile .intitule { font-weight: 700; line-height: 1.1; }
.tuile .prix { margin-top: auto; color: var(--encre-2); }
.tuile .prix strong { color: var(--encre); }
.total-jour { background: var(--accent-doux); border-radius: 14px; padding: 1em 1.1em; }
.total-jour span { color: var(--accent-fonce); }
.total-jour strong { display: block; font-size: 2.3rem; color: var(--accent-fonce); }
.liste-modes { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; }
.liste-modes div { background: var(--surface-2); border: 1px solid var(--ligne); border-radius: 10px; padding: .45em .7em; }
.liste-modes span { display: block; font-size: .82em; color: var(--encre-2); }
.bandeau { border-radius: 12px; padding: .7em 1em; display: flex; gap: .6em; align-items: center; }

/* ---------- Fenêtres (SweetAlert2) ---------- */
.swal2-popup.fenetre { font-family: var(--police); font-size: var(--taille); border-radius: 18px; padding: 1.4em 1.4em 1.2em; color: var(--encre); background: var(--surface); }
.swal2-popup.fenetre .swal2-title { font-size: 1.5rem; color: var(--encre); padding: .2em .4em 0; text-align: left; }
.swal2-popup.fenetre .swal2-html-container { margin: 1em .4em 0; text-align: left; font-size: 1em; color: var(--encre); overflow: visible; }
.swal2-popup.fenetre .swal2-actions { justify-content: flex-end; width: 100%; margin-top: 1.2em; padding: 0 .4em; gap: .5em; }
.swal2-popup.fenetre .swal2-validation-message { font-size: .9em; background: var(--rouge-doux); color: var(--rouge); border-radius: 10px; margin: 1em .4em 0; }
.swal2-popup.fenetre .swal2-icon { transform: scale(.75); margin: .4em auto 0; }
.swal2-popup.fenetre.centre .swal2-title, .swal2-popup.fenetre.centre .swal2-html-container { text-align: center; }
.swal2-popup.swal2-toast.fenetre { font-size: 19px; padding: .6em 1em; border-radius: 12px; }
.swal2-popup.swal2-toast.fenetre .swal2-title { font-size: 1em; margin: 0 .5em; }
.swal2-popup.fenetre .swal2-timer-progress-bar { background: var(--accent); }
div:where(.swal2-container).swal2-backdrop-show { background: rgba(44, 43, 39, .35); }
.quantite { display: flex; align-items: center; gap: .5em; }
.quantite input { text-align: center; font-size: 1.3em; font-weight: 700; }
.quantite .bouton { width: 2.4em; height: 2.4em; padding: 0; font-size: 1.1em; }
.recap-prix { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px dashed var(--ligne-forte); padding-top: .7em; margin-top: .3em; }
.recap-prix strong { font-size: 1.9rem; color: var(--accent-fonce); }
.choix-modes { display: grid; grid-template-columns: repeat(auto-fill, minmax(115px, 1fr)); gap: .45em; }
.choix-modes label { border: 1px solid var(--ligne-forte); border-radius: 10px; padding: .4em .6em; cursor: pointer; display: flex; align-items: center; gap: .4em; transition: background .12s, border-color .12s; }
.choix-modes input { display: none; }
.choix-modes label:has(input:checked) { border-color: var(--accent); background: var(--accent-doux); color: var(--accent-fonce); font-weight: 700; }
.choix-activites { display: grid; grid-template-columns: 1fr 1fr; gap: .4em; }
.details { display: grid; grid-template-columns: auto 1fr; gap: .35em 1.2em; }
.details dt { color: var(--encre-2); }
.details dd { margin: 0; text-align: right; }
.palette-couleurs { display: flex; gap: .45em; flex-wrap: wrap; }
.palette-couleurs label { width: 2em; height: 2em; border-radius: 9px; cursor: pointer; border: 2px solid transparent; }
.palette-couleurs input { display: none; }
.palette-couleurs label:has(input:checked) { border-color: var(--encre); box-shadow: inset 0 0 0 2px #fff; }
.choix-icones { display: grid; grid-template-columns: repeat(8, 1fr); gap: .35em; }
.choix-icones label { border: 1px solid var(--ligne); border-radius: 9px; display: grid; place-items: center; height: 2.1em; cursor: pointer; color: var(--encre-2); }
.choix-icones input { display: none; }
.choix-icones label:has(input:checked) { background: var(--accent-doux); border-color: var(--accent); color: var(--accent-fonce); }

/* Apparition fluide */
.apparition { animation: apparait .25s ease both; }
@keyframes apparait { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Adaptation écrans ---------- */
@media (max-width: 1200px) {
  .grille-activites { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .indicateurs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille-2, .grille-3 { grid-template-columns: minmax(0, 1fr); }
  .caisse { grid-template-columns: minmax(0, 1fr) 340px; }
}
@media (max-width: 900px) {
  .appli { grid-template-columns: 1fr; }
  .menu { position: fixed; z-index: 50; left: 0; top: 0; width: 270px; transform: translateX(-100%); transition: transform .25s ease; box-shadow: var(--ombre); }
  .menu.ouvert { transform: none; }
  .voile { position: fixed; inset: 0; background: rgba(44, 43, 39, .3); z-index: 40; }
  .barre { padding: .6em 1em; }
  .barre .ouvrir-menu { display: inline-flex; }
  .barre h1 { font-size: 1.35rem; }
  .contenu { padding: 1em 1em 3em; }
  .caisse { grid-template-columns: 1fr; }
  .caisse-journee { position: static; height: auto; border-left: 0; border-top: 1px solid var(--ligne); }
  .caisse-services { padding: 1em; }
  .synchro .texte { display: none; }
}
@media (max-width: 760px) {
  .grille-activites { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  :root { --taille: 19px; }
  .grille-activites { grid-template-columns: minmax(0, 1fr); }
  .indicateurs { grid-template-columns: minmax(0, 1fr); }
  .indicateur .valeur { font-size: 1.7rem; }
  .grille-champs, .choix-activites { grid-template-columns: 1fr; }
  .tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filtres .separe { display: none; }
  .filtres { gap: .5em; }
  .filtres .segments { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .filtres input[type=date] { flex: 1; min-width: 0; width: 40%; }
  .filtres select.saisie { width: 100%; }
  .carte { padding: 1em; }
}

@media print {
  .menu, .barre, .filtres, .bouton { display: none !important; }
  .appli { display: block; }
  .carte { box-shadow: none; border: 0; }
  body { background: #fff; }
}
.quantite input::-webkit-inner-spin-button, .quantite input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.quantite input { -moz-appearance: textfield; }