/* ═══════════════════════════════════════════════════════
   Cigales Cookie Consent v1.1.0
   Palette : bordeaux #8B2635, beige #F5EFE6
   ═══════════════════════════════════════════════════════ */

:root {
  --cc-primary:      #8B2635;
  --cc-primary-dk:   #6e1e29;
  --cc-bg:           #F5EFE6;
  --cc-bg-dk:        #EDE5D8;
  --cc-white:        #ffffff;
  --cc-text:         #2c2c2c;
  --cc-text-light:   #666666;
  --cc-border:       #D5C9BA;
  --cc-green:        #2a7a3a;
  --cc-green-bg:     #e6f4ea;
  --cc-radius:       10px;
  --cc-radius-lg:    14px;
  --cc-shadow:       0 -4px 20px rgba(0,0,0,.10);
  --cc-shadow-panel: 0 8px 40px rgba(0,0,0,.20);
  --cc-z:            99998;
  --cc-z-panel:      99999;
  --cc-ease:         .22s ease;
}

/* ─── Reset minimal ─────────────────────────────────── */
#cigales-cookie-banner *,
#cigales-cookie-panel * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ═══════════════════════════════════════════════════════
   BANDEAU
   ═══════════════════════════════════════════════════════ */
#cigales-cookie-banner {
  position:   fixed;
  bottom:     0;
  left:       0;
  right:      0;
  z-index:    var(--cc-z);
  background: var(--cc-bg);
  border-top: 3px solid var(--cc-primary);
  box-shadow: var(--cc-shadow);
  padding:    18px 24px;
  font-family: inherit;
  animation:  cc-slide-up .3s ease both;
}

@keyframes cc-slide-up {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes cc-slide-down {
  from { transform: translateY(0);    opacity: 1; }
  to   { transform: translateY(100%); opacity: 0; }
}

.cigales-banner-inner {
  max-width:   900px;
  margin:      0 auto;
  display:     flex;
  align-items: center;
  gap:         24px;
  flex-wrap:   wrap;
}

.cigales-banner-text {
  flex: 1 1 300px;
}

.cigales-banner-text p {
  font-size:   14px;
  line-height: 1.6;
  color:       var(--cc-text);
}

.cigales-banner-text strong {
  display:       block;
  margin-bottom: 4px;
  font-size:     15px;
  color:         var(--cc-primary);
}

.cigales-banner-text a {
  color:           var(--cc-primary);
  text-decoration: underline;
  font-size:       13px;
  white-space:     nowrap;
}

.cigales-banner-actions {
  display:    flex;
  gap:        10px;
  flex-shrink:0;
  flex-wrap:  wrap;
}

/* ═══════════════════════════════════════════════════════
   BOUTONS
   ═══════════════════════════════════════════════════════ */
.cigales-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  padding:         11px 22px;
  border-radius:   var(--cc-radius);
  font-size:       14px;
  font-weight:     600;
  cursor:          pointer;
  border:          2px solid var(--cc-primary);
  transition:      background var(--cc-ease), color var(--cc-ease), transform .1s ease;
  white-space:     nowrap;
  font-family:     inherit;
  line-height:     1;
  text-decoration: none;
}

.cigales-btn:focus-visible {
  outline:        3px solid var(--cc-primary);
  outline-offset: 3px;
}

.cigales-btn:active { transform: scale(.97); }

.cigales-btn-primary {
  background: var(--cc-primary);
  color:      var(--cc-white);
}
.cigales-btn-primary:hover { background: var(--cc-primary-dk); }

.cigales-btn-secondary {
  background: transparent;
  color:      var(--cc-primary);
}
.cigales-btn-secondary:hover { background: var(--cc-bg-dk); }

/* ═══════════════════════════════════════════════════════
   LIEN GÉRER MES COOKIES (shortcode footer)
   ═══════════════════════════════════════════════════════ */
.cigales-manage-link {
  background:      none;
  border:          none;
  padding:         0;
  cursor:          pointer;
  font-size:       inherit;
  color:           inherit;
  text-decoration: underline;
  font-family:     inherit;
  line-height:     inherit;
}
.cigales-manage-link:hover { color: var(--cc-primary); }
.cigales-manage-link:focus-visible {
  outline:        2px solid var(--cc-primary);
  outline-offset: 2px;
  border-radius:  2px;
}

/* ═══════════════════════════════════════════════════════
   PANNEAU DE GESTION
   ═══════════════════════════════════════════════════════ */
#cigales-cookie-panel {
  position:        fixed;
  inset:           0;
  z-index:         var(--cc-z-panel);
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.cigales-panel-overlay {
  position:   absolute;
  inset:      0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(3px);
  animation:  cc-fade-in .2s ease both;
}

@keyframes cc-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes cc-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.cigales-panel-inner {
  position:      relative;
  z-index:       1;
  background:    var(--cc-white);
  border-radius: var(--cc-radius-lg);
  box-shadow:    var(--cc-shadow-panel);
  padding:       32px 36px;
  max-width:     560px;
  width:         calc(100% - 32px);
  max-height:    90vh;
  overflow-y:    auto;
  animation:     cc-scale-in .25s ease both;
}

@keyframes cc-scale-in {
  from { transform: scale(.93); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* Bouton fermer */
.cigales-panel-close {
  position:      absolute;
  top:           14px;
  right:         16px;
  background:    none;
  border:        none;
  font-size:     20px;
  cursor:        pointer;
  color:         var(--cc-text-light);
  padding:       6px 10px;
  line-height:   1;
  border-radius: 6px;
  transition:    color var(--cc-ease), background var(--cc-ease);
}
.cigales-panel-close:hover {
  color:      var(--cc-primary);
  background: var(--cc-bg);
}

/* Titres et intro */
.cigales-panel-inner h2 {
  font-size:     20px;
  color:         var(--cc-primary);
  margin-bottom: 8px;
  padding-right: 36px;
}

.cigales-panel-intro {
  font-size:     13px;
  color:         var(--cc-text-light);
  line-height:   1.5;
  margin-bottom: 20px;
}

/* ─── Sections ──────────────────────────────────────── */
.cigales-panel-section {
  background:    var(--cc-bg);
  border:        1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  padding:       16px 18px;
  margin-bottom: 12px;
}

.cigales-panel-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             12px;
  margin-bottom:   10px;
}

.cigales-panel-label {
  font-size:   15px;
  font-weight: 700;
  color:       var(--cc-text);
}

.cigales-panel-desc {
  font-size:     13px;
  color:         var(--cc-text-light);
  line-height:   1.5;
  margin-bottom: 10px;
}

/* ─── Liste de cookies ──────────────────────────────── */
.cigales-cookie-list {
  list-style: none;
  font-size:  12px;
  color:      var(--cc-text-light);
  border-top: 1px solid var(--cc-border);
  padding-top:8px;
}
.cigales-cookie-list li {
  display:     flex;
  gap:         8px;
  align-items: baseline;
  padding:     4px 0;
  border-bottom: 1px solid rgba(0,0,0,.05);
}
.cigales-cookie-list li:last-child { border-bottom: none; }
.cigales-cookie-list code {
  background:    rgba(0,0,0,.07);
  padding:       1px 6px;
  border-radius: 4px;
  font-size:     11px;
  white-space:   nowrap;
  flex-shrink:   0;
}

/* ─── Badge "Toujours actifs" ───────────────────────── */
.cigales-badge-always {
  font-size:    12px;
  font-weight:  600;
  color:        var(--cc-green);
  background:   var(--cc-green-bg);
  padding:      4px 12px;
  border-radius:20px;
  white-space:  nowrap;
  flex-shrink:  0;
}

/* ─── Toggle switch ─────────────────────────────────── */
.cigales-toggle {
  position:    relative;
  display:     inline-flex;
  align-items: center;
  cursor:      pointer;
  flex-shrink: 0;
}

.cigales-toggle input[type="checkbox"] {
  position: absolute;
  opacity:  0;
  width:    1px;
  height:   1px;
}

.cigales-toggle-track {
  width:         52px;
  height:        28px;
  background:    var(--cc-border);
  border-radius: 14px;
  transition:    background var(--cc-ease);
  position:      relative;
  display:       block;
}

.cigales-toggle-thumb {
  position:      absolute;
  width:         22px;
  height:        22px;
  background:    var(--cc-white);
  border-radius: 50%;
  top:           3px;
  left:          3px;
  transition:    transform var(--cc-ease);
  box-shadow:    0 2px 4px rgba(0,0,0,.2);
}

.cigales-toggle input:checked ~ .cigales-toggle-track {
  background: var(--cc-primary);
}
.cigales-toggle input:checked ~ .cigales-toggle-track .cigales-toggle-thumb {
  transform: translateX(24px);
}

.cigales-toggle input:focus-visible ~ .cigales-toggle-track {
  outline:        3px solid var(--cc-primary);
  outline-offset: 2px;
}

/* ─── Actions du panneau ────────────────────────────── */
.cigales-panel-actions {
  display:    flex;
  gap:        10px;
  margin-top: 20px;
  flex-wrap:  wrap;
}
.cigales-panel-actions .cigales-btn {
  flex: 1 1 140px;
  justify-content: center;
}

.cigales-panel-policy {
  text-align: center;
  margin-top: 14px;
  font-size:  12px;
}
.cigales-panel-policy a {
  color:           var(--cc-text-light);
  text-decoration: underline;
}
.cigales-panel-policy a:hover { color: var(--cc-primary); }

/* ═══════════════════════════════════════════════════════
   RESPONSIVE MOBILE
   ═══════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  #cigales-cookie-banner { padding: 16px; }

  .cigales-banner-inner {
    flex-direction: column;
    align-items:    stretch;
    gap:            14px;
  }

  .cigales-banner-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .cigales-panel-inner {
    padding:       24px 18px;
    border-radius: var(--cc-radius);
  }

  .cigales-panel-actions {
    flex-direction: column;
  }

  .cigales-panel-actions .cigales-btn {
    flex: none;
    width: 100%;
  }
}