/* ============================================================
   Powerchef — Composants v0.1
   À utiliser conjointement avec tokens.css.
   Toutes les classes sont préfixées `pc-` pour éviter toute collision.
   ============================================================ */

@import url("./_view-transitions.css");
@import url("./_heatmap-signature.css");
@import url("./_mega-menu.css");
@import url("./_feedback.css");
@import url("./_personas-index.css");
@import url("./_footer.css");

/* ---------- Helpers utilitaires ---------- */
.pc-mono   { font-family: var(--pc-font-mono); letter-spacing: var(--pc-tr-wide); }
.pc-display { font-family: var(--pc-font-display); letter-spacing: var(--pc-tr-tight); }
.pc-muted  { color: var(--pc-ink-soft); }
.pc-faint  { color: var(--pc-ink-faint); }

/* ---------- Icônes (Lucide, sprite + currentColor) ----------
   Usage : <svg class="pc-icon pc-icon--md" aria-hidden="true">
             <use href="/design-system/icons/sprite.svg#book-open"/>
           </svg>
   Règles : une famille (Lucide), un stroke (1.75), deux tailles (16 / 20),
   fill: none, stroke: currentColor — le carmin reste piloté par le contexte. */
.pc-icon {
  display: inline-block;
  vertical-align: -0.15em;
  flex-shrink: 0;
  color: currentColor;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--pc-icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pc-icon--sm { width: var(--pc-icon-sm); height: var(--pc-icon-sm); }
.pc-icon--md { width: var(--pc-icon-md); height: var(--pc-icon-md); }

/* Fraunces grand format (hero, couverture) — opsz 144 = dessin le plus contrasté */
.pc-display--hero {
  font-variation-settings: 'opsz' 144;
  font-feature-settings: 'kern' 1;
}

/* ============================================================
   TYPOGRAPHIE EDITORIALE
   Primitives partagees pour limiter le drift entre marketing,
   guide, aide et pages speciales.
   ============================================================ */

.pc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--pc-sp-2);
  margin: 0 0 var(--pc-sp-4);
  font-family: var(--pc-font-mono);
  font-size: var(--pc-fs-xs);
  font-weight: var(--pc-fw-semibold);
  letter-spacing: var(--pc-tr-wider);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--pc-ink-soft);
}

.pc-eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--pc-radius-full);
  background: var(--pc-carmin);
  flex: 0 0 auto;
}

.pc-eyebrow--plain::before {
  content: none;
}

.pc-eyebrow--carmin {
  color: var(--pc-carmin);
}

.pc-eyebrow__num {
  color: var(--pc-ink-faint);
  font-weight: var(--pc-fw-medium);
}

.pc-eyebrow__num::after {
  content: ' ·';
  margin-left: 2px;
  color: var(--pc-ink-faint);
}

.pc-title-page,
.pc-title-section,
.pc-title-card {
  font-family: var(--pc-font-display);
  font-weight: var(--pc-fw-semibold);
  color: var(--pc-ink);
  margin: 0;
}

.pc-title-page {
  font-size: var(--pc-fs-4xl);
  line-height: 1.1;
  letter-spacing: var(--pc-tr-tighter);
  font-variation-settings: 'opsz' 96;
}

.pc-title-section {
  font-size: var(--pc-fs-3xl);
  line-height: var(--pc-lh-tight);
  letter-spacing: var(--pc-tr-tight);
  font-variation-settings: 'opsz' 48;
}

.pc-title-card {
  font-size: var(--pc-fs-xl);
  line-height: var(--pc-lh-snug);
  letter-spacing: var(--pc-tr-tight);
  font-variation-settings: 'opsz' 36;
}

.pc-title-compact {
  font-family: var(--pc-font-text);
  font-size: var(--pc-fs-base);
  font-weight: var(--pc-fw-semibold);
  line-height: var(--pc-lh-snug);
  letter-spacing: var(--pc-tr-normal);
  color: var(--pc-ink);
  margin: 0;
}

@media (max-width: 768px) {
  .pc-title-page {
    font-size: 2.375rem;
  }

  .pc-title-section {
    font-size: var(--pc-fs-2xl);
  }
}

/* Chiffres tabulaires pour l'alignement vertical en colonnes */
.pc-tnum,
.pc-data-row__value,
.pc-charge-capacity__value,
.pc-charge-capacity__operator,
.pc-mkt-model-step__index,
.pc-mkt-story-step__index {
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* ---------- Skip link global ----------
   Utilisé par les pages marketing et guide pour placer le contenu avant les
   navigations longues dans l'ordre clavier.
   Hors écran par défaut : pas de trace visuelle au chargement ; visible au
   focus clavier uniquement (WCAG 2.4.1). */
.pc-skip-link {
  position: absolute;
  left: -10000px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  margin: 0;
  padding: 0;
  z-index: 1000;
  text-decoration: none;
  color: var(--pc-ivory);
  background: var(--pc-ink);
  font-weight: var(--pc-fw-semibold);
  transition: none;
}
.pc-skip-link:focus,
.pc-skip-link:focus-visible {
  position: fixed;
  left: var(--pc-sp-4);
  top: var(--pc-sp-3);
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: nowrap;
  padding: 0.625rem 0.875rem;
  border-radius: var(--pc-radius-md);
  box-shadow: var(--pc-shadow-md);
  outline: 2px solid var(--pc-carmin);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .pc-skip-link:focus,
  .pc-skip-link:focus-visible {
    transition: none;
  }
}

/* ============================================================
   ANCHOR LINK — lien vers ancre de la même page (M6)
   ============================================================ */
.pc-anchor-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--pc-font-text);
  font-size: 0.88rem;
  font-weight: var(--pc-fw-medium);
  color: var(--pc-ink-soft);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--pc-ink-faint) 60%, transparent);
  text-underline-offset: 3px;
  transition: color var(--pc-dur-fast) var(--pc-ease-out),
              text-decoration-color var(--pc-dur-fast) var(--pc-ease-out);
}

.pc-anchor-link:hover {
  color: var(--pc-carmin);
  text-decoration-color: var(--pc-carmin);
}

.pc-anchor-link__icon {
  flex-shrink: 0;
}

/* ============================================================
   BUTTON
   ============================================================ */
.pc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pc-sp-2);
  font-family: var(--pc-font-text);
  font-weight: var(--pc-fw-semibold);
  font-size: var(--pc-fs-sm);
  line-height: 1;
  padding: 0.625rem 1rem;
  border-radius: var(--pc-radius-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--pc-ink);
  cursor: pointer;
  transition: background-color var(--pc-dur-fast) var(--pc-ease-out),
              color var(--pc-dur-fast) var(--pc-ease-out),
              border-color var(--pc-dur-fast) var(--pc-ease-out),
              transform var(--pc-dur-fast) var(--pc-ease-out);
  white-space: nowrap;
  user-select: none;
}
.pc-btn:active:not(:disabled) { transform: translateY(1px); }
.pc-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.pc-btn--sm { font-size: var(--pc-fs-xs); padding: 0.45rem 0.75rem; }
.pc-btn--lg { font-size: var(--pc-fs-base); padding: 0.875rem 1.25rem; }

.pc-btn--primary {
  background: var(--pc-carmin);
  color: #FFFFFF;
  border-color: var(--pc-carmin);
}
.pc-btn--primary:hover:not(:disabled) {
  background: var(--pc-carmin-deep);
  border-color: var(--pc-carmin-deep);
}

.pc-btn--secondary {
  background: transparent;
  color: var(--pc-ink);
  border-color: var(--pc-ink);
}
.pc-btn--secondary:hover:not(:disabled) {
  background: var(--pc-ink);
  color: var(--pc-ivory);
}

.pc-btn--ghost {
  background: transparent;
  color: var(--pc-ink);
  border-color: transparent;
}
.pc-btn--ghost:hover:not(:disabled) {
  background: var(--pc-border);
}

.pc-btn--destructive {
  background: var(--pc-carmin-deep);
  color: #FFFFFF;
  border-color: var(--pc-carmin-deep);
}
.pc-btn--destructive:hover:not(:disabled) {
  background: #5C1116;
  border-color: #5C1116;
}

.pc-btn .pc-btn__icon { width: 1em; height: 1em; flex-shrink: 0; }

/* ============================================================
   CARD
   ============================================================ */
.pc-card {
  background: var(--pc-paper-card);
  border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius-lg);
  padding: var(--pc-sp-5);
  box-shadow: var(--pc-shadow-sm);
  transition: box-shadow var(--pc-dur-base) var(--pc-ease-out),
              transform var(--pc-dur-base) var(--pc-ease-out),
              border-color var(--pc-dur-base) var(--pc-ease-out);
}
.pc-card--selectable { cursor: pointer; }
.pc-card--selectable:hover {
  box-shadow: var(--pc-shadow-md);
  border-color: var(--pc-ink-soft);
  transform: translateY(-2px);
}
.pc-card__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pc-sp-4);
  padding-bottom: var(--pc-sp-3);
  margin-bottom: var(--pc-sp-4);
  border-bottom: 1px solid var(--pc-border);
}
.pc-card__title {
  font-family: var(--pc-font-display);
  font-weight: var(--pc-fw-semibold);
  font-size: var(--pc-fs-xl);
  letter-spacing: var(--pc-tr-tight);
  color: var(--pc-ink);
}
.pc-card__footer {
  padding-top: var(--pc-sp-3);
  margin-top: var(--pc-sp-4);
  border-top: 1px solid var(--pc-border);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--pc-sp-2);
}
.pc-card__media {
  margin: calc(var(--pc-sp-6) * -1) calc(var(--pc-sp-6) * -1) var(--pc-sp-4);
  border-radius: var(--pc-radius-lg) var(--pc-radius-lg) 0 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--pc-border), var(--pc-surface));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pc-ink-faint);
  font-family: var(--pc-font-mono);
  font-size: var(--pc-fs-xs);
}
.pc-card__eyebrow {
  margin-bottom: var(--pc-sp-3);
  font-family: var(--pc-font-mono);
  font-size: var(--pc-fs-xs);
  letter-spacing: var(--pc-tr-wider);
  text-transform: uppercase;
  color: var(--pc-ink-soft);
}
/* Typographie interne par défaut d'une .pc-card (paragraphes, listes) */
.pc-card p,
.pc-card li {
  color: var(--pc-ink-soft);
}
.pc-card p {
  margin: var(--pc-sp-2) 0 0;
}
.pc-card ul {
  display: grid;
  gap: var(--pc-sp-2);
  margin: var(--pc-sp-3) 0 0;
  padding-left: var(--pc-sp-4);
}
/* Variante persona : carte qui doit remplir la hauteur de sa colonne */
.pc-persona-card {
  min-height: 100%;
}
.pc-persona-card strong {
  color: var(--pc-ink);
}

/* ============================================================
   GRID — utilitaires de mise en colonnes
   ============================================================ */
.pc-grid {
  display: grid;
  gap: var(--pc-sp-6);
}
.pc-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pc-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
@media (max-width: 960px) {
  .pc-grid--2,
  .pc-grid--3,
  .pc-grid--4 { grid-template-columns: 1fr; }
}

/* ============================================================
   KICKER — sur-titre court avec puce carmin
   ============================================================ */
.pc-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--pc-sp-2);
  margin-bottom: var(--pc-sp-6);
  font-family: var(--pc-font-mono);
  font-size: var(--pc-fs-xs);
  letter-spacing: var(--pc-tr-wider);
  text-transform: uppercase;
  color: var(--pc-ink-soft);
}
.pc-kicker::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--pc-radius-full);
  background: var(--pc-carmin);
}

/* Numéro de section dans un eyebrow kicker ou badge (F2-1) */
.pc-kicker__num,
.pc-badge__num {
  font-family: var(--pc-font-mono);
  color: var(--pc-ink-faint);
  font-weight: var(--pc-fw-medium);
  margin-right: 2px;
}
.pc-badge__num::after,
.pc-kicker__num::after {
  content: ' ·';
  margin-left: 2px;
  color: var(--pc-ink-faint);
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.pc-sidebar {
  background: var(--pc-surface);
  border-right: 1px solid var(--pc-border);
  width: 260px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: width var(--pc-dur-base) var(--pc-ease-out);
  overflow: hidden;
}
.pc-sidebar--collapsed { width: 64px; }
.pc-sidebar__header {
  padding: var(--pc-sp-4);
  border-bottom: 1px solid var(--pc-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pc-sidebar__nav { padding: var(--pc-sp-3); flex: 1; overflow-y: auto; }
.pc-sidebar__group { margin-bottom: var(--pc-sp-6); }
.pc-sidebar__group-label {
  font-family: var(--pc-font-mono);
  font-size: var(--pc-fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--pc-tr-wider);
  color: var(--pc-ink-faint);
  padding: 0 var(--pc-sp-3) var(--pc-sp-2);
}
.pc-sidebar--collapsed .pc-sidebar__group-label,
.pc-sidebar--collapsed .pc-sidebar__link-label { display: none; }

.pc-sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--pc-sp-3);
  padding: var(--pc-sp-2) var(--pc-sp-3);
  border-radius: var(--pc-radius-md);
  color: var(--pc-ink);
  font-size: var(--pc-fs-sm);
  font-weight: var(--pc-fw-medium);
  cursor: pointer;
  transition: background-color var(--pc-dur-fast) var(--pc-ease-out),
              color var(--pc-dur-fast) var(--pc-ease-out);
}
.pc-sidebar__link:hover { background: var(--pc-border); opacity: 1; }
.pc-sidebar__link--active {
  background: var(--pc-carmin-soft);
  color: var(--pc-carmin);
  position: relative;
}
.pc-sidebar__link--active::before {
  content: "";
  position: absolute;
  left: -0.75rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 3px;
  background: var(--pc-carmin);
  border-radius: var(--pc-radius-full);
}
.pc-sidebar__icon { width: 18px; height: 18px; flex-shrink: 0; }

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.pc-breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--pc-sp-2);
  font-size: var(--pc-fs-sm);
  color: var(--pc-ink-soft);
  font-family: var(--pc-font-text);
}
.pc-breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: var(--pc-sp-1);
  color: var(--pc-ink-soft);
  transition: color var(--pc-dur-fast) var(--pc-ease-out);
}
.pc-breadcrumbs__item:hover { color: var(--pc-ink); opacity: 1; }
.pc-breadcrumbs__item--current { color: var(--pc-ink); font-weight: var(--pc-fw-medium); cursor: default; }
.pc-breadcrumbs__item--current:hover { color: var(--pc-ink); }
.pc-breadcrumbs__sep { color: var(--pc-ink-faint); }
.pc-breadcrumbs__icon { width: 14px; height: 14px; }

/* ============================================================
   HEADER (legacy .pc-header — deprecated Spec 08 B5)
   ============================================================ */
/* DEPRECATED — Spec 08 B5 — 2026-05-20
   .pc-header remplacé par .pc-shell-header sur toutes les pages.
   Conserver 30 jours puis retirer. */
/*
.pc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--pc-sp-3) var(--pc-sp-6);
  background: var(--pc-bg);
  border-bottom: 1px solid var(--pc-border);
  gap: var(--pc-sp-6);
}
.pc-header__brand {
  display: flex;
  align-items: center;
  gap: var(--pc-sp-2);
  font-family: var(--pc-font-display);
  font-weight: var(--pc-fw-semibold);
  font-size: var(--pc-fs-lg);
  color: var(--pc-ink);
  letter-spacing: var(--pc-tr-tight);
  text-decoration: none;
}
.pc-header__brand-logo {
  display: block;
  width: auto;
  height: 26px;
  flex-shrink: 0;
}
.pc-header__brand-logo--icon {
  width: auto;
  height: 26px;
}
.pc-header__brand .pc-header__brand-logo--icon {
  width: auto;
  height: 26px;
}
.pc-header__brand-name {
  font-family: var(--pc-font-display);
  font-weight: var(--pc-fw-semibold);
  font-size: var(--pc-fs-xl);
  letter-spacing: var(--pc-tr-tighter);
  color: var(--pc-ink);
  line-height: 1;
}
.pc-header__brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 18%;
  background: var(--pc-carmin);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pc-header__nav {
  display: flex;
  gap: var(--pc-sp-3);
  font-size: var(--pc-fs-sm);
  font-weight: var(--pc-fw-medium);
  flex: 1;
  justify-content: center;
}
.pc-header__nav a {
  padding: var(--pc-sp-2) var(--pc-sp-3);
  color: var(--pc-ink-soft);
  border-radius: var(--pc-radius-sm);
  text-decoration: none;
  transition: background-color var(--pc-dur-fast) var(--pc-ease-out),
    color var(--pc-dur-fast) var(--pc-ease-out);
}
.pc-header__nav a:hover {
  background: var(--pc-ivory-warm);
  color: var(--pc-ink);
  opacity: 1;
}
.pc-header__nav a.is-active,
.pc-header__nav a[aria-current="page"] {
  background: var(--pc-ink);
  color: var(--pc-ivory);
  opacity: 1;
}
.pc-header__actions { display: flex; align-items: center; gap: var(--pc-sp-2); }
*/

/* DARK MODE UNPLUGGED — bouton masqué jusqu’à réactivation */
.pc-theme-toggle { display: none !important; }

/* Thème : une seule icône visible (lune = activer le sombre, soleil = activer le clair).
   Le HTML contient les deux SVG ; l’attribut hidden seul ne suffit pas partout. */
.pc-theme-toggle .pc-theme-toggle__moon,
.pc-theme-toggle .pc-theme-toggle__sun {
  display: block;
  line-height: 0;
}
.pc-theme-toggle .pc-theme-toggle__sun {
  display: none;
}
html[data-theme="dark"] .pc-theme-toggle .pc-theme-toggle__moon {
  display: none;
}
html[data-theme="dark"] .pc-theme-toggle .pc-theme-toggle__sun {
  display: block;
}

.pc-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--pc-radius-md);
  background: transparent;
  border: 1px solid transparent;
  color: var(--pc-ink-soft);
  cursor: pointer;
  transition: background-color var(--pc-dur-fast) var(--pc-ease-out),
              color var(--pc-dur-fast) var(--pc-ease-out);
}
.pc-icon-btn:hover { background: var(--pc-border); color: var(--pc-ink); }
.pc-header__hamburger { display: none; }

/* ============================================================
   LANGUAGE SWITCH
   ============================================================ */
.pc-lang-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-width: 62px;
  height: 36px;
  padding: 0 0.625rem;
  border-radius: var(--pc-radius-md);
  border: 1px solid var(--pc-border);
  background: color-mix(in srgb, var(--pc-bg) 86%, var(--pc-surface));
  color: var(--pc-ink-soft);
  cursor: pointer;
  font-family: var(--pc-font-mono);
  font-size: 11px;
  font-weight: var(--pc-fw-semibold);
  letter-spacing: var(--pc-tr-wide);
  line-height: 1;
  transition: background-color var(--pc-dur-fast) var(--pc-ease-out),
              border-color var(--pc-dur-fast) var(--pc-ease-out),
              color var(--pc-dur-fast) var(--pc-ease-out);
}
.pc-lang-switch:hover,
.pc-lang-switch:focus-visible {
  border-color: color-mix(in srgb, var(--pc-ink) 20%, var(--pc-border));
  background: var(--pc-ivory-warm);
  color: var(--pc-ink);
}
.pc-lang-switch [data-pc-lang-current] {
  color: var(--pc-ink);
}
.pc-lang-switch [data-pc-lang-next] {
  color: var(--pc-ink-faint);
}
.pc-login-page .pc-lang-switch {
  background: var(--pc-paper-card);
}
@media (max-width: 768px) {
  .pc-header__nav { display: none; }
  .pc-header__hamburger { display: inline-flex; }
  .pc-lang-switch {
    min-width: 54px;
    padding-inline: 0.5rem;
  }
}

/* ============================================================
   TABS
   ============================================================ */
.pc-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--pc-border); }
.pc-tab {
  padding: var(--pc-sp-3) var(--pc-sp-4);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--pc-ink-soft);
  font-family: var(--pc-font-text);
  font-size: var(--pc-fs-sm);
  font-weight: var(--pc-fw-medium);
  cursor: pointer;
  transition: color var(--pc-dur-fast) var(--pc-ease-out),
              border-color var(--pc-dur-fast) var(--pc-ease-out);
  margin-bottom: -1px;
}
.pc-tab:hover { color: var(--pc-ink); }
.pc-tab--active {
  color: var(--pc-ink);
  border-bottom-color: var(--pc-carmin);
  font-weight: var(--pc-fw-semibold);
}

.pc-tabs--pill {
  display: inline-flex;
  background: var(--pc-border);
  border-radius: var(--pc-radius-full);
  padding: var(--pc-sp-1);
  border: none;
  gap: var(--pc-sp-1);
}
.pc-tabs--pill .pc-tab {
  border-radius: var(--pc-radius-full);
  border-bottom: none;
  margin-bottom: 0;
  padding: var(--pc-sp-2) var(--pc-sp-4);
}
.pc-tabs--pill .pc-tab--active {
  background: var(--pc-surface);
  color: var(--pc-ink);
  box-shadow: var(--pc-shadow-sm);
}

/* ============================================================
   BADGE
   ============================================================ */
.pc-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--pc-sp-1);
  padding: 2px 8px;
  border-radius: var(--pc-radius-full);
  font-family: var(--pc-font-mono);
  font-size: 11px;
  font-weight: var(--pc-fw-medium);
  letter-spacing: var(--pc-tr-wide);
  text-transform: uppercase;
  background: var(--pc-border);
  color: var(--pc-ink-soft);
  border: 1px solid transparent;
  white-space: nowrap;
}
.pc-badge--md { font-size: 12px; padding: 3px 10px; }
.pc-badge--neutral { background: var(--pc-border); color: var(--pc-ink-soft); }
.pc-badge--success { background: rgba(63, 125, 88, 0.12); color: var(--pc-success); }
.pc-badge--warning { background: rgba(181, 118, 20, 0.12); color: var(--pc-warning); }
.pc-badge--error   { background: var(--pc-carmin-soft); color: var(--pc-carmin); }
.pc-badge--info    { background: var(--pc-border); color: var(--pc-ink); }

/* ============================================================
   INPUT / TEXTAREA / SELECT
   ============================================================ */
.pc-field { display: flex; flex-direction: column; gap: var(--pc-sp-1); }
.pc-label {
  font-size: var(--pc-fs-sm);
  font-weight: var(--pc-fw-medium);
  color: var(--pc-ink);
}
.pc-input, .pc-textarea, .pc-select {
  width: 100%;
  font-family: var(--pc-font-text);
  font-size: var(--pc-fs-sm);
  color: var(--pc-ink);
  background: var(--pc-surface);
  border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius-md);
  padding: 0.625rem 0.875rem;
  transition: border-color var(--pc-dur-fast) var(--pc-ease-out),
              box-shadow var(--pc-dur-fast) var(--pc-ease-out);
}
.pc-input::placeholder, .pc-textarea::placeholder {
  color: var(--pc-ink-faint);
}
.pc-input:focus-visible, .pc-textarea:focus-visible, .pc-select:focus-visible {
  outline: 2px solid var(--pc-carmin);
  outline-offset: 2px;
  border-color: var(--pc-carmin);
  box-shadow: 0 0 0 3px var(--pc-carmin-soft);
}
.pc-input:disabled, .pc-textarea:disabled, .pc-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--pc-border);
}
.pc-textarea { resize: vertical; min-height: 96px; }
.pc-helper { font-size: var(--pc-fs-xs); color: var(--pc-ink-soft); }
.pc-error  { font-size: var(--pc-fs-xs); color: var(--pc-carmin); }
.pc-field--error .pc-input,
.pc-field--error .pc-textarea,
.pc-field--error .pc-select {
  border-color: var(--pc-carmin);
}

/* ============================================================
   MODAL
   ============================================================ */
.pc-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 16, 12, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--pc-sp-4);
  animation: pc-fade-in var(--pc-dur-base) var(--pc-ease-out);
}
.pc-modal-overlay[hidden] {
  display: none;
}
.pc-modal {
  background: var(--pc-surface);
  border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius-xl);
  box-shadow: var(--pc-shadow-lg);
  max-width: 520px;
  width: 100%;
  max-height: 90vh;
  overflow: auto;
  animation: pc-modal-in var(--pc-dur-slow) var(--pc-ease-out);
}
.pc-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--pc-sp-6) var(--pc-sp-6) var(--pc-sp-3);
}
.pc-modal__title {
  font-family: var(--pc-font-display);
  font-weight: var(--pc-fw-semibold);
  font-size: var(--pc-fs-2xl);
  letter-spacing: var(--pc-tr-tight);
  color: var(--pc-ink);
}
.pc-modal__body { padding: 0 var(--pc-sp-6) var(--pc-sp-4); color: var(--pc-ink-soft); line-height: var(--pc-lh-normal); }
.pc-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--pc-sp-2);
  padding: var(--pc-sp-4) var(--pc-sp-6) var(--pc-sp-6);
  border-top: 1px solid var(--pc-border);
  background: var(--pc-bg);
  border-radius: 0 0 var(--pc-radius-xl) var(--pc-radius-xl);
}
@keyframes pc-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pc-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================================
   SEARCH — Pagefind Cmd/Ctrl+K
   ============================================================ */
body.pc-search-is-open {
  overflow: hidden;
}

.pc-search-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--pc-sp-2);
  min-height: 36px;
  padding: 0 var(--pc-sp-3);
  border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius-md);
  background: color-mix(in srgb, var(--pc-surface) 72%, transparent);
  color: var(--pc-ink-soft);
  font-family: var(--pc-font-text);
  font-size: var(--pc-fs-sm);
  cursor: pointer;
  transition: background-color var(--pc-dur-fast) var(--pc-ease-out),
              border-color var(--pc-dur-fast) var(--pc-ease-out),
              color var(--pc-dur-fast) var(--pc-ease-out);
}
.pc-search-trigger:hover {
  background: var(--pc-ivory-warm);
  border-color: var(--pc-ink-faint);
  color: var(--pc-ink);
}
.pc-search-trigger__icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.pc-search-trigger__kbd {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 6px;
  border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius-sm);
  background: var(--pc-bg);
  color: var(--pc-ink-faint);
  font-family: var(--pc-font-mono);
  font-size: 10px;
  letter-spacing: var(--pc-tr-wide);
}
.pc-search-modal-overlay {
  align-items: flex-start;
  padding-top: min(12vh, var(--pc-sp-16));
  background: color-mix(in srgb, var(--pc-ink) 54%, transparent);
}
.pc-search-modal {
  max-width: 680px;
  overflow: hidden;
}
.pc-search-modal .pc-modal__header {
  align-items: flex-start;
  gap: var(--pc-sp-4);
}
.pc-search-modal .pc-modal__title {
  font-size: var(--pc-fs-xl);
}
.pc-search-modal__hint {
  margin-top: var(--pc-sp-1);
  color: var(--pc-ink-soft);
  font-size: var(--pc-fs-sm);
}
.pc-search-box {
  display: grid;
  gap: var(--pc-sp-3);
}
.pc-search-box__label {
  font-size: var(--pc-fs-sm);
  font-weight: var(--pc-fw-semibold);
  color: var(--pc-ink);
}
.pc-search-box__input-wrap {
  position: relative;
}
.pc-search-box__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 18px;
  height: 18px;
  color: var(--pc-ink-faint);
  transform: translateY(-50%);
  pointer-events: none;
}
.pc-search-input {
  padding-left: 2.75rem;
  font-size: var(--pc-fs-base);
}
.pc-search-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pc-sp-3);
  padding-top: var(--pc-sp-2);
}
@media (max-width: 520px) {
  .pc-search-filters {
    grid-template-columns: 1fr;
  }
}
.pc-search-filters__field {
  display: grid;
  gap: var(--pc-sp-1);
  min-width: 0;
}
.pc-search-filters__label {
  font-size: var(--pc-fs-xs);
  font-weight: var(--pc-fw-semibold);
  color: var(--pc-ink-soft);
  letter-spacing: var(--pc-tr-wide);
  text-transform: uppercase;
}
.pc-search-filters__select {
  width: 100%;
  min-height: 40px;
  padding: 0.5rem 0.75rem;
  font-size: var(--pc-fs-sm);
  color: var(--pc-ink);
  background: var(--pc-bg);
  border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius-md);
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--pc-ink-soft) 50%),
    linear-gradient(135deg, var(--pc-ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 2px), calc(100% - 12px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.pc-search-filters__select:focus {
  outline: 2px solid var(--pc-carmin);
  outline-offset: 2px;
}
.pc-search-status {
  min-height: 1.4em;
  color: var(--pc-ink-soft);
  font-size: var(--pc-fs-sm);
}
.pc-search-results {
  display: grid;
  gap: var(--pc-sp-2);
  max-height: min(48vh, 440px);
  margin-top: var(--pc-sp-4);
  padding-top: var(--pc-sp-4);
  overflow: auto;
  border-top: 1px solid var(--pc-border);
}
.pc-search-result {
  display: block;
  padding: var(--pc-sp-3);
  border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius-md);
  background: var(--pc-bg);
  color: var(--pc-ink);
  text-decoration: none;
}
.pc-search-result:hover {
  border-color: var(--pc-ink-faint);
  background: var(--pc-ivory-warm);
  opacity: 1;
}
.pc-search-result--active {
  border-color: var(--pc-carmin);
  background: var(--pc-carmin-soft);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pc-carmin) 35%, transparent);
}
.pc-search-result--active .pc-search-result__title {
  color: var(--pc-ink);
}
.pc-search-result__title {
  display: block;
  font-family: var(--pc-font-display);
  font-weight: var(--pc-fw-semibold);
  letter-spacing: var(--pc-tr-tight);
}
.pc-search-result__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pc-sp-2);
  margin-top: var(--pc-sp-2);
}
.pc-search-result__chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0.2rem 0.5rem;
  border-radius: var(--pc-radius-full);
  border: 1px solid var(--pc-border);
  background: var(--pc-surface);
  color: var(--pc-ink-soft);
  font-size: var(--pc-fs-xs);
  font-weight: var(--pc-fw-medium);
  line-height: 1.2;
}
.pc-search-result__chip[data-chip="famille"] {
  border-color: color-mix(in srgb, var(--pc-ink) 18%, var(--pc-border));
}
.pc-search-result__chip[data-chip="persona"] {
  border-color: color-mix(in srgb, var(--pc-carmin) 28%, var(--pc-border));
  color: var(--pc-ink);
}
.pc-search-result__excerpt {
  display: block;
  margin-top: var(--pc-sp-1);
  color: var(--pc-ink-soft);
  font-size: var(--pc-fs-sm);
  line-height: var(--pc-lh-normal);
}
.pc-search-result__excerpt mark {
  background: var(--pc-carmin-soft);
  color: var(--pc-carmin-deep);
  border-radius: var(--pc-radius-sm);
  padding: 0 2px;
}
.pc-search-result__url {
  display: block;
  margin-top: var(--pc-sp-2);
  color: var(--pc-ink-faint);
  font-family: var(--pc-font-mono);
  font-size: 11px;
  overflow-wrap: anywhere;
}
/* Empty state recherche (Phase 5B Batch C) — variante S + cellule manquante */
.pc-search-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pc-sp-4);
  padding: var(--pc-sp-4);
  text-align: center;
}

.pc-search-empty-state__viz {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
}

.pc-search-empty-state__viz .pc-search-empty-hsig {
  max-width: 280px;
  width: 100%;
  min-height: 140px;
  aspect-ratio: 2 / 1;
  border-radius: var(--pc-radius-md);
  border: 1px solid var(--pc-border);
  box-shadow: var(--pc-shadow-sm);
}

.pc-search-empty-state__icon {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pc-ink-soft);
  opacity: 0.5;
  pointer-events: none;
}

.pc-search-empty-state__icon svg {
  width: 100%;
  height: 100%;
}

.pc-search-empty-state__title {
  margin: 0;
  font-family: var(--pc-font-display);
  font-size: var(--pc-fs-lg);
  font-weight: var(--pc-fw-semibold);
  letter-spacing: var(--pc-tr-tight);
  color: var(--pc-ink);
  max-width: 36ch;
}

.pc-search-empty-state__hint {
  margin: 0;
  font-size: var(--pc-fs-sm);
  line-height: var(--pc-lh-snug);
  color: var(--pc-ink-soft);
  max-width: 40ch;
}

.pc-search-empty-state__hint a {
  color: var(--pc-carmin);
  font-weight: var(--pc-fw-medium);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pc-search-empty-state__hint a:hover {
  color: var(--pc-carmin-deep);
}

@media (max-width: 960px) {
  .pc-search-trigger__label,
  .pc-search-trigger__kbd {
    display: none;
  }
  .pc-search-trigger {
    width: 36px;
    justify-content: center;
    padding: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pc-search-trigger,
  .pc-search-result {
    transition: none;
  }
  .pc-search-modal-overlay,
  .pc-search-modal {
    animation: none;
  }
}

/* Pages système : trigger icône seule (login, 404, access-denied, deconnexion) */
.pc-login-page .pc-search-trigger,
.pc-404-page .pc-search-trigger {
  width: 36px;
  padding: 0;
  justify-content: center;
}
.pc-login-page .pc-search-trigger__label,
.pc-login-page .pc-search-trigger__kbd,
.pc-404-page .pc-search-trigger__label,
.pc-404-page .pc-search-trigger__kbd {
  display: none;
}

/* ============================================================
   SEARCH HERO (home seulement)
   ============================================================ */
.pc-search-hero-section {
  text-align: center;
}

.pc-search-hero__title {
  font-family: var(--pc-font-display);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: var(--pc-fw-semibold);
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--pc-ink);
  margin: 0 0 var(--pc-sp-3);
  font-variation-settings: 'opsz' 96;
}
.pc-search-hero__title em {
  font-style: italic;
  color: var(--pc-carmin);
}

.pc-search-hero__sub {
  max-width: 56ch;
  margin: 0 auto var(--pc-sp-8);
  font-size: var(--pc-fs-lg);
  line-height: var(--pc-lh-normal);
  color: var(--pc-ink-soft);
}

/* Grand bouton search — apparence d'input, comportement de bouton */
.pc-search-hero {
  display: flex;
  align-items: center;
  gap: var(--pc-sp-3);
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: var(--pc-sp-4) var(--pc-sp-5);
  border: 1.5px solid var(--pc-border);
  border-radius: var(--pc-radius-lg);
  background: var(--pc-surface);
  color: var(--pc-ink-faint);
  font-family: var(--pc-font-text);
  font-size: var(--pc-fs-lg);
  cursor: pointer;
  text-align: left;
  box-shadow: 0 12px 40px -16px rgba(60, 40, 20, 0.16);
  transition: border-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pc-search-hero:hover,
.pc-search-hero:focus-visible {
  border-color: var(--pc-ink-soft);
  box-shadow: 0 16px 48px -16px rgba(60, 40, 20, 0.22);
  outline: none;
}
.pc-search-hero:focus-visible {
  outline: 2px solid var(--pc-carmin);
  outline-offset: 2px;
}

.pc-search-hero__icon {
  flex-shrink: 0;
  color: var(--pc-ink-faint);
}

.pc-search-hero__placeholder {
  flex: 1;
  color: var(--pc-ink-faint);
  font-size: var(--pc-fs-base);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pc-search-hero__kbd {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--pc-radius-sm);
  background: var(--pc-ivory-warm);
  font-family: var(--pc-font-mono);
  font-size: 11px;
  color: var(--pc-ink-soft);
  letter-spacing: 0.04em;
}

/* Chips de suggestion */
.pc-search-hero__suggest {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--pc-sp-2);
  margin-top: var(--pc-sp-6);
}

.pc-search-hero__chip {
  padding: 6px 14px;
  border: 1px solid var(--pc-border);
  border-radius: 999px;
  background: transparent;
  font-family: var(--pc-font-mono);
  font-size: var(--pc-fs-xs);
  color: var(--pc-ink-soft);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
              background-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
              color 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pc-search-hero__chip:hover,
.pc-search-hero__chip:focus-visible {
  border-color: var(--pc-ink-soft);
  background: var(--pc-ivory-warm);
  color: var(--pc-ink);
  outline: none;
}
.pc-search-hero__chip:focus-visible {
  outline: 2px solid var(--pc-carmin);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .pc-search-hero {
    padding: var(--pc-sp-3) var(--pc-sp-4);
    font-size: var(--pc-fs-base);
  }
  .pc-search-hero__placeholder {
    font-size: var(--pc-fs-sm);
  }
  .pc-search-hero__kbd {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pc-search-hero,
  .pc-search-hero__chip {
    transition: none;
  }
}

/* ============================================================
   TOOLTIP (CSS pur via group + JS minimal)
   ============================================================ */
.pc-tooltip-wrap { position: relative; display: inline-block; }
.pc-tooltip {
  position: absolute;
  z-index: 50;
  background: var(--pc-ink);
  color: var(--pc-ivory);
  font-family: var(--pc-font-text);
  font-size: var(--pc-fs-xs);
  padding: var(--pc-sp-2) var(--pc-sp-3);
  border-radius: var(--pc-radius-md);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--pc-dur-fast) var(--pc-ease-out),
              transform var(--pc-dur-fast) var(--pc-ease-out);
  box-shadow: var(--pc-shadow-md);
}
.pc-tooltip-wrap:hover .pc-tooltip,
.pc-tooltip-wrap:focus-within .pc-tooltip {
  opacity: 1;
}
.pc-tooltip--top    { bottom: 100%; left: 50%; transform: translate(-50%, -4px); margin-bottom: 6px; }
.pc-tooltip--bottom { top: 100%;    left: 50%; transform: translate(-50%, 4px);  margin-top: 6px; }
.pc-tooltip--left   { right: 100%;  top: 50%;  transform: translate(-4px, -50%); margin-right: 6px; }
.pc-tooltip--right  { left: 100%;   top: 50%;  transform: translate(4px, -50%);  margin-left: 6px; }
.pc-tooltip-wrap:hover .pc-tooltip--top    { transform: translate(-50%, 0); }
.pc-tooltip-wrap:hover .pc-tooltip--bottom { transform: translate(-50%, 0); }
.pc-tooltip-wrap:hover .pc-tooltip--left   { transform: translate(0, -50%); }
.pc-tooltip-wrap:hover .pc-tooltip--right  { transform: translate(0, -50%); }

/* ============================================================
   ALERT
   ============================================================ */
.pc-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--pc-sp-3);
  padding: var(--pc-sp-4);
  border-radius: var(--pc-radius-md);
  border: 1px solid var(--pc-border);
  background: var(--pc-surface);
  color: var(--pc-ink);
  font-size: var(--pc-fs-sm);
  line-height: var(--pc-lh-normal);
}
.pc-alert__icon { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; }
.pc-alert__body { flex: 1; }
.pc-alert__title {
  font-weight: var(--pc-fw-semibold);
  margin-bottom: var(--pc-sp-1);
  color: var(--pc-ink);
}
.pc-alert__close {
  background: transparent;
  border: none;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
  padding: 0;
  display: inline-flex;
}
.pc-alert__close:hover { opacity: 1; }

.pc-alert--info    { border-color: var(--pc-border); }
.pc-alert--info    .pc-alert__icon { color: var(--pc-ink-soft); }
.pc-alert--success { border-color: rgba(63, 125, 88, 0.4); background: rgba(63, 125, 88, 0.06); }
.pc-alert--success .pc-alert__icon { color: var(--pc-success); }
.pc-alert--warning { border-color: rgba(181, 118, 20, 0.4); background: rgba(181, 118, 20, 0.06); }
.pc-alert--warning .pc-alert__icon { color: var(--pc-warning); }
.pc-alert--error   { border-color: var(--pc-carmin); background: var(--pc-carmin-soft); }
.pc-alert--error   .pc-alert__icon { color: var(--pc-carmin); }
:root.dark .pc-alert--success { background: rgba(95, 166, 123, 0.10); }
:root.dark .pc-alert--warning { background: rgba(216, 154, 62, 0.10); }

/* ============================================================
   Bloc identité « masthead » (premier contact login + home)
   Logo + wordmark + filet carmin + tagline. Réf. BRIEF Phase 5B §10.
   ============================================================ */
.pc-brand-masthead {
  display: flex;
  align-items: stretch;
  gap: var(--pc-sp-4);
  margin: 0 0 var(--pc-sp-8);
  text-align: start;
}

.pc-brand-masthead__mark {
  display: block;
  width: clamp(40px, 5vw, 52px);
  height: auto;
  flex-shrink: 0;
}

.pc-brand-masthead__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--pc-sp-1);
  padding-left: var(--pc-sp-4);
  border-left: 3px solid var(--pc-carmin);
  min-height: 48px;
}

.pc-brand-masthead__name {
  font-family: var(--pc-font-display);
  font-size: clamp(1.65rem, 2.6vw, 2.65rem);
  font-weight: var(--pc-fw-semibold);
  letter-spacing: var(--pc-tr-tight);
  color: var(--pc-ink);
  line-height: 1.05;
}

.pc-brand-masthead__tag {
  font-size: var(--pc-fs-sm);
  font-weight: var(--pc-fw-medium);
  letter-spacing: var(--pc-tr-wider);
  text-transform: uppercase;
  color: var(--pc-ink-soft);
}

/* C13 - Italique editorial Fraunces */
.pc-edito {
  font-family: var(--pc-font-display);
  font-style: italic;
  font-weight: var(--pc-fw-medium);
}

/* ============================================================
   ILLUSTRATIONS — visuel humain (C33)
   Photos bichromie + objets metier IA, palette ivoire/encre/carmin uniquement.
   ============================================================ */

.pc-illu {
  display: block;
  width: 100%;
  border-radius: var(--pc-radius-lg);
  background: var(--pc-ivory-warm);
  overflow: hidden;
}

/* Ne pas styler <source> (métadonnées du <picture>) : layout + height 100 % peut masquer l’image. */
.pc-illu picture {
  display: block;
  width: 100%;
  height: 100%;
}

.pc-illu img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pc-illu--photo {
  aspect-ratio: 16 / 9;
  max-width: 900px;
  margin-inline: auto;
  box-shadow: 0 4px 16px -8px rgba(60, 40, 20, 0.12);
}

body[data-layout="guide-toc"] .pc-illu--photo,
body[data-layout="guide-visual"] .pc-illu--photo {
  margin-block: var(--pc-sp-8) var(--pc-sp-12);
}

.pc-illu--object {
  aspect-ratio: 1 / 1;
  max-width: 320px;
}

.pc-illu--object-portrait {
  aspect-ratio: 4 / 5;
  max-width: 280px;
}