/* ================================================================
   AFDIAG Cookie Manager v2 — Styles
   Couleurs : Rouge #E30613 | Bleu canard #274C5B | Gris #1d2130 | Rose #fce6e7
   ================================================================ */

:root {
  --afdiag-red:       #E30613;
  --afdiag-red-dark:  #b8040f;
  --afdiag-teal:      #274C5B;
  --afdiag-teal-dark: #1a3340;
  --afdiag-dark:      #1d2130;
  --afdiag-pink:      #fce6e7;
  --afdiag-white:     #ffffff;
  --afdiag-grey-light:#f4f5f7;
  --afdiag-grey-mid:  #e2e5ea;
  --afdiag-radius:    14px;
  --afdiag-shadow:    0 -4px 32px rgba(29,33,48,.13);
  --afdiag-z-banner:  99980;
  --afdiag-z-float:   99985;
  --afdiag-z-modal:   99990;
}

/* ================================================================
   BANDEAU BAS DE PAGE
   ================================================================ */
#afdiag-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: var(--afdiag-z-banner);
  background: var(--afdiag-white);
  border-top: 4px solid var(--afdiag-red);
  box-shadow: var(--afdiag-shadow);
  animation: afdiagSlideUp .35s cubic-bezier(.22,.61,.36,1);
}

#afdiag-banner[hidden] { display: none; }

@keyframes afdiagSlideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

#afdiag-banner-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 24px 18px;
}

/* ---- En-tête bandeau ----------------------------------------- */
#afdiag-banner-top {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
}

#afdiag-banner-icon {
  font-size: 32px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

#afdiag-banner-content { flex: 1; }

#afdiag-banner-title {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  color: var(--afdiag-dark);
  line-height: 1.3;
}

#afdiag-banner-text {
  margin: 0 0 8px;
  font-size: 14px;
  color: #4a4f63;
  line-height: 1.6;
}

#afdiag-banner-privacy {
  font-size: 13px;
  color: var(--afdiag-teal);
  text-decoration: underline;
  transition: color .15s;
}
#afdiag-banner-privacy:hover { color: var(--afdiag-red); }

/* ---- Panneau préférences avancées ---------------------------- */
#afdiag-prefs-panel {
  border: 1px solid var(--afdiag-grey-mid);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 16px;
  animation: afdiagFadeIn .2s ease;
}

#afdiag-prefs-panel[hidden] { display: none; }

.afdiag-cat {
  background: var(--afdiag-grey-light);
  border-bottom: 1px solid var(--afdiag-grey-mid);
  padding: 12px 16px;
}
.afdiag-cat:last-child { border-bottom: none; }

.afdiag-cat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.afdiag-cat-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.afdiag-cat-info strong {
  font-size: 14px;
  color: var(--afdiag-dark);
}

.afdiag-cat-info span {
  font-size: 12px;
  color: #666;
  line-height: 1.4;
}

.afdiag-always-active {
  font-size: 12px;
  font-weight: 600;
  color: var(--afdiag-teal);
  background: rgba(39,76,91,.1);
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Toggle switch */
.afdiag-toggle {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 26px;
  flex-shrink: 0;
  cursor: pointer;
}

.afdiag-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.afdiag-slider {
  position: absolute;
  inset: 0;
  background: #ccc;
  border-radius: 26px;
  transition: background .25s;
}

.afdiag-slider::before {
  content: '';
  position: absolute;
  width: 20px; height: 20px;
  left: 3px; bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: transform .25s;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}

.afdiag-toggle input:checked + .afdiag-slider {
  background: var(--afdiag-red);
}

.afdiag-toggle input:checked + .afdiag-slider::before {
  transform: translateX(20px);
}

.afdiag-toggle input:focus-visible + .afdiag-slider {
  outline: 3px solid #ffcc00;
  outline-offset: 2px;
}

/* ---- Boutons du bandeau -------------------------------------- */
#afdiag-banner-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* ================================================================
   BOUTONS GLOBAUX
   ================================================================ */
.afdiag-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, transform .1s, box-shadow .15s;
  outline-offset: 3px;
  white-space: nowrap;
}

.afdiag-btn:hover  { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,.15); }
.afdiag-btn:active { transform: translateY(0); box-shadow: none; }
.afdiag-btn:focus-visible { outline: 3px solid #ffcc00; }
.afdiag-btn[hidden] { display: none !important; }

/* Accepter → fond Rouge AFDIAG */
.afdiag-btn-accept {
  background: var(--afdiag-red);
  color: var(--afdiag-white);
}
.afdiag-btn-accept:hover { background: var(--afdiag-red-dark); }

/* Refuser → fond Rose clair, texte foncé */
.afdiag-btn-reject {
  background: var(--afdiag-pink);
  color: var(--afdiag-dark);
  border: 1px solid #f5c0c3;
}
.afdiag-btn-reject:hover { background: #f9d0d2; }

/* Personnaliser / Fermer → Bleu canard foncé outline */
.afdiag-btn-customize {
  background: transparent;
  color: var(--afdiag-teal);
  border: 1.5px solid var(--afdiag-teal);
}
.afdiag-btn-customize:hover {
  background: var(--afdiag-teal);
  color: white;
}

/* Enregistrer préférences → Bleu canard plein */
.afdiag-btn-save {
  background: var(--afdiag-teal);
  color: white;
}
.afdiag-btn-save:hover { background: var(--afdiag-teal-dark); }

/* ================================================================
   BOUTON FLOTTANT
   ================================================================ */
#afdiag-floating-btn {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: var(--afdiag-z-float);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--afdiag-teal);
  color: white;
  border: none;
  border-radius: 50px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(39,76,91,.4);
  transition: background .2s, transform .15s, box-shadow .2s;
}

#afdiag-floating-btn[hidden] { display: none; }

#afdiag-floating-btn:hover {
  background: var(--afdiag-teal-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(39,76,91,.45);
}

#afdiag-floating-btn:focus-visible {
  outline: 3px solid #ffcc00;
  outline-offset: 2px;
}

/* ================================================================
   MODALE PRÉFÉRENCES (depuis bouton flottant)
   ================================================================ */
#afdiag-modal {
  position: fixed;
  inset: 0;
  z-index: var(--afdiag-z-modal);
  background: rgba(29,33,48,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: afdiagFadeIn .2s ease;
  backdrop-filter: blur(3px);
}

#afdiag-modal[hidden] { display: none; }

@keyframes afdiagFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#afdiag-modal-box {
  background: white;
  border-radius: var(--afdiag-radius);
  box-shadow: 0 12px 48px rgba(0,0,0,.22);
  max-width: 540px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  animation: afdiagModalIn .25s cubic-bezier(.22,.61,.36,1);
}

@keyframes afdiagModalIn {
  from { opacity: 0; transform: translateY(20px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* Modal header — fond bleu canard */
#afdiag-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 24px 18px;
  background: linear-gradient(135deg, var(--afdiag-teal) 0%, var(--afdiag-teal-dark) 100%);
  border-radius: var(--afdiag-radius) var(--afdiag-radius) 0 0;
  color: white;
}

#afdiag-modal-title {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  color: white;
}

#afdiag-modal-close {
  position: absolute;
  top: 12px; right: 14px;
  background: rgba(255,255,255,.2);
  border: none;
  color: white;
  font-size: 22px;
  width: 32px; height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
#afdiag-modal-close:hover  { background: rgba(255,255,255,.35); }
#afdiag-modal-close:focus-visible { outline: 3px solid #ffcc00; }

#afdiag-modal-body {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.afdiag-modal-cat {
  border: 1px solid var(--afdiag-grey-mid);
  border-radius: 10px;
  overflow: hidden;
  background: var(--afdiag-grey-light);
}

.afdiag-modal-cat .afdiag-cat-header {
  padding: 12px 14px;
}

/* Liste cookies actifs */
#afdiag-modal-cookie-section {
  background: var(--afdiag-grey-light);
  border: 1px solid var(--afdiag-grey-mid);
  border-radius: 10px;
  padding: 12px 14px;
}

#afdiag-modal-cookie-title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #888;
}

#afdiag-modal-cookie-list {
  margin: 0; padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

#afdiag-modal-cookie-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-family: 'Courier New', monospace;
  color: var(--afdiag-dark);
  background: white;
  border: 1px solid var(--afdiag-grey-mid);
  border-radius: 6px;
  padding: 6px 10px;
  word-break: break-all;
}

#afdiag-modal-cookie-list li::before { content: '🍪'; flex-shrink: 0; }

.afdiag-no-cookies {
  font-size: 13px;
  color: #888;
  font-style: italic;
}

/* Message feedback */
#afdiag-modal-msg {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
}
#afdiag-modal-msg[hidden] { display: none; }
#afdiag-modal-msg.success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
#afdiag-modal-msg.error   { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

/* Modal footer */
#afdiag-modal-footer {
  padding: 14px 24px 22px;
  border-top: 1px solid var(--afdiag-grey-mid);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

#afdiag-modal-footer .afdiag-btn { flex: 1; min-width: 130px; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 600px) {
  #afdiag-banner-top { flex-direction: column; gap: 10px; }
  #afdiag-banner-icon { display: none; }
  #afdiag-banner-actions { flex-direction: column; }
  #afdiag-banner-actions .afdiag-btn { width: 100%; }

  #afdiag-floating-btn span { display: none; }
  #afdiag-floating-btn {
    padding: 13px;
    border-radius: 50%;
    bottom: 53px !important;
    left: 16px !important;
  }

  #afdiag-modal-footer { flex-direction: column; }
  #afdiag-modal-footer .afdiag-btn { width: 100%; }
}

/* ================================================================
   LISTE COOKIES ENRICHIE (avec rôle et description)
   ================================================================ */

#afdiag-modal-cookie-list li.afdiag-cookie-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 9px 12px;
  align-items: flex-start;
}

#afdiag-modal-cookie-list li.afdiag-cookie-item::before {
  display: none; /* on retire l'emoji générique, chaque catégorie a le sien */
}

.afdiag-cookie-name {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--afdiag-dark);
  word-break: break-all;
}

.afdiag-cookie-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.afdiag-cookie-cat {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(39,76,91,.1);
  color: var(--afdiag-teal);
  white-space: nowrap;
}

.afdiag-cookie-unknown {
  background: rgba(200,100,0,.1);
  color: #a05000;
}

.afdiag-cookie-desc {
  font-size: 11px;
  color: #777;
  line-height: 1.3;
}

/* Compteur de cookies */
#afdiag-modal-cookie-count {
  font-size: 12px;
  color: #999;
  font-weight: 400;
  margin-left: 6px;
}