/* ============================================================
   WEDORIA MOODBOARD — planches d'inspiration
   2026-08 : la planche est une mosaïque — les images gardent leur
   format d'origine (colonnes CSS), le chrome disparaît (actions au
   survol), l'embed Pinterest n'est pas enfermé dans une deuxième
   carte : il EST la carte.
   2026-10 : direction « Rail » — chapitre du dossier événement (en-tête
   commun + .wd-rp-head), tuiles et cartes blanches soulevées (RELIEF de
   theme.css), univers et retours du couple dans une colonne de cartes,
   icônes Material Symbols, l'or chaud en petites touches seulement,
   plus de capitales espacées.
   Scope : .wd-mood (page planner ET portail couple).
   ============================================================ */

/* ── 0. Page de la planche : mosaïque + colonne de cartes ───── */
.wd-mb {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 28px;
    align-items: start;
    margin-top: 22px;
}
.wd-mb-board { min-width: 0; }
.wd-mb-side {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 88px;
}
@media (max-width: 1199.98px) {
    .wd-mb { grid-template-columns: minmax(0, 1fr) 264px; gap: 24px; }
}
/* Sous lg, les cartes passent sous la planche, côte à côte tant que
   la largeur le permet */
@media (max-width: 991.98px) {
    .wd-mb { grid-template-columns: 1fr; }
    .wd-mb-side {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }
}
@media (max-width: 575.98px) {
    .wd-mb { margin-top: 16px; gap: 20px; }
    .wd-mb-side { grid-template-columns: 1fr; gap: 16px; }
}

/* ── 1. La planche : mosaïque en colonnes ──────────────────── */
/* Le widget Pinterest ne descend pas sous ~236 px de large : le nombre
   de colonnes est calibré pour qu'une colonne reste plus large que ça,
   sinon l'embed déborde de sa tuile. */
.wd-mood-board {
    column-count: 4;
    column-gap: 20px;
    margin: 0;
}
.wd-mood-board--rail { column-count: 3; } /* colonne de cartes à côté : moins de place */

@media (max-width: 1399.98px) { .wd-mood-board { column-count: 3; } }
@media (max-width: 1199.98px) { .wd-mood-board--rail { column-count: 2; } }
/* Sous lg, les cartes passent dessous : la planche récupère toute la largeur */
@media (max-width: 991.98px) {
    .wd-mood-board,
    .wd-mood-board--rail { column-count: 3; }
}
@media (max-width: 899.98px) {
    .wd-mood-board,
    .wd-mood-board--rail { column-count: 2; }
}
@media (max-width: 575.98px) {
    .wd-mood-board,
    .wd-mood-board--rail { column-gap: 12px; }
    /* Deux colonnes = trop étroit pour le widget : les pins prennent
       toute la largeur, les photos restent côte à côte */
    .wd-mtile--embed { column-span: all; }
}

/* ── 2. La tuile : un tirage posé sur le blanc ─────────────── */
.wd-mtile {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    display: block;
    margin: 0 0 20px;
    border-radius: 16px;
    overflow: hidden;
    background: var(--wd-card-bg, #fff);
    border: 1px solid var(--wd-card-border, #ECE7DF);
    box-shadow: var(--wd-card-shadow);
    scroll-margin-top: 96px;
    animation: wd-mtile-in 450ms var(--wd-ease) backwards;
    transition: box-shadow 300ms var(--wd-ease), transform 300ms var(--wd-ease);
}
.wd-mtile:hover {
    transform: translateY(-2px);
    box-shadow: 0 1px 2px rgba(27, 24, 22, 0.06), 0 24px 40px -20px rgba(27, 24, 22, 0.34);
}
/* Arrivée depuis un retour du couple (#mi-…) : la tuile se signale */
.wd-mtile:target { box-shadow: 0 0 0 2px var(--wd-jaune), var(--wd-card-shadow); }
@media (max-width: 767.98px) { .wd-mtile { margin-bottom: 12px; border-radius: 14px; } }

/* Cascade d'entrée, sur les premières tuiles seulement */
.wd-mood-board > .wd-mtile:nth-child(2) { animation-delay: 40ms; }
.wd-mood-board > .wd-mtile:nth-child(3) { animation-delay: 80ms; }
.wd-mood-board > .wd-mtile:nth-child(4) { animation-delay: 120ms; }
.wd-mood-board > .wd-mtile:nth-child(5) { animation-delay: 160ms; }
.wd-mood-board > .wd-mtile:nth-child(6) { animation-delay: 200ms; }
.wd-mood-board > .wd-mtile:nth-child(n+7) { animation-delay: 240ms; }
@keyframes wd-mtile-in {
    from { opacity: 0; transform: translateY(10px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
html[data-turbo-preview] .wd-mtile,
html.wd-no-page-enter .wd-mtile,
html[data-turbo-preview] .wd-mood-card,
html.wd-no-page-enter .wd-mood-card { animation: none; }

.wd-mtile-media {
    position: relative;
    display: block;
    line-height: 0;
    overflow: hidden;
    background: var(--wd-papier);
}
.wd-mtile-img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 700ms var(--wd-ease);
}
.wd-mtile:hover .wd-mtile-img { transform: scale(1.03); }

/* ── 3. Embed Pinterest : le widget apporte sa propre carte ──
   pinit.js construit le pin DANS notre page (spans PIN_*, largeur
   fluide) : il vient avec son fond blanc, ses coins arrondis et son
   bouton « Enregistrer ». On ne l'habille donc PAS d'une deuxième
   carte — la tuile s'efface et laisse le widget être la carte. Le
   contrôleur `pinterest-embed` se contente de le révéler une fois
   construit, ou de basculer sur le lien source s'il ne vient pas. */
.wd-mtile--embed {
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
}
.wd-mtile--embed:hover { box-shadow: none; transform: none; }
/* Le widget gère sa propre typo et son ombre : on lève le carcan
   (line-height: 0 / overflow: hidden) hérité des tuiles image */
.wd-mtile--embed .wd-mtile-media {
    overflow: visible;
    line-height: normal;
    background: transparent;
}
.wd-mtile-embed {
    position: relative;
    min-height: 190px;
}
/* Le widget n'est JAMAIS masqué en attendant notre JS : dès que pinit
   le construit, il s'affiche. Le voile d'attente est simplement DERRIÈRE
   lui (le widget a son propre fond blanc, il le recouvre). Sans ça, un
   pinit.js lent laissait la tuile vide jusqu'au rechargement de la page. */
.wd-mtile-embed-inner {
    display: block;
    position: relative;
    z-index: 1;
}
.wd-mtile-embed[data-fitted] { min-height: 0; }
/* Attente du rendu de l'embed : voile qui respire, pas un trou blanc */
.wd-mtile-embed:not([data-fitted])::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 16px;
    background: linear-gradient(100deg, var(--wd-papier) 30%, #FBF9F6 50%, var(--wd-papier) 70%);
    background-size: 300% 100%;
    animation: wd-mshimmer 1.5s ease-in-out infinite;
}
@keyframes wd-mshimmer {
    from { background-position: 130% 0; }
    to   { background-position: -30% 0; }
}
/* Embed jamais arrivé (script bloqué, pin supprimé) : repli lisible.
   Réversible — si le widget finit par se construire, le contrôleur
   retire data-failed et le repli disparaît. */
.wd-mtile-embed[data-failed]::after { display: none; }
.wd-mtile-embed[data-failed] { min-height: 0; }
/* Sélecteur descendant obligatoire : .wd-mtile-link, déclaré plus bas,
   remettrait display:flex à spécificité égale et le repli s'afficherait
   par-dessus l'embed rendu */
.wd-mtile-embed .wd-mtile-embed-fallback { display: none; }
.wd-mtile-embed[data-failed] .wd-mtile-embed-fallback { display: flex; }

/* Repli sans image : carte lien vers la source */
.wd-mtile-link {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 22px 18px;
    background: var(--wd-card-bg, #fff);
    border: 1px solid var(--wd-card-border, #ECE7DF);
    border-radius: 16px;
    box-shadow: var(--wd-card-shadow);
    color: var(--wd-onyx);
    text-decoration: none;
    line-height: 1.35;
}
.wd-mtile-link i.wd-mtile-link-ico {
    font-size: 1.4rem;
    color: #E60023;
}
.wd-mtile-link strong { font-size: 0.9rem; font-weight: 600; }
.wd-mtile-link small { font-size: 0.78rem; color: var(--ep-text-secondary); word-break: break-all; }

/* ── 4. Actions : petites pastilles blanches, au survol ────── */
.wd-mtile-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    display: flex;
    gap: 6px;
}
.wd-mtile-actions form { display: contents; }
.wd-mtile-act {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 10px -3px rgba(27, 24, 22, 0.32);
    color: var(--wd-onyx);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 200ms var(--wd-ease), transform 220ms var(--wd-ease),
                background 160ms var(--wd-ease), color 160ms var(--wd-ease);
}
.wd-mtile-act .ms { font-size: 18px; }
.wd-mtile-actions > :nth-child(2),
.wd-mtile-actions > :nth-child(2) .wd-mtile-act { transition-delay: 30ms; }
.wd-mtile-actions > :nth-child(3),
.wd-mtile-actions > :nth-child(3) .wd-mtile-act { transition-delay: 60ms; }
.wd-mtile:hover .wd-mtile-act,
.wd-mtile:focus-within .wd-mtile-act {
    opacity: 1;
    transform: translateY(0);
}
.wd-mtile-act:hover { background: #fff; color: var(--wd-onyx); transform: translateY(0) scale(1.06); }
.wd-mtile-act:active { transform: scale(0.92); }
.wd-mtile-act-danger:hover { background: var(--wd-st-danger-bg); color: var(--wd-st-danger); }

/* ── 5. Retours du couple sur l'image : pastilles ↔ son mot au survol ── */
.wd-mtile-chips {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    line-height: 1;
    transition: opacity 220ms var(--wd-ease);
}
.wd-mtile-chip {
    height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 10px -4px rgba(27, 24, 22, 0.34);
    color: var(--wd-onyx);
    font-size: 0.74rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
}
.wd-mtile-chip i { font-size: 0.74rem; }
.wd-mtile-chip .ms { font-size: 15px; color: var(--ep-text-secondary); }
.wd-mtile-chip.is-love i { color: var(--wd-jaune); }
.wd-mtile-chip.is-review i { color: var(--wd-st-warn); }

/* Voile du mot du couple : n'apparaît qu'au survol, laisse l'image parler */
.wd-mtile-veil {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: 2.4rem 0.85rem 0.75rem;
    background: linear-gradient(transparent, rgba(16, 14, 12, 0.74));
    color: #fff;
    font-size: 0.82rem;
    line-height: 1.4;
    pointer-events: none;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity 240ms var(--wd-ease), transform 240ms var(--wd-ease);
}
.wd-mtile:hover .wd-mtile-veil,
.wd-mtile:focus-within .wd-mtile-veil { opacity: 1; transform: translateY(0); }
.wd-mtile:hover .wd-mtile-chips { opacity: 0; }
.wd-mtile-veil .cap {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Le widget Pinterest occupe le coin haut-droit avec son bouton
   « Enregistrer » : nos actions passent à gauche pour ne pas le heurter,
   et la légende va sous la carte plutôt qu'en voile illisible */
.wd-mtile--embed .wd-mtile-veil { display: none; }
.wd-mtile--embed .wd-mtile-actions { right: auto; left: 10px; }

/* Pied de tuile en lecture seule (portail couple sous un embed) */
.wd-mtile-foot {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 8px 4px 0;
    font-size: 0.82rem;
    line-height: 1.35;
    color: var(--ep-text-secondary);
}
/* Repli affiché : la carte lien porte déjà la légende, pas de doublon */
.wd-mtile--embed:has(.wd-mtile-embed[data-failed]) .wd-mtile-foot .cap { display: none; }
.wd-mtile-foot .cap {
    min-width: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── 6. Portail couple : réactions posées sur l'image ──────── */
.wd-mreacts {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 4;
    display: flex;
    gap: 6px;
}
.wd-mreacts form { display: contents; }
.wd-mreact {
    height: 34px;
    min-width: 34px;
    padding: 0 10px;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 10px -3px rgba(27, 24, 22, 0.32);
    color: var(--wd-onyx);
    font-size: 0.86rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: background 200ms var(--wd-ease), transform 200ms var(--wd-ease),
                color 200ms var(--wd-ease);
}
.wd-mreact:hover { background: #fff; color: var(--wd-onyx); transform: scale(1.06); }
.wd-mreact:active { transform: scale(0.93); }
.wd-mreact.is-on { background: #fff; }
.wd-mreact.is-on.wd-mreact--love { color: var(--ep-danger); }
.wd-mreact.is-on.wd-mreact--review { color: var(--wd-st-warn); }
.wd-mreact--love.is-on i { animation: wd-mheart 400ms var(--wd-ease); }
@keyframes wd-mheart {
    0% { transform: scale(1); }
    45% { transform: scale(1.35); }
    100% { transform: scale(1); }
}
/* Sur un embed, les réactions passent sous la carte du widget */
.wd-mtile--embed .wd-mreacts {
    position: static;
    padding: 8px 4px 0;
}
.wd-mtile--embed .wd-mreact {
    background: #fff;
    color: var(--ep-text-secondary);
    border: 1px solid var(--wd-hairline);
    box-shadow: none;
}
.wd-mtile--embed .wd-mreact:hover { color: var(--wd-onyx); }
.wd-mtile--embed .wd-mreact.is-on.wd-mreact--love { color: var(--ep-danger); }
.wd-mtile--embed .wd-mreact.is-on.wd-mreact--review { color: var(--wd-st-warn); }

/* ── Le mot du couple : ligne repliée, côté portail ──────────── */
.wd-mnote {
    background: #fff;
    border-top: 1px solid var(--wd-hairline);
}
/* Tuile sans chrome (embed) : la ligne devient sa propre carte */
.wd-mtile--embed .wd-mnote {
    margin-top: 8px;
    border: 1px solid var(--wd-hairline);
    border-radius: 12px;
    overflow: hidden;
}
.wd-mnote > summary {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 10px 14px;
    font-size: 0.82rem;
    color: var(--ep-text-muted);
    cursor: pointer;
    list-style: none;
    transition: background 200ms var(--wd-ease), color 200ms var(--wd-ease);
}
.wd-mnote > summary::-webkit-details-marker { display: none; }
.wd-mnote > summary:hover { background: #F9F7F3; color: var(--wd-onyx); }
.wd-mnote > summary i { color: var(--ep-text-secondary); font-size: 0.86rem; flex: none; }
.wd-mnote > summary .txt {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wd-mnote.has-note > summary { color: var(--wd-onyx); font-style: italic; }
.wd-mnote[open] > summary { border-bottom: 1px solid var(--wd-hairline); }
.wd-mnote-body { padding: 10px 12px 12px; }
.wd-mnote-body .form-control {
    font-size: 0.84rem;
    border-color: var(--wd-hairline-2);
}
.wd-mnote-body .btn {
    border-radius: 0 10px 10px 0 !important;
    background: var(--wd-onyx);
    border-color: var(--wd-onyx);
    color: #fff;
}
.wd-mnote-body .btn:hover { background: #000; color: #fff; }
.wd-mnote-body .input-group .form-control { border-radius: 10px 0 0 10px; }

/* ── 7. La légende (planner) : une ligne sous le tirage ─────────
   Éditable sur place : un clic sur la légende ouvre la saisie. Sans
   légende, la tuile n'est qu'une image — le crayon des actions ouvre
   la saisie (le bloc reste masqué tant qu'il est fermé). */
.wd-mcap {
    background: transparent;
    border: none;
}
.wd-mcap:not(.has-cap):not([open]) { display: none; }
.wd-mcap > summary {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 11px 14px 12px;
    font-size: 0.86rem;
    line-height: 1.4;
    color: var(--wd-onyx);
    cursor: text;
    list-style: none;
}
.wd-mcap > summary::-webkit-details-marker { display: none; }
.wd-mcap > summary .txt {
    min-width: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.wd-mcap > summary .ms {
    flex: none;
    margin-left: auto;
    font-size: 15px;
    color: var(--ep-text-muted);
    opacity: 0;
    transform: translateX(-2px);
    transition: opacity 200ms var(--wd-ease), transform 200ms var(--wd-ease);
}
.wd-mtile:hover .wd-mcap > summary .ms,
.wd-mcap > summary:hover .ms { opacity: 1; transform: translateX(0); }

/* Édition sur place : le résumé s'efface, une ligne d'écriture le remplace */
.wd-mcap[open] > summary { display: none; }
.wd-mcap-form {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 7px 7px 14px;
    border-top: 1px solid var(--wd-hairline);
}
.wd-mcap-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 0;
    font-family: inherit;
    font-size: 0.86rem;
    line-height: 1.4;
    color: var(--wd-onyx);
    outline: none;
}
.wd-mcap-input::placeholder { color: var(--ep-text-muted); }
.wd-mcap-save {
    flex: none;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 8px;
    background: var(--wd-onyx);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 160ms var(--wd-ease), transform 200ms var(--wd-ease);
}
.wd-mcap-save .ms { font-size: 18px; }
.wd-mcap-save:hover { background: #000; transform: scale(1.06); }
/* Sous un embed (pas de carte autour) : texte gris, saisie dans son cadre */
.wd-mtile--embed .wd-mcap > summary { padding: 8px 4px 0; color: var(--ep-text-secondary); }
.wd-mtile--embed .wd-mcap-form {
    margin-top: 8px;
    border: 1px solid var(--wd-hairline-2);
    border-radius: 12px;
    background: #fff;
}

/* ── 8. Tactile : pas de survol → tout reste accessible ────── */
@media (hover: none) {
    .wd-mtile-act { opacity: 1; transform: none; width: 28px; height: 28px; border-radius: 8px; }
    .wd-mtile-act .ms { font-size: 16px; }
    .wd-mtile-actions { top: 8px; right: 8px; gap: 4px; }
    .wd-mtile--embed .wd-mtile-actions { left: 8px; }
    .wd-mcap > summary .ms { opacity: 0.7; transform: none; }
    .wd-mtile-veil { display: none; }
    .wd-mtile-chips { opacity: 1 !important; }
    .wd-mtile:hover { transform: none; }
}

/* ── 9. États vides et création d'une planche ──────────────── */
.wd-rp-blank.wd-mood-empty { padding: 44px 24px; }
.wd-rp-blank.wd-mood-empty p { max-width: 52ch; margin: 0 auto; }
.wd-mood-empty > .wd-ev-btn--primary { margin-top: 18px; }
.wd-mood-new {
    display: flex;
    gap: 8px;
    max-width: 560px;
    padding: 14px;
    margin: 16px 0 6px;
    border: 1px solid var(--wd-hairline);
    border-radius: 14px;
    background: #FDFCFA;
}
.wd-mood-new .form-control {
    flex: 1;
    min-width: 0;
    height: 38px;
    border: 1px solid var(--wd-hairline-2);
    border-radius: var(--wd-r-ctl);
    font-size: 0.9rem;
    background: #fff;
}
.wd-mood-new .form-control:focus { border-color: var(--wd-onyx); box-shadow: 0 0 0 3px rgba(27, 24, 22, 0.08); }
.wd-mood-new .wd-ev-btn { flex: none; }
/* Dans l'état vide, le formulaire n'a pas de second cadre */
.wd-mood-empty .wd-mood-new {
    margin: 20px auto 0;
    padding: 0;
    border: 0;
    background: none;
}
@media (max-width: 575.98px) {
    .wd-mood-new { flex-direction: column; }
}

/* ── 10. Univers de la planche ─────────────────────────────────
   Portail : un bandeau (palette, typographies) au-dessus de la
   mosaïque. Planner : une section de la colonne de cartes. */
.wd-muniverse {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 48px;
    padding: 18px 22px;
    margin: 24px 0 28px;
    border: 1px solid var(--wd-card-border, #ECE7DF);
    border-radius: var(--wd-r-card);
    background: var(--wd-card-bg, #fff);
    box-shadow: var(--wd-card-shadow);
}
.wd-muni-label {
    margin: 0 0 10px;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--wd-onyx);
}
.wd-mswatches,
.wd-mtypos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    align-items: center;
}
.wd-mswatch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.84rem;
    color: var(--wd-onyx);
}
.wd-mswatch .dab {
    width: 26px;
    height: 26px;
    border-radius: 9px;
    background: var(--c);
    box-shadow: inset 0 0 0 1px rgba(27, 24, 22, 0.1);
}
.wd-mswatch .txt { font-variant-numeric: tabular-nums; }
.wd-mtypo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.wd-mtypo .sample {
    font-size: 1.5rem;
    line-height: 1;
    color: var(--wd-onyx);
}
.wd-mtypo .meta {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
.wd-mtypo .meta strong { font-size: 0.84rem; font-weight: 600; }
.wd-mtypo .meta small { font-size: 0.76rem; color: var(--ep-text-muted); }
@media (max-width: 575.98px) {
    .wd-muniverse { gap: 14px 24px; padding: 14px 16px; }
    .wd-mtypo .sample { font-size: 1.3rem; }
}

/* ── 11. Colonne de cartes de la planche (planner) ──────────── */
.wd-mb-card {
    padding: 4px 20px;
    border: 1px solid var(--wd-card-border, #ECE7DF);
    border-radius: var(--wd-r-card);
    background: var(--wd-card-bg, #fff);
    box-shadow: var(--wd-card-shadow);
}
/* La carte d'univers garde la classe .wd-muniverse (le contenu est le
   même) mais pas la mise en bandeau du portail */
.wd-muniverse.wd-muniverse--side {
    display: block;
    gap: 0;
    margin: 0;
    padding: 4px 20px;
}
.wd-mb-sec { padding: 16px 0 18px; }
.wd-mb-sec + .wd-mb-sec { border-top: 1px solid var(--wd-hairline); }
.wd-mb-sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.wd-mb-sec-head h2 { font-size: 0.98rem; margin: 0; }
.wd-mb-edit {
    border: 0;
    background: none;
    padding: 0;
    font-family: var(--wd-font-sans);
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--wd-onyx);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--wd-jaune);
    white-space: nowrap;
    cursor: pointer;
    transition: text-decoration-thickness 150ms var(--wd-ease);
}
.wd-mb-edit:hover { text-decoration-thickness: 3px; }
.wd-mb-empty { margin: 0; font-size: 0.86rem; line-height: 1.5; color: var(--ep-text-secondary); }

/* Palette : pastilles nommées sur deux colonnes */
.wd-mb-swatches {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
}
.wd-mb-swatches li {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    font-size: 0.84rem;
    color: var(--wd-onyx);
}
.wd-mb-swatches .dab {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    box-shadow: inset 0 0 0 1px rgba(27, 24, 22, 0.1);
    transition: transform 240ms var(--wd-ease);
}
.wd-mb-swatches li:hover .dab { transform: scale(1.12) rotate(-6deg); }
.wd-mb-swatches .txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Palette vide mais teintes relevées sur les images : un raccourci */
.wd-mb-suggest {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px dashed var(--wd-hairline-2);
    border-radius: 12px;
    background: #fff;
    font-size: 0.84rem;
    color: var(--ep-text-secondary);
    text-align: left;
    transition: border-color 150ms var(--wd-ease), color 150ms var(--wd-ease);
}
.wd-mb-suggest:hover { border-color: var(--wd-onyx); color: var(--wd-onyx); }
.wd-mb-suggest .dabs { display: flex; flex: none; padding-left: 5px; }
.wd-mb-suggest .dabs i {
    width: 20px;
    height: 20px;
    margin-left: -5px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #fff;
}

/* Typographies : l'aperçu dans un carré papier */
.wd-mb-fonts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.wd-mb-fonts li { display: flex; align-items: center; gap: 12px; min-width: 0; }
.wd-mb-fonts .sample {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--wd-papier);
    display: grid;
    place-items: center;
    font-size: 1.45rem;
    line-height: 1;
    color: var(--wd-onyx);
}
.wd-mb-fonts .meta { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.wd-mb-fonts .meta strong { font-size: 0.88rem; font-weight: 600; }
.wd-mb-fonts .meta small { font-size: 0.8rem; color: var(--ep-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Retours du couple : le compte, puis les trois derniers */
.wd-mb-feed-sum {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
    font-size: 0.86rem;
    color: var(--ep-text-secondary);
}
.wd-mb-feed-sum .ms { font-size: 18px; color: var(--wd-jaune); }
.wd-mb-feed-sum b { color: var(--wd-onyx); font-weight: 600; }
.wd-mb-feed { list-style: none; margin: 0 -10px; padding: 0; }
.wd-mb-feed a {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 12px;
    color: var(--wd-onyx);
    text-decoration: none;
    transition: background 150ms var(--wd-ease);
}
.wd-mb-feed a:hover { background: #F9F7F3; color: var(--wd-onyx); }
.wd-mb-feed .thumb {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: cover;
    background: var(--wd-papier);
    display: grid;
    place-items: center;
    color: #E60023;
}
.wd-mb-feed .txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 2px; }
.wd-mb-feed strong { display: inline-flex; align-items: center; gap: 5px; font-size: 0.84rem; font-weight: 600; }
.wd-mb-feed strong i { font-size: 0.8rem; }
.wd-mb-feed strong.is-love i { color: var(--wd-jaune); }
.wd-mb-feed strong.is-review i { color: var(--wd-st-warn); }
.wd-mb-feed em,
.wd-mb-feed small {
    font-size: 0.82rem;
    color: var(--ep-text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── 12. En-tête de la planche : partage au couple, menu ────── */
.wd-mood-share { margin: 0; }
.wd-mood-share label {
    height: 38px;
    padding: 0 14px 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--wd-hairline-2);
    border-radius: var(--wd-r-ctl);
    background: #fff;
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--wd-onyx);
    cursor: pointer;
    white-space: nowrap;
    transition: background 150ms var(--wd-ease), transform 200ms var(--wd-ease);
}
.wd-mood-share label:hover { background: var(--wd-papier); transform: translateY(-1px); }
.wd-mood-switch {
    -webkit-appearance: none;
    appearance: none;
    flex: none;
    position: relative;
    width: 30px;
    height: 18px;
    margin: 0;
    border-radius: 999px;
    background: var(--wd-hairline-2);
    cursor: pointer;
    transition: background 200ms var(--wd-ease);
}
.wd-mood-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(27, 24, 22, 0.25);
    transition: transform 240ms var(--wd-ease);
}
.wd-mood-switch:checked { background: var(--wd-onyx); }
.wd-mood-switch:checked::after { transform: translateX(12px); }
.wd-mood-switch:focus-visible { outline: 2px solid var(--wd-onyx); outline-offset: 2px; }
.wd-mood-menu-danger, .wd-mood-menu-danger .ms { color: var(--wd-st-danger) !important; }
.wd-mood-menu-danger:hover { background: var(--wd-st-danger-bg) !important; }
@media (max-width: 575.98px) {
    .wd-mood-share-long { display: none; }
}
@media (max-width: 767.98px) {
    .wd-mood .wd-rp-head .acts { flex-wrap: wrap; }
    .wd-mood .wd-rp-head .acts > .wd-ev-btn--primary { margin-left: auto; }
}

/* ── 13. Index : chaque planche se présente par ses images ─── */
.wd-mood-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 24px;
    margin-top: 20px;
}
.wd-mood-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--wd-r-card);
    overflow: hidden;
    background: var(--wd-card-bg, #fff);
    border: 1px solid var(--wd-card-border, #ECE7DF);
    box-shadow: var(--wd-card-shadow);
    text-decoration: none;
    color: var(--wd-onyx);
    animation: wd-mtile-in 450ms var(--wd-ease) backwards;
    transition: transform 280ms var(--wd-ease), box-shadow 280ms var(--wd-ease);
}
.wd-mood-grid > .wd-mood-card:nth-child(2) { animation-delay: 50ms; }
.wd-mood-grid > .wd-mood-card:nth-child(3) { animation-delay: 100ms; }
.wd-mood-grid > .wd-mood-card:nth-child(n+4) { animation-delay: 150ms; }
.wd-mood-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 1px 2px rgba(27, 24, 22, 0.06), 0 26px 44px -22px rgba(27, 24, 22, 0.36);
    color: var(--wd-onyx);
}
.wd-mood-cover {
    position: relative;
    display: grid;
    gap: 2px;
    aspect-ratio: 4 / 3;
    background: var(--wd-papier);
    overflow: hidden;
}
.wd-mood-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 700ms var(--wd-ease);
}
.wd-mood-card:hover .wd-mood-cover img { transform: scale(1.04); }
.wd-mood-cover--1 { grid-template-columns: 1fr; }
.wd-mood-cover--2 { grid-template-columns: 1fr 1fr; }
.wd-mood-cover--3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.wd-mood-cover--3 > :first-child { grid-row: span 2; }
.wd-mood-cover--4 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr 1fr; }
.wd-mood-cover--4 > :first-child { grid-row: span 3; }
/* Planche sans image mais avec palette : ses couleurs en bandes, qui
   respirent au survol */
.wd-mood-cover--palette { display: flex; gap: 0; }
.wd-mood-cover--palette span { flex: 1 1 0; transition: flex-grow 600ms var(--wd-ease); }
.wd-mood-card:hover .wd-mood-cover--palette span:nth-child(odd) { flex-grow: 1.5; }
/* Ni image ni palette : un creux qui dit ce que contient la planche */
.wd-mood-cover--0 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--ep-text-muted);
}
.wd-mood-cover--0 .ms { font-size: 34px; transition: transform 300ms var(--wd-ease); }
.wd-mood-card:hover .wd-mood-cover--0 .ms { transform: translateY(-2px) rotate(-6deg); }
.wd-mood-cover--0 small { font-size: 0.82rem; color: var(--ep-text-secondary); }
/* Portail : icône Bootstrap de la couverture vide */
.wd-mood-cover--0 > .bi { font-size: 1.8rem; }
.wd-mood-cover-count {
    position: absolute;
    right: 10px;
    bottom: 10px;
    height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 2px 10px -4px rgba(27, 24, 22, 0.34);
    color: var(--wd-onyx);
    font-size: 0.74rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.wd-mood-card-body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.wd-mood-card-title {
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
}
.wd-mood-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    font-size: 0.82rem;
    color: var(--ep-text-secondary);
}
.wd-mood-card-meta .love { display: inline-flex; align-items: center; gap: 4px; color: var(--wd-onyx); font-weight: 600; }
.wd-mood-card-meta .love .ms { font-size: 16px; color: var(--wd-jaune); }
.wd-mood-card-meta .love .bi { color: var(--wd-jaune); }
.wd-mood-dabs { display: flex; margin-left: auto; padding-left: 4px; }
.wd-mood-dabs i {
    width: 14px;
    height: 14px;
    margin-left: -4px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #fff;
}

/* ── 14. Panneaux glissants de la planche ──────────────────── */
.wd-mood .wd-oc .offcanvas-header { padding: 18px 22px 14px; }
.wd-mood .wd-oc .offcanvas-title {
    font-family: var(--wd-font-display);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--wd-onyx);
}
.wd-mood .wd-oc .offcanvas-body { padding: 18px 22px 24px; }
.wd-mood .wd-panel-sub {
    margin: 22px 0 8px;
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--wd-onyx);
}
.wd-mood .wd-oc-group {
    background: #fff;
    border: 1px solid var(--wd-hairline);
    border-radius: 14px;
    padding: 14px;
}
.wd-mood .wd-oc-hint { font-size: 0.8rem; line-height: 1.45; color: var(--ep-text-secondary); }
.wd-mood .wd-oc .form-control,
.wd-mood .wd-oc .form-select {
    height: 38px;
    border: 1px solid var(--wd-hairline-2);
    border-radius: var(--wd-r-ctl);
    font-size: 0.88rem;
}
.wd-mood .wd-oc .form-control:focus,
.wd-mood .wd-oc .form-select:focus { border-color: var(--wd-onyx); box-shadow: 0 0 0 3px rgba(27, 24, 22, 0.08); }
.wd-mood .wd-oc .btn {
    height: 38px;
    padding: 0 14px;
    border-radius: var(--wd-r-ctl) !important;
    font-size: 0.86rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.wd-mood .wd-oc .btn .ms { font-size: 18px; }
.wd-mood .wd-oc .btn-outline-secondary {
    background: #fff;
    border-color: var(--wd-hairline-2);
    color: var(--wd-onyx);
}
.wd-mood .wd-oc .btn-outline-secondary:hover { background: var(--wd-papier); border-color: var(--wd-hairline-2); color: var(--wd-onyx); }

/* Dépôt d'une image */
.wd-mood-drop {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 22px 16px;
    border: 1.5px dashed var(--wd-hairline-2);
    border-radius: 12px;
    background: #FDFCFA;
    cursor: pointer;
    text-align: center;
    transition: background 220ms var(--wd-ease), border-color 220ms var(--wd-ease);
}
.wd-mood-drop:hover { border-color: var(--wd-onyx); background: #fff; }
.wd-mood-drop .ms { font-size: 26px; color: var(--ep-text-secondary); transition: transform 240ms var(--wd-ease); }
.wd-mood-drop:hover .ms { transform: translateY(-3px); }
.wd-mood-drop strong { font-size: 0.88rem; font-weight: 600; }
.wd-mood-drop small { font-size: 0.78rem; color: var(--ep-text-muted); }
/* Champ invisible mais focusable : en display:none, un input required
   bloque la soumission sans message (le navigateur ne peut pas le cibler) */
.wd-mood-drop input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.wd-mood-drop.is-picked { border-style: solid; border-color: var(--wd-onyx); background: var(--wd-papier); }
.wd-mood-drop.is-picked .ms { color: var(--wd-onyx); }

/* Palette et typographies retenues : une ligne chacune */
.wd-mpal-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}
.wd-mpal-row + .wd-mpal-row { border-top: 1px solid var(--wd-hairline); }
.wd-mpal-row:first-child { padding-top: 0; }
.wd-mpal-row:last-child { padding-bottom: 0; }
.wd-mpal-dab {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px rgba(27, 24, 22, 0.1);
}
.wd-mtypo-dab {
    flex: none;
    width: 32px;
    text-align: center;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--wd-onyx);
}
.wd-mpal-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}
.wd-mpal-text strong { font-size: 0.88rem; font-weight: 600; }
.wd-mpal-text small { font-size: 0.78rem; color: var(--ep-text-muted); font-variant-numeric: tabular-nums; }
.wd-mpal-remove {
    flex: none;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--ep-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 160ms var(--wd-ease), color 160ms var(--wd-ease);
}
.wd-mpal-remove .ms { font-size: 18px; }
.wd-mpal-remove:hover { background: var(--wd-st-danger-bg); color: var(--wd-st-danger); }

/* Teintes relevées : un clic les fait entrer dans la palette */
.wd-mpal-suggest {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.wd-mpal-suggest button {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px rgba(27, 24, 22, 0.1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 200ms var(--wd-ease), box-shadow 200ms var(--wd-ease);
}
.wd-mpal-suggest button .ms {
    font-size: 20px;
    opacity: 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    transition: opacity 180ms var(--wd-ease);
}
.wd-mpal-suggest button:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 14px -6px rgba(27, 24, 22, 0.4), inset 0 0 0 1px rgba(27, 24, 22, 0.12);
}
.wd-mpal-suggest button:hover .ms { opacity: 1; }

.wd-mpal-picker {
    flex: none;
    width: 44px;
    height: 38px;
    padding: 3px;
    border: 1px solid var(--wd-hairline-2);
    border-radius: var(--wd-r-ctl);
    background: #fff;
    cursor: pointer;
}

/* Choix de typographie : l'aperçu EST l'option */
.wd-mfont-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 6px;
}
.wd-mfont-opt {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 6px 8px;
    border: 1px solid var(--wd-hairline);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    text-align: center;
    transition: border-color 160ms var(--wd-ease), box-shadow 160ms var(--wd-ease), transform 200ms var(--wd-ease);
}
.wd-mfont-opt:hover { border-color: var(--wd-hairline-2); transform: translateY(-1px); }
.wd-mfont-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.wd-mfont-opt:has(input:checked) {
    border-color: var(--wd-onyx);
    box-shadow: 0 0 0 3px rgba(27, 24, 22, 0.08);
}
.wd-mfont-opt:has(input:focus-visible) { outline: 2px solid var(--wd-onyx); outline-offset: 2px; }
.wd-mfont-opt .sample {
    font-size: 1.6rem;
    line-height: 1.1;
    color: var(--wd-onyx);
}
.wd-mfont-opt .name {
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--wd-onyx);
}
.wd-mfont-opt .cat { font-size: 0.68rem; color: var(--ep-text-muted); }

/* Retours du couple, en panneau */
.wd-mfeed {
    display: flex;
    gap: 12px;
    padding: 10px 0;
}
.wd-mfeed:first-child { padding-top: 0; }
.wd-mfeed:last-child { padding-bottom: 0; }
.wd-mfeed + .wd-mfeed { border-top: 1px solid var(--wd-hairline); }
.wd-mfeed-thumb {
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 10px;
    object-fit: cover;
    background: var(--wd-papier);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #E60023;
    font-size: 0.95rem;
}
.wd-mfeed-text { min-width: 0; font-size: 0.84rem; }
.wd-mfeed-text strong {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.86rem;
    font-weight: 600;
}
.wd-mfeed-text strong .ms { font-size: 16px; color: var(--ep-text-secondary); }
.wd-mfeed-text strong .bi-heart-fill { color: var(--wd-jaune); }
.wd-mfeed-text strong .bi-arrow-repeat { color: var(--wd-st-warn); }
.wd-mfeed-text p {
    margin: 4px 0 0;
    font-style: italic;
    color: var(--ep-text-secondary);
}