/*
Theme Name: Emeline Esthétique
Theme URI: https://emeline-esthetique.example
Author: Emeline Esthétique
Description: Thème sur mesure pour Emeline Esthétique — soins à domicile au Mans. Fonctionne avec l'extension « Emeline Esthétique — Cœur métier » (réservation, clientes, avis). Gutenberg natif, sans constructeur de pages.
Version: 1.8.0
Requires at least: 6.2
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: emeline-esthetique
*/

:root {
	--ee-rose: #c08497;        /* vieux rose */
	--ee-rose-fonce: #a96a80;
	--ee-poudre: #f6e3e7;      /* rose poudré */
	--ee-poudre-clair: #fbf3f5;
	--ee-blanc: #fffdfd;
	--ee-encre: #43333a;
	--ee-muet: #8a767d;
	--ee-ligne: #ecd9de;
	--ee-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--ee-sans: "Jost", "Segoe UI", system-ui, sans-serif;
	--ee-larg: 1080px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
	margin: 0;
	font-family: var(--ee-sans);
	font-size: 17px;
	line-height: 1.65;
	color: var(--ee-encre);
	background: var(--ee-blanc);
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--ee-rose-fonce); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--ee-rose); outline-offset: 2px; }

h1, h2, h3 { font-family: var(--ee-serif); font-weight: 500; line-height: 1.15; color: var(--ee-encre); }
h1 { font-size: clamp(2.3rem, 5.5vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); }

.ee-container { max-width: var(--ee-larg); margin: 0 auto; padding: 0 22px; }
.ee-narrow { max-width: 780px; }

/* ---------- En-tête ---------- */
.ee-header { position: sticky; top: 0; z-index: 40; background: rgba(255, 253, 253, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--ee-ligne); }
.ee-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 22px; max-width: var(--ee-larg); margin: 0 auto; }
.ee-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.ee-logo img { height: 52px; width: auto; }
.ee-logo-text { font-family: var(--ee-serif); font-style: italic; font-size: 1.35rem; color: var(--ee-encre); }
.ee-nav ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.ee-nav a { text-decoration: none; color: var(--ee-encre); font-size: .92rem; letter-spacing: .04em; }
.ee-nav a:hover { color: var(--ee-rose-fonce); }
.ee-nav .current-menu-item > a, .ee-nav .current_page_item > a { color: var(--ee-rose-fonce); border-bottom: 1px solid var(--ee-rose); }
.ee-cta { background: var(--ee-rose); color: #fff !important; padding: 10px 22px; border-radius: 999px; border-bottom: 0 !important; font-weight: 500; }
.ee-cta:hover { background: var(--ee-rose-fonce); color: #fff; }
.ee-burger { display: none; background: none; border: 1px solid var(--ee-ligne); border-radius: 8px; padding: 8px 12px; font-size: 1.15rem; cursor: pointer; color: var(--ee-encre); }
@media (max-width: 880px) {
	.ee-burger { display: block; }
	.ee-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--ee-blanc); border-bottom: 1px solid var(--ee-ligne); padding: 14px 22px 20px; }
	.ee-nav.is-open { display: block; }
	.ee-nav ul { flex-direction: column; gap: 14px; }
}

/* ---------- Héros ---------- */
.ee-hero { background: linear-gradient(180deg, var(--ee-poudre-clair), var(--ee-blanc)); padding: 76px 0 66px; text-align: center; position: relative; overflow: hidden; }
.ee-hero h1 { margin: 0 0 10px; }
.ee-hero h1 em { font-style: italic; color: var(--ee-rose-fonce); }
.ee-hero-sub { font-size: 1.06rem; color: var(--ee-muet); letter-spacing: .05em; margin: 0 0 30px; }
.ee-hero .ee-btn { margin: 0 6px 10px; }

/* Fleur signature en filigrane */
.ee-hero-flower { position: absolute; right: -40px; top: -30px; width: 260px; opacity: .5; pointer-events: none; }
@media (max-width: 700px) { .ee-hero-flower { width: 160px; right: -50px; } }

/* Séparateur floral */
.ee-divider { display: flex; align-items: center; gap: 18px; margin: 0 auto 34px; max-width: 320px; color: var(--ee-rose); }
.ee-divider::before, .ee-divider::after { content: ""; flex: 1; border-top: 1px solid var(--ee-ligne); }

/* ---------- Sections ---------- */
.ee-section { padding: 62px 0; }
.ee-section-alt { background: var(--ee-poudre-clair); }
.ee-section h2 { text-align: center; margin: 0 0 8px; }
.ee-section-intro { text-align: center; color: var(--ee-muet); max-width: 620px; margin: 0 auto 38px; }

.ee-btn { display: inline-block; background: var(--ee-rose); color: #fff; text-decoration: none; font-weight: 500; padding: 13px 30px; border-radius: 999px; transition: background .15s; }
.ee-btn:hover { background: var(--ee-rose-fonce); color: #fff; }
.ee-btn-ghost { background: transparent; color: var(--ee-encre); border: 1px solid var(--ee-rose); }
.ee-btn-ghost:hover { background: var(--ee-poudre); color: var(--ee-encre); }

/* Cartes prestations (accueil) */
.ee-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.ee-card { background: var(--ee-blanc); border: 1px solid var(--ee-ligne); border-radius: 18px 18px 60px 18px; padding: 26px 24px; }
.ee-card h3 { margin: 0 0 8px; font-size: 1.25rem; }
.ee-card p { margin: 0; color: var(--ee-muet); font-size: .93rem; }

/* Présentation */
.ee-about { display: grid; grid-template-columns: 300px 1fr; gap: 44px; align-items: center; }
.ee-about-photo { aspect-ratio: 3/4; background: var(--ee-poudre); border-radius: 150px 150px 18px 18px; display: flex; align-items: center; justify-content: center; color: var(--ee-rose); font-family: var(--ee-serif); font-style: italic; overflow: hidden; }
.ee-about-photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) { .ee-about { grid-template-columns: 1fr; } .ee-about-photo { max-width: 260px; margin: 0 auto; } }

/* Zone couverte */
.ee-zone { text-align: center; font-size: 1.02rem; }
.ee-zone strong { color: var(--ee-rose-fonce); }

/* Contenu de page standard */
.ee-page-head { background: var(--ee-poudre-clair); padding: 52px 0 42px; text-align: center; }
.ee-page-head h1 { margin: 0; }
.ee-content { padding: 46px 0 70px; }
.ee-content .ee-container > *:first-child { margin-top: 0; }

/* Galerie Gutenberg adoucie */
.wp-block-gallery img, .wp-block-image img { border-radius: 14px; }

/* ---------- Pied de page ---------- */
.ee-footer { background: var(--ee-encre); color: #e9dde1; padding: 46px 0 26px; margin-top: 40px; }
.ee-footer a { color: var(--ee-poudre); }
.ee-footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 30px; margin-bottom: 26px; }
.ee-footer h4 { font-family: var(--ee-serif); font-style: italic; font-size: 1.15rem; margin: 0 0 10px; color: #fff; }
.ee-footer ul { list-style: none; margin: 0; padding: 0; }
.ee-footer li { margin-bottom: 6px; }
.ee-footer-bottom { border-top: 1px solid rgba(255,255,255,.14); padding-top: 16px; font-size: .82rem; color: #bda9b0; text-align: center; }
.ee-footer-bottom a { color: #d8c3ca; }

/* Colonne de marque : logo optionnel, accroche, texte libre. */
.ee-footer-brand p { margin: 0 0 8px; }
.ee-footer-logo { margin-bottom: 12px; }
/* Le logo est clair : sur fond encre il faut le laisser respirer, pas l'assombrir. */
.ee-footer-logo img { max-width: 170px; height: auto; }
.ee-footer-extra { color: #c9b6bd; font-size: .9rem; }
.ee-footer-hint { color: #c9b6bd; font-size: .88rem; font-style: italic; }
.ee-footer-hours li { color: #d3c2c8; font-size: .9rem; }

/* Réseaux sociaux : icône en trait fin + libellé, cliquable en entier. */
.ee-social { display: grid; gap: 2px; }
.ee-social-link {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 5px 8px; margin-left: -8px; border-radius: 8px;
	text-decoration: none; transition: background .15s, color .15s;
}
.ee-social-link:hover, .ee-social-link:focus-visible { background: rgba(255,255,255,.09); color: #fff; }
.ee-social-link:focus-visible { outline: 2px solid var(--ee-poudre); outline-offset: 1px; }
.ee-social-icon { flex: none; }

@media (max-width: 640px) {
	/* Sur mobile, les réseaux se lisent mieux côte à côte que empilés. */
	.ee-social { grid-template-columns: 1fr 1fr; }
	.ee-footer-grid { gap: 26px; }
}