/* ==========================================================================
   ACConsent — Styles de la banniere frontend
   ========================================================================== */

:root {
    --acc-primary:    #3B82F6;
    --acc-bg:         #FFFFFF;
    --acc-text:       #1F2937;
    --acc-refuse-bg:  #F3F4F6;
    --acc-refuse-tx:  #374151;
    --acc-toggle-bg:  #3B82F6;
    --acc-border:     #E5E7EB;
    --acc-radius:     16px;
    --acc-shadow:     0 2px 6px rgba(0,0,0,0.08), 0 10px 40px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.06);
    --acc-transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --acc-font:       -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.acc-banner,
.acc-banner * {
    box-sizing:  border-box;
    font-family: var(--acc-font);
    line-height: 1.5;
}

/* ------------------------------------------------------------------
   Banniere principale
   ------------------------------------------------------------------ */
.acc-banner {
    position:       fixed;
    bottom:         80px;
    left:           16px;
    z-index:        999999;
    width:          360px;
    max-height:     calc(100vh - 110px);
    background:     var(--acc-bg);
    border-radius:  var(--acc-radius);
    box-shadow:     var(--acc-shadow);
    display:        flex;
    flex-direction: column;
    overflow:       hidden;
    color:          var(--acc-text);
    transform:      translateX(0);
    opacity:        1;
    transition:     transform var(--acc-transition), opacity var(--acc-transition);
}

.acc-banner.acc-banner--hidden {
    transform:      translateX(calc(-100% - 30px));
    opacity:        0;
    pointer-events: none;
}

/* ------------------------------------------------------------------
   En-tete
   ------------------------------------------------------------------ */
.acc-header {
    display:     flex;
    align-items: center;
    gap:         10px;
    padding:     20px 20px 12px;
    flex-shrink: 0;
}

.acc-icon {
    color:       var(--acc-primary);
    flex-shrink: 0;
    display:     flex;
    align-items: center;
}

.acc-title {
    margin:      0;
    font-size:   16px;
    font-weight: 700;
    color:       var(--acc-text);
    line-height: 1.3;
}

/* ------------------------------------------------------------------
   Corps scrollable
   ------------------------------------------------------------------ */
.acc-body {
    padding:    0 20px 12px;
    overflow-y: auto;
    flex:       1;
}

.acc-body::-webkit-scrollbar { width: 4px; }
.acc-body::-webkit-scrollbar-track { background: transparent; }
.acc-body::-webkit-scrollbar-thumb { background: var(--acc-border); border-radius: 4px; }

.acc-text {
    margin:      0 0 12px;
    font-size:   13px;
    color:       var(--acc-text);
    line-height: 1.7;
}

.acc-privacy-link {
    color:           var(--acc-primary);
    text-decoration: underline;
    font-weight:     500;
}

.acc-privacy-link:hover { opacity: 0.8; }

/* ------------------------------------------------------------------
   Categories (section Personnaliser)
   ------------------------------------------------------------------ */
.acc-categories {
    border:        1px solid var(--acc-border);
    border-radius: 10px;
    overflow:      hidden;
    margin-bottom: 10px;
}

.acc-category { padding: 12px 14px; }
.acc-category + .acc-category { border-top: 1px solid var(--acc-border); }

.acc-category-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             8px;
}

.acc-category-label {
    font-size:   13px;
    font-weight: 600;
    color:       var(--acc-text);
    cursor:      default;
}

.acc-category-desc {
    margin:      6px 0 0;
    font-size:   11px;
    color:       #6B7280;
    line-height: 1.5;
}

/* ------------------------------------------------------------------
   Toggle switch
   ------------------------------------------------------------------ */
.acc-switch {
    position:    relative;
    display:     inline-block;
    width:       40px;
    height:      22px;
    flex-shrink: 0;
    cursor:      pointer;
}

.acc-switch input {
    opacity:  0;
    width:    0;
    height:   0;
    position: absolute;
}

.acc-switch-slider {
    position:      absolute;
    inset:         0;
    background:    #D1D5DB;
    border-radius: 34px;
    transition:    background var(--acc-transition);
    box-shadow:    inset 0 1px 3px rgba(0,0,0,0.15);
}

.acc-switch-slider::before {
    content:       '';
    position:      absolute;
    height:        16px;
    width:         16px;
    left:          3px;
    bottom:        3px;
    background:    #FFFFFF;
    border-radius: 50%;
    box-shadow:    0 1px 3px rgba(0,0,0,0.2);
    transition:    transform var(--acc-transition);
}

.acc-switch input:checked + .acc-switch-slider { background: var(--acc-primary); }
.acc-switch input:checked + .acc-switch-slider::before { transform: translateX(18px); }
.acc-switch input:focus-visible + .acc-switch-slider {
    outline:        2px solid var(--acc-primary);
    outline-offset: 2px;
}

.acc-switch--disabled { cursor: not-allowed; opacity: 0.5; }
.acc-switch-slider--fixed { background: var(--acc-primary) !important; }
.acc-switch-slider--fixed::before { transform: translateX(18px); }

/* ------------------------------------------------------------------
   Pied de page — boutons
   ------------------------------------------------------------------ */
.acc-footer {
    display:     flex;
    border-top:  1px solid var(--acc-border);
    flex-shrink: 0;
}

.acc-footer--custom {
    border-top: 2px solid var(--acc-primary);
}

.acc-btn {
    flex:           1;
    padding:        14px 6px;
    border:         none;
    background:     transparent;
    font-size:      12px;
    font-weight:    600;
    cursor:         pointer;
    letter-spacing: 0.3px;
    transition:     background var(--acc-transition), opacity 0.2s;
    line-height:    1.3;
}

.acc-btn:focus-visible {
    outline:        2px solid var(--acc-primary);
    outline-offset: -2px;
}

.acc-btn--refuse {
    color:         var(--acc-refuse-tx);
    background:    var(--acc-refuse-bg);
    border-radius: 0 0 0 var(--acc-radius);
}

.acc-btn--refuse:hover { filter: brightness(0.95); }

.acc-btn--customize {
    color:        var(--acc-refuse-tx);
    background:   var(--acc-refuse-bg);
    border-left:  1px solid var(--acc-border);
    border-right: 1px solid var(--acc-border);
}

.acc-btn--customize:hover { filter: brightness(0.95); }

.acc-btn--accept {
    color:         #FFFFFF;
    background:    var(--acc-primary);
    border-radius: 0 0 var(--acc-radius) 0;
}

.acc-btn--accept:hover { filter: brightness(1.1); }

/* Bouton Retour (mode personnalisation) */
.acc-btn--back {
    color:         var(--acc-refuse-tx);
    background:    var(--acc-refuse-bg);
    border-radius: 0 0 0 var(--acc-radius);
    border-right:  1px solid var(--acc-border);
}

.acc-btn--back:hover { filter: brightness(0.95); }

/* Valider mes choix — meme style que Accept mais sans border-radius gauche */
#acc-footer-custom .acc-btn--accept {
    border-radius: 0 0 var(--acc-radius) 0;
}

/* ------------------------------------------------------------------
   Panneau feedback visiteur
   ------------------------------------------------------------------ */
.acc-feedback {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    justify-content: center;
    padding:        32px 24px;
    text-align:     center;
    min-height:     220px;
    flex:           1;
}

.acc-feedback-icon {
    font-size:     42px;
    line-height:   1;
    margin-bottom: 14px;
    color:         var(--acc-primary);
}

.acc-feedback-title {
    margin:      0 0 14px;
    font-size:   16px;
    font-weight: 700;
    color:       var(--acc-text);
}

.acc-feedback-list {
    list-style: none;
    padding:    0;
    margin:     0 0 14px;
    text-align: left;
    width:      100%;
    max-width:  200px;
}

.acc-feedback-list li {
    padding:     4px 0;
    font-size:   13px;
    font-weight: 500;
}

.acc-feedback-yes { color: #059669; }
.acc-feedback-no  { color: #DC2626; }

.acc-feedback-hint {
    font-size:   11px;
    color:       #9CA3AF;
    margin:      0;
}

/* ------------------------------------------------------------------
   Bouton flottant de reouverture
   ------------------------------------------------------------------ */
.acc-reopen-btn {
    position:        fixed;
    bottom:          16px;
    left:            16px;
    z-index:         999998;
    width:           46px;
    height:          46px;
    border:          none;
    border-radius:   50%;
    background:      var(--acc-toggle-bg);
    color:           #FFFFFF;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    box-shadow:      0 3px 12px rgba(0, 0, 0, 0.25);
    transition:      transform 0.2s, box-shadow 0.2s, opacity 0.3s;
    opacity:         0.85;
    overflow:        hidden;
    padding:         0;
}

.acc-reopen-btn:hover {
    transform:  scale(1.1);
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.3);
    opacity:    1;
}

.acc-reopen-btn:focus-visible {
    outline:        2px solid #FFFFFF;
    outline-offset: 2px;
}

.acc-reopen-btn[hidden] { display: none; }

.acc-reopen-img {
    width:      46px;
    height:     46px;
    object-fit: cover;
    display:    block;
}

/* ------------------------------------------------------------------
   Responsive — mobile
   ------------------------------------------------------------------ */
@media (max-width: 420px) {
    .acc-banner {
        width:         calc(100vw - 16px);
        left:          8px;
        bottom:        70px;
        border-radius: 12px;
    }

    .acc-banner.acc-banner--hidden {
        transform: translateY(calc(100% + 20px));
    }

    .acc-btn {
        font-size: 11px;
        padding:   12px 4px;
    }
}