/* ============================================================
   Section "Nos services" v3.4 : index typographique + fiche collante.
   Références relevées sur Awwwards le 1er nov. 2026 : Jords+Co (liste à gauche, carte collante à droite),
   Studio Modular (panneau épinglé qui change au défilement), The First The Last (grande liste typographique).
   Au bureau, la scène reste épinglée pendant 5 paliers de défilement : le service actif s'allume dans l'index,
   un trait de pinceau rouge balaie la fiche, la nouvelle fiche apparaît et son dessin se trace.
   Mobile, écran bas ou mouvement réduit : les 5 fiches s'empilent, sans épinglage.
   ============================================================ */
.svr{padding:calc(var(--sec) - .226 * var(--h2)) var(--marge) 0}   /* l'interlignage du titre ajoute environ 0,226 h2 d'air au-dessus des capitales : écart d'encre = --sec */
/* l'intro se pose sur la ligne de base du titre ; au bureau, elle part du même bord que la fiche noire (mêmes colonnes que la scène) */
.svr__entete{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.ligne-base{display:inline-block;width:0;height:0;vertical-align:baseline}
.svr__titre{margin:0}
.svr__intro{font:400 clamp(20px, 17.52px + .635vw, 26.67px)/1.1 var(--texte);color:var(--noir);max-width:640px}

/* ---------- fiche (commune aux deux modes) ---------- */
.svr__fiche{background:var(--noir);color:var(--creme-clair);border-radius:28px;padding:clamp(24px, 3.2vh, 40px) clamp(24px, 2.6vw, 40px);display:flex;flex-direction:column}
.svr__nom{font:600 clamp(26px, 22.66px + .857vw, 35px)/1.05 var(--titre);font-stretch:80%;letter-spacing:-.01em;color:var(--creme-clair)}
.svr__fiche-haut{display:flex;flex-direction:column;gap:clamp(18px, 2.6vh, 28px);margin-top:clamp(18px, 2.6vh, 28px)}
.svr__desc{max-width:460px;font:400 20px/1.4 var(--texte);color:rgba(253,248,245,.78)}
.svr__dessin{display:block;height:clamp(120px, 24vh, 240px);width:auto;max-width:100%;overflow:visible;cursor:pointer;align-self:flex-start}
.svr__dessin path,.svr__dessin rect{fill:none;stroke:var(--rouge);stroke-linecap:round;stroke-linejoin:round}
.svr__dessin .plein{fill:var(--rouge);stroke:none}
/* le téléphone cache le navigateur qu'il chevauche : il prend la couleur du fond de la fiche */
.svr__dessin .w-tel{fill:var(--noir);fill-opacity:0}

.svr__liste{list-style:none;margin:auto 0 0;padding:clamp(20px, 3vh, 32px) 0 0}
.svr__liste li{position:relative;min-height:clamp(46px, 6.4vh, 60px);border-top:1px solid rgba(253,248,245,.2);padding:clamp(10px, 1.5vh, 16px) 0;display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.svr__liste li::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--rouge);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.6,0,.2,1)}
.svr__liste .n{font:300 clamp(20px, 18.51px + .381vw, 24px)/1.15 var(--titre);font-stretch:100%;letter-spacing:-.01em;transition:transform .45s cubic-bezier(.22,1,.36,1),color .35s,font-weight .45s}
.svr__idx{font:400 14px/18px var(--titre);font-stretch:100%;font-variant-numeric:tabular-nums;color:rgba(253,248,245,.5);transition:color .35s;padding-top:4px}
@media (hover:hover){
  .svr__liste li:hover::before{transform:scaleX(1)}
  .svr__liste li:hover .n{transform:translateX(14px);color:var(--rouge);font-weight:560}
  .svr__liste li:hover .svr__idx{color:var(--rouge)}
}

/* ---------- mode empilé (par défaut) ---------- */
.svr__scene{margin-top:var(--e-4)}
.svr__index{display:none}
.svr__panneau{display:flex;flex-direction:column;gap:16px}
.svr__pinceau{display:none}

/* ---------- mode épinglé ---------- */
@media (min-width:900px) and (min-height:680px) and (prefers-reduced-motion:no-preference){
  /* 5 paliers de 360 px ; la marge négative compense le haut de l'épinglage (place de l'en-tête fixe) : 64 px à l'encre sous l'intro */
  .svr__scene{height:calc(100vh + 1800px);margin-top:calc(var(--e-4) - clamp(92px, 12vh, 112px))}
  :root{--svr-bas: clamp(20px, 3vh, 32px)}   /* air sous la fiche épinglée, déduit de l'écart vers Qui je suis */
  .svr__pin{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:1.12fr 1fr;gap:clamp(32px, 3vw, 56px);padding:clamp(92px, 12vh, 112px) 0 var(--svr-bas)}

  .svr__entete{grid-template-columns:1.12fr 1fr;gap:clamp(32px, 3vw, 56px)}
  .svr__index{display:flex;flex-direction:column;justify-content:center;list-style:none;margin:0;padding:0}
  .svr__onglet{all:unset;box-sizing:border-box;position:relative;display:flex;align-items:baseline;gap:.2em;width:100%;padding:.07em 0;cursor:pointer;
    font:600 clamp(44px, .67px + 4.815vw, 96px)/1 var(--titre);font-stretch:80%;letter-spacing:-.015em;color:rgba(20,19,19,.16);
    transition:color .5s cubic-bezier(.22,1,.36,1)}
  /* la lettre suit la fonte, la taille et la ligne de base du nom du service (A. Identité visuelle) */
  .svr__num{display:inline-block;min-width:.84em;transition:color .4s,transform .7s cubic-bezier(.34,1.56,.64,1)}
  .svr__num .l{display:inline-block}
  .svr__mot{display:inline-block;transition:transform .7s cubic-bezier(.34,1.56,.64,1)}
  .svr__mot .l{display:inline-block;white-space:pre}
  .svr__onglet[aria-current="true"]{color:var(--noir)}
  .svr__onglet[aria-current="true"] .svr__num{color:var(--rouge)}
  .svr__onglet[aria-current="true"] .svr__mot,.svr__onglet[aria-current="true"] .svr__num{transform:translateX(.22em)}
  @media (hover:hover){ .svr__onglet:not([aria-current="true"]):hover{color:rgba(20,19,19,.42)} }
  .svr__onglet:focus-visible{outline:3px solid var(--rouge);outline-offset:4px;border-radius:6px}
  /* rebond des lettres du service qui s'allume (même famille de mouvement que les étapes du processus) */
  .svr__onglet.saut .l{animation:svr-saut .62s cubic-bezier(.3,.7,.4,1) both;animation-delay:calc(var(--j) * 22ms)}
  @keyframes svr-saut{0%{transform:translateY(0)}35%{transform:translateY(-.16em)}62%{transform:translateY(.03em)}100%{transform:translateY(0)}}

  .svr__panneau{position:relative;display:block;min-height:0;border-radius:28px;overflow:hidden}
  .svr__fiche{position:absolute;inset:0;opacity:0;pointer-events:none;overflow:hidden}
  .svr__fiche.actif{opacity:1;pointer-events:auto}
  /* entrée des prestations après le passage du pinceau */
  .svr__fiche .svr__liste li,.svr__fiche .svr__desc,.svr__fiche .svr__nom{transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .5s}
  .svr__fiche.entree .svr__liste li,.svr__fiche.entree .svr__desc,.svr__fiche.entree .svr__nom{transform:translateY(22px);opacity:0;transition:none}
  .svr__fiche .svr__liste li:nth-child(2){transition-delay:.05s}
  .svr__fiche .svr__liste li:nth-child(3){transition-delay:.1s}
  .svr__fiche .svr__liste li:nth-child(4){transition-delay:.15s}
  .svr__pinceau{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;border-radius:28px;overflow:hidden}
  .svr__pinceau path{stroke:var(--rouge);stroke-width:0}
}

/* ---------- écran large sans épinglage (mouvement réduit ou écran bas) : chaque fiche sur 2 colonnes ---------- */
@media (min-width:900px) and (max-height:679px), (min-width:900px) and (prefers-reduced-motion:reduce){
  .svr__fiche{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(32px, 3vw, 56px);align-items:start}
  .svr__nom,.svr__fiche-haut{grid-column:1}
  .svr__liste{grid-column:2;grid-row:1 / span 2;margin:0;padding:0}
}

/* vignette qui suit le pointeur (Rubicom : rangées "mouseView") */
.apercu{position:fixed;left:0;top:0;z-index:30;pointer-events:none;display:none}
@media (hover:hover) and (pointer:fine){ .apercu{display:block} }
.apercu__carte{position:absolute;left:0;top:0;width:320px;margin:-120px 0 0 36px;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:#e7e0d9;box-shadow:0 18px 50px rgba(20,19,19,.22);transform:scale(0);transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.apercu.visible .apercu__carte{transform:scale(1)}
.apercu__carte img{width:100%;height:100%;object-fit:cover}
.apercu__pinceau{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.apercu__carte.vide{background:var(--creme) url("logo-bw.svg") no-repeat center 42%/72px}
.apercu__carte.vide img,.apercu__carte.vide .apercu__pinceau{opacity:0!important}
.apercu__nom{position:absolute;left:12px;bottom:12px;padding:6px 12px;border-radius:100px;background:var(--noir);color:var(--creme-clair);font:500 12px/1 var(--texte);letter-spacing:.02em}

@media (max-width:767px){
  .svr{padding-top:calc(var(--sec) - .1 * var(--h2))}
  .svr__entete{grid-template-columns:1fr;gap:20px}
  .svr__fiche{border-radius:22px;padding:24px 22px 12px}
  .svr__dessin{height:130px}
  .svr__desc{font-size:18px}
  .svr__liste li{min-height:56px;padding:14px 0}
}