@font-face { font-family: "Roboto"; font-weight: 400; font-style: normal; font-display: swap; src: url(/fonts/Roboto-Regular.ttf) format("truetype"); }
@font-face { font-family: "Roboto"; font-weight: 500; font-style: normal; font-display: swap; src: url(/fonts/Roboto-Medium.ttf) format("truetype"); }
@font-face { font-family: "Roboto"; font-weight: 700; font-style: normal; font-display: swap; src: url(/fonts/Roboto-Bold.ttf) format("truetype"); }
@font-face { font-family: "Roboto"; font-weight: 900; font-style: normal; font-display: swap; src: url(/fonts/Roboto-Black.ttf) format("truetype"); }
/* POC, publication des actes (Toulouse Métropole). Feuille reprise des maquettes v2 validées.
   Identité reprise de toulouse.fr (constat du 24/10/2026) : Roboto, titres très gras, texte noir,
   accent brique, fond crème, angles droits. Neutres teintés vers la brique. */
:root {
  --paper: oklch(0.985 0.004 60);
  --surface: oklch(0.997 0.002 60);
  --sunk: oklch(0.955 0.006 55);
  --cream: oklch(0.955 0.022 62);
  --cream-2: oklch(0.92 0.032 58);
  --ink: oklch(0.21 0.008 40);
  --ink-2: oklch(0.39 0.01 40);
  --ink-3: oklch(0.45 0.01 40);
  --rule: oklch(0.86 0.008 50);
  --rule-2: oklch(0.925 0.006 50);
  --brick: oklch(0.62 0.165 38);       /* #D8522A, décor et repères */
  --brick-ink: oklch(0.5 0.155 36);    /* texte, liens, boutons (contraste > 5:1) */
  --brick-soft: oklch(0.945 0.03 45);
  --ok: oklch(0.47 0.1 150);
  --ok-soft: oklch(0.95 0.03 150);
  --warn: oklch(0.5 0.1 70);
  --warn-soft: oklch(0.955 0.045 85);
  --err: oklch(0.47 0.18 22);
  --err-soft: oklch(0.955 0.025 20);
  --mark: oklch(0.93 0.11 95);
  --night: oklch(0.24 0.012 40);
  --focus: 0 0 0 2px var(--surface), 0 0 0 5px var(--ink);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.2; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--brick-ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:focus-visible, button:focus-visible, .btn:focus-visible { outline: none; box-shadow: var(--focus); }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 13px; }
.muted { color: var(--ink-3); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Bandeau du POC, en haut de chaque écran */
.demo {
  background: var(--sunk);
  border-bottom: 1px solid var(--rule);
  color: var(--ink-2);
  font-size: 12.5px;
  padding: 6px 40px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.demo strong { font-weight: 500; color: var(--ink); }

/* Boutons : angles droits, comme toulouse.fr */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 14px/1 "Roboto", sans-serif;
  padding: 10px 16px;
  border: 1px solid var(--ink);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.btn.primary { background: var(--brick-ink); border-color: var(--brick-ink); color: var(--surface); }
.btn.quiet { border-color: var(--rule); }
.btn.sm { padding: 7px 11px; font-size: 13px; }
.btn.lg { padding: 13px 20px; font-size: 15px; }
.link-btn { font: 500 14px "Roboto", sans-serif; color: var(--brick-ink); background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* États : un carré de couleur et un libellé, jamais la couleur seule */
.st { display: inline-flex; align-items: baseline; gap: 7px; font-size: 13.5px; color: var(--ink); white-space: nowrap; }
.st::before { content: ""; width: 8px; height: 8px; background: var(--ink-3); flex: none; transform: translateY(-1px); }
.st.ok::before { background: var(--ok); }
.st.warn::before { background: oklch(0.72 0.14 75); }
.st.err::before { background: var(--err); }
.st.err { color: var(--err); font-weight: 500; }
.st.brick::before { background: var(--brick); }

/* Champs */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label, .label { font-size: 13.5px; font-weight: 500; color: var(--ink); }
.field .hint { font-size: 12.5px; color: var(--ink-3); }
.input {
  font: 400 15px "Roboto", sans-serif; color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--ink-3);
  padding: 9px 12px;
  min-height: 42px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.input.select::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2); transform: rotate(45deg) translateY(-3px); flex: none; }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; }
.box { width: 18px; height: 18px; border: 1.5px solid var(--ink-2); background: var(--surface); flex: none; margin-top: 2px; display: grid; place-items: center; }
.box.on { background: var(--brick-ink); border-color: var(--brick-ink); }
.box.on::after { content: ""; width: 5px; height: 9px; border-right: 2px solid var(--surface); border-bottom: 2px solid var(--surface); transform: rotate(45deg) translate(-1px, -1px); }
.radio { width: 18px; height: 18px; border: 1.5px solid var(--ink-2); border-radius: 50%; flex: none; margin-top: 2px; display: grid; place-items: center; background: var(--surface); }
.radio.on::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brick-ink); }

/* Tableaux à filets */
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font-weight: 500; font-size: 12.5px; color: var(--ink-3); padding: 0 12px 8px; border-bottom: 1px solid var(--ink); white-space: nowrap; }
.tbl td { padding: 12px; border-bottom: 1px solid var(--rule-2); vertical-align: top; }
.tbl th:first-child, .tbl td:first-child { padding-left: 0; }
.tbl th:last-child, .tbl td:last-child { padding-right: 0; }
.tbl .ref { font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
.tbl .t { max-width: 520px; }
.tbl .ref.long { white-space: normal; word-break: normal; overflow-wrap: anywhere; font-size: 12.5px; max-width: 160px; }

/* ===== Back-office =====
   Chaque espace a sa couleur de repère (réglée par l'administrateur principal) : bandeau, onglet actif.
   Les boutons du back-office restent neutres, la brique est réservée au front-office de la Ville. */
.bo { --space: var(--brick); }
.bo.sp-dgeep { --space: oklch(0.7 0.13 75); }
.bo.sp-metro { --space: oklch(0.52 0.09 250); }
.bo.sp-ccas { --space: oklch(0.55 0.1 160); }
.bo.sp-all { --space: oklch(0.6 0.01 50); }
.bo .btn.primary { background: var(--night); border-color: var(--night); }
.bo .box.on { background: var(--night); border-color: var(--night); }
.bo .radio.on::after { background: var(--night); }
.swatch { display: inline-block; width: 12px; height: 12px; background: var(--space); flex: none; }
.skip { position: absolute; left: 40px; top: 6px; background: var(--surface); color: var(--ink); padding: 8px 12px; font-weight: 500; box-shadow: var(--focus); z-index: 2; }
.is-focus { box-shadow: var(--focus) !important; }
.bo-top {
  background: var(--night); color: oklch(0.93 0.006 60);
  border-bottom: 4px solid var(--space);
  display: flex; align-items: center; gap: 28px;
  padding: 0 40px; height: 56px;
}
.bo-top .app { font-weight: 700; font-size: 16px; letter-spacing: -.005em; color: var(--surface); }
.bo-top .app span { display: block; font-weight: 400; font-size: 12px; color: oklch(0.75 0.01 50); letter-spacing: 0; }
.bo-top .space { display: flex; align-items: center; gap: 10px; font-size: 13px; color: oklch(0.78 0.01 50); }
.bo-top .space .input .swatch { margin-right: 2px; }
.bo-top .space .input { justify-content: flex-start; background: transparent; border-color: oklch(0.5 0.01 50); color: var(--surface); min-height: 34px; padding: 5px 12px; font-size: 14px; }
.bo-top .space .input.select::after { border-color: oklch(0.8 0.01 50); margin-left: 10px; }
.bo-top .who { margin-left: auto; font-size: 13.5px; text-align: right; line-height: 1.3; }
.bo-top .who small { display: block; color: oklch(0.75 0.01 50); font-size: 12px; }
.bo-top .who .out { color: oklch(0.88 0.01 50); }
.bo-nav { background: var(--surface); border-bottom: 1px solid var(--rule); padding: 0 40px; display: flex; gap: 2px; align-items: stretch; }
.bo-nav a { color: var(--ink-2); text-decoration: none; font-size: 14px; padding: 15px 14px 13px; border-bottom: 3px solid transparent; display: flex; gap: 8px; align-items: baseline; }
.bo-nav a.on { color: var(--ink); font-weight: 700; border-bottom-color: var(--space); }
.bo-nav a .n { font-size: 12px; font-weight: 700; color: var(--surface); background: var(--ink-2); padding: 1px 6px; }
.bo-nav a .n.err { background: var(--err); }
.bo-nav .sep { width: 1px; background: var(--rule); margin: 12px 10px; }
.bo-nav .end { margin-left: auto; }
.bo-main { padding: 28px 40px 48px; }
.bo-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 22px; }
.bo-head h1 { font-size: 30px; font-weight: 900; letter-spacing: -.015em; }
.bo-head .sub { color: var(--ink-2); margin-top: 6px; font-size: 14.5px; }
.bo-head .actions { display: flex; gap: 10px; }
.crumb { font-size: 13.5px; color: var(--ink-3); margin-bottom: 8px; }
.crumb a { color: var(--ink-2); }
.sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.sec-h h2 { font-size: 19px; font-weight: 700; }
.sec-h h2 .c { color: var(--ink-3); font-weight: 400; margin-left: 6px; }
.sec-h .aside { font-size: 13.5px; color: var(--ink-3); }

/* Bandeaux d'alerte : bordure complète, fond teinté */
.alert { border: 1px solid; padding: 16px 20px; display: flex; gap: 20px; align-items: flex-start; justify-content: space-between; }
.alert.err { border-color: var(--err); background: var(--err-soft); }
.alert.warn { border-color: oklch(0.72 0.12 75); background: var(--warn-soft); }
.alert h2, .alert h3 { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.alert.err h2, .alert.err h3 { color: var(--err); }
.alert p { font-size: 14.5px; color: var(--ink); max-width: 80ch; }
.alert .actions { display: flex; gap: 8px; flex: none; }

/* ===== Module public (intégré en iframe) ===== */
.host { background: var(--surface); border-bottom: 1px solid var(--rule); }
.host-bar { height: 34px; background: oklch(0.25 0.006 40); }
.host-head { display: flex; align-items: center; gap: 24px; padding: 0 40px; height: 72px; }
.host-logo { width: 150px; height: 40px; border: 1px dashed var(--rule); display: grid; place-items: center; font-size: 11.5px; color: var(--ink-3); text-align: center; line-height: 1.2; }
.host-nav { display: flex; gap: 22px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--ink); }
.host-crumb { padding: 10px 40px; font-size: 13.5px; color: var(--ink-2); border-top: 1px solid var(--rule-2); }
.frame-note { font-size: 12px; color: var(--ink-3); padding: 14px 40px 0; display: flex; justify-content: space-between; }
.frame { margin: 6px 40px 40px; border: 1px dashed oklch(0.75 0.01 50); background: var(--surface); }
.mod { padding: 32px 40px 40px; }
.mod h1 { font-size: 40px; font-weight: 900; letter-spacing: -.02em; line-height: 1.05; }
.mod .lead { font-size: 16px; color: var(--ink-2); margin-top: 10px; max-width: 72ch; }

.mod-foot { margin-top: 36px; padding-top: 14px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 13.5px; }
.tip { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 1.5px solid var(--ink-2); border-radius: 50%; font-size: 11.5px; font-weight: 700; color: var(--ink-2); margin-left: 6px; vertical-align: 1px; }
.tipbox { position: absolute; z-index: 3; background: var(--night); color: oklch(0.95 0.006 60); font-size: 13px; line-height: 1.45; padding: 10px 12px; width: 300px; font-weight: 400; }
.tipbox::before { content: ""; position: absolute; top: -6px; left: 14px; border: 6px solid transparent; border-top: 0; border-bottom-color: var(--night); }

@media (max-width: 700px) {
  body { font-size: 15px; }
  .demo { padding: 6px 16px; flex-direction: column; gap: 0; }
  .host-bar { height: 0; }
  .host-head { padding: 0 16px; height: 60px; justify-content: space-between; }
  .host-logo { width: 150px; height: 34px; font-size: 10px; }
  .host-nav { display: none; }
  .host-crumb { padding: 8px 16px; font-size: 12.5px; }
  .frame-note { padding: 10px 16px 0; }
  .frame { margin: 6px 0 0; border-left: 0; border-right: 0; }
  .mod { padding: 22px 16px 32px; }
  .mod h1 { font-size: 30px; }
  .mod .lead { font-size: 15px; }
}

/* Sous-navigation de l'administration */
.subnav { display: flex; gap: 22px; border-bottom: 1px solid var(--rule); margin: 0 0 24px; font-size: 14.5px; }
.subnav a { text-decoration: none; color: var(--ink-2); padding: 0 0 10px; border-bottom: 2px solid transparent; }
.subnav a.on { color: var(--ink); font-weight: 700; border-bottom-color: var(--ink); }

/* ===== Ajouts du POC (vrais contrôles de formulaire, à l'apparence des maquettes) ===== */
button.btn { font-family: "Roboto", sans-serif; }
input.input, select.input, textarea.input { width: 100%; display: block; appearance: none; border-radius: 0; }
select.input { background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%); background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 32px; }
textarea.input { min-height: 90px; line-height: 1.45; }
input.input:focus, select.input:focus, textarea.input:focus { outline: none; box-shadow: var(--focus); }
input[type=checkbox].box, input[type=radio].radio { appearance: none; margin: 2px 0 0; cursor: pointer; }
input[type=checkbox].box:checked { background: var(--brick-ink); border-color: var(--brick-ink); }
input[type=checkbox].box:checked::after { content: ""; width: 5px; height: 9px; border-right: 2px solid var(--surface); border-bottom: 2px solid var(--surface); transform: rotate(45deg) translate(-1px, -1px); }
input[type=radio].radio:checked::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brick-ink); }
.bo input[type=checkbox].box:checked { background: var(--night); border-color: var(--night); }
.bo input[type=radio].radio:checked::after { background: var(--night); }
input[type=checkbox].box:focus-visible, input[type=radio].radio:focus-visible { outline: none; box-shadow: var(--focus); }
input[type=checkbox].box:disabled { border-color: var(--rule); cursor: default; }
label.check { cursor: pointer; }
.bo-top .space select.input { background-repeat: no-repeat; background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px, 5px 5px; background-color: transparent; border-color: oklch(0.5 0.01 50); color: var(--surface); min-height: 34px; padding: 5px 34px 5px 12px; font-size: 14px; width: auto; background-image: linear-gradient(45deg, transparent 50%, oklch(0.8 0.01 50) 50%), linear-gradient(135deg, oklch(0.8 0.01 50) 50%, transparent 50%); }
.bo-top .space select.input option { color: var(--ink); background: var(--surface); }
.bo-top .space form { display: flex; align-items: center; gap: 10px; }
.flash { border: 1px solid var(--ok); background: var(--ok-soft); padding: 12px 18px; margin-bottom: 18px; font-size: 14.5px; }
.flash.err { border-color: var(--err); background: var(--err-soft); }
.attente { display: flex; align-items: center; gap: 12px; font-size: 14.5px; }
.spin { width: 18px; height: 18px; border: 2.5px solid var(--rule); border-top-color: var(--ink); border-radius: 50%; animation: tourne 0.9s linear infinite; flex: none; }
@keyframes tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 3s; } }
.vide { color: var(--ink-3); padding: 18px 0; font-size: 14.5px; }
.pager { display: flex; gap: 6px; align-items: center; margin-top: 18px; font-size: 14px; flex-wrap: wrap; }
.pager a, .pager span { padding: 6px 11px; border: 1px solid var(--rule); text-decoration: none; color: var(--ink); }
.pager .on { border-color: var(--ink); font-weight: 700; }

[hidden] { display: none !important; }

.filters select.input, .filters2 select.input, .rbar select.input { padding-right: 32px; }