/* Base visuelle */
:root{
  --w: 240px;
  --pad: 18px;
  --bd: 6px;
}

body{
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  background: #fff;
  color: #222;
}

h1{ margin: 0 0 16px; }
h2{ margin: 0 0 12px; }

.wrap{
  border: 2px solid #000;
  padding: 14px;
  margin: 0 0 18px;
  background: #f5f5f5;
}

/* Disposition */
.row{
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.stack{
  display: flex;
  flex-direction: column;
}

/* La boîte (Box Model) */
.box{
  width: var(--w);
  padding: var(--pad);
  border: var(--bd) solid #000;
  background: #eaeaea;
}

/* content-box = default : width = contenu seulement */
.content-box{
  box-sizing: content-box;
}

/* border-box : width = total (contenu + padding + border) */
.border-box{
  box-sizing: border-box;
}

/* Un petit badge */
.tag{
  display: inline-block;
  margin-top: 10px;
  padding: 4px 8px;
  border: 2px solid #000;
  background: #fff;
}

/* Démo margin (espace extérieur) */
.margin-demo{
  margin-bottom: 18px; /* espace entre A et B */
}

/* Juste pour mieux voir le contenu */
.box h3{ margin: 0 0 8px; }
.box p{ margin: 0; }
code{ background: #fff; padding: 1px 4px; border: 1px solid #ccc; }