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

section{padding:48px 0;}
@media (min-width:768px){section{padding:80px 0;}}

.section-head{
  text-align:center;max-width:760px;margin:0 auto 36px;
}
.section-head h2{margin-bottom:14px;}
.section-head p{color:var(--text-2);font-size:1.04rem;}

/* ============================================================
   HERO — HERO-EDITORIAL-CENTRE
   ============================================================ */
.hero-centre{
  max-width:1000px;
  margin:0 auto;
  text-align:center;
  padding:clamp(40px,7vw,90px) 20px clamp(28px,4vw,48px);
}
.hero-centre__eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--ff-body);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.78rem;
  font-weight:600;
  color:var(--accent);
  margin-bottom:18px;
}
.hero-centre__eyebrow::before{
  content:"";width:24px;height:1px;background:var(--accent);
}
.hero-centre__title{
  font-family:var(--ff-display);
  font-size:clamp(2.4rem,6vw,4.8rem);
  font-weight:500;
  line-height:1.05;
  margin:0 0 22px;
  color:var(--text);
  letter-spacing:-.01em;
}
.hero-centre__title em{
  font-style:italic;color:var(--accent);
  position:relative;
}
.hero-centre__title em::after{
  content:"";
  position:absolute;left:-2%;right:-2%;bottom:.06em;
  height:.32em;
  background:color-mix(in srgb,var(--accent) 22%,transparent);
  z-index:-1;
  transform:skewX(-6deg);
  border-radius:2px;
}
.hero-centre__sub{
  font-family:var(--ff-body);
  font-size:clamp(1rem,1.6vw,1.18rem);
  color:var(--text-2);
  margin:0 auto 28px;
  max-width:54ch;
  line-height:1.55;
}
.hero-centre__cta{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
}
@media (max-width:520px){
  .hero-centre__cta{flex-direction:column;align-items:stretch;}
  .hero-centre__cta .btn{width:100%;justify-content:center;}
}
.hero-centre__meta{
  margin-top:18px;
  font-size:.88rem;
  color:var(--text-2);
}

.hero-centre__band{
  width:100%;
  max-width:1240px;
  margin:clamp(28px,5vw,56px) auto 0;
  aspect-ratio:21/9;
  border-radius:18px;
  overflow:hidden;
  position:relative;
  border:1.5px solid var(--text);
  box-shadow:6px 6px 0 var(--accent);
}
.hero-centre__band img{
  width:100%;height:100%;object-fit:cover;display:block;
}
@media (max-width:768px){
  .hero-centre__band{
    aspect-ratio:16/10;
    margin:32px 16px 0;
    width:calc(100% - 32px);
    border-radius:14px;
    box-shadow:4px 4px 0 var(--accent);
  }
}

/* ============================================================
   SERVICES — LAY-3 grid-3 risograph
   ============================================================ */
.services{background:transparent;}
.svc-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2.2vw,26px);
}
@media (max-width:900px){.svc-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.svc-grid{grid-template-columns:1fr;}}

.svc-card{
  /* extends .c-riso via class */
}
.svc-card__num{
  font-family:var(--ff-display);
  font-style:italic;
  color:var(--accent);
  font-size:1.05rem;
  margin-bottom:10px;
  letter-spacing:.04em;
}
.svc-card__icon{
  width:42px;height:42px;
  color:var(--accent);
  margin-bottom:14px;
}
.svc-card__icon svg{width:100%;height:100%;}
.svc-card h3{
  font-size:1.32rem;
  margin:0 0 10px;
  line-height:1.2;
}
.svc-card p{
  color:var(--text-2);
  font-size:.96rem;
  margin:0 0 18px;
  flex:1;
}
.svc-card__cta{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--ff-body);
  font-size:.88rem;
  font-weight:600;
  color:var(--accent);
  margin-top:auto;
  letter-spacing:.02em;
}
.svc-card__cta::after{
  content:"\2192";
  transition:transform var(--t-fast);
}
.svc-card:hover .svc-card__cta::after{transform:translateX(4px);}

/* ============================================================
   APROPOS — story du dirigeant (COPY-3)
   ============================================================ */
.apropos{
  background:color-mix(in srgb,var(--accent) 5%,var(--bg));
}
.apropos__inner{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(28px,4vw,56px);
  align-items:center;
}
@media (min-width:900px){
  .apropos__inner{grid-template-columns:.85fr 1.15fr;}
}
.apropos__media{
  width:100%;
  aspect-ratio:4/5;
  border-radius:18px;
  overflow:hidden;
  border:1.5px solid var(--text);
  box-shadow:6px 6px 0 var(--accent);
  max-width:440px;
  margin:0 auto;
}
.apropos__media img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.apropos__text h2{
  margin-bottom:18px;
}
.apropos__text .lead{
  font-size:1.08rem;
  color:var(--text);
  margin-bottom:16px;
}
.apropos__text .lead::first-letter{
  font-family:var(--ff-display);
  font-style:italic;
  font-size:3rem;
  float:left;
  line-height:.9;
  margin:6px 10px 0 0;
  color:var(--accent);
}
.apropos__text p{color:var(--text-2);font-size:1rem;line-height:1.65;}

.apropos__badge{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:22px;
  padding:10px 16px;
  background:var(--bg);
  border:1.5px solid var(--text);
  border-radius:999px;
  box-shadow:3px 3px 0 var(--accent);
  font-size:.92rem;
}
.apropos__badge svg{width:18px;height:18px;color:var(--accent);}
.apropos__badge strong{font-weight:600;}

/* ============================================================
   REALISATIONS (teaser galerie sur index)
   ============================================================ */
.realisations{background:transparent;}
.gal-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.gal-grid figure{
  margin:0;
  aspect-ratio:1/1;
  border-radius:12px;
  overflow:hidden;
  cursor:zoom-in;
  position:relative;
  border:1.5px solid var(--text);
  box-shadow:4px 4px 0 var(--accent);
  transition:transform var(--t-fast),box-shadow var(--t-fast);
}
.gal-grid figure:hover{
  transform:translate(-2px,-2px);
  box-shadow:6px 6px 0 var(--accent);
}
.gal-grid figure img{
  width:100%;height:100%;object-fit:cover;
  transition:transform var(--t-med);
}
.gal-grid figure:hover img{transform:scale(1.05);}
@media (prefers-reduced-motion:reduce){
  .gal-grid figure,.gal-grid figure img{transition:none;}
  .gal-grid figure:hover{transform:none;}
  .gal-grid figure:hover img{transform:none;}
}
@media (max-width:700px){.gal-grid{grid-template-columns:repeat(2,1fr);gap:12px;}}
@media (max-width:480px){.gal-grid{grid-template-columns:1fr;gap:14px;}}

.real-cta-row{
  text-align:center;
  margin-top:32px;
}

/* ============================================================
   STATS STRIP
   ============================================================ */
.stats-strip{
  background:var(--surface-deep);
  color:var(--text-on-dark);
  padding:48px 0;
}
.stats-strip :where(h1,h2,h3,h4,p,li,span,a,strong,small){color:inherit;}
.stats-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
  text-align:center;
}
@media (min-width:700px){
  .stats-grid{grid-template-columns:repeat(3,1fr);gap:24px;}
}
.stat-item{
  position:relative;
  padding:0 8px;
}
.stat-item + .stat-item{
  border-top:1px solid rgba(241,246,242,.18);
  padding-top:24px;
}
@media (min-width:700px){
  .stat-item + .stat-item{
    border-top:0;
    border-left:1px solid rgba(241,246,242,.18);
    padding-top:0;
  }
}
.stat-number{
  display:block;
  font-family:var(--ff-display);
  font-size:clamp(2rem,4vw,2.8rem);
  font-weight:500;
  color:#fff;
  line-height:1;
  margin-bottom:8px;
}
.stat-number em{
  font-style:italic;
  color:var(--accent-on-dark);
  font-size:.7em;
}
.stat-label{
  font-family:var(--ff-body);
  font-size:.86rem;
  color:var(--text-on-dark-2);
  letter-spacing:.04em;
}

/* ============================================================
   AVIS — cards risograph
   ============================================================ */
.avis{background:transparent;}
.avis-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
@media (max-width:900px){.avis-cards{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.avis-cards{grid-template-columns:1fr;}}

.avis-card{
  /* extends .c-riso */
}
.avis-card__stars{
  display:inline-flex;gap:2px;color:#E0A41A;
  margin-bottom:12px;
}
.avis-card__stars svg{width:16px;height:16px;}
.avis-card blockquote{
  margin:0 0 16px;
  font-family:var(--ff-display);
  font-style:italic;
  font-size:1.05rem;
  line-height:1.5;
  color:var(--text);
  position:relative;
  padding-left:18px;
}
.avis-card blockquote::before{
  content:"\201C";
  position:absolute;left:-2px;top:-10px;
  font-size:2.4rem;color:var(--accent);line-height:1;
  font-family:var(--ff-display);
}
.avis-card__footer{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:auto;
  padding-top:14px;
  border-top:1px solid var(--border);
  font-size:.85rem;
  color:var(--text-2);
}
.avis-card__author{
  display:flex;flex-direction:column;gap:2px;
}
.avis-card__author strong{color:var(--text);font-weight:600;}
.avis-card__author small{color:var(--text-mute);font-size:.78rem;}
.badge-google{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.75rem;color:var(--text-mute);
  flex-shrink:0;
}
.badge-google svg{width:14px;height:14px;}

.avis__link-google{
  display:block;
  text-align:center;
  margin-top:28px;
  font-size:.92rem;
  color:var(--text-2);
}
.avis__link-google:hover{color:var(--accent);}

/* ============================================================
   FAQ
   ============================================================ */
.faq{background:color-mix(in srgb,var(--accent) 5%,var(--bg));}
.faq-list{
  max-width:780px;margin:0 auto;
  display:flex;flex-direction:column;gap:14px;
}
.faq-item{
  background:var(--bg);
  border:1.5px solid var(--text);
  border-radius:12px;
  box-shadow:4px 4px 0 var(--accent);
  overflow:hidden;
  transition:transform var(--t-fast);
}
.faq-item:has(.faq-trigger[aria-expanded="true"]){
  box-shadow:6px 6px 0 var(--accent);
}
.faq-trigger{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 22px;
  font-family:var(--ff-display);
  font-size:1.06rem;
  font-weight:500;
  color:var(--text);
  text-align:left;
  line-height:1.3;
}
.faq-chevron{
  flex-shrink:0;
  width:28px;height:28px;border-radius:50%;
  background:color-mix(in srgb,var(--accent) 14%,var(--bg));
  display:grid;place-items:center;color:var(--accent);
  transition:transform var(--t-fast);
  position:relative;
}
.faq-chevron::before,
.faq-chevron::after{
  content:"";
  position:absolute;left:50%;top:50%;
  width:12px;height:2px;
  background:currentColor;
  transform-origin:center;
  transition:transform var(--t-fast);
}
.faq-chevron::before{transform:translate(-50%,-50%);}
.faq-chevron::after{transform:translate(-50%,-50%) rotate(90deg);}
.faq-trigger[aria-expanded="true"] .faq-chevron::after{transform:translate(-50%,-50%) rotate(0deg);}
.faq-answer{
  padding:0 22px 20px;
  color:var(--text-2);
  font-size:.96rem;line-height:1.65;
}
.faq-answer p{margin:0;}
.faq-answer p + p{margin-top:10px;}

/* ============================================================
   ZONE
   ============================================================ */
.zone{background:transparent;}
.zone__inner{
  display:grid;grid-template-columns:1fr;gap:36px;
}
@media (min-width:900px){
  .zone__inner{grid-template-columns:1fr 1fr;gap:48px;}
}
.zone__chips{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-bottom:24px;
}
.zone__horaires{
  background:var(--surface);
  border:1.5px solid var(--text);
  border-radius:12px;
  box-shadow:4px 4px 0 var(--accent);
  padding:20px 22px;
  margin-bottom:14px;
}
.zone__horaires h3{
  font-family:var(--ff-body);
  font-size:.84rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 14px;
}
.horaires-list{
  display:flex;flex-direction:column;gap:6px;
  font-size:.96rem;
}
.horaires-list li{
  display:flex;justify-content:space-between;align-items:center;
  padding:6px 0;
  border-bottom:1px solid var(--border);
  color:var(--text-2);
}
.horaires-list li:last-child{border-bottom:0;}
.horaires-list li.is-today{
  color:var(--text);
  font-weight:600;
}
.horaires-list li.is-today::before{
  content:"";
  width:6px;height:6px;border-radius:50%;
  background:var(--accent);
  display:inline-block;margin-right:8px;
}
.horaires-list li.is-closed{
  color:var(--text-mute);font-style:italic;
}
.dispo-line{
  font-size:.92rem;
  color:var(--text-2);
}
.map-wrap{
  position:relative;
  width:100%;
  border-radius:14px;
  overflow:hidden;
  border:1.5px solid var(--text);
  box-shadow:5px 5px 0 var(--accent);
  aspect-ratio:4/3;
}
.map-wrap iframe{
  width:100%;height:100%;border:0;display:block;
}

/* ============================================================
   CONTACT (dark)
   ============================================================ */
.contact{
  background:var(--surface-deep);
  color:var(--text-on-dark);
  padding:64px 0;
}
.contact :where(h1,h2,h3,h4,p,li,span,a,strong,small){color:inherit;}
.contact__inner{
  display:grid;grid-template-columns:1fr;gap:40px;
}
@media (min-width:900px){
  .contact__inner{grid-template-columns:1fr 1.15fr;gap:56px;}
}
.contact .eyebrow{color:var(--accent-on-dark);}
.contact h2{
  font-size:clamp(1.9rem,4vw,2.6rem);
  color:#fff;
  margin-bottom:18px;
}
.contact h2 em{color:var(--accent-on-dark);}
.contact__tel-big{
  display:inline-block;
  font-family:var(--ff-display);
  font-style:italic;
  font-size:clamp(1.8rem,4.5vw,2.4rem);
  color:var(--accent-on-dark);
  margin:8px 0 20px;
}
.contact__rows{
  margin:24px 0 28px;
  display:flex;flex-direction:column;gap:14px;
}
.contact__row{
  display:flex;align-items:center;gap:14px;
  font-size:.96rem;
  color:var(--text-on-dark-2);
}
.contact__row svg{
  width:20px;height:20px;
  color:var(--accent-on-dark);
  flex-shrink:0;
}
.contact__form{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(241,246,242,.18);
  border-radius:16px;
  padding:28px 24px;
  backdrop-filter:blur(6px);
}
.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,.92);
  color:var(--text);
  border-color:transparent;
}
.contact__form .form-field input:focus,
.contact__form .form-field select:focus,
.contact__form .form-field textarea:focus{
  border-color:var(--accent-on-dark);
}

/* ============================================================
   REALISATIONS.HTML — masonry full
   ============================================================ */
.real-page-hero{
  padding:48px 0 24px;
  text-align:center;
}
.real-page-hero .breadcrumb{
  font-size:.85rem;
  color:var(--text-mute);
  margin-bottom:14px;
  letter-spacing:.06em;
}
.real-page-hero .breadcrumb a{color:var(--text-2);}
.real-page-hero h1{margin-bottom:18px;}
.real-page-hero p{
  color:var(--text-2);
  max-width:600px;margin:0 auto;
}

.gal-masonry{
  column-count:1;
  column-gap:14px;
  padding-bottom:40px;
}
@media (min-width:560px){.gal-masonry{column-count:2;}}
@media (min-width:1000px){.gal-masonry{column-count:3;}}
.gal-masonry figure{
  margin:0 0 14px;
  break-inside:avoid;
  border-radius:12px;
  overflow:hidden;
  border:1.5px solid var(--text);
  box-shadow:4px 4px 0 var(--accent);
  cursor:zoom-in;
  transition:transform var(--t-fast),box-shadow var(--t-fast);
}
.gal-masonry figure:hover{
  transform:translate(-2px,-2px);
  box-shadow:6px 6px 0 var(--accent);
}
.gal-masonry figure img{
  width:100%;height:auto;display:block;
  transition:transform var(--t-med);
}
.gal-masonry figure:hover img{transform:scale(1.04);}
@media (prefers-reduced-motion:reduce){
  .gal-masonry figure,.gal-masonry figure img{transition:none;}
  .gal-masonry figure:hover{transform:none;}
  .gal-masonry figure:hover img{transform:none;}
}

.real-cta-block{
  background:var(--surface-deep);
  color:var(--text-on-dark);
  border-radius:18px;
  padding:40px 28px;
  margin:32px auto 0;
  text-align:center;
  max-width:820px;
  border:1.5px solid var(--text);
  box-shadow:6px 6px 0 var(--accent);
}
.real-cta-block :where(h1,h2,h3,h4,p,li,span,a,strong,small){color:inherit;}
.real-cta-block h2{color:#fff;margin-bottom:14px;}
.real-cta-block h2 em{color:var(--accent-on-dark);}
.real-cta-block p{color:var(--text-on-dark-2);margin-bottom:22px;}
.real-cta-block .btn-row{justify-content:center;}