/* sections.css - styles propres a chaque section */

/* === HERO-SPLIT === */
.hero-split{
  position:relative;
  padding:32px 0 56px;
}
@media (min-width:768px){.hero-split{padding:56px 0 96px}}

.hero-split__inner{
  max-width:var(--container);
  margin:0 auto;
  padding:0 20px;
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
  align-items:center;
}
@media (min-width:768px){
  .hero-split__inner{
    grid-template-columns:1.05fr .95fr;
    gap:clamp(32px,4vw,72px);
    padding:0 32px;
  }
}

.hero-split__eyebrow{margin-bottom:18px}
.hero-split__title{
  font-family:var(--ff-display);
  font-size:clamp(2.3rem,7vw,3.9rem);
  line-height:1.04;
  color:var(--text);
  margin-bottom:18px;
  font-weight:500;
}
.hero-split__title em{
  font-style:italic;
  color:var(--accent-deep);
  position:relative;
  white-space:nowrap;
}
.hero-split__title em::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:.05em;
  height:.32em;
  background:var(--accent-soft);
  z-index:-1;
  transform:skewX(-4deg);
}
.hero-split__sub{
  font-size:1.05rem;
  line-height:1.65;
  color:var(--text-2);
  max-width:46ch;
  margin-bottom:28px;
}
@media (min-width:768px){.hero-split__sub{font-size:1.13rem}}

/* Hero usps */
.hero-usps{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:28px;
}

/* Hero CTA - mobile EMPILES pleine largeur (regle PIEGE PROD #2) */
.hero-split__cta{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.hero-split__cta .btn{width:100%}
@media (min-width:540px){
  .hero-split__cta{flex-direction:row;flex-wrap:wrap}
  .hero-split__cta .btn{width:auto;flex:0 0 auto}
}

/* Hero photo media */
.hero-split__media{
  position:relative;
  width:100%;
  aspect-ratio:4/5;
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:0 20px 50px rgba(42,34,24,.18);
  order:-1;
}
@media (min-width:768px){
  .hero-split__media{order:0;aspect-ratio:4/5}
}
.hero-split__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(1.04) contrast(1.02);
}
.hero-split__media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(160deg,transparent 60%,rgba(42,34,24,.18) 100%);
}
.hero-tag{
  position:absolute;
  bottom:16px;
  left:16px;
  z-index:2;
  background:rgba(244,236,221,.92);
  color:var(--text);
  font-family:var(--ff-ui);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  padding:8px 14px;
  border-radius:var(--r-sm);
  backdrop-filter:blur(4px);
}
.hero-tag em{
  font-family:var(--ff-display);
  font-style:italic;
  color:var(--accent-deep);
  text-transform:none;
  letter-spacing:0;
  font-size:.95rem;
}

/* === STATS STRIP === */
.stats-strip{
  background:var(--surface);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:32px 0;
}
@media (min-width:768px){.stats-strip{padding:44px 0}}
.stats-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  text-align:left;
}
@media (min-width:640px){
  .stats-grid{grid-template-columns:repeat(3,1fr);text-align:center;gap:32px}
}
.stat-item{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:12px 0;
  border-left:2px solid var(--accent);
  padding-left:16px;
}
@media (min-width:640px){
  .stat-item{border-left:none;border-top:2px solid var(--accent);padding:18px 0 0;align-items:center}
}
.stat-number{
  font-family:var(--ff-display);
  font-size:clamp(2rem,4.5vw,2.8rem);
  font-weight:500;
  color:var(--text);
  line-height:1;
  letter-spacing:-.01em;
}
.stat-number em{
  font-style:italic;
  color:var(--accent-deep);
  font-size:.85em;
}
.stat-label{
  font-family:var(--ff-ui);
  font-size:.8rem;
  letter-spacing:.06em;
  color:var(--text-2);
  text-transform:uppercase;
}

/* === SERVICES (LAY-1 grid-3, card=line) === */
.svc-section .section-head{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-bottom:36px;
  max-width:760px;
}
@media (min-width:768px){.svc-section .section-head{margin-bottom:52px}}
.section-head h2{
  font-family:var(--ff-display);
  letter-spacing:-.01em;
}
.section-head h2 em{
  font-style:italic;
  color:var(--accent-deep);
}
.section-intro{
  font-size:1.02rem;
  color:var(--text-2);
  line-height:1.65;
  max-width:58ch;
}

.svc-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}
@media (min-width:640px){.svc-grid{grid-template-columns:repeat(2,1fr);gap:20px}}
@media (min-width:1024px){.svc-grid{grid-template-columns:repeat(3,1fr);gap:24px}}

.svc-card{
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:28px 24px;
  background:var(--surface);
  transition:border-color var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast);
  display:flex;
  flex-direction:column;
  gap:14px;
  min-height:200px;
}
.svc-card:hover{
  border-color:var(--accent);
  transform:translateY(-3px);
  box-shadow:0 10px 30px rgba(154,107,63,.10);
}
.svc-card__num{
  font-family:var(--ff-display);
  font-size:1.6rem;
  font-style:italic;
  color:var(--accent);
  line-height:1;
}
.svc-card__title{
  font-family:var(--ff-display);
  font-size:1.3rem;
  font-weight:500;
  color:var(--text);
  line-height:1.2;
}
.svc-card__text{
  font-size:.95rem;
  color:var(--text-2);
  line-height:1.6;
}
.svc-card__tag{
  margin-top:auto;
  padding-top:14px;
  font-family:var(--ff-ui);
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-mute);
  border-top:1px solid var(--border);
}

/* === A PROPOS === */
.apropos{
  background:var(--bg-alt);
}
.apropos__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
  align-items:center;
}
@media (min-width:768px){
  .apropos__grid{grid-template-columns:.95fr 1fr;gap:56px}
}
.apropos__photo{
  width:100%;
  aspect-ratio:4/5;
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:0 16px 40px rgba(42,34,24,.16);
  position:relative;
}
.apropos__photo img{width:100%;height:100%;object-fit:cover;filter:saturate(1.04)}
.apropos__photo-tag{
  position:absolute;
  bottom:16px;
  left:16px;
  background:rgba(244,236,221,.94);
  color:var(--text);
  font-family:var(--ff-ui);
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:8px 12px;
  border-radius:var(--r-sm);
}
.apropos__text p{
  font-size:1.02rem;
  line-height:1.7;
  color:var(--text);
  margin-bottom:18px;
}
.apropos__text p::first-letter{
  font-family:var(--ff-display);
  font-size:2.6em;
  font-weight:500;
  float:left;
  line-height:.88;
  padding:6px 10px 0 0;
  color:var(--accent-deep);
  font-style:italic;
}
.apropos__text p:not(:first-of-type)::first-letter{font-size:1em;float:none;padding:0;color:inherit;font-style:normal}
.apropos__signature{
  margin-top:24px;
  padding-top:18px;
  border-top:1px solid var(--border);
  font-family:var(--ff-display);
  font-style:italic;
  color:var(--accent-deep);
  font-size:1.1rem;
}

/* === GALERIE (LAY-1 gallery=grid) === */
.galerie{background:var(--bg)}
.gal-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
@media (min-width:560px){.gal-grid{grid-template-columns:repeat(2,1fr);gap:16px}}
@media (min-width:900px){.gal-grid{grid-template-columns:repeat(3,1fr);gap:18px}}

.gal-item{
  margin:0;
  position:relative;
  cursor:zoom-in;
  border-radius:var(--r-md);
  overflow:hidden;
  aspect-ratio:4/3;
  background:var(--bg-alt);
}
.gal-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s ease;
  filter:saturate(1.04) contrast(1.02);
}
.gal-item:hover img{transform:scale(1.05)}
.gal-item::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 65%,rgba(42,34,24,.32) 100%);
  opacity:0;
  transition:opacity var(--t-fast);
}
.gal-item:hover::after{opacity:1}
.gal-caption{
  position:absolute;
  bottom:12px;
  left:14px;
  z-index:2;
  font-family:var(--ff-ui);
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#fff;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .3s,transform .3s;
}
.gal-item:hover .gal-caption{opacity:1;transform:translateY(0)}
.gal-note{
  margin-top:24px;
  font-size:.85rem;
  color:var(--text-mute);
  font-style:italic;
}

/* === AVIS HONNETE === */
.avis{background:var(--bg-alt)}
.avis-honest{
  max-width:720px;
  margin:0 auto;
  text-align:center;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:40px 28px;
}
@media (min-width:768px){.avis-honest{padding:56px 48px}}
.avis-honest__icon{
  width:60px;
  height:60px;
  border-radius:50%;
  background:var(--accent-soft);
  display:grid;
  place-items:center;
  color:var(--accent-deep);
  margin:0 auto 22px;
}
.avis-honest__icon svg{width:28px;height:28px}
.avis-honest h3{
  font-family:var(--ff-display);
  font-size:clamp(1.35rem,3vw,1.85rem);
  margin-bottom:18px;
  color:var(--text);
  line-height:1.2;
}
.avis-honest h3 em{font-style:italic;color:var(--accent-deep)}
.avis-honest p{
  color:var(--text-2);
  line-height:1.7;
  margin-bottom:16px;
  font-size:1rem;
  max-width:54ch;
  margin-left:auto;
  margin-right:auto;
}
.avis-honest__cta{
  margin-top:28px;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:center;
}
@media (min-width:540px){.avis-honest__cta{flex-direction:row;justify-content:center;flex-wrap:wrap}}

/* === FAQ === */
.faq{background:var(--bg)}
.faq-list{
  max-width:780px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:0;
}
.faq-item{
  border-bottom:1px solid var(--border);
}
.faq-trigger{
  width:100%;
  text-align:left;
  padding:22px 0;
  font-family:var(--ff-display);
  font-size:clamp(1.05rem,2vw,1.2rem);
  color:var(--text);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  font-weight:500;
}
.faq-trigger:hover{color:var(--accent-deep)}
.faq-chevron{
  flex-shrink:0;
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--accent-soft);
  color:var(--accent-deep);
  display:grid;
  place-items:center;
  transition:transform var(--t-med);
  margin-top:2px;
}
.faq-chevron::before{
  content:"";
  width:8px;
  height:8px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
}
.faq-trigger[aria-expanded="true"] .faq-chevron{transform:rotate(180deg)}
.faq-answer{padding:0 0 22px}
.faq-answer p{color:var(--text-2);line-height:1.65;font-size:.98rem}

/* === ZONE === */
.zone{background:var(--bg-alt)}
.zone__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:28px;
}
@media (min-width:768px){
  .zone__grid{grid-template-columns:1fr 1fr;gap:40px;align-items:center}
}
.zone__chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:18px 0 28px;
}
.zone__map{
  width:100%;
  aspect-ratio:4/3;
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--border);
}
.zone__map iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}
.zone__dispo{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:14px 18px;
  font-family:var(--ff-ui);
  font-size:.95rem;
  color:var(--text);
}
.zone__dispo::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--wa-green);
  box-shadow:0 0 0 4px rgba(37,211,102,.18);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 4px rgba(37,211,102,.18)}
  50%{box-shadow:0 0 0 8px rgba(37,211,102,.08)}
}

/* === CONTACT === */
.contact{
  background:var(--primary);
  color:#F4ECDD;
  padding-bottom:72px;
}
.contact h2,
.contact h3{color:#F4ECDD}
.contact h2 em{color:var(--accent-2)}
.contact p,
.contact .muted{color:#D9CCB1}
.contact .eyebrow{color:var(--accent-2)}
.contact .eyebrow::before{background:var(--accent-2)}

.contact__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:36px;
}
@media (min-width:880px){
  .contact__grid{grid-template-columns:1fr 1fr;gap:56px;align-items:start}
}
.contact__info{display:flex;flex-direction:column;gap:24px}
.contact__tel{
  font-family:var(--ff-display);
  font-size:clamp(1.8rem,5vw,2.6rem);
  font-style:italic;
  color:var(--accent-2);
  display:inline-flex;
  align-items:center;
  gap:14px;
  line-height:1.1;
}
.contact__tel svg{width:28px;height:28px;color:var(--accent-2)}
.contact__row{display:flex;align-items:center;gap:14px}
.contact__row svg{width:22px;height:22px;color:var(--accent-2);flex-shrink:0}
.contact__row p{color:#F4ECDD;font-size:.98rem;margin:0}
.contact__row strong{display:block;color:#F4ECDD;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-2);margin-bottom:2px;font-weight:500}

.contact__cta{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:8px;
}
@media (min-width:540px){.contact__cta{flex-direction:row;flex-wrap:wrap}}
.contact__cta .btn{flex:1 1 auto;min-width:0}

.contact__form{
  background:rgba(244,236,221,.06);
  border:1px solid rgba(244,236,221,.14);
  border-radius:var(--r-lg);
  padding:28px 24px;
}
@media (min-width:768px){.contact__form{padding:36px 32px}}
.contact__form .field label{color:#D9CCB1}
.contact__form .field input,
.contact__form .field textarea,
.contact__form .field select{
  background:rgba(244,236,221,.04);
  border:1px solid rgba(244,236,221,.22);
  color:#F4ECDD;
}
.contact__form .field input::placeholder,
.contact__form .field textarea::placeholder{color:rgba(244,236,221,.55)}
.contact__form .field input:focus,
.contact__form .field textarea:focus,
.contact__form .field select:focus{
  border-color:var(--accent-2);
  box-shadow:0 0 0 3px rgba(193,148,103,.22);
}
.contact__form h3{
  font-family:var(--ff-display);
  font-size:1.25rem;
  margin-bottom:18px;
  color:#F4ECDD;
}

/* === LIGHTBOX === */
.lightbox{
  position:fixed;
  inset:0;
  z-index:var(--z-modal);
  background:rgba(20,16,10,.94);
  display:flex;
  align-items:center;
  justify-content:center;
}
.lightbox[hidden]{display:none !important}
.lb-img{
  max-width:92vw;
  max-height:86vh;
  object-fit:contain;
  border-radius:var(--r-md);
}
.lb-close,.lb-prev,.lb-next{
  position:absolute;
  background:rgba(244,236,221,.12);
  color:#F4ECDD;
  width:48px;
  height:48px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:1.4rem;
}
.lb-close{top:18px;right:18px}
.lb-prev{left:14px;top:50%;transform:translateY(-50%)}
.lb-next{right:14px;top:50%;transform:translateY(-50%)}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:rgba(244,236,221,.22)}