/* ABC Informatique — Bandeau & modale de consentement cookies (RGPD)
   Ce fichier habille les éléments injectés par js/cookie-consent.js
   (#cookieBanner, #cookieModalBackdrop, etc.). À inclure sur toutes
   les pages du site (index.html, suivi.html, formations-ebp.html…)
   en plus de js/cookie-consent.js.
   Suppose que les variables --paper, --ink, --ink-soft, --line,
   --green, --green-deep, --dark, --dark-soft sont déjà définies
   dans le :root de chaque page (mêmes valeurs que sur index.html) ;
   des valeurs de secours sont fournies au cas où. */

.cookie-banner{
  position:fixed; left:20px; bottom:20px; z-index:200;
  width:380px; max-width:calc(100vw - 40px);
  background:var(--dark, #10201A); color:#fff;
  border-radius:14px;
  box-shadow:0 24px 50px -16px rgba(16,32,26,.5);
  opacity:0; transform:translateY(16px) scale(.98); pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}
.cookie-banner.visible{opacity:1; transform:translateY(0) scale(1); pointer-events:auto}
.cookie-banner-top{display:flex; align-items:center; gap:10px; padding:18px 20px 0}
.cookie-banner-icon{
  flex:none; width:30px; height:30px; border-radius:9px;
  background:rgba(44,160,88,.16); display:flex; align-items:center; justify-content:center;
}
.cookie-banner-icon svg{width:16px; height:16px; stroke:var(--green, #2CA058)}
.cookie-banner-title{font-family:'Space Grotesk',sans-serif; font-size:.96rem; font-weight:600; color:#fff}
.cookie-banner-inner{padding:10px 20px 20px}
.cookie-banner p{color:var(--dark-soft, #B9C4BA); font-size:.84rem; line-height:1.55; margin:0 0 16px}
.cookie-banner a{color:var(--green, #2CA058); text-decoration:underline}
.cookie-banner-actions{display:flex; align-items:center; gap:8px}
.cookie-banner-actions .btn{white-space:nowrap; padding:10px 16px; font-size:.82rem; border-radius:9px}
.cookie-banner-actions .btn-primary{flex:1 1 auto; text-align:center}
.cookie-banner-actions .btn-ghost{flex:none; color:#fff; border-color:rgba(255,255,255,.28)}
.cookie-banner-actions .btn-ghost:hover{border-color:#fff; color:#fff}
@media (max-width:640px){
  .cookie-banner{left:12px; right:12px; bottom:12px; width:auto}
}

/* modale préférences cookies */
.cookie-modal-backdrop{
  position:fixed; inset:0; z-index:210; display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(16,32,26,.55); backdrop-filter:blur(2px);
  opacity:0; visibility:hidden; transition:opacity .25s ease;
}
.cookie-modal-backdrop.visible{opacity:1; visibility:visible}
.cookie-modal{
  width:100%; max-width:480px; max-height:85vh; overflow-y:auto;
  background:var(--paper, #EFF1EC); color:var(--ink, #141A16); border-radius:8px; border:1px solid var(--line, #D3D8CD);
  padding:32px; box-shadow:0 30px 60px rgba(16,32,26,.35);
  transform:translateY(16px) scale(.98); transition:transform .25s ease;
}
.cookie-modal-backdrop.visible .cookie-modal{transform:translateY(0) scale(1)}
.cookie-modal h3{font-family:'Space Grotesk',sans-serif; font-size:1.2rem; margin:0 0 10px}
.cookie-modal > p{margin:0 0 20px; color:var(--ink-soft, #4C564D); font-size:.9rem; line-height:1.55}
.cookie-pref-row{display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:16px 0; border-top:1px solid var(--line, #D3D8CD)}
.cookie-pref-row h4{font-size:.94rem; margin:0 0 4px}
.cookie-pref-row p{margin:0; font-size:.82rem; color:var(--ink-soft, #4C564D); line-height:1.5}
.cookie-switch{position:relative; display:inline-block; width:42px; height:24px; flex:none; margin-top:2px}
.cookie-switch input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; z-index:1}
.cookie-switch input:disabled{cursor:not-allowed}
.cookie-switch .track{position:absolute; inset:0; background:var(--line, #D3D8CD); border-radius:999px; transition:background .2s ease}
.cookie-switch .track::before{content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; background:#fff; border-radius:50%; box-shadow:0 1px 3px rgba(16,32,26,.25); transition:transform .2s ease}
.cookie-switch input:checked ~ .track{background:var(--green, #2CA058)}
.cookie-switch input:checked ~ .track::before{transform:translateX(18px)}
.cookie-switch input:disabled ~ .track{background:var(--green-deep, #1F7A43); opacity:.5}
.cookie-modal-actions{display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; margin-top:22px}
.cookie-manage-link{background:none; border:none; padding:0; font:inherit; color:inherit; text-decoration:underline; cursor:pointer}
.cookie-manage-link:hover{color:var(--green-deep, #1F7A43)}