/* ══════════════════════════════════════════════════════════════════════════
   LE PROGRAMME PARTENAIRE — /partenaires et /devenir-partenaire

   Pourquoi une feuille, et pourquoi celle-ci.

   Les deux pages portaient chacune son bloc <style> dans l'en-tête de son
   fichier source : deux héros, deux jeux de boutons, deux FAQ, et rien de
   commun entre elles alors qu'elles racontent la même chose. Tout ce qui
   sert aux deux vit désormais ici, préfixé `pt-`, chargé par les deux
   fichiers. public/style.css n'est pas touché.

   Six règles tenues d'un bout à l'autre.

   1. AUCUN DÉGRADÉ DÉCORATIF. Le relief vient des ombres du socle
      (`--neu-*`) et les faces de surface du gradient de MATIÈRE `--face`,
      qui reste sous les cinq points de luminance de la charte. Aucune
      couleur d'accent n'est dégradée, aucun fond de section ne l'est.

   2. LE BLEU NE PORTE JAMAIS DE BLANC. #068FFF sous du blanc mesure
      3,29:1. Sur fond bleu l'encre est foncée ; en texte sur clair, c'est
      #0570CC ou, dès qu'il s'agit d'une petite capitale, #0A5A9E.

      Les fonds de ces pages sont au nombre de trois, et c'est le plus
      sombre qui commande : le sol #E3E8EF, la face de carte (autour de
      #E0E6EC au plus bas) et surtout LE CREUX #D9DEE7, qui habille les
      sections alternées, les champs et les jetons muets. Mesures sur le
      creux, qui est le pire cas :
        · --pt-ink-2  #5A5F6B → 4,74:1   ✓ texte courant
        · --pt-ink-3  #616671 → 4,26:1   ✗ — interdit sur le creux
        · #0570CC             → 3,71:1   ✗ — interdit en petite capitale
        · #0A5A9E             → 5,24:1   ✓
        · #A8317F (rose)      → 4,56:1   ✓  (#B4348B n'y était qu'à 4,09)
      La face de carte réserve un second piège : c'est un gradient de
      matière, et c'est son extrémité basse, #E0E5ED, qui compte. L'encre
      discrète y mesure 4,55:1 — au-dessus du seuil d'un cheveu, et sous lui
      à la moindre retouche de la charte. Les libellés posés sur une face
      (repère, vignette, en-tête de panneau, carte de contact, schéma de la
      semaine) prennent donc eux aussi --pt-ink-2, qui y donne 5,15:1.

      Tout ce qui est posé sur le creux OU sur une face prend --pt-ink-2.
      --pt-ink-3 ne reste que sur le sol #E3E8EF (4,68:1) et sur la surface
      haute #ECEFF5 (5,00:1) — c'est-à-dire à l'intérieur des maquettes
      d'écran, où il joue son rôle de libellé secondaire. Et les yeux de
      section prennent les encres foncées.

   3. RIEN NE DÉBORDE. Les schémas larges défilent dans leur propre
      conteneur, jamais la page.

   4. L'ENTRÉE DE SECTION EST CENTRÉE. Œil, titre, chapô sur l'axe de la
      page (`.pt-tete`), la démonstration dessous, sur toute la largeur.
      Deux exceptions gardent l'alignement à gauche : la FAQ, qu'on
      parcourt, et la rangée de liens de fin de page.

   5. AUCUNE CARTE SEULE SUR SON RANG. Le nombre de colonnes est toujours
      écrit, jamais laissé à `repeat(auto-fit, minmax(...))` : aux largeurs
      intermédiaires, une grille automatique finit par poser trois cartes
      puis une, et ce rang orphelin se voit. Pour N éléments connus, on ne
      retombe que sur un compte qui divise N — 4 → 2 → 1, 6 → 3 → 2 → 1,
      3 → 1.

   6. JAMAIS DE `display` SUR UN <summary>. WebKit y rattache l'ouverture
      native du <details> : un `display: flex` donne un accordéon qui
      s'affiche bien et ne s'ouvre plus sous Safari. Les FAQ de ces pages
      n'ont d'ailleurs aucune classe à elles — elles reprennent
      `details.faq-item-modern > summary.faq-head` de public/style.css, qui
      porte déjà le motif correct (`display: list-item`, marqueurs vidés,
      icône en absolu).

   Aucun script : les accordéons sont des <details> natifs. Ces pages
   doivent pouvoir vivre sans une ligne de JavaScript.
   ══════════════════════════════════════════════════════════════════════════ */

.pt {
  /* Les jetons de la page, dérivés du socle pour ne pas dupliquer de valeur. */
  --pt-face:   var(--face);
  --pt-sol:    var(--sol, #E3E8EF);
  --pt-haut:   var(--sol-haut, #ECEFF5);
  --pt-creux:  var(--sol-creuse, #D9DEE7);
  --pt-ink:    var(--encre, #191919);
  --pt-ink-2:  var(--encre-2, #5A5F6B);
  --pt-ink-3:  var(--encre-3, #616671);
  --pt-trait:  rgba(163, 177, 198, 0.34);
  --pt-bleu:   #068FFF;
  --pt-bleu-t: #0570CC;   /* le bleu qui se lit sur clair, en corps de texte */
  --pt-bleu-f: #0A5A9E;   /* le bleu qui tient la petite capitale et le creux */
  /* Le rose lisible a été descendu de #B4348B à #A8317F : sur le creux
     #D9DEE7, l'ancien ne mesurait que 4,09:1 et l'œil de section « Ce que
     vous obtenez » est posé exactement là. */
  --pt-rose-t: #A8317F;
  --pt-vert-t: #0B6B48;
  --pt-ambre-t:#9A3B0F;
  --pt-indigo-t:#4B4ED1;
  --pt-ease:   cubic-bezier(0.22, 1, 0.36, 1);
}

/* ══ LA TRAME ════════════════════════════════════════════════════════════ */

/* La barre du haut est fixe : sans marge de défilement, une ancre dépose le
   titre de section DERRIÈRE elle. Les sept entrées du menu « Partenaires »
   pointent toutes vers une ancre de ces deux pages — six d'entre elles ne
   correspondaient d'ailleurs à aucun `id` avant ce passage. */
.pt-sec[id], .pt-hero[id] { scroll-margin-top: calc(var(--nav-h, 64px) + 28px); }
/* La dernière section s'arrête court : la plaque d'appel suit immédiatement,
   et un blanc de près de deux cents pixels juste avant l'action se paie en clics. */
.pt-sec { padding-block: clamp(56px, 8vw, 104px); }
.pt-sec:last-of-type { padding-bottom: clamp(24px, 3vw, 40px); }
.pt-sec--creuse { background: var(--pt-creux); }
.pt-sec--serree { padding-block: clamp(36px, 5vw, 64px); }
.pt-in { max-width: 1180px; margin: 0 auto; padding-inline: clamp(20px, 3vw, 40px); }
.pt-in--etroit { max-width: 860px; }

/* L'œil de section est une petite capitale : 11,5 px en gras, donc du texte
   COURANT au sens du contraste, pas du grand texte. Il lui faut 4,5:1 sur le
   creux, ce que #0570CC ne donne pas (3,71:1). Il prend l'encre foncée. */
.pt-oeil {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--pt-bleu-f); margin-bottom: 14px;
}
.pt-oeil::before {
  content: ''; width: 18px; height: 2px; border-radius: 2px;
  background: var(--pt-bleu); flex: none;
}
.pt-oeil--rose { color: var(--pt-rose-t); }
.pt-oeil--rose::before { background: #FF91E4; }
.pt-oeil--vert { color: var(--pt-vert-t); }
.pt-oeil--vert::before { background: #00D084; }
.pt-oeil--ambre { color: var(--pt-ambre-t); }
.pt-oeil--ambre::before { background: #FF6B2B; }
.pt-oeil--indigo { color: var(--pt-indigo-t); }
.pt-oeil--indigo::before { background: #6366F1; }

.pt-h2 {
  font-size: clamp(25px, 3.4vw, 42px); font-weight: 800;
  line-height: 1.1; letter-spacing: -0.035em; color: var(--pt-ink);
  margin: 0 0 16px; max-width: 20ch; text-wrap: balance;
}
.pt-h2--large { max-width: 28ch; }
.pt-h3 {
  font-size: clamp(17px, 1.8vw, 21px); font-weight: 700;
  letter-spacing: -0.022em; color: var(--pt-ink); margin: 0 0 9px;
}
.pt-chapo {
  font-size: clamp(15px, 1.5vw, 17px); line-height: 1.72;
  color: var(--pt-ink-2); margin: 0 0 clamp(28px, 4vw, 46px); max-width: 64ch;
}
.pt-chapo--colle { margin-bottom: 18px; }
.pt-centre { text-align: center; }
.pt-centre .pt-h2, .pt-centre .pt-chapo { margin-inline: auto; }
.pt-centre .pt-h2 { max-width: 26ch; }

/* ══ L'ENTRÉE DE SECTION ══════════════════════════════════════════════════

   Œil, titre, chapô : tout sur l'axe de la page, et la démonstration en
   dessous, sur toute la largeur. Rangés à gauche, ils laissaient une demi-
   page vide au-dessus de composants qui, eux, prennent tout — et obligeaient
   à coller un visuel à droite pour boucher le trou, ce qui écrasait les
   maquettes à 460 px de large.

   Deux exceptions gardent l'alignement à gauche, et elles sont nommées :
   `.pt-tete--gauche` pour la FAQ, qu'on parcourt de haut en bas, et pour la
   rangée de liens de fin de page. */

.pt-tete {
  text-align: center; max-width: 80ch;
  margin: 0 auto clamp(30px, 4vw, 48px);
}
.pt-tete .pt-h2 { margin-inline: auto; max-width: 26ch; }
.pt-tete .pt-h2--large { max-width: 30ch; }
.pt-tete .pt-chapo { margin: 0 auto; max-width: 72ch; }
.pt-tete .pt-chapo + .pt-chapo { margin-top: 16px; }
.pt-tete--gauche { text-align: left; margin-inline: 0; max-width: none; }
.pt-tete--gauche .pt-h2, .pt-tete--gauche .pt-chapo { margin-inline: 0; }

/* ══ LES BOUTONS ═════════════════════════════════════════════════════════

   Ils reprennent la forme des boutons du site (.btn) sans en dépendre :
   ces deux pages ont besoin d'un bouton qui tient sur le sol en relief. */

.pt-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.pt-btn, .pt-btn2 {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 14px 26px; border-radius: 11px;
  font-size: 15px; font-weight: 700; letter-spacing: 0.005em;
  text-decoration: none; white-space: nowrap;
  transition: transform 0.3s var(--pt-ease), box-shadow 0.3s var(--pt-ease), background 0.3s var(--pt-ease);
}
.pt-btn { background: var(--pt-bleu-t); color: #FFFFFF; box-shadow: 0 6px 16px rgba(5, 112, 204, 0.26); }
.pt-btn:hover { background: #0578D9; color: #FFFFFF; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(6, 143, 255, 0.32); }
.pt-btn2 { background: var(--pt-face); color: var(--pt-ink); box-shadow: var(--neu-2); }
.pt-btn2:hover { color: var(--pt-bleu-t); transform: translateY(-2px); box-shadow: var(--neu-lift); }
.pt-btn svg, .pt-btn2 svg { flex: none; width: 15px; height: 15px; transition: transform 0.25s var(--pt-ease); }
.pt-btn:hover svg { transform: translateX(3px); }
/* L'appui : le bouton redescend sur le sol et son ombre se resserre. Sans
   cet état, un bouton en relief reste figé sous le doigt — on ne sait pas
   si le clic est parti. */
.pt-btn:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(5, 112, 204, 0.3); }
.pt-btn2:active { transform: translateY(0); box-shadow: var(--neu-in-1); }
/* L'anneau de focus est posé ici parce que ces boutons ne descendent pas de
   `.btn` : sans lui, la navigation au clavier n'a aucun repère. */
.pt-btn:focus-visible, .pt-btn2:focus-visible, .pt-contact:focus-visible,
.pt-lien:focus-visible, .pt-fil a:focus-visible {
  outline: 2px solid var(--pt-bleu-f); outline-offset: 3px; border-radius: 11px;
}

.pt-lien {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 700; color: var(--pt-ink);
  padding-bottom: 4px; border-bottom: 2px solid var(--pt-trait);
  transition: gap 0.25s var(--pt-ease), color 0.25s var(--pt-ease), border-color 0.25s var(--pt-ease);
}
.pt-lien:hover { gap: 13px; color: var(--pt-bleu-t); border-bottom-color: var(--pt-bleu); }
.pt-lien svg { width: 15px; height: 15px; flex: none; }

/* ══ LE HÉROS ════════════════════════════════════════════════════════════

   Centré, sur toute la largeur : fil d'Ariane, étiquette, titre, chapô,
   boutons et mentions sont tous sur l'axe de la page, et la maquette du
   produit passe DESSOUS.

   Elle était à droite, dans une colonne de 460 px : un portail à six entrées
   de menu et quatre indicateurs y était illisible, et le titre, bridé par la
   moitié de page restante, se cassait en quatre lignes. Sous le texte, la
   maquette dispose de 920 px — la largeur à laquelle ses libellés se lisent.

   Pas de plaque sombre : le sol du site court du haut de la page au pied,
   c'est lui qui tient le relief. */

.pt-hero {
  padding: calc(var(--nav-h, 64px) + 54px) 0 clamp(40px, 6vw, 72px);
  text-align: center;
}
.pt-hero-dire { max-width: 1000px; margin: 0 auto; }
.pt-hero h1 {
  font-size: clamp(33px, 5vw, 64px); font-weight: 800;
  line-height: 1.04; letter-spacing: -0.04em; color: var(--pt-ink);
  margin: 0 0 22px; text-wrap: balance;
}
.pt-hero h1 em {
  font-style: normal; color: var(--pt-rose-t);
}
.pt-hero-sous {
  font-size: clamp(15.5px, 1.6vw, 18px); line-height: 1.68;
  color: var(--pt-ink-2); margin: 0 auto 30px; max-width: 70ch;
}

/* Le fil d'Ariane : une ligne, pas une pastille. Il dit d'où l'on vient et
   il donne le chemin de retour vers l'autre page du programme. */
.pt-fil {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 4px 10px; margin-bottom: 20px;
  font-size: 12.5px; color: var(--pt-ink-2);
}
.pt-fil a { color: var(--pt-ink-2); text-decoration: none; border-bottom: 1px solid transparent; }
.pt-fil a:hover { color: var(--pt-ink); border-bottom-color: var(--pt-trait); }
.pt-fil [aria-current] { color: var(--pt-ink); font-weight: 600; }
.pt-fil span[aria-hidden] { color: var(--pt-ink-3); }

/* L'étiquette est posée dans le creux : l'encre discrète et le bleu clair y
   échouent tous les deux, elle prend donc l'encre bleue foncée. */
.pt-etiq {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 15px; border-radius: 999px; margin-bottom: 22px;
  background: var(--pt-creux); box-shadow: var(--neu-in-1);
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--pt-bleu-f);
}
.pt-etiq svg { width: 14px; height: 14px; flex: none; }
.pt-actions { justify-content: center; }
.pt-hero-pied {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin-top: 26px;
  font-size: 12.5px; font-weight: 600; color: var(--pt-ink-2);
}
.pt-hero-pied span { display: inline-flex; align-items: center; gap: 7px; }
.pt-hero-pied svg { width: 14px; height: 14px; flex: none; color: var(--pt-vert-t); }

/* La maquette, sous le texte centré. Elle garde son alignement à gauche :
   une interface centrée n'existe pas, et les vignettes qui mordent ses coins
   ont besoin de la gouttière que lui laissent les 1180 px du conteneur. */
.pt-hero-vue {
  max-width: 920px; margin: clamp(44px, 6vw, 76px) auto 0;
  text-align: left;
}

@media (max-width: 940px) {
  .pt-hero { padding-top: calc(var(--nav-h, 64px) + 32px); }
  .pt-hero-vue { margin-top: 40px; }
}

/* ══ LE BANDEAU DE REPÈRES ═══════════════════════════════════════════════

   Quatre chiffres, et aucun n'est une mesure de traction : ce sont des
   constantes du programme — un palier, un délai contractuel, un décompte.
   Une jeune société n'a pas de statistiques à afficher, elle a des règles. */

.pt-reperes {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--pt-face); border-radius: 20px; box-shadow: var(--neu-3);
  overflow: hidden;
}
.pt-repere { padding: clamp(20px, 2.6vw, 30px) clamp(16px, 2vw, 26px); position: relative; }
.pt-repere + .pt-repere::before {
  content: ''; position: absolute; left: 0; top: 18%; bottom: 18%;
  width: 1px; background: var(--pt-trait);
}
.pt-repere-n {
  font-size: clamp(23px, 2.8vw, 33px); font-weight: 800;
  letter-spacing: -0.04em; line-height: 1.05; color: var(--pt-ink);
  font-variant-numeric: tabular-nums;
}
.pt-repere-n small { font-size: 0.56em; font-weight: 700; letter-spacing: -0.01em; }
.pt-repere-l { font-size: 12.5px; line-height: 1.5; color: var(--pt-ink-2); margin-top: 7px; font-weight: 600; }
@media (max-width: 780px) {
  .pt-reperes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pt-repere:nth-child(odd)::before { display: none; }
  .pt-repere:nth-child(n + 3) { border-top: 1px solid var(--pt-trait); }
}

/* ══ LE DUO — un visuel, un propos ═══════════════════════════════════════

   Ce qu'il reste de duos est court : une maquette d'un côté, un accordéon de
   l'autre, deux blocs de hauteur comparable. Les sections où le visuel était
   deux fois plus haut que sa colonne de texte ont été remontées à la
   verticale (`.pt-demo` + `.pt-points`) : c'est là que naissaient les demi-
   colonnes vides. */

.pt-duo {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 4.5vw, 64px); align-items: center;
}
.pt-duo--texteserre { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.pt-duo--haut { align-items: start; }
/* Deux cartes qui se répondent doivent finir au même bas : sans étirement,
   `align-items: center` les décale de la moitié de leur différence, en haut
   comme en bas, et le relevé de facture de la plus courte flotte. */
.pt-duo--egal { align-items: stretch; }
.pt-duo-visuel { position: relative; min-width: 0; }
/* L'inversion se fait par l'ordre, pas par `direction` : une inversion de
   direction retourne aussi la ponctuation des textes qu'elle contient. */
.pt-duo--inv .pt-duo-visuel { order: -1; }
@media (max-width: 940px) {
  .pt-duo, .pt-duo--texteserre { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .pt-duo--inv .pt-duo-visuel { order: 0; }
}

/* ══ LA DÉMONSTRATION, PUIS SES POINTS D'APPUI ═══════════════════════════

   L'entrée de section centrée, la pièce qui démontre dessous, et seulement
   ensuite les points qui la commentent. Les points sont des cartes et non
   une liste à puces : en colonne étroite, la liste finissait par des lignes
   de trois mots, et à côté d'une maquette elle laissait un trou de 200 px. */

.pt-demo { max-width: 980px; margin: 0 auto; }
.pt-demo--large { max-width: none; }
/* Le rail des cinq étapes se lit comme un texte, pas comme un tableau : au
   delà de 66 caractères par ligne, l'œil perd le début de la ligne suivante.
   Il garde donc sa mesure et se centre, au lieu d'occuper une colonne à côté
   d'un panneau deux fois plus court. */
.pt-demo--rail { max-width: 840px; }
.pt-demo--rail .pt-pas-corps p { max-width: 66ch; }
.pt-demo + .pt-points { margin-top: clamp(26px, 3.4vw, 42px); }

.pt-points {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(13px, 1.7vw, 18px);
}
/* Le compte de colonnes divise toujours le nombre de points : trois points
   passent de 3 à 1, quatre points de 2×2 à 1. Jamais de rang orphelin. */
.pt-points--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pt-points--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pt-points li {
  display: grid; grid-template-columns: 19px minmax(0, 1fr); gap: 13px; align-items: start;
  background: var(--pt-face); box-shadow: var(--neu-2); border-radius: 16px;
  padding: clamp(17px, 2vw, 21px) clamp(18px, 2.1vw, 22px);
  font-size: 13.8px; line-height: 1.66; color: var(--pt-ink-2);
  transition: transform 0.3s var(--pt-ease), box-shadow 0.3s var(--pt-ease);
}
.pt-points li:hover { transform: translateY(-3px); box-shadow: var(--neu-lift); }
.pt-points li strong { display: block; color: var(--pt-ink); font-weight: 700; margin-bottom: 5px; }
.pt-points svg { width: 18px; height: 18px; margin-top: 2px; flex: none; }
@media (max-width: 900px) { .pt-points--3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) { .pt-points--4 { grid-template-columns: minmax(0, 1fr); } }

/* ══ L'ÉCRAN — la capture, fabriquée ═════════════════════════════════════

   Pas une image : du balisage. Ça reste net à tout zoom, ça se traduit, ça
   se lit à la voix, et ça ne périme pas à la prochaine retouche d'interface. */

.pt-ecran {
  background: var(--pt-haut); border-radius: 20px; box-shadow: var(--neu-3);
  overflow: hidden; position: relative;
}
.pt-ecran-barre {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 16px; background: var(--pt-sol);
  border-bottom: 1px solid var(--pt-trait);
}
.pt-pastille { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.pt-pastille--r { background: #FF5F57; }
.pt-pastille--j { background: #FEBC2E; }
.pt-pastille--v { background: #28C840; }
.pt-ecran-url {
  margin-left: 8px; flex: 1; min-width: 0;
  font-size: 11px; font-weight: 600; color: var(--pt-ink-2);
  background: var(--pt-creux); box-shadow: var(--neu-in-1);
  border-radius: 999px; padding: 5px 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pt-ecran-corps { padding: clamp(13px, 1.6vw, 18px); }

/* La marque du revendeur, telle qu'elle est posée dans le produit : son
   nom en tête, « Propulsé par Sylen » en pied. Le co-branding n'est pas de
   la marque blanche, et la page ne doit pas laisser croire l'inverse. */
.pt-marque { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pt-marque-carre {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 800; letter-spacing: -0.02em;
  background: rgba(99, 102, 241, 0.16); color: var(--pt-indigo-t);
}
.pt-marque-nom { font-size: 12.5px; font-weight: 800; letter-spacing: -0.02em; color: var(--pt-ink); }
.pt-propulse {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 14px; border-top: 1px solid var(--pt-trait);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--pt-ink-3); background: var(--pt-sol);
}
.pt-propulse i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--pt-bleu);
  display: inline-block; flex: none;
}

/* L'entête d'un écran : un titre, et de faux boutons qui ne mentent pas sur
   leur nature — ils ne sont ni <a> ni <button>, rien n'y est cliquable. */
.pt-ecran-tete {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 13px;
}
.pt-ecran-tete strong { font-size: 14px; font-weight: 800; letter-spacing: -0.025em; color: var(--pt-ink); }
.pt-ecran-sous { display: block; font-style: normal; font-size: 11px; color: var(--pt-ink-3); margin-top: 3px; }
.pt-faux-btns { display: flex; gap: 7px; flex-wrap: wrap; }
.pt-faux-btn {
  display: inline-flex; align-items: center; border-radius: 9px; padding: 6px 11px;
  font-size: 10.5px; font-weight: 700; white-space: nowrap;
  background: var(--pt-haut); box-shadow: var(--neu-1); color: var(--pt-ink-2);
}
/* Le blanc sur #6366F1 mesure 4,46:1 — sous le seuil du texte courant.
   Sur #4B4ED1, même teinte assombrie, il monte à 6,3:1. Même arbitrage que
   --blue-dark dans style.css. */
.pt-faux-btn.est-pleine { background: #4B4ED1; color: #FFFFFF; box-shadow: 0 3px 9px rgba(75, 78, 209, 0.3); }
.pt-recherche {
  border-radius: 999px; padding: 8px 14px; margin-bottom: 12px;
  background: var(--pt-creux); box-shadow: var(--neu-in-1);
  font-size: 11px; color: var(--pt-ink-2);
}

/* Une carte-ligne de client, telle que le portail les empile.

   La jauge était posée sous le nom, sur toute la largeur de la ligne : à
   980 px de démonstration, cela faisait une barre de 900 px pour dire
   « 212 sur 350 minutes », et un grand vide à sa droite. Ce n'est pas non
   plus la forme du produit — la liste réelle met le nom et sa référence à
   gauche, et une jauge courte, de largeur fixe, à droite, qui disparaît
   sous les petits écrans. La maquette suit maintenant le produit. */
.pt-client {
  display: flex; align-items: center; gap: 14px;
  border-radius: 13px; padding: 11px 13px; background: var(--pt-haut); box-shadow: var(--neu-1);
}
.pt-client + .pt-client { margin-top: 8px; }
.pt-client-dire { flex: 1 1 auto; min-width: 0; }
.pt-client-tete { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.pt-client-nom { font-size: 12.5px; font-weight: 800; letter-spacing: -0.02em; color: var(--pt-ink); }
.pt-client-meta { font-size: 10.5px; color: var(--pt-ink-2); margin: 5px 0 0; }
.pt-client > .pt-jauge { width: 112px; flex: none; }
.pt-client-act { flex: none; background: var(--pt-creux); box-shadow: var(--neu-in-1); }
@media (max-width: 640px) { .pt-client > .pt-jauge { display: none; } }

.pt-jeton {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; white-space: nowrap;
}
.pt-jeton--actif { background: rgba(0, 208, 132, 0.18); color: var(--pt-vert-t); }
.pt-jeton--essai { background: rgba(6, 143, 255, 0.14); color: var(--pt-bleu-f); }
.pt-jeton--alerte { background: rgba(255, 107, 43, 0.16); color: var(--pt-ambre-t); }
.pt-jeton--rose { background: rgba(255, 145, 228, 0.24); color: var(--pt-rose-t); }
.pt-jeton--muet { background: var(--pt-creux); color: var(--pt-ink-2); box-shadow: var(--neu-in-1); }

/* La jauge de consommation, en creux.

   Le remplissage est en #0570CC et non en #068FFF : sur le creux du socle,
   le bleu de la charte ne mesure que 2,35:1, en dessous des 3:1 exigés d'un
   objet graphique. Même raison pour la jauge chaude, qui descend de #FF6B2B
   à l'ambre foncé (4,98:1). Une jauge qu'on ne distingue pas de sa gorge ne
   dit rien. */
.pt-jauge { height: 5px; border-radius: 999px; background: var(--pt-creux); box-shadow: var(--neu-in-1); overflow: hidden; }
.pt-jauge i { display: block; height: 100%; border-radius: 999px; background: var(--pt-bleu-t); }
.pt-jauge i.est-chaude { background: var(--pt-ambre-t); }

/* ── Le portail : rail de navigation à gauche, contenu à droite ── */
.pt-portail { display: grid; grid-template-columns: 138px minmax(0, 1fr); }
.pt-portail-rail {
  background: var(--pt-sol); border-right: 1px solid var(--pt-trait);
  padding: 14px 10px 0; display: flex; flex-direction: column;
}
.pt-portail-rail .pt-marque { padding: 0 6px 14px; }
.pt-portail-nav { list-style: none; margin: 0; padding: 0; flex: 1; }
.pt-portail-nav li {
  font-size: 11px; font-weight: 600; color: var(--pt-ink-2);
  padding: 8px 10px; border-radius: 9px; margin-bottom: 2px;
}
.pt-portail-nav li.est-active {
  background: var(--pt-haut); box-shadow: var(--neu-1);
  color: var(--pt-ink); font-weight: 800;
}
.pt-portail-rail .pt-propulse { margin: 12px -10px 0; }
.pt-portail-corps { padding: 15px 16px 18px; min-width: 0; }
.pt-portail-tete { margin-bottom: 13px; }
.pt-portail-tete strong { display: block; font-size: 14px; font-weight: 800; letter-spacing: -0.028em; color: var(--pt-ink); }
.pt-portail-tete span { display: block; font-size: 10.5px; color: var(--pt-ink-3); margin-top: 3px; }

.pt-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pt-kpi { background: var(--pt-haut); box-shadow: var(--neu-1); border-radius: 12px; padding: 11px 12px; }
.pt-kpi-l { display: block; font-size: 9px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pt-ink-3); }
.pt-kpi-n {
  display: block; font-size: 19px; font-weight: 800; letter-spacing: -0.04em;
  color: var(--pt-ink); margin-top: 5px; line-height: 1.1; font-variant-numeric: tabular-nums;
}
.pt-kpi-n small { font-size: 0.55em; font-weight: 700; }
.pt-kpi-d { display: block; font-size: 9.5px; line-height: 1.4; color: var(--pt-ink-3); margin-top: 4px; }

.pt-atraiter { margin-top: 12px; background: var(--pt-creux); box-shadow: var(--neu-in-1); border-radius: 12px; padding: 11px 12px; }
.pt-atraiter-t { font-size: 10px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--pt-ink-2); }
.pt-atraiter-t b { color: var(--pt-ambre-t); }
.pt-atraiter ul { list-style: none; margin: 9px 0 0; padding: 0; }
.pt-atraiter li {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 10.5px; line-height: 1.45; color: var(--pt-ink-2); padding: 5px 0;
}
.pt-atraiter li + li { border-top: 1px solid var(--pt-trait); }

@media (max-width: 520px) {
  .pt-portail { grid-template-columns: minmax(0, 1fr); }
  .pt-portail-rail { border-right: 0; border-bottom: 1px solid var(--pt-trait); padding-bottom: 10px; }
  /* Le rail devient une barre d'entrées : elles s'enroulent, elles ne
     défilent pas. Un conteneur à défilement horizontal à l'intérieur d'une
     maquette capte le geste de lecture du lecteur mobile, et les deux
     dernières entrées sortaient de l'écran sans que rien ne l'annonce. */
  .pt-portail-nav { display: flex; flex-wrap: wrap; gap: 4px; }
  .pt-portail-nav li { white-space: nowrap; margin-bottom: 0; }
  .pt-portail-rail .pt-propulse { display: none; }
  .pt-kpis { grid-template-columns: minmax(0, 1fr); }
}

/* ── L'écran « Ma marque » : l'aperçu client, et les champs ── */
.pt-marque-ecran { display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); gap: 14px; }
.pt-apercu-l {
  display: block; font-size: 9px; font-weight: 800; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--pt-ink-3); margin-bottom: 8px;
}
.pt-apercu-carte { background: var(--pt-haut); box-shadow: var(--neu-2); border-radius: 14px; padding: 14px; }
.pt-apercu-tete { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.pt-apercu-ident { display: block; min-width: 0; }
.pt-apercu-ident b { display: block; font-size: 12.5px; font-weight: 800; letter-spacing: -0.025em; color: var(--pt-ink); }
.pt-apercu-ident em {
  display: block; font-style: normal; font-size: 8px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--pt-ink-3); margin-top: 3px;
}
.pt-apercu-conso {
  display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px;
  font-size: 10.5px; font-weight: 700; color: var(--pt-ink-2); font-variant-numeric: tabular-nums;
}
.pt-apercu-btn {
  display: block; text-align: center; margin-top: 14px;
  background: #4B4ED1; color: #FFFFFF; border-radius: 9px; padding: 8px;
  font-size: 11px; font-weight: 700;
}
.pt-apercu-aide { display: block; text-align: center; margin-top: 9px; font-size: 10px; font-weight: 600; color: var(--pt-indigo-t); }

.pt-champs { display: grid; gap: 8px; align-content: start; }
.pt-champ { background: var(--pt-creux); box-shadow: var(--neu-in-1); border-radius: 11px; padding: 9px 12px; }
.pt-champ-l { display: block; font-size: 9px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--pt-ink-2); }
.pt-champ-v {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 11.5px; font-weight: 700; color: var(--pt-ink); margin-top: 4px; word-break: break-word;
}
.pt-puce { width: 12px; height: 12px; border-radius: 4px; flex: none; display: inline-block; }
@media (max-width: 560px) { .pt-marque-ecran { grid-template-columns: minmax(0, 1fr); } }

/* ── Le journal d'appel : filtres, puis appels ── */
.pt-filtres { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 12px; }
.pt-filtres span {
  font-size: 10.5px; font-weight: 700; color: var(--pt-ink-2);
  padding: 5px 11px; border-radius: 999px; background: var(--pt-creux); box-shadow: var(--neu-in-1);
}
.pt-filtres span.est-active { background: var(--pt-haut); box-shadow: var(--neu-1); color: var(--pt-ink); }
.pt-appel { background: var(--pt-haut); box-shadow: var(--neu-1); border-radius: 13px; padding: 12px 14px; }
.pt-appel + .pt-appel { margin-top: 8px; }
.pt-appel-tete { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.pt-appel-quand { font-size: 11px; font-weight: 700; color: var(--pt-ink); }
.pt-appel-num { font-size: 11px; color: var(--pt-ink-3); font-variant-numeric: tabular-nums; }
.pt-appel-min { font-size: 11px; font-weight: 700; color: var(--pt-ink-2); font-variant-numeric: tabular-nums; }
.pt-appel-res {
  font-size: 11.5px; line-height: 1.6; color: var(--pt-ink-2);
  margin: 9px 0 0; padding-top: 9px; border-top: 1px solid var(--pt-trait);
}
.pt-appel-res--verrou {
  display: flex; align-items: center; gap: 8px;
  color: var(--pt-ink-3); font-style: italic;
}
.pt-appel-res--verrou svg { width: 14px; height: 14px; flex: none; color: var(--pt-ambre-t); }

/* ── La clé de lecture : ce qui est toujours visible, ce qui ne l'est pas ──

   Le partage se disait en une phrase de chapô de cinq lignes, au-dessus
   d'une maquette qui ne le montrait qu'à moitié — le lecteur devait
   reconstituer la règle lui-même. Les deux colonnes la posent : la gauche
   énumère ce que le revendeur voit toujours, la droite ce qu'il ne voit
   qu'avec l'accord du client. Deux colonnes, donc jamais de rang orphelin. */
.pt-cle {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(13px, 1.8vw, 18px); margin-top: clamp(22px, 2.8vw, 32px);
}
@media (max-width: 720px) { .pt-cle { grid-template-columns: minmax(0, 1fr); } }
.pt-cle > div {
  background: var(--pt-face); box-shadow: var(--neu-2); border-radius: 18px;
  padding: clamp(18px, 2.2vw, 24px);
  transition: transform 0.3s var(--pt-ease), box-shadow 0.3s var(--pt-ease);
}
.pt-cle > div:hover { transform: translateY(-3px); box-shadow: var(--neu-lift); }
.pt-cle-ic { box-shadow: var(--neu-in-1); }
.pt-cle-tete {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: center;
  padding-bottom: 13px; margin-bottom: 4px; border-bottom: 1px solid var(--pt-trait);
}
.pt-cle-ic { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; }
.pt-cle-ic svg { width: 16px; height: 16px; }
.pt-cle-tete b { font-size: 14.5px; font-weight: 800; letter-spacing: -0.022em; color: var(--pt-ink); }
.pt-cle-tete span { display: block; font-size: 11.5px; color: var(--pt-ink-2); margin-top: 2px; }
.pt-cle ul { list-style: none; margin: 0; padding: 0; }
.pt-cle li {
  display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 11px; align-items: start;
  padding: 9px 0; font-size: 13.2px; line-height: 1.55; color: var(--pt-ink-2);
}
.pt-cle li + li { border-top: 1px solid var(--pt-trait); }
.pt-cle li::before {
  content: ''; width: 8px; height: 8px; border-radius: 3px; margin-top: 7px;
}
.pt-cle .est-vue li::before { background: var(--pt-bleu-t); }
.pt-cle .est-masquee li::before { background: var(--pt-creux); box-shadow: inset 0 0 0 1px rgba(163, 177, 198, 0.55); }
.pt-cle-pied {
  margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--pt-trait);
  font-size: 11.5px; line-height: 1.6; color: var(--pt-ink-2);
}

/* ── Un formulaire maquetté : champs creusés, choix en touches ── */
.pt-form { display: grid; gap: 8px; }
.pt-form-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pt-form-champ { background: var(--pt-creux); box-shadow: var(--neu-in-1); border-radius: 11px; padding: 9px 12px; }
.pt-form-l { display: block; font-size: 9px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--pt-ink-2); }
.pt-form-v { display: block; font-size: 12px; font-weight: 700; color: var(--pt-ink); margin-top: 4px; }
.pt-form-choix { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.pt-form-choix i {
  font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--pt-ink-2);
  background: var(--pt-haut); box-shadow: var(--neu-1);
  border-radius: 8px; padding: 5px 10px; white-space: nowrap;
}
.pt-form-choix i.est-choisie { background: #4B4ED1; color: #FFFFFF; box-shadow: 0 3px 9px rgba(75, 78, 209, 0.3); }
.pt-form-note {
  display: grid; grid-template-columns: 15px minmax(0, 1fr); gap: 9px; align-items: start;
  font-size: 10.5px; line-height: 1.55; color: var(--pt-ink-3); padding: 4px 2px;
}
.pt-form-note svg { width: 14px; height: 14px; margin-top: 1px; color: var(--pt-bleu-f); }
.pt-form-valide { justify-self: start; }

/* ── Un modèle d'agent, dans la liste ── */
.pt-modele { background: var(--pt-haut); box-shadow: var(--neu-1); border-radius: 13px; padding: 12px 14px; }
.pt-modele + .pt-modele { margin-top: 8px; }
.pt-modele-tete { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pt-modele-nom { font-size: 12.5px; font-weight: 800; letter-spacing: -0.02em; color: var(--pt-ink); }
.pt-modele-d { font-size: 11px; line-height: 1.55; color: var(--pt-ink-3); margin: 6px 0 9px; }

/* ── La légende sous une maquette ── */
/* L'encre discrète passe sur le sol clair (4,68:1) mais pas sur le creux
   #D9DEE7 des sections alternées, où elle tombe à 4,26:1. Les légendes
   prennent donc l'encre courante : 4,74:1 au pire des deux fonds. */
.pt-legende {
  font-size: 11.5px; line-height: 1.6; color: var(--pt-ink-2);
  margin: 14px 2px 0; max-width: 62ch;
}
.pt-centre.pt-legende, .pt-legende.pt-centre { margin-inline: auto; }

/* ══ LA VIGNETTE — le chiffre posé à côté de l'écran ══════════════════════

   Elle chevauche la capture sur grand écran, elle se range dessous sur
   petit. Jamais en dehors du flux : c'est ce qui fait déborder une page. */

/* Le cadre ne contient QUE la capture : c'est par rapport à lui que les
   vignettes se posent. La légende reste dehors, sinon `inset: 0` la compte
   dans sa hauteur et la vignette « en bas » atterrit au milieu de l'écran,
   sur du texte. */
.pt-cadre { position: relative; }
.pt-vignettes { position: absolute; inset: 0; pointer-events: none; }
.pt-vignette {
  position: absolute; pointer-events: auto;
  background: var(--pt-face); box-shadow: var(--neu-2);
  border-radius: 14px; padding: 12px 16px; max-width: 178px;
}
/* Elles mordent sur le coin, pas sur le contenu. */
.pt-vignette--bg { left: -28px; bottom: -22px; }
.pt-vignette--hd { right: -24px; top: -24px; }
.pt-cadre + .pt-legende { margin-top: 36px; }
.pt-vignette-n {
  font-size: 21px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.05;
  color: var(--pt-ink); font-variant-numeric: tabular-nums;
}
.pt-vignette-n small { font-size: 0.6em; font-weight: 700; }
.pt-vignette-l { font-size: 11px; line-height: 1.45; color: var(--pt-ink-2); margin-top: 5px; font-weight: 600; }

/* Deux vignettes : deux colonnes, puis une. En auto-fit, sous 320 px de
   place la seconde tombait seule sur son rang. */
@media (max-width: 1080px) {
  .pt-vignettes {
    position: static; display: grid; gap: 12px; margin-top: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pt-vignette { position: static; max-width: none; }
}
@media (max-width: 520px) {
  .pt-vignettes { grid-template-columns: minmax(0, 1fr); }
}

/* ══ LES CARTES ══════════════════════════════════════════════════════════ */

/* Six cartes : trois rangs de deux, jamais 4 + 2 ni 5 + 1. Quatre cartes :
   deux fois deux, jamais 3 + 1. Les comptes sont écrits parce qu'`auto-fit`
   décide selon la place disponible et finit toujours, à une largeur ou une
   autre, par laisser une carte seule au bout de la grille.
   `.pt-grille--4` est répété dans chaque palier : il porte aussi `.pt-grille`,
   et à spécificité égale c'est la dernière règle écrite qui gagne. */
.pt-grille { display: grid; gap: clamp(14px, 1.8vw, 20px); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pt-grille--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1000px) {
  .pt-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pt-grille--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .pt-grille, .pt-grille--4 { grid-template-columns: minmax(0, 1fr); }
}
.pt-carte {
  background: var(--pt-face); border-radius: 18px; box-shadow: var(--neu-2);
  padding: clamp(20px, 2.4vw, 28px);
  transition: transform 0.3s var(--pt-ease), box-shadow 0.3s var(--pt-ease);
}
.pt-carte:hover { transform: translateY(-3px); box-shadow: var(--neu-lift); }
.pt-carte p { font-size: 14px; line-height: 1.68; color: var(--pt-ink-2); margin: 0; }

/* Les cartes d'une grille sont étirées à la hauteur de leur rang : sans
   terminaison commune, la plus courte s'ouvre sur cent pixels de vide. La
   ligne de récapitulation est cette terminaison — elle condense la carte
   au-dessus d'elle, et `margin-top: auto` la colle au bas quelle que soit la
   longueur du paragraphe. */
.pt-grille .pt-carte { display: flex; flex-direction: column; }
.pt-carte-pied {
  display: block; margin-top: auto; padding-top: 13px;
  border-top: 1px solid var(--pt-trait);
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px; line-height: 1.65; letter-spacing: 0.035em;
  color: var(--pt-ink-2);
}
.pt-grille .pt-carte p { margin-bottom: 16px; }

/* ── Les deux formes de tarif partenaire, et l'encart qui les encadre ──
   Les cartes sont posées en grille, donc elles font déjà la même hauteur ;
   la mise en colonne sert à coller la liste en bas quelle que soit la
   longueur du paragraphe au-dessus. */
.pt-carte--haute { display: flex; flex-direction: column; gap: 12px; }
.pt-carte--haute .pt-h3 { margin: 2px 0 0; }
.pt-carte--haute .pt-liste { padding-top: 2px; }

/* ── Le relevé de facture, au bas de chaque forme de tarif ──

   Les deux cartes décrivaient le modèle en prose et s'arrêtaient là : la
   plus courte des deux gardait cent pixels de vide sous sa liste, et
   l'affirmation « l'écart entre les deux prix vous revient » n'était
   démontrée nulle part. Le relevé montre la forme exacte de la ligne que le
   revendeur lira, avec les montants masqués là où ils ne sont pas publics —
   ce qui est le propos de la section, pas une coquetterie. Posé en
   `margin-top: auto`, il cale aussi les deux cartes au même bas. */
.pt-ticket {
  margin-top: auto; background: var(--pt-creux); box-shadow: var(--neu-in-1);
  border-radius: 14px; padding: 14px 16px 15px;
}
.pt-ticket-t {
  display: block; font-size: 9.5px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--pt-ink-2); margin-bottom: 9px;
}
.pt-ticket ul { list-style: none; margin: 0; padding: 0; }
.pt-ticket li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px;
  align-items: baseline; padding: 8px 0;
  font-size: 12.5px; line-height: 1.45; color: var(--pt-ink-2);
}
.pt-ticket li + li { border-top: 1px solid var(--pt-trait); }
.pt-ticket li.est-total { font-weight: 800; color: var(--pt-ink); }
.pt-ticket b {
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 12px; font-weight: 700; color: var(--pt-ink);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Le montant masqué : il se lit comme un montant, il se dit comme une
   phrase. Les points sont retirés de l'arbre d'accessibilité et remplacés
   par le texte caché qui les accompagne. */
.pt-masque { color: var(--pt-ink-2); letter-spacing: 0.08em; }
.pt-ticket-n {
  margin: 11px 0 0; padding-top: 10px; border-top: 1px solid var(--pt-trait);
  font-size: 11.5px; line-height: 1.55; color: var(--pt-ink-2);
}

/* Le texte réservé aux lecteurs d'écran. */
.pt-vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pt-encart {
  margin-top: clamp(18px, 2.2vw, 26px);
  background: var(--pt-creux); box-shadow: var(--neu-in-2, inset 3px 3px 7px rgba(163,177,198,.5), inset -3px -3px 7px rgba(255,255,255,.65));
  border-radius: 18px; padding: clamp(20px, 2.4vw, 30px);
}
.pt-encart .pt-h3 { margin: 0 0 10px; }
.pt-encart > p { font-size: 14px; line-height: 1.68; color: var(--pt-ink-2); margin: 0; max-width: 72ch; }
.pt-etapes-courtes {
  margin: 16px 0 0; padding: 0; list-style: none; counter-reset: pt-ec;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
}
@media (max-width: 860px) { .pt-etapes-courtes { grid-template-columns: 1fr; } }
.pt-etapes-courtes li {
  counter-increment: pt-ec; position: relative;
  background: var(--pt-face); box-shadow: var(--neu-1); border-radius: 14px;
  padding: 16px 18px 16px 46px;
  font-size: 13.5px; line-height: 1.6; color: var(--pt-ink-2);
}
.pt-etapes-courtes li::before {
  content: counter(pt-ec); position: absolute; left: 16px; top: 15px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--pt-creux); box-shadow: var(--neu-in-1, inset 1px 1px 3px rgba(163,177,198,.5));
  display: grid; place-items: center;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px; font-weight: 700; color: var(--pt-ink-2);
}
.pt-etapes-courtes b { color: var(--pt-ink); font-weight: 700; }
/* La tuile d'icône est un puits, pas une pastille posée à plat : l'ombre
   interne lui donne une profondeur que la seule teinte ne donnait pas, et
   elle remonte à l'extrudé quand la carte est survolée. Deux ombres du
   socle, aucun dégradé. */
.pt-carte-ic {
  width: 42px; height: 42px; border-radius: 13px; margin-bottom: 17px;
  display: grid; place-items: center; box-shadow: var(--neu-in-1);
  transition: box-shadow 0.3s var(--pt-ease), transform 0.3s var(--pt-ease);
}
.pt-carte:hover .pt-carte-ic { box-shadow: var(--neu-1); transform: translateY(-1px); }
.pt-carte-ic svg { width: 21px; height: 21px; }
.ic-bleu   { background: rgba(6, 143, 255, 0.14);  color: var(--pt-bleu-f); }
.ic-rose   { background: rgba(255, 145, 228, 0.24); color: var(--pt-rose-t); }
.ic-vert   { background: rgba(0, 208, 132, 0.16);  color: var(--pt-vert-t); }
.ic-ambre  { background: rgba(255, 107, 43, 0.14); color: var(--pt-ambre-t); }
.ic-indigo { background: rgba(99, 102, 241, 0.16); color: var(--pt-indigo-t); }

/* ══ LE SCHÉMA DES 168 HEURES ════════════════════════════════════════════

   Sept rangs de vingt-quatre cases : une semaine, heure par heure. Les
   quarante cases pleines sont les heures d'ouverture d'une TPE, les cent
   vingt-huit autres sont celles où personne ne décroche. Rien d'estimé —
   168 est le nombre d'heures d'une semaine, 40 la durée légale du travail. */

.pt-semaine {
  background: var(--pt-face); border-radius: 20px; box-shadow: var(--neu-2);
  padding: clamp(18px, 2.4vw, 28px); margin: 0;
}
.pt-semaine-titre {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--pt-ink-2); margin-bottom: 16px;
}
/* L'échelle est calée sur la colonne des heures : 30 px de libellé de jour
   plus les 8 px de gouttière. Les bornes extrêmes rentrent d'elles-mêmes,
   les intermédiaires sont centrées sur leur heure. */
.pt-semaine-echelle {
  display: flex; justify-content: space-between;
  margin: 0 0 7px 38px;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px; color: var(--pt-ink-2);
}
.pt-semaine-grille { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; align-items: center; }
.pt-semaine-jour { font-size: 10.5px; font-weight: 800; color: var(--pt-ink-2); text-transform: uppercase; letter-spacing: 0.06em; }
.pt-semaine-heures { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; }
.pt-h {
  aspect-ratio: 1; border-radius: 2px;
  background: var(--pt-creux); box-shadow: inset 0 0 0 1px rgba(163, 177, 198, 0.2);
}
.pt-h.est-ouverte { background: var(--pt-bleu-t); box-shadow: none; }
.pt-semaine-legende {
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--pt-trait);
  font-size: 12px; font-weight: 600; color: var(--pt-ink-2);
}
.pt-semaine-legende span { display: inline-flex; align-items: center; gap: 8px; }
.pt-semaine-legende i { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.pt-semaine-legende i.pleine { background: var(--pt-bleu-t); }
.pt-semaine-legende i.vide { background: var(--pt-creux); box-shadow: inset 0 0 0 1px rgba(163, 177, 198, 0.3); }

/* La grille de remise chiffrée et sa projection à quatre paliers ont été
   retirées de la page : aucun pourcentage n'est public, le tarif partenaire
   se fixe au cas par cas. Leurs styles (.pt-table, .pt-taux, .pt-scroll,
   .pt-proj, .pt-calcul, .pt-volet) sont partis avec elles — 112 lignes que
   plus aucune balise n'appelait.

/* ══ LES LISTES ══════════════════════════════════════════════════════════ */

.pt-liste { list-style: none; margin: 0; padding: 0; }
.pt-liste li {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 13px;
  align-items: start; padding: 12px 0;
  font-size: 14.2px; line-height: 1.65; color: var(--pt-ink-2);
}
.pt-liste li + li { border-top: 1px solid var(--pt-trait); }
.pt-liste li strong { color: var(--pt-ink); font-weight: 700; }
.pt-liste svg { width: 17px; height: 17px; margin-top: 2px; flex: none; }

/* Le panneau est une colonne : sa ligne de clôture est collée au bas, de
   sorte que deux panneaux qui se répondent finissent au même endroit même si
   leurs listes ne se replient pas de la même façon. Sans ce collage, la
   colonne de gauche s'arrêtait trente-quatre pixels au-dessus de l'autre. */
.pt-panneau {
  background: var(--pt-face); border-radius: 20px; box-shadow: var(--neu-2);
  padding: clamp(22px, 2.8vw, 32px);
  display: flex; flex-direction: column;
}
.pt-panneau > .pt-panneau-pied { margin-top: auto; }
.pt-panneau-tete { margin-bottom: 10px; }
.pt-panneau-tete .pt-oeil { margin-bottom: 10px; }
.pt-panneau-tete .pt-h3 { margin-bottom: 0; }
.pt-panneau-tete p { font-size: 12.5px; color: var(--pt-ink-2); margin: 5px 0 0; }
.pt-panneau-pied {
  font-size: 12.5px; line-height: 1.6; color: var(--pt-ink-2);
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--pt-trait);
}

/* Il y avait ici un panneau collant, posé à gauche des cinq étapes. Il se
   figeait en haut de sa colonne dès le premier écran et laissait, sous lui,
   un vide de plusieurs centaines de pixels pendant tout le reste du
   défilement — un vide qu'aucun contenu n'aurait pu combler, puisqu'il
   naissait de l'écart de hauteur entre une liste de quatre points et un rail
   de cinq étapes. Le panneau est descendu sous le rail, en bande pleine
   largeur, et le collage a disparu avec la colonne qui le portait.

   La bande « Ce qu'il faut préparer » : quatre points, deux rangs de deux. */
.pt-prepa { margin-top: clamp(26px, 3.4vw, 44px); }
.pt-liste--duo {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(20px, 3vw, 44px);
}
/* Le filet horizontal de la liste ne survit pas à deux colonnes : il
   soulignerait le premier point de chaque rang sans raison. En grille, c'est
   la colonne de droite qui porte un filet vertical. */
.pt-liste--duo li + li { border-top: 0; }
.pt-liste--duo li { border-top: 1px solid var(--pt-trait); }
.pt-liste--duo li:nth-child(1), .pt-liste--duo li:nth-child(2) { border-top: 0; padding-top: 4px; }
@media (max-width: 760px) {
  .pt-liste--duo { grid-template-columns: minmax(0, 1fr); }
  .pt-liste--duo li:nth-child(2) { border-top: 1px solid var(--pt-trait); padding-top: 12px; }
}

/* Les deux colonnes de l'échange : deux, puis une. Elles se répondent —
   ce qu'on attend / ce qu'on apporte — donc elles ne se séparent jamais en
   deux rangs inégaux. */
.pt-echange { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); }
@media (max-width: 900px) { .pt-echange { grid-template-columns: minmax(0, 1fr); } }

/* ══ LE RAIL DES ÉTAPES ══════════════════════════════════════════════════ */

.pt-rail { display: grid; gap: 0; }
.pt-pas {
  display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: clamp(18px, 2.4vw, 28px);
  padding-bottom: clamp(26px, 3.4vw, 40px); position: relative;
}
.pt-pas:last-child { padding-bottom: 0; }
.pt-pas::before {
  content: ''; position: absolute; left: 28px; top: 64px; bottom: 6px; width: 2px;
  background: var(--pt-trait); border-radius: 2px;
}
.pt-pas:last-child::before { display: none; }
.pt-pas-n {
  width: 58px; height: 58px; border-radius: 18px; position: relative; z-index: 1;
  display: grid; place-items: center;
  font-size: 20px; font-weight: 800; letter-spacing: -0.04em;
  background: var(--pt-face); box-shadow: var(--neu-2); color: var(--pt-ink);
  transition: box-shadow 0.3s var(--pt-ease), transform 0.3s var(--pt-ease), color 0.3s var(--pt-ease);
}
.pt-pas:hover .pt-pas-n {
  box-shadow: var(--neu-lift); transform: translateY(-2px); color: var(--pt-bleu-f);
}
.pt-pas-corps { padding-top: 5px; min-width: 0; }
.pt-pas-corps p { font-size: 14.4px; line-height: 1.7; color: var(--pt-ink-2); margin: 0 0 10px; }
.pt-pas-corps p:last-child { margin-bottom: 0; }
.pt-delai {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
  padding: 5px 12px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
  background: rgba(6, 143, 255, 0.13); color: var(--pt-bleu-f);
}
@media (max-width: 640px) {
  .pt-pas { grid-template-columns: 46px minmax(0, 1fr); gap: 16px; }
  .pt-pas-n { width: 46px; height: 46px; border-radius: 15px; font-size: 17px; }
  .pt-pas::before { left: 22px; top: 52px; }
}

/* ══ LA FRANCHISE ════════════════════════════════════════════════════════ */

/* Deux rangs de deux, pas trois puis un seul. En auto-fit, la quatrième
   carte restait seule au bout de la grille — un rang orphelin se remarque
   plus qu'une colonne un peu large. */
.pt-franchise { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .pt-franchise { grid-template-columns: minmax(0, 1fr); } }
.pt-franchise article {
  background: var(--pt-face); border-radius: 18px; box-shadow: var(--neu-2);
  padding: clamp(20px, 2.4vw, 26px);
  transition: transform 0.3s var(--pt-ease), box-shadow 0.3s var(--pt-ease);
}
.pt-franchise article:hover { transform: translateY(-3px); box-shadow: var(--neu-lift); }
.pt-franchise h3 {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 11px; align-items: start;
  font-size: 15.5px; font-weight: 800; letter-spacing: -0.022em; color: var(--pt-ink); margin: 0 0 11px;
}
.pt-franchise h3 svg { width: 21px; height: 21px; color: #FF6B2B; margin-top: 1px; }
.pt-franchise p { font-size: 14px; line-height: 1.68; color: var(--pt-ink-2); margin: 0; }

/* ══ LES CARTES DE CONTACT ═══════════════════════════════════════════════ */

/* Trois cartes : trois colonnes, puis une seule. Trois ne se divise pas en
   deux — 2 + 1 laisserait la troisième seule sur son rang. */
.pt-contacts { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .pt-contacts { grid-template-columns: minmax(0, 1fr); } }
.pt-contact {
  display: flex; align-items: center; gap: 15px; padding: 20px 22px;
  border-radius: 18px; background: var(--pt-face); box-shadow: var(--neu-2);
  color: var(--pt-ink); text-decoration: none;
  transition: transform 0.3s var(--pt-ease), box-shadow 0.3s var(--pt-ease);
}
.pt-contact:hover { transform: translateY(-3px); box-shadow: var(--neu-lift); color: var(--pt-ink); }
.pt-contact-ic {
  width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex: none;
  box-shadow: var(--neu-in-1); transition: box-shadow 0.3s var(--pt-ease);
}
.pt-contact:hover .pt-contact-ic { box-shadow: var(--neu-1); }
.pt-contact-ic svg { width: 21px; height: 21px; }
.pt-contact-l { font-size: 10.5px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--pt-ink-2); }
.pt-contact-v { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; margin-top: 3px; word-break: break-word; }

/* ══ LA FAQ ══════════════════════════════════════════════════════════════

   Aucune classe nouvelle : `details.faq-item-modern > summary.faq-head`
   existe dans public/style.css et fonctionne déjà partout. Ce qui suit ne
   fait que poser l'espacement de la colonne et resserrer le corps. */

.pt-faq { display: flex; flex-direction: column; gap: 9px; }
.pt-faq .faq-body-inner p { font-size: 14.5px; line-height: 1.72; color: var(--pt-ink-2); margin: 0; }
.pt-faq .faq-body-inner p + p { margin-top: 12px; }
.pt-faq .faq-body-inner strong { color: var(--pt-ink); font-weight: 700; }
/* La ligne de rattrapage sous la FAQ est une rangée de liens de fin de
   page : comme la FAQ qu'elle prolonge, elle reste alignée à gauche. */
.pt-apres-faq {
  margin: 26px 0 0;
  font-size: 14px; color: var(--pt-ink-2);
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
}

/* ══ LE MOUVEMENT ════════════════════════════════════════════════════════

   Trois animations, pas une de plus, et chacune démontre quelque chose.

   Aucune ne part de l'invisible : une image 0 à `opacity: 0` disparaît pour
   de bon dès qu'un onglet est masqué au chargement, parce que la timeline du
   document y est gelée et qu'un `fill-mode: both` reste sur sa première
   image. Toutes partent donc d'un état déjà lisible. */

/* Les quarante heures ouvrées se posent dans l'ordre de la semaine : c'est
   la même lecture que l'œil ferait tout seul, en un peu plus lent. Le retard
   suit la colonne (l'heure), pas la case, pour que les sept jours s'allument
   ensemble à 9 h puis ensemble à 18 h. */
.pt-h.est-ouverte { animation: pt-pose 0.5s var(--pt-ease) both; }
.pt-semaine-heures i:nth-child(10) { animation-delay: 0.10s; }
.pt-semaine-heures i:nth-child(11) { animation-delay: 0.16s; }
.pt-semaine-heures i:nth-child(12) { animation-delay: 0.22s; }
.pt-semaine-heures i:nth-child(13) { animation-delay: 0.28s; }
.pt-semaine-heures i:nth-child(15) { animation-delay: 0.34s; }
.pt-semaine-heures i:nth-child(16) { animation-delay: 0.40s; }
.pt-semaine-heures i:nth-child(17) { animation-delay: 0.46s; }
.pt-semaine-heures i:nth-child(18) { animation-delay: 0.52s; }
@keyframes pt-pose {
  from { opacity: 0.45; transform: scale(0.55); }
  to   { opacity: 1; transform: scale(1); }
}

/* La jauge de consommation se remplit : une jauge posée pleine ne dit pas
   qu'elle mesure quelque chose. L'origine est à gauche, comme la lecture. */
.pt-jauge i { transform-origin: left center; animation: pt-remplit 0.85s var(--pt-ease) both; }
@keyframes pt-remplit {
  from { transform: scaleX(0.08); }
  to   { transform: scaleX(1); }
}

/* Le point de « Propulsé par Sylen » bat lentement. C'est la seule marque
   qui reste à Sylen dans le portail d'un revendeur ; elle respire, elle ne
   clignote pas. */
.pt-propulse i { animation: pt-bat 3.4s var(--pt-ease) infinite; }
@keyframes pt-bat {
  0%, 78%, 100% { opacity: 0.55; transform: scale(1); }
  22%           { opacity: 1; transform: scale(1.45); }
}

/* ══ MOUVEMENT RÉDUIT ════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .pt-btn, .pt-btn2, .pt-carte, .pt-contact, .pt-lien, .pt-client,
  .pt-points li, .pt-cle > div, .pt-franchise article,
  .pt-carte-ic, .pt-contact-ic, .pt-pas-n { transition: none; }
  .pt-btn:hover, .pt-btn2:hover, .pt-carte:hover, .pt-contact:hover,
  .pt-points li:hover, .pt-cle > div:hover, .pt-franchise article:hover,
  .pt-carte:hover .pt-carte-ic, .pt-pas:hover .pt-pas-n { transform: none; }
  .pt-h.est-ouverte, .pt-jauge i, .pt-propulse i { animation: none; }
  .pt-h.est-ouverte { opacity: 1; transform: none; }
  .pt-jauge i { transform: none; }
  .pt-propulse i { opacity: 1; }
}