/* =========================================
   CGM Plomberie – feuille de style
   Univers : mer, soleil, cases en tôle
   Mobile d'abord, puis tablette / ordinateur
   ========================================= */

:root {
  --sea-900: #0b3a5b;     /* bleu mer profond */
  --sea-700: #135f8c;
  --lagoon:  #16a3b4;     /* turquoise lagon */
  --lagoon-50: #e6f6f6;
  --sun:     #ffc534;     /* soleil */
  --sun-50:  #fff4d4;
  --sand:    #fff8ec;     /* fond sable clair */
  --coral:   #f2a28a;
  --leaf:    #3e9a62;
  --tole:    #c4472b;     /* tôle rouge */
  --white: #ffffff;
  --text: #17324a;
  --muted: #55697b;

  --call: #e0490f;        /* bouton Appeler : orange vif */
  --call-dark: #b93a09;

  --radius: 20px;
  --radius-sm: 12px;
  --shadow: 0 8px 24px rgba(11, 58, 91, .10);
  --font-title: "Baloo 2", system-ui, sans-serif;
  --font-text: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--sand);
}

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

h1, h2, h3 {
  font-family: var(--font-title);
  line-height: 1.1;
  margin: 0 0 .4em;
  color: var(--sea-900);
}

.container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 48px;
  padding: 12px 22px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(.98); }
.btn:focus-visible { outline: 3px solid var(--sea-700); outline-offset: 3px; }

.icon { width: 1.2em; height: 1.2em; flex-shrink: 0; }

.btn--call {
  background: var(--call);
  color: var(--white);
  box-shadow: 0 6px 18px rgba(224, 73, 15, .35);
}
.btn--call:hover { background: var(--call-dark); }

.btn--primary { background: var(--sea-900); color: var(--white); }
.btn--primary:hover { background: var(--sea-700); }

.btn--ghost {
  background: var(--white);
  color: var(--sea-900);
  box-shadow: inset 0 0 0 2px var(--sea-900);
}
.btn--ghost:hover { background: var(--sun-50); }

.btn--lg { min-height: 56px; padding: 14px 26px; font-size: 1.08rem; }
.btn--block { width: 100%; }

/* ---------- En-tête ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 2px 14px rgba(11, 58, 91, .08);
  transition: transform .3s ease;
}
.header--hidden { transform: translateY(-100%); }
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
}
.logo {
  font-family: var(--font-title);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--sea-900);
  text-decoration: none;
  line-height: 1;
}
.logo span { color: var(--lagoon); }

/* ---------- Bannière : ciel, soleil, mornes, cases ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-top: 40px;
  background: linear-gradient(180deg, #bfe7f6 0%, #e4f5f8 55%, #fff1cf 100%);
}
.hero__grid {
  display: grid;
  gap: 28px;
  align-items: center;
}
.hero__content { position: relative; }
/* photo du chauffe-eau, dans un cercle à anneau soleil */
.hero__sun {
  margin: 0 auto;
  width: min(78vw, 300px);
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 8px;
  background: var(--sun);
  box-shadow: 0 0 0 12px rgba(255, 197, 52, .3), 0 18px 40px rgba(11, 58, 91, .18);
}
.hero__sun img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.hero h1 {
  font-size: clamp(2.1rem, 8vw, 3.6rem);
  font-weight: 800;
  max-width: 16ch;
}
.hero__tag {
  display: inline-block;
  margin: 0 0 14px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--white);
  color: var(--sea-700);
  font-weight: 800;
  font-size: .9rem;
  box-shadow: var(--shadow);
}
.hero__subtitle {
  font-size: 1.08rem;
  max-width: 48ch;
  margin: 0 0 24px;
  color: var(--text);
}
.hero__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.badges {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.badges li {
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .75);
  color: var(--sea-900);
  font-size: .85rem;
  font-weight: 700;
}
.badges li:first-child { background: var(--sun); }

.hero__scene {
  position: relative;
  margin-top: 28px;
}
.hero__hills {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 110px;
}
.hero__village {
  position: relative;
  display: block;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

/* ---------- Bande de tôle ondulée ---------- */
.tole {
  height: 16px;
  background: repeating-linear-gradient(90deg,
    #9a3420 0 3px, var(--tole) 3px 8px, #e2704f 8px 10px, var(--tole) 10px 14px);
}

/* ---------- Sections ---------- */
.section { padding: 60px 0; }
.section__title {
  font-size: clamp(1.9rem, 6vw, 2.6rem);
  font-weight: 800;
  text-align: center;
}
.section__title--left { text-align: left; }
.section__intro {
  text-align: center;
  color: var(--muted);
  margin: 0 auto 32px;
  max-width: 50ch;
}
.kicker {
  margin: 0 0 4px;
  color: var(--lagoon);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .85rem;
}

/* ---------- Cartes services ---------- */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.card {
  position: relative;
  background: var(--white);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card--sun {
  background: linear-gradient(160deg, var(--sun-50), var(--white) 70%);
  box-shadow: 0 0 0 3px var(--sun), var(--shadow);
}
/* photo de chantier en haut de carte, bord à bord */
.card__media {
  margin: -24px -24px 20px;
  height: 210px;
  overflow: hidden; /* la photo ne déborde jamais sur l'icône en dessous */
}
.card__media img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}
.card__media--duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100%;
  gap: 3px;
  background: var(--sun);
}
.card__ribbon {
  display: inline-block;
  margin: 0 0 14px !important;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--sun);
  color: var(--sea-900) !important;
  font-size: .8rem;
  font-weight: 800;
}
/* icône + étiquette sur une seule ligne (carte chauffe-eau) */
.card__badge {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.card__badge .card__icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  margin: 0;
  flex-shrink: 0;
}
.card__badge .card__icon svg { width: 22px; height: 22px; }
.card__badge .card__ribbon { margin: 0 !important; }
.card__icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  margin-bottom: 14px;
}
.card__icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.card__icon--sea   { background: var(--lagoon-50); color: var(--sea-700); }
.card__icon--sun   { background: var(--sun); color: var(--sea-900); }
.card__icon--leaf  { background: #e3f3e8; color: var(--leaf); }
.card__icon--coral { background: #fde8e1; color: var(--tole); }
.card h3 { font-size: 1.35rem; }
.card p { margin: 0; color: var(--muted); }

.cta-inline {
  margin-top: 32px;
  padding: 26px 24px;
  border-radius: var(--radius);
  background: var(--sea-900);
  color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.cta-inline p {
  margin: 0;
  font-family: var(--font-title);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
}
.cta-inline p span {
  display: block;
  font-family: var(--font-text);
  font-size: 1rem;
  font-weight: 600;
  opacity: .85;
}

/* ---------- Bande de photos défilantes ---------- */
.strip {
  padding: 44px 0 52px;
  background: var(--lagoon-50);
}
.strip__title {
  margin: 0 0 18px;
  text-align: center;
  font-family: var(--font-title);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--sea-900);
}
/* Une photo et son double sont toujours séparés d'une liste entière.
   Pour qu'on ne les voie jamais en même temps, la zone visible doit rester
   plus étroite que (largeur d'une liste − largeur de la plus grande photo).
   Le script en bas de page calcule cette limite ; 1000px sert de valeur
   de secours pour les 5 photos actuelles. */
.strip__viewport {
  overflow: hidden;
  margin: 0 auto;
}
@media (min-width: 640px) {
  .strip__viewport { max-width: 1000px; border-radius: var(--radius-sm); }
}
.strip__track {
  display: flex;
  width: max-content;
  animation: defile 40s linear infinite;
}
.strip__viewport:hover .strip__track { animation-play-state: paused; }
.strip__list {
  display: flex;
  gap: 14px;
  margin: 0;
  padding: 0 14px 0 0;
  list-style: none;
}
.strip__list img {
  height: 230px;
  width: auto;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
@keyframes defile {
  to { transform: translateX(-50%); }
}
/* sans animation si le visiteur l'a désactivée : défilement au doigt */
@media (prefers-reduced-motion: reduce) {
  .strip__viewport { overflow-x: auto; }
  .strip__track { animation: none; }
  .strip__list[aria-hidden="true"] { display: none; }
}

/* ---------- Contact ---------- */
.contact {
  display: grid;
  gap: 32px;
}
.contact__info p { color: var(--muted); }
.phone {
  display: block;
  margin: 6px 0 10px;
  font-family: var(--font-title);
  font-size: 2.3rem;
  font-weight: 800;
  color: var(--sea-900);
  text-decoration: none;
}
.hours {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  color: var(--text);
}
.hours li { padding: 2px 0; }
.hours span {
  display: inline-block;
  min-width: 92px;
  font-weight: 800;
}

.form {
  background: var(--white);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}
.form h3 { font-size: 1.4rem; margin-bottom: 14px; }
.form label {
  display: block;
  font-weight: 700;
  margin-bottom: 6px;
}
.form input,
.form textarea {
  width: 100%;
  padding: 13px 14px;
  margin-bottom: 16px;
  border: 1.5px solid #cbd8e2;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 16px; /* évite le zoom auto sur iPhone */
  background: var(--sand);
}
.form input:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--lagoon);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(22, 163, 180, .2);
}
.form textarea { resize: vertical; }
.form button[disabled] { opacity: .7; cursor: wait; }
/* champ piège anti-robots : hors de l'écran, invisible pour les visiteurs */
.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form__status { margin: 14px 0 0; font-weight: 700; }
.form__status:empty { display: none; }
.form__status--ok,
.form__status--error {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
}
.form__status--ok { background: #e3f3e8; color: #1f6646; }
.form__status--error { background: #fde8e1; color: #9a3420; }
.form__status a { color: inherit; }

/* ---------- Pied de page ---------- */
.footer {
  background: var(--sea-900);
  color: #cfe3f0;
  padding: 0 0 24px;
}
.footer__inner {
  display: grid;
  gap: 24px;
  padding-top: 40px;
}
.footer p { margin: 0; }
.footer a { color: var(--white); font-weight: 800; text-decoration: none; }
.logo--footer { color: var(--white); margin-bottom: 8px !important; }
.logo--footer span { color: var(--sun); }
.footer__title {
  color: var(--sun);
  font-weight: 800;
  margin-bottom: 4px !important;
}
.footer__title--spaced { margin-top: 14px !important; }
.footer__copy {
  text-align: center;
  margin-top: 32px !important;
  font-size: .85rem;
  opacity: .7;
}

/* ---------- Bouton rond Appeler flottant ---------- */
.call-fab {
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 60;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--call);
  color: var(--white);
  box-shadow: 0 8px 22px rgba(224, 73, 15, .45);
  transition: transform .25s ease, opacity .25s ease, visibility .25s, background-color .15s ease;
}
.call-fab--hidden {
  opacity: 0;
  visibility: hidden;
  transform: scale(.6);
  pointer-events: none;
}
.call-fab .icon { width: 38px; height: 38px; }
.call-fab:hover { background: var(--call-dark); transform: scale(1.06); }
.call-fab:active { transform: scale(.95); }
.call-fab:focus-visible { outline: 3px solid var(--sea-700); outline-offset: 4px; }
/* onde qui attire l'œil */
.call-fab::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid var(--call);
  animation: onde 2.2s ease-out infinite;
  pointer-events: none;
}
@keyframes onde {
  from { transform: scale(1); opacity: .7; }
  to   { transform: scale(1.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .call-fab::after { animation: none; display: none; }
  .header { transition: none; }
}

/* =========================================
   Tablette
   ========================================= */
@media (min-width: 640px) {
  .hero__actions { flex-direction: row; flex-wrap: wrap; }
  .hero__hills { height: 140px; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .card--sun { grid-column: 1 / -1; }
  .card--sun .card__media { height: 260px; }
  .strip__list img { height: 300px; }
  .cta-inline { flex-direction: row; justify-content: space-between; text-align: left; }
  .footer__inner { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================
   Ordinateur
   ========================================= */
@media (min-width: 960px) {
  .header__inner { height: 60px; }
  .logo { font-size: 1.5rem; }
  .call-fab { right: 32px; bottom: 32px; width: 92px; height: 92px; }
  .call-fab .icon { width: 44px; height: 44px; }
  .hero { padding-top: 72px; }
  .hero__grid { grid-template-columns: 1.25fr 1fr; gap: 48px; }
  .hero__sun { width: min(100%, 440px); }
  .hero__hills { height: 170px; }
  .section { padding: 88px 0; }
  .cards { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .card--sun { grid-column: span 2; }
  .contact { grid-template-columns: 1fr 1fr; align-items: start; gap: 56px; }
  .contact__info .btn--block { width: auto; }
}