/* Axeddam — pages de services.

   Quatre pages bâties sur le même gabarit : une entrée en matière, ce que
   la prestation comprend, comment elle se déroule, ce sur quoi on ne
   transige pas, les questions qui reviennent, et les autres services.

   Tout ce qui pouvait être repris l'a été — `.masthead`, `.topnav`,
   `.menu`, `.actionbar`, `.contact`, `.site-footer` viennent de home.css,
   avec leur comportement responsive déjà réglé. Ce fichier n'ajoute que ce
   que la vitrine n'avait pas. */

/* --- En-tête ------------------------------------------------------------ */

/* La vitrine met le mot-symbole en h1 dans un grand bloc. Ici le h1 est le
   nom du service : l'en-tête se réduit à une ligne logo + navigation. */
.masthead--svc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px 26px;
}

.masthead--svc .logo__mark {
  font-size: 34px;
}

/* --- Fil d'Ariane ------------------------------------------------------- */

.crumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--on-dark-3);
}

.crumb a {
  color: var(--on-dark-2);
}

.crumb a:hover {
  color: var(--paper);
}

.crumb li::after {
  content: '/';
  margin-left: 8px;
  color: var(--on-dark-4);
}

.crumb li:last-child::after {
  content: none;
}

.crumb [aria-current] {
  color: var(--on-dark-1);
}

/* --- Entrée en matière -------------------------------------------------- */

.svc-hero {
  padding: clamp(30px, 5vw, 60px) clamp(8px, 3vw, 40px) 0;
}

.svc-hero__pill {
  display: inline-block;
  margin-top: 22px;
}

.svc-hero__title {
  margin: 16px 0 0;
  font-weight: 700;
  font-size: clamp(34px, 6vw, 76px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  max-width: 16ch;
  text-wrap: balance;
}

.svc-hero__lede {
  margin: 20px 0 0;
  font-weight: 500;
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.55;
  color: var(--on-dark-1);
  max-width: 56ch;
  text-wrap: pretty;
}

.svc-hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.svc-hero__cta {
  font-size: 15px;
  padding: 15px 24px;
  min-height: 44px;
}

.svc-hero__note {
  margin: 16px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--on-dark-3);
}

/* --- Ce que la prestation comprend -------------------------------------- */

.svc-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: clamp(28px, 4vw, 48px);
}

.svc-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: clamp(22px, 2.4vw, 30px);
}

.svc-item__title {
  margin: 14px 0 0;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.015em;
}

.svc-item__text {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--on-dark-2);
}

/* --- Déroulé, en quatre temps ------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: clamp(28px, 4vw, 48px);
  counter-reset: etape;
}

.step {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: clamp(22px, 2.4vw, 30px);
  counter-increment: etape;
}

.step::before {
  content: '0' counter(etape);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--on-dark-3);
}

.step__title {
  margin: 12px 0 0;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.015em;
}

.step__text {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--on-dark-2);
}

/* --- Ce sur quoi on ne transige pas ------------------------------------- */

.rules {
  margin-top: clamp(28px, 4vw, 48px);
  border-top: 1px solid var(--line);
}

.rule {
  display: grid;
  grid-template-columns: minmax(0, 22ch) minmax(0, 1fr);
  gap: 6px 32px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.rule__title {
  margin: 0;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.rule__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--on-dark-2);
}

/* --- Questions fréquentes ----------------------------------------------- */

.faq {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(22px, 3vw, 40px);
  margin-top: clamp(28px, 4vw, 48px);
}

.faq__q {
  margin: 0;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.faq__a {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--on-dark-2);
}

/* --- Les autres services ------------------------------------------------ */

.others {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: clamp(28px, 4vw, 48px);
}

.other {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: clamp(22px, 2.4vw, 28px);
  min-height: 44px;
  transition: border-color var(--ease), background-color var(--ease);
}

.other:hover {
  border-color: var(--fill-hover);
  background: var(--fill);
}

.other__title {
  margin: 4px 0 0;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.015em;
  color: var(--paper);
}

.other__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--on-dark-2);
}

.other__more {
  margin: auto 0 0;
  padding-top: 12px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--on-dark-3);
}

.other:hover .other__more {
  color: var(--paper);
}

/* --- Téléphone ---------------------------------------------------------- */

@media (max-width: 640px) {

  /* Le bandeau clair laisse la place à `.topnav` : même bascule que sur la
     vitrine, pilotée par la classe que pose js/menu.js. */
  .has-menu .masthead--svc {
    display: none;
  }

  .svc-hero {
    padding-top: 22px;
  }

  .svc-hero__title {
    max-width: none;
  }

  /* Deux colonnes de 22ch ne tiennent pas dans 360 px : le titre passe
     au-dessus de son explication. */
  .rule {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 20px 0;
  }

  /* La barre collante d'appel à l'action couvre le bas de l'écran. */
  .site-footer {
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }
}

/* --- Cibles tactiles ---------------------------------------------------- */

/* Trois liens restent sous 44 px de haut sans que leur hauteur puisse être
   forcée : les deux entrées du fil d'Ariane, qui doivent tenir sur une seule
   ligne, et l'adresse e-mail posée à côté du bouton. On étend leur zone
   sensible sans toucher à leur apparence — même procédé que css/legal.css.

   `pointer: coarse` et non une largeur : c'est le doigt qui pose la
   contrainte, pas la taille de l'écran. */
@media (pointer: coarse) {
  .crumb a,
  .svc-hero__actions .link-underline {
    position: relative;
  }

  .crumb a::after,
  .svc-hero__actions .link-underline::after {
    content: '';
    position: absolute;
    inset: -15px 0;
  }
}