/*
Theme Name: Paroisse Beauce Patay v2
Theme URI: http://example.com/
Author: Generated by ChatGPT
Description: Thème WordPress responsive - ble / Beauce - menu 3D desktop + burger mobile (panneau lateral clair).
Version: 2.0
License: GNU General Public License v2 or later
Text Domain: paroisse-beauce-patay
*/

:root{
  --color-wheat: #F6E8C7;
  --color-gold: #C99B4A;
  --color-olive: #7D6A3A;
  --color-dark: #2d2a24;
  --color-light: #fffaf6;
  --menu-btn-dark: #8c5b2a; /* darker menu buttons */
  --max-width: 980px;
  --transition-fast: 260ms;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial; background:var(--color-light); color:var(--color-dark); -webkit-font-smoothing:antialiased}
a{color:var(--color-olive); text-decoration:none}
a:hover{opacity:0.9}

/* Container */
.site{max-width:var(--max-width);margin:0 auto;padding:20px}

/* Header */
.site-header{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:12px 0;position:relative;z-index:20}
.brand-row{display:flex;align-items:center;gap:12px;width:100%;justify-content:space-between}
.site-branding{display:flex;align-items:center;gap:12px}
.site-title{font-size:26px;margin:0;color:var(--color-dark);display:flex;align-items:center;gap:12px}
.site-title img.logo{width:56px;height:56px;border-radius:8px;object-fit:contain;background:linear-gradient(135deg,var(--color-wheat),var(--color-gold));padding:6px;box-shadow:0 6px 18px rgba(0,0,0,0.08)}

/* Desktop 3D Menu */
.main-navigation{width:100%;perspective:1200px}
.menu{display:flex;gap:12px;list-style:none;padding:0;margin:12px 0 0 0}
.menu li{transform-style:preserve-3d;transition:transform var(--transition-fast) cubic-bezier(.2,.8,.2,1);}
.menu li a{display:block;padding:12px 18px;border-radius:8px;background:linear-gradient(180deg,rgba(255,255,255,0.6),rgba(255,255,255,0.1));box-shadow:0 6px 14px rgba(0,0,0,0.06);backface-visibility:hidden;transform-origin:center; font-weight:600;color:var(--menu-btn-dark)}
.menu li:hover{transform:translateY(-6px) rotateX(8deg);box-shadow:0 18px 30px rgba(0,0,0,0.10)}

/* Content */
.content-area{width:100%}
.entry{background:#fff;padding:18px;border-radius:10px;box-shadow:0 8px 22px rgba(0,0,0,0.04);margin-bottom:20px}

/* Footer 3 columns */
.site-footer{margin-top:32px;padding:24px 0;border-top:1px solid rgba(0,0,0,0.06)}
.footer-widgets{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.footer-widget{background:linear-gradient(180deg,rgba(246,232,199,0.12),rgba(201,155,74,0.04));padding:14px;border-radius:8px}

/* Mobile: burger + sliding panel */
.burger{display:none;align-items:center;gap:10px;background:none;border:0;padding:8px;cursor:pointer}
.burger .lines{width:28px;height:18px;position:relative;display:inline-block}
.burger .lines span{position:absolute;height:3px;width:100%;left:0;background:var(--color-dark);border-radius:3px;transition:transform var(--transition-fast),opacity var(--transition-fast);}
.burger .lines span:nth-child(1){top:0;}
.burger .lines span:nth-child(2){top:7px;}
.burger .lines span:nth-child(3){top:14px;}

/* when active, animate to X */
.burger.active .lines span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger.active .lines span:nth-child(2){opacity:0;}
.burger.active .lines span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* mobile panel */
.mobile-panel{position:fixed;top:0;left:0;height:100vh;width:300px;max-width:85%;background:var(--color-wheat);box-shadow:4px 12px 40px rgba(0,0,0,0.25);transform:translateX(-110%);transition:transform 320ms cubic-bezier(.2,.9,.25,1);z-index:40;padding:22px 18px;overflow:auto}
.mobile-panel.open{transform:translateX(0);}
.mobile-panel .panel-brand{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.mobile-panel img.logo{width:56px;height:56px;border-radius:8px;object-fit:contain}
.mobile-panel .panel-title{font-weight:700;font-size:18px;color:var(--color-dark)}

/* overlay */
.mobile-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.25);opacity:0;pointer-events:none;transition:opacity 260ms;z-index:35}
.mobile-overlay.visible{opacity:1;pointer-events:auto}

/* mobile menu list */
.mobile-menu{list-style:none;padding:0;margin:10px 0 0 0;display:flex;flex-direction:column;gap:8px}
.mobile-menu a{display:block;padding:10px 12px;border-radius:8px;background:transparent;color:var(--menu-btn-dark);font-weight:600}

/* Responsive rules */
@media (max-width:800px){
  .menu{display:none}
  .burger{display:inline-flex}
  .site-title{font-size:20px}
  .footer-widgets{grid-template-columns:1fr;gap:12px}
}

/* Accessibility */
.menu a:focus, .mobile-menu a:focus{outline:3px solid rgba(201,155,74,0.25);outline-offset:3px}