/* ==========================================================================
   PavéPur — sections.css
   Mise en page propre a chaque section de la page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Banniere
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding-top: calc(var(--bar-h) + var(--header-h) + var(--s-6));
  padding-bottom: var(--s-7);
  overflow: hidden;
  isolation: isolate;

  /* Fond bleu nuit riche : dégradé diagonal + deux nappes de profondeur.
     Aucune photo — un fond sobre et haut de gamme. */
  background:
    radial-gradient(135% 120% at 82% -12%, #163d68 0%, transparent 46%),
    radial-gradient(120% 120% at -8% 112%, #102a4c 0%, transparent 52%),
    linear-gradient(155deg, #0c1d37 0%, #0a1526 55%, #070f1d 100%);
}

/* Halos diffus qui donnent la touche « chic » sans surcharger. */
.hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* Halo bleu clair, en haut à droite. */
.hero__backdrop::before {
  content: "";
  position: absolute;
  top: -18%;
  right: -8%;
  width: min(58vw, 820px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(46, 155, 240, 0.2), transparent 62%);
}

/* Nappe plus profonde, en bas à gauche : assied la composition. */
.hero__backdrop::after {
  content: "";
  position: absolute;
  bottom: -24%;
  left: -12%;
  width: min(52vw, 720px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(21, 66, 112, 0.55), transparent 60%);
}

.hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
  color: var(--c-white);
}

.hero__content {
  max-width: 680px;
}

/* Pastille de confiance au-dessus du titre. */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0.5rem 1rem 0.5rem 0.6rem;
  margin-bottom: var(--s-5);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--r-full);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hero__badge-dot {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--r-full);
  background: var(--c-accent);
}

.hero__badge-dot svg {
  width: 13px;
  height: 13px;
}

.hero__title {
  margin-bottom: var(--s-5);
}

/* Le mot cle du titre passe en bleu clair. */
.hero__title em {
  font-style: normal;
  color: var(--c-accent);
}

.hero__sub {
  font-size: var(--t-lead);
  color: rgba(255, 255, 255, 0.86);
  max-width: 56ch;
  margin-bottom: var(--s-7);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-bottom: clamp(3rem, 2rem + 4vw, 5rem);
}

/* --- Bandeau de reassurance --- */

.hero__stats {
  display: grid;
  /* 4 arguments de confiance en 2 x 2 : plus lisible que 4 colonnes serrees. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4) var(--s-5);
  padding-top: var(--s-6);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  max-width: 640px;
}

.hero__stat {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.hero__stat svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--c-accent);
}

.hero__stat span {
  font-family: var(--f-display);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
}

/* --------------------------------------------------------------------------
   Services
   -------------------------------------------------------------------------- */

.services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(1.25rem, 1rem + 1vw, 2rem);
}

/* --------------------------------------------------------------------------
   Pourquoi nous choisir
   -------------------------------------------------------------------------- */

.why__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 1rem + 2vw, 3rem) clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.why__item {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.why__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--r);
  background: rgba(46, 155, 240, 0.12);
  border: 1px solid rgba(46, 155, 240, 0.24);
  color: var(--c-accent);
  transition:
    background-color var(--d) var(--e-out),
    transform var(--d) var(--e-out);
}

.why__item:hover .why__icon {
  background: rgba(46, 155, 240, 0.22);
  transform: translateY(-3px);
}

.why__icon svg {
  width: 24px;
  height: 24px;
}

.why__title {
  font-family: var(--f-display);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--c-white);
}

.why__text {
  font-size: var(--t-sm);
  color: var(--c-muted-dark);
}

/* --------------------------------------------------------------------------
   Galerie avant / apres
   -------------------------------------------------------------------------- */

.gallery__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-bottom: var(--s-7);
}

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: clamp(1.25rem, 1rem + 1vw, 2rem);
}

.gallery__empty {
  padding: var(--s-8) 0;
  text-align: center;
  color: var(--c-muted);
}

/* Mention d'origine des photos : discrete, mais lisible (contraste AA). */
.gallery__credit {
  margin-top: var(--s-6);
  font-size: var(--t-xs);
  color: var(--c-muted);
  text-align: center;
}

.project {
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-xs);
  transition:
    transform var(--d) var(--e-out),
    box-shadow var(--d) var(--e-out),
    opacity var(--d) var(--e-out);
}

.project:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-lg);
}

/* Masque par le filtre : retire du flux ET du parcours clavier (via `hidden`
   pose en JS ; la classe ne gere que l'apparence). */
.project[hidden] {
  display: none;
}

.project__body {
  padding: var(--s-5) var(--s-5) var(--s-6);
}

.project__tag {
  display: inline-block;
  margin-bottom: var(--s-3);
  padding: 0.25rem 0.7rem;
  font-family: var(--f-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-accent-700);
  background: var(--c-accent-050);
  border-radius: var(--r-full);
}

.project__title {
  margin-bottom: var(--s-2);
}

.project__text {
  font-size: var(--t-sm);
  color: var(--c-muted);
}

/* --- Curseur de comparaison --- */

.ba {
  position: relative;
  /* Carre : c'est le format des photos sources. Un cadre 3:2 les rognerait
     de haut en bas et couperait la moitie de la surface nettoyee. */
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--c-paper);
  touch-action: pan-y; /* le glissement horizontal pilote le curseur */
  user-select: none;
  isolation: isolate;
}

.ba__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--d-slow) var(--e-out);
}

/* Decoupe l'image AVANT a la position du curseur.
   clip-path plutot qu'un conteneur redimensionne : aucun recalcul de mise en
   page, et les deux images restent alignees au pixel pres. */
.ba__img--before {
  z-index: 1;
  clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0);
}

/* Leger zoom au survol (demande au cahier des charges). */
.project:hover .ba__img,
.ba:focus-within .ba__img {
  transform: scale(1.045);
}

.ba__label {
  position: absolute;
  bottom: var(--s-4);
  z-index: 2;
  padding: 0.3rem 0.75rem;
  font-family: var(--f-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-white);
  background: rgba(10, 18, 32, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--r-full);
  pointer-events: none;
  transition: opacity var(--d) var(--e-out);
}

.ba__label--before {
  left: var(--s-4);
}

.ba__label--after {
  right: var(--s-4);
}

/* La poignee et son trait de separation. */
.ba__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos, 50%);
  z-index: 3;
  width: 2px;
  background: var(--c-white);
  transform: translateX(-1px);
  box-shadow: 0 0 12px rgba(10, 18, 32, 0.4);
  pointer-events: none;
}

.ba__grip {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  transform: translate(-50%, -50%);
  border-radius: var(--r-full);
  background: var(--c-white);
  color: var(--c-navy);
  box-shadow: var(--sh);
  transition: transform var(--d) var(--e-out);
}

.ba__grip svg {
  width: 20px;
  height: 20px;
}

.ba:hover .ba__grip {
  transform: translate(-50%, -50%) scale(1.1);
}

/* Le champ `range` est superpose et transparent : il fournit gratuitement le
   glissement tactile/souris ET la navigation au clavier (fleches). */
.ba__range {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: ew-resize;
}

.ba__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 2px;
  height: 100%;
  background: transparent;
  cursor: ew-resize;
}

.ba__range::-moz-range-thumb {
  width: 2px;
  height: 100%;
  border: 0;
  background: transparent;
  cursor: ew-resize;
}

.ba__range:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: -3px;
}

/* Bouton plein ecran : action distincte du glissement, donc controle dedie
   plutot qu'un clic sur l'image (qui entrerait en conflit avec le curseur). */
.ba__expand {
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);
  z-index: 5;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  background: rgba(10, 18, 32, 0.55);
  color: var(--c-white);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity var(--d) var(--e-out),
    transform var(--d) var(--e-out),
    background-color var(--d) var(--e-out);
}

.ba__expand svg {
  width: 18px;
  height: 18px;
}

.project:hover .ba__expand,
.ba__expand:focus-visible {
  opacity: 1;
  transform: none;
}

.ba__expand:hover {
  background: var(--c-cta);
}

/* Sur ecran tactile il n'y a pas de survol : le bouton reste visible. */
@media (hover: none) {
  .ba__expand {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Visionneuse plein ecran
   -------------------------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 3vw, 3rem);
  background: rgba(6, 12, 22, 0.94);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.lightbox.is-open {
  display: flex;
  animation: fade-in var(--d) var(--e-out);
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

.lightbox__inner {
  width: min(1100px, 100%);
}

.lightbox__stage {
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--sh-lg);
}

/* Dans la visionneuse, on force la mise a l'echelle « contenir » pour ne rien
   rogner de la photo. */
.lightbox .ba {
  background: #0a1220;
}

.lightbox .ba__img {
  object-fit: contain;
}

.lightbox .ba__expand {
  display: none;
}

.lightbox .ba:hover .ba__img,
.lightbox .ba:focus-within .ba__img {
  transform: none;
}

.lightbox__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-3) var(--s-5);
  margin-top: var(--s-5);
  color: var(--c-white);
}

.lightbox__title {
  font-family: var(--f-display);
  font-size: 1.25rem;
  font-weight: 700;
}

.lightbox__text {
  font-size: var(--t-sm);
  color: var(--c-muted-dark);
}

.lightbox__count {
  margin-left: auto;
  font-size: var(--t-sm);
  color: var(--c-muted-dark);
  font-variant-numeric: tabular-nums;
}

.lightbox__btn {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.12);
  color: var(--c-white);
  transition:
    background-color var(--d) var(--e-out),
    transform var(--d) var(--e-out);
}

.lightbox__btn:hover {
  background: var(--c-cta);
  transform: scale(1.06);
}

.lightbox__btn svg {
  width: 22px;
  height: 22px;
}

.lightbox__close {
  top: clamp(1rem, 2vw, 2rem);
  right: clamp(1rem, 2vw, 2rem);
}

.lightbox__prev {
  top: 50%;
  left: clamp(0.5rem, 1.5vw, 1.5rem);
  transform: translateY(-50%);
}

.lightbox__next {
  top: 50%;
  right: clamp(0.5rem, 1.5vw, 1.5rem);
  transform: translateY(-50%);
}

.lightbox__prev:hover,
.lightbox__next:hover {
  transform: translateY(-50%) scale(1.06);
}

/* --------------------------------------------------------------------------
   Processus
   -------------------------------------------------------------------------- */

.process__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  position: relative;
}

.step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

/* Le fil qui relie les etapes. Purement decoratif. */
.step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 27px;
  left: calc(54px + var(--s-4));
  right: calc(-1 * clamp(1.5rem, 1rem + 2vw, 2.5rem));
  height: 2px;
  background: linear-gradient(90deg, var(--c-line), transparent);
}

.step__num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: var(--r-full);
  background: var(--c-white);
  border: 1.5px solid var(--c-line);
  font-family: var(--f-display);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--c-navy);
  box-shadow: var(--sh-sm);
  transition:
    background-color var(--d) var(--e-out),
    color var(--d) var(--e-out),
    border-color var(--d) var(--e-out),
    transform var(--d) var(--e-out);
}

.step:hover .step__num {
  background: var(--c-cta);
  border-color: var(--c-cta);
  color: var(--c-white);
  transform: translateY(-3px);
  box-shadow: var(--sh-accent);
}

.step__title {
  font-family: var(--f-display);
  font-size: 1.06rem;
  font-weight: 700;
}

.step__text {
  font-size: var(--t-sm);
  color: var(--c-muted);
}

/* --------------------------------------------------------------------------
   Reservation (Cal.com)
   -------------------------------------------------------------------------- */

/* Rappel : la reservation vient APRES la soumission. */
.booking__notice {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin-top: var(--s-5);
  padding: 0.8rem 1.1rem;
  text-align: left;
  background: var(--c-accent-050);
  border: 1px solid rgba(46, 155, 240, 0.25);
  border-radius: var(--r);
  font-size: var(--t-sm);
  color: var(--c-navy);
}

.booking__notice svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--c-accent-700);
}

.booking__notice a {
  color: var(--c-accent-700);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.booking__shell {
  min-height: 620px;
  padding: var(--s-4);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh);
  overflow: hidden;
}

/* La hauteur min de .booking__shell (620px) reserve deja la place du calendrier
   avant qu'il ne se charge : aucun saut de mise en page (CLS), et aucun gabarit
   de chargement a nous — Cal.com affiche le sien dans l'iframe. */

.booking__fallback {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-7) var(--s-5);
  text-align: center;
}

.booking__fallback.is-shown {
  display: flex;
}

/* --------------------------------------------------------------------------
   Soumission
   -------------------------------------------------------------------------- */

.quote {
  position: relative;
  background: var(--c-navy-900);
  color: var(--c-white);
  overflow: hidden;
}

/* Halo bleu diffus en fond — donne de la profondeur sans image. */
.quote::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -10%;
  width: 60vw;
  height: 60vw;
  max-width: 800px;
  max-height: 800px;
  background: radial-gradient(circle, rgba(46, 155, 240, 0.16), transparent 65%);
  pointer-events: none;
}

.quote__layout {
  position: relative;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  align-items: start;
}

.quote__points {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  margin-top: var(--s-6);
}

.quote__point {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: var(--t-sm);
  color: var(--c-muted-dark);
}

.quote__point svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--c-accent);
}

.quote__card {
  padding: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  background: var(--c-white);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  color: var(--c-ink);
}

.form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
}

.form__foot {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  margin-top: var(--s-6);
}

.form__note {
  font-size: var(--t-xs);
  color: var(--c-muted);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact__layout {
  /* Colonne unique depuis le retrait de la carte : bloc lisible, aligne a
     gauche sous le titre. */
  max-width: 640px;
}

.contact__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.contact__item {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
}

.contact__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: var(--r);
  background: var(--c-accent-050);
  color: var(--c-accent-700);
}

.contact__icon svg {
  width: 21px;
  height: 21px;
}

.contact__label {
  font-family: var(--f-display);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 2px;
}

.contact__value {
  font-size: 1.02rem;
  font-weight: 500;
  font-style: normal;
}

.contact__value a {
  transition: color var(--d) var(--e-out);
}

.contact__value a:hover {
  color: var(--c-accent-700);
}

/* --- Heures d'ouverture --- */

.hours {
  margin-top: var(--s-7);
  padding: var(--s-5);
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--r);
}

.hours__row {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 0.45rem 0;
  font-size: var(--t-sm);
}

.hours__row + .hours__row {
  border-top: 1px solid var(--c-line);
}

.hours__day {
  color: var(--c-muted);
}

.hours__time {
  font-weight: 600;
}

.hours__time--closed {
  color: var(--c-muted);
  font-weight: 500;
}

/* --- Zone desservie --- */

.areas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-4);
}

.area {
  padding: 0.3rem 0.8rem;
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--c-navy);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-full);
}

/* --- Carte --- */

.map {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--c-line);
  box-shadow: var(--sh-sm);
  /* Hauteur fixe : reserve la place avant le chargement de l'iframe. */
  aspect-ratio: 4 / 3;
  background: var(--c-paper);
}

.map iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* --------------------------------------------------------------------------
   Bandeau d'appel final
   -------------------------------------------------------------------------- */

.cta-band {
  padding-block: clamp(3rem, 2rem + 4vw, 5rem);
  background: linear-gradient(120deg, var(--c-navy) 0%, var(--c-navy-600) 100%);
  color: var(--c-white);
}

.cta-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
}

.cta-band__title {
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem);
  margin-bottom: var(--s-2);
}

.cta-band__text {
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--t-sm);
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
}

/* --------------------------------------------------------------------------
   Pages legales
   -------------------------------------------------------------------------- */

.legal {
  padding-top: calc(var(--bar-h) + var(--header-h) + var(--s-8));
  padding-bottom: var(--s-9);
}

.legal__body {
  max-width: var(--wrap-narrow);
}

.legal__body h2 {
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem);
  margin-top: var(--s-8);
  margin-bottom: var(--s-4);
}

.legal__body h2:first-of-type {
  margin-top: var(--s-7);
}

.legal__body p,
.legal__body li {
  color: var(--c-muted);
  margin-bottom: var(--s-4);
}

.legal__body ul {
  list-style: disc;
  padding-left: var(--s-5);
  margin-bottom: var(--s-5);
}

.legal__body li {
  margin-bottom: var(--s-2);
}

.legal__body a {
  color: var(--c-accent-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal__updated {
  font-size: var(--t-sm);
  color: var(--c-muted);
}

/* Page 404 */

.notfound {
  display: grid;
  place-items: center;
  min-height: 100svh;
  text-align: center;
  padding: var(--s-7) var(--s-5);
}

.notfound__code {
  font-family: var(--f-display);
  font-size: clamp(4.5rem, 3rem + 9vw, 9rem);
  font-weight: 800;
  line-height: 1;
  color: var(--c-accent);
  margin-bottom: var(--s-4);
}

.notfound__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  justify-content: center;
  margin-top: var(--s-6);
}

/* ==========================================================================
   Adaptations — l'experience mobile est prioritaire.
   ========================================================================== */

@media (max-width: 1080px) {
  .why__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .process__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-7) var(--s-6);
  }

  /* Le fil de liaison n'a plus de sens sur deux rangees. */
  .step:not(:last-child)::before {
    display: none;
  }
}

@media (max-width: 900px) {
  .quote__layout,
  .contact__layout {
    grid-template-columns: 1fr;
  }

  .hero__stats {
    grid-template-columns: 1fr;
    gap: var(--s-4);
  }
}

@media (max-width: 620px) {
  .hero {
    min-height: auto;
    padding-top: calc(var(--bar-h) + var(--header-h) + var(--s-7));
    padding-bottom: var(--s-8);
  }

  .hero__actions .btn {
    width: 100%;
  }

  .why__grid,
  .process__grid,
  .form__grid {
    grid-template-columns: 1fr;
  }

  .gallery__grid,
  .services__grid {
    grid-template-columns: 1fr;
  }

  .cta-band__actions .btn {
    width: 100%;
  }

  /* Les fleches de la visionneuse passent en bas, hors de la zone du curseur. */
  .lightbox__prev {
    top: auto;
    bottom: var(--s-4);
    left: calc(50% - 60px);
    transform: none;
  }

  .lightbox__next {
    top: auto;
    bottom: var(--s-4);
    right: calc(50% - 60px);
    transform: none;
  }

  .lightbox__prev:hover,
  .lightbox__next:hover {
    transform: scale(1.06);
  }

  .lightbox__count {
    margin-left: 0;
    width: 100%;
  }
}