/*
Theme Name: Éclat d’Hommage
Theme URI: https://example.com/
Author: (généré par M365 Copilot)
Author URI: https://example.com/
Description: Thème WordPress inspiré de votre visuel (aquarelle, tons sauge/beige, typographies élégantes). Idéal pour une page d’accueil « one-page »: services, avant/après, zone d’intervention et contact.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: eclat-hommage
Tags: one-column, custom-logo, custom-menu, featured-images, block-styles, wide-blocks
*/

:root{
  --bg: #f0ece6;           /* papier */
  --paper: #efe9e1;
  --ink: #3f3f38;          /* texte */
  --muted: #6c6d62;
  --sage: #7b8476;         /* accent */
  --sage-2:#a9a99d;
  --line: rgba(63,63,56,.18);
  --shadow: 0 10px 30px rgba(63,63,56,.12);
  --radius: 18px;
  --max: 1100px;
}

/* Base */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  font-family: ui-serif, Georgia, 'Times New Roman', serif;
  line-height:1.65;
  background: var(--bg) url('assets/paper-texture.png') center/cover fixed;
}
img{max-width:100%;height:auto}
a{color:var(--sage);text-decoration:none}
a:hover{text-decoration:underline}

.container{width:min(var(--max), 92vw); margin-inline:auto}

/* Typographies */
.h-script{font-family: 'Great Vibes', 'Brush Script MT', cursive; font-weight:400; letter-spacing:.5px}
.h-serif{font-family: 'Cormorant Garamond', Georgia, serif}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  background: rgba(240,236,230,.72);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 0}
.site-brand{display:flex; align-items:center; gap:12px}
.site-brand .site-title{margin:0; font-size:1.15rem}
.site-brand .site-title a{color:var(--ink)}
.site-brand .site-tagline{margin:0; color:var(--muted); font-size:.95rem}

.nav-toggle{display:none}
.primary-nav ul{list-style:none; display:flex; gap:16px; padding:0; margin:0}
.primary-nav a{color:var(--ink); padding:8px 10px; border-radius:999px}
.primary-nav a:hover{background: rgba(123,132,118,.12); text-decoration:none}

/* Hero */
.hero{position:relative; padding:68px 0 44px}
.hero:before{
  content:''; position:absolute; inset:0;
  background:
    url('assets/floral-corner.png') left top/260px no-repeat,
    url('assets/floral-corner.png') right top/260px no-repeat;
  opacity:.55;
  pointer-events:none;
}
.hero-card{
  position:relative;
  background: rgba(239,233,225,.74);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 34px 28px;
}
.kicker{color:var(--muted); font-size:1.05rem; margin:0 0 10px}
.hero h1{margin:0 0 6px; font-size:clamp(2.2rem, 4vw, 3.4rem)}
.hero .sub{margin:0 0 20px; font-style:italic; color:var(--muted)}
.hero .cta{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 16px; border-radius:999px;
  border:1px solid var(--line);
  background: rgba(123,132,118,.14);
  color:var(--ink);
}
.btn.primary{background: var(--sage); color:#fff; border-color: transparent}
.btn:hover{text-decoration:none; filter:brightness(0.98)}

/* Sections */
.section{padding:46px 0}
.section-title{
  display:flex; align-items:center; gap:14px;
  margin:0 0 18px; font-size:2.1rem
}
.section-title:after{content:''; height:1px; flex:1; background: linear-gradient(90deg, var(--line), transparent)}
.card{
  background: rgba(239,233,225,.72);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
}
.grid{display:grid; gap:18px}
.grid.two{grid-template-columns: repeat(2, minmax(0,1fr))}
.grid.three{grid-template-columns: repeat(3, minmax(0,1fr))}

.services ul{margin:0; padding-left:18px}
.services li{margin:6px 0}

.ba{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:14px;
}
.ba .item{padding:14px; border-radius:14px; border:1px dashed rgba(63,63,56,.25); background: rgba(255,255,255,.25)}
.ba .item h3{margin:0 0 8px; font-size:1.05rem}
.ba .thumb{aspect-ratio: 4/3; border-radius:12px; background: linear-gradient(135deg, rgba(169,169,157,.45), rgba(123,132,118,.18)); border:1px solid var(--line)}

.contact-list{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.contact-item{display:flex; gap:10px; align-items:flex-start}
.contact-item svg{width:20px; height:20px; color:var(--sage)}

.site-footer{padding:28px 0 40px; border-top:1px solid var(--line); background: rgba(240,236,230,.72)}
.footer-inner{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px}

/* WordPress blocks / content */
.entry-content > *{max-width: 68ch}
.entry-content img{border-radius: 14px}

/* Responsive */
@media (max-width: 860px){
  .grid.two,.grid.three{grid-template-columns:1fr}
  .primary-nav ul{gap:8px}
}
@media (max-width: 720px){
  .header-inner{flex-wrap:wrap}
  .hero{padding-top:44px}
  .primary-nav ul{flex-wrap:wrap}
}