/* ==========================================================================
   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;
}

/* Override any theme that resets [hidden] — must come early */
.acc-banner [hidden],
.acc-reopen-btn[hidden] {
    display: none !important;
}

.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 */
#acc-footer-custom .acc-btn--accept {
    border-radius: 0 0 var(--acc-radius) 0;
}

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

.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;
}

/* Barre de progression temporelle */
.acc-feedback::after {
    content:          '';
    position:         absolute;
    bottom:           0;
    left:             0;
    width:            100%;
    height:           3px;
    background:       var(--acc-primary);
    transform-origin: left center;
    animation:        acc-feedback-shrink 2.5s linear forwards;
}

@keyframes acc-feedback-shrink {
    from { transform: scaleX(1); }
    to   { transform: scaleX(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-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;
    }
}
/* ------------------------------------------------------------------
   Positionnement — bas droite
   ------------------------------------------------------------------ */
.acc-banner--bottom-right {
    left:  auto;
    right: 16px;
}

.acc-banner--bottom-right.acc-banner--hidden {
    transform: translateX(calc(100% + 30px));
}

/* ------------------------------------------------------------------
   Positionnement — centre (modal)
   ------------------------------------------------------------------ */
.acc-banner--center {
    left:       50%;
    bottom:     auto;
    top:        50%;
    transform:  translate(-50%, -50%);
    max-height: calc(100vh - 60px);
}

.acc-banner--center.acc-banner--hidden {
    transform: translate(-50%, -50%) scale(0.92);
    opacity:   0;
    pointer-events: none;
}

.acc-overlay {
    position:   fixed;
    inset:      0;
    background: rgba(0, 0, 0, 0.45);
    z-index:    999998;
    backdrop-filter: blur(2px);
}

/* ------------------------------------------------------------------
   Bouton flottant — cote droit
   ------------------------------------------------------------------ */
.acc-reopen-btn--right {
    left:  auto;
    right: 16px;
}

/* ------------------------------------------------------------------
   Bouton flottant — drag & drop cursor
   ------------------------------------------------------------------ */
.acc-reopen-btn { cursor: grab; }
.acc-reopen-btn:active { cursor: grabbing; }

/* ------------------------------------------------------------------
   Duree de conservation
   ------------------------------------------------------------------ */
.acc-duration-note {
    margin:      0;
    padding:     6px 20px 8px;
    font-size:   11px;
    color:       #9CA3AF;
    text-align:  center;
    flex-shrink: 0;
}

/* ------------------------------------------------------------------
   Liste de cookies (detail par categorie)
   ------------------------------------------------------------------ */
.acc-category-title-wrap {
    display:     flex;
    align-items: center;
    gap:         8px;
    flex:        1;
}

.acc-detail-toggle {
    background:   none;
    border:       none;
    font-size:    11px;
    color:        var(--acc-primary);
    cursor:       pointer;
    padding:      0;
    text-decoration: underline;
    white-space:  nowrap;
}

.acc-detail-arrow { display: inline-block; transition: transform 0.2s; }

.acc-cookie-list {
    margin-top: 8px;
    overflow-x: auto;
}

.acc-cookie-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       10px;
}

.acc-cookie-table th,
.acc-cookie-table td {
    padding:       4px 6px;
    border-bottom: 1px solid var(--acc-border);
    text-align:    left;
    vertical-align: top;
}

.acc-cookie-table th {
    font-weight: 600;
    color:       #9CA3AF;
    background:  rgba(0,0,0,0.02);
}

.acc-cookie-table code {
    font-size:     10px;
    background:    rgba(0,0,0,0.05);
    padding:       1px 3px;
    border-radius: 2px;
}

/* Categorie sans cookies declares */
.acc-category--nodecl .acc-category-header { opacity: 0.6; }

.acc-no-cookie-badge {
    font-size:     10px;
    padding:       2px 6px;
    background:    #F3F4F6;
    border-radius: 8px;
    color:         #9CA3AF;
    white-space:   nowrap;
}

/* ------------------------------------------------------------------
   Iframes bloquees — placeholder
   ------------------------------------------------------------------ */
.acc-iframe-placeholder {
    background:      #F9FAFB;
    border:          2px dashed var(--acc-border);
    border-radius:   8px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    min-height:      160px;
}

.acc-iframe-inner {
    text-align:  center;
    padding:     24px;
    max-width:   280px;
    color:       #9CA3AF;
}

.acc-iframe-inner svg { margin-bottom: 12px; opacity: 0.4; }

.acc-iframe-msg {
    font-size:     13px;
    line-height:   1.5;
    margin:        0 0 14px;
}

.acc-iframe-btn {
    display:       inline-block;
    padding:       8px 16px;
    border:        none;
    border-radius: 0 0 var(--acc-radius) var(--acc-radius);
    border-radius: 8px;
    font-size:     12px;
    font-weight:   600;
    cursor:        pointer;
}

/* ------------------------------------------------------------------
   Lien "Gerer mes cookies" (shortcode)
   ------------------------------------------------------------------ */
.acc-manage-link {
    color:           inherit;
    text-decoration: underline;
    cursor:          pointer;
}