/* ==========================================================
   WeddingPart — Harmonisation visuelle des outils SaaS
   --------------------------------------------------------
   Référence visuelle : /plan-interactif/ (idd-plan-salle).
   Objectif : aligner tous les outils sur le même design
   system (radius, padding, boutons, sidebars, toolbars,
   typo) SANS toucher au code des plugins ni au JS.

   Méthode : on override les variables CSS internes de chaque
   outil au niveau de son root selector, et on retouche les
   sélecteurs visuels (boutons, sections, inputs, sidebars)
   pour matcher le plan-interactif.

   Préfixes ciblés :
   - .idd-rp / .idd-mb / .idd-pl / .idd-mt / .idd-pr / .idd-lieu / .idd-tdb (préfixes courts)
   - #idd-budget-mariage / #wpz-gestion-invites (id-based)
   - .wpz-pt-* / .wpm-* (plan-de-table, site-mariage)
   ========================================================== */

/* ==========================================================
   1. OVERRIDE DES TOKENS RADIUS/SHADOW PAR OUTIL
   --------------------------------------------------------
   Les outils définissent leurs propres var(--xx-radius). On
   les force tous à --radius-md (16px) du thème, comme le
   plan-interactif. Pareil pour radius-sm.
   ========================================================== */

body.idd-tools-body .idd-rp,
body.idd-tools-body .idd-mb,
body.idd-tools-body .idd-pl,
body.idd-tools-body .idd-mt,
body.idd-tools-body .idd-pr,
body.idd-tools-body .idd-lieu,
body.idd-tools-body .idd-tdb,
body.idd-tools-body #idd-budget-mariage,
body.idd-tools-body #wpz-gestion-invites {
    --rp-radius:    var(--radius-md, 16px);
    --rp-radius-sm: var(--radius-sm, 10px);
    --mb-radius:    var(--radius-md, 16px);
    --mb-radius-sm: var(--radius-sm, 10px);
    --pl-radius:    var(--radius-md, 16px);
    --pl-radius-sm: var(--radius-sm, 10px);
    --mt-radius:    var(--radius-md, 16px);
    --mt-radius-sm: var(--radius-sm, 10px);
    --pr-radius:    var(--radius-md, 16px);
    --pr-radius-sm: var(--radius-sm, 10px);
    --li-radius:    var(--radius-md, 16px);
    --li-radius-sm: var(--radius-sm, 10px);
    --tdb-radius:    var(--radius-md, 16px);
    --tdb-radius-sm: var(--radius-sm, 10px);
    --iddbm-radius:    var(--radius-md, 16px);
    --iddbm-radius-sm: var(--radius-sm, 10px);
    --wpli-radius-md: var(--radius-md, 16px);
    --wpli-radius-sm: var(--radius-sm, 10px);
    --wpli-radius-lg: var(--radius-md, 16px);
    --wpli-radius-xl: var(--radius-md, 16px);

    --rp-shadow:    var(--shadow-md);
    --rp-shadow-sm: var(--shadow-sm);
    --mb-shadow:    var(--shadow-md);
    --mb-shadow-sm: var(--shadow-sm);
    --pl-shadow:    var(--shadow-md);
    --pl-shadow-sm: var(--shadow-sm);
    --mt-shadow:    var(--shadow-md);
    --mt-shadow-sm: var(--shadow-sm);
    --pr-shadow:    var(--shadow-md);
    --pr-shadow-sm: var(--shadow-sm);
    --li-shadow:    var(--shadow-md);
    --li-shadow-sm: var(--shadow-sm);
    --tdb-shadow:    var(--shadow-md);
    --tdb-shadow-sm: var(--shadow-sm);
}

/* ==========================================================
   2. WRAPPER ROOT — espace cohérent dans le shell
   --------------------------------------------------------
   Les outils définissent leur propre max-width (1100-1200px)
   et margin auto. Dans le shell SaaS, le workspace gère déjà
   ça. On allège juste les marges verticales pour les coller
   à la toolbar.
   ========================================================== */

body.idd-tools-body .idd-rp,
body.idd-tools-body .idd-mb,
body.idd-tools-body .idd-pl,
body.idd-tools-body .idd-mt,
body.idd-tools-body .idd-pr,
body.idd-tools-body .idd-lieu,
body.idd-tools-body .idd-tdb {
    margin-top: var(--space-5);
    margin-bottom: var(--space-10);
}

/* ==========================================================
   3. TOPBAR — eyebrow + titre serif + actions
   --------------------------------------------------------
   Match le pattern du plan-interactif :
   eyebrow 10px 800 .14em uppercase brand
   titre serif clamp(26px,4.5vw,38px) 700
   ========================================================== */

body.idd-tools-body .idd-rp__topbar,
body.idd-tools-body .idd-mb__topbar,
body.idd-tools-body .idd-pl__topbar,
body.idd-tools-body .idd-mt__topbar,
body.idd-tools-body .idd-pr__topbar,
body.idd-tools-body .idd-lieu__topbar,
body.idd-tools-body .idd-tdb__topbar {
    margin-bottom: var(--space-6);
    gap: var(--space-5);
}

body.idd-tools-body .idd-rp__eyebrow,
body.idd-tools-body .idd-mb__eyebrow,
body.idd-tools-body .idd-pl__eyebrow,
body.idd-tools-body .idd-mt__eyebrow,
body.idd-tools-body .idd-pr__eyebrow,
body.idd-tools-body .idd-lieu__eyebrow,
body.idd-tools-body .idd-tdb__eyebrow,
body.idd-tools-body .idd-budget__eyebrow {
    display: inline-block;
    font-size: 10px; /* TODO: tokenize — sous text-xs */
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--wp-brand);
    margin: 0 0 var(--space-2);
}

body.idd-tools-body .idd-rp__title-main,
body.idd-tools-body .idd-mb__title-main,
body.idd-tools-body .idd-pl__title-main,
body.idd-tools-body .idd-mt__title-main,
body.idd-tools-body .idd-pr__title-main,
body.idd-tools-body .idd-lieu__title-main,
body.idd-tools-body .idd-tdb__title-main,
body.idd-tools-body .idd-budget__title {
    font-family: var(--font-serif);
    font-size: clamp(26px, 4.5vw, 38px); /* TODO: tokenize — clamp typo title */
    font-weight: 700;
    color: var(--wp-ink);
    line-height: 1.15;
    letter-spacing: -.01em;
    margin: 0 0 6px; /* TODO: tokenize — entre space-1 et space-2 */
}

body.idd-tools-body .idd-rp__sub,
body.idd-tools-body .idd-mb__sub,
body.idd-tools-body .idd-pl__sub,
body.idd-tools-body .idd-mt__sub,
body.idd-tools-body .idd-pr__sub,
body.idd-tools-body .idd-lieu__sub,
body.idd-tools-body .idd-tdb__sub,
body.idd-tools-body .idd-budget__lead {
    color: var(--wp-muted);
    font-size: 15px; /* TODO: tokenize — entre text-sm et text-base */
    line-height: 1.5;
    margin: 0;
    max-width: 640px; /* TODO: tokenize — max-width lead */
}

/* ==========================================================
   4. SECTIONS / CARTES — bg, border, radius, padding
   --------------------------------------------------------
   Match plan-interactif : surface, border 1px line,
   radius-md, ombre douce, padding 20-24px.
   ========================================================== */

body.idd-tools-body .idd-rp__section,
body.idd-tools-body .idd-mb__section,
body.idd-tools-body .idd-pl__section,
body.idd-tools-body .idd-mt__section,
body.idd-tools-body .idd-pr__section,
body.idd-tools-body .idd-lieu__section,
body.idd-tools-body .idd-tdb__section,
body.idd-tools-body .idd-rp__countdown,
body.idd-tools-body .idd-rp__panel,
body.idd-tools-body .idd-mb__panel,
body.idd-tools-body .idd-pl__panel,
body.idd-tools-body .idd-mt__panel,
body.idd-tools-body .idd-pr__panel,
body.idd-tools-body .idd-lieu__panel,
body.idd-tools-body .idd-tdb__panel {
    background: var(--wp-surface);
    border: 1px solid var(--wp-line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 22px 24px; /* TODO: tokenize — entre space-5 et space-6 */
    margin-bottom: var(--space-5);
}

body.idd-tools-body .idd-mb__section--canvas {
    padding: 22px 20px; /* TODO: tokenize — entre space-5 et space-6 */
}

@media (max-width: 640px) {
    body.idd-tools-body .idd-rp__section,
    body.idd-tools-body .idd-mb__section,
    body.idd-tools-body .idd-pl__section,
    body.idd-tools-body .idd-mt__section,
    body.idd-tools-body .idd-pr__section,
    body.idd-tools-body .idd-lieu__section,
    body.idd-tools-body .idd-tdb__section,
    body.idd-tools-body .idd-rp__countdown {
        padding: var(--space-4) 18px; /* TODO: tokenize — 18px hors scale */
        border-radius: var(--radius-md);
    }
}

/* Section heads (titre + sous-titre + actions) */
body.idd-tools-body .idd-rp__section-head,
body.idd-tools-body .idd-mb__section-head,
body.idd-tools-body .idd-pl__section-head,
body.idd-tools-body .idd-mt__section-head,
body.idd-tools-body .idd-pr__section-head,
body.idd-tools-body .idd-lieu__section-head,
body.idd-tools-body .idd-tdb__section-head {
    margin-bottom: var(--space-4);
    gap: 14px; /* TODO: tokenize — 14px hors scale */
}

body.idd-tools-body .idd-rp__section-title,
body.idd-tools-body .idd-mb__section-title,
body.idd-tools-body .idd-pl__section-title,
body.idd-tools-body .idd-mt__section-title,
body.idd-tools-body .idd-pr__section-title,
body.idd-tools-body .idd-lieu__section-title,
body.idd-tools-body .idd-tdb__section-title {
    font-family: var(--font-serif);
    font-size: 22px; /* TODO: tokenize — entre text-xl et text-2xl */
    font-weight: 700;
    color: var(--wp-ink);
    letter-spacing: -.01em;
    margin: 0 0 4px;
}

body.idd-tools-body .idd-rp__section-sub,
body.idd-tools-body .idd-mb__section-sub,
body.idd-tools-body .idd-pl__section-sub,
body.idd-tools-body .idd-mt__section-sub,
body.idd-tools-body .idd-pr__section-sub,
body.idd-tools-body .idd-lieu__section-sub,
body.idd-tools-body .idd-tdb__section-sub {
    color: var(--wp-muted);
    font-size: var(--text-sm);
    line-height: 1.5;
    margin: 0;
}

/* ==========================================================
   5. BOUTONS — match plan-interactif
   --------------------------------------------------------
   Hauteur 44px, padding 0 18px, radius full (pill),
   font 13px 600, brand bg pour primary.
   ========================================================== */

body.idd-tools-body .idd-rp__btn,
body.idd-tools-body .idd-mb__btn,
body.idd-tools-body .idd-pl__btn,
body.idd-tools-body .idd-mt__btn,
body.idd-tools-body .idd-pr__btn,
body.idd-tools-body .idd-lieu__btn,
body.idd-tools-body .idd-tdb__btn,
body.idd-tools-body .idd-budget__btn,
body.idd-tools-body .idd-rp__icon-btn,
body.idd-tools-body .idd-mb__icon-btn,
body.idd-tools-body .idd-pl__icon-btn,
body.idd-tools-body .idd-mt__icon-btn,
body.idd-tools-body .idd-pr__icon-btn,
body.idd-tools-body .idd-lieu__icon-btn,
body.idd-tools-body .idd-tdb__icon-btn {
    height: var(--tap-target);
    padding: 0 18px; /* TODO: tokenize — 18px hors scale */
    border-radius: var(--radius-full);
    border: 1px solid var(--wp-line-strong);
    background: var(--wp-surface);
    color: var(--wp-ink);
    font-family: inherit;
    font-size: 13px; /* TODO: tokenize — entre text-xs et text-sm */
    font-weight: 600;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease), color var(--duration) var(--ease), transform var(--duration) var(--ease);
    box-shadow: none;
}
body.idd-tools-body .idd-rp__btn:hover,
body.idd-tools-body .idd-mb__btn:hover,
body.idd-tools-body .idd-pl__btn:hover,
body.idd-tools-body .idd-mt__btn:hover,
body.idd-tools-body .idd-pr__btn:hover,
body.idd-tools-body .idd-lieu__btn:hover,
body.idd-tools-body .idd-tdb__btn:hover,
body.idd-tools-body .idd-budget__btn:hover,
body.idd-tools-body .idd-rp__icon-btn:hover,
body.idd-tools-body .idd-mb__icon-btn:hover,
body.idd-tools-body .idd-pl__icon-btn:hover,
body.idd-tools-body .idd-mt__icon-btn:hover,
body.idd-tools-body .idd-pr__icon-btn:hover,
body.idd-tools-body .idd-lieu__icon-btn:hover,
body.idd-tools-body .idd-tdb__icon-btn:hover {
    background: var(--wp-surface-2);
    border-color: var(--wp-brand-border);
    color: var(--wp-ink);
}

/* Boutons primary (brand bg) */
body.idd-tools-body .idd-rp__btn--primary,
body.idd-tools-body .idd-mb__btn--primary,
body.idd-tools-body .idd-pl__btn--primary,
body.idd-tools-body .idd-mt__btn--primary,
body.idd-tools-body .idd-pr__btn--primary,
body.idd-tools-body .idd-lieu__btn--primary,
body.idd-tools-body .idd-tdb__btn--primary,
body.idd-tools-body .idd-budget__btn--primary {
    background: var(--wp-brand);
    color: var(--wp-surface);
    border-color: var(--wp-brand);
    box-shadow: 0 4px 14px -4px rgba(181,99,122,.40); /* TODO: tokenize — ombre brand custom */
}
body.idd-tools-body .idd-rp__btn--primary:hover,
body.idd-tools-body .idd-mb__btn--primary:hover,
body.idd-tools-body .idd-pl__btn--primary:hover,
body.idd-tools-body .idd-mt__btn--primary:hover,
body.idd-tools-body .idd-pr__btn--primary:hover,
body.idd-tools-body .idd-lieu__btn--primary:hover,
body.idd-tools-body .idd-tdb__btn--primary:hover,
body.idd-tools-body .idd-budget__btn--primary:hover {
    background: var(--wp-brand-dark);
    border-color: var(--wp-brand-dark);
    color: var(--wp-surface);
    transform: translateY(-1px);
    box-shadow: 0 8px 22px -4px rgba(181,99,122,.50); /* TODO: tokenize — ombre brand custom */
}

/* Boutons ghost / sm */
body.idd-tools-body .idd-rp__btn--ghost,
body.idd-tools-body .idd-mb__btn--ghost,
body.idd-tools-body .idd-pl__btn--ghost,
body.idd-tools-body .idd-mt__btn--ghost,
body.idd-tools-body .idd-pr__btn--ghost,
body.idd-tools-body .idd-lieu__btn--ghost,
body.idd-tools-body .idd-tdb__btn--ghost,
body.idd-tools-body .idd-budget__btn--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--wp-soft);
}
body.idd-tools-body .idd-rp__btn--ghost:hover,
body.idd-tools-body .idd-mb__btn--ghost:hover,
body.idd-tools-body .idd-pl__btn--ghost:hover,
body.idd-tools-body .idd-mt__btn--ghost:hover,
body.idd-tools-body .idd-pr__btn--ghost:hover,
body.idd-tools-body .idd-lieu__btn--ghost:hover,
body.idd-tools-body .idd-tdb__btn--ghost:hover,
body.idd-tools-body .idd-budget__btn--ghost:hover {
    background: var(--wp-surface-2);
    color: var(--wp-ink);
    border-color: transparent;
}

body.idd-tools-body .idd-rp__btn--sm,
body.idd-tools-body .idd-mb__btn--sm,
body.idd-tools-body .idd-pl__btn--sm,
body.idd-tools-body .idd-mt__btn--sm,
body.idd-tools-body .idd-pr__btn--sm,
body.idd-tools-body .idd-lieu__btn--sm,
body.idd-tools-body .idd-tdb__btn--sm {
    height: 36px; /* TODO: tokenize — sous tap-target */
    padding: 0 14px; /* TODO: tokenize — 14px hors scale */
    font-size: var(--text-xs);
}

/* Bouton icône seule (icon-only) — carré arrondi */
body.idd-tools-body .idd-rp__icon-only,
body.idd-tools-body .idd-mb__icon-only,
body.idd-tools-body .idd-pl__icon-only,
body.idd-tools-body .idd-mt__icon-only,
body.idd-tools-body .idd-pr__icon-only,
body.idd-tools-body .idd-lieu__icon-only,
body.idd-tools-body .idd-tdb__icon-only {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    color: var(--wp-muted);
    transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
body.idd-tools-body .idd-rp__icon-only:hover,
body.idd-tools-body .idd-mb__icon-only:hover,
body.idd-tools-body .idd-pl__icon-only:hover,
body.idd-tools-body .idd-mt__icon-only:hover,
body.idd-tools-body .idd-pr__icon-only:hover,
body.idd-tools-body .idd-lieu__icon-only:hover,
body.idd-tools-body .idd-tdb__icon-only:hover {
    background: var(--wp-surface-2);
    color: var(--wp-brand);
}

/* ==========================================================
   6. INPUTS / TEXTAREA / SELECT — match plan-interactif
   --------------------------------------------------------
   padding 10px 14px, border 1px line-strong, radius-sm,
   focus = brand 3px ring
   ========================================================== */

body.idd-tools-body .idd-rp__field input,
body.idd-tools-body .idd-mb__field input[type="text"],
body.idd-tools-body .idd-mb__field input[type="email"],
body.idd-tools-body .idd-mb__field input[type="date"],
body.idd-tools-body .idd-mb__field input[type="number"],
body.idd-tools-body .idd-mb__field textarea,
body.idd-tools-body .idd-pl__field input,
body.idd-tools-body .idd-pl__field textarea,
body.idd-tools-body .idd-mt__field input,
body.idd-tools-body .idd-mt__field textarea,
body.idd-tools-body .idd-pr__field input,
body.idd-tools-body .idd-pr__field textarea,
body.idd-tools-body .idd-lieu__field input,
body.idd-tools-body .idd-lieu__field textarea,
body.idd-tools-body .idd-tdb__field input,
body.idd-tools-body .idd-tdb__field textarea,
body.idd-tools-body .idd-budget__input {
    padding: 10px 14px; /* TODO: tokenize — padding input */
    border: 1px solid var(--wp-line-strong);
    border-radius: var(--radius-sm);
    background: var(--wp-surface);
    color: var(--wp-ink);
    font-family: inherit;
    font-size: var(--text-sm);
    line-height: 1.4;
    transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), background var(--duration) var(--ease);
}
body.idd-tools-body .idd-rp__field input:focus,
body.idd-tools-body .idd-mb__field input:focus,
body.idd-tools-body .idd-mb__field textarea:focus,
body.idd-tools-body .idd-pl__field input:focus,
body.idd-tools-body .idd-pl__field textarea:focus,
body.idd-tools-body .idd-mt__field input:focus,
body.idd-tools-body .idd-mt__field textarea:focus,
body.idd-tools-body .idd-pr__field input:focus,
body.idd-tools-body .idd-pr__field textarea:focus,
body.idd-tools-body .idd-lieu__field input:focus,
body.idd-tools-body .idd-lieu__field textarea:focus,
body.idd-tools-body .idd-tdb__field input:focus,
body.idd-tools-body .idd-tdb__field textarea:focus,
body.idd-tools-body .idd-budget__input:focus {
    outline: 0;
    border-color: var(--wp-brand);
    box-shadow: 0 0 0 3px var(--wp-brand-soft);
    background: var(--wp-surface);
}

/* iOS Safari : font-size >= 16px sur inputs en mobile pour eviter le zoom auto au focus. */
@media (max-width: 768px) {
    body.idd-tools-body .idd-rp__field input,
    body.idd-tools-body .idd-mb__field input,
    body.idd-tools-body .idd-mb__field textarea,
    body.idd-tools-body .idd-pl__field input,
    body.idd-tools-body .idd-pl__field textarea,
    body.idd-tools-body .idd-mt__field input,
    body.idd-tools-body .idd-mt__field textarea,
    body.idd-tools-body .idd-pr__field input,
    body.idd-tools-body .idd-pr__field textarea,
    body.idd-tools-body .idd-lieu__field input,
    body.idd-tools-body .idd-lieu__field textarea,
    body.idd-tools-body .idd-tdb__field input,
    body.idd-tools-body .idd-tdb__field textarea,
    body.idd-tools-body .idd-budget__input {
        font-size: 16px;
        min-height: var(--tap-target, 44px);
    }
}

/* Labels de champ */
body.idd-tools-body .idd-rp__field > span,
body.idd-tools-body .idd-mb__field > span,
body.idd-tools-body .idd-mb__field-label,
body.idd-tools-body .idd-pl__field > span,
body.idd-tools-body .idd-mt__field > span,
body.idd-tools-body .idd-pr__field > span,
body.idd-tools-body .idd-lieu__field > span,
body.idd-tools-body .idd-tdb__field > span,
body.idd-tools-body .idd-budget__field-label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--wp-soft);
    letter-spacing: .02em;
    margin-bottom: 2px;
}

/* ==========================================================
   7. TABS — onglets cohérents
   --------------------------------------------------------
   Style proche plan-interactif : pill ghost + actif brand-soft.
   ========================================================== */

body.idd-tools-body .idd-rp__tabs,
body.idd-tools-body .idd-mb__tabs,
body.idd-tools-body .idd-pl__tabs,
body.idd-tools-body .idd-mt__tabs,
body.idd-tools-body .idd-pr__tabs,
body.idd-tools-body .idd-lieu__tabs,
body.idd-tools-body .idd-tdb__tabs {
    display: flex;
    gap: 6px; /* TODO: tokenize — entre space-1 et space-2 */
    border-bottom: 1px solid var(--wp-line);
    margin-bottom: 18px; /* TODO: tokenize — 18px hors scale */
    padding-bottom: 0;
    flex-wrap: wrap;
}

body.idd-tools-body .idd-rp__tab,
body.idd-tools-body .idd-mb__tab,
body.idd-tools-body .idd-pl__tab,
body.idd-tools-body .idd-mt__tab,
body.idd-tools-body .idd-pr__tab,
body.idd-tools-body .idd-lieu__tab,
body.idd-tools-body .idd-tdb__tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 10px 18px; /* TODO: tokenize — padding tab */
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 12px 12px 0 0; /* TODO: tokenize — entre radius-sm et radius-md */
    background: transparent;
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--wp-muted);
    cursor: pointer;
    transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease), border-color var(--duration) var(--ease);
    margin-bottom: -1px;
}
body.idd-tools-body .idd-rp__tab:hover,
body.idd-tools-body .idd-mb__tab:hover,
body.idd-tools-body .idd-pl__tab:hover,
body.idd-tools-body .idd-mt__tab:hover,
body.idd-tools-body .idd-pr__tab:hover,
body.idd-tools-body .idd-lieu__tab:hover,
body.idd-tools-body .idd-tdb__tab:hover {
    background: var(--wp-surface-2);
    color: var(--wp-ink);
}
body.idd-tools-body .idd-rp__tab.is-active,
body.idd-tools-body .idd-mb__tab.is-active,
body.idd-tools-body .idd-pl__tab.is-active,
body.idd-tools-body .idd-mt__tab.is-active,
body.idd-tools-body .idd-pr__tab.is-active,
body.idd-tools-body .idd-lieu__tab.is-active,
body.idd-tools-body .idd-tdb__tab.is-active {
    background: var(--wp-surface);
    border-color: var(--wp-line);
    color: var(--wp-brand-dark);
    font-weight: 600;
    box-shadow: 0 -4px 12px rgba(29,24,25,.04); /* TODO: tokenize — ombre inversée tab */
}

body.idd-tools-body .idd-rp__tab-count,
body.idd-tools-body .idd-mb__tab-count,
body.idd-tools-body .idd-pl__tab-count,
body.idd-tools-body .idd-mt__tab-count,
body.idd-tools-body .idd-pr__tab-count,
body.idd-tools-body .idd-lieu__tab-count,
body.idd-tools-body .idd-tdb__tab-count {
    font-size: 11px; /* TODO: tokenize — sous text-xs */
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    background: var(--wp-surface-3);
    color: var(--wp-soft);
    font-weight: 600;
}
body.idd-tools-body .idd-rp__tab.is-active .idd-rp__tab-count,
body.idd-tools-body .idd-mb__tab.is-active .idd-mb__tab-count,
body.idd-tools-body .idd-pl__tab.is-active .idd-pl__tab-count,
body.idd-tools-body .idd-mt__tab.is-active .idd-mt__tab-count,
body.idd-tools-body .idd-pr__tab.is-active .idd-pr__tab-count,
body.idd-tools-body .idd-lieu__tab.is-active .idd-lieu__tab-count,
body.idd-tools-body .idd-tdb__tab.is-active .idd-tdb__tab-count {
    background: var(--wp-brand-soft);
    color: var(--wp-brand-dark);
}

/* ==========================================================
   8. CARDS / TILES / ITEMS — match plan-interactif
   --------------------------------------------------------
   Liste de cards à hover (élévation + border brand)
   ========================================================== */

body.idd-tools-body .idd-rp__card,
body.idd-tools-body .idd-mb__card,
body.idd-tools-body .idd-pl__card,
body.idd-tools-body .idd-mt__card,
body.idd-tools-body .idd-pr__card,
body.idd-tools-body .idd-lieu__card,
body.idd-tools-body .idd-tdb__card,
body.idd-tools-body .idd-tdb__tool-card,
body.idd-tools-body .idd-pl__stat-card,
body.idd-tools-body .idd-mt__stat-card,
body.idd-tools-body .idd-pr__stat-card {
    background: var(--wp-surface);
    border: 1px solid var(--wp-line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
body.idd-tools-body .idd-rp__card:hover,
body.idd-tools-body .idd-mb__card:hover,
body.idd-tools-body .idd-pl__card:hover,
body.idd-tools-body .idd-mt__card:hover,
body.idd-tools-body .idd-pr__card:hover,
body.idd-tools-body .idd-lieu__card:hover,
body.idd-tools-body .idd-tdb__card:hover,
body.idd-tools-body .idd-tdb__tool-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px -10px rgba(0,0,0,.15); /* TODO: tokenize — ombre hover */
    border-color: var(--wp-brand-border);
}

/* ==========================================================
   9. SIDEBARS / PANNEAUX LATÉRAUX
   --------------------------------------------------------
   Match plan-interactif (.idd-ps-tools) :
   - Mobile : bottom-sheet
   - Desktop : sticky left/right, 300px, fond surface
   Cible : sidebars internes des outils (liste-invites,
   plan-de-table, site-mariage notamment).
   ========================================================== */

body.idd-tools-body .wpz-pt-sidebar,
body.idd-tools-body .wpz-pt-sidebar--left,
body.idd-tools-body .wpz-pt-sidebar--right,
body.idd-tools-body .wpz-invites-sidebar,
body.idd-tools-body .wpz-invites-form-panel,
body.idd-tools-body .wpz-invites-stats-panel,
body.idd-tools-body .wpz-invites-foyer-panel,
body.idd-tools-body .wpz-invites-import-panel {
    background: var(--wp-surface);
    border: 1px solid var(--wp-line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

/* Headers de sidebars (titre + close) */
body.idd-tools-body .wpz-pt-sidebar__header,
body.idd-tools-body .wpz-invites-form-panel__header,
body.idd-tools-body .wpz-invites-stats-panel__header,
body.idd-tools-body .wpz-invites-foyer-panel__header,
body.idd-tools-body .wpz-invites-import-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px; /* TODO: tokenize — padding header */
    border-bottom: 1px solid var(--wp-line);
    background: transparent;
}

/* ==========================================================
   10. INDICATEUR DE SAUVEGARDE — "Saved at..."
   ========================================================== */

body.idd-tools-body .idd-rp__saved,
body.idd-tools-body .idd-mb__saved,
body.idd-tools-body .idd-pl__saved,
body.idd-tools-body .idd-mt__saved,
body.idd-tools-body .idd-pr__saved,
body.idd-tools-body .idd-lieu__saved,
body.idd-tools-body .idd-tdb__saved,
body.idd-tools-body .idd-budget__saved {
    font-size: var(--text-xs);
    color: var(--wp-muted);
    font-weight: 500;
}

/* ==========================================================
   11. SHELL-BAR "+" SUR DESKTOP — visible et identique
   --------------------------------------------------------
   Le shell-bar v3 est fixed bottom partout. Sur desktop on
   le garde présent : reproductible du mobile. Le bouton "+"
   doré (.idd-shell-bar__plus) reste à droite.
   ========================================================== */

@media (min-width: 1024px) {
    body.idd-tools-body .idd-shell-bar {
        /* Légère adaptation desktop : un peu plus de padding latéral,
           hauteur conservée, bouton "+" toujours visible à droite */
        padding-left: 22px; /* TODO: tokenize — entre space-5 et space-6 */
        padding-right: 22px;
    }
    body.idd-tools-body .idd-shell-bar__title-name {
        font-size: 17px; /* TODO: tokenize — entre text-base et text-lg */
        max-width: 360px;
    }
    body.idd-tools-body .idd-shell-bar__back {
        padding-left: 6px;
        padding-right: var(--space-4);
    }
    body.idd-tools-body .idd-shell-bar__plus {
        width: 50px; /* TODO: tokenize — taille bouton FAB */
        height: 50px;
    }
}

/* ==========================================================
   12. SCROLLBARS FINES PARTOUT
   ========================================================== */

body.idd-tools-body .idd-rp,
body.idd-tools-body .idd-mb,
body.idd-tools-body .idd-pl,
body.idd-tools-body .idd-mt,
body.idd-tools-body .idd-pr,
body.idd-tools-body .idd-lieu,
body.idd-tools-body .idd-tdb,
body.idd-tools-body #idd-budget-mariage {
    scrollbar-width: thin;
    scrollbar-color: var(--wp-brand-border) transparent;
}
body.idd-tools-body .idd-rp ::-webkit-scrollbar,
body.idd-tools-body .idd-mb ::-webkit-scrollbar,
body.idd-tools-body .idd-pl ::-webkit-scrollbar,
body.idd-tools-body .idd-mt ::-webkit-scrollbar,
body.idd-tools-body .idd-pr ::-webkit-scrollbar,
body.idd-tools-body .idd-lieu ::-webkit-scrollbar,
body.idd-tools-body .idd-tdb ::-webkit-scrollbar,
body.idd-tools-body #idd-budget-mariage ::-webkit-scrollbar {
    width: var(--space-2);
    height: var(--space-2);
}
body.idd-tools-body .idd-rp ::-webkit-scrollbar-thumb,
body.idd-tools-body .idd-mb ::-webkit-scrollbar-thumb,
body.idd-tools-body .idd-pl ::-webkit-scrollbar-thumb,
body.idd-tools-body .idd-mt ::-webkit-scrollbar-thumb,
body.idd-tools-body .idd-pr ::-webkit-scrollbar-thumb,
body.idd-tools-body .idd-lieu ::-webkit-scrollbar-thumb,
body.idd-tools-body .idd-tdb ::-webkit-scrollbar-thumb,
body.idd-tools-body #idd-budget-mariage ::-webkit-scrollbar-thumb {
    background: var(--wp-brand-border);
    border-radius: var(--radius-full);
}
body.idd-tools-body .idd-rp ::-webkit-scrollbar-track,
body.idd-tools-body .idd-mb ::-webkit-scrollbar-track,
body.idd-tools-body .idd-pl ::-webkit-scrollbar-track,
body.idd-tools-body .idd-mt ::-webkit-scrollbar-track,
body.idd-tools-body .idd-pr ::-webkit-scrollbar-track,
body.idd-tools-body .idd-lieu ::-webkit-scrollbar-track,
body.idd-tools-body .idd-tdb ::-webkit-scrollbar-track,
body.idd-tools-body #idd-budget-mariage ::-webkit-scrollbar-track {
    background: transparent;
}

/* ==========================================================
   13. CHIPS / BADGES — pill cohérente
   ========================================================== */

body.idd-tools-body .idd-rp__chip,
body.idd-tools-body .idd-mb__chip,
body.idd-tools-body .idd-pl__chip,
body.idd-tools-body .idd-mt__chip,
body.idd-tools-body .idd-pr__chip,
body.idd-tools-body .idd-lieu__chip,
body.idd-tools-body .idd-tdb__chip,
body.idd-tools-body .idd-budget__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px; /* TODO: tokenize — entre space-1 et space-2 */
    padding: 6px 12px; /* TODO: tokenize — padding chip */
    border-radius: var(--radius-full);
    background: var(--wp-surface-2);
    color: var(--wp-soft);
    font-weight: 600;
    font-size: 13px; /* TODO: tokenize — entre text-xs et text-sm */
    border: 1px solid var(--wp-line);
}

/* ==========================================================
   14. PROGRESS BARS
   ========================================================== */

body.idd-tools-body .idd-rp__progress-strip,
body.idd-tools-body .idd-mb__progress-strip,
body.idd-tools-body .idd-pl__progress-strip,
body.idd-tools-body .idd-mt__progress-strip,
body.idd-tools-body .idd-pr__progress-strip,
body.idd-tools-body .idd-lieu__progress-strip,
body.idd-tools-body .idd-tdb__progress-strip {
    height: var(--space-6);
    background: var(--wp-surface-3);
    border-radius: var(--radius-full);
    overflow: hidden;
}
body.idd-tools-body .idd-rp__progress-bar,
body.idd-tools-body .idd-mb__progress-bar,
body.idd-tools-body .idd-pl__progress-bar,
body.idd-tools-body .idd-mt__progress-bar,
body.idd-tools-body .idd-pr__progress-bar,
body.idd-tools-body .idd-lieu__progress-bar,
body.idd-tools-body .idd-tdb__progress-bar {
    background: linear-gradient(90deg, var(--wp-brand-light) 0%, var(--wp-brand) 100%);
    border-radius: 999px;
}

/* ==========================================================
   15. MODALES — match plan-interactif
   ========================================================== */

body.idd-tools-body .idd-rp__modal,
body.idd-tools-body .idd-mb__modal,
body.idd-tools-body .idd-pl__modal,
body.idd-tools-body .idd-mt__modal,
body.idd-tools-body .idd-pr__modal,
body.idd-tools-body .idd-lieu__modal,
body.idd-tools-body .idd-tdb__modal {
    border-radius: var(--radius-md);
    background: var(--wp-surface);
    border: 1px solid var(--wp-line);
    box-shadow: 0 32px 72px rgba(29,24,25,.13);
}

/* ==========================================================
   16. LOGIN REQUIRED — encart d'auth des outils
   ========================================================== */

body.idd-tools-body .idd-rp-login-required,
body.idd-tools-body .idd-mb-login-required,
body.idd-tools-body .idd-pl-login-required,
body.idd-tools-body .idd-mt-login-required,
body.idd-tools-body .idd-pr-login-required,
body.idd-tools-body .idd-lieu-login-required,
body.idd-tools-body .idd-tdb-login-required {
    background: var(--wp-surface);
    border: 1px solid var(--wp-line);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 28px rgba(29,24,25,.09);
    padding: 28px 32px;
    font-family: var(--font-serif);
    color: var(--wp-ink);
}

/* ==========================================================
   17. DENSITÉ — éviter les sections trop éloignées
   ========================================================== */

body.idd-tools-body .idd-rp__section + .idd-rp__section,
body.idd-tools-body .idd-mb__section + .idd-mb__section,
body.idd-tools-body .idd-pl__section + .idd-pl__section,
body.idd-tools-body .idd-mt__section + .idd-mt__section,
body.idd-tools-body .idd-pr__section + .idd-pr__section,
body.idd-tools-body .idd-lieu__section + .idd-lieu__section,
body.idd-tools-body .idd-tdb__section + .idd-tdb__section {
    margin-top: 0;
}

/* ==========================================================
   FIX — Collision de noms : .idd-pr__panel est utilisé à la
   fois comme "carte de section" (cf. règle plus haut) ET
   comme WRAPPER de modal côté plugin idd-prestataires
   (#idd-pr-panel + #idd-pr-share-panel = position:fixed
   inset:0 z-index:1100 qui couvrait toute la page).
   On annule la skin "section" sur ces deux modaux précis.
   ========================================================== */
body.idd-tools-body #idd-pr-panel,
body.idd-tools-body #idd-pr-share-panel {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
}