/* ═══════════════════════════════════════════
   elyaweb v2 — main.css
   Direction: Minuit Luxe (midnight blue + champagne gold)
   ═══════════════════════════════════════════ */

/* ─── RESET ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:'Outfit',sans-serif;font-weight:300;background:#0B1026;color:#F5F0E8;line-height:1.7;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button,input,select,textarea{font-family:inherit;font-size:inherit;border:none;outline:none;background:none;color:inherit}
::selection{background:#D4A853;color:#0B1026}

/* ─── VARIABLES ─── */
:root{
    --gold:#D4A853;
    --gold-dim:rgba(212,168,83,0.15);
    --gold-faint:rgba(212,168,83,0.08);
    --bg:#0B1026;
    --bg-alt:rgba(212,168,83,0.03);
    --text:#F5F0E8;
    --text-dim:rgba(245,240,232,0.55);
    --text-muted:rgba(245,240,232,0.35);
    --border:rgba(212,168,83,0.12);
    --border-hover:rgba(212,168,83,0.3);
    --green:#28ca41;
    --radius:8px;
    --container:1100px;
    --font-display:'Bricolage Grotesque',sans-serif;
    --font-body:'Outfit',sans-serif;
    --font-mono:'IBM Plex Mono',monospace;
}

/* ─── GRAIN OVERLAY ─── */
.grain{position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.035;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

/* ─── LAYOUT ─── */
.container{max-width:var(--container);margin:0 auto;padding:0 2rem}
.tc{text-align:center}
.section{padding:5rem 0}
.section-alt{background:var(--bg-alt)}

/* ─── TYPOGRAPHY ─── */
.section-tag{display:block;font-size:.7rem;letter-spacing:3px;color:var(--gold);margin-bottom:1rem;font-weight:400}
.section-title{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2rem);font-weight:400;line-height:1.3;margin-bottom:1.5rem;color:var(--text)}
.section-title em{color:var(--gold);font-style:italic}
.section-subtitle{font-size:.85rem;color:var(--text-dim);max-width:480px;margin:0 auto 2rem;line-height:1.7}
.page-title{font-family:var(--font-display);font-size:clamp(1.8rem,4vw,2.5rem);font-weight:400;line-height:1.3;margin-bottom:1rem}
.page-title em{color:var(--gold);font-style:italic}
.page-desc{font-size:.9rem;color:var(--text-dim);max-width:480px;margin:0 auto;line-height:1.7}
.page-hero{padding:6rem 0 3rem;border-bottom:.5px solid var(--border)}

/* ─── BUTTONS ─── */
.btn-primary{display:inline-flex;align-items:center;gap:.5rem;background:var(--gold);color:var(--bg);padding:.75rem 1.75rem;border-radius:4px;font-size:.85rem;font-weight:500;letter-spacing:.5px;transition:all .3s;cursor:pointer}
.btn-primary:hover{filter:brightness(1.1);transform:translateY(-1px)}
.btn-primary.btn-lg{padding:1rem 2.5rem;font-size:.9rem}
.btn-ghost{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--border-hover);color:var(--gold);padding:.75rem 1.75rem;border-radius:4px;font-size:.85rem;transition:all .3s;cursor:pointer}
.btn-ghost:hover{background:var(--gold-faint);border-color:var(--gold)}

/* ─── SITE HEADER (pages intérieures) ─── */
.site-header{position:sticky;top:0;z-index:100;background:rgba(11,16,38,0.9);backdrop-filter:blur(12px);border-bottom:.5px solid var(--border)}
body.menu-open .site-header{backdrop-filter:none;background:rgba(11,16,38,0.98)}
.site-nav{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;max-width:var(--container);margin:0 auto}
.nav-logo{display:flex;align-items:center;gap:.5rem}
.logo-text{font-family:var(--font-display);font-size:1.2rem;font-weight:500;letter-spacing:2px;color:var(--gold)}
.nav-links{display:flex;align-items:center;gap:1.5rem}
.nav-link{font-size:.75rem;letter-spacing:1px;color:var(--text-dim);transition:color .3s;position:relative}
.nav-link:hover,.nav-link.active{color:var(--gold)}
.nav-link.active::after{content:'';position:absolute;bottom:-4px;left:0;right:0;height:1px;background:var(--gold)}
.nav-cta{background:var(--gold);color:var(--bg);padding:.5rem 1.25rem;border-radius:4px;font-size:.75rem;font-weight:500;letter-spacing:1px;transition:filter .3s}
.nav-cta:hover{filter:brightness(1.1)}
.nav-toggle{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--gold);transition:all .3s}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ─── NAV CLOSE (bouton fermeture menu mobile) ─── */
.nav-close{display:none;position:absolute;top:1.5rem;right:1.5rem;background:none;border:none;color:var(--gold);font-size:2rem;cursor:pointer;line-height:1;padding:.25rem .5rem;transition:opacity .2s}
.nav-close:hover{opacity:.7}

/* ─── HERO (page d'accueil) ─── */
.hero{position:relative;height:100vh;min-height:700px;overflow:hidden}
#three-c{position:absolute;inset:0;z-index:0;pointer-events:none}
.layer-blur{position:absolute;inset:0;z-index:1;
    background:radial-gradient(ellipse at 30% 50%,rgba(11,16,38,0.3),rgba(11,16,38,0.85) 70%)}
.hero-ui{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;padding:0 2rem;max-width:var(--container);margin:0 auto}
.hero-nav{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 0}
.hero-content{flex:1;display:flex;flex-direction:column;justify-content:center;max-width:560px}
.hero-tag{font-size:.7rem;letter-spacing:3px;color:var(--gold);margin-bottom:1.5rem}
.hero-h1{font-family:var(--font-display);font-size:clamp(2rem,5vw,2.8rem);font-weight:400;line-height:1.25;margin-bottom:1.25rem}
.hero-h1 em{color:var(--gold);font-style:italic}
.hero-desc{font-size:.9rem;line-height:1.7;color:var(--text-dim);max-width:420px;margin-bottom:2rem}
.hero-actions{display:flex;gap:.75rem;margin-bottom:3rem}
.hero-stats{display:flex;gap:2.5rem;padding-top:2rem;border-top:.5px solid var(--border)}
.stat{text-align:center}
.stat-val{display:block;font-family:var(--font-display);font-size:1.4rem;font-weight:500;color:var(--gold)}
.stat-label{font-size:.65rem;color:var(--text-muted);margin-top:.25rem;display:block}
.hero-morph{position:absolute;right:2rem;bottom:2rem;text-align:right}
.morph-name{font-family:var(--font-display);font-size:.9rem;letter-spacing:2px;color:var(--text-dim)}
.morph-counter{font-size:.7rem;color:var(--text-muted);margin-top:.25rem}
.morph-bar{width:80px;height:2px;background:rgba(212,168,83,0.1);margin:8px 0 8px auto;border-radius:1px;overflow:hidden}
.morph-fill{height:100%;background:var(--gold);width:0;transition:width .1s linear}
.dot-nav{display:flex;gap:6px;justify-content:flex-end}
.dot{width:8px;height:8px;border-radius:50%;border:1px solid var(--gold);cursor:pointer;transition:background .3s}
.dot.active{background:var(--gold)}

/* ─── OFFERS GRID (accueil) ─── */
.offers-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.offer-card{background:var(--gold-faint);border:.5px solid var(--border);border-radius:var(--radius);padding:1.5rem 1rem;text-align:center;display:flex;flex-direction:column;gap:.5rem;transition:border-color .3s}
.offer-card:hover{border-color:var(--border-hover)}
.offer-card.featured{border:1.5px solid rgba(212,168,83,0.4);background:rgba(212,168,83,0.07);position:relative}
.offer-badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--gold);color:var(--bg);font-size:.6rem;font-weight:500;padding:3px 12px;border-radius:10px;letter-spacing:1px}
.offer-name{font-size:.7rem;letter-spacing:2px;color:var(--gold)}
.offer-price{font-family:var(--font-display);font-size:1.75rem;font-weight:500}
.offer-desc{font-size:.7rem;color:var(--text-muted)}
.offer-detail{font-size:.75rem;color:var(--text-dim);line-height:1.8}
.section-cta{text-align:center;margin-top:2rem}

/* ─── PORTFOLIO GRID ─── */
.portfolio-grid,.portfolio-full-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.pf-card{display:block;border-radius:var(--radius);overflow:hidden;border:.5px solid var(--border);transition:border-color .3s,transform .3s;position:relative}
.pf-card:hover{border-color:var(--border-hover);transform:translateY(-2px)}
.pf-card.pf-featured{grid-column:1/3;display:grid;grid-template-columns:1fr 1fr}
.pf-live{position:absolute;top:12px;left:12px;background:var(--green);color:var(--bg);font-size:.55rem;font-weight:500;padding:3px 10px;border-radius:10px;letter-spacing:1px;z-index:2}
.pf-visual{height:180px;display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center}
.pf-featured .pf-visual{height:auto;min-height:220px}
.pf-logo{font-family:var(--font-display);font-size:1.5rem;font-weight:500;letter-spacing:2px;color:var(--text)}
.pf-info{padding:1rem 1.25rem;background:var(--bg-alt);display:flex;flex-direction:column;gap:.35rem}
.pf-tag{font-size:.65rem;letter-spacing:1px;color:var(--text-muted)}
.pf-name{font-size:1rem;font-weight:500}
.pf-desc{font-size:.75rem;color:var(--text-dim);line-height:1.6}
.pf-techs{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.25rem}
.pf-tech{background:var(--gold-faint);color:var(--gold);padding:2px 8px;border-radius:10px;font-size:.6rem}
.pf-url{font-size:.7rem;color:var(--text-muted)}
.pf-link{font-size:.75rem;color:var(--gold);font-weight:500;margin-top:.25rem}

/* ─── PORTFOLIO FILTERS ─── */
.portfolio-filters{display:flex;justify-content:center;gap:.75rem;padding:1.5rem 0;margin-bottom:1rem}
.filter-btn{padding:.4rem 1rem;border-radius:20px;font-size:.7rem;letter-spacing:1px;border:.5px solid var(--border-hover);color:var(--text-dim);cursor:pointer;transition:all .3s}
.filter-btn.active{background:var(--gold);color:var(--bg);border-color:var(--gold)}
.filter-btn:hover:not(.active){background:var(--gold-faint)}

/* ─── PROCESS ─── */
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.process-step{text-align:center;padding:1rem .5rem}
.step-num{display:flex;width:36px;height:36px;border-radius:50%;border:1px solid var(--gold);align-items:center;justify-content:center;margin:0 auto 1rem;font-size:.9rem;color:var(--gold)}
.step-title{font-size:.85rem;font-weight:500;margin-bottom:.35rem}
.step-desc{font-size:.7rem;color:var(--text-muted);line-height:1.5}

/* ─── TESTIMONIAL ─── */
.testimonial-section{border-top:.5px solid var(--border);border-bottom:.5px solid var(--border)}
.testimonial{max-width:520px;margin:0 auto;text-align:center}
.testi-quote{font-family:var(--font-display);font-size:2.5rem;color:var(--gold);font-style:italic;display:block;margin-bottom:.5rem}
.testi-text{font-size:.9rem;line-height:1.8;color:var(--text-dim);font-style:italic;margin-bottom:1rem}
.testi-author{display:block;font-size:.85rem;font-weight:500;font-style:normal}
.testi-role{display:block;font-size:.7rem;color:var(--text-muted);margin-top:.15rem}

/* ─── CTA ─── */
.cta-section{border-top:.5px solid var(--border)}
.cta-block{text-align:center}
.cta-title{font-family:var(--font-display);font-size:clamp(1.3rem,3vw,1.75rem);font-weight:400;margin-bottom:.75rem}
.cta-desc{font-size:.85rem;color:var(--text-dim);margin-bottom:1.5rem}
.cta-email{font-size:.7rem;color:var(--text-muted);margin-top:1rem}
.cta-buttons{display:flex;gap:.75rem;justify-content:center}

/* ─── PRICING (offres) ─── */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.pricing-card{background:var(--gold-faint);border:.5px solid var(--border);border-radius:var(--radius);padding:1.5rem;display:flex;flex-direction:column;position:relative;transition:border-color .3s}
.pricing-card.featured{border:1.5px solid rgba(212,168,83,0.4);background:rgba(212,168,83,0.07)}
.pricing-badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--gold);color:var(--bg);font-size:.6rem;font-weight:500;padding:3px 14px;border-radius:10px;letter-spacing:1px}
.pricing-header{text-align:center;margin-bottom:1.25rem}
.pricing-name{display:block;font-size:.7rem;letter-spacing:2px;color:var(--gold);margin-bottom:.5rem}
.pricing-subtitle{display:block;font-size:.7rem;color:var(--text-muted);margin-bottom:.5rem}
.pricing-price{display:block;font-family:var(--font-display);font-size:2rem;font-weight:500}
.pricing-note{display:block;font-size:.65rem;color:var(--text-muted);margin-top:.25rem}
.pricing-features{border-top:.5px solid var(--border);padding-top:1rem;flex:1;font-size:.75rem;line-height:2.2}
.pricing-features li.included{color:var(--text-dim)}
.pricing-features li.included::before{content:'✓ ';color:var(--gold)}
.pricing-features li.excluded{color:var(--text-muted)}
.pricing-features li.excluded::before{content:'— ';margin-right:2px}
.pricing-footer{margin-top:1.25rem;text-align:center}
.pricing-delay{display:block;font-size:.7rem;color:var(--text-muted);margin-bottom:.75rem}
.pricing-disclaimer{font-size:.7rem;color:var(--text-muted);margin-top:1.5rem;max-width:500px;margin-left:auto;margin-right:auto}

/* ─── FEATURES (offres) ─── */
.features-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.feature-card{background:var(--gold-faint);border:.5px solid var(--border);border-radius:var(--radius);padding:1.25rem}
.feature-card h3{font-size:.9rem;font-weight:500;margin-bottom:.5rem}
.feature-card p{font-size:.75rem;color:var(--text-dim);line-height:1.7}

/* ─── SEO EXPLAINER (offres) ─── */
.seo-explainer{max-width:560px;margin:0 auto}
.seo-point{margin-bottom:1.5rem;display:flex;gap:1rem;align-items:flex-start}
.seo-point h3{font-size:.9rem;font-weight:500;margin-bottom:.35rem}
.seo-point p{font-size:.75rem;color:var(--text-dim);line-height:1.7}
.seo-point strong{color:var(--gold)}

/* ─── MAINTENANCE (offres) ─── */
.maintenance-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;max-width:560px;margin:0 auto}
.maint-card{background:var(--gold-faint);border:.5px solid var(--border);border-radius:var(--radius);padding:1.25rem}
.maint-card h3{font-size:.9rem;font-weight:500;margin-bottom:.75rem}
.maint-card h3 small{font-weight:300;color:var(--text-dim)}
.maint-card li{font-size:.75rem;color:var(--text-dim);line-height:2}
.maint-card li::before{content:'✓ ';color:var(--gold)}

/* ─── ADD-ONS (offres) ─── */
.addons-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;max-width:560px;margin:0 auto}
.addon{display:flex;justify-content:space-between;padding:.75rem 1rem;background:var(--gold-faint);border-radius:var(--radius);font-size:.8rem}
.addon span{color:var(--text-dim)}
.addon strong{color:var(--text);font-weight:500}

/* ─── FAQ (offres) ─── */
.faq-list{max-width:560px;margin:0 auto}
.faq-item{border-bottom:.5px solid var(--border);padding:1rem 0}
.faq-item summary{font-size:.9rem;font-weight:500;cursor:pointer;list-style:none;position:relative;padding-right:1.5rem}
.faq-item summary::after{content:'+';position:absolute;right:0;top:0;font-size:1.2rem;color:var(--gold);transition:transform .3s}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{font-size:.8rem;color:var(--text-dim);line-height:1.7;margin-top:.75rem;padding-bottom:.5rem}

/* ─── CASE STUDY ─── */
.breadcrumb{padding:1.5rem 0;font-size:.75rem;color:var(--text-muted)}
.breadcrumb a{color:var(--text-dim);transition:color .3s}
.breadcrumb a:hover{color:var(--gold)}
.case-hero{padding:2rem 0 3rem;border-bottom:.5px solid var(--border)}
.case-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}
.case-tags{display:flex;gap:.35rem;flex-wrap:wrap;margin-bottom:.75rem}
.case-title{font-family:var(--font-display);font-size:clamp(1.5rem,4vw,2rem);font-weight:400;margin-bottom:.5rem}
.case-subtitle{font-size:.85rem;color:var(--text-dim);margin-bottom:1.5rem}
.case-stats{display:flex;gap:1.25rem;margin-bottom:1.5rem}
.case-hero-visual{border-radius:var(--radius);height:240px;display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center}
.case-screenshots img{width:100%;border-radius:var(--radius);border:.5px solid var(--border)}

/* NEED / SOLUTION */
.need-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.need-card{background:var(--gold-faint);border:.5px solid var(--border);border-radius:var(--radius);padding:1rem}
.need-card h3{font-size:.85rem;font-weight:500;margin-bottom:.5rem;color:var(--gold)}
.need-card p{font-size:.75rem;color:var(--text-dim);line-height:1.6}
.solutions-list{max-width:560px;margin:0 auto}
.solution-item{display:flex;gap:1rem;align-items:flex-start;margin-bottom:1.25rem}
.solution-num{min-width:28px;height:28px;border-radius:50%;background:var(--gold-dim);display:flex;align-items:center;justify-content:center;font-size:.8rem;color:var(--gold);font-weight:500}
.solution-item h3{font-size:.85rem;font-weight:500;margin-bottom:.25rem}
.solution-item p{font-size:.75rem;color:var(--text-dim);line-height:1.6}

/* ─── ABOUT ─── */
.about-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:2.5rem;align-items:center}
.about-photo{border-radius:var(--radius);width:100%;object-fit:cover;aspect-ratio:3/4}
.about-photo-placeholder{background:var(--gold-faint);border:.5px solid var(--border);border-radius:var(--radius);aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:.75rem}
.about-text h1{font-family:var(--font-display);font-size:clamp(1.3rem,3vw,1.75rem);font-weight:400;line-height:1.3;margin:.75rem 0 1rem}
.about-text h1 em{color:var(--gold);font-style:italic}
.about-text p{font-size:.85rem;color:var(--text-dim);line-height:1.8;margin-bottom:.75rem}
.diff-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.diff-card{background:var(--gold-faint);border:.5px solid var(--border);border-radius:var(--radius);padding:1.25rem}
.diff-card h3{font-size:.9rem;font-weight:500;margin-bottom:.5rem}
.diff-card p{font-size:.75rem;color:var(--text-dim);line-height:1.7}
.timeline{max-width:480px;margin:0 auto;padding-left:1.5rem;border-left:1px solid var(--gold-dim)}
.timeline-item{position:relative;margin-bottom:2rem}
.timeline-item::before{content:'';position:absolute;left:-1.85rem;top:3px;width:10px;height:10px;border-radius:50%;background:var(--gold)}
.timeline-date{font-size:.65rem;letter-spacing:2px;color:var(--gold);margin-bottom:.25rem;display:block}
.timeline-item h3{font-size:.9rem;font-weight:500;margin-bottom:.25rem}
.timeline-item p{font-size:.75rem;color:var(--text-dim);line-height:1.6}
.stack-pills{display:flex;justify-content:center;gap:.75rem;flex-wrap:wrap;margin-top:1rem}
.stack-pill{border:.5px solid var(--border-hover);color:var(--text-dim);padding:.4rem 1rem;border-radius:20px;font-size:.7rem}

/* ─── CONTACT ─── */
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:2.5rem;padding-top:1rem}
.contact-left h1{font-family:var(--font-display);font-size:clamp(1.3rem,3vw,1.75rem);font-weight:400;line-height:1.3;margin:.75rem 0 1rem}
.contact-left h1 em{color:var(--gold);font-style:italic}
.contact-desc{font-size:.85rem;color:var(--text-dim);line-height:1.7;margin-bottom:2rem}
.contact-option{background:var(--gold-faint);border:.5px solid var(--border);border-radius:var(--radius);padding:1.25rem;margin-bottom:1rem}
.contact-option h3{font-size:.9rem;font-weight:500;margin-bottom:.25rem}
.contact-option p{font-size:.7rem;color:var(--text-muted)}
.contact-email{font-size:.9rem;font-weight:500;color:var(--text);transition:color .3s}
.contact-email:hover{color:var(--gold)}
.contact-socials{margin-top:1.5rem}
.contact-socials-label{display:block;font-size:.65rem;letter-spacing:2px;color:var(--text-muted);margin-bottom:.75rem}
.contact-socials-links{display:flex;gap:.75rem}
.contact-socials-links a{border:.5px solid var(--border-hover);padding:.5rem 1rem;border-radius:4px;font-size:.75rem;color:var(--text-dim);transition:all .3s}
.contact-socials-links a:hover{background:var(--gold-faint);color:var(--gold)}
.contact-form-wrap{background:var(--bg-alt);border:.5px solid var(--border);border-radius:var(--radius);padding:1.75rem}
.contact-form-wrap h2{font-size:1rem;font-weight:500;margin-bottom:.25rem}
.form-subtitle{font-size:.7rem;color:var(--text-muted);margin-bottom:1.25rem}
.form-group{margin-bottom:1rem}
.form-label{display:block;font-size:.7rem;color:var(--text-muted);margin-bottom:.4rem}
.form-input,.form-select,.form-textarea{width:100%;padding:.65rem .85rem;background:rgba(245,240,232,0.04);border:.5px solid var(--border);border-radius:4px;color:var(--text);font-size:.85rem;transition:border-color .3s}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--gold);outline:none}
.form-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4L6 8L10 4' stroke='%23D4A853' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.form-textarea{min-height:100px;resize:vertical}
.budget-pills{display:flex;gap:.5rem}
.bpill{flex:1;min-width:0;border:.5px solid var(--border);border-radius:4px;padding:.5rem;text-align:center;font-size:.7rem;color:var(--text-muted);cursor:pointer;transition:all .3s}
.bpill.active{border-color:var(--gold);background:var(--gold-faint);color:var(--gold)}
.form-submit{width:100%;justify-content:center}
.form-disclaimer{font-size:.6rem;color:var(--text-muted);text-align:center;margin-top:.75rem}
.form-success{text-align:center;padding:2rem}
.form-success h3{font-size:1.1rem;font-weight:500;color:var(--gold);margin-bottom:.5rem}
.form-success p{font-size:.85rem;color:var(--text-dim)}
.contact-reassurance{display:flex;justify-content:center;gap:2.5rem;padding:2rem 0 3rem}
.reassurance-item{text-align:center;font-size:.7rem;color:var(--text-muted)}
.reassurance-item span{display:block;font-size:1.1rem;margin-bottom:.35rem}

/* ─── FOOTER ─── */
.site-footer{border-top:.5px solid var(--border);padding:3rem 0}
.footer-inner{display:flex;flex-direction:column;align-items:center;gap:1.5rem;text-align:center}
.footer-logo{font-family:var(--font-display);font-size:1.2rem;letter-spacing:2px;color:var(--gold);font-weight:500}
.footer-copy{font-size:.7rem;color:var(--text-muted)}
.footer-nav{display:flex;gap:1.5rem}
.footer-nav a{font-size:.75rem;color:var(--text-dim);transition:color .3s}
.footer-nav a:hover{color:var(--gold)}
.footer-social{display:flex;gap:1.5rem}
.footer-social a{font-size:.7rem;color:var(--text-muted);transition:color .3s}
.footer-social a:hover{color:var(--gold)}
.footer-legal{display:flex;gap:1.5rem}
.footer-legal a{font-size:.65rem;color:var(--text-muted);transition:color .3s}
.footer-legal a:hover{color:var(--text-dim)}
.footer-geo {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 0.5rem;
}

/* ─── CONTENT AREA (pages légales) ─── */
.content-area{max-width:720px;margin:0 auto}
.content-area h2{font-family:var(--font-display);font-size:1.3rem;font-weight:400;margin:2rem 0 .75rem}
.content-area h3{font-size:1rem;font-weight:500;margin:1.5rem 0 .5rem}
.content-area p{font-size:.85rem;color:var(--text-dim);line-height:1.8;margin-bottom:1rem}
.content-area ul{margin-bottom:1rem;padding-left:1.5rem}
.content-area li{font-size:.85rem;color:var(--text-dim);line-height:1.8;list-style:disc}
.content-area a{color:var(--gold);text-decoration:underline}

/* ─── REVEAL ANIMATIONS ─── */
.reveal{opacity:1;transform:translateY(0);transition:opacity .7s ease,transform .7s ease}
.js-loaded .reveal{opacity:0;transform:translateY(24px)}
.js-loaded .reveal.visible{opacity:1;transform:translateY(0)}

/* ─── RESPONSIVE ─── */
@media(max-width:768px){
    .container{padding:0 1.25rem}
    .section{padding:3rem 0}
    .nav-links{display:none;position:fixed;inset:0;background:rgba(11,16,38,0.98);flex-direction:column;justify-content:center;align-items:center;gap:2rem;z-index:200}
    .nav-links.open{display:flex}
    .nav-links.open .nav-close{display:block}
    .nav-toggle{display:flex}
    .hero-content{max-width:100%}
    .hero-stats{gap:1.5rem}
    .hero-morph{display:none}
    .hero-actions{flex-direction:column}
    .hero-actions .btn-primary,.hero-actions .btn-ghost{width:100%;justify-content:center}
    .offers-grid,.pricing-grid{grid-template-columns:1fr}
    .portfolio-grid,.portfolio-full-grid{grid-template-columns:1fr}
    .pf-card.pf-featured{grid-column:1;grid-template-columns:1fr}
    .process-grid{grid-template-columns:1fr 1fr;gap:1.5rem}
    .features-grid,.diff-grid,.maintenance-grid,.addons-grid,.need-grid{grid-template-columns:1fr}
    .about-grid,.contact-grid,.case-hero-grid{grid-template-columns:1fr}
    .case-hero-visual{height:200px}
    .contact-reassurance{flex-direction:column;gap:1rem}
    .portfolio-filters{flex-wrap:wrap;gap:.5rem}
    .page-hero{padding:4rem 0 2rem}
    .budget-pills{flex-direction:column}
    .cta-buttons{flex-direction:column;align-items:center}
    .footer-nav,.footer-social,.footer-legal{flex-wrap:wrap;justify-content:center}
}

@media(max-width:480px){
    .hero-h1{font-size:1.6rem}
    .hero-stats{flex-direction:column;gap:1rem;align-items:flex-start}
    .process-grid{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════
   PAGE BRIEF CLIENT — Minuit Luxe
   ═══════════════════════════════════════════ */

.brief-section {
    min-height: 100vh;
    padding: 4rem 0 6rem;
}

.brief-outer {
    max-width: 680px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* ─── EN-TÊTE ─── */
.brief-header {
    text-align: center;
    padding-bottom: 2.5rem;
    border-bottom: .5px solid var(--border);
    margin-bottom: 2.5rem;
}

.brief-main-title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 400;
    line-height: 1.2;
    margin: .75rem 0 .5rem;
}

.brief-main-title em { color: var(--gold); font-style: italic; }

.brief-main-desc {
    font-size: .85rem;
    color: var(--text-dim);
    max-width: 480px;
    margin: 0 auto;
    line-height: 1.7;
}

.brief-rule {
    width: 40px;
    height: 1px;
    background: var(--gold);
    margin: 1.5rem auto 0;
    opacity: .6;
}

/* ─── BARRE DE PROGRESSION ─── */
.brief-progress {
    display: flex;
    align-items: flex-start;
    margin-bottom: 2.5rem;
}

.bp-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.bp-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 14px;
    left: 50%;
    width: 100%;
    height: 1px;
    background: var(--border);
    z-index: 0;
    transition: background .3s;
}

.bp-step.done::after { background: rgba(212,168,83,.4); }

.bp-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(245,240,232,.12);
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--text-muted);
    z-index: 1;
    transition: all .25s;
    position: relative;
}

.bp-check { display: none; }

.bp-step.done .bp-dot {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--bg);
}

.bp-step.done .bp-num  { display: none; }
.bp-step.done .bp-check { display: inline; }

.bp-step.active .bp-dot {
    border-color: var(--gold);
    color: var(--gold);
    box-shadow: 0 0 0 3px rgba(212,168,83,.12);
}

.bp-label {
    font-size: 9px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 6px;
    text-align: center;
}

.bp-step.active .bp-label,
.bp-step.done .bp-label { color: var(--gold); opacity: .8; }

/* ─── ÉTAPES ─── */
.brief-step { display: none; }
.brief-step.active { display: block; }

.step-eyebrow {
    font-size: .68rem;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: .5rem;
    font-weight: 400;
}

.step-title {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    font-weight: 400;
    color: var(--text);
    margin-bottom: .5rem;
    line-height: 1.25;
}

.step-desc {
    font-size: .83rem;
    color: var(--text-dim);
    line-height: 1.75;
    margin-bottom: 2rem;
    padding-left: 1rem;
    border-left: 1px solid var(--border);
}

/* ─── CHAMPS ─── */
.bf-field { margin-bottom: 1.4rem; }

.bf-label {
    display: block;
    font-size: .68rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
    font-weight: 400;
}

.bf-label .req { color: var(--gold); margin-left: 2px; }

.bf-input,
.bf-select,
.bf-textarea {
    width: 100%;
    padding: 11px 16px;
    background: rgba(212,168,83,.03);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    font-family: var(--font-body);
    font-size: .875rem;
    transition: border-color .2s;
    -webkit-appearance: none;
}

.bf-input::placeholder,
.bf-textarea::placeholder { color: var(--text-muted); }

.bf-input:focus,
.bf-select:focus,
.bf-textarea:focus {
    outline: none;
    border-color: rgba(212,168,83,.45);
}

.bf-select { cursor: pointer; }
.bf-select option { background: var(--bg); }

.bf-textarea {
    resize: vertical;
    min-height: 90px;
    line-height: 1.6;
}

.bf-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.bf-hr {
    border: none;
    border-top: .5px solid var(--border);
    margin: 1.75rem 0;
}

/* ─── PILLS ─── */
.bf-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bf-pill {
    padding: 7px 16px;
    border: 1px solid var(--border);
    border-radius: 3px;
    font-size: .8rem;
    cursor: pointer;
    color: var(--text-dim);
    background: transparent;
    letter-spacing: .02em;
    transition: all .18s;
    font-family: var(--font-body);
}

.bf-pill:hover {
    border-color: var(--border-hover);
    color: var(--gold);
}

.bf-pill.active {
    background: rgba(212,168,83,.12);
    border-color: var(--gold);
    color: var(--gold);
}

/* ─── CHECKBOXES ─── */
.bf-checks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.bf-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    transition: all .18s;
    background: rgba(212,168,83,.02);
}

.bf-check:hover { border-color: var(--border-hover); }

.bf-check.active {
    border-color: var(--gold);
    background: rgba(212,168,83,.08);
}

.bf-check input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--gold);
    flex-shrink: 0;
    cursor: pointer;
}

.bf-check span {
    font-size: .82rem;
    color: var(--text-dim);
}

.bf-check.active span { color: var(--text); }

/* ─── NAVIGATION ─── */
.brief-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 0 0;
    margin-top: 1.5rem;
    border-top: .5px solid var(--border);
}

.brief-counter {
    font-size: .7rem;
    color: var(--text-muted);
    letter-spacing: .1em;
}

/* ─── ERREUR ─── */
.brief-error {
    margin-top: 1rem;
    padding: .85rem 1.1rem;
    border: 1px solid rgba(220,80,80,.3);
    border-radius: 4px;
    background: rgba(220,80,80,.06);
    font-size: .82rem;
    color: #E88080;
}

/* ─── SUCCÈS ─── */
.brief-success {
    text-align: center;
    padding: 3rem 1rem;
}

.success-icon {
    font-size: 1.5rem;
    color: var(--gold);
    margin-bottom: 1.5rem;
}

.success-title {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 400;
    margin-bottom: .75rem;
    color: var(--text);
}

.success-title em { color: var(--gold); font-style: italic; }

.success-desc {
    font-size: .875rem;
    color: var(--text-dim);
    max-width: 400px;
    margin: 0 auto 2rem;
    line-height: 1.75;
}

.success-desc strong { color: var(--gold); font-weight: 500; }

/* ─── RESPONSIVE ─── */
@media (max-width: 540px) {
    .bf-row       { grid-template-columns: 1fr; }
    .bf-checks    { grid-template-columns: 1fr; }
    .brief-nav    { gap: .75rem; }
    .bp-label     { display: none; }
}

/* ============================================
   BLOG STYLES — Elyaweb Minuit Luxe
   À ajouter dans ton style.css ou dans un 
   fichier blog.css inclus via functions.php
   ============================================ */

/* ----- BLOG LISTING (home.php) ----- */

.blog-hero {
    text-align: center;
    padding: 120px 20px 60px;
    max-width: 700px;
    margin: 0 auto;
}

.blog-hero .section-label {
    display: inline-block;
    font-size: 0.75rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 1rem;
}

.blog-hero h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    margin-bottom: 1rem;
}

.blog-hero h1 em {
    font-style: italic;
    color: var(--accent, #c8a86e);
}

.blog-hero-desc {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.6);
    max-width: 500px;
    margin: 0 auto;
}

/* Grille d'articles */
.blog-grid-section {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px 80px;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 2rem;
}

/* Card article */
.blog-card {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.blog-card:hover {
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-4px);
}

.blog-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.blog-card-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.blog-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.blog-card:hover .blog-card-img img {
    transform: scale(1.05);
}

.blog-card-content {
    padding: 1.5rem;
}

.blog-card-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 0.75rem;
}

.blog-card-cat {
    background: rgba(255, 255, 255, 0.08);
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.blog-card-content h2 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.blog-card-content p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.blog-card-read {
    font-size: 0.85rem;
    color: var(--accent, #c8a86e);
    transition: opacity 0.3s ease;
}

.blog-card:hover .blog-card-read {
    opacity: 0.8;
}

/* Pagination */
.blog-pagination {
    text-align: center;
    margin-top: 3rem;
}

.blog-pagination .blog-page-links {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.blog-pagination a,
.blog-pagination span {
    padding: 0.5rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: all 0.3s ease;
}

.blog-pagination a:hover {
    border-color: var(--accent, #c8a86e);
    color: var(--accent, #c8a86e);
}

.blog-pagination .current {
    background: var(--accent, #c8a86e);
    border-color: var(--accent, #c8a86e);
    color: #000;
}

/* Blog vide */
.blog-empty {
    text-align: center;
    padding: 80px 20px;
    color: rgba(255, 255, 255, 0.4);
}

/* CTA Blog */
.blog-cta {
    text-align: center;
    padding: 80px 20px;
    max-width: 600px;
    margin: 0 auto;
}

.blog-cta h2 {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    margin-bottom: 0.75rem;
}

.blog-cta p {
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 2rem;
}


/* ----- SINGLE POST (single.php) ----- */

.single-post {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Breadcrumb */
.single-post .breadcrumb {
    padding: 6rem 0 1.5rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
}

.breadcrumb a {
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb a:hover {
    color: var(--accent, #c8a86e);
}

/* Post Header */
.post-header {
    margin-bottom: 2.5rem;
}

.post-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.post-cat {
    background: rgba(255, 255, 255, 0.08);
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.post-reading-time {
    opacity: 0.7;
}

.post-header h1 {
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1.3;
    margin-bottom: 1rem;
}

.post-excerpt {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.7;
}

/* Thumbnail */
.post-thumbnail {
    width: 100%;
    margin-bottom: 3rem;
    border-radius: 12px;
    overflow: hidden;
}

.post-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
}

/* Contenu article */
.post-content {
    font-size: 1.05rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.75);
}

.post-content h2 {
    font-size: 1.6rem;
    margin: 2.5rem 0 1rem;
    color: #fff;
}

.post-content h3 {
    font-size: 1.25rem;
    margin: 2rem 0 0.75rem;
    color: #fff;
}

.post-content p {
    margin-bottom: 1.25rem;
}

.post-content a {
    color: var(--accent, #c8a86e);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.post-content a:hover {
    opacity: 0.8;
}

.post-content ul,
.post-content ol {
    margin: 1rem 0 1.5rem 1.5rem;
}

.post-content li {
    margin-bottom: 0.5rem;
}

.post-content blockquote {
    border-left: 3px solid var(--accent, #c8a86e);
    padding: 1rem 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 0 8px 8px 0;
}

.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1.5rem 0;
}

.post-content code {
    background: rgba(255, 255, 255, 0.08);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.9em;
}

.post-content pre {
    background: rgba(255, 255, 255, 0.05);
    padding: 1.25rem;
    border-radius: 8px;
    overflow-x: auto;
    margin: 1.5rem 0;
}

.post-content pre code {
    background: none;
    padding: 0;
}

/* Tags */
.post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.post-tag {
    background: rgba(255, 255, 255, 0.06);
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
}

/* Auteur */
.post-author-box {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-top: 3rem;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
}

.post-author-info strong {
    display: block;
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.post-author-info p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.6;
    margin: 0;
}

/* Navigation articles */
.post-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.post-nav-link {
    text-decoration: none;
    color: inherit;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    transition: border-color 0.3s ease;
}

.post-nav-link:hover {
    border-color: rgba(255, 255, 255, 0.2);
}

.post-nav-next {
    text-align: right;
}

.post-nav-label {
    display: block;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 0.3rem;
}

.post-nav-title {
    font-size: 0.95rem;
    color: #fff;
}

/* CTA Article */
.post-cta {
    text-align: center;
    padding: 80px 0;
    max-width: 600px;
    margin: 0 auto;
}

.post-cta h2 {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    margin-bottom: 0.75rem;
}

.post-cta p {
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 2rem;
}


/* ----- RESPONSIVE ----- */

@media (max-width: 768px) {
    .blog-grid {
        grid-template-columns: 1fr;
    }

    .post-nav {
        grid-template-columns: 1fr;
    }

    .post-nav-next {
        text-align: left;
    }

    .blog-hero {
        padding: 100px 20px 40px;
    }
}

/* ============================================
   AJOUTER À LA FIN DE TON style.css
   Styles pour Résultats & Stack technique
   ============================================ */

/* Résultats */
.case-results p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1.25rem;
    max-width: 800px;
}

/* Stack technique */
.case-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.stack-item {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    transition: border-color 0.3s ease;
}

.stack-item:hover {
    border-color: var(--accent, #c8a86e);
    color: var(--accent, #c8a86e);
}