/* =========================================================================
   ARTIS VALORISATION, REFONTE : FAMILLE LA METHODE (p-methode.css)
   Pages : methodologie.html, etude-de-cas.html et a-propos.html (mission
   de la famille « methode » du 30/09/2026 ; le gabarit rangeait A propos
   dans p-vitrine.css et le calculateur ici : le calculateur charge
   p-valorisation.css, A propos charge cette feuille).
   Depuis le 02/10/2026 (critique 4), la methodologie et A propos sont sur
   la scene de l'accueil : elles chargent socle.css, scene.css puis cette
   feuille, sans pages.css (sections 6 a 13, sous .ms-page). L'etude de cas
   reste sur le bleu : socle.css, pages.css puis cette feuille.
   Chargee en dernier. 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.
   Prefixe pm- pour tout ce qui est propre a la famille, ms- pour ce qui ne
   sert qu'aux deux pages sur la scene ; les classes k- de pages.css sont
   reprises telles quelles.
   Couleurs du 04/10/2026 (point 12 de Raphael, la couleur de l'accueil sur
   toutes les pages) : les voiles poses sous le texte prennent --f-voile
   (socle.css), le bleu du rapport assombri, au lieu de l'ardoise
   rgba(18,26,58) ou du marine rgba(5,12,54). Meme dessin, meme dose.
   L'azur des composants k- poses sur .ms-page suit celui de pages.css
   (#88B6EB, section 6).
   ------------------------------------------------------------------------- */

/* =========================================================================
   1. SUR LE BLEU : LIENS ET NOTES DES TETES DE SECTION
   pages.css ne donne pas de couleur aux liens poses dans un chapo sur le
   bleu (.k-lede) : sans cette regle, le bleu du navigateur (#0000EE) sur
   #213a66. Blanc souligne, 11,3:1. La note de tete (.pm-tete-note) porte
   une condition coupee du chapo par le prototype : blanc a 80 % (7,9:1),
   en 15 px, sous le chapo.
   ------------------------------------------------------------------------- */
.k-tete a{ color:var(--f-texte); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.k-tete a:hover{ text-decoration-thickness:2px; }
.pm-tete-note{ margin:0; max-width:44em; font-size:15px; line-height:1.45; letter-spacing:0; color:var(--k-attenue); text-wrap:pretty; }

/* =========================================================================
   2. METHODOLOGIE : LES DEPLIANTS DE BULLE
   Les conditions que le prototype coupait (traitement de chaque poste de la
   dette nette, fiscalite latente, echantillon...) restent dans la page,
   repliees mot pour mot dans les .k-depli de pages.css. Une liste dans un
   depliant prend la taille du depliant (15 px).
   ------------------------------------------------------------------------- */
.k-depli-corps .pm-liste-depli > li{ font-size:15px; line-height:1.45; letter-spacing:0; }
.k-depli-corps .pm-liste-depli > li:first-child{ padding-top:0; }

/* =========================================================================
   3. ETUDE DE CAS : LE TITRE ET LA BULLE DE L'ECART (couverture)
   Le titre : son dernier groupe, « fourchette defendable », mesure 9,97 em
   (mesure dans Chrome et dans WebKit). La ou la colonne du titre fait moins
   de 10 fois la taille d'affiche (de 1000 a 1210 px environ, et sous
   430 px), « defendable » restait seul sur la quatrieme ligne. La taille
   est plafonnee a 9,8 % de la largeur de la colonne (unites cqi, conteneur
   .pm-couv-texte) : le groupe tient toujours sur une ligne, le titre passe
   en trois lignes. Ailleurs, la taille d'affiche de pages.css ne change
   pas. Pas d'espace insecable entre les deux mots : le groupe deborderait
   de la colonne a 1024 et sous 430 px. Sans unites cqi, la declaration
   tombe et la taille d'affiche revient.
   Deux chiffres l'un sous l'autre dans la bulle : le chiffre du dirigeant
   (six fois l'EBITDA comptable) a l'encre, la valeur des titres du rapport
   final en Klein. Dans la colonne de 420 px de la couverture, un montant a
   sept chiffres doit tenir sur une ligne : taille ramenee de 68 a 60 px au
   plus.
   ------------------------------------------------------------------------- */
.pm-couv-texte{ container-type:inline-size; }
.pm-couv-titre{ font-size:min(var(--k-t-affiche), 9.8cqi); }

.pm-ecart-part{ display:grid; gap:10px; }
.pm-ecart-part > *{ margin:0; }
.pm-ecart-part + .pm-ecart-part{ margin-top:6px; padding-top:18px; border-top:1px solid var(--k-trait); }
.pm-ecart .k-chiffre--long{ font-size:clamp(40px, 1.6vw + 34px, 60px); }
.pm-chiffre-encre{ color:var(--k-encre); }

/* Un chiffre en toutes lettres (« plus d'un demi-million ») : il passe a la
   ligne, equilibre, avec l'interligne d'un titre. */
.pm-chiffre-mots{ white-space:normal; font-size:clamp(36px, 1.4vw + 30px, 56px); line-height:1.02; text-wrap:balance; }

/* Texte d'une bulle citation qui precede la phrase qui tombe. */
.pm-texte-grand{ font-size:18px; line-height:1.45; }
/* La bulle « Ce que montre ce cas » de l'etude de cas (05/10/2026) : sans
   mesure en em (point 5 de Raphael), ses deux paragraphes couraient sur
   toute la largeur de la bulle, 141 et 147 signes par ligne a 1 440. A
   partir de 1 100 px, ils se posent cote a cote, chacun sur la moitie de
   la bulle et jusqu'a son bord ; l'etiquette et la phrase qui tombe
   gardent toute la largeur. De 900 a 1 099 px, trop etroite pour deux
   colonnes, la bulle prend neuf douziemes de la grille, comme la bulle
   d'ouverture des analyses (p-analyses.css 4). */
@media (min-width: 900px) and (max-width: 1099px){
  .k-bulle--citation.k-c12:has(> .pm-texte-grand){ grid-column:span 9; }
}
@media (min-width: 1100px){
  .k-bulle--citation:has(> .pm-texte-grand){
    display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:48px; align-items:start; }
  .k-bulle--citation:has(> .pm-texte-grand) > :not(.k-bulle-texte){ grid-column:1 / -1; }
}

/* =========================================================================
   4. ETUDE DE CAS : LE PONT ET LA FOURCHETTE EN CASCADE
   Le tableau .k-cascade de pages.css (un vrai <table>, lignes en grille),
   dont la cellule de barre porte une piste a l'echelle au lieu de l'axe
   central : chaque barre part de la ou s'arrete la precedente (pont de
   valeur). Barres pleines Klein pour les deux valeurs, bleu clair #4F8BE0
   pour ce qui s'ajoute (3,4:1 sur blanc), pointille Klein pour ce qui se
   retranche ; le sens est aussi ecrit (« en plus », « en moins »). Le trait
   vertical, a l'encre (16,9:1), marque 2 520 000 euros sur une piste de
   2 700 000 euros : 93,333 %. Positions et largeurs en style en ligne,
   calculees depuis les montants de la page.
   ------------------------------------------------------------------------- */
.pm-piste{ position:relative; height:12px; border-radius:6px; background:var(--k-teinte); }
.pm-piste i{ position:absolute; top:0; bottom:0; min-width:4px; border-radius:6px; background:var(--k-clair); }
.pm-piste .pm-plus{ background:var(--k-clair); }
.pm-piste .pm-moins{ background:var(--k-blanc); border:1.5px dashed var(--k-klein); }
.pm-piste .pm-total{ background:var(--k-klein); }
.pm-piste::after{
  content:""; position:absolute; z-index:1; top:-6px; bottom:-6px; left:93.333%;
  width:2px; margin-left:-1px; border-radius:1px; background:var(--k-encre);
}
@media (min-width: 761px){
  .pm-piste{ height:14px; border-radius:7px; }
  .pm-piste i{ border-radius:7px; }
}
.pm-cascade tr.pm-central .k-cascade-nom, .pm-cascade tr.pm-central .k-cascade-val{ font-size:20px; letter-spacing:var(--f-serre); }
.pm-cascade tr.pm-central .k-cascade-val{ color:var(--k-klein); }

/* La qualite des informations, sous la fourchette : les quatre lettres,
   la retenue (B) pleine en Klein, texte blanc (10,7:1). */
.pm-calibre{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px 20px; align-items:center;
  padding-top:20px; border-top:1px solid var(--k-trait); }
.pm-calibre > *{ margin:0; }
.pm-calibre .k-notes .pm-note-retenue{ background:var(--k-klein); color:var(--k-blanc); }
@media (max-width: 560px){ .pm-calibre{ grid-template-columns:minmax(0,1fr); } }

/* Le tableau des quatre methodes au telephone. Audit du 03/10 (VIS-4) :
   sous 400 px, il coupait les montants au premier affichage (« 2 750 0 »),
   l'en-tete passait alors sur deux lignes et les deux premieres colonnes
   prenaient leur largeur minimale, la troisieme defilait.
   Audit telephone du 8 octobre (lot 3, constats 60 et 165), 09/10/2026 :
   le tableau gardait le plancher de 540 px de pages.css dans une bulle de
   309 px (252 px a 320). La colonne « Ce qui la porte », celle qui porte
   l'argument de chaque methode, ne montrait que 76 px sur 307 (18 px a
   320), sous un degrade de 32 px peu visible. Sous 760 px, chaque ligne
   s'empile comme les cascades de la meme page (.k-cascade, pages.css) : la
   methode et sa valeur sur une ligne, la valeur a droite en chiffres
   tabulaires, puis la justification dessous, en 14 px gris, sur toute la
   largeur. Plus de plancher ni de defilement : tout se lit sans glisser le
   doigt. L'en-tete des colonnes reste lu par les lecteurs d'ecran (masque
   a la vue, comme .sr-only), l'etiquette de la bulle nomme deja le
   tableau. La regle de 400 px d'avant n'a plus d'objet : retiree. Le
   conteneur ne defile plus au telephone : pages.js lui retire alors son
   tabindex, son role et son nom de zone a defiler, sous 761 px seulement.
   Le balisage les garde (reprise du 09/10/2026 : retires du HTML, ils
   manquaient aussi au clavier et au lecteur d'ecran au-dela de 760 px).
   A partir de 761 px, rien ne change. */
@media (max-width: 760px){
  .k-page #methodes .k-tableau-defile{ overflow:visible; background:none; }
  .k-page #methodes .k-tableau table{ min-width:0; }
  .k-page #methodes .k-tableau thead{
    position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
    clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
  }
  .k-page #methodes .k-tableau tbody tr{
    display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"nom val" "com com";
    column-gap:16px; row-gap:6px; align-items:baseline; padding:14px 0;
  }
  .k-page #methodes .k-tableau tbody tr:first-child{ padding-top:2px; }
  .k-page #methodes .k-tableau tbody tr:last-child{ padding-bottom:0; }
  .k-page #methodes .k-tableau tbody tr + tr{ border-top:1px solid var(--k-trait); }
  .k-page #methodes .k-tableau tbody tr > *{ width:auto; padding:0; border-top:0; }
  .k-page #methodes .k-tableau tbody th{ grid-area:nom; font-size:16px; line-height:1.3; font-weight:500; color:var(--k-encre); }
  .k-page #methodes .k-tableau tbody td.k-nombre{ grid-area:val; font-size:16px; line-height:1.3; font-weight:500; text-align:right; white-space:nowrap; }
  .k-page #methodes .k-tableau tbody td:last-child{ grid-area:com; font-size:14px; line-height:1.45; color:var(--k-gris); white-space:normal; }
}

/* =========================================================================
   5. A PROPOS : LA COUVERTURE EN UNE BULLE, LA PHOTO EN MEDAILLON
   Raphael, 04/10/2026 : la photo « en plus petit, plus discret ». Elle
   quitte sa bulle (03/10/2026 au soir : deux bulles cote a cote) et passe
   dans celle du texte, en medaillon rond a cote du nom : 112 px a partir
   de 761 px, 80 px au telephone, au-dessus du nom. Toutes les regles sont
   sous .ms-apropos : la methodologie et l'etude de cas chargent cette
   feuille. La couverture suit son contenu (pas de hauteur d'ecran), la
   scene reste visible autour. La bulle du texte est un conteneur de
   requete : le nom, la phrase et le paragraphe prennent une taille en cqi,
   bornee en bas (lisible au telephone) et en haut. En haut, le medaillon,
   l'etiquette (le titre de la page) et la presentation. En bas, sous un
   filet, la phrase d'ouverture et le paragraphe.
   ------------------------------------------------------------------------- */
.ms-apropos .ms-couv--duo{ min-height:0; justify-content:flex-start; padding-bottom:40px; }
.ms-apropos .ap-presente{ position:relative; container-type:inline-size; gap:28px; }
.ms-apropos .ap-presente-haut{ display:flex; flex-direction:column; align-items:flex-start; gap:18px; min-width:0; }
.ms-apropos .ap-presente-bas{ display:flex; flex-direction:column; min-width:0; }
.ms-apropos .ap-identite{ min-width:0; }
.ms-apropos .ap-portrait{ display:block; flex:none; width:80px; height:80px; border-radius:50%; overflow:hidden;
  background:var(--k-teinte); box-shadow:0 0 0 1px var(--k-trait); }
.ms-apropos .ap-portrait img{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 22%; }
.ms-apropos .ap-presente p{ margin:0; }
.ms-apropos .ap-etiquette{ margin:0 0 12px; line-height:1.35; color:var(--g-klein); }
.ms-apropos .ap-nom{ display:grid; gap:8px; }
.ms-apropos .ap-nom strong{ font-size:clamp(27px, 6cqi, 56px); line-height:1.05; font-weight:500; letter-spacing:-0.035em; color:var(--k-encre); text-wrap:balance; }
.ms-apropos .ap-role{ font-size:clamp(16px, 2.2cqi, 20px); line-height:1.3; letter-spacing:-0.01em; color:var(--f-encre-2); }
.ms-apropos .ap-presente-bas{ gap:clamp(14px, 2.4cqi, 22px); padding-top:clamp(20px, 3.6cqi, 32px); border-top:1px solid var(--k-trait); }
.ms-apropos .ap-phrase{ max-width:23em; font-size:clamp(21px, 3.4cqi, 34px); line-height:1.18; font-weight:500; letter-spacing:-0.03em; color:var(--k-encre); text-wrap:pretty; }
.ms-apropos .ap-texte{ font-size:clamp(16px, 1.8cqi, 19px); }
@media (min-width: 761px){
  .ms-apropos .ap-presente-haut{ flex-direction:row; align-items:center; gap:28px; }
  .ms-apropos .ap-portrait{ width:112px; height:112px; }
  .ms-apropos .ap-presente{ padding:36px 40px; }
}
@media (min-width: 1200px){
  .ms-apropos .ap-presente{ padding:48px 56px; max-width:980px; }
}
@media (max-width: 760px){
  .ms-apropos .ms-couv--duo{ padding-bottom:32px; }
}

/* =========================================================================
   6. SUR LA SCENE : LES JETONS ET LE PRINCIPE
   Critique 4 de Raphael (02/10/2026) : la methodologie et A propos quittent
   le fond bleu fixe pour la scene de l'accueil (fond qui bouge, bandes
   claires, une bande « bleu tres sombre », meme style). Ces deux pages
   portent body.f-page.ms-page et chargent socle.css, scene.css, puis cette
   feuille ; pas pages.css : ses surcharges de la barre (verre marine du nom,
   burger de verre, Contact pleine largeur), des boutons (texte cale a
   gauche, largeur gardee au telephone) et du pied (voile, couleurs, grille
   sous 380 px) ne sont pas limitees aux pages sur le bleu, et la barre et
   le pied doivent rester ceux de l'accueil, a l'identique.
   Les composants k- dont le contenu a besoin (listes, lignes depliables,
   depliants, formules, pont de valeur, postes, notes A a D, chiffres,
   citation, sommaire, fil d'Ariane, lien-bulle) sont repris ici de
   pages.css, regle pour regle, sous .ms-page : l'etude de cas, qui charge
   pages.css et cette feuille, n'en voit rien. Les jetons k- qu'ils lisent
   (et les bulles d'A propos, sections 5 et 13 bis) sont poses sur .ms-page, aux valeurs
   de pages.css. Prefixe ms- (methode sur la scene) pour le reste : pm-
   sert deja a l'etude de cas.
   ------------------------------------------------------------------------- */
.ms-page{
  --k-blanc:#ffffff; --k-encre:#0B1D36; --k-gris:#4f596a; --k-klein:#002FA7; --k-azur:#88B6EB;
  --k-clair:#4F8BE0; --k-teinte:#edf1fa; --k-trait:#e2e6ee;
  --k-r-bulle:20px; --k-r-petit:12px; --k-courbe:cubic-bezier(.2,.7,.2,1);
  --k-t-chiffre:clamp(56px, 4vw + 42px, 104px);
}
.ms-page [id]{ scroll-margin-top:100px; }
.ms-page h2, .ms-page h3{ text-wrap:balance; }
.ms-page .k-insec{ white-space:nowrap; }

/* =========================================================================
   7. LA COUVERTURE SUR LA SCENE
   Le dessin de la tete des offres (offre.css, .go-tete) : un ecran, le
   contenu pose en bas ; a droite, la bulle blanche du sommaire, posee sur
   le bas du texte (methodologie). Sur A propos, le fil d'Ariane puis les
   deux bulles de la photo et du texte (section 5).
   Le voile : la regle des voiles du gabarit (section 4), ardoise profonde
   #121a3a, radial, plein au centre et fondu a rien, sous la colonne de
   texte seulement (--ms-voile-x, --ms-voile-y : son centre suit le texte
   de chaque page). Mesure du 02/10/2026 (Chrome WebGL, scene vivante) :
   sans voile, l'accent « en cinq etapes. » tombe a 2,96:1 a 1 440 ; avec
   celui de la tete des offres (62 x 74 %, 45 %), 5,0:1, mais l'ecran perd
   12,9 % de clarte. Resserre sur la colonne (46 x 36 %) et allege (32, 26,
   9 %) : accent 4,2:1 au pire (1 024), fil d'Ariane 5,8:1, l'ecran ne perd
   que 3,5 a 4,7 %. En portrait, le voile lineaire de la tete des offres
   (scene.css, section 15), a 45 % : l'accent y descend a 2,8:1 a 30 %
   (WebKit 393). Sur A propos, sans accent, 30 % suffisent (titre 5,6:1,
   fil 6,5:1 a 320) et l'ecran garde 1 a 1,5 % de clarte de plus.
   ------------------------------------------------------------------------- */
.ms-couv{
  position:relative; isolation:isolate; min-height:clamp(640px, 100svh, 1040px);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:134px 0 88px;
  --ms-voile-x:30%; --ms-voile-y:76%; --ms-voile-portrait:.45;
}
.ms-couv::before{
  content:""; position:absolute; z-index:-1; inset:0; pointer-events:none;
  background:radial-gradient(46% 36% at var(--ms-voile-x) var(--ms-voile-y), rgba(var(--f-voile),.32) 0, rgba(var(--f-voile),.26) 48%, rgba(var(--f-voile),.09) 78%, rgba(var(--f-voile),0) 100%);
}
@media (max-aspect-ratio: 1099/1000){
  .ms-couv::before{ background:linear-gradient(to bottom, rgba(var(--f-voile),var(--ms-voile-portrait)), rgba(var(--f-voile),var(--ms-voile-portrait)) 80%, rgba(var(--f-voile),0)); }
}
.ms-couv-grille{ display:grid; grid-template-columns:minmax(0,1fr) 420px; column-gap:72px; align-items:end; }
.ms-couv-titre{ font-size:clamp(40px, 4.4vw, 64px); line-height:1.04; text-wrap:balance; max-width:13em; }
.ms-accent{ color:var(--f-azur-scene, var(--g-azur)); }
.ms-couv-chapo{ margin-top:28px; max-width:600px; line-height:1.4; }
/* A propos (03/10/2026 au soir) : le fil d'Ariane, puis les deux bulles
   (section 5) ; le titre de la page est dans la bulle du texte. Sur la
   scene, seul le fil d'Ariane est en blanc : le voile se centre sur lui
   (paysage), ou couvre toute la tete (portrait, 30 %).
   Le bas de la couverture : 40 px sous les bulles au lieu de 88. La barre
   prend son verre dense tant qu'une bulle blanche passe sous elle, puis
   des que la couverture est passee (socle.js, 1 et 1b) ; avec 88 px entre
   les deux, elle redevenait claire sur 23 px de defilement puis dense a
   nouveau (releve du 02/10, Chrome 1 440) : un clignement de la barre.
   Les 240 px de scene qui suivent (--f-souffle) gardent l'air. */
.ms-apropos .ms-couv--duo{ --ms-voile-x:8%; --ms-voile-y:17%; --ms-voile-portrait:.30; }

/* Le fil d'Ariane sur la scene : celui des pages sur le bleu (pages.css,
   section 6), liens de 44 px au toucher. La page courante passe de 80 a
   86 % de blanc : la scene est plus claire que le bleu fixe. */
.ms-page .k-fil{ margin:-10px 0 10px; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:4px 0;
  font-size:13px; line-height:20px; letter-spacing:.02em; color:rgba(255,255,255,.86); }
.ms-page .k-fil li + li::before{ content:"/"; margin:0 8px; opacity:.7; }
.ms-page .k-fil a{ color:var(--f-texte); text-decoration:none; display:inline-flex; align-items:center; min-height:44px; min-width:44px; }
.ms-page .k-fil li[aria-current]{ display:inline-flex; align-items:center; min-height:44px; }
@media (hover:hover){ .ms-page .k-fil a:hover{ text-decoration:underline; text-underline-offset:3px; } }

/* Le sommaire : la bulle blanche de la couverture, ses lignes de 48 px
   (pages.css, section 8). */
.ms-page .k-sommaire{ gap:4px; padding:22px 26px 14px; }
.ms-page .k-sommaire .f-etiquette{ margin-bottom:6px; }
.ms-page .k-sommaire ol{ list-style:none; margin:0; padding:0; display:grid; }
.ms-page .k-sommaire li + li{ border-top:1px solid var(--k-trait); }
.ms-page .k-sommaire a{ display:grid; grid-template-columns:34px minmax(0,1fr) 20px; align-items:center; gap:8px; min-height:48px;
  color:var(--k-encre); text-decoration:none; font-size:16px; line-height:1.25; font-weight:500; }
.ms-page .k-sommaire a span:first-child{ font-size:13px; font-weight:500; letter-spacing:.06em; color:var(--k-klein); }
.ms-page .k-sommaire a .f-pastille{ background:var(--k-teinte); color:var(--k-klein); transition:transform .2s var(--k-courbe), background-color .2s; }
@media (hover:hover){
  .ms-page .k-sommaire a:hover .f-pastille{ transform:translateX(3px); background:var(--k-klein); color:var(--k-blanc); }
}

@media (max-width: 1199px){
  .ms-couv-grille{ grid-template-columns:minmax(0,1fr) 380px; column-gap:40px; }
}
@media (max-width: 960px){
  .ms-couv{ min-height:0; padding-top:128px; }
  .ms-couv-grille{ grid-template-columns:minmax(0,1fr); }
  .ms-couv-grille > .k-sommaire{ margin-top:40px; max-width:560px; }
}
@media (max-width: 760px){
  .ms-couv{ padding:104px 0 56px; }
  .ms-couv-titre{ font-size:clamp(34px, 9.6vw, 40px); line-height:1.06; }
  .ms-couv-chapo{ margin-top:20px; }
  .ms-couv-grille > .k-sommaire{ margin-top:32px; padding:16px 18px 8px; }
}

/* =========================================================================
   8. LE RYTHME DES SECTIONS
   Celui de l'accueil : de la scene entre deux blocs (--f-souffle), des
   bandes qui se suivent sans scene entre elles (papier puis marine, comme
   la conception puis le contenu du rapport), le duo collant du deroulement
   (scene.css, f2-section). Le grand panneau blanc de la demonstration ne
   sert plus depuis le 04/10/2026 (section 12) : l'etape 04 et les
   ajustements, sa suite, sont deux duos collants qui se suivent (section
   15), separes par l'ecart de deux duos de l'accueil (--f-entre-duos).
   ------------------------------------------------------------------------- */
.ms-page main > .f-bande{ margin-top:var(--f-souffle); }
.ms-page main > .f-bande + .f-bande{ margin-top:0; }
.ms-ajustements{ margin-top:var(--f-entre-duos); }
/* Le duo collant garde 48 px entre ses colonnes : a 1 024, 600 + 680 px
   dans 944 se touchaient, et le chapo des ajustements venait buter contre
   les bulles (scene.css ne pose pas d'ecart). Les colonnes retrecissent
   d'autant. */
.ms-duo.f2-section .f-duo-colle{ column-gap:48px; }

/* Le numero de l'etape devant l'etiquette : azur pale sur la scene (sous
   le voile de la colonne collante), azur sur la bande marine, Klein sur le
   papier. */
.ms-numero{ margin-right:12px; color:var(--f-azur-scene, var(--g-azur)); }
.f-bande .ms-numero{ color:var(--g-klein); }
.f-bande--marine .ms-numero{ color:var(--g-azur); }

/* En-tetes des bandes : le titre a gauche, le chapo a droite
   (scene.css, .f-entete-duo) ; une colonne jusqu'a 1 100 px, comme celui du
   contenu du rapport (accueil.css, .f1-contenu-entete). */
.ms-entete .f-titre-section{ max-width:640px; }
.ms-entete-texte{ display:grid; gap:14px; }
.ms-entete-note{ margin:0; max-width:600px; font-size:15px; line-height:1.45; letter-spacing:0; color:var(--f-attenue-70); text-wrap:pretty; }
.ms-entete--seul{ margin-bottom:var(--f-ecart-titre-contenu); }
@media (max-width: 1100px) and (min-width: 761px){
  .ms-entete.f-entete-duo{ grid-template-columns:minmax(0,1fr); gap:24px; align-items:start; }
}
@media (max-width: 760px){
  .ms-entete.f-entete-duo{ gap:16px; }
}

/* =========================================================================
   9. LES BULLES BLANCHES
   Les cartes de l'accueil (scene.css, .f-carte : blanc, rayon 16, ombre
   marine sur la scene, ombre douce et filet dans une bande), resserrees
   pour un contenu plus dense : 16 px entre les lignes au lieu de 24.
   Etiquette en Klein, comme les bulles d'idee des pages interieures ; titre
   de carte de l'accueil (28/20 px) ; texte en 17 px a l'encre ; note en
   14 px, encre-3 (6,0:1 sur blanc), 15 px sur 1,5 au telephone depuis
   le 09/10/2026 (section 16).
   ------------------------------------------------------------------------- */
.ms-carte{ gap:16px; }
.ms-carte > *{ margin:0; }
.ms-carte .f-etiquette{ margin:0; line-height:1.35; color:var(--g-klein); }
/* Sous 360 px, une etiquette longue (« Les sept retraitements examines »)
   passe sur deux lignes : interligne de 1,35 au lieu de 1, et espacement
   ramene a .2 em, comme celle de la couverture de l'accueil. */
@media (max-width: 359px){ .ms-carte .f-etiquette{ letter-spacing:.2em; } }
/* Point 5 de Raphael (04/10/2026) : texte et note vont jusqu'au bord de leur
   carte, sans mesure en em. */
.ms-texte{ margin:0; font-size:17px; line-height:1.5; letter-spacing:-0.01em; color:var(--g-encre); text-wrap:pretty; }
.ms-note{ margin:0; font-size:14px; line-height:1.45; letter-spacing:0; color:var(--f-encre-3); text-wrap:pretty; }
.ms-note a, .ms-texte a{ color:var(--g-klein); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
@media (hover:hover){ .ms-note a:hover, .ms-texte a:hover{ text-decoration-thickness:2px; } }
.ms-carte :focus-visible{ outline-color:var(--g-klein); }
@media (max-width: 760px){ .ms-texte{ font-size:16px; } }

/* La bulle citation : une phrase en grand, la chute en Klein. */
.ms-citation{ gap:20px; }
@media (min-width: 761px){ .ms-citation{ padding:44px 48px; } }
/* La variante large (.ms-citation--large, « Pourquoi Artis » d'A propos
   jusqu'au 03/10/2026) ne servait plus a aucune page : retiree le
   04/10/2026. Le recit d'A propos a ses propres regles (13 bis). */

/* Grilles de bulles : une colonne au telephone ; douze colonnes a partir de
   900 px (7 et 5), deux colonnes a partir de 640 px pour .ms-grille--2. */
.ms-grille{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--f-ecart-grille); align-items:start; }
@media (min-width: 640px){ .ms-grille--2{ grid-template-columns:repeat(2, minmax(0,1fr)); align-items:stretch; } }
@media (min-width: 900px){
  .ms-grille:not(.ms-grille--2){ grid-template-columns:repeat(12, minmax(0,1fr)); }
  .ms-c5{ grid-column:span 5; } .ms-c7{ grid-column:span 7; }
}
/* Les incertitudes : bulles de meme hauteur par rangee. */
.ms-methode #incertitudes .ms-grille{ align-items:stretch; }

/* =========================================================================
   10. LES COMPOSANTS k- DANS LES BULLES (repris de pages.css, section 8)
   ------------------------------------------------------------------------- */
/* Puce : approche, sens d'un retraitement */
.ms-page .k-puce{ display:inline-flex; align-items:center; gap:6px; align-self:flex-start; min-height:28px; padding:4px 12px;
  border-radius:999px; background:var(--k-teinte); color:var(--k-klein);
  font-size:13px; line-height:1.2; font-weight:500; letter-spacing:0; white-space:nowrap; }
.ms-page .k-puce svg{ width:14px; height:14px; flex:none; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

/* Bulle chiffree : un nombre, une ligne. */
.ms-page .k-chiffre{ display:block; font-size:var(--k-t-chiffre); line-height:.95; font-weight:500; letter-spacing:-0.03em;
  color:var(--k-klein); white-space:nowrap; font-variant-numeric:tabular-nums lining-nums; }
.ms-page .k-chiffre--long{ font-size:clamp(44px, 2vw + 36px, 68px); }
/* Le grand chiffre de l'etude de cas (« 2 700 000 € ») ne sort jamais de sa
   bulle, meme quand la grille la resserre (900 a 944 px). */
.ec-retenue{ container-type:inline-size; }
.ec-retenue .k-chiffre--long{ font-size:min(clamp(44px, 2vw + 36px, 68px), 15cqi); }
.ms-page .k-chiffre-legende{ font-size:18px; line-height:1.35; font-weight:500; letter-spacing:var(--f-serre); color:var(--k-encre); text-wrap:balance; max-width:30em; }
/* Au telephone, au bout de la bulle, comme dans pages.css (05/10/2026). */
@media (max-width: 760px){ .ms-page .k-chiffre-legende{ max-width:none; } }
.ms-page .k-calcul{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; font-size:15px; line-height:1.4; color:var(--k-gris); letter-spacing:0; }
.ms-page .k-calcul b{ font-weight:500; color:var(--k-encre); }

/* Citation */
.ms-page .k-citation{ margin:0; font-size:clamp(24px, 1.6vw + 18px, 40px); line-height:1.15; font-weight:500; letter-spacing:-0.03em; color:var(--k-encre); text-wrap:balance; }
.ms-page .k-citation-suite{ color:var(--k-klein); }

/* Liste dans une bulle : filets fins, pas de puces */
.ms-page .k-liste{ list-style:none; margin:0; padding:0; display:grid; }
.ms-page .k-liste > li{ padding:12px 0; border-top:1px solid var(--k-trait); font-size:16px; line-height:1.4; }
.ms-page .k-liste > li:first-child{ border-top:0; padding-top:4px; }
.ms-page .k-liste > li:last-child{ padding-bottom:0; }
.ms-page .k-liste strong{ font-weight:500; }
.ms-page .k-liste--num{ counter-reset:k; }
.ms-page .k-liste--num > li{ display:grid; grid-template-columns:32px minmax(0,1fr); counter-increment:k; }
.ms-page .k-liste--num > li::before{ content:counter(k, decimal-leading-zero); font-size:13px; font-weight:500; color:var(--k-klein); line-height:1.6; letter-spacing:.06em; }

/* Depliant dans une bulle (formule, conditions) : 44 px au toucher */
.ms-page .k-depli{ border-top:1px solid var(--k-trait); margin-top:auto; }
.ms-page .k-depli > summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:44px; padding-top:8px; font-size:15px; line-height:1.3; font-weight:500; color:var(--k-klein); letter-spacing:0;
}
.ms-page .k-depli > summary::-webkit-details-marker{ display:none; }
.ms-page .k-depli > summary::after{
  content:""; width:8px; height:8px; flex:none; margin-right:6px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-2px) rotate(45deg);
  transition:transform .2s var(--k-courbe);
}
.ms-page .k-depli[open] > summary::after{ transform:translateY(2px) rotate(-135deg); }
.ms-page .k-depli-corps{ padding:4px 0 2px; display:grid; gap:10px; font-size:15px; line-height:1.5; color:var(--k-encre); }
.ms-page .k-depli-corps p{ margin:0; }
.ms-page .k-formule{ margin:0; padding:14px 16px; border-radius:var(--k-r-petit); background:var(--k-teinte);
  font-size:14px; line-height:1.55; letter-spacing:0; color:var(--k-encre); }
.ms-page .k-formule span{ display:block; }
.ms-page .k-formule span + span{ padding-left:1.2em; }

/* Lignes depliables (sept retraitements) : 56 px au toucher */
.ms-page .k-lignes{ display:grid; }
.ms-page .k-ligne{ border-top:1px solid var(--k-trait); }
.ms-page .k-ligne:first-child{ border-top:0; }
.ms-page .k-ligne > summary{
  list-style:none; cursor:pointer; display:grid; grid-template-columns:minmax(0,1fr) auto 16px; align-items:center; gap:6px 12px;
  min-height:56px; padding:8px 0; font-size:16px; line-height:1.3; font-weight:500; color:var(--k-encre);
}
.ms-page .k-ligne > summary::-webkit-details-marker{ display:none; }
.ms-page .k-ligne > summary::after{
  content:""; width:8px; height:8px; justify-self:center;
  border-right:2px solid var(--k-klein); border-bottom:2px solid var(--k-klein); transform:translateY(-2px) rotate(45deg);
  transition:transform .2s var(--k-courbe);
}
.ms-page .k-ligne[open] > summary::after{ transform:translateY(2px) rotate(-135deg); }
.ms-page .k-ligne p{ margin:0 0 14px; font-size:15px; line-height:1.5; color:var(--k-gris); letter-spacing:0; }
@media (max-width: 420px){
  .ms-page .k-ligne > summary{ grid-template-columns:minmax(0,1fr) 16px; }
  .ms-page .k-ligne > summary .k-puce{ grid-column:1; grid-row:2; justify-self:start; }
  .ms-page .k-ligne > summary::after{ grid-column:2; grid-row:1 / span 2; }
}

/* Notes A a D : aucune lettre mise en avant */
.ms-page .k-notes{ display:flex; gap:8px; margin:4px 0; }
.ms-page .k-notes span{ display:grid; place-items:center; width:48px; height:48px; border-radius:var(--k-r-petit);
  background:var(--k-teinte); color:var(--k-klein); font-size:20px; font-weight:500; }

/* Pont de valeur (schema sans chiffres) et postes examines */
.ms-page .k-pont{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.ms-page .k-pont li{ display:grid; grid-template-columns:minmax(0,1fr); gap:6px; }
.ms-page .k-pont-nom{ font-size:15px; line-height:1.3; letter-spacing:0; color:var(--k-encre); }
.ms-page .k-pont-nom b{ font-weight:500; }
.ms-page .k-pont-piste{ position:relative; height:14px; border-radius:7px; background:var(--k-teinte); }
.ms-page .k-pont-barre{ position:absolute; top:0; bottom:0; border-radius:7px; background:var(--k-clair); }
.ms-page .k-pont-barre--moins{ background:var(--k-blanc); border:1.5px dashed var(--k-klein); }
.ms-page .k-pont-barre--total{ background:var(--k-klein); }
@media (min-width: 761px){
  .ms-page .k-pont li{ grid-template-columns:236px minmax(0,1fr); align-items:center; gap:24px; }
  .ms-page .k-pont-piste{ height:18px; border-radius:9px; }
}
.ms-page .k-postes{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.ms-page .k-postes li{ padding:8px 14px; border-radius:999px; background:var(--k-teinte); color:var(--k-encre);
  font-size:14px; line-height:1.3; letter-spacing:0; }

/* Lien-bulle (A propos, sur la bande marine) : 64 px de haut, la pastille
   passe au Klein et se decale de 3 px au survol. */
.ms-page .k-lien-bulle{ display:grid; grid-template-columns:minmax(0,1fr) 20px; align-items:center; gap:16px; min-height:64px;
  padding:16px 22px; border-radius:var(--k-r-petit); background:var(--k-blanc); color:var(--k-encre); text-decoration:none;
  font-size:16px; line-height:1.3; font-weight:500; overflow-wrap:anywhere; transition:transform .2s var(--k-courbe); }
.ms-page .k-lien-bulle .f-pastille{ background:var(--k-teinte); color:var(--k-klein); transition:transform .2s var(--k-courbe), background-color .2s; }
.ms-page .k-lien-bulle:focus-visible{ outline:2px solid var(--f-blanc); outline-offset:3px; }
@media (hover:hover){ .ms-page .k-lien-bulle:hover .f-pastille{ background:var(--k-klein); color:var(--k-blanc); transform:translateX(3px); } }
.ms-page .k-lien-bulle:active{ transform:scale(.99); }

/* =========================================================================
   11. LA BANDE MARINE DES METHODES (methodologie)
   La section « bleu tres sombre » : la bande du contenu du rapport de
   l'accueil (scene.css, .f-bande--marine, #03021b, jetons de texte
   blancs). Les quatre methodes sont ce que le rapport croise, le coeur de
   son contenu ; la synthese, un schema sans chiffres, revient sur la scene
   (duo collant, section 12). Les bulles a gauche ; a droite, collant, l'extrait
   du rapport d'exemple qui les montre rapprochees, avec la legende et
   l'ombre de la mission des offres (offre-mission.css, section 3).
   Contrastes sur #03021b : blanc 20,4:1, blanc a 70 % 11,4:1, azur
   #7FB0E8 9,0:1. Depuis le 04/10/2026, la bande prend le bleu du rapport
   #15253E (--f-aplat, socle.css), comme celle de l'accueil : blanc
   15,4:1, blanc a 70 % 8,2:1, azur 6,8:1.
   ------------------------------------------------------------------------- */
.ms-methodes-grille{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,560px); column-gap:64px; align-items:start; }
.ms-methodes-pile{ display:grid; gap:var(--f-ecart-grille); }
.ms-figure{ position:sticky; top:var(--f-colle-haut); margin:0; min-width:0; }
.ms-legende{ display:flex; flex-direction:column; gap:6px; margin:0 0 16px; }
.ms-legende-sur{ font-size:12px; line-height:1.3; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--g-azur); }
.ms-legende-nom{ font-size:18px; line-height:1.25; letter-spacing:-0.015em; color:rgba(255,255,255,.92); text-wrap:balance; }
.ms-image{ display:block; width:100%; height:auto; border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.45), 0 4px 14px rgba(0,0,0,.30); }
.ms-figure-note{ margin:16px 0 0; font-size:14px; line-height:1.45; letter-spacing:0; color:var(--f-attenue-70); }
.ms-figure-note a{ display:inline-flex; align-items:center; min-height:44px; margin-block:-12px; color:var(--f-texte);
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
@media (hover:hover){ .ms-figure-note a:hover{ text-decoration-thickness:2px; } }
@media (max-width: 1100px){
  .ms-methodes-grille{ grid-template-columns:minmax(0,1fr); }
  .ms-figure{ position:static; margin-top:48px; max-width:640px; }
}
@media (max-width: 760px){
  .ms-figure{ margin-top:40px; }
  .ms-legende{ margin-bottom:12px; }
  .ms-legende-nom{ font-size:17px; }
  .ms-image{ border-radius:10px; box-shadow:0 14px 36px rgba(0,0,0,.45), 0 3px 10px rgba(0,0,0,.30); }
}

/* =========================================================================
   12. LA SYNTHESE (methodologie) : LE PONT ET LES POSTES EN BULLES
   Jusqu'au 04/10/2026, le grand panneau blanc de la demonstration de
   l'accueil portait l'en-tete de l'etape 04, le pont et les postes. Point
   11 de Raphael (la methodologie au telephone) : le seul titre d'etape
   dans une bulle. L'etape prend le duo collant de l'etape 01 (section 15)
   et ses deux blocs deviennent deux bulles de la pile ; les regles du
   panneau (.ms-panneau, .ms-panneau-corps, .ms-panneau-bloc) ne servaient
   qu'ici, elles sont retirees.
   La bulle du pont est un conteneur de requete : le nom de chaque ligne a
   gauche de sa barre (236 px, pages.css a partir de 761 px) seulement si
   la bulle offre 520 px de contenu ou plus (1 440 : 616 px). Plus etroite
   (la pile descend a 448 px a 1 024 et a 300 px a 768), le nom passe
   au-dessus de sa barre, comme au telephone : la barre gardait 124 px a
   1 024 et 40 px a 768.
   ------------------------------------------------------------------------- */
.ms-methode .ms-carte-pont{ container-type:inline-size; }
@container (max-width: 519px){
  .ms-methode .ms-carte-pont .k-pont li{ grid-template-columns:minmax(0,1fr); gap:6px; }
}

/* =========================================================================
   13. A PROPOS : LA BANDE DU PARCOURS
   La section « bleu tres sombre » d'A propos : le parcours est la piece qui
   fonde la page, comme le rapport fonde l'accueil. Quatre bulles blanches
   en deux colonnes, puis les deux liens-bulles.
   ------------------------------------------------------------------------- */
.ms-parcours .ms-carte{ height:100%; }

/* =========================================================================
   13 BIS. A PROPOS : POURQUOI ARTIS ET LE NOM
   Le recit de Raphael (03/10/2026 au soir) : deux bulles l'une sous
   l'autre, sur toute la largeur. Les deux bulles cote a cote d'avant
   (7 et 5 colonnes) ne tiennent plus : le recit fait le double du nom.
   La premiere : l'etiquette ; la citation (7 colonnes) et le premier
   paragraphe (5), cale sur le bas de la citation, a partir de 1 100 px,
   l'un sous l'autre avant ; sous un filet, « Artis repose sur trois
   piliers. » et les trois piliers en pastilles (teinte, numero Klein, le
   mot en grand, la suite en texte), en trois colonnes a partir de 761 px
   (au telephone, en liste serree depuis le 09/10/2026, section 16),
   sous un filet, la chute, a la taille de la citation, la seconde phrase
   en Klein. Encres sur la teinte #edf1fa : encre 15,3:1, encre-2 8,0:1,
   Klein 9,6:1.
   La seconde : le mot latin en grand, en Klein, italique de DM Sans (la
   seule italique de la page : un mot d'une autre langue), et son
   etymologie a gauche (5 colonnes) ; le sens que Raphael donne au nom a
   droite (7), en 19 a 25 px, cale sur le bas, a partir de 900 px.
   Ces regles ne valent que sous .ms-apropos.
   ------------------------------------------------------------------------- */
.ms-apropos .ap-recit{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--f-ecart-grille); }
.ms-apropos .ap-pourquoi, .ms-apropos .ap-nom-carte{ gap:28px; }
.ms-apropos .ap-recit p{ margin:0; }
.ms-apropos .ap-recit .f-etiquette{ margin:0; line-height:1.35; color:var(--g-klein); }
.ms-apropos .ap-pourquoi-tete{ display:grid; gap:20px; }
.ms-apropos .ap-pourquoi .k-citation{ max-width:20em; }
.ms-apropos .ap-piliers{ display:grid; gap:16px; padding-top:28px; border-top:1px solid var(--k-trait); }
.ms-apropos .ap-piliers-intro{ font-size:clamp(18px, .5vw + 15px, 22px); line-height:1.3; font-weight:500; letter-spacing:-0.02em; color:var(--k-encre); }
.ms-apropos .ap-piliers-liste{ list-style:none; margin:0; padding:0; display:grid; gap:12px; counter-reset:pilier; }
.ms-apropos .ap-piliers-liste > li{ counter-increment:pilier; display:flex; flex-direction:column; gap:6px; padding:18px 20px 20px;
  border-radius:var(--k-r-petit); background:var(--k-teinte);
  font-size:16px; line-height:1.4; letter-spacing:-0.01em; color:var(--f-encre-2); }
.ms-apropos .ap-piliers-liste > li::before{ content:counter(pilier, decimal-leading-zero); margin-bottom:4px;
  font-size:13px; line-height:1.2; font-weight:500; letter-spacing:.06em; color:var(--k-klein); }
.ms-apropos .ap-piliers-liste strong{ display:block; font-size:clamp(22px, .8vw + 16px, 28px); line-height:1.15; font-weight:500;
  letter-spacing:-0.03em; color:var(--k-encre); }
.ms-apropos .ap-chute{ padding-top:28px; border-top:1px solid var(--k-trait); }
.ms-apropos .ap-pourquoi .k-citation.ap-chute{ max-width:none; }
.ms-apropos .ap-nom-mot{ display:flex; flex-direction:column; gap:16px; min-width:0; }
.ms-nom-mot{ margin:0; font-size:clamp(40px, 2.4vw + 26px, 64px); line-height:1.05; font-weight:500; font-style:italic;
  letter-spacing:-0.02em; color:var(--k-klein); }
.ms-apropos .ap-nom-sens{ max-width:30em; font-size:clamp(19px, .7vw + 15px, 25px); line-height:1.35; font-weight:500;
  letter-spacing:-0.02em; color:var(--k-encre); text-wrap:pretty; }
.ms-apropos .ap-recit i{ font-style:italic; }
@media (min-width: 761px){
  .ms-apropos .ap-pourquoi, .ms-apropos .ap-nom-carte{ padding:44px 48px; gap:36px; }
  .ms-apropos .ap-piliers{ padding-top:36px; }
  .ms-apropos .ap-piliers-liste{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
  .ms-apropos .ap-piliers-liste > li{ padding:22px 24px 24px; }
  .ms-apropos .ap-chute{ padding-top:36px; }
}
@media (min-width: 900px){
  .ms-apropos .ap-nom-carte{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:64px; align-items:end; }
}
@media (min-width: 1100px){
  .ms-apropos .ap-pourquoi-tete{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); column-gap:64px; align-items:end; }
  .ms-apropos .ap-pourquoi-tete .k-citation{ max-width:none; }
}

/* =========================================================================
   13 TER. A PROPOS : LE HAUT DU VOILE DE L'APPEL FINAL
   Sur les autres pages, l'appel final suit une bande opaque. Ici, depuis
   le retrait de la bande de la portee (03/10/2026 au soir), il suit la
   pratique de l'evaluation, posee sur la scene. Le voile de l'appel
   (scene.css, .f3-appel::before, radial marine a 62 %) arrivait a 30 %
   environ sur son bord du haut : une ligne nette en travers de la scene,
   dans le prolongement du bas de la bulle de la portee, a partir de
   761 px (reprise du 04/10/2026 : luminance -20 % d'une rangee a la
   suivante a 768, 1 024 et 1 440). Le voile se fond depuis rien sur ses
   220 premiers px. Le titre commence a 260 px (padding de scene.css) :
   lui, le chapo et les boutons gardent le voile plein, sans rien changer
   a leur contraste. Au telephone, le voile est deja nul a ce bord.
   ------------------------------------------------------------------------- */
@media (min-width: 761px){
  .ms-apropos .ms-appel::before{
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 220px);
    mask-image:linear-gradient(to bottom, transparent 0, #000 220px);
  }
}

/* =========================================================================
   14. IMPRESSION ET MOUVEMENT REDUIT
   Les depliants s'ouvrent deja a l'impression (pages.css, section 13) ; la
   piste du pont garde ses barres, sans fond. Sur la scene, les depliants
   et les lignes s'ouvrent aussi (pages.css n'y est pas) ; en mouvement
   reduit, rien ne glisse ni ne tourne.
   ------------------------------------------------------------------------- */
@media print{
  .pm-piste{ border:1px solid #000; }
  .pm-piste .pm-total, .pm-piste .pm-plus{ background:#000 !important; }
  .k-depli-corps .pm-liste-depli{ display:grid !important; }
}
@media print{
  .ms-page .k-depli-corps, .ms-page .k-ligne p{ display:block !important; }
  .ms-couv{ min-height:0; padding-top:0; }
  .ms-couv::before{ display:none; }
  .ms-figure{ position:static; }
}
@media (prefers-reduced-motion: reduce){
  .ms-page .k-depli > summary::after, .ms-page .k-ligne > summary::after,
  .ms-page .k-sommaire a .f-pastille, .ms-page .k-lien-bulle, .ms-page .k-lien-bulle .f-pastille{ transition:none !important; }
  .ms-page .k-lien-bulle:active{ transform:none; }
}

/* =========================================================================
   15. METHODOLOGIE : UNE SEULE GRAMMAIRE POUR LES ETAPES ET LES BULLES
   Retouche du 04/10/2026, point 11 de Raphael (la page au telephone : des
   titres dans des bulles, des bulles sans titre, deux fois l'etape 4).
   Regle de la page, a toutes les largeurs :
   - chaque etape ouvre, hors des bulles, par son etiquette numerotee
     (01 a 05, celles du sommaire), son titre et son chapo ; l'etape 04
     n'a plus son titre dans le panneau (section 12) ;
   - les ajustements sont la suite de l'etape 04 (brief du 4 octobre,
     etape 4) : etiquette sans numero (le « 04 » qu'elle portait faisait
     lire deux fois l'etape 4), titre d'un cran plus petit (h3, la taille
     des cartes larges : 36 px, 24 au telephone, contre 48 et 28 pour un
     titre d'etape), titres de bulles en h4 ; 120 px au-dessus de leur
     etiquette au telephone (200 en large), contre 220 (440) entre la
     derniere bulle d'une etape et l'etiquette de la suivante (au
     telephone, 64 contre 128 px depuis l'audit telephone du 8 octobre,
     section 16),
   - chaque bulle ouvre par son etiquette en capitales Klein, puis son
     titre quand elle en a un : les pastilles des methodes et des
     ajustements sont devenues des etiquettes (balisage), et la liste de
     « Fixe avant les travaux » a perdu ses numeros 01 a 04, qui
     imitaient ceux des etapes (liste a filets, comme « Quand une
     information manque »).
   Au telephone, les en-tetes des duos collants (etapes 01 et 04, les
   ajustements) etaient centres (scene.css, section 8, le dessin de
   l'accueil) et ceux des bandes cales a gauche : tous a gauche ici, et
   16 px entre le titre et le chapo partout (12 dans le duo, 16 dans les
   bandes). Le voile de la colonne (scene.css) couvre toute sa largeur :
   il ne bouge pas avec l'alignement.
   ------------------------------------------------------------------------- */
.ms-methode h4{ text-wrap:balance; }
.ms-methode .ms-sous-titre{ font-size:var(--f-t-carte-l); line-height:var(--f-l-carte-l); }
/* Sous 360 px, socle.css ramene les titres d'etape a 26 px : le titre des
   ajustements passe de 24 a 22 px, pour garder le meme ecart qu'a 393
   (24 pour 28), au-dessus des titres de bulles (20). */
@media (max-width: 359px){ .ms-methode .ms-sous-titre{ font-size:22px; } }
@media (max-width: 760px){
  .ms-methode .f2-colle{ align-items:flex-start; text-align:left; }
  .ms-methode .f2-chapo-colle{ margin-top:16px; }
}
/* Le voile de la colonne de l'etape 04. Hors du panneau, son en-tete passe
   sur le moment clair de la scene (deroulFin) : le numero « 04 », azur pale
   de 12 px, en haut a gauche de la colonne, la ou le voile radial de
   scene.css (closest-side) s'efface, tombait a 3,3:1 (1 440) et 3,8:1
   (393), scene vivante. Le voile s'etend vers le haut et vers la gauche
   (coupe par la section) : l'etiquette entre dans sa partie pleine. A
   1 024, l'en-tete qui entre par le bas de l'ecran restait a 4,3:1 : le
   voile de cette colonne passe de 54, 53 et 27 % a 64, 62 et 32 % (l'aube
   du 01/10 posait 68, 66 et 34 %). Au telephone, il ne monte que de
   116 px : la scene ne laisse que 120 px (--f-souffle) entre la bande
   marine des methodes et l'etiquette, et a 180 px le voile teintait le bas
   de la bande (#03021b vire a #040522 sur ses 40 derniers px). Depuis le
   09/10/2026, la scene n'en laisse plus que 64 : le voile garde ses 116 px
   mais sa partie haute est coupee au ras de la bande (section 16).
   Mesure du 04/10/2026 (2e centile, scene vivante puis mouvement reduit,
   Chrome 1 440, 1 024, 768, 393, 320, WebKit iPhone 15 et SE) : numero
   « 04 » 5,1:1 au pire (1 024), etiquette, titre et chapo 7,3:1 et plus.
   Sans ce voile renforce, le numero tombe a 2,8:1 (1 024). Clarte moyenne
   de l'ecran, en-tete 04 visible : 1 a 5 % de moins qu'avec le voile
   commun ; le contraste prime. */
.ms-methode .ms-synthese > .f-conteneur > .f-colle::before{ inset:-200px -120px -124px -260px;
  background:radial-gradient(closest-side, rgba(var(--f-voile),.64) 0, rgba(var(--f-voile),.62) 58%, rgba(var(--f-voile),.32) 82%, rgba(var(--f-voile),0)); }
@media (max-width: 760px){
  .ms-methode .ms-synthese > .f-conteneur > .f-colle::before{ inset:-116px -120px -84px -200px; }
}

/* =========================================================================
   16. TELEPHONE : L'AUDIT DU 8 OCTOBRE 2026 (lot 6)
   Retouche du 09/10/2026, sous 760 px seulement, d'apres l'audit
   telephone du 8 octobre (lot 6, constats 61 a 74, 83, 87, 172, 175, 211
   et 214) : la methodologie et A propos gardaient au telephone les
   espacements du bureau, des chapos justifies a trous et des etiquettes de
   12 px. Tout le contenu reste affiche a sa place, rien n'est masque ni
   replie ni deplace : seuls changent les espacements, les tailles et les
   alignements. C'etait la premiere passe. La seconde passe, section 17,
   masque la figure des methodes et replie les ajustements de la
   methodologie. A partir de 761 px, rien ne change.
   Les jetons sont poses sur main, pas sur body : le pied (titres de
   colonnes en --f-t-etiquette) et le bandeau de consentement (ecart entre
   ses boutons) restent ceux des autres pages.
   ------------------------------------------------------------------------- */
@media (max-width: 760px){
  /* Le rythme (constats 62 et 214). Les espacements du bureau (scene de
     120 px entre deux blocs, bandes de 100 px en haut et en bas, appel
     final de 120 et 160 px) laissaient 1,2 ecran de vide sur la
     methodologie et 0,85 sur A propos. Scene de 64 px entre deux blocs,
     bandes de 64 px, 64 px entre l'etape 04 et ses ajustements (moitie de
     l'ecart entre deux etapes, 128 px : ils en sont la suite), appel final
     de 72 et 96 px. La bande du parcours d'A propos (.ms-parcours) sort en
     64 px par le meme jeton. */
  .ms-page main{ --f-souffle:64px; --f-bande-haut:64px; --f-entre-duos:64px; }
  .ms-page .f3-appel{ padding:72px 0 96px; }

  /* Les etiquettes en capitales (constat 83) : 13 px et 0,22 em au lieu de
     12 px et 0,3 em, la meme largeur de ligne a peu pres, lues d'un coup
     d'oeil. Le numero d'etape, dans l'etiquette, suit. La legende de la
     figure des methodes aussi. Les deux boutons empiles de l'appel final
     a 8 px l'un de l'autre au lieu de 4 (constat 175). */
  .ms-page main{ --f-t-etiquette:13px; --f-espace-etiquette:.22em; --f-ecart-entre-boutons:8px; }
  .ms-page .ms-legende-sur{ font-size:13px; letter-spacing:.1em; }

  /* Les chapos (constats 66, 170 et 171) : six chapos de 18 px justifies
     sur 353 px ouvraient des blancs de 9 a 11 px entre les mots pour une
     espace de 4,3 px, et coupaient cinq mots. Au fer a gauche, sans
     cesure automatique (hyphenate-limit-chars n'agit pas dans Safari, et
     a 17 px sur 353 px aucune coupe n'est necessaire), en 17 px sur 1,5.
     L'interligne de socle.css (section 13, calc(1em + .6rem) avec
     !important) est battu de meme, sur ces seuls chapos. Les noms propres
     restent proteges (.nom-propre, socle.css). */
  .ms-page main{ --f-t-chapo:17px; }
  .ms-page main .f-chapo{
    text-align:left; text-align-last:auto; -webkit-hyphens:manual; hyphens:manual;
    line-height:1.5 !important;
  }

  /* Les titres des duos au fer a gauche sur les deux pages (constat 72) :
     « La pratique de l'evaluation » d'A propos etait le seul element
     centre de la page. La methodologie l'etait deja (section 15). */
  .ms-page .f2-colle{ align-items:flex-start; text-align:left; }

  /* Les notes des bulles (constat 172) : 15 px sur 1,5 au lieu de 14 px,
     le seul texte courant du site sous 15 px. */
  .ms-page .ms-note{ font-size:15px; line-height:1.5; }

  /* Les ancres du sommaire de la methodologie (constat 87). La page
     (socle.css) et les sections (section 6) reservaient chacune 100 px :
     l'etiquette d'une etape tombait a 200 px du haut, a 300 px dans une
     bande (son rembourrage en plus), sous une barre qui s'arrete a 80 px.
     L'etiquette tombe maintenant a 100 px du haut dans les cinq cas : 0
     de marge pour les duos, dont l'etiquette ouvre la section, et -64 px
     pour les bandes, qui la portent sous leurs 64 px de rembourrage. */
  .ms-methode #perimetre, .ms-methode #synthese{ scroll-margin-top:0; }
  .ms-methode #retraitements, .ms-methode #methodes, .ms-methode #incertitudes{ scroll-margin-top:-64px; }

  /* Le voile des colonnes collantes qui suivent une bande opaque (etape
     04 de la methodologie, « La pratique de l'evaluation » d'A propos). Il
     monte de 116 et 104 px au-dessus de la colonne (section 15 plus haut,
     scene.css) et la scene n'en laisse plus que 64 entre la bande marine et
     le titre : il aurait teinte les 52 et 40 derniers px de la bande. Le
     voile garde son dessin, dont le numero « 04 » tire son contraste (un
     voile qui ne montait que de 60 px le faisait tomber de 5,8 a 4,65:1,
     Chromium, scene vivante), mais sa partie haute est coupee au ras de la
     bande (clip-path) : sur la scene, rien ne change. */
  .ms-methode .ms-synthese > .f-conteneur > .f-colle::before{ clip-path:inset(52px 0 0 0); }
  .ms-apropos .ms-duo > .f-conteneur > .f-colle::before{ clip-path:inset(40px 0 0 0); }

  /* A propos, le nom (constat 211) : en 27 px, il etait le seul titre de
     premier ecran sous 34 px du site. 34 px a 393 px, sur deux lignes et
     un interligne de 1,05. « Rodriguez-Ginestet », insecable, mesure 8,6
     fois la taille du corps : la taille suit la largeur de la bulle (11 %
     de son contenu), 32 px a 375 px, 27 px a 320 px comme avant. 38 px
     deborderait de la bulle. */
  .ms-apropos .ap-nom strong{ font-size:clamp(27px, 11cqi, 34px); line-height:1.05; }

  /* A propos, les trois piliers (constat 73) : trois tuiles de 117 a
     140 px pour 4 a 10 mots. En liste serree, le numero dans sa colonne a
     gauche, le mot fort puis son complement dessous, 12 et 16 px de
     rembourrage, 8 px entre les piliers. */
  .ms-apropos .ap-piliers{ gap:14px; padding-top:24px; }
  .ms-apropos .ap-piliers-liste{ gap:8px; }
  .ms-apropos .ap-piliers-liste > li{
    display:grid; grid-template-columns:28px minmax(0,1fr); column-gap:6px; row-gap:2px; align-items:start;
    padding:12px 16px 13px; font-size:15px; line-height:1.4;
  }
  .ms-apropos .ap-piliers-liste > li::before{ grid-row:1 / span 2; margin:0; line-height:24px; }
  .ms-apropos .ap-piliers-liste strong{ font-size:20px; line-height:24px; }
  .ms-apropos .ap-chute{ padding-top:24px; }
}

/* L'etude de cas (pages sur le bleu, .k-page : cette feuille n'est chargee
   par aucune autre page sur le bleu), meme audit (constats 83 et 85) :
   les etiquettes en 13 px et 0,22 em, et la ligne de meta sous le titre
   (duree, cas reconstitue, auteur, dates) en 13 px, ses ecarts resserres
   (54 px de haut au lieu de 96 a 393 px) : la bulle de l'ecart et ses deux
   chiffres montent de 46 px, de 566 a 520 px du haut. Les deux
   boutons empiles de l'appel final a 8 px l'un de l'autre au lieu de 4
   (constat 175). Le tableau des quatre methodes : section 4. */
@media (max-width: 760px){
  .k-page main{ --k-t-etiquette:13px; --f-ecart-entre-boutons:8px; }
  .k-page main .k-etiquette, .k-page main .k-bulle-etiquette, .k-page main .k-numero{ letter-spacing:.22em; }
  .k-page .k-couv .k-meta{ gap:0 14px; margin-top:14px; font-size:13px; line-height:18px; }
  /* Le lien de l'auteur garde ses 44 px au toucher (pages.css, section 6)
     sans plus hausser sa ligne a 44 px : sa zone deborde de 13 px en haut
     et en bas sur les lignes voisines, qui ne portent que du texte. Les
     quatre mentions tiennent sur trois lignes, deux etant impossibles sans
     toucher au texte (411 px pour 353 a 393 px). */
  .k-page .k-couv .k-meta a{ margin-block:-13px; }
}

/* =========================================================================
   17. TELEPHONE : LA SECONDE PASSE (methodologie)
   Seconde passe telephone, delegation de Raphael (09/10/2026, audit du
   8 octobre, constats 67 et 68), sous 760 px seulement. A partir de
   761 px, rien ne change.
   - La figure « Convergence des methodes » (constat 67) : une page du
     rapport dessinee a 900 px et affichee a 353 px, ses textes a 4,7 px,
     illisibles, sur 424 px de haut. L'image est masquee, elle reste dans
     la page. Restent sa legende et sa note, dont le lien vers le rapport
     d'exemple, ou l'extrait 08 se lit en grand : « Convergence des
     methodes », puis « Extrait du rapport d'exemple, un cas fictif. ».
   - Les ajustements (constat 68) : quatre bulles de 199 a 250 px (1,46
     ecran), une sixieme etape de fait que le sommaire n'annonce pas,
     passent en accordeon, fermees au chargement. Le script en fin de
     methodologie.html reunit l'etiquette et le titre de chaque bulle dans
     une tete (.ms-ajust-tete), glisse un bouton dans le titre et pose
     .ms-ajust--accordeon sur la section tant que la fenetre fait 760 px ou
     moins. Le dessin est celui des piliers de l'accueil (schema.css,
     section 9) : toute la tete est la cible (le ::after du bouton la
     couvre et porte l'anneau de focus), un chevron Klein de 2 px dans un
     rond de papier de 32 px (#F1F2F6, #E6EBF7 au survol, les valeurs de
     schema.css) dit l'etat, vers le bas ferme, vers le haut ouvert. Le
     paragraphe d'une bulle fermee est masque, il reste dans la page. Sans
     script, les quatre bulles restent ouvertes.
   - Les regles portent sur l'ecran seul (screen), comme la requete du
     script (reprise du meme jour) : imprimee depuis un ordinateur, sur A4
     ou Letter (boite de 718 a 739 px), la page garde sa figure et les
     quatre textes des ajustements, comme avant.
   ------------------------------------------------------------------------- */
@media screen and (max-width: 760px){
  .ms-methode .ms-figure .ms-image{ display:none; }
  .ms-methode .ms-figure-note{ margin-top:4px; }

  .ms-ajust--accordeon .ms-carte{ padding:0; gap:0; }
  .ms-ajust--accordeon .ms-ajust-tete{
    position:relative; display:flex; flex-direction:column; gap:10px; padding:20px 64px 20px 22px;
  }
  .ms-ajust--accordeon .ms-ajust-tete > *{ margin:0; }
  .ms-ajust--accordeon .ms-ajust-choix{
    display:block; width:100%; margin:0; padding:0; border:0; background:none;
    font:inherit; letter-spacing:inherit; color:inherit; text-align:left; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .ms-ajust--accordeon .ms-ajust-choix::after{
    content:""; position:absolute; inset:0; border-radius:var(--f-r-bulle); cursor:pointer;
  }
  .ms-ajust--accordeon .ms-carte--ouverte .ms-ajust-choix::after{ border-radius:var(--f-r-bulle) var(--f-r-bulle) 0 0; }
  .ms-ajust--accordeon .ms-ajust-choix:focus-visible{ outline:none; }
  .ms-ajust--accordeon .ms-ajust-choix:focus-visible::after{ outline:2px solid var(--g-klein); outline-offset:-3px; }
  .ms-ajust--accordeon .ms-carte:not(.ms-carte--ouverte) > .ms-texte{ display:none; }
  .ms-ajust--accordeon .ms-texte{ padding:0 22px 24px; }
  /* Le chevron : un rond de papier de 32 px, une fleche Klein de 2 px */
  .ms-ajust--accordeon .ms-ajust-tete::before,
  .ms-ajust--accordeon .ms-ajust-tete::after{ content:""; position:absolute; pointer-events:none; }
  .ms-ajust--accordeon .ms-ajust-tete::before{
    right:20px; top:50%; width:32px; height:32px; margin-top:-16px; border-radius:50%; background:#F1F2F6;
  }
  .ms-ajust--accordeon .ms-ajust-tete::after{
    right:32px; top:50%; width:8px; height:8px; margin-top:-6px;
    border-right:2px solid var(--g-klein); border-bottom:2px solid var(--g-klein);
    transform:rotate(45deg); transition:transform .2s ease, margin-top .2s ease;
  }
  .ms-ajust--accordeon .ms-carte--ouverte .ms-ajust-tete::after{ transform:rotate(-135deg); margin-top:-2px; }
  @media (hover:hover){
    .ms-ajust--accordeon .ms-ajust-tete:hover::before{ background:#E6EBF7; }
  }
}
@media screen and (max-width: 760px) and (prefers-reduced-motion: reduce){
  .ms-ajust--accordeon .ms-ajust-tete::after{ transition:none; }
}