/* ============================================================
   YJ Construire 2027 — Floating widget
   Palette : Construire pink (#EBB0C2) + YJ green-deep / terracotta
============================================================ */

.yj-construire{
    --yjc-pink:        #EBB0C2;   /* Construire theme color */
    --yjc-pink-deep:   #D88AA0;
    --yjc-pink-dark:   #8A3553;
    --yjc-ink:         #1A2620;
    --yjc-cream:       #FAF7EE;
    --yjc-green-deep:  #1B5E3D;   /* YJ identity */
    --yjc-terracotta:  #C75D3A;
    --yjc-display:     'Roboto', system-ui, sans-serif;
    --yjc-body:        'Poppins', system-ui, sans-serif;
    --yjc-ease:        cubic-bezier(.22,.61,.36,1);
    --yjc-ease-out:    cubic-bezier(.16,1,.3,1);

    position:fixed;
    bottom:24px;
    right:24px;
    z-index:2147483000;  /* very high — sit above GDPR banners, cookie popups, sticky headers, etc.
                            still below the Bluesky modal at 2147483600 */
    font-family:var(--yjc-body);
    color:var(--yjc-ink);
    pointer-events:none;
    /* Initially hidden — JS adds [data-state="expanded"] or "collapsed" after delay */
}

.yj-construire *,
.yj-construire *::before,
.yj-construire *::after{
    box-sizing:border-box;
}

/* ============ STATES ============ */
/* Default hidden state */
.yj-construire[data-state="hidden"] .yj-construire__card,
.yj-construire[data-state="hidden"] .yj-construire__pill{
    opacity:0;
    transform:translateY(40px) scale(.92);
    visibility:hidden;
    pointer-events:none;
}

/* Expanded : full popup card visible, pill hidden */
.yj-construire[data-state="expanded"] .yj-construire__card{
    opacity:1;
    transform:translateY(0) scale(1);
    visibility:visible;
    pointer-events:auto;
}
.yj-construire[data-state="expanded"] .yj-construire__pill{
    opacity:0;
    transform:translateY(20px) scale(.8);
    visibility:hidden;
    pointer-events:none;
}

/* Collapsed : pill visible, card hidden */
.yj-construire[data-state="collapsed"] .yj-construire__card{
    opacity:0;
    transform:translateY(20px) scale(.92);
    visibility:hidden;
    pointer-events:none;
}
.yj-construire[data-state="collapsed"] .yj-construire__pill{
    opacity:1;
    transform:translateY(0) scale(1);
    visibility:visible;
    pointer-events:auto;
}

/* ============ POPUP CARD ============ */
.yj-construire__card{
    position:relative;
    width:280px;
    max-width:calc(100vw - 48px);
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    box-shadow:
        0 20px 44px -18px rgba(216,138,160,.5),
        0 12px 24px -14px rgba(27,94,61,.22),
        0 6px 14px -6px rgba(0,0,0,.16);
    transition:
        opacity .5s var(--yjc-ease-out),
        transform .6s var(--yjc-ease-out),
        visibility .5s var(--yjc-ease-out),
        box-shadow .5s var(--yjc-ease);
}
.yj-construire__card:hover{
    box-shadow:
        0 26px 52px -18px rgba(216,138,160,.6),
        0 16px 32px -14px rgba(27,94,61,.28),
        0 10px 18px -6px rgba(0,0,0,.2);
}

/* Top visual band — full image (CONSTRUIRE logo with pastel pink/green gradient) */
.yj-construire__visual{
    position:relative;
    width:100%;
    aspect-ratio:705 / 263;  /* matches the source image ratio */
    overflow:hidden;
    background:linear-gradient(135deg, #F5C5CE 0%, #C3DBC1 100%); /* fallback while image loads */
}
.yj-construire__visual-img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    transition:transform .8s var(--yjc-ease);
}
.yj-construire__card:hover .yj-construire__visual-img{
    transform:scale(1.04);
}

/* Close button (×) — sits over the visual band */
.yj-construire__close{
    position:absolute;
    top:8px;
    right:8px;
    width:34px;
    height:34px;
    background:rgba(255,255,255,.95);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    border:1px solid rgba(26,38,32,.15);
    border-radius:50%;
    color:var(--yjc-ink);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:10;                /* sit above the image at all times */
    pointer-events:auto;       /* explicit so it stays clickable */
    box-shadow:
        0 4px 10px -2px rgba(0,0,0,.18),
        0 2px 4px -1px rgba(0,0,0,.12);
    transition:transform .35s var(--yjc-ease),
               background .35s var(--yjc-ease),
               border-color .35s var(--yjc-ease),
               color .35s var(--yjc-ease);
    /* Reset any inherited button styles from themes */
    font:inherit;
    padding:0;
    margin:0;
    outline:none;
    appearance:none;
    -webkit-appearance:none;
}
.yj-construire__close:hover{
    background:var(--yjc-pink-dark);
    border-color:var(--yjc-pink-dark);
    color:#fff;
    transform:rotate(90deg) scale(1.08);
}
.yj-construire__close:active{
    transform:rotate(90deg) scale(.96);
}
.yj-construire__close svg{
    width:14px; height:14px;
    pointer-events:none;       /* so clicks go to the button, not the svg */
}

/* Body */
.yj-construire__body{
    padding:14px 18px 18px;
}
.yj-construire__eyebrow{
    display:inline-flex;
    align-items:center;
    gap:7px;
    font-family:var(--yjc-body);
    font-size:9.5px;
    font-weight:600;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--yjc-pink-dark);
    margin-bottom:8px;
}
.yj-construire__eyebrow-dot{
    width:5px;
    height:5px;
    border-radius:50%;
    background:var(--yjc-pink);
    box-shadow:0 0 0 3px rgba(235,176,194,.3);
    animation:yjcPulse 2.4s ease-in-out infinite;
}
@keyframes yjcPulse{
    0%,100%{ box-shadow:0 0 0 3px rgba(235,176,194,.3); }
    50%{    box-shadow:0 0 0 6px rgba(235,176,194,.05); }
}

.yj-construire__title{
    font-family:var(--yjc-display);
    font-size:17px;
    font-weight:900;
    line-height:1.15;
    letter-spacing:-.018em;
    color:var(--yjc-ink);
    margin:0 0 8px;
}
.yj-construire__title span{
    position:relative;
    display:inline-block;
    color:var(--yjc-green-deep);
    white-space:nowrap;
}
.yj-construire__title span::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-0.1em;
    height:.09em;
    background:var(--yjc-pink);
    border-radius:2px;
}
.yj-construire__desc{
    font-family:var(--yjc-body);
    font-size:12.5px;
    line-height:1.5;
    color:var(--yjc-ink);
    margin:0 0 14px;
    opacity:.88;
}
.yj-construire__desc strong{
    color:var(--yjc-green-deep);
    font-weight:600;
}

/* CTA */
.yj-construire__cta{
    display:inline-flex;
    align-items:center;
    gap:7px;
    width:100%;
    justify-content:center;
    padding:10px 16px;
    background:var(--yjc-green-deep);
    color:#fff;
    text-decoration:none;
    border-radius:4px;
    font-family:var(--yjc-body);
    font-size:12.5px;
    font-weight:600;
    letter-spacing:.01em;
    box-shadow:0 10px 20px -10px rgba(27,94,61,.5);
    transition:transform .35s var(--yjc-ease),
               box-shadow .35s var(--yjc-ease),
               background .35s var(--yjc-ease);
    position:relative;
    overflow:hidden;
    isolation:isolate;
    box-sizing:border-box;
}
.yj-construire__cta::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg, var(--yjc-pink-dark), var(--yjc-pink-deep));
    transform:translateY(100%);
    transition:transform .45s var(--yjc-ease-out);
    z-index:-1;
}
.yj-construire__cta:hover{
    transform:translateY(-2px);
    color:#fff;
    box-shadow:0 14px 28px -12px rgba(138,53,83,.55);
}
.yj-construire__cta:hover::before{ transform:translateY(0); }
.yj-construire__cta svg{
    width:12px; height:12px;
    transition:transform .35s var(--yjc-ease);
}
.yj-construire__cta:hover svg{ transform:translate(3px,-3px); }

.yj-construire__url{
    margin-top:8px;
    text-align:center;
    font-family:var(--yjc-body);
    font-size:10.5px;
    font-weight:500;
    letter-spacing:.04em;
    color:var(--yjc-pink-dark);
    opacity:.7;
}

/* ============ COLLAPSED PILL ============ */
.yj-construire__pill{
    /* Pinned to the bottom-right of the fixed wrapper, so when the card
       collapses the pill sits exactly where the popup's bottom-right was —
       instead of where the card's top-right used to be (which would put it
       higher up on the screen). */
    position:absolute;
    right:0;
    bottom:0;

    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 16px 10px 14px;
    background:#fff;
    border:1px solid var(--yjc-pink);
    border-radius:999px;
    font-family:var(--yjc-body);
    font-size:12.5px;
    font-weight:600;
    color:var(--yjc-ink);
    cursor:pointer;
    box-shadow:
        0 14px 28px -14px rgba(216,138,160,.55),
        0 6px 14px -8px rgba(0,0,0,.18);
    transition:
        opacity .45s var(--yjc-ease-out),
        transform .5s var(--yjc-ease-out),
        visibility .45s var(--yjc-ease-out),
        box-shadow .35s var(--yjc-ease),
        border-color .35s var(--yjc-ease);
    white-space:nowrap;
}
.yj-construire__pill:hover{
    transform:translateY(-2px) !important;
    border-color:var(--yjc-pink-deep);
    box-shadow:
        0 20px 36px -14px rgba(216,138,160,.65),
        0 10px 18px -8px rgba(0,0,0,.22);
}
.yj-construire__pill-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    border-radius:50%;
    background:linear-gradient(135deg, var(--yjc-pink), var(--yjc-pink-deep));
    color:#fff;
}
.yj-construire__pill-icon svg{ width:13px; height:13px; }
.yj-construire__pill-text{ line-height:1; }
.yj-construire__pill-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--yjc-pink);
    box-shadow:0 0 0 4px rgba(235,176,194,.3);
    animation:yjcPulse 2.4s ease-in-out infinite;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 600px){
    .yj-construire{
        bottom:16px;
        right:16px;
    }
    .yj-construire__card{
        width:260px;
        max-width:calc(100vw - 32px);
    }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce){
    .yj-construire__card,
    .yj-construire__pill,
    .yj-construire__eyebrow-dot,
    .yj-construire__pill-dot{
        animation:none !important;
        transition:opacity .2s linear, visibility .2s linear !important;
    }
}