/* ==================================================
FONTS & VARIABLES
================================================== */
@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Montserrat:wght@400;500;600;700;800;900&display=swap');

:root {
    --bg:#f1edf4;
    --panel:#140019;
    --panel-2:#1d0226;
    --soft-panel:#e9e1ef;
    --soft-panel-2:#e3d9ea;
    --lime:#a8c80a;
    --lime-dark:#8ba100;
    --pink:#ff4ca6;
    --pink-soft:#d98bc2;
    --purple:#7f5b96;
    --text:#221826;
    --text-soft:#6f6574;
    --white-soft:#f3eef6;
    --border-soft:rgba(255,255,255,.06);
    --shadow:0 20px 60px rgba(0,0,0,.12);
}

/* ==================================================
RESET
================================================== */
*{margin:0; padding:0; box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--bg); color:var(--text); font-family:'Montserrat',sans-serif; overflow-x:hidden;}
img{max-width:100%; display:block;}
a{text-decoration:none;color:inherit;}
button{border:none;background:none;font:inherit;cursor:pointer;}

/* ==================================================
HEADER
================================================== */
.site-header{
    position:fixed; top:0; left:0; width:100%; z-index:9999;
    padding:18px 0; background:rgba(20,0,25,.78); backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(255,255,255,.06);
}

.header-inner{
    max-width:1300px; margin:0 auto;
    display:flex; align-items:center; justify-content:space-between; gap:30px;
}

/* LOGO */
.logo{display:flex; flex-direction:column; flex-shrink:0;}
.logo-main{font-family:'Bangers',cursive; font-size:2.4rem; line-height:.85; color:white; letter-spacing:.5px;}
.logo-main span{color:var(--lime);}
.logo-sub{margin-top:4px; font-size:.72rem; font-weight:800; letter-spacing:2px; color: rgba(243,238,246,.62);}

/* NAVIGATION */
.main-nav{flex:1; display:flex; justify-content:center;}
.nav-menu{display:flex; align-items:center; gap:28px; list-style:none;}
.nav-menu li{position:relative; list-style:none;}
.nav-menu a{display:inline-flex; align-items:center; justify-content:center; min-height:42px; color:white; font-size:.95rem; font-weight:800; letter-spacing:.4px; transition:.22s ease;}
.nav-menu a:hover{color:var(--lime);}

/* dropdown menu */
.nav-menu li ul{
    display:none; position:absolute; top:100%; left:0; background:var(--panel); border-radius:12px; padding:8px 0; min-width:200px; z-index:999;
}
.nav-menu li:hover>ul{display:block;}
.nav-menu li ul li a{display:block; padding:10px 18px; color:white; font-weight:500;}
.nav-menu li ul li a:hover{background:var(--lime); color:black;}

/* HEADER ACTIONS */
.header-actions{display:flex; align-items:center; gap:20px; flex-shrink:0;}
.lang-switch{display:flex; align-items:center; gap:8px;}
.lang-switch button{min-width:42px; min-height:42px; border-radius:12px; background:rgba(255,255,255,.06); color:white; font-weight:800; transition:.22s ease;}
.lang-switch button.active{background:var(--lime); color:black;}
.header-icons{display:flex; align-items:center; gap:12px;}
.header-icon{width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.06); color:white; transition:.22s ease;}
.header-icon:hover{background:var(--pink); transform:translateY(-2px);}
.header-newsletter{display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 22px; border-radius:14px; background:var(--lime); color:black; font-weight:900; letter-spacing:.5px; transition:.22s ease;}
.header-newsletter:hover{transform:translateY(-2px); background:var(--lime-dark);}

/* MEDIA QUERIES HEADER */
@media(max-width:1100px){.header-inner{flex-wrap:wrap; justify-content:center;} .main-nav{width:100%; order:3;} .nav-menu{flex-wrap:wrap; justify-content:center;}}
@media(max-width:768px){.site-header{padding:16px;} .logo-main{font-size:1.9rem;} .header-actions{width:100%; justify-content:center; flex-wrap:wrap;} .nav-menu{gap:18px;} .nav-menu a{font-size:.88rem;}}

/* ==================================================
YOAST BREADCRUMB
================================================== */
#breadcrumbs {
    font-size: 0.95rem;
    color: #0b0a0b; /* texte général noir foncé */
    margin: 120px auto 16px; /* top = header fixe, bottom = espace après fil */
    max-width: 1300px;       /* aligné avec .entity-page */
    padding: 0 24px;
    text-align: left;
    position: relative;
    z-index: 999;
    display: flex;           /* pour aligner icône + texte */
    align-items: center;
    gap: 6px;                /* espace entre icône et texte */
}


#breadcrumbs a:first-child {
    position: relative;
    padding-left: 20px; /* espace pour la maison */
}

#breadcrumbs a:first-child::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-image: url('assets/img/icone-maison.svg');
    background-size: contain;
    background-repeat: no-repeat;
}

/* liens du fil */
#breadcrumbs a { 
    color: #0b0a0b; /* noir foncé */
    text-decoration: none;
    font-weight: 600;
}
#breadcrumbs a:hover { 
    color: var(--lime); 
}

/* dernier élément */
#breadcrumbs .breadcrumb_last { 
    color: #0b0a0b; 
    font-weight: 700; 
}

/* séparateurs */
#breadcrumbs span.separator { 
    margin: 0 6px; 
    color: #0b0a0b; 
}

/* ==================================================
ENTITY PAGE
================================================== */
.entity-page {
    max-width: 1300px;
    margin: 0 auto;
    padding: 20px 24px 60px; /* réduit top pour rapprocher hero du fil */
}
/* HERO ================================================== */
.entity-hero{
    position: relative;
    overflow: hidden;

    /* superposition des gradients sur une seule propriété */
    background: 
        radial-gradient(circle at top right, rgba(255,76,166,0.18), transparent 35%),
        linear-gradient(135deg, #140019 0%, #1a0024 100%);

    border-radius: 36px;
    display: grid;
    grid-template-columns: 1fr 520px;
    gap: 40px;
    align-items: center;
    margin-top: 16px; /* espace entre fil d’Ariane et hero */
    margin-bottom: 28px;
    padding: 50px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.16);
}
.entity-state{display:inline-flex; align-items:center; justify-content:center; padding:10px 18px; border-radius:8px; background:var(--lime); color:black; font-size:.9rem; font-weight:900; margin-bottom:24px;}
.entity-hero h1{font-family:'Bangers',cursive; font-size:8rem; line-height:.82; color:var(--white-soft); margin-bottom:10px;}
.entity-hero h2{color:var(--pink); font-size:2.1rem; font-weight:900; margin-bottom:24px;}
.entity-hero p{color:rgba(243,238,246,.82); line-height:1.9; max-width:500px; margin-bottom:30px; font-size:1.02rem;}
.entity-tags{display:flex; flex-wrap:wrap; gap:14px;}
.entity-tags a{display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:14px 18px; border-radius:14px; color:white; font-weight:800; transition:.22s ease;}
.entity-tags a:nth-child(1){background:#8460a0;}
.entity-tags a:nth-child(2){background:#a8c80a;color:black;}
.entity-tags a:nth-child(3){background:#829800;}
.entity-tags a:nth-child(4){background:#cf7db7;}
.entity-hero-image{display:flex; align-items:center; justify-content:center;}
.entity-hero-image img{width:100%; max-width:520px; height:auto; object-fit:contain; display:block; margin:auto; transition:.35s ease;}
.entity-hero-image:hover img{transform:scale(1.04) rotate(-1deg);}

/* VARIATIONS */
.variation-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:20px;}
.variation-card{display:block; overflow:hidden; border-radius:22px; background:var(--panel); transition:.25s ease; box-shadow:0 10px 24px rgba(0,0,0,.12);}
.variation-card img{width:100%; aspect-ratio:1/1; object-fit:cover;}
.variation-card span{display:block; padding:18px; text-align:center; color:var(--white-soft); font-family:'Bangers',cursive; font-size:1.2rem;}

/* ENTITIES & EMOTIONS */
.emotion-links{display:flex; flex-wrap:wrap; gap:18px;}
.emotion-links a{display:inline-flex; align-items:center; justify-content:center; min-height:56px; padding:18px 24px; border-radius:16px; background:var(--soft-panel-2); font-weight:800;}
.view-all-btn{background:var(--purple)!important; color:white;}

/* DATA PANEL */
.entity-data-panel{position:relative; overflow:hidden; background:radial-gradient(circle at top right, rgba(168,200,10,.12), transparent 30%), linear-gradient(135deg,#140019 0%,#1d0226 100%); border-radius:36px; padding:44px; display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center; margin-bottom:28px;}
.entity-data-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px;}
.entity-data-item{display:flex; flex-direction:column; justify-content:center; min-height:110px; padding:20px; border-radius:18px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);}
.entity-data-item span{display:block; color:var(--lime); font-size:.82rem; font-weight:700; margin-bottom:8px;}
.entity-data-item strong{color:var(--white-soft); line-height:1.5;}
.entity-description{margin-top:28px; color:rgba(243,238,246,.84); line-height:1.9;}
.entity-data-right{display:flex; align-items:center; justify-content:center;}
.entity-character-focus img{width:100%; max-width:340px; max-height:420px; object-fit:contain; display:block; transition:.35s ease; filter:drop-shadow(0 20px 40px rgba(0,0,0,.35));}
.entity-character-focus:hover img{transform:scale(1.03) rotate(1deg);}

/* AMAZON CTA */
.amazon-banner{background:linear-gradient(90deg,#140019 0%,#1d0226 100%); border-radius:30px; padding:34px 40px; display:flex; align-items:center; justify-content:space-between; gap:30px; margin-bottom:28px;}
.amazon-left h3{font-family:'Bangers',cursive; font-size:3rem; color:var(--lime); margin-bottom:6px;}
.amazon-left p{color:rgba(243,238,246,.8);}
.amazon-button{display:inline-flex; align-items:center; justify-content:center; min-width:320px; min-height:88px; padding:24px 34px; border-radius:18px; background:var(--lime); color:black; font-family:'Bangers',cursive; font-size:2rem;}

/* MEMORY STREAM */
.memory-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:18px;}
.memory-card{display:block; overflow:hidden; border-radius:18px;}
.memory-card img{width:100%; aspect-ratio:1/1; object-fit:cover;}

/* MEDIA QUERIES */
@media(max-width:1100px){
    .entity-hero, .entity-data-panel{grid-template-columns:1fr;}
    .variation-grid, .memory-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:768px){
    .entity-page{padding:0 16px;}
    .entity-hero{padding:30px;}
    .entity-hero h1{font-size:5rem;}
    .variation-grid, .memory-grid, .entity-data-grid{grid-template-columns:1fr;}
    .amazon-banner{flex-direction:column; align-items:flex-start;}
    .amazon-button{width:100%;}
}