/* Composants du Design System Piconyme (d'après bundle.css), tailles en rem.
   Button (pn-btn), PhotoCard (pn-photo), CaptionBanner (pn-banner), TextField (pn-field), PlaceOption (pn-place),
   Notice (pn-notice, pn-warn), HelpTip (pn-tip). Utilisés par les écrans des PR suivantes. */

/* Button : principal (pêche, ombre dure), IA (rose), secondaire (blanc). Un seul principal par écran. */
.pn-btn {
  box-sizing: border-box; width: 100%; min-height: 3.875rem; padding: 0 var(--space-5);
  display: flex; align-items: center; justify-content: center; gap: var(--space-3);
  border: var(--border-strong) solid var(--ink); border-radius: var(--radius-hand);
  background: var(--peach); color: var(--ink); box-shadow: var(--shadow-button);
  font-family: var(--font-body); font-weight: 700; font-size: var(--text-button); line-height: 1.2;
  text-align: center; cursor: pointer;
}
.pn-btn--secondary { min-height: 3.375rem; background: var(--paper); font-size: var(--text-button-sm); box-shadow: none; }
.pn-btn--ai { min-height: 3.375rem; background: var(--pink); font-size: var(--text-button-sm); box-shadow: none; }
.pn-btn svg { flex: none; }
.pn-btn:disabled { opacity: 0.75; cursor: progress; }

/* PhotoCard : carte blanche (droite : une inclinaison crée des escaliers de pixels sur les bords), scotch rose, ombre bleue. */
.pn-photo { position: relative; max-width: 26.25rem; }
.pn-tape {
  position: absolute; top: -0.875rem; left: 50%; margin-left: -2.8125rem; width: 5.625rem; height: 1.75rem; z-index: 1;
  background: var(--pink); transform: rotate(-4deg);
  border-left: 2px dashed var(--ink); border-right: 2px dashed var(--ink);
}
.pn-frame {
  background: var(--paper); border: var(--border-regular) solid var(--ink); border-radius: var(--radius-photo);
  padding: 0.625rem; box-shadow: var(--shadow-photo);
}
.pn-frame svg, .pn-frame canvas, .pn-frame img { display: block; width: 100%; height: auto; }

/* CaptionBanner : toujours noir. */
.pn-banner {
  box-sizing: border-box; min-height: 2.875rem; padding: 0.625rem 0.875rem;
  display: flex; flex-direction: column; gap: var(--space-1);
  background: var(--banner); color: var(--banner-text); font-family: var(--font-body);
}
.pn-banner--empty { height: 2.875rem; }
.pn-banner b { font-weight: 700; font-size: 1rem; line-height: 1.3; }
.pn-banner span { font-weight: 600; font-size: var(--text-body-sm); line-height: 1.35; }

/* TextField : étiquette, puis zone blanche en creux. Texte d'exemple à 75 % d'opacité au moins. */
.pn-field { display: flex; flex-direction: column; gap: 0.375rem; font-family: var(--font-body); color: var(--ink); }
.pn-field label { font-weight: 700; font-size: var(--text-label); }
.pn-field label small { font-weight: 600; font-size: var(--text-body-sm); opacity: 0.75; }
.pn-input {
  box-sizing: border-box; width: 100%; min-height: 5.25rem; padding: 0.75rem 0.875rem;
  background: var(--paper); color: var(--ink); border: var(--border-regular) solid var(--ink);
  border-radius: var(--radius-field); box-shadow: var(--shadow-inset);
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-input); line-height: 1.45;
}
.pn-input::placeholder { color: var(--ink); opacity: 0.75; }

/* PlaceOption : ligne de la liste « Où étiez-vous ? », choix unique. */
.pn-place {
  box-sizing: border-box; min-height: 3.5rem; padding: 0.5rem 0.875rem;
  display: flex; align-items: center; gap: 0.875rem;
  background: var(--paper); color: var(--ink); border: var(--border-regular) solid var(--ink); border-radius: var(--radius-field);
  font-family: var(--font-body); cursor: pointer;
}
.pn-place--on { background: var(--cream); }
.pn-radio {
  flex: none; width: 1.625rem; height: 1.625rem; border-radius: 50%;
  border: var(--border-regular) solid var(--ink); background: var(--paper);
  display: flex; align-items: center; justify-content: center;
}
.pn-radio i { width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--peach); border: 2px solid var(--ink); }
.pn-place b { display: block; font-size: var(--text-place-name); line-height: 1.25; }
.pn-place small { display: block; font-size: var(--text-body-sm); font-weight: 600; opacity: 0.8; }

/* Notice : message rose ; avertissement au trait (jamais de rouge). */
.pn-notice {
  padding: 0.75rem 1rem; background: var(--pink); color: var(--ink);
  border: var(--border-regular) solid var(--ink); border-radius: var(--radius-field);
  font-family: var(--font-body); font-weight: 700; font-size: var(--text-input);
}
.pn-warn {
  display: flex; align-items: center; gap: var(--space-2);
  color: var(--ink); font-family: var(--font-body); font-weight: 600; font-size: var(--text-body-sm);
}

/* HelpTip : bloc repliable (<details>), fermé par défaut. */
.pn-tip {
  background: var(--paper); color: var(--ink); border: var(--border-regular) solid var(--ink); border-radius: var(--radius-field);
  font-family: var(--font-body);
}
.pn-tip summary {
  box-sizing: border-box; min-height: 3.375rem; padding: 0.75rem 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  list-style: none; cursor: pointer; font-weight: 700; font-size: 1rem; line-height: 1.35;
}
.pn-tip summary::-webkit-details-marker { display: none; }
.pn-tip[open] .chev { transform: rotate(180deg); }
.pn-tip .body { padding: 0 1rem 1rem; display: flex; flex-direction: column; gap: var(--space-3); font-size: 1rem; font-weight: 600; line-height: 1.5; }

/* Focus visible sur tout élément interactif (non maquetté, exigé par le Design System). */
.pn-btn:focus-visible, .pn-place:focus-within, .pn-input:focus-visible, .pn-tip summary:focus-visible {
  outline: 3px solid var(--ink); outline-offset: 3px;
}

/* Aucun mouvement nécessaire : on respecte la demande de réduire les animations. */
@media (prefers-reduced-motion: reduce) {
  .pn-tip .chev { transition: none; }
}