@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(https://www.webinfun.com/assets/fonts/JetBrains_Mono/static/JetBrainsMono-Regular.ttf) format('truetype')}
    @font-face{font-family:'Fraunces';font-style:normal;font-weight:300 900;font-display:swap;src:url(https://www.webinfun.com/assets/fonts/Fraunces/static/Fraunces_144pt-Regular.ttf) format('truetype')}
    
    :root{
        --bleu-profond:#0B3577;
        --bleu-nuit:#22439E;
        
        --bleu-electrique:#2563AE;
        --bleu-clair:#4795B9;
        --blanc-casse:#F8F9FC;
        --gris-tres-clair:#F0F2F6;
        --gris-clair:#E2E6EC;
        --gris-moyen:#6B7A8F;
        --gris-fonce:#2D3A4B;
        --font-titres:'Fraunces', serif;
        --font-texte:'JetBrains Mono', monospace;
        
        --curve-gentle:cubic-bezier(0.3, 0.1, 0.1, 1.3);
        --space-xs:0.5rem;
        --space-sm:1rem;
        --space-md:1.5rem;
        --space-lg:2.5rem;
        --space-xl:4rem;
        --radius-md:0.5rem;
        --radius-full:9999px;
        --shadow-sm:0 4px 6px rgba(11, 53, 119, 0.05);
        --shadow-md:0 10px 25px rgba(11, 53, 119, 0.1);
    }
    
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{font-family:var(--font-texte);font-size:16px;line-height:1.7;color:var(--gris-fonce);background-color:var(--blanc-casse);-webkit-font-smoothing:antialiased}
    
    .boutique-container{width:100%;max-width:1280px;margin:0 auto;padding:0 var(--space-md)}
    
    
    .boutique-site-header{background:rgb(248 249 252 / .95);border-bottom:1px solid var(--gris-clair);position:sticky;top:0;z-index:100;backdrop-filter:blur(10px)}
    .boutique-site-header .boutique-container{display:flex;justify-content:space-between;align-items:center;height:85px}
    .boutique-logo{display:block;line-height:0}
    .boutique-logo img{display:block;max-width:180px;height:auto;transition:opacity 0.3s}
    .boutique-logo:hover img{opacity:.9}
    
    .boutique-nav-menu{display:flex;align-items:center;gap:var(--space-lg);list-style:none}
    .boutique-nav-menu a{color:var(--gris-fonce);font-weight:500;font-size:.95rem;padding:.5rem 0;position:relative;letter-spacing:-.02em;text-decoration:none}
    .boutique-nav-menu a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--bleu-electrique);transition:width 0.4s var(--curve-gentle)}
    .boutique-nav-menu a:hover::after,.boutique-nav-menu a.boutique-active::after{width:100%}
    
    .boutique-nav-cta{background:var(--bleu-electrique);color:white!important;padding:.6rem 1.2rem!important;border-radius:30px;transition:all 0.3s;text-decoration:none;font-weight:500}
    .boutique-nav-cta:hover{background:var(--bleu-profond);transform:translateY(-2px);box-shadow:var(--shadow-md)}
    .boutique-nav-cta::after{display:none!important}
    
    .boutique-nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:.5rem}
    .boutique-nav-toggle span{display:block;width:25px;height:2px;background:var(--bleu-profond);margin:5px 0;transition:all 0.3s}
    
    
    .boutique-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:1rem 2rem;font-family:var(--font-texte);font-size:.9rem;font-weight:600;border-radius:var(--radius-md);border:2px solid transparent;cursor:pointer;transition:all 0.4s var(--curve-gentle);text-transform:uppercase;letter-spacing:.05em;line-height:1;text-decoration:none}
    .boutique-btn-primary{background:var(--bleu-profond);color:white!important}
    .boutique-btn-primary:hover{background:var(--bleu-nuit);transform:translateY(-2px);box-shadow:var(--shadow-md)}


    .boutique-btn-outline{background:transparent;color:var(--bleu-profond);border-color:var(--bleu-profond)}
    .boutique-btn-outline:hover{background:var(--bleu-profond);color:#fff}
    
    h1,h2,h3,h4{font-family:var(--font-titres);font-weight:600;line-height:1.2;color:var(--bleu-profond)}
    
    
    .boutique-hero-shop{background:linear-gradient(135deg,var(--bleu-profond) 0%,var(--bleu-nuit) 100%);padding:var(--space-xl) 0;text-align:center;color:#fff}
    .boutique-hero-shop h1{font-size:clamp(2rem, 4vw, 3.5rem);color:#fff;margin-bottom:var(--space-md)}
    .boutique-hero-shop p{font-size:1.2rem;color:rgb(255 255 255 / .9);margin-bottom:var(--space-sm)}
    
    .boutique-templates-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-lg);padding:var(--space-xl) 0}
    .boutique-template-card{background:#fff;border:1px solid var(--gris-clair);border-radius:var(--radius-md);overflow:hidden;transition:all 0.4s var(--curve-gentle);box-shadow:var(--shadow-sm)}
    .boutique-template-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--bleu-clair)}
    .boutique-template-card a{text-decoration:none;color:inherit}
    .boutique-template-image{height:200px;background:var(--gris-tres-clair);display:flex;align-items:center;justify-content:center;overflow:hidden}
    .boutique-template-image img{width:100%;height:100%;object-fit:cover}
    .boutique-template-content{padding:var(--space-md)}
    .boutique-template-content h3{font-size:1.25rem;margin-bottom:var(--space-xs);color:var(--bleu-profond)}
    .boutique-template-content p{color:var(--gris-moyen);font-size:.9rem;margin-bottom:var(--space-sm)}
    .boutique-template-price{color:var(--bleu-electrique);font-weight:600;font-size:1.1rem;font-family:var(--font-titres)}
    .boutique-template-price-original{text-decoration:line-through;color:var(--gris-moyen);font-size:.9rem;margin-right:var(--space-xs)}
    .boutique-badge-promo{position:absolute;top:10px;right:10px;background:var(--bleu-electrique);color:#fff;padding:.25rem .75rem;border-radius:var(--radius-full);font-size:.75rem;font-weight:600}
    
    .boutique-alert{padding:var(--space-md);border-radius:var(--radius-md);margin:var(--space-md) 0}
    .boutique-alert-info{background:var(--gris-tres-clair);border:1px solid var(--gris-clair);color:var(--gris-fonce)}
    
    
    .boutique-site-footer{background:#082558;color:#fff;padding:var(--space-xl) 0 var(--space-lg)}
    .boutique-footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--space-xl);margin-bottom:var(--space-xl)}
    .boutique-footer-brand{text-align:center}
    .boutique-footer-brand .boutique-logo{color:#fff;margin-bottom:var(--space-sm);display:inline-block}
    .boutique-footer-brand img{max-width:180px;height:auto}
    .boutique-footer-brand p{color:rgb(255 255 255 / .7);font-size:.95rem;margin-bottom:var(--space-xs)}
    .boutique-footer-brand .boutique-tagline{color:var(--bleu-clair);font-style:italic;font-size:.9rem}
    
    .boutique-footer-links h4{color:var(--bleu-clair);font-size:1.1rem;margin-bottom:var(--space-md);font-weight:600}
    .boutique-footer-links ul{list-style:none}
    .boutique-footer-links li{margin-bottom:.75rem}
    .boutique-footer-links a{color:rgb(255 255 255 / .7);font-size:.9rem;transition:all 0.2s ease;text-decoration:none}
    .boutique-footer-links a:hover{color:#fff;padding-left:5px}
    
    .boutique-footer-social{display:flex;gap:15px;margin-top:var(--space-sm);justify-content:center}
    .boutique-footer-social a{color:#fff;transition:all 0.3s}
    .boutique-footer-social a:hover{opacity:.7;transform:translateY(-2px)}
    .boutique-footer-social svg{width:22px;height:22px;fill:currentColor}
    
    .boutique-footer-bottom{border-top:1px solid rgb(255 255 255 / .1);padding-top:var(--space-lg);display:flex;justify-content:space-between;align-items:center;font-size:.9rem;color:rgb(255 255 255 / .6);flex-wrap:wrap;gap:var(--space-sm)}
    .boutique-footer-bottom a{color:rgb(255 255 255 / .7);text-decoration:none}
    .boutique-footer-bottom a:hover{color:#fff;text-decoration:underline}
    
    
    @media (max-width:1024px){
        .boutique-footer-grid{grid-template-columns:repeat(2,1fr)}
    }
    @media (max-width:768px){
        .boutique-nav-menu{position:fixed;top:85px;left:0;right:0;background:#fff;flex-direction:column;padding:var(--space-md);gap:var(--space-sm);transform:translateY(-150%);opacity:0;visibility:hidden;transition:all 0.3s ease;border-bottom:1px solid var(--gris-clair);box-shadow:var(--shadow-md);z-index:99}
        .boutique-nav-menu.boutique-active{transform:translateY(0);opacity:1;visibility:visible}
        .boutique-nav-toggle{display:block}
        .boutique-nav-toggle.boutique-active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
        .boutique-nav-toggle.boutique-active span:nth-child(2){opacity:0}
        .boutique-nav-toggle.boutique-active span:nth-child(3){transform:rotate(-45deg) translate(7px,-7px)}
        .boutique-footer-grid{grid-template-columns:1fr;gap:var(--space-lg);text-align:center}
        .boutique-footer-bottom{flex-direction:column;text-align:center}
        .boutique-logo img{max-width:140px}
    }
