/* =========================================================
   DESIGNER BY NATURE — 09. SERVICES
   Surface ivoire. En-tête centré, cinq prestations en colonnes
   égales, pictogrammes au trait, action en pied de section.

   PARTI PRIS
   La section est la plus dépouillée du site : pas de photographie,
   pas de fond, pas de cadre. Rien que du trait, du texte et du
   blanc. C'est la respiration entre deux sections sombres — elle
   ne doit surtout pas chercher à impressionner.
   ========================================================= */

.services__entete {
  text-align: center;
  margin-bottom: var(--sp-bloc);
}

/* Le sous-titre suit le titre de près : la même respiration que dans
   Projets, d'où vient la forme. */
.services__entete .label { margin-top: var(--sp-4); }

/* Le filet doré se trace depuis le centre : l'origine est posée ici et
   non dans la timeline, pour que le repli sans JavaScript garde le même
   point d'ancrage. */
.services__entete .filet { transform-origin: center; }

/* Masques de mots créés par `decouperMots`. */
.services__entete .mot {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-block: .16em;
  margin-block: -.16em;
}

.services__entete .mot__i {
  display: inline-block;
}

/* ---------- LISTE ---------- */

.services__liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-8) var(--gouttiere);
}

.service {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-4);
  padding: 0 var(--sp-2) var(--sp-5);
}

/* ---------- PICTOGRAMME ---------- */

.service__icone {
  width: 2.75rem;
  height: 2.75rem;
  color: var(--accent-deco);

  /* Le déplacement au survol est de quatre pixels. Assez pour que l'œil
     enregistre une réponse, trop peu pour lire comme un mouvement. */
  transition:
    transform var(--dur-moyen) var(--ease-sortie),
    color var(--dur-court) var(--ease-net);
}

.service__icone svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.service__icone [data-trait] {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.service:hover .service__icone {
  transform: translateY(-4px);
  color: var(--accent);
}

/* ---------- TEXTE ---------- */

/* UNE LARGEUR MESURÉE SUR LE MOT LE PLUS LONG, PAS EN `ch`
   La borne valait 14ch, soit « environ quatorze caractères ». L'unité
   `ch` se mesure sur le zéro en bas de casse et ignore deux choses que
   ce titre applique : les capitales et un interlettrage de .22em. Elle
   rendait 102 px là où « ACCOMPAGNEMENT » en réclame 150 — un mot d'un
   seul tenant, que rien ne peut replier : il sortait de sa cellule.

   La borne est donc posée en em, tracking compris, sur le plus long des
   cinq titres. Elle reste inférieure à la cellule des grands écrans, ce
   qui préserve l'intention d'origine : « ARCHITECTURE INTÉRIEURE » se
   compose bien sur deux lignes. */
.service__titre {
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: 1.5;
  max-width: 13em;
  transition: transform var(--dur-moyen) var(--ease-sortie);
}

.service:hover .service__titre { transform: translateY(-2px); }

/* Le corps de texte n'est pas une légende : il se lit. Il était au
   plus petit palier de l'échelle — dix pixels — ce qui convient à une
   date ou à un compteur, pas à une phrase. */
.service__texte {
  font-size: var(--fs-small);
  letter-spacing: .01em;
  text-transform: none;
  line-height: 1.75;
  color: var(--muted);
  max-width: 22ch;
}

/* ---------- FILET DORÉ ---------- */
/* Un trait court sous chaque prestation, tracé du centre vers les deux
   bords au survol. Il remplace le cadre que la maquette n'a pas : la
   carte n'existe pas, seule la réponse au geste la matérialise. */

.service__filet {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 3rem;
  height: var(--trait);
  margin-left: -1.5rem;
  background-color: var(--accent-deco);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-moyen) var(--ease-sortie);
}

.service:hover .service__filet,
.service:focus-within .service__filet { transform: scaleX(1); }

/* ---------- ACTION ---------- */

.services__actions {
  margin-top: var(--sp-bloc);
  display: flex;
  justify-content: center;
}

/* ---------- RESPONSIVE ---------- */

@media (min-width: 48rem) {
  .services__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .services__liste {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--gouttiere);
  }

  /* Séparateurs verticaux, uniquement là où les cinq colonnes se
     touchent. Ils s'arrêtent avant le haut et le bas : un trait pleine
     hauteur transformerait la section en tableau. */
  .service + .service::before {
    content: "";
    position: absolute;
    left: calc(var(--gouttiere) / -2);
    top: 12%;
    height: 68%;
    width: var(--trait);
    background-color: var(--rule);
  }
}