/* ==========================================================================
   Jbilou Peinture — feuille de style principale
   Direction artistique "atelier de peintre" :
   la page est une feuille de devis peinte sur la rade de Genève.
   Nuancier, ruban de masquage, bord peint, traits de pinceau, annotations.
   Palette : bleu profond (principal) · blanc (secondaire) · doré (accent).
   ========================================================================== */

:root {
  --blue: #1D3557;
  --blue-dark: #0A1B2E;
  --blue-mid: #2E4E7E;
  --gold: #BE9257;
  --gold-dark: #8F6C3C;
  --gold-soft: #D9BC8C;
  --tape: #EAD9A6;
  --error: #C0392B;
  --success: #1a7f37;
  --ink: #182433;
  --ink-soft: #45566C;
  --bg: #F6F8FB;
  --bg-alt: #E9EEF5;
  --bg-tint: #EEF3F9;
  --white: #ffffff;
  --line: #DCE3EC;
  --radius: 14px;
  --shadow-sm: 0 4px 14px rgba(20, 38, 63, 0.07);
  --shadow: 0 10px 30px rgba(20, 38, 63, 0.10);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-hand: 'Caveat', cursive;
  /* mouvement : une seule famille d'easing pour tout le site */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 140ms;
  --dur: 220ms;
  --dur-slow: 300ms;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

html { color-scheme: light; }

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--gold-soft); color: var(--blue-dark); }

img { max-width: 100%; display: block; }

.container { width: min(1160px, 92%); margin-inline: auto; }
.container--narrow { width: min(820px, 92%); }

h1, h2, h3 { line-height: 1.12; letter-spacing: -0.022em; text-wrap: balance; }

/* ---------- Accessibilité : lien d'évitement + focus visibles ---------- */
.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 300;
  padding: 0.7rem 1.2rem;
  background: var(--blue-dark); color: var(--white);
  border-radius: 0 0 10px 10px;
  font-weight: 600; text-decoration: none;
  transition: top var(--dur) var(--ease-out);
}
.skip-link:focus-visible { top: 0; }

:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 3px; }
.header :focus-visible,
.hero :focus-visible,
.section--contact :focus-visible,
.footer :focus-visible { outline-color: var(--gold-soft); }

/* ---------- Ruban de masquage (réutilisable) ---------- */
.tape {
  position: absolute;
  width: 92px; height: 26px;
  background: linear-gradient(180deg, rgba(234, 217, 166, 0.95), rgba(222, 202, 144, 0.9));
  clip-path: polygon(2% 8%, 98% 0%, 100% 92%, 0% 100%);
  box-shadow: 0 2px 6px rgba(20, 38, 63, 0.12);
  z-index: 2;
}

/* ---------- Annotations manuscrites ---------- */
.scribble {
  font-family: var(--font-hand);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--gold-dark);
  line-height: 1.2;
}
.scribble svg { vertical-align: middle; }
.scribble--hero {
  display: flex; align-items: flex-start; gap: 0.5rem;
  margin: 1rem 0 1.6rem 2.2rem;
  transform: rotate(-2deg);
  color: var(--gold-soft);
}
.scribble--form {
  position: absolute; top: -2.4rem; right: 1.6rem;
  transform: rotate(-4deg);
  color: var(--gold-soft);
  z-index: 3;
}

/* ---------- Bord peint (transition entre sections) ---------- */
.paint-edge {
  position: absolute; left: 0; right: 0; bottom: -1px;
  width: 100%; height: clamp(30px, 4.5vw, 64px);
  display: block;
  pointer-events: none;
  z-index: 1;
}
.paint-edge--flip { bottom: auto; top: -1px; transform: rotate(180deg); }
.paint-edge__feather { fill: var(--bg); opacity: 0.45; }
.paint-edge__solid { fill: var(--bg); }
.paint-edge--alt .paint-edge__feather,
.paint-edge--alt .paint-edge__solid { fill: var(--bg-alt); }

/* ---------- Boutons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.7rem;
  border-radius: 999px;
  font-family: var(--font);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out),
    background var(--dur) var(--ease-out), color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}
.btn:active { transform: translateY(0) scale(0.98); transition-duration: var(--dur-fast); }
.btn--primary { background: var(--gold); color: var(--blue-dark); }
/* balayage type "passe de rouleau" au survol */
.btn--primary::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.25) 50%, transparent 70%);
  transform: translateX(-110%);
}
.btn--primary:hover { background: var(--gold-soft); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(4, 10, 18, 0.28); }
.btn--primary:hover::after { transform: translateX(110%); transition: transform var(--dur-slow) var(--ease-out); }
.btn--primary:disabled { opacity: 0.7; cursor: progress; transform: none; }
.btn--ghost { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, 0.7); }
.btn--ghost:hover { background: var(--white); color: var(--blue); border-color: var(--white); transform: translateY(-2px); }
.btn--sm { padding: 0.55rem 1.2rem; font-size: 0.9rem; }
.btn--full { width: 100%; }

/* ---------- Header ---------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: rgba(10, 27, 46, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}
.header.is-scrolled { border-bottom-color: #24395c; box-shadow: 0 4px 20px rgba(5, 12, 22, 0.35); }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 72px; }

.logo { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--white); font-size: 1.15rem; }
.logo__mark {
  width: 38px; height: 38px;
  border-radius: 9px;
  overflow: hidden;
  flex-shrink: 0;
}
.logo__mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.logo__text strong { color: var(--gold-soft); }
.footer__logo { border-radius: 14px; margin-bottom: 1.1rem; }

.nav { display: flex; gap: 1.6rem; }
.nav a {
  position: relative;
  text-decoration: none; color: #c3cede;
  font-size: 0.92rem; font-weight: 500;
  padding: 0.2rem 0;
  transition: color var(--dur) var(--ease-out);
}
/* soulignement "trait de pinceau" qui se tire de gauche à droite */
.nav a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--gold-soft);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
.nav a:hover, .nav a:focus-visible, .nav a.is-active { color: var(--white); }
.nav a:hover::after, .nav a:focus-visible::after, .nav a.is-active::after { transform: scaleX(1); }

.header__actions { display: flex; align-items: center; gap: 1rem; }
.header__phone { text-decoration: none; color: var(--white); font-weight: 700; font-size: 0.95rem; white-space: nowrap; transition: color var(--dur) var(--ease-out); }
.header__phone:hover { color: var(--gold-soft); }

.burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
.burger span { width: 24px; height: 2.5px; background: var(--white); border-radius: 2px; transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur) var(--ease-out); }
.burger.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ---------- Sections génériques ---------- */
.section { padding: 6.5rem 0; }
.section--alt { background: var(--bg-alt); }

.section__head { max-width: 640px; margin: 0 auto 3.5rem; text-align: center; }
.section__head--left { margin-inline: 0; text-align: left; }
.section__head h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 800; margin-bottom: 1rem; }
.section__head p { color: var(--ink-soft); font-size: 1.02rem; }

/* sur-titres manuscrits, comme une note au crayon sur le mur */
.section__kicker {
  display: inline-block;
  font-family: var(--font-hand);
  font-size: 1.5rem; font-weight: 700;
  color: var(--gold-dark);
  margin-bottom: 0.4rem;
  transform: rotate(-1.5deg);
}
.section__kicker--light { color: var(--gold-soft); }

/* Mots clés : accent or bronze, dans la couleur du logo */
.accent { color: var(--gold-dark); }
.hero .accent,
.section--contact .accent { color: var(--gold-soft); }
.hero h1 em.accent { font-style: normal; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 8rem 0 clamp(6rem, 10vw, 8.5rem);
  overflow: hidden;
  /* l'overlay s'éclaircit vers la droite : le Jet d'eau reste visible */
  background:
    linear-gradient(180deg, rgba(10, 27, 46, 0.55) 0%, rgba(10, 27, 46, 0) 32%),
    linear-gradient(97deg, rgba(10, 27, 46, 0.96) 0%, rgba(10, 27, 46, 0.86) 42%, rgba(10, 27, 46, 0.38) 74%, rgba(10, 27, 46, 0.18) 100%),
    url('../assets/geneva.jpg') center 42% / cover no-repeat;
  color: var(--white);
}
.hero__content { max-width: 780px; }
/* entrée du hero : les éléments montent l'un après l'autre au chargement */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__content > * { animation: rise 0.6s var(--ease-out) both; }
  .js .hero__content > *:nth-child(2) { animation-delay: 90ms; }
  .js .hero__content > *:nth-child(3) { animation-delay: 180ms; }
  .js .hero__content > *:nth-child(4) { animation-delay: 260ms; }
  .js .hero__content > *:nth-child(5) { animation-delay: 330ms; }
}
.hero h1 { font-size: clamp(2.25rem, 4.6vw, 3.4rem); font-weight: 800; letter-spacing: -0.03em; margin: 1.2rem 0; max-width: 15em; }
.hero__subtitle { font-size: 1.13rem; color: #c9d4e4; max-width: 34rem; margin-bottom: 2rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; }
.hero__trust {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem;
  margin-top: 0.4rem;
  font-size: 0.9rem; font-weight: 600; color: #c9d4e4;
}
.hero__trust li { display: flex; align-items: center; gap: 0.5rem; }
.hero__trust li::before {
  content: '';
  flex-shrink: 0;
  width: 15px; height: 15px;
  background: var(--gold-soft);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Services : mur d'atelier ----------
   Chaque prestation est une fiche scotchée au mur, légèrement de travers,
   disposée en quinconce. Un trait de peinture de la charte souligne le titre. */
.services__wall {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4rem 1.9rem;
  margin-top: 4.2rem;
}
.fiche {
  position: relative;
  --paint: var(--gold);
  background: var(--white);
  border-radius: 4px;
  padding: 2.1rem 1.7rem 1.9rem;
  box-shadow: 0 14px 30px rgba(20, 38, 63, 0.13);
  transform: rotate(var(--tilt, 0deg));
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
/* inclinaisons et décalages variés : un mur, pas une grille */
.fiche:nth-child(6n + 1) { --tilt: -1.3deg; }
.fiche:nth-child(6n + 2) { --tilt: 0.8deg; margin-top: 1.8rem; }
.fiche:nth-child(6n + 3) { --tilt: -0.6deg; margin-top: 0.7rem; }
.fiche:nth-child(6n + 4) { --tilt: 0.9deg; margin-top: 0.4rem; }
.fiche:nth-child(6n + 5) { --tilt: -1deg; margin-top: 2rem; }
.fiche:nth-child(6n + 6) { --tilt: 0.7deg; }
/* au survol, la fiche se redresse et se détache du mur */
.fiche:hover { transform: rotate(0deg) translateY(-5px); box-shadow: 0 20px 40px rgba(20, 38, 63, 0.16); }

.tape--fiche { top: -13px; left: 50%; margin-left: -46px; }
.fiche:nth-child(odd) .tape--fiche { transform: rotate(-3deg); }
.fiche:nth-child(even) .tape--fiche { transform: rotate(2.5deg); }

.fiche h3 { font-size: 1.15rem; color: var(--ink); }
/* trait de peinture sous le titre, dans la teinte de la fiche */
.fiche__bar {
  display: block;
  width: 46px; height: 5px;
  margin: 0.6rem 0 0.8rem;
  background: var(--paint);
  border-radius: 2px 5px 2px 4px;
  transform: skewX(-14deg);
  transition: width var(--dur) var(--ease-out);
}
.fiche:hover .fiche__bar { width: 74px; }
.fiche p { font-size: 0.93rem; color: var(--ink-soft); }
.fiche__tag {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.25rem 0.8rem;
  font-size: 0.78rem; font-weight: 600;
  color: var(--gold-dark);
  background: rgba(190, 146, 87, 0.1);
  border: 1px solid rgba(190, 146, 87, 0.4);
  border-radius: 999px;
  white-space: nowrap;
}

.fiche--nuit { --paint: var(--blue-dark); }
.fiche--bleu { --paint: var(--blue); }
.fiche--moyen { --paint: var(--blue-mid); }
.fiche--or-fonce { --paint: var(--gold-dark); }
.fiche--or { --paint: var(--gold); }
.fiche--or-clair { --paint: var(--gold-soft); }

/* appel à l'action sous le nuancier */
.services__cta { text-align: center; margin-top: 3rem; }
.services__cta a {
  color: var(--gold-dark);
  font-weight: 600;
  text-decoration: none;
}
.services__cta a:hover { text-decoration: underline; text-underline-offset: 4px; }
.services__cta-arrow {
  display: inline-block;
  margin-left: 0.2rem;
  font-weight: 800;
  transition: transform var(--dur) var(--ease-out);
}
.services__cta a:hover .services__cta-arrow { transform: translateX(6px); }

/* ---------- Pourquoi nous ---------- */
.why__inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: 4rem; align-items: start; }
.why__badge {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.9rem;
  margin-top: 2rem; padding: 1.2rem 1.4rem 1rem;
  background: var(--white); border-radius: 4px; box-shadow: var(--shadow);
  transform: rotate(-1.2deg);
}
.tape--badge { top: -12px; left: 50%; margin-left: -46px; transform: rotate(-2deg); }
.why__badge span { display: block; font-size: 0.85rem; color: var(--ink-soft); }

/* les 4 arguments respirent : pas de boîtes, des taches de peinture dorées */
.why__list { list-style: none; display: grid; gap: 2.4rem; padding-top: 0.5rem; }
.why__list li { display: flex; gap: 1.2rem; align-items: flex-start; }
.why__icon {
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 52px; height: 52px;
  color: var(--gold-dark);
  background: rgba(190, 146, 87, 0.18);
  border-radius: var(--radius);
}
.why__list h3 { font-size: 1.1rem; margin-bottom: 0.35rem; }
.why__list p { font-size: 0.95rem; color: var(--ink-soft); max-width: 34rem; }

/* ---------- Contact ---------- */
.section--contact {
  position: relative;
  background: var(--blue);
  color: var(--white);
  background-image: repeating-linear-gradient(97deg,
    rgba(255, 255, 255, 0.03) 0px, rgba(255, 255, 255, 0.03) 80px,
    transparent 80px, transparent 180px);
  padding-top: 8rem;
}
.contact__inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: 4rem; align-items: start; }
.contact__info h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 800; margin-bottom: 1rem; }
.contact__info > p { color: #c9d4e4; margin-bottom: 2rem; }
.contact__details { list-style: none; display: grid; gap: 0.7rem; margin-bottom: 2rem; }
.contact__details li { display: flex; align-items: center; gap: 0.8rem; min-height: 34px; color: #e8edf4; }
.contact__details li svg { color: var(--gold-soft); flex-shrink: 0; }
.contact__details a { color: var(--white); text-decoration: none; font-weight: 600; transition: color var(--dur) var(--ease-out); }
.contact__details a:hover { color: var(--gold-soft); }
.contact__insta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: var(--white); text-decoration: none; font-weight: 600;
  padding: 0.6rem 1.2rem; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px;
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.contact__insta:hover { border-color: var(--gold-soft); color: var(--gold-soft); background: rgba(255, 255, 255, 0.06); }

/* formulaire scotché comme une feuille de devis */
.form {
  position: relative;
  background: var(--white); border-radius: 6px;
  padding: 2.4rem 2.2rem 2.2rem;
  color: var(--ink);
  box-shadow: 0 20px 50px rgba(4, 10, 18, 0.32);
  transform: rotate(0.6deg);
}
.tape--form-left { top: -13px; left: 8%; transform: rotate(-5deg); }
.tape--form-right { top: -13px; right: 8%; transform: rotate(4deg); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form__field { margin-bottom: 1.1rem; }
.form__field label { display: block; font-size: 0.85rem; font-weight: 700; margin-bottom: 0.35rem; }
.form__field input,
.form__field select,
.form__field textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1.5px solid var(--line); border-radius: 10px;
  font-family: var(--font); font-size: 0.95rem;
  color: var(--ink);
  background: var(--bg);
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.form__field ::placeholder { color: #5F6E80; opacity: 1; }
/* chevron du select : cohérent d'un navigateur à l'autre */
.form__field select {
  appearance: none;
  -webkit-appearance: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2345566C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.9rem center / 16px, var(--bg);
  padding-right: 2.6rem;
}
.form__field input:focus,
.form__field select:focus,
.form__field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(29, 53, 87, 0.14);
}
.form__field input.is-invalid,
.form__field textarea.is-invalid { border-color: var(--error); background: #fdf1ef; }
.form__field input.is-invalid:focus,
.form__field textarea.is-invalid:focus { box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.14); }
.form__error { margin-top: 0.35rem; font-size: 0.82rem; font-weight: 600; color: var(--error); }
.form__status { margin-top: 0.9rem; font-weight: 600; font-size: 0.95rem; }
.form__status.is-success { color: var(--success); }
.form__status.is-error { color: var(--error); }
.form__note { margin-top: 0.8rem; font-size: 0.78rem; color: var(--ink-soft); }

/* ---------- Footer ---------- */
.footer { background: var(--blue-dark); color: #aebcd2; padding: 4rem 0 0; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: 3rem; }
.footer h3 {
  color: var(--gold-soft);
  font-size: 0.8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 1.1rem;
}
.footer p { font-size: 0.9rem; }
.footer a { display: block; color: #aebcd2; text-decoration: none; font-size: 0.9rem; margin-bottom: 0.5rem; transition: color var(--dur) var(--ease-out); }
.footer a:hover { color: var(--white); }
.footer__bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;
  padding: 1.4rem 0; border-top: 1px solid #24395c;
  font-size: 0.85rem;
}
.footer__legal { background: none; border: none; color: #aebcd2; font-family: var(--font); font-size: 0.85rem; cursor: pointer; margin-left: 1.2rem; transition: color var(--dur) var(--ease-out); }
.footer__legal:hover { color: var(--white); text-decoration: underline; }

/* ---------- Modales ---------- */
.modal {
  position: fixed; inset: 0; z-index: 210;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 18, 30, 0.6);
  padding: 1.5rem;
}
.modal[hidden] { display: none; }
.modal__box {
  position: relative;
  background: var(--white); border-radius: var(--radius);
  max-width: 560px; width: 100%; max-height: 80vh; overflow-y: auto;
  padding: 2.5rem;
  animation: modal-in var(--dur) var(--ease-out);
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.modal__box h2 { margin-bottom: 1.2rem; font-size: 1.4rem; }
.modal__box p { margin-bottom: 1rem; color: var(--ink-soft); font-size: 0.95rem; }
.modal__close { position: absolute; top: 1rem; right: 1.2rem; background: none; border: none; font-size: 1.2rem; cursor: pointer; color: var(--ink-soft); transition: color var(--dur) var(--ease-out); }
.modal__close:hover { color: var(--ink); }

/* ---------- Animations d'apparition ----------
   Animation (et non transition) : ne bloque pas les transitions de survol.
   Sans JavaScript (pas de classe .js), tout reste visible. */
.js .reveal { opacity: 0; }
.js .reveal.is-visible {
  opacity: 1;
  animation: rise 0.55s var(--ease-out) both;
  animation-delay: var(--reveal-delay, 0ms);
}
/* anime `translate` (et non `transform`) : les rotations propres
   des éléments (feuille de devis, annotations) sont préservées */
@keyframes rise {
  from { opacity: 0; translate: 0 18px; }
  to { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .js .reveal.is-visible { opacity: 1; animation: none; }
  .modal__box { animation: none; }
  .btn--primary::after { display: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .services__wall { grid-template-columns: 1fr 1fr; }
  .why__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .nav {
    position: fixed; top: 72px; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--blue-dark);
    border-bottom: 1px solid #24395c;
    box-shadow: 0 20px 40px rgba(4, 10, 18, 0.4);
    opacity: 0;
    transform: translateY(-10px);
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out),
      visibility 0s var(--dur);
  }
  .nav.is-open {
    opacity: 1; transform: none; visibility: visible; pointer-events: auto;
    transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  }
  .nav a { padding: 1rem 1.6rem; border-top: 1px solid #24395c; }
  .nav a::after { content: none; }
  .burger { display: flex; }
  .header__phone { display: none; }

  .hero { padding-top: 8rem; }
  /* sur mobile : image recadrée sur le Jet d'eau + overlay plus uniforme */
  .hero {
    background:
      linear-gradient(180deg, rgba(10, 27, 46, 0.72) 0%, rgba(10, 27, 46, 0.86) 55%, rgba(10, 27, 46, 0.92) 100%),
      url('../assets/geneva-mobile.jpg') 71% 42% / cover no-repeat;
  }

  /* liens de contact : vraies cibles tactiles */
  .contact__details li { min-height: 44px; }

  .contact__inner { grid-template-columns: 1fr; gap: 3rem; }
  .section--contact { padding-top: 7rem; }
}

@media (max-width: 560px) {
  .header__inner { gap: 0.8rem; }
  .logo { font-size: 1rem; gap: 0.5rem; }
  .logo__mark { width: 34px; height: 34px; }
  .logo__text { white-space: nowrap; }
  .header__actions { gap: 0.6rem; }
  .header__actions .btn--sm { padding: 0.5rem 0.95rem; font-size: 0.84rem; white-space: nowrap; }

  .section { padding: 4.5rem 0; }
  .section__head { margin-bottom: 2.5rem; }

  /* mur d'atelier : carrousel à balayage horizontal */
  .services__wall {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    grid-template-columns: none;
    gap: 1.1rem;
    margin-top: 2.6rem;
    margin-inline: calc(50% - 50vw);
    padding: 1.4rem max(1.2rem, calc(50vw - 46%)) 1.6rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .fiche { scroll-snap-align: center; margin-top: 0 !important; }
  .fiche:nth-child(odd) { --tilt: -0.7deg; }
  .fiche:nth-child(even) { --tilt: 0.6deg; }
  .services__cta { margin-top: 1.6rem; }
  .form { padding: 2rem 1.4rem 1.8rem; }
  .form__row { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .hero__cta .btn { width: 100%; }
  .scribble--hero { margin-left: 1rem; }
  .scribble--form { right: 1.2rem; }
  .why__list { gap: 1.8rem; }
}