/*
Theme Name: MESA Pro Mobile
Theme URI: https://www.mesa-consulting.fr
Author: MESA Consulting
Author URI: https://www.mesa-consulting.fr
Description: Thème MESA optimisé mobile avec menu hamburger et Customizer images.
Version: 1.4.0
Text Domain: mesa-pro-mobile
*/

:root{ --brand-black:#0E0E0E; --brand-white:#FFFFFF; --brand-grey:#CFCFCF; --brand-cyan:#00BEE8; }
html,body{background:var(--brand-black);color:var(--brand-white);line-height:1.7;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial}
a{color:var(--brand-cyan);text-decoration:none}
a:hover{opacity:.9}
img{max-width:100%;height:auto}
.container{max-width:1120px;margin:0 auto;padding:0 20px}
.site-header{padding:18px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.brand{display:flex;align-items:center;gap:14px;font-weight:800;text-transform:uppercase;letter-spacing:.5px}
.brand .bar{height:4px;width:64px;background:var(--brand-cyan);display:block}
.nav{margin-left:auto;display:flex;gap:20px}
.nav a{color:var(--brand-grey)}
.nav a:hover{color:var(--brand-white)}
.nav-toggle{display:none;background:none;border:none;font-size:26px;color:#fff;cursor:pointer}
.hero{padding:120px 0 80px; position:relative; overflow:hidden;}
.hero::before{content:""; position:absolute; inset:0; background-size:cover; background-position:center; background-image: var(--hero-url, none); opacity:.28;}
.hero > .container{position:relative}
.hero h1{font-size:clamp(34px,6vw,56px);line-height:1.1;margin:0 0 12px}
.hero .subtitle{color:var(--brand-grey);max-width:780px}
.btn{display:inline-block;padding:12px 20px;border-radius:8px;font-weight:700;background:var(--brand-cyan);color:var(--brand-black)}
.btn:hover{background:#ecfeff;color:#000}
.section{padding:64px 0}
.section h2{font-size:clamp(26px,4vw,34px);margin:0 0 18px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:20px}
.card h3{margin-top:0}
.card .thumb{height:140px;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.04);margin-bottom:12px;background-size:cover;background-position:center}
.about{display:grid;grid-template-columns:1.1fr .9fr;gap:24px}
.about .photo{border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.04);min-height:280px;background-size:cover;background-position:center}
.site-footer{border-top:1px solid rgba(255,255,255,.08);color:var(--brand-grey);padding:30px 0;font-size:14px}
@media (max-width: 900px){
  .site-header .container { display:flex; flex-wrap:wrap; align-items:center; }
  .nav-toggle { display:block; margin-left:auto; }
  .nav { display:none; flex-direction:column; gap:12px; width:100%; margin-top:10px; background:rgba(0,0,0,0.85); padding:10px; border-radius:8px; }
  .nav.open { display:flex; }
  .nav a { padding:10px; font-size:18px; color:#fff; }
  .hero { padding:56px 0 32px; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .about { grid-template-columns: 1fr; }
  .about .photo { min-height:220px; margin-top:12px; }
}
@media (max-width: 640px){
  .grid-3 { grid-template-columns: 1fr; }
  .card .thumb { height: 180px; }
  .btn { width:100%; text-align:center; }
  .section { padding: 40px 0; }
  .site-header { padding: 14px 0; }
}