/* ==========================================================================
   Services
   --------------------------------------------------------------------------
   Feuille propre à cette page, chargée seulement sur elle. Elle n'utilise
   que les jetons déjà définis par theme.css — couleurs, échelle
   typographique, courbes — et ne redéfinit aucune classe de l'accueil ni de
   « Pourquoi nous ? ». Les trois pages restent indépendantes : retoucher
   l'une ne peut pas abîmer les autres.

   PARENTÉ ET DISTINCTION. Le vocabulaire est celui du thème : filets d'un
   pixel qui se tracent, pastille cerise, étiquettes en capitales, grands
   titres Newsreader. Mais la composition diffère volontairement de
   « Pourquoi nous ? » : là-bas un rail vertical continu relie les
   chapitres ; ici les chapitres sont séparés par des filets HORIZONTAUX, et
   leur numéro change de côté d'un chapitre à l'autre.

   AUCUNE POLICE, AUCUNE COULEUR, AUCUNE TAILLE NOUVELLE.
   ========================================================================== */

.sv{
  position:relative;
  padding-block:var(--sv-pad);
  background:var(--white);
}

:root{
  --sv-pad:       clamp(88px, 11vw, 176px);
  --sv-pad-ample: clamp(112px, 14vw, 232px);
  --sv-mesure:    62ch;
}

/* Un filet très fin sépare les blocs sans les enfermer. */
.sv + .sv::before{
  content:"";
  position:absolute; left:var(--gutter); right:var(--gutter); top:0;
  height:1px; background:var(--line-soft);
}

/* --------------------------------------------------------------------------
   Éléments communs
   -------------------------------------------------------------------------- */

/* Le filet qui se trace. Un seul composant pour toute la page : séparation
   de chapitre, aparté du hero, segment de méthode, rangée de format. Le
   tracé vit sur un pseudo-élément, jamais sur l'élément observé — un
   élément mis à l'échelle zéro n'intersecte jamais, et sa révélation ne
   partirait pas. */
.sv__filet{
  position:relative;
  display:block;
  height:1px;
}
.sv__filet::before{
  content:"";
  position:absolute; inset:0;
  background:var(--line);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 1.1s var(--ease) var(--d, 0s);
}
.sv__filet.is-in::before{ transform:scaleX(1); }

/* L'UNIQUE retrait entre une tete de section et son contenu. Les listes qui
   suivent ne declarent aucune marge haute : sinon le repli de marges laisse
   gagner la plus grande des deux, et l'ecart prend une valeur differente
   dans chaque section — c'etait le cas, 72 / 86 / 86 / 79 px a 1440. */
.sv__tete{ margin-bottom:clamp(38px, 5vw, 72px); }

/* La mesure est posee SUR LE TITRE, jamais sur son conteneur : « ch » se
   resout contre la police de l'element qui le porte. Sur un <header> — qui
   herite du corps, 16px en Jost — la meme valeur vaudrait le tiers, et le
   titre se composerait sur huit lignes a toutes les largeurs. */
.sv__titre{
  max-width:26ch;
  font-family:var(--f-display);
  font-weight:300;
  font-size:var(--nf-titre);
  line-height:1.1;
  letter-spacing:-.015em;
  color:var(--ink);
  margin:18px 0 0;
}

.sv__titre--geant{
  font-size:var(--nf-titre-fort);
  line-height:1.02;
  letter-spacing:-.022em;
  max-width:20ch;
  margin-top:26px;
}

.sv__texte{
  max-width:var(--sv-mesure);
  font-size:var(--nf-corps);
  line-height:1.78;
  color:var(--ink-2);
  margin:clamp(24px, 2.8vw, 36px) 0 0;
}

/* Étiquette interne, plus discrète que le sur-titre de section : elle
   annonce une liste, elle n'ouvre pas un bloc. */
.sv__mini{
  margin:clamp(34px, 4vw, 54px) 0 0;
  font-size:var(--nf-etiquette);
  font-weight:400;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-3);
}

/* Lien discret. Même famille que .btn--ghost, mais posé dans le fil du
   texte plutôt qu'en bouton : il accompagne une lecture, il ne conclut
   pas une page. */
.sv__lien{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-top:clamp(28px, 3vw, 42px);
  padding-bottom:7px;
  font-size:var(--nf-meta);
  font-weight:400;
  letter-spacing:.06em;
  color:var(--ink);
  transition:color .4s var(--ease-soft);
}
.sv__lien::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:1px;
  background:var(--rule);
  transition:background .4s var(--ease-soft);
}
.sv__lien-fleche{
  width:24px; height:10px;
  transition:transform .45s var(--ease);
}

@media (hover:hover) and (pointer:fine){
  .sv__lien:hover{ color:var(--cherry); }
  .sv__lien:hover::after{ background:var(--cherry); }
  .sv__lien:hover .sv__lien-fleche{ transform:translateX(6px); }
}

/* Emblème décoratif : même géométrie que sur l'accueil, et surtout AUCUN
   rognage sur la section — le motif doit pouvoir déborder. Le débordement
   horizontal est absorbé par le clip appliqué au body dans theme.css. */
.sv__emblem{
  position:absolute;
  height:auto;
  opacity:0;
  pointer-events:none;
  z-index:0;
  transition:opacity 1.5s var(--ease-soft) var(--d, 0s);
  will-change:transform, opacity;
}

/* --------------------------------------------------------------------------
   01. Ouverture
   --------------------------------------------------------------------------
   L'en-tête est en position fixe et aucune règle générale ne compense sa
   hauteur : la première section s'en charge elle-même.

   Composition asymétrique : le titre prend la largeur, le texte et
   l'invitation se rangent dans une colonne étroite, alignée sur le BAS du
   titre. Aucun second appel à l'action — l'en-tête en porte déjà un, et le
   premier écran ne doit demander qu'une chose : descendre.
   -------------------------------------------------------------------------- */
.sv--ouverture{
  z-index:1;
  padding-top:calc(var(--header-h) + clamp(30px, 5.5vh, 74px));
  padding-bottom:var(--sv-pad-ample);
}

.sv__emblem--ouverture{
  top:6%;
  right:-16%;
  width:clamp(500px, 52vw, 900px);
  transform:rotate(-6deg);
}
.sv__emblem--ouverture.is-in{ opacity:.05; }

.sv__ouverture{ position:relative; z-index:1; }

@media (min-width:1080px){
  .sv__ouverture{
    display:grid;
    grid-template-columns:minmax(0,1fr) clamp(290px, 25vw, 390px);
    gap:clamp(48px, 6vw, 108px);
    align-items:end;
  }
  .sv__ouverture-aparte{ padding-bottom:.6em; }
}

.sv__ouverture-aparte .sv__filet{ margin-bottom:clamp(22px, 2.4vw, 32px); }
.sv__ouverture-aparte .sv__texte{ margin-top:0; }

.sv__invite{
  display:inline-flex;
  align-items:center;
  gap:14px;
  margin-top:clamp(28px, 3.2vw, 44px);
  font-size:var(--nf-etiquette);
  font-weight:400;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-3);
  transition:color .4s var(--ease-soft);
}
.sv__invite-fleche{
  width:10px; height:24px;
  transition:transform .5s var(--ease);
}

@media (hover:hover) and (pointer:fine){
  .sv__invite:hover{ color:var(--cherry); }
  .sv__invite:hover .sv__invite-fleche{ transform:translateY(5px); }
}

/* --------------------------------------------------------------------------
   02. Situations
   --------------------------------------------------------------------------
   Des repères de reconnaissance, lus d'un coup d'œil. Ils sont en Jost,
   comme toute liste du thème, mais un cran plus affirmés que le texte
   courant : encre pleine et graisse 400 contre encre-2 et graisse 300.

   Le filet cerise du survol reprend exactement le vocabulaire des mots-clés
   de « Pourquoi nous ? ». Il CONFIRME la lecture, il ne la porte pas : la
   distinction tient déjà sans lui, et la règle est réservée aux pointeurs
   fins pour qu'aucun survol ne reste collé sur un écran tactile.
   -------------------------------------------------------------------------- */
.sv__besoins{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:clamp(13px, 1.6vw, 22px) clamp(40px, 6vw, 112px);
}

@media (min-width:820px){
  .sv__besoins{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

.sv__besoins li{
  position:relative;
  padding-left:34px;
}

/* Un tiret d'un pixel donne le rythme de la colonne sans faire une puce. */
.sv__besoins li::before{
  content:"";
  position:absolute;
  left:0; top:.85em;
  width:18px; height:1px;
  /* --line porte les grands filets, ou la longueur fait la presence. Sur
     18 px il ne se verrait pas : c'est --ink-4 que la page soeur emploie
     pour cette marque-la, assez presente pour scander, trop faible pour
     concurrencer l'encre pleine des situations. */
  background:var(--ink-4);
}

.sv__besoin{
  position:relative;
  display:inline-block;
  font-size:var(--nf-enonce);
  font-weight:400;
  line-height:1.45;
  color:var(--ink);
}

.sv__besoin::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-3px;
  height:1px;
  background:var(--cherry);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .32s var(--ease);
}

@media (hover:hover) and (pointer:fine){
  .sv__besoin:hover::after{ transform:scaleX(1); transform-origin:left; }
}

/* --------------------------------------------------------------------------
   03. Domaines d'intervention
   --------------------------------------------------------------------------
   Quatre CHAPITRES. Chacun occupe toute la largeur, s'ouvre sur un filet
   qui se trace, et porte son numéro dans une colonne qui reste à l'écran
   pendant qu'on le lit. Cette colonne change de côté un chapitre sur deux :
   c'est l'alternance, et elle suffit — le contenu, lui, ne bouge pas de
   structure d'un chapitre à l'autre.
   -------------------------------------------------------------------------- */
/* Le titre pose le principe ; ceci l'EXPLIQUE. La grammaire du theme le dit
   donc en Jost, comme tout texte courant : deux enonces Newsreader coup sur
   coup se disputeraient l'attention, et c'est le titre qui doit la garder. */
.sv__chapeau{
  max-width:58ch;
  margin:clamp(26px, 3vw, 40px) 0 0;
  font-size:var(--nf-corps);
  line-height:1.78;
  color:var(--ink-2);
}

.sv__chapitres{
  list-style:none;
  margin:0;
  padding:0;
}

.sv__chapitre{
  position:relative;
  padding-top:clamp(44px, 5.4vw, 88px);
  padding-bottom:clamp(52px, 6.6vw, 116px);
}
.sv__chapitre:last-child{ padding-bottom:0; }

.sv__filet--chapitre{
  position:absolute;
  left:0; right:0; top:0;
}

/* Le repère : pastille cerise et grand numéro. Purement visuel — la liste
   est ordonnée, l'ordre est déjà porté par le balisage. */
.sv__repere{
  display:flex;
  align-items:baseline;
  gap:16px;
  margin-bottom:clamp(20px, 2.4vw, 30px);
}

.sv__point{
  flex:none;
  width:7px; height:7px;
  border-radius:50%;
  background:var(--cherry);
  transform:scale(.85);
  transition:opacity .9s var(--ease) var(--d, 0s), transform .9s var(--ease) var(--d, 0s);
}
.sv__point.is-in{ transform:scale(1); }

/* Deux rangs, decides par la COMPOSITION et non par l'appareil.

   Empile — le cas de base — le repere se pose juste au-dessus du titre : il
   passe au rang du titre, ou son encre-4 suffit a le tenir en second plan.
   En colonnes, il vit a l'ecart et reprend son grand rang (plus bas, dans le
   media qui ouvre la grille). Le seuil n'est donc ecrit qu'une fois, la ou
   la mise en page bascule reellement. */
.sv__num{
  font-family:var(--f-display);
  font-weight:300;
  font-size:var(--nf-emphase);
  line-height:1;
  letter-spacing:-.02em;
  color:var(--ink-4);
  font-variant-numeric:tabular-nums;
}

@media (min-width:1000px){
  .sv__chapitre{
    display:grid;
    grid-template-columns:clamp(150px, 15vw, 240px) minmax(0,1fr);
    gap:clamp(40px, 5vw, 96px);
  }

  /* Le numéro accompagne la lecture du chapitre. Sticky suppose qu'aucun
     ancêtre ne porte overflow:hidden — c'est la règle du thème, et cette
     page ne rogne aucune section. */
  .sv__repere{
    position:sticky;
    top:calc(var(--header-h) + clamp(28px, 4vw, 60px));
    align-self:start;
    display:block;
    margin-bottom:0;
  }
  /* Un <span> redevenu inline ignore width, height et border-radius : la
     pastille mesurait 0 x 0 px des que la colonne passait en bloc. */
  .sv__point{ display:block; }
  /* Le repere a desormais sa propre colonne, a l'ecart du titre : le grand
     chiffre y est un jalon de lecture, plus un concurrent. */
  .sv__num{ display:block; margin-top:20px; font-size:var(--nf-titre); }

  /* L'alternance : un chapitre sur deux pose son repère à droite. */
  .sv__chapitre:nth-child(even){
    grid-template-columns:minmax(0,1fr) clamp(150px, 15vw, 240px);
  }
  .sv__chapitre:nth-child(even) .sv__repere{
    grid-column:2; grid-row:1;
    text-align:right;
  }
  .sv__chapitre:nth-child(even) .sv__point{ margin-left:auto; }
  .sv__chapitre:nth-child(even) .sv__chapitre-corps{ grid-column:1; grid-row:1; }
}

/* Un cran SOUS le titre de section. Au meme jeton que lui, le h3 et le h2
   etaient identiques — meme famille, meme graisse, meme taille, meme encre —
   et sur les chapitres pairs le titre de chapitre venait se caler sur le bord
   gauche exact du titre de section. Le rang se lisait donc nulle part.
   C'est le jeton que .sv__niveau-nom emploie deja sur cette page : le meme
   ecart qu'entre une section et son sous-niveau dans « Formats ». */
.sv__chapitre-titre{
  margin:0;
  font-family:var(--f-display);
  font-weight:300;
  font-size:var(--nf-emphase);
  line-height:1.18;
  letter-spacing:-.01em;
  color:var(--ink);
}

.sv__chapitre-phrase{
  max-width:44ch;
  margin:clamp(18px, 2vw, 28px) 0 0;
  font-family:var(--f-display);
  font-weight:300;
  font-size:var(--nf-enonce);
  line-height:1.5;
  color:var(--ink-2);
}

.sv__liste{
  list-style:none;
  margin:18px 0 0;
  padding:0;
  font-size:var(--nf-corps);
  line-height:1.95;
  color:var(--ink-2);
}
.sv__liste li{ break-inside:avoid; }

@media (min-width:640px){
  .sv__liste{
    columns:2;
    column-gap:clamp(32px, 4vw, 76px);
  }
}

/* Précision en marge : un filet cerise d'un pixel la distingue du corps
   sans en faire un encadré. */
.sv__note{
  max-width:48ch;
  margin:clamp(26px, 2.8vw, 38px) 0 0;
  padding-left:20px;
  border-left:1px solid var(--cherry);
  font-size:var(--nf-meta);
  line-height:1.72;
  color:var(--ink-3);
}

.sv__pour{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px 18px;
  margin:clamp(30px, 3.4vw, 46px) 0 0;
}
.sv__pour-label{
  font-size:var(--nf-etiquette);
  font-weight:400;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.sv__pour-liste{
  font-size:var(--nf-corps);
  font-weight:400;
  line-height:1.7;
  color:var(--ink);
}
/* Le séparateur est posé par la feuille, jamais saisi : il ne peut donc
   pas se retrouver dans le texte d'un public.

   Il est porté par l'élément QUI PRÉCÈDE, pas par celui qui suit : sans
   cela, une ligne repliée — six profils sur un écran étroit — commencerait
   par un point médian orphelin. Ici le point reste collé au mot d'avant,
   et le repli se fait dans l'espace qui le suit. */
.sv__public:not(:last-child)::after{
  content:"·";
  margin:0 .62em;
  color:var(--ink-4);
}

/* --------------------------------------------------------------------------
   04. Comment nous intervenons
   --------------------------------------------------------------------------
   « 01 —— 02 —— 03 —— 04 ». Chaque temps porte SON segment de filet, qui
   court de son numéro au bord de sa colonne : les quatre se dessinent l'un
   après l'autre et la ligne traverse la section.

   Rien n'est positionné en absolu. La même structure devient verticale sur
   mobile sans qu'aucune mesure ne soit à refaire.
   -------------------------------------------------------------------------- */
.sv__temps{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:clamp(34px, 4vw, 58px);
}

@media (min-width:900px){
  .sv__temps{
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:clamp(26px, 3vw, 52px);
  }
}

.sv__temps-tete{
  display:flex;
  align-items:center;
  gap:16px;
}

.sv__temps-num{
  flex:none;
  font-size:var(--nf-meta);
  font-weight:400;
  letter-spacing:.14em;
  color:var(--cherry);
  font-variant-numeric:tabular-nums;
}

.sv__filet--temps{ flex:1 1 auto; }

.sv__temps-titre{
  margin:clamp(20px, 2.2vw, 32px) 0 0;
  font-size:var(--nf-corps);
  font-weight:400;
  line-height:1.3;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink);
}

.sv__temps-texte{
  max-width:34ch;
  margin:14px 0 0;
  font-size:var(--nf-meta);
  line-height:1.72;
  color:var(--ink-2);
}

/* --------------------------------------------------------------------------
   05. Formats d'intervention
   --------------------------------------------------------------------------
   Quatre rangées : le nom à gauche, ce qu'il recouvre à droite. La
   composition dit la profondeur sans afficher un seul montant — ils vivent
   sur la page Tarifs, et un seul endroit doit les dire.
   -------------------------------------------------------------------------- */
.sv__niveaux{
  list-style:none;
  margin:0;
  padding:0;
}

.sv__niveau{
  display:grid;
  gap:14px;
  padding-bottom:clamp(30px, 3.6vw, 52px);
}
.sv__niveau .sv__filet{ margin-bottom:clamp(24px, 2.8vw, 38px); }

@media (min-width:820px){
  .sv__niveau{
    grid-template-columns:clamp(230px, 25vw, 360px) minmax(0,1fr);
    gap:0 clamp(32px, 4vw, 84px);
    align-items:start;
  }
  .sv__niveau .sv__filet{ grid-column:1 / -1; }

  /* La mesure du bloc titre, a l'interieur de la colonne existante. Sans
     elle, « Accompagnement dans la duree » se coupait sur « duree » seule.
     Bornee ici, la coupure tombe apres « Accompagnement » et les deux
     lignes s'equilibrent. Les trois autres intitules tiennent largement en
     dessous de cette mesure : leur rendu est inchange.

     La colonne, elle, ne bouge pas — l'elargir de 71 px pour tenir sur une
     ligne aurait deplace toute la seconde colonne. Et la mesure vit dans le
     media qui ouvre la grille : en une colonne, l'intitule tient deja sur
     une ligne et n'est pas borne. */
  .sv__niveau-nom{ max-width:17ch; }
}

/* L'equilibrage des lignes, la ou le navigateur sait le faire : il choisit
   lui-meme la justification qui repartit le mieux les deux lignes, et donne
   « Accompagnement / dans la duree » plutot que « Accompagnement dans / la
   duree ». Sur un titre d'une seule ligne — les trois autres — la propriete
   n'a aucun effet : leur rendu est identique au pixel.

   La mesure ci-dessus reste : la ou l'equilibrage n'existe pas, elle suffit
   deja a ce que « duree » ne se retrouve pas seule. Aucun navigateur ne
   revient donc au defaut d'origine. */
.sv__niveau-nom{ text-wrap:balance; }

.sv__niveau-nom{
  margin:0;
  font-family:var(--f-display);
  font-weight:400;
  font-size:var(--nf-emphase);
  line-height:1.2;
  letter-spacing:-.008em;
  color:var(--ink);
}

.sv__niveau-texte{
  max-width:52ch;
  margin:0;
  font-size:var(--nf-corps);
  line-height:1.78;
  color:var(--ink-2);
}

.sv__lien--tarifs{ margin-top:clamp(30px, 3.6vw, 50px); }

/* --------------------------------------------------------------------------
   06. Appel à l'action
   --------------------------------------------------------------------------
   Le point final. Le bouton vient du réglage global : ni son libellé, ni
   sa destination, ni son comportement ne sont redéfinis ici.
   -------------------------------------------------------------------------- */
.sv--appel{
  padding-block:var(--sv-pad-ample);
  text-align:center;
}

.sv__emblem--appel{
  top:50%;
  left:50%;
  width:clamp(400px, 44vw, 760px);
  transform:translate(-50%, -50%) rotate(5deg);
}
.sv__emblem--appel.is-in{ opacity:.042; }

.sv__appel{
  position:relative;
  z-index:1;
}

.sv__titre--appel{
  max-width:21ch;
  margin-inline:auto;
  font-size:var(--nf-declaration);
  line-height:1.12;
}

.sv__texte--appel{
  max-width:56ch;
  margin-inline:auto;
}

.sv__appel-action{ margin-top:clamp(34px, 4vw, 56px); }

/* --------------------------------------------------------------------------
   Mobile
   --------------------------------------------------------------------------
   Une colonne, des titres confortables, aucune typographie minuscule : les
   tailles viennent toutes de l'échelle du thème, qui a déjà son plancher.
   -------------------------------------------------------------------------- */
@media (max-width:640px){
  .sv__titre--geant{ max-width:none; }

  /* Au doigt, un lien de texte doit rester une cible : les commandes du
     theme font 44 px sur cette meme page. */
  .sv__invite,
  .sv__lien{ padding-block:16px 7px; }

  .sv__besoins li{ padding-left:28px; }
  .sv__besoins li::before{ width:14px; }
  .sv__note{ padding-left:16px; }
}

/* --------------------------------------------------------------------------
   Ancres
   --------------------------------------------------------------------------
   L'en-tête est fixe et le thème ne compense aucune ancre : sans cette
   règle, l'invitation du hero ferait passer les domaines sous l'en-tête.
   Portée limitée aux sections de cette page.
   -------------------------------------------------------------------------- */
.sv[id]{ scroll-margin-top:calc(var(--header-h) + 24px); }

/* --------------------------------------------------------------------------
   Mouvement réduit
   --------------------------------------------------------------------------
   Le thème neutralise déjà les durées et remet [data-reveal] à plat. Deux
   cas lui échappent et se déclarent donc ici :

   — le tracé des filets vit sur un pseudo-élément ;
   — les emblèmes portent [data-reveal], que la règle générale rendrait
     pleinement opaques et sans rotation.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .sv__filet::before{ transform:scaleX(1) !important; }
  .sv__emblem--ouverture{ opacity:.05 !important; transform:rotate(-6deg) !important; }
  .sv__emblem--appel{ opacity:.042 !important; transform:translate(-50%, -50%) rotate(5deg) !important; }
}

/* --------------------------------------------------------------------------
   Amélioration progressive — l'état d'arrivée est le défaut

   Voir theme.css, section 15 bis : les états d'entrée ne s'appliquent que sous
   « nf-anime », posée par l'amorce en tête de page et retirée dès que le moteur
   d'animation échoue ou tarde. Cette feuille rattrape les états qu'elle a
   elle-même déclarés — aucune autre ne les connaît.
   -------------------------------------------------------------------------- */
html:not(.nf-anime) .sv__filet::before{ transform:scaleX(1) !important; }
html:not(.nf-anime) .sv__point{ transform:scale(1) !important; }
html:not(.nf-anime) .sv__emblem--ouverture,
html:not(.nf-anime) .sv__emblem--appel{ opacity:.045 !important; }