/* =========================================================
   BANNIÈRE DE CONSENTEMENT COOKIES (RGPD) — Auto-École du Palais
   ------------------------------------------------------------
   Applique la mise en forme de #cookie-banner (HTML posé avant
   </body> dans chaque page) : couleurs, polices, arrondis et
   ombres reprennent ceux du site via les variables CSS déjà
   présentes dans index.html (--primary, --radius, --shadow-card…).
   Les pages en Tailwind (label.html, mentions-legales.html) n'ayant
   pas ces variables, chaque valeur a un repli identique à leur
   palette (#C41E2A, Poppins…).

   L'affichage est piloté par le script de la page
   (style="display:none" au départ, display="block" au choix) :
   ce fichier ne gère QUE l'apparence.
   ========================================================= */

/* ---------- 1. CONTENEUR FIXE EN BAS D'ÉCRAN ---------- */
#cookie-banner{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:9999;                      /* au-dessus des boutons flottants et de la modale d'appel */
    padding:0 clamp(12px,3vw,24px) clamp(12px,3vw,20px);
    font-family:'Inter',system-ui,sans-serif;
    opacity:0;
    transform:translateY(26px);
    transition:opacity .45s var(--ease,cubic-bezier(.4,0,.2,1)),transform .45s var(--ease,cubic-bezier(.4,0,.2,1));
}
#cookie-banner.on{opacity:1;transform:none}
#cookie-banner:focus{outline:none}

/* ---------- 2. CARTE BLANCHE (rayons + ombre du site) ---------- */
.cb-bx{
    max-width:1120px;
    margin:0 auto;
    background:var(--white,#fff);
    border:1px solid var(--gray-200,#e5e7eb);
    border-radius:var(--radius,20px);
    box-shadow:0 2px 6px rgba(16,24,40,.05),0 18px 50px rgba(16,24,40,.16);
    padding:clamp(18px,2.4vw,26px) clamp(18px,2.6vw,32px);
    display:flex;
    align-items:center;
    gap:clamp(16px,2.4vw,24px);
}

/* ---------- 3. ICÔNE ---------- */
.cb-ic{
    flex-shrink:0;
    width:52px;
    height:52px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--primary,#C41E2A);
    background:rgba(220,38,38,.08);
    background:color-mix(in srgb,var(--primary,#C41E2A) 8%,#fff);
}
.cb-ic svg{width:26px;height:26px}

/* ---------- 4. TEXTE ---------- */
.cb-tx{flex:1;min-width:0}
.cb-title{
    font-family:'Poppins','Almarai',sans-serif;   /* Poppins (pages Tailwind) sinon Almarai (index) */
    font-size:1.02rem;
    font-weight:700;
    line-height:1.3;
    color:var(--black,#161616);
    margin:0 0 6px;
}
.cb-txt{
    font-size:.85rem;
    font-weight:400;
    line-height:1.65;
    color:var(--text-body,#6B7280);
    margin:0;
    max-width:640px;
}
.cb-link{
    display:inline-block;
    margin-top:6px;
    font-size:.82rem;
    font-weight:600;
    color:var(--primary,#C41E2A);
    text-decoration:none;
    transition:opacity .3s,text-decoration-color .3s;
}
.cb-link:hover{opacity:.85;text-decoration:underline;text-underline-offset:3px}

/* ---------- 5. BOUTONS (mêmes styles que .btn-primary / .btn-outline) ---------- */
.cb-btns{display:flex;align-items:center;gap:10px;flex-shrink:0}
.cb-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:13px 28px;
    border-radius:var(--radius-pill,100px);
    font-family:inherit;
    font-size:.88rem;
    font-weight:600;
    line-height:1;
    white-space:nowrap;
    cursor:pointer;
    transition:all .5s var(--ease,cubic-bezier(.4,0,.2,1));
}
.cb-accept{
    background:var(--primary,#C41E2A);
    color:#fff;
    border:2px solid var(--primary,#C41E2A);
}
.cb-accept:hover{background:var(--primary-dark,#9E1620);border-color:var(--primary-dark,#9E1620);transform:translateY(-2px)}
.cb-refuse{
    background:transparent;
    color:var(--text,#2E333D);
    border:2px solid var(--gray-300,#d1d5db);
}
.cb-refuse:hover{
    border-color:var(--primary,#C41E2A);
    color:var(--primary,#C41E2A);
    background:rgba(220,38,38,.04);
    background:color-mix(in srgb,var(--primary,#C41E2A) 4%,#fff);
    transform:translateY(-2px);
}
.cb-btn:focus-visible{outline:2px solid var(--primary,#C41E2A);outline-offset:3px}
/* option déjà choisie (visible quand la bannière est rouverte via le lien « Cookies ») */
.cb-btn.is-set{box-shadow:0 0 0 3px color-mix(in srgb,var(--primary,#C41E2A) 18%,#fff)}

/* ---------- 6. MOBIL : texte puis boutons pleine largeur ---------- */
@media(max-width:860px){
    .cb-bx{flex-wrap:wrap;align-items:flex-start}
    .cb-ic{width:44px;height:44px;border-radius:14px}
    .cb-ic svg{width:22px;height:22px}
    .cb-tx{flex:1 1 0}
    .cb-btns{flex:1 1 100%;margin-top:4px}
    .cb-btn{flex:1;padding:14px 20px}
}
@media(max-width:420px){
    #cookie-banner{padding-left:12px;padding-right:12px;padding-bottom:12px}
    .cb-bx{gap:12px;padding:18px 16px}
    .cb-title{font-size:.95rem}
    .cb-txt{font-size:.8rem}
    .cb-btns{flex-direction:column-reverse;align-items:stretch}
    .cb-btn{width:100%;padding:13px 18px}
}

/* ---------- 7. DÉSACCORD AVEC LES BOUTONS FLOTTANTS ----------
   Le script de la page publie la hauteur de la bannière dans --cb-h
   (documentElement) : elle est reprise ci-dessous pour décaler le
   contenu et les boutons flottants au lieu de les recouvrir. */
body.cb-open{padding-bottom:calc(var(--cb-h,0px) + 12px)}

/* index.html : boutons flottants Facebook / WhatsApp / téléphone */
body.cb-open .flb{bottom:calc(var(--cb-h,0px) + 16px);transition:bottom .45s var(--ease,cubic-bezier(.4,0,.2,1))}
body.cb-open .fb{bottom:calc(var(--cb-h,0px) + 16px);transition:bottom .45s var(--ease,cubic-bezier(.4,0,.2,1))}
@media(max-width:480px){
    body.cb-open .flb{bottom:calc(var(--cb-h,0px) + 8px)}
    body.cb-open .fb{bottom:calc(var(--cb-h,0px) + 8px)}
}
/* label.html / mentions-legales.html : boutons Facebook + WhatsApp (classes Tailwind) */
body.cb-open a.fixed.bottom-6{bottom:var(--cb-h,0px)}
body.cb-open a.fixed.bottom-28{bottom:calc(var(--cb-h,0px) + 7rem)}
@media(min-width:768px){
    body.cb-open a.fixed.bottom-6{bottom:calc(var(--cb-h,0px) + 12px)}
    body.cb-open a.fixed.bottom-28{bottom:calc(var(--cb-h,0px) + 8rem)}
}

@media print{#cookie-banner{display:none!important}body.cb-open{padding-bottom:0}}
@media(prefers-reduced-motion:reduce){#cookie-banner{transition:none;transform:none}}