/* Les détails d'un service dans une fenêtre, à la place du dépliant (Theo, 25/09 : « à la place d'avoir un menu déroulant sur plus de détails, une fenêtre comme ça qui s'ouvrirait,
   type modal », références linear.app et konpo.studio, « des animations d'ouverture minimalistes et très maîtrisées »). Script et textes dans /services-details.js.
   Retenu par Theo le 25/09, les variantes écartées retirées : la fenêtre centrée qui monte du bas comme Konpo (le panneau latéral façon Linear est retiré), réduite à 860 px
   (« réduis un peu la fenêtre ») ; le fond sombre (le clair est retiré) ; les angles droits (« test une version sans radius de la modale », les 4 px sont retirés) ;
   la tête à onglets (l'étiquette au carré, « ça fait un peu généré par Claude », et la tête épurée sont retirées).
   Ouverture et fermeture de konpo.studio (retenues le 25/09 au soir) : la boîte monte d'un bloc en fondu, le voile en fondu ; seule exception, voulue par Theo, à la direction
   d'animation du 16/09 (pas de fondu). Au changement de service, le titre et le chapeau montent ligne par ligne derrière leur masque, le visuel monte dans son cadre. */

.fiche-service { --fs-fond: #14130e; --fs-surface: #1a1913; --fs-encre: #f5f4ee; --fs-muted: rgba(245,244,238,0.62); --fs-trait: rgba(245,244,238,0.14); --fs-voile: rgba(18,17,12,0.55); --fs-pad: 48px; --fs-l: min(860px, calc(100vw - 64px));
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--fs-encre); overflow: hidden; font-family: var(--font); }
.fiche-service::backdrop { background: transparent; } /* le voile est un élément de la fenêtre, pour qu'il se coupe en même temps qu'elle */
html.fs-ouverte { overflow: hidden; } /* la page ne défile plus derrière ; classe posée par le script à l'ouverture */

.fs-voile { position: absolute; inset: 0; background: var(--fs-voile); }
/* La boîte : centrée, à 48 px du haut de l'écran, ouverte sur le bas, angles droits */
.fs-boite { position: absolute; top: 48px; bottom: 0; left: 50%; width: var(--fs-l); margin-left: calc(var(--fs-l) / -2); display: flex; flex-direction: column; background: var(--fs-fond); border: 1px solid #2a2921; border-bottom: 0; overflow: hidden; will-change: transform; contain: layout paint; } /* un calque prêt avant de bouger, une mise en page isolée de la page */

/* La tête : une barre en cellules à filets, comme la nav du site. « Services » dans la première cellule, puis un onglet par service (celui qui est ouvert : le fond
   et le filet de 2 px sous le libellé de la section courante de la nav ; un clic change de service), la croix dans une cellule carrée collée au bord droit. */
.fs-tete { flex: none; display: flex; align-items: stretch; height: 56px; border-bottom: 1px solid var(--fs-trait); }
.fs-etiquette { display: inline-flex; align-items: center; padding: 0 20px 0 var(--fs-pad); border-right: 1px solid var(--fs-trait); font-size: 14px; letter-spacing: 0.02em; color: var(--fs-muted); }
.fs-onglets { display: flex; flex: 1; min-width: 0; }
.fs-onglets button { position: relative; display: inline-flex; align-items: center; padding: 0 20px; border: 0; border-right: 1px solid var(--fs-trait); background: transparent; color: var(--fs-muted); font: inherit; font-size: 15px; white-space: nowrap; cursor: pointer; transition: background var(--m-vite), color var(--m-vite); }
.fs-onglets button:hover, .fs-onglets button[aria-current] { background: var(--fs-surface); color: var(--fs-encre); }
.fs-onglets button::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: -1px; height: 2px; background: var(--fs-encre); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease; }
.fs-onglets button[aria-current]::after { transform: scaleX(1); }
.fs-fermer { position: relative; flex: none; width: 56px; margin-left: auto; padding: 0; border: 0; border-left: 1px solid var(--fs-trait); background: transparent; color: var(--fs-encre); cursor: pointer; transition: background var(--m-vite); }
.fs-fermer:hover { background: var(--fs-surface); }
.fs-fermer::before, .fs-fermer::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.6px; margin: -0.8px 0 0 -7px; border-radius: 1px; background: currentColor; transform: rotate(45deg); } /* la croix du « + » des services, tournée d'un huitième */
.fs-fermer::after { transform: rotate(-45deg); }
.fs-fermer:focus-visible, .fs-suivant:focus-visible, .fs-projet:focus-visible, .fs-onglets button:focus-visible { outline: 2px solid var(--fs-encre); outline-offset: -2px; }

.fs-defil { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.fs-contenu { padding: 48px var(--fs-pad) 0; }
/* Le titre en encre, le chapeau en gris à la taille d'un sous-titre */
.fs-contenu h2 { margin: 0; font-size: clamp(40px, 3.8vw, 56px); font-weight: 400; line-height: 1.08; letter-spacing: -0.01em; outline: 0; }
.fs-chapo { max-width: 40ch; margin: 16px 0 0; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.36; color: var(--fs-muted); } /* un cran plus petit le 25/09 (Theo : « texte paragraphe un peu gros ») : 21,6 px à 1440 au lieu de 28 */

/* Le visuel du service dans une cellule dont les filets courent jusqu'aux bords de la boîte, comme la grille du site */
.fs-visuel { margin: 48px calc(-1 * var(--fs-pad)) 0; padding: 0 var(--fs-pad); border-top: 1px solid var(--fs-trait); border-bottom: 1px solid var(--fs-trait); }
.fs-visuel .cadre { position: relative; aspect-ratio: 2 / 1; overflow: hidden; border-left: 1px solid var(--fs-trait); border-right: 1px solid var(--fs-trait); background: var(--fs-surface); }
.fs-visuel .cadre > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* la capture, si le visuel de process manque : les images du visuel (icônes, avatars) gardent leur taille */

/* Les blocs : ce qu'on livre, repères, le projet. Chacun en deux colonnes, le nom à gauche ; des lignes à filets, le nom à gauche, le détail à droite. */
.fs-bloc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--fs-trait); }
.fs-bloc h3 { margin: 0; font-size: 28px; font-weight: 400; line-height: 1.15; }
.fs-table { margin: 0; }
.fs-table > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 24px; padding: 14px 0; border-top: 1px solid var(--fs-trait); }
.fs-table > div:first-child { border-top: 0; padding-top: 4px; }
.fs-table dt { font-size: 16px; font-weight: 450; line-height: 1.4; }
.fs-table dd { margin: 0; font-size: 15px; line-height: 1.45; color: var(--fs-muted); }
.fs-table.fs-reperes dt { font-weight: 400; color: var(--fs-muted); }
.fs-table.fs-reperes dd { color: var(--fs-encre); }

/* Le projet : une cellule à filet, la vignette à gauche, le client et la question à droite, la flèche ↗ des boutons */
.fs-projet { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 20px; align-items: start; padding: 16px; border: 1px solid var(--fs-trait); color: inherit; text-decoration: none; transition: background var(--m-vite); }
.fs-projet:hover { background: var(--fs-surface); }
.fs-projet .vignette { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--fs-surface); }
.fs-projet .vignette img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fs-projet .meta { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--fs-muted); }
.fs-projet .meta b { font-weight: 450; color: var(--fs-encre); }
.fs-projet .q { display: block; margin-top: 8px; font-size: 17px; line-height: 1.35; }
.fs-projet .voir { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 14px; font-weight: 450; }
.fs-projet .voir i { width: 14px; height: 14px; background: currentColor; transition: transform var(--m-vite) var(--m-sortie);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12.5L12.5 3.5M5.5 3.5h7v7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12.5L12.5 3.5M5.5 3.5h7v7'/%3E%3C/svg%3E") center / contain no-repeat; }
.fs-projet:hover .voir i { transform: translate(2px, -2px); }

/* Le pied : l'appel, et le service suivant dans sa cellule */
.fs-pied { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 48px; padding: 24px 0 40px; border-top: 1px solid var(--fs-trait); }
.fs-suivant { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border: 1px solid var(--fs-trait); background: transparent; color: var(--fs-encre); font: inherit; font-size: 15px; cursor: pointer; transition: background var(--m-vite); }
.fs-suivant:hover { background: var(--fs-surface); }
.fs-suivant span { color: var(--fs-muted); }
.fs-suivant i { font-style: normal; transition: transform var(--m-vite) var(--m-sortie); }
.fs-suivant:hover i { transform: translateX(3px); }

/* ---- Ouverture et fermeture : celles de konpo.studio, retenues par Theo le 25/09 au soir (« on garde Konpo, retire les autres variantes »). Relevées sur leur site :
   leur fenêtre (.client-news) passe de translateY(10rem) et opacité 0 à sa place en transition CSS de 0,4 s sur la courbe ease, le voile vient en fondu dans le même
   temps, la fermeture est la même chose à l'envers ; leur 10rem suit la largeur (83 px à 1 440 px, 111 à 1 920, 104 sur un téléphone de 390) ; le titre et le visuel
   arrivent avec la fenêtre, sans monter à part. C'est un fondu : exception voulue par Theo à la direction d'animation du 16/09, pour cette fenêtre seulement.
   La boîte garde notre forme (angles droits, voile sombre). Écartées le même jour et sorties du code, avec le panneau Cmd+G et les clés detailsmontee= et detailssortie= :
   la montée d'un écran entier (640 ms, courbe souple) et sa descente (440 ms, « le out est trop violent »), la montée courte de 120 px sans fondu (760 ms),
   les fermetures miroir, recul et glissé. ---- */
.fiche-service { --fs-course: max(83px, 5.8vw); }
@keyframes fs-entrer { from { transform: translateY(var(--fs-course)); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fs-sortir { from { transform: none; opacity: 1; } to { transform: translateY(var(--fs-course)); opacity: 0; } }
@keyframes fs-voile-entrer { from { opacity: 0; } to { opacity: 1; } }
@keyframes fs-voile-sortir { from { opacity: 1; } to { opacity: 0; } }
.fiche-service[data-etat="ouvre"] .fs-boite { animation: fs-entrer 400ms ease both; }
.fiche-service[data-etat="ouvre"] .fs-voile { animation: fs-voile-entrer 400ms ease both; }
.fiche-service[data-etat="ferme"] .fs-boite { animation: fs-sortir 400ms ease both; }
.fiche-service[data-etat="ferme"] .fs-voile { animation: fs-voile-sortir 400ms ease both; }
/* Au changement de service (onglet ou « Suivant »), le titre et le chapeau montent ligne par ligne derrière leur masque (découpés par Motion.lignes, numérotés d'un seul fil),
   le visuel monte dans son cadre. */
.fiche-service[data-etat="change"] .fs-contenu header i.m-ligne i.m-int { animation: m-monter 520ms var(--m-sortie) both; animation-delay: calc(var(--i) * var(--m-cadence)); }
.fiche-service[data-etat="change"] .fs-visuel .cadre > :is(img, .sp-scene) { --m-de: 100%; animation: m-monter var(--m-lent) var(--m-sortie) both; animation-delay: 180ms; }
@media (prefers-reduced-motion: reduce) {
  .fiche-service .fs-voile, .fiche-service .fs-boite, .fiche-service .fs-contenu header i.m-int, .fiche-service .fs-visuel .cadre > :is(img, .sp-scene) { animation: none !important; }
}

/* ---- Téléphone : la boîte inscrite dans l'écran, à 12 px des bords et du haut, le voile visible autour (Theo, 25/09, référence konpo.studio : « sa taille dans le screen avec l'overlay derrière ») ;
   les trois onglets et la croix prennent toute la barre, les blocs passent sur une colonne ---- */
@media (max-width: 700px) {
  .fiche-service { --fs-pad: 20px; --fs-course: 104px; } /* la course de Konpo sur un téléphone de 390 px */
  .fs-boite { top: 12px; left: 12px; right: 12px; width: auto; margin-left: 0; border-width: 1px 1px 0; }
  .fs-etiquette { display: none; }
  /* les onglets et la croix suivent la largeur de l'écran : une ligne de 320 à 700 px, sans que « Développement » passe sous la croix */
  .fs-onglets button { padding: 0 clamp(7px, 2.6vw, 14px); font-size: clamp(11px, 3.6vw, 14px); }
  .fs-onglets button::after { left: clamp(7px, 2.6vw, 14px); right: clamp(7px, 2.6vw, 14px); }
  .fs-fermer { width: clamp(44px, 13vw, 52px); }
  .fs-contenu { padding-top: 32px; }
  .fs-chapo { font-size: 18px; }
  .fs-visuel { margin-top: 32px; }
  .fs-visuel .cadre { aspect-ratio: 4 / 3; }
  .fs-bloc { grid-template-columns: 1fr; gap: 16px; margin-top: 40px; padding-top: 24px; }
  .fs-bloc h3 { font-size: 26px; }
  .fs-table > div { grid-template-columns: 1fr; gap: 4px; }
  .fs-projet { grid-template-columns: 1fr; gap: 14px; }
  .fs-pied { flex-direction: column-reverse; align-items: stretch; }
  .fs-pied .b, .fs-suivant { justify-content: center; }
}