/* ========================================
   SEO PAGES — 70s DESIGN SYSTEM
   Olive Oil Guides · huiledefes.com
   ======================================== */

:root {
    --text-ink:       #2A2320;
    --pine:           #2E4A40;
    --avocado:        #5F8F6A;
    --avocado-dark:   #3D5C4A;
    --peach-glow:     #F2D8C4;
    --apricot:        #E8B596;
    --burnt-orange:   #C75C33;
    --burnt-sienna:   #B54D2E;
    --terracotta:     #D97254;
    --dusty-mauve:    #B87A8A;
    --olive-brown:    #4E5848;
    --cream:          #F5EBDD;
    --parchment:      #E8DFD0;
    --warm-white:     #FAF5EC;
    --mustard:        #C9A227;
    --sage:           #8FA897;
    --olive-green:    #4D7358;
    --rust:           #A84328;

    --font-display: 'DM Serif Display', serif;
    --font-body: 'Libre Baskerville', serif;
    --font-mono: 'Space Mono', monospace;

    --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px;
    --sp-5: 40px; --sp-6: 48px; --sp-8: 64px; --sp-10: 80px;

    /* Transitions */
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark Mode Overrides */
[data-theme="dark"] {
    --cream:          #1A1D1A;
    --text-ink:       #F5EBDD;
    --parchment:      #242924;
    --warm-white:     #2A2F2A;
    --pine:           #14261F;
    --peach-glow:     #E8B596;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 18px; }

/* FILM GRAIN TEXTURE */
body::after {
    content: "";
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.05;
    pointer-events: none;
    z-index: 9999;
}

/* READING PROGRESS BAR */
#progress-bar {
    position: fixed;
    top: 0; left: 0;
    height: 4px;
    background: var(--burnt-orange);
    z-index: 1000;
    width: 0%;
    transition: width 0.1s;
}

/* FLOATING ACTIONS */
.floating-actions {
    position: fixed;
    bottom: var(--sp-4);
    right: var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    z-index: 1000;
}

.float-btn {
    width: 50px; height: 50px;
    border-radius: 50%;
    background: var(--pine);
    color: var(--peach-glow);
    border: 2px solid var(--apricot);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 4px 4px 0 var(--olive-brown);
    transition: var(--transition);
}

.float-btn:hover { transform: scale(1.1); background: var(--burnt-orange); }

/* SEARCH OVERLAY — LUXURY 70s REDESIGN */
#search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(46, 74, 64, 0.85); /* Fond sapin translucide */
    backdrop-filter: blur(12px);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#search-overlay.active {
    display: flex;
    opacity: 1;
}

.search-modal {
    width: 90%;
    max-width: 800px;
    background: var(--cream);
    padding: var(--sp-8);
    border: 6px double var(--apricot);
    box-shadow: 30px 30px 0 rgba(0,0,0,0.2);
    position: relative;
    transform: translateY(20px);
    transition: transform 0.4s ease;
}

#search-overlay.active .search-modal {
    transform: translateY(0);
}

.search-header-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--burnt-orange);
    margin-bottom: var(--sp-2);
    display: block;
}

.search-input {
    width: 100%;
    border: none;
    border-bottom: 4px solid var(--pine);
    background: transparent;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 5vw, 3rem);
    color: var(--pine);
    padding: var(--sp-2) 0;
    outline: none;
}

.search-input::placeholder {
    color: var(--sage);
    opacity: 0.5;
}

#search-results {
    margin-top: var(--sp-6);
    max-height: 50vh;
    overflow-y: auto;
    padding-right: var(--sp-2);
}

#search-results::-webkit-scrollbar { width: 6px; }
#search-results::-webkit-scrollbar-thumb { background: var(--apricot); }

.search-result-item {
    display: block;
    padding: var(--sp-3);
    background: var(--warm-white);
    border: 1px solid var(--parchment);
    margin-bottom: var(--sp-2);
    text-decoration: none;
    transition: var(--transition);
}

.search-result-item:hover {
    background: var(--peach-glow);
    border-color: var(--burnt-orange);
    transform: translateX(10px);
}

.search-result-title {
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--pine);
    display: block;
}

.search-result-meta {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--burnt-sienna);
    text-transform: uppercase;
}

#search-close {
    position: absolute;
    top: var(--sp-2);
    right: var(--sp-2);
    background: var(--pine);
    color: var(--peach-glow);
    border: none;
    width: 40px;
    height: 40px;
    cursor: pointer;
    font-family: var(--font-mono);
    display: flex;
    align-items: center;
    justify-content: center;
}

body {
    font-family: var(--font-body);
    background: var(--cream);
    color: var(--text-ink);
    line-height: 1.75;
    overflow-x: hidden;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%234A5A2B' fill-opacity='0.035'%3E%3Cellipse cx='20' cy='20' rx='6' ry='3' transform='rotate(35 20 20)'/%3E%3Cellipse cx='60' cy='60' rx='6' ry='3' transform='rotate(-35 60 60)'/%3E%3Cellipse cx='60' cy='20' rx='4' ry='2' transform='rotate(55 60 20)'/%3E%3Cellipse cx='20' cy='60' rx='4' ry='2' transform='rotate(-55 20 60)'/%3E%3Ccircle cx='40' cy='40' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}

.container {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 var(--sp-4);
    position: relative;
    z-index: 1;
}

/* Navigation */
nav.site-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--pine);
    border-bottom: 3px solid var(--apricot);
}
nav.site-nav .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-2) var(--sp-4);
    flex-wrap: wrap;
    gap: var(--sp-2);
}
nav.site-nav .logo {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--peach-glow);
    text-decoration: none;
    letter-spacing: 2px;
}
nav.site-nav .lang-switch {
    display: flex;
    gap: var(--sp-1);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}
nav.site-nav .lang-switch a {
    color: var(--peach-glow);
    text-decoration: none;
    padding: 4px 10px;
    border: 1px solid transparent;
    border-radius: 3px;
}
nav.site-nav .lang-switch a:hover { border-color: var(--apricot); }
nav.site-nav .lang-switch a.active {
    background: var(--apricot);
    color: var(--pine);
    font-weight: 700;
}

/* Hero */
header.page-hero {
    background: linear-gradient(135deg, var(--pine) 0%, var(--avocado-dark) 100%);
    color: var(--peach-glow);
    padding: var(--sp-10) 0 var(--sp-8);
    border-bottom: 6px double var(--apricot);
    position: relative;
    z-index: 1;
}
header.page-hero .breadcrumb {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--apricot);
    margin-bottom: var(--sp-3);
}
header.page-hero .breadcrumb a {
    color: var(--apricot);
    text-decoration: none;
    border-bottom: 1px dotted var(--apricot);
}
header.page-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.4rem);
    line-height: 1.1;
    margin-bottom: var(--sp-3);
    color: var(--peach-glow);
}
header.page-hero .lede {
    font-size: 1.15rem;
    max-width: 720px;
    color: var(--cream);
    font-style: italic;
}
header.page-hero .meta {
    margin-top: var(--sp-4);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--apricot);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Article body */
article.guide {
    padding: var(--sp-8) 0;
}
article.guide h2 {
    font-family: var(--font-display);
    font-size: 1.85rem;
    color: var(--pine);
    margin: var(--sp-6) 0 var(--sp-3);
    padding-bottom: var(--sp-1);
    border-bottom: 2px solid var(--apricot);
    line-height: 1.2;
}
article.guide h3 {
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--burnt-sienna);
    margin: var(--sp-4) 0 var(--sp-2);
}
article.guide p {
    margin-bottom: var(--sp-3);
    font-size: 1.02rem;
}
article.guide p.intro {
    font-size: 1.18rem;
    font-style: italic;
    color: var(--olive-brown);
    border-left: 4px solid var(--burnt-orange);
    padding-left: var(--sp-3);
    margin-bottom: var(--sp-5);
}
article.guide ul, article.guide ol {
    margin: 0 0 var(--sp-3) var(--sp-4);
}
article.guide ul li, article.guide ol li {
    margin-bottom: var(--sp-1);
}
article.guide strong { color: var(--pine); }
article.guide a {
    color: var(--burnt-sienna);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
article.guide a:hover { color: var(--rust); }

/* Pull-quote */
article.guide blockquote {
    background: var(--parchment);
    border-left: 6px solid var(--avocado);
    padding: var(--sp-4);
    margin: var(--sp-5) 0;
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--avocado-dark);
    font-style: italic;
}

/* Tables */
article.guide table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--sp-4) 0;
    background: var(--warm-white);
    font-size: 0.95rem;
    box-shadow: 0 2px 0 var(--olive-brown);
}
article.guide th {
    background: var(--pine);
    color: var(--peach-glow);
    padding: var(--sp-2);
    text-align: left;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}
article.guide td {
    padding: var(--sp-2);
    border-bottom: 1px solid var(--parchment);
}
article.guide tr:nth-child(even) td { background: var(--cream); }

/* Callout boxes */
.callout {
    background: var(--peach-glow);
    border: 2px solid var(--burnt-orange);
    border-radius: 4px;
    padding: var(--sp-3);
    margin: var(--sp-4) 0;
    color: var(--text-ink);
}
.callout strong { display: block; margin-bottom: var(--sp-1); color: var(--burnt-sienna); }

.key-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--sp-2);
    margin: var(--sp-5) 0;
}
.key-stats .stat {
    background: var(--pine);
    color: var(--peach-glow);
    padding: var(--sp-3);
    text-align: center;
    border: 2px solid var(--apricot);
}
.key-stats .stat .v {
    display: block;
    font-family: var(--font-display);
    font-size: 1.75rem;
    color: var(--apricot);
}
.key-stats .stat .l {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 4px;
}

/* FAQ */
.faq {
    margin: var(--sp-6) 0;
}
.faq details {
    background: var(--warm-white);
    border: 2px solid var(--olive-brown);
    margin-bottom: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
}
.faq summary {
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--pine);
    padding: var(--sp-1) 0;
}
.faq details[open] summary { color: var(--burnt-sienna); }
.faq details p { margin-top: var(--sp-2); }

/* Related */
.related {
    background: var(--parchment);
    padding: var(--sp-6) 0;
    border-top: 3px double var(--olive-brown);
}
.related h2 {
    font-family: var(--font-display);
    color: var(--pine);
    text-align: center;
    margin-bottom: var(--sp-4);
    font-size: 1.6rem;
}
.related .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--sp-3);
}
.related a {
    background: var(--warm-white);
    border: 2px solid var(--olive-brown);
    padding: var(--sp-3);
    text-decoration: none;
    color: var(--pine);
    font-family: var(--font-display);
    font-size: 1.05rem;
    transition: transform 0.15s;
}
.related a:hover {
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 var(--burnt-orange);
}


/* authority additions:start */
.pillar-guide {
    max-width: 980px;
    margin: 0 auto;
}
.pillar-toc {
    background: var(--warm-white);
    border: 2px solid var(--olive-brown);
    padding: var(--sp-3);
    margin: var(--sp-5) 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--sp-1) var(--sp-3);
}
.pillar-toc strong {
    grid-column: 1 / -1;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--burnt-sienna);
}
.pillar-toc a {
    font-family: var(--font-body);
    color: var(--pine);
    text-decoration: none;
    border-bottom: 1px solid var(--apricot);
    padding-bottom: 4px;
}
.pillar-linkbox {
    background: var(--pine);
    color: var(--peach-glow);
    border: 3px double var(--apricot);
    padding: var(--sp-3);
    margin: var(--sp-5) 0;
    display: grid;
    gap: var(--sp-1);
}
.pillar-linkbox strong {
    color: var(--apricot);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.pillar-linkbox span {
    color: var(--peach-glow);
}
.pillar-linkbox a {
    color: var(--apricot);
    font-weight: 700;
}
/* authority additions:end */

/* Footer */
footer.site-footer {
    background: var(--pine);
    color: var(--peach-glow);
    padding: var(--sp-8) 0 var(--sp-5);
    margin-top: var(--sp-8);
    border-top: 6px double var(--apricot);
}
footer.site-footer h3 {
    font-family: var(--font-display);
    margin-bottom: var(--sp-2);
    color: var(--apricot);
}
footer.site-footer .copyright {
    margin-top: var(--sp-4);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--apricot);
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.7;
}

@media (max-width: 640px) {
    article.guide h2 { font-size: 1.5rem; }
    .container { padding: 0 var(--sp-3); }
    nav.site-nav .lang-switch { font-size: 0.7rem; }
}