body { font-family: 'Raleway', sans-serif; background-color: #ffffff; color: #111827; }
        html,
body{
    overflow-x:hidden;
    width:100%;
}
        .hide-scrollbar::-webkit-scrollbar { display: none; }
        .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
       
        @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes pulseSlow { 0%, 100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.1); } }
       
        .animate-fade-in-up { animation: fadeInUp 0.4s ease-out forwards; }
        .animate-fade-in-down { animation: fadeInDown 0.4s ease-out forwards; }
        .animate-pulse-slow { animation: pulseSlow 10s ease-in-out infinite; }

        /* Animation de défilement des tableaux à l'accueil (5s d'affichage, 3s d'attente) */

        /* Animation Bandeau déroulant */
        @keyframes marquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        .animate-marquee {
            animation: marquee 30s linear infinite;
            display: flex;
            width: max-content;
        }
        .hover\:animation-play-state-paused:hover {
            animation-play-state: paused;
        }

/* ===== Etoile filante réaliste ===== */

.shooting-star{
    position:absolute;
    width:3px;
    height:3px;
    border-radius:50%;
    background:#fff;

    box-shadow:
        0 0 6px #fff,
        0 0 12px rgba(255,255,255,.9),
        0 0 20px rgba(180,220,255,.6);

    opacity:0;
}

.shooting-star::before{

    content:"";

    position:absolute;

    top:50%;
    left:2px;

    width:120px;
    height:1px;

    transform-origin:left center;

    /* la traînée pointe vers le coin supérieur droit */
    transform:
        translateY(-50%)
        rotate(-27deg);

    background:linear-gradient(
        to right,
        rgba(255,255,255,.95),
        rgba(180,220,255,.55),
        rgba(180,220,255,.20),
        transparent
    );

    filter:blur(1px);

    border-radius:999px;

}
@keyframes shootingStar{

    0%{

        opacity:0;

        transform:translate(0px,0px);

    }

    3%{

        opacity:1;

    }

    90%{

        opacity:1;

    }

    100%{

        opacity:0;

        transform:translate(calc(-100vw - 250px), calc(100vh + 250px));

    }

}
        .filter-grayscale { filter: grayscale(100%); }
        .group:hover .group-hover\:filter-none { filter: grayscale(0%); }

        .badge-vendu {
            position: absolute;
            bottom: 18px;
            left: 50%;
            transform: translateX(-50%);
            color: #ffffff;
            padding: 8px 22px;
            font-size: 0.68rem;
            font-family: 'Raleway', sans-serif;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.28em;
            border-radius: 999px;
            background: linear-gradient(135deg, rgba(11,19,43,0.94), rgba(30,64,175,0.90));
            border: 1px solid rgba(165,243,252,0.45);
            box-shadow:
                0 8px 24px rgba(11,19,43,0.35),
                0 0 18px rgba(34,211,238,0.14),
                inset 0 1px 0 rgba(255,255,255,0.16);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            pointer-events: none;
            z-index: 10;
            white-space: nowrap;
        }

        .badge-vendu::before,
        .badge-vendu::after {
            content: "✦";
            color: rgba(165,243,252,0.9);
            font-size: 0.62rem;
            vertical-align: 1px;
        }

        .badge-vendu::before {
            margin-right: 10px;
        }

        .badge-vendu::after {
            margin-left: 10px;
        }
/* Éditeur riche — Dans l’atelier */
.editor-tool{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;color:#0B132B;background:#fff;border:1px solid #e5e7eb;cursor:pointer;transition:all .15s ease}
.editor-tool:hover{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8}
.editor-select{height:34px;border:1px solid #e5e7eb;border-radius:8px;background:#fff;color:#374151;padding:0 8px;font-size:12px;cursor:pointer}
#admin-atelier-editor:empty:before{content:attr(data-placeholder);color:#9ca3af;pointer-events:none}
.atelier-rich-content img{max-width:100%;height:auto;margin:1.25rem auto;display:block;border-radius:.75rem}
.atelier-rich-content p{margin:.75rem 0}
.atelier-rich-content ul{list-style:disc;padding-left:1.5rem;margin:.75rem 0}
.atelier-rich-content ol{list-style:decimal;padding-left:1.5rem;margin:.75rem 0}
.atelier-rich-content a{color:#1d4ed8;text-decoration:underline}

.editor-font-select{min-width:170px;max-width:220px}
.editor-size-wrap{height:34px;display:inline-flex;align-items:center;gap:4px;padding:0 6px;border:1px solid #e5e7eb;border-radius:8px;background:#fff;color:#6b7280;font-size:11px}
.editor-size-input{width:52px;height:26px;border:1px solid #d1d5db;border-radius:6px;text-align:center;font-size:12px;color:#111827;background:#fff}
.editor-size-input:focus{outline:2px solid #bfdbfe;outline-offset:1px}
.editor-tool-wide{width:38px!important}
.atelier-image-object{position:relative;display:block;width:max-content;max-width:100%;margin:1rem 0;line-height:0;cursor:move;user-select:none}
.atelier-image-object img{display:block;max-width:100%;height:auto;margin:0;border-radius:.75rem}
.atelier-image-object.is-selected{outline:2px solid #38bdf8;outline-offset:3px}
.atelier-image-resize{position:absolute;right:-6px;bottom:-6px;width:14px;height:14px;border-radius:3px;background:#0ea5e9;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.25);cursor:nwse-resize;z-index:3}
.atelier-rich-content .atelier-image-object{max-width:100%}
.atelier-rich-content .atelier-image-object img{margin:0}

/* Les contrôles de l’éditeur ne doivent jamais apparaître côté public. */
.atelier-rich-content .atelier-image-object{outline:none!important;cursor:default!important;display:block;position:relative}
.atelier-rich-content .atelier-image-resize{display:none!important}
.atelier-rich-content .atelier-image-object.is-selected{outline:none!important}
.atelier-rich-content .atelier-image-object img{pointer-events:auto}

.editor-tool.is-active{background:#0B132B!important;color:#fff!important;border-color:#0B132B!important;box-shadow:0 0 0 2px rgba(34,211,238,.18)}
.editor-tool:focus-visible,.editor-select:focus-visible{outline:2px solid #22d3ee;outline-offset:1px}
.atelier-image-object{position:relative}
#admin-atelier-editor{position:relative;min-height:500px}

.editor-delete-tool{color:#b91c1c}
.editor-delete-tool:hover{background:#fef2f2!important;border-color:#fecaca!important;color:#991b1b!important}

/* Empêche les mots ou chaînes très longues de sortir du cadre sur la page publique. */
.atelier-rich-content{
    max-width:100%;
    min-width:0;
    overflow-wrap:anywhere;
    word-break:break-word;
}
.atelier-rich-content *{
    max-width:100%;
    box-sizing:border-box;
}
.atelier-rich-content p,
.atelier-rich-content li,
.atelier-rich-content div,
.atelier-rich-content span{
    overflow-wrap:anywhere;
    word-break:break-word;
}

/* WYSIWYG : la zone d'édition reprend exactement les dimensions typographiques de la page publique. */
.atelier-admin-preview-shell{
    background:#fff;
    border:1px solid #dbeafe;
    border-radius:1.5rem;
    box-shadow:0 12px 30px rgba(11,19,43,.05);
    padding:2rem;
    overflow:visible;
}
.atelier-editor-surface{
    width:100%;
    max-width:64rem;
    margin:0 auto;
    min-height:560px;
    padding:3.5rem;
    outline:none;
    box-sizing:border-box;
    overflow-wrap:anywhere;
    word-break:break-word;
}
.atelier-editor-surface:empty:before{
    content:attr(data-placeholder);
    color:#9ca3af;
    pointer-events:none;
}
.atelier-editor-surface p,.atelier-editor-surface div,.atelier-editor-surface li,.atelier-editor-surface span{
    overflow-wrap:anywhere;
    word-break:break-word;
}
@media (max-width:767px){
    .atelier-admin-preview-shell{padding:1rem}
    .atelier-editor-surface{padding:2rem 1.5rem;min-height:420px}
}

/* Les images de l'éditeur utilisent le même flux que la page publique : elles ne peuvent pas recouvrir le texte. */
.atelier-editor-surface .atelier-image-object{
    display:block;
    width:max-content;
    max-width:100%;
    margin-top:0;
    margin-bottom:1.25rem;
    line-height:0;
    transform:none;
}
.atelier-editor-surface .atelier-image-object img{
    display:block;
    max-width:none;
    height:auto;
    margin:0;
}

/* =========================================================
   ÉDITEUR PRINCIPAL — aperçu 1:1 de la page publique
   ========================================================= */
.atelier-admin-primary{width:100%}
.atelier-admin-primary > .bg-white{width:100%;border-radius:1.5rem}
.atelier-admin-primary .p-6{padding:0!important}
.atelier-admin-primary .flex.items-start.gap-3.mb-5{padding:1.5rem 2rem 0}
.atelier-admin-primary form{display:flex!important;flex-direction:column!important;gap:0!important}
.atelier-admin-primary .border.border-gray-200.rounded-xl.overflow-hidden.bg-white{
    border:0!important;border-radius:0!important;overflow:visible!important;
}
.atelier-admin-primary .border.border-gray-200.rounded-xl.overflow-hidden.bg-white > .flex{
    position:sticky;top:0;z-index:20;
    padding:.75rem 1rem!important;
    background:#f8fafc!important;
    border:1px solid #e5e7eb!important;
    border-radius:.75rem!important;
    box-shadow:0 4px 14px rgba(11,19,43,.08);
}
.atelier-admin-primary .atelier-editor-surface{
    width:100%;
    max-width:976px;
    min-height:1100px;
    margin:1.25rem auto 0;
    padding:56px;
    background:#fff;
    border:1px solid #dbeafe;
    border-radius:1.5rem;
    box-shadow:0 14px 35px rgba(11,19,43,.08);
    box-sizing:border-box;
    font-family:Georgia,serif;
    font-size:30px;
    line-height:1.625;
    color:#0B132B;
    text-align:left;
    overflow-wrap:anywhere;
    word-break:break-word;
}
.atelier-admin-primary .atelier-editor-surface p{margin:.75rem 0}
.atelier-admin-primary .atelier-editor-surface ul{list-style:disc;padding-left:1.5rem;margin:.75rem 0}
.atelier-admin-primary .atelier-editor-surface ol{list-style:decimal;padding-left:1.5rem;margin:.75rem 0}
.atelier-admin-primary .atelier-editor-surface .atelier-image-object{
    display:block;
    position:relative;
    width:max-content;
    max-width:100%;
    margin-top:0;
    margin-bottom:1.25rem;
    line-height:0;
    transform:none;
    cursor:move;
}
.atelier-admin-primary .atelier-editor-surface .atelier-image-object img{
    display:block;
    max-width:none;
    height:auto;
    margin:0;
}
.atelier-admin-primary .atelier-editor-surface .atelier-image-object.is-selected{
    outline:2px solid #22d3ee;
    outline-offset:4px;
}
.atelier-admin-primary .atelier-editor-surface .atelier-image-resize{display:block!important}
.atelier-admin-primary .text-\[11px\].text-gray-500{padding:0 2rem;margin:.75rem 0!important}
.atelier-admin-primary #admin-atelier-banner{margin:0 2rem 1rem;width:calc(100% - 4rem)}
.atelier-admin-primary form > button[type="submit"]{margin:0 2rem 1.5rem}
@media(max-width:767px){
    .atelier-admin-primary .atelier-editor-surface{
        min-height:700px;
        padding:28px 20px;
        font-size:24px;
    }
    .atelier-admin-primary .flex.items-start.gap-3.mb-5{padding:1rem}
    .atelier-admin-primary #admin-atelier-banner,
    .atelier-admin-primary form > button[type="submit"],
    .atelier-admin-primary .text-\[11px\].text-gray-500{margin-left:1rem;margin-right:1rem;width:calc(100% - 2rem)}
}

/* Correctif déplacement/redimensionnement des images dans l'éditeur */
.atelier-editor-surface .atelier-image-object{
    position:relative;
    left:0;
    top:0;
    transform:none;
    transition:none;
    cursor:move;
}
.atelier-editor-surface .atelier-image-object.is-selected{
    outline:2px solid #38bdf8;
    outline-offset:3px;
}
body.atelier-dragging{cursor:grabbing!important}
body.atelier-resizing{cursor:nwse-resize!important}
.atelier-editor-surface .atelier-image-object img{
    max-width:none;
    box-sizing:border-box;
}

/* Correctif ciblé du redimensionnement de l'éditeur */
.atelier-admin-primary .atelier-editor-surface .atelier-image-resize{
    display:block!important;
    pointer-events:auto!important;
    touch-action:none!important;
    user-select:none!important;
    -webkit-user-select:none!important;
}
.atelier-admin-primary .atelier-editor-surface .atelier-image-object img{
    box-sizing:border-box;
}

/* Icônes personnalisées NH3 Berry — remplacement ciblé */
.badge-vendu-image{
    position:absolute;
    bottom:10px;
    left:50%;
    transform:translateX(-50%);
    width:140px;
    height:auto;
    max-width:52%;
    object-fit:contain;
    pointer-events:none;
    z-index:10;
    display:block;
}
.atelier-pinceau-icon{
    width:55px;
    height:68px;
    object-fit:contain;
    display:block;
}
.admin-pinceau-icon{
    width:35px;
    height:43px;
    object-fit:contain;
    display:block;
}
.footer-contact-envelope{
    width:31px;
    height:28px;
    object-fit:contain;
    display:inline-block;
    margin-right:.5rem;
    vertical-align:middle;
}

/* Éditeur Atelier — couche de stabilité finale */
#admin-atelier-editor{
    user-select:text;
    -webkit-user-select:text;
    -webkit-user-modify:read-write;
    caret-color:#0B132B;
    cursor:text;
}
#admin-atelier-editor .atelier-image-object{
    user-select:none;
    -webkit-user-select:none;
    -webkit-user-modify:read-only;
    touch-action:none;
}
#admin-atelier-editor .atelier-image-object img{
    user-select:none;
    -webkit-user-select:none;
    -webkit-user-drag:none;
}
#admin-atelier-editor .atelier-image-resize{
    touch-action:none;
    user-select:none;
    -webkit-user-select:none;
}


/* --- Mobile : conserver les photos en couleurs (pas de survol sur écran tactile) --- */
@media (max-width: 767px) {
  .filter-grayscale,
  .group .filter-grayscale {
    filter: grayscale(0%) !important;
    -webkit-filter: grayscale(0%) !important;
  }

  .group-hover\:filter-none {
    filter: grayscale(0%) !important;
    -webkit-filter: grayscale(0%) !important;
  }
}