/* =========================================================
   DÉDICACES · dedicaces.php
   Hero aérien, liste en bulles avec avatars colorés,
   « charger plus », puis formulaire plein écran.
   --dd-h = teinte propre à chaque auditeur.
   ========================================================= */

.dd{
    --dd-pink:#ff2d8d;
    --dd-violet:#9c4dff;
    --dd-cyan:#00e5ff;
    --dd-text:#fff;
    --dd-muted:#9aa6c4;
    --dd-line:rgba(255,255,255,.1);

    position:relative;
    overflow:hidden;
    color:var(--dd-text);
    font-family:"DM Sans",Arial,Helvetica,sans-serif;
    background:linear-gradient(180deg,#240f45 0%,#161236 30%,#0b0c1d 100%);
}

.dd *{ box-sizing:border-box; }
.dd [hidden]{ display:none !important; }


/* ---------- Ambiance ---------- */

.dd-aura{ position:absolute; inset:0; pointer-events:none; }

.dd-aura span{
    position:absolute;
    border-radius:50%;
    filter:blur(90px);
    opacity:.5;
    animation:ddFloat 16s ease-in-out infinite alternate;
}

.dd-aura span:nth-child(1){ top:-120px; right:-80px; width:520px; height:520px; background:var(--dd-pink); opacity:.28; }
.dd-aura span:nth-child(2){ top:380px; left:-160px; width:460px; height:460px; background:var(--dd-violet); opacity:.28; animation-delay:-5s; }
.dd-aura span:nth-child(3){ top:900px; right:-140px; width:420px; height:420px; background:var(--dd-cyan); opacity:.12; animation-delay:-9s; }

@keyframes ddFloat{ to{ transform:translate(-50px,70px) scale(1.12); } }


/* ---------- Hero ---------- */

.dd-hero{
    position:relative;
    padding:96px max(22px,calc((100vw - 980px)/2)) 56px;
}

.dd-kicker{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-bottom:22px;
    font:800 12px/1 "Space Grotesk",sans-serif;
    letter-spacing:.24em;
    color:var(--dd-pink);
}

.dd-kicker i{
    width:9px;
    height:9px;
    border-radius:50%;
    background:var(--dd-pink);
    box-shadow:0 0 14px var(--dd-pink);
}

.dd-hero h1{
    margin:0;
    font:800 clamp(44px,8vw,100px)/.96 "Space Grotesk",sans-serif;
    letter-spacing:-.045em;
}

.dd-hero h1 em{
    font-style:normal;
    background:linear-gradient(90deg,var(--dd-pink),var(--dd-violet) 60%,var(--dd-cyan));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.dd-hero p{
    max-width:520px;
    margin:26px 0 0;
    font-size:17px;
    line-height:1.65;
    color:var(--dd-muted);
}

.dd-hero-actions{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:18px 26px;
    margin-top:38px;
}

.dd-cta{
    display:inline-flex;
    align-items:center;
    gap:14px;
    padding:10px 28px 10px 10px;
    border:0;
    border-radius:99px;
    cursor:pointer;
    color:#fff;
    font:800 14px/1 "Space Grotesk",sans-serif;
    letter-spacing:.06em;
    background:linear-gradient(90deg,var(--dd-pink),var(--dd-violet));
    box-shadow:0 14px 36px rgba(255,45,141,.38);
    transition:transform .2s,box-shadow .2s;
}

.dd-cta:hover{ transform:translateY(-3px); box-shadow:0 20px 44px rgba(255,45,141,.5); }

.dd-cta-icon{
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    border-radius:50%;
    font-size:15px;
    background:rgba(255,255,255,.2);
}

.dd-count{ font-size:14px; color:var(--dd-muted); }

.dd-count b{ font:800 22px/1 "Space Grotesk",sans-serif; color:#fff; margin-right:4px; }


/* ---------- Liste ---------- */

.dd-inner{
    position:relative;
    width:min(820px,calc(100% - 44px));
    margin:0 auto;
    padding:20px 0 100px;
}

.dd-list-head{
    display:flex;
    align-items:center;
    gap:20px;
    margin-bottom:30px;
}

.dd-list-head h2{
    margin:0;
    font:800 13px/1 "Space Grotesk",sans-serif;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--dd-muted);
    white-space:nowrap;
}

.dd-list-line{
    flex:1;
    height:1px;
    background:linear-gradient(90deg,rgba(255,45,141,.7),rgba(156,77,255,.3),transparent);
}

.dd-list{
    position:relative;
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:20px;
}

/* fil conducteur */
.dd-list::before{
    content:"";
    position:absolute;
    left:25px;
    top:20px;
    bottom:20px;
    width:2px;
    background:linear-gradient(180deg,rgba(255,45,141,.5),rgba(156,77,255,.25) 60%,transparent);
}

.dd-item{
    position:relative;
    display:flex;
    align-items:flex-start;
    gap:18px;
    animation:ddIn .6s both;
    animation-delay:calc(var(--dd-i,0) * 60ms);
}

@keyframes ddIn{ from{ opacity:0; transform:translateY(18px); } }

.dd-avatar{
    position:relative;
    flex:0 0 52px;
    display:grid;
    place-items:center;
    width:52px;
    height:52px;
    border-radius:50%;
    font:800 20px/1 "Space Grotesk",sans-serif;
    color:#fff;
    background:linear-gradient(135deg,hsl(var(--dd-h) 85% 58%),hsl(calc(var(--dd-h) + 50) 80% 42%));
    box-shadow:0 0 0 5px #161236,0 8px 22px hsl(var(--dd-h) 85% 50% / .4);
}

.dd-bubble{
    position:relative;
    flex:1;
    min-width:0;
    padding:20px 24px 22px;
    background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.03));
    border:1px solid var(--dd-line);
    border-radius:4px 22px 22px 22px;
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    transition:transform .25s,border-color .25s,box-shadow .25s;
}

.dd-bubble::before{
    content:"“";
    position:absolute;
    top:2px;
    right:20px;
    font:800 80px/1 Georgia,serif;
    color:hsl(var(--dd-h) 85% 62%);
    opacity:.16;
    pointer-events:none;
}

.dd-item:hover .dd-bubble{
    transform:translateX(4px);
    border-color:hsl(var(--dd-h) 85% 62% / .55);
    box-shadow:0 14px 40px rgba(0,0,0,.35),0 0 30px hsl(var(--dd-h) 85% 55% / .12);
}

.dd-bubble-top{
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:4px 14px;
    margin-bottom:10px;
}

.dd-bubble-top strong{
    font:800 15px/1.2 "Space Grotesk",sans-serif;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:hsl(var(--dd-h) 90% 74%);
    overflow-wrap:anywhere;
}

.dd-bubble-top time{
    font-size:12px;
    color:var(--dd-muted);
}

.dd-bubble p{
    position:relative;
    margin:0;
    font-size:17px;
    line-height:1.6;
    color:rgba(255,255,255,.92);
    overflow-wrap:anywhere;
    white-space:pre-line;
}


/* ---------- Charger plus / vide ---------- */

.dd-more-wrap{ display:flex; justify-content:center; margin-top:44px; }

.dd-more{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:220px;
    padding:16px 34px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:99px;
    cursor:pointer;
    color:#fff;
    font:800 13px/1 "Space Grotesk",sans-serif;
    letter-spacing:.14em;
    text-transform:uppercase;
    background:rgba(255,255,255,.04);
    transition:border-color .2s,background .2s,transform .2s;
}

.dd-more:hover:not(:disabled){
    border-color:var(--dd-pink);
    background:rgba(255,45,141,.12);
    transform:translateY(-2px);
}

.dd-more-spin{
    display:none;
    width:18px;
    height:18px;
    border:2px solid rgba(255,255,255,.3);
    border-top-color:#fff;
    border-radius:50%;
    animation:ddSpin .7s linear infinite;
}

.dd-more.is-loading .dd-more-label{ display:none; }
.dd-more.is-loading .dd-more-spin{ display:block; }

@keyframes ddSpin{ to{ transform:rotate(360deg); } }

.dd-end{
    margin:44px 0 0;
    text-align:center;
    font-size:14px;
    color:var(--dd-muted);
}

.dd-empty{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    padding:70px 0;
    text-align:center;
    color:var(--dd-muted);
}

.dd-empty span{ font-size:44px; }
.dd-empty strong{ font:800 22px/1.2 "Space Grotesk",sans-serif; color:#fff; }


/* =========================================================
   FORMULAIRE PLEINE PAGE
========================================================= */

.dd-form-page{
    position:fixed;
    inset:0;
    z-index:2000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:70px 22px 40px;
    overflow-y:auto;
    background:linear-gradient(160deg,#2b1250 0%,#161236 50%,#0b0c1d 100%);
    opacity:0;
    visibility:hidden;
    transform:translateY(24px) scale(.985);
    transition:opacity .35s,transform .35s,visibility 0s .35s;
}

.dd-form-page.is-open{
    opacity:1;
    visibility:visible;
    transform:none;
    transition:opacity .35s,transform .35s;
}

.dd-form-bg span{
    position:absolute;
    border-radius:50%;
    filter:blur(100px);
    pointer-events:none;
    animation:ddFloat 14s ease-in-out infinite alternate;
}

.dd-form-bg span:first-child{ top:-140px; left:-100px; width:520px; height:520px; background:var(--dd-pink); opacity:.3; }
.dd-form-bg span:last-child{ bottom:-160px; right:-120px; width:560px; height:560px; background:var(--dd-violet); opacity:.32; animation-delay:-6s; }

.dd-form-close{
    position:fixed;
    top:22px;
    right:22px;
    z-index:2;
    display:grid;
    place-items:center;
    width:50px;
    height:50px;
    border:1px solid rgba(255,255,255,.2);
    border-radius:50%;
    cursor:pointer;
    font-size:18px;
    color:#fff;
    background:rgba(255,255,255,.06);
    transition:background .2s,transform .25s;
}

.dd-form-close:hover{ background:rgba(255,255,255,.14); transform:rotate(90deg); }

.dd-form-inner{
    position:relative;
    width:min(680px,100%);
    margin:auto;
}

.dd-form h2,
.dd-done h2{
    margin:0 0 12px;
    font:800 clamp(34px,5.5vw,60px)/1 "Space Grotesk",sans-serif;
    letter-spacing:-.04em;
}

.dd-form-sub{
    margin:0 0 34px;
    font-size:16px;
    line-height:1.6;
    color:var(--dd-muted);
}

.dd-field{ display:block; margin-bottom:24px; }

.dd-field > span{
    display:block;
    margin-bottom:10px;
    font:800 11px/1 "Space Grotesk",sans-serif;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--dd-muted);
}

.dd-field input,
.dd-field textarea{
    display:block;
    width:100%;
    padding:20px 22px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:18px;
    outline:none;
    resize:vertical;
    font:500 20px/1.5 "DM Sans",Arial,sans-serif;
    color:#fff;
    background:rgba(255,255,255,.05);
    transition:border-color .2s,box-shadow .2s,background .2s;
}

.dd-field textarea{ min-height:150px; }

.dd-field input::placeholder,
.dd-field textarea::placeholder{ color:rgba(255,255,255,.3); }

.dd-field input:focus,
.dd-field textarea:focus{
    border-color:var(--dd-pink);
    background:rgba(255,255,255,.08);
    box-shadow:0 0 0 4px rgba(255,45,141,.18);
}

.dd-trap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.dd-form-tools{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:10px;
}

.dd-emoji{ position:relative; }

.dd-emoji-toggle{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:11px 18px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:99px;
    cursor:pointer;
    color:#fff;
    font:700 13px/1 "Space Grotesk",sans-serif;
    background:rgba(255,255,255,.05);
    transition:border-color .2s,background .2s;
}

.dd-emoji-toggle:hover{ border-color:var(--dd-pink); background:rgba(255,255,255,.09); }

.dd-emoji-panel{
    position:absolute;
    left:0;
    bottom:calc(100% + 10px);
    z-index:3;
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:4px;
    width:288px;
    padding:10px;
    background:#1c1544;
    border:1px solid rgba(255,255,255,.16);
    border-radius:16px;
    box-shadow:0 20px 50px rgba(0,0,0,.55);
    opacity:0;
    visibility:hidden;
    transform:translateY(8px);
    transition:opacity .18s,transform .18s,visibility 0s .18s;
}

.dd-emoji-panel.is-open{ opacity:1; visibility:visible; transform:none; transition:opacity .18s,transform .18s; }

.dd-emoji-panel button{
    padding:7px 0;
    border:0;
    border-radius:10px;
    cursor:pointer;
    font-size:22px;
    background:transparent;
    transition:background .15s,transform .15s;
}

.dd-emoji-panel button:hover{ background:rgba(255,255,255,.12); transform:scale(1.18); }

.dd-counter{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:13px;
    color:var(--dd-muted);
}

.dd-counter b{ color:#fff; }

.dd-counter svg{ width:34px; height:34px; transform:rotate(-90deg); }

.dd-counter circle{ fill:none; stroke-width:3; }

.dd-counter-bg{ stroke:rgba(255,255,255,.12); }

.dd-counter-fg{
    stroke:var(--dd-pink);
    stroke-linecap:round;
    stroke-dashoffset:97.4;
    transition:stroke-dashoffset .15s,stroke .2s;
}

.dd-counter-fg.is-warn{ stroke:#ffb020; }

.dd-form-error{
    min-height:22px;
    margin:6px 0 14px;
    font-size:14px;
    font-weight:600;
    color:#ff7a9c;
}

.dd-submit{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    width:100%;
    padding:22px;
    border:0;
    border-radius:20px;
    cursor:pointer;
    color:#fff;
    font:800 16px/1 "Space Grotesk",sans-serif;
    letter-spacing:.08em;
    text-transform:uppercase;
    background:linear-gradient(90deg,var(--dd-pink),var(--dd-violet));
    box-shadow:0 16px 40px rgba(255,45,141,.4);
    transition:transform .2s,box-shadow .2s,opacity .2s;
}

.dd-submit:hover:not(:disabled){ transform:translateY(-3px); box-shadow:0 22px 50px rgba(255,45,141,.55); }

.dd-submit:disabled{ opacity:.6; cursor:wait; }

.dd-submit.is-loading i{ animation:ddFly 1s ease-in-out infinite; }

@keyframes ddFly{ 50%{ transform:translate(6px,-6px); } }


/* ---------- Merci ---------- */

.dd-done{ text-align:center; animation:ddIn .6s both; }

.dd-done p{
    max-width:440px;
    margin:0 auto 34px;
    font-size:17px;
    line-height:1.6;
    color:var(--dd-muted);
}

.dd-done-icon{
    display:grid;
    place-items:center;
    width:92px;
    height:92px;
    margin:0 auto 26px;
    border-radius:50%;
    font-size:38px;
    color:#fff;
    background:linear-gradient(135deg,var(--dd-pink),var(--dd-violet));
    box-shadow:0 0 0 12px rgba(255,45,141,.14),0 0 60px rgba(255,45,141,.5);
    animation:ddPop .7s cubic-bezier(.2,1.5,.4,1) both;
}

@keyframes ddPop{ from{ transform:scale(0); } }

.dd-done-actions{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
}

.dd-ghost{
    padding:12px 22px;
    border:0;
    cursor:pointer;
    color:var(--dd-muted);
    font:700 13px/1 "Space Grotesk",sans-serif;
    letter-spacing:.08em;
    background:transparent;
    transition:color .2s;
}

.dd-ghost:hover{ color:#fff; }


/* ---------- Toast ---------- */

.dd-toast{
    position:fixed;
    left:50%;
    bottom:100px;
    z-index:2100;
    padding:14px 24px;
    border-radius:99px;
    font-size:14px;
    font-weight:600;
    color:#fff;
    background:rgba(20,16,50,.95);
    border:1px solid rgba(255,255,255,.18);
    box-shadow:0 14px 40px rgba(0,0,0,.5);
    opacity:0;
    pointer-events:none;
    transform:translate(-50%,16px);
    transition:opacity .25s,transform .25s;
}

.dd-toast.is-visible{ opacity:1; transform:translate(-50%,0); }


/* ---------- Mobile ---------- */

@media(max-width:700px){
    .dd-hero{ padding:60px 16px 36px; }
    .dd-hero p{ font-size:16px; }
    .dd-inner{ width:calc(100% - 32px); padding-bottom:70px; }
    .dd-list{ gap:16px; }
    .dd-list::before{ left:19px; }
    .dd-item{ gap:12px; }
    .dd-avatar{ flex-basis:40px; width:40px; height:40px; font-size:16px; box-shadow:0 0 0 4px #161236; }
    .dd-bubble{ padding:16px 18px 18px; border-radius:4px 18px 18px 18px; }
    .dd-bubble p{ font-size:16px; }
    .dd-item:hover .dd-bubble{ transform:none; }
    .dd-form-page{ padding:76px 18px 30px; align-items:flex-start; }
    .dd-form-close{ top:14px; right:14px; width:44px; height:44px; }
    .dd-field input,.dd-field textarea{ padding:16px 18px; font-size:18px; }
    .dd-emoji-panel{ width:min(288px,calc(100vw - 60px)); }
}

@media(prefers-reduced-motion:reduce){
    .dd-aura span,.dd-form-bg span,.dd-item,.dd-done,.dd-done-icon{ animation:none; }
    .dd-form-page,.dd-bubble,.dd-cta{ transition:none; }
}