/* =========================================================
   base.css (MERGED)
   Objectif: look "Lovable React" + Bootstrap grid
   + compat legacy "croquis"
   ========================================================= */

/* =========================
   1) DESIGN TOKENS (Lovable)
   ========================= */
:root{
    --popover: 40 20% 96%;
    --popover-foreground: 220 10% 14%;

    --muted: 35 25% 82%;
    --muted-foreground: 25 15% 40%;

    --primary: 220 8% 22%;
    --primary-foreground: 40 20% 97%;

    --secondary: 220 10% 88%;
    --secondary-foreground: 220 10% 18%;

    --radius: .6rem;

    /* “metals” en N&B (graphite) */
    --copper: 220 8% 26%;
    --copper-light: 220 6% 36%;
    --gold: 220 6% 34%;
    --parchment: 40 20% 97%;
    --parchment-dark: 40 15% 90%;
    --ink: 220 10% 14%;

    --gradient-copper: linear-gradient(135deg, hsl(220 8% 26%) 0%, hsl(220 6% 34%) 100%);
    --gradient-gold:   linear-gradient(135deg, hsl(220 6% 34%) 0%, hsl(220 8% 22%) 100%);

    --shadow-soft:     0 6px 18px -8px hsl(220 10% 14% / .12);
    --shadow-card:     0 3px 12px -6px hsl(220 10% 14% / .14);
    --shadow-copper:   0 6px 18px -8px hsl(220 8% 22% / .18);
    --shadow-elevated: 0 10px 28px -12px hsl(220 10% 14% / .18);
}

/* =========================
   2) BASE GLOBAL
   ========================= */
html{ scroll-behavior: smooth; }

html, body{
    height: 100%;
    background: hsl(var(--background));
    color: hsl(var(--foreground));
}

body{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Headings “Lovable-like” */
/* Titres “littéraires” (tes grands titres) */
h1, h2, .display-title, .section-title-lovable{
    font-family: "IM Fell DW Pica", Georgia, serif;
    letter-spacing: .04em;
}

/* Cinzel seulement pour éléments UI / brand */
.brand-title, .font-display, .nav-title, .badge-title{
    font-family: "Cinzel", Georgia, serif;
    letter-spacing: .025em;
    font-weight: bold;
}

/* Links */
a{ color: hsl(var(--foreground)); }
a:hover{ color: hsl(var(--primary)); }

/* =========================
   3) TEXTURE / GRAIN
   ========================= */
.texture-grain{ position: relative; }
.texture-grain::before{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .03;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* =========================
   4) NAVBAR (proche lovable)
   ========================= */
.navbar{
    background: hsl(var(--background));
    border-bottom: 1px solid hsl(var(--border));
}
.navbar .nav-link{ color: hsl(var(--foreground)); }
.navbar .nav-link:hover{ color: hsl(var(--primary)); }

/* =========================
   5) HELPERS (petits utilitaires)
   ========================= */
.text-muted{ color: hsl(var(--muted-foreground)) !important; }
.text-copper{ color: hsl(var(--copper)) !important; }

.shadow-soft{ box-shadow: var(--shadow-soft); }
.shadow-card{ box-shadow: var(--shadow-card); }
.shadow-elevated{ box-shadow: var(--shadow-elevated); }

.object-cover{ object-fit: cover; }

.clamp-2{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.clamp-3{
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* “py-20 md:py-28” */
.section-pad{ padding: 5rem 0; }
@media (min-width: 768px){
    .section-pad{ padding: 7rem 0; }
}

/* =========================
   6) CARDS (Lovable)
   ========================= */
.card-fantasy{
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    border: 1px solid hsl(var(--border));
    background: hsl(var(--card));
    box-shadow: var(--shadow-card);
    transition: all .25s ease;
}
.card-fantasy:hover{
    box-shadow: var(--shadow-elevated);
    border-color: hsl(var(--primary) / .30);
}
.card-fantasy::before{
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--gradient-copper);
    opacity: 0;
    transition: opacity .25s ease;
}
.card-fantasy:hover::before{ opacity: 1; }

.hover-border-copper:hover{
    border-color: hsl(var(--copper) / .50) !important;
}

.icon-badge{
    width: 64px;
    height: 64px;
    border-radius: 999px;
    background: hsl(var(--copper) / .10);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .25s ease;
}
.icon-badge i{ font-size: 1.7rem; }
.card-fantasy:hover .icon-badge{ background: hsl(var(--copper) / .20); }

.icon-badge.big{ width: 80px; height: 80px; }
.icon-badge.big i{ font-size: 2rem; }

/* =========================
   7) SEPARATORS + NOTES
   ========================= */
.separator-fantasy{
    position: relative;
    margin: 2rem 0;
    display:flex;
    align-items:center;
    justify-content:center;
}
.separator-fantasy::before,
.separator-fantasy::after{
    content:"";
    flex:1;
    height:1px;
    background: linear-gradient(to right, transparent, hsl(var(--border)), transparent);
}
.separator-fantasy span{
    padding: 0 1rem;
    font-size: .875rem;
    color: hsl(var(--muted-foreground));
    font-family: "Cinzel", Georgia, serif;
}

.note-chronicler{
    position: relative;
    padding: .9rem 1.1rem;
    margin: 1rem 0;
    font-style: italic;
    color: hsl(var(--muted-foreground));
    border-left: 2px solid hsl(var(--copper));
    background: linear-gradient(90deg, hsl(var(--muted) / .5) 0%, transparent 100%);
}

.text-glow-copper{
    text-shadow: 0 0 20px hsl(var(--copper) / .25);
}

/* =========================
   8) BUTTONS (Lovable-like)
   ========================= */
.btn-hero{
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    border: 1px solid hsl(var(--primary));
    box-shadow: 0 6px 18px -10px hsl(220 10% 14% / .25);
}
.btn-hero:hover{
    filter: brightness(.96);
    color: hsl(var(--primary-foreground));
}

.btn-hero-outline{
    background: transparent;
    color: hsl(var(--foreground));
    border: 1px solid hsl(var(--border));
}
.btn-hero-outline:hover{
    background: hsl(var(--muted) / .60);
    color: hsl(var(--foreground));
}

.btn-fantasy{
    border: 1px solid hsl(var(--border));
    background: hsl(var(--card));
    color: hsl(var(--foreground));
}
.btn-fantasy:hover{
    border-color: hsl(var(--copper) / .50);
    background: hsl(var(--muted) / .35);
}

.btn-copper{
    background: hsl(var(--copper));
    border: 1px solid hsl(var(--copper));
    color: hsl(var(--primary-foreground));
}
.btn-copper:hover{
    background: hsl(var(--copper-light));
    border-color: hsl(var(--copper-light));
    color: hsl(var(--primary-foreground));
}

.btn-arrow{ transition: transform .2s ease; }
.btn:hover .btn-arrow{ transform: translateX(4px); }

/* Badges/links */
.badge-outline-lovable{
    border: 1px solid hsl(var(--border));
    color: hsl(var(--foreground));
    background: transparent;
    font-weight: 600;
}

.link-lovable{
    color: hsl(var(--foreground));
    text-decoration: none;
}
.link-lovable:hover{
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* =========================
   9) HERO (Lovable 1:1)
   ========================= */
.hero-lovable{
    position: relative;
    min-height: 85vh;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

/* IMPORTANT: c’est ça qui fait le rendu “image 2”
   -> overlay vertical très fort vers le bas + léger vignettage horizontal */
.hero-lovable__overlay-v{
    position:absolute;
    inset:0;
    pointer-events:none;
    background: linear-gradient(
            to top,
            hsl(var(--background) / 1) 0%,
            hsl(var(--background) / .55) 35%,
            hsl(var(--background) / 0) 100%
    );
}
.hero-lovable__overlay-h{
    position:absolute;
    inset:0;
    pointer-events:none;
    background: linear-gradient(
            to right,
            hsl(var(--background) / .30) 0%,
            transparent 20%,
            transparent 80%,
            hsl(var(--background) / .30) 100%
    );
}

/* Typo Hero (si tu veux IM Fell ici, tu peux swap Cinzel -> IM Fell) */
.display-title{
    font-family: "Cinzel", Georgia, serif;
    letter-spacing: .06em;
    font-size: clamp(2.2rem, 4.2vw, 4.5rem);
    line-height: 1.05;
}

.hero-lead{
    color: hsl(var(--muted-foreground));
    max-width: 42rem;
    margin-inline: auto;
    line-height: 1.7;
}

.deco-line{
    height: 1px;
    width: 3rem;
    opacity: .8;
    background: linear-gradient(to right, transparent, hsl(var(--copper)));
}
.deco-line-right{
    background: linear-gradient(to left, transparent, hsl(var(--copper)));
}
.hero-icon-pulse{
    font-size: 1.5rem;
    animation: glowPulse 2s ease-in-out infinite;
}
@keyframes glowPulse{
    0%,100%{ opacity: .6; }
    50%{ opacity: 1; }
}

/* Scroll indicator (bas de hero) */
.scroll-indicator{
    position:absolute;
    left:50%;
    transform: translateX(-50%);
    bottom: 2rem;
}
.scroll-shell{
    width: 24px;
    height: 40px;
    border-radius: 999px;
    border: 2px solid hsl(var(--muted-foreground) / .30);
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding: 8px;
}
.scroll-dot{
    width: 4px;
    height: 8px;
    border-radius: 999px;
    background: hsl(var(--copper));
    animation: bounceDot 1.2s infinite;
}
@keyframes bounceDot{
    0%,100%{ transform: translateY(0); opacity: .9; }
    50%{ transform: translateY(10px); opacity: .7; }
}

/* =========================
   LORE TEASER : identique au HERO + fondu haut/bas
   ========================= */
.lore-teaser::before{
    content:"";
    position:absolute;
    left:0; right:0; top:0;
    height: 80px;
    z-index: 2;          /* au-dessus de l’image + overlays */
    pointer-events:none;
    background: linear-gradient(
            to bottom,
            hsl(var(--background) / 1) 0%,
            hsl(var(--background) / .70) 55%,
            hsl(var(--background) / 0) 100%
    );
}

.lore-teaser{
    position: relative;
    overflow: hidden;
    /* Transition douce avec ce qui précède / suit (réduit la “coupure franche”) */
    background: linear-gradient(
            to bottom,
            hsl(var(--background)) 0%,
            hsl(var(--background) / 0) 18%,
            hsl(var(--background) / 0) 82%,
            hsl(var(--background)) 100%
    );
}

/* Important : ordre des couches */
.lore-bg{
    position: absolute;
    inset: 0;
    z-index: 0;
}
.lore-bg img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Overlays au-dessus de l’image */
.lore-teaser__overlay-v,
.lore-teaser__overlay-h,
.lore-teaser__overlay-fog{
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

/* Identique à HERO */
.lore-teaser__overlay-v{
    background: linear-gradient(
            to top,
            hsl(var(--background) / 1) 0%,
            hsl(var(--background) / .55) 35%,
            hsl(var(--background) / 0) 100%
    );
}
.lore-teaser__overlay-h{
    background: linear-gradient(
            to right,
            hsl(var(--background) / .30) 0%,
            transparent 20%,
            transparent 80%,
            hsl(var(--background) / .30) 100%
    );
}

/* Brume haut + bas + brume latérale + voile global */
.lore-teaser__overlay-fog{
    background:
        /* FONDU HAUT */
            radial-gradient(140% 85% at 50% 0%,
            hsl(var(--background) / 0.98) 0%,
            hsl(var(--background) / 0.78) 28%,
            hsl(var(--background) / 0.38) 52%,
            hsl(var(--background) / 0.00) 78%
            ),

                /* FONDU BAS */
            radial-gradient(120% 70% at 50% 100%,
            rgba(245,247,250,0.95) 0%,
            rgba(245,247,250,0.70) 35%,
            rgba(245,247,250,0.28) 60%,
            rgba(245,247,250,0.00) 80%
            ),

                /* BRUME LATÉRALE */
            radial-gradient(45% 120% at 0% 50%,
            hsl(var(--background) / 0.92) 0%,
            hsl(var(--background) / 0.55) 35%,
            hsl(var(--background) / 0.00) 75%
            ),
            radial-gradient(45% 120% at 100% 50%,
            hsl(var(--background) / 0.92) 0%,
            hsl(var(--background) / 0.55) 35%,
            hsl(var(--background) / 0.00) 75%
            ),

                /* VOILE GLOBAL (léger) */
            linear-gradient(to bottom,
            rgba(255,255,255,0.12) 0%,
            rgba(255,255,255,0.08) 35%,
            rgba(255,255,255,0.05) 100%
            );
}


/* Le contenu au-dessus de tout */
.lore-teaser .container{
    position: relative;
    z-index: 2;
}

.lore-lead--readable{
    display: inline-block;
    padding: .35rem .75rem;
    border-radius: .75rem;
    background: rgba(255,255,255,.35);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}


/* =========================
   10) CTA dark section (version forêt / med-fan)
   ========================= */
.cta-final{
    color: hsl(40 20% 97%);
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,.08);
}

/* Dégradé forêt profond -> raccord avec footer */
.cta-bg{
    background:
        /* voile + grain léger */
            radial-gradient(1200px 500px at 50% 10%,
            rgba(255,255,255,.07),
            rgba(0,0,0,0)
            ),
                /* le dégradé HORIZONTAL qui “fait le style” */
            linear-gradient(to right,
            #06110c 0%,
            #0b1a12 22%,
            #2b3a22 50%,
            #0b1a12 78%,
            #06110c 100%
            );
}

/* blobs plus “or/cuivre” et “forêt” */
.cta-blob{ opacity: .28; }

.cta-blob-left{
    background: hsl(var(--copper) / .75);
}

.cta-blob-right{
    background: hsl(150 30% 25% / .70); /* vert forêt, proche du live */
}

/* Titres / sous-titre : chaleureux, lisible */
.section-title-cta{
    font-family: "Cinzel", Georgia, serif;
    letter-spacing: .04em;
    font-size: clamp(1.9rem, 2.8vw, 2.6rem);
    color: hsl(40 20% 97%);
}

.cta-subtitle{
    max-width: 36rem;
    color: hsl(40 15% 90%);
}

/* =========================
   11) LEGACY “CROQUIS” (compat)
   garde si tes views l’utilisent encore
   ========================= */
.paper{ background: hsl(var(--background)); }

.pencil-line{ border: 1px solid hsl(var(--border)); border-radius: var(--radius); }
.pencil-dashed{ border: 1px dashed hsl(var(--border)); border-radius: var(--radius); }
.pencil-shadow{ box-shadow: var(--shadow-soft); }

.sketch-card{
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
}
.sketch-card::before{
    content:"";
    display:block;
    border:1px dashed hsl(var(--border) / .6);
    border-radius: calc(var(--radius) - .1rem);
    position:absolute;
    inset:.5rem;
    pointer-events:none;
}

/* =========================
   12) TOAST / FLASH (ton infra PHP)
   ========================= */
#toastZone{ z-index: 1080; }

.flash-stack{
    position: fixed;
    top: 72px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1080;
    width: min(760px, calc(100% - 2rem));
    pointer-events: none;
}
.flash-banner{
    pointer-events: auto;
    border-radius: 14px;
    padding: .75rem 1rem;
    margin-bottom: .5rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.10);
}
.maintenance-banner{
    border: 1px solid hsl(var(--border));
    border-left-width: 4px;
    border-left-color: hsl(var(--primary));
    background: hsl(var(--card));
    box-shadow: var(--shadow-soft);
}

/* =========================
   HOME - LORE TEASER : largeur alignée sur la CTA
   ========================= */
.lore-wrap{
    max-width: 48rem;
    margin-inline: auto;
}
.lore-lead,
.note-chronicler-lovable{
    max-width: 100%;
}
.note-chronicler-lovable{
    width: 100%;
    position:relative;
    margin-top:1rem;
    margin-bottom:1rem;
    padding-top:.75rem;
    padding-bottom:.75rem;
    padding-left:1rem;
    font-style:italic;
    color:hsl(var(--muted-foreground));
    border-left:2px solid hsl(var(--copper));
    background:linear-gradient(90deg,hsl(var(--muted) / .5) 0%,transparent 100%);
}

/* ===========================
    13) FOOTER
   =========================== */
.tl-footer-topbar{
    background: hsl(var(--background));
    border-top: 1px solid hsl(var(--border));
}
.tl-footer-topbar__left{
    color: hsl(var(--foreground));
    font-size: .95rem;
}
.tl-footer-topbar__link{
    color: hsl(var(--primary));
    text-decoration: none;
    font-size: .95rem;
}
.tl-footer-topbar__link:hover{
    text-decoration: underline;
    text-underline-offset: 3px;
}

.tl-footer{
    background:
            radial-gradient(1200px 500px at 50% 10%,
            rgba(255,255,255,.07),
            rgba(0,0,0,0)
            ),
            linear-gradient(180deg,
            hsl(var(--footer-top)) 0%,
            hsl(var(--footer-bottom)) 100%
            );
    color: rgba(255,255,255,.78);
}

.tl-footer__top > [class*="col-"],
.tl-footer__cols > [class*="col-"]{
    flex: 0 0 auto;
}

.tl-footer__brandcol{ max-width: 420px; }

.tl-footer__divider{
    height: 1px;
    background: rgba(255,255,255,.12);
    margin: 2.25rem 0 1.75rem;
}

.tl-footer__brand{
    font-weight: 600;
    letter-spacing: .2px;
    color: rgba(255,255,255,.9);
}

.tl-footer__logo{
    width: 18px;
    height: 18px;
    border-radius: 6px;
    background: rgba(255,255,255,.08);
    box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset;
}

.tl-footer__text{
    max-width: 38ch;
    font-size: .95rem;
    line-height: 1.5;
}

.tl-footer__title{
    color: rgba(255,255,255,.9);
    font-weight: 600;
    margin-bottom: .75rem;
}

.tl-footer__list{
    list-style: none;
    padding: 0;
    margin: 0;
}

.tl-footer__list a{
    display: inline-block;
    padding: .25rem 0;
    color: rgba(255,255,255,.65);
    text-decoration: none;
}
.tl-footer__list a:hover{
    color: rgba(255,255,255,.92);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.tl-footer__icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    color: rgba(255,255,255,.8);
    background: rgba(255,255,255,.06);
    box-shadow: 0 0 0 1px rgba(255,255,255,.10) inset;
    text-decoration: none;
}
.tl-footer__icon:hover{
    color: rgba(255,255,255,1);
    background: rgba(255,255,255,.10);
}

.tl-footer__hr{
    border-color: rgba(255,255,255,.12);
    opacity: 1;
}

.tl-footer__muted{
    color: rgba(255,255,255,.55);
    font-size: .9rem;
}

.tl-footer__mutedlink{
    color: rgba(255,255,255,.55);
    text-decoration: none;
    font-size: .9rem;
}
.tl-footer__mutedlink:hover{
    color: rgba(255,255,255,.9);
    text-decoration: underline;
    text-underline-offset: 3px;
}