/* ===== ZigZag — surcouche thème sur Bootstrap 5 ===== */
:root {
    --zz-navy:   #0B4F61;   /* primaire (logo / barre) */
    --zz-navy-2: #0e6478;   /* primaire éclairci pour dégradé */
    --zz-yellow: #45B0B8;   /* secondaire (accent zigzag) */
    --zz-orange: #2f8d94;   /* secondaire foncé pour hover */
    --zz-light:  #f4f8f9;
}

* { font-family: 'Poppins', system-ui, sans-serif; }

body { background: var(--zz-light); color: #1f2430; }

/* ---- Logo ---- */
.zz-logo {
    font-weight: 800;
    letter-spacing: -.5px;
    color: #fff;
}
.zz-logo-accent { color: var(--zz-yellow); }

/* ---- Navbar ---- */
.zz-navbar {
    background: var(--zz-navy);
    border-bottom: 4px solid var(--zz-yellow);
}
.zz-navbar .nav-link { color: rgba(255,255,255,.8); font-weight: 600; }
.zz-navbar .nav-link:hover,
.zz-navbar .nav-link.active { color: var(--zz-yellow); }

/* ---- Boutons accent ---- */
.btn-zz-accent {
    background: var(--zz-yellow);
    border: none;
    color: #fff;
    font-weight: 700;
}
.btn-zz-accent:hover { background: var(--zz-navy); color: #fff; }

.btn-zz-outline {
    border: 2px solid var(--zz-yellow);
    color: var(--zz-navy);
    font-weight: 700;
}
.btn-zz-outline:hover { background: var(--zz-yellow); color: var(--zz-navy); }

/* ---- Motif zigzag décoratif ---- */
.zz-stripe {
    height: 14px;
    background: repeating-linear-gradient(
        135deg,
        var(--zz-yellow) 0 18px,
        var(--zz-navy) 18px 36px
    );
}

/* ---- Hero ---- */
.zz-hero {
    background: linear-gradient(135deg, var(--zz-navy) 0%, var(--zz-navy-2) 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.zz-hero h1 { font-weight: 800; }
.zz-hero .zz-logo-accent { color: var(--zz-yellow); }
/* texte secondaire lisible sur fond teal foncé */
.zz-hero .text-light-emphasis { color: rgba(255,255,255,.88) !important; }

/* ---- Cards ---- */
.zz-card {
    border: none;
    border-radius: 14px;
    box-shadow: 0 6px 24px rgba(27,42,74,.08);
    transition: transform .15s ease, box-shadow .15s ease;
}
.zz-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(27,42,74,.16);
}

/* Couverture livre (image en ligne) */
.zz-cover {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 10px 10px 0 0;
    background: #e9eef0;   /* placeholder pendant chargement */
    display: block;
}

.zz-icon-circle {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--zz-navy);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem;
}

/* ---- Footer ---- */
.zz-footer { background: var(--zz-navy); color: rgba(255,255,255,.85); }
.zz-footer-link { color: rgba(255,255,255,.75); text-decoration: none; }
.zz-footer-link:hover { color: var(--zz-yellow); }
/* lisibilité texte gris Bootstrap sur fond teal foncé */
.zz-footer .text-secondary,
.zz-footer .text-light-emphasis { color: rgba(255,255,255,.8) !important; }

/* ---- Couleur icône teal sur fond clair ---- */
.text-zz { color: var(--zz-navy) !important; }

/* ---- Badge catégorie ---- */
.zz-badge-cat {
    background: rgba(27,42,74,.08);
    color: var(--zz-navy);
    font-weight: 600;
}