/*
| Le strict nécessaire pour que les trois surfaces tiennent debout.
| Tout ce qui est couleur, espacement ou rayon passe par les variables de
| m14r : aucune valeur en dur ici (le moteur charte le relit).
*/
body { margin: 0; font: 16px/1.6 system-ui, sans-serif; }

.socle-tete { display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-md, 16px); padding: var(--space-md, 16px); border-bottom: 1px solid var(--color-bord, #e5e7eb); }
.socle-marque { font-weight: 700; text-decoration: none; color: inherit; }
.socle-nav { display: flex; gap: var(--space-sm, 8px); }
.socle-corps { padding: var(--space-lg, 24px); }
.socle-pied { padding: var(--space-md, 16px); border-top: 1px solid var(--color-bord, #e5e7eb); }
.socle-etroit { max-width: 28rem; }
.socle-form { display: grid; gap: var(--space-sm, 8px); }
.socle-dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-xs, 4px) var(--space-md, 16px); }
.socle-dl dt { font-weight: 600; }

/* La surface se voit : l'administration n'est pas l'espace avec un bouton en plus. */
.surface-admin  .socle-tete { border-bottom-width: 3px; }