/* Outil de calcul de surface (/outils/calcul-surface, charte « Seuil ») : en-tête et calculateur côte à côte au bureau,
   pièces multiples dans un panneau, méthode pas à pas et tableau des chutes. Chargée après catalogue.css. */

/* ---------- En-tête et calculateur ---------- */
.section.outil {
  padding-top: var(--e-5);
}
.outil__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-7);
}
.outil__texte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-5);
}
.outil__titre {
  max-width: 18ch;
}
.outil__chapo {
  max-width: 44ch;
  color: var(--texte-2);
  font-size: var(--fs-chapo);
  line-height: 1.55;
}
.outil__points {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}
.outil__points li {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  font-weight: 500;
}
.outil__calcul {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  container: outil-calcul / inline-size;
}
/* Surface et décor : empilés tant que le panneau est étroit (colonne 7fr au bureau, mobile), côte à côte au-delà.
   Décidé par la largeur du panneau et non de l'écran, pour que le menu des décors ne soit jamais tronqué. */
.outil__calcul .calculateur__saisie {
  grid-template-columns: minmax(0, 1fr);
}
@container outil-calcul (min-width: 40rem) {
  .outil__calcul .calculateur__saisie {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }
}
@media (min-width: 64rem) {
  .section.outil {
    padding-top: var(--e-6);
  }
  .outil__grille {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
    gap: var(--e-8);
  }
  .outil__texte {
    position: sticky;
    top: calc(var(--hauteur-entete) + var(--e-6));
  }
}

/* ---------- Pièces multiples (panneau) ---------- */
.pieces {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  min-width: 0;
  margin: 0;
  border: 0;
  container: pieces / inline-size;
}
.pieces[hidden] {
  display: none;
}
.pieces__titre {
  float: left;
  width: 100%;
  padding: 0;
  font-family: var(--police-titre);
  font-size: var(--fs-h3);
  line-height: 1.2;
}
.pieces__titre + * {
  clear: both;
}
.pieces__aide {
  color: var(--texte-2);
  font-size: var(--fs-petit);
}
.pieces__liste {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}
.pieces__ligne {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas:
    "nom nom retirer"
    "longueur fois largeur";
  align-items: center;
  gap: var(--e-2) var(--e-2);
  padding-bottom: var(--e-3);
  border-bottom: 1px solid var(--trait);
}
.pieces__nom {
  grid-area: nom;
  font-weight: 500;
}
.pieces__champ:first-of-type {
  grid-area: longueur;
}
.pieces__fois {
  grid-area: fois;
  color: var(--texte-2);
}
.pieces__champ + .pieces__fois + .pieces__champ {
  grid-area: largeur;
}
.pieces__champ .champ__saisie {
  width: 100%;
  min-width: 0;
  padding-inline: var(--e-3);
}
.pieces__surface {
  /* Panneau étroit : sur la rangée du nom, à gauche du bouton « Retirer », pour laisser toute la largeur aux deux champs */
  grid-row: 1;
  grid-column: 1 / -1;
  justify-self: end;
  padding-inline-end: calc(var(--hauteur-compacte) + var(--e-3));
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pieces__retirer {
  grid-area: retirer;
  justify-self: end;
  color: var(--texte-2);
}
/* Une seule ligne quand le panneau a la place (et non selon l'écran : au bureau il n'occupe que la colonne 7fr) */
@container pieces (min-width: 34rem) {
  .pieces__ligne {
    grid-template-columns: 5rem minmax(0, 1fr) auto minmax(0, 1fr) minmax(5rem, auto) var(--hauteur-compacte);
    grid-template-areas: "nom longueur fois largeur surface retirer";
    gap: var(--e-3);
  }
  .pieces__surface {
    grid-area: surface;
    padding-inline-end: 0;
  }
}
.pieces__bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
}
.pieces__total {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---------- Méthode et chutes ---------- */
.outil-methode__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-8);
}
.outil-methode__chutes {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
}
.outil-methode__chutes-titre {
  font-size: var(--fs-carte);
}
@media (min-width: 64rem) {
  .outil-methode__grille {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--e-9);
  }
}