/*
Theme Name:     Twenty Twelve Elsa
Description:    Thème modernisé pour la boutique Elsa Studio
Author:         CelineDesign / Elsa Studio
Template:       twentytwelve
*/
@import url("../twentytwelve/style.css");
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Playfair+Display:ital,wght@0,500;0,600;1,500&display=swap');

:root { --kaki:#858d7e; --kaki-clair:#e2e4dc; --encre:#2d342e; --creme:#f7f5ef; --ligne:#d8d8ce; }
* { box-sizing:border-box; }
body { background:linear-gradient(135deg,#f8f7f2 0%,#efeee7 100%); color:var(--encre); font:16px/1.7 'DM Sans',Arial,sans-serif; }
body:before, body:after { content:''; position:fixed; z-index:-1; width:500px; height:500px; background:url('img/arabesque-kaki.png') center/contain no-repeat; opacity:.34; pointer-events:none; }
body:before { right:-210px; top:-200px; transform:rotate(22deg); }
body:after { bottom:-245px; left:-200px; transform:rotate(-18deg); }
a { color:var(--kaki); text-decoration:none; }
a:hover { color:var(--encre); }

/* Structure générale WordPress */
.site { max-width:1180px; margin:0 auto; background:transparent; color:var(--encre); box-shadow:none; }
.site-header { padding:48px 6.5% 22px; border-bottom:1px solid var(--ligne); }
.site-header h1 { margin:0; }
.site-title a { display:block; width:174px; height:145px; overflow:hidden; text-indent:-9999px; background:none; content:url('img/logo-kaki.png'); mix-blend-mode:multiply; }
.site-title a:hover { opacity:.78; }
.site-description { display:none; }

/* Navigation et panier */
.main-navigation { margin-top:10px; text-align:right; }
.main-navigation li { margin:0 0 0 24px; }
.main-navigation li a, .main-navigation li a:hover, .main-navigation .current-menu-item > a, .main-navigation .current_page_item > a { padding:10px 0; color:var(--encre); font-size:10px; font-weight:600; letter-spacing:.1em; line-height:1.3; text-transform:uppercase; }
.main-navigation li a:hover, .main-navigation .current-menu-item > a, .main-navigation .current_page_item > a { color:var(--kaki); }
.main-navigation .menu-toggle { border:1px solid var(--kaki); border-radius:0; background:transparent; color:var(--encre); font-family:'DM Sans',Arial,sans-serif; letter-spacing:.1em; text-transform:uppercase; }

/* Contenu, galeries et articles */
.wrapper { padding:0 6.5%; }
.site-content { width:68%; margin:0; }
.widget-area { width:24%; padding-top:56px; }
.site-content article { margin-bottom:72px; padding:56px 0 0; border:0; }
.entry-header { margin-bottom:24px; }
.entry-title, .entry-title a { color:var(--encre); font:500 clamp(32px,4vw,54px)/1.12 'Playfair Display',Georgia,serif; letter-spacing:-.035em; }
.entry-title a:hover { color:var(--kaki); }
.entry-content, .entry-summary { color:#555d54; line-height:1.8; }
.entry-content p, .entry-summary p { margin-bottom:1.6em; }
.entry-content h1, .entry-content h2, .entry-content h3 { color:var(--encre); font-family:'Playfair Display',Georgia,serif; font-weight:500; }
.entry-content h2 { color:var(--kaki); }
.entry-content img, .entry-content .wp-caption { max-width:100%; height:auto; border:0; box-shadow:none; }
.entry-content .gallery { margin:32px -8px; }
.gallery-item { padding:8px; }
.gallery-icon img { border:0!important; padding:0!important; transition:transform .3s ease,filter .3s ease; }
.gallery-icon a { display:block; overflow:hidden; background:var(--kaki-clair); }
.gallery-icon a:hover img { transform:scale(1.035); filter:saturate(1.08); }
.gallery-caption { color:#687067; font-size:11px; }

/* Boutons, choix tarifaires et panier PayPal */
.prices { display:flex; flex-wrap:wrap; gap:20px; padding:12px 0 28px; float:none; }
.prices > div { min-width:160px; padding:20px; border:1px solid var(--ligne); background:rgba(255,255,255,.45); text-align:center; }
.prices > div:first-child { margin-right:0; }
.prices > div > p { margin:0; padding:0; font-size:1em; }
.prices > div > p .price { color:var(--kaki); font-family:'Playfair Display',Georgia,serif; font-size:1.35em; }
button, input[type="button"], input[type="reset"], input[type="submit"], .paypal-button button, .paypal-button button::before, .paypal-button button::after, #PPMiniCart p input { border:1px solid var(--kaki)!important; border-radius:0!important; background:var(--kaki)!important; background-image:none!important; color:#fff!important; font-family:'DM Sans',Arial,sans-serif!important; font-size:11px!important; font-style:normal!important; font-weight:600!important; letter-spacing:.1em; text-shadow:none!important; text-transform:uppercase; box-shadow:none!important; }
button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, .paypal-button button:hover { background:var(--encre)!important; border-color:var(--encre)!important; }
#PPMiniCart form { padding-top:14px!important; background:#fff!important; box-shadow:0 18px 55px rgba(45,52,46,.16)!important; }
#PPMiniCart .minicart-item { border-color:var(--ligne)!important; }
#PPMiniCart .minicart-quantity { border-color:var(--ligne)!important; }

/* Barre latérale, formulaires et bas de page */
.widget-area .widget { margin-bottom:35px; padding-bottom:25px; border-bottom:1px solid var(--ligne); }
.widget-title { color:var(--kaki); font:600 10px/1.3 'DM Sans',Arial,sans-serif; letter-spacing:.16em; text-transform:uppercase; }
.widget-area a { color:var(--encre); }
.widget-area a:hover { color:var(--kaki); }
input[type="text"], input[type="email"], input[type="password"], textarea, select { max-width:100%; border:1px solid var(--ligne); border-radius:0; background:rgba(255,255,255,.58); color:var(--encre); font-family:'DM Sans',Arial,sans-serif; }
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, textarea:focus { border-color:var(--kaki); outline:0; }
footer[role="contentinfo"] { max-width:none; margin-top:70px; padding:34px 6.5%; border-top:1px solid var(--ligne); background:rgba(255,255,255,.28); color:#697068; }
footer[role="contentinfo"] a { color:var(--kaki); }

@media screen and (max-width:960px) { .site-header, .wrapper, footer[role="contentinfo"] { padding-left:5%; padding-right:5%; } .site-content { width:64%; } .widget-area { width:28%; } }
@media screen and (max-width:600px) { body:before { right:-330px; top:-210px; } .site-header { padding-top:26px; } .site-title a { width:138px; height:116px; } .main-navigation { margin-top:0; text-align:left; } .main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul { border:0; } .main-navigation li { margin-left:0; } .site-content, .widget-area { width:100%; } .site-content article { padding-top:38px; } .entry-title, .entry-title a { font-size:36px; } .prices > div { width:100%; } }