/* ---------- Base ---------- */
:root{
  --bg:#ffffff;
  --alt:#f7fbf8;
  --text:#1d1f21;
  --muted:#6b7280;
  --primary:#64c5a1;    /* vert pastel */
  --primary-ink:#0f3d2e;/* foncé pour contraste */
  --ring: rgba(100,197,161,.35);
  --card:#ffffff;
  --border:#e6e8eb;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Poppins, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  text-rendering:optimizeLegibility;
}

img{max-width:100%; display:block}

/* ---------- Layout ---------- */
.container{width:min(1100px, 92%); margin-inline:auto}
.section{padding:72px 0}
.section--alt{background:var(--alt)}
.section-title{margin:0 0 28px; font-size:clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem)}
.section-intro{color:var(--muted); margin:0 0 24px}

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky; top:0; z-index:20;
  backdrop-filter:saturate(1.2) blur(6px);
  background:color-mix(in srgb, var(--bg) 84%, transparent);
  border-bottom:1px solid var(--border);
}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; padding:10px 0}
.brand{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  background:var(--primary); color:#fff; text-decoration:none; font-weight:600;
}
.nav__toggle{display:none; background:none; border:1px solid var(--border); padding:6px 10px; border-radius:8px}
.nav__list{display:flex; gap:18px; list-style:none; margin:0; padding:0}
.nav__list a{color:var(--text); text-decoration:none; padding:8px 10px; border-radius:8px}
.nav__list a:hover{background:var(--border)}

/* Responsive menu */
@media (max-width:820px){
  .nav__toggle{display:inline-block}
  .nav__list{display:none; flex-direction:column; background:#fff; position:absolute; right:4%; top:56px; padding:12px; border:1px solid var(--border); border-radius:12px; box-shadow:0 22px 40px -24px var(--ring)}
  .nav__list.is-open{display:flex}
}

/* ---------- Hero moderne avec animation ---------- */
.hero {
  position: relative;
  width: 100%;
  min-height: clamp(45vh, 60vh, 70vh);
  background: url("images/accueil.jpg") center/cover no-repeat;
  overflow: hidden;
}

/* Filtre léger (optionnel) */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.1);
  z-index: 1;
}


/* Texte du haut (nom) */
.hero__top-text {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: 100%;
  opacity: 0;
  animation: fadeInTop 2s ease-out 0.4s forwards; /* apparition douce */
}

/* Texte du bas (titre) */
.hero__bottom-text {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: 100%;
  opacity: 0;
  animation: fadeInBottom 2s ease-out 1s forwards; /* retard léger */
}

/* Style des titres */
.hero__top-text h2,
.hero__bottom-text h2 {
  font-family: "Dancing Script", "Segoe Script", cursive;
  font-size: clamp(3rem, 5vw + 1rem, 6rem);
  font-weight: 600;
  color: #111;
  text-shadow: 0 2px 6px rgba(255, 255, 255, 0.6);
  margin: 0;
  white-space: nowrap;
}

/* Animation d’apparition du haut */
@keyframes fadeInTop {
  from {
    opacity: 0;
    transform: translate(-50%, -20px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* Animation d’apparition du bas */
@keyframes fadeInBottom {
  from {
    opacity: 0;
    transform: translate(-50%, 20px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* Bouton en bas à droite */
.hero .btn {
  position: absolute;
  bottom: 30px;
  right: 40px;
  z-index: 2;
  font-size: 1rem;
  padding: 0.9rem 1.8rem;
  border-radius: 999px;
  animation: fadeUp 1.6s ease-out both;
}

/* Animation */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translate(-50%, 20px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* Version mobile : recentrer le bouton */
@media (max-width: 700px) {
  .hero__bottom-text h2 {
    font-size: 2rem;
  }
  .hero .btn {
    right: 50%;
    transform: translateX(50%);
    bottom: 20px;
  }
}

/* ---------- Grid helpers ---------- */
.grid-2{display:grid; grid-template-columns:1.1fr 1fr; gap:36px}
@media (max-width:880px){.grid-2{grid-template-columns:1fr; gap:20px}}

/* ---------- Portrait ---------- */

.profile {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap; /* passe sur mobile */
}

.profile__photo-portrait {
  max-width: 500px;
  height: auto; /* conserve proportions */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* optionnel pour relief */
}

.profile__text {
  flex: 1;
}

/* ---------- Lists ---------- */
.list{padding-left:1.2rem}
.list li{margin-bottom:.4rem}
.list--icons{list-style:none; padding-left:0}
.list--icons li{margin:0 0 .5rem; display:flex; gap:.5rem}

/* ---------- Cards (Prestations) ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 par ligne sur desktop */
  gap: 16px;
  row-gap: 100px;
  margin-top: 100px;
}
@media (max-width:1100px){.cards{grid-template-columns:repeat(2, 1fr)}}
@media (max-width:600px){.cards{grid-template-columns:1fr}}

.card{
  background:var(--card); padding:20px 18px 24px; border:1px solid var(--border); border-radius:16px;
  box-shadow:0 12px 24px -20px var(--ring);
}
.card__avatar {
  width:300px;
  height:300px;
  border-radius:50%;
  object-fit:cover;
  margin:-70px auto 10px;
  display:block;
  border:6px solid #fff;
  box-shadow:0 10px 24px -16px var(--ring);
}
.card h3{margin:6px 0 2px; text-align:center}
.card .price{color:var(--primary-ink); font-weight:600; text-align:center; margin:0}
.card .meta{color:var(--muted); font-size:.95rem; text-align:center; margin:2px 0 10px}
.card p{margin:.5rem 0}

.card p,
.section p {
  text-align: justify;
}

/* Effet agrandissement sur Prestations & Tarifs */
.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: scale(1.05);
  box-shadow: 0 14px 28px -15px var(--ring);
}

/* Effet zoom sur la photo ronde à l'intérieur */
.card__avatar {
  transition: transform 0.3s ease;
}

.card:hover .card__avatar {
  transform: scale(1.08);
}

/* ---------- Gallery ---------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 colonnes sur grand écran */
  gap: 14px;
}

@media (max-width: 1100px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr); /* idem pour écrans moyens */
  }
}

@media (max-width: 600px) {
  .gallery {
    grid-template-columns: 1fr; /* 1 image par ligne sur mobile */
  }
}

.gallery__item{
  position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--border);
  background:#fff; box-shadow:0 10px 24px -18px var(--ring);
  aspect-ratio: 1 / 1;            /* ← carré garanti pour chaque tuile */
}

.gallery__item img{
  width:100%; height:100%;        /* ← remplit le carré */
  object-fit:cover;                /* ← sans déformation */
  display:block;
}

.gallery__item figcaption {
  position: absolute;
  top: 0;                /* placé en haut */
  left: 0;               /* aligné à gauche */
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.5); /* fond semi-transparent */
  color: #fff;
  font-weight: 500;
  border-bottom-right-radius: 8px; /* petit arrondi bas-droite */
}

/* Effet zoom au survol pour la galerie */
.gallery__item {
  overflow: hidden; /* cache les bords pendant le zoom */
}

.gallery__item img {
  transition: transform .35s ease;  /* animation fluide */
  transform-origin: center;         /* zoom depuis le centre */
}

.gallery__item:hover img {
  transform: scale(1.08);           /* facteur de zoom */
  cursor: zoom-in;                  /* curseur loupe */
}

/* ---------- Contact ---------- */
.lead{font-size:1.05rem; margin:.2rem 0 .8rem}
.contact-form{background:var(--card); padding:18px; border:1px solid var(--border); border-radius:14px}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:12px}
input, textarea{
  border:1px solid var(--border); border-radius:12px; padding:12px 12px; font:inherit;
}
input:focus, textarea:focus{outline:2px solid var(--ring); border-color:var(--primary)}
.form-note{font-size:.85rem; color:var(--muted); margin-top:10px}

.contact__photo {
  display: block;
  max-width: 400px;
  height: auto;
  margin: 10px 0 10px 20px; /* centre la photo */
  border-radius: 8px; /* optionnel */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.contact__socials{
  display:flex; gap:14px; margin-top:10px;
}

.btn-social{
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  box-shadow:0 6px 16px -8px var(--ring);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

/* Facebook : cercle bleu et "f" blanc */
.btn-fb{ background:#1877F2; color:#fff; }

/* Google : cercle blanc, bord discret, logo multicolore */
.btn-g{
  background:#fff; border:1px solid var(--border);
}

/* Effet hover */
.btn-social:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 24px -12px var(--ring);
}


/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--border); background:#0f3d2e; color:#cfe8df}
.footer__inner{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:22px 0}
.site-footer a{color:#cfe8df; text-decoration:none}
.to-top{background:#134d3a; padding:6px 10px; border-radius:10px}

/* ---------- Notices ---------- */
.notice{
  background:#fff9e6; border:1px solid #ffe8a3; color:#7a5d12; padding:10px 12px; border-radius:10px; font-size:.95rem;
}

/* Bouton "Prendre rendez-vous" — version renforcée */
.btn.btn--primary{
  --grad-a: var(--primary);
  --grad-b: #8e44ad;
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px;
  border:none !important;
  border-radius:999px;
  background: linear-gradient(135deg, var(--grad-a) 0%, var(--grad-b) 100%) !important;
  color:#fff !important;
  font-weight:700;
  letter-spacing:.2px;
  text-decoration:none;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
  transform: translateZ(0);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.btn.btn--primary::before{
  content:"";
  width:1.1em; height:1.1em; display:inline-block;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.15));
  background:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'>\
<path d='M7 2a1 1 0 0 0-1 1v1H5a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3h-1V3a1 1 0 1 0-2 0v1H8V3a1 1 0 0 0-1-1zm12 8H5v9a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-9z'/>\
</svg>") center/contain no-repeat;
}
.btn.btn--primary:hover{
  transform: translateY(-3px) scale(1.03);
  box-shadow:0 16px 36px rgba(0,0,0,.26);
}
.btn.btn--primary:active{
  transform: translateY(-1px) scale(0.99);
  box-shadow:0 8px 20px rgba(0,0,0,.2);
}
.hero .btn.btn--primary{
  backdrop-filter: saturate(1.1) blur(2px);
  box-shadow:0 12px 28px rgba(0,0,0,.28);
}

/* Animation pulse douce */
@keyframes pulse-btn {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 14px 30px rgba(0,0,0,.25);
  }
}

/* Application de l'animation sur le bouton */
.btn.btn--primary {
  animation: pulse-btn 3s infinite;
}

/* Gérer le survol (hover) en priorité sur l'animation) */
.btn.btn--primary:hover {
  animation: none; /* pas de pulse quand on interagit */
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 16px 36px rgba(0,0,0,.26);
}