/* ==========================================================
   WeddingPart — Tool Bar (refonte v2)
   --------------------------------------------------------
   Design "floating pill" en bas d'écran, fixe, mobile-first.
   Inspiration : Canva/Procreate mobile, Apple Photos editor.

   Avantages :
   - Toujours accessible (zone pouce sur mobile)
   - Frosted glass + ombre douce → flotte au-dessus du canvas
   - Scrollable horizontalement si trop d'actions
   - Safe-area-inset pour iPhone notch/home indicator
   - Le panneau d'actions secondaires s'ouvre en bottom-sheet
     (sliding-up) sur mobile et reste docké à gauche sur desktop
     (override par chaque plugin via .idd-pb-root / .idd-am-root)

   Structure HTML attendue (inchangée par rapport à v1 — c'est juste
   la mise en forme qui bouge) :

   <div class="idd-tool-toolbar" data-idd-tb>
     <div class="idd-tool-toolbar__left">…</div>
     <div class="idd-tool-toolbar__center">…</div>
     <div class="idd-tool-toolbar__right">…</div>
   </div>
   <aside class="idd-tool-panel">…</aside>
   ========================================================== */

:root {
    --idd-tb-height-mobile:  56px;
    --idd-tb-height-desktop: 60px;
    --idd-tb-radius-pill:    999px;
    --idd-tb-bottom-gap:     14px;
    --idd-tb-z-bar:          40;
    --idd-tb-z-backdrop:     85;
    --idd-tb-z-panel:        95;
}

/* ──────────────────────────────────────────────────────────
   .idd-tool-toolbar v3 — full-width edge-to-edge, collée juste
   AU-DESSUS de la shell-bar. Plus de pill flottante : les deux
   barres forment une pile cohérente au bas de l'écran.
   ────────────────────────────────────────────────────────── */
.idd-tool-toolbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(60px + env(safe-area-inset-bottom, 0px));  /* au-dessus de la shell-bar (60px) */
    z-index: var(--idd-tb-z-bar);

    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    min-height: 56px;

    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid rgba(0,0,0,0.06);
    border-bottom: 1px solid rgba(0,0,0,0.04);
    box-shadow: 0 -10px 28px -10px rgba(0,0,0,0.10);

    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;

    transition: transform .25s cubic-bezier(.2,.8,.2,1),
                opacity .2s ease;
}
.idd-tool-toolbar::-webkit-scrollbar { display: none; }

/* Cache la barre quand un panneau plein écran (du shell) est ouvert */
body.is-panel-open .idd-tool-toolbar,
body.is-shell-actions-open .idd-tool-toolbar {
    transform: translateY(110%);
    opacity: 0;
    pointer-events: none;
}

/* Zones */
.idd-tool-toolbar__left,
.idd-tool-toolbar__center,
.idd-tool-toolbar__right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.idd-tool-toolbar__center {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    padding: 0 8px;
}

/* Séparateur visuel discret entre les zones (desktop) */
@media (min-width: 768px) {
    .idd-tool-toolbar__left + .idd-tool-toolbar__center::before {
        content: '';
        width: 1px;
        height: 24px;
        background: rgba(0,0,0,0.08);
        margin: 0 4px 0 0;
    }
    .idd-tool-toolbar__center + .idd-tool-toolbar__right::before {
        content: '';
        width: 1px;
        height: 24px;
        background: rgba(0,0,0,0.08);
        margin: 0 0 0 4px;
    }
}

/* ──────────────────────────────────────────────────────────
   Boutons (icône, retour, burger)
   ────────────────────────────────────────────────────────── */
.idd-tool-toolbar__btn,
.idd-tool-toolbar__burger,
.idd-tool-toolbar__back {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    color: var(--app-ink, #2D3748);
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    font: inherit;
    transition: background-color .15s ease, color .15s ease, transform .12s ease;
}
.idd-tool-toolbar__btn:hover,
.idd-tool-toolbar__burger:hover,
.idd-tool-toolbar__back:hover {
    background: rgba(0,0,0,0.05);
}
.idd-tool-toolbar__btn:active,
.idd-tool-toolbar__burger:active,
.idd-tool-toolbar__back:active {
    transform: scale(.94);
}
.idd-tool-toolbar__btn:focus-visible,
.idd-tool-toolbar__burger:focus-visible,
.idd-tool-toolbar__back:focus-visible {
    outline: 2px solid var(--app-brand, #B5637A);
    outline-offset: 2px;
}
.idd-tool-toolbar__btn[disabled],
.idd-tool-toolbar__btn[aria-disabled="true"] {
    opacity: .30;
    cursor: not-allowed;
    pointer-events: none;
}
.idd-tool-toolbar__btn svg,
.idd-tool-toolbar__back svg {
    width: 20px; height: 20px;
    stroke-width: 1.8;
    flex-shrink: 0;
}
.idd-tool-toolbar__btn.is-active {
    background: var(--app-brand-soft, rgba(181,99,122,0.16));
    color: var(--app-brand-dark, #9A4F65);
    border-color: var(--app-brand-border, rgba(181,99,122,0.30));
}

/* Bouton retour : label visible dès que la place le permet */
.idd-tool-toolbar__back {
    padding: 0 12px;
    gap: 6px;
    width: auto;
    min-width: 44px;
    color: var(--app-muted, #718096);
    font-size: 13px;
    font-weight: 600;
}
.idd-tool-toolbar__back svg { width: 16px; height: 16px; stroke-width: 2.2; }

/* Labels — cachés sur mobile par défaut */
.idd-tool-toolbar__label { display: none; }

/* Burger = bouton "Plus" mis en avant (point d'accès au panneau outils) */
.idd-tool-toolbar__burger {
    background: var(--app-brand, #B5637A);
    color: #fff;
    border-color: var(--app-brand-dark, #9A4F65);
}
.idd-tool-toolbar__burger:hover {
    background: var(--app-brand-dark, #9A4F65);
}
.idd-tool-toolbar__burger-lines {
    width: 16px;
    height: 14px;
    position: relative;
    display: block;
}
.idd-tool-toolbar__burger-lines span {
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
.idd-tool-toolbar__burger-lines span:nth-child(1) { top: 1px; }
.idd-tool-toolbar__burger-lines span:nth-child(2) { top: 6px; }
.idd-tool-toolbar__burger-lines span:nth-child(3) { top: 11px; }
.idd-tool-toolbar__burger[aria-expanded="true"] .idd-tool-toolbar__burger-lines span:nth-child(1) {
    top: 6px; transform: rotate(45deg);
}
.idd-tool-toolbar__burger[aria-expanded="true"] .idd-tool-toolbar__burger-lines span:nth-child(2) {
    opacity: 0;
}
.idd-tool-toolbar__burger[aria-expanded="true"] .idd-tool-toolbar__burger-lines span:nth-child(3) {
    top: 6px; transform: rotate(-45deg);
}

/* ──────────────────────────────────────────────────────────
   Zone centre — titre + statut sauvegarde
   ────────────────────────────────────────────────────────── */
.idd-tool-toolbar__title {
    display: none;        /* caché par défaut, redondant avec le header shell */
}
.idd-tool-toolbar__status {
    font-size: 11px;
    color: var(--app-muted, #718096);
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 6px;
}
.idd-tool-toolbar__status[data-status="saving"] { color: var(--app-brand-dark, #9A4F65); }
.idd-tool-toolbar__status[data-status="error"]  { color: #C0392B; }
.idd-tool-toolbar__status[data-status="saved"]  { color: #4A8F5F; }

/* ──────────────────────────────────────────────────────────
   CTA primaire dans __right (« Télécharger »)
   ────────────────────────────────────────────────────────── */
.idd-tool-toolbar__right .btn,
.idd-tool-toolbar__right button.idd-tool-toolbar__primary,
.idd-tool-toolbar__primary {
    appearance: none;
    background: var(--app-brand, #B5637A);
    color: #fff;
    border: 1px solid var(--app-brand-dark, #9A4F65);
    height: 44px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background-color .15s ease, transform .12s ease;
    flex-shrink: 0;
}
.idd-tool-toolbar__primary:hover { background: var(--app-brand-dark, #9A4F65); }
.idd-tool-toolbar__primary:active { transform: scale(.97); }
.idd-tool-toolbar__primary svg { width: 16px; height: 16px; stroke-width: 2; }
.idd-tool-toolbar__primary-label { display: none; }
.idd-tool-toolbar__primary-label,
.idd-tool-toolbar__back > span.idd-tool-toolbar__label { /* label libellé du retour */
    display: none;
}

/* ──────────────────────────────────────────────────────────
   Tablette ≥ 600px : labels du retour visibles
   Desktop ≥ 768px : labels secondaires visibles aussi
   ────────────────────────────────────────────────────────── */
@media (min-width: 600px) {
    .idd-tool-toolbar__back .idd-tool-toolbar__label { display: inline; }
}

@media (min-width: 768px) {
    .idd-tool-toolbar {
        min-height: var(--idd-tb-height-desktop);
        gap: 6px;
        padding: 8px;
    }
    .idd-tool-toolbar__btn {
        width: auto;
        min-width: 44px;
        padding: 0 12px;
        gap: 6px;
    }
    .idd-tool-toolbar__btn[data-icon-only="true"] {
        width: 44px;
        padding: 0;
    }
    .idd-tool-toolbar__btn[data-icon-only="true"] .idd-tool-toolbar__label { display: none; }
    .idd-tool-toolbar__label { display: inline; font-size: 13px; font-weight: 500; }
    .idd-tool-toolbar__status { font-size: 12px; }
    .idd-tool-toolbar__primary { padding: 0 20px; }
    .idd-tool-toolbar__primary-label { display: inline; }
}

/* ──────────────────────────────────────────────────────────
   Panneau d'actions secondaires
   ----------------------------------------------------------
   Par défaut (mobile) : slide-up depuis le bas (bottom-sheet)
   Sur desktop : chaque plugin décide où le docker (override
   via .idd-pb-root / .idd-am-root .idd-tool-panel)
   ────────────────────────────────────────────────────────── */

.idd-tool-panel-backdrop {
    position: fixed;
    inset: 0;
    top: var(--app-adminbar-h, 0);
    background: rgba(29,24,25,0.50);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: var(--idd-tb-z-backdrop);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}
body.is-idd-tb-panel-open .idd-tool-panel-backdrop {
    opacity: 1;
    visibility: visible;
}

.idd-tool-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    max-height: 88vh;
    width: auto;
    z-index: var(--idd-tb-z-panel);
    background: var(--app-bg, #FAFAF8);
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
    border-left: 0;
    box-shadow: 0 -22px 60px -10px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    visibility: hidden;
    transition: transform .3s cubic-bezier(.2,.8,.2,1), visibility .3s ease;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
body.is-idd-tb-panel-open .idd-tool-panel {
    transform: translateY(0);
    visibility: visible;
}

/* Drag handle */
.idd-tool-panel::before {
    content: '';
    display: block;
    width: 42px;
    height: 4px;
    background: rgba(0,0,0,0.15);
    border-radius: 2px;
    margin: 8px auto 4px;
    flex-shrink: 0;
}

.idd-tool-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 18px 12px;
    border-bottom: 1px solid var(--app-line, #E2D9CC);
    background: transparent;
    flex-shrink: 0;
}
.idd-tool-panel__title {
    margin: 0;
    font-family: var(--font-serif, 'Cormorant Garamond', serif);
    font-size: 20px;
    font-weight: 700;
    color: var(--app-ink, #2D3748);
    letter-spacing: -.01em;
}
.idd-tool-panel__close {
    appearance: none;
    background: transparent;
    border: 1px solid var(--app-line, #E2D9CC);
    color: var(--app-ink, #2D3748);
    width: 36px;
    height: 36px;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.idd-tool-panel__close:hover { background: var(--app-surface-2, #F4EFE6); }
.idd-tool-panel__close svg { width: 16px; height: 16px; stroke-width: 2; }

.idd-tool-panel__body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    -webkit-overflow-scrolling: touch;
}

.idd-tool-panel__group {
    margin-bottom: 22px;
}
.idd-tool-panel__group:last-child { margin-bottom: 0; }
.idd-tool-panel__group-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--app-brand, #B5637A);
    margin: 0 0 10px;
}
.idd-tool-panel__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.idd-tool-panel__item {
    appearance: none;
    background: var(--app-surface, #fff);
    border: 1px solid var(--app-line, #E2D9CC);
    color: var(--app-ink, #2D3748);
    text-align: left;
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background-color .15s ease, border-color .15s ease, transform .12s ease;
    line-height: 1.25;
}
.idd-tool-panel__item:hover {
    background: var(--app-surface-2, #F4EFE6);
    border-color: var(--app-brand-border, rgba(181,99,122,0.35));
}
.idd-tool-panel__item:active { transform: scale(.98); }
.idd-tool-panel__item svg {
    width: 18px;
    height: 18px;
    stroke-width: 1.8;
    flex-shrink: 0;
    color: var(--app-muted, #718096);
}
.idd-tool-panel__item-text {
    flex: 1;
    min-width: 0;
}
.idd-tool-panel__item-label {
    display: block;
    font-weight: 600;
    color: var(--app-ink, #2D3748);
}
.idd-tool-panel__item-hint {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--app-muted, #718096);
    margin-top: 2px;
}
.idd-tool-panel__item--danger {
    color: #C0392B;
    border-color: rgba(192,57,43,0.25);
}
.idd-tool-panel__item--danger svg { color: #C0392B; }
.idd-tool-panel__item--danger:hover { background: rgba(192,57,43,0.06); }

.idd-tool-panel__footer {
    padding: 12px 16px;
    border-top: 1px solid var(--app-line, #E2D9CC);
    background: var(--app-surface, #fff);
    font-size: 12px;
    color: var(--app-muted, #718096);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-shrink: 0;
}

/* ──────────────────────────────────────────────────────────
   DOUBLE TOOLBAR -> SIMPLE TOOLBAR
   On masque .app-bottomnav (legacy) ET .idd-shell-bar (v3) :
   l'utilisateur a demande qu'il n'y ait qu'UNE seule barre,
   celle du haut (.app-header) avec son bouton "Tous les outils"
   qui ouvre le panel plein ecran.
   La logique contextuelle "Plus d'actions" du shell-bar est
   conservee dans le panel principal (item "Voir tous mes outils").
   ────────────────────────────────────────────────────────── */
.app-bottomnav,
.idd-shell-bar,
.idd-shell-actions-backdrop,
#idd-shell-actions-panel { display: none !important; }

/* Plus de padding-bottom reserve : la shell-bar n'existe plus visuellement.
   On garde uniquement l'espace pour la safe-area iOS (notch bas). */
body.idd-tools-body .app-workspace {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
body.idd-pb-active .app-workspace,
body.idd-am-active .app-workspace {
    padding-bottom: 0;
}

/* ══════════════════════════════════════════════════════════
   .idd-shell-bar v3 — PLEINE LARGEUR, EDGE-TO-EDGE, fixe bas.
   Présente sur TOUS les outils (y compris pb/am qui ont leur
   toolbar v2 contextuelle EMPILÉE AU-DESSUS).
   ══════════════════════════════════════════════════════════ */

/* Cache la shell-bar quand le panel plein écran (shell ou shell-actions) est ouvert */
body.is-panel-open .idd-shell-bar,
body.is-shell-actions-open .idd-shell-bar { transform: translateY(110%); }

/* Quand une toolbar v2 est empilée au-dessus, la shell-bar perd son
   ombre (couverte) et son border-top (la toolbar v2 a le sien) */
body.idd-pb-active .idd-shell-bar,
body.idd-am-active .idd-shell-bar {
    box-shadow: none;
    border-top: 0;
}

.idd-shell-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--idd-tb-z-bar, 40);

    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 8px 14px calc(8px + env(safe-area-inset-bottom, 0px));
    min-height: 60px;

    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 -8px 24px -8px rgba(0,0,0,0.10);
    transition: transform .3s cubic-bezier(.2,.8,.2,1);
}

/* Bouton retour Mes outils (gauche) */
.idd-shell-bar__back {
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--app-muted, #718096);
    height: 44px;
    padding: 0 14px 0 4px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    text-decoration: none;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    transition: background-color .15s ease, color .15s ease;
    flex-shrink: 0;
}
.idd-shell-bar__back:hover {
    background: rgba(0,0,0,0.05);
    color: var(--app-ink, #2D3748);
    text-decoration: none;
}
.idd-shell-bar__back:active { transform: scale(.96); }
.idd-shell-bar__back svg { width: 18px; height: 18px; stroke-width: 2; }

/* Titre central (eyebrow + nom) */
.idd-shell-bar__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    text-align: center;
    line-height: 1.15;
    padding: 0 4px;
}
.idd-shell-bar__title-eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--app-brand, #B5637A);
    line-height: 1;
}
.idd-shell-bar__title-name {
    font-family: var(--font-serif, 'Cormorant Garamond', serif);
    font-size: 16px;
    font-weight: 700;
    color: var(--app-ink, #2D3748);
    margin-top: 2px;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Bouton "+" droite — bouton circulaire brand (icône seule).
   Anime en croix × quand le panel est ouvert. */
.idd-shell-bar__plus {
    appearance: none;
    background: linear-gradient(135deg, var(--app-brand, #B5637A), var(--app-brand-dark, #9A4F65));
    border: 0;
    color: #fff;
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease, transform .12s ease, box-shadow .15s ease;
    flex-shrink: 0;
    box-shadow: 0 4px 14px -4px rgba(181,99,122,0.55);
}
.idd-shell-bar__plus:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px -4px rgba(181,99,122,0.70);
}
.idd-shell-bar__plus:active { transform: scale(.95); }
.idd-shell-bar__plus:focus-visible {
    outline: 2px solid var(--app-brand-dark, #9A4F65);
    outline-offset: 2px;
}
.idd-shell-bar__plus-cross {
    width: 18px;
    height: 18px;
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}
.idd-shell-bar__plus-cross span {
    position: absolute;
    background: currentColor;
    border-radius: 2px;
    transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.idd-shell-bar__plus-cross span:nth-child(1) {
    left: 0;
    top: 50%;
    width: 100%;
    height: 2.4px;
    margin-top: -1.2px;
}
.idd-shell-bar__plus-cross span:nth-child(2) {
    left: 50%;
    top: 0;
    width: 2.4px;
    height: 100%;
    margin-left: -1.2px;
}
.idd-shell-bar__plus[aria-expanded="true"] .idd-shell-bar__plus-cross span:nth-child(1) {
    transform: rotate(45deg);
}
.idd-shell-bar__plus[aria-expanded="true"] .idd-shell-bar__plus-cross span:nth-child(2) {
    transform: rotate(45deg);
}
/* Mobile étroit : label retour caché */
@media (max-width: 600px) {
    .idd-shell-bar__back .idd-shell-bar__label { display: none; }
    .idd-shell-bar__back { padding: 0 4px; width: 44px; justify-content: center; }
    .idd-shell-bar__plus { width: 46px; height: 46px; }
}

/* ──────────────────────────────────────────────────────────
   MOBILE (< 1024px) : depuis qu'on a retire la shell-bar bas (cf. plus haut
   `.idd-shell-bar { display: none !important; }`), il n'y a plus de relais
   "+" pour les actions des plugins -> on remet leurs barres natives
   (telecharger, partager, etc.). Sinon plus aucun acces a ces actions.
   ────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
    /* On garde un padding-bottom genereux dans le workspace pour que les
       barres internes ne masquent pas le dernier contenu de la liste. */
    body:has(.wpz-invites-bottom-bar) .app-workspace,
    body:has(.wpz-pt-bottom-bar) .app-workspace {
        padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* DESKTOP (≥ 1024px) : les bottom-bars internes restent visibles,
   on les pousse juste pour ne pas être sous la shell-bar */
@media (min-width: 1024px) {
    body:has(.wpz-invites-bottom-bar) .wpz-invites-bottom-bar,
    body:has(.wpz-pt-bottom-bar) .wpz-pt-bottom-bar {
        bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
    }
    body:has(.wpz-invites-fab) .wpz-invites-fab,
    body:has(.wpz-pt-fab) .wpz-pt-fab {
        bottom: calc(150px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ══════════════════════════════════════════════════════════
   PANEL D'ACTIONS — side-drawer pleine hauteur depuis la droite
   - Largeur ≤ 420px desktop, plein écran ≤ 640px
   - Fond opaque (pas de blur translucide), ombre douce à gauche
   - Slide horizontal (translateX)
   ══════════════════════════════════════════════════════════ */

.idd-shell-actions-backdrop {
    position: fixed;
    inset: 0;
    top: var(--app-adminbar-h, 0);
    background: rgba(29,24,25,0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    /* Passe au-dessus du header de l'app (z=100) et de la shell-bar (z=200) */
    z-index: var(--app-z-backdrop, 9000);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}
body.is-shell-actions-open .idd-shell-actions-backdrop {
    opacity: 1;
    visibility: visible;
}

.idd-shell-actions-panel {
    position: fixed;
    top: var(--app-adminbar-h, 0);
    right: 0;
    bottom: 0;
    width: min(420px, 100vw);
    max-width: 100vw;
    /* Au-dessus du backdrop et de tous les sticky de la page */
    z-index: var(--app-z-panel, 9500);
    background: var(--app-surface, #fff);
    border-left: 1px solid var(--app-line, #E2D9CC);
    box-shadow: -24px 0 60px -16px rgba(29,24,25,0.18);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .35s cubic-bezier(.2,.8,.2,1), visibility .35s ease;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
body.is-shell-actions-open .idd-shell-actions-panel {
    transform: translateX(0);
    visibility: visible;
}
@media (max-width: 640px) {
    .idd-shell-actions-panel {
        width: 100vw;
        border-left: 0;
    }
}

.idd-shell-actions-panel__head {
    position: relative;
    padding: 18px 56px 18px 20px;
    border-bottom: 1px solid var(--app-line, #E2D9CC);
    flex-shrink: 0;
}
/* Drawer latéral : pas de poignée drag-down */
.idd-shell-actions-panel__handle { display: none; }
.idd-shell-actions-panel__head-content {
    text-align: left;
    padding: 0;
}
.idd-shell-actions-panel__eyebrow {
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--app-brand, #B5637A);
    margin-bottom: 4px;
}
.idd-shell-actions-panel__title {
    font-family: var(--font-serif, 'Cormorant Garamond', serif);
    font-size: 22px;
    font-weight: 700;
    color: var(--app-ink, #2D3748);
    margin: 0;
    line-height: 1.15;
    letter-spacing: -.01em;
}
.idd-shell-actions-panel__close {
    position: absolute;
    top: 14px;
    right: 14px;
    appearance: none;
    background: var(--app-surface-2, #F4EFE6);
    border: 0;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--app-ink, #2D3748);
    transition: background-color .15s ease;
}
.idd-shell-actions-panel__close:hover { background: var(--app-line, #E2D9CC); }
.idd-shell-actions-panel__close svg { width: 16px; height: 16px; }

.idd-shell-actions-panel__body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    -webkit-overflow-scrolling: touch;
}

/* Sections internes au panel */
.idd-shell-actions__section {
    margin-bottom: 22px;
}
.idd-shell-actions__section:last-child { margin-bottom: 0; }
.idd-shell-actions__section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--app-muted, #718096);
    margin: 0 0 10px 4px;
}

/* Grille tiles 2 colonnes (design "app shortcuts") */
.idd-shell-actions__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.idd-shell-actions__tile {
    appearance: none;
    background: var(--app-surface, #fff);
    border: 1px solid var(--app-line, #E2D9CC);
    border-radius: 14px;
    padding: 16px 14px;
    cursor: pointer;
    text-align: left;
    color: var(--app-ink, #2D3748);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
    min-height: 100px;
    position: relative;
    overflow: hidden;
}
.idd-shell-actions__tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -6px rgba(0,0,0,0.10);
    border-color: var(--app-brand-border, rgba(181,99,122,0.40));
    text-decoration: none;
}
.idd-shell-actions__tile:active { transform: translateY(0); }
.idd-shell-actions__tile::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 0%, transparent 60%, var(--app-brand-soft, rgba(181,99,122,0.10)) 100%);
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
}
.idd-shell-actions__tile:hover::after { opacity: 1; }

.idd-shell-actions__tile-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--app-brand-soft, rgba(181,99,122,0.14));
    color: var(--app-brand-dark, #9A4F65);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.idd-shell-actions__tile-icon svg { width: 20px; height: 20px; stroke-width: 1.7; }

.idd-shell-actions__tile-label {
    font-family: var(--font-serif, 'Cormorant Garamond', serif);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--app-ink, #2D3748);
    letter-spacing: -.01em;
}
.idd-shell-actions__tile-hint {
    font-size: 12px;
    color: var(--app-muted, #718096);
    line-height: 1.35;
    margin: 0;
}

/* Tile gold (mise en avant — ex: Tous les outils) */
.idd-shell-actions__tile--gold {
    background: linear-gradient(135deg, var(--app-brand, #B5637A), var(--app-brand-dark, #9A4F65));
    color: #fff;
    border-color: var(--app-brand-dark, #9A4F65);
    grid-column: span 2;
    flex-direction: row;
    align-items: center;
}
.idd-shell-actions__tile--gold .idd-shell-actions__tile-icon {
    background: rgba(255,255,255,0.20);
    color: #fff;
}
.idd-shell-actions__tile--gold .idd-shell-actions__tile-label { color: #fff; }
.idd-shell-actions__tile--gold .idd-shell-actions__tile-hint { color: rgba(255,255,255,0.85); }
.idd-shell-actions__tile--gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -6px rgba(154,79,101,0.40);
}

/* Footer du panel — bouton "Tous mes outils" */
.idd-shell-actions-panel__footer {
    padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--app-line, #E2D9CC);
    background: var(--app-surface, #fff);
    flex-shrink: 0;
}
.idd-shell-actions-panel__all-tools {
    appearance: none;
    width: 100%;
    background: linear-gradient(135deg, var(--app-brand, #B5637A), var(--app-brand-dark, #9A4F65));
    color: #fff;
    border: 0;
    height: 52px;
    padding: 0 18px;
    border-radius: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    transition: transform .12s ease, box-shadow .15s ease;
    box-shadow: 0 6px 16px -6px rgba(181,99,122,0.50);
}
.idd-shell-actions-panel__all-tools:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -6px rgba(181,99,122,0.65);
}
.idd-shell-actions-panel__all-tools:active { transform: translateY(0); }
.idd-shell-actions-panel__all-tools svg { width: 22px; height: 22px; stroke-width: 2; flex-shrink: 0; }
.idd-shell-actions-panel__all-tools span { flex: 1; text-align: left; }
.idd-shell-actions-panel__all-tools-arrow { margin-left: auto; }

/* Desktop : layout 3 colonnes possibles, marges plus généreuses */
@media (min-width: 768px) {
    .idd-shell-actions-panel {
        max-width: 600px;
        left: 50%;
        transform: translate(-50%, 100%);
        border-radius: 24px;
        bottom: 20px;
    }
    body.is-shell-actions-open .idd-shell-actions-panel {
        transform: translate(-50%, 0);
    }
    .idd-shell-actions__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Print */
@media print {
    .idd-shell-bar,
    .idd-shell-actions-backdrop,
    .idd-shell-actions-panel { display: none !important; }
}

/* ──────────────────────────────────────────────────────────
   Print
   ────────────────────────────────────────────────────────── */
@media print {
    .idd-tool-toolbar,
    .idd-tool-panel,
    .idd-tool-panel-backdrop { display: none !important; }
}