/* ==========================================================================
   Page d'accueil : compositions de sections
   ========================================================================== */

/* ------------------------------------------------------------------ Hero
   Photo plein écran, voile navy pour la lisibilité, message en bas à
   gauche. Le header transparent se pose dessus. */
.hero {
  display: flex;
  align-items: flex-end;
  min-height: min(100svh, 58rem);
  padding: calc(5rem + var(--space-8)) 0 var(--space-9);
  overflow: hidden;
  border-radius: 0 0 clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem);
  background: var(--ink);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__bg picture { display: block; height: 100%; }

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 45%;
}

/* Voile : sombre en haut (header lisible), en bas et à gauche (texte) */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, rgb(14 34 51 / 0.6) 0, rgb(14 34 51 / 0) 9rem),
    linear-gradient(to top, rgb(14 34 51 / 0.92) 0%, rgb(14 34 51 / 0.55) 55%, rgb(14 34 51 / 0.3) 100%);
}

@media (min-width: 64em) {
  .hero::before {
    background:
      linear-gradient(to bottom, rgb(14 34 51 / 0.6) 0, rgb(14 34 51 / 0) 9rem),
      linear-gradient(90deg, rgb(14 34 51 / 0.9) 0%, rgb(14 34 51 / 0.72) 45%, rgb(14 34 51 / 0.35) 72%, rgb(14 34 51 / 0.1) 92%);
  }
}

.hero__copy {
  display: grid;
  gap: var(--space-5);
  justify-items: start;
  max-width: 54rem;
}

.hero__title {
  font-size: clamp(2.5rem, 1.4rem + 4.6vw, 5rem);
  line-height: 1.02;
  color: var(--white);
  max-width: 12ch;
}

.hero__sub {
  font-size: var(--fs-hero);
  line-height: 1.5;
  color: rgb(255 255 255 / 0.92);
  max-width: 52ch;
}

.hero .trust-item { color: var(--white); }
.hero .trust-item .icon { color: var(--teal); }

.hero .smile-hero {
  right: -6%;
  bottom: -2.5rem;
  width: min(62vw, 44rem);
  color: var(--white);
  opacity: 0.1;
}

@media (max-width: 47.99em) {
  .hero__copy .btn { width: 100%; }
}

/* ------------------------------------------------- 2. Services : slider
   Repris de l'ancien site : grandes cartes photo, voile navy, étiquette
   en haut à droite, titre et prix en bas. Défilement horizontal. */
.services__head {
  margin-bottom: var(--space-6);
}

.services__head .section-head {
  margin-bottom: 0;
  max-width: 48rem;
  gap: var(--space-3);
}

.services__head h2 {
  font-size: clamp(2.125rem, 1.4rem + 3vw, 3.75rem);
}

.services__head .section-head p:not(.eyebrow) {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--navy);
}

.slider__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(86vw, 39rem);
  gap: var(--space-3);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding-inline: max(var(--gutter), (100% - var(--container)) / 2);
  scroll-padding-inline: max(var(--gutter), (100% - var(--container)) / 2);
  list-style: none;
  margin: 0;
  scrollbar-width: none;
}

.slider__track::-webkit-scrollbar { display: none; }

.slider__track.is-dragging {
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}

.slider__track.is-dragging a { pointer-events: none; }

.slider__track:focus-visible { outline-offset: -3px; }

.slider__foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.slide-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(27rem, 22rem + 14vw, 34.5rem);
  padding: clamp(1.75rem, 1rem + 2.5vw, 2.75rem);
  border-radius: clamp(1.75rem, 1rem + 2vw, 2.5rem);
  overflow: hidden;
  color: var(--white);
  scroll-snap-align: start;
}

.slide-card picture,
.slide-card img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
}

.slide-card img {
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.slide-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgb(14 34 51 / 0.9) 0%, rgb(14 34 51 / 0.55) 45%, rgb(14 34 51 / 0.35) 100%);
}

.slide-card:hover img { transform: scale(1.03); }

.slide-card__tag {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.88);
  color: var(--navy);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.slide-card__title {
  font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem);
  line-height: 1;
  color: var(--white);
  max-width: 11ch;
}

.slide-card__text {
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  color: rgb(255 255 255 / 0.92);
  max-width: 44ch;
}

.slide-card__price {
  margin-top: var(--space-3);
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.1875rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}

.slide-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  width: fit-content;
  margin-top: var(--space-5);
  padding: 0.5rem 0.25rem 0.625rem;
  border-bottom: 1px solid rgb(255 255 255 / 0.75);
  color: var(--white);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}

.slide-card__link .icon {
  width: 1.125rem;
  height: 1.125rem;
  transition: transform var(--dur) var(--ease-out);
}

.slide-card:hover .slide-card__link .icon { transform: translateX(4px); }

/* Toute la carte est cliquable */
.slide-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.slide-card__link:focus-visible { outline: none; }

.slide-card:has(.slide-card__link:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.price-note {
  margin-top: var(--space-4);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* ----------------------------------------- 3. Barre de confiance (navy) */
.trust-band {
  padding-block: var(--space-8);
  overflow: hidden;
}

.trust-band__grid {
  display: grid;
  gap: var(--space-6) var(--space-5);
  list-style: none;
  padding: 0;
}

.trust-band__item {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: min-content 1fr;
  gap: var(--space-1) var(--space-4);
  align-items: start;
}

.trust-band__item h3 { align-self: center; min-height: 3rem; display: flex; align-items: center; }

.trust-band__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--teal);
  color: var(--navy);
  grid-row: span 2;
}

.trust-band__icon .icon { width: 1.5rem; height: 1.5rem; }

.trust-band__item h3 { font-size: var(--fs-h4); }

.trust-band__item p {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

@media (min-width: 40em) {
  .trust-band__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 72em) {
  .trust-band__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --------------------------------------------------- 4. Parcours (étapes) */
.steps {
  position: relative;
  display: grid;
  gap: var(--space-6);
  list-style: none;
  padding: 0;
}

@media (min-width: 48em) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7) var(--space-6); }
}

@media (min-width: 64em) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Fil conducteur entre les pastilles */
  .steps::before {
    content: "";
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    right: calc((100% - 3 * var(--space-6)) / 4 - 1.5rem);
    border-top: 2px dashed var(--teal);
  }
}

.step__num { position: relative; }

.step:last-child .step__num {
  background: var(--teal);
  border-color: var(--teal);
}

.steps-cta { margin-top: var(--space-7); }

/* --------------------------------------------- 5. Aides + formulaire */
.aides__grid {
  display: grid;
  gap: var(--space-7);
  align-items: start;
}

.aides__intro .section-head { margin-bottom: var(--space-6); }

.aid-list {
  display: grid;
  gap: var(--space-5);
  list-style: none;
  padding: 0;
}

.aid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}

.aid .card__icon { grid-row: span 2; width: 2.75rem; height: 2.75rem; }

.aid .card__icon .icon { width: 1.375rem; height: 1.375rem; }

.aid h3 { font-size: var(--fs-h4); }

.aid p { color: var(--text-muted); }

.aid-note {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding: var(--space-5);
  border-radius: var(--radius-card);
  background: var(--teal-tint);
  font-weight: 600;
}

.aid-note .icon { color: var(--teal-ink); margin-top: 0.125rem; }

.form-card {
  position: relative;
  margin-inline: calc(-1 * var(--space-2));
  padding: var(--space-6) var(--space-4);
  border-radius: var(--radius-card);
  background: var(--white);
  box-shadow: var(--shadow-lg);
  scroll-margin-top: 5.5rem;
}

.form-card__head {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.form-card__head h2 { font-size: var(--fs-h3); }

.form-card__head p { color: var(--slate); }

.form-step {
  display: grid;
  gap: var(--space-5);
  padding: 0;
  border: 0;
  min-width: 0;
}

.form-step__title { margin-bottom: var(--space-1); }

.form-step + .form-step {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}

.form-step__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-h4);
}

.form-step__title span {
  display: grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--teal);
  font-size: 1rem;
  line-height: 1;
}

.form-grid {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 40em) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid .field--full { grid-column: 1 / -1; }
  .form-card { margin-inline: 0; padding: var(--space-7); }
}

.form-hint {
  display: flex;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--slate);
}

.form-hint .icon { color: var(--teal-ink); width: 1.125rem; height: 1.125rem; margin-top: 0.125rem; }

.form-hint[hidden] { display: none; }

.form-submit {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.form-submit .btn { justify-self: start; }

.form-submit .btn[aria-busy="true"] { opacity: 0.7; pointer-events: none; }

.form-submit p { font-size: var(--fs-sm); color: var(--slate); }

@media (max-width: 47.99em) {
  .form-submit .btn { width: 100%; }
}

select.field__control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23183858'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem;
  padding-right: 2.75rem;
}

@media (min-width: 64em) {
  .aides__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); }
  .aides__intro { position: sticky; top: 6.5rem; }
}

/* -------------------------------------------- 6. Démarche responsable */
.responsable__grid {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

.responsable__media {
  position: relative;
  isolation: isolate;
}

.responsable__media .project__media {
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-md);
}

.stats {
  display: grid;
  gap: var(--space-6) var(--space-5);
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}

.stats .figure-stat__value {
  color: var(--teal-dark);
  font-size: clamp(1.875rem, 1.3rem + 1.7vw, 2.75rem);
  white-space: nowrap;
}

@media (min-width: 40em) {
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 64em) {
  .responsable__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-9); }
  .responsable__media .project__media { aspect-ratio: 4 / 5; }
}

/* ----------------------------------------- 7. Zone d'intervention (teal) */
.zone { overflow: hidden; }

.zone__grid {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

.zone .section-head { margin-bottom: var(--space-5); }

.zone .section-head p:not(.eyebrow) { color: var(--navy); }

.zone .chip { background: rgb(255 255 255 / 0.55); }

.zone .chip .icon { color: var(--navy); }

.zone__more {
  margin-top: var(--space-5);
  font-weight: 600;
}

.zone__more a { font-weight: 700; }

.zone__all { margin-top: var(--space-4); color: var(--navy); }
.zone .chip--link { color: var(--navy); }
.zone .chip--link:hover { background: var(--navy); color: var(--white); }


.map {
  width: 100%;
  height: auto;
}

.map__area { fill: var(--white); stroke: var(--white); opacity: 0.28; }

.map__river {
  fill: none;
  stroke: var(--white);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.map__river-label {
  fill: var(--navy);
  font: italic 600 13px var(--font-body);
}

.map__town circle { fill: var(--navy); }

.map__town text {
  fill: var(--navy);
  font: 600 14px var(--font-body);
}

.map__town--main .map__halo { fill: var(--white); }

.map__town--main text { font: 700 18px var(--font-display); }

/* Petit écran : la carte est réduite de moitié, on ne garde que les
   villes principales en grand (les autres sont listées en chips). */
@media (max-width: 47.99em) {
  .map__town:not(.map__town--main) text,
  .map__river-label { display: none; }
  .map__town--main text { font-size: 30px; }
  .map__town circle { transform-box: fill-box; transform-origin: center; transform: scale(1.4); }
}

@media (min-width: 64em) {
  .zone__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); }
}

/* ---------------------------------------------------------- 8. Avis */
.reviews {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 48em) {
  .reviews { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .reviews > :nth-child(2) { margin-top: var(--space-7); }
}

/* ---------------------------------------------------- 9. Réalisations */
.realisations__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

.realisations__head .section-head { margin-bottom: 0; }

.realisations .carousel__track {
  padding-inline: max(var(--gutter), (100% - var(--container)) / 2);
  scroll-padding-inline: max(var(--gutter), (100% - var(--container)) / 2);
}

/* ------------------------------------------------- 10. Le parti pris */
.parti-pris { overflow: hidden; }

.parti-pris .smile-hero {
  width: min(110vw, 56rem);
  right: -14%;
  bottom: -3rem;
}

.parti-pris .section-head { max-width: 50rem; }

.parti-pris .section-head h2 em {
  font-style: normal;
  color: var(--teal);
}

.compare {
  display: grid;
  gap: var(--space-4);
}

.compare__col {
  padding: var(--space-6);
  border-radius: var(--radius-card);
}

.compare__col--no { border: 1px solid var(--line); }

.compare__col--yes {
  background: var(--teal);
  color: var(--navy);
}

.compare__col h3 {
  font-size: var(--fs-h4);
  margin-bottom: var(--space-4);
}

.compare__col--yes h3 { color: var(--navy); }

.compare__col ul {
  display: grid;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
}

.compare__col li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  line-height: 1.45;
}

.compare__col li .icon { margin-top: 0.0625rem; }

.compare__col--no li { color: var(--mist); }

@media (min-width: 48em) {
  .compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------ 11. FAQ */
.faq .accordion { max-width: 52rem; margin-inline: auto; }

/* ----------------------------------------------------- 12. CTA final */
.cta-final {
  overflow: hidden;
  text-align: center;
  padding-block: var(--space-8) calc(var(--space-8) + 2.5rem);
}

.cta-final .container--narrow {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
}

.cta-final p { color: var(--text-muted); font-size: var(--fs-lead); max-width: 44ch; }

.theme-dark .cta-final__smile {
  left: 50%;
  bottom: -1rem;
  width: min(72vw, 26rem);
  transform: translateX(-50%);
  color: var(--teal);
  opacity: 1;
}

/* ---------------------------------------------------------- Footer */
.site-footer {
  padding-block: var(--space-8);
  font-size: var(--fs-sm);
}

.site-footer__grid {
  display: grid;
  gap: var(--space-6);
}

.site-footer img { width: 10rem; margin-bottom: var(--space-4); }

.site-footer p { color: var(--text-muted); max-width: 44ch; }

.site-footer h2 {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: var(--space-3);
}

.site-footer ul { list-style: none; padding: 0; display: grid; gap: var(--space-2); }

.site-footer a { text-decoration: none; }


.site-footer__legal {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--text-muted);
}

@media (min-width: 40em) {
  .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-footer__brand { grid-column: 1 / -1; }
}

@media (min-width: 64em) {
  .site-footer__grid { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: var(--space-7); }
  .site-footer__brand { grid-column: auto; }
}

.site-footer a {
  text-decoration: none;
  transition: color 600ms var(--ease-out);
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--teal);
  text-decoration: none;
}

.site-footer__links {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) !important;
}

.site-footer__links li + li::before {
  content: "|";
  margin-right: var(--space-2);
  color: var(--text-muted);
}

@media (max-width: 47.99em) {
  .site-footer { padding-bottom: calc(var(--space-9) + 2rem); } /* place pour la barre CTA mobile */
}

.footer-partner { margin-top: var(--space-4); color: var(--teal); }

.site-footer__legal p { max-width: none; }

/* ------------------------------------------ 8. Avis : slider pleine largeur */
.reviews-section .section-head { margin-bottom: var(--space-6); }

.reviews-track {
  grid-auto-columns: min(84vw, 24rem);
  gap: var(--space-4);
  padding-block: var(--space-2) var(--space-4);
  align-items: stretch;
}

.review-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-card);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  scroll-snap-align: start;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.review-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.review-card__smile { width: 3rem; color: var(--teal); }

.review-card__text {
  flex: 1;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--navy);
}

.review-card__author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  line-height: 1.35;
  color: var(--slate);
}

.review-card__author strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--navy);
}

.review-card__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--teal-tint);
  color: var(--teal-ink);
  font-family: var(--font-display);
  font-weight: 700;
}

.reviews-foot {
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.reviews-note { font-size: var(--fs-sm); color: var(--slate); max-width: 52ch; }

.reviews-controls { display: flex; gap: var(--space-2); }