/* ==========================================================================
   WebHopper · service.css
   Gabarit COMMUN aux 4 pages services :
     creation-site-web-wallonie, consultant-seo-brabant-wallon,
     gestion-reseaux-sociaux-wallonie, formations-seo-reseaux-sociaux-wallonie
   Depend de tokens.css et base.css. Ne rien y mettre de propre a une seule page.
   ========================================================================== */

/* ---- Ce que je livre : 3 volets ---- */
.deliver{display:grid;gap:1.3rem;margin-top:clamp(2.2rem,4.5vw,3.4rem)}
@media(min-width:760px){.deliver{grid-template-columns:repeat(3,1fr)}}
.dcard{background:var(--blanc);border:1px solid var(--border-clair);border-radius:var(--r-card);
  padding:clamp(1.5rem,2.8vw,2rem);transition:transform .3s var(--ease), box-shadow .3s ease, border-color .3s ease}
.dcard:hover{transform:translateY(-5px);box-shadow:0 22px 44px -26px rgba(26,25,24,.24);border-color:var(--pierre)}
.dcard-icon{width:42px;height:42px;border-radius:var(--r-tag);background:var(--ambre-pale);
  border:1px solid rgba(222,99,0,.35);color:var(--ambre);display:flex;align-items:center;
  justify-content:center;margin-bottom:1.3rem}
.dcard-icon svg{width:21px;height:21px}
.dcard h3{font-family:var(--font-display);font-weight:800;font-size:1.22rem;letter-spacing:-.015em;
  line-height:1.2;color:var(--charbon);margin-bottom:.7rem}
.dcard > p{color:var(--ink);font-size:.98rem;line-height:1.65;margin-bottom:1.2rem}
.dcard ul{display:grid;gap:.7rem;padding-top:1.1rem;border-top:1px solid var(--border-clair)}
.dcard li{display:flex;gap:.65rem;align-items:flex-start;color:var(--charbon);font-size:.94rem;
  line-height:1.5;font-weight:500}
.dcard li svg{width:16px;height:16px;color:var(--ambre);flex-shrink:0;margin-top:3px}

/* ---- Le parcours, etape par etape ----
   Timeline verticale a tous les formats : plus lisible qu'une frise horizontale
   quand chaque etape porte deux ou trois phrases. */
.path{list-style:none;margin:clamp(2.2rem,4.5vw,3.4rem) 0 0;padding:0;max-width:74ch}
.path li{position:relative;display:grid;grid-template-columns:auto 1fr;gap:1.4rem;padding-bottom:2.4rem}
.path li:last-child{padding-bottom:0}
/* le filet qui relie une etape a la suivante */
.path li:not(:last-child)::before{content:"";position:absolute;left:21px;top:46px;bottom:.4rem;
  width:1px;background:var(--border-clair)}
.path .pn{width:44px;height:44px;border-radius:50%;background:var(--blanc);
  border:1.5px solid var(--ambre);color:var(--charbon);display:flex;align-items:center;
  justify-content:center;font-family:var(--font-mono);font-size:12px;font-weight:500;
  flex-shrink:0;position:relative;z-index:1;line-height:1}
.path h3{font-family:var(--font-display);font-weight:800;font-size:clamp(1.14rem,1.9vw,1.4rem);
  letter-spacing:-.015em;line-height:1.2;color:var(--charbon);margin:.65rem 0 .6rem}
.path p{color:var(--ink);font-size:1rem;line-height:1.7;max-width:60ch}
.path .pwhen{display:inline-block;margin-top:.9rem;font-family:var(--font-mono);font-size:10.5px;
  font-weight:500;letter-spacing:1px;text-transform:uppercase;color:var(--charbon);
  background:var(--blanc);border:1px solid rgba(222,99,0,.5);padding:.45rem .7rem;
  border-radius:var(--r-pill);line-height:1}