/* ==========================================================================
   Tarifs
   --------------------------------------------------------------------------
   Feuille propre à cette page, chargée seulement sur elle. Elle n'utilise que
   les jetons déjà définis par theme.css et ne redéfinit aucune classe des
   pages gelées : accueil, « Pourquoi nous ? » et « Services » restent
   intactes.

   LE PRINCIPE — L'ESCALIER. Le montant ne change jamais de rang. C'est
   l'intervention qui se déplace. Trois blocs empilés, jamais côte à côte,
   dont le bord gauche remonte vers le bord de texte de la page.

   CE QUI PROGRESSE          le recul (2 → 1 → 0 crans), le silence au-dessus
   CE QUI SE RESSERRE        la mesure du texte (l'adresse se privatise)
   CE QUI NE BOUGE PAS       le rang du nom, le rang du montant, l'encre

   Trois quantités ne montent donc pas ensemble : il n'y a pas de podium.
   Et comme les trois blocs ont des bords gauches différents, les montants
   ne s'alignent jamais en colonne — la comparaison de prix est rendue
   géométriquement impossible.

   LE PALIER : le troisième niveau atteint le bord de texte de la page. Tout
   ce qui suit — la mention, les organisations, les ateliers, les questions,
   la clôture — reste sur cette verticale. Rien n'est plus profond que
   « Privé » ; ce qui suit est d'une autre nature.

   AUCUNE CERISE dans les trois niveaux. Elle ne revient qu'à la clôture,
   comme point de résolution.
   ========================================================================== */

:root{
  --tf-pad:       clamp(88px, 11vw, 176px);
  --tf-pad-ample: clamp(112px, 14vw, 232px);

  /* Le cran de l'escalier, déclaré une seule fois et multiplié. */
  --tf-pas:     clamp(22px, 5.6vw, 84px);
  /* Le silence au-dessus d'un niveau : une base, plus un souffle par rang. */
  --tf-silence: clamp(46px, 5.6vw, 88px);
  --tf-souffle: clamp(14px, 2.1vw, 34px);
}

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

.tf + .tf::before{
  content:"";
  position:absolute; left:var(--gutter); right:var(--gutter); top:0;
  height:1px; background:var(--line-soft);
}

/* --------------------------------------------------------------------------
   Éléments communs
   -------------------------------------------------------------------------- */
.tf__filet{ position:relative; display:block; height:1px; }
.tf__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);
}
.tf__filet.is-in::before{ transform:scaleX(1); }

.tf__tete{ margin-bottom:clamp(38px, 5vw, 72px); }

.tf__titre{
  max-width:26ch;
  margin:18px 0 0;
  font-family:var(--f-display);
  font-weight:300;
  font-size:var(--nf-titre);
  line-height:1.1;
  letter-spacing:-.015em;
  color:var(--ink);
}

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

/* --------------------------------------------------------------------------
   A. Ouverture — et, en clôture d'ouverture, les quatre facteurs
   -------------------------------------------------------------------------- */
.tf--ouverture{
  z-index:1;
  padding-top:calc(var(--header-h) + clamp(30px, 5.5vh, 74px));
  padding-bottom:var(--tf-pad-ample);
}

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

/* Les quatre dimensions : un CADRE EXPLICATIF, montré une seule fois.
   Aucun filet, aucune barre, aucune graduation, aucun ordre implicite —
   ce sont quatre raisons, pas quatre notes. Ils n'apparaissent jamais
   sous un niveau : rien n'est mesuré, rien n'est comparé. */
.tf__amorce{
  max-width:52ch;
  margin:clamp(52px, 6vw, 96px) 0 0;
  font-family:var(--f-display);
  font-weight:300;
  font-size:var(--nf-enonce);
  line-height:1.5;
  color:var(--ink);
}

.tf__dimensions{
  list-style:none;
  margin:clamp(34px, 4vw, 56px) 0 0;
  padding:0;
  display:grid;
  gap:clamp(30px, 3.4vw, 46px) clamp(34px, 4vw, 68px);
}
@media (min-width:620px){ .tf__dimensions{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:1000px){ .tf__dimensions{ grid-template-columns:repeat(4, minmax(0,1fr)); } }

.tf__dimension-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);
}
.tf__dimension-texte{
  max-width:28ch;
  margin:12px 0 0;
  font-size:var(--nf-meta);
  line-height:1.72;
  color:var(--ink-3);
}

/* --------------------------------------------------------------------------
   Têtes de chapitre — 01 / 02 / 03
   --------------------------------------------------------------------------
   Le numéro vit DANS l'étiquette, en petites capitales : ce n'est pas le
   grand numéro pâle de « Services », qui a sa colonne et change de côté.
   -------------------------------------------------------------------------- */
.tf__chapitre{ margin-bottom:clamp(30px, 3.6vw, 52px); }

/* --------------------------------------------------------------------------
   C. L'escalier — les trois niveaux
   -------------------------------------------------------------------------- */
.tf__niveaux{ list-style:none; margin:0; padding:0; }

.tf__niveau{
  position:relative;
  margin-left:calc(var(--recul) * var(--tf-pas));
  padding-top:calc(var(--tf-silence) + var(--rang) * var(--tf-souffle));
  padding-bottom:clamp(8px, 1vw, 16px);
}

/* Le recul décroît : le troisième niveau atteint le bord de texte de la
   page, celui du titre et de tout ce qui suit. Le silence, lui, croît. */
.tf__niveau--1{ --recul:2; --rang:0; --m-enonce:46ch; --m-prose:58ch; }
.tf__niveau--2{ --recul:1; --rang:1; --m-enonce:42ch; --m-prose:52ch; }
.tf__niveau--3{ --recul:0; --rang:2; --m-enonce:38ch; --m-prose:46ch; }

.tf__niveau .tf__filet{
  position:absolute;
  top:0; left:0; right:0;
}

/* LES TROIS NOMS SONT AU MÊME RANG. Un niveau plus profond n'est pas un
   niveau meilleur : une taille croissante se lirait comme un classement. */
.tf__nom{
  margin:0;
  font-family:var(--f-display);
  font-weight:300;
  font-size:var(--nf-emphase);
  line-height:1.2;
  letter-spacing:-.008em;
  color:var(--ink);
}

/* La durée qualifie le nom. Même jeton aux trois niveaux : elle ne mesure
   rien, aucune longueur ne lui est proportionnelle. */
.tf__duree{
  margin:13px 0 0;
  font-size:var(--nf-etiquette);
  font-weight:400;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-3);
}

.tf__position{
  max-width:var(--m-enonce, 46ch);
  margin:clamp(20px, 2.3vw, 30px) 0 0;
  font-family:var(--f-display);
  font-weight:300;
  font-size:var(--nf-enonce);
  line-height:1.5;
  color:var(--ink);
}

/* Deux ou trois phrases, jamais une liste : on ne doit pas pouvoir compter.
   La mesure se RESSERRE d'un niveau à l'autre — l'adresse devient plus
   intime à mesure que l'intervention se privatise. */
.tf__prose{
  max-width:var(--m-prose, 58ch);
  margin:clamp(18px, 2vw, 26px) 0 0;
  font-size:var(--nf-corps);
  line-height:1.78;
  color:var(--ink-2);
}
.tf__prose p{ margin:0; }
.tf__prose p + p{ margin-top:.85em; }

/* Le montant : même rang, même graisse, même encre aux trois niveaux, et
   jamais en cerise. Il arrive en fin de bloc, après ce qu'il recouvre. */
.tf__cadre{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:4px 14px;
  margin:clamp(26px, 3vw, 40px) 0 0;
}
.tf__depuis{
  font-size:var(--nf-etiquette);
  font-weight:400;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.tf__montant{
  font-size:var(--nf-enonce);
  font-weight:400;
  line-height:1.3;
  letter-spacing:.005em;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}

/* La mention ferme le chapitre des montants. Elle est posée sur le bord de
   texte de la page, comme tout ce qui suit le palier. */
.tf__mention{
  max-width:78ch;
  margin:26px 0 0;
  font-size:var(--nf-meta);
  line-height:1.72;
  color:var(--ink-3);
}
.tf__mention-filet{ margin-top:clamp(48px, 5.5vw, 84px); }

/* --------------------------------------------------------------------------
   D et E — organisations, puis ateliers
   --------------------------------------------------------------------------
   Même squelette qu'un niveau, mais AU PALIER : aucun recul, aucun silence
   supplémentaire. Ce ne sont pas des quatrième et cinquième niveaux.
   -------------------------------------------------------------------------- */
.tf__bloc{
  position:relative;
  --m-enonce:46ch;
  --m-prose:58ch;
}

/* Le filet qui ouvre un bloc au palier. Dans la maquette il portait un
   style en ligne ; il appartient à la feuille. */
.tf__filet--bloc{
  display:block;
  margin-bottom:clamp(30px, 3.4vw, 48px);
}

/* Les domaines d'une mission : une ligne éditoriale, jamais une liste à
   puces — on ne doit pas plus pouvoir les compter que les inclusions. */
.tf__domaines{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  max-width:64ch;
  margin:clamp(22px, 2.4vw, 32px) 0 0;
  padding:0;
  font-size:var(--nf-corps);
  font-weight:400;
  line-height:1.9;
  color:var(--ink);
}
.tf__domaine:not(:last-child)::after{
  content:"·";
  margin:0 .62em;
  color:var(--ink-4);
}

/* Le lien discret des ateliers. */
.tf__lien{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-top:clamp(26px, 3vw, 40px);
  padding-bottom:7px;
  font-size:var(--nf-meta);
  font-weight:400;
  letter-spacing:.06em;
  color:var(--ink);
  transition:color .4s var(--ease-soft);
}
.tf__lien::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--rule);
  transition:background .4s var(--ease-soft);
}
.tf__lien-fleche{ width:24px; height:10px; transition:transform .45s var(--ease); }

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

/* --------------------------------------------------------------------------
   F. Questions
   -------------------------------------------------------------------------- */
.tf__questions{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:clamp(32px, 3.6vw, 52px) clamp(40px, 5vw, 88px);
}
@media (min-width:1000px){ .tf__questions{ grid-template-columns:repeat(2, minmax(0,1fr)); } }

.tf__question{
  margin:22px 0 0;
  max-width:36ch;
  font-family:var(--f-display);
  font-weight:400;
  font-size:var(--nf-enonce);
  line-height:1.45;
  color:var(--ink);
}
.tf__reponse{
  max-width:48ch;
  margin:14px 0 0;
  font-size:var(--nf-corps);
  line-height:1.78;
  color:var(--ink-2);
}

/* --------------------------------------------------------------------------
   G. Clôture — le seul point de résolution cerise de la page
   -------------------------------------------------------------------------- */
.tf--cloture{ padding-block:var(--tf-pad-ample); }

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

.tf__titre--cloture{
  max-width:24ch;
  font-size:var(--nf-declaration);
  line-height:1.12;
  letter-spacing:-.02em;
}
.tf__texte--cloture{ max-width:54ch; }
.tf__action{ margin-top:clamp(34px, 4vw, 56px); }

.tf__emblem{
  position:absolute;
  top:50%; right:-14%;
  width:clamp(400px, 44vw, 720px);
  height:auto;
  opacity:0;
  pointer-events:none;
  z-index:0;
  transform:translateY(-50%) rotate(6deg);
  transition:opacity 1.5s var(--ease-soft) var(--d, 0s);
}
.tf__emblem.is-in{ opacity:.04; }

/* --------------------------------------------------------------------------
   Une colonne
   --------------------------------------------------------------------------
   Le recul s'efface : sur un écran étroit, un escalier de 22 px se lirait
   comme un défaut d'alignement, pas comme une progression. Ce qui reste —
   le silence croissant et la mesure qui se resserre — sont des propriétés
   du bloc lui-même : un lecteur qui n'a qu'un niveau sous les yeux sait
   toujours où il se trouve sans avoir rien à comparer.
   -------------------------------------------------------------------------- */
@media (max-width:760px){
  .tf__niveau{ margin-left:0; }

  /* Les domaines d'une mission redeviennent de la PROSE : six lignes
     ponctuees de points medians feraient une enumeration a compter, alors
     que c'est un perimetre possible. Une seule source dans le balisage :
     les separateurs et la casse sont poses par la feuille. */
  .tf__domaines{
    display:block;
    max-width:none;
    font-weight:300;
    font-size:var(--nf-corps);
    line-height:1.78;
    color:var(--ink-2);
  }
  .tf__domaine{ display:inline; }
  .tf__domaine:not(:first-child){ text-transform:lowercase; }
  /* Aucune marge : l'espace vient deja du balisage, en ajouter une
     doublerait la chasse apres chaque virgule. */
  .tf__domaine:not(:last-child)::after{
    content:",";
    margin:0;
    color:inherit;
  }
  /* Pas de virgule avant la derniere : la prose demande « et ». */
  .tf__domaine:nth-last-child(2)::after{ content:" et"; }
  /* Et une phrase se termine par un point. */
  .tf__domaine:last-child::after{ content:"."; margin:0; color:inherit; }
  .tf__titre--geant{ max-width:none; }
  .tf__lien{ padding-block:16px 7px; }
}

.tf[id]{ scroll-margin-top:calc(var(--header-h) + 24px); }

@media (prefers-reduced-motion:reduce){
  .tf__filet::before{ transform:scaleX(1) !important; }
  .tf__emblem{ opacity:.04 !important; transform:translateY(-50%) rotate(6deg) !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) .tf__filet::before{ transform:scaleX(1) !important; }
html:not(.nf-anime) .tf__emblem{ opacity:.04 !important; }