/* ==========================================================================
   PANOSTEO — Composants
   Minéral (--po-accent) : filets, chevrons, repères, soulignés. Jamais un texte.
   ========================================================================== */

/* ---- Cartouche (eyebrow) : IBM Plex Mono, capitales, filet Minéral ---- */
.po-cartouche {
  display: inline-flex;
  align-items: center;
  gap: var(--po-s-3);
  font-family: var(--po-font-mono);
  font-size: var(--po-fs-cartouche);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--po-text-2);
  line-height: 1.4;
}
.po-dark .po-cartouche { font-weight: 600; }
.po-cartouche::before {
  content: "";
  flex: 0 0 24px;
  height: 2px;
  background: var(--po-accent);
  border-radius: 2px;
}
.po-cartouche--plain::before { display: none; }
.po-cartouche__n { font-weight: 600; color: var(--po-text); }
.po-dark .po-cartouche__n { color: var(--po-os); }
.po-cartouche__sep { opacity: .6; }

/* ---- Titre de section + mot accentué (souligné Minéral) ---- */
.po-title { position: relative; }
.po-accent {
  font-style: normal;
  color: inherit;
  background-image: linear-gradient(var(--po-accent), var(--po-accent));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 0% 2px;
  padding-bottom: .04em;
  transition: background-size .8s var(--po-ease-reveal) .5s;
}
.no-js .po-accent,
.is-visible .po-accent,
.is-visible.po-accent { background-size: 100% 2px; }

.po-lead {
  font-size: var(--po-fs-lead);
  line-height: 1.5;
  max-width: 60ch;
}
.po-dark .po-lead { color: var(--po-text-2); }
.po-note {
  font-size: var(--po-fs-caption);
  color: var(--po-text-2);
  font-style: italic;
  max-width: 70ch;
}
.po-note--plain { font-style: normal; }

/* ---- Boutons ---- */
.po-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: .75rem 1.25rem;
  border-radius: var(--po-r-2);
  font: 600 .9375rem / 1 var(--po-font-body);
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--po-t-fast) var(--po-ease), color var(--po-t-fast), border-color var(--po-t-fast), transform var(--po-t-fast) var(--po-ease), box-shadow var(--po-t-fast);
}
.po-btn--primary {
  background: var(--po-btn-bg);
  color: var(--po-btn-fg);
  border-color: var(--po-btn-bg);
}
.po-btn--secondary {
  background: transparent;
  color: var(--po-btn2-fg);
  border-color: var(--po-btn2-border);
}
.po-btn--ghost {
  background: transparent;
  color: var(--po-btn2-fg);
  padding-inline: .25rem;
  min-height: 40px;
}
.po-btn--small { min-height: 40px; padding: .5rem 1rem; font-size: .875rem; }
.po-btn__arrow { width: 18px; height: 18px; flex: none; transition: transform var(--po-t-fast) var(--po-ease); }
@media (hover: hover) {
  .po-btn--primary:hover { background: var(--po-btn-bg-hover); border-color: var(--po-btn-bg-hover); transform: translateY(-1px); }
  .po-btn--secondary:hover { background: rgb(var(--po-corticale-rgb) / .06); transform: translateY(-1px); }
  .po-dark .po-btn--secondary:hover { background: rgb(var(--po-os-rgb) / .08); }
  .po-btn:hover .po-btn__arrow { transform: translateX(3px); }
}
.po-btn:active { transform: translateY(0); }
.po-actions { display: flex; flex-wrap: wrap; gap: var(--po-s-3); align-items: center; }

/* ---- Cartes ---- */
.po-card {
  position: relative;
  background: var(--po-surface-1);
  border: 1px solid var(--po-border);
  border-radius: var(--po-r-3);
  padding: var(--po-s-6);
  display: grid;
  gap: var(--po-s-3);
  align-content: start;
  transition: border-color var(--po-t-base) var(--po-ease), transform var(--po-t-base) var(--po-ease);
}
.po-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--po-shadow-2);
  opacity: 0;
  transition: opacity var(--po-t-base) var(--po-ease);
  pointer-events: none;
}
.po-card--soft { background: var(--po-surface-2); }
.po-card__tick {
  width: 24px;
  height: 4px;
  border-radius: 2px;
  background: var(--po-accent);
  transition: width var(--po-t-base) var(--po-ease);
}
.po-card__title { font-size: var(--po-fs-h3); }
.po-card__text { color: var(--po-text); }
.po-dark .po-card__text { color: var(--po-text-2); }
.po-card__icon {
  width: 64px;
  height: 64px;
  border-radius: var(--po-r-3);
  background: var(--po-bg-structure);
  display: grid;
  place-items: center;
  color: var(--po-ill-stroke);
  margin-bottom: var(--po-s-2);
}
.po-card__icon svg { width: 48px; height: 48px; }
.po-card__foot { margin-top: auto; padding-top: var(--po-s-3); }
@media (hover: hover) {
  .po-card:hover { transform: translateY(-2px); border-color: var(--po-border-strong); }
  .po-card:hover::after { opacity: 1; }
  .po-card:hover .po-card__tick { width: 40px; }
}

/* Encadré de structure (charte 5.1) : barre d'accent à gauche + libellé de statut */
.po-card--encadre {
  border-left: 4px solid var(--po-corticale);
  border-radius: var(--po-r-2);
  background: var(--po-surface-2);
}
.po-card--encadre[data-status="ok"] { border-left-color: var(--po-status-ok); }
.po-card--encadre[data-status="wait"] { border-left-color: var(--po-status-wait); }
.po-card--encadre[data-status="risk"] { border-left-color: var(--po-status-risk); }
.po-status {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--po-fs-caption);
  font-weight: 600;
  color: var(--po-text-2);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.po-status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--po-corticale);
}
[data-status="ok"] .po-status::before { background: var(--po-status-ok); }
[data-status="wait"] .po-status::before { background: var(--po-status-wait); }
[data-status="risk"] .po-status::before { background: var(--po-status-risk); }

/* ---- Tuiles statistiques ---- */
.po-stats { display: grid; gap: var(--po-s-5); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.po-stat {
  background: var(--po-surface-1);
  border: 1px solid var(--po-border);
  border-radius: var(--po-r-3);
  padding: var(--po-s-5) var(--po-s-5) var(--po-s-4);
  display: grid;
  gap: var(--po-s-2);
  align-content: start;
}
.po-stat__tick {
  width: 24px;
  height: 4px;
  border-radius: 2px;
  background: var(--po-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s var(--po-ease-reveal) .1s, width var(--po-t-base) var(--po-ease);
}
.no-js .po-stat__tick, .is-visible .po-stat__tick { transform: scaleX(1); }
.po-stat__value {
  font-family: var(--po-font-body);
  font-weight: 600;
  font-size: var(--po-fs-stat);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--po-text-title);
  font-variant-numeric: lining-nums proportional-nums;
  margin-top: var(--po-s-2);
  transition: color var(--po-t-base);
}
.po-stat__unit { font-size: .5em; font-weight: 500; letter-spacing: 0; margin-left: .15em; color: var(--po-text-2); }
.po-stat__approx { font-weight: 400; color: var(--po-text-2); font-size: .7em; vertical-align: .1em; }
.po-stat__label { font-weight: 500; color: var(--po-text); }
.po-stat__source {
  font-family: var(--po-font-mono);
  font-size: .6875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--po-text-2);
  margin-top: var(--po-s-1);
}
.po-stat__source a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--po-border-strong);
  transition: border-color var(--po-t-fast), color var(--po-t-fast);
}
.po-stat__source a:hover { color: var(--po-text-title); border-bottom-color: var(--po-accent); }
@media (hover: hover) {
  .po-stat:hover .po-stat__value { color: var(--po-corticale-deep); }
  .po-stat:hover .po-stat__tick { width: 40px; }
}

/* ---- Points clés du hero (mots courts, sur fond sombre) ---- */
.po-kw {
  position: relative;
  display: grid;
  gap: 3px;
  padding: var(--po-s-3) var(--po-s-4) var(--po-s-3) calc(var(--po-s-4) + 10px);
  border-radius: var(--po-r-2);
  background: var(--po-surface-1);
  border: 1px solid var(--po-border);
}
.po-kw::before {
  content: "";
  position: absolute;
  left: var(--po-s-4);
  top: calc(var(--po-s-3) + .45em);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--po-accent);
  transform: translateX(-2px);
}
.po-kw__title { font-weight: 600; font-size: var(--po-fs-small); color: var(--po-text); line-height: 1.3; }
.po-kw__sub { font-size: var(--po-fs-caption); color: var(--po-text-2); line-height: 1.35; }

/* ---- Étapes (parcours) ---- */
.po-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--po-s-5);
  counter-reset: step;
}
.po-step {
  position: relative;
  padding-left: 60px;
  display: grid;
  gap: var(--po-s-2);
}
.po-step__n {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--po-bg-structure);
  color: var(--po-text-title);
  font-family: var(--po-font-mono);
  font-weight: 600;
  font-size: .8125rem;
  display: grid;
  place-items: center;
}
.po-step__title { font-size: var(--po-fs-h3); }
.po-step__text { color: var(--po-text); }
.po-step::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 44px;
  bottom: calc(-1 * var(--po-s-5));
  border-left: 2px dashed var(--po-accent);
  opacity: .6;
}
.po-step:last-child::before { display: none; }
@media (min-width: 760px) {
  .po-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--po-s-5); }
  .po-step { padding-left: 0; padding-top: 56px; }
  .po-step::before { display: none; }
}

/* ---- Ligne de sol (séparateur au rythme de la marque) ---- */
.po-groundline {
  width: min(100%, 320px);
  height: 4px;
  color: var(--po-accent);
  display: block;
}
.po-groundline--center { margin-inline: auto; }
.po-groundline .gl-solid { stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.po-groundline .gl-dash { stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.po-groundline .gl-dot { fill: currentColor; }

/* ---- Deux colonnes « est / n'est pas » ---- */
.po-twocol { display: grid; gap: var(--po-s-5); }
@media (min-width: 760px) { .po-twocol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.po-twocol .po-card { gap: var(--po-s-4); }
.po-twocol .po-list { font-size: var(--po-fs-body); }

/* ---- Chronologie ---- */
.po-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--po-s-4);
}
.po-timeline__item {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: var(--po-s-4);
  align-items: start;
  padding: var(--po-s-3) 0;
  border-top: 1px solid var(--po-border);
}
.po-timeline__item:last-child { border-bottom: 1px solid var(--po-border); }
.po-timeline__date {
  font-family: var(--po-font-mono);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .08em;
  color: var(--po-text-title);
  padding-top: .2em;
}
.po-timeline__text { color: var(--po-text); }
.po-timeline__note { margin-top: var(--po-s-4); }

/* ---- Figure de rapport (barres 10,8 : 1) ---- */
.po-ratio { display: grid; gap: var(--po-s-4); }
.po-ratio__title { font-size: var(--po-fs-h3); }
.po-ratio__intro { color: var(--po-text); margin-bottom: var(--po-s-2); }
.po-ratio__row { display: grid; gap: var(--po-s-2); }
.po-ratio__head { display: flex; justify-content: space-between; gap: var(--po-s-3); font-size: var(--po-fs-small); }
.po-ratio__label { font-weight: 500; }
.po-ratio__value { font-weight: 600; font-variant-numeric: lining-nums; color: var(--po-text-title); }
.po-ratio__track { height: 20px; }
.po-ratio__bar {
  height: 100%;
  border-radius: 0 4px 4px 0;
  background: var(--po-corticale);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s var(--po-ease-reveal);
}
.po-ratio__row--b .po-ratio__bar { background: var(--po-trabecule); transition-delay: .2s; }
.no-js .po-ratio__bar, .is-visible .po-ratio__bar { transform: scaleX(1); }
.po-ratio__foot { font-family: var(--po-font-mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--po-text-2); }

/* ---- Étiquettes ---- */

/* ---- Affichage « signalement » (deux catégories, exemple fictif) ---- */
.po-result { gap: var(--po-s-4); }
.po-result__screen { position: relative; }
.po-result__fig { width: 100%; height: auto; }
/* Pictogrammes de signal au cœur de l'arc : coche verte (pas de signal) ou triangle ambre (profil à risque) */
.po-result__lamp {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  opacity: 0;
  transform: scale(.4);
}
.po-result__lampsvg { width: 100%; height: 100%; display: block; overflow: visible; }
.lp-bg { fill: var(--po-status-ok); }
.lp-check { fill: none; stroke: var(--po-os); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.lp-tri { fill: var(--po-status-wait); stroke: var(--po-status-wait); stroke-width: 3; stroke-linejoin: round; }
.lp-mark { stroke: var(--po-os); stroke-width: 2.6; stroke-linecap: round; }
.lp-mdot { fill: var(--po-os); }
.lp-ring { fill: none; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.lp-ring--round { stroke: var(--po-status-ok); }
.lp-ring--tri { stroke: var(--po-status-wait); stroke-linejoin: round; }
.po-result__scan { opacity: 0; }
.po-result__scanline { stroke: var(--po-corticale); stroke-width: 1.5; opacity: .6; }
.po-result__scanglow { stroke: var(--po-corticale); stroke-width: 28; opacity: .06; }
.po-result__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--po-s-3); }
.po-result__row {
  position: relative;
  display: grid;
  grid-template-columns: 14px 10px 1fr;
  column-gap: var(--po-s-3);
  row-gap: 2px;
  align-items: center;
  padding: var(--po-s-3) var(--po-s-4);
  border: 1px solid var(--po-border);
  border-radius: var(--po-r-2);
  background: var(--po-surface-2);
}
.po-result__row::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 2px solid var(--po-accent);
  opacity: 0;
  pointer-events: none;
}
.po-result__chev { color: var(--po-accent); font-size: 1rem; line-height: 1; opacity: 0; }
.po-result__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--po-status-ok); }
.po-result__row--b .po-result__dot { background: var(--po-status-wait); }
.po-result__cat { font-weight: 600; font-size: var(--po-fs-small); line-height: 1.35; }
.po-result__next { grid-column: 3; font-size: var(--po-fs-caption); color: var(--po-text-2); }
.po-result__copy { display: grid; gap: var(--po-s-4); align-content: center; }
.po-result__copy h3 { font-size: var(--po-fs-h3); }

/* ---- Deux issues : schéma en branches (signalement → suivi habituel / bilan) ---- */
.po-branch {
  display: grid;
  grid-template-columns: auto minmax(56px, 1fr) minmax(0, 1.6fr);
  align-items: stretch;
  column-gap: var(--po-s-2);
  height: 220px;
}
.po-branch__start {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--po-s-2);
  text-align: center;
}
.po-branch__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--po-surface-1);
  border: 2px solid var(--po-ill-stroke);
  display: grid;
  place-items: center;
  color: var(--po-ill-stroke);
}
.po-branch__icon svg { width: 26px; height: 26px; }
.po-branch__name {
  font-family: var(--po-font-mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--po-text-2);
}
.po-branch__lines { width: 100%; height: 100%; display: block; }
.po-branch__line { fill: none; stroke: var(--po-ill-faint); stroke-width: 2; stroke-linecap: round; }
.po-branch__pulse { fill: none; stroke: var(--po-accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 70 2000; stroke-dashoffset: 70; }
.po-branch__ends {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-rows: 1fr 1fr;
  align-items: center;
  row-gap: var(--po-s-3);
}
.po-branch__end {
  position: relative;
  display: grid;
  grid-template-columns: 10px 1fr;
  column-gap: var(--po-s-3);
  row-gap: 2px;
  align-items: center;
  padding: var(--po-s-3) var(--po-s-4);
  border: 1px solid var(--po-border);
  border-radius: var(--po-r-2);
  background: var(--po-surface-1);
}
.po-branch__end::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 2px solid var(--po-accent);
  opacity: 0;
  pointer-events: none;
}
.po-branch__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--po-status-ok); }
.po-branch__end--b .po-branch__dot { background: var(--po-status-wait); }
.po-branch__label { font-weight: 600; font-size: var(--po-fs-small); line-height: 1.3; }
.po-branch__sub { grid-column: 2; font-size: var(--po-fs-caption); color: var(--po-text-2); }
@media (max-width: 479px) {
  .po-branch { grid-template-columns: auto minmax(32px, 1fr) minmax(0, 2.2fr); column-gap: var(--po-s-1); }
  .po-branch__icon { width: 44px; height: 44px; }
  .po-branch__name { display: none; }
}

/* ---- Figures SVG (styles statiques ; le mouvement est dans motion.css) ---- */
.po-fig { width: 100%; height: auto; display: block; }

/* Schéma radiographique de l'arc (hero et affichage signalement) */
.po-arcfig__band { fill: var(--po-ill-soft); }
.po-arcfig__trab { opacity: .35; }
.po-arcfig__outer, .po-arcfig__inner { fill: none; stroke: var(--po-ill-stroke); stroke-width: 2; stroke-linecap: round; }
.po-arcfig__inner { stroke-width: 1.5; opacity: .7; }
.po-arcfig__base { fill: none; stroke: var(--po-ill-faint); stroke-width: 2; stroke-linecap: round; }
.po-arcfig__signal { fill: none; stroke: var(--po-accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 60 2000; stroke-dashoffset: 60; }
.po-frame__rect { fill: none; stroke: rgb(var(--po-corticale-trait-rgb) / .35); stroke-width: 1.5; }
.po-frame__corners { fill: none; stroke: var(--po-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.po-scan { opacity: 0; }
.po-scan__line { stroke: var(--po-os); stroke-width: 1.25; opacity: .35; }
.po-scan__glow { stroke: var(--po-os); stroke-width: 26; opacity: .05; }
/* Pictogramme d'alerte du hero (exemple de signal, après le balayage) : triangle et point d'exclamation */
.po-alert__sign { transform-box: fill-box; transform-origin: center; }
.po-alert__tri { fill: var(--po-status-wait); stroke: var(--po-status-wait); stroke-width: 4; stroke-linejoin: round; }
.po-alert__mark { stroke: var(--po-os); stroke-width: 3; stroke-linecap: round; }
.po-alert__mdot { fill: var(--po-os); }
.po-alert__ring { fill: none; stroke: var(--po-status-wait); stroke-width: 2.5; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; }
.po-alert__label { fill: var(--po-corticale-trait); font-size: 20px; letter-spacing: 2.5px; }
.po-svg-label { font-family: var(--po-font-mono); font-size: 14px; letter-spacing: 1.5px; fill: var(--po-text-2); text-transform: uppercase; }
.po-arcfig__code { font-family: var(--po-font-display); font-weight: 600; font-size: 112px; letter-spacing: -.02em; fill: var(--po-os); opacity: .92; }
@media (max-width: 899px) { .po-svg-label { display: none; } }

/* Flux du parcours (4 nœuds) */
.po-flow { display: none; }
@media (min-width: 760px) { .po-flow { display: block; margin-bottom: var(--po-s-6); } }
.po-flow__node circle.n-bg { fill: var(--po-surface-1); stroke: var(--po-ill-stroke); stroke-width: 2; }
.po-flow__node circle.n-tick { fill: var(--po-accent); transform-box: fill-box; transform-origin: center; }
.po-flow__node .n-glyph { fill: none; stroke: var(--po-ill-stroke); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.po-flow__node .n-glyph-accent { fill: none; stroke: var(--po-accent); stroke-width: 1.75; stroke-linecap: round; }
.po-flow__link { fill: none; stroke: var(--po-ill-faint); stroke-width: 2; stroke-linecap: round; }
.po-flow__pulse { fill: none; stroke: var(--po-accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 70 2000; stroke-dashoffset: 70; }
.po-flow__label { font-family: var(--po-font-mono); font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; fill: var(--po-text-2); text-anchor: middle; }
.po-flow__num { font-family: var(--po-font-mono); font-size: 12px; font-weight: 600; fill: var(--po-text-title); text-anchor: middle; }

/* Icônes de ligne (sprite) */
.po-icon { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.po-icon .i-accent { stroke: var(--po-accent); }

/* Tracé de la marque en clôture (géométrie officielle, couleurs inverses) */
.po-markdraw .mk-arc { fill: none; stroke: var(--po-os); stroke-width: 68; stroke-linecap: round; stroke-linejoin: round; }
.po-markdraw .mk-seg { fill: none; stroke: var(--po-mineral); stroke-width: 68; stroke-linecap: round; stroke-linejoin: round; }
.po-markdraw .mk-gs, .po-markdraw .mk-gd { stroke: var(--po-os); stroke-width: 14; stroke-linecap: round; }
.po-markdraw .mk-dot { fill: var(--po-os); }
.po-markdraw .mk-word { fill: var(--po-os); }

/* ---- Cartes-publics (contact) ---- */
.po-card--audience .po-card__foot { display: flex; }

/* ---- Dialogue de contact ---- */
.po-dialog {
  width: min(92vw, 560px);
  max-height: 90dvh;
  padding: 0;
  border: 1px solid var(--po-trame);
  border-radius: var(--po-r-4);
  background: var(--po-os);
  color: var(--po-encre);
  box-shadow: var(--po-shadow-3);
  overflow: auto;
}
.po-dialog::backdrop {
  background: rgb(10 53 66 / .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.po-dialog__inner { padding: var(--po-s-6); display: grid; gap: var(--po-s-5); }
.po-dialog__head { display: flex; justify-content: space-between; align-items: start; gap: var(--po-s-4); }
.po-dialog__title { font-family: var(--po-font-display); font-size: 1.75rem; font-weight: 600; color: var(--po-corticale); line-height: 1.15; }
.po-dialog__close {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--po-ardoise);
  flex: none;
}
.po-dialog__close:hover { background: var(--po-corticale-pale); color: var(--po-corticale); }
.po-form { display: grid; gap: var(--po-s-4); }
.po-field { display: grid; gap: var(--po-s-2); }
.po-field__label { font-weight: 600; font-size: var(--po-fs-small); }
.po-field__hint { font-size: var(--po-fs-caption); color: var(--po-ardoise); }
.po-input, .po-select, .po-textarea {
  width: 100%;
  padding: .7rem .9rem;
  border: 1px solid var(--po-trabecule);
  border-radius: var(--po-r-2);
  background: var(--po-surface);
  color: var(--po-encre);
  font-size: 1rem;
}
.po-textarea { min-height: 140px; resize: vertical; }
.po-input:focus-visible, .po-select:focus-visible, .po-textarea:focus-visible { outline-offset: 0; border-color: var(--po-corticale); }
.po-form__row { display: grid; gap: var(--po-s-4); }
@media (min-width: 560px) { .po-form__row { grid-template-columns: 1fr 1fr; } }
.po-dialog__actions { display: flex; flex-wrap: wrap; gap: var(--po-s-3); align-items: center; }
.po-dialog__status { font-size: var(--po-fs-small); color: var(--po-vert); min-height: 1.4em; font-weight: 500; }
.po-dialog__note { font-size: var(--po-fs-caption); color: var(--po-ardoise); }