/* ==========================================================================
   ABBS Dépannage — plomberie & sanitaire, Suisse romande
   Fond blanc, bleus repris du logo. Unités en vw/vh uniquement.
   Bascule desktop : @media (min-aspect-ratio: 3/4)
   ========================================================================== */

/* Polices auto-hébergées (latin + latin-ext), extraites de Google Fonts */
/* Karla 400 — latin-ext */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/karla-latin-ext-var.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Karla 400 — latin */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/karla-latin-var.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Karla 500 — latin-ext */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/karla-latin-ext-var.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Karla 500 — latin */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/karla-latin-var.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Karla 700 — latin-ext */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/karla-latin-ext-var.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Karla 700 — latin */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/karla-latin-var.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Roboto Mono 500 — latin-ext */
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/roboto-mono-latin-ext-var.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Roboto Mono 500 — latin */
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/roboto-mono-latin-var.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Roboto Mono 700 — latin-ext */
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/roboto-mono-latin-ext-var.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Roboto Mono 700 — latin */
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/roboto-mono-latin-var.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Saira Condensed 500 — latin-ext */
@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/saira-condensed-latin-ext-500.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Saira Condensed 500 — latin */
@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/saira-condensed-latin-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Saira Condensed 600 — latin-ext */
@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/saira-condensed-latin-ext-600.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Saira Condensed 600 — latin */
@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/saira-condensed-latin-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Saira Condensed 700 — latin-ext */
@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/saira-condensed-latin-ext-700.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Saira Condensed 700 — latin */
@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/saira-condensed-latin-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Bleus échantillonnés directement sur le logo */
  --nuit:    #012959;
  --marine:  #01346E;
  --bleu:    #014F9C;
  --flux:    #0A6FCB;
  --eclat:   #259AF8;

  --encre:   #021B41;
  --ardoise: #5B7391;
  --givre:   #D7E5F4;
  --brume:   #F4F8FD;
  --blanc:   #FFFFFF;

  --ramp:      linear-gradient(135deg, #012959 0%, #01346E 30%, #014F9C 62%, #1F88E4 100%);
  --ramp-clair:linear-gradient(135deg, #014F9C 0%, #1F88E4 60%, #4FB4FF 100%);

  --display: 'Saira Condensed', 'Arial Narrow', sans-serif;
  --texte:   'Karla', 'Helvetica Neue', Arial, sans-serif;
  --tech:    'Roboto Mono', 'Consolas', monospace;

  /* Échelle typographique — mobile */
  --t1: 10vw;
  --t2: 7.6vw;
  --t3: 5.2vw;
  --tb: 4.2vw;
  --ts: 3.5vw;
  --tm: 3vw;

  /* Rythme */
  --gx: 6vw;    /* gouttière horizontale */
  --gy: 14vw;   /* respiration verticale des sections */
  --filet: 0.25vw;
  --rayon: 2.5vw;
}

@media (min-aspect-ratio: 3/4) {
  :root {
    --t1: 4.4vw;
    --t2: 2.9vw;
    --t3: 1.45vw;
    --tb: 1.12vw;
    --ts: 0.92vw;
    --tm: 0.75vw;
    --gx: 6vw;
    --gy: 7vw;
    --filet: 0.08vw;
    --rayon: 0.7vw;
  }
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--texte);
  font-size: var(--tb);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; margin: 0; padding: 0; }

:where(a):focus-visible,
:where(button):focus-visible {
  outline: 0.5vw solid var(--eclat);
  outline-offset: 0.5vw;
  border-radius: 0.4vw;
}
@media (min-aspect-ratio: 3/4) {
  :where(a):focus-visible { outline-width: 0.16vw; outline-offset: 0.25vw; }
}

.evitement {
  position: absolute;
  left: -100vw;
  top: 0;
  background: var(--marine);
  color: var(--blanc);
  padding: 2vw 3vw;
  font-family: var(--tech);
  font-size: var(--tm);
  z-index: 10;
}
.evitement:focus { left: 0; }

/* --------------------------------------------------------- surtitres */
.surtitre {
  margin: 0 0 2.5vw;
  font-family: var(--tech);
  font-size: var(--tm);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--flux);
}
.surtitre--clair { color: #9CC8F4; }

@media (min-aspect-ratio: 3/4) {
  .surtitre { margin-bottom: 1.1vw; }
}

.titre2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t2);
  line-height: 1.02;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--marine);
}

/* --------------------------------------------------------- en-tête */
.entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gx);
  padding: 4vw var(--gx);
  border-bottom: var(--filet) solid var(--givre);
}

.entete__marque img { width: 42vw; }

.entete__droite { display: flex; align-items: center; gap: 3vw; }

@media (min-aspect-ratio: 3/4) {
  .entete { padding: 1.4vw var(--gx); }
  .entete__marque img { width: 13vw; }
  .entete__droite { gap: 2vw; }
}

/* --------------------------------------------------------- boutons */
.bouton {
  display: inline-block;
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--ts);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 2.6vw 5vw;
  border-radius: 10vw;
  border: var(--filet) solid transparent;
  transition: transform .25s ease, box-shadow .25s ease, background-position .45s ease;
}

.bouton--plein {
  color: var(--blanc);
  background: var(--ramp);
  background-size: 180% 180%;
  box-shadow: 0 1vw 3vw rgba(1, 41, 89, .22);
}
.bouton--plein:hover,
.bouton--plein:focus-visible {
  background-position: 100% 0;
  transform: translateY(-0.4vw);
  box-shadow: 0 1.6vw 4vw rgba(1, 41, 89, .3);
}

.bouton--ligne {
  color: var(--marine);
  background: var(--blanc);
  border-color: var(--givre);
}
.bouton--ligne:hover,
.bouton--ligne:focus-visible {
  border-color: var(--flux);
  color: var(--flux);
  transform: translateY(-0.4vw);
}

.bouton--grand { font-size: var(--t3); padding: 3.4vw 6.5vw; }

@media (min-aspect-ratio: 3/4) {
  .bouton { padding: .75vw 1.7vw; }
  .bouton--grand { padding: 1vw 2.2vw; font-size: 1.1vw; }
  .bouton--plein { box-shadow: 0 .4vw 1.2vw rgba(1, 41, 89, .2); }
  .bouton--plein:hover { transform: translateY(-.15vw); box-shadow: 0 .7vw 1.8vw rgba(1, 41, 89, .28); }
  .bouton--ligne:hover { transform: translateY(-.15vw); }
}

/* --------------------------------------------------------- hero */
.hero {
  padding: 12vw var(--gx) 6vw;
}

.hero__titre {
  margin: 0 0 4vw;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t1);
  line-height: .98;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--marine);
}
.hero__titre em {
  font-style: normal;
  background: var(--ramp-clair);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Deux lignes de même largeur, sans script : en Saira Condensed 700,
   la ligne 1 mesure 9,9 em et la ligne 2 12,1 em, d'où le rapport .815. */
.hero__l1, .hero__l2 { display: block; white-space: nowrap; }
.hero__l2 { font-size: .815em; margin-top: .12em; }
.hero__titre { font-size: 8.6vw; }
@media (min-aspect-ratio: 3/4) { .hero__titre { font-size: var(--t1); } }

.hero__chapo {
  margin: 0 0 7vw;
  max-width: 34ch;
  color: var(--ardoise);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 3vw; }

@media (min-aspect-ratio: 3/4) {
  .hero {
    display: grid;
    grid-template-columns: 1fr 0.78fr;
    align-items: center;
    gap: 5vw;
    padding: 5vw var(--gx) 4vw;
  }
  .hero__titre { margin-bottom: 1.6vw; }
  .hero__chapo { margin-bottom: 2.6vw; max-width: 38ch; }
  .hero__actions { gap: 1vw; }
}

/* --------------------------------------------------------- bloc confiance */
.confiance { margin-top: 10vw; }

.confiance__liste {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3vw;
}

.gage {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3vw;
  padding: 5vw 4.5vw;
  background: var(--blanc);
  border: var(--filet) solid var(--givre);
  border-radius: var(--rayon);
  box-shadow: 0 1vw 3vw rgba(1, 41, 89, .06);
}

.gage__icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 12vw;
  height: 12vw;
  border-radius: 50%;
  background: var(--brume);
  color: var(--flux);
}
.gage__icone svg {
  width: 55%;
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gage__texte { display: block; }

.gage__titre {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t3);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--marine);
}
.gage__detail {
  display: block;
  font-size: var(--ts);
  line-height: 1.35;
  color: var(--ardoise);
}

/* un seul accent : l'urgence, sur toute la largeur */
.gage--fort {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4vw;
  background: var(--ramp);
  border-color: transparent;
  box-shadow: 0 1.5vw 4vw rgba(1, 41, 89, .22);
}
.gage--fort .gage__icone { background: rgba(255, 255, 255, .18); color: var(--blanc); }
.gage--fort .gage__titre { color: var(--blanc); }
.gage--fort .gage__detail { color: #CFE3F8; }

@media (min-aspect-ratio: 3/4) {
  .confiance { margin-top: 0; }
  .confiance__liste { gap: .9vw; }
  .gage { gap: 1vw; padding: 1.5vw 1.4vw; box-shadow: 0 .4vw 1.2vw rgba(1, 41, 89, .06); }
  .gage__icone { width: 3vw; height: 3vw; }
  .gage--fort { gap: 1.2vw; box-shadow: 0 .6vw 1.8vw rgba(1, 41, 89, .22); }
}

/* --------------------------------------------------------- sections */
.section { padding: var(--gy) var(--gx); }
.section--claire { background: var(--brume); }

.section__tete { margin-bottom: 9vw; }
.section__chapo { margin: 3vw 0 0; max-width: 46ch; color: var(--ardoise); }

@media (min-aspect-ratio: 3/4) {
  .section__tete { margin-bottom: 3.4vw; max-width: 46vw; }
  .section__chapo { margin-top: 1vw; }
}

/* --------------------------------------------------------- cartes */
.cartes { display: grid; gap: 4vw; }

.carte {
  position: relative;
  background: var(--blanc);
  border: var(--filet) solid var(--givre);
  border-radius: var(--rayon);
  padding: 7vw 6vw;
  overflow: hidden;
  transition: opacity .7s ease, transform .7s ease, box-shadow .3s ease, border-color .3s ease;
}
/* état initial réservé au JS : sans lui, la carte reste lisible */
.js .carte { opacity: 0; transform: translateY(4vw); }
.js .carte.est-visible { opacity: 1; transform: none; }

.carte::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 0.8vw;
  background: var(--ramp-clair);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s ease;
}
.carte:hover { border-color: #B9D5F0; box-shadow: 0 2vw 5vw rgba(1, 41, 89, .1); }
.carte:hover::before { transform: scaleX(1); }

/* pictogramme posé dans une pastille bleu clair */
.carte__icone {
  display: grid;
  place-items: center;
  width: 15vw;
  height: 15vw;
  margin-bottom: 4vw;
  border-radius: 50%;
  background: linear-gradient(135deg, #EAF3FD, #D9EAFB);
  color: var(--marine);
}
.carte__icone svg {
  width: 66%;
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.carte__titre {
  margin: 0 0 2vw;
  line-height: 1.15;
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t3);
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--marine);
}
.carte__texte { margin: 0; color: var(--ardoise); font-size: var(--ts); }
.carte__prix {
  display: block;
  margin-top: 1.2em;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.25em;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--marine);
}

/* liste des équipements en pastilles */
.carte__liste { display: flex; flex-wrap: wrap; gap: 1.6vw; margin: 0; padding: 0; list-style: none; }
.carte__liste li {
  padding: .8vw 2.6vw;
  border: var(--filet) solid var(--givre);
  border-radius: 10vw;
  background: var(--brume);
  font-size: var(--ts);
  color: var(--marine);
}

@media (min-aspect-ratio: 3/4) {
  .cartes { grid-template-columns: repeat(4, 1fr); gap: 1.6vw; }
  .carte { padding: 2.4vw 2vw; }
  .carte__icone { width: 3.8vw; height: 3.8vw; margin-bottom: 1.4vw; }
  .carte__liste { gap: .3vw; }
  .carte__liste li { padding: .12vw .55vw; font-size: .78vw; }
  .js .carte { transform: translateY(1.5vw); }
  .js .carte.est-visible { transform: none; }
  .carte::before { height: .22vw; }
  .carte__titre { margin-bottom: .6vw; }
  .carte:hover { box-shadow: 0 .8vw 2vw rgba(1, 41, 89, .1); }
}

/* --------------------------------------------------------- déroulé */
.conduite { position: relative; display: grid; gap: 8vw; padding-left: 12vw; }

/* Tronçons de conduite entre deux cercles (verticaux en mobile) : chaque tronçon
   part du bord d'un cercle et s'arrête avant le suivant, sans jamais le traverser.
   ::before = fond, ::after = remplissage, déclenchés en cascade. */
.etape:not(:last-child)::before,
.etape:not(:last-child)::after {
  content: "";
  position: absolute;
  left: -7.4vw;          /* axe du cercle (centre à -6.8vw) */
  top: 10.7vw;           /* bas du cercle (9.2vw) + 1.5vw d'écart */
  bottom: -6.5vw;        /* gouttière (8vw) − 1.5vw d'écart */
  width: 1.2vw;
  border-radius: 1vw;
  background: var(--givre);
}
.etape:not(:last-child)::after {
  background: var(--ramp);
  transform-origin: top;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}
.js .etape::after { transform: scaleY(0); }
.js .conduite.est-visible .etape::after { transform: none; }
.etape:nth-child(2)::after { transition-delay: .5s; }
.etape:nth-child(3)::after { transition-delay: 1s; }

.etape { position: relative; transition: opacity .7s ease, transform .7s ease; }
.js .etape { opacity: 0; transform: translateY(3vw); }
.js .etape.est-visible { opacity: 1; transform: none; }

.etape__rang {
  position: absolute;
  left: -11.4vw;
  top: 0;
  display: grid;
  place-items: center;
  width: 9.2vw;
  height: 9.2vw;
  border-radius: 50%;
  background: var(--blanc);
  border: 0.6vw solid var(--flux);
  font-family: var(--tech);
  font-size: var(--tm);
  color: var(--marine);
}

.etape__titre {
  margin: 0 0 1.5vw;
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t3);
  text-transform: uppercase;
  color: var(--marine);
}
.etape__texte { margin: 0; color: var(--ardoise); font-size: var(--ts); }

@media (min-aspect-ratio: 3/4) {
  .conduite { grid-template-columns: repeat(4, 1fr); gap: 2.4vw; padding-left: 0; padding-top: 4vw; }
  /* Tronçons horizontaux : du bord droit du cercle (2.6vw) + .8vw
     jusqu'à .8vw avant le cercle suivant (gouttière de 2.4vw). */
  .etape:not(:last-child)::before,
  .etape:not(:last-child)::after {
    left: 3.4vw;
    right: -1.6vw;
    top: -2.5vw;         /* centre du cercle (-2.32vw) − demi-épaisseur */
    bottom: auto;
    width: auto;
    height: .35vw;
  }
  .etape:not(:last-child)::after { transform-origin: left; }
  .js .etape::after { transform: scaleX(0); }
  .js .conduite.est-visible .etape::after { transform: none; }
  .etape { padding-right: 1vw; }
  .js .etape { transform: translateY(1vw); }
  .js .etape.est-visible { transform: none; }
  .etape__rang {
    left: 0;
    top: -3.62vw;
    width: 2.6vw;
    height: 2.6vw;
    border-width: .16vw;
  }
  .etape__titre { margin-bottom: .5vw; }
}

/* --------------------------------------------------------- cantons */
.cantons { display: flex; flex-wrap: wrap; gap: 3vw; }
.cantons li {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t3);
  text-transform: uppercase;
  color: var(--marine);
  background: var(--blanc);
  border: var(--filet) solid var(--givre);
  border-radius: 10vw;
  padding: 2vw 5vw;
}
/* pastille menant à une page cantonale : le lien occupe toute la pastille */
.cantons a {
  display: block;
  margin: -2vw -5vw;
  padding: 2vw 5vw;
  border-radius: inherit;
  color: inherit;
  text-decoration: none;
  transition: background-color .25s ease, color .25s ease;
}
.cantons a::after { content: "\00a0\2192"; color: var(--flux); }
.cantons a:hover, .cantons a:focus-visible { background: #EAF3FD; color: var(--flux); }

@media (min-aspect-ratio: 3/4) {
  .cantons { gap: .8vw; }
  .cantons li { padding: .5vw 1.6vw; }
  .cantons a { margin: -.5vw -1.6vw; padding: .5vw 1.6vw; }
}

/* --------------------------------------------------------- appel final */
.appel {
  padding: var(--gy) var(--gx);
  background: var(--ramp);
  color: var(--blanc);
  text-align: center;
}

.appel__titre {
  margin: 0 0 3vw;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t2);
  line-height: 1.02;
  text-transform: uppercase;
}
.appel__texte { margin: 0 auto 6vw; max-width: 44ch; color: #CFE3F8; }

/* numéro cliquable : pastille blanche, texte marine */
.appel__numero {
  display: inline-flex;
  align-items: center;
  gap: 3vw;
  padding: 2.4vw 6vw 2.4vw 2.4vw;
  border-radius: 10vw;
  background: var(--blanc);
  color: var(--marine);
  font-family: var(--display);
  font-weight: 700;
  font-size: 7vw;
  letter-spacing: .03em;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 1.5vw 4vw rgba(1, 20, 50, .3);
  transition: transform .25s ease, box-shadow .25s ease;
}
.appel__numero:hover,
.appel__numero:focus-visible { transform: translateY(-.4vw); box-shadow: 0 2vw 5vw rgba(1, 20, 50, .38); }
.appel__icone {
  display: grid;
  place-items: center;
  width: 11vw;
  height: 11vw;
  border-radius: 50%;
  background: var(--ramp);
}
.appel__icone svg {
  width: 52%;
  fill: none;
  stroke: var(--blanc);
  stroke-width: 1.8;
  stroke-linejoin: round;
  stroke-linecap: round;
}

@media (min-aspect-ratio: 3/4) {
  .appel__titre { margin-bottom: 1vw; }
  .appel__texte { margin-bottom: 2.2vw; }
  .appel__numero { gap: 1vw; padding: .7vw 2vw .7vw .7vw; font-size: 2.2vw; box-shadow: 0 .6vw 1.8vw rgba(1, 20, 50, .3); }
  .appel__numero:hover, .appel__numero:focus-visible { transform: translateY(-.15vw); }
  .appel__icone { width: 3.4vw; height: 3.4vw; }
}

/* --------------------------------------------------------- pied */
.pied {
  padding: 10vw var(--gx);
  text-align: center;
  border-top: var(--filet) solid var(--givre);
}
.pied__logo { width: 42vw; margin: 0 auto 4vw; }
.pied__mention {
  margin: 0 0 2vw;
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t3);
  text-transform: uppercase;
  color: var(--marine);
}
.pied__legal { margin: 0; font-family: var(--tech); font-size: var(--tm); color: var(--ardoise); }
.pied__lien { color: inherit; text-decoration: underline; text-underline-offset: .25em; }
.pied__lien:hover, .pied__lien:focus-visible { color: var(--flux); }

@media (min-aspect-ratio: 3/4) {
  .pied { padding: 3.5vw var(--gx); }
  .pied__logo { width: 12vw; margin-bottom: 1.2vw; }
  .pied__mention { margin-bottom: .6vw; }
}

/* --------------------------------------------------------- page de confidentialité */
.juridique { padding: 12vw var(--gx) var(--gy); }
.juridique__maj { margin: 3vw 0 0; font-family: var(--tech); font-size: var(--tm); color: var(--ardoise); }
.juridique__corps { max-width: 68ch; margin-top: 8vw; }
.juridique__corps h2 {
  margin: 10vw 0 2.5vw;
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t3);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--marine);
}
.juridique__corps p { margin: 0 0 1em; }
.juridique__corps ul { margin: 0 0 1em; padding-left: 1.2em; list-style: disc; }
.juridique__corps li { margin-bottom: .4em; }
.juridique__corps li::marker { color: var(--flux); }
.juridique__corps a { color: var(--flux); text-underline-offset: .2em; }

@media (min-aspect-ratio: 3/4) {
  .juridique { padding: 5vw var(--gx) var(--gy); }
  .juridique__maj { margin-top: 1vw; }
  .juridique__corps { margin-top: 3vw; }
  .juridique__corps h2 { margin: 3vw 0 .8vw; }
}

/* --------------------------------------------------------- mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .js .carte, .js .etape, .js .etape::after { opacity: 1; transform: none; }
}

/* --------------------------------------------------------- barre d'appel fixe (mobile) */
.appel-fixe {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-evenly;   /* écarts égaux : bord – icône – texte – icône – bord */
  padding: 2.6vw 0 calc(2.6vw + env(safe-area-inset-bottom, 0px));
  background: var(--ramp);
  color: var(--blanc);
  text-decoration: none;
  box-shadow: 0 -1vw 4vw rgba(1, 41, 89, .25);
}
body { padding-bottom: 19vw; }   /* le pied de page n'est pas masqué par la barre */

.appel-fixe__texte { flex: none; display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.1; }
.appel-fixe__libelle {
  font-family: var(--tech);
  font-size: 2.7vw;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #BFE0FF;
}
.appel-fixe__libelle b { font-weight: 700; color: var(--blanc); }
.appel-fixe__numero {
  margin-top: .8vw;
  font-family: var(--display);
  font-weight: 700;
  font-size: 7.6vw;
  letter-spacing: .03em;
  color: var(--blanc);
}

.appel-fixe__icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 12vw;
  height: 12vw;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  border: .3vw solid rgba(255, 255, 255, .35);
}
.appel-fixe__icone svg {
  width: 52%;
  fill: none;
  stroke: var(--blanc);
  stroke-width: 1.8;
  stroke-linejoin: round;
  stroke-linecap: round;
}
/* pulsation d'alerte autour de la pastille */
.appel-fixe__icone { animation: af-pouls 1.8s ease-out infinite; }
@keyframes af-pouls {
  0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, .45); }
  100% { box-shadow: 0 0 0 3.2vw rgba(255, 255, 255, 0); }
}
@media (prefers-reduced-motion: reduce) { .appel-fixe__icone { animation: none; } }

@media (min-aspect-ratio: 3/4) {
  .appel-fixe { display: none; }
  body { padding-bottom: 0; }
}

/* --------------------------------------------------------- contact */
.contact { display: grid; gap: 8vw; }
.contact__liste { display: grid; gap: 5vw; margin: 6vw 0 0; }

.coord { display: flex; align-items: flex-start; gap: 4vw; }
.coord__icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 12vw;
  height: 12vw;
  border-radius: 50%;
  background: linear-gradient(135deg, #EAF3FD, #D9EAFB);
  color: var(--marine);
}
.coord__icone svg {
  width: 52%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.coord__texte { display: flex; flex-direction: column; }
.coord__titre {
  font-family: var(--tech);
  font-size: var(--tm);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--flux);
}
.coord__detail { font-style: normal; color: var(--encre); line-height: 1.5; }
.coord__lien {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t3);
  letter-spacing: .03em;
  color: var(--marine);
  text-decoration: none;
}
.coord__lien:hover, .coord__lien:focus-visible { color: var(--flux); }

/* pages cantonales : visuel carré en fin de bloc contact (centré en mobile, colonne 1/3 en desktop) */
.contact__visuel {
  display: block;
  width: 72vw;
  height: auto;
  justify-self: center;
  border: var(--filet) solid var(--givre);
  border-radius: var(--rayon);
}
@media (min-aspect-ratio: 3/4) {
  .contact--visuel { grid-template-columns: 2fr 1fr; align-items: center; gap: 3vw; }
  .contact--visuel .contact__liste { grid-template-columns: repeat(2, auto); row-gap: 2vw; }
  .contact__visuel { width: 20.4vw; }
}

@media (min-aspect-ratio: 3/4) {
  .contact__liste { grid-template-columns: repeat(3, auto); justify-content: start; column-gap: 5vw; margin: 2.2vw 0 0; }
  .coord { gap: 1.2vw; }
  .coord__icone { width: 3.4vw; height: 3.4vw; }
}

/* Titre du héros en anglais : lignes plus longues qu'en français.
   « ABBS SA – Western Switzerland » = 12,33 em, « Emergency plumbing services » = 11,55 em :
   ramenées toutes deux à 9,93 em, la largeur de la version française. */
:lang(en) .hero__l1 { font-size: .805em; }
:lang(en) .hero__l2 { font-size: .86em; }
/* Titre du héros en allemand : « ABBS SA – Westschweiz » = 8,89 em (pleine taille),
   « Notdienst Sanitär & Leitungen » = 11,79 em, ramené à la même largeur. */
:lang(de) .hero__l2 { font-size: .754em; }
/* Titre du héros en italien : « ABBS SA – Svizzera romanda » = 10,95 em,
   « Pronto intervento idraulico » = 11,22 em, toutes deux ramenées à 9,93 em. */
:lang(it) .hero__l1 { font-size: .906em; }
:lang(it) .hero__l2 { font-size: .885em; }

/* Pages cantonales : première ligne courte (« ABBS SA – Vaud »…). Les deux lignes sont
   ramenées à 8 em : ligne 2 (12,26 em) à .652em, ligne 1 agrandie selon le canton. */
.hero__titre[data-canton] .hero__l2 { font-size: .652em; }
.hero__titre[data-canton="valais"]    .hero__l1 { font-size: 1.287em; }  /* 6,22 em */
.hero__titre[data-canton="vaud"]      .hero__l1 { font-size: 1.412em; }  /* 5,67 em */
.hero__titre[data-canton="fribourg"]  .hero__l1 { font-size: 1.1em; }    /* 7,28 em */
.hero__titre[data-canton="neuchatel"] .hero__l1 { font-size: 1.039em; }  /* 7,70 em */