/* =========================================================================
   ARTIS VALORISATION, REFONTE : FAMILLE LES ANALYSES (p-analyses.css)
   Pages : analyses.html et les articles de site/analyses/.
   Chargee en dernier, apres socle.css et pages.css (ou scene.css et les
   feuilles d'offre pour les pages a scene). Ce que ces pages seules
   demandent, en sections numerotees, commentaires sans accents. Seule la
   mission de cette famille ecrit ici ; un composant utile a deux
   familles va dans pages.css. Reference : REFONTE-GABARIT.md.
   ------------------------------------------------------------------------- */

/* =========================================================================
   1. CE QUE CETTE FEUILLE AJOUTE (30/09/2026, mission « analyses »)
   Le gabarit des dix-neuf articles est celui du prototype 2
   (_essai-page-analyse.html) ; le guide des missions d'articles est
   REFONTE-ARTICLES.md, a la racine du depot. Les articles d'origine sont
   des textes longs (1 000 a 2 600 mots) : cette feuille donne ce que les
   composants de pages.css ne couvraient pas, pour qu'aucune mission
   d'articles n'ait a toucher une feuille.
     2.  La couverture d'article : le theme, la note de millesime,
         le voile sous un titre long (2b).
     3.  Les petites mises en page du prototype, sans style en ligne.
     4.  La bulle d'ouverture (les paragraphes avant le premier titre).
     5.  La bulle de section : une section d'article, numerotee, le titre
         a gauche, le texte a droite ; la suite repliee.
     6.  Le texte dans une bulle de section (paragraphes, listes, liens).
     7.  L'encadre, l'exergue, la formule, la ligne de source.
     8.  Les sous-parties repliees (h3, ou paragraphes a attaque grasse).
     9.  La liste de liens commentes (renvois vers d'autres analyses).
     10. Le tableau dans une bulle de section.
     11. Le temoignage (bloc TEMOIGNAGE) et les sources repliees.
     12. La liste des analyses : couverture courte, filtres, cartes.
     13. Mouvement reduit et impression.
     14. Le texte au telephone : de l'air.
     15. Le telephone, audit du 8 octobre : couverture, textes, liens,
         tableaux, liste (09/10/2026).
     16. Le telephone, seconde passe : une seule introduction, une queue
         plus legere qui finit sur le contact, le fil, la dispersion de
         la pharmacie (09/10/2026, delegation de Raphael).
     17. Le telephone, audit UI/UX du 9 octobre : l'offre deplacee dans
         le balisage, « Toutes les lectures » (10/10/2026).
   Contrastes (couleurs pleines, formule WCAG) : encre sur blanc 16,9:1,
   gris 7,1:1, Klein 10,7:1 ; encre sur la teinte #edf1fa 15,0:1, Klein
   sur la teinte 9,4:1 ; blanc a 80 % sur le bleu milieu 7,9:1.
   ------------------------------------------------------------------------- */

/* =========================================================================
   2. LA COUVERTURE D'ARTICLE
   Le theme de l'article (l'ancien sur-titre « Analyses > Secteurs ») ouvre
   la ligne .k-meta, en pastille de verre ; la note de millesime des
   analyses sectorielles et le renvoi vers une offre passent sous la ligne,
   en blanc a 80 %. Au telephone, depuis le 09/10/2026, le theme prend le
   dessin du reste de la ligne (section 15a).
   ------------------------------------------------------------------------- */
.k-meta .k-meta-theme{
  display:inline-flex; align-items:center; min-height:28px; padding:4px 12px; border-radius:999px;
  background:rgba(255,255,255,.14); box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
  color:var(--f-texte); font-size:13px; line-height:1.2; font-weight:500; letter-spacing:0; white-space:nowrap; }
.k-couv-note{ margin:12px 0 0; max-width:40em; font-size:var(--k-t-petit); line-height:1.45; letter-spacing:0; color:var(--k-attenue); text-wrap:pretty; }
.k-couv-note a{ color:var(--f-texte); text-underline-offset:3px; }
.k-couv-note + .k-couv-note{ margin-top:6px; }

/* --- 2b. Voile sous un titre long : retire le 01/10/2026 ----------------------
   .k-couv--voile posait un voile marine local sous la partie en azur du
   titre de valorisation-fiscale-entreprise, la ou passait le bord eclaire
   de la sphere. La sphere a quitte la scene et verre-paysage.webp : ce voile
   ne servait plus, et il remplacait le voile lateral de pages.css
   (section 6). La classe reste dans la page, sans effet ; la couverture
   prend le voile de pages.css. Mesure sur les pixels (5e centile sous les
   glyphes, Chrome) : titre azur 3,76:1 a 1 440, 3,77:1 a 1 280, 4,23:1 a
   1 024, 3,77:1 a 1 536, 3,65:1 a 1 920, 4,61:1 a 393 ; fil d'Ariane
   5,99:1 a 1 024 (4,53:1 avec l'ancien voile). */

/* =========================================================================
   3. LES PETITES MISES EN PAGE DU PROTOTYPE, SANS STYLE EN LIGNE
   .k-pile : une colonne de liens-bulles ou de petites bulles, a cote d'une
   bulle plus large. .k-bas : la rangee de boutons descend au bas de sa
   bulle (bulles de meme hauteur, .k-grille--etire).
   ------------------------------------------------------------------------- */
.k-pile{ display:grid; gap:var(--k-ecart); align-content:start; min-width:0; }
.k-bulle > .k-bas, .k-bulle > .f-boutons.k-bas{ margin-top:auto; }
.k-bulle > .f-boutons{ margin-top:4px; }
.k-bulle > .f-boutons.k-bas{ padding-top:8px; }

/* =========================================================================
   4. LA BULLE D'OUVERTURE
   Les paragraphes qui precedent le premier titre de l'article : au corps
   du chapo, sur blanc, en tete de la premiere grille. Visibles en entier.
   Au telephone, au corps du texte des sections depuis le 09/10/2026
   (section 15a).
   ------------------------------------------------------------------------- */
.k-bulle--ouverture{ gap:14px; padding-block:30px; }
.k-bulle--ouverture p{ font-size:var(--k-t-chapo); line-height:1.45; letter-spacing:var(--f-serre); color:var(--k-encre); text-wrap:pretty; }
.k-bulle--ouverture strong{ font-weight:500; }
.k-bulle--ouverture a{ color:var(--k-klein); }
@media (min-width: 761px){ .k-bulle--ouverture{ padding:44px 48px; } }
/* A l'ordinateur, la bulle d'ouverture se resserre au lieu de son texte
   (05/10/2026). Point 5 de Raphael : le texte va au bord de sa bulle ;
   mais sur toute la largeur, la ligne du chapo comptait 120 a 150 signes
   (1 280 et 1 440 px). La bulle prend neuf douziemes de 900 a 1 099 px,
   huit au-dela, alignee a gauche comme le titre et le chapo de la
   couverture : le texte va jusqu'a son bord. Sa plus longue ligne compte
   67 signes a 900 px, 75 a 1 024, 84 a 1 280 et 96 a 1 440, comme avec
   l'ancienne mesure de 38 em (96). */
@media (min-width: 900px){ .k-bulle--ouverture.k-c12{ grid-column:span 9; } }
@media (min-width: 1100px){ .k-bulle--ouverture.k-c12{ grid-column:span 8; } }

/* =========================================================================
   5. LA BULLE DE SECTION
   Une section de l'article d'origine (un h2 et ce qui le suit) devient une
   bulle numerotee : <section class="k-bulle k-bulle--section k-c12">.
   Au telephone et jusqu'a 959 px, tout en une colonne. A partir de
   960 px, deux colonnes : a gauche le numero et le titre, qui restent a
   l'ecran pendant la lecture (sticky) ; a droite le texte, jusqu'au bord,
   le premier paragraphe visible, la suite dans un .k-depli. Une section
   courte peut aussi se poser en .k-c6 (deux par rangee) : elle reste alors
   en une colonne a toutes les largeurs (.k-bulle--section.k-c6).
   Les deux colonnes partaient de 1 100 px, quand le texte avait encore sa
   mesure de 44 em. Depuis que le texte va au bord de sa bulle (point 5 de
   Raphael, 04/10/2026), une seule colonne de 960 a 1 099 px donnait
   115 a 130 signes par ligne (880 px de texte a 1 024). De 960 a
   1 099 px, le titre prend trois douziemes et le texte neuf : la colonne
   de texte (552 a 656 px) garde a peu pres la largeur qu'elle a a
   1 100 px, ou les tableaux de quatre colonnes (540 px au moins) tiennent
   sans defiler (en huit douziemes, 533 px a 1 024, ils defilaient ; des
   900 px en neuf douziemes, douze sur vingt-sept defilaient). De 761 a
   959 px, la colonne unique garde 624 a 815 px de texte.
   ------------------------------------------------------------------------- */
.k-bulle--section{ gap:16px; }
.k-section-tete{ display:grid; gap:10px; align-content:start; min-width:0; }
.k-section-tete > *{ margin:0; }
.k-bulle--section .k-bulle-titre{ font-size:clamp(22px, .7vw + 19px, 30px); line-height:1.15; }
.k-section-corps{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.k-section-corps > *{ margin:0; }
@media (min-width: 960px){
  .k-bulle--section.k-c12{
    display:grid; grid-template-columns:minmax(0,3fr) minmax(0,9fr); column-gap:48px; align-items:start;
    padding:44px 48px; }
  .k-bulle--section.k-c12 > .k-section-tete{ position:sticky; top:104px; padding-right:8px; }
}
@media (min-width: 1100px){
  .k-bulle--section.k-c12{ grid-template-columns:minmax(0,4fr) minmax(0,8fr); }
}
/* A partir de 1 300 px, cinq douziemes pour le titre : la colonne de texte
   reste pres de 44 em (709 px a 1 440), et tout y prend la meme largeur. */
@media (min-width: 1300px){
  .k-bulle--section.k-c12{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); }
}

/* =========================================================================
   6. LE TEXTE DANS UNE BULLE DE SECTION
   Paragraphes de 16 px, interligne 1,55 ; gras a 500 ; liens Klein
   soulignes. La suite repliee garde le meme corps que le texte visible
   (le .k-depli-corps de pages.css est a 15 px pour les notes courtes).
   ------------------------------------------------------------------------- */
.k-section-corps p, .k-bulle--section .k-depli-corps p{ font-size:16px; line-height:1.55; color:var(--k-encre); letter-spacing:0; text-wrap:pretty; }
.k-section-corps strong, .k-bulle--section .k-depli-corps strong, .k-bulle--ouverture strong, .k-prose strong{ font-weight:500; }
.k-section-corps em{ font-style:italic; }
.k-bulle--section .k-depli{ margin-top:0; }
.k-bulle--section .k-depli-corps{ gap:14px; padding:6px 0 4px; font-size:16px; }
.k-bulle--section .k-depli-corps > *{ margin:0; }
.k-bulle--section .k-depli > summary{ min-height:48px; }
.k-bulle--section .k-liste > li{ line-height:1.5; }
/* Un paragraphe d'une petite bulle de texte (exemple chiffre, offre) */
.k-prose{ display:grid; gap:14px; }
.k-prose > *{ margin:0; }
.k-prose p{ font-size:16px; line-height:1.55; color:var(--k-encre); letter-spacing:0; text-wrap:pretty; }
/* La bulle de texte pleine largeur (le commentaire d'un tableau, un
   exemple chiffre) se resserre a l'ordinateur, comme la bulle d'ouverture
   (section 4) : huit douziemes de 900 a 1 299 px, sept au-dela, la
   fraction de la colonne de texte des sections (section 5). Sur toute la
   largeur, sa ligne comptait 113 a 151 signes en moyenne ; resserree, sa
   plus longue ligne en compte 67 a 104, contre 102 avec l'ancienne mesure
   de 44 em (05/10/2026). */
@media (min-width: 900px){ .k-prose.k-c12{ grid-column:span 8; } }
@media (min-width: 1300px){ .k-prose.k-c12{ grid-column:span 7; } }

/* =========================================================================
   7. L'ENCADRE, L'EXERGUE, LA FORMULE, LA LIGNE DE SOURCE
   .k-encadre : l'ancien .callout, un aplat de la teinte dans la bulle ;
   son attaque en gras passe sur sa propre ligne. .k-exergue : une phrase
   citee au milieu d'une section (en fin de section, elle devient une
   bulle citation a part, .k-bulle--citation). .k-formule est celle de
   pages.css (une ligne par <span>). .k-source-ligne : la source d'un
   chiffre, sous son paragraphe.
   ------------------------------------------------------------------------- */
.k-encadre{ display:grid; gap:10px; margin:0; padding:18px 20px; border-radius:var(--k-r-petit);
  background:var(--k-teinte); color:var(--k-encre); }
.k-encadre > *{ margin:0; }
.k-section-corps .k-encadre p, .k-encadre p{ font-size:15px; line-height:1.5; letter-spacing:0; color:var(--k-encre); }
.k-encadre > p:first-child > strong:first-child{ display:block; margin-bottom:4px; font-size:16px; font-weight:500; color:var(--k-klein); letter-spacing:var(--f-serre); }
@media (min-width: 761px){ .k-encadre{ padding:22px 26px; } }

.k-exergue{ margin:4px 0; padding:2px 0 2px 18px; border-left:2px solid var(--k-klein); max-width:34em;
  font-size:clamp(20px, .5vw + 18px, 25px); line-height:1.3; font-weight:500; letter-spacing:var(--k-serre); color:var(--k-encre); text-wrap:balance; }
.k-exergue p{ margin:0; font:inherit; color:inherit; }

.k-section-corps .k-formule, .k-bulle--section .k-depli-corps .k-formule{ max-width:40em; font-size:14px; }

.k-section-corps .k-source-ligne, .k-source-ligne{ font-size:var(--k-t-petit); line-height:1.45; color:var(--k-gris); letter-spacing:0; }

/* =========================================================================
   8. LES SOUS-PARTIES REPLIEES
   Les h3 d'une section (« 1. Transferer les relations clients ») et les
   suites de paragraphes a attaque grasse (« La composition de la marge. »)
   deviennent des lignes depliables : .k-lignes > details.k-ligne, le titre
   dans le <summary> (un <h3 class="k-ligne-titre"> quand il etait un h3),
   le texte dessous. Dans un article, le texte replie garde l'encre et les
   16 px du texte courant (pages.css le donne en gris a 15 px).
   ------------------------------------------------------------------------- */
.k-ligne-titre{ margin:0; font:inherit; letter-spacing:inherit; color:inherit; }
.k-bulle--section .k-ligne > summary{ font-size:16px; line-height:1.35; }
.k-bulle--section .k-ligne > p, .k-bulle--section .k-ligne > .k-ligne-corps p{ color:var(--k-encre); font-size:16px; line-height:1.55; }
.k-ligne-corps{ display:grid; gap:12px; padding:0 0 16px; }
.k-ligne-corps > *{ margin:0; }
.k-bulle--section .k-lignes{ border-top:1px solid var(--k-trait); border-bottom:1px solid var(--k-trait); }
.k-bulle--section .k-ligne:first-child{ border-top:0; }

/* =========================================================================
   9. LA LISTE DE LIENS COMMENTES
   Un lien vers une autre analyse, et sa phrase de presentation dessous
   (l'ancienne liste a styles en ligne de « Par activite »).
   ------------------------------------------------------------------------- */
.k-liens{ list-style:none; margin:0; padding:0; display:grid; }
.k-liens > li{ display:grid; gap:4px; padding:12px 0; border-top:1px solid var(--k-trait); }
.k-liens > li:first-child{ border-top:0; padding-top:2px; }
.k-liens a{ justify-self:start; display:inline-flex; align-items:center; min-height:44px; margin-block:-10px;
  color:var(--k-klein); font-size:16px; line-height:1.3; font-weight:500; text-underline-offset:3px; }
.k-liens-resume{ font-size:15px; line-height:1.45; color:var(--k-gris); letter-spacing:0; text-wrap:pretty; }

/* =========================================================================
   10. LE TABLEAU DANS UNE BULLE DE SECTION
   Le .k-tableau de pages.css (12d) sert de simple enveloppe dans la
   colonne de texte : pas de seconde bulle dans la bulle. Premiere colonne
   en <th scope="row">, a 500 ; chiffres en .k-nombre.
   ------------------------------------------------------------------------- */
.k-section-corps .k-tableau, .k-bulle--section .k-depli-corps .k-tableau{ display:grid; gap:10px; }
.k-section-corps .k-tableau table{ font-size:15px; }
/* Des en-tetes longs (« Officines de plus de 400 k EUR de marge ») : ils
   passent a la ligne plutot que d'ecraser la premiere colonne ; la premiere
   colonne garde 9 em, le tableau defile dans sa bulle au-dela. */
.k-tableau thead th{ white-space:normal; vertical-align:bottom; }
.k-tableau tbody th[scope="row"]{ min-width:9em; }
/* Un tableau de texte (aucune colonne chiffree : « La faiblesse / Ce
   qu'elle produit ») ne defile pas au telephone : sous 640 px, chaque
   rangee s'empile, le titre de la colonne au-dessus de chaque cellule
   (data-titre, repris de l'en-tete). Les tableaux chiffres gardaient le
   defilement dans leur bulle (pages.css 12d). Depuis l'audit telephone du
   8 octobre (09/10/2026), aucun ne defile plus sous 640 px : ils prennent
   l'un des dessins de la section 15d, qui resserre aussi ces piles. */
@media (max-width: 639px){
  .k-tableau--pile .k-tableau-defile{ overflow:visible; background:none; }
  .k-tableau--pile table, .k-tableau--pile tbody, .k-tableau--pile tr,
  .k-tableau--pile tbody th, .k-tableau--pile td{ display:block; width:auto; min-width:0; }
  .k-tableau--pile thead{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  .k-tableau--pile tbody tr{ padding:14px 0; border-top:1px solid var(--k-trait); }
  .k-tableau--pile tbody tr:first-child{ border-top:1px solid var(--k-encre); }
  .k-tableau--pile tbody tr + tr > *{ border-top:0; }
  .k-tableau--pile tbody th, .k-tableau--pile td{ padding:0; }
  .k-tableau--pile tbody th[scope="row"]{ min-width:0; }
  .k-tableau--pile td{ margin-top:10px; }
  .k-tableau--pile td[data-titre]::before{ content:attr(data-titre); display:block; margin-bottom:2px;
    font-size:12px; line-height:1.3; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--k-gris); }
}
.k-tableau td strong{ font-weight:500; }
.k-tableau tbody th strong{ font-weight:500; color:inherit; }
.k-tableau .k-tableau-sous{ display:block; margin-top:2px; font-weight:400; color:var(--k-gris); }

/* =========================================================================
   11. LE TEMOIGNAGE ET LES SOURCES
   Le bloc TEMOIGNAGE (outils/construire-offre.py le reecrira) : une bulle
   d'avis .k-avis sur le bleu, entre « Ce qu'il faut retenir » et l'offre,
   dans son propre conteneur. Vide dans dix-huit articles sur dix-neuf.
   Les sources : la bulle repliee .k-sources de pages.css ; le titre h2 de
   la page d'origine reste un h2, dans le <summary>.
   ------------------------------------------------------------------------- */
.k-temoin{ padding-top:var(--k-section); }
.k-sources-titre{ margin:0; font:inherit; letter-spacing:inherit; color:inherit; text-transform:inherit; }
.k-section--proche{ padding-top:var(--k-ecart); }

/* =========================================================================
   12. LA LISTE DES ANALYSES (analyses.html)
   Couverture courte : la liste doit commencer au premier ecran. « Pour
   commencer » (deux cartes) puis les dix-neuf analyses en .k-carte-article
   (pages.css 12f), deux colonnes a partir de 900 px. Les filtres par theme
   n'apparaissent qu'avec le script de la page (sans script, la liste est
   complete) ; un article filtre porte hidden.
   ------------------------------------------------------------------------- */
@media (min-width: 1000px){
  .k-couv.k-couv--courte{ min-height:0; padding:184px 0 16px; }
}
.k-couv--courte .k-couv-grille{ grid-template-columns:minmax(0,1fr); }
.k-couv--courte .k-titre-affiche{ max-width:15em; }
.k-liste-titre{ margin:0 0 20px; font-size:var(--k-t-etiquette); line-height:1.3; font-weight:500; letter-spacing:.3em; text-transform:uppercase; color:var(--f-texte); }
.k-articles{ list-style:none; margin:0; padding:0; display:grid; gap:var(--k-ecart); grid-template-columns:minmax(0,1fr); }
.k-articles > li{ display:grid; min-width:0; }
.k-articles > li[hidden], .k-filtres[hidden]{ display:none !important; }
@media (min-width: 900px){ .k-articles{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.k-articles + .k-titre-section, .k-bloc-liste{ margin-top:calc(var(--k-section) * .66); }
.k-carte-article .k-carte-article-titre{ margin:0; }
.k-carte-article .k-puce{ pointer-events:none; }
.k-filtres{ margin-top:4px; }

/* =========================================================================
   13. MOUVEMENT REDUIT ET IMPRESSION
   ------------------------------------------------------------------------- */
@media print{
  .k-bulle--section.k-c12 > .k-section-tete{ position:static; }
  .k-ligne-corps, .k-bulle--section .k-depli-corps{ display:grid !important; }
}

/* =========================================================================
   14. LE TEXTE AU TELEPHONE : DE L'AIR (04/10/2026, point 1 de Raphael)
   L'interligne et la justification du texte courant viennent de
   socle.css 13. Ici, l'espace entre les paragraphes d'un article et dans
   ses encadres : 18 px entre deux paragraphes d'une section, de la bulle
   d'ouverture ou d'une bulle de texte (14 avant), 16 px dans un depliant
   ou une ligne depliee (14 et 12 avant), 20 px de marge dans un encadre
   (18 avant, 16 depuis le 09/10/2026, section 15b). Un point de liste
   commentee prend 14 px de part et d'autre. Ces textes n'avaient plus de mesure en em depuis le point 5 :
   ils vont jusqu'au bord de leur bulle, a toutes les largeurs.
   ------------------------------------------------------------------------- */
@media (max-width: 760px){
  .k-section-corps, .k-bulle--ouverture, .k-prose{ gap:18px; }
  .k-bulle--section .k-depli-corps{ gap:16px; }
  .k-ligne-corps{ gap:16px; padding-bottom:18px; }
  .k-encadre{ gap:12px; padding:20px; }
  .k-liens > li{ padding-block:14px; }
}

/* =========================================================================
   15. LE TELEPHONE, AUDIT DU 8 OCTOBRE (09/10/2026)
   L'audit telephone du 8 octobre (AUDIT-TELEPHONE-2026-10-09.md, lots 3
   et 4) mesurait sur iPhone 15 sept tableaux chiffres dont la colonne utile
   etait hors champ, dont deux bloquants (multiples par secteur, pharmacie),
   une couverture d'article qui repoussait la premiere bulle du corps a 1,15
   a 1,42 ecran, des chapos justifies a trous et des liens de 21 px de haut
   dans le texte. Raphael a garde tout le contenu visible : ici, seule la
   forme change, et seulement sous 761 px (sous 640 px pour les tableaux,
   comme la pile de la section 10). A partir de 761 px, rien ne bouge, au
   pixel pres (comparaison a 761, 1 024 et 1 440 px). Les classes et les
   attributs data-titre ajoutes aux articles ne servent qu'ici.
   ------------------------------------------------------------------------- */

/* --- 15a. La couverture d'article ------------------------------------------
   Audit, lot 4. Le titre passe de 38,6 a 34 px sous 401 px (30 px sous
   360 px), interligne 1,05, et sa partie en azur suit la partie blanche sur
   la meme ligne au lieu de forcer un retour (.k-ligne-bloc en ligne) : les
   titres de cinq lignes en prennent trois ou quatre. Le chapo passe de
   18,2 a 16 px, l'interligne restant celui du texte courant (socle.css 13).
   La ligne meta perd sa rangee de 44 px : le lien de l'auteur garde sa
   cible de 44 px par un rembourrage que compense une marge negative (en
   position relative, pour passer devant la ligne de la date), et le
   theme prend le dessin du reste de la ligne (une pastille de verre qui ne
   mene nulle part promettait une action). La bulle d'ouverture prend le
   corps du texte des sections (16 px). Entre la bulle de these et la
   premiere bulle du corps, 32 px de bleu au lieu de 80. */
@media (max-width: 760px){
  .k-article .k-couv-grille{ gap:20px; }
  .k-article .k-titre-affiche{ text-wrap:pretty; }
  .k-article .k-titre-affiche .k-ligne-bloc{ display:inline; }
  .k-couv .k-chapo{ margin-top:16px; font-size:16px; }
  .k-meta{ margin-top:16px; }
  .k-meta a{ position:relative; min-height:0; padding-block:12px; margin-block:-12px; }
  .k-meta .k-meta-theme{ min-height:0; padding:0; border-radius:0; background:none; box-shadow:none;
    font-size:var(--k-t-petit); line-height:20px; }
  .k-bulle--ouverture{ padding-block:28px; }
  .k-bulle--ouverture p{ font-size:16px; }
  .k-article .k-corps{ padding-top:24px; }
}
@media (max-width: 400px){
  .k-article .k-titre-affiche{ font-size:34px; line-height:1.05; }
}
@media (max-width: 359px){
  .k-article .k-titre-affiche{ font-size:30px; }
}

/* --- 15b. Les textes : alignement, encadres, citations ------------------------
   Les chapos de section (.k-lede) et les resumes des cartes de la liste
   etaient justifies avec cesure de 390 a 760 px (socle.css 13, 2b et 2c) :
   sur deux a quatre lignes, des blancs jusqu'a 3,5 espaces et des mots
   coupes (« proce-dure », « d'exo-neration »), dix-neuf coupures sur la
   liste. Ils reviennent au fer a gauche, sans cesure automatique, comme
   tout le corps des analyses. Les noms propres restent proteges par
   .nom-propre. L'encadre passe au corps du texte (16 px au lieu de 15)
   avec 16 px de marge interne, la citation de fin de section de 24,3 a
   21 px. */
@media (max-width: 760px){
  .k-lede, .k-carte-article-resume{ text-align:left; text-align-last:auto; -webkit-hyphens:manual; hyphens:manual; }
  .k-encadre{ padding:16px; }
  .k-section-corps .k-encadre p, .k-encadre p{ font-size:16px; }
  .k-article .k-citation{ font-size:21px; line-height:1.2; }
}

/* --- 15c. Les liens dans le texte : une cible de 44 px -------------------------
   Un lien dans un paragraphe mesurait 21 px de haut (18 px dans la note de
   couverture). Un rembourrage vertical sur le lien en ligne agrandit sa
   zone de toucher sans deplacer une seule ligne : il ne compte pas dans la
   hauteur de ligne et ne dessine rien. En position relative, le lien passe
   devant le texte des lignes voisines au toucher : sa zone mesure de 45 a
   63 px de haut (22 px avant, mesure par elementFromPoint dans WebKit et
   Chromium a 393 px), et le lien de la note de couverture, en 14 px,
   prend 13 px de part et d'autre pour 44 px. Les liens qui ont deja leur
   cible (.k-liens, sources, boutons, liens-bulles) n'y sont pas. */
@media (max-width: 760px){
  :is(.k-section-corps, .k-depli-corps, .k-ligne-corps, .k-bulle--ouverture, .k-prose, .k-encadre, .k-couv-note, .k-tableau td, .k-question)
    a:not(.f-bouton, .k-lien-bulle, .k-liens a){ position:relative; padding-block:12px; }
  .k-couv .k-couv-note a:not(.f-bouton, .k-lien-bulle, .k-liens a){ padding-block:13px; }
}

/* --- 15d. Les tableaux : chaque chiffre a l'ecran ---------------------------------
   Sous 640 px, plus aucun tableau ne defile dans sa bulle. Trois dessins :
   - .k-tableau--secteurs (le referentiel des multiples, six colonnes) :
     quatre colonnes, le secteur puis Bas, Median en Klein et Haut, a
     largeur fixe (celle du plus large chiffre ou intitule de la colonne)
     pour que les chiffres s'alignent d'une rangee a l'autre.
     Les codes NAF et le rapport VE / CA passent sur une ligne sous le
     secteur, en 13 px gris, chacun precede de son intitule (data-titre).
     Leurs en-tetes restent dans le tableau pour les lecteurs d'ecran.
   - .k-tableau--scenarios (exemples chiffres du pacte Dutreil, de la
     plus-value et du prix de vente, les deux tableaux de la pharmacie) :
     chaque rangee s'empile, le libelle sur toute la largeur, puis une
     ligne par colonne, l'intitule a gauche et le montant a droite, pour
     comparer les scenarios de haut en bas. Une cellule de texte (l'evolution
     de la pharmacie) suit le meme dessin, son intitule a gauche et son
     texte a droite, sur deux lignes equilibrees au plus a 320 px (reprise du
     09/10/2026 : posee sous son intitule, au fer a gauche, « + 5,62 % »
     rompait la colonne que forment les valeurs).
   - .k-tableau--gauche (le camping) : deux colonnes, la premiere a 55 %,
     la fourchette au fer a gauche plutot qu'en trois lignes collees au
     bord droit.
   Les piles de la section 10 se resserrent : intitules en 13 px, en bas de
   casse, graisse 500 (12 px en capitales espacees avant, le plus petit texte
   utile de la page), rangees de 12 px, 6 px entre une cellule et son
   libelle. Chaque cellule garde son intitule, a chaque rangee, comme
   avant (reprise du 09/10/2026 : une regle le retirait des rangees 2 et
   suivantes des piles a deux colonnes, du texte en moins que ni l'audit
   ni Raphael n'avaient demande). Une cellule courte (.k-en-ligne) porte
   son intitule devant elle, sur la meme ligne. Les en-tetes des tableaux restes en colonnes passent
   aussi a 13 px en bas de casse, et un en-tete de colonne chiffree passe a
   la ligne au lieu d'elargir le tableau, et le libelle d'un tableau a
   scenarios n'impose plus ses 9 em : de 640 a 700 px, l'exemple du pacte
   Dutreil et le second tableau de la pharmacie defilaient encore de 37 a
   45 px. */
@media (max-width: 760px){
  .k-tableau thead th, .k-tableau thead th.k-nombre{ font-size:13px; letter-spacing:0; text-transform:none; white-space:normal; }
  .k-tableau--scenarios tbody th[scope="row"]{ min-width:0; }
}
@media (max-width: 639px){
  .k-tableau--pile tbody tr{ padding-block:12px; }
  .k-tableau--pile td{ margin-top:6px; }
  .k-tableau--pile td[data-titre]::before{ margin-bottom:1px; font-size:13px; letter-spacing:0; text-transform:none; }
  .k-tableau--pile td.k-en-ligne[data-titre]::before{ display:inline; margin:0 8px 0 0; }

  /* Le referentiel des multiples */
  .k-tableau--secteurs{ --k-bas:34px; --k-median:48px; --k-haut:38px; }
  .k-tableau--secteurs .k-tableau-defile{ overflow:visible; background:none; }
  .k-tableau--secteurs table, .k-tableau--secteurs thead, .k-tableau--secteurs tbody{ display:block; width:auto; min-width:0; }
  .k-tableau--secteurs tr{ display:flex; flex-wrap:wrap; align-items:baseline; column-gap:10px; padding:10px 0; border-top:1px solid var(--k-trait); }
  .k-tableau--secteurs thead tr{ padding-top:0; border-top:0; border-bottom:1px solid var(--k-encre); }
  .k-tableau--secteurs tbody tr:first-child{ border-top:0; }
  .k-tableau--secteurs tr > *, .k-tableau--secteurs thead th, .k-tableau--secteurs tbody tr + tr > *{ padding:0; border:0; }
  .k-tableau--secteurs tr > :first-child{ flex:1 0 calc(100% - var(--k-bas) - var(--k-median) - var(--k-haut) - 31px); min-width:0; }
  .k-tableau--secteurs tr > :nth-child(3){ flex:none; width:var(--k-bas); }
  .k-tableau--secteurs tr > :nth-child(4){ flex:none; width:var(--k-median); }
  .k-tableau--secteurs tr > :nth-child(5){ flex:none; width:var(--k-haut); }
  .k-tableau--secteurs tbody th[scope="row"]{ min-width:0; }
  .k-tableau--secteurs td:nth-child(2), .k-tableau--secteurs td:nth-child(6){
    order:1; margin-top:2px; font-size:13px; line-height:1.35; color:var(--k-gris); text-align:left; white-space:normal; }
  .k-tableau--secteurs td:nth-child(2){ margin-right:6px; }
  .k-tableau--secteurs td[data-titre]::before{ content:attr(data-titre); margin-right:6px; font-weight:500; }
  .k-tableau--secteurs thead th:nth-child(2), .k-tableau--secteurs thead th:nth-child(6){
    position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
}
/* Sous 361 px, la colonne du secteur n'a plus que 101 px : un mot long
   (« Agroalimentaire », 112 px en 15 px) en sortait et touchait le chiffre
   du bas de fourchette. Le secteur passe a 14 px et l'ecart entre colonnes
   a 8 px : 107 px pour 105 px de mot. La cesure automatique coupait des
   mots qui tenaient (« pu-blics », « ma-nufacturiere ») : elle est
   ecartee, seul un mot qui ne tiendrait toujours pas se couperait
   (overflow-wrap). */
@media (max-width: 360px){
  .k-tableau--secteurs tr{ column-gap:8px; }
  .k-tableau--secteurs tbody th[scope="row"]{ font-size:14px; overflow-wrap:break-word; }
}
@media (max-width: 639px){
  /* Les exemples chiffres et la pharmacie */
  .k-tableau--scenarios .k-tableau-defile{ overflow:visible; background:none; }
  .k-tableau--scenarios table, .k-tableau--scenarios tbody, .k-tableau--scenarios tr,
  .k-tableau--scenarios tbody th, .k-tableau--scenarios td{ display:block; width:auto; min-width:0; }
  .k-tableau--scenarios thead{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  .k-tableau--scenarios tbody tr{ padding:12px 0; border-top:1px solid var(--k-trait); }
  .k-tableau--scenarios tbody tr:first-child{ border-top:1px solid var(--k-encre); }
  .k-tableau--scenarios tbody tr + tr > *{ border-top:0; }
  .k-tableau--scenarios tbody th, .k-tableau--scenarios td{ padding:0; }
  .k-tableau--scenarios tbody th[scope="row"]{ min-width:0; }
  .k-tableau--scenarios td{ margin-top:6px; }
  .k-tableau--scenarios td::before{ content:attr(data-titre); font-size:13px; line-height:1.35; font-weight:500; letter-spacing:0; color:var(--k-gris); }
  .k-tableau--scenarios td.k-nombre{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; text-align:right; }
  .k-tableau--scenarios td.k-nombre::before{ flex:1 1 auto; min-width:0; text-align:left; white-space:normal; }
  .k-tableau--scenarios td:not(.k-nombre){ display:flex; align-items:baseline; justify-content:space-between; gap:12px; text-align:right; text-wrap:balance; }
  .k-tableau--scenarios td:not(.k-nombre)::before{ flex:none; text-align:left; }

  /* Le camping */
  .k-tableau--gauche tbody th[scope="row"]{ width:55%; min-width:0; }
  .k-tableau--gauche td.k-nombre, .k-tableau--gauche th.k-nombre{ text-align:left; white-space:normal; }
}

/* --- 15e. La liste des analyses ------------------------------------------------
   Audit, lot 4, sans rien retirer. Les trois liens de depart prennent toute
   la largeur, a 8 px l'un de l'autre (4 px et trois largeurs avant). La
   liste commence 32 px sous la couverture (72 avant). Le titre de la liste,
   qui redit celui de la page, prend le dessin de l'etiquette « Pour
   commencer » au lieu d'un second titre de 28 px. Les filtres restent sur
   plusieurs rangees, toujours tous visibles, avec 12 px de part et d'autre
   du texte au lieu de 18 : trois rangees au lieu de quatre a 393 px
   (quatre a 375 et cinq a 320 px, comme avant). Les
   cartes prennent 20 px de marge interne et 10 px d'ecart, la duree de
   lecture 14 px. */
@media (max-width: 760px){
  .k-couv--courte .f-boutons{ gap:8px; }
  .k-couv--courte .f-boutons .f-bouton{ flex:1 1 100%; }
  .k-couv--courte + .k-section{ padding-top:32px; }
  .k-bloc-liste{ margin-bottom:20px; }
  .k-bloc-liste .k-titre-section{ font-size:var(--k-t-etiquette); line-height:1.3; font-weight:500; letter-spacing:.3em; text-transform:uppercase; }
  .k-filtre{ padding:0 12px; }
  .k-articles{ gap:10px; }
  .k-carte-article{ padding:20px; }
  .k-carte-article-duree{ font-size:var(--k-t-petit); }
}

/* =========================================================================
   16. LE TELEPHONE, SECONDE PASSE (09/10/2026)
   Seconde passe telephone, delegation de Raphael (« fais ce qui te semble
   etre le mieux pour faciliter les conversions ») : les decisions de
   contenu que l'audit du 8 octobre lui laissait (AUDIT-TELEPHONE-2026-10-09.md,
   lot 4, decisions 12 et 13), sur les vingt-six articles. Tout tient sous
   761 px et a l'ecran seulement (screen). A 761 px et au-dela, et a
   l'impression, rien ne change, ni un pixel ni l'arbre d'accessibilite.
   Chaque texte masque reste dans la page (et dans le JSON-LD quand il y
   etait) : seul l'affichage du telephone change.
   ------------------------------------------------------------------------- */

/* --- 16a. Une seule introduction ----------------------------------------------
   Constats 117 et 147, decision 12 : dans les treize articles qui ouvrent
   leur corps sur une bulle d'ouverture (prix de vente, SCI, valeur des
   titres, batiment, ESN, pharmacie, fonds de commerce, clauses, combien
   vaut, concentration, dependance, estimer, multiples), le chapo de la
   couverture etait une deuxieme introduction de 179 a 205 px avant la
   bulle d'ouverture, au meme propos. Il est masque au telephone. La regle
   suit la bulle (:has) : un article sans bulle d'ouverture garde son
   chapo, qui est alors sa seule introduction. Constat 162 : le guide
   fiscal (valorisation-fiscale-entreprise) avait une troisieme
   introduction, un paragraphe sur le bleu en tete du corps, hors de toute
   bulle. C'est le seul .k-tete pose dans un .k-corps des articles. */
@media screen and (max-width: 760px){
  .k-article:has(.k-bulle--ouverture) .k-couv .k-chapo{ display:none; }
  .k-article .k-corps > .k-conteneur > .k-tete{ display:none; }
}

/* --- 16b. La queue de l'article -----------------------------------------------
   Constats 125 a 129, decision 13.
   - La bulle du calculateur (etiquette, titre, paragraphe et bouton,
     321 px) devient un lien-bulle d'une ligne, au titre de la bulle
     (« Obtenir un premier repere de valeur ») : .k-calc-court, pose dans
     chaque article pres de la bulle .k-calc-bulle et masque a partir de
     761 px, la bulle etant masquee en dessous (.k-calc, le formulaire du
     calculateur dans pages.css, est un autre composant). Dans vingt et un
     articles, il suit « Ce qu'il faut retenir », comme la bulle. Les cinq
     articles sectoriels (agence, camping, restaurant, hotel, pharmacie)
     portent la bulle a cote des honoraires. Le lien y est pose a la fin du
     corps de l'article, la ou les autres le placent, pour que la page
     finisse sur l'offre.
   - Les deux liens-bulles sous les honoraires (« Voir la methode en
     detail », « Consulter un exemple de rapport »), que le pied porte deja
     (Methodologie, Exemple de rapport), sont masques. Une pile restee sans
     rien de visible est masquee avec eux (12 px de grille en moins). La
     bulle du restaurant et du fonds de commerce qui mene a l'offre du
     fonds de commerce reste.
   - « A lire ensuite » montre ses quatre premiers liens (cinq a huit dans
     onze articles), les autres restent dans la page. Depuis le 10/10/2026
     (audit UI/UX du 9 octobre, point A05), ils ne sont plus masques sans
     retour : le bouton « Toutes les lectures » les montre (section 17b). */
.k-calc-court{ display:none; }
@media screen and (max-width: 760px){
  .k-article .k-calc-bulle{ display:none; }
  .k-article .k-calc-court{ display:grid; }
  .k-article .k-pile > .k-lien-bulle{ display:none; }
  .k-article .k-pile:not(:has(> :not(.k-lien-bulle, .k-calc-bulle))){ display:none; }
}

/* --- 16c. L'article finit sur le contact ----------------------------------------
   Decision 13, variante B : la section de l'offre (les trois prix, la
   mention de TVA et « Echanger sur votre projet ») passe apres « A lire
   ensuite », par l'ordre de la boite flexible de l'article, sans toucher
   au balisage. Le lecteur d'ecran et le clavier la trouvent toujours a sa
   place d'origine, avant les questions frequentes. Les sections de
   l'article ne portent que des rembourrages : en colonne flexible, rien
   ne se decale (aucune marge a fusionner). « A lire ensuite » rend son
   rembourrage du bas (88 px) a l'offre, qui le garde avant le pied.
   Depuis le 10/10/2026 (audit UI/UX du 9 octobre, point A04), l'ordre
   n'est plus celui de la boite flexible : le script de chaque article
   deplace le noeud de l'offre apres « A lire ensuite », et le clavier et
   le lecteur d'ecran suivent l'ecran. Les regles sont en section 17a. */

/* --- 16d. Le fil d'Ariane, et un depliant ouvert --------------------------------
   Constat 157 : la page courante du fil se coupait par des points de
   suspension (« Reprendre une entreprise : anal ») juste au-dessus du
   titre complet. Elle est masquee au telephone dans les vingt-six
   articles : le fil se lit Accueil / Analyses, le BreadcrumbList du
   JSON-LD reste entier. Constat 133 : sur l'OBO, la bulle « Trois
   lecteurs pour une meme valeur » n'avait que trois lignes fermees et
   aucun texte. Son premier depliant s'ouvre au chargement, au telephone
   seulement (script de la page, obo-vendre-son-entreprise-a-soi-meme.html). */
@media screen and (max-width: 760px){
  .k-article .k-fil--coupe li[aria-current]{ display:none; }
}

/* --- 16e. La dispersion de la pharmacie a 320 px --------------------------------
   Dans le second tableau de la pharmacie, la rangee « Dispersion, six
   transactions sur dix » porte des valeurs longues (« 2,33x a 3,08x en
   marge », 160 px). A 320 px, l'intitule « Officines de plus de 400 k EUR
   de marge » se serrait sur quatre lignes a cote (trois a 375 px). Ces
   deux cellules (.k-valeur-longue) passent la valeur a la ligne quand
   l'intitule et elle ne tiennent pas cote a cote : l'intitule sur une
   ligne, la valeur dessous, toujours au fer a droite avec les autres. */
@media screen and (max-width: 639px){
  .k-tableau--scenarios td.k-nombre.k-valeur-longue{ flex-wrap:wrap; justify-content:flex-end; row-gap:2px; }
}

/* =========================================================================
   17. LE TELEPHONE, AUDIT UI/UX DU 9 OCTOBRE (10/10/2026)
   AUDIT-UI-UX-COMPLET-2026-10-09.md, points A04 et A05, appliques le
   10/10/2026 a la demande de Raphael (« applique ce que tu trouves
   pertinent »). Le script de chaque article, pose juste apres la balise
   de fin de l'article, suit matchMedia('screen and (max-width: 760px)')
   et son changement. Au telephone, il deplace l'offre et pose le bouton
   des lectures. Au-dela, il rend l'offre a sa place d'origine et retire
   le bouton. A 761 px et au-dela, et a l'impression, rien ne change, ni un
   pixel ni l'arbre d'accessibilite. Sans script, l'ordre est celui du
   balisage et toutes les lectures sont visibles.
   ------------------------------------------------------------------------- */

/* --- 17a. L'offre apres « A lire ensuite », dans le balisage (A04) -----------
   Point A04 : l'ordre de la boite flexible (16c) montrait l'offre apres
   « A lire ensuite » alors que le clavier et le lecteur d'ecran la
   trouvaient avant les questions frequentes. Le script deplace desormais
   le noeud lui-meme (memes identifiants, focus garde). Les rembourrages
   de 16c restent ceux d'avant, au pixel pres : ils suivent la place du
   noeud et ne jouent que quand l'offre suit « A lire ensuite », donc
   seulement apres le deplacement. */
@media screen and (max-width: 760px){
  .k-article > .k-appel:has(+ [aria-labelledby="offre-h"]){ padding-bottom:0; }
  .k-article > .k-appel + [aria-labelledby="offre-h"]{ padding-bottom:calc(var(--k-section) + 16px); }
}

/* --- 17b. « Toutes les lectures » (A05) -------------------------------------------
   Point A05 : les lectures au-dela de la quatrieme etaient masquees au
   telephone sans moyen de les retrouver (onze articles, cinq a huit
   liens). Le script pose le bouton « Toutes les lectures » a la fin de la
   grille de « A lire ensuite » et la marque .k-lectures--court : les
   lectures suivantes sont masquees, le bouton vient juste apres la
   quatrieme. Un clic les montre a leur place, retire le bouton et donne
   le focus a la cinquieme, comme « Toutes les questions » des offres
   (offre.js 4). Le bouton vient des la cinquieme lecture, dans les onze
   articles. Une premiere version ne le posait qu'a partir de six (sept
   articles) et laissait voir la cinquieme lecture des quatre articles qui
   en ont cinq, masquee avant cette passe : un texte visible de plus au
   telephone, que la passe excluait (reprise du meme jour). Le dessin est celui d'un lien-bulle
   (pages.css, 64 px de haut au moins), le libelle au Klein pour qu'il ne
   se lise pas comme une lecture de plus, la pastille portant un chevron
   vers le bas. Klein sur blanc 10,7:1, sur la teinte de la pastille
   9,4:1 (section 1). */
@media screen and (max-width: 760px){
  .k-article .k-appel .k-lectures--court > .k-lien-bulle:nth-child(n+5):not(.k-lectures-tout){ display:none; }
  .k-lectures-tout{
    width:100%; margin:0; border:0; cursor:pointer; text-align:left;
    font-family:inherit; letter-spacing:inherit; word-spacing:inherit;
    color:var(--k-klein); -webkit-appearance:none; appearance:none; -webkit-tap-highlight-color:transparent; }
}
@media screen and (max-width: 760px) and (hover:hover){
  .k-lectures-tout:hover .f-pastille{ transform:translateY(2px); }
}
/* Imprimee depuis le telephone, la page donne toutes ses lectures (la
   regle qui les masque ne vaut que pour l'ecran), sans le bouton. */
@media print{ .k-lectures-tout{ display:none; } }