/*
 * Planero Design System (pl-*)
 * Source unique des couleurs, typographies, espacements et composants de l'application.
 * Documentation : docs/design-system/README.md — aperçu : docs/design-system/apercu.html
 *
 * Règles :
 *  - une vue n'utilise que des classes pl-* (et les gabarits de docs/design-system/gabarits) ;
 *  - aucune couleur en dur, aucun style="" : une valeur manquante devient un token ici ;
 *  - le responsive passe par des requêtes de conteneur (@container pl) : le même composant
 *    s'adapte à la largeur réelle de l'application, y compris dans un aperçu.
 */

/* ---------- Tokens ---------- */
:root {
    /* Couleurs de marque (logo) */
    --pl-primary: #295C9C;
    --pl-primary-600: #224d84;
    --pl-primary-200: #9db8db;
    --pl-primary-100: #dbe6f4;
    --pl-primary-50: #eef3fa;
    --pl-accent: #8a1c24;

    /* Neutres */
    --pl-ink: #172033;
    --pl-ink-2: #3a4558;
    --pl-muted: #5f6b7d;
    --pl-subtle: #9aa4b2;
    --pl-line: #e3e8ef;
    --pl-line-strong: #cfd6e0;
    --pl-canvas: #f6f7fb;
    --pl-surface: #ffffff;
    --pl-surface-2: #f9fafc;

    /* États : fond doux + texte foncé, jamais de bouton de couleur vive */
    --pl-success: #2f8f57;  --pl-success-bg: #e8f5ed;
    --pl-warning: #a1620b;  --pl-warning-bg: #fdf3e1;
    --pl-danger: #c2413b;   --pl-danger-bg: #fdf1f0;
    --pl-info: #295C9C;     --pl-info-bg: #eef3fa;

    /* Environnement hors production (bandeau, badge) */
    --pl-env: #fd7e14;

    /* Marques tierces (partage de la page de réservation) */
    --pl-marque-whatsapp: #25d366;
    --pl-marque-instagram: #e1306c;
    --pl-marque-facebook: #1877f2;

    /* Typographie */
    --pl-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --pl-text-xs: .75rem;   /* 12 : mentions */
    --pl-text-sm: .8125rem; /* 13 : aides, badges, en-têtes de tableau */
    --pl-text-md: .875rem;  /* 14 : texte courant de l'application */
    --pl-text-lg: 1rem;     /* 16 : champs (évite le zoom iOS) */
    --pl-text-xl: 1.25rem;  /* 20 : titres de section */
    --pl-text-2xl: 1.625rem;/* 26 : titre de page */

    /* Espacements (base 4 px) */
    --pl-1: 4px; --pl-2: 8px; --pl-3: 12px; --pl-4: 16px; --pl-5: 20px; --pl-6: 24px; --pl-8: 32px; --pl-10: 40px;

    /* Formes */
    --pl-radius-input: 10px;
    --pl-radius-sm: 12px;
    --pl-radius: 16px;
    --pl-radius-pill: 999px;
    --pl-shadow: 0 1px 2px rgba(23, 32, 51, .04), 0 8px 24px rgba(23, 32, 51, .06);
    --pl-shadow-pop: 0 12px 32px rgba(23, 32, 51, .14);
    --pl-focus: 0 0 0 4px rgba(41, 92, 156, .18);

    /* Gabarit */
    --pl-sidebar: 248px;
    --pl-topbar: 60px;
    --pl-page-max: 1200px;
    --pl-form-max: 760px;
}

/* Pont Bootstrap : ses composants (modales, menus, volets, infobulles) prennent les couleurs du design system.
   Les variables *-rgb doivent rester des triplets : elles répètent la valeur du token voisin. */
:root {
    --bs-primary: var(--pl-primary);      --bs-primary-rgb: 41, 92, 156;
    --bs-secondary: var(--pl-muted);      --bs-secondary-rgb: 95, 107, 125;
    --bs-success: var(--pl-success);      --bs-success-rgb: 47, 143, 87;
    --bs-danger: var(--pl-danger);        --bs-danger-rgb: 194, 65, 59;
    --bs-warning: var(--pl-warning);      --bs-warning-rgb: 161, 98, 11;
    --bs-info: var(--pl-info);            --bs-info-rgb: 41, 92, 156;
    --bs-link-color: var(--pl-primary);   --bs-link-color-rgb: 41, 92, 156;
    --bs-link-hover-color: var(--pl-primary-600); --bs-link-hover-color-rgb: 34, 77, 132;
    --bs-body-color: var(--pl-ink);
    --bs-heading-color: var(--pl-ink);
    --bs-border-color: var(--pl-line);
}

.pl, .pl *, .pl *::before, .pl *::after { box-sizing: border-box; }
/* Titres : graisse et couleur communes ; :where garde la spécificité d'un simple élément, les classes pl-* l'emportent */
:where(.pl) :is(h1, h2, h3, h4, h5, h6) { color: var(--pl-ink); font-weight: 600; }
:where(.pl) :is(.h1, .h2, .h3, .h4, .h5, .h6) { color: var(--pl-ink); font-weight: 600; }
.pl { font-family: var(--pl-font); font-size: var(--pl-text-md); color: var(--pl-ink); background: var(--pl-canvas); -webkit-font-smoothing: antialiased; line-height: 1.5; }
:where(.pl) :is(h1, h2, h3) { color: var(--pl-ink); letter-spacing: -.02em; margin: 0; }
/* :where() : spécificité minimale, les classes (pl-btn, btn de Bootstrap, onglets…) gardent leur couleur */
:where(.pl) a { color: var(--pl-primary); text-decoration: none; }
:where(.pl) a:hover { text-decoration: underline; }
:where(.pl) a[class]:hover { text-decoration: none; }
.pl-muted { color: var(--pl-muted); }
.pl [hidden] { display: none !important; }
.pl-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Coque de l'application ---------- */
.pl-app { container: pl / inline-size; min-height: 100vh; }
.pl-shell { display: grid; grid-template-columns: var(--pl-sidebar) minmax(0, 1fr); min-height: inherit; }
/* Visiteur non connecté : pas de barre latérale, une seule colonne */
.pl-shell:not(:has(> .pl-sidebar)) { grid-template-columns: minmax(0, 1fr); }
.pl-shell:not(:has(> .pl-sidebar)) .pl-topbar-logo { display: inline-flex; }

.pl-sidebar { background: var(--pl-surface); border-right: 1px solid var(--pl-line); padding: var(--pl-5) var(--pl-3); display: flex; flex-direction: column; gap: var(--pl-1); position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.pl-sidebar-logo { display: block; padding: 0 var(--pl-3) var(--pl-4); }
.pl-sidebar-logo img { height: 30px; }
.pl-nav-section { font-size: var(--pl-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--pl-subtle); padding: var(--pl-4) var(--pl-3) var(--pl-1); }
.pl-nav-link { display: flex; align-items: center; gap: var(--pl-3); padding: 9px var(--pl-3); border-radius: var(--pl-radius-input); color: var(--pl-ink-2); font-weight: 500; text-decoration: none; }
.pl-nav-link i, .pl-nav-link svg { width: 18px; color: var(--pl-muted); }
.pl-nav-link:hover { background: var(--pl-surface-2); }
.pl-nav-link.active { background: var(--pl-primary-50); color: var(--pl-primary); font-weight: 600; }
.pl-nav-link.active i, .pl-nav-link.active svg { color: var(--pl-primary); }
.pl-sidebar-footer { margin-top: auto; padding-top: var(--pl-4); display: flex; flex-direction: column; gap: var(--pl-1); }

.pl-main { min-width: 0; display: flex; flex-direction: column; }
.pl-topbar { height: var(--pl-topbar); display: flex; align-items: center; gap: var(--pl-3); padding: 0 var(--pl-6); background: rgba(255, 255, 255, .85); backdrop-filter: blur(8px); border-bottom: 1px solid var(--pl-line); position: sticky; top: 0; z-index: 30; }
.pl-topbar .pl-topbar-menu { display: none; }
.pl-topbar-logo { display: none; }
.pl-topbar-logo img { height: 26px; display: block; }
.pl-search { flex: 1; max-width: 420px; position: relative; }
.pl-search .pl-input { padding-left: 38px; min-height: 38px; background: var(--pl-surface-2); }
.pl-search i, .pl-search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--pl-subtle); }
.pl-topbar-end { margin-left: auto; display: flex; align-items: center; gap: var(--pl-3); }
.pl-env { font-size: var(--pl-text-xs); font-weight: 600; color: var(--pl-warning); background: var(--pl-warning-bg); padding: 3px 10px; border-radius: var(--pl-radius-pill); }

.pl-user { display: inline-flex; align-items: center; gap: var(--pl-2); background: none; border: 0; padding: 4px; border-radius: var(--pl-radius-pill); cursor: pointer; color: var(--pl-ink-2); font: inherit; font-weight: 600; }
.pl-user:hover { background: var(--pl-surface-2); }
.pl-user img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.pl-user-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-user .pl-avatar { width: 34px; height: 34px; font-size: var(--pl-text-sm); }
.pl-menu { border: 1px solid var(--pl-line); border-radius: var(--pl-radius-sm); box-shadow: var(--pl-shadow-pop); padding: 6px; min-width: 220px; font-size: var(--pl-text-md); }
.pl-menu .dropdown-item { border-radius: 8px; padding: 8px 10px; display: flex; align-items: center; gap: 10px; color: var(--pl-ink-2); font-weight: 500; width: 100%; background: none; border: 0; text-align: left; }
.pl-menu .dropdown-item:hover { background: var(--pl-surface-2); color: var(--pl-ink); }
.pl-menu .dropdown-item i, .pl-menu .dropdown-item svg { width: 16px; color: var(--pl-muted); }
.pl .dropdown-item.pl-danger { color: var(--pl-danger); }
.pl-menu .dropdown-divider { margin: 6px 0; border-color: var(--pl-line); }

/* Contenu : les pages migrées utilisent pl-page, les autres sont encadrées de la même façon */
.pl-content { width: 100%; max-width: var(--pl-page-max); margin: 0 auto; padding: var(--pl-8) var(--pl-6) var(--pl-10); flex: 1; }
.pl-content > .pl-page { padding: 0; margin: 0 auto; }
.pl-content > .pl-page:not(.pl-page-narrow) { max-width: none; }
.pl-content > .pl-alert { margin-bottom: var(--pl-4); }
.pl-backdrop { display: none; }

/* ---------- Page ---------- */
.pl-page { width: 100%; max-width: var(--pl-page-max); margin: 0 auto; padding: var(--pl-8) var(--pl-6) var(--pl-10); }
.pl-page-narrow { max-width: var(--pl-form-max); }
.pl-content > .pl-page.pl-page-form:not(.pl-page-narrow) { max-width: 980px; }
.pl-page > .pl-card + .pl-alert, .pl-page > .pl-grid-2 + .pl-alert { margin-top: var(--pl-4); }
.pl-back { display: inline-flex; align-items: center; gap: 6px; font-size: var(--pl-text-sm); font-weight: 600; margin-bottom: var(--pl-3); }
.pl-page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--pl-4); margin-bottom: var(--pl-6); flex-wrap: wrap; }
.pl-page-title { font-size: var(--pl-text-2xl); font-weight: 700; line-height: 1.2; }
.pl-page-subtitle { color: var(--pl-muted); margin: var(--pl-1) 0 0; }
.pl-page-actions { display: flex; gap: var(--pl-2); align-items: center; }
.pl-page-actions > .dropdown { display: flex; }

/* ---------- Boutons : 1 seul primaire par écran, libellé de 1 à 2 mots ---------- */
.pl-btn { font: inherit; font-weight: 600; font-size: var(--pl-text-md); display: inline-flex; align-items: center; justify-content: center; gap: var(--pl-2); min-height: 40px; padding: 0 var(--pl-4); border-radius: var(--pl-radius-pill); border: 1.5px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s, color .15s; }
.pl-btn:active { transform: translateY(1px); }
.pl-btn:focus-visible { outline: none; box-shadow: var(--pl-focus); }
.pl-btn-primary { background: var(--pl-primary); color: #fff; }
.pl-btn-primary:hover { background: var(--pl-primary-600); }
.pl-btn-secondary { background: var(--pl-surface); color: var(--pl-ink); border-color: var(--pl-line-strong); }
.pl-btn-secondary:hover { border-color: var(--pl-primary); color: var(--pl-primary); }
.pl-btn-ghost { background: transparent; color: var(--pl-ink-2); }
.pl-btn-ghost:hover { background: var(--pl-surface-2); }
.pl-btn-danger { background: var(--pl-surface); color: var(--pl-danger); border-color: #f2c9c6; }
.pl-btn-danger:hover { background: var(--pl-danger-bg); }
.pl-btn-sm { min-height: 32px; padding: 0 var(--pl-3); font-size: var(--pl-text-sm); }
.pl-btn-icon { width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 50%; flex: none; }
.pl-btn-icon.pl-btn-sm, .pl-table .pl-btn-icon { width: 32px; height: 32px; min-height: 32px; }
.pl-btn-block { width: 100%; }
.pl-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Champs ---------- */
.pl-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pl-label { font-weight: 600; font-size: var(--pl-text-sm); color: var(--pl-ink); }
.pl-label .pl-optional { font-weight: 400; color: var(--pl-subtle); }
.pl-input, .pl-select, .pl-textarea { width: 100%; min-height: 42px; padding: 8px 12px; font: inherit; font-size: var(--pl-text-lg); color: var(--pl-ink); background: var(--pl-surface); border: 1.5px solid var(--pl-line); border-radius: var(--pl-radius-input); transition: border-color .15s, box-shadow .15s; }
.pl-textarea { min-height: 96px; resize: vertical; }
.pl-select { appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235f6b7d' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.pl-input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.pl-input[type=number]::-webkit-inner-spin-button, .pl-input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* Safari iOS : les champs date et heure natifs centrent leur texte, imposent une largeur minimale et ignorent min-height */
.pl-input:is([type=date], [type=datetime-local], [type=time], [type=month]) { -webkit-appearance: none; appearance: none; display: block; min-width: 0; max-width: 100%; text-align: left; line-height: 1.5; }
.pl-input::-webkit-date-and-time-value { text-align: left; margin: 0; min-height: 1.5em; }
.pl-input::-webkit-datetime-edit { padding: 0; }
.pl-input:focus, .pl-select:focus, .pl-textarea:focus { outline: none; border-color: var(--pl-primary); box-shadow: var(--pl-focus); }
.pl-input::placeholder, .pl-textarea::placeholder { color: var(--pl-subtle); }
.pl-hint { font-size: var(--pl-text-sm); color: var(--pl-muted); }
.pl-error, .pl .field-validation-error { font-size: var(--pl-text-sm); color: var(--pl-danger); }
.pl .input-validation-error { border-color: var(--pl-danger) !important; }
.pl-input-group { position: relative; display: flex; }
.pl-input-group .pl-input { padding-right: 52px; }
.pl-suffix { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--pl-muted); font-size: var(--pl-text-sm); pointer-events: none; }
.pl-suffix-bouton { pointer-events: auto; background: none; border: 0; cursor: pointer; padding: 4px; border-radius: 8px; color: var(--pl-muted); }
.pl-suffix-bouton:hover { color: var(--pl-primary); background: var(--pl-primary-50); }
.pl-regles { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--pl-text-sm); color: var(--pl-muted); }
.pl-regles li { display: inline-flex; align-items: center; gap: 6px; }
.pl-regles li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pl-line-strong); }
.pl-regles li.ok { color: var(--pl-success); }
.pl-regles li.ok::before { background: var(--pl-success); }
.pl-check { display: inline-flex; align-items: center; gap: var(--pl-2); cursor: pointer; }
.pl-check input { width: 18px; height: 18px; accent-color: var(--pl-primary); margin: 0; }
.pl-switch { display: inline-flex; align-items: center; gap: var(--pl-3); cursor: pointer; }
.pl-switch input { appearance: none; width: 38px; height: 22px; border-radius: var(--pl-radius-pill); background: var(--pl-line-strong); position: relative; margin: 0; cursor: pointer; transition: background .15s; }
.pl-switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.pl-switch input:checked { background: var(--pl-primary); }
.pl-switch input:checked::after { transform: translateX(16px); }

/* Choix en tuiles (radio/checkbox), comme l'assistant */
.pl-field-check { align-self: end; min-height: 42px; }
.pl-card-title .pl-avatar { width: 32px; height: 32px; font-size: var(--pl-text-sm); }
.pl-card-title .pl-entity { gap: var(--pl-3); }
.pl-card-title { flex-wrap: wrap; }
.pl-form-compact { gap: var(--pl-3); }
.pl-form > .pl-btn { align-self: flex-start; }
.pl-grid-apercu { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--pl-6); align-items: start; }
.pl-apercu { position: sticky; top: calc(var(--pl-topbar) + var(--pl-4)); }
.pl-apercu-email { max-height: 480px; overflow-y: auto; border: 1px solid var(--pl-line); border-radius: var(--pl-radius-sm); background: var(--pl-surface); }
.pl-apercu-sms { max-width: 85%; padding: var(--pl-3) var(--pl-4); border-radius: 18px 18px 18px 4px; background: var(--pl-primary); color: #fff; white-space: pre-wrap; }
.pl code { font-size: .85em; color: var(--pl-ink-2); background: var(--pl-surface-2); border: 1px solid var(--pl-line); border-radius: 6px; padding: 1px 6px; }
/* Éditeur de texte (Quill) */
.pl .ql-toolbar.ql-snow { border: 1.5px solid var(--pl-line); border-bottom: 0; border-radius: var(--pl-radius-input) var(--pl-radius-input) 0 0; background: var(--pl-surface-2); font-family: var(--pl-font); }
.pl .ql-container.ql-snow { border: 1.5px solid var(--pl-line); border-radius: 0 0 var(--pl-radius-input) var(--pl-radius-input); background: var(--pl-surface); min-height: 240px; font-family: var(--pl-font); font-size: var(--pl-text-md); }
.pl-uploader { display: flex; align-items: center; gap: var(--pl-4); }
.pl-dropzone { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--pl-4); border: 1.5px dashed var(--pl-line-strong); border-radius: var(--pl-radius-sm); background: var(--pl-surface-2); color: var(--pl-ink-2); text-align: center; cursor: pointer; }
.pl-dropzone i, .pl-dropzone svg { font-size: 1.3rem; color: var(--pl-muted); }
.pl-dropzone strong { color: var(--pl-primary); }
.pl-dropzone:hover, .pl-dropzone.active, .pl-dropzone:focus-visible { border-color: var(--pl-primary); background: var(--pl-primary-50); outline: none; }
.pl-image-vide { opacity: .5; }
.pl-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--pl-3); }
.pl-tiles-pile { grid-template-columns: 1fr; }
.pl-tile { display: flex; gap: var(--pl-3); align-items: flex-start; padding: var(--pl-4); border: 1.5px solid var(--pl-line); border-radius: var(--pl-radius-sm); background: var(--pl-surface); cursor: pointer; }
.pl-tile:has(input:checked) { border-color: var(--pl-primary); background: var(--pl-primary-50); }
.pl-tile input { accent-color: var(--pl-primary); margin-top: 3px; }
.pl-tile strong { display: block; }
.pl-tile span { color: var(--pl-muted); font-size: var(--pl-text-sm); }

/* ---------- Formulaires : sections sans cartes imbriquées ---------- */
.pl-form { display: flex; flex-direction: column; gap: var(--pl-6); }
.pl-card.pl-form { gap: var(--pl-4); }
.pl-form > .pl-tabs { margin-bottom: calc(-1 * var(--pl-2)); }
.pl-section { background: var(--pl-surface); border: 1px solid var(--pl-line); border-radius: var(--pl-radius); padding: var(--pl-6); display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--pl-6); }
.pl-section-head h2 { font-size: var(--pl-text-lg); font-weight: 650; }
.pl-section-head p { color: var(--pl-muted); font-size: var(--pl-text-sm); margin: var(--pl-1) 0 0; }
.pl-section-body { display: flex; flex-direction: column; gap: var(--pl-4); min-width: 0; }
.pl-section-body > .pl-btn, .pl-section-body > .pl-segmented { align-self: flex-start; }
.pl .pl-modal-ouverte { display: block; background: rgba(23, 32, 51, .45); }
.pl address { margin: 0; font-style: normal; }
.pl-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pl-4); }
.pl-grid-adresse { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--pl-4); }
.pl-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pl-4); }
.pl-actionbar { position: sticky; bottom: var(--pl-3); z-index: 20; display: flex; justify-content: flex-end; align-items: center; gap: var(--pl-2); padding: var(--pl-2) var(--pl-2) var(--pl-2) var(--pl-4); background: rgba(255, 255, 255, .94); backdrop-filter: blur(8px); border: 1px solid var(--pl-line); border-radius: var(--pl-radius-pill); box-shadow: var(--pl-shadow); width: fit-content; margin-left: auto; }

.pl-section-pleine { grid-template-columns: minmax(0, 1fr); gap: var(--pl-4); }

/* Lignes d'un document (facture, devis, avoir) : grille en largeur, cartes empilées quand le bloc est étroit */
.pl-lignes-facture { container: lignes / inline-size; display: flex; flex-direction: column; gap: var(--pl-4); }
.pl-lignes { display: flex; flex-direction: column; gap: var(--pl-2); }
.pl-ligne { display: grid; grid-template-columns: minmax(160px, 1fr) 116px 76px 92px 176px 104px 40px; gap: var(--pl-2); align-items: center; }
.pl-ligne-entete { font-size: var(--pl-text-sm); font-weight: 600; color: var(--pl-muted); padding-bottom: var(--pl-1); border-bottom: 1px solid var(--pl-line); }
.pl-ligne-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pl-ligne-reduction { display: flex; gap: 6px; align-items: center; }
.pl-ligne-reduction .pl-input { flex: 1; min-width: 0; }
.pl-ligne-reduction .pl-segmented button { padding: 6px 10px; }
.pl-ligne-total { text-align: right; }
.pl-lignes-ajout { display: flex; gap: var(--pl-2); }
.pl-lignes-ajout .pl-select { max-width: 360px; }
.pl-totaux { display: flex; flex-direction: column; align-items: flex-end; gap: var(--pl-1); margin: 0; padding-top: var(--pl-3); border-top: 1px solid var(--pl-line); }
.pl-totaux > div { display: flex; justify-content: space-between; gap: var(--pl-6); min-width: 240px; }
.pl-totaux dt { color: var(--pl-muted); font-weight: 500; }
.pl-totaux dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.pl-totaux > div:last-child dd { font-size: var(--pl-text-xl); font-weight: 700; }
@container lignes (max-width: 760px) {
    .pl-ligne-entete { display: none; }
    .pl-ligne { grid-template-columns: repeat(3, minmax(0, 1fr)) 40px; grid-template-areas: "desc desc desc ret" "prix qte tva tva" "remise remise total total"; align-items: end; padding: var(--pl-3); border: 1px solid var(--pl-line); border-radius: var(--pl-radius-sm); background: var(--pl-surface-2); }
    .pl-ligne-label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; font-size: var(--pl-text-xs); font-weight: 600; color: var(--pl-muted); }
    .pl-ligne-description { grid-area: desc; }
    .pl-ligne-retirer { grid-area: ret; }
    .pl-ligne-prix { grid-area: prix; }
    .pl-ligne-qte { grid-area: qte; }
    .pl-ligne-tva { grid-area: tva; }
    .pl-ligne-remise { grid-area: remise; }
    .pl-ligne-total { grid-area: total; min-height: 42px; justify-content: flex-end; }
    .pl-lignes-ajout .pl-select { max-width: none; flex: 1; min-width: 0; }
    .pl-totaux > div { min-width: 0; width: 100%; }
}

/* ---------- Surfaces ---------- */
.pl-card { background: var(--pl-surface); border: 1px solid var(--pl-line); border-radius: var(--pl-radius); padding: var(--pl-5); }
.pl-card-title { font-size: var(--pl-text-lg); font-weight: 650; margin-bottom: var(--pl-3); display: flex; align-items: center; justify-content: space-between; gap: var(--pl-3); }
.pl-dl { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--pl-2) var(--pl-4); margin: 0; }
.pl-dl dt { color: var(--pl-muted); font-weight: 500; }
.pl-dl dd { margin: 0; font-weight: 500; }
.pl-dl dd.pl-empty-value { color: var(--pl-subtle); font-weight: 400; }

.pl-dl-pile { grid-template-columns: 110px minmax(0, 1fr); }
.pl-pile { display: flex; flex-direction: column; gap: var(--pl-4); min-width: 0; }
.pl-pre { white-space: pre-wrap; margin: 0; }
/* Carte contenant un tableau sans bordure propre (lignes d'un document) */
.pl-card-tableau { padding: 0; overflow: hidden; }
.pl-card-tableau > .pl-card-title { padding: var(--pl-5) var(--pl-5) 0; }
.pl-card-tableau > .pl-card-vide { padding: 0 var(--pl-5); }
.pl-card-tableau .pl-table tbody tr:hover { background: none; }
.pl-card-tableau > .pl-totaux { padding: var(--pl-4) var(--pl-5) var(--pl-5); }
.pl-ligne-montant { font-weight: 600; }
.pl-historique { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--pl-3); }
.pl-historique li { display: flex; gap: var(--pl-3); align-items: flex-start; }
.pl-historique-icone { width: 28px; height: 28px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--pl-primary-50); color: var(--pl-primary); font-size: var(--pl-text-xs); }
.pl-historique-libelle { font-weight: 600; }
.pl-historique + .pl-btn { margin-top: var(--pl-2); }
.pl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 1100; padding: 10px 18px; border-radius: var(--pl-radius-pill); background: var(--pl-ink); color: #fff; font-size: var(--pl-text-md); font-weight: 600; box-shadow: var(--pl-shadow-pop); max-width: min(560px, calc(100vw - 32px)); text-align: center; cursor: pointer; }
.pl-toast-danger { background: var(--pl-danger); }
.pl-toast-warning { background: var(--pl-warning); }
.pl-toast-info { background: var(--pl-primary); }

/* Petits assemblages de formulaire */
.pl-input-court { max-width: 180px; }
.pl-grid-inverse { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.pl-champ-action { display: flex; gap: var(--pl-2); }
.pl-champ-action .pl-input { flex: 1; min-width: 0; }
.pl-actions-ligne { display: flex; flex-wrap: wrap; gap: var(--pl-2); }
.pl-texte-danger, .pl .pl-texte-danger:hover { color: var(--pl-danger); }
.pl-btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.pl-titre-bloc { font-size: var(--pl-text-md); font-weight: 650; margin: var(--pl-4) 0 var(--pl-1); }
.pl-tab.onglet-en-erreur { color: var(--pl-danger) !important; }
.pl-tab.onglet-en-erreur::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pl-danger); }
.pl-form > .tab-content > .tab-pane.active { display: flex; flex-direction: column; gap: var(--pl-6); }
.pl-form > .pl-tabs { margin-bottom: 0; }
.pl-onglets-contenu > .tab-pane.active { display: flex; flex-direction: column; gap: var(--pl-4); }
.pl-onglets-contenu .pl-stats { margin-bottom: 0; }
.pl-lien-long { flex: 1; min-width: 0; align-self: center; font-weight: 600; overflow-wrap: anywhere; }
.pl-champ-action + .pl-dl, .pl-field + .pl-dl-espace { margin-top: var(--pl-4); }
.pl-etoile { color: var(--pl-warning); }

/* Galerie d'images et couleurs (page de réservation) */
.pl-galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--pl-3); }
.pl-galerie:empty { display: none; }
.pl-galerie-item { position: relative; aspect-ratio: 4 / 3; border-radius: var(--pl-radius-sm); overflow: hidden; background: var(--pl-surface-2); border: 1px solid var(--pl-line); }
.pl-galerie-item img { width: 100%; height: 100%; object-fit: cover; }
.pl-galerie-retirer { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--pl-surface); color: var(--pl-danger); box-shadow: var(--pl-shadow); cursor: pointer; }
.pl-couleurs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--pl-3); }
.pl-couleur { width: 100%; height: 42px; padding: 4px; border: 1.5px solid var(--pl-line); border-radius: var(--pl-radius-input); background: var(--pl-surface); cursor: pointer; }

/* Éditeur de modèle d'e-mail (configuration) */
.editeur-mail { background: var(--pl-surface); border: 1px solid var(--pl-line); border-radius: var(--pl-radius-sm); overflow: hidden; }
.editeur-mail-barre { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--pl-2); padding: var(--pl-2); border-bottom: 1px solid var(--pl-line); background: var(--pl-surface-2); }
.outils-edition { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.btn-outil { width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--pl-ink-2); cursor: pointer; }
.btn-outil:hover, .btn-outil:focus-visible { background: var(--pl-primary-50); color: var(--pl-primary); }
.separateur-outils { width: 1px; height: 20px; margin: 0 var(--pl-1); background: var(--pl-line); }
.apercu-options { padding: var(--pl-3); border-bottom: 1px solid var(--pl-line); background: var(--pl-surface-2); }
.apercu-options-champs { display: flex; flex-wrap: wrap; gap: var(--pl-3); align-items: flex-end; }
.apercu-options-champs .pl-field { flex: 1 1 200px; }
.editeur-mail-zone iframe, .editeur-mail-zone .editeur-mail-code { display: block; width: 100%; height: 34rem; max-height: 70vh; border: 0; background: var(--pl-surface); }
.editeur-mail-zone .editeur-mail-code { padding: var(--pl-3); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--pl-text-sm); line-height: 1.4; white-space: pre; tab-size: 4; resize: vertical; }
.editeur-mail-zone .d-none { display: none !important; }
.editeur-mail-pied { display: flex; justify-content: space-between; align-items: center; gap: var(--pl-2); padding: var(--pl-2) var(--pl-3); border-top: 1px solid var(--pl-line); }
.bloc-liquid { padding: var(--pl-2) var(--pl-3); border-radius: 8px; background: var(--pl-surface-2); border: 1px solid var(--pl-line); white-space: pre-wrap; font-size: var(--pl-text-sm); }

/* Abonnement : jauge, offres, listes d'avantages */
.pl-centre { text-align: center; }
.pl-texte-attention { color: var(--pl-warning); }
/* Calendriers Google d'une ressource */
.pl-calendriers-aide { padding: 0 var(--pl-5) var(--pl-3); }
.pl-calendriers { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--pl-line); }
.pl-calendriers li { display: flex; align-items: center; gap: var(--pl-3); padding: var(--pl-3) var(--pl-5); border-bottom: 1px solid var(--pl-line); }
.pl-calendriers li:last-child { border-bottom: 0; }
.pl-pastille { width: 12px; height: 12px; flex: none; color: var(--pl-line-strong); }
.pl-calendrier-nom { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pl-calendrier-nom .pl-cell-sub { display: flex; flex-wrap: wrap; gap: 2px var(--pl-2); }
.pl-calendrier-option { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: var(--pl-text-xs); color: var(--pl-muted); cursor: pointer; }
.pl-calendrier-option input { width: 20px; height: 20px; accent-color: var(--pl-primary); margin: 0; cursor: pointer; }
.pl-calendrier-option input:disabled { cursor: not-allowed; }
.pl fieldset.pl-field { border: 0; padding: 0; margin: 0; min-width: 0; }
.pl fieldset.pl-field > legend { float: left; width: 100%; padding: 0; margin-bottom: 5px; }
/* Pages des clients finaux (_LayoutPublic) */
.pl-public { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--pl-4); padding: var(--pl-6) var(--pl-4); background: var(--pl-canvas); }
.pl-public-carte { width: 100%; max-width: 520px; background: var(--pl-surface); border: 1px solid var(--pl-line); border-radius: var(--pl-radius); box-shadow: var(--pl-shadow); padding: var(--pl-8) var(--pl-6); display: flex; flex-direction: column; gap: var(--pl-4); }
.pl-public-carte h1 { font-size: var(--pl-text-2xl); font-weight: 700; line-height: 1.2; }
.pl-icone-etat { width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 26px; background: var(--pl-primary-50); color: var(--pl-primary); }
.pl-icone-etat.pl-succes { background: var(--pl-success-bg); color: var(--pl-success); }
.pl-icone-etat.pl-attention { background: var(--pl-warning-bg); color: var(--pl-warning); }
.pl-icone-etat.pl-danger { background: var(--pl-danger-bg); color: var(--pl-danger); }
.pl-public-carte .pl-actions-ligne .pl-btn { flex: 1; }
.pl-annulation { display: flex; flex-direction: column; gap: var(--pl-4); }
.pl-public-pied { font-size: var(--pl-text-sm); color: var(--pl-muted); margin: 0; }
.pl-public *, .pl-public *::before, .pl-public *::after { box-sizing: border-box; }
.pl-public { margin: 0; }
.pl-public :is(h1, h2, p, ul) { margin: 0; }
.pl-totaux.pl-totaux-carte { border-top: 0; padding-top: 0; }
.event-details-modal .modal-body { padding: 0; }
.event-details-loading { display: grid; min-height: 16rem; place-items: center; }
.event-details { color: var(--pl-muted); }
.event-details-summary { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--pl-4); padding: var(--pl-5); background: linear-gradient(135deg, color-mix(in srgb, var(--pl-primary) 10%, transparent), color-mix(in srgb, var(--pl-primary) 2.5%, transparent)); }
.event-details-date { color: var(--pl-ink); font-size: var(--pl-text-lg); font-weight: 700; }
.event-details-time { margin-top: var(--pl-1); color: var(--pl-primary); font-size: var(--pl-text-md); font-weight: 600; }
.event-details-status { flex: 0 0 auto; padding: var(--pl-2) 11px; font-size: var(--pl-text-xs); }
.event-details-section { padding: var(--pl-4) var(--pl-5); border-bottom: 1px solid var(--pl-line); }
.event-details-section-title { display: flex; align-items: center; gap: var(--pl-2); margin-bottom: 10px; color: var(--pl-ink); font-size: var(--pl-text-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.event-details-client-name { color: var(--pl-ink); font-size: var(--pl-text-lg); font-weight: 600; }
.event-details-services { display: grid; gap: 10px; }
.event-details-service, .event-details-total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--pl-4); }
.event-details-service-price { flex: 0 0 auto; color: var(--pl-subtle); font-size: var(--pl-text-sm); }
.event-details-total { margin-top: 2px; padding-top: 11px; border-top: 1px dashed var(--pl-line); color: var(--pl-ink); }
.event-details-address { display: flex; flex-direction: column; width: fit-content; color: var(--pl-muted); }
.event-details-address:hover { color: var(--pl-primary); }
.event-details-answers { padding: 0; }
.event-details-collapse { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: var(--pl-4) var(--pl-5); border: 0; background: transparent; text-align: left; }
.event-details-collapse:hover { background: color-mix(in srgb, var(--pl-primary) 3.5%, transparent); }
.event-details-collapse[aria-expanded=true] .event-details-collapse-icon { transform: rotate(180deg); }
.event-details-collapse-icon { color: var(--pl-subtle); transition: transform .2s ease; }
.event-details-answer-list { display: grid; gap: var(--pl-3); padding: var(--pl-4) var(--pl-5); border-top: 1px solid var(--pl-line); background: var(--pl-surface-2); }
.event-details-answer { padding: var(--pl-3); border: 1px solid var(--pl-line); border-radius: 8px; background: var(--pl-surface); }
.event-details-question, .event-details-answer-group { color: var(--pl-ink); font-weight: 600; }
.event-details-question { margin-bottom: 3px; font-size: var(--pl-text-sm); }
.event-details-answer-group { margin-top: var(--pl-1); font-size: var(--pl-text-xs); text-transform: uppercase; }
.event-details-comment { display: flex; align-items: center; justify-content: space-between; gap: var(--pl-4); width: 100%; padding: var(--pl-3); border: 1px solid transparent; border-radius: 8px; background: var(--pl-surface-2); color: var(--pl-muted); text-align: left; }
.event-details-comment:hover { border-color: var(--pl-line); }
.event-details-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: var(--pl-5); }
.event-details-actions form { display: flex; margin: 0; }
.event-details-actions .pl-btn, .event-details-actions form .pl-btn { width: 100%; }
.event-details-time > i { margin-right: var(--pl-1); }
.event-details-collapse .event-details-section-title { margin-bottom: 0; }
.event-details-comment-form .pl-textarea { min-height: 6rem; resize: vertical; }
.event-details-section-title > svg, .event-details-section-title > i { color: var(--pl-primary); }
.pl-liste-defilante { max-height: 10rem; overflow: auto; }
/* Formulaires en modale : groupes titrés, valeur en lecture, encart d'options */
.pl-groupe { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--pl-3); }
.pl-groupe > legend { float: none; margin: 0 0 var(--pl-1); padding: 0; font-size: var(--pl-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--pl-subtle); display: flex; align-items: center; gap: 6px; }
.pl-valeur { min-height: 44px; display: flex; align-items: center; font-weight: 600; color: var(--pl-ink); }
.pl-grid-cp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--pl-3); }
.pl-encart { display: flex; flex-direction: column; gap: var(--pl-2); padding: var(--pl-3) var(--pl-4); border-radius: var(--pl-radius-sm); background: var(--pl-surface-2); }
.pl-encart > div { display: flex; flex-direction: column; gap: 2px; }
.pl-search-plein { max-width: none; flex: none; }
.pl-ligne-titre { display: flex; align-items: center; justify-content: space-between; gap: var(--pl-2); }
.pl-ligne-titre .pl-label > span { color: var(--pl-ink); }
.pl-lien { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--pl-primary); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.pl-segmented label { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: var(--pl-text-sm); font-weight: 600; padding: 6px 14px; border-radius: var(--pl-radius-pill); color: var(--pl-muted); cursor: pointer; margin: 0; }
.pl-segmented label:has(input:checked) { background: var(--pl-primary-50); color: var(--pl-primary); }
.pl-segmented label:has(input:focus-visible) { box-shadow: var(--pl-focus); }
.pl-segmented label > input { position: absolute; opacity: 0; pointer-events: none; }
.pl-segmented.pl-segmented-plein { display: flex; }
.pl-segmented-plein > * { flex: 1; }
.pl-segmented.pl-segmented-jours { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); width: 100%; }
.pl-segmented-jours label { padding: 6px 0; }
.pl-lecture { display: flex; flex-direction: column; gap: var(--pl-2); }
.pl-lecture > span { display: flex; align-items: baseline; gap: var(--pl-2); }
.pl-lecture > span > i, .pl-lecture > span > svg { width: 16px; color: var(--pl-muted); }
.pl-select-ressource { width: auto; max-width: 240px; }
.pl .pl-suggestions { position: absolute; top: 100%; left: 0; right: 0; z-index: 1060; box-shadow: var(--pl-shadow); }
.pl-page-planning #calendar-wrapper { margin-top: 0; }
#sync-status .pl-badge { vertical-align: middle; font-size: var(--pl-text-xs); }
.pl-graphique { position: relative; height: 280px; }
.pl-details { margin-top: var(--pl-4); }
.pl-details > summary { cursor: pointer; font-size: var(--pl-text-sm); color: var(--pl-muted); }
.pl-details > .pl-table { margin-top: var(--pl-2); }
.pl-textarea.pl-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--pl-text-sm); line-height: 1.5; white-space: pre; overflow-x: auto; }
.pl-alert-corps { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: var(--pl-2); }
.pl-quota { display: flex; flex-direction: column; gap: var(--pl-1); }
.pl-quota-entete { display: flex; justify-content: space-between; gap: var(--pl-3); font-size: var(--pl-text-sm); }
.pl-jauge { width: 100%; height: 8px; border: 0; border-radius: var(--pl-radius-pill); overflow: hidden; background: var(--pl-line); appearance: none; }
.pl-jauge::-webkit-progress-bar { background: var(--pl-line); }
.pl-jauge::-webkit-progress-value { background: var(--pl-success); border-radius: var(--pl-radius-pill); }
.pl-jauge::-moz-progress-bar { background: var(--pl-success); }
.pl-jauge-warning::-webkit-progress-value { background: var(--pl-warning); }
.pl-jauge-warning::-moz-progress-bar { background: var(--pl-warning); }
.pl-jauge-danger::-webkit-progress-value { background: var(--pl-danger); }
.pl-jauge-danger::-moz-progress-bar { background: var(--pl-danger); }
.pl-liste-check { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--pl-2); }
.pl-liste-check li { display: flex; gap: var(--pl-2); align-items: baseline; }
.pl-liste-check li::before { content: "✓"; color: var(--pl-success); font-weight: 700; flex: none; }
.pl-liste-check li.pl-non { color: var(--pl-muted); }
.pl-liste-check li.pl-non::before { content: "✕"; color: var(--pl-subtle); }
.pl-offres { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--pl-4); align-items: stretch; }
.pl-offre { display: flex; flex-direction: column; gap: var(--pl-4); }
.pl-offre-entete { display: flex; justify-content: space-between; align-items: center; gap: var(--pl-2); }
.pl-offre-entete h2 { font-size: var(--pl-text-lg); font-weight: 650; }
.pl-offre-prix strong { display: block; font-size: var(--pl-text-2xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.pl-offre-prix span { color: var(--pl-muted); font-size: var(--pl-text-sm); }
.pl-offre .pl-liste-check { flex: 1; }
.pl-offre-action .pl-btn { width: 100%; }
.pl-offre-actuelle { border-color: var(--pl-line-strong); }
.pl-offre-recommandee { border: 1.5px solid var(--pl-primary); box-shadow: var(--pl-shadow); }
.pl-avantages .pl-card { display: flex; flex-direction: column; gap: var(--pl-1); }
.pl-avantages .pl-card > i { color: var(--pl-primary); font-size: var(--pl-text-xl); margin-bottom: var(--pl-1); }
.pl-avantages h2 { font-size: var(--pl-text-md); font-weight: 650; }
.pl-form-bouton { display: flex; flex-direction: column; align-items: flex-start; gap: var(--pl-1); margin-top: var(--pl-4); }

/* ---------- Barre d'outils de liste ---------- */
/* Pagination : balisage Bootstrap (pagination, page-item, page-link) aux couleurs du design system */
.pl-pagination { margin: var(--pl-5) 0 var(--pl-4); }
.pl-pagination .pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--pl-1); margin: 0; padding: 0; list-style: none; }
.pl-pagination .page-item .page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; margin: 0; padding: 0 10px; border: 1px solid var(--pl-line); border-radius: var(--pl-radius-input); background: var(--pl-surface); color: var(--pl-ink-2); font-size: var(--pl-text-sm); font-weight: 600; text-decoration: none; box-shadow: none; }
.pl-pagination .page-item .page-link:hover { background: var(--pl-surface-2); }
.pl-pagination .page-item.active .page-link { background: var(--pl-primary); border-color: var(--pl-primary); color: var(--pl-surface); }
.pl-pagination .page-item.disabled .page-link { opacity: .45; pointer-events: none; }
.pl-pagination-info { margin-top: var(--pl-2); text-align: center; font-size: var(--pl-text-sm); color: var(--pl-muted); }
.pl-toolbar { display: flex; align-items: center; gap: var(--pl-3); margin-bottom: var(--pl-4); flex-wrap: wrap; }
.pl-toolbar > .pl-select { width: auto; min-width: 200px; max-width: 100%; }
.pl-toolbar .pl-search { max-width: 320px; }
.pl-toolbar-filtre { margin-left: auto; }
.pl-toolbar-filtre .pl-select { width: auto; min-width: 200px; max-width: 100%; }
.pl-btn-ghost.active { background: var(--pl-primary-50); color: var(--pl-primary); }
.pl-segmented { display: inline-flex; background: var(--pl-surface); border: 1px solid var(--pl-line); border-radius: var(--pl-radius-pill); padding: 3px; gap: 2px; }
.pl-segmented a, .pl-segmented button { font: inherit; font-size: var(--pl-text-sm); font-weight: 600; padding: 6px 14px; border-radius: var(--pl-radius-pill); color: var(--pl-muted); background: none; border: 0; cursor: pointer; text-decoration: none; white-space: nowrap; }
.pl-segmented .active { background: var(--pl-primary-50); color: var(--pl-primary); }

/* ---------- Tableau : cartes empilées en mobile (data-label sur chaque td) ---------- */
.pl-table-wrap { background: var(--pl-surface); border: 1px solid var(--pl-line); border-radius: var(--pl-radius); overflow: hidden; }
.pl-table { width: 100%; border-collapse: collapse; }
.pl-table th { text-align: left; font-size: var(--pl-text-sm); font-weight: 600; color: var(--pl-muted); padding: 12px var(--pl-4); background: var(--pl-surface-2); border-bottom: 1px solid var(--pl-line); white-space: nowrap; }
.pl-table td { padding: 14px var(--pl-4); border-bottom: 1px solid var(--pl-line); vertical-align: middle; }
.pl-table tr:last-child td { border-bottom: 0; }
.pl-table tbody tr:hover { background: var(--pl-surface-2); }
.pl-table .pl-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-table .pl-col-check { width: 44px; }
.pl-table th.sortable { cursor: pointer; user-select: none; }
.pl-table th.sortable:hover { color: var(--pl-ink); }
.pl-table th .sort-icon { opacity: .35; font-size: .75em; margin-left: 4px; }
.pl-table th.asc .sort-icon, .pl-table th.desc .sort-icon { opacity: 1; color: var(--pl-primary); }
.pl-montant-negatif { color: var(--pl-danger); }
.pl-selection-bar { position: sticky; top: calc(var(--pl-topbar) + 8px); z-index: 25; display: flex; align-items: center; justify-content: space-between; gap: var(--pl-3); flex-wrap: wrap; padding: var(--pl-3) var(--pl-4); margin-bottom: var(--pl-3); background: var(--pl-surface); border: 1px solid var(--pl-primary-100); border-radius: var(--pl-radius-sm); box-shadow: var(--pl-shadow); }
.pl-selection-bar-actions { display: flex; align-items: center; gap: var(--pl-2); flex-wrap: wrap; }
.pl .pagination { gap: 4px; margin: var(--pl-4) 0 0; justify-content: center; }
.pl .page-link { border: 0; border-radius: 8px; color: var(--pl-ink-2); font-weight: 600; min-width: 34px; text-align: center; background: transparent; }
.pl .page-link:hover { background: var(--pl-surface); color: var(--pl-primary); }
.pl .page-item.active .page-link { background: var(--pl-primary); color: #fff; }
.pl .page-item.disabled .page-link { color: var(--pl-subtle); background: transparent; }
.pl-filtres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: var(--pl-3); align-items: end; margin-bottom: var(--pl-4); }
.pl-filtres.pl-filtres-dates { grid-template-columns: repeat(2, minmax(0, 220px)) auto; justify-content: start; }
.pl-table .pl-actions { width: 1%; white-space: nowrap; text-align: right; }
.pl-cell-main { font-weight: 600; color: var(--pl-ink); }
.pl-truncate { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-cell-sub { display: block; color: var(--pl-muted); font-size: var(--pl-text-sm); }

/* ---------- Badges d'état ---------- */
.pl-badge { display: inline-flex; align-items: center; gap: 6px; font-size: var(--pl-text-xs); font-weight: 600; padding: 3px 10px; border-radius: var(--pl-radius-pill); background: var(--pl-surface-2); color: var(--pl-ink-2); border: 1px solid var(--pl-line); white-space: nowrap; }
.pl-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pl-badge-success { background: var(--pl-success-bg); color: var(--pl-success); border-color: transparent; }
.pl-badge-warning { background: var(--pl-warning-bg); color: var(--pl-warning); border-color: transparent; }
.pl-badge-danger { background: var(--pl-danger-bg); color: var(--pl-danger); border-color: transparent; }
.pl-badge-info { background: var(--pl-info-bg); color: var(--pl-info); border-color: transparent; }

/* ---------- Indicateurs ---------- */
.pl-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--pl-3); margin-bottom: var(--pl-6); }
.pl-stat { background: var(--pl-surface); border: 1px solid var(--pl-line); border-radius: var(--pl-radius); padding: var(--pl-4); }
.pl-stat-label { font-size: var(--pl-text-sm); color: var(--pl-muted); }
.pl-stat-value { font-size: var(--pl-text-xl); font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; }
.pl-stat-meta { font-size: var(--pl-text-xs); color: var(--pl-muted); margin-top: 2px; }
.pl-stats-compact { margin-bottom: 0; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.pl-stats-compact .pl-stat { border: 0; background: var(--pl-surface-2); padding: var(--pl-3); }
.pl-stat-value.positive { color: var(--pl-success); }
.pl-stat-value.negative { color: var(--pl-danger); }

/* ---------- Onglets (défilent en mobile) ---------- */
/* La ligne du bas est une ombre interne : rien ne déborde, les onglets ne défilent qu'horizontalement */
.pl-tabs { display: flex; gap: var(--pl-1); box-shadow: inset 0 -1px 0 var(--pl-line); margin-bottom: var(--pl-5); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; }
.pl-tabs::-webkit-scrollbar { display: none; }
.pl-tab { font: inherit; background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 10px var(--pl-3); font-weight: 600; color: var(--pl-muted); border-bottom: 2px solid transparent; white-space: nowrap; text-decoration: none; }
.pl-tab.active { color: var(--pl-primary); border-bottom-color: var(--pl-primary); }
.pl-tab:focus-visible { outline: none; box-shadow: var(--pl-focus); border-radius: 8px 8px 0 0; }
.pl-count { display: inline-flex; align-items: center; font-size: var(--pl-text-xs); font-weight: 600; font-variant-numeric: tabular-nums; background: var(--pl-surface-2); border: 1px solid var(--pl-line); border-radius: var(--pl-radius-pill); padding: 0 7px; color: var(--pl-muted); }

/* ---------- En-tête d'entité (client, ressource…) ---------- */
.pl-entity { display: flex; align-items: center; gap: var(--pl-4); }
.pl-avatar { width: 48px; height: 48px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; background: var(--pl-primary-50); color: var(--pl-primary); overflow: hidden; }
.pl-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pl-avatar-lg { width: 64px; height: 64px; font-size: var(--pl-text-xl); }
.pl-meta { display: flex; flex-wrap: wrap; gap: var(--pl-1) var(--pl-4); color: var(--pl-muted); font-size: var(--pl-text-sm); }
.pl-meta span { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- États vides, alertes ---------- */
.pl-confirmation { display: flex; flex-direction: column; align-items: flex-start; gap: var(--pl-3); padding: var(--pl-6); }
.pl-confirmation .pl-page-title { font-size: var(--pl-text-xl); }
.pl-confirmation p { margin: 0; }
.pl-modale-entete-outils { margin-left: auto; display: flex; align-items: center; gap: var(--pl-1); }
.pl-confirmation-actions { display: flex; gap: var(--pl-2); justify-content: flex-end; width: 100%; margin-top: var(--pl-2); }
.pl-empty { text-align: center; padding: var(--pl-10) var(--pl-6); color: var(--pl-muted); }
.pl-empty-icon { width: 48px; height: 48px; border-radius: 14px; background: var(--pl-primary-50); color: var(--pl-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: var(--pl-3); }
.pl-empty h3 { font-size: var(--pl-text-lg); margin-bottom: var(--pl-1); }
.pl-empty p { margin: 0; }
.pl-alert { display: flex; gap: var(--pl-3); padding: var(--pl-3) var(--pl-4); border-radius: var(--pl-radius-sm); background: var(--pl-info-bg); color: var(--pl-ink-2); font-size: var(--pl-text-sm); }
.pl-alert i, .pl-alert svg { color: var(--pl-info); margin-top: 2px; }
.pl-alert-actions { align-items: center; flex-wrap: wrap; }
.pl-alert-actions > form, .pl-alert-actions > .pl-btn { margin-left: auto; }
.pl-alert-success { background: var(--pl-success-bg); } .pl-alert-success i { color: var(--pl-success); }
.pl-alert-warning { background: var(--pl-warning-bg); } .pl-alert-warning i { color: var(--pl-warning); }
.pl-alert-danger { background: var(--pl-danger-bg); } .pl-alert-danger i { color: var(--pl-danger); }

/* ---------- Pont Bootstrap : modales et menus déroulants (le JS de Bootstrap reste utilisé) ---------- */
.pl .modal-content { border: 0; border-radius: var(--pl-radius); box-shadow: var(--pl-shadow-pop); }
.pl .modal-header { border: 0; padding: var(--pl-5) var(--pl-6) var(--pl-2); align-items: flex-start; }
.pl .modal-title { font-size: var(--pl-text-xl); font-weight: 650; display: flex; align-items: center; gap: var(--pl-2); }
.pl .modal-body { padding: var(--pl-2) var(--pl-6) var(--pl-4); display: flex; flex-direction: column; gap: var(--pl-3); }
.pl .modal-body > p { margin: 0; }
.pl .modal-footer { border: 0; padding: var(--pl-3) var(--pl-6) var(--pl-5); gap: var(--pl-2); }
.pl .modal-footer > * { margin: 0; }
.pl .dropdown-menu { border: 1px solid var(--pl-line); border-radius: var(--pl-radius-sm); box-shadow: var(--pl-shadow-pop); padding: 6px; min-width: 200px; font-size: var(--pl-text-md); }
.pl .dropdown-item { border-radius: 8px; padding: 8px 10px; display: flex; align-items: center; gap: 10px; color: var(--pl-ink-2); font-weight: 500; }
.pl .dropdown-item:hover, .pl .dropdown-item:focus { background: var(--pl-surface-2); color: var(--pl-ink); }
.pl .dropdown-item.text-danger, .pl .dropdown-item.pl-danger { color: var(--pl-danger); }
.pl .dropdown-item.text-danger:hover, .pl .dropdown-item.pl-danger:hover { background: var(--pl-danger-bg); }
.pl .dropdown-item i, .pl .dropdown-item svg { width: 16px; }
.pl .dropdown-divider { margin: 6px 0; border-color: var(--pl-line); }
/* Cartes, champs et boutons Bootstrap : les écrans pas encore migrés et les composants React (constructeur de questions) prennent les mêmes formes */
.pl .card { border: 1px solid var(--pl-line); border-radius: var(--pl-radius); box-shadow: none; }
.pl .card-header { background: none; border-bottom: 1px solid var(--pl-line); padding: var(--pl-4) var(--pl-5); font-weight: 650; }
.pl .card-header:first-child { border-radius: var(--pl-radius) var(--pl-radius) 0 0; }
.pl .card-footer { background: none; border-top: 1px solid var(--pl-line); padding: var(--pl-3) var(--pl-5); }
.pl .card-body { padding: var(--pl-5); }
.pl .form-label { font-weight: 600; font-size: var(--pl-text-sm); color: var(--pl-ink); margin-bottom: 5px; }
.pl .form-control, .pl .form-select { min-height: 42px; border: 1.5px solid var(--pl-line); border-radius: var(--pl-radius-input); font-size: var(--pl-text-md); color: var(--pl-ink); }
.pl .form-control:focus, .pl .form-select:focus { border-color: var(--pl-primary); box-shadow: var(--pl-focus); }
.pl .form-check-input:checked { background-color: var(--pl-primary); border-color: var(--pl-primary); }
.pl .btn { padding: .5rem 1rem; border-radius: var(--pl-radius-pill); font-size: var(--pl-text-md); font-weight: 600; }
.pl .btn-primary { background: var(--pl-primary); border-color: var(--pl-primary); }
.pl .btn-primary:hover { background: var(--pl-primary-600); border-color: var(--pl-primary-600); }
.pl-icon-danger { width: 40px; height: 40px; border-radius: 12px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--pl-danger-bg); color: var(--pl-danger); }
.pl-icon-info { width: 40px; height: 40px; border-radius: 12px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--pl-primary-50); color: var(--pl-primary); }
.pl-annonce { display: flex; gap: var(--pl-4); align-items: flex-start; margin-bottom: var(--pl-5); border-color: var(--pl-primary-100); }
.pl-annonce-corps { display: flex; flex-direction: column; gap: var(--pl-3); min-width: 0; flex: 1; }
.pl-annonce-corps h2 { font-size: var(--pl-text-lg); font-weight: 650; }
.pl-annonce-corps p { margin: 0; }
.pl-annonce-actions { display: flex; flex-wrap: wrap; gap: var(--pl-2); align-items: center; }
.pl-list { margin: 0; padding-left: 18px; color: var(--pl-ink-2); }

/* ---------- Fiche client : listes à puces, adresses, planification ---------- */
.pl-bloc + .pl-bloc { margin-top: var(--pl-6); }
.pl-bloc-entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pl-3); margin-bottom: var(--pl-3); }
.pl-bloc-entete h2 { margin: 0; font-size: var(--pl-text-lg); font-weight: 650; color: var(--pl-ink); }

.pl-card.pl-card-liste { padding: 0; overflow: hidden; }
.pl-liste { list-style: none; margin: 0; padding: 0; }
.pl-liste-ligne { display: flex; align-items: center; gap: var(--pl-4); padding: var(--pl-3) var(--pl-5); }
.pl-liste-ligne + .pl-liste-ligne { border-top: 1px solid var(--pl-line); }
.pl-liste-contenu { flex: 1; min-width: 0; }
.pl-liste-titre { font-weight: 600; color: var(--pl-ink); line-height: 1.35; overflow-wrap: anywhere; }
.pl-liste-detail { display: flex; flex-wrap: wrap; gap: 2px var(--pl-4); margin-top: 2px; font-size: var(--pl-text-sm); color: var(--pl-muted); }
.pl-liste-detail span { display: inline-flex; align-items: center; gap: 6px; }
.pl-liste-actions { display: flex; align-items: center; gap: var(--pl-2); flex-shrink: 0; }
.pl-liste-puce { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--pl-radius-input); background: var(--pl-surface-2); color: var(--pl-muted); }
.pl-liste-date { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--pl-radius-input); background: var(--pl-surface-2); border: 1px solid var(--pl-line); line-height: 1; }
.pl-liste-date-jour { font-size: var(--pl-text-lg); font-weight: 650; font-variant-numeric: tabular-nums; color: var(--pl-ink); }
.pl-liste-date-mois { margin-top: 3px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--pl-muted); }
.pl-liste-ligne.pl-passee .pl-liste-titre { color: var(--pl-muted); }
.pl-liste-ligne.pl-passee .pl-badge { background: var(--pl-surface-2); color: var(--pl-muted); }
.pl-liste-pied { padding: var(--pl-3) var(--pl-5); border-top: 1px solid var(--pl-line); font-size: var(--pl-text-sm); color: var(--pl-muted); }

/* Statut d'un rendez-vous ou d'une facture : la valeur de l'enum choisit le ton */
.pl-badge[data-statut="Planifie"], .pl-badge[data-statut="Encaissee"] { background: var(--pl-success-bg); color: var(--pl-success); border-color: transparent; }
.pl-badge[data-statut="Annule"] { background: var(--pl-danger-bg); color: var(--pl-danger); border-color: transparent; }
.pl-badge[data-statut="Finalisee"] { background: var(--pl-primary-50); color: var(--pl-primary); border-color: transparent; }
.pl-badge[data-statut="Provisoire"] { background: var(--pl-warning-bg); color: var(--pl-warning); border-color: transparent; }

.pl-grille-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: var(--pl-3); }
.pl-card.pl-adresse { display: flex; flex-direction: column; gap: var(--pl-2); padding: var(--pl-4); }
.pl-adresse-entete { display: flex; align-items: center; justify-content: space-between; gap: var(--pl-2); min-height: 32px; }
.pl-adresse-actions { display: flex; gap: var(--pl-1); margin: -4px -4px -4px auto; }
.pl-adresse address { margin: 0; font-size: var(--pl-text-md); line-height: 1.5; color: var(--pl-muted); overflow-wrap: anywhere; }
.pl-adresse-nom { font-weight: 600; color: var(--pl-ink); }

.pl-recap { display: flex; align-items: center; gap: var(--pl-3); padding: var(--pl-3) var(--pl-4); margin-bottom: var(--pl-4); border: 1px solid var(--pl-line); border-radius: var(--pl-radius-input); background: var(--pl-surface-2); }
.pl-recap > div { min-width: 0; }
.pl-recap-titre { font-weight: 600; color: var(--pl-ink); }
.pl-recap-detail { font-size: var(--pl-text-sm); color: var(--pl-muted); }

/* Disponibilité d'un créneau : data-etat posé par modale-planification.js */
.pl-disponibilite { display: flex; gap: 10px; padding: 10px 14px; border: 1px solid var(--pl-line); border-radius: var(--pl-radius-input); background: var(--pl-surface-2); font-size: var(--pl-text-md); color: var(--pl-muted); }
.pl-disponibilite-icone { flex: none; margin-top: 2px; }
.pl-disponibilite-titre { font-weight: 600; }
.pl-disponibilite-conflits { margin: 4px 0 0; padding-left: 18px; font-size: var(--pl-text-sm); }
.pl-disponibilite-conflits:empty { display: none; }
.pl-disponibilite[data-etat="libre"] { background: var(--pl-success-bg); border-color: transparent; color: var(--pl-success); }
.pl-disponibilite[data-etat="hors-grille"] { background: var(--pl-info-bg); border-color: transparent; color: var(--pl-info); }
.pl-disponibilite[data-etat="occupe"] { background: var(--pl-warning-bg); border-color: transparent; color: var(--pl-warning); }
.pl-disponibilite[data-etat="erreur"] { background: var(--pl-danger-bg); border-color: transparent; color: var(--pl-danger); }

.pl-creneaux { display: flex; flex-wrap: wrap; gap: 6px; max-height: 9.5rem; overflow-y: auto; }
.pl-creneau { min-width: 4.25rem; padding: 6px 10px; border: 1px solid var(--pl-line); border-radius: 8px; background: var(--pl-surface); color: var(--pl-ink); font: inherit; font-size: var(--pl-text-md); font-variant-numeric: tabular-nums; cursor: pointer; }
.pl-creneau:hover { border-color: var(--pl-primary-100); background: var(--pl-primary-50); }
.pl-creneau.active { border-color: var(--pl-primary); background: var(--pl-primary); color: var(--pl-surface); }
.pl-creneaux-vide { font-size: var(--pl-text-sm); color: var(--pl-muted); }

/* ---------- Mobile : largeur de l'application ≤ 760 px ---------- */
@container pl (max-width: 760px) {
    .pl-shell { grid-template-columns: minmax(0, 1fr); }
    .pl-sidebar { display: none; }
    .pl-topbar { padding: 0 var(--pl-3) 0 var(--pl-2); gap: var(--pl-2); }
    .pl-topbar .pl-topbar-menu { display: inline-flex; font-size: 18px; }
    .pl-env { font-size: 10px; padding: 2px 7px; }
    .pl-user-name { display: none; }
    .pl-content { padding: var(--pl-5) var(--pl-4) var(--pl-8); }
    /* Menu complet : tiroir ouvert par le bouton ☰ de la barre du haut */
    .pl-shell.pl-nav-open .pl-sidebar { display: flex; position: fixed; inset: 0 auto 0 0; width: min(300px, 85vw); height: 100%; z-index: 60; box-shadow: var(--pl-shadow-pop); }
    .pl-shell.pl-nav-open .pl-backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(23, 32, 51, .35); }
    .pl-topbar-logo { display: block; }
    .pl-search { display: none; }

    .pl-page { padding: var(--pl-5) var(--pl-4) var(--pl-8); }
    .pl-page-title { font-size: 1.375rem; }
    .pl-page-header { align-items: flex-start; flex-wrap: nowrap; margin-bottom: var(--pl-4); }
    .pl-page-header > :first-child { min-width: 0; }
    /* Fiche : l'en-tête d'entité prend toute la largeur, les actions passent dessous */
    .pl-page-header:has(> .pl-entity), .pl-page-header.pl-page-header-pile { flex-direction: column; align-items: stretch; gap: var(--pl-3); }
    .pl-page-header.pl-page-header-pile .pl-page-actions .pl-btn-primary { flex: 1; }
    .pl-page-header:has(> .pl-entity) .pl-page-actions .pl-btn-primary { flex: 1; }
    .pl-entity .pl-avatar-lg { width: 52px; height: 52px; }
    /* L'action principale devient un bouton rond flottant en bas à droite */
    .pl-page-actions .pl-btn-primary.pl-fab { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); width: 56px; height: 56px; padding: 0; border-radius: 50%; box-shadow: var(--pl-shadow-pop); z-index: 25; }
    .pl-page-actions .pl-fab .pl-btn-label { display: none; }
    .pl-page-actions .pl-btn-secondary .pl-btn-label { display: none; }

    .pl-section { grid-template-columns: minmax(0, 1fr); gap: var(--pl-4); padding: var(--pl-4); }
    .pl-grid-2 { grid-template-columns: minmax(0, 1fr); }
    .pl-grid-apercu { grid-template-columns: minmax(0, 1fr); }
    .pl-apercu { position: static; }
    .pl-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pl-grid-3 > :first-child { grid-column: 1 / -1; }
    .pl-actionbar { bottom: calc(var(--pl-3) + env(safe-area-inset-bottom)); width: auto; margin-left: 0; }
    .pl-actionbar .pl-btn-primary { flex: 1; }
    .pl-dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .pl-dl dd { margin-bottom: var(--pl-3); }
    .pl-toolbar .pl-search { display: block; max-width: none; flex: 1 1 100%; }
    .pl-segmented { max-width: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; }
    .pl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pl-2); margin-bottom: var(--pl-4); }
    .pl-stat { padding: var(--pl-2) var(--pl-3); }
    .pl-stat-label { font-size: var(--pl-text-xs); }
    .pl-stat-value { font-size: var(--pl-text-lg); }
    .pl-annonce { flex-direction: column; gap: var(--pl-3); }
    .pl-annonce .pl-table-wrap { display: none; }
    .pl-filtres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pl-filtres > :nth-child(3), .pl-filtres > .pl-btn { grid-column: 1 / -1; }

    /* Détail de rendez-vous */
    .event-details-summary, .event-details-section, .event-details-collapse, .event-details-answer-list, .event-details-actions { padding-left: var(--pl-4); padding-right: var(--pl-4); }
    .event-details-actions { grid-template-columns: minmax(0, 1fr); }

    /* Fiche client */
    .pl-liste-ligne { padding: var(--pl-3) var(--pl-4); gap: var(--pl-3); }
    .pl-liste-ligne > .pl-liste-puce { display: none; }
    .pl-liste-date { width: 42px; height: 42px; }
    .pl-liste-empilee .pl-liste-ligne { flex-wrap: wrap; }
    .pl-liste-empilee .pl-liste-actions { width: 100%; justify-content: space-between; padding-left: 54px; }
    .pl-grille-cartes { grid-template-columns: minmax(0, 1fr); }
    .pl-creneau { flex: 1 0 calc(25% - 6px); }

    /* Tableau → cartes */
    .pl-table-wrap { background: none; border: 0; border-radius: 0; overflow: visible; }
    .pl-table thead { display: none; }
    .pl-table, .pl-table tbody, .pl-table tr, .pl-table td { display: block; }
    .pl-table tr { position: relative; background: var(--pl-surface); border: 1px solid var(--pl-line); border-radius: var(--pl-radius-sm); padding: var(--pl-3) var(--pl-4); margin-bottom: var(--pl-2); }
    .pl-table td { padding: 2px 0; border: 0; }
    .pl-table td[data-label]:not(.pl-cell-primary)::before { content: attr(data-label) " · "; color: var(--pl-subtle); font-size: var(--pl-text-sm); }
    .pl-table td.pl-hide-mobile { display: none; }
    .pl-table .pl-num { text-align: left; }
    .pl-table .pl-actions { position: absolute; top: 8px; right: 8px; width: auto; }
    .pl-table td.pl-col-check { position: absolute; top: 14px; right: 52px; width: auto; padding: 0; }
    .pl-table tr:has(> td.pl-col-check) > td.pl-cell-primary { padding-right: 84px; }
    .pl-toolbar-filtre { margin-left: 0; flex: 1 1 100%; }
    .pl-selection-bar-actions { width: 100%; }
    .pl-selection-bar-actions .pl-btn-primary { flex: 1; }
    .pl-toolbar-filtre .pl-select { width: 100%; }
    .pl-filtres.pl-filtres-dates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pl-card-tableau .pl-table tr { border: 0; border-bottom: 1px solid var(--pl-line); border-radius: 0; margin: 0; padding: var(--pl-3) var(--pl-5); background: none; }
    .pl-toast { bottom: calc(24px + env(safe-area-inset-bottom)); }
    .pl-card-tableau .pl-table tr:last-child { border-bottom: 0; }
    .pl-stats.pl-stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pl-dl.pl-dl-pile { grid-template-columns: 96px minmax(0, 1fr); gap: var(--pl-2) var(--pl-3); }
    .pl-dl.pl-dl-pile dd { margin-bottom: 0; }
    .pl-card-tableau .pl-table td:not(.pl-cell-primary):not(.pl-hide-mobile) { display: inline-block; margin-right: var(--pl-3); font-size: var(--pl-text-sm); }
    .pl-card-tableau .pl-table td.pl-ligne-montant.pl-ligne-montant { display: block; margin: 2px 0 0; font-size: var(--pl-text-md); }
    .pl-card-tableau .pl-table .pl-cell-sub { display: inline; margin-left: 4px; }
}

@media (prefers-reduced-motion: reduce) { .pl * { transition: none !important; } }