/* ============================================================
   18/09/2026 : FEUILLE DE LA PAGE METHODE V2, AUTONOME.
   ------------------------------------------------------------
   La V2 (M32, 08/09) s appuyait sur le bloc M31 de main.css
   (rail, CRM, agenda, formation). Ce bloc n est plus dans le
   main.css en production : il est repris ici tel quel, en tete,
   pour que la page ne depende plus que de ce fichier. main.css
   n est pas touche, aucune autre page ne charge ce fichier.
   ============================================================ */

/* ============================================================
   M31, 07/09/2026. LA PAGE METHODE, SIX ETAPES
   ------------------------------------------------------------
   Refonte demandee par Jules dans le Loom du 07/09 : la page
   Methode est le NIVEAU DE DETAIL du parcours client. Une etape
   du parcours, un bloc, dans l'ordre, sans jamais redire deux
   fois la meme chose.
   Structure constante de chaque bloc : surtitre « Etape N »,
   titre repris mot pour mot du parcours, deux a trois lignes de
   texte, puis le visuel. Rien entre les blocs.
   Tous les composants ci-dessous n'existent que sur cette page :
   les retirer ne touche aucune autre page.
   Aucune marque tierce n'est dessinee : les inserts CRM, agenda
   et formation sont des maquettes maison, sans logo, sans chiffre.
   ============================================================ */

/* ---------- 1. LA GRILLE D'AUDIT (etape 1) -----------------
   Etape 1 est la seule sans visuel : Jules la veut « juste du
   texte, un peu plus de details ». Elle prend donc toute la
   largeur et se lit comme un sommaire de ce que l'on regarde. */
.aud {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
.aud__i {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: clamp(16px, 1.8vw, 22px);
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}
.aud__i:hover { border-color: var(--or-line); box-shadow: var(--sh-2); transform: translateY(-2px); }
.aud__k {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  color: var(--or-deep);
}
.aud__i b { font-size: var(--fs-base); font-weight: 900; color: var(--ink); line-height: var(--lh-snug); }
.aud__i span { font-size: var(--fs-sm); color: var(--ink-3); line-height: 1.6; }
@media (max-width: 1020px) { .aud { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .aud { grid-template-columns: 1fr; } }

/* ---------- 2. LE RAIL QUI DEFILE (etapes 2 et 3) ----------
   « Il faut qu'on les voie defiler un peu. » Defilement natif du
   navigateur, avec accroche par carte : la molette, le doigt, le
   clavier et les deux fleches font tous la meme chose, et la page
   reste lisible sans JavaScript.
   Les fleches disparaissent en bout de course. */
.rail {
  position: relative;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
.rail__track {
  display: flex;
  gap: clamp(14px, 1.8vw, 22px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  padding: 4px 4px 18px;
  margin-inline: -4px;
  /* Le rail a 4 px de rembourrage a gauche, pour ne pas rogner
     l'ombre de la premiere carte. Sans cette ligne, l'accroche se
     calerait sur le debut de la carte et le rail se reposerait a
     scrollLeft 4 : la fleche « precedent » resterait allumee au
     repos, alors que main.js l'eteint a 2 px pres. */
  scroll-padding-left: 4px;
}
.rail__track::-webkit-scrollbar { height: 6px; }
.rail__track::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--r-pill); }
.rail__track::-webkit-scrollbar-track { background: transparent; }
.rail__item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  margin: 0;
}
/* Pages : format paysage, une page et demie visible a 1440 px,
   ce qui dit sans un mot qu'il y en a d'autres derriere. */
.rail__item--lp { width: min(30rem, 78vw); }
/* Publicites : format vertical 9/16. La largeur est choisie pour
   que les cinq creas DEPASSENT la largeur du rail a 1440 px :
   sans depassement il n'y aurait rien a faire defiler, et c'est
   le defilement qui est demande. */
.rail__item--v  { width: min(17rem, 62vw); }

.rail__nav {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--sh-2);
  cursor: pointer;
  transition: opacity var(--t-base), border-color var(--t-base), background var(--t-base);
}
.rail__nav:hover { border-color: var(--or-line); background: var(--or-soft); }
.rail__nav[disabled] { opacity: 0; pointer-events: none; }
.rail__nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rail__nav--prev { left: -14px; }
.rail__nav--next { right: -14px; }
@media (max-width: 900px) { .rail__nav { display: none; } }

.rail__hint {
  margin-top: 2px;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--muted);
}

/* ---------- 3. CE QUI SORT DU PARCOURS ---------------------
   Les pastilles arbitrees le 30/08 avec Jules : elles disaient
   ce qui sort du parcours et ce que les relances ramenent. Elles
   ne vivent plus dans un schema separe, elles sont posees dans
   l'etape ou la chose se produit. Aucune information perdue,
   aucune section de plus. */
.mout {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(1.25rem, 2vw, 1.75rem);
}
.mout__c {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--line);
  background: var(--paper);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-3);
}
.mout__c svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mout__c--back { border-color: var(--or-line); background: var(--or-soft); color: var(--or-deep); }

/* ---------- 4. L'INSERT CRM (etape 4) ----------------------
   « Un peu en mode style, une petite vignette ou tu peux passer
   ta souris. » Pipeline ultra simplifie, quatre colonnes, la
   largeur du site. Maquette maison : aucun logo d'outil, aucun
   montant. Les prenoms et les villes sont fictifs, et la page le
   dit en toutes lettres sous la maquette. */
.crm {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--sh-2);
  overflow: hidden;
}
.crm__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: var(--paper-3);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-xs);
  font-weight: 900;
  letter-spacing: .04em;
  color: var(--muted-2);
}
.crm__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.crm__bar span { margin-left: 6px; }
.crm__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-2);
}
.crm__col { background: var(--paper-alt); padding: 16px 14px 20px; display: grid; gap: 10px; align-content: start; }
.crm__ct {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  font-weight: 900;
  letter-spacing: .04em;
  color: var(--ink-2);
  text-transform: uppercase;
}
.crm__ct i { width: 9px; height: 9px; border-radius: 50%; background: var(--or-light); flex: 0 0 auto; }
.crm__col--2 .crm__ct i { background: var(--or); }
.crm__col--3 .crm__ct i { background: var(--or-dark); }
.crm__col--4 .crm__ct i { background: var(--or-deep); }
.crm__card {
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px;
  display: grid;
  gap: 5px;
  transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}
.crm__card:hover,
.crm__card:focus-within {
  border-color: var(--or-line);
  box-shadow: var(--sh-2);
  transform: translateY(-2px);
  outline: none;
}
.crm__n { font-size: var(--fs-sm); font-weight: 900; color: var(--ink); }
.crm__m { font-size: var(--fs-xs); color: var(--muted); }
/* Le detail n'apparait qu'au survol ou au clavier : c'est la
   projection que Jules demande, sans alourdir la maquette. */
.crm__d {
  display: grid;
  gap: 3px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height var(--t-base), opacity var(--t-base);
  font-size: var(--fs-xs);
  color: var(--ink-3);
  line-height: 1.5;
}
.crm__card:hover .crm__d,
.crm__card:focus-within .crm__d { max-height: 8rem; opacity: 1; }
@media (max-width: 900px) { .crm__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .crm__cols { grid-template-columns: 1fr; } }

/* ---------- 5. L'ENCART CHATBOT (etape 4) ------------------
   « Bien mettre en avant la partie AI, c'est important. » Angle
   assume : la relance continue quand vous ne travaillez pas. */
.bot {
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(18px, 2.5vw, 32px);
  align-items: center;
  padding: clamp(20px, 2.6vw, 30px);
  border-radius: var(--r-lg);
  border: 1.5px solid var(--or-line);
  background: var(--or-soft);
}
.bot h3 { font-size: var(--fs-2xl); letter-spacing: -.02em; }
.bot__x > p { margin-top: 10px; color: var(--ink-2); font-size: var(--fs-base); line-height: 1.7; }
.bot__k {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--paper);
  border: 1.5px solid var(--or-line);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  color: var(--or-deep);
  margin-bottom: 12px;
}
.bot__k svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.bot__win {
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px;
  display: grid;
  gap: 10px;
  box-shadow: var(--sh-2);
}
.bot__msg {
  font-size: var(--fs-sm);
  line-height: 1.55;
  padding: 10px 13px;
  border-radius: var(--r-md);
  max-width: 88%;
}
.bot__msg--in  { background: var(--paper-3); color: var(--ink-2); border-bottom-left-radius: 4px; }
.bot__msg--out { background: var(--grad-or-soft); color: #fff; margin-left: auto; border-bottom-right-radius: 4px; }
.bot__t { font-size: 11px; color: var(--muted); letter-spacing: .04em; }
@media (max-width: 860px) { .bot { grid-template-columns: 1fr; } }

/* ---------- 6. L'INSERT AGENDA (etape 5) -------------------
   Vue semaine, creneaux places, survol pour le detail. Maquette
   maison, sans marque ni logo d'aucun editeur d'agenda. */
.agd {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--sh-2);
  overflow: hidden;
}
.agd__hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 18px;
  background: var(--paper-3);
  border-bottom: 1px solid var(--line);
}
.agd__ttl { font-size: var(--fs-sm); font-weight: 900; color: var(--ink); }
.agd__sub { font-size: var(--fs-xs); color: var(--muted); }
.agd__grid {
  display: grid;
  grid-template-columns: 3.5rem repeat(5, minmax(0, 1fr));
}
.agd__cell {
  border-right: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  min-height: 54px;
  padding: 5px;
}
.agd__h {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  color: var(--muted-2);
  text-transform: uppercase;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-alt);
}
.agd__t {
  font-size: 11px;
  color: var(--muted);
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding-right: 8px;
  background: var(--paper-alt);
}
.agd__ev {
  position: relative;
  display: grid;
  gap: 2px;
  align-content: start;
  height: 100%;
  padding: 7px 8px;
  border-radius: var(--r-sm);
  background: var(--grad-or-soft);
  color: #fff;
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.agd__ev:hover, .agd__ev:focus-visible { transform: translateY(-2px); box-shadow: var(--sh-or); outline: none; }
.agd__ev b { font-size: 11px; font-weight: 900; line-height: 1.25; }
.agd__ev span { font-size: 10px; opacity: .92; line-height: 1.25; }
.agd__ev i {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: 14rem;
  padding: 8px 11px;
  border-radius: var(--r-sm);
  background: var(--ink);
  color: #fff;
  font-size: 11px;
  font-style: normal;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base), transform var(--t-base);
  z-index: 3;
}
.agd__ev:hover i, .agd__ev:focus-visible i { opacity: 1; transform: translateX(-50%) translateY(0); }
.agd__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  background: var(--paper-alt);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.agd__foot svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: var(--or-deep); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) {
  /* Cinq jours sous 760 px donneraient des colonnes de 50 px : on
     garde les trois premiers. Les cases masquees le sont pour tout
     le monde, lecteurs d'ecran compris. */
  .agd__grid { grid-template-columns: 3rem repeat(3, minmax(0, 1fr)); }
  .agd__cell--d4, .agd__cell--d5 { display: none; }
}

/* ---------- 7. L'ESPACE DE FORMATION (bonus) ---------------
   « Un visuel un peu sympa, un peu appealing. » Maquette maison
   d'un espace de modules : aucun editeur tiers n'est represente. */
.frm {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 26px);
  align-items: start;
}
.frm__win {
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--sh-2);
  overflow: hidden;
}
.frm__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--paper-3);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-xs);
  font-weight: 900;
  letter-spacing: .04em;
  color: var(--muted-2);
}
.frm__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.frm__bar span { margin-left: 6px; }
.frm__list { display: grid; }
.frm__mod {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-2);
  transition: background var(--t-base);
}
.frm__mod:last-child { border-bottom: 0; }
.frm__mod:hover { background: var(--or-soft); }
.frm__pl {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--or-soft);
  color: var(--or-deep);
}
.frm__pl svg { width: 15px; height: 15px; fill: currentColor; }
.frm__mod > div { display: grid; gap: 2px; min-width: 0; }
.frm__mod b { font-size: var(--fs-sm); font-weight: 900; color: var(--ink); }
.frm__mod span { font-size: var(--fs-xs); color: var(--muted); }
.frm__side { display: grid; gap: 14px; align-content: start; }
.frm__pt {
  display: flex;
  gap: 12px;
  padding: 16px 18px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
}
.frm__pt svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: var(--or-deep); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.frm__pt div { display: grid; gap: 3px; }
.frm__pt b { font-size: var(--fs-base); font-weight: 900; color: var(--ink); }
.frm__pt span { font-size: var(--fs-sm); color: var(--ink-3); line-height: 1.6; }
@media (max-width: 860px) { .frm { grid-template-columns: 1fr; } }

/* ---------- 8. LA MENTION SOUS UNE MAQUETTE ----------------
   Une maquette maison se declare comme telle, sous elle, en
   toutes lettres. Meme regle que les ossatures de landing pages :
   on ne laisse jamais croire a une capture. */
.mth__mock {
  margin-top: 12px;
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: 1.6;
}


/* ============================================================
   WATTLIFT - PAGE METHODE, styles propres a la page
   M32, 08/09/2026.

   Cette feuille est chargee UNIQUEMENT par methode.html, apres
   main.css. Elle existe pour une raison precise : main.css est
   partage par tout le site et porte, au moment de ce chantier,
   des modifications d'une autre mission qui ne sont pas encore
   en ligne. Ecrire ici plutot que dans main.css permet de
   deployer la page Methode sans publier ce travail-la.

   Elle ne contient que ce que la V2 ajoute :
     - .casc   la cascade de l'etape 1
     - .mth-1  le bloc 1, plus grand que les autres
     - .frm__badge  la pastille de mise a jour
     - .cta-band__alt  le lien portfolio sous le bouton unique
   ============================================================ */

/* ==========================================================
   1. ETAPE 1 : LE BLOC EST PLUS GRAND QUE LES AUTRES
   ----------------------------------------------------------
   « le bloc il faut qu'il soit plus gros » [02:11]. Il respire
   davantage en haut et en bas, et son titre passe au cran
   au-dessus des autres sections.
   ========================================================== */

.mth-1 {
  padding-block: clamp(4rem, 9vw, 7.5rem);
}
.mth-1 .sec-head h2 {
  font-size: var(--fs-4xl, clamp(2rem, 1.3rem + 3.2vw, 3.25rem));
}
.mth-1 .sec-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

/* ==========================================================
   2. LA CASCADE
   ----------------------------------------------------------
   « j'imagine un peu en waterfall » [02:07]. Les huit points
   descendent en escalier : chaque ligne demarre un cran plus a
   droite que la precedente, et le trait vertical qui la porte
   file d'un item a l'autre. Pleine largeur, texte seul, aucun
   visuel : « etape 1 c'est juste du texte » [02:33].

   Le decalage est purement decoratif. Il est calcule sur la
   variable --i portee par chaque <li>, et il est neutralise
   sous 900 px : en colonne etroite, un escalier deviendrait
   illisible avant d'etre joli.
   ========================================================== */

.casc {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 1.2vw, 1rem);
}

.casc__i {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    'k titre'
    'k texte';
  column-gap: clamp(1rem, 2.2vw, 1.75rem);
  row-gap: 4px;
  align-items: start;

  padding: clamp(1.1rem, 2vw, 1.6rem) clamp(1.25rem, 2.4vw, 2rem);
  border: 1.5px solid var(--line);
  border-left: 3px solid var(--or-line);
  border-radius: var(--r-lg, 14px);
  background: var(--paper);

  /* L'escalier. 1 cran = 2.2% de la largeur du conteneur. */
  margin-left: calc(var(--i, 0) * 2.2%);
  margin-right: calc((7 - var(--i, 0)) * 0.6%);

  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.casc__i:nth-child(1) { --i: 0; }
.casc__i:nth-child(2) { --i: 1; }
.casc__i:nth-child(3) { --i: 2; }
.casc__i:nth-child(4) { --i: 3; }
.casc__i:nth-child(5) { --i: 4; }
.casc__i:nth-child(6) { --i: 5; }
.casc__i:nth-child(7) { --i: 6; }
.casc__i:nth-child(8) { --i: 7; }

.casc__i:hover {
  border-color: var(--or-line);
  border-left-color: var(--or);
  transform: translateX(3px);
  box-shadow: 0 6px 20px rgba(20, 22, 26, .06);
}

.casc__k {
  grid-area: k;
  align-self: center;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
  font-weight: 900;
  line-height: 1;
  color: transparent;
  background: var(--grad-or);
  -webkit-background-clip: text;
  background-clip: text;
  font-variant-numeric: tabular-nums;
}

.casc__i b {
  grid-area: titre;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}

.casc__i > span:not(.casc__k) {
  grid-area: texte;
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: var(--lh-loose, 1.65);
}

@media (max-width: 900px) {
  /* Plus d'escalier en colonne etroite : les huit points
     reprennent toute la largeur, alignes. */
  .casc__i {
    margin-left: 0;
    margin-right: 0;
  }
  .casc__i:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .casc__i { transition: none; }
  .casc__i:hover { transform: none; }
}

/* ==========================================================
   3. ESPACE DE FORMATION : LA PASTILLE DE MISE A JOUR
   ----------------------------------------------------------
   « tous les mois il y a des mises a jour dans la partie
   formation » [09:01]. La pastille le dit dans la barre de la
   fenetre, sans chiffre ni date qu'il faudrait tenir a jour a
   la main.
   ========================================================== */

/* Specificite : main.css pose deja `.frm__bar span { margin-left: 6px }`,
   qui l'emporterait sur une regle a simple classe. On qualifie donc
   la pastille par sa barre. */
.frm__bar .frm__badge {
  margin-left: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--or-soft);
  border: 1px solid var(--or-line);
  color: var(--or-deep);
  font-size: var(--fs-xs);
  font-weight: 700;
  white-space: nowrap;
}
.frm__bar .frm__badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--or);
}

@media (max-width: 560px) {
  /* La barre est etroite : la pastille passe sous le titre
     plutot que de le comprimer. */
  .frm__bar .frm__badge { display: none; }
}

/* ==========================================================
   4. LA FIN DE PAGE
   ----------------------------------------------------------
   Un seul appel a l'action sur toute la page, et il est ici :
   « a la fin reserve la session offerte et c'est plie »
   [10:32]. Le bandeau n'a plus ni titre ni paragraphe, il ne
   porte que le bouton et le lien portfolio.
   ========================================================== */

.cta-band .btn { margin-top: 0; }

.cta-band__alt {
  margin: 18px 0 0;
  font-size: var(--fs-sm);
}
.cta-band__alt a {
  color: var(--ink-3);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color .16s ease;
}
.cta-band__alt a:hover { color: var(--or-deep); }