/* ==========================================================================
   devispaysagiste.fr · Styles communs aux trois calculateurs gratuits
   --------------------------------------------------------------------------
   À charger après tokens.css, polices.css, composants.css et vitrine.css.
   Les calculateurs sont des outils : ils suivent le thème du téléphone,
   clair par défaut, comme l'application.
   ========================================================================== */

html { background-color: var(--fond); }

/* ---------- En-tête et mise en page ---------- */
.calcul { padding-top: var(--espace-7); padding-bottom: var(--espace-8); }
.calcul__entete { display: grid; gap: var(--espace-3); max-width: 46rem; margin-bottom: var(--espace-6); }
.calcul__entete .intro strong { color: var(--texte); font-weight: 500; }
.calcul__grille { display: grid; gap: var(--espace-5); align-items: start; }
.calcul__saisie, .calcul__resultats { display: grid; gap: var(--espace-4); min-width: 0; }
@media (min-width: 900px) {
  .calcul__grille { grid-template-columns: minmax(0, 23rem) minmax(0, 1fr); gap: var(--espace-6); }
}

/* ---------- Blocs de saisie ---------- */
.bloc-saisie { display: grid; gap: var(--espace-4); }
.bloc-saisie__titre {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espace-3);
  margin: 0;
  font-family: var(--police-titre);
  font-stretch: var(--titre-largeur);
  font-weight: var(--titre-graisse);
  font-size: 1.0625rem;
}
.bloc-saisie__numero { font-family: var(--police-texte); font-size: var(--taille-legende); font-weight: 400; color: var(--texte-3); font-variant-numeric: tabular-nums; }
.champs-2, .champs-3 { display: grid; gap: var(--espace-3); }
.champs-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.champs-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.champs-3 .saisie--chiffre { padding-left: var(--espace-3); padding-right: 2.2em; }
.champs-3 .champ__unite { right: var(--espace-3); }
.choix--plein { display: flex; }
.choix--plein button { flex: 1; }

/* Champs numériques : sans les petites flèches du navigateur. */
.saisie--chiffre::-webkit-outer-spin-button,
.saisie--chiffre::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.saisie--chiffre[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* Résumé collé en bas de l'écran sur téléphone, pendant la saisie. */
.calcul__resume {
  position: sticky;
  bottom: calc(var(--espace-3) + env(safe-area-inset-bottom, 0px));
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-3);
  min-height: 52px;
  padding: var(--espace-2) var(--espace-4);
  border-radius: var(--rayon-pilule);
  background: var(--texte);
  color: var(--fond);
  font-size: var(--taille-petit);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.calcul__resume b { font-weight: 600; font-size: var(--taille-texte); }
.calcul__resume span:last-child { opacity: 0.8; white-space: nowrap; }
@media (min-width: 900px) { .calcul__resume { display: none; } }

/* ---------- Résultats ---------- */
.resultats { display: grid; gap: var(--espace-5); }
.resultats__entete { display: flex; align-items: baseline; justify-content: space-between; gap: var(--espace-3); }
.resultats__entete h2 { margin: 0; }
.resultats__direct { font-size: var(--taille-legende); color: var(--texte-3); }

.chiffres-cles { display: grid; gap: var(--espace-2); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 520px) { .chiffres-cles { grid-template-columns: 1fr; } }
.chiffre-cle { display: grid; gap: 2px; align-content: start; padding: var(--espace-3) var(--espace-4); border-radius: var(--rayon-champ); background: var(--surface); }
.chiffre-cle--vedette { background: var(--carte); box-shadow: inset 0 0 0 1.5px var(--texte); }
.chiffre-cle__libelle { font-size: var(--taille-legende); color: var(--texte-2); }
.chiffre-cle__valeur { font-size: var(--taille-montant); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chiffre-cle__valeur .unite { margin-left: 4px; font-size: var(--taille-petit); font-weight: 400; letter-spacing: 0; color: var(--texte-2); }
.chiffre-cle__sous { font-size: var(--taille-legende); color: var(--texte-3); font-variant-numeric: tabular-nums; }

/* Coupe schématique (dessinée par le script, à la taille réelle de l'écran). */
.coupe { margin: 0; }
.coupe svg { display: block; width: 100%; height: auto; overflow: visible; }
.coupe text { font-family: var(--police-texte); font-size: 13px; font-variant-numeric: tabular-nums; }
.coupe__sol { stroke: var(--texte); stroke-width: 2; }
.coupe__hachure { stroke: var(--trait-fort); stroke-width: 1; }
.coupe__profil { fill: none; stroke: var(--texte); stroke-width: 2.5; stroke-linejoin: round; }
.coupe__remplissage { fill: var(--surface); }
.coupe__repandue { fill: var(--surface); stroke: var(--texte-3); stroke-width: 1.5; stroke-dasharray: 5 4; }
.coupe__finie { fill: var(--surface-survol); stroke: var(--texte); stroke-width: 2.5; }
.coupe__cote { stroke: var(--texte-2); stroke-width: 1; }
.coupe__mesure { fill: var(--texte); font-weight: 500; }
.coupe__etiquette { fill: var(--texte-2); }
.coupe__etiquette--fort { fill: var(--texte); font-weight: 500; }

/* Rotations de camion ou big bags : une case par chargement. */
.chargements { display: grid; gap: var(--espace-3); padding-top: var(--espace-4); border-top: 1px solid var(--trait); }
.chargements__titre { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--espace-2); font-size: var(--taille-petit); font-weight: 500; }
.chargements__contrainte { font-weight: 400; color: var(--texte-2); }
.bennes, .sacs { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px; }
.benne, .sac {
  position: relative;
  flex: none;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1.5px var(--trait-fort);
}
.benne { width: 40px; height: 28px; }
.sac { width: 28px; height: 34px; }
.benne i, .sac i {
  position: absolute;
  inset: auto 0 0;
  background: color-mix(in srgb, var(--texte) 55%, transparent);
}
.benne-plus, .sac-plus { align-self: center; padding-left: 4px; font-size: var(--taille-petit); color: var(--texte-2); }

/* Coût */
.cout { display: grid; gap: var(--espace-3); }
.detail-cout { font-size: var(--taille-petit); line-height: 2; color: var(--texte-2); font-variant-numeric: tabular-nums; }
.detail-cout span { float: right; color: var(--texte); }
.detail-cout .sep { clear: both; height: 1px; margin: 6px 0; background: var(--trait); }
.cout-total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--espace-2); padding-top: var(--espace-3); border-top: 1px solid var(--trait); clear: both; }
.cout-total__libelle { font-weight: 500; }
.cout-total__montant { font-size: var(--taille-montant-xl); font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.actions { display: flex; flex-wrap: wrap; gap: var(--espace-3); }

/* Répartition des heures (taux horaire) */
.barre { display: flex; height: 36px; overflow: hidden; border-radius: var(--rayon-petit); box-shadow: inset 0 0 0 1px var(--trait); }
.barre div { transition: width var(--duree) var(--courbe); }
.seg-prod { background: var(--texte); }
.seg-improd { background: repeating-linear-gradient(45deg, var(--texte-3) 0 4px, var(--surface-survol) 4px 8px); }
.seg-abs { background: var(--surface); }
.legende-barre { display: flex; flex-wrap: wrap; gap: var(--espace-2) var(--espace-4); font-size: var(--taille-legende); color: var(--texte-2); font-variant-numeric: tabular-nums; }
.legende-barre i { display: inline-block; width: 11px; height: 11px; margin-right: 6px; border-radius: 3px; vertical-align: -1px; box-shadow: inset 0 0 0 1px var(--trait); }
.comparo { display: grid; gap: var(--espace-2); padding: var(--espace-4); border-radius: var(--rayon-champ); background: var(--surface); }
.comparo__titre { font-weight: 500; }
.comparo p { font-size: var(--taille-petit); color: var(--texte-2); }
.comparo b { font-weight: 600; color: var(--texte); font-variant-numeric: tabular-nums; }

/* Note et suite */
.note { display: grid; gap: var(--espace-2); font-size: var(--taille-petit); color: var(--texte-2); }
.note strong { color: var(--texte); font-weight: 500; }
.calcul__confiance { font-size: var(--taille-legende); color: var(--texte-3); }
.calcul__suite { display: grid; gap: var(--espace-3); justify-items: start; margin-top: var(--espace-6); }
.calcul__suite p { color: var(--texte-2); max-width: 52ch; }