/* ============================================================
   FENÊTRES DE DIALOGUE — fzDialog.js
   ------------------------------------------------------------
   Remplacent alert(), confirm() et prompt() partout sur le site : une
   boîte native porte le nom du domaine en titre, ignore le thème et
   bloque la page entière. Celles-ci suivent la charte (DESIGN.md) :
   carte « board-gray », rayon 18px, ombre elevation-4, un seul bouton
   rouge plein, et la couleur sémantique réservée à l'icône qui dit la
   nature du message.

   Préfixe « fzd- » : chargé sur toutes les pages, à côté de feuilles
   qui définissent déjà .modal, .overlay ou .alert à leur façon. Chaque
   variable a une valeur de repli (thème sombre d'Apple) : les pages
   légales ne chargent pas index.css et ne déclarent qu'une partie des
   jetons.
   ============================================================ */

.fzd-overlay {
    /* La teinte colore l'icône : c'est un emploi « texte » du rouge. */
    --fzd-tone: var(--primary-text, #FF5C66);
    position: fixed;
    inset: 0;
    /* Au-dessus de tout : fiche joueur, salle de repêchage, menus. */
    z-index: 10100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: var(--overlay-dark, rgba(0, 0, 0, .6));
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    overscroll-behavior: contain;
    animation: fzdFade .2s cubic-bezier(.4, 0, .2, 1);
}

.fzd-overlay[data-tone="success"] { --fzd-tone: var(--success, #30D158); }
.fzd-overlay[data-tone="error"],
.fzd-overlay[data-tone="danger"]  { --fzd-tone: var(--danger, #FF5C66); }
.fzd-overlay[data-tone="warning"] { --fzd-tone: var(--warning, #FFD60A); }

.fzd-overlay.is-leaving { animation: fzdFadeOut .16s ease forwards; }
.fzd-overlay.is-leaving .fzd-card { animation: fzdSink .16s ease forwards; }

html.fzd-lock { overflow: hidden; }

/* ==================== CARTE ==================== */

.fzd-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 420px;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow: hidden;
    background: var(--card, #1C1C1E);
    /* Un voile de la teinte du message, en haut seulement : il dit
       « réussi » ou « attention » avant même qu'on lise. */
    background-image: radial-gradient(120% 70% at 50% 0%,
        color-mix(in srgb, var(--fzd-tone) 9%, transparent) 0%, transparent 70%);
    border: 1px solid var(--border-light, #38383A);
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .55);
    color: var(--text-main, #F5F5F7);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: center;
    animation: fzdRise .26s cubic-bezier(.4, 0, .2, 1);
}

.fzd-card.is-wide { max-width: 480px; }
.fzd-card.is-start { text-align: left; }

.fzd-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary, #A1A1A6);
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.fzd-close:hover { background: var(--bg-hover, #2C2C2E); color: var(--text-main, #F5F5F7); }
.fzd-close:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 230, 32, 48), .35);
}
.fzd-close svg { width: 18px; height: 18px; }

.fzd-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 30px 28px 0;
}
.fzd-card.is-start .fzd-head { align-items: flex-start; }

.fzd-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    flex: 0 0 auto;
    border-radius: 50%;
    color: var(--fzd-tone);
    background: color-mix(in srgb, var(--fzd-tone) 15%, var(--card, #1C1C1E));
    box-shadow: 0 0 0 7px color-mix(in srgb, var(--fzd-tone) 6%, transparent);
    animation: fzdPop .38s cubic-bezier(.4, 0, .2, 1) .04s both;
}
.fzd-icon svg { width: 28px; height: 28px; }

/* La réussite est un moment : le crochet se trace, l'icône rebondit un
   peu. C'est l'exception « célébration » de DESIGN.md — les autres
   types gardent l'entrée sobre. */
.fzd-overlay[data-tone="success"] .fzd-icon {
    animation: fzdPopJoy .5s cubic-bezier(.34, 1.56, .64, 1) .04s both;
}
.fzd-overlay[data-tone="success"] .fzd-icon .fzd-draw {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: fzdDraw .42s cubic-bezier(.4, 0, .2, 1) .26s forwards;
}

.fzd-title {
    margin: 0;
    padding: 0 12px;
    font-size: 1.28rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.005em;
    color: var(--text-main, #F5F5F7);
    overflow-wrap: anywhere;
}
.fzd-card.is-start .fzd-title { padding: 0 36px 0 0; }

/* ==================== CORPS ==================== */

.fzd-body {
    padding: 10px 28px 0;
    overflow-y: auto;
    font-size: .95rem;
    line-height: 1.6;
    color: var(--text-secondary, #A1A1A6);
    overflow-wrap: anywhere;
}
.fzd-body p { margin: 0 0 10px; }
.fzd-body p:last-child { margin-bottom: 0; }
.fzd-body strong { color: var(--text-main, #F5F5F7); font-weight: 700; }
.fzd-body ul { margin: 0 0 10px; padding-left: 20px; text-align: left; }
.fzd-body li { margin-bottom: 6px; }

/* Encadré : la suite logique, ou le détail qui compte. */
.fzd-note {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-top: 16px;
    padding: 13px 14px;
    border: 1px solid var(--border-light, #38383A);
    border-radius: 12px;
    background: var(--bg-gray-light, #2C2C2E);
    text-align: left;
    font-size: .88rem;
    line-height: 1.5;
}
.fzd-note-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border-radius: 10px;
    background: rgba(var(--primary-rgb, 230, 32, 48), .12);
    color: var(--primary-text, #FF5C66);
}
.fzd-note-icon svg { width: 17px; height: 17px; }
.fzd-note-title {
    display: block;
    margin-bottom: 2px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-main, #F5F5F7);
}

/* ==================== CHAMPS ==================== */

.fzd-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 16px;
    padding: 13px 16px;
    border: 2px solid var(--border-gray, #636366);
    border-radius: 12px;
    background: var(--bg-gray-light, #2C2C2E);
    color: var(--text-main, #F5F5F7);
    font: inherit;
    font-size: 1rem;           /* 16px : iOS ne zoome pas au focus */
    font-weight: 600;
    text-align: left;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.fzd-input::placeholder { color: var(--text-light-gray, #6E6E73); font-weight: 400; }
.fzd-input:focus {
    outline: none;
    border-color: var(--primary, #E62030);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 230, 32, 48), .18);
}

/* Lien à copier : le champ et son bouton sur une ligne. */
.fzd-copy {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}
.fzd-copy .fzd-input {
    flex: 1;
    min-width: 0;
    margin-top: 0;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .85rem;
    font-weight: 500;
}
.fzd-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 0 16px;
    min-height: 48px;
    border: 2px solid var(--border-gray, #636366);
    border-radius: 12px;
    background: transparent;
    color: var(--text-main, #F5F5F7);
    font: inherit;
    font-size: .9rem;
    font-weight: 800;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease;
}
.fzd-copy-btn svg { width: 16px; height: 16px; }
.fzd-copy-btn:hover { border-color: var(--primary, #E62030); color: var(--primary-text, #FF5C66); }
.fzd-copy-btn.is-done { border-color: var(--success, #30D158); color: var(--success, #30D158); }
.fzd-copy-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 230, 32, 48), .35);
}

.fzd-error {
    min-height: 1.2em;
    margin-top: 10px;
    color: var(--danger, #FF5C66);
    font-size: .86rem;
    font-weight: 600;
    text-align: left;
}
.fzd-error:empty { margin-top: 0; min-height: 0; }

/* ==================== BOUTONS ==================== */

.fzd-actions {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 10px;
    padding: 24px 28px 26px;
}

.fzd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 22px;
    border: 2px solid transparent;
    border-radius: 12px;
    font: inherit;
    font-size: .95rem;
    font-weight: 800;
    line-height: 1.2;
    cursor: pointer;
    transition: transform .2s cubic-bezier(.4, 0, .2, 1),
                box-shadow .2s cubic-bezier(.4, 0, .2, 1),
                border-color .2s ease, color .2s ease, background .2s ease;
}
.fzd-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .32);
}
.fzd-btn:active:not(:disabled) { transform: translateY(0); box-shadow: none; }
.fzd-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 230, 32, 48), .4);
}
.fzd-btn:disabled { opacity: .6; cursor: not-allowed; }

/* Rouge plein, libellé blanc : 4,55:1 sur #E62030. Le survol fonce
   l'aplat, il ne l'éclaircit jamais. */
.fzd-btn--primary {
    background: var(--primary, #E62030);
    color: var(--on-primary, #FFFFFF);
}
.fzd-btn--primary:hover:not(:disabled) { background: var(--primary-deep, #C41A28); }
/* Destructif : du rouge en TEXTE, jamais un aplat — l'aplat rouge veut
   dire « allez-y » (DESIGN.md, The Destructive Is Text Rule). */
.fzd-btn--danger {
    background: transparent;
    border-color: var(--danger, #FF5C66);
    color: var(--danger, #FF5C66);
}
.fzd-btn--danger:hover:not(:disabled) { background: rgba(var(--primary-rgb, 230, 32, 48), .10); }
.fzd-btn--ghost {
    background: transparent;
    border-color: var(--border-gray, #636366);
    color: var(--text-main, #F5F5F7);
}
.fzd-btn--ghost:hover:not(:disabled) {
    border-color: var(--primary, #E62030);
    color: var(--primary-text, #FF5C66);
    background: rgba(255, 255, 255, .04);
}

.fzd-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: fzdSpin .7s linear infinite;
}

/* ==================== THÈME CLAIR ==================== */

html[data-theme="light"] .fzd-card { box-shadow: 0 20px 50px rgba(20, 20, 20, .22); }
html[data-theme="light"] .fzd-btn--ghost:hover:not(:disabled) { background: rgba(0, 0, 0, .03); }

/* ==================== TÉLÉPHONE ==================== */

@media (max-width: 480px) {
    .fzd-overlay { padding: 12px; }
    .fzd-head { padding: 28px 22px 0; }
    .fzd-body { padding: 10px 22px 0; }
    /* Les boutons s'empilent, l'action principale en haut, sous le pouce. */
    .fzd-actions {
        grid-auto-flow: row;
        padding: 22px 22px 22px;
    }
    .fzd-actions .fzd-btn--primary,
    .fzd-actions .fzd-btn--danger { order: -1; }
}

/* ==================== ANIMATIONS ==================== */

@keyframes fzdFade    { from { opacity: 0 } to { opacity: 1 } }
@keyframes fzdFadeOut { to { opacity: 0 } }
@keyframes fzdRise {
    from { opacity: 0; transform: translateY(12px) scale(.97) }
    to   { opacity: 1; transform: none }
}
@keyframes fzdSink { to { opacity: 0; transform: translateY(6px) scale(.98) } }
@keyframes fzdPop {
    from { opacity: 0; transform: scale(.8) }
    to   { opacity: 1; transform: none }
}
@keyframes fzdPopJoy {
    from { opacity: 0; transform: scale(.5) }
    to   { opacity: 1; transform: none }
}
@keyframes fzdDraw { to { stroke-dashoffset: 0 } }
@keyframes fzdSpin { to { transform: rotate(360deg) } }

@media (prefers-reduced-motion: reduce) {
    .fzd-overlay,
    .fzd-card,
    .fzd-icon,
    .fzd-overlay[data-tone="success"] .fzd-icon,
    .fzd-overlay.is-leaving,
    .fzd-overlay.is-leaving .fzd-card { animation: none; }
    .fzd-overlay[data-tone="success"] .fzd-icon .fzd-draw { animation: none; stroke-dashoffset: 0; }
    .fzd-btn:hover:not(:disabled) { transform: none; }
    .fzd-spinner { animation-duration: 2s; }
}