/* Organes du kit réinjectés dans les pages copiées : variables, boutons,
   bouton de contact flottant, bannière cookies, bannière/popup promo.
   Extrait de main.css (kit) — la vitrine du kit, elle, est effacée. */

:root {
    /* === COULEURS PRINCIPALES === */

    /* Noir — fond dominant (65%) */
    --noir:     #020202;
    --noir-100: #0a0a0a;
    --noir-200: #111111;
    --noir-300: #1a1a1a;   /* cards sur fond noir */
    --noir-400: #242424;   /* hover cards */
    --noir-500: #333333;   /* bordures sur fond noir */

    /* Violet — accent marque (25%) */
    --violet:        #D40404;   /* PRINCIPAL */
    --violet-dark:   #a30303;
    --violet-medium: #f62a2a;
    --violet-light:  #f86060;
    --violet-pale:   #fbb0b0;

    /* Blanc cassé — sections claires (10%) */
    --blanc:    #F0EEEE;   /* TEXTE PRINCIPAL + FOND CLAIR */
    --blanc-80: rgba(240, 238, 238, 0.80);
    --blanc-60: rgba(240, 238, 238, 0.60);
    --blanc-40: rgba(240, 238, 238, 0.40);
    --blanc-20: rgba(240, 238, 238, 0.20);
    --blanc-10: rgba(240, 238, 238, 0.10);
    --blanc-05: rgba(240, 238, 238, 0.05);

    /* Utilitaires */
    --rouge: #e83d4d;
    --vert:  #22c55e;
    --jaune: #f59e0b;

    /* === ALIASES RÉTROCOMPATIBILITÉ (vues existantes) === */
    --beige-100: #020202;   /* remappé → fond dark */
    --beige-200: #0a0a0a;
    --beige-300: #333333;
    --beige-400: #484848;
    --beige-50:  #111111;

    --gris-900: var(--blanc);
    --gris-700: var(--blanc-80);
    --gris-600: var(--blanc-60);
    --gris-500: var(--blanc-40);
    --gris-400: var(--blanc-20);
    --gris-300: var(--blanc-10);
    --gris-200: var(--blanc-05);
    --gris-100: rgba(240, 238, 238, 0.03);

    --violet-900: #5c0202;
    --violet-800: #7a0303;
    --violet-700: var(--violet);
    --violet-600: var(--violet-medium);
    --violet-500: var(--violet-light);
    --violet-400: var(--violet-pale);
    --violet-300: #fdd3d3;
    --violet-200: rgba(212, 4, 4, 0.30);
    --violet-100: rgba(212, 4, 4, 0.15);
    --violet-50:  rgba(212, 4, 4, 0.08);

    /* === CHARTE LIGHT — design system clair premium (verrouillé) ===
       Blanc pur #FFFFFF + gris doux #F5F4F8 alternés · violet rare ·
       encre titres #1B1726. Utilisés pour les sections passées en clair. */
    --c-surface:        #FFFFFF;              /* section principale + cartes */
    --c-surface-alt:    #F5F4F8;              /* section alternée (séparation) */
    --c-ink:            #1B1726;              /* titres */
    --c-body:           #56525F;              /* corps de texte */
    --c-muted:          #8B8794;              /* légendes / méta */
    --c-hairline:       rgba(27,23,38,0.08);  /* bordures de cartes */
    --c-hairline-soft:  rgba(27,23,38,0.06);  /* séparations de section */
    --c-violet-veil:    rgba(212,4,4,0.07); /* cartes accent / chips d'icônes */
    --c-violet-deep:    #a30303;              /* hover boutons violets */
    --c-violet-section: linear-gradient(160deg, #3a0a0a 0%, #2a0505 100%);
    --c-card-shadow:       0 1px 2px rgba(27,23,38,0.04), 0 10px 30px rgba(27,23,38,0.06);
    --c-card-shadow-hover: 0 18px 44px rgba(212,4,4,0.14);

    /* === GRADIENTS === */
    --gradient-violet:       linear-gradient(135deg, #D40404 0%, #f62a2a 50%, #D40404 100%);
    --gradient-violet-light: linear-gradient(135deg, rgba(212,4,4,0.2) 0%, rgba(212,4,4,0.05) 100%);
    --gradient-bouton:       linear-gradient(135deg, #D40404 0%, #f62a2a 100%);
    --gradient-rouge:        linear-gradient(135deg, #e83d4d 0%, #c92738 100%);
    --gradient-dark:         linear-gradient(135deg, #020202 0%, #0d0d0d 100%);
    --gradient-hero:         linear-gradient(160deg, #020202 0%, #08020f 100%);
    --gradient-beige:        linear-gradient(135deg, #020202 0%, #0a0a0a 100%); /* compat */
    --gradient-beige-violet: linear-gradient(135deg, #020202 0%, rgba(212,4,4,0.2) 100%);

    /* === OMBRES (glow violet pour dark theme) === */
    --shadow-sm:          0 2px 8px  rgba(212, 4, 4, 0.12);
    --shadow-md:          0 4px 20px rgba(212, 4, 4, 0.18);
    --shadow-lg:          0 8px 40px rgba(212, 4, 4, 0.22);
    --shadow-xl:          0 16px 60px rgba(212, 4, 4, 0.28);
    --shadow-glow:        0 0 60px rgba(212, 4, 4, 0.45);
    --shadow-glow-strong: 0 0 80px rgba(212, 4, 4, 0.65), 0 0 30px rgba(212, 4, 4, 0.40);

    /* === TYPOGRAPHIE === */
    --font-display: 'Montserrat', system-ui, -apple-system, sans-serif;
    --font-body:    'Montserrat', system-ui, -apple-system, sans-serif;
    --font-script:  'Caveat', cursive;
    --font-num:     'Montserrat', sans-serif;

    /* Échelle */
    --text-display-xl: clamp(48px, 7vw, 72px);
    --text-display-lg: clamp(40px, 5.5vw, 56px);
    --text-display-md: clamp(32px, 4.5vw, 40px);
    --text-h1:         clamp(28px, 3.5vw, 32px);
    --text-h2:         24px;
    --text-h3:         20px;
    --text-body-lg:    18px;
    --text-body:       16px;
    --text-body-sm:    14px;
    --text-caption:    12px;

    /* Espacements (système 4px/8px) */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  24px;
    --space-6:  32px;
    --space-7:  48px;
    --space-8:  64px;
    --space-9:  96px;
    --space-10: 128px;

    /* Rayons */
    --radius-xs:   4px;
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   20px;
    --radius-xl:   28px;
    --radius-2xl:  40px;
    --radius-full: 999px;

    /* Container */
    --container-width:   1200px;
    --container-padding: 32px;

    /* Transitions */
    --transition-fast:   150ms ease;
    --transition-base:   200ms ease;
    --transition-smooth: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow:   500ms cubic-bezier(0.4, 0, 0.2, 1);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: var(--radius-full);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: all var(--transition-base);
    cursor: pointer;
    border: 1.5px solid transparent;
    white-space: nowrap;
}

/* Tailles */
.btn-sm { padding: 8px 16px; font-size: 13px; }
.btn-md { padding: 12px 24px; font-size: 14px; }
.btn-lg { padding: 16px 32px; font-size: 16px; }
.btn-xl { padding: 20px 40px; font-size: 17px; }

/* Variantes */
.btn-primary {
    background: var(--gradient-bouton);
    color: var(--blanc);
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(212, 4, 4, 0.35);
}
.btn-primary:hover {
    color: var(--blanc);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(212, 4, 4, 0.55);
}

.btn-outline {
    background: transparent;
    color: var(--blanc);
    border-color: var(--blanc-40);
}
.btn-outline:hover {
    background: var(--blanc-10);
    color: var(--blanc);
    border-color: var(--blanc);
    transform: translateY(-2px);
}

/* Outline violet (sur sections claires) */
.btn-outline-violet {
    background: transparent;
    color: var(--violet);
    border-color: var(--violet);
}
.btn-outline-violet:hover {
    background: var(--violet);
    color: var(--blanc);
    transform: translateY(-2px);
}

.btn-ghost {
    background: var(--violet-100);
    color: var(--violet-pale);
    border-color: var(--violet-200);
}
.btn-ghost:hover {
    background: var(--violet-50);
    color: var(--blanc);
}

.btn-accent {
    background: var(--gradient-rouge);
    color: var(--blanc);
    box-shadow: 0 4px 12px rgba(232, 61, 77, 0.30);
}
.btn-accent:hover {
    color: var(--blanc);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(232, 61, 77, 0.50);
}

.btn-whatsapp {
    background: #25d366;
    color: white;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.25);
}
.btn-whatsapp:hover {
    background: #1da851;
    color: white;
    transform: translateY(-2px);
}

.btn-white {
    background: var(--blanc);
    color: var(--noir);
    border-color: transparent;
}
.btn-white:hover {
    background: var(--violet-pale);
    color: var(--noir);
    transform: translateY(-2px);
}

/* =====================================================

   14. BOUTON DE CONTACT FLOTTANT MULTI-CANAL
   WhatsApp / Appeler / Email / Rendez-vous — un bouton principal
   violet (marque) qui déploie un menu de pastilles colorées par
   canal. Couleurs : WhatsApp #25D366 (officielle), Appel bleu,
   Email ambre (--jaune), Rendez-vous violet clair (famille marque).
   ===================================================== */

/* ---- Conteneur + bouton principal ---- */
.fab-contact {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 999; /* au-dessus du contenu, sous la bannière cookies (1000) */
}
.fab-main {
    position: relative;
    width: 60px;
    height: 60px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--gradient-bouton);
    color: var(--blanc);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.fab-main:hover { transform: scale(1.08); box-shadow: var(--shadow-glow); }
.fab-main:focus-visible { outline: 2px solid var(--violet-pale); outline-offset: 3px; }

/* Icône bulle de discussion ↔ icône fermeture (✕), superposées et croisées en fondu */
.fab-icon {
    position: absolute;
    width: 26px;
    height: 26px;
    transition: opacity 220ms cubic-bezier(.34,1.2,.64,1), transform 220ms cubic-bezier(.34,1.2,.64,1);
}
.fab-icon-chat { opacity: 1; transform: rotate(0deg) scale(1); }
.fab-icon-close { opacity: 0; transform: rotate(-90deg) scale(.5); }
.fab-contact.is-open .fab-icon-chat { opacity: 0; transform: rotate(90deg) scale(.5); }
.fab-contact.is-open .fab-icon-close { opacity: 1; transform: rotate(0deg) scale(1); }

/* Halo pulsé — porté par le bouton principal (multi-canal) ou le lien unique (canal seul) */
.fab-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--violet);
    opacity: 0.4;
    animation: fabPulse 2s infinite;
    z-index: -1;
    pointer-events: none;
}
@keyframes fabPulse {
    0%   { transform: scale(1);   opacity: 0.4; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* ---- Menu déployé (2 à 4 canaux) ---- */
.fab-menu {
    position: absolute;
    bottom: 76px;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}
.fab-item {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    opacity: 0;
    transform: translateY(10px) scale(.9);
    pointer-events: none;
    transition: opacity 200ms cubic-bezier(.34,1.2,.64,1), transform 200ms cubic-bezier(.34,1.2,.64,1);
    transition-delay: 0ms; /* fermeture : instantané, sans cascade (style « cible » lu à la fermeture) */
}
/* Chaque item porte sa propre variable --fab-delay (inline, calculée en PHP) :
   au clic d'ouverture, le navigateur applique le transition-delay de l'état
   CIBLE (celui-ci), donc la cascade ne joue qu'à l'ouverture ; à la fermeture,
   c'est l'état ci-dessus (delay 0ms) qui redevient la cible → repli immédiat. */
.fab-contact.is-open .fab-item {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    transition-delay: var(--fab-delay, 0ms);
}

.fab-item-label {
    background: rgba(2, 2, 2, 0.85);
    color: var(--blanc);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    padding: 8px 14px;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-md);
    max-width: min(60vw, 220px);
    overflow: hidden;
    text-overflow: ellipsis;
}
.fab-item-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blanc);
    box-shadow: var(--shadow-md);
}
.fab-item-icon svg { width: 22px; height: 22px; }
.fab-item:hover .fab-item-icon { transform: scale(1.08); }
.fab-item-icon { transition: transform var(--transition-fast); }

/* Couleurs par canal */
.fab-item--whatsapp .fab-item-icon { background: #25D366; }
.fab-item--call .fab-item-icon     { background: #3B82F6; }
.fab-item--email .fab-item-icon    { background: var(--jaune); }
.fab-item--rdv .fab-item-icon      { background: var(--violet-medium); }

/* ---- Variante « canal unique » : lien direct, sans menu ---- */
.fab-contact--single {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--blanc);
    box-shadow: var(--shadow-lg);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.fab-contact--single:hover { transform: scale(1.08); box-shadow: var(--shadow-glow); }
.fab-single-icon { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; }
.fab-single-icon svg { width: 100%; height: 100%; }
.fab-contact--whatsapp { background: #25D366; }
.fab-contact--whatsapp .fab-pulse { background: #25D366; }
.fab-contact--call { background: #3B82F6; }
.fab-contact--call .fab-pulse { background: #3B82F6; }
.fab-contact--email { background: var(--jaune); }
.fab-contact--email .fab-pulse { background: var(--jaune); }
.fab-contact--rdv { background: var(--violet-medium); }
.fab-contact--rdv .fab-pulse { background: var(--violet-medium); }

/* ---- Mobile : cibles tactiles ≥ 48px déjà garanties ci-dessus ; on ajuste
   uniquement les débords d'étiquette pour rester dans l'écran. ---- */
@media (max-width: 480px) {
    .fab-contact { bottom: 18px; right: 16px; }
    .fab-menu { bottom: 72px; }
    .fab-item-label { max-width: calc(100vw - 120px); font-size: 12px; padding: 7px 12px; }
}

/* Mouvement quasi nul si l'utilisateur le demande — la cascade d'ouverture
   des items devient instantanée elle aussi (transition-delay non couvert
   par la règle globale prefers-reduced-motion plus bas, donc explicité ici). */
@media (prefers-reduced-motion: reduce) {
    .fab-item,
    .fab-icon {
        transition-delay: 0ms !important;
    }
    .fab-pulse { animation: none; }
}

/* =====================================================

   15. BANNER COOKIES
   ===================================================== */
.cookie-banner {
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    max-width: 560px;
    margin: 0 auto;
    background: var(--noir-300);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: var(--space-5);
    z-index: 1000;
    display: none;
    border: 1px solid var(--blanc-10);
}
.cookie-banner.visible { display: block; animation: slideUp 0.4s ease-out; }
@keyframes slideUp {
    from { transform: translateY(100px); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}
.cookie-banner h4 {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--blanc);
}
.cookie-banner p {
    font-size: 13px;
    color: var(--blanc-60);
    margin-bottom: var(--space-4);
    line-height: 1.5;
}
.cookie-banner .cookie-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cookie-banner .btn { flex: 1; font-size: 13px; padding: 10px 16px; }

/* =====================================================
   16. LOADING SCREEN

:root { --promo-banner-h: 0px; }

/* ---- Bannière ---- */
#site-promo-banner {
    position: relative;
    z-index: 200;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 48px 8px 16px;
    opacity: 0;
    transform: translateY(-100%);
    transition: opacity .35s ease, transform .35s ease;
}
#site-promo-banner.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.promo-banner-inner {
    flex: 1;
    text-align: center;
}
.promo-banner-text {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    color: inherit;
}
.promo-banner-text:hover { text-decoration: underline; }

.promo-banner-close {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background: rgba(0,0,0,.15);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    flex-shrink: 0;
    transition: background .2s;
}
.promo-banner-close:hover { background: rgba(0,0,0,.3); }
.promo-banner-close svg   { width: 12px; height: 12px; }

/* Décaler le header sticky quand la bannière est affichée */
.site-header { top: var(--promo-banner-h); }

/* ---- Popup ---- */
#site-promo-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(2, 2, 2, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease;
    backdrop-filter: blur(4px);
}
#site-promo-popup-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.promo-popup-card {
    position: relative;
    background: var(--noir-300);
    border-radius: var(--radius-xl);
    overflow: hidden;
    max-width: 540px;
    width: 100%;
    box-shadow: 0 32px 80px rgba(0,0,0,.7);
    transform: scale(.92) translateY(16px);
    transition: transform .4s cubic-bezier(0.34, 1.3, 0.64, 1);
}
#site-promo-popup-overlay.is-visible .promo-popup-card {
    transform: scale(1) translateY(0);
}

.promo-popup-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 34px;
    height: 34px;
    background: rgba(2,2,2,.55);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: background .2s;
}
.promo-popup-close:hover { background: rgba(2,2,2,.85); }
.promo-popup-close svg   { width: 12px; height: 12px; }

.promo-popup-img-link { display: block; }
.promo-popup-img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 70vh;
    object-fit: cover;
}

.promo-popup-footer {
    padding: 16px 20px;
    text-align: center;
    background: var(--noir-200);
}