/* intra-theme.css — charte perroquet.eu partagée par le portail, le blog et automaj (servie sur /assets/) */
/* La police Perroquet contient des glyphes vides (" ' < > ^ | · © § ß ñ ã å † ◊…, relevés au rendu) :
   unicode-range les exclut pour qu'ils viennent de la police de repli. */
@font-face { font-family: 'Perroquet'; src: url('/assets/fonts/PERROQUET-REGULAR.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-0021, U+0023-0026, U+0028-003B, U+003D, U+003F-005D, U+005F-007B, U+007D-00A0, U+00A2-00A5, U+00A8, U+00AA-00AD, U+00AF-00B5, U+00B8-00BE, U+00C0-00C2, U+00C4, U+00C6-00D0, U+00D2-00D4, U+00D6-00D7, U+00D9-00DC, U+00E0-00E2, U+00E4, U+00E6-00EF, U+00F2-00F4, U+00F6-00FC, U+0100-0173, U+0179-201F, U+2022-25C9, U+25CB-10FFFF; }
@font-face { font-family: 'Perroquet'; src: url('/assets/fonts/PERROQUET-BOLD.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-0021, U+0023-0026, U+0028-003B, U+003D, U+003F-005D, U+005F-007B, U+007D-00A0, U+00A2-00A5, U+00A8, U+00AA-00AD, U+00AF-00B5, U+00B8-00BE, U+00C0-00C2, U+00C4, U+00C6-00D0, U+00D2-00D4, U+00D6-00D7, U+00D9-00DC, U+00E0-00E2, U+00E4, U+00E6-00EF, U+00F2-00F4, U+00F6-00FC, U+0100-0173, U+0179-201F, U+2022-25C9, U+25CB-10FFFF; }

:root {
  --intra-primary: #8827FF;
  --intra-accent: #7600FF;
  --intra-dark: #4F00AF;
  --intra-secondary: #AC65FF;
  --intra-lavender: #B1A2FF;
  --intra-bg: #F5F3F9;
  --intra-bg-alt: #F0EDF6;
  --intra-surface: #FFFFFF;
  --intra-text: #2C2C2C;
  --intra-text-soft: #3A3A3A;
  --intra-muted: #6E6A78;
  --intra-border: #DFDFDF;
  --intra-success: #1A7F4B;
  --intra-success-bg: #E6F6EE;
  --intra-danger: #B42318;
  --intra-danger-bg: #FDECEA;
  --intra-warning: #8A5A00;
  --intra-warning-bg: #FFF4DB;
  --intra-radius: 6px;
  --intra-radius-pill: 25px;
  --intra-font: 'Perroquet', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --intra-shadow: 0 1px 2px rgba(44, 44, 44, .06), 0 8px 24px rgba(79, 0, 175, .06);
  --intra-topbar-height: 60px;
}

/* Barre commune : identique dans le portail (HTML) et dans les outils (composant React) */
.intra-topbar { position: sticky; top: 0; z-index: 1000; display: flex; align-items: center; gap: 20px; height: var(--intra-topbar-height); padding: 0 24px; background: var(--intra-surface); border-bottom: 1px solid var(--intra-border); font-family: var(--intra-font); font-size: 14px; color: var(--intra-text); box-sizing: border-box; }
.intra-topbar * { box-sizing: border-box; }
.intra-topbar__brand { display: inline-flex; align-items: center; }
.intra-topbar__brand img { display: block; height: 29px; width: auto; }
.intra-topbar__tool { font-weight: 700; color: var(--intra-dark); padding-left: 16px; border-left: 1px solid var(--intra-border); line-height: 1; }
.intra-topbar__nav { display: flex; gap: 4px; flex: 1; }
.intra-topbar__nav a, .intra-topbar__user { color: var(--intra-text-soft); text-decoration: none; padding: 6px 12px; border-radius: var(--intra-radius-pill); }
.intra-topbar__nav a:hover, .intra-topbar__user:hover { background: var(--intra-bg-alt); }
.intra-topbar__nav a[aria-current="page"], .intra-topbar__user[aria-current="page"] { background: var(--intra-bg-alt); color: var(--intra-dark); font-weight: 700; }
.intra-topbar__right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.intra-topbar__right form { margin: 0; }

/* Composants */
.intra-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 22px; border-radius: var(--intra-radius-pill); border: 1px solid var(--intra-primary); background: var(--intra-primary); color: #fff; font-family: var(--intra-font); font-size: 15px; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.intra-btn:hover { background: var(--intra-accent); border-color: var(--intra-accent); color: #fff; }
.intra-btn:focus-visible, .intra-input:focus-visible, .intra-topbar a:focus-visible { outline: 2px solid var(--intra-accent); outline-offset: 2px; }
.intra-btn--ghost { background: transparent; color: var(--intra-dark); border-color: var(--intra-border); }
.intra-btn--ghost:hover { background: var(--intra-bg-alt); border-color: var(--intra-lavender); color: var(--intra-dark); }
.intra-btn--danger { background: transparent; color: var(--intra-danger); border-color: var(--intra-danger); }
.intra-btn--danger:hover { background: var(--intra-danger-bg); border-color: var(--intra-danger); color: var(--intra-danger); }
.intra-btn--sm { padding: 6px 14px; font-size: 13px; }
.intra-btn[disabled], .intra-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.intra-card { background: var(--intra-surface); border: 1px solid var(--intra-border); border-radius: var(--intra-radius); box-shadow: var(--intra-shadow); padding: 24px; }
.intra-input { width: 100%; padding: 10px 12px; border: 1px solid var(--intra-border); border-radius: var(--intra-radius); background: var(--intra-surface); color: var(--intra-text); font-family: var(--intra-font); font-size: 15px; }
.intra-input:focus { border-color: var(--intra-primary); }
.intra-input:focus:not(:focus-visible) { outline: none; }

@media (max-width: 720px) {
  .intra-topbar { gap: 10px; padding: 0 12px; }
  .intra-topbar__tool { display: none; }
  .intra-topbar__nav { overflow-x: auto; }
}