/* =============================================
   SG Créations — Portfolio Page
   Palette : beige / rosé / brun chaud
   ============================================= */

/* === Reset & Base === */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html { scroll-behavior: smooth; }

body {
    font-family: 'DM Sans', sans-serif;
    background: #FBF7F4;
    color: #2C1810;
    min-height: 100vh;
    line-height: 1.6;
}

/* =============================================
   HERO
   ============================================= */

.hero {
    background: #2C1810;
    padding: 100px 24px 114px;
    text-align: center;
    color: white;
    position: relative;
    overflow: hidden;
}

.hero-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(90px);
}
.hero-glow-1 {
    width: 480px; height: 480px;
    background: #C4736A;
    top: -160px; left: -80px;
    opacity: 0.22;
}
.hero-glow-2 {
    width: 380px; height: 380px;
    background: #9B7560;
    bottom: -120px; right: -60px;
    opacity: 0.2;
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 620px;
    margin: 0 auto;
}

.brand-label {
    display: inline-block;
    border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.45);
    padding: 5px 16px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 28px;
}

.hero-content h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.4rem, 5.5vw, 4rem);
    font-weight: 600;
    line-height: 1.15;
    color: #FFFFFF;
    margin-bottom: 20px;
}

.hero-content h1 em {
    font-style: italic;
    font-weight: 400;
    color: #E8BEB4;   /* soft rose */
}

.hero-sub {
    font-size: 0.98rem;
    font-weight: 400;
    color: rgba(255,255,255,0.4);
    max-width: 360px;
    margin: 0 auto 42px;
}

.hero-cta {
    display: inline-block;
    background: rgba(196, 115, 106, 0.18);
    border: 1px solid rgba(196, 115, 106, 0.45);
    color: #E8BEB4;
    text-decoration: none;
    padding: 12px 30px;
    border-radius: 50px;
    font-size: 0.88rem;
    font-weight: 500;
    transition: background 0.25s, border-color 0.25s;
}
.hero-cta:hover {
    background: rgba(196, 115, 106, 0.32);
    border-color: #E8BEB4;
}

/* =============================================
   FEATURES — structure commune
   ============================================= */

.feature {
    padding: 80px 24px;
}

.feature-inner {
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 72px;
}

/* Alternance gauche / droite */
.feature-inner.reverse {
    flex-direction: row-reverse;
}

/* =============================================
   BLOB — forme organique animée
   ============================================= */

.blob-wrap {
    flex-shrink: 0;
}

.blob {
    width: 280px;
    height: 280px;
    border-radius: 62% 38% 46% 54% / 60% 44% 56% 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: morph 8s ease-in-out infinite;
    transition: box-shadow 0.35s ease;
}

.blob:hover {
    animation-play-state: paused;
}

@keyframes morph {
    0%,100% { border-radius: 62% 38% 46% 54% / 60% 44% 56% 40%; }
    25%      { border-radius: 42% 58% 62% 38% / 48% 66% 34% 52%; }
    50%      { border-radius: 54% 46% 38% 62% / 36% 54% 46% 64%; }
    75%      { border-radius: 38% 62% 54% 46% / 56% 38% 62% 44%; }
}

.recipe-blob {
    background: linear-gradient(145deg, #F5DDD6, #E0B0A5);
    box-shadow: 0 20px 60px rgba(196, 115, 106, 0.25);
}

.journal-blob {
    background: linear-gradient(145deg, #EDDDD0, #D4B896);
    box-shadow: 0 20px 60px rgba(155, 117, 96, 0.22);
}

.blob-emoji {
    font-size: 4rem;
    line-height: 1;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.12));
}

/* =============================================
   FEATURE CONTENT
   ============================================= */

.feature-content {
    flex: 1;
}

.feature-cat {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #9C8478;
    margin-bottom: 12px;
}

.feature-content h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 600;
    color: #2C1810;
    line-height: 1.15;
    margin-bottom: 16px;
}

.feature-content p {
    font-size: 0.95rem;
    color: #6B5249;
    line-height: 1.8;
    margin-bottom: 22px;
    max-width: 400px;
}

.feature-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-bottom: 34px;
}

.feature-list li {
    font-size: 0.88rem;
    font-weight: 500;
    color: #4A3229;
    padding-left: 18px;
    position: relative;
}
.feature-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.recipe-feature  .feature-list li::before { background: #C4736A; }
.journal-feature .feature-list li::before { background: #9B7560; }

/* === Buttons === */

.feature-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 14px 26px;
    border-radius: 50px;
    color: white;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.feature-btn:hover {
    transform: translateY(-2px);
}

.recipe-btn {
    background: #B5635A;
    box-shadow: 0 6px 20px rgba(181, 99, 90, 0.35);
}
.recipe-btn:hover { box-shadow: 0 10px 28px rgba(181, 99, 90, 0.45); }

.journal-btn {
    background: #8A6450;
    box-shadow: 0 6px 20px rgba(138, 100, 80, 0.32);
}
.journal-btn:hover { box-shadow: 0 10px 28px rgba(138, 100, 80, 0.42); }

.feature-btn span {
    font-size: 1.1rem;
    transition: transform 0.2s ease;
}
.feature-btn:hover span { transform: translateX(4px); }

/* =============================================
   DIVIDER
   ============================================= */

.divider {
    text-align: center;
    color: #D4C0B4;
    font-size: 1rem;
    padding: 0 24px;
    position: relative;
}
.divider::before,
.divider::after {
    content: '';
    display: inline-block;
    width: 80px;
    height: 1px;
    background: #E8DDD8;
    vertical-align: middle;
    margin: 0 16px;
}

/* =============================================
   TEASER — section "bientôt"
   ============================================= */

.teaser {
    text-align: center;
    padding: 90px 24px 100px;
    position: relative;
    overflow: hidden;
}

.teaser-blob {
    position: absolute;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(228,190,180,0.35) 0%, transparent 70%);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.teaser-label {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #C4A898;
    margin-bottom: 16px;
}

.teaser h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 600;
    color: #2C1810;
    line-height: 1.2;
    margin-bottom: 18px;
}

.teaser h2 em {
    font-style: italic;
    font-weight: 400;
    color: #9B7560;
}

.teaser-sub {
    font-size: 0.95rem;
    color: #9C8478;
    max-width: 340px;
    margin: 0 auto;
    line-height: 1.75;
}

/* =============================================
   FOOTER
   ============================================= */

.footer {
    background: #2C1810;
    text-align: center;
    padding: 40px 24px;
}

.footer-brand {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    margin-bottom: 6px;
}

.footer-copy {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.2);
}

/* =============================================
   RESPONSIVE
   ============================================= */

@media (max-width: 720px) {
    .feature-inner,
    .feature-inner.reverse {
        flex-direction: column;
        gap: 40px;
        text-align: center;
    }

    .blob { width: 220px; height: 220px; }
    .blob-emoji { font-size: 3rem; }

    .feature-content p,
    .feature-list { max-width: 100%; }

    .feature-list li { padding-left: 0; }
    .feature-list li::before { display: none; }

    .feature-btn { width: 100%; justify-content: center; }

    .hero { padding: 72px 20px 86px; }
    .feature { padding: 60px 20px; }
}