/*
 * Thème du back-office Pharmaceutiques (Filament, /admin).
 * Monde « chemin de fer » : planche grise, feuilles blanches à filets fins, cyan de la marque.
 * Feuille servie telle quelle (pas de build) et chargée après la CSS de Filament.
 */

:root {
    --pq-board: #e7e9ec;
    --pq-sheet: #ffffff;
    --pq-sheet-2: #f5f6f8;
    --pq-rule: #d3d7dc;
    --pq-rule-strong: #b9bfc6;
    --pq-ink: #1a1d21;
    --pq-ink-2: #4f5660;
    --pq-ink-3: #656c75;
    --pq-cyan: #1ba4d8;
    --pq-cyan-ink: #0b6a90;
    --pq-cyan-wash: #e3f4fb;
    --pq-violet: #6b5bb5;
    --pq-violet-wash: #eeebf8;
    --pq-amber: #c27c0e;
    --pq-amber-ink: #8a5300;
    --pq-amber-wash: #fdf3e1;
    --pq-green-ink: #1c7a45;
    --pq-green-wash: #e5f4ea;
    --pq-hatch: #e2e5e9;
    --pq-shadow: 0 1px 2px rgb(26 29 33 / 0.06);
    --radius-lg: 0.375rem;
    --radius-xl: 0.5rem;
}

.dark {
    --pq-board: #14171b;
    --pq-sheet: #1c2025;
    --pq-sheet-2: #23282e;
    --pq-rule: #2e343b;
    --pq-rule-strong: #414851;
    --pq-ink: #e8eaed;
    --pq-ink-2: #b4bac2;
    --pq-ink-3: #9aa1aa;
    --pq-cyan-ink: #6cc8ec;
    --pq-cyan-wash: #12313f;
    --pq-violet: #9a8de0;
    --pq-violet-wash: #29253f;
    --pq-amber: #e0a23a;
    --pq-amber-ink: #f0bd66;
    --pq-amber-wash: #3a2c12;
    --pq-green-ink: #6fcf97;
    --pq-green-wash: #173326;
    --pq-hatch: #2a3037;
    --pq-shadow: 0 1px 2px rgb(0 0 0 / 0.3);
}

.pq-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---- Surfaces du navigateur -------------------------------------------- */

::selection { background: color-mix(in oklab, var(--pq-cyan) 28%, transparent); }
html { scrollbar-color: var(--pq-rule-strong) transparent; scrollbar-width: thin; accent-color: var(--pq-cyan); }
a { text-underline-offset: 0.2em; }

/* ---- Planche et feuilles ------------------------------------------------- */

.fi-body { background-color: var(--pq-board); color: var(--pq-ink); }
.fi-body:where(.dark, .dark *) { background-color: var(--pq-board); }

.fi-topbar,
.fi-sidebar-header {
    background-color: var(--pq-sheet);
    box-shadow: none;
    border-bottom: 1px solid var(--pq-rule);
}

@media (min-width: 64rem) {
    .fi-sidebar { background-color: var(--pq-sheet); border-inline-end: 1px solid var(--pq-rule); }
}
.fi-sidebar { background-color: var(--pq-sheet); }

.fi-ta-ctn,
.fi-section:not(.fi-section-not-contained):not(.fi-aside),
.fi-simple-main,
.fi-wi-stats-overview-stat,
.fi-dropdown-panel,
.fi-modal-window {
    background-color: var(--pq-sheet);
    box-shadow: 0 0 0 1px var(--pq-rule), var(--pq-shadow);
}

/* ---- Typographie ---------------------------------------------------------- */

.fi-header-heading { font-size: 1.625rem; line-height: 2rem; letter-spacing: -0.01em; color: var(--pq-ink); }
.fi-header-subheading { color: var(--pq-ink-2); }

.fi-sidebar-group-label,
.fi-ta-header-cell,
.fi-ta-header-cell-sort-btn,
.fi-section-header-heading.pq-caps {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pq-ink-3);
}

/* Chiffres tabulaires seulement sur les colonnes numériques (ils élargissent la ponctuation). */
.pq-num, .pq-num * { font-variant-numeric: tabular-nums; }
.fi-ta-text-description { color: var(--pq-ink-3); }

/* Textes d'attente : lisibles (4,5:1), plus discrets que la saisie par le ton, pas par la couleur. */
.fi-input::placeholder, .fi-ta-placeholder { color: var(--pq-ink-3); opacity: 1; }
.fi-ta-placeholder { font-style: italic; }

/* Pastilles Filament alignées sur celles du monde (.pq-pill). */
.fi-badge { border-radius: 999px; font-weight: 600; }

/* ---- Navigation ----------------------------------------------------------- */

.fi-sidebar-nav { padding-block: 1.25rem; row-gap: 1.25rem; }
.fi-sidebar-item-btn { border-radius: var(--radius-lg); }
.fi-sidebar-item-label { color: var(--pq-ink-2); font-weight: 500; }
.fi-sidebar-item-btn:hover { background-color: var(--pq-sheet-2); }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background-color: var(--pq-board); }
.fi-sidebar-item.fi-active .fi-sidebar-item-label { color: var(--pq-ink); font-weight: 600; }
.fi-sidebar-item.fi-active .fi-icon { color: var(--pq-cyan-ink); }

/* ---- Tableaux ------------------------------------------------------------- */

/* Bandeau d'en-tête peint sur toute la ligne, colonne d'actions comprise. */
.fi-ta-ctn thead > tr { background-color: var(--pq-sheet-2); }
.fi-ta-header-cell { padding-block: 0.625rem; }
.fi-ta-row { transition: background-color 120ms ease-out; }
.fi-ta-row:hover { background-color: color-mix(in oklab, var(--pq-cyan-wash) 55%, var(--pq-sheet)); }
.fi-ta-cell { padding-block: 0.125rem; }
/* Filament met 1rem au-dessus et au-dessous du texte : trop aéré pour des listes de référence. */
.fi-ta-text { padding-block: 0.625rem; }
.fi-ta-header-toolbar { border-bottom: 1px solid var(--pq-rule); padding-block: 0.5rem; }

/* Colonnes d'identité : adresses sur une ligne, coupées proprement. */
.pq-col-ident .fi-ta-text-description { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 14rem; }
/* Colonne d'identité qui prend la place libre (grow) : la ligne d'identifiant peut s'étendre. */
/* Colonne qui prend la place libre : la ligne suit la largeur de la colonne au lieu de l'imposer (sinon la table déborde). */
.pq-col-ident.pq-col-wide .fi-ta-text-description { max-width: 40rem; white-space: normal; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.fi-ta-text-item.pq-quiet, .pq-quiet .fi-ta-text-item-label { color: var(--pq-ink-3); font-size: 0.8125rem; }
/* Icône de la forme d'un article : Filament la pose en ligne, 3px au-dessus du centre du libellé. */
/* La classe tombe sur l'élément texte, ou sur son parent quand une description (Chiffre du jour) suit. */
.fi-ta-text-item.pq-col-forme > .fi-icon, .pq-col-forme .fi-ta-text-item > .fi-icon { vertical-align: -0.1875rem; }

/* En-tête du gestionnaire de sections : titre + gabarit. */
.pq-ta-header { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.pq-ta-header-main { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; flex: 1; }
.pq-heading-count { margin-inline-start: 0.375rem; font-weight: 500; color: var(--pq-ink-3); font-variant-numeric: tabular-nums; }
.pq-plan-header .pq-page { flex: 0 1 5rem; }
.pq-plan-header .pq-page-pub { flex: 0 0 1.75rem; }
.pq-plan-header .pq-page-pub-libre { flex: 0 0 1rem; }

/* ---- Logotype ------------------------------------------------------------- */

.pq-brand { display: inline-flex; align-items: center; position: relative; color: var(--pq-ink-2); line-height: 1; padding-bottom: 7px; }
.pq-brand-p {
    display: inline-grid; place-items: center;
    width: 1.375rem; height: 1.375rem; border-radius: 50%;
    border: 2px solid var(--pq-cyan); color: var(--pq-ink-2);
    font-weight: 600; font-size: 0.8125rem; margin-inline-end: 1px;
}
.pq-brand-word { font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.pq-brand-dots { position: absolute; right: 0; bottom: 0; display: flex; gap: 3px; }
.pq-brand-dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--pq-cyan); }
.pq-brand-dots i:nth-child(2) { opacity: 0.8; }
.pq-brand-dots i:nth-child(3) { opacity: 0.6; }
.pq-brand-dots i:nth-child(4) { opacity: 0.4; }
.pq-brand-dots i:nth-child(5) { opacity: 0.22; }

/* ---- Revues en cours ------------------------------------------------------ */

.pq-summary { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: -1rem; color: var(--pq-ink-2); font-variant-numeric: tabular-nums; }
.pq-summary > span:first-child { color: var(--pq-ink); font-weight: 600; }
.pq-summary b { color: var(--pq-ink); font-weight: 650; }
.pq-summary-alert, .pq-summary-alert b { color: var(--pq-amber-ink); }

.pq-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.75rem; color: var(--pq-ink-2); }
.pq-legend li { display: inline-flex; align-items: center; gap: 0.4rem; }
.pq-key { width: 0.75rem; height: 0.75rem; border-radius: 2px; border: 1px solid var(--pq-rule-strong); background: var(--pq-sheet); position: relative; overflow: hidden; }
.pq-key::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--pq-band, transparent); }

.pq-group { display: flex; flex-direction: column; gap: 0.5rem; }
.fi-page-content:has(> .pq-group) { row-gap: 1.75rem; }
.pq-group-title {
    display: flex; align-items: baseline; gap: 0.5rem;
    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pq-ink-2);
}
/* Sur la planche, ink-3 passe sous 4,5:1 : les textes posés dessus prennent ink-2. */
.pq-group-title span { font-weight: 500; letter-spacing: 0; color: var(--pq-ink-2); font-variant-numeric: tabular-nums; }
.pq-group-empty { padding: 0.875rem 1.125rem; border: 1px dashed var(--pq-rule-strong); border-radius: var(--radius-xl); color: var(--pq-ink-2); font-size: 0.875rem; }

.pq-row {
    display: grid; grid-template-columns: minmax(15rem, 22rem) minmax(0, 1fr) minmax(8rem, 12rem); gap: 1.25rem; align-items: center;
    padding: 0.5rem 0.875rem; border-radius: var(--radius-xl);
    background: var(--pq-sheet); box-shadow: 0 0 0 1px var(--pq-rule), var(--pq-shadow);
    color: inherit; text-decoration: none;
    transition: box-shadow 160ms cubic-bezier(0.16, 1, 0.3, 1), transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.pq-row:hover { box-shadow: 0 0 0 1px var(--pq-rule-strong), 0 6px 16px -8px rgb(26 29 33 / 0.25); transform: translateY(-1px); }
.pq-row:focus-visible { outline: 2px solid var(--pq-cyan); outline-offset: 2px; }
.pq-row-alert { box-shadow: 0 0 0 1px color-mix(in oklab, var(--pq-amber) 55%, var(--pq-rule)), var(--pq-shadow); }

.pq-row-info { min-width: 0; }
.pq-row-meta, .pq-row-to { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Deux lignes au plus : les intitulés voisins diffèrent souvent par leur fin (la date). */
.pq-row-title { font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-wrap: pretty; }
.pq-row-meta { margin-top: 0.125rem; font-size: 0.8125rem; line-height: 1.35; color: var(--pq-ink-2); }
/* Le séparateur colle à l'élément qui le précède : jamais de ligne qui commence par « · ». */
.pq-row-meta span:not(:last-child)::after { content: "\00a0·"; margin-inline-end: 0.15rem; color: var(--pq-ink-3); }
.pq-row-to { display: flex; align-items: center; gap: 0.3rem; margin-top: 0.125rem; font-size: 0.75rem; line-height: 1.35; color: var(--pq-ink-3); }
.pq-row-to span { overflow: hidden; text-overflow: ellipsis; }
.pq-row-to-icon { width: 0.875rem; height: 0.875rem; flex: none; }

.pq-row-state { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; text-align: right; min-width: 0; }
.pq-row-pills { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.25rem; }
.pq-row-count { font-size: 0.75rem; color: var(--pq-ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

.pq-pill { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.625rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; line-height: 1.25rem; white-space: nowrap; background: var(--pq-sheet-2); color: var(--pq-ink-2); box-shadow: inset 0 0 0 1px var(--pq-rule); }
.pq-pill-planifiee, .pq-pill-envoi-en-cours { background: var(--pq-cyan-wash); color: var(--pq-cyan-ink); box-shadow: none; }
.pq-pill-transmise { background: var(--pq-green-wash); color: var(--pq-green-ink); box-shadow: none; }
.pq-pill-alerte { background: var(--pq-amber-wash); color: var(--pq-amber-ink); box-shadow: none; padding-inline-start: 0.4rem; }
.pq-pill-icon { width: 0.875rem; height: 0.875rem; flex: none; }

/* ---- Couleurs de publication (CouleurSpecialite) ---------------------------
 * Un repère, pas un état : liseré ou pastille, toujours à côté du nom. Hors cyan, vert, ambre et violet.
 * Contraste d'au moins 4,7:1 sur la feuille, en clair comme en sombre. */
.pq-c-marine { --pq-spe: #2f5aa8; }
.pq-c-prune { --pq-spe: #8a3d8f; }
.pq-c-brique { --pq-spe: #b8442e; }
.pq-c-sarcelle { --pq-spe: #127a80; }
.pq-c-ocre { --pq-spe: #857300; }
.pq-c-ardoise { --pq-spe: #5a6a85; }
.pq-c-framboise { --pq-spe: #b8325f; }
.pq-c-brun { --pq-spe: #7d5536; }
.pq-c-neutre { --pq-spe: #8e959e; }
.dark .pq-c-marine { --pq-spe: #86a8ec; }
.dark .pq-c-prune { --pq-spe: #d690d9; }
.dark .pq-c-brique { --pq-spe: #ef8a73; }
.dark .pq-c-sarcelle { --pq-spe: #5cc3c9; }
.dark .pq-c-ocre { --pq-spe: #d1bd4e; }
.dark .pq-c-ardoise { --pq-spe: #a5b2c9; }
.dark .pq-c-framboise { --pq-spe: #f07fa5; }
.dark .pq-c-brun { --pq-spe: #c9a17f; }
.dark .pq-c-neutre { --pq-spe: #6b7178; }
.pq-spe-nom { display: inline-flex; align-items: center; gap: 0.4rem; min-width: 0; }
.pq-spe-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--pq-spe); flex: none; }
/* Liseré des lignes de la liste des revues (lignes de tableau, pas des cartes). */
.fi-ta-row.pq-spe > td:first-child { box-shadow: inset 3px 0 0 var(--pq-spe); }

/* ---- Chemin de fer (vignettes de pages) ---------------------------------- */

/* Une seule rangée : les pages rétrécissent plutôt que de passer à la ligne. */
.pq-plan { display: flex; align-items: flex-start; gap: 0.25rem; min-width: 0; }
.pq-page { flex: 0 1 5rem; min-width: 1.5rem; display: flex; flex-direction: column; gap: 0.25rem; }
.pq-page-sheet {
    position: relative; display: flex; flex-direction: column; gap: 3px;
    height: 2.5rem; padding: 0.55rem 0.3rem 0.3rem;
    background: var(--pq-sheet); border: 1px solid var(--pq-rule-strong); border-radius: 2px;
}
.pq-page-sheet::before { content: ""; position: absolute; inset: -1px -1px auto; height: 5px; border-radius: 2px 2px 0 0; background: var(--pq-band, transparent); }
.pq-page-sheet i { display: block; height: 3px; border-radius: 1px; background: var(--pq-rule); }
.pq-page-sheet i:nth-child(even) { width: 70%; }
/* Une ligne, coupée par une ellipse ; l'intitulé complet est dans l'infobulle et le texte d'accessibilité. */
.pq-page-label { display: flex; gap: 0.2rem; font-size: 0.6875rem; line-height: 1.2; color: var(--pq-ink-2); white-space: nowrap; min-width: 0; }
.pq-page-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pq-page-label b { flex: none; color: var(--pq-ink); font-weight: 650; font-variant-numeric: tabular-nums; }

.pq-page-annonce, .pq-key-annonce { --pq-band: var(--pq-cyan); }
.pq-page-section, .pq-key-section { --pq-band: var(--pq-ink-2); }
.pq-page-vide, .pq-key-vide { --pq-band: var(--pq-amber); }
.pq-page-vide .pq-page-sheet { border-style: dashed; border-color: var(--pq-amber); }
.pq-page-vide .pq-page-label { color: var(--pq-amber-ink); font-weight: 600; }
.pq-page-pub, .pq-key-pub { --pq-band: var(--pq-violet); }
.pq-page-pub .pq-page-sheet { background: var(--pq-violet-wash); }
/* Bannières : vignette étroite, réservée (violet) ou libre (hachurée), toujours nommée. */
.pq-page-pub { flex: 0 0 1.75rem; min-width: 0; }
.pq-page-pub .pq-page-name { text-overflow: clip; }
/* Emplacement libre : la hachure et la légende suffisent, la place va aux sections. */
.pq-page-pub-libre { flex: 0 0 1rem; min-width: 0; }
.pq-page-pub-libre .pq-page-sheet { padding: 0; }
.pq-page-pub-libre .pq-page-label { visibility: hidden; }
.pq-page-pub-libre .pq-page-sheet, .pq-key-pub-libre {
    background: repeating-linear-gradient(135deg, var(--pq-sheet) 0 3px, var(--pq-hatch) 3px 6px);
    border-style: dashed;
}
.pq-page-pub .pq-page-label, .pq-page-pub-libre .pq-page-label { color: var(--pq-ink-3); }
.pq-plan-empty { font-size: 0.8125rem; color: var(--pq-amber-ink); font-weight: 600; }
.pq-page-off .pq-page-sheet { border-style: dashed; background: transparent; }
.pq-page-off .pq-page-label { color: var(--pq-ink-3); text-decoration: line-through; }

/* Vignette « +N » : les sections au-delà de la place disponible. */
.pq-page-more .pq-page-sheet { padding: 0; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 650; color: var(--pq-ink-2); background: var(--pq-sheet-2); border-style: dashed; font-variant-numeric: tabular-nums; }
.pq-page-more .pq-page-label { color: var(--pq-ink-3); }

/* Chemin de fer dans une cellule de tableau : une seule rangée, vignettes plus basses. */
.pq-cell-plan { padding-block: 0.5rem; min-width: min(20rem, 28vw); }
.pq-cell-plan .pq-plan-empty { color: var(--pq-ink-3); font-weight: 400; }
/* Éditeur de modèle HTML : hauteur bornée, défilement interne (les modèles font des centaines de lignes). */
.fi-input-wrp-content-ctn .cm-editor { max-height: min(36rem, 65vh); }
.fi-input-wrp-content-ctn .cm-editor .cm-scroller { overflow: auto; }
/* Vignette de bannière en liste : formats très larges (600 × 90), calée à gauche sans déformation. */
.pq-cell-banniere img { max-width: 11rem; object-fit: contain; object-position: left; }

.pq-cell-plan .pq-page { flex: 0 1 3.5rem; }
/* Les bannières gardent leur largeur étroite en cellule aussi : ce sont des emplacements, pas des pages. */
.pq-cell-plan .pq-page-pub { flex: 0 0 1.75rem; }
.pq-cell-plan .pq-page-pub-libre { flex: 0 0 1rem; }
.pq-cell-plan .pq-page-pub-libre .pq-page-sheet { padding: 0; }
/* Rangée unique : deux lignes d'intitulé restent bornées en hauteur et départagent « Focus - … ». */
.pq-cell-plan .pq-page-label { display: block; white-space: normal; }
.pq-cell-plan .pq-page-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; hyphens: auto; }
.pq-cell-plan .pq-page-sheet { height: 2rem; padding: 0.5rem 0.375rem 0.25rem; }
.pq-cell-plan .pq-page-more .pq-page-sheet { padding: 0; }
.pq-cell-plan .pq-page-sheet:empty::after { content: ""; display: block; height: 3px; width: 70%; border-radius: 1px; background: var(--pq-rule); }

.pq-plan-sm .pq-page { flex-basis: 2.25rem; }
.pq-plan-sm .pq-page-sheet { height: 2.5rem; padding: 0.5rem 0.25rem 0.25rem; gap: 2px; }
.pq-plan-sm .pq-page-sheet i { height: 2px; }
.pq-plan-sm .pq-page-label { display: none; }

/* ---- Composeur de revue -------------------------------------------------- */

/* En tête : le chemin de fer de la revue et son état, sur une feuille. */
.pq-compose-plan {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.25rem; align-items: center;
    padding: 0.75rem 0.875rem; border-radius: var(--radius-xl);
    background: var(--pq-sheet); box-shadow: 0 0 0 1px var(--pq-rule), var(--pq-shadow);
}
.pq-compose-note { padding: 0.625rem 0.875rem; border-radius: var(--radius-xl); background: var(--pq-sheet-2); box-shadow: inset 0 0 0 1px var(--pq-rule); color: var(--pq-ink-2); font-size: 0.875rem; }
.pq-compose-note:has(.pq-compose-note-icon) { display: flex; gap: 0.5rem; align-items: flex-start; }
.pq-compose-note-icon { width: 1rem; height: 1rem; flex: none; margin-top: 0.125rem; }
.pq-compose-note b { font-weight: 600; color: var(--pq-ink); }
/* Envoi planifié : le cyan de l'état « Planifiée ». Envoi non parti : l'ambre de la vérification à faire. */
.pq-compose-note-planifiee { background: var(--pq-cyan-wash); box-shadow: none; color: var(--pq-cyan-ink); }
.pq-compose-note-planifiee b { color: var(--pq-cyan-ink); }
.pq-compose-note-alerte { background: var(--pq-amber-wash); box-shadow: none; color: var(--pq-amber-ink); font-weight: 600; }

/* Les blocs dans l'ordre d'envoi, en une colonne sur toute la largeur, comme la liste des revues. */
.pq-compose { display: flex; flex-direction: column; gap: 0.5rem; }
.pq-block {
    border-radius: var(--radius-xl); background: var(--pq-sheet);
    box-shadow: 0 0 0 1px var(--pq-rule), var(--pq-shadow);
    scroll-margin-top: 5rem;
}
.pq-block-head { display: flex; align-items: center; gap: 0.75rem; min-height: 3rem; padding: 0.5rem 0.875rem; }
.pq-block-title { font-size: 1rem; font-weight: 600; line-height: 1.35; color: var(--pq-ink); min-width: 0; }
.pq-block-meta { font-size: 0.8125rem; color: var(--pq-ink-3); white-space: nowrap; }
.pq-block-tools { margin-inline-start: auto; display: flex; align-items: center; gap: 1rem; flex: none; }
.pq-block-empty { margin: 0 0.875rem 0.75rem; padding: 0.5rem 0.75rem; border: 1px dashed var(--pq-amber); border-radius: var(--radius-lg); color: var(--pq-amber-ink); font-size: 0.8125rem; font-weight: 600; }
.pq-block-empty-quiet { border-color: var(--pq-rule-strong); color: var(--pq-ink-3); font-weight: 400; }
.pq-block-vide { box-shadow: 0 0 0 1px color-mix(in oklab, var(--pq-amber) 55%, var(--pq-rule)), var(--pq-shadow); }

/* Section ou annonce hors de l'email : tirets, comme une absence. */
.pq-block-off { background: transparent; box-shadow: none; border: 1px dashed var(--pq-rule-strong); }
.pq-block-off .pq-block-title { color: var(--pq-ink-2); }
.pq-block-off .pq-block-meta { color: var(--pq-ink-2); }
.pq-block-off .pq-art-title { color: var(--pq-ink-2); }

.pq-block-head .pq-block-title + .pq-block-meta { margin-inline-start: -0.25rem; }
.pq-annonce { padding: 0 0.875rem 0.75rem; font-size: 0.875rem; line-height: 1.5; color: var(--pq-ink-2); }
.pq-annonce p + p { margin-top: 0.5rem; }
.pq-annonce a { color: var(--pq-cyan-ink); text-decoration: underline; }

/* Emplacement de bannière entre deux sections : réservé (violet) ou libre (hachuré, tirets). */
.pq-slot { display: flex; align-items: center; gap: 0.5rem; min-height: 2rem; padding: 0.25rem 0.875rem; border-radius: var(--radius-lg); font-size: 0.8125rem; color: var(--pq-ink-2); }
.pq-slot b { font-weight: 600; color: var(--pq-ink); margin-inline-end: 0.25rem; }
.pq-slot-icon { width: 1rem; height: 1rem; flex: none; }
.pq-slot-pub { background: var(--pq-violet-wash); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--pq-violet) 35%, transparent); }
.pq-slot-pub .pq-slot-icon { color: var(--pq-violet); }
.pq-slot-libre { border: 1px dashed var(--pq-rule-strong); background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in oklab, var(--pq-hatch) 60%, transparent) 6px 12px); }
.pq-slot-libre .pq-slot-icon { color: var(--pq-ink-3); }

/* Interrupteur « Dans l'email ». */
.pq-switch { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--pq-ink-2); cursor: pointer; }

/* Articles d'une section : une ligne par article, poignée à gauche, actions à droite. */
.pq-arts { border-top: 1px solid var(--pq-rule); }
.pq-art {
    display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 0.75rem; align-items: start;
    padding: 0.625rem 0.875rem 0.625rem 0.5rem; background: var(--pq-sheet);
}
.pq-art + .pq-art { border-top: 1px solid var(--pq-rule); }
.pq-art:last-child { border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
.pq-art-handle {
    display: grid; place-items: center; width: 1.5rem; height: 1.75rem; margin-top: -0.125rem;
    border-radius: var(--radius-lg); color: var(--pq-ink-3); cursor: grab;
    transition: background-color 120ms ease-out, color 120ms ease-out;
}
.pq-art-handle:hover { background: var(--pq-sheet-2); color: var(--pq-ink); }
.pq-art-handle:focus-visible { outline: 2px solid var(--pq-cyan); outline-offset: 1px; }
.pq-art-handle svg { width: 1rem; height: 1rem; }
.pq-art:not(:has(.pq-art-handle)) { padding-inline-start: 0.875rem; grid-template-columns: auto minmax(0, 1fr) auto; }
.pq-art:not(:has(.pq-art-thumb)) { grid-template-columns: auto minmax(0, 1fr) auto; }
.pq-art:not(:has(.pq-art-thumb)):not(:has(.pq-art-handle)) { grid-template-columns: minmax(0, 1fr) auto; }
.pq-art-thumb { width: 4rem; height: 3rem; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px var(--pq-rule); background: var(--pq-sheet-2); }
.pq-art-body { min-width: 0; }
.pq-art-title { font-size: 0.9375rem; font-weight: 600; line-height: 1.35; color: var(--pq-ink); text-wrap: pretty; }
.pq-art-meta { display: flex; flex-wrap: wrap; margin-top: 0.125rem; font-size: 0.8125rem; line-height: 1.35; color: var(--pq-ink-2); }
.pq-art-meta span:not(:last-child)::after { content: "\00a0·"; margin-inline-end: 0.3rem; color: var(--pq-ink-3); }
.pq-art-excerpt { margin-top: 0.25rem; font-size: 0.8125rem; line-height: 1.45; color: var(--pq-ink-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Contenu entier de l'article (vue par défaut) : la mise en forme du texte est gardée, pas ses couleurs
   ni ses polices, pour rester lisible en clair comme en sombre. L'aperçu montre le rendu de l'email. */
.pq-art-contenu { margin-top: 0.375rem; font-size: 0.875rem; line-height: 1.5; color: var(--pq-ink-2); overflow-wrap: anywhere; }
.pq-art-contenu * { color: inherit !important; background: none !important; font-family: inherit !important; font-size: inherit !important; }
.pq-art-contenu > * + * { margin-top: 0.5rem; }
.pq-art-contenu a { color: var(--pq-cyan-ink) !important; text-decoration: underline; }
.pq-art-contenu ul, .pq-art-contenu ol { padding-inline-start: 1.25rem; }
.pq-art-contenu ul { list-style: disc; }
.pq-art-contenu ol { list-style: decimal; }
.pq-art-contenu img { max-width: 100%; height: auto; }
.pq-art-side { display: flex; align-items: center; gap: 0.5rem; }

/* Bascule « Vue compacte », au-dessus des blocs. */
.pq-compose-bar { display: flex; justify-content: flex-end; margin-bottom: -0.5rem; }

/* Pendant le glisser-déposer : la place visée en lavis cyan, l'article tenu en feuille soulevée. */
.pq-art.sortable-ghost { background: var(--pq-cyan-wash); }
.pq-art.sortable-ghost > * { visibility: hidden; }
.pq-art.sortable-chosen:not(.sortable-ghost) { box-shadow: 0 0 0 1px var(--pq-rule-strong), 0 8px 20px -10px rgb(26 29 33 / 0.35); }

/* Aperçu de l'email : le document entier, isolé, sur fond blanc comme dans une messagerie. */
.pq-apercu { display: block; width: 100%; height: min(75vh, 60rem); border: 0; border-radius: var(--radius-lg); background: #fff; color-scheme: light; box-shadow: 0 0 0 1px var(--pq-rule); }

/* ---- Médias (explorateur du Space) -------------------------------------- */

.pq-medias-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; margin-top: -0.5rem; }
.pq-medias-fil ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.125rem; font-size: 0.9375rem; }
.pq-medias-fil li { display: inline-flex; align-items: center; gap: 0.125rem; min-width: 0; }
.pq-medias-fil li + li::before { content: "/"; padding-inline: 0.25rem; color: var(--pq-ink-3); }
.pq-medias-fil button { padding: 0.125rem 0.375rem; border-radius: var(--radius-lg); color: var(--pq-cyan-ink); font-weight: 500; }
.pq-medias-fil button:hover { background: var(--pq-sheet); text-decoration: underline; }
.pq-medias-fil button:focus-visible { outline: 2px solid var(--pq-cyan); outline-offset: 1px; }
.pq-medias-fil [aria-current] { padding: 0.125rem 0.375rem; font-weight: 650; color: var(--pq-ink); }
.pq-medias-filtre { flex: 0 1 18rem; min-width: 12rem; }

/* Grille et détail côte à côte ; le détail reste visible quand on fait défiler la grille. */
.pq-medias { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.pq-medias-avec-detail { grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem); }
.pq-medias-main { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }

.pq-medias-dossiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.375rem; }
.pq-medias-dossier {
    display: flex; align-items: center; gap: 0.5rem; width: 100%; min-height: 2.5rem; padding: 0.375rem 0.75rem;
    border-radius: var(--radius-lg); background: var(--pq-sheet); box-shadow: 0 0 0 1px var(--pq-rule);
    font-size: 0.875rem; font-weight: 500; color: var(--pq-ink); text-align: start;
    transition: box-shadow 120ms ease-out, background-color 120ms ease-out;
}
.pq-medias-dossier span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pq-medias-dossier:hover { box-shadow: 0 0 0 1px var(--pq-rule-strong); background: color-mix(in oklab, var(--pq-cyan-wash) 45%, var(--pq-sheet)); }
.pq-medias-dossier:focus-visible { outline: 2px solid var(--pq-cyan); outline-offset: 2px; }
.pq-medias-dossier-icon { width: 1.125rem; height: 1.125rem; flex: none; color: var(--pq-cyan-ink); }

.pq-medias-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.625rem; }
.pq-media {
    display: flex; flex-direction: column; width: 100%; padding: 0.375rem; gap: 0.25rem;
    border-radius: var(--radius-xl); background: var(--pq-sheet); box-shadow: 0 0 0 1px var(--pq-rule), var(--pq-shadow);
    text-align: start; color: inherit;
    transition: box-shadow 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.pq-media:hover { box-shadow: 0 0 0 1px var(--pq-rule-strong), 0 6px 16px -8px rgb(26 29 33 / 0.25); }
.pq-media:focus-visible { outline: 2px solid var(--pq-cyan); outline-offset: 2px; }
.pq-media-choisi, .pq-media-choisi:hover { box-shadow: 0 0 0 2px var(--pq-cyan), var(--pq-shadow); }
/* Damier sous l'image : les logos sont souvent des PNG transparents, blancs sur fond de couleur. */
.pq-media-vignette, .pq-media-detail-apercu {
    display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-lg);
    background: repeating-conic-gradient(var(--pq-sheet-2) 0 25%, var(--pq-hatch) 0 50%) 0 0 / 14px 14px;
    color: var(--pq-ink-3);
}
.pq-media-vignette img, .pq-media-detail-apercu img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pq-media-vignette:has(.pq-media-icone), .pq-media-detail-apercu:has(.pq-media-icone) { background: var(--pq-sheet-2); align-content: center; gap: 0.25rem; }
.pq-media-icone { width: 2rem; height: 2rem; }
.pq-media-ext { font-size: 0.6875rem; font-weight: 650; letter-spacing: 0.08em; color: var(--pq-ink-2); }
.pq-media-nom { padding-inline: 0.125rem; font-size: 0.8125rem; font-weight: 600; line-height: 1.3; color: var(--pq-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pq-media-meta { padding-inline: 0.125rem; font-size: 0.75rem; line-height: 1.3; color: var(--pq-ink-3); }

.pq-medias-pages { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem; font-size: 0.8125rem; color: var(--pq-ink-2); }

.pq-media-detail {
    position: sticky; top: 5rem; display: flex; flex-direction: column; gap: 0.875rem; padding: 0.875rem;
    border-radius: var(--radius-xl); background: var(--pq-sheet); box-shadow: 0 0 0 1px var(--pq-rule), var(--pq-shadow);
}
.pq-media-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.pq-media-detail-titre { font-size: 1rem; font-weight: 650; line-height: 1.35; color: var(--pq-ink); overflow-wrap: anywhere; }
.pq-media-detail-apercu { aspect-ratio: auto; min-height: 8rem; max-height: 16rem; padding: 0.5rem; box-shadow: inset 0 0 0 1px var(--pq-rule); }
.pq-media-detail-apercu img { max-height: 15rem; }
.pq-media-detail-apercu:focus-visible { outline: 2px solid var(--pq-cyan); outline-offset: 2px; }
.pq-media-detail .pq-media-meta { margin-top: -0.375rem; font-size: 0.8125rem; }
.pq-media-label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pq-ink-3); }
.pq-media-url { display: flex; flex-direction: column; gap: 0.375rem; }
.pq-media-url-ligne { display: flex; gap: 0.5rem; align-items: center; }
.pq-media-url-champ { flex: 1; min-width: 0; }
.pq-media-url-champ input { font-size: 0.8125rem; text-overflow: ellipsis; }
.pq-media-usages { display: flex; flex-direction: column; gap: 0.375rem; padding-top: 0.75rem; border-top: 1px solid var(--pq-rule); }
.pq-media-aide { font-size: 0.8125rem; line-height: 1.45; color: var(--pq-ink-2); }
.pq-media-usages-liste { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8125rem; line-height: 1.4; }
.pq-media-usages-liste li { display: flex; gap: 0.5rem; min-width: 0; }
.pq-media-usages-liste a { color: var(--pq-cyan-ink); text-decoration: underline; overflow-wrap: anywhere; }
.pq-media-usage-type { flex: none; color: var(--pq-ink-3); }
.pq-media-detail-actions { display: flex; justify-content: flex-end; padding-top: 0.75rem; border-top: 1px solid var(--pq-rule); }

@media (max-width: 64rem) {
    .pq-medias-avec-detail { grid-template-columns: minmax(0, 1fr); }
    /* Sur écran étroit, le détail passe au-dessus de la grille, là où l'on vient de toucher. */
    .pq-media-detail { position: static; order: -1; }
}

@media (max-width: 40rem) {
    .pq-medias-grille { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
    .pq-medias-filtre { flex-basis: 100%; }
}

/* ---- Sections par spécialité (formulaire d'article) ------------------------ */
/* Une liste en feuille ; un groupe ouvert passe en feuille 2, et ses cases se décalent sous la
   pastille, derrière un liseré à la teinte de la spécialité (--pq-spe). */

.pq-secpick { display: grid; gap: 0.625rem; }
.pq-secpick-search { width: 100%; border: 0; border-radius: var(--radius-lg); background: var(--pq-sheet); color: var(--pq-ink); padding: 0.375rem 0.75rem; font-size: 0.875rem; box-shadow: 0 0 0 1px var(--pq-rule-strong); }
.pq-secpick-search::placeholder { color: var(--pq-ink-3); opacity: 1; }
.pq-secpick-search:focus { outline: 2px solid var(--pq-cyan); outline-offset: 0; }
.pq-secpick-total { font-size: 0.8125rem; color: var(--pq-ink-3); font-variant-numeric: tabular-nums; }
.pq-secpick-list { border-radius: var(--radius-lg); box-shadow: 0 0 0 1px var(--pq-rule); overflow: hidden; background: var(--pq-sheet); }
.pq-secpick-group + .pq-secpick-group { border-top: 1px solid var(--pq-rule); }
.pq-secpick-group.is-open { background: var(--pq-sheet-2); }
.pq-secpick-head { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.5625rem 0.75rem; text-align: left; font-size: 0.875rem; font-weight: 600; color: var(--pq-ink); }
.pq-secpick-head:hover { background: var(--pq-sheet-2); }
.pq-secpick-head:focus-visible { outline: 2px solid var(--pq-cyan); outline-offset: -2px; }
.pq-secpick-chevron { flex: none; width: 0.4rem; height: 0.4rem; margin-inline: 0.125rem 0.25rem; border-right: 1.5px solid var(--pq-ink-3); border-bottom: 1.5px solid var(--pq-ink-3); transform: rotate(-45deg); transition: transform 120ms ease-out; }
.pq-secpick-group.is-open .pq-secpick-chevron { transform: rotate(45deg); }
.pq-secpick-title { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.pq-secpick-resume { padding-inline-start: 0.9rem; font-size: 0.8125rem; font-weight: 400; color: var(--pq-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pq-secpick-count { margin-inline-start: auto; min-width: 1.375rem; padding: 0.0625rem 0.4rem; border-radius: 999px; background: var(--pq-sheet); box-shadow: inset 0 0 0 1px var(--pq-rule-strong); color: var(--pq-ink); font-size: 0.75rem; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.pq-secpick-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.125rem 0.5rem; margin: 0 0.75rem 0.625rem 1.5rem; padding-inline-start: 0.625rem; border-inline-start: 2px solid var(--pq-spe); }
.pq-secpick-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.3125rem 0.5rem; border-radius: var(--radius-lg); font-size: 0.875rem; color: var(--pq-ink-2); cursor: pointer; }
.pq-secpick-item input { flex: none; width: 1rem; height: 1rem; margin: 0; cursor: pointer; }
.pq-secpick-item:hover { background: var(--pq-sheet); }
.pq-secpick-item.is-checked { background: var(--pq-sheet); box-shadow: 0 0 0 1px var(--pq-rule); color: var(--pq-ink); font-weight: 600; }

@media (max-width: 48rem) {
    .pq-compose-plan { grid-template-columns: minmax(0, 1fr); }
    .pq-compose-plan .pq-row-state { align-items: flex-start; text-align: left; }
    .pq-compose-plan .pq-row-pills { justify-content: flex-start; }
    .pq-block-head { flex-wrap: wrap; }
    .pq-block-tools { margin-inline-start: 0; width: 100%; justify-content: space-between; }
    .pq-art-thumb { display: none; }
}

@media (max-width: 80rem) {
    .pq-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.625rem; }
    .pq-row .pq-plan { grid-column: 1 / -1; grid-row: 2; }
}

/* Téléphone : une colonne ; les vignettes gardent leur bande de couleur, les intitulés passent en texte d'accessibilité. */
@media (max-width: 40rem) {
    .pq-row { grid-template-columns: minmax(0, 1fr); }
    .pq-row .pq-plan { grid-row: auto; }
    .pq-row-state { align-items: flex-start; text-align: left; max-width: none; }
    .pq-row-pills { justify-content: flex-start; }
    .pq-row .pq-page { min-width: 1.25rem; }
    .pq-row .pq-page-pub, .pq-row .pq-page-pub-libre { flex-basis: 1rem; }
    .pq-row .pq-page-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .pq-row, .fi-ta-row, .pq-art-handle, .pq-media, .pq-medias-dossier, .pq-secpick-chevron { transition: none; }
    .pq-row:hover { transform: none; }
}