/* sections.css — styles propres aux sections */

/* ===== HERO-SPLIT ===== */
.hero{padding:0;}
.hero-split{
  display:grid;
  grid-template-columns:1fr;
  gap:28px;
  max-width:var(--container);
  margin:0 auto;
  padding:calc(var(--header-h-mobile) + 32px) 20px 56px;
  align-items:center;
}
@media (min-width:900px){
  .hero-split{
    grid-template-columns:1.05fr .95fr;
    gap:56px;
    padding:96px 32px;
  }
}
.hero-eyebrow{margin-bottom:18px;}
.hero-title{
  font-family:var(--ff-display);
  font-size:clamp(2.5rem,6.4vw,4.4rem);
  font-weight:500;
  line-height:1.04;
  letter-spacing:-.012em;
  color:var(--text);
  margin:0 0 22px;
}
.hero-title em{
  font-style:italic;
  color:var(--accent);
  position:relative;
}
.hero-title em::after{
  content:"";
  position:absolute;left:-2px;right:-2px;bottom:.05em;
  height:.32em;
  background:color-mix(in srgb,var(--accent) 18%,transparent);
  z-index:-1;
  border-radius:2px;
}
.hero-sub{
  font-size:clamp(1.02rem,1.6vw,1.18rem);
  color:var(--text-2);
  max-width:48ch;
  margin:0 0 28px;
}
.hero-pills{
  display:flex;flex-wrap:wrap;gap:8px;
  margin:0 0 28px;
}
.hero-cta{
  display:flex;flex-direction:column;gap:10px;
  width:100%;
}
.hero-cta .btn{width:100%;}
@media (min-width:600px){
  .hero-cta{flex-direction:row;flex-wrap:wrap;width:auto;}
  .hero-cta .btn{width:auto;}
}
.hero-meta{
  margin-top:22px;
  font-family:var(--ff-ui);font-size:.88rem;color:var(--text-mute);
}
.hero-media{
  position:relative;
  width:100%;
  aspect-ratio:4/5;
  border-radius:18px;
  overflow:hidden;
  order:-1;
}
@media (min-width:900px){.hero-media{order:0;aspect-ratio:4/5;}}
.hero-media img{width:100%;height:100%;object-fit:cover;display:block;}
.hero-media__tag{
  position:absolute;left:14px;bottom:14px;
  background:color-mix(in srgb,#fff 88%,transparent);
  backdrop-filter:blur(6px);
  padding:8px 14px;border-radius:999px;
  font-family:var(--ff-ui);font-size:.78rem;text-transform:uppercase;letter-spacing:.16em;
  color:var(--text);
  border:1px solid rgba(255,255,255,.4);
}

/* ===== STATS STRIP ===== */
.stats-strip{
  background:var(--bg-alt);
  padding:36px 0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.stats-grid{
  display:grid;grid-template-columns:1fr;gap:24px;
  text-align:center;
}
@media (min-width:640px){.stats-grid{grid-template-columns:repeat(3,1fr);}}
.stat-item{
  padding:10px 6px;
  border-top:1px solid var(--border);
}
@media (min-width:640px){
  .stat-item{
    border-top:0;border-left:1px solid var(--border);
  }
  .stat-item:first-child{border-left:0;}
}
.stat-number{
  display:block;
  font-family:var(--ff-display);
  font-size:clamp(2.4rem,5vw,3.4rem);
  font-weight:500;
  color:var(--accent);
  line-height:1;
  margin-bottom:8px;
  font-style:italic;
}
.stat-label{
  font-family:var(--ff-ui);font-size:.84rem;
  color:var(--text-2);
}

/* ===== SECTION HEAD (commun) ===== */
.sec-head{
  margin-bottom:36px;
  display:flex;flex-direction:column;gap:8px;
  max-width:60ch;
}
.sec-head h2{margin:0;}
.sec-head h2 em{color:var(--accent);font-style:italic;}
.sec-head p{margin:8px 0 0;}

/* ===== SERVICES (LAY-6 grid-asym) ===== */
.svc-asym{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}
@media (min-width:640px){
  .svc-asym{grid-template-columns:repeat(2,1fr);gap:22px;}
}
@media (min-width:1024px){
  .svc-asym{grid-template-columns:repeat(6,1fr);}
  .svc-asym__card{grid-column:span 2;}
  .svc-asym__card--lead{grid-column:span 4;}
  .svc-asym__card--wide{grid-column:span 3;}
}
.svc-asym__card{
  display:flex;flex-direction:column;gap:14px;
  min-height:230px;
}
.svc-asym__card--lead{
  min-height:260px;
}
.svc-num{
  font-family:var(--ff-display);
  font-style:italic;
  font-size:1.1rem;
  color:var(--accent);
  letter-spacing:.08em;
}
.svc-icon{
  width:46px;height:46px;border-radius:12px;
  display:grid;place-items:center;
  background:color-mix(in srgb,var(--accent) 12%,var(--bg));
  color:var(--accent);
}
.svc-icon svg{width:24px;height:24px;}
.svc-asym__card h3{font-size:1.32rem;line-height:1.15;margin:0;}
.svc-asym__card--lead h3{font-size:1.6rem;}
.svc-asym__card p{
  font-size:.97rem;color:var(--text-2);margin:0;
  line-height:1.55;
}
.svc-asym__card--lead p{color:var(--text-on-dark-2);}

/* ===== REALISATIONS (LAY-6 grid-feat) ===== */
.realisations{position:relative;}
.realisations-head{
  display:flex;flex-direction:column;gap:14px;
  margin-bottom:32px;
}
@media (min-width:768px){
  .realisations-head{
    flex-direction:row;align-items:flex-end;justify-content:space-between;gap:30px;
  }
}
.gal-feat{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  grid-auto-rows:160px;
  gap:12px;
}
@media (min-width:640px){.gal-feat{grid-auto-rows:200px;gap:14px;}}
@media (min-width:900px){
  .gal-feat{
    grid-template-columns:repeat(4,1fr);
    grid-auto-rows:200px;
  }
}
.gal-feat__item{
  position:relative;
  overflow:hidden;
  border-radius:14px;
  cursor:zoom-in;
  background:var(--bg-alt);
  transition:transform var(--t-med);
}
.gal-feat__item img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.gal-feat__item:hover img{transform:scale(1.06);}
.gal-feat__big{
  grid-column:span 2;grid-row:span 2;
}
@media (min-width:900px){.gal-feat__big{grid-column:span 2;grid-row:span 2;}}
.gal-feat__tag{
  position:absolute;left:10px;bottom:10px;
  background:color-mix(in srgb,#fff 90%,transparent);
  padding:5px 12px;border-radius:999px;
  font-family:var(--ff-ui);font-size:.72rem;
  text-transform:uppercase;letter-spacing:.14em;
  color:var(--text);
}
.gal-more{
  margin-top:24px;
  display:flex;justify-content:center;
}

/* ===== A PROPOS ===== */
.apropos{background:var(--bg-alt);}
.apropos-grid{
  display:grid;grid-template-columns:1fr;gap:36px;
  align-items:center;
}
@media (min-width:900px){
  .apropos-grid{grid-template-columns:1.1fr .9fr;gap:60px;}
}
.apropos-text p{font-size:1.02rem;color:var(--text-2);line-height:1.65;}
.apropos-text p:first-of-type::first-letter{
  font-family:var(--ff-display);
  font-style:italic;
  float:left;
  font-size:3.2rem;
  line-height:.85;
  color:var(--accent);
  padding:6px 10px 0 0;
}
.apropos-text p:first-of-type + p::first-letter{
  font-size:inherit;color:inherit;float:none;padding:0;font-style:inherit;
}
.apropos-points{
  margin:24px 0 0;
  display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;
}
@media (max-width:480px){.apropos-points{grid-template-columns:1fr;}}
.apropos-points li{
  display:flex;align-items:center;gap:10px;
  font-family:var(--ff-ui);font-size:.94rem;color:var(--text);
}
.apropos-points svg{width:18px;height:18px;color:var(--accent);flex-shrink:0;}
.apropos-signature{
  font-family:var(--ff-display);font-style:italic;
  font-size:1.18rem;color:var(--accent);
  margin:22px 0 0;display:inline-flex;align-items:center;gap:14px;
}
.apropos-signature::before{content:"";width:34px;height:1.5px;background:var(--accent);}
.apropos-media{
  position:relative;width:100%;aspect-ratio:4/5;
  border-radius:18px;overflow:hidden;
  border:1px solid var(--border);
}
.apropos-media img{width:100%;height:100%;object-fit:cover;display:block;}
.apropos-media__tag{
  position:absolute;left:14px;bottom:14px;
  background:color-mix(in srgb,#fff 90%,transparent);
  padding:7px 14px;border-radius:999px;
  font-family:var(--ff-ui);font-size:.74rem;
  text-transform:uppercase;letter-spacing:.16em;
  color:var(--text);
}

/* ===== AVIS (LAY-6 row-sep) ===== */
.avis-rows{display:flex;flex-direction:column;}
.avis-row{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:20px;
  padding:32px 0;
  border-top:1px solid var(--border);
}
.avis-rows .avis-row:last-child{border-bottom:1px solid var(--border);}
@media (min-width:768px){
  .avis-row{grid-template-columns:80px 1fr auto;gap:34px;}
}
.avis-num{
  font-family:var(--ff-display);font-style:italic;
  font-size:1.6rem;color:var(--accent);line-height:1;
}
.avis-content blockquote{
  font-family:var(--ff-display);font-style:italic;
  font-size:clamp(1.1rem,1.7vw,1.4rem);
  line-height:1.4;color:var(--text);
  margin:0 0 14px;
  position:relative;padding-left:18px;
}
.avis-content blockquote::before{
  content:"\201C";
  position:absolute;left:-4px;top:-12px;
  font-size:3rem;line-height:1;color:var(--accent);
  opacity:.35;
}
.avis-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  font-family:var(--ff-ui);font-size:.86rem;color:var(--text-mute);
}
.avis-meta .stars{order:-1;}
.avis-author{font-weight:500;color:var(--text);}
.avis-note{
  margin-top:18px;
  background:color-mix(in srgb,var(--accent) 6%,var(--bg));
  border-left:3px solid var(--accent);
  padding:14px 16px;
  border-radius:0 10px 10px 0;
  font-size:.92rem;color:var(--text-2);
  max-width:60ch;
}
.avis-link{
  margin-top:24px;
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--ff-ui);font-size:.95rem;color:var(--accent);
  text-decoration:underline;text-underline-offset:4px;
}
.avis-link:hover{color:#1b2d1f;}

/* ===== FAQ ===== */
.faq-list{display:flex;flex-direction:column;}
.faq-item{
  border-top:1px solid var(--border);
}
.faq-item:last-child{border-bottom:1px solid var(--border);}
.faq-trigger{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 4px;
  text-align:left;
  font-family:var(--ff-display);
  font-size:clamp(1.1rem,1.6vw,1.32rem);
  color:var(--text);
  font-weight:500;
  background:transparent;border:0;cursor:pointer;
  transition:color var(--t-fast);
}
.faq-trigger:hover{color:var(--accent);}
.faq-chevron{
  width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;
  background:color-mix(in srgb,var(--accent) 10%,var(--bg));
  color:var(--accent);
  flex-shrink:0;
  transition:transform var(--t-med),background var(--t-med);
}
.faq-chevron svg{width:14px;height:14px;}
.faq-trigger[aria-expanded="true"] .faq-chevron{
  transform:rotate(45deg);
  background:var(--accent);color:#fff;
}
.faq-answer{
  padding:0 4px 26px;
  color:var(--text-2);font-size:.98rem;line-height:1.6;
  max-width:64ch;
}
.faq-answer p{margin:0 0 .6em;}

/* ===== ZONE ===== */
.zone{background:var(--bg-alt);}
.zone-grid{
  display:grid;grid-template-columns:1fr;gap:32px;
}
@media (min-width:900px){.zone-grid{grid-template-columns:1fr 1.2fr;gap:48px;}}
.zone-info h2{margin:0 0 18px;}
.zone-chips{
  display:flex;flex-wrap:wrap;gap:8px;
  margin:18px 0 24px;
}
.zone-chips li{
  font-family:var(--ff-ui);font-size:.88rem;
  padding:8px 14px;border-radius:999px;
  background:color-mix(in srgb,var(--accent) 10%,var(--bg));
  border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
  color:var(--accent);
}
.horaires-table{
  display:grid;grid-template-columns:1fr auto;
  gap:6px 16px;
  margin:24px 0 0;
  font-family:var(--ff-ui);font-size:.95rem;
}
.horaires-table > div{
  display:contents;
}
.horaires-table .h-day{
  padding:9px 0;color:var(--text);
  text-transform:capitalize;
}
.horaires-table .h-hours{
  padding:9px 0;color:var(--text-2);text-align:right;
  font-variant-numeric:tabular-nums;
}
.horaires-table .is-today .h-day,
.horaires-table .is-today .h-hours{
  color:var(--accent);font-weight:500;
}
.horaires-table .is-closed .h-hours{color:var(--text-mute);}
.horaires-row{
  display:grid;grid-template-columns:1fr auto;gap:6px 16px;
  padding:9px 0;border-bottom:1px solid var(--border);
  font-family:var(--ff-ui);font-size:.94rem;
}
.horaires-row:last-child{border-bottom:0;}
.horaires-row.is-today{color:var(--accent);font-weight:500;}
.horaires-row.is-today .h-hours{color:var(--accent);}
.horaires-row .h-day{text-transform:capitalize;color:var(--text);}
.horaires-row .h-hours{color:var(--text-2);text-align:right;font-variant-numeric:tabular-nums;}
.horaires-row.is-closed .h-hours{color:var(--text-mute);}
.horaires-row.is-today .h-day{color:var(--accent);}

.map-wrap{
  position:relative;
  width:100%;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--border);
  background:var(--bg-alt);
}
.map-wrap iframe{
  display:block;width:100%;height:380px;border:0;
}
@media (max-width:640px){.map-wrap iframe{height:300px;}}

/* ===== CONTACT ===== */
.contact{
  background:var(--surface-deep);
  color:var(--text-on-dark);
}
.contact .sec-head h2{color:#fff;}
.contact .sec-head h2 em{color:var(--accent-on-dark);}
.contact .lede{color:var(--text-on-dark-2);}
.contact-grid{
  display:grid;grid-template-columns:1fr;gap:36px;
}
@media (min-width:900px){.contact-grid{grid-template-columns:1fr 1.2fr;gap:56px;}}
.contact-list{display:flex;flex-direction:column;gap:18px;margin:0 0 28px;}
.contact-row{
  display:flex;align-items:center;gap:14px; /* PIEGE PROD #3 : align-items:center */
  font-family:var(--ff-ui);
}
.contact-icon{
  width:42px;height:42px;border-radius:12px;flex-shrink:0;
  display:grid;place-items:center;
  background:rgba(255,255,255,.07);color:var(--accent-on-dark);
}
.contact-icon svg{width:20px;height:20px;}
.contact-row-text{display:flex;flex-direction:column;min-width:0;}
.contact-row-label{
  font-size:.74rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--text-on-dark-2);
}
.contact-row-value{font-size:1.02rem;color:#fff;}
.contact-row-value a{color:#fff;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,.3);}
.contact-row-value a:hover{text-decoration-color:var(--accent-on-dark);}

.contact-cta{display:flex;flex-direction:column;gap:10px;margin-top:18px;}
@media (min-width:600px){.contact-cta{flex-direction:row;flex-wrap:wrap;}}

.contact-form{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  padding:24px;
}
@media (min-width:768px){.contact-form{padding:32px;}}
.contact-form h3{color:#fff;font-size:1.28rem;margin:0 0 6px;}
.contact-form .form-lede{font-family:var(--ff-ui);font-size:.92rem;color:var(--text-on-dark-2);margin:0 0 18px;}
.contact-form .form-grid{display:grid;grid-template-columns:1fr;gap:14px;}
@media (min-width:640px){.contact-form .form-grid{grid-template-columns:1fr 1fr;}}
.contact-form .field-full{grid-column:1/-1;}
.contact-form .form-field label{color:var(--text-on-dark-2);}
.contact-form .form-field input,
.contact-form .form-field select,
.contact-form .form-field textarea{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.18);
  color:#fff;
}
.contact-form .form-field input::placeholder,
.contact-form .form-field textarea::placeholder{color:rgba(255,255,255,.45);}
.contact-form .form-field input:focus,
.contact-form .form-field select:focus,
.contact-form .form-field textarea:focus{
  border-color:var(--accent-on-dark);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-on-dark) 18%,transparent);
}
.contact-form .form-action{margin-top:18px;}
.contact-form .form-action .btn{width:100%;}
@media (min-width:600px){.contact-form .form-action .btn{width:auto;}}

/* ===== Realisations.html spefic ===== */
.real-page{padding-top:80px;}
.breadcrumb{
  font-family:var(--ff-ui);font-size:.85rem;color:var(--text-mute);
  margin-bottom:18px;
}
.breadcrumb a{color:var(--text-mute);}
.breadcrumb a:hover{color:var(--accent);text-decoration:none;}
.real-hero{padding-bottom:40px;}
.real-hero h1 em{color:var(--accent);font-style:italic;}
.gal-masonry{
  column-count:1;column-gap:14px;
  margin-top:32px;
}
@media (min-width:640px){.gal-masonry{column-count:2;}}
@media (min-width:1024px){.gal-masonry{column-count:3;}}
.gal-masonry .gal-item{
  margin:0 0 14px;
  break-inside:avoid;
  cursor:zoom-in;
  border-radius:14px;overflow:hidden;
  background:var(--bg-alt);
  position:relative;
}
.gal-masonry .gal-item img{
  display:block;width:100%;height:auto;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.gal-masonry .gal-item:hover img{transform:scale(1.04);}
.real-cta{
  background:var(--surface-deep);
  color:var(--text-on-dark);
  padding:56px 0;
  border-radius:24px;
  margin:48px auto 0;
  text-align:center;
}
.real-cta h2{color:#fff;}
.real-cta h2 em{color:var(--accent-on-dark);font-style:italic;}
.real-cta p{color:var(--text-on-dark-2);max-width:54ch;margin:0 auto 22px;}
.real-cta .cta-actions{display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;}
@media (min-width:600px){.real-cta .cta-actions{flex-direction:row;flex-wrap:wrap;}}