/* ==========================================================================
   Pimp ton SEO — design system (Bootstrap 5 override)
   Palette héritée de l'identité historique : bleu nuit, bleu vif, or.
   ========================================================================== */

:root {
  /* marque */
  --pts-navy: #262578;
  --pts-navy-700: #1b1a5c;
  --pts-navy-050: #eef0fb;
  --pts-blue: #296bef;
  --pts-blue-600: #1d55c9;
  --pts-blue-050: #e8f0ff;
  --pts-gold: #ffc819;
  --pts-gold-050: #fff8e3;
  --pts-green: #12a45c;
  --pts-green-050: #e7f7ef;
  --pts-red: #d63b45;
  --pts-red-050: #fdeced;

  /* neutres */
  --pts-ink: #14162b;
  --pts-body: #3f4457;
  --pts-muted: #6b7189;
  --pts-line: #e4e7f1;
  --pts-surface: #ffffff;
  --pts-surface-alt: #f6f7fc;

  /* typo */
  --pts-font-title: "Signika", "Trebuchet MS", system-ui, sans-serif;
  --pts-font-body: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;

  /* rythme */
  --pts-radius: 14px;
  --pts-radius-sm: 9px;
  --pts-shadow: 0 1px 2px rgba(20, 22, 43, .05), 0 8px 24px -12px rgba(20, 22, 43, .18);
  --pts-shadow-lg: 0 2px 6px rgba(20, 22, 43, .06), 0 24px 48px -20px rgba(20, 22, 43, .28);

  /* bootstrap */
  --bs-primary: var(--pts-navy);
  --bs-link-color: var(--pts-blue-600);
  --bs-link-hover-color: var(--pts-navy);
  --bs-body-color: var(--pts-body);
  --bs-body-font-family: var(--pts-font-body);
  --bs-border-color: var(--pts-line);
}

/* --------------------------------------------------------------- largeur du site */
/* Bootstrap monte à 1320px au-delà de 1400px : on plafonne à 1200px pour resserrer
   le contenu et éviter le vide entre le texte et la colonne latérale. */
@media (min-width: 1400px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
    max-width: 1200px;
  }
}

/* --------------------------------------------------------------- base */
html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
  font-family: var(--pts-font-body);
  color: var(--pts-body);
  font-size: 1.0625rem;
  line-height: 1.72;
  background: var(--pts-surface);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .pts-title {
  font-family: var(--pts-font-title);
  color: var(--pts-ink);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.22;
}

h1 { font-size: clamp(1.9rem, 1.35rem + 2.1vw, 2.9rem); }
h2 { font-size: clamp(1.45rem, 1.15rem + 1.25vw, 2rem); margin-top: 2.6rem; margin-bottom: .9rem; }
h3 { font-size: clamp(1.2rem, 1.05rem + .65vw, 1.45rem); margin-top: 1.9rem; margin-bottom: .7rem; }
h4 { font-size: 1.1rem; margin-top: 1.5rem; }

a { text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

::selection { background: var(--pts-gold); color: var(--pts-ink); }

/* --------------------------------------------------------------- header */
.pts-header {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--pts-line);
}

.pts-logo {
  font-family: var(--pts-font-title);
  font-weight: 700; font-size: 1.32rem; line-height: 1.1;
  color: var(--pts-navy); display: inline-flex; align-items: center; gap: .55rem;
}
.pts-logo:hover { text-decoration: none; color: var(--pts-blue); }
/* le logo est une image : le carre au P a vecu */
.pts-logo__img { height: 66px; width: auto; display: block; }
@media (max-width: 575.98px) { .pts-logo__img { height: 54px; } }

/* sans couleur declaree, l'icone du menu mobile de Bootstrap reste blanche
   sur fond blanc : le bouton existe mais ne se voit pas */
.pts-header .navbar-toggler {
  border-color: var(--pts-line); border-radius: 10px; padding: .35rem .6rem;
}
.pts-header .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(41, 107, 239, .25); }
.pts-header .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23262578' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }

.pts-nav .nav-link {
  font-weight: 600; font-size: .95rem; color: var(--pts-ink);
  padding: .45rem .8rem; border-radius: 8px;
}
.pts-nav .nav-link:hover, .pts-nav .nav-link:focus { color: var(--pts-blue); background: var(--pts-blue-050); }
.pts-nav .nav-link.active { color: var(--pts-blue-600); }
.pts-nav .dropdown-menu { border: 1px solid var(--pts-line); border-radius: var(--pts-radius); box-shadow: var(--pts-shadow); padding: .5rem; }
.pts-nav .dropdown-item { border-radius: var(--pts-radius-sm); font-weight: 500; font-size: .92rem; padding: .45rem .7rem; }
.pts-nav .dropdown-item:hover { background: var(--pts-blue-050); color: var(--pts-blue-600); }

/* --------------------------------------------------------------- boutons */
.btn-pts {
  --bs-btn-bg: var(--pts-navy); --bs-btn-border-color: var(--pts-navy);
  --bs-btn-hover-bg: var(--pts-navy-700); --bs-btn-hover-border-color: var(--pts-navy-700);
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--pts-navy-700);
  --bs-btn-font-size: 1rem;
  font-weight: 600; border-radius: 999px; padding: .55rem 1.25rem;
}
.btn-pts-outline {
  --bs-btn-color: var(--pts-navy); --bs-btn-border-color: var(--pts-line);
  --bs-btn-hover-bg: var(--pts-navy-050); --bs-btn-hover-border-color: var(--pts-navy);
  --bs-btn-hover-color: var(--pts-navy);
  --bs-btn-font-size: 1rem;
  font-weight: 600; border-radius: 999px; padding: .55rem 1.25rem;
}
/* sans cela, Bootstrap imposerait 1.25rem sur .btn-lg et le bouton secondaire
   paraîtrait plus gros que le CTA principal */
.btn-pts.btn-lg, .btn-pts-outline.btn-lg {
  --bs-btn-font-size: 1.12rem;
  padding: .95rem 2rem;
}
/* la déclaration ci-dessus neutralise aussi le .btn-sm de Bootstrap : on le rétablit */
.btn-pts.btn-sm, .btn-pts-outline.btn-sm {
  --bs-btn-font-size: .875rem;
  padding: .42rem 1rem;
}
.pts-cta.btn-sm { font-size: .95rem; padding: .55rem 1.2rem; }

/* CTA affilié : le bouton qui fait vivre le site */
.pts-cta-wrap { text-align: center; margin: 2rem 0; }
/* CTA affilié : le bouton qui fait vivre le site.
   Seule difference avec la version d'origine : plus de translateY au survol,
   un bouton qui monte se derobant sous le curseur au moment du clic. */
.pts-cta {
  background: var(--pts-blue);
  color: #fff; font-weight: 700; font-family: var(--pts-font-title);
  border: 0; border-radius: 999px; padding: .85rem 1.9rem; font-size: 1.05rem;
  box-shadow: 0 10px 22px -12px rgba(41, 107, 239, .9);
  transition: background .15s ease, box-shadow .15s ease;
}
.pts-cta:hover, .pts-cta:focus {
  background: var(--pts-blue-600); color: #fff; text-decoration: none;
  box-shadow: 0 16px 28px -12px rgba(41, 107, 239, 1);
}
.pts-cta.btn-lg { font-size: 1.12rem; padding: .95rem 2.2rem; }

/* --------------------------------------------------------------- article */
/* le texte occupe toute sa colonne : celle-ci est déjà calibrée par la grille */
.pts-article { max-width: 100%; }
.pts-article > p { margin-bottom: 1.25rem; }
.pts-article img { display: block; margin: 1.8rem auto; box-shadow: var(--pts-shadow); }
/* les visuels des composants (cartes, blocs d'avis) ne sont pas des illustrations
   d'article : ni marge de respiration, ni ombre, et ils remplissent leur cadre */
.pts-article .pts-podium__logo img,
.pts-article .pts-reviewbox img,
.pts-article .pts-rank__logo {
  margin: 0; box-shadow: none; height: 100%; border-radius: 0;
}
.pts-article ul, .pts-article ol { margin-bottom: 1.35rem; padding-left: 1.15rem; }
.pts-article li { margin-bottom: .5rem; }
.pts-article li::marker { color: var(--pts-blue); font-weight: 700; }
.pts-article strong { color: var(--pts-ink); font-weight: 650; }
/* les blocs entierement cliquables (.pts-renvoi...) ne sont pas des liens de
   texte : sans cette exclusion ils heritent du filet bleu et de l'aplat bleu
   clair au survol, qui passent par-dessus leur propre fond */
/* le style « lien de texte » ne concerne que les liens nus du contenu :
   tout bloc cliquable porte une classe pts-* et garde son propre fond */
.pts-article a:not(.btn):not([class*="pts-"]) {
  color: var(--pts-blue-600); font-weight: 500;
  border-bottom: 1px solid rgba(41, 107, 239, .3);
}
.pts-article a:not(.btn):not([class*="pts-"]):hover { text-decoration: none; border-bottom-color: var(--pts-blue); background: var(--pts-blue-050); }
/* image cliquable (faux lecteur vidéo vers un lien affilié) : pas de filet ni d'aplat */
.pts-article a:not(.btn):not([class*="pts-"]):has(> img),
.pts-article a:not(.btn):not([class*="pts-"]):has(> img):hover { border-bottom: 0; background: none; display: block; }
.pts-article figcaption, .pts-article img + em { display: block; text-align: center; font-size: .88rem; color: var(--pts-muted); }

/* H2 des articles : numerotes 01, 02, 03... en jaune.
   decimal-leading-zero fournit le zero de tete sans rien ecrire dans le
   contenu, et le compteur repart a chaque article. */
.pts-article--numerote { counter-reset: pts-h2; }
/* un filet separe les sections ; :first-of-type vise le premier h2 de
   l'article, qui suit l'introduction et n'a donc rien a delimiter */
.pts-article--numerote h2 {
  scroll-margin-top: 114px;
  border-top: 1px solid var(--pts-line); border-bottom: 1px solid var(--pts-line);
  padding-top: 1.6rem; padding-bottom: 1.6rem;   /* meme espace de part et d'autre */
  margin-top: 3rem; margin-bottom: 1.6rem;
}
/* le premier titre suit l'introduction : il n'a rien a delimiter au-dessus */
.pts-article--numerote h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 2.6rem; }
.pts-article--numerote h2::before {
  counter-increment: pts-h2;
  content: counter(pts-h2, decimal-leading-zero);
  color: var(--pts-gold); font-weight: 800; margin-right: .55rem;
  -webkit-text-stroke: .5px rgba(20, 22, 43, .12);   /* le jaune seul manque de tenue sur blanc */
}

.pts-lead { font-size: 1.16rem; line-height: 1.65; color: var(--pts-ink); }
.pts-meta__dot { opacity: .5; margin: 0 .45rem; }

.pts-hero-img { border-radius: var(--pts-radius); box-shadow: var(--pts-shadow-lg); width: 100%; height: auto; }

/* fil d'ariane */
.pts-breadcrumb { font-size: .85rem; }
.pts-breadcrumb a { color: var(--pts-muted); }
.pts-breadcrumb a:hover { color: var(--pts-blue); }
.pts-breadcrumb .breadcrumb-item + .breadcrumb-item::before { content: "›"; color: var(--pts-muted); }

/* surtitre de section */
.pts-kicker {
  font-family: var(--pts-font-body); font-size: .78rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--pts-blue);
  margin: 2.8rem 0 -.4rem;
}

/* --------------------------------------------------------------- encarts */
/* un seul habillage pour les encadres au fil du texte : filet jaune de marque
   sur fond neutre. L'aplat bleu reste au « En bref » et aux blocs de
   conversion, sinon les deux se disputent le meme role dans la page. */
.pts-callout {
  background: var(--pts-surface-alt);
  border: 0; border-left: 3px solid var(--pts-gold);
  border-radius: 0 var(--pts-radius-sm) var(--pts-radius-sm) 0;
  padding: 1rem 1.3rem; margin: 1.8rem 0; color: var(--pts-ink);
}
.pts-callout strong { color: var(--pts-ink); }
.pts-callout > *:last-child { margin-bottom: 0; }
.pts-callout__label {
  font-family: var(--pts-font-title); font-size: .76rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--pts-navy); margin-bottom: .45rem;
  display: flex; align-items: center; gap: .45rem;
}
/* le pictogramme repris du texte : il accompagne l'etiquette, il ne la crie pas */
.pts-callout__puce { font-size: 1rem; line-height: 1; }
/* « En bref » : aplat bleu clair, une phrase par point pour la lecture rapide */
.pts-callout--resume {
  background: var(--pts-blue-050); border: 1px solid rgba(41, 107, 239, .18);
  border-left: 1px solid rgba(41, 107, 239, .18); border-radius: 14px;
  padding: 1.4rem 1.6rem; margin: 1.9rem 0;
}
.pts-callout--resume .pts-callout__label {
  display: inline-flex; align-items: center; gap: .4rem; margin-bottom: .8rem;
  color: var(--pts-blue-600);
  color: var(--pts-blue-600); font-size: .74rem; letter-spacing: .12em;
}
.pts-callout--resume > p { font-size: 1.03rem; line-height: 1.7; }
.pts-callout--resume > :last-child { margin-bottom: 0; }
.pts-callout__points { list-style: none; padding: 0; margin: 0; }
.pts-callout__points li {
  position: relative; padding-left: 1.7rem; font-size: 1rem; line-height: 1.6;
  margin-bottom: .45rem;
}
.pts-callout__points li:last-child { margin-bottom: 0; }
.pts-callout__points li::before {
  content: "✓"; position: absolute; left: 0; top: 0; color: var(--pts-blue); font-weight: 800;
}

/* la mise en garde est le seul ecart admis : elle doit se voir comme telle */
/* le meme encadre « En bref », rendu cliquable parce qu'il porte un bouton :
   c'est une balise lien, pas un lien etire, et il ne bouge pas au survol */
.pts-callout--offre, .pts-article a.pts-callout--offre {
  display: block; text-decoration: none; border-bottom: 0; color: inherit;
  transition: box-shadow .18s ease, border-color .18s ease;
}
.pts-article a.pts-callout--offre:hover, .pts-article a.pts-callout--offre:focus {
  text-decoration: none; border-bottom: 0; color: inherit;
  box-shadow: var(--pts-shadow-lg);
}
.pts-callout--offre:focus-visible { outline: 3px solid var(--pts-blue); outline-offset: 3px; }
.pts-callout--offre .pts-cta-wrap { display: block; }
.pts-callout--red { background: var(--pts-red-050); border-left-color: var(--pts-red); }
.pts-callout--red .pts-callout__label { color: var(--pts-red); }

/* renvoi vers un autre contenu : aplat navy, bloc entierement cliquable.
   A reserver au renvoi le plus strategique d'un article. */
.pts-renvoi {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.1rem 2.2rem; background: var(--pts-navy); border-radius: var(--pts-radius);
  padding: 1.5rem 1.7rem; margin: 1.9rem 0; text-decoration: none;
  transition: background .15s ease, box-shadow .15s ease;
}
/* sans ces regles, le lien herite du bleu de survol de Bootstrap et le titre
   blanc vire au navy sur fond navy */
.pts-renvoi:hover, .pts-renvoi:focus {
  background: #14134a; text-decoration: none;
  box-shadow: 0 10px 24px -14px rgba(20, 22, 43, .9);
}
.pts-renvoi:focus-visible { outline: 3px solid var(--pts-gold); outline-offset: 3px; }
/* la colonne de texte est bornee : sans ca l'accroche vient lecher le bouton */
.pts-renvoi__corps { flex: 1 1 20rem; min-width: 0; max-width: 46ch; }
.pts-renvoi__kicker {
  display: block; font-family: var(--pts-font-title); font-size: .7rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--pts-gold); margin-bottom: .25rem;
}
/* l'accroche vit dans le bandeau : elle appartient au meme ensemble que le
   titre de destination, la sortir en paragraphe au-dessus cassait le bloc */
.pts-renvoi__titre {
  display: block; color: #fff; font-family: var(--pts-font-title);
  font-weight: 600; font-size: 1.18rem; line-height: 1.3; margin-bottom: .3rem;
}
/* l'accroche commente le titre : elle passe dessous, plus petite et plus sourde */
.pts-renvoi__intro {
  display: block; color: rgba(255, 255, 255, .72); font-size: .92rem;
  line-height: 1.5;
}
.pts-renvoi:hover .pts-renvoi__titre, .pts-renvoi:focus .pts-renvoi__titre { color: #fff; }
.pts-renvoi__lien {
  flex: 0 0 auto; background: var(--pts-gold); color: var(--pts-navy);
  font-family: var(--pts-font-title); font-weight: 700; font-size: .95rem;
  border-radius: 999px; padding: .55rem 1.3rem; white-space: nowrap;
  transition: background .15s ease;
}
.pts-renvoi:hover .pts-renvoi__lien, .pts-renvoi:focus .pts-renvoi__lien { background: #ffd451; color: var(--pts-navy); }

.pts-quote {
  border-left: 3px solid var(--pts-gold); background: var(--pts-surface-alt);
  border-radius: 0 var(--pts-radius-sm) var(--pts-radius-sm) 0;
  padding: 1rem 1.3rem; margin: 1.8rem 0; font-style: italic; color: var(--pts-ink);
}

/* --------------------------------------------------------------- pour / contre */
.pts-pc {
  border: 1px solid var(--pts-line); border-radius: var(--pts-radius);
  padding: 1.2rem 1.35rem; margin: 1rem 0; background: var(--pts-surface); height: 100%;
}
.pts-pc--pros { background: var(--pts-green-050); border-color: rgba(18, 164, 92, .22); }
.pts-pc--cons { background: var(--pts-red-050); border-color: rgba(214, 59, 69, .2); }
.pts-pc-title {
  font-family: var(--pts-font-title); font-weight: 700; font-size: 1.02rem;
  color: var(--pts-ink); margin-bottom: .7rem;
}
.pts-pc-list { list-style: none; padding-left: 0; margin-bottom: 0; }
.pts-pc-list li { position: relative; padding-left: 1.5rem; margin-bottom: .55rem; font-size: .97rem; }
.pts-pc-list li::before {
  position: absolute; left: 0; top: 0; font-weight: 700;
}
.pts-pc--pros .pts-pc-list li::before { content: "✓"; color: var(--pts-green); }
.pts-pc--cons .pts-pc-list li::before { content: "✕"; color: var(--pts-red); }

/* --------------------------------------------------------------- reviewbox */
/* item de classement */
.pts-rank {
  display: flex; align-items: center; gap: 1rem;
  border-top: 2px solid var(--pts-line); padding-top: 1.4rem; margin: 2.8rem 0 1.2rem;
}
.pts-rank__num {
  font-family: var(--pts-font-title); font-size: 2.4rem; font-weight: 700; line-height: 1;
  color: var(--pts-gold); flex: 0 0 auto; min-width: 2.2rem; text-align: center;
}
.pts-rank__body { flex: 1 1 auto; }
.pts-rank__body h2, .pts-rank__body h3 { margin: 0; }
.pts-rank__logo { max-height: 52px; max-width: 140px; width: auto; margin: 0 !important; box-shadow: none !important; }

/* --------------------------------------------------------------- tableaux */
.table-responsive { margin: 1.8rem 0; border-radius: var(--pts-radius); border: 1px solid var(--pts-line); }
.pts-article .table { margin-bottom: 0; font-size: .96rem; }
.pts-article .table > thead {
  background: var(--pts-navy); color: #fff;
}
.pts-article .table > thead th {
  font-family: var(--pts-font-title); font-weight: 600; border: 0;
  padding: .85rem 1rem; white-space: nowrap;
}
.pts-article .table > tbody td { padding: .75rem 1rem; border-color: var(--pts-line); }
.pts-article .table > tbody tr:hover > * { background: var(--pts-blue-050); }

/* --------------------------------------------------------------- sommaire */
.pts-toc {
  position: sticky; top: 92px;
  border: 1px solid var(--pts-line); border-radius: var(--pts-radius);
  background: var(--pts-surface-alt); padding: 1.15rem 1.25rem;
  max-height: calc(100vh - 120px); overflow-y: auto; font-size: .93rem;
}
.pts-toc__title {
  font-family: var(--pts-font-title); font-weight: 700; font-size: .8rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--pts-muted); margin-bottom: .8rem;
}
.pts-toc ol { list-style: none; padding-left: 0; margin: 0; counter-reset: toc; }
.pts-toc li { margin-bottom: .1rem; }
.pts-toc a {
  display: block; color: var(--pts-body); padding: .3rem .6rem;
  border-left: 2px solid transparent; border-radius: 0 6px 6px 0; line-height: 1.4;
}
/* fond bleu clair comme le reste des etats de survol du site, mais le filet
   qui marque la section en cours reste au jaune de la marque */
.pts-toc a:hover { color: var(--pts-blue); background: var(--pts-blue-050); text-decoration: none; }
.pts-toc a.is-active {
  color: var(--pts-blue-600); font-weight: 600;
  border-left-color: var(--pts-gold); background: var(--pts-blue-050);
}
.pts-toc .toc-lvl-3 a { padding-left: 1.4rem; font-size: .89rem; color: var(--pts-muted); }

/* cartes produit inserees dans un article (memes reperes que le classement) */
.pts-cartes { margin: 2.2rem 0; }
.pts-carte .pts-podium__corps { padding-top: 1.1rem; }
/* un nom sur deux lignes ne doit pas decaler tout ce qui suit : on reserve la
   hauteur de deux lignes pour que les rangees restent alignees */
.pts-carte .pts-podium__nom { min-height: 2.6em; }
/* le detail de prix varie de deux a trois lignes selon l'offre : on reserve la
   hauteur haute pour que les blocs tarif restent sur la meme ligne */
.pts-carte .pts-podium__prix-detail { min-height: 4.3em; }
/* les arguments de la carte : deux colonnes, coches vertes, texte compact */
.pts-carte__points {
  list-style: none; padding: 0; margin: .2rem 0 1.2rem;
  display: grid; grid-template-columns: 1fr; gap: .4rem;
  /* la liste absorbe la hauteur libre : ticket et bouton se retrouvent au
     meme niveau d'une carte a l'autre, quel que soit le nombre d'arguments */
  align-content: start; flex: 1 1 auto;
}
.pts-carte__points li {
  position: relative; padding-left: 1.4rem; margin: 0;
  font-size: .9rem; line-height: 1.4; color: var(--pts-body);
}
.pts-carte__points li::before {
  content: "✓"; position: absolute; left: 0; top: 0; color: var(--pts-green); font-weight: 800;
}

/* --------------------------------------------------------------- cartes */
.pts-card {
  height: 100%; background: var(--pts-surface); border: 1px solid var(--pts-line);
  border-radius: var(--pts-radius); overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pts-card:hover { transform: translateY(-4px); box-shadow: var(--pts-shadow-lg); border-color: rgba(41, 107, 239, .35); }
.pts-card__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--pts-surface-alt); }
.pts-card__media img { width: 100%; height: 100%; object-fit: cover; }
.pts-card__body { padding: 1.1rem 1.2rem 1.3rem; }
.pts-card__title { font-size: 1.08rem; margin: .35rem 0 .5rem; line-height: 1.35; }
.pts-card__title a { color: var(--pts-ink); }
.pts-card__title a:hover { color: var(--pts-blue-600); text-decoration: none; }
.pts-card__excerpt { font-size: .93rem; color: var(--pts-muted); margin-bottom: 0; }

.pts-tag {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: .22rem .6rem; border-radius: 999px;
  background: var(--pts-blue-050); color: var(--pts-blue-600);
}

/* --------------------------------------------------------------- auteur */
.pts-author {
  display: flex; gap: 1.15rem; align-items: flex-start;
  background: var(--pts-surface-alt); border: 1px solid var(--pts-line);
  border-radius: var(--pts-radius); padding: 1.4rem; margin: 3rem 0 0;
}
.pts-author__avatar { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; flex: 0 0 68px; margin: 0 !important; box-shadow: none !important; }
/* reseaux de l'auteur : des pastilles, pour ne pas les confondre avec les
   liens du texte */
.pts-author__reseaux { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.pts-author__reseaux a {
  display: inline-block; font-size: .84rem; font-weight: 700;
  color: var(--pts-navy); background: #fff; border: 1px solid var(--pts-line);
  border-radius: 999px; padding: .3rem .85rem; text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}
.pts-author__reseaux a:hover, .pts-author__reseaux a:focus {
  color: var(--pts-blue-600); border-color: var(--pts-blue); text-decoration: none;
}
.pts-author__name { font-family: var(--pts-font-title); font-weight: 700; color: var(--pts-ink); margin-bottom: .15rem; }
.pts-author__role { font-size: .82rem; color: var(--pts-blue-600); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .5rem; }
.pts-author p { font-size: .95rem; margin-bottom: 0; }

/* --------------------------------------------------------------- FAQ */
.pts-faq .accordion-item { border: 1px solid var(--pts-line); border-radius: var(--pts-radius-sm) !important; margin-bottom: .5rem; overflow: hidden; }
/* L'en-tete est un <h3> : il heritait la marge haute des titres d'article, et
   comme l'item est en overflow:hidden, ces 30 px s'ajoutaient a l'interieur du
   bloc — d'ou des blocs de 75 px pour une ligne de texte, poussee vers le bas. */
.pts-faq .accordion-header { margin: 0; }
/* une question tient sur une ligne : le bloc n'a pas a en occuper trois. */
.pts-faq .accordion-button {
  font-family: var(--pts-font-title); font-weight: 600; color: var(--pts-ink);
  background: var(--pts-surface); font-size: .98rem; line-height: 1.35;
  padding: .68rem 1.1rem;
}
.pts-faq .accordion-button::after { width: 1rem; height: 1rem; background-size: 1rem; }
.pts-faq .accordion-button:not(.collapsed) { background: var(--pts-navy-050); color: var(--pts-navy); box-shadow: none; }
.pts-faq .accordion-button:focus { box-shadow: 0 0 0 3px rgba(41, 107, 239, .18); }
.pts-faq .accordion-body { padding: .1rem 1.1rem 1rem; font-size: .95rem; }

/* --------------------------------------------------------------- hero / sections */
.pts-hero {
  background: linear-gradient(140deg, var(--pts-navy) 0%, #2f3fa8 55%, var(--pts-blue) 100%);
  color: #fff; position: relative; overflow: hidden;
}
.pts-hero::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 80% at 85% 15%, rgba(255, 200, 25, .22), transparent 60%);
  pointer-events: none;
}
.pts-hero h1, .pts-hero .pts-title { color: #fff; }
.pts-hero p { color: rgba(255, 255, 255, .86); }
.pts-hero .pts-kicker { color: var(--pts-gold); }

.pts-section-alt { background: var(--pts-surface-alt); }

.pts-newsletter {
  background: linear-gradient(140deg, var(--pts-navy), var(--pts-blue-600));
  color: #fff; border-radius: var(--pts-radius); padding: 2.2rem;
}
.pts-newsletter h2, .pts-newsletter h3 { color: #fff; }

/* --------------------------------------------------------------- footer */
.pts-footer { background: var(--pts-ink); color: rgba(255, 255, 255, .72); padding: 3.2rem 0 1.5rem; }
.pts-footer h2, .pts-footer h3, .pts-footer .pts-footer__title {
  font-family: var(--pts-font-title); color: #fff; font-size: .82rem;
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1rem;
}
.pts-footer a { color: rgba(255, 255, 255, .72); font-size: .95rem; }
.pts-footer a:hover { color: var(--pts-gold); text-decoration: none; }
.pts-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 2.4rem; padding-top: 1.4rem; font-size: .86rem; }

/* --------------------------------------------------------------- divers */
.pts-skip {
  position: absolute; left: -999px; top: 0; z-index: 2000;
  background: var(--pts-navy); color: #fff; padding: .7rem 1.2rem; border-radius: 0 0 8px 0;
}
.pts-skip:focus { left: 0; }

.pts-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--pts-blue), var(--pts-gold)); z-index: 1040;
  transition: width .1s linear;
}

@media print {
  .pts-header, .pts-footer, .pts-toc, .pts-cta-wrap, .pts-newsletter { display: none !important; }
}

/* --------------------------------------------------------------- outils gratuits */
.pts-tool { margin: 2rem 0 1rem; }
.pts-tool__panel {
  background: var(--pts-surface-alt); border: 1px solid var(--pts-line);
  border-radius: var(--pts-radius); padding: 1.5rem;
}
.pts-tool .form-control { border-color: var(--pts-line); border-radius: var(--pts-radius-sm); padding: .65rem .85rem; }
.pts-tool .form-control:focus { border-color: var(--pts-blue); box-shadow: 0 0 0 3px rgba(41,107,239,.15); }
.pts-tool__count { font-size: .82rem; color: var(--pts-muted); font-variant-numeric: tabular-nums; }
.pts-tool__bar { height: 5px; background: var(--pts-line); border-radius: 999px; margin-top: .5rem; overflow: hidden; }
.pts-tool__bar span { display: block; height: 100%; width: 0; border-radius: 999px; transition: width .18s ease, background .18s ease; }
.pts-tool__hint { font-size: .82rem; color: var(--pts-muted); margin: .45rem 0 0; }

/* aperçu de résultat Google */
.pts-serp {
  background: #fff; border: 1px solid var(--pts-line); border-radius: var(--pts-radius);
  padding: 1.15rem 1.25rem; font-family: Arial, sans-serif; max-width: 600px;
}
.pts-serp__head { display: flex; align-items: center; gap: .65rem; margin-bottom: .55rem; }
.pts-serp__favicon {
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 26px;
  background: linear-gradient(135deg, var(--pts-navy), var(--pts-blue));
  color: #fff; display: grid; place-items: center; font-size: .8rem; font-weight: 700;
}
.pts-serp__site { font-size: 14px; color: #202124; line-height: 1.2; }
.pts-serp__url { font-size: 12px; color: #4d5156; line-height: 1.3; word-break: break-all; }
.pts-serp__title {
  font-size: 20px; line-height: 1.3; color: #1a0dab; margin-bottom: .2rem;
  font-family: Arial, sans-serif; font-weight: 400; cursor: pointer;
}
.pts-serp__title:hover { text-decoration: underline; }
.pts-serp__desc { font-size: 14px; line-height: 1.58; color: #4d5156; }
.pts-serp--mobile { max-width: 420px; }
.pts-serp--mobile .pts-serp__title { font-size: 18px; font-weight: 500; color: #1a0dab; }

/* --------------------------------------------------------------- quiz « quel business » */
/* Une question a la fois, plein cadre : le lecteur ne voit jamais qu'il en
   reste neuf, et il va au bout. Meme parti pris que sur les blocs d'avis :
   aucun deplacement au survol, la cible ne se derobe pas sous le curseur. */
.pts-quiz { margin: .5rem 0 2.5rem; }
.pts-quiz__panel {
  background: var(--pts-surface-alt); border: 1px solid var(--pts-line);
  border-radius: var(--pts-radius); padding: 1.8rem;
}
.pts-quiz__panel + .pts-quiz__panel { margin-top: 1.2rem; }
.pts-quiz__kicker {
  font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--pts-blue-600); margin-bottom: .6rem;
}

/* les trois promesses de la carte de tete, meme facture que les coches du
   bandeau : ce que le lecteur obtient, avant de cliquer */
.pts-quiz-hero__points { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.pts-quiz-hero__points li {
  position: relative; padding-left: 1.5rem; margin-bottom: .55rem;
  font-size: .93rem; line-height: 1.4; color: var(--pts-body);
}
.pts-quiz-hero__points li::before {
  content: "✓"; position: absolute; left: 0; top: 0; color: var(--pts-green); font-weight: 800;
}

/* la tuile d'une carte de profil tient la place du logo produit d'un
   comparatif : meme cadre, meme ratio, un emoji a la place de l'image */
.pts-quiz-carte__emoji {
  display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9;
  background: var(--pts-navy-050); border: 1px solid var(--pts-line);
  border-radius: var(--pts-radius-sm); font-size: 2.6rem; line-height: 1;
}

/* pas de translation au survol : le bouton ne se derobe pas sous le curseur */
.pts-quiz__go {
  background: var(--pts-gold); color: var(--pts-navy);
  font-family: var(--pts-font-title); font-weight: 700; font-size: 1.15rem;
  border: 0; border-radius: 999px; padding: .95rem 2.4rem;
  box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .9);
  transition: background .15s ease, box-shadow .15s ease;
}
.pts-quiz__go:hover, .pts-quiz__go:focus {
  background: #ffd452; color: var(--pts-navy); box-shadow: 0 16px 30px -14px rgba(0, 0, 0, 1);
}

/* une fois le test commence, le cadre reste marque : le lecteur voit qu'il est
   dans un module, pas dans le corps de l'article */
.pts-quiz__jeu {
  background: var(--pts-surface); border: 2px solid var(--pts-blue);
  box-shadow: var(--pts-shadow); padding: 1.9rem;
}

.pts-quiz__entete {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; margin-bottom: .55rem; flex-wrap: wrap;
}
.pts-quiz__etape {
  font-size: .82rem; font-weight: 700; color: var(--pts-muted);
  font-variant-numeric: tabular-nums;
}
.pts-quiz__retour {
  background: none; border: 0; padding: 0; font-size: .84rem; font-weight: 600;
  color: var(--pts-muted); text-decoration: underline; text-underline-offset: 3px;
}
.pts-quiz__retour:hover { color: var(--pts-blue-600); }
.pts-quiz__retour[hidden] { display: none; }

.pts-quiz__question {
  font-size: 1.42rem; line-height: 1.3; margin: 1.4rem 0 .35rem; outline: none;
}
.pts-quiz__aide { font-size: .88rem; color: var(--pts-muted); margin-bottom: 1.2rem; }
.pts-quiz__aide:empty { display: none; }

.pts-quiz__options { display: grid; gap: .7rem; }
.pts-quiz__option {
  display: flex; align-items: center; gap: .9rem; width: 100%; text-align: left;
  background: var(--pts-surface); border: 1px solid var(--pts-line);
  border-radius: var(--pts-radius-sm); padding: .95rem 1.1rem;
  font-size: 1rem; font-weight: 500; color: var(--pts-ink); line-height: 1.35;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.pts-quiz__option:hover { border-color: var(--pts-blue); background: var(--pts-blue-050); }
.pts-quiz__option:focus-visible { outline: 3px solid var(--pts-blue); outline-offset: 2px; }
.pts-quiz__option.is-active {
  border-color: var(--pts-blue); background: var(--pts-blue-050);
  box-shadow: inset 0 0 0 1px var(--pts-blue);
}
.pts-quiz__puce {
  flex: 0 0 28px; height: 28px; display: grid; place-items: center;
  border-radius: 50%; background: var(--pts-navy-050); color: var(--pts-navy);
  font-size: .8rem; font-weight: 700;
}
.pts-quiz__option:hover .pts-quiz__puce,
.pts-quiz__option.is-active .pts-quiz__puce { background: var(--pts-blue); color: #fff; }

/* --- mur d'inscription, entre la derniere question et le resultat */
.pts-quiz__mur { margin-top: 1.2rem; }
.pts-quiz__champs { display: flex; gap: .7rem; flex-wrap: wrap; }
.pts-quiz__champs .form-control {
  flex: 1 1 16rem; border-color: var(--pts-line); border-radius: 999px;
  padding: .85rem 1.3rem; font-size: 1rem;
}
.pts-quiz__champs .form-control:focus {
  border-color: var(--pts-blue); box-shadow: 0 0 0 3px rgba(41, 107, 239, .15);
}
.pts-quiz__champs .pts-quiz__go { flex: 0 0 auto; }
.pts-quiz__mention {
  font-size: .85rem; color: var(--pts-muted); margin: .9rem 0 0; max-width: 72ch;
}
.pts-quiz__inscrit {
  background: var(--pts-green-050); color: #0b6b3d; border-radius: var(--pts-radius-sm);
  padding: .75rem 1rem; margin: 0 0 1rem; font-size: .92rem; font-weight: 600;
}

/* --- resultat */
.pts-quiz__verdict {
  background: linear-gradient(160deg, var(--pts-navy), var(--pts-blue-600));
  color: #fff; border-radius: var(--pts-radius); padding: 2rem 1.8rem 1.9rem;
  text-align: center; outline: none;
}
.pts-quiz__verdict .pts-quiz__kicker { color: var(--pts-gold); }
.pts-quiz__verdict h2 { color: #fff; font-size: 1.85rem; margin: 0 0 .4rem; }
.pts-quiz__emoji { font-size: 2.6rem; line-height: 1; margin: 0 0 .5rem; }
.pts-quiz__sous-titre {
  display: block; font-family: var(--pts-font-body); font-size: .92rem;
  font-weight: 500; color: rgba(255, 255, 255, .78); margin-top: .3rem;
}
.pts-quiz__punchline { font-size: 1.05rem; color: rgba(255, 255, 255, .92); margin: 0; }
.pts-quiz__resultat .pts-quiz__panel { margin-top: 1.2rem; }
.pts-quiz__resultat h3 { font-size: 1.12rem; margin: 1.6rem 0 .7rem; }
.pts-quiz__resultat h3:first-of-type { margin-top: 1.4rem; }

.pts-quiz__reperes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .8rem; margin-top: 1.3rem;
}
.pts-quiz__repere {
  background: var(--pts-surface); border: 1px solid var(--pts-line);
  border-radius: var(--pts-radius-sm); padding: .8rem .9rem;
}
.pts-quiz__repere span { display: block; font-size: .76rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--pts-muted); margin-bottom: .2rem; }
.pts-quiz__repere strong { font-size: .95rem; color: var(--pts-ink); }

.pts-quiz__liste, .pts-quiz__etapes { margin: 0; padding-left: 1.25rem; }
.pts-quiz__liste li, .pts-quiz__etapes li { margin-bottom: .5rem; }
.pts-quiz__alerte {
  background: var(--pts-gold-050); border-left: 3px solid var(--pts-gold);
  border-radius: 0 var(--pts-radius-sm) var(--pts-radius-sm) 0;
  padding: .85rem 1rem; margin: 0;
}
.pts-quiz__ressources { list-style: none; margin: 0; padding: 0; }
.pts-quiz__ressources li + li { margin-top: .5rem; }
.pts-quiz__ressource { font-weight: 600; }
.pts-quiz__ressource::before { content: "→ "; color: var(--pts-blue); }
.pts-quiz__cta { text-align: center; margin-top: 1.8rem; }
.pts-quiz__cta .pts-tool__hint { margin-top: .7rem; }

.pts-quiz__jauges { list-style: none; margin: 0; padding: 0; }
.pts-quiz__jauge {
  display: grid; grid-template-columns: minmax(0, 13rem) 1fr 3rem;
  align-items: center; gap: .8rem; padding: .4rem 0;
  font-size: .9rem; color: var(--pts-muted);
}
.pts-quiz__jauge.is-top { color: var(--pts-ink); font-weight: 700; }
.pts-quiz__jauge-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pts-quiz__jauge-piste {
  height: 8px; background: var(--pts-line); border-radius: 999px; overflow: hidden;
}
.pts-quiz__jauge-piste > span {
  display: block; height: 100%; border-radius: 999px; background: var(--pts-blue-600);
  opacity: .45;
}
.pts-quiz__jauge.is-top .pts-quiz__jauge-piste > span { background: var(--pts-blue); opacity: 1; }
.pts-quiz__jauge-pct { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pts-quiz__plan-b { margin: 1.3rem 0 0; font-size: .95rem; }

@media (max-width: 575.98px) {
  .pts-quiz__panel { padding: 1.25rem; }
  .pts-quiz__question { font-size: 1.2rem; }
  .pts-quiz__option { font-size: .95rem; padding: .8rem .9rem; }
  /* le nom et son pourcentage tiennent la meme ligne, la barre passe dessous :
     sinon le pourcentage tombe seul sur une troisieme ligne et le classement
     s'etire sur deux ecrans */
  .pts-quiz__jauge { grid-template-columns: 1fr 3.4rem; gap: .1rem .5rem; padding: .5rem 0; }
  .pts-quiz__jauge-nom { grid-column: 1; grid-row: 1; }
  .pts-quiz__jauge-pct { grid-column: 2; grid-row: 1; }
  .pts-quiz__jauge-piste { grid-column: 1 / -1; grid-row: 2; }
}

/* --------------------------------------------------------------- bloc d'avis cliquable */
/* la principale source de clics affilies. Parti pris : pas de bandeau colore
   ni de cadres pastel, qui datent le bloc. Une carte claire, une note qui
   saute aux yeux, deux colonnes d'arguments separees par un filet, un bouton
   large. Le cadre entier est une balise lien (pas de stretched-link, qui
   laisse le clic sans effet) et ne bouge pas au survol. */
.pts-reviewbox {
  border: 1px solid rgba(41, 107, 239, .22); border-radius: 18px;
  background: var(--pts-blue-050); box-shadow: var(--pts-shadow);
  margin: 2.4rem 0; overflow: hidden;
  transition: box-shadow .18s ease, border-color .18s ease;
}
.pts-reviewbox:hover { box-shadow: var(--pts-shadow-lg); border-color: rgba(41, 107, 239, .55); }
/* le selecteur reprend .pts-article pour passer devant le style des liens de
   l'article, qui colorerait tout le contenu du bloc en bleu */
.pts-reviewbox__lien, .pts-article a.pts-reviewbox__lien {
  display: block; color: var(--pts-body); font-weight: 400; text-decoration: none;
  border-bottom: 0; padding: 1.6rem 1.7rem 1.5rem;
}
.pts-article a.pts-reviewbox__lien:hover, .pts-article a.pts-reviewbox__lien:focus {
  color: var(--pts-body); text-decoration: none; background: none; border-bottom: 0;
}
.pts-reviewbox__lien:focus-visible { outline: 3px solid var(--pts-blue); outline-offset: -4px; }

/* 1. la note d'abord : c'est ce que le lecteur cherche */
.pts-reviewbox__head { display: flex; align-items: center; gap: 1rem; }
/* meme pastille ronde que sur les cartes du classement */
.pts-reviewbox__pastille {
  flex: none; width: 68px; height: 68px; border-radius: 50%;
  display: grid; place-items: center; align-content: center; line-height: 1;
  background: var(--pts-navy); color: #fff;
  border: 3px solid #fff; box-shadow: 0 6px 16px -6px rgba(20, 22, 43, .5);
}
.pts-reviewbox__pastille b { font-family: var(--pts-font-title); font-weight: 700; font-size: 1.6rem; }
.pts-reviewbox__pastille i {
  font-style: normal; font-size: .6rem; opacity: .75; letter-spacing: .06em;
  text-transform: uppercase; margin-top: .12rem;
}
.pts-reviewbox__ident { min-width: 0; }
.pts-reviewbox__kicker {
  display: block; font-size: .68rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--pts-muted); margin-bottom: .2rem;
}
.pts-reviewbox__title {
  display: block; font-family: var(--pts-font-title); font-weight: 700;
  font-size: 1.42rem; line-height: 1.25; color: var(--pts-ink); margin: 0;
}

/* 2. les arguments : deux colonnes, un filet, aucun aplat de couleur */
/* le verdict respire au-dessus des deux colonnes d'arguments */
.pts-reviewbox__corps { display: grid; row-gap: 2.2rem; column-gap: 1.2rem; margin-top: 1.4rem; }
.pts-reviewbox__corps > * { margin: 0; }
.pts-reviewbox__corps > p { font-size: 1.02rem; }
.pts-reviewbox__corps .pts-pc {
  background: none; border: 0; border-radius: 0; padding: 0; margin: 0; height: auto;
}
.pts-reviewbox__corps .pts-pc-title {
  font-family: var(--pts-font-title); font-size: 1rem; font-weight: 800;
  letter-spacing: 0; text-transform: none; color: var(--pts-ink); margin-bottom: .7rem;
}
.pts-reviewbox__corps .pts-pc-list li { font-size: .96rem; margin-bottom: .45rem; }
@media (min-width: 768px) {
  .pts-reviewbox__corps { grid-template-columns: 1fr 1fr; column-gap: 2rem; }
  .pts-reviewbox__corps > * { grid-column: 1 / -1; }
  .pts-reviewbox__corps > .pts-pc { grid-column: auto; }
  .pts-reviewbox__corps > .pts-pc--cons { border-left: 1px solid rgba(41, 107, 239, .2); padding-left: 2rem; }
  /* un bloc d'avis sans « les moins » : les points forts prennent toute la largeur,
     sinon ils restent coinces dans une demi-colonne et le texte casse a chaque ligne */
  .pts-reviewbox__corps:not(:has(.pts-pc--cons)) > .pts-pc--pros { grid-column: 1 / -1; }
  .pts-reviewbox__corps:not(:has(.pts-pc--cons)) > .pts-pc--pros .pts-pc-list { columns: 2; column-gap: 2rem; }
  .pts-reviewbox__corps:not(:has(.pts-pc--cons)) > .pts-pc--pros .pts-pc-list li { break-inside: avoid; }
}

/* 2 bis. le detail de la note : une rangee de criteres, chacun avec son
   echelle de dix cases. Les filets verticaux suffisent a les separer, aucun
   aplat de couleur pour ne pas concurrencer le bouton. */
.pts-notes-wrap {
  border-top: 1px solid rgba(41, 107, 239, .2); border-bottom: 1px solid rgba(41, 107, 239, .2);
  /* le bas est un peu plus large : sans jambage, les capitales du libelle
     laissent l'oeil croire que le filet remonte */
  padding: 1.15rem 0 1.45rem;
}
.pts-reviewbox__corps > .pts-notes-wrap { grid-column: 1 / -1; }
.pts-notes__legende {
  font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--pts-muted); margin: 0 0 .8rem; text-align: center;
}
/* le selecteur reprend .pts-article : sans lui, la marge basse des listes de
   l'article s'ajoute sous les libelles et decale le filet du bas */
.pts-notes, .pts-article .pts-notes {
  list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap;
}
.pts-notes li, .pts-article .pts-notes li {
  flex: 1 1 12rem; text-align: center; padding: .2rem .9rem; margin: 0;
  border-left: 1px solid rgba(41, 107, 239, .2);
}
.pts-notes li:first-child { border-left: 0; }
.pts-notes__mesure { display: inline-flex; align-items: center; gap: .6rem; }
.pts-echelle { display: inline-flex; gap: 3px; }
.pts-echelle span { width: 13px; height: 13px; border-radius: 4px; background: rgba(38, 37, 120, .13); }
.pts-echelle span.on { background: var(--pts-blue); }
.pts-notes__val {
  font-family: var(--pts-font-title); font-weight: 700; font-size: 1.15rem;
  line-height: 1; color: var(--pts-ink);
}
.pts-notes__lib {
  display: block; margin-top: .55rem; font-size: .7rem; font-weight: 700;
  line-height: 1.25;   /* des capitales : l'interligne par defaut creuse sous le texte */
  letter-spacing: .07em; text-transform: uppercase; color: var(--pts-muted);
}
/* en colonne etroite la rangee n'a plus de sens : un critere par ligne, le
   libelle a gauche et l'echelle a droite */
@media (max-width: 575.98px) {
  .pts-notes li {
    flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: .2rem .8rem; text-align: left;
    padding: .5rem 0; border-left: 0; border-top: 1px solid rgba(41, 107, 239, .15);
  }
  .pts-notes li:first-child { border-top: 0; }
  .pts-notes__lib { order: -1; flex: 1 1 100%; margin-top: 0; }
}

/* 3. un seul bouton, large, rien pour lui disputer l'attention */
.pts-reviewbox__pied { margin-top: 1.5rem; text-align: center; }
.pts-reviewbox__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; max-width: 26rem; border-radius: 12px; font-size: 1.05rem; padding: .9rem 1.5rem;
}
/* le libelle et le code promo s'empilent, la fleche reste sur le cote */
.pts-reviewbox__lab {
  display: flex; flex-direction: column; align-items: center; line-height: 1.2;
}
.pts-reviewbox__fleche { transition: transform .15s ease; }
.pts-reviewbox:hover .pts-reviewbox__fleche { transform: translateX(3px); }

/* --------------------------------------------------------------- page d'accueil */
/* depuis que la carte des rubriques occupe la droite du bandeau, l'accroche
   n'est plus seule au centre : elle s'aligne a gauche, face a la carte */
.pts-hero--home { text-align: left; }
.pts-hero--home .pts-lead { margin-left: 0; margin-right: 0; }
.pts-hero .pts-lead { color: rgba(255, 255, 255, .88); }
@media (max-width: 991.98px) {
  /* sur une seule colonne, le centrage d'origine reste plus equilibre */
  .pts-hero--home { text-align: center; }
  .pts-hero--home .pts-lead { margin-inline: auto; }
}
/* le bandeau porte un decor en pseudo-element : le contenu passe devant */
.pts-hero__inner { z-index: 1; }
.pts-hero__rule, .pts-rule {
  display: inline-block; width: 92px; height: 4px; border-radius: 999px;
  background: linear-gradient(90deg, var(--pts-gold), #ffe382);
}
.pts-rule { background: linear-gradient(90deg, var(--pts-blue), var(--pts-gold)); }

/* --- cartes des outils partenaires (accueil) */
.pts-outils {
  display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: center;
}
.pts-outil {
  flex: 1 1 300px; max-width: 380px;
  display: flex; flex-direction: column; text-align: left;
  /* fond bleu très léger : les cartes se détachent du blanc de la section */
  background: #eef2fd; border: 1px solid rgba(41, 107, 239, .16);
  border-radius: var(--pts-radius); padding: 1.4rem 1.45rem 1.25rem;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.pts-outil:hover {
  transform: translateY(-4px); box-shadow: var(--pts-shadow-lg);
  border-color: rgba(41, 107, 239, .4); background: #fff;
}

/* tête : logo à gauche, badge à droite */
.pts-outil__tete {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  margin-bottom: 1.15rem;
}
.pts-outil__logo {
  display: grid; place-items: center;
  height: 52px; max-width: 62%; padding: .3rem 0;
}
.pts-outil__logo img { max-height: 46px; max-width: 100%; width: auto; object-fit: contain; }

.pts-outil__promo {
  flex: 0 0 auto; font-size: .74rem; font-weight: 800; letter-spacing: .02em;
  background: #fff; color: #0b7743;
  border: 1px solid rgba(18, 164, 92, .35);
  padding: .3rem .7rem; border-radius: 999px; white-space: nowrap;
}
.pts-outil__note {
  flex: 0 0 auto; font-family: var(--pts-font-title); font-weight: 700; font-size: .95rem;
  background: #fff; color: var(--pts-navy); border: 1px solid rgba(38, 37, 120, .12);
  padding: .28rem .6rem; border-radius: 8px;
}
.pts-outil__note i { font-style: normal; font-size: .68rem; opacity: .6; }

/* corps */
.pts-outil__nom {
  font-family: var(--pts-font-title); font-weight: 700; font-size: 1.18rem;
  color: var(--pts-ink); margin: 0 0 .2rem; line-height: 1.25;
}
.pts-outil__accroche {
  font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--pts-blue-600); margin-bottom: .55rem;
}
.pts-outil__desc {
  font-size: .94rem; color: var(--pts-body); line-height: 1.55;
  margin-bottom: 1.25rem; flex: 1 1 auto;
}

/* pied : action principale bordée + lien vers l'avis */
.pts-outil__pied {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  border-top: 1px solid rgba(38, 37, 120, .1); padding-top: 1rem;
}
.pts-outil__cta {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--pts-font-title); font-weight: 700; font-size: .95rem;
  color: var(--pts-navy); background: #fff;
  border: 1px solid rgba(38, 37, 120, .16); border-radius: 999px;
  padding: .55rem 1.15rem; transition: all .16s ease;
}
.pts-outil__cta:hover {
  text-decoration: none; color: #fff;
  background: var(--pts-navy); border-color: var(--pts-navy);
}
.pts-outil__cta span { transition: transform .16s ease; }
.pts-outil__cta:hover span { transform: translate(2px, -2px); }

.pts-outil__avis {
  font-size: .88rem; font-weight: 600; color: var(--pts-muted); white-space: nowrap;
}
.pts-outil__avis:hover { color: var(--pts-blue-600); text-decoration: none; }

/* liste à coches */
.pts-checklist { list-style: none; padding-left: 0; margin: 0; }
.pts-checklist li { position: relative; padding-left: 2.1rem; margin-bottom: 1.05rem; }
.pts-checklist li::before {
  content: "✓"; position: absolute; left: 0; top: .1rem;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--pts-green-050); color: var(--pts-green);
  display: grid; place-items: center; font-weight: 700; font-size: .85rem;
}

/* preuves d'expertise */
.pts-preuves { display: grid; gap: 1rem; }
.pts-preuve {
  display: flex; gap: 1.1rem; align-items: flex-start;
  background: var(--pts-surface); border: 1px solid var(--pts-line);
  border-radius: var(--pts-radius); padding: 1.2rem 1.35rem;
}
.pts-preuve__num {
  font-family: var(--pts-font-title); font-weight: 700; font-size: 1.35rem;
  color: var(--pts-gold); line-height: 1.1; flex: 0 0 auto;
}
.pts-preuve__titre { font-size: 1.05rem; margin: 0 0 .3rem; }
.pts-preuve p { font-size: .95rem; }

/* --------------------------------------------------------------- pages de rubrique */
.pts-article--wide { max-width: 54rem; }
/* Sur les pages « meilleur X », le texte occupe toute la largeur du conteneur.
   Sans ca, les paragraphes s'arretaient 300 pixels avant la rangee de cartes :
   le regard butait sur un bord qui ne correspondait a rien. */
.pts-article--pleine { max-width: none; }
.pts-article--pleine .pts-cartes,
.pts-article--pleine .pts-avant { width: 100%; max-width: none; }
/* le texte reste dans une colonne lisible, mais une rangee de cartes prend
   toute la largeur disponible */
.pts-article--wide .pts-cartes,
.pts-article--wide .pts-avant { max-width: none; width: 100%; }
@media (min-width: 1200px) {
  .pts-article--wide .pts-cartes,
  .pts-article--wide .pts-avant { width: calc(100vw - 2 * ((100vw - 1140px) / 2 + 12px)); max-width: 1116px; }
}

.pts-filtres { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.pts-filtre {
  border: 1px solid var(--pts-line); background: var(--pts-surface);
  color: var(--pts-body); font-weight: 600; font-size: .92rem;
  padding: .45rem 1.05rem; border-radius: 999px; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.pts-filtre:hover { border-color: var(--pts-blue); color: var(--pts-blue-600); background: var(--pts-blue-050); }
.pts-filtre.is-active { background: var(--pts-navy); border-color: var(--pts-navy); color: #fff; }
.pts-filtres__vide { color: var(--pts-muted); }

/* --------------------------------------------------------------- pied de page complet */
.pts-footer__brand {
  font-family: var(--pts-font-title); font-weight: 700; font-size: 1.25rem;
  color: #fff; margin-bottom: .6rem;
}
.pts-footer__baseline { font-size: .93rem; margin-bottom: 1.2rem; }
.pts-footer__social .list-inline-item + .list-inline-item { margin-left: .9rem; }
.pts-footer__social a {
  display: inline-block; font-size: .85rem; font-weight: 600;
  border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: .25rem .85rem;
}
.pts-footer__social a:hover { border-color: var(--pts-gold); }
.pts-footer__nl {
  border-top: 1px solid rgba(255,255,255,.12); margin-top: 2.4rem; padding-top: 1.8rem;
}
.pts-footer__nl-texte { font-size: .92rem; }
.pts-footer__nl .form-control { border: 0; }

/* ==========================================================================
   Page pilier comparative — composants de conversion
   ========================================================================== */

/* --- accroche ------------------------------------------------------------ */
.pts-pilier-hero {
  background: linear-gradient(140deg, var(--pts-navy) 0%, #2f3fa8 60%, var(--pts-blue) 100%);
  color: #fff; padding: 2rem 0 3.2rem; position: relative; overflow: hidden;
}
.pts-pilier-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(55% 75% at 88% 10%, rgba(255,200,25,.2), transparent 60%);
}
.pts-pilier-hero > .container { position: relative; z-index: 1; }
.pts-pilier-hero h1 { color: #fff; }
.pts-pilier-hero .pts-lead {
  color: rgba(255,255,255,.9);
  font-size: 1.04rem; line-height: 1.62;   /* le verdict était trop imposant sous le H1 */
}

/* pastilles de réassurance : posées sur un support, pas à même le fond */
.pts-reassurance { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem !important; }
.pts-reassurance li {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .95rem .5rem .55rem; border-radius: 999px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 6px 16px -10px rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  color: #fff; font-size: .89rem; font-weight: 600; line-height: 1.2;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.pts-reassurance li:hover {
  background: rgba(255,255,255,.16); border-color: rgba(255,200,25,.55); transform: translateY(-1px);
}
.pts-reassurance li::before { content: none; }
.pts-reassurance__coche {
  flex: 0 0 auto; width: 1.35rem; height: 1.35rem; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--pts-gold), #ffdf6b);
  color: #4a3600; font-size: .72rem; font-weight: 800; line-height: 1;
  box-shadow: 0 2px 6px -2px rgba(255,200,25,.9);
}

/* carte de verdict */
.pts-hero-card {
  background: #fff; border-radius: var(--pts-radius); padding: 1.5rem 1.4rem 1.25rem;
  box-shadow: 0 24px 60px -28px rgba(8,10,40,.75), 0 2px 8px rgba(8,10,40,.12);
}
.pts-hero-card__label {
  position: relative; font-family: var(--pts-font-title); font-size: .72rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--pts-muted);
  padding-bottom: .85rem; margin-bottom: .35rem;
}
.pts-hero-card__label::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 34px; height: 3px;
  border-radius: 999px; background: linear-gradient(90deg, var(--pts-gold), #ffdf6b);
}
/* l'accroche des pages d'avis reprend le fond bleu des pages de classement.
   Essai jaune abandonne : sur ce fond, le blanc tombe a 1,8 pour 1 et le
   texte doit passer en sombre, ce qui casse la parente avec le reste du site. */
@media (min-width: 992px) {
  /* la carte a besoin de respirer : sans cela elle touche presque le chapo */
  .pts-avis-hero .row > .col-lg-7 { padding-right: 2.6rem; }
  .pts-avis-hero .row > .col-lg-5 { padding-left: 2.6rem; }
}

/* accroche des pages d'avis : meme fond que les pages de classement, mais
   une seule offre a annoncer. La carte entiere est une balise lien. */
.pts-avis-hero__meta { color: rgba(255, 255, 255, .72); font-size: .9rem; margin-top: 1.3rem; }
.pts-avis-hero__meta .pts-meta__dot { margin: 0 .45rem; }
.pts-avis-card { display: block; color: inherit; text-decoration: none; }
.pts-avis-card:hover, .pts-avis-card:focus { color: inherit; text-decoration: none; }
.pts-avis-card:focus-visible { outline: 3px solid var(--pts-gold); outline-offset: 3px; }
.pts-avis-card .pts-hero-card__label { display: block; }
.pts-avis-card__tete {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin: .6rem 0 1rem;
}
.pts-avis-card__nom {
  font-family: var(--pts-font-title); font-weight: 700; font-size: 1.28rem;
  line-height: 1.25; color: var(--pts-ink); min-width: 0;
}
.pts-avis-card__note {
  flex: none; width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center; align-content: center; line-height: 1;
  background: var(--pts-navy); color: #fff;
}
.pts-avis-card__note b { font-family: var(--pts-font-title); font-weight: 700; font-size: 1.42rem; }
.pts-avis-card__note i {
  font-style: normal; font-size: .55rem; opacity: .75; letter-spacing: .06em;
  text-transform: uppercase; margin-top: .1rem;
}
.pts-avis-card__points { display: block; margin-bottom: 1.1rem; }
.pts-avis-card__point {
  display: flex; gap: .55rem; font-size: .93rem; color: var(--pts-body);
  padding: .35rem 0; border-top: 1px solid var(--pts-line);
}
.pts-avis-card__coche { flex: none; color: var(--pts-green); font-weight: 700; }
/* seul bouton du site en jaune : dans le bandeau, un bouton bleu sur carte
   blanche posee sur fond bleu se fond dans le decor */
.pts-avis-card .pts-cta { background: var(--pts-gold); color: var(--pts-navy); box-shadow: 0 10px 22px -12px rgba(255, 200, 25, .95); }
.pts-avis-card:hover .pts-cta,
.pts-avis-card .pts-cta:hover { background: #ffd451; color: var(--pts-navy); }

.pts-mini-list { list-style: none; padding: 0; margin: 0; }
.pts-mini-list li + li { border-top: 1px solid var(--pts-line); }
.pts-mini {
  display: flex; align-items: center; gap: .85rem; padding: .8rem .55rem; margin: 0 -.55rem;
  border-radius: var(--pts-radius-sm); text-decoration: none; color: var(--pts-ink);
  transition: background .16s ease;
}
.pts-mini:hover { background: var(--pts-blue-050); text-decoration: none; }
.pts-mini:hover .pts-mini__fleche { opacity: 1; transform: translateX(2px); }
.pts-mini__rang {
  flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--pts-font-title); font-weight: 700; font-size: .95rem;
  background: var(--pts-surface-alt); color: var(--pts-muted); border: 1px solid var(--pts-line);
}
.pts-mini--first .pts-mini__rang {
  background: linear-gradient(140deg, var(--pts-gold), #ffdf6b); color: #4a3600;
  border-color: transparent; box-shadow: 0 4px 10px -4px rgba(255,200,25,.95);
}
.pts-mini__body { flex: 1 1 auto; min-width: 0; }
.pts-mini__nom {
  display: block; font-family: var(--pts-font-title); font-weight: 700;
  font-size: 1.02rem; line-height: 1.25; color: var(--pts-ink);
}
.pts-mini__badge { display: block; font-size: .8rem; color: var(--pts-muted); line-height: 1.3; margin-top: .1rem; }
.pts-mini__note {
  flex: 0 0 auto; display: flex; align-items: baseline; gap: .05rem;
  background: var(--pts-navy); color: #fff; border-radius: 9px; padding: .3rem .55rem;
}
.pts-mini__note b { font-family: var(--pts-font-title); font-weight: 700; font-size: 1.02rem; line-height: 1; }
.pts-mini__note i { font-style: normal; font-size: .68rem; opacity: .7; }
.pts-mini--first .pts-mini__note { background: var(--pts-green); }
.pts-mini__fleche { flex: 0 0 auto; color: var(--pts-blue); font-weight: 700; opacity: 0; transition: opacity .16s ease, transform .16s ease; }
.pts-hero-card__maj {
  display: flex; align-items: center; gap: .45rem; font-size: .78rem; color: var(--pts-muted);
  border-top: 1px solid var(--pts-line); margin-top: .9rem; padding-top: .85rem;
}
.pts-hero-card__puce {
  width: .45rem; height: .45rem; border-radius: 50%;
  background: var(--pts-green); box-shadow: 0 0 0 3px rgba(18,164,92,.18);
}
@media (max-width: 991.98px) { .pts-hero-card { margin-top: .5rem; } }

/* --- podium -------------------------------------------------------------- */
/* la carte est une balise lien : elle doit se comporter comme un bloc,
   sans style de lien herite */
.pts-podium-bloc { height: 100%; display: flex; flex-direction: column; }
.pts-podium {
  flex: 1 1 auto; display: flex; flex-direction: column;
  color: inherit; text-decoration: none;
  background: var(--pts-surface); border: 1px solid var(--pts-line);
  border-radius: var(--pts-radius); overflow: hidden;
  transition: box-shadow .18s ease, border-color .18s ease;
}
.pts-podium:hover, .pts-podium:focus { text-decoration: none; color: inherit; }
.pts-podium:focus-visible { outline: 3px solid var(--pts-blue); outline-offset: 3px; }
/* les enfants passes en <span> doivent retrouver un comportement de bloc */
.pts-podium__badge, .pts-podium__ident, .pts-podium__corps,
.pts-podium__accroche, .pts-podium__tarif, .pts-podium__prix-detail { display: flex; }
.pts-podium__accroche, .pts-podium__prix-detail { display: block; }
.pts-podium:hover { box-shadow: var(--pts-shadow-lg); border-color: rgba(41, 107, 239, .35); }
.pts-podium--top:hover { border-color: var(--pts-gold); }
.pts-podium:hover .pts-cta { background: var(--pts-blue-600); }
.pts-podium--top { border-color: var(--pts-gold); box-shadow: 0 18px 40px -24px rgba(255,200,25,.85); }

/* bandeau de tête : la première chose que l'œil accroche */
.pts-podium__badge {
  display: flex; align-items: center; gap: .5rem;
  background: var(--pts-navy-050); color: var(--pts-navy);
  font-size: .74rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  padding: .7rem 1.2rem; margin: 0; border-bottom: 1px solid var(--pts-line);
  min-height: 3.55rem; line-height: 1.3;
}
.pts-podium--top .pts-podium__badge {
  background: linear-gradient(100deg, var(--pts-gold), #ffdf6b); color: #4a3600; border-bottom-color: transparent;
}
.pts-podium__rang {
  flex: 0 0 auto; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  display: grid; place-items: center; background: #fff; color: var(--pts-navy);
  font-family: var(--pts-font-title); font-size: .82rem; line-height: 1;
  box-shadow: 0 1px 3px rgba(20,22,43,.18);
}

/* identité : le logo occupe toute la largeur, la note se pose en pastille */
.pts-podium__ident { position: relative; padding: 1.3rem 1.2rem 1rem; }
.pts-podium__logo {
  display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--pts-surface-alt); border: 1px solid var(--pts-line);
  border-radius: var(--pts-radius-sm); padding: 0;
}
/* Le logo tient dans le cadre, il ne le remplit pas : « cover » rognait
   « Linkuma » en « nkum » et « Linkavista » en « Linkavis ». Un logo amputé
   est pire qu'un cadre avec des marges. Le fond du cadre fait le reste. */
.pts-podium__logo img {
  width: 100%; height: 100%; object-fit: contain; object-position: center;
  display: block; padding: .5rem;
}

.pts-podium__note {
  position: absolute; top: 1.3rem; right: 1.2rem; z-index: 2;
  pointer-events: none;   /* le clic traverse la pastille et atteint le lien de la carte */
  transform: translate(28%, -28%);
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center; align-content: center;
  background: var(--pts-navy); color: #fff; line-height: 1;
  border: 3px solid #fff; box-shadow: 0 4px 12px -4px rgba(20,22,43,.45);
}
.pts-podium--top .pts-podium__note { background: var(--pts-green); box-shadow: 0 6px 16px -5px rgba(18,164,92,.95); }
.pts-podium__chiffre { font-family: var(--pts-font-title); font-weight: 700; font-size: 1.4rem; }
.pts-podium__sur { font-size: .58rem; opacity: .75; letter-spacing: .06em; text-transform: uppercase; margin-top: .1rem; }

.pts-podium__corps { padding: 0 1.2rem 1.3rem; display: flex; flex-direction: column; flex: 1 1 auto; }
.pts-podium__nom {
  font-family: var(--pts-font-title); font-weight: 700; font-size: 1.22rem;
  color: var(--pts-ink); margin: 0 0 .35rem; line-height: 1.25;
  min-height: 3.05rem;   /* deux lignes de titre */
}
.pts-podium__accroche {
  font-size: .95rem; color: var(--pts-body); margin-bottom: 1rem;
  line-height: 1.55; min-height: 4.42rem;   /* trois lignes */
}

/* le prix : encadré, pour qu'il ne se noie pas dans le texte */
.pts-podium__tarif {
  display: flex; align-items: baseline; justify-content: space-between; gap: .6rem;
  background: var(--pts-surface-alt); border-radius: var(--pts-radius-sm);
  padding: .7rem .9rem; margin-bottom: .5rem;
}
.pts-podium__tarif-label {
  font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pts-muted);
}
.pts-podium__prix { font-family: var(--pts-font-title); font-weight: 700; font-size: 1.15rem; color: var(--pts-ink); margin: 0; text-align: right; }
.pts-podium__prix-detail {
  font-size: .82rem; color: var(--pts-muted); margin-bottom: 1.2rem; flex: 1 1 auto;
  line-height: 1.5; min-height: 3.7rem;     /* trois lignes */
}
.pts-podium__lien {
  display: block; text-align: center; font-size: .88rem; font-weight: 600;
  padding: .85rem .5rem .2rem;
}
/* colonnes étroites : le libellé du CTA doit tenir sur une ligne */
.pts-podium .pts-cta {
  font-size: .98rem; padding: .8rem 1rem; display: block; text-align: center;
  pointer-events: none;   /* c'est la carte entiere qui porte le lien */
}

/* --- aide au choix ------------------------------------------------------- */
.pts-profils { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center; margin-bottom: 1.6rem; }
.pts-profil {
  border: 1px solid var(--pts-line); background: var(--pts-surface); color: var(--pts-body);
  font-weight: 600; font-size: .94rem; padding: .55rem 1.15rem; border-radius: 999px; cursor: pointer;
  transition: all .15s ease;
}
.pts-profil:hover { border-color: var(--pts-blue); color: var(--pts-blue-600); }
.pts-profil.is-active { background: var(--pts-navy); border-color: var(--pts-navy); color: #fff; }

/* la carte entiere renvoie vers le programme d'affiliation */
.pts-reco {
  display: block; color: inherit; text-decoration: none;
  background: var(--pts-surface); border: 1px solid var(--pts-line);
  border-radius: var(--pts-radius); padding: 1.6rem; box-shadow: var(--pts-shadow);
  transition: box-shadow .18s ease, border-color .18s ease;
}
.pts-reco:hover, .pts-reco:focus { color: inherit; text-decoration: none; }
.pts-reco:focus-visible { outline: 3px solid var(--pts-blue); outline-offset: 3px; }
/* les colonnes passees en <span> doivent rester des blocs de grille */
.pts-reco .row, .pts-reco [class*="col-md-"] { display: block; }
.pts-reco .row { display: flex; flex-wrap: wrap; }
.pts-reco__phrase { display: block; }
.pts-reco .pts-cta { display: block; text-align: center; pointer-events: none; }
.pts-reco__avis {
  display: block; text-align: center; font-size: .9rem; font-weight: 600;
  padding: .9rem .5rem .1rem;
}
.pts-reco:hover { box-shadow: var(--pts-shadow-lg); border-color: rgba(41,107,239,.35); }

.pts-reco__logo-cadre {
  display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--pts-surface-alt); border: 1px solid var(--pts-line);
  border-radius: var(--pts-radius-sm); padding: 0;
}
.pts-reco__logo { width: 100%; height: 100%; object-fit: cover; display: block; }
.pts-reco__label {
  font-family: var(--pts-font-title); font-size: 1.12rem; color: var(--pts-ink); margin-bottom: .45rem;
}
.pts-reco__note {
  display: inline-flex; align-items: baseline; gap: .12rem; vertical-align: middle;
  background: var(--pts-green); color: #fff; border-radius: 8px; padding: .15rem .45rem; margin-left: .4rem;
}
.pts-reco__note b { font-family: var(--pts-font-title); font-weight: 700; font-size: .95rem; line-height: 1; }
.pts-reco__note i { font-style: normal; font-size: .64rem; opacity: .8; }

/* --- comparatif ---------------------------------------------------------- */
.pts-compare { border: 1px solid var(--pts-line); border-radius: var(--pts-radius); }
/* sans cela, chaque colonne s'ajuste a son contenu et les largeurs different */
.pts-compare table { margin-bottom: 0; border-collapse: separate; border-spacing: 0; table-layout: fixed; width: 100%; }
.pts-compare thead th:first-child { width: 9.5rem; }

.pts-compare thead th {
  background: var(--pts-navy); color: #fff; border: 0; vertical-align: top;
  padding: 1rem .9rem; border-left: 1px solid rgba(255,255,255,.12);
}
.pts-compare thead th:first-child { min-width: 9rem; border-left: 0; }
/* l'identite (logo + nom + note) est cliquable : c'est une vraie balise lien,
   sans transform au survol qui ferait fuir le bloc sous le curseur */
.pts-compare__ident { display: block; color: inherit; text-decoration: none; }
.pts-compare__ident:hover, .pts-compare__ident:focus { color: inherit; text-decoration: none; }
.pts-compare__ident:hover .pts-compare__logo { box-shadow: 0 0 0 3px var(--pts-gold); }
.pts-compare__ident:hover .pts-compare__nom { text-decoration: underline; text-underline-offset: 3px; }
.pts-compare__ident:focus-visible { outline: 3px solid var(--pts-gold); outline-offset: 3px; border-radius: 10px; }
.pts-compare__logo {
  display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  background: #fff; border-radius: 10px; padding: 0; margin: 0 0 .6rem;
  transition: box-shadow .18s ease;
}
/* filet : si aspect-ratio n'est pas honore, le calage par padding donne la meme hauteur */
@supports not (aspect-ratio: 16 / 9) {
  .pts-compare__logo { height: 0; padding-bottom: 56.25%; position: relative; }
  .pts-compare__logo img { position: absolute; inset: 0; }
}
/* « contain » et non « cover » : les visuels sont deja normalises en 16/9 par
   normalize_logos.py, donc les deux rendus sont identiques tant que le cadre
   respecte ce ratio. Mais si un navigateur calcule mal la hauteur du cadre
   — vu sur Safari iOS, ou les logos ressortaient agrandis et rognes jusqu'a
   l'aplat de couleur — « cover » zoome dans l'image, alors que « contain »
   garde le logo entier. Un logo ne se rogne jamais : au pire il flotte sur le
   fond blanc du cadre. */
.pts-compare__logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pts-compare__nom {
  display: block; font-family: var(--pts-font-title); font-weight: 700; font-size: 1rem;
  line-height: 1.3; min-height: 3rem;
}
.pts-compare__note {
  display: inline-block; margin-top: .2rem; font-size: .78rem; font-weight: 700;
  background: rgba(255,255,255,.14); border-radius: 999px; padding: .1rem .5rem; color: var(--pts-gold);
}

/* colonne mise en avant : un fil conducteur vertical pour l'oeil */
.pts-compare .is-top { background: var(--pts-gold-050); }
.pts-compare thead th.is-top { background: linear-gradient(180deg, #3b3a95, var(--pts-navy)); box-shadow: inset 0 3px 0 var(--pts-gold); }
.pts-compare__mise-en-avant {
  display: block; font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--pts-gold); margin-bottom: .45rem; min-height: 1.1rem;
}
/* place reservee sur les colonnes sans mention, pour que les logos s'alignent */
.pts-compare thead th:not(.is-top) .pts-compare__logo { margin-top: 1.55rem; }

.pts-compare tbody th {
  font-family: var(--pts-font-body); font-weight: 700; color: var(--pts-ink);
  font-size: .84rem; letter-spacing: .02em; text-transform: uppercase;
  background: var(--pts-surface-alt); white-space: nowrap;
  border-right: 2px solid var(--pts-line);
}
.pts-compare tbody td {
  font-size: .95rem; padding: .9rem 1rem; border-left: 1px solid var(--pts-line);
  border-top: 1px solid var(--pts-line);
}
.pts-compare tbody th { border-top: 1px solid var(--pts-line); }
.pts-compare tbody tr:hover td:not(.is-top) { background: var(--pts-blue-050); }
.pts-compare tbody tr:hover td.is-top { background: #fff3d1; }

.pts-compare .pts-valeur-forte { font-family: var(--pts-font-title); font-weight: 700; font-size: 1.05rem; color: var(--pts-ink); }
.pts-oui {
  display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; color: #0b7743;
  background: var(--pts-green-050); border-radius: 999px; padding: .2rem .65rem; font-size: .88rem;
}
.pts-non { color: var(--pts-muted); font-size: .92rem; }
.pts-compare tbody tr:last-child td { background: var(--pts-surface); padding-top: 1.1rem; padding-bottom: 1.1rem; }
.pts-compare tbody tr:last-child td.is-top { background: var(--pts-gold-050); }
/* Sur petit ecran, « table-layout: fixed » + « width: 100% » faisaient tenir les
   cinq colonnes dans la largeur du telephone : 49 px par produit, les noms se
   brisaient lettre a lettre et se chevauchaient. Le .table-responsive ne servait
   a rien puisque la table ne depassait jamais son cadre.
   On impose donc une largeur minimale : la table deborde, le cadre defile, et
   chaque colonne retrouve une largeur lisible. La colonne des criteres reste
   collee a gauche pendant le defilement, sans quoi on lit des valeurs sans
   savoir a quelle ligne elles repondent. */
@media (max-width: 991.98px) {
  .pts-compare table { min-width: 42rem; }
  .pts-compare thead th:first-child { width: 7rem; min-width: 7rem; }
  .pts-compare thead th:first-child,
  .pts-compare tbody th { position: sticky; left: 0; z-index: 2; }
  .pts-compare tbody th { box-shadow: 2px 0 0 var(--pts-line); }
  .pts-compare__nom { overflow-wrap: anywhere; }
}

/* --- colonne laterale : encart d'offre + sommaire -------------------------- */
/* les deux blocs suivent la lecture ensemble ; le sommaire cede la place
   quand la fenetre est courte, l'encart de conversion reste toujours visible */
.pts-aside {
  position: sticky; top: 92px; display: flex; flex-direction: column; gap: 1rem;
  max-height: calc(100vh - 110px);
}
.pts-aside .pts-toc { position: static; top: auto; max-height: none; min-height: 0; flex: 0 1 auto; }

/* encart d'offre des pages d'avis : le cadre entier est une balise lien
   (pas de stretched-link, pas de transform au survol : le bloc ne doit pas
   fuir sous le curseur). Trois elements seulement - le nom, la note, le bouton. */
.pts-offre-bloc {
  border-radius: 16px; overflow: hidden; flex: none;
  background: var(--pts-blue-050); border: 1px solid rgba(41, 107, 239, .25);
}
.pts-offre { display: block; padding: 1.15rem 1.2rem 1.2rem; color: var(--pts-navy); text-decoration: none; }
.pts-offre:hover, .pts-offre:focus { color: var(--pts-navy); text-decoration: none; }
.pts-offre:focus-visible { outline: 3px solid var(--pts-blue); outline-offset: -4px; }
.pts-offre__tete {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  margin-bottom: .9rem;
}
.pts-offre__nom {
  font-family: var(--pts-font-title); font-weight: 700;
  font-size: 1.12rem; line-height: 1.25; min-width: 0;
}
.pts-offre__note {
  flex: none; display: inline-flex; align-items: baseline; gap: .1rem;
  font-family: var(--pts-font-title); font-weight: 800; font-size: 1rem;
  border-radius: 999px; padding: .2rem .6rem; white-space: nowrap;
  background: #fff; color: var(--pts-blue-600); border: 1px solid rgba(41, 107, 239, .2);
}
.pts-offre__note i { font-style: normal; font-weight: 600; font-size: .75rem; opacity: .75; }
.pts-offre__cta {
  display: block; width: 100%; font-family: var(--pts-font-title); font-weight: 800;
  font-size: 1.18rem; line-height: 1.3; text-align: center; text-wrap: balance;
  border: 0; border-radius: 12px; padding: .9rem .8rem;
  background: var(--pts-blue); color: #fff;
  transition: background .15s ease, box-shadow .15s ease;
}
.pts-offre-bloc:hover .pts-offre__cta { background: var(--pts-blue-600); }
/* encart d'un guide qui pousse un outil sans en faire l'avis : un sur-titre,
   une ligne d'accroche et deux ou trois points, dans le meme cadre sobre */
.pts-offre__label {
  display: block; font-family: var(--pts-font-title); font-size: .7rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--pts-muted);
  margin-bottom: .55rem;
}
.pts-offre__accroche {
  display: block; font-size: .93rem; line-height: 1.45; color: var(--pts-body);
  margin: -.35rem 0 .75rem;
}
.pts-offre__points { display: block; margin-bottom: .95rem; }
.pts-offre__point {
  display: flex; gap: .5rem; font-size: .88rem; line-height: 1.35; color: var(--pts-body);
  padding: .32rem 0; border-top: 1px solid rgba(41, 107, 239, .18);
}
.pts-offre__coche { flex: none; color: var(--pts-green); font-weight: 700; }
.pts-avis-card__accroche { display: block; font-size: .95rem; color: var(--pts-body); margin: -.4rem 0 .9rem; }

/* --- fiche détaillée ----------------------------------------------------- */
/* le cadre porte le style, le lien porte le clic */
.pts-fiche-bloc {
  display: grid; grid-template-columns: 1fr;
  background: var(--pts-surface); border: 1px solid var(--pts-line);
  border-radius: var(--pts-radius); margin-bottom: 3.2rem; scroll-margin-top: 98px;
  box-shadow: var(--pts-shadow);
  transition: box-shadow .18s ease, border-color .18s ease;
}
/* pas d'overflow:hidden ici : il transformerait le bloc en conteneur de
   defilement et neutraliserait le position:sticky de la colonne de gauche */
.pts-fiche-bloc:hover { box-shadow: var(--pts-shadow-lg); border-color: rgba(41, 107, 239, .3); }
@media (min-width: 992px) { .pts-fiche-bloc { grid-template-columns: 19rem 1fr; } }

.pts-fiche__lien { display: block; color: inherit; text-decoration: none; }
.pts-fiche__lien:hover, .pts-fiche__lien:focus { color: inherit; text-decoration: none; }
.pts-fiche__lien:focus-visible { outline: 3px solid var(--pts-blue); outline-offset: 4px; border-radius: var(--pts-radius-sm); }

/* --- colonne d'achat ----------------------------------------------------- */
.pts-fiche__aside {
  background: var(--pts-surface-alt); border-bottom: 1px solid var(--pts-line);
  border-radius: var(--pts-radius) var(--pts-radius) 0 0;
  padding: 1.8rem; text-align: center;
}
@media (min-width: 992px) {
  .pts-fiche__aside {
    border-bottom: 0; border-right: 1px solid var(--pts-line);
    border-radius: var(--pts-radius) 0 0 var(--pts-radius);
  }
}
/* la colonne suit le defilement, bornee par la hauteur de son bloc. On l'active
   seulement quand il y a deux colonnes et assez de hauteur pour la loger. */
@media (min-width: 992px) and (min-height: 620px) {
  .pts-fiche__aside-inner { position: sticky; top: 76px; }
}
/* le logo occupe toute la colonne : c'est lui qui signale l'ouverture d'un
   nouveau bloc dans une page qui en aligne plusieurs */
.pts-fiche__logo {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; margin: 0 0 1.1rem;
  object-fit: contain; background: #fff; border: 1px solid var(--pts-line);
  border-radius: var(--pts-radius-sm); padding: .6rem;
}
.pts-fiche__badge {
  font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--pts-blue-600); margin: 0 0 .3rem;
}
.pts-fiche__nom { font-size: 1.42rem; line-height: 1.25; margin: 0 0 1rem; }
.pts-fiche__score {
  display: flex; align-items: baseline; justify-content: center; gap: .3rem; margin: 0 0 .2rem;
}
.pts-fiche__score b { font-family: var(--pts-font-title); font-size: 2.6rem; line-height: 1; color: var(--pts-navy); }
.pts-fiche__score i { font-style: normal; color: var(--pts-muted); font-size: 1rem; }
.pts-fiche__score-label {
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--pts-muted); margin-bottom: 1.4rem;
}
.pts-fiche__faits { text-align: left; margin: 0 0 1.4rem; }
.pts-fiche__faits > div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .55rem 0; border-bottom: 1px solid var(--pts-line); font-size: .9rem;
}
.pts-fiche__faits > div:last-child { border-bottom: 0; }
.pts-fiche__faits dt { margin: 0; font-weight: 500; color: var(--pts-muted); }
.pts-fiche__faits dd {
  margin: 0; text-align: right; font-family: var(--pts-font-title);
  font-weight: 600; color: var(--pts-ink);
}
.pts-fiche__aside .pts-cta { display: block; width: 100%; margin-bottom: .55rem; }
.pts-fiche__lien-avis { display: block; font-size: .9rem; font-weight: 600; color: var(--pts-navy); }
.pts-fiche__prix-detail { font-size: .8rem; color: var(--pts-muted); margin: 1rem 0 0; }

/* --- corps editorial ----------------------------------------------------- */
.pts-fiche__corps { padding: 1.8rem; }
.pts-fiche__accroche {
  font-family: var(--pts-font-title); font-weight: 600; font-size: 1.35rem;
  line-height: 1.35; color: var(--pts-ink); margin: 0 0 1.6rem;
}
/* un seul sous-titre pour tout le bloc : programme, plus, moins, mot de l'auteur */
.pts-fiche__soustitre {
  font-size: .84rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--pts-muted); margin: 0 0 .8rem; display: flex; align-items: center; gap: .5rem;
}
.pts-checklist--compact li { margin-bottom: .55rem; font-size: .96rem; }
.pts-fiche__pc {
  display: grid; grid-template-columns: 1fr; gap: 1.4rem;
  margin: 1.6rem 0; padding: 1.5rem 0;
  border-top: 1px solid var(--pts-line); border-bottom: 1px solid var(--pts-line);
}
@media (min-width: 768px) { .pts-fiche__pc { grid-template-columns: 1fr 1fr; gap: 2rem; } }
/* la couleur ne vit que sur la pastille et le picto : plus de cadre pastel */
.pts-fiche__pc-col .pts-fiche__soustitre::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.pts-fiche__pc-col.est-plus .pts-fiche__soustitre::before { background: var(--pts-green); }
.pts-fiche__pc-col.est-moins .pts-fiche__soustitre::before { background: var(--pts-red); }
.pts-liste-nue { list-style: none; padding-left: 0; margin: 0; }
.pts-liste-nue li { position: relative; padding-left: 1.6rem; margin-bottom: .55rem; font-size: .96rem; }
.pts-liste-nue li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.est-plus .pts-liste-nue li::before { content: "✓"; color: var(--pts-green); }
.est-moins .pts-liste-nue li::before { content: "✕"; color: var(--pts-red); }

/* commentaire personnel de l'auteur sur une formation */
.pts-fiche__mot { display: flex; gap: 1rem; align-items: flex-start; }
.pts-fiche__mot-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 40px; }
.pts-fiche__mot p:last-child { font-size: .95rem; }
.pts-fiche__pourqui {
  font-size: .93rem; color: var(--pts-muted);
  margin: 1.4rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--pts-line);
}
.pts-fiche__pourqui strong { color: var(--pts-ink); }

/* --- offre gratuite ------------------------------------------------------ */

/* --- barre d'action mobile ----------------------------------------------- */
.pts-sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1035;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: rgba(255,255,255,.97); backdrop-filter: blur(10px);
  border-top: 1px solid var(--pts-line); padding: .7rem 1rem;
  box-shadow: 0 -6px 20px -12px rgba(20,22,43,.4);
  transform: translateY(110%); transition: transform .25s ease;
}
.pts-sticky-cta.is-visible { transform: translateY(0); }
.pts-sticky-cta__label {
  display: block; font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--pts-muted);
  /* meme interligne que la puce promo qui prend sa place : la barre garde
     exactement la meme hauteur d'une page a l'autre */
  line-height: 1.25;
}
.pts-sticky-cta__nom { display: block; font-family: var(--pts-font-title); font-weight: 700; color: var(--pts-ink); font-size: .95rem; }
/* le code promo occupe la ligne du sur-titre, a la meme taille : la hauteur de
   la barre est fixee par le bouton, la colonne de texte a du mou */
.pts-sticky-cta__promo {
  display: flex; align-items: center; gap: .3rem; min-width: 0;
  font-size: .7rem; line-height: 1.25; white-space: nowrap;
  text-transform: uppercase; letter-spacing: .04em; color: var(--pts-muted);
}
.pts-sticky-cta__promo b { font-weight: 800; color: var(--pts-navy); letter-spacing: 0; }
/* le code ne se tronque jamais : un coupon coupe ne sert a rien. C'est le nom
   de l'offre, en dessous, qui absorbe le manque de place */
.pts-sticky-cta__promo code {
  flex: 0 0 auto;
  font-family: var(--pts-font-body); font-weight: 800; letter-spacing: .04em;
  color: var(--pts-navy); background: #fff;
  border: 1px dashed var(--pts-navy); border-radius: 5px;
  padding: 0 .3rem;
}
/* sous 360 px, le mot « code » cede la place : la puce en pointilles suffit */
@media (max-width: 359.98px) { .pts-sticky-cta__promo > span { display: none; } }
/* les noms d'outils longs ne doivent pas repousser le bouton hors de l'ecran */
.pts-sticky-cta__txt { min-width: 0; flex: 1 1 auto; }
.pts-sticky-cta__txt .pts-sticky-cta__nom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pts-sticky-cta .pts-cta { padding: .6rem 1.4rem; font-size: .98rem; flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 380px) { .pts-sticky-cta .pts-cta { padding: .6rem 1rem; font-size: .9rem; } }
/* barre au ras du bord bas sur iPhone : on repousse au-dessus de l'indicateur */
.pts-sticky-cta { padding-bottom: calc(.7rem + env(safe-area-inset-bottom)); }
@media (min-width: 992px) { .pts-sticky-cta { display: none; } }
@media (max-width: 991.98px) { body:has(.pts-sticky-cta) { padding-bottom: 4.5rem; } }

/* dans la carte de verdict : le prix prend la place de la note quand il n'y en a pas */
.pts-mini__note--prix {
  background: var(--pts-surface-alt); color: var(--pts-ink);
  font-family: var(--pts-font-title); font-weight: 700; font-size: .82rem;
  border: 1px solid var(--pts-line); white-space: nowrap;
}

/* ==========================================================================
   Section YouTube (accueil) — fond sombre, accents or, dans la palette du site
   ========================================================================== */
.pts-yt {
  position: relative; overflow: hidden;
  background: radial-gradient(80% 60% at 50% 0%, #1c1b4d 0%, var(--pts-ink) 55%, #0d0e1c 100%);
  color: rgba(255, 255, 255, .82);
  padding: 4.5rem 0 4rem;
}

.pts-yt__kicker {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .74rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--pts-gold);
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 200, 25, .3);
  padding: .4rem 1rem; border-radius: 999px;
}
.pts-yt__point {
  width: .45rem; height: .45rem; border-radius: 50%;
  background: var(--pts-gold); box-shadow: 0 0 0 3px rgba(255, 200, 25, .22);
}
.pts-yt__titre {
  color: #fff; margin: 1.2rem 0 .7rem;
  font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.5rem);
}
.pts-yt__accroche {
  color: rgba(255, 255, 255, .68); max-width: 34rem; margin: 0 auto 2.8rem; font-size: 1rem;
}

/* --- vidéo mise en avant */
.pts-yt__une {
  display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: center;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 18px; padding: 1.4rem; margin-bottom: 3rem;
}
@media (min-width: 768px) {
  .pts-yt__une { grid-template-columns: 1.35fr 1fr; gap: 2.2rem; padding: 1.6rem; }
}
.pts-yt__miniature {
  position: relative; display: block; border-radius: 12px; overflow: hidden;
  aspect-ratio: 16 / 9; background: rgba(255, 255, 255, .06);
}
.pts-yt__miniature img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pts-yt__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--pts-gold); color: #2b2000;
  display: grid; place-items: center; font-size: 1.5rem; padding-left: .2rem;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .7);
  transition: transform .18s ease;
}
.pts-yt__miniature:hover .pts-yt__play { transform: translate(-50%, -50%) scale(1.08); }
.pts-yt__play--petit { width: 42px; height: 42px; font-size: .9rem; top: auto; left: auto; right: .7rem; bottom: .7rem; transform: none; }
.pts-yt__carte:hover .pts-yt__play--petit { transform: scale(1.08); }

.pts-yt__date {
  display: block; font-size: .74rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255, 255, 255, .5); margin-bottom: .5rem;
}
.pts-yt__une-titre {
  color: #fff; font-size: clamp(1.15rem, 1rem + .8vw, 1.55rem);
  line-height: 1.3; margin: 0 0 .8rem;
}
.pts-yt__resume { color: rgba(255, 255, 255, .62); font-size: .95rem; margin-bottom: 1.3rem; }
.pts-yt__cta {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--pts-gold); color: #2b2000;
  font-family: var(--pts-font-title); font-weight: 700; font-size: 1rem;
  padding: .75rem 1.5rem; border-radius: 999px;
  transition: filter .16s ease;
}
.pts-yt__cta:hover { color: #2b2000; text-decoration: none; background: #ffd94a; }

/* --- vidéos récentes */
.pts-yt__entete {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.1rem;
}
.pts-yt__sous-titre {
  font-family: var(--pts-font-title); font-weight: 700; color: #fff; font-size: 1.05rem; margin: 0;
}
.pts-yt__toutes { color: rgba(255, 255, 255, .6); font-size: .9rem; font-weight: 600; }
.pts-yt__toutes:hover { color: var(--pts-gold); text-decoration: none; }

.pts-yt__grille { display: grid; grid-template-columns: 1fr; gap: 1.1rem; margin-bottom: 3rem; }
@media (min-width: 576px) { .pts-yt__grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .pts-yt__grille { grid-template-columns: repeat(3, 1fr); } }

.pts-yt__carte {
  display: block; background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .09); border-radius: 14px;
  padding: .85rem; text-decoration: none;
  transition: border-color .18s ease, background .18s ease;
}
.pts-yt__carte:hover { text-decoration: none; background: rgba(255, 255, 255, .07); border-color: rgba(255, 200, 25, .35); }
.pts-yt__carte-media {
  position: relative; display: block; border-radius: 10px; overflow: hidden;
  aspect-ratio: 16 / 9; background: rgba(255, 255, 255, .06); margin-bottom: .85rem;
}
.pts-yt__carte-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pts-yt__carte-titre {
  display: block; color: #fff; font-weight: 600; font-size: .95rem; line-height: 1.4;
}

/* --- bandeau d'abonnement */
.pts-yt__abo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 16px; padding: 1.4rem 1.6rem;
}
.pts-yt__abo-titre { font-family: var(--pts-font-title); font-weight: 700; color: #fff; font-size: 1.1rem; margin: 0 0 .2rem; }
.pts-yt__abo-texte { color: rgba(255, 255, 255, .6); font-size: .92rem; margin: 0; }
.pts-yt__abo-cta {
  background: var(--pts-gold); color: #2b2000;
  font-family: var(--pts-font-title); font-weight: 700;
  padding: .7rem 1.5rem; border-radius: 999px; white-space: nowrap;
}
.pts-yt__abo-cta:hover { background: #ffd94a; color: #2b2000; text-decoration: none; }

/* le bouton d'affiliation, rentre dans le bloc « En bref » */
.pts-callout__cta { margin-top: 1.2rem; }
.pts-callout__cta .pts-cta-wrap { margin: 0; }
.pts-callout__cta .pts-cta { width: 100%; max-width: 26rem; }

/* --------------------------------------------------------------- code promo */
/* dans un bouton : une seconde ligne, plus discrete que l'appel a l'action */
.pts-cta__promo {
  display: block; font-size: .82rem; font-weight: 700; opacity: .92; margin-top: .12rem;
}
/* a cote du bouton, dans l'encart lateral : un ticket detachable */
.pts-promo { display: flex; align-items: center; gap: .35rem; font-size: .8rem; }
.pts-promo code {
  font-family: var(--pts-font-body); font-weight: 800; letter-spacing: .04em;
  background: #fff; color: var(--pts-navy); border: 1px dashed var(--pts-navy);
  border-radius: 6px; padding: .1rem .45rem;
}
.pts-promo b { font-weight: 800; color: var(--pts-navy); }
/* ticket detachable, pose sous le bouton */
.pts-promo--ticket {
  justify-content: center; margin-top: .6rem; padding: .45rem .6rem;
  border: 1px dashed rgba(41, 107, 239, .5); border-radius: 8px;
  background: #fff; color: var(--pts-muted);
}

/* boutons de tete de rubrique, cote a cote plutot qu'empiles */
.pts-actions {
  display: grid; gap: 1rem; margin: 1.8rem 0;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .pts-actions { grid-template-columns: 1fr 1fr; } }
.pts-actions .pts-cta-wrap { margin: 0; }
.pts-actions .pts-cta { display: block; width: 100%; }

/* --------------------------------------------------------------- tete de rubrique */
/* l'accroche et les deux raccourcis tiennent dans le bandeau : avant, le
   lecteur traversait une zone blanche vide pour atteindre la grille */
.pts-archive-hero__intro { margin-top: 1.4rem; }
.pts-archive-hero__intro p { font-size: 1.05rem; line-height: 1.7; margin-bottom: .9rem; }
.pts-archive-hero__intro > :last-child { margin-bottom: 0; }

/* les raccourcis vers les comparatifs : blancs sur le fond bleu, pas des
   boutons bleus qui se fondraient dedans */
.pts-archive-hero .pts-actions { margin: 1.6rem 0 0; }
.pts-archive-hero .pts-cta {
  background: #fff; color: var(--pts-navy); text-align: left;
  box-shadow: 0 14px 30px -18px rgba(8, 10, 40, .9);
  padding-right: 2.6rem; position: relative;
}
.pts-archive-hero .pts-cta::after {
  content: "→"; position: absolute; right: 1.3rem; top: 50%; transform: translateY(-50%);
  font-weight: 700; color: var(--pts-blue);
}
.pts-archive-hero .pts-cta:hover, .pts-archive-hero .pts-cta:focus {
  background: #f2f6ff; color: var(--pts-navy);
}

/* sur petit ecran, la tete de rubrique doit tenir dans l'ecran : on resserre
   les espacements plutot que de masquer du texte */
@media (max-width: 767.98px) {
  .pts-archive-hero { padding-top: 1.6rem !important; padding-bottom: 1.8rem !important; }
  .pts-archive-hero h1 { font-size: 1.62rem; }
  .pts-archive-hero__intro { margin-top: 1rem; }
  .pts-archive-hero__intro p { font-size: .97rem; line-height: 1.6; margin-bottom: .7rem; }
  .pts-archive-hero .pts-actions { margin-top: 1.2rem; gap: .7rem; }
  .pts-archive-hero .pts-cta { padding-top: .7rem; padding-bottom: .7rem; font-size: .98rem; }
}

/* raccourcis poses a droite du bandeau : empiles, pas cote a cote */
/* .pts-hero met tous ses paragraphes en blanc : dans la carte, qui est
   blanche elle aussi, il faut rendre au texte sa couleur */
.pts-hero .pts-hero-card p { color: var(--pts-body); }
.pts-hero .pts-hero-card__label { color: var(--pts-muted); }
.pts-hero .pts-hero-card .pts-mini__nom { color: var(--pts-ink); }

/* --------------------------------------------------------------- mise en avant */
/* une offre maison posee au milieu d'un avis : fond plein pour marquer le
   changement de registre, et un bouton clair qui tranche sur le bleu */
.pts-avant {
  background: linear-gradient(140deg, var(--pts-navy) 0%, #2f3fa8 60%, var(--pts-blue) 100%);
  color: #fff; border-radius: 18px; padding: 1.8rem 1.9rem; margin: 2.4rem 0;
  box-shadow: 0 22px 44px -26px rgba(8, 10, 40, .8);
  text-align: center;
}
.pts-avant p { max-width: 44rem; margin-inline: auto; color: rgba(255, 255, 255, .88); }
.pts-avant__titre {
  font-family: var(--pts-font-title); font-weight: 700;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.95rem);
  line-height: 1.25; color: #fff; margin-bottom: .9rem;
}
.pts-avant p.pts-avant__titre { color: #fff; }
/* sans cela, `.pts-article strong` repeint le gras en encre sombre :
   illisible sur le fond bleu nuit du bloc */
.pts-avant strong, .pts-article .pts-avant strong { color: #fff; }
.pts-avant > :last-child { margin-bottom: 0; }
.pts-avant .pts-cta-wrap { display: block; margin: 1.3rem auto 0; max-width: none; }
.pts-avant .pts-cta {
  background: #fff; color: var(--pts-navy); width: 100%; max-width: 26rem;
  font-size: 1.22rem; line-height: 1.25;
}
/* la remise se lit comme une precision sous l'intitule, pas comme une
   deuxieme ligne de bouton : on la rapproche et on la contraste moins */
.pts-avant .pts-cta__promo { font-size: .88rem; margin-top: .3rem; opacity: .8; }
.pts-avant .pts-cta:hover, .pts-avant .pts-cta:focus { background: #f2f6ff; color: var(--pts-navy); }
/* le lien secondaire sorti du bloc cliquable : il vit juste en dessous, comme
   le « Lire mon avis détaillé » des cartes du podium */
.pts-avant__lien { text-align: center; margin: .7rem 0 2.4rem; font-size: .95rem; }

/* le meme bandeau, pose dans un article et entierement cliquable : le cadre
   est une balise lien (pas de stretched-link), et il ne bouge pas au survol */
.pts-avant--offre, .pts-article a.pts-avant--offre {
  display: block; text-decoration: none; border-bottom: 0; color: #fff;
  transition: box-shadow .18s ease;
}
.pts-article a.pts-avant--offre:hover, .pts-article a.pts-avant--offre:focus {
  background: linear-gradient(140deg, var(--pts-navy) 0%, #2f3fa8 60%, var(--pts-blue) 100%);
  color: #fff; text-decoration: none; border-bottom: 0;
  box-shadow: 0 26px 50px -24px rgba(8, 10, 40, .9);
}
.pts-avant--offre:focus-visible { outline: 3px solid var(--pts-gold); outline-offset: 3px; }
.pts-avant--offre .pts-avant__titre { display: block; }
.pts-avant--offre .pts-cta-wrap { display: block; }
.pts-avant--offre .pts-cta { display: inline-flex; align-items: center; justify-content: center; }

/* le ticket promo dans une carte : la colonne est etroite, le code passe donc
   sur sa propre ligne plutot que de casser la mention et la remise */
.pts-carte__promo {
  margin: .2rem 0 1.1rem; font-size: .78rem;
  flex-wrap: wrap; justify-content: center; row-gap: .3rem;
}
.pts-carte__promo span, .pts-carte__promo b { white-space: nowrap; }
.pts-carte__promo code {
  order: 3; flex: 0 0 100%; text-align: center;
  padding: .15rem .4rem; font-size: .82rem; white-space: nowrap;
}

/* --------------------------------------------------------------- recherche */
.pts-loupe {
  display: inline-flex; align-items: center; gap: .5rem;
  background: none; border: 0; color: var(--pts-ink); padding: .45rem .5rem;
  border-radius: 999px; cursor: pointer; line-height: 1;
  transition: background .15s ease, color .15s ease;
}
.pts-loupe:hover, .pts-loupe:focus { background: var(--pts-blue-050); color: var(--pts-blue-600); }
.pts-recherche {
  border-top: 1px solid var(--pts-line); background: var(--pts-surface);
  padding: 1.1rem 0 1.3rem; box-shadow: 0 18px 30px -24px rgba(20, 22, 43, .5);
}
.pts-recherche__form { display: flex; align-items: center; gap: .6rem; }
.pts-recherche__champ {
  flex: 1 1 auto; border: 1px solid var(--pts-line); border-radius: 999px;
  padding: .7rem 1.1rem; font-size: 1rem; font-family: var(--pts-font-body);
}
.pts-recherche__champ:focus { outline: 3px solid rgba(41, 107, 239, .25); border-color: var(--pts-blue); }
.pts-recherche__fermer {
  flex: none; border: 0; background: none; font-size: 1.6rem; line-height: 1;
  color: var(--pts-muted); cursor: pointer; padding: 0 .3rem;
}
.pts-recherche__aide { font-size: .82rem; color: var(--pts-muted); margin: .6rem 0 0; }
.pts-recherche__resultats { list-style: none; padding: 0; margin: .4rem 0 0; }
.pts-recherche__resultats li + li { border-top: 1px solid var(--pts-line); }
.pts-recherche__resultats a {
  display: block; padding: .7rem .3rem; text-decoration: none; color: inherit;
  border-radius: var(--pts-radius-sm);
}
.pts-recherche__resultats a:hover, .pts-recherche__resultats a:focus {
  background: var(--pts-blue-050); text-decoration: none;
}
.pts-recherche__titre {
  display: block; font-family: var(--pts-font-title); font-weight: 700;
  font-size: 1rem; color: var(--pts-ink);
}
.pts-recherche__meta { display: block; font-size: .85rem; color: var(--pts-muted); margin-top: .1rem; }

/* ================================================================ gabarits sur mesure
   Composants partages par les pages a propos et coaching : marqueurs de section, frise de
   parcours, tuiles de chiffres et cartes d'offre. */

/* --- marqueur de section : numéro + filet + intitulé */
.pts-marque { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.4rem; }
.pts-marque__num {
  font-family: var(--pts-font-title); font-weight: 700; font-size: .95rem;
  color: var(--pts-gold); letter-spacing: .05em;
}
.pts-marque__filet { flex: 1 1 auto; height: 1px; background: var(--pts-line); }
.pts-hero .pts-marque__filet { background: rgba(255, 255, 255, .25); }
.pts-marque__kicker {
  font-family: var(--pts-font-title); font-size: .72rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--pts-muted);
}
.pts-hero .pts-marque__kicker { color: rgba(255, 255, 255, .75); }

.pts-pg-h2 {
  font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem); line-height: 1.2;
  margin: 0 0 2.2rem; max-width: 22ch;
}

/* --- en-tête : portrait + identité */
.pts-pg-portrait {
  width: 100%; height: auto; border-radius: var(--pts-radius);
  box-shadow: 0 24px 48px -24px rgba(8, 10, 40, .7);
}
.pts-pg-titre {
  font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4rem); line-height: 1.03;
  margin: 0 0 1.1rem; color: #fff;
}
.pts-pg-titre span { color: var(--pts-gold); }
.pts-pg-lead {
  font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); line-height: 1.55;
  color: rgba(255, 255, 255, .9); margin: 0 0 1.1rem; max-width: 46ch;
}
.pts-pg-role {
  font-family: var(--pts-font-title); font-size: .8rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .6); margin: 0 0 1.2rem;
}
.pts-pg-reseaux { display: flex; flex-wrap: wrap; gap: .5rem; }
.pts-pg-reseaux a {
  display: inline-block; padding: .4rem 1rem; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .28); color: #fff;
  font-size: .88rem; font-weight: 600; text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
.pts-pg-reseaux a:hover { background: rgba(255, 255, 255, .12); border-color: var(--pts-gold); color: #fff; }

/* --- tuiles de chiffres */
.pts-pg-chiffres {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  margin-top: 2.8rem; background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--pts-radius); overflow: hidden;
}
@media (min-width: 768px) { .pts-pg-chiffres { grid-template-columns: repeat(4, 1fr); } }
.pts-pg-chiffre { background: rgba(20, 19, 74, .55); padding: 1.3rem 1.2rem; }
.pts-pg-chiffre__valeur {
  font-family: var(--pts-font-title); font-weight: 700; line-height: 1;
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem); color: var(--pts-gold); margin: 0 0 .35rem;
}
.pts-pg-chiffre__valeur i { font-style: normal; font-size: .45em; margin-left: .2em; color: rgba(255,255,255,.7); }
.pts-pg-chiffre__label { font-size: .88rem; line-height: 1.4; color: rgba(255, 255, 255, .78); margin: 0; }
/* même bloc, posé sur fond clair */
.pts-pg-chiffres--clair {
  background: var(--pts-line); border-color: var(--pts-line); margin-top: 2.6rem;
}
.pts-pg-chiffres--clair .pts-pg-chiffre { background: var(--pts-surface); }
.pts-pg-chiffres--clair .pts-pg-chiffre__valeur { color: var(--pts-navy); }
.pts-pg-chiffres--clair .pts-pg-chiffre__label { color: var(--pts-body); }

/* --- frise du parcours */
.pts-frise { list-style: none; margin: 0; padding: 0; position: relative; }
.pts-frise::before {
  content: ""; position: absolute; left: 7px; top: .6rem; bottom: .6rem;
  width: 2px; background: var(--pts-line);
}
.pts-frise__etape { position: relative; padding: 0 0 2.1rem 2.4rem; }
.pts-frise__etape:last-child { padding-bottom: 0; }
.pts-frise__puce {
  position: absolute; left: 0; top: .45rem; width: 16px; height: 16px;
  border-radius: 50%; background: var(--pts-surface);
  border: 3px solid var(--pts-line);
}
.pts-frise__etape.is-actuel .pts-frise__puce { border-color: var(--pts-gold); background: var(--pts-gold); }
.pts-frise__annee {
  display: flex; flex-wrap: wrap; align-items: center; gap: .7rem;
  font-family: var(--pts-font-title); font-weight: 700; font-size: 1.05rem;
  color: var(--pts-navy); margin: 0 0 .25rem;
}
.pts-frise__etiquette {
  font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--pts-blue-600); background: var(--pts-blue-050);
  border-radius: 999px; padding: .2rem .7rem;
}
.pts-frise__titre { font-size: 1.22rem; margin: 0 0 .5rem; }
.pts-frise__texte { color: var(--pts-body); margin: 0; max-width: 62ch; }
.pts-frise__lien { display: inline-block; margin-top: .7rem; font-weight: 600; font-size: .93rem; }
@media (min-width: 992px) {
  /* l'année passe en colonne à gauche : la frise se lit d'un coup d'œil */
  .pts-frise::before { left: 8.5rem; }
  .pts-frise__etape { padding-left: 11rem; }
  .pts-frise__puce { left: 8rem; }
  .pts-frise__annee {
    position: absolute; left: 0; top: .3rem; width: 7.2rem;
    text-align: right; flex-direction: column; align-items: flex-end; gap: .3rem;
  }
}

/* --- cartes de conviction */
.pts-pg-vision {
  height: 100%; background: var(--pts-surface); border: 1px solid var(--pts-line);
  border-radius: var(--pts-radius); padding: 1.8rem;
}
.pts-pg-vision__kicker {
  font-family: var(--pts-font-title); font-size: .7rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--pts-muted); margin: 0 0 .5rem;
}
.pts-pg-vision__titre { font-size: 1.3rem; line-height: 1.3; margin: 0 0 1.2rem; }
.pts-pg-vision__points li {
  position: relative; padding-left: 1.6rem; margin-bottom: .8rem;
  color: var(--pts-body); font-size: .97rem; line-height: 1.6;
}
.pts-pg-vision__points li:last-child { margin-bottom: 0; }
.pts-pg-vision__points li::before {
  content: ""; position: absolute; left: 0; top: .6rem;
  width: 7px; height: 7px; border-radius: 50%; background: var(--pts-gold);
}

/* --- cartes d'offre */
.pts-pg-offre {
  height: 100%; display: flex; flex-direction: column;
  background: var(--pts-surface); border: 1px solid var(--pts-line);
  border-radius: var(--pts-radius); padding: 1.7rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pts-pg-offre:hover { border-color: rgba(41, 107, 239, .35); box-shadow: var(--pts-shadow); }
/* l'offre principale se distingue par un aplat navy, pas par un bandeau criard */
.pts-pg-offre--vedette { background: var(--pts-navy); border-color: var(--pts-navy); }
.pts-pg-offre--vedette:hover { background: #1b1a5c; border-color: #1b1a5c; }
.pts-pg-offre__kicker {
  font-family: var(--pts-font-title); font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--pts-blue-600); margin: 0 0 .5rem;
}
.pts-pg-offre--vedette .pts-pg-offre__kicker { color: var(--pts-gold); }
.pts-pg-offre__titre { font-size: 1.2rem; line-height: 1.3; margin: 0 0 .8rem; }
.pts-pg-offre--vedette .pts-pg-offre__titre { color: #fff; }
.pts-pg-offre__texte { color: var(--pts-body); font-size: .96rem; margin: 0 0 1.2rem; }
.pts-pg-offre--vedette .pts-pg-offre__texte { color: rgba(255, 255, 255, .8); }
.pts-pg-offre__faits { margin: 0 0 1.4rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.pts-pg-offre__faits li {
  font-size: .82rem; font-weight: 600; border-radius: 999px; padding: .3rem .8rem;
  background: var(--pts-surface-alt); color: var(--pts-ink);
}
.pts-pg-offre--vedette .pts-pg-offre__faits li { background: rgba(255, 255, 255, .12); color: #fff; }
.pts-pg-offre__cta {
  margin-top: auto; align-self: flex-start; font-family: var(--pts-font-title);
  font-weight: 700; font-size: .95rem; text-decoration: none;
  border-radius: 999px; padding: .6rem 1.3rem;
  background: var(--pts-navy-050); color: var(--pts-navy);
  transition: background .15s ease;
}
.pts-pg-offre__cta:hover { background: var(--pts-blue-050); color: var(--pts-navy); text-decoration: none; }
.pts-pg-offre--vedette .pts-pg-offre__cta { background: var(--pts-gold); color: var(--pts-navy); }
.pts-pg-offre--vedette .pts-pg-offre__cta:hover { background: #ffd451; color: var(--pts-navy); }

/* --- règles de travail */
.pts-pg-regles { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .pts-pg-regles { grid-template-columns: 1fr 1fr; } }
.pts-pg-regle {
  display: flex; gap: 1rem; align-items: flex-start;
  background: var(--pts-surface); border: 1px solid var(--pts-line);
  border-radius: var(--pts-radius); padding: 1.3rem 1.4rem;
}
.pts-pg-regle__num {
  flex: 0 0 auto; font-family: var(--pts-font-title); font-weight: 700;
  font-size: 1.1rem; color: var(--pts-gold);
}
.pts-pg-regle__titre { font-size: 1.02rem; margin: 0 0 .3rem; }
.pts-pg-regle__texte { font-size: .94rem; color: var(--pts-body); }

/* --- page coaching : listes de bénéfices dans les cartes de domaine */
.pts-pg-liste li {
  position: relative; padding-left: 1.5rem; margin-bottom: .5rem;
  font-size: .93rem; line-height: 1.5; color: var(--pts-body);
}
.pts-pg-liste li:last-child { margin-bottom: 0; }
.pts-pg-liste li::before {
  content: "→"; position: absolute; left: 0; top: 0;
  color: var(--pts-blue); font-weight: 700;
}
.pts-pg-offre--vedette .pts-pg-liste li { color: rgba(255, 255, 255, .85); }
.pts-pg-offre--vedette .pts-pg-liste li::before { color: var(--pts-gold); }

/* --- déroulé du coaching : étapes numérotées */
.pts-etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 768px) { .pts-etapes { grid-template-columns: 1fr 1fr; } }
.pts-etape {
  display: flex; gap: 1.1rem; align-items: flex-start;
  background: var(--pts-surface); border: 1px solid var(--pts-line);
  border-radius: var(--pts-radius); padding: 1.4rem 1.5rem;
}
.pts-etape__num {
  flex: 0 0 auto; font-family: var(--pts-font-title); font-weight: 700;
  font-size: 1.4rem; line-height: 1; color: var(--pts-gold);
}
.pts-etape__titre { font-size: 1.08rem; margin: 0 0 .35rem; }
.pts-etape__texte { font-size: .95rem; color: var(--pts-body); }

/* --- pour qui / pas pour qui : la couleur ne vit que sur le picto */
.pts-profil__points li {
  position: relative; padding-left: 1.7rem; margin-bottom: .7rem;
  color: var(--pts-body); font-size: .97rem; line-height: 1.55;
}
.pts-profil__points li:last-child { margin-bottom: 0; }
.pts-profil__points li::before {
  position: absolute; left: 0; top: 0; font-weight: 700;
}
.pts-profil--pour .pts-profil__points li::before { content: "✓"; color: var(--pts-green); }
.pts-profil--contre .pts-profil__points li::before { content: "✕"; color: var(--pts-red); }
.pts-profil--pour { border-top: 3px solid var(--pts-green); }
.pts-profil--contre { border-top: 3px solid var(--pts-red); }

/* --- mosaïque des derniers articles (accueil) : une grande une + des brèves */
.pts-mosaique { display: grid; grid-template-columns: 1fr; gap: 1.6rem; }
@media (min-width: 992px) { .pts-mosaique { grid-template-columns: 1.15fr 1fr; gap: 2rem; } }

.pts-mosaique__une {
  background: var(--pts-surface); border: 1px solid var(--pts-line);
  border-radius: var(--pts-radius); overflow: hidden; height: 100%;
  display: flex; flex-direction: column;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pts-mosaique__une:hover { border-color: rgba(41, 107, 239, .3); box-shadow: var(--pts-shadow); }
.pts-mosaique__media { display: block; aspect-ratio: 16 / 9; background: var(--pts-surface-alt); }
.pts-mosaique__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pts-mosaique__corps { padding: 1.5rem 1.6rem; display: flex; flex-direction: column; gap: .7rem; }
/* sans cela la pastille herite de l'etirement du conteneur flex et court
   sur toute la largeur de la carte */
.pts-mosaique__corps .pts-tag { align-self: flex-start; }
.pts-mosaique__titre { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); line-height: 1.28; margin: 0; }
.pts-mosaique__titre a { color: var(--pts-ink); text-decoration: none; }
.pts-mosaique__titre a:hover { color: var(--pts-blue-600); }
.pts-mosaique__extrait { color: var(--pts-body); margin: 0; font-size: .98rem; }

/* les brèves : image en vignette, titre seul — le poids visuel reste à la une */
.pts-mosaique__liste { display: grid; gap: 1rem; align-content: stretch; }
.pts-breve {
  display: flex; gap: 1rem; align-items: center;
  background: var(--pts-surface); border: 1px solid var(--pts-line);
  border-radius: var(--pts-radius); padding: .8rem; overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pts-breve:hover { border-color: rgba(41, 107, 239, .3); box-shadow: var(--pts-shadow); }
.pts-breve__media {
  flex: 0 0 auto; width: 104px; aspect-ratio: 16 / 10; display: block;
  border-radius: var(--pts-radius-sm); overflow: hidden; background: var(--pts-surface-alt);
}
.pts-breve__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pts-breve__corps { min-width: 0; }
.pts-breve__cat {
  display: block; font-family: var(--pts-font-title); font-size: .66rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--pts-muted); margin-bottom: .25rem;
}
.pts-breve__titre { font-size: 1rem; line-height: 1.35; margin: 0; }
.pts-breve__titre a { color: var(--pts-ink); text-decoration: none; }
.pts-breve__titre a:hover { color: var(--pts-blue-600); }
@media (max-width: 480px) {
  .pts-breve__media { width: 84px; }
  .pts-breve__titre { font-size: .95rem; }
}

/* ============================================================ guide métiers
   Gabarit templates/metiers.html : fiches de poste, tableaux, bascule IA. */

.pts-pg-intro { color: var(--pts-body); max-width: 68ch; margin: -1.4rem 0 2rem; font-size: 1.02rem; }
.pts-pg-note { color: var(--pts-muted); font-size: .93rem; margin: 1.4rem 0 0; max-width: 72ch; }
/* les blocs sans numéro n'ont pas à réserver la gouttière */
.pts-pg-regles .pts-pg-regle { align-items: flex-start; }

/* --- fiches de poste */
.pts-metiers { display: grid; gap: 1.2rem; }
.pts-metier {
  background: var(--pts-surface); border: 1px solid var(--pts-line);
  border-radius: var(--pts-radius); padding: 1.6rem 1.7rem; scroll-margin-top: 106px;
}
/* les deux métiers que je pratique au quotidien portent un filet doré */
.pts-metier--vedette { border-left: 3px solid var(--pts-gold); }
.pts-metier__tete {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: flex-start;
  justify-content: space-between; padding-bottom: 1rem; margin-bottom: 1rem;
  border-bottom: 1px solid var(--pts-line);
}
.pts-metier__famille {
  font-family: var(--pts-font-title); font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--pts-blue-600); margin: 0 0 .25rem;
}
.pts-metier--vedette .pts-metier__famille { color: #96700a; }
.pts-metier__nom { font-size: 1.35rem; margin: 0; }
.pts-metier__paie { display: flex; gap: 1.6rem; margin: 0; flex: 0 0 auto; }
.pts-metier__paie dt {
  font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--pts-muted); margin-bottom: .15rem;
}
.pts-metier__paie dd {
  margin: 0; font-family: var(--pts-font-title); font-weight: 600;
  color: var(--pts-ink); font-size: .98rem; white-space: nowrap;
}
.pts-metier__resume { color: var(--pts-body); margin: 0 0 1.2rem; max-width: 70ch; }
.pts-metier__grille { display: grid; grid-template-columns: 1fr; gap: 1.3rem; }
@media (min-width: 768px) { .pts-metier__grille { grid-template-columns: 1.1fr 1fr; gap: 2.2rem; } }
.pts-metier__st {
  font-size: .72rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--pts-muted); margin: 0 0 .6rem;
}
.pts-metier__grille > div > .pts-metier__st + p + .pts-metier__st { margin-top: 1.1rem; }
.pts-metier__txt { color: var(--pts-body); font-size: .95rem; margin: 0; }
.pts-metier__note {
  margin: 1.3rem 0 0; padding-top: 1rem; border-top: 1px solid var(--pts-line);
  font-size: .92rem; color: var(--pts-muted);
}
.pts-liste-fleche li {
  position: relative; padding-left: 1.5rem; margin-bottom: .5rem;
  font-size: .95rem; color: var(--pts-body);
}
.pts-liste-fleche li:last-child { margin-bottom: 0; }
.pts-liste-fleche li::before {
  content: "→"; position: absolute; left: 0; top: 0; color: var(--pts-blue); font-weight: 700;
}
.pts-metier--vedette .pts-liste-fleche li::before { color: var(--pts-gold); }

/* --- tableaux du guide */
.scroll-x { overflow-x: auto; border: 1px solid var(--pts-line); border-radius: var(--pts-radius); background: var(--pts-surface); }
.pts-tableau { width: 100%; border-collapse: collapse; margin: 0; }
.pts-tableau th, .pts-tableau td { padding: .85rem 1.1rem; text-align: left; border-bottom: 1px solid var(--pts-line); vertical-align: top; }
.pts-tableau thead th {
  font-family: var(--pts-font-title); font-size: .72rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--pts-muted);
  background: var(--pts-surface-alt); white-space: nowrap;
}
.pts-tableau tbody th {
  font-family: var(--pts-font-title); font-weight: 600; color: var(--pts-ink);
  font-size: .97rem; white-space: nowrap;
}
.pts-tableau tbody tr:last-child th, .pts-tableau tbody tr:last-child td { border-bottom: 0; }
.pts-tableau td { color: var(--pts-body); font-size: .95rem; }
.pts-tableau .num { font-family: var(--pts-font-title); font-weight: 600; color: var(--pts-ink); white-space: nowrap; }
.pts-tableau--paie tbody tr:hover th, .pts-tableau--paie tbody tr:hover td { background: var(--pts-blue-050); }

/* --- la bascule IA : quatre statuts, quatre couleurs de filet */
.pts-ia { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 900px) { .pts-ia { grid-template-columns: 1fr 1fr; } }
.pts-ia__bloc {
  background: var(--pts-surface); border: 1px solid var(--pts-line);
  border-top: 3px solid var(--pts-line-fort, var(--pts-line));
  border-radius: 3px 3px var(--pts-radius) var(--pts-radius); padding: 1.4rem 1.5rem;
}
.pts-ia__bloc--perdu { border-top-color: var(--pts-red); }
.pts-ia__bloc--garde { border-top-color: var(--pts-green); }
.pts-ia__bloc--gagne { border-top-color: var(--pts-gold); }
.pts-ia__bloc--neuf { border-top-color: var(--pts-blue); }
.pts-ia__titre { font-size: 1.1rem; margin: 0 0 .9rem; }
.pts-ia__points li {
  position: relative; padding-left: 1.4rem; margin-bottom: .7rem;
  font-size: .95rem; line-height: 1.55; color: var(--pts-body);
}
.pts-ia__points li:last-child { margin-bottom: 0; }
.pts-ia__points li::before {
  content: ""; position: absolute; left: 0; top: .58rem;
  width: 7px; height: 7px; border-radius: 50%; background: var(--pts-line-fort, #c6ccdf);
}
.pts-ia__bloc--perdu .pts-ia__points li::before { background: var(--pts-red); }
.pts-ia__bloc--garde .pts-ia__points li::before { background: var(--pts-green); }
.pts-ia__bloc--gagne .pts-ia__points li::before { background: var(--pts-gold); }
.pts-ia__bloc--neuf .pts-ia__points li::before { background: var(--pts-blue); }

/* --------------------------------------------------------------- mouvement réduit */
/* le systeme d'exploitation peut demander de limiter les animations : on coupe
   toutes les transitions plutot que de laisser bouger ce qui reste */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------- formulaires */
/* Contact et newsletter. Champs larges, libelles au-dessus : on lit le nom du
   champ avant de cliquer dedans, et la saisie reste lisible sur mobile. */
.pts-form { max-width: 40rem; margin: 1.8rem 0; }
.pts-form__ligne { margin-bottom: 1.1rem; }
.pts-form__label {
  display: block; font-family: var(--pts-font-title); font-weight: 700;
  font-size: .95rem; color: var(--pts-ink); margin-bottom: .35rem;
}
.pts-form__champ {
  width: 100%; padding: .8rem 1rem; font-size: 1rem; font-family: inherit;
  color: var(--pts-ink); background: var(--pts-surface);
  border: 1px solid var(--pts-line); border-radius: var(--pts-radius-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pts-form__champ:focus {
  outline: 0; border-color: var(--pts-blue);
  box-shadow: 0 0 0 3px rgba(41, 107, 239, .18);
}
textarea.pts-form__champ { resize: vertical; min-height: 9rem; line-height: 1.6; }

/* le pot de miel : invisible a l'oeil et au lecteur d'ecran, mais present dans
   le DOM pour que les robots le remplissent */
.pts-form__miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.pts-form__envoi { width: 100%; max-width: 22rem; }
.pts-form__envoi:disabled { opacity: .6; cursor: progress; }

/* le retour du serveur : vert si c'est parti, rouge sinon. Vide, il ne prend
   aucune place — sinon le bouton sauterait a chaque envoi. */
.pts-form__reponse { margin: 0 0 1rem; font-size: .95rem; font-weight: 600; }
.pts-form__reponse:empty { display: none; }
.pts-form__reponse.is-ok { color: var(--pts-green); }
.pts-form__reponse.is-ko { color: var(--pts-red); }