/* =======================================================
   © 2025 Pascal Evrard — Afondlacom'
   Fichier : /assets/css/cookies.css
   ======================================================= */

:root {
  --ck-bg: #ffffff;
  --ck-ink: #111111;
  --ck-muted: #444;
  --ck-accent: #f57d1b;             /* Couleur du site */
  --ck-radius: 14px;
  --ck-shadow: 0 8px 24px rgba(0,0,0,.10); /* ombre 10% */
  --ck-z: 99999;
  --ck-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* --- Bandeau OneTrust-like --- */
.ck-banner.onetrust-style {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: var(--ck-z);
  font-family: var(--ck-font);
  color: var(--ck-ink);
  background: transparent;
}
.ck-banner.onetrust-style .ck-card {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--ck-bg);
  border-radius: var(--ck-radius);
  box-shadow: var(--ck-shadow);
  padding: 18px 20px;
  width: 320px; max-width: 92vw;
  border: 1px solid rgba(0,0,0,.06);
}
.ck-banner.onetrust-style .ck-icon { font-size: 26px; line-height: 1; flex-shrink: 0; }
.ck-banner.onetrust-style .ck-title { font-weight: 700; font-size: 15px; margin: 0 0 6px; color: var(--ck-ink); }
.ck-banner.onetrust-style .ck-text  { font-size: 13px; color: var(--ck-muted); margin: 0 0 10px; line-height: 1.5; }
.ck-banner.onetrust-style .ck-actions { display: flex; flex-direction: column; gap: 8px; }
.ck-banner.onetrust-style .ck-btn {
  border: none; border-radius: 10px; font-weight: 700;
  padding: 10px 0; cursor: pointer; font-family: var(--ck-font);
  font-size: 13px; width: 100%; transition: all .15s ease-in-out;
}
.ck-banner.onetrust-style .ck-accept { background: var(--ck-accent); color: #fff; }
.ck-banner.onetrust-style .ck-accept:hover { filter: brightness(.98); }
.ck-banner.onetrust-style .ck-reject {
  background: transparent; border: 1px solid var(--ck-accent); color: var(--ck-accent);
}
.ck-banner.onetrust-style .ck-reject:hover { background: rgba(245,125,27,.08); }
.ck-banner.onetrust-style .ck-link {
  color: var(--ck-accent); font-size: 12px; text-decoration: underline;
  text-align: center; display: block; font-weight: 600;
}

/* --- Modal préférences --- */
.ck-panel{ position: fixed; inset: 0; z-index: calc(var(--ck-z) + 1); background: rgba(0,0,0,.45); display: grid; place-items: center; padding: 16px; }
.ck-panel-card{
  width: min(720px, 96%); background: #fff; color: #111;
  border-radius: var(--ck-radius); box-shadow: 0 20px 60px rgba(0,0,0,.35);
  overflow: hidden;
}
.ck-panel-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid rgba(0,0,0,.08); }
.ck-panel-head h2{ margin:0; font:700 18px/1.2 var(--ck-font); }
.ck-close{ border:0; background:transparent; font-size:26px; line-height:1; padding:6px 10px; cursor:pointer; }
.ck-panel-body{ padding:14px 18px; display:grid; gap:14px; font:500 14px/1.6 var(--ck-font); color:#333; }
.ck-group{ border:1px solid rgba(0,0,0,.08); border-radius:12px; padding:12px 14px; background:#fff; }
.ck-group-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ck-chip{ font:700 12px/1 var(--ck-font); color:#0f172a; background:#e2e8f0; border-radius:999px; padding:6px 8px; }

.ck-panel-actions{ padding:14px 18px; border-top:1px solid rgba(0,0,0,.08); display:flex; gap:8px; justify-content:flex-end; }
.ck-btn{ border:0; border-radius:10px; padding:10px 14px; font:700 14px/1 var(--ck-font); cursor:pointer; }
.ck-primary{ background: var(--ck-accent); color:#fff; }
.ck-neutral{ background:#111; color:#fff; }
.ck-outline{ background: transparent; border:1px solid var(--ck-accent); color: var(--ck-accent); }
.ck-outline:hover{ background: rgba(245,125,27,.08); }

/* Switch */
.ck-switch{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; }
.ck-switch input{ position:absolute; inset:auto; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.ck-slider{ width: 44px; height: 26px; border-radius:999px; background:#e5e7eb; position:relative; transition:.2s; }
.ck-slider::after{ content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 2px 4px rgba(0,0,0,.2); transition:.2s; }
.ck-switch input:checked + .ck-slider{ background:#10b981; }
.ck-switch input:checked + .ck-slider::after{ transform: translateX(18px); }
.ck-switch-label{ font: 600 13px/1 var(--ck-font); }

/* Dark mode */
body.dark .ck-banner.onetrust-style .ck-card{
  background:#0f1220; color:#e5e7eb; border-color:rgba(255,255,255,.1);
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
body.dark .ck-banner.onetrust-style .ck-text{ color:#cbd5e1; }
body.dark .ck-panel{ background: rgba(0,0,0,.55); }
body.dark .ck-panel-card{ background:#0f1220; color:#e5e7eb; }
body.dark .ck-group{ border-color: rgba(255,255,255,.12); background:#0f1220; }
body.dark .ck-neutral{ background:#e5e7eb; color:#0f1220; }

/* Icône cookie monoline – s’adapte au thème clair/sombre */
.ck-icon svg {
  display: block;
  stroke: currentColor;     /* hérite automatiquement de la couleur du texte */
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Option : taille légèrement réduite sur très petits écrans */
@media (max-width: 380px) {
  .ck-banner.onetrust-style .ck-icon svg {
    width: 24px;
    height: 24px;
  }
}
/* ====== PATCH LISIBILITÉ MODAL COOKIES — clair & sombre ====== */

/* Base lisible (clair + sombre) */
.ck-panel-body{
  font-size: 15px;
  line-height: 1.7;
}
.ck-panel-head h2{
  font-size: 18px;
  letter-spacing: .2px;
}
.ck-group{ 
  backdrop-filter: saturate(110%);
}
.ck-panel-card{
  box-shadow: 0 30px 90px rgba(0,0,0,.45);
}

/* État clair : texte un peu plus foncé et bordures plus nettes */
.ck-panel-card{ color:#1f2937; }
.ck-panel-head{ border-bottom-color: rgba(0,0,0,.08); }
.ck-panel-actions{ border-top-color: rgba(0,0,0,.08); }
.ck-group{ border-color: rgba(0,0,0,.08); background:#fff; }
.ck-group p{ color:#475569; } /* muted lisible */

/* Sombre : fond, encre et contrastes alignés sur le header dark */
body.dark .ck-panel{ background: rgba(0,0,0,.65); }
body.dark .ck-panel-card{
  background:#0f1220;      /* même tonalité que l'en-tête */
  color:#e5e7eb;           /* encre */
}
body.dark .ck-panel-head{
  border-bottom-color: rgba(255,255,255,.10);
}
body.dark .ck-panel-head h2{ color:#ffffff; }

body.dark .ck-panel-actions{
  border-top-color: rgba(255,255,255,.10);
}

/* Cartes / textes internes */
body.dark .ck-group{
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.12);
}
body.dark .ck-group p{ color:#a8b3c7; }    /* muted (meilleur contraste) */
body.dark .ck-group strong{ color:#e5e7eb; }

/* Badge "Toujours actif" */
body.dark .ck-chip{
  background: rgba(255,255,255,.14);
  color:#e5e7eb;
}

/* Switchs plus visibles en sombre */
body.dark .ck-slider{ background:#334155; }
body.dark .ck-switch input:checked + .ck-slider{ background:#10b981; }
body.dark .ck-switch-label{ color:#cbd5e1; }

/* Boutons (dark) */
body.dark .ck-primary{ background:#f57d1b; color:#fff; }
body.dark .ck-outline{
  border-color:#f57d1b; color:#f57d1b; background:transparent;
}
body.dark .ck-outline:hover{ background: rgba(245,125,27,.12); }
body.dark .ck-neutral{ background:#e5e7eb; color:#0f1220; }

/* Lien "Gérer les préférences" dans le bandeau (lisible en sombre) */
body.dark .ck-banner.onetrust-style .ck-link{
  color:#f57d1b;
}

/* Icône monoline : s’assure d’un bon contraste en sombre aussi */
.ck-icon svg{
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* ====== PATCH LISIBILITÉ TEXTE & CROIX MODAL ====== */

/* Rend le texte explicatif plus lisible dans le modal (clair + sombre) */
.ck-panel p,
.ck-panel-description {
  color: #374151; /* gris foncé lisible en clair */
}
body.dark .ck-panel p,
body.dark .ck-panel-description {
  color: #d1d5db; /* gris clair lisible en sombre */
}

/* Optionnel : accentue légèrement le contraste général du texte */
body.dark .ck-group p {
  color: #d1d5db !important;
}

/* === FIX: couleur de la croix et lisibilité du texte d’intro === */
:root { --ck-accent: #f57d1b; }

/* Croix de fermeture (classe exacte du HTML) */
.ck-panel .ck-close{
  color: var(--ck-accent) !important;
  background: transparent;
  border: 0;
  font-size: 26px;
  line-height: 1;
  padding: 6px 10px;
  cursor: pointer;
  transition: transform .15s ease, color .15s ease;
}
.ck-panel .ck-close:hover{ color:#ffa04c !important; transform: rotate(90deg); }
.ck-panel .ck-close:focus{ outline:none; box-shadow:0 0 0 3px rgba(245,125,27,.35); border-radius:8px; }

/* Lisibilité du paragraphe d’intro dans le modal */
.ck-panel-body > p:first-of-type { color:#1f2937 !important; }   /* clair */
body.dark .ck-panel-body > p:first-of-type { color:#e5e7eb !important; } /* sombre */