/* Découpage en sous-réseaux — feuille propre à l'outil. Le socle partagé
   (/commun/outil.css) est chargé avant elle. */

main {
  max-width: 760px;
}

h1 {
  margin: 12px 0 28px;
}

h2 {
  margin: 28px 0 10px;
  color: var(--discret);
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

code {
  font-family: inherit;
  word-break: break-all;
}

/* --- La saisie ------------------------------------------------------------ */

.etiquette {
  display: block;
  margin-bottom: 8px;
  color: var(--discret);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.champ {
  display: block;
  width: 100%;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: 10px;
  color: var(--texte);
  font-family: inherit;
  font-size: 1.15rem;
}

.champ:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.champ[aria-invalid="true"] { border-color: var(--faible); }

.exemples {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 10px 0 0;
  color: var(--discret);
  font-size: 0.8rem;
}

.exemples button {
  padding: 0;
  background: none;
  border: 0;
  color: var(--accent);
  font: inherit;
  cursor: pointer;
}

.exemples button:hover, .exemples button:focus-visible { text-decoration: underline; }

.erreur {
  margin: 12px 0 0;
}

/* Le champ court (nombre, préfixe) et la zone des besoins. */
.champ.court { max-width: 12ch; }

.champ.zone {
  font-size: 0.95rem;
  line-height: 1.5;
  resize: vertical;
}

/* --- Le mode de découpage -------------------------------------------------- */

.modes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: 22px 0 14px;
  padding: 0;
  border: 0;
}

.modes legend { width: 100%; padding: 0; }
.modes label { cursor: pointer; }
.modes input, .option input { accent-color: var(--accent); }

.option {
  display: block;
  margin-top: 10px;
  color: var(--discret);
  font-size: 0.8rem;
  cursor: pointer;
}

.option abbr { text-decoration: none; }

.note-hote { margin: 12px 0 0; color: var(--attention); font-size: 0.9rem; }

/* --- Le résultat ----------------------------------------------------------- */

.resultat { margin-top: 24px; }

.resume { margin: 0 0 12px; }

.remarques p { margin: 0 0 12px; color: var(--attention); font-size: 0.9rem; }

.aide {
  margin: 8px 0 0;
}

/* La barre de répartition : une teinte par sous-réseau, l'espace libre en
   hachures. */
.repartition { margin: 0 0 16px; }

.barre {
  display: flex;
  height: 18px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: 6px;
}

.barre .bloc { flex-grow: 0; flex-shrink: 0; min-width: 2px; }
.barre .bloc + .bloc { box-shadow: inset 1px 0 0 var(--fond); }
.barre .teinte-0 { background: #3ddc84; }
.barre .teinte-1 { background: #2a9d5f; }
.barre .teinte-2 { background: #6be8a6; }
.barre .teinte-3 { background: #1f7a49; }
.barre .libre {
  flex-grow: 1;
  background: repeating-linear-gradient(135deg, var(--surface) 0 4px, var(--filet) 4px 8px);
}

/* Le tableau défile seul sur un écran étroit : la page, elle, ne défile
   jamais de côté. */
.defile {
  overflow-x: auto;
  border: 1px solid var(--filet);
  border-radius: 10px;
}

.defile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.tableau {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  white-space: nowrap;
}

.tableau th, .tableau td { padding: 7px 12px; text-align: left; }
.tableau th { color: var(--discret); font-weight: 500; background: var(--surface); }
.tableau tbody tr + tr td { border-top: 1px solid var(--filet); }
.tableau .cidr { color: var(--accent); }
.tableau .libelle { white-space: normal; min-width: 8ch; }
.tableau .nombre { text-align: right; font-variant-numeric: tabular-nums; }

.boutons { display: flex; flex-wrap: wrap; gap: 0 12px; margin: 0; }

.libres { margin: 0; padding-left: 1.2em; }
.libres li + li { margin-top: 4px; }
.libres .compte { color: var(--discret); font-size: 0.85em; }

/* Zone de copie de secours, hors de l'écran mais pas masquée (un champ
   masqué ne peut pas être sélectionné). */
.hors-ecran { position: fixed; top: 0; left: -9999px; }

.bouton {
  margin-top: 12px;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: var(--accent);
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

/* --- Transparence ---------------------------------------------------------- */

.transparence h2 { margin-top: 0; }
.transparence code { color: var(--discret); font-size: 0.85em; }
.transparence .fichiers li + li { margin-top: 6px; }