/* ============================================================
   pages-concurrents.css — les 50 pages indexées concurrents
   ============================================================
   Troisième version, 11 août 2026. Les deux premières ont été refusées
   par Noah le même jour. Celle-ci est écrite à partir de MESURES, pas
   d'hypothèses : styles calculés relevés dans le navigateur sur
   clientbase.fr, et pied de page repris tel qu'il est rendu.

   CE QUE LES DEUX PREMIÈRES VERSIONS ONT RATÉ

   1. LE PIED DE PAGE N'ÉTAIT PAS LE BON. Grief le plus net (« le bas de
      page, c'est même pas le bon ») et le plus vérifiable. Le vrai pied
      du site est `.cbf` : fond gris, 616 px, un filet en dégradé, une
      accroche en deux lignes, un sceau circulaire, CINQ colonnes
      (Produit · Ressources · Comparatifs · Légal · Nous contacter) et
      l'heure de Paris. Les pages statiques servaient un `.pied` blanc à
      quatre colonnes : une copie devenue obsolète. Il est désormais
      REPRIS TEL QUEL depuis le site rendu, dans
      `outils/fragments/pied-de-page.html`, et porte son propre style.

   2. L'ÉCHELLE DES TITRES ÉTAIT CELLE DE L'ACCUEIL. Mesuré :
      accueil h1 74 px, h2 46 px ; page tarifs h1 60 px, h2 30 px.
      (Ne jamais ecrire deux etoiles suivies d'une barre oblique
      dans un commentaire CSS : la sequence ferme le commentaire.)
      Les pages internes du site sont un cran en dessous, et ces pages
      sont des pages internes.

   3. h3 EN COOLVETICA ALORS QUE LE SITE LES MET EN GEIST. Mesuré sur
      l'accueil : h3 = Geist 18,5 px poids 640. Les nôtres sortaient en
      Coolvetica 21 px — assez pour faire « ce ne sont plus les bonnes
      polices », alors que h1 et h2 étaient corrects.

   4. LA MAQUETTE DE TÉLÉPHONE À DROITE. « Ça rend vraiment pas bien à
      droite. » Les pages internes du site n'ont PAS d'illustration : le
      hero est CENTRÉ — eyebrow, titre, sous-titre, un bouton. Rien
      d'autre. C'est ce qu'on fait ici.

   5. TROP LONG. Le pied `.cbf` porte DÉJÀ le grand appel à l'action
      final (« On pourrait continuer longtemps. Le plus simple, c'est
      d'essayer. »). En ajouter un avant lui, c'était le dire deux fois.
      La page s'arrête sur son contenu ; le pied conclut.

   ⚠️ Dépend de `/app/styles/tokens.css`, chargée AVANT.
   ⚠️ Les 50 pages sont ÉCRITES par `outils/pages-concurrents.js`.
   ============================================================ */

/* ------------------------------------------------------------
   1. SOCLE
   ------------------------------------------------------------ */
body{ background: var(--bg); overflow-x: clip; max-width: 100%;
      position: relative; display: flow-root; }
.pc-wrap{ max-width: 1120px; margin: 0 auto; padding: 0 28px; }
.pc-section{ padding: clamp(48px, 5.5vw, 82px) 0; }
.pc-gris{ background: var(--bg-gris); }
main{ padding: 0; }
@media (max-width: 760px){ .pc-wrap{ padding: 0 18px; } }

/* L'ÉCHELLE DES PAGES INTERNES · relevée sur /tarifs, pas sur l'accueil.
   tokens.css pose h1 à 72 px et h2 à 46 px pour la page d'accueil ; une
   page de contenu se tient un cran en dessous, sinon le titre occupe
   l'écran entier et tout le reste a l'air d'une note de bas de page. */
.pc-h1{
  font-family: var(--ff-display); font-weight: 400;
  font-size: clamp(36px, 4.4vw, 60px); line-height: 0.98;
  letter-spacing: -.015em; color: var(--ink); margin: 0;
  text-wrap: balance;
}
.pc-h2{
  font-family: var(--ff-display); font-weight: 400;
  font-size: clamp(26px, 2.6vw, 34px); line-height: 1.04;
  letter-spacing: -.012em; color: var(--ink); margin: 0;
  text-wrap: balance;
}
/* h3 EN GEIST · c'est ce que fait le site (mesuré : Geist 18,5 px, 640).
   Coolvetica s'arrête aux h1 et h2. */
.pc-h3{
  font-family: var(--ff-text); font-weight: 640; font-size: 17.5px;
  line-height: 1.3; letter-spacing: -.005em; color: var(--ink); margin: 0;
}

/* Le surligneur des titres. Le site ne colore pas seulement le mot : il
   pose une bande pâle derrière, comme un feutre. Relevé sur la page
   « Dis-nous ce que tu fais ». */
.pc-hl{
  color: var(--accent);
  background: color-mix(in oklab, var(--accent) 13%, transparent);
  padding: 0 .09em; border-radius: 3px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* ------------------------------------------------------------
   2. HERO · CENTRÉ, SANS ILLUSTRATION
   ------------------------------------------------------------ */
.pc-hero{ padding: clamp(46px, 5.5vw, 84px) 0 clamp(38px, 4.5vw, 62px); text-align: center; }
.pc-hero-in{ max-width: 780px; margin: 0 auto; }
.pc-eyebrow{
  font-size: 13px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent-ink); margin: 0 0 16px;
}
.pc-hero .pc-h1{ margin-bottom: 20px; }
.pc-lede{
  font-size: clamp(16px, 1.5vw, 18px); line-height: 1.62;
  color: var(--ink-3); max-width: 620px; margin: 0 auto;
}
.pc-hero-cta{ margin-top: 30px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
/* Le bouton principal des pages internes est VIOLET avec une lueur, pas
   noir. Le noir est celui des sections de l'accueil. */
.btn-cb{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px; padding: 0 28px; border-radius: 999px;
  font-family: var(--ff-text); font-size: 15.5px; font-weight: 600; letter-spacing: -.005em;
  background: var(--accent); color: #fff; border: 1px solid transparent;
  box-shadow: 0 14px 34px -14px color-mix(in oklab, var(--accent) 80%, transparent);
  transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s ease;
}
.btn-cb:hover{ transform: translateY(-2px); box-shadow: 0 20px 42px -14px color-mix(in oklab, var(--accent) 85%, transparent); text-decoration: none; }
.btn-cb-2{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px; padding: 0 26px; border-radius: 999px;
  font-family: var(--ff-text); font-size: 15.5px; font-weight: 600;
  background: transparent; color: var(--ink); border: 1px solid var(--line-strong);
  transition: background .16s ease, border-color .16s ease, transform .2s ease;
}
.btn-cb-2:hover{ background: var(--bg-alt); border-color: var(--ink-4); transform: translateY(-1px); text-decoration: none; }
.pc-meta{ margin: 18px 0 0; font-size: 13px; color: var(--ink-4); }
.pc-meta span{ margin: 0 9px; }
@media (max-width: 560px){
  .pc-hero-cta{ flex-direction: column; align-items: stretch; }
  .pc-hero-cta > a{ width: 100%; }
  .pc-section{ padding: 40px 0; }
}

/* ------------------------------------------------------------
   3. EN-TÊTE DE SECTION
   ------------------------------------------------------------ */
.pc-tete{ text-align: center; max-width: 660px; margin: 0 auto 36px; }
.pc-tete .pc-h2{ margin: 0; }
.pc-tete p{ margin: 14px auto 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-3); max-width: 560px; }

/* ------------------------------------------------------------
   4. LE COMPARATIF · report du tableau de l'accueil
   ------------------------------------------------------------ */
.pc-compare{
  max-width: 860px; margin: 0 auto;
  border: 1px solid var(--line); border-radius: 20px; background: var(--surface);
  box-shadow: 0 24px 54px -34px rgba(15,18,30,.22);
}
.pc-compare-row{ display: grid; grid-template-columns: 1.7fr 1fr 1fr; align-items: center; }
.pc-compare-feat{ padding: 16px 24px; font-size: 14.5px; font-weight: 540; color: var(--ink-2); }
.pc-compare-c{ display: flex; align-items: center; justify-content: center; padding: 14px 12px; align-self: stretch; font-size: 14px; color: var(--ink-3); text-align: center; }
.pc-compare-us{
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--accent) 24%, transparent);
  color: var(--ink); font-weight: 600;
}
.pc-compare-row:first-child .pc-compare-us{ border-radius: 14px 14px 0 0; }
.pc-compare-row:last-child .pc-compare-us{ border-radius: 0 0 14px 14px; }
.pc-compare-row:not(.pc-compare-head):hover{ background: color-mix(in oklab, var(--ink) 3%, transparent); }
.pc-compare-head .pc-compare-c{ font-size: 12.5px; font-weight: 600; color: var(--ink-4); padding-top: 17px; padding-bottom: 13px; }
.pc-compare-head .pc-compare-us{ color: var(--accent-ink); font-weight: 700; flex-direction: column; gap: 4px; }
.pc-badge{ font-size: 9px; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; background: var(--accent); color: #fff; padding: 3px 8px; border-radius: 999px; }
@media (max-width: 620px){
  .pc-compare{ border-radius: 18px; overflow: hidden; }
  .pc-compare-row{ grid-template-columns: minmax(0,1.5fr) 0.9fr 0.9fr; }
  .pc-compare-feat{ padding: 13px 8px 13px 15px; font-size: 12.5px; line-height: 1.32; color: var(--ink); }
  .pc-compare-c{ padding: 13px 6px; font-size: 12.5px; }
  .pc-compare-head{ background: color-mix(in oklab, var(--ink) 2.5%, transparent); }
  .pc-compare-head .pc-badge{ display: none; }
  .pc-compare-us{ box-shadow: inset 1.5px 0 0 color-mix(in oklab, var(--accent) 22%, transparent); }
  .pc-compare-row:first-child .pc-compare-us, .pc-compare-row:last-child .pc-compare-us{ border-radius: 0; }
}
.pc-compare.duel .pc-compare-row{ grid-template-columns: 1.5fr 1fr 1fr 1fr; }
@media (max-width: 620px){
  .pc-compare.duel .pc-compare-row{ grid-template-columns: minmax(0,1.4fr) .9fr .9fr; }
  .pc-compare.duel .pc-compare-row > *:nth-child(3){ display: none; }
}

/* ------------------------------------------------------------
   5. LE BLOC DE RÉPONSE · une forme par famille
   ------------------------------------------------------------
   Cinquante pages qui empilent les mêmes sections dans le même ordre
   sont cinquante fois la même page. Chaque famille a donc sa forme. */

/* 5a · Deux colonnes qui s'opposent */
.pc-duo{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 860px; margin: 0 auto; }
.pc-duo-col{ background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 24px 24px 26px; }
.pc-gris .pc-duo-col{ box-shadow: 0 16px 36px -30px rgba(15,18,30,.2); }
.pc-duo-col.vert{ background: var(--sage-soft); border-color: var(--sage-soft-2); }
.pc-duo-col.rose{ background: var(--rose-soft); border-color: var(--rose-soft-2); }
.pc-duo-col .pc-h3{ margin-bottom: 14px; }
.pc-duo-col ul{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.pc-duo-col li{ display: flex; gap: 10px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.pc-duo-col li::before{ content: "✓"; color: var(--sage-ink); font-weight: 700; flex-shrink: 0; }
.pc-duo-col.rose li::before{ content: "×"; color: var(--danger); font-size: 16px; line-height: 1.3; }
@media (max-width: 720px){ .pc-duo{ grid-template-columns: 1fr; gap: 12px; } }

/* 5b · Trois étapes numérotées */
.pc-etapes{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 940px; margin: 0 auto; counter-reset: et; }
.pc-etape{ background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 24px 22px; position: relative; counter-increment: et; }
.pc-gris .pc-etape{ box-shadow: 0 16px 36px -30px rgba(15,18,30,.2); }
.pc-etape::before{
  content: counter(et); position: absolute; top: 20px; right: 22px;
  font-family: var(--ff-display); font-size: 34px; line-height: 1; color: var(--accent-soft-2);
}
.pc-etape .pc-h3{ margin-bottom: 8px; padding-right: 36px; }
.pc-etape p{ font-size: 14px; line-height: 1.58; color: var(--ink-3); margin: 0; }
@media (max-width: 720px){ .pc-etapes{ grid-template-columns: 1fr; gap: 12px; } }

/* 5c · La part prélevée, en barre */
.pc-part{ max-width: 640px; margin: 0 auto; }
.pc-part-barre{ display: flex; height: 56px; border-radius: 13px; overflow: hidden; border: 1px solid var(--line); }
.pc-part-eux{ background: var(--danger); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 650; }
.pc-part-vous{ background: var(--sage-soft); color: var(--sage-ink); flex: 1; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 650; }
.pc-part-leg{ display: flex; justify-content: space-between; margin-top: 11px; font-size: 13px; color: var(--ink-4); }
.pc-part-note{ text-align: center; margin: 20px auto 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-3); max-width: 560px; }

/* 5d · Deux profils face à face */
.pc-profils{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 860px; margin: 0 auto; }
.pc-profil{ background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 26px 24px; }
.pc-gris .pc-profil{ box-shadow: 0 16px 36px -30px rgba(15,18,30,.2); }
.pc-profil.nous{ background: var(--accent-soft); border-color: var(--accent-soft-2); }
.pc-qui{ font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); margin: 0 0 10px; }
.pc-profil.nous .pc-qui{ color: var(--accent-ink); }
.pc-profil .pc-h3{ margin-bottom: 10px; font-size: 18px; }
.pc-profil p{ font-size: 14.5px; line-height: 1.6; color: var(--ink-2); margin: 0; }
@media (max-width: 720px){ .pc-profils{ grid-template-columns: 1fr; gap: 12px; } }

/* 5e · Trois chiffres */
.pc-chiffres{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 840px; margin: 0 auto; }
.pc-chiffre{ background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 24px 22px; text-align: center; }
.pc-gris .pc-chiffre{ box-shadow: 0 16px 36px -30px rgba(15,18,30,.2); }
.pc-chiffre b{ display: block; font-family: var(--ff-display); font-weight: 400; font-size: clamp(28px, 3vw, 36px); line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.pc-chiffre b.rouge{ color: var(--danger); }
.pc-chiffre b.vert{ color: var(--sage-ink); }
.pc-chiffre b.indigo{ color: var(--accent); }
.pc-chiffre span{ display: block; margin-top: 9px; font-size: 13.5px; color: var(--ink-3); line-height: 1.45; }
@media (max-width: 720px){
  .pc-chiffres{ grid-template-columns: 1fr; gap: 10px; }
  .pc-chiffre{ display: flex; align-items: center; gap: 16px; text-align: left; padding: 18px 20px; }
  .pc-chiffre b{ font-size: 27px; min-width: 92px; flex-shrink: 0; }
  .pc-chiffre span{ margin-top: 0; }
}

/* ------------------------------------------------------------
   6. FAQ · trois questions
   ------------------------------------------------------------ */
.pc-faq{ max-width: 760px; margin: 0 auto; display: grid; gap: 12px; }
.pc-faq-q{ background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px 24px; }
.pc-gris .pc-faq-q{ box-shadow: 0 16px 36px -30px rgba(15,18,30,.2); }
.pc-faq-q .pc-h3{ margin-bottom: 7px; }
.pc-faq-q p{ font-size: 14.5px; line-height: 1.62; color: var(--ink-2); margin: 0; }
.pc-faq-q a{ color: var(--accent-ink); font-weight: 550; }
.pc-faq-q a:hover{ text-decoration: underline; }

/* ------------------------------------------------------------
   7. LE FIL DE LIENS ET LES SOURCES · avant le pied de page
   ------------------------------------------------------------
   Discrets exprès. Le maillage sert au référencement et au lecteur qui
   creuse ; il ne doit pas peser autant que le contenu. */
.pc-bas{ padding: 34px 0 40px; border-top: 1px solid var(--line); }
.pc-liens{ display: flex; flex-wrap: wrap; gap: 7px 8px; justify-content: center; max-width: 820px; margin: 0 auto; }
.pc-liens a{
  font-size: 12.5px; color: var(--ink-3); padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); transition: all .16s ease;
}
.pc-liens a:hover{ color: var(--accent-ink); border-color: var(--accent-soft-2); background: var(--accent-soft); text-decoration: none; }
.pc-sources{ max-width: 720px; margin: 24px auto 0; text-align: center; font-size: 12px; line-height: 1.62; color: var(--ink-4); }
.pc-sources strong{ color: var(--ink-3); font-weight: 600; }
.pc-sources a{ color: var(--ink-3); text-decoration: underline; text-underline-offset: 2px; }
.pc-sources a:hover{ color: var(--accent-ink); }

/* ============================================================
   10. LES BLOCS VISUELS ET LEURS ANIMATIONS
   ============================================================
   Ajoutes le 12 aout 2026. Noah, apres la troisieme version : « je
   prefere la DA des trois dernieres pages [...] avec des elements un peu
   plus visuels comme ca, moins de texte et surtout plus court [...]
   peut-etre aussi animes, un peu pour qu'on comprenne tres rapidement ».

   Les trois pages citees — Planity ou ClientBase, Resilier Planity,
   Commission Planity — avaient un point commun que les autres n'avaient
   pas : elles OUVRENT SUR UN OBJET, pas sur une liste a puces. Deux
   cartes qui se font face, trois etapes numerotees, une barre coupee en
   deux. On comprend avant d'avoir lu.

   Cette section generalise le principe : chaque famille ouvre desormais
   sur une figure, et chaque figure s'anime en entrant dans l'ecran.

   TOUT RESTE LISIBLE SANS JAVASCRIPT — voir la parade en 10.8.
   ============================================================ */

/* --- 10.1 · L'apparition, commune a tous les blocs ------------------- */
[data-anim]{
  opacity: 0; transform: translateY(14px);
  transition: opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1);
}
[data-anim].vu{ opacity: 1; transform: none; }

/* --- 10.2 · La barre de commission ---------------------------------- */
.pc-part-eux{ width: 0; transition: width 1s cubic-bezier(.22,1,.36,1) .1s; }
[data-anim].vu .pc-part-eux{ width: var(--part); }
.pc-part-chiffres{
  display: flex; justify-content: center; gap: clamp(20px, 5vw, 56px);
  margin-top: 26px; text-align: center;
}
.pc-part-chiffre b{
  display: block; font-family: var(--ff-display); font-weight: 400;
  font-size: clamp(26px, 3vw, 34px); line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.pc-part-chiffre.eux b{ color: var(--danger); }
.pc-part-chiffre.vous b{ color: var(--sage-ink); }
.pc-part-chiffre span{ display: block; margin-top: 7px; font-size: 12.5px; color: var(--ink-4); }

/* --- 10.3 · La facture comparee (alternatives, prix) -----------------
   Deux barres l'une sous l'autre, a l'echelle. C'est la figure qui
   remplace les deux colonnes a puces : on voit l'ecart avant de lire. */
.pc-facture{ max-width: 640px; margin: 0 auto; display: grid; gap: 20px; }
.pc-fl-tete{ display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 9px; }
.pc-fl-nom{ font-size: 14.5px; font-weight: 600; color: var(--ink); }
.pc-fl-val{ font-family: var(--ff-display); font-size: 23px; color: var(--ink); font-variant-numeric: tabular-nums; }
.pc-fl.eux .pc-fl-val{ color: var(--danger); }
.pc-fl.nous .pc-fl-val{ color: var(--sage-ink); }
.pc-fl-piste{ height: 16px; border-radius: 999px; background: var(--bg-alt); overflow: hidden; }
.pc-fl-jauge{ height: 100%; border-radius: 999px; width: 0;
  transition: width 1.05s cubic-bezier(.22,1,.36,1) .1s; }
[data-anim].vu .pc-fl-jauge{ width: var(--w); }
.pc-fl.eux .pc-fl-jauge{ background: linear-gradient(90deg, color-mix(in oklab, var(--danger) 70%, white), var(--danger)); }
.pc-fl.nous .pc-fl-jauge{ background: linear-gradient(90deg, var(--sage), var(--sage-ink)); min-width: 12px; }
.pc-fl-note{ margin-top: 8px; font-size: 12.5px; color: var(--ink-4); }
.pc-facture-pied{ text-align: center; margin-top: 6px; font-size: 13.5px; color: var(--ink-3); }

/* --- 10.4 · Les etapes, reliees par une ligne qui se trace ----------- */
.pc-etapes{ position: relative; }
.pc-etapes::after{
  content: ""; position: absolute; left: 12%; right: 12%; top: 38px; height: 2px;
  background: linear-gradient(90deg, var(--accent-soft-2), var(--accent), var(--accent-soft-2));
  transform: scaleX(0); transform-origin: left center; z-index: 0;
  transition: transform 1.1s cubic-bezier(.22,1,.36,1) .15s;
}
[data-anim].vu.pc-etapes::after{ transform: scaleX(1); }
.pc-etape{ position: relative; z-index: 1; }
.pc-etape::before{
  content: counter(et); position: absolute; top: 18px; right: 20px;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-display); font-size: 19px; line-height: 1;
  background: var(--accent-soft); color: var(--accent-ink);
  border: 2px solid var(--surface);
}
@media (max-width: 720px){ .pc-etapes::after{ display: none; } }

/* --- 10.5 · Le bilan en trois piliers (avis) -------------------------
   Trois cartes, un pictogramme, un mot fort, une ligne. C'est tout ce
   qu'on retient d'une page d'avis. */
.pc-piliers{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 900px; margin: 0 auto; }
.pc-pilier{ background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  padding: 26px 22px; text-align: center; }
.pc-gris .pc-pilier{ box-shadow: 0 16px 36px -30px rgba(15,18,30,.2); }
.pc-pilier .ico{
  width: 46px; height: 46px; border-radius: 14px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 21px; background: var(--accent-soft); color: var(--accent-ink);
}
.pc-pilier.bon .ico{ background: var(--sage-soft); color: var(--sage-ink); }
.pc-pilier.moins .ico{ background: var(--rose-soft); color: var(--rose-ink); }
.pc-pilier .pc-h3{ margin-bottom: 7px; }
.pc-pilier p{ font-size: 14px; line-height: 1.55; color: var(--ink-3); margin: 0; }
@media (max-width: 720px){
  .pc-piliers{ grid-template-columns: 1fr; gap: 12px; }
  .pc-pilier{ display: flex; align-items: flex-start; gap: 16px; text-align: left; padding: 20px; }
  .pc-pilier .ico{ margin: 0; flex-shrink: 0; width: 40px; height: 40px; }
}

/* --- 10.6 · Le pictogramme des profils (comparaisons) ---------------- */
.pc-profil .ico{
  width: 42px; height: 42px; border-radius: 13px; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; background: var(--bg-alt); color: var(--ink-3);
}
.pc-profil.nous .ico{ background: var(--surface); color: var(--accent-ink); }

/* --- 10.7 · LA RELANCE · le retour vers le site ----------------------
   Noah : « venir surtout les rediriger facilement vers le site apres ».
   Le pied de page porte le grand appel a l'action, mais il est en bas :
   quelqu'un qui a compris a la moitie de la page n'a aucune raison de
   descendre jusque-la. Cette bande se glisse apres la figure et le
   tableau — au moment ou la demonstration est faite. */
.pc-relance{ padding: 0 0 clamp(48px, 5.5vw, 82px); }
.pc-relance-box{
  max-width: 860px; margin: 0 auto; border-radius: 24px;
  padding: clamp(28px, 3.4vw, 40px) clamp(24px, 3vw, 40px);
  background: var(--accent-soft); border: 1px solid var(--accent-soft-2);
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.pc-relance-txt{ flex: 1 1 300px; min-width: 0; }
.pc-relance-txt b{
  display: block; font-family: var(--ff-display); font-weight: 400;
  font-size: clamp(21px, 2.2vw, 27px); line-height: 1.1; color: var(--ink);
  letter-spacing: -.01em;
}
/* ENFANT DIRECT, et c'est important : le titre au-dessus contient lui
   aussi un <span> — celui du mot surligne. Ecrit sans le chevron, ce
   selecteur l'attrapait, et le mot surligne se retrouvait en petit texte
   gris sur une bande pleine largeur au milieu du titre. */
.pc-relance-txt > span{ display: block; margin-top: 8px; font-size: 14.5px; color: var(--ink-3); line-height: 1.5; }
.pc-relance .btn-cb{ flex-shrink: 0; }
@media (max-width: 620px){
  .pc-relance-box{ flex-direction: column; align-items: stretch; text-align: center; gap: 20px; }
  .pc-relance .btn-cb{ width: 100%; }
}

/* --- 10.8 · La parade sans JavaScript --------------------------------
   Si le script ne charge pas — bloqueur, erreur reseau, robot qui
   n'execute rien — `.vu` n'est jamais pose et tout ce qui part a
   `opacity: 0` resterait invisible. Le <html> porte `pc-sans-js` dans le
   fichier source ; le script la retire des qu'il demarre. Tant qu'elle
   est la, rien n'est masque.

   C'est une regle CSS et non une detection JavaScript : elle protege
   aussi le cas ou le fichier est bloque avant de s'executer. */
.pc-sans-js [data-anim]{ opacity: 1; transform: none; }
.pc-sans-js .pc-part-eux{ width: var(--part); }
.pc-sans-js .pc-fl-jauge{ width: var(--w); }
.pc-sans-js .pc-etapes::after{ transform: scaleX(1); }

@media (prefers-reduced-motion: reduce){
  [data-anim]{ opacity: 1 !important; transform: none !important; }
  .pc-part-eux{ width: var(--part) !important; transition: none !important; }
  .pc-fl-jauge{ width: var(--w) !important; transition: none !important; }
  .pc-etapes::after{ transform: scaleX(1) !important; transition: none !important; }
}

/* ------------------------------------------------------------
   8. ACCESSIBILITÉ
   ------------------------------------------------------------ */
*:focus-visible{ outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
.skip-link{
  position: absolute; top: -100px; left: 12px; z-index: 99;
  padding: 10px 16px; background: var(--accent); color: #fff;
  border-radius: 0 0 10px 10px; font-weight: 600; font-size: 14px; transition: top .2s;
}
.skip-link:focus{ top: 0; text-decoration: none; }
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* ============================================================
   9. L'EN-TÊTE EN PILULE
   ============================================================
   Recopié de `seo-landing.css` (section 4), lui-même report du composant
   de l'application. C'est la seule partie du chrome que Noah n'a pas
   remise en cause — le pied de page, si, et il vient désormais du site
   rendu plutôt que d'une copie.

   Le calque de couleur `.voile` part de zéro : l'en-tête étant une
   pilule qui FLOTTE, ce qui est derrière elle doit être peint par un
   élément qui commence en haut de page, jamais par la première section.
   ============================================================ */
.voile{
  position: absolute; top: 0; left: 0; right: 0; height: 460px;
  pointer-events: none; z-index: 0; overflow: hidden;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--accent) 5%, var(--bg)) 0%, var(--bg) 92%);
}
.nav-wrap, main, footer{ position: relative; z-index: 1; }

/* ------------------------------------------------------------
   4. EN-TÊTE EN PILULE FLOTTANTE
   ------------------------------------------------------------
   Report fidèle du composant de l'application (app/src/shared.jsx, ~l.3127).
   Valeurs identiques : 14 px du haut, hauteur 60, rayon 999, blanc à 74 %
   avec flou d'arrière-plan.

   `margin-top` DOIT valoir exactement `top` : un élément `sticky` reste
   dans le flux au repos et ne se décale qu'au défilement. Sans cette
   marge, la pilule est collée en haut à l'arrêt puis SAUTE de 14 px au
   premier scroll. Le piège est documenté dans shared.jsx. */
.nav-wrap{
  position: sticky; top: 14px; z-index: 40; margin-top: 14px;
  display: flex; justify-content: center;
  padding: 0 clamp(14px, 3vw, 26px); pointer-events: none;
}
.pilule{
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; width: 100%; max-width: 1320px;
  min-height: 60px; padding: 8px 10px 8px 20px; border-radius: 999px;
  background: rgba(255,255,255,0.74);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(20,20,22,0.07);
  box-shadow: 0 12px 40px -18px rgba(20,20,40,0.25);
  pointer-events: auto;
}
.nav-gauche{ display: flex; align-items: center; gap: clamp(16px, 2.4vw, 34px); }
.marque{ display: inline-flex; align-items: center; gap: 9px; }
.marque:hover{ text-decoration: none; }
.marque .mark{ position: relative; display: inline-flex; transition: transform .28s cubic-bezier(.22,1,.36,1); }
.marque:hover .mark{ transform: translateY(-1.5px); }
/* Ombre en élément positionné plutôt qu'en `filter` : un drop-shadow sur
   un SVG force le rendu GPU et fait perdre l'antialiasing sous-pixel —
   le logo devient flou. Même choix que dans l'application. */
.marque .halo{
  position: absolute; inset: 0; border-radius: 8.5px;
  background: var(--accent); opacity: 0; filter: blur(11px);
  transform: translateY(4px) scale(.95);
  transition: opacity .28s ease; z-index: -1; pointer-events: none;
}
.marque:hover .halo{ opacity: .3; }
.marque .mot{
  font-family: var(--ff-logo); font-weight: 600; font-size: 20px;
  letter-spacing: -.025em; color: var(--ink); transition: color .25s ease;
}
.marque:hover .mot{ color: var(--accent-ink); }
.nav-liens{ display: flex; gap: 4px; align-items: center; }
.nav-liens a{
  padding: 8px 14px; font-size: 14px; font-weight: 460;
  color: var(--ink-3); border-radius: 999px; transition: color .15s, background .15s;
}
.nav-liens a:hover{ color: var(--ink); background: var(--bg-alt); text-decoration: none; }
.nav-liens a.actif{ color: var(--accent-ink); background: var(--accent-soft); font-weight: 580; }
.nav-cta{
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 18px; border-radius: 999px;
  background: var(--accent); color: #fff;
  font-size: 14px; font-weight: 600; letter-spacing: -.01em;
  transition: transform .15s ease, box-shadow .2s ease; white-space: nowrap;
}
.nav-cta:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px -8px rgba(90,80,230,.5); text-decoration: none; }
@media (max-width: 900px){ .nav-liens{ display: none; } }
/* Téléphone : la pilule RESTE une pilule (arbitrage de Noah du 27 juillet,
   cf. app/index.html). On réduit la hauteur et le décalage, rien d'autre. */
@media (max-width: 720px){
  .nav-wrap{ top: 10px; margin-top: 10px; }
  .pilule{ min-height: 54px; padding: 7px 8px 7px 16px; background: rgba(255,255,255,0.86); }
  .marque .mot{ font-size: 18px; }
  .nav-cta{ padding: 10px 15px; font-size: 13.5px; }
}
@media (max-width: 380px){
  .nav-cta{ padding: 9px 13px; font-size: 12.5px; }
}


/* ============================================================
   AJOUT DU 25 AOUT 2026 · les blocs des pages « réponse »
   ============================================================
   Cette feuille ne sert plus seulement les 50 pages concurrents : elle
   sert aussi les pages fabriquées par `outils/pages-seo.js` (questions
   pratiques, outils génériques, villes). Même grammaire visuelle, même
   échelle de titres, même pied de page — un seul design à maintenir.

   POURQUOI CES BLOCS-LA ET PAS D'AUTRES

   Ces pages visent deux lecteurs qui ne lisent pas pareil :

   · Le visiteur humain, qui balaie la page et cherche SA phrase.
   · L'assistant IA (ChatGPT, Perplexity, Claude), qui cherche un
     passage court, autonome et factuel à recopier dans sa réponse.

   Les deux veulent la même chose : la réponse D'ABORD, le raisonnement
   ensuite. D'ou `.pc-reponse`, posé juste sous le titre. Un modèle qui
   cite une page cite presque toujours son premier paragraphe utile ;
   s'il commence par « Depuis 2019, la prise de rendez-vous… », c'est ça
   qui sera cité, et ça ne répond à rien.

   Aucun bloc déroulant ici (règle de la charte) : tout est ouvert.
   ============================================================ */

/* --- LA REPONSE COURTE -----------------------------------------------
   Le bloc le plus important de la page. Fond teinté accent, filet à
   gauche, texte un cran plus gros que la prose. La même phrase est
   recopiée dans le JSON-LD `Answer` : la réponse affichée et la réponse
   déclarée sont le même texte, jamais deux versions qui divergent. */
.pc-reponse{
  max-width: 780px; margin: 0 auto;
  background: var(--accent-soft); border: 1px solid var(--accent-soft-2);
  border-left: 4px solid var(--accent); border-radius: 0 18px 18px 0;
  padding: 22px 26px 20px;
}
.pc-reponse .pc-rep-t{
  font-family: Geist, system-ui, sans-serif; font-size: 12px; font-weight: 650;
  letter-spacing: .09em; text-transform: uppercase; color: var(--accent-ink);
  margin: 0 0 8px;
}
.pc-reponse p{ font-size: 16.5px; line-height: 1.66; color: var(--ink); margin: 0 0 10px; }
.pc-reponse p:last-child{ margin-bottom: 0; }
.pc-reponse strong{ font-weight: 620; color: var(--ink); }
.pc-reponse a{ color: var(--accent-ink); font-weight: 550; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 760px){ .pc-reponse{ padding: 18px 18px 16px; } .pc-reponse p{ font-size: 15.5px; } }

/* --- LE SOMMAIRE ------------------------------------------------------
   Des ancres vers les h2 de la page. Deux effets : Google peut en tirer
   des liens de section dans ses résultats, et un lecteur arrivé d'une
   recherche précise saute au bon endroit plutôt que de repartir. */
.pc-sommaire{
  max-width: 780px; margin: 26px auto 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 18px 22px;
}
.pc-sommaire p{
  font-family: Geist, system-ui, sans-serif; font-size: 12px; font-weight: 650;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 10px;
}
.pc-sommaire ol{ margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; counter-reset: som; }
.pc-sommaire li{ counter-increment: som; font-size: 14.5px; line-height: 1.5; }
.pc-sommaire li::before{
  content: counter(som); display: inline-grid; place-items: center;
  width: 20px; height: 20px; margin-right: 9px; border-radius: 6px;
  background: var(--accent-soft); color: var(--accent-ink);
  font-size: 11.5px; font-weight: 650; vertical-align: -3px;
}
.pc-sommaire a{ color: var(--ink-2); text-decoration: none; }
.pc-sommaire a:hover{ color: var(--accent-ink); text-decoration: underline; }

/* --- LA PROSE ---------------------------------------------------------
   Le corps de texte long. Ces pages répondent à une question : elles ont
   besoin de paragraphes, pas seulement de cartes. Largeur limitée à
   72 caractères environ, la mesure confortable en lecture suivie. */
.pc-prose{ max-width: 760px; margin: 0 auto; }
.pc-prose p{ font-size: 15.5px; line-height: 1.72; color: var(--ink-2); margin: 0 0 16px; }
.pc-prose p:last-child{ margin-bottom: 0; }
.pc-prose strong{ color: var(--ink); font-weight: 620; }
.pc-prose a{ color: var(--accent-ink); font-weight: 550; }
.pc-prose a:hover{ text-decoration: underline; }
.pc-prose .pc-h3{ margin: 26px 0 9px; }
.pc-prose ul, .pc-prose ol{ margin: 0 0 16px; padding-left: 0; list-style: none; display: grid; gap: 9px; }
.pc-prose li{ font-size: 15px; line-height: 1.62; color: var(--ink-2); padding-left: 26px; position: relative; }
.pc-prose ul li::before{
  content: ""; position: absolute; left: 6px; top: 9px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.pc-prose ol{ counter-reset: pro; }
.pc-prose ol li{ counter-increment: pro; }
.pc-prose ol li::before{
  content: counter(pro) "."; position: absolute; left: 0; top: 0;
  color: var(--accent-ink); font-weight: 650; font-size: 14px;
}

/* --- LES ETAPES NUMEROTEES -------------------------------------------
   Pour les pages « comment faire ». Chaque étape est autonome : c'est ce
   qui permet au JSON-LD `HowTo` de décrire la même chose que l'écran. */
.pc-marches{ max-width: 820px; margin: 0 auto; display: grid; gap: 12px; counter-reset: mar; }
.pc-marche{
  counter-increment: mar; position: relative;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 20px 24px 18px 66px;
}
.pc-gris .pc-marche{ box-shadow: 0 16px 36px -30px rgba(15,18,30,.2); }
.pc-marche::before{
  content: counter(mar); position: absolute; left: 22px; top: 20px;
  width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px;
  background: var(--accent); color: #fff;
  font-family: Geist, system-ui, sans-serif; font-size: 14px; font-weight: 650;
}
.pc-marche .pc-h3{ margin-bottom: 6px; }
.pc-marche p{ font-size: 14.5px; line-height: 1.62; color: var(--ink-2); margin: 0; }
.pc-marche a{ color: var(--accent-ink); font-weight: 550; }
@media (max-width: 760px){ .pc-marche{ padding: 18px 18px 16px 56px; } .pc-marche::before{ left: 16px; top: 18px; } }

/* --- LE TABLEAU GENERIQUE --------------------------------------------
   `.pc-compare` est taillé pour « eux / nous ». Ici il faut un tableau
   ordinaire à n colonnes : prix des outils, formules, délais. Il défile
   horizontalement sur téléphone plutôt que d'écraser ses colonnes. */
.pc-tab-wrap{ max-width: 900px; margin: 0 auto; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pc-tab{
  width: 100%; border-collapse: separate; border-spacing: 0; min-width: 540px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  font-size: 14.5px;
}
.pc-tab th, .pc-tab td{ padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.pc-tab thead th{
  background: var(--bg-gris); color: var(--ink);
  font-family: Geist, system-ui, sans-serif; font-size: 13px; font-weight: 650;
  letter-spacing: .01em; white-space: nowrap;
}
.pc-tab tbody tr:last-child th, .pc-tab tbody tr:last-child td{ border-bottom: 0; }
.pc-tab tbody th{ font-weight: 600; color: var(--ink); }
.pc-tab td{ color: var(--ink-2); }
.pc-tab .oui{ color: var(--sage-ink); font-weight: 620; }
.pc-tab .non{ color: var(--rose-ink); font-weight: 620; }
.pc-tab .nous{ background: var(--accent-soft); color: var(--accent-ink); font-weight: 620; }
.pc-tab caption{
  caption-side: bottom; text-align: left; padding: 10px 2px 0;
  font-size: 12.5px; line-height: 1.55; color: var(--ink-3);
}

/* --- L'ENCADRE DE MISE EN GARDE --------------------------------------
   Sable, pas rouge : c'est un point d'attention, pas une erreur. Sert
   surtout à dire ce qu'on ne sait PAS (un tarif non publié, une règle
   qui dépend du cas) plutôt qu'à combler par une approximation. */
.pc-garde{
  max-width: 780px; margin: 22px auto 0;
  background: var(--warn-soft); border: 1px solid var(--warn-soft-2);
  border-radius: 16px; padding: 18px 22px;
  display: grid; grid-template-columns: 26px 1fr; gap: 13px; align-items: start;
}
.pc-garde .ico{ font-size: 19px; line-height: 1.2; }
.pc-garde p{ font-size: 14.5px; line-height: 1.62; color: var(--warn-ink); margin: 0 0 8px; }
.pc-garde p:last-child{ margin-bottom: 0; }
.pc-garde strong{ font-weight: 650; }
.pc-garde a{ color: var(--warn-ink); font-weight: 600; text-decoration: underline; }

/* --- LA DEFINITION ----------------------------------------------------
   Un mot, sa définition en une phrase. Les moteurs de réponse reprennent
   volontiers ce format : c'est déjà une réponse. */
.pc-defs{ max-width: 820px; margin: 0 auto; display: grid; gap: 10px; }
.pc-def{
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 20px;
}
.pc-def dt{
  font-family: Geist, system-ui, sans-serif; font-size: 15px; font-weight: 650;
  color: var(--ink); margin-bottom: 4px;
}
.pc-def dd{ margin: 0; font-size: 14.5px; line-height: 1.62; color: var(--ink-2); }

/* --- LES CARTES DE CONTENU -------------------------------------------
   Deux ou trois colonnes, pour les listes de cas de figure. Différent de
   `.pc-piliers` : pas de pictogramme, du texte plus long. */
.pc-cartes{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 900px; margin: 0 auto; }
.pc-cartes.trois{ grid-template-columns: repeat(3, 1fr); }
.pc-carte{
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px;
}
.pc-gris .pc-carte{ box-shadow: 0 16px 36px -30px rgba(15,18,30,.2); }
.pc-carte .pc-h3{ margin-bottom: 7px; }
.pc-carte p{ font-size: 14.5px; line-height: 1.62; color: var(--ink-2); margin: 0 0 10px; }
.pc-carte p:last-child{ margin-bottom: 0; }
.pc-carte a{ color: var(--accent-ink); font-weight: 550; }
@media (max-width: 860px){ .pc-cartes, .pc-cartes.trois{ grid-template-columns: 1fr; } }

/* --- LE FIL D'ARIANE VISIBLE -----------------------------------------
   Il existait déjà en JSON-LD, invisible à l'écran. Le rendre visible
   sert le visiteur arrivé par une recherche : il voit ou il est tombé. */
.pc-fil{ max-width: 1120px; margin: 0 auto; padding: 16px 28px 0; font-size: 13px; color: var(--ink-4); }
.pc-fil a{ color: var(--ink-3); text-decoration: none; }
.pc-fil a:hover{ color: var(--accent-ink); text-decoration: underline; }
.pc-fil span{ margin: 0 7px; opacity: .55; }
@media (max-width: 760px){ .pc-fil{ padding: 12px 18px 0; } }

/* --- LA DATE DE MISE A JOUR ------------------------------------------
   Sous le titre. Signal de fraîcheur pour les moteurs de réponse, et
   honnêteté de base : le lecteur sait de quand date ce qu'il lit. */
.pc-date{ font-size: 13px; color: var(--ink-4); margin: 14px 0 0; }
.pc-date time{ color: var(--ink-3); font-weight: 550; }

/* --- LA GRILLE DE LIENS DU HUB ---------------------------------------
   Les pages « hub » (toutes les villes, tous les outils, tous les
   guides) ne sont pas des pages de texte : ce sont des index. Un index
   lisible est une grille de vraies cartes cliquables, pas une liste. */
.pc-index{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 1000px; margin: 0 auto; }
.pc-index a{
  display: block; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px; transition: border-color .16s, transform .16s;
}
.pc-index a:hover{ border-color: var(--accent); transform: translateY(-2px); }
.pc-index b{
  display: block; font-family: Geist, system-ui, sans-serif;
  font-size: 15px; font-weight: 650; color: var(--ink); margin-bottom: 4px;
}
.pc-index span{ display: block; font-size: 13.5px; line-height: 1.55; color: var(--ink-3); }
@media (max-width: 900px){ .pc-index{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ .pc-index{ grid-template-columns: 1fr; } }