/* =========================================================
   Version C — styles propres à index-c.html
   (chargé APRÈS style.css : reprend ses couleurs et variables)
   ========================================================= */

/* ---------- Sections pleine largeur ---------- */
.bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw) !important;
}
.bleed-inner {
  max-width: calc(var(--col-width) + 2 * var(--page-gutter));
  margin: 0 auto;
  padding: 0 calc(var(--col-pad-x) + var(--page-gutter));
}
.bleed-inner > * + * { margin-top: var(--spacing); }

/* =========================================================
   01 · ABOUT — photo à gauche, récit à droite
   ========================================================= */
.c-about { margin-top: 1rem !important; }
.c-about > * + * { margin-top: var(--spacing); }

.c-about__grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 2.5rem;
  align-items: start;
  margin-top: 2rem !important;
}

.c-about__photo {
  position: sticky;
  top: 2rem;
  margin: 0 .9rem .9rem 0;
}
.c-about__photo::before {                 /* aplat pêche décalé derrière la photo */
  content: '';
  position: absolute;
  inset: 0;
  transform: translate(.9rem, .9rem);
  background: var(--peach);
}
.c-about__photo img {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--photo-bg);
}

.c-about__text { font-family: var(--font); line-height: 1.55; }
.c-about__lead {
  font-size: 1.15em;
  font-weight: 500;
  line-height: 1.35;
  color: var(--blue);
  margin-bottom: 1.25rem;
}
.c-about__text .body-text p + p { margin-top: .9rem; }
.c-about__pull {
  margin-top: 1.5rem !important;
  padding-left: 1rem;
  border-left: 3px solid var(--terracotta);
  font-size: 1em;
  font-weight: 700;
  line-height: 1.35;
  color: var(--terracotta);
}

/* =========================================================
   02 · SERVICES — bande bleue pleine largeur, grands numéros
   ========================================================= */
.content > .c-services { margin-bottom: 0 !important; }   /* bleu et orange collés */
.c-services {
  margin-top: 4rem !important;
  padding: 4rem 0 3.5rem;
}
.c-svc { margin-top: 2.25rem !important; counter-reset: svc; }
.c-svc__item {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 1.25rem;
  padding: 1.75rem 0;
  border-top: 1px solid rgba(242, 240, 234, .22);
  scroll-margin-top: 2rem;
}
.c-svc__item:last-child { border-bottom: 1px solid rgba(242, 240, 234, .22); }

.c-svc__num {
  font-family: var(--font);
  font-size: 3.25em;
  font-weight: 700;
  line-height: .9;
  color: transparent;
  -webkit-text-stroke: 1px var(--peach);
  transition: color .35s ease;
}
.c-svc__item:hover .c-svc__num { color: var(--peach); }

.c-svc__title {
  font-family: var(--font);
  font-size: 1.1em;
  font-weight: 700;
  line-height: 1.3;
  color: var(--cream);
}
.c-svc__text {
  font-family: var(--font);
  font-size: .85em;
  line-height: 1.55;
  color: var(--cream);
  opacity: .85;
  margin-top: .5rem;
  max-width: 34rem;
}
.c-svc__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: 1rem;
}
.c-svc__tags li {
  font-family: var(--font);
  font-size: .55em;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--grey-tags);
  border: 1px solid rgba(242, 240, 234, .3);
  border-radius: 99px;
  padding: .3rem .75rem;
}

/* =========================================================
   03 · CONTACT — bande terracotta jusqu'en bas de page
   ========================================================= */
.content > .c-contact {
  margin-top: 0 !important;
  margin-bottom: calc(var(--col-pad-y) * -1) !important;
}
.c-contact {
  padding: 4rem 0 3rem;
}
.c-contact__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 2.5rem;
  align-items: end;
  margin-top: 2rem !important;
}
.c-contact .body-text--light { padding-left: 0; }
.c-contact .body-text p + p { margin-top: .9rem; }

.c-contact__cta { font-family: var(--font); }
.c-contact__label {
  font-size: .9em;
  font-weight: 500;
  color: var(--blue);
}
.c-contact__mail {
  display: inline-block;
  margin-top: .6rem;
  font-size: 1.05em;
  font-weight: 700;
  color: var(--cream);
  text-decoration: none;
  background: linear-gradient(var(--cream), var(--cream)) 0 100% / 0 2px no-repeat;
  padding-bottom: .2rem;
  transition: background-size .35s ease;
}
.c-contact__mail span { display: inline-block; transition: transform .35s ease; }
.c-contact__mail:hover { background-size: 100% 2px; }
.c-contact__mail:hover span { transform: translateX(.3rem); }

.c-contact__social {
  display: flex;
  gap: 1.25rem;
  margin-top: 1.5rem;
  font-family: var(--font);
  font-size: .65em;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.c-contact__social a { color: var(--cream); text-decoration: none; opacity: .8; transition: opacity .25s ease, color .25s ease; }
.c-contact__social a:hover { opacity: 1; color: var(--blue); }

.c-footer {
  margin-top: 3.5rem !important;
  padding-top: 1rem;
  border-top: 1px solid rgba(242, 240, 234, .3);
  font-family: var(--font);
  font-size: .55em;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: .7;
}

/* =========================================================
   Mobile
   ========================================================= */
@media (max-width: 736px) {
  .c-about__grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .c-about__photo { position: relative; top: 0; max-width: 85%; }
  .c-about__photo img { aspect-ratio: 1 / 1; object-position: 40% 70%; }
  .c-about__lead { font-size: 1.05em; }

  .c-services { margin-top: 3rem !important; padding: 3rem 0 2.5rem; }
  .c-svc__item { grid-template-columns: 1fr; gap: .5rem; padding: 1.4rem 0; }
  .c-svc__num { font-size: 2.25em; }

  .c-contact { padding: 3rem 0 2.5rem; }
  .c-contact__grid { grid-template-columns: 1fr; gap: 2rem; }
}