/* ===========================================================================
   LA PAGE DES BONS PLANS, refaite le 20 septembre 2026

   POURQUOI ELLE A ETE REFAITE, et ce n'est pas qu'une affaire de gout.
   Joris : « la page bons plans n'est pas optimisée du tout, et faire comme
   les partenaires je trouve pas que c'est intéressant ».

   Il avait raison, et le compte le dit : la page portait NEUF cartes de
   meme poids dont SEPT ne menaient nulle part, et cinq repetaient mot pour
   mot la meme phrase d'attente. Deux liens seulement sortaient vraiment.
   La grille en cartes marche a vingt sept offres, comme sur /partenaires ;
   a deux, elle noie les deux.

   CE QUI REMPLACE LA GRILLE : un PARCOURS, demande par Joris le meme jour,
   « un systeme qui permet de les mettre en valeur, avec un business par
   exemple qui combinerait deux ou trois bons plans ». Les deux offres
   ouvertes tiennent ensuite chacune sa pleine largeur, et les marques en
   attente tiennent en une ligne.

   LA GRAMMAIRE EST CELLE DU SITE DEPUIS CE JOUR : une ouverture sur
   l'encre, des bandes pleine largeur qui alternent papier et creux, des
   angles courts, des matieres qui ne portent aucune information, et
   beaucoup de vide vertical. Voir assets/css/pages/accueil.css, dont cette
   feuille reprend les regles sans les recopier autrement.
   =========================================================================== */

.bp-main { padding-top: 0; }

/* La largeur de lecture. Chaque bande la repose elle meme, parce qu'elles
   sortent toutes de la coquille pour tenir leur fond sur toute la
   largeur. */
.bp-dedans {
  width: min(100%, 1180px);
  margin: 0 auto;
  padding: 0 16px;
}

.bp-dedans--pied { padding-bottom: var(--pas-4); }

/* ---------------------------------------------------------------------------
   L'OUVERTURE
   --------------------------------------------------------------------------- */
.bp-ouverture {
  /* Les valeurs de la NUIT, ecrites en dur, comme sur l'accueil : ce bloc
     ne suit pas le theme de la page, il est sombre dans les deux modes.
     La lumiere vient d'en haut a gauche, meme source partout. */
  background:
    radial-gradient(90% 70% at 18% 0%,
                    rgba(255, 255, 255, .10) 0%,
                    rgba(255, 255, 255, .03) 38%,
                    transparent 68%),
    linear-gradient(180deg, #0d1a15 0%, #08100e 62%),
    /* LE FOND PLEIN, DERNIERE COUCHE DU RACCOURCI. Ecrit sur une ligne
       « background-color » a part, il etait efface par le raccourci qui
       suivait : un raccourci remet TOUTES les proprietes de fond a leur
       valeur par defaut. Meme piege que « background: none » sur les
       bandes de l'accueil, le meme jour.

       IL SERT DEUX FOIS. Un navigateur qui ne saurait pas lire les
       degrades garde une bande sombre lisible au lieu d'une bande
       transparente, comme les boutons de base.css. Et un outil qui
       remonte les parents pour savoir sur quoi un texte est pose trouve
       enfin une couleur : sans elle, ops/loupe.mjs traversait la bande
       et annoncait 1,02 pour 1 sur des titres blancs tres lisibles. */
    #08100e;
  color: #f5f7f6;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  padding: calc(74px + var(--pas-5)) 16px var(--pas-5);
  text-align: center;
}

.bp-surtitre {
  margin: 0;
    /* 14 px, LE PLANCHER DU SITE. Ces etiquettes etaient a 12,5 et 13 px
     quand cette feuille a ete ecrite, et ops/loupe.mjs les a trouvees le
     jour meme. Le site avait deja fait ce menage le 16 septembre 2026 :
     « plus rien n'est sous 14 px sur les pages publiques ». Une feuille
     neuve n'en est pas dispensee. L'espacement des lettres se resserre
     en proportion, comme sur les etiquettes du catalogue. */
  font-size: 14px;
  letter-spacing: .17em;
  text-transform: uppercase;
  font-weight: 600;
  color: #6ceba3;
}

.bp-ouverture h1 {
  margin: 14px 0 0;
  font-family: var(--ff-titre);
  font-size: clamp(32px, 1.3rem + 2.2vw, 52px);
  font-weight: 800;
  letter-spacing: var(--ls-grand);
  line-height: 1.06;
  color: #f5f7f6;
  text-wrap: balance;
}

.bp-chapeau {
  margin: 18px auto 0;
  max-width: 34em;
  font-size: clamp(16.5px, .95rem + .4vw, 19px);
  color: #c6cfcb;
}

/* LE PACTE. Deux phrases tenues par un filet, sous le titre, dans le
   premier ecran. Il vivait dans un encadre gris pose a droite : une
   remuneration annoncee en petit en bas de page se lit comme une chose
   qu'on cachait, dite ici elle ne coute rien. */
.bp-pacte {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 860px;
  margin: var(--pas-4) auto 0;
  border: 1px solid rgba(190, 211, 201, .22);
  border-radius: var(--angle);
  text-align: left;
}

.bp-pacte > div {
  padding: 20px 24px;
  border-left: 1px solid rgba(190, 211, 201, .22);
}

.bp-pacte > div:first-child { border-left: 0; }

.bp-pacte b {
  display: block;
  margin-bottom: 5px;
  font-size: 16px;
  font-weight: 600;
  color: #f5f7f6;
}

.bp-pacte p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: #b6c1bc;
}

.bp-lien-retour {
  /* 44 px de haut : c'est un lien isole sous l'ouverture, donc une zone
     qu'on vise au doigt, et il en mesurait 29. Trouve par ops/loupe.mjs
     le 20 septembre 2026. */
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  margin-top: var(--pas-3);
  color: #6ceba3;
  font-size: 15.5px;
  text-decoration: none;
  border-bottom: 1px solid rgba(108, 235, 163, .4);
}

.bp-lien-retour:hover,
.bp-lien-retour:focus-visible { border-bottom-color: #6ceba3; }

/* ---------------------------------------------------------------------------
   LES BANDES ET LEURS EN-TETES
   --------------------------------------------------------------------------- */
.bp-bloc { padding: var(--pas-6) 0; }
.bp-bloc--creux { background-color: var(--surface-2); }

.bp-tete {
  text-align: center;
  /* En pixels et pas en « ch » : l'unite se calcule sur la police du
     conteneur, 17 px ici, pas sur celle du titre. 44ch y valaient 374 px
     et coupaient chaque titre en trois lignes. Paye sur l'accueil le
     meme jour. */
  max-width: 700px;
  margin: 0 auto var(--pas-5);
}

.bp-sus {
  margin: 0 0 14px;
    /* 14 px, LE PLANCHER DU SITE. Ces etiquettes etaient a 12,5 et 13 px
     quand cette feuille a ete ecrite, et ops/loupe.mjs les a trouvees le
     jour meme. Le site avait deja fait ce menage le 16 septembre 2026 :
     « plus rien n'est sous 14 px sur les pages publiques ». Une feuille
     neuve n'en est pas dispensee. L'espacement des lettres se resserre
     en proportion, comme sur les etiquettes du catalogue. */
  font-size: 14px;
  letter-spacing: .17em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--faint);
}

.bp-tete h2 {
  margin: 0;
  font-family: var(--ff-titre);
  font-size: clamp(26px, 1.2rem + 1.4vw, 38px);
  font-weight: 700;
  letter-spacing: var(--ls-titre);
  line-height: 1.08;
  text-wrap: balance;
}

.bp-tete p {
  max-width: 58ch;
  margin: 15px auto 0;
  color: var(--muted);
}

/* ---------------------------------------------------------------------------
   LE PARCOURS
   --------------------------------------------------------------------------- */
.bp-rail {
  position: relative;
  max-width: 700px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  text-align: left;
}

.bp-jalon {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  padding-bottom: var(--pas-4);
}

.bp-jalon:last-child { padding-bottom: 0; }

/* LE FIL EST PORTE PAR CHAQUE ETAPE SAUF LA DERNIERE, donc il va toujours
   d'une pastille a la suivante. Ecrit une fois sur le rail avec une
   hauteur en dur, il depassait sous la derniere pastille des que le texte
   changeait de longueur, et un fil qui depasse promet une etape qui
   n'existe pas. */
.bp-jalon:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 46px;
  bottom: -2px;
  width: 2px;
  background: linear-gradient(180deg, var(--accent-line), var(--line));
}

.bp-numero {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--ff-titre);
  font-weight: 700;
  font-size: 16px;
  /* Le liseré de la couleur du fond decoupe la pastille dans le fil :
     sans lui, le trait passe derriere et se voit en transparence. */
  border: 3px solid var(--surface-2);
  box-shadow: 0 0 0 1px var(--accent-line);
}

.bp-jalon--attente .bp-numero {
  background: var(--surface);
  color: var(--faint);
  box-shadow: 0 0 0 1px var(--line);
}

.bp-carte-jalon {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--angle);
  padding: 20px 22px;
}

/* Une etape qui n'est pas ouverte n'est pas une carte pleine : le trait
   discontinu dit « prevue », ce qu'un fond plein ne dirait pas. */
.bp-jalon--attente .bp-carte-jalon {
  background: transparent;
  border-style: dashed;
}

.bp-role {
  margin: 0;
    /* 14 px, LE PLANCHER DU SITE. Ces etiquettes etaient a 12,5 et 13 px
     quand cette feuille a ete ecrite, et ops/loupe.mjs les a trouvees le
     jour meme. Le site avait deja fait ce menage le 16 septembre 2026 :
     « plus rien n'est sous 14 px sur les pages publiques ». Une feuille
     neuve n'en est pas dispensee. L'espacement des lettres se resserre
     en proportion, comme sur les etiquettes du catalogue. */
  font-size: 14px;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--faint);
}

.bp-jalon-tete {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 9px;
}

.bp-jalon-tete img {
  width: 34px;
  height: 34px;
  border-radius: var(--angle-objet);
  flex: 0 0 auto;
}

.bp-jalon-tete h3 {
  margin: 0;
  font-family: var(--ff-titre);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.015em;
}

.bp-jalon-gain {
  margin: 11px 0 0;
  font-family: var(--ff-titre);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--accent-ink);
}

.bp-jalon--attente .bp-jalon-gain { color: var(--muted); }

.bp-jalon-dit {
  margin: 7px 0 0;
  font-size: 15.5px;
  color: var(--muted);
}

.bp-bientot {
  display: inline-block;
  margin-top: 13px;
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: var(--angle-pilule);
    /* 14 px, LE PLANCHER DU SITE. Ces etiquettes etaient a 12,5 et 13 px
     quand cette feuille a ete ecrite, et ops/loupe.mjs les a trouvees le
     jour meme. Le site avait deja fait ce menage le 16 septembre 2026 :
     « plus rien n'est sous 14 px sur les pages publiques ». Une feuille
     neuve n'en est pas dispensee. L'espacement des lettres se resserre
     en proportion, comme sur les etiquettes du catalogue. */
  font-size: 14px;
  letter-spacing: .13em;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
}

/* La pastille a initiale, pour une marque dont le logo n'est pas au
   depot. C'est ce que le catalogue affiche deja dans ce cas, et c'est un
   etat honnete plutot qu'un trou. */
.bp-pastille-logo {
  width: 34px;
  height: 34px;
  border-radius: var(--angle-objet);
  background: var(--accent-wash);
  border: 1px solid var(--accent-line);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  font-family: var(--ff-titre);
  font-weight: 800;
  font-size: 15px;
  flex: 0 0 auto;
}

.bp-pastille-logo--grand {
  width: 52px;
  height: 52px;
  font-size: 22px;
}

/* ---------------------------------------------------------------------------
   UNE OFFRE OUVERTE
   --------------------------------------------------------------------------- */
.bp-offre {
  padding: var(--pas-6) 0;
  border-top: 1px solid var(--line);
}

.bp-dedans--duo {
  display: grid;
  grid-template-columns: 1fr 372px;
  gap: var(--pas-5);
  align-items: start;
}

.bp-etape-de {
  margin: 0 0 16px;
    /* 14 px, LE PLANCHER DU SITE. Ces etiquettes etaient a 12,5 et 13 px
     quand cette feuille a ete ecrite, et ops/loupe.mjs les a trouvees le
     jour meme. Le site avait deja fait ce menage le 16 septembre 2026 :
     « plus rien n'est sous 14 px sur les pages publiques ». Une feuille
     neuve n'en est pas dispensee. L'espacement des lettres se resserre
     en proportion, comme sur les etiquettes du catalogue. */
  font-size: 14px;
  letter-spacing: .17em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--faint);
}

.bp-identite {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: var(--pas-3);
}

.bp-identite img {
  width: 52px;
  height: 52px;
  border-radius: var(--angle-objet);
  flex: 0 0 auto;
}

.bp-identite h2 {
  margin: 0;
  font-family: var(--ff-titre);
  font-size: clamp(24px, 1.2rem + .9vw, 30px);
  font-weight: 700;
  letter-spacing: var(--ls-titre);
}

.bp-categorie {
  margin: 3px 0 0;
    /* 14 px, LE PLANCHER DU SITE. Ces etiquettes etaient a 12,5 et 13 px
     quand cette feuille a ete ecrite, et ops/loupe.mjs les a trouvees le
     jour meme. Le site avait deja fait ce menage le 16 septembre 2026 :
     « plus rien n'est sous 14 px sur les pages publiques ». Une feuille
     neuve n'en est pas dispensee. L'espacement des lettres se resserre
     en proportion, comme sur les etiquettes du catalogue. */
  font-size: 14px;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--faint);
}

.bp-offre-corps p { color: var(--muted); }
.bp-offre-corps p + p { margin-top: 15px; }

/* L'AVERTISSEMENT QUI ENVOIE AILLEURS. Il reste, il ne crie plus : un
   filet ambre a gauche et un fond tres leger, au lieu d'un encadre plein
   qui concurrencait le montant. Son texte, lui, ne bouge pas d'un mot :
   c'est lui qui evite a un debutant de perdre 50 EUR. */
.bp-mieux {
  margin-top: var(--pas-3);
  padding: 18px 22px;
  border-left: 3px solid var(--warn);
  border-radius: 0 var(--angle) var(--angle) 0;
  background: var(--warn-wash);
}

.bp-mieux b {
  display: block;
  margin-bottom: 5px;
  font-size: 16px;
  color: var(--text);
}

.bp-mieux span {
  font-size: 15.5px;
  color: var(--muted);
}

/* L'avertissement de risque garde sa forme a lui, rouge, pour qu'on ne
   confonde jamais « il y a mieux ailleurs » avec « vous pouvez perdre de
   l'argent ». */
.bp-risque {
  margin-top: var(--pas-3);
  padding: 18px 22px;
  border-left: 3px solid var(--danger);
  border-radius: 0 var(--angle) var(--angle) 0;
  background: var(--danger-wash);
  font-size: 15.5px;
  color: var(--muted);
}

.bp-risque strong { display: block; margin-bottom: 5px; color: var(--text); }

/* LA CARTE D'ACTION. Collante au dela de 920 px : le bouton reste sous
   les yeux pendant toute la lecture. Deux conditions pour que ca tienne,
   payees sur les pages de marque le 23 aout 2026 : « align-self:start »,
   et la regle « position:sticky » APRES celle qui donne un position au
   bloc, sinon elle est ecrasee en silence. */
.bp-carte-action {
  align-self: start;
  position: sticky;
  top: calc(74px + 16px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--angle);
  padding: 26px;
  box-shadow: var(--shadow-sm);
}

.bp-etat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: var(--angle-pilule);
  border: 1px solid var(--line);
    /* 14 px, LE PLANCHER DU SITE. Ces etiquettes etaient a 12,5 et 13 px
     quand cette feuille a ete ecrite, et ops/loupe.mjs les a trouvees le
     jour meme. Le site avait deja fait ce menage le 16 septembre 2026 :
     « plus rien n'est sous 14 px sur les pages publiques ». Une feuille
     neuve n'en est pas dispensee. L'espacement des lettres se resserre
     en proportion, comme sur les etiquettes du catalogue. */
  font-size: 14px;
  letter-spacing: .13em;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
}

.bp-etat--ouvert {
  color: var(--accent-ink);
  background: var(--accent-wash);
  border-color: var(--accent-line);
}

.bp-etat--ouvert::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.bp-gain {
  margin: 16px 0 0;
  font-family: var(--ff-titre);
  font-size: 38px;
  font-weight: 800;
  letter-spacing: var(--ls-grand);
  line-height: 1.02;
  color: var(--accent-ink);
}

/* Un gain ecrit en mots est plus long qu'un montant : il descend d'un
   cran pour ne pas se couper. La taille suit la longueur, comme sur les
   pages de marque. */
.bp-gain--moyen { font-size: 31px; }

.bp-gain-quoi {
  margin: 11px 0 0;
  font-size: 15.5px;
  color: var(--muted);
}

.bp-source {
  margin: 17px 0 0;
  padding-top: 15px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.5;
  color: var(--faint);
}

/* ---------------------------------------------------------------------------
   LES BOUTONS
   --------------------------------------------------------------------------- */
.bp-bouton {
  display: block;
  margin-top: var(--pas-3);
  padding: 15px 22px;
  border-radius: var(--angle);
  border: 1px solid var(--matiere-line);
  /* « --matiere-fond » ET PAS « --matiere », et l'ecart est exactement
     ce que Joris a vu : « attention a l'effet des boutons, faire
     exactement comme joris-dce.fr ».

     --matiere porte DEUX couches, le metal et une bande claire en
     travers. Immobile, cette bande se lit comme un trait, pas comme un
     reflet, et d'autant plus sur un bouton etroit. C'est pour ca que
     tokens.css a un second jeton, --matiere-fond, le metal seul : « ce
     que porte un bouton au repos ». Le reflet, lui, est un element a
     part pose par base.css, et il ne traverse qu'AU SURVOL.

     C'est mot pour mot ce que fait joris-dce.fr : « il ne passe qu'une
     fois par survol, un reflet en boucle deviendrait une guirlande, et
     le mouvement est reserve au geste que la personne fait ». Le site
     l'avait deja ; c'est ma feuille qui avait pris le mauvais jeton. */
  background-color: var(--accent);
  background-image: var(--matiere-fond);
  color: var(--on-accent);
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  min-height: var(--tap);
}

.bp-bouton--petit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
  padding: 12px 18px;
  font-size: 15px;
  /* PAS DE SEVE SUR CE BOUTON LA, et c'est la charte qui le dit : le
     degrade est reserve au bouton PRINCIPAL et au montant le plus
     genereux, « aucune surface neuve ne devient verte, le budget de la
     charte ne bouge pas ». Un bouton d'etape est secondaire, le vrai
     geste de la page est plus bas, dans la carte d'action.

     Et il y avait une raison visuelle en plus : le reflet du metal
     traverse le bouton en diagonale, ce qui se lit comme une lumiere
     sur une surface large et comme une rayure sur une surface etroite.
     Vu sur la capture du 20 septembre 2026. */
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: none;
}

.bp-bouton2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 22px;
  border-radius: var(--angle);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  min-height: var(--tap);
}

/* ---------------------------------------------------------------------------
   LES MARQUES EN ATTENTE
   --------------------------------------------------------------------------- */
.bp-attente {
  background-color: var(--surface-2);
  padding: var(--pas-5) 0;
  text-align: center;
}

.bp-attente h2 {
  margin: 0;
  font-family: var(--ff-titre);
  font-size: clamp(22px, 1.1rem + .8vw, 26px);
  font-weight: 700;
  letter-spacing: var(--ls-titre);
}

.bp-attente > .bp-dedans > p {
  max-width: 44em;
  margin: 12px auto 0;
  color: var(--muted);
}

.bp-rang {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: var(--pas-4) 0 0;
  padding: 0;
  list-style: none;
}

.bp-puce {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px 7px 8px;
  border: 1px solid var(--line);
  border-radius: var(--angle-pilule);
  background: var(--surface);
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
}

.bp-puce img {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  flex: 0 0 auto;
}

.bp-puce .bp-pastille-logo {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  /* 13 px, ET C'EST LA SEULE EXCEPTION AU PLANCHER DE CETTE FEUILLE.
     Cette initiale n'est pas du texte a lire, c'est un logo de
     remplacement : elle tient la place d'une image de marque. A 14 px
     elle toucherait les bords de sa pastille de 26. La loupe ne la
     signale pas non plus, elle ne compte que les textes d'au moins
     deux signes. Ne pas la « corriger ». */
  font-size: 13px;
}

.bp-note {
  margin: var(--pas-3) 0 0;
  font-size: 14px;
  color: var(--faint);
}

/* ---------------------------------------------------------------------------
   LA REGLE
   --------------------------------------------------------------------------- */
.bp-regle {
  padding: var(--pas-6) 0;
  text-align: center;
}

.bp-regle h2 {
  margin: 0;
  font-family: var(--ff-titre);
  font-size: clamp(24px, 1.15rem + 1.1vw, 31px);
  font-weight: 700;
  letter-spacing: var(--ls-titre);
}

.bp-regle p {
  max-width: 40em;
  margin: 16px auto 0;
  color: var(--muted);
}

.bp-gestes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 13px;
  margin-top: var(--pas-4);
}

.bp-gestes .bp-bouton { display: inline-flex; align-items: center; justify-content: center; margin-top: 0; }

/* ---------------------------------------------------------------------------
   LE TELEPHONE. Tout est centre, sauf ce qui se lit comme une liste ou un
   avertissement : le rail des etapes et les deux encadres gardent leur
   bord gauche, l'oeil ayant besoin d'un bord pour retrouver sa ligne.
   La regle generale vit dans responsive.css, ici seules les mises en
   page changent.
   --------------------------------------------------------------------------- */
@media (max-width: 920px) {
  .bp-ouverture { padding: calc(74px + var(--pas-4)) 16px var(--pas-4); }
  .bp-pacte { grid-template-columns: 1fr; }
  .bp-pacte > div { border-left: 0; border-top: 1px solid rgba(190, 211, 201, .22); }
  .bp-pacte > div:first-child { border-top: 0; }

  .bp-bloc,
  .bp-offre,
  .bp-regle { padding: var(--pas-5) 0; }

  /* L'ordre du document est celui du telephone : le corps d'abord, la
     carte d'action ensuite. Elle cesse d'etre collante, sinon elle
     recouvrirait le texte sur un petit ecran. */
  .bp-dedans--duo { grid-template-columns: 1fr; gap: var(--pas-4); }
  .bp-carte-action { position: static; }
  .bp-identite { justify-content: center; }

  /* ===============================================================
     LE PARCOURS PREND TOUTE LA LARGEUR, le 20 septembre 2026
     ---------------------------------------------------------------
     Joris : « sur telephone c'est moins adapte je trouve, ameliore ».

     LA MESURE DIT OU CA COINCE. A 390 px, largeur du telephone le plus
     courant, la page offre 358 px utiles. Le rail prenait 44 px de
     pastille plus 18 de gouttiere, donc la carte d'une etape tombait a
     296 px quand les autres cartes de la page en font 358. Dix huit
     pour cent de la largeur partaient dans une colonne vide.

     CE QUI REMPLACE LE RAIL : le numero passe DANS la carte, sur la
     ligne du role. « 1 · SE FORMER » se lit aussi bien qu'une pastille
     posee a cote, et la suite des numeros suffit a dire que c'est un
     ordre. Le fil vertical disparait avec la colonne : il reliait deux
     pastilles qui n'existent plus.

     SUR ORDINATEUR RIEN NE CHANGE. Le rail y a la place, et il montre
     le chemin mieux qu'une suite de numeros. C'est la meme idee que
     l'ouverture, qui change de mise en page sans changer de contenu.
     =============================================================== */
  .bp-jalon { grid-template-columns: 1fr; gap: 0; }
  .bp-jalon:not(:last-child)::before { display: none; }

  .bp-numero {
    /* Il sort du flux de la grille et rejoint la ligne du role. */
    position: absolute;
    left: 22px;
    top: 18px;
    width: 26px;
    height: 26px;
    font-size: 14px;
    border-width: 0;
    box-shadow: none;
  }

  .bp-jalon--attente .bp-numero {
    background: var(--surface-2);
    box-shadow: 0 0 0 1px var(--line);
  }

  /* La place du numero, prise dans la premiere ligne de la carte. */
  .bp-role { padding-left: 36px; }
}

/* ---------------------------------------------------------------------------
   LES PAGES DE MARQUE DES BONS PLANS, le 30 septembre 2026
   ---------------------------------------------------------------------------
   Une page par offre d'affiliation, sous /bons-plans/<marque>.html. Elles
   reprennent la grammaire de la page mere (ouverture sur l'encre, corps a
   gauche, carte d'action collante a droite) et n'ajoutent que trois
   objets : le fil d'Ariane, les captures officielles, et la liste de ce
   qu'il faut savoir.

   LES CAPTURES VIENNENT DE LA MARQUE, jamais d'ailleurs : celles qu'elle
   publie sur l'App Store, relues une par une avant d'entrer. Une capture
   qui graverait un montant d'offre ou des mots anglais reste dehors.
   --------------------------------------------------------------------------- */
.bp-fil {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 0 0 var(--pas-3);
  font-size: 14px;
  color: rgba(226, 238, 232, .78);
}
/* LA ZONE QU'ON TOUCHE FAIT 44 PX, depuis l'audit du 30 septembre 2026 :
   le lien mesurait 23 px de haut, la moitie du plancher du site. C'est la
   boite qui grandit, pas le texte ; le trait passe donc de la bordure au
   soulignement, sinon il descendrait avec le bas de la boite, loin du mot. */
.bp-fil { align-items: center; }
.bp-fil a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(226, 238, 232, .35);
  text-underline-offset: 4px;
}
.bp-fil a:hover,
.bp-fil a:focus-visible { text-decoration-color: #6ceba3; }

.bp-titre-section {
  margin: var(--pas-5) 0 var(--pas-2);
  font-family: var(--ff-titre);
  font-size: clamp(21px, 1.05rem + .6vw, 25px);
  font-weight: 700;
  letter-spacing: var(--ls-titre);
  color: var(--text);
}

.bp-savoir {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
.bp-savoir li {
  position: relative;
  padding-left: 30px;
  color: var(--muted);
}
.bp-savoir li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .55em;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--accent-ink);
  border-bottom: 2px solid var(--accent-ink);
  transform: rotate(-45deg);
}

.bp-captures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bp-captures figure { margin: 0; }
.bp-captures img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--angle);
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.bp-captures figcaption {
  margin-top: 8px;
  font-size: 14px;
  color: var(--muted);
  text-align: center;
}
.bp-captures-source {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--faint);
}

/* 44 px de haut depuis le 30 septembre 2026, au lieu de 25 : meme geste
   que le fil d'Ariane, la boite grandit et le trait devient un
   soulignement pour rester colle au texte. La marge du haut baisse
   d'autant pour que le lien ne s'eloigne pas du paragraphe. */
.bp-voir-page {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  margin-top: 2px;
  font-size: 15px;
  font-weight: 600;
  color: var(--accent-ink);
  text-decoration: underline;
  text-decoration-color: var(--accent-line);
  text-underline-offset: 4px;
}
.bp-voir-page:hover,
.bp-voir-page:focus-visible { text-decoration-color: var(--accent-ink); }

@media (max-width: 920px) {
  /* Trois captures cote a cote tombaient a 107 px de large sur un
     telephone de 375 px, illisibles. Elles defilent de cote, chacune a
     une taille qui se lit, et la page elle meme ne deborde pas. */
  .bp-captures {
    grid-template-columns: repeat(3, 62%);
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
  }
  .bp-captures li { scroll-snap-align: start; }
  .bp-titre-section { text-align: center; }
}